fix(InputGroup): target the shared frame instead of five classes that no longer exist

[mrholek]

Found while moving the password icon into JavaScript.

The state of it

.input-group squared off a field component's frame by naming each family's wrapper:

> .autocomplete:not(:last-child) > .autocomplete-input-group,
> .date-picker:not(:last-child) > .date-picker-input-group,
> .time-picker:not(:last-child) > .time-picker-input-group,
> .form-multi-select:not(:last-child) > .form-multi-select-input-group,
> .form-password:not(:last-child) > .form-control,

All five of those became .form-control-group when the primitive landed, so none of these selectors has matched any markup since. Measured on the compiled stylesheet: 0 rules connected .input-group to a field's frame. After this change there are 7.

Two consequences, one loud and one quiet:

• A hand-authored group was missing from the list that makes a child flex (flex: 1 1 auto; width: 1%), so a password field or chip input in an input group did not shrink — the row broke onto three lines.
• No field frame inside an input group has had its corner radius squared off, in any family, since the primitive landed.

Why the class API guard never caught it

The guard compares the compiled CSS against the v5 snapshot. These five classes were still in the stylesheet — as the subjects of these dead selectors — so it concluded they still existed. A dead selector keeps a class alive as far as the compiled CSS is concerned. Deleting the selectors is what finally made them disappear, and the guard then reported all five, which is how I know the sweep is complete. They are registered as removals now.

The fix

The five family selectors collapse to one, in each of the three radius blocks and the two lists:

- > .autocomplete:not(:last-child) > .autocomplete-input-group,
- > .date-picker:not(:last-child) > .date-picker-input-group,
- > .time-picker:not(:last-child) > .time-picker-input-group,
- > .form-multi-select:not(:last-child) > .form-multi-select-input-group,
- > .form-password:not(:last-child) > .form-control,
+ > :not(:last-child) > .form-control-group,

.form-password also went from the sizing list and both focus/validation z-index lists, replaced by .form-control-group so a hand-authored frame is a first-class child of an input group.

One oddity disappeared with it: > .form-multi-select:not(:first-child) + .form-multi-select > .form-multi-select-input-group required two adjacent multi selects to square off the second one — almost certainly a typo, and unreachable either way.

Verification

Two visual cases, one per half of the contract — a hand-authored group and one a component builds for itself. Reverting the fix takes the first from 425×37 to 425×109 pixels, which is the broken row rendering itself.

The second is a regression lock rather than a proof: a corner radius on a 37 px element moves too few pixels to trip the comparator. The evidence for that half is the compiled-CSS count above.

Plus stylelint, fusv, the Sass suite, the class API guard, the other 28 visual baselines unchanged, and a full docs build. Migration guide carries the class mapping.

[coveralls]

Coverage Report for CI Build 30922704625

Coverage remained the same at 93.074%

Details

• Coverage remained the same as the base build.
• Patch coverage: No coverable lines changed in this PR.
• No coverage regressions found.

Uncovered Changes

No uncovered changes found.

Coverage Regressions

No coverage regressions found.

---

Coverage Stats

Relevant Lines:	8547
Covered Lines:	8165
Line Coverage:	95.53%
Relevant Branches:	4779
Covered Branches:	4238
Branch Coverage:	88.68%
Branches in Coverage %:	Yes
Coverage Strength:	365.76 hits per line

---

💛 - Coveralls