A colour field with a panel: a square for saturation and brightness, a hue strip, an optional opacity strip, a
row of preset colours and, in a browser that has one, the eyedropper. It always sends hex (#RRGGBB, or
#RRGGBBAA with alpha) in the text field named name, so a form reads it like any other field and
phx-change hears every change.
The area is a role="slider" moved with the pointer or the arrow keys (Shift for a bigger step); the hue and
opacity strips are native range inputs. Esc closes the panel and gives the focus back to the field. All words
are given by the caller, including the template that says the colour aloud (area_text), where %{color},
%{saturation} and %{brightness} are filled by the browser.
Summary
Functions
Attributes
id(:string) (required)name(:string) (required)value(:string) -#RRGGBB, or#RRGGBBAAwithalpha. Defaults to"#2563EB".label(:string) (required) - the visible name of the field.presets(:list) - the ready colours, as hex. Defaults to["#DC2626", "#EA580C", "#D29A1E", "#16A34A", "#0D9488", "#2563EB", "#7C3AED", "#DB2777"].alpha(:boolean) - adds the opacity strip. Defaults tofalse.error(:string) - Defaults tonil.toggle_label(:string) (required) - names the swatch button that opens the panel.area_label(:string) (required) - names the saturation and brightness square.area_text(:string) - what the square says aloud;%{color},%{saturation},%{brightness}are filled in. Defaults to"%{color}, saturation %{saturation}%, brightness %{brightness}%".hue_label(:string) (required)alpha_label(:string) - names the opacity strip; required withalpha. Defaults tonil.presets_label(:string) (required)eyedropper_label(:string) - the eyedropper button's text; it shows only when given. Defaults tonil.class(:any) - Defaults tonil.- Global attributes are accepted.