Fix Selects (for real)

[geoffrey-eisenbarth]

This aims to finish what was started in #50, #91, #140, #139, and most recently #152. While it seems like a lot, it doesn't actually introduce any breaking changes, and really is just a bug fix with an eye for the future.

Please review the docs carefully and play around with all the different select options. It's worth noting that to inspect the customizable selects and mess around with variables, you might need to use Canary since Chrome 145 DevTools has a bug that vomits due to light-dark(var(--one), var(--two)).

EDIT: Actually, as I was checking my version of Chrome, it updated to 146.0.7680.72 and the issue seems fixed!
EDIT 2: The Editing: Maybe Chrome DevTools is still broken. Canary works.

Consider giving some consideration to:

• Disabled styles
• Focused styles (e.g., tabbing into the customizable select and moving up and down with the arrow keys): Do we want outline-offset: -2px?
• optgroup > option padding: I use the standard calc(var(--rhythm, 1rlh) / 4) == .25rlh for padding, and then indent to 1em (setting --indent: calc(var(--rhythm, 1rlh) / 2) didn't seem like enough?
• Default widths. We considered adding something like (min-?)inline-size: 23ch. Not sure what would be best. Also whatever pseudo tables does doesn't seem to effect the widths of these. You can see in the six listboxes examples that they are sized slightly different bc of icons, they don't take up the full width, etc. This might need some nuance?

I think there's probably something I can do to clean up the visibility and display values of ::checkmark. Perhaps it's best discussed in person.

I think this is the last big thing for 1.2.1! 🎉

[geoffrey-eisenbarth]

A few notes

[geoffrey-eisenbarth]

Looks like simply supporting base-select isn't enough here: in Chrome 146.0.7680.72 the SelectedItem and SelectedItemColors are still forced on select[size!=1]:focus option:checked. Canary seems to implement a revert-rule that doesn't add UA focus colors.

Because of this, we should probably move this rule outside of the @supports block. However, I'm not sure if --graphical-fg is best, or if it should just match the accompanying focus ring that is on select:focus-visible e.g. --accent. Chrome also flips the text color like FF does, so it needs to be something that work with both light/dark text and can't contain transparency.