@mgdis/mg-components 6.15.0 → 6.17.0

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

@@ -85,7 +85,6 @@ export class MgProgress {
         return {
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -100,11 +99,11 @@ export class MgProgress {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "label"
             },
             "ariaRole": {
                 "type": "string",
-                "attribute": "aria-role",
                 "mutable": false,
                 "complexType": {
                     "original": "AriaRoleType",
@@ -126,11 +125,11 @@ export class MgProgress {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "aria-role",
                 "defaultValue": "'progressbar'"
             },
             "value": {
                 "type": "number",
-                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -146,11 +145,11 @@ export class MgProgress {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "value",
                 "defaultValue": "0"
             },
             "min": {
                 "type": "number",
-                "attribute": "min",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -166,11 +165,11 @@ export class MgProgress {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "min",
                 "defaultValue": "0"
             },
             "max": {
                 "type": "number",
-                "attribute": "max",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -186,6 +185,7 @@ export class MgProgress {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "max",
                 "defaultValue": "100"
             }
         };

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

@@ -54,7 +54,6 @@ export class MgSkipLinks {
         return {
             "links": {
                 "type": "unknown",
-                "attribute": "links",
                 "mutable": false,
                 "complexType": {
                     "original": "SkipLink[]",

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

@@ -273,7 +273,6 @@ export class MgTable {
         return {
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "TableSizeType",
@@ -295,11 +294,11 @@ export class MgTable {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "'medium'"
             },
             "fullWidth": {
                 "type": "boolean",
-                "attribute": "full-width",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -315,11 +314,11 @@ export class MgTable {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "full-width",
                 "defaultValue": "false"
             },
             "columns": {
                 "type": "unknown",
-                "attribute": "columns",
                 "mutable": false,
                 "complexType": {
                     "original": "ColumnsType",

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

@@ -258,7 +258,6 @@ export class MgTabs {
         return {
             "identifier": {
                 "type": "string",
-                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -274,11 +273,11 @@ export class MgTabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "identifier",
                 "defaultValue": "createID('mg-tabs')"
             },
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -293,11 +292,11 @@ export class MgTabs {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "label"
             },
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "SizeType",
@@ -319,11 +318,11 @@ export class MgTabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "'medium'"
             },
             "items": {
                 "type": "unknown",
-                "attribute": "items",
                 "mutable": false,
                 "complexType": {
                     "original": "string[] | TabItem[]",
@@ -347,7 +346,6 @@ export class MgTabs {
             },
             "activeTab": {
                 "type": "number",
-                "attribute": "active-tab",
                 "mutable": true,
                 "complexType": {
                     "original": "number",
@@ -362,7 +360,8 @@ export class MgTabs {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "active-tab"
             }
         };
     }

package/dist/collection/locales/en/messages.json

@@ -1,7 +1,6 @@
 {
   "errors": {
-    "required": "This field is required.",
-    "noValue": "No value."
+    "required": "This field is required."
   },
   "nbCharLeft": "{counter} characters left.",
   "input": {
@@ -46,17 +45,17 @@
         "yyyy": "yyyy"
       },
       "helpText": {
-        "expectedFormat": "Expected format: {pattern} (ex: {date})",
+        "expectedFormat": "Expected format: {pattern} (ex: {date})"
+      },
+      "error": {
+        "badInput": "The date is inexistent or incorrect, the expected format is {pattern} (ex: {date})",
         "min": "The date must be after or equal to {min}",
         "max": "The date must be before or equal to {max}",
         "minMax": "The date must be between {min} and {max}"
-      },
-      "error": {
-        "badInput": "The date is inexistent or incorrect, the expected format is {pattern} (ex: {date})"
       }
     },
     "numeric": {
-      "helpText": {
+      "error": {
         "min": "The value must be greater than or equal to {min}",
         "max": "The value must be less than or equal to {max}",
         "minMax": "The value must be between {min} and {max}"
@@ -116,8 +115,8 @@
     "confirm": "Confirm",
     "cancel": "Cancel",
     "close": "Close",
-    "next": "next",
-    "previous": "previous",
+    "next": "Next",
+    "previous": "Previous",
     "reset": "reset"
   },
   "menuItem": {
@@ -135,9 +134,5 @@
   },
   "table": {
     "sortableCaption": "(column headers with buttons are sortable)"
-  },
-  "details": {
-    "toggleClosed": "Show details",
-    "toggleOpened": "Hide details"
   }
 }

package/dist/collection/locales/fr/messages.json

@@ -1,7 +1,6 @@
 {
   "errors": {
-    "required": "Ce champ est obligatoire.",
-    "noValue": "Aucune valeur."
+    "required": "Ce champ est obligatoire."
   },
   "nbCharLeft": "{counter} caractères disponibles.",
   "input": {
@@ -46,17 +45,17 @@
         "yyyy": "aaaa"
       },
       "helpText": {
-        "expectedFormat": "Format attendu : {pattern} (ex : {date})",
+        "expectedFormat": "Format attendu : {pattern} (ex : {date})"
+      },
+      "error": {
+        "badInput": "La date est inexistante ou incorrecte, le format attendu est {pattern} (ex : {date})",
         "min": "La date doit être postérieure ou égale au {min}",
         "max": "La date doit être antérieure ou égale au {max}",
         "minMax": "La date doit être comprise entre le {min} et le {max}"
-      },
-      "error": {
-        "badInput": "La date est inexistante ou incorrecte, le format attendu est {pattern} (ex : {date})"
       }
     },
     "numeric": {
-      "helpText": {
+      "error": {
         "min": "La valeur doit être supérieure ou égale à {min}",
         "max": "La valeur doit être inférieure ou égale à {max}",
         "minMax": "La valeur doit être comprise entre {min} et {max}"
@@ -116,8 +115,8 @@
     "confirm": "Valider",
     "cancel": "Annuler",
     "close": "Fermer",
-    "next": "suivant",
-    "previous": "précédent",
+    "next": "Suivant",
+    "previous": "Précédent",
     "reset": "réinitialiser"
   },
   "menuItem": {
@@ -135,9 +134,5 @@
   },
   "table": {
     "sortableCaption": "(les en-têtes de colonnes avec des boutons peuvent être triés)"
-  },
-  "details": {
-    "toggleClosed": "Voir le detail",
-    "toggleOpened": "Masquer le detail"
   }
 }

package/dist/components/index2.js

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

package/dist/components/index3.js

@@ -1,6 +1,5 @@
 const errors$1 = {
-	required: "This field is required.",
-	noValue: "No value."
+	required: "This field is required."
 };
 const nbCharLeft$1 = "{counter} characters left.";
 const input$1 = {
@@ -47,17 +46,17 @@ const input$1 = {
 			yyyy: "yyyy"
 		},
 		helpText: {
-			expectedFormat: "Expected format: {pattern} (ex: {date})",
+			expectedFormat: "Expected format: {pattern} (ex: {date})"
+		},
+		error: {
+			badInput: "The date is inexistent or incorrect, the expected format is {pattern} (ex: {date})",
 			min: "The date must be after or equal to {min}",
 			max: "The date must be before or equal to {max}",
 			minMax: "The date must be between {min} and {max}"
-		},
-		error: {
-			badInput: "The date is inexistent or incorrect, the expected format is {pattern} (ex: {date})"
 		}
 	},
 	numeric: {
-		helpText: {
+		error: {
 			min: "The value must be greater than or equal to {min}",
 			max: "The value must be less than or equal to {max}",
 			minMax: "The value must be between {min} and {max}"
@@ -117,8 +116,8 @@ const general$1 = {
 	confirm: "Confirm",
 	cancel: "Cancel",
 	close: "Close",
-	next: "next",
-	previous: "previous",
+	next: "Next",
+	previous: "Previous",
 	reset: "reset"
 };
 const menuItem$1 = {
@@ -137,10 +136,6 @@ const loader$1 = {
 const table$1 = {
 	sortableCaption: "(column headers with buttons are sortable)"
 };
-const details$1 = {
-	toggleClosed: "Show details",
-	toggleOpened: "Hide details"
-};
 var en = {
 	errors: errors$1,
 	nbCharLeft: nbCharLeft$1,
@@ -156,13 +151,11 @@ var en = {
 	itemMore: itemMore$1,
 	actionMore: actionMore$1,
 	loader: loader$1,
-	table: table$1,
-	details: details$1
+	table: table$1
 };
 
 const errors = {
-	required: "Ce champ est obligatoire.",
-	noValue: "Aucune valeur."
+	required: "Ce champ est obligatoire."
 };
 const nbCharLeft = "{counter} caractères disponibles.";
 const input = {
@@ -209,17 +202,17 @@ const input = {
 			yyyy: "aaaa"
 		},
 		helpText: {
-			expectedFormat: "Format attendu : {pattern} (ex : {date})",
+			expectedFormat: "Format attendu : {pattern} (ex : {date})"
+		},
+		error: {
+			badInput: "La date est inexistante ou incorrecte, le format attendu est {pattern} (ex : {date})",
 			min: "La date doit être postérieure ou égale au {min}",
 			max: "La date doit être antérieure ou égale au {max}",
 			minMax: "La date doit être comprise entre le {min} et le {max}"
-		},
-		error: {
-			badInput: "La date est inexistante ou incorrecte, le format attendu est {pattern} (ex : {date})"
 		}
 	},
 	numeric: {
-		helpText: {
+		error: {
 			min: "La valeur doit être supérieure ou égale à {min}",
 			max: "La valeur doit être inférieure ou égale à {max}",
 			minMax: "La valeur doit être comprise entre {min} et {max}"
@@ -279,8 +272,8 @@ const general = {
 	confirm: "Valider",
 	cancel: "Annuler",
 	close: "Fermer",
-	next: "suivant",
-	previous: "précédent",
+	next: "Suivant",
+	previous: "Précédent",
 	reset: "réinitialiser"
 };
 const menuItem = {
@@ -299,10 +292,6 @@ const loader = {
 const table = {
 	sortableCaption: "(les en-têtes de colonnes avec des boutons peuvent être triés)"
 };
-const details = {
-	toggleClosed: "Voir le detail",
-	toggleOpened: "Masquer le detail"
-};
 var fr = {
 	errors: errors,
 	nbCharLeft: nbCharLeft,
@@ -318,8 +307,7 @@ var fr = {
 	itemMore: itemMore,
 	actionMore: actionMore,
 	loader: loader,
-	table: table,
-	details: details
+	table: table
 };
 
 /**

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

@@ -48,9 +48,11 @@ const isMgActionMoreIcon = (prop) => {
     return typeof icon === 'object' && typeof icon.icon === 'string';
 };
 const MgActionMore$1 = /*@__PURE__*/ proxyCustomElement(class MgActionMore extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         /************
          * Internal *

package/dist/components/mg-alert.js

@@ -18,9 +18,11 @@ const variantStyles = ['bar-left', 'background'];
 const mgAlertCss = ".mg-c-alert__close-button{position:absolute;top:0;right:0}.mg-c-alert.mg-c-alert--close-button{--mg-c-card-spacing:0 var(--mg-b-size-min-height) 0 0}";
 
 const MgAlert$1 = /*@__PURE__*/ proxyCustomElement(class MgAlert extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.componentShow = createEvent(this, "component-show", 3);
         this.componentHide = createEvent(this, "component-hide", 3);

package/dist/components/mg-badge2.js

@@ -9,9 +9,11 @@ const variants = ['info', 'primary', 'secondary', 'success', 'warning', 'danger'
 const mgBadgeCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}/*!\n * @prop --mg-c-badge-size: Defines the height and minimum width of the badge. The default value is `--mg-b-size-16`.\n * @prop --mg-c-badge-font-size: Defines the font size of the badge. The default value is `--mg-b-font-size-small`.\n * @prop --mg-c-badge-color-text: Defines the font color of the badge when used with the `text-color` variant and without `outline`. The default value is `--mg-b-color-light`.\n */.mg-c-badge{min-width:var(--mg-c-badge-size);height:var(--mg-c-badge-size);box-sizing:border-box;padding:0 var(--mg-b-size-4);border:var(--mg-b-size-border) solid;border-radius:calc(var(--mg-c-badge-size)/2);font-size:var(--mg-c-badge-font-size);font-weight:600;line-height:var(--mg-c-badge-size);text-align:center}.mg-c-badge.mg-c-badge--primary{border-color:var(--mg-b-color-primary);background-color:var(--mg-b-color-primary);color:var(--mg-b-color-text-on-primary)}.mg-c-badge.mg-c-badge--primary.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-primary)}.mg-c-badge.mg-c-badge--secondary{border-color:var(--mg-b-color-secondary);background-color:var(--mg-b-color-secondary);color:var(--mg-b-color-text-on-secondary)}.mg-c-badge.mg-c-badge--secondary.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-secondary)}.mg-c-badge.mg-c-badge--danger{border-color:var(--mg-b-color-danger);background-color:var(--mg-b-color-danger);color:var(--mg-b-color-text-on-danger)}.mg-c-badge.mg-c-badge--danger.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-danger)}.mg-c-badge.mg-c-badge--info{border-color:var(--mg-b-color-info);background-color:var(--mg-b-color-info);color:var(--mg-b-color-text-on-info)}.mg-c-badge.mg-c-badge--info.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-info)}.mg-c-badge.mg-c-badge--success{border-color:var(--mg-b-color-success);background-color:var(--mg-b-color-success);color:var(--mg-b-color-text-on-success)}.mg-c-badge.mg-c-badge--success.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-success)}.mg-c-badge.mg-c-badge--warning{border-color:var(--mg-b-color-warning);background-color:var(--mg-b-color-warning);color:var(--mg-b-color-text-on-warning)}.mg-c-badge.mg-c-badge--warning.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-warning)}.mg-c-badge.mg-c-badge--text-color{border-color:currentcolor;background-color:currentcolor}.mg-c-badge.mg-c-badge--text-color .mg-c-badge__value{color:var(--mg-c-badge-color-text, var(--mg-b-color-light))}.mg-c-badge.mg-c-badge--text-color.mg-c-badge--outline{background-color:rgba(0,0,0,0)}.mg-c-badge.mg-c-badge--text-color.mg-c-badge--outline .mg-c-badge__value{color:currentcolor}.mg-c-badge,mg-badge{display:inline-flex;align-items:center;justify-content:center}";
 
 const MgBadge = /*@__PURE__*/ proxyCustomElement(class MgBadge extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         /************
          * Internal *

package/dist/components/mg-button2.js

@@ -15,9 +15,11 @@ const variants = ['primary', 'secondary', 'danger', 'danger-alt', 'info', 'flat'
 const mgButtonCss = "/*!\n * @prop --mg-c-button-border-radius: Defines the border radius of the button. The default value is `--mg-b-size-radius`.\n * @prop --mg-c-button-border-top-width: Defines the top border width of the button. Unset by default, fallback on `--mg-b-size-border`.\n * @prop --mg-c-button-border-right-width: Defines the right border width of the button. Unset by default, fallback on `--mg-b-size-border`.\n * @prop --mg-c-button-border-bottom-width: Defines the bottom border width of the button. Unset by default, fallback on `--mg-b-size-border`.\n * @prop --mg-c-button-border-left-width: Defines the left border width of the button. Unset by default, fallback on `--mg-b-size-border`.\n * @prop --mg-c-button-border-radius-top-left: Defines the top left border radius of the button. Unset by default, fallback on `--mg-c-button-border-radius`.\n * @prop --mg-c-button-border-radius-top-right: Defines the top right border radius of the button. Unset by default, fallback on `--mg-c-button-border-radius`.\n * @prop --mg-c-button-border-radius-bottom-right: Defines the bottom right border radius of the button. Unset by default, fallback on `--mg-c-button-border-radius`.\n * @prop --mg-c-button-border-radius-bottom-left: Defines the bottom left border radius of the button. Unset by default, fallback on `--mg-c-button-border-radius`.\n * @prop --mg-c-button-font-weight: Defines the font weight of the button. Unset by default, fallback on `normal`.\n * @prop --mg-c-button-icon-border-radius: Defines the border radius of the button in icon mode. The default value is `--mg-b-size-min-height`.\n */:host{display:inline-block;max-width:100%;vertical-align:middle}:host(:hover) .mg-c-button--flat:not(.mg-c-button--disabled){background:color-mix(in srgb, var(--mg-b-color-dark), transparent 90%)}:host([full-width]){display:block}:host([disabled]),:host([aria-disabled=true]){pointer-events:none}.mg-c-button.mg-c-button--primary{/*!\n * @prop --mg-c-button-color-background-primary: Defines the background color for the primary variant button.\n * @prop --mg-c-button-color-border-primary: Defines the border color for the primary variant button.\n * @prop --mg-c-button-color-gradient-primary: Defines the gradient color for the primary variant button.\n * @prop --mg-c-button-color-text-primary: Defines the font color for the primary variant button.\n */border-color:var(--mg-c-button-color-border-primary);background:linear-gradient(to bottom, var(--mg-c-button-color-background-primary), var(--mg-c-button-color-gradient-primary));color:var(--mg-c-button-color-text-primary)}:host(:hover) .mg-c-button.mg-c-button--primary:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-primary)}.mg-c-button.mg-c-button--secondary{/*!\n * @prop --mg-c-button-color-background-secondary: Defines the background color for the secondary variant button.\n * @prop --mg-c-button-color-border-secondary: Defines the border color for the secondary variant button.\n * @prop --mg-c-button-color-gradient-secondary: Defines the gradient color for the secondary variant button.\n * @prop --mg-c-button-color-text-secondary: Defines the font color for the secondary variant button.\n */border-color:var(--mg-c-button-color-border-secondary);background:linear-gradient(to bottom, var(--mg-c-button-color-background-secondary), var(--mg-c-button-color-gradient-secondary));color:var(--mg-c-button-color-text-secondary)}:host(:hover) .mg-c-button.mg-c-button--secondary:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-secondary)}.mg-c-button.mg-c-button--danger{/*!\n * @prop --mg-c-button-color-background-danger: Defines the background color for the danger variant button.\n * @prop --mg-c-button-color-border-danger: Defines the border color for the danger variant button.\n * @prop --mg-c-button-color-gradient-danger: Defines the gradient color for the danger variant button.\n * @prop --mg-c-button-color-text-danger: Defines the font color for the danger variant button.\n */border-color:var(--mg-c-button-color-border-danger);background:linear-gradient(to bottom, var(--mg-c-button-color-background-danger), var(--mg-c-button-color-gradient-danger));color:var(--mg-c-button-color-text-danger)}:host(:hover) .mg-c-button.mg-c-button--danger:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-danger)}.mg-c-button.mg-c-button--info{/*!\n * @prop --mg-c-button-color-background-info: Defines the background color for the info variant button.\n * @prop --mg-c-button-color-border-info: Defines the border color for the info variant button.\n * @prop --mg-c-button-color-gradient-info: Defines the gradient color for the info variant button.\n * @prop --mg-c-button-color-text-info: Defines the font color for the info variant button.\n */border-color:var(--mg-c-button-color-border-info);background:linear-gradient(to bottom, var(--mg-c-button-color-background-info), var(--mg-c-button-color-gradient-info));color:var(--mg-c-button-color-text-info)}:host(:hover) .mg-c-button.mg-c-button--info:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-info)}.mg-c-button.mg-c-button--success{/*!\n * @prop --mg-c-button-color-background-success: Defines the background color for the success variant button.\n * @prop --mg-c-button-color-border-success: Defines the border color for the success variant button.\n * @prop --mg-c-button-color-gradient-success: Defines the gradient color for the success variant button.\n * @prop --mg-c-button-color-text-success: Defines the font color for the success variant button.\n */border-color:var(--mg-c-button-color-border-success);background:linear-gradient(to bottom, var(--mg-c-button-color-background-success), var(--mg-c-button-color-gradient-success));color:var(--mg-c-button-color-text-success)}:host(:hover) .mg-c-button.mg-c-button--success:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-success)}.mg-c-button.mg-c-button--warning{/*!\n * @prop --mg-c-button-color-background-warning: Defines the background color for the warning variant button.\n * @prop --mg-c-button-color-border-warning: Defines the border color for the warning variant button.\n * @prop --mg-c-button-color-gradient-warning: Defines the gradient color for the warning variant button.\n * @prop --mg-c-button-color-text-warning: Defines the font color for the warning variant button.\n */border-color:var(--mg-c-button-color-border-warning);background:linear-gradient(to bottom, var(--mg-c-button-color-background-warning), var(--mg-c-button-color-gradient-warning));color:var(--mg-c-button-color-text-warning)}:host(:hover) .mg-c-button.mg-c-button--warning:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-warning)}.mg-c-button.mg-c-button--danger-alt{/*!\n * @prop --mg-c-button-color-background-danger-alt: Defines the background color for the danger-alt variant button.\n * @prop --mg-c-button-color-border-danger-alt: Defines the border color for the danger-alt variant button.\n * @prop --mg-c-button-color-gradient-danger-alt: Defines the gradient color for the danger-alt variant button.\n * @prop --mg-c-button-color-text-danger-alt: Defines the font color for the danger-alt variant button.\n */border-color:var(--mg-c-button-color-border-danger-alt);background:linear-gradient(to bottom, var(--mg-c-button-color-background-danger-alt), var(--mg-c-button-color-gradient-danger-alt));color:var(--mg-c-button-color-text-danger-alt)}:host(:hover) .mg-c-button.mg-c-button--danger-alt:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-danger-alt)}.mg-c-button{position:relative;display:inline-flex;min-height:var(--mg-b-size-min-height);box-sizing:border-box;align-items:center;padding:calc((var(--mg-b-size-min-height) - 2*var(--mg-b-size-border) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-12);border-width:var(--mg-c-button-border-top-width, var(--mg-b-size-border)) var(--mg-c-button-border-right-width, var(--mg-b-size-border)) var(--mg-c-button-border-bottom-width, var(--mg-b-size-border)) var(--mg-c-button-border-left-width, var(--mg-b-size-border));border-style:solid;border-radius:var(--mg-c-button-border-radius-top-left, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-top-right, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-bottom-right, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-bottom-left, var(--mg-c-button-border-radius));background-image:none;column-gap:var(--mg-b-size-8);cursor:pointer;touch-action:manipulation;font-family:inherit;font-size:var(--mg-b-font-size);font-weight:var(--mg-c-button-font-weight, normal);text-align:left;text-decoration:none}.mg-c-button slot,.mg-c-button ::slotted(*:not(mg-icon)){font-family:inherit;font-size:var(--mg-b-font-size);font-weight:var(--mg-c-button-font-weight, normal);text-align:left;text-decoration:none;display:flex;align-items:center;column-gap:var(--mg-b-size-8)}.mg-c-button mg-icon:only-child,.mg-c-button ::slotted(mg-icon){display:inline-flex;flex-shrink:0;margin:auto 0;line-height:1}.mg-c-button.mg-c-button--disabled{cursor:default;opacity:var(--mg-b-opacity-element-disabled)}.mg-c-button.mg-c-button--flat{border:none;background:none}.mg-c-button.mg-c-button--link{min-height:unset;padding:unset;border:unset;border-radius:unset;background:unset;text-decoration:underline}.mg-c-button.mg-c-button--link slot{font-weight:600}.mg-c-button.mg-c-button--link:hover{text-decoration:none}.mg-c-button.mg-c-button--large{padding:calc(var(--mg-b-size-12) - var(--mg-b-size-border)) calc(var(--mg-b-size-24) - var(--mg-b-size-border))}.mg-c-button.mg-c-button--large:not(.mg-c-button--icon){line-height:var(--mg-b-size-24)}.mg-c-button.mg-c-button--large:not(.mg-c-button--icon) slot,.mg-c-button.mg-c-button--large:not(.mg-c-button--icon) ::slotted(*){font-size:var(--mg-b-size-16)}.mg-c-button.mg-c-button--icon{width:var(--mg-b-size-min-height);height:var(--mg-b-size-min-height);justify-content:center;padding:0;border-radius:var(--mg-c-button-border-radius-top-left, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-top-right, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-bottom-right, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-bottom-left, var(--mg-c-button-icon-border-radius));font-size:var(--mg-b-font-size);line-height:var(--mg-b-font-size)}.mg-c-button.mg-c-button--icon.mg-c-button--large{width:unset;height:unset;padding:calc(var(--mg-b-size-12) - var(--mg-b-size-border))}.mg-c-button.mg-c-button--icon.mg-c-button--large ::slotted(*){min-width:var(--mg-b-size-24);min-height:var(--mg-b-size-24);align-items:center;justify-content:center}.mg-c-button.mg-c-button--full-width{display:flex;justify-content:center}.mg-c-button.mg-c-button--loading>mg-icon:first-of-type{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.mg-c-button.mg-c-button--loading .mg-c-button__content{opacity:0}:host(:focus-visible){outline:0}:host(:focus-visible) .mg-c-button{outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width:.2rem}";
 
 const MgButton = /*@__PURE__*/ proxyCustomElement(class MgButton extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.disabledChange = createEvent(this, "disabled-change", 7);
         /************

package/dist/components/mg-card2.js

@@ -9,9 +9,11 @@ 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() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         /**
          * Add box-shadow style

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

@@ -5,9 +5,11 @@ import { a as isValideID, t as toString } from './index2.js';
 const mgCharacterLeftCss = ".mg-u-visually-hidden.sc-mg-character-left{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*.sc-mg-character-left:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*.sc-mg-character-left{animation:none !important;transition:none !important}}mg-character-left.sc-mg-character-left{display:block}";
 
 const MgCharacterLeft = /*@__PURE__*/ proxyCustomElement(class MgCharacterLeft extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         /**
          * Sets the characters to count
          */

package/dist/components/mg-details.js

@@ -1,4 +1,102 @@
-import { M as MgDetails$1, d as defineCustomElement$1 } from './mg-details2.js';
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { i as isValidString } from './index2.js';
+import { d as defineCustomElement$2 } from './mg-icon2.js';
+
+const mgDetailsCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}/*!\n * @prop --mg-c-details-spacing: Defines the spacing between the summary and the details. Default value: `--mg-b-size-8`.\n */.mg-c-details summary{display:inline-flex;align-items:baseline;cursor:pointer;gap:var(--mg-b-size-16)}.mg-c-details summary::-webkit-details-marker{display:none}.mg-c-details.mg-c-details--empty-summary summary{gap:unset}.mg-c-details__toggle{display:flex;min-height:calc(var(--mg-b-font-size)*var(--mg-b-line-height));flex-shrink:0;align-items:center;align-self:flex-start;gap:var(--mg-b-size-4)}.mg-c-details__toggle-icon.mg-c-details__toggle-icon--reverse{transform:rotate(180deg)}.mg-c-details__details{margin-top:var(--mg-c-details-spacing)}@media (width < 43.75rem){.mg-c-details:not(.mg-c-details--empty-summary) .mg-c-details__toggle>span{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}}";
+
+const MgDetails$1 = /*@__PURE__*/ proxyCustomElement(class MgDetails extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.expandedChange = createEvent(this, "expanded-change", 7);
+        /**
+         * Hide summary element
+         */
+        this.hideSummary = false;
+        /**
+         * Define if details are diplayed
+         */
+        this.expanded = false;
+        /**
+         * Handle details toggle
+         */
+        this.handleToggle = () => {
+            this.expanded = this.details.open;
+        };
+    }
+    validateTitles(newValue) {
+        if (!isValidString(newValue)) {
+            throw new Error(`<mg-details> prop "toggleClosed" and "toggleOpened" is required and must be a valid string. Passed value: "toggleClosed='${this.toggleClosed}'" and "toggleOpened='${this.toggleOpened}'".`);
+        }
+    }
+    handleExpanded(newValue) {
+        this.expandedChange.emit(newValue);
+    }
+    /*************
+     * Lifecycle *
+     *************/
+    /**
+     * Check if component props are well configured on init
+     */
+    componentWillLoad() {
+        this.validateTitles(this.toggleClosed);
+        this.validateTitles(this.toggleOpened);
+        // Check if summary slot is empty
+        const summarySlot = this.element.querySelector('[slot="summary"]');
+        this.isEmptySummary = summarySlot === null || !isValidString(summarySlot.textContent);
+        // Add event listener to prevent default action on summary click
+        this.element.addEventListener('click', (event) => {
+            if (event.target.closest('[slot="summary"] mg-button, mg-button[slot="summary"]') !== null) {
+                event.preventDefault();
+            }
+        });
+    }
+    /**
+     * Render
+     * @returns HTML Element
+     */
+    render() {
+        return (h("details", { key: '4da17afd7a964a14b5b101bcfadc241be569d55a', class: { 'mg-c-details': true, 'mg-c-details--empty-summary': this.isEmptySummary }, onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", { key: '515d6c4e117b547fe80a310fb90e114900f645e8' }, h("slot", { key: '0c9c0dcc47dd418e34e541d878bfc03ca137c68d', name: "summary" }), h("span", { key: 'c94f52994843b10c1161c0d85f38f8cb917ea806', class: "mg-c-details__toggle" }, h("mg-icon", { key: '9421452572af3deb03146a8dfd189369b249ba2d', icon: "chevron-up", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), h("span", { key: 'dbfb0b34da00e37f55ec07236611c2babdd6b7c5', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { key: '1b18b65a98e39a8663fa5d7e51eef5fbe2b92f76', class: "mg-c-details__details" }, h("slot", { key: '81c213594b1b67747db439624090784eaa5e6fcd', name: "details" }))));
+    }
+    get element() { return this; }
+    static get watchers() { return {
+        "toggleClosed": ["validateTitles"],
+        "toggleOpened": ["validateTitles"],
+        "expanded": ["handleExpanded"]
+    }; }
+    static get style() { return mgDetailsCss; }
+}, [257, "mg-details", {
+        "toggleClosed": [1, "toggle-closed"],
+        "toggleOpened": [1, "toggle-opened"],
+        "hideSummary": [4, "hide-summary"],
+        "expanded": [1028]
+    }, undefined, {
+        "toggleClosed": ["validateTitles"],
+        "toggleOpened": ["validateTitles"],
+        "expanded": ["handleExpanded"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["mg-details", "mg-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "mg-details":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, MgDetails$1);
+            }
+            break;
+        case "mg-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
 
 const MgDetails = MgDetails$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/mg-divider2.js

@@ -3,9 +3,11 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 const mgDividerCss = "/*!\n * @prop --mg-c-divider-color-background: Defines the background color of the divider. The default value is `color-mix(in srgb, var(--mg-b-color-dark), transparent 85%)`.\n * @prop --mg-c-divider-thickness: Defines the thickness of the divider. The default value is `--mg-b-size-border`.\n * @prop --mg-c-divider-spacing-vertical: Defines the vertical spacing of the divider. The default value is `--mg-b-size-40`.\n */.mg-c-divider{width:var(--mg-b-size-120);height:var(--mg-c-divider-thickness);margin:var(--mg-c-divider-spacing-vertical) auto;background-color:var(--mg-c-divider-color-background)}.mg-c-divider.mg-c-divider--full-width{width:100%}";
 
 const MgDivider = /*@__PURE__*/ proxyCustomElement(class MgDivider extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         /**************
          * Decorators *