This is a “web component,” which mostly just means it’s a custom HTML element as opposed to a vendor HTML element. It doesn’t use any frameworks or polyfills, so right now it’s only suitable for use when doing something like an Electron app.
It can be styled and configued through CSS props and HTML attributes (and also ES, naturally). Note that, as yet, there isn’t a clean way to make custom elements behave as form elements. There’s a hacky helper for this included as a stop-gap.
The most important attribute is mode, which both sets the color system and determines which axis is which. So for example "hcl" is hue-chroma-luminance, while "hlc" is too but sets hue to the x axis, luminance to the y axis, and chroma to the z-axis.
mode
clamp
The element uses the shadow DOM, which provides encapsulation of the interior elements, both from the ES layer (to some extent) and from global CSS. But we do want to expose some things for styling. The vendor DOM uses pseudo elements for this, and there’s no equivalent for custom elements yet. However custom CSS properties are sometimes (as here) able to fulfill that role reasonably well — and also permit the creation of more nuanced and expressive CSS rules with unique semantics.
--color-input-gutter-width
--color-input-high-res
--color-input-x-axis-direction
--color-input-y-axis-direction
--color-input-z-axis-direction
--color-input-z-axis-position
--color-input-z-axis-width
height
width
--color-input-field-position
--color-input-xy-border
--color-input-xy-border-radius
--color-input-z-border
--color-input-z-border-radius