@mgdis/mg-components 5.8.2 → 5.9.1

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

package/dist/components/mg-card2.js

@@ -1,26 +1,80 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { C as ClassList } from './components.utils.js';
 
-const mgCardCss = ".mg-card{position:relative;width:100%;padding:var(--mg-card-padding, var(--mg-card-padding-default));overflow:var(--mg-card-overflow, var(--mg-card-overflow-default));box-sizing:border-box;z-index:inherit;background:var(--mg-card-background, var(--mg-card-background-default));border:var(--mg-card-border, var(--mg-card-border-default));border-radius:var(--mg-card-border-radius, var(--mg-card-border-radius-default));box-shadow:var(--mg-card-box-shadow, var(--mg-card-box-shadow-default))}.mg-card ::slotted(*){--mg-card-border:var(--mg-card-border-default);--mg-card-padding:var(--mg-card-padding-default);--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)}";
+/**
+ * List available variants
+ */
+const variants = ['info', 'warning', 'success', 'danger', 'app'];
+/**
+ * List available variant styles
+ */
+const variantStyles = ['bar-left', 'fill'];
+
+const mgCardCss = ".mg-card{position:relative;width:100%;max-width:var(--mg-card-max-width);padding:var(--mg-card-padding, var(--mg-card-padding-default));overflow:var(--mg-card-overflow, var(--mg-card-overflow-default));box-sizing:border-box;z-index:inherit;background:var(--mg-card-background, var(--mg-card-background-default));border:var(--mg-card-border, var(--mg-card-border-default));border-radius:var(--mg-card-border-radius, var(--mg-card-border-radius-default));box-shadow:var(--mg-card-box-shadow, var(--mg-card-box-shadow-default))}.mg-card ::slotted(*){--mg-card-border:var(--mg-card-border-default);--mg-card-padding:var(--mg-card-padding-default);--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-card.mg-card--info{overflow:hidden}.mg-card.mg-card--info.mg-card--bar-left .mg-card__bar{background-color:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l))}.mg-card.mg-card--info.mg-card--fill{background-color:hsl(var(--color-info-h), var(--color-info-s), var(--mg-color-soft-l))}.mg-card.mg-card--warning{overflow:hidden}.mg-card.mg-card--warning.mg-card--bar-left .mg-card__bar{background-color:hsl(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l))}.mg-card.mg-card--warning.mg-card--fill{background-color:hsl(var(--color-warning-h), var(--color-warning-s), var(--mg-color-soft-l))}.mg-card.mg-card--success{overflow:hidden}.mg-card.mg-card--success.mg-card--bar-left .mg-card__bar{background-color:hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l))}.mg-card.mg-card--success.mg-card--fill{background-color:hsl(var(--color-success-h), var(--color-success-s), var(--mg-color-soft-l))}.mg-card.mg-card--danger{overflow:hidden}.mg-card.mg-card--danger.mg-card--bar-left .mg-card__bar{background-color:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l))}.mg-card.mg-card--danger.mg-card--fill{background-color:hsl(var(--color-danger-h), var(--color-danger-s), var(--mg-color-soft-l))}.mg-card.mg-card--app{overflow:hidden}.mg-card.mg-card--app.mg-card--bar-left .mg-card__bar{background-color:hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-app-l))}.mg-card.mg-card--app.mg-card--fill{background-color:hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-soft-l))}.mg-card__bar{position:absolute;top:0;left:0;width:0.3rem;height:100%}";
 
 const MgCard = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
+    /*************
+     * Private *
+     *************/
+    this.name = 'mg-card';
+    this.baseClass = this.name;
+    this.variant = undefined;
+    this.variantStyle = undefined;
+    this.classList = new ClassList([this.baseClass]);
+  }
+  validateVariant(newValue, oldValue) {
+    if (newValue && !variants.includes(newValue))
+      throw new Error(`<${this.name}> prop "variant" must match VariantType type.`);
+    if (Boolean(newValue)) {
+      if (this.variantStyle === undefined)
+        this.variantStyle = 'bar-left';
+      this.classList.add(`${this.baseClass}--${newValue}`);
+    }
+    if (Boolean(oldValue))
+      this.classList.delete(`${this.baseClass}--${oldValue}`);
+  }
+  validateVariantStyle(newValue, oldValue) {
+    if (newValue && !variantStyles.includes(newValue))
+      throw new Error(`<${this.name}> prop "variantStyle" must match VariantStyleType type.`);
+    else if (Boolean(newValue) && !variants.includes(this.variant))
+      throw new Error(`<${this.name}> prop "variantStyle" must be paired with ${JSON.stringify(variants)} "variant" prop.`);
+    if (Boolean(newValue))
+      this.classList.add(`${this.baseClass}--${newValue}`);
+    if (Boolean(oldValue))
+      this.classList.delete(`${this.baseClass}--${oldValue}`);
+  }
+  /**
+   * Check if props are well configured on init
+   *
+   * @returns {void}
+   */
+  componentWillLoad() {
+    this.validateVariant(this.variant);
+    this.validateVariantStyle(this.variantStyle);
   }
-  /*************
-   * Lifecycle *
-   *************/
   /**
    * Render
    *
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h("div", { class: "mg-card" }, h("slot", null)));
+    var _a;
+    return (h("div", { class: this.classList.join() }, ((_a = this.variantStyle) === null || _a === void 0 ? void 0 : _a.startsWith('bar-')) && h("span", { class: "mg-card__bar" }), h("slot", null)));
   }
+  static get watchers() { return {
+    "variant": ["validateVariant"],
+    "variantStyle": ["validateVariantStyle"]
+  }; }
   static get style() { return mgCardCss; }
-}, [1, "mg-card"]);
+}, [1, "mg-card", {
+    "variant": [1],
+    "variantStyle": [1025, "variant-style"],
+    "classList": [32]
+  }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;

package/dist/components/mg-details.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './mg-icon2.js';
 
-const mgDetailsCss = ".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-details summary{display:flex;align-items:baseline;cursor:pointer}.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{margin-top:1.5rem}";
+const mgDetailsCss = ".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-details summary{display:flex;align-items:baseline;cursor:pointer}.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__details{margin-top:1.5rem}";
 
 const MgDetails$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -48,7 +48,7 @@ const MgDetails$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    * @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 watchers() { return {
     "toggleClosed": ["validateTitles"],