@mgdis/mg-components 5.7.0 → 5.8.1

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

@@ -3,227 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5e7ede97.js');
-
-const errors$1 = {
-	required: "This field is required.",
-	date: {
-		badInput: "The date format must be <span aria-hidden=\"true\">mm/dd/yyyy</span><span class=\"sr-only\">m m / d d / y y y y</span> and the date must be greater than {min}",
-		min: "The date cannot be earlier than {min}",
-		max: "The date cannot be later than {max}",
-		minMax: "The date must be between {min} and {max}"
-	},
-	numeric: {
-		min: "The value cannot be less than {min}",
-		max: "The value cannot be greater than {max}",
-		minMax: "The value must be between {min} et {max}"
-	}
-};
-const nbCharLeft$1 = "{counter} characters left.";
-const input$1 = {
-	select: {
-		placeholder: "Select a value"
-	}
-};
-const form$1 = {
-	required: "Fields with a <strong class=\"is-asterisk\">*</strong> are required",
-	requiredSingle: "Field with a <strong class=\"is-asterisk\">*</strong> is required",
-	allRequired: "All fields are required",
-	allRequiredSingle: "The field is required"
-};
-const message$1 = {
-	closeButton: "Close message"
-};
-const modal$1 = {
-	closeButton: "Close modal"
-};
-const pagination$1 = {
-	label: "Pagination",
-	page: "page",
-	pages: "pages",
-	nextPage: "Next page",
-	previousPage: "Previous page",
-	selectPage: "Select the page to display."
-};
-const panel$1 = {
-	editLabel: "Edit section title."
-};
-const skipLinks$1 = {
-	navLabel: "Quick access"
-};
-const general$1 = {
-	confirm: "Confirm",
-	cancel: "Cancel",
-	close: "Close",
-	next: "next",
-	previous: "previous"
-};
-const plusMenu$1 = {
-	moreLabel: "Additional menu",
-	badgeLabel: "Include notification(s)"
-};
-const actionMore$1 = {
-	label: "Actions"
-};
-const en = {
-	errors: errors$1,
-	nbCharLeft: nbCharLeft$1,
-	input: input$1,
-	form: form$1,
-	message: message$1,
-	modal: modal$1,
-	pagination: pagination$1,
-	panel: panel$1,
-	skipLinks: skipLinks$1,
-	general: general$1,
-	plusMenu: plusMenu$1,
-	actionMore: actionMore$1
-};
-
-const errors = {
-	required: "Ce champ est obligatoire.",
-	date: {
-		badInput: "Le format de la date doit être du type <span aria-hidden=\"true\">jj/mm/aaaa</span><span class=\"sr-only\">j j / m m / a a a a</span> et la date supérieure au {min}",
-		min: "La date ne peut pas être antérieure au {min}",
-		max: "La date ne peut pas être postérieure au {max}",
-		minMax: "La date doit être comprise entre le {min} et le {max}"
-	},
-	numeric: {
-		min: "La valeur ne peut pas être inférieure à {min}",
-		max: "La valeur ne peut pas être supérieure à {max}",
-		minMax: "La valeur doit être comprise entre {min} et {max}"
-	}
-};
-const nbCharLeft = "{counter} caractères disponibles.";
-const input = {
-	select: {
-		placeholder: "Sélectionnez une valeur"
-	}
-};
-const form = {
-	required: "Les champs marqués d'un <strong class=\"is-asterisk\">*</strong> sont obligatoires",
-	requiredSingle: "Le champ marqué d'un <strong class=\"is-asterisk\">*</strong> est obligatoire",
-	allRequired: "Tous les champs sont obligatoires",
-	allRequiredSingle: "Le champ est obligatoire"
-};
-const message = {
-	closeButton: "Fermer le message"
-};
-const modal = {
-	closeButton: "Fermer la modale"
-};
-const pagination = {
-	label: "Pagination",
-	page: "page",
-	pages: "pages",
-	nextPage: "Page suivante",
-	previousPage: "Page précédente",
-	selectPage: "Sélectionner la page à afficher."
-};
-const panel = {
-	editLabel: "Modifier le titre de la section."
-};
-const skipLinks = {
-	navLabel: "Accès rapide"
-};
-const general = {
-	confirm: "Valider",
-	cancel: "Annuler",
-	close: "Fermer",
-	next: "suivant",
-	previous: "précédent"
-};
-const plusMenu = {
-	moreLabel: "Menu complémentaire",
-	badgeLabel: "Notification(s) incluse(s)"
-};
-const actionMore = {
-	label: "Actions"
-};
-const fr = {
-	errors: errors,
-	nbCharLeft: nbCharLeft,
-	input: input,
-	form: form,
-	message: message,
-	modal: modal,
-	pagination: pagination,
-	panel: panel,
-	skipLinks: skipLinks,
-	general: general,
-	plusMenu: plusMenu,
-	actionMore: actionMore
-};
-
-/**
- * Format number to the locale currency
- *
- * @param {number} number number to format
- * @param {string} locale locale to apply
- * @param {string} currency currency to apply
- * @returns {string} formatted currency
- */
-const localeCurrency = (number, locale, currency) => {
-  return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(number);
-};
-/**
- * Format number to locale
- *
- * @param {number} number number to format
- * @param {string} locale locale to apply
- * @returns {string} formatted number
- */
-const localeNumber = (number, locale) => {
-  return new Intl.NumberFormat(locale).format(number);
-};
-/**
- * Date RegExp
- */
-const dateRegExp = /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/;
-/**
- * Locale date format
- *
- * @param {string} date date to format
- * @param {string} locale locale to apply
- * @returns {string} formatted date
- */
-const localeDate = (date, locale) => {
-  if (typeof date !== 'string' || date === '' || !dateRegExp.test(date)) {
-    return '';
-  }
-  return new Intl.DateTimeFormat(locale).format(new Date(date));
-};
-/**
- * Get locale and messages
- * We load the defined locale but for now we only support the first subtag for messages
- *
- * @param {HTMLElement} element element we need to get the language
- * @param {unknown} messages messages to use
- * @param {string} defaultLocale default messages locale
- * @returns {{ locale: string; messages: Record<string, unknown> }} messages object
- */
-const getLocaleMessages = (element, messages, defaultLocale) => {
-  // Get local
-  const closestLangAttribute = element.closest('[lang]');
-  const closestLang = Intl.NumberFormat.supportedLocalesOf(closestLangAttribute === null || closestLangAttribute === void 0 ? void 0 : closestLangAttribute.lang);
-  const locale = closestLang.length > 0 ? closestLang[0] : navigator.language || defaultLocale;
-  // Only keep first subtag
-  const localeSubtag = locale.split('-').shift();
-  // Return
-  return {
-    locale,
-    messages: messages[localeSubtag] || messages[defaultLocale],
-  };
-};
-
-const defaultLocale = 'en';
-const messages = { en, fr };
-/**
- * Get Intl object
- *
- * @param {HTMLElement} element element we need to get the language
- * @returns {{ locale: string; messages: Record<string, unknown> }} messages object
- */
-const initLocales = (element) => getLocaleMessages(element, messages, defaultLocale);
+const mgMenu_conf = require('./mg-menu.conf-9afe6571.js');
 
 /**
  * Available menu-item positions
@@ -244,32 +24,6 @@ var Status$1;
   Status["ACTIVE"] = "active";
 })(Status$1 || (Status$1 = {}));
 
-/**
- * Menu direction type
- */
-var Direction;
-(function (Direction) {
-  Direction["VERTICAL"] = "vertical";
-  Direction["HORIZONTAL"] = "horizontal";
-})(Direction || (Direction = {}));
-/**
- * More item type guard
- *
- * @param {unknown} element element to control
- * @returns {boolean} truthy if element is more-item
- */
-const isMoreItem = (element) => {
-  var _a, _b, _c;
-  const item = element;
-  return (item === undefined ||
-    (typeof item === 'object' &&
-      (typeof item.size === 'string' || typeof ((_a = item.mgIcon) === null || _a === void 0 ? void 0 : _a.icon) === 'string' || typeof ((_b = item.slotLabel) === null || _b === void 0 ? void 0 : _b.label) === 'string' || typeof ((_c = item.slotLabel) === null || _c === void 0 ? void 0 : _c.display) === 'boolean')));
-};
-/**
- * List of all possibles sizes
- */
-const sizes$2 = ['regular', 'medium', 'large'];
-
 /**
  * Create random ID
  *
@@ -338,12 +92,10 @@ class ClassList {
 /**
  * Check if all items are string
  *
- * @param {string[]} items items to check
+ * @param {unknown} items items to check
  * @returns {boolean} all items are string
  */
-const allItemsAreString = (items) => {
-  return items && items.every(item => typeof item === 'string');
-};
+const allItemsAreString = (items) => Array.isArray(items) && items.every(item => typeof item === 'string');
 /**
  * Check if element is a heading
  *
@@ -516,7 +268,7 @@ const MgActionMore = class {
    * @returns {void}
    */
   componentWillLoad() {
-    this.messages = initLocales(this.element).messages.actionMore;
+    this.messages = mgMenu_conf.initLocales(this.element).messages.actionMore;
     this.validateItems(this.items);
     this.validateButton(this.button);
     this.validateIcon(this.icon);
@@ -537,7 +289,7 @@ const MgActionMore = class {
           'mg-a11y-animation': true,
         } }, index.h("mg-icon", { icon: "chevron-down", size: "small" })));
     }
-    return (index.h(index.Host, { "data-mg-popover-guard": this.mgPopoverIdentifier }, index.h("span", { class: "mg-action-more" }, index.h("mg-popover", { identifier: this.mgPopoverIdentifier, display: this.expanded }, index.h("mg-button", { variant: this.button.variant, isIcon: this.button.isIcon, type: "button", label: buttonLabel, onClick: this.handleButton }, index.h("mg-icon", Object.assign({}, this.icon)), !this.button.isIcon && buttonContent), index.h("div", { slot: "content" }, index.h("mg-menu", { direction: Direction.VERTICAL, label: this.messages.label }, this.items.map(item => {
+    return (index.h(index.Host, { "data-mg-popover-guard": this.mgPopoverIdentifier }, index.h("span", { class: "mg-action-more" }, index.h("mg-popover", { identifier: this.mgPopoverIdentifier, display: this.expanded }, index.h("mg-button", { variant: this.button.variant, isIcon: this.button.isIcon, type: "button", label: buttonLabel, onClick: this.handleButton }, index.h("mg-icon", Object.assign({}, this.icon)), !this.button.isIcon && buttonContent), index.h("div", { slot: "content" }, index.h("mg-menu", { direction: mgMenu_conf.Direction.VERTICAL, label: this.messages.label }, this.items.map(item => {
       var _a;
       return (
       // eslint-disable-next-line react/jsx-no-bind
@@ -640,6 +392,7 @@ const mgButtonCss = ":host{display:inline-block;vertical-align:middle;max-width:
 const MgButton = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.disabledChange = index.createEvent(this, "disabled-change", 7);
     /************
      * Internal *
      ************/
@@ -738,6 +491,8 @@ const MgButton = class {
     else {
       this.classList.delete(this.classDisabled);
     }
+    // emit value update
+    this.disabledChange.emit(isDisabled);
   }
   loadingHandler(newValue) {
     // we add loading style if it newvalue is true else we remove it
@@ -828,7 +583,7 @@ const MgCharacterLeft = class {
    */
   componentWillLoad() {
     this.validateMaxlength(this.maxlength);
-    this.messages = initLocales(this.element).messages;
+    this.messages = mgMenu_conf.initLocales(this.element).messages;
   }
   /**
    * Render component
@@ -1035,7 +790,7 @@ const MgForm = class {
    */
   componentWillLoad() {
     // Get locales
-    this.messages = initLocales(this.element).messages;
+    this.messages = mgMenu_conf.initLocales(this.element).messages;
     // Get slotted mgButtons
     this.mgButtons = Array.from(this.element.querySelectorAll('mg-button'));
     // Set button form identifier
@@ -1066,7 +821,7 @@ const MgForm = class {
       // submit buttons should trigger form submition;
       if (['submit', null].includes(mgButton.getAttribute('type'))) {
         mgButton.addEventListener('click', () => {
-          this.form.dispatchEvent(new CustomEvent('submit', { bubbles: true }));
+          this.form.dispatchEvent(new SubmitEvent('submit', { bubbles: true }));
         });
       }
     });
@@ -1123,6 +878,7 @@ const icons = {
   'bell': () => (index.h("path", { fill: "currentColor", d: "M8 15.33a1.7 1.7 0 0 0 1.52-1.83h-3A1.7 1.7 0 0 0 8 15.33ZM13.13 11c-.46-.59-1.32-1.48-1.32-4.42a4.4 4.4 0 0 0-3.05-4.4v-.6A.85.85 0 0 0 8 .67a.85.85 0 0 0-.76.91v.6a4.4 4.4 0 0 0-3 4.44c0 2.94-.86 3.83-1.32 4.42a1 1 0 0 0-.2.63.85.85 0 0 0 .76.91h9.14a.85.85 0 0 0 .76-.91 1.05 1.05 0 0 0-.25-.67Z" })),
   'briefcase': () => (index.h("path", { fill: "currentColor", d: "M14 4.5h-3v-1c0-.55-.45-1-1-1H6c-.55 0-1 .45-1 1v1H2c-.55 0-1 .45-1 1v7c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-7c0-.55-.45-1-1-1Zm-8-1h4v1H6v-1Z" })),
   'briefcase-outline': () => (index.h("path", { fill: "currentColor", d: "M14 4.5h-3v-1c0-.55-.45-1-1-1H6c-.55 0-1 .45-1 1v1H2c-.55 0-1 .45-1 1v7c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-7c0-.55-.45-1-1-1Zm-8-1h4v1H6v-1Zm8 9H2v-7h12v7Z" })),
+  'building-outline': () => (index.h("path", { fill: "currentColor", d: "M4 2h8v12H9v-1a1 1 0 1 0-2 0v1H4V2Zm4 13h4a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h4ZM7 4H5v2h2V4Zm2 0h2v2H9V4Zm2 4H9v2h2V8ZM5 8h2v2H5V8Z" })),
   'calculator': () => (index.h("path", { fill: "currentColor", d: "M12.83.67H3.17a.5.5 0 0 0-.5.5v13.66a.5.5 0 0 0 .5.5h9.66a.5.5 0 0 0 .5-.5V1.17a.5.5 0 0 0-.5-.5ZM5.58 13.39a.29.29 0 0 1-.28.3H4.1a.29.29 0 0 1-.3-.28v-1.2a.29.29 0 0 1 .28-.3h1.2a.29.29 0 0 1 .3.28v1.2Zm0-3.28a.29.29 0 0 1-.3.3H4.1a.29.29 0 0 1-.3-.3V8.93a.29.29 0 0 1 .28-.3h1.2a.29.29 0 0 1 .3.28v1.2Zm3.29 3.28a.29.29 0 0 1-.3.3H7.38a.29.29 0 0 1-.3-.3v-1.18a.29.29 0 0 1 .3-.3h1.19a.29.29 0 0 1 .3.3Zm0-3.28a.32.32 0 0 1-.3.3H7.38a.32.32 0 0 1-.3-.3V8.93a.29.29 0 0 1 .3-.3h1.19a.29.29 0 0 1 .3.3Zm3.33 3.28a.29.29 0 0 1-.28.3h-1.25a.29.29 0 0 1-.3-.28V8.93a.29.29 0 0 1 .28-.3h1.25a.29.29 0 0 1 .3.28v4.48Zm0-7.15a.29.29 0 0 1-.3.3H4.1a.29.29 0 0 1-.3-.3V2.61a.29.29 0 0 1 .28-.3h7.82a.29.29 0 0 1 .3.28v3.65Z" })),
   'calendar': () => (index.h("path", { fill: "currentColor", d: "M14 3.5c0-.55-.45-1-1-1h-1v-1h-1v1H5v-1H4v1H3c-.55 0-1 .45-1 1v.98s0 .02.02.02H2v9c0 .55.45 1 1 1h10c.55 0 1-.45 1-1v-9h-.02s.02 0 .02-.02V3.5Zm-11 10v-8h10v8H3Z" })),
   'calendar-outline': () => (index.h("path", { fill: "currentColor", d: "M13 2.5h-1v-1h-1v1H5v-1H4v1H3c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h10c.55 0 1-.45 1-1v-10c0-.55-.45-1-1-1Zm-10 11v-8h10v8H3Zm0-9v-1h10v1H3Z" })),
@@ -1238,6 +994,7 @@ const icons = {
   'pen': () => (index.h("path", { fill: "currentColor", d: "M1.67,11.69v2.64h2.64l7.78-7.78-2.64-2.64L1.67,11.69ZM14.13,4.51c.27-.28,.27-.72,0-1h0l-1.65-1.64c-.28-.27-.72-.27-1,0h0l-1.28,1.29,2.64,2.64,1.29-1.29Z" })),
   'pen-circle': () => (index.h("path", { fill: "currentColor", d: "M8 .44C3.82.44.44 3.82.44 8S3.83 15.56 8 15.56s7.56-3.39 7.56-7.56C15.56 3.82 12.18.44 8 .44M5.47 12.19H3.62v-1.85l5.46-5.45 1.85 1.86-5.45 5.45Zm6.88-6.89-.9.9-1.86-1.85.9-.9c.19-.19.51-.19.7 0l1.16 1.15c.19.19.19.51 0 .7" })),
   'pen-fancy': () => (index.h("path", { fill: "currentColor", d: "M3.63,8.65c-.24,.07-.43,.26-.5,.5l-1.46,4.37,.11,.12,2.3-2.3c0-.06,0-.13,0-.19,0-.44,.35-.8,.79-.81,.44,0,.8,.35,.81,.79,0,.44-.35,.8-.79,.81,0,0-.01,0-.02,0h-.19l-2.3,2.3,.12,.11,4.37-1.46c.24-.07,.43-.26,.5-.5l.82-2.08-2.49-2.48-2.07,.82ZM10.8,2.35L6.27,7.28l2.42,2.42,4.94-4.52c2.1-1.86-.99-4.92-2.83-2.83Z" })),
+  'pen-fancy-files-outline': () => (index.h("path", { fill: "currentColor", d: "M12 2H6v10h6V8.946l.023-.058.085-.078.892-.813V12a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v.112a2.298 2.298 0 0 0-.974.66L12 2.8V2Zm1 4.643-1 .913-.566.515-1.528-1.524L12 4.275l.767-.832c.075-.085.153-.156.233-.215 1.167-.857 2.796.9 1.555 1.997L13 6.643ZM4 3H3v11.5a.5.5 0 0 0 .5.5H11v-1H4V3Zm4.238 4.41a.466.466 0 0 0-.316.315L7 10.477l.07.076 1.452-1.449v-.12a.51.51 0 0 1 .5-.51.51.51 0 0 1 .511.498.51.51 0 0 1-.499.51h-.133L7.45 10.931l.075.069 2.76-.92a.466.466 0 0 0 .317-.314l.518-1.31-1.573-1.562-1.308.516Z" })),
   'pen-fancy-outline': () => (index.h("path", { fill: "currentColor", d: "M12.24 1.67c-.49 0-1 .21-1.44.7L6.27 7.3l2.42 2.42 4.94-4.52c1.6-1.42.19-3.53-1.39-3.53ZM8.72 8.34 7.66 7.28l3.9-4.24c.22-.24.44-.36.69-.36.41 0 .87.34 1.03.78.14.37.04.7-.32 1.02L8.73 8.36ZM5.7 7.86l-2.08.82c-.24.08-.42.26-.5.5l-1.46 4.37.12.12.56.56.12.12 4.37-1.46c.24-.08.42-.26.5-.5l.81-2.08L5.7 7.87Zm-2.57 4.46L4 9.72c.03-.08.09-.15.17-.18l1.29-.51 1.52 1.52-.5 1.29c-.03.08-.1.15-.19.18l-2.6.87.95-.95c.06.02.12.04.19.04.44 0 .79-.35.79-.79s-.35-.79-.79-.79-.79.35-.79.79c0 .07.02.13.04.19l-.95.95Z" })),
   'phone': () => (index.h("path", { fill: "currentColor", d: "M13.97 10.62 11.2 9.43a.6.6 0 0 0-.69.17l-1.23 1.5A9.137 9.137 0 0 1 4.9 6.72l1.5-1.23c.21-.17.28-.45.17-.69L5.38 2.03a.589.589 0 0 0-.68-.34l-2.57.59a.59.59 0 0 0-.46.58c0 6.34 5.14 11.48 11.48 11.48.28 0 .52-.19.58-.46l.59-2.57a.595.595 0 0 0-.35-.68Z" })),
   'picture': () => (index.h("path", { fill: "currentColor", d: "M14.33 12.93V3.07a1.4 1.4 0 0 0-1.4-1.4H3.07a1.4 1.4 0 0 0-1.4 1.4v9.86a1.4 1.4 0 0 0 1.4 1.4h9.86a1.4 1.4 0 0 0 1.4-1.4ZM5.54 9.06l1.76 2.11L9.76 8l3.17 4.22H3.07Z" })),
@@ -1256,6 +1013,8 @@ const icons = {
     index.h("path", { key: "tags-2", fill: "currentColor", d: "M15 7.37 10.15 3a1.12 1.12 0 0 0-.77-.29H8.26l4.5 4.09a1.76 1.76 0 0 1 0 2.65L8.77 13a1.17 1.17 0 0 0 1.55 0L15 8.79a.94.94 0 0 0 0-1.42Z" }),
   ],
   'thumb-up': () => (index.h("path", { fill: "currentColor", d: "M2.11 14.36h1a.45.45 0 0 0 .45-.44V7.17a.45.45 0 0 0-.45-.44h-1a.44.44 0 0 0-.44.44v6.75a.44.44 0 0 0 .44.44Zm12.22-7a1.27 1.27 0 0 0-1.27-1.27H9.71l.61-2.91v-.2a1.07 1.07 0 0 0-.28-.68l-.68-.66-4.17 4.19a1.26 1.26 0 0 0-.37.9v6.36a1.27 1.27 0 0 0 1.27 1.27h5.06a1.24 1.24 0 0 0 1.17-.77l1.92-4.49a1.22 1.22 0 0 0 .09-.46V7.42Z" })),
+  'thumbtack': () => (index.h("path", { fill: "currentColor", d: "M8.91 2 7.71 5.594 2.364 7.09 5.274 10l-.707.706-1.687 1.687-.264.264-.09.09-.209.498L2 14l.755-.317.498-.21.09-.089.264-.264 1.687-1.687.706-.706 2.91 2.908 1.496-5.347L14 7.09 8.91 2Z" })),
+  'thumbtack-outline': () => (index.h("path", { fill: "currentColor", "fill-rule": "evenodd", d: "m5.273 10-2.91 2.91L2 14l1.09-.364L6 10.727l2.91 2.91 1.496-5.348L14 7.09 8.91 2 7.71 5.594 2.364 7.09 5.273 10Zm3.241-3.563-4.18 1.17 4.059 4.059 1.17-4.18 2.533-.845-2.737-2.737-.845 2.533Z" })),
   'trash': () => [
     index.h("path", { key: "trash-1", fill: "currentColor", d: "M3.27 14.17c0 .66.54 1.19 1.2 1.2h7l-.05-.02h.08c.64-.02 1.14-.56 1.12-1.2V4.32H3.27v9.85Zm5.97-7.12c0-.33.27-.6.6-.6s.6.27.6.6v5.3c0 .33-.27.6-.6.6s-.6-.27-.6-.6v-5.3Zm-3.5 0c0-.33.27-.59.6-.6.32.02.58.28.6.6v5.3c-.02.32-.28.58-.6.6a.645.645 0 0 1-.6-.6v-5.3Zm7.28-5.39h-2.6V.95a.28.28 0 0 0-.28-.28H5.87a.28.28 0 0 0-.28.28v.72H2.91a.28.28 0 0 0-.28.28V3.1c0 .15.12.28.28.28h10.11c.15 0 .28-.12.28-.28V1.94a.28.28 0 0 0-.28-.28Z" }),
     index.h("path", { key: "trash-2", fill: "currentColor", d: "M13,2h-2.9L9.9,1.6    C9.8,1.4,9.6,1.2,9.4,1.2H6.6c-0.2,0-0.4,0.1-0.5,0.3L5.8,2H2.9C2.7,2,2.5,2.2,2.5,2.4c0,0,0,0,0,0v0.8c0,0.2,0.2,0.4,0.4,0.4H13    c0.2,0,0.4-0.2,0.4-0.4V2.4C13.4,2.2,13.2,2,13,2z" }),
@@ -1266,6 +1025,10 @@ const icons = {
   'upload': () => (index.h("path", { fill: "currentColor", d: "M9.58 10.74V6.59a.31.31 0 0 1 .31-.3H12a.3.3 0 0 0 .21-.52l-4-4a.29.29 0 0 0-.42 0l-4 4a.3.3 0 0 0 .21.52h2.11a.31.31 0 0 1 .31.3v4.15a.3.3 0 0 0 .3.3h2.56a.3.3 0 0 0 .3-.3ZM14.33 14v-1a.29.29 0 0 0-.29-.3H2a.29.29 0 0 0-.29.3v1a.29.29 0 0 0 .29.29h12a.29.29 0 0 0 .33-.29Z" })),
   'user': () => (index.h("path", { fill: "currentColor", d: "M8 8.79a3.56 3.56 0 1 0-3.56-3.56A3.56 3.56 0 0 0 8 8.79Zm3.17.79H9.8a4.27 4.27 0 0 1-3.6 0H4.83a3.16 3.16 0 0 0-3.16 3.17v.4a1.18 1.18 0 0 0 1.18 1.18h10.3a1.18 1.18 0 0 0 1.18-1.18v-.4a3.16 3.16 0 0 0-3.16-3.17Z" })),
   'user-circle': () => (index.h("path", { fill: "currentColor", d: "M8 .62C3.95.61.66 3.9.65 7.95c0 4.05 3.28 7.34 7.33 7.35 4.04 0 7.33-3.26 7.35-7.3.02-4.05-3.25-7.36-7.3-7.38H8Zm0 .75c3.64 0 6.59 2.96 6.58 6.6V8c0 1.35-.41 2.66-1.19 3.76a2.713 2.713 0 0 0-2.66-2.37H9.54c-.98.46-2.1.46-3.08 0H5.28c-1.36 0-2.5 1.02-2.67 2.37A6.483 6.483 0 0 1 1.42 8a6.59 6.59 0 0 1 6.55-6.63H8ZM5 5.63c0-1.68 1.37-3.05 3.05-3.05 1.68 0 3.05 1.37 3.05 3.05 0 1.68-1.37 3.05-3.05 3.05H8c-1.66-.03-3-1.39-3-3.05Z" })),
+  'user-pen-fancy-outline': () => [
+    index.h("path", { fill: "currentColor", d: "M7.5 7a2.5 2.5 0 0 1 0-5 2.5 2.5 0 0 1 0 5Zm0-4C6.67 3 6 3.67 6 4.5S6.67 6 7.5 6 9 5.33 9 4.5 8.33 3 7.5 3ZM11.12 11.46l-.22.54-.3.77s-.04.09-.06.13c-.03.04-.06.07-.1.1-.05.04-.1.07-.16.08L7.52 14l-.07-.07 1.45-1.45h.13c.15 0 .27-.06.36-.16a.56.56 0 0 0 .1-.15c.01-.02.02-.04.03-.07v-.02s.01-.05.01-.08v-.03c0-.28-.23-.5-.51-.5-.28.01-.5.24-.5.51v.14l-.76.75-.14.13-.55.55-.07-.07.16-.48.1-.29.24-.71.42-1.27c.05-.16.17-.28.32-.32l1.31-.52 1.57 1.57ZM14.56 8.22l-2.05 1.87-.7.64-.06.05-.32.29-1.52-1.52.28-.31.06-.06.64-.7 1.88-2.04c1.16-1.31 3.11.61 1.79 1.78Z" }),
+    index.h("path", { fill: "currentColor", d: "M9 8H6c-2.21 0-4 1.79-4 4 0 .55.45 1 1 1h3.11l.33-1H3c0-1.66 1.34-3 3-3h3.05l.12-.13.71-.77C9.6 8.03 9.3 8 9 8Z" }),
+  ],
   'user-group': () => (index.h("path", { fill: "currentColor", d: "M13.15 4.12c-.81-.01-1.47.65-1.48 1.46 0 .82.65 1.47 1.46 1.48s1.47-.65 1.48-1.46-.65-1.47-1.46-1.48Zm-10.04.01a1.47 1.47 0 0 0-1.58 1.59c.06.71.62 1.28 1.34 1.34.81.07 1.52-.53 1.59-1.34.06-.81-.54-1.52-1.35-1.59Zm7.36.39c-.22-.84-.87-1.51-1.71-1.75-1.36-.41-2.8.36-3.22 1.72-.18.61-.13 1.27.14 1.85.41.9 1.33 1.48 2.32 1.45 1.41.01 2.56-1.14 2.57-2.55 0-.24-.03-.49-.1-.72Zm-.71 4h-.19c-.99.49-2.14.49-3.13 0h-.19c-1.46 0-2.64 1.18-2.64 2.64v2.69c1.23.93 2.74 1.47 4.39 1.47s3.17-.55 4.4-1.48v-2.68c0-1.46-1.18-2.64-2.64-2.64Zm5.52.25a7.282 7.282 0 0 1-1.65 3.91c-.08.1-.16.19-.25.28-.08.09-.17.18-.25.27v-.55h.03v-.72s.01-.07 0-.1v-.66c.01-1.25-.66-2.4-1.76-3 .27-.26.63-.41 1-.41h1.51c.63.01 1.17.41 1.37.98ZM2.86 11.16v1.52h.01v.55l-.28-.31c-.08-.08-.15-.16-.22-.24A7.238 7.238 0 0 1 .74 8.86c.16-.62.72-1.07 1.4-1.07h1.47c.37-.01.73.12 1.01.37-1.1.6-1.77 1.75-1.76 3Z" })),
   'user-plus': () => (index.h("path", { fill: "currentColor", d: "M14,3.33H12.65V2a.36.36,0,0,0-.35-.33h-.65A.36.36,0,0,0,11.3,2V3.33H10a.34.34,0,0,0-.33.34v.66a.34.34,0,0,0,.33.34H11.3V6a.37.37,0,0,0,.35.33h.65A.37.37,0,0,0,12.65,6V4.67H14a.34.34,0,0,0,.32-.34V3.67A.34.34,0,0,0,14,3.33ZM9.28,9.77h-.2a5.19,5.19,0,0,1-3.91,0H5A3,3,0,0,0,1.7,12.46h0v.72A1.27,1.27,0,0,0,3,14.33h8.25a1.26,1.26,0,0,0,1.36-1.14v-.68A3,3,0,0,0,9.37,9.76H9.28ZM7.13,3.7A2.64,2.64,0,1,1,4.5,6.34h0A2.64,2.64,0,0,1,7.13,3.7Z" })),
   'user-question-outline': () => (index.h("path", { fill: "currentColor", d: "M5.23 11.14c.86-.66 1.01-1.9.35-2.75s-1.9-1.01-2.75-.35a1.96 1.96 0 0 0 0 3.1c-.72.42-1.16 1.2-1.16 2.03v.8c0 .2.17.37.37.37h3.98c.2 0 .37-.17.37-.37v-.8c0-.83-.44-1.61-1.16-2.03ZM2.81 9.59c0-.67.55-1.22 1.22-1.22s1.22.55 1.22 1.22-.55 1.22-1.22 1.22-1.22-.55-1.22-1.22Zm2.83 4H2.41v-.42c0-.89.72-1.62 1.62-1.62s1.62.72 1.62 1.62v.42h-.01Zm7.13-11.93H8c-.86 0-1.56.7-1.56 1.56v7.16c0 .21.17.37.37.37.08 0 .16-.03.22-.07l1.49-1.12h4.25c.86 0 1.56-.7 1.56-1.56V3.22c0-.86-.7-1.56-1.56-1.56Zm.82 6.33c0 .45-.37.82-.82.82H8.4a.41.41 0 0 0-.22.07l-1 .75V3.22c0-.45.37-.82.82-.82h4.77c.45 0 .82.37.82.82v4.77Zm-2.8-.42c0 .23-.18.41-.41.41s-.41-.18-.41-.41.18-.41.41-.41c.23 0 .41.18.41.41Zm-.41-4.34c-.83 0-1.5.67-1.5 1.5 0 .23.18.41.41.41s.41-.18.41-.41c0-.38.31-.68.69-.68.38 0 .68.31.68.69 0 .38-.31.68-.68.68-.23 0-.41.18-.41.41v.44c0 .23.18.41.41.41s.41-.18.41-.41v-.09c.8-.23 1.26-1.06 1.04-1.85-.18-.65-.77-1.09-1.44-1.09Z" })),
@@ -1546,10 +1309,11 @@ const mgInputCheckboxCss = ":host{display:block}.mg-input{display:flex;align-ite
 /**
  * type CheckboxItem validation function
  *
- * @param {CheckboxItem} item Checkbox item
- * @returns {boolean} match item expectations
+ * @param {unknown} items Checkbox item
+ * @returns {boolean} match item type
  */
-const isCheckboxItem = (item) => typeof item === 'object' && typeof item.title === 'string' && (item.value === null || typeof item.value === 'boolean') && item.value !== undefined;
+const isCheckboxItems = (items) => Array.isArray(items) &&
+  items.every(item => typeof item === 'object' && typeof item.title === 'string' && (item.value === null || typeof item.value === 'boolean') && item.value !== undefined);
 const MgInputCheckbox = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
@@ -1630,7 +1394,7 @@ const MgInputCheckbox = class {
     this.checkboxItems = [];
   }
   validateValue(newValue) {
-    if (newValue && newValue.every(item => isCheckboxItem(item))) {
+    if (isCheckboxItems(newValue)) {
       this.checkboxItems = newValue.map((item, index) => ({
         id: `${this.identifier}_${index.toString()}`,
         title: item.title,
@@ -1673,7 +1437,7 @@ const MgInputCheckbox = class {
    */
   componentWillLoad() {
     // Get locales
-    this.messages = initLocales(this.element).messages;
+    this.messages = mgMenu_conf.initLocales(this.element).messages;
     // Validate
     this.validateValue(this.value);
     // Check validity when component is ready
@@ -1794,12 +1558,12 @@ 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}', localeDate(this.min, this.locale)).replace('{max}', localeDate(this.max, this.locale));
+          this.errorMessage = this.messages.errors.date[inputError].replace('{min}', mgMenu_conf.localeDate(this.min, this.locale)).replace('{max}', mgMenu_conf.localeDate(this.max, this.locale));
         }
         // wrong date format
         // element.validity.badInput is default error message
         else {
-          this.errorMessage = this.messages.errors.date.badInput.replace('{min}', ((_a = this.min) === null || _a === void 0 ? void 0 : _a.length) > 0 ? localeDate(this.min, this.locale) : localeDate('1900-01-01', this.locale));
+          this.errorMessage = this.messages.errors.date.badInput.replace('{min}', ((_a = this.min) === null || _a === void 0 ? void 0 : _a.length) > 0 ? mgMenu_conf.localeDate(this.min, this.locale) : mgMenu_conf.localeDate('1900-01-01', this.locale));
         }
       }
     };
@@ -1825,7 +1589,7 @@ 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' || !dateRegExp.test(newValue))) {
+    if (newValue !== undefined && newValue !== null && (typeof newValue !== 'string' || !mgMenu_conf.dateRegExp.test(newValue))) {
       throw new Error("<mg-input-date> props 'value' doesn't match pattern: yyyy-mm-dd");
     }
     else {
@@ -1843,7 +1607,7 @@ const MgInputDate = class {
     }
   }
   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' && dateRegExp.test(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' && mgMenu_conf.dateRegExp.test(newValue)))) {
       throw new Error("<mg-input-date> props 'min/max' doesn't match pattern: yyyy-mm-dd");
     }
   }
@@ -1867,7 +1631,7 @@ const MgInputDate = class {
    */
   componentWillLoad() {
     // Get locales
-    const locales = initLocales(this.element);
+    const locales = mgMenu_conf.initLocales(this.element);
     this.locale = locales.locale;
     this.messages = locales.messages;
     // Validate
@@ -1887,7 +1651,7 @@ const MgInputDate = class {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (index.h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: undefined, disabled: this.disabled, value: this.value, readonlyValue: localeDate(this.value, this.locale), tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, index.h("input", { type: "date", class: "mg-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, onInput: this.handleInput, onBlur: this.handleBlur, ref: el => {
+    return (index.h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: undefined, disabled: this.disabled, value: this.value, readonlyValue: mgMenu_conf.localeDate(this.value, this.locale), tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, index.h("input", { type: "date", class: "mg-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, onInput: this.handleInput, onBlur: this.handleBlur, ref: el => {
         if (el !== null)
           this.input = el;
       } })));
@@ -2019,7 +1783,7 @@ const MgInputNumeric = class {
      * @param {number} value value to format
      * @returns {string} formated local value
      */
-    this.formatValue = (value) => (this.type === 'currency' ? localeCurrency(value, this.locale, this.currency) : localeNumber(value, this.locale));
+    this.formatValue = (value) => (this.type === 'currency' ? mgMenu_conf.localeCurrency(value, this.locale, this.currency) : mgMenu_conf.localeNumber(value, this.locale));
     /**
      * Validate append slot
      *
@@ -2137,7 +1901,7 @@ const MgInputNumeric = class {
    */
   componentWillLoad() {
     // Get locales
-    const locales = initLocales(this.element);
+    const locales = mgMenu_conf.initLocales(this.element);
     this.locale = locales.locale;
     this.messages = locales.messages;
     // Validate
@@ -2274,7 +2038,7 @@ const MgInputPassword = class {
    */
   componentWillLoad() {
     // Get locales
-    this.messages = initLocales(this.element).messages;
+    this.messages = mgMenu_conf.initLocales(this.element).messages;
     // Check validity when component is ready
     // return a promise to process action only in the FIRST render().
     // https://stenciljs.com/docs/component-lifecycle#componentwillload
@@ -2442,7 +2206,7 @@ const MgInputRadio = class {
    */
   componentWillLoad() {
     // Get locales
-    this.messages = initLocales(this.element).messages;
+    this.messages = mgMenu_conf.initLocales(this.element).messages;
     // Validate
     this.validateItems(this.items);
     // Check validity when component is ready
@@ -2479,10 +2243,24 @@ const mgInputSelectCss = ":host{display:block}.mg-input{display:flex;align-items
 /**
  * Check if item is a well configured option
  *
- * @param {SelectOption} option select option
+ * @param {unknown} option select option
  * @returns {boolean} select option type is valid
  */
 const isOption$1 = (option) => typeof option === 'object' && typeof option.title === 'string';
+/**
+ * Check if items[] is SelectOption
+ *
+ * @param {unknown[]} items select option
+ * @returns {boolean} select option array type is valid
+ */
+const allItemsAreOptions = (items) => Array.isArray(items) && items.every(item => isOption$1(item));
+/**
+ * Check if item is a well configured optgroup
+ *
+ * @param {unknown} optgroup select option
+ * @returns {boolean} select optgroup type is valid
+ */
+const isOptGroup = (optgroup) => typeof optgroup === 'object' && typeof optgroup.group === 'string' && allItemsAreOptions(optgroup.options);
 /**
  * Group options
  *
@@ -2521,17 +2299,50 @@ const MgInputSelect = class {
     this.hasDisplayedError = false;
     /**
      * Handle input event
+     *
+     * @returns {void}
      */
     this.handleInput = () => {
-      this.checkValidity();
-      if (this.hasDisplayedError) {
+      this.updateValue();
+      if (this.hasDisplayedError)
         this.setErrorMessage();
+    };
+    /**
+     * Method to compare item.title with input.value
+     *
+     * @param {SelectOption} item item to compare with
+     * @returns {boolean} truthy if input.value is an item
+     */
+    this.isInputValue = (item) => { var _a; return item.title === ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value); };
+    /**
+     * value props setter
+     *
+     * @param {MgInputSelect['value']} newValue value to update with
+     * @returns {void}
+     */
+    this.setValue = (newValue) => {
+      this.checkValidity();
+      this.value = newValue;
+    };
+    /**
+     * Update value from input.value
+     *
+     * @returns {void}
+     */
+    this.updateValue = () => {
+      if (this.input.value === '') {
+        this.setValue(null);
+      }
+      else if (allItemsAreString(this.items) && this.items.includes(this.input.value)) {
+        this.setValue(this.input.value);
       }
-      if (this.input.value !== '') {
-        this.value = allItemsAreString(this.items) ? this.input.value : this.items.find(item => item.title === this.input.value).value;
+      else if (allItemsAreOptions(this.items) && typeof this.input.value === 'string' && this.items.some(this.isInputValue)) {
+        this.setValue(this.items.find(this.isInputValue).value);
       }
       else {
-        this.value = null;
+        // before set newValue with push to options[] the unknown input.value with a disable satus
+        this.options.push({ title: this.input.value, value: this.input.value, disabled: true });
+        this.setValue(this.input.value);
       }
     };
     /**
@@ -2540,12 +2351,18 @@ const MgInputSelect = class {
     this.handleBlur = () => {
       this.displayError();
     };
+    /**
+     * Input value is disabled
+     *
+     * @returns {boolean} truthy if input value is disabled
+     */
+    this.isDisabledValue = () => { var _a; return allItemsAreOptions(this.options) && ((_a = this.options.find(this.isInputValue)) === null || _a === void 0 ? void 0 : _a.disabled) === true; };
     /**
      * Check if input is valid
      */
     this.checkValidity = () => {
       var _a;
-      this.valid = this.readonly || this.disabled || (((_a = this.input) === null || _a === void 0 ? void 0 : _a.checkValidity) !== undefined ? this.input.checkValidity() : true);
+      this.valid = !this.isDisabledValue() && (this.readonly || this.disabled || (((_a = this.input) === null || _a === void 0 ? void 0 : _a.checkValidity) !== undefined ? this.input.checkValidity() : true));
       this.invalid = !this.valid;
       // We need to send valid event even if it is the same value
       this.inputValid.emit(this.valid);
@@ -2560,6 +2377,13 @@ const MgInputSelect = class {
         this.errorMessage = this.messages.errors.required;
       }
     };
+    /**
+     * Render option
+     *
+     * @param {SelectOption} option to render
+     * @returns {HTMLElement} render option
+     */
+    this.renderOption = (option) => (index.h("option", { key: option.title, value: option.title, selected: JSON.stringify(this.value) === JSON.stringify(option.value), disabled: option.disabled }, option.title));
     this.value = undefined;
     this.items = undefined;
     this.identifier = undefined;
@@ -2584,9 +2408,13 @@ const MgInputSelect = class {
     this.valueExist = undefined;
     this.readonlyValue = undefined;
   }
-  handleValue(newValue) {
-    if (newValue !== null) {
-      this.readonlyValue = allItemsAreString(this.items) ? this.input.value : this.items.find(item => item.value === newValue).title;
+  validateValue(newValue) {
+    var _a, _b;
+    if (allItemsAreString(this.items) && typeof newValue === 'string') {
+      this.readonlyValue = Boolean((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) ? this.input.value : newValue;
+    }
+    else if (allItemsAreOptions(this.items)) {
+      this.readonlyValue = (_b = this.items.find(item => item.value === newValue)) === null || _b === void 0 ? void 0 : _b.title;
     }
     else {
       this.readonlyValue = null;
@@ -2600,14 +2428,15 @@ const MgInputSelect = class {
     }
     // String array
     else if (allItemsAreString(newValue)) {
-      this.valueExist = newValue.includes(this.value);
-      this.options = newValue.map((item) => ({ title: item, value: item }));
+      if (typeof this.value === 'string')
+        this.valueExist = newValue.includes(this.value);
+      this.options = newValue.map(item => ({ title: item, value: item }));
     }
     // Object array
-    else if (newValue.every(item => isOption$1(item))) {
+    else if (allItemsAreOptions(newValue)) {
       this.valueExist = newValue.map(item => item.value).includes(this.value);
       // Grouped object options
-      if (newValue.some(item => item.group !== undefined)) {
+      if (newValue.some(item => Boolean(item.group))) {
         this.options = newValue.reduce(groupOptions, []);
       }
       // Standart object options
@@ -2649,9 +2478,10 @@ const MgInputSelect = class {
    */
   componentWillLoad() {
     // Get locales
-    this.messages = initLocales(this.element).messages;
+    this.messages = mgMenu_conf.initLocales(this.element).messages;
     // Validate
     this.validateItems(this.items);
+    this.validateValue(this.value);
     // Set default placeholder
     if (this.placeholder === undefined || this.placeholder === '') {
       this.placeholder = this.messages.input.select.placeholder;
@@ -2669,15 +2499,15 @@ const MgInputSelect = class {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (index.h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: this.readonlyValue, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, index.h("select", { class: "mg-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled, required: this.required, onInput: this.handleInput, onBlur: this.handleBlur, ref: el => {
+    return (index.h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: undefined, readonlyValue: this.readonlyValue, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, index.h("select", { class: "mg-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled, required: this.required, 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 => option.group !== undefined ? (index.h("optgroup", { label: option.group }, option.options.map(optgroup => (index.h("option", { key: optgroup.title, value: optgroup.title, selected: JSON.stringify(this.value) === JSON.stringify(optgroup.value), disabled: optgroup.disabled }, optgroup.title))))) : (index.h("option", { value: option.title, selected: JSON.stringify(this.value) === JSON.stringify(option.value), disabled: option.disabled }, option.title))))));
+    index.h("option", { value: "", disabled: this.placeholderDisabled && this.valueExist }, this.placeholder)), this.options.map(option => isOptGroup(option) ? index.h("optgroup", { label: option.group }, option.options.map(this.renderOption)) : isOption$1(option) && this.renderOption(option)))));
   }
   get element() { return index.getElement(this); }
   static get watchers() { return {
-    "value": ["handleValue"],
+    "value": ["validateValue"],
     "items": ["validateItems"],
     "required": ["handleValidityChange"],
     "readonly": ["handleValidityChange"],
@@ -2865,7 +2695,7 @@ const MgInputText = class {
    */
   componentWillLoad() {
     // Get locales
-    this.messages = initLocales(this.element).messages;
+    this.messages = mgMenu_conf.initLocales(this.element).messages;
     this.characterLeftId = `${this.identifier}-character-left`;
     // Validate
     this.validateIcon(this.icon);
@@ -3055,7 +2885,7 @@ const MgInputTextarea = class {
    */
   componentWillLoad() {
     // Get locales
-    this.messages = initLocales(this.element).messages;
+    this.messages = mgMenu_conf.initLocales(this.element).messages;
     this.characterLeftId = `${this.identifier}-character-left`;
     // Validate
     this.validateDisplayCharacterLeft(this.displayCharacterLeft);
@@ -3323,158 +3153,6 @@ const MgInputToggle = class {
 };
 MgInputToggle.style = mgInputToggleCss;
 
-/**
- * MgMenuItem type guard
- *
- * @param {HTMLElement} element element to control type
- * @returns {boolean} truthy if element is mg-menu-item
- */
-const isMgMenuItem = (element) => element.nodeName === 'MG-MENU-ITEM';
-var OverflowBehaviorElements;
-(function (OverflowBehaviorElements) {
-  OverflowBehaviorElements["MORE"] = "data-overflow-more";
-  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
-     *
-     * @returns {void}
-     */
-    this.disconnect = () => {
-      this.resizeObserver.disconnect();
-    };
-    /************
-     * Internal *
-     ************/
-    /**
-     * run overflow behavior
-     *
-     * @param {number} width width of the container
-     * @returns {void}
-     */
-    this.run = (width) => {
-      if (this.moreElement === undefined) {
-        // set moreElement
-        this.moreElement = this.render();
-        this.moreElement.setAttribute(OverflowBehaviorElements.MORE, '');
-        // set children
-        this.children = Array.from(this.element.children);
-        let moreElementChildren;
-        const allowedElements = ['MG-MENU-ITEM', 'MG-BUTTON'];
-        if (isMgMenuItem(this.moreElement)) {
-          moreElementChildren = Array.from(this.moreElement.querySelector('mg-menu').children).filter(element => allowedElements.includes(element.nodeName));
-        }
-        this.children.forEach((child, index) => {
-          child.setAttribute(OverflowBehaviorElements.BASE_INDEX, `${index}`);
-          if (child.getAttribute(OverflowBehaviorElements.MORE) === null) {
-            // set moreElement children
-            moreElementChildren[index].setAttribute(OverflowBehaviorElements.PROXY_INDEX, `${index}`);
-          }
-        });
-      }
-      this.updateDisplayedItems(width);
-    };
-    /**
-     * Update displayed items in container from a given available space
-     *
-     * @param {number} availableWidth available width in container to display child items
-     * @returns {void}
-     */
-    this.updateDisplayedItems = (availableWidth) => {
-      this.restoreItems();
-      const acc = { accWidth: 0, previousItem: null };
-      this.children.forEach((child) => {
-        acc.accWidth += child.offsetWidth;
-        const isPreviousItemHidden = acc.previousItem !== null && 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 {number} cumulateWidth previous sibling elements cumulate width + item width
-     * @param {HTMLElement} item item HTML element
-     * @param {number} availableWidth container available width
-     * @returns {boolean} 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 element to match with 'MORE' element
-     * @returns {boolean} truthy if element is the 'MORE' element
-     */
-    this.isMoreElement = (element) => element.getAttribute(OverflowBehaviorElements.MORE) !== null;
-    /**
-     * Toggle display item element
-     *
-     * @param {HTMLElement} item item to control
-     * @param {boolean} isHidden is item hidden
-     * @returns {void}
-     */
-    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.moreElement.querySelector(`[${OverflowBehaviorElements.PROXY_INDEX}="${mgActionMenuindex}"]`), !isHidden);
-      }
-    };
-    /**
-     * Toggle element's hidde attribute
-     *
-     * @param {Element} element element to toggle
-     * @param {boolean} isHidden element is hidden
-     * @returns {void}
-     */
-    this.toggleElement = (element, isHidden) => {
-      if (isHidden)
-        element.setAttribute('hidden', '');
-      else
-        element.removeAttribute('hidden');
-    };
-    /**
-     * Remove hidden attributes on all items
-     *
-     * @returns {void}
-     */
-    this.restoreItems = () => {
-      this.children.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);
-    }
-  }
-}
-
 const mgMenuCss = ".sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}:host{display:flex;background-color:hsl(var(--mg-menu-background-color-hsl, var(--color-light)))}:host([direction=vertical]){flex-direction:column;height:100%;overflow-y:auto}";
 
 const MgMenu = class {
@@ -3486,6 +3164,9 @@ const MgMenu = class {
     this.name = 'mg-menu';
     this.menuItems = [];
     this.focusedMenuItem = 0;
+    /*************
+     * Methods *
+     *************/
     /**
      * Close matching menu-item
      *
@@ -3498,68 +3179,74 @@ const MgMenu = class {
         item.expanded = false;
       }
     };
-    /*************
-     * Methods *
-     *************/
     /**
-     * Store menu-items on component init and add listeners
+     * get mg-item-more element
+     *
+     * @returns {HTMLMgItemMoreElement} mg-item-more element
+     */
+    this.getItemMore = () => this.element.querySelector('mg-item-more');
+    /**
+     * get mg-item-more >>> mg-menu-item element
+     *
+     * @returns {HTMLMgMenuItemElement} mg-item-more >>> mg-menu-item element
+     */
+    this.getItemMoreMenuItem = () => { var _a, _b; return (_b = (_a = this.getItemMore()) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('mg-menu-item'); };
+    /**
+     * Set item listend
      *
+     * @param {HTMLMgMenuItemElement} item mg-menu-item element
+     * @param {MgMenu['focusedMenuItem']} index number
      * @returns {void}
      */
-    this.initMenuItemsListeners = () => {
-      // add listeners on menu item and edit index
-      this.menuItems.forEach((item, menuItemIndex) => {
-        ['click', 'focus'].forEach(trigger => {
-          (item.shadowRoot.querySelector('button') || item.shadowRoot.querySelector('a')).addEventListener(trigger, () => {
-            this.focusedMenuItem = menuItemIndex;
-            // reset expanded on previous active menu item
-            this.menuItems.forEach((item, index) => {
-              this.closeMenuItem(item, index !== this.focusedMenuItem);
-            });
+    this.setItemListener = (item, index) => {
+      ['click', 'focus'].forEach(trigger => {
+        (item.shadowRoot.querySelector('button') || item.shadowRoot.querySelector('a')).addEventListener(trigger, () => {
+          this.focusedMenuItem = index;
+          // reset expanded on previous active menu item
+          (Boolean(this.getItemMoreMenuItem()) ? [...this.menuItems, this.getItemMoreMenuItem()] : this.menuItems).forEach((item, index) => {
+            this.closeMenuItem(item, index !== this.focusedMenuItem);
           });
         });
       });
     };
     /**
-     * render mg-menu-more
+     * Store menu-items on component init and add listeners
      *
-     * @returns {HTMLElement} formated mg-menu-item element
+     * @returns {void}
      */
-    this.renderMgMenuMore = () => {
-      const moreElement = this.element.shadowRoot.querySelector(`[${OverflowBehaviorElements.MORE}]`);
-      this.menuItems.forEach((child) => {
-        const proxy = child.cloneNode(true);
-        moreElement.querySelector('mg-menu').appendChild(proxy);
-      });
-      const allMenuItem = Array.from(this.element.querySelectorAll('mg-menu-item:not([data-overflow-more])'));
-      Array.from(moreElement.querySelectorAll('mg-menu-item:not([data-overflow-more])')).forEach((proxy, index) => {
-        // manage click on proxy to mirror it on initial element
-        proxy.addEventListener('click', () => {
-          (allMenuItem[index].shadowRoot.querySelector('a') || allMenuItem[index].shadowRoot.querySelector('button')).dispatchEvent(new MouseEvent('click', { bubbles: true }));
-        });
-        // manage status change miror in proxy
-        allMenuItem[index].addEventListener('status-change', (event) => {
-          proxy.setAttribute('status', event.detail);
-        });
+    this.initMenuItemsListeners = () => {
+      // add listeners on menu item and edit index
+      this.menuItems.forEach((item, index) => {
+        this.setItemListener(item, index);
       });
-      this.element.appendChild(moreElement);
-      return this.element.querySelector(`[${OverflowBehaviorElements.MORE}]`);
     };
     /**
-     * Render mg-menu-item more element for overflow behavior
+     * Handle item-loaded event on mg-item-more element
      *
-     * @returns {HTMLElement} rendered mg-menu-item more element
+     * @returns {void}
      */
-    this.renderMgMenuItemMore = () => {
-      var _a, _b, _c, _d, _e, _f, _g;
-      return (index.h("mg-menu-item", { "data-overflow-more": true }, index.h("mg-icon", { icon: ((_b = (_a = this.moreitem) === null || _a === void 0 ? void 0 : _a.mgIcon) === null || _b === void 0 ? void 0 : _b.icon) || 'ellipsis-vertical', slot: "image" }), index.h("span", { class: { 'sr-only': !((_d = (_c = this.moreitem) === null || _c === void 0 ? void 0 : _c.slotLabel) === null || _d === void 0 ? void 0 : _d.display) }, slot: "label" }, ((_f = (_e = this.moreitem) === null || _e === void 0 ? void 0 : _e.slotLabel) === null || _f === void 0 ? void 0 : _f.label) || this.messages.moreLabel), index.h("mg-menu", { direction: Direction.VERTICAL, label: this.messages.moreLabel, size: (_g = this.moreitem) === null || _g === void 0 ? void 0 : _g.size })));
+    this.handleItemLoaded = () => {
+      this.setItemListener(this.getItemMoreMenuItem(), this.menuItems.length);
+    };
+    /**
+     * render mg-item-more
+     *
+     * @returns {void}
+     */
+    this.renderMgItemMore = () => {
+      // /!\ 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);
     };
     this.label = undefined;
-    this.direction = Direction.HORIZONTAL;
-    this.moreitem = undefined;
+    this.direction = mgMenu_conf.Direction.HORIZONTAL;
+    this.itemmore = undefined;
     this.size = 'regular';
     this.isChildMenu = undefined;
-    this.hasOverflow = false;
   }
   validateLabel(newValue) {
     if (newValue === undefined) {
@@ -3567,21 +3254,18 @@ const MgMenu = class {
     }
   }
   validateDirection(newValue) {
-    if (![Direction.VERTICAL, Direction.HORIZONTAL].includes(newValue)) {
-      throw new Error(`<${this.name}> prop "direction" must be one of: ${Direction.HORIZONTAL}, ${Direction.VERTICAL}.`);
+    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}.`);
     }
   }
-  validateMoreItem(newValue) {
-    if (newValue !== undefined && this.direction !== Direction.HORIZONTAL) {
-      throw new Error(`<${this.name}> prop "moreitem" must be paired with direction ${Direction.HORIZONTAL}.`);
-    }
-    else if (newValue !== undefined && !isMoreItem(newValue)) {
-      throw new Error(`<${this.name}> prop "moreitem" must match MoreItemType.`);
+  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}.`);
     }
   }
   validateSize(newValue) {
-    if (!sizes$2.includes(newValue)) {
-      throw new Error(`<${this.name}> prop "size" must be one of: ${sizes$2.join(', ')}.`);
+    if (!mgMenu_conf.sizes.includes(newValue)) {
+      throw new Error(`<${this.name}> prop "size" must be one of: ${mgMenu_conf.sizes.join(', ')}.`);
     }
   }
   /*************
@@ -3593,11 +3277,9 @@ const MgMenu = class {
    * @returns {void}
    */
   componentWillLoad() {
-    this.messages = initLocales(this.element).messages.plusMenu;
-    // validation
     this.validateDirection(this.direction);
     this.validateLabel(this.label);
-    this.validateMoreItem(this.moreitem);
+    this.validateItemMore(this.itemmore);
     this.validateSize(this.size);
   }
   /**
@@ -3613,53 +3295,57 @@ const MgMenu = class {
       // store all menu-items
       this.menuItems = Array.from(this.element.children).filter(child => child.nodeName === 'MG-MENU-ITEM');
       this.isChildMenu = this.element.closest('mg-menu-item') !== null;
-      this.hasOverflow = this.direction === Direction.HORIZONTAL && !this.isChildMenu;
-      if (this.hasOverflow && isMoreItem(this.moreitem))
-        this.overflowBehavior = new OverflowBehavior(this.element, this.renderMgMenuMore);
+      // add mg-item-more to manage OverflowBehavior
+      if (this.direction === mgMenu_conf.Direction.HORIZONTAL && !this.isChildMenu)
+        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);
   }
   /**
-   * Check add listeners to childs
+   * Add listeners to items
    *
    * @returns {void}
    */
   componentDidRender() {
-    // add menu items listeners
     this.initMenuItemsListeners();
   }
-  /**
-   * Disconnect overflow ResizeObserver
-   *
-   * @returns {void} run overflow resize obeserver disconnexion
-   */
-  disconnectedCallback() {
-    if (this.hasOverflow)
-      this.overflowBehavior.disconnect();
-  }
   /**
    * Render
    *
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (index.h(index.Host, { role: this.isChildMenu ? 'menu' : 'menubar', "aria-label": this.label }, index.h("slot", null), this.hasOverflow && isMoreItem(this.moreitem) && this.renderMgMenuItemMore()));
+    return (index.h(index.Host, { role: this.isChildMenu ? 'menu' : 'menubar', "aria-label": this.label }, index.h("slot", null)));
   }
   get element() { return index.getElement(this); }
   static get watchers() { return {
     "label": ["validateLabel"],
     "direction": ["validateDirection"],
-    "moreitem": ["validateMoreItem"],
+    "itemmore": ["validateItemMore"],
     "size": ["validateSize"]
   }; }
 };
 MgMenu.style = mgMenuCss;
 
-const mgMenuItemCss = ".sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding:1rem 2rem;height:calc(3.8rem)}.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button,.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button ::slotted([slot=label]),.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button ::slotted([slot=metadata]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular ::slotted([slot=label]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular ::slotted([slot=metadata]){font-size:var(--font-size)}.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button.mg-menu-item__navigation-button--horizontal,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular.mg-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button.mg-menu-item__navigation-button--vertical,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular.mg-menu-item__navigation-button--vertical{padding-left:calc(2rem - 0.3rem)}.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding:1rem 3rem;height:calc(5.1rem)}.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button,.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button ::slotted([slot=label]),.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button ::slotted([slot=metadata]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium ::slotted([slot=label]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium ::slotted([slot=metadata]){font-size:calc(var(--font-size) + 0.2rem)}.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button.mg-menu-item__navigation-button--horizontal,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium.mg-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button.mg-menu-item__navigation-button--vertical,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium.mg-menu-item__navigation-button--vertical{padding-left:calc(3rem - 0.3rem)}.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding:1rem 4rem;height:calc(7.1rem)}.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button,.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button ::slotted([slot=label]),.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button ::slotted([slot=metadata]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large ::slotted([slot=label]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large ::slotted([slot=metadata]){font-size:calc(var(--font-size) + 0.2rem)}.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button.mg-menu-item__navigation-button--horizontal,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large.mg-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button.mg-menu-item__navigation-button--vertical,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large.mg-menu-item__navigation-button--vertical{padding-left:calc(4rem - 0.3rem)}.mg-menu-item__navigation-button{display:flex;align-items:center;column-gap:var(--mg-menu-item-navigation-button-column-gap, 1rem);background-color:unset;border:none;font-family:var(--font-family);font-weight:400;color:hsl(var(--mg-menu-item-color-hsl, var(--color-dark)));line-height:var(--line-height);text-decoration:none;white-space:nowrap;box-sizing:border-box;cursor:pointer}.mg-menu-item__navigation-button:disabled,.mg-menu-item__navigation-button--disabled{cursor:default;opacity:var(--mg-disabled-opacity)}.mg-menu-item__navigation-button:focus-visible{z-index:10}.mg-menu-item__navigation-button:hover:not(.mg-menu-item__navigation-button--disabled),.mg-menu-item__navigation-button:focus-visible:not(.mg-menu-item__navigation-button--disabled){background-color:hsl(var(--mg-menu-item-focused-background-color-hsl), 0.1)}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--active{color:hsl(var(--mg-menu-item-color-active-hsl));font-weight:600}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--active.mg-menu-item__navigation-button--horizontal{border-bottom-color:hsl(var(--mg-menu-item-border-color-active-hsl))}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--active.mg-menu-item__navigation-button--vertical{border-left-color:hsl(var(--mg-menu-item-border-color-active-hsl))}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--hidden{display:none}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--horizontal{border-bottom:0.3rem solid transparent}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--vertical{border-left:0.3rem solid transparent}:host([data-style-direction-vertical][data-level=\"1\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(1 * 2rem - 0.3rem)}:host([data-level=\"1\"]) .mg-menu-item__collapse-container{z-index:calc(1 * 10)}:host([data-style-direction-vertical][data-level=\"2\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(2 * 2rem - 0.3rem)}:host([data-level=\"2\"]) .mg-menu-item__collapse-container{z-index:calc(2 * 10)}:host([data-style-direction-vertical][data-level=\"3\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(3 * 2rem - 0.3rem)}:host([data-level=\"3\"]) .mg-menu-item__collapse-container{z-index:calc(3 * 10)}:host([data-style-direction-vertical][data-level=\"4\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(4 * 2rem - 0.3rem)}:host([data-level=\"4\"]) .mg-menu-item__collapse-container{z-index:calc(4 * 10)}:host([data-style-direction-vertical][data-level=\"5\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(5 * 2rem - 0.3rem)}:host([data-level=\"5\"]) .mg-menu-item__collapse-container{z-index:calc(5 * 10)}:host([data-style-direction-vertical][data-level=\"6\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(6 * 2rem - 0.3rem)}:host([data-level=\"6\"]) .mg-menu-item__collapse-container{z-index:calc(6 * 10)}:host([data-style-direction-vertical][data-level=\"1\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(1 * 3rem - 0.3rem)}:host([data-level=\"1\"]) .mg-menu-item__collapse-container{z-index:calc(1 * 10)}:host([data-style-direction-vertical][data-level=\"2\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(2 * 3rem - 0.3rem)}:host([data-level=\"2\"]) .mg-menu-item__collapse-container{z-index:calc(2 * 10)}:host([data-style-direction-vertical][data-level=\"3\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(3 * 3rem - 0.3rem)}:host([data-level=\"3\"]) .mg-menu-item__collapse-container{z-index:calc(3 * 10)}:host([data-style-direction-vertical][data-level=\"4\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(4 * 3rem - 0.3rem)}:host([data-level=\"4\"]) .mg-menu-item__collapse-container{z-index:calc(4 * 10)}:host([data-style-direction-vertical][data-level=\"5\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(5 * 3rem - 0.3rem)}:host([data-level=\"5\"]) .mg-menu-item__collapse-container{z-index:calc(5 * 10)}:host([data-style-direction-vertical][data-level=\"6\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(6 * 3rem - 0.3rem)}:host([data-level=\"6\"]) .mg-menu-item__collapse-container{z-index:calc(6 * 10)}:host([data-style-direction-vertical][data-level=\"1\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(1 * 4rem - 0.3rem)}:host([data-level=\"1\"]) .mg-menu-item__collapse-container{z-index:calc(1 * 10)}:host([data-style-direction-vertical][data-level=\"2\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(2 * 4rem - 0.3rem)}:host([data-level=\"2\"]) .mg-menu-item__collapse-container{z-index:calc(2 * 10)}:host([data-style-direction-vertical][data-level=\"3\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(3 * 4rem - 0.3rem)}:host([data-level=\"3\"]) .mg-menu-item__collapse-container{z-index:calc(3 * 10)}:host([data-style-direction-vertical][data-level=\"4\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(4 * 4rem - 0.3rem)}:host([data-level=\"4\"]) .mg-menu-item__collapse-container{z-index:calc(4 * 10)}:host([data-style-direction-vertical][data-level=\"5\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(5 * 4rem - 0.3rem)}:host([data-level=\"5\"]) .mg-menu-item__collapse-container{z-index:calc(5 * 10)}:host([data-style-direction-vertical][data-level=\"6\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(6 * 4rem - 0.3rem)}:host([data-level=\"6\"]) .mg-menu-item__collapse-container{z-index:calc(6 * 10)}:host{position:relative;display:flex;--mg-popover-padding-vertical:0;--mg-popover-padding-horizontal:0}:host([data-style-direction-vertical]){flex-direction:column}:host([data-style-direction-vertical]) .mg-menu-item__navigation-button{width:100%}:host([data-style-direction-vertical]) .mg-menu-item__collapse-container{left:unset;top:unset;position:unset;width:unset}:host([data-style-direction-vertical]) .mg-menu-item-chevron{margin-left:auto}:host([data-style-direction-horizontal]) .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level{background-color:hsl(var(--color-light))}:host([data-style-direction-horizontal]) .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level ::slotted(mg-menu){padding:1rem 0}:host([data-overflow-more]){--mg-menu-item-navigation-button-column-gap:0}:host([data-overflow-more]) .mg-menu-item__navigation-button-chevron{display:none}:host([data-overflow-more]) .mg-menu-item__navigation-button-text-content ::slotted([slot=information]){margin-left:0}:host([data-overflow-more]) ::slotted(mg-menu){--mg-menu-item-navigation-button-column-gap:1rem}.mg-menu-item{max-width:var(--mg-menu-item-navigation-button-max-width)}.mg-menu-item__collapse-container{width:max-content;z-index:10}.mg-menu-item__navigation-button-center{min-width:0}.mg-menu-item__navigation-button-text-content{width:100%;display:flex;align-items:center}.mg-menu-item__navigation-button-text-content-notification,.mg-menu-item__navigation-button-text-content ::slotted([slot=information]){margin-left:1rem;font-size:var(--font-size)}.mg-menu-item__navigation-button-chevron{margin-left:auto;transition:200ms}.mg-menu-item__navigation-button-chevron--rotate.mg-menu-item__navigation-button-chevron{transform:rotate(180deg)}::slotted([slot=label]),::slotted([slot=metadata]){display:block;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::slotted(*){display:flex;flex-direction:column}:host([status=disabled]){pointer-events:none}:host([hidden]){display:none}";
+const mgMenuItemCss = ".sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding:1rem 2rem;height:3.8rem}.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button,.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button ::slotted([slot=label]),.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button ::slotted([slot=metadata]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular ::slotted([slot=label]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular ::slotted([slot=metadata]){font-size:var(--font-size)}.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button.mg-menu-item__navigation-button--horizontal,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular.mg-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button.mg-menu-item__navigation-button--vertical,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular.mg-menu-item__navigation-button--vertical{padding-left:calc(2rem - 0.3rem)}.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding:1rem 3rem;height:5.1rem}.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button,.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button ::slotted([slot=label]),.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button ::slotted([slot=metadata]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium ::slotted([slot=label]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium ::slotted([slot=metadata]){font-size:calc(var(--font-size) + 0.2rem)}.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button.mg-menu-item__navigation-button--horizontal,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium.mg-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button.mg-menu-item__navigation-button--vertical,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium.mg-menu-item__navigation-button--vertical{padding-left:calc(3rem - 0.3rem)}.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding:1rem 4rem;height:7.1rem}.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button,.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button ::slotted([slot=label]),.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button ::slotted([slot=metadata]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large ::slotted([slot=label]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large ::slotted([slot=metadata]){font-size:calc(var(--font-size) + 0.2rem)}.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button.mg-menu-item__navigation-button--horizontal,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large.mg-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button.mg-menu-item__navigation-button--vertical,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large.mg-menu-item__navigation-button--vertical{padding-left:calc(4rem - 0.3rem)}.mg-menu-item__navigation-button{display:flex;align-items:center;column-gap:var(--mg-menu-item-navigation-button-column-gap, 1rem);background-color:unset;border:none;font-family:var(--font-family);font-weight:400;color:hsl(var(--mg-menu-item-color-hsl, var(--color-dark)));line-height:var(--line-height);text-decoration:none;white-space:nowrap;box-sizing:border-box;cursor:pointer}.mg-menu-item__navigation-button:disabled,.mg-menu-item__navigation-button--disabled{cursor:default;opacity:var(--mg-disabled-opacity)}.mg-menu-item__navigation-button:focus-visible{z-index:10}.mg-menu-item__navigation-button:hover:not(.mg-menu-item__navigation-button--disabled),.mg-menu-item__navigation-button:focus-visible:not(.mg-menu-item__navigation-button--disabled){background-color:hsl(var(--mg-menu-item-focused-background-color-hsl), 0.1)}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--active{color:hsl(var(--mg-menu-item-color-active-hsl));font-weight:600}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--active.mg-menu-item__navigation-button--horizontal{border-bottom-color:hsl(var(--mg-menu-item-border-color-active-hsl))}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--active.mg-menu-item__navigation-button--vertical{border-left-color:hsl(var(--mg-menu-item-border-color-active-hsl))}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--hidden{display:none}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--horizontal{border-bottom:0.3rem solid transparent}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--vertical{border-left:0.3rem solid transparent}:host([data-style-direction-vertical][data-level=\"1\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(1 * 2rem - 0.3rem)}:host([data-level=\"1\"]) .mg-menu-item__collapse-container{z-index:calc(1 * 10)}:host([data-style-direction-vertical][data-level=\"2\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(2 * 2rem - 0.3rem)}:host([data-level=\"2\"]) .mg-menu-item__collapse-container{z-index:calc(2 * 10)}:host([data-style-direction-vertical][data-level=\"3\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(3 * 2rem - 0.3rem)}:host([data-level=\"3\"]) .mg-menu-item__collapse-container{z-index:calc(3 * 10)}:host([data-style-direction-vertical][data-level=\"4\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(4 * 2rem - 0.3rem)}:host([data-level=\"4\"]) .mg-menu-item__collapse-container{z-index:calc(4 * 10)}:host([data-style-direction-vertical][data-level=\"5\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(5 * 2rem - 0.3rem)}:host([data-level=\"5\"]) .mg-menu-item__collapse-container{z-index:calc(5 * 10)}:host([data-style-direction-vertical][data-level=\"6\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(6 * 2rem - 0.3rem)}:host([data-level=\"6\"]) .mg-menu-item__collapse-container{z-index:calc(6 * 10)}:host([data-style-direction-vertical][data-level=\"1\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(1 * 3rem - 0.3rem)}:host([data-level=\"1\"]) .mg-menu-item__collapse-container{z-index:calc(1 * 10)}:host([data-style-direction-vertical][data-level=\"2\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(2 * 3rem - 0.3rem)}:host([data-level=\"2\"]) .mg-menu-item__collapse-container{z-index:calc(2 * 10)}:host([data-style-direction-vertical][data-level=\"3\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(3 * 3rem - 0.3rem)}:host([data-level=\"3\"]) .mg-menu-item__collapse-container{z-index:calc(3 * 10)}:host([data-style-direction-vertical][data-level=\"4\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(4 * 3rem - 0.3rem)}:host([data-level=\"4\"]) .mg-menu-item__collapse-container{z-index:calc(4 * 10)}:host([data-style-direction-vertical][data-level=\"5\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(5 * 3rem - 0.3rem)}:host([data-level=\"5\"]) .mg-menu-item__collapse-container{z-index:calc(5 * 10)}:host([data-style-direction-vertical][data-level=\"6\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(6 * 3rem - 0.3rem)}:host([data-level=\"6\"]) .mg-menu-item__collapse-container{z-index:calc(6 * 10)}:host([data-style-direction-vertical][data-level=\"1\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(1 * 4rem - 0.3rem)}:host([data-level=\"1\"]) .mg-menu-item__collapse-container{z-index:calc(1 * 10)}:host([data-style-direction-vertical][data-level=\"2\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(2 * 4rem - 0.3rem)}:host([data-level=\"2\"]) .mg-menu-item__collapse-container{z-index:calc(2 * 10)}:host([data-style-direction-vertical][data-level=\"3\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(3 * 4rem - 0.3rem)}:host([data-level=\"3\"]) .mg-menu-item__collapse-container{z-index:calc(3 * 10)}:host([data-style-direction-vertical][data-level=\"4\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(4 * 4rem - 0.3rem)}:host([data-level=\"4\"]) .mg-menu-item__collapse-container{z-index:calc(4 * 10)}:host([data-style-direction-vertical][data-level=\"5\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(5 * 4rem - 0.3rem)}:host([data-level=\"5\"]) .mg-menu-item__collapse-container{z-index:calc(5 * 10)}:host([data-style-direction-vertical][data-level=\"6\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(6 * 4rem - 0.3rem)}:host([data-level=\"6\"]) .mg-menu-item__collapse-container{z-index:calc(6 * 10)}:host{position:relative;display:flex;--mg-popover-padding-vertical:0;--mg-popover-padding-horizontal:0}:host([data-style-direction-vertical]){flex-direction:column}:host([data-style-direction-vertical]) .mg-menu-item__navigation-button{width:100%}:host([data-style-direction-vertical]) .mg-menu-item__collapse-container{left:unset;top:unset;position:unset;width:unset}:host([data-style-direction-vertical]) .mg-menu-item-chevron{margin-left:auto}:host([data-style-direction-horizontal]) .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level,:host([data-overflow-more]) .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level{background-color:hsl(var(--color-light))}:host([data-style-direction-horizontal]) .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level ::slotted(mg-menu),:host([data-overflow-more]) .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level ::slotted(mg-menu){padding:1rem 0}:host([data-overflow-more]){--mg-menu-item-navigation-button-column-gap:0}:host([data-overflow-more]) .mg-menu-item__navigation-button-chevron{display:none}:host([data-overflow-more]) .mg-menu-item__navigation-button-text-content ::slotted([slot=information]){margin-left:0}:host([data-overflow-more]) ::slotted(mg-menu){--mg-menu-item-navigation-button-column-gap:1rem}.mg-menu-item{max-width:var(--mg-menu-item-navigation-button-max-width)}.mg-menu-item__collapse-container{width:max-content;z-index:10}.mg-menu-item__navigation-button-center{min-width:0}.mg-menu-item__navigation-button-text-content{width:100%;display:flex;align-items:center}.mg-menu-item__navigation-button-text-content-notification,.mg-menu-item__navigation-button-text-content ::slotted([slot=information]){margin-left:1rem;font-size:var(--font-size)}.mg-menu-item__navigation-button-chevron{margin-left:auto;transition:200ms}.mg-menu-item__navigation-button-chevron--rotate.mg-menu-item__navigation-button-chevron{transform:rotate(180deg)}::slotted([slot=label]),::slotted([slot=metadata]){display:block;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::slotted(*){display:flex;flex-direction:column}:host([status=disabled]){pointer-events:none}:host([hidden]){display:none}";
 
 const MgMenuItem = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.statusChange = index.createEvent(this, "status-change", 7);
+    this.itemLoaded = index.createEvent(this, "item-loaded", 7);
     /************
      * Internal *
      ************/
@@ -3688,9 +3374,91 @@ const MgMenuItem = class {
      * Is component contextual direction match the given direction
      *
      * @param {MgMenuItem['direction']} direction in parent menu
+     * @param {MgMenuItem['direction']} compareWith direction to compare with. Default: `this.direction`
      * @returns {boolean} true is direction match the direction propertie
      */
-    this.isDirection = (direction) => this.direction === direction;
+    this.isDirection = (direction, compareWith = this.direction) => direction === compareWith;
+    /**
+     * Update displayNotificationBadge
+     * current component notification badge have priority over the slot badge when submenu contain badge
+     *
+     * @returns {void} update displayNotificationBadge value
+     */
+    this.updateDisplayNotificationBadge = () => {
+      const childMenu = this.element.querySelector('mg-menu');
+      this.displayNotificationBadge =
+        childMenu !== null &&
+          Array.from(childMenu.children).some((subItem) => subItem.querySelector('mg-badge') !== null && subItem.getAttribute('hidden') === null);
+    };
+    /**
+     * Method to control if one of component children have active status
+     *
+     * @returns {boolean} truthy if component has active child
+     */
+    this.hasActiveChild = () => {
+      var _a;
+      return Array.from(((_a = this.element.querySelector('mg-menu')) === null || _a === void 0 ? void 0 : _a.children) || []).some((element) => element.nodeName === 'MG-MENU-ITEM' && this.hasStatus(element, Status$1.ACTIVE) && element.getAttribute('hidden') === null);
+    };
+    /**
+     * Validate slots
+     *
+     * @param {boolean} guard prevent action whith guard. Default: false.
+     * @returns {void}
+     */
+    this.validateSlot = (guard = false) => {
+      // slot title AND metadata validation
+      // add title on label AND metada slots due to text-overflow on these element
+      if (Array.from(this.element.children).find(child => child.getAttribute('slot') === 'label') === undefined)
+        throw new Error(`<${this.name}> slot "label" is required.`);
+      ['label', 'metadata'].forEach(slot => {
+        Array.from(this.element.querySelectorAll(`[slot="${slot}"]`)).forEach(element => {
+          if (element.textContent.trim().length < 1)
+            throw new Error(`<${this.name}> slot "${slot}" must have text content.`);
+          if ((guard && element.getAttribute('title') === null) || !guard)
+            element.setAttribute('title', element.textContent);
+        });
+      });
+    };
+    /**
+     * Update status
+     *
+     * @param {Status[]} guard status to exclude from process in addition to [Status.HIDDEN, Status.DISABLED] . Default: [].
+     * @returns {void}
+     */
+    this.updateStatus = (guard = []) => {
+      if (![Status$1.HIDDEN, Status$1.DISABLED, ...guard].includes(this.status)) {
+        this.status = this.hasActiveChild() ? Status$1.ACTIVE : Status$1.VISIBLE;
+      }
+    };
+    /**
+     * Init event-listeners
+     *
+     * @returns {void}
+     */
+    this.initListeners = () => {
+      var _a;
+      // manage first sub-level menu-items
+      Array.from(((_a = this.element.querySelector('mg-menu')) === null || _a === void 0 ? void 0 : _a.children) || []).forEach(item => {
+        if (item.nodeName === 'MG-MENU-ITEM') {
+          // manage child menu listener
+          item.addEventListener('status-change', () => {
+            this.updateStatus();
+          });
+        }
+      });
+    };
+    /**
+     * Get mg-popover identifier
+     *
+     * @returns {MgPopover['identifier']} generated mg-popover identifier
+     */
+    this.getPopoverIdentifier = () => `${this.identifier}-popover`;
+    /**
+     * Condition to know if component should display a mg-popover
+     *
+     * @returns {boolean} truthy if component display popover
+     */
+    this.displayPopover = () => this.isDirection(mgMenu_conf.Direction.HORIZONTAL) && this.hasChildren && this.href === undefined;
     /************
      * Handlers *
      ************/
@@ -3718,35 +3486,13 @@ const MgMenuItem = class {
     this.handlePopoverDisplay = (event) => {
       this.expanded = event.detail;
     };
-    /**
-     * Update displayNotificationBadge
-     * current component notification badge have priority over the slot badge when submenu contain badge
-     *
-     * @returns {void} update displayNotificationBadge value
-     */
-    this.updateDisplayNotificationBadge = () => {
-      const childMenu = this.element.querySelector('mg-menu');
-      this.displayNotificationBadge =
-        childMenu !== null &&
-          Array.from(childMenu.children).some((subItem) => subItem.querySelector('mg-badge') !== null && subItem.getAttribute('hidden') === null);
-    };
-    /**
-     * Method to control if one of component children have active status
-     *
-     * @returns {boolean} truthy if component has active child
-     */
-    this.hasActiveChild = () => {
-      var _a;
-      return Array.from(((_a = this.element.querySelector('mg-menu')) === null || _a === void 0 ? void 0 : _a.children) || [])
-        .filter(element => element.nodeName === 'MG-MENU-ITEM')
-        .some((element) => this.hasStatus(element, Status$1.ACTIVE) && element.getAttribute('hidden') === null);
-    };
     /**
      * Render slot
      *
      * @returns {HTMLElement} HTML Element
      */
     this.renderSlot = () => index.h("slot", null);
+    this.identifier = createID('mg-menu-item');
     this.href = undefined;
     this.status = Status$1.VISIBLE;
     this.expanded = false;
@@ -3754,6 +3500,7 @@ const MgMenuItem = class {
     this.navigationButtonClassList = new ClassList([this.navigationButton]);
     this.direction = undefined;
     this.isInMainMenu = undefined;
+    this.isItemMore = undefined;
     this.hasChildren = false;
     this.displayNotificationBadge = undefined;
   }
@@ -3790,11 +3537,33 @@ const MgMenuItem = class {
     this.navigationButtonClassList.delete(`${this.navigationButton}--size-${oldValue}`);
     this.navigationButtonClassList.add(`${this.navigationButton}--size-${newValue}`);
   }
+  validateDirection(newValue) {
+    // manage menu items style depending to parent menu horientation
+    this.element.setAttribute(`data-style-direction-${newValue}`, '');
+    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)) {
+      Array.from(this.element.querySelectorAll('mg-menu-item')).forEach(item => {
+        item.dataset.level = `${(Number(item.dataset.level) || 1) + 1}`;
+      });
+    }
+  }
   validateHasChildren(newValue) {
     if (newValue && this.element.href !== undefined) {
       throw new Error(`<${this.name}> prop "href" is unauthorizied when element is a parent.`);
     }
   }
+  /**
+   * Render popover clickoutside guard for content slot
+   *
+   * @returns {void}
+   */
+  updatePopoverGuard() {
+    if (this.displayPopover())
+      Array.from(this.element.children)
+        .filter((child) => child.getAttribute('slot') === null && child.nodeName !== 'MG-MENU' && Boolean(child.dataset))
+        .forEach((slot) => (slot.dataset.mgPopoverGuard = this.getPopoverIdentifier()));
+  }
   /*************
    * Lifecycle *
    *************/
@@ -3807,11 +3576,13 @@ const MgMenuItem = class {
     // has children items that is NOT [slot='image' | 'information' | 'label' | 'metadata'] element
     // we store only matching elements
     this.hasChildren = Array.from(this.element.children).some(child => !['image', 'information', 'label', 'metadata'].includes(child.getAttribute('slot')));
+    this.badgeLabel = mgMenu_conf.initLocales(this.element).messages.plusMenu.badgeLabel;
+    this.isItemMore = this.element.dataset.overflowMore !== undefined;
     // Validate props
-    this.validateSize(this.size);
     this.validateStatus(this.status);
     this.validateExpanded(this.expanded);
-    this.badgeLabel = initLocales(this.element).messages.plusMenu.badgeLabel;
+    // Validate states
+    this.validateSize(this.size);
   }
   /**
    * Check if component slots configuration
@@ -3819,63 +3590,38 @@ const MgMenuItem = class {
    * @returns {ReturnType<typeof setTimeout>} timeout
    */
   componentDidLoad() {
-    // slot title AND metadata validation
-    // add title on label AND metada slots due to text-overflow on these element
-    if (Array.from(this.element.children).find(child => child.getAttribute('slot') === 'label') === undefined)
-      throw new Error(`<${this.name}> slot "label" is required.`);
-    ['label', 'metadata'].forEach(slot => {
-      Array.from(this.element.querySelectorAll(`[slot="${slot}"]`)).forEach(element => {
-        if (element.textContent.trim().length < 1)
-          throw new Error(`<${this.name}> slot "${slot}" must have text content.`);
-        if (element.getAttribute('title') === null)
-          element.setAttribute('title', element.textContent);
-      });
-    });
+    // validation
+    this.validateSlot(true);
     // update props and states after componentDidLoad hook
     // return a promise to process action only in the FIRST render().
     // https://stenciljs.com/docs/component-lifecycle#componentwillload
     return setTimeout(() => {
-      var _a;
       // define menu-item context states
       const menu = this.element.closest('mg-menu');
-      this.direction = this.element.getAttribute(OverflowBehaviorElements.MORE) !== null || menu === null ? Direction.HORIZONTAL : menu.direction;
-      this.size = menu === null || menu === void 0 ? void 0 : menu.size;
-      this.isInMainMenu = this.element.parentElement.closest('mg-menu-item') === null;
+      this.direction = this.isItemMore || menu === null ? mgMenu_conf.Direction.HORIZONTAL : menu.direction;
+      this.isInMainMenu = menu !== null && this.element.parentElement.closest('mg-menu-item') === null;
+      if ((menu === null || menu === void 0 ? void 0 : menu.size) !== undefined)
+        this.size = menu.size;
+      if (this.isItemMore)
+        this.size = this.element.dataset.size;
       // when main menu item contain an active item it will get the active style
       // AND if item is in vertical menu it will be expanded
-      if (this.hasActiveChild()) {
-        this.status = Status$1.ACTIVE;
-        if (this.isInMainMenu)
-          this.expanded = this.isDirection(Direction.VERTICAL);
-      }
-      // manage menu items style depending to parent menu horientation
-      this.element.setAttribute(`data-style-direction-${this.direction}`, '');
-      this.navigationButtonClassList.add(`${this.navigationButton}--${this.direction}`);
+      if (this.hasActiveChild() && this.isInMainMenu)
+        this.expanded = this.isDirection(mgMenu_conf.Direction.VERTICAL);
+      this.updateStatus([Status$1.ACTIVE]);
       this.updateDisplayNotificationBadge();
-      // manage all sub levels child menu-items level with data-level attribut
-      if (this.isDirection(Direction.VERTICAL)) {
-        Array.from(this.element.querySelectorAll('mg-menu-item')).forEach(item => {
-          item.dataset.level = `${(Number(item.dataset.level) || 1) + 1}`;
-        });
-      }
-      // manage first sub-level menu-items
-      const childItems = Array.from(((_a = this.element.querySelector('mg-menu')) === null || _a === void 0 ? void 0 : _a.children) || []).filter(item => item.nodeName === 'MG-MENU-ITEM');
-      childItems.forEach(item => {
-        const updateStatus = () => {
-          if (![Status$1.HIDDEN, Status$1.DISABLED].includes(this.status)) {
-            this.status = this.hasActiveChild() ? Status$1.ACTIVE : Status$1.VISIBLE;
-          }
-        };
-        // manage child menu listener
-        item.addEventListener('status-change', () => {
-          updateStatus();
-        });
-        new MutationObserver(mutationsList => {
-          if (mutationsList.some(mutation => mutation.attributeName === 'hidden'))
-            updateStatus();
-          this.updateDisplayNotificationBadge();
-        }).observe(item, { attributes: true });
-      });
+      this.updatePopoverGuard();
+      // manage child dom changes with mutationObserver and listzners
+      this.initListeners();
+      // emit loaded event when component is fully loaded
+      this.itemLoaded.emit();
+      new MutationObserver(mutationsList => {
+        if (mutationsList.some(mutation => mutation.attributeName === 'hidden'))
+          this.updateStatus();
+        if (mutationsList.some(mutation => mutation.type === 'characterData'))
+          this.validateSlot();
+        this.updateDisplayNotificationBadge();
+      }).observe(this.element, { attributes: true, childList: true, characterData: true, subtree: true });
     }, 0);
   }
   /**
@@ -3899,9 +3645,9 @@ const MgMenuItem = class {
   render() {
     const getContainerClasses = () => ({
       [`${this.name}__collapse-container`]: true,
-      [`${this.name}__collapse-container--first-level`]: this.isInMainMenu && this.isDirection(Direction.HORIZONTAL),
+      [`${this.name}__collapse-container--first-level`]: (this.isInMainMenu || this.isItemMore) && this.isDirection(mgMenu_conf.Direction.HORIZONTAL),
     });
-    return (index.h(index.Host, { role: "menuitem", "aria-haspopup": this.hasChildren.toString() }, this.isDirection(Direction.HORIZONTAL) && this.hasChildren && this.href === undefined ? (index.h("mg-popover", { display: this.expanded, placement: "bottom-start", arrowHide: true, "onDisplay-change": this.handlePopoverDisplay }, this.renderInteractiveElement(), index.h("div", { class: getContainerClasses(), slot: "content" }, this.renderSlot()))) : ([
+    return (index.h(index.Host, { role: !this.isItemMore && 'menuitem', "aria-haspopup": !this.isItemMore && this.hasChildren.toString() }, 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()),
     ])));
@@ -3911,6 +3657,7 @@ const MgMenuItem = class {
     "status": ["validateStatus"],
     "expanded": ["validateExpanded"],
     "size": ["validateSize"],
+    "direction": ["validateDirection"],
     "hasChildren": ["validateHasChildren"]
   }; }
 };
@@ -4061,7 +3808,7 @@ const MgMessage = class {
    */
   componentWillLoad() {
     // Get locales
-    this.messages = initLocales(this.element).messages;
+    this.messages = mgMenu_conf.initLocales(this.element).messages;
     // Validate
     this.validateVariant(this.variant);
     // Check if close button is an can be activated
@@ -4195,7 +3942,7 @@ const MgModal = class {
     // Store body overflow
     this.bodyOverflow = document.body.style.overflow;
     // Get locales
-    this.messages = initLocales(this.element).messages;
+    this.messages = mgMenu_conf.initLocales(this.element).messages;
     // Validate
     this.hasActions = this.element.querySelector('[slot="actions"]') !== null;
     this.hasContent = this.element.querySelector('[slot="content"]') !== null;
@@ -4333,7 +4080,7 @@ const MgPagination = class {
    */
   componentWillLoad() {
     // Get locales
-    this.messages = initLocales(this.element).messages;
+    this.messages = mgMenu_conf.initLocales(this.element).messages;
     // Validate
     this.validateTotalPages(this.totalPages);
     this.validateCurrentPage(this.currentPage);
@@ -4490,7 +4237,7 @@ const MgPanel = class {
    */
   componentWillLoad() {
     // Get locales
-    this.messages = initLocales(this.element).messages;
+    this.messages = mgMenu_conf.initLocales(this.element).messages;
     // Validate
     this.validatetitlePattern(this.titlePattern);
     this.validatePanelTitle(this.panelTitle);
@@ -6422,7 +6169,7 @@ const MgPopover = class {
     // Get windows to attach events
     this.windows = getWindows(window);
     // Get locales
-    this.messages = initLocales(this.element).messages;
+    this.messages = mgMenu_conf.initLocales(this.element).messages;
     this.validateArrowHide(this.arrowHide);
   }
   /**
@@ -6537,7 +6284,7 @@ const MgSkipLinks = class {
    */
   componentWillLoad() {
     this.validateLinks(this.links);
-    this.messages = initLocales(this.element).messages;
+    this.messages = mgMenu_conf.initLocales(this.element).messages;
   }
   /**
    * Render
@@ -6569,7 +6316,7 @@ var Status;
  */
 const sizes = ['regular', 'large'];
 
-const mgTabsCss = ".mg-tabs.mg-tabs--size-regular .mg-tabs__navigation-button,.mg-tabs__navigation-button.mg-tabs__navigation-button--size-regular{padding:1rem 2rem;height:calc()}.mg-tabs.mg-tabs--size-regular .mg-tabs__navigation-button,.mg-tabs.mg-tabs--size-regular .mg-tabs__navigation-button ::slotted([slot=label]),.mg-tabs.mg-tabs--size-regular .mg-tabs__navigation-button ::slotted([slot=metadata]),.mg-tabs__navigation-button.mg-tabs__navigation-button--size-regular,.mg-tabs__navigation-button.mg-tabs__navigation-button--size-regular ::slotted([slot=label]),.mg-tabs__navigation-button.mg-tabs__navigation-button--size-regular ::slotted([slot=metadata]){font-size:var(--font-size)}.mg-tabs.mg-tabs--size-regular .mg-tabs__navigation-button.mg-tabs__navigation-button--horizontal,.mg-tabs__navigation-button.mg-tabs__navigation-button--size-regular.mg-tabs__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-tabs.mg-tabs--size-regular .mg-tabs__navigation-button.mg-tabs__navigation-button--vertical,.mg-tabs__navigation-button.mg-tabs__navigation-button--size-regular.mg-tabs__navigation-button--vertical{padding-left:calc(2rem - 0.3rem)}.mg-tabs.mg-tabs--size-large .mg-tabs__navigation-button,.mg-tabs__navigation-button.mg-tabs__navigation-button--size-large{padding:1.5rem 3rem;height:calc()}.mg-tabs.mg-tabs--size-large .mg-tabs__navigation-button,.mg-tabs.mg-tabs--size-large .mg-tabs__navigation-button ::slotted([slot=label]),.mg-tabs.mg-tabs--size-large .mg-tabs__navigation-button ::slotted([slot=metadata]),.mg-tabs__navigation-button.mg-tabs__navigation-button--size-large,.mg-tabs__navigation-button.mg-tabs__navigation-button--size-large ::slotted([slot=label]),.mg-tabs__navigation-button.mg-tabs__navigation-button--size-large ::slotted([slot=metadata]){font-size:calc(var(--font-size) + 0.2rem)}.mg-tabs.mg-tabs--size-large .mg-tabs__navigation-button.mg-tabs__navigation-button--horizontal,.mg-tabs__navigation-button.mg-tabs__navigation-button--size-large.mg-tabs__navigation-button--horizontal{padding-bottom:calc(1.5rem - 0.3rem)}.mg-tabs.mg-tabs--size-large .mg-tabs__navigation-button.mg-tabs__navigation-button--vertical,.mg-tabs__navigation-button.mg-tabs__navigation-button--size-large.mg-tabs__navigation-button--vertical{padding-left:calc(3rem - 0.3rem)}.mg-tabs__navigation-button{display:flex;align-items:center;column-gap:var(--mg-tabs-navigation-button-column-gap, 1rem);background-color:unset;border:none;font-family:var(--font-family);font-weight:400;color:hsl(var(--mg-tabs-color-hsl, var(--color-dark)));line-height:var(--line-height);text-decoration:none;white-space:nowrap;box-sizing:border-box;cursor:pointer}.mg-tabs__navigation-button:disabled,.mg-tabs__navigation-button--disabled{cursor:default;opacity:var(--mg-disabled-opacity)}.mg-tabs__navigation-button:focus-visible{z-index:10}.mg-tabs__navigation-button:hover:not(.mg-tabs__navigation-button--disabled),.mg-tabs__navigation-button:focus-visible:not(.mg-tabs__navigation-button--disabled){background-color:hsl(var(--mg-tabs-focused-background-color-hsl), 0.1)}.mg-tabs__navigation-button.mg-tabs__navigation-button--active{color:hsl(var(--mg-tabs-color-active-hsl));font-weight:600}.mg-tabs__navigation-button.mg-tabs__navigation-button--active.mg-tabs__navigation-button--horizontal{border-bottom-color:hsl(var(--mg-tabs-border-color-active-hsl))}.mg-tabs__navigation-button.mg-tabs__navigation-button--active.mg-tabs__navigation-button--vertical{border-left-color:hsl(var(--mg-tabs-border-color-active-hsl))}.mg-tabs__navigation-button.mg-tabs__navigation-button--hidden{display:none}.mg-tabs__navigation-button.mg-tabs__navigation-button--horizontal{border-bottom:0.3rem solid transparent}.mg-tabs__navigation-button.mg-tabs__navigation-button--vertical{border-left:0.3rem solid transparent}.mg-tabs__header{display:flex;flex-direction:row;flex-wrap:wrap}.mg-tabs__content-container:focus-visible{outline:none}.mg-tabs__navigation-button-text{flex:0 0 content}";
+const mgTabsCss = ".mg-tabs.mg-tabs--size-regular .mg-tabs__navigation-button,.mg-tabs__navigation-button.mg-tabs__navigation-button--size-regular{padding:1rem 2rem}.mg-tabs.mg-tabs--size-regular .mg-tabs__navigation-button,.mg-tabs.mg-tabs--size-regular .mg-tabs__navigation-button ::slotted([slot=label]),.mg-tabs.mg-tabs--size-regular .mg-tabs__navigation-button ::slotted([slot=metadata]),.mg-tabs__navigation-button.mg-tabs__navigation-button--size-regular,.mg-tabs__navigation-button.mg-tabs__navigation-button--size-regular ::slotted([slot=label]),.mg-tabs__navigation-button.mg-tabs__navigation-button--size-regular ::slotted([slot=metadata]){font-size:var(--font-size)}.mg-tabs.mg-tabs--size-regular .mg-tabs__navigation-button.mg-tabs__navigation-button--horizontal,.mg-tabs__navigation-button.mg-tabs__navigation-button--size-regular.mg-tabs__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-tabs.mg-tabs--size-regular .mg-tabs__navigation-button.mg-tabs__navigation-button--vertical,.mg-tabs__navigation-button.mg-tabs__navigation-button--size-regular.mg-tabs__navigation-button--vertical{padding-left:calc(2rem - 0.3rem)}.mg-tabs.mg-tabs--size-large .mg-tabs__navigation-button,.mg-tabs__navigation-button.mg-tabs__navigation-button--size-large{padding:1.5rem 3rem}.mg-tabs.mg-tabs--size-large .mg-tabs__navigation-button,.mg-tabs.mg-tabs--size-large .mg-tabs__navigation-button ::slotted([slot=label]),.mg-tabs.mg-tabs--size-large .mg-tabs__navigation-button ::slotted([slot=metadata]),.mg-tabs__navigation-button.mg-tabs__navigation-button--size-large,.mg-tabs__navigation-button.mg-tabs__navigation-button--size-large ::slotted([slot=label]),.mg-tabs__navigation-button.mg-tabs__navigation-button--size-large ::slotted([slot=metadata]){font-size:calc(var(--font-size) + 0.2rem)}.mg-tabs.mg-tabs--size-large .mg-tabs__navigation-button.mg-tabs__navigation-button--horizontal,.mg-tabs__navigation-button.mg-tabs__navigation-button--size-large.mg-tabs__navigation-button--horizontal{padding-bottom:calc(1.5rem - 0.3rem)}.mg-tabs.mg-tabs--size-large .mg-tabs__navigation-button.mg-tabs__navigation-button--vertical,.mg-tabs__navigation-button.mg-tabs__navigation-button--size-large.mg-tabs__navigation-button--vertical{padding-left:calc(3rem - 0.3rem)}.mg-tabs__navigation-button{display:flex;align-items:center;column-gap:var(--mg-tabs-navigation-button-column-gap, 1rem);background-color:unset;border:none;font-family:var(--font-family);font-weight:400;color:hsl(var(--mg-tabs-color-hsl, var(--color-dark)));line-height:var(--line-height);text-decoration:none;white-space:nowrap;box-sizing:border-box;cursor:pointer}.mg-tabs__navigation-button:disabled,.mg-tabs__navigation-button--disabled{cursor:default;opacity:var(--mg-disabled-opacity)}.mg-tabs__navigation-button:focus-visible{z-index:10}.mg-tabs__navigation-button:hover:not(.mg-tabs__navigation-button--disabled),.mg-tabs__navigation-button:focus-visible:not(.mg-tabs__navigation-button--disabled){background-color:hsl(var(--mg-tabs-focused-background-color-hsl), 0.1)}.mg-tabs__navigation-button.mg-tabs__navigation-button--active{color:hsl(var(--mg-tabs-color-active-hsl));font-weight:600}.mg-tabs__navigation-button.mg-tabs__navigation-button--active.mg-tabs__navigation-button--horizontal{border-bottom-color:hsl(var(--mg-tabs-border-color-active-hsl))}.mg-tabs__navigation-button.mg-tabs__navigation-button--active.mg-tabs__navigation-button--vertical{border-left-color:hsl(var(--mg-tabs-border-color-active-hsl))}.mg-tabs__navigation-button.mg-tabs__navigation-button--hidden{display:none}.mg-tabs__navigation-button.mg-tabs__navigation-button--horizontal{border-bottom:0.3rem solid transparent}.mg-tabs__navigation-button.mg-tabs__navigation-button--vertical{border-left:0.3rem solid transparent}.mg-tabs__header{display:flex;flex-direction:row;flex-wrap:wrap}.mg-tabs__content-container:focus-visible{outline:none}.mg-tabs__navigation-button-text{flex:0 0 content}";
 
 /**
  * type TabItem validation function
@@ -7066,6 +6813,7 @@ const MgTooltip = class {
     if (typeof newValue !== 'string' || newValue.trim() === '') {
       throw new Error('<mg-tooltip> prop "message" is required.');
     }
+    this.popper.update();
   }
   handleDisplay(newValue) {
     if (newValue) {
@@ -7097,10 +6845,13 @@ const MgTooltip = class {
     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 (slotElement.tagName === 'MG-BUTTON') {
+    if (['MG-BUTTON', 'BUTTON'].includes(slotElement.tagName)) {
       new MutationObserver(mutationList => {
-        if (mutationList.some(mutation => mutation.attributeName === 'aria-disabled')) {
+        if (mutationList.some(mutation => ['aria-disabled', 'disabled'].includes(mutation.attributeName))) {
           this.setMgButtonWrapper(slotElement);
+          // Since Firefox doesn't trigger a "blur" event when the "disabled" attribute is added or removed from a button
+          // we have to manually unlock the guard because the "blur" handler of the tooltipedElement won't do it.
+          this.resetGuard();
           this.initTooltip(slotElement, interactiveElement);
         }
       }).observe(slotElement, { attributes: true });