@mgdis/mg-components 3.1.0 → 3.2.0

package/dist/cjs/{shadow-css-8940f82d.js → shadow-css-546083ef.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 /*
- Stencil Client Platform v2.14.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Platform v2.15.1 | MIT Licensed | https://stenciljs.com
  */
 /**
  * @license

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.15.1",
     "typescriptVersion": "4.5.4"
   },
   "collections": [],

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.js

@@ -6,13 +6,13 @@ export class MgBadge {
     /**
      * 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.');
     }
@@ -29,14 +29,18 @@ export class MgBadge {
   }
   /**
    * 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 +109,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 +127,7 @@ export class MgBadge {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "Define if button is using outline style"
@@ -137,7 +141,7 @@ export class MgBadge {
   }; }
   static get watchers() { return [{
       "propName": "value",
-      "methodName": "valideValue"
+      "methodName": "validateValue"
     }, {
       "propName": "variant",
       "methodName": "validateVariant"

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

@@ -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-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,7 +15,11 @@
   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;
@@ -23,14 +28,19 @@
 }
 .mg-button[disabled], .mg-button[aria-disabled], .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));
@@ -39,7 +49,7 @@
   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) {
   background: hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l));
@@ -51,7 +61,7 @@
   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) {
   background: hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l));
@@ -63,7 +73,7 @@
   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) {
   background: hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l));
@@ -75,7 +85,7 @@
   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) {
   background: hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l));
@@ -87,7 +97,7 @@
   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) {
   background: hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l));
@@ -99,28 +109,27 @@
 .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) {
   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)
@@ -79,6 +91,8 @@ export class MgButton {
   }
   /**
    * Check if props are well configured on init
+   *
+   * @returns {void}
    */
   componentWillLoad() {
     this.validateVariant(this.variant);
@@ -94,9 +108,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, "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 +153,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 +232,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-button/mg-button.stories.js

@@ -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-character-left/mg-character-left.js

@@ -17,7 +17,8 @@ export class MgCharacterLeft {
     this.characters = '';
     /**
      * Calculate number character left
-     * @returns {string}
+     *
+     * @returns {string} message
      */
     this.getMessage = () => {
       return this.template.replace(this.mustacheCounter, `<strong>${this.maxlength - this.characters.length}</strong>`);
@@ -36,10 +37,20 @@ export class MgCharacterLeft {
   /*************
    * Lifecycle *
    *************/
+  /**
+   * Check if props are well configured on init
+   *
+   * @returns {void}
+   */
   componentWillLoad() {
     this.validateTemplate(this.template);
     this.validateMaxlength(this.maxlength);
   }
+  /**
+   * Render component
+   *
+   * @returns {HTMLElement} HTML Element
+   */
   render() {
     return h("span", { id: this.identifier, innerHTML: this.getMessage(), "aria-live": "polite" });
   }

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

@@ -1,7 +1,15 @@
 import { h } from '@stencil/core';
+import { messages } from '../../../locales';
 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-icon/mg-icon.conf.js

@@ -7,6 +7,7 @@ export const icons = {
   'arrow-left': () => (h("path", { fill: "currentColor", d: "M5.88,12.93V10.18a.3.3,0,0,1,.28-.32H15a.31.31,0,0,0,.29-.33h0V6.32A.31.31,0,0,0,15,6H6.17a.32.32,0,0,1-.29-.31h0V2.93a.3.3,0,0,0-.28-.32.32.32,0,0,0-.23.09L.79,7.76a.36.36,0,0,0,0,.46l4.58,5a.31.31,0,0,0,.43,0A.4.4,0,0,0,5.88,12.93Z" })),
   'arrow-right': () => (h("path", { fill: "currentColor", d: "M10.16,3V5.75a.3.3,0,0,1-.28.32H1a.31.31,0,0,0-.29.33h0V9.61A.31.31,0,0,0,1,9.94H9.87a.29.29,0,0,1,.29.31h0V13a.3.3,0,0,0,.28.32.32.32,0,0,0,.23-.09l4.58-5.06a.36.36,0,0,0,0-.46l-4.58-5a.3.3,0,0,0-.42,0C10.16,2.76,10.16,2.87,10.16,3Z" })),
   'arrow-up': () => (h("path", { fill: "currentColor", d: "M3.06,5.82H5.81a.31.31,0,0,1,.32.28h0V15a.31.31,0,0,0,.33.29H9.67A.3.3,0,0,0,10,15h0V6.11a.3.3,0,0,1,.31-.29h2.75a.3.3,0,0,0,.23-.51L8.23.73a.36.36,0,0,0-.46,0l-5,4.58a.3.3,0,0,0,0,.43C2.82,5.83,2.92,5.82,3.06,5.82Z" })),
+  'arrow-up-right-square': () => (h("path", { fill: "currentColor", d: "M14.33 3v10A1.34 1.34 0 0 1 13 14.33H3A1.34 1.34 0 0 1 1.67 13V3A1.34 1.34 0 0 1 3 1.67h10A1.34 1.34 0 0 1 14.33 3Zm-2.48.46H8.68a.67.67 0 0 0-.68.7.63.63 0 0 0 .2.47l.91.91-5.53 5.53a.33.33 0 0 0 0 .48l.87.87a.33.33 0 0 0 .48 0l5.53-5.52.91.9a.69.69 0 0 0 1 0 .71.71 0 0 0 .19-.48V4.15a.67.67 0 0 0-.67-.67Z" })),
   'arrows-rotate': () => (h("path", { fill: "currentColor", d: "M2.3,7h3.4c0.3,0,0.6-0.3,0.6-0.6c0-0.1-0.1-0.3-0.2-0.4L5.1,4.9c1.7-1.6,4.4-1.5,6,0.2c0,0,0,0,0,0  c0.5,0.5,0.8,1.2,1,1.9h2.1C13.7,3.5,10.4,1.2,7,1.8C5.7,2,4.6,2.6,3.6,3.4L2.7,2.5c-0.2-0.2-0.6-0.2-0.8,0c0,0,0,0,0,0l0,0  C1.8,2.6,1.7,2.8,1.7,2.9v3.4C1.7,6.7,1.9,7,2.3,7z M13.7,9h-3.4C9.9,9,9.7,9.3,9.7,9.6c0,0.2,0.1,0.3,0.2,0.4l1.1,1.1  c-1.7,1.6-4.4,1.5-6-0.2C4.4,10.4,4,9.7,3.8,9H1.7c0.6,3.5,3.9,5.8,7.3,5.2c1.3-0.2,2.4-0.8,3.3-1.7l0.9,0.9c0.2,0.2,0.6,0.2,0.8,0  c0,0,0,0,0,0l0,0c0.1-0.1,0.2-0.3,0.2-0.4V9.6C14.3,9.3,14.1,9,13.7,9z" })),
   'ban': () => (h("path", { fill: "currentColor", d: "M8 .67A7.33 7.33 0 1 0 15.33 8 7.33 7.33 0 0 0 8 .67Zm3.85 3.48a5.46 5.46 0 0 1 .61 7L4.88 3.54a5.46 5.46 0 0 1 6.97.61Zm-7.7 7.7a5.45 5.45 0 0 1-.61-7l7.58 7.58a5.46 5.46 0 0 1-7-.61Z" })),
   'calculator': () => (h("path", { fill: "currentColor", d: "M12.83.67H3.17a.5.5 0 0 0-.5.5v13.66a.5.5 0 0 0 .5.5h9.66a.5.5 0 0 0 .5-.5V1.17a.5.5 0 0 0-.5-.5ZM5.58 13.39a.29.29 0 0 1-.28.3H4.1a.29.29 0 0 1-.3-.28v-1.2a.29.29 0 0 1 .28-.3h1.2a.29.29 0 0 1 .3.28v1.2Zm0-3.28a.29.29 0 0 1-.3.3H4.1a.29.29 0 0 1-.3-.3V8.93a.29.29 0 0 1 .28-.3h1.2a.29.29 0 0 1 .3.28v1.2Zm3.29 3.28a.29.29 0 0 1-.3.3H7.38a.29.29 0 0 1-.3-.3v-1.18a.29.29 0 0 1 .3-.3h1.19a.29.29 0 0 1 .3.3Zm0-3.28a.32.32 0 0 1-.3.3H7.38a.32.32 0 0 1-.3-.3V8.93a.29.29 0 0 1 .3-.3h1.19a.29.29 0 0 1 .3.3Zm3.33 3.28a.29.29 0 0 1-.28.3h-1.25a.29.29 0 0 1-.3-.28V8.93a.29.29 0 0 1 .28-.3h1.25a.29.29 0 0 1 .3.28v4.48Zm0-7.15a.29.29 0 0 1-.3.3H4.1a.29.29 0 0 1-.3-.3V2.61a.29.29 0 0 1 .28-.3h7.82a.29.29 0 0 1 .3.28v3.65Z" })),
@@ -33,6 +34,7 @@ export const icons = {
     h("path", { fill: "currentColor", class: "loader__full-circle", d: "M8 2.67A5.33 5.33 0 1 1 2.67 8 5.33 5.33 0 0 1 8 2.67m0-2A7.33 7.33 0 1 0 15.33 8 7.33 7.33 0 0 0 8 .67Z" }),
     h("path", { fill: "currentColor", d: "M8 2.67v-2A7.33 7.33 0 0 0 .67 8h2A5.33 5.33 0 0 1 8 2.67Z" }),
   ],
+  'log-in': () => (h("path", { fill: "currentColor", d: "M10.97,7.78h0L6.97,3.78c-.12-.12-.31-.12-.42,0h0c-.07,.06-.12,.15-.13,.24v2.07c0,.17-.13,.3-.3,.32H1.97c-.16,0-.29,.12-.3,.28h0v2.58c0,.16,.12,.29,.28,.3H6.11c.17,0,.3,.14,.3,.31v2.14c0,.16,.12,.29,.28,.3h0c.11,.01,.21-.03,.28-.11l4-4c.11-.12,.11-.3,0-.42Zm3.37,5.26h0v1c0,.16-.13,.28-.28,.28h-4.77c-.16,0-.28-.13-.28-.28v-1c0-.16,.13-.28,.28-.28h3.43V3.3h-3.42c-.16,0-.29-.13-.29-.29V1.97c0-.16,.13-.29,.29-.29h4.76c.16,0,.29,.13,.29,.29v.68h0V13.04Z" })),
   'log-out': () => [
     h("path", { fill: "currentColor", d: "M14.25,7.77h0l-4-4a.31.31,0,0,0-.43,0A.34.34,0,0,0,9.7,4V6.07a.32.32,0,0,1-.3.32H5.23a.3.3,0,0,0-.3.3V9.25a.3.3,0,0,0,.3.3H9.4a.31.31,0,0,1,.3.31V12a.3.3,0,0,0,.3.3.33.33,0,0,0,.23-.09l4-4A.29.29,0,0,0,14.25,7.77Z" }),
     h("path", { fill: "currentColor", d: "M6.71,12.72H3.27V3.26H6.69A.31.31,0,0,0,7,3V2a.3.3,0,0,0-.31-.3H2A.29.29,0,0,0,1.67,2h0V3h0V14a.27.27,0,0,0,.1.24h0a.32.32,0,0,0,.14.08H6.71A.3.3,0,0,0,7,14V13A.3.3,0,0,0,6.71,12.72Z" }),
@@ -40,7 +42,13 @@ export const icons = {
   'magnifying-glass': () => (h("path", { fill: "currentColor", d: "M11.24,9.52A5.17,5.17,0,0,0,9.51,2.41l-.17-.09A5.18,5.18,0,0,0,4,11.18a5.16,5.16,0,0,0,5.54.11L12.3,14a1,1,0,0,0,1.41,0l.33-.33a1,1,0,0,0,0-1.41Zm-4.4.5A3.19,3.19,0,1,1,10,6.8v.06A3.19,3.19,0,0,1,6.84,10Z" })),
   'paper-plane': () => (h("path", { fill: "currentColor", d: "M14 1.69 1.84 7a.28.28 0 0 0-.15.36.29.29 0 0 0 .16.15l3.27 1.82a.57.57 0 0 0 .61-.06l6.45-5.57c.05 0 .15-.1.19-.06s0 .14-.06.18l-5.59 6.29a.52.52 0 0 0 0 .63l2.09 3.44a.28.28 0 0 0 .37.12.3.3 0 0 0 .13-.12l5-12.11a.3.3 0 0 0-.14-.37.28.28 0 0 0-.17-.01Z" })),
   'paper-plane-slash': () => (h("path", { fill: "currentColor", d: "M2.67,1.69,14.26,13.28l-1,1-2.79-2.8-1.1,2.67a.3.3,0,0,1-.13.12.28.28,0,0,1-.37-.12L6.75,10.74a.52.52,0,0,1,0-.63L7.82,8.9l-.76-.76L5.76,9.27a.57.57,0,0,1-.61.06L1.88,7.51a.29.29,0,0,1-.16-.15A.28.28,0,0,1,1.87,7L4.68,5.76l-3-3Zm11.53,0a.28.28,0,0,0-.22,0L7.53,4.51,9.26,6.24l3-2.54s.15-.1.19-.06,0,.14-.06.18L9.75,6.73l1.88,1.88,2.71-6.54A.3.3,0,0,0,14.2,1.7Z" })),
+  'pen': () => (h("path", { fill: "currentColor", d: "M1.67,11.69v2.64h2.64l7.78-7.78-2.64-2.64L1.67,11.69ZM14.13,4.51c.27-.28,.27-.72,0-1h0l-1.65-1.64c-.28-.27-.72-.27-1,0h0l-1.28,1.29,2.64,2.64,1.29-1.29Z" })),
+  'pen-fancy': () => (h("path", { fill: "currentColor", d: "M3.63,8.65c-.24,.07-.43,.26-.5,.5l-1.46,4.37,.11,.12,2.3-2.3c0-.06,0-.13,0-.19,0-.44,.35-.8,.79-.81,.44,0,.8,.35,.81,.79,0,.44-.35,.8-.79,.81,0,0-.01,0-.02,0h-.19l-2.3,2.3,.12,.11,4.37-1.46c.24-.07,.43-.26,.5-.5l.82-2.08-2.49-2.48-2.07,.82ZM10.8,2.35L6.27,7.28l2.42,2.42,4.94-4.52c2.1-1.86-.99-4.92-2.83-2.83Z" })),
   'plus-circle': () => (h("path", { fill: "currentColor", d: "M8,0.7C4,0.7,0.7,4,0.7,8S4,15.3,8,15.3S15.3,12,15.3,8l0,0C15.3,4,12,0.7,8,0.7  C8,0.7,8,0.7,8,0.7z M12.3,8.8c0,0.2-0.2,0.4-0.4,0.4H9.2v2.7c0,0.2-0.2,0.4-0.4,0.4H7.2c-0.2,0-0.4-0.2-0.3-0.4V9.2H4.1  C3.9,9.2,3.7,9,3.7,8.8V7.2c0-0.2,0.2-0.4,0.4-0.3h2.7V4.1c0-0.2,0.2-0.4,0.3-0.4h1.7c0.2,0,0.4,0.2,0.4,0.4v2.7h2.7  c0.2,0,0.4,0.2,0.4,0.3L12.3,8.8z" })),
+  'trash': () => [
+    h("path", { fill: "currentColor", d: "M11.5,14.8h-7    c-0.6,0-1.1-0.5-1.1-1.1V4.4h9.3v9.2C12.6,14.2,12.1,14.8,11.5,14.8 M6.9,6.8c0-0.3-0.3-0.6-0.6-0.6S5.8,6.5,5.8,6.8v5.2    c0,0.3,0.3,0.6,0.6,0.6s0.6-0.3,0.6-0.6V6.8z M10.3,6.8c0-0.3-0.3-0.6-0.6-0.6S9.2,6.5,9.2,6.8v5.2c0,0.3,0.3,0.6,0.6,0.6    s0.6-0.3,0.6-0.6V6.8z" }),
+    h("path", { fill: "currentColor", d: "M13,2h-2.9L9.9,1.6    C9.8,1.4,9.6,1.2,9.4,1.2H6.6c-0.2,0-0.4,0.1-0.5,0.3L5.8,2H2.9C2.7,2,2.5,2.2,2.5,2.4c0,0,0,0,0,0v0.8c0,0.2,0.2,0.4,0.4,0.4H13    c0.2,0,0.4-0.2,0.4-0.4V2.4C13.4,2.2,13.2,2,13,2z" }),
+  ],
   'user-plus': () => (h("path", { fill: "currentColor", d: "M14,3.33H12.65V2a.36.36,0,0,0-.35-.33h-.65A.36.36,0,0,0,11.3,2V3.33H10a.34.34,0,0,0-.33.34v.66a.34.34,0,0,0,.33.34H11.3V6a.37.37,0,0,0,.35.33h.65A.37.37,0,0,0,12.65,6V4.67H14a.34.34,0,0,0,.32-.34V3.67A.34.34,0,0,0,14,3.33ZM9.28,9.77h-.2a5.19,5.19,0,0,1-3.91,0H5A3,3,0,0,0,1.7,12.46h0v.72A1.27,1.27,0,0,0,3,14.33h8.25a1.26,1.26,0,0,0,1.36-1.14v-.68A3,3,0,0,0,9.37,9.76H9.28ZM7.13,3.7A2.64,2.64,0,1,1,4.5,6.34h0A2.64,2.64,0,0,1,7.13,3.7Z" })),
   'users': () => (h("path", { fill: "currentColor", d: "M12,8.76h-.2a5.24,5.24,0,0,1-3.93,0H7.61a3.05,3.05,0,0,0-3.3,2.75v.69a1.28,1.28,0,0,0,1.38,1.14H14a1.27,1.27,0,0,0,1.37-1.14v-.69A3.07,3.07,0,0,0,12,8.75Zm-6.4-.32A2,2,0,0,0,4.31,8H2.48A1.69,1.69,0,0,0,.65,9.53v.76a.85.85,0,0,0,.91.76H3.45A3.58,3.58,0,0,1,5.61,8.44ZM9.81,2.66A2.65,2.65,0,1,1,7.16,5.31h0A2.65,2.65,0,0,1,9.81,2.66ZM3.31,4.18A1.51,1.51,0,1,1,1.8,5.69,1.51,1.51,0,0,1,3.31,4.18Z" })),
 };

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

@@ -1,3 +1,8 @@
+:host {
+  display: inline-flex;
+  vertical-align: middle;
+}
+
 .mg-icon[size=regular], .mg-icon.mg-icon--size-regular {
   width: var(--mg-icon-regular-size);
   height: var(--mg-icon-regular-size);
@@ -27,13 +32,6 @@
   background-color: hsl(var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) + 20%));
 }
 
-mg-icon,
-.mg-icon {
-  display: inline-block;
-  vertical-align: middle;
-  line-height: 1;
-}
-
 /**
 * Loader icon
 **/

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

@@ -15,6 +15,12 @@ export class MgIcon {
      * Component classes
      */
     this.classList = new ClassList(['mg-icon']);
+    /**
+     * getIcon
+     *
+     * @returns {HTMLElement} icon html
+     */
+    this.getIcon = () => icons[this.icon]();
   }
   validateIcon(newValue) {
     if (!Object.keys(icons).includes(newValue)) {
@@ -43,6 +49,8 @@ export class MgIcon {
   }
   /**
    * Check if props are well configured on init
+   *
+   * @returns {void}
    */
   componentWillLoad() {
     this.validateIcon(this.icon);
@@ -52,9 +60,11 @@ export class MgIcon {
   }
   /**
    * Render component
+   *
+   * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h("svg", { class: this.classList.join(), "aria-hidden": "true", focusable: "false", viewBox: "0 0 16 16" }, icons[this.icon]()));
+    return (h("svg", { class: this.classList.join(), "aria-hidden": "true", focusable: "false", viewBox: "0 0 16 16" }, this.getIcon()));
   }
   static get is() { return "mg-icon"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/atoms/mg-input-title/mg-input-title.css

@@ -1,7 +1,3 @@
-/**
- * Not scoped into `mg-input-title` because it could be used outside of an input
- * (ex: All input with a * are required)
- */
 .is-asterisk {
   color: hsl(var(--color-danger));
 }
@@ -9,4 +5,8 @@
 legend.mg-input-title {
   padding-left: 0;
   padding-right: 0;
+}
+
+.mg-input-title__required {
+  display: var(--mg-input-title-display, unset);
 }

package/dist/collection/components/atoms/mg-input-title/mg-input-title.js

@@ -16,16 +16,27 @@ export class MgInputTitle {
   /*************
    * Lifecycle *
    *************/
+  /**
+   * Init tag name
+   *
+   * @returns {void}
+   */
   componentWillLoad() {
-    // Init tag name
     this.getTagName();
   }
-  // \u00A0 represent a  
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
   render() {
     const TagName = this.tagName;
+    // \u00A0 represent a  
     return (h(TagName, { class: "mg-input-title", htmlFor: this.isLegend ? undefined : this.identifier },
       h("slot", null),
-      this.required && [`\u00A0`, h("span", { class: "is-asterisk" }, "*")]));
+      this.required && (h("span", { class: "mg-input-title__required" },
+        "\u00A0",
+        h("span", { class: "is-asterisk" }, "*")))));
   }
   static get is() { return "mg-input-title"; }
   static get encapsulation() { return "scoped"; }

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

@@ -6,7 +6,7 @@ export class MgTag {
     /**
      * Define button variant
      */
-    this.variant = variants[0];
+    this.variant = variants[0]; // info
     /**
      * Component classes
      */
@@ -22,8 +22,13 @@ export class MgTag {
     if (newValue)
       this.classList.add(`mg-tag--outline`);
   }
+  /*************
+   * Lifecycle *
+   *************/
   /**
    * Check if props are well configured on init
+   *
+   * @returns {void}
    */
   componentWillLoad() {
     this.validateVariant(this.variant);
@@ -31,6 +36,8 @@ export class MgTag {
   }
   /**
    * Render
+   *
+   * @returns {HTMLElement} HTML Element
    */
   render() {
     return (h("span", { class: this.classList.join() },
@@ -54,7 +61,7 @@ export class MgTag {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "Define button variant"
@@ -72,7 +79,7 @@ export class MgTag {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "Define if button is using outline style"

package/dist/collection/components/atoms/mg-tag/mg-tag.stories.js

@@ -7,6 +7,9 @@ export default {
     variant: {
       options: variants,
       control: { type: 'select' },
+      table: {
+        defaultValue: { summary: variants[0] },
+      },
     },
   },
 };