@mgdis/mg-components 5.27.0 → 5.27.2

package/dist/cjs/{mg-action-more_35.cjs.entry.js → mg-action-more_36.cjs.entry.js}

@@ -2,9 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-7072369e.js');
-const index$1 = require('./index-1d560837.js');
-const mgMenu_conf = require('./mg-menu.conf-c291eee6.js');
+const index = require('./index-7e27c7ae.js');
+const index$1 = require('./index-00072168.js');
 
 /**
  * Available menu-item positions
@@ -29,6 +28,19 @@ var Status$1;
  */
 const targets = ['_blank', '_self', '_parent', '_top'];
 
+/**
+ * Menu direction type
+ */
+var Direction;
+(function (Direction) {
+    Direction["VERTICAL"] = "vertical";
+    Direction["HORIZONTAL"] = "horizontal";
+})(Direction || (Direction = {}));
+/**
+ * List of all possibles sizes
+ */
+const sizes$2 = ['regular', 'medium', 'large'];
+
 const mgActionMoreCss = ".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}}:host{--mg-popover-padding-vertical:1rem;--mg-popover-padding-horizontal:0;--mg-popover-max-width:unset}.mg-c-action-more__chevron{transition:200ms}.mg-c-action-more__chevron--rotate.mg-c-action-more__chevron{transform:rotate(180deg)}";
 const MgActionMoreStyle0 = mgActionMoreCss;
 
@@ -67,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.Me(this.name);
         /************
          * Methods *
          ***********/
@@ -149,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: mgMenu_conf.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
@@ -191,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.Oe(['mg-c-badge']);
     }
     validateValue(newValue) {
         if (/^(\d+\+*|[?*!a-z])$/i.exec(`${newValue}`) === null) {
@@ -199,7 +211,7 @@ const MgBadge = class {
         }
     }
     validateLabel(newValue) {
-        if (!index$1.Be(newValue)) {
+        if (!index$1.Ne(newValue)) {
             throw new Error('<mg-badge> prop "label" is required.');
         }
     }
@@ -310,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.Oe(['mg-c-button']);
     }
     validateVariant(newValue, oldValue) {
         if (!variants$4.includes(newValue)) {
@@ -369,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.Ne(this.label)) {
                 throw new Error(`<mg-button> prop "label" is mandatory when prop "isIcon" is set to true.`);
             }
         }
@@ -381,7 +393,7 @@ const MgButton = class {
      * Add listners
      */
     componentDidLoad() {
-        index$1.Ue(() => {
+        index$1.Ce(() => {
             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;
@@ -398,7 +410,7 @@ const MgButton = class {
      */
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'f00c1fada18aee3205f5747113e1e4004b1ecf75', 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: '4010a7cb779fb4a9154b8d83af7aec1b093af129', class: this.classCollection.join(), id: this.identifier }, this.loading && index.h("mg-icon", { icon: "loader", spin: true }), index.h("div", { key: '4571c578e953d983f925954d5d6a05dfa5097876', class: "mg-c-button__content" }, index.h("slot", { key: '6d08cc980db4375577569753562ec088378bfdfb' })))));
+        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 {
@@ -440,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.Oe([this.classBase]);
     }
     validateVariant(newValue, oldValue) {
         if (newValue && !variants$3.includes(newValue))
@@ -478,7 +490,7 @@ const MgCard = class {
      */
     render() {
         var _a;
-        return (index.h("div", { key: 'fe38aa48dae7528a45e66c68fef10444f1cf8b54', 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: 'ca9d1a1e15b851381f9f857eac392dea33c0bf89' })));
+        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"],
@@ -517,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 {
@@ -545,7 +557,7 @@ const MgDetails = class {
         this.expanded = false;
     }
     validateTitles(newValue) {
-        if (!index$1.Be(newValue)) {
+        if (!index$1.Ne(newValue)) {
             throw new Error('<mg-details> prop "toggleClosed" and "toggleOpened" must be defined.');
         }
     }
@@ -567,7 +579,7 @@ const MgDetails = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("details", { key: '8427ea64231dcd5986af4c28f2923695289a2677', class: "mg-c-details", onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, index.h("summary", { key: '9618d302733fbbaf57e10415dabe60d3f418bcf1' }, index.h("slot", { key: '73117b9cb92a313ad8229608a4d974b8df9237b9', name: "summary" }), index.h("span", { key: '6b527905309929e8433aa7ee3ea15761c4924d4e', class: "mg-c-details__toggle" }, index.h("mg-icon", { key: '67bea97bb282ab5e7531aced3a5b1fc8941de30c', icon: "chevron-up", size: "small", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), index.h("span", { key: 'ebbef038c63b1458b6d02c2c64a1a24dcdcf48ca', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), index.h("div", { key: 'be34e7a1e1f08a284a49a438858282dadaedf9a9', class: "mg-c-details__details" }, index.h("slot", { key: '417269d8d1d5f15754c3ba1ca6daf81aa8b4d013', 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"],
@@ -590,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',
             } }));
@@ -703,7 +715,7 @@ const MgForm = class {
                 }
             });
         };
-        this.identifier = index$1.Re('mg-form');
+        this.identifier = index$1.Me('mg-form');
         this.name = this.identifier;
         this.readonly = false;
         this.requiredMessage = undefined;
@@ -712,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.Oe(['mg-c-form']);
         this.requiredMessageText = undefined;
     }
     validateRequiredMessage(newValue) {
@@ -794,7 +806,7 @@ const MgForm = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("form", { key: '1e102f0f152829ae6754da1e4431b8d9db0a3d9a', 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: '624d29818d782e0228a406c63ba6554475a8f08a' }), !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 {
@@ -853,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.Oe(['mg-c-icon']);
     }
     validateIcon(newValue, oldValue) {
         if (!Object.keys(icons).includes(newValue))
@@ -952,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.De(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) {
@@ -965,13 +977,13 @@ const MgIllustratedMessage = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("div", { key: '7b4e52979bc173b70ccab6a61acffb4e0ed8f01f', 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: '86d098229b950c5191ed3335dde757c169749900', 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: '19b4a9161013c8d8569f731755b4aa716c13c9eb', name: "illustration" })), index.h("div", { key: '23e8e83466613a4e3becf251f39e82e344c5bff8', class: "mg-c-illustrated-message__slots" }, index.h("div", { key: 'be5407092e1135567a2ce4779a4b1a2c77a532a0', class: "mg-c-illustrated-message__title" }, index.h("slot", { key: '1231d2a4fbcb30ad4c6d3b737f41db24300af182', name: "title" })), index.h("div", { key: '25b0d0b5aa3a03bfb2dd2fae2129641b6a43c595', class: "mg-c-illustrated-message__details" }, index.h("slot", { key: 'ef5ef7b66350be1256d36996e70e26a6132c6682', 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); }
 };
@@ -1052,7 +1064,7 @@ const MgInput = class {
         this.isVerticalList = false;
     }
     watchIdentifier(newValue) {
-        if (!index$1.Be(newValue)) {
+        if (!index$1.Ne(newValue)) {
             throw new Error('<mg-input> prop "identifier" is required.');
         }
         else {
@@ -1137,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.Ne(this.label)) {
             throw new Error('<mg-input> prop "label" is required.');
         }
         else {
@@ -1231,7 +1243,7 @@ const MgInput = class {
     render() {
         const readonlyValue = this.getReadonlyValues();
         const isGroup = this.isFieldset && !this.isReadonly;
-        return (index.h(index.Host, { key: 'de3590a7b4e4f3b8b9e63af5b9b5562dd5da69fc', class: this.element.classList.toString(), role: isGroup ? 'group' : undefined, "aria-labelledby": isGroup ? `${this.identifier}-title` : undefined }, index.h("div", { key: 'b530d05b3456a7a68a36c931591958742a44c8c9', class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide } }, index.h("slot", { key: '0fddf2c64ecc28626be04c920663efee9d67cf0a', name: this.slotLabel }), this.tooltip && !this.isReadonly && (this.tooltipPosition === 'label' || this.labelOnTop) && !this.labelHide && this.renderTooltip()), index.h("div", { key: 'afa1657e3ecb323076c59063901e7dda505e0096', 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" }),
@@ -1433,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.Ue(item.title).includes(index$1.Ue(this.searchValue)));
         };
         /**
          * Method to validate if one of inputs value is checked id required
@@ -1507,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.Oe([this.baseClassName, classFieldset]);
         this.errorMessage = undefined;
         this.checkboxItems = [];
         this.displaySearchInput = undefined;
@@ -1615,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.Ne(errorMessage)) {
             throw new Error('<mg-input-checkbox> method "setError()" param "errorMessage" must be a string');
         }
         else {
@@ -1728,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 {
@@ -1843,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"],
@@ -1860,6 +1872,7 @@ var InputError$1;
     InputError["MAX"] = "max";
     InputError["MINMAX"] = "minMax";
     InputError["REQUIRED"] = "required";
+    InputError["PATTERN"] = "badInput";
 })(InputError$1 || (InputError$1 = {}));
 
 const mgInputDateCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-input__input-container{width:100%;flex:1 auto}.mg-c-input__box.mg-c-input__box--width{width:100%;min-width:5rem;max-width:calc(17.7rem + var(--mg-inputs-spacer)*2)}.mg-c-input.mg-c-input--width-2 .mg-c-input__box,.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left{max-width:5rem}.mg-c-input.mg-c-input--width-4 .mg-c-input__box,.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left{max-width:7rem}.mg-c-input.mg-c-input--width-16 .mg-c-input__box,.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left{max-width:21rem}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%;max-width:100%}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-2 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-2 .mg-c-input__with-character-left{max-width:5rem}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-4 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-4 .mg-c-input__with-character-left{max-width:7rem}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-16 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-16 .mg-c-input__with-character-left{max-width:21rem}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-full .mg-c-input__box{width:100%;max-width:100%}.mg-c-input.mg-c-input--label-on-top .mg-c-input__box{width:auto}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(*:not(mg-input-title)){width:100%;max-width:100%}.mg-c-input.mg-c-input--fieldset{padding:0;border:0;margin-right:0;margin-left:0}.mg-c-input.mg-c-input--fieldset input[type=radio],.mg-c-input.mg-c-input--fieldset input[type=checkbox]{width:var(--mg-input-check-size);height:var(--mg-input-check-size);flex-shrink:0;margin:calc((var(--font-size)*var(--line-height) - var(--mg-input-check-size))/2) .6rem 0 0}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group{display:flex;align-items:start}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group-container{display:flex;flex-wrap:wrap;padding:0;margin:0;margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);gap:1rem 2.3rem;list-style:none}.mg-c-input.mg-c-input--fieldset.mg-c-input--vertical-list .mg-c-input__input-group-container,.mg-c-input.mg-c-input--fieldset.mg-c-input--checkbox-multi .mg-c-input__input-group-container{flex-direction:column}.mg-c-input.mg-c-input--fieldset.mg-c-input--label-on-top .mg-c-input__input-group-container{margin-top:.7rem}:host(.mg-c-input.mg-c-input--fieldset:not(.mg-c-input--checkbox-multi)) .mg-c-input__input-container mg-tooltip{margin-left:3rem}:host(.mg-c-input.mg-c-input--checkbox) .mg-c-input__input,:host(.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset;align-items:flex-start}:host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>ul{display:flex;flex-flow:column wrap;padding:0;margin:0;list-style:none;row-gap:.8rem}.mg-c-input__input-container>strong{display:inline-block}.mg-c-input__input-container>strong,.mg-c-input__input-container>ul{min-height:var(--font-size);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-c-input__input{display:flex;min-height:var(--default-size);align-items:center;justify-content:start}.mg-c-input__input mg-tooltip{align-self:baseline;margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input ::slotted(.mg-c-input__button-toggle:disabled),.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--disabled .mg-c-input__input-container strong{opacity:var(--mg-disabled-opacity)}.mg-c-input__title{display:flex;width:var(--mg-inputs-title-width, auto);flex-shrink:0;align-items:baseline;justify-content:flex-end;margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-c-input__title slot[name=label]+mg-tooltip{margin-left:.4rem}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__error ::slotted(*),.mg-c-input__help-text ::slotted(*){font-size:1.2rem;text-align:start}.mg-c-input__help-text+.mg-c-input__error{margin-top:.2rem}:host(:not(.mg-c-input--textarea)) .mg-c-input__input+.mg-c-input__error,:host(:not(.mg-c-input--textarea)) .mg-c-input__input+.mg-c-input__help-text{margin-top:.5rem}.mg-c-input.mg-c-input--readonly>*:not([slot=label],[name=append-input]),.mg-c-input.mg-c-input--readonly ::slotted(mg-button[slot=append-input]){display:none}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}:host(.mg-c-input){display:flex}:host(.mg-c-input.mg-c-input--textarea.mg-c-input--readonly) .mg-c-input__input-container{white-space:pre-line}:host(.mg-c-input.mg-c-input--checkbox,.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset}:host(.mg-c-input.mg-c-input--label-on-top){flex-direction:column}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:.3rem;text-align:left}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}@media screen and (max-width: 767px){:host(.mg-c-input){flex-direction:column}:host(.mg-c-input) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:.3rem;text-align:left}:host(.mg-c-input) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}}.mg-c-input__box{height:var(--default-size);box-sizing:border-box;padding:calc((var(--default-size) - var(--font-size)*var(--line-height))/2) var(--mg-inputs-spacer);border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));color:hsl(var(--color-dark));font-family:inherit;font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 .6rem hsl(var(--mg-inputs-color-shadow-focus-hsl)/50%)}.mg-c-input__box:disabled{opacity:.3}.mg-c-input.mg-c-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:-0.1rem;border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right:var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right:var(--mg-inputs-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.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}}";
@@ -1872,6 +1885,12 @@ const MgInputDate = class {
         this.inputValid = index.createEvent(this, "input-valid", 7);
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
+        /**
+         * Method to validate date pattern string
+         * @param value - value to test
+         * @returns truthy when value match the pattern
+         */
+        this.isValidPattern = (value) => index$1.Ne(value) && index$1.ge.test(value);
         /**
          * Format help text to display
          * @param helpText - help text format
@@ -1879,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.Ne(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.pe(index$1.ze(new Date('2023-12-24')), this.systemLocale));
         };
         /**
          * Handle input event
@@ -1904,32 +1923,52 @@ const MgInputDate = class {
                 this.handlerInProgress = undefined;
             });
         };
+        /**
+         * Handle keydown event
+         * @param event - input keydown event
+         */
+        this.handleKeyDown = (event) => {
+            // bypass the native "Delete" action wich trigger an "input" event with "checkValidty() => false" with a falsy badInput = true,
+            // when we reset the field we need to test a blank value.
+            if (['Delete', 'Backspace'].includes(event.key)) {
+                event.preventDefault();
+                this.value = '';
+                this.checkValidity();
+                if (this.hasDisplayedError) {
+                    this.setErrorMessage();
+                }
+            }
+        };
         /**
          * Check if input is valid
          */
         this.checkValidity = () => {
-            this.setValidity(this.readonly || this.disabled || this.input.checkValidity());
+            this.setValidity(this.readonly || this.disabled || (this.input.checkValidity() && (!this.value || this.isValidPattern(this.value))));
         };
         /**
          * get input error code
          * @returns error code
          */
         this.getInputError = () => {
-            var _a, _b;
+            var _a;
             let inputError = null;
             // required
             if (this.input.validity.valueMissing) {
                 inputError = InputError$1.REQUIRED;
             }
+            // pattern
+            else if (this.value && !this.isValidPattern(this.value)) {
+                inputError = InputError$1.PATTERN;
+            }
             // min & max
-            else if ((this.input.validity.rangeUnderflow || this.input.validity.rangeOverflow) && ((_a = this.min) === null || _a === void 0 ? void 0 : _a.length) > 0 && ((_b = this.max) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+            else if ((this.input.validity.rangeUnderflow || this.input.validity.rangeOverflow) && ((_a = this.min) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.max !== '9999-12-31') {
                 inputError = InputError$1.MINMAX;
             }
             // min
             else if (this.input.validity.rangeUnderflow) {
                 inputError = InputError$1.MIN;
             }
-            //max
+            // max
             else if (this.input.validity.rangeOverflow) {
                 inputError = InputError$1.MAX;
             }
@@ -1954,8 +1993,8 @@ const MgInputDate = class {
                 // min, max & minMax
                 else if ([InputError$1.MIN, InputError$1.MAX, InputError$1.MINMAX].includes(inputError)) {
                     this.errorMessage = this.messages.errors.date[inputError]
-                        .replace('{min}', index$1.ge(this.min, this.systemLocale))
-                        .replace('{max}', index$1.ge(this.max, this.systemLocale));
+                        .replace('{min}', index$1.pe(this.min, this.systemLocale))
+                        .replace('{max}', index$1.pe(this.max, this.systemLocale));
                 }
                 // wrong date format
                 // element.validity.badInput is default error message
@@ -1969,7 +2008,7 @@ const MgInputDate = class {
          * @returns translated html pattern
          */
         this.renderPattern = () => {
-            let patternLocal = index$1.Pe(this.systemLocale);
+            let patternLocal = index$1.We(this.systemLocale);
             for (const key in this.messages.input.date.pattern) {
                 patternLocal = patternLocal.replace(key, this.messages.input.date.pattern[key]);
             }
@@ -1984,26 +2023,30 @@ const MgInputDate = class {
         this.required = false;
         this.readonly = false;
         this.min = undefined;
-        this.max = undefined;
+        this.max = '9999-12-31';
         this.disabled = false;
         this.tooltip = undefined;
         this.tooltipPosition = 'input';
         this.helpText = undefined;
         this.valid = undefined;
         this.invalid = undefined;
-        this.classCollection = new index$1.Me(['mg-c-input--date']);
+        this.classCollection = new index$1.Oe(['mg-c-input--date']);
         this.errorMessage = undefined;
     }
     validateValue(newValue) {
         // When the input is not fully completed or has been cleared, the value becomes an empty string.
         if (newValue === '')
             newValue = null;
-        if (newValue !== undefined && newValue !== null && (typeof newValue !== 'string' || !index$1.de.test(newValue))) {
-            throw new Error("<mg-input-date> props 'value' doesn't match pattern: yyyy-mm-dd");
+        // check value validity
+        if (newValue && !index$1.Ne(newValue)) {
+            throw new Error("<mg-input-date> props 'value' must be a valid string");
         }
-        else {
+        else if (!newValue || (newValue && this.isValidPattern(newValue))) {
             this.valueChange.emit(newValue);
         }
+        else {
+            console.error("<mg-input-date> props 'value' doesn't match pattern: yyyy-mm-dd");
+        }
     }
     watchReadonly(newValue) {
         if (newValue)
@@ -2012,7 +2055,7 @@ const MgInputDate = class {
             this.classCollection.delete(classReadonly);
     }
     validateMinMax(newValue) {
-        if ((newValue === null || newValue === void 0 ? void 0 : newValue.length) === 0 || ((newValue === null || newValue === void 0 ? void 0 : newValue.length) > 0 && !(typeof newValue === 'string' && index$1.de.test(newValue)))) {
+        if (newValue && !this.isValidPattern(newValue)) {
             throw new Error("<mg-input-date> props 'min/max' doesn't match pattern: yyyy-mm-dd");
         }
     }
@@ -2052,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.Ne(errorMessage)) {
             throw new Error('<mg-input-date> method "setError()" param "errorMessage" must be a string');
         }
         else {
@@ -2106,7 +2149,7 @@ const MgInputDate = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("mg-input", { key: 'b5eea353e13d76c1fe9569b3c237bf7e787774fe', 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: '6e75312c774aadde75dc6dbd197b7224d08fd7ba', 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, 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.pe(this.value, this.locale), tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, index.h("input", { key: '67bf6f0ad58ee1a506ffd0d3d41d5954db68465c', type: "date", class: "mg-c-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => {
                 if (el !== null)
                     this.input = el;
             } })));
@@ -2237,9 +2280,9 @@ const MgInputNumeric = class {
         this.formatValue = (value) => {
             switch (this.format) {
                 case 'number':
-                    return index$1.qe(value, this.locale);
+                    return index$1.we(value, this.locale, this.type === 'decimal' ? this.decimalLength : undefined);
                 case 'currency':
-                    return index$1.ze(value, this.locale, this.currency);
+                    return index$1.qe(value, this.locale, this.currency);
                 case 'none':
                     return value.toString();
             }
@@ -2276,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.Oe(['mg-c-input--numeric']);
         this.errorMessage = undefined;
         this.hasFocus = undefined;
     }
@@ -2372,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.Ne(errorMessage)) {
             throw new Error('<mg-input-numeric> method "setError()" param "errorMessage" must be a string');
         }
         else {
@@ -2467,10 +2510,10 @@ const MgInputNumeric = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("mg-input", { key: 'ad31254b8cd13d07b07a1fc40ddd515047ddbfed', 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: '9d094501fa4f4a07eb9b3d50bda55f1344099fb9', 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: 'c1970cbf9e7fce07abd63382d401f4e2834bc4d0', name: "append-input" })));
+            } }), index.h("slot", { key: '6b6ae5ae8aa3de2c1d0360c2ddef962a7b3e6bc0', name: "append-input" })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -2564,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.Oe(['mg-c-input--password']);
         this.errorMessage = undefined;
         this.displayPassword = false;
     }
@@ -2622,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.Ne(errorMessage)) {
             throw new Error('<mg-input-password> method "setError()" param "errorMessage" must be a string');
         }
         else {
@@ -2668,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: '95724fdf30124db514f45482f8832e384e26eeda', 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 }, index.h("mg-icon", { key: '0561963f435ae27b1118411d4654447cd43577a1', 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 {
@@ -2769,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.Oe(['mg-c-input--radio', classFieldset]);
         this.errorMessage = undefined;
         this.options = undefined;
     }
@@ -2782,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.Fe(newValue)) {
             this.options = newValue.map(item => ({ title: item, value: item, disabled: this.disabled }));
         }
         // Object array
@@ -2841,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.Ne(errorMessage)) {
             throw new Error('<mg-input-radio> method "setError()" param "errorMessage" must be a string');
         }
         else {
@@ -2890,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)))))));
@@ -2988,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.Fe(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)) {
@@ -3062,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.Oe(['mg-c-input--select']);
         this.errorMessage = undefined;
         this.options = undefined;
         this.valueExist = undefined;
@@ -3070,7 +3113,7 @@ const MgInputSelect = class {
     }
     validateValue(newValue) {
         var _a, _b;
-        if (index$1.Oe(this.items) && typeof newValue === 'string') {
+        if (index$1.Fe(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)) {
@@ -3087,7 +3130,7 @@ const MgInputSelect = class {
             this.options = [];
         }
         // String array
-        else if (index$1.Oe(newValue)) {
+        else if (index$1.Fe(newValue)) {
             if (typeof this.value === 'string')
                 this.valueExist = newValue.includes(this.value);
             this.options = newValue.map(item => ({ title: item, value: item }));
@@ -3159,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.Ne(errorMessage)) {
             throw new Error('<mg-input-select> method "setError()" param "errorMessage" must be a string');
         }
         else {
@@ -3212,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 {
@@ -3233,6 +3276,12 @@ MgInputSelect.style = MgInputSelectStyle0;
 const mgInputTextCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-input__input-container{width:100%;flex:1 auto}.mg-c-input__box.mg-c-input__box--width{width:100%;min-width:5rem;max-width:calc(17.7rem + var(--mg-inputs-spacer)*2)}.mg-c-input.mg-c-input--width-2 .mg-c-input__box,.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left{max-width:5rem}.mg-c-input.mg-c-input--width-4 .mg-c-input__box,.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left{max-width:7rem}.mg-c-input.mg-c-input--width-16 .mg-c-input__box,.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left{max-width:21rem}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%;max-width:100%}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-2 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-2 .mg-c-input__with-character-left{max-width:5rem}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-4 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-4 .mg-c-input__with-character-left{max-width:7rem}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-16 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-16 .mg-c-input__with-character-left{max-width:21rem}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-full .mg-c-input__box{width:100%;max-width:100%}.mg-c-input.mg-c-input--label-on-top .mg-c-input__box{width:auto}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(*:not(mg-input-title)){width:100%;max-width:100%}.mg-c-input.mg-c-input--fieldset{padding:0;border:0;margin-right:0;margin-left:0}.mg-c-input.mg-c-input--fieldset input[type=radio],.mg-c-input.mg-c-input--fieldset input[type=checkbox]{width:var(--mg-input-check-size);height:var(--mg-input-check-size);flex-shrink:0;margin:calc((var(--font-size)*var(--line-height) - var(--mg-input-check-size))/2) .6rem 0 0}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group{display:flex;align-items:start}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group-container{display:flex;flex-wrap:wrap;padding:0;margin:0;margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);gap:1rem 2.3rem;list-style:none}.mg-c-input.mg-c-input--fieldset.mg-c-input--vertical-list .mg-c-input__input-group-container,.mg-c-input.mg-c-input--fieldset.mg-c-input--checkbox-multi .mg-c-input__input-group-container{flex-direction:column}.mg-c-input.mg-c-input--fieldset.mg-c-input--label-on-top .mg-c-input__input-group-container{margin-top:.7rem}:host(.mg-c-input.mg-c-input--fieldset:not(.mg-c-input--checkbox-multi)) .mg-c-input__input-container mg-tooltip{margin-left:3rem}:host(.mg-c-input.mg-c-input--checkbox) .mg-c-input__input,:host(.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset;align-items:flex-start}:host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>ul{display:flex;flex-flow:column wrap;padding:0;margin:0;list-style:none;row-gap:.8rem}.mg-c-input__input-container>strong{display:inline-block}.mg-c-input__input-container>strong,.mg-c-input__input-container>ul{min-height:var(--font-size);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-c-input__input{display:flex;min-height:var(--default-size);align-items:center;justify-content:start}.mg-c-input__input mg-tooltip{align-self:baseline;margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input ::slotted(.mg-c-input__button-toggle:disabled),.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--disabled .mg-c-input__input-container strong{opacity:var(--mg-disabled-opacity)}.mg-c-input__title{display:flex;width:var(--mg-inputs-title-width, auto);flex-shrink:0;align-items:baseline;justify-content:flex-end;margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-c-input__title slot[name=label]+mg-tooltip{margin-left:.4rem}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__error ::slotted(*),.mg-c-input__help-text ::slotted(*){font-size:1.2rem;text-align:start}.mg-c-input__help-text+.mg-c-input__error{margin-top:.2rem}:host(:not(.mg-c-input--textarea)) .mg-c-input__input+.mg-c-input__error,:host(:not(.mg-c-input--textarea)) .mg-c-input__input+.mg-c-input__help-text{margin-top:.5rem}.mg-c-input.mg-c-input--readonly>*:not([slot=label],[name=append-input]),.mg-c-input.mg-c-input--readonly ::slotted(mg-button[slot=append-input]){display:none}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}:host(.mg-c-input){display:flex}:host(.mg-c-input.mg-c-input--textarea.mg-c-input--readonly) .mg-c-input__input-container{white-space:pre-line}:host(.mg-c-input.mg-c-input--checkbox,.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset}:host(.mg-c-input.mg-c-input--label-on-top){flex-direction:column}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:.3rem;text-align:left}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}@media screen and (max-width: 767px){:host(.mg-c-input){flex-direction:column}:host(.mg-c-input) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:.3rem;text-align:left}:host(.mg-c-input) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}}.mg-c-input__box{height:var(--default-size);box-sizing:border-box;padding:calc((var(--default-size) - var(--font-size)*var(--line-height))/2) var(--mg-inputs-spacer);border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));color:hsl(var(--color-dark));font-family:inherit;font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 .6rem hsl(var(--mg-inputs-color-shadow-focus-hsl)/50%)}.mg-c-input__box:disabled{opacity:.3}.mg-c-input.mg-c-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:-0.1rem;border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right:var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right:var(--mg-inputs-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input.mg-c-input--has-display-character-left mg-character-left{font-size:1.1rem;opacity:.6}.mg-c-input.mg-c-input--has-display-character-left .mg-c-input__input+.mg-c-input__help-text ::slotted(*),.mg-c-input.mg-c-input--has-display-character-left .mg-c-input__input+.mg-c-input__error ::slotted(*){margin-top:0}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-input__with-character-left{position:relative;width:100%}.mg-c-input.mg-u-is-focused .mg-c-input__with-character-left .mg-c-input__box{padding-right:calc(var(--mg-character-left-message-length)*1ch + .8rem)}.mg-c-input__with-character-left mg-character-left{position:absolute;top:50%;right:1rem;display:none;font-size:1.1rem;opacity:.6;transform:translateY(-50%)}.mg-c-input.mg-u-is-focused .mg-c-input__with-character-left mg-character-left{display:block}.mg-c-input.mg-c-input--has-icon .mg-c-input__with-character-left>mg-icon{position:absolute;top:50%;left:var(--mg-inputs-spacer);color:var(--mg-inputs-color);transform:translateY(-50%)}.mg-c-input.mg-c-input--has-icon .mg-c-input__with-character-left .mg-c-input__box{padding-left:calc(var(--mg-icon-regular-size) + var(--mg-inputs-spacer)*2)}";
 const MgInputTextStyle0 = mgInputTextCss;
 
+/**
+ * Check if datalist options are well structured.
+ *
+ * @param options - Datalist options to check.
+ * @returns True if datalist is well structured.
+ */
 const isDatalistOption = (options) => Array.isArray(options) && options.every(option => typeof option === 'string');
 const MgInputText = class {
     constructor(hostRef) {
@@ -3265,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.Oe(this.classCollection.classes);
         };
         /**
          * Handle blur event
@@ -3273,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.Oe(this.classCollection.classes);
             // Display Error
             this.handlerInProgress = Handler.BLUR;
             this.displayError().finally(() => {
@@ -3348,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.Oe(['mg-c-input--text']);
         this.errorMessage = undefined;
     }
     handleValue(newValue) {
@@ -3399,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.Ne(this.pattern) && index$1.Ne(this.patternErrorMessage))) {
             throw new Error('<mg-input-text> props "pattern" and "patternErrorMessage" must be non-empty string and paired.');
         }
     }
@@ -3429,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.Ne(errorMessage)) {
             throw new Error('<mg-input-text> method "setError()" param "errorMessage" must be a string');
         }
         else {
@@ -3483,14 +3532,14 @@ const MgInputText = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("mg-input", { key: 'd374af889d485ffa2548f30c9555400b1cbdd5d9', 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: '71bf68b39704b5a1a8c5fc941c9dc1d5acd16e85', 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: 'c25b28a20c97d17c2d9cd4f14970e5c9e7f0e40c', 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: '9b6286d6942ae75226f28d4274bf8454a9f422e8', 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 {
@@ -3538,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.Oe(this.classCollection.classes);
         };
         /**
          * Handle blur event
@@ -3546,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.Oe(this.classCollection.classes);
             // Display Error
             this.handlerInProgress = Handler.BLUR;
             this.displayError().finally(() => {
@@ -3609,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.Oe(['mg-c-input--textarea']);
         this.errorMessage = undefined;
     }
     handleValue(newValue) {
@@ -3648,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.Ne(this.pattern) && index$1.Ne(this.patternErrorMessage))) {
             throw new Error('<mg-input-textarea> props "pattern" and "patternErrorMessage" must be non-empty string and paired.');
         }
     }
@@ -3680,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.Ne(errorMessage)) {
             throw new Error('<mg-input-textarea> method "setError()" param "errorMessage" must be a string');
         }
         else {
@@ -3731,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',
@@ -3740,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 {
@@ -3769,7 +3818,7 @@ const MgInputTitle = class {
         this.tagName = 'label';
     }
     validateIdentifier(newValue) {
-        if (!index$1.Be(newValue)) {
+        if (!index$1.Ne(newValue)) {
             throw new Error('<mg-input-title> prop "identifier" is required.');
         }
     }
@@ -3793,7 +3842,7 @@ const MgInputTitle = class {
     render() {
         const TagName = this.readonly ? 'span' : this.tagName;
         // \u00A0 represent a &nbsp;
-        return (index.h(TagName, { key: '2dda0af49de9de4324834cb429ad1798f1ff6f97', class: "mg-c-input-title", htmlFor: !this.isLegend && this.identifier, id: this.isLegend ? `${this.identifier}-title` : undefined }, index.h("slot", { key: '2a6ebb613b43b7baddc0f2499d10f0d0e7b42ab3' }), 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"],
@@ -3883,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.Oe(['mg-c-input--toggle']);
         this.options = undefined;
         this.errorMessage = undefined;
         this.valid = undefined;
@@ -3900,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.Fe(newValue)) {
             this.options = newValue.map(item => ({ title: item, value: item }));
         }
         // Object array
@@ -3956,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.Ne(errorMessage)) {
             throw new Error('<mg-input-toggle> method "setError()" param "errorMessage" must be a string');
         }
         else {
@@ -4012,7 +4061,7 @@ const MgInputToggle = class {
      */
     render() {
         var _a;
-        return (index.h("mg-input", { key: 'cbc77969b10f865f6933812e40612b845b02eeda', 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: '2ece5d5af0ed99fa2acada3c3ea413b78d417bc1', 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: '0c96299db7e9eb0e6ef110c09f83c070696a5908', "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, index.h("slot", { key: 'ceb7d2bfbec1492e993131bf3f276210a3321a8b', name: "item-1" })), index.h("span", { key: '8060ab06e8055ad3cab05b6e964c734e69d6e2c2', "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, index.h("slot", { key: 'bc5aed352763ec5e12e650f5a3a9991de01003e1', 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 {
@@ -4027,6 +4076,274 @@ const MgInputToggle = class {
 };
 MgInputToggle.style = MgInputToggleStyle0;
 
+/**
+ * MgItemMore type guard
+ * @param element - element to control type
+ * @returns truthy if element is mg-item-more
+ */
+const isMgItemMore = (element) => element.nodeName === 'MG-ITEM-MORE';
+var OverflowBehaviorElements;
+(function (OverflowBehaviorElements) {
+    OverflowBehaviorElements["BASE_INDEX"] = "data-overflow-base-index";
+    OverflowBehaviorElements["PROXY_INDEX"] = "data-overflow-proxy-index";
+})(OverflowBehaviorElements || (OverflowBehaviorElements = {}));
+class OverflowBehavior {
+    constructor(element, render) {
+        this.element = element;
+        this.render = render;
+        /**********
+         * Public *
+         **********/
+        /**
+         * Disconnect ResizeObserver
+         */
+        this.disconnect = () => {
+            this._resizeObserver.disconnect();
+        };
+        /************
+         * Internal *
+         ************/
+        /**
+         * run overflow behavior
+         * @param width - width of the container. Optional.
+         */
+        this.run = (width) => {
+            if (this._moreElement === undefined) {
+                // set moreElement
+                this._moreElement = this.render();
+                // set children
+                this._baseChildren = this.getInteractiveItems(this.element);
+                if (isMgItemMore(this._moreElement)) {
+                    this._proxyChildren = this.getInteractiveItems(this._moreElement.shadowRoot.querySelector('mg-menu'));
+                }
+                // update children
+                this._baseChildren.forEach((child, index) => {
+                    child.setAttribute(OverflowBehaviorElements.BASE_INDEX, `${index}`);
+                    // set moreElement children
+                    this._proxyChildren[index].setAttribute(OverflowBehaviorElements.PROXY_INDEX, `${index}`);
+                });
+            }
+            if (width !== undefined)
+                this.updateDisplayedItems(width);
+        };
+        /**
+         * Get interactive children filtred by authorized nodeName ['MG-MENU-ITEM', 'MG-BUTTON']
+         * @param element - element to parse
+         * @returns children
+         */
+        this.getInteractiveItems = (element) => { var _a; return (((_a = element.children) === null || _a === void 0 ? void 0 : _a.length) > 0 ? Array.from(element.children) : []).filter(element => ['MG-MENU-ITEM', 'MG-BUTTON'].includes(element.nodeName)); };
+        /**
+         * Update displayed items in container from a given available space
+         * @param availableWidth - available width in container to display child items
+         */
+        this.updateDisplayedItems = (availableWidth) => {
+            this.restoreItems();
+            const acc = { accWidth: 0, previousItem: null };
+            [...this._baseChildren, this._moreElement].forEach((child) => {
+                acc.accWidth += child.offsetWidth;
+                const hasPreviuosItem = acc.previousItem !== null;
+                const isPreviousItemHidden = hasPreviuosItem && acc.previousItem.getAttribute('hidden') !== null;
+                // if previous item is hidden AND is NOT more element we hidde current
+                // OR if item has an overflow we hidde current
+                // OR if current item is more element AND have NOT previous hidden items, current more element item is an hidden item
+                // ELSE current is a display item
+                this.toggleItem(child, (isPreviousItemHidden && !this.isMoreElement(child)) || this.isOverflowElement(acc.accWidth, child, availableWidth) || (this.isMoreElement(child) && !isPreviousItemHidden));
+                // update previous item with current item
+                acc.previousItem = child;
+            });
+        };
+        /**
+         * Utility method to know if item overflow partialy or totaly in the container
+         * @param cumulateWidth - previous sibling elements cumulate width + item width
+         * @param item - item HTML element
+         * @param availableWidth - container available width
+         * @returns truthy if element is overflow
+         */
+        this.isOverflowElement = (cumulateWidth, item, availableWidth) => {
+            if (item.previousElementSibling === null || this.isMoreElement(item))
+                return false;
+            else if (!this.isMoreElement(item.nextElementSibling))
+                return cumulateWidth + this._moreElement.offsetWidth > availableWidth;
+            else
+                return cumulateWidth > availableWidth;
+        };
+        /**
+         * Utility method to know if a given element is the 'MORE' element
+         * @param element - element to match with 'MORE' element
+         * @returns truthy if element is the 'MORE' element
+         */
+        this.isMoreElement = (element) => element.nodeName === 'MG-ITEM-MORE';
+        /**
+         * Toggle display item element
+         * @param item - item to control
+         * @param isHidden - is item hidden
+         */
+        this.toggleItem = (item, isHidden) => {
+            const mgActionMenuindex = Number(item.getAttribute(OverflowBehaviorElements.BASE_INDEX));
+            if (this.isMoreElement(item))
+                this.toggleElement(this._moreElement, isHidden);
+            else if (mgActionMenuindex >= 0) {
+                this.toggleElement(item, isHidden);
+                this.toggleElement(this._proxyChildren[mgActionMenuindex], !isHidden);
+            }
+        };
+        /**
+         * Toggle element's hidde attribute
+         * @param element - element to toggle
+         * @param isHidden - element is hidden
+         */
+        this.toggleElement = (element, isHidden) => {
+            if (isHidden)
+                element.setAttribute('hidden', '');
+            else
+                element.removeAttribute('hidden');
+        };
+        /**
+         * Remove hidden attributes on all items
+         */
+        this.restoreItems = () => {
+            [...this._baseChildren, this._moreElement].forEach(item => item.removeAttribute('hidden'));
+        };
+        if (this._resizeObserver === undefined) {
+            // add resize observer
+            this._resizeObserver = new ResizeObserver(entries => {
+                entries.forEach(entry => {
+                    this.run(entry.contentRect.width);
+                });
+            });
+            this._resizeObserver.observe(this.element);
+        }
+        this.run();
+    }
+}
+
+const mgItemMoreCss = ".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}}:host:not([hidden]){display:flex}";
+const MgItemMoreStyle0 = mgItemMoreCss;
+
+const MgItemMore = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /************
+         * Internal *
+         ************/
+        this.name = 'mg-item-more';
+        this.canRenderMgMenuItemOverflowElement = true;
+        /***********
+         * Methods *
+         ***********/
+        /**
+         * render mg-item-more overflow element
+         * @returns mg-item-more element
+         */
+        this.renderMgMenuItemOverflowElement = () => {
+            // create menu items proxy element from item clones
+            this.parentMenuItems.forEach((child) => {
+                this.moreElementMenuItem.querySelector('mg-menu').appendChild(child.cloneNode(true));
+            });
+            const allMenuItem = Array.from(this.parentMenu.querySelectorAll('mg-menu-item:not([data-overflow-more])'));
+            Array.from(this.moreElementMenuItem.querySelectorAll('mg-menu-item:not([data-overflow-more])')).forEach((proxy, index) => {
+                const proxified = allMenuItem[index];
+                // manage click on proxy to mirror it on initial element
+                proxy.addEventListener('click', () => {
+                    // be carefull to use element.click() method instead of dispatchEvent to ensure bubbles outside shadowDom
+                    const navElement = allMenuItem[index].shadowRoot.querySelector('a, button');
+                    if (navElement instanceof HTMLButtonElement || navElement instanceof HTMLAnchorElement)
+                        navElement.click();
+                });
+                // add id suffix to prevent duplicate key. default html id is: '';
+                if (index$1.Ne(proxy.id))
+                    proxy.id = `${proxy.id}-proxy`;
+                // update properties and DOM when proxyfied item is updated
+                proxified.addEventListener('item-updated', (event) => {
+                    Object.assign(proxy, event.target);
+                    proxy.innerHTML = event.target.innerHTML;
+                });
+                // manage status change miror in proxyfied element
+                proxified.addEventListener('status-change', (event) => {
+                    proxy.setAttribute('status', event.detail);
+                });
+            });
+            return this.element;
+        };
+        this.icon = { icon: 'ellipsis-vertical' };
+        this.slotlabel = { display: false };
+        this.size = undefined;
+        this.parentMenu = undefined;
+    }
+    validateIcon(newValue) {
+        if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.icon !== 'string'))
+            throw new Error(`<${this.name}> prop "icon" must match MgItemMore['icon'] type.`);
+    }
+    validateSlotLabel(newValue) {
+        if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.display !== 'boolean'))
+            throw new Error(`<${this.name}> prop "slotlabel" must match MgItemMore['slotlabel'] type.`);
+        else if (typeof newValue.label !== 'string')
+            this.slotlabel.label = this.messages.menuLabel;
+    }
+    validateSize(newValue) {
+        if (newValue && typeof newValue !== 'string')
+            throw new Error(`<${this.name}> prop "size" must match MgItemMore['size'] type.`);
+    }
+    /*************
+     * Lifecycle *
+     *************/
+    /**
+     * Set variables and validate props
+     */
+    componentWillLoad() {
+        // init variables
+        this.messages = index$1.initLocales(this.element).messages.itemMore;
+        // validate props
+        this.validateIcon(this.icon);
+        this.validateSlotLabel(this.slotlabel);
+        this.validateSize(this.size);
+    }
+    /**
+     * Ensure parent DOM is fully rendered with timeout method before parse elements
+     * @returns timeout
+     */
+    componentDidLoad() {
+        // ensure parent menu is fully rendered
+        return setTimeout(() => {
+            this.parentMenu = this.element.closest('mg-menu');
+        });
+    }
+    /**
+     * Set OverflowBehavior when parentMenu state is upate AND defined
+     */
+    componentDidUpdate() {
+        if (this.parentMenu && this.canRenderMgMenuItemOverflowElement) {
+            this.parentMenuItems = Array.from(this.parentMenu.children).filter(item => item.nodeName === 'MG-MENU-ITEM');
+            this.overflowBehavior = new OverflowBehavior(this.parentMenu, this.renderMgMenuItemOverflowElement);
+            this.canRenderMgMenuItemOverflowElement = false;
+        }
+    }
+    /**
+     * Disconnect overflow ResizeObserver
+     */
+    disconnectedCallback() {
+        var _a;
+        (_a = this.overflowBehavior) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    /**
+     * Render
+     * @returns HTML Element
+     */
+    render() {
+        return (index.h(index.Host, { key: '18e3ecec55a7078662bdb04ba6325a4d44ff1c78', role: "listitem" }, this.parentMenu && (index.h("mg-menu-item", { key: 'e04f4b62b1ce70eeae25f959ef6aeca2e4a2690d', "data-overflow-more": true, "data-size": this.parentMenu.size, ref: el => {
+                if (el)
+                    this.moreElementMenuItem = el;
+            } }, index.h("mg-icon", { key: '8f20ef688479578ebee9eabb63644837e1d45113', icon: this.icon.icon, slot: "image" }), index.h("span", { key: '7a4f08410d1e85682a8c3e1935525c418a4141de', class: { 'mg-u-visually-hidden': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), index.h("mg-menu", { key: 'f67f53d289cf65883a3534f17fb2baaa91314a66', direction: Direction.VERTICAL, label: this.messages.menuLabel, size: this.size })))));
+    }
+    get element() { return index.getElement(this); }
+    static get watchers() { return {
+        "icon": ["validateIcon"],
+        "slotlabel": ["validateSlotLabel"],
+        "size": ["validateSize"]
+    }; }
+};
+MgItemMore.style = MgItemMoreStyle0;
+
 const mgMenuCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}:host{display:flex;background-color:hsl(var(--mg-menu-background-color-hsl, var(--color-light)))}:host([direction=vertical]){height:100%;flex-direction:column;overflow-y:auto}";
 const MgMenuStyle0 = mgMenuCss;
 
@@ -4069,7 +4386,7 @@ const MgMenu = class {
          */
         this.setItemListener = (item, index) => {
             ['click', 'focus'].forEach(trigger => {
-                (item.shadowRoot.querySelector('button') || item.shadowRoot.querySelector('a')).addEventListener(trigger, () => {
+                item.shadowRoot.querySelector('button,a').addEventListener(trigger, () => {
                     this.focusedMenuItem = index;
                     // reset expanded on previous active menu item
                     (this.getItemMoreMenuItem() ? [...this.menuItems, this.getItemMoreMenuItem()] : this.menuItems).forEach((item, index) => {
@@ -4097,16 +4414,24 @@ const MgMenu = class {
          * render mg-item-more
          */
         this.renderMgItemMore = () => {
+            if (this.direction !== Direction.HORIZONTAL || this.isChildMenu) {
+                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.
-            const item = 'mg-item-more';
-            const mgItemMore = document.createElement(item);
-            Object.assign(mgItemMore, this.itemmore);
-            mgItemMore.addEventListener('item-loaded', this.handleItemLoaded);
-            this.element.appendChild(mgItemMore);
+            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);
+            }
+            else {
+                Object.defineProperties(mgItemMore, this.itemmore || {});
+            }
         };
         this.label = undefined;
-        this.direction = mgMenu_conf.Direction.HORIZONTAL;
+        this.direction = Direction.HORIZONTAL;
         this.itemmore = undefined;
         this.size = 'regular';
         this.isChildMenu = undefined;
@@ -4117,18 +4442,18 @@ const MgMenu = class {
         }
     }
     validateDirection(newValue) {
-        if (![mgMenu_conf.Direction.VERTICAL, mgMenu_conf.Direction.HORIZONTAL].includes(newValue)) {
-            throw new Error(`<${this.name}> prop "direction" must be one of: ${mgMenu_conf.Direction.HORIZONTAL}, ${mgMenu_conf.Direction.VERTICAL}.`);
+        if (![Direction.VERTICAL, Direction.HORIZONTAL].includes(newValue)) {
+            throw new Error(`<${this.name}> prop "direction" must be one of: ${Direction.HORIZONTAL}, ${Direction.VERTICAL}.`);
         }
     }
     validateItemMore(newValue) {
-        if (newValue !== undefined && this.direction !== mgMenu_conf.Direction.HORIZONTAL) {
-            throw new Error(`<${this.name}> prop "itemmore" must be paired with direction ${mgMenu_conf.Direction.HORIZONTAL}.`);
+        if (newValue !== undefined && this.direction !== Direction.HORIZONTAL) {
+            throw new Error(`<${this.name}> prop "itemmore" must be paired with direction ${Direction.HORIZONTAL}.`);
         }
     }
     validateSize(newValue) {
-        if (!mgMenu_conf.sizes.includes(newValue)) {
-            throw new Error(`<${this.name}> prop "size" must be one of: ${mgMenu_conf.sizes.join(', ')}.`);
+        if (!sizes$2.includes(newValue)) {
+            throw new Error(`<${this.name}> prop "size" must be one of: ${sizes$2.join(', ')}.`);
         }
     }
     /*************
@@ -4156,22 +4481,13 @@ const MgMenu = class {
             this.menuItems = Array.from(this.element.children).filter(child => child.nodeName === 'MG-MENU-ITEM');
             this.isChildMenu = this.element.closest('mg-menu-item') !== null;
             // add mg-item-more to manage OverflowBehavior
-            if (this.direction === mgMenu_conf.Direction.HORIZONTAL && !this.isChildMenu)
+            // when all props, states and DOM are already rendered we can render the mg-item-more
+            this.renderMgItemMore();
+            // then use mutation observer on children to improve reactivity
+            new MutationObserver(() => {
                 this.renderMgItemMore();
-            // use mutation observer to improve reactivity
-            new MutationObserver(entries => {
-                const mgItemMore = this.getItemMore();
-                // prevent infinit loop by exclude mg-item-more deletion entry
-                if (entries.some(entry => entry.type === 'childList' && Array.from(entry.removedNodes).some(node => node.nodeName === 'MG-ITEM-MORE')))
-                    return;
-                else if (mgItemMore !== null) {
-                    // render a new mg-item-more
-                    mgItemMore.remove();
-                    mgItemMore.removeEventListener('item-loaded', this.handleItemLoaded);
-                    this.renderMgItemMore();
-                }
-            }).observe(this.element, { childList: true, characterData: true, subtree: true });
-        }, 0);
+            }).observe(this.element, { childList: true });
+        });
     }
     /**
      * Add listeners to items
@@ -4184,7 +4500,7 @@ const MgMenu = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h(index.Host, { key: '086439eeee2cbd3ee887bf047f04271de3e909b1', role: "list", "aria-label": this.label }, index.h("slot", { key: '332f520ff53aa203bfa299afce5251aa108e7e55' })));
+        return (index.h(index.Host, { key: 'a5fe4a1a61b4255cc9a06217f30ef2f154fd797d', role: "list", "aria-label": this.label }, index.h("slot", { key: '37de5388d1cca3fa46dfbb73ab26ba6e299940b5' })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -4204,6 +4520,7 @@ const MgMenuItem = class {
         index.registerInstance(this, hostRef);
         this.statusChange = index.createEvent(this, "status-change", 7);
         this.itemLoaded = index.createEvent(this, "item-loaded", 7);
+        this.itemUpdated = index.createEvent(this, "item-updated", 7);
         /************
          * Internal *
          ************/
@@ -4261,7 +4578,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.Ne(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);
@@ -4301,7 +4618,7 @@ const MgMenuItem = class {
          * Condition to know if component should display a mg-popover
          * @returns truthy if component display popover
          */
-        this.displayPopover = () => this.isDirection(mgMenu_conf.Direction.HORIZONTAL) && this.hasChildren && this.href === undefined;
+        this.displayPopover = () => this.isDirection(Direction.HORIZONTAL) && this.hasChildren && this.href === undefined;
         /************
          * Handlers *
          ************/
@@ -4330,13 +4647,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.Me('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.Oe([this.navigationButton]);
         this.direction = undefined;
         this.isInMainMenu = undefined;
         this.isItemMore = undefined;
@@ -4386,7 +4703,7 @@ const MgMenuItem = class {
         this.element.setAttribute('data-style-direction', newValue);
         this.navigationButtonClassList.add(`${this.navigationButton}--${newValue}`);
         // manage all sub levels child menu-items level with data-level attribut
-        if (this.isDirection(mgMenu_conf.Direction.VERTICAL, newValue)) {
+        if (this.isDirection(Direction.VERTICAL, newValue)) {
             Array.from(this.element.querySelectorAll('mg-menu-item')).forEach(item => {
                 item.dataset.level = `${(Number(item.dataset.level) || 1) + 1}`;
             });
@@ -4438,7 +4755,7 @@ const MgMenuItem = class {
         return setTimeout(() => {
             // define menu-item context states
             const menu = this.element.closest('mg-menu');
-            this.direction = this.isItemMore || menu === null ? mgMenu_conf.Direction.HORIZONTAL : menu.direction;
+            this.direction = this.isItemMore || menu === null ? Direction.HORIZONTAL : menu.direction;
             this.isInMainMenu = menu !== null && this.element.parentElement.closest('mg-menu-item') === null;
             if ((menu === null || menu === void 0 ? void 0 : menu.size) !== undefined)
                 this.size = menu.size;
@@ -4447,7 +4764,7 @@ const MgMenuItem = class {
             // when main menu item contain an active item it will get the active style
             // AND if item is in vertical menu it will be expanded
             if (this.hasActiveChild() && this.isInMainMenu)
-                this.expanded = this.isDirection(mgMenu_conf.Direction.VERTICAL);
+                this.expanded = this.isDirection(Direction.VERTICAL);
             this.updateStatus([Status$1.ACTIVE]);
             this.updateDisplayNotificationBadge();
             this.updatePopoverGuard();
@@ -4457,10 +4774,11 @@ const MgMenuItem = class {
             this.itemLoaded.emit();
             new MutationObserver(mutationsList => {
                 if (mutationsList.some(mutation => mutation.attributeName === 'hidden'))
-                    this.updateStatus();
+                    this.updateStatus([Status$1.ACTIVE]);
                 if (mutationsList.some(mutation => mutation.type === 'characterData'))
                     this.validateSlot();
                 this.updateDisplayNotificationBadge();
+                this.itemUpdated.emit();
             }).observe(this.element, { attributes: true, childList: true, characterData: true, subtree: true });
         }, 0);
     }
@@ -4478,6 +4796,14 @@ const MgMenuItem = class {
                 [`${this.navigationButton}-chevron--rotate`]: this.expanded === true,
             } }, index.h("mg-icon", { icon: "chevron-down", size: "small" })))));
     }
+    /**
+     * Emit event when component is updated
+     */
+    componentShouldUpdate() {
+        return index$1.Ce(() => {
+            this.itemUpdated.emit();
+        });
+    }
     /**
      * Render
      * @returns HTML Element
@@ -4485,9 +4811,9 @@ const MgMenuItem = class {
     render() {
         const getContainerClasses = () => ({
             ['mg-c-menu-item__collapse-container']: true,
-            ['mg-c-menu-item__collapse-container--first-level']: (this.isInMainMenu || this.isItemMore) && this.isDirection(mgMenu_conf.Direction.HORIZONTAL),
+            ['mg-c-menu-item__collapse-container--first-level']: (this.isInMainMenu || this.isItemMore) && this.isDirection(Direction.HORIZONTAL),
         });
-        return (index.h(index.Host, { key: '8d1b7b3019b4d5c75d30489754ccb0a85244976d', 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() }, 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()),
         ])));
@@ -4580,13 +4906,13 @@ const MgMessage = class {
                     return 'exclamation-circle';
             }
         };
-        this.identifier = index$1.Re('mg-message');
+        this.identifier = index$1.Me('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.Oe(['mg-c-message']);
         this.hasActions = false;
     }
     validateDelay(newValue) {
@@ -4665,7 +4991,7 @@ const MgMessage = class {
         let role;
         if (!this.noAriaRole)
             role = this.variant === 'info' ? 'status' : 'alert';
-        return (index.h("div", { key: '426c30a149e1d0aef99c9b34ef8b09384b876e7f', id: this.identifier, class: this.classCollection.join(), role: role }, index.h("mg-card", { key: 'f8e00eaf99b8fcc828bbade2745293931da76619', variant: this.variant, "variant-style": "bar-left" }, index.h("span", { key: '94f7c67946985fafacfba078237926823315362f', class: "mg-c-message__icon" }, index.h("mg-icon", { key: '8e9b5c24bcb20ade8bb2a160a886973b9e9575fe', icon: this.getIcon() })), index.h("div", { key: '2104ace2484f87109c5dfa76cd3423216412fe28', class: "mg-c-message__content" }, index.h("span", { key: 'e1af1bc257beb682e9ad44627b4208e1ce52b28c', class: "mg-c-message__content-slot" }, index.h("slot", { key: '7688aed5413d37855f7704c625f4669400bdaaff' })), 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 {
@@ -4729,12 +5055,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._e));
             // 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._e) || focusableElement : focusableElement);
                     return acc;
                 }, []);
                 // When close button is enabled it's the first focusable element.
@@ -4756,21 +5082,21 @@ const MgModal = class {
         this.handleClose = () => {
             this.hide = true;
         };
-        this.identifier = index$1.Re('mg-modal');
+        this.identifier = index$1.Me('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.Oe(['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.Ne(newValue)) {
             throw new Error('<mg-modal> prop "modalTitle" is required.');
         }
     }
@@ -4838,14 +5164,14 @@ const MgModal = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("div", { key: 'cc3a33438dcf5ec90831f5bb39ddb0de558063ab', 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: '18a6cf3cd69c667573489b051de9f15aa853784d' }, index.h("div", { key: '5e856e4a0ed625ffa1879d35efa27b5292ea3f11', class: "mg-c-modal__dialog" }, index.h("header", { key: 'fb701088cdd08194f68cf22920cd1d30ef24db0b', 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: '2b99fc7fc7440a3c9899a88f1bd138a36500df94', 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 {
@@ -4917,7 +5243,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.Me('mg-pagination');
         this.label = undefined;
         this.hideNavigationLabels = undefined;
         this.hidePageCount = undefined;
@@ -4960,10 +5286,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 {
@@ -5082,7 +5408,7 @@ const MgPanel = class {
             ];
             return this.titlePosition === 'right' ? children.reverse() : children;
         };
-        this.identifier = index$1.Re('mg-panel');
+        this.identifier = index$1.Me('mg-panel');
         this.panelTitle = undefined;
         this.titlePattern = undefined;
         this.titlePatternErrorMessage = undefined;
@@ -5091,12 +5417,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.Oe(['mg-c-panel']);
         this.isEditing = false;
         this.updatedPanelTitle = undefined;
     }
     validatePanelTitle(newValue) {
-        if (!index$1.Be(newValue))
+        if (!index$1.Ne(newValue))
             throw new Error('<mg-panel> prop "panelTitle" is required.');
         this.titleChange.emit(newValue);
     }
@@ -5147,7 +5473,7 @@ const MgPanel = class {
      */
     render() {
         const headerId = `${this.identifier}-header`;
-        return (index.h("section", { key: '0f4e6da36c14880761294b950aef7273fb3b254e', class: this.classCollection.join(), id: this.identifier }, index.h("mg-card", { key: '3f604c637fb25eb7a236efb26d4c9da7c106cada' }, index.h("header", { key: '86b24eee8ab6a59789579ccee766e34ce1b60206', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), index.h("article", { key: '054a9aee122a1273aa431750daa15d2e5cfec316', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, index.h("slot", { key: 'b2daff9ba6ebe460c849f33e019bfd6583376451' })))));
+        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 {
@@ -7047,7 +7373,7 @@ const MgPopover = class {
                 mgPopoverContent.setAttribute('id', this.identifier);
             }
         };
-        this.identifier = index$1.Re('mg-popover');
+        this.identifier = index$1.Me('mg-popover');
         this.placement = 'bottom';
         this.arrowHide = false;
         this.closeButton = false;
@@ -7090,7 +7416,7 @@ const MgPopover = class {
      */
     componentWillLoad() {
         // Get windows to attach events
-        this.windows = index$1._e(window);
+        this.windows = index$1.Be(window);
         // render mg-popover-content slot
         this.renderPopoverContent();
         this.validateCloseButton(this.closeButton);
@@ -7152,7 +7478,7 @@ const MgPopover = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h(index.Host, { key: 'd6ebc1c018e61ca61593905ec3e2535394bd53a7' }, index.h("slot", { key: 'a47ad7ad03453c782aea2994254c5cd98a1e3b92' }), index.h("slot", { key: '6ba88b5e57dc91474de84037c0d7a793755ed18f', name: "content" })));
+        return (index.h(index.Host, { key: '788fd2a8f759f8ae9188b05395cbfc33b5b06c69' }, index.h("slot", { key: '9109948237f93d375e6d1b234274f8283c0260d3' }), index.h("slot", { key: 'e76a1093edab91746a4d3302d7976129ed7c6042', name: "content" })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -7178,7 +7504,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.Oe(['mg-c-popover-content']);
     }
     /*************
      * Lifecycle *
@@ -7196,7 +7522,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.De(slottedTitleElement, headingTags)) {
             throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}`);
         }
     }
@@ -7205,7 +7531,7 @@ const MgPopoverContent = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h(index.Host, { key: 'e7344c0999adb28766413b2b5cdb2a682d0761ac' }, index.h("mg-card", { key: '04e73d6b68b89bd915a5ce9ebcc6a4c06742b6f1', 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: 'e2d30d49368722078c32edb5d95191fa2f03af22', class: "mg-c-popover-content__title" }, index.h("slot", { key: '0aee7ff2b06f57ff5256a2420c75ed987b48975b', name: "title" })), index.h("slot", { key: '2d2ec48ad494aeec5554572dbd3b1620856ac5ba', name: "content" })), index.h("slot", { key: '90d1985eeaf2d7424b9418d2e7ce26ef6bc35efe', 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); }
 };
@@ -7232,7 +7558,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.Ne(link.href) || !link.href.startsWith('#') || !index$1.Ne(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.`);
         }
     }
@@ -7251,7 +7577,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 {
@@ -7384,7 +7710,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.Ce(() => {
                 this.tabFocus = undefined;
                 Array.from(this.element.shadowRoot.querySelectorAll('[data-index]')).forEach((tab, index) => {
                     tab.setAttribute('tabindex', this.activeTab - this.startIndex !== index ? '-1' : '0');
@@ -7399,16 +7725,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.Me('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.Oe(['mg-c-tabs']);
     }
     validateLabel(newValue) {
-        if (!index$1.Be(newValue)) {
+        if (!index$1.Ne(newValue)) {
             throw new Error('<mg-tabs> prop "label" is required.');
         }
     }
@@ -7420,7 +7746,7 @@ const MgTabs = class {
     }
     validateItems(newValue) {
         // String array
-        if (index$1.Oe(newValue))
+        if (index$1.Fe(newValue))
             this.tabs = newValue.map(item => ({ label: item, status: Status.VISIBLE }));
         // Object array
         else if (Array.isArray(newValue) && newValue.length > 0 && newValue.every(isTabItem))
@@ -7482,7 +7808,7 @@ const MgTabs = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("div", { key: '0a0e2fdcb11b2dd79803cc114a429b2ef4cc3c89', class: this.classCollection.join() }, index.h("header", { key: '332ba66756df3c83dcec8daf2d83386f5f93a6bb', 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),
@@ -7520,7 +7846,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.Oe(['mg-c-tag']);
     }
     validateVariant(newValue, oldValue) {
         if (!variants.includes(newValue)) {
@@ -7557,7 +7883,7 @@ const MgTag = class {
      * @param textContent - html element textContent property
      */
     validateTextContent(textContent) {
-        if (!index$1.Be(textContent))
+        if (!index$1.Ne(textContent))
             throw new Error('<mg-tag> slot must contain a text content.');
     }
     /*************
@@ -7577,7 +7903,7 @@ const MgTag = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("span", { key: 'c528cdd483287d210928ed3a993b491cdedd5b42', class: this.classCollection.join() }, index.h("slot", { key: '36403304976bb40067529c5cd0a810dca41055b1' })));
+        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 {
@@ -7593,6 +7919,7 @@ var Guard;
     Guard["FOCUS"] = "focus";
     Guard["HOVER_TOOLTIP_ELEMENT"] = "hoverTooltipGuard";
     Guard["HOVER_TOOLTIPED_ELEMENT"] = "hoverTooltipedGuard";
+    Guard["DISABLE_ON_CLICK"] = "disableOnClick";
 })(Guard || (Guard = {}));
 
 const mgTooltipCss = ":host{display:inline-block}mg-tooltip-content{font-family:var(--font-family);font-size:var(--font-size);font-weight:200}";
@@ -7616,7 +7943,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.Ce(() => {
                 this.windows.forEach((localWindow) => {
                     localWindow.addEventListener('click', this.clickOutside, false);
                     localWindow.addEventListener('keydown', this.pressEscape, false);
@@ -7672,7 +7999,7 @@ const MgTooltip = class {
          */
         this.tooltipMouseListenerAction = (elementGuard, isMouseenter, conditionalGuard) => {
             // we mutate elementGuard
-            if (this.guard !== Guard.FOCUS) {
+            if (![Guard.FOCUS, Guard.DISABLE_ON_CLICK].includes(this.guard)) {
                 this.guard = elementGuard;
                 if (!isMouseenter) {
                     // process action in the next event loop macro task
@@ -7753,6 +8080,12 @@ const MgTooltip = class {
                 ],
             });
             // Manage tooltipedElement focus/blur events
+            this.tooltipedElement.addEventListener('disabled-change', (event) => {
+                if (event.target.disableOnClick) {
+                    this.guard = event.detail ? Guard.DISABLE_ON_CLICK : null;
+                }
+            });
+            // Manage tooltipedElement focus/blur events
             this.tooltipedElement.addEventListener('focus', () => {
                 this.guard = Guard.FOCUS;
                 this.setDisplay(true);
@@ -7781,7 +8114,7 @@ const MgTooltip = class {
                 });
             });
         };
-        this.identifier = index$1.Re('mg-tooltip');
+        this.identifier = index$1.Me('mg-tooltip');
         this.message = undefined;
         this.placement = 'bottom';
         this.display = false;
@@ -7792,7 +8125,7 @@ const MgTooltip = class {
         this.renderTooltipContent();
     }
     validateMessage(newValue) {
-        if (!index$1.Be(newValue)) {
+        if (!index$1.Ne(newValue)) {
             throw new Error('<mg-tooltip> prop "message" is required.');
         }
         this.mgTooltipContent.message = newValue;
@@ -7841,7 +8174,7 @@ const MgTooltip = class {
      */
     componentWillLoad() {
         // Get windows to attach events
-        this.windows = index$1._e(window);
+        this.windows = index$1.Be(window);
         // Get tooltip element
         this.renderTooltipContent();
         this.mgTooltipContent = this.element.querySelector(`#${this.identifier}`);
@@ -7860,14 +8193,14 @@ 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._e) ? slotElement : (_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(index$1._e);
         // define selected element to become tooltip selector
         this.tooltipedElement = interactiveElement || slotElement;
         // Check if slotted element is a disabled mg-button
         // In this case we wrap the mg-button into a div to enable the tooltip
         if (isButton(slotElement)) {
             new MutationObserver(mutationList => {
-                if (mutationList.some(mutation => ['aria-disabled', 'disabled'].includes(mutation.attributeName))) {
+                if (mutationList.some(mutation => ['aria-disabled', 'disabled'].includes(mutation.attributeName)) && this.guard !== Guard.DISABLE_ON_CLICK) {
                     this.setMgButtonWrapper(slotElement);
                     // Since Firefox doesn't trigger a "blur" event when the "disabled" attribute is added or removed from a button
                     // we have to manually unlock the guard because the "blur" handler of the tooltipedElement won't do it.
@@ -7892,7 +8225,7 @@ const MgTooltip = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h(index.Host, { key: '39e72edae07252421d527bfbeede585a27d2663c' }, index.h("slot", { key: '0402c8ea5aa2dea27e66a621e3d905356786dd27' }), index.h("slot", { key: 'e194462c062b565a6cb0e6330fa841a29746445d', 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 {
@@ -7920,7 +8253,7 @@ const MgTooltipContent = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h(index.Host, { key: 'a26eb86dd6c3461563b2c532b1330f8897eb2da6', role: "tooltip" }, index.h("span", { key: 'eff274511b40c5e60429ebc387e32717854f7ffc', innerHTML: this.message, class: "mg-tooltip-content__message" }), index.h("slot", { key: '3b26eabf4471f34ae3997faa81e667341d26bee5', 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;
@@ -7947,6 +8280,7 @@ exports.mg_input_text = MgInputText;
 exports.mg_input_textarea = MgInputTextarea;
 exports.mg_input_title = MgInputTitle;
 exports.mg_input_toggle = MgInputToggle;
+exports.mg_item_more = MgItemMore;
 exports.mg_menu = MgMenu;
 exports.mg_menu_item = MgMenuItem;
 exports.mg_message = MgMessage;
@@ -7961,4 +8295,4 @@ exports.mg_tag = MgTag;
 exports.mg_tooltip = MgTooltip;
 exports.mg_tooltip_content = MgTooltipContent;
 
-//# sourceMappingURL=mg-action-more_35.cjs.entry.js.map
+//# sourceMappingURL=mg-action-more_36.cjs.entry.js.map