@mgdis/mg-components 5.5.0 → 5.7.0

package/dist/esm/{mg-badge_30.entry.js → mg-action-more_31.entry.js}

@@ -1,9 +1,270 @@
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-78edde1d.js';
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-03cceb11.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
+};
 
 /**
- * List of all possibles variants
+ * 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);
+
+/**
+ * Available menu-item positions
+ */
+var ElementPosition;
+(function (ElementPosition) {
+  ElementPosition["FIRST"] = "first";
+  ElementPosition["LAST"] = "last";
+})(ElementPosition || (ElementPosition = {}));
+/**
+ * Available menu item status
+ */
+var Status$1;
+(function (Status) {
+  Status["VISIBLE"] = "visible";
+  Status["HIDDEN"] = "hidden";
+  Status["DISABLED"] = "disabled";
+  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 variants$4 = ['info', 'primary', 'secondary', 'success', 'warning', 'danger'];
+const sizes$2 = ['regular', 'medium', 'large'];
 
 /**
  * Create random ID
@@ -93,8 +354,208 @@ const isTagName = (element, tagNames) => {
  * Focusable elements query selector
  */
 const focusableElements = 'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"]), [identifier]';
+/**
+ *
+ * @param {Window} localWindow the window we are lookink for other windows
+ * @returns {Window[]} The list of windows found
+ */
+const getWindows = (localWindow) => {
+  const parentWindows = getParentWindows(localWindow);
+  const childWindows = getChildWindows(localWindow);
+  return [localWindow, ...parentWindows, ...childWindows];
+};
+/**
+ * Get parent windows
+ *
+ * @param {Window} localWindow the window we are lookink for parents
+ * @param {Window[]} windows The list of allready found windows
+ * @returns {Window[]} The list of windows found
+ */
+const getParentWindows = (localWindow, windows = []) => {
+  // Check if is in iframe
+  if (localWindow.self !== localWindow.top) {
+    // Check if we have permission to access parent
+    try {
+      const parentWindow = localWindow.parent;
+      windows.push(parentWindow);
+      return getParentWindows(parentWindow, windows);
+    }
+    catch (err) {
+      console.error('Different hosts between iframes:', err);
+      return windows;
+    }
+  }
+  return windows;
+};
+/**
+ * Get child windows
+ *
+ * @param {Window} localWindow the window we are lookink for children
+ * @param {Window[]} windows The list of allready found windows
+ * @returns {Window[]} The list of windows found
+ */
+const getChildWindows = (localWindow, windows = []) => {
+  if (localWindow.frames.length > 0) {
+    // Window.frames is an array-like object, needs a classic for loop
+    // https://developer.mozilla.org/en-US/docs/Web/API/Window/frames
+    for (let i = 0; i < localWindow.frames.length; i++) {
+      const childWindow = localWindow.frames[i];
+      windows.push(childWindow);
+      getChildWindows(childWindow, windows);
+    }
+  }
+  return windows;
+};
+
+const mgActionMoreCss = ".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{--mg-popover-padding-vertical:1rem;--mg-popover-padding-horizontal:0}.mg-action-more__chevron{transition:200ms}.mg-action-more__chevron--rotate.mg-action-more__chevron{transform:rotate(180deg)}";
+
+/**
+ * MgActionMore['items'] type guard
+ *
+ * @param {unknown} prop commponent items prop
+ * @returns {boolean} return true if type is valid
+ */
+const isMgActionMoreItems = (prop) => {
+  const items = prop;
+  return typeof items === 'object' && items.every(item => typeof item === 'object' && typeof item.label === 'string' && typeof item.mouseEventHandler === 'function');
+};
+/**
+ * MgActionMore['button'] type guard
+ *
+ * @param {unknown} prop commponent button prop
+ * @returns {boolean} return true if type is valid
+ */
+const isMgActionMoreButton = (prop) => {
+  const button = prop;
+  return typeof button === 'object' && typeof button.variant === 'string' && typeof button.isIcon === 'boolean';
+};
+/**
+ * MgActionMore['icon'] type guard
+ *
+ * @param {unknown} prop commponent icon prop
+ * @returns {boolean} return true if type is valid
+ */
+const isMgActionMoreIcon = (prop) => {
+  const icon = prop;
+  return typeof icon === 'object' && typeof icon.icon === 'string';
+};
+const MgActionMore = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /************
+     * Internal *
+     ************/
+    this.name = 'mg-action-more';
+    this.mgPopoverIdentifier = createID(this.name);
+    /************
+     * Merthods *
+     ***********/
+    /**
+     * Toogle expanded props
+     *
+     * @returns {void}
+     */
+    this.toggleExpanded = () => {
+      this.expanded = !this.expanded;
+    };
+    /**
+     * Button click handler
+     *
+     * @returns {void}
+     */
+    this.handleButton = () => {
+      this.toggleExpanded();
+    };
+    /**
+     * Item click handler
+     *
+     * @param {MouseEvent} event click event
+     * @param {MgActionMoreItemType['mouseEventHandler']} customHandler item['mouseEventHandler']
+     * @returns {void}
+     */
+    this.handleItemClick = (event, customHandler) => {
+      this.expanded = false;
+      customHandler(event);
+    };
+    this.icon = { icon: 'ellipsis' };
+    this.button = { variant: 'flat', isIcon: true };
+    this.items = undefined;
+    this.displayChevron = undefined;
+    this.expanded = false;
+  }
+  validateIcon(newValue) {
+    if (newValue && !isMgActionMoreIcon(newValue)) {
+      throw new Error(`<${this.name}> prop icon must match MgActionMoreIconType.`);
+    }
+  }
+  validateButton(newValue) {
+    if (newValue && !isMgActionMoreButton(newValue)) {
+      throw new Error(`<${this.name}> prop button must match MgActionMoreButtonType.`);
+    }
+  }
+  validateItems(newValue) {
+    if (!isMgActionMoreItems(newValue)) {
+      throw new Error(`<${this.name}> prop "items" is required and all values must be the same type, MgActionMoreItemType.`);
+    }
+  }
+  validateDisplayChevron(newValue) {
+    if (newValue && this.button.isIcon === true) {
+      throw new Error(`<${this.name}> prop "displayChevron" can't be used with a 'button" prop "isIcon" attribute.`);
+    }
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Validate props
+   *
+   * @returns {void}
+   */
+  componentWillLoad() {
+    this.messages = initLocales(this.element).messages.actionMore;
+    this.validateItems(this.items);
+    this.validateButton(this.button);
+    this.validateIcon(this.icon);
+    this.validateDisplayChevron(this.displayChevron);
+  }
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render() {
+    const buttonLabel = this.button.label || this.messages.label;
+    const buttonContent = [buttonLabel];
+    if (!this.button.isIcon && this.displayChevron) {
+      buttonContent.push(h("span", { class: {
+          [`${this.name}__chevron`]: true,
+          [`${this.name}__chevron--rotate`]: this.expanded === true,
+          'mg-a11y-animation': true,
+        } }, h("mg-icon", { icon: "chevron-down", size: "small" })));
+    }
+    return (h(Host, { "data-mg-popover-guard": this.mgPopoverIdentifier }, h("span", { class: "mg-action-more" }, h("mg-popover", { identifier: this.mgPopoverIdentifier, display: this.expanded }, h("mg-button", { variant: this.button.variant, isIcon: this.button.isIcon, type: "button", label: buttonLabel, onClick: this.handleButton }, h("mg-icon", Object.assign({}, this.icon)), !this.button.isIcon && buttonContent), h("div", { slot: "content" }, h("mg-menu", { direction: Direction.VERTICAL, label: this.messages.label }, this.items.map(item => {
+      var _a;
+      return (
+      // eslint-disable-next-line react/jsx-no-bind
+      h("mg-menu-item", { key: item.label, status: item.status || Status$1.VISIBLE, onClick: e => this.handleItemClick(e, item.mouseEventHandler), href: item.href }, item.icon && h("mg-icon", { icon: item.icon, slot: "image" }), h("span", { slot: "label" }, item.label), ((_a = item.badge) === null || _a === void 0 ? void 0 : _a.label) && h("mg-badge", { label: item.badge.label, value: item.badge.value, slot: "information", variant: "text-color" })));
+    })))))));
+  }
+  get element() { return getElement(this); }
+  static get watchers() { return {
+    "icon": ["validateIcon"],
+    "button": ["validateButton"],
+    "items": ["validateItems"],
+    "displayChevron": ["validateDisplayChevron"]
+  }; }
+};
+MgActionMore.style = mgActionMoreCss;
 
-const mgBadgeCss = ".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-badge{padding:0 0.4rem;height:var(--mg-badge-size);min-width:var(--mg-badge-size);box-sizing:border-box;border:0.1rem solid;border-radius:calc(var(--mg-badge-size) / 2);font-size:var(--mg-badge-font-size);font-weight:600;text-align:center;line-height:var(--mg-badge-size)}.mg-badge.mg-badge--primary{background-color:hsl(var(--color-dark));border-color:hsl(var(--color-dark));color:hsl(var(--color-light))}.mg-badge.mg-badge--primary.mg-badge--outline{background-color:transparent;color:hsl(var(--color-dark))}.mg-badge.mg-badge--secondary{background-color:hsl(var(--color-light));border-color:hsl(var(--color-light));color:hsl(var(--color-dark))}.mg-badge.mg-badge--secondary.mg-badge--outline{background-color:transparent;color:hsl(var(--color-light))}.mg-badge.mg-badge--success{background-color:hsl(var(--color-success));border-color:hsl(var(--color-success));color:hsl(var(--color-dark))}.mg-badge.mg-badge--success.mg-badge--outline{background-color:transparent;color:hsl(var(--color-success))}.mg-badge.mg-badge--warning{background-color:hsl(var(--color-warning));border-color:hsl(var(--color-warning));color:hsl(var(--color-dark))}.mg-badge.mg-badge--warning.mg-badge--outline{background-color:transparent;color:hsl(var(--color-warning))}.mg-badge.mg-badge--danger{background-color:hsl(var(--color-danger));border-color:hsl(var(--color-danger));color:hsl(var(--color-light))}.mg-badge.mg-badge--danger.mg-badge--outline{background-color:transparent;color:hsl(var(--color-danger))}.mg-badge.mg-badge--info{background-color:hsl(var(--color-info));border-color:hsl(var(--color-info));color:hsl(var(--color-light))}.mg-badge.mg-badge--info.mg-badge--outline{background-color:transparent;color:hsl(var(--color-info))}.mg-badge,mg-badge{display:inline-flex;align-items:center;justify-content:center}";
+/**
+ * List of all possibles variants
+ */
+const variants$4 = ['info', 'primary', 'secondary', 'success', 'warning', 'danger', 'text-color'];
+
+const mgBadgeCss = ".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-badge{padding:0 0.4rem;height:var(--mg-badge-size);min-width:var(--mg-badge-size);box-sizing:border-box;border:0.1rem solid;border-radius:calc(var(--mg-badge-size) / 2);font-size:var(--mg-badge-font-size);font-weight:600;text-align:center;line-height:var(--mg-badge-size)}.mg-badge.mg-badge--primary{background-color:hsl(var(--color-dark));border-color:hsl(var(--color-dark));color:hsl(var(--color-light))}.mg-badge.mg-badge--primary.mg-badge--outline{background-color:transparent;color:hsl(var(--color-dark))}.mg-badge.mg-badge--secondary{background-color:hsl(var(--color-light));border-color:hsl(var(--color-light));color:hsl(var(--color-dark))}.mg-badge.mg-badge--secondary.mg-badge--outline{background-color:transparent;color:hsl(var(--color-light))}.mg-badge.mg-badge--success{background-color:hsl(var(--color-success));border-color:hsl(var(--color-success));color:hsl(var(--color-dark))}.mg-badge.mg-badge--success.mg-badge--outline{background-color:transparent;color:hsl(var(--color-success))}.mg-badge.mg-badge--warning{background-color:hsl(var(--color-warning));border-color:hsl(var(--color-warning));color:hsl(var(--color-dark))}.mg-badge.mg-badge--warning.mg-badge--outline{background-color:transparent;color:hsl(var(--color-warning))}.mg-badge.mg-badge--danger{background-color:hsl(var(--color-danger));border-color:hsl(var(--color-danger));color:hsl(var(--color-light))}.mg-badge.mg-badge--danger.mg-badge--outline{background-color:transparent;color:hsl(var(--color-danger))}.mg-badge.mg-badge--info{background-color:hsl(var(--color-info));border-color:hsl(var(--color-info));color:hsl(var(--color-light))}.mg-badge.mg-badge--info.mg-badge--outline{background-color:transparent;color:hsl(var(--color-info))}.mg-badge.mg-badge--text-color{background-color:currentColor;border-color:currentColor}.mg-badge.mg-badge--text-color .mg-badge__value{color:hsl(var(--mg-badge-text-color, var(--color-light)))}.mg-badge.mg-badge--text-color.mg-badge--outline{background-color:transparent}.mg-badge.mg-badge--text-color.mg-badge--outline .mg-badge__value{color:currentColor}.mg-badge,mg-badge{display:inline-flex;align-items:center;justify-content:center}";
 
 const MgBadge = class {
   constructor(hostRef) {
@@ -112,7 +573,7 @@ const MgBadge = class {
   }
   validateValue(newValue) {
     if (`${newValue}`.match(/^(\d+\+*|[?*!a-z])$/i) === null) {
-      throw new Error('<mg-badge> prop "value" must be interger or ponctuation character.');
+      throw new Error('<mg-badge> prop "value" must be integer or ponctuation character.');
     }
   }
   validateLabel(newValue) {
@@ -122,7 +583,7 @@ const MgBadge = class {
   }
   validateVariant(newValue, oldValue) {
     if (!variants$4.includes(newValue)) {
-      throw new Error(`<mg-badge> prop "variant" must be one of : ${variants$4.join(', ')}.`);
+      throw new Error(`<mg-badge> prop "variant" must be one of: ${variants$4.join(', ')}.`);
     }
     else {
       if (oldValue !== undefined) {
@@ -154,7 +615,7 @@ const MgBadge = class {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h("span", { class: this.classList.join() }, this.value, h("span", { class: "sr-only" }, this.label)));
+    return (h("span", { class: this.classList.join() }, h("span", { class: "mg-badge__value" }, this.value), h("span", { class: "sr-only" }, this.label)));
   }
   static get watchers() { return {
     "value": ["validateValue"],
@@ -170,7 +631,7 @@ MgBadge.style = mgBadgeCss;
  */
 const variants$3 = ['primary', 'secondary', 'danger', 'danger-alt', 'info', 'flat', 'success', 'link'];
 
-const mgButtonCss = ":host{display:inline-block;vertical-align:middle;max-width:100%}:host(:focus-visible){outline:0}:host(:focus-visible) .mg-button{outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width:0.2rem}:host(:hover) .mg-button--flat:not(.mg-button--disabled),:host(:focus) .mg-button--flat:not(.mg-button--disabled),:host(:active) .mg-button--flat:not(.mg-button--disabled){background:hsla(var(--color-dark), 0.1)}:host([full-width]){display:block}:host([disabled]),:host([aria-disabled=true]){pointer-events:none}.mg-button.mg-button--primary{border-color:hsl(var(--mg-button-primary-border-color, var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--mg-button-primary-font-color));background:linear-gradient(to bottom, hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l)), hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--primary:not(.mg-button--disabled),:host(:focus) .mg-button--primary:not(.mg-button--disabled),:host(:active) .mg-button--primary:not(.mg-button--disabled){background:hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l))}.mg-button.mg-button--secondary{border-color:hsl(var(--mg-button-secondary-border-color, var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--mg-button-secondary-font-color));background:linear-gradient(to bottom, hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l)), hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--secondary:not(.mg-button--disabled),:host(:focus) .mg-button--secondary:not(.mg-button--disabled),:host(:active) .mg-button--secondary:not(.mg-button--disabled){background:hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l))}.mg-button.mg-button--danger{border-color:hsl(var(--mg-button-danger-border-color, var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-neutral));background:linear-gradient(to bottom, hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l)), hsl(var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--danger:not(.mg-button--disabled),:host(:focus) .mg-button--danger:not(.mg-button--disabled),:host(:active) .mg-button--danger:not(.mg-button--disabled){background:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l))}.mg-button.mg-button--danger-alt{border-color:hsl(var(--mg-button-danger-alt-border-color, var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-danger));background:linear-gradient(to bottom, hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l)), hsl(var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--danger-alt:not(.mg-button--disabled),:host(:focus) .mg-button--danger-alt:not(.mg-button--disabled),:host(:active) .mg-button--danger-alt:not(.mg-button--disabled){background:hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l))}.mg-button.mg-button--info{border-color:hsl(var(--mg-button-info-border-color, var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-neutral));background:linear-gradient(to bottom, hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l)), hsl(var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--info:not(.mg-button--disabled),:host(:focus) .mg-button--info:not(.mg-button--disabled),:host(:active) .mg-button--info:not(.mg-button--disabled){background:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l))}.mg-button.mg-button--success{border-color:hsl(var(--mg-button-success-border-color, var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-dark));background:linear-gradient(to bottom, hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l)), hsl(var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--success:not(.mg-button--disabled),:host(:focus) .mg-button--success:not(.mg-button--disabled),:host(:active) .mg-button--success:not(.mg-button--disabled){background:hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l))}.mg-button{position:relative;display:inline-flex;align-items:center;column-gap:0.6rem;padding:calc((var(--default-size) - 0.2rem - var(--font-size) * var(--line-height)) / 2) 1.1rem;min-height:var(--default-size);box-sizing:border-box;border-top-right-radius:var(--mg-button-border-radius-top-right, var(--mg-button-border-radius));border-top-left-radius:var(--mg-button-border-radius-top-left, var(--mg-button-border-radius));border-bottom-right-radius:var(--mg-button-border-radius-bottom-right, var(--mg-button-border-radius));border-bottom-left-radius:var(--mg-button-border-radius-bottom-left, var(--mg-button-border-radius));cursor:pointer;background-image:none;border-top-width:var(--mg-button-border-top-width, 0.1rem);border-right-width:var(--mg-button-border-right-width, 0.1rem);border-bottom-width:var(--mg-button-border-bottom-width, 0.1rem);border-left-width:var(--mg-button-border-left-width, 0.1rem);border-style:solid;text-decoration:none;font-family:inherit;font-weight:var(--mg-button-font-weight, normal);text-align:left;font-size:var(--font-size);touch-action:manipulation}.mg-button.mg-button--disabled{opacity:var(--mg-button-disabled-opacity);cursor:default}.mg-button.mg-button--icon{padding:0;justify-content:center;width:var(--default-size);height:var(--default-size);border-top-right-radius:var(--mg-button-border-radius-top-right, var(--mg-button-icon-border-radius));border-top-left-radius:var(--mg-button-border-radius-top-left, var(--mg-button-icon-border-radius));border-bottom-right-radius:var(--mg-button-border-radius-bottom-right, var(--mg-button-icon-border-radius));border-bottom-left-radius:var(--mg-button-border-radius-bottom-left, var(--mg-button-icon-border-radius));font-size:var(--font-size);line-height:var(--font-size)}.mg-button.mg-button--flat{background:none;border:none}.mg-button.mg-button--link{padding:unset;min-height:unset;background:unset;border:unset;text-decoration:underline}.mg-button.mg-button--link slot{font-weight:600}.mg-button.mg-button--link:hover{text-decoration:none}.mg-button.mg-button--full-width{display:flex;justify-content:center}.mg-button.mg-button--loading>mg-icon:first-of-type{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%)}.mg-button.mg-button--loading .mg-button__content{opacity:0}.mg-button mg-icon:only-child,.mg-button ::slotted(mg-icon){display:inline-flex;flex-shrink:0;line-height:1;margin:auto 0}.mg-button slot,.mg-button ::slotted(*:not(mg-icon)){text-decoration:none;font-family:inherit;font-weight:var(--mg-button-font-weight, normal);text-align:left;font-size:var(--font-size);display:flex;align-items:center;column-gap:0.6rem}";
+const mgButtonCss = ":host{display:inline-block;vertical-align:middle;max-width:100%}:host(:focus-visible){outline:0}:host(:focus-visible) .mg-button{outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width:0.2rem}:host(:hover) .mg-button--flat:not(.mg-button--disabled){background:hsl(var(--color-dark), 0.1)}:host([full-width]){display:block}:host([disabled]),:host([aria-disabled=true]){pointer-events:none}.mg-button.mg-button--primary{border-color:hsl(var(--mg-button-primary-border-color, var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--mg-button-primary-font-color));background:linear-gradient(to bottom, hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l)), hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--primary:not(.mg-button--disabled){background:hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l))}.mg-button.mg-button--secondary{border-color:hsl(var(--mg-button-secondary-border-color, var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--mg-button-secondary-font-color));background:linear-gradient(to bottom, hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l)), hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--secondary:not(.mg-button--disabled){background:hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l))}.mg-button.mg-button--danger{border-color:hsl(var(--mg-button-danger-border-color, var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-neutral));background:linear-gradient(to bottom, hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l)), hsl(var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--danger:not(.mg-button--disabled){background:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l))}.mg-button.mg-button--danger-alt{border-color:hsl(var(--mg-button-danger-alt-border-color, var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-danger));background:linear-gradient(to bottom, hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l)), hsl(var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--danger-alt:not(.mg-button--disabled){background:hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l))}.mg-button.mg-button--info{border-color:hsl(var(--mg-button-info-border-color, var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-neutral));background:linear-gradient(to bottom, hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l)), hsl(var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--info:not(.mg-button--disabled){background:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l))}.mg-button.mg-button--success{border-color:hsl(var(--mg-button-success-border-color, var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-dark));background:linear-gradient(to bottom, hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l)), hsl(var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--success:not(.mg-button--disabled){background:hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l))}.mg-button{position:relative;display:inline-flex;align-items:center;column-gap:0.6rem;padding:calc((var(--default-size) - 0.2rem - var(--font-size) * var(--line-height)) / 2) 1.1rem;min-height:var(--default-size);box-sizing:border-box;border-top-right-radius:var(--mg-button-border-radius-top-right, var(--mg-button-border-radius));border-top-left-radius:var(--mg-button-border-radius-top-left, var(--mg-button-border-radius));border-bottom-right-radius:var(--mg-button-border-radius-bottom-right, var(--mg-button-border-radius));border-bottom-left-radius:var(--mg-button-border-radius-bottom-left, var(--mg-button-border-radius));cursor:pointer;background-image:none;border-top-width:var(--mg-button-border-top-width, 0.1rem);border-right-width:var(--mg-button-border-right-width, 0.1rem);border-bottom-width:var(--mg-button-border-bottom-width, 0.1rem);border-left-width:var(--mg-button-border-left-width, 0.1rem);border-style:solid;text-decoration:none;font-family:inherit;font-weight:var(--mg-button-font-weight, normal);text-align:left;font-size:var(--font-size);touch-action:manipulation}.mg-button.mg-button--disabled{opacity:var(--mg-button-disabled-opacity);cursor:default}.mg-button.mg-button--icon{padding:0;justify-content:center;width:var(--default-size);height:var(--default-size);border-top-right-radius:var(--mg-button-border-radius-top-right, var(--mg-button-icon-border-radius));border-top-left-radius:var(--mg-button-border-radius-top-left, var(--mg-button-icon-border-radius));border-bottom-right-radius:var(--mg-button-border-radius-bottom-right, var(--mg-button-icon-border-radius));border-bottom-left-radius:var(--mg-button-border-radius-bottom-left, var(--mg-button-icon-border-radius));font-size:var(--font-size);line-height:var(--font-size)}.mg-button.mg-button--flat{background:none;border:none}.mg-button.mg-button--link{padding:unset;min-height:unset;background:unset;border:unset;border-radius:unset;text-decoration:underline}.mg-button.mg-button--link slot{font-weight:600}.mg-button.mg-button--link:hover{text-decoration:none}.mg-button.mg-button--full-width{display:flex;justify-content:center}.mg-button.mg-button--loading>mg-icon:first-of-type{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%)}.mg-button.mg-button--loading .mg-button__content{opacity:0}.mg-button mg-icon:only-child,.mg-button ::slotted(mg-icon){display:inline-flex;flex-shrink:0;line-height:1;margin:auto 0}.mg-button slot,.mg-button ::slotted(*:not(mg-icon)){text-decoration:none;font-family:inherit;font-weight:var(--mg-button-font-weight, normal);text-align:left;font-size:var(--font-size);display:flex;align-items:center;column-gap:0.6rem}";
 
 const MgButton = class {
   constructor(hostRef) {
@@ -238,7 +699,7 @@ const MgButton = class {
   }
   validateVariant(newValue, oldValue) {
     if (!variants$3.includes(newValue)) {
-      throw new Error(`<mg-button> prop "variant" must be one of : ${variants$3.join(', ')}`);
+      throw new Error(`<mg-button> prop "variant" must be one of: ${variants$3.join(', ')}`);
     }
     else {
       if (oldValue !== undefined) {
@@ -294,212 +755,50 @@ const MgButton = class {
     if (this.isIcon) {
       this.classList.add(`mg-button--icon`);
       if (typeof this.label !== 'string' || this.label.trim() === '') {
-        throw new Error(`<mg-button> prop "label" is mandatory when prop "isIcon" is set to true.`);
-      }
-    }
-    // Store the onclick fn
-    this.onClickElementFn = this.element.onclick;
-    this.disabledHandler(this.disabled);
-  }
-  /**
-   * Render component
-   *
-   * @returns {HTMLElement} html element
-   */
-  render() {
-    return (h(Host, { role: "button", tabIndex: 0, type: this.type, form: this.form, "full-width": this.fullWidth, "aria-label": this.label, "aria-disabled": this.disabled !== undefined && this.disabled.toString(), onClick: this.handleClick, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown }, h("div", { class: this.classList.join(), id: this.identifier }, this.loading && h("mg-icon", { icon: "loader", spin: true }), h("div", { class: "mg-button__content" }, h("slot", null)))));
-  }
-  get element() { return getElement(this); }
-  static get watchers() { return {
-    "variant": ["validateVariant"],
-    "fullWidth": ["validateFullWidth"],
-    "disabled": ["disabledHandler"],
-    "loading": ["loadingHandler"]
-  }; }
-};
-MgButton.style = mgButtonCss;
-
-const mgCardCss = ".mg-card{position:relative;width:100%;padding:var(--mg-card-padding);overflow:var(--mg-card-overflow);box-sizing:border-box;z-index:inherit;background:var(--mg-card-background);border:var(--mg-card-border);border-radius:var(--mg-card-border-radius);box-shadow:var(--mg-card-box-shadow)}";
-
-const MgCard = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  /*************
-   * Lifecycle *
-   *************/
-  /**
-   * Render
-   *
-   * @returns {HTMLElement} HTML Element
-   */
-  render() {
-    return (h("div", { class: "mg-card" }, h("slot", null)));
-  }
-};
-MgCard.style = mgCardCss;
-
-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",
-	allRequired: "All fields are 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 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
+        throw new Error(`<mg-button> prop "label" is mandatory when prop "isIcon" is set to true.`);
+      }
+    }
+    // Store the onclick fn
+    this.onClickElementFn = this.element.onclick;
+    this.disabledHandler(this.disabled);
+  }
+  /**
+   * Render component
+   *
+   * @returns {HTMLElement} html element
+   */
+  render() {
+    return (h(Host, { role: "button", tabIndex: 0, type: this.type, form: this.form, "full-width": this.fullWidth, "aria-label": this.label, "aria-disabled": this.disabled !== undefined && this.disabled.toString(), onClick: this.handleClick, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown }, h("div", { class: this.classList.join(), id: this.identifier }, this.loading && h("mg-icon", { icon: "loader", spin: true }), h("div", { class: "mg-button__content" }, h("slot", null)))));
+  }
+  get element() { return getElement(this); }
+  static get watchers() { return {
+    "variant": ["validateVariant"],
+    "fullWidth": ["validateFullWidth"],
+    "disabled": ["disabledHandler"],
+    "loading": ["loadingHandler"]
+  }; }
 };
+MgButton.style = mgButtonCss;
 
-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",
-	allRequired: "Tous les champs sont obligatoires"
-};
-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 fr = {
-	errors: errors,
-	nbCharLeft: nbCharLeft,
-	input: input,
-	form: form,
-	message: message,
-	modal: modal,
-	pagination: pagination,
-	panel: panel,
-	skipLinks: skipLinks,
-	general: general
-};
+const mgCardCss = ".mg-card{position:relative;width:100%;padding:var(--mg-card-padding, var(--mg-card-padding-default));overflow:var(--mg-card-overflow, var(--mg-card-overflow-default));box-sizing:border-box;z-index:inherit;background:var(--mg-card-background, var(--mg-card-background-default));border:var(--mg-card-border, var(--mg-card-border-default));border-radius:var(--mg-card-border-radius, var(--mg-card-border-radius-default));box-shadow:var(--mg-card-box-shadow, var(--mg-card-box-shadow-default))}.mg-card ::slotted(*){--mg-card-border:var(--mg-card-border-default);--mg-card-padding:var(--mg-card-padding-default);--mg-card-border-radius:var(--mg-card-border-radius-default);--mg-card-background:var(--mg-card-background-default);--mg-card-box-shadow:var(--mg-card-box-shadow-default)}";
 
-const defaultLocale = 'en';
-const messages = { en, fr };
-/**
- * Get locale
- *
- * @param {HTMLElement} element element that needs to know the locale to use
- * @returns {string} locale
- */
-const getLocale = (element) => {
-  var _a;
-  // validate locale
-  const closestLang = Intl.NumberFormat.supportedLocalesOf((_a = element.closest('[lang]')) === null || _a === void 0 ? void 0 : _a.lang);
-  return closestLang.length > 0 ? closestLang[0] : navigator.language || defaultLocale;
-};
-/**
- * Get Intl object
- * 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
- * @returns {{ locale: string; messages: unknown }} messages object
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const initLocales = (element) => {
-  // Get local
-  const locale = getLocale(element);
-  // Only keep first subtag
-  const localeSubtag = locale.split('-').shift();
-  // Return
-  return {
-    locale,
-    messages: messages[localeSubtag] || messages[defaultLocale],
-  };
+const MgCard = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render() {
+    return (h("div", { class: "mg-card" }, h("slot", null)));
+  }
 };
+MgCard.style = mgCardCss;
 
 const mgCharacterLeftCss = "mg-character-left.sc-mg-character-left{display:block}";
 
@@ -645,12 +944,12 @@ const MgForm = class {
         // All fields are required
         // mg-input-toggle can not be required
         if (requiredInputs.length > 0 && requiredInputs.length === this.mgInputs.filter(input => input.nodeName !== 'MG-INPUT-TOGGLE').length) {
-          this.requiredMessage = this.messages.form.allRequired;
+          this.requiredMessage = requiredInputs.length === 1 ? this.messages.form.allRequiredSingle : this.messages.form.allRequired;
           this.classList.add(this.classAllRequired);
         }
         // Some fields are required
         else if (requiredInputs.length > 0) {
-          this.requiredMessage = this.messages.form.required;
+          this.requiredMessage = requiredInputs.length === 1 ? this.messages.form.requiredSingle : this.messages.form.required;
         }
       }
     };
@@ -801,6 +1100,7 @@ const icons = {
   'archive': () => (h("path", { fill: "currentColor", d: "M3 6v6.96c0 .57.46 1.04 1.04 1.04H12c.55 0 1-.45 1-1V6H3Zm7 2H6V7h4v1Zm3-3H3c-.55 0-1-.45-1-1V3c0-.55.45-1 1-1h10c.55 0 1 .45 1 1v1c0 .55-.45 1-1 1Z" })),
   'archive-outline': () => (h("path", { fill: "currentColor", d: "M13 2H3c-.55 0-1 .45-1 1v2c0 .55.45 1 1 1v6.96c0 .57.46 1.04 1.04 1.04H12c.55 0 1-.45 1-1V6c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1Zm-1 11H4.04S4 12.98 4 12.96V6h8v7Zm1-8H3V3h10v2Zm-3 3H6V7h4v1Z" })),
   'arrow-down': () => (h("path", { fill: "currentColor", d: "M13,10.1H10.23a.31.31,0,0,1-.32-.28h0V.94A.3.3,0,0,0,9.59.65H6.37A.32.32,0,0,0,6,.94H6V9.81a.29.29,0,0,1-.31.29H3a.3.3,0,0,0-.31.29.27.27,0,0,0,.08.22l5.06,4.58a.36.36,0,0,0,.46,0l5-4.58a.29.29,0,0,0,0-.42C13.22,10.1,13.12,10.1,13,10.1Z" })),
+  'arrow-down-a-z': () => (h("path", { fill: "currentColor", d: "m6.53 10.9-1.41 1.41-.71.71-2.12-2.12.71-.71.88.88V3.02h1v8.12l.95-.95.71.71ZM12.29 6H10.5l-.36 1H9.08l1.79-5h1.05l1.79 5h-1.06l-.36-1Zm-.36-1.02-.53-1.49-.53 1.49h1.06Zm1.79 5.18V9H9.09v1h3.29l-3.29 2.84V14h4.63v-1h-3.29l3.29-2.84Z" })),
   'arrow-down-right': () => (h("path", { fill: "currentColor", d: "m1.98 3.47 8.75 8.75H6.94c-.58 0-1.05.47-1.05 1.06s.47 1.05 1.05 1.05h6.33c.58 0 1.05-.47 1.05-1.05V6.94a1.05 1.05 0 1 0-2.1 0v3.79L3.47 1.98c-.41-.41-1.08-.41-1.49 0-.41.41-.41 1.08 0 1.49Z" })),
   'arrow-left': () => (h("path", { fill: "currentColor", d: "M5.88,12.93V10.18a.3.3,0,0,1,.28-.32H15a.31.31,0,0,0,.29-.33h0V6.32A.31.31,0,0,0,15,6H6.17a.32.32,0,0,1-.29-.31h0V2.93a.3.3,0,0,0-.28-.32.32.32,0,0,0-.23.09L.79,7.76a.36.36,0,0,0,0,.46l4.58,5a.31.31,0,0,0,.43,0A.4.4,0,0,0,5.88,12.93Z" })),
   'arrow-right': () => (h("path", { fill: "currentColor", d: "M10.16,3V5.75a.3.3,0,0,1-.28.32H1a.31.31,0,0,0-.29.33h0V9.61A.31.31,0,0,0,1,9.94H9.87a.29.29,0,0,1,.29.31h0V13a.3.3,0,0,0,.28.32.32.32,0,0,0,.23-.09l4.58-5.06a.36.36,0,0,0,0-.46l-4.58-5a.3.3,0,0,0-.42,0C10.16,2.76,10.16,2.87,10.16,3Z" })),
@@ -809,6 +1109,7 @@ const icons = {
   'arrow-up': () => (h("path", { fill: "currentColor", d: "M3.06,5.82H5.81a.31.31,0,0,1,.32.28h0V15a.31.31,0,0,0,.33.29H9.67A.3.3,0,0,0,10,15h0V6.11a.3.3,0,0,1,.31-.29h2.75a.3.3,0,0,0,.23-.51L8.23.73a.36.36,0,0,0-.46,0l-5,4.58a.3.3,0,0,0,0,.43C2.82,5.83,2.92,5.82,3.06,5.82Z" })),
   'arrow-up-right': () => (h("path", { fill: "currentColor", d: "m3.47 14.02 8.75-8.75v3.78c0 .58.47 1.05 1.06 1.05s1.05-.47 1.05-1.05V2.72c0-.58-.47-1.05-1.05-1.05H6.94a1.05 1.05 0 1 0 0 2.1h3.78l-8.74 8.76c-.41.41-.41 1.08 0 1.49s1.08.41 1.49 0Z" })),
   'arrow-up-right-square': () => (h("path", { fill: "currentColor", d: "M14.33 3v10A1.34 1.34 0 0 1 13 14.33H3A1.34 1.34 0 0 1 1.67 13V3A1.34 1.34 0 0 1 3 1.67h10A1.34 1.34 0 0 1 14.33 3Zm-2.48.46H8.68a.67.67 0 0 0-.68.7.63.63 0 0 0 .2.47l.91.91-5.53 5.53a.33.33 0 0 0 0 .48l.87.87a.33.33 0 0 0 .48 0l5.53-5.52.91.9a.69.69 0 0 0 1 0 .71.71 0 0 0 .19-.48V4.15a.67.67 0 0 0-.67-.67Z" })),
+  'arrow-up-z-a': () => (h("path", { fill: "currentColor", d: "m5.82 5.85-.94-.94v8.11h-1V4.96l-.89.89-.71-.71 1.41-1.41.71-.71.71.71 1.41 1.41-.71.71ZM12.29 13H10.5l-.36 1H9.08l1.79-5h1.05l1.79 5h-1.06l-.36-1Zm-.36-1.02-.53-1.49-.53 1.49h1.06Zm1.79-8.82V2H9.09v1h3.29L9.09 5.84V7h4.63V6h-3.29l3.29-2.84Z" })),
   'arrows-compare': () => h("path", { fill: "currentColor", d: "M5.81 9.47H.67v1.47h5.14v2.2l2.93-2.93-2.93-2.93v2.2Zm4.39-.73v-2.2h5.14V5.07H10.2v-2.2L7.27 5.8l2.93 2.93Z" }),
   'arrows-right-down': () => (h("path", { fill: "currentColor", d: "M10.68 10.78c.16.17.16.45-.02.61l-2.8 2.78a.43.43 0 0 1-.31.12.42.42 0 0 1-.31-.12l-2.8-2.78a.44.44 0 0 1 0-.62.44.44 0 0 1 .62 0l2.06 2.05V5.38H2.11c-.24 0-.44-.19-.44-.44 0-.24.2-.44.44-.44H8v8.32l2.06-2.05a.44.44 0 0 1 .62 0Zm3.53-6.14-2.78-2.8a.438.438 0 0 0-.61-.02.44.44 0 0 0 0 .62l2.05 2.06H8.89v.88h3.98l-2.05 2.06a.44.44 0 0 0 0 .62c.17.17.45.17.62 0l2.78-2.8s.07-.09.09-.14c.02-.05.03-.11.03-.17 0-.11-.04-.23-.12-.31Z" })),
   'arrows-right-left': () => (h("path", { fill: "currentColor", d: "M.73,5.65V5.23a.64.64,0,0,1,.64-.64H12V3.31a.64.64,0,0,1,.64-.64.63.63,0,0,1,.45.18L15.19,5a.63.63,0,0,1,0,.9L13.05,8A.65.65,0,0,1,12,7.57V6.29H1.37a.64.64,0,0,1-.64-.64Zm14,4.06H4.09V8.43A.64.64,0,0,0,3,8L.87,10.11a.63.63,0,0,0,0,.9L3,13.15a.64.64,0,0,0,.91,0,.61.61,0,0,0,.18-.45V11.41H14.73a.63.63,0,0,0,.64-.64h0v-.42a.63.63,0,0,0-.64-.64Z" })),
@@ -819,8 +1120,13 @@ const icons = {
   'briefcase': () => (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': () => (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" })),
   'calculator': () => (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': () => (h("path", { fill: "currentColor", d: "M14.52 4.43h-13V2.92a1.28 1.28 0 0 1 1.25-1.28h10.36A1.39 1.39 0 0 1 14.52 3Zm0 .93v7.91a1.41 1.41 0 0 1-1.4 1.4H2.88a1.41 1.41 0 0 1-1.4-1.4V5.36Zm-3.73 3.37a.35.35 0 0 0 .35.35h1.16a.34.34 0 0 0 .35-.35V7.57a.35.35 0 0 0-.35-.35h-1.16a.35.35 0 0 0-.35.35Zm-5.58 2.56a.35.35 0 0 0-.35-.35H3.7a.35.35 0 0 0-.35.35v1.17a.35.35 0 0 0 .35.35h1.16a.35.35 0 0 0 .35-.35Zm0-3.72a.35.35 0 0 0-.35-.35H3.7a.35.35 0 0 0-.35.35v1.16a.34.34 0 0 0 .35.35h1.16a.35.35 0 0 0 .35-.35Zm3.72 3.72a.35.35 0 0 0-.35-.35H7.42a.35.35 0 0 0-.35.35v1.17a.35.35 0 0 0 .35.35h1.16a.35.35 0 0 0 .35-.35Zm0-3.72a.35.35 0 0 0-.35-.35H7.42a.35.35 0 0 0-.35.35v1.16a.35.35 0 0 0 .35.35h1.16a.35.35 0 0 0 .35-.35Z" })),
-  'calendar-euro': () => (h("path", { fill: "currentColor", d: "M11.06 3.51h-1.04v.62a.2.2 0 0 1-.2.2H9.4c-.11 0-.21-.09-.21-.2v-.62H4.23v.62c0 .11-.09.2-.21.2h-.41c-.11 0-.21-.09-.21-.2v-.62H2.37c-.57 0-1.03.47-1.03 1.03v7.03c0 .57.47 1.03 1.03 1.03h5.3c-.25-.25-.46-.52-.63-.83H2.68a.53.53 0 0 1-.52-.52V6.61c0-.11.09-.21.21-.21h5.29a4.4 4.4 0 0 1 3.19-1.36c.43 0 .85.06 1.24.18v-.69c0-.57-.46-1.03-1.03-1.03Zm-6.83-.62c0-.11-.09-.21-.21-.21h-.41c-.11 0-.21.09-.21.21v.62h.83v-.62Zm5.79 0c0-.11-.09-.21-.21-.21H9.4c-.11 0-.21.09-.21.21v.62h.83v-.62Zm2.07 3c-.39-.13-.81-.21-1.24-.21-.83 0-1.6.26-2.23.73-.96.69-1.59 1.82-1.59 3.09 0 .86.28 1.65.77 2.29.23.32.52.6.85.83.62.45 1.38.71 2.2.71 2.11 0 3.82-1.72 3.82-3.82 0-1.67-1.08-3.09-2.58-3.61Zm.12 6.18c.01.07-.04.15-.11.16-.09.03-.2.04-.3.05-.14.03-.28.04-.43.04-.61.02-1.18-.18-1.63-.54-.41-.32-.73-.77-.88-1.29h-.37c-.08 0-.15-.06-.15-.15V10c0-.08.07-.14.15-.14h.26v-.5h-.26c-.08 0-.15-.06-.15-.14v-.37c0-.08.07-.14.15-.14h.4a2.576 2.576 0 0 1 2.37-1.7h.1c.22 0 .44.02.64.06.04.01.07.03.08.06.02.03.03.07.02.11l-.02.07-.13.46a.14.14 0 0 1-.17.1c-.15-.03-.3-.04-.45-.05h-.08c-.58.01-1.1.35-1.34.88h1.71c.08.02.12.09.11.17l-.08.36a.15.15 0 0 1-.15.11H9.73c-.01.16-.01.33 0 .5h1.66c.08.02.13.09.11.17l-.07.33c-.02.06-.08.11-.14.11H9.91c.21.56.72.94 1.3 1 .05 0 .1.01.15.01.19 0 .37-.03.55-.06.07-.02.14.03.16.09v.02l.11.52Z" })),
+  'calendar': () => (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': () => (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" })),
+  'calendar-euro': () => [
+    h("path", { key: "calendar-euro-1", d: "M13 2.5h-1v-1h-1v1H5v-1H4v1H3c-.6 0-1 .4-1 1v10c0 .6.4 1 1 1h10c.6 0 1-.4 1-1v-10c0-.6-.4-1-1-1Zm-10 11v-8h10v8H3Z" }),
+    h("path", { key: "calendar-euro-2", d: "m9.79 11.03.71.71c-.53.48-1.23.78-2 .78-1.31 0-2.43-.85-2.83-2.02H4.5v-.75h1.02c-.02-.07-.02-.15-.02-.23 0-.09 0-.18.02-.27H4.5V8.5h1.19a2.974 2.974 0 0 1 4.81-1.2l-.71.71c-.35-.3-.8-.49-1.29-.49-.73 0-1.37.39-1.72.98h1.75v.75H6.52c-.01.09-.02.18-.02.27 0 .08 0 .16.01.23h2.02v.75H6.76c.34.61 1 1.02 1.74 1.02.49 0 .94-.19 1.29-.49Z" }),
+  ],
+  'calendar-euro-outline': () => (h("path", { d: "m9.79 11.02.71.71a2.976 2.976 0 0 1-4.83-1.24H4.5v-.75h1.01c-.01-.08-.01-.15-.01-.23 0-.09 0-.18.02-.27H4.5v-.75h1.19a2.974 2.974 0 0 1 4.81-1.2L9.79 8c-.35-.3-.8-.49-1.29-.49-.73 0-1.37.39-1.72.98h1.75v.75H6.52c-.01.09-.02.18-.02.27 0 .08 0 .16.01.23h2.02v.75H6.76c.34.61 1 1.02 1.74 1.02.49 0 .94-.19 1.29-.49ZM13 3.5v1H3v-1h10m-1-2h-1v1H5v-1H4v1H3c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h10c.55 0 1-.45 1-1v-10c0-.55-.45-1-1-1h-1v-1Zm-9 12v-8h10v8H3Z" })),
   'check': () => (h("path", { fill: "currentColor", d: "m15.27 4.23-1.11-1.18c-.11-.1-.27-.1-.38 0L6 10.36l-3.76-4a.187.187 0 0 0-.26 0L.71 7.6c-.07.07-.07.19 0 .26l5.12 5.41c.07.07.18.07.25 0l1.3-1.23 7.87-7.45c.1-.1.11-.26.01-.37h.01Z" })),
   'check-circle': () => (h("path", { fill: "currentColor", d: "M15.33 8A7.33 7.33 0 1 1 8 .67 7.33 7.33 0 0 1 15.33 8Zm-8.18 3.88 5.44-5.44a.46.46 0 0 0 0-.65l-.67-.67a.48.48 0 0 0-.67 0L6.82 9.54 4.75 7.47a.46.46 0 0 0-.65 0l-.67.67a.46.46 0 0 0 0 .65l3.07 3.07a.46.46 0 0 0 .65 0Z" })),
   'chevron-down': () => (h("path", { fill: "currentColor", d: "M7.43,12.21.9,5.69a.81.81,0,0,1,0-1.14h0l.76-.77a.81.81,0,0,1,1.14,0L8,9l5.2-5.18a.81.81,0,0,1,1.14,0l.76.77a.8.8,0,0,1,0,1.13h0L8.57,12.21a.79.79,0,0,1-1.13,0Z" })),
@@ -832,10 +1138,12 @@ const icons = {
   'chevron-up': () => (h("path", { fill: "currentColor", d: "M8.57,3.79l6.53,6.52a.81.81,0,0,1,0,1.14h0l-.76.77a.81.81,0,0,1-1.14,0L8,7,2.8,12.22a.81.81,0,0,1-1.14,0L.9,11.45a.8.8,0,0,1,0-1.13h0L7.43,3.79a.79.79,0,0,1,1.13,0Z" })),
   'chevron-up-circle': () => (h("path", { fill: "currentColor", d: "M.67 8C.67 3.95 3.95.67 8 .67S15.33 3.95 15.33 8 12.05 15.33 8 15.33C3.95 15.33.67 12.05.67 8ZM7.5 4.63l-4 4c-.28.27-.28.71-.01.99h.01l.5.53c.28.27.72.27 1 0l3-3 3 3c.28.27.72.27 1 0l.5-.51c.28-.27.28-.71.01-.99h-.01l-4-4.01a.697.697 0 0 0-.99-.01H7.5Z" })),
   'clock': () => (h("path", { fill: "currentColor", d: "M8,.67C3.95,.67,.67,3.95,.67,8s3.28,7.33,7.33,7.33,7.33-3.28,7.33-7.33h0C15.33,3.95,12.05,.67,8,.67h0Zm1.69,10.33l-2.61-1.88c-.09-.07-.14-.17-.14-.28V3.84c0-.19,.16-.35,.35-.36h1.42c.2,0,.35,.16,.36,.36V7.93l1.87,1.37c.16,.1,.2,.32,.09,.47v.02h-.01l-.83,1.15c-.12,.15-.34,.18-.5,.06Z" })),
+  'clock-outline': () => (h("path", { fill: "currentColor", d: "m10.95 10.04-.71.71L7.5 8.01v-4h1V7.6l2.45 2.45ZM8 2C4.69 2 2 4.69 2 8s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6m0-1c3.87 0 7 3.13 7 7s-3.13 7-7 7-7-3.13-7-7 3.13-7 7-7Z" })),
+  'code-square-outline': () => (h("path", { fill: "currentColor", d: "m6.32 10.28.73-.73L5.5 8l1.53-1.53-.73-.73-2.27 2.27 2.28 2.28Zm3.37 0L11.97 8 9.69 5.72l-.73.73L10.51 8 8.96 9.55l.73.73ZM3.01 14c-.27 0-.5-.1-.7-.3-.2-.2-.3-.43-.3-.7V3c0-.27.1-.5.3-.7.2-.2.43-.3.7-.3h10c.27 0 .5.1.7.3.2.2.3.43.3.7v10c0 .27-.1.5-.3.7-.2.2-.43.3-.7.3H3Zm0-1h10V3H3v10Zm0-10v10V3Z" })),
   'conversation': () => (h("path", { fill: "currentColor", d: "M11.22,6.48c0-2.11-2.36-3.81-5.28-3.81S.67,4.37.67,6.48a3.15,3.15,0,0,0,1,2.19A5.17,5.17,0,0,1,.72,10a.2.2,0,0,0,0,.21.23.23,0,0,0,.19.12,4.79,4.79,0,0,0,2.25-.6,6.84,6.84,0,0,0,2.82.6C8.86,10.29,11.22,8.58,11.22,6.48Zm3.1,5.23a3.08,3.08,0,0,0,1-2.19C15.28,7.93,14,6.57,12,6a3.84,3.84,0,0,1,0,.48C12,9,9.3,11.05,6,11.05a7.16,7.16,0,0,1-.8-.05A5.6,5.6,0,0,0,10,13.33a6.7,6.7,0,0,0,2.82-.59,4.66,4.66,0,0,0,2.25.59.21.21,0,0,0,.19-.11.2.2,0,0,0,0-.21,5.15,5.15,0,0,1-.91-1.3Z" })),
   'conversation-outline': () => [
-    h("path", { fill: "currentColor", d: "M15 8.5c0 .79-.39 1.51-1.01 2.09v1.91a.508.508 0 0 1-.68.47l-2.26-1.05c-.34.05-.69.08-1.05.08-.23 0-.47-.01-.69-.04-.18 0-.35-.03-.52-.07-.02 0-.03 0-.05-.01-.16-.02-.31-.06-.46-.1-.42-.1-.82-.25-1.18-.43l-.42-.24c-.06-.04-.12-.08-.18-.13.58-.03 1.13-.12 1.64-.27.56.19 1.19.29 1.86.29.29 0 .6-.02.91-.07l.29-.04.28.12 1.5.7v-1.12l.01-.43.31-.3c.32-.29.7-.77.7-1.36 0-.91-.82-1.72-2.01-2.15-.01-.39-.09-.77-.23-1.13.06.02.12.04.19.06.25.08.5.17.73.27.11.05.23.11.34.17.11.06.21.12.31.18.11.07.2.13.3.2.48.35.86.78 1.1 1.26a2.288 2.288 0 0 1 .17.45c.03.11.06.22.07.33.02.12.03.24.03.36Z" }),
-    h("path", { fill: "currentColor", d: "M6 4c2.17 0 4 1.14 4 2.5S8.17 9 6 9c-.29 0-.6-.02-.91-.07l-.3-.04-.27.13-1.51.7V8.17l-.32-.3c-.32-.3-.7-.77-.7-1.36 0-1.36 1.83-2.5 4-2.5m0-1c-2.76 0-5 1.57-5 3.5 0 .79.39 1.51 1.01 2.09v1.91c0 .29.24.5.5.5.06 0 .11 0 .17-.03l2.26-1.05c.34.05.69.08 1.05.08 2.76 0 5-1.57 5-3.5s-2.24-3.5-5-3.5Z" }),
+    h("path", { key: "conversation-outline-1", fill: "currentColor", d: "M15 8.5c0 .79-.39 1.51-1.01 2.09v1.91a.508.508 0 0 1-.68.47l-2.26-1.05c-.34.05-.69.08-1.05.08-.23 0-.47-.01-.69-.04-.18 0-.35-.03-.52-.07-.02 0-.03 0-.05-.01-.16-.02-.31-.06-.46-.1-.42-.1-.82-.25-1.18-.43l-.42-.24c-.06-.04-.12-.08-.18-.13.58-.03 1.13-.12 1.64-.27.56.19 1.19.29 1.86.29.29 0 .6-.02.91-.07l.29-.04.28.12 1.5.7v-1.12l.01-.43.31-.3c.32-.29.7-.77.7-1.36 0-.91-.82-1.72-2.01-2.15-.01-.39-.09-.77-.23-1.13.06.02.12.04.19.06.25.08.5.17.73.27.11.05.23.11.34.17.11.06.21.12.31.18.11.07.2.13.3.2.48.35.86.78 1.1 1.26a2.288 2.288 0 0 1 .17.45c.03.11.06.22.07.33.02.12.03.24.03.36Z" }),
+    h("path", { key: "conversation-outline-2", fill: "currentColor", d: "M6 4c2.17 0 4 1.14 4 2.5S8.17 9 6 9c-.29 0-.6-.02-.91-.07l-.3-.04-.27.13-1.51.7V8.17l-.32-.3c-.32-.3-.7-.77-.7-1.36 0-1.36 1.83-2.5 4-2.5m0-1c-2.76 0-5 1.57-5 3.5 0 .79.39 1.51 1.01 2.09v1.91c0 .29.24.5.5.5.06 0 .11 0 .17-.03l2.26-1.05c.34.05.69.08 1.05.08 2.76 0 5-1.57 5-3.5s-2.24-3.5-5-3.5Z" }),
   ],
   'cog': () => (h("path", { fill: "currentColor", d: "M14.82 9.76 13.56 9a5.54 5.54 0 0 0 0-2.07l1.26-.72a.36.36 0 0 0 .18-.38A7.5 7.5 0 0 0 13.37 3a.35.35 0 0 0-.44 0l-1.26.72a5.51 5.51 0 0 0-1.79-1V1.21a.34.34 0 0 0-.27-.34 7.29 7.29 0 0 0-3.22 0 .34.34 0 0 0-.28.34v1.45a5.83 5.83 0 0 0-1.79 1L3.06 3a.35.35 0 0 0-.43 0A7.24 7.24 0 0 0 1 5.83a.34.34 0 0 0 .16.41L2.44 7a5.49 5.49 0 0 0 0 2l-1.26.73a.35.35 0 0 0-.16.41A7.24 7.24 0 0 0 2.63 13a.35.35 0 0 0 .43.07l1.26-.73a5.56 5.56 0 0 0 1.79 1v1.45a.35.35 0 0 0 .28.34 7.29 7.29 0 0 0 3.22 0 .35.35 0 0 0 .28-.34v-1.45a6 6 0 0 0 1.79-1l1.26.73a.35.35 0 0 0 .43-.07A7.39 7.39 0 0 0 15 10.17a.37.37 0 0 0-.17-.41Zm-6.82.6A2.36 2.36 0 1 1 10.35 8 2.36 2.36 0 0 1 8 10.36Z" })),
   'comment': () => (h("path", { fill: "currentColor", d: "M8 1.67c-3.37-.12-6.21 2.51-6.33 5.88 0 1.36.5 2.68 1.41 3.69-.26 1-.72 1.94-1.36 2.76-.04.08-.04.17 0 .25.03.08.1.13.18.13 1.3-.03 2.54-.55 3.48-1.45.83.34 1.72.51 2.62.5 3.37.12 6.21-2.51 6.33-5.88-.12-3.37-2.96-6-6.33-5.88Zm2.53 8.43c0 .14-.11.25-.25.25H5.73c-.14 0-.25-.1-.26-.24V9.2c0-.17.13-.3.3-.31h4.5c.14 0 .26.12.26.26v.95Zm.92-3.29c0 .17-.13.3-.3.3h-6.3c-.17 0-.3-.13-.3-.3V6c0-.16.12-.29.28-.3H11.15c.16 0 .29.12.3.28V6.81Z" })),
@@ -849,34 +1157,35 @@ const icons = {
   'download': () => (h("path", { fill: "currentColor", d: "M6.4 2v4.1c0 .2-.1.3-.3.3H4c-.2 0-.3.1-.3.3 0 .1 0 .2.1.2l4 4c.1.1.3.1.4 0l4-4c.1-.1.1-.3 0-.4-.1-.1-.1-.1-.2-.1H9.9c-.2 0-.3-.1-.3-.3V2c0-.2-.1-.3-.3-.3H6.7c-.1 0-.3.1-.3.3zm7.9 11v1c0 .2-.1.3-.3.3H2c-.2 0-.3-.1-.3-.3v-1c0-.2.1-.3.3-.3h12c.2 0 .3.1.3.3z" })),
   'ellipsis': () => (h("path", { fill: "currentColor", d: "M2.5 6.17A1.83 1.83 0 1 0 4.33 8c0-1.01-.82-1.83-1.83-1.83Zm11 0A1.83 1.83 0 1 0 15.33 8c0-1.01-.82-1.83-1.83-1.83Zm-5.5 0A1.83 1.83 0 1 0 9.83 8c0-1.01-.82-1.83-1.83-1.83Z" })),
   'ellipsis-vertical': () => (h("path", { fill: "currentColor", d: "M6.17 13.5A1.83 1.83 0 1 0 8 11.67c-1.01 0-1.83.82-1.83 1.83Zm0-11A1.83 1.83 0 1 0 8 .67c-1.01 0-1.83.82-1.83 1.83Zm0 5.5A1.83 1.83 0 1 0 8 6.17c-1.01 0-1.83.82-1.83 1.83Z" })),
-  'euro': () => (h("path", { fill: "currentColor", d: "M13 13.14a.4.4 0 0 0-.47-.31A7.79 7.79 0 0 1 11 13a4.31 4.31 0 0 1-4-2.79h3.8a.41.41 0 0 0 .39-.31l.19-.9a.39.39 0 0 0-.3-.47H6.51a7.07 7.07 0 0 1 0-1.38h4.89a.4.4 0 0 0 .39-.31l.22-1a.4.4 0 0 0-.3-.47H7a4.2 4.2 0 0 1 3.92-2.45 6.57 6.57 0 0 1 1.26.14.41.41 0 0 0 .47-.29l.4-1.45a.4.4 0 0 0-.28-.48A9.43 9.43 0 0 0 11 .67a7.12 7.12 0 0 0-6.83 4.7h-1.1a.4.4 0 0 0-.4.39v1a.4.4 0 0 0 .4.39h.72a9.08 9.08 0 0 0 0 1.38h-.72a.39.39 0 0 0-.4.39v.93a.4.4 0 0 0 .4.39h1A7 7 0 0 0 11 15.3a8.7 8.7 0 0 0 2-.25.39.39 0 0 0 .3-.46l-.3-1.45Z" })),
+  'euro': () => (h("path", { fill: "currentColor", d: "m12.1 11.02 1.4 1.42a5.948 5.948 0 0 1-4 1.56c-2.64 0-4.86-1.68-5.66-4.04H1.5v-1.5h2.02C3.5 8.3 3.5 8.16 3.5 8c0-.18 0-.36.04-.54H1.5v-1.5h2.38C4.7 3.66 6.9 2 9.5 2c1.54 0 2.94.6 4 1.56l-1.4 1.42c-.7-.6-1.6-.98-2.6-.98-1.46 0-2.74.78-3.44 1.96h3.5v1.5H5.54c-.02.18-.04.36-.04.54 0 .16 0 .32.02.46h4.04v1.5H6.02C6.7 11.18 8.02 12 9.5 12c1 0 1.9-.38 2.6-.98Z" })),
   'euro-circle': () => (h("path", { fill: "currentColor", d: "M8 .67C3.95.67.67 3.95.67 8S3.95 15.33 8 15.33s7.33-3.28 7.33-7.33S12.05.67 8 .67Zm2.27 11.4c-.38.09-.76.14-1.15.14a4.038 4.038 0 0 1-3.99-2.92h-.58c-.13 0-.23-.1-.23-.22v-.54c0-.12.11-.22.23-.22h.41a5.34 5.34 0 0 1 0-.8h-.41c-.13 0-.23-.1-.23-.22v-.58c0-.13.11-.22.23-.22h.63c.6-1.65 2.18-2.74 3.94-2.71.34 0 .68.03 1.02.1.12.03.19.16.16.28l-.23.84c-.03.12-.15.19-.27.17-.24-.05-.48-.08-.73-.08A2.42 2.42 0 0 0 6.81 6.5h2.71c.12.03.2.15.17.27l-.13.58c-.02.1-.12.18-.22.18H6.52c-.03.26-.03.53 0 .8h2.63c.12.03.2.15.17.27l-.11.52c-.03.1-.12.18-.22.18H6.8c.36.96 1.28 1.6 2.31 1.61.3 0 .59-.04.88-.1.12-.02.24.05.27.18l.17.84c.02.12-.05.24-.17.27v-.03Z" })),
   'exclamation-circle': () => (h("path", { fill: "currentColor", d: "M8 15.33c4.05 0 7.33-3.28 7.33-7.33S12.05.67 8 .67.67 3.95.67 8 3.95 15.33 8 15.33Zm.95-3.3c0 .15-.12.27-.28.27h-1.4c-.15 0-.28-.12-.28-.27v-1.31c0-.15.12-.28.28-.28h1.4c.15 0 .28.12.28.28v1.31ZM7 3.96c0-.14.11-.25.25-.25H8.7c.14 0 .25.11.25.25v4.8c0 .14-.11.25-.25.25H7.25c-.14 0-.25-.11-.25-.25V3.95Z" })),
+  'exclamation-stamp': () => (h("path", { fill: "currentColor", d: "m15 8-1.55-1.86.22-2.46-2.3-.55L10.17 1 8 1.98 5.84 1 4.63 3.13l-2.29.54.22 2.46L1.01 8l1.55 1.86-.22 2.47 2.3.55 1.2 2.13L8 14.03l2.17.98 1.2-2.13 2.3-.55-.22-2.46L15 8.01Zm-6.36 3.35H7.36v-1.34h1.28v1.34Zm0-2.67H7.36V4.67h1.28v4.01Z" })),
   'exclamation-triangle': () => (h("path", { fill: "currentColor", d: "m14.3 13.88-6-12a.32.32 0 0 0-.41-.15.31.31 0 0 0-.15.15l-6 12a.31.31 0 0 0 .14.42.32.32 0 0 0 .14 0H14a.31.31 0 0 0 .33-.29.23.23 0 0 0-.03-.13ZM7 6a.28.28 0 0 1 .28-.28h1.46A.28.28 0 0 1 9 6v4a.29.29 0 0 1-.28.29H7.3A.29.29 0 0 1 7 10Zm2 7a.31.31 0 0 1-.31.32H7.34A.32.32 0 0 1 7 13v-1.37a.31.31 0 0 1 .32-.31h1.39a.31.31 0 0 1 .31.31Z" })),
   'eye': () => [
-    h("circle", { fill: "currentColor", cx: "8.01", cy: "7.96", r: "2.44" }),
-    h("path", { fill: "currentColor", d: "M15.24 7.59A8.12 8.12 0 0 0 8 2.67 8.12 8.12 0 0 0 .76 7.59a1 1 0 0 0 0 .82A8.12 8.12 0 0 0 8 13.33a8.12 8.12 0 0 0 7.24-4.92 1 1 0 0 0 0-.82ZM8 11.62A3.66 3.66 0 1 1 11.67 8 3.66 3.66 0 0 1 8 11.62Z" }),
+    h("circle", { key: "eye-1", fill: "currentColor", cx: "8.01", cy: "7.96", r: "2.44" }),
+    h("path", { key: "eye-2", fill: "currentColor", d: "M15.24 7.59A8.12 8.12 0 0 0 8 2.67 8.12 8.12 0 0 0 .76 7.59a1 1 0 0 0 0 .82A8.12 8.12 0 0 0 8 13.33a8.12 8.12 0 0 0 7.24-4.92 1 1 0 0 0 0-.82ZM8 11.62A3.66 3.66 0 1 1 11.67 8 3.66 3.66 0 0 1 8 11.62Z" }),
   ],
   'eye-slash': () => [
-    h("path", { fill: "currentColor", d: "M10.25 7a2.43 2.43 0 0 0-2.08-1.46ZM6.45 6.1a2.43 2.43 0 1 0 3.85 2.69Z" }),
-    h("path", { fill: "currentColor", d: "M15.24 7.59A8.13 8.13 0 0 0 8 2.67a8.06 8.06 0 0 0-2.89.64l1.72 1.2A3.58 3.58 0 0 1 8 4.3a3.65 3.65 0 0 1 3.64 3.6l2.77 1.93a7.91 7.91 0 0 0 .81-1.42 1 1 0 0 0 .02-.82ZM.81 3.84 2.51 5A8.16 8.16 0 0 0 .76 7.59a1 1 0 0 0 0 .82A8.13 8.13 0 0 0 8 13.33a8 8 0 0 0 4.32-1.4l2 1.38.81-1.17-13.5-9.47ZM8 11.62A3.66 3.66 0 0 1 4.35 8a3.75 3.75 0 0 1 .29-1.42l5.85 4.11a3.65 3.65 0 0 1-2.49.93Z" }),
+    h("path", { key: "eye-slash-1", fill: "currentColor", d: "M10.25 7a2.43 2.43 0 0 0-2.08-1.46ZM6.45 6.1a2.43 2.43 0 1 0 3.85 2.69Z" }),
+    h("path", { key: "eye-slash-2", fill: "currentColor", d: "M15.24 7.59A8.13 8.13 0 0 0 8 2.67a8.06 8.06 0 0 0-2.89.64l1.72 1.2A3.58 3.58 0 0 1 8 4.3a3.65 3.65 0 0 1 3.64 3.6l2.77 1.93a7.91 7.91 0 0 0 .81-1.42 1 1 0 0 0 .02-.82ZM.81 3.84 2.51 5A8.16 8.16 0 0 0 .76 7.59a1 1 0 0 0 0 .82A8.13 8.13 0 0 0 8 13.33a8 8 0 0 0 4.32-1.4l2 1.38.81-1.17-13.5-9.47ZM8 11.62A3.66 3.66 0 0 1 4.35 8a3.75 3.75 0 0 1 .29-1.42l5.85 4.11a3.65 3.65 0 0 1-2.49.93Z" }),
   ],
   'file': () => [
-    h("path", { fill: "currentColor", d: "M8.89 4.56V.67H3.35a.66.66 0 0 0-.66.68v13.3a.67.67 0 0 0 .66.68h9.3a.66.66 0 0 0 .66-.68v-9.4H9.55a.67.67 0 0 1-.66-.69Z" }),
-    h("path", { fill: "currentColor", d: "M13.12 3.67 10.41.87a.63.63 0 0 0-.47-.2h-.17v3.66h3.54v-.17a.69.69 0 0 0-.19-.49Z" }),
+    h("path", { key: "file-1", fill: "currentColor", d: "M8.89 4.56V.67H3.35a.66.66 0 0 0-.66.68v13.3a.67.67 0 0 0 .66.68h9.3a.66.66 0 0 0 .66-.68v-9.4H9.55a.67.67 0 0 1-.66-.69Z" }),
+    h("path", { key: "file-2", fill: "currentColor", d: "M13.12 3.67 10.41.87a.63.63 0 0 0-.47-.2h-.17v3.66h3.54v-.17a.69.69 0 0 0-.19-.49Z" }),
   ],
   'file-cog': () => (h("path", { fill: "currentColor", d: "M9,10.1C9,10.6,8.5,11,8,11l0,0c-0.6,0-1-0.4-1-1c0-0.6,0.4-1,1-1C8.6,9,9,9.4,9,10.1C9,10,9,10,9,10.1z   M13.2,3.7l-2.8-2.8c-0.1-0.1-0.3-0.2-0.5-0.2H9.8v3.7h3.5V4.2C13.3,4,13.2,3.8,13.2,3.7L13.2,3.7z M9.6,5.3h3.8v9.4  c0,0.4-0.3,0.6-0.7,0.7H3.3c-0.4,0-0.7-0.3-0.7-0.7c0,0,0,0,0,0V1.3C2.7,1,3,0.7,3.3,0.7h5.5v3.9l0,0C8.9,4.9,9.2,5.2,9.6,5.3  C9.5,5.2,9.5,5.2,9.6,5.3z M10,8L9.5,8.3C9.3,8.1,9,8,8.8,7.9V7.3c0-0.1,0-0.1-0.1-0.1c-0.4-0.1-0.9-0.1-1.3,0  c-0.1,0-0.1,0.1-0.1,0.1v0.6C7,8,6.7,8.1,6.5,8.3L6,8C5.9,8,5.9,8,5.8,8C5.5,8.3,5.3,8.7,5.2,9.1c0,0.1,0,0.1,0.1,0.2l0.5,0.3  c-0.1,0.3-0.1,0.6,0,0.8l-0.5,0.3c-0.1,0-0.1,0.1-0.1,0.2c0.1,0.4,0.4,0.8,0.7,1.1c0.1,0,0.1,0,0.2,0l0.5-0.3  C6.7,11.9,7,12,7.2,12.1v0.6c0,0.1,0,0.1,0.1,0.1c0.4,0.1,0.9,0.1,1.3,0c0.1,0,0.1-0.1,0.1-0.1v-0.5C9,12.1,9.3,12,9.5,11.8l0.5,0.3  c0.1,0,0.1,0,0.2,0c0.3-0.3,0.5-0.7,0.6-1.1c0-0.1,0-0.1-0.1-0.2l0,0l-0.5-0.3c0-0.3,0-0.6,0-0.8l0.5-0.3c0.1,0,0.1-0.1,0.1-0.2  c-0.1-0.4-0.4-0.8-0.6-1.1C10.1,8,10.1,8,10,8z" })),
   'file-download': () => [
-    h("path", { fill: "currentColor", d: "M13.12 3.67 10.41.87a.63.63 0 0 0-.47-.2h-.17v3.66h3.54v-.17a.69.69 0 0 0-.19-.49Z" }),
-    h("path", { fill: "currentColor", d: "M13.31 14.65v-9.4H9.55a.67.67 0 0 1-.66-.68V.67H3.35a.67.67 0 0 0-.66.66v13.32a.67.67 0 0 0 .66.68h9.3a.67.67 0 0 0 .66-.66Zm-2.91-4.24-2.54 2.53a.18.18 0 0 1-.26 0l-2.54-2.53a.2.2 0 0 1-.06-.15.18.18 0 0 1 .19-.18h1.34a.2.2 0 0 0 .2-.2V7.27a.19.19 0 0 1 .19-.18h1.63a.18.18 0 0 1 .18.19v2.6a.2.2 0 0 0 .2.2h1.34a.16.16 0 0 1 .14.06.19.19 0 0 1-.01.27Z" }),
+    h("path", { key: "file-download-1", fill: "currentColor", d: "M13.12 3.67 10.41.87a.63.63 0 0 0-.47-.2h-.17v3.66h3.54v-.17a.69.69 0 0 0-.19-.49Z" }),
+    h("path", { key: "file-download-2", fill: "currentColor", d: "M13.31 14.65v-9.4H9.55a.67.67 0 0 1-.66-.68V.67H3.35a.67.67 0 0 0-.66.66v13.32a.67.67 0 0 0 .66.68h9.3a.67.67 0 0 0 .66-.66Zm-2.91-4.24-2.54 2.53a.18.18 0 0 1-.26 0l-2.54-2.53a.2.2 0 0 1-.06-.15.18.18 0 0 1 .19-.18h1.34a.2.2 0 0 0 .2-.2V7.27a.19.19 0 0 1 .19-.18h1.63a.18.18 0 0 1 .18.19v2.6a.2.2 0 0 0 .2.2h1.34a.16.16 0 0 1 .14.06.19.19 0 0 1-.01.27Z" }),
   ],
   'file-excel': () => (h("path", { fill: "currentColor", d: "M8.89 4.43V.67H3.35a.65.65 0 0 0-.66.66v13.34a.65.65 0 0 0 .66.66h9.3a.65.65 0 0 0 .66-.66V5.09H9.55a.65.65 0 0 1-.66-.66Zm1.66 3.2-1.66 2.58 1.66 2.59a.34.34 0 0 1-.1.46.31.31 0 0 1-.18.05h-1a.32.32 0 0 1-.27-.17c-.54-1-1-1.9-1-1.9-.18.41-.28.55-1 1.9a.33.33 0 0 1-.29.18h-1A.34.34 0 0 1 5.4 13a.41.41 0 0 1 0-.18l1.67-2.58-1.62-2.61a.34.34 0 0 1 .1-.46.37.37 0 0 1 .18 0h1a.33.33 0 0 1 .3.17c.72 1.35.55.93 1 1.9 0 0 .17-.33 1-1.9a.33.33 0 0 1 .3-.17h1a.33.33 0 0 1 .33.33.41.41 0 0 1-.11.13ZM13.31 4v.17H9.77V.67h.17a.67.67 0 0 1 .47.19l2.71 2.71a.66.66 0 0 1 .19.43Z" })),
   'file-pdf': () => (h("path", { fill: "currentColor", d: "M7.74 8a2.68 2.68 0 0 1-.06-1.3c.24 0 .21 1.02.06 1.3Zm0 1.31a12.5 12.5 0 0 1-.79 1.75 9.8 9.8 0 0 1 1.75-.61 3.63 3.63 0 0 1-1.01-1.14Zm-2.66 3.47s.36-.15 1-1.12a3.71 3.71 0 0 0-1 1.12Zm4.49-7.67h3.78v9.56a.65.65 0 0 1-.66.66H3.31a.66.66 0 0 1-.66-.66V1.33a.65.65 0 0 1 .7-.66h5.56v3.77a.67.67 0 0 0 .66.67Zm-.22 5a2.78 2.78 0 0 1-1.18-1.5 4 4 0 0 0 .17-1.78.7.7 0 0 0-.78-.6.69.69 0 0 0-.56.41 4.58 4.58 0 0 0 .23 2.14 26 26 0 0 1-1.13 2.38c-.76.39-2 1.24-1.52 1.89a.87.87 0 0 0 .6.28c.5 0 1-.5 1.7-1.72A15.24 15.24 0 0 1 9.07 11a4.34 4.34 0 0 0 1.78.54.72.72 0 0 0 .74-.7.78.78 0 0 0-.19-.51c-.4-.4-1.51-.33-2.05-.23Zm3.81-6.53L10.44.86A.71.71 0 0 0 10 .67h-.2v3.55h3.55v-.17a.7.7 0 0 0-.19-.47ZM11.1 10.9c.11-.08-.07-.33-1.19-.25 1.03.44 1.19.25 1.19.25Z" })),
   'file-text': () => (h("path", { fill: "currentColor", d: "M8.89 4.56V.67H3.35c-.36 0-.66.3-.66.66v13.32c0 .37.29.67.66.68h9.3c.36 0 .66-.3.66-.66V5.25H9.55c-.37 0-.67-.31-.66-.68Zm1.77 6.75c0 .19-.15.34-.34.35H5.68c-.19 0-.34-.16-.34-.35v-.23c0-.19.15-.34.34-.34h4.64c.19 0 .34.15.34.34v.23Zm0-1.83c0 .19-.15.34-.34.34H5.68c-.19 0-.34-.15-.34-.34v-.23c0-.19.15-.34.34-.34h4.64c.19 0 .34.15.34.34v.23Zm0-2.06v.23c0 .19-.15.34-.34.34H5.68c-.19 0-.34-.15-.34-.34v-.23c0-.19.15-.34.34-.35h4.64c.19 0 .34.16.34.35Zm2.65-3.27v.17H9.77V.67h.17c.18 0 .35.07.47.2l2.71 2.8c.13.13.19.31.19.49Z" })),
   'file-text-outline': () => (h("path", { fill: "currentColor", d: "M10.31 10.74H5.69c-.2 0-.36.16-.36.35v.22c0 .19.16.35.36.35h4.62c.2 0 .36-.16.36-.35v-.22c0-.19-.16-.35-.36-.35Zm0-1.84H5.69c-.2 0-.36.16-.36.36v.21c0 .2.16.35.36.35h4.62c.2 0 .36-.15.36-.35v-.21c0-.2-.16-.36-.36-.36Zm0-1.83H5.69c-.2 0-.36.16-.36.35v.22c0 .19.16.35.36.35h4.62c.2 0 .36-.16.36-.35v-.22c0-.19-.16-.35-.36-.35Zm0 3.67H5.69c-.2 0-.36.16-.36.35v.22c0 .19.16.35.36.35h4.62c.2 0 .36-.16.36-.35v-.22c0-.19-.16-.35-.36-.35Zm0-1.84H5.69c-.2 0-.36.16-.36.36v.21c0 .2.16.35.36.35h4.62c.2 0 .36-.15.36-.35v-.21c0-.2-.16-.36-.36-.36Zm0-1.83H5.69c-.2 0-.36.16-.36.35v.22c0 .19.16.35.36.35h4.62c.2 0 .36-.16.36-.35v-.22c0-.19-.16-.35-.36-.35Zm2.76-2.64L9.69.92A.8.8 0 0 0 9.1.67H3.35c-.36 0-.66.3-.66.66v13.32c0 .37.29.67.66.68h9.3c.36 0 .66-.3.66-.66V5.05c0-.23-.07-.45-.24-.62Zm-.76 9.9H3.69V1.67h5.2v2.75c0 .46.37.83.83.83h2.59v9.08Z" })),
   'file-upload': () => [
-    h("path", { fill: "currentColor", d: "M13.1 3.7 10.4.9c-.1-.1-.3-.2-.5-.2h-.1v3.7h3.5v-.2c0-.2-.1-.4-.2-.5z" }),
-    h("path", { fill: "currentColor", d: "M13.3 14.6V5.3H9.6c-.4 0-.7-.3-.7-.7V.7H3.3c-.3 0-.6.3-.6.6v13.3c0 .4.3.7.7.7h9.3c.3 0 .6-.3.6-.7zm-3-4.6H8.9c-.1 0-.2.1-.2.2v2.6c0 .1-.1.2-.2.2H6.9c-.1 0-.2-.1-.2-.2v-2.6c0-.1-.1-.2-.2-.2H5.1C5 9.9 5 9.8 5 9.7l2.5-2.6c.1-.1.2-.1.3 0l2.5 2.5.1.1c.1.2 0 .3-.1.3z" }),
+    h("path", { key: "file-upload-1", fill: "currentColor", d: "M13.1 3.7 10.4.9c-.1-.1-.3-.2-.5-.2h-.1v3.7h3.5v-.2c0-.2-.1-.4-.2-.5z" }),
+    h("path", { key: "file-upload-2", fill: "currentColor", d: "M13.3 14.6V5.3H9.6c-.4 0-.7-.3-.7-.7V.7H3.3c-.3 0-.6.3-.6.6v13.3c0 .4.3.7.7.7h9.3c.3 0 .6-.3.6-.7zm-3-4.6H8.9c-.1 0-.2.1-.2.2v2.6c0 .1-.1.2-.2.2H6.9c-.1 0-.2-.1-.2-.2v-2.6c0-.1-.1-.2-.2-.2H5.1C5 9.9 5 9.8 5 9.7l2.5-2.6c.1-.1.2-.1.3 0l2.5 2.5.1.1c.1.2 0 .3-.1.3z" }),
   ],
   'filter': () => (h("path", { fill: "currentColor", d: "M13.74 1.66H2.26a.6.6 0 0 0-.59.6.59.59 0 0 0 .17.42l4.58 4.58v5.1a.58.58 0 0 0 .25.48l2 1.39a.6.6 0 0 0 .83-.15.59.59 0 0 0 .1-.34V7.26l4.58-4.58a.6.6 0 0 0 0-.84.64.64 0 0 0-.44-.18Z" })),
   'floppy-disk': () => (h("path", { fill: "currentColor", d: "m13.93 4.44-2.37-2.37c-.25-.25-.6-.4-.96-.4H3.03c-.75 0-1.36.61-1.36 1.36v9.94c0 .75.61 1.36 1.36 1.36h9.94c.75 0 1.36-.61 1.36-1.36V5.4c0-.36-.14-.7-.4-.96ZM8 12.52A1.81 1.81 0 1 1 8 8.9a1.81 1.81 0 0 1 0 3.62Zm2.71-5.77c0 .09-.04.18-.1.24a.35.35 0 0 1-.24.1H3.82c-.19 0-.34-.15-.34-.34V3.82c0-.19.15-.34.34-.34h6.55c.19 0 .34.15.34.34v2.93Z" })),
@@ -888,8 +1197,8 @@ const icons = {
   'folder-star': () => (h("path", { fill: "currentColor", d: "M14 4.44H8.46L6.62 2.67H2A1.35 1.35 0 0 0 .67 4v8A1.35 1.35 0 0 0 2 13.33h12A1.35 1.35 0 0 0 15.33 12V5.78A1.36 1.36 0 0 0 14 4.44Zm-.2 3.89L12 9.66l.69 2a.22.22 0 0 1-.08.27.26.26 0 0 1-.13.06.39.39 0 0 1-.15-.06l-1.77-1.26L8.75 12a.34.34 0 0 1-.15 0 .31.31 0 0 1-.13 0 .23.23 0 0 1-.08-.27l.69-2-1.81-1.35a.23.23 0 0 1-.1-.17.24.24 0 0 1 .24-.24h2.21l.67-2a.26.26 0 0 1 .15-.14.24.24 0 0 1 .31.14l.67 2h2.2a.26.26 0 0 1 .26.24.3.3 0 0 1-.08.12Z" })),
   'graduation-cap': () => (h("path", { fill: "currentColor", d: "M14.93 5.14 8.54 2.76c-.35-.13-.73-.13-1.08 0L1.07 5.14c-.31.13-.48.47-.39.8.04.22.19.39.39.47l1.12.42c-.26.38-.4.84-.41 1.3-.35.28-.47.75-.3 1.16.06.12.14.23.24.31l-.59 3.19c-.06.22.07.45.28.53h1.37c.22-.02.38-.22.36-.44v-.1L2.55 9.6c.32-.31.4-.79.2-1.18a.814.814 0 0 0-.24-.28c0-.38.18-.75.47-1l4.48 1.65c.35.13.73.13 1.08 0l6.39-2.38c.31-.13.48-.47.39-.8a.625.625 0 0 0-.39-.47Zm-6.18 4.5c-.48.18-1.02.18-1.5 0L3.93 8.4l-.33 3.15c0 1 2 1.78 4.4 1.78s4.4-.79 4.4-1.78l-.33-3.15-3.32 1.24Z" })),
   'history': () => [
-    h("path", { fill: "currentColor", d: "M8,1.67A6.37,6.37,0,0,0,3.6,3.42l-.91-.91a.6.6,0,0,0-.85,0h0a.58.58,0,0,0-.18.43V6.37A.61.61,0,0,0,2.24,7H5.68a.62.62,0,0,0,.62-.62A.69.69,0,0,0,6.12,6L5.05,4.87a4.29,4.29,0,1,1,.1,6.36.3.3,0,0,0-.41,0l-1,1a.3.3,0,0,0,0,.42h0A6.33,6.33,0,1,0,8,1.67Z" }),
-    h("path", { fill: "currentColor", d: "M9.85,9.3l-.36.36a.3.3,0,0,1-.43,0L7.45,8V5.15a.3.3,0,0,1,.3-.3h.5a.3.3,0,0,1,.3.3V7.58l1.3,1.3A.31.31,0,0,1,9.85,9.3Z" }),
+    h("path", { key: "history-1", fill: "currentColor", d: "M8,1.67A6.37,6.37,0,0,0,3.6,3.42l-.91-.91a.6.6,0,0,0-.85,0h0a.58.58,0,0,0-.18.43V6.37A.61.61,0,0,0,2.24,7H5.68a.62.62,0,0,0,.62-.62A.69.69,0,0,0,6.12,6L5.05,4.87a4.29,4.29,0,1,1,.1,6.36.3.3,0,0,0-.41,0l-1,1a.3.3,0,0,0,0,.42h0A6.33,6.33,0,1,0,8,1.67Z" }),
+    h("path", { key: "history-2", fill: "currentColor", d: "M9.85,9.3l-.36.36a.3.3,0,0,1-.43,0L7.45,8V5.15a.3.3,0,0,1,.3-.3h.5a.3.3,0,0,1,.3.3V7.58l1.3,1.3A.31.31,0,0,1,9.85,9.3Z" }),
   ],
   'hand-up': () => (h("path", { fill: "currentColor", d: "M12.75 3.5c-.41 0-.75.34-.75.75v3.5c0 .14-.11.25-.25.25s-.25-.11-.25-.25v-4c0-.41-.34-.75-.75-.75s-.75.34-.75.75v4c0 .14-.11.25-.25.25s-.25-.11-.25-.25v-5c0-.41-.34-.75-.75-.75S8 2.34 8 2.75v5c0 .14-.11.25-.25.25s-.25-.11-.25-.25v-4c0-.41-.34-.75-.75-.75S6 3.34 6 3.75V11L3.97 9.54c-.34-.34-.88-.34-1.21 0s-.34.88 0 1.21l2.22 2.22c.66.66 1.55 1.03 2.47 1.03H11a2.5 2.5 0 0 0 2.5-2.5V4.25c0-.41-.34-.75-.75-.75Z" })),
   'home': () => (h("path", { fill: "currentColor", d: "m13.55 5.5-5-3.33C8.38 2.06 8.19 2 7.99 2s-.39.06-.56.17L2.45 5.5c-.28.19-.45.5-.45.83v6.66c0 .55.45 1 1 1h4V12c0-.56.45-1.01 1-1.01s1 .45 1 1.01v1.99h4c.55 0 1-.45 1-1V6.33c0-.33-.17-.65-.45-.83Z" })),
@@ -902,22 +1211,22 @@ const icons = {
   'link': () => (h("path", { fill: "currentColor", d: "M9.75 6.25a3.748 3.748 0 0 1 0 5.31l-1.66 1.67a3.76 3.76 0 0 1-5.32 0 3.76 3.76 0 0 1 0-5.32l.92-.92c.15-.15.4-.16.56 0 .07.07.11.16.12.26.02.44.1.88.24 1.3.05.14.01.3-.09.41l-.32.32c-.72.67-.76 1.8-.09 2.52s1.8.76 2.52.09c.03-.02.05-.05.07-.07l1.66-1.66c.7-.7.7-1.82 0-2.52-.08-.08-.16-.15-.26-.21a.394.394 0 0 1-.17-.31.98.98 0 0 1 .29-.74l.52-.52c.14-.14.35-.15.51-.04.18.13.35.27.51.43Zm3.49-3.48a3.76 3.76 0 0 0-5.32 0L6.26 4.43a3.772 3.772 0 0 0 .52 5.75c.16.11.37.09.51-.04l.52-.52c.2-.19.3-.46.29-.74a.38.38 0 0 0-.17-.31 1.775 1.775 0 0 1-.26-2.73l1.66-1.66c.68-.71 1.81-.74 2.52-.06.71.68.74 1.81.06 2.52-.02.03-.05.05-.07.07l-.32.32c-.11.11-.14.27-.09.41.14.42.22.86.24 1.3 0 .22.19.39.41.38.1 0 .19-.05.26-.12l.92-.92a3.76 3.76 0 0 0 0-5.32Z" })),
   'list': () => (h("path", { fill: "currentColor", d: "M1.9 2.68c-.67 0-1.22.56-1.21 1.23 0 .67.56 1.22 1.23 1.21.67 0 1.22-.56 1.21-1.23 0-.32-.13-.63-.36-.86-.23-.23-.54-.36-.87-.35Zm0 4.09a1.23 1.23 0 1 0 0 2.46 1.23 1.23 0 1 0 0-2.46Zm0 4.09a1.23 1.23 0 1 0 0 2.46 1.23 1.23 0 1 0 0-2.46Zm13 .41H5.18c-.23 0-.41.18-.41.41v.82c0 .23.18.41.41.41h9.75c.23 0 .41-.18.41-.41v-.82c0-.23-.18-.41-.41-.41h-.03Zm0-8.18H5.18c-.23 0-.41.18-.41.41v.81c0 .23.18.41.41.41h9.75c.23 0 .41-.18.41-.41V3.5c0-.23-.18-.41-.41-.41h-.03Zm0 4.09H5.18c-.23 0-.41.18-.41.41v.82c0 .23.18.41.41.41h9.75c.23 0 .41-.18.41-.41v-.82c0-.23-.18-.41-.41-.41h-.03Z" })),
   'loader': () => [
-    h("path", { fill: "currentColor", class: "loader__full-circle", d: "M8 2.67A5.33 5.33 0 1 1 2.67 8 5.33 5.33 0 0 1 8 2.67m0-2A7.33 7.33 0 1 0 15.33 8 7.33 7.33 0 0 0 8 .67Z" }),
-    h("path", { fill: "currentColor", d: "M8 2.67v-2A7.33 7.33 0 0 0 .67 8h2A5.33 5.33 0 0 1 8 2.67Z" }),
+    h("path", { key: "loader-1", fill: "currentColor", class: "loader__full-circle", d: "M8 2.67A5.33 5.33 0 1 1 2.67 8 5.33 5.33 0 0 1 8 2.67m0-2A7.33 7.33 0 1 0 15.33 8 7.33 7.33 0 0 0 8 .67Z" }),
+    h("path", { key: "loader-2", fill: "currentColor", d: "M8 2.67v-2A7.33 7.33 0 0 0 .67 8h2A5.33 5.33 0 0 1 8 2.67Z" }),
   ],
   'lock': () => (h("path", { fill: "currentColor", d: "M12 5.56h-.67v-1.4C11.37 2.28 9.88.71 8 .67 6.12.71 4.63 2.28 4.67 4.16v1.4H4c-.75.02-1.35.64-1.33 1.39V14c.02.73.6 1.31 1.33 1.33h8c.75-.02 1.35-.64 1.33-1.39V7a1.37 1.37 0 0 0-1.28-1.44H12Zm-4 6.28c-.77.04-1.43-.56-1.47-1.33-.04-.77.56-1.43 1.33-1.47.77-.04 1.43.56 1.47 1.33v.07c.02.75-.57 1.38-1.32 1.4H8Zm2.07-6.28H5.93v-1.4A2.12 2.12 0 0 1 8 2c1.17.03 2.1 1 2.07 2.17v1.39Z" })),
   'location': () => (h("path", { fill: "currentColor", d: "M8 .67A5.1 5.1 0 0 0 2.67 5.5c0 3.06 3.51 7.88 4.83 9.59a.64.64 0 0 0 1 0c1.32-1.71 4.83-6.53 4.83-9.59A5.1 5.1 0 0 0 8 .67Zm0 6.94a1.74 1.74 0 1 1 1.74-1.73A1.73 1.73 0 0 1 8 7.61Z" })),
   'log-in': () => (h("path", { fill: "currentColor", d: "M10.97,7.78h0L6.97,3.78c-.12-.12-.31-.12-.42,0h0c-.07,.06-.12,.15-.13,.24v2.07c0,.17-.13,.3-.3,.32H1.97c-.16,0-.29,.12-.3,.28h0v2.58c0,.16,.12,.29,.28,.3H6.11c.17,0,.3,.14,.3,.31v2.14c0,.16,.12,.29,.28,.3h0c.11,.01,.21-.03,.28-.11l4-4c.11-.12,.11-.3,0-.42Zm3.37,5.26h0v1c0,.16-.13,.28-.28,.28h-4.77c-.16,0-.28-.13-.28-.28v-1c0-.16,.13-.28,.28-.28h3.43V3.3h-3.42c-.16,0-.29-.13-.29-.29V1.97c0-.16,.13-.29,.29-.29h4.76c.16,0,.29,.13,.29,.29v.68h0V13.04Z" })),
   'log-out': () => [
-    h("path", { fill: "currentColor", d: "M14.25,7.77h0l-4-4a.31.31,0,0,0-.43,0A.34.34,0,0,0,9.7,4V6.07a.32.32,0,0,1-.3.32H5.23a.3.3,0,0,0-.3.3V9.25a.3.3,0,0,0,.3.3H9.4a.31.31,0,0,1,.3.31V12a.3.3,0,0,0,.3.3.33.33,0,0,0,.23-.09l4-4A.29.29,0,0,0,14.25,7.77Z" }),
-    h("path", { fill: "currentColor", d: "M6.71,12.72H3.27V3.26H6.69A.31.31,0,0,0,7,3V2a.3.3,0,0,0-.31-.3H2A.29.29,0,0,0,1.67,2h0V3h0V14a.27.27,0,0,0,.1.24h0a.32.32,0,0,0,.14.08H6.71A.3.3,0,0,0,7,14V13A.3.3,0,0,0,6.71,12.72Z" }),
+    h("path", { key: "log-out-1", fill: "currentColor", d: "M14.25,7.77h0l-4-4a.31.31,0,0,0-.43,0A.34.34,0,0,0,9.7,4V6.07a.32.32,0,0,1-.3.32H5.23a.3.3,0,0,0-.3.3V9.25a.3.3,0,0,0,.3.3H9.4a.31.31,0,0,1,.3.31V12a.3.3,0,0,0,.3.3.33.33,0,0,0,.23-.09l4-4A.29.29,0,0,0,14.25,7.77Z" }),
+    h("path", { key: "log-out-2", fill: "currentColor", d: "M6.71,12.72H3.27V3.26H6.69A.31.31,0,0,0,7,3V2a.3.3,0,0,0-.31-.3H2A.29.29,0,0,0,1.67,2h0V3h0V14a.27.27,0,0,0,.1.24h0a.32.32,0,0,0,.14.08H6.71A.3.3,0,0,0,7,14V13A.3.3,0,0,0,6.71,12.72Z" }),
   ],
   'magnifying-glass': () => (h("path", { fill: "currentColor", d: "M11.24 9.5c1.48-2.44.71-5.62-1.73-7.1-.05-.03-.11-.07-.17-.1A5.232 5.232 0 0 0 2.52 4C.94 6.38 1.6 9.59 3.98 11.17a5.142 5.142 0 0 0 5.54.1L12.3 14c.39.39 1.02.39 1.41 0l.33-.33a.996.996 0 0 0 0-1.41l-2.8-2.76Zm-4.4.5c-1.76.02-3.2-1.4-3.22-3.16-.02-1.76 1.4-3.2 3.16-3.22 1.76-.02 3.2 1.4 3.22 3.16v.06A3.193 3.193 0 0 1 6.84 10Z" })),
   'mail': () => (h("path", { fill: "currentColor", d: "M13.87 2.67H2.13C1.36 2.64.71 3.23.67 4v8c.03.77.68 1.36 1.45 1.33h11.75c.77.04 1.42-.55 1.46-1.32V4c-.03-.77-.68-1.36-1.45-1.33h-.01Zm0 2.66L8 8.67 2.13 5.33V4L8 7.33 13.87 4v1.33Z" })),
   'notes': () => [
-    h("path", { fill: "currentColor", d: "M12.6 2.76v-.43c0-.75-.53-1.28-1.28-1.28H2.33c-.75 0-1.28.53-1.28 1.28v8.99c0 .75.53 1.28 1.28 1.28h.39V4.05c0-.75.53-1.28 1.28-1.28h8.6Z" }),
-    h("path", { fill: "currentColor", d: "M13.67 3.4H4.68c-.75 0-1.28.53-1.28 1.28v8.99c0 .75.53 1.28 1.28 1.28h6.42V11.1h3.85V4.68c0-.75-.53-1.28-1.28-1.28Zm-4.49 7.06H5.97V9.18h3.21v1.28Zm3.21-2.57H5.97V6.61h6.42v1.28Z" }),
-    h("path", { fill: "currentColor", d: "m11.74 14.42 2.68-2.68h-2.68v2.68z" }),
+    h("path", { key: "notes-1", fill: "currentColor", d: "M12.6 2.76v-.43c0-.75-.53-1.28-1.28-1.28H2.33c-.75 0-1.28.53-1.28 1.28v8.99c0 .75.53 1.28 1.28 1.28h.39V4.05c0-.75.53-1.28 1.28-1.28h8.6Z" }),
+    h("path", { key: "notes-2", fill: "currentColor", d: "M13.67 3.4H4.68c-.75 0-1.28.53-1.28 1.28v8.99c0 .75.53 1.28 1.28 1.28h6.42V11.1h3.85V4.68c0-.75-.53-1.28-1.28-1.28Zm-4.49 7.06H5.97V9.18h3.21v1.28Zm3.21-2.57H5.97V6.61h6.42v1.28Z" }),
+    h("path", { key: "notes-3", fill: "currentColor", d: "m11.74 14.42 2.68-2.68h-2.68v2.68z" }),
   ],
   'notes-outline': () => (h("path", { fill: "currentColor", d: "M13.11 4.74v5.38h-3v3H4.73V4.74h8.38m0-1.2H4.73a1.2 1.2 0 0 0-1.2 1.2v8.38a1.2 1.2 0 0 0 1.2 1.19h6l3.59-3.59v-6a1.2 1.2 0 0 0-1.21-1.18Zm-4.19 6.58h-3V8.93h3Zm3-2.39h-6v-1.2h6ZM3.8 11.19h-1V2.81h8.38v1h1.2v-1a1.2 1.2 0 0 0-1.2-1.2H2.81a1.2 1.2 0 0 0-1.2 1.2v8.38a1.2 1.2 0 0 0 1.2 1.2h1Z" })),
   'paper-plane': () => (h("path", { fill: "currentColor", d: "M14 1.69 1.84 7a.28.28 0 0 0-.15.36.29.29 0 0 0 .16.15l3.27 1.82a.57.57 0 0 0 .61-.06l6.45-5.57c.05 0 .15-.1.19-.06s0 .14-.06.18l-5.59 6.29a.52.52 0 0 0 0 .63l2.09 3.44a.28.28 0 0 0 .37.12.3.3 0 0 0 .13-.12l5-12.11a.3.3 0 0 0-.14-.37.28.28 0 0 0-.17-.01Z" })),
@@ -939,13 +1248,13 @@ const icons = {
   'table': () => (h("path", { fill: "currentColor", d: "M14.19 2.68H1.81A1.14 1.14 0 0 0 .67 3.82v8.36a1.14 1.14 0 0 0 1.14 1.14h12.38a1.14 1.14 0 0 0 1.14-1.14V3.82a1.14 1.14 0 0 0-1.14-1.14ZM7.24 11.8H2.19V9.52h5.05Zm0-3.8H2.19V5.72h5.05Zm6.57 3.8H8.76V9.52h5.05Zm0-3.8H8.76V5.72h5.05Z" })),
   'tag': () => (h("path", { fill: "currentColor", d: "M1.67 7.9V2.85a1.18 1.18 0 0 1 1.18-1.18H7.9a1.18 1.18 0 0 1 .84.33L14 7.26a1.2 1.2 0 0 1 0 1.68L8.94 14a1.2 1.2 0 0 1-1.68 0L2 8.74a1.18 1.18 0 0 1-.33-.84Zm2.77-4.65a1.19 1.19 0 1 0 1.18 1.19 1.19 1.19 0 0 0-1.18-1.19Z" })),
   'tags': () => [
-    h("path", { fill: "currentColor", d: "M12.08 7.37 7.22 3a1.12 1.12 0 0 0-.78-.29H1.77a1 1 0 0 0-1.1 1v4.21a1 1 0 0 0 .33.71L5.85 13a1.17 1.17 0 0 0 1.55 0l4.68-4.25a.94.94 0 0 0 0-1.38ZM3.23 6.13A1.13 1.13 0 1 1 4.36 5a1.13 1.13 0 0 1-1.13 1.13Z" }),
-    h("path", { 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" }),
+    h("path", { key: "tags-1", fill: "currentColor", d: "M12.08 7.37 7.22 3a1.12 1.12 0 0 0-.78-.29H1.77a1 1 0 0 0-1.1 1v4.21a1 1 0 0 0 .33.71L5.85 13a1.17 1.17 0 0 0 1.55 0l4.68-4.25a.94.94 0 0 0 0-1.38ZM3.23 6.13A1.13 1.13 0 1 1 4.36 5a1.13 1.13 0 0 1-1.13 1.13Z" }),
+    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': () => (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" })),
   'trash': () => [
-    h("path", { 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" }),
-    h("path", { 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" }),
+    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" }),
+    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" }),
   ],
   'universal-access': () => (h("path", { fill: "currentColor", d: "M8 15.33A7.33 7.33 0 1 1 15.33 8 7.34 7.34 0 0 1 8 15.33ZM8 1.71A6.29 6.29 0 1 0 14.29 8 6.29 6.29 0 0 0 8 1.71ZM13.74 8A5.74 5.74 0 1 1 8 2.25 5.75 5.75 0 0 1 13.74 8ZM8 3.77a1.07 1.07 0 1 0 1.07 1.07A1.07 1.07 0 0 0 8 3.77ZM4.67 5.63c-.6-.14-.87.86-.32 1s1.79.43 2.57.55a11.25 11.25 0 0 1-.72 4.47.54.54 0 0 0 .85.65 6.94 6.94 0 0 0 .78-2.42c0-.07.31-.11.33 0a8.73 8.73 0 0 0 .63 2.23c.3.65 1.31.26 1-.38a11.54 11.54 0 0 1-.76-4.58 21.34 21.34 0 0 0 2.41-.45.55.55 0 1 0-.2-1.08 11.47 11.47 0 0 1-6.57.01Z" })),
   'unlink': () => (h("path", { fill: "currentColor", d: "M9.74 6.25c-.16-.17-.32-.3-.5-.43-.14-.09-.31-.1-.44 0l1.81 1.81c-.17-.5-.47-.98-.87-1.38Zm-1.1 3.51c-.07.15-.17.28-.29.4l-1.66 1.66s-.04.05-.07.07c-.72.67-1.85.63-2.52-.09-.67-.72-.63-1.85.09-2.52l.32-.32c.1-.11.14-.27.09-.41-.14-.42-.22-.86-.24-1.3a.42.42 0 0 0-.12-.26.395.395 0 0 0-.56 0l-.92.92a3.76 3.76 0 0 0 0 5.32 3.76 3.76 0 0 0 5.32 0l1.66-1.67c.12-.12.23-.25.32-.38L8.64 9.76Zm4.61-7h-.02a3.778 3.778 0 0 0-5.32 0L6.83 3.84l1.41 1.41 1.08-1.08c.68-.71 1.81-.74 2.52-.06.71.68.74 1.81.06 2.52-.02.03-.05.05-.07.07l-.32.32c-.11.11-.14.27-.09.41.13.4.21.81.23 1.23l.44.44c.09 0 .18-.05.24-.11l.92-.92a3.76 3.76 0 0 0 0-5.32Zm.97 10.52-1.03 1.03-5.14-5.14c-.04.17-.12.33-.25.45l-.52.52c-.14.13-.35.15-.51.04-.18-.13-.35-.27-.5-.42-.74-.74-1.11-1.7-1.11-2.67 0-.24.02-.49.08-.73l-3.6-3.6 1.03-1.03 11.55 11.55Z" })),
@@ -963,7 +1272,7 @@ const icons = {
 /**
  * List of all possibles sizes
  */
-const sizes$2 = ['small', 'regular', 'large', 'extra-large'];
+const sizes$1 = ['small', 'regular', 'large', 'extra-large'];
 /**
  * List of all possibles variants
  */
@@ -988,7 +1297,7 @@ const MgIcon = class {
   }
   validateIcon(newValue, oldValue) {
     if (!Object.keys(icons).includes(newValue)) {
-      throw new Error(`<mg-icon> prop "icon" must be one of : ${Object.keys(icons).join(', ')}`);
+      throw new Error(`<mg-icon> prop "icon" must be one of: ${Object.keys(icons).join(', ')}`);
     }
     else {
       if (oldValue !== undefined) {
@@ -998,8 +1307,8 @@ const MgIcon = class {
     }
   }
   validateSize(newValue, oldValue) {
-    if (!sizes$2.includes(newValue)) {
-      throw new Error(`<mg-icon> prop "size" must be one of : ${sizes$2.join(', ')}`);
+    if (!sizes$1.includes(newValue)) {
+      throw new Error(`<mg-icon> prop "size" must be one of: ${sizes$1.join(', ')}`);
     }
     else {
       if (oldValue !== undefined) {
@@ -1010,7 +1319,7 @@ const MgIcon = class {
   }
   validateVariant(newValue, oldValue) {
     if (newValue !== undefined && !variants$2.includes(newValue)) {
-      throw new Error(`<mg-icon> prop "variant" must be one of : ${variants$2.join(', ')}`);
+      throw new Error(`<mg-icon> prop "variant" must be one of: ${variants$2.join(', ')}`);
     }
     else if (newValue !== undefined) {
       if (oldValue !== undefined) {
@@ -1075,13 +1384,14 @@ const MgIllustratedMessage = class {
    */
   componentDidLoad() {
     const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
-    const imageTags = ['img', 'svg'];
+    const slottedIllustrations = this.element.querySelectorAll('[slot="illustration"]');
     if (!isTagName(this.element.querySelector('[slot="title"]'), headingTags)) {
       throw new Error(`<mg-illustrated-message> Slotted title must be a heading: ${headingTags.join(', ')}`);
     }
-    else if (!isTagName(this.element.querySelector('[slot="illustration"]'), imageTags)) {
-      throw new Error(`<mg-illustrated-message> Slotted illustration must be an image: ${imageTags.join(', ')}`);
+    else if (slottedIllustrations.length !== 1) {
+      throw new Error('<mg-illustrated-message> Slotted illustration must be present and unique.');
     }
+    slottedIllustrations[0].setAttribute('aria-hidden', 'true');
   }
   /**
    * Render
@@ -1160,6 +1470,11 @@ const MgInput = (props, children, utils) => {
   if (props.labelOnTop && props.labelHide) {
     throw new Error('<mg-input> prop "labelOnTop" must not be paired with the prop "labelHide".');
   }
+  /**
+   * Set readonly value
+   */
+  if (props.readonlyValue === undefined)
+    props.readonlyValue = props.value;
   /**
    * Component classes
    */
@@ -1213,7 +1528,7 @@ const MgInput = (props, children, utils) => {
       getInputTitle(),
       !props.readonly && props.tooltip && getTooltip())) : (getInputTitle()),
     props.readonly ? (h("div", { class: "mg-input__input-container" },
-      h("strong", null, props.readonlyValue || props.value),
+      h("strong", null, props.readonlyValue),
       children.filter(child => child.$name$ === 'append-input'))) : (h("div", { class: "mg-input__input-container" },
       h("div", { class: { 'mg-input__input': true, 'mg-input__input--has-error': props.errorMessage !== undefined } },
         applyAriadescribedBy(children, ariaDescribedbyIDs, utils),
@@ -1222,7 +1537,7 @@ const MgInput = (props, children, utils) => {
       props.errorMessage && !props.readonly && !props.disabled && (h("div", { id: helpTextErrorId, class: "mg-input__error", innerHTML: props.errorMessage, "aria-live": "assertive" }))))));
 };
 
-const mgInputCheckboxCss = ":host{display:block}.mg-input{display:flex;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input mg-input-title{flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:flex;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container .mg-input__help-text,.mg-input__input-container .mg-input__error{text-align:start;font-size:1.2rem}.mg-input__input{display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input.mg-input__input--has-error .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input__input+.mg-input__help-text,.mg-input__input+.mg-input__error{margin-top:0.5rem}.mg-input__error{display:inline-block;margin-top:0.2rem;padding:0.3rem 0.8rem;border-radius:0.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-input__input mg-icon,.mg-input__error mg-icon{display:flex}fieldset.mg-input{border:0;margin-left:0;margin-right:0;padding:0}fieldset.mg-input input[type=radio],fieldset.mg-input input[type=checkbox]{flex-shrink:0;width:var(--mg-input-check-size);height:var(--mg-input-check-size);margin-top:calc((var(--font-size) * var(--line-height) - var(--mg-input-check-size)) / 2);margin-right:0.6rem;margin-bottom:0;margin-left:0}fieldset.mg-input.mg-input--label-on-top .mg-input__input-group-container{margin-top:0.7rem}.mg-input__input-container mg-tooltip{margin-left:3rem}.mg-input__input-group-container{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;column-gap:2.3rem;row-gap:1rem;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2)}.mg-input__input-group-container--vertical{flex-direction:column}.mg-input__input-group{display:flex;align-items:top}.mg-input__input-group.mg-input__input-group--disabled label{opacity:0.3}.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}}";
+const mgInputCheckboxCss = ":host{display:block}.mg-input{display:flex;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input mg-input-title{flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:flex;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container .mg-input__help-text,.mg-input__input-container .mg-input__error{text-align:start;font-size:1.2rem}.mg-input__input{display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input.mg-input__input--has-error .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input__input+.mg-input__help-text,.mg-input__input+.mg-input__error{margin-top:0.5rem}.mg-input__input .mg-input__box:disabled,.mg-input__input-group--disabled label,.mg-input.mg-input--toggle-disabled .mg-input__input .mg-input__button-toggle{opacity:var(--mg-disabled-opacity)}.mg-input__error{display:inline-block;margin-top:0.2rem;padding:0.3rem 0.8rem;border-radius:0.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-input__input mg-icon,.mg-input__error mg-icon{display:flex}fieldset.mg-input{border:0;margin-left:0;margin-right:0;padding:0}fieldset.mg-input input[type=radio],fieldset.mg-input input[type=checkbox]{flex-shrink:0;width:var(--mg-input-check-size);height:var(--mg-input-check-size);margin-top:calc((var(--font-size) * var(--line-height) - var(--mg-input-check-size)) / 2);margin-right:0.6rem;margin-bottom:0;margin-left:0}fieldset.mg-input.mg-input--label-on-top .mg-input__input-group-container{margin-top:0.7rem}.mg-input__input-container mg-tooltip{margin-left:3rem}.mg-input__input-group-container{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;column-gap:2.3rem;row-gap:1rem;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2)}.mg-input__input-group-container--vertical{flex-direction:column}.mg-input__input-group{display:flex;align-items:top}.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}}";
 
 /**
  * type CheckboxItem validation function
@@ -1370,11 +1685,11 @@ const MgInputCheckbox = class {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, readonly: undefined, mgWidth: undefined, disabled: this.disabled, value: this.value && this.value.toString(), readonlyValue: undefined, tooltip: !this.readonly ? this.tooltip : undefined, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined, isFieldset: true }, h("ul", { class: { 'mg-input__input-group-container': true, 'mg-input__input-group-container--vertical': this.inputVerticalList } }, this.checkboxItems
+    return (h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, readonly: undefined, mgWidth: undefined, disabled: this.disabled, value: this.value && this.value.toString(), readonlyValue: undefined, tooltip: !this.readonly ? this.tooltip : undefined, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined, isFieldset: true }, h("ul", { class: { 'mg-input__input-group-container': true, 'mg-input__input-group-container--vertical': this.inputVerticalList }, role: "list" }, this.checkboxItems
       .filter(item => {
       return !this.readonly || item.value;
     })
-      .map((input, index) => (h("li", { class: { 'mg-input__input-group': true, 'mg-input__input-group--disabled': this.disabled || input.disabled } }, h("input", { type: "checkbox", id: input.id, name: this.identifier, value: input.value && input.value.toString(), checked: Boolean(input.value), disabled: this.readonly || this.disabled || input.disabled, required: this.required, indeterminate: input.value === null, onInput: this.handleInput, onBlur: this.handleBlur, ref: el => {
+      .map((input, index) => (h("li", { key: input.id, class: { 'mg-input__input-group': true, 'mg-input__input-group--disabled': this.disabled || input.disabled } }, h("input", { type: "checkbox", id: input.id, name: this.identifier, value: input.value && input.value.toString(), checked: Boolean(input.value), disabled: this.readonly || this.disabled || input.disabled, required: this.required, indeterminate: input.value === null, onInput: this.handleInput, onBlur: this.handleBlur, ref: el => {
         if (el !== null)
           this.inputs[index] = el;
       } }), h("label", { htmlFor: input.id }, input.title)))))));
@@ -1397,46 +1712,7 @@ var InputError$1;
   InputError["REQUIRED"] = "required";
 })(InputError$1 || (InputError$1 = {}));
 
-/**
- * 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
- */
-function 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
- */
-function 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
- */
-function localeDate(date, locale) {
-  if (typeof date !== 'string' || date === '' || !dateRegExp.test(date)) {
-    return '';
-  }
-  return new Intl.DateTimeFormat(locale).format(new Date(date));
-}
-
-const mgInputDateCss = ":host{display:block}.mg-input{display:flex;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input mg-input-title{flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:flex;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container .mg-input__help-text,.mg-input__input-container .mg-input__error{text-align:start;font-size:1.2rem}.mg-input__input{display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input.mg-input__input--has-error .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input__input+.mg-input__help-text,.mg-input__input+.mg-input__error{margin-top:0.5rem}.mg-input__error{display:inline-block;margin-top:0.2rem;padding:0.3rem 0.8rem;border-radius:0.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-input__input mg-icon,.mg-input__error mg-icon{display:flex}.mg-input__box{padding:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2) var(--mg-inputs-spacer);height:var(--default-size);box-sizing:border-box;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));font-family:inherit;color:hsl(var(--color-dark));font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box:focus{box-shadow:0 0 0.6rem hsla(var(--mg-inputs-color-shadow-focus-hsl), 0.5)}.mg-input__box:disabled{opacity:0.3}.mg-input.mg-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.mg-input.mg-input--is-input-group-append .mg-input__box{margin-right:-0.1rem;border-top-right-radius:0%;border-bottom-right-radius:0%}.mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible{outline-style:solid;outline-offset:-0.2rem;outline-width:0.2rem}.mg-input.mg-input--is-input-group-append.mg-input--readonly slot[name=append-input]{display:none}.mg-input.mg-input--label-on-top .mg-input__box{width:auto;max-width:100%}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right:var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right:var(--mg-inputs-border-radius)}.mg-input.mg-input--is-append-input-slot-content:not(.mg-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.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}}";
+const mgInputDateCss = ":host{display:block}.mg-input{display:flex;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input mg-input-title{flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:flex;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container .mg-input__help-text,.mg-input__input-container .mg-input__error{text-align:start;font-size:1.2rem}.mg-input__input{display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input.mg-input__input--has-error .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input__input+.mg-input__help-text,.mg-input__input+.mg-input__error{margin-top:0.5rem}.mg-input__input .mg-input__box:disabled,.mg-input__input-group--disabled label,.mg-input.mg-input--toggle-disabled .mg-input__input .mg-input__button-toggle{opacity:var(--mg-disabled-opacity)}.mg-input__error{display:inline-block;margin-top:0.2rem;padding:0.3rem 0.8rem;border-radius:0.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-input__input mg-icon,.mg-input__error mg-icon{display:flex}.mg-input__box{padding:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2) var(--mg-inputs-spacer);height:var(--default-size);box-sizing:border-box;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));font-family:inherit;color:hsl(var(--color-dark));font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box:focus{box-shadow:0 0 0.6rem hsl(var(--mg-inputs-color-shadow-focus-hsl), 0.5)}.mg-input__box:disabled{opacity:0.3}.mg-input.mg-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.mg-input.mg-input--is-input-group-append .mg-input__box{margin-right:-0.1rem;border-top-right-radius:0;border-bottom-right-radius:0}.mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible{outline-style:solid;outline-offset:-0.2rem;outline-width:0.2rem}.mg-input.mg-input--is-input-group-append.mg-input--readonly slot[name=append-input]{display:none}.mg-input.mg-input--label-on-top .mg-input__box{width:auto;max-width:100%}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right:var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right:var(--mg-inputs-border-radius)}.mg-input.mg-input--is-append-input-slot-content:not(.mg-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.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}}";
 
 const MgInputDate = class {
   constructor(hostRef) {
@@ -1542,11 +1818,14 @@ const MgInputDate = class {
     this.errorMessage = undefined;
   }
   validateValue(newValue) {
+    // When the input is not fully completed or has been cleared, the value becomes an empty string.
+    if (newValue === '')
+      newValue = null;
     if (newValue !== undefined && newValue !== null && (typeof newValue !== 'string' || !dateRegExp.test(newValue))) {
       throw new Error("<mg-input-date> props 'value' doesn't match pattern: yyyy-mm-dd");
     }
     else {
-      this.valueChange.emit(this.value);
+      this.valueChange.emit(newValue);
     }
   }
   handleValidityChange(newValue, _oldValue, prop) {
@@ -1604,7 +1883,7 @@ const MgInputDate = class {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (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 }, 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, pattern: "[0-9]{4}-[0-9]{2}-[0-9]{2}", ref: el => {
+    return (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 }, 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;
       } })));
@@ -1633,7 +1912,7 @@ var InputError;
   InputError["REQUIRED"] = "required";
 })(InputError || (InputError = {}));
 
-const mgInputNumericCss = ":host{display:block}.mg-input{display:flex;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input mg-input-title{flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:flex;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container .mg-input__help-text,.mg-input__input-container .mg-input__error{text-align:start;font-size:1.2rem}.mg-input__input{display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input.mg-input__input--has-error .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input__input+.mg-input__help-text,.mg-input__input+.mg-input__error{margin-top:0.5rem}.mg-input__error{display:inline-block;margin-top:0.2rem;padding:0.3rem 0.8rem;border-radius:0.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-input__input mg-icon,.mg-input__error mg-icon{display:flex}.mg-input__box{padding:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2) var(--mg-inputs-spacer);height:var(--default-size);box-sizing:border-box;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));font-family:inherit;color:hsl(var(--color-dark));font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box:focus{box-shadow:0 0 0.6rem hsla(var(--mg-inputs-color-shadow-focus-hsl), 0.5)}.mg-input__box:disabled{opacity:0.3}.mg-input.mg-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.mg-input.mg-input--is-input-group-append .mg-input__box{margin-right:-0.1rem;border-top-right-radius:0%;border-bottom-right-radius:0%}.mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible{outline-style:solid;outline-offset:-0.2rem;outline-width:0.2rem}.mg-input.mg-input--is-input-group-append.mg-input--readonly slot[name=append-input]{display:none}.mg-input.mg-input--label-on-top .mg-input__box{width:auto;max-width:100%}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right:var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right:var(--mg-inputs-border-radius)}.mg-input.mg-input--is-append-input-slot-content:not(.mg-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input.mg-input--width-full:not(.mg-input--label-on-top){justify-content:space-between}.mg-input.mg-input--width-full.mg-input--label-on-top .mg-input__box{width:100%}.mg-input.mg-input--width-full .mg-input__input-container{flex:auto;width:100%}.mg-input.mg-input--width-full .mg-input__input-container .mg-input__box{max-width:100%}.mg-input:not(.mg-input--label-on-top) .mg-input__box{width:100%;max-width:calc(17.7rem + var(--mg-inputs-spacer) * 2);min-width:5rem}.mg-input.mg-input--width-16 .mg-input__input-container{width:100%}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__input{width:100%;max-width:21rem}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__with-character-left{width:100%}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__box{max-width:21rem;min-width:100%}.mg-input.mg-input--width-4 .mg-input__input-container .mg-input__box{max-width:7rem}.mg-input.mg-input--width-2 .mg-input__input-container .mg-input__box{max-width:5rem}.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-input .mg-input__box{text-align:var(--mg-inputs-text-align, right)}";
+const mgInputNumericCss = ":host{display:block}.mg-input{display:flex;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input mg-input-title{flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:flex;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container .mg-input__help-text,.mg-input__input-container .mg-input__error{text-align:start;font-size:1.2rem}.mg-input__input{display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input.mg-input__input--has-error .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input__input+.mg-input__help-text,.mg-input__input+.mg-input__error{margin-top:0.5rem}.mg-input__input .mg-input__box:disabled,.mg-input__input-group--disabled label,.mg-input.mg-input--toggle-disabled .mg-input__input .mg-input__button-toggle{opacity:var(--mg-disabled-opacity)}.mg-input__error{display:inline-block;margin-top:0.2rem;padding:0.3rem 0.8rem;border-radius:0.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-input__input mg-icon,.mg-input__error mg-icon{display:flex}.mg-input__box{padding:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2) var(--mg-inputs-spacer);height:var(--default-size);box-sizing:border-box;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));font-family:inherit;color:hsl(var(--color-dark));font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box:focus{box-shadow:0 0 0.6rem hsl(var(--mg-inputs-color-shadow-focus-hsl), 0.5)}.mg-input__box:disabled{opacity:0.3}.mg-input.mg-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.mg-input.mg-input--is-input-group-append .mg-input__box{margin-right:-0.1rem;border-top-right-radius:0;border-bottom-right-radius:0}.mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible{outline-style:solid;outline-offset:-0.2rem;outline-width:0.2rem}.mg-input.mg-input--is-input-group-append.mg-input--readonly slot[name=append-input]{display:none}.mg-input.mg-input--label-on-top .mg-input__box{width:auto;max-width:100%}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right:var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right:var(--mg-inputs-border-radius)}.mg-input.mg-input--is-append-input-slot-content:not(.mg-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input.mg-input--width-full:not(.mg-input--label-on-top){justify-content:space-between}.mg-input.mg-input--width-full.mg-input--label-on-top .mg-input__box{width:100%}.mg-input.mg-input--width-full .mg-input__input-container{flex:auto;width:100%}.mg-input.mg-input--width-full .mg-input__input-container .mg-input__box{max-width:100%}.mg-input:not(.mg-input--label-on-top) .mg-input__box{width:100%;max-width:calc(17.7rem + var(--mg-inputs-spacer) * 2);min-width:5rem}.mg-input.mg-input--width-16 .mg-input__input-container{width:100%}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__input{width:100%;max-width:21rem}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__with-character-left{width:100%}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__box{max-width:21rem;min-width:100%}.mg-input.mg-input--width-4 .mg-input__input-container .mg-input__box{max-width:7rem}.mg-input.mg-input--width-2 .mg-input__input-container .mg-input__box{max-width:5rem}.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-input .mg-input__box{text-align:var(--mg-inputs-text-align, right)}";
 
 const MgInputNumeric = class {
   constructor(hostRef) {
@@ -1812,7 +2091,7 @@ const MgInputNumeric = class {
   }
   validateType(newValue) {
     if (!types.includes(newValue)) {
-      throw new Error(`<mg-input-numeric> prop "type" must be one of : ${types.join(', ')}`);
+      throw new Error(`<mg-input-numeric> prop "type" must be one of: ${types.join(', ')}`);
     }
   }
   validateIntegerLength(newValue) {
@@ -1894,7 +2173,7 @@ const MgInputNumeric = class {
 };
 MgInputNumeric.style = mgInputNumericCss;
 
-const mgInputPasswordCss = ":host{display:block}.mg-input{display:flex;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input mg-input-title{flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:flex;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container .mg-input__help-text,.mg-input__input-container .mg-input__error{text-align:start;font-size:1.2rem}.mg-input__input{display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input.mg-input__input--has-error .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input__input+.mg-input__help-text,.mg-input__input+.mg-input__error{margin-top:0.5rem}.mg-input__error{display:inline-block;margin-top:0.2rem;padding:0.3rem 0.8rem;border-radius:0.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-input__input mg-icon,.mg-input__error mg-icon{display:flex}.mg-input__box{padding:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2) var(--mg-inputs-spacer);height:var(--default-size);box-sizing:border-box;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));font-family:inherit;color:hsl(var(--color-dark));font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box:focus{box-shadow:0 0 0.6rem hsla(var(--mg-inputs-color-shadow-focus-hsl), 0.5)}.mg-input__box:disabled{opacity:0.3}.mg-input.mg-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.mg-input.mg-input--is-input-group-append .mg-input__box{margin-right:-0.1rem;border-top-right-radius:0%;border-bottom-right-radius:0%}.mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible{outline-style:solid;outline-offset:-0.2rem;outline-width:0.2rem}.mg-input.mg-input--is-input-group-append.mg-input--readonly slot[name=append-input]{display:none}.mg-input.mg-input--label-on-top .mg-input__box{width:auto;max-width:100%}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right:var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right:var(--mg-inputs-border-radius)}.mg-input.mg-input--is-append-input-slot-content:not(.mg-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input.mg-input--width-full:not(.mg-input--label-on-top){justify-content:space-between}.mg-input.mg-input--width-full.mg-input--label-on-top .mg-input__box{width:100%}.mg-input.mg-input--width-full .mg-input__input-container{flex:auto;width:100%}.mg-input.mg-input--width-full .mg-input__input-container .mg-input__box{max-width:100%}.mg-input:not(.mg-input--label-on-top) .mg-input__box{width:100%;max-width:calc(17.7rem + var(--mg-inputs-spacer) * 2);min-width:5rem}.mg-input.mg-input--width-16 .mg-input__input-container{width:100%}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__input{width:100%;max-width:21rem}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__with-character-left{width:100%}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__box{max-width:21rem;min-width:100%}.mg-input.mg-input--width-4 .mg-input__input-container .mg-input__box{max-width:7rem}.mg-input.mg-input--width-2 .mg-input__input-container .mg-input__box{max-width:5rem}.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}}";
+const mgInputPasswordCss = ":host{display:block}.mg-input{display:flex;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input mg-input-title{flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:flex;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container .mg-input__help-text,.mg-input__input-container .mg-input__error{text-align:start;font-size:1.2rem}.mg-input__input{display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input.mg-input__input--has-error .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input__input+.mg-input__help-text,.mg-input__input+.mg-input__error{margin-top:0.5rem}.mg-input__input .mg-input__box:disabled,.mg-input__input-group--disabled label,.mg-input.mg-input--toggle-disabled .mg-input__input .mg-input__button-toggle{opacity:var(--mg-disabled-opacity)}.mg-input__error{display:inline-block;margin-top:0.2rem;padding:0.3rem 0.8rem;border-radius:0.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-input__input mg-icon,.mg-input__error mg-icon{display:flex}.mg-input__box{padding:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2) var(--mg-inputs-spacer);height:var(--default-size);box-sizing:border-box;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));font-family:inherit;color:hsl(var(--color-dark));font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box:focus{box-shadow:0 0 0.6rem hsl(var(--mg-inputs-color-shadow-focus-hsl), 0.5)}.mg-input__box:disabled{opacity:0.3}.mg-input.mg-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.mg-input.mg-input--is-input-group-append .mg-input__box{margin-right:-0.1rem;border-top-right-radius:0;border-bottom-right-radius:0}.mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible{outline-style:solid;outline-offset:-0.2rem;outline-width:0.2rem}.mg-input.mg-input--is-input-group-append.mg-input--readonly slot[name=append-input]{display:none}.mg-input.mg-input--label-on-top .mg-input__box{width:auto;max-width:100%}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right:var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right:var(--mg-inputs-border-radius)}.mg-input.mg-input--is-append-input-slot-content:not(.mg-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input.mg-input--width-full:not(.mg-input--label-on-top){justify-content:space-between}.mg-input.mg-input--width-full.mg-input--label-on-top .mg-input__box{width:100%}.mg-input.mg-input--width-full .mg-input__input-container{flex:auto;width:100%}.mg-input.mg-input--width-full .mg-input__input-container .mg-input__box{max-width:100%}.mg-input:not(.mg-input--label-on-top) .mg-input__box{width:100%;max-width:calc(17.7rem + var(--mg-inputs-spacer) * 2);min-width:5rem}.mg-input.mg-input--width-16 .mg-input__input-container{width:100%}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__input{width:100%;max-width:21rem}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__with-character-left{width:100%}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__box{max-width:21rem;min-width:100%}.mg-input.mg-input--width-4 .mg-input__input-container .mg-input__box{max-width:7rem}.mg-input.mg-input--width-2 .mg-input__input-container .mg-input__box{max-width:5rem}.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}}";
 
 const MgInputPassword = class {
   constructor(hostRef) {
@@ -2020,7 +2299,7 @@ const MgInputPassword = class {
 };
 MgInputPassword.style = mgInputPasswordCss;
 
-const mgInputRadioCss = ":host{display:block}.mg-input{display:flex;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input mg-input-title{flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:flex;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container .mg-input__help-text,.mg-input__input-container .mg-input__error{text-align:start;font-size:1.2rem}.mg-input__input{display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input.mg-input__input--has-error .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input__input+.mg-input__help-text,.mg-input__input+.mg-input__error{margin-top:0.5rem}.mg-input__error{display:inline-block;margin-top:0.2rem;padding:0.3rem 0.8rem;border-radius:0.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-input__input mg-icon,.mg-input__error mg-icon{display:flex}fieldset.mg-input{border:0;margin-left:0;margin-right:0;padding:0}fieldset.mg-input input[type=radio],fieldset.mg-input input[type=checkbox]{flex-shrink:0;width:var(--mg-input-check-size);height:var(--mg-input-check-size);margin-top:calc((var(--font-size) * var(--line-height) - var(--mg-input-check-size)) / 2);margin-right:0.6rem;margin-bottom:0;margin-left:0}fieldset.mg-input.mg-input--label-on-top .mg-input__input-group-container{margin-top:0.7rem}.mg-input__input-container mg-tooltip{margin-left:3rem}.mg-input__input-group-container{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;column-gap:2.3rem;row-gap:1rem;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2)}.mg-input__input-group-container--vertical{flex-direction:column}.mg-input__input-group{display:flex;align-items:top}.mg-input__input-group.mg-input__input-group--disabled label{opacity:0.3}.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}}";
+const mgInputRadioCss = ":host{display:block}.mg-input{display:flex;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input mg-input-title{flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:flex;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container .mg-input__help-text,.mg-input__input-container .mg-input__error{text-align:start;font-size:1.2rem}.mg-input__input{display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input.mg-input__input--has-error .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input__input+.mg-input__help-text,.mg-input__input+.mg-input__error{margin-top:0.5rem}.mg-input__input .mg-input__box:disabled,.mg-input__input-group--disabled label,.mg-input.mg-input--toggle-disabled .mg-input__input .mg-input__button-toggle{opacity:var(--mg-disabled-opacity)}.mg-input__error{display:inline-block;margin-top:0.2rem;padding:0.3rem 0.8rem;border-radius:0.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-input__input mg-icon,.mg-input__error mg-icon{display:flex}fieldset.mg-input{border:0;margin-left:0;margin-right:0;padding:0}fieldset.mg-input input[type=radio],fieldset.mg-input input[type=checkbox]{flex-shrink:0;width:var(--mg-input-check-size);height:var(--mg-input-check-size);margin-top:calc((var(--font-size) * var(--line-height) - var(--mg-input-check-size)) / 2);margin-right:0.6rem;margin-bottom:0;margin-left:0}fieldset.mg-input.mg-input--label-on-top .mg-input__input-group-container{margin-top:0.7rem}.mg-input__input-container mg-tooltip{margin-left:3rem}.mg-input__input-group-container{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;column-gap:2.3rem;row-gap:1rem;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2)}.mg-input__input-group-container--vertical{flex-direction:column}.mg-input__input-group{display:flex;align-items:top}.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}}";
 
 /**
  * type Option validation function
@@ -2175,7 +2454,7 @@ const MgInputRadio = class {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, disabled: this.disabled, readonly: this.readonly, mgWidth: undefined, value: this.value, readonlyValue: this.value, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: true }, h("ul", { class: { 'mg-input__input-group-container': true, 'mg-input__input-group-container--vertical': this.inputVerticalList } }, this.options.map((input, index) => (h("li", { class: { 'mg-input__input-group': true, 'mg-input__input-group--disabled': this.disabled || input.disabled } }, h("input", { type: "radio", id: this.identifier + '_' + index, name: this.identifier, value: index, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: el => {
+    return (h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, disabled: this.disabled, readonly: this.readonly, mgWidth: undefined, value: this.value, readonlyValue: this.value, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: true }, h("ul", { class: { 'mg-input__input-group-container': true, 'mg-input__input-group-container--vertical': this.inputVerticalList }, role: "list" }, this.options.map((input, index) => (h("li", { key: input.title, class: { 'mg-input__input-group': true, 'mg-input__input-group--disabled': this.disabled || input.disabled } }, h("input", { type: "radio", id: this.identifier + '_' + index, name: this.identifier, value: index, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: el => {
         if (el !== null)
           this.inputs[index] = el;
       } }), h("label", { htmlFor: this.identifier + '_' + index }, input.title)))))));
@@ -2191,7 +2470,7 @@ const MgInputRadio = class {
 };
 MgInputRadio.style = mgInputRadioCss;
 
-const mgInputSelectCss = ":host{display:block}.mg-input{display:flex;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input mg-input-title{flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:flex;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container .mg-input__help-text,.mg-input__input-container .mg-input__error{text-align:start;font-size:1.2rem}.mg-input__input{display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input.mg-input__input--has-error .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input__input+.mg-input__help-text,.mg-input__input+.mg-input__error{margin-top:0.5rem}.mg-input__error{display:inline-block;margin-top:0.2rem;padding:0.3rem 0.8rem;border-radius:0.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-input__input mg-icon,.mg-input__error mg-icon{display:flex}.mg-input__box{padding:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2) var(--mg-inputs-spacer);height:var(--default-size);box-sizing:border-box;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));font-family:inherit;color:hsl(var(--color-dark));font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box:focus{box-shadow:0 0 0.6rem hsla(var(--mg-inputs-color-shadow-focus-hsl), 0.5)}.mg-input__box:disabled{opacity:0.3}.mg-input.mg-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.mg-input.mg-input--is-input-group-append .mg-input__box{margin-right:-0.1rem;border-top-right-radius:0%;border-bottom-right-radius:0%}.mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible{outline-style:solid;outline-offset:-0.2rem;outline-width:0.2rem}.mg-input.mg-input--is-input-group-append.mg-input--readonly slot[name=append-input]{display:none}.mg-input.mg-input--label-on-top .mg-input__box{width:auto;max-width:100%}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right:var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right:var(--mg-inputs-border-radius)}.mg-input.mg-input--is-append-input-slot-content:not(.mg-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input.mg-input--width-full:not(.mg-input--label-on-top){justify-content:space-between}.mg-input.mg-input--width-full.mg-input--label-on-top .mg-input__box{width:100%}.mg-input.mg-input--width-full .mg-input__input-container{flex:auto;width:100%}.mg-input.mg-input--width-full .mg-input__input-container .mg-input__box{max-width:100%}.mg-input:not(.mg-input--label-on-top) .mg-input__box{width:100%;max-width:calc(17.7rem + var(--mg-inputs-spacer) * 2);min-width:5rem}.mg-input.mg-input--width-16 .mg-input__input-container{width:100%}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__input{width:100%;max-width:21rem}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__with-character-left{width:100%}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__box{max-width:21rem;min-width:100%}.mg-input.mg-input--width-4 .mg-input__input-container .mg-input__box{max-width:7rem}.mg-input.mg-input--width-2 .mg-input__input-container .mg-input__box{max-width:5rem}.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-input__box{width:100%;padding-top:0;padding-bottom:0;padding-right:1rem}.mg-input.mg-input--select:not(.mg-input--label-on-top) .mg-input__box{max-width:unset}";
+const mgInputSelectCss = ":host{display:block}.mg-input{display:flex;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input mg-input-title{flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:flex;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container .mg-input__help-text,.mg-input__input-container .mg-input__error{text-align:start;font-size:1.2rem}.mg-input__input{display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input.mg-input__input--has-error .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input__input+.mg-input__help-text,.mg-input__input+.mg-input__error{margin-top:0.5rem}.mg-input__input .mg-input__box:disabled,.mg-input__input-group--disabled label,.mg-input.mg-input--toggle-disabled .mg-input__input .mg-input__button-toggle{opacity:var(--mg-disabled-opacity)}.mg-input__error{display:inline-block;margin-top:0.2rem;padding:0.3rem 0.8rem;border-radius:0.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-input__input mg-icon,.mg-input__error mg-icon{display:flex}.mg-input__box{padding:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2) var(--mg-inputs-spacer);height:var(--default-size);box-sizing:border-box;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));font-family:inherit;color:hsl(var(--color-dark));font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box:focus{box-shadow:0 0 0.6rem hsl(var(--mg-inputs-color-shadow-focus-hsl), 0.5)}.mg-input__box:disabled{opacity:0.3}.mg-input.mg-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.mg-input.mg-input--is-input-group-append .mg-input__box{margin-right:-0.1rem;border-top-right-radius:0;border-bottom-right-radius:0}.mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible{outline-style:solid;outline-offset:-0.2rem;outline-width:0.2rem}.mg-input.mg-input--is-input-group-append.mg-input--readonly slot[name=append-input]{display:none}.mg-input.mg-input--label-on-top .mg-input__box{width:auto;max-width:100%}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right:var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right:var(--mg-inputs-border-radius)}.mg-input.mg-input--is-append-input-slot-content:not(.mg-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input.mg-input--width-full:not(.mg-input--label-on-top){justify-content:space-between}.mg-input.mg-input--width-full.mg-input--label-on-top .mg-input__box{width:100%}.mg-input.mg-input--width-full .mg-input__input-container{flex:auto;width:100%}.mg-input.mg-input--width-full .mg-input__input-container .mg-input__box{max-width:100%}.mg-input:not(.mg-input--label-on-top) .mg-input__box{width:100%;max-width:calc(17.7rem + var(--mg-inputs-spacer) * 2);min-width:5rem}.mg-input.mg-input--width-16 .mg-input__input-container{width:100%}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__input{width:100%;max-width:21rem}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__with-character-left{width:100%}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__box{max-width:21rem;min-width:100%}.mg-input.mg-input--width-4 .mg-input__input-container .mg-input__box{max-width:7rem}.mg-input.mg-input--width-2 .mg-input__input-container .mg-input__box{max-width:5rem}.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-input__box{width:100%;padding-top:0;padding-bottom:0;padding-right:1rem}.mg-input.mg-input--select:not(.mg-input--label-on-top) .mg-input__box{max-width:unset}";
 
 /**
  * Check if item is a well configured option
@@ -2311,13 +2590,17 @@ const MgInputSelect = class {
     this.valueChange.emit(newValue);
   }
   validateItems(newValue) {
+    // Empty options
+    if (newValue.length === 0) {
+      this.options = [];
+    }
     // String array
-    if (allItemsAreString(newValue)) {
+    else if (allItemsAreString(newValue)) {
       this.valueExist = newValue.includes(this.value);
       this.options = newValue.map((item) => ({ title: item, value: item }));
     }
     // Object array
-    else if (newValue && newValue.every(item => isOption$1(item))) {
+    else if (newValue.every(item => isOption$1(item))) {
       this.valueExist = newValue.map(item => item.value).includes(this.value);
       // Grouped object options
       if (newValue.some(item => item.group !== undefined)) {
@@ -2329,7 +2612,7 @@ const MgInputSelect = class {
       }
     }
     else {
-      throw new Error('<mg-input-select> prop "items" is required and all items must be the same type, string or Option.');
+      throw new Error('<mg-input-select> prop "items" is required, can be an empty Array or all items must be the same type: string or Option.');
     }
   }
   handleValidityChange(newValue, _oldValue, prop) {
@@ -2386,7 +2669,7 @@ const MgInputSelect = class {
         if (el !== null)
           this.input = el;
       } }, (!this.placeholderHide || !this.valueExist) && ( // In case passed value does not match any option we display the placeholder
-    h("option", { value: "", disabled: this.placeholderDisabled && this.valueExist }, this.placeholder)), this.options.map(option => option.group !== undefined ? (h("optgroup", { label: option.group }, option.options.map(optgroup => (h("option", { value: optgroup.title, selected: JSON.stringify(this.value) === JSON.stringify(optgroup.value), disabled: optgroup.disabled }, optgroup.title))))) : (h("option", { value: option.title, selected: JSON.stringify(this.value) === JSON.stringify(option.value), disabled: option.disabled }, option.title))))));
+    h("option", { value: "", disabled: this.placeholderDisabled && this.valueExist }, this.placeholder)), this.options.map(option => option.group !== undefined ? (h("optgroup", { label: option.group }, option.options.map(optgroup => (h("option", { key: optgroup.title, value: optgroup.title, selected: JSON.stringify(this.value) === JSON.stringify(optgroup.value), disabled: optgroup.disabled }, optgroup.title))))) : (h("option", { value: option.title, selected: JSON.stringify(this.value) === JSON.stringify(option.value), disabled: option.disabled }, option.title))))));
   }
   get element() { return getElement(this); }
   static get watchers() { return {
@@ -2399,7 +2682,7 @@ const MgInputSelect = class {
 };
 MgInputSelect.style = mgInputSelectCss;
 
-const mgInputTextCss = ":host{display:block}.mg-input{display:flex;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input mg-input-title{flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:flex;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container .mg-input__help-text,.mg-input__input-container .mg-input__error{text-align:start;font-size:1.2rem}.mg-input__input{display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input.mg-input__input--has-error .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input__input+.mg-input__help-text,.mg-input__input+.mg-input__error{margin-top:0.5rem}.mg-input__error{display:inline-block;margin-top:0.2rem;padding:0.3rem 0.8rem;border-radius:0.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-input__input mg-icon,.mg-input__error mg-icon{display:flex}.mg-input__box{padding:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2) var(--mg-inputs-spacer);height:var(--default-size);box-sizing:border-box;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));font-family:inherit;color:hsl(var(--color-dark));font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box:focus{box-shadow:0 0 0.6rem hsla(var(--mg-inputs-color-shadow-focus-hsl), 0.5)}.mg-input__box:disabled{opacity:0.3}.mg-input.mg-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.mg-input.mg-input--is-input-group-append .mg-input__box{margin-right:-0.1rem;border-top-right-radius:0%;border-bottom-right-radius:0%}.mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible{outline-style:solid;outline-offset:-0.2rem;outline-width:0.2rem}.mg-input.mg-input--is-input-group-append.mg-input--readonly slot[name=append-input]{display:none}.mg-input.mg-input--label-on-top .mg-input__box{width:auto;max-width:100%}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right:var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right:var(--mg-inputs-border-radius)}.mg-input.mg-input--is-append-input-slot-content:not(.mg-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input.mg-input--width-full:not(.mg-input--label-on-top){justify-content:space-between}.mg-input.mg-input--width-full.mg-input--label-on-top .mg-input__box{width:100%}.mg-input.mg-input--width-full .mg-input__input-container{flex:auto;width:100%}.mg-input.mg-input--width-full .mg-input__input-container .mg-input__box{max-width:100%}.mg-input:not(.mg-input--label-on-top) .mg-input__box{width:100%;max-width:calc(17.7rem + var(--mg-inputs-spacer) * 2);min-width:5rem}.mg-input.mg-input--width-16 .mg-input__input-container{width:100%}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__input{width:100%;max-width:21rem}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__with-character-left{width:100%}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__box{max-width:21rem;min-width:100%}.mg-input.mg-input--width-4 .mg-input__input-container .mg-input__box{max-width:7rem}.mg-input.mg-input--width-2 .mg-input__input-container .mg-input__box{max-width:5rem}.mg-input mg-character-left{opacity:0.6;font-size:1.1rem}.mg-input.mg-input--has-display-character-left .mg-input__input+.mg-input__help-text,.mg-input.mg-input--has-display-character-left .mg-input__input+.mg-input__error{margin-top:0}.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-input.mg-input--has-icon .mg-input__with-character-left>mg-icon{position:absolute;top:50%;left:var(--mg-inputs-spacer);color:var(--mg-inputs-color);transform:translateY(-50%)}.mg-input.mg-input--has-icon .mg-input__with-character-left .mg-input__box{padding-left:calc(var(--mg-icon-regular-size) + var(--mg-inputs-spacer) * 2)}.mg-input__with-character-left{position:relative;display:inline-flex}.mg-input--width-full .mg-input__with-character-left{width:100%}.mg-input.is-focused .mg-input__with-character-left .mg-input__box{padding-right:calc(var(--mg-character-left-message-length) * 1ch + 0.8rem)}.mg-input__with-character-left mg-character-left{position:absolute;display:none;top:50%;right:1rem;opacity:0.6;transform:translateY(-50%);font-size:1.1rem}.mg-input.is-focused .mg-input__with-character-left mg-character-left{display:block}";
+const mgInputTextCss = ":host{display:block}.mg-input{display:flex;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input mg-input-title{flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:flex;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container .mg-input__help-text,.mg-input__input-container .mg-input__error{text-align:start;font-size:1.2rem}.mg-input__input{display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input.mg-input__input--has-error .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input__input+.mg-input__help-text,.mg-input__input+.mg-input__error{margin-top:0.5rem}.mg-input__input .mg-input__box:disabled,.mg-input__input-group--disabled label,.mg-input.mg-input--toggle-disabled .mg-input__input .mg-input__button-toggle{opacity:var(--mg-disabled-opacity)}.mg-input__error{display:inline-block;margin-top:0.2rem;padding:0.3rem 0.8rem;border-radius:0.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-input__input mg-icon,.mg-input__error mg-icon{display:flex}.mg-input__box{padding:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2) var(--mg-inputs-spacer);height:var(--default-size);box-sizing:border-box;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));font-family:inherit;color:hsl(var(--color-dark));font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box:focus{box-shadow:0 0 0.6rem hsl(var(--mg-inputs-color-shadow-focus-hsl), 0.5)}.mg-input__box:disabled{opacity:0.3}.mg-input.mg-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.mg-input.mg-input--is-input-group-append .mg-input__box{margin-right:-0.1rem;border-top-right-radius:0;border-bottom-right-radius:0}.mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible{outline-style:solid;outline-offset:-0.2rem;outline-width:0.2rem}.mg-input.mg-input--is-input-group-append.mg-input--readonly slot[name=append-input]{display:none}.mg-input.mg-input--label-on-top .mg-input__box{width:auto;max-width:100%}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right:var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right:var(--mg-inputs-border-radius)}.mg-input.mg-input--is-append-input-slot-content:not(.mg-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input.mg-input--width-full:not(.mg-input--label-on-top){justify-content:space-between}.mg-input.mg-input--width-full.mg-input--label-on-top .mg-input__box{width:100%}.mg-input.mg-input--width-full .mg-input__input-container{flex:auto;width:100%}.mg-input.mg-input--width-full .mg-input__input-container .mg-input__box{max-width:100%}.mg-input:not(.mg-input--label-on-top) .mg-input__box{width:100%;max-width:calc(17.7rem + var(--mg-inputs-spacer) * 2);min-width:5rem}.mg-input.mg-input--width-16 .mg-input__input-container{width:100%}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__input{width:100%;max-width:21rem}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__with-character-left{width:100%}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__box{max-width:21rem;min-width:100%}.mg-input.mg-input--width-4 .mg-input__input-container .mg-input__box{max-width:7rem}.mg-input.mg-input--width-2 .mg-input__input-container .mg-input__box{max-width:5rem}.mg-input mg-character-left{opacity:0.6;font-size:1.1rem}.mg-input.mg-input--has-display-character-left .mg-input__input+.mg-input__help-text,.mg-input.mg-input--has-display-character-left .mg-input__input+.mg-input__error{margin-top:0}.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-input.mg-input--has-icon .mg-input__with-character-left>mg-icon{position:absolute;top:50%;left:var(--mg-inputs-spacer);color:var(--mg-inputs-color);transform:translateY(-50%)}.mg-input.mg-input--has-icon .mg-input__with-character-left .mg-input__box{padding-left:calc(var(--mg-icon-regular-size) + var(--mg-inputs-spacer) * 2)}.mg-input__with-character-left{position:relative;display:inline-flex}.mg-input--width-full .mg-input__with-character-left{width:100%}.mg-input.is-focused .mg-input__with-character-left .mg-input__box{padding-right:calc(var(--mg-character-left-message-length) * 1ch + 0.8rem)}.mg-input__with-character-left mg-character-left{position:absolute;display:none;top:50%;right:1rem;opacity:0.6;transform:translateY(-50%);font-size:1.1rem}.mg-input.is-focused .mg-input__with-character-left mg-character-left{display:block}";
 
 const MgInputText = class {
   constructor(hostRef) {
@@ -2617,7 +2900,7 @@ const MgInputText = class {
 };
 MgInputText.style = mgInputTextCss;
 
-const mgInputTextareaCss = ":host{display:block}.mg-input{display:flex;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input mg-input-title{flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:flex;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container .mg-input__help-text,.mg-input__input-container .mg-input__error{text-align:start;font-size:1.2rem}.mg-input__input{display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input.mg-input__input--has-error .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input__input+.mg-input__help-text,.mg-input__input+.mg-input__error{margin-top:0.5rem}.mg-input__error{display:inline-block;margin-top:0.2rem;padding:0.3rem 0.8rem;border-radius:0.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-input__input mg-icon,.mg-input__error mg-icon{display:flex}.mg-input__box{padding:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2) var(--mg-inputs-spacer);height:var(--default-size);box-sizing:border-box;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));font-family:inherit;color:hsl(var(--color-dark));font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box:focus{box-shadow:0 0 0.6rem hsla(var(--mg-inputs-color-shadow-focus-hsl), 0.5)}.mg-input__box:disabled{opacity:0.3}.mg-input.mg-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.mg-input.mg-input--is-input-group-append .mg-input__box{margin-right:-0.1rem;border-top-right-radius:0%;border-bottom-right-radius:0%}.mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible{outline-style:solid;outline-offset:-0.2rem;outline-width:0.2rem}.mg-input.mg-input--is-input-group-append.mg-input--readonly slot[name=append-input]{display:none}.mg-input.mg-input--label-on-top .mg-input__box{width:auto;max-width:100%}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right:var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right:var(--mg-inputs-border-radius)}.mg-input.mg-input--is-append-input-slot-content:not(.mg-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input.mg-input--width-full:not(.mg-input--label-on-top){justify-content:space-between}.mg-input.mg-input--width-full.mg-input--label-on-top .mg-input__box{width:100%}.mg-input.mg-input--width-full .mg-input__input-container{flex:auto;width:100%}.mg-input.mg-input--width-full .mg-input__input-container .mg-input__box{max-width:100%}.mg-input:not(.mg-input--label-on-top) .mg-input__box{width:100%;max-width:calc(17.7rem + var(--mg-inputs-spacer) * 2);min-width:5rem}.mg-input.mg-input--width-16 .mg-input__input-container{width:100%}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__input{width:100%;max-width:21rem}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__with-character-left{width:100%}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__box{max-width:21rem;min-width:100%}.mg-input.mg-input--width-4 .mg-input__input-container .mg-input__box{max-width:7rem}.mg-input.mg-input--width-2 .mg-input__input-container .mg-input__box{max-width:5rem}.mg-input mg-character-left{opacity:0.6;font-size:1.1rem}.mg-input.mg-input--has-display-character-left .mg-input__input+.mg-input__help-text,.mg-input.mg-input--has-display-character-left .mg-input__input+.mg-input__error{margin-top:0}.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-input .mg-input__box{display:block;height:auto;resize:none}.mg-input .mg-input__box.mg-input__box--resizable{resize:both}.mg-input .mg-input__box.mg-input__box--resizable-horizontal{resize:horizontal}.mg-input .mg-input__box.mg-input__box--resizable-vertical{resize:vertical}.mg-input__with-character-left{width:100%}.mg-input__with-character-left mg-character-left{display:block;visibility:hidden;margin-top:0.2rem;text-align:end}.mg-input.is-focused .mg-input__with-character-left mg-character-left{visibility:visible}@-moz-document url-prefix(){.mg-input__box{overflow-x:hidden}}";
+const mgInputTextareaCss = ":host{display:block}.mg-input{display:flex;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input mg-input-title{flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:flex;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container .mg-input__help-text,.mg-input__input-container .mg-input__error{text-align:start;font-size:1.2rem}.mg-input__input{display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input.mg-input__input--has-error .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input__input+.mg-input__help-text,.mg-input__input+.mg-input__error{margin-top:0.5rem}.mg-input__input .mg-input__box:disabled,.mg-input__input-group--disabled label,.mg-input.mg-input--toggle-disabled .mg-input__input .mg-input__button-toggle{opacity:var(--mg-disabled-opacity)}.mg-input__error{display:inline-block;margin-top:0.2rem;padding:0.3rem 0.8rem;border-radius:0.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-input__input mg-icon,.mg-input__error mg-icon{display:flex}.mg-input__box{padding:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2) var(--mg-inputs-spacer);height:var(--default-size);box-sizing:border-box;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));font-family:inherit;color:hsl(var(--color-dark));font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box:focus{box-shadow:0 0 0.6rem hsl(var(--mg-inputs-color-shadow-focus-hsl), 0.5)}.mg-input__box:disabled{opacity:0.3}.mg-input.mg-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.mg-input.mg-input--is-input-group-append .mg-input__box{margin-right:-0.1rem;border-top-right-radius:0;border-bottom-right-radius:0}.mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible{outline-style:solid;outline-offset:-0.2rem;outline-width:0.2rem}.mg-input.mg-input--is-input-group-append.mg-input--readonly slot[name=append-input]{display:none}.mg-input.mg-input--label-on-top .mg-input__box{width:auto;max-width:100%}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right:var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right:var(--mg-inputs-border-radius)}.mg-input.mg-input--is-append-input-slot-content:not(.mg-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input.mg-input--width-full:not(.mg-input--label-on-top){justify-content:space-between}.mg-input.mg-input--width-full.mg-input--label-on-top .mg-input__box{width:100%}.mg-input.mg-input--width-full .mg-input__input-container{flex:auto;width:100%}.mg-input.mg-input--width-full .mg-input__input-container .mg-input__box{max-width:100%}.mg-input:not(.mg-input--label-on-top) .mg-input__box{width:100%;max-width:calc(17.7rem + var(--mg-inputs-spacer) * 2);min-width:5rem}.mg-input.mg-input--width-16 .mg-input__input-container{width:100%}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__input{width:100%;max-width:21rem}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__with-character-left{width:100%}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__box{max-width:21rem;min-width:100%}.mg-input.mg-input--width-4 .mg-input__input-container .mg-input__box{max-width:7rem}.mg-input.mg-input--width-2 .mg-input__input-container .mg-input__box{max-width:5rem}.mg-input mg-character-left{opacity:0.6;font-size:1.1rem}.mg-input.mg-input--has-display-character-left .mg-input__input+.mg-input__help-text,.mg-input.mg-input--has-display-character-left .mg-input__input+.mg-input__error{margin-top:0}.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-input .mg-input__box{display:block;height:auto;resize:none}.mg-input .mg-input__box.mg-input__box--resizable{resize:both}.mg-input .mg-input__box.mg-input__box--resizable-horizontal{resize:horizontal}.mg-input .mg-input__box.mg-input__box--resizable-vertical{resize:vertical}.mg-input__with-character-left{width:100%}.mg-input__with-character-left mg-character-left{display:block;visibility:hidden;margin-top:0.2rem;text-align:end}.mg-input.is-focused .mg-input__with-character-left mg-character-left{visibility:visible}@-moz-document url-prefix(){.mg-input__box{overflow-x:hidden}}";
 
 const MgInputTextarea = class {
   constructor(hostRef) {
@@ -2661,7 +2944,7 @@ const MgInputTextarea = class {
     };
     /**
      * Get pattern validity
-     * Pattern is not defined on textarea field : https://developer.mozilla.org/fr/docs/Web/HTML/Element/Textarea
+     * Pattern is not defined on textarea field: https://developer.mozilla.org/fr/docs/Web/HTML/Element/Textarea
      *
      * @returns {boolean} is pattern valid
      */
@@ -2853,7 +3136,7 @@ const MgInputTitle = class {
 };
 MgInputTitle.style = mgInputTitleCss;
 
-const mgInputToggleCss = ":host{display:block}.mg-input{display:flex;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input mg-input-title{flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:flex;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container .mg-input__help-text,.mg-input__input-container .mg-input__error{text-align:start;font-size:1.2rem}.mg-input__input{display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input.mg-input__input--has-error .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input__input+.mg-input__help-text,.mg-input__input+.mg-input__error{margin-top:0.5rem}.mg-input__error{display:inline-block;margin-top:0.2rem;padding:0.3rem 0.8rem;border-radius:0.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-input__input mg-icon,.mg-input__error mg-icon{display:flex}.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-input.mg-input.mg-input--toggle .mg-input__input-container{flex:auto;min-width:0}.mg-input__button-toggle{display:flex;padding:0.2rem;min-width:0;background-color:hsl(var(--color-light));border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:calc((var(--font-size) * var(--line-height) + 2 * (0.7rem + var(--mg-inputs-border-width))) / var(--mg-input-toggle-border-radius-ratio));font-family:var(--font-family);font-size:inherit;line-height:inherit;cursor:pointer}.mg-input__button-toggle:disabled{cursor:default}.mg-input__toggle-item-container{padding:0.5rem 0.9rem;border:0;box-sizing:border-box;border-radius:calc((var(--font-size) * var(--line-height) + 1rem) / var(--mg-input-toggle-border-radius-ratio));background-color:unset;font-weight:unset;color:hsl(var(--color-dark));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mg-input__toggle-item-container:first-of-type{font-weight:600;color:hsl(var(--color-info));background-color:hsl(var(--color-info-h), calc(var(--color-info-s) - 64%), calc(var(--color-info-l) + 55%))}.mg-input.mg-input--toggle-is-active .mg-input__toggle-item-container:first-of-type{background-color:unset;font-weight:unset;color:hsl(var(--color-dark))}.mg-input.mg-input--toggle-is-active .mg-input__toggle-item-container:last-of-type{font-weight:600;color:hsl(var(--color-info));background-color:hsl(var(--color-info-h), calc(var(--color-info-s) - 64%), calc(var(--color-info-l) + 55%))}.mg-input.mg-input--toggle-icon .mg-input__toggle-item-container{display:flex;justify-content:center;align-items:center;width:calc(var(--font-size) * var(--line-height) + 1rem);height:calc(var(--font-size) * var(--line-height) + 1rem);padding:0;visibility:hidden}.mg-input.mg-input--toggle-icon .mg-input__toggle-item-container:first-of-type{visibility:visible}.mg-input.mg-input--toggle-icon .mg-input__toggle-item-container ::slotted(mg-icon){display:flex}.mg-input.mg-input--toggle-icon.mg-input--toggle-is-active .mg-input__toggle-item-container:first-of-type{visibility:hidden}.mg-input.mg-input--toggle-icon.mg-input--toggle-is-active .mg-input__toggle-item-container:last-of-type{visibility:visible}.mg-input.mg-input--toggle-on-off .mg-input__toggle-item-container:first-of-type{font-weight:600;color:hsl(var(--color-dark));background-color:hsl(var(--color-dark-h), calc(var(--color-dark-s) - 30%), calc(var(--color-dark-l) + 75%))}.mg-input.mg-input--toggle-on-off.mg-input--toggle-is-active .mg-input__toggle-item-container:first-of-type{background-color:unset;font-weight:unset;color:hsl(var(--color-dark))}.mg-input.mg-input--toggle-readonly .mg-input__button-toggle{border-color:transparent;background-color:transparent;cursor:initial}.mg-input.mg-input--toggle-readonly .mg-input__toggle-item-container:last-of-type{display:none}.mg-input.mg-input--toggle-readonly.mg-input--toggle-is-active .mg-input__toggle-item-container:first-of-type{display:none}.mg-input.mg-input--toggle-readonly.mg-input--toggle-is-active .mg-input__toggle-item-container:last-of-type{display:flex}.mg-input.mg-input--toggle-disabled .mg-input__button-toggle{opacity:0.3}";
+const mgInputToggleCss = ":host{display:block}.mg-input{display:flex;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input mg-input-title{flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:flex;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container .mg-input__help-text,.mg-input__input-container .mg-input__error{text-align:start;font-size:1.2rem}.mg-input__input{display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input.mg-input__input--has-error .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input__input+.mg-input__help-text,.mg-input__input+.mg-input__error{margin-top:0.5rem}.mg-input__input .mg-input__box:disabled,.mg-input__input-group--disabled label,.mg-input.mg-input--toggle-disabled .mg-input__input .mg-input__button-toggle{opacity:var(--mg-disabled-opacity)}.mg-input__error{display:inline-block;margin-top:0.2rem;padding:0.3rem 0.8rem;border-radius:0.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-input__input mg-icon,.mg-input__error mg-icon{display:flex}.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-input.mg-input.mg-input--toggle .mg-input__input-container{flex:auto;min-width:0}.mg-input__button-toggle{display:flex;padding:0.2rem;min-width:0;background-color:hsl(var(--color-light));border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:calc((var(--font-size) * var(--line-height) + 2 * (0.7rem + var(--mg-inputs-border-width))) / var(--mg-input-toggle-border-radius-ratio));font-family:var(--font-family);font-size:inherit;line-height:inherit;cursor:pointer}.mg-input__button-toggle:disabled{cursor:default}.mg-input__toggle-item-container{padding:0.5rem 0.9rem;border:0;box-sizing:border-box;border-radius:calc((var(--font-size) * var(--line-height) + 1rem) / var(--mg-input-toggle-border-radius-ratio));background-color:unset;font-weight:unset;color:hsl(var(--color-dark));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mg-input__toggle-item-container:first-of-type{font-weight:600;color:hsl(var(--color-info));background-color:hsl(var(--color-info-h), calc(var(--color-info-s) - 64%), calc(var(--color-info-l) + 55%))}.mg-input.mg-input--toggle-is-active .mg-input__toggle-item-container:first-of-type{background-color:unset;font-weight:unset;color:hsl(var(--color-dark))}.mg-input.mg-input--toggle-is-active .mg-input__toggle-item-container:last-of-type{font-weight:600;color:hsl(var(--color-info));background-color:hsl(var(--color-info-h), calc(var(--color-info-s) - 64%), calc(var(--color-info-l) + 55%))}.mg-input.mg-input--toggle-icon .mg-input__toggle-item-container{display:flex;justify-content:center;align-items:center;width:calc(var(--font-size) * var(--line-height) + 1rem);height:calc(var(--font-size) * var(--line-height) + 1rem);padding:0;visibility:hidden}.mg-input.mg-input--toggle-icon .mg-input__toggle-item-container:first-of-type{visibility:visible}.mg-input.mg-input--toggle-icon .mg-input__toggle-item-container ::slotted(mg-icon){display:flex}.mg-input.mg-input--toggle-icon.mg-input--toggle-is-active .mg-input__toggle-item-container:first-of-type{visibility:hidden}.mg-input.mg-input--toggle-icon.mg-input--toggle-is-active .mg-input__toggle-item-container:last-of-type{visibility:visible}.mg-input.mg-input--toggle-on-off .mg-input__toggle-item-container:first-of-type{font-weight:600;color:hsl(var(--color-dark));background-color:hsl(var(--color-dark-h), calc(var(--color-dark-s) - 30%), calc(var(--color-dark-l) + 75%))}.mg-input.mg-input--toggle-on-off.mg-input--toggle-is-active .mg-input__toggle-item-container:first-of-type{background-color:unset;font-weight:unset;color:hsl(var(--color-dark))}.mg-input.mg-input--toggle-readonly .mg-input__button-toggle{border-color:transparent;background-color:transparent;cursor:initial}.mg-input.mg-input--toggle-readonly .mg-input__toggle-item-container:last-of-type{display:none}.mg-input.mg-input--toggle-readonly.mg-input--toggle-is-active .mg-input__toggle-item-container:first-of-type{display:none}.mg-input.mg-input--toggle-readonly.mg-input--toggle-is-active .mg-input__toggle-item-container:last-of-type{display:flex}";
 
 /**
  * type Option validation function
@@ -2996,56 +3279,199 @@ const MgInputToggle = class {
       this.checked = this.value === this.options[1].value;
     }
   }
-  /*************
-   * Lifecycle *
-   *************/
-  /**
-   * Check if component props are well configured on init
-   */
-  componentWillLoad() {
-    // Check items format
-    this.validateItems(this.items);
-    // Check slots
-    this.validateSlots();
-    // init checked value
-    this.setChecked();
-    // apply handler
-    this.handleIsOnOff(this.isOnOff);
-    this.handleIsIcon(this.isIcon);
-    this.handleReadonly(this.readonly);
-    this.handleDisabled(this.disabled);
-  }
-  /**
-   * Render
-   *
-   * @returns {HTMLElement} HTML Element
-   */
-  render() {
-    return (h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, readonly: undefined, mgWidth: undefined, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: !this.readonly && this.tooltip, helpText: this.helpText, errorMessage: undefined, isFieldset: false }, h("button", { type: "button", role: "switch", "aria-checked": this.checked.toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.toggleChecked }, h("span", { "aria-hidden": "true", class: "mg-input__toggle-item-container" }, h("slot", { name: "item-1" })), h("span", { "aria-hidden": "true", class: "mg-input__toggle-item-container" }, h("slot", { name: "item-2" })))));
-  }
-  get element() { return getElement(this); }
-  static get watchers() { return {
-    "value": ["handleValue"],
-    "items": ["validateItems"],
-    "isOnOff": ["handleIsOnOff"],
-    "isIcon": ["handleIsIcon"],
-    "readonly": ["handleReadonly"],
-    "disabled": ["handleDisabled"],
-    "checked": ["handleChecked"]
-  }; }
-};
-MgInputToggle.style = mgInputToggleCss;
-
-/**
- * Menu direction type
- */
-var Direction;
-(function (Direction) {
-  Direction["VERTICAL"] = "vertical";
-  Direction["HORIZONTAL"] = "horizontal";
-})(Direction || (Direction = {}));
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Check if component props are well configured on init
+   */
+  componentWillLoad() {
+    // Check items format
+    this.validateItems(this.items);
+    // Check slots
+    this.validateSlots();
+    // init checked value
+    this.setChecked();
+    // apply handler
+    this.handleIsOnOff(this.isOnOff);
+    this.handleIsIcon(this.isIcon);
+    this.handleReadonly(this.readonly);
+    this.handleDisabled(this.disabled);
+  }
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render() {
+    return (h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, readonly: undefined, mgWidth: undefined, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: !this.readonly && this.tooltip, helpText: this.helpText, errorMessage: undefined, isFieldset: false }, h("button", { type: "button", role: "switch", "aria-checked": this.checked.toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.toggleChecked }, h("span", { "aria-hidden": "true", class: "mg-input__toggle-item-container" }, h("slot", { name: "item-1" })), h("span", { "aria-hidden": "true", class: "mg-input__toggle-item-container" }, h("slot", { name: "item-2" })))));
+  }
+  get element() { return getElement(this); }
+  static get watchers() { return {
+    "value": ["handleValue"],
+    "items": ["validateItems"],
+    "isOnOff": ["handleIsOnOff"],
+    "isIcon": ["handleIsIcon"],
+    "readonly": ["handleReadonly"],
+    "disabled": ["handleDisabled"],
+    "checked": ["handleChecked"]
+  }; }
+};
+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 = ":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 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 {
   constructor(hostRef) {
@@ -3054,11 +3480,12 @@ const MgMenu = class {
      * Internal *
      ************/
     this.name = 'mg-menu';
+    this.menuItems = [];
     this.focusedMenuItem = 0;
     /**
      * Close matching menu-item
      *
-     * @param {HTMLMgMenuItemElement} item menu-item to close
+     * @param {HTMLElement} item menu-item to close
      * @param {boolean} condition addionnal condition
      * @returns {void}
      */
@@ -3067,12 +3494,15 @@ const MgMenu = class {
         item.expanded = false;
       }
     };
+    /*************
+     * Methods *
+     *************/
     /**
      * Store menu-items on component init and add listeners
+     *
+     * @returns {void}
      */
-    this.initMenuItems = () => {
-      // store all menu-items
-      this.menuItems = Array.from(this.element.children).filter(child => child.nodeName === 'MG-MENU-ITEM');
+    this.initMenuItemsListeners = () => {
       // add listeners on menu item and edit index
       this.menuItems.forEach((item, menuItemIndex) => {
         ['click', 'focus'].forEach(trigger => {
@@ -3086,9 +3516,46 @@ const MgMenu = class {
         });
       });
     };
+    /**
+     * render mg-menu-more
+     *
+     * @returns {HTMLElement} formated mg-menu-item element
+     */
+    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.element.appendChild(moreElement);
+      return this.element.querySelector(`[${OverflowBehaviorElements.MORE}]`);
+    };
+    /**
+     * Render mg-menu-item more element for overflow behavior
+     *
+     * @returns {HTMLElement} rendered mg-menu-item more element
+     */
+    this.renderMgMenuItemMore = () => {
+      var _a, _b, _c, _d, _e, _f, _g;
+      return (h("mg-menu-item", { "data-overflow-more": true }, 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" }), 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), h("mg-menu", { direction: Direction.VERTICAL, label: this.messages.moreLabel, size: (_g = this.moreitem) === null || _g === void 0 ? void 0 : _g.size })));
+    };
     this.label = undefined;
     this.direction = Direction.HORIZONTAL;
+    this.moreitem = undefined;
+    this.size = 'regular';
     this.isChildMenu = undefined;
+    this.hasOverflow = false;
   }
   validateLabel(newValue) {
     if (newValue === undefined) {
@@ -3097,7 +3564,20 @@ 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}.`);
+      throw new Error(`<${this.name}> prop "direction" must be one of: ${Direction.HORIZONTAL}, ${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.`);
+    }
+  }
+  validateSize(newValue) {
+    if (!sizes$2.includes(newValue)) {
+      throw new Error(`<${this.name}> prop "size" must be one of: ${sizes$2.join(', ')}.`);
     }
   }
   /*************
@@ -3109,8 +3589,12 @@ 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.validateSize(this.size);
   }
   /**
    * Check if component slots configuration
@@ -3122,72 +3606,64 @@ const MgMenu = class {
     // return a promise to process action only in the FIRST render().
     // https://stenciljs.com/docs/component-lifecycle#componentwillload
     return setTimeout(() => {
-      this.initMenuItems();
+      // 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;
-      // click outside management for child vertical menu
-      if (!this.isChildMenu && this.direction === Direction.HORIZONTAL) {
-        document.addEventListener('click', (event) => {
-          if (event.target.closest('mg-menu') === null) {
-            this.menuItems.forEach(item => {
-              this.closeMenuItem(item, this.direction === Direction.HORIZONTAL);
-            });
-          }
-        });
-      }
+      this.hasOverflow = this.direction === Direction.HORIZONTAL && !this.isChildMenu;
+      if (this.hasOverflow && isMoreItem(this.moreitem))
+        this.overflowBehavior = new OverflowBehavior(this.element, this.renderMgMenuMore);
     }, 0);
   }
+  /**
+   * Check add listeners to childs
+   *
+   * @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 (h(Host, { role: this.isChildMenu ? 'menu' : 'menubar', "aria-label": this.label }, h("slot", null)));
+    return (h(Host, { role: this.isChildMenu ? 'menu' : 'menubar', "aria-label": this.label }, h("slot", null), this.hasOverflow && isMoreItem(this.moreitem) && this.renderMgMenuItemMore()));
   }
   get element() { return getElement(this); }
   static get watchers() { return {
     "label": ["validateLabel"],
-    "direction": ["validateDirection"]
+    "direction": ["validateDirection"],
+    "moreitem": ["validateMoreItem"],
+    "size": ["validateSize"]
   }; }
 };
 MgMenu.style = mgMenuCss;
 
-/**
- * Available menu-item positions
- */
-var ElementPosition;
-(function (ElementPosition) {
-  ElementPosition["FIRST"] = "first";
-  ElementPosition["LAST"] = "last";
-})(ElementPosition || (ElementPosition = {}));
-/**
- * Available menu item status
- */
-var Status$1;
-(function (Status) {
-  Status["VISIBLE"] = "visible";
-  Status["HIDDEN"] = "hidden";
-  Status["DISABLED"] = "disabled";
-  Status["ACTIVE"] = "active";
-})(Status$1 || (Status$1 = {}));
-/**
- * List of all possibles sizes
- */
-const sizes$1 = ['regular', 'medium', 'large'];
-
-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}.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:1.3rem}.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:1.5rem 3rem}.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:1.5rem}.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(1.5rem - 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:2.5rem 4rem}.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:1.5rem}.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(2.5rem - 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:1rem;background-color:unset;border:none;font-family:var(--font-family);color:hsl(var(--mg-menu-item-color-hsl, var(--color-dark)));line-height:var(--line-height);text-decoration:none;cursor:pointer}.mg-menu-item__navigation-button:disabled,.mg-menu-item__navigation-button--disabled{cursor:default;opacity:30%}.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:not(.mg-menu-item__navigation-button--disabled){background-color:hsla(var(--mg-menu-item-focused-background-color-hsl), 10%)}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--active{color:hsl(var(--mg-menu-item-color-active-hsl));font-weight:700}.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}:host([data-style-position-last]) .mg-menu-item__collapse-container{left:unset;right:0}:host([data-style-direction-vertical]){flex-direction:column}: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{box-shadow:var(--box-shadow);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}.mg-menu-item{max-width:var(--mg-menu-item-navigation-button-max-width)}.mg-menu-item__collapse-container{position:absolute;top:100%;left:0;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}.mg-menu-item__navigation-button-text-content ::slotted([slot=information]){margin-left:1rem}.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}:host([status=disabled]){pointer-events: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: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 MgMenuItem = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.statusChange = createEvent(this, "status-change", 7);
     /************
      * Internal *
      ************/
     this.name = 'mg-menu-item';
     this.navigationButton = `${this.name}__navigation-button`;
-    /************
+    /***********
      * Methods *
-     ************/
+     **********/
     /**
      * Toggle expanded prop value
      *
@@ -3197,20 +3673,20 @@ const MgMenuItem = class {
       this.expanded = !this.expanded;
     };
     /**
-     * Does an HTMLElement contain child with given Status
+     * Does an Element have given Status
      *
-     * @param {HTMLElement} element to parse
+     * @param {HTMLMgMenuItemElement} mgMenuItemElement to parse
      * @param {MgMenuItem['status']} status to check
      * @returns {boolean} true if element with status is found
      */
-    this.hasChildElementStatus = (element, status) => element.querySelector(`${this.name}[status="${status}"]`) !== null;
+    this.hasStatus = (mgMenuItemElement, status) => mgMenuItemElement.status === status;
     /**
      * Is component contextual direction match the given direction
      *
      * @param {MgMenuItem['direction']} direction in parent menu
      * @returns {boolean} true is direction match the direction propertie
      */
-    this.isdirection = (direction) => this.direction === direction;
+    this.isDirection = (direction) => this.direction === direction;
     /************
      * Handlers *
      ************/
@@ -3221,7 +3697,7 @@ const MgMenuItem = class {
      * @returns {void}
      */
     this.handleElementCLick = (event) => {
-      if (this.hasChildren || this.status === Status$1.DISABLED) {
+      if ((this.hasChildren && !this.isInMainMenu) || this.status === Status$1.DISABLED) {
         event.preventDefault();
         event.stopPropagation();
       }
@@ -3229,27 +3705,60 @@ const MgMenuItem = class {
       if (this.hasChildren)
         this.toggleExpanded();
     };
+    /**
+     * Handle popover element display-change event
+     *
+     * @param {CustomEvent} event popover display event
+     * @returns {void}
+     */
+    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 = () => h("slot", null);
     this.href = undefined;
     this.status = Status$1.VISIBLE;
-    this.size = 'large';
     this.expanded = false;
+    this.size = 'regular';
     this.navigationButtonClassList = new ClassList([this.navigationButton]);
     this.direction = undefined;
     this.isInMainMenu = undefined;
     this.hasChildren = false;
+    this.displayNotificationBadge = undefined;
   }
   validateStatus(newValue, oldValue) {
     if (oldValue !== undefined) {
       this.navigationButtonClassList.delete(`${this.navigationButton}--${oldValue}`);
     }
     this.navigationButtonClassList.add(`${this.navigationButton}--${newValue}`);
-  }
-  validateSize(newValue, oldValue) {
-    if (!sizes$1.includes(newValue)) {
-      throw new Error(`<${this.name}> prop "size" must be one of : ${sizes$1.join(', ')}.`);
-    }
-    this.navigationButtonClassList.delete(`${this.navigationButton}--size-${oldValue}`);
-    this.navigationButtonClassList.add(`${this.navigationButton}--size-${newValue}`);
+    this.statusChange.emit(newValue);
   }
   validateExpanded(newValue) {
     if (typeof newValue !== 'boolean')
@@ -3263,16 +3772,20 @@ const MgMenuItem = class {
           item.expanded = false;
         });
       }
-      else if (newValue && this.hasChildElementStatus(this.element, Status$1.ACTIVE)) {
+      else if (this.element.querySelector(`${this.name}[status="${Status$1.ACTIVE}"]`) !== null) {
         // - when expanded and contain an active item parents are expended too
         subItems.forEach(item => {
-          if (this.hasChildElementStatus(item, Status$1.ACTIVE)) {
+          if (this.hasStatus(item, Status$1.ACTIVE)) {
             item.expanded = true;
           }
         });
       }
     }
   }
+  validateSize(newValue, oldValue) {
+    this.navigationButtonClassList.delete(`${this.navigationButton}--size-${oldValue}`);
+    this.navigationButtonClassList.add(`${this.navigationButton}--size-${newValue}`);
+  }
   validateHasChildren(newValue) {
     if (newValue && this.element.href !== undefined) {
       throw new Error(`<${this.name}> prop "href" is unauthorizied when element is a parent.`);
@@ -3287,13 +3800,14 @@ const MgMenuItem = class {
    * @returns {void}
    */
   componentWillLoad() {
-    // has children items that is NOT [slot="illustration"] || [slot="information"] element
+    // has children items that is NOT [slot='image' | 'information' | 'label' | 'metadata'] element
     // we store only matching elements
-    this.hasChildren = Array.from(this.element.children).filter(child => !['illustration', 'information', 'label', 'metadata'].includes(child.getAttribute('slot'))).length > 0;
+    this.hasChildren = Array.from(this.element.children).some(child => !['image', 'information', 'label', 'metadata'].includes(child.getAttribute('slot')));
     // Validate props
     this.validateSize(this.size);
     this.validateStatus(this.status);
     this.validateExpanded(this.expanded);
+    this.badgeLabel = initLocales(this.element).messages.plusMenu.badgeLabel;
   }
   /**
    * Check if component slots configuration
@@ -3317,55 +3831,82 @@ const MgMenuItem = class {
     // return a promise to process action only in the FIRST render().
     // https://stenciljs.com/docs/component-lifecycle#componentwillload
     return setTimeout(() => {
-      var _a, _b;
+      var _a;
       // define menu-item context states
-      if (this.element.parentElement.nodeName === 'MG-MENU') {
-        this.direction = this.element.parentElement.direction;
-      }
-      this.isInMainMenu = this.element.parentElement.className.includes('mg-menu-item') === false;
-      const hasNextMenuItem = ((_a = this.element.nextElementSibling) === null || _a === void 0 ? void 0 : _a.nodeName) === 'MG-MENU-ITEM';
-      const hasPreviousMenuItem = ((_b = this.element.previousElementSibling) === null || _b === void 0 ? void 0 : _b.nodeName) === 'MG-MENU-ITEM';
-      // manage last menu item
-      if (!hasNextMenuItem && hasPreviousMenuItem && this.isdirection(Direction.HORIZONTAL)) {
-        this.element.setAttribute('data-style-position-last', '');
-      }
+      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;
       // 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.isInMainMenu && this.hasChildElementStatus(this.element, Status$1.ACTIVE)) {
+      if (this.hasActiveChild()) {
         this.status = Status$1.ACTIVE;
-        this.expanded = this.direction === Direction.VERTICAL;
+        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}`);
-      // manage child items level
-      const childItems = Array.from(this.element.querySelectorAll('mg-menu-item'));
+      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 => {
-        if (this.direction === Direction.VERTICAL) {
-          const itemLevel = Number(item.getAttribute('data-level')) || 1;
-          item.setAttribute('data-level', `${itemLevel + 1}`);
-        }
+        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 });
       });
     }, 0);
   }
   /**
-   * Render
+   * Render ineractive element
    *
    * @returns {HTMLElement} HTML Element
    */
-  render() {
+  renderInteractiveElement() {
     const TagName = this.href !== undefined ? 'a' : 'button';
-    return (h(Host, { role: "menuitem", "aria-haspopup": this.hasChildren.toString() }, h(TagName, { href: this.href, class: this.navigationButtonClassList.join(), tabindex: [Status$1.DISABLED, Status$1.HIDDEN].includes(this.status) ? -1 : 0, disabled: this.status === Status$1.DISABLED, "aria-expanded": this.hasChildren && this.expanded.toString(), "aria-current": this.status === Status$1.ACTIVE && 'page', onClick: this.handleElementCLick }, h("slot", { name: "illustration" }), h("div", { class: `${this.navigationButton}-center` }, h("div", { class: `${this.navigationButton}-text-content` }, h("slot", { name: "label" }), h("slot", { name: "information" })), h("slot", { name: "metadata" })), this.hasChildren && this.href === undefined && (h("span", { class: {
+    return (h(TagName, { href: this.href, class: this.navigationButtonClassList.join(), tabindex: [Status$1.DISABLED, Status$1.HIDDEN].includes(this.status) ? -1 : 0, disabled: this.status === Status$1.DISABLED, hidden: this.status === Status$1.HIDDEN, "aria-expanded": this.hasChildren && this.expanded.toString(), "aria-current": this.status === Status$1.ACTIVE && 'page', onClick: this.handleElementCLick }, h("slot", { name: "image" }), h("div", { class: `${this.navigationButton}-center` }, h("div", { class: `${this.navigationButton}-text-content` }, h("slot", { name: "label" }), !this.displayNotificationBadge && h("slot", { name: "information" }), this.displayNotificationBadge && (h("span", { class: "mg-menu-item__navigation-button-text-content-notification" }, h("mg-badge", { label: this.badgeLabel, value: "!", variant: "text-color", slot: "information" })))), this.size !== 'regular' && h("slot", { name: "metadata" })), this.hasChildren && this.href === undefined && (h("span", { class: {
         [`${this.navigationButton}-chevron`]: true,
         [`${this.navigationButton}-chevron--rotate`]: this.expanded === true,
         'mg-a11y-animation': true,
-      } }, h("mg-icon", { icon: "chevron-down" })))), h("div", { class: { [`${this.name}__collapse-container`]: true, [`${this.name}__collapse-container--first-level`]: this.isInMainMenu && this.isdirection(Direction.HORIZONTAL) }, hidden: !this.expanded }, h("slot", null))));
+      } }, h("mg-icon", { icon: "chevron-down" })))));
+  }
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render() {
+    const getContainerClasses = () => ({
+      [`${this.name}__collapse-container`]: true,
+      [`${this.name}__collapse-container--first-level`]: this.isInMainMenu && this.isDirection(Direction.HORIZONTAL),
+    });
+    return (h(Host, { role: "menuitem", "aria-haspopup": this.hasChildren.toString() }, this.isDirection(Direction.HORIZONTAL) && this.hasChildren && this.href === undefined ? (h("mg-popover", { display: this.expanded, placement: "bottom-start", arrowHide: true, "onDisplay-change": this.handlePopoverDisplay }, this.renderInteractiveElement(), h("div", { class: getContainerClasses(), slot: "content" }, this.renderSlot()))) : ([
+      this.renderInteractiveElement(),
+      h("div", { key: "vertical-container", class: getContainerClasses(), hidden: !this.expanded }, this.renderSlot()),
+    ])));
   }
   get element() { return getElement(this); }
   static get watchers() { return {
     "status": ["validateStatus"],
-    "size": ["validateSize"],
     "expanded": ["validateExpanded"],
+    "size": ["validateSize"],
     "hasChildren": ["validateHasChildren"]
   }; }
 };
@@ -3376,7 +3917,7 @@ MgMenuItem.style = mgMenuItemCss;
  */
 const variants$1 = ['info', 'warning', 'success', 'danger'];
 
-const mgMessageCss = ":host{--mg-card-padding:0;--mg-card-border-radius:var(--mg-message-border-radius);--mg-card-border:none;--mg-card-overflow:hidden}.mg-message{display:inline-block;min-height:var(--default-size)}.mg-message__bar{position:absolute;top:0;left:0;width:0.3rem;height:100%}.mg-message.mg-message--info .mg-message__bar{background-color:hsl(var(--color-info))}.mg-message.mg-message--info .mg-message__icon{color:hsl(var(--color-info))}.mg-message.mg-message--warning .mg-message__bar{background-color:hsl(var(--color-warning))}.mg-message.mg-message--warning .mg-message__icon{color:hsl(var(--color-warning))}.mg-message.mg-message--success .mg-message__bar{background-color:hsl(var(--color-success))}.mg-message.mg-message--success .mg-message__icon{color:hsl(var(--color-success))}.mg-message.mg-message--danger .mg-message__bar{background-color:hsl(var(--color-danger))}.mg-message.mg-message--danger .mg-message__icon{color:hsl(var(--color-danger))}.mg-message.mg-message--close-button{--mg-card-padding:0 3.4rem 0 0}.mg-message.mg-message--hide{display:none}.mg-message ::slotted(*){margin:0;padding:0}.mg-message__icon{position:absolute;top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2);left:1.3rem;line-height:1}.mg-message__content{display:flex;flex-wrap:wrap;justify-content:flex-end;align-content:stretch;padding:0 1rem 0 3.8rem}.mg-message__content-slot{flex-grow:1;margin:0.84rem 0}.mg-message__content-separator{display:inline-block;width:4.5rem;height:0}.mg-message__content-actions-slot{padding:1rem 0;text-align:right}.mg-message__close-button{position:absolute;top:0;right:0}.mg-message,mg-message{max-width:100%}";
+const mgMessageCss = ":host{--mg-card-padding:0;--mg-card-border-radius:var(--mg-message-border-radius);--mg-card-border:none;--mg-card-overflow:hidden}.mg-message{display:inline-block;min-height:var(--default-size)}.mg-message__bar{position:absolute;top:0;left:0;width:0.3rem;height:100%}.mg-message.mg-message--info .mg-message__bar{background-color:hsl(var(--color-info))}.mg-message.mg-message--info .mg-message__icon{color:hsl(var(--color-info))}.mg-message.mg-message--warning .mg-message__bar{background-color:hsl(var(--color-warning))}.mg-message.mg-message--warning .mg-message__icon{color:hsl(var(--color-warning))}.mg-message.mg-message--success .mg-message__bar{background-color:hsl(var(--color-success))}.mg-message.mg-message--success .mg-message__icon{color:hsl(var(--color-success))}.mg-message.mg-message--danger .mg-message__bar{background-color:hsl(var(--color-danger))}.mg-message.mg-message--danger .mg-message__icon{color:hsl(var(--color-danger))}.mg-message.mg-message--close-button{--mg-card-padding:0 3.4rem 0 0}.mg-message.mg-message--hide{display:none}.mg-message ::slotted(*){margin:0;padding:0}.mg-message__icon{position:absolute;top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2);left:1.3rem;line-height:1}.mg-message__content{display:flex;flex-wrap:wrap;justify-content:flex-end;align-content:stretch;padding:0 1rem 0 3.8rem}.mg-message__content-slot{flex-grow:1;margin:0.84rem 0}.mg-message__content-separator{display:inline-block;width:4.5rem;height:0}.mg-message__content-actions-slot{padding:1rem 0;text-align:right}.mg-message__close-button{position:absolute;top:0;right:0}.mg-message ::slotted(*){--mg-card-border:var(--mg-card-border-default);--mg-card-padding:var(--mg-card-padding-default);--mg-card-border-radius:var(--mg-card-border-radius-default);--mg-card-background:var(--mg-card-background-default);--mg-card-box-shadow:var(--mg-card-box-shadow-default)}.mg-message,mg-message{max-width:100%}";
 
 const MgMessage = class {
   constructor(hostRef) {
@@ -3392,22 +3933,49 @@ const MgMessage = class {
     this.closeButtonId = '';
     // Stored timer setted when hide action is run from setTimeOut
     this.storedTimer = null;
+    // Manage hover
+    this.isFocused = false;
+    this.isHovered = false;
     /**
-     * Handle close button
+     * Set timer
+     *
+     * @returns {void}
      */
-    this.handleClose = () => {
-      this.hide = true;
+    this.setTimer = () => {
+      this.storedTimer = setTimeout(() => (this.hide = true), this.delay * 1000);
     };
     /**
-     * Hide component whith delay
+     * Clear timer
+     *
+     * @returns {void}
      */
-    this.hideWithDelay = () => {
-      if (this.delay > 0 && this.hide !== true) {
-        this.storedTimer = setTimeout(() => (this.hide = true), this.delay * 1000);
-      }
-      else if (this.storedTimer !== null) {
-        clearTimeout(this.storedTimer);
-      }
+    this.clearTimer = () => {
+      clearTimeout(this.storedTimer);
+    };
+    /**
+     * Event to add on element
+     *
+     * @param {MouseEvent | FocusEvent} event  event
+     * @returns {void}
+     */
+    this.timerEvents = (event) => {
+      this.clearTimer();
+      const isMouseEvent = event.type === 'mouseenter';
+      // Needed to ensure we don't start the timer
+      this[isMouseEvent ? 'isHovered' : 'isFocused'] = true;
+      // Restart timer when loose focus AND mouse leave
+      this.element.addEventListener(isMouseEvent ? 'mouseleave' : 'focusout', eventOut => {
+        this[eventOut.type === 'mouseleave' ? 'isHovered' : 'isFocused'] = false;
+        // Start timer if needed
+        if (!this.isFocused && !this.isHovered)
+          this.setTimer();
+      }, { once: true });
+    };
+    /**
+     * Handle close button
+     */
+    this.handleClose = () => {
+      this.hide = true;
     };
     /**
      * Get icon corresponding to variant
@@ -3441,7 +4009,7 @@ const MgMessage = class {
   }
   validateVariant(newValue, oldValue) {
     if (!variants$1.includes(newValue)) {
-      throw new Error(`<mg-message> prop "variant" must be one of : ${variants$1.join(', ')}`);
+      throw new Error(`<mg-message> prop "variant" must be one of: ${variants$1.join(', ')}`);
     }
     else {
       if (oldValue !== undefined) {
@@ -3460,12 +4028,26 @@ const MgMessage = class {
     if (newValue) {
       this.componentHide.emit();
       this.classList.add(this.classHide);
+      // Remove event Listener
+      ['focusin', 'mouseenter'].forEach(event => {
+        this.element.removeEventListener(event, this.timerEvents);
+      });
+      // Clear Timer
+      this.clearTimer();
     }
     else {
       this.componentShow.emit();
       this.classList.delete(this.classHide);
+      // If delay is set
+      if (this.delay > 1) {
+        // Start timer
+        this.setTimer();
+        // Stop timer when get focus or mouse enter
+        ['focusin', 'mouseenter'].forEach(event => {
+          this.element.addEventListener(event, this.timerEvents);
+        });
+      }
     }
-    this.hideWithDelay();
   }
   /*************
    * Lifecycle *
@@ -3506,7 +4088,7 @@ const MgMessage = class {
 };
 MgMessage.style = mgMessageCss;
 
-const mgModalCss = ":host{--mg-card-border-radius:var(--mg-modal-border-radius);--mg-card-padding:1.5rem 2.5rem;--mg-card-border:none}.mg-modal{display:flex;justify-content:center;align-items:center;position:fixed;top:0;right:0;bottom:0;left:0;z-index:2000;padding:2rem 0;background-color:hsla(var(--color-light), 85%)}.mg-modal mg-card{display:flex;width:60rem;max-width:100%;max-height:100%}.mg-modal__dialog{display:flex;position:relative;flex-direction:column;align-self:center;row-gap:3rem;height:fit-content;max-height:100%}.mg-modal__header{margin-bottom:0.5rem}.mg-modal__title{margin:0;font-family:var(--font-family-heading);font-size:var(--mg-modal-title-font-size);font-weight:600}.mg-modal__close-button{float:right;height:var(--mg-modal-title-font-size);margin-top:calc((var(--default-size) - var(--mg-modal-title-font-size) * var(--line-height)) / 2 * -1);margin-right:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2 * -1)}.mg-modal__content{overflow-y:auto}.mg-modal__content::slotted(*){font-size:var(--mg-modal-content-font-size)}.mg-modal.mg-modal--hide{display:none}";
+const mgModalCss = ":host{--mg-card-border-radius:var(--mg-modal-border-radius);--mg-card-padding:1.5rem 2.5rem;--mg-card-border:none}.mg-modal{display:flex;justify-content:center;align-items:center;position:fixed;top:0;right:0;bottom:0;left:0;z-index:2000;padding:2rem 0;background-color:hsl(var(--color-light), 0.85)}.mg-modal mg-card{display:flex;width:60rem;max-width:100%;max-height:100%}.mg-modal__dialog{display:flex;position:relative;flex-direction:column;align-self:center;row-gap:3rem;height:fit-content;max-height:100%}.mg-modal__header{margin-bottom:0.5rem}.mg-modal__title{margin:0;font-family:var(--font-family-heading);font-size:var(--mg-modal-title-font-size);font-weight:600}.mg-modal__close-button{float:right;height:var(--mg-modal-title-font-size);margin-top:calc((var(--default-size) - var(--mg-modal-title-font-size) * var(--line-height)) / 2 * -1);margin-right:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2 * -1)}.mg-modal__content{overflow-y:auto}.mg-modal__content::slotted(*){font-size:var(--mg-modal-content-font-size)}.mg-modal.mg-modal--hide{display:none}.mg-modal ::slotted(*){--mg-card-border:var(--mg-card-border-default);--mg-card-padding:var(--mg-card-padding-default);--mg-card-border-radius:var(--mg-card-border-radius-default);--mg-card-background:var(--mg-card-background-default);--mg-card-box-shadow:var(--mg-card-box-shadow-default)}";
 
 const MgModal = class {
   constructor(hostRef) {
@@ -3719,6 +4301,7 @@ const MgPagination = class {
     };
     this.identifier = createID('mg-pagination');
     this.label = undefined;
+    this.hideNavigationLabels = undefined;
     this.totalPages = 1;
     this.currentPage = 1;
   }
@@ -3763,7 +4346,7 @@ const MgPagination = class {
   render() {
     const navigationActionButton = (disabled, action) => (h("mg-button", { identifier: `${this.identifier}-button-${action}`, label: this.messages.pagination[`${action}Page`],
       // eslint-disable-next-line react/jsx-no-bind
-      onClick: () => this.handleGoToPage(action, disabled), disabled: disabled, variant: "flat" }, action === NavigationAction.PREVIOUS && h("mg-icon", { icon: "chevron-left" }), this.messages.general[action], action === NavigationAction.NEXT && h("mg-icon", { icon: "chevron-right" })));
+      onClick: () => this.handleGoToPage(action, disabled), disabled: disabled, variant: "flat", isIcon: this.hideNavigationLabels }, action === NavigationAction.PREVIOUS && h("mg-icon", { icon: "chevron-left" }), !this.hideNavigationLabels && this.messages.general[action], action === NavigationAction.NEXT && h("mg-icon", { icon: "chevron-right" })));
     return (h("nav", { "aria-label": this.label, id: this.identifier, class: "mg-pagination" }, navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS), h("mg-input-select", { identifier: `${this.identifier}-select`, items: range(1, this.totalPages).map(page => page.toString()), label: this.messages.pagination.selectPage, "label-hide": true, "on-value-change": this.handleSelect, value: this.currentPage.toString(), "placeholder-hide": true }), h("span", { class: "sr-only" }, this.messages.pagination.page, " ", this.currentPage), h("span", null, "/ ", this.totalPages, " ", this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page), navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT)));
   }
   get element() { return getElement(this); }
@@ -3774,7 +4357,7 @@ const MgPagination = class {
 };
 MgPagination.style = mgPaginationCss;
 
-const mgPanelCss = ":host{--mg-card-border:none;--mg-card-padding:0;--mg-card-border-radius:var(--mg-panel-border-radius);--mg-card-background:hsl(var(--mg-panel-background));--mg-card-box-shadow:var(--mg-panel-box-shadow)}.mg-panel__header{display:flex;flex-wrap:wrap;justify-content:space-between;padding:0 1rem 0 0.3rem;align-items:flex-start}.mg-panel__header-left,.mg-panel__header-right{display:flex;margin:0.3rem 0}.mg-panel__header-right{padding-left:0.3rem;flex:1 auto;min-height:var(--default-size);align-items:center}.mg-panel__header-left mg-input-text{flex-grow:1;margin-left:0.3rem}.mg-panel__header-left mg-button+mg-button:not([slot=append-input]){margin-left:0.3rem}.mg-panel__header-left.mg-panel__header-left--full{flex:1 1 auto}.mg-panel__collapse-button-content{--font-size:1.4rem;--mg-button-font-weight:600}.mg-panel__content{padding:var(--mg-panel-content-padding)}.mg-panel ::slotted([slot=header-right]){display:flex;flex-wrap:wrap;gap:1rem;margin-left:auto}";
+const mgPanelCss = ":host{--mg-card-border:none;--mg-card-padding:0;--mg-card-border-radius:var(--mg-panel-border-radius);--mg-card-background:hsl(var(--mg-panel-background));--mg-card-box-shadow:var(--mg-panel-box-shadow)}.mg-panel__header{display:flex;flex-wrap:wrap;justify-content:space-between;padding:0 1rem 0 0.3rem;align-items:flex-start}.mg-panel__header-left,.mg-panel__header-right{display:flex;margin:0.3rem 0}.mg-panel__header-right{padding-left:0.3rem;flex:1 auto;min-height:var(--default-size);align-items:center}.mg-panel__header-left mg-input-text{flex-grow:1;margin-left:0.3rem}.mg-panel__header-left mg-button+mg-button:not([slot=append-input]){margin-left:0.3rem}.mg-panel__header-left.mg-panel__header-left--full{flex:1 1 auto}.mg-panel__collapse-button-content{--font-size:1.4rem;--mg-button-font-weight:600}.mg-panel__content{padding:var(--mg-panel-content-padding)}.mg-panel ::slotted([slot=header-right]){display:flex;flex-wrap:wrap;gap:1rem;margin-left:auto}.mg-panel ::slotted(*){--mg-card-border:var(--mg-card-border-default);--mg-card-padding:var(--mg-card-padding-default);--mg-card-border-radius:var(--mg-card-border-radius-default);--mg-card-background:var(--mg-card-background-default);--mg-card-box-shadow:var(--mg-card-box-shadow-default)}";
 
 const MgPanel = class {
   constructor(hostRef) {
@@ -3854,13 +4437,13 @@ const MgPanel = class {
       if (this.titleEditable && !this.isEditing) {
         return [
           collapseButton(),
-          h("mg-button", { "is-icon": true, variant: "flat", label: this.messages.panel.editLabel, onClick: this.handleEditButton, identifier: `${this.identifier}-edit-button` }, h("mg-icon", { icon: "pen" })),
+          h("mg-button", { key: "edit-button", "is-icon": true, variant: "flat", label: this.messages.panel.editLabel, onClick: this.handleEditButton, identifier: `${this.identifier}-edit-button` }, h("mg-icon", { icon: "pen" })),
         ];
       }
       if (this.titleEditable && this.isEditing) {
         return [
           collapseButton(),
-          h("mg-input-text", { label: this.messages.panel.editLabel, "label-hide": true, value: this.panelTitle, "onValue-change": this.handleUpdateTitle, displayCharacterLeft: false, pattern: this.titlePattern, "pattern-error-message": this.titlePatternErrorMessage, identifier: `${this.identifier}-edition-input`, ref: el => (this.editInputElement = el) }, h("mg-button", { slot: "append-input", label: this.messages.general.cancel, "is-icon": true, variant: "secondary", onClick: this.handleCancelEditButton, identifier: `${this.identifier}-edition-button-cancel` }, h("mg-icon", { icon: "cross" })), h("mg-button", { slot: "append-input", label: this.messages.general.confirm, "is-icon": true, variant: "secondary", onClick: this.handleValidateEditButton, identifier: `${this.identifier}-edition-button-validate` }, h("mg-icon", { icon: "check" }))),
+          h("mg-input-text", { key: "edition-input", label: this.messages.panel.editLabel, "label-hide": true, value: this.panelTitle, "onValue-change": this.handleUpdateTitle, displayCharacterLeft: false, pattern: this.titlePattern, "pattern-error-message": this.titlePatternErrorMessage, identifier: `${this.identifier}-edition-input`, ref: el => (this.editInputElement = el) }, h("mg-button", { slot: "append-input", label: this.messages.general.cancel, "is-icon": true, variant: "secondary", onClick: this.handleCancelEditButton, identifier: `${this.identifier}-edition-button-cancel` }, h("mg-icon", { icon: "cross" })), h("mg-button", { slot: "append-input", label: this.messages.general.confirm, "is-icon": true, variant: "secondary", onClick: this.handleValidateEditButton, identifier: `${this.identifier}-edition-button-validate` }, h("mg-icon", { icon: "check" }))),
         ];
       }
       return collapseButton();
@@ -5734,13 +6317,15 @@ var createPopper = /*#__PURE__*/popperGenerator({
   defaultModifiers: defaultModifiers
 }); // eslint-disable-next-line import/no-unused-modules
 
-const mgPopoverCss = ":host{--mg-card-padding:1.5rem;--mg-card-border:none;--mg-card-border-radius:0.5rem;--mg-card-background:hsl(var(--mg-popover-background-color));position:relative;display:contents}:host::slotted(*){display:inline-block}.mg-popover{display:none;z-index:2000;color:hsl(var(--mg-popover-font-color))}.mg-popover mg-card{z-index:-1}.mg-popover[data-show]{display:block}.mg-popover mg-button{float:right;margin-right:calc(0rem - (var(--default-size) - var(--mg-icon-regular-size)) / 2);margin-top:calc(0rem - (var(--default-size) - var(--mg-popover-title-font-size) * var(--line-height)) / 2);margin-left:3rem}.mg-popover__arrow,.mg-popover__arrow::before{position:absolute;width:2rem;height:2rem;z-index:2000;background:hsl(var(--mg-popover-background-color))}.mg-popover__arrow{visibility:hidden}.mg-popover__arrow::before{visibility:visible;content:\"\";transform:rotate(45deg)}.mg-popover[data-popper-placement^=top]>.mg-popover__arrow{bottom:-6px}.mg-popover[data-popper-placement^=bottom]>.mg-popover__arrow{top:-6px}.mg-popover[data-popper-placement^=left]>.mg-popover__arrow{right:-6px}.mg-popover[data-popper-placement^=right]>.mg-popover__arrow{left:-6px}.mg-popover__title ::slotted([slot=title]){margin:0 0 1rem !important;font-size:var(--mg-popover-title-font-size) !important;font-weight:600}";
+const mgPopoverCss = ":host{--mg-card-padding:var(--mg-popover-padding-vertical, 1.5rem) var(--mg-popover-padding-horizontal, var(--mg-popover-padding-vertical, 1.5rem));--mg-card-border:none;--mg-card-border-radius:0.5rem;--mg-card-background:hsl(var(--mg-popover-background-color));position:relative;display:contents}:host::slotted(*){display:inline-block}.mg-popover{display:none;padding:1rem;z-index:2000;color:hsl(var(--mg-popover-font-color))}.mg-popover mg-card{position:relative}.mg-popover[data-show]{display:block}.mg-popover mg-button{float:right;margin-right:calc(0rem - (var(--default-size) - var(--mg-icon-regular-size)) / 2);margin-top:calc(0rem - (var(--default-size) - var(--mg-popover-title-font-size) * var(--line-height)) / 2);margin-left:3rem}.mg-popover__arrow{position:absolute;visibility:hidden;width:calc(3rem + 2 * var(--mg-card-border-radius) + 2rem);height:calc(3rem + 2 * var(--mg-card-border-radius) + 2rem)}.mg-popover__arrow:before{visibility:visible;content:\"\";position:absolute}.mg-popover[data-popper-placement^=top]>.mg-popover__arrow,.mg-popover[data-popper-placement^=bottom]>.mg-popover__arrow{height:1rem}.mg-popover[data-popper-placement^=top]>.mg-popover__arrow:before,.mg-popover[data-popper-placement^=bottom]>.mg-popover__arrow:before{left:calc(var(--mg-card-border-radius) + 1rem);border-right:calc(3rem / 2) solid transparent;border-left:calc(3rem / 2) solid transparent}.mg-popover[data-popper-placement^=top]>.mg-popover__arrow{bottom:0.1rem;filter:drop-shadow(0 0.5rem 0.25rem hsl(var(--color-dark), 0.15))}.mg-popover[data-popper-placement^=top]>.mg-popover__arrow:before{border-top:1rem solid hsl(var(--mg-popover-background-color))}.mg-popover[data-popper-placement^=bottom]>.mg-popover__arrow{top:0.1rem;filter:drop-shadow(0 -0.5rem 0.25rem hsl(var(--color-dark), 0.15))}.mg-popover[data-popper-placement^=bottom]>.mg-popover__arrow:before{border-bottom:1rem solid hsl(var(--mg-popover-background-color))}.mg-popover[data-popper-placement^=left]>.mg-popover__arrow,.mg-popover[data-popper-placement^=right]>.mg-popover__arrow{width:1rem}.mg-popover[data-popper-placement^=left]>.mg-popover__arrow:before,.mg-popover[data-popper-placement^=right]>.mg-popover__arrow:before{top:calc(var(--mg-card-border-radius) + 1rem);border-top:calc(3rem / 2) solid transparent;border-bottom:calc(3rem / 2) solid transparent}.mg-popover[data-popper-placement^=left]>.mg-popover__arrow{right:0.1rem;filter:drop-shadow(0.5rem 0 0.25rem hsl(var(--color-dark), 0.15))}.mg-popover[data-popper-placement^=left]>.mg-popover__arrow:before{border-left:1rem solid hsl(var(--mg-popover-background-color))}.mg-popover[data-popper-placement^=right]>.mg-popover__arrow{left:0.1rem;filter:drop-shadow(-0.5rem 0 0.25rem hsl(var(--color-dark), 0.15))}.mg-popover[data-popper-placement^=right]>.mg-popover__arrow:before{border-right:1rem solid hsl(var(--mg-popover-background-color))}.mg-popover[data-popper-placement^=left-start],.mg-popover[data-popper-placement^=left-end],.mg-popover[data-popper-placement^=right-start],.mg-popover[data-popper-placement^=right-end]{padding:0 1rem}.mg-popover[data-popper-placement^=left-start]>.mg-popover__arrow,.mg-popover[data-popper-placement^=left-end]>.mg-popover__arrow,.mg-popover[data-popper-placement^=right-start]>.mg-popover__arrow,.mg-popover[data-popper-placement^=right-end]>.mg-popover__arrow{height:calc(3rem + 2 * var(--mg-card-border-radius))}.mg-popover[data-popper-placement^=left-start]>.mg-popover__arrow:before,.mg-popover[data-popper-placement^=left-end]>.mg-popover__arrow:before,.mg-popover[data-popper-placement^=right-start]>.mg-popover__arrow:before,.mg-popover[data-popper-placement^=right-end]>.mg-popover__arrow:before{top:var(--mg-card-border-radius)}.mg-popover__title ::slotted([slot=title]){margin:0 0 1rem !important;font-size:var(--mg-popover-title-font-size) !important;font-weight:600}.mg-popover--arrow-hide.mg-popover[data-popper-placement^=top]{padding-bottom:0}.mg-popover--arrow-hide.mg-popover[data-popper-placement^=bottom]{padding-top:0}.mg-popover--arrow-hide.mg-popover[data-popper-placement$=end],.mg-popover--arrow-hide.mg-popover[data-popper-placement^=left]{padding-right:0}.mg-popover--arrow-hide.mg-popover[data-popper-placement$=start],.mg-popover--arrow-hide.mg-popover[data-popper-placement^=right]{padding-left:0}.mg-popover ::slotted(*){--mg-card-border:var(--mg-card-border-default);--mg-card-padding:var(--mg-card-padding-default);--mg-card-border-radius:var(--mg-card-border-radius-default);--mg-card-background:var(--mg-card-background-default);--mg-card-box-shadow:var(--mg-card-box-shadow-default)}";
 
 const MgPopover = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.displayChange = createEvent(this, "display-change", 7);
     this.closeButtonId = '';
+    // Classes
+    this.classArrowHide = `mg-popover--arrow-hide`;
     /**
      * Check if clicked outside of component
      *
@@ -5748,7 +6333,10 @@ const MgPopover = class {
      * @returns {void}
      */
     this.clickOutside = (event) => {
-      if (!this.disabled && event.target.closest(`mg-popover`) !== this.element) {
+      var _a;
+      if (!this.disabled &&
+        event.target.closest('mg-popover') !== this.element &&
+        !(((_a = event.target.closest(`[data-mg-popover-guard]`)) === null || _a === void 0 ? void 0 : _a.dataset.mgPopoverGuard) === this.identifier)) {
         this.display = false;
       }
     };
@@ -5759,7 +6347,7 @@ const MgPopover = class {
      */
     this.show = () => {
       // Make the popover visible
-      this.popover.setAttribute('data-show', '');
+      this.popover.dataset.show = '';
       // Enable the event listeners
       this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
       // Update its position
@@ -5767,7 +6355,9 @@ const MgPopover = class {
       // hide when click outside
       // setTimeout is used to prevent event to trigger after creation
       setTimeout(() => {
-        document.addEventListener('click', this.clickOutside, false);
+        this.windows.forEach((localWindow) => {
+          localWindow.addEventListener('click', this.clickOutside, false);
+        });
       }, 0);
     };
     /**
@@ -5781,7 +6371,9 @@ const MgPopover = class {
       // Disable the event listeners
       this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }] })));
       // Remove event listener
-      document.removeEventListener('click', this.clickOutside, false);
+      this.windows.forEach((localWindow) => {
+        localWindow.removeEventListener('click', this.clickOutside, false);
+      });
     };
     /**
      * Handle action for close button
@@ -5793,9 +6385,17 @@ const MgPopover = class {
     };
     this.identifier = createID('mg-popover');
     this.placement = 'bottom';
+    this.arrowHide = false;
     this.closeButton = false;
     this.display = false;
     this.disabled = false;
+    this.classList = new ClassList(['mg-popover']);
+  }
+  validateArrowHide(newValue) {
+    if (newValue)
+      this.classList.add(this.classArrowHide);
+    else
+      this.classList.delete(this.classArrowHide);
   }
   handleDisplay(newValue) {
     if (newValue) {
@@ -5815,8 +6415,11 @@ const MgPopover = class {
    * @returns {void} timeout
    */
   componentWillLoad() {
+    // Get windows to attach events
+    this.windows = getWindows(window);
     // Get locales
     this.messages = initLocales(this.element).messages;
+    this.validateArrowHide(this.arrowHide);
   }
   /**
    * Check if component props are well configured on init
@@ -5848,11 +6451,22 @@ const MgPopover = class {
         {
           name: 'offset',
           options: {
-            offset: [0, 10],
+            offset: [0, 0],
           },
         },
       ],
     });
+    if (this.resizeObserver === undefined) {
+      // add resize observer
+      this.resizeObserver = new ResizeObserver(entries => {
+        if (entries.some(entrie => entrie.target.getAttribute('slot') !== null)) {
+          this.popper.update();
+        }
+      });
+      Array.from(this.element.querySelectorAll('[slot]')).forEach(element => {
+        this.resizeObserver.observe(element);
+      });
+    }
     // Add events to toggle display
     interactiveElement.addEventListener('click', () => {
       if (!this.disabled)
@@ -5871,10 +6485,11 @@ const MgPopover = class {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h(Host, null, h("slot", null), h("div", { id: this.identifier, class: "mg-popover" }, h("mg-card", null, !this.disabled && this.closeButton && (h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { icon: "cross" }))), h("div", { class: "mg-popover__title" }, h("slot", { name: "title" })), h("slot", { name: "content" })), h("div", { class: "mg-popover__arrow", "data-popper-arrow": true }))));
+    return (h(Host, null, h("slot", null), h("div", { id: this.identifier, class: this.classList.join() }, h("mg-card", null, this.closeButton && (h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { icon: "cross" }))), h("div", { class: "mg-popover__title" }, h("slot", { name: "title" })), h("slot", { name: "content" })), !this.arrowHide && h("div", { class: "mg-popover__arrow", "data-popper-arrow": true }))));
   }
   get element() { return getElement(this); }
   static get watchers() { return {
+    "arrowHide": ["validateArrowHide"],
     "display": ["handleDisplay"]
   }; }
 };
@@ -5885,6 +6500,20 @@ const mgSkipLinksCss = ".mg-skip-links{position:absolute;transform:translateY(-1
 const MgSkipLinks = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.goToAnchor = createEvent(this, "go-to-anchor", 7);
+    /***********
+     * Methods *
+     **********/
+    /**
+     * Handle link click and emit go-to-anchor event
+     *
+     * @param {MouseEvent} event mouse event
+     * @returns {void}
+     */
+    this.handleLinkCLick = (event) => {
+      event.currentTarget.blur();
+      this.goToAnchor.emit(event.currentTarget.getAttribute('href'));
+    };
     this.links = undefined;
   }
   validateLinks(links) {
@@ -5912,7 +6541,7 @@ const MgSkipLinks = class {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h("nav", { class: "mg-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, h("ul", { class: "mg-skip-links__list" }, this.links.map(link => (h("li", null, h("a", { class: "mg-skip-links__link", href: link.href }, link.label)))))));
+    return (h("nav", { class: "mg-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, h("ul", { class: "mg-skip-links__list", role: "list" }, this.links.map(link => (h("li", { key: link.href }, h("a", { class: "mg-skip-links__link", href: link.href, onClick: this.handleLinkCLick }, link.label)))))));
   }
   get element() { return getElement(this); }
   static get watchers() { return {
@@ -5936,7 +6565,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}.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:1.3rem}.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:1.5rem}.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:1rem;background-color:unset;border:none;font-family:var(--font-family);color:hsl(var(--mg-tabs-color-hsl, var(--color-dark)));line-height:var(--line-height);text-decoration:none;cursor:pointer}.mg-tabs__navigation-button:disabled,.mg-tabs__navigation-button--disabled{cursor:default;opacity:30%}.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:not(.mg-tabs__navigation-button--disabled){background-color:hsla(var(--mg-tabs-focused-background-color-hsl), 10%)}.mg-tabs__navigation-button.mg-tabs__navigation-button--active{color:hsl(var(--mg-tabs-color-active-hsl));font-weight:700}.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;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}";
 
 /**
  * type TabItem validation function
@@ -5955,25 +6584,7 @@ const MgTabs = class {
     // classes
     this.tabPanel = 'panel';
     this.buttonTabBaseClass = 'mg-tabs__navigation-button';
-    // variables
     this.startIndex = 1;
-    /**
-     * Method to set active tab
-     *
-     * @param {number} tabKey item tab key to set to ACTIVE status
-     * @returns {void}
-     */
-    this.setActiveTab = (tabKey) => {
-      // reset active tabs
-      this.tabs.forEach(tab => {
-        if (this.tabHasGivenStatus(tab, Status.ACTIVE))
-          tab.status = Status.VISIBLE;
-      });
-      // set active tab from given tab key
-      this.tabs[tabKey - this.startIndex].status = Status.ACTIVE;
-      // emit change active tab key event
-      this.activeTabChange.emit(tabKey);
-    };
     /**
      * Method to know if given tab has the given status
      *
@@ -5981,7 +6592,7 @@ const MgTabs = class {
      * @param {Status} status status to valide
      * @returns {boolean} status comparaison
      */
-    this.tabHasGivenStatus = (tab, status) => tab.status === status;
+    this.tabHasStatus = (tab, status) => tab.status === status;
     /**
      * Method to get element id from index
      *
@@ -5989,31 +6600,43 @@ const MgTabs = class {
      * @param {number} index to generate id
      * @returns {string} generated element id
      */
-    this.getElementId = (element, index) => `${element}-${this.getTabIndex(index)}`;
+    this.getElementId = (element, index) => `${element}-${this.getTabItemIndex(index)}`;
     /**
-     * Method to get tab index
+     * Method to get tab item index
      *
      * @param {number} index to get
      * @returns {number} index
      */
-    this.getTabIndex = (index) => index + this.startIndex;
+    this.getTabItemIndex = (index) => index + this.startIndex;
+    /**
+     * Method to get the active-tab value
+     *
+     * @returns {number} of the active-tab
+     */
+    this.getActiveTab = () => this.activeTab || this.getTabItemIndex(this.tabs.map((tab, index) => (Object.assign(Object.assign({}, tab), { index }))).find(tab => this.tabHasStatus(tab, Status.ACTIVE)).index);
     /**
      * Handle click events on tabs
      *
      * @param {MouseEvent} event mouse event
      */
     this.handleClick = (event) => {
-      const tabId = event.currentTarget.getAttribute('data-index');
-      this.activeTab = Number(tabId);
+      const tabId = event.currentTarget.dataset.index;
+      const tab = this.tabs[Number(tabId) - this.startIndex];
+      if (this.tabHasStatus(tab, Status.HIDDEN) || this.tabHasStatus(tab, Status.DISABLED)) {
+        event.preventDefault();
+      }
+      else {
+        this.activeTab = Number(tabId);
+        this.tabFocus = undefined;
+      }
     };
     /**
      * get navigation button class from given status
      *
      * @param {Status} status button tab status
-     * @param {boolean} isSelector set if we need a CSS selector with the dot '.' at the begin. default value = false.
      * @returns {string} button class/selector variant
      */
-    this.getNavigationButtonClass = (status, isSelector = false) => `${isSelector ? '.' : ''}${this.buttonTabBaseClass}--${status}`;
+    this.getNavigationButtonClass = (status) => `${this.buttonTabBaseClass}--${status}`;
     /**
      * Handle keyboard event on tabs
      *
@@ -6021,37 +6644,66 @@ const MgTabs = class {
      * @returns {void}
      */
     this.handleKeydown = (event) => {
-      let tabId = Number(event.target.getAttribute('data-index'));
       const parent = event.target.parentElement;
-      // change selected id from key code
-      if (event.key === 'ArrowRight') {
-        tabId++;
-      }
-      else if (event.key === 'ArrowLeft') {
-        tabId--;
+      if (['ArrowRight', 'ArrowLeft'].includes(event.key)) {
+        this.tabFocus = Number(event.target.dataset.index);
+        parent.querySelector(`[data-index="${this.tabFocus}"]`).setAttribute('tabindex', '-1');
+        // Move right
+        if (event.key === 'ArrowRight') {
+          this.tabFocus++;
+          // If we're at the end, go to the start
+          if (this.tabFocus > this.tabs.length)
+            this.tabFocus = this.startIndex;
+          // Move left
+        }
+        else if (event.key === 'ArrowLeft') {
+          this.tabFocus--;
+          // If we're at the start, move to the end
+          if (this.tabFocus < this.startIndex)
+            this.tabFocus = this.tabs.length;
+        }
+        const parentButtonElement = parent.querySelector(`[data-index="${this.tabFocus}"]`);
+        // if focus item is ['hidden'] we recursively repeat action
+        if (this.tabHasStatus(this.tabs[this.tabFocus - 1], Status.HIDDEN)) {
+          parentButtonElement.dispatchEvent(new KeyboardEvent('keydown', { key: event.key, bubbles: true }));
+          // else run focus methods on tabFocus element
+        }
+        else {
+          parentButtonElement.setAttribute('tabindex', '0');
+          parentButtonElement.focus();
+        }
       }
-      // get selected tab if NOT hidden, disabled
-      const selectedTab = parent.querySelector(`[data-index="${tabId}"]:not(${[this.getNavigationButtonClass(Status.HIDDEN, true), this.getNavigationButtonClass(Status.DISABLED, true)].join()})`);
-      // apply selected tab if exist
-      if (selectedTab !== null) {
-        selectedTab.focus();
-        this.activeTab = tabId;
+      else if (event.key === 'Tab') {
+        this.resetFocus();
       }
     };
+    /**
+     * Method to reset focus behavior
+     *
+     * @returns {void}
+     */
+    this.resetFocus = () => {
+      // update asynchronously tabindex to prevent get focus on new tabindex at then end of event process
+      setTimeout(() => {
+        this.tabFocus = undefined;
+        Array.from(this.element.shadowRoot.querySelectorAll('[data-index]')).forEach((tab, index) => {
+          tab.setAttribute('tabindex', this.getActiveTab() - this.startIndex !== index ? '-1' : '0');
+        });
+      }, 0);
+    };
     /**
      * Validate slots setting
      */
     this.validateSlots = () => {
       const slots = Array.from(this.element.children).filter(slot => { var _a; return (_a = slot.getAttribute('slot')) === null || _a === void 0 ? void 0 : _a.includes('tab_content-'); });
-      if (slots.length !== this.tabs.length) {
+      if (slots.length !== this.tabs.length)
         throw new Error('<mg-tabs> Must have slots counts equal to tabs count.');
-      }
     };
     this.identifier = createID('mg-tabs');
     this.label = undefined;
     this.size = 'regular';
     this.items = undefined;
-    this.activeTab = 1;
+    this.activeTab = undefined;
     this.tabs = [];
     this.classList = new ClassList(['mg-tabs']);
   }
@@ -6062,29 +6714,44 @@ const MgTabs = class {
   }
   validateSize(newValue) {
     if (!sizes.includes(newValue)) {
-      throw new Error(`<mg-tabs> prop "size" must be one of : ${sizes.join(', ')}`);
+      throw new Error(`<mg-tabs> prop "size" must be one of: ${sizes.join(', ')}`);
     }
     this.classList.add(`mg-tabs--size-${this.size}`);
   }
   validateItems(newValue) {
     // String array
     if (allItemsAreString(newValue)) {
-      this.tabs = newValue.map(item => ({ label: item, status: Status.VISIBLE }));
+      this.tabs = newValue.map((item, index) => ({ label: item, status: index === 0 ? Status.ACTIVE : Status.VISIBLE }));
     }
     // Object array
-    else if (newValue && newValue.every(item => isTabItem(item))) {
+    else if (newValue && newValue.length > 0 && newValue.every(item => isTabItem(item))) {
       this.tabs = newValue;
+      // init active tabs if not set. Default: index 0.
+      if (this.tabs.find(tab => this.tabHasStatus(tab, Status.ACTIVE)) === undefined)
+        this.tabs[0].status = Status.ACTIVE;
     }
     else {
       throw new Error('<mg-tabs> prop "items" is required and all items must be the same type: TabItem.');
     }
   }
   validateActiveTab(newValue) {
-    if (newValue < 1 || newValue > this.tabs.length) {
-      throw new Error('<mg-tabs> prop "activeTab" must be between 1 and tabs length.');
+    if (typeof newValue === 'number' && newValue >= 1 && newValue <= this.tabs.length) {
+      this.tabs.forEach((tab, index) => {
+        const isNewActiveTab = index === newValue - this.startIndex;
+        // reset active tabs
+        if (this.tabHasStatus(tab, Status.ACTIVE) && !isNewActiveTab)
+          tab.status = Status.VISIBLE;
+        // set active tab from given tab key
+        else if ((tab.status === undefined || this.tabHasStatus(tab, Status.VISIBLE)) && isNewActiveTab)
+          tab.status = Status.ACTIVE;
+      });
+      // emit change active tab key event
+      if (this.tabs.find(tab => this.tabHasStatus(tab, Status.ACTIVE)) !== undefined) {
+        this.activeTabChange.emit(newValue);
+      }
     }
-    else {
-      this.setActiveTab(newValue);
+    else if (newValue !== undefined) {
+      throw new Error('<mg-tabs> prop "activeTab" must be between 1 and tabs length.');
     }
   }
   /*************
@@ -6103,19 +6770,30 @@ const MgTabs = class {
     this.validateSize(this.size);
     this.validateSlots();
   }
+  /**
+   * add listners
+   *
+   * @returns {void}
+   */
+  componentDidLoad() {
+    document.addEventListener('click', (event) => {
+      if (event.target.closest('mg-tabs') !== this.element)
+        this.resetFocus();
+    }, false);
+  }
   /**
    * Render
    *
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h("div", { class: this.classList.join() }, h("header", { role: "tablist", "aria-label": this.label, class: "mg-tabs__header" }, this.tabs.map((tab, index) => (h("button", { role: "tab", id: this.getElementId(this.identifier, index), class: {
+    return (h("div", { class: this.classList.join() }, h("header", { role: "tablist", "aria-label": this.label, class: "mg-tabs__header" }, this.tabs.map((tab, index) => (h("button", { key: tab.label, role: "tab", id: this.getElementId(this.identifier, index), class: {
         [`${this.buttonTabBaseClass}`]: true,
         [`${this.buttonTabBaseClass}--horizontal`]: true,
-        [`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasGivenStatus(tab, Status.ACTIVE),
-        [`${this.getNavigationButtonClass(Status.DISABLED)}`]: this.tabHasGivenStatus(tab, Status.DISABLED),
-        [`${this.getNavigationButtonClass(Status.HIDDEN)}`]: this.tabHasGivenStatus(tab, Status.HIDDEN),
-      }, tabindex: this.tabHasGivenStatus(tab, Status.ACTIVE) ? 0 : -1, "aria-selected": this.tabHasGivenStatus(tab, Status.ACTIVE).toString(), "aria-controls": this.getElementId(this.tabPanel, index), onClick: this.handleClick, onKeyDown: this.handleKeydown, "data-index": this.getTabIndex(index), disabled: this.tabHasGivenStatus(tab, Status.DISABLED) }, tab.icon !== undefined && h("mg-icon", { icon: tab.icon }), tab.label, tab.badge !== undefined && h("mg-badge", { variant: tab.status !== Status.ACTIVE ? 'primary' : 'info', value: tab.badge.value, label: tab.badge.label }))))), this.tabs.map((tab, index) => (h("article", { role: "tabpanel", id: this.getElementId(this.tabPanel, index), hidden: !this.tabHasGivenStatus(tab, Status.ACTIVE), "aria-labelledby": this.getElementId(this.identifier, index), tabindex: this.tabHasGivenStatus(tab, Status.ACTIVE) ? 0 : -1, class: "mg-tabs__content-container" }, h("slot", { name: this.getElementId('tab_content', index) }))))));
+        [`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasStatus(tab, Status.ACTIVE),
+        [`${this.getNavigationButtonClass(Status.DISABLED)}`]: this.tabHasStatus(tab, Status.DISABLED),
+        [`${this.getNavigationButtonClass(Status.HIDDEN)}`]: this.tabHasStatus(tab, Status.HIDDEN),
+      }, tabindex: this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1, "aria-selected": this.tabHasStatus(tab, Status.ACTIVE).toString(), "aria-controls": this.getElementId(this.tabPanel, index), "aria-disabled": this.tabHasStatus(tab, Status.DISABLED), onClick: this.handleClick, onKeyDown: this.handleKeydown, "data-index": this.getTabItemIndex(index) }, tab.icon !== undefined && h("mg-icon", { icon: tab.icon }), tab.label, tab.badge !== undefined && h("mg-badge", { variant: "text-color", value: tab.badge.value, label: tab.badge.label, outline: tab.badge.role === 'information' }))))), this.tabs.map((tab, index) => (h("article", { key: tab.label, role: "tabpanel", id: this.getElementId(this.tabPanel, index), hidden: !this.tabHasStatus(tab, Status.ACTIVE), "aria-labelledby": this.getElementId(this.identifier, index), tabindex: this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1, class: "mg-tabs__content-container" }, h("slot", { name: this.getElementId('tab_content', index) }))))));
   }
   get element() { return getElement(this); }
   static get watchers() { return {
@@ -6132,7 +6810,7 @@ MgTabs.style = mgTabsCss;
  */
 const variants = ['primary', 'secondary', 'success', 'warning', 'danger', 'info'];
 
-const mgTagCss = ".mg-tag{padding:calc((var(--mg-tag-height) - 0.2rem - var(--mg-tag-font-size) * var(--line-height)) / 2) 0.6rem;min-height:var(--mg-tag-height);box-sizing:border-box;border-radius:var(--mg-tag-border-radius);border:0.1rem solid;font-size:var(--mg-tag-font-size);font-weight:600;text-align:center}.mg-tag.mg-tag--primary{background-color:hsl(var(--color-dark));border-color:hsl(var(--color-dark));color:hsl(var(--color-light))}.mg-tag.mg-tag--primary.mg-tag--outline{background-color:transparent;color:hsl(var(--color-dark))}.mg-tag.mg-tag--primary.mg-tag--soft{font-weight:200;background-color:hsl(var(--color-dark-h), var(--color-dark-s), 90%);border-color:hsl(var(--color-dark-h), var(--color-dark-s), 90%);color:hsl(var(--color-dark))}.mg-tag.mg-tag--primary.mg-tag--soft ::slotted(mg-icon){color:hsl(var(--color-dark))}.mg-tag.mg-tag--secondary{background-color:hsl(var(--color-light));border-color:hsl(var(--color-light));color:hsl(var(--color-dark))}.mg-tag.mg-tag--secondary.mg-tag--outline{background-color:transparent;color:hsl(var(--color-light))}.mg-tag.mg-tag--secondary.mg-tag--soft{font-weight:200;background-color:hsl(var(--color-light-h), var(--color-light-s), 90%);border-color:hsl(var(--color-light-h), var(--color-light-s), 90%);color:hsl(var(--color-dark))}.mg-tag.mg-tag--secondary.mg-tag--soft ::slotted(mg-icon){color:hsl(var(--color-dark))}.mg-tag.mg-tag--success{background-color:hsl(var(--color-success));border-color:hsl(var(--color-success));color:hsl(var(--color-dark))}.mg-tag.mg-tag--success.mg-tag--outline{background-color:transparent;color:hsl(var(--color-success))}.mg-tag.mg-tag--success.mg-tag--soft{font-weight:200;background-color:hsl(var(--color-success-h), var(--color-success-s), 90%);border-color:hsl(var(--color-success-h), var(--color-success-s), 90%);color:hsl(var(--color-dark))}.mg-tag.mg-tag--success.mg-tag--soft ::slotted(mg-icon){color:hsl(var(--color-success))}.mg-tag.mg-tag--warning{background-color:hsl(var(--color-warning));border-color:hsl(var(--color-warning));color:hsl(var(--color-dark))}.mg-tag.mg-tag--warning.mg-tag--outline{background-color:transparent;color:hsl(var(--color-warning))}.mg-tag.mg-tag--warning.mg-tag--soft{font-weight:200;background-color:hsl(var(--color-warning-h), var(--color-warning-s), 90%);border-color:hsl(var(--color-warning-h), var(--color-warning-s), 90%);color:hsl(var(--color-dark))}.mg-tag.mg-tag--warning.mg-tag--soft ::slotted(mg-icon){color:hsl(var(--color-warning))}.mg-tag.mg-tag--danger{background-color:hsl(var(--color-danger));border-color:hsl(var(--color-danger));color:hsl(var(--color-light))}.mg-tag.mg-tag--danger.mg-tag--outline{background-color:transparent;color:hsl(var(--color-danger))}.mg-tag.mg-tag--danger.mg-tag--soft{font-weight:200;background-color:hsl(var(--color-danger-h), var(--color-danger-s), 90%);border-color:hsl(var(--color-danger-h), var(--color-danger-s), 90%);color:hsl(var(--color-dark))}.mg-tag.mg-tag--danger.mg-tag--soft ::slotted(mg-icon){color:hsl(var(--color-danger))}.mg-tag.mg-tag--info{background-color:hsl(var(--color-info));border-color:hsl(var(--color-info));color:hsl(var(--color-light))}.mg-tag.mg-tag--info.mg-tag--outline{background-color:transparent;color:hsl(var(--color-info))}.mg-tag.mg-tag--info.mg-tag--soft{font-weight:200;background-color:hsl(var(--color-info-h), var(--color-info-s), 90%);border-color:hsl(var(--color-info-h), var(--color-info-s), 90%);color:hsl(var(--color-dark))}.mg-tag.mg-tag--info.mg-tag--soft ::slotted(mg-icon){color:hsl(var(--color-info))}.mg-tag,mg-tag{display:inline-block;vertical-align:middle}::slotted(mg-icon){margin-right:0.4rem}";
+const mgTagCss = ".mg-tag{padding:calc((var(--mg-tag-height) - 0.2rem - var(--mg-tag-font-size) * var(--line-height)) / 2) 0.6rem;min-height:var(--mg-tag-height);box-sizing:border-box;border-radius:var(--mg-tag-border-radius);border:0.1rem solid;font-size:var(--mg-tag-font-size);font-weight:600;text-align:center}.mg-tag.mg-tag--primary{background-color:hsl(var(--color-dark));border-color:hsl(var(--color-dark));color:hsl(var(--color-light))}.mg-tag.mg-tag--primary.mg-tag--outline{background-color:transparent;color:hsl(var(--color-dark))}.mg-tag.mg-tag--primary.mg-tag--soft{font-weight:400;background-color:hsl(var(--color-dark-h), var(--color-dark-s), 90%);border-color:hsl(var(--color-dark-h), var(--color-dark-s), 90%);color:hsl(var(--color-dark))}.mg-tag.mg-tag--primary.mg-tag--soft ::slotted(mg-icon){color:hsl(var(--color-dark))}.mg-tag.mg-tag--secondary{background-color:hsl(var(--color-light));border-color:hsl(var(--color-light));color:hsl(var(--color-dark))}.mg-tag.mg-tag--secondary.mg-tag--outline{background-color:transparent;color:hsl(var(--color-light))}.mg-tag.mg-tag--secondary.mg-tag--soft{font-weight:400;background-color:hsl(var(--color-light-h), var(--color-light-s), 90%);border-color:hsl(var(--color-light-h), var(--color-light-s), 90%);color:hsl(var(--color-dark))}.mg-tag.mg-tag--secondary.mg-tag--soft ::slotted(mg-icon){color:hsl(var(--color-dark))}.mg-tag.mg-tag--success{background-color:hsl(var(--color-success));border-color:hsl(var(--color-success));color:hsl(var(--color-dark))}.mg-tag.mg-tag--success.mg-tag--outline{background-color:transparent;color:hsl(var(--color-success))}.mg-tag.mg-tag--success.mg-tag--soft{font-weight:400;background-color:hsl(var(--color-success-h), var(--color-success-s), 90%);border-color:hsl(var(--color-success-h), var(--color-success-s), 90%);color:hsl(var(--color-dark))}.mg-tag.mg-tag--success.mg-tag--soft ::slotted(mg-icon){color:hsl(var(--color-success))}.mg-tag.mg-tag--warning{background-color:hsl(var(--color-warning));border-color:hsl(var(--color-warning));color:hsl(var(--color-dark))}.mg-tag.mg-tag--warning.mg-tag--outline{background-color:transparent;color:hsl(var(--color-warning))}.mg-tag.mg-tag--warning.mg-tag--soft{font-weight:400;background-color:hsl(var(--color-warning-h), var(--color-warning-s), 90%);border-color:hsl(var(--color-warning-h), var(--color-warning-s), 90%);color:hsl(var(--color-dark))}.mg-tag.mg-tag--warning.mg-tag--soft ::slotted(mg-icon){color:hsl(var(--color-warning))}.mg-tag.mg-tag--danger{background-color:hsl(var(--color-danger));border-color:hsl(var(--color-danger));color:hsl(var(--color-light))}.mg-tag.mg-tag--danger.mg-tag--outline{background-color:transparent;color:hsl(var(--color-danger))}.mg-tag.mg-tag--danger.mg-tag--soft{font-weight:400;background-color:hsl(var(--color-danger-h), var(--color-danger-s), 90%);border-color:hsl(var(--color-danger-h), var(--color-danger-s), 90%);color:hsl(var(--color-dark))}.mg-tag.mg-tag--danger.mg-tag--soft ::slotted(mg-icon){color:hsl(var(--color-danger))}.mg-tag.mg-tag--info{background-color:hsl(var(--color-info));border-color:hsl(var(--color-info));color:hsl(var(--color-light))}.mg-tag.mg-tag--info.mg-tag--outline{background-color:transparent;color:hsl(var(--color-info))}.mg-tag.mg-tag--info.mg-tag--soft{font-weight:400;background-color:hsl(var(--color-info-h), var(--color-info-s), 90%);border-color:hsl(var(--color-info-h), var(--color-info-s), 90%);color:hsl(var(--color-dark))}.mg-tag.mg-tag--info.mg-tag--soft ::slotted(mg-icon){color:hsl(var(--color-info))}.mg-tag,mg-tag{display:inline-block;vertical-align:middle}::slotted(mg-icon){margin-right:0.4rem}";
 
 const MgTag = class {
   constructor(hostRef) {
@@ -6141,8 +6819,8 @@ const MgTag = class {
      * Internal *
      ************/
     // Classes
-    this.classOutline = `mg-tag--outline`;
-    this.classSoft = `mg-tag--soft`;
+    this.classOutline = 'mg-tag--outline';
+    this.classSoft = 'mg-tag--soft';
     this.variant = variants[0];
     this.outline = undefined;
     this.soft = undefined;
@@ -6150,7 +6828,7 @@ const MgTag = class {
   }
   validateVariant(newValue, oldValue) {
     if (!variants.includes(newValue)) {
-      throw new Error(`<mg-tag> prop "variant" must be one of : ${variants.join(', ')}.`);
+      throw new Error(`<mg-tag> prop "variant" must be one of: ${variants.join(', ')}.`);
     }
     else {
       if (oldValue !== undefined) {
@@ -6185,7 +6863,7 @@ const MgTag = class {
    * @returns {void}
    */
   validateTextContent(textContent) {
-    if (!textContent || textContent.trim() === '')
+    if (typeof textContent !== 'string' || textContent.trim() === '')
       throw new Error('<mg-tag> slot must contain a text content.');
   }
   /*************
@@ -6226,7 +6904,7 @@ var Guard;
   Guard["HOVER_TOOLTIPED_ELEMENT"] = "hoverTooltipedGuard";
 })(Guard || (Guard = {}));
 
-const mgTooltipCss = ":host{display:inline-block}.mg-tooltip{display:none;padding:0.5rem 0.8rem;z-index:1000;border-radius:var(--mg-tooltip-border-radius);background-color:hsl(var(--mg-tooltip-background-color));color:hsl(var(--mg-tooltip-font-color));text-align:start}.mg-tooltip[data-show]{display:block}.mg-tooltip .mg-tooltip__arrow,.mg-tooltip .mg-tooltip__arrow::before{position:absolute;width:0.8rem;height:0.8rem;z-index:9999;background:inherit}.mg-tooltip .mg-tooltip__arrow{visibility:hidden}.mg-tooltip .mg-tooltip__arrow::before{visibility:visible;content:\"\";transform:rotate(45deg)}.mg-tooltip[data-popper-placement^=top]>.mg-tooltip__arrow{bottom:-4px}.mg-tooltip[data-popper-placement^=bottom]>.mg-tooltip__arrow{top:-4px}.mg-tooltip[data-popper-placement^=left]>.mg-tooltip__arrow{right:-4px}.mg-tooltip[data-popper-placement^=right]>.mg-tooltip__arrow{left:-4px}";
+const mgTooltipCss = ":host{display:inline-block}.mg-tooltip{display:none;padding:0.5rem 0.8rem;z-index:1000;border-radius:var(--mg-tooltip-border-radius);background-color:hsl(var(--mg-tooltip-background-color));color:hsl(var(--mg-tooltip-font-color));text-align:start;max-width:40rem;box-sizing:border-box}.mg-tooltip[data-show]{display:block}.mg-tooltip .mg-tooltip__arrow,.mg-tooltip .mg-tooltip__arrow::before{position:absolute;width:0.8rem;height:0.8rem;z-index:9999;background:inherit}.mg-tooltip .mg-tooltip__arrow{visibility:hidden}.mg-tooltip .mg-tooltip__arrow::before{visibility:visible;content:\"\";transform:rotate(45deg)}.mg-tooltip[data-popper-placement^=top]>.mg-tooltip__arrow{bottom:-4px}.mg-tooltip[data-popper-placement^=bottom]>.mg-tooltip__arrow{top:-4px}.mg-tooltip[data-popper-placement^=left]>.mg-tooltip__arrow{right:-4px}.mg-tooltip[data-popper-placement^=right]>.mg-tooltip__arrow{left:-4px}";
 
 const MgTooltip = class {
   constructor(hostRef) {
@@ -6238,7 +6916,7 @@ const MgTooltip = class {
      */
     this.show = () => {
       // Make the tooltip visible
-      this.tooltip.setAttribute('data-show', '');
+      this.tooltip.dataset.show = '';
       // Enable the event listeners
       this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
       // Update its position
@@ -6284,7 +6962,7 @@ const MgTooltip = class {
             this.resetGuard();
           }, 100);
         }
-        else if (isMouseenter && elementGuard === Guard.HOVER_TOOLTIPED_ELEMENT) {
+        else if (this.guard === Guard.HOVER_TOOLTIPED_ELEMENT) {
           this.setDisplay(isMouseenter);
         }
       }
@@ -6353,24 +7031,22 @@ const MgTooltip = class {
         this.guard = Guard.FOCUS;
         this.setDisplay(true);
       });
-      ['blur', 'keydown'].forEach(event => {
-        this.tooltipedElement.addEventListener(event, (e) => {
-          // we continue to process ONLY for KeyboardEvents 'Escape'
-          if (e.type === 'keydown' && e.code !== 'Escape') {
-            return;
-          }
-          this.resetGuard();
+      this.tooltipedElement.addEventListener('blur', () => {
+        this.resetGuard();
+        this.setDisplay(false);
+      });
+      document.addEventListener('keydown', (event) => {
+        if (event.code === 'Escape')
           this.setDisplay(false);
-        });
       });
       // manage tooltipElement & tooltipedElement mouseenter/mouseleave events
-      ['mouseenter', 'mouseleave'].forEach(event => {
-        const isMouseenter = event === 'mouseenter';
+      ['mouseenter', 'mouseleave'].forEach(eventType => {
+        const isMouseenter = eventType === 'mouseenter';
         [
           { element: this.tooltip, action: () => this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIP_ELEMENT, isMouseenter, Guard.HOVER_TOOLTIPED_ELEMENT) },
           { element: this.tooltipedElement, action: () => this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIPED_ELEMENT, isMouseenter, Guard.HOVER_TOOLTIP_ELEMENT) },
         ].forEach(({ element, action }) => {
-          element.addEventListener(event, () => {
+          element.addEventListener(eventType, () => {
             action();
           });
         });
@@ -6412,8 +7088,7 @@ const MgTooltip = class {
     // get slotted element
     const slotElement = this.element.firstElementChild;
     // Get interactive element
-    const interactiveElements = ['a', 'button', 'input', 'textarea', 'select']; //! Might needs updates
-    const interactiveElement = this.element.shadowRoot.querySelector(interactiveElements.join(',')) || ((_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(interactiveElements.join(',')));
+    const interactiveElement = slotElement.matches(focusableElements) ? slotElement : (_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(focusableElements);
     // define selected element to become tooltip selector
     this.tooltipedElement = interactiveElement || slotElement;
     // Check if slotted element is a disabled mg-button
@@ -6438,7 +7113,7 @@ const MgTooltip = class {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h(Host, null, h("slot", null), h("div", { role: "tooltip", id: this.identifier, class: "mg-tooltip", innerHTML: this.message }, h("div", { class: "mg-tooltip__arrow", "data-popper-arrow": true }))));
+    return (h(Host, null, h("slot", null), h("div", { role: "tooltip", id: this.identifier, class: "mg-tooltip" }, h("span", { innerHTML: this.message }), h("div", { class: "mg-tooltip__arrow", "data-popper-arrow": true }))));
   }
   get element() { return getElement(this); }
   static get watchers() { return {
@@ -6448,4 +7123,4 @@ const MgTooltip = class {
 };
 MgTooltip.style = mgTooltipCss;
 
-export { MgBadge as mg_badge, MgButton as mg_button, MgCard as mg_card, MgCharacterLeft as mg_character_left, MgDetails as mg_details, MgDivider as mg_divider, MgForm as mg_form, MgIcon as mg_icon, MgIllustratedMessage as mg_illustrated_message, MgInputCheckbox as mg_input_checkbox, MgInputDate as mg_input_date, MgInputNumeric as mg_input_numeric, MgInputPassword as mg_input_password, MgInputRadio as mg_input_radio, MgInputSelect as mg_input_select, MgInputText as mg_input_text, MgInputTextarea as mg_input_textarea, MgInputTitle as mg_input_title, MgInputToggle as mg_input_toggle, MgMenu as mg_menu, MgMenuItem as mg_menu_item, MgMessage as mg_message, MgModal as mg_modal, MgPagination as mg_pagination, MgPanel as mg_panel, MgPopover as mg_popover, MgSkipLinks as mg_skip_links, MgTabs as mg_tabs, MgTag as mg_tag, MgTooltip as mg_tooltip };
+export { MgActionMore as mg_action_more, MgBadge as mg_badge, MgButton as mg_button, MgCard as mg_card, MgCharacterLeft as mg_character_left, MgDetails as mg_details, MgDivider as mg_divider, MgForm as mg_form, MgIcon as mg_icon, MgIllustratedMessage as mg_illustrated_message, MgInputCheckbox as mg_input_checkbox, MgInputDate as mg_input_date, MgInputNumeric as mg_input_numeric, MgInputPassword as mg_input_password, MgInputRadio as mg_input_radio, MgInputSelect as mg_input_select, MgInputText as mg_input_text, MgInputTextarea as mg_input_textarea, MgInputTitle as mg_input_title, MgInputToggle as mg_input_toggle, MgMenu as mg_menu, MgMenuItem as mg_menu_item, MgMessage as mg_message, MgModal as mg_modal, MgPagination as mg_pagination, MgPanel as mg_panel, MgPopover as mg_popover, MgSkipLinks as mg_skip_links, MgTabs as mg_tabs, MgTag as mg_tag, MgTooltip as mg_tooltip };