@mgdis/mg-components 5.9.1 → 5.10.1

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

@@ -14,9 +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;
@@ -24,9 +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;
@@ -34,9 +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;
@@ -57,26 +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;
@@ -113,8 +104,6 @@ const MgActionMore$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
    *************/
   /**
    * Validate props
-   *
-   * @returns {void}
    */
   componentWillLoad() {
     this.messages = initLocales(this.element).messages.actionMore;
@@ -125,8 +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,21 +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);
@@ -64,11 +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"],
@@ -78,11 +75,11 @@ const MgBadge = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }; }
   static get style() { return mgBadgeCss; }
 }, [1, "mg-badge", {
-    "value": [1032],
+    "value": [8],
     "label": [1],
     "variant": [1],
     "outline": [4],
-    "classList": [32]
+    "classCollection": [32]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/mg-button2.js

@@ -24,9 +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)
@@ -39,9 +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 === ' ') {
@@ -54,9 +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 === ' ') {
@@ -74,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)) {
@@ -82,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) {
@@ -92,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) {
@@ -108,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);
@@ -119,22 +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.`);
       }
@@ -145,11 +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 {
@@ -164,13 +155,13 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "identifier": [1],
     "label": [1],
     "type": [1],
-    "fullWidth": [1028, "full-width"],
-    "form": [1025],
+    "fullWidth": [4, "full-width"],
+    "form": [1],
     "disabled": [1028],
     "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

@@ -22,20 +22,27 @@ const MgCard = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      *************/
     this.name = 'mg-card';
     this.baseClass = this.name;
+    /**
+     * Methode to set default varianStyle props
+     * needeed has stencil doesn't know that props is mutated when updated in prop watcher
+     */
+    this.setDefaultVariantStyle = () => {
+      if (this.variantStyle === undefined)
+        this.variantStyle = 'bar-left';
+    };
     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)) {
-      if (this.variantStyle === undefined)
-        this.variantStyle = 'bar-left';
-      this.classList.add(`${this.baseClass}--${newValue}`);
+      this.setDefaultVariantStyle();
+      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))
@@ -43,14 +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);
@@ -58,12 +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"],
@@ -73,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,8 +21,6 @@ const MgCharacterLeft = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
    *************/
   /**
    * Check if props are well configured on init
-   *
-   * @returns {void}
    */
   componentWillLoad() {
     this.validateMaxlength(this.maxlength);
@@ -30,8 +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,8 +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;
@@ -35,8 +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);
@@ -44,8 +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,8 +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,14 +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)) {
@@ -32,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) {
@@ -42,8 +39,6 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     /**
      * Check if form is valid
-     *
-     * @returns {void}
      */
     this.checkValidity = () => {
       // Update required on input event
@@ -55,9 +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();
@@ -65,8 +58,6 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     /**
      * Set mgInputs
-     *
-     * @returns {void}
      */
     this.setMgInputs = () => {
       // Get slotted mgInputs
@@ -88,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() {
@@ -97,8 +88,6 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   /**
    * Public method to display errors
-   *
-   * @returns {Promise<void>}
    */
   async displayError() {
     if (!this.readonly) {
@@ -113,8 +102,6 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    *************/
   /**
    * Check if component props are well configured on init
-   *
-   * @returns {void}
    */
   componentWillLoad() {
     // Get locales
@@ -141,8 +128,6 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   /**
    * Add slot listeners
-   *
-   * @returns {void}
    */
   componentDidLoad() {
     this.mgButtons.forEach(mgButton => {
@@ -160,11 +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 {
@@ -179,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,24 +240,31 @@ 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
+     */
+    this.setDefaultVariantStyle = () => {
+      if (this.variantStyle === undefined)
+        this.variantStyle = 'background';
+    };
     this.icon = undefined;
     this.size = 'regular';
     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) {
@@ -265,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) {
@@ -274,11 +281,10 @@ const MgIcon = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       if (!variants.includes(newValue))
         throw new Error(`<mg-icon> prop "variant" must be one of: ${variants.join(', ')}`);
       else {
-        if (this.variantStyle === undefined)
-          this.variantStyle = 'background';
+        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}`);
       }
     }
   }
@@ -288,25 +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);
@@ -317,11 +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"],
@@ -337,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,8 +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'];
@@ -32,8 +30,7 @@ const MgIllustratedMessage$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
     return (h("div", { class: {