@mgdis/mg-components 5.9.1 → 5.10.1

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9e1091ab.js');
-const mgMenu_conf = require('./mg-menu.conf-9afe6571.js');
+const mgMenu_conf = require('./mg-menu.conf-196151fe.js');
 
 /**
  * Available menu-item positions
@@ -26,10 +26,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 = '';
@@ -48,9 +47,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)) {
@@ -59,9 +56,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);
@@ -71,17 +66,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(' ');
@@ -91,17 +84,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());
@@ -111,9 +102,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);
@@ -122,10 +113,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
@@ -145,10 +135,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) {
@@ -167,9 +156,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;
@@ -177,9 +165,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;
@@ -187,9 +174,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;
@@ -208,26 +194,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;
@@ -264,8 +244,6 @@ const MgActionMore = class {
    *************/
   /**
    * Validate props
-   *
-   * @returns {void}
    */
   componentWillLoad() {
     this.messages = mgMenu_conf.initLocales(this.element).messages.actionMore;
@@ -276,8 +254,7 @@ const MgActionMore = class {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
     const buttonLabel = this.button.label || this.messages.label;
@@ -325,7 +302,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) {
@@ -343,21 +320,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);
@@ -367,11 +342,10 @@ const MgBadge = class {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (index.h("span", { class: this.classList.join() }, index.h("span", { class: "mg-badge__value" }, this.value), index.h("span", { class: "sr-only" }, this.label)));
+    return (index.h("span", { class: this.classCollection.join() }, index.h("span", { class: "mg-badge__value" }, this.value), index.h("span", { class: "sr-only" }, this.label)));
   }
   static get watchers() { return {
     "value": ["validateValue"],
@@ -402,9 +376,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)
@@ -417,9 +389,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 === ' ') {
@@ -432,9 +402,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 === ' ') {
@@ -452,7 +420,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)) {
@@ -460,9 +428,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) {
@@ -470,10 +438,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) {
@@ -486,10 +454,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);
@@ -497,22 +465,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.`);
       }
@@ -523,11 +489,10 @@ const MgButton = class {
   }
   /**
    * Render component
-   *
-   * @returns {HTMLElement} html element
+   * @returns html element
    */
   render() {
-    return (index.h(index.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 }, index.h("div", { class: this.classList.join(), id: this.identifier }, this.loading && index.h("mg-icon", { icon: "loader", spin: true }), index.h("div", { class: "mg-button__content" }, index.h("slot", null)))));
+    return (index.h(index.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 }, index.h("div", { class: this.classCollection.join(), id: this.identifier }, this.loading && index.h("mg-icon", { icon: "loader", spin: true }), index.h("div", { class: "mg-button__content" }, index.h("slot", null)))));
   }
   get element() { return index.getElement(this); }
   static get watchers() { return {
@@ -558,20 +523,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))
@@ -579,14 +551,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);
@@ -594,12 +567,11 @@ const MgCard = class {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
     var _a;
-    return (index.h("div", { class: this.classList.join() }, ((_a = this.variantStyle) === null || _a === void 0 ? void 0 : _a.startsWith('bar-')) && index.h("span", { class: "mg-card__bar" }), index.h("slot", null)));
+    return (index.h("div", { class: this.classCollection.join() }, ((_a = this.variantStyle) === null || _a === void 0 ? void 0 : _a.startsWith('bar-')) && index.h("span", { class: "mg-card__bar" }), index.h("slot", null)));
   }
   static get watchers() { return {
     "variant": ["validateVariant"],
@@ -627,8 +599,6 @@ const MgCharacterLeft = class {
    *************/
   /**
    * Check if props are well configured on init
-   *
-   * @returns {void}
    */
   componentWillLoad() {
     this.validateMaxlength(this.maxlength);
@@ -636,8 +606,7 @@ const MgCharacterLeft = class {
   }
   /**
    * Render component
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
     return (index.h("span", { id: this.identifier, "aria-live": "polite" }, index.h("span", { "aria-hidden": "true" }, this.maxlength - this.characters.length, "/", this.maxlength), index.h("span", { class: "sr-only" }, this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length))));
@@ -657,8 +626,6 @@ const MgDetails = class {
     this.expandedChange = index.createEvent(this, "expanded-change", 7);
     /**
      * Handle details toggle
-     *
-     * @returns {void}
      */
     this.handleToggle = () => {
       this.expanded = this.details.open;
@@ -681,8 +648,6 @@ const MgDetails = class {
    *************/
   /**
    * Check if component props are well configured on init
-   *
-   * @returns {void}
    */
   componentWillLoad() {
     this.validateTitles(this.toggleClosed);
@@ -690,8 +655,7 @@ const MgDetails = class {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
     return (index.h("details", { class: "mg-details", onToggle: this.handleToggle, open: this.expanded, ref: el => (this.details = el) }, index.h("summary", null, index.h("slot", { name: "summary" }), index.h("span", { class: "mg-details__toggle" }, index.h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down', size: "small" }), index.h("span", { class: { 'sr-only': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), index.h("div", { class: "mg-details__details" }, index.h("slot", { name: "details" }))));
@@ -713,8 +677,7 @@ const MgDivider = class {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
     return (index.h("div", { class: {
@@ -736,14 +699,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)) {
@@ -753,7 +713,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) {
@@ -763,8 +723,6 @@ const MgForm = class {
     };
     /**
      * Check if form is valid
-     *
-     * @returns {void}
      */
     this.checkValidity = () => {
       // Update required on input event
@@ -776,9 +734,7 @@ const MgForm = class {
     };
     /**
      * Handle Form Submit
-     *
-     * @param {SubmitEvent} event submit event
-     * @returns {void}
+     * @param event - submit event
      */
     this.handleFormSubmit = (event) => {
       event.preventDefault();
@@ -786,8 +742,6 @@ const MgForm = class {
     };
     /**
      * Set mgInputs
-     *
-     * @returns {void}
      */
     this.setMgInputs = () => {
       // Get slotted mgInputs
@@ -809,7 +763,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() {
@@ -818,8 +772,6 @@ const MgForm = class {
   }
   /**
    * Public method to display errors
-   *
-   * @returns {Promise<void>}
    */
   async displayError() {
     if (!this.readonly) {
@@ -834,8 +786,6 @@ const MgForm = class {
    *************/
   /**
    * Check if component props are well configured on init
-   *
-   * @returns {void}
    */
   componentWillLoad() {
     // Get locales
@@ -862,8 +812,6 @@ const MgForm = class {
   }
   /**
    * Add slot listeners
-   *
-   * @returns {void}
    */
   componentDidLoad() {
     this.mgButtons.forEach(mgButton => {
@@ -881,11 +829,10 @@ const MgForm = class {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (index.h("form", { class: this.classList.join(), id: this.identifier, name: this.name, ref: el => (this.form = el), onSubmit: this.handleFormSubmit }, this.requiredMessage && index.h("p", { innerHTML: this.requiredMessage }), index.h("slot", null), !this.readonly && !this.disabled && index.h("slot", { name: "actions" })));
+    return (index.h("form", { class: this.classCollection.join(), id: this.identifier, name: this.name, ref: el => (this.form = el), onSubmit: this.handleFormSubmit }, this.requiredMessage && index.h("p", { innerHTML: this.requiredMessage }), index.h("slot", null), !this.readonly && !this.disabled && index.h("slot", { name: "actions" })));
   }
   get element() { return index.getElement(this); }
   static get watchers() { return {
@@ -1132,24 +1079,31 @@ const MgIcon = class {
     index.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) {
@@ -1157,8 +1111,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) {
@@ -1166,11 +1120,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}`);
       }
     }
   }
@@ -1180,25 +1133,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);
@@ -1209,11 +1160,10 @@ const MgIcon = class {
   }
   /**
    * Render component
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (index.h("svg", { class: this.classList.join(), "aria-hidden": "true", focusable: "false", viewBox: "0 0 16 16" }, this.getIcon()));
+    return (index.h("svg", { class: this.classCollection.join(), "aria-hidden": "true", focusable: "false", viewBox: "0 0 16 16" }, this.getIcon()));
   }
   static get watchers() { return {
     "icon": ["validateIcon"],
@@ -1238,8 +1188,6 @@ const MgIllustratedMessage = class {
    *************/
   /**
    * Check if component props are well configured on init
-   *
-   * @returns {void}
    */
   componentDidLoad() {
     const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
@@ -1254,8 +1202,7 @@ const MgIllustratedMessage = class {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
     return (index.h("div", { class: {
@@ -1270,13 +1217,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)) {
@@ -1289,32 +1240,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) => {
   /**
@@ -1370,19 +1325,17 @@ const MgInput = (props, children, utils) => {
   const TagName = getTagName(props.isFieldset);
   /**
    * Get tooltip node
-   *
-   * @returns {VNode[]} mg-tooltip
+   * @returns mg-tooltip
    */
   const getTooltip = () => (index.h("mg-tooltip", { identifier: `${props.identifier}-tooltip`, message: props.tooltip },
     index.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 = () => (index.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 (index.h(TagName, { class: props.classList.join() },
+  return (index.h(TagName, { class: props.classCollection.join() },
     props.labelOnTop ? (index.h("div", { class: "mg-input__title" },
       getInputTitle(),
       !props.readonly && props.tooltip && getTooltip())) : (getInputTitle()),
@@ -1400,9 +1353,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);
@@ -1420,8 +1372,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 => {
@@ -1443,8 +1394,7 @@ const MgInputCheckbox = class {
     };
     /**
      * get invalid element
-     *
-     * @returns {HTMLInputElement} element
+     * @returns element
      */
     this.getInvalidElement = () => this.inputs.find((input) => input !== null && !input.disabled && !input.checkValidity());
     /**
@@ -1481,7 +1431,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 = [];
   }
@@ -1511,8 +1461,6 @@ const MgInputCheckbox = class {
   }
   /**
    * Public method to display errors
-   *
-   * @returns {Promise<void>}
    */
   async displayError() {
     this.checkValidity();
@@ -1524,8 +1472,7 @@ const MgInputCheckbox = class {
    *************/
   /**
    * Check if component props are well configured on init
-   *
-   * @returns {ReturnType<typeof setTimeout>} timeout
+   * @returns timeout
    */
   componentWillLoad() {
     // Get locales
@@ -1541,11 +1488,10 @@ const MgInputCheckbox = class {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (index.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 }, index.h("ul", { class: { 'mg-input__input-group-container': true, 'mg-input__input-group-container--vertical': this.inputVerticalList }, role: "list" }, this.checkboxItems
+    return (index.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 }, index.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;
     })
@@ -1609,8 +1555,7 @@ const MgInputDate = class {
     };
     /**
      * get input error code
-     *
-     * @returns {null | InputError} error code
+     * @returns error code
      */
     this.getInputError = () => {
       var _a, _b;
@@ -1635,8 +1580,6 @@ const MgInputDate = class {
     };
     /**
      * Check input errors
-     *
-     * @returns {void}
      */
     this.setErrorMessage = () => {
       var _a;
@@ -1674,7 +1617,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) {
@@ -1705,8 +1648,6 @@ const MgInputDate = class {
   }
   /**
    * Public method to display errors
-   *
-   * @returns {Promise<void>}
    */
   async displayError() {
     this.checkValidity();
@@ -1718,8 +1659,7 @@ const MgInputDate = class {
    *************/
   /**
    * Check if component props are well configured on init
-   *
-   * @returns {ReturnType<typeof setTimeout>} timeout
+   * @returns timeout
    */
   componentWillLoad() {
     // Get locales
@@ -1739,11 +1679,10 @@ const MgInputDate = class {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (index.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: mgMenu_conf.localeDate(this.value, this.locale), tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, index.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 (index.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: mgMenu_conf.localeDate(this.value, this.locale), tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, index.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;
       } })));
@@ -1783,8 +1722,6 @@ const MgInputNumeric = class {
     this.hasDisplayedError = false;
     /**
      * Handle input event
-     *
-     * @returns {void}
      */
     this.handleInput = () => {
       // Check validity
@@ -1796,26 +1733,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;
@@ -1825,8 +1758,6 @@ const MgInputNumeric = class {
     };
     /**
      * Set input error message
-     *
-     * @returns {void}
      */
     this.setErrorMessage = () => {
       // Set error message
@@ -1843,8 +1774,7 @@ const MgInputNumeric = class {
     };
     /**
      * Get input error code
-     *
-     * @returns {null | InputError} error code
+     * @returns error code
      */
     this.getInputError = () => {
       let inputError = null;
@@ -1872,20 +1802,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' ? mgMenu_conf.localeCurrency(value, this.locale, this.currency) : mgMenu_conf.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;
@@ -1909,7 +1836,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;
   }
@@ -1921,7 +1848,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) {
@@ -1968,8 +1895,6 @@ const MgInputNumeric = class {
   }
   /**
    * Public method to display errors
-   *
-   * @returns {Promise<void>}
    */
   async displayError() {
     this.checkValidity();
@@ -1979,8 +1904,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;
@@ -1990,8 +1914,7 @@ const MgInputNumeric = class {
    *************/
   /**
    * Check if component props are well configured on init
-   *
-   * @returns {ReturnType<typeof setTimeout>} timeout
+   * @returns timeout
    */
   componentWillLoad() {
     // Get locales
@@ -2014,11 +1937,10 @@ const MgInputNumeric = class {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (index.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 }, index.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 (index.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 }, index.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;
       } }), index.h("slot", { name: "append-input" })));
@@ -2097,7 +2019,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) {
@@ -2115,8 +2037,6 @@ const MgInputPassword = class {
   }
   /**
    * Public method to display errors
-   *
-   * @returns {Promise<void>}
    */
   async displayError() {
     this.checkValidity();
@@ -2128,8 +2048,7 @@ const MgInputPassword = class {
    *************/
   /**
    * Check if component props are well configured on init
-   *
-   * @returns {ReturnType<typeof setTimeout>} timeout
+   * @returns timeout
    */
   componentWillLoad() {
     // Get locales
@@ -2143,11 +2062,10 @@ const MgInputPassword = class {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (index.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 }, index.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 (index.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 }, index.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;
       } })));
@@ -2166,9 +2084,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 {
@@ -2185,9 +2102,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();
@@ -2195,8 +2110,6 @@ const MgInputRadio = class {
     };
     /**
      * Handle blur event
-     *
-     * @returns {void}
      */
     this.handleBlur = () => {
       this.checkValidity();
@@ -2204,8 +2117,6 @@ const MgInputRadio = class {
     };
     /**
      * Check if input is valid
-     *
-     * @returns {void}
      */
     this.checkValidity = () => {
       this.valid = this.readonly || this.disabled || this.getInvalidElement() === undefined;
@@ -2215,8 +2126,6 @@ const MgInputRadio = class {
     };
     /**
      * Set input error message
-     *
-     * @returns {void}
      */
     this.setErrorMessage = () => {
       const invalidElement = this.getInvalidElement();
@@ -2228,8 +2137,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;
@@ -2247,7 +2155,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;
   }
@@ -2283,8 +2191,6 @@ const MgInputRadio = class {
   }
   /**
    * Public method to display errors
-   *
-   * @returns {Promise<void>}
    */
   async displayError() {
     this.checkValidity();
@@ -2296,8 +2202,7 @@ const MgInputRadio = class {
    *************/
   /**
    * Check if component props are well configured on init
-   *
-   * @returns {ReturnType<typeof setTimeout>} timeout
+   * @returns timeout
    */
   componentWillLoad() {
     // Get locales
@@ -2313,11 +2218,10 @@ const MgInputRadio = class {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (index.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 }, index.h("ul", { class: { 'mg-input__input-group-container': true, 'mg-input__input-group-container--vertical': this.inputVerticalList }, role: "list" }, this.options.map((input, index$1) => (index.h("li", { key: input.title, class: { 'mg-input__input-group': true, 'mg-input__input-group--disabled': this.disabled || input.disabled } }, index.h("input", { type: "radio", id: this.identifier + '_' + index$1, name: this.identifier, value: index$1, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index$1].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: el => {
+    return (index.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 }, index.h("ul", { class: { 'mg-input__input-group-container': true, 'mg-input__input-group-container--vertical': this.inputVerticalList }, role: "list" }, this.options.map((input, index$1) => (index.h("li", { key: input.title, class: { 'mg-input__input-group': true, 'mg-input__input-group--disabled': this.disabled || input.disabled } }, index.h("input", { type: "radio", id: this.identifier + '_' + index$1, name: this.identifier, value: index$1, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index$1].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: el => {
         if (el !== null)
           this.inputs[index$1] = el;
       } }), index.h("label", { htmlFor: this.identifier + '_' + index$1 }, input.title)))))));
@@ -2337,35 +2241,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) {
@@ -2394,8 +2290,6 @@ const MgInputSelect = class {
     this.hasDisplayedError = false;
     /**
      * Handle input event
-     *
-     * @returns {void}
      */
     this.handleInput = () => {
       this.updateValue();
@@ -2404,16 +2298,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();
@@ -2421,8 +2312,6 @@ const MgInputSelect = class {
     };
     /**
      * Update value from input.value
-     *
-     * @returns {void}
      */
     this.updateValue = () => {
       if (this.input.value === '') {
@@ -2448,8 +2337,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; };
     /**
@@ -2474,9 +2362,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) => (index.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;
@@ -2497,7 +2384,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;
@@ -2555,8 +2442,6 @@ const MgInputSelect = class {
   }
   /**
    * Public method to display errors
-   *
-   * @returns {Promise<void>}
    */
   async displayError() {
     this.checkValidity();
@@ -2568,8 +2453,7 @@ const MgInputSelect = class {
    *************/
   /**
    * Check if component props are well configured on init
-   *
-   * @returns {ReturnType<typeof setTimeout>} timeout
+   * @returns timeout
    */
   componentWillLoad() {
     // Get locales
@@ -2590,11 +2474,10 @@ const MgInputSelect = class {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (index.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 }, index.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 (index.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 }, index.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
@@ -2629,8 +2512,6 @@ const MgInputText = class {
     this.hasDisplayedError = false;
     /**
      * Handle input event
-     *
-     * @returns {void}
      */
     this.handleInput = () => {
       this.checkValidity();
@@ -2641,29 +2522,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;
@@ -2674,8 +2549,6 @@ const MgInputText = class {
     };
     /**
      * Set input error message
-     *
-     * @returns {void}
      */
     this.setErrorMessage = () => {
       // Set error message
@@ -2691,11 +2564,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 === '')) {
@@ -2704,17 +2575,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;
@@ -2738,7 +2607,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) {
@@ -2746,10 +2615,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) {
@@ -2764,16 +2633,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();
@@ -2785,8 +2650,7 @@ const MgInputText = class {
    *************/
   /**
    * Check if component props are well configured on init
-   *
-   * @returns {ReturnType<typeof setTimeout>} timeout
+   * @returns timeout
    */
   componentWillLoad() {
     // Get locales
@@ -2805,11 +2669,10 @@ const MgInputText = class {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (index.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 }, index.h("div", { class: "mg-input__with-character-left", style: {
+    return (index.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 }, index.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(),
@@ -2858,24 +2721,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);
     /**
@@ -2907,7 +2769,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 === '')) {
@@ -2935,7 +2797,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) {
@@ -2954,16 +2816,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();
@@ -2975,8 +2835,7 @@ const MgInputTextarea = class {
    *************/
   /**
    * Check if component props are well configured on init
-   *
-   * @returns {ReturnType<typeof setTimeout>} timeout
+   * @returns timeout
    */
   componentWillLoad() {
     // Get locales
@@ -2994,11 +2853,10 @@ const MgInputTextarea = class {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (index.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 }, index.h("div", { class: "mg-input__with-character-left" }, index.h("textarea", { class: {
+    return (index.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 }, index.h("div", { class: "mg-input__with-character-left" }, index.h("textarea", { class: {
         'mg-input__box': true,
         'mg-input__box--resizable': this.resizable === 'both',
         'mg-input__box--resizable-horizontal': this.resizable === 'horizontal',
@@ -3042,8 +2900,6 @@ const MgInputTitle = class {
    *************/
   /**
    * Init tag name
-   *
-   * @returns {void}
    */
   componentWillLoad() {
     this.validateIdentifier(this.identifier);
@@ -3051,8 +2907,7 @@ const MgInputTitle = class {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML element
    */
   render() {
     const TagName = this.tagName;
@@ -3069,9 +2924,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 {
@@ -3090,16 +2944,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);
@@ -3125,7 +2975,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;
   }
@@ -3153,41 +3003,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);
@@ -3229,11 +3077,10 @@ const MgInputToggle = class {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (index.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 }, index.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 }, index.h("span", { "aria-hidden": "true", class: "mg-input__toggle-item-container" }, index.h("slot", { name: "item-1" })), index.h("span", { "aria-hidden": "true", class: "mg-input__toggle-item-container" }, index.h("slot", { name: "item-2" })))));
+    return (index.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 }, index.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 }, index.h("span", { "aria-hidden": "true", class: "mg-input__toggle-item-container" }, index.h("slot", { name: "item-1" })), index.h("span", { "aria-hidden": "true", class: "mg-input__toggle-item-container" }, index.h("slot", { name: "item-2" })))));
   }
   get element() { return index.getElement(this); }
   static get watchers() { return {
@@ -3264,10 +3111,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) {
@@ -3276,22 +3121,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 => {
@@ -3306,8 +3147,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
@@ -3317,16 +3156,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
@@ -3368,8 +3203,6 @@ const MgMenu = class {
    *************/
   /**
    * Validate props
-   *
-   * @returns {void}
    */
   componentWillLoad() {
     this.validateDirection(this.direction);
@@ -3379,8 +3212,7 @@ const MgMenu = class {
   }
   /**
    * Check if component slots configuration
-   *
-   * @returns {ReturnType<typeof setTimeout>} timeout
+   * @returns timeout
    */
   componentDidLoad() {
     // update props and states after componentDidLoad hook
@@ -3410,16 +3242,13 @@ const MgMenu = class {
   }
   /**
    * Add listeners to items
-   *
-   * @returns {void}
    */
   componentDidRender() {
     this.initMenuItemsListeners();
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
     return (index.h(index.Host, { role: this.isChildMenu ? 'menu' : 'menubar', "aria-label": this.label }, index.h("slot", null)));
@@ -3451,33 +3280,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');
@@ -3487,8 +3310,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;
@@ -3496,9 +3318,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
@@ -3516,9 +3336,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)) {
@@ -3527,8 +3345,6 @@ const MgMenuItem = class {
     };
     /**
      * Init event-listeners
-     *
-     * @returns {void}
      */
     this.initListeners = () => {
       var _a;
@@ -3544,14 +3360,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(mgMenu_conf.Direction.HORIZONTAL) && this.hasChildren && this.href === undefined;
     /************
@@ -3559,9 +3373,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) {
@@ -3574,17 +3386,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 = () => index.h("slot", null);
     this.identifier = createID('mg-menu-item');
@@ -3650,8 +3459,6 @@ const MgMenuItem = class {
   }
   /**
    * Render popover clickoutside guard for content slot
-   *
-   * @returns {void}
    */
   updatePopoverGuard() {
     if (this.displayPopover())
@@ -3664,8 +3471,6 @@ const MgMenuItem = class {
    *************/
   /**
    * Validate props
-   *
-   * @returns {void}
    */
   componentWillLoad() {
     // has children items that is NOT [slot='image' | 'information' | 'label' | 'metadata'] element
@@ -3681,8 +3486,7 @@ const MgMenuItem = class {
   }
   /**
    * Check if component slots configuration
-   *
-   * @returns {ReturnType<typeof setTimeout>} timeout
+   * @returns timeout
    */
   componentDidLoad() {
     // validation
@@ -3721,8 +3525,7 @@ const MgMenuItem = class {
   }
   /**
    * Render ineractive element
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   renderInteractiveElement() {
     const TagName = this.href !== undefined ? 'a' : 'button';
@@ -3734,8 +3537,7 @@ const MgMenuItem = class {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
     const getContainerClasses = () => ({
@@ -3784,25 +3586,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();
@@ -3825,8 +3621,7 @@ const MgMessage = class {
     };
     /**
      * Get icon corresponding to variant
-     *
-     * @returns {string} icon
+     * @returns icon
      */
     this.getIcon = () => {
       switch (this.variant) {
@@ -3845,11 +3640,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.`);
     }
   }
@@ -3859,9 +3654,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) {
@@ -3873,7 +3668,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);
@@ -3883,7 +3678,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
@@ -3910,7 +3705,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);
@@ -3918,11 +3713,10 @@ const MgMessage = class {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (index.h("div", { id: this.identifier, class: this.classList.join(), role: this.variant === 'info' ? 'status' : 'alert' }, index.h("mg-card", { variant: this.variant, "variant-style": "bar-left" }, index.h("span", { class: "mg-message__icon" }, index.h("mg-icon", { icon: this.getIcon() })), index.h("div", { class: "mg-message__content" }, index.h("span", { class: "mg-message__content-slot" }, index.h("slot", null)), this.hasActions && index.h("span", { class: "mg-message__content-separator" }), this.hasActions && (index.h("span", { class: "mg-message__content-actions-slot" }, index.h("slot", { name: "actions" })))), this.closeButton && (index.h("span", { class: "mg-message__close-button" }, index.h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.message.closeButton, onClick: this.handleClose }, index.h("mg-icon", { icon: "cross" })))))));
+    return (index.h("div", { id: this.identifier, class: this.classCollection.join(), role: this.variant === 'info' ? 'status' : 'alert' }, index.h("mg-card", { variant: this.variant, "variant-style": "bar-left" }, index.h("span", { class: "mg-message__icon" }, index.h("mg-icon", { icon: this.getIcon() })), index.h("div", { class: "mg-message__content" }, index.h("span", { class: "mg-message__content-slot" }, index.h("slot", null)), this.hasActions && index.h("span", { class: "mg-message__content-separator" }), this.hasActions && (index.h("span", { class: "mg-message__content-actions-slot" }, index.h("slot", { name: "actions" })))), this.closeButton && (index.h("span", { class: "mg-message__close-button" }, index.h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.message.closeButton, onClick: this.handleClose }, index.h("mg-icon", { icon: "cross" })))))));
   }
   get element() { return index.getElement(this); }
   static get watchers() { return {
@@ -3982,8 +3776,6 @@ const MgModal = class {
      *************/
     /**
      * Handle close button
-     *
-     * @returns {void}
      */
     this.handleClose = () => {
       this.hide = true;
@@ -3994,7 +3786,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() === '') {
@@ -4004,20 +3796,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.
@@ -4030,8 +3820,6 @@ const MgModal = class {
    *************/
   /**
    * Check if component props are well configured on init
-   *
-   * @returns {void}
    */
   componentWillLoad() {
     // Store body overflow
@@ -4050,8 +3838,6 @@ const MgModal = class {
   }
   /**
    * Add observer on component to set focus when displayed
-   *
-   * @returns {void}
    */
   componentDidLoad() {
     new MutationObserver(mutationList => {
@@ -4066,11 +3852,10 @@ const MgModal = class {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (index.h("div", { role: "alertdialog", id: this.identifier, class: this.classList.join(), tabindex: "-1", "aria-labelledby": this.titleId, "aria-modal": "true", "aria-hidden": this.hide }, index.h("mg-card", null, index.h("div", { class: "mg-modal__dialog" }, index.h("header", { class: "mg-modal__header" }, this.closeButton && (index.h("span", { class: "mg-modal__close-button" }, index.h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, index.h("mg-icon", { icon: "cross" })))), index.h("h1", { class: "mg-modal__title", id: this.titleId }, this.modalTitle)), this.hasContent && (index.h("article", { class: "mg-modal__content" }, index.h("slot", { name: "content" }))), this.hasActions && (index.h("footer", { class: "mg-modal__footer" }, index.h("slot", { name: "actions" })))))));
+    return (index.h("div", { role: "alertdialog", id: this.identifier, class: this.classCollection.join(), tabindex: "-1", "aria-labelledby": this.titleId, "aria-modal": "true", "aria-hidden": this.hide }, index.h("mg-card", null, index.h("div", { class: "mg-modal__dialog" }, index.h("header", { class: "mg-modal__header" }, this.closeButton && (index.h("span", { class: "mg-modal__close-button" }, index.h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, index.h("mg-icon", { icon: "cross" })))), index.h("h1", { class: "mg-modal__title", id: this.titleId }, this.modalTitle)), this.hasContent && (index.h("article", { class: "mg-modal__content" }, index.h("slot", { name: "content" }))), this.hasActions && (index.h("footer", { class: "mg-modal__footer" }, index.h("slot", { name: "actions" })))))));
   }
   get element() { return index.getElement(this); }
   static get watchers() { return {
@@ -4091,6 +3876,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
@@ -4098,15 +3884,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 {
@@ -4115,9 +3901,7 @@ const MgPagination = class {
     this.currentPageChange = index.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;
@@ -4127,9 +3911,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);
@@ -4137,10 +3919,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);
@@ -4170,8 +3950,6 @@ const MgPagination = class {
    *************/
   /**
    * Check if props are well configured on init
-   *
-   * @returns {void}
    */
   componentWillLoad() {
     // Get locales
@@ -4186,8 +3964,7 @@ const MgPagination = class {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
     const navigationActionButton = (disabled, action) => (index.h("mg-button", { identifier: `${this.identifier}-button-${action}`, label: this.messages.pagination[`${action}Page`],
@@ -4215,8 +3992,6 @@ const MgPanel = class {
      ************/
     /**
      * Toggle is editing state
-     *
-     * @returns {void}
      */
     this.toggleIsEditing = () => {
       this.isEditing = !this.isEditing;
@@ -4226,8 +4001,6 @@ const MgPanel = class {
      ************/
     /**
      * Collapse button click handler
-     *
-     * @returns {void}
      */
     this.handleCollapseButton = () => {
       if (!this.expandToggleDisabled) {
@@ -4236,25 +4009,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;
@@ -4262,8 +4029,6 @@ const MgPanel = class {
     };
     /**
      * Validate edition button handler
-     *
-     * @returns {void}
      */
     this.handleValidateEditButton = () => {
       if (this.editInputElement.valid) {
@@ -4274,9 +4039,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 = () => (index.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 }, index.h("span", { class: "mg-panel__collapse-button-content" }, index.h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down' }), !this.isEditing && this.panelTitle)));
@@ -4301,7 +4064,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;
   }
@@ -4312,10 +4075,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".');
     }
   }
@@ -4327,8 +4090,6 @@ const MgPanel = class {
    *************/
   /**
    * Check if props are well configured on init
-   *
-   * @returns {void}
    */
   componentWillLoad() {
     // Get locales
@@ -4339,8 +4100,6 @@ const MgPanel = class {
   }
   /**
    * Edit DOM after render
-   *
-   * @returns {void}
    */
   componentDidRender() {
     // when we are editing we get focus on edition input
@@ -4350,11 +4109,10 @@ const MgPanel = class {
   }
   /**
    * Render component
-   *
-   * @returns {HTMLElement} html element
+   * @returns html element
    */
   render() {
-    return (index.h("section", { class: this.classList.join(), id: this.identifier }, index.h("mg-card", null, index.h("header", { class: "mg-panel__header", id: `${this.identifier}-header` }, index.h("div", { class: `mg-panel__header-left ${this.isEditing ? 'mg-panel__header-left--full' : ''}` }, this.headerLeft()), index.h("div", { class: "mg-panel__header-right" }, index.h("slot", { name: "header-right" }))), index.h("article", { class: "mg-panel__content", id: `${this.identifier}-content`, "aria-labelledby": `${this.identifier}-header`, hidden: !this.expanded }, index.h("slot", null)))));
+    return (index.h("section", { class: this.classCollection.join(), id: this.identifier }, index.h("mg-card", null, index.h("header", { class: "mg-panel__header", id: `${this.identifier}-header` }, index.h("div", { class: `mg-panel__header-left ${this.isEditing ? 'mg-panel__header-left--full' : ''}` }, this.headerLeft()), index.h("div", { class: "mg-panel__header-right" }, index.h("slot", { name: "header-right" }))), index.h("article", { class: "mg-panel__content", id: `${this.identifier}-content`, "aria-labelledby": `${this.identifier}-header`, hidden: !this.expanded }, index.h("slot", null)))));
   }
   get element() { return index.getElement(this); }
   static get watchers() { return {
@@ -6173,9 +5931,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;
@@ -6187,8 +5943,6 @@ const MgPopover = class {
     };
     /**
      * Show popover
-     *
-     * @returns {void}
      */
     this.show = () => {
       // Make the popover visible
@@ -6207,8 +5961,6 @@ const MgPopover = class {
     };
     /**
      * Hide popover
-     *
-     * @returns {void}
      */
     this.hide = () => {
       // Hide the popover
@@ -6222,8 +5974,6 @@ const MgPopover = class {
     };
     /**
      * Handle action for close button
-     *
-     * @returns {void}
      */
     this.handleCloseButton = () => {
       this.display = false;
@@ -6234,13 +5984,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) {
@@ -6256,8 +6006,6 @@ const MgPopover = class {
    *************/
   /**
    * Check if component props are well configured on init
-   *
-   * @returns {void} timeout
    */
   componentWillLoad() {
     // Get windows to attach events
@@ -6268,8 +6016,6 @@ const MgPopover = class {
   }
   /**
    * Check if component props are well configured on init
-   *
-   * @returns {void}
    */
   componentDidLoad() {
     const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
@@ -6326,11 +6072,10 @@ const MgPopover = class {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (index.h(index.Host, null, index.h("slot", null), index.h("div", { id: this.identifier, class: this.classList.join() }, index.h("mg-card", null, this.closeButton && (index.h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, index.h("mg-icon", { icon: "cross" }))), index.h("div", { class: "mg-popover__title" }, index.h("slot", { name: "title" })), index.h("slot", { name: "content" })), !this.arrowHide && index.h("div", { class: "mg-popover__arrow", "data-popper-arrow": true }))));
+    return (index.h(index.Host, null, index.h("slot", null), index.h("div", { id: this.identifier, class: this.classCollection.join() }, index.h("mg-card", null, this.closeButton && (index.h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, index.h("mg-icon", { icon: "cross" }))), index.h("div", { class: "mg-popover__title" }, index.h("slot", { name: "title" })), index.h("slot", { name: "content" })), !this.arrowHide && index.h("div", { class: "mg-popover__arrow", "data-popper-arrow": true }))));
   }
   get element() { return index.getElement(this); }
   static get watchers() { return {
@@ -6351,9 +6096,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();
@@ -6373,8 +6116,6 @@ const MgSkipLinks = class {
    *************/
   /**
    * Check if props are well configured on init
-   *
-   * @returns {void}
    */
   componentWillLoad() {
     this.validateLinks(this.links);
@@ -6382,8 +6123,7 @@ const MgSkipLinks = class {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
     return (index.h("nav", { class: "mg-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, index.h("ul", { class: "mg-skip-links__list", role: "list" }, this.links.map(link => (index.h("li", { key: link.href }, index.h("a", { class: "mg-skip-links__link", href: link.href, onClick: this.handleLinkCLick }, link.label)))))));
@@ -6414,9 +6154,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 {
@@ -6432,37 +6171,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;
@@ -6477,16 +6211,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;
@@ -6524,8 +6255,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
@@ -6550,7 +6279,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() === '') {
@@ -6561,7 +6290,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
@@ -6604,8 +6333,6 @@ const MgTabs = class {
    *************/
   /**
    * Check if component props are well configured on init
-   *
-   * @returns {void}
    */
   componentWillLoad() {
     // Check tabs format
@@ -6617,8 +6344,6 @@ const MgTabs = class {
   }
   /**
    * add listners
-   *
-   * @returns {void}
    */
   componentDidLoad() {
     document.addEventListener('click', (event) => {
@@ -6628,11 +6353,10 @@ const MgTabs = class {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (index.h("div", { class: this.classList.join() }, index.h("header", { role: "tablist", "aria-label": this.label, class: "mg-tabs__header" }, this.tabs.map((tab, index$1) => (index.h("button", { key: tab.label, role: "tab", id: this.getElementId(this.identifier, index$1), class: {
+    return (index.h("div", { class: this.classCollection.join() }, index.h("header", { role: "tablist", "aria-label": this.label, class: "mg-tabs__header" }, this.tabs.map((tab, index$1) => (index.h("button", { key: tab.label, role: "tab", id: this.getElementId(this.identifier, index$1), class: {
         [`${this.buttonTabBaseClass}`]: true,
         [`${this.buttonTabBaseClass}--horizontal`]: true,
         [`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasStatus(tab, Status.ACTIVE),
@@ -6669,7 +6393,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)) {
@@ -6677,16 +6401,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
@@ -6694,18 +6418,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() === '')
@@ -6716,8 +6438,6 @@ const MgTag = class {
    *************/
   /**
    * Check if props are well configured on init
-   *
-   * @returns {void}
    */
   componentWillLoad() {
     this.validateVariant(this.variant);
@@ -6727,11 +6447,10 @@ const MgTag = class {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (index.h("span", { class: this.classList.join() }, index.h("slot", null)));
+    return (index.h("span", { class: this.classCollection.join() }, index.h("slot", null)));
   }
   get element() { return index.getElement(this); }
   static get watchers() { return {
@@ -6756,8 +6475,6 @@ const MgTooltip = class {
     index.registerInstance(this, hostRef);
     /**
      * Show tooltip
-     *
-     * @returns {void}
      */
     this.show = () => {
       // Make the tooltip visible
@@ -6777,8 +6494,6 @@ const MgTooltip = class {
     };
     /**
      * Hide tooltip
-     *
-     * @returns {void}
      */
     this.hide = () => {
       // Hide the tooltip
@@ -6793,9 +6508,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)
@@ -6803,9 +6516,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')
@@ -6813,10 +6524,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)
@@ -6824,11 +6533,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
@@ -6847,17 +6554,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) {
@@ -6874,9 +6577,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
@@ -6952,8 +6654,6 @@ const MgTooltip = class {
    *************/
   /**
    * set variables
-   *
-   * @returns {void}
    */
   componentWillLoad() {
     // Get windows to attach events
@@ -6963,8 +6663,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;
@@ -6997,8 +6695,7 @@ const MgTooltip = class {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
     return (index.h(index.Host, null, index.h("slot", null), index.h("div", { role: "tooltip", id: this.identifier, class: "mg-tooltip" }, index.h("span", { innerHTML: this.message }), index.h("div", { class: "mg-tooltip__arrow", "data-popper-arrow": true }))));