[Binder] Permanent invalid state with optional (text based) fields

[Feuerwerk]

Describe the bug

When validating an optional field which is bound to a text-field based widget (e.g. vaadin-text-field, vaadin-number-field.....) and having a validator registered to that field, once the field gets invalid, this state is permanent.
The field stay red but the error message can go away.

protected firstUpdated(_changedProperties: PropertyValues) {
    super.firstUpdated(_changedProperties);
    const model = this.binder.model;
    this.binder.for(model.text).addValidator(new Size({
        message: 'max 5 characters',
        min: 0,
        max: 5,
    }));
}

render() {
    const model = this.binder.model;
    return html`<vaadin-text-field ${field(model.text)}></vaadin-text-field>`;
}

As a workaround you can add for example the required attribute to the textfield or override checkValidity with an implementation which always return true to get it working again
<vaadin-text-field ${field(model.text)} . checkValidity="${() => true}"></vaadin-text-field>

This seems due to InputConstraintsMixin.checkValidity behaving differently depending on constraints (like required for example) present on the input field. When there is no constraint on the input field checkValidity simply remembers the previous invalid state and keep that.

Expected-behavior

I expect that the invalid status gets updated every time the field is changed by the user

Reproduction

Here is a modified starter project which demonstrates the bug. Just follow the instructions in the browser.
The interesting code changes are only in frontend/views/main-view.ts
skeleton-starter.zip

System Info

Hilla: 2.5.7