@mgdis/mg-components 6.13.0 → 6.14.0

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

@@ -260,6 +260,7 @@ export class MgPopover {
         return {
             "identifier": {
                 "type": "string",
+                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -274,12 +275,12 @@ export class MgPopover {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "identifier",
                 "reflect": false,
                 "defaultValue": "createID('mg-popover')"
             },
             "placement": {
                 "type": "string",
+                "attribute": "placement",
                 "mutable": false,
                 "complexType": {
                     "original": "Placement",
@@ -300,12 +301,12 @@ export class MgPopover {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placement",
                 "reflect": false,
                 "defaultValue": "'bottom'"
             },
             "arrowHide": {
                 "type": "boolean",
+                "attribute": "arrow-hide",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -320,12 +321,12 @@ export class MgPopover {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "arrow-hide",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "closeButton": {
                 "type": "boolean",
+                "attribute": "close-button",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -340,12 +341,12 @@ export class MgPopover {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "close-button",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "display": {
                 "type": "boolean",
+                "attribute": "display",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -360,12 +361,12 @@ export class MgPopover {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "display",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -380,7 +381,6 @@ export class MgPopover {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             }
@@ -441,4 +441,3 @@ export class MgPopover {
             }];
     }
 }
-//# sourceMappingURL=mg-popover.js.map

package/dist/collection/components/molecules/mg-progress/mg-progress.conf.js

@@ -2,4 +2,3 @@
  * List of all possibles roles
  */
 export const roles = ['progressbar', 'meter'];
-//# sourceMappingURL=mg-progress.conf.js.map

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

@@ -85,6 +85,7 @@ export class MgProgress {
         return {
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -99,11 +100,11 @@ export class MgProgress {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false
             },
             "ariaRole": {
                 "type": "string",
+                "attribute": "aria-role",
                 "mutable": false,
                 "complexType": {
                     "original": "AriaRoleType",
@@ -124,12 +125,12 @@ export class MgProgress {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "aria-role",
                 "reflect": false,
                 "defaultValue": "'progressbar'"
             },
             "value": {
                 "type": "number",
+                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -144,12 +145,12 @@ export class MgProgress {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false,
                 "defaultValue": "0"
             },
             "min": {
                 "type": "number",
+                "attribute": "min",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -164,12 +165,12 @@ export class MgProgress {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "min",
                 "reflect": false,
                 "defaultValue": "0"
             },
             "max": {
                 "type": "number",
+                "attribute": "max",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -184,7 +185,6 @@ export class MgProgress {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "max",
                 "reflect": false,
                 "defaultValue": "100"
             }
@@ -209,4 +209,3 @@ export class MgProgress {
             }];
     }
 }
-//# sourceMappingURL=mg-progress.js.map

package/dist/collection/components/molecules/mg-skip-links/mg-skip-links.conf.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=mg-skip-links.conf.js.map

package/dist/collection/components/molecules/mg-skip-links/mg-skip-links.js

@@ -11,8 +11,9 @@ export class MgSkipLinks {
          * @param event - mouse event
          */
         this.handleLinkCLick = (event) => {
-            event.currentTarget.blur();
-            this.goToAnchor.emit(event.currentTarget.getAttribute('href'));
+            const element = event.currentTarget;
+            element.blur();
+            this.goToAnchor.emit(element.getAttribute('href'));
         };
     }
     validateLinks(links) {
@@ -35,7 +36,7 @@ export class MgSkipLinks {
      * @returns HTML Element
      */
     render() {
-        return (h("nav", { key: '334bfc3fdd2749ad172b03168f2d00d6c5d26a2f', class: "mg-c-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, h("ul", { key: 'dc9e2202c955f0ff582ae3fe9cd0b48542eb3c10', class: "mg-c-skip-links__list", role: "list" }, this.links.map(link => (h("li", { key: link.href }, h("a", { class: "mg-c-skip-links__link", href: link.href, onClick: this.handleLinkCLick }, link.label)))))));
+        return (h("nav", { key: '9df42d332b207abf989ef73f3c83ebbcfcf222a6', class: "mg-c-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, h("ul", { key: '0185490dbd3dfb08b534a898fe779850ce96c427', class: "mg-c-skip-links__list", role: "list" }, this.links.map(link => (h("li", { key: link.href }, h("a", { class: "mg-c-skip-links__link", href: link.href, onClick: this.handleLinkCLick }, link.label)))))));
     }
     static get is() { return "mg-skip-links"; }
     static get encapsulation() { return "shadow"; }
@@ -53,6 +54,7 @@ export class MgSkipLinks {
         return {
             "links": {
                 "type": "unknown",
+                "attribute": "links",
                 "mutable": false,
                 "complexType": {
                     "original": "SkipLink[]",
@@ -102,4 +104,3 @@ export class MgSkipLinks {
             }];
     }
 }
-//# sourceMappingURL=mg-skip-links.js.map

package/dist/collection/components/molecules/mg-table/mg-table.conf.js

@@ -10,4 +10,3 @@ export const sizes = ['small', 'medium', 'large', 'xlarge'];
 export const textAlignments = ['left', 'center', 'right'];
 // Define possible data types
 export const dataTypes = ['string', 'numeric', 'date'];
-//# sourceMappingURL=mg-table.conf.js.map

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

@@ -201,7 +201,7 @@ export class MgTable {
             });
         }
         // Add alignment to columns
-        this.element.shadowRoot.adoptedStyleSheets = [...this.element.shadowRoot.adoptedStyleSheets, this.alignmentStylesheet];
+        this.element.shadowRoot.adoptedStyleSheets.push(this.alignmentStylesheet);
         // Create div wrapper for responsive behavior
         const divWrapper = document.createElement('div');
         divWrapper.setAttribute('class', this.componentWrapperClass);
@@ -273,6 +273,7 @@ export class MgTable {
         return {
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "TableSizeType",
@@ -293,12 +294,12 @@ export class MgTable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false,
                 "defaultValue": "'medium'"
             },
             "fullWidth": {
                 "type": "boolean",
+                "attribute": "full-width",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -313,12 +314,12 @@ export class MgTable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "full-width",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "columns": {
                 "type": "unknown",
+                "attribute": "columns",
                 "mutable": false,
                 "complexType": {
                     "original": "ColumnsType",
@@ -361,4 +362,3 @@ export class MgTable {
             }];
     }
 }
-//# sourceMappingURL=mg-table.js.map

package/dist/collection/components/molecules/mg-tabs/mg-tabs.conf.js

@@ -11,4 +11,3 @@ export const Status = {
  * List of all possibles sizes
  */
 export const sizes = ['medium', 'large'];
-//# sourceMappingURL=mg-tabs.conf.js.map

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

@@ -234,7 +234,7 @@ export class MgTabs {
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: '0e61cfdaa48e7d24adc1d427bf0b202c67948530', class: this.classCollection.join() }, h("header", { key: 'd43836e3daef98d1dad558ab12dd1f4310c7cfcd', role: "tablist", "aria-label": this.label, class: "mg-c-tabs__header" }, this.tabs.map((tab, index) => (h("button", { key: tab.label, role: "tab", id: this.getElementId(this.identifier, index), class: {
+        return (h("div", { key: '06dd97d9d4e77f606dee3c4a8960b51265345666', class: this.classCollection.join() }, h("header", { key: 'ea3771bdfe8576bb8b443823a2c338a51ed3ba69', role: "tablist", "aria-label": this.label, class: "mg-c-tabs__header" }, this.tabs.map((tab, index) => (h("button", { key: tab.label, role: "tab", id: this.getElementId(this.identifier, index), class: {
                 [`${this.buttonTabBaseClass}`]: true,
                 [`${this.buttonTabBaseClass}--horizontal`]: true,
                 [`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasStatus(tab, Status.ACTIVE),
@@ -258,6 +258,7 @@ export class MgTabs {
         return {
             "identifier": {
                 "type": "string",
+                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -272,12 +273,12 @@ export class MgTabs {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "identifier",
                 "reflect": false,
                 "defaultValue": "createID('mg-tabs')"
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -292,11 +293,11 @@ export class MgTabs {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "SizeType",
@@ -317,12 +318,12 @@ export class MgTabs {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false,
                 "defaultValue": "'medium'"
             },
             "items": {
                 "type": "unknown",
+                "attribute": "items",
                 "mutable": false,
                 "complexType": {
                     "original": "string[] | TabItem[]",
@@ -346,6 +347,7 @@ export class MgTabs {
             },
             "activeTab": {
                 "type": "number",
+                "attribute": "active-tab",
                 "mutable": true,
                 "complexType": {
                     "original": "number",
@@ -360,7 +362,6 @@ export class MgTabs {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "active-tab",
                 "reflect": true
             }
         };
@@ -414,4 +415,3 @@ export class MgTabs {
             }];
     }
 }
-//# sourceMappingURL=mg-tabs.js.map

package/dist/collection/index.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=index.js.map

package/dist/collection/locales/index.conf.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=index.conf.js.map

package/dist/collection/locales/index.js

@@ -9,4 +9,3 @@ const messages = { en, fr };
  * @returns messages object
  */
 export const initLocales = defineLocales(messages, defaultLocale);
-//# sourceMappingURL=index.js.map

package/dist/collection/types/index.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=index.js.map

package/dist/collection/utils/behaviors.utils.js

@@ -77,4 +77,3 @@ export class OverflowBehavior {
         this._resizeObserver.observe(this.parentElement);
     }
 }
-//# sourceMappingURL=behaviors.utils.js.map

package/dist/collection/utils/events.utils.js

@@ -19,4 +19,3 @@ export const Keys = {
     NUMPADENTER: 'NumpadEnter',
     SPACE: 'Space',
 };
-//# sourceMappingURL=events.utils.js.map

package/dist/collection/utils/playwright.fixture.js

@@ -20,4 +20,3 @@ export const test = base.extend({
         await use(page);
     },
 });
-//# sourceMappingURL=playwright.fixture.js.map

package/dist/collection/utils/unit.test.utils.js

@@ -20,4 +20,3 @@ export const mockWindowFrames = () => {
         value: { length: 0 },
     });
 };
-//# sourceMappingURL=unit.test.utils.js.map

package/dist/components/events.utils.js

@@ -21,6 +21,3 @@ const Keys = {
 };
 
 export { Keys as K };
-//# sourceMappingURL=events.utils.js.map
-
-//# sourceMappingURL=events.utils.js.map

package/dist/components/index.js

@@ -1,4 +1 @@
-export { getAssetPath, setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
-//# sourceMappingURL=index.js.map
-
-//# sourceMappingURL=index.js.map
+export { getAssetPath, render, setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';

package/dist/components/index2.js

@@ -406,6 +406,3 @@ const getChildWindows = (localWindow, windows = []) => {
 };
 
 export { ClassList as C, Paginate as P, isValideID as a, isTagName as b, createID as c, allItemsAreString as d, cleanString as e, formatID as f, getWindows as g, Cursor as h, isValidString as i, Page as j, getObjectValueFromKey as k, isObject as l, focusableElements as m, nextTick as n, dateRegExp as o, dateToString as p, isValidNumber as q, toString as t };
-//# sourceMappingURL=index2.js.map
-
-//# sourceMappingURL=index2.js.map

package/dist/components/index3.js

@@ -351,7 +351,7 @@ const localeMessages = (element, messages, defaultLocale) => {
     // Return
     return {
         locale,
-        messages: (messages[localeSubtag] || messages[defaultLocale] || { lang: defaultLocale }),
+        messages: (messages[localeSubtag] ?? messages[defaultLocale] ?? { lang: defaultLocale }),
     };
 };
 /**
@@ -462,6 +462,3 @@ const messages = { en, fr };
 const initLocales = defineLocales(messages, defaultLocale);
 
 export { localeDatePattern as a, localeNumber as b, localeUnit as c, localePercent as d, localeCurrency as e, initLocales as i, localeDate as l };
-//# sourceMappingURL=index3.js.map
-
-//# sourceMappingURL=index3.js.map

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

@@ -250,6 +250,3 @@ const MgActionMore = MgActionMore$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgActionMore, defineCustomElement };
-//# sourceMappingURL=mg-action-more.js.map
-
-//# sourceMappingURL=mg-action-more.js.map

package/dist/components/mg-alert.js

@@ -22,9 +22,9 @@ const MgAlert$1 = /*@__PURE__*/ proxyCustomElement(class MgAlert extends HTMLEle
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.componentShow = createEvent(this, "component-show", 7);
-        this.componentHide = createEvent(this, "component-hide", 7);
-        this.componentClose = createEvent(this, "component-close", 7);
+        this.componentShow = createEvent(this, "component-show", 3);
+        this.componentHide = createEvent(this, "component-hide", 3);
+        this.componentClose = createEvent(this, "component-close", 3);
         /************
          * Internal *
          ************/
@@ -159,7 +159,7 @@ const MgAlert$1 = /*@__PURE__*/ proxyCustomElement(class MgAlert extends HTMLEle
      * @returns HTML Element
      */
     render() {
-        return (h("mg-message", { key: '12216af414367fc3eea31cffb2d7e38c724038a3', class: this.classCollection.join(), role: ['info', 'success'].includes(this.variant) ? 'status' : 'alert', variant: this.variant, variantStyle: this.variantStyle }, h("slot", { key: 'bdab00611363a879e8d2bd23442e62ab5e7238e3' }), this.hasActions ? (h("span", { slot: "actions" }, h("slot", { name: "actions" }))) : (h("span", { class: "mg-c-alert__close-button" }, h("mg-button", { "is-icon": true, variant: "flat", label: this.messages.alert.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" }))))));
+        return (h("mg-message", { key: '397a9a25b825bc75479d4562bff61dedc8ddc891', class: this.classCollection.join(), role: ['info', 'success'].includes(this.variant) ? 'status' : 'alert', variant: this.variant, variantStyle: this.variantStyle }, h("slot", { key: '793fb1e88b5d68bd41598f020748ea2fb02d7f3b' }), this.hasActions ? (h("span", { slot: "actions" }, h("slot", { name: "actions" }))) : (h("span", { class: "mg-c-alert__close-button" }, h("mg-button", { "is-icon": true, variant: "flat", label: this.messages.alert.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" }))))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -220,6 +220,3 @@ const MgAlert = MgAlert$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgAlert, defineCustomElement };
-//# sourceMappingURL=mg-alert.js.map
-
-//# sourceMappingURL=mg-alert.js.map

package/dist/components/mg-badge.js

@@ -4,6 +4,3 @@ const MgBadge = MgBadge$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgBadge, defineCustomElement };
-//# sourceMappingURL=mg-badge.js.map
-
-//# sourceMappingURL=mg-badge.js.map

package/dist/components/mg-badge2.js

@@ -109,6 +109,3 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { MgBadge as M, defineCustomElement as d };
-//# sourceMappingURL=mg-badge2.js.map
-
-//# sourceMappingURL=mg-badge2.js.map

package/dist/components/mg-button.js

@@ -4,6 +4,3 @@ const MgButton = MgButton$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgButton, defineCustomElement };
-//# sourceMappingURL=mg-button.js.map
-
-//# sourceMappingURL=mg-button.js.map

package/dist/components/mg-button2.js

@@ -271,6 +271,3 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { MgButton as M, defineCustomElement as d };
-//# sourceMappingURL=mg-button2.js.map
-
-//# sourceMappingURL=mg-button2.js.map

package/dist/components/mg-card.js

@@ -4,6 +4,3 @@ const MgCard = MgCard$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgCard, defineCustomElement };
-//# sourceMappingURL=mg-card.js.map
-
-//# sourceMappingURL=mg-card.js.map

package/dist/components/mg-card2.js

@@ -1,25 +1,77 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { C as ClassList } from './index2.js';
 
-const mgCardCss = "/*!\n * @prop --mg-c-card-overflow: Defines the overflow property for the card. Unset by default, fallback on `--mg-c-card-overflow-default`.\n * @prop --mg-c-card-overflow-default: Defines the default overflow property for the card. Unset by default.\n * @prop --mg-c-card-min-width: Defines the min-width property for the card. Unset by default.\n * @prop --mg-c-card-max-width: Defines the max-width property for the card. Unset by default.\n * @prop --mg-c-card-spacing: Defines the padding property for the card. Unset by default, fallback on `--mg-c-card-spacing-default`.\n * @prop --mg-c-card-spacing-default: Defines the default padding property for the card. Default value: `--mg-b-size-16`.\n * @prop --mg-c-card-border: Defines the border property for the card. Unset by default, fallback on `--mg-c-card-border-default`.\n * @prop --mg-c-card-border-default: Defines the default border property for the card. Default value: `var(--mg-b-size-border) solid color-mix(in srgb, var(--mg-b-color-dark), transparent 95%)`.\n * @prop --mg-c-card-border-radius: Defines the border radius property for the card. Unset by default, fallback on `--mg-c-card-border-radius-default`.\n * @prop --mg-c-card-border-radius-default: Defines the default border radius property for the card. Default value: `--mg-b-size-radius`.\n * @prop --mg-c-card-color-background: Defines the background property for the card. Unset by default, fallback on `--mg-c-card-color-background-default`.\n * @prop --mg-c-card-color-background-default: Defines the default background property for the card. Default value: `--mg-b-color-light`.\n * @prop --mg-c-card-box-shadow: Defines the box shadow property for the card. Unset by default, fallback on `--mg-c-card-box-shadow-default`.\n * @prop --mg-c-card-box-shadow-default: Defines the default box shadow property for the card. Default value: `--mg-b-box-shadow`.\n */.mg-c-card{position:relative;z-index:inherit;overflow:var(--mg-c-card-overflow, var(--mg-c-card-overflow-default));width:100%;min-width:var(--mg-c-card-min-width);max-width:var(--mg-c-card-max-width);box-sizing:border-box;padding:var(--mg-c-card-spacing, var(--mg-c-card-spacing-default));border:var(--mg-c-card-border, var(--mg-c-card-border-default));border-radius:var(--mg-c-card-border-radius, var(--mg-c-card-border-radius-default));background:var(--mg-c-card-color-background, var(--mg-c-card-color-background-default));box-shadow:var(--mg-c-card-box-shadow, var(--mg-c-card-box-shadow-default))}.mg-c-card ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border:var(--mg-c-card-border-default);--mg-c-card-spacing:var(--mg-c-card-spacing-default);--mg-c-card-border-radius:var(--mg-c-card-border-radius-default);--mg-c-card-color-background:var(--mg-c-card-color-background-default);--mg-c-card-box-shadow:var(--mg-c-card-box-shadow-default);--mg-c-card-max-width:unset;--mg-c-card-min-width:unset}";
+/**
+ * List of all possibles radius size
+ */
+const radiusSizes = ['xsmall', 'small', 'medium'];
+
+const mgCardCss = "/*!\n * @prop --mg-c-card-overflow: Defines the overflow property for the card. Unset by default, fallback on `--mg-c-card-overflow-default`.\n * @prop --mg-c-card-overflow-default: Defines the default overflow property for the card. Unset by default.\n * @prop --mg-c-card-min-width: Defines the min-width property for the card. Unset by default.\n * @prop --mg-c-card-max-width: Defines the max-width property for the card. Unset by default.\n * @prop --mg-c-card-spacing: Defines the padding property for the card. Unset by default, fallback on `--mg-c-card-spacing-default`.\n * @prop --mg-c-card-spacing-default: Defines the default padding property for the card. Default value: `--mg-b-size-16`.\n * @prop --mg-c-card-border: Defines the border property for the card. Unset by default, fallback on `--mg-c-card-border-default`.\n * @prop --mg-c-card-border-default: Defines the default border property for the card. Default value: `var(--mg-b-size-border) solid var(--mg-b-color-neutral-30)`.\n * @prop --mg-c-card-border-radius: Defines the border radius property for the card. Unset by default, fallback on `--mg-c-card-border-radius-default`.\n * @prop --mg-c-card-border-radius-default: Defines the default border radius property for the card. Default value: `--mg-b-size-12`.\n * @prop --mg-c-card-color-background: Defines the background property for the card. Unset by default, fallback on `--mg-c-card-color-background-default`.\n * @prop --mg-c-card-color-background-default: Defines the default background property for the card. Default value: `--mg-b-color-light`.\n * @prop --mg-c-card-box-shadow: Defines the box shadow property for the card. Unset by default, fallback on `--mg-c-card-box-shadow-default`.\n * @prop --mg-c-card-box-shadow-default: Defines the default box shadow property for the card. Default value: `--mg-b-box-shadow`.\n */.mg-c-card{position:relative;z-index:inherit;overflow:var(--mg-c-card-overflow, var(--mg-c-card-overflow-default));width:100%;min-width:var(--mg-c-card-min-width);max-width:var(--mg-c-card-max-width);box-sizing:border-box;padding:var(--mg-c-card-spacing, var(--mg-c-card-spacing-default));border:var(--mg-c-card-border, var(--mg-c-card-border-default));border-radius:var(--mg-c-card-border-radius, var(--mg-c-card-border-radius-default));background:var(--mg-c-card-color-background, var(--mg-c-card-color-background-default))}.mg-c-card ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border:var(--mg-c-card-border-default);--mg-c-card-spacing:var(--mg-c-card-spacing-default);--mg-c-card-border-radius:var(--mg-c-card-border-radius-default);--mg-c-card-color-background:var(--mg-c-card-color-background-default);--mg-c-card-box-shadow:var(--mg-c-card-box-shadow-default);--mg-c-card-max-width:unset;--mg-c-card-min-width:unset}.mg-c-card.mg-c-card--shadow{--mg-c-card-border:var(--mg-b-color-neutral-20);box-shadow:var(--mg-c-card-box-shadow, var(--mg-c-card-box-shadow-default))}.mg-c-card.mg-c-card--radius-xsmall{--mg-c-card-border-radius:var(--mg-b-size-4)}.mg-c-card.mg-c-card--radius-small{--mg-c-card-border-radius:var(--mg-b-size-8)}";
 
 const MgCard = /*@__PURE__*/ proxyCustomElement(class MgCard extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
+        /**
+         * Add box-shadow style
+         */
+        this.shadow = false;
+        /**
+         * Define the border radius size
+         */
+        this.radiusSize = 'medium';
+        /**
+         * Component classes
+         */
+        this.classCollection = new ClassList(['mg-c-card']);
+    }
+    watchShadow(newValue) {
+        if (newValue) {
+            this.classCollection.add('mg-c-card--shadow');
+        }
+        else {
+            this.classCollection.delete('mg-c-card--shadow');
+        }
+    }
+    watchRadiusSize(newValue, oldValue) {
+        if (oldValue !== undefined && radiusSizes.includes(oldValue)) {
+            this.classCollection.delete(`mg-c-card--radius-${oldValue}`);
+        }
+        if (radiusSizes.includes(newValue)) {
+            this.classCollection.add(`mg-c-card--radius-${newValue}`);
+        }
     }
     /*************
      * Lifecycle *
      *************/
+    /**
+     * Check if component props are well configured on init
+     */
+    componentWillLoad() {
+        this.watchShadow(this.shadow);
+        this.watchRadiusSize(this.radiusSize);
+    }
     /**
      * Render
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: 'e59cabb09dbc28c148770b57de98f130c4479b75', class: "mg-c-card" }, h("slot", { key: 'b6e679317bddd23e73443c601992b7b344d6dc72' })));
+        return (h("div", { key: '6f83c5f7f9e0aacf502e407450cfdf039635a1f1', class: this.classCollection.join() }, h("slot", { key: '6bf8c02d3c3c9d0719e45af96b41f54289e31961' })));
     }
+    static get watchers() { return {
+        "shadow": ["watchShadow"],
+        "radiusSize": ["watchRadiusSize"]
+    }; }
     static get style() { return mgCardCss; }
-}, [1, "mg-card"]);
+}, [1, "mg-card", {
+        "shadow": [4],
+        "radiusSize": [1, "radius-size"],
+        "classCollection": [32]
+    }, undefined, {
+        "shadow": ["watchShadow"],
+        "radiusSize": ["watchRadiusSize"]
+    }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
@@ -36,6 +88,3 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { MgCard as M, defineCustomElement as d };
-//# sourceMappingURL=mg-card2.js.map
-
-//# sourceMappingURL=mg-card2.js.map

package/dist/components/mg-character-left.js

@@ -4,6 +4,3 @@ const MgCharacterLeft = MgCharacterLeft$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgCharacterLeft, defineCustomElement };
-//# sourceMappingURL=mg-character-left.js.map
-
-//# sourceMappingURL=mg-character-left.js.map

package/dist/components/mg-character-left2.js

@@ -71,6 +71,3 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { MgCharacterLeft as M, defineCustomElement as d };
-//# sourceMappingURL=mg-character-left2.js.map
-
-//# sourceMappingURL=mg-character-left2.js.map

package/dist/components/mg-details.js

@@ -100,6 +100,3 @@ const MgDetails = MgDetails$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgDetails, defineCustomElement };
-//# sourceMappingURL=mg-details.js.map
-
-//# sourceMappingURL=mg-details.js.map

package/dist/components/mg-divider.js

@@ -4,6 +4,3 @@ const MgDivider = MgDivider$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgDivider, defineCustomElement };
-//# sourceMappingURL=mg-divider.js.map
-
-//# sourceMappingURL=mg-divider.js.map

package/dist/components/mg-divider2.js

@@ -45,6 +45,3 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { MgDivider as M, defineCustomElement as d };
-//# sourceMappingURL=mg-divider2.js.map
-
-//# sourceMappingURL=mg-divider2.js.map