Floating labels: place label before control for screen readers (#42539)

Floating labels: place label before control for screen readers (#42539)

Floating labels required the control to precede the `<label>` in the DOM
so the floating animation could use a sibling (`~`) selector. That order
made screen readers (e.g. NVDA) announce the label after the field's
value instead of before it.

Switch the SCSS to look forward with `:has()` so the `<label>` can come
first in the DOM while the CSS still reacts to the control's state
(focus, value, disabled, autofill). Reorder all examples, docs, and the
visual test to label-first markup to match.

Also give `.form-control-plaintext` its own copy of the control tokens so
its `var(--control-*)` references resolve, fixing phantom borders and
label misalignment.

Fixes #41362