@mgdis/mg-components 5.27.1 → 5.27.3

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

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-83102ab3.js');
-const index$1 = require('./index-4b43c17b.js');
+const index = require('./index-7bb96ccc.js');
+const index$1 = require('./index-8e9b0d9b.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.Re(this.name);
+        this.mgPopoverIdentifier = index$1.Ne(this.name);
         /************
          * Methods *
          ***********/
@@ -161,12 +161,12 @@ const MgActionMore = class {
         const buttonLabel = this.button.label || this.messages.label;
         const buttonContent = [buttonLabel];
         if (!this.button.isIcon && this.displayChevron) {
-            buttonContent.push(index.h("span", { key: '9d7980e769806efa8da21b233aa8039fea6e1321', class: {
+            buttonContent.push(index.h("span", { class: {
                     [`${this.classBase}__chevron`]: true,
                     [`${this.classBase}__chevron--rotate`]: this.expanded === true,
-                } }, index.h("mg-icon", { key: '40cd8ad011debcda6794b5a3f6ae6a42ea6c385d', icon: "chevron-down", size: "small" })));
+                } }, index.h("mg-icon", { icon: "chevron-down", size: "small" })));
         }
-        return (index.h(index.Host, { key: '3a0959e16e76ab50c857e489ddb91a9ed9758fbd', "data-mg-popover-guard": this.mgPopoverIdentifier }, index.h("span", { key: '1e37a919b19563aab4333a94f1676cb6b9d60289', class: "mg-action-more" }, index.h("mg-popover", { key: 'd539fd10e3cf38774c05180e906b35840b37f11a', identifier: this.mgPopoverIdentifier, display: this.expanded, "onDisplay-change": this.handleDisplayChange }, index.h("mg-button", { key: 'e2fb983a112fe074ca9e9fd8629181274aaddd17', variant: this.button.variant, isIcon: this.button.isIcon, disabled: this.button.disabled, type: "button", label: buttonLabel, onClick: this.handleButton }, this.icon && index.h("mg-icon", Object.assign({}, this.icon)), !this.button.isIcon && buttonContent), index.h("div", { key: 'e09d81146a0d5188a90d4e1204852608ea74d433', slot: "content" }, index.h("mg-menu", { key: '00949f8628192c04d537ed9c4c4261b33fb06c71', direction: Direction.VERTICAL, label: this.messages.label }, this.items.map(item => {
+        return (index.h(index.Host, { key: '3833ffe89499015c991ac366c5bb87283948962b', "data-mg-popover-guard": this.mgPopoverIdentifier }, index.h("span", { key: '3393bfd576f5bbef7570090a5813a4eecc944559', class: "mg-action-more" }, index.h("mg-popover", { key: '6c589e9efbbfef4adba6f2c59eb3f562c621daf1', identifier: this.mgPopoverIdentifier, display: this.expanded, "onDisplay-change": this.handleDisplayChange }, index.h("mg-button", { key: '485538eb6f660de92c372ebd395e18ff7ef66c96', variant: this.button.variant, isIcon: this.button.isIcon, disabled: this.button.disabled, type: "button", label: buttonLabel, onClick: this.handleButton }, this.icon && index.h("mg-icon", Object.assign({ key: 'd385d7c69f118b8f20d59547357dad7d8a56766d' }, this.icon)), !this.button.isIcon && buttonContent), index.h("div", { key: '553f7704a5fc0b1a89062ce234607296d8bf53f2', slot: "content" }, index.h("mg-menu", { key: '4a161502b2d1dec2b17cd7c44cd492ec745cb7dd', direction: Direction.VERTICAL, label: this.messages.label }, this.items.map(item => {
             var _a;
             return (
             // eslint-disable-next-line react/jsx-no-bind
@@ -203,7 +203,7 @@ const MgBadge = class {
         this.label = undefined;
         this.variant = variants$5[0];
         this.outline = undefined;
-        this.classCollection = new index$1.Me(['mg-c-badge']);
+        this.classCollection = new index$1.Be(['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.Be(newValue)) {
+        if (!index$1.Pe(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.Me(['mg-c-button']);
+        this.classCollection = new index$1.Be(['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.Be(this.label)) {
+            if (!index$1.Pe(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.Ue(() => {
+        index$1.ze(() => {
             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;
@@ -410,7 +410,7 @@ const MgButton = class {
      */
     render() {
         var _a;
-        return (index.h(index.Host, { key: '8aa45a51510eccbb021e452d540c77844f3f4792', role: "button", tabIndex: 0, type: this.type, form: this.form, "full-width": this.fullWidth, "aria-label": this.label, "aria-disabled": (_a = this.disabled) === null || _a === void 0 ? void 0 : _a.toString(), onClick: this.handleClick, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown }, index.h("div", { key: '9743ead1b9fd1f70ef0690087806a1767c5825b0', class: this.classCollection.join(), id: this.identifier }, this.loading && index.h("mg-icon", { icon: "loader", spin: true }), index.h("div", { key: '7070995c17ecedb4223475cce662e115e8d72510', class: "mg-c-button__content" }, index.h("slot", { key: 'cb0ad8aa02d634f0a3dfa9b584ec8fb26da88271' })))));
+        return (index.h(index.Host, { key: '8aa45a51510eccbb021e452d540c77844f3f4792', role: "button", tabIndex: 0, type: this.type, form: this.form, "full-width": this.fullWidth, "aria-label": this.label, "aria-disabled": (_a = this.disabled) === null || _a === void 0 ? void 0 : _a.toString(), onClick: this.handleClick, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown }, index.h("div", { key: '9743ead1b9fd1f70ef0690087806a1767c5825b0', class: this.classCollection.join(), id: this.identifier }, this.loading && index.h("mg-icon", { key: '543718fe45ad3e1901c4ef0c39b98705aa9fd64e', icon: "loader", spin: true }), index.h("div", { key: '21bc8c1a14f93db8b2373864a18da5c651e1ac4d', class: "mg-c-button__content" }, index.h("slot", { key: 'd16d710b4cb94ec1b7e3dfee2d4a70ee059528b4' })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -452,7 +452,7 @@ const MgCard = class {
         };
         this.variant = undefined;
         this.variantStyle = undefined;
-        this.classCollection = new index$1.Me([this.classBase]);
+        this.classCollection = new index$1.Be([this.classBase]);
     }
     validateVariant(newValue, oldValue) {
         if (newValue && !variants$3.includes(newValue))
@@ -490,7 +490,7 @@ const MgCard = class {
      */
     render() {
         var _a;
-        return (index.h("div", { key: '9e604fe7b06f19797c6841b1902b56684a4bdc69', class: this.classCollection.join() }, ((_a = this.variantStyle) === null || _a === void 0 ? void 0 : _a.startsWith('bar-')) && index.h("span", { class: "mg-c-card__bar" }), index.h("slot", { key: '44d9092aaa6bbdf0b20a1fffe0edad15150cd8cb' })));
+        return (index.h("div", { key: 'b786a9ff3b706dcb24f6b3218feef97e284e2b9a', class: this.classCollection.join() }, ((_a = this.variantStyle) === null || _a === void 0 ? void 0 : _a.startsWith('bar-')) && index.h("span", { key: '11a3b421c49864667832919e6d2cbe9ea19f9344', class: "mg-c-card__bar" }), index.h("slot", { key: '7421932644500c619d34cbe003a0f0bb50b612a7' })));
     }
     static get watchers() { return {
         "variant": ["validateVariant"],
@@ -529,7 +529,7 @@ const MgCharacterLeft = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("span", { key: 'fafe1f542f085f5f910a7b43cf6fa7e9fe9fd302', id: this.identifier, "aria-live": "polite" }, index.h("span", { key: '54b74d3a1161c583e47b0ad96845664e3ad9623d', "aria-hidden": "true" }, this.maxlength - this.characters.length, "/", this.maxlength), index.h("span", { key: '390ad6cd724c66230fb726a307391922ddfe7c2c', class: "mg-u-visually-hidden" }, this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length))));
+        return (index.h("span", { key: 'd67db2514f27a2c0de9c187036f8f7e192761ce2', id: this.identifier, "aria-live": "polite" }, index.h("span", { key: 'e0622c110944075e1d659347965b20a9bfb5ebac', "aria-hidden": "true" }, this.maxlength - this.characters.length, "/", this.maxlength), index.h("span", { key: '82a7deaf6f6f2ad32a8d2cfe57787b2b7a20fd4b', class: "mg-u-visually-hidden" }, this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -557,7 +557,7 @@ const MgDetails = class {
         this.expanded = false;
     }
     validateTitles(newValue) {
-        if (!index$1.Be(newValue)) {
+        if (!index$1.Pe(newValue)) {
             throw new Error('<mg-details> prop "toggleClosed" and "toggleOpened" must be defined.');
         }
     }
@@ -579,7 +579,7 @@ const MgDetails = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("details", { key: '28d18aa44daec76231b80e2f8c48b475bb318d10', class: "mg-c-details", onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, index.h("summary", { key: 'a998fadad2ee592b632ab19c0fe69f142211156a' }, index.h("slot", { key: '7e5b636e9ed6f05904ed13c06cff14a5353de74b', name: "summary" }), index.h("span", { key: '770f0cfd6f70127a61f6ffab1c30e4d8d83c70bb', class: "mg-c-details__toggle" }, index.h("mg-icon", { key: '2f996b8793388b6606706459352a9b540e45f120', icon: "chevron-up", size: "small", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), index.h("span", { key: '1d0dc92242080d172d226bf013ae56ffe6e4a717', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), index.h("div", { key: 'd6b973893a807d2ef94a7c3d131e3ca0c9a675e3', class: "mg-c-details__details" }, index.h("slot", { key: 'ae1928a7aad8d986f44cb36e02648680dea074a4', name: "details" }))));
+        return (index.h("details", { key: '9c629e03b5286afb8b9139aa4e182f10a1005c81', class: "mg-c-details", onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, index.h("summary", { key: 'a525137281cb20fe8b74db56fe0e6f4f59427e4d' }, index.h("slot", { key: '7fb96692cfa339e904894bbddffd2211ff7741b5', name: "summary" }), index.h("span", { key: 'b322eb9e02173a24bcff738d6f1333ce6ab68912', class: "mg-c-details__toggle" }, index.h("mg-icon", { key: 'fd952a2abf6b689360faa0ef5219eb400b1a6f61', icon: "chevron-up", size: "small", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), index.h("span", { key: '10b0a8a350f857296ae5600de5f68a9b528a3739', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), index.h("div", { key: 'e54fe3d881a04ccbb3d394b0492f6ab906eac1f8', class: "mg-c-details__details" }, index.h("slot", { key: 'ae05e78c61d9fa8e1d90aa58ac7d6ce8862128ff', name: "details" }))));
     }
     static get watchers() { return {
         "toggleClosed": ["validateTitles"],
@@ -602,7 +602,7 @@ const MgDivider = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("div", { key: '7250dfa7ca66ea0831292a25ea7e76c29ca36500', class: {
+        return (index.h("div", { key: '92413bf42dc057ea1dfd645b4d619a7f180e5aca', class: {
                 'mg-c-divider': true,
                 'mg-c-divider--full': this.size === 'full',
             } }));
@@ -715,7 +715,7 @@ const MgForm = class {
                 }
             });
         };
-        this.identifier = index$1.Re('mg-form');
+        this.identifier = index$1.Ne('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.Me(['mg-c-form']);
+        this.classCollection = new index$1.Be(['mg-c-form']);
         this.requiredMessageText = undefined;
     }
     validateRequiredMessage(newValue) {
@@ -806,7 +806,7 @@ const MgForm = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("form", { key: 'cfcf6da7026b3e3703903090773ecf69e57034cc', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && index.h("p", { innerHTML: this.requiredMessageText }), index.h("slot", { key: '2f0c489e6ce31580cbb66f144749f5c3e2ad18eb' }), !this.readonly && !this.disabled && index.h("slot", { name: "actions" })));
+        return (index.h("form", { key: '498fe7564261b0aad99bab2686a6f0f4624785cc', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && index.h("p", { key: 'd0d0f1f6373eff660de65104afb3ba40835a58e3', innerHTML: this.requiredMessageText }), index.h("slot", { key: '9e98e1b0fda2a8b69f8efb8bacccb6cd1173ba4f' }), !this.readonly && !this.disabled && index.h("slot", { key: '083f5490c17548defa713bb697b731b02fad9198', name: "actions" })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -865,7 +865,7 @@ const MgIcon = class {
         this.variant = undefined;
         this.variantStyle = undefined;
         this.spin = false;
-        this.classCollection = new index$1.Me(['mg-c-icon']);
+        this.classCollection = new index$1.Be(['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.Fe(this.element.querySelector('[slot="title"]'), headingTags)) {
+        if (!index$1.Ce(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) {
@@ -977,13 +977,13 @@ const MgIllustratedMessage = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("div", { key: '566da859acf529d2389b892db469a2293f85c67e', class: {
+        return (index.h("div", { key: '042f4e43323c30176c3d2b4d596d55a25a4382b7', class: {
                 'mg-c-illustrated-message': true,
                 'mg-c-illustrated-message--horizontal': this.direction === 'horizontal',
-            } }, index.h("div", { key: '7d2d44156ae0c8c0ac2364e6f1fc7c41242f7d6c', class: {
+            } }, index.h("div", { key: 'ebda1c1ca89ac40ff69820f96c10c0515ab9590a', class: {
                 'mg-c-illustrated-message__illustration': true,
                 'mg-c-illustrated-message__illustration--small': this.size === 'small',
-            } }, index.h("slot", { key: '3a477be62f6866dece99be8882f89dcd2a620c5e', name: "illustration" })), index.h("div", { key: 'd6d8950d4bb5b8c6cafe1c148978bed1291f5768', class: "mg-c-illustrated-message__slots" }, index.h("div", { key: '47d0406a0d5eb2ea2388472defdc44411ba2977d', class: "mg-c-illustrated-message__title" }, index.h("slot", { key: '8126236dfce191b268f84f45183cc8304019c129', name: "title" })), index.h("div", { key: '64641dadca2ed82f3ad4b24d677ee01cc002dabf', class: "mg-c-illustrated-message__details" }, index.h("slot", { key: '65b61b0c16c9dde9cd2eab062b97fe189f53e5a2', name: "details" })))));
+            } }, index.h("slot", { key: 'aa65a2f9ea28bba75b7b7ad8c0816ea9efe4c180', name: "illustration" })), index.h("div", { key: '8173740ede93f2800ef9de9645fd4cc05ee66e3b', class: "mg-c-illustrated-message__slots" }, index.h("div", { key: '970bba9668cd3ab806399cee83e6a8c9648adff0', class: "mg-c-illustrated-message__title" }, index.h("slot", { key: '590d7970e1845e48658ae6287fdf91e782fcfe57', name: "title" })), index.h("div", { key: '0c49e0842c7d12e6810fbf95404d8a66f7139320', class: "mg-c-illustrated-message__details" }, index.h("slot", { key: 'efec02b5d379d2a042591e4a02896691be8d67cb', name: "details" })))));
     }
     get element() { return index.getElement(this); }
 };
@@ -1064,7 +1064,7 @@ const MgInput = class {
         this.isVerticalList = false;
     }
     watchIdentifier(newValue) {
-        if (!index$1.Be(newValue)) {
+        if (!index$1.Pe(newValue)) {
             throw new Error('<mg-input> prop "identifier" is required.');
         }
         else {
@@ -1149,7 +1149,7 @@ const MgInput = class {
      */
     // eslint-disable-next-line @stencil-community/no-unused-watch
     watchLabel() {
-        if (!index$1.Be(this.label)) {
+        if (!index$1.Pe(this.label)) {
             throw new Error('<mg-input> prop "label" is required.');
         }
         else {
@@ -1243,7 +1243,7 @@ const MgInput = class {
     render() {
         const readonlyValue = this.getReadonlyValues();
         const isGroup = this.isFieldset && !this.isReadonly;
-        return (index.h(index.Host, { key: '5eedfac460913f23f71a3fbba43af958afc63e0d', class: this.element.classList.toString(), role: isGroup ? 'group' : undefined, "aria-labelledby": isGroup ? `${this.identifier}-title` : undefined }, index.h("div", { key: '9335584ba10e2bc199accb9b4200b45252c848a9', class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide } }, index.h("slot", { key: '7c5de08476008bfe6cbcfa07706cee30f16bc059', name: this.slotLabel }), this.tooltip && !this.isReadonly && (this.tooltipPosition === 'label' || this.labelOnTop) && !this.labelHide && this.renderTooltip()), index.h("div", { key: '5cf88a0ea68aaf2d8f1c96c4593ef6ea0133beb6', class: "mg-c-input__input-container" }, this.isReadonly
+        return (index.h(index.Host, { key: '7a344b1c43f967771a6a3460adf83d60aa7fcc7e', class: this.element.classList.toString(), role: isGroup ? 'group' : undefined, "aria-labelledby": isGroup ? `${this.identifier}-title` : undefined }, index.h("div", { key: 'e88dbd6ad81f94b6ab3fdd2d73986b06f05f233d', class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide } }, index.h("slot", { key: '12f3e23bd14c710ef5ecad3dedeb4f3d058c49d7', name: this.slotLabel }), this.tooltip && !this.isReadonly && (this.tooltipPosition === 'label' || this.labelOnTop) && !this.labelHide && this.renderTooltip()), index.h("div", { key: 'd7adace17ac5d68597dd5ece286ec04e405abccd', class: "mg-c-input__input-container" }, this.isReadonly
             ? [
                 Array.isArray(readonlyValue) ? (index.h("ul", { key: "readonly-value-list" }, readonlyValue.map(value => (index.h("li", { key: value }, index.h("strong", null, value)))))) : (index.h("strong", { key: "readonly-value" }, readonlyValue)),
                 index.h("slot", { key: "default-slot" }),
@@ -1445,7 +1445,7 @@ const MgInputCheckbox = class {
          * Method to update searchResults
          */
         this.updateSearchResults = () => {
-            this.searchResults = this.checkboxItems.filter(item => index$1.Ne(item.title).includes(index$1.Ne(this.searchValue)));
+            this.searchResults = this.checkboxItems.filter(item => index$1.We(item.title).includes(index$1.We(this.searchValue)));
         };
         /**
          * Method to validate if one of inputs value is checked id required
@@ -1519,7 +1519,7 @@ const MgInputCheckbox = class {
         this.helpText = undefined;
         this.valid = undefined;
         this.invalid = undefined;
-        this.classCollection = new index$1.Me([this.baseClassName, classFieldset]);
+        this.classCollection = new index$1.Be([this.baseClassName, classFieldset]);
         this.errorMessage = undefined;
         this.checkboxItems = [];
         this.displaySearchInput = undefined;
@@ -1627,7 +1627,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.Be(errorMessage)) {
+        else if (!index$1.Pe(errorMessage)) {
             throw new Error('<mg-input-checkbox> method "setError()" param "errorMessage" must be a string');
         }
         else {
@@ -1740,7 +1740,7 @@ const MgInputCheckbox = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("mg-input", { key: '97f239b0bb233a2ea1afb4124f810a54c0be09f9', 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: '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())));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -1855,10 +1855,10 @@ const MgInputCheckboxPaginated = class {
      * @returns HTML Element
      */
     render() {
-        const getText = (checkboxes) => (index.h("em", { key: 'd1377fde2a3fdf69077a52d9b81e38b7c52881ec', class: "mg-c-input__section-header-title-label" }, `${this.messages[checkboxes.length > 1 ? 'titlePlurial' : 'title']} (${checkboxes.length})`));
+        const getText = (checkboxes) => (index.h("em", { key: '0a1e9d02d508a27fda294b25d835f44b73d4c443', class: "mg-c-input__section-header-title-label" }, `${this.messages[checkboxes.length > 1 ? 'titlePlurial' : 'title']} (${checkboxes.length})`));
         const [from, to] = this.getFromToIndexes();
         const itemsContainerId = `items-${this.sectionKind}-container`;
-        return (index.h(index.Host, { key: '782f416233239ad46f653bfb34bc2adf2bf5c7b7', hidden: this.checkboxes.length < 1 }, index.h("div", { key: 'cbcc808b0aa6701cccf3dd23c78ad7c763dcedd5', class: "mg-c-input__section-header" }, this.titleKind === SectionTitleKind.BUTTON ? (index.h("mg-button", { variant: "flat", onClick: this.handleToggleClick, "aria-controls": itemsContainerId, "aria-expanded": this.expanded.toString() }, index.h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down', size: "small" }), index.h("span", { class: "mg-c-input__section-header-title" }, getText(this.checkboxes)))) : (index.h("p", { class: "mg-c-input__section-header-title mg-c-input__section-header-title--static" }, getText(this.checkboxes))), ((this.sectionKind === SectionKind.SELECTED && this.expanded) || this.sectionKind === SectionKind.NOT_SELECTED) && (index.h("mg-tooltip", { class: "mg-c-input__section-header-tootlip", message: this.messages.tooltip, "data-popper-strategy": "absolute" }, index.h("mg-button", { variant: "link", onClick: this.massActionHandler }, this.messages.action))), this.expanded && this.getPageCount(this.checkboxes) > 1 && (index.h("mg-pagination", { key: "search-pagination", totalPages: this.getPageCount(this.checkboxes), currentPage: this.currentPage, "onCurrent-page-change": this.handleCurrentPageChange, hideNavigationLabels: true, hidePageCount: true, identifier: `input-checkbox-pagination-${this.sectionKind}` }))), index.h("div", { key: 'e3a31d6c97ec062b80932a6d22c422e1b42f3866', hidden: !this.expanded, id: itemsContainerId, class: "mg-c-input__section-content" }, index.h(MgInputCheckboxList, { key: '44c4a5908286e4ec4f477d6cddf05752f83e26c1', checkboxes: this.getArrayRange(this.checkboxes, from, to), displaySearchInput: true, messages: this.messages, id: `items-${this.sectionKind}`, disabled: this.disabled, name: this.name, invalid: this.invalid }))));
+        return (index.h(index.Host, { key: '71c72a433b984a609046fdce7cf4c6130c8e1ada', hidden: this.checkboxes.length < 1 }, index.h("div", { key: 'b2bd73e01db4db0edca92c5e7fc64edfda9d3b6d', class: "mg-c-input__section-header" }, this.titleKind === SectionTitleKind.BUTTON ? (index.h("mg-button", { variant: "flat", onClick: this.handleToggleClick, "aria-controls": itemsContainerId, "aria-expanded": this.expanded.toString() }, index.h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down', size: "small" }), index.h("span", { class: "mg-c-input__section-header-title" }, getText(this.checkboxes)))) : (index.h("p", { class: "mg-c-input__section-header-title mg-c-input__section-header-title--static" }, getText(this.checkboxes))), ((this.sectionKind === SectionKind.SELECTED && this.expanded) || this.sectionKind === SectionKind.NOT_SELECTED) && (index.h("mg-tooltip", { key: 'dcc6b405032e5b59cc748f1cbc87ab087c37cc31', class: "mg-c-input__section-header-tootlip", message: this.messages.tooltip, "data-popper-strategy": "absolute" }, index.h("mg-button", { key: 'a1d38aedc328d81ac8139f70e8564538f7e4b4c4', variant: "link", onClick: this.massActionHandler }, this.messages.action))), this.expanded && this.getPageCount(this.checkboxes) > 1 && (index.h("mg-pagination", { key: "search-pagination", totalPages: this.getPageCount(this.checkboxes), currentPage: this.currentPage, "onCurrent-page-change": this.handleCurrentPageChange, hideNavigationLabels: true, hidePageCount: true, identifier: `input-checkbox-pagination-${this.sectionKind}` }))), index.h("div", { key: 'd9913a7ceeac5d91f0c58e5021a88f1bf37b1387', hidden: !this.expanded, id: itemsContainerId, class: "mg-c-input__section-content" }, index.h(MgInputCheckboxList, { key: 'f262b871762d3c3f3e9828ed04cd735a89f9f27d', checkboxes: this.getArrayRange(this.checkboxes, from, to), displaySearchInput: true, messages: this.messages, id: `items-${this.sectionKind}`, disabled: this.disabled, name: this.name, invalid: this.invalid }))));
     }
     static get watchers() { return {
         "checkboxes": ["validateCheckboxes"],
@@ -1890,7 +1890,7 @@ const MgInputDate = class {
          * @param value - value to test
          * @returns truthy when value match the pattern
          */
-        this.isValidPattern = (value) => index$1.Be(value) && index$1.de.test(value);
+        this.isValidPattern = (value) => index$1.Pe(value) && index$1.pe.test(value);
         /**
          * Format help text to display
          * @param helpText - help text format
@@ -1898,10 +1898,10 @@ const MgInputDate = class {
          */
         this.formatHelpText = (helpText) => {
             const defaultHelpTextVariable = '{defaultHelpText}';
-            let text = index$1.Be(helpText) ? helpText : this.messages.input.date.helpText;
+            let text = index$1.Pe(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.ge(index$1.We(new Date('2023-12-24')), this.systemLocale));
+            return text.replace('{pattern}', this.renderPattern()).replace('{date}', index$1.ge(index$1.Xe(new Date('2023-12-24')), this.systemLocale));
         };
         /**
          * Handle input event
@@ -2008,7 +2008,7 @@ const MgInputDate = class {
          * @returns translated html pattern
          */
         this.renderPattern = () => {
-            let patternLocal = index$1.Pe(this.systemLocale);
+            let patternLocal = index$1.Ge(this.systemLocale);
             for (const key in this.messages.input.date.pattern) {
                 patternLocal = patternLocal.replace(key, this.messages.input.date.pattern[key]);
             }
@@ -2030,7 +2030,7 @@ const MgInputDate = class {
         this.helpText = undefined;
         this.valid = undefined;
         this.invalid = undefined;
-        this.classCollection = new index$1.Me(['mg-c-input--date']);
+        this.classCollection = new index$1.Be(['mg-c-input--date']);
         this.errorMessage = undefined;
     }
     validateValue(newValue) {
@@ -2038,7 +2038,7 @@ const MgInputDate = class {
         if (newValue === '')
             newValue = null;
         // check value validity
-        if (newValue && !index$1.Be(newValue)) {
+        if (newValue && !index$1.Pe(newValue)) {
             throw new Error("<mg-input-date> props 'value' must be a valid string");
         }
         else if (!newValue || (newValue && this.isValidPattern(newValue))) {
@@ -2095,7 +2095,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.Be(errorMessage)) {
+        else if (!index$1.Pe(errorMessage)) {
             throw new Error('<mg-input-date> method "setError()" param "errorMessage" must be a string');
         }
         else {
@@ -2149,7 +2149,7 @@ const MgInputDate = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("mg-input", { key: 'ff06e342e04a96ecc30ff064ace7c179b1db8425', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonlyValue: index$1.ge(this.value, this.locale), tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, index.h("input", { key: 'bcecf05a95c3e812af6fc6d0b137afba726b2cb8', 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.ge(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 +2280,9 @@ const MgInputNumeric = class {
         this.formatValue = (value) => {
             switch (this.format) {
                 case 'number':
-                    return index$1.qe(value, this.locale, this.type === 'decimal' ? this.decimalLength : undefined);
+                    return index$1.Qe(value, this.locale, this.type === 'decimal' ? this.decimalLength : undefined);
                 case 'currency':
-                    return index$1.ze(value, this.locale, this.currency);
+                    return index$1.Ke(value, this.locale, this.currency);
                 case 'none':
                     return value.toString();
             }
@@ -2319,7 +2319,7 @@ const MgInputNumeric = class {
         this.decimalLength = 2;
         this.valid = undefined;
         this.invalid = undefined;
-        this.classCollection = new index$1.Me(['mg-c-input--numeric']);
+        this.classCollection = new index$1.Be(['mg-c-input--numeric']);
         this.errorMessage = undefined;
         this.hasFocus = undefined;
     }
@@ -2415,7 +2415,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.Be(errorMessage)) {
+        else if (!index$1.Pe(errorMessage)) {
             throw new Error('<mg-input-numeric> method "setError()" param "errorMessage" must be a string');
         }
         else {
@@ -2510,10 +2510,10 @@ const MgInputNumeric = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("mg-input", { key: 'c1b1a0cd22f0ed6597852ecd38bb97d9942565a1', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonlyValue: this.readonlyValue, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, index.h("input", { key: '9e64e0096e3ab8212c6626fba772a7756cd4f144', type: "text", class: "mg-c-input__box mg-c-input__box--width", value: this.displayValue(), id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
+        return (index.h("mg-input", { key: '52a1e1cc7a6f16290a62c258e099cd8c0cc30567', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonlyValue: this.readonlyValue, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, index.h("input", { key: 'a36bbe191ff0fcacbf7bd459ad7d743a623eba44', type: "text", class: "mg-c-input__box mg-c-input__box--width", value: this.displayValue(), id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
                 if (el !== null)
                     this.input = el;
-            } }), index.h("slot", { key: 'd2484bde61ff7962bb8b060f448a656160edd3f9', name: "append-input" })));
+            } }), index.h("slot", { key: '6b6ae5ae8aa3de2c1d0360c2ddef962a7b3e6bc0', name: "append-input" })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -2607,7 +2607,7 @@ const MgInputPassword = class {
         this.helpText = undefined;
         this.valid = undefined;
         this.invalid = undefined;
-        this.classCollection = new index$1.Me(['mg-c-input--password']);
+        this.classCollection = new index$1.Be(['mg-c-input--password']);
         this.errorMessage = undefined;
         this.displayPassword = false;
     }
@@ -2665,7 +2665,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.Be(errorMessage)) {
+        else if (!index$1.Pe(errorMessage)) {
             throw new Error('<mg-input-password> method "setError()" param "errorMessage" must be a string');
         }
         else {
@@ -2711,10 +2711,10 @@ const MgInputPassword = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("mg-input", { key: '0743de03e00b3eeeca1e155fefa6fa3fa8dd20e4', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonlyValue: this.value !== undefined ? '•'.repeat(this.value.length) : undefined, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, index.h("span", { key: '35c61d84248fe5b65c91afcb932d8e71aa0db71f', class: "mg-c-input__input-group" }, index.h("input", { key: 'b546544ac71d8d29ea7ac18146faccfdb1d738de', type: this.displayPassword ? 'text' : 'password', class: "mg-c-input__box mg-c-input__box--width", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
+        return (index.h("mg-input", { key: '39c2a1a17b4b64cb79ed6ca7036dd304ed01a8e6', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonlyValue: this.value !== undefined ? '•'.repeat(this.value.length) : undefined, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, index.h("span", { key: 'd85a4240b6d178cde418ee72164f337c4986aeff', class: "mg-c-input__input-group" }, index.h("input", { key: '2caccd24026632f5e65dd4cf12914bf71ca656d3', type: this.displayPassword ? 'text' : 'password', class: "mg-c-input__box mg-c-input__box--width", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
                 if (el !== null)
                     this.input = el;
-            } }), index.h("mg-button", { key: 'fbe3f10fd8b9626d13d1e8ca9f3355e8af0d573e', label: this.messages.input.password[this.displayPassword ? 'hide' : 'display'], disabled: this.disabled, variant: "flat", class: "mg-c-input__append-button", "is-icon": true, onClick: this.toggleDisplayPassword, "aria-controls": this.identifier }, index.h("mg-icon", { key: '48f1d7921294675f036439364bc73d1c730573c9', icon: this.displayPassword ? 'eye-slash' : 'eye' })))));
+            } }), index.h("mg-button", { key: '59bd6c94c412eb8bcd5ece82e569e7df6fadaf9a', label: this.messages.input.password[this.displayPassword ? 'hide' : 'display'], disabled: this.disabled, variant: "flat", class: "mg-c-input__append-button", "is-icon": true, onClick: this.toggleDisplayPassword, "aria-controls": this.identifier }, index.h("mg-icon", { key: '22db9c43220335f258b8fa5978cb66a5d4c14c61', icon: this.displayPassword ? 'eye-slash' : 'eye' })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -2812,7 +2812,7 @@ const MgInputRadio = class {
         this.helpText = undefined;
         this.valid = undefined;
         this.invalid = undefined;
-        this.classCollection = new index$1.Me(['mg-c-input--radio', classFieldset]);
+        this.classCollection = new index$1.Be(['mg-c-input--radio', classFieldset]);
         this.errorMessage = undefined;
         this.options = undefined;
     }
@@ -2825,7 +2825,7 @@ const MgInputRadio = class {
             throw new Error('<mg-input-radio> prop "items" require at least 2 items.');
         }
         // String array
-        else if (index$1.Oe(newValue)) {
+        else if (index$1.Ue(newValue)) {
             this.options = newValue.map(item => ({ title: item, value: item, disabled: this.disabled }));
         }
         // Object array
@@ -2884,7 +2884,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.Be(errorMessage)) {
+        else if (!index$1.Pe(errorMessage)) {
             throw new Error('<mg-input-radio> method "setError()" param "errorMessage" must be a string');
         }
         else {
@@ -2933,7 +2933,7 @@ const MgInputRadio = class {
      */
     render() {
         var _a;
-        return (index.h("mg-input", { key: 'e09de122464247bc706e0ec83257cad72645406a', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonlyValue: (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString(), tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, index.h("ul", { key: '28cf4fa269394ec663e05355eb1b6158da1d8328', class: "mg-c-input__input-group-container", role: "list" }, this.options.map((input, index$1) => (index.h("li", { key: input.title, class: { 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': this.disabled || input.disabled } }, index.h("input", { type: "radio", id: this.identifier + '_' + index$1, name: this.identifier, value: index$1, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index$1].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: (el) => {
+        return (index.h("mg-input", { key: 'a987bc86a4bf97aead796cd7c91110cc0e3c90df', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonlyValue: (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString(), tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, index.h("ul", { key: 'e5e249a744ecb1f09cdbe7f9ec9d8f44b8b20ece', class: "mg-c-input__input-group-container", role: "list" }, this.options.map((input, index$1) => (index.h("li", { key: input.title, class: { 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': this.disabled || input.disabled } }, index.h("input", { type: "radio", id: this.identifier + '_' + index$1, name: this.identifier, value: index$1, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index$1].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: (el) => {
                 if (el !== null)
                     this.inputs[index$1] = el;
             } }), index.h("label", { htmlFor: this.identifier + '_' + index$1 }, input.title)))))));
@@ -3031,7 +3031,7 @@ const MgInputSelect = class {
             if (this.input.value === '') {
                 this.setValue(null);
             }
-            else if (index$1.Oe(this.items) && this.items.includes(this.input.value)) {
+            else if (index$1.Ue(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 +3105,7 @@ const MgInputSelect = class {
         this.helpText = undefined;
         this.valid = undefined;
         this.invalid = undefined;
-        this.classCollection = new index$1.Me(['mg-c-input--select']);
+        this.classCollection = new index$1.Be(['mg-c-input--select']);
         this.errorMessage = undefined;
         this.options = undefined;
         this.valueExist = undefined;
@@ -3113,7 +3113,7 @@ const MgInputSelect = class {
     }
     validateValue(newValue) {
         var _a, _b;
-        if (index$1.Oe(this.items) && typeof newValue === 'string') {
+        if (index$1.Ue(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 +3130,7 @@ const MgInputSelect = class {
             this.options = [];
         }
         // String array
-        else if (index$1.Oe(newValue)) {
+        else if (index$1.Ue(newValue)) {
             if (typeof this.value === 'string')
                 this.valueExist = newValue.includes(this.value);
             this.options = newValue.map(item => ({ title: item, value: item }));
@@ -3202,7 +3202,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.Be(errorMessage)) {
+        else if (!index$1.Pe(errorMessage)) {
             throw new Error('<mg-input-select> method "setError()" param "errorMessage" must be a string');
         }
         else {
@@ -3255,11 +3255,11 @@ const MgInputSelect = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("mg-input", { key: '66df624f7671f6403b623718110403a83c8282ad', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonlyValue: this.readonlyValue, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, index.h("select", { key: '005b1893fb651cbaebfbb66ca816b4605d874808', class: "mg-c-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
+        return (index.h("mg-input", { key: 'b6e431b881062928dfff44b35b40e2c16a8c56fc', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonlyValue: this.readonlyValue, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, index.h("select", { key: '964162aae800e85cf9801c67c264736061fd80c6', class: "mg-c-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
                 if (el !== null)
                     this.input = el;
             } }, (!this.placeholderHide || !this.valueExist) && ( // In case passed value does not match any option we display the placeholder
-        index.h("option", { value: "", disabled: this.placeholderDisabled && this.valueExist }, this.placeholder)), this.options.map(option => isOptGroup(option) ? (index.h("optgroup", { label: option.group, key: option.group }, option.options.map(this.renderOption))) : (isOption$1(option) && this.renderOption(option))))));
+        index.h("option", { key: '9c24f8983858810541a0a626a5705ac9d05e26e0', value: "", disabled: this.placeholderDisabled && this.valueExist }, this.placeholder)), this.options.map(option => isOptGroup(option) ? (index.h("optgroup", { label: option.group, key: option.group }, option.options.map(this.renderOption))) : (isOption$1(option) && this.renderOption(option))))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -3314,7 +3314,7 @@ const MgInputText = class {
          */
         this.handleFocus = () => {
             this.classCollection.add(this.classFocus);
-            this.classCollection = new index$1.Me(this.classCollection.classes);
+            this.classCollection = new index$1.Be(this.classCollection.classes);
         };
         /**
          * Handle blur event
@@ -3322,7 +3322,7 @@ const MgInputText = class {
         this.handleBlur = () => {
             // Manage focus
             this.classCollection.delete(this.classFocus);
-            this.classCollection = new index$1.Me(this.classCollection.classes);
+            this.classCollection = new index$1.Be(this.classCollection.classes);
             // Display Error
             this.handlerInProgress = Handler.BLUR;
             this.displayError().finally(() => {
@@ -3397,7 +3397,7 @@ const MgInputText = class {
         this.helpText = undefined;
         this.valid = undefined;
         this.invalid = undefined;
-        this.classCollection = new index$1.Me(['mg-c-input--text']);
+        this.classCollection = new index$1.Be(['mg-c-input--text']);
         this.errorMessage = undefined;
     }
     handleValue(newValue) {
@@ -3448,7 +3448,7 @@ const MgInputText = class {
             this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);
     }
     validatePattern(newValue) {
-        if (newValue !== undefined && !(index$1.Be(this.pattern) && index$1.Be(this.patternErrorMessage))) {
+        if (newValue !== undefined && !(index$1.Pe(this.pattern) && index$1.Pe(this.patternErrorMessage))) {
             throw new Error('<mg-input-text> props "pattern" and "patternErrorMessage" must be non-empty string and paired.');
         }
     }
@@ -3478,7 +3478,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.Be(errorMessage)) {
+        else if (!index$1.Pe(errorMessage)) {
             throw new Error('<mg-input-text> method "setError()" param "errorMessage" must be a string');
         }
         else {
@@ -3532,14 +3532,14 @@ const MgInputText = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("mg-input", { key: '0bcc765df96b4183f70e03f0579bc64f0d2455d2', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [this.characterLeftId], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonlyValue: this.value, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, index.h("div", { key: 'fdbfcdc5be2946e3c25b4ea1bc3e1824a205e4fe', class: "mg-c-input__with-character-left", style: {
+        return (index.h("mg-input", { key: 'ee9b290a3c97af6c264b37958c3a6123d516f391', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [this.characterLeftId], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonlyValue: this.value, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, index.h("div", { key: 'e348db67a88f9941c549cb190aaca88c93aac54c', class: "mg-c-input__with-character-left", style: {
                 '--mg-character-left-message-length': (this.displayCharacterLeft
                     ? (this.maxlength - (this.value || '').length).toString().length + this.maxlength.toString().length + 1
                     : 0).toString(),
-            } }, this.icon !== undefined && index.h("mg-icon", { icon: this.icon }), index.h("input", { key: '1fa97359a69a9ab7093dbcbe4349638f121931c7', type: this.type, class: "mg-c-input__box mg-c-input__box--width", value: this.value, id: this.identifier, list: this.hasDatalist() ? this.datalistId : undefined, autocomplete: this.hasDatalist() ? 'off' : undefined, name: this.name, placeholder: this.placeholder, title: this.placeholder, maxlength: this.maxlength, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), pattern: this.pattern, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
+            } }, this.icon !== undefined && index.h("mg-icon", { key: 'dfe0ce7e271c40d4da20f00b35ad4fe104e08c91', icon: this.icon }), index.h("input", { key: '451af2cff19f47d9b9d3de824546324b6bfaf235', type: this.type, class: "mg-c-input__box mg-c-input__box--width", value: this.value, id: this.identifier, list: this.hasDatalist() ? this.datalistId : undefined, autocomplete: this.hasDatalist() ? 'off' : undefined, name: this.name, placeholder: this.placeholder, title: this.placeholder, maxlength: this.maxlength, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), pattern: this.pattern, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
                 if (el !== null)
                     this.input = el;
-            } }), this.hasDatalist() && (index.h("datalist", { id: this.datalistId }, this.datalistoptions.map(option => (index.h("option", { value: option, key: option }))))), this.displayCharacterLeft && this.maxlength > 0 && (index.h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength }))), index.h("slot", { key: 'e6e209266d3525fb2dcd3eecf1dc054d2d7750b4', name: "append-input" })));
+            } }), this.hasDatalist() && (index.h("datalist", { key: '387530d84dd29575c5e8985ad40211e490bb04e4', id: this.datalistId }, this.datalistoptions.map(option => (index.h("option", { value: option, key: option }))))), this.displayCharacterLeft && this.maxlength > 0 && (index.h("mg-character-left", { key: 'e0278d4295d5c923f21f617bbf37ee09bd907b54', identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength }))), index.h("slot", { key: '3d896e5ad21380c04c58fe925b8186e9f0a9207b', name: "append-input" })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -3587,7 +3587,7 @@ const MgInputTextarea = class {
          */
         this.handleFocus = () => {
             this.classCollection.add(this.classFocus);
-            this.classCollection = new index$1.Me(this.classCollection.classes);
+            this.classCollection = new index$1.Be(this.classCollection.classes);
         };
         /**
          * Handle blur event
@@ -3595,7 +3595,7 @@ const MgInputTextarea = class {
         this.handleBlur = () => {
             // Manage focus
             this.classCollection.delete(this.classFocus);
-            this.classCollection = new index$1.Me(this.classCollection.classes);
+            this.classCollection = new index$1.Be(this.classCollection.classes);
             // Display Error
             this.handlerInProgress = Handler.BLUR;
             this.displayError().finally(() => {
@@ -3658,7 +3658,7 @@ const MgInputTextarea = class {
         this.valid = undefined;
         this.invalid = undefined;
         this.resizable = 'none';
-        this.classCollection = new index$1.Me(['mg-c-input--textarea']);
+        this.classCollection = new index$1.Be(['mg-c-input--textarea']);
         this.errorMessage = undefined;
     }
     handleValue(newValue) {
@@ -3697,7 +3697,7 @@ const MgInputTextarea = class {
             this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);
     }
     validatePattern(newValue) {
-        if (newValue !== undefined && !(index$1.Be(this.pattern) && index$1.Be(this.patternErrorMessage))) {
+        if (newValue !== undefined && !(index$1.Pe(this.pattern) && index$1.Pe(this.patternErrorMessage))) {
             throw new Error('<mg-input-textarea> props "pattern" and "patternErrorMessage" must be non-empty string and paired.');
         }
     }
@@ -3729,7 +3729,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.Be(errorMessage)) {
+        else if (!index$1.Pe(errorMessage)) {
             throw new Error('<mg-input-textarea> method "setError()" param "errorMessage" must be a string');
         }
         else {
@@ -3780,7 +3780,7 @@ const MgInputTextarea = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("mg-input", { key: '4196a4eb5187ed2e644c23cf40ff24d6015d0f36', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [this.characterLeftId], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonlyValue: this.value, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, index.h("div", { key: '2e5a57ef5a936618685d65251d9445a5e25f8149', class: "mg-c-input__with-character-left" }, index.h("textarea", { key: 'a7deac1e7a713db46e285e73785eed01f2961639', class: {
+        return (index.h("mg-input", { key: 'c4386e9b6efe517276d3cd55d213819ff90d7e20', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [this.characterLeftId], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonlyValue: this.value, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, index.h("div", { key: '2d30db0ea21becffcdce57e46734e76877dc4858', class: "mg-c-input__with-character-left" }, index.h("textarea", { key: 'bc95d0db89014cafbb4e45893974e1ad09a41bf9', class: {
                 'mg-c-input__box': true,
                 'mg-c-input__box--width': true,
                 'mg-c-input__box--resizable': this.resizable === 'both',
@@ -3789,7 +3789,7 @@ const MgInputTextarea = class {
             }, value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, rows: this.rows, maxlength: this.maxlength, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
                 if (el !== null)
                     this.input = el;
-            } }), this.displayCharacterLeft && this.maxlength > 0 && (index.h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength })))));
+            } }), this.displayCharacterLeft && this.maxlength > 0 && (index.h("mg-character-left", { key: '522f8440ff28f9767c7273f56936cc994dfa17da', identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -3818,7 +3818,7 @@ const MgInputTitle = class {
         this.tagName = 'label';
     }
     validateIdentifier(newValue) {
-        if (!index$1.Be(newValue)) {
+        if (!index$1.Pe(newValue)) {
             throw new Error('<mg-input-title> prop "identifier" is required.');
         }
     }
@@ -3842,7 +3842,7 @@ const MgInputTitle = class {
     render() {
         const TagName = this.readonly ? 'span' : this.tagName;
         // \u00A0 represent a &nbsp;
-        return (index.h(TagName, { key: '3042d844802f32bc180f7fa2a94b6d6b72e3fc85', class: "mg-c-input-title", htmlFor: !this.isLegend && this.identifier, id: this.isLegend ? `${this.identifier}-title` : undefined }, index.h("slot", { key: 'b95a542c64ab1deddcae5d2cf5185a5748303926' }), this.required && !this.readonly && (index.h("span", { class: "mg-c-input-title__required" }, "\u00A0", index.h("span", { class: "mg-u-is-asterisk" }, "*")))));
+        return (index.h(TagName, { key: '217fcd80f25886c71c9ec8da6673e3ba5dbb78f7', class: "mg-c-input-title", htmlFor: !this.isLegend && this.identifier, id: this.isLegend ? `${this.identifier}-title` : undefined }, index.h("slot", { key: '0efdaadd578a4a557e96f76ebfe1182af2ffdfac' }), this.required && !this.readonly && (index.h("span", { key: 'ebb62ba6769b0e6c8807d67aa0d4bcb80db76ac7', class: "mg-c-input-title__required" }, "\u00A0", index.h("span", { key: '9945e1bff4ec58e1c705a25cef538b2dab806fab', class: "mg-u-is-asterisk" }, "*")))));
     }
     static get watchers() { return {
         "identifier": ["validateIdentifier"],
@@ -3932,7 +3932,7 @@ const MgInputToggle = class {
         this.tooltip = undefined;
         this.tooltipPosition = 'input';
         this.helpText = undefined;
-        this.classCollection = new index$1.Me(['mg-c-input--toggle']);
+        this.classCollection = new index$1.Be(['mg-c-input--toggle']);
         this.options = undefined;
         this.errorMessage = undefined;
         this.valid = undefined;
@@ -3949,7 +3949,7 @@ const MgInputToggle = class {
             throw new Error('<mg-input-toggle> prop "items" require 2 items.');
         }
         // String array
-        else if (index$1.Oe(newValue)) {
+        else if (index$1.Ue(newValue)) {
             this.options = newValue.map(item => ({ title: item, value: item }));
         }
         // Object array
@@ -4005,7 +4005,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.Be(errorMessage)) {
+        else if (!index$1.Pe(errorMessage)) {
             throw new Error('<mg-input-toggle> method "setError()" param "errorMessage" must be a string');
         }
         else {
@@ -4061,7 +4061,7 @@ const MgInputToggle = class {
      */
     render() {
         var _a;
-        return (index.h("mg-input", { key: '560cd6ef008109c6dd8cee23d51c019b10feb7ff', label: this.label, helpText: this.helpText, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, readonlyValue: (_a = this.getCheckedItem(this.checked)) === null || _a === void 0 ? void 0 : _a.title, tooltip: !this.readonly && this.tooltip, tooltipPosition: this.tooltipPosition, errorMessage: this.errorMessage }, index.h("button", { key: '05bdaac2362591a6f9e250fc8703701fc5c91d2d', type: "button", role: "switch", "aria-checked": this.checked.toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-c-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.toggleChecked }, index.h("span", { key: '395086e1a986767072db4e10b3afc5b4cc650bd8', "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, index.h("slot", { key: 'c39a37141d822e8ddfad1505039379b0b14d6490', name: "item-1" })), index.h("span", { key: 'fcc28290602815ace1d755e7ea1eede7d6fbcc10', "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, index.h("slot", { key: '7788fc760df5c002ca621c439902ff44fb7226db', name: "item-2" })))));
+        return (index.h("mg-input", { key: '8d4b88c7a14660ee3cfc69c3fce7f35f41b8a199', label: this.label, helpText: this.helpText, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, readonlyValue: (_a = this.getCheckedItem(this.checked)) === null || _a === void 0 ? void 0 : _a.title, tooltip: !this.readonly && this.tooltip, tooltipPosition: this.tooltipPosition, errorMessage: this.errorMessage }, index.h("button", { key: '9af8b4159d4159894b9c37867cd5581296c48295', type: "button", role: "switch", "aria-checked": this.checked.toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-c-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.toggleChecked }, index.h("span", { key: '7b11e8151dc231718c81c73f7d99980eec4bb1ed', "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, index.h("slot", { key: '7efaeced52095c79b2d61f9b3628ec2f605d747b', name: "item-1" })), index.h("span", { key: 'd2e3775fbae5c6c679125ac99c56dfde431ecdc2', "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, index.h("slot", { key: 'edbb817680e42f7012f5b8d69e1c47626d97a161', name: "item-2" })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -4251,7 +4251,7 @@ const MgItemMore = class {
                         navElement.click();
                 });
                 // add id suffix to prevent duplicate key. default html id is: '';
-                if (index$1.Be(proxy.id))
+                if (index$1.Pe(proxy.id))
                     proxy.id = `${proxy.id}-proxy`;
                 // update properties and DOM when proxyfied item is updated
                 proxified.addEventListener('item-updated', (event) => {
@@ -4281,7 +4281,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 +4330,10 @@ const MgItemMore = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h(index.Host, { key: 'c64a37d994cb6c3c388939b151588f2acf23e372', role: "listitem" }, this.parentMenu && (index.h("mg-menu-item", { "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", { icon: this.icon.icon, slot: "image" }), index.h("span", { class: { 'mg-u-visually-hidden': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), index.h("mg-menu", { 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 +4369,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 +4409,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 +4450,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 +4503,7 @@ const MgMenu = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h(index.Host, { key: 'cf7e1a8ea713af4019295c4147d3023223fc8a79', role: "list", "aria-label": this.label }, index.h("slot", { key: 'dcb316d5c13b3b01bfd0c7b891cbd3728a37fa11' })));
+        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 +4515,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 +4581,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.Be(element.textContent))
+                    if (!index$1.Pe(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 +4650,13 @@ const MgMenuItem = class {
          * @returns HTML Element
          */
         this.renderSlot = () => index.h("slot", null);
-        this.identifier = index$1.Re('mg-menu-item');
+        this.identifier = index$1.Ne('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.Me([this.navigationButton]);
+        this.navigationButtonClassList = new index$1.Be([this.navigationButton]);
         this.direction = undefined;
         this.isInMainMenu = undefined;
         this.isItemMore = undefined;
@@ -4800,7 +4803,7 @@ const MgMenuItem = class {
      * Emit event when component is updated
      */
     componentShouldUpdate() {
-        return index$1.Ue(() => {
+        return index$1.ze(() => {
             this.itemUpdated.emit();
         });
     }
@@ -4813,7 +4816,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: 'a340655f5b46ed3019e1be29cfade7dfbc480ec2', 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 +4910,13 @@ const MgMessage = class {
                     return 'exclamation-circle';
             }
         };
-        this.identifier = index$1.Re('mg-message');
+        this.identifier = index$1.Ne('mg-message');
         this.delay = undefined;
         this.variant = variants$1[0];
         this.closeButton = false;
         this.hide = false;
         this.noAriaRole = undefined;
-        this.classCollection = new index$1.Me(['mg-c-message']);
+        this.classCollection = new index$1.Be(['mg-c-message']);
         this.hasActions = false;
     }
     validateDelay(newValue) {
@@ -4991,7 +4995,7 @@ const MgMessage = class {
         let role;
         if (!this.noAriaRole)
             role = this.variant === 'info' ? 'status' : 'alert';
-        return (index.h("div", { key: '2a2a66325834f5072ee6e89de0bcc40c3e0e6753', id: this.identifier, class: this.classCollection.join(), role: role }, index.h("mg-card", { key: '573448d09a88125eecf6b0c482cc589602238fea', variant: this.variant, "variant-style": "bar-left" }, index.h("span", { key: '81295346d39fdfeda74b9cdab5c468cce52cbc43', class: "mg-c-message__icon" }, index.h("mg-icon", { key: 'b8d655f6cffd963d601b8001f6b066e9e6ca379f', icon: this.getIcon() })), index.h("div", { key: '831938b7c2be97edb8dd37d2f28af6798bb32896', class: "mg-c-message__content" }, index.h("span", { key: '2c2d085285ec3feca97fa046ae038c725d0f05db', class: "mg-c-message__content-slot" }, index.h("slot", { key: '1907d1d60816a5e2d53e6ae87e60f66df253208b' })), this.hasActions && index.h("span", { class: "mg-c-message__content-separator" }), this.hasActions && (index.h("span", { class: "mg-c-message__content-actions-slot" }, index.h("slot", { name: "actions" })))), this.closeButton && (index.h("span", { class: "mg-c-message__close-button" }, index.h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.message.closeButton, onClick: this.handleClose }, index.h("mg-icon", { icon: "cross" })))))));
+        return (index.h("div", { key: 'a30da97a75717852677dc66ba0e9bc0a000c8c35', id: this.identifier, class: this.classCollection.join(), role: role }, index.h("mg-card", { key: '9cea0e509146e245a91290e76bc3908fcf3e3806', variant: this.variant, "variant-style": "bar-left" }, index.h("span", { key: '0beb527b84230d6cafed7ac1d2c9caa59ad1f80f', class: "mg-c-message__icon" }, index.h("mg-icon", { key: 'e0346db73f7c2c4595bb09e1be93039763106a5d', icon: this.getIcon() })), index.h("div", { key: '128567f70f2d664688cf012ab995a57eea2bca17', class: "mg-c-message__content" }, index.h("span", { key: '2b1cc03309002908b6c54b95c6ad58bdc966e787', class: "mg-c-message__content-slot" }, index.h("slot", { key: 'fd7b3e74c3bd2a70d2cbbef0a9519cdee38da5ce' })), this.hasActions && index.h("span", { key: 'adb6d3b819226a5e6173f077650be05c64e69f13', class: "mg-c-message__content-separator" }), this.hasActions && (index.h("span", { key: '136b8a00d7b0dbb14750d7637bce7d83d8cfd112', class: "mg-c-message__content-actions-slot" }, index.h("slot", { key: '926939a26ee3fa4e3b4625cdc4003dccc9d2e2e3', name: "actions" })))), this.closeButton && (index.h("span", { key: '770a2313622d50f5dc027d65b878e2955a134ca3', class: "mg-c-message__close-button" }, index.h("mg-button", { key: '094652edc8aa518cb3c0322025b5bf5c66b3fa33', identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.message.closeButton, onClick: this.handleClose }, index.h("mg-icon", { key: '2b0ee538aec157e9507bf3c14026e71c422fc365', icon: "cross" })))))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -5055,12 +5059,12 @@ const MgModal = class {
          */
         this.setFocus = () => {
             // Get all focusable elements
-            const slottedFocusableElements = Array.from(this.element.querySelectorAll(index$1.De));
+            const slottedFocusableElements = Array.from(this.element.querySelectorAll(index$1.He));
             // 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.De) || focusableElement : focusableElement);
+                    acc.push(focusableElement.shadowRoot !== null ? focusableElement.shadowRoot.querySelector(index$1.He) || focusableElement : focusableElement);
                     return acc;
                 }, []);
                 // When close button is enabled it's the first focusable element.
@@ -5082,21 +5086,21 @@ const MgModal = class {
         this.handleClose = () => {
             this.hide = true;
         };
-        this.identifier = index$1.Re('mg-modal');
+        this.identifier = index$1.Ne('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.Me(['mg-c-modal']);
+        this.classCollection = new index$1.Be(['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.Be(newValue)) {
+        if (!index$1.Pe(newValue)) {
             throw new Error('<mg-modal> prop "modalTitle" is required.');
         }
     }
@@ -5164,14 +5168,14 @@ const MgModal = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("div", { key: 'a6d02e454214fe334e4fb9b7278b97b6713db306', role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), tabindex: "-1", "aria-labelledby": this.titleId, "aria-modal": "true", "aria-hidden": this.hide }, index.h("mg-card", { key: 'd192af0bfa6105f8ddb43ec73cfffb1d0469aca8' }, index.h("div", { key: '4f4f5b08ce39f20ca4f65686da294487d955ebd4', class: "mg-c-modal__dialog" }, index.h("header", { key: 'fd87c3a17a5b2783f4ffb79d23c6005cbf82af53', class: "mg-c-modal__header" }, this.closeButton && (index.h("span", { class: "mg-c-modal__close-button" }, index.h("mg-button", { identifier: `${this.identifier}-close-button`, "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose, ref: (el) => {
+        return (index.h("div", { key: '472cae1bd3a5291e14265d00ee594c726f179a1f', role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), tabindex: "-1", "aria-labelledby": this.titleId, "aria-modal": "true", "aria-hidden": this.hide }, index.h("mg-card", { key: '870e59e1126988fefe5c04380b5bbd593e8629af' }, index.h("div", { key: '9d49127cf8bf68b55549f379b760c6597b1a2d6c', class: "mg-c-modal__dialog" }, index.h("header", { key: 'b8629ece3524f5dd64b248080fa06f21980ddf7b', class: "mg-c-modal__header" }, this.closeButton && (index.h("span", { key: 'f38d648290d1db901fb2cc09ae8b8ed13bf7e0b6', class: "mg-c-modal__close-button" }, index.h("mg-button", { key: 'b12aecfd77b5fb7588c3b2f6487c10c2cba9f097', identifier: `${this.identifier}-close-button`, "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose, ref: (el) => {
                 if (el !== null) {
                     // store closeButton Element
                     this.closeButtonElement = el;
                     // add close button element to modalFocusableElements when it is render
                     this.modalFocusableElements.unshift(this.closeButtonElement);
                 }
-            } }, index.h("mg-icon", { icon: "cross" })))), index.h("h1", { key: '363962112d7d1db2f13cf91a7964588c4c2be71f', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), this.hasContent && (index.h("article", { class: "mg-c-modal__content" }, index.h("slot", { name: "content" }))), this.hasActions && (index.h("footer", { class: "mg-c-modal__footer" }, index.h("slot", { name: "actions" })))))));
+            } }, index.h("mg-icon", { key: '2e5590b14d6b4da659f4f6d8630606a9bafdb9c6', icon: "cross" })))), index.h("h1", { key: '6ca12328af9955d0716c330c32004c68cca11b4c', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), this.hasContent && (index.h("article", { key: '0873f01de1bfe75c2e91ea89b762d433006e7878', class: "mg-c-modal__content" }, index.h("slot", { key: 'dd8fd2e6527d640c40261dcbae76846d107337dc', name: "content" }))), this.hasActions && (index.h("footer", { key: 'e97c6d3ad9bbca892afcabeb5b15e63425d05070', class: "mg-c-modal__footer" }, index.h("slot", { key: 'c865f0b4244f5ea4ed5e7733813a8b10bc985504', name: "actions" })))))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -5243,7 +5247,7 @@ const MgPagination = class {
         this.handleGoToPage = (action, disabled) => {
             !disabled && this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);
         };
-        this.identifier = index$1.Re('mg-pagination');
+        this.identifier = index$1.Ne('mg-pagination');
         this.label = undefined;
         this.hideNavigationLabels = undefined;
         this.hidePageCount = undefined;
@@ -5286,10 +5290,10 @@ const MgPagination = class {
      * @returns HTML Element
      */
     render() {
-        const navigationActionButton = (disabled, action) => (index.h("mg-button", { key: '762b566216021bdfdcbfea249c7a1dbfa409c831', identifier: `${this.identifier}-button-${action}`, label: this.messages.pagination[`${action}Page`],
+        const navigationActionButton = (disabled, action) => (index.h("mg-button", { key: 'b708c70615e0fb49d1628dc6cf83e54ea5ab0a61', identifier: `${this.identifier}-button-${action}`, label: this.messages.pagination[`${action}Page`],
             // eslint-disable-next-line react/jsx-no-bind
-            onClick: () => this.handleGoToPage(action, disabled), disabled: disabled, variant: "flat", isIcon: this.hideNavigationLabels }, action === NavigationAction.PREVIOUS && index.h("mg-icon", { icon: "chevron-left" }), !this.hideNavigationLabels && this.messages.general[action], action === NavigationAction.NEXT && index.h("mg-icon", { icon: "chevron-right" })));
-        return (index.h(index.Host, { key: '9bfc7cd582798b28f847f1be74bc966a10afaf01', hidden: this.totalPages < 2 }, index.h("nav", { key: 'e79017c814781d4452868bb2f50a71682c4da1f1', role: "navigation", "aria-label": this.label, id: this.identifier, class: { 'mg-c-pagination': true, 'mg-c-pagination--hide-page-count': this.hidePageCount } }, navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS), !this.hidePageCount && (index.h("mg-input-select", { identifier: `${this.identifier}-select`, items: range(1, this.totalPages).map(page => page.toString()), label: this.messages.pagination.selectPage, "label-hide": true, "on-value-change": this.handleSelect, value: this.currentPage.toString(), "placeholder-hide": true })), index.h("span", { key: '5e9cdd8126ee7d00db9199d5b738d76f651c8585', class: "mg-u-visually-hidden" }, this.messages.pagination.page, " ", this.currentPage), index.h("span", { key: '55d248aabdc782a0e3a06b28fd2df36aca4733b0', class: { 'mg-u-visually-hidden': this.hidePageCount } }, "/ ", this.totalPages, " ", this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page), navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT))));
+            onClick: () => this.handleGoToPage(action, disabled), disabled: disabled, variant: "flat", isIcon: this.hideNavigationLabels }, action === NavigationAction.PREVIOUS && index.h("mg-icon", { key: '1c8375c68fd7729fb7ea91220ffb4f7267ac3a47', icon: "chevron-left" }), !this.hideNavigationLabels && this.messages.general[action], action === NavigationAction.NEXT && index.h("mg-icon", { key: '1af0c20c2d5ce86e593b2eca82dee410a782c193', icon: "chevron-right" })));
+        return (index.h(index.Host, { key: '4490a0b9d3c0ac55519d052b4d76ab8f682f0f3a', hidden: this.totalPages < 2 }, index.h("nav", { key: 'eaf362cd327e88290f3af5dcfd1d46fff6178ff9', role: "navigation", "aria-label": this.label, id: this.identifier, class: { 'mg-c-pagination': true, 'mg-c-pagination--hide-page-count': this.hidePageCount } }, navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS), !this.hidePageCount && (index.h("mg-input-select", { key: '06c9786c833302a4ee88ed7f2217875112ee7a20', identifier: `${this.identifier}-select`, items: range(1, this.totalPages).map(page => page.toString()), label: this.messages.pagination.selectPage, "label-hide": true, "on-value-change": this.handleSelect, value: this.currentPage.toString(), "placeholder-hide": true })), index.h("span", { key: '7877dbee55a509b13c8cf881154d96bbe1c5cee7', class: "mg-u-visually-hidden" }, this.messages.pagination.page, " ", this.currentPage), index.h("span", { key: 'd4615625b40108526f7aaa8f8a8505b2a61e43e9', class: { 'mg-u-visually-hidden': this.hidePageCount } }, "/ ", this.totalPages, " ", this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page), navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -5408,7 +5412,7 @@ const MgPanel = class {
             ];
             return this.titlePosition === 'right' ? children.reverse() : children;
         };
-        this.identifier = index$1.Re('mg-panel');
+        this.identifier = index$1.Ne('mg-panel');
         this.panelTitle = undefined;
         this.titlePattern = undefined;
         this.titlePatternErrorMessage = undefined;
@@ -5417,12 +5421,12 @@ const MgPanel = class {
         this.expanded = false;
         this.expandToggleDisplay = expandToggleDisplays[0];
         this.expandToggleDisabled = undefined;
-        this.classCollection = new index$1.Me(['mg-c-panel']);
+        this.classCollection = new index$1.Be(['mg-c-panel']);
         this.isEditing = false;
         this.updatedPanelTitle = undefined;
     }
     validatePanelTitle(newValue) {
-        if (!index$1.Be(newValue))
+        if (!index$1.Pe(newValue))
             throw new Error('<mg-panel> prop "panelTitle" is required.');
         this.titleChange.emit(newValue);
     }
@@ -5473,7 +5477,7 @@ const MgPanel = class {
      */
     render() {
         const headerId = `${this.identifier}-header`;
-        return (index.h("section", { key: '75509a6a7fdba04cea71380d46f5d0b66bbc9602', class: this.classCollection.join(), id: this.identifier }, index.h("mg-card", { key: '8ec07f87babeae31db85b5181d5884119010e8ce' }, index.h("header", { key: '045e43ab54c95691e1c4b758504bffc995f63340', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), index.h("article", { key: '096d93e147c30c6ece4a6a3f5ee3acff05dc5143', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, index.h("slot", { key: '37f2d61903662b519e583eca0ca90c044386e539' })))));
+        return (index.h("section", { key: 'd01136210425cb7790aab87d6c137ba74fc02af5', class: this.classCollection.join(), id: this.identifier }, index.h("mg-card", { key: '84084da775de623fd20c069de5e49d2542755907' }, index.h("header", { key: '9f3ef1d0d7b2dc275d0c7b39175e0f775cbb1e1b', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), index.h("article", { key: '4b6cd2b1b604515d657368642fe21b21eb33b55b', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, index.h("slot", { key: '45db8591e0b85ed5e9704dc1a42fa75d24e96e39' })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -7373,7 +7377,7 @@ const MgPopover = class {
                 mgPopoverContent.setAttribute('id', this.identifier);
             }
         };
-        this.identifier = index$1.Re('mg-popover');
+        this.identifier = index$1.Ne('mg-popover');
         this.placement = 'bottom';
         this.arrowHide = false;
         this.closeButton = false;
@@ -7416,7 +7420,7 @@ const MgPopover = class {
      */
     componentWillLoad() {
         // Get windows to attach events
-        this.windows = index$1._e(window);
+        this.windows = index$1.we(window);
         // render mg-popover-content slot
         this.renderPopoverContent();
         this.validateCloseButton(this.closeButton);
@@ -7434,6 +7438,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 +7456,7 @@ const MgPopover = class {
                 {
                     name: 'flip',
                     options: {
-                        fallbackPlacements: ['auto'],
+                        fallbackPlacements: [...fallbackPlacements, 'auto'],
                     },
                 },
             ],
@@ -7478,7 +7486,7 @@ const MgPopover = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h(index.Host, { key: '2faad932884b3c0a13e42f960470096ad7c2a4e9' }, index.h("slot", { key: '270b328576a6772d54d4cff826f2b7c63a9a6cda' }), index.h("slot", { key: '9fc11feb085c19562bdef1966135edee44799e21', 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 +7512,7 @@ const MgPopoverContent = class {
             this.hideContent.emit();
         };
         this.closeButton = false;
-        this.classCollection = new index$1.Me(['mg-c-popover-content']);
+        this.classCollection = new index$1.Be(['mg-c-popover-content']);
     }
     /*************
      * Lifecycle *
@@ -7522,7 +7530,7 @@ const MgPopoverContent = class {
     componentDidLoad() {
         const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
         const slottedTitleElement = this.element.querySelector('[slot="title"]');
-        if (slottedTitleElement && !index$1.Fe(slottedTitleElement, headingTags)) {
+        if (slottedTitleElement && !index$1.Ce(slottedTitleElement, headingTags)) {
             throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}`);
         }
     }
@@ -7531,7 +7539,7 @@ const MgPopoverContent = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h(index.Host, { key: 'e2ec01fc83727038047673eb89fa7a1fc6b90abe' }, index.h("mg-card", { key: '2ba199e78605edc19a6a0ddefb5a6749d80f6119', class: this.classCollection.join() }, this.closeButton && (index.h("mg-button", { "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, index.h("mg-icon", { icon: "cross" }))), index.h("div", { key: '1b6275e0da818d3f5606a9a49974f85b2aedda8a', class: "mg-c-popover-content__title" }, index.h("slot", { key: '6205bd6ccfba59e5526388b2f24251f5ff6cb6dc', name: "title" })), index.h("slot", { key: 'f1bc97234ef01af903e1c507bc79805ad252f02e', name: "content" })), index.h("slot", { key: '5f1a1a4fd2b0e86384b2b3d46da2d408fcec2e4e', name: "arrow" })));
+        return (index.h(index.Host, { key: 'ffe73fca1c2d8ffa0f5ac2359b50a453b37df7be' }, index.h("mg-card", { key: 'f6e04d90892104abf496cf3ca3a601cb747346c9', class: this.classCollection.join() }, this.closeButton && (index.h("mg-button", { key: '53b6f7360b07321c0433fb2f44f1b1dd9016f204', "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, index.h("mg-icon", { key: 'aa638786bca9af815d36e1de905559d60e68e44c', icon: "cross" }))), index.h("div", { key: '0b9f1319e409a0b1d75d16236806fd024c8b804e', class: "mg-c-popover-content__title" }, index.h("slot", { key: '7f52704d2ed49ea048ffd06b763a238d288ccaf3', name: "title" })), index.h("slot", { key: '7a2fd6b013e592acb616793439b2f4e8458ec372', name: "content" })), index.h("slot", { key: 'ceb0a6453ece1b861fe5ab3d63e803b1f41cb148', name: "arrow" })));
     }
     get element() { return index.getElement(this); }
 };
@@ -7558,7 +7566,7 @@ const MgSkipLinks = class {
         this.links = undefined;
     }
     validateLinks(links) {
-        if (links === undefined || links.length === 0 || links.some(link => !index$1.Be(link.href) || !link.href.startsWith('#') || !index$1.Be(link.label))) {
+        if (links === undefined || links.length === 0 || links.some(link => !index$1.Pe(link.href) || !link.href.startsWith('#') || !index$1.Pe(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.`);
         }
     }
@@ -7577,7 +7585,7 @@ const MgSkipLinks = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("nav", { key: 'c66cf3fb09a459865bb10f21a7f1b7c1c04eec87', class: "mg-c-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, index.h("ul", { key: 'a8855a047dc8352df52ac16ca9c9a4b7ccf100c0', class: "mg-c-skip-links__list", role: "list" }, this.links.map(link => (index.h("li", { key: link.href }, index.h("a", { class: "mg-c-skip-links__link", href: link.href, onClick: this.handleLinkCLick }, link.label)))))));
+        return (index.h("nav", { key: '2dac1b6dab0eb2634b803240325822ea3c8bae63', class: "mg-c-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, index.h("ul", { key: 'e050de2426d080ede6a2b983ec0f9452b0e0f43b', class: "mg-c-skip-links__list", role: "list" }, this.links.map(link => (index.h("li", { key: link.href }, index.h("a", { class: "mg-c-skip-links__link", href: link.href, onClick: this.handleLinkCLick }, link.label)))))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -7710,7 +7718,7 @@ const MgTabs = class {
          */
         this.resetFocus = () => {
             // update asynchronously tabindex to prevent get focus on new tabindex at then end of event process
-            index$1.Ue(() => {
+            index$1.ze(() => {
                 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 +7733,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.Re('mg-tabs');
+        this.identifier = index$1.Ne('mg-tabs');
         this.label = undefined;
         this.size = 'regular';
         this.items = undefined;
         this.activeTab = undefined;
         this.tabs = [];
-        this.classCollection = new index$1.Me(['mg-c-tabs']);
+        this.classCollection = new index$1.Be(['mg-c-tabs']);
     }
     validateLabel(newValue) {
-        if (!index$1.Be(newValue)) {
+        if (!index$1.Pe(newValue)) {
             throw new Error('<mg-tabs> prop "label" is required.');
         }
     }
@@ -7746,7 +7754,7 @@ const MgTabs = class {
     }
     validateItems(newValue) {
         // String array
-        if (index$1.Oe(newValue))
+        if (index$1.Ue(newValue))
             this.tabs = newValue.map(item => ({ label: item, status: Status.VISIBLE }));
         // Object array
         else if (Array.isArray(newValue) && newValue.length > 0 && newValue.every(isTabItem))
@@ -7808,7 +7816,7 @@ const MgTabs = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("div", { key: '6aa138347fc29ccb2ebadc034a50ad6daa61fcee', class: this.classCollection.join() }, index.h("header", { key: 'c5a350bd2e66f3fad27eec61d51dcd7aebd8e5c2', role: "tablist", "aria-label": this.label, class: "mg-c-tabs__header" }, this.tabs.map((tab, index$1) => (index.h("button", { key: tab.label, role: "tab", id: this.getElementId(this.identifier, index$1), class: {
+        return (index.h("div", { key: '9327c6fb0d13d41d82b50e2f4f79696916ef142f', class: this.classCollection.join() }, index.h("header", { key: 'b783c343af1e817a2ab231d803e8ecf32df52566', role: "tablist", "aria-label": this.label, class: "mg-c-tabs__header" }, this.tabs.map((tab, index$1) => (index.h("button", { key: tab.label, role: "tab", id: this.getElementId(this.identifier, index$1), class: {
                 [`${this.buttonTabBaseClass}`]: true,
                 [`${this.buttonTabBaseClass}--horizontal`]: true,
                 [`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasStatus(tab, Status.ACTIVE),
@@ -7846,7 +7854,7 @@ const MgTag = class {
         this.variant = variants[0];
         this.outline = undefined;
         this.soft = undefined;
-        this.classCollection = new index$1.Me(['mg-c-tag']);
+        this.classCollection = new index$1.Be(['mg-c-tag']);
     }
     validateVariant(newValue, oldValue) {
         if (!variants.includes(newValue)) {
@@ -7883,7 +7891,7 @@ const MgTag = class {
      * @param textContent - html element textContent property
      */
     validateTextContent(textContent) {
-        if (!index$1.Be(textContent))
+        if (!index$1.Pe(textContent))
             throw new Error('<mg-tag> slot must contain a text content.');
     }
     /*************
@@ -7903,7 +7911,7 @@ const MgTag = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("span", { key: 'f107390f5fb47c34faac9de08a08739499d0e409', class: this.classCollection.join() }, index.h("slot", { key: '04b346f71dff32aa32f52b96553154434ba231eb' })));
+        return (index.h("span", { key: '0746ab46695d72da229ea6b899c5ec9d4d09b0f0', class: this.classCollection.join() }, index.h("slot", { key: 'c1b246aaf9b5b199726c856b7e6a67be54e55b7c' })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -7943,7 +7951,7 @@ const MgTooltip = class {
             // Enable the event listeners
             this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
             // hide when click outside on nextTick to prevent event to trigger after creation
-            index$1.Ue(() => {
+            index$1.ze(() => {
                 this.windows.forEach((localWindow) => {
                     localWindow.addEventListener('click', this.clickOutside, false);
                     localWindow.addEventListener('keydown', this.pressEscape, false);
@@ -8114,7 +8122,7 @@ const MgTooltip = class {
                 });
             });
         };
-        this.identifier = index$1.Re('mg-tooltip');
+        this.identifier = index$1.Ne('mg-tooltip');
         this.message = undefined;
         this.placement = 'bottom';
         this.display = false;
@@ -8125,7 +8133,7 @@ const MgTooltip = class {
         this.renderTooltipContent();
     }
     validateMessage(newValue) {
-        if (!index$1.Be(newValue)) {
+        if (!index$1.Pe(newValue)) {
             throw new Error('<mg-tooltip> prop "message" is required.');
         }
         this.mgTooltipContent.message = newValue;
@@ -8174,7 +8182,7 @@ const MgTooltip = class {
      */
     componentWillLoad() {
         // Get windows to attach events
-        this.windows = index$1._e(window);
+        this.windows = index$1.we(window);
         // Get tooltip element
         this.renderTooltipContent();
         this.mgTooltipContent = this.element.querySelector(`#${this.identifier}`);
@@ -8193,7 +8201,7 @@ 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.De) ? slotElement : (_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(index$1.De);
+        const interactiveElement = slotElement.matches(index$1.He) ? slotElement : (_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(index$1.He);
         // define selected element to become tooltip selector
         this.tooltipedElement = interactiveElement || slotElement;
         // Check if slotted element is a disabled mg-button
@@ -8225,7 +8233,7 @@ const MgTooltip = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h(index.Host, { key: '1e78ccb946f44e44298b967286535bd5cb74f00d' }, index.h("slot", { key: 'cbc51e25225889f1b151499e98ab903a7daed059' }), index.h("slot", { key: '3e45bf6b40fc00b245f36d1cead2cb2659786ef9', name: "content" })));
+        return (index.h(index.Host, { key: 'bc92b38b5934945abf8657aeb56804c81274a11e' }, index.h("slot", { key: '5fca70b68f35c72c92252106d4b26766e2f671bb' }), index.h("slot", { key: '4426a5f6f55f549791ff22cc7220d728d2cca04f', name: "content" })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -8253,7 +8261,7 @@ const MgTooltipContent = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h(index.Host, { key: '81cff61f9230149078ace113a6661ae15ab6482e', role: "tooltip" }, index.h("span", { key: '11c2076354834ff3e51055197422726933154540', innerHTML: this.message, class: "mg-tooltip-content__message" }), index.h("slot", { key: 'ce2da739d5ac72a4ae3927a0b528a760f3f6422e', name: "arrow" })));
+        return (index.h(index.Host, { key: '749056e11074a73ef0bbe1aab102c334f0de8fed', role: "tooltip" }, index.h("span", { key: 'e7db4c4ab009e7ebd9908c86d151216919c59e9a', innerHTML: this.message, class: "mg-tooltip-content__message" }), index.h("slot", { key: 'f260fbe909763b8e221acd4178df0880f650a3a5', name: "arrow" })));
     }
 };
 MgTooltipContent.style = MgTooltipContentStyle0;