@mgdis/mg-components 6.27.0 → 6.28.0

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

@@ -395,6 +395,88 @@ const MgButton = class {
                 (_b = this.element.querySelector('mg-icon')) === null || _b === void 0 ? void 0 : _b.setAttribute('size', this.size);
             }
         };
+        /**
+         * Submit a native form the way a native submit button does
+         * @param form - the form to submit
+         */
+        this.dispatchSubmit = (form) => {
+            form.dispatchEvent(new SubmitEvent('submit', { bubbles: true, cancelable: true }));
+        };
+        /**
+         * Wrap a `mg-form` in the actions its public API offers, so nothing reaches into its shadow DOM
+         * @param mgForm - the owning mg-form
+         * @returns its submit and reset actions
+         */
+        this.mgFormActions = (mgForm) => ({
+            submit: () => mgForm.requestSubmit(),
+            reset: () => mgForm.reset(),
+        });
+        /**
+         * Wrap a native form in the same actions
+         * @param form - the owning form
+         * @returns its submit and reset actions
+         */
+        this.nativeFormActions = (form) => ({
+            submit: () => this.dispatchSubmit(form),
+            reset: () => form.reset(),
+        });
+        /**
+         * Resolve the form the `form` id points to. An id reference does not cross a shadow boundary, so
+         * it resolves in the tree the button belongs to — the document, or the shadow tree it sits in —
+         * the way a native form owner does. The ancestor wins when it is the one pointed at: two forms
+         * can share an identifier, and a tree-wide lookup would retain the first one.
+         * @returns the actions of the form holding that id, or null when none does
+         */
+        this.resolveOwnerById = () => {
+            const ancestorMgForm = this.element.closest('mg-form');
+            if (ancestorMgForm !== null && ancestorMgForm.identifier === this.form)
+                return this.mgFormActions(ancestorMgForm);
+            const root = this.element.getRootNode();
+            const tree = root instanceof ShadowRoot ? root : this.element.ownerDocument;
+            const mgForm = Array.from(tree.querySelectorAll('mg-form')).find((element) => element.identifier === this.form);
+            if (mgForm !== undefined)
+                return this.mgFormActions(mgForm);
+            // Resolved by id, as a native form owner is, rather than through a selector an id could break
+            const nativeForm = tree.getElementById(this.form);
+            return nativeForm instanceof HTMLFormElement ? this.nativeFormActions(nativeForm) : null;
+        };
+        /**
+         * Resolve the form owning this button: an explicit `form` id overrides the ancestor form, and an
+         * id matching nothing logs then falls back on it, so a button never loses an association it had.
+         * @returns the owning form actions, or null when the button has no form owner
+         */
+        this.resolveFormOwner = () => {
+            if (index$1.isValidString(this.form)) {
+                const ownerById = this.resolveOwnerById();
+                if (ownerById !== null)
+                    return ownerById;
+                console.error(`<mg-button> prop "form" matches no form in the button tree. Passed value: ${index$1.toString(this.form)}.`);
+            }
+            const nativeAncestor = this.element.closest('form');
+            if (nativeAncestor !== null)
+                return this.nativeFormActions(nativeAncestor);
+            const mgAncestor = this.element.closest('mg-form');
+            return mgAncestor === null ? null : this.mgFormActions(mgAncestor);
+        };
+        /**
+         * Act on the owning form. The owner is resolved here rather than on load because a native form
+         * owner is re-resolved on every submission, never captured once: the button follows a `form`
+         * changed after render, and no longer races the target form hydration.
+         */
+        this.handleFormClick = () => {
+            const isSubmit = ['submit', undefined].includes(this.type);
+            // A reset only fires from an explicit association: it has never reset a merely ancestor form
+            const isReset = this.type === 'reset' && index$1.isValidString(this.form);
+            if (!isSubmit && !isReset)
+                return;
+            const owner = this.resolveFormOwner();
+            if (owner === null)
+                return;
+            if (isSubmit)
+                owner.submit();
+            else
+                owner.reset();
+        };
     }
     validateVariant(newValue, oldValue) {
         // validate new value
@@ -493,16 +575,7 @@ const MgButton = class {
      * Add listners
      */
     componentDidLoad() {
-        index$1.nextTick(() => {
-            var _a;
-            const closestForm = this.element.closest('form') || ((_a = this.element.closest('mg-form')) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('form'));
-            // submit buttons should trigger form submition;
-            if (closestForm && ['submit', undefined].includes(this.type)) {
-                this.element.addEventListener('click', () => {
-                    closestForm.dispatchEvent(new SubmitEvent('submit', { bubbles: true, cancelable: true }));
-                });
-            }
-        });
+        this.element.addEventListener('click', this.handleFormClick);
     }
     /**
      * Render component
@@ -510,7 +583,7 @@ const MgButton = class {
      */
     render() {
         var _a;
-        return (index.h(index.Host, { key: '9efa9dbbcdb2965cb8fd301c86988d0b0d97b474', role: "button", tabIndex: this.element.getAttribute('tabindex') || 0, type: this.type, form: this.form, "full-width": this.fullWidth, "aria-label": this.label, "aria-disabled": (_a = this.disabled) === null || _a === void 0 ? void 0 : _a.toString(), onClick: this.handleClick, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown }, index.h("div", { key: '36918b5b208a9e0a9650107f4418cac35ade1ed2', class: this.classCollection.join() }, this.loading && index.h("mg-icon", { key: '8ad3e911d273f69441f2a405f8040cc685a0a486', icon: "loader", spin: true }), index.h("div", { key: 'a6b199c669ef6b15bfc345c98192290ce11e65cb', class: "mg-c-button__content" }, index.h("slot", { key: 'b13d317001dbf66c945cdf9e97c06338ce073c12' })))));
+        return (index.h(index.Host, { key: '815bedd3729c652a5faf06c3d451cbc67123ab63', role: "button", tabIndex: this.element.getAttribute('tabindex') || 0, type: this.type, form: this.form, "full-width": this.fullWidth, "aria-label": this.label, "aria-disabled": (_a = this.disabled) === null || _a === void 0 ? void 0 : _a.toString(), onClick: this.handleClick, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown }, index.h("div", { key: '2a1c20c677294870958f01c4042e8f530bf0f89d', class: this.classCollection.join() }, this.loading && index.h("mg-icon", { key: 'db3960249deed458f86bcba16b66bbeb9aac69c1', icon: "loader", spin: true }), index.h("div", { key: '76a3af6c9a105b91b7f6055cc19bbb6f315be1a5', class: "mg-c-button__content" }, index.h("slot", { key: 'ca87921b6c58fbd055a83ea28f5ce58a618f16fe' })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -998,6 +1071,38 @@ const MgForm = class {
             this.formReset.emit(true);
         }
     }
+    /**
+     * Request the form submission: emit `form-submit`, whatever the inputs validity.
+     * This is what a `mg-button` associated with this form goes through, so that reaching the form
+     * needs no access to its shadow DOM. Unlike the native `requestSubmit()`, it runs no constraint
+     * validation: validity is the consumer's call here, as it is on submission from a nested button.
+     * Read `invalid`, or call `displayError()` / `focusFirstInvalidInput()`.
+     * Unlike `reset()`, a readonly form still submits: readonly fields do not block a native
+     * submission either, and a nested button has always submitted such a form.
+     */
+    async requestSubmit() {
+        this.formSubmit.emit();
+    }
+    /**
+     * **Experimental.** The signature may still change in a minor release.
+     *
+     * Display errors, then focus and scroll to the first invalid input. Focusing is what
+     * carries the information for assistive technologies, a scroll announces nothing.
+     * Read the `invalid` property to know whether the form had an invalid input.
+     */
+    async focusFirstInvalidInput() {
+        if (!this.readonly) {
+            await this.displayError();
+            // Inputs defer their displayError() to a requestAnimationFrame
+            await new Promise((resolve) => requestAnimationFrame(resolve));
+            // Read at call time: a MutationObserver rebuilds the list on content change
+            const firstInvalidInput = this.mgInputs.find((input) => input.invalid);
+            if (firstInvalidInput !== undefined) {
+                await firstInvalidInput.setFocus();
+                firstInvalidInput.scrollIntoView();
+            }
+        }
+    }
     /*************
      * Lifecycle *
      *************/
@@ -1016,13 +1121,13 @@ const MgForm = class {
         this.hasActions = this.element.querySelector('[slot="actions"]') !== null;
         // Get slotted mgButtons
         this.mgButtons = Array.from(this.element.querySelectorAll('mg-button'));
-        // Set button form identifier
+        // Announce the association: a slotted button then drives this form through its public API and
+        // handles its own submit and reset, which is why none is wired here. An id it already carries
+        // wins, read as property and attribute since frameworks pass the prop as one or the other.
         this.mgButtons.forEach((mgButton) => {
-            mgButton.setAttribute('form', this.identifier);
-            if (mgButton.type === 'reset') {
-                mgButton.addEventListener('click', () => {
-                    this.reset();
-                });
+            var _a;
+            if (!index$1.isValidString((_a = mgButton.form) !== null && _a !== void 0 ? _a : mgButton.getAttribute('form'))) {
+                mgButton.setAttribute('form', this.identifier);
             }
         });
         // Set mgInputs
@@ -1057,7 +1162,7 @@ const MgForm = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("form", { key: 'c851e6f19af32f28cad695daa1f42ddff10796a0', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && index.h("p", { key: '7f92b35872c938e87959acac8841937ad503d98f', innerHTML: this.requiredMessageText }), index.h("slot", { key: 'e75e90f1fe3076d93df82a7a426b17d82035e0cf' }), !this.readonly && !this.disabled && this.hasActions && (index.h("div", { key: 'a472cf024a61d6be1665d149749ce7d560a00473', class: "mg-c-form__actions" }, index.h("slot", { key: 'f9098c711cb2d2714057c4f14d6df295b75de774', name: "actions" })))));
+        return (index.h("form", { key: '0c23474cba5ae38a70162129641128cdd17224cb', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && index.h("p", { key: '8938192d2b2f4d1278f6e5037ed7f0f839c44861', innerHTML: this.requiredMessageText }), index.h("slot", { key: 'aefbcb13adbe2632b958c55c2c2c0174d5aaf471' }), !this.readonly && !this.disabled && this.hasActions && (index.h("div", { key: '30675225f5a910945f5b31fb044d3501c323acf9', class: "mg-c-form__actions" }, index.h("slot", { key: '6f5b871264d0237fc1eccfac5c454e61135b81c4', name: "actions" })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -1936,6 +2041,8 @@ const MgInputCheckbox = class {
         this.inputValid = index.createEvent(this, "input-valid", 7);
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
+        // raised when `value` changed, so componentDidUpdate revalidates once the DOM is in sync
+        this.validityCheckPending = false;
         this.customErrorMessage = { lock: false };
         this.mode = 'custom';
         // style
@@ -2218,6 +2325,7 @@ const MgInputCheckbox = class {
         this.renderMgInputCheckboxList = () => (index.h(MgInputCheckboxList, { checkboxes: this.checkboxItems, id: this.checkboxesId, disabled: this.disabled, name: this.name, invalid: this.invalid }));
     }
     validateValue(newValue) {
+        this.validityCheckPending = true;
         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);
@@ -2350,6 +2458,8 @@ const MgInputCheckbox = class {
                 lock: valid ? false : errorMessageLock,
                 message: valid ? undefined : errorMessage,
             };
+            // setError() states the validity explicitly, so drop any pending recomputation
+            this.validityCheckPending = false;
             this.setValidity(valid);
             this.setErrorMessage(true);
             this.hasDisplayedError = this.invalid;
@@ -2432,8 +2542,26 @@ const MgInputCheckbox = class {
         // https://stenciljs.com/docs/component-lifecycle#componentwillload
         return setTimeout(() => {
             this.checkValidity();
+            // the initial check covers the initial value: nothing is pending yet
+            this.validityCheckPending = false;
         }, 0);
     }
+    /**
+     * Recompute validity once the DOM is in sync with `value`.
+     * `@Watch('value')` fires before Stencil re-renders, so the rendered control still holds the
+     * previous value at that point (visible with a programmatic value change, e.g. a `v-model`
+     * default value). The watcher therefore only raises a flag, and the check runs here, after the
+     * render. Renders unrelated to `value` leave the flag down and recompute nothing.
+     */
+    componentDidUpdate() {
+        if (this.validityCheckPending && this.checkboxItems.length > 0) {
+            this.validityCheckPending = false;
+            this.checkValidity();
+            if (this.hasDisplayedError) {
+                this.setErrorMessage();
+            }
+        }
+    }
     /**
      * add listeners and DOM attributed
      */
@@ -2518,7 +2646,7 @@ const MgInputCheckbox = class {
         else {
             inputContent = this.renderCheckboxMulti();
         }
-        return (index.h("mg-input", { key: 'e243244fb902cf960d112502e4627a787212db31', 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));
+        return (index.h("mg-input", { key: 'e873b2c1a5e96f5f424f21e3531c6c63c1d9ff39', 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 index.getElement(this); }
     static get watchers() { return {
@@ -2571,6 +2699,8 @@ const MgInputDate = class {
         this.inputValid = index.createEvent(this, "input-valid", 7);
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
+        // raised when `value` changed, so componentDidUpdate revalidates once the DOM is in sync
+        this.validityCheckPending = false;
         this.customErrorMessage = { lock: false };
         /**
          * Input name
@@ -2642,10 +2772,6 @@ const MgInputDate = class {
          * Handle input event
          */
         this.handleInput = () => {
-            this.checkValidity();
-            if (this.hasDisplayedError) {
-                this.setErrorMessage();
-            }
             this.value = this.input.value;
         };
         /**
@@ -2667,11 +2793,8 @@ const MgInputDate = class {
             // when we reset the field we need to test a blank value.
             if (['Delete', 'Backspace'].includes(event.key)) {
                 event.preventDefault();
+                // validity is recomputed in componentDidUpdate, once the input actually holds the blank value
                 this.value = null;
-                this.checkValidity();
-                if (this.hasDisplayedError) {
-                    this.setErrorMessage();
-                }
             }
         };
         /**
@@ -2758,6 +2881,7 @@ const MgInputDate = class {
         };
     }
     validateValue(newValue) {
+        this.validityCheckPending = true;
         // When the input is not fully completed or has been cleared, the value becomes an empty string.
         if (['', undefined].includes(newValue)) {
             // need to force value update to `null` to prevent extra render
@@ -2850,6 +2974,8 @@ const MgInputDate = class {
                 lock: valid ? false : errorMessageLock,
                 message: valid ? undefined : errorMessage,
             };
+            // setError() states the validity explicitly, so drop any pending recomputation
+            this.validityCheckPending = false;
             this.setValidity(valid);
             this.setErrorMessage(true);
             this.hasDisplayedError = this.invalid;
@@ -2920,14 +3046,32 @@ const MgInputDate = class {
         // https://stenciljs.com/docs/component-lifecycle#componentwillload
         return setTimeout(() => {
             this.checkValidity();
+            // the initial check covers the initial value: nothing is pending yet
+            this.validityCheckPending = false;
         }, 0);
     }
+    /**
+     * Recompute validity once the DOM is in sync with `value`.
+     * `@Watch('value')` fires before Stencil re-renders, so the rendered control still holds the
+     * previous value at that point (visible with a programmatic value change, e.g. a `v-model`
+     * default value). The watcher therefore only raises a flag, and the check runs here, after the
+     * render. Renders unrelated to `value` leave the flag down and recompute nothing.
+     */
+    componentDidUpdate() {
+        if (this.validityCheckPending && this.input !== undefined) {
+            this.validityCheckPending = false;
+            this.checkValidity();
+            if (this.hasDisplayedError) {
+                this.setErrorMessage();
+            }
+        }
+    }
     /**
      * Render
      * @returns HTML Element
      */
     render() {
-        return (index.h("mg-input", { key: 'c13dd54974bd7c8381bcefbe847fe79f2270506c', 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 === null ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly ? (this.value && index.h("b", { class: "mg-c-input__readonly-value" }, index$2.localeDate(this.value, this.locale))) : (index.h("input", { type: "date", class: "mg-c-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => {
+        return (index.h("mg-input", { key: '3d3f6910dde9c32bbf3d0c853e0c778380ed40fc', 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 === null ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly ? (this.value && index.h("b", { class: "mg-c-input__readonly-value" }, index$2.localeDate(this.value, this.locale))) : (index.h("input", { type: "date", class: "mg-c-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => {
                 if (el !== null)
                     this.input = el;
             } }))));
@@ -2979,6 +3123,8 @@ const MgInputNumeric = class {
         this.inputValid = index.createEvent(this, "input-valid", 7);
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
+        // raised when `value` changed, so componentDidUpdate revalidates once the DOM is in sync
+        this.validityCheckPending = false;
         this.customErrorMessage = { lock: false };
         /**
          * Input name
@@ -3045,11 +3191,6 @@ const MgInputNumeric = class {
          */
         this.handleInput = () => {
             this.value = this.input.value;
-            // Check validity
-            this.checkValidity();
-            if (this.hasDisplayedError) {
-                this.setErrorMessage();
-            }
         };
         /**
          * Handle focus event
@@ -3199,6 +3340,7 @@ const MgInputNumeric = class {
     }
     validateValue(newValue) {
         var _a;
+        this.validityCheckPending = true;
         // has input value is always render as string we get a stringified value or a '' for nullish value, so we test string type
         if (typeof newValue === 'string') {
             // Check if integer value starts with '0' (leading zero)
@@ -3319,6 +3461,8 @@ const MgInputNumeric = class {
                 lock: valid ? false : errorMessageLock,
                 message: valid ? undefined : errorMessage,
             };
+            // setError() states the validity explicitly, so drop any pending recomputation
+            this.validityCheckPending = false;
             this.setValidity(valid);
             this.setErrorMessage(true);
             this.hasDisplayedError = this.invalid;
@@ -3431,14 +3575,32 @@ const MgInputNumeric = class {
         // https://stenciljs.com/docs/component-lifecycle#componentwillload
         return setTimeout(() => {
             this.checkValidity();
+            // the initial check covers the initial value: nothing is pending yet
+            this.validityCheckPending = false;
         }, 0);
     }
+    /**
+     * Recompute validity once the DOM is in sync with `value`.
+     * `@Watch('value')` fires before Stencil re-renders, so the rendered control still holds the
+     * previous value at that point (visible with a programmatic value change, e.g. a `v-model`
+     * default value). The watcher therefore only raises a flag, and the check runs here, after the
+     * render. Renders unrelated to `value` leave the flag down and recompute nothing.
+     */
+    componentDidUpdate() {
+        if (this.validityCheckPending && this.input !== undefined) {
+            this.validityCheckPending = false;
+            this.checkValidity();
+            if (this.hasDisplayedError) {
+                this.setErrorMessage();
+            }
+        }
+    }
     /**
      * Render
      * @returns HTML Element
      */
     render() {
-        return (index.h("mg-input", { key: 'dbf435211890922742cbead9ab3a738b5219df44', 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 === undefined ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly
+        return (index.h("mg-input", { key: '8a9a2c269754aa1259e79dd5e68cc0ed6b578fd1', 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 === undefined ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly
             ? this.readonlyValue && this.renderReadonly()
             : [
                 index.h("input", { key: "input", type: "text", class: "mg-c-input__box mg-c-input__box--width", value: this.displayValue(), id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, autocomplete: "off", "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
@@ -3501,6 +3663,8 @@ const MgInputPassword = class {
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
         this.customErrorMessage = { lock: false };
+        // raised when `value` changed, so componentDidUpdate revalidates once the DOM is in sync
+        this.validityCheckPending = false;
         /**
          * Input name
          * If not set the value equals the identifier
@@ -3546,10 +3710,6 @@ const MgInputPassword = class {
          * Handle input event
          */
         this.handleInput = () => {
-            this.checkValidity();
-            if (this.hasDisplayedError) {
-                this.setErrorMessage();
-            }
             this.value = this.input.value;
         };
         /**
@@ -3594,6 +3754,7 @@ const MgInputPassword = class {
         };
     }
     handleValue(newValue) {
+        this.validityCheckPending = true;
         this.valueChange.emit(newValue);
     }
     watchReadonly(newValue) {
@@ -3674,6 +3835,8 @@ const MgInputPassword = class {
                 lock: valid ? false : errorMessageLock,
                 message: valid ? undefined : errorMessage,
             };
+            // setError() states the validity explicitly, so drop any pending recomputation
+            this.validityCheckPending = false;
             this.setValidity(valid);
             this.setErrorMessage(true);
             this.hasDisplayedError = this.invalid;
@@ -3736,15 +3899,33 @@ const MgInputPassword = class {
         // https://stenciljs.com/docs/component-lifecycle#componentwillload
         return setTimeout(() => {
             this.checkValidity();
+            // the initial check covers the initial value: nothing is pending yet
+            this.validityCheckPending = false;
         }, 0);
     }
+    /**
+     * Recompute validity once the DOM is in sync with `value`.
+     * `@Watch('value')` fires before Stencil re-renders, so the rendered control still holds the
+     * previous value at that point (visible with a programmatic value change, e.g. a `v-model`
+     * default value). The watcher therefore only raises a flag, and the check runs here, after the
+     * render. Renders unrelated to `value` leave the flag down and recompute nothing.
+     */
+    componentDidUpdate() {
+        if (this.validityCheckPending && this.input !== undefined) {
+            this.validityCheckPending = false;
+            this.checkValidity();
+            if (this.hasDisplayedError) {
+                this.setErrorMessage();
+            }
+        }
+    }
     /**
      * Render
      * @returns HTML Element
      */
     render() {
         const displayPasswordIcon = this.displayPassword ? 'eye-slash' : 'eye';
-        return (index.h("mg-input", { key: '913d0653faad21f56cb930dfdc0947a0747f17ad', 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 === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value !== undefined && index.h("b", { class: "mg-c-input__readonly-value" }, '•'.repeat(this.value.length))) : (index.h("span", { class: "mg-c-input__input-group" }, index.h("input", { type: this.displayPassword ? 'text' : 'password', class: "mg-c-input__box mg-c-input__box--width", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, maxlength: this.maxlength, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
+        return (index.h("mg-input", { key: '2d9498c380536dc32177d1ac16a513ee43944a72', 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 === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value !== undefined && index.h("b", { class: "mg-c-input__readonly-value" }, '•'.repeat(this.value.length))) : (index.h("span", { class: "mg-c-input__input-group" }, index.h("input", { type: this.displayPassword ? 'text' : 'password', class: "mg-c-input__box mg-c-input__box--width", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, maxlength: this.maxlength, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
                 if (el !== null)
                     this.input = el;
             } }), index.h("mg-button", { label: this.messages.input.password[this.displayPassword ? 'hide' : 'display'], disabled: this.disabled, variant: "flat", class: "mg-c-input__append-button", "is-icon": true, onClick: this.toggleDisplayPassword, "aria-controls": this.identifier }, index.h("mg-icon", { class: "mg-c-input__input-icon", icon: displayPasswordIcon }))))));
@@ -3792,12 +3973,12 @@ const MgInputRadio = class {
         /************
          * Internal *
          ************/
-        // HTML selector
-        this.inputs = [];
         // classes
         this.classVerticalList = 'mg-c-input--vertical-list';
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
+        // raised when `value` or `items` changed, so componentDidUpdate revalidates once the DOM is in sync
+        this.validityCheckPending = false;
         this.customErrorMessage = { lock: false };
         /**
          * Input name
@@ -3841,7 +4022,6 @@ const MgInputRadio = class {
          * @param event - input event
          */
         this.handleInput = (event) => {
-            this.checkValidity();
             this.value = this.options[event.target.value].value;
         };
         /**
@@ -3854,11 +4034,23 @@ const MgInputRadio = class {
             // reset guard
             this.handlerInProgress = undefined;
         };
+        /**
+         * Check if the required constraint is fulfilled
+         * The native group validity cannot answer it: a browser keeps the checked member a group had, even
+         * once that input is removed from the DOM. Options that cannot be selected are ignored.
+         * @returns required constraint is fulfilled
+         */
+        this.validateRequired = () => {
+            const selectableOptions = this.options.filter((option) => !option.disabled);
+            return (!this.required ||
+                selectableOptions.length < 1 ||
+                selectableOptions.some((option) => this.isSelectedValue(option.value)));
+        };
         /**
          * Check if input is valid
          */
         this.checkValidity = () => {
-            this.setValidity(this.readonly || this.disabled || this.getInvalidElement() === undefined);
+            this.setValidity(this.readonly || this.disabled || (this.getInvalidElement() === undefined && this.validateRequired()));
         };
         /**
          * Set input error message
@@ -3874,7 +4066,7 @@ const MgInputRadio = class {
                     this.errorMessage = this.customErrorMessage.message;
                 }
                 // required
-                else if (invalidElement.validity.valueMissing) {
+                else if (invalidElement === undefined || invalidElement.validity.valueMissing) {
                     this.errorMessage = this.messages.errors.required;
                 }
             }
@@ -3883,11 +4075,24 @@ const MgInputRadio = class {
          * get invalid element
          * @returns element
          */
-        this.getInvalidElement = () => this.inputs.find((input) => !input.disabled && !input.readOnly && !input.checkValidity());
+        this.getInvalidElement = () => this.getInputs().find((input) => !input.disabled && !input.readOnly && !input.checkValidity());
+        /**
+         * Get the rendered radio inputs
+         * Read from the DOM: references kept from a render would outlive the inputs they point to.
+         * @returns rendered radio inputs
+         */
+        this.getInputs = () => Array.from(this.element.shadowRoot.querySelectorAll('input[type="radio"]'));
+        /**
+         * Check if a value is the selected one
+         * @param optionValue - option value to compare to the component value
+         * @returns option value is the selected one
+         */
+        this.isSelectedValue = (optionValue) => JSON.stringify(this.value) === JSON.stringify(optionValue);
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     watchValue(newValue) {
         var _a;
+        this.validityCheckPending = true;
         if (index$1.allItemsAreString(this.items) && typeof newValue === 'string') {
             this.readonlyValue = newValue;
         }
@@ -3899,7 +4104,7 @@ const MgInputRadio = class {
         }
         this.valueChange.emit(newValue);
     }
-    validateItems(newValue) {
+    validateItems(newValue, oldValue) {
         // Validate if items have required min length
         if (typeof newValue === 'object' && newValue.length < 2) {
             throw new Error(`<mg-input-radio> prop "items" require at least 2 items. Passed value: ${index$1.toString(newValue)}.`);
@@ -3915,6 +4120,14 @@ const MgInputRadio = class {
         else {
             throw new Error(`<mg-input-radio> prop "items" is required and all items must be the same type, string or RadioOption. Passed value: ${index$1.toString(newValue)}.`);
         }
+        // `oldValue` is undefined on init
+        if (oldValue !== undefined) {
+            // the options cannot display a value they no longer offer, drop it
+            if (this.value !== undefined && !this.options.some((option) => this.isSelectedValue(option.value))) {
+                this.value = undefined;
+            }
+            this.validityCheckPending = true;
+        }
     }
     watchInputVerticalList(newValue) {
         if (newValue)
@@ -3929,7 +4142,7 @@ const MgInputRadio = class {
             this.classCollection.delete(mgInput_conf.classReadonly);
     }
     handleValidityChange(newValue, _oldValue, prop) {
-        this.inputs.forEach((input) => {
+        this.getInputs().forEach((input) => {
             input[prop] = newValue;
         });
         this.checkValidity();
@@ -3948,9 +4161,8 @@ const MgInputRadio = class {
      * Set focus on input.
      */
     async setFocus() {
-        if (this.inputs.length > 0) {
-            this.inputs[0].focus();
-        }
+        var _a;
+        (_a = this.element.shadowRoot.querySelector('input')) === null || _a === void 0 ? void 0 : _a.focus();
     }
     /**
      * Display input error if it exists.
@@ -3992,6 +4204,8 @@ const MgInputRadio = class {
                 lock: valid ? false : errorMessageLock,
                 message: valid ? undefined : errorMessage,
             };
+            // setError() states the validity explicitly, so drop any pending recomputation
+            this.validityCheckPending = false;
             this.setValidity(valid);
             this.setErrorMessage(true);
             this.hasDisplayedError = this.invalid;
@@ -4057,20 +4271,35 @@ const MgInputRadio = class {
         // https://stenciljs.com/docs/component-lifecycle#componentwillload
         return setTimeout(() => {
             this.checkValidity();
+            // the initial check covers the initial value: nothing is pending yet
+            this.validityCheckPending = false;
         }, 0);
     }
+    /**
+     * Recompute validity once the DOM is in sync with `value`.
+     * `@Watch('value')` fires before Stencil re-renders, so the rendered control still holds the
+     * previous value at that point (visible with a programmatic value change, e.g. a `v-model`
+     * default value). The watcher therefore only raises a flag, and the check runs here, after the
+     * render. Renders unrelated to `value` leave the flag down and recompute nothing.
+     */
+    componentDidUpdate() {
+        if (this.validityCheckPending && this.getInputs().length > 0) {
+            this.validityCheckPending = false;
+            this.checkValidity();
+            if (this.hasDisplayedError) {
+                this.setErrorMessage();
+            }
+        }
+    }
     /**
      * Render
      * @returns HTML Element
      */
     render() {
-        return (index.h("mg-input", { key: '763e021cdda0735dcbd62700f09cbc32c0de7377', 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 && index.h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue)) : (index.h("div", { class: "mg-c-input__input-group-container" }, this.options.map((input, index$1) => (index.h("div", { key: input.title, class: {
+        return (index.h("mg-input", { key: '1fd4b600eb95f2ff5c753884c40b982e0552d576', 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 && index.h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue)) : (index.h("div", { class: "mg-c-input__input-group-container" }, this.options.map((input, index$1) => (index.h("div", { key: input.title, class: {
                 'mg-c-input__input-group': true,
                 'mg-c-input__input-group--disabled': this.disabled || input.disabled,
-            } }, index.h("input", { type: "radio", id: this.identifier + '_' + index$1, name: this.identifier, value: index$1, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index$1].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: (el) => {
-                if (el !== null)
-                    this.inputs[index$1] = el;
-            } }), index.h("label", { htmlFor: this.identifier + '_' + index$1 }, input.title))))))));
+            } }, index.h("input", { type: "radio", id: this.identifier + '_' + index$1, name: this.identifier, value: index$1, checked: this.isSelectedValue(this.options[index$1].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput }), index.h("label", { htmlFor: this.identifier + '_' + index$1 }, input.title))))))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -4123,8 +4352,9 @@ const isOptGroup = (optgroup) => typeof optgroup === 'object' &&
     typeof optgroup.group === 'string' &&
     allItemsAreOptions(optgroup.options);
 /**
- * Ensure options can be unambiguously differentiated by their title
+ * Report, without enforcing, options that cannot be unambiguously differentiated by their title
  * Two options can share the same title only when they belong to different groups
+ * An option is identified by its render index, so a duplicated title only harms readability: it is reported to the developer and the field still renders
  * @param items - select options to validate
  */
 const validateUniqueTitles = (items) => {
@@ -4136,7 +4366,7 @@ const validateUniqueTitles = (items) => {
         const titles = titlesByGroup.get(group);
         if (titles.has(title)) {
             const groupContext = group === undefined ? 'outside of a group' : `within the group "${group}"`;
-            throw new Error(`<mg-input-select> prop "items" must not contain options with the same "title" ${groupContext}. Duplicated title: "${title}".`);
+            console.error(`<mg-input-select> prop "items" must not contain options with the same "title" ${groupContext}. Duplicated title: "${title}".`);
         }
         titles.add(title);
     });
@@ -4172,6 +4402,8 @@ const MgInputSelect = class {
         this.inputValid = index.createEvent(this, "input-valid", 7);
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
+        // raised when `value` or `items` changed, so componentDidUpdate revalidates once the DOM is in sync
+        this.validityCheckPending = false;
         this.customErrorMessage = { lock: false };
         /**
          * Input name
@@ -4319,18 +4551,14 @@ const MgInputSelect = class {
         this.renderOption = (option, index$1) => (index.h("option", { key: index$1, value: `${index$1}`, selected: JSON.stringify(this.value) === JSON.stringify(option.value), disabled: option.disabled }, option.title));
     }
     validateValue(newValue) {
-        setTimeout(() => {
-            this.checkValidity();
-            if (this.hasDisplayedError) {
-                this.setErrorMessage();
-            }
-        }, 0);
+        this.validityCheckPending = true;
         this.valueChange.emit(newValue);
     }
-    validateItems(newValue) {
+    validateItems(newValue, oldValue) {
         // Empty options
         if (newValue.length === 0) {
             this.options = [];
+            this.valueExist = false;
         }
         // String array
         else if (index$1.allItemsAreString(newValue)) {
@@ -4356,6 +4584,9 @@ const MgInputSelect = class {
         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: ${index$1.toString(newValue)}.`);
         }
+        // `oldValue` is undefined on init. The value is kept: an unmatched one renders the placeholder.
+        if (oldValue !== undefined)
+            this.validityCheckPending = true;
     }
     watchReadonly(newValue) {
         if (newValue)
@@ -4435,6 +4666,8 @@ const MgInputSelect = class {
                 lock: valid ? false : errorMessageLock,
                 message: valid ? undefined : errorMessage,
             };
+            // setError() states the validity explicitly, so drop any pending recomputation
+            this.validityCheckPending = false;
             this.setValidity(valid);
             this.setErrorMessage(true);
             this.hasDisplayedError = this.invalid;
@@ -4505,8 +4738,26 @@ const MgInputSelect = class {
         // https://stenciljs.com/docs/component-lifecycle#componentwillload
         return setTimeout(() => {
             this.checkValidity();
+            // the initial check covers the initial value: nothing is pending yet
+            this.validityCheckPending = false;
         }, 0);
     }
+    /**
+     * Recompute validity once the DOM is in sync with `value`.
+     * `@Watch('value')` fires before Stencil re-renders, so the rendered control still holds the
+     * previous value at that point (visible with a programmatic value change, e.g. a `v-model`
+     * default value). The watcher therefore only raises a flag, and the check runs here, after the
+     * render. Renders unrelated to `value` leave the flag down and recompute nothing.
+     */
+    componentDidUpdate() {
+        if (this.validityCheckPending && this.input !== undefined) {
+            this.validityCheckPending = false;
+            this.checkValidity();
+            if (this.hasDisplayedError) {
+                this.setErrorMessage();
+            }
+        }
+    }
     /**
      * Render
      * @returns HTML Element
@@ -4515,7 +4766,7 @@ const MgInputSelect = class {
         const readonlyValue = this.getReadonlyValue();
         // Running index shared across groups, so each option gets a unique value matching its position in getOptions()
         let optionIndex = 0;
-        return (index.h("mg-input", { key: 'aab8c17ced01c0afbec9114f280ee2b7fa73cdfc', 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 && index.h("b", { class: "mg-c-input__readonly-value" }, readonlyValue)) : (index.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) => {
+        return (index.h("mg-input", { key: 'ca4a3a1b95094505bff8bf062566a633a1b12d1a', 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 && index.h("b", { class: "mg-c-input__readonly-value" }, readonlyValue)) : (index.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
@@ -4589,6 +4840,8 @@ const MgInputText = class {
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
         this.customErrorMessage = { lock: false };
+        // raised when `value` changed, so componentDidUpdate revalidates once the DOM is in sync
+        this.validityCheckPending = false;
         /**
          * Input name
          * If not set the value equals the identifier
@@ -4653,10 +4906,6 @@ const MgInputText = class {
          * Handle input event
          */
         this.handleInput = () => {
-            this.checkValidity();
-            if (this.hasDisplayedError) {
-                this.setErrorMessage();
-            }
             this.value = this.input.value;
         };
         /**
@@ -4737,6 +4986,7 @@ const MgInputText = class {
     }
     handleValue(newValue) {
         var _a, _b;
+        this.validityCheckPending = true;
         if ((_a = this.datalistoptions) === null || _a === void 0 ? void 0 : _a.every(isOption$1)) {
             this.valueChange.emit(((_b = this.datalistoptions.find((option) => option.title === newValue)) === null || _b === void 0 ? void 0 : _b.value) || newValue);
         }
@@ -4856,6 +5106,8 @@ const MgInputText = class {
                 lock: valid ? false : errorMessageLock,
                 message: valid ? undefined : errorMessage,
             };
+            // setError() states the validity explicitly, so drop any pending recomputation
+            this.validityCheckPending = false;
             this.setValidity(valid);
             this.setErrorMessage(true);
             this.hasDisplayedError = this.invalid;
@@ -4928,14 +5180,32 @@ const MgInputText = class {
         // https://stenciljs.com/docs/component-lifecycle#componentwillload
         return setTimeout(() => {
             this.checkValidity();
+            // the initial check covers the initial value: nothing is pending yet
+            this.validityCheckPending = false;
         }, 0);
     }
+    /**
+     * Recompute validity once the DOM is in sync with `value`.
+     * `@Watch('value')` fires before Stencil re-renders, so the rendered control still holds the
+     * previous value at that point (visible with a programmatic value change, e.g. a `v-model`
+     * default value). The watcher therefore only raises a flag, and the check runs here, after the
+     * render. Renders unrelated to `value` leave the flag down and recompute nothing.
+     */
+    componentDidUpdate() {
+        if (this.validityCheckPending && this.input !== undefined) {
+            this.validityCheckPending = false;
+            this.checkValidity();
+            if (this.hasDisplayedError) {
+                this.setErrorMessage();
+            }
+        }
+    }
     /**
      * Render
      * @returns HTML Element
      */
     render() {
-        return (index.h("mg-input", { key: '3454b5f94af7b47a2c94b1416f59f840552ef70a', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: this.characterLeftId, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly
+        return (index.h("mg-input", { key: '20a89d186c673936740cce348977cc0a8471fafb', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: this.characterLeftId, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly
             ? this.value && this.renderReadonly()
             : [
                 index.h("div", { key: "input", class: "mg-c-input__input-group-container", style: {
@@ -5004,6 +5274,8 @@ const MgInputTextarea = class {
         this.inputValid = index.createEvent(this, "input-valid", 7);
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
+        // raised when `value` changed, so componentDidUpdate revalidates once the DOM is in sync
+        this.validityCheckPending = false;
         this.customErrorMessage = { lock: false };
         /**
          * Input name
@@ -5062,10 +5334,6 @@ const MgInputTextarea = class {
          * Handle input event
          */
         this.handleInput = () => {
-            if (this.hasDisplayedError) {
-                this.checkValidity();
-                this.setErrorMessage();
-            }
             this.value = this.input.value;
         };
         /**
@@ -5115,7 +5383,7 @@ const MgInputTextarea = class {
         };
     }
     handleValue(newValue) {
-        this.checkValidity();
+        this.validityCheckPending = true;
         this.valueChange.emit(newValue);
     }
     watchReadonly(newValue) {
@@ -5209,6 +5477,8 @@ const MgInputTextarea = class {
                 lock: valid ? false : errorMessageLock,
                 message: valid ? undefined : errorMessage,
             };
+            // setError() states the validity explicitly, so drop any pending recomputation
+            this.validityCheckPending = false;
             this.setValidity(valid);
             this.setErrorMessage(true);
             this.hasDisplayedError = this.invalid;
@@ -5276,14 +5546,32 @@ const MgInputTextarea = class {
         // https://stenciljs.com/docs/component-lifecycle#componentwillload
         return setTimeout(() => {
             this.checkValidity();
+            // the initial check covers the initial value: nothing is pending yet
+            this.validityCheckPending = false;
         }, 0);
     }
+    /**
+     * Recompute validity once the DOM is in sync with `value`.
+     * `@Watch('value')` fires before Stencil re-renders, so the rendered control still holds the
+     * previous value at that point (visible with a programmatic value change, e.g. a `v-model`
+     * default value). The watcher therefore only raises a flag, and the check runs here, after the
+     * render. Renders unrelated to `value` leave the flag down and recompute nothing.
+     */
+    componentDidUpdate() {
+        if (this.validityCheckPending && this.input !== undefined) {
+            this.validityCheckPending = false;
+            this.checkValidity();
+            if (this.hasDisplayedError) {
+                this.setErrorMessage();
+            }
+        }
+    }
     /**
      * Render
      * @returns HTML Element
      */
     render() {
-        return (index.h("mg-input", { key: '36575f026a23722bb6d224aaeacf0e80d3e1bbfd', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: this.characterLeftId, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value && index.h("b", { class: "mg-c-input__readonly-value" }, this.value)) : (index.h("div", { class: "mg-c-input__input-group-container" }, index.h("textarea", { class: {
+        return (index.h("mg-input", { key: 'e3bf8b4bbddccaf86a78f8517cc529aa41cc61d6', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: this.characterLeftId, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value && index.h("b", { class: "mg-c-input__readonly-value" }, this.value)) : (index.h("div", { class: "mg-c-input__input-group-container" }, index.h("textarea", { class: {
                 'mg-c-input__box': true,
                 'mg-c-input__box--width': true,
                 'mg-c-input__box--resizable': this.resizable === 'both',
@@ -6562,7 +6850,7 @@ MgMessage.style = mgMessageCss();
  */
 const dialogRoles = ['dialog', 'alertdialog'];
 
-const mgModalCss = () => `:host{--mg-c-card-border-radius:var(--mg-c-modal-border-radius);--mg-c-card-spacing:var(--mg-b-size-16) var(--mg-b-size-24);--mg-c-card-border:none}.mg-c-modal{max-height:100dvh;box-sizing:border-box;border:none;background:none;color:inherit}.mg-c-modal[open]{display:flex;padding:var(--mg-b-size-24) var(--mg-b-size-8)}.mg-c-modal::backdrop{background-color:var(--mg-b-color-dark);opacity:.65}.mg-c-modal mg-card{display:flex;width:calc(75*var(--mg-b-size-8));max-width:100%;max-height:100dvh}.mg-c-modal__dialog{position:relative;display:flex;height:fit-content;max-height:100%;flex-direction:column;align-self:center;row-gap:var(--mg-b-size-16)}.mg-c-modal__title{margin:0;font-family:var(--mg-b-font-family-heading);font-size:var(--mg-c-modal-title-font-size);font-weight:600}.mg-c-modal__close-button{height:var(--mg-c-modal-title-font-size);margin-top:calc((var(--mg-b-size-min-height) - var(--mg-c-modal-title-font-size)*var(--mg-b-line-height))/2*-1);margin-right:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2*-1);margin-left:var(--mg-b-size-16);float:right}.mg-c-modal__content{padding:var(--mg-b-size-16);margin:calc(var(--mg-b-size-16)*-1);overflow-y:auto}.mg-c-modal__footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--mg-b-size-8)}.mg-c-modal ::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;--mg-c-card-max-height:unset;--mg-c-card-overflow:var(--mg-c-card-overflow-default)}`;
+const mgModalCss = () => `:host{--mg-c-card-border-radius:var(--mg-c-modal-border-radius);--mg-c-card-spacing:var(--mg-b-size-16) var(--mg-b-size-24);--mg-c-card-border:none}.mg-c-modal{max-height:100dvh;box-sizing:border-box;border:none;background:none;color:inherit}.mg-c-modal[open]{display:flex;padding:var(--mg-b-size-24) var(--mg-b-size-8)}.mg-c-modal::backdrop{background-color:var(--mg-b-color-dark);opacity:.65}.mg-c-modal mg-card{display:flex;width:calc(75*var(--mg-b-size-8));max-width:100%;max-height:100dvh}.mg-c-modal__dialog{position:relative;display:flex;height:fit-content;max-height:100%;flex-direction:column;align-self:center;row-gap:var(--mg-b-size-16)}.mg-c-modal__title{margin:0;font-family:var(--mg-b-font-family-heading);font-size:var(--mg-c-modal-title-font-size);font-weight:600}.mg-c-modal__close-button{height:var(--mg-c-modal-title-font-size);margin-top:calc((var(--mg-b-size-min-height) - var(--mg-c-modal-title-font-size)*var(--mg-b-line-height))/2*-1);margin-right:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2*-1);margin-left:var(--mg-b-size-16);float:right}.mg-c-modal__content{padding:var(--mg-b-size-16);margin:calc(var(--mg-b-size-16)*-1);overflow-y:auto;scroll-padding-block:var(--mg-b-size-16)}.mg-c-modal__footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--mg-b-size-8)}.mg-c-modal ::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;--mg-c-card-max-height:unset;--mg-c-card-overflow:var(--mg-c-card-overflow-default)}`;
 
 const MgModal = class {
     constructor(hostRef) {