@mgdis/mg-components 5.0.0 → 5.1.0

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

@@ -1,11 +1,99 @@
 import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-aad0184c.js';
-import { C as ClassList, i as initLocales, c as createID, a as isTagName, b as allItemsAreString } from './index-7efedd97.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 {
@@ -85,7 +173,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) {
@@ -96,10 +184,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.
@@ -174,6 +267,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
@@ -206,6 +310,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() === '') {
@@ -222,17 +327,190 @@ const MgButton = class {
    * @returns {HTMLElement} html element
    */
   render() {
-    return (h(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 }, h("div", { class: this.classList.join(), id: this.identifier }, this.loading && h("mg-icon", { icon: "loader", spin: true }), h("div", { class: "mg-button__content" }, h("slot", null)))));
+    return (h(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 }, h("div", { class: this.classList.join(), id: this.identifier }, this.loading && h("mg-icon", { icon: "loader", spin: true }), h("div", { class: "mg-button__content" }, h("slot", null)))));
   }
   get element() { return getElement(this); }
   static get watchers() { return {
     "variant": ["validateVariant"],
+    "fullWidth": ["validateFullWidth"],
     "disabled": ["disabledHandler"],
     "loading": ["loadingHandler"]
   }; }
 };
 MgButton.style = mgButtonCss;
 
+const mgCardCss = ".mg-card{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) {
+    registerInstance(this, hostRef);
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render() {
+    return (h("div", { class: "mg-card" }, h("slot", null)));
+  }
+};
+MgCard.style = mgCardCss;
+
+const errors$1 = {
+	required: "This field is required.",
+	date: {
+		badInput: "The date format must be <span aria-hidden=\"true\">mm/dd/yyyy</span><span class=\"sr-only\">m m / d d / y y y y</span> and the date must be greater than {min}",
+		min: "The date cannot be earlier than {min}",
+		max: "The date cannot be later than {max}",
+		minMax: "The date must be between {min} and {max}"
+	},
+	numeric: {
+		min: "The value cannot be less than {min}",
+		max: "The value cannot be greater than {max}",
+		minMax: "The value must be between {min} et {max}"
+	}
+};
+const nbCharLeft$1 = "{counter} characters left.";
+const input$1 = {
+	select: {
+		placeholder: "Select a value"
+	}
+};
+const form$1 = {
+	required: "Fields with a <strong class=\"is-asterisk\">*</strong> are required",
+	allRequired: "All fields are required"
+};
+const message$1 = {
+	closeButton: "Close message"
+};
+const modal$1 = {
+	closeButton: "Close modal"
+};
+const pagination$1 = {
+	label: "Pagination",
+	page: "page",
+	pages: "pages",
+	nextPage: "Next page",
+	previousPage: "Previous page",
+	selectPage: "Select the page to display."
+};
+const panel$1 = {
+	editLabel: "Edit section title."
+};
+const 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 {
@@ -275,12 +553,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) {
     registerInstance(this, hostRef);
     this.expandedChange = createEvent(this, "expanded-change", 7);
+    /**
+     * Hide summary element
+     */
+    this.hideSummary = false;
     /**
      * Define if details are diplayed
      */
@@ -295,7 +577,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.');
     }
   }
@@ -320,7 +602,7 @@ const MgDetails = class {
    * @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' }), " ", 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' }), 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"],
@@ -330,6 +612,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) {
+    registerInstance(this, hostRef);
+    /**************
+     * Decorators *
+     **************/
+    /**
+     * Define component size
+     */
+    this.size = 'regular';
+  }
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render() {
+    return (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 {
@@ -2934,6 +3243,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) {
+    registerInstance(this, hostRef);
+    this.componentShow = createEvent(this, "component-show", 7);
+    this.componentHide = 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 (h("section", { role: "dialog", id: this.identifier, class: this.classList.join(), tabindex: "-1", "aria-labelledby": this.titleId, "aria-modal": "true", "aria-hidden": this.hide }, h("article", { class: "mg-modal__dialog" }, h("header", { class: "mg-modal__header" }, this.closeButton && (h("span", { class: "mg-modal__close-button" }, h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" })))), h("h1", { class: "mg-modal__title", id: this.titleId }, this.modalTitle)), this.hasContent && (h("article", { class: "mg-modal__content" }, h("slot", { name: "content" }))), this.hasActions && (h("footer", { class: "mg-modal__footer" }, h("slot", { name: "actions" }))))));
+  }
+  get element() { return getElement(this); }
+  static get watchers() { return {
+    "modalTitle": ["validateModalTitle"],
+    "hide": ["validateHide"]
+  }; }
+};
+MgModal.style = mgModalCss;
+
 var NavigationAction;
 (function (NavigationAction) {
   NavigationAction["NEXT"] = "next";
@@ -3065,7 +3542,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) {
@@ -5036,7 +5513,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) {
@@ -5161,6 +5638,7 @@ const MgPopover = class {
     // Create popperjs popover
     this.popper = createPopper(interactiveElement, this.popover, {
       placement: this.placement,
+      strategy: 'fixed',
       modifiers: [
         {
           name: 'offset',
@@ -5188,7 +5666,7 @@ const MgPopover = class {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h(Host, null, h("slot", null), h("div", { id: this.identifier, class: "mg-popover" }, !this.disabled && this.closeButton && (h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { icon: "cross" }))), h("div", { class: "mg-popover__title" }, h("slot", { name: "title" })), h("slot", { name: "content" }), h("div", { class: "mg-popover__arrow", "data-popper-arrow": true }))));
+    return (h(Host, null, h("slot", null), h("div", { id: this.identifier, class: "mg-popover" }, this.closeButton && (h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { icon: "cross" }))), h("div", { class: "mg-popover__title" }, h("slot", { name: "title" })), h("slot", { name: "content" }), h("div", { class: "mg-popover__arrow", "data-popper-arrow": true }))));
   }
   get element() { return getElement(this); }
   static get watchers() { return {
@@ -5483,9 +5961,6 @@ const MgTag = class {
 };
 MgTag.style = mgTagCss;
 
-/**
- * List of all possibles placements
- */
 var Guard;
 (function (Guard) {
   Guard["FOCUS"] = "focus";
@@ -5493,7 +5968,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) {
@@ -5630,6 +6105,7 @@ const MgTooltip = class {
     // Create popperjs tooltip
     this.popper = createPopper(tooltipedElement, this.tooltip, {
       placement: this.placement,
+      strategy: 'fixed',
       modifiers: [
         {
           name: 'offset',
@@ -5685,4 +6161,4 @@ const MgTooltip = class {
 };
 MgTooltip.style = mgTooltipCss;
 
-export { MgBadge as mg_badge, MgButton as mg_button, MgCharacterLeft as mg_character_left, MgDetails as mg_details, MgForm as mg_form, MgIcon as mg_icon, MgIllustratedMessage as mg_illustrated_message, MgInputCheckbox as mg_input_checkbox, MgInputDate as mg_input_date, MgInputNumeric as mg_input_numeric, MgInputPassword as mg_input_password, MgInputRadio as mg_input_radio, MgInputSelect as mg_input_select, MgInputText as mg_input_text, MgInputTextarea as mg_input_textarea, MgInputTitle as mg_input_title, MgInputToggle as mg_input_toggle, MgMessage as mg_message, MgPagination as mg_pagination, MgPanel as mg_panel, MgPopover as mg_popover, MgTabs as mg_tabs, MgTag as mg_tag, MgTooltip as mg_tooltip };
+export { MgBadge as mg_badge, MgButton as mg_button, MgCard as mg_card, MgCharacterLeft as mg_character_left, MgDetails as mg_details, MgDivider as mg_divider, MgForm as mg_form, MgIcon as mg_icon, MgIllustratedMessage as mg_illustrated_message, MgInputCheckbox as mg_input_checkbox, MgInputDate as mg_input_date, MgInputNumeric as mg_input_numeric, MgInputPassword as mg_input_password, MgInputRadio as mg_input_radio, MgInputSelect as mg_input_select, MgInputText as mg_input_text, MgInputTextarea as mg_input_textarea, MgInputTitle as mg_input_title, MgInputToggle as mg_input_toggle, MgMessage as mg_message, MgModal as mg_modal, MgPagination as mg_pagination, MgPanel as mg_panel, MgPopover as mg_popover, MgTabs as mg_tabs, MgTag as mg_tag, MgTooltip as mg_tooltip };