@mgdis/mg-components 5.9.1 → 5.10.1

package/dist/esm/mg-action-more_31.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-3249671d.js';
-import { i as initLocales, D as Direction, l as localeDate, d as dateRegExp, a as localeCurrency, b as localeNumber, s as sizes$2 } from './mg-menu.conf-881fbd82.js';
+import { i as initLocales, D as Direction, l as localeDate, d as dateRegExp, a as localeCurrency, b as localeNumber, s as sizes$2 } from './mg-menu.conf-9ca023ee.js';
 
 /**
  * Available menu-item positions
@@ -22,10 +22,9 @@ var Status$1;
 
 /**
  * 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 = '';
@@ -44,9 +43,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)) {
@@ -55,9 +52,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);
@@ -67,17 +62,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(' ');
@@ -87,17 +80,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());
@@ -107,9 +98,9 @@ const isTagName = (element, tagNames) => {
  */
 const focusableElements = 'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"]), [identifier]';
 /**
- *
- * @param {Window} localWindow the window we are lookink for other windows
- * @returns {Window[]} The list of windows found
+ * Get windows
+ * @param localWindow - the window we are lookink for other windows
+ * @returns The list of windows found
  */
 const getWindows = (localWindow) => {
   const parentWindows = getParentWindows(localWindow);
@@ -118,10 +109,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
@@ -141,10 +131,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) {
@@ -163,9 +152,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;
@@ -173,9 +161,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;
@@ -183,9 +170,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;
@@ -204,26 +190,20 @@ const MgActionMore = class {
      ***********/
     /**
      * 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;
@@ -260,8 +240,6 @@ const MgActionMore = class {
    *************/
   /**
    * Validate props
-   *
-   * @returns {void}
    */
   componentWillLoad() {
     this.messages = initLocales(this.element).messages.actionMore;
@@ -272,8 +250,7 @@ const MgActionMore = class {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
     const buttonLabel = this.button.label || this.messages.label;
@@ -321,7 +298,7 @@ const MgBadge = class {
     this.label = undefined;
     this.variant = variants$5[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) {
@@ -339,21 +316,19 @@ const MgBadge = class {
     }
     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);
@@ -363,11 +338,10 @@ const MgBadge = class {
   }
   /**
    * 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"],
@@ -398,9 +372,7 @@ const MgButton = class {
     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)
@@ -413,9 +385,7 @@ const MgButton = class {
     };
     /**
      * Handle onKeydown event
-     *
-     * @param {KeyboardEvent} event keyboard event
-     * @returns {void}
+     * @param event - keyboard event
      */
     this.handleKeydown = (event) => {
       if (!this.disabled && event.key === ' ') {
@@ -428,9 +398,7 @@ const MgButton = class {
     };
     /**
      * Handle onKeyup event
-     *
-     * @param {KeyboardEvent} event keyboard event
-     * @returns {void}
+     * @param event - keyboard event
      */
     this.handleKeyup = (event) => {
       if (!this.disabled && event.key === ' ') {
@@ -448,7 +416,7 @@ const MgButton = class {
     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$4.includes(newValue)) {
@@ -456,9 +424,9 @@ const MgButton = class {
     }
     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) {
@@ -466,10 +434,10 @@ const MgButton = class {
       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) {
@@ -482,10 +450,10 @@ const MgButton = class {
     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);
@@ -493,22 +461,20 @@ const MgButton = class {
   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.`);
       }
@@ -519,11 +485,10 @@ const MgButton = class {
   }
   /**
    * 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 getElement(this); }
   static get watchers() { return {
@@ -554,20 +519,27 @@ const MgCard = class {
      *************/
     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$3.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$1.includes(newValue))
@@ -575,14 +547,15 @@ const MgCard = class {
     else if (Boolean(newValue) && !variants$3.includes(this.variant))
       throw new Error(`<${this.name}> prop "variantStyle" must be paired with ${JSON.stringify(variants$3)} "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);
@@ -590,12 +563,11 @@ const MgCard = class {
   }
   /**
    * 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"],
@@ -623,8 +595,6 @@ const MgCharacterLeft = class {
    *************/
   /**
    * Check if props are well configured on init
-   *
-   * @returns {void}
    */
   componentWillLoad() {
     this.validateMaxlength(this.maxlength);
@@ -632,8 +602,7 @@ const MgCharacterLeft = class {
   }
   /**
    * 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))));
@@ -653,8 +622,6 @@ const MgDetails = class {
     this.expandedChange = createEvent(this, "expanded-change", 7);
     /**
      * Handle details toggle
-     *
-     * @returns {void}
      */
     this.handleToggle = () => {
       this.expanded = this.details.open;
@@ -677,8 +644,6 @@ const MgDetails = class {
    *************/
   /**
    * Check if component props are well configured on init
-   *
-   * @returns {void}
    */
   componentWillLoad() {
     this.validateTitles(this.toggleClosed);
@@ -686,8 +651,7 @@ const MgDetails = class {
   }
   /**
    * 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" }))));
@@ -709,8 +673,7 @@ const MgDivider = class {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
     return (h("div", { class: {
@@ -732,14 +695,11 @@ const MgForm = class {
     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)) {
@@ -749,7 +709,7 @@ const MgForm = class {
         // 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) {
@@ -759,8 +719,6 @@ const MgForm = class {
     };
     /**
      * Check if form is valid
-     *
-     * @returns {void}
      */
     this.checkValidity = () => {
       // Update required on input event
@@ -772,9 +730,7 @@ const MgForm = class {
     };
     /**
      * Handle Form Submit
-     *
-     * @param {SubmitEvent} event submit event
-     * @returns {void}
+     * @param event - submit event
      */
     this.handleFormSubmit = (event) => {
       event.preventDefault();
@@ -782,8 +738,6 @@ const MgForm = class {
     };
     /**
      * Set mgInputs
-     *
-     * @returns {void}
      */
     this.setMgInputs = () => {
       // Get slotted mgInputs
@@ -805,7 +759,7 @@ const MgForm = class {
     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() {
@@ -814,8 +768,6 @@ const MgForm = class {
   }
   /**
    * Public method to display errors
-   *
-   * @returns {Promise<void>}
    */
   async displayError() {
     if (!this.readonly) {
@@ -830,8 +782,6 @@ const MgForm = class {
    *************/
   /**
    * Check if component props are well configured on init
-   *
-   * @returns {void}
    */
   componentWillLoad() {
     // Get locales
@@ -858,8 +808,6 @@ const MgForm = class {
   }
   /**
    * Add slot listeners
-   *
-   * @returns {void}
    */
   componentDidLoad() {
     this.mgButtons.forEach(mgButton => {
@@ -877,11 +825,10 @@ const MgForm = class {
   }
   /**
    * 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 getElement(this); }
   static get watchers() { return {
@@ -1128,24 +1075,31 @@ const MgIcon = class {
     registerInstance(this, hostRef);
     /**
      * 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) {
@@ -1153,8 +1107,8 @@ const MgIcon = class {
       throw new Error(`<mg-icon> prop "size" must be one of: ${sizes$1.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) {
@@ -1162,11 +1116,10 @@ const MgIcon = class {
       if (!variants$2.includes(newValue))
         throw new Error(`<mg-icon> prop "variant" must be one of: ${variants$2.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}`);
       }
     }
   }
@@ -1176,25 +1129,23 @@ const MgIcon = class {
         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);
@@ -1205,11 +1156,10 @@ const MgIcon = class {
   }
   /**
    * 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"],
@@ -1234,8 +1184,6 @@ const MgIllustratedMessage = class {
    *************/
   /**
    * Check if component props are well configured on init
-   *
-   * @returns {void}
    */
   componentDidLoad() {
     const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
@@ -1250,8 +1198,7 @@ const MgIllustratedMessage = class {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
     return (h("div", { class: {
@@ -1266,13 +1213,17 @@ const MgIllustratedMessage = class {
 };
 MgIllustratedMessage.style = mgIllustratedMessageCss;
 
+/**
+ * Possible input width
+ */
+const widths = [2, 4, 16, 'full'];
+
 /**
  * Apply in all input child node the aria-describedby attribute
- *
- * @param {VNode[]} children Represent scoped elements
- * @param {Set<string>} ariaDescribedbyIDs List of IDs
- * @param {FunctionalUtilities} utils Stencil.js utils
- * @returns {VNode[]} Children with aria-describedby attribute
+ * @param children - Represent scoped elements
+ * @param ariaDescribedbyIDs - List of IDs
+ * @param utils - Stencil.js utils
+ * @returns Children with aria-describedby attribute
  */
 const applyAriadescribedBy = (children, ariaDescribedbyIDs, utils) => utils.map(children, child => {
   if (['input', 'select', 'textarea'].includes(child.vtag)) {
@@ -1285,32 +1236,36 @@ const applyAriadescribedBy = (children, ariaDescribedbyIDs, utils) => utils.map(
 });
 /**
  * Add classes based on props
- *
- * @param {MgInputProps} props MgInput Interface Props
+ * @param props - MgInput Interface Props
  */
 const manageClasses = (props) => {
-  props.classList.add('mg-input');
+  props.classCollection.add('mg-input');
   if (props.labelOnTop)
-    props.classList.add('mg-input--label-on-top');
+    props.classCollection.add('mg-input--label-on-top');
+  else
+    props.classCollection.delete('mg-input--label-on-top');
   if (props.readonly)
-    props.classList.add('mg-input--readonly');
+    props.classCollection.add('mg-input--readonly');
+  else
+    props.classCollection.delete('mg-input--readonly');
+  widths.forEach(width => {
+    props.classCollection.delete(`mg-input--width-${width}`);
+  });
   if (props.mgWidth !== undefined)
-    props.classList.add(`mg-input--width-${props.mgWidth}`);
+    props.classCollection.add(`mg-input--width-${props.mgWidth}`);
 };
 /**
  * Get tagname
- *
- * @param {boolean} isFieldset is fieldset
- * @returns {string} tag name
+ * @param isFieldset - is fieldset
+ * @returns tag name
  */
 const getTagName = (isFieldset) => (isFieldset ? 'fieldset' : 'div');
 /**
  * Get input template
- *
- * @param {MgInputProps} props MgInput Interface Props
- * @param {VNode[]} children Represent scoped elements
- * @param {FunctionalUtilities} utils Stencil.js utils
- * @returns {VNode[]} input template
+ * @param props - MgInput Interface Props
+ * @param children - Represent scoped elements
+ * @param utils - Stencil.js utils
+ * @returns input template
  */
 const MgInput = (props, children, utils) => {
   /**
@@ -1366,19 +1321,17 @@ const MgInput = (props, children, utils) => {
   const TagName = getTagName(props.isFieldset);
   /**
    * Get tooltip node
-   *
-   * @returns {VNode[]} mg-tooltip
+   * @returns mg-tooltip
    */
   const getTooltip = () => (h("mg-tooltip", { identifier: `${props.identifier}-tooltip`, message: props.tooltip },
     h("mg-icon", { icon: "info-circle" })));
   /**
    * Get input title (label) node
    * Display asterisk only if not disabled and not readonly
-   *
-   * @returns {VNode[]} mg-input-title
+   * @returns mg-input-title
    */
   const getInputTitle = () => (h("mg-input-title", { identifier: props.identifier, class: props.labelHide ? 'sr-only' : undefined, required: props.required && !props.disabled && !props.readonly, "is-legend": props.isFieldset }, props.label));
-  return (h(TagName, { class: props.classList.join() },
+  return (h(TagName, { class: props.classCollection.join() },
     props.labelOnTop ? (h("div", { class: "mg-input__title" },
       getInputTitle(),
       !props.readonly && props.tooltip && getTooltip())) : (getInputTitle()),
@@ -1396,9 +1349,8 @@ const mgInputCheckboxCss = ":host{display:block}.mg-input{display:flex;align-ite
 
 /**
  * type CheckboxItem validation function
- *
- * @param {unknown} items Checkbox item
- * @returns {boolean} match item type
+ * @param items - Checkbox item
+ * @returns match item type
  */
 const isCheckboxItems = (items) => Array.isArray(items) &&
   items.every(item => typeof item === 'object' && typeof item.title === 'string' && (item.value === null || typeof item.value === 'boolean') && item.value !== undefined);
@@ -1416,8 +1368,7 @@ const MgInputCheckbox = class {
     this.hasDisplayedError = false;
     /**
      * Handle input event
-     *
-     * @param {InputEvent} event input event
+     * @param event - input event
      */
     this.handleInput = (event) => {
       this.checkboxItems = this.checkboxItems.map(item => {
@@ -1439,8 +1390,7 @@ const MgInputCheckbox = class {
     };
     /**
      * get invalid element
-     *
-     * @returns {HTMLInputElement} element
+     * @returns element
      */
     this.getInvalidElement = () => this.inputs.find((input) => input !== null && !input.disabled && !input.checkValidity());
     /**
@@ -1477,7 +1427,7 @@ const MgInputCheckbox = class {
     this.helpText = undefined;
     this.valid = undefined;
     this.invalid = undefined;
-    this.classList = new ClassList(['mg-input--checkbox']);
+    this.classCollection = new ClassList(['mg-input--checkbox']);
     this.errorMessage = undefined;
     this.checkboxItems = [];
   }
@@ -1507,8 +1457,6 @@ const MgInputCheckbox = class {
   }
   /**
    * Public method to display errors
-   *
-   * @returns {Promise<void>}
    */
   async displayError() {
     this.checkValidity();
@@ -1520,8 +1468,7 @@ const MgInputCheckbox = class {
    *************/
   /**
    * Check if component props are well configured on init
-   *
-   * @returns {ReturnType<typeof setTimeout>} timeout
+   * @returns timeout
    */
   componentWillLoad() {
     // Get locales
@@ -1537,11 +1484,10 @@ const MgInputCheckbox = class {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, readonly: undefined, mgWidth: undefined, disabled: this.disabled, value: this.value && this.value.toString(), readonlyValue: undefined, tooltip: !this.readonly ? this.tooltip : undefined, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined, isFieldset: true }, h("ul", { class: { 'mg-input__input-group-container': true, 'mg-input__input-group-container--vertical': this.inputVerticalList }, role: "list" }, this.checkboxItems
+    return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, readonly: undefined, mgWidth: undefined, disabled: this.disabled, value: this.value && this.value.toString(), readonlyValue: undefined, tooltip: !this.readonly ? this.tooltip : undefined, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined, isFieldset: true }, h("ul", { class: { 'mg-input__input-group-container': true, 'mg-input__input-group-container--vertical': this.inputVerticalList }, role: "list" }, this.checkboxItems
       .filter(item => {
       return !this.readonly || item.value;
     })
@@ -1605,8 +1551,7 @@ const MgInputDate = class {
     };
     /**
      * get input error code
-     *
-     * @returns {null | InputError} error code
+     * @returns error code
      */
     this.getInputError = () => {
       var _a, _b;
@@ -1631,8 +1576,6 @@ const MgInputDate = class {
     };
     /**
      * Check input errors
-     *
-     * @returns {void}
      */
     this.setErrorMessage = () => {
       var _a;
@@ -1670,7 +1613,7 @@ const MgInputDate = class {
     this.invalid = undefined;
     this.min = undefined;
     this.max = undefined;
-    this.classList = new ClassList(['mg-input--date']);
+    this.classCollection = new ClassList(['mg-input--date']);
     this.errorMessage = undefined;
   }
   validateValue(newValue) {
@@ -1701,8 +1644,6 @@ const MgInputDate = class {
   }
   /**
    * Public method to display errors
-   *
-   * @returns {Promise<void>}
    */
   async displayError() {
     this.checkValidity();
@@ -1714,8 +1655,7 @@ const MgInputDate = class {
    *************/
   /**
    * Check if component props are well configured on init
-   *
-   * @returns {ReturnType<typeof setTimeout>} timeout
+   * @returns timeout
    */
   componentWillLoad() {
     // Get locales
@@ -1735,11 +1675,10 @@ const MgInputDate = class {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: undefined, disabled: this.disabled, value: this.value, readonlyValue: localeDate(this.value, this.locale), tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("input", { type: "date", class: "mg-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, onInput: this.handleInput, onBlur: this.handleBlur, ref: el => {
+    return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: undefined, disabled: this.disabled, value: this.value, readonlyValue: localeDate(this.value, this.locale), tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("input", { type: "date", class: "mg-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, onInput: this.handleInput, onBlur: this.handleBlur, ref: el => {
         if (el !== null)
           this.input = el;
       } })));
@@ -1779,8 +1718,6 @@ const MgInputNumeric = class {
     this.hasDisplayedError = false;
     /**
      * Handle input event
-     *
-     * @returns {void}
      */
     this.handleInput = () => {
       // Check validity
@@ -1792,26 +1729,22 @@ const MgInputNumeric = class {
     };
     /**
      * Handle focus event
-     *
-     * @returns {void}
      */
     this.handleFocus = () => {
       this.hasFocus = true;
     };
     /**
      * Handle blur event
-     *
-     * @returns {void}
      */
     this.handleBlur = () => {
+      if (this.value === '-')
+        this.value = '';
       // Display Error
       this.displayError();
       this.hasFocus = false;
     };
     /**
      * Check if input is valid
-     *
-     * @returns {void}
      */
     this.checkValidity = () => {
       this.valid = this.readonly || this.disabled || this.getInputError() === null;
@@ -1821,8 +1754,6 @@ const MgInputNumeric = class {
     };
     /**
      * Set input error message
-     *
-     * @returns {void}
      */
     this.setErrorMessage = () => {
       // Set error message
@@ -1839,8 +1770,7 @@ const MgInputNumeric = class {
     };
     /**
      * Get input error code
-     *
-     * @returns {null | InputError} error code
+     * @returns error code
      */
     this.getInputError = () => {
       let inputError = null;
@@ -1868,20 +1798,17 @@ const MgInputNumeric = class {
     };
     /**
      * Format value based on type
-     *
-     * @param {number} value value to format
-     * @returns {string} formated local value
+     * @param value - value to format
+     * @returns formated local value
      */
     this.formatValue = (value) => (this.type === 'currency' ? localeCurrency(value, this.locale, this.currency) : localeNumber(value, this.locale));
     /**
      * Validate append slot
-     *
-     * @returns {void}
      */
     this.validateAppendSlot = () => {
       const slotAppendInput = this.element.querySelector('[slot="append-input"]');
       if (slotAppendInput !== null) {
-        this.classList.add(slotAppendInput.nodeName === 'MG-BUTTON' ? 'mg-input--is-input-group-append' : 'mg-input--is-append-input-slot-content');
+        this.classCollection.add(slotAppendInput.nodeName === 'MG-BUTTON' ? 'mg-input--is-input-group-append' : 'mg-input--is-append-input-slot-content');
       }
     };
     this.value = undefined;
@@ -1905,7 +1832,7 @@ const MgInputNumeric = class {
     this.decimalLength = 2;
     this.valid = undefined;
     this.invalid = undefined;
-    this.classList = new ClassList(['mg-input--numeric']);
+    this.classCollection = new ClassList(['mg-input--numeric']);
     this.errorMessage = undefined;
     this.hasFocus = false;
   }
@@ -1917,7 +1844,7 @@ const MgInputNumeric = class {
       // Regex
       const regex = this.type === 'integer' ? /^-?\d+$/ : /^-?\d+[.,]?\d*$/;
       // Filter input
-      if (newValue === '' || (newValue.match(regex) && integer.length <= this.integerLength && decimal.length <= (this.type === 'integer' ? 0 : this.decimalLength))) {
+      if (['', '-'].includes(newValue) || (newValue.match(regex) && integer.length <= this.integerLength && decimal.length <= (this.type === 'integer' ? 0 : this.decimalLength))) {
         this.storedValue = newValue;
       }
       else if (this.storedValue !== undefined) {
@@ -1964,8 +1891,6 @@ const MgInputNumeric = class {
   }
   /**
    * Public method to display errors
-   *
-   * @returns {Promise<void>}
    */
   async displayError() {
     this.checkValidity();
@@ -1975,8 +1900,7 @@ const MgInputNumeric = class {
   /**
    * Displayed value in input
    * Change on focus/blur
-   *
-   * @returns {MgInputNumeric['value'] | MgInputNumeric['readonlyValue']} display value
+   * @returns display value
    */
   displayValue() {
     return this.hasFocus ? this.value : this.readonlyValue;
@@ -1986,8 +1910,7 @@ const MgInputNumeric = class {
    *************/
   /**
    * Check if component props are well configured on init
-   *
-   * @returns {ReturnType<typeof setTimeout>} timeout
+   * @returns timeout
    */
   componentWillLoad() {
     // Get locales
@@ -2010,11 +1933,10 @@ const MgInputNumeric = class {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: this.readonlyValue, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("input", { type: "text", class: "mg-input__box", value: this.displayValue(), id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: el => {
+    return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: this.readonlyValue, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("input", { type: "text", class: "mg-input__box", value: this.displayValue(), id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: el => {
         if (el !== null)
           this.input = el;
       } }), h("slot", { name: "append-input" })));
@@ -2093,7 +2015,7 @@ const MgInputPassword = class {
     this.helpText = undefined;
     this.valid = undefined;
     this.invalid = undefined;
-    this.classList = new ClassList(['mg-input--password']);
+    this.classCollection = new ClassList(['mg-input--password']);
     this.errorMessage = undefined;
   }
   handleValue(newValue) {
@@ -2111,8 +2033,6 @@ const MgInputPassword = class {
   }
   /**
    * Public method to display errors
-   *
-   * @returns {Promise<void>}
    */
   async displayError() {
     this.checkValidity();
@@ -2124,8 +2044,7 @@ const MgInputPassword = class {
    *************/
   /**
    * Check if component props are well configured on init
-   *
-   * @returns {ReturnType<typeof setTimeout>} timeout
+   * @returns timeout
    */
   componentWillLoad() {
     // Get locales
@@ -2139,11 +2058,10 @@ const MgInputPassword = class {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: this.value !== undefined ? '•'.repeat(this.value.length) : undefined, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("input", { type: "password", class: "mg-input__box", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, onInput: this.handleInput, onBlur: this.handleBlur, ref: el => {
+    return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: this.value !== undefined ? '•'.repeat(this.value.length) : undefined, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("input", { type: "password", class: "mg-input__box", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, onInput: this.handleInput, onBlur: this.handleBlur, ref: el => {
         if (el !== null)
           this.input = el;
       } })));
@@ -2162,9 +2080,8 @@ const mgInputRadioCss = ":host{display:block}.mg-input{display:flex;align-items:
 
 /**
  * type Option validation function
- *
- * @param {RadioOption} option radio option
- * @returns {boolean} radio option type is valid
+ * @param option - radio option
+ * @returns radio option type is valid
  */
 const isOption$2 = (option) => typeof option === 'object' && typeof option.title === 'string' && option.value !== undefined;
 const MgInputRadio = class {
@@ -2181,9 +2098,7 @@ const MgInputRadio = class {
     this.hasDisplayedError = false;
     /**
      * Handle input event
-     *
-     * @param {event} event input event
-     * @returns {void}
+     * @param event - input event
      */
     this.handleInput = (event) => {
       this.checkValidity();
@@ -2191,8 +2106,6 @@ const MgInputRadio = class {
     };
     /**
      * Handle blur event
-     *
-     * @returns {void}
      */
     this.handleBlur = () => {
       this.checkValidity();
@@ -2200,8 +2113,6 @@ const MgInputRadio = class {
     };
     /**
      * Check if input is valid
-     *
-     * @returns {void}
      */
     this.checkValidity = () => {
       this.valid = this.readonly || this.disabled || this.getInvalidElement() === undefined;
@@ -2211,8 +2122,6 @@ const MgInputRadio = class {
     };
     /**
      * Set input error message
-     *
-     * @returns {void}
      */
     this.setErrorMessage = () => {
       const invalidElement = this.getInvalidElement();
@@ -2224,8 +2133,7 @@ const MgInputRadio = class {
     };
     /**
      * get invalid element
-     *
-     * @returns {HTMLInputElement} element
+     * @returns element
      */
     this.getInvalidElement = () => this.inputs.find((input) => !input.disabled && !input.readOnly && !input.checkValidity());
     this.value = undefined;
@@ -2243,7 +2151,7 @@ const MgInputRadio = class {
     this.helpText = undefined;
     this.valid = undefined;
     this.invalid = undefined;
-    this.classList = new ClassList(['mg-input--radio']);
+    this.classCollection = new ClassList(['mg-input--radio']);
     this.errorMessage = undefined;
     this.options = undefined;
   }
@@ -2279,8 +2187,6 @@ const MgInputRadio = class {
   }
   /**
    * Public method to display errors
-   *
-   * @returns {Promise<void>}
    */
   async displayError() {
     this.checkValidity();
@@ -2292,8 +2198,7 @@ const MgInputRadio = class {
    *************/
   /**
    * Check if component props are well configured on init
-   *
-   * @returns {ReturnType<typeof setTimeout>} timeout
+   * @returns timeout
    */
   componentWillLoad() {
     // Get locales
@@ -2309,11 +2214,10 @@ const MgInputRadio = class {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, disabled: this.disabled, readonly: this.readonly, mgWidth: undefined, value: this.value, readonlyValue: this.value, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: true }, h("ul", { class: { 'mg-input__input-group-container': true, 'mg-input__input-group-container--vertical': this.inputVerticalList }, role: "list" }, this.options.map((input, index) => (h("li", { key: input.title, class: { 'mg-input__input-group': true, 'mg-input__input-group--disabled': this.disabled || input.disabled } }, h("input", { type: "radio", id: this.identifier + '_' + index, name: this.identifier, value: index, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: el => {
+    return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, disabled: this.disabled, readonly: this.readonly, mgWidth: undefined, value: this.value, readonlyValue: this.value, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: true }, h("ul", { class: { 'mg-input__input-group-container': true, 'mg-input__input-group-container--vertical': this.inputVerticalList }, role: "list" }, this.options.map((input, index) => (h("li", { key: input.title, class: { 'mg-input__input-group': true, 'mg-input__input-group--disabled': this.disabled || input.disabled } }, h("input", { type: "radio", id: this.identifier + '_' + index, name: this.identifier, value: index, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: el => {
         if (el !== null)
           this.inputs[index] = el;
       } }), h("label", { htmlFor: this.identifier + '_' + index }, input.title)))))));
@@ -2333,35 +2237,27 @@ const mgInputSelectCss = ":host{display:block}.mg-input{display:flex;align-items
 
 /**
  * Check if item is a well configured option
- *
- * @param {unknown} option select option
- * @returns {boolean} select option type is valid
+ * @param option - select option
+ * @returns select option type is valid
  */
 const isOption$1 = (option) => typeof option === 'object' && typeof option.title === 'string';
 /**
  * Check if items[] is SelectOption
- *
- * @param {unknown[]} items select option
- * @returns {boolean} select option array type is valid
+ * @param items - select option
+ * @returns select option array type is valid
  */
 const allItemsAreOptions = (items) => Array.isArray(items) && items.every(item => isOption$1(item));
 /**
  * Check if item is a well configured optgroup
- *
- * @param {unknown} optgroup select option
- * @returns {boolean} select optgroup type is valid
+ * @param optgroup - select option
+ * @returns select optgroup type is valid
  */
 const isOptGroup = (optgroup) => typeof optgroup === 'object' && typeof optgroup.group === 'string' && allItemsAreOptions(optgroup.options);
 /**
  * Group options
- *
- * @param {(SelectOption | OptGroup)[]} acc reduce accumulator
- * @param {SelectOption} item item to add
- * @param {string} item.group item group
- * @param {string} item.title item title
- * @param {unknown} item.value item value
- * @param {boolean} item.disabled is item disabled
- * @returns {(SelectOption | OptGroup)[]} grouped options
+ * @param acc - reduce accumulator
+ * @param item - item to add
+ * @returns grouped options
  */
 const groupOptions = (acc, { group, title, value, disabled }) => {
   if (group !== undefined) {
@@ -2390,8 +2286,6 @@ const MgInputSelect = class {
     this.hasDisplayedError = false;
     /**
      * Handle input event
-     *
-     * @returns {void}
      */
     this.handleInput = () => {
       this.updateValue();
@@ -2400,16 +2294,13 @@ const MgInputSelect = class {
     };
     /**
      * Method to compare item.title with input.value
-     *
-     * @param {SelectOption} item item to compare with
-     * @returns {boolean} truthy if input.value is an item
+     * @param item - item to compare with
+     * @returns truthy if input.value is an item
      */
     this.isInputValue = (item) => { var _a; return item.title === ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value); };
     /**
      * value props setter
-     *
-     * @param {MgInputSelect['value']} newValue value to update with
-     * @returns {void}
+     * @param newValue - value to update with
      */
     this.setValue = (newValue) => {
       this.checkValidity();
@@ -2417,8 +2308,6 @@ const MgInputSelect = class {
     };
     /**
      * Update value from input.value
-     *
-     * @returns {void}
      */
     this.updateValue = () => {
       if (this.input.value === '') {
@@ -2444,8 +2333,7 @@ const MgInputSelect = class {
     };
     /**
      * Input value is disabled
-     *
-     * @returns {boolean} truthy if input value is disabled
+     * @returns truthy if input value is disabled
      */
     this.isDisabledValue = () => { var _a; return allItemsAreOptions(this.options) && ((_a = this.options.find(this.isInputValue)) === null || _a === void 0 ? void 0 : _a.disabled) === true; };
     /**
@@ -2470,9 +2358,8 @@ const MgInputSelect = class {
     };
     /**
      * Render option
-     *
-     * @param {SelectOption} option to render
-     * @returns {HTMLElement} render option
+     * @param option - to render
+     * @returns render option
      */
     this.renderOption = (option) => (h("option", { key: option.title, value: option.title, selected: JSON.stringify(this.value) === JSON.stringify(option.value), disabled: option.disabled }, option.title));
     this.value = undefined;
@@ -2493,7 +2380,7 @@ const MgInputSelect = class {
     this.helpText = undefined;
     this.valid = undefined;
     this.invalid = undefined;
-    this.classList = new ClassList(['mg-input--select']);
+    this.classCollection = new ClassList(['mg-input--select']);
     this.errorMessage = undefined;
     this.options = undefined;
     this.valueExist = undefined;
@@ -2551,8 +2438,6 @@ const MgInputSelect = class {
   }
   /**
    * Public method to display errors
-   *
-   * @returns {Promise<void>}
    */
   async displayError() {
     this.checkValidity();
@@ -2564,8 +2449,7 @@ const MgInputSelect = class {
    *************/
   /**
    * Check if component props are well configured on init
-   *
-   * @returns {ReturnType<typeof setTimeout>} timeout
+   * @returns timeout
    */
   componentWillLoad() {
     // Get locales
@@ -2586,11 +2470,10 @@ const MgInputSelect = class {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: undefined, readonlyValue: this.readonlyValue, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("select", { class: "mg-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled, required: this.required, onInput: this.handleInput, onBlur: this.handleBlur, ref: el => {
+    return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: undefined, readonlyValue: this.readonlyValue, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("select", { class: "mg-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled, required: this.required, onInput: this.handleInput, onBlur: this.handleBlur, ref: el => {
         if (el !== null)
           this.input = el;
       } }, (!this.placeholderHide || !this.valueExist) && ( // In case passed value does not match any option we display the placeholder
@@ -2625,8 +2508,6 @@ const MgInputText = class {
     this.hasDisplayedError = false;
     /**
      * Handle input event
-     *
-     * @returns {void}
      */
     this.handleInput = () => {
       this.checkValidity();
@@ -2637,29 +2518,23 @@ const MgInputText = class {
     };
     /**
      * Handle focus event
-     *
-     * @returns {void}
      */
     this.handleFocus = () => {
-      this.classList.add(this.classFocus);
-      this.classList = new ClassList(this.classList.classes);
+      this.classCollection.add(this.classFocus);
+      this.classCollection = new ClassList(this.classCollection.classes);
     };
     /**
      * Handle blur event
-     *
-     * @returns {void}
      */
     this.handleBlur = () => {
       // Manage focus
-      this.classList.delete(this.classFocus);
-      this.classList = new ClassList(this.classList.classes);
+      this.classCollection.delete(this.classFocus);
+      this.classCollection = new ClassList(this.classCollection.classes);
       // Display Error
       this.displayError();
     };
     /**
      * Check if input is valid
-     *
-     * @returns {void}
      */
     this.checkValidity = () => {
       var _a;
@@ -2670,8 +2545,6 @@ const MgInputText = class {
     };
     /**
      * Set input error message
-     *
-     * @returns {void}
      */
     this.setErrorMessage = () => {
       // Set error message
@@ -2687,11 +2560,9 @@ const MgInputText = class {
     };
     /**
      * Validate pattern configuration
-     *
-     * @returns {void}
      */
     this.validatePattern = () => {
-      if (this.pattern &&
+      if (this.pattern !== undefined &&
         typeof this.pattern === 'string' &&
         this.pattern !== '' &&
         (this.patternErrorMessage === undefined || typeof this.patternErrorMessage !== 'string' || this.patternErrorMessage === '')) {
@@ -2700,17 +2571,15 @@ const MgInputText = class {
     };
     /**
      * Validate append slot
-     *
-     * @returns {void}
      */
     this.validateAppendSlot = () => {
       const slotAppendInput = Array.from(this.element.querySelectorAll('[slot="append-input"]'));
       if (slotAppendInput.length === 1) {
-        this.classList.add(slotAppendInput[0].nodeName === 'MG-BUTTON' ? this.classIsInputGroupAppend : 'mg-input--is-append-input-slot-content');
+        this.classCollection.add(slotAppendInput[0].nodeName === 'MG-BUTTON' ? this.classIsInputGroupAppend : 'mg-input--is-append-input-slot-content');
       }
       else if (slotAppendInput.filter(slot => slot.nodeName === 'MG-BUTTON').length > 1) {
-        this.classList.add(this.classIsInputGroupAppend);
-        this.classList.add('mg-input--has-buttons-group-append');
+        this.classCollection.add(this.classIsInputGroupAppend);
+        this.classCollection.add('mg-input--has-buttons-group-append');
       }
     };
     this.value = undefined;
@@ -2734,7 +2603,7 @@ const MgInputText = class {
     this.helpText = undefined;
     this.valid = undefined;
     this.invalid = undefined;
-    this.classList = new ClassList(['mg-input--text']);
+    this.classCollection = new ClassList(['mg-input--text']);
     this.errorMessage = undefined;
   }
   handleValue(newValue) {
@@ -2742,10 +2611,10 @@ const MgInputText = class {
   }
   validateIcon(newValue) {
     if (newValue !== undefined) {
-      this.classList.add(this.classHasIcon);
+      this.classCollection.add(this.classHasIcon);
     }
     else {
-      this.classList.delete(this.classHasIcon);
+      this.classCollection.delete(this.classHasIcon);
     }
   }
   handleValidityChange(newValue, _oldValue, prop) {
@@ -2760,16 +2629,12 @@ const MgInputText = class {
   }
   /**
    * Public method to play input focus
-   *
-   * @returns {Promise<void>}
    */
   async setFocus() {
     this.input.focus();
   }
   /**
    * Public method to display errors
-   *
-   * @returns {Promise<void>}
    */
   async displayError() {
     this.checkValidity();
@@ -2781,8 +2646,7 @@ const MgInputText = class {
    *************/
   /**
    * Check if component props are well configured on init
-   *
-   * @returns {ReturnType<typeof setTimeout>} timeout
+   * @returns timeout
    */
   componentWillLoad() {
     // Get locales
@@ -2801,11 +2665,10 @@ const MgInputText = class {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [this.characterLeftId], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("div", { class: "mg-input__with-character-left", style: {
+    return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [this.characterLeftId], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("div", { class: "mg-input__with-character-left", style: {
         '--mg-character-left-message-length': (this.displayCharacterLeft
           ? (this.maxlength - (this.value || '').length).toString().length + this.maxlength.toString().length + 1
           : 0).toString(),
@@ -2854,24 +2717,23 @@ const MgInputTextarea = class {
      * Handle focus event
      */
     this.handleFocus = () => {
-      this.classList.add(this.classFocus);
-      this.classList = new ClassList(this.classList.classes);
+      this.classCollection.add(this.classFocus);
+      this.classCollection = new ClassList(this.classCollection.classes);
     };
     /**
      * Handle blur event
      */
     this.handleBlur = () => {
       // Manage focus
-      this.classList.delete(this.classFocus);
-      this.classList = new ClassList(this.classList.classes);
+      this.classCollection.delete(this.classFocus);
+      this.classCollection = new ClassList(this.classCollection.classes);
       // Display Error
       this.displayError();
     };
     /**
      * Get pattern validity
      * Pattern is not defined on textarea field: https://developer.mozilla.org/fr/docs/Web/HTML/Element/Textarea
-     *
-     * @returns {boolean} is pattern valid
+     * @returns is pattern valid
      */
     this.getPatternValidity = () => this.pattern === undefined || new RegExp(`^${this.pattern}$`, 'u').test(this.value);
     /**
@@ -2903,7 +2765,7 @@ const MgInputTextarea = class {
      * Validate pattern configuration
      */
     this.validatePattern = () => {
-      if (this.pattern &&
+      if (this.pattern !== undefined &&
         typeof this.pattern === 'string' &&
         this.pattern !== '' &&
         (this.patternErrorMessage === undefined || typeof this.patternErrorMessage !== 'string' || this.patternErrorMessage === '')) {
@@ -2931,7 +2793,7 @@ const MgInputTextarea = class {
     this.valid = undefined;
     this.invalid = undefined;
     this.resizable = 'none';
-    this.classList = new ClassList(['mg-input--textarea']);
+    this.classCollection = new ClassList(['mg-input--textarea']);
     this.errorMessage = undefined;
   }
   handleValue(newValue) {
@@ -2950,16 +2812,14 @@ const MgInputTextarea = class {
   }
   validateDisplayCharacterLeft(newValue) {
     if (newValue) {
-      this.classList.add(this.classHasDisplayCharacterLeft);
+      this.classCollection.add(this.classHasDisplayCharacterLeft);
     }
     else {
-      this.classList.delete(this.classHasDisplayCharacterLeft);
+      this.classCollection.delete(this.classHasDisplayCharacterLeft);
     }
   }
   /**
    * Public method to display errors
-   *
-   * @returns {Promise<void>}
    */
   async displayError() {
     this.checkValidity();
@@ -2971,8 +2831,7 @@ const MgInputTextarea = class {
    *************/
   /**
    * Check if component props are well configured on init
-   *
-   * @returns {ReturnType<typeof setTimeout>} timeout
+   * @returns timeout
    */
   componentWillLoad() {
     // Get locales
@@ -2990,11 +2849,10 @@ const MgInputTextarea = class {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [this.characterLeftId], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("div", { class: "mg-input__with-character-left" }, h("textarea", { class: {
+    return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [this.characterLeftId], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("div", { class: "mg-input__with-character-left" }, h("textarea", { class: {
         'mg-input__box': true,
         'mg-input__box--resizable': this.resizable === 'both',
         'mg-input__box--resizable-horizontal': this.resizable === 'horizontal',
@@ -3038,8 +2896,6 @@ const MgInputTitle = class {
    *************/
   /**
    * Init tag name
-   *
-   * @returns {void}
    */
   componentWillLoad() {
     this.validateIdentifier(this.identifier);
@@ -3047,8 +2903,7 @@ const MgInputTitle = class {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML element
    */
   render() {
     const TagName = this.tagName;
@@ -3065,9 +2920,8 @@ const mgInputToggleCss = ":host{display:block}.mg-input{display:flex;align-items
 
 /**
  * type Option validation function
- *
- * @param {ToggleValue} option radio option
- * @returns {boolean} toggle option type is valid
+ * @param option - radio option
+ * @returns toggle option type is valid
  */
 const isOption = (option) => typeof option === 'object' && typeof option.title === 'string' && option.value !== undefined;
 const MgInputToggle = class {
@@ -3086,16 +2940,12 @@ const MgInputToggle = class {
     this.classIcon = 'mg-input--toggle-icon';
     /**
      * Change checked value
-     *
-     * @returns {void}
      */
     this.toggleChecked = () => {
       this.checked = !this.checked;
     };
     /**
      * Slots validation
-     *
-     * @returns {void}
      */
     this.validateSlots = () => {
       const slots = Array.from(this.element.children);
@@ -3121,7 +2971,7 @@ const MgInputToggle = class {
     this.disabled = false;
     this.tooltip = undefined;
     this.helpText = undefined;
-    this.classList = new ClassList(['mg-input--toggle']);
+    this.classCollection = new ClassList(['mg-input--toggle']);
     this.options = undefined;
     this.checked = false;
   }
@@ -3149,41 +2999,39 @@ const MgInputToggle = class {
   }
   handleIsOnOff(newValue) {
     if (newValue)
-      this.classList.add(this.classOnOff);
+      this.classCollection.add(this.classOnOff);
     else
-      this.classList.delete(this.classOnOff);
+      this.classCollection.delete(this.classOnOff);
   }
   handleIsIcon(newValue) {
     if (newValue)
-      this.classList.add(this.classIcon);
+      this.classCollection.add(this.classIcon);
     else
-      this.classList.delete(this.classIcon);
+      this.classCollection.delete(this.classIcon);
   }
   handleReadonly(newValue) {
     if (newValue)
-      this.classList.add(this.classReadonly);
+      this.classCollection.add(this.classReadonly);
     else
-      this.classList.delete(this.classReadonly);
+      this.classCollection.delete(this.classReadonly);
   }
   handleDisabled(newValue) {
     if (newValue)
-      this.classList.add(this.classDisabled);
+      this.classCollection.add(this.classDisabled);
     else
-      this.classList.delete(this.classDisabled);
+      this.classCollection.delete(this.classDisabled);
   }
   handleChecked(newValue) {
     // style
     if (newValue)
-      this.classList.add(this.classIsActive);
+      this.classCollection.add(this.classIsActive);
     else
-      this.classList.delete(this.classIsActive);
+      this.classCollection.delete(this.classIsActive);
     // update value
     this.value = this.options[newValue ? 1 : 0].value;
   }
   /**
    * set checked state
-   *
-   * @returns {void}
    */
   setChecked() {
     const optionTrueValueIndex = this.options.map(option => option.value).findIndex(value => value === true);
@@ -3225,11 +3073,10 @@ const MgInputToggle = class {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, readonly: undefined, mgWidth: undefined, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: !this.readonly && this.tooltip, helpText: this.helpText, errorMessage: undefined, isFieldset: false }, h("button", { type: "button", role: "switch", "aria-checked": this.checked.toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.toggleChecked }, h("span", { "aria-hidden": "true", class: "mg-input__toggle-item-container" }, h("slot", { name: "item-1" })), h("span", { "aria-hidden": "true", class: "mg-input__toggle-item-container" }, h("slot", { name: "item-2" })))));
+    return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, readonly: undefined, mgWidth: undefined, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: !this.readonly && this.tooltip, helpText: this.helpText, errorMessage: undefined, isFieldset: false }, h("button", { type: "button", role: "switch", "aria-checked": this.checked.toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.toggleChecked }, h("span", { "aria-hidden": "true", class: "mg-input__toggle-item-container" }, h("slot", { name: "item-1" })), h("span", { "aria-hidden": "true", class: "mg-input__toggle-item-container" }, h("slot", { name: "item-2" })))));
   }
   get element() { return getElement(this); }
   static get watchers() { return {
@@ -3260,10 +3107,8 @@ const MgMenu = class {
      *************/
     /**
      * Close matching menu-item
-     *
-     * @param {HTMLElement} item menu-item to close
-     * @param {boolean} condition addionnal condition
-     * @returns {void}
+     * @param item - menu-item to close
+     * @param condition - addionnal condition
      */
     this.closeMenuItem = (item, condition) => {
       if (!this.isChildMenu && condition) {
@@ -3272,22 +3117,18 @@ const MgMenu = class {
     };
     /**
      * get mg-item-more element
-     *
-     * @returns {HTMLMgItemMoreElement} mg-item-more element
+     * @returns mg-item-more element
      */
     this.getItemMore = () => this.element.querySelector('mg-item-more');
     /**
-     * get mg-item-more >>> mg-menu-item element
-     *
-     * @returns {HTMLMgMenuItemElement} mg-item-more >>> mg-menu-item element
+     * get mg-item-more child mg-menu-item element
+     * @returns mg-menu-item element
      */
     this.getItemMoreMenuItem = () => { var _a, _b; return (_b = (_a = this.getItemMore()) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('mg-menu-item'); };
     /**
      * Set item listend
-     *
-     * @param {HTMLMgMenuItemElement} item mg-menu-item element
-     * @param {MgMenu['focusedMenuItem']} index number
-     * @returns {void}
+     * @param item - mg-menu-item element
+     * @param index - number
      */
     this.setItemListener = (item, index) => {
       ['click', 'focus'].forEach(trigger => {
@@ -3302,8 +3143,6 @@ const MgMenu = class {
     };
     /**
      * Store menu-items on component init and add listeners
-     *
-     * @returns {void}
      */
     this.initMenuItemsListeners = () => {
       // add listeners on menu item and edit index
@@ -3313,16 +3152,12 @@ const MgMenu = class {
     };
     /**
      * Handle item-loaded event on mg-item-more element
-     *
-     * @returns {void}
      */
     this.handleItemLoaded = () => {
       this.setItemListener(this.getItemMoreMenuItem(), this.menuItems.length);
     };
     /**
      * render mg-item-more
-     *
-     * @returns {void}
      */
     this.renderMgItemMore = () => {
       // /!\ externalise item tag name to get a string type and bypass type checking when value is used in next createElement
@@ -3364,8 +3199,6 @@ const MgMenu = class {
    *************/
   /**
    * Validate props
-   *
-   * @returns {void}
    */
   componentWillLoad() {
     this.validateDirection(this.direction);
@@ -3375,8 +3208,7 @@ const MgMenu = class {
   }
   /**
    * Check if component slots configuration
-   *
-   * @returns {ReturnType<typeof setTimeout>} timeout
+   * @returns timeout
    */
   componentDidLoad() {
     // update props and states after componentDidLoad hook
@@ -3406,16 +3238,13 @@ const MgMenu = class {
   }
   /**
    * Add listeners to items
-   *
-   * @returns {void}
    */
   componentDidRender() {
     this.initMenuItemsListeners();
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
     return (h(Host, { role: this.isChildMenu ? 'menu' : 'menubar', "aria-label": this.label }, h("slot", null)));
@@ -3447,33 +3276,27 @@ const MgMenuItem = class {
      **********/
     /**
      * Toggle expanded prop value
-     *
-     * @returns {void}
      */
     this.toggleExpanded = () => {
       this.expanded = !this.expanded;
     };
     /**
      * Does an Element have given Status
-     *
-     * @param {HTMLMgMenuItemElement} mgMenuItemElement to parse
-     * @param {MgMenuItem['status']} status to check
-     * @returns {boolean} true if element with status is found
+     * @param mgMenuItemElement - to parse
+     * @param status - to check
+     * @returns true if element with status is found
      */
     this.hasStatus = (mgMenuItemElement, status) => mgMenuItemElement.status === status;
     /**
      * Is component contextual direction match the given direction
-     *
-     * @param {MgMenuItem['direction']} direction in parent menu
-     * @param {MgMenuItem['direction']} compareWith direction to compare with. Default: `this.direction`
-     * @returns {boolean} true is direction match the direction propertie
+     * @param direction - in parent menu
+     * @param compareWith - direction to compare with. Default: `this.direction`
+     * @returns true is direction match the direction propertie
      */
     this.isDirection = (direction, compareWith = this.direction) => direction === compareWith;
     /**
      * Update displayNotificationBadge
      * current component notification badge have priority over the slot badge when submenu contain badge
-     *
-     * @returns {void} update displayNotificationBadge value
      */
     this.updateDisplayNotificationBadge = () => {
       const childMenu = this.element.querySelector('mg-menu');
@@ -3483,8 +3306,7 @@ const MgMenuItem = class {
     };
     /**
      * Method to control if one of component children have active status
-     *
-     * @returns {boolean} truthy if component has active child
+     * @returns truthy if component has active child
      */
     this.hasActiveChild = () => {
       var _a;
@@ -3492,9 +3314,7 @@ const MgMenuItem = class {
     };
     /**
      * Validate slots
-     *
-     * @param {boolean} guard prevent action whith guard. Default: false.
-     * @returns {void}
+     * @param guard - prevent action whith guard. Default: false.
      */
     this.validateSlot = (guard = false) => {
       // slot title AND metadata validation
@@ -3512,9 +3332,7 @@ const MgMenuItem = class {
     };
     /**
      * Update status
-     *
-     * @param {Status[]} guard status to exclude from process in addition to [Status.HIDDEN, Status.DISABLED] . Default: [].
-     * @returns {void}
+     * @param guard - status to exclude from process in addition to [Status.HIDDEN, Status.DISABLED] . Default: [].
      */
     this.updateStatus = (guard = []) => {
       if (![Status$1.HIDDEN, Status$1.DISABLED, ...guard].includes(this.status)) {
@@ -3523,8 +3341,6 @@ const MgMenuItem = class {
     };
     /**
      * Init event-listeners
-     *
-     * @returns {void}
      */
     this.initListeners = () => {
       var _a;
@@ -3540,14 +3356,12 @@ const MgMenuItem = class {
     };
     /**
      * Get mg-popover identifier
-     *
-     * @returns {MgPopover['identifier']} generated mg-popover identifier
+     * @returns generated mg-popover identifier
      */
     this.getPopoverIdentifier = () => `${this.identifier}-popover`;
     /**
      * Condition to know if component should display a mg-popover
-     *
-     * @returns {boolean} truthy if component display popover
+     * @returns truthy if component display popover
      */
     this.displayPopover = () => this.isDirection(Direction.HORIZONTAL) && this.hasChildren && this.href === undefined;
     /************
@@ -3555,9 +3369,7 @@ const MgMenuItem = class {
      ************/
     /**
      * Handle interacrtive element click
-     *
-     * @param {MouseEvent} event click on element
-     * @returns {void}
+     * @param event - click on element
      */
     this.handleElementCLick = (event) => {
       if ((this.hasChildren && !this.isInMainMenu) || this.status === Status$1.DISABLED) {
@@ -3570,17 +3382,14 @@ const MgMenuItem = class {
     };
     /**
      * Handle popover element display-change event
-     *
-     * @param {CustomEvent} event popover display event
-     * @returns {void}
+     * @param event - popover display event
      */
     this.handlePopoverDisplay = (event) => {
       this.expanded = event.detail;
     };
     /**
      * Render slot
-     *
-     * @returns {HTMLElement} HTML Element
+     * @returns HTML Element
      */
     this.renderSlot = () => h("slot", null);
     this.identifier = createID('mg-menu-item');
@@ -3646,8 +3455,6 @@ const MgMenuItem = class {
   }
   /**
    * Render popover clickoutside guard for content slot
-   *
-   * @returns {void}
    */
   updatePopoverGuard() {
     if (this.displayPopover())
@@ -3660,8 +3467,6 @@ const MgMenuItem = class {
    *************/
   /**
    * Validate props
-   *
-   * @returns {void}
    */
   componentWillLoad() {
     // has children items that is NOT [slot='image' | 'information' | 'label' | 'metadata'] element
@@ -3677,8 +3482,7 @@ const MgMenuItem = class {
   }
   /**
    * Check if component slots configuration
-   *
-   * @returns {ReturnType<typeof setTimeout>} timeout
+   * @returns timeout
    */
   componentDidLoad() {
     // validation
@@ -3717,8 +3521,7 @@ const MgMenuItem = class {
   }
   /**
    * Render ineractive element
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   renderInteractiveElement() {
     const TagName = this.href !== undefined ? 'a' : 'button';
@@ -3730,8 +3533,7 @@ const MgMenuItem = class {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
     const getContainerClasses = () => ({
@@ -3780,25 +3582,19 @@ const MgMessage = class {
     this.isHovered = false;
     /**
      * Set timer
-     *
-     * @returns {void}
      */
     this.setTimer = () => {
       this.storedTimer = setTimeout(() => (this.hide = true), this.delay * 1000);
     };
     /**
      * Clear timer
-     *
-     * @returns {void}
      */
     this.clearTimer = () => {
       clearTimeout(this.storedTimer);
     };
     /**
      * Event to add on element
-     *
-     * @param {MouseEvent | FocusEvent} event  event
-     * @returns {void}
+     * @param event - event
      */
     this.timerEvents = (event) => {
       this.clearTimer();
@@ -3821,8 +3617,7 @@ const MgMessage = class {
     };
     /**
      * Get icon corresponding to variant
-     *
-     * @returns {string} icon
+     * @returns icon
      */
     this.getIcon = () => {
       switch (this.variant) {
@@ -3841,11 +3636,11 @@ const MgMessage = class {
     this.variant = variants$1[0];
     this.closeButton = false;
     this.hide = false;
-    this.classList = new ClassList(['mg-message']);
+    this.classCollection = new ClassList(['mg-message']);
     this.hasActions = false;
   }
   validateDelay(newValue) {
-    if (newValue && newValue < 2) {
+    if (newValue !== undefined && newValue < 2) {
       throw new Error(`<mg-message> prop "delay" must be greater than 2 seconds.`);
     }
   }
@@ -3855,9 +3650,9 @@ const MgMessage = class {
     }
     else {
       if (oldValue !== undefined) {
-        this.classList.delete(`mg-message--${oldValue}`);
+        this.classCollection.delete(`mg-message--${oldValue}`);
       }
-      this.classList.add(`mg-message--${newValue}`);
+      this.classCollection.add(`mg-message--${newValue}`);
     }
   }
   validateCloseButton(newValue) {
@@ -3869,7 +3664,7 @@ const MgMessage = class {
   validateHide(newValue) {
     if (newValue) {
       this.componentHide.emit();
-      this.classList.add(this.classHide);
+      this.classCollection.add(this.classHide);
       // Remove event Listener
       ['focusin', 'mouseenter'].forEach(event => {
         this.element.removeEventListener(event, this.timerEvents);
@@ -3879,7 +3674,7 @@ const MgMessage = class {
     }
     else {
       this.componentShow.emit();
-      this.classList.delete(this.classHide);
+      this.classCollection.delete(this.classHide);
       // If delay is set
       if (this.delay > 1) {
         // Start timer
@@ -3906,7 +3701,7 @@ const MgMessage = class {
     this.hasActions = this.element.querySelector('[slot="actions"]') !== null;
     this.validateCloseButton(this.closeButton);
     if (this.closeButton) {
-      this.classList.add('mg-message--close-button');
+      this.classCollection.add('mg-message--close-button');
       this.closeButtonId = `${this.identifier}-close-button`;
     }
     this.validateDelay(this.delay);
@@ -3914,11 +3709,10 @@ const MgMessage = class {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (h("div", { id: this.identifier, class: this.classList.join(), role: this.variant === 'info' ? 'status' : 'alert' }, h("mg-card", { variant: this.variant, "variant-style": "bar-left" }, h("span", { class: "mg-message__icon" }, h("mg-icon", { icon: this.getIcon() })), h("div", { class: "mg-message__content" }, h("span", { class: "mg-message__content-slot" }, h("slot", null)), this.hasActions && h("span", { class: "mg-message__content-separator" }), this.hasActions && (h("span", { class: "mg-message__content-actions-slot" }, h("slot", { name: "actions" })))), this.closeButton && (h("span", { class: "mg-message__close-button" }, h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.message.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" })))))));
+    return (h("div", { id: this.identifier, class: this.classCollection.join(), role: this.variant === 'info' ? 'status' : 'alert' }, h("mg-card", { variant: this.variant, "variant-style": "bar-left" }, h("span", { class: "mg-message__icon" }, h("mg-icon", { icon: this.getIcon() })), h("div", { class: "mg-message__content" }, h("span", { class: "mg-message__content-slot" }, h("slot", null)), this.hasActions && h("span", { class: "mg-message__content-separator" }), this.hasActions && (h("span", { class: "mg-message__content-actions-slot" }, h("slot", { name: "actions" })))), this.closeButton && (h("span", { class: "mg-message__close-button" }, h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.message.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" })))))));
   }
   get element() { return getElement(this); }
   static get watchers() { return {
@@ -3978,8 +3772,6 @@ const MgModal = class {
      *************/
     /**
      * Handle close button
-     *
-     * @returns {void}
      */
     this.handleClose = () => {
       this.hide = true;
@@ -3990,7 +3782,7 @@ const MgModal = class {
     this.hide = false;
     this.hasActions = false;
     this.hasContent = false;
-    this.classList = new ClassList(['mg-modal']);
+    this.classCollection = new ClassList(['mg-modal']);
   }
   validateModalTitle(newValue) {
     if (typeof newValue !== 'string' || newValue.trim() === '') {
@@ -4000,20 +3792,18 @@ const MgModal = class {
   validateHide(newValue) {
     if (newValue) {
       this.componentHide.emit();
-      this.classList.add(this.classHide);
+      this.classCollection.add(this.classHide);
       document.body.style.overflow = this.bodyOverflow;
     }
     else {
       this.componentShow.emit();
-      this.classList.delete(this.classHide);
+      this.classCollection.delete(this.classHide);
       document.body.style.overflow = 'hidden';
     }
   }
   /**
    * Handle 'escape' key down
-   *
-   * @param {KeyboardEvent} event keydown event
-   * @returns {void}
+   * @param event - keydown event
    */
   handleKeyDown(event) {
     // we can use 'Escape button" when this not a blocking modal, induced by closeButton value.
@@ -4026,8 +3816,6 @@ const MgModal = class {
    *************/
   /**
    * Check if component props are well configured on init
-   *
-   * @returns {void}
    */
   componentWillLoad() {
     // Store body overflow
@@ -4046,8 +3834,6 @@ const MgModal = class {
   }
   /**
    * Add observer on component to set focus when displayed
-   *
-   * @returns {void}
    */
   componentDidLoad() {
     new MutationObserver(mutationList => {
@@ -4062,11 +3848,10 @@ const MgModal = class {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (h("div", { role: "alertdialog", id: this.identifier, class: this.classList.join(), tabindex: "-1", "aria-labelledby": this.titleId, "aria-modal": "true", "aria-hidden": this.hide }, h("mg-card", null, h("div", { class: "mg-modal__dialog" }, h("header", { class: "mg-modal__header" }, this.closeButton && (h("span", { class: "mg-modal__close-button" }, h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" })))), h("h1", { class: "mg-modal__title", id: this.titleId }, this.modalTitle)), this.hasContent && (h("article", { class: "mg-modal__content" }, h("slot", { name: "content" }))), this.hasActions && (h("footer", { class: "mg-modal__footer" }, h("slot", { name: "actions" })))))));
+    return (h("div", { role: "alertdialog", id: this.identifier, class: this.classCollection.join(), tabindex: "-1", "aria-labelledby": this.titleId, "aria-modal": "true", "aria-hidden": this.hide }, h("mg-card", null, h("div", { class: "mg-modal__dialog" }, h("header", { class: "mg-modal__header" }, this.closeButton && (h("span", { class: "mg-modal__close-button" }, h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" })))), h("h1", { class: "mg-modal__title", id: this.titleId }, this.modalTitle)), this.hasContent && (h("article", { class: "mg-modal__content" }, h("slot", { name: "content" }))), this.hasActions && (h("footer", { class: "mg-modal__footer" }, h("slot", { name: "actions" })))))));
   }
   get element() { return getElement(this); }
   static get watchers() { return {
@@ -4087,6 +3872,7 @@ const mgPaginationCss = ".sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1
 /**
  * Range generator
  *
+ * ```
  * start by get the range length, add "+ 1" to include last value, ex: Math.ceil((3 + 1 - 1) / 1) => 3
  * then with Array(Math.ceil...) we get the final array with empty values, ex: Array(Math.ceil(2 + 1 - 1) / 1)) => [empty, empty, empty]
  * then with Array(Math.ceil...).keys() we get the Array Iterator from empty values
@@ -4094,15 +3880,15 @@ const mgPaginationCss = ".sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1
  * ex: Array.from(Array(Math.ceil((2 + 1 - 1) / 1) || 1).keys()) => [0, 1, 2]
  * finaly we map values from "start" range and apply the "step" coefficiant,
  * ex: Array.from(Array(Math.ceil((2 + 1 - 1) / 1) || 1).keys()).map(x => 1 + x * 1) => [1, 2, 3]
+ * ```
  *
  * range(1, 1) = [1]
  * range(1, 5) = [1, 2, 3, 4, 5]
  * range(10, 20, 2) = [10, 12, 14, 16, 18, 20]
- *
- * @param {number} start start range
- * @param {number} end start end
- * @param {number} step step size
- * @returns {number[]} range numbers
+ * @param start - start range
+ * @param end - start end
+ * @param step - step size
+ * @returns range numbers
  */
 const range = (start, end, step = 1) => Array.from(Array(Math.ceil((end + 1 - start) / step)).keys()).map(x => start + x * step);
 const MgPagination = class {
@@ -4111,9 +3897,7 @@ const MgPagination = class {
     this.currentPageChange = createEvent(this, "current-page-change", 7);
     /**
      * Change current page from target
-     *
-     * @param {number} target target page
-     * @returns {void}
+     * @param target - target page
      */
     this.goToPage = (target) => {
       this.currentPage = target;
@@ -4123,9 +3907,7 @@ const MgPagination = class {
      ************/
     /**
      * select handler
-     *
-     * @param {InputEvent} event value change event
-     * @returns {void}
+     * @param event - value change event
      */
     this.handleSelect = (event) => {
       const to = Number(event.target.value);
@@ -4133,10 +3915,8 @@ const MgPagination = class {
     };
     /**
      * Go to 'previous/next' page button handler
-     *
-     * @param {string} action navigation action
-     * @param {boolean} disabled button disable state
-     * @returns {void}
+     * @param action - navigation action
+     * @param disabled - button disable state
      */
     this.handleGoToPage = (action, disabled) => {
       !disabled && this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);
@@ -4166,8 +3946,6 @@ const MgPagination = class {
    *************/
   /**
    * Check if props are well configured on init
-   *
-   * @returns {void}
    */
   componentWillLoad() {
     // Get locales
@@ -4182,8 +3960,7 @@ const MgPagination = class {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
     const navigationActionButton = (disabled, action) => (h("mg-button", { identifier: `${this.identifier}-button-${action}`, label: this.messages.pagination[`${action}Page`],
@@ -4211,8 +3988,6 @@ const MgPanel = class {
      ************/
     /**
      * Toggle is editing state
-     *
-     * @returns {void}
      */
     this.toggleIsEditing = () => {
       this.isEditing = !this.isEditing;
@@ -4222,8 +3997,6 @@ const MgPanel = class {
      ************/
     /**
      * Collapse button click handler
-     *
-     * @returns {void}
      */
     this.handleCollapseButton = () => {
       if (!this.expandToggleDisabled) {
@@ -4232,25 +4005,19 @@ const MgPanel = class {
     };
     /**
      * Edit button click handler
-     *
-     * @returns {void}
      */
     this.handleEditButton = () => {
       this.toggleIsEditing();
     };
     /**
      * Update title handler
-     *
-     * @param {CustomEvent<string>} event input value change event
-     * @returns {void}
+     * @param event - input value change event
      */
     this.handleUpdateTitle = (event) => {
       this.updatedPanelTitle = event.detail;
     };
     /**
      * Cancel edition button handler
-     *
-     * @returns {void}
      */
     this.handleCancelEditButton = () => {
       this.updatedPanelTitle = undefined;
@@ -4258,8 +4025,6 @@ const MgPanel = class {
     };
     /**
      * Validate edition button handler
-     *
-     * @returns {void}
      */
     this.handleValidateEditButton = () => {
       if (this.editInputElement.valid) {
@@ -4270,9 +4035,7 @@ const MgPanel = class {
     };
     /**
      * Header left conditional render
-     *
-     * @typedef {HTMLElement} HTMLMgButtonElement
-     * @returns {HTMLMgButtonElement | HTMLElement | HTMLElement[]} header left element
+     * @returns header left element
      */
     this.headerLeft = () => {
       const collapseButton = () => (h("mg-button", { onClick: this.handleCollapseButton, variant: "flat", identifier: `${this.identifier}-collapse-button`, "aria-expanded": this.expanded !== undefined && this.expanded.toString(), "aria-controls": `${this.identifier}-content`, disabled: this.expandToggleDisabled }, h("span", { class: "mg-panel__collapse-button-content" }, h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down' }), !this.isEditing && this.panelTitle)));
@@ -4297,7 +4060,7 @@ const MgPanel = class {
     this.expanded = false;
     this.expandToggleDisabled = undefined;
     this.titleEditable = false;
-    this.classList = new ClassList(['mg-panel']);
+    this.classCollection = new ClassList(['mg-panel']);
     this.isEditing = false;
     this.updatedPanelTitle = undefined;
   }
@@ -4308,10 +4071,10 @@ const MgPanel = class {
     this.titleChange.emit(newValue);
   }
   validatetitlePattern(newValue) {
-    if (newValue && !this.titleEditable) {
+    if (newValue !== undefined && !this.titleEditable) {
       throw new Error('<mg-panel> prop "titleEditable" must be set to `true`.');
     }
-    if (newValue && (this.titlePatternErrorMessage === undefined || this.titlePatternErrorMessage.trim() === '')) {
+    if (newValue !== undefined && (this.titlePatternErrorMessage === undefined || this.titlePatternErrorMessage.trim() === '')) {
       throw new Error('<mg-panel> prop "titlePattern" must be paired with the prop "titlePatternErrorMessage".');
     }
   }
@@ -4323,8 +4086,6 @@ const MgPanel = class {
    *************/
   /**
    * Check if props are well configured on init
-   *
-   * @returns {void}
    */
   componentWillLoad() {
     // Get locales
@@ -4335,8 +4096,6 @@ const MgPanel = class {
   }
   /**
    * Edit DOM after render
-   *
-   * @returns {void}
    */
   componentDidRender() {
     // when we are editing we get focus on edition input
@@ -4346,11 +4105,10 @@ const MgPanel = class {
   }
   /**
    * Render component
-   *
-   * @returns {HTMLElement} html element
+   * @returns html element
    */
   render() {
-    return (h("section", { class: this.classList.join(), id: this.identifier }, h("mg-card", null, h("header", { class: "mg-panel__header", id: `${this.identifier}-header` }, h("div", { class: `mg-panel__header-left ${this.isEditing ? 'mg-panel__header-left--full' : ''}` }, this.headerLeft()), h("div", { class: "mg-panel__header-right" }, h("slot", { name: "header-right" }))), h("article", { class: "mg-panel__content", id: `${this.identifier}-content`, "aria-labelledby": `${this.identifier}-header`, hidden: !this.expanded }, h("slot", null)))));
+    return (h("section", { class: this.classCollection.join(), id: this.identifier }, h("mg-card", null, h("header", { class: "mg-panel__header", id: `${this.identifier}-header` }, h("div", { class: `mg-panel__header-left ${this.isEditing ? 'mg-panel__header-left--full' : ''}` }, this.headerLeft()), h("div", { class: "mg-panel__header-right" }, h("slot", { name: "header-right" }))), h("article", { class: "mg-panel__content", id: `${this.identifier}-content`, "aria-labelledby": `${this.identifier}-header`, hidden: !this.expanded }, h("slot", null)))));
   }
   get element() { return getElement(this); }
   static get watchers() { return {
@@ -6169,9 +5927,7 @@ const MgPopover = class {
     this.classArrowHide = `mg-popover--arrow-hide`;
     /**
      * Check if clicked outside of component
-     *
-     * @param {MouseEvent} event mouse event
-     * @returns {void}
+     * @param event - mouse event
      */
     this.clickOutside = (event) => {
       var _a;
@@ -6183,8 +5939,6 @@ const MgPopover = class {
     };
     /**
      * Show popover
-     *
-     * @returns {void}
      */
     this.show = () => {
       // Make the popover visible
@@ -6203,8 +5957,6 @@ const MgPopover = class {
     };
     /**
      * Hide popover
-     *
-     * @returns {void}
      */
     this.hide = () => {
       // Hide the popover
@@ -6218,8 +5970,6 @@ const MgPopover = class {
     };
     /**
      * Handle action for close button
-     *
-     * @returns {void}
      */
     this.handleCloseButton = () => {
       this.display = false;
@@ -6230,13 +5980,13 @@ const MgPopover = class {
     this.closeButton = false;
     this.display = false;
     this.disabled = false;
-    this.classList = new ClassList(['mg-popover']);
+    this.classCollection = new ClassList(['mg-popover']);
   }
   validateArrowHide(newValue) {
     if (newValue)
-      this.classList.add(this.classArrowHide);
+      this.classCollection.add(this.classArrowHide);
     else
-      this.classList.delete(this.classArrowHide);
+      this.classCollection.delete(this.classArrowHide);
   }
   handleDisplay(newValue) {
     if (newValue) {
@@ -6252,8 +6002,6 @@ const MgPopover = class {
    *************/
   /**
    * Check if component props are well configured on init
-   *
-   * @returns {void} timeout
    */
   componentWillLoad() {
     // Get windows to attach events
@@ -6264,8 +6012,6 @@ const MgPopover = class {
   }
   /**
    * Check if component props are well configured on init
-   *
-   * @returns {void}
    */
   componentDidLoad() {
     const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
@@ -6322,11 +6068,10 @@ const MgPopover = class {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (h(Host, null, h("slot", null), h("div", { id: this.identifier, class: this.classList.join() }, h("mg-card", null, this.closeButton && (h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { icon: "cross" }))), h("div", { class: "mg-popover__title" }, h("slot", { name: "title" })), h("slot", { name: "content" })), !this.arrowHide && h("div", { class: "mg-popover__arrow", "data-popper-arrow": true }))));
+    return (h(Host, null, h("slot", null), h("div", { id: this.identifier, class: this.classCollection.join() }, h("mg-card", null, this.closeButton && (h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { icon: "cross" }))), h("div", { class: "mg-popover__title" }, h("slot", { name: "title" })), h("slot", { name: "content" })), !this.arrowHide && h("div", { class: "mg-popover__arrow", "data-popper-arrow": true }))));
   }
   get element() { return getElement(this); }
   static get watchers() { return {
@@ -6347,9 +6092,7 @@ const MgSkipLinks = class {
      **********/
     /**
      * Handle link click and emit go-to-anchor event
-     *
-     * @param {MouseEvent} event mouse event
-     * @returns {void}
+     * @param event - mouse event
      */
     this.handleLinkCLick = (event) => {
       event.currentTarget.blur();
@@ -6369,8 +6112,6 @@ const MgSkipLinks = class {
    *************/
   /**
    * Check if props are well configured on init
-   *
-   * @returns {void}
    */
   componentWillLoad() {
     this.validateLinks(this.links);
@@ -6378,8 +6119,7 @@ const MgSkipLinks = class {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
     return (h("nav", { class: "mg-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, h("ul", { class: "mg-skip-links__list", role: "list" }, this.links.map(link => (h("li", { key: link.href }, h("a", { class: "mg-skip-links__link", href: link.href, onClick: this.handleLinkCLick }, link.label)))))));
@@ -6410,9 +6150,8 @@ const mgTabsCss = ".mg-tabs.mg-tabs--size-regular .mg-tabs__navigation-button,.m
 
 /**
  * type TabItem validation function
- *
- * @param {TabItem} tab tab item
- * @returns {boolean} tab item type is valid
+ * @param tab - tab item
+ * @returns tab item type is valid
  */
 const isTabItem = (tab) => typeof tab === 'object' && typeof tab.label === 'string';
 const MgTabs = class {
@@ -6428,37 +6167,32 @@ const MgTabs = class {
     this.startIndex = 1;
     /**
      * Method to know if given tab has the given status
-     *
-     * @param {TabItem} tab item tab key to set to ACTIVE status
-     * @param {Status} status status to valide
-     * @returns {boolean} status comparaison
+     * @param tab - item tab key to set to ACTIVE status
+     * @param status - status to valide
+     * @returns status comparaison
      */
     this.tabHasStatus = (tab, status) => tab.status === status;
     /**
      * Method to get element id from index
-     *
-     * @param {string} element to get id
-     * @param {number} index to generate id
-     * @returns {string} generated element id
+     * @param element - to get id
+     * @param index - to generate id
+     * @returns generated element id
      */
     this.getElementId = (element, index) => `${element}-${this.getTabItemIndex(index)}`;
     /**
      * Method to get tab item index
-     *
-     * @param {number} index to get
-     * @returns {number} index
+     * @param index - to get
+     * @returns index
      */
     this.getTabItemIndex = (index) => index + this.startIndex;
     /**
      * Method to get the active-tab value
-     *
-     * @returns {number} of the active-tab
+     * @returns of the active-tab
      */
     this.getActiveTab = () => this.activeTab || this.getTabItemIndex(this.tabs.map((tab, index) => (Object.assign(Object.assign({}, tab), { index }))).find(tab => this.tabHasStatus(tab, Status.ACTIVE)).index);
     /**
      * Handle click events on tabs
-     *
-     * @param {MouseEvent} event mouse event
+     * @param event - mouse event
      */
     this.handleClick = (event) => {
       const tabId = event.currentTarget.dataset.index;
@@ -6473,16 +6207,13 @@ const MgTabs = class {
     };
     /**
      * get navigation button class from given status
-     *
-     * @param {Status} status button tab status
-     * @returns {string} button class/selector variant
+     * @param status - button tab status
+     * @returns button class/selector variant
      */
     this.getNavigationButtonClass = (status) => `${this.buttonTabBaseClass}--${status}`;
     /**
      * Handle keyboard event on tabs
-     *
-     * @param {MouseEvent} event mouse event
-     * @returns {void}
+     * @param event - mouse event
      */
     this.handleKeydown = (event) => {
       const parent = event.target.parentElement;
@@ -6520,8 +6251,6 @@ const MgTabs = class {
     };
     /**
      * Method to reset focus behavior
-     *
-     * @returns {void}
      */
     this.resetFocus = () => {
       // update asynchronously tabindex to prevent get focus on new tabindex at then end of event process
@@ -6546,7 +6275,7 @@ const MgTabs = class {
     this.items = undefined;
     this.activeTab = undefined;
     this.tabs = [];
-    this.classList = new ClassList(['mg-tabs']);
+    this.classCollection = new ClassList(['mg-tabs']);
   }
   validateLabel(newValue) {
     if (typeof newValue !== 'string' || newValue.trim() === '') {
@@ -6557,7 +6286,7 @@ const MgTabs = class {
     if (!sizes.includes(newValue)) {
       throw new Error(`<mg-tabs> prop "size" must be one of: ${sizes.join(', ')}`);
     }
-    this.classList.add(`mg-tabs--size-${this.size}`);
+    this.classCollection.add(`mg-tabs--size-${this.size}`);
   }
   validateItems(newValue) {
     // String array
@@ -6600,8 +6329,6 @@ const MgTabs = class {
    *************/
   /**
    * Check if component props are well configured on init
-   *
-   * @returns {void}
    */
   componentWillLoad() {
     // Check tabs format
@@ -6613,8 +6340,6 @@ const MgTabs = class {
   }
   /**
    * add listners
-   *
-   * @returns {void}
    */
   componentDidLoad() {
     document.addEventListener('click', (event) => {
@@ -6624,11 +6349,10 @@ const MgTabs = class {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (h("div", { class: this.classList.join() }, h("header", { role: "tablist", "aria-label": this.label, class: "mg-tabs__header" }, this.tabs.map((tab, index) => (h("button", { key: tab.label, role: "tab", id: this.getElementId(this.identifier, index), class: {
+    return (h("div", { class: this.classCollection.join() }, h("header", { role: "tablist", "aria-label": this.label, class: "mg-tabs__header" }, this.tabs.map((tab, index) => (h("button", { key: tab.label, role: "tab", id: this.getElementId(this.identifier, index), class: {
         [`${this.buttonTabBaseClass}`]: true,
         [`${this.buttonTabBaseClass}--horizontal`]: true,
         [`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasStatus(tab, Status.ACTIVE),
@@ -6665,7 +6389,7 @@ const MgTag = class {
     this.variant = variants[0];
     this.outline = undefined;
     this.soft = undefined;
-    this.classList = new ClassList(['mg-tag']);
+    this.classCollection = new ClassList(['mg-tag']);
   }
   validateVariant(newValue, oldValue) {
     if (!variants.includes(newValue)) {
@@ -6673,16 +6397,16 @@ const MgTag = class {
     }
     else {
       if (oldValue !== undefined) {
-        this.classList.delete(`mg-tag--${oldValue}`);
+        this.classCollection.delete(`mg-tag--${oldValue}`);
       }
-      this.classList.add(`mg-tag--${newValue}`);
+      this.classCollection.add(`mg-tag--${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);
   }
   validateSoft(newValue) {
     // usage validation
@@ -6690,18 +6414,16 @@ const MgTag = class {
       throw new Error('<mg-tag> prop "soft" can NOT be used with prop "outline".');
     // apply class
     if (newValue)
-      this.classList.add(this.classSoft);
+      this.classCollection.add(this.classSoft);
     else
-      this.classList.delete(this.classSoft);
+      this.classCollection.delete(this.classSoft);
   }
   /*************
    * Methods *
    *************/
   /**
    * Validate the given textContent
-   *
-   * @param {string} textContent html element textContent property
-   * @returns {void}
+   * @param textContent - html element textContent property
    */
   validateTextContent(textContent) {
     if (typeof textContent !== 'string' || textContent.trim() === '')
@@ -6712,8 +6434,6 @@ const MgTag = class {
    *************/
   /**
    * Check if props are well configured on init
-   *
-   * @returns {void}
    */
   componentWillLoad() {
     this.validateVariant(this.variant);
@@ -6723,11 +6443,10 @@ const MgTag = class {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (h("span", { class: this.classList.join() }, h("slot", null)));
+    return (h("span", { class: this.classCollection.join() }, h("slot", null)));
   }
   get element() { return getElement(this); }
   static get watchers() { return {
@@ -6752,8 +6471,6 @@ const MgTooltip = class {
     registerInstance(this, hostRef);
     /**
      * Show tooltip
-     *
-     * @returns {void}
      */
     this.show = () => {
       // Make the tooltip visible
@@ -6773,8 +6490,6 @@ const MgTooltip = class {
     };
     /**
      * Hide tooltip
-     *
-     * @returns {void}
      */
     this.hide = () => {
       // Hide the tooltip
@@ -6789,9 +6504,7 @@ const MgTooltip = class {
     };
     /**
      * Check if clicked outside of component and hidde tooltip
-     *
-     * @param {MouseEvent} event mouse event
-     * @returns {void}
+     * @param event - mouse event
      */
     this.clickOutside = (event) => {
       if (event.target.closest('mg-tooltip') !== this.element)
@@ -6799,9 +6512,7 @@ const MgTooltip = class {
     };
     /**
      * Check if 'Escape' key is pressed of component and hidde tooltip
-     *
-     * @param {KeyboardEvent} event keyboard event
-     * @returns {void}
+     * @param event - keyboard event
      */
     this.pressEscape = (event) => {
       if (event.code === 'Escape')
@@ -6809,10 +6520,8 @@ const MgTooltip = class {
     };
     /**
      * Method to set display prop
-     *
-     * @param {boolean} newValue display prop new value
-     * @param {boolean} condition additionnal condition to apply display prop newValue
-     * @returns {void}
+     * @param newValue - display prop new value
+     * @param condition - additionnal condition to apply display prop newValue
      */
     this.setDisplay = (newValue, condition = true) => {
       if (!this.disabled && condition)
@@ -6820,11 +6529,9 @@ const MgTooltip = class {
     };
     /**
      * Action for tooltip element and tooltiped element mouse listener
-     *
-     * @param {Guard} elementGuard tooltip element guard
-     * @param {boolean} isMouseenter mouseenter validation
-     * @param {Guard} conditionalGuard guard condition
-     * @returns {void}
+     * @param elementGuard -  tooltip element guard
+     * @param isMouseenter - mouseenter validation
+     * @param conditionalGuard - guard condition
      */
     this.tooltipMouseListenerAction = (elementGuard, isMouseenter, conditionalGuard) => {
       // we mutate elementGuard
@@ -6843,17 +6550,13 @@ const MgTooltip = class {
     };
     /**
      * Method to reset guard value
-     *
-     * @returns {void}
      */
     this.resetGuard = () => {
       this.guard = undefined;
     };
     /**
      * Update slot content when it is a mg-button
-     *
-     * @param {HTMLMgButtonElement} mgButton slotted mg-button
-     * @returns {void}
+     * @param mgButton - slotted mg-button
      */
     this.setMgButtonWrapper = (mgButton) => {
       if (mgButton.disabled) {
@@ -6870,9 +6573,8 @@ const MgTooltip = class {
     };
     /**
      * Init tooltip
-     *
-     * @param {HTMLElement} slotElement slotted element
-     * @param {HTMLElement} interactiveElement interactive element
+     * @param slotElement - slotted element
+     * @param interactiveElement - interactive element
      */
     this.initTooltip = (slotElement, interactiveElement) => {
       // Add tabindex to slotted element if we can't find any interactive element
@@ -6948,8 +6650,6 @@ const MgTooltip = class {
    *************/
   /**
    * set variables
-   *
-   * @returns {void}
    */
   componentWillLoad() {
     // Get windows to attach events
@@ -6959,8 +6659,6 @@ const MgTooltip = class {
    * Get slotted element
    * Check if it already contain an interactive element, if not we need to add a tabIndex attribute
    * We need to attach the focused element to the tooltip (aria-describedby)
-   *
-   * @returns {void}
    */
   componentDidLoad() {
     var _a;
@@ -6993,8 +6691,7 @@ const MgTooltip = class {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
     return (h(Host, null, h("slot", null), h("div", { role: "tooltip", id: this.identifier, class: "mg-tooltip" }, h("span", { innerHTML: this.message }), h("div", { class: "mg-tooltip__arrow", "data-popper-arrow": true }))));