Fix invalid state styling on vscode-textfield

[MarshalX]

The :host([invalid]) selectors set border-color but the border lives on .root, so the rule had no effect. Retarget them to .root and move the error background there too, so the red fill follows the rounded corners instead of poking out as a square.

Also unquote the font-weight fallback (the quoted 'normal' keyword made the declaration invalid) and align the border fallback default with the background default so they match when no CSS variable is set.

Add a test for invalid property reflection and update the cssprop docs.

Before

Focused:

Unfocused:

Glitched border corner:

After

Focused:

Unfocused:

Rounded border corner:

[MarshalX]

@bendera Hi, please take a look when you have time. I found this while working with vscode-textarea at the same time. They behave differently when the value is invalid

<h2>vscode-textfield</h2>
<vscode-textfield invalid value="invalid value"></vscode-textfield>

<h2>vscode-textarea</h2>
<vscode-textarea invalid value="invalid value"></vscode-textarea>

[bendera]

Hi,

Thnak you for your contribution. I haven't frogotten about this PR, but I have limited time.

Focus border: I want to keep the blue error focus border, otherwise cannot be distinguished the focused state. It's a bit awkward - any ideas are welcome.

[MarshalX]

Hi! The blue focus border makes sense. But if we change it, it won’t match vscode-textarea anymore. So if we’re going to add a blue error focus border to vscode-textfield, I’d really want to have it in vscode-textarea as well