@mgdis/mg-components 5.3.0 → 5.5.0

package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.css

@@ -1,3 +1,30 @@
+/**
+ * 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;
+}
+
+@media (prefers-reduced-motion) {
+  .mg-a11y-animation {
+    animation: none !important;
+    transition: none !important;
+  }
+}
 .mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button,
 .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular {
   padding: 1rem 2rem;
@@ -103,7 +130,7 @@
   border-left: 0.3rem solid transparent;
 }
 
-:host(.mg-menu-item--vertical[data-level="1"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular {
+:host([data-style-direction-vertical][data-level="1"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular {
   padding-left: calc(1 * 2rem - 0.3rem);
 }
 
@@ -111,7 +138,7 @@
   z-index: calc(1 * 10);
 }
 
-:host(.mg-menu-item--vertical[data-level="2"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular {
+:host([data-style-direction-vertical][data-level="2"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular {
   padding-left: calc(2 * 2rem - 0.3rem);
 }
 
@@ -119,7 +146,7 @@
   z-index: calc(2 * 10);
 }
 
-:host(.mg-menu-item--vertical[data-level="3"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular {
+:host([data-style-direction-vertical][data-level="3"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular {
   padding-left: calc(3 * 2rem - 0.3rem);
 }
 
@@ -127,7 +154,7 @@
   z-index: calc(3 * 10);
 }
 
-:host(.mg-menu-item--vertical[data-level="4"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular {
+:host([data-style-direction-vertical][data-level="4"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular {
   padding-left: calc(4 * 2rem - 0.3rem);
 }
 
@@ -135,7 +162,7 @@
   z-index: calc(4 * 10);
 }
 
-:host(.mg-menu-item--vertical[data-level="5"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular {
+:host([data-style-direction-vertical][data-level="5"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular {
   padding-left: calc(5 * 2rem - 0.3rem);
 }
 
@@ -143,7 +170,7 @@
   z-index: calc(5 * 10);
 }
 
-:host(.mg-menu-item--vertical[data-level="6"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular {
+:host([data-style-direction-vertical][data-level="6"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular {
   padding-left: calc(6 * 2rem - 0.3rem);
 }
 
@@ -151,7 +178,7 @@
   z-index: calc(6 * 10);
 }
 
-:host(.mg-menu-item--vertical[data-level="1"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium {
+:host([data-style-direction-vertical][data-level="1"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium {
   padding-left: calc(1 * 3rem - 0.3rem);
 }
 
@@ -159,7 +186,7 @@
   z-index: calc(1 * 10);
 }
 
-:host(.mg-menu-item--vertical[data-level="2"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium {
+:host([data-style-direction-vertical][data-level="2"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium {
   padding-left: calc(2 * 3rem - 0.3rem);
 }
 
@@ -167,7 +194,7 @@
   z-index: calc(2 * 10);
 }
 
-:host(.mg-menu-item--vertical[data-level="3"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium {
+:host([data-style-direction-vertical][data-level="3"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium {
   padding-left: calc(3 * 3rem - 0.3rem);
 }
 
@@ -175,7 +202,7 @@
   z-index: calc(3 * 10);
 }
 
-:host(.mg-menu-item--vertical[data-level="4"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium {
+:host([data-style-direction-vertical][data-level="4"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium {
   padding-left: calc(4 * 3rem - 0.3rem);
 }
 
@@ -183,7 +210,7 @@
   z-index: calc(4 * 10);
 }
 
-:host(.mg-menu-item--vertical[data-level="5"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium {
+:host([data-style-direction-vertical][data-level="5"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium {
   padding-left: calc(5 * 3rem - 0.3rem);
 }
 
@@ -191,7 +218,7 @@
   z-index: calc(5 * 10);
 }
 
-:host(.mg-menu-item--vertical[data-level="6"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium {
+:host([data-style-direction-vertical][data-level="6"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium {
   padding-left: calc(6 * 3rem - 0.3rem);
 }
 
@@ -199,7 +226,7 @@
   z-index: calc(6 * 10);
 }
 
-:host(.mg-menu-item--vertical[data-level="1"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large {
+:host([data-style-direction-vertical][data-level="1"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large {
   padding-left: calc(1 * 4rem - 0.3rem);
 }
 
@@ -207,7 +234,7 @@
   z-index: calc(1 * 10);
 }
 
-:host(.mg-menu-item--vertical[data-level="2"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large {
+:host([data-style-direction-vertical][data-level="2"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large {
   padding-left: calc(2 * 4rem - 0.3rem);
 }
 
@@ -215,7 +242,7 @@
   z-index: calc(2 * 10);
 }
 
-:host(.mg-menu-item--vertical[data-level="3"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large {
+:host([data-style-direction-vertical][data-level="3"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large {
   padding-left: calc(3 * 4rem - 0.3rem);
 }
 
@@ -223,7 +250,7 @@
   z-index: calc(3 * 10);
 }
 
-:host(.mg-menu-item--vertical[data-level="4"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large {
+:host([data-style-direction-vertical][data-level="4"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large {
   padding-left: calc(4 * 4rem - 0.3rem);
 }
 
@@ -231,7 +258,7 @@
   z-index: calc(4 * 10);
 }
 
-:host(.mg-menu-item--vertical[data-level="5"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large {
+:host([data-style-direction-vertical][data-level="5"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large {
   padding-left: calc(5 * 4rem - 0.3rem);
 }
 
@@ -239,7 +266,7 @@
   z-index: calc(5 * 10);
 }
 
-:host(.mg-menu-item--vertical[data-level="6"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large {
+:host([data-style-direction-vertical][data-level="6"]) .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large {
   padding-left: calc(6 * 4rem - 0.3rem);
 }
 
@@ -252,29 +279,29 @@
   display: flex;
 }
 
-:host(.mg-menu-item--last) .mg-menu-item__collapse-container {
+:host([data-style-position-last]) .mg-menu-item__collapse-container {
   left: unset;
   right: 0;
 }
 
-:host(.mg-menu-item--vertical) {
+:host([data-style-direction-vertical]) {
   flex-direction: column;
 }
-:host(.mg-menu-item--vertical) .mg-menu-item__collapse-container {
+:host([data-style-direction-vertical]) .mg-menu-item__collapse-container {
   left: unset;
   top: unset;
   position: unset;
   width: unset;
 }
-:host(.mg-menu-item--vertical) .mg-menu-item-chevron {
+:host([data-style-direction-vertical]) .mg-menu-item-chevron {
   margin-left: auto;
 }
 
-:host(.mg-menu-item--horizontal) .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level {
+:host([data-style-direction-horizontal]) .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level {
   box-shadow: var(--box-shadow);
   background-color: hsl(var(--color-light));
 }
-:host(.mg-menu-item--horizontal) .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level ::slotted(mg-menu) {
+:host([data-style-direction-horizontal]) .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level ::slotted(mg-menu) {
   padding: 1rem 0;
 }
 
@@ -313,4 +340,8 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+}
+
+:host([status=disabled]) {
+  pointer-events: none;
 }

package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.js

@@ -1,7 +1,7 @@
 import { h, Host } from '@stencil/core';
 import { ClassList } from '../../../../utils/components.utils';
 import { Direction } from '../mg-menu/mg-menu.conf';
-import { ElementPosition, sizes, Status } from './mg-menu-item.conf';
+import { sizes, Status } from './mg-menu-item.conf';
 export class MgMenuItem {
   constructor() {
     /************
@@ -9,33 +9,6 @@ export class MgMenuItem {
      ************/
     this.name = 'mg-menu-item';
     this.navigationButton = `${this.name}__navigation-button`;
-    /**
-     * Define menu-item status. Default: "visible"
-     */
-    this.status = Status.VISIBLE;
-    /**
-     * Define menu-item size. Default: "large".
-     */
-    this.size = 'large';
-    /**
-     * Define menu-item content expanded. Default: false.
-     */
-    this.expanded = false;
-    /************
-     * States *
-     ************/
-    /**
-     * Component classes
-     */
-    this.classList = new ClassList([this.name]);
-    /**
-     * Component button classes
-     */
-    this.navigationButtonClassList = new ClassList([this.navigationButton]);
-    /**
-     * Does component have children. Default: false.
-     */
-    this.hasChildren = false;
     /************
      * Methods *
      ************/
@@ -72,10 +45,22 @@ export class MgMenuItem {
      * @returns {void}
      */
     this.handleElementCLick = (event) => {
-      event.preventDefault();
+      if (this.hasChildren || this.status === Status.DISABLED) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+      // toggle expanded when mg-menu-item has child items
       if (this.hasChildren)
         this.toggleExpanded();
     };
+    this.href = undefined;
+    this.status = Status.VISIBLE;
+    this.size = 'large';
+    this.expanded = false;
+    this.navigationButtonClassList = new ClassList([this.navigationButton]);
+    this.direction = undefined;
+    this.isInMainMenu = undefined;
+    this.hasChildren = false;
   }
   validateStatus(newValue, oldValue) {
     if (oldValue !== undefined) {
@@ -166,7 +151,7 @@ export class MgMenuItem {
       const hasPreviousMenuItem = ((_b = this.element.previousElementSibling) === null || _b === void 0 ? void 0 : _b.nodeName) === 'MG-MENU-ITEM';
       // manage last menu item
       if (!hasNextMenuItem && hasPreviousMenuItem && this.isdirection(Direction.HORIZONTAL)) {
-        this.classList.add(`${this.name}--${ElementPosition.LAST}`);
+        this.element.setAttribute('data-style-position-last', '');
       }
       // when main menu item contain an active item it will get the active style
       // AND if item is in vertical menu it will be expanded
@@ -175,7 +160,7 @@ export class MgMenuItem {
         this.expanded = this.direction === Direction.VERTICAL;
       }
       // manage menu items style depending to parent menu horientation
-      this.classList.add(`${this.name}--${this.direction}`);
+      this.element.setAttribute(`data-style-direction-${this.direction}`, '');
       this.navigationButtonClassList.add(`${this.navigationButton}--${this.direction}`);
       // manage child items level
       const childItems = Array.from(this.element.querySelectorAll('mg-menu-item'));
@@ -194,9 +179,10 @@ export class MgMenuItem {
    */
   render() {
     const TagName = this.href !== undefined ? 'a' : 'button';
-    return (h(Host, { role: "menuitem", "aria-haspopup": this.hasChildren.toString(), class: this.classList.join() }, h(TagName, { href: this.href, class: this.navigationButtonClassList.join(), tabindex: [Status.DISABLED, Status.HIDDEN].includes(this.status) ? -1 : 0, disabled: this.status === Status.DISABLED, "aria-expanded": this.hasChildren && this.expanded.toString(), "aria-current": this.status === Status.ACTIVE && 'page', onClick: this.handleElementCLick }, h("slot", { name: "illustration" }), h("div", { class: `${this.navigationButton}-center` }, h("div", { class: `${this.navigationButton}-text-content` }, h("slot", { name: "label" }), h("slot", { name: "information" })), h("slot", { name: "metadata" })), this.hasChildren && this.href === undefined && (h("span", { class: {
+    return (h(Host, { role: "menuitem", "aria-haspopup": this.hasChildren.toString() }, h(TagName, { href: this.href, class: this.navigationButtonClassList.join(), tabindex: [Status.DISABLED, Status.HIDDEN].includes(this.status) ? -1 : 0, disabled: this.status === Status.DISABLED, "aria-expanded": this.hasChildren && this.expanded.toString(), "aria-current": this.status === Status.ACTIVE && 'page', onClick: this.handleElementCLick }, h("slot", { name: "illustration" }), h("div", { class: `${this.navigationButton}-center` }, h("div", { class: `${this.navigationButton}-text-content` }, h("slot", { name: "label" }), h("slot", { name: "information" })), h("slot", { name: "metadata" })), this.hasChildren && this.href === undefined && (h("span", { class: {
         [`${this.navigationButton}-chevron`]: true,
         [`${this.navigationButton}-chevron--rotate`]: this.expanded === true,
+        'mg-a11y-animation': true,
       } }, h("mg-icon", { icon: "chevron-down" })))), h("div", { class: { [`${this.name}__collapse-container`]: true, [`${this.name}__collapse-container--first-level`]: this.isInMainMenu && this.isdirection(Direction.HORIZONTAL) }, hidden: !this.expanded }, h("slot", null))));
   }
   static get is() { return "mg-menu-item"; }
@@ -298,7 +284,6 @@ export class MgMenuItem {
   }
   static get states() {
     return {
-      "classList": {},
       "navigationButtonClassList": {},
       "direction": {},
       "isInMainMenu": {},

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

@@ -19,6 +19,12 @@
   outline: none;
 }
 
+@media (prefers-reduced-motion) {
+  .mg-a11y-animation {
+    animation: none !important;
+    transition: none !important;
+  }
+}
 .mg-details summary {
   display: flex;
   align-items: baseline;

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

@@ -1,14 +1,6 @@
 import { h } from '@stencil/core';
 export class MgDetails {
   constructor() {
-    /**
-     * Hide summary element
-     */
-    this.hideSummary = false;
-    /**
-     * Define if details are diplayed
-     */
-    this.expanded = false;
     /**
      * Handle details toggle
      *
@@ -17,6 +9,10 @@ export class MgDetails {
     this.handleToggle = () => {
       this.expanded = this.details.open;
     };
+    this.toggleClosed = undefined;
+    this.toggleOpened = undefined;
+    this.hideSummary = false;
+    this.expanded = false;
   }
   validateTitles(newValue) {
     if (newValue === undefined || newValue.trim() === '') {

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

@@ -5,28 +5,6 @@ export class MgForm {
   constructor() {
     // Classes
     this.classAllRequired = 'mg-form--all-required';
-    /**
-     * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
-     * If not set, it will be created.
-     */
-    this.identifier = createID('mg-form');
-    /**
-     * Input name
-     * If not set the value equals the identifier
-     */
-    this.name = this.identifier;
-    /**
-     * Define if form is readonly
-     */
-    this.readonly = false;
-    /**
-     * Define if form is disabled
-     */
-    this.disabled = false;
-    /**
-     * Component classes
-     */
-    this.classList = new ClassList(['mg-form']);
     /**
      * Define required message based on mg-inputs required elements
      * Also
@@ -87,7 +65,7 @@ export class MgForm {
       this.mgInputs = Array.from(this.element.querySelectorAll('*')).filter((node) => node.nodeName.startsWith('MG-INPUT-'));
       // Set inputs readonly or disabled based on form configuration
       // Othewise listen to events
-      this.mgInputs.map(input => {
+      this.mgInputs.forEach(input => {
         if (this.readonly)
           input.readonly = true;
         else if (this.disabled)
@@ -96,6 +74,14 @@ export class MgForm {
           input.addEventListener('input-valid', this.checkValidity);
       });
     };
+    this.identifier = createID('mg-form');
+    this.name = this.identifier;
+    this.readonly = false;
+    this.disabled = false;
+    this.valid = undefined;
+    this.invalid = undefined;
+    this.classList = new ClassList(['mg-form']);
+    this.requiredMessage = undefined;
   }
   handleAttributeChange() {
     this.setMgInputs();

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

@@ -20,13 +20,13 @@
   max-width: 47.5rem;
 }
 .mg-illustrated-message__illustration {
-  max-height: 33.5rem;
+  max-height: 18.4rem;
 }
 .mg-illustrated-message__illustration ::slotted([slot=illustration]) {
   width: auto;
   height: auto;
   max-width: 100%;
-  max-height: 33.5rem;
+  max-height: 18.4rem;
 }
 .mg-illustrated-message__illustration.mg-illustrated-message__illustration--small {
   max-height: 6rem;

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

@@ -2,13 +2,7 @@ import { h } from '@stencil/core';
 import { isTagName } from '../../../utils/components.utils';
 export class MgIllustratedMessage {
   constructor() {
-    /**
-     * Define illustration size
-     */
     this.size = 'regular';
-    /**
-     * Define component orientation
-     */
     this.direction = 'vertical';
   }
   /*************

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

@@ -1,47 +1,47 @@
+:host {
+  --mg-card-padding: 0;
+  --mg-card-border-radius: var(--mg-message-border-radius);
+  --mg-card-border: none;
+  --mg-card-overflow: hidden;
+}
+
 .mg-message {
   display: inline-block;
-  position: relative;
-  box-sizing: border-box;
   min-height: var(--default-size);
-  overflow: hidden;
-  background-color: white;
-  border-radius: var(--mg-message-border-radius);
-  box-shadow: var(--box-shadow);
 }
-.mg-message::before {
-  content: "";
+.mg-message__bar {
   position: absolute;
   top: 0;
   left: 0;
   width: 0.3rem;
   height: 100%;
 }
-.mg-message.mg-message--info::before {
+.mg-message.mg-message--info .mg-message__bar {
   background-color: hsl(var(--color-info));
 }
 .mg-message.mg-message--info .mg-message__icon {
   color: hsl(var(--color-info));
 }
-.mg-message.mg-message--warning::before {
+.mg-message.mg-message--warning .mg-message__bar {
   background-color: hsl(var(--color-warning));
 }
 .mg-message.mg-message--warning .mg-message__icon {
   color: hsl(var(--color-warning));
 }
-.mg-message.mg-message--success::before {
+.mg-message.mg-message--success .mg-message__bar {
   background-color: hsl(var(--color-success));
 }
 .mg-message.mg-message--success .mg-message__icon {
   color: hsl(var(--color-success));
 }
-.mg-message.mg-message--danger::before {
+.mg-message.mg-message--danger .mg-message__bar {
   background-color: hsl(var(--color-danger));
 }
 .mg-message.mg-message--danger .mg-message__icon {
   color: hsl(var(--color-danger));
 }
 .mg-message.mg-message--close-button {
-  padding-right: 3.4rem;
+  --mg-card-padding: 0 3.4rem 0 0;
 }
 .mg-message.mg-message--hide {
   display: none;
@@ -50,14 +50,12 @@
   margin: 0;
   padding: 0;
 }
-
 .mg-message__icon {
   position: absolute;
   top: calc((var(--default-size) - var(--mg-icon-regular-size)) / 2);
   left: 1.3rem;
   line-height: 1;
 }
-
 .mg-message__content {
   display: flex;
   flex-wrap: wrap;
@@ -65,23 +63,19 @@
   align-content: stretch;
   padding: 0 1rem 0 3.8rem;
 }
-
 .mg-message__content-slot {
   flex-grow: 1;
   margin: 0.84rem 0;
 }
-
 .mg-message__content-separator {
   display: inline-block;
   width: 4.5rem;
   height: 0;
 }
-
 .mg-message__content-actions-slot {
   padding: 1rem 0;
   text-align: right;
 }
-
 .mg-message__close-button {
   position: absolute;
   top: 0;

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

@@ -13,32 +13,6 @@ export class MgMessage {
     this.closeButtonId = '';
     // Stored timer setted when hide action is run from setTimeOut
     this.storedTimer = null;
-    /**
-     * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
-     * If not set, it will be created.
-     */
-    this.identifier = createID('mg-message');
-    /**
-     * Message variant
-     */
-    this.variant = variants[0]; // info
-    /**
-     * Define if message has a cross button
-     * RG 01: https://jira.mgdis.fr/browse/PDA9-140
-     */
-    this.closeButton = false;
-    /**
-     * Define if message is hidden
-     */
-    this.hide = false;
-    /**
-     * Component classes
-     */
-    this.classList = new ClassList(['mg-message']);
-    /**
-     * Define if component is using actions slot
-     */
-    this.hasActions = false;
     /**
      * Handle close button
      */
@@ -75,6 +49,13 @@ export class MgMessage {
           break;
       }
     };
+    this.identifier = createID('mg-message');
+    this.delay = undefined;
+    this.variant = variants[0];
+    this.closeButton = false;
+    this.hide = false;
+    this.classList = new ClassList(['mg-message']);
+    this.hasActions = false;
   }
   validateDelay(newValue) {
     if (newValue && newValue < 2) {
@@ -136,7 +117,7 @@ export class MgMessage {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h("div", { id: this.identifier, class: this.classList.join(), role: this.variant === 'info' ? 'status' : 'alert' }, h("span", { class: "mg-message__icon" }, h("mg-icon", { icon: this.getIcon() })), h("div", { class: "mg-message__content" }, h("span", { class: "mg-message__content-slot" }, h("slot", null)), this.hasActions && h("span", { class: "mg-message__content-separator" }), this.hasActions && (h("span", { class: "mg-message__content-actions-slot" }, h("slot", { name: "actions" })))), this.closeButton && (h("span", { class: "mg-message__close-button" }, h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.message.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" }))))));
+    return (h("div", { id: this.identifier, class: this.classList.join(), role: this.variant === 'info' ? 'status' : 'alert' }, h("mg-card", null, h("span", { class: "mg-message__bar" }), h("span", { class: "mg-message__icon" }, h("mg-icon", { icon: this.getIcon() })), h("div", { class: "mg-message__content" }, h("span", { class: "mg-message__content-slot" }, h("slot", null)), this.hasActions && h("span", { class: "mg-message__content-separator" }), this.hasActions && (h("span", { class: "mg-message__content-actions-slot" }, h("slot", { name: "actions" })))), this.closeButton && (h("span", { class: "mg-message__close-button" }, h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.message.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" })))))));
   }
   static get is() { return "mg-message"; }
   static get encapsulation() { return "shadow"; }

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

@@ -1,3 +1,9 @@
+:host {
+  --mg-card-border-radius: var(--mg-modal-border-radius);
+  --mg-card-padding: 1.5rem 2.5rem;
+  --mg-card-border: none;
+}
+
 .mg-modal {
   display: flex;
   justify-content: center;
@@ -11,21 +17,20 @@
   padding: 2rem 0;
   background-color: hsla(var(--color-light), 85%);
 }
+.mg-modal mg-card {
+  display: flex;
+  width: 60rem;
+  max-width: 100%;
+  max-height: 100%;
+}
 .mg-modal__dialog {
   display: flex;
   position: relative;
   flex-direction: column;
   align-self: center;
   row-gap: 3rem;
-  padding: 1.5rem 2.5rem;
-  width: 60rem;
   height: fit-content;
-  max-width: 100%;
   max-height: 100%;
-  box-sizing: border-box;
-  background-color: hsl(var(--color-light));
-  box-shadow: var(--box-shadow);
-  border-radius: var(--mg-modal-border-radius);
 }
 .mg-modal__header {
   margin-bottom: 0.5rem;