Check css pseudo class behavior (:valid, :invalid)

[CaptainCodeman]

These should ~correspond to validation messages being shown~ be applied if the form has been touched, but regular forms don't have the "only if touched" concept for the CSS, so we may need to add our own style class too that can be added to the inputs to enable:

input.touched:valid {
    border-color: green;
}

input.touched:invalid {
    border-color: red;
}

Class name? touched, validated, show, hint? (maybe configurable option on the form / fields)

[CaptainCodeman]

So, this is already doable by the consumer:

<input use:name type="text" required class:touched={$name.touched} />

... but it feels like a chore to have to add it to every input.

Instead, we could add a className or touched property that will be applied to each input to reflect its touched state.

This should probably be settable both on the form and overridable for each field (and the onDirty flag could be treated the same)