fix(form): support inline fields group label for required attribute

[lubber-de]

Description

A required Inline fields label does not get an asterisk and does not get a state color

To fix the state color i had to make use of the :has() class selector. This isnt supported by all browsers, so in those browsers this feature wont work.

I also fixed positioning of fields when an empty label is used

Testcase

Remove CSS to see issue
https://jsfiddle.net/lubber/6po2btaw/23/

[mvorisek]

@lubber-de please see https://jsfiddle.net/h9ta2wdj/ repro and https://dev.atk4.org/demos/collection/tablefilter.php example usage (click column header arrow to open column filter)

In the repro, you can see extra vertical space is added - is that indented?

And please also notice the "required" asterisk is not shown either - is that indented too?

[lubber-de]

TLDR;
Fixed by #3060

In the repro, you can see extra vertical space is added - is that indented?

(Basically) Yes, it was, because it makes sure the (empty) label keeps its height when used inside a "fields" group to still align with other fields in the same line.

(play with the example from the PRs original post)

And please also notice the "required" asterisk is not shown either - is that indented too?

(Basically) Yes, as, when used inside a field group (like the screenshot above), only the first field usually gets the asterisk as all following fields in the same line belong to the same label (logical wise)

Now, in your example, you used a single field and left the label empty which was not covert by this merged PR.

To fix this in the meantime without the changes in #3060, just add one space character to your "empty" label, which will then add the asterisk.
See https://jsfiddle.net/lubber/q2usjd5a/4/