@mgdis/mg-components 5.27.0 → 5.27.1

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

@@ -1,6 +1,5 @@
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-629a42c7.js';
-import { R as Re, i as initLocales, M as Me, B as Be, U as Ue, F as Fe, N as Ne, g as ge, W as We, P as Pe, d as de, z as ze, q as qe, O as Oe, D as De, _ as _e } from './index-445fc2a0.js';
-import { D as Direction, s as sizes$2 } from './mg-menu.conf-9609bcb2.js';
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-d43d1c5d.js';
+import { R as Re, i as initLocales, M as Me, B as Be, U as Ue, F as Fe, N as Ne, d as de, g as ge, W as We, P as Pe, z as ze, q as qe, O as Oe, D as De, _ as _e } from './index-c4ed16b2.js';
 
 /**
  * Available menu-item positions
@@ -25,6 +24,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;
 
@@ -394,7 +406,7 @@ const MgButton = class {
      */
     render() {
         var _a;
-        return (h(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 }, h("div", { key: '4010a7cb779fb4a9154b8d83af7aec1b093af129', class: this.classCollection.join(), id: this.identifier }, this.loading && h("mg-icon", { icon: "loader", spin: true }), h("div", { key: '4571c578e953d983f925954d5d6a05dfa5097876', class: "mg-c-button__content" }, h("slot", { key: '6d08cc980db4375577569753562ec088378bfdfb' })))));
+        return (h(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 }, h("div", { key: '9743ead1b9fd1f70ef0690087806a1767c5825b0', class: this.classCollection.join(), id: this.identifier }, this.loading && h("mg-icon", { icon: "loader", spin: true }), h("div", { key: '7070995c17ecedb4223475cce662e115e8d72510', class: "mg-c-button__content" }, h("slot", { key: 'cb0ad8aa02d634f0a3dfa9b584ec8fb26da88271' })))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -474,7 +486,7 @@ const MgCard = class {
      */
     render() {
         var _a;
-        return (h("div", { key: 'fe38aa48dae7528a45e66c68fef10444f1cf8b54', class: this.classCollection.join() }, ((_a = this.variantStyle) === null || _a === void 0 ? void 0 : _a.startsWith('bar-')) && h("span", { class: "mg-c-card__bar" }), h("slot", { key: 'ca9d1a1e15b851381f9f857eac392dea33c0bf89' })));
+        return (h("div", { key: '9e604fe7b06f19797c6841b1902b56684a4bdc69', class: this.classCollection.join() }, ((_a = this.variantStyle) === null || _a === void 0 ? void 0 : _a.startsWith('bar-')) && h("span", { class: "mg-c-card__bar" }), h("slot", { key: '44d9092aaa6bbdf0b20a1fffe0edad15150cd8cb' })));
     }
     static get watchers() { return {
         "variant": ["validateVariant"],
@@ -563,7 +575,7 @@ const MgDetails = class {
      * @returns HTML Element
      */
     render() {
-        return (h("details", { key: '8427ea64231dcd5986af4c28f2923695289a2677', class: "mg-c-details", onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", { key: '9618d302733fbbaf57e10415dabe60d3f418bcf1' }, h("slot", { key: '73117b9cb92a313ad8229608a4d974b8df9237b9', name: "summary" }), h("span", { key: '6b527905309929e8433aa7ee3ea15761c4924d4e', class: "mg-c-details__toggle" }, 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 } }), h("span", { key: 'ebbef038c63b1458b6d02c2c64a1a24dcdcf48ca', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { key: 'be34e7a1e1f08a284a49a438858282dadaedf9a9', class: "mg-c-details__details" }, h("slot", { key: '417269d8d1d5f15754c3ba1ca6daf81aa8b4d013', name: "details" }))));
+        return (h("details", { key: '28d18aa44daec76231b80e2f8c48b475bb318d10', class: "mg-c-details", onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", { key: 'a998fadad2ee592b632ab19c0fe69f142211156a' }, h("slot", { key: '7e5b636e9ed6f05904ed13c06cff14a5353de74b', name: "summary" }), h("span", { key: '770f0cfd6f70127a61f6ffab1c30e4d8d83c70bb', class: "mg-c-details__toggle" }, h("mg-icon", { key: '2f996b8793388b6606706459352a9b540e45f120', icon: "chevron-up", size: "small", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), h("span", { key: '1d0dc92242080d172d226bf013ae56ffe6e4a717', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { key: 'd6b973893a807d2ef94a7c3d131e3ca0c9a675e3', class: "mg-c-details__details" }, h("slot", { key: 'ae1928a7aad8d986f44cb36e02648680dea074a4', name: "details" }))));
     }
     static get watchers() { return {
         "toggleClosed": ["validateTitles"],
@@ -790,7 +802,7 @@ const MgForm = class {
      * @returns HTML Element
      */
     render() {
-        return (h("form", { key: '1e102f0f152829ae6754da1e4431b8d9db0a3d9a', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && h("p", { innerHTML: this.requiredMessageText }), h("slot", { key: '624d29818d782e0228a406c63ba6554475a8f08a' }), !this.readonly && !this.disabled && h("slot", { name: "actions" })));
+        return (h("form", { key: 'cfcf6da7026b3e3703903090773ecf69e57034cc', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && h("p", { innerHTML: this.requiredMessageText }), h("slot", { key: '2f0c489e6ce31580cbb66f144749f5c3e2ad18eb' }), !this.readonly && !this.disabled && h("slot", { name: "actions" })));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -961,13 +973,13 @@ const MgIllustratedMessage = class {
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: '7b4e52979bc173b70ccab6a61acffb4e0ed8f01f', class: {
+        return (h("div", { key: '566da859acf529d2389b892db469a2293f85c67e', class: {
                 'mg-c-illustrated-message': true,
                 'mg-c-illustrated-message--horizontal': this.direction === 'horizontal',
-            } }, h("div", { key: '86d098229b950c5191ed3335dde757c169749900', class: {
+            } }, h("div", { key: '7d2d44156ae0c8c0ac2364e6f1fc7c41242f7d6c', class: {
                 'mg-c-illustrated-message__illustration': true,
                 'mg-c-illustrated-message__illustration--small': this.size === 'small',
-            } }, h("slot", { key: '19b4a9161013c8d8569f731755b4aa716c13c9eb', name: "illustration" })), h("div", { key: '23e8e83466613a4e3becf251f39e82e344c5bff8', class: "mg-c-illustrated-message__slots" }, h("div", { key: 'be5407092e1135567a2ce4779a4b1a2c77a532a0', class: "mg-c-illustrated-message__title" }, h("slot", { key: '1231d2a4fbcb30ad4c6d3b737f41db24300af182', name: "title" })), h("div", { key: '25b0d0b5aa3a03bfb2dd2fae2129641b6a43c595', class: "mg-c-illustrated-message__details" }, h("slot", { key: 'ef5ef7b66350be1256d36996e70e26a6132c6682', name: "details" })))));
+            } }, h("slot", { key: '3a477be62f6866dece99be8882f89dcd2a620c5e', name: "illustration" })), h("div", { key: 'd6d8950d4bb5b8c6cafe1c148978bed1291f5768', class: "mg-c-illustrated-message__slots" }, h("div", { key: '47d0406a0d5eb2ea2388472defdc44411ba2977d', class: "mg-c-illustrated-message__title" }, h("slot", { key: '8126236dfce191b268f84f45183cc8304019c129', name: "title" })), h("div", { key: '64641dadca2ed82f3ad4b24d677ee01cc002dabf', class: "mg-c-illustrated-message__details" }, h("slot", { key: '65b61b0c16c9dde9cd2eab062b97fe189f53e5a2', name: "details" })))));
     }
     get element() { return getElement(this); }
 };
@@ -1227,7 +1239,7 @@ const MgInput = class {
     render() {
         const readonlyValue = this.getReadonlyValues();
         const isGroup = this.isFieldset && !this.isReadonly;
-        return (h(Host, { key: 'de3590a7b4e4f3b8b9e63af5b9b5562dd5da69fc', class: this.element.classList.toString(), role: isGroup ? 'group' : undefined, "aria-labelledby": isGroup ? `${this.identifier}-title` : undefined }, h("div", { key: 'b530d05b3456a7a68a36c931591958742a44c8c9', class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide } }, h("slot", { key: '0fddf2c64ecc28626be04c920663efee9d67cf0a', name: this.slotLabel }), this.tooltip && !this.isReadonly && (this.tooltipPosition === 'label' || this.labelOnTop) && !this.labelHide && this.renderTooltip()), h("div", { key: 'afa1657e3ecb323076c59063901e7dda505e0096', class: "mg-c-input__input-container" }, this.isReadonly
+        return (h(Host, { key: '5eedfac460913f23f71a3fbba43af958afc63e0d', class: this.element.classList.toString(), role: isGroup ? 'group' : undefined, "aria-labelledby": isGroup ? `${this.identifier}-title` : undefined }, h("div", { key: '9335584ba10e2bc199accb9b4200b45252c848a9', class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide } }, h("slot", { key: '7c5de08476008bfe6cbcfa07706cee30f16bc059', name: this.slotLabel }), this.tooltip && !this.isReadonly && (this.tooltipPosition === 'label' || this.labelOnTop) && !this.labelHide && this.renderTooltip()), h("div", { key: '5cf88a0ea68aaf2d8f1c96c4593ef6ea0133beb6', class: "mg-c-input__input-container" }, this.isReadonly
             ? [
                 Array.isArray(readonlyValue) ? (h("ul", { key: "readonly-value-list" }, readonlyValue.map(value => (h("li", { key: value }, h("strong", null, value)))))) : (h("strong", { key: "readonly-value" }, readonlyValue)),
                 h("slot", { key: "default-slot" }),
@@ -1856,6 +1868,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}}";
@@ -1868,6 +1881,12 @@ const MgInputDate = class {
         this.inputValid = 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) => Be(value) && de.test(value);
         /**
          * Format help text to display
          * @param helpText - help text format
@@ -1900,32 +1919,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;
             }
@@ -1980,7 +2019,7 @@ 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';
@@ -1994,12 +2033,16 @@ const MgInputDate = class {
         // 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' || !de.test(newValue))) {
-            throw new Error("<mg-input-date> props 'value' doesn't match pattern: yyyy-mm-dd");
+        // check value validity
+        if (newValue && !Be(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)
@@ -2008,7 +2051,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' && de.test(newValue)))) {
+        if (newValue && !this.isValidPattern(newValue)) {
             throw new Error("<mg-input-date> props 'min/max' doesn't match pattern: yyyy-mm-dd");
         }
     }
@@ -2102,7 +2145,7 @@ const MgInputDate = class {
      * @returns HTML Element
      */
     render() {
-        return (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: ge(this.value, this.locale), tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, 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 (h("mg-input", { key: 'ff06e342e04a96ecc30ff064ace7c179b1db8425', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonlyValue: ge(this.value, this.locale), tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, h("input", { key: 'bcecf05a95c3e812af6fc6d0b137afba726b2cb8', type: "date", class: "mg-c-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => {
                 if (el !== null)
                     this.input = el;
             } })));
@@ -2233,7 +2276,7 @@ const MgInputNumeric = class {
         this.formatValue = (value) => {
             switch (this.format) {
                 case 'number':
-                    return qe(value, this.locale);
+                    return qe(value, this.locale, this.type === 'decimal' ? this.decimalLength : undefined);
                 case 'currency':
                     return ze(value, this.locale, this.currency);
                 case 'none':
@@ -2463,10 +2506,10 @@ const MgInputNumeric = class {
      * @returns HTML Element
      */
     render() {
-        return (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 }, 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 (h("mg-input", { key: 'c1b1a0cd22f0ed6597852ecd38bb97d9942565a1', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonlyValue: this.readonlyValue, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, h("input", { key: '9e64e0096e3ab8212c6626fba772a7756cd4f144', type: "text", class: "mg-c-input__box mg-c-input__box--width", value: this.displayValue(), id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
                 if (el !== null)
                     this.input = el;
-            } }), h("slot", { key: 'c1970cbf9e7fce07abd63382d401f4e2834bc4d0', name: "append-input" })));
+            } }), h("slot", { key: 'd2484bde61ff7962bb8b060f448a656160edd3f9', name: "append-input" })));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -2667,7 +2710,7 @@ const MgInputPassword = class {
         return (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 }, h("span", { key: '35c61d84248fe5b65c91afcb932d8e71aa0db71f', class: "mg-c-input__input-group" }, 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) => {
                 if (el !== null)
                     this.input = el;
-            } }), 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 }, h("mg-icon", { key: '0561963f435ae27b1118411d4654447cd43577a1', icon: this.displayPassword ? 'eye-slash' : 'eye' })))));
+            } }), h("mg-button", { key: 'fbe3f10fd8b9626d13d1e8ca9f3355e8af0d573e', label: this.messages.input.password[this.displayPassword ? 'hide' : 'display'], disabled: this.disabled, variant: "flat", class: "mg-c-input__append-button", "is-icon": true, onClick: this.toggleDisplayPassword, "aria-controls": this.identifier }, h("mg-icon", { key: '48f1d7921294675f036439364bc73d1c730573c9', icon: this.displayPassword ? 'eye-slash' : 'eye' })))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -3229,6 +3272,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) {
@@ -3479,14 +3528,14 @@ const MgInputText = class {
      * @returns HTML Element
      */
     render() {
-        return (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 }, h("div", { key: '71bf68b39704b5a1a8c5fc941c9dc1d5acd16e85', class: "mg-c-input__with-character-left", style: {
+        return (h("mg-input", { key: '0bcc765df96b4183f70e03f0579bc64f0d2455d2', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [this.characterLeftId], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonlyValue: this.value, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, h("div", { key: 'fdbfcdc5be2946e3c25b4ea1bc3e1824a205e4fe', 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 && h("mg-icon", { icon: this.icon }), 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 && h("mg-icon", { icon: this.icon }), h("input", { key: '1fa97359a69a9ab7093dbcbe4349638f121931c7', type: this.type, class: "mg-c-input__box mg-c-input__box--width", value: this.value, id: this.identifier, list: this.hasDatalist() ? this.datalistId : undefined, autocomplete: this.hasDatalist() ? 'off' : undefined, name: this.name, placeholder: this.placeholder, title: this.placeholder, maxlength: this.maxlength, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), pattern: this.pattern, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
                 if (el !== null)
                     this.input = el;
-            } }), this.hasDatalist() && (h("datalist", { id: this.datalistId }, this.datalistoptions.map(option => (h("option", { value: option, key: option }))))), this.displayCharacterLeft && this.maxlength > 0 && (h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength }))), h("slot", { key: '9b6286d6942ae75226f28d4274bf8454a9f422e8', name: "append-input" })));
+            } }), this.hasDatalist() && (h("datalist", { id: this.datalistId }, this.datalistoptions.map(option => (h("option", { value: option, key: option }))))), this.displayCharacterLeft && this.maxlength > 0 && (h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength }))), h("slot", { key: 'e6e209266d3525fb2dcd3eecf1dc054d2d7750b4', name: "append-input" })));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -3789,7 +3838,7 @@ const MgInputTitle = class {
     render() {
         const TagName = this.readonly ? 'span' : this.tagName;
         // \u00A0 represent a &nbsp;
-        return (h(TagName, { key: '2dda0af49de9de4324834cb429ad1798f1ff6f97', class: "mg-c-input-title", htmlFor: !this.isLegend && this.identifier, id: this.isLegend ? `${this.identifier}-title` : undefined }, h("slot", { key: '2a6ebb613b43b7baddc0f2499d10f0d0e7b42ab3' }), this.required && !this.readonly && (h("span", { class: "mg-c-input-title__required" }, "\u00A0", h("span", { class: "mg-u-is-asterisk" }, "*")))));
+        return (h(TagName, { key: '3042d844802f32bc180f7fa2a94b6d6b72e3fc85', class: "mg-c-input-title", htmlFor: !this.isLegend && this.identifier, id: this.isLegend ? `${this.identifier}-title` : undefined }, h("slot", { key: 'b95a542c64ab1deddcae5d2cf5185a5748303926' }), this.required && !this.readonly && (h("span", { class: "mg-c-input-title__required" }, "\u00A0", h("span", { class: "mg-u-is-asterisk" }, "*")))));
     }
     static get watchers() { return {
         "identifier": ["validateIdentifier"],
@@ -4008,7 +4057,7 @@ const MgInputToggle = class {
      */
     render() {
         var _a;
-        return (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 }, 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 }, h("span", { key: '0c96299db7e9eb0e6ef110c09f83c070696a5908', "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { key: 'ceb7d2bfbec1492e993131bf3f276210a3321a8b', name: "item-1" })), h("span", { key: '8060ab06e8055ad3cab05b6e964c734e69d6e2c2', "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { key: 'bc5aed352763ec5e12e650f5a3a9991de01003e1', name: "item-2" })))));
+        return (h("mg-input", { key: '560cd6ef008109c6dd8cee23d51c019b10feb7ff', label: this.label, helpText: this.helpText, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, readonlyValue: (_a = this.getCheckedItem(this.checked)) === null || _a === void 0 ? void 0 : _a.title, tooltip: !this.readonly && this.tooltip, tooltipPosition: this.tooltipPosition, errorMessage: this.errorMessage }, h("button", { key: '05bdaac2362591a6f9e250fc8703701fc5c91d2d', type: "button", role: "switch", "aria-checked": this.checked.toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-c-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.toggleChecked }, h("span", { key: '395086e1a986767072db4e10b3afc5b4cc650bd8', "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { key: 'c39a37141d822e8ddfad1505039379b0b14d6490', name: "item-1" })), h("span", { key: 'fcc28290602815ace1d755e7ea1eede7d6fbcc10', "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { key: '7788fc760df5c002ca621c439902ff44fb7226db', name: "item-2" })))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -4023,6 +4072,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) {
+        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 (Be(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 = 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 (h(Host, { key: 'c64a37d994cb6c3c388939b151588f2acf23e372', role: "listitem" }, this.parentMenu && (h("mg-menu-item", { "data-overflow-more": true, "data-size": this.parentMenu.size, ref: el => {
+                if (el)
+                    this.moreElementMenuItem = el;
+            } }, h("mg-icon", { icon: this.icon.icon, slot: "image" }), h("span", { class: { 'mg-u-visually-hidden': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), h("mg-menu", { direction: Direction.VERTICAL, label: this.messages.menuLabel, size: this.size })))));
+    }
+    get element() { return 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;
 
@@ -4065,7 +4382,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) => {
@@ -4093,13 +4410,21 @@ 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 = Direction.HORIZONTAL;
@@ -4152,22 +4477,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 === 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
@@ -4180,7 +4496,7 @@ const MgMenu = class {
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: '086439eeee2cbd3ee887bf047f04271de3e909b1', role: "list", "aria-label": this.label }, h("slot", { key: '332f520ff53aa203bfa299afce5251aa108e7e55' })));
+        return (h(Host, { key: 'cf7e1a8ea713af4019295c4147d3023223fc8a79', role: "list", "aria-label": this.label }, h("slot", { key: 'dcb316d5c13b3b01bfd0c7b891cbd3728a37fa11' })));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -4200,6 +4516,7 @@ const MgMenuItem = class {
         registerInstance(this, hostRef);
         this.statusChange = createEvent(this, "status-change", 7);
         this.itemLoaded = createEvent(this, "item-loaded", 7);
+        this.itemUpdated = createEvent(this, "item-updated", 7);
         /************
          * Internal *
          ************/
@@ -4453,10 +4770,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);
     }
@@ -4474,6 +4792,14 @@ const MgMenuItem = class {
                 [`${this.navigationButton}-chevron--rotate`]: this.expanded === true,
             } }, h("mg-icon", { icon: "chevron-down", size: "small" })))));
     }
+    /**
+     * Emit event when component is updated
+     */
+    componentShouldUpdate() {
+        return Ue(() => {
+            this.itemUpdated.emit();
+        });
+    }
     /**
      * Render
      * @returns HTML Element
@@ -4483,7 +4809,7 @@ const MgMenuItem = class {
             ['mg-c-menu-item__collapse-container']: true,
             ['mg-c-menu-item__collapse-container--first-level']: (this.isInMainMenu || this.isItemMore) && this.isDirection(Direction.HORIZONTAL),
         });
-        return (h(Host, { key: '8d1b7b3019b4d5c75d30489754ccb0a85244976d', role: this.isItemMore ? 'presentation' : 'listitem' }, this.displayPopover() ? (h("mg-popover", { display: this.expanded, placement: "bottom-start", arrowHide: true, "onDisplay-change": this.handlePopoverDisplay, identifier: this.getPopoverIdentifier() }, this.renderInteractiveElement(), h("div", { class: getContainerClasses(), slot: "content" }, this.renderSlot()))) : ([
+        return (h(Host, { key: 'a340655f5b46ed3019e1be29cfade7dfbc480ec2', role: this.isItemMore ? 'presentation' : 'listitem' }, this.displayPopover() ? (h("mg-popover", { display: this.expanded, placement: "bottom-start", arrowHide: true, "onDisplay-change": this.handlePopoverDisplay, identifier: this.getPopoverIdentifier() }, this.renderInteractiveElement(), h("div", { class: getContainerClasses(), slot: "content" }, this.renderSlot()))) : ([
             this.renderInteractiveElement(),
             h("div", { key: "vertical-container", class: getContainerClasses(), hidden: !this.expanded }, this.renderSlot()),
         ])));
@@ -4661,7 +4987,7 @@ const MgMessage = class {
         let role;
         if (!this.noAriaRole)
             role = this.variant === 'info' ? 'status' : 'alert';
-        return (h("div", { key: '426c30a149e1d0aef99c9b34ef8b09384b876e7f', id: this.identifier, class: this.classCollection.join(), role: role }, h("mg-card", { key: 'f8e00eaf99b8fcc828bbade2745293931da76619', variant: this.variant, "variant-style": "bar-left" }, h("span", { key: '94f7c67946985fafacfba078237926823315362f', class: "mg-c-message__icon" }, h("mg-icon", { key: '8e9b5c24bcb20ade8bb2a160a886973b9e9575fe', icon: this.getIcon() })), h("div", { key: '2104ace2484f87109c5dfa76cd3423216412fe28', class: "mg-c-message__content" }, h("span", { key: 'e1af1bc257beb682e9ad44627b4208e1ce52b28c', class: "mg-c-message__content-slot" }, h("slot", { key: '7688aed5413d37855f7704c625f4669400bdaaff' })), this.hasActions && h("span", { class: "mg-c-message__content-separator" }), this.hasActions && (h("span", { class: "mg-c-message__content-actions-slot" }, h("slot", { name: "actions" })))), this.closeButton && (h("span", { class: "mg-c-message__close-button" }, h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.message.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" })))))));
+        return (h("div", { key: '2a2a66325834f5072ee6e89de0bcc40c3e0e6753', id: this.identifier, class: this.classCollection.join(), role: role }, h("mg-card", { key: '573448d09a88125eecf6b0c482cc589602238fea', variant: this.variant, "variant-style": "bar-left" }, h("span", { key: '81295346d39fdfeda74b9cdab5c468cce52cbc43', class: "mg-c-message__icon" }, h("mg-icon", { key: 'b8d655f6cffd963d601b8001f6b066e9e6ca379f', icon: this.getIcon() })), h("div", { key: '831938b7c2be97edb8dd37d2f28af6798bb32896', class: "mg-c-message__content" }, h("span", { key: '2c2d085285ec3feca97fa046ae038c725d0f05db', class: "mg-c-message__content-slot" }, h("slot", { key: '1907d1d60816a5e2d53e6ae87e60f66df253208b' })), this.hasActions && h("span", { class: "mg-c-message__content-separator" }), this.hasActions && (h("span", { class: "mg-c-message__content-actions-slot" }, h("slot", { name: "actions" })))), this.closeButton && (h("span", { class: "mg-c-message__close-button" }, h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.message.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" })))))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -4834,14 +5160,14 @@ const MgModal = class {
      * @returns HTML Element
      */
     render() {
-        return (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 }, h("mg-card", { key: '18a6cf3cd69c667573489b051de9f15aa853784d' }, h("div", { key: '5e856e4a0ed625ffa1879d35efa27b5292ea3f11', class: "mg-c-modal__dialog" }, h("header", { key: 'fb701088cdd08194f68cf22920cd1d30ef24db0b', class: "mg-c-modal__header" }, this.closeButton && (h("span", { class: "mg-c-modal__close-button" }, h("mg-button", { identifier: `${this.identifier}-close-button`, "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose, ref: (el) => {
+        return (h("div", { key: 'a6d02e454214fe334e4fb9b7278b97b6713db306', role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), tabindex: "-1", "aria-labelledby": this.titleId, "aria-modal": "true", "aria-hidden": this.hide }, h("mg-card", { key: 'd192af0bfa6105f8ddb43ec73cfffb1d0469aca8' }, h("div", { key: '4f4f5b08ce39f20ca4f65686da294487d955ebd4', class: "mg-c-modal__dialog" }, h("header", { key: 'fd87c3a17a5b2783f4ffb79d23c6005cbf82af53', class: "mg-c-modal__header" }, this.closeButton && (h("span", { class: "mg-c-modal__close-button" }, h("mg-button", { 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);
                 }
-            } }, h("mg-icon", { icon: "cross" })))), h("h1", { key: '2b99fc7fc7440a3c9899a88f1bd138a36500df94', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), this.hasContent && (h("article", { class: "mg-c-modal__content" }, h("slot", { name: "content" }))), this.hasActions && (h("footer", { class: "mg-c-modal__footer" }, h("slot", { name: "actions" })))))));
+            } }, h("mg-icon", { icon: "cross" })))), h("h1", { key: '363962112d7d1db2f13cf91a7964588c4c2be71f', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), this.hasContent && (h("article", { class: "mg-c-modal__content" }, h("slot", { name: "content" }))), this.hasActions && (h("footer", { class: "mg-c-modal__footer" }, h("slot", { name: "actions" })))))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -5143,7 +5469,7 @@ const MgPanel = class {
      */
     render() {
         const headerId = `${this.identifier}-header`;
-        return (h("section", { key: '0f4e6da36c14880761294b950aef7273fb3b254e', class: this.classCollection.join(), id: this.identifier }, h("mg-card", { key: '3f604c637fb25eb7a236efb26d4c9da7c106cada' }, h("header", { key: '86b24eee8ab6a59789579ccee766e34ce1b60206', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), h("article", { key: '054a9aee122a1273aa431750daa15d2e5cfec316', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, h("slot", { key: 'b2daff9ba6ebe460c849f33e019bfd6583376451' })))));
+        return (h("section", { key: '75509a6a7fdba04cea71380d46f5d0b66bbc9602', class: this.classCollection.join(), id: this.identifier }, h("mg-card", { key: '8ec07f87babeae31db85b5181d5884119010e8ce' }, h("header", { key: '045e43ab54c95691e1c4b758504bffc995f63340', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), h("article", { key: '096d93e147c30c6ece4a6a3f5ee3acff05dc5143', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, h("slot", { key: '37f2d61903662b519e583eca0ca90c044386e539' })))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -7148,7 +7474,7 @@ const MgPopover = class {
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: 'd6ebc1c018e61ca61593905ec3e2535394bd53a7' }, h("slot", { key: 'a47ad7ad03453c782aea2994254c5cd98a1e3b92' }), h("slot", { key: '6ba88b5e57dc91474de84037c0d7a793755ed18f', name: "content" })));
+        return (h(Host, { key: '2faad932884b3c0a13e42f960470096ad7c2a4e9' }, h("slot", { key: '270b328576a6772d54d4cff826f2b7c63a9a6cda' }), h("slot", { key: '9fc11feb085c19562bdef1966135edee44799e21', name: "content" })));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -7201,7 +7527,7 @@ const MgPopoverContent = class {
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: 'e7344c0999adb28766413b2b5cdb2a682d0761ac' }, h("mg-card", { key: '04e73d6b68b89bd915a5ce9ebcc6a4c06742b6f1', class: this.classCollection.join() }, this.closeButton && (h("mg-button", { "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { icon: "cross" }))), h("div", { key: 'e2d30d49368722078c32edb5d95191fa2f03af22', class: "mg-c-popover-content__title" }, h("slot", { key: '0aee7ff2b06f57ff5256a2420c75ed987b48975b', name: "title" })), h("slot", { key: '2d2ec48ad494aeec5554572dbd3b1620856ac5ba', name: "content" })), h("slot", { key: '90d1985eeaf2d7424b9418d2e7ce26ef6bc35efe', name: "arrow" })));
+        return (h(Host, { key: 'e2ec01fc83727038047673eb89fa7a1fc6b90abe' }, h("mg-card", { key: '2ba199e78605edc19a6a0ddefb5a6749d80f6119', class: this.classCollection.join() }, this.closeButton && (h("mg-button", { "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { icon: "cross" }))), h("div", { key: '1b6275e0da818d3f5606a9a49974f85b2aedda8a', class: "mg-c-popover-content__title" }, h("slot", { key: '6205bd6ccfba59e5526388b2f24251f5ff6cb6dc', name: "title" })), h("slot", { key: 'f1bc97234ef01af903e1c507bc79805ad252f02e', name: "content" })), h("slot", { key: '5f1a1a4fd2b0e86384b2b3d46da2d408fcec2e4e', name: "arrow" })));
     }
     get element() { return getElement(this); }
 };
@@ -7478,7 +7804,7 @@ const MgTabs = class {
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: '0a0e2fdcb11b2dd79803cc114a429b2ef4cc3c89', class: this.classCollection.join() }, h("header", { key: '332ba66756df3c83dcec8daf2d83386f5f93a6bb', role: "tablist", "aria-label": this.label, class: "mg-c-tabs__header" }, this.tabs.map((tab, index) => (h("button", { key: tab.label, role: "tab", id: this.getElementId(this.identifier, index), class: {
+        return (h("div", { key: '6aa138347fc29ccb2ebadc034a50ad6daa61fcee', class: this.classCollection.join() }, h("header", { key: 'c5a350bd2e66f3fad27eec61d51dcd7aebd8e5c2', role: "tablist", "aria-label": this.label, class: "mg-c-tabs__header" }, this.tabs.map((tab, index) => (h("button", { key: tab.label, role: "tab", id: this.getElementId(this.identifier, index), class: {
                 [`${this.buttonTabBaseClass}`]: true,
                 [`${this.buttonTabBaseClass}--horizontal`]: true,
                 [`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasStatus(tab, Status.ACTIVE),
@@ -7573,7 +7899,7 @@ const MgTag = class {
      * @returns HTML Element
      */
     render() {
-        return (h("span", { key: 'c528cdd483287d210928ed3a993b491cdedd5b42', class: this.classCollection.join() }, h("slot", { key: '36403304976bb40067529c5cd0a810dca41055b1' })));
+        return (h("span", { key: 'f107390f5fb47c34faac9de08a08739499d0e409', class: this.classCollection.join() }, h("slot", { key: '04b346f71dff32aa32f52b96553154434ba231eb' })));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -7589,6 +7915,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}";
@@ -7668,7 +7995,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
@@ -7749,6 +8076,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);
@@ -7863,7 +8196,7 @@ const MgTooltip = class {
         // 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.
@@ -7888,7 +8221,7 @@ const MgTooltip = class {
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: '39e72edae07252421d527bfbeede585a27d2663c' }, h("slot", { key: '0402c8ea5aa2dea27e66a621e3d905356786dd27' }), h("slot", { key: 'e194462c062b565a6cb0e6330fa841a29746445d', name: "content" })));
+        return (h(Host, { key: '1e78ccb946f44e44298b967286535bd5cb74f00d' }, h("slot", { key: 'cbc51e25225889f1b151499e98ab903a7daed059' }), h("slot", { key: '3e45bf6b40fc00b245f36d1cead2cb2659786ef9', name: "content" })));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -7916,11 +8249,11 @@ const MgTooltipContent = class {
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: 'a26eb86dd6c3461563b2c532b1330f8897eb2da6', role: "tooltip" }, h("span", { key: 'eff274511b40c5e60429ebc387e32717854f7ffc', innerHTML: this.message, class: "mg-tooltip-content__message" }), h("slot", { key: '3b26eabf4471f34ae3997faa81e667341d26bee5', name: "arrow" })));
+        return (h(Host, { key: '81cff61f9230149078ace113a6661ae15ab6482e', role: "tooltip" }, h("span", { key: '11c2076354834ff3e51055197422726933154540', innerHTML: this.message, class: "mg-tooltip-content__message" }), h("slot", { key: 'ce2da739d5ac72a4ae3927a0b528a760f3f6422e', name: "arrow" })));
     }
 };
 MgTooltipContent.style = MgTooltipContentStyle0;
 
-export { MgActionMore as mg_action_more, MgBadge as mg_badge, MgButton as mg_button, MgCard as mg_card, MgCharacterLeft as mg_character_left, MgDetails as mg_details, MgDivider as mg_divider, MgForm as mg_form, MgIcon as mg_icon, MgIllustratedMessage as mg_illustrated_message, MgInput as mg_input, MgInputCheckbox as mg_input_checkbox, MgInputCheckboxPaginated as mg_input_checkbox_paginated, MgInputDate as mg_input_date, MgInputNumeric as mg_input_numeric, MgInputPassword as mg_input_password, MgInputRadio as mg_input_radio, MgInputSelect as mg_input_select, MgInputText as mg_input_text, MgInputTextarea as mg_input_textarea, MgInputTitle as mg_input_title, MgInputToggle as mg_input_toggle, MgMenu as mg_menu, MgMenuItem as mg_menu_item, MgMessage as mg_message, MgModal as mg_modal, MgPagination as mg_pagination, MgPanel as mg_panel, MgPopover as mg_popover, MgPopoverContent as mg_popover_content, MgSkipLinks as mg_skip_links, MgTabs as mg_tabs, MgTag as mg_tag, MgTooltip as mg_tooltip, MgTooltipContent as mg_tooltip_content };
+export { MgActionMore as mg_action_more, MgBadge as mg_badge, MgButton as mg_button, MgCard as mg_card, MgCharacterLeft as mg_character_left, MgDetails as mg_details, MgDivider as mg_divider, MgForm as mg_form, MgIcon as mg_icon, MgIllustratedMessage as mg_illustrated_message, MgInput as mg_input, MgInputCheckbox as mg_input_checkbox, MgInputCheckboxPaginated as mg_input_checkbox_paginated, MgInputDate as mg_input_date, MgInputNumeric as mg_input_numeric, MgInputPassword as mg_input_password, MgInputRadio as mg_input_radio, MgInputSelect as mg_input_select, MgInputText as mg_input_text, MgInputTextarea as mg_input_textarea, MgInputTitle as mg_input_title, MgInputToggle as mg_input_toggle, MgItemMore as mg_item_more, MgMenu as mg_menu, MgMenuItem as mg_menu_item, MgMessage as mg_message, MgModal as mg_modal, MgPagination as mg_pagination, MgPanel as mg_panel, MgPopover as mg_popover, MgPopoverContent as mg_popover_content, MgSkipLinks as mg_skip_links, MgTabs as mg_tabs, MgTag as mg_tag, MgTooltip as mg_tooltip, MgTooltipContent as mg_tooltip_content };
 
-//# sourceMappingURL=mg-action-more_35.entry.js.map
+//# sourceMappingURL=mg-action-more_36.entry.js.map