@mgdis/mg-components 5.4.0 → 5.5.0

package/dist/collection/components/molecules/mg-skip-links/mg-skip-links.js

@@ -0,0 +1,77 @@
+import { h } from '@stencil/core';
+import { initLocales } from '../../../locales';
+export class MgSkipLinks {
+  constructor() {
+    this.links = undefined;
+  }
+  validateLinks(links) {
+    if (links === undefined ||
+      links.length === 0 ||
+      links.some(link => link.href === undefined || !link.href.startsWith('#') || link.label === undefined || link.label.trim() === '')) {
+      throw new Error(`<mg-skip-links> prop "links": Cannot be empty and each link must contains an href starting with a "#" and a non empty label attributes.`);
+    }
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Check if props are well configured on init
+   *
+   * @returns {void}
+   */
+  componentWillLoad() {
+    this.validateLinks(this.links);
+    this.messages = initLocales(this.element).messages;
+  }
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render() {
+    return (h("nav", { class: "mg-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, h("ul", { class: "mg-skip-links__list" }, this.links.map(link => (h("li", null, h("a", { class: "mg-skip-links__link", href: link.href }, link.label)))))));
+  }
+  static get is() { return "mg-skip-links"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["mg-skip-links.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["mg-skip-links.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "links": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "SkipLink[]",
+          "resolved": "SkipLink[]",
+          "references": {
+            "SkipLink": {
+              "location": "import",
+              "path": "./mg-skip-links.conf"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Skip links"
+        }
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "links",
+        "methodName": "validateLinks"
+      }];
+  }
+}

package/dist/collection/components/molecules/mg-tabs/mg-tabs.js

@@ -13,31 +13,11 @@ export class MgTabs {
     /************
      * Internal *
      ************/
+    // classes
     this.tabPanel = 'panel';
-    this.startIndex = 1;
     this.buttonTabBaseClass = 'mg-tabs__navigation-button';
-    /**
-     * 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-tabs');
-    /**
-     * Define tabs size
-     */
-    this.size = 'regular';
-    /**
-     * Active tab number
-     * default: first is 1
-     */
-    this.activeTab = 1;
-    /**
-     * Component tabs
-     */
-    this.tabs = [];
-    /**
-     * Component classes
-     */
-    this.classList = new ClassList(['mg-tabs']);
+    // variables
+    this.startIndex = 1;
     /**
      * Method to set active tab
      *
@@ -128,6 +108,13 @@ export class MgTabs {
         throw new Error('<mg-tabs> Must have slots counts equal to tabs count.');
       }
     };
+    this.identifier = createID('mg-tabs');
+    this.label = undefined;
+    this.size = 'regular';
+    this.items = undefined;
+    this.activeTab = 1;
+    this.tabs = [];
+    this.classList = new ClassList(['mg-tabs']);
   }
   validateLabel(newValue) {
     if (typeof newValue !== 'string' || newValue.trim() === '') {

package/dist/collection/locales/en/messages.json

@@ -40,6 +40,9 @@
   "panel": {
     "editLabel": "Edit section title."
   },
+  "skipLinks": {
+    "navLabel": "Quick access"
+  },
   "general": {
     "confirm": "Confirm",
     "cancel": "Cancel",

package/dist/collection/locales/fr/messages.json

@@ -40,6 +40,9 @@
   "panel": {
     "editLabel": "Modifier le titre de la section."
   },
+  "skipLinks": {
+    "navLabel": "Accès rapide"
+  },
   "general": {
     "confirm": "Valider",
     "cancel": "Annuler",

package/dist/components/index.d.ts

@@ -25,6 +25,7 @@ export { MgModal as MgModal } from '../types/components/molecules/mg-modal/mg-mo
 export { MgPagination as MgPagination } from '../types/components/molecules/mg-pagination/mg-pagination';
 export { MgPanel as MgPanel } from '../types/components/molecules/mg-panel/mg-panel';
 export { MgPopover as MgPopover } from '../types/components/molecules/mg-popover/mg-popover';
+export { MgSkipLinks as MgSkipLinks } from '../types/components/molecules/mg-skip-links/mg-skip-links';
 export { MgTabs as MgTabs } from '../types/components/molecules/mg-tabs/mg-tabs';
 export { MgTag as MgTag } from '../types/components/atoms/mg-tag/mg-tag';
 export { MgTooltip as MgTooltip } from '../types/components/atoms/mg-tooltip/mg-tooltip';

package/dist/components/index.js

@@ -25,6 +25,7 @@ export { MgModal, defineCustomElement as defineCustomElementMgModal } from './mg
 export { MgPagination, defineCustomElement as defineCustomElementMgPagination } from './mg-pagination.js';
 export { MgPanel, defineCustomElement as defineCustomElementMgPanel } from './mg-panel.js';
 export { MgPopover, defineCustomElement as defineCustomElementMgPopover } from './mg-popover.js';
+export { MgSkipLinks, defineCustomElement as defineCustomElementMgSkipLinks } from './mg-skip-links.js';
 export { MgTabs, defineCustomElement as defineCustomElementMgTabs } from './mg-tabs.js';
 export { MgTag, defineCustomElement as defineCustomElementMgTag } from './mg-tag.js';
 export { MgTooltip, defineCustomElement as defineCustomElementMgTooltip } from './mg-tooltip.js';

package/dist/components/index2.js

@@ -39,6 +39,9 @@ const pagination$1 = {
 const panel$1 = {
 	editLabel: "Edit section title."
 };
+const skipLinks$1 = {
+	navLabel: "Quick access"
+};
 const general$1 = {
 	confirm: "Confirm",
 	cancel: "Cancel",
@@ -55,6 +58,7 @@ const en = {
 	modal: modal$1,
 	pagination: pagination$1,
 	panel: panel$1,
+	skipLinks: skipLinks$1,
 	general: general$1
 };
 
@@ -99,6 +103,9 @@ const pagination = {
 const panel = {
 	editLabel: "Modifier le titre de la section."
 };
+const skipLinks = {
+	navLabel: "Accès rapide"
+};
 const general = {
 	confirm: "Valider",
 	cancel: "Annuler",
@@ -115,6 +122,7 @@ const fr = {
 	modal: modal,
 	pagination: pagination,
 	panel: panel,
+	skipLinks: skipLinks,
 	general: general
 };
 

package/dist/components/mg-badge2.js

@@ -18,13 +18,10 @@ const MgBadge = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      ************/
     // Classes
     this.classOutline = `mg-badge--outline`;
-    /**
-     * Define button variant
-     */
-    this.variant = variants[0]; // info
-    /**
-     * Component classes
-     */
+    this.value = undefined;
+    this.label = undefined;
+    this.variant = variants[0];
+    this.outline = undefined;
     this.classList = new ClassList(['mg-badge']);
   }
   validateValue(newValue) {

package/dist/components/mg-button2.js

@@ -5,9 +5,9 @@ import { d as defineCustomElement$1 } from './mg-icon2.js';
 /**
  * List of all possibles variants
  */
-const variants = ['primary', 'secondary', 'danger', 'danger-alt', 'info', 'flat', 'success'];
+const variants = ['primary', 'secondary', 'danger', 'danger-alt', 'info', 'flat', 'success', 'link'];
 
-const mgButtonCss = ":host{display:inline-block;vertical-align:middle;max-width:100%}:host(:focus-visible){outline:0}:host(:focus-visible) .mg-button{outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width:0.2rem}:host(:hover) .mg-button--flat:not(.mg-button--disabled),:host(:focus) .mg-button--flat:not(.mg-button--disabled),:host(:active) .mg-button--flat:not(.mg-button--disabled){background:hsla(var(--color-dark), 0.1)}:host([full-width]){display:block}:host([disabled]),:host([aria-disabled=true]){pointer-events:none}.mg-button.mg-button--primary{border-color:hsl(var(--mg-button-primary-border-color, var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--mg-button-primary-font-color));background:linear-gradient(to bottom, hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l)), hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--primary:not(.mg-button--disabled),:host(:focus) .mg-button--primary:not(.mg-button--disabled),:host(:active) .mg-button--primary:not(.mg-button--disabled){background:hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l))}.mg-button.mg-button--secondary{border-color:hsl(var(--mg-button-secondary-border-color, var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--mg-button-secondary-font-color));background:linear-gradient(to bottom, hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l)), hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--secondary:not(.mg-button--disabled),:host(:focus) .mg-button--secondary:not(.mg-button--disabled),:host(:active) .mg-button--secondary:not(.mg-button--disabled){background:hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l))}.mg-button.mg-button--danger{border-color:hsl(var(--mg-button-danger-border-color, var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-neutral));background:linear-gradient(to bottom, hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l)), hsl(var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--danger:not(.mg-button--disabled),:host(:focus) .mg-button--danger:not(.mg-button--disabled),:host(:active) .mg-button--danger:not(.mg-button--disabled){background:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l))}.mg-button.mg-button--danger-alt{border-color:hsl(var(--mg-button-danger-alt-border-color, var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-danger));background:linear-gradient(to bottom, hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l)), hsl(var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--danger-alt:not(.mg-button--disabled),:host(:focus) .mg-button--danger-alt:not(.mg-button--disabled),:host(:active) .mg-button--danger-alt:not(.mg-button--disabled){background:hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l))}.mg-button.mg-button--info{border-color:hsl(var(--mg-button-info-border-color, var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-neutral));background:linear-gradient(to bottom, hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l)), hsl(var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--info:not(.mg-button--disabled),:host(:focus) .mg-button--info:not(.mg-button--disabled),:host(:active) .mg-button--info:not(.mg-button--disabled){background:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l))}.mg-button.mg-button--success{border-color:hsl(var(--mg-button-success-border-color, var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-dark));background:linear-gradient(to bottom, hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l)), hsl(var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--success:not(.mg-button--disabled),:host(:focus) .mg-button--success:not(.mg-button--disabled),:host(:active) .mg-button--success:not(.mg-button--disabled){background:hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l))}.mg-button{position:relative;display:inline-flex;align-items:center;column-gap:0.6rem;padding:calc((var(--default-size) - 0.2rem - var(--font-size) * var(--line-height)) / 2) 1.1rem;min-height:var(--default-size);box-sizing:border-box;border-top-right-radius:var(--mg-button-border-radius-top-right, var(--mg-button-border-radius));border-top-left-radius:var(--mg-button-border-radius-top-left, var(--mg-button-border-radius));border-bottom-right-radius:var(--mg-button-border-radius-bottom-right, var(--mg-button-border-radius));border-bottom-left-radius:var(--mg-button-border-radius-bottom-left, var(--mg-button-border-radius));cursor:pointer;background-image:none;border-top-width:var(--mg-button-border-top-width, 0.1rem);border-right-width:var(--mg-button-border-right-width, 0.1rem);border-bottom-width:var(--mg-button-border-bottom-width, 0.1rem);border-left-width:var(--mg-button-border-left-width, 0.1rem);border-style:solid;text-decoration:none;font-family:inherit;font-weight:var(--mg-button-font-weight, normal);text-align:left;font-size:var(--font-size);touch-action:manipulation}.mg-button.mg-button--disabled{opacity:var(--mg-button-disabled-opacity);cursor:default}.mg-button.mg-button--icon{padding:0;justify-content:center;width:var(--default-size);height:var(--default-size);border-top-right-radius:var(--mg-button-border-radius-top-right, var(--mg-button-icon-border-radius));border-top-left-radius:var(--mg-button-border-radius-top-left, var(--mg-button-icon-border-radius));border-bottom-right-radius:var(--mg-button-border-radius-bottom-right, var(--mg-button-icon-border-radius));border-bottom-left-radius:var(--mg-button-border-radius-bottom-left, var(--mg-button-icon-border-radius));font-size:var(--font-size);line-height:var(--font-size)}.mg-button.mg-button--flat{background:none;border:none}.mg-button.mg-button--full-width{display:flex;justify-content:center}.mg-button.mg-button--loading>mg-icon:first-of-type{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%)}.mg-button.mg-button--loading .mg-button__content{opacity:0}.mg-button mg-icon:only-child,.mg-button ::slotted(mg-icon){display:inline-flex;flex-shrink:0;line-height:1;margin:auto 0}.mg-button slot,.mg-button ::slotted(*:not(mg-icon)){text-decoration:none;font-family:inherit;font-weight:var(--mg-button-font-weight, normal);text-align:left;font-size:var(--font-size);display:flex;align-items:center;column-gap:0.6rem}";
+const mgButtonCss = ":host{display:inline-block;vertical-align:middle;max-width:100%}:host(:focus-visible){outline:0}:host(:focus-visible) .mg-button{outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width:0.2rem}:host(:hover) .mg-button--flat:not(.mg-button--disabled),:host(:focus) .mg-button--flat:not(.mg-button--disabled),:host(:active) .mg-button--flat:not(.mg-button--disabled){background:hsla(var(--color-dark), 0.1)}:host([full-width]){display:block}:host([disabled]),:host([aria-disabled=true]){pointer-events:none}.mg-button.mg-button--primary{border-color:hsl(var(--mg-button-primary-border-color, var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--mg-button-primary-font-color));background:linear-gradient(to bottom, hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l)), hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--primary:not(.mg-button--disabled),:host(:focus) .mg-button--primary:not(.mg-button--disabled),:host(:active) .mg-button--primary:not(.mg-button--disabled){background:hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l))}.mg-button.mg-button--secondary{border-color:hsl(var(--mg-button-secondary-border-color, var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--mg-button-secondary-font-color));background:linear-gradient(to bottom, hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l)), hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--secondary:not(.mg-button--disabled),:host(:focus) .mg-button--secondary:not(.mg-button--disabled),:host(:active) .mg-button--secondary:not(.mg-button--disabled){background:hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l))}.mg-button.mg-button--danger{border-color:hsl(var(--mg-button-danger-border-color, var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-neutral));background:linear-gradient(to bottom, hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l)), hsl(var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--danger:not(.mg-button--disabled),:host(:focus) .mg-button--danger:not(.mg-button--disabled),:host(:active) .mg-button--danger:not(.mg-button--disabled){background:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l))}.mg-button.mg-button--danger-alt{border-color:hsl(var(--mg-button-danger-alt-border-color, var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-danger));background:linear-gradient(to bottom, hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l)), hsl(var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--danger-alt:not(.mg-button--disabled),:host(:focus) .mg-button--danger-alt:not(.mg-button--disabled),:host(:active) .mg-button--danger-alt:not(.mg-button--disabled){background:hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l))}.mg-button.mg-button--info{border-color:hsl(var(--mg-button-info-border-color, var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-neutral));background:linear-gradient(to bottom, hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l)), hsl(var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--info:not(.mg-button--disabled),:host(:focus) .mg-button--info:not(.mg-button--disabled),:host(:active) .mg-button--info:not(.mg-button--disabled){background:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l))}.mg-button.mg-button--success{border-color:hsl(var(--mg-button-success-border-color, var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-dark));background:linear-gradient(to bottom, hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l)), hsl(var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--success:not(.mg-button--disabled),:host(:focus) .mg-button--success:not(.mg-button--disabled),:host(:active) .mg-button--success:not(.mg-button--disabled){background:hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l))}.mg-button{position:relative;display:inline-flex;align-items:center;column-gap:0.6rem;padding:calc((var(--default-size) - 0.2rem - var(--font-size) * var(--line-height)) / 2) 1.1rem;min-height:var(--default-size);box-sizing:border-box;border-top-right-radius:var(--mg-button-border-radius-top-right, var(--mg-button-border-radius));border-top-left-radius:var(--mg-button-border-radius-top-left, var(--mg-button-border-radius));border-bottom-right-radius:var(--mg-button-border-radius-bottom-right, var(--mg-button-border-radius));border-bottom-left-radius:var(--mg-button-border-radius-bottom-left, var(--mg-button-border-radius));cursor:pointer;background-image:none;border-top-width:var(--mg-button-border-top-width, 0.1rem);border-right-width:var(--mg-button-border-right-width, 0.1rem);border-bottom-width:var(--mg-button-border-bottom-width, 0.1rem);border-left-width:var(--mg-button-border-left-width, 0.1rem);border-style:solid;text-decoration:none;font-family:inherit;font-weight:var(--mg-button-font-weight, normal);text-align:left;font-size:var(--font-size);touch-action:manipulation}.mg-button.mg-button--disabled{opacity:var(--mg-button-disabled-opacity);cursor:default}.mg-button.mg-button--icon{padding:0;justify-content:center;width:var(--default-size);height:var(--default-size);border-top-right-radius:var(--mg-button-border-radius-top-right, var(--mg-button-icon-border-radius));border-top-left-radius:var(--mg-button-border-radius-top-left, var(--mg-button-icon-border-radius));border-bottom-right-radius:var(--mg-button-border-radius-bottom-right, var(--mg-button-icon-border-radius));border-bottom-left-radius:var(--mg-button-border-radius-bottom-left, var(--mg-button-icon-border-radius));font-size:var(--font-size);line-height:var(--font-size)}.mg-button.mg-button--flat{background:none;border:none}.mg-button.mg-button--link{padding:unset;min-height:unset;background:unset;border:unset;text-decoration:underline}.mg-button.mg-button--link slot{font-weight:600}.mg-button.mg-button--link:hover{text-decoration:none}.mg-button.mg-button--full-width{display:flex;justify-content:center}.mg-button.mg-button--loading>mg-icon:first-of-type{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%)}.mg-button.mg-button--loading .mg-button__content{opacity:0}.mg-button mg-icon:only-child,.mg-button ::slotted(mg-icon){display:inline-flex;flex-shrink:0;line-height:1;margin:auto 0}.mg-button slot,.mg-button ::slotted(*:not(mg-icon)){text-decoration:none;font-family:inherit;font-weight:var(--mg-button-font-weight, normal);text-align:left;font-size:var(--font-size);display:flex;align-items:center;column-gap:0.6rem}";
 
 const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -21,34 +21,6 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.classDisabled = 'mg-button--disabled';
     this.classLoading = 'mg-button--loading';
     this.classFullWidth = 'mg-button--full-width';
-    /**
-     * Define button variant
-     */
-    this.variant = variants[0]; // Primary
-    /**
-     * Set button to full-width
-     */
-    this.fullWidth = false;
-    /**
-     * Define if button is round.
-     * Used for icon button.
-     */
-    this.isIcon = false;
-    /**
-     * Option to set input disable on click, in order to prevent multi-click.
-     * Parent component have to remove the attribute 'disabled' when the process ends.
-     */
-    this.disableOnClick = false;
-    /**
-     * Define if button is loading, default to false.
-     * Trigger when button is clicked or key-up ['enter', 'space], then value change to true.
-     * It's required to reset to false when action/promise in parent is done to stop the loading state
-     */
-    this.loading = false;
-    /**
-     * Component classes
-     */
-    this.classList = new ClassList(['mg-button']);
     /**
      * Trigger actions onClick event
      *
@@ -91,6 +63,17 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));
       }
     };
+    this.variant = variants[0];
+    this.identifier = undefined;
+    this.label = undefined;
+    this.type = undefined;
+    this.fullWidth = false;
+    this.form = undefined;
+    this.disabled = undefined;
+    this.isIcon = false;
+    this.disableOnClick = false;
+    this.loading = false;
+    this.classList = new ClassList(['mg-button']);
   }
   validateVariant(newValue, oldValue) {
     if (!variants.includes(newValue)) {

package/dist/components/mg-card.js

@@ -1,40 +1,4 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-
-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$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-  }
-  /*************
-   * Lifecycle *
-   *************/
-  /**
-   * Render
-   *
-   * @returns {HTMLElement} HTML Element
-   */
-  render() {
-    return (h("div", { class: "mg-card" }, h("slot", null)));
-  }
-  static get style() { return mgCardCss; }
-}, [1, "mg-card"]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["mg-card"];
-  components.forEach(tagName => { switch (tagName) {
-    case "mg-card":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, MgCard$1);
-      }
-      break;
-  } });
-}
-defineCustomElement$1();
+import { M as MgCard$1, d as defineCustomElement$1 } from './mg-card2.js';
 
 const MgCard = MgCard$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/mg-card2.js

@@ -0,0 +1,39 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const mgCardCss = ".mg-card{position:relative;width:100%;padding:var(--mg-card-padding);overflow:var(--mg-card-overflow);box-sizing:border-box;z-index:inherit;background:var(--mg-card-background);border:var(--mg-card-border);border-radius:var(--mg-card-border-radius);box-shadow:var(--mg-card-box-shadow)}";
+
+const MgCard = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render() {
+    return (h("div", { class: "mg-card" }, h("slot", null)));
+  }
+  static get style() { return mgCardCss; }
+}, [1, "mg-card"]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["mg-card"];
+  components.forEach(tagName => { switch (tagName) {
+    case "mg-card":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, MgCard);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { MgCard as M, defineCustomElement as d };

package/dist/components/mg-character-left2.js

@@ -7,10 +7,9 @@ const MgCharacterLeft = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   constructor() {
     super();
     this.__registerHost();
-    /**
-     * Sets the characters to count
-     */
+    this.identifier = undefined;
     this.characters = '';
+    this.maxlength = undefined;
   }
   validateMaxlength(newValue) {
     if (typeof newValue !== 'number') {

package/dist/components/mg-details.js

@@ -9,14 +9,6 @@ const MgDetails$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.__registerHost();
     this.__attachShadow();
     this.expandedChange = createEvent(this, "expanded-change", 7);
-    /**
-     * Hide summary element
-     */
-    this.hideSummary = false;
-    /**
-     * Define if details are diplayed
-     */
-    this.expanded = false;
     /**
      * Handle details toggle
      *
@@ -25,6 +17,10 @@ const MgDetails$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.handleToggle = () => {
       this.expanded = this.details.open;
     };
+    this.toggleClosed = undefined;
+    this.toggleOpened = undefined;
+    this.hideSummary = false;
+    this.expanded = false;
   }
   validateTitles(newValue) {
     if (newValue === undefined || newValue.trim() === '') {

package/dist/components/mg-divider.js

@@ -7,12 +7,6 @@ const MgDivider$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     super();
     this.__registerHost();
     this.__attachShadow();
-    /**************
-     * Decorators *
-     **************/
-    /**
-     * Define component size
-     */
     this.size = 'regular';
   }
   /**

package/dist/components/mg-form.js

@@ -13,28 +13,6 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.formSubmit = createEvent(this, "form-submit", 7);
     // Classes
     this.classAllRequired = 'mg-form--all-required';
-    /**
-     * 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-form');
-    /**
-     * Input name
-     * If not set the value equals the identifier
-     */
-    this.name = this.identifier;
-    /**
-     * Define if form is readonly
-     */
-    this.readonly = false;
-    /**
-     * Define if form is disabled
-     */
-    this.disabled = false;
-    /**
-     * Component classes
-     */
-    this.classList = new ClassList(['mg-form']);
     /**
      * Define required message based on mg-inputs required elements
      * Also
@@ -104,6 +82,14 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
           input.addEventListener('input-valid', this.checkValidity);
       });
     };
+    this.identifier = createID('mg-form');
+    this.name = this.identifier;
+    this.readonly = false;
+    this.disabled = false;
+    this.valid = undefined;
+    this.invalid = undefined;
+    this.classList = new ClassList(['mg-form']);
+    this.requiredMessage = undefined;
   }
   handleAttributeChange() {
     this.setMgInputs();

package/dist/components/mg-icon2.js

@@ -189,24 +189,17 @@ const MgIcon = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     super();
     this.__registerHost();
     this.__attachShadow();
-    /**
-     * Define icon size
-     */
-    this.size = 'regular';
-    /**
-     * Make the icon spin
-     */
-    this.spin = false;
-    /**
-     * Component classes
-     */
-    this.classList = new ClassList(['mg-icon']);
     /**
      * getIcon
      *
      * @returns {HTMLElement} icon html
      */
     this.getIcon = () => icons[this.icon]();
+    this.icon = undefined;
+    this.size = 'regular';
+    this.variant = undefined;
+    this.spin = false;
+    this.classList = new ClassList(['mg-icon']);
   }
   validateIcon(newValue, oldValue) {
     if (!Object.keys(icons).includes(newValue)) {

package/dist/components/mg-illustrated-message.js

@@ -1,20 +1,14 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { i as isTagName } from './components.utils.js';
 
-const mgIllustratedMessageCss = ".mg-illustrated-message{display:flex;flex-direction:column;justify-content:center;gap:3em 7rem;margin:auto;padding:var(--mg-illustrated-message-padding-vertical) 1.5rem;max-width:47.5rem;box-sizing:border-box;text-align:center}.mg-illustrated-message.mg-illustrated-message--horizontal{flex-direction:row;flex-wrap:wrap;align-items:center;max-width:unset}.mg-illustrated-message.mg-illustrated-message--horizontal .mg-illustrated-message__slots,.mg-illustrated-message.mg-illustrated-message--horizontal .mg-illustrated-message__illustration{max-width:47.5rem}.mg-illustrated-message__illustration{max-height:33.5rem}.mg-illustrated-message__illustration ::slotted([slot=illustration]){width:auto;height:auto;max-width:100%;max-height:33.5rem}.mg-illustrated-message__illustration.mg-illustrated-message__illustration--small{max-height:6rem}.mg-illustrated-message__illustration.mg-illustrated-message__illustration--small ::slotted([slot=illustration]){max-height:6rem}.mg-illustrated-message__title ::slotted([slot=title]){margin:0;font-size:2rem !important;font-family:var(--font-family) !important;font-weight:400}.mg-illustrated-message__details ::slotted([slot=details]){margin:2rem 0 0}";
+const mgIllustratedMessageCss = ".mg-illustrated-message{display:flex;flex-direction:column;justify-content:center;gap:3em 7rem;margin:auto;padding:var(--mg-illustrated-message-padding-vertical) 1.5rem;max-width:47.5rem;box-sizing:border-box;text-align:center}.mg-illustrated-message.mg-illustrated-message--horizontal{flex-direction:row;flex-wrap:wrap;align-items:center;max-width:unset}.mg-illustrated-message.mg-illustrated-message--horizontal .mg-illustrated-message__slots,.mg-illustrated-message.mg-illustrated-message--horizontal .mg-illustrated-message__illustration{max-width:47.5rem}.mg-illustrated-message__illustration{max-height:18.4rem}.mg-illustrated-message__illustration ::slotted([slot=illustration]){width:auto;height:auto;max-width:100%;max-height:18.4rem}.mg-illustrated-message__illustration.mg-illustrated-message__illustration--small{max-height:6rem}.mg-illustrated-message__illustration.mg-illustrated-message__illustration--small ::slotted([slot=illustration]){max-height:6rem}.mg-illustrated-message__title ::slotted([slot=title]){margin:0;font-size:2rem !important;font-family:var(--font-family) !important;font-weight:400}.mg-illustrated-message__details ::slotted([slot=details]){margin:2rem 0 0}";
 
 const MgIllustratedMessage$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
-    /**
-     * Define illustration size
-     */
     this.size = 'regular';
-    /**
-     * Define component orientation
-     */
     this.direction = 'vertical';
   }
   /*************

package/dist/components/mg-input-checkbox.js

@@ -29,39 +29,6 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     this.inputs = [];
     // hasDisplayedError (triggered by blur event)
     this.hasDisplayedError = false;
-    /**
-     * Input name
-     * If not set the value equals the identifier
-     */
-    this.name = this.identifier;
-    /**
-     * Define if label is visible
-     */
-    this.labelHide = false;
-    /**
-     * Define if inputs are display verticaly
-     */
-    this.inputVerticalList = false;
-    /**
-     * Define if input is required
-     */
-    this.required = false;
-    /**
-     * Define if input is readonly
-     */
-    this.readonly = false;
-    /**
-     * Define if input is disabled
-     */
-    this.disabled = false;
-    /**
-     * Component classes
-     */
-    this.classList = new ClassList(['mg-input--checkbox']);
-    /**
-     * Formated value for display
-     */
-    this.checkboxItems = [];
     /**
      * Handle input event
      *
@@ -111,6 +78,23 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
         this.errorMessage = this.messages.errors.required;
       }
     };
+    this.value = undefined;
+    this.identifier = undefined;
+    this.name = this.identifier;
+    this.label = undefined;
+    this.labelOnTop = undefined;
+    this.labelHide = false;
+    this.inputVerticalList = false;
+    this.required = false;
+    this.readonly = false;
+    this.disabled = false;
+    this.tooltip = undefined;
+    this.helpText = undefined;
+    this.valid = undefined;
+    this.invalid = undefined;
+    this.classList = new ClassList(['mg-input--checkbox']);
+    this.errorMessage = undefined;
+    this.checkboxItems = [];
   }
   validateValue(newValue) {
     if (newValue && newValue.every(item => isCheckboxItem(item))) {