@mgdis/mg-components 6.15.0 → 6.16.0

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

@@ -1,8 +1,8 @@
-import { r as registerInstance, h, H as Host, a as getElement, c as createEvent } from './index-DhAOnZJn.js';
-import { h as createID, t as toString, C as ClassList, c as isValidString, n as nextTick, j as isValideID, k as isTagName, i as isObject, l as cleanString, f as formatID, m as dateRegExp, o as dateToString, b as allItemsAreString, p as getWindows, q as focusableElements } from './index-WtiuOkLj.js';
-import { i as initLocales, l as localeDate, a as localeDatePattern, b as localeNumber, c as localeUnit, d as localePercent, e as localeCurrency } from './index-CKB-AnCZ.js';
-import { K as Keys, d as defineErrorMessage } from './mg-input.utils-BYI03zSi.js';
-import { t as tooltipPositions, b as classFieldset, c as classReadonly, a as classDisabled, d as classVerticalList, w as widths } from './mg-input.conf-BAUTlb6r.js';
+import { r as registerInstance, h, H as Host, a as getElement, c as createEvent } from './index-JHj_9FSs.js';
+import { h as createID, t as toString, C as ClassList, c as isValidString, n as nextTick, j as isValideID, k as isTagName, l as cleanString, f as formatID, m as dateRegExp, o as dateToString, b as allItemsAreString, p as getWindows, q as focusableElements } from './index-WtiuOkLj.js';
+import { i as initLocales, l as localeDate, a as localeDatePattern, b as localeNumber, c as localeUnit, d as localePercent, e as localeCurrency } from './index-Bab8_u8S.js';
+import { K as Keys } from './events.utils-yMGqY8YG.js';
+import { t as tooltipPositions, b as classFieldset, c as classReadonly, a as classDisabled, d as classVerticalList, w as widths } from './mg-input.conf-CNgv8hc5.js';
 
 /**
  * Available menu item status values
@@ -1192,16 +1192,13 @@ const MgIllustratedMessage = class {
 };
 MgIllustratedMessage.style = mgIllustratedMessageCss;
 
-const mgInputCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}/*!\n * @prop --mg-c-input-border-width: Defines the width of the input border. Default value is `--mg-b-size-border`.\n * @prop --mg-c-input-border-radius: Defines the border radius of the input. Default value is `--mg-b-size-radius`.\n * @prop --mg-c-input-color-border: Defines the color of the input border. Default value is `rgb(181, 194, 201)`.\n * @prop --mg-c-input-placeholder-color-text: Defines the color of the placeholder text. Default value is `rgb(181, 194, 201)`.\n * @prop --mg-c-input-color-box-shadow-focus: Defines the shadow color of the input when focused. Default value is `rgba(0, 221, 255, 0.5)`.\n * @prop --mg-c-input-error-color-background: Defines the background color of the input error message. Default value is `color-mix(in srgb, var(--mg-b-color-danger), white 95%)`.\n * @prop --mg-c-input-toggle-border-radius-ratio: Defines the border radius ratio of the input toggle. Default value is `2`.\n * @prop --mg-c-input-check-size: Defines the size of the input check. Default value is `--mg-b-size-16`.\n */:host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;min-height:var(--mg-b-size-min-height);align-items:flex-start}.mg-c-input__input-container{width:100%;min-height:var(--mg-b-size-min-height)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-b-size-16);height:var(--mg-b-size-16);margin-left:var(--mg-b-size-8)}@media print{.mg-c-input__input-container mg-tooltip{display:none}}.mg-c-input__input{display:flex;min-height:var(--mg-b-size-min-height);align-items:center;justify-content:start}.mg-c-input__input mg-tooltip{align-self:baseline;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input__input ::slotted(.mg-c-input__button-toggle:disabled){opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input__title{display:flex;width:var(--mg-c-input-title-width, auto);flex-shrink:0;align-items:baseline;justify-content:flex-end;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);margin-right:var(--mg-c-input-title-horizontal-space, var(--mg-b-size-8));text-align:right}.mg-c-input__title slot[name=label]+mg-tooltip{margin-left:var(--mg-b-size-4)}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__error{--mg-c-details-spacing:0;display:inline-block;padding:var(--mg-b-size-4) var(--mg-b-size-8);border-radius:var(--mg-b-size-radius);background:var(--mg-c-input-error-color-background);color:var(--mg-b-color-danger)}.mg-c-input__error ::slotted(*),.mg-c-input__help-text ::slotted(*){font-size:var(--mg-b-font-size-small);text-align:start}:host(:not(.mg-c-input--textarea)) .mg-c-input__input+.mg-c-input__error,:host(:not(.mg-c-input--textarea)) .mg-c-input__input+.mg-c-input__help-text{margin-top:var(--mg-b-size-4)}:host(.mg-c-input.mg-c-input--readonly) .mg-c-input__input mg-tooltip{margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2)}:host(.mg-c-input){display:flex;margin-bottom:var(--mg-c-input-margin-bottom, 0)}:host(.mg-c-input.mg-c-input--checkbox) .mg-c-input__input,:host(.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset;align-items:flex-start}:host(.mg-c-input.mg-c-input--checkbox,.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset}:host(.mg-c-input.mg-c-input--fieldset:not(.mg-c-input--checkbox-multi,.mg-c-input--readonly)) .mg-c-input__input-container mg-tooltip{margin-left:var(--mg-b-size-32)}:host(.mg-c-input.mg-c-input--label-on-top){flex-direction:column}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:var(--mg-b-size-4);text-align:left}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}@media screen and (max-width: 767px){:host(.mg-c-input){flex-direction:column}:host(.mg-c-input) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:var(--mg-b-size-4);text-align:left}:host(.mg-c-input) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}}";
+const mgInputCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}/*!\n * @prop --mg-c-input-border-width: Defines the width of the input border. Default value is `--mg-b-size-border`.\n * @prop --mg-c-input-border-radius: Defines the border radius of the input. Default value is `--mg-b-size-radius`.\n * @prop --mg-c-input-color-border: Defines the color of the input border. Default value is `rgb(181, 194, 201)`.\n * @prop --mg-c-input-placeholder-color-text: Defines the color of the placeholder text. Default value is `rgb(181, 194, 201)`.\n * @prop --mg-c-input-color-box-shadow-focus: Defines the shadow color of the input when focused. Default value is `rgba(0, 221, 255, 0.5)`.\n * @prop --mg-c-input-error-color-background: Defines the background color of the input error message. Default value is `color-mix(in srgb, var(--mg-b-color-danger), white 95%)`.\n * @prop --mg-c-input-toggle-border-radius-ratio: Defines the border radius ratio of the input toggle. Default value is `2`.\n * @prop --mg-c-input-check-size: Defines the size of the input check. Default value is `--mg-b-size-16`.\n */:host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;min-height:var(--mg-b-size-min-height);align-items:flex-start}.mg-c-input__input-container{width:100%;min-height:var(--mg-b-size-min-height)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-b-size-16);height:var(--mg-b-size-16);margin-left:var(--mg-b-size-8)}@media print{.mg-c-input__input-container mg-tooltip{display:none}}.mg-c-input__input{display:flex;min-height:var(--mg-b-size-min-height);align-items:center;justify-content:start}.mg-c-input__input mg-tooltip{align-self:baseline;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input__input ::slotted(.mg-c-input__button-toggle:disabled){opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input__title{display:flex;width:var(--mg-c-input-title-width, auto);flex-shrink:0;align-items:baseline;justify-content:flex-end;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);margin-right:var(--mg-c-input-title-horizontal-space, var(--mg-b-size-8));text-align:right}.mg-c-input__title slot[name=label]+mg-tooltip{margin-left:var(--mg-b-size-4)}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__error{display:inline-block;padding:var(--mg-b-size-4) var(--mg-b-size-8);border-radius:var(--mg-b-size-radius);background:var(--mg-c-input-error-color-background);color:var(--mg-b-color-danger)}.mg-c-input__error ::slotted(*),.mg-c-input__help-text ::slotted(*){font-size:var(--mg-b-font-size-small);text-align:start}:host(:not(.mg-c-input--textarea)) .mg-c-input__input+.mg-c-input__error,:host(:not(.mg-c-input--textarea)) .mg-c-input__input+.mg-c-input__help-text{margin-top:var(--mg-b-size-4)}:host(.mg-c-input.mg-c-input--readonly) .mg-c-input__input mg-tooltip{margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2)}:host(.mg-c-input){display:flex;margin-bottom:var(--mg-c-input-margin-bottom, 0)}:host(.mg-c-input.mg-c-input--checkbox) .mg-c-input__input,:host(.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset;align-items:flex-start}:host(.mg-c-input.mg-c-input--checkbox,.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset}:host(.mg-c-input.mg-c-input--fieldset:not(.mg-c-input--checkbox-multi,.mg-c-input--readonly)) .mg-c-input__input-container mg-tooltip{margin-left:var(--mg-b-size-32)}:host(.mg-c-input.mg-c-input--label-on-top){flex-direction:column}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:var(--mg-b-size-4);text-align:left}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}@media screen and (max-width: 767px){:host(.mg-c-input){flex-direction:column}:host(.mg-c-input) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:var(--mg-b-size-4);text-align:left}:host(.mg-c-input) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}}";
 
-const isValidErrorMessageType = (msg) => isObject(msg) && ['summary', 'details'].every(key => typeof msg[key] === 'string');
 const MgInput = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.slotLabel = 'label';
         this.slotError = 'error';
-        this.slotSummary = 'summary';
-        this.slotDetails = 'details';
         this.slotHelpText = 'help-text';
         // style
         this.classInput = 'mg-c-input';
@@ -1243,44 +1240,6 @@ const MgInput = class {
          * Element is disabled
          */
         this.isVerticalList = false;
-        /**
-         * Render error message details element
-         */
-        this.renderErrorDetailsMessage = (message) => {
-            var _a, _b;
-            // remove error slot if it is NOT a MG-DETAIL
-            if (((_a = this.errorMessageSlotElement) === null || _a === void 0 ? void 0 : _a.nodeName) !== 'MG-DETAILS') {
-                (_b = this.errorMessageSlotElement) === null || _b === void 0 ? void 0 : _b.remove();
-            }
-            // create OR update error summary
-            let summarySlotElement = this.element.querySelector(`[slot=${this.slotError}] [slot=${this.slotSummary}]`);
-            if (summarySlotElement === null) {
-                summarySlotElement = document.createElement('span');
-                summarySlotElement.setAttribute('slot', this.slotSummary);
-            }
-            summarySlotElement.innerHTML = message.summary;
-            // create OR update error details
-            let detailsSlotElement = this.element.querySelector(`[slot=${this.slotError}] [slot=${this.slotDetails}]`);
-            if (detailsSlotElement === null) {
-                detailsSlotElement = document.createElement('p');
-                detailsSlotElement.setAttribute('slot', this.slotDetails);
-                detailsSlotElement.classList.add('mg-c-input__error-details');
-            }
-            detailsSlotElement.innerHTML = message.details;
-            // create error mg-details
-            let mgDetails = this.element.querySelector(`mg-details[slot=${this.slotError}]`);
-            if (mgDetails === null) {
-                mgDetails = document.createElement('mg-details');
-                mgDetails.classList.add('mg-c-input__error');
-                mgDetails.toggleClosed = this.messages.details.toggleClosed;
-                mgDetails.toggleOpened = this.messages.details.toggleOpened;
-                mgDetails.hideSummary = true;
-                mgDetails.appendChild(summarySlotElement);
-                mgDetails.appendChild(detailsSlotElement);
-                this.element.appendChild(mgDetails);
-            }
-            this.errorMessageSlotElement = mgDetails;
-        };
         /**
          * Get tooltip node
          * @returns mg-tooltip
@@ -1318,14 +1277,16 @@ const MgInput = class {
         }
     }
     watchErrorMessage(newValue) {
-        if (isValidString(newValue) || isValidErrorMessageType(newValue)) {
+        var _a;
+        if (newValue !== undefined) {
             this.element.classList.add(this.classHasError);
+            this.renderErrorMessage();
         }
         else {
             this.element.classList.remove(this.classHasError);
+            (_a = this.errorMessageSlotElement) === null || _a === void 0 ? void 0 : _a.remove();
+            this.errorMessageSlotElement = undefined;
         }
-        // update error message slot
-        this.renderErrorMessageSlot();
     }
     watchHelpText(newValue) {
         var _a;
@@ -1354,12 +1315,14 @@ const MgInput = class {
         // Help text
         if (this.helpText !== undefined) {
             this.renderHelpText();
-            ariaDescribedbyIDs.add(this.helpTextId);
+            if (!ariaDescribedbyIDs.has(this.helpTextId))
+                ariaDescribedbyIDs.add(this.helpTextId);
         }
         // Error Message
         if (this.errorMessage !== undefined) {
-            this.renderErrorMessageSlot();
-            ariaDescribedbyIDs.add(this.helpTextErrorId);
+            this.renderErrorMessage();
+            if (!ariaDescribedbyIDs.has(this.helpTextErrorId))
+                ariaDescribedbyIDs.add(this.helpTextErrorId);
         }
         this.element.querySelectorAll('input,select,textarea,[role="switch"]').forEach(element => {
             if (ariaDescribedbyIDs.size > 0) {
@@ -1425,41 +1388,17 @@ const MgInput = class {
         this.element.appendChild(labelSlotElement);
     }
     /**
-     * Render error message element
+     * Render error message
      */
-    renderErrorStringMessage(message) {
-        var _a;
-        // remove error slot if it is a MG-DETAIL
-        if (((_a = this.errorMessageSlotElement) === null || _a === void 0 ? void 0 : _a.nodeName) === 'MG-DETAILS') {
-            this.errorMessageSlotElement.remove();
-        }
-        // create element if it does NOT exist
-        else if (this.errorMessageSlotElement === null) {
-            this.errorMessageSlotElement = document.createElement('div');
-            this.element.appendChild(this.errorMessageSlotElement);
-        }
-        this.errorMessageSlotElement.innerHTML = message;
-    }
-    /**
-     * Render error message slot element
-     */
-    renderErrorMessageSlot() {
-        var _a;
+    renderErrorMessage() {
         this.errorMessageSlotElement = this.element.querySelector(`[slot=${this.slotError}]`);
-        if (this.errorMessage !== undefined) {
-            if (typeof this.errorMessage === 'string') {
-                this.renderErrorStringMessage(this.errorMessage);
-            }
-            else {
-                this.renderErrorDetailsMessage(this.errorMessage);
-            }
+        if (this.errorMessageSlotElement === null) {
+            this.errorMessageSlotElement = document.createElement('div');
             this.errorMessageSlotElement.setAttribute('slot', this.slotError);
-            this.errorMessageSlotElement.setAttribute('id', this.helpTextErrorId);
-        }
-        else {
-            (_a = this.errorMessageSlotElement) === null || _a === void 0 ? void 0 : _a.remove();
-            this.errorMessageSlotElement = undefined;
+            this.element.appendChild(this.errorMessageSlotElement);
         }
+        this.errorMessageSlotElement.setAttribute('id', this.helpTextErrorId);
+        this.errorMessageSlotElement.innerHTML = this.errorMessage;
     }
     /**
      * Render help text message
@@ -1481,9 +1420,6 @@ const MgInput = class {
      * Check if component props are well configured on init
      */
     componentWillLoad() {
-        // Get locales
-        this.messages = initLocales(this.element).messages;
-        // Validate
         this.watchIdentifier(this.identifier);
         this.watchLabel();
         this.watchClass();
@@ -1508,7 +1444,7 @@ const MgInput = class {
      */
     render() {
         const isGroup = this.isFieldset && !this.isReadonly;
-        return (h(Host, { key: '0641f834a725708ce254e82a86c3a75f1c183c0a', class: this.element.classList.toString(), role: isGroup ? 'group' : undefined, "aria-labelledby": isGroup ? `${this.identifier}-title` : undefined }, h("div", { key: '7d96f125694996407b8cecd9491366c39fd0d05f', class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide } }, h("slot", { key: '43720fcecc55de1cae61607b2ae2c3b224e18dbd', name: this.slotLabel }), this.tooltip && (this.tooltipPosition === 'label' || this.labelOnTop) && !this.labelHide && this.renderTooltip()), h("div", { key: '1d9c6fc50758fd2b87d9a15b9983f6e944a9851e', class: "mg-c-input__input-container" }, h("div", { key: '983153a1e0d5777d11cc61af47a4231f093d7e9e', class: "mg-c-input__input" }, h("slot", { key: 'e3ae53d7484b193538c7c5ed68d02ddf3428eff4' }), this.tooltip && !this.labelOnTop && (this.tooltipPosition === 'input' || this.labelHide) && this.renderTooltip()), this.helptextMessageSlotElement && (h("div", { key: '2981238a76e52f4a9c5da6465934bb4edd653e96', class: "mg-c-input__help-text" }, h("slot", { key: 'feee3da8096260e11419b82cb2d281c8d73541d1', name: this.slotHelpText }))), !this.isDisabled && this.errorMessage && (h("div", { key: '1d5a709cfe3c9a1f7da68a260dd480f189ee5301', class: "mg-c-input__error", "aria-live": "assertive" }, h("slot", { key: '4f9f9545ffbdc7c53b77c5153daaf9b15b360fd7', name: this.slotError }))))));
+        return (h(Host, { key: '7c4c22aaa8f8d250eafa9159a103a11e637b0cca', class: this.element.classList.toString(), role: isGroup ? 'group' : undefined, "aria-labelledby": isGroup ? `${this.identifier}-title` : undefined }, h("div", { key: '2215e7b2d96e08507579a39d8e05b3e8a3d901fb', class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide } }, h("slot", { key: 'a4dbf4e36dd3ae5437d6dcb05d807f4faa0924b7', name: this.slotLabel }), this.tooltip && (this.tooltipPosition === 'label' || this.labelOnTop) && !this.labelHide && this.renderTooltip()), h("div", { key: '8e382a4857f469a9d6f77cad613183798df4d1e1', class: "mg-c-input__input-container" }, h("div", { key: 'f9897f90d44aab19614d4d40d77a8eb270c92847', class: "mg-c-input__input" }, h("slot", { key: 'c8d809d4ff0d0e660849825f016f9267da3a2d7e' }), this.tooltip && !this.labelOnTop && (this.tooltipPosition === 'input' || this.labelHide) && this.renderTooltip()), this.helptextMessageSlotElement && (h("div", { key: 'cebd6c083d088aebcdae6f032c6cdcf2387c3e27', class: "mg-c-input__help-text" }, h("slot", { key: '923fcc78b309d197e32522052b297ef0f58b1495', name: this.slotHelpText }))), !this.isDisabled && this.errorMessage && (h("div", { key: 'e706bff54ce21191a8c0940c60f6e99a91cfb9ec', class: "mg-c-input__error", "aria-live": "assertive" }, h("slot", { key: '6524debd3640df7b5e73ef4aa4415569eef1ecd8', name: this.slotError }))))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -1545,8 +1481,7 @@ const SectionKind = {
  * @param props - MgInputCheckboxList Interface Props
  * @returns input template
  */
-const MgInputCheckboxList = (props) => Array.isArray(props.checkboxes) &&
-    props.checkboxes.length > 0 && (h("ul", { class: "mg-c-input__input-group-container", role: "list", "aria-labelledby": props.labelledby, id: props.id }, props.checkboxes.map(input => {
+const MgInputCheckboxList = (props) => (h("ul", { class: "mg-c-input__input-group-container", role: "list", "aria-labelledby": props.labelledby, id: props.id }, props.checkboxes.map(input => {
     var _a, _b;
     return (h("li", { key: input._id, class: { 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': props.disabled || input.disabled } },
         h("input", { type: "checkbox", id: input._id, name: props.name, value: (_a = input.value) === null || _a === void 0 ? void 0 : _a.toString(), checked: Boolean(input.value), required: input.required, "aria-invalid": ((_b = props.invalid) === null || _b === void 0 ? void 0 : _b.toString()) || 'false', disabled: props.disabled || input.disabled, indeterminate: input.value === null, onInput: input._handleInput, onBlur: input._handleBlur, onKeyDown: input._handleKeydown }),
@@ -1567,7 +1502,7 @@ const Status = {
  */
 const sizes$1 = ['medium', 'large'];
 
-const mgInputCheckboxCss = ".mg-c-input__error-details{margin:0}.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-c-input.mg-c-input--fieldset{padding:0;border:0;margin-right:0;margin-left:0}.mg-c-input.mg-c-input--fieldset input[type=radio],.mg-c-input.mg-c-input--fieldset input[type=checkbox]{width:var(--mg-c-input-check-size);height:var(--mg-c-input-check-size);flex-shrink:0;margin:calc((var(--mg-b-font-size)*var(--mg-b-line-height) - var(--mg-c-input-check-size))/2) var(--mg-b-size-8) 0 0}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group{display:flex;align-items:start}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group-container{display:flex;flex-wrap:wrap;padding:0;margin:0;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);gap:var(--mg-b-size-12) var(--mg-b-size-24);list-style:none}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group.mg-c-input__input-group--disabled label{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--fieldset.mg-c-input--vertical-list .mg-c-input__input-group-container,.mg-c-input.mg-c-input--fieldset.mg-c-input--checkbox-multi .mg-c-input__input-group-container{flex-direction:column}.mg-c-input.mg-c-input--fieldset.mg-c-input--label-on-top .mg-c-input__input-group-container{margin-top:var(--mg-b-size-8)}.mg-c-input__popover-info{padding:var(--mg-b-size-8);margin:0;color:var(--mg-b-color-neutral-90);text-align:center}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-group-container{padding:var(--mg-b-size-4) var(--mg-b-size-8);margin:0}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-container{display:flex;width:unset;flex:unset;flex-wrap:wrap;column-gap:var(--mg-b-size-8)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-container-list{display:flex;flex-flow:row wrap;padding:0;margin:0;gap:var(--mg-b-size-4);list-style:none}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__tab{display:block;min-height:calc(var(--mg-b-size-4)*55)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__tabs{min-height:0;flex-shrink:1}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__tabs-action{padding-top:var(--mg-b-size-16);padding-bottom:var(--mg-b-size-12)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__tabs-content{height:calc(24*var(--mg-b-size-8) - 2*var(--mg-b-size-8));overflow-y:auto}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-value{display:inline-flex;min-width:var(--mg-b-size-min-height);min-height:var(--mg-b-size-min-height);box-sizing:border-box;align-items:center;justify-content:center;padding:calc((var(--mg-b-size-min-height) - 2*var(--mg-b-size-border) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-12);border-radius:var(--mg-b-size-4);background-color:var(--mg-b-color-neutral-20);font-size:var(--mg-b-font-size)}.mg-c-input.mg-c-input--checkbox-multi b{margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2)}.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--disabled .mg-c-input__input-container b{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--with-values .mg-c-input__input-container{gap:var(--mg-b-size-4)}.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--search-mode .mg-c-input__content{display:flex;width:calc(var(--mg-b-size-floating-element-max-width) - var(--mg-b-size-16));flex-direction:column;gap:var(--mg-b-size-4)}.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--search-mode .mg-c-input__content .mg-c-input__tabs-content{min-height:calc(var(--mg-b-size-4)*55)}.mg-c-input.mg-c-input--checkbox-multi:not(.mg-c-input--label-on-top) mg-tooltip:not(.mg-c-input__section-header-tootlip){margin-left:var(--mg-b-size-8)}.mg-c-input.mg-c-input--checkbox-multi mg-popover{--mg-c-card-spacing:var(--mg-b-size-8)}.mg-c-input.mg-c-input--readonly ul{display:flex;min-height:var(--mg-b-font-size);flex-flow:column wrap;padding:0;margin:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) 0 0;list-style:none;row-gap:var(--mg-b-size-8)}";
+const mgInputCheckboxCss = ".mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-c-input.mg-c-input--fieldset{padding:0;border:0;margin-right:0;margin-left:0}.mg-c-input.mg-c-input--fieldset input[type=radio],.mg-c-input.mg-c-input--fieldset input[type=checkbox]{width:var(--mg-c-input-check-size);height:var(--mg-c-input-check-size);flex-shrink:0;margin:calc((var(--mg-b-font-size)*var(--mg-b-line-height) - var(--mg-c-input-check-size))/2) var(--mg-b-size-8) 0 0}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group{display:flex;align-items:start}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group-container{display:flex;flex-wrap:wrap;padding:0;margin:0;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);gap:var(--mg-b-size-12) var(--mg-b-size-24);list-style:none}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group.mg-c-input__input-group--disabled label{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--fieldset.mg-c-input--vertical-list .mg-c-input__input-group-container,.mg-c-input.mg-c-input--fieldset.mg-c-input--checkbox-multi .mg-c-input__input-group-container{flex-direction:column}.mg-c-input.mg-c-input--fieldset.mg-c-input--label-on-top .mg-c-input__input-group-container{margin-top:var(--mg-b-size-8)}.mg-c-input__popover-info{padding:var(--mg-b-size-8);margin:0;color:var(--mg-b-color-neutral-90);text-align:center}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-group-container{padding:var(--mg-b-size-4) var(--mg-b-size-8);margin:0}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-container{display:flex;width:unset;flex:unset;flex-wrap:wrap;column-gap:var(--mg-b-size-8)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-container-list{display:flex;flex-flow:row wrap;padding:0;margin:0;gap:var(--mg-b-size-4);list-style:none}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__tab{display:block;min-height:calc(var(--mg-b-size-4)*55)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__tabs{min-height:0;flex-shrink:1}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__tabs-action{padding-top:var(--mg-b-size-16);padding-bottom:var(--mg-b-size-12)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__tabs-content{height:calc(24*var(--mg-b-size-8) - 2*var(--mg-b-size-8));overflow-y:auto}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-value{display:inline-flex;min-width:var(--mg-b-size-min-height);min-height:var(--mg-b-size-min-height);box-sizing:border-box;align-items:center;justify-content:center;padding:calc((var(--mg-b-size-min-height) - 2*var(--mg-b-size-border) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-12);border-radius:var(--mg-b-size-4);background-color:var(--mg-b-color-neutral-20);font-size:var(--mg-b-font-size)}.mg-c-input.mg-c-input--checkbox-multi b{margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2)}.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--disabled .mg-c-input__input-container b{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--with-values .mg-c-input__input-container{gap:var(--mg-b-size-4)}.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--search-mode .mg-c-input__content{display:flex;width:calc(var(--mg-b-size-floating-element-max-width) - var(--mg-b-size-16));flex-direction:column;gap:var(--mg-b-size-4)}.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--search-mode .mg-c-input__content .mg-c-input__tabs-content{min-height:calc(var(--mg-b-size-4)*55)}.mg-c-input.mg-c-input--checkbox-multi:not(.mg-c-input--label-on-top) mg-tooltip:not(.mg-c-input__section-header-tootlip){margin-left:var(--mg-b-size-8)}.mg-c-input.mg-c-input--checkbox-multi mg-popover{--mg-c-card-spacing:var(--mg-b-size-8)}.mg-c-input.mg-c-input--readonly ul{display:flex;min-height:var(--mg-b-font-size);flex-flow:column wrap;padding:0;margin:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) 0 0;list-style:none;row-gap:var(--mg-b-size-8)}";
 
 /**
  * type CheckboxItem validation function
@@ -1764,18 +1699,8 @@ const MgInputCheckbox = class {
          * Check if input is valid
          */
         this.checkValidity = () => {
-            this.setValidity(this.readonly || this.disabled || (this.hasInputValue() && !this.hasInvalidInput() && this.validateRequired()));
+            this.setValidity(this.readonly || this.disabled || (!this.hasInvalidInput() && this.validateRequired()));
         };
-        /**
-         * Test if component has items
-         * @returns truthy if component has items
-         */
-        this.hasInputValue = () => { var _a; return ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) > 0; };
-        /**
-         * Test if component has no value error message displayed
-         * @returns truthy if compent display no value error message
-         */
-        this.hasNoValueErrorMessageDisplay = () => this.errorMessage === this.messages.errors.noValue;
         /**
          * Set button text locale key
          */
@@ -1817,25 +1742,12 @@ const MgInputCheckbox = class {
             // Set error message
             this.errorMessage = undefined;
             if (displayError && !this.valid) {
-                if (errorMessage !== undefined) {
+                if (errorMessage !== undefined)
                     this.errorMessage = errorMessage;
-                }
-                else if (!this.hasInputValue()) {
-                    this.errorMessage = this.messages.errors.noValue;
-                }
-                else if (!this.validateRequired()) {
+                else if (!this.validateRequired())
                     this.errorMessage = this.messages.errors.required;
-                }
             }
         };
-        /**
-         * Reset error message
-         */
-        this.resetErrorMessage = () => {
-            this.checkValidity();
-            this.errorMessage = undefined;
-            this.hasDisplayedError = false;
-        };
         /**
          * Method to get mg-popover identifier
          * @returns MgPopover identifier
@@ -1864,14 +1776,7 @@ const MgInputCheckbox = class {
          * @returns The rendered readonly value.
          */
         this.renderReadonly = (readonlyValue) => {
-            if (Array.isArray(readonlyValue)) {
-                if (this.inputVerticalList) {
-                    return (h("ul", { class: "mg-c-input__readonly-value" }, readonlyValue.map(value => (h("li", { key: value }, h("b", null, value))))));
-                }
-                else {
-                    return h("b", { class: "mg-c-input__readonly-value" }, readonlyValue.join(', '));
-                }
-            }
+            return this.inputVerticalList ? (h("ul", { class: "mg-c-input__readonly-value" }, readonlyValue.map(value => (h("li", { key: value }, h("b", null, value)))))) : (h("b", { class: "mg-c-input__readonly-value" }, readonlyValue.join(', ')));
         };
         /**
          * Renders the MgInputCheckboxList component.
@@ -1880,16 +1785,9 @@ const MgInputCheckbox = class {
         this.renderMgInputCheckboxList = () => (h(MgInputCheckboxList, { checkboxes: this.checkboxItems, id: this.checkboxesId, disabled: this.disabled, name: this.name, invalid: this.invalid }));
     }
     validateValue(newValue) {
-        if ([null, undefined].includes(newValue) || newValue.length === 0) {
-            this.displayError();
-        }
-        else if (newValue.length > 0 && isCheckboxItems(newValue)) {
+        if (isCheckboxItems(newValue)) {
             this.checkboxItems = newValue.map((item, index) => (Object.assign(Object.assign({}, item), { _id: `${this.identifier}_${index}`, _handleInput: this.handleInput.bind(this), _handleBlur: this.handleBlur.bind(this), _handleKeydown: this.handleKeydown.bind(this) })));
             this.valueChange.emit(newValue);
-            // force to reset error when noValueError is displaied
-            if (this.invalid && this.hasNoValueErrorMessageDisplay()) {
-                this.resetErrorMessage();
-            }
         }
         else {
             throw new Error(`<mg-input-checkbox> prop "value" is required and all values must be the same type, CheckboxItem. Passed value: ${toString(newValue)}.`);
@@ -2033,7 +1931,9 @@ const MgInputCheckbox = class {
             // - Keep everything in sync both inside and outside the component
             return new Promise(resolve => {
                 requestAnimationFrame(() => {
-                    this.resetErrorMessage();
+                    this.checkValidity();
+                    this.errorMessage = undefined;
+                    this.hasDisplayedError = false;
                     resolve();
                 });
             });
@@ -2156,9 +2056,8 @@ const MgInputCheckbox = class {
      * @returns HTML Element
      */
     render() {
-        var _a;
         let inputContent;
-        const readonlyValue = ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(({ value }) => value).map(({ title }) => title);
+        const readonlyValue = this.value.filter(({ value }) => value).map(({ title }) => title);
         if (this.readonly) {
             inputContent = this.renderReadonly(readonlyValue);
         }
@@ -2168,7 +2067,7 @@ const MgInputCheckbox = class {
         else {
             inputContent = this.renderCheckboxMulti();
         }
-        return (h("mg-input", { key: '6b1a72d80387da057c0d20367e141c90ff921889', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, tooltip: this.tooltip, tooltipPosition: this.readonly && readonlyValue.length === 0 ? 'label' : this.tooltipPosition, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? defineErrorMessage(this.errorMessage, this.noValueErrorDetail) : undefined }, inputContent));
+        return (h("mg-input", { key: '84d13ac702497773013daa72357e4d1dcf4ebb30', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, tooltip: this.tooltip, tooltipPosition: this.readonly && readonlyValue.length === 0 ? 'label' : this.tooltipPosition, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined }, inputContent));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -3397,7 +3296,7 @@ const MgInputPassword = class {
 };
 MgInputPassword.style = mgInputPasswordCss;
 
-const mgInputRadioCss = ".mg-c-input__error-details{margin:0}.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-c-input.mg-c-input--fieldset{padding:0;border:0;margin-right:0;margin-left:0}.mg-c-input.mg-c-input--fieldset input[type=radio],.mg-c-input.mg-c-input--fieldset input[type=checkbox]{width:var(--mg-c-input-check-size);height:var(--mg-c-input-check-size);flex-shrink:0;margin:calc((var(--mg-b-font-size)*var(--mg-b-line-height) - var(--mg-c-input-check-size))/2) var(--mg-b-size-8) 0 0}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group{display:flex;align-items:start}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group-container{display:flex;flex-wrap:wrap;padding:0;margin:0;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);gap:var(--mg-b-size-12) var(--mg-b-size-24);list-style:none}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group.mg-c-input__input-group--disabled label{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--fieldset.mg-c-input--vertical-list .mg-c-input__input-group-container,.mg-c-input.mg-c-input--fieldset.mg-c-input--checkbox-multi .mg-c-input__input-group-container{flex-direction:column}.mg-c-input.mg-c-input--fieldset.mg-c-input--label-on-top .mg-c-input__input-group-container{margin-top:var(--mg-b-size-8)}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}";
+const mgInputRadioCss = ".mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-c-input.mg-c-input--fieldset{padding:0;border:0;margin-right:0;margin-left:0}.mg-c-input.mg-c-input--fieldset input[type=radio],.mg-c-input.mg-c-input--fieldset input[type=checkbox]{width:var(--mg-c-input-check-size);height:var(--mg-c-input-check-size);flex-shrink:0;margin:calc((var(--mg-b-font-size)*var(--mg-b-line-height) - var(--mg-c-input-check-size))/2) var(--mg-b-size-8) 0 0}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group{display:flex;align-items:start}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group-container{display:flex;flex-wrap:wrap;padding:0;margin:0;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);gap:var(--mg-b-size-12) var(--mg-b-size-24);list-style:none}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group.mg-c-input__input-group--disabled label{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--fieldset.mg-c-input--vertical-list .mg-c-input__input-group-container,.mg-c-input.mg-c-input--fieldset.mg-c-input--checkbox-multi .mg-c-input__input-group-container{flex-direction:column}.mg-c-input.mg-c-input--fieldset.mg-c-input--label-on-top .mg-c-input__input-group-container{margin-top:var(--mg-b-size-8)}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}";
 
 /**
  * type Option validation function
@@ -3474,21 +3373,11 @@ const MgInputRadio = class {
             // reset guard
             this.handlerInProgress = undefined;
         };
-        /**
-         * Test if component has items
-         * @returns truthy if component has items
-         */
-        this.hasInputValue = () => { var _a; return ((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) > 0; };
-        /**
-         * Test if component has no value error message displayed
-         * @returns truthy if compent display no value error message
-         */
-        this.hasNoValueErrorMessageDisplay = () => this.errorMessage === this.messages.errors.noValue;
         /**
          * Check if input is valid
          */
         this.checkValidity = () => {
-            this.setValidity(this.readonly || this.disabled || (this.hasInputValue() && this.getInvalidElement() === undefined));
+            this.setValidity(this.readonly || this.disabled || this.getInvalidElement() === undefined);
         };
         /**
          * Set input error message
@@ -3502,22 +3391,11 @@ const MgInputRadio = class {
                 if (errorMessage !== undefined) {
                     this.errorMessage = errorMessage;
                 }
-                else if (!this.hasInputValue()) {
-                    this.errorMessage = this.messages.errors.noValue;
-                }
                 else if (invalidElement.validity.valueMissing) {
                     this.errorMessage = this.messages.errors.required;
                 }
             }
         };
-        /**
-         * Reset error message
-         */
-        this.resetErrorMessage = () => {
-            this.checkValidity();
-            this.errorMessage = undefined;
-            this.hasDisplayedError = false;
-        };
         /**
          * get invalid element
          * @returns element
@@ -3539,29 +3417,17 @@ const MgInputRadio = class {
         this.valueChange.emit(newValue);
     }
     validateItems(newValue) {
-        if ([undefined, null].includes(newValue) || (Array.isArray(newValue) && newValue.length === 0)) {
-            this.options = [];
-            this.displayError();
-        }
         // Validate if items have required min length
-        else if (Array.isArray(newValue) && newValue.length < 2) {
+        if (typeof newValue === 'object' && newValue.length < 2) {
             throw new Error(`<mg-input-radio> prop "items" require at least 2 items. Passed value: ${toString(newValue)}.`);
         }
         // String array
         else if (allItemsAreString(newValue)) {
             this.options = newValue.map(item => ({ title: item, value: item, disabled: this.disabled }));
-            // force to reset error when noValueError is displaied
-            if (this.invalid && this.hasNoValueErrorMessageDisplay()) {
-                this.resetErrorMessage();
-            }
         }
         // Object array
-        else if (Array.isArray(newValue) && newValue.every(isOption$3)) {
+        else if (newValue && newValue.every(item => isOption$3(item))) {
             this.options = newValue;
-            // force to reset error when noValueError is displaied
-            if (this.invalid && this.hasNoValueErrorMessageDisplay()) {
-                this.resetErrorMessage();
-            }
         }
         else {
             throw new Error(`<mg-input-radio> prop "items" is required and all items must be the same type, string or RadioOption. Passed value: ${toString(newValue)}.`);
@@ -3657,7 +3523,9 @@ const MgInputRadio = class {
             // - Keep everything in sync both inside and outside the component
             return new Promise(resolve => {
                 requestAnimationFrame(() => {
-                    this.resetErrorMessage();
+                    this.checkValidity();
+                    this.errorMessage = undefined;
+                    this.hasDisplayedError = false;
                     resolve();
                 });
             });
@@ -3703,12 +3571,10 @@ const MgInputRadio = class {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: 'ecb4efa3a4ccfae5ff56c4a304158c7a03c73153', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && !this.value ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: defineErrorMessage(this.errorMessage, this.noValueErrorDetail) }, this.readonly
-            ? this.readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue)
-            : this.options.length > 0 && (h("ul", { class: "mg-c-input__input-group-container", role: "list" }, this.options.map((input, index) => (h("li", { key: input.title, class: { 'mg-c-input__input-group': true, 'mg-c-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))))))));
+        return (h("mg-input", { key: '048aa732e7f8593701c9397e571b97584bc5e37b', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && !this.value ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue)) : (h("ul", { class: "mg-c-input__input-group-container", role: "list" }, this.options.map((input, index) => (h("li", { key: input.title, class: { 'mg-c-input__input-group': true, 'mg-c-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))))))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -3722,7 +3588,7 @@ const MgInputRadio = class {
 };
 MgInputRadio.style = mgInputRadioCss;
 
-const mgInputSelectCss = ".mg-c-input__error-details{margin:0}.mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input.mg-c-input--has-icon .mg-c-input__with-character-left>mg-icon:first-of-type,.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container>mg-icon:first-of-type{position:absolute;top:50%;left:var(--mg-b-size-8);color:var(--mg-c-input-color-icon);transform:translateY(-50%)}.mg-c-input.mg-c-input--has-icon .mg-c-input__with-character-left .mg-c-input__box,.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container .mg-c-input__box{padding-left:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2)}.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-c-input__input-container{width:100%;flex:1 auto}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left,.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left,.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left{width:max-content}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left:has(textarea),.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left:has(textarea),.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left:has(textarea){flex-grow:inherit}.mg-c-input.mg-c-input--width-2 .mg-c-input__box{width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(var(--mg-b-size-48) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-4 .mg-c-input__box{width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(var(--mg-b-size-72) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-16 .mg-c-input__box{width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(calc(26 * var(--mg-b-size-8)) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(*:not(mg-input-title)){width:100%;max-width:100%}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}.mg-c-input__box{padding-top:0;padding-right:var(--mg-b-size-8);padding-bottom:0}@media screen and (max-width: 767px){.mg-c-input__box{width:100%}}";
+const mgInputSelectCss = ".mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input.mg-c-input--has-icon .mg-c-input__with-character-left>mg-icon:first-of-type,.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container>mg-icon:first-of-type{position:absolute;top:50%;left:var(--mg-b-size-8);color:var(--mg-c-input-color-icon);transform:translateY(-50%)}.mg-c-input.mg-c-input--has-icon .mg-c-input__with-character-left .mg-c-input__box,.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container .mg-c-input__box{padding-left:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2)}.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-c-input__input-container{width:100%;flex:1 auto}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left,.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left,.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left{width:max-content}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left:has(textarea),.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left:has(textarea),.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left:has(textarea){flex-grow:inherit}.mg-c-input.mg-c-input--width-2 .mg-c-input__box{width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(var(--mg-b-size-48) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-4 .mg-c-input__box{width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(var(--mg-b-size-72) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-16 .mg-c-input__box{width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(calc(26 * var(--mg-b-size-8)) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(*:not(mg-input-title)){width:100%;max-width:100%}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}.mg-c-input__box{padding-top:0;padding-right:var(--mg-b-size-8);padding-bottom:0}@media screen and (max-width: 767px){.mg-c-input__box{width:100%}}";
 
 /**
  * Check if item is a well configured option
@@ -3858,16 +3724,6 @@ const MgInputSelect = class {
          * @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); };
-        /**
-         * Test if component has items
-         * @returns truthy if component has items
-         */
-        this.hasInputValue = () => { var _a; return ((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) > 0; };
-        /**
-         * Test if component has no value error message displayed
-         * @returns truthy if compent display no value error message
-         */
-        this.hasNoValueErrorMessageDisplay = () => this.errorMessage === this.messages.errors.noValue;
         /**
          * Handle blur event
          */
@@ -3887,7 +3743,7 @@ const MgInputSelect = class {
          * Check if input is valid
          */
         this.checkValidity = () => {
-            this.setValidity(!this.isDisabledValue() && (this.readonly || this.disabled || (this.hasInputValue() && this.input.checkValidity())));
+            this.setValidity(!this.isDisabledValue() && (this.readonly || this.disabled || this.input.checkValidity()));
         };
         /**
          * Set input error message
@@ -3900,22 +3756,11 @@ const MgInputSelect = class {
                 if (errorMessage !== undefined) {
                     this.errorMessage = errorMessage;
                 }
-                else if (!this.hasInputValue()) {
-                    this.errorMessage = this.messages.errors.noValue;
-                }
                 else if (this.input.validity.valueMissing) {
                     this.errorMessage = this.messages.errors.required;
                 }
             }
         };
-        /**
-         * Reset error message
-         */
-        this.resetErrorMessage = () => {
-            this.checkValidity();
-            this.errorMessage = undefined;
-            this.hasDisplayedError = false;
-        };
         /**
          * Render option
          * @param option - to render
@@ -3933,11 +3778,9 @@ const MgInputSelect = class {
         this.valueChange.emit(newValue);
     }
     validateItems(newValue) {
-        let resetMessage = false;
         // Empty options
-        if ([undefined, null].includes(newValue) || (Array.isArray(newValue) && newValue.length === 0)) {
+        if (newValue.length === 0) {
             this.options = [];
-            this.displayError();
         }
         // String array
         else if (allItemsAreString(newValue)) {
@@ -3945,8 +3788,6 @@ const MgInputSelect = class {
                 this.valueExist = newValue.includes(this.value);
             }
             this.options = newValue.map(item => ({ title: item, value: item }));
-            // force to reset error when noValueError is displaied
-            resetMessage = this.invalid && this.hasNoValueErrorMessageDisplay();
         }
         // Object array
         else if (allItemsAreOptions(newValue)) {
@@ -3959,15 +3800,10 @@ const MgInputSelect = class {
             else {
                 this.options = newValue;
             }
-            // force to reset error when noValueError is displaied
-            resetMessage = this.invalid && this.hasNoValueErrorMessageDisplay();
         }
         else {
             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. Passed value: ${toString(newValue)}.`);
         }
-        if (resetMessage) {
-            this.resetErrorMessage();
-        }
     }
     watchReadonly(newValue) {
         if (newValue)
@@ -4061,7 +3897,9 @@ const MgInputSelect = class {
             // - Keep everything in sync both inside and outside the component
             return new Promise(resolve => {
                 requestAnimationFrame(() => {
-                    this.resetErrorMessage();
+                    this.checkValidity();
+                    this.errorMessage = undefined;
+                    this.hasDisplayedError = false;
                     resolve();
                 });
             });
@@ -4113,7 +3951,7 @@ const MgInputSelect = class {
      */
     render() {
         const readonlyValue = this.getReadonlyValue();
-        return (h("mg-input", { key: 'b980e7e5bd2e1eac6e0075e61f3a6d8ab993216a', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && readonlyValue === null ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: defineErrorMessage(this.errorMessage, this.noValueErrorDetail) }, this.readonly ? (readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, readonlyValue)) : (h("select", { class: "mg-c-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled || !this.hasInputValue(), required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
+        return (h("mg-input", { key: '1394827503d3f2dd71efc6efa389ac707573d2ec', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && readonlyValue === null ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, readonlyValue)) : (h("select", { class: "mg-c-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), 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
@@ -4900,7 +4738,7 @@ const MgInputTitle = class {
 };
 MgInputTitle.style = mgInputTitleCss;
 
-const mgInputToggleCss = ".mg-c-input__error-details{margin:0}.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}.mg-c-input__toggle-item-container{overflow:hidden;box-sizing:border-box;padding:var(--mg-b-size-4) var(--mg-b-size-8);border:0;border-radius:calc((var(--mg-b-font-size)*var(--mg-b-line-height) + 2*var(--mg-b-size-4))/var(--mg-c-input-toggle-border-radius-ratio));background-color:unset;color:var(--mg-b-color-dark);font-weight:unset;text-overflow:ellipsis;white-space:nowrap}.mg-c-input__toggle-item-container:first-of-type{background-color:color-mix(in srgb, var(--mg-b-color-app), white 80%);color:var(--mg-b-color-app);font-weight:600}.mg-c-input__button-toggle{display:flex;min-width:0;padding:var(--mg-b-size-4);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:calc((var(--mg-b-font-size)*var(--mg-b-line-height) + 2*(var(--mg-b-size-4) + var(--mg-b-size-4) + var(--mg-c-input-border-width)))/var(--mg-c-input-toggle-border-radius-ratio));background-color:var(--mg-b-color-light);cursor:pointer;font-family:var(--mg-b-font-family);font-size:inherit;line-height:inherit}.mg-c-input__button-toggle:disabled{cursor:default}.mg-c-input.mg-c-input--toggle .mg-c-input__input-container{min-width:0;flex:auto}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{background-color:unset;color:var(--mg-b-color-dark);font-weight:unset}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{background-color:color-mix(in srgb, var(--mg-b-color-app), white 80%);color:var(--mg-b-color-info);font-weight:600}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container{display:flex;width:calc(var(--mg-b-font-size)*var(--mg-b-line-height) + 2*var(--mg-b-size-4));height:calc(var(--mg-b-font-size)*var(--mg-b-line-height) + 2*var(--mg-b-size-4));align-items:center;justify-content:center;padding:0;visibility:hidden}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container:first-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container ::slotted(mg-icon){display:flex}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{visibility:hidden}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-on-off .mg-c-input__toggle-item-container:first-of-type{background-color:var(--mg-b-color-neutral-30);color:var(--mg-b-color-dark);font-weight:600}.mg-c-input.mg-c-input--toggle-on-off.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{background-color:unset;color:var(--mg-b-color-dark);font-weight:unset}";
+const mgInputToggleCss = ".mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}.mg-c-input__toggle-item-container{overflow:hidden;box-sizing:border-box;padding:var(--mg-b-size-4) var(--mg-b-size-8);border:0;border-radius:calc((var(--mg-b-font-size)*var(--mg-b-line-height) + 2*var(--mg-b-size-4))/var(--mg-c-input-toggle-border-radius-ratio));background-color:unset;color:var(--mg-b-color-dark);font-weight:unset;text-overflow:ellipsis;white-space:nowrap}.mg-c-input__toggle-item-container:first-of-type{background-color:color-mix(in srgb, var(--mg-b-color-app), white 80%);color:var(--mg-b-color-app);font-weight:600}.mg-c-input__button-toggle{display:flex;min-width:0;padding:var(--mg-b-size-4);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:calc((var(--mg-b-font-size)*var(--mg-b-line-height) + 2*(var(--mg-b-size-4) + var(--mg-b-size-4) + var(--mg-c-input-border-width)))/var(--mg-c-input-toggle-border-radius-ratio));background-color:var(--mg-b-color-light);cursor:pointer;font-family:var(--mg-b-font-family);font-size:inherit;line-height:inherit}.mg-c-input__button-toggle:disabled{cursor:default}.mg-c-input.mg-c-input--toggle .mg-c-input__input-container{min-width:0;flex:auto}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{background-color:unset;color:var(--mg-b-color-dark);font-weight:unset}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{background-color:color-mix(in srgb, var(--mg-b-color-app), white 80%);color:var(--mg-b-color-info);font-weight:600}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container{display:flex;width:calc(var(--mg-b-font-size)*var(--mg-b-line-height) + 2*var(--mg-b-size-4));height:calc(var(--mg-b-font-size)*var(--mg-b-line-height) + 2*var(--mg-b-size-4));align-items:center;justify-content:center;padding:0;visibility:hidden}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container:first-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container ::slotted(mg-icon){display:flex}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{visibility:hidden}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-on-off .mg-c-input__toggle-item-container:first-of-type{background-color:var(--mg-b-color-neutral-30);color:var(--mg-b-color-dark);font-weight:600}.mg-c-input.mg-c-input--toggle-on-off.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{background-color:unset;color:var(--mg-b-color-dark);font-weight:unset}";
 
 /**
  * type Option validation function
@@ -4958,29 +4796,6 @@ const MgInputToggle = class {
          * Checked internal value
          */
         this.checked = false;
-        /**
-         * Check if input is valid
-         */
-        this.checkValidity = () => {
-            this.setValidity(this.readonly || this.disabled || this.hasInputItems());
-        };
-        /**
-         * Reset error message
-         */
-        this.resetErrorMessage = () => {
-            this.checkValidity();
-            this.errorMessage = undefined;
-        };
-        /**
-         * Test if component has items
-         * @returns truthy if component has items
-         */
-        this.hasInputItems = () => { var _a; return ((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) > 0; };
-        /**
-         * Test if component has no value error message displayed
-         * @returns truthy if compent display no value error message
-         */
-        this.hasNoValueErrorMessageDisplay = () => this.errorMessage === this.messages.errors.noValue;
         /**
          * Set input error message
          * @param errorMessage - errorMessage override
@@ -4989,13 +4804,8 @@ const MgInputToggle = class {
             // Set error message
             this.errorMessage = undefined;
             // Does have a custom error message
-            if (!this.valid) {
-                if (errorMessage !== undefined) {
-                    this.errorMessage = errorMessage;
-                }
-                else if (!this.hasInputItems()) {
-                    this.errorMessage = this.messages.errors.noValue;
-                }
+            if (!this.valid && errorMessage !== undefined) {
+                this.errorMessage = errorMessage;
             }
         };
         /**
@@ -5010,7 +4820,7 @@ const MgInputToggle = class {
         this.validateSlots = () => {
             const slots = Array.from(this.element.children);
             if (slots.length !== 2) {
-                console.error('<mg-input-toggle> 2 slots are required.');
+                throw new Error('<mg-input-toggle> 2 slots are required.');
             }
             else if (!this.isIcon) {
                 // Due to text-overflow set to ellipsis
@@ -5041,28 +4851,16 @@ const MgInputToggle = class {
         this.valueChange.emit(newValue);
     }
     validateItems(newValue) {
-        if ([undefined, null].includes(newValue) || (Array.isArray(newValue) && newValue.length === 0)) {
-            this.options = [];
-            this.displayError();
-        }
-        else if (Array.isArray(newValue) && this.items.length !== 2) {
+        if (typeof newValue === 'object' && this.items.length !== 2) {
             throw new Error(`<mg-input-toggle> prop "items" require 2 items. Passed value: ${toString(newValue)}.`);
         }
         // String array
         else if (allItemsAreString(newValue)) {
             this.options = newValue.map(item => ({ title: item, value: item }));
-            // force to reset error when noValueError is displaied
-            if (this.invalid && this.hasNoValueErrorMessageDisplay()) {
-                this.resetErrorMessage();
-            }
         }
         // Object array
         else if (Array.isArray(newValue) && newValue.every(isOption)) {
             this.options = newValue;
-            // force to reset error when noValueError is displaied
-            if (this.invalid && this.hasNoValueErrorMessageDisplay()) {
-                this.resetErrorMessage();
-            }
         }
         else {
             throw new Error(`<mg-input-toggle> prop "items" is required and all items must be the same type: ToggleValue. Passed value: ${toString(newValue)}.`);
@@ -5124,7 +4922,8 @@ const MgInputToggle = class {
             throw new Error('<mg-input-toggle> method "setError()" param "errorMessage" must be a string.');
         }
         else {
-            this.setValidity(valid);
+            this.valid = valid;
+            this.inputValid.emit(valid);
             this.setErrorMessage(valid ? undefined : errorMessage);
         }
     }
@@ -5143,43 +4942,12 @@ const MgInputToggle = class {
             // - Keep everything in sync both inside and outside the component
             return new Promise(resolve => {
                 requestAnimationFrame(() => {
-                    this.resetErrorMessage();
+                    this.errorMessage = undefined;
                     resolve();
                 });
             });
         }
     }
-    /**
-     * Display input error if it exists.
-     */
-    displayError() {
-        // Use `Promise` as requested for stencil method
-        // Use `requestAnimationFrame` to ensure:
-        // - DOM is fully updated before validation
-        // - Async operations are completed
-        // - No timing issues with Stencil's render cycle
-        // - Keep everything in sync both inside and outside the component
-        return new Promise(resolve => {
-            requestAnimationFrame(() => {
-                this.checkValidity();
-                this.setErrorMessage();
-                resolve();
-            });
-        });
-    }
-    /**
-     * Method to set validity values
-     * @param newValue - valid new value
-     */
-    setValidity(newValue) {
-        const oldValidValue = this.valid;
-        this.valid = newValue;
-        this.invalid = !this.valid;
-        // We need to send valid event even if it is the same value
-        if (this.valid !== oldValidValue) {
-            this.inputValid.emit(this.valid);
-        }
-    }
     /**
      * set checked state
      */
@@ -5198,9 +4966,6 @@ const MgInputToggle = class {
             const selectedValue = this.value === this.options[optionTrueValueIndex].value;
             this.checked = optionTrueValueIndex === 0 ? !selectedValue : selectedValue;
         }
-        else if (Array.isArray(this.options) && this.options.length === 0) {
-            return;
-        }
         else {
             this.checked = this.value === this.options[1].value;
         }
@@ -5212,8 +4977,6 @@ const MgInputToggle = class {
      * Check if component props are well configured on init
      */
     componentWillLoad() {
-        // Get locales
-        this.messages = initLocales(this.element).messages;
         // Check items format
         this.validateItems(this.items);
         // Check slots
@@ -5232,7 +4995,7 @@ const MgInputToggle = class {
      */
     render() {
         const checkedItem = this.getCheckedItem(this.checked);
-        return (h("mg-input", { key: 'a17e505f60d3c7e37f18db5d5c94e8d4a03b3949', label: this.label, helpText: this.helpText, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, errorMessage: defineErrorMessage(this.errorMessage, this.noValueErrorDetail) }, this.readonly ? (checkedItem && h("b", { class: "mg-c-input__readonly-value" }, checkedItem.title)) : (h("button", { type: "button", role: "switch", "aria-checked": this.checked.toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-c-input__button-toggle", disabled: this.disabled || this.readonly || !this.hasInputItems(), onClick: this.toggleChecked, ref: el => {
+        return (h("mg-input", { key: '7611cffaf1c01e30c3fa7a27555f94ab357dd374', label: this.label, helpText: this.helpText, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, errorMessage: this.errorMessage }, this.readonly ? (checkedItem && h("b", { class: "mg-c-input__readonly-value" }, checkedItem.title)) : (h("button", { type: "button", role: "switch", "aria-checked": this.checked.toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-c-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.toggleChecked, ref: el => {
                 if (el !== null)
                     this.button = el;
             } }, h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-1" })), h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-2" }))))));
@@ -6365,7 +6128,7 @@ const expandToggleDisplays = ['text', 'icon'];
  */
 const titlePositions = ['left', 'right'];
 
-const mgPanelCss = "/*!\n * @prop --mg-c-panel-border-radius: Defines the border radius of the panel. Default value: `--mg-b-size-radius`.\n * @prop --mg-c-panel-color-background: Defines the background of the panel.\n * @prop --mg-c-panel-box-shadow: Defines the box shadow of the panel. Default value: `--mg-b-box-shadow`.\n * @prop --mg-c-panel-content-spacing: Defines the padding of the panel content. Default value: `--mg-b-size-16`.\n */:host{--mg-c-card-border:none;--mg-c-card-spacing:0;--mg-c-card-border-radius:var(--mg-c-panel-border-radius);--mg-c-card-color-background:var(--mg-c-panel-color-background);--mg-c-card-box-shadow:var(--mg-c-panel-box-shadow)}.mg-c-panel__header{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;padding:0 var(--mg-b-size-4)}.mg-c-panel__header-title,.mg-c-panel__header-content{display:flex;margin:var(--mg-b-size-4) 0}.mg-c-panel__header-content{min-height:var(--mg-b-size-min-height);flex:1 auto;align-items:center;padding-left:var(--mg-b-size-4)}.mg-c-panel__header-title mg-input-text{flex-grow:1;margin-left:var(--mg-b-size-4)}.mg-c-panel__header-title mg-button+mg-button:not([slot=append-input]){margin-left:var(--mg-b-size-4)}.mg-c-panel__header-title.mg-c-panel__header-title--full{flex:1 1 auto}.mg-c-panel__collapse-button-content{--mg-b-font-size:var(--mg-b-font-size-h5);--mg-c-button-font-weight:600}.mg-c-panel__collapse-button-icon.mg-c-panel__collapse-button-icon--reverse{transform:rotate(180deg)}.mg-c-panel__content{padding:var(--mg-c-panel-content-spacing)}.mg-c-panel ::slotted([slot=header-right]){display:flex;flex-wrap:wrap;margin-left:auto;gap:var(--mg-b-spacing-actions)}.mg-c-panel ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border:var(--mg-c-card-border-default);--mg-c-card-spacing:var(--mg-c-card-spacing-default);--mg-c-card-border-radius:var(--mg-c-card-border-radius-default);--mg-c-card-color-background:var(--mg-c-card-color-background-default);--mg-c-card-box-shadow:var(--mg-c-card-box-shadow-default);--mg-c-card-max-width:unset;--mg-c-card-min-width:unset}";
+const mgPanelCss = "/*!\n * @prop --mg-c-panel-border-radius: Defines the border radius of the panel. Default value: `--mg-b-size-radius`.\n * @prop --mg-c-panel-color-background: Defines the background of the panel.\n * @prop --mg-c-panel-box-shadow: Defines the box shadow of the panel. Default value: `--mg-b-box-shadow`.\n * @prop --mg-c-panel-content-spacing: Defines the padding of the panel content. Default value: `--mg-b-size-16`.\n */:host{--mg-c-card-spacing:0;--mg-c-card-border-radius:var(--mg-c-panel-border-radius);--mg-c-card-color-background:var(--mg-c-panel-color-background);--mg-c-card-box-shadow:var(--mg-c-panel-box-shadow)}.mg-c-panel__header{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;padding:0 var(--mg-b-size-4)}.mg-c-panel__header-title,.mg-c-panel__header-content{display:flex;margin:var(--mg-b-size-4) 0}.mg-c-panel__header-content{min-height:var(--mg-b-size-min-height);flex:1 auto;align-items:center;padding-left:var(--mg-b-size-4)}.mg-c-panel__header-title mg-input-text{flex-grow:1;margin-left:var(--mg-b-size-4)}.mg-c-panel__header-title mg-button+mg-button:not([slot=append-input]){margin-left:var(--mg-b-size-4)}.mg-c-panel__header-title.mg-c-panel__header-title--full{flex:1 1 auto}.mg-c-panel__collapse-button-content{--mg-b-font-size:var(--mg-b-font-size-h5);--mg-c-button-font-weight:600}.mg-c-panel__collapse-button-icon.mg-c-panel__collapse-button-icon--reverse{transform:rotate(180deg)}.mg-c-panel__content{padding:var(--mg-c-panel-content-spacing)}.mg-c-panel ::slotted([slot=header-right]){display:flex;flex-wrap:wrap;margin-left:auto;gap:var(--mg-b-spacing-actions)}.mg-c-panel ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border:var(--mg-c-card-border-default);--mg-c-card-spacing:var(--mg-c-card-spacing-default);--mg-c-card-border-radius:var(--mg-c-card-border-radius-default);--mg-c-card-color-background:var(--mg-c-card-color-background-default);--mg-c-card-box-shadow:var(--mg-c-card-box-shadow-default);--mg-c-card-max-width:unset;--mg-c-card-min-width:unset}";
 
 const MgPanel = class {
     constructor(hostRef) {