@mgdis/mg-components 5.5.0 → 5.7.0

package/dist/collection/components/atoms/mg-tag/mg-tag.js

@@ -7,8 +7,8 @@ export class MgTag {
      * Internal *
      ************/
     // Classes
-    this.classOutline = `mg-tag--outline`;
-    this.classSoft = `mg-tag--soft`;
+    this.classOutline = 'mg-tag--outline';
+    this.classSoft = 'mg-tag--soft';
     this.variant = variants[0];
     this.outline = undefined;
     this.soft = undefined;
@@ -16,7 +16,7 @@ export class MgTag {
   }
   validateVariant(newValue, oldValue) {
     if (!variants.includes(newValue)) {
-      throw new Error(`<mg-tag> prop "variant" must be one of : ${variants.join(', ')}.`);
+      throw new Error(`<mg-tag> prop "variant" must be one of: ${variants.join(', ')}.`);
     }
     else {
       if (oldValue !== undefined) {
@@ -51,7 +51,7 @@ export class MgTag {
    * @returns {void}
    */
   validateTextContent(textContent) {
-    if (!textContent || textContent.trim() === '')
+    if (typeof textContent !== 'string' || textContent.trim() === '')
       throw new Error('<mg-tag> slot must contain a text content.');
   }
   /*************

package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.css

@@ -10,6 +10,8 @@
   background-color: hsl(var(--mg-tooltip-background-color));
   color: hsl(var(--mg-tooltip-font-color));
   text-align: start;
+  max-width: 40rem;
+  box-sizing: border-box;
 }
 .mg-tooltip[data-show] {
   display: block;

package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js

@@ -1,5 +1,5 @@
 import { h, Host } from '@stencil/core';
-import { createID } from '../../../utils/components.utils';
+import { createID, focusableElements } from '../../../utils/components.utils';
 import { createPopper } from '@popperjs/core';
 import { Guard } from './mg-tooltip.conf';
 export class MgTooltip {
@@ -11,7 +11,7 @@ export class MgTooltip {
      */
     this.show = () => {
       // Make the tooltip visible
-      this.tooltip.setAttribute('data-show', '');
+      this.tooltip.dataset.show = '';
       // Enable the event listeners
       this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
       // Update its position
@@ -57,7 +57,7 @@ export class MgTooltip {
             this.resetGuard();
           }, 100);
         }
-        else if (isMouseenter && elementGuard === Guard.HOVER_TOOLTIPED_ELEMENT) {
+        else if (this.guard === Guard.HOVER_TOOLTIPED_ELEMENT) {
           this.setDisplay(isMouseenter);
         }
       }
@@ -126,24 +126,22 @@ export class MgTooltip {
         this.guard = Guard.FOCUS;
         this.setDisplay(true);
       });
-      ['blur', 'keydown'].forEach(event => {
-        this.tooltipedElement.addEventListener(event, (e) => {
-          // we continue to process ONLY for KeyboardEvents 'Escape'
-          if (e.type === 'keydown' && e.code !== 'Escape') {
-            return;
-          }
-          this.resetGuard();
+      this.tooltipedElement.addEventListener('blur', () => {
+        this.resetGuard();
+        this.setDisplay(false);
+      });
+      document.addEventListener('keydown', (event) => {
+        if (event.code === 'Escape')
           this.setDisplay(false);
-        });
       });
       // manage tooltipElement & tooltipedElement mouseenter/mouseleave events
-      ['mouseenter', 'mouseleave'].forEach(event => {
-        const isMouseenter = event === 'mouseenter';
+      ['mouseenter', 'mouseleave'].forEach(eventType => {
+        const isMouseenter = eventType === 'mouseenter';
         [
           { element: this.tooltip, action: () => this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIP_ELEMENT, isMouseenter, Guard.HOVER_TOOLTIPED_ELEMENT) },
           { element: this.tooltipedElement, action: () => this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIPED_ELEMENT, isMouseenter, Guard.HOVER_TOOLTIP_ELEMENT) },
         ].forEach(({ element, action }) => {
-          element.addEventListener(event, () => {
+          element.addEventListener(eventType, () => {
             action();
           });
         });
@@ -185,8 +183,7 @@ export class MgTooltip {
     // get slotted element
     const slotElement = this.element.firstElementChild;
     // Get interactive element
-    const interactiveElements = ['a', 'button', 'input', 'textarea', 'select']; //! Might needs updates
-    const interactiveElement = this.element.shadowRoot.querySelector(interactiveElements.join(',')) || ((_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(interactiveElements.join(',')));
+    const interactiveElement = slotElement.matches(focusableElements) ? slotElement : (_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(focusableElements);
     // define selected element to become tooltip selector
     this.tooltipedElement = interactiveElement || slotElement;
     // Check if slotted element is a disabled mg-button
@@ -211,7 +208,7 @@ export class MgTooltip {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h(Host, null, h("slot", null), h("div", { role: "tooltip", id: this.identifier, class: "mg-tooltip", innerHTML: this.message }, h("div", { class: "mg-tooltip__arrow", "data-popper-arrow": true }))));
+    return (h(Host, null, h("slot", null), h("div", { role: "tooltip", id: this.identifier, class: "mg-tooltip" }, h("span", { innerHTML: this.message }), h("div", { class: "mg-tooltip__arrow", "data-popper-arrow": true }))));
   }
   static get is() { return "mg-tooltip"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/molecules/inputs/MgInput.js

@@ -58,6 +58,11 @@ export const MgInput = (props, children, utils) => {
   if (props.labelOnTop && props.labelHide) {
     throw new Error('<mg-input> prop "labelOnTop" must not be paired with the prop "labelHide".');
   }
+  /**
+   * Set readonly value
+   */
+  if (props.readonlyValue === undefined)
+    props.readonlyValue = props.value;
   /**
    * Component classes
    */
@@ -105,5 +110,5 @@ export const MgInput = (props, children, utils) => {
    * @returns {VNode[]} mg-input-title
    */
   const getInputTitle = () => (h("mg-input-title", { identifier: props.identifier, class: props.labelHide ? 'sr-only' : undefined, required: props.required && !props.disabled && !props.readonly, "is-legend": props.isFieldset }, props.label));
-  return (h(TagName, { class: props.classList.join() }, props.labelOnTop ? (h("div", { class: "mg-input__title" }, getInputTitle(), !props.readonly && props.tooltip && getTooltip())) : (getInputTitle()), props.readonly ? (h("div", { class: "mg-input__input-container" }, h("strong", null, props.readonlyValue || props.value), children.filter(child => child.$name$ === 'append-input'))) : (h("div", { class: "mg-input__input-container" }, h("div", { class: { 'mg-input__input': true, 'mg-input__input--has-error': props.errorMessage !== undefined } }, applyAriadescribedBy(children, ariaDescribedbyIDs, utils), !props.labelOnTop && props.tooltip && getTooltip()), props.helpText && h("div", { id: helpTextId, class: "mg-input__help-text", innerHTML: props.helpText }), props.errorMessage && !props.readonly && !props.disabled && (h("div", { id: helpTextErrorId, class: "mg-input__error", innerHTML: props.errorMessage, "aria-live": "assertive" }))))));
+  return (h(TagName, { class: props.classList.join() }, props.labelOnTop ? (h("div", { class: "mg-input__title" }, getInputTitle(), !props.readonly && props.tooltip && getTooltip())) : (getInputTitle()), props.readonly ? (h("div", { class: "mg-input__input-container" }, h("strong", null, props.readonlyValue), children.filter(child => child.$name$ === 'append-input'))) : (h("div", { class: "mg-input__input-container" }, h("div", { class: { 'mg-input__input': true, 'mg-input__input--has-error': props.errorMessage !== undefined } }, applyAriadescribedBy(children, ariaDescribedbyIDs, utils), !props.labelOnTop && props.tooltip && getTooltip()), props.helpText && h("div", { id: helpTextId, class: "mg-input__help-text", innerHTML: props.helpText }), props.errorMessage && !props.readonly && !props.disabled && (h("div", { id: helpTextErrorId, class: "mg-input__error", innerHTML: props.errorMessage, "aria-live": "assertive" }))))));
 };

package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.css

@@ -73,6 +73,7 @@
 .mg-input__input {
   display: flex;
   /* Manage space between input and first message */
+  /* Set custom opacity on disabled input */
 }
 .mg-input__input mg-tooltip {
   margin-top: calc((var(--default-size) - var(--mg-icon-regular-size)) / 2);
@@ -83,6 +84,9 @@
 .mg-input__input + .mg-input__help-text, .mg-input__input + .mg-input__error {
   margin-top: 0.5rem;
 }
+.mg-input__input .mg-input__box:disabled, .mg-input__input-group--disabled label, .mg-input.mg-input--toggle-disabled .mg-input__input .mg-input__button-toggle {
+  opacity: var(--mg-disabled-opacity);
+}
 
 .mg-input__error {
   display: inline-block;
@@ -145,9 +149,6 @@ fieldset.mg-input.mg-input--label-on-top .mg-input__input-group-container {
   display: flex;
   align-items: top;
 }
-.mg-input__input-group.mg-input__input-group--disabled label {
-  opacity: 0.3;
-}
 
 /**
  * A11Y

package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/no-redundant-roles */
 import { h } from '@stencil/core';
 import { MgInput } from '../MgInput';
 import { ClassList } from '../../../../utils/components.utils';
@@ -145,11 +146,11 @@ export class MgInputCheckbox {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, readonly: undefined, mgWidth: undefined, disabled: this.disabled, value: this.value && this.value.toString(), readonlyValue: undefined, tooltip: !this.readonly ? this.tooltip : undefined, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined, isFieldset: true }, h("ul", { class: { 'mg-input__input-group-container': true, 'mg-input__input-group-container--vertical': this.inputVerticalList } }, this.checkboxItems
+    return (h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, readonly: undefined, mgWidth: undefined, disabled: this.disabled, value: this.value && this.value.toString(), readonlyValue: undefined, tooltip: !this.readonly ? this.tooltip : undefined, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined, isFieldset: true }, h("ul", { class: { 'mg-input__input-group-container': true, 'mg-input__input-group-container--vertical': this.inputVerticalList }, role: "list" }, this.checkboxItems
       .filter(item => {
       return !this.readonly || item.value;
     })
-      .map((input, index) => (h("li", { class: { 'mg-input__input-group': true, 'mg-input__input-group--disabled': this.disabled || input.disabled } }, h("input", { type: "checkbox", id: input.id, name: this.identifier, value: input.value && input.value.toString(), checked: Boolean(input.value), disabled: this.readonly || this.disabled || input.disabled, required: this.required, indeterminate: input.value === null, onInput: this.handleInput, onBlur: this.handleBlur, ref: el => {
+      .map((input, index) => (h("li", { key: input.id, class: { 'mg-input__input-group': true, 'mg-input__input-group--disabled': this.disabled || input.disabled } }, h("input", { type: "checkbox", id: input.id, name: this.identifier, value: input.value && input.value.toString(), checked: Boolean(input.value), disabled: this.readonly || this.disabled || input.disabled, required: this.required, indeterminate: input.value === null, onInput: this.handleInput, onBlur: this.handleBlur, ref: el => {
         if (el !== null)
           this.inputs[index] = el;
       } }), h("label", { htmlFor: input.id }, input.title)))))));

package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.css

@@ -73,6 +73,7 @@
 .mg-input__input {
   display: flex;
   /* Manage space between input and first message */
+  /* Set custom opacity on disabled input */
 }
 .mg-input__input mg-tooltip {
   margin-top: calc((var(--default-size) - var(--mg-icon-regular-size)) / 2);
@@ -83,6 +84,9 @@
 .mg-input__input + .mg-input__help-text, .mg-input__input + .mg-input__error {
   margin-top: 0.5rem;
 }
+.mg-input__input .mg-input__box:disabled, .mg-input__input-group--disabled label, .mg-input.mg-input--toggle-disabled .mg-input__input .mg-input__button-toggle {
+  opacity: var(--mg-disabled-opacity);
+}
 
 .mg-input__error {
   display: inline-block;
@@ -124,7 +128,7 @@
   font-style: italic;
 }
 .mg-input__box:focus {
-  box-shadow: 0 0 0.6rem hsla(var(--mg-inputs-color-shadow-focus-hsl), 0.5);
+  box-shadow: 0 0 0.6rem hsl(var(--mg-inputs-color-shadow-focus-hsl), 0.5);
 }
 .mg-input__box:disabled {
   opacity: 0.3;
@@ -145,8 +149,8 @@
 }
 .mg-input.mg-input--is-input-group-append .mg-input__box {
   margin-right: -0.1rem;
-  border-top-right-radius: 0%;
-  border-bottom-right-radius: 0%;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 }
 .mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible {
   outline-style: solid;

package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.js

@@ -105,11 +105,14 @@ export class MgInputDate {
     this.errorMessage = undefined;
   }
   validateValue(newValue) {
+    // When the input is not fully completed or has been cleared, the value becomes an empty string.
+    if (newValue === '')
+      newValue = null;
     if (newValue !== undefined && newValue !== null && (typeof newValue !== 'string' || !dateRegExp.test(newValue))) {
       throw new Error("<mg-input-date> props 'value' doesn't match pattern: yyyy-mm-dd");
     }
     else {
-      this.valueChange.emit(this.value);
+      this.valueChange.emit(newValue);
     }
   }
   handleValidityChange(newValue, _oldValue, prop) {
@@ -167,7 +170,7 @@ export class MgInputDate {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: undefined, disabled: this.disabled, value: this.value, readonlyValue: localeDate(this.value, this.locale), tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("input", { type: "date", class: "mg-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, onInput: this.handleInput, onBlur: this.handleBlur, pattern: "[0-9]{4}-[0-9]{2}-[0-9]{2}", ref: el => {
+    return (h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: undefined, disabled: this.disabled, value: this.value, readonlyValue: localeDate(this.value, this.locale), tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("input", { type: "date", class: "mg-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, onInput: this.handleInput, onBlur: this.handleBlur, ref: el => {
         if (el !== null)
           this.input = el;
       } })));

package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.css

@@ -73,6 +73,7 @@
 .mg-input__input {
   display: flex;
   /* Manage space between input and first message */
+  /* Set custom opacity on disabled input */
 }
 .mg-input__input mg-tooltip {
   margin-top: calc((var(--default-size) - var(--mg-icon-regular-size)) / 2);
@@ -83,6 +84,9 @@
 .mg-input__input + .mg-input__help-text, .mg-input__input + .mg-input__error {
   margin-top: 0.5rem;
 }
+.mg-input__input .mg-input__box:disabled, .mg-input__input-group--disabled label, .mg-input.mg-input--toggle-disabled .mg-input__input .mg-input__button-toggle {
+  opacity: var(--mg-disabled-opacity);
+}
 
 .mg-input__error {
   display: inline-block;
@@ -124,7 +128,7 @@
   font-style: italic;
 }
 .mg-input__box:focus {
-  box-shadow: 0 0 0.6rem hsla(var(--mg-inputs-color-shadow-focus-hsl), 0.5);
+  box-shadow: 0 0 0.6rem hsl(var(--mg-inputs-color-shadow-focus-hsl), 0.5);
 }
 .mg-input__box:disabled {
   opacity: 0.3;
@@ -145,8 +149,8 @@
 }
 .mg-input.mg-input--is-input-group-append .mg-input__box {
   margin-right: -0.1rem;
-  border-top-right-radius: 0%;
-  border-bottom-right-radius: 0%;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 }
 .mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible {
   outline-style: solid;

package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.js

@@ -178,7 +178,7 @@ export class MgInputNumeric {
   }
   validateType(newValue) {
     if (!types.includes(newValue)) {
-      throw new Error(`<mg-input-numeric> prop "type" must be one of : ${types.join(', ')}`);
+      throw new Error(`<mg-input-numeric> prop "type" must be one of: ${types.join(', ')}`);
     }
   }
   validateIntegerLength(newValue) {

package/dist/collection/components/molecules/inputs/mg-input-password/mg-input-password.css

@@ -73,6 +73,7 @@
 .mg-input__input {
   display: flex;
   /* Manage space between input and first message */
+  /* Set custom opacity on disabled input */
 }
 .mg-input__input mg-tooltip {
   margin-top: calc((var(--default-size) - var(--mg-icon-regular-size)) / 2);
@@ -83,6 +84,9 @@
 .mg-input__input + .mg-input__help-text, .mg-input__input + .mg-input__error {
   margin-top: 0.5rem;
 }
+.mg-input__input .mg-input__box:disabled, .mg-input__input-group--disabled label, .mg-input.mg-input--toggle-disabled .mg-input__input .mg-input__button-toggle {
+  opacity: var(--mg-disabled-opacity);
+}
 
 .mg-input__error {
   display: inline-block;
@@ -124,7 +128,7 @@
   font-style: italic;
 }
 .mg-input__box:focus {
-  box-shadow: 0 0 0.6rem hsla(var(--mg-inputs-color-shadow-focus-hsl), 0.5);
+  box-shadow: 0 0 0.6rem hsl(var(--mg-inputs-color-shadow-focus-hsl), 0.5);
 }
 .mg-input__box:disabled {
   opacity: 0.3;
@@ -145,8 +149,8 @@
 }
 .mg-input.mg-input--is-input-group-append .mg-input__box {
   margin-right: -0.1rem;
-  border-top-right-radius: 0%;
-  border-bottom-right-radius: 0%;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 }
 .mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible {
   outline-style: solid;

package/dist/collection/components/molecules/inputs/mg-input-radio/mg-input-radio.css

@@ -73,6 +73,7 @@
 .mg-input__input {
   display: flex;
   /* Manage space between input and first message */
+  /* Set custom opacity on disabled input */
 }
 .mg-input__input mg-tooltip {
   margin-top: calc((var(--default-size) - var(--mg-icon-regular-size)) / 2);
@@ -83,6 +84,9 @@
 .mg-input__input + .mg-input__help-text, .mg-input__input + .mg-input__error {
   margin-top: 0.5rem;
 }
+.mg-input__input .mg-input__box:disabled, .mg-input__input-group--disabled label, .mg-input.mg-input--toggle-disabled .mg-input__input .mg-input__button-toggle {
+  opacity: var(--mg-disabled-opacity);
+}
 
 .mg-input__error {
   display: inline-block;
@@ -145,9 +149,6 @@ fieldset.mg-input.mg-input--label-on-top .mg-input__input-group-container {
   display: flex;
   align-items: top;
 }
-.mg-input__input-group.mg-input__input-group--disabled label {
-  opacity: 0.3;
-}
 
 /**
  * A11Y

package/dist/collection/components/molecules/inputs/mg-input-radio/mg-input-radio.js

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/no-redundant-roles */
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { h } from '@stencil/core';
@@ -154,7 +155,7 @@ export class MgInputRadio {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, disabled: this.disabled, readonly: this.readonly, mgWidth: undefined, value: this.value, readonlyValue: this.value, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: true }, h("ul", { class: { 'mg-input__input-group-container': true, 'mg-input__input-group-container--vertical': this.inputVerticalList } }, this.options.map((input, index) => (h("li", { class: { 'mg-input__input-group': true, 'mg-input__input-group--disabled': this.disabled || input.disabled } }, h("input", { type: "radio", id: this.identifier + '_' + index, name: this.identifier, value: index, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: el => {
+    return (h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, disabled: this.disabled, readonly: this.readonly, mgWidth: undefined, value: this.value, readonlyValue: this.value, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: true }, h("ul", { class: { 'mg-input__input-group-container': true, 'mg-input__input-group-container--vertical': this.inputVerticalList }, role: "list" }, this.options.map((input, index) => (h("li", { key: input.title, class: { 'mg-input__input-group': true, 'mg-input__input-group--disabled': this.disabled || input.disabled } }, h("input", { type: "radio", id: this.identifier + '_' + index, name: this.identifier, value: index, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: el => {
         if (el !== null)
           this.inputs[index] = el;
       } }), h("label", { htmlFor: this.identifier + '_' + index }, input.title)))))));

package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.css

@@ -73,6 +73,7 @@
 .mg-input__input {
   display: flex;
   /* Manage space between input and first message */
+  /* Set custom opacity on disabled input */
 }
 .mg-input__input mg-tooltip {
   margin-top: calc((var(--default-size) - var(--mg-icon-regular-size)) / 2);
@@ -83,6 +84,9 @@
 .mg-input__input + .mg-input__help-text, .mg-input__input + .mg-input__error {
   margin-top: 0.5rem;
 }
+.mg-input__input .mg-input__box:disabled, .mg-input__input-group--disabled label, .mg-input.mg-input--toggle-disabled .mg-input__input .mg-input__button-toggle {
+  opacity: var(--mg-disabled-opacity);
+}
 
 .mg-input__error {
   display: inline-block;
@@ -124,7 +128,7 @@
   font-style: italic;
 }
 .mg-input__box:focus {
-  box-shadow: 0 0 0.6rem hsla(var(--mg-inputs-color-shadow-focus-hsl), 0.5);
+  box-shadow: 0 0 0.6rem hsl(var(--mg-inputs-color-shadow-focus-hsl), 0.5);
 }
 .mg-input__box:disabled {
   opacity: 0.3;
@@ -145,8 +149,8 @@
 }
 .mg-input.mg-input--is-input-group-append .mg-input__box {
   margin-right: -0.1rem;
-  border-top-right-radius: 0%;
-  border-bottom-right-radius: 0%;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 }
 .mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible {
   outline-style: solid;

package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.js

@@ -119,13 +119,17 @@ export class MgInputSelect {
     this.valueChange.emit(newValue);
   }
   validateItems(newValue) {
+    // Empty options
+    if (newValue.length === 0) {
+      this.options = [];
+    }
     // String array
-    if (allItemsAreString(newValue)) {
+    else if (allItemsAreString(newValue)) {
       this.valueExist = newValue.includes(this.value);
       this.options = newValue.map((item) => ({ title: item, value: item }));
     }
     // Object array
-    else if (newValue && newValue.every(item => isOption(item))) {
+    else if (newValue.every(item => isOption(item))) {
       this.valueExist = newValue.map(item => item.value).includes(this.value);
       // Grouped object options
       if (newValue.some(item => item.group !== undefined)) {
@@ -137,7 +141,7 @@ export class MgInputSelect {
       }
     }
     else {
-      throw new Error('<mg-input-select> prop "items" is required and all items must be the same type, string or Option.');
+      throw new Error('<mg-input-select> prop "items" is required, can be an empty Array or all items must be the same type: string or Option.');
     }
   }
   handleValidityChange(newValue, _oldValue, prop) {
@@ -194,7 +198,7 @@ export class MgInputSelect {
         if (el !== null)
           this.input = el;
       } }, (!this.placeholderHide || !this.valueExist) && ( // In case passed value does not match any option we display the placeholder
-    h("option", { value: "", disabled: this.placeholderDisabled && this.valueExist }, this.placeholder)), this.options.map(option => option.group !== undefined ? (h("optgroup", { label: option.group }, option.options.map(optgroup => (h("option", { value: optgroup.title, selected: JSON.stringify(this.value) === JSON.stringify(optgroup.value), disabled: optgroup.disabled }, optgroup.title))))) : (h("option", { value: option.title, selected: JSON.stringify(this.value) === JSON.stringify(option.value), disabled: option.disabled }, option.title))))));
+    h("option", { value: "", disabled: this.placeholderDisabled && this.valueExist }, this.placeholder)), this.options.map(option => option.group !== undefined ? (h("optgroup", { label: option.group }, option.options.map(optgroup => (h("option", { key: optgroup.title, value: optgroup.title, selected: JSON.stringify(this.value) === JSON.stringify(optgroup.value), disabled: optgroup.disabled }, optgroup.title))))) : (h("option", { value: option.title, selected: JSON.stringify(this.value) === JSON.stringify(option.value), disabled: option.disabled }, option.title))))));
   }
   static get is() { return "mg-input-select"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.css

@@ -73,6 +73,7 @@
 .mg-input__input {
   display: flex;
   /* Manage space between input and first message */
+  /* Set custom opacity on disabled input */
 }
 .mg-input__input mg-tooltip {
   margin-top: calc((var(--default-size) - var(--mg-icon-regular-size)) / 2);
@@ -83,6 +84,9 @@
 .mg-input__input + .mg-input__help-text, .mg-input__input + .mg-input__error {
   margin-top: 0.5rem;
 }
+.mg-input__input .mg-input__box:disabled, .mg-input__input-group--disabled label, .mg-input.mg-input--toggle-disabled .mg-input__input .mg-input__button-toggle {
+  opacity: var(--mg-disabled-opacity);
+}
 
 .mg-input__error {
   display: inline-block;
@@ -124,7 +128,7 @@
   font-style: italic;
 }
 .mg-input__box:focus {
-  box-shadow: 0 0 0.6rem hsla(var(--mg-inputs-color-shadow-focus-hsl), 0.5);
+  box-shadow: 0 0 0.6rem hsl(var(--mg-inputs-color-shadow-focus-hsl), 0.5);
 }
 .mg-input__box:disabled {
   opacity: 0.3;
@@ -145,8 +149,8 @@
 }
 .mg-input.mg-input--is-input-group-append .mg-input__box {
   margin-right: -0.1rem;
-  border-top-right-radius: 0%;
-  border-bottom-right-radius: 0%;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 }
 .mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible {
   outline-style: solid;

package/dist/collection/components/molecules/inputs/mg-input-textarea/mg-input-textarea.css

@@ -73,6 +73,7 @@
 .mg-input__input {
   display: flex;
   /* Manage space between input and first message */
+  /* Set custom opacity on disabled input */
 }
 .mg-input__input mg-tooltip {
   margin-top: calc((var(--default-size) - var(--mg-icon-regular-size)) / 2);
@@ -83,6 +84,9 @@
 .mg-input__input + .mg-input__help-text, .mg-input__input + .mg-input__error {
   margin-top: 0.5rem;
 }
+.mg-input__input .mg-input__box:disabled, .mg-input__input-group--disabled label, .mg-input.mg-input--toggle-disabled .mg-input__input .mg-input__button-toggle {
+  opacity: var(--mg-disabled-opacity);
+}
 
 .mg-input__error {
   display: inline-block;
@@ -124,7 +128,7 @@
   font-style: italic;
 }
 .mg-input__box:focus {
-  box-shadow: 0 0 0.6rem hsla(var(--mg-inputs-color-shadow-focus-hsl), 0.5);
+  box-shadow: 0 0 0.6rem hsl(var(--mg-inputs-color-shadow-focus-hsl), 0.5);
 }
 .mg-input__box:disabled {
   opacity: 0.3;
@@ -145,8 +149,8 @@
 }
 .mg-input.mg-input--is-input-group-append .mg-input__box {
   margin-right: -0.1rem;
-  border-top-right-radius: 0%;
-  border-bottom-right-radius: 0%;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 }
 .mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible {
   outline-style: solid;

package/dist/collection/components/molecules/inputs/mg-input-textarea/mg-input-textarea.js

@@ -41,7 +41,7 @@ export class MgInputTextarea {
     };
     /**
      * Get pattern validity
-     * Pattern is not defined on textarea field : https://developer.mozilla.org/fr/docs/Web/HTML/Element/Textarea
+     * Pattern is not defined on textarea field: https://developer.mozilla.org/fr/docs/Web/HTML/Element/Textarea
      *
      * @returns {boolean} is pattern valid
      */

package/dist/collection/components/molecules/inputs/mg-input-toggle/mg-input-toggle.css

@@ -73,6 +73,7 @@
 .mg-input__input {
   display: flex;
   /* Manage space between input and first message */
+  /* Set custom opacity on disabled input */
 }
 .mg-input__input mg-tooltip {
   margin-top: calc((var(--default-size) - var(--mg-icon-regular-size)) / 2);
@@ -83,6 +84,9 @@
 .mg-input__input + .mg-input__help-text, .mg-input__input + .mg-input__error {
   margin-top: 0.5rem;
 }
+.mg-input__input .mg-input__box:disabled, .mg-input__input-group--disabled label, .mg-input.mg-input--toggle-disabled .mg-input__input .mg-input__button-toggle {
+  opacity: var(--mg-disabled-opacity);
+}
 
 .mg-input__error {
   display: inline-block;
@@ -226,8 +230,4 @@
 }
 .mg-input.mg-input--toggle-readonly.mg-input--toggle-is-active .mg-input__toggle-item-container:last-of-type {
   display: flex;
-}
-
-.mg-input.mg-input--toggle-disabled .mg-input__button-toggle {
-  opacity: 0.3;
 }

package/dist/collection/components/molecules/menu/mg-menu/mg-menu.conf.js

@@ -6,3 +6,20 @@ export var Direction;
   Direction["VERTICAL"] = "vertical";
   Direction["HORIZONTAL"] = "horizontal";
 })(Direction || (Direction = {}));
+/**
+ * More item type guard
+ *
+ * @param {unknown} element element to control
+ * @returns {boolean} truthy if element is more-item
+ */
+export const isMoreItem = (element) => {
+  var _a, _b, _c;
+  const item = element;
+  return (item === undefined ||
+    (typeof item === 'object' &&
+      (typeof item.size === 'string' || typeof ((_a = item.mgIcon) === null || _a === void 0 ? void 0 : _a.icon) === 'string' || typeof ((_b = item.slotLabel) === null || _b === void 0 ? void 0 : _b.label) === 'string' || typeof ((_c = item.slotLabel) === null || _c === void 0 ? void 0 : _c.display) === 'boolean')));
+};
+/**
+ * List of all possibles sizes
+ */
+export const sizes = ['regular', 'medium', 'large'];

package/dist/collection/components/molecules/menu/mg-menu/mg-menu.css

@@ -1,3 +1,30 @@
+/**
+ * A11Y
+ */
+.sr-only {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  -webkit-clip-path: inset(50%) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+  position: absolute !important;
+  width: 1px !important;
+  white-space: nowrap !important;
+}
+
+*:focus:not(:focus-visible) {
+  outline: none;
+}
+
+@media (prefers-reduced-motion) {
+  .mg-a11y-animation {
+    animation: none !important;
+    transition: none !important;
+  }
+}
 :host {
   display: flex;
   background-color: hsl(var(--mg-menu-background-color-hsl, var(--color-light)));