Get Semi-coupled Text form elements to work with the State API

Overview

• Add text-based test cases to xb_test_state_api module.
• As part of getting those tests to pass Make the text components use native elements instead of radix
• Even if the text inputs can't look identical, it should look pretty close. More formal designs will be provided in the future so there's no need to be pixel perfect if it prevents the functionality from happening.

Proposed resolution

Manual Test

Enable xb_test_state_api module and try the inputs added in this MR

The final form element is de-Radix'd, which should make things easier & more stable 😎

This was a pretty major regression for the styling of the textfields:

Before:

After:

The mr 3526866-pretty-major-regression updated some CSS and here's a comparison of the MR to HEAD.

I noticed that this focus color for the TextField is different from the focus color of TextAreas. (because text area hasn't been de-radixified yet and I think is just using the color defined in the top level Radix theme wrapper)

I understand the appearance will be updated after designs are finalized, but until then, I think the focus colors should still be consistent across TextField and TextArea since they were consistent before.

Maybe we can we just change the TextField focus color to be the radix default for now instead of updating an out of scope TextArea here.

Re #11 There were styles for this but it looks like there were some conflicts with focus-visible vs visible but this should be good now.