Support for multi-line labels in input fields

[juuso-vaadin]

Describe your motivation

Labels that are wider than the input are currently truncated with the overflow ellipsis. This ensures proper vertical alignment, but might not always be important, for example in single column forms.

[theme~="wrapping-label"]::part(label) {
  white-space: normal;
}

[theme~="wrapping-label"]::part(required-indicator)::after {
  right: unset;
}

These styles allow the label to wrap.

Describe the solution you'd like

New theme variant for all input components

• Make field labels wrap to multiple lines
• Ensure required indicator is always shown inline at end of label

In addition it would be great to take possible tooltip indicator into account as well.

Describe alternatives you've considered

Helper text could be used to provide more more context in addition to short labels. Still this feels a bit artificial.

Additional context

Could also consider possibility to limit the number of rows with CSS line-clamp.

[rolfsmeds]

Would be great to be able to do this both for individual fields and to all fields in a particular scope (e.g. globally, or in a particular form).

This could be achieved by introducing a style property like --vaadin-input-field-label-wrap that sets the appropriate styles in any field label within the scope where it's set. Unfortunately the only ways to set multiple different values with a single property are 1) container style queries, and 2) the empty property value hack.

For DX convenience (esp. Flow), we could also introduce a theme variant wrap-label / WRAP_LABEL that does it for you on the field where it's set.

The former is not yet supported with custom properties on all major browsers, and the latter is quite hacky and leads to a strange API (e.g. --wrap-labels: initial).

So our options are:

1. Implement only instance-specific theme variants for now
2. Wait until V25 at which point maybe all major browsers support container queries with custom properties
3. Introduce 2 or 3 separate properties that need to be set