input field validation

[russbiggs]

the :valid and :invalid pseudo classes are a little brittle and require a bit more hand-holding to make them work as intended. The :user-valid and :user-invalid pseudo classes solve a lot of these issue but are relatively new so may have browser support issues: https://caniuse.com/mdn-css_selectors_user-valid

Other options could be do to something like this:

.input:not(:placeholder-shown):valid

.input:not(:placeholder-shown):invalid

Which has better support. Currently we have decent workarounds in place, but it would be nice if the design system handled these out-of-the-box