[css-forms-1] use calc-size() for improved sizing of <button> and <select>

[dbaron]

In #12019 (comment) and in the related presentation I proposed that we change the styles that are currently (for <button> and <select>):

  min-block-size: max(24px, 1lh);
  min-inline-size: 24px;

into:

  min-block-size: calc-size(auto, max(24px, 1lh, size));
  min-inline-size: calc-size(auto, max(24px, size));

This has the advantage that (as described in the examples in the presentation) we no longer override the intrinsic size of the text in the button or select, and thus it defaults to reasonable sizing behavior in flexbox and grid (rather than being willing to shrink down very small).

We didn't resolve on doing that in that issue, and this separate issue is to discuss whether we should in fact make that change. (I think we probably should.)

[nt1m]

Seems like an improvement over status quo, although I wonder if there's ways we can avoid setting min-block-size / min-inline-size altogether and still meet accessibility requirements (e.g. setting a minimum padding for instance).

Min sizes within UA styles always irked me a bit, especially if the developer has a good reason to make something smaller. It often feels like the last thing you would think about overriding, whereas padding is more common to override.

[nt1m]

(Not necessarily suggesting we should use padding, but I'm just saying that default UA min sizes are often overlooked)

[lukewarlow]

While that might be true I guess if we have a baseline stylesheet people will have, well a baseline to think about. Adjusting minimum sizing will become second nature eventually.