npm - @mgdis/mg-components - Versions diffs - 5.8.2 → 5.10.0 - Mend

@mgdis/mg-components 5.8.2 → 5.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (149) hide show

package/dist/esm/mg-action-more_31.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-3249671d.js';
-import { i as initLocales, D as Direction, l as localeDate, d as dateRegExp, a as localeCurrency, b as localeNumber, s as sizes$2 } from './mg-menu.conf-881fbd82.js';
+import { i as initLocales, D as Direction, l as localeDate, d as dateRegExp, a as localeCurrency, b as localeNumber, s as sizes$2 } from './mg-menu.conf-2cc1bb67.js';
 /**
  * Available menu-item positions
@@ -22,7 +22,6 @@ var Status$1;
 /**
  * Create random ID
- *
  * @param {string} prefix  add prefix to created ID
  * @param {number} length ID length
  * @returns {string} ID
@@ -44,7 +43,6 @@ class ClassList {
   constructor(classlist = []) {
     /**
      * Add class
-     *
      * @param {string} className class name to add
      * @returns {void}
      */
@@ -55,7 +53,6 @@ class ClassList {
     };
     /**
      * Delete class
-     *
      * @param {string} className class name to delete
      * @returns {void}
      */
@@ -67,7 +64,6 @@ class ClassList {
     };
     /**
      * Check if class exist in list
-     *
      * @param {string} className class name to check
      * @returns {boolean} class name is in the list
      */
@@ -76,7 +72,6 @@ class ClassList {
     };
     /**
      * Join classes seperated by spaces
-     *
      * @returns {string} joined values
      */
     this.join = () => {
@@ -87,14 +82,12 @@ class ClassList {
 }
 /**
  * Check if all items are string
- *
  * @param {unknown} items items to check
  * @returns {boolean} all items are string
  */
 const allItemsAreString = (items) => Array.isArray(items) && items.every(item => typeof item === 'string');
 /**
  * Check if element is a heading
- *
  * @param {Element} element slotted element
  * @param {string[]} tagNames allowed tag names list
  * @returns {boolean} element is a heading
@@ -107,7 +100,7 @@ const isTagName = (element, tagNames) => {
  */
 const focusableElements = 'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"]), [identifier]';
 /**
- *
+ * Get windows
  * @param {Window} localWindow the window we are lookink for other windows
  * @returns {Window[]} The list of windows found
  */
@@ -118,7 +111,6 @@ const getWindows = (localWindow) => {
 };
 /**
  * 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
@@ -141,7 +133,6 @@ const getParentWindows = (localWindow, 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
@@ -159,11 +150,10 @@ const getChildWindows = (localWindow, 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)}";
+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-popover-max-width:unset}.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
  */
@@ -173,7 +163,6 @@ const isMgActionMoreItems = (prop) => {
 };
 /**
  * MgActionMore['button'] type guard
- *
  * @param {unknown} prop commponent button prop
  * @returns {boolean} return true if type is valid
  */
@@ -183,7 +172,6 @@ const isMgActionMoreButton = (prop) => {
 };
 /**
  * MgActionMore['icon'] type guard
- *
  * @param {unknown} prop commponent icon prop
  * @returns {boolean} return true if type is valid
  */
@@ -204,7 +192,6 @@ const MgActionMore = class {
      ***********/
     /**
      * Toogle expanded props
-     *
      * @returns {void}
      */
     this.toggleExpanded = () => {
@@ -212,7 +199,6 @@ const MgActionMore = class {
     };
     /**
      * Button click handler
-     *
      * @returns {void}
      */
     this.handleButton = () => {
@@ -220,7 +206,6 @@ const MgActionMore = class {
     };
     /**
      * Item click handler
-     *
      * @param {MouseEvent} event click event
      * @param {MgActionMoreItemType['mouseEventHandler']} customHandler item['mouseEventHandler']
      * @returns {void}
@@ -260,7 +245,6 @@ const MgActionMore = class {
    *************/
   /**
    * Validate props
-   *
    * @returns {void}
    */
   componentWillLoad() {
@@ -272,7 +256,6 @@ const MgActionMore = class {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {
@@ -305,7 +288,7 @@ MgActionMore.style = mgActionMoreCss;
 /**
  * List of all possibles variants
  */
-const variants$4 = ['info', 'primary', 'secondary', 'success', 'warning', 'danger', 'text-color'];
+const variants$5 = ['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}";
@@ -319,7 +302,7 @@ const MgBadge = class {
     this.classOutline = `mg-badge--outline`;
     this.value = undefined;
     this.label = undefined;
-    this.variant = variants$4[0];
+    this.variant = variants$5[0];
     this.outline = undefined;
     this.classList = new ClassList(['mg-badge']);
   }
@@ -334,8 +317,8 @@ 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(', ')}.`);
+    if (!variants$5.includes(newValue)) {
+      throw new Error(`<mg-badge> prop "variant" must be one of: ${variants$5.join(', ')}.`);
     }
     else {
       if (oldValue !== undefined) {
@@ -352,7 +335,6 @@ const MgBadge = class {
   }
   /**
    * Check if props are well configured on init
-   *
    * @returns {void}
    */
   componentWillLoad() {
@@ -363,7 +345,6 @@ const MgBadge = class {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {
@@ -381,7 +362,7 @@ MgBadge.style = mgBadgeCss;
 /**
  * List of all possibles variants
  */
-const variants$3 = ['primary', 'secondary', 'danger', 'danger-alt', 'info', 'flat', 'success', 'link'];
+const variants$4 = ['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){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}";
@@ -398,7 +379,6 @@ const MgButton = class {
     this.classFullWidth = 'mg-button--full-width';
     /**
      * Trigger actions onClick event
-     *
      * @param {MouseEvent} event click event
      * @returns {void}
      */
@@ -413,7 +393,6 @@ const MgButton = class {
     };
     /**
      * Handle onKeydown event
-     *
      * @param {KeyboardEvent} event keyboard event
      * @returns {void}
      */
@@ -428,7 +407,6 @@ const MgButton = class {
     };
     /**
      * Handle onKeyup event
-     *
      * @param {KeyboardEvent} event keyboard event
      * @returns {void}
      */
@@ -438,7 +416,7 @@ const MgButton = class {
         this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));
       }
     };
-    this.variant = variants$3[0];
+    this.variant = variants$4[0];
     this.identifier = undefined;
     this.label = undefined;
     this.type = undefined;
@@ -451,8 +429,8 @@ const MgButton = class {
     this.classList = new ClassList(['mg-button']);
   }
   validateVariant(newValue, oldValue) {
-    if (!variants$3.includes(newValue)) {
-      throw new Error(`<mg-button> prop "variant" must be one of: ${variants$3.join(', ')}`);
+    if (!variants$4.includes(newValue)) {
+      throw new Error(`<mg-button> prop "variant" must be one of: ${variants$4.join(', ')}`);
     }
     else {
       if (oldValue !== undefined) {
@@ -501,7 +479,6 @@ const MgButton = class {
   }
   /**
    * Check if props are well configured on init
-   *
    * @returns {void}
    */
   componentWillLoad() {
@@ -519,7 +496,6 @@ const MgButton = class {
   }
   /**
    * Render component
-   *
    * @returns {HTMLElement} html element
    */
   render() {
@@ -535,23 +511,81 @@ const MgButton = class {
 };
 MgButton.style = mgButtonCss;
-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)}";
+/**
+ * List available variants
+ */
+const variants$3 = ['info', 'warning', 'success', 'danger', 'app'];
+/**
+ * List available variant styles
+ */
+const variantStyles$1 = ['bar-left', 'fill'];
+const mgCardCss = ".mg-card{position:relative;width:100%;max-width:var(--mg-card-max-width);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);--mg-card-max-width:unset}.mg-card.mg-card--info{overflow:hidden}.mg-card.mg-card--info.mg-card--bar-left .mg-card__bar{background-color:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l))}.mg-card.mg-card--info.mg-card--fill{background-color:hsl(var(--color-info-h), var(--color-info-s), var(--mg-color-soft-l))}.mg-card.mg-card--warning{overflow:hidden}.mg-card.mg-card--warning.mg-card--bar-left .mg-card__bar{background-color:hsl(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l))}.mg-card.mg-card--warning.mg-card--fill{background-color:hsl(var(--color-warning-h), var(--color-warning-s), var(--mg-color-soft-l))}.mg-card.mg-card--success{overflow:hidden}.mg-card.mg-card--success.mg-card--bar-left .mg-card__bar{background-color:hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l))}.mg-card.mg-card--success.mg-card--fill{background-color:hsl(var(--color-success-h), var(--color-success-s), var(--mg-color-soft-l))}.mg-card.mg-card--danger{overflow:hidden}.mg-card.mg-card--danger.mg-card--bar-left .mg-card__bar{background-color:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l))}.mg-card.mg-card--danger.mg-card--fill{background-color:hsl(var(--color-danger-h), var(--color-danger-s), var(--mg-color-soft-l))}.mg-card.mg-card--app{overflow:hidden}.mg-card.mg-card--app.mg-card--bar-left .mg-card__bar{background-color:hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-app-l))}.mg-card.mg-card--app.mg-card--fill{background-color:hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-soft-l))}.mg-card__bar{position:absolute;top:0;left:0;width:0.3rem;height:100%}";
 const MgCard = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    /*************
+     * Private *
+     *************/
+    this.name = 'mg-card';
+    this.baseClass = this.name;
+    /**
+     * Methode to set default varianStyle props
+     * needeed has stencil doesn't know that props is mutated when updated in prop watcher
+     * @returns {void}
+     */
+    this.setDefaultVariantStyle = () => {
+      if (this.variantStyle === undefined)
+        this.variantStyle = 'bar-left';
+    };
+    this.variant = undefined;
+    this.variantStyle = undefined;
+    this.classList = new ClassList([this.baseClass]);
+  }
+  validateVariant(newValue, oldValue) {
+    if (newValue && !variants$3.includes(newValue))
+      throw new Error(`<${this.name}> prop "variant" must match VariantType type.`);
+    if (Boolean(newValue)) {
+      this.setDefaultVariantStyle();
+      this.classList.add(`${this.baseClass}--${newValue}`);
+    }
+    if (Boolean(oldValue))
+      this.classList.delete(`${this.baseClass}--${oldValue}`);
+  }
+  validateVariantStyle(newValue, oldValue) {
+    if (newValue && !variantStyles$1.includes(newValue))
+      throw new Error(`<${this.name}> prop "variantStyle" must match VariantStyleType type.`);
+    else if (Boolean(newValue) && !variants$3.includes(this.variant))
+      throw new Error(`<${this.name}> prop "variantStyle" must be paired with ${JSON.stringify(variants$3)} "variant" prop.`);
+    if (Boolean(newValue))
+      this.classList.add(`${this.baseClass}--${newValue}`);
+    if (Boolean(oldValue))
+      this.classList.delete(`${this.baseClass}--${oldValue}`);
   }
   /*************
    * Lifecycle *
    *************/
+  /**
+   * Check if props are well configured on init
+   * @returns {void}
+   */
+  componentWillLoad() {
+    this.validateVariant(this.variant);
+    this.validateVariantStyle(this.variantStyle);
+  }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h("div", { class: "mg-card" }, h("slot", null)));
+    var _a;
+    return (h("div", { class: this.classList.join() }, ((_a = this.variantStyle) === null || _a === void 0 ? void 0 : _a.startsWith('bar-')) && h("span", { class: "mg-card__bar" }), h("slot", null)));
   }
+  static get watchers() { return {
+    "variant": ["validateVariant"],
+    "variantStyle": ["validateVariantStyle"]
+  }; }
 };
 MgCard.style = mgCardCss;
@@ -574,7 +608,6 @@ const MgCharacterLeft = class {
    *************/
   /**
    * Check if props are well configured on init
-   *
    * @returns {void}
    */
   componentWillLoad() {
@@ -583,7 +616,6 @@ const MgCharacterLeft = class {
   }
   /**
    * Render component
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {
@@ -596,7 +628,7 @@ const MgCharacterLeft = class {
 };
 MgCharacterLeft.style = mgCharacterLeftCss;
-const mgDetailsCss = ".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-details summary{display:flex;align-items:baseline;cursor:pointer}.mg-details__toggle{margin-left:1.5rem;flex-shrink:0;display:flex;align-items:center;align-self:flex-start;gap:0.6rem;min-height:calc(var(--font-size) * var(--line-height))}.mg-details__toggle mg-icon{align-self:self-end}.mg-details__details{margin-top:1.5rem}";
+const mgDetailsCss = ".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-details summary{display:flex;align-items:baseline;cursor:pointer}.mg-details__toggle{margin-left:1.5rem;flex-shrink:0;display:flex;align-items:center;align-self:flex-start;gap:0.6rem;min-height:calc(var(--font-size) * var(--line-height))}.mg-details__details{margin-top:1.5rem}";
 const MgDetails = class {
   constructor(hostRef) {
@@ -604,7 +636,6 @@ const MgDetails = class {
     this.expandedChange = createEvent(this, "expanded-change", 7);
     /**
      * Handle details toggle
-     *
      * @returns {void}
      */
     this.handleToggle = () => {
@@ -628,7 +659,6 @@ const MgDetails = class {
    *************/
   /**
    * Check if component props are well configured on init
-   *
    * @returns {void}
    */
   componentWillLoad() {
@@ -637,11 +667,10 @@ const MgDetails = class {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h("details", { class: "mg-details", onToggle: this.handleToggle, open: this.expanded, ref: el => (this.details = el) }, h("summary", null, h("slot", { name: "summary" }), h("span", { class: "mg-details__toggle" }, h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down' }), h("span", { class: { 'sr-only': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { class: "mg-details__details" }, h("slot", { name: "details" }))));
+    return (h("details", { class: "mg-details", onToggle: this.handleToggle, open: this.expanded, ref: el => (this.details = el) }, h("summary", null, h("slot", { name: "summary" }), h("span", { class: "mg-details__toggle" }, h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down', size: "small" }), h("span", { class: { 'sr-only': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { class: "mg-details__details" }, h("slot", { name: "details" }))));
   }
   static get watchers() { return {
     "toggleClosed": ["validateTitles"],
@@ -660,7 +689,6 @@ const MgDivider = class {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {
@@ -684,7 +712,6 @@ const MgForm = class {
     /**
      * Define required message based on mg-inputs required elements
      * Also
-     *
      * @returns {void}
      */
     this.setRequiredMessage = () => {
@@ -710,7 +737,6 @@ const MgForm = class {
     };
     /**
      * Check if form is valid
-     *
      * @returns {void}
      */
     this.checkValidity = () => {
@@ -723,7 +749,6 @@ const MgForm = class {
     };
     /**
      * Handle Form Submit
-     *
      * @param {SubmitEvent} event submit event
      * @returns {void}
      */
@@ -733,7 +758,6 @@ const MgForm = class {
     };
     /**
      * Set mgInputs
-     *
      * @returns {void}
      */
     this.setMgInputs = () => {
@@ -765,7 +789,6 @@ const MgForm = class {
   }
   /**
    * Public method to display errors
-   *
    * @returns {Promise<void>}
    */
   async displayError() {
@@ -781,7 +804,6 @@ const MgForm = class {
    *************/
   /**
    * Check if component props are well configured on init
-   *
    * @returns {void}
    */
   componentWillLoad() {
@@ -809,7 +831,6 @@ const MgForm = class {
   }
   /**
    * Add slot listeners
-   *
    * @returns {void}
    */
   componentDidLoad() {
@@ -828,7 +849,6 @@ const MgForm = class {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {
@@ -915,7 +935,11 @@ const icons = {
   '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: "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-circle': () => (h("path", { fill: "currentColor", stroke: "currentColor", d: "M8.75 9.5h.5v-6h-2.5v6h2Zm.5 1V10h-2.5v2.5h2.5v-2ZM1.5 8a6.5 6.5 0 1 1 13 0 6.5 6.5 0 0 1-13 0Z" })),
+  'exclamation-circle-outline': () => [
+    h("path", { fill: "currentColor", key: "exclamation-circle-outline-1", d: "M8.75 4v5h-1.5V4h1.5ZM8.75 12v-1.5h-1.5V12h1.5Z" }),
+    h("path", { fill: "currentColor", key: "exclamation-circle-outline-2", "fill-rule": "evenodd", d: "M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1ZM2 8a6 6 0 1 0 12 0A6 6 0 0 0 2 8Z" }),
+  ],
   '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': () => [
@@ -935,14 +959,37 @@ const icons = {
     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-excel': () => [
+    h("path", { key: "file-excel-1", fill: "currentColor", "fill-rule": "evenodd", d: "M9 5V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V5H9Zm-.018 7h1.335L8.776 9.48l1.5-2.48H9.02l-.795 1.485a5.09 5.09 0 0 0-.157.436h-.014a2.59 2.59 0 0 0-.15-.422L7.19 7H5.82l1.457 2.5L5.683 12h1.342l.865-1.614c.06-.156.099-.272.115-.349h.014c.035.163.069.274.101.335L8.982 12Z" }),
+    h("path", { key: "file-excel-2", fill: "currentColor", d: "M10 4V1l3 3h-3Z" }),
+  ],
+  'file-excel-outline': () => [
+    h("path", { fill: "currentColor", key: "file-excel-outline-1", d: "M8.982 12h1.335L8.776 9.48l1.5-2.48H9.02l-.795 1.485a5.09 5.09 0 0 0-.157.436h-.014a2.59 2.59 0 0 0-.15-.422L7.19 7H5.82l1.457 2.5L5.683 12h1.342l.865-1.614c.06-.156.099-.272.115-.349h.014c.035.163.069.274.101.335L8.982 12Z" }),
+    h("path", { fill: "currentColor", key: "file-excel-outline-2", d: "M4 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4l-3-3H4Zm6 3V2.537L11.254 4H10Zm2 1v9H4V2h5v3h3Z" }),
+  ],
+  'file-pdf': () => [
+    h("path", { fill: "currentColor", key: "file-pdf-1", d: "M6.464 11.274a3.81 3.81 0 0 0-.393.207c-.223.137-.37.27-.444.387-.072.11-.073.19-.03.273a.175.175 0 0 0 .019.034.223.223 0 0 0 .027-.01c.103-.042.268-.177.48-.433.12-.147.234-.3.34-.458ZM7.706 10.267c.252-.06.507-.108.764-.146a8.824 8.824 0 0 1-.386-.65 15.7 15.7 0 0 1-.378.796ZM9.579 10.63a2.916 2.916 0 0 0 .341.314c.164.123.28.165.344.168a.082.082 0 0 0 .053-.012.232.232 0 0 0 .07-.094.33.33 0 0 0 .045-.152.072.072 0 0 0-.02-.047c-.039-.047-.15-.116-.391-.159a2.926 2.926 0 0 0-.463-.04l.02.022ZM8.051 7.952c.064-.205.114-.414.151-.626.024-.142.033-.26.029-.352a.464.464 0 0 0-.024-.15.391.391 0 0 0-.11.03c-.066.027-.12.08-.148.215a.744.744 0 0 0-.01.057c-.018.142-.006.331.044.565.018.084.041.171.068.26Z" }),
+    h("path", { fill: "currentColor", key: "file-pdf-2", "fill-rule": "evenodd", d: "M9 1v4h4v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5ZM5.42 12.713a.613.613 0 0 1-.332-.318c-.147-.294-.098-.588.06-.834.15-.233.4-.43.68-.596a5.816 5.816 0 0 1 1.122-.489c.303-.544.571-1.107.804-1.686a5.554 5.554 0 0 1-.326-.98c-.065-.303-.09-.603-.034-.86.056-.268.207-.509.492-.623l.055-.02a.75.75 0 0 1 .4-.038.53.53 0 0 1 .362.276c.066.124.09.27.096.407.005.142-.01.3-.036.465-.063.386-.204.859-.394 1.358.21.447.458.874.742 1.277a4.457 4.457 0 0 1 1.01.038c.276.049.556.147.727.352a.64.64 0 0 1 .151.392.88.88 0 0 1-.104.426.788.788 0 0 1-.312.341.647.647 0 0 1-.342.078c-.25-.01-.495-.148-.706-.315a4.327 4.327 0 0 1-.69-.72 8.812 8.812 0 0 0-1.512.308 8.57 8.57 0 0 1-.773 1.143c-.22.265-.46.496-.701.596a.6.6 0 0 1-.44.022Z" }),
+    h("path", { fill: "currentColor", key: "file-pdf-3", d: "M10 1v3h3l-3-3Z" }),
+  ],
+  'file-pdf-outline': () => [
+    h("path", { fill: "currentColor", key: "file-pdf-outline-1", d: "M5.42 12.713a.613.613 0 0 1-.332-.318c-.147-.294-.098-.588.06-.834.15-.233.4-.43.68-.596a5.816 5.816 0 0 1 1.122-.489c.303-.544.571-1.107.804-1.686a5.503 5.503 0 0 1-.326-.98c-.065-.303-.09-.603-.034-.86.056-.268.207-.509.492-.623.145-.058.303-.09.455-.058a.53.53 0 0 1 .362.276c.066.124.09.27.096.407.005.142-.01.3-.036.465-.063.386-.204.859-.394 1.358.21.447.458.874.742 1.277a4.354 4.354 0 0 1 1.01.038c.276.049.556.147.727.352a.64.64 0 0 1 .151.392.88.88 0 0 1-.104.426.788.788 0 0 1-.268.315.648.648 0 0 1-.386.104c-.25-.01-.495-.148-.706-.315a4.324 4.324 0 0 1-.69-.72 8.812 8.812 0 0 0-1.512.308 8.57 8.57 0 0 1-.773 1.143c-.22.265-.46.496-.701.596a.6.6 0 0 1-.44.022Zm1.044-1.44a3.81 3.81 0 0 0-.348.18c-.248.148-.41.29-.49.415-.07.11-.072.19-.03.273a.175.175 0 0 0 .02.034.223.223 0 0 0 .027-.01c.103-.042.268-.177.48-.433.12-.147.234-.3.34-.458Zm1.242-1.006c.252-.06.507-.108.764-.146a8.824 8.824 0 0 1-.386-.65 15.7 15.7 0 0 1-.378.796Zm2.18.65a2.971 2.971 0 0 1-.328-.309c.155.001.31.015.463.04.24.043.352.112.392.159.012.012.02.03.02.047a.33.33 0 0 1-.045.152.232.232 0 0 1-.071.094.082.082 0 0 1-.053.012c-.07-.003-.196-.05-.377-.194Zm-1.684-3.59c-.037.21-.087.42-.15.625a3.355 3.355 0 0 1-.069-.26c-.057-.268-.065-.478-.034-.623.028-.134.082-.188.148-.214a.391.391 0 0 1 .11-.03.464.464 0 0 1 .024.15c.004.092-.005.209-.029.351Z" }),
+    h("path", { fill: "currentColor", key: "file-pdf-outline-2", d: "M3 2a1 1 0 0 1 1-1h6l3 3v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2Zm7 .537V4h1.254L10 2.537ZM12 14V5H9V2H4v12h8Z" }),
+  ],
   '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", { 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" }),
   ],
+  'file-word': () => [
+    h("path", { fill: "currentColor", "fill-rule": "evenodd", key: "file-word-1", d: "M9 5V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V5H9ZM5 7l1.091 5h1.002L8 8.262 8.91 12h.98L11 7h-.93l-.701 3.492L8.568 7H7.47l-.836 3.434L5.944 7H5Z" }),
+    h("path", { fill: "currentColor", key: "file-word-2", d: "M10 4V1l3 3h-3Z" }),
+  ],
+  'file-word-outline': () => [
+    h("path", { fill: "currentColor", d: "m5 7 1.091 5h1.002L8 8.262 8.91 12h.98L11 7h-.93l-.701 3.492L8.568 7H7.47l-.836 3.434L5.944 7H5Z" }),
+    h("path", { fill: "currentColor", d: "M4 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4l-3-3H4Zm6 3V2.537L11.254 4H10Zm2 1v9H4V2h5v3h3Z" }),
+  ],
   '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" })),
   'folder': () => (h("path", { fill: "currentColor", d: "M14 4.44H8.46L6.62 2.67H2C1.27 2.67.68 3.27.67 4v8c0 .73.6 1.32 1.33 1.33h12c.73 0 1.32-.6 1.33-1.33V5.78c0-.73-.6-1.33-1.33-1.34Z" })),
@@ -1022,8 +1069,8 @@ const icons = {
   'user': () => (h("path", { fill: "currentColor", d: "M8 8.79a3.56 3.56 0 1 0-3.56-3.56A3.56 3.56 0 0 0 8 8.79Zm3.17.79H9.8a4.27 4.27 0 0 1-3.6 0H4.83a3.16 3.16 0 0 0-3.16 3.17v.4a1.18 1.18 0 0 0 1.18 1.18h10.3a1.18 1.18 0 0 0 1.18-1.18v-.4a3.16 3.16 0 0 0-3.16-3.17Z" })),
   'user-circle': () => (h("path", { fill: "currentColor", d: "M8 .62C3.95.61.66 3.9.65 7.95c0 4.05 3.28 7.34 7.33 7.35 4.04 0 7.33-3.26 7.35-7.3.02-4.05-3.25-7.36-7.3-7.38H8Zm0 .75c3.64 0 6.59 2.96 6.58 6.6V8c0 1.35-.41 2.66-1.19 3.76a2.713 2.713 0 0 0-2.66-2.37H9.54c-.98.46-2.1.46-3.08 0H5.28c-1.36 0-2.5 1.02-2.67 2.37A6.483 6.483 0 0 1 1.42 8a6.59 6.59 0 0 1 6.55-6.63H8ZM5 5.63c0-1.68 1.37-3.05 3.05-3.05 1.68 0 3.05 1.37 3.05 3.05 0 1.68-1.37 3.05-3.05 3.05H8c-1.66-.03-3-1.39-3-3.05Z" })),
   'user-pen-fancy-outline': () => [
-    h("path", { fill: "currentColor", d: "M7.5 7a2.5 2.5 0 0 1 0-5 2.5 2.5 0 0 1 0 5Zm0-4C6.67 3 6 3.67 6 4.5S6.67 6 7.5 6 9 5.33 9 4.5 8.33 3 7.5 3ZM11.12 11.46l-.22.54-.3.77s-.04.09-.06.13c-.03.04-.06.07-.1.1-.05.04-.1.07-.16.08L7.52 14l-.07-.07 1.45-1.45h.13c.15 0 .27-.06.36-.16a.56.56 0 0 0 .1-.15c.01-.02.02-.04.03-.07v-.02s.01-.05.01-.08v-.03c0-.28-.23-.5-.51-.5-.28.01-.5.24-.5.51v.14l-.76.75-.14.13-.55.55-.07-.07.16-.48.1-.29.24-.71.42-1.27c.05-.16.17-.28.32-.32l1.31-.52 1.57 1.57ZM14.56 8.22l-2.05 1.87-.7.64-.06.05-.32.29-1.52-1.52.28-.31.06-.06.64-.7 1.88-2.04c1.16-1.31 3.11.61 1.79 1.78Z" }),
-    h("path", { fill: "currentColor", d: "M9 8H6c-2.21 0-4 1.79-4 4 0 .55.45 1 1 1h3.11l.33-1H3c0-1.66 1.34-3 3-3h3.05l.12-.13.71-.77C9.6 8.03 9.3 8 9 8Z" }),
+    h("path", { fill: "currentColor", key: "user-pen-fancy-outline-1", d: "M7.5 7a2.5 2.5 0 0 1 0-5 2.5 2.5 0 0 1 0 5Zm0-4C6.67 3 6 3.67 6 4.5S6.67 6 7.5 6 9 5.33 9 4.5 8.33 3 7.5 3ZM11.12 11.46l-.22.54-.3.77s-.04.09-.06.13c-.03.04-.06.07-.1.1-.05.04-.1.07-.16.08L7.52 14l-.07-.07 1.45-1.45h.13c.15 0 .27-.06.36-.16a.56.56 0 0 0 .1-.15c.01-.02.02-.04.03-.07v-.02s.01-.05.01-.08v-.03c0-.28-.23-.5-.51-.5-.28.01-.5.24-.5.51v.14l-.76.75-.14.13-.55.55-.07-.07.16-.48.1-.29.24-.71.42-1.27c.05-.16.17-.28.32-.32l1.31-.52 1.57 1.57ZM14.56 8.22l-2.05 1.87-.7.64-.06.05-.32.29-1.52-1.52.28-.31.06-.06.64-.7 1.88-2.04c1.16-1.31 3.11.61 1.79 1.78Z" }),
+    h("path", { fill: "currentColor", key: "user-pen-fancy-outline-2", d: "M9 8H6c-2.21 0-4 1.79-4 4 0 .55.45 1 1 1h3.11l.33-1H3c0-1.66 1.34-3 3-3h3.05l.12-.13.71-.77C9.6 8.03 9.3 8 9 8Z" }),
   ],
   'user-group': () => (h("path", { fill: "currentColor", d: "M13.15 4.12c-.81-.01-1.47.65-1.48 1.46 0 .82.65 1.47 1.46 1.48s1.47-.65 1.48-1.46-.65-1.47-1.46-1.48Zm-10.04.01a1.47 1.47 0 0 0-1.58 1.59c.06.71.62 1.28 1.34 1.34.81.07 1.52-.53 1.59-1.34.06-.81-.54-1.52-1.35-1.59Zm7.36.39c-.22-.84-.87-1.51-1.71-1.75-1.36-.41-2.8.36-3.22 1.72-.18.61-.13 1.27.14 1.85.41.9 1.33 1.48 2.32 1.45 1.41.01 2.56-1.14 2.57-2.55 0-.24-.03-.49-.1-.72Zm-.71 4h-.19c-.99.49-2.14.49-3.13 0h-.19c-1.46 0-2.64 1.18-2.64 2.64v2.69c1.23.93 2.74 1.47 4.39 1.47s3.17-.55 4.4-1.48v-2.68c0-1.46-1.18-2.64-2.64-2.64Zm5.52.25a7.282 7.282 0 0 1-1.65 3.91c-.08.1-.16.19-.25.28-.08.09-.17.18-.25.27v-.55h.03v-.72s.01-.07 0-.1v-.66c.01-1.25-.66-2.4-1.76-3 .27-.26.63-.41 1-.41h1.51c.63.01 1.17.41 1.37.98ZM2.86 11.16v1.52h.01v.55l-.28-.31c-.08-.08-.15-.16-.22-.24A7.238 7.238 0 0 1 .74 8.86c.16-.62.72-1.07 1.4-1.07h1.47c.37-.01.73.12 1.01.37-1.1.6-1.77 1.75-1.76 3Z" })),
   'user-plus': () => (h("path", { fill: "currentColor", d: "M14,3.33H12.65V2a.36.36,0,0,0-.35-.33h-.65A.36.36,0,0,0,11.3,2V3.33H10a.34.34,0,0,0-.33.34v.66a.34.34,0,0,0,.33.34H11.3V6a.37.37,0,0,0,.35.33h.65A.37.37,0,0,0,12.65,6V4.67H14a.34.34,0,0,0,.32-.34V3.67A.34.34,0,0,0,14,3.33ZM9.28,9.77h-.2a5.19,5.19,0,0,1-3.91,0H5A3,3,0,0,0,1.7,12.46h0v.72A1.27,1.27,0,0,0,3,14.33h8.25a1.26,1.26,0,0,0,1.36-1.14v-.68A3,3,0,0,0,9.37,9.76H9.28ZM7.13,3.7A2.64,2.64,0,1,1,4.5,6.34h0A2.64,2.64,0,0,1,7.13,3.7Z" })),
@@ -1035,60 +1082,81 @@ const icons = {
 /**
  * List of all possibles sizes
  */
-const sizes$1 = ['small', 'regular', 'large', 'extra-large'];
+const sizes$1 = ['small', 'regular', 'medium', 'large', 'extra-large'];
 /**
  * List of all possibles variants
  */
-const variants$2 = ['success', 'warning', 'danger', 'info'];
+const variants$2 = ['success', 'warning', 'danger', 'info', 'app'];
+/**
+ * List of all possibles variants styles
+ */
+const variantStyles = ['icon', 'background', 'full'];
-const mgIconCss = ".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:inline-flex;vertical-align:middle}.mg-icon[size=small],.mg-icon.mg-icon--size-small{width:var(--mg-icon-small-size);height:var(--mg-icon-small-size)}.mg-icon[size=regular],.mg-icon.mg-icon--size-regular{width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size)}.mg-icon[size=large],.mg-icon.mg-icon--size-large{width:var(--mg-icon-large-size);height:var(--mg-icon-large-size)}.mg-icon[size=extra-large],.mg-icon.mg-icon--size-extra-large{width:var(--mg-icon-extra-large-size);height:var(--mg-icon-extra-large-size)}.mg-icon[class*=mg-icon--variant-]{border-radius:var(--mg-message-border-radius);padding:0.3rem}.mg-icon.mg-icon--variant-success{background-color:hsl(var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) + 20%))}.mg-icon.mg-icon--variant-warning{background-color:hsl(var(--color-warning-h), var(--color-warning-s), calc(var(--color-warning-l) + 20%))}.mg-icon.mg-icon--variant-danger{background-color:hsl(var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) + 20%))}.mg-icon.mg-icon--variant-info{background-color:hsl(var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) + 20%))}.loader__full-circle{opacity:0.2}.mg-icon--spin{animation-name:rotate;animation-duration:0.75s;animation-iteration-count:infinite}@keyframes rotate{to{transform:rotate(360deg)}}";
+const mgIconCss = ".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:inline-flex;vertical-align:middle}.mg-icon{color:currentColor}.mg-icon[size=small],.mg-icon.mg-icon--size-small{width:var(--mg-icon-small-size);height:var(--mg-icon-small-size)}.mg-icon[size=small][class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon),.mg-icon.mg-icon--size-small[class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon){padding:calc(var(--mg-icon-small-size) / 2)}.mg-icon[size=regular],.mg-icon.mg-icon--size-regular{width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size)}.mg-icon[size=regular][class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon),.mg-icon.mg-icon--size-regular[class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon){padding:calc(var(--mg-icon-regular-size) / 2)}.mg-icon[size=medium],.mg-icon.mg-icon--size-medium{width:var(--mg-icon-medium-size);height:var(--mg-icon-medium-size)}.mg-icon[size=medium][class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon),.mg-icon.mg-icon--size-medium[class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon){padding:calc(var(--mg-icon-medium-size) / 2)}.mg-icon[size=large],.mg-icon.mg-icon--size-large{width:var(--mg-icon-large-size);height:var(--mg-icon-large-size)}.mg-icon[size=large][class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon),.mg-icon.mg-icon--size-large[class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon){padding:calc(var(--mg-icon-large-size) / 2)}.mg-icon[size=extra-large],.mg-icon.mg-icon--size-extra-large{width:var(--mg-icon-extra-large-size);height:var(--mg-icon-extra-large-size)}.mg-icon[size=extra-large][class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon),.mg-icon.mg-icon--size-extra-large[class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon){padding:calc(var(--mg-icon-extra-large-size) / 2)}.mg-icon.mg-icon--variant-success.mg-icon--variant-style-icon{color:hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l))}.mg-icon.mg-icon--variant-warning.mg-icon--variant-style-icon{color:hsl(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l))}.mg-icon.mg-icon--variant-danger.mg-icon--variant-style-icon{color:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l))}.mg-icon.mg-icon--variant-info.mg-icon--variant-style-icon{color:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l))}.mg-icon.mg-icon--variant-app.mg-icon--variant-style-icon{color:hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-app-l))}.mg-icon.mg-icon--variant-success.mg-icon--variant-style-background{background-color:hsl(var(--color-success-h), var(--color-success-s), var(--mg-color-soft-l))}.mg-icon.mg-icon--variant-warning.mg-icon--variant-style-background{background-color:hsl(var(--color-warning-h), var(--color-warning-s), var(--mg-color-soft-l))}.mg-icon.mg-icon--variant-danger.mg-icon--variant-style-background{background-color:hsl(var(--color-danger-h), var(--color-danger-s), var(--mg-color-soft-l))}.mg-icon.mg-icon--variant-info.mg-icon--variant-style-background{background-color:hsl(var(--color-info-h), var(--color-info-s), var(--mg-color-soft-l))}.mg-icon.mg-icon--variant-app.mg-icon--variant-style-background{background-color:hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-soft-l))}.mg-icon.mg-icon--variant-success.mg-icon--variant-style-full{color:hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l));background-color:hsl(var(--color-success-h), var(--color-success-s), var(--mg-color-soft-l))}.mg-icon.mg-icon--variant-warning.mg-icon--variant-style-full{color:hsl(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l));background-color:hsl(var(--color-warning-h), var(--color-warning-s), var(--mg-color-soft-l))}.mg-icon.mg-icon--variant-danger.mg-icon--variant-style-full{color:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l));background-color:hsl(var(--color-danger-h), var(--color-danger-s), var(--mg-color-soft-l))}.mg-icon.mg-icon--variant-info.mg-icon--variant-style-full{color:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l));background-color:hsl(var(--color-info-h), var(--color-info-s), var(--mg-color-soft-l))}.mg-icon.mg-icon--variant-app.mg-icon--variant-style-full{color:hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-app-l));background-color:hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-soft-l))}.mg-icon[class*=mg-icon--variant-]{border-radius:var(--mg-icon-border-radius)}.loader__full-circle{opacity:0.2}.mg-icon--spin{animation-name:rotate;animation-duration:0.75s;animation-iteration-count:infinite}@keyframes rotate{to{transform:rotate(360deg)}}";
 const MgIcon = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     /**
      * getIcon
-     *
      * @returns {HTMLElement} icon html
      */
     this.getIcon = () => icons[this.icon]();
+    /**
+     * Method to set default varianStyle props
+     * needeed has stencil doesn't know that props is mutated when updated in prop watcher
+     * @returns {void}
+     */
+    this.setDefaultVariantStyle = () => {
+      if (this.variantStyle === undefined)
+        this.variantStyle = 'background';
+    };
     this.icon = undefined;
     this.size = 'regular';
     this.variant = undefined;
+    this.variantStyle = undefined;
     this.spin = false;
     this.classList = new ClassList(['mg-icon']);
   }
   validateIcon(newValue, oldValue) {
-    if (!Object.keys(icons).includes(newValue)) {
+    if (!Object.keys(icons).includes(newValue))
       throw new Error(`<mg-icon> prop "icon" must be one of: ${Object.keys(icons).join(', ')}`);
-    }
     else {
-      if (oldValue !== undefined) {
+      if (oldValue !== undefined)
         this.classList.delete(`mg-icon--${oldValue}`);
-      }
       this.classList.add(`mg-icon--${newValue}`);
     }
   }
   validateSize(newValue, oldValue) {
-    if (!sizes$1.includes(newValue)) {
+    if (!sizes$1.includes(newValue))
       throw new Error(`<mg-icon> prop "size" must be one of: ${sizes$1.join(', ')}`);
-    }
     else {
-      if (oldValue !== undefined) {
+      if (oldValue !== undefined)
         this.classList.delete(`mg-icon--size-${oldValue}`);
-      }
       this.classList.add(`mg-icon--size-${newValue}`);
     }
   }
   validateVariant(newValue, oldValue) {
-    if (newValue !== undefined && !variants$2.includes(newValue)) {
-      throw new Error(`<mg-icon> prop "variant" must be one of: ${variants$2.join(', ')}`);
+    if (Boolean(newValue)) {
+      if (!variants$2.includes(newValue))
+        throw new Error(`<mg-icon> prop "variant" must be one of: ${variants$2.join(', ')}`);
+      else {
+        this.setDefaultVariantStyle();
+        if (oldValue !== undefined)
+          this.classList.delete(`mg-icon--variant-${oldValue}`);
+        this.classList.add(`mg-icon--variant-${newValue}`);
+      }
     }
-    else if (newValue !== undefined) {
-      if (oldValue !== undefined) {
-        this.classList.delete(`mg-icon--variant-${oldValue}`);
+  }
+  validateVariantStyle(newValue, oldValue) {
+    if (Boolean(newValue)) {
+      if (!variantStyles.includes(newValue))
+        throw new Error(`<mg-icon> prop "variantStyle" must be one of: ${variantStyles.join(', ')}`);
+      else {
+        if (oldValue !== undefined)
+          this.classList.delete(`mg-icon--variant-style-${oldValue}`);
+        this.classList.add(`mg-icon--variant-style-${newValue}`);
       }
-      this.classList.add(`mg-icon--variant-${newValue}`);
     }
   }
   handleSpin(newValue) {
@@ -1103,18 +1171,17 @@ const MgIcon = class {
   }
   /**
    * Check if props are well configured on init
-   *
    * @returns {void}
    */
   componentWillLoad() {
     this.validateIcon(this.icon);
     this.validateSize(this.size);
     this.validateVariant(this.variant);
+    this.validateVariantStyle(this.variantStyle);
     this.handleSpin(this.spin);
   }
   /**
    * Render component
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {
@@ -1124,6 +1191,7 @@ const MgIcon = class {
     "icon": ["validateIcon"],
     "size": ["validateSize"],
     "variant": ["validateVariant"],
+    "variantStyle": ["validateVariantStyle"],
     "spin": ["handleSpin"]
   }; }
 };
@@ -1142,7 +1210,6 @@ const MgIllustratedMessage = class {
    *************/
   /**
    * Check if component props are well configured on init
-   *
    * @returns {void}
    */
   componentDidLoad() {
@@ -1158,7 +1225,6 @@ const MgIllustratedMessage = class {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {
@@ -1176,7 +1242,6 @@ MgIllustratedMessage.style = mgIllustratedMessageCss;
 /**
  * Apply in all input child node the aria-describedby attribute
- *
  * @param {VNode[]} children Represent scoped elements
  * @param {Set<string>} ariaDescribedbyIDs List of IDs
  * @param {FunctionalUtilities} utils Stencil.js utils
@@ -1193,7 +1258,6 @@ const applyAriadescribedBy = (children, ariaDescribedbyIDs, utils) => utils.map(
 });
 /**
  * Add classes based on props
- *
  * @param {MgInputProps} props MgInput Interface Props
  */
 const manageClasses = (props) => {
@@ -1207,14 +1271,12 @@ const manageClasses = (props) => {
 };
 /**
  * Get tagname
- *
  * @param {boolean} isFieldset is fieldset
  * @returns {string} tag name
  */
 const getTagName = (isFieldset) => (isFieldset ? 'fieldset' : 'div');
 /**
  * Get input template
- *
  * @param {MgInputProps} props MgInput Interface Props
  * @param {VNode[]} children Represent scoped elements
  * @param {FunctionalUtilities} utils Stencil.js utils
@@ -1274,7 +1336,6 @@ const MgInput = (props, children, utils) => {
   const TagName = getTagName(props.isFieldset);
   /**
    * Get tooltip node
-   *
    * @returns {VNode[]} mg-tooltip
    */
   const getTooltip = () => (h("mg-tooltip", { identifier: `${props.identifier}-tooltip`, message: props.tooltip },
@@ -1282,7 +1343,6 @@ const MgInput = (props, children, utils) => {
   /**
    * Get input title (label) node
    * Display asterisk only if not disabled and not readonly
-   *
    * @returns {VNode[]} mg-input-title
    */
   const getInputTitle = () => (h("mg-input-title", { identifier: props.identifier, class: props.labelHide ? 'sr-only' : undefined, required: props.required && !props.disabled && !props.readonly, "is-legend": props.isFieldset }, props.label));
@@ -1304,7 +1364,6 @@ const mgInputCheckboxCss = ":host{display:block}.mg-input{display:flex;align-ite
 /**
  * type CheckboxItem validation function
- *
  * @param {unknown} items Checkbox item
  * @returns {boolean} match item type
  */
@@ -1324,7 +1383,6 @@ const MgInputCheckbox = class {
     this.hasDisplayedError = false;
     /**
      * Handle input event
-     *
      * @param {InputEvent} event input event
      */
     this.handleInput = (event) => {
@@ -1347,7 +1405,6 @@ const MgInputCheckbox = class {
     };
     /**
      * get invalid element
-     *
      * @returns {HTMLInputElement} element
      */
     this.getInvalidElement = () => this.inputs.find((input) => input !== null && !input.disabled && !input.checkValidity());
@@ -1415,7 +1472,6 @@ const MgInputCheckbox = class {
   }
   /**
    * Public method to display errors
-   *
    * @returns {Promise<void>}
    */
   async displayError() {
@@ -1428,7 +1484,6 @@ const MgInputCheckbox = class {
    *************/
   /**
    * Check if component props are well configured on init
-   *
    * @returns {ReturnType<typeof setTimeout>} timeout
    */
   componentWillLoad() {
@@ -1445,7 +1500,6 @@ const MgInputCheckbox = class {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {
@@ -1513,7 +1567,6 @@ const MgInputDate = class {
     };
     /**
      * get input error code
-     *
      * @returns {null | InputError} error code
      */
     this.getInputError = () => {
@@ -1539,7 +1592,6 @@ const MgInputDate = class {
     };
     /**
      * Check input errors
-     *
      * @returns {void}
      */
     this.setErrorMessage = () => {
@@ -1609,7 +1661,6 @@ const MgInputDate = class {
   }
   /**
    * Public method to display errors
-   *
    * @returns {Promise<void>}
    */
   async displayError() {
@@ -1622,7 +1673,6 @@ const MgInputDate = class {
    *************/
   /**
    * Check if component props are well configured on init
-   *
    * @returns {ReturnType<typeof setTimeout>} timeout
    */
   componentWillLoad() {
@@ -1643,7 +1693,6 @@ const MgInputDate = class {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {
@@ -1687,7 +1736,6 @@ const MgInputNumeric = class {
     this.hasDisplayedError = false;
     /**
      * Handle input event
-     *
      * @returns {void}
      */
     this.handleInput = () => {
@@ -1700,7 +1748,6 @@ const MgInputNumeric = class {
     };
     /**
      * Handle focus event
-     *
      * @returns {void}
      */
     this.handleFocus = () => {
@@ -1708,7 +1755,6 @@ const MgInputNumeric = class {
     };
     /**
      * Handle blur event
-     *
      * @returns {void}
      */
     this.handleBlur = () => {
@@ -1718,7 +1764,6 @@ const MgInputNumeric = class {
     };
     /**
      * Check if input is valid
-     *
      * @returns {void}
      */
     this.checkValidity = () => {
@@ -1729,7 +1774,6 @@ const MgInputNumeric = class {
     };
     /**
      * Set input error message
-     *
      * @returns {void}
      */
     this.setErrorMessage = () => {
@@ -1747,27 +1791,27 @@ const MgInputNumeric = class {
     };
     /**
      * Get input error code
-     *
      * @returns {null | InputError} error code
      */
     this.getInputError = () => {
       let inputError = null;
-      if (this.input === undefined || this.input === null)
+      const hasNotEmptyValues = (toControl) => !toControl.some(value => [null, undefined].includes(value));
+      if (!hasNotEmptyValues([this.input]))
         return inputError;
       // required
       if (!this.input.checkValidity() && this.input.validity.valueMissing) {
         inputError = InputError.REQUIRED;
       }
       // Min & Max
-      else if (this.min !== undefined && this.numericValue < this.min && this.max === undefined) {
+      else if (hasNotEmptyValues([this.min, this.numericValue]) && this.numericValue < this.min && this.max === undefined) {
         // Only a min value is set
         inputError = InputError.MIN;
       }
-      else if (this.max !== undefined && this.numericValue > this.max && this.min === undefined) {
+      else if (hasNotEmptyValues([this.max, this.numericValue]) && this.numericValue > this.max && this.min === undefined) {
         // Only a max value is set
         inputError = InputError.MAX;
       }
-      else if ((this.min !== undefined && this.numericValue < this.min) || (this.max !== undefined && this.numericValue > this.max)) {
+      else if (hasNotEmptyValues([this.min, this.max, this.numericValue]) && (this.numericValue < this.min || this.numericValue > this.max)) {
         // both min and max values are set
         inputError = InputError.MINMAX;
       }
@@ -1775,14 +1819,12 @@ const MgInputNumeric = class {
     };
     /**
      * Format value based on type
-     *
      * @param {number} value value to format
      * @returns {string} formated local value
      */
     this.formatValue = (value) => (this.type === 'currency' ? localeCurrency(value, this.locale, this.currency) : localeNumber(value, this.locale));
     /**
      * Validate append slot
-     *
      * @returns {void}
      */
     this.validateAppendSlot = () => {
@@ -1817,7 +1859,8 @@ const MgInputNumeric = class {
     this.hasFocus = false;
   }
   validateValue(newValue) {
-    if (newValue !== undefined && newValue !== null) {
+    // has input value is always render as string we get a stringified value or a '' for nullish value, so we test string type
+    if (typeof newValue === 'string') {
       // Split number and decimal
       const [integer, decimal = ''] = newValue.replace('-', '').split(/[\.,]/);
       // Regex
@@ -1837,7 +1880,7 @@ const MgInputNumeric = class {
       if (this.input !== undefined)
         this.input.value = this.value;
       // emit numeric value
-      this.numericValue = this.value !== '' && this.value !== null ? parseFloat(this.value.replace(',', '.')) : null;
+      this.numericValue = !['', null].includes(this.value) ? parseFloat(this.value.replace(',', '.')) : null;
       this.valueChange.emit(this.numericValue);
       // Set readonlyValue
       this.readonlyValue = this.numericValue !== null ? this.formatValue(this.numericValue) : '';
@@ -1870,7 +1913,6 @@ const MgInputNumeric = class {
   }
   /**
    * Public method to display errors
-   *
    * @returns {Promise<void>}
    */
   async displayError() {
@@ -1881,8 +1923,7 @@ const MgInputNumeric = class {
   /**
    * Displayed value in input
    * Change on focus/blur
-   *
-   * @returns {string} display value
+   * @returns {MgInputNumeric['value'] | MgInputNumeric['readonlyValue']} display value
    */
   displayValue() {
     return this.hasFocus ? this.value : this.readonlyValue;
@@ -1892,7 +1933,6 @@ const MgInputNumeric = class {
    *************/
   /**
    * Check if component props are well configured on init
-   *
    * @returns {ReturnType<typeof setTimeout>} timeout
    */
   componentWillLoad() {
@@ -1900,11 +1940,12 @@ const MgInputNumeric = class {
     const locales = initLocales(this.element);
     this.locale = locales.locale;
     this.messages = locales.messages;
-    // Validate
-    this.validateValue(this.value);
+    // Validate component config
     this.validateType(this.type);
     this.validateIntegerLength(this.integerLength);
     this.validateDecimalLength(this.decimalLength);
+    // validate value
+    this.validateValue(this.value);
     this.validateAppendSlot();
     // Check validity when component is ready
     // return a promise to process action only in the FIRST render().
@@ -1915,7 +1956,6 @@ const MgInputNumeric = class {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {
@@ -2016,7 +2056,6 @@ const MgInputPassword = class {
   }
   /**
    * Public method to display errors
-   *
    * @returns {Promise<void>}
    */
   async displayError() {
@@ -2029,7 +2068,6 @@ const MgInputPassword = class {
    *************/
   /**
    * Check if component props are well configured on init
-   *
    * @returns {ReturnType<typeof setTimeout>} timeout
    */
   componentWillLoad() {
@@ -2044,7 +2082,6 @@ const MgInputPassword = class {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {
@@ -2067,7 +2104,6 @@ const mgInputRadioCss = ":host{display:block}.mg-input{display:flex;align-items:
 /**
  * type Option validation function
- *
  * @param {RadioOption} option radio option
  * @returns {boolean} radio option type is valid
  */
@@ -2086,7 +2122,6 @@ const MgInputRadio = class {
     this.hasDisplayedError = false;
     /**
      * Handle input event
-     *
      * @param {event} event input event
      * @returns {void}
      */
@@ -2096,7 +2131,6 @@ const MgInputRadio = class {
     };
     /**
      * Handle blur event
-     *
      * @returns {void}
      */
     this.handleBlur = () => {
@@ -2105,7 +2139,6 @@ const MgInputRadio = class {
     };
     /**
      * Check if input is valid
-     *
      * @returns {void}
      */
     this.checkValidity = () => {
@@ -2116,7 +2149,6 @@ const MgInputRadio = class {
     };
     /**
      * Set input error message
-     *
      * @returns {void}
      */
     this.setErrorMessage = () => {
@@ -2129,7 +2161,6 @@ const MgInputRadio = class {
     };
     /**
      * get invalid element
-     *
      * @returns {HTMLInputElement} element
      */
     this.getInvalidElement = () => this.inputs.find((input) => !input.disabled && !input.readOnly && !input.checkValidity());
@@ -2184,7 +2215,6 @@ const MgInputRadio = class {
   }
   /**
    * Public method to display errors
-   *
    * @returns {Promise<void>}
    */
   async displayError() {
@@ -2197,7 +2227,6 @@ const MgInputRadio = class {
    *************/
   /**
    * Check if component props are well configured on init
-   *
    * @returns {ReturnType<typeof setTimeout>} timeout
    */
   componentWillLoad() {
@@ -2214,7 +2243,6 @@ const MgInputRadio = class {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {
@@ -2238,28 +2266,24 @@ const mgInputSelectCss = ":host{display:block}.mg-input{display:flex;align-items
 /**
  * Check if item is a well configured option
- *
  * @param {unknown} option select option
  * @returns {boolean} select option type is valid
  */
 const isOption$1 = (option) => typeof option === 'object' && typeof option.title === 'string';
 /**
  * Check if items[] is SelectOption
- *
  * @param {unknown[]} items select option
  * @returns {boolean} select option array type is valid
  */
 const allItemsAreOptions = (items) => Array.isArray(items) && items.every(item => isOption$1(item));
 /**
  * Check if item is a well configured optgroup
- *
  * @param {unknown} optgroup select option
  * @returns {boolean} select optgroup type is valid
  */
 const isOptGroup = (optgroup) => typeof optgroup === 'object' && typeof optgroup.group === 'string' && allItemsAreOptions(optgroup.options);
 /**
  * Group options
- *
  * @param {(SelectOption | OptGroup)[]} acc reduce accumulator
  * @param {SelectOption} item item to add
  * @param {string} item.group item group
@@ -2295,7 +2319,6 @@ const MgInputSelect = class {
     this.hasDisplayedError = false;
     /**
      * Handle input event
-     *
      * @returns {void}
      */
     this.handleInput = () => {
@@ -2305,14 +2328,12 @@ const MgInputSelect = class {
     };
     /**
      * Method to compare item.title with input.value
-     *
      * @param {SelectOption} item item to compare with
      * @returns {boolean} truthy if input.value is an item
      */
     this.isInputValue = (item) => { var _a; return item.title === ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value); };
     /**
      * value props setter
-     *
      * @param {MgInputSelect['value']} newValue value to update with
      * @returns {void}
      */
@@ -2322,7 +2343,6 @@ const MgInputSelect = class {
     };
     /**
      * Update value from input.value
-     *
      * @returns {void}
      */
     this.updateValue = () => {
@@ -2349,7 +2369,6 @@ const MgInputSelect = class {
     };
     /**
      * Input value is disabled
-     *
      * @returns {boolean} truthy if input value is disabled
      */
     this.isDisabledValue = () => { var _a; return allItemsAreOptions(this.options) && ((_a = this.options.find(this.isInputValue)) === null || _a === void 0 ? void 0 : _a.disabled) === true; };
@@ -2375,7 +2394,6 @@ const MgInputSelect = class {
     };
     /**
      * Render option
-     *
      * @param {SelectOption} option to render
      * @returns {HTMLElement} render option
      */
@@ -2456,7 +2474,6 @@ const MgInputSelect = class {
   }
   /**
    * Public method to display errors
-   *
    * @returns {Promise<void>}
    */
   async displayError() {
@@ -2469,7 +2486,6 @@ const MgInputSelect = class {
    *************/
   /**
    * Check if component props are well configured on init
-   *
    * @returns {ReturnType<typeof setTimeout>} timeout
    */
   componentWillLoad() {
@@ -2491,7 +2507,6 @@ const MgInputSelect = class {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {
@@ -2530,7 +2545,6 @@ const MgInputText = class {
     this.hasDisplayedError = false;
     /**
      * Handle input event
-     *
      * @returns {void}
      */
     this.handleInput = () => {
@@ -2542,7 +2556,6 @@ const MgInputText = class {
     };
     /**
      * Handle focus event
-     *
      * @returns {void}
      */
     this.handleFocus = () => {
@@ -2551,7 +2564,6 @@ const MgInputText = class {
     };
     /**
      * Handle blur event
-     *
      * @returns {void}
      */
     this.handleBlur = () => {
@@ -2563,7 +2575,6 @@ const MgInputText = class {
     };
     /**
      * Check if input is valid
-     *
      * @returns {void}
      */
     this.checkValidity = () => {
@@ -2575,7 +2586,6 @@ const MgInputText = class {
     };
     /**
      * Set input error message
-     *
      * @returns {void}
      */
     this.setErrorMessage = () => {
@@ -2592,11 +2602,10 @@ const MgInputText = class {
     };
     /**
      * Validate pattern configuration
-     *
      * @returns {void}
      */
     this.validatePattern = () => {
-      if (this.pattern &&
+      if (this.pattern !== undefined &&
         typeof this.pattern === 'string' &&
         this.pattern !== '' &&
         (this.patternErrorMessage === undefined || typeof this.patternErrorMessage !== 'string' || this.patternErrorMessage === '')) {
@@ -2605,7 +2614,6 @@ const MgInputText = class {
     };
     /**
      * Validate append slot
-     *
      * @returns {void}
      */
     this.validateAppendSlot = () => {
@@ -2665,7 +2673,6 @@ const MgInputText = class {
   }
   /**
    * Public method to play input focus
-   *
    * @returns {Promise<void>}
    */
   async setFocus() {
@@ -2673,7 +2680,6 @@ const MgInputText = class {
   }
   /**
    * Public method to display errors
-   *
    * @returns {Promise<void>}
    */
   async displayError() {
@@ -2686,7 +2692,6 @@ const MgInputText = class {
    *************/
   /**
    * Check if component props are well configured on init
-   *
    * @returns {ReturnType<typeof setTimeout>} timeout
    */
   componentWillLoad() {
@@ -2706,7 +2711,6 @@ const MgInputText = class {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {
@@ -2775,7 +2779,6 @@ const MgInputTextarea = class {
     /**
      * Get pattern validity
      * Pattern is not defined on textarea field: https://developer.mozilla.org/fr/docs/Web/HTML/Element/Textarea
-     *
      * @returns {boolean} is pattern valid
      */
     this.getPatternValidity = () => this.pattern === undefined || new RegExp(`^${this.pattern}$`, 'u').test(this.value);
@@ -2808,7 +2811,7 @@ const MgInputTextarea = class {
      * Validate pattern configuration
      */
     this.validatePattern = () => {
-      if (this.pattern &&
+      if (this.pattern !== undefined &&
         typeof this.pattern === 'string' &&
         this.pattern !== '' &&
         (this.patternErrorMessage === undefined || typeof this.patternErrorMessage !== 'string' || this.patternErrorMessage === '')) {
@@ -2863,7 +2866,6 @@ const MgInputTextarea = class {
   }
   /**
    * Public method to display errors
-   *
    * @returns {Promise<void>}
    */
   async displayError() {
@@ -2876,7 +2878,6 @@ const MgInputTextarea = class {
    *************/
   /**
    * Check if component props are well configured on init
-   *
    * @returns {ReturnType<typeof setTimeout>} timeout
    */
   componentWillLoad() {
@@ -2895,7 +2896,6 @@ const MgInputTextarea = class {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {
@@ -2943,7 +2943,6 @@ const MgInputTitle = class {
    *************/
   /**
    * Init tag name
-   *
    * @returns {void}
    */
   componentWillLoad() {
@@ -2952,7 +2951,6 @@ const MgInputTitle = class {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {
@@ -2970,7 +2968,6 @@ const mgInputToggleCss = ":host{display:block}.mg-input{display:flex;align-items
 /**
  * type Option validation function
- *
  * @param {ToggleValue} option radio option
  * @returns {boolean} toggle option type is valid
  */
@@ -2991,7 +2988,6 @@ const MgInputToggle = class {
     this.classIcon = 'mg-input--toggle-icon';
     /**
      * Change checked value
-     *
      * @returns {void}
      */
     this.toggleChecked = () => {
@@ -2999,7 +2995,6 @@ const MgInputToggle = class {
     };
     /**
      * Slots validation
-     *
      * @returns {void}
      */
     this.validateSlots = () => {
@@ -3087,7 +3082,6 @@ const MgInputToggle = class {
   }
   /**
    * set checked state
-   *
    * @returns {void}
    */
   setChecked() {
@@ -3130,7 +3124,6 @@ const MgInputToggle = class {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {
@@ -3165,7 +3158,6 @@ const MgMenu = class {
      *************/
     /**
      * Close matching menu-item
-     *
      * @param {HTMLElement} item menu-item to close
      * @param {boolean} condition addionnal condition
      * @returns {void}
@@ -3177,19 +3169,16 @@ const MgMenu = class {
     };
     /**
      * get mg-item-more element
-     *
      * @returns {HTMLMgItemMoreElement} mg-item-more element
      */
     this.getItemMore = () => this.element.querySelector('mg-item-more');
     /**
      * get mg-item-more >>> mg-menu-item element
-     *
      * @returns {HTMLMgMenuItemElement} mg-item-more >>> mg-menu-item element
      */
     this.getItemMoreMenuItem = () => { var _a, _b; return (_b = (_a = this.getItemMore()) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('mg-menu-item'); };
     /**
      * Set item listend
-     *
      * @param {HTMLMgMenuItemElement} item mg-menu-item element
      * @param {MgMenu['focusedMenuItem']} index number
      * @returns {void}
@@ -3207,7 +3196,6 @@ const MgMenu = class {
     };
     /**
      * Store menu-items on component init and add listeners
-     *
      * @returns {void}
      */
     this.initMenuItemsListeners = () => {
@@ -3218,7 +3206,6 @@ const MgMenu = class {
     };
     /**
      * Handle item-loaded event on mg-item-more element
-     *
      * @returns {void}
      */
     this.handleItemLoaded = () => {
@@ -3226,7 +3213,6 @@ const MgMenu = class {
     };
     /**
      * render mg-item-more
-     *
      * @returns {void}
      */
     this.renderMgItemMore = () => {
@@ -3269,7 +3255,6 @@ const MgMenu = class {
    *************/
   /**
    * Validate props
-   *
    * @returns {void}
    */
   componentWillLoad() {
@@ -3280,7 +3265,6 @@ const MgMenu = class {
   }
   /**
    * Check if component slots configuration
-   *
    * @returns {ReturnType<typeof setTimeout>} timeout
    */
   componentDidLoad() {
@@ -3311,7 +3295,6 @@ const MgMenu = class {
   }
   /**
    * Add listeners to items
-   *
    * @returns {void}
    */
   componentDidRender() {
@@ -3319,7 +3302,6 @@ const MgMenu = class {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {
@@ -3335,7 +3317,7 @@ const MgMenu = class {
 };
 MgMenu.style = mgMenuCss;
-const mgMenuItemCss = ".sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding:1rem 2rem;height:3.8rem}.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button,.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button ::slotted([slot=label]),.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button ::slotted([slot=metadata]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular ::slotted([slot=label]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular ::slotted([slot=metadata]){font-size:var(--font-size)}.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button.mg-menu-item__navigation-button--horizontal,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular.mg-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button.mg-menu-item__navigation-button--vertical,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular.mg-menu-item__navigation-button--vertical{padding-left:calc(2rem - 0.3rem)}.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding:1rem 3rem;height:5.1rem}.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button,.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button ::slotted([slot=label]),.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button ::slotted([slot=metadata]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium ::slotted([slot=label]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium ::slotted([slot=metadata]){font-size:calc(var(--font-size) + 0.2rem)}.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button.mg-menu-item__navigation-button--horizontal,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium.mg-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button.mg-menu-item__navigation-button--vertical,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium.mg-menu-item__navigation-button--vertical{padding-left:calc(3rem - 0.3rem)}.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding:1rem 4rem;height:7.1rem}.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button,.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button ::slotted([slot=label]),.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button ::slotted([slot=metadata]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large ::slotted([slot=label]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large ::slotted([slot=metadata]){font-size:calc(var(--font-size) + 0.2rem)}.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button.mg-menu-item__navigation-button--horizontal,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large.mg-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button.mg-menu-item__navigation-button--vertical,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large.mg-menu-item__navigation-button--vertical{padding-left:calc(4rem - 0.3rem)}.mg-menu-item__navigation-button{display:flex;align-items:center;column-gap:var(--mg-menu-item-navigation-button-column-gap, 1rem);background-color:unset;border:none;font-family:var(--font-family);font-weight:400;color:hsl(var(--mg-menu-item-color-hsl, var(--color-dark)));line-height:var(--line-height);text-decoration:none;white-space:nowrap;box-sizing:border-box;cursor:pointer}.mg-menu-item__navigation-button:disabled,.mg-menu-item__navigation-button--disabled{cursor:default;opacity:var(--mg-disabled-opacity)}.mg-menu-item__navigation-button:focus-visible{z-index:10}.mg-menu-item__navigation-button:hover:not(.mg-menu-item__navigation-button--disabled),.mg-menu-item__navigation-button:focus-visible:not(.mg-menu-item__navigation-button--disabled){background-color:hsl(var(--mg-menu-item-focused-background-color-hsl), 0.1)}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--active{color:hsl(var(--mg-menu-item-color-active-hsl));font-weight:600}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--active.mg-menu-item__navigation-button--horizontal{border-bottom-color:hsl(var(--mg-menu-item-border-color-active-hsl))}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--active.mg-menu-item__navigation-button--vertical{border-left-color:hsl(var(--mg-menu-item-border-color-active-hsl))}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--hidden{display:none}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--horizontal{border-bottom:0.3rem solid transparent}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--vertical{border-left:0.3rem solid transparent}:host([data-style-direction-vertical][data-level=\"1\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(1 * 2rem - 0.3rem)}:host([data-level=\"1\"]) .mg-menu-item__collapse-container{z-index:calc(1 * 10)}:host([data-style-direction-vertical][data-level=\"2\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(2 * 2rem - 0.3rem)}:host([data-level=\"2\"]) .mg-menu-item__collapse-container{z-index:calc(2 * 10)}:host([data-style-direction-vertical][data-level=\"3\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(3 * 2rem - 0.3rem)}:host([data-level=\"3\"]) .mg-menu-item__collapse-container{z-index:calc(3 * 10)}:host([data-style-direction-vertical][data-level=\"4\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(4 * 2rem - 0.3rem)}:host([data-level=\"4\"]) .mg-menu-item__collapse-container{z-index:calc(4 * 10)}:host([data-style-direction-vertical][data-level=\"5\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(5 * 2rem - 0.3rem)}:host([data-level=\"5\"]) .mg-menu-item__collapse-container{z-index:calc(5 * 10)}:host([data-style-direction-vertical][data-level=\"6\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(6 * 2rem - 0.3rem)}:host([data-level=\"6\"]) .mg-menu-item__collapse-container{z-index:calc(6 * 10)}:host([data-style-direction-vertical][data-level=\"1\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(1 * 3rem - 0.3rem)}:host([data-level=\"1\"]) .mg-menu-item__collapse-container{z-index:calc(1 * 10)}:host([data-style-direction-vertical][data-level=\"2\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(2 * 3rem - 0.3rem)}:host([data-level=\"2\"]) .mg-menu-item__collapse-container{z-index:calc(2 * 10)}:host([data-style-direction-vertical][data-level=\"3\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(3 * 3rem - 0.3rem)}:host([data-level=\"3\"]) .mg-menu-item__collapse-container{z-index:calc(3 * 10)}:host([data-style-direction-vertical][data-level=\"4\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(4 * 3rem - 0.3rem)}:host([data-level=\"4\"]) .mg-menu-item__collapse-container{z-index:calc(4 * 10)}:host([data-style-direction-vertical][data-level=\"5\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(5 * 3rem - 0.3rem)}:host([data-level=\"5\"]) .mg-menu-item__collapse-container{z-index:calc(5 * 10)}:host([data-style-direction-vertical][data-level=\"6\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(6 * 3rem - 0.3rem)}:host([data-level=\"6\"]) .mg-menu-item__collapse-container{z-index:calc(6 * 10)}:host([data-style-direction-vertical][data-level=\"1\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(1 * 4rem - 0.3rem)}:host([data-level=\"1\"]) .mg-menu-item__collapse-container{z-index:calc(1 * 10)}:host([data-style-direction-vertical][data-level=\"2\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(2 * 4rem - 0.3rem)}:host([data-level=\"2\"]) .mg-menu-item__collapse-container{z-index:calc(2 * 10)}:host([data-style-direction-vertical][data-level=\"3\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(3 * 4rem - 0.3rem)}:host([data-level=\"3\"]) .mg-menu-item__collapse-container{z-index:calc(3 * 10)}:host([data-style-direction-vertical][data-level=\"4\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(4 * 4rem - 0.3rem)}:host([data-level=\"4\"]) .mg-menu-item__collapse-container{z-index:calc(4 * 10)}:host([data-style-direction-vertical][data-level=\"5\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(5 * 4rem - 0.3rem)}:host([data-level=\"5\"]) .mg-menu-item__collapse-container{z-index:calc(5 * 10)}:host([data-style-direction-vertical][data-level=\"6\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(6 * 4rem - 0.3rem)}:host([data-level=\"6\"]) .mg-menu-item__collapse-container{z-index:calc(6 * 10)}:host{position:relative;display:flex;--mg-popover-padding-vertical:0;--mg-popover-padding-horizontal:0}:host([data-style-direction-vertical]){flex-direction:column}:host([data-style-direction-vertical]) .mg-menu-item__navigation-button{width:100%}:host([data-style-direction-vertical]) .mg-menu-item__collapse-container{left:unset;top:unset;position:unset;width:unset}:host([data-style-direction-vertical]) .mg-menu-item-chevron{margin-left:auto}:host([data-style-direction-horizontal]) .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level,:host([data-overflow-more]) .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level{background-color:hsl(var(--color-light))}:host([data-style-direction-horizontal]) .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level ::slotted(mg-menu),:host([data-overflow-more]) .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level ::slotted(mg-menu){padding:1rem 0}:host([data-overflow-more]){--mg-menu-item-navigation-button-column-gap:0}:host([data-overflow-more]) .mg-menu-item__navigation-button-chevron{display:none}:host([data-overflow-more]) .mg-menu-item__navigation-button-text-content ::slotted([slot=information]){margin-left:0}:host([data-overflow-more]) ::slotted(mg-menu){--mg-menu-item-navigation-button-column-gap:1rem}.mg-menu-item{max-width:var(--mg-menu-item-navigation-button-max-width)}.mg-menu-item__collapse-container{width:max-content;z-index:10}.mg-menu-item__navigation-button-center{min-width:0}.mg-menu-item__navigation-button-text-content{width:100%;display:flex;align-items:center}.mg-menu-item__navigation-button-text-content-notification,.mg-menu-item__navigation-button-text-content ::slotted([slot=information]){margin-left:1rem;font-size:var(--font-size)}.mg-menu-item__navigation-button-chevron{margin-left:auto;transition:200ms}.mg-menu-item__navigation-button-chevron--rotate.mg-menu-item__navigation-button-chevron{transform:rotate(180deg)}::slotted([slot=label]),::slotted([slot=metadata]){display:block;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::slotted(*){display:flex;flex-direction:column}:host([status=disabled]){pointer-events:none}:host([hidden]){display:none}";
+const mgMenuItemCss = ".sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding:1rem 2rem;height:3.8rem}.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button,.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button ::slotted([slot=label]),.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button ::slotted([slot=metadata]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular ::slotted([slot=label]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular ::slotted([slot=metadata]){font-size:var(--font-size)}.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button.mg-menu-item__navigation-button--horizontal,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular.mg-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button.mg-menu-item__navigation-button--vertical,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular.mg-menu-item__navigation-button--vertical{padding-left:calc(2rem - 0.3rem)}.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding:1rem 3rem;height:5.1rem}.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button,.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button ::slotted([slot=label]),.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button ::slotted([slot=metadata]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium ::slotted([slot=label]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium ::slotted([slot=metadata]){font-size:calc(var(--font-size) + 0.2rem)}.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button.mg-menu-item__navigation-button--horizontal,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium.mg-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button.mg-menu-item__navigation-button--vertical,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium.mg-menu-item__navigation-button--vertical{padding-left:calc(3rem - 0.3rem)}.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding:1rem 4rem;height:7.1rem}.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button,.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button ::slotted([slot=label]),.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button ::slotted([slot=metadata]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large ::slotted([slot=label]),.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large ::slotted([slot=metadata]){font-size:calc(var(--font-size) + 0.2rem)}.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button.mg-menu-item__navigation-button--horizontal,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large.mg-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button.mg-menu-item__navigation-button--vertical,.mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large.mg-menu-item__navigation-button--vertical{padding-left:calc(4rem - 0.3rem)}.mg-menu-item__navigation-button{display:flex;align-items:center;column-gap:var(--mg-menu-item-navigation-button-column-gap, 1rem);background-color:unset;border:none;font-family:var(--font-family);font-weight:400;color:hsl(var(--mg-menu-item-color-hsl, var(--color-dark)));line-height:var(--line-height);text-decoration:none;white-space:nowrap;box-sizing:border-box;cursor:pointer}.mg-menu-item__navigation-button:disabled,.mg-menu-item__navigation-button--disabled{cursor:default;opacity:var(--mg-disabled-opacity)}.mg-menu-item__navigation-button:focus-visible{z-index:10}.mg-menu-item__navigation-button:hover:not(.mg-menu-item__navigation-button--disabled),.mg-menu-item__navigation-button:focus-visible:not(.mg-menu-item__navigation-button--disabled){background-color:hsl(var(--mg-menu-item-focused-background-color-hsl), 0.1)}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--active{color:hsl(var(--mg-menu-item-color-active-hsl));font-weight:600}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--active.mg-menu-item__navigation-button--horizontal{border-bottom-color:hsl(var(--mg-menu-item-border-color-active-hsl))}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--active.mg-menu-item__navigation-button--vertical{border-left-color:hsl(var(--mg-menu-item-border-color-active-hsl))}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--hidden{display:none}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--horizontal{border-bottom:0.3rem solid transparent}.mg-menu-item__navigation-button.mg-menu-item__navigation-button--vertical{border-left:0.3rem solid transparent}:host([data-style-direction-vertical][data-level=\"1\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(1 * 2rem - 0.3rem)}:host([data-level=\"1\"]) .mg-menu-item__collapse-container{z-index:calc(1 * 10)}:host([data-style-direction-vertical][data-level=\"2\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(2 * 2rem - 0.3rem)}:host([data-level=\"2\"]) .mg-menu-item__collapse-container{z-index:calc(2 * 10)}:host([data-style-direction-vertical][data-level=\"3\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(3 * 2rem - 0.3rem)}:host([data-level=\"3\"]) .mg-menu-item__collapse-container{z-index:calc(3 * 10)}:host([data-style-direction-vertical][data-level=\"4\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(4 * 2rem - 0.3rem)}:host([data-level=\"4\"]) .mg-menu-item__collapse-container{z-index:calc(4 * 10)}:host([data-style-direction-vertical][data-level=\"5\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(5 * 2rem - 0.3rem)}:host([data-level=\"5\"]) .mg-menu-item__collapse-container{z-index:calc(5 * 10)}:host([data-style-direction-vertical][data-level=\"6\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular{padding-left:calc(6 * 2rem - 0.3rem)}:host([data-level=\"6\"]) .mg-menu-item__collapse-container{z-index:calc(6 * 10)}:host([data-style-direction-vertical][data-level=\"1\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(1 * 3rem - 0.3rem)}:host([data-level=\"1\"]) .mg-menu-item__collapse-container{z-index:calc(1 * 10)}:host([data-style-direction-vertical][data-level=\"2\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(2 * 3rem - 0.3rem)}:host([data-level=\"2\"]) .mg-menu-item__collapse-container{z-index:calc(2 * 10)}:host([data-style-direction-vertical][data-level=\"3\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(3 * 3rem - 0.3rem)}:host([data-level=\"3\"]) .mg-menu-item__collapse-container{z-index:calc(3 * 10)}:host([data-style-direction-vertical][data-level=\"4\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(4 * 3rem - 0.3rem)}:host([data-level=\"4\"]) .mg-menu-item__collapse-container{z-index:calc(4 * 10)}:host([data-style-direction-vertical][data-level=\"5\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(5 * 3rem - 0.3rem)}:host([data-level=\"5\"]) .mg-menu-item__collapse-container{z-index:calc(5 * 10)}:host([data-style-direction-vertical][data-level=\"6\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium{padding-left:calc(6 * 3rem - 0.3rem)}:host([data-level=\"6\"]) .mg-menu-item__collapse-container{z-index:calc(6 * 10)}:host([data-style-direction-vertical][data-level=\"1\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(1 * 4rem - 0.3rem)}:host([data-level=\"1\"]) .mg-menu-item__collapse-container{z-index:calc(1 * 10)}:host([data-style-direction-vertical][data-level=\"2\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(2 * 4rem - 0.3rem)}:host([data-level=\"2\"]) .mg-menu-item__collapse-container{z-index:calc(2 * 10)}:host([data-style-direction-vertical][data-level=\"3\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(3 * 4rem - 0.3rem)}:host([data-level=\"3\"]) .mg-menu-item__collapse-container{z-index:calc(3 * 10)}:host([data-style-direction-vertical][data-level=\"4\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(4 * 4rem - 0.3rem)}:host([data-level=\"4\"]) .mg-menu-item__collapse-container{z-index:calc(4 * 10)}:host([data-style-direction-vertical][data-level=\"5\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(5 * 4rem - 0.3rem)}:host([data-level=\"5\"]) .mg-menu-item__collapse-container{z-index:calc(5 * 10)}:host([data-style-direction-vertical][data-level=\"6\"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large{padding-left:calc(6 * 4rem - 0.3rem)}:host([data-level=\"6\"]) .mg-menu-item__collapse-container{z-index:calc(6 * 10)}:host{position:relative;display:flex;--mg-popover-padding-vertical:0;--mg-popover-padding-horizontal:0;--mg-popover-max-width:unset}:host([data-style-direction-vertical]){flex-direction:column}:host([data-style-direction-vertical]) .mg-menu-item__navigation-button{width:100%}:host([data-style-direction-vertical]) .mg-menu-item__collapse-container{left:unset;top:unset;position:unset;width:unset}:host([data-style-direction-vertical]) .mg-menu-item-chevron{margin-left:auto}:host([data-style-direction-horizontal]) .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level,:host([data-overflow-more]) .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level{background-color:hsl(var(--color-light))}:host([data-style-direction-horizontal]) .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level ::slotted(mg-menu),:host([data-overflow-more]) .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level ::slotted(mg-menu){padding:1rem 0}:host([data-overflow-more]){--mg-menu-item-navigation-button-column-gap:0}:host([data-overflow-more]) .mg-menu-item__navigation-button-chevron{display:none}:host([data-overflow-more]) .mg-menu-item__navigation-button-text-content ::slotted([slot=information]){margin-left:0}:host([data-overflow-more]) ::slotted(mg-menu){--mg-menu-item-navigation-button-column-gap:1rem}.mg-menu-item{max-width:var(--mg-menu-item-navigation-button-max-width)}.mg-menu-item__collapse-container{width:max-content;z-index:10}.mg-menu-item__navigation-button-center{min-width:0}.mg-menu-item__navigation-button-text-content{width:100%;display:flex;align-items:center}.mg-menu-item__navigation-button-text-content-notification,.mg-menu-item__navigation-button-text-content ::slotted([slot=information]){margin-left:1rem;font-size:var(--font-size)}.mg-menu-item__navigation-button-chevron{margin-left:auto;transition:200ms}.mg-menu-item__navigation-button-chevron--rotate.mg-menu-item__navigation-button-chevron{transform:rotate(180deg)}::slotted([slot=label]),::slotted([slot=metadata]){display:block;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::slotted(*){display:flex;flex-direction:column}:host([status=disabled]){pointer-events:none}:host([hidden]){display:none}";
 const MgMenuItem = class {
   constructor(hostRef) {
@@ -3352,7 +3334,6 @@ const MgMenuItem = class {
      **********/
     /**
      * Toggle expanded prop value
-     *
      * @returns {void}
      */
     this.toggleExpanded = () => {
@@ -3360,7 +3341,6 @@ const MgMenuItem = class {
     };
     /**
      * Does an Element have given Status
-     *
      * @param {HTMLMgMenuItemElement} mgMenuItemElement to parse
      * @param {MgMenuItem['status']} status to check
      * @returns {boolean} true if element with status is found
@@ -3368,7 +3348,6 @@ const MgMenuItem = class {
     this.hasStatus = (mgMenuItemElement, status) => mgMenuItemElement.status === status;
     /**
      * Is component contextual direction match the given direction
-     *
      * @param {MgMenuItem['direction']} direction in parent menu
      * @param {MgMenuItem['direction']} compareWith direction to compare with. Default: `this.direction`
      * @returns {boolean} true is direction match the direction propertie
@@ -3377,7 +3356,6 @@ const MgMenuItem = class {
     /**
      * Update displayNotificationBadge
      * current component notification badge have priority over the slot badge when submenu contain badge
-     *
      * @returns {void} update displayNotificationBadge value
      */
     this.updateDisplayNotificationBadge = () => {
@@ -3388,7 +3366,6 @@ const MgMenuItem = class {
     };
     /**
      * Method to control if one of component children have active status
-     *
      * @returns {boolean} truthy if component has active child
      */
     this.hasActiveChild = () => {
@@ -3397,7 +3374,6 @@ const MgMenuItem = class {
     };
     /**
      * Validate slots
-     *
      * @param {boolean} guard prevent action whith guard. Default: false.
      * @returns {void}
      */
@@ -3417,7 +3393,6 @@ const MgMenuItem = class {
     };
     /**
      * Update status
-     *
      * @param {Status[]} guard status to exclude from process in addition to [Status.HIDDEN, Status.DISABLED] . Default: [].
      * @returns {void}
      */
@@ -3428,7 +3403,6 @@ const MgMenuItem = class {
     };
     /**
      * Init event-listeners
-     *
      * @returns {void}
      */
     this.initListeners = () => {
@@ -3445,13 +3419,11 @@ const MgMenuItem = class {
     };
     /**
      * Get mg-popover identifier
-     *
      * @returns {MgPopover['identifier']} generated mg-popover identifier
      */
     this.getPopoverIdentifier = () => `${this.identifier}-popover`;
     /**
      * Condition to know if component should display a mg-popover
-     *
      * @returns {boolean} truthy if component display popover
      */
     this.displayPopover = () => this.isDirection(Direction.HORIZONTAL) && this.hasChildren && this.href === undefined;
@@ -3460,7 +3432,6 @@ const MgMenuItem = class {
      ************/
     /**
      * Handle interacrtive element click
-     *
      * @param {MouseEvent} event click on element
      * @returns {void}
      */
@@ -3475,7 +3446,6 @@ const MgMenuItem = class {
     };
     /**
      * Handle popover element display-change event
-     *
      * @param {CustomEvent} event popover display event
      * @returns {void}
      */
@@ -3484,7 +3454,6 @@ const MgMenuItem = class {
     };
     /**
      * Render slot
-     *
      * @returns {HTMLElement} HTML Element
      */
     this.renderSlot = () => h("slot", null);
@@ -3551,7 +3520,6 @@ const MgMenuItem = class {
   }
   /**
    * Render popover clickoutside guard for content slot
-   *
    * @returns {void}
    */
   updatePopoverGuard() {
@@ -3565,7 +3533,6 @@ const MgMenuItem = class {
    *************/
   /**
    * Validate props
-   *
    * @returns {void}
    */
   componentWillLoad() {
@@ -3582,7 +3549,6 @@ const MgMenuItem = class {
   }
   /**
    * Check if component slots configuration
-   *
    * @returns {ReturnType<typeof setTimeout>} timeout
    */
   componentDidLoad() {
@@ -3622,7 +3588,6 @@ const MgMenuItem = class {
   }
   /**
    * Render ineractive element
-   *
    * @returns {HTMLElement} HTML Element
    */
   renderInteractiveElement() {
@@ -3631,11 +3596,10 @@ const MgMenuItem = class {
         [`${this.navigationButton}-chevron`]: true,
         [`${this.navigationButton}-chevron--rotate`]: this.expanded === true,
         'mg-a11y-animation': true,
-      } }, h("mg-icon", { icon: "chevron-down" })))));
+      } }, h("mg-icon", { icon: "chevron-down", size: "small" })))));
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {
@@ -3664,7 +3628,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 ::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 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.mg-message--info .mg-message__icon{color:hsl(var(--color-info))}.mg-message.mg-message--warning .mg-message__icon{color:hsl(var(--color-warning))}.mg-message.mg-message--success .mg-message__icon{color:hsl(var(--color-success))}.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-card-max-width:unset}.mg-message,mg-message{max-width:100%}";
 const MgMessage = class {
   constructor(hostRef) {
@@ -3685,7 +3649,6 @@ const MgMessage = class {
     this.isHovered = false;
     /**
      * Set timer
-     *
      * @returns {void}
      */
     this.setTimer = () => {
@@ -3693,7 +3656,6 @@ const MgMessage = class {
     };
     /**
      * Clear timer
-     *
      * @returns {void}
      */
     this.clearTimer = () => {
@@ -3701,7 +3663,6 @@ const MgMessage = class {
     };
     /**
      * Event to add on element
-     *
      * @param {MouseEvent | FocusEvent} event  event
      * @returns {void}
      */
@@ -3726,8 +3687,7 @@ const MgMessage = class {
     };
     /**
      * Get icon corresponding to variant
-     *
-     * @returns {string} icon
+     * @returns {MgIcon['icon'] | undefined} icon
      */
     this.getIcon = () => {
       switch (this.variant) {
@@ -3750,7 +3710,7 @@ const MgMessage = class {
     this.hasActions = false;
   }
   validateDelay(newValue) {
-    if (newValue && newValue < 2) {
+    if (newValue !== undefined && newValue < 2) {
       throw new Error(`<mg-message> prop "delay" must be greater than 2 seconds.`);
     }
   }
@@ -3819,11 +3779,10 @@ const MgMessage = class {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h("div", { id: this.identifier, class: this.classList.join(), role: this.variant === 'info' ? 'status' : 'alert' }, h("mg-card", null, h("span", { class: "mg-message__bar" }), h("span", { class: "mg-message__icon" }, h("mg-icon", { icon: this.getIcon() })), h("div", { class: "mg-message__content" }, h("span", { class: "mg-message__content-slot" }, h("slot", null)), this.hasActions && h("span", { class: "mg-message__content-separator" }), this.hasActions && (h("span", { class: "mg-message__content-actions-slot" }, h("slot", { name: "actions" })))), this.closeButton && (h("span", { class: "mg-message__close-button" }, h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.message.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" })))))));
+    return (h("div", { id: this.identifier, class: this.classList.join(), role: this.variant === 'info' ? 'status' : 'alert' }, h("mg-card", { variant: this.variant, "variant-style": "bar-left" }, h("span", { class: "mg-message__icon" }, h("mg-icon", { icon: this.getIcon() })), h("div", { class: "mg-message__content" }, h("span", { class: "mg-message__content-slot" }, h("slot", null)), this.hasActions && h("span", { class: "mg-message__content-separator" }), this.hasActions && (h("span", { class: "mg-message__content-actions-slot" }, h("slot", { name: "actions" })))), this.closeButton && (h("span", { class: "mg-message__close-button" }, h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.message.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" })))))));
   }
   get element() { return getElement(this); }
   static get watchers() { return {
@@ -3835,7 +3794,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: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 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);--mg-card-max-width:unset}";
 const MgModal = class {
   constructor(hostRef) {
@@ -3883,7 +3842,6 @@ const MgModal = class {
      *************/
     /**
      * Handle close button
-     *
      * @returns {void}
      */
     this.handleClose = () => {
@@ -3916,7 +3874,6 @@ const MgModal = class {
   }
   /**
    * Handle 'escape' key down
-   *
    * @param {KeyboardEvent} event keydown event
    * @returns {void}
    */
@@ -3931,7 +3888,6 @@ const MgModal = class {
    *************/
   /**
    * Check if component props are well configured on init
-   *
    * @returns {void}
    */
   componentWillLoad() {
@@ -3951,7 +3907,6 @@ const MgModal = class {
   }
   /**
    * Add observer on component to set focus when displayed
-   *
    * @returns {void}
    */
   componentDidLoad() {
@@ -3967,7 +3922,6 @@ const MgModal = class {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {
@@ -4003,7 +3957,6 @@ const mgPaginationCss = ".sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1
  * range(1, 1) = [1]
  * range(1, 5) = [1, 2, 3, 4, 5]
  * range(10, 20, 2) = [10, 12, 14, 16, 18, 20]
- *
  * @param {number} start start range
  * @param {number} end start end
  * @param {number} step step size
@@ -4016,7 +3969,6 @@ const MgPagination = class {
     this.currentPageChange = createEvent(this, "current-page-change", 7);
     /**
      * Change current page from target
-     *
      * @param {number} target target page
      * @returns {void}
      */
@@ -4028,7 +3980,6 @@ const MgPagination = class {
      ************/
     /**
      * select handler
-     *
      * @param {InputEvent} event value change event
      * @returns {void}
      */
@@ -4038,7 +3989,6 @@ const MgPagination = class {
     };
     /**
      * Go to 'previous/next' page button handler
-     *
      * @param {string} action navigation action
      * @param {boolean} disabled button disable state
      * @returns {void}
@@ -4071,7 +4021,6 @@ const MgPagination = class {
    *************/
   /**
    * Check if props are well configured on init
-   *
    * @returns {void}
    */
   componentWillLoad() {
@@ -4087,7 +4036,6 @@ const MgPagination = class {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {
@@ -4104,7 +4052,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}.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 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);--mg-card-max-width:unset}";
 const MgPanel = class {
   constructor(hostRef) {
@@ -4116,7 +4064,6 @@ const MgPanel = class {
      ************/
     /**
      * Toggle is editing state
-     *
      * @returns {void}
      */
     this.toggleIsEditing = () => {
@@ -4127,7 +4074,6 @@ const MgPanel = class {
      ************/
     /**
      * Collapse button click handler
-     *
      * @returns {void}
      */
     this.handleCollapseButton = () => {
@@ -4137,7 +4083,6 @@ const MgPanel = class {
     };
     /**
      * Edit button click handler
-     *
      * @returns {void}
      */
     this.handleEditButton = () => {
@@ -4145,7 +4090,6 @@ const MgPanel = class {
     };
     /**
      * Update title handler
-     *
      * @param {CustomEvent<string>} event input value change event
      * @returns {void}
      */
@@ -4154,7 +4098,6 @@ const MgPanel = class {
     };
     /**
      * Cancel edition button handler
-     *
      * @returns {void}
      */
     this.handleCancelEditButton = () => {
@@ -4163,7 +4106,6 @@ const MgPanel = class {
     };
     /**
      * Validate edition button handler
-     *
      * @returns {void}
      */
     this.handleValidateEditButton = () => {
@@ -4175,7 +4117,6 @@ const MgPanel = class {
     };
     /**
      * Header left conditional render
-     *
      * @typedef {HTMLElement} HTMLMgButtonElement
      * @returns {HTMLMgButtonElement | HTMLElement | HTMLElement[]} header left element
      */
@@ -4213,10 +4154,10 @@ const MgPanel = class {
     this.titleChange.emit(newValue);
   }
   validatetitlePattern(newValue) {
-    if (newValue && !this.titleEditable) {
+    if (newValue !== undefined && !this.titleEditable) {
       throw new Error('<mg-panel> prop "titleEditable" must be set to `true`.');
     }
-    if (newValue && (this.titlePatternErrorMessage === undefined || this.titlePatternErrorMessage.trim() === '')) {
+    if (newValue !== undefined && (this.titlePatternErrorMessage === undefined || this.titlePatternErrorMessage.trim() === '')) {
       throw new Error('<mg-panel> prop "titlePattern" must be paired with the prop "titlePatternErrorMessage".');
     }
   }
@@ -4228,7 +4169,6 @@ const MgPanel = class {
    *************/
   /**
    * Check if props are well configured on init
-   *
    * @returns {void}
    */
   componentWillLoad() {
@@ -4240,7 +4180,6 @@ const MgPanel = class {
   }
   /**
    * Edit DOM after render
-   *
    * @returns {void}
    */
   componentDidRender() {
@@ -4251,7 +4190,6 @@ const MgPanel = class {
   }
   /**
    * Render component
-   *
    * @returns {HTMLElement} html element
    */
   render() {
@@ -4429,7 +4367,7 @@ var round = Math.round;
 function getUAString() {
   var uaData = navigator.userAgentData;
-  if (uaData != null && uaData.brands) {
+  if (uaData != null && uaData.brands && Array.isArray(uaData.brands)) {
     return uaData.brands.map(function (item) {
       return item.brand + "/" + item.version;
     }).join(' ');
@@ -4748,10 +4686,9 @@ var unsetSides = {
 // Zooming can change the DPR, but it seems to report a value that will
 // cleanly divide the values into the appropriate subpixels.
-function roundOffsetsByDPR(_ref) {
+function roundOffsetsByDPR(_ref, win) {
   var x = _ref.x,
       y = _ref.y;
-  var win = window;
   var dpr = win.devicePixelRatio || 1;
   return {
     x: round(x * dpr) / dpr || 0,
@@ -4834,7 +4771,7 @@ function mapToStyles(_ref2) {
   var _ref4 = roundOffsets === true ? roundOffsetsByDPR({
     x: x,
     y: y
-  }) : {
+  }, getWindow(popper)) : {
     x: x,
     y: y
   };
@@ -6064,7 +6001,7 @@ var createPopper = /*#__PURE__*/popperGenerator({
   defaultModifiers: defaultModifiers
 }); // eslint-disable-next-line import/no-unused-modules
-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 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{--mg-card-max-width:var(--mg-popover-max-width);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);--mg-card-max-width:unset}";
 const MgPopover = class {
   constructor(hostRef) {
@@ -6075,7 +6012,6 @@ const MgPopover = class {
     this.classArrowHide = `mg-popover--arrow-hide`;
     /**
      * Check if clicked outside of component
-     *
      * @param {MouseEvent} event mouse event
      * @returns {void}
      */
@@ -6089,7 +6025,6 @@ const MgPopover = class {
     };
     /**
      * Show popover
-     *
      * @returns {void}
      */
     this.show = () => {
@@ -6109,7 +6044,6 @@ const MgPopover = class {
     };
     /**
      * Hide popover
-     *
      * @returns {void}
      */
     this.hide = () => {
@@ -6124,7 +6058,6 @@ const MgPopover = class {
     };
     /**
      * Handle action for close button
-     *
      * @returns {void}
      */
     this.handleCloseButton = () => {
@@ -6158,7 +6091,6 @@ const MgPopover = class {
    *************/
   /**
    * Check if component props are well configured on init
-   *
    * @returns {void} timeout
    */
   componentWillLoad() {
@@ -6170,7 +6102,6 @@ const MgPopover = class {
   }
   /**
    * Check if component props are well configured on init
-   *
    * @returns {void}
    */
   componentDidLoad() {
@@ -6228,7 +6159,6 @@ const MgPopover = class {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {
@@ -6253,7 +6183,6 @@ const MgSkipLinks = class {
      **********/
     /**
      * Handle link click and emit go-to-anchor event
-     *
      * @param {MouseEvent} event mouse event
      * @returns {void}
      */
@@ -6275,7 +6204,6 @@ const MgSkipLinks = class {
    *************/
   /**
    * Check if props are well configured on init
-   *
    * @returns {void}
    */
   componentWillLoad() {
@@ -6284,7 +6212,6 @@ const MgSkipLinks = class {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {
@@ -6316,7 +6243,6 @@ const mgTabsCss = ".mg-tabs.mg-tabs--size-regular .mg-tabs__navigation-button,.m
 /**
  * type TabItem validation function
- *
  * @param {TabItem} tab tab item
  * @returns {boolean} tab item type is valid
  */
@@ -6334,7 +6260,6 @@ const MgTabs = class {
     this.startIndex = 1;
     /**
      * Method to know if given tab has the given status
-     *
      * @param {TabItem} tab item tab key to set to ACTIVE status
      * @param {Status} status status to valide
      * @returns {boolean} status comparaison
@@ -6342,7 +6267,6 @@ const MgTabs = class {
     this.tabHasStatus = (tab, status) => tab.status === status;
     /**
      * Method to get element id from index
-     *
      * @param {string} element to get id
      * @param {number} index to generate id
      * @returns {string} generated element id
@@ -6350,20 +6274,17 @@ const MgTabs = class {
     this.getElementId = (element, index) => `${element}-${this.getTabItemIndex(index)}`;
     /**
      * Method to get tab item index
-     *
      * @param {number} index to get
      * @returns {number} index
      */
     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) => {
@@ -6379,14 +6300,12 @@ const MgTabs = class {
     };
     /**
      * get navigation button class from given status
-     *
      * @param {Status} status button tab status
      * @returns {string} button class/selector variant
      */
     this.getNavigationButtonClass = (status) => `${this.buttonTabBaseClass}--${status}`;
     /**
      * Handle keyboard event on tabs
-     *
      * @param {MouseEvent} event mouse event
      * @returns {void}
      */
@@ -6426,7 +6345,6 @@ const MgTabs = class {
     };
     /**
      * Method to reset focus behavior
-     *
      * @returns {void}
      */
     this.resetFocus = () => {
@@ -6506,7 +6424,6 @@ const MgTabs = class {
    *************/
   /**
    * Check if component props are well configured on init
-   *
    * @returns {void}
    */
   componentWillLoad() {
@@ -6519,7 +6436,6 @@ const MgTabs = class {
   }
   /**
    * add listners
-   *
    * @returns {void}
    */
   componentDidLoad() {
@@ -6530,7 +6446,6 @@ const MgTabs = class {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {
@@ -6557,7 +6472,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: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 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), var(--mg-color-soft-l));border-color:hsl(var(--color-dark-h), var(--color-dark-s), var(--mg-color-soft-l));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), var(--mg-color-soft-l));border-color:hsl(var(--color-light-h), var(--color-light-s), var(--mg-color-soft-l));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), var(--mg-color-soft-l));border-color:hsl(var(--color-success-h), var(--color-success-s), var(--mg-color-soft-l));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), var(--mg-color-soft-l));border-color:hsl(var(--color-warning-h), var(--color-warning-s), var(--mg-color-soft-l));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), var(--mg-color-soft-l));border-color:hsl(var(--color-danger-h), var(--color-danger-s), var(--mg-color-soft-l));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), var(--mg-color-soft-l));border-color:hsl(var(--color-info-h), var(--color-info-s), var(--mg-color-soft-l));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) {
@@ -6605,7 +6520,6 @@ const MgTag = class {
    *************/
   /**
    * Validate the given textContent
-   *
    * @param {string} textContent html element textContent property
    * @returns {void}
    */
@@ -6618,7 +6532,6 @@ const MgTag = class {
    *************/
   /**
    * Check if props are well configured on init
-   *
    * @returns {void}
    */
   componentWillLoad() {
@@ -6629,7 +6542,6 @@ const MgTag = class {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {
@@ -6658,7 +6570,6 @@ const MgTooltip = class {
     registerInstance(this, hostRef);
     /**
      * Show tooltip
-     *
      * @returns {void}
      */
     this.show = () => {
@@ -6668,10 +6579,17 @@ const MgTooltip = class {
       this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
       // Update its position
       this.popper.update();
+      // hide when click outside
+      // setTimeout is used to prevent event to trigger after creation
+      setTimeout(() => {
+        this.windows.forEach((localWindow) => {
+          localWindow.addEventListener('click', this.clickOutside, false);
+          localWindow.addEventListener('keydown', this.pressEscape, false);
+        });
+      }, 0);
     };
     /**
      * Hide tooltip
-     *
      * @returns {void}
      */
     this.hide = () => {
@@ -6679,10 +6597,32 @@ const MgTooltip = class {
       this.tooltip.removeAttribute('data-show');
       // Disable the event listeners
       this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }] })));
+      // Remove event listener
+      this.windows.forEach((localWindow) => {
+        localWindow.removeEventListener('click', this.clickOutside, false);
+        localWindow.removeEventListener('keyboard', this.pressEscape, false);
+      });
+    };
+    /**
+     * Check if clicked outside of component and hidde tooltip
+     * @param {MouseEvent} event mouse event
+     * @returns {void}
+     */
+    this.clickOutside = (event) => {
+      if (event.target.closest('mg-tooltip') !== this.element)
+        this.setDisplay(false);
+    };
+    /**
+     * Check if 'Escape' key is pressed of component and hidde tooltip
+     * @param {KeyboardEvent} event keyboard event
+     * @returns {void}
+     */
+    this.pressEscape = (event) => {
+      if (event.code === 'Escape')
+        this.setDisplay(false);
     };
     /**
      * Method to set display prop
-     *
      * @param {boolean} newValue display prop new value
      * @param {boolean} condition additionnal condition to apply display prop newValue
      * @returns {void}
@@ -6693,7 +6633,6 @@ const MgTooltip = class {
     };
     /**
      * Action for tooltip element and tooltiped element mouse listener
-     *
      * @param {Guard} elementGuard tooltip element guard
      * @param {boolean} isMouseenter mouseenter validation
      * @param {Guard} conditionalGuard guard condition
@@ -6716,7 +6655,6 @@ const MgTooltip = class {
     };
     /**
      * Method to reset guard value
-     *
      * @returns {void}
      */
     this.resetGuard = () => {
@@ -6724,7 +6662,6 @@ const MgTooltip = class {
     };
     /**
      * Update slot content when it is a mg-button
-     *
      * @param {HTMLMgButtonElement} mgButton slotted mg-button
      * @returns {void}
      */
@@ -6743,7 +6680,6 @@ const MgTooltip = class {
     };
     /**
      * Init tooltip
-     *
      * @param {HTMLElement} slotElement slotted element
      * @param {HTMLElement} interactiveElement interactive element
      */
@@ -6782,10 +6718,7 @@ const MgTooltip = class {
         this.resetGuard();
         this.setDisplay(false);
       });
-      document.addEventListener('keydown', (event) => {
-        if (event.code === 'Escape')
-          this.setDisplay(false);
-      });
+      document.addEventListener('keydown', this.pressEscape);
       // manage tooltipElement & tooltipedElement mouseenter/mouseleave events
       ['mouseenter', 'mouseleave'].forEach(eventType => {
         const isMouseenter = eventType === 'mouseenter';
@@ -6822,11 +6755,18 @@ const MgTooltip = class {
   /*************
    * Lifecycle *
    *************/
+  /**
+   * set variables
+   * @returns {void}
+   */
+  componentWillLoad() {
+    // Get windows to attach events
+    this.windows = getWindows(window);
+  }
   /**
    * Get slotted element
    * Check if it already contain an interactive element, if not we need to add a tabIndex attribute
    * We need to attach the focused element to the tooltip (aria-describedby)
-   *
    * @returns {void}
    */
   componentDidLoad() {
@@ -6860,7 +6800,6 @@ const MgTooltip = class {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {