@mgdis/mg-components 5.8.1 → 5.9.1

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

@@ -1,5 +1,5 @@
 import { h } from '@stencil/core';
-import { icons, sizes, variants } from './mg-icon.conf';
+import { icons, sizes, variants, variantStyles } from './mg-icon.conf';
 import { ClassList } from '../../../utils/components.utils';
 export class MgIcon {
   constructor() {
@@ -12,40 +12,50 @@ export class MgIcon {
     this.icon = undefined;
     this.size = 'regular';
     this.variant = undefined;
+    this.variantStyle = undefined;
     this.spin = false;
     this.classList = new ClassList(['mg-icon']);
   }
   validateIcon(newValue, oldValue) {
-    if (!Object.keys(icons).includes(newValue)) {
+    if (!Object.keys(icons).includes(newValue))
       throw new Error(`<mg-icon> prop "icon" must be one of: ${Object.keys(icons).join(', ')}`);
-    }
     else {
-      if (oldValue !== undefined) {
+      if (oldValue !== undefined)
         this.classList.delete(`mg-icon--${oldValue}`);
-      }
       this.classList.add(`mg-icon--${newValue}`);
     }
   }
   validateSize(newValue, oldValue) {
-    if (!sizes.includes(newValue)) {
+    if (!sizes.includes(newValue))
       throw new Error(`<mg-icon> prop "size" must be one of: ${sizes.join(', ')}`);
-    }
     else {
-      if (oldValue !== undefined) {
+      if (oldValue !== undefined)
         this.classList.delete(`mg-icon--size-${oldValue}`);
-      }
       this.classList.add(`mg-icon--size-${newValue}`);
     }
   }
   validateVariant(newValue, oldValue) {
-    if (newValue !== undefined && !variants.includes(newValue)) {
-      throw new Error(`<mg-icon> prop "variant" must be one of: ${variants.join(', ')}`);
+    if (Boolean(newValue)) {
+      if (!variants.includes(newValue))
+        throw new Error(`<mg-icon> prop "variant" must be one of: ${variants.join(', ')}`);
+      else {
+        if (this.variantStyle === undefined)
+          this.variantStyle = 'background';
+        if (oldValue !== undefined)
+          this.classList.delete(`mg-icon--variant-${oldValue}`);
+        this.classList.add(`mg-icon--variant-${newValue}`);
+      }
     }
-    else if (newValue !== undefined) {
-      if (oldValue !== undefined) {
-        this.classList.delete(`mg-icon--variant-${oldValue}`);
+  }
+  validateVariantStyle(newValue, oldValue) {
+    if (Boolean(newValue)) {
+      if (!variantStyles.includes(newValue))
+        throw new Error(`<mg-icon> prop "variantStyle" must be one of: ${variantStyles.join(', ')}`);
+      else {
+        if (oldValue !== undefined)
+          this.classList.delete(`mg-icon--variant-style-${oldValue}`);
+        this.classList.add(`mg-icon--variant-style-${newValue}`);
       }
-      this.classList.add(`mg-icon--variant-${newValue}`);
     }
   }
   handleSpin(newValue) {
@@ -67,6 +77,7 @@ export class MgIcon {
     this.validateIcon(this.icon);
     this.validateSize(this.size);
     this.validateVariant(this.variant);
+    this.validateVariantStyle(this.variantStyle);
     this.handleSpin(this.spin);
   }
   /**
@@ -99,11 +110,11 @@ export class MgIcon {
           "resolved": "string",
           "references": {}
         },
-        "required": false,
+        "required": true,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Icon to display"
+          "text": "Icon to display."
         },
         "attribute": "icon",
         "reflect": false
@@ -113,7 +124,7 @@ export class MgIcon {
         "mutable": false,
         "complexType": {
           "original": "IconSizeType",
-          "resolved": "\"extra-large\" | \"large\" | \"regular\" | \"small\"",
+          "resolved": "\"extra-large\" | \"large\" | \"medium\" | \"regular\" | \"small\"",
           "references": {
             "IconSizeType": {
               "location": "import",
@@ -136,7 +147,7 @@ export class MgIcon {
         "mutable": false,
         "complexType": {
           "original": "IconVariantType",
-          "resolved": "\"danger\" | \"info\" | \"success\" | \"warning\"",
+          "resolved": "\"app\" | \"danger\" | \"info\" | \"success\" | \"warning\"",
           "references": {
             "IconVariantType": {
               "location": "import",
@@ -145,14 +156,36 @@ export class MgIcon {
           }
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
-          "text": "Define icon variant\nAdd a background to the icon based on variant color"
+          "text": "Define icon variant color"
         },
         "attribute": "variant",
         "reflect": false
       },
+      "variantStyle": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "IconVariantStyleType",
+          "resolved": "\"background\" | \"full\" | \"icon\"",
+          "references": {
+            "IconVariantStyleType": {
+              "location": "import",
+              "path": "./mg-icon.conf"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define icon color variant style\nAdd a color to the icon based on variant color with given style\n'full': Used to set a circular background with variant soft color and icon variant color\n'background': Used to set a circular background with variant soft color\n'icon': Used to set a color only to the icon"
+        },
+        "attribute": "variant-style",
+        "reflect": false
+      },
       "spin": {
         "type": "boolean",
         "mutable": false,
@@ -188,6 +221,9 @@ export class MgIcon {
       }, {
         "propName": "variant",
         "methodName": "validateVariant"
+      }, {
+        "propName": "variantStyle",
+        "methodName": "validateVariantStyle"
       }, {
         "propName": "spin",
         "methodName": "handleSpin"

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

@@ -22,8 +22,8 @@
 }
 .mg-tag.mg-tag--primary.mg-tag--soft {
   font-weight: 400;
-  background-color: hsl(var(--color-dark-h), var(--color-dark-s), 90%);
-  border-color: hsl(var(--color-dark-h), var(--color-dark-s), 90%);
+  background-color: hsl(var(--color-dark-h), var(--color-dark-s), var(--mg-color-soft-l));
+  border-color: hsl(var(--color-dark-h), var(--color-dark-s), var(--mg-color-soft-l));
   color: hsl(var(--color-dark));
 }
 .mg-tag.mg-tag--primary.mg-tag--soft ::slotted(mg-icon) {
@@ -40,8 +40,8 @@
 }
 .mg-tag.mg-tag--secondary.mg-tag--soft {
   font-weight: 400;
-  background-color: hsl(var(--color-light-h), var(--color-light-s), 90%);
-  border-color: hsl(var(--color-light-h), var(--color-light-s), 90%);
+  background-color: hsl(var(--color-light-h), var(--color-light-s), var(--mg-color-soft-l));
+  border-color: hsl(var(--color-light-h), var(--color-light-s), var(--mg-color-soft-l));
   color: hsl(var(--color-dark));
 }
 .mg-tag.mg-tag--secondary.mg-tag--soft ::slotted(mg-icon) {
@@ -58,8 +58,8 @@
 }
 .mg-tag.mg-tag--success.mg-tag--soft {
   font-weight: 400;
-  background-color: hsl(var(--color-success-h), var(--color-success-s), 90%);
-  border-color: hsl(var(--color-success-h), var(--color-success-s), 90%);
+  background-color: hsl(var(--color-success-h), var(--color-success-s), var(--mg-color-soft-l));
+  border-color: hsl(var(--color-success-h), var(--color-success-s), var(--mg-color-soft-l));
   color: hsl(var(--color-dark));
 }
 .mg-tag.mg-tag--success.mg-tag--soft ::slotted(mg-icon) {
@@ -76,8 +76,8 @@
 }
 .mg-tag.mg-tag--warning.mg-tag--soft {
   font-weight: 400;
-  background-color: hsl(var(--color-warning-h), var(--color-warning-s), 90%);
-  border-color: hsl(var(--color-warning-h), var(--color-warning-s), 90%);
+  background-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--mg-color-soft-l));
+  border-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--mg-color-soft-l));
   color: hsl(var(--color-dark));
 }
 .mg-tag.mg-tag--warning.mg-tag--soft ::slotted(mg-icon) {
@@ -94,8 +94,8 @@
 }
 .mg-tag.mg-tag--danger.mg-tag--soft {
   font-weight: 400;
-  background-color: hsl(var(--color-danger-h), var(--color-danger-s), 90%);
-  border-color: hsl(var(--color-danger-h), var(--color-danger-s), 90%);
+  background-color: hsl(var(--color-danger-h), var(--color-danger-s), var(--mg-color-soft-l));
+  border-color: hsl(var(--color-danger-h), var(--color-danger-s), var(--mg-color-soft-l));
   color: hsl(var(--color-dark));
 }
 .mg-tag.mg-tag--danger.mg-tag--soft ::slotted(mg-icon) {
@@ -112,8 +112,8 @@
 }
 .mg-tag.mg-tag--info.mg-tag--soft {
   font-weight: 400;
-  background-color: hsl(var(--color-info-h), var(--color-info-s), 90%);
-  border-color: hsl(var(--color-info-h), var(--color-info-s), 90%);
+  background-color: hsl(var(--color-info-h), var(--color-info-s), var(--mg-color-soft-l));
+  border-color: hsl(var(--color-info-h), var(--color-info-s), var(--mg-color-soft-l));
   color: hsl(var(--color-dark));
 }
 .mg-tag.mg-tag--info.mg-tag--soft ::slotted(mg-icon) {

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

@@ -1,5 +1,5 @@
 import { h, Host } from '@stencil/core';
-import { createID, focusableElements } from '../../../utils/components.utils';
+import { createID, focusableElements, getWindows } from '../../../utils/components.utils';
 import { createPopper } from '@popperjs/core';
 import { Guard } from './mg-tooltip.conf';
 export class MgTooltip {
@@ -16,6 +16,14 @@ export class MgTooltip {
       this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
       // Update its position
       this.popper.update();
+      // hide when click outside
+      // setTimeout is used to prevent event to trigger after creation
+      setTimeout(() => {
+        this.windows.forEach((localWindow) => {
+          localWindow.addEventListener('click', this.clickOutside, false);
+          localWindow.addEventListener('keydown', this.pressEscape, false);
+        });
+      }, 0);
     };
     /**
      * Hide tooltip
@@ -27,6 +35,31 @@ export class MgTooltip {
       this.tooltip.removeAttribute('data-show');
       // Disable the event listeners
       this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }] })));
+      // Remove event listener
+      this.windows.forEach((localWindow) => {
+        localWindow.removeEventListener('click', this.clickOutside, false);
+        localWindow.removeEventListener('keyboard', this.pressEscape, false);
+      });
+    };
+    /**
+     * Check if clicked outside of component and hidde tooltip
+     *
+     * @param {MouseEvent} event mouse event
+     * @returns {void}
+     */
+    this.clickOutside = (event) => {
+      if (event.target.closest('mg-tooltip') !== this.element)
+        this.setDisplay(false);
+    };
+    /**
+     * Check if 'Escape' key is pressed of component and hidde tooltip
+     *
+     * @param {KeyboardEvent} event keyboard event
+     * @returns {void}
+     */
+    this.pressEscape = (event) => {
+      if (event.code === 'Escape')
+        this.setDisplay(false);
     };
     /**
      * Method to set display prop
@@ -130,10 +163,7 @@ export class MgTooltip {
         this.resetGuard();
         this.setDisplay(false);
       });
-      document.addEventListener('keydown', (event) => {
-        if (event.code === 'Escape')
-          this.setDisplay(false);
-      });
+      document.addEventListener('keydown', this.pressEscape);
       // manage tooltipElement & tooltipedElement mouseenter/mouseleave events
       ['mouseenter', 'mouseleave'].forEach(eventType => {
         const isMouseenter = eventType === 'mouseenter';
@@ -170,6 +200,15 @@ export class MgTooltip {
   /*************
    * Lifecycle *
    *************/
+  /**
+   * set variables
+   *
+   * @returns {void}
+   */
+  componentWillLoad() {
+    // Get windows to attach events
+    this.windows = getWindows(window);
+  }
   /**
    * Get slotted element
    * Check if it already contain an interactive element, if not we need to add a tabIndex attribute

package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.js

@@ -75,22 +75,23 @@ export class MgInputNumeric {
      */
     this.getInputError = () => {
       let inputError = null;
-      if (this.input === undefined || this.input === null)
+      const hasNotEmptyValues = (toControl) => !toControl.some(value => [null, undefined].includes(value));
+      if (!hasNotEmptyValues([this.input]))
         return inputError;
       // required
       if (!this.input.checkValidity() && this.input.validity.valueMissing) {
         inputError = InputError.REQUIRED;
       }
       // Min & Max
-      else if (this.min !== undefined && this.numericValue < this.min && this.max === undefined) {
+      else if (hasNotEmptyValues([this.min, this.numericValue]) && this.numericValue < this.min && this.max === undefined) {
         // Only a min value is set
         inputError = InputError.MIN;
       }
-      else if (this.max !== undefined && this.numericValue > this.max && this.min === undefined) {
+      else if (hasNotEmptyValues([this.max, this.numericValue]) && this.numericValue > this.max && this.min === undefined) {
         // Only a max value is set
         inputError = InputError.MAX;
       }
-      else if ((this.min !== undefined && this.numericValue < this.min) || (this.max !== undefined && this.numericValue > this.max)) {
+      else if (hasNotEmptyValues([this.min, this.max, this.numericValue]) && (this.numericValue < this.min || this.numericValue > this.max)) {
         // both min and max values are set
         inputError = InputError.MINMAX;
       }
@@ -140,7 +141,8 @@ export class MgInputNumeric {
     this.hasFocus = false;
   }
   validateValue(newValue) {
-    if (newValue !== undefined && newValue !== null) {
+    // has input value is always render as string we get a stringified value or a '' for nullish value, so we test string type
+    if (typeof newValue === 'string') {
       // Split number and decimal
       const [integer, decimal = ''] = newValue.replace('-', '').split(/[\.,]/);
       // Regex
@@ -160,7 +162,7 @@ export class MgInputNumeric {
       if (this.input !== undefined)
         this.input.value = this.value;
       // emit numeric value
-      this.numericValue = this.value !== '' && this.value !== null ? parseFloat(this.value.replace(',', '.')) : null;
+      this.numericValue = !['', null].includes(this.value) ? parseFloat(this.value.replace(',', '.')) : null;
       this.valueChange.emit(this.numericValue);
       // Set readonlyValue
       this.readonlyValue = this.numericValue !== null ? this.formatValue(this.numericValue) : '';
@@ -205,7 +207,7 @@ export class MgInputNumeric {
    * Displayed value in input
    * Change on focus/blur
    *
-   * @returns {string} display value
+   * @returns {MgInputNumeric['value'] | MgInputNumeric['readonlyValue']} display value
    */
   displayValue() {
     return this.hasFocus ? this.value : this.readonlyValue;
@@ -223,11 +225,12 @@ export class MgInputNumeric {
     const locales = initLocales(this.element);
     this.locale = locales.locale;
     this.messages = locales.messages;
-    // Validate
-    this.validateValue(this.value);
+    // Validate component config
     this.validateType(this.type);
     this.validateIntegerLength(this.integerLength);
     this.validateDecimalLength(this.decimalLength);
+    // validate value
+    this.validateValue(this.value);
     this.validateAppendSlot();
     // Check validity when component is ready
     // return a promise to process action only in the FIRST render().

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

@@ -232,7 +232,7 @@ export class MgMenu {
         "mutable": false,
         "complexType": {
           "original": "ItemMoreType",
-          "resolved": "{ size: \"regular\" | \"large\" | \"medium\"; icon: IconType; slotlabel: SlotLabelType; }",
+          "resolved": "{ size: \"regular\" | \"medium\" | \"large\"; icon: IconType; slotlabel: SlotLabelType; }",
           "references": {
             "ItemMoreType": {
               "location": "import",

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

@@ -285,6 +285,7 @@
   display: flex;
   --mg-popover-padding-vertical: 0;
   --mg-popover-padding-horizontal: 0;
+  --mg-popover-max-width: unset;
 }
 
 :host([data-style-direction-vertical]) {

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

@@ -294,7 +294,7 @@ export class MgMenuItem {
         [`${this.navigationButton}-chevron`]: true,
         [`${this.navigationButton}-chevron--rotate`]: this.expanded === true,
         'mg-a11y-animation': true,
-      } }, h("mg-icon", { icon: "chevron-down" })))));
+      } }, h("mg-icon", { icon: "chevron-down", size: "small" })))));
   }
   /**
    * Render

package/dist/collection/components/molecules/mg-action-more/mg-action-more.css

@@ -28,6 +28,7 @@
 :host {
   --mg-popover-padding-vertical: 1rem;
   --mg-popover-padding-horizontal: 0;
+  --mg-popover-max-width: unset;
 }
 
 .mg-action-more__chevron {

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

@@ -40,9 +40,6 @@
   gap: 0.6rem;
   min-height: calc(var(--font-size) * var(--line-height));
 }
-.mg-details__toggle mg-icon {
-  align-self: self-end;
-}
 
 .mg-details__details {
   margin-top: 1.5rem;

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

@@ -40,7 +40,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' }), h("span", { class: { 'sr-only': this.hideSummary } }, 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', size: "small" }), 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"; }

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

@@ -26,7 +26,8 @@ export class MgItemMore {
       Array.from(moreElementMenuItem.querySelectorAll('mg-menu-item:not([data-overflow-more])')).forEach((proxy, index) => {
         // manage click on proxy to mirror it on initial element
         proxy.addEventListener('click', () => {
-          (allMenuItem[index].shadowRoot.querySelector('a') || allMenuItem[index].shadowRoot.querySelector('button')).dispatchEvent(new MouseEvent('click', { bubbles: true }));
+          // be carefull to use element.click() method instead of dispatchEvent to ensure bubbles outside shadowDom
+          allMenuItem[index].shadowRoot.querySelector('a, button').click();
         });
         // add id suffix to prevent duplicate key. default html id is: '';
         if (proxy.id.trim() !== '')

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

@@ -9,34 +9,15 @@
   display: inline-block;
   min-height: var(--default-size);
 }
-.mg-message__bar {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 0.3rem;
-  height: 100%;
-}
-.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 .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 .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 .mg-message__bar {
-  background-color: hsl(var(--color-danger));
-}
 .mg-message.mg-message--danger .mg-message__icon {
   color: hsl(var(--color-danger));
 }
@@ -87,6 +68,7 @@
   --mg-card-border-radius: var(--mg-card-border-radius-default);
   --mg-card-background: var(--mg-card-background-default);
   --mg-card-box-shadow: var(--mg-card-box-shadow-default);
+  --mg-card-max-width: unset;
 }
 
 .mg-message,

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

@@ -158,7 +158,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("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" })))))));
+    return (h("div", { id: this.identifier, class: this.classList.join(), role: this.variant === 'info' ? 'status' : 'alert' }, h("mg-card", { variant: this.variant, "variant-style": "bar-left" }, 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"; }
@@ -213,9 +213,14 @@ export class MgMessage {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "VariantType",
+          "resolved": "\"danger\" | \"info\" | \"success\" | \"warning\"",
+          "references": {
+            "VariantType": {
+              "location": "import",
+              "path": "./mg-message.conf"
+            }
+          }
         },
         "required": false,
         "optional": false,

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

@@ -62,4 +62,5 @@
   --mg-card-border-radius: var(--mg-card-border-radius-default);
   --mg-card-background: var(--mg-card-background-default);
   --mg-card-box-shadow: var(--mg-card-box-shadow-default);
+  --mg-card-max-width: unset;
 }

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

@@ -52,4 +52,5 @@
   --mg-card-border-radius: var(--mg-card-border-radius-default);
   --mg-card-background: var(--mg-card-background-default);
   --mg-card-box-shadow: var(--mg-card-box-shadow-default);
+  --mg-card-max-width: unset;
 }

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

@@ -17,6 +17,7 @@
   color: hsl(var(--mg-popover-font-color));
 }
 .mg-popover mg-card {
+  --mg-card-max-width: var(--mg-popover-max-width);
   position: relative;
 }
 .mg-popover[data-show] {
@@ -115,4 +116,5 @@
   --mg-card-border-radius: var(--mg-card-border-radius-default);
   --mg-card-background: var(--mg-card-background-default);
   --mg-card-box-shadow: var(--mg-card-box-shadow-default);
+  --mg-card-max-width: unset;
 }

package/dist/collection/styles/reset-mg-card-slotted-variables.scss

@@ -5,5 +5,6 @@
     --mg-card-border-radius: var(--mg-card-border-radius-default);
     --mg-card-background: var(--mg-card-background-default);
     --mg-card-box-shadow: var(--mg-card-box-shadow-default);
+    --mg-card-max-width: unset;
   }
 }

package/dist/collection/variables.css

@@ -98,6 +98,9 @@
   /* Shadow */
   --box-shadow: 0 0.3rem 0.8rem 0 hsl(var(--color-dark), 0.15);
 
+  /* Soft style */
+  --mg-color-soft-l: 90%;
+
   /*
     Global
    */
@@ -109,8 +112,10 @@
    */
   --mg-icon-small-size: 1.2rem;
   --mg-icon-regular-size: 1.6rem;
+  --mg-icon-medium-size: 2rem;
   --mg-icon-large-size: 2.4rem;
-  --mg-icon-extra-large-size: 3.6rem;
+  --mg-icon-extra-large-size: 3.2rem;
+  --mg-icon-border-radius: 50%;
 
   /*
     <mg-button>
@@ -160,6 +165,7 @@
   --mg-popover-background-color: var(--color-light);
   --mg-popover-font-color: var(--color-font-dark);
   --mg-popover-title-font-size: 1.4rem;
+  --mg-popover-max-width: 40rem;
 
   /*
     <mg-message>

package/dist/components/mg-action-more.js

@@ -10,7 +10,7 @@ import { d as defineCustomElement$5 } from './mg-icon2.js';
 import { d as defineCustomElement$4 } from './mg-menu2.js';
 import { d as defineCustomElement$2 } from './mg-popover2.js';
 
-const mgActionMoreCss = ".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}}:host{--mg-popover-padding-vertical:1rem;--mg-popover-padding-horizontal:0}.mg-action-more__chevron{transition:200ms}.mg-action-more__chevron--rotate.mg-action-more__chevron{transform:rotate(180deg)}";
+const mgActionMoreCss = ".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}}:host{--mg-popover-padding-vertical:1rem;--mg-popover-padding-horizontal:0;--mg-popover-max-width:unset}.mg-action-more__chevron{transition:200ms}.mg-action-more__chevron--rotate.mg-action-more__chevron{transform:rotate(180deg)}";
 
 /**
  * MgActionMore['items'] type guard