@mgdis/mg-components 5.0.0 → 5.1.0

package/dist/cjs/{mg-badge_24.cjs.entry.js → mg-badge_27.cjs.entry.js}

@@ -3,13 +3,101 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-94497267.js');
-const index$1 = require('./index-179621c8.js');
 
 /**
  * List of all possibles variants
  */
 const variants$4 = ['info', 'primary', 'secondary', 'success', 'warning', 'danger'];
 
+/**
+ * Create random ID
+ *
+ * @param {string} prefix  add prefix to created ID
+ * @param {number} length ID length
+ * @returns {string} ID
+ */
+const createID = (prefix = '', length = 10) => {
+  let ID = '';
+  const chars = 'abcdefghijklmnopqrstuvwxyz0123456789';
+  const charsLength = chars.length;
+  for (let i = 0; i < length; i++) {
+    ID += chars.charAt(Math.floor(Math.random() * charsLength));
+  }
+  return (prefix !== '' ? `${prefix}-` : '') + ID;
+};
+/**
+ * Class to manage component classlist
+ * Set() are not working when imported in project
+ */
+class ClassList {
+  constructor(classlist = []) {
+    /**
+     * Add class
+     *
+     * @param {string} className class name to add
+     * @returns {void}
+     */
+    this.add = (className) => {
+      if (!this.has(className)) {
+        this.classes.push(className);
+      }
+    };
+    /**
+     * Delete class
+     *
+     * @param {string} className class name to delete
+     * @returns {void}
+     */
+    this.delete = (className) => {
+      const index = this.classes.indexOf(className);
+      if (index > -1) {
+        this.classes.splice(index, 1);
+      }
+    };
+    /**
+     * Check if class exist in list
+     *
+     * @param {string} className class name to check
+     * @returns {boolean} class name is in the list
+     */
+    this.has = (className) => {
+      return this.classes.includes(className);
+    };
+    /**
+     * Join classes seperated by spaces
+     *
+     * @returns {string} joined values
+     */
+    this.join = () => {
+      return this.classes.join(' ');
+    };
+    this.classes = classlist;
+  }
+}
+/**
+ * Check if all items are string
+ *
+ * @param {string[]} items items to check
+ * @returns {boolean} all items are string
+ */
+const allItemsAreString = (items) => {
+  return 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
+ */
+const isTagName = (element, tagNames) => {
+  return tagNames.includes(element === null || element === void 0 ? void 0 : element.tagName.toLowerCase());
+};
+/**
+ * Focusable elements query selector
+ */
+const focusableElements = 'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"]), [identifier]';
+
 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}.mg-badge{padding:0 0.4rem;height:var(--mg-badge-size);min-width:var(--mg-badge-size);box-sizing:border-box;border:0.1rem solid;border-radius:calc(var(--mg-badge-size) / 2);font-size:var(--mg-badge-font-size);font-weight:600;text-align:center;line-height:var(--mg-badge-size)}.mg-badge.mg-badge--primary{background-color:hsl(var(--color-dark));border-color:hsl(var(--color-dark));color:hsl(var(--color-light))}.mg-badge.mg-badge--primary.mg-badge--outline{background-color:transparent;color:hsl(var(--color-dark))}.mg-badge.mg-badge--secondary{background-color:hsl(var(--color-light));border-color:hsl(var(--color-light));color:hsl(var(--color-dark))}.mg-badge.mg-badge--secondary.mg-badge--outline{background-color:transparent;color:hsl(var(--color-light))}.mg-badge.mg-badge--success{background-color:hsl(var(--color-success));border-color:hsl(var(--color-success));color:hsl(var(--color-dark))}.mg-badge.mg-badge--success.mg-badge--outline{background-color:transparent;color:hsl(var(--color-success))}.mg-badge.mg-badge--warning{background-color:hsl(var(--color-warning));border-color:hsl(var(--color-warning));color:hsl(var(--color-dark))}.mg-badge.mg-badge--warning.mg-badge--outline{background-color:transparent;color:hsl(var(--color-warning))}.mg-badge.mg-badge--danger{background-color:hsl(var(--color-danger));border-color:hsl(var(--color-danger));color:hsl(var(--color-light))}.mg-badge.mg-badge--danger.mg-badge--outline{background-color:transparent;color:hsl(var(--color-danger))}.mg-badge.mg-badge--info{background-color:hsl(var(--color-info));border-color:hsl(var(--color-info));color:hsl(var(--color-light))}.mg-badge.mg-badge--info.mg-badge--outline{background-color:transparent;color:hsl(var(--color-info))}.mg-badge,mg-badge{display:inline-flex;align-items:center;justify-content:center}";
 
 const MgBadge = class {
@@ -27,7 +115,7 @@ const MgBadge = class {
     /**
      * Component classes
      */
-    this.classList = new index$1.ClassList(['mg-badge']);
+    this.classList = new ClassList(['mg-badge']);
   }
   validateValue(newValue) {
     if (`${newValue}`.match(/^(\d+|[?*!a-z])$/i) === null) {
@@ -89,7 +177,7 @@ MgBadge.style = mgBadgeCss;
  */
 const variants$3 = ['primary', 'secondary', 'danger', 'danger-alt', 'info', 'flat', 'success'];
 
-const mgButtonCss = ":host{display:inline-block;vertical-align:middle;max-width:100%}:host(:focus-visible){outline:0}:host(:focus-visible) .mg-button:not(.mg-button--disabled){outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width:0.2rem}:host(:hover) .mg-button--flat:not(.mg-button--disabled),:host(:focus) .mg-button--flat:not(.mg-button--disabled),:host(:active) .mg-button--flat:not(.mg-button--disabled){background:hsla(var(--color-dark), 0.1)}.mg-button.mg-button--primary{border-color:hsl(var(--mg-button-primary-border-color, var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--mg-button-primary-font-color));background:linear-gradient(to bottom, hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l)), hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--primary:not(.mg-button--disabled),:host(:focus) .mg-button--primary:not(.mg-button--disabled),:host(:active) .mg-button--primary:not(.mg-button--disabled){background:hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l))}.mg-button.mg-button--secondary{border-color:hsl(var(--mg-button-secondary-border-color, var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--mg-button-secondary-font-color));background:linear-gradient(to bottom, hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l)), hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--secondary:not(.mg-button--disabled),:host(:focus) .mg-button--secondary:not(.mg-button--disabled),:host(:active) .mg-button--secondary:not(.mg-button--disabled){background:hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l))}.mg-button.mg-button--danger{border-color:hsl(var(--mg-button-danger-border-color, var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-neutral));background:linear-gradient(to bottom, hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l)), hsl(var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--danger:not(.mg-button--disabled),:host(:focus) .mg-button--danger:not(.mg-button--disabled),:host(:active) .mg-button--danger:not(.mg-button--disabled){background:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l))}.mg-button.mg-button--danger-alt{border-color:hsl(var(--mg-button-danger-alt-border-color, var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-danger));background:linear-gradient(to bottom, hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l)), hsl(var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--danger-alt:not(.mg-button--disabled),:host(:focus) .mg-button--danger-alt:not(.mg-button--disabled),:host(:active) .mg-button--danger-alt:not(.mg-button--disabled){background:hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l))}.mg-button.mg-button--info{border-color:hsl(var(--mg-button-info-border-color, var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-neutral));background:linear-gradient(to bottom, hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l)), hsl(var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--info:not(.mg-button--disabled),:host(:focus) .mg-button--info:not(.mg-button--disabled),:host(:active) .mg-button--info:not(.mg-button--disabled){background:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l))}.mg-button.mg-button--success{border-color:hsl(var(--mg-button-success-border-color, var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-dark));background:linear-gradient(to bottom, hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l)), hsl(var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--success:not(.mg-button--disabled),:host(:focus) .mg-button--success:not(.mg-button--disabled),:host(:active) .mg-button--success:not(.mg-button--disabled){background:hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l))}.mg-button{position:relative;display:inline-flex;align-items:center;column-gap:0.6rem;padding:calc((var(--default-size) - 0.2rem - var(--font-size) * var(--line-height)) / 2) 1.1rem;min-height:var(--default-size);box-sizing:border-box;border-top-right-radius:var(--mg-button-border-radius-top-right, var(--mg-button-border-radius));border-top-left-radius:var(--mg-button-border-radius-top-left, var(--mg-button-border-radius));border-bottom-right-radius:var(--mg-button-border-radius-bottom-right, var(--mg-button-border-radius));border-bottom-left-radius:var(--mg-button-border-radius-bottom-left, var(--mg-button-border-radius));cursor:pointer;background-image:none;border-top-width:var(--mg-button-border-top-width, 0.1rem);border-right-width:var(--mg-button-border-right-width, 0.1rem);border-bottom-width:var(--mg-button-border-bottom-width, 0.1rem);border-left-width:var(--mg-button-border-left-width, 0.1rem);border-style:solid;text-decoration:none;font-family:inherit;font-weight:var(--mg-button-font-weight, normal);text-align:left;font-size:var(--font-size);touch-action:manipulation}.mg-button.mg-button--disabled{opacity:var(--mg-button-disabled-opacity);cursor:default}.mg-button.mg-button--icon{padding:0;justify-content:center;width:var(--default-size);height:var(--default-size);border-top-right-radius:var(--mg-button-border-radius-top-right, var(--mg-button-icon-border-radius));border-top-left-radius:var(--mg-button-border-radius-top-left, var(--mg-button-icon-border-radius));border-bottom-right-radius:var(--mg-button-border-radius-bottom-right, var(--mg-button-icon-border-radius));border-bottom-left-radius:var(--mg-button-border-radius-bottom-left, var(--mg-button-icon-border-radius));font-size:var(--font-size);line-height:var(--font-size)}.mg-button.mg-button--flat{background:none;border:none}.mg-button.mg-button--loading>mg-icon:first-of-type{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%)}.mg-button.mg-button--loading .mg-button__content{opacity:0}.mg-button mg-icon:only-child,.mg-button ::slotted(mg-icon){display:inline-flex;flex-shrink:0;line-height:1;margin:auto 0}.mg-button slot,.mg-button ::slotted(*:not(mg-icon)){text-decoration:none;font-family:inherit;font-weight:var(--mg-button-font-weight, normal);text-align:left;font-size:var(--font-size);display:flex;align-items:center;column-gap:0.6rem}";
+const mgButtonCss = ":host{display:inline-block;vertical-align:middle;max-width:100%}:host(:focus-visible){outline:0}:host(:focus-visible) .mg-button:not(.mg-button--disabled){outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width:0.2rem}:host(:hover) .mg-button--flat:not(.mg-button--disabled),:host(:focus) .mg-button--flat:not(.mg-button--disabled),:host(:active) .mg-button--flat:not(.mg-button--disabled){background:hsla(var(--color-dark), 0.1)}:host([full-width]){display:block}.mg-button.mg-button--primary{border-color:hsl(var(--mg-button-primary-border-color, var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--mg-button-primary-font-color));background:linear-gradient(to bottom, hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l)), hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--primary:not(.mg-button--disabled),:host(:focus) .mg-button--primary:not(.mg-button--disabled),:host(:active) .mg-button--primary:not(.mg-button--disabled){background:hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l))}.mg-button.mg-button--secondary{border-color:hsl(var(--mg-button-secondary-border-color, var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--mg-button-secondary-font-color));background:linear-gradient(to bottom, hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l)), hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--secondary:not(.mg-button--disabled),:host(:focus) .mg-button--secondary:not(.mg-button--disabled),:host(:active) .mg-button--secondary:not(.mg-button--disabled){background:hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l))}.mg-button.mg-button--danger{border-color:hsl(var(--mg-button-danger-border-color, var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-neutral));background:linear-gradient(to bottom, hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l)), hsl(var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--danger:not(.mg-button--disabled),:host(:focus) .mg-button--danger:not(.mg-button--disabled),:host(:active) .mg-button--danger:not(.mg-button--disabled){background:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l))}.mg-button.mg-button--danger-alt{border-color:hsl(var(--mg-button-danger-alt-border-color, var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-danger));background:linear-gradient(to bottom, hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l)), hsl(var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--danger-alt:not(.mg-button--disabled),:host(:focus) .mg-button--danger-alt:not(.mg-button--disabled),:host(:active) .mg-button--danger-alt:not(.mg-button--disabled){background:hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l))}.mg-button.mg-button--info{border-color:hsl(var(--mg-button-info-border-color, var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-neutral));background:linear-gradient(to bottom, hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l)), hsl(var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--info:not(.mg-button--disabled),:host(:focus) .mg-button--info:not(.mg-button--disabled),:host(:active) .mg-button--info:not(.mg-button--disabled){background:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l))}.mg-button.mg-button--success{border-color:hsl(var(--mg-button-success-border-color, var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-dark));background:linear-gradient(to bottom, hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l)), hsl(var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--success:not(.mg-button--disabled),:host(:focus) .mg-button--success:not(.mg-button--disabled),:host(:active) .mg-button--success:not(.mg-button--disabled){background:hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l))}.mg-button{position:relative;display:inline-flex;align-items:center;column-gap:0.6rem;padding:calc((var(--default-size) - 0.2rem - var(--font-size) * var(--line-height)) / 2) 1.1rem;min-height:var(--default-size);box-sizing:border-box;border-top-right-radius:var(--mg-button-border-radius-top-right, var(--mg-button-border-radius));border-top-left-radius:var(--mg-button-border-radius-top-left, var(--mg-button-border-radius));border-bottom-right-radius:var(--mg-button-border-radius-bottom-right, var(--mg-button-border-radius));border-bottom-left-radius:var(--mg-button-border-radius-bottom-left, var(--mg-button-border-radius));cursor:pointer;background-image:none;border-top-width:var(--mg-button-border-top-width, 0.1rem);border-right-width:var(--mg-button-border-right-width, 0.1rem);border-bottom-width:var(--mg-button-border-bottom-width, 0.1rem);border-left-width:var(--mg-button-border-left-width, 0.1rem);border-style:solid;text-decoration:none;font-family:inherit;font-weight:var(--mg-button-font-weight, normal);text-align:left;font-size:var(--font-size);touch-action:manipulation}.mg-button.mg-button--disabled{opacity:var(--mg-button-disabled-opacity);cursor:default}.mg-button.mg-button--icon{padding:0;justify-content:center;width:var(--default-size);height:var(--default-size);border-top-right-radius:var(--mg-button-border-radius-top-right, var(--mg-button-icon-border-radius));border-top-left-radius:var(--mg-button-border-radius-top-left, var(--mg-button-icon-border-radius));border-bottom-right-radius:var(--mg-button-border-radius-bottom-right, var(--mg-button-icon-border-radius));border-bottom-left-radius:var(--mg-button-border-radius-bottom-left, var(--mg-button-icon-border-radius));font-size:var(--font-size);line-height:var(--font-size)}.mg-button.mg-button--flat{background:none;border:none}.mg-button.mg-button--full-width{display:flex;justify-content:center}.mg-button.mg-button--loading>mg-icon:first-of-type{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%)}.mg-button.mg-button--loading .mg-button__content{opacity:0}.mg-button mg-icon:only-child,.mg-button ::slotted(mg-icon){display:inline-flex;flex-shrink:0;line-height:1;margin:auto 0}.mg-button slot,.mg-button ::slotted(*:not(mg-icon)){text-decoration:none;font-family:inherit;font-weight:var(--mg-button-font-weight, normal);text-align:left;font-size:var(--font-size);display:flex;align-items:center;column-gap:0.6rem}";
 
 const MgButton = class {
   constructor(hostRef) {
@@ -100,10 +188,15 @@ const MgButton = class {
     this.onClickElementFn = null;
     this.classDisabled = 'mg-button--disabled';
     this.classLoading = 'mg-button--loading';
+    this.classFullWidth = 'mg-button--full-width';
     /**
      * Define button variant
      */
     this.variant = variants$3[0]; // Primary
+    /**
+     * Set button to full-width
+     */
+    this.fullWidth = false;
     /**
      * Define if button is round.
      * Used for icon button.
@@ -123,7 +216,7 @@ const MgButton = class {
     /**
      * Component classes
      */
-    this.classList = new index$1.ClassList(['mg-button']);
+    this.classList = new ClassList(['mg-button']);
     /**
      * Trigger actions onClick event
      *
@@ -178,6 +271,17 @@ const MgButton = class {
       this.classList.add(`mg-button--${newValue}`);
     }
   }
+  validateFullWidth(newValue) {
+    if (newValue && this.isIcon) {
+      throw new Error('<mg-button> prop "fullWidth" cannot be used with prop "isIcon".');
+    }
+    else if (newValue) {
+      this.classList.add(this.classFullWidth);
+    }
+    else {
+      this.classList.delete(this.classFullWidth);
+    }
+  }
   disabledHandler(isDisabled) {
     // Remove loading when enable
     // Will be set back onclick
@@ -210,6 +314,7 @@ const MgButton = class {
    */
   componentWillLoad() {
     this.validateVariant(this.variant);
+    this.validateFullWidth(this.fullWidth);
     if (this.isIcon) {
       this.classList.add(`mg-button--icon`);
       if (typeof this.label !== 'string' || this.label.trim() === '') {
@@ -226,17 +331,190 @@ const MgButton = class {
    * @returns {HTMLElement} html element
    */
   render() {
-    return (index.h(index.Host, { role: "button", tabIndex: this.disabled ? -1 : 0, type: this.type, form: this.form, "aria-label": this.label, "aria-disabled": this.disabled !== undefined && this.disabled.toString(), onClick: this.handleClick, onKeyUp: this.handleKeyup, onKeyDown: this.handleKeydown }, index.h("div", { class: this.classList.join(), id: this.identifier }, this.loading && index.h("mg-icon", { icon: "loader", spin: true }), index.h("div", { class: "mg-button__content" }, index.h("slot", null)))));
+    return (index.h(index.Host, { role: "button", tabIndex: this.disabled ? -1 : 0, type: this.type, form: this.form, "full-width": this.fullWidth, "aria-label": this.label, "aria-disabled": this.disabled !== undefined && this.disabled.toString(), onClick: this.handleClick, onKeyUp: this.handleKeyup, onKeyDown: this.handleKeydown }, index.h("div", { class: this.classList.join(), id: this.identifier }, this.loading && index.h("mg-icon", { icon: "loader", spin: true }), index.h("div", { class: "mg-button__content" }, index.h("slot", null)))));
   }
   get element() { return index.getElement(this); }
   static get watchers() { return {
     "variant": ["validateVariant"],
+    "fullWidth": ["validateFullWidth"],
     "disabled": ["disabledHandler"],
     "loading": ["loadingHandler"]
   }; }
 };
 MgButton.style = mgButtonCss;
 
+const mgCardCss = ".mg-card{padding:var(--mg-card-padding);border-radius:var(--mg-card-border-radius);background:var(--mg-card-background);border:var(--mg-card-border);box-shadow:var(--mg-card-box-shadow)}";
+
+const MgCard = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render() {
+    return (index.h("div", { class: "mg-card" }, index.h("slot", null)));
+  }
+};
+MgCard.style = mgCardCss;
+
+const errors$1 = {
+	required: "This field is required.",
+	date: {
+		badInput: "The date format must be <span aria-hidden=\"true\">mm/dd/yyyy</span><span class=\"sr-only\">m m / d d / y y y y</span> and the date must be greater than {min}",
+		min: "The date cannot be earlier than {min}",
+		max: "The date cannot be later than {max}",
+		minMax: "The date must be between {min} and {max}"
+	},
+	numeric: {
+		min: "The value cannot be less than {min}",
+		max: "The value cannot be greater than {max}",
+		minMax: "The value must be between {min} et {max}"
+	}
+};
+const nbCharLeft$1 = "{counter} characters left.";
+const input$1 = {
+	select: {
+		placeholder: "Select a value"
+	}
+};
+const form$1 = {
+	required: "Fields with a <strong class=\"is-asterisk\">*</strong> are required",
+	allRequired: "All fields are required"
+};
+const message$1 = {
+	closeButton: "Close message"
+};
+const modal$1 = {
+	closeButton: "Close modal"
+};
+const pagination$1 = {
+	label: "Pagination",
+	page: "page",
+	pages: "pages",
+	nextPage: "Next page",
+	previousPage: "Previous page",
+	selectPage: "Select the page to display."
+};
+const panel$1 = {
+	editLabel: "Edit section title."
+};
+const general$1 = {
+	confirm: "Confirm",
+	cancel: "Cancel",
+	close: "Close",
+	next: "next",
+	previous: "previous"
+};
+const en = {
+	errors: errors$1,
+	nbCharLeft: nbCharLeft$1,
+	input: input$1,
+	form: form$1,
+	message: message$1,
+	modal: modal$1,
+	pagination: pagination$1,
+	panel: panel$1,
+	general: general$1
+};
+
+const errors = {
+	required: "Ce champ est obligatoire.",
+	date: {
+		badInput: "Le format de la date doit être du type <span aria-hidden=\"true\">jj/mm/aaaa</span><span class=\"sr-only\">j j / m m / a a a a</span> et la date supérieure au {min}",
+		min: "La date ne peut pas être antérieure au {min}",
+		max: "La date ne peut pas être postérieure au {max}",
+		minMax: "La date doit être comprise entre le {min} et le {max}"
+	},
+	numeric: {
+		min: "La valeur ne peut pas être inférieure à {min}",
+		max: "La valeur ne peut pas être supérieure à {max}",
+		minMax: "La valeur doit être comprise entre {min} et {max}"
+	}
+};
+const nbCharLeft = "{counter} caractères disponibles.";
+const input = {
+	select: {
+		placeholder: "Sélectionnez une valeur"
+	}
+};
+const form = {
+	required: "Les champs marqués d'un <strong class=\"is-asterisk\">*</strong> sont obligatoires",
+	allRequired: "Tous les champs sont obligatoires"
+};
+const message = {
+	closeButton: "Fermer le message"
+};
+const modal = {
+	closeButton: "Fermer la modale"
+};
+const pagination = {
+	label: "Pagination",
+	page: "page",
+	pages: "pages",
+	nextPage: "Page suivante",
+	previousPage: "Page précédente",
+	selectPage: "Sélectionner la page à afficher."
+};
+const panel = {
+	editLabel: "Modifier le titre de la section."
+};
+const general = {
+	confirm: "Valider",
+	cancel: "Annuler",
+	close: "Fermer",
+	next: "suivant",
+	previous: "précédent"
+};
+const fr = {
+	errors: errors,
+	nbCharLeft: nbCharLeft,
+	input: input,
+	form: form,
+	message: message,
+	modal: modal,
+	pagination: pagination,
+	panel: panel,
+	general: general
+};
+
+const defaultLocale = 'en';
+const messages = { en, fr };
+/**
+ * Get locale
+ *
+ * @param {HTMLElement} element element that needs to know the locale to use
+ * @returns {string} locale
+ */
+const getLocale = (element) => {
+  var _a;
+  return ((_a = element.closest('[lang]')) === null || _a === void 0 ? void 0 : _a.lang) || navigator.language || defaultLocale;
+};
+/**
+ * Get Intl object
+ * We load the defined locale but for now we only support the first subtag for messages
+ *
+ * @param {HTMLElement} element element we need to get the language
+ * @returns {{ locale: string; messages: unknown }} messages object
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const initLocales = (element) => {
+  // Get local
+  const locale = getLocale(element);
+  // Only keep first subtag
+  const localeSubtag = locale.split('-').shift();
+  // Return
+  return {
+    locale,
+    messages: messages[localeSubtag] || messages[defaultLocale],
+  };
+};
+
 const mgCharacterLeftCss = "mg-character-left.sc-mg-character-left{display:block}";
 
 const MgCharacterLeft = class {
@@ -262,7 +540,7 @@ const MgCharacterLeft = class {
    */
   componentWillLoad() {
     this.validateMaxlength(this.maxlength);
-    this.messages = index$1.initLocales(this.element).messages;
+    this.messages = initLocales(this.element).messages;
   }
   /**
    * Render component
@@ -279,12 +557,16 @@ const MgCharacterLeft = class {
 };
 MgCharacterLeft.style = mgCharacterLeftCss;
 
-const mgDetailsCss = ".mg-details summary{display:flex;align-items:baseline;cursor:pointer}.mg-details__toggle{margin-left:1.5rem;flex-shrink:0}.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}.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 MgDetails = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.expandedChange = index.createEvent(this, "expanded-change", 7);
+    /**
+     * Hide summary element
+     */
+    this.hideSummary = false;
     /**
      * Define if details are diplayed
      */
@@ -299,7 +581,7 @@ const MgDetails = class {
     };
   }
   validateTitles(newValue) {
-    if (newValue === undefined || newValue === '') {
+    if (newValue === undefined || newValue.trim() === '') {
       throw new Error('<mg-details> prop "toggleClosed" and "toggleOpened" must be defined.');
     }
   }
@@ -324,7 +606,7 @@ const MgDetails = class {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (index.h("details", { class: "mg-details", onToggle: this.handleToggle, open: this.expanded, ref: el => (this.details = el) }, index.h("summary", null, index.h("slot", { name: "summary" }), index.h("span", { class: "mg-details__toggle" }, index.h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down' }), " ", this.expanded ? this.toggleOpened : this.toggleClosed)), index.h("div", { class: "mg-details__details" }, index.h("slot", { name: "details" }))));
+    return (index.h("details", { class: "mg-details", onToggle: this.handleToggle, open: this.expanded, ref: el => (this.details = el) }, index.h("summary", null, index.h("slot", { name: "summary" }), index.h("span", { class: "mg-details__toggle" }, index.h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down' }), index.h("span", { class: { 'sr-only': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), index.h("div", { class: "mg-details__details" }, index.h("slot", { name: "details" }))));
   }
   static get watchers() { return {
     "toggleClosed": ["validateTitles"],
@@ -334,6 +616,33 @@ const MgDetails = class {
 };
 MgDetails.style = mgDetailsCss;
 
+const mgDividerCss = ".mg-divider{margin:var(--mg-divider-vertical-spacing) auto;width:12rem;height:var(--mg-divider-thickness);background-color:var(--mg-divider-background-color)}.mg-divider.mg-divider--full{width:100%}";
+
+const MgDivider = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**************
+     * Decorators *
+     **************/
+    /**
+     * Define component size
+     */
+    this.size = 'regular';
+  }
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render() {
+    return (index.h("div", { class: {
+        'mg-divider': true,
+        'mg-divider--full': this.size === 'full',
+      } }));
+  }
+};
+MgDivider.style = mgDividerCss;
+
 const mgFormCss = ".is-asterisk{color:hsl(var(--color-danger))}.mg-form,.mg-form-group{--mg-inputs-title-width:var(--mg-form-inputs-title-width, 15rem);--mg-inputs-margin-bottom:1.5rem;--mg-inputs-title-horizontal-space:3rem;--mg-inputs-shrink:0}.mg-form.mg-form--all-required,.mg-form-group.mg-form--all-required{--mg-input-title-display:none}.mg-form>p,.mg-form-group>p{font-size:1.2rem}";
 
 const MgForm = class {
@@ -345,7 +654,7 @@ const MgForm = class {
      * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
      * If not set, it will be created.
      */
-    this.identifier = index$1.createID('mg-form');
+    this.identifier = createID('mg-form');
     /**
      * Input name
      * If not set the value equals the identifier
@@ -362,7 +671,7 @@ const MgForm = class {
     /**
      * Component classes
      */
-    this.classList = new index$1.ClassList(['mg-form']);
+    this.classList = new ClassList(['mg-form']);
     /**
      * Define required message based on mg-inputs required elements
      * Also
@@ -422,7 +731,7 @@ const MgForm = class {
    */
   componentWillLoad() {
     // Get locales
-    this.messages = index$1.initLocales(this.element).messages;
+    this.messages = initLocales(this.element).messages;
     // Get slotted mgInputs
     this.mgInputs = Array.from(this.element.querySelectorAll('*')).filter((node) => node.nodeName.startsWith('MG-INPUT-'));
     // Get slotted mgButtons
@@ -659,7 +968,7 @@ const MgIcon = class {
     /**
      * Component classes
      */
-    this.classList = new index$1.ClassList(['mg-icon']);
+    this.classList = new ClassList(['mg-icon']);
     /**
      * getIcon
      *
@@ -761,10 +1070,10 @@ const MgIllustratedMessage = class {
   componentDidLoad() {
     const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
     const imageTags = ['img', 'svg'];
-    if (!index$1.isTagName(this.element.querySelector('[slot="title"]'), headingTags)) {
+    if (!isTagName(this.element.querySelector('[slot="title"]'), headingTags)) {
       throw new Error(`<mg-illustrated-message> Slotted title must be a heading: ${headingTags.join(', ')}`);
     }
-    else if (!index$1.isTagName(this.element.querySelector('[slot="illustration"]'), imageTags)) {
+    else if (!isTagName(this.element.querySelector('[slot="illustration"]'), imageTags)) {
       throw new Error(`<mg-illustrated-message> Slotted illustration must be an image: ${imageTags.join(', ')}`);
     }
   }
@@ -962,7 +1271,7 @@ const MgInputCheckbox = class {
     /**
      * Component classes
      */
-    this.classList = new index$1.ClassList(['mg-input--checkbox']);
+    this.classList = new ClassList(['mg-input--checkbox']);
     /**
      * Formated value for display
      */
@@ -1054,7 +1363,7 @@ const MgInputCheckbox = class {
    */
   componentWillLoad() {
     // Get locales
-    this.messages = index$1.initLocales(this.element).messages;
+    this.messages = initLocales(this.element).messages;
     // Validate
     this.validateValue(this.value);
     // Check validity when component is ready
@@ -1163,7 +1472,7 @@ const MgInputDate = class {
     /**
      * Component classes
      */
-    this.classList = new index$1.ClassList(['mg-input--date']);
+    this.classList = new ClassList(['mg-input--date']);
     /**
      * Handle input event
      */
@@ -1287,7 +1596,7 @@ const MgInputDate = class {
    */
   componentWillLoad() {
     // Get locales
-    const locales = index$1.initLocales(this.element);
+    const locales = initLocales(this.element);
     this.locale = locales.locale;
     this.messages = locales.messages;
     // Validate
@@ -1381,7 +1690,7 @@ const MgInputNumeric = class {
     /**
      * Component classes
      */
-    this.classList = new index$1.ClassList(['mg-input--numeric']);
+    this.classList = new ClassList(['mg-input--numeric']);
     /**
      * Define if input has focus
      */
@@ -1577,7 +1886,7 @@ const MgInputNumeric = class {
    */
   componentWillLoad() {
     // Get locales
-    const locales = index$1.initLocales(this.element);
+    const locales = initLocales(this.element);
     this.locale = locales.locale;
     this.messages = locales.messages;
     // Validate
@@ -1648,7 +1957,7 @@ const MgInputPassword = class {
     /**
      * Component classes
      */
-    this.classList = new index$1.ClassList(['mg-input--password']);
+    this.classList = new ClassList(['mg-input--password']);
     /**
      * Handle input event
      */
@@ -1713,7 +2022,7 @@ const MgInputPassword = class {
    */
   componentWillLoad() {
     // Get locales
-    this.messages = index$1.initLocales(this.element).messages;
+    this.messages = initLocales(this.element).messages;
     // Check validity when component is ready
     // return a promise to process action only in the FIRST render().
     // https://stenciljs.com/docs/component-lifecycle#componentwillload
@@ -1787,7 +2096,7 @@ const MgInputRadio = class {
     /**
      * Component classes
      */
-    this.classList = new index$1.ClassList(['mg-input--radio']);
+    this.classList = new ClassList(['mg-input--radio']);
     /**
      * Handle input event
      *
@@ -1851,7 +2160,7 @@ const MgInputRadio = class {
       throw new Error('<mg-input-radio> prop "items" require at least 2 items.');
     }
     // String array
-    else if (index$1.allItemsAreString(newValue)) {
+    else if (allItemsAreString(newValue)) {
       this.options = newValue.map(item => ({ title: item, value: item, disabled: this.disabled }));
     }
     // Object array
@@ -1881,7 +2190,7 @@ const MgInputRadio = class {
    */
   componentWillLoad() {
     // Get locales
-    this.messages = index$1.initLocales(this.element).messages;
+    this.messages = initLocales(this.element).messages;
     // Validate
     this.validateItems(this.items);
     // Check validity when component is ready
@@ -1984,7 +2293,7 @@ const MgInputSelect = class {
     /**
      * Component classes
      */
-    this.classList = new index$1.ClassList(['mg-input--select']);
+    this.classList = new ClassList(['mg-input--select']);
     /**
      * Handle input event
      */
@@ -1994,7 +2303,7 @@ const MgInputSelect = class {
         this.checkError();
       }
       if (this.input.value !== '') {
-        this.value = index$1.allItemsAreString(this.items) ? this.input.value : this.items.find(item => item.title === this.input.value).value;
+        this.value = allItemsAreString(this.items) ? this.input.value : this.items.find(item => item.title === this.input.value).value;
       }
       else {
         this.value = null;
@@ -2032,7 +2341,7 @@ const MgInputSelect = class {
   }
   handleValue(newValue) {
     if (newValue !== null) {
-      this.readonlyValue = index$1.allItemsAreString(this.items) ? this.input.value : this.items.find(item => item.value === newValue).title;
+      this.readonlyValue = allItemsAreString(this.items) ? this.input.value : this.items.find(item => item.value === newValue).title;
     }
     else {
       this.readonlyValue = null;
@@ -2041,7 +2350,7 @@ const MgInputSelect = class {
   }
   validateItems(newValue) {
     // String array
-    if (index$1.allItemsAreString(newValue)) {
+    if (allItemsAreString(newValue)) {
       this.valueExist = newValue.includes(this.value);
       this.options = newValue.map((item) => ({ title: item, value: item }));
     }
@@ -2081,7 +2390,7 @@ const MgInputSelect = class {
    */
   componentWillLoad() {
     // Get locales
-    this.messages = index$1.initLocales(this.element).messages;
+    this.messages = initLocales(this.element).messages;
     // Validate
     this.validateItems(this.items);
     // Set default placeholder
@@ -2168,7 +2477,7 @@ const MgInputText = class {
     /**
      * Component classes
      */
-    this.classList = new index$1.ClassList(['mg-input--text']);
+    this.classList = new ClassList(['mg-input--text']);
     /**
      * Handle input event
      *
@@ -2188,7 +2497,7 @@ const MgInputText = class {
      */
     this.handleFocus = () => {
       this.classList.add(this.classFocus);
-      this.classList = new index$1.ClassList(this.classList.classes);
+      this.classList = new ClassList(this.classList.classes);
     };
     /**
      * Handle blur event
@@ -2198,7 +2507,7 @@ const MgInputText = class {
     this.handleBlur = () => {
       // Manage focus
       this.classList.delete(this.classFocus);
-      this.classList = new index$1.ClassList(this.classList.classes);
+      this.classList = new ClassList(this.classList.classes);
       // Display Error
       this.displayError();
     };
@@ -2302,7 +2611,7 @@ const MgInputText = class {
    */
   componentWillLoad() {
     // Get locales
-    this.messages = index$1.initLocales(this.element).messages;
+    this.messages = initLocales(this.element).messages;
     this.characterLeftId = `${this.identifier}-character-left`;
     // Validate
     this.validateIcon(this.icon);
@@ -2394,7 +2703,7 @@ const MgInputTextarea = class {
     /**
      * Component classes
      */
-    this.classList = new index$1.ClassList(['mg-input--textarea']);
+    this.classList = new ClassList(['mg-input--textarea']);
     /**
      * Handle input event
      */
@@ -2410,7 +2719,7 @@ const MgInputTextarea = class {
      */
     this.handleFocus = () => {
       this.classList.add(this.classFocus);
-      this.classList = new index$1.ClassList(this.classList.classes);
+      this.classList = new ClassList(this.classList.classes);
     };
     /**
      * Handle blur event
@@ -2418,7 +2727,7 @@ const MgInputTextarea = class {
     this.handleBlur = () => {
       // Manage focus
       this.classList.delete(this.classFocus);
-      this.classList = new index$1.ClassList(this.classList.classes);
+      this.classList = new ClassList(this.classList.classes);
       // Display Error
       this.displayError();
     };
@@ -2501,7 +2810,7 @@ const MgInputTextarea = class {
    */
   componentWillLoad() {
     // Get locales
-    this.messages = index$1.initLocales(this.element).messages;
+    this.messages = initLocales(this.element).messages;
     this.characterLeftId = `${this.identifier}-character-left`;
     // Validate
     this.validateDisplayCharacterLeft(this.displayCharacterLeft);
@@ -2635,7 +2944,7 @@ const MgInputToggle = class {
     /**
      * Component classes
      */
-    this.classList = new index$1.ClassList(['mg-input--toggle']);
+    this.classList = new ClassList(['mg-input--toggle']);
     /**
      * Checked internal value
      */
@@ -2676,7 +2985,7 @@ const MgInputToggle = class {
       throw new Error('<mg-input-toggle> prop "items" require 2 items.');
     }
     // String array
-    else if (index$1.allItemsAreString(newValue)) {
+    else if (allItemsAreString(newValue)) {
       this.options = newValue.map(item => ({ title: item, value: item }));
     }
     // Object array
@@ -2809,7 +3118,7 @@ const MgMessage = class {
      * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
      * If not set, it will be created.
      */
-    this.identifier = index$1.createID('mg-message');
+    this.identifier = createID('mg-message');
     /**
      * Message variant
      */
@@ -2826,7 +3135,7 @@ const MgMessage = class {
     /**
      * Component classes
      */
-    this.classList = new index$1.ClassList(['mg-message']);
+    this.classList = new ClassList(['mg-message']);
     /**
      * Define if component is using actions slot
      */
@@ -2907,7 +3216,7 @@ const MgMessage = class {
    */
   componentWillLoad() {
     // Get locales
-    this.messages = index$1.initLocales(this.element).messages;
+    this.messages = initLocales(this.element).messages;
     // Validate
     this.validateVariant(this.variant);
     // Check if close button is an can be activated
@@ -2938,6 +3247,174 @@ const MgMessage = class {
 };
 MgMessage.style = mgMessageCss;
 
+const mgModalCss = ".mg-modal{display:flex;justify-content:center;align-items:center;position:fixed;top:0;right:0;bottom:0;left:0;z-index:2000;padding:2rem 0;background-color:hsla(var(--color-light), 85%)}.mg-modal__dialog{display:flex;position:relative;flex-direction:column;align-self:center;row-gap:3rem;padding:1.5rem 2.5rem;width:60rem;height:fit-content;max-width:100%;max-height:100%;box-sizing:border-box;background-color:hsl(var(--color-light));box-shadow:var(--box-shadow);border-radius:var(--mg-modal-border-radius)}.mg-modal__header{margin-bottom:0.5rem}.mg-modal__title{margin:0;font-family:var(--font-family-heading);font-size:var(--mg-modal-title-font-size);font-weight:600}.mg-modal__close-button{float:right;height:var(--mg-modal-title-font-size);margin-top:calc((var(--default-size) - var(--mg-modal-title-font-size) * var(--line-height)) / 2 * -1);margin-right:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2 * -1)}.mg-modal__content{overflow-y:auto}.mg-modal__content::slotted(*){font-size:var(--mg-modal-content-font-size)}.mg-modal.mg-modal--hide{display:none}";
+
+const MgModal = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.componentShow = index.createEvent(this, "component-show", 7);
+    this.componentHide = index.createEvent(this, "component-hide", 7);
+    // Classes
+    this.classHide = 'mg-modal--hide';
+    // IDs
+    this.closeButtonId = '';
+    this.titleId = '';
+    /**
+     * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+     * If not set, it will be created.
+     */
+    this.identifier = createID('mg-modal');
+    /**
+     * Define if modal has a cross button
+     */
+    this.closeButton = false;
+    /**
+     * Define if modal is hidden
+     */
+    this.hide = false;
+    /**
+     * Define if component is using actions slot
+     */
+    this.hasActions = false;
+    /**
+     * Define if component is using content slot
+     */
+    this.hasContent = false;
+    /**
+     * Component classes
+     */
+    this.classList = new ClassList(['mg-modal']);
+    this.setFocus = () => {
+      // Get all focusable elements
+      this.modalFocusableElements = Array.from(this.element.querySelectorAll(focusableElements)).reduce((acc, focusableElement) => {
+        acc.push(focusableElement.shadowRoot !== null ? focusableElement.shadowRoot.querySelector(focusableElements) || focusableElement : focusableElement);
+        return acc;
+      }, []);
+      // When close button is enabled it's the first focusable element.
+      if (this.closeButton) {
+        this.modalFocusableElements.unshift(this.element.shadowRoot.querySelector(`.mg-modal__close-button mg-button`));
+      }
+      // It at least one
+      if (this.modalFocusableElements.length >= 1) {
+        // Set focus on first element
+        this.modalFocusableElements[0].focus();
+        // Add event listener on last element
+        const lastFocusableElement = this.modalFocusableElements[this.modalFocusableElements.length - 1];
+        lastFocusableElement.addEventListener('keydown', event => {
+          if (event.key === 'Tab' && !event.shiftKey) {
+            event.preventDefault();
+            this.modalFocusableElements[0].focus();
+          }
+        });
+        // Add event listener on first element (case shift + tab)
+        this.modalFocusableElements[0].addEventListener('keydown', event => {
+          if (event.key === 'Tab' && event.shiftKey) {
+            event.preventDefault();
+            lastFocusableElement.focus();
+          }
+        });
+      }
+    };
+    /*************
+     * Handlers *
+     *************/
+    /**
+     * Handle close button
+     *
+     * @returns {void}
+     */
+    this.handleClose = () => {
+      this.hide = true;
+    };
+  }
+  validateModalTitle(newValue) {
+    if (typeof newValue !== 'string' || newValue.trim() === '') {
+      throw new Error('<mg-modal> prop "modalTitle" is required.');
+    }
+  }
+  validateHide(newValue) {
+    if (newValue) {
+      this.componentHide.emit();
+      this.classList.add(this.classHide);
+      document.body.style.overflow = this.bodyOverflow;
+    }
+    else {
+      this.componentShow.emit();
+      this.classList.delete(this.classHide);
+      document.body.style.overflow = 'hidden';
+    }
+  }
+  /**
+   * Handle 'escape' key down
+   *
+   * @param {KeyboardEvent} event keydown event
+   * @returns {void}
+   */
+  handleKeyDown(event) {
+    // we can use 'Escape button" when this not a blocking modal, induced by closeButton value.
+    if (this.closeButton && event.key === 'Escape') {
+      this.hide = true;
+    }
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Check if component props are well configured on init
+   *
+   * @returns {void}
+   */
+  componentWillLoad() {
+    // Store body overflow
+    this.bodyOverflow = document.body.style.overflow;
+    // Get locales
+    this.messages = initLocales(this.element).messages;
+    // Validate
+    this.hasActions = this.element.querySelector('[slot="actions"]') !== null;
+    this.hasContent = this.element.querySelector('[slot="content"]') !== null;
+    if (this.closeButton) {
+      this.closeButtonId = `${this.identifier}-close-button`;
+    }
+    this.titleId = `${this.identifier}-title`;
+    this.validateModalTitle(this.modalTitle);
+    this.validateHide(this.hide);
+  }
+  /**
+   * Add observer on component to set focus when displayed
+   *
+   * @returns {void}
+   */
+  componentDidLoad() {
+    new MutationObserver(mutationList => {
+      /*
+        TODO find a way to cover this callback
+      */
+      /* istanbul ignore next */
+      if (mutationList.some(mutation => mutation.attributeName === 'aria-hidden' && mutation.target.ariaHidden === null)) {
+        this.setFocus();
+      }
+    }).observe(this.element.shadowRoot.getElementById(this.identifier), { attributes: true });
+    // Set focus if display on load
+    if (!this.hide) {
+      this.setFocus();
+    }
+  }
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render() {
+    return (index.h("section", { role: "dialog", id: this.identifier, class: this.classList.join(), tabindex: "-1", "aria-labelledby": this.titleId, "aria-modal": "true", "aria-hidden": this.hide }, index.h("article", { class: "mg-modal__dialog" }, index.h("header", { class: "mg-modal__header" }, this.closeButton && (index.h("span", { class: "mg-modal__close-button" }, index.h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, index.h("mg-icon", { icon: "cross" })))), index.h("h1", { class: "mg-modal__title", id: this.titleId }, this.modalTitle)), this.hasContent && (index.h("article", { class: "mg-modal__content" }, index.h("slot", { name: "content" }))), this.hasActions && (index.h("footer", { class: "mg-modal__footer" }, index.h("slot", { name: "actions" }))))));
+  }
+  get element() { return index.getElement(this); }
+  static get watchers() { return {
+    "modalTitle": ["validateModalTitle"],
+    "hide": ["validateHide"]
+  }; }
+};
+MgModal.style = mgModalCss;
+
 var NavigationAction;
 (function (NavigationAction) {
   NavigationAction["NEXT"] = "next";
@@ -2975,7 +3452,7 @@ const MgPagination = class {
      * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
      * If not set, it will be created.
      */
-    this.identifier = index$1.createID('mg-pagination');
+    this.identifier = createID('mg-pagination');
     /**
      * Component total pages
      */
@@ -3041,7 +3518,7 @@ const MgPagination = class {
    */
   componentWillLoad() {
     // Get locales
-    this.messages = index$1.initLocales(this.element).messages;
+    this.messages = initLocales(this.element).messages;
     // Validate
     this.validateTotalPages(this.totalPages);
     this.validateCurrentPage(this.currentPage);
@@ -3069,7 +3546,7 @@ const MgPagination = class {
 };
 MgPagination.style = mgPaginationCss;
 
-const mgPanelCss = ".mg-panel{background-color:hsl(var(--mg-panel-background));border-radius:var(--mg-panel-border-radius);box-shadow:var(--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-left--full{flex:1 1 auto}.mg-panel__header-right{padding-left:0.3rem;flex:1 auto}.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__collapse-button-content{--font-size:1.4rem;--mg-button-font-weight:600}.mg-panel__content{padding:var(--mg-panel-content-padding)}.mg-panel ::slotted([slot=header-right]){display:flex;flex-wrap:wrap;gap:1rem;margin-left:auto}";
+const mgPanelCss = ".mg-panel{background-color:hsl(var(--mg-panel-background));border-radius:var(--mg-panel-border-radius);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}.mg-panel__header-left mg-input-text{flex-grow:1;margin-left:0.3rem}.mg-panel__header-left mg-button+mg-button:not([slot=append-input]){margin-left:0.3rem}.mg-panel__header-left.mg-panel__header-left--full{flex:1 1 auto}.mg-panel__collapse-button-content{--font-size:1.4rem;--mg-button-font-weight:600}.mg-panel__content{padding:var(--mg-panel-content-padding)}.mg-panel ::slotted([slot=header-right]){display:flex;flex-wrap:wrap;gap:1rem;margin-left:auto}";
 
 const MgPanel = class {
   constructor(hostRef) {
@@ -3080,7 +3557,7 @@ const MgPanel = class {
      * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
      * If not set, it will be created.
      */
-    this.identifier = index$1.createID('mg-panel');
+    this.identifier = createID('mg-panel');
     /**
      * Panel is opened
      */
@@ -3092,7 +3569,7 @@ const MgPanel = class {
     /**
      * Component classes
      */
-    this.classList = new index$1.ClassList(['mg-panel']);
+    this.classList = new ClassList(['mg-panel']);
     /**
      * Title is in edition mode
      */
@@ -3209,7 +3686,7 @@ const MgPanel = class {
    */
   componentWillLoad() {
     // Get locales
-    this.messages = index$1.initLocales(this.element).messages;
+    this.messages = initLocales(this.element).messages;
     // Validate
     this.validatetitlePattern(this.titlePattern);
     this.validatePanelTitle(this.panelTitle);
@@ -5040,7 +5517,7 @@ var createPopper = /*#__PURE__*/popperGenerator({
   defaultModifiers: defaultModifiers
 }); // eslint-disable-next-line import/no-unused-modules
 
-const mgPopoverCss = "mg-popover{display:contents}mg-popover::slotted(*){display:inline-block}.mg-popover{display:none;padding:1.5rem;z-index:9999;border-radius:0.5rem;background-color:hsl(var(--mg-popover-background-color));box-shadow:var(--box-shadow);color:hsl(var(--mg-popover-font-color))}.mg-popover[data-show]{display:block}.mg-popover mg-button{float:right;margin-right:calc(0rem - (var(--default-size) - var(--mg-icon-regular-size)) / 2);margin-top:calc(0rem - (var(--default-size) - var(--mg-popover-title-font-size) * var(--line-height)) / 2);margin-left:3rem}.mg-popover__arrow,.mg-popover__arrow::before{position:absolute;width:2rem;height:2rem;z-index:-1;background:inherit}.mg-popover__arrow{visibility:hidden}.mg-popover__arrow::before{visibility:visible;content:\"\";transform:rotate(45deg)}.mg-popover[data-popper-placement^=top]>.mg-popover__arrow{bottom:-6px}.mg-popover[data-popper-placement^=bottom]>.mg-popover__arrow{top:-6px}.mg-popover[data-popper-placement^=left]>.mg-popover__arrow{right:-6px}.mg-popover[data-popper-placement^=right]>.mg-popover__arrow{left:-6px}.mg-popover__title ::slotted([slot=title]){margin:0 0 1rem !important;font-size:var(--mg-popover-title-font-size) !important;font-weight:600}";
+const mgPopoverCss = "mg-popover{display:contents}mg-popover::slotted(*){display:inline-block}.mg-popover{display:none;padding:1.5rem;z-index:1000;border-radius:0.5rem;background-color:hsl(var(--mg-popover-background-color));box-shadow:var(--box-shadow);color:hsl(var(--mg-popover-font-color))}.mg-popover[data-show]{display:block}.mg-popover mg-button{float:right;margin-right:calc(0rem - (var(--default-size) - var(--mg-icon-regular-size)) / 2);margin-top:calc(0rem - (var(--default-size) - var(--mg-popover-title-font-size) * var(--line-height)) / 2);margin-left:3rem}.mg-popover__arrow,.mg-popover__arrow::before{position:absolute;width:2rem;height:2rem;z-index:-1;background:inherit}.mg-popover__arrow{visibility:hidden}.mg-popover__arrow::before{visibility:visible;content:\"\";transform:rotate(45deg)}.mg-popover[data-popper-placement^=top]>.mg-popover__arrow{bottom:-6px}.mg-popover[data-popper-placement^=bottom]>.mg-popover__arrow{top:-6px}.mg-popover[data-popper-placement^=left]>.mg-popover__arrow{right:-6px}.mg-popover[data-popper-placement^=right]>.mg-popover__arrow{left:-6px}.mg-popover__title ::slotted([slot=title]){margin:0 0 1rem !important;font-size:var(--mg-popover-title-font-size) !important;font-weight:600}";
 
 const MgPopover = class {
   constructor(hostRef) {
@@ -5051,7 +5528,7 @@ const MgPopover = class {
      * Sets an `id` attribute.
      * Needed by the input for accessibility `aria-decribedby`.
      */
-    this.identifier = index$1.createID('mg-popover');
+    this.identifier = createID('mg-popover');
     /**
      * Popover placement
      */
@@ -5138,7 +5615,7 @@ const MgPopover = class {
    */
   componentWillLoad() {
     // Get locales
-    this.messages = index$1.initLocales(this.element).messages;
+    this.messages = initLocales(this.element).messages;
   }
   /**
    * Check if component props are well configured on init
@@ -5148,7 +5625,7 @@ const MgPopover = class {
   componentDidLoad() {
     const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
     const slottedTitleElement = this.element.querySelector('[slot="title"]');
-    if (slottedTitleElement && !index$1.isTagName(slottedTitleElement, headingTags)) {
+    if (slottedTitleElement && !isTagName(slottedTitleElement, headingTags)) {
       throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}`);
     }
     // Set close button id
@@ -5165,6 +5642,7 @@ const MgPopover = class {
     // Create popperjs popover
     this.popper = createPopper(interactiveElement, this.popover, {
       placement: this.placement,
+      strategy: 'fixed',
       modifiers: [
         {
           name: 'offset',
@@ -5192,7 +5670,7 @@ const MgPopover = class {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (index.h(index.Host, null, index.h("slot", null), index.h("div", { id: this.identifier, class: "mg-popover" }, !this.disabled && this.closeButton && (index.h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, index.h("mg-icon", { icon: "cross" }))), index.h("div", { class: "mg-popover__title" }, index.h("slot", { name: "title" })), index.h("slot", { name: "content" }), index.h("div", { class: "mg-popover__arrow", "data-popper-arrow": true }))));
+    return (index.h(index.Host, null, index.h("slot", null), index.h("div", { id: this.identifier, class: "mg-popover" }, this.closeButton && (index.h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, index.h("mg-icon", { icon: "cross" }))), index.h("div", { class: "mg-popover__title" }, index.h("slot", { name: "title" })), index.h("slot", { name: "content" }), index.h("div", { class: "mg-popover__arrow", "data-popper-arrow": true }))));
   }
   get element() { return index.getElement(this); }
   static get watchers() { return {
@@ -5236,7 +5714,7 @@ const MgTabs = class {
      * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
      * If not set, it will be created.
      */
-    this.identifier = index$1.createID('mg-tabs');
+    this.identifier = createID('mg-tabs');
     /**
      * Define tabs size
      */
@@ -5253,7 +5731,7 @@ const MgTabs = class {
     /**
      * Component classes
      */
-    this.classList = new index$1.ClassList(['mg-tabs']);
+    this.classList = new ClassList(['mg-tabs']);
     /**
      * Method to set active tab
      *
@@ -5358,7 +5836,7 @@ const MgTabs = class {
   }
   validateItems(newValue) {
     // String array
-    if (index$1.allItemsAreString(newValue)) {
+    if (allItemsAreString(newValue)) {
       this.tabs = newValue.map(item => ({ label: item, status: Status.VISIBLE }));
     }
     // Object array
@@ -5441,7 +5919,7 @@ const MgTag = class {
     /**
      * Component classes
      */
-    this.classList = new index$1.ClassList(['mg-tag']);
+    this.classList = new ClassList(['mg-tag']);
   }
   validateVariant(newValue, oldValue) {
     if (!variants.includes(newValue)) {
@@ -5487,9 +5965,6 @@ const MgTag = class {
 };
 MgTag.style = mgTagCss;
 
-/**
- * List of all possibles placements
- */
 var Guard;
 (function (Guard) {
   Guard["FOCUS"] = "focus";
@@ -5497,7 +5972,7 @@ var Guard;
   Guard["HOVER_TOOLTIPED_ELEMENT"] = "hoverTooltipedGuard";
 })(Guard || (Guard = {}));
 
-const mgTooltipCss = ":host{display:inline-block}.mg-tooltip{display:none;padding:0.5rem 0.8rem;z-index:9999;border-radius:var(--mg-tooltip-border-radius);background-color:hsl(var(--mg-tooltip-background-color));color:hsl(var(--mg-tooltip-font-color));text-align:start}.mg-tooltip[data-show]{display:block}.mg-tooltip .mg-tooltip__arrow,.mg-tooltip .mg-tooltip__arrow::before{position:absolute;width:0.8rem;height:0.8rem;z-index:9999;background:inherit}.mg-tooltip .mg-tooltip__arrow{visibility:hidden}.mg-tooltip .mg-tooltip__arrow::before{visibility:visible;content:\"\";transform:rotate(45deg)}.mg-tooltip[data-popper-placement^=top]>.mg-tooltip__arrow{bottom:-4px}.mg-tooltip[data-popper-placement^=bottom]>.mg-tooltip__arrow{top:-4px}.mg-tooltip[data-popper-placement^=left]>.mg-tooltip__arrow{right:-4px}.mg-tooltip[data-popper-placement^=right]>.mg-tooltip__arrow{left:-4px}";
+const mgTooltipCss = ":host{display:inline-block}.mg-tooltip{display:none;padding:0.5rem 0.8rem;z-index:1000;border-radius:var(--mg-tooltip-border-radius);background-color:hsl(var(--mg-tooltip-background-color));color:hsl(var(--mg-tooltip-font-color));text-align:start}.mg-tooltip[data-show]{display:block}.mg-tooltip .mg-tooltip__arrow,.mg-tooltip .mg-tooltip__arrow::before{position:absolute;width:0.8rem;height:0.8rem;z-index:9999;background:inherit}.mg-tooltip .mg-tooltip__arrow{visibility:hidden}.mg-tooltip .mg-tooltip__arrow::before{visibility:visible;content:\"\";transform:rotate(45deg)}.mg-tooltip[data-popper-placement^=top]>.mg-tooltip__arrow{bottom:-4px}.mg-tooltip[data-popper-placement^=bottom]>.mg-tooltip__arrow{top:-4px}.mg-tooltip[data-popper-placement^=left]>.mg-tooltip__arrow{right:-4px}.mg-tooltip[data-popper-placement^=right]>.mg-tooltip__arrow{left:-4px}";
 
 const MgTooltip = class {
   constructor(hostRef) {
@@ -5506,7 +5981,7 @@ const MgTooltip = class {
      * Sets an `id` attribute.
      * Needed by the input for accessibility `aria-decribedby`.
      */
-    this.identifier = index$1.createID('mg-tooltip');
+    this.identifier = createID('mg-tooltip');
     /**
      * Tooltip placement
      */
@@ -5634,6 +6109,7 @@ const MgTooltip = class {
     // Create popperjs tooltip
     this.popper = createPopper(tooltipedElement, this.tooltip, {
       placement: this.placement,
+      strategy: 'fixed',
       modifiers: [
         {
           name: 'offset',
@@ -5691,8 +6167,10 @@ MgTooltip.style = mgTooltipCss;
 
 exports.mg_badge = MgBadge;
 exports.mg_button = MgButton;
+exports.mg_card = MgCard;
 exports.mg_character_left = MgCharacterLeft;
 exports.mg_details = MgDetails;
+exports.mg_divider = MgDivider;
 exports.mg_form = MgForm;
 exports.mg_icon = MgIcon;
 exports.mg_illustrated_message = MgIllustratedMessage;
@@ -5707,6 +6185,7 @@ exports.mg_input_textarea = MgInputTextarea;
 exports.mg_input_title = MgInputTitle;
 exports.mg_input_toggle = MgInputToggle;
 exports.mg_message = MgMessage;
+exports.mg_modal = MgModal;
 exports.mg_pagination = MgPagination;
 exports.mg_panel = MgPanel;
 exports.mg_popover = MgPopover;