Creates a ColorSelect component inside the given element.
The host element that will contain the color picker.
Optional display and behaviour configuration.
ProtectedhostProtectedselectedProtectedconfigProtectedtriggerProtected OptionaltriggerProtected OptionaltriggerProtected OptionalnativeProtected OptionalcustomProtected OptionalcustomProtectednativeProtectedmenuGets the currently selected color value.
Sets the selected color value.
Releases DOM/event resources owned by the control.
Manually adds a color option to the menu. This is useful when the color options are dynamic or not known upfront.
The color value to add. Any web color or hexadecimal value including alpha channel.
Optionallabel: stringAn optional label for the color option.
Manually adds multiple color options to the menu. This is useful when the color options are dynamic or not known upfront.
An array of color values or objects containing color and optional label.
Removes all color options from the menu, including the transparent 'clear' and custom options if present. The menu will be left empty and the custom option will need to be re-added manually if desired.
Protected ReadonlyonHandles the click event on the trigger element. Opens or closes the menu based on its current state.
Protected ReadonlyonHandles the click event on the document. Closes the menu if the click is outside the host element.
Protected ReadonlyonHandles the click event on a color option. Selects the color and closes the menu.
Protected ReadonlyonHandles the input event on the native color input. Selects the color without closing the menu.
Protected ReadonlyonHandles the input event on the custom color input. Selects the color and closes the menu.
ProtectedselectSelects a color and updates the UI accordingly.
The color to select.
ProtectedbuildBuilds a preset color option button for the dropdown menu.
CSS color value for this option.
Optionallabel: stringOptional display label; defaults to the color value.
The constructed option button element.
ProtectedbuildBuilds the "custom" option button that opens the native color picker.
The constructed custom option button element.
ProtectedcreateCreates a color swatch element with its background set to the given color.
CSS color value to display in the swatch.
The swatch div element.
ProtectedcreateCreates the multi-colour gradient swatch used for the custom-colour option.
The swatch div element.
ProtectedcolorReturns the CSS background value to apply to a swatch element. Transparent colors are rendered as a checkerboard pattern.
CSS color string.
The CSS background shorthand value.
ProtectedsyncUpdates the trigger button's swatch, label, and native input to reflect the current selection.
ProtecteddisplayReturns the human-readable label for a color, showing 'clear' for transparent.
CSS color string.
Display label string.
ProtectednativeConverts a color to a 6-digit hex value accepted by native <input type="color">.
Falls back to a dark default when the color cannot be converted.
CSS color string.
A #rrggbb hex string.
ProtectedresolveNormalises the showNativeInput config value into one of the four known placement modes.
The raw config value.
One of 'start', 'end', 'option', or 'none'.
ProtectedcustomTriggers the custom color picker input, using showPicker() when available.
ProtectedinsertRebuilds basic options in canonical order at the top of the menu: inherit, clear, custom. Existing basic option elements are reused when possible to preserve listeners/state.
ProtectedhasReturns true when a menu option matching the given color already exists.
CSS color string to check.
True when the option is present.
ProtectednormalizeNormalises a CSS color string to a lowercase 6-digit hex so options can be compared reliably.
CSS color string to normalise.
Comparable lowercase color string.
ProtectedsyncToggles the selected CSS class and aria-selected attribute on all menu option buttons to reflect the current selection.
ProtectedopenAdds the open CSS class and updates aria-expanded on the trigger button.
ProtectedcloseRemoves the open CSS class and updates aria-expanded on the trigger button.
A color selection control that supports predefined options and an optional native color picker input. The control can be configured to show color swatches, labels, and the native input in different arrangements. It dispatches a 'colorchange' event with the selected color whenever the selection changes.