[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.