[color-swatch] `--details-style: compact` does not cover use cases well

[LeaVerou]

Currently, this is too all or nothing: either show all details under the color, or all in the popup. There are many cases where you want to show some details under the swatch and some in the popup. E.g. a very common scenario is to show the color name under it, but the color coordinates in the popup. There are even cases where you want to show some info in the popup and others under the scale, though that's more rare.

There are 3 types of info:

• Color name
• Color code
• info (specified via info and vs)

Additionally, --details-style: compact was designed to be high level, the theory being that a popup was just one of many potential compact renderings. However, in reality there aren't any others, and this is just ...awkward.

I propose, a popup attribute (and corresponding --color-swatch-popup CSS property) with a grammar like:

--color-swatch-popup: [ name || code || info ] | none

Additionally, when the attribute is used instead of the CSS property, we could take care of the tabindex thing too. Eventually, we could use a style observer to monitor the property too and apply it then as well.

Perhaps later we could add a popupinfo attribute with info just for the popup, but that's very low priority.

[LeaVerou]

We've been recently discussing making --details-style: compact into an attribute, so it's a good time to address this as well.

Perhaps the attribute could be something like info-collapsed or collapsedinfo (or something else, not a huge fan of the length of either of these) and take exactly the same values as info plus name and code, but shows them in a popup instead. Though then there is no way to hide these entirely… 🤔 Perhaps we could change info to need to supply them explicitly, and assume that it's default value is name code.

Down the line we may also want to support things like code.oklch, code.hex etc to display different formats.