@mgdis/mg-components 5.10.0 → 5.11.0

package/dist/components/components.utils.js

@@ -1,8 +1,8 @@
 /**
  * Create random ID
- * @param {string} prefix  add prefix to created ID
- * @param {number} length ID length
- * @returns {string} ID
+ * @param prefix - add prefix to created ID
+ * @param length - ID length
+ * @returns ID
  */
 const createID = (prefix = '', length = 10) => {
   let ID = '';
@@ -21,8 +21,7 @@ class ClassList {
   constructor(classlist = []) {
     /**
      * Add class
-     * @param {string} className class name to add
-     * @returns {void}
+     * @param className - class name to add
      */
     this.add = (className) => {
       if (!this.has(className)) {
@@ -31,8 +30,7 @@ class ClassList {
     };
     /**
      * Delete class
-     * @param {string} className class name to delete
-     * @returns {void}
+     * @param className - class name to delete
      */
     this.delete = (className) => {
       const index = this.classes.indexOf(className);
@@ -42,15 +40,15 @@ class ClassList {
     };
     /**
      * Check if class exist in list
-     * @param {string} className class name to check
-     * @returns {boolean} class name is in the list
+     * @param className - class name to check
+     * @returns class name is in the list
      */
     this.has = (className) => {
       return this.classes.includes(className);
     };
     /**
      * Join classes seperated by spaces
-     * @returns {string} joined values
+     * @returns joined values
      */
     this.join = () => {
       return this.classes.join(' ');
@@ -60,15 +58,15 @@ class ClassList {
 }
 /**
  * Check if all items are string
- * @param {unknown} items items to check
- * @returns {boolean} all items are string
+ * @param items - items to check
+ * @returns all items are string
  */
 const allItemsAreString = (items) => Array.isArray(items) && items.every(item => typeof item === 'string');
 /**
  * Check if element is a heading
- * @param {Element} element slotted element
- * @param {string[]} tagNames allowed tag names list
- * @returns {boolean} element is a heading
+ * @param element - slotted element
+ * @param tagNames - allowed tag names list
+ * @returns element is a heading
  */
 const isTagName = (element, tagNames) => {
   return tagNames.includes(element === null || element === void 0 ? void 0 : element.tagName.toLowerCase());
@@ -79,8 +77,8 @@ const isTagName = (element, tagNames) => {
 const focusableElements = 'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"]), [identifier]';
 /**
  * Get windows
- * @param {Window} localWindow the window we are lookink for other windows
- * @returns {Window[]} The list of windows found
+ * @param localWindow - the window we are lookink for other windows
+ * @returns The list of windows found
  */
 const getWindows = (localWindow) => {
   const parentWindows = getParentWindows(localWindow);
@@ -89,9 +87,9 @@ const getWindows = (localWindow) => {
 };
 /**
  * Get parent windows
- * @param {Window} localWindow the window we are lookink for parents
- * @param {Window[]} windows The list of allready found windows
- * @returns {Window[]} The list of windows found
+ * @param localWindow - the window we are lookink for parents
+ * @param windows - The list of allready found windows
+ * @returns The list of windows found
  */
 const getParentWindows = (localWindow, windows = []) => {
   // Check if is in iframe
@@ -111,9 +109,9 @@ const getParentWindows = (localWindow, windows = []) => {
 };
 /**
  * Get child windows
- * @param {Window} localWindow the window we are lookink for children
- * @param {Window[]} windows The list of allready found windows
- * @returns {Window[]} The list of windows found
+ * @param localWindow - the window we are lookink for children
+ * @param windows - The list of allready found windows
+ * @returns The list of windows found
  */
 const getChildWindows = (localWindow, windows = []) => {
   if (localWindow.frames.length > 0) {

package/dist/components/index2.js

@@ -16,6 +16,13 @@ const nbCharLeft$1 = "{counter} characters left.";
 const input$1 = {
 	select: {
 		placeholder: "Select a value"
+	},
+	checkbox: {
+		selectedValues: "{nb} selected values",
+		selectedValue: "{nb} selected value",
+		editButton: "Edit",
+		selectButton: "Select values",
+		showButton: "Show"
 	}
 };
 const form$1 = {
@@ -91,6 +98,13 @@ const nbCharLeft = "{counter} caractères disponibles.";
 const input = {
 	select: {
 		placeholder: "Sélectionnez une valeur"
+	},
+	checkbox: {
+		selectedValues: "{nb} valeurs selectionnées",
+		selectedValue: "{nb} valeur selectionnée",
+		editButton: "Modifier",
+		selectButton: "Sélectionner des valeurs",
+		showButton: "Voir"
 	}
 };
 const form = {
@@ -150,19 +164,19 @@ const fr = {
 
 /**
  * Format number to the locale currency
- * @param {number} number number to format
- * @param {string} locale locale to apply
- * @param {string} currency currency to apply
- * @returns {string} formatted currency
+ * @param number - number to format
+ * @param locale - locale to apply
+ * @param currency - currency to apply
+ * @returns formatted currency
  */
 const localeCurrency = (number, locale, currency) => {
   return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(number);
 };
 /**
  * Format number to locale
- * @param {number} number number to format
- * @param {string} locale locale to apply
- * @returns {string} formatted number
+ * @param number - number to format
+ * @param locale - locale to apply
+ * @returns formatted number
  */
 const localeNumber = (number, locale) => {
   return new Intl.NumberFormat(locale).format(number);
@@ -173,9 +187,9 @@ const localeNumber = (number, locale) => {
 const dateRegExp = /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/;
 /**
  * Locale date format
- * @param {string} date date to format
- * @param {string} locale locale to apply
- * @returns {string} formatted date
+ * @param date - date to format
+ * @param locale - locale to apply
+ * @returns formatted date
  */
 const localeDate = (date, locale) => {
   if (typeof date !== 'string' || date === '' || !dateRegExp.test(date)) {
@@ -186,10 +200,10 @@ const localeDate = (date, locale) => {
 /**
  * Get locale and messages
  * We load the defined locale but for now we only support the first subtag for messages
- * @param {HTMLElement} element element we need to get the language
- * @param {unknown} messages messages to use
- * @param {string} defaultLocale default messages locale
- * @returns {{ locale: string; messages: Record<string, unknown> }} messages object
+ * @param element - element we need to get the language
+ * @param messages - messages to use
+ * @param defaultLocale - default messages locale
+ * @returns messages object
  */
 const getLocaleMessages = (element, messages, defaultLocale) => {
   // Get local
@@ -209,8 +223,8 @@ const defaultLocale = 'en';
 const messages = { en, fr };
 /**
  * Get Intl object
- * @param {HTMLElement} element element we need to get the language
- * @returns {{ locale: string; messages: Record<string, unknown> }} messages object
+ * @param element - element we need to get the language
+ * @returns messages object
  */
 const initLocales = (element) => getLocaleMessages(element, messages, defaultLocale);
 

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

@@ -14,8 +14,8 @@ const mgActionMoreCss = ".sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1
 
 /**
  * MgActionMore['items'] type guard
- * @param {unknown} prop commponent items prop
- * @returns {boolean} return true if type is valid
+ * @param prop - commponent items prop
+ * @returns return true if type is valid
  */
 const isMgActionMoreItems = (prop) => {
   const items = prop;
@@ -23,8 +23,8 @@ const isMgActionMoreItems = (prop) => {
 };
 /**
  * MgActionMore['button'] type guard
- * @param {unknown} prop commponent button prop
- * @returns {boolean} return true if type is valid
+ * @param prop - commponent button prop
+ * @returns return true if type is valid
  */
 const isMgActionMoreButton = (prop) => {
   const button = prop;
@@ -32,8 +32,8 @@ const isMgActionMoreButton = (prop) => {
 };
 /**
  * MgActionMore['icon'] type guard
- * @param {unknown} prop commponent icon prop
- * @returns {boolean} return true if type is valid
+ * @param prop - commponent icon prop
+ * @returns return true if type is valid
  */
 const isMgActionMoreIcon = (prop) => {
   const icon = prop;
@@ -54,23 +54,20 @@ const MgActionMore$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
      ***********/
     /**
      * Toogle expanded props
-     * @returns {void}
      */
     this.toggleExpanded = () => {
       this.expanded = !this.expanded;
     };
     /**
      * Button click handler
-     * @returns {void}
      */
     this.handleButton = () => {
       this.toggleExpanded();
     };
     /**
      * Item click handler
-     * @param {MouseEvent} event click event
-     * @param {MgActionMoreItemType['mouseEventHandler']} customHandler item['mouseEventHandler']
-     * @returns {void}
+     * @param event - click event
+     * @param customHandler - item['mouseEventHandler']
      */
     this.handleItemClick = (event, customHandler) => {
       this.expanded = false;
@@ -107,7 +104,6 @@ const MgActionMore$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
    *************/
   /**
    * Validate props
-   * @returns {void}
    */
   componentWillLoad() {
     this.messages = initLocales(this.element).messages.actionMore;
@@ -118,7 +114,7 @@ const MgActionMore$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   }
   /**
    * Render
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
     const buttonLabel = this.button.label || this.messages.label;

package/dist/components/mg-badge2.js

@@ -22,7 +22,7 @@ const MgBadge = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.label = undefined;
     this.variant = variants[0];
     this.outline = undefined;
-    this.classList = new ClassList(['mg-badge']);
+    this.classCollection = new ClassList(['mg-badge']);
   }
   validateValue(newValue) {
     if (`${newValue}`.match(/^(\d+\+*|[?*!a-z])$/i) === null) {
@@ -40,20 +40,19 @@ const MgBadge = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
     else {
       if (oldValue !== undefined) {
-        this.classList.delete(`mg-badge--${oldValue}`);
+        this.classCollection.delete(`mg-badge--${oldValue}`);
       }
-      this.classList.add(`mg-badge--${newValue}`);
+      this.classCollection.add(`mg-badge--${newValue}`);
     }
   }
   validateOutline(newValue) {
     if (newValue)
-      this.classList.add(this.classOutline);
+      this.classCollection.add(this.classOutline);
     else
-      this.classList.delete(this.classOutline);
+      this.classCollection.delete(this.classOutline);
   }
   /**
    * Check if props are well configured on init
-   * @returns {void}
    */
   componentWillLoad() {
     this.validateValue(this.value);
@@ -63,10 +62,10 @@ const MgBadge = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   /**
    * Render
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (h("span", { class: this.classList.join() }, h("span", { class: "mg-badge__value" }, this.value), h("span", { class: "sr-only" }, this.label)));
+    return (h("span", { class: this.classCollection.join() }, h("span", { class: "mg-badge__value" }, this.value), h("span", { class: "sr-only" }, this.label)));
   }
   static get watchers() { return {
     "value": ["validateValue"],
@@ -80,7 +79,7 @@ const MgBadge = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "label": [1],
     "variant": [1],
     "outline": [4],
-    "classList": [32]
+    "classCollection": [32]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/mg-button2.js

@@ -24,8 +24,7 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.classFullWidth = 'mg-button--full-width';
     /**
      * Trigger actions onClick event
-     * @param {MouseEvent} event click event
-     * @returns {void}
+     * @param event - click event
      */
     this.handleClick = (event) => {
       if (this.disabled)
@@ -38,8 +37,7 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     /**
      * Handle onKeydown event
-     * @param {KeyboardEvent} event keyboard event
-     * @returns {void}
+     * @param event - keyboard event
      */
     this.handleKeydown = (event) => {
       if (!this.disabled && event.key === ' ') {
@@ -52,8 +50,7 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     /**
      * Handle onKeyup event
-     * @param {KeyboardEvent} event keyboard event
-     * @returns {void}
+     * @param event - keyboard event
      */
     this.handleKeyup = (event) => {
       if (!this.disabled && event.key === ' ') {
@@ -71,7 +68,7 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.isIcon = false;
     this.disableOnClick = false;
     this.loading = false;
-    this.classList = new ClassList(['mg-button']);
+    this.classCollection = new ClassList(['mg-button']);
   }
   validateVariant(newValue, oldValue) {
     if (!variants.includes(newValue)) {
@@ -79,9 +76,9 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
     else {
       if (oldValue !== undefined) {
-        this.classList.delete(`mg-button--${oldValue}`);
+        this.classCollection.delete(`mg-button--${oldValue}`);
       }
-      this.classList.add(`mg-button--${newValue}`);
+      this.classCollection.add(`mg-button--${newValue}`);
     }
   }
   validateFullWidth(newValue) {
@@ -89,10 +86,10 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       throw new Error('<mg-button> prop "fullWidth" cannot be used with prop "isIcon".');
     }
     else if (newValue) {
-      this.classList.add(this.classFullWidth);
+      this.classCollection.add(this.classFullWidth);
     }
     else {
-      this.classList.delete(this.classFullWidth);
+      this.classCollection.delete(this.classFullWidth);
     }
   }
   disabledHandler(isDisabled) {
@@ -105,10 +102,10 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.element.onclick = isDisabled ? undefined : this.onClickElementFn;
     // apply style
     if (isDisabled) {
-      this.classList.add(this.classDisabled);
+      this.classCollection.add(this.classDisabled);
     }
     else {
-      this.classList.delete(this.classDisabled);
+      this.classCollection.delete(this.classDisabled);
     }
     // emit value update
     this.disabledChange.emit(isDisabled);
@@ -116,21 +113,20 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   loadingHandler(newValue) {
     // we add loading style if it newvalue is true else we remove it
     if (newValue) {
-      this.classList.add(this.classLoading);
+      this.classCollection.add(this.classLoading);
     }
     else {
-      this.classList.delete(this.classLoading);
+      this.classCollection.delete(this.classLoading);
     }
   }
   /**
    * Check if props are well configured on init
-   * @returns {void}
    */
   componentWillLoad() {
     this.validateVariant(this.variant);
     this.validateFullWidth(this.fullWidth);
     if (this.isIcon) {
-      this.classList.add(`mg-button--icon`);
+      this.classCollection.add(`mg-button--icon`);
       if (typeof this.label !== 'string' || this.label.trim() === '') {
         throw new Error(`<mg-button> prop "label" is mandatory when prop "isIcon" is set to true.`);
       }
@@ -141,10 +137,10 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   /**
    * Render component
-   * @returns {HTMLElement} html element
+   * @returns html element
    */
   render() {
-    return (h(Host, { role: "button", tabIndex: 0, type: this.type, form: this.form, "full-width": this.fullWidth, "aria-label": this.label, "aria-disabled": this.disabled !== undefined && this.disabled.toString(), onClick: this.handleClick, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown }, h("div", { class: this.classList.join(), id: this.identifier }, this.loading && h("mg-icon", { icon: "loader", spin: true }), h("div", { class: "mg-button__content" }, h("slot", null)))));
+    return (h(Host, { role: "button", tabIndex: 0, type: this.type, form: this.form, "full-width": this.fullWidth, "aria-label": this.label, "aria-disabled": this.disabled !== undefined && this.disabled.toString(), onClick: this.handleClick, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown }, h("div", { class: this.classCollection.join(), id: this.identifier }, this.loading && h("mg-icon", { icon: "loader", spin: true }), h("div", { class: "mg-button__content" }, h("slot", null)))));
   }
   get element() { return this; }
   static get watchers() { return {
@@ -165,7 +161,7 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "isIcon": [4, "is-icon"],
     "disableOnClick": [4, "disable-on-click"],
     "loading": [32],
-    "classList": [32]
+    "classCollection": [32]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/mg-card2.js

@@ -10,7 +10,7 @@ const variants = ['info', 'warning', 'success', 'danger', 'app'];
  */
 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 mgCardCss = ".mg-card{position:relative;width:100%;max-width:var(--mg-card-max-width);min-width:var(--mg-card-min-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-min-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() {
@@ -25,7 +25,6 @@ const MgCard = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     /**
      * Methode to set default varianStyle props
      * needeed has stencil doesn't know that props is mutated when updated in prop watcher
-     * @returns {void}
      */
     this.setDefaultVariantStyle = () => {
       if (this.variantStyle === undefined)
@@ -33,17 +32,17 @@ const MgCard = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     this.variant = undefined;
     this.variantStyle = undefined;
-    this.classList = new ClassList([this.baseClass]);
+    this.classCollection = 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)) {
       this.setDefaultVariantStyle();
-      this.classList.add(`${this.baseClass}--${newValue}`);
+      this.classCollection.add(`${this.baseClass}--${newValue}`);
     }
     if (Boolean(oldValue))
-      this.classList.delete(`${this.baseClass}--${oldValue}`);
+      this.classCollection.delete(`${this.baseClass}--${oldValue}`);
   }
   validateVariantStyle(newValue, oldValue) {
     if (newValue && !variantStyles.includes(newValue))
@@ -51,16 +50,15 @@ const MgCard = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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}`);
+      this.classCollection.add(`${this.baseClass}--${newValue}`);
     if (Boolean(oldValue))
-      this.classList.delete(`${this.baseClass}--${oldValue}`);
+      this.classCollection.delete(`${this.baseClass}--${oldValue}`);
   }
   /*************
    * Lifecycle *
    *************/
   /**
    * Check if props are well configured on init
-   * @returns {void}
    */
   componentWillLoad() {
     this.validateVariant(this.variant);
@@ -68,11 +66,11 @@ const MgCard = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   /**
    * Render
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
     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)));
+    return (h("div", { class: this.classCollection.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"],
@@ -82,7 +80,7 @@ const MgCard = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
 }, [1, "mg-card", {
     "variant": [1],
     "variantStyle": [1025, "variant-style"],
-    "classList": [32]
+    "classCollection": [32]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

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

@@ -21,7 +21,6 @@ const MgCharacterLeft = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
    *************/
   /**
    * Check if props are well configured on init
-   * @returns {void}
    */
   componentWillLoad() {
     this.validateMaxlength(this.maxlength);
@@ -29,7 +28,7 @@ const MgCharacterLeft = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   }
   /**
    * Render component
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
     return (h("span", { id: this.identifier, "aria-live": "polite" }, h("span", { "aria-hidden": "true" }, this.maxlength - this.characters.length, "/", this.maxlength), h("span", { class: "sr-only" }, this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length))));

package/dist/components/mg-details.js

@@ -11,7 +11,6 @@ const MgDetails$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.expandedChange = createEvent(this, "expanded-change", 7);
     /**
      * Handle details toggle
-     * @returns {void}
      */
     this.handleToggle = () => {
       this.expanded = this.details.open;
@@ -34,7 +33,6 @@ const MgDetails$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    *************/
   /**
    * Check if component props are well configured on init
-   * @returns {void}
    */
   componentWillLoad() {
     this.validateTitles(this.toggleClosed);
@@ -42,7 +40,7 @@ const MgDetails$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   /**
    * Render
-   * @returns {HTMLElement} HTML Element
+   * @returns 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', 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" }))));

package/dist/components/mg-divider.js

@@ -11,7 +11,7 @@ const MgDivider$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   /**
    * Render
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
     return (h("div", { class: {