[component]: Textarea

[Cian77]

Description

Create a HTML/CSS component using the current markup that implements as many features as possible from the new Design. Remove any dependencies on bootstrap for this component. This is done for backwards compatibility reasons. The current structure will eventually be deprecated. These styles will give us the necessary time to come up with a solid input component strategy.

Open issues:

Design:

• [x] New font
• [x] New Icons
• [ ] Spacing

Design

https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=21-182

Tokens

• [ ] Tokens for this component are ready

Tokens proposal

• textarea-bg (enabled/disabled)
• textarea-fg (enabled/hover/focus/disabled)
• textarea-border (width/style/color) (enabled/hover/focus/disabled)
• textarea-border-radius
• textarea-padding-inline
• textarea-padding-block (empty/filled)
• textarea-block-gap (space between value and label)
• textarea-label-font (size) (empty/filled)
• textarea-value-font-size
• textarea-focus (offset/width/style/color)
• textarea-validation-icon-size
• textarea-min-height (for distinguishing between a text input)
• textarea-indicator-font (size) (that little 0/300 char limit indicator)

Tasks

### 💻 Tasks
- [ ] Review figma design (states complete, ability to implement)
- [ ] HTML/CSS implementation with Design Tokens
- [ ] Remove any references to bootstrap
- [ ] Remove any unused component scss variables
- [ ] Documentation in Storybook
- [ ] Visual regression tests
- [ ] Design review

[gfellerph]

Discussion with @sandrahohl-post, small variants and dark mode will be added in a later stage. Selected state will be discussed, implement Default, Hover, Focus and Disabled for the moment.

[sandra-post]

Added assistive text, FYI @gfellerph

[Cian77]

Integrated new Typo and Icons.

[gfellerph]

Discuss about how to style native elements only.

[Vandapanda]

Added to pattern discussion as there are many question from my side how to handle this one in tokens