ROU-12881: Align form-field widgets with Figma (input, textarea, dropdown, form)

[OS-giulianasilva]

This PR is for aligning the form-field widgets (Input, TextArea, Dropdown, Form validation) with their Figma specs.

Depends on the theme-layer roles PR (ROU-12881-foundation). Merge that first — this branch is stacked on it.

What was happening

• Input/TextArea idle & disabled border used the generic --color-border role instead of the input-specific border token; there was no hover-border color and no focus ring; the label was too dark/heavy; the error border and validation message used the wrong red tier; the textarea resize value was invalid (resize: auto) so the drag handle didn't work.
• Dropdown had no focus ring, and its error border used the wrong red tier.
• The Form's span.validation-message rule silently overrode the input's validation color with the wrong red tone (equal specificity, loaded later).

What was done

• Input/TextArea (_inputs-and-textareas.scss): input-specific border token for idle/disabled, dedicated hover-border color, new 2px focus ring via --color-border-primary, label recoloured to --color-text-subtlest + regular weight, error border → --color-border-danger, validation message → --color-text-danger, and resize: vertical fix.
• Dropdown (_dropdown.scss): error border → --color-border-danger; new 2px focus ring on both the native <select> and the expanded custom dropdown.
• Form (_form.scss): validation-message color → --color-text-danger.
• Regenerated the CSS API reference.

Test Steps

Open the Widgets/Input, Widgets/TextArea, Widgets/Dropdown, and Widgets/Form stories in Storybook, then use DevTools to force states.

Input / TextArea — the control root is <input data-input class="form-control"> / <textarea data-textarea class="form-control">:

1. Hover: hover the input → border should darken (input-press tone).
2. Focus: click/Tab into it → 1px primary border + a 2px light-blue halo (box-shadow). In DevTools you can force :focus on the element.
3. Error: add class not-valid to the .form-control element → border turns danger-red. A sibling <span class="validation-message"> should render its text in the same danger-red.
4. Disabled: add the disabled attribute → muted background + border.
5. Label: the [data-label] / .form label element should be gray (subtlest) and regular weight.
6. Textarea resize: drag the bottom-right handle of the textarea → it should resize vertically.

Dropdown — root is <div class="dropdown-container" data-dropdown> wrapping either <select class="dropdown-display"> (native) or a <div class="dropdown-display"> (custom):

1. Focus (native): Tab into the <select> → 1px primary border + 2px halo. Force :focus in DevTools if needed.
2. Focus (custom): add class dropdown-expanded to .dropdown-container → the .dropdown-display shows the same border + halo.
3. Error: add class not-valid to .dropdown-container → .dropdown-display border turns danger-red.

Screenshots

(prefer animated gif)

Checklist

• tested locally
• documented the code
• clean all warnings and errors of eslint
• requires changes in OutSystems (if so, provide a module with changes)
• requires new sample page in OutSystems (if so, provide a module with changes)

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud