@mgdis/mg-components 5.27.2 → 5.27.4

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

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-7e27c7ae.js');
-const index$1 = require('./index-00072168.js');
+const index = require('./index-3198e64e.js');
+const index$1 = require('./index-11b35234.js');
 
 /**
  * Available menu-item positions
@@ -79,7 +79,7 @@ const MgActionMore = class {
          ************/
         this.name = 'mg-action-more';
         this.classBase = 'mg-c-action-more';
-        this.mgPopoverIdentifier = index$1.Me(this.name);
+        this.mgPopoverIdentifier = index$1.Ce(this.name);
         /************
          * Methods *
          ***********/
@@ -203,7 +203,7 @@ const MgBadge = class {
         this.label = undefined;
         this.variant = variants$5[0];
         this.outline = undefined;
-        this.classCollection = new index$1.Oe(['mg-c-badge']);
+        this.classCollection = new index$1.He(['mg-c-badge']);
     }
     validateValue(newValue) {
         if (/^(\d+\+*|[?*!a-z])$/i.exec(`${newValue}`) === null) {
@@ -211,7 +211,7 @@ const MgBadge = class {
         }
     }
     validateLabel(newValue) {
-        if (!index$1.Ne(newValue)) {
+        if (!index$1.Ie(newValue)) {
             throw new Error('<mg-badge> prop "label" is required.');
         }
     }
@@ -322,7 +322,7 @@ const MgButton = class {
         this.isIcon = false;
         this.disableOnClick = false;
         this.loading = false;
-        this.classCollection = new index$1.Oe(['mg-c-button']);
+        this.classCollection = new index$1.He(['mg-c-button']);
     }
     validateVariant(newValue, oldValue) {
         if (!variants$4.includes(newValue)) {
@@ -381,7 +381,7 @@ const MgButton = class {
         this.validateFullWidth(this.fullWidth);
         if (this.isIcon) {
             this.classCollection.add(`mg-c-button--icon`);
-            if (!index$1.Ne(this.label)) {
+            if (!index$1.Ie(this.label)) {
                 throw new Error(`<mg-button> prop "label" is mandatory when prop "isIcon" is set to true.`);
             }
         }
@@ -393,7 +393,7 @@ const MgButton = class {
      * Add listners
      */
     componentDidLoad() {
-        index$1.Ce(() => {
+        index$1.Ge(() => {
             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;
@@ -452,7 +452,7 @@ const MgCard = class {
         };
         this.variant = undefined;
         this.variantStyle = undefined;
-        this.classCollection = new index$1.Oe([this.classBase]);
+        this.classCollection = new index$1.He([this.classBase]);
     }
     validateVariant(newValue, oldValue) {
         if (newValue && !variants$3.includes(newValue))
@@ -557,7 +557,7 @@ const MgDetails = class {
         this.expanded = false;
     }
     validateTitles(newValue) {
-        if (!index$1.Ne(newValue)) {
+        if (!index$1.Ie(newValue)) {
             throw new Error('<mg-details> prop "toggleClosed" and "toggleOpened" must be defined.');
         }
     }
@@ -715,7 +715,7 @@ const MgForm = class {
                 }
             });
         };
-        this.identifier = index$1.Me('mg-form');
+        this.identifier = index$1.Ce('mg-form');
         this.name = this.identifier;
         this.readonly = false;
         this.requiredMessage = undefined;
@@ -724,7 +724,7 @@ const MgForm = class {
         this.disabled = false;
         this.valid = undefined;
         this.invalid = undefined;
-        this.classCollection = new index$1.Oe(['mg-c-form']);
+        this.classCollection = new index$1.He(['mg-c-form']);
         this.requiredMessageText = undefined;
     }
     validateRequiredMessage(newValue) {
@@ -865,7 +865,7 @@ const MgIcon = class {
         this.variant = undefined;
         this.variantStyle = undefined;
         this.spin = false;
-        this.classCollection = new index$1.Oe(['mg-c-icon']);
+        this.classCollection = new index$1.He(['mg-c-icon']);
     }
     validateIcon(newValue, oldValue) {
         if (!Object.keys(icons).includes(newValue))
@@ -964,7 +964,7 @@ const MgIllustratedMessage = class {
     componentDidLoad() {
         const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
         const slottedIllustrations = this.element.querySelectorAll('[slot="illustration"]');
-        if (!index$1.De(this.element.querySelector('[slot="title"]'), headingTags)) {
+        if (!index$1.Be(this.element.querySelector('[slot="title"]'), headingTags)) {
             throw new Error(`<mg-illustrated-message> Slotted title must be a heading: ${headingTags.join(', ')}`);
         }
         else if (slottedIllustrations.length !== 1) {
@@ -1004,6 +1004,7 @@ var Handler;
 (function (Handler) {
     Handler["BLUR"] = "blur";
     Handler["FOCUS"] = "focus";
+    Handler["MOUSEENTER"] = "mouseenter";
 })(Handler || (Handler = {}));
 const classFieldset = 'mg-c-input--fieldset';
 const classDisabled = 'mg-c-input--disabled';
@@ -1064,7 +1065,7 @@ const MgInput = class {
         this.isVerticalList = false;
     }
     watchIdentifier(newValue) {
-        if (!index$1.Ne(newValue)) {
+        if (!index$1.Ie(newValue)) {
             throw new Error('<mg-input> prop "identifier" is required.');
         }
         else {
@@ -1149,7 +1150,7 @@ const MgInput = class {
      */
     // eslint-disable-next-line @stencil-community/no-unused-watch
     watchLabel() {
-        if (!index$1.Ne(this.label)) {
+        if (!index$1.Ie(this.label)) {
             throw new Error('<mg-input> prop "label" is required.');
         }
         else {
@@ -1310,7 +1311,7 @@ index.h("ul", { class: "mg-c-input__input-group-container", role: "list", "aria-
     var _a, _b;
     return (index.h("li", { key: input._id, class: { 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': props.disabled || input.disabled } },
         index.h("input", { type: "checkbox", id: input._id, name: props.name, value: (_a = input.value) === null || _a === void 0 ? void 0 : _a.toString(), checked: Boolean(input.value), required: input.required, "aria-invalid": ((_b = props.invalid) === null || _b === void 0 ? void 0 : _b.toString()) || 'false', disabled: props.disabled || input.disabled, indeterminate: input.value === null, onInput: input._handleInput, onBlur: input._handleBlur, onKeyDown: input._handleKeydown }),
-        index.h("label", { htmlFor: input._id }, input.title)));
+        index.h("label", { htmlFor: input._id, onMouseEnter: input._handleMouseEnter, onMouseLeave: input._handleMouseLeave }, input.title)));
 })));
 
 const mgInputCheckboxCss = ".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}}.mg-c-input__input-container{width:100%;flex:1 auto}.mg-c-input__box.mg-c-input__box--width{width:100%;min-width:5rem;max-width:calc(17.7rem + var(--mg-inputs-spacer)*2)}.mg-c-input.mg-c-input--width-2 .mg-c-input__box,.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left{max-width:5rem}.mg-c-input.mg-c-input--width-4 .mg-c-input__box,.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left{max-width:7rem}.mg-c-input.mg-c-input--width-16 .mg-c-input__box,.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left{max-width:21rem}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%;max-width:100%}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-2 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-2 .mg-c-input__with-character-left{max-width:5rem}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-4 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-4 .mg-c-input__with-character-left{max-width:7rem}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-16 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-16 .mg-c-input__with-character-left{max-width:21rem}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-full .mg-c-input__box{width:100%;max-width:100%}.mg-c-input.mg-c-input--label-on-top .mg-c-input__box{width:auto}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(*:not(mg-input-title)){width:100%;max-width:100%}.mg-c-input.mg-c-input--fieldset{padding:0;border:0;margin-right:0;margin-left:0}.mg-c-input.mg-c-input--fieldset input[type=radio],.mg-c-input.mg-c-input--fieldset input[type=checkbox]{width:var(--mg-input-check-size);height:var(--mg-input-check-size);flex-shrink:0;margin:calc((var(--font-size)*var(--line-height) - var(--mg-input-check-size))/2) .6rem 0 0}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group{display:flex;align-items:start}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group-container{display:flex;flex-wrap:wrap;padding:0;margin:0;margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);gap:1rem 2.3rem;list-style:none}.mg-c-input.mg-c-input--fieldset.mg-c-input--vertical-list .mg-c-input__input-group-container,.mg-c-input.mg-c-input--fieldset.mg-c-input--checkbox-multi .mg-c-input__input-group-container{flex-direction:column}.mg-c-input.mg-c-input--fieldset.mg-c-input--label-on-top .mg-c-input__input-group-container{margin-top:.7rem}:host(.mg-c-input.mg-c-input--fieldset:not(.mg-c-input--checkbox-multi)) .mg-c-input__input-container mg-tooltip{margin-left:3rem}:host(.mg-c-input.mg-c-input--checkbox) .mg-c-input__input,:host(.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset;align-items:flex-start}:host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>ul{display:flex;flex-flow:column wrap;padding:0;margin:0;list-style:none;row-gap:.8rem}.mg-c-input__input-container>strong{display:inline-block}.mg-c-input__input-container>strong,.mg-c-input__input-container>ul{min-height:var(--font-size);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-c-input__input{display:flex;min-height:var(--default-size);align-items:center;justify-content:start}.mg-c-input__input mg-tooltip{align-self:baseline;margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input ::slotted(.mg-c-input__button-toggle:disabled),.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--disabled .mg-c-input__input-container strong{opacity:var(--mg-disabled-opacity)}.mg-c-input__title{display:flex;width:var(--mg-inputs-title-width, auto);flex-shrink:0;align-items:baseline;justify-content:flex-end;margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-c-input__title slot[name=label]+mg-tooltip{margin-left:.4rem}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__error ::slotted(*),.mg-c-input__help-text ::slotted(*){font-size:1.2rem;text-align:start}.mg-c-input__help-text+.mg-c-input__error{margin-top:.2rem}:host(:not(.mg-c-input--textarea)) .mg-c-input__input+.mg-c-input__error,:host(:not(.mg-c-input--textarea)) .mg-c-input__input+.mg-c-input__help-text{margin-top:.5rem}.mg-c-input.mg-c-input--readonly>*:not([slot=label],[name=append-input]),.mg-c-input.mg-c-input--readonly ::slotted(mg-button[slot=append-input]){display:none}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}:host(.mg-c-input){display:flex}:host(.mg-c-input.mg-c-input--textarea.mg-c-input--readonly) .mg-c-input__input-container{white-space:pre-line}:host(.mg-c-input.mg-c-input--checkbox,.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset}:host(.mg-c-input.mg-c-input--label-on-top){flex-direction:column}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:.3rem;text-align:left}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}@media screen and (max-width: 767px){:host(.mg-c-input){flex-direction:column}:host(.mg-c-input) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:.3rem;text-align:left}:host(.mg-c-input) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}}.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}}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-group-container{padding:.4rem calc(0.4rem*2) .4rem calc(0.4rem/2);margin:0}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-container{display:flex;width:unset;flex:unset;flex-wrap:wrap;column-gap:calc(var(--mg-inputs-spacer)*1.2)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-container-list{display:flex;flex-flow:row wrap;gap:calc(0.4rem*1);padding:0;margin:0;list-style:none}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__sections{display:flex;flex-flow:column nowrap;gap:calc(0.4rem*0);max-height:80vh;padding-right:1rem;overflow-y:auto}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__section-header{display:flex;flex-flow:row wrap;gap:calc(0.4rem*2);min-height:var(--default-size);flex-wrap:nowrap;align-items:center;text-wrap:nowrap}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__section-header-tootlip{display:inline-block;width:auto;height:auto;margin:0}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__section-header-title{display:inline;margin:0;color:hsl(var(--mg-color-dark-40-hsl))}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__section-header-title-label{font-size:var(--font-size)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__section-header-title--static.mg-c-input__section-header-title{margin:0 1.1rem}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-value{display:inline-flex;min-width:var(--default-size);min-height:var(--default-size);box-sizing:border-box;align-items:center;justify-content:center;padding:calc((var(--default-size) - .2rem - var(--font-size)*var(--line-height))/2) 1.1rem;border-radius:.3rem;background-color:hsl(var(--mg-color-dark-5-hsl));font-size:var(--font-size)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__content{display:flex;flex-flow:column nowrap;gap:calc(0.4rem*2)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-group{margin-left:calc(0.4rem*2)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-no-result{text-align:center}.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--with-values .mg-c-input__input-container{gap:.4rem}.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--search-mode .mg-c-input__content{width:37rem;height:40rem}.mg-c-input.mg-c-input--checkbox-multi:not(.mg-c-input--label-on-top) mg-tooltip:not(.mg-c-input__section-header-tootlip){margin-left:var(--mg-inputs-spacer)}.mg-c-input.mg-c-input--checkbox-multi mg-popover{--mg-popover-min-width:7rem;--mg-card-padding:calc(0.4rem * 2)}.mg-c-input.mg-c-input--checkbox-multi mg-input-text{--mg-inputs-margin-bottom:0}";
@@ -1375,7 +1376,11 @@ const MgInputCheckbox = class {
         /**
          * Handle blur event
          */
-        this.handleBlur = () => {
+        this.handleBlur = (event) => {
+            if (this.handlerInProgress === Handler.MOUSEENTER) {
+                event.preventDefault();
+                return;
+            }
             // set guard
             this.handlerInProgress = Handler.BLUR;
             // Check validity
@@ -1424,6 +1429,18 @@ const MgInputCheckbox = class {
             });
             this.updateValues();
         };
+        /**
+         * Handle input label mouseenter event
+         */
+        this.handleMouseEnter = () => {
+            this.handlerInProgress = Handler.MOUSEENTER;
+        };
+        /**
+         * Handle input label leave event
+         */
+        this.handleMouseLeave = () => {
+            this.handlerInProgress = undefined;
+        };
         /**
          * Update values
          */
@@ -1432,6 +1449,8 @@ const MgInputCheckbox = class {
                 delete o._handleBlur;
                 delete o._handleInput;
                 delete o._handleKeydown;
+                delete o._handleMouseEnter;
+                delete o._handleMouseLeave;
                 delete o._id;
                 return o;
             });
@@ -1445,7 +1464,7 @@ const MgInputCheckbox = class {
          * Method to update searchResults
          */
         this.updateSearchResults = () => {
-            this.searchResults = this.checkboxItems.filter(item => index$1.Ue(item.title).includes(index$1.Ue(this.searchValue)));
+            this.searchResults = this.checkboxItems.filter(item => index$1.qe(item.title).includes(index$1.qe(this.searchValue)));
         };
         /**
          * Method to validate if one of inputs value is checked id required
@@ -1519,7 +1538,7 @@ const MgInputCheckbox = class {
         this.helpText = undefined;
         this.valid = undefined;
         this.invalid = undefined;
-        this.classCollection = new index$1.Oe([this.baseClassName, classFieldset]);
+        this.classCollection = new index$1.He([this.baseClassName, classFieldset]);
         this.errorMessage = undefined;
         this.checkboxItems = [];
         this.displaySearchInput = undefined;
@@ -1529,7 +1548,7 @@ const MgInputCheckbox = class {
     }
     validateValue(newValue) {
         if (isCheckboxItems(newValue)) {
-            this.checkboxItems = newValue.map((item, index) => (Object.assign(Object.assign({}, item), { _id: `${this.identifier}_${index}`, _handleInput: this.handleInput.bind(this), _handleBlur: this.handleBlur.bind(this), _handleKeydown: this.handleKeydown.bind(this) })));
+            this.checkboxItems = newValue.map((item, index) => (Object.assign(Object.assign({}, item), { _id: `${this.identifier}_${index}`, _handleInput: this.handleInput.bind(this), _handleBlur: this.handleBlur.bind(this), _handleKeydown: this.handleKeydown.bind(this), _handleMouseEnter: this.handleMouseEnter.bind(this), _handleMouseLeave: this.handleMouseLeave.bind(this) })));
             this.valueChange.emit(newValue);
         }
         else {
@@ -1627,7 +1646,7 @@ const MgInputCheckbox = class {
         if (typeof valid !== 'boolean') {
             throw new Error('<mg-input-checkbox> method "setError()" param "valid" must be a boolean');
         }
-        else if (!index$1.Ne(errorMessage)) {
+        else if (!index$1.Ie(errorMessage)) {
             throw new Error('<mg-input-checkbox> method "setError()" param "errorMessage" must be a string');
         }
         else {
@@ -1740,7 +1759,7 @@ const MgInputCheckbox = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("mg-input", { key: 'b695390b3a9525ba849c4442c6c6b0e643ec7348', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, readonlyValue: this.value.filter(({ value }) => value).map(({ title }) => title), tooltip: !this.readonly ? this.tooltip : undefined, tooltipPosition: this.tooltipPosition, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined }, this.type === 'checkbox' || this.readonly ? (index.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.renderCheckboxMulti())));
+        return (index.h("mg-input", { key: '619a108d13b49c7b74dded7afa759202aa909abb', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, readonlyValue: this.value.filter(({ value }) => value).map(({ title }) => title), tooltip: !this.readonly ? this.tooltip : undefined, tooltipPosition: this.tooltipPosition, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined }, this.type === 'checkbox' || this.readonly ? (index.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.renderCheckboxMulti())));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -1890,7 +1909,7 @@ const MgInputDate = class {
          * @param value - value to test
          * @returns truthy when value match the pattern
          */
-        this.isValidPattern = (value) => index$1.Ne(value) && index$1.ge.test(value);
+        this.isValidPattern = (value) => index$1.Ie(value) && index$1.he.test(value);
         /**
          * Format help text to display
          * @param helpText - help text format
@@ -1898,10 +1917,10 @@ const MgInputDate = class {
          */
         this.formatHelpText = (helpText) => {
             const defaultHelpTextVariable = '{defaultHelpText}';
-            let text = index$1.Ne(helpText) ? helpText : this.messages.input.date.helpText;
+            let text = index$1.Ie(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}', index$1.pe(index$1.ze(new Date('2023-12-24')), this.systemLocale));
+            return text.replace('{pattern}', this.renderPattern()).replace('{date}', index$1.ye(index$1.Ze(new Date('2023-12-24')), this.systemLocale));
         };
         /**
          * Handle input event
@@ -1993,8 +2012,8 @@ const MgInputDate = class {
                 // min, max & minMax
                 else if ([InputError$1.MIN, InputError$1.MAX, InputError$1.MINMAX].includes(inputError)) {
                     this.errorMessage = this.messages.errors.date[inputError]
-                        .replace('{min}', index$1.pe(this.min, this.systemLocale))
-                        .replace('{max}', index$1.pe(this.max, this.systemLocale));
+                        .replace('{min}', index$1.ye(this.min, this.systemLocale))
+                        .replace('{max}', index$1.ye(this.max, this.systemLocale));
                 }
                 // wrong date format
                 // element.validity.badInput is default error message
@@ -2008,7 +2027,7 @@ const MgInputDate = class {
          * @returns translated html pattern
          */
         this.renderPattern = () => {
-            let patternLocal = index$1.We(this.systemLocale);
+            let patternLocal = index$1.Qe(this.systemLocale);
             for (const key in this.messages.input.date.pattern) {
                 patternLocal = patternLocal.replace(key, this.messages.input.date.pattern[key]);
             }
@@ -2030,7 +2049,7 @@ const MgInputDate = class {
         this.helpText = undefined;
         this.valid = undefined;
         this.invalid = undefined;
-        this.classCollection = new index$1.Oe(['mg-c-input--date']);
+        this.classCollection = new index$1.He(['mg-c-input--date']);
         this.errorMessage = undefined;
     }
     validateValue(newValue) {
@@ -2038,7 +2057,7 @@ const MgInputDate = class {
         if (newValue === '')
             newValue = null;
         // check value validity
-        if (newValue && !index$1.Ne(newValue)) {
+        if (newValue && !index$1.Ie(newValue)) {
             throw new Error("<mg-input-date> props 'value' must be a valid string");
         }
         else if (!newValue || (newValue && this.isValidPattern(newValue))) {
@@ -2095,7 +2114,7 @@ const MgInputDate = class {
         if (typeof valid !== 'boolean') {
             throw new Error('<mg-input-date> method "setError()" param "valid" must be a boolean');
         }
-        else if (!index$1.Ne(errorMessage)) {
+        else if (!index$1.Ie(errorMessage)) {
             throw new Error('<mg-input-date> method "setError()" param "errorMessage" must be a string');
         }
         else {
@@ -2149,7 +2168,7 @@ const MgInputDate = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("mg-input", { key: 'f38d79cb71311149b4d15885b65cd8f025dde15d', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonlyValue: index$1.pe(this.value, this.locale), tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, index.h("input", { key: '67bf6f0ad58ee1a506ffd0d3d41d5954db68465c', 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 (index.h("mg-input", { key: 'f38d79cb71311149b4d15885b65cd8f025dde15d', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonlyValue: index$1.ye(this.value, this.locale), tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, index.h("input", { key: '67bf6f0ad58ee1a506ffd0d3d41d5954db68465c', 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;
             } })));
@@ -2280,9 +2299,9 @@ const MgInputNumeric = class {
         this.formatValue = (value) => {
             switch (this.format) {
                 case 'number':
-                    return index$1.we(value, this.locale, this.type === 'decimal' ? this.decimalLength : undefined);
+                    return index$1.Ye(value, this.locale, this.type === 'decimal' ? this.decimalLength : undefined);
                 case 'currency':
-                    return index$1.qe(value, this.locale, this.currency);
+                    return index$1.Je(value, this.locale, this.currency);
                 case 'none':
                     return value.toString();
             }
@@ -2319,7 +2338,7 @@ const MgInputNumeric = class {
         this.decimalLength = 2;
         this.valid = undefined;
         this.invalid = undefined;
-        this.classCollection = new index$1.Oe(['mg-c-input--numeric']);
+        this.classCollection = new index$1.He(['mg-c-input--numeric']);
         this.errorMessage = undefined;
         this.hasFocus = undefined;
     }
@@ -2415,7 +2434,7 @@ const MgInputNumeric = class {
         if (typeof valid !== 'boolean') {
             throw new Error('<mg-input-numeric> method "setError()" param "valid" must be a boolean');
         }
-        else if (!index$1.Ne(errorMessage)) {
+        else if (!index$1.Ie(errorMessage)) {
             throw new Error('<mg-input-numeric> method "setError()" param "errorMessage" must be a string');
         }
         else {
@@ -2607,7 +2626,7 @@ const MgInputPassword = class {
         this.helpText = undefined;
         this.valid = undefined;
         this.invalid = undefined;
-        this.classCollection = new index$1.Oe(['mg-c-input--password']);
+        this.classCollection = new index$1.He(['mg-c-input--password']);
         this.errorMessage = undefined;
         this.displayPassword = false;
     }
@@ -2665,7 +2684,7 @@ const MgInputPassword = class {
         if (typeof valid !== 'boolean') {
             throw new Error('<mg-input-password> method "setError()" param "valid" must be a boolean');
         }
-        else if (!index$1.Ne(errorMessage)) {
+        else if (!index$1.Ie(errorMessage)) {
             throw new Error('<mg-input-password> method "setError()" param "errorMessage" must be a string');
         }
         else {
@@ -2812,7 +2831,7 @@ const MgInputRadio = class {
         this.helpText = undefined;
         this.valid = undefined;
         this.invalid = undefined;
-        this.classCollection = new index$1.Oe(['mg-c-input--radio', classFieldset]);
+        this.classCollection = new index$1.He(['mg-c-input--radio', classFieldset]);
         this.errorMessage = undefined;
         this.options = undefined;
     }
@@ -2825,7 +2844,7 @@ const MgInputRadio = class {
             throw new Error('<mg-input-radio> prop "items" require at least 2 items.');
         }
         // String array
-        else if (index$1.Fe(newValue)) {
+        else if (index$1.Pe(newValue)) {
             this.options = newValue.map(item => ({ title: item, value: item, disabled: this.disabled }));
         }
         // Object array
@@ -2884,7 +2903,7 @@ const MgInputRadio = class {
         if (typeof valid !== 'boolean') {
             throw new Error('<mg-input-radio> method "setError()" param "valid" must be a boolean');
         }
-        else if (!index$1.Ne(errorMessage)) {
+        else if (!index$1.Ie(errorMessage)) {
             throw new Error('<mg-input-radio> method "setError()" param "errorMessage" must be a string');
         }
         else {
@@ -3031,7 +3050,7 @@ const MgInputSelect = class {
             if (this.input.value === '') {
                 this.setValue(null);
             }
-            else if (index$1.Fe(this.items) && this.items.includes(this.input.value)) {
+            else if (index$1.Pe(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)) {
@@ -3105,7 +3124,7 @@ const MgInputSelect = class {
         this.helpText = undefined;
         this.valid = undefined;
         this.invalid = undefined;
-        this.classCollection = new index$1.Oe(['mg-c-input--select']);
+        this.classCollection = new index$1.He(['mg-c-input--select']);
         this.errorMessage = undefined;
         this.options = undefined;
         this.valueExist = undefined;
@@ -3113,7 +3132,7 @@ const MgInputSelect = class {
     }
     validateValue(newValue) {
         var _a, _b;
-        if (index$1.Fe(this.items) && typeof newValue === 'string') {
+        if (index$1.Pe(this.items) && typeof newValue === 'string') {
             this.readonlyValue = ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) ? this.input.value : newValue;
         }
         else if (allItemsAreOptions(this.items)) {
@@ -3130,7 +3149,7 @@ const MgInputSelect = class {
             this.options = [];
         }
         // String array
-        else if (index$1.Fe(newValue)) {
+        else if (index$1.Pe(newValue)) {
             if (typeof this.value === 'string')
                 this.valueExist = newValue.includes(this.value);
             this.options = newValue.map(item => ({ title: item, value: item }));
@@ -3202,7 +3221,7 @@ const MgInputSelect = class {
         if (typeof valid !== 'boolean') {
             throw new Error('<mg-input-select> method "setError()" param "valid" must be a boolean');
         }
-        else if (!index$1.Ne(errorMessage)) {
+        else if (!index$1.Ie(errorMessage)) {
             throw new Error('<mg-input-select> method "setError()" param "errorMessage" must be a string');
         }
         else {
@@ -3314,7 +3333,7 @@ const MgInputText = class {
          */
         this.handleFocus = () => {
             this.classCollection.add(this.classFocus);
-            this.classCollection = new index$1.Oe(this.classCollection.classes);
+            this.classCollection = new index$1.He(this.classCollection.classes);
         };
         /**
          * Handle blur event
@@ -3322,7 +3341,7 @@ const MgInputText = class {
         this.handleBlur = () => {
             // Manage focus
             this.classCollection.delete(this.classFocus);
-            this.classCollection = new index$1.Oe(this.classCollection.classes);
+            this.classCollection = new index$1.He(this.classCollection.classes);
             // Display Error
             this.handlerInProgress = Handler.BLUR;
             this.displayError().finally(() => {
@@ -3397,7 +3416,7 @@ const MgInputText = class {
         this.helpText = undefined;
         this.valid = undefined;
         this.invalid = undefined;
-        this.classCollection = new index$1.Oe(['mg-c-input--text']);
+        this.classCollection = new index$1.He(['mg-c-input--text']);
         this.errorMessage = undefined;
     }
     handleValue(newValue) {
@@ -3448,7 +3467,7 @@ const MgInputText = class {
             this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);
     }
     validatePattern(newValue) {
-        if (newValue !== undefined && !(index$1.Ne(this.pattern) && index$1.Ne(this.patternErrorMessage))) {
+        if (newValue !== undefined && !(index$1.Ie(this.pattern) && index$1.Ie(this.patternErrorMessage))) {
             throw new Error('<mg-input-text> props "pattern" and "patternErrorMessage" must be non-empty string and paired.');
         }
     }
@@ -3478,7 +3497,7 @@ const MgInputText = class {
         if (typeof valid !== 'boolean') {
             throw new Error('<mg-input-text> method "setError()" param "valid" must be a boolean');
         }
-        else if (!index$1.Ne(errorMessage)) {
+        else if (!index$1.Ie(errorMessage)) {
             throw new Error('<mg-input-text> method "setError()" param "errorMessage" must be a string');
         }
         else {
@@ -3587,7 +3606,7 @@ const MgInputTextarea = class {
          */
         this.handleFocus = () => {
             this.classCollection.add(this.classFocus);
-            this.classCollection = new index$1.Oe(this.classCollection.classes);
+            this.classCollection = new index$1.He(this.classCollection.classes);
         };
         /**
          * Handle blur event
@@ -3595,7 +3614,7 @@ const MgInputTextarea = class {
         this.handleBlur = () => {
             // Manage focus
             this.classCollection.delete(this.classFocus);
-            this.classCollection = new index$1.Oe(this.classCollection.classes);
+            this.classCollection = new index$1.He(this.classCollection.classes);
             // Display Error
             this.handlerInProgress = Handler.BLUR;
             this.displayError().finally(() => {
@@ -3658,7 +3677,7 @@ const MgInputTextarea = class {
         this.valid = undefined;
         this.invalid = undefined;
         this.resizable = 'none';
-        this.classCollection = new index$1.Oe(['mg-c-input--textarea']);
+        this.classCollection = new index$1.He(['mg-c-input--textarea']);
         this.errorMessage = undefined;
     }
     handleValue(newValue) {
@@ -3697,7 +3716,7 @@ const MgInputTextarea = class {
             this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);
     }
     validatePattern(newValue) {
-        if (newValue !== undefined && !(index$1.Ne(this.pattern) && index$1.Ne(this.patternErrorMessage))) {
+        if (newValue !== undefined && !(index$1.Ie(this.pattern) && index$1.Ie(this.patternErrorMessage))) {
             throw new Error('<mg-input-textarea> props "pattern" and "patternErrorMessage" must be non-empty string and paired.');
         }
     }
@@ -3729,7 +3748,7 @@ const MgInputTextarea = class {
         if (typeof valid !== 'boolean') {
             throw new Error('<mg-input-textarea> method "setError()" param "valid" must be a boolean');
         }
-        else if (!index$1.Ne(errorMessage)) {
+        else if (!index$1.Ie(errorMessage)) {
             throw new Error('<mg-input-textarea> method "setError()" param "errorMessage" must be a string');
         }
         else {
@@ -3818,7 +3837,7 @@ const MgInputTitle = class {
         this.tagName = 'label';
     }
     validateIdentifier(newValue) {
-        if (!index$1.Ne(newValue)) {
+        if (!index$1.Ie(newValue)) {
             throw new Error('<mg-input-title> prop "identifier" is required.');
         }
     }
@@ -3932,7 +3951,7 @@ const MgInputToggle = class {
         this.tooltip = undefined;
         this.tooltipPosition = 'input';
         this.helpText = undefined;
-        this.classCollection = new index$1.Oe(['mg-c-input--toggle']);
+        this.classCollection = new index$1.He(['mg-c-input--toggle']);
         this.options = undefined;
         this.errorMessage = undefined;
         this.valid = undefined;
@@ -3949,7 +3968,7 @@ const MgInputToggle = class {
             throw new Error('<mg-input-toggle> prop "items" require 2 items.');
         }
         // String array
-        else if (index$1.Fe(newValue)) {
+        else if (index$1.Pe(newValue)) {
             this.options = newValue.map(item => ({ title: item, value: item }));
         }
         // Object array
@@ -4005,7 +4024,7 @@ const MgInputToggle = class {
         if (typeof valid !== 'boolean') {
             throw new Error('<mg-input-toggle> method "setError()" param "valid" must be a boolean');
         }
-        else if (!index$1.Ne(errorMessage)) {
+        else if (!index$1.Ie(errorMessage)) {
             throw new Error('<mg-input-toggle> method "setError()" param "errorMessage" must be a string');
         }
         else {
@@ -4251,7 +4270,7 @@ const MgItemMore = class {
                         navElement.click();
                 });
                 // add id suffix to prevent duplicate key. default html id is: '';
-                if (index$1.Ne(proxy.id))
+                if (index$1.Ie(proxy.id))
                     proxy.id = `${proxy.id}-proxy`;
                 // update properties and DOM when proxyfied item is updated
                 proxified.addEventListener('item-updated', (event) => {
@@ -4281,7 +4300,7 @@ const MgItemMore = class {
             this.slotlabel.label = this.messages.menuLabel;
     }
     validateSize(newValue) {
-        if (newValue && typeof newValue !== 'string')
+        if (newValue && !sizes$2.includes(newValue))
             throw new Error(`<${this.name}> prop "size" must match MgItemMore['size'] type.`);
     }
     /*************
@@ -4330,10 +4349,10 @@ const MgItemMore = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h(index.Host, { key: '18e3ecec55a7078662bdb04ba6325a4d44ff1c78', role: "listitem" }, this.parentMenu && (index.h("mg-menu-item", { key: 'e04f4b62b1ce70eeae25f959ef6aeca2e4a2690d', "data-overflow-more": true, "data-size": this.parentMenu.size, ref: el => {
+        return (index.h(index.Host, { key: 'b490696ded183a1db05673b3e9ba9744ee134382', role: "listitem" }, this.parentMenu && (index.h("mg-menu-item", { key: '6f8b1967da50e77d87355cedde8aeb2327ddd0ab', "data-overflow-more": true, "data-size": this.parentMenu.size, ref: el => {
                 if (el)
                     this.moreElementMenuItem = el;
-            } }, index.h("mg-icon", { key: '8f20ef688479578ebee9eabb63644837e1d45113', icon: this.icon.icon, slot: "image" }), index.h("span", { key: '7a4f08410d1e85682a8c3e1935525c418a4141de', class: { 'mg-u-visually-hidden': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), index.h("mg-menu", { key: 'f67f53d289cf65883a3534f17fb2baaa91314a66', direction: Direction.VERTICAL, label: this.messages.menuLabel, size: this.size })))));
+            } }, index.h("mg-icon", { key: 'ddcf120831d42bc6cb9b8e147abac9ba7cbeedb6', icon: this.icon.icon, size: this.size, slot: "image" }), index.h("span", { key: 'fae667ee2f6ac8f4d4f85c5a8db91dede3f470e6', class: { 'mg-u-visually-hidden': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), index.h("mg-menu", { key: '912d544f80b84b4cffa28517ffbc91d60792a460', direction: Direction.VERTICAL, label: this.messages.menuLabel, size: this.size })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -4369,16 +4388,11 @@ const MgMenu = class {
                 item.expanded = false;
             }
         };
-        /**
-         * get mg-item-more element
-         * @returns mg-item-more element
-         */
-        this.getItemMore = () => this.element.querySelector('mg-item-more');
         /**
          * get mg-item-more child mg-menu-item element
          * @returns mg-menu-item element
          */
-        this.getItemMoreMenuItem = () => { var _a, _b; return (_b = (_a = this.getItemMore()) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('mg-menu-item'); };
+        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'); };
         /**
          * Set item listend
          * @param item - mg-menu-item element
@@ -4414,20 +4428,25 @@ const MgMenu = class {
          * render mg-item-more
          */
         this.renderMgItemMore = () => {
-            if (this.direction !== Direction.HORIZONTAL || this.isChildMenu) {
+            if (this.direction !== Direction.HORIZONTAL || this.isChildMenu || this.element.children.length <= 1) {
                 return;
             }
-            // /!\ externalise item tag name to get a string type and bypass type checking when value is used in next createElement
-            // by doing this we prevent stencil to generate a circular dependencies graph at build time with mg-item-more component.
-            let mgItemMore = this.getItemMore();
-            if (!mgItemMore) {
-                mgItemMore = document.createElement('mg-item-more');
-                mgItemMore.addEventListener('item-loaded', this.handleItemLoaded);
-                Object.assign(mgItemMore, this.itemmore || {});
-                this.element.appendChild(mgItemMore);
+            // Insert mg-item-more outside the mg-menu shadowdom
+            if (!this.itemMoreElement) {
+                this.itemMoreElement = document.createElement('mg-item-more');
+                this.itemMoreElement.addEventListener('item-loaded', this.handleItemLoaded);
+                this.element.appendChild(this.itemMoreElement);
             }
-            else {
-                Object.defineProperties(mgItemMore, this.itemmore || {});
+            // 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;
+                }
             }
         };
         this.label = undefined;
@@ -4450,6 +4469,9 @@ const MgMenu = class {
         if (newValue !== undefined && this.direction !== Direction.HORIZONTAL) {
             throw new Error(`<${this.name}> prop "itemmore" must be paired with direction ${Direction.HORIZONTAL}.`);
         }
+        else if (newValue) {
+            this.renderMgItemMore();
+        }
     }
     validateSize(newValue) {
         if (!sizes$2.includes(newValue)) {
@@ -4500,7 +4522,7 @@ const MgMenu = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h(index.Host, { key: 'a5fe4a1a61b4255cc9a06217f30ef2f154fd797d', role: "list", "aria-label": this.label }, index.h("slot", { key: '37de5388d1cca3fa46dfbb73ab26ba6e299940b5' })));
+        return (index.h(index.Host, { key: 'a29897d754b7cbb34cc8d63b5ecb025c0d252e12', role: "list", "aria-label": this.label }, index.h("slot", { key: '7fc9dbd765f529e17f0c7ca2012d1b6bf86a05d9' })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -4512,7 +4534,7 @@ const MgMenu = class {
 };
 MgMenu.style = MgMenuStyle0;
 
-const mgMenuItemCss = ".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}}.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{height:3.8rem;padding:1rem 2rem}.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button,.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button ::slotted([slot=label]),.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button ::slotted([slot=metadata]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular ::slotted([slot=label]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular ::slotted([slot=metadata]){font-size:var(--font-size)}.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular.mg-c-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular.mg-c-menu-item__navigation-button--vertical{padding-left:calc(2rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{height:5.1rem;padding:1rem 3rem}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button,.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button ::slotted([slot=label]),.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button ::slotted([slot=metadata]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium ::slotted([slot=label]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium ::slotted([slot=metadata]){font-size:calc(var(--font-size) + .2rem)}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium.mg-c-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium.mg-c-menu-item__navigation-button--vertical{padding-left:calc(3rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{height:7.1rem;padding:1rem 4rem}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button,.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button ::slotted([slot=label]),.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button ::slotted([slot=metadata]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large ::slotted([slot=label]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large ::slotted([slot=metadata]){font-size:calc(var(--font-size) + .2rem)}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large.mg-c-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large.mg-c-menu-item__navigation-button--vertical{padding-left:calc(4rem - 0.3rem)}.mg-c-menu-item__navigation-button{display:flex;box-sizing:border-box;align-items:center;border:none;background-color:unset;color:hsl(var(--mg-menu-item-color-hsl, var(--color-dark)));column-gap:var(--mg-menu-item-navigation-button-column-gap, 1rem);cursor:pointer;font-family:var(--font-family);font-weight:400;line-height:var(--line-height);text-decoration:none;white-space:nowrap}.mg-c-menu-item__navigation-button:disabled,.mg-c-menu-item__navigation-button--disabled{cursor:default;opacity:var(--mg-disabled-opacity)}.mg-c-menu-item__navigation-button:focus-visible{z-index:10}.mg-c-menu-item__navigation-button:hover:not(.mg-c-menu-item__navigation-button--disabled),.mg-c-menu-item__navigation-button:focus-visible:not(.mg-c-menu-item__navigation-button--disabled){background-color:hsl(var(--mg-menu-item-focused-background-color-hsl)/10%)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active{color:hsl(var(--mg-menu-item-color-active-hsl));font-weight:600}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active.mg-c-menu-item__navigation-button--horizontal{border-bottom-color:hsl(var(--mg-menu-item-border-color-active-hsl))}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active.mg-c-menu-item__navigation-button--vertical{border-left-color:hsl(var(--mg-menu-item-border-color-active-hsl))}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--hidden{display:none}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal{border-bottom:.3rem solid rgba(0,0,0,0)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical{border-left:.3rem solid rgba(0,0,0,0)}:host([data-style-direction=vertical][data-level=\"1\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(1*2rem - .3rem)}:host([data-level=\"1\"]) .mg-c-menu-item__collapse-container{z-index:calc(1*10)}:host([data-style-direction=vertical][data-level=\"2\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(2*2rem - .3rem)}:host([data-level=\"2\"]) .mg-c-menu-item__collapse-container{z-index:calc(2*10)}:host([data-style-direction=vertical][data-level=\"3\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(3*2rem - .3rem)}:host([data-level=\"3\"]) .mg-c-menu-item__collapse-container{z-index:calc(3*10)}:host([data-style-direction=vertical][data-level=\"4\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(4*2rem - .3rem)}:host([data-level=\"4\"]) .mg-c-menu-item__collapse-container{z-index:calc(4*10)}:host([data-style-direction=vertical][data-level=\"5\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(5*2rem - .3rem)}:host([data-level=\"5\"]) .mg-c-menu-item__collapse-container{z-index:calc(5*10)}:host([data-style-direction=vertical][data-level=\"6\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(6*2rem - .3rem)}:host([data-level=\"6\"]) .mg-c-menu-item__collapse-container{z-index:calc(6*10)}:host([data-style-direction=vertical][data-level=\"1\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(1*3rem - .3rem)}:host([data-level=\"1\"]) .mg-c-menu-item__collapse-container{z-index:calc(1*10)}:host([data-style-direction=vertical][data-level=\"2\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(2*3rem - .3rem)}:host([data-level=\"2\"]) .mg-c-menu-item__collapse-container{z-index:calc(2*10)}:host([data-style-direction=vertical][data-level=\"3\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(3*3rem - .3rem)}:host([data-level=\"3\"]) .mg-c-menu-item__collapse-container{z-index:calc(3*10)}:host([data-style-direction=vertical][data-level=\"4\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(4*3rem - .3rem)}:host([data-level=\"4\"]) .mg-c-menu-item__collapse-container{z-index:calc(4*10)}:host([data-style-direction=vertical][data-level=\"5\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(5*3rem - .3rem)}:host([data-level=\"5\"]) .mg-c-menu-item__collapse-container{z-index:calc(5*10)}:host([data-style-direction=vertical][data-level=\"6\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(6*3rem - .3rem)}:host([data-level=\"6\"]) .mg-c-menu-item__collapse-container{z-index:calc(6*10)}:host([data-style-direction=vertical][data-level=\"1\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(1*4rem - .3rem)}:host([data-level=\"1\"]) .mg-c-menu-item__collapse-container{z-index:calc(1*10)}:host([data-style-direction=vertical][data-level=\"2\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(2*4rem - .3rem)}:host([data-level=\"2\"]) .mg-c-menu-item__collapse-container{z-index:calc(2*10)}:host([data-style-direction=vertical][data-level=\"3\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(3*4rem - .3rem)}:host([data-level=\"3\"]) .mg-c-menu-item__collapse-container{z-index:calc(3*10)}:host([data-style-direction=vertical][data-level=\"4\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(4*4rem - .3rem)}:host([data-level=\"4\"]) .mg-c-menu-item__collapse-container{z-index:calc(4*10)}:host([data-style-direction=vertical][data-level=\"5\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(5*4rem - .3rem)}:host([data-level=\"5\"]) .mg-c-menu-item__collapse-container{z-index:calc(5*10)}:host([data-style-direction=vertical][data-level=\"6\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(6*4rem - .3rem)}:host([data-level=\"6\"]) .mg-c-menu-item__collapse-container{z-index:calc(6*10)}.mg-c-menu-item{max-width:var(--mg-menu-item-navigation-button-max-width)}.mg-c-menu-item__collapse-container{z-index:10;width:max-content}.mg-c-menu-item__navigation-button-center{min-width:0}.mg-c-menu-item__navigation-button-text-content{display:flex;width:100%;align-items:center}.mg-c-menu-item__navigation-button-text-content-notification,.mg-c-menu-item__navigation-button-text-content ::slotted([slot=information]){margin-left:1rem;font-size:var(--font-size)}.mg-c-menu-item__navigation-button-new-tab{margin-left:.6rem}.mg-c-menu-item__navigation-button-chevron{margin-left:auto;transition:200ms}.mg-c-menu-item__navigation-button-chevron--rotate.mg-c-menu-item__navigation-button-chevron{transform:rotate(180deg)}:host{position:relative;display:flex;--mg-popover-padding-vertical:0;--mg-popover-padding-horizontal:0;--mg-popover-max-width:unset}:host([data-style-direction=vertical]){flex-direction:column}:host([data-style-direction=vertical]) .mg-c-menu-item__navigation-button{width:100%}:host([data-style-direction=vertical]) .mg-c-menu-item__collapse-container{position:unset;top:unset;left:unset;width:unset}:host([data-style-direction=vertical]) .mg-c-menu-item-chevron{margin-left:auto}:host([data-overflow-more]){--mg-menu-item-navigation-button-column-gap:0}:host([data-overflow-more]) .mg-c-menu-item__navigation-button-chevron{display:none}:host([data-overflow-more]) .mg-c-menu-item__navigation-button-text-content ::slotted([slot=information]){margin-left:0}:host([data-overflow-more]) ::slotted(mg-menu){--mg-menu-item-navigation-button-column-gap:1rem}:host([data-style-direction=horizontal]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level,:host([data-overflow-more]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level{background-color:hsl(var(--color-light))}:host([data-style-direction=horizontal]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level ::slotted(mg-menu),:host([data-overflow-more]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level ::slotted(mg-menu){padding:1rem 0}::slotted([slot=label]),::slotted([slot=metadata]){display:block;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}::slotted(*){display:flex;flex-direction:column}:host([status=disabled]){pointer-events:none}:host([hidden]){display:none}";
+const mgMenuItemCss = ".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}}.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{height:3.8rem;padding:1rem 2rem}.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button,.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button ::slotted([slot=label]),.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button ::slotted([slot=metadata]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular ::slotted([slot=label]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular ::slotted([slot=metadata]){font-size:var(--font-size)}.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular.mg-c-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular.mg-c-menu-item__navigation-button--vertical{padding-left:calc(2rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{height:5.1rem;padding:1rem 3rem}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button,.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button ::slotted([slot=label]),.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button ::slotted([slot=metadata]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium ::slotted([slot=label]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium ::slotted([slot=metadata]){font-size:calc(var(--font-size) + .2rem)}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium.mg-c-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium.mg-c-menu-item__navigation-button--vertical{padding-left:calc(3rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{height:7.1rem;padding:1rem 4rem}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button,.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button ::slotted([slot=label]),.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button ::slotted([slot=metadata]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large ::slotted([slot=label]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large ::slotted([slot=metadata]){font-size:calc(var(--font-size) + .2rem)}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large.mg-c-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large.mg-c-menu-item__navigation-button--vertical{padding-left:calc(4rem - 0.3rem)}.mg-c-menu-item__navigation-button{display:flex;box-sizing:border-box;align-items:center;border:none;background-color:unset;color:hsl(var(--mg-menu-item-color-hsl, var(--color-dark)));column-gap:var(--mg-menu-item-navigation-button-column-gap, 1rem);cursor:pointer;font-family:var(--font-family);font-weight:400;line-height:var(--line-height);text-decoration:none;white-space:nowrap}.mg-c-menu-item__navigation-button:disabled,.mg-c-menu-item__navigation-button--disabled{cursor:default;opacity:var(--mg-disabled-opacity)}.mg-c-menu-item__navigation-button:focus-visible{z-index:10}.mg-c-menu-item__navigation-button:hover:not(.mg-c-menu-item__navigation-button--disabled),.mg-c-menu-item__navigation-button:focus-visible:not(.mg-c-menu-item__navigation-button--disabled){background-color:hsl(var(--mg-menu-item-focused-background-color-hsl)/10%)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active{color:hsl(var(--mg-menu-item-color-active-hsl));font-weight:600}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active.mg-c-menu-item__navigation-button--horizontal{border-bottom-color:hsl(var(--mg-menu-item-border-color-active-hsl))}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active.mg-c-menu-item__navigation-button--vertical{border-left-color:hsl(var(--mg-menu-item-border-color-active-hsl))}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--hidden{display:none}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal{border-bottom:.3rem solid rgba(0,0,0,0)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical{border-left:.3rem solid rgba(0,0,0,0)}:host([data-style-direction=vertical][data-level=\"1\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(1*2rem - .3rem)}:host([data-level=\"1\"]) .mg-c-menu-item__collapse-container{z-index:calc(1*10)}:host([data-style-direction=vertical][data-level=\"2\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(2*2rem - .3rem)}:host([data-level=\"2\"]) .mg-c-menu-item__collapse-container{z-index:calc(2*10)}:host([data-style-direction=vertical][data-level=\"3\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(3*2rem - .3rem)}:host([data-level=\"3\"]) .mg-c-menu-item__collapse-container{z-index:calc(3*10)}:host([data-style-direction=vertical][data-level=\"4\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(4*2rem - .3rem)}:host([data-level=\"4\"]) .mg-c-menu-item__collapse-container{z-index:calc(4*10)}:host([data-style-direction=vertical][data-level=\"5\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(5*2rem - .3rem)}:host([data-level=\"5\"]) .mg-c-menu-item__collapse-container{z-index:calc(5*10)}:host([data-style-direction=vertical][data-level=\"6\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(6*2rem - .3rem)}:host([data-level=\"6\"]) .mg-c-menu-item__collapse-container{z-index:calc(6*10)}:host([data-style-direction=vertical][data-level=\"1\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(1*3rem - .3rem)}:host([data-level=\"1\"]) .mg-c-menu-item__collapse-container{z-index:calc(1*10)}:host([data-style-direction=vertical][data-level=\"2\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(2*3rem - .3rem)}:host([data-level=\"2\"]) .mg-c-menu-item__collapse-container{z-index:calc(2*10)}:host([data-style-direction=vertical][data-level=\"3\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(3*3rem - .3rem)}:host([data-level=\"3\"]) .mg-c-menu-item__collapse-container{z-index:calc(3*10)}:host([data-style-direction=vertical][data-level=\"4\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(4*3rem - .3rem)}:host([data-level=\"4\"]) .mg-c-menu-item__collapse-container{z-index:calc(4*10)}:host([data-style-direction=vertical][data-level=\"5\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(5*3rem - .3rem)}:host([data-level=\"5\"]) .mg-c-menu-item__collapse-container{z-index:calc(5*10)}:host([data-style-direction=vertical][data-level=\"6\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(6*3rem - .3rem)}:host([data-level=\"6\"]) .mg-c-menu-item__collapse-container{z-index:calc(6*10)}:host([data-style-direction=vertical][data-level=\"1\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(1*4rem - .3rem)}:host([data-level=\"1\"]) .mg-c-menu-item__collapse-container{z-index:calc(1*10)}:host([data-style-direction=vertical][data-level=\"2\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(2*4rem - .3rem)}:host([data-level=\"2\"]) .mg-c-menu-item__collapse-container{z-index:calc(2*10)}:host([data-style-direction=vertical][data-level=\"3\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(3*4rem - .3rem)}:host([data-level=\"3\"]) .mg-c-menu-item__collapse-container{z-index:calc(3*10)}:host([data-style-direction=vertical][data-level=\"4\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(4*4rem - .3rem)}:host([data-level=\"4\"]) .mg-c-menu-item__collapse-container{z-index:calc(4*10)}:host([data-style-direction=vertical][data-level=\"5\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(5*4rem - .3rem)}:host([data-level=\"5\"]) .mg-c-menu-item__collapse-container{z-index:calc(5*10)}:host([data-style-direction=vertical][data-level=\"6\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(6*4rem - .3rem)}:host([data-level=\"6\"]) .mg-c-menu-item__collapse-container{z-index:calc(6*10)}.mg-c-menu-item{max-width:var(--mg-menu-item-navigation-button-max-width)}.mg-c-menu-item__collapse-container{z-index:10;width:max-content}.mg-c-menu-item__navigation-button-center{min-width:0}.mg-c-menu-item__navigation-button-text-content{display:flex;width:100%;align-items:center}.mg-c-menu-item__navigation-button-text-content-notification,.mg-c-menu-item__navigation-button-text-content ::slotted([slot=information]){margin-left:1rem;font-size:var(--font-size)}.mg-c-menu-item__navigation-button-new-tab{margin-left:.6rem}.mg-c-menu-item__navigation-button-chevron{display:var(--mg-c-menu-item-chevron-display);margin-left:auto;transition:200ms}.mg-c-menu-item__navigation-button-chevron--rotate.mg-c-menu-item__navigation-button-chevron{transform:rotate(180deg)}:host{position:relative;display:flex;--mg-popover-padding-vertical:0;--mg-popover-padding-horizontal:0;--mg-popover-max-width:unset}:host([data-style-direction=vertical]){flex-direction:column}:host([data-style-direction=vertical]) .mg-c-menu-item__navigation-button{width:100%}:host([data-style-direction=vertical]) .mg-c-menu-item__collapse-container{position:unset;top:unset;left:unset;width:unset}:host([data-style-direction=vertical]) .mg-c-menu-item-chevron{margin-left:auto}:host([data-overflow-more]){--mg-menu-item-navigation-button-column-gap:0}:host([data-overflow-more]) .mg-c-menu-item__navigation-button-chevron{--mg-c-menu-item-chevron-display:none}:host([data-overflow-more]) .mg-c-menu-item__navigation-button-text-content ::slotted([slot=information]){margin-left:0}:host([data-overflow-more]) ::slotted(mg-menu){--mg-menu-item-navigation-button-column-gap:1rem}:host([data-style-direction=horizontal]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level,:host([data-overflow-more]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level{background-color:hsl(var(--color-light))}:host([data-style-direction=horizontal]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level ::slotted(mg-menu),:host([data-overflow-more]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level ::slotted(mg-menu){padding:1rem 0}::slotted([slot=label]),::slotted([slot=metadata]){display:block;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}::slotted(*){display:flex;flex-direction:column}:host([status=disabled]){pointer-events:none}:host([hidden]){display:none}";
 const MgMenuItemStyle0 = mgMenuItemCss;
 
 const MgMenuItem = class {
@@ -4578,7 +4600,7 @@ const MgMenuItem = class {
                 throw new Error(`<${this.name}> slot "label" is required.`);
             ['label', 'metadata'].forEach(slot => {
                 Array.from(this.element.querySelectorAll(`[slot="${slot}"]`)).forEach(element => {
-                    if (!index$1.Ne(element.textContent))
+                    if (!index$1.Ie(element.textContent))
                         throw new Error(`<${this.name}> slot "${slot}" must have text content.`);
                     if ((guard && element.getAttribute('title') === null) || !guard)
                         element.setAttribute('title', element.textContent);
@@ -4647,13 +4669,13 @@ const MgMenuItem = class {
          * @returns HTML Element
          */
         this.renderSlot = () => index.h("slot", null);
-        this.identifier = index$1.Me('mg-menu-item');
+        this.identifier = index$1.Ce('mg-menu-item');
         this.href = undefined;
         this.target = undefined;
         this.status = Status$1.VISIBLE;
         this.expanded = false;
         this.size = 'regular';
-        this.navigationButtonClassList = new index$1.Oe([this.navigationButton]);
+        this.navigationButtonClassList = new index$1.He([this.navigationButton]);
         this.direction = undefined;
         this.isInMainMenu = undefined;
         this.isItemMore = undefined;
@@ -4800,7 +4822,7 @@ const MgMenuItem = class {
      * Emit event when component is updated
      */
     componentShouldUpdate() {
-        return index$1.Ce(() => {
+        return index$1.Ge(() => {
             this.itemUpdated.emit();
         });
     }
@@ -4813,7 +4835,8 @@ 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 (index.h(index.Host, { key: '10b41e1b90d01a0f0df082cd9fc50884e87c2e59', role: this.isItemMore ? 'presentation' : 'listitem' }, this.displayPopover() ? (index.h("mg-popover", { display: this.expanded, placement: "bottom-start", arrowHide: true, "onDisplay-change": this.handlePopoverDisplay, identifier: this.getPopoverIdentifier() }, this.renderInteractiveElement(), index.h("div", { class: getContainerClasses(), slot: "content" }, this.renderSlot()))) : ([
+        return (index.h(index.Host, { key: '10b41e1b90d01a0f0df082cd9fc50884e87c2e59', role: this.isItemMore ? 'presentation' : 'listitem' }, this.displayPopover() ? (index.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
+        }, this.renderInteractiveElement(), index.h("div", { class: getContainerClasses(), slot: "content" }, this.renderSlot()))) : ([
             this.renderInteractiveElement(),
             index.h("div", { key: "vertical-container", class: getContainerClasses(), hidden: !this.expanded }, this.renderSlot()),
         ])));
@@ -4906,13 +4929,13 @@ const MgMessage = class {
                     return 'exclamation-circle';
             }
         };
-        this.identifier = index$1.Me('mg-message');
+        this.identifier = index$1.Ce('mg-message');
         this.delay = undefined;
         this.variant = variants$1[0];
         this.closeButton = false;
         this.hide = false;
         this.noAriaRole = undefined;
-        this.classCollection = new index$1.Oe(['mg-c-message']);
+        this.classCollection = new index$1.He(['mg-c-message']);
         this.hasActions = false;
     }
     validateDelay(newValue) {
@@ -5055,12 +5078,12 @@ const MgModal = class {
          */
         this.setFocus = () => {
             // Get all focusable elements
-            const slottedFocusableElements = Array.from(this.element.querySelectorAll(index$1._e));
+            const slottedFocusableElements = Array.from(this.element.querySelectorAll(index$1.We));
             // If close button is enabled or at least one of the slotted element is focusable
             if (this.closeButton || slottedFocusableElements.length > 0) {
                 // Check if slotted focusable elements have shadowDom with focusable elements
                 this.modalFocusableElements = slottedFocusableElements.reduce((acc, focusableElement) => {
-                    acc.push(focusableElement.shadowRoot !== null ? focusableElement.shadowRoot.querySelector(index$1._e) || focusableElement : focusableElement);
+                    acc.push(focusableElement.shadowRoot !== null ? focusableElement.shadowRoot.querySelector(index$1.We) || focusableElement : focusableElement);
                     return acc;
                 }, []);
                 // When close button is enabled it's the first focusable element.
@@ -5082,21 +5105,21 @@ const MgModal = class {
         this.handleClose = () => {
             this.hide = true;
         };
-        this.identifier = index$1.Me('mg-modal');
+        this.identifier = index$1.Ce('mg-modal');
         this.dialogRole = dialogRoles[0];
         this.modalTitle = undefined;
         this.closeButton = false;
         this.hide = undefined;
         this.hasActions = false;
         this.hasContent = false;
-        this.classCollection = new index$1.Oe(['mg-c-modal']);
+        this.classCollection = new index$1.He(['mg-c-modal']);
     }
     validateDialogRole(newValue) {
         if (!dialogRoles.includes(newValue))
             throw new Error(`<mg-modal> prop "dialogRole" must be one of: ${dialogRoles.join(', ')}.`);
     }
     validateModalTitle(newValue) {
-        if (!index$1.Ne(newValue)) {
+        if (!index$1.Ie(newValue)) {
             throw new Error('<mg-modal> prop "modalTitle" is required.');
         }
     }
@@ -5243,7 +5266,7 @@ const MgPagination = class {
         this.handleGoToPage = (action, disabled) => {
             !disabled && this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);
         };
-        this.identifier = index$1.Me('mg-pagination');
+        this.identifier = index$1.Ce('mg-pagination');
         this.label = undefined;
         this.hideNavigationLabels = undefined;
         this.hidePageCount = undefined;
@@ -5408,7 +5431,7 @@ const MgPanel = class {
             ];
             return this.titlePosition === 'right' ? children.reverse() : children;
         };
-        this.identifier = index$1.Me('mg-panel');
+        this.identifier = index$1.Ce('mg-panel');
         this.panelTitle = undefined;
         this.titlePattern = undefined;
         this.titlePatternErrorMessage = undefined;
@@ -5417,12 +5440,12 @@ const MgPanel = class {
         this.expanded = false;
         this.expandToggleDisplay = expandToggleDisplays[0];
         this.expandToggleDisabled = undefined;
-        this.classCollection = new index$1.Oe(['mg-c-panel']);
+        this.classCollection = new index$1.He(['mg-c-panel']);
         this.isEditing = false;
         this.updatedPanelTitle = undefined;
     }
     validatePanelTitle(newValue) {
-        if (!index$1.Ne(newValue))
+        if (!index$1.Ie(newValue))
             throw new Error('<mg-panel> prop "panelTitle" is required.');
         this.titleChange.emit(newValue);
     }
@@ -7373,7 +7396,7 @@ const MgPopover = class {
                 mgPopoverContent.setAttribute('id', this.identifier);
             }
         };
-        this.identifier = index$1.Me('mg-popover');
+        this.identifier = index$1.Ce('mg-popover');
         this.placement = 'bottom';
         this.arrowHide = false;
         this.closeButton = false;
@@ -7416,7 +7439,7 @@ const MgPopover = class {
      */
     componentWillLoad() {
         // Get windows to attach events
-        this.windows = index$1.Be(window);
+        this.windows = index$1.ze(window);
         // render mg-popover-content slot
         this.renderPopoverContent();
         this.validateCloseButton(this.closeButton);
@@ -7434,6 +7457,10 @@ const MgPopover = class {
         // Add aria attributes
         interactiveElement.setAttribute('aria-controls', this.identifier);
         interactiveElement.setAttribute('aria-expanded', `${this.display}`);
+        const fallbackPlacements = [];
+        if (this.element.dataset.fallbackPlacement) {
+            fallbackPlacements.push(this.element.dataset.fallbackPlacement);
+        }
         // Create popperjs popover
         this.popper = createPopper(interactiveElement, this.mgPopover, {
             placement: this.placement,
@@ -7448,7 +7475,7 @@ const MgPopover = class {
                 {
                     name: 'flip',
                     options: {
-                        fallbackPlacements: ['auto'],
+                        fallbackPlacements: [...fallbackPlacements, 'auto'],
                     },
                 },
             ],
@@ -7478,7 +7505,7 @@ const MgPopover = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h(index.Host, { key: '788fd2a8f759f8ae9188b05395cbfc33b5b06c69' }, index.h("slot", { key: '9109948237f93d375e6d1b234274f8283c0260d3' }), index.h("slot", { key: 'e76a1093edab91746a4d3302d7976129ed7c6042', name: "content" })));
+        return (index.h(index.Host, { key: 'a01aff00a17da32a72491629ba80ec51a34cdb0e' }, index.h("slot", { key: 'bb314190042b65bf899e34efac1781ce9230930f' }), index.h("slot", { key: 'daba0b8cb0b1b3b4637bb972da309a9afb73f99e', name: "content" })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -7504,7 +7531,7 @@ const MgPopoverContent = class {
             this.hideContent.emit();
         };
         this.closeButton = false;
-        this.classCollection = new index$1.Oe(['mg-c-popover-content']);
+        this.classCollection = new index$1.He(['mg-c-popover-content']);
     }
     /*************
      * Lifecycle *
@@ -7522,7 +7549,7 @@ const MgPopoverContent = class {
     componentDidLoad() {
         const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
         const slottedTitleElement = this.element.querySelector('[slot="title"]');
-        if (slottedTitleElement && !index$1.De(slottedTitleElement, headingTags)) {
+        if (slottedTitleElement && !index$1.Be(slottedTitleElement, headingTags)) {
             throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}`);
         }
     }
@@ -7558,7 +7585,7 @@ const MgSkipLinks = class {
         this.links = undefined;
     }
     validateLinks(links) {
-        if (links === undefined || links.length === 0 || links.some(link => !index$1.Ne(link.href) || !link.href.startsWith('#') || !index$1.Ne(link.label))) {
+        if (links === undefined || links.length === 0 || links.some(link => !index$1.Ie(link.href) || !link.href.startsWith('#') || !index$1.Ie(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.`);
         }
     }
@@ -7710,7 +7737,7 @@ const MgTabs = class {
          */
         this.resetFocus = () => {
             // update asynchronously tabindex to prevent get focus on new tabindex at then end of event process
-            index$1.Ce(() => {
+            index$1.Ge(() => {
                 this.tabFocus = undefined;
                 Array.from(this.element.shadowRoot.querySelectorAll('[data-index]')).forEach((tab, index) => {
                     tab.setAttribute('tabindex', this.activeTab - this.startIndex !== index ? '-1' : '0');
@@ -7725,16 +7752,16 @@ const MgTabs = class {
             if (slots.length !== this.tabs.length)
                 throw new Error('<mg-tabs> Must have slots counts equal to tabs count.');
         };
-        this.identifier = index$1.Me('mg-tabs');
+        this.identifier = index$1.Ce('mg-tabs');
         this.label = undefined;
         this.size = 'regular';
         this.items = undefined;
         this.activeTab = undefined;
         this.tabs = [];
-        this.classCollection = new index$1.Oe(['mg-c-tabs']);
+        this.classCollection = new index$1.He(['mg-c-tabs']);
     }
     validateLabel(newValue) {
-        if (!index$1.Ne(newValue)) {
+        if (!index$1.Ie(newValue)) {
             throw new Error('<mg-tabs> prop "label" is required.');
         }
     }
@@ -7746,7 +7773,7 @@ const MgTabs = class {
     }
     validateItems(newValue) {
         // String array
-        if (index$1.Fe(newValue))
+        if (index$1.Pe(newValue))
             this.tabs = newValue.map(item => ({ label: item, status: Status.VISIBLE }));
         // Object array
         else if (Array.isArray(newValue) && newValue.length > 0 && newValue.every(isTabItem))
@@ -7846,7 +7873,7 @@ const MgTag = class {
         this.variant = variants[0];
         this.outline = undefined;
         this.soft = undefined;
-        this.classCollection = new index$1.Oe(['mg-c-tag']);
+        this.classCollection = new index$1.He(['mg-c-tag']);
     }
     validateVariant(newValue, oldValue) {
         if (!variants.includes(newValue)) {
@@ -7883,7 +7910,7 @@ const MgTag = class {
      * @param textContent - html element textContent property
      */
     validateTextContent(textContent) {
-        if (!index$1.Ne(textContent))
+        if (!index$1.Ie(textContent))
             throw new Error('<mg-tag> slot must contain a text content.');
     }
     /*************
@@ -7943,10 +7970,10 @@ 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
-            index$1.Ce(() => {
+            index$1.Ge(() => {
                 this.windows.forEach((localWindow) => {
-                    localWindow.addEventListener('click', this.clickOutside, false);
-                    localWindow.addEventListener('keydown', this.pressEscape, false);
+                    localWindow.addEventListener('click', this.handleClickOutside, false);
+                    localWindow.addEventListener('keydown', this.handlePressEscape, false);
                 });
             });
         };
@@ -7960,15 +7987,15 @@ const MgTooltip = class {
             this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }] })));
             // Remove event listener
             this.windows.forEach((localWindow) => {
-                localWindow.removeEventListener('click', this.clickOutside, false);
-                localWindow.removeEventListener('keyboard', this.pressEscape, false);
+                localWindow.removeEventListener('click', this.handleClickOutside, false);
+                localWindow.removeEventListener('keyboard', this.handlePressEscape, false);
             });
         };
         /**
          * Check if clicked outside of component and hidde tooltip
          * @param event - mouse event
          */
-        this.clickOutside = (event) => {
+        this.handleClickOutside = (event) => {
             if (event.target.closest('mg-tooltip') !== this.element)
                 this.setDisplay(false);
         };
@@ -7976,7 +8003,7 @@ const MgTooltip = class {
          * Check if 'Escape' key is pressed of component and hidde tooltip
          * @param event - keyboard event
          */
-        this.pressEscape = (event) => {
+        this.handlePressEscape = (event) => {
             if (event.code === 'Escape') {
                 this.setDisplay(false);
                 this.resetGuard();
@@ -7994,23 +8021,25 @@ const MgTooltip = class {
         /**
          * Action for tooltip element and tooltiped element mouse listener
          * @param elementGuard -  tooltip element guard
-         * @param isMouseenter - mouseenter validation
+         * @param eventName - event name
          * @param conditionalGuard - guard condition
          */
-        this.tooltipMouseListenerAction = (elementGuard, isMouseenter, conditionalGuard) => {
-            // we mutate elementGuard
-            if (![Guard.FOCUS, Guard.DISABLE_ON_CLICK].includes(this.guard)) {
-                this.guard = elementGuard;
-                if (!isMouseenter) {
-                    // process action in the next event loop macro task
-                    setTimeout(() => {
-                        this.setDisplay(isMouseenter, this.guard !== conditionalGuard);
-                        this.resetGuard();
-                    }, 100);
-                }
-                else if (this.guard === Guard.HOVER_TOOLTIPED_ELEMENT) {
-                    this.setDisplay(isMouseenter);
-                }
+        this.tooltipMouseListenerAction = (elementGuard, eventName, conditionalGuard) => {
+            // active FOCUS guard cancel process
+            if ([Guard.FOCUS, Guard.DISABLE_ON_CLICK].includes(this.guard)) {
+                return;
+            }
+            // Update guard by element guard
+            this.guard = elementGuard;
+            if (eventName !== 'mouseenter') {
+                // process action in the next event loop macro task
+                setTimeout(() => {
+                    this.setDisplay(false, this.guard !== conditionalGuard);
+                    this.resetGuard();
+                }, 100);
+            }
+            else if (this.guard === Guard.HOVER_TOOLTIPED_ELEMENT) {
+                this.setDisplay(true);
             }
         };
         /**
@@ -8037,27 +8066,9 @@ const MgTooltip = class {
             }
         };
         /**
-         * Init tooltip
-         * @param slotElement - slotted element
-         * @param interactiveElement - interactive element
+         * Set popper instance
          */
-        this.initTooltip = (slotElement, interactiveElement) => {
-            // Add tabindex to slotted element if we can't find any interactive element
-            if (!this.disabled && !interactiveElement) {
-                this.hasCustomTabIndex = true;
-                slotElement.tabIndex = 0;
-                // Add role on non-interactive element to work with "aria-describedby" for screen readers
-                slotElement.setAttribute('role', 'button');
-            }
-            // Set aria-describedby
-            const ariaDescribedby = slotElement.getAttribute('aria-describedby');
-            if (ariaDescribedby === null) {
-                this.tooltipedElement.setAttribute('aria-describedby', this.identifier);
-            }
-            else {
-                // We ensure to have uniq ids
-                slotElement.setAttribute('aria-describedby', `${[...new Set([...ariaDescribedby.split(' '), this.identifier])].join(' ')}`);
-            }
+        this.setPopper = () => {
             // use element data attribute: `data-popper-strategy`, in order to get popper strategy configuration
             const strategy = (this.element.dataset.popperStrategy || 'fixed');
             // Create popperjs tooltip
@@ -8079,13 +8090,14 @@ const MgTooltip = class {
                     },
                 ],
             });
-            // Manage tooltipedElement focus/blur events
-            this.tooltipedElement.addEventListener('disabled-change', (event) => {
-                if (event.target.disableOnClick) {
-                    this.guard = event.detail ? Guard.DISABLE_ON_CLICK : null;
-                }
-            });
-            // Manage tooltipedElement focus/blur events
+        };
+        /**
+         * Define selected element to become tooltip selector and init listeners
+         * @param element - tooltiped element
+         */
+        this.setTooltipedElement = (element) => {
+            this.tooltipedElement = element;
+            // Manage tooltipedElement focus events
             this.tooltipedElement.addEventListener('focus', () => {
                 this.guard = Guard.FOCUS;
                 this.setDisplay(true);
@@ -8100,37 +8112,71 @@ const MgTooltip = class {
                 this.resetGuard();
                 this.setDisplay(false);
             });
-            document.addEventListener('keydown', this.pressEscape);
             // manage tooltipElement & tooltipedElement mouseenter/mouseleave events
-            ['mouseenter', 'mouseleave'].forEach(eventType => {
-                const isMouseenter = eventType === 'mouseenter';
-                [
-                    { element: this.mgTooltipContent, action: () => this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIP_ELEMENT, isMouseenter, Guard.HOVER_TOOLTIPED_ELEMENT) },
-                    { element: this.tooltipedElement, action: () => this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIPED_ELEMENT, isMouseenter, Guard.HOVER_TOOLTIP_ELEMENT) },
-                ].forEach(({ element, action }) => {
-                    element.addEventListener(eventType, () => {
-                        action();
-                    });
-                });
+            this.tooltipedElement.addEventListener('mouseenter', () => {
+                this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIPED_ELEMENT, 'mouseenter', Guard.HOVER_TOOLTIP_ELEMENT);
+            });
+            this.tooltipedElement.addEventListener('mouseleave', () => {
+                this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIPED_ELEMENT, 'mouseleave', Guard.HOVER_TOOLTIP_ELEMENT);
             });
         };
-        this.identifier = index$1.Me('mg-tooltip');
+        /**
+         * Set button mutation observer
+         * @param mgButton - mg-button to observe
+         */
+        this.setMgButtonMutationObserver = (mgButton) => {
+            new MutationObserver(mutationList => {
+                // stop process when none of mutations attributed is disabled
+                if (!mutationList.some(mutation => ['aria-disabled', 'disabled'].includes(mutation.attributeName)))
+                    return;
+                // set guard when one of mutations is for a disabled with disabled-on-click
+                if (mutationList.some((mutation) => mutation.target.disabled && mutation.target.disableOnClick)) {
+                    this.guard = Guard.DISABLE_ON_CLICK;
+                }
+                // when the disabled-on-click guard is running we stop process
+                if (this.guard === Guard.DISABLE_ON_CLICK)
+                    return;
+                // update button wrapper
+                this.setMgButtonWrapper(mgButton);
+                // Since Firefox doesn't trigger a "blur" event when the "disabled" attribute is added or removed from a button
+                // we have to manually unlock the guard because the "blur" handler of the tooltipedElement won't do it.
+                this.resetGuard();
+                // update popper instance
+                this.popper.update();
+            }).observe(mgButton, { attributes: true });
+        };
+        /**
+         * Set tooltiped element aria-describedby
+         * @param element - element to update
+         */
+        this.setAriaDescribedby = (element) => {
+            // Set aria-describedby
+            const ariaDescribedby = element.getAttribute('aria-describedby');
+            if (ariaDescribedby === null) {
+                this.tooltipedElement.setAttribute('aria-describedby', this.identifier);
+            }
+            else {
+                // We ensure to have uniq ids
+                element.setAttribute('aria-describedby', `${[...new Set([...ariaDescribedby.split(' '), this.identifier])].join(' ')}`);
+            }
+        };
+        this.identifier = index$1.Ce('mg-tooltip');
         this.message = undefined;
         this.placement = 'bottom';
         this.display = false;
         this.disabled = false;
     }
-    validateIdentifier() {
+    watchIdentifier() {
         // use renderTooltipContent to update tooltip-content id
         this.renderTooltipContent();
     }
-    validateMessage(newValue) {
-        if (!index$1.Ne(newValue)) {
+    watchMessage(newValue) {
+        if (!index$1.Ie(newValue)) {
             throw new Error('<mg-tooltip> prop "message" is required.');
         }
         this.mgTooltipContent.message = newValue;
     }
-    handleDisplay(newValue) {
+    watchDisplay(newValue) {
         if (newValue) {
             this.show();
         }
@@ -8138,7 +8184,7 @@ const MgTooltip = class {
             this.hide();
         }
     }
-    validateDisabled(newValue) {
+    watchDisabled(newValue) {
         if (this.hasCustomTabIndex) {
             if (newValue)
                 this.tooltipedElement.removeAttribute('tabindex');
@@ -8147,23 +8193,29 @@ const MgTooltip = class {
         }
     }
     /**
-     * Render tooltip content element
+     * Render tooltip content element and init listeners
      */
     renderTooltipContent() {
-        const mgTooltipContent = this.element.querySelector('mg-tooltip-content');
-        if (mgTooltipContent === null) {
-            const mgTooltipContent = document.createElement('mg-tooltip-content');
-            mgTooltipContent.setAttribute('slot', 'content');
-            mgTooltipContent.setAttribute('id', this.identifier);
+        if (this.mgTooltipContent) {
+            this.mgTooltipContent.setAttribute('id', this.identifier);
+        }
+        else {
+            this.mgTooltipContent = document.createElement('mg-tooltip-content');
+            this.mgTooltipContent.setAttribute('slot', 'content');
+            this.mgTooltipContent.setAttribute('id', this.identifier);
             const arrow = document.createElement('div');
             arrow.setAttribute('slot', 'arrow');
             arrow.dataset.popperArrow = '';
-            mgTooltipContent.appendChild(arrow);
+            this.mgTooltipContent.appendChild(arrow);
+            // manage tooltipElement & tooltipedElement mouseenter/mouseleave events
+            this.mgTooltipContent.addEventListener('mouseenter', () => {
+                this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIP_ELEMENT, 'mouseenter', Guard.HOVER_TOOLTIPED_ELEMENT);
+            });
+            this.mgTooltipContent.addEventListener('mouseleave', () => {
+                this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIP_ELEMENT, 'mouseleave', Guard.HOVER_TOOLTIPED_ELEMENT);
+            });
             // append tooltip element to component
-            this.element.appendChild(mgTooltipContent);
-        }
-        else {
-            mgTooltipContent.setAttribute('id', this.identifier);
+            this.element.appendChild(this.mgTooltipContent);
         }
     }
     /*************
@@ -8174,14 +8226,13 @@ const MgTooltip = class {
      */
     componentWillLoad() {
         // Get windows to attach events
-        this.windows = index$1.Be(window);
+        this.windows = index$1.ze(window);
         // Get tooltip element
         this.renderTooltipContent();
-        this.mgTooltipContent = this.element.querySelector(`#${this.identifier}`);
         //validate properties
-        this.validateDisabled(this.disabled);
-        this.validateMessage(this.message);
-        this.validateIdentifier();
+        this.watchDisabled(this.disabled);
+        this.watchMessage(this.message);
+        this.watchIdentifier();
     }
     /**
      * Get slotted element
@@ -8193,26 +8244,29 @@ const MgTooltip = class {
         // get slotted element wich is not the tooltip
         const slotElement = this.element.querySelector(`*:not(#${this.identifier})`);
         // Get interactive element
-        const interactiveElement = slotElement.matches(index$1._e) ? slotElement : (_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(index$1._e);
-        // define selected element to become tooltip selector
-        this.tooltipedElement = interactiveElement || slotElement;
+        const interactiveElement = slotElement.matches(index$1.We) ? slotElement : (_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(index$1.We);
+        this.setTooltipedElement(interactiveElement || slotElement);
         // Check if slotted element is a disabled mg-button
         // In this case we wrap the mg-button into a div to enable the tooltip
         if (isButton(slotElement)) {
-            new MutationObserver(mutationList => {
-                if (mutationList.some(mutation => ['aria-disabled', 'disabled'].includes(mutation.attributeName)) && this.guard !== Guard.DISABLE_ON_CLICK) {
-                    this.setMgButtonWrapper(slotElement);
-                    // Since Firefox doesn't trigger a "blur" event when the "disabled" attribute is added or removed from a button
-                    // we have to manually unlock the guard because the "blur" handler of the tooltipedElement won't do it.
-                    this.resetGuard();
-                    this.initTooltip(slotElement, interactiveElement);
-                }
-            }).observe(slotElement, { attributes: true });
+            this.setMgButtonMutationObserver(slotElement);
             this.setMgButtonWrapper(slotElement);
         }
-        // Init Tooltip
-        this.initTooltip(slotElement, interactiveElement);
-        this.handleDisplay(this.display);
+        // Add tabindex to slotted element if we can't find any interactive element
+        if (!this.disabled && !interactiveElement) {
+            this.hasCustomTabIndex = true;
+            slotElement.tabIndex = 0;
+            // Add role on non-interactive element to work with "aria-describedby" for screen readers
+            slotElement.setAttribute('role', 'button');
+        }
+        // apply a11y aria
+        this.setAriaDescribedby(slotElement);
+        // set Tooltip
+        this.setPopper();
+        // add document keyboard handler
+        document.addEventListener('keydown', this.handlePressEscape);
+        // check props
+        this.watchDisplay(this.display);
     }
     /**
      * update popper position after props change on component did update hook to benefit from render ended
@@ -8225,14 +8279,14 @@ const MgTooltip = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h(index.Host, { key: 'bc92b38b5934945abf8657aeb56804c81274a11e' }, index.h("slot", { key: '5fca70b68f35c72c92252106d4b26766e2f671bb' }), index.h("slot", { key: '4426a5f6f55f549791ff22cc7220d728d2cca04f', name: "content" })));
+        return (index.h(index.Host, { key: '9d7c428ba22f6b8e41ad1b62837d7b369e38314d' }, index.h("slot", { key: 'f5bdcac81a64674dd57e88e1c00b540dd49310f6' }), index.h("slot", { key: '8d40b6f4f1d3f385dcdf582509f89b3ec0dbd676', name: "content" })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
-        "identifier": ["validateIdentifier"],
-        "message": ["validateMessage"],
-        "display": ["handleDisplay"],
-        "disabled": ["validateDisabled"]
+        "identifier": ["watchIdentifier"],
+        "message": ["watchMessage"],
+        "display": ["watchDisplay"],
+        "disabled": ["watchDisabled"]
     }; }
 };
 MgTooltip.style = MgTooltipStyle0;