[color-picker] Alpha

[LeaVerou]

<color-picker> should optionally support alpha (see https://colorjs.io/apps/picker/ )

We could have a boolean alpha property for that. If the picker color includes alpha, but this.alpha === false, the generated color would just continue having that alpha.

Though, we can kill two birds with one stone and have a sliders or show property that controls all sliders shown and their order. E.g. show="l, c, h, alpha".

In the future it could even be extended to include sliders from other color spaces, like sliders="oklch.h, lch.c, hsl.l", though not sure whether there are use cases for that. But the syntax can support it if use cases arise!

[DmitrySharabin]

But we still need a way to add the alpha channel, right? We probably don’t want authors to specify all channels to simply enable alpha.

Something like <color-picker space="hsl" alpha> is a shortcut for <color-picker space="hsl" sliders="h, s, l, alpha">?

[LeaVerou]

How about channels instead of sliders for the attribute name? For example, <color-picker space="oklch" channels="h, l">. Looks rad. :)

Not sure if alpha can be considered a channel, but otherwise not opposed to it.

But we still need a way to add the alpha channel, right? We probably don’t want authors to specify all channels to simply enable alpha.

Something like <color-picker space="hsl" alpha> is a shortcut for <color-picker space="hsl" sliders="h, s, l, alpha">?

Oooh that’s a good point. It may be trivial to specify them for static spaces, but it becomes quite a hassle when the color space is dynamic. I'm trying to avoid introducing error conditions, and having two attributes that need to be in sync creates an error condition.

I can see two solutions:

1. Relative identifiers, e.g. show="+alpha" (or channels="+alpha") would mean "add alpha to whatever you'd normally show", whereas show="alpha" would mean "_only_ show alpha", andshow="-c" would mean "remove c from what you’d normally show. This is probably the most flexible, but not sure it’s worth the complexity.
2. Just go with the boolean alpha attribute for now, and if we introduce a channels attribute it would only be for channels. This is definitely simpler to implement, and it means we can defer channels to later.

[DmitrySharabin]

2. Just go with the boolean alpha attribute for now, and if we introduce a channels attribute it would only be for channels. This is definitely simpler to implement, and it means we can defer channels to later.

Already done in https://github.com/color-js/elements/pull/63. :)