@mgdis/mg-components 4.2.1 → 5.1.0

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

@@ -0,0 +1,57 @@
+import { h } from '@stencil/core';
+export class MgDivider {
+  constructor() {
+    /**************
+     * Decorators *
+     **************/
+    /**
+     * Define component size
+     */
+    this.size = 'regular';
+  }
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render() {
+    return (h("div", { class: {
+        'mg-divider': true,
+        'mg-divider--full': this.size === 'full',
+      } }));
+  }
+  static get is() { return "mg-divider"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["mg-divider.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["mg-divider.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'regular' | 'full'",
+          "resolved": "\"full\" | \"regular\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define component size"
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'regular'"
+      }
+    };
+  }
+}

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

@@ -50,6 +50,8 @@ export const icons = {
   'dashboard': () => h("path", { fill: "currentColor", d: "M1.67 8.7H7.3V1.67H1.67v7.04Zm0 5.63H7.3v-4.22H1.67v4.22Zm7.04 0h5.63V7.3H8.71v7.04Zm0-12.67v4.23h5.63V1.67H8.71Z" }),
   'dashboard-outline': () => (h("path", { fill: "currentColor", d: "M13.33 2.67v2.22H9.7V2.67h3.63m-7.04 0V7.7H2.67V2.67H6.3m7.04 5.63v5.04H9.71V8.3h3.63M6.3 11.11v2.22H2.67v-2.22H6.3m8.03-9.44H8.7v4.22h5.63V1.67Zm-7.04 0H1.67v7.04H7.3V1.67Zm7.04 5.63H8.7v7.04h5.63V7.3Zm-7.04 2.81H1.67v4.22H7.3v-4.22Z" })),
   'download': () => (h("path", { fill: "currentColor", d: "M6.4 2v4.1c0 .2-.1.3-.3.3H4c-.2 0-.3.1-.3.3 0 .1 0 .2.1.2l4 4c.1.1.3.1.4 0l4-4c.1-.1.1-.3 0-.4-.1-.1-.1-.1-.2-.1H9.9c-.2 0-.3-.1-.3-.3V2c0-.2-.1-.3-.3-.3H6.7c-.1 0-.3.1-.3.3zm7.9 11v1c0 .2-.1.3-.3.3H2c-.2 0-.3-.1-.3-.3v-1c0-.2.1-.3.3-.3h12c.2 0 .3.1.3.3z" })),
+  'ellipsis': () => (h("path", { fill: "currentColor", d: "M2.5 6.17A1.83 1.83 0 1 0 4.33 8c0-1.01-.82-1.83-1.83-1.83Zm11 0A1.83 1.83 0 1 0 15.33 8c0-1.01-.82-1.83-1.83-1.83Zm-5.5 0A1.83 1.83 0 1 0 9.83 8c0-1.01-.82-1.83-1.83-1.83Z" })),
+  'ellipsis-vertical': () => (h("path", { fill: "currentColor", d: "M6.17 13.5A1.83 1.83 0 1 0 8 11.67c-1.01 0-1.83.82-1.83 1.83Zm0-11A1.83 1.83 0 1 0 8 .67c-1.01 0-1.83.82-1.83 1.83Zm0 5.5A1.83 1.83 0 1 0 8 6.17c-1.01 0-1.83.82-1.83 1.83Z" })),
   'euro': () => (h("path", { fill: "currentColor", d: "M13 13.14a.4.4 0 0 0-.47-.31A7.79 7.79 0 0 1 11 13a4.31 4.31 0 0 1-4-2.79h3.8a.41.41 0 0 0 .39-.31l.19-.9a.39.39 0 0 0-.3-.47H6.51a7.07 7.07 0 0 1 0-1.38h4.89a.4.4 0 0 0 .39-.31l.22-1a.4.4 0 0 0-.3-.47H7a4.2 4.2 0 0 1 3.92-2.45 6.57 6.57 0 0 1 1.26.14.41.41 0 0 0 .47-.29l.4-1.45a.4.4 0 0 0-.28-.48A9.43 9.43 0 0 0 11 .67a7.12 7.12 0 0 0-6.83 4.7h-1.1a.4.4 0 0 0-.4.39v1a.4.4 0 0 0 .4.39h.72a9.08 9.08 0 0 0 0 1.38h-.72a.39.39 0 0 0-.4.39v.93a.4.4 0 0 0 .4.39h1A7 7 0 0 0 11 15.3a8.7 8.7 0 0 0 2-.25.39.39 0 0 0 .3-.46l-.3-1.45Z" })),
   'euro-circle': () => (h("path", { fill: "currentColor", d: "M8 .67C3.95.67.67 3.95.67 8S3.95 15.33 8 15.33s7.33-3.28 7.33-7.33S12.05.67 8 .67Zm2.27 11.4c-.38.09-.76.14-1.15.14a4.038 4.038 0 0 1-3.99-2.92h-.58c-.13 0-.23-.1-.23-.22v-.54c0-.12.11-.22.23-.22h.41a5.34 5.34 0 0 1 0-.8h-.41c-.13 0-.23-.1-.23-.22v-.58c0-.13.11-.22.23-.22h.63c.6-1.65 2.18-2.74 3.94-2.71.34 0 .68.03 1.02.1.12.03.19.16.16.28l-.23.84c-.03.12-.15.19-.27.17-.24-.05-.48-.08-.73-.08A2.42 2.42 0 0 0 6.81 6.5h2.71c.12.03.2.15.17.27l-.13.58c-.02.1-.12.18-.22.18H6.52c-.03.26-.03.53 0 .8h2.63c.12.03.2.15.17.27l-.11.52c-.03.1-.12.18-.22.18H6.8c.36.96 1.28 1.6 2.31 1.61.3 0 .59-.04.88-.1.12-.02.24.05.27.18l.17.84c.02.12-.05.24-.17.27v-.03Z" })),
   'exclamation-circle': () => (h("path", { fill: "currentColor", d: "M8 15.33c4.05 0 7.33-3.28 7.33-7.33S12.05.67 8 .67.67 3.95.67 8 3.95 15.33 8 15.33Zm.95-3.3c0 .15-.12.27-.28.27h-1.4c-.15 0-.28-.12-.28-.27v-1.31c0-.15.12-.28.28-.28h1.4c.15 0 .28.12.28.28v1.31ZM7 3.96c0-.14.11-.25.25-.25H8.7c.14 0 .25.11.25.25v4.8c0 .14-.11.25-.25.25H7.25c-.14 0-.25-.11-.25-.25V3.95Z" })),
@@ -149,6 +151,7 @@ export const icons = {
   'user-group': () => (h("path", { fill: "currentColor", d: "M13.15 4.12c-.81-.01-1.47.65-1.48 1.46 0 .82.65 1.47 1.46 1.48s1.47-.65 1.48-1.46-.65-1.47-1.46-1.48Zm-10.04.01a1.47 1.47 0 0 0-1.58 1.59c.06.71.62 1.28 1.34 1.34.81.07 1.52-.53 1.59-1.34.06-.81-.54-1.52-1.35-1.59Zm7.36.39c-.22-.84-.87-1.51-1.71-1.75-1.36-.41-2.8.36-3.22 1.72-.18.61-.13 1.27.14 1.85.41.9 1.33 1.48 2.32 1.45 1.41.01 2.56-1.14 2.57-2.55 0-.24-.03-.49-.1-.72Zm-.71 4h-.19c-.99.49-2.14.49-3.13 0h-.19c-1.46 0-2.64 1.18-2.64 2.64v2.69c1.23.93 2.74 1.47 4.39 1.47s3.17-.55 4.4-1.48v-2.68c0-1.46-1.18-2.64-2.64-2.64Zm5.52.25a7.282 7.282 0 0 1-1.65 3.91c-.08.1-.16.19-.25.28-.08.09-.17.18-.25.27v-.55h.03v-.72s.01-.07 0-.1v-.66c.01-1.25-.66-2.4-1.76-3 .27-.26.63-.41 1-.41h1.51c.63.01 1.17.41 1.37.98ZM2.86 11.16v1.52h.01v.55l-.28-.31c-.08-.08-.15-.16-.22-.24A7.238 7.238 0 0 1 .74 8.86c.16-.62.72-1.07 1.4-1.07h1.47c.37-.01.73.12 1.01.37-1.1.6-1.77 1.75-1.76 3Z" })),
   '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" })),
   'user-question-outline': () => (h("path", { fill: "currentColor", d: "M5.23 11.14c.86-.66 1.01-1.9.35-2.75s-1.9-1.01-2.75-.35a1.96 1.96 0 0 0 0 3.1c-.72.42-1.16 1.2-1.16 2.03v.8c0 .2.17.37.37.37h3.98c.2 0 .37-.17.37-.37v-.8c0-.83-.44-1.61-1.16-2.03ZM2.81 9.59c0-.67.55-1.22 1.22-1.22s1.22.55 1.22 1.22-.55 1.22-1.22 1.22-1.22-.55-1.22-1.22Zm2.83 4H2.41v-.42c0-.89.72-1.62 1.62-1.62s1.62.72 1.62 1.62v.42h-.01Zm7.13-11.93H8c-.86 0-1.56.7-1.56 1.56v7.16c0 .21.17.37.37.37.08 0 .16-.03.22-.07l1.49-1.12h4.25c.86 0 1.56-.7 1.56-1.56V3.22c0-.86-.7-1.56-1.56-1.56Zm.82 6.33c0 .45-.37.82-.82.82H8.4a.41.41 0 0 0-.22.07l-1 .75V3.22c0-.45.37-.82.82-.82h4.77c.45 0 .82.37.82.82v4.77Zm-2.8-.42c0 .23-.18.41-.41.41s-.41-.18-.41-.41.18-.41.41-.41c.23 0 .41.18.41.41Zm-.41-4.34c-.83 0-1.5.67-1.5 1.5 0 .23.18.41.41.41s.41-.18.41-.41c0-.38.31-.68.69-.68.38 0 .68.31.68.69 0 .38-.31.68-.68.68-.23 0-.41.18-.41.41v.44c0 .23.18.41.41.41s.41-.18.41-.41v-.09c.8-.23 1.26-1.06 1.04-1.85-.18-.65-.77-1.09-1.44-1.09Z" })),
+  'user-shield-outline': () => (h("path", { fill: "currentColor", d: "M8 8.92c-1.5 0-2.72-1.22-2.72-2.72S6.5 3.48 8 3.48s2.72 1.22 2.72 2.72S9.5 8.92 8 8.92Zm0-4.64a1.92 1.92 0 1 0 .001 3.841A1.92 1.92 0 0 0 8 4.28Zm4.97-1.84L8.56.78C8.2.65 7.81.65 7.45.78L3.03 2.43C2.41 2.66 2 3.26 2 3.92V8c0 3.82 4.23 6.47 5.52 7.2.15.08.31.13.48.13s.33-.04.48-.13C9.78 14.48 14 11.82 14 8V3.92c0-.66-.41-1.25-1.03-1.48ZM8.08 14.5c-.05.03-.12.03-.17 0-.49-.28-2.12-1.24-3.4-2.68.62-.82 1.94-1.39 3.47-1.39s2.84.61 3.49 1.4c-1.29 1.43-2.9 2.39-3.39 2.67ZM13.19 8c0 1.2-.51 2.28-1.22 3.22-.83-.91-2.34-1.59-4-1.59s-3.16.64-3.98 1.58c-.7-.93-1.2-2.01-1.2-3.2V3.93c0-.33.21-.62.51-.74l4.43-1.66c.09-.03.18-.05.27-.05s.19.02.27.05l4.42 1.66c.3.11.51.41.51.73V8Z" })),
   '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" })),
   'wallet': () => (h("path", { fill: "currentColor", d: "M13.88 5H3a.43.43 0 0 1-.46-.38.43.43 0 0 1 .46-.43h11a.43.43 0 0 0 .46-.38A1.28 1.28 0 0 0 13 2.67H2.5A1.7 1.7 0 0 0 .67 4.19v7.62a1.7 1.7 0 0 0 1.83 1.52h11.38a1.32 1.32 0 0 0 1.45-1.14V6.1A1.33 1.33 0 0 0 13.88 5Zm-1.21 5.29a1.1 1.1 0 1 1 1.1-1.1 1.1 1.1 0 0 1-1.1 1.05Z" })),
 };

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

@@ -15,9 +15,7 @@ export class MgInputTitle {
   }
   validateIdentifier(newValue) {
     if (typeof newValue !== 'string' || newValue.trim() === '') {
-      // TODO: throw new Error on next major (5.0.0)
-      // throw new Error('<mg-input-title> prop "identifier" is required.');
-      console.error('<mg-input-title> prop "identifier" is required.');
+      throw new Error('<mg-input-title> prop "identifier" is required.');
     }
   }
   /*************

package/dist/collection/components/atoms/mg-tooltip/doc/mg-tooltip.stories.js

@@ -1,6 +1,5 @@
 import { h } from '@stencil/core';
 import { filterArgs } from '../../../../../.storybook/utils';
-import { placements } from '../mg-tooltip.conf';
 export default {
   component: 'mg-tooltip',
   title: 'Atoms/mg-tooltip',
@@ -9,11 +8,7 @@ export default {
   },
   argTypes: {
     placement: {
-      options: placements,
       control: { type: 'select' },
-      table: {
-        defaultValue: { summary: 'bottom' },
-      },
     },
   },
 };

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

@@ -1,23 +1,3 @@
-/**
- * List of all possibles placements
- */
-export const placements = [
-  'auto',
-  'auto-start',
-  'auto-end',
-  'top',
-  'top-start',
-  'top-end',
-  'bottom',
-  'bottom-start',
-  'bottom-end',
-  'right',
-  'right-start',
-  'right-end',
-  'left',
-  'left-start',
-  'left-end',
-];
 export var Guard;
 (function (Guard) {
   Guard["FOCUS"] = "focus";

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

@@ -5,7 +5,7 @@
 .mg-tooltip {
   display: none;
   padding: 0.5rem 0.8rem;
-  z-index: 9999;
+  z-index: 1000;
   border-radius: var(--mg-tooltip-border-radius);
   background-color: hsl(var(--mg-tooltip-background-color));
   color: hsl(var(--mg-tooltip-font-color));

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

@@ -90,9 +90,7 @@ export class MgTooltip {
   }
   validateMessage(newValue) {
     if (typeof newValue !== 'string' || newValue.trim() === '') {
-      // TODO: throw new Error on next major (5.0.0)
-      // throw new Error('<mg-tooltip> prop "message" is required.');
-      console.error('<mg-tooltip> prop "message" is required.');
+      throw new Error('<mg-tooltip> prop "message" is required.');
     }
   }
   handleDisplay(newValue) {
@@ -116,12 +114,12 @@ export class MgTooltip {
   componentDidLoad() {
     var _a;
     // Get tooltip element
-    this.tooltip = this.element.querySelector(`#${this.identifier}`);
+    this.tooltip = this.element.shadowRoot.querySelector(`#${this.identifier}`);
     // get slotted element
     const slotElement = this.element.firstElementChild;
     // Get interactive element
     const interactiveElements = ['a', 'button', 'input', 'textarea', 'select']; //! Might needs updates
-    const interactiveElement = this.element.querySelector(interactiveElements.join(',')) || ((_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(interactiveElements.join(',')));
+    const interactiveElement = this.element.shadowRoot.querySelector(interactiveElements.join(',')) || ((_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(interactiveElements.join(',')));
     // define selected element to become tooltip selector
     const tooltipedElement = interactiveElement || slotElement;
     // Add tabindex to slotted element if we can't find any interactive element
@@ -138,6 +136,7 @@ export class MgTooltip {
     // Create popperjs tooltip
     this.popper = createPopper(tooltipedElement, this.tooltip, {
       placement: this.placement,
+      strategy: 'fixed',
       modifiers: [
         {
           name: 'offset',
@@ -186,7 +185,7 @@ export class MgTooltip {
     return (h(Host, null, h("slot", null), h("div", { role: "tooltip", id: this.identifier, class: "mg-tooltip", innerHTML: this.message }, h("div", { class: "mg-tooltip__arrow", "data-popper-arrow": true }))));
   }
   static get is() { return "mg-tooltip"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["mg-tooltip.scss"]
@@ -243,7 +242,7 @@ export class MgTooltip {
           "references": {
             "Placement": {
               "location": "import",
-              "path": "./mg-tooltip.conf"
+              "path": "@popperjs/core"
             }
           }
         },

package/dist/collection/components/molecules/inputs/MgInput.js

@@ -50,9 +50,7 @@ export const MgInput = (props, children, utils) => {
    * Check required properties
    */
   if (typeof props.identifier !== 'string' || props.identifier.trim() === '') {
-    // TODO: throw new Error on next major (5.0.0)
-    // throw new Error('<mg-input> prop "identifier" is required.');
-    console.error('<mg-input> prop "identifier" is required.');
+    throw new Error('<mg-input> prop "identifier" is required.');
   }
   if (typeof props.label !== 'string' || props.label.trim() === '') {
     throw new Error('<mg-input> prop "label" is required.');

package/dist/collection/components/molecules/mg-details/doc/mg-details.stories.js

@@ -20,4 +20,5 @@ MgDetails.args = {
   toggleClosed: 'Show details',
   toggleOpened: 'Hide details',
   expanded: false,
+  hideSummary: false,
 };

package/dist/collection/components/molecules/mg-details/mg-details.css

@@ -1,3 +1,24 @@
+/**
+ * A11Y
+ */
+.sr-only {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  -webkit-clip-path: inset(50%) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+  position: absolute !important;
+  width: 1px !important;
+  white-space: nowrap !important;
+}
+
+*:focus:not(:focus-visible) {
+  outline: none;
+}
+
 .mg-details summary {
   display: flex;
   align-items: baseline;
@@ -7,6 +28,14 @@
 .mg-details__toggle {
   margin-left: 1.5rem;
   flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  align-self: flex-start;
+  gap: 0.6rem;
+  min-height: calc(var(--font-size) * var(--line-height));
+}
+.mg-details__toggle mg-icon {
+  align-self: self-end;
 }
 
 .mg-details__details {

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

@@ -1,6 +1,10 @@
 import { h } from '@stencil/core';
 export class MgDetails {
   constructor() {
+    /**
+     * Hide summary element
+     */
+    this.hideSummary = false;
     /**
      * Define if details are diplayed
      */
@@ -15,7 +19,7 @@ export class MgDetails {
     };
   }
   validateTitles(newValue) {
-    if (newValue === undefined || newValue === '') {
+    if (newValue === undefined || newValue.trim() === '') {
       throw new Error('<mg-details> prop "toggleClosed" and "toggleOpened" must be defined.');
     }
   }
@@ -40,7 +44,7 @@ export class MgDetails {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h("details", { class: "mg-details", onToggle: this.handleToggle, open: this.expanded, ref: el => (this.details = el) }, h("summary", null, h("slot", { name: "summary" }), h("span", { class: "mg-details__toggle" }, h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down' }), " ", this.expanded ? this.toggleOpened : this.toggleClosed)), h("div", { class: "mg-details__details" }, h("slot", { name: "details" }))));
+    return (h("details", { class: "mg-details", onToggle: this.handleToggle, open: this.expanded, ref: el => (this.details = el) }, h("summary", null, h("slot", { name: "summary" }), h("span", { class: "mg-details__toggle" }, h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down' }), h("span", { class: { 'sr-only': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { class: "mg-details__details" }, h("slot", { name: "details" }))));
   }
   static get is() { return "mg-details"; }
   static get encapsulation() { return "shadow"; }
@@ -64,7 +68,7 @@ export class MgDetails {
           "resolved": "string",
           "references": {}
         },
-        "required": false,
+        "required": true,
         "optional": false,
         "docs": {
           "tags": [],
@@ -81,7 +85,7 @@ export class MgDetails {
           "resolved": "string",
           "references": {}
         },
-        "required": false,
+        "required": true,
         "optional": false,
         "docs": {
           "tags": [],
@@ -90,6 +94,24 @@ export class MgDetails {
         "attribute": "toggle-opened",
         "reflect": false
       },
+      "hideSummary": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Hide summary element"
+        },
+        "attribute": "hide-summary",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "expanded": {
         "type": "boolean",
         "mutable": true,

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

@@ -120,9 +120,8 @@ export class MgForm {
    */
   componentDidLoad() {
     this.mgButtons.forEach(mgButton => {
-      // submit buttons should trigger form submition
-      const button = mgButton.querySelector('button');
-      if (['submit', null].includes(button.getAttribute('type'))) {
+      // submit buttons should trigger form submition;
+      if (['submit', null].includes(mgButton.getAttribute('type'))) {
         mgButton.addEventListener('click', () => {
           this.form.dispatchEvent(new CustomEvent('submit', { bubbles: true }));
         });

package/dist/collection/components/molecules/mg-illustrated-message/doc/mg-illustrated-message.stories.js

@@ -10,9 +10,10 @@ export default {
  */
 const Template = args => {
   // return element
-  return (h("mg-illustrated-message", Object.assign({}, filterArgs(args, { size: 'regular' })), h("svg", { slot: "illustration", width: "190", height: "350", viewBox: "0 0 190 350", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M0 0H15C23.2843 0 30 6.71573 30 15V290H40V15C40 6.71573 46.7157 0 55 0C63.2843 0 70 6.71573 70 15V275C70 277.761 67.7615 280 65 280H60V40H50V340H60V290H65C67.7615 290 70 292.239 70 295V340H80V295C80 291.158 78.5558 287.654 76.1805 285C78.5558 282.346 80 278.842 80 275V0H95C103.284 0 110 6.71573 110 15V25C110 28.8418 108.556 32.3462 106.181 35C108.556 37.6538 110 41.1582 110 45V305C110 307.761 107.761 310 105 310H100V45C100 42.2386 97.7615 40 95 40H90V325C90 333.284 96.7157 340 105 340H120V330H105C102.239 330 100 327.761 100 325V320H105C113.284 320 120 313.284 120 305V15C120 6.71573 126.716 0 135 0C143.284 0 150 6.71573 150 15V330H140V15C140 12.2386 137.761 10 135 10C132.239 10 130 12.2386 130 15V340H165C173.284 340 180 333.284 180 325V15C180 12.2386 177.761 10 175 10H170V325C170 327.761 167.761 330 165 330H160V0H175C183.284 0 190 6.71573 190 15V350H0V0ZM10 325C10 333.284 16.7157 340 25 340C33.2843 340 40 333.284 40 325V300H30V325C30 327.761 27.7615 330 25 330C22.2385 330 20 327.761 20 325V15C20 12.2386 17.7615 10 15 10H10V325ZM60 15V30H50V15C50 12.2386 52.2385 10 55 10C57.7615 10 60 12.2386 60 15ZM95 30H90V10H95C97.7615 10 100 12.2386 100 15V25C100 27.7614 97.7615 30 95 30Z", fill: "black" })), h("h2", { slot: "title" }, "Lorem Ipsum"), h("h3", { slot: "details" }, "The standard Lorem Ipsum passage, used since the 1500s"), h("div", { slot: "details" }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")));
+  return (h("mg-illustrated-message", Object.assign({}, filterArgs(args, { size: 'regular', direction: 'vertical' })), h("svg", { slot: "illustration", width: "190", height: "350", viewBox: "0 0 190 350", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M0 0H15C23.2843 0 30 6.71573 30 15V290H40V15C40 6.71573 46.7157 0 55 0C63.2843 0 70 6.71573 70 15V275C70 277.761 67.7615 280 65 280H60V40H50V340H60V290H65C67.7615 290 70 292.239 70 295V340H80V295C80 291.158 78.5558 287.654 76.1805 285C78.5558 282.346 80 278.842 80 275V0H95C103.284 0 110 6.71573 110 15V25C110 28.8418 108.556 32.3462 106.181 35C108.556 37.6538 110 41.1582 110 45V305C110 307.761 107.761 310 105 310H100V45C100 42.2386 97.7615 40 95 40H90V325C90 333.284 96.7157 340 105 340H120V330H105C102.239 330 100 327.761 100 325V320H105C113.284 320 120 313.284 120 305V15C120 6.71573 126.716 0 135 0C143.284 0 150 6.71573 150 15V330H140V15C140 12.2386 137.761 10 135 10C132.239 10 130 12.2386 130 15V340H165C173.284 340 180 333.284 180 325V15C180 12.2386 177.761 10 175 10H170V325C170 327.761 167.761 330 165 330H160V0H175C183.284 0 190 6.71573 190 15V350H0V0ZM10 325C10 333.284 16.7157 340 25 340C33.2843 340 40 333.284 40 325V300H30V325C30 327.761 27.7615 330 25 330C22.2385 330 20 327.761 20 325V15C20 12.2386 17.7615 10 15 10H10V325ZM60 15V30H50V15C50 12.2386 52.2385 10 55 10C57.7615 10 60 12.2386 60 15ZM95 30H90V10H95C97.7615 10 100 12.2386 100 15V25C100 27.7614 97.7615 30 95 30Z", fill: "black" })), h("h2", { slot: "title" }, "Lorem Ipsum"), h("h3", { slot: "details" }, "The standard Lorem Ipsum passage, used since the 1500s"), h("div", { slot: "details" }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")));
 };
 export const MgIllustratedMessage = Template.bind({});
 MgIllustratedMessage.args = {
   size: 'regular',
+  direction: 'vertical',
 };

package/dist/collection/components/molecules/mg-illustrated-message/mg-illustrated-message.css

@@ -1,11 +1,24 @@
 .mg-illustrated-message {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 3em 7rem;
   margin: auto;
-  padding: 0 1.5rem;
+  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;
 }
@@ -21,17 +34,12 @@
 .mg-illustrated-message__illustration.mg-illustrated-message__illustration--small ::slotted([slot=illustration]) {
   max-height: 6rem;
 }
-
-.mg-illustrated-message__title {
-  margin: 3rem 0 0;
-}
 .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;
 }

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

@@ -6,6 +6,10 @@ export class MgIllustratedMessage {
      * Define illustration size
      */
     this.size = 'regular';
+    /**
+     * Define component orientation
+     */
+    this.direction = 'vertical';
   }
   /*************
    * Lifecycle *
@@ -31,10 +35,13 @@ export class MgIllustratedMessage {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h("div", { class: "mg-illustrated-message" }, h("div", { class: {
+    return (h("div", { class: {
+        'mg-illustrated-message': true,
+        'mg-illustrated-message--horizontal': this.direction === 'horizontal',
+      } }, h("div", { class: {
         'mg-illustrated-message__illustration': true,
         'mg-illustrated-message__illustration--small': this.size === 'small',
-      } }, h("slot", { name: "illustration" })), h("div", { class: "mg-illustrated-message__title" }, h("slot", { name: "title" })), h("div", { class: "mg-illustrated-message__details" }, h("slot", { name: "details" }))));
+      } }, h("slot", { name: "illustration" })), h("div", { class: "mg-illustrated-message__slots" }, h("div", { class: "mg-illustrated-message__title" }, h("slot", { name: "title" })), h("div", { class: "mg-illustrated-message__details" }, h("slot", { name: "details" })))));
   }
   static get is() { return "mg-illustrated-message"; }
   static get encapsulation() { return "shadow"; }
@@ -67,6 +74,24 @@ export class MgIllustratedMessage {
         "attribute": "size",
         "reflect": false,
         "defaultValue": "'regular'"
+      },
+      "direction": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'vertical' | 'horizontal'",
+          "resolved": "\"horizontal\" | \"vertical\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define component orientation"
+        },
+        "attribute": "direction",
+        "reflect": false,
+        "defaultValue": "'vertical'"
       }
     };
   }

package/dist/collection/components/molecules/mg-modal/doc/mg-modal.stories.js

@@ -13,7 +13,7 @@ export default {
  * @returns {HTMLElement} HTMLElement
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Template = (args) => (h("div", null, h("mg-button", { controls: "identifier", haspopup: "dialog", onClick: () => {
+const Template = (args) => (h("div", null, h("mg-button", { "aria-controls": "identifier", "aria-haspopup": "dialog", onClick: () => {
     const mgModal = document.querySelector('mg-modal');
     const isHide = mgModal.hide === true;
     if (isHide) {

package/dist/collection/components/molecules/mg-modal/mg-modal.css

@@ -7,12 +7,13 @@
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: 1000;
+  z-index: 2000;
   padding: 2rem 0;
   background-color: hsla(var(--color-light), 85%);
 }
 .mg-modal__dialog {
   display: flex;
+  position: relative;
   flex-direction: column;
   align-self: center;
   row-gap: 3rem;

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

@@ -1,11 +1,8 @@
 import { h } from '@stencil/core';
-import { createID, ClassList } from '../../../utils/components.utils';
+import { createID, ClassList, focusableElements } from '../../../utils/components.utils';
 import { initLocales } from '../../../locales';
 export class MgModal {
   constructor() {
-    /************
-     * Internal *
-     ************/
     // Classes
     this.classHide = 'mg-modal--hide';
     // IDs
@@ -36,6 +33,37 @@ export class MgModal {
      * Component classes
      */
     this.classList = new ClassList(['mg-modal']);
+    this.setFocus = () => {
+      // Get all focusable elements
+      this.modalFocusableElements = Array.from(this.element.querySelectorAll(focusableElements)).reduce((acc, focusableElement) => {
+        acc.push(focusableElement.shadowRoot !== null ? focusableElement.shadowRoot.querySelector(focusableElements) || focusableElement : focusableElement);
+        return acc;
+      }, []);
+      // When close button is enabled it's the first focusable element.
+      if (this.closeButton) {
+        this.modalFocusableElements.unshift(this.element.shadowRoot.querySelector(`.mg-modal__close-button mg-button`));
+      }
+      // It at least one
+      if (this.modalFocusableElements.length >= 1) {
+        // Set focus on first element
+        this.modalFocusableElements[0].focus();
+        // Add event listener on last element
+        const lastFocusableElement = this.modalFocusableElements[this.modalFocusableElements.length - 1];
+        lastFocusableElement.addEventListener('keydown', event => {
+          if (event.key === 'Tab' && !event.shiftKey) {
+            event.preventDefault();
+            this.modalFocusableElements[0].focus();
+          }
+        });
+        // Add event listener on first element (case shift + tab)
+        this.modalFocusableElements[0].addEventListener('keydown', event => {
+          if (event.key === 'Tab' && event.shiftKey) {
+            event.preventDefault();
+            lastFocusableElement.focus();
+          }
+        });
+      }
+    };
     /*************
      * Handlers *
      *************/
@@ -50,9 +78,7 @@ export class MgModal {
   }
   validateModalTitle(newValue) {
     if (typeof newValue !== 'string' || newValue.trim() === '') {
-      // TODO: throw new Error on next major (5.0.0)
-      // throw new Error('<mg-modal> prop "modalTitle" is required.');
-      console.error('<mg-modal> prop "modalTitle" is required.');
+      throw new Error('<mg-modal> prop "modalTitle" is required.');
     }
   }
   validateHide(newValue) {
@@ -102,6 +128,26 @@ export class MgModal {
     this.validateModalTitle(this.modalTitle);
     this.validateHide(this.hide);
   }
+  /**
+   * Add observer on component to set focus when displayed
+   *
+   * @returns {void}
+   */
+  componentDidLoad() {
+    new MutationObserver(mutationList => {
+      /*
+        TODO find a way to cover this callback
+      */
+      /* istanbul ignore next */
+      if (mutationList.some(mutation => mutation.attributeName === 'aria-hidden' && mutation.target.ariaHidden === null)) {
+        this.setFocus();
+      }
+    }).observe(this.element.shadowRoot.getElementById(this.identifier), { attributes: true });
+    // Set focus if display on load
+    if (!this.hide) {
+      this.setFocus();
+    }
+  }
   /**
    * Render
    *

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

@@ -64,10 +64,11 @@ export class MgPagination {
      * Go to 'previous/next' page button handler
      *
      * @param {string} action navigation action
+     * @param {boolean} disabled button disable state
      * @returns {void}
      */
-    this.handleGoToPage = (action) => {
-      this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);
+    this.handleGoToPage = (action, disabled) => {
+      !disabled && this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);
     };
   }
   validateTotalPages(newValue) {
@@ -111,7 +112,7 @@ export class MgPagination {
   render() {
     const navigationActionButton = (disabled, action) => (h("mg-button", { identifier: `${this.identifier}-button-${action}`, label: this.messages.pagination[`${action}Page`],
       // eslint-disable-next-line react/jsx-no-bind
-      onClick: () => this.handleGoToPage(action), disabled: disabled, variant: "flat" }, action === NavigationAction.PREVIOUS && h("mg-icon", { icon: "chevron-left" }), this.messages.general[action], action === NavigationAction.NEXT && h("mg-icon", { icon: "chevron-right" })));
+      onClick: () => this.handleGoToPage(action, disabled), disabled: disabled, variant: "flat" }, action === NavigationAction.PREVIOUS && h("mg-icon", { icon: "chevron-left" }), this.messages.general[action], action === NavigationAction.NEXT && h("mg-icon", { icon: "chevron-right" })));
     return (h("nav", { "aria-label": this.label, id: this.identifier, class: "mg-pagination" }, navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS), h("mg-input-select", { identifier: `${this.identifier}-select`, items: range(1, this.totalPages).map(page => page.toString()), label: this.messages.pagination.selectPage, "label-hide": true, "on-value-change": this.handleSelect, value: this.currentPage.toString(), "placeholder-hide": true }), h("span", { class: "sr-only" }, this.messages.pagination.page, " ", this.currentPage), h("span", null, "/ ", this.totalPages, " ", this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page), navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT)));
   }
   static get is() { return "mg-pagination"; }

package/dist/collection/components/molecules/mg-panel/doc/mg-panel.stories.js

@@ -12,7 +12,7 @@ export default {
  * @returns {HTMLElement} HTMLElement
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Template = (args) => (h("mg-panel", Object.assign({}, filterArgs(args)), h("div", null, "Content"), h("div", { slot: "header-right" }, h("mg-button", { variant: "secondary" }, h("mg-icon", { icon: "file-upload" }), " Upload"), h("mg-button", Object.assign({}, filterArgs({ isIcon: true }), { variant: "secondary", label: "delete" }), h("mg-icon", { icon: "trash" })))));
+const Template = (args) => (h("mg-panel", Object.assign({}, filterArgs(args)), h("div", null, "Content"), h("div", { slot: "header-right", style: { width: '100%' } }, h("mg-badge", { label: "1", value: "1", style: { 'margin-right': 'auto' } }), h("mg-button", { variant: "secondary" }, h("mg-icon", { icon: "file-upload" }), " Upload"), h("mg-button", Object.assign({}, filterArgs({ isIcon: true }), { variant: "secondary", label: "delete" }), h("mg-icon", { icon: "trash" })))));
 export const MgPanel = Template.bind({});
 MgPanel.args = {
   panelTitle: 'title',