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

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](https://drafts.csswg.org/css-values/#combinator-multiplier-patterns) 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.