@mgdis/mg-components 3.1.0 → 4.0.0

package/dist/collection/collection-manifest.json

@@ -16,14 +16,17 @@
     "./components/molecules/inputs/mg-input-text/mg-input-text.js",
     "./components/molecules/inputs/mg-input-textarea/mg-input-textarea.js",
     "./components/molecules/inputs/mg-input-toggle/mg-input-toggle.js",
+    "./components/molecules/mg-form/mg-form.js",
     "./components/molecules/mg-message/mg-message.js",
+    "./components/molecules/mg-modal/mg-modal.js",
     "./components/molecules/mg-pagination/mg-pagination.js",
+    "./components/molecules/mg-panel/mg-panel.js",
     "./components/molecules/mg-popover/mg-popover.js",
     "./components/molecules/mg-tabs/mg-tabs.js"
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.14.1",
+    "version": "2.17.1",
     "typescriptVersion": "4.5.4"
   },
   "collections": [],

package/dist/collection/components/atoms/mg-badge/{mg-badge.stories.js → doc/mg-badge.stories.js}

@@ -1,5 +1,5 @@
 import { h } from '@stencil/core';
-import { variants } from './mg-badge.conf';
+import { variants } from '../mg-badge.conf';
 export default {
   component: 'mg-badge',
   title: 'Atoms/mg-badge',
@@ -7,6 +7,9 @@ export default {
     variant: {
       options: variants,
       control: { type: 'select' },
+      table: {
+        defaultValue: { summary: variants[0] },
+      },
     },
     value: {
       control: { type: 'text' },

package/dist/collection/components/atoms/mg-badge/mg-badge.conf.js

@@ -1,4 +1,4 @@
 /**
  * List of all possibles variants
  */
-export const variants = ['primary', 'secondary', 'success', 'warning', 'danger', 'info'];
+export const variants = ['info', 'primary', 'secondary', 'success', 'warning', 'danger'];

package/dist/collection/components/atoms/mg-badge/mg-badge.css

@@ -28,8 +28,6 @@
   min-width: var(--mg-badge-size);
   box-sizing: border-box;
   border: 0.1rem solid;
-  border-radius: 50%;
-  /* IE FIX */
   border-radius: calc(var(--mg-badge-size) / 2);
   font-size: var(--mg-badge-font-size);
   font-weight: 600;

package/dist/collection/components/atoms/mg-badge/mg-badge.js

@@ -3,40 +3,56 @@ import { variants } from './mg-badge.conf';
 import { ClassList } from '../../../utils/components.utils';
 export class MgBadge {
   constructor() {
+    /************
+     * Internal *
+     ************/
+    // classes
+    this.classOutline = `mg-badge--outline`;
     /**
      * Define button variant
      */
-    this.variant = variants[variants.length - 1];
+    this.variant = variants[0]; // info
     /**
      * Component classes
      */
     this.classList = new ClassList(['mg-badge']);
   }
-  valideValue(newValue) {
+  validateValue(newValue) {
     if (`${newValue}`.match(/^(\d+|[?*!a-z])$/i) === null) {
       throw new Error('<mg-badge> prop "value" must be interger or ponctuation character.');
     }
   }
-  validateVariant(newValue) {
+  validateVariant(newValue, oldValue) {
     if (!variants.includes(newValue)) {
       throw new Error(`<mg-badge> prop "variant" must be one of : ${variants.join(', ')}.`);
     }
-    this.classList.add(`mg-badge--${this.variant}`);
+    else {
+      if (oldValue !== undefined) {
+        this.classList.delete(`mg-badge--${oldValue}`);
+      }
+      this.classList.add(`mg-badge--${newValue}`);
+    }
   }
   validateOutline(newValue) {
     if (newValue)
-      this.classList.add(`mg-badge--outline`);
+      this.classList.add(this.classOutline);
+    else
+      this.classList.delete(this.classOutline);
   }
   /**
    * Check if props are well configured on init
+   *
+   * @returns {void}
    */
   componentWillLoad() {
-    this.valideValue(this.value);
+    this.validateValue(this.value);
     this.validateVariant(this.variant);
     this.validateOutline(this.outline);
   }
   /**
    * Render
+   *
+   * @returns {HTMLElement} HTML Element
    */
   render() {
     return (h("span", { class: this.classList.join() },
@@ -105,14 +121,14 @@ export class MgBadge {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "Define button variant"
       },
       "attribute": "variant",
       "reflect": false,
-      "defaultValue": "variants[variants.length - 1]"
+      "defaultValue": "variants[0]"
     },
     "outline": {
       "type": "boolean",
@@ -123,7 +139,7 @@ export class MgBadge {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "Define if button is using outline style"
@@ -137,7 +153,7 @@ export class MgBadge {
   }; }
   static get watchers() { return [{
       "propName": "value",
-      "methodName": "valideValue"
+      "methodName": "validateValue"
     }, {
       "propName": "variant",
       "methodName": "validateVariant"

package/dist/collection/components/atoms/mg-button/{mg-button.stories.js → doc/mg-button.stories.js}

@@ -1,6 +1,6 @@
 import { h } from '@stencil/core';
-import { variants } from './mg-button.conf';
-import { icons } from '../mg-icon/mg-icon.conf';
+import { variants } from '../mg-button.conf';
+import { icons } from '../../mg-icon/mg-icon.conf';
 export default {
   component: 'mg-button',
   title: 'Atoms/mg-button',
@@ -8,6 +8,9 @@ export default {
     variant: {
       options: variants,
       control: { type: 'select' },
+      table: {
+        defaultValue: { summary: variants[0] },
+      },
     },
   },
 };
@@ -31,6 +34,8 @@ MgButton.args = {
   disabled: false,
   disableOnClick: false,
   isIcon: false,
+  expanded: false,
+  controls: undefined,
 };
 export const IsIcon = Template.bind({});
 IsIcon.args = Object.assign(Object.assign({}, MgButton.args), { isIcon: true, slot: h("mg-icon", { icon: Object.keys(icons)[0] }) });

package/dist/collection/components/atoms/mg-button/mg-button.conf.js

@@ -1,4 +1,4 @@
 /**
  * List of all possibles variants
  */
-export const variants = ['primary', 'secondary', 'danger', 'danger-alt', 'info', 'flat'];
+export const variants = ['primary', 'secondary', 'danger', 'danger-alt', 'info', 'flat', 'success'];

package/dist/collection/components/atoms/mg-button/mg-button.css

@@ -5,6 +5,7 @@
   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;
@@ -14,113 +15,109 @@
   border-bottom-left-radius: var(--mg-button-border-radius-bottom-left, var(--mg-button-border-radius));
   cursor: pointer;
   background-image: none;
-  border: 0.1rem solid;
+  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;
   font-family: inherit;
   text-decoration: none;
   font-weight: normal;
   text-align: left;
   touch-action: manipulation;
 }
-.mg-button[disabled], .mg-button[aria-disabled], .mg-button.disabled {
+.mg-button[disabled], .mg-button[aria-disabled=true], .mg-button.disabled {
   opacity: var(--mg-button-disabled-opacity);
-  cursor: not-allowed;
+  cursor: default;
 }
 .mg-button.mg-button--icon {
   padding: 0;
   justify-content: center;
   width: var(--default-size);
   height: var(--default-size);
-  border-radius: var(--mg-button-icon-border-radius);
+  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--primary {
-  border-color: hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l));
-  /* IE FIX */
-  border-color: hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - 10%));
+  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: hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l));
-  /* IE FIX */
-  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) - 10%)));
+  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%)));
 }
-.mg-button.mg-button--primary:hover:not([disabled], [aria-disabled], .disabled), .mg-button.mg-button--primary:focus:not([disabled], [aria-disabled], .disabled), .mg-button.mg-button--primary:active:not([disabled], [aria-disabled], .disabled) {
+.mg-button.mg-button--primary:hover:not([disabled], [aria-disabled=true], .disabled), .mg-button.mg-button--primary:focus:not([disabled], [aria-disabled=true], .disabled), .mg-button.mg-button--primary:active:not([disabled], [aria-disabled=true], .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-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l));
-  /* IE FIX */
-  border-color: hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - 10%));
+  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: hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l));
-  /* IE FIX */
-  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) - 10%)));
+  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%)));
 }
-.mg-button.mg-button--secondary:hover:not([disabled], [aria-disabled], .disabled), .mg-button.mg-button--secondary:focus:not([disabled], [aria-disabled], .disabled), .mg-button.mg-button--secondary:active:not([disabled], [aria-disabled], .disabled) {
+.mg-button.mg-button--secondary:hover:not([disabled], [aria-disabled=true], .disabled), .mg-button.mg-button--secondary:focus:not([disabled], [aria-disabled=true], .disabled), .mg-button.mg-button--secondary:active:not([disabled], [aria-disabled=true], .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(--color-danger-h), var(--color-danger-s), var(--color-danger-l));
-  /* IE FIX */
-  border-color: hsl(var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - 10%));
+  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: hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l));
-  /* IE FIX */
-  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) - 10%)));
+  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%)));
 }
-.mg-button.mg-button--danger:hover:not([disabled], [aria-disabled], .disabled), .mg-button.mg-button--danger:focus:not([disabled], [aria-disabled], .disabled), .mg-button.mg-button--danger:active:not([disabled], [aria-disabled], .disabled) {
+.mg-button.mg-button--danger:hover:not([disabled], [aria-disabled=true], .disabled), .mg-button.mg-button--danger:focus:not([disabled], [aria-disabled=true], .disabled), .mg-button.mg-button--danger:active:not([disabled], [aria-disabled=true], .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(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l));
-  /* IE FIX */
-  border-color: hsl(var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - 10%));
+  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: hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l));
-  /* IE FIX */
-  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) - 10%)));
+  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%)));
 }
-.mg-button.mg-button--danger-alt:hover:not([disabled], [aria-disabled], .disabled), .mg-button.mg-button--danger-alt:focus:not([disabled], [aria-disabled], .disabled), .mg-button.mg-button--danger-alt:active:not([disabled], [aria-disabled], .disabled) {
+.mg-button.mg-button--danger-alt:hover:not([disabled], [aria-disabled=true], .disabled), .mg-button.mg-button--danger-alt:focus:not([disabled], [aria-disabled=true], .disabled), .mg-button.mg-button--danger-alt:active:not([disabled], [aria-disabled=true], .disabled) {
   background: hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l));
 }
 .mg-button.mg-button--info {
-  border-color: hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l));
-  /* IE FIX */
-  border-color: hsl(var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - 10%));
+  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: hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l));
-  /* IE FIX */
-  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) - 10%)));
+  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%)));
 }
-.mg-button.mg-button--info:hover:not([disabled], [aria-disabled], .disabled), .mg-button.mg-button--info:focus:not([disabled], [aria-disabled], .disabled), .mg-button.mg-button--info:active:not([disabled], [aria-disabled], .disabled) {
+.mg-button.mg-button--info:hover:not([disabled], [aria-disabled=true], .disabled), .mg-button.mg-button--info:focus:not([disabled], [aria-disabled=true], .disabled), .mg-button.mg-button--info:active:not([disabled], [aria-disabled=true], .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%)));
+}
+.mg-button.mg-button--success:hover:not([disabled], [aria-disabled=true], .disabled), .mg-button.mg-button--success:focus:not([disabled], [aria-disabled=true], .disabled), .mg-button.mg-button--success:active:not([disabled], [aria-disabled=true], .disabled) {
+  background: hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l));
+}
 .mg-button.mg-button--flat {
   background: none;
   border: none;
 }
-.mg-button.mg-button--flat:hover:not([disabled], [aria-disabled], .disabled), .mg-button.mg-button--flat:focus:not([disabled], [aria-disabled], .disabled), .mg-button.mg-button--flat:active:not([disabled], [aria-disabled], .disabled) {
+.mg-button.mg-button--flat:hover:not([disabled], [aria-disabled=true], .disabled), .mg-button.mg-button--flat:focus:not([disabled], [aria-disabled=true], .disabled), .mg-button.mg-button--flat:active:not([disabled], [aria-disabled=true], .disabled) {
   background: hsla(var(--color-dark), 0.1);
 }
+.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__content {
-  display: flex;
-  align-items: baseline;
-  column-gap: 0.6rem;
-}
-.mg-button--loading > mg-icon {
+.mg-button.mg-button--loading > mg-icon {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
 }
-.mg-button--loading .mg-button__content {
+.mg-button.mg-button--loading .mg-button__content {
   opacity: 0;
 }
-.mg-button ::slotted(mg-badge) {
-  margin-left: 0.3rem;
+
+.mg-button__content {
+  display: flex;
+  align-items: center;
+  column-gap: 0.6rem;
 }
 
 mg-button {

package/dist/collection/components/atoms/mg-button/mg-button.js

@@ -30,6 +30,15 @@ export class MgButton {
      * Parent component have to remove the attribute 'disabled' when the process ends.
      */
     this.disableOnClick = false;
+    /**
+     * Prop to set aria-expanded on button element
+     */
+    this.expanded = false;
+    /**
+     * Option to set aria-haspopup
+     * The aria-haspopup state informs assistive technology users that there is a popup and the type of popup it is, but provides no interactivity.
+     */
+    this.haspopup = false;
     /**
      * Define if button is loading, default to false.
      * Trigger when button is clicked or key-up ['enter', 'space], then value change to true.
@@ -42,6 +51,9 @@ export class MgButton {
     this.classList = new ClassList(['mg-button']);
     /**
      * Trigger actions onClick event
+     *
+     * @param {MouseEvent} event click event
+     * @returns {void}
      */
     this.handleClick = (event) => {
       if (this.disabled)
@@ -53,11 +65,16 @@ export class MgButton {
       }
     };
   }
-  validateVariant(newValue) {
+  validateVariant(newValue, oldValue) {
     if (!variants.includes(newValue)) {
       throw new Error(`<mg-button> prop "variant" must be one of : ${variants.join(', ')}`);
     }
-    this.classList.add(`mg-button--${this.variant}`);
+    else {
+      if (oldValue !== undefined) {
+        this.classList.delete(`mg-button--${oldValue}`);
+      }
+      this.classList.add(`mg-button--${newValue}`);
+    }
   }
   disabledHandler(isDisabled) {
     // Remove loading when enable
@@ -79,6 +96,8 @@ export class MgButton {
   }
   /**
    * Check if props are well configured on init
+   *
+   * @returns {void}
    */
   componentWillLoad() {
     this.validateVariant(this.variant);
@@ -94,9 +113,11 @@ export class MgButton {
   }
   /**
    * Render component
+   *
+   * @returns {HTMLElement} html element
    */
   render() {
-    return (h("button", { id: this.identifier, class: this.classList.join(), "aria-label": this.label, "aria-disabled": this.disabled, onClick: this.handleClick },
+    return (h("button", { id: this.identifier, class: this.classList.join(), "aria-label": this.label, "aria-disabled": this.disabled.toString(), "aria-expanded": this.expanded, "aria-controls": this.controls, "aria-haspopup": this.haspopup, onClick: this.handleClick },
       this.loading && h("mg-icon", { icon: "loader", spin: true }),
       h("div", { class: "mg-button__content" },
         h("slot", null))));
@@ -137,7 +158,7 @@ export class MgButton {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "Identifier is used for the element ID (id is a reserved prop in Stencil.js)\nIf not set, it will be created."
@@ -216,6 +237,59 @@ export class MgButton {
       "attribute": "disable-on-click",
       "reflect": false,
       "defaultValue": "false"
+    },
+    "expanded": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Prop to set aria-expanded on button element"
+      },
+      "attribute": "expanded",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "controls": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Prop to set aria-controls on button element"
+      },
+      "attribute": "controls",
+      "reflect": false
+    },
+    "haspopup": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog'",
+        "resolved": "\"dialog\" | \"grid\" | \"listbox\" | \"menu\" | \"tree\" | boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Option to set aria-haspopup\nThe aria-haspopup state informs assistive technology users that there is a popup and the type of popup it is, but provides no interactivity."
+      },
+      "attribute": "haspopup",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get states() { return {

package/dist/collection/components/atoms/mg-character-left/{mg-character-left.stories.js → doc/mg-character-left.stories.js}

@@ -1,7 +1,15 @@
 import { h } from '@stencil/core';
+import messages from '../../../../locales/en/messages.json';
 export default {
   component: 'mg-character-left',
   title: 'Atoms/mg-character-left',
+  argTypes: {
+    template: {
+      table: {
+        defaultValue: { summary: messages.nbCharLeft },
+      },
+    },
+  },
 };
 const Template = args => h("mg-character-left", Object.assign({}, args));
 export const MgCharacterLeft = Template.bind({});

package/dist/collection/components/atoms/mg-character-left/mg-character-left.js

@@ -1,32 +1,11 @@
-import { Component, h, Prop, Watch } from '@stencil/core';
-import { messages } from '../../../locales';
+import { Component, Element, h, Prop, Watch } from '@stencil/core';
+import { initLocales } from '../../../locales';
 export class MgCharacterLeft {
   constructor() {
-    /************
-     * Internal *
-     ************/
-    this.mustacheCounter = '{counter}';
-    /**
-     * Template to display remaining characters.
-     * Must have {counter} inside
-     */
-    this.template = messages.nbCharLeft;
     /**
      * Sets the characters to count
      */
     this.characters = '';
-    /**
-     * Calculate number character left
-     * @returns {string}
-     */
-    this.getMessage = () => {
-      return this.template.replace(this.mustacheCounter, `<strong>${this.maxlength - this.characters.length}</strong>`);
-    };
-  }
-  validateTemplate(newValue) {
-    if (typeof newValue !== 'string' || newValue === '' || newValue.indexOf(this.mustacheCounter) === -1) {
-      throw new Error(`<mg-character-left> prop "template" must contain "${this.mustacheCounter}".`);
-    }
   }
   validateMaxlength(newValue) {
     if (typeof newValue !== 'number') {
@@ -36,12 +15,27 @@ export class MgCharacterLeft {
   /*************
    * Lifecycle *
    *************/
+  /**
+   * Check if props are well configured on init
+   *
+   * @returns {void}
+   */
   componentWillLoad() {
-    this.validateTemplate(this.template);
     this.validateMaxlength(this.maxlength);
+    this.messages = initLocales(this.element).messages;
   }
+  /**
+   * Render component
+   *
+   * @returns {HTMLElement} HTML Element
+   */
   render() {
-    return h("span", { id: this.identifier, innerHTML: this.getMessage(), "aria-live": "polite" });
+    return (h("span", { id: this.identifier, "aria-live": "polite" },
+      h("span", { "aria-hidden": "true" },
+        this.maxlength - this.characters.length,
+        "/",
+        this.maxlength),
+      h("span", { class: "sr-only" }, this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length))));
   }
   static get is() { return "mg-character-left"; }
   static get encapsulation() { return "scoped"; }
@@ -69,24 +63,6 @@ export class MgCharacterLeft {
       "attribute": "identifier",
       "reflect": false
     },
-    "template": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Template to display remaining characters.\nMust have {counter} inside"
-      },
-      "attribute": "template",
-      "reflect": false,
-      "defaultValue": "messages.nbCharLeft"
-    },
     "characters": {
       "type": "string",
       "mutable": false,
@@ -123,10 +99,8 @@ export class MgCharacterLeft {
       "reflect": false
     }
   }; }
+  static get elementRef() { return "element"; }
   static get watchers() { return [{
-      "propName": "template",
-      "methodName": "validateTemplate"
-    }, {
       "propName": "maxlength",
       "methodName": "validateMaxlength"
     }]; }

package/dist/collection/components/atoms/mg-icon/{mg-icon.stories.js → doc/mg-icon.stories.js}

@@ -1,5 +1,5 @@
 import { h } from '@stencil/core';
-import { icons, sizes, variants } from './mg-icon.conf';
+import { icons, sizes, variants } from '../mg-icon.conf';
 export default {
   component: 'mg-icon',
   title: 'Atoms/mg-icon',