Styles: Update text input

[gfellerph]

Design: https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components-Post?type=design&node-id=7775%3A33876&mode=design&t=VnF7Nfba4zszs6Kt-1

Floating label animation: An empty floating label text input shows the placeholder text, if it is specified. This placeholder appears as soon as the label begins to float to the top. As the label is above the placeholder, it covers the placeholder during the floating to the top. This creates a visually unpleasing effect and looks broken. I think the effect can be reduced by animating the opacity on the placeholder with the same duration as the label floating animation (implement and verify with Design).

Tasks

Beta Give feedback

1. Update text input styles #1835
   2 of 2
   pibs request 📦 styles +3
   
2. Update focus styles
3. Update valid state styles
4. Update disabled styles
5. Improve floating label animation
6. Design review
7. Update hover state

[imagoiq]

About the floating variant with small size, there is the following ticket + a PR: #1835
#2396

[davidritter-dotcom]

Waiting for #2857 to be merged.

[davidritter-dotcom]

• focus style gets fixed with fix(documentation): remove form-control-wrapper classes from stories #3166
• icon gets added to the validation-feedback message with feat(styles): invalid message on card-control #2978