@mgdis/mg-components 5.10.0 → 5.10.1

package/dist/components/index2.js

@@ -150,19 +150,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 +173,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 +186,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 +209,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

@@ -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: {

package/dist/components/mg-form.js

@@ -15,13 +15,11 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.classAllRequired = 'mg-form--all-required';
     /**
      * Define required message based on mg-inputs required elements
-     * Also
-     * @returns {void}
      */
     this.setRequiredMessage = () => {
       // init required message
       this.requiredMessage = null;
-      this.classList.delete(this.classAllRequired);
+      this.classCollection.delete(this.classAllRequired);
       // If the form is disabled or readonly none of them are required
       // Check if all fields are not editable (readonly or disabled)
       if (!this.disabled && !this.readonly && !this.mgInputs.every(input => input.disabled || input.readonly)) {
@@ -31,7 +29,7 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         // mg-input-toggle can not be required
         if (requiredInputs.length > 0 && requiredInputs.length === this.mgInputs.filter(input => input.nodeName !== 'MG-INPUT-TOGGLE').length) {
           this.requiredMessage = requiredInputs.length === 1 ? this.messages.form.allRequiredSingle : this.messages.form.allRequired;
-          this.classList.add(this.classAllRequired);
+          this.classCollection.add(this.classAllRequired);
         }
         // Some fields are required
         else if (requiredInputs.length > 0) {
@@ -41,7 +39,6 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     /**
      * Check if form is valid
-     * @returns {void}
      */
     this.checkValidity = () => {
       // Update required on input event
@@ -53,8 +50,7 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     /**
      * Handle Form Submit
-     * @param {SubmitEvent} event submit event
-     * @returns {void}
+     * @param event - submit event
      */
     this.handleFormSubmit = (event) => {
       event.preventDefault();
@@ -62,7 +58,6 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     /**
      * Set mgInputs
-     * @returns {void}
      */
     this.setMgInputs = () => {
       // Get slotted mgInputs
@@ -84,7 +79,7 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.disabled = false;
     this.valid = undefined;
     this.invalid = undefined;
-    this.classList = new ClassList(['mg-form']);
+    this.classCollection = new ClassList(['mg-form']);
     this.requiredMessage = undefined;
   }
   handleAttributeChange() {
@@ -93,7 +88,6 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   /**
    * Public method to display errors
-   * @returns {Promise<void>}
    */
   async displayError() {
     if (!this.readonly) {
@@ -108,7 +102,6 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    *************/
   /**
    * Check if component props are well configured on init
-   * @returns {void}
    */
   componentWillLoad() {
     // Get locales
@@ -135,7 +128,6 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   /**
    * Add slot listeners
-   * @returns {void}
    */
   componentDidLoad() {
     this.mgButtons.forEach(mgButton => {
@@ -153,10 +145,10 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   /**
    * Render
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (h("form", { class: this.classList.join(), id: this.identifier, name: this.name, ref: el => (this.form = el), onSubmit: this.handleFormSubmit }, this.requiredMessage && h("p", { innerHTML: this.requiredMessage }), h("slot", null), !this.readonly && !this.disabled && h("slot", { name: "actions" })));
+    return (h("form", { class: this.classCollection.join(), id: this.identifier, name: this.name, ref: el => (this.form = el), onSubmit: this.handleFormSubmit }, this.requiredMessage && h("p", { innerHTML: this.requiredMessage }), h("slot", null), !this.readonly && !this.disabled && h("slot", { name: "actions" })));
   }
   get element() { return this; }
   static get watchers() { return {
@@ -171,7 +163,7 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "disabled": [4],
     "valid": [1028],
     "invalid": [1028],
-    "classList": [32],
+    "classCollection": [32],
     "requiredMessage": [32],
     "displayError": [64]
   }]);

package/dist/components/mg-icon2.js

@@ -240,13 +240,12 @@ const MgIcon = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.__attachShadow();
     /**
      * getIcon
-     * @returns {HTMLElement} icon html
+     * @returns icon html
      */
     this.getIcon = () => icons[this.icon]();
     /**
      * Method 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)
@@ -257,15 +256,15 @@ const MgIcon = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.variant = undefined;
     this.variantStyle = undefined;
     this.spin = false;
-    this.classList = new ClassList(['mg-icon']);
+    this.classCollection = new ClassList(['mg-icon']);
   }
   validateIcon(newValue, oldValue) {
     if (!Object.keys(icons).includes(newValue))
       throw new Error(`<mg-icon> prop "icon" must be one of: ${Object.keys(icons).join(', ')}`);
     else {
       if (oldValue !== undefined)
-        this.classList.delete(`mg-icon--${oldValue}`);
-      this.classList.add(`mg-icon--${newValue}`);
+        this.classCollection.delete(`mg-icon--${oldValue}`);
+      this.classCollection.add(`mg-icon--${newValue}`);
     }
   }
   validateSize(newValue, oldValue) {
@@ -273,8 +272,8 @@ const MgIcon = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       throw new Error(`<mg-icon> prop "size" must be one of: ${sizes.join(', ')}`);
     else {
       if (oldValue !== undefined)
-        this.classList.delete(`mg-icon--size-${oldValue}`);
-      this.classList.add(`mg-icon--size-${newValue}`);
+        this.classCollection.delete(`mg-icon--size-${oldValue}`);
+      this.classCollection.add(`mg-icon--size-${newValue}`);
     }
   }
   validateVariant(newValue, oldValue) {
@@ -284,8 +283,8 @@ const MgIcon = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       else {
         this.setDefaultVariantStyle();
         if (oldValue !== undefined)
-          this.classList.delete(`mg-icon--variant-${oldValue}`);
-        this.classList.add(`mg-icon--variant-${newValue}`);
+          this.classCollection.delete(`mg-icon--variant-${oldValue}`);
+        this.classCollection.add(`mg-icon--variant-${newValue}`);
       }
     }
   }
@@ -295,24 +294,23 @@ const MgIcon = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         throw new Error(`<mg-icon> prop "variantStyle" must be one of: ${variantStyles.join(', ')}`);
       else {
         if (oldValue !== undefined)
-          this.classList.delete(`mg-icon--variant-style-${oldValue}`);
-        this.classList.add(`mg-icon--variant-style-${newValue}`);
+          this.classCollection.delete(`mg-icon--variant-style-${oldValue}`);
+        this.classCollection.add(`mg-icon--variant-style-${newValue}`);
       }
     }
   }
   handleSpin(newValue) {
     if (newValue) {
-      this.classList.add('mg-icon--spin');
-      this.classList.add('mg-a11y-animation');
+      this.classCollection.add('mg-icon--spin');
+      this.classCollection.add('mg-a11y-animation');
     }
     else {
-      this.classList.delete('mg-icon--spin');
-      this.classList.delete('mg-a11y-animation');
+      this.classCollection.delete('mg-icon--spin');
+      this.classCollection.delete('mg-a11y-animation');
     }
   }
   /**
    * Check if props are well configured on init
-   * @returns {void}
    */
   componentWillLoad() {
     this.validateIcon(this.icon);
@@ -323,10 +321,10 @@ const MgIcon = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   /**
    * Render component
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (h("svg", { class: this.classList.join(), "aria-hidden": "true", focusable: "false", viewBox: "0 0 16 16" }, this.getIcon()));
+    return (h("svg", { class: this.classCollection.join(), "aria-hidden": "true", focusable: "false", viewBox: "0 0 16 16" }, this.getIcon()));
   }
   static get watchers() { return {
     "icon": ["validateIcon"],
@@ -342,7 +340,7 @@ const MgIcon = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "variant": [1],
     "variantStyle": [1025, "variant-style"],
     "spin": [4],
-    "classList": [32]
+    "classCollection": [32]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/mg-illustrated-message.js

@@ -16,7 +16,6 @@ const MgIllustratedMessage$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
    *************/
   /**
    * Check if component props are well configured on init
-   * @returns {void}
    */
   componentDidLoad() {
     const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
@@ -31,7 +30,7 @@ const MgIllustratedMessage$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
   }
   /**
    * Render
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
     return (h("div", { class: {