@thednp/color-picker 0.0.1-alpha1 → 0.0.1-alpha2

package/types/cp.d.ts

@@ -1,25 +1,24 @@
-declare module "color-picker/src/js/util/colorNames" {
-    export default colorNames;
+declare module "color-picker/src/js/util/nonColors" {
+    export default nonColors;
     /**
-     * A complete list of web safe colors.
-     * @see https://github.com/bahamas10/css-color-names/blob/master/css-color-names.json
-     * @type {string[]}
+     * A list of explicit default non-color values.
      */
-    const colorNames: string[];
+    const nonColors: string[];
 }
 declare module "color-picker/src/js/color" {
+    export default Color;
     /**
+     * @class
      * Returns a new `Color` instance.
      * @see https://github.com/bgrins/TinyColor
-     * @class
      */
-    export default class Color {
+    class Color {
         /**
          * @constructor
-         * @param {CP.ColorInput} input
-         * @param {CP.ColorOptions=} config
+         * @param {CP.ColorInput} input the given colour value
+         * @param {CP.ColorFormats=} config the given format
          */
-        constructor(input: CP.ColorInput, config?: CP.ColorOptions | undefined);
+        constructor(input: CP.ColorInput, config?: CP.ColorFormats | undefined);
         /** @type {CP.ColorInput} */
         originalInput: CP.ColorInput;
         /** @type {number} */
@@ -32,8 +31,6 @@ declare module "color-picker/src/js/color" {
         a: number;
         /** @type {boolean} */
         ok: boolean;
-        /** @type {number} */
-        roundA: number;
         /** @type {CP.ColorFormats} */
         format: CP.ColorFormats;
         /**
@@ -47,139 +44,268 @@ declare module "color-picker/src/js/color" {
          */
         get isDark(): boolean;
         /**
-         * Returns the perceived luminance of a color.
+         * Returns the perceived luminance of a colour.
          * @see http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
-         * @returns {number} a number in [0-1] range
+         * @returns {number} a number in the [0, 1] range
          */
         get luminance(): number;
         /**
-         * Returns the perceived brightness of the color.
-         * @returns {number} a number in [0-255] range
+         * Returns the perceived brightness of the colour.
+         * @returns {number} a number in the [0, 255] range
          */
         get brightness(): number;
         /**
-         * Returns the color as a RGBA object.
-         * @returns {CP.RGBA}
+         * Returns the colour as an RGBA object.
+         * @returns {CP.RGBA} an {r,g,b,a} object with [0, 255] ranged values
          */
         toRgb(): CP.RGBA;
         /**
-         * Returns the RGBA values concatenated into a string.
-         * @returns {string} the CSS valid color in RGB/RGBA format
+         * Returns the RGBA values concatenated into a CSS3 Module string format.
+         * * rgb(255,255,255)
+         * * rgba(255,255,255,0.5)
+         * @returns {string} the CSS valid colour in RGB/RGBA format
          */
         toRgbString(): string;
         /**
-         * Returns the HEX value of the color.
-         * @returns {string} the hexadecimal color format
+         * Returns the RGBA values concatenated into a CSS4 Module string format.
+         * * rgb(255 255 255)
+         * * rgb(255 255 255 / 50%)
+         * @returns {string} the CSS valid colour in CSS4 RGB format
          */
-        toHex(): string;
+        toRgbCSS4String(): string;
         /**
-         * Returns the HEX value of the color.
-         * @returns {string} the CSS valid color in hexadecimal format
+         * Returns the hexadecimal value of the colour. When the parameter is *true*
+         * it will find a 3 characters shorthand of the decimal value.
+         *
+         * @param {boolean=} allow3Char when `true` returns shorthand HEX
+         * @returns {string} the hexadecimal colour format
+         */
+        toHex(allow3Char?: boolean | undefined): string;
+        /**
+         * Returns the CSS valid hexadecimal vaue of the colour. When the parameter is *true*
+         * it will find a 3 characters shorthand of the value.
+         *
+         * @param {boolean=} allow3Char when `true` returns shorthand HEX
+         * @returns {string} the CSS valid colour in hexadecimal format
          */
-        toHexString(): string;
+        toHexString(allow3Char?: boolean | undefined): string;
         /**
-         * Returns the color as a HSVA object.
-         * @returns {CP.HSVA} the `{h,s,v,a}` object
+         * Returns the HEX8 value of the colour.
+         * @param {boolean=} allow4Char when `true` returns shorthand HEX
+         * @returns {string} the CSS valid colour in hexadecimal format
+         */
+        toHex8(allow4Char?: boolean | undefined): string;
+        /**
+         * Returns the HEX8 value of the colour.
+         * @param {boolean=} allow4Char  when `true` returns shorthand HEX
+         * @returns {string} the CSS valid colour in hexadecimal format
+         */
+        toHex8String(allow4Char?: boolean | undefined): string;
+        /**
+         * Returns the colour as a HSVA object.
+         * @returns {CP.HSVA} the `{h,s,v,a}` object with [0, 1] ranged values
          */
         toHsv(): CP.HSVA;
         /**
-         * Returns the color as a HSLA object.
-         * @returns {CP.HSLA}
+         * Returns the colour as an HSLA object.
+         * @returns {CP.HSLA} the `{h,s,l,a}` object with [0, 1] ranged values
          */
         toHsl(): CP.HSLA;
         /**
-         * Returns the HSLA values concatenated into a string.
-         * @returns {string} the CSS valid color in HSL/HSLA format
+         * Returns the HSLA values concatenated into a CSS3 Module format string.
+         * * `hsl(150, 100%, 50%)`
+         * * `hsla(150, 100%, 50%, 0.5)`
+         * @returns {string} the CSS valid colour in HSL/HSLA format
          */
         toHslString(): string;
         /**
-         * Sets the alpha value on the current color.
-         * @param {number} alpha a new alpha value in [0-1] range.
-         * @returns {Color} a new `Color` instance
+         * Returns the HSLA values concatenated into a CSS4 Module format string.
+         * * `hsl(150deg 100% 50%)`
+         * * `hsl(150deg 100% 50% / 50%)`
+         * @returns {string} the CSS valid colour in CSS4 HSL format
+         */
+        toHslCSS4String(): string;
+        /**
+         * Returns the colour as an HWBA object.
+         * @returns {CP.HWBA} the `{h,w,b,a}` object with [0, 1] ranged values
+         */
+        toHwb(): CP.HWBA;
+        /**
+         * Returns the HWBA values concatenated into a string.
+         * @returns {string} the CSS valid colour in HWB format
+         */
+        toHwbString(): string;
+        /**
+         * Sets the alpha value of the current colour.
+         * @param {number} alpha a new alpha value in the [0, 1] range.
+         * @returns {Color} the `Color` instance
          */
         setAlpha(alpha: number): Color;
         /**
-         * Saturate the color with a given amount.
-         * @param {number=} amount a value in [0-100] range
-         * @returns {Color} a new `Color` instance
+         * Saturate the colour with a given amount.
+         * @param {number=} amount a value in the [0, 100] range
+         * @returns {Color} the `Color` instance
          */
         saturate(amount?: number | undefined): Color;
         /**
-         * Desaturate the color with a given amount.
-         * @param {number=} amount a value in [0-100] range
-         * @returns {Color} a new `Color` instance
+         * Desaturate the colour with a given amount.
+         * @param {number=} amount a value in the [0, 100] range
+         * @returns {Color} the `Color` instance
          */
         desaturate(amount?: number | undefined): Color;
         /**
-         * Completely desaturates a color into greyscale.
+         * Completely desaturates a colour into greyscale.
          * Same as calling `desaturate(100)`
-         * @returns {Color} a new `Color` instance
+         * @returns {Color} the `Color` instance
          */
         greyscale(): Color;
+        /**
+         * Increase the colour lightness with a given amount.
+         * @param {number=} amount a value in the [0, 100] range
+         * @returns {Color} the `Color` instance
+         */
+        lighten(amount?: number | undefined): Color;
+        /**
+         * Decrease the colour lightness with a given amount.
+         * @param {number=} amount a value in the [0, 100] range
+         * @returns {Color} the `Color` instance
+         */
+        darken(amount?: number | undefined): Color;
+        /**
+         * Spin takes a positive or negative amount within [-360, 360] indicating the change of hue.
+         * Values outside of this range will be wrapped into this range.
+         *
+         * @param {number=} amount a value in the [0, 100] range
+         * @returns {Color} the `Color` instance
+         */
+        spin(amount?: number | undefined): Color;
         /** Returns a clone of the current `Color` instance. */
         clone(): Color;
         /**
-         * Returns the color value in CSS valid string format.
-         * @returns {string}
+         * Returns the colour value in CSS valid string format.
+         * @param {boolean=} allowShort when *true*, HEX values can be shorthand
+         * @returns {string} the CSS valid colour in the configured format
          */
-        toString(): string;
+        toString(allowShort?: boolean | undefined): string;
     }
 }
+declare module "color-picker/src/js/color-palette" {
+    /**
+     * @class
+     * Returns a color palette with a given set of parameters.
+     * @example
+     * new ColorPalette(0, 12, 10);
+     * // => { hue: 0, hueSteps: 12, lightSteps: 10, colors: array }
+     */
+    export default class ColorPalette {
+        /**
+         * The `hue` parameter is optional, which would be set to 0.
+         * @param {number[]} args represeinting hue, hueSteps, lightSteps
+         * * `args.hue` the starting Hue [0, 360]
+         * * `args.hueSteps` Hue Steps Count [5, 13]
+         * * `args.lightSteps` Lightness Steps Count [8, 10]
+         */
+        constructor(...args: number[]);
+        hue: number;
+        hueSteps: number;
+        lightSteps: number;
+        colors: string[];
+    }
+}
+declare module "color-picker/src/js/util/colorPickerLabels" {
+    export default colorPickerLabels;
+    /** @type {Record<string, string>} */
+    const colorPickerLabels: Record<string, string>;
+}
+declare module "color-picker/src/js/util/colorNames" {
+    export default colorNames;
+    /**
+     * A list of 17 color names used for WAI-ARIA compliance.
+     * @type {string[]}
+     */
+    const colorNames: string[];
+}
 declare module "color-picker/src/js/util/vHidden" {
     export default vHidden;
     const vHidden: "v-hidden";
 }
 declare module "color-picker/src/js/util/getColorForm" {
     /**
-     * Returns the color form.
+     * Returns the color form for `ColorPicker`.
+     *
      * @param {CP.ColorPicker} self the `ColorPicker` instance
-     * @returns {HTMLElement | Element}
+     * @returns {HTMLElement | Element} a new `<div>` element with color component `<input>`
      */
     export default function getColorForm(self: CP.ColorPicker): HTMLElement | Element;
 }
-declare module "color-picker/src/js/util/getColorControl" {
+declare module "color-picker/src/js/util/getColorControls" {
     /**
-     * Returns a new color control `HTMLElement`.
-     * @param {number} iteration
-     * @param {number} id
-     * @param {number} width
-     * @param {number} height
-     * @param {string=} labelledby
+     * Returns all color controls for `ColorPicker`.
+     *
+     * @param {CP.ColorPicker} self the `ColorPicker` instance
+     * @returns {HTMLElement | Element} color controls
+     */
+    export default function getColorControls(self: CP.ColorPicker): HTMLElement | Element;
+}
+declare module "color-picker/src/js/util/getColorMenu" {
+    /**
+     * Returns a color-defaults with given values and class.
+     * @param {CP.ColorPicker} self
+     * @param {CP.ColorPalette | string[]} colorsSource
+     * @param {string} menuClass
      * @returns {HTMLElement | Element}
      */
-    export default function getColorControl(iteration: number, id: number, width: number, height: number, labelledby?: string | undefined): HTMLElement | Element;
+    export default function getColorMenu(self: CP.ColorPicker, colorsSource: CP.ColorPalette | string[], menuClass: string): HTMLElement | Element;
+}
+declare module "color-picker/src/js/util/isValidJSON" {
+    /**
+     * Check if a string is valid JSON string.
+     * @param {string} str the string input
+     * @returns {boolean} the query result
+     */
+    export default function isValidJSON(str: string): boolean;
+}
+declare module "color-picker/src/js/version" {
+    export default Version;
+    const Version: string;
 }
 declare module "color-picker/src/js/color-picker" {
     /**
-     * Color Picker
+     * Color Picker Web Component
      * @see http://thednp.github.io/color-picker
      */
     export default class ColorPicker {
         /**
-         * Returns a new ColorPicker instance.
+         * Returns a new `ColorPicker` instance. The target of this constructor
+         * must be an `HTMLInputElement`.
+         *
          * @param {HTMLInputElement | string} target the target `<input>` element
+         * @param {CP.ColorPickerOptions=} config instance options
          */
-        constructor(target: HTMLInputElement | string);
-        /** @type {HTMLInputElement} */
+        constructor(target: HTMLInputElement | string, config?: CP.ColorPickerOptions | undefined);
         input: HTMLInputElement;
         /** @type {HTMLElement} */
         parent: HTMLElement;
         /** @type {number} */
         id: number;
-        /** @type {HTMLCanvasElement?} */
-        dragElement: HTMLCanvasElement | null;
+        /** @type {HTMLElement?} */
+        dragElement: HTMLElement | null;
         /** @type {boolean} */
         isOpen: boolean;
         /** @type {Record<string, number>} */
         controlPositions: Record<string, number>;
         /** @type {Record<string, string>} */
         colorLabels: Record<string, string>;
-        /** @type {Array<string> | false} */
-        keywords: Array<string> | false;
-        /** @type {Color} */
-        color: Color;
+        /** @type {string[]=} */
+        colorKeywords: string[] | undefined;
+        /** @type {(ColorPalette | string[])=} */
+        colorPresets: (ColorPalette | string[]) | undefined;
         /** @type {Record<string, string>} */
         componentLabels: Record<string, string>;
+        /** @type {Color} */
+        color: Color;
+        /** @type {CP.ColorFormats} */
+        format: CP.ColorFormats;
         /** Shows the `ColorPicker` dropdown. */
         showPicker(): void;
         /**
@@ -191,62 +317,69 @@ declare module "color-picker/src/js/color-picker" {
         /** Toggles the visibility of the `ColorPicker` presets menu. */
         toggleMenu(): void;
         /**
-         * Handles all `ColorPicker` click listeners.
+         * The `ColorPicker` click event listener for the colour menu presets / defaults.
          * @param {Partial<Event>} e
          * @this {ColorPicker}
          */
         menuClickHandler(this: ColorPicker, e: Partial<Event>): void;
         /**
-         * Handles all `ColorPicker` click listeners.
+         * The `ColorPicker` keyboard event listener for menu navigation.
          * @param {KeyboardEvent} e
          * @this {ColorPicker}
          */
         menuKeyHandler(this: ColorPicker, e: KeyboardEvent): void;
         /**
-         * Handles the `ColorPicker` touchstart / mousedown events listeners.
+         * The `ColorPicker` *touchstart* / *mousedown* events listener for control knobs.
          * @param {TouchEvent} e
          * @this {ColorPicker}
          */
         pointerDown(this: ColorPicker, e: TouchEvent): void;
         /**
-         * Handles the `ColorPicker` touchmove / mousemove events listeners.
+         * The `ColorPicker` *touchmove* / *mousemove* events listener for control knobs.
          * @param {TouchEvent} e
          */
         pointerMove(e: TouchEvent): void;
         /**
-         * Handles the `ColorPicker` touchend / mouseup events listeners.
+         * The `ColorPicker` *touchend* / *mouseup* events listener for control knobs.
          * @param {TouchEvent} e
          * @this {ColorPicker}
          */
         pointerUp(this: ColorPicker, { target }: TouchEvent): void;
         /**
-         * Handles the `ColorPicker` scroll listener when open.
+         * Updates `ColorPicker` control positions on:
+         * * initialization
+         * * window resize
+         */
+        update(): void;
+        /**
+         * The `ColorPicker` *scroll* event listener when open.
          * @param {Event} e
          * @this {ColorPicker}
          */
         handleScroll(this: ColorPicker, e: Event): void;
         /**
-         * Handles the `focusout` listener of the `ColorPicker`.
+         * The `ColorPicker` *focusout* event listener when open.
          * @param {FocusEvent} e
          * @this {ColorPicker}
          */
         handleFocusOut(this: ColorPicker, { relatedTarget }: FocusEvent): void;
-        /** Handles the event listeners of the color form. */
+        /** The event listener of the colour form inputs. */
         changeHandler(): void;
         /**
-         * Handles the `focusout` listener of the `ColorPicker`.
+         * The `ColorPicker` *keyup* event listener when open.
          * @param {KeyboardEvent} e
          * @this {ColorPicker}
          */
         handleDismiss(this: ColorPicker, { code }: KeyboardEvent): void;
         /**
-         * Handles the `Space` and `Enter` keys inputs.
+         * The `Space` & `Enter` keys specific event listener.
+         * Toggle visibility of the `ColorPicker` / the presets menu, showing one will hide the other.
          * @param {KeyboardEvent} e
          * @this {ColorPicker}
          */
-        keyHandler(this: ColorPicker, e: KeyboardEvent): void;
+        keyToggle(this: ColorPicker, e: KeyboardEvent): void;
         /**
-         * Handles the `ColorPicker` events listeners associated with the color knobs.
+         * The `ColorPicker` *keydown* event listener for control knobs.
          * @param {KeyboardEvent} e
          */
         handleKnobs(e: KeyboardEvent): void;
@@ -255,77 +388,44 @@ declare module "color-picker/src/js/color-picker" {
         /** @type {HTMLElement} */
         menuToggle: HTMLElement;
         /** @type {HTMLElement} */
-        colorMenu: HTMLElement;
-        /** @type {HTMLElement} */
         colorPicker: HTMLElement;
         /** @type {HTMLElement} */
-        controls: HTMLElement;
+        colorMenu: HTMLElement;
         /** @type {HTMLInputElement[]} */
         inputs: HTMLInputElement[];
+        controls: Element | HTMLElement;
+        /** @type {(HTMLElement | Element)[]} */
+        controlKnobs: (HTMLElement | Element)[];
         /** @type {(HTMLElement)[]} */
-        controlKnobs: (HTMLElement)[];
-        /** @type {HTMLCanvasElement[]} */
-        visuals: HTMLCanvasElement[];
-        /** @type {HTMLLabelElement[]} */
-        knobLabels: HTMLLabelElement[];
-        /** @type {HTMLLabelElement} */
-        appearance: HTMLLabelElement;
-        /** @type {number} */
-        width1: number;
-        /** @type {number} */
-        height1: number;
-        /** @type {number} */
-        width2: number;
-        /** @type {number} */
-        height2: number;
-        /** @type {*} */
-        ctx1: any;
-        /** @type {*} */
-        ctx2: any;
-        /** @type {number} */
-        width3: number;
-        /** @type {number} */
-        height3: number;
-        /** @type {*} */
-        ctx3: any;
+        visuals: (HTMLElement)[];
         /**
-         * Sets a new color value.
-         * @param {string} v new color value
+         * Sets a new colour value.
+         * @param {string} v new colour value
          */
         set value(arg: string);
-        /** Returns the current color value */
+        /** Returns the current colour value */
         get value(): string;
-        /** Check if the input is required to have a valid value. */
-        get required(): boolean;
-        /**
-         * Returns the colour format.
-         * @returns {CP.ColorFormats | string}
-         */
-        get format(): string;
-        /** Returns the input name. */
-        get name(): string | null;
-        /**
-         * Returns the label associated to the input.
-         * @returns {HTMLLabelElement?}
-         */
-        get label(): HTMLLabelElement | null;
-        /** Check if the color presets include any non-color. */
+        /** Check if the colour presets include any non-colour. */
         get includeNonColor(): boolean;
-        /** Returns hexadecimal value of the current color. */
+        /** Check if the parent of the target is a `ColorPickerElement` instance. */
+        get isCE(): boolean;
+        /** Returns hexadecimal value of the current colour. */
         get hex(): string;
-        /** Returns the current color value in {h,s,v,a} object format. */
+        /** Returns the current colour value in {h,s,v,a} object format. */
         get hsv(): CP.HSVA;
-        /** Returns the current color value in {h,s,l,a} object format. */
+        /** Returns the current colour value in {h,s,l,a} object format. */
         get hsl(): CP.HSLA;
-        /** Returns the current color value in {r,g,b,a} object format. */
+        /** Returns the current colour value in {h,w,b,a} object format. */
+        get hwb(): CP.HWBA;
+        /** Returns the current colour value in {r,g,b,a} object format. */
         get rgb(): CP.RGBA;
-        /** Returns the current color brightness. */
+        /** Returns the current colour brightness. */
         get brightness(): number;
-        /** Returns the current color luminance. */
+        /** Returns the current colour luminance. */
         get luminance(): number;
-        /** Checks if the current colour requires a light text color. */
+        /** Checks if the current colour requires a light text colour. */
         get isDark(): boolean;
-        /** Checks if the current input value is a valid color. */
+        /** Checks if the current input value is a valid colour. */
         get isValid(): boolean;
         /** Updates `ColorPicker` visuals. */
         updateVisuals(): void;
@@ -334,71 +434,73 @@ declare module "color-picker/src/js/color-picker" {
          * * `lightness` and `saturation` for HEX/RGB;
          * * `lightness` and `hue` for HSL.
          *
-         * @param {Record<string, number>} offsets
+         * @param {number} X the X component of the offset
+         * @param {number} Y the Y component of the offset
          */
-        changeControl1(offsets: Record<string, number>): void;
+        changeControl1(X: number, Y: number): void;
         /**
          * Updates `ColorPicker` second control:
-         * * `hue` for HEX/RGB;
+         * * `hue` for HEX/RGB/HWB;
          * * `saturation` for HSL.
          *
-         * @param {Record<string, number>} offset
+         * @param {number} Y the Y offset
          */
-        changeControl2(offset: Record<string, number>): void;
+        changeControl2(Y: number): void;
         /**
          * Updates `ColorPicker` last control,
-         * the `alpha` channel for RGB/HSL.
+         * the `alpha` channel.
          *
-         * @param {Record<string, number>} offset
+         * @param {number} Y
          */
-        changeAlpha(offset: Record<string, number>): void;
-        /** Update opened dropdown position on scroll. */
+        changeAlpha(Y: number): void;
+        /** Updates the open dropdown position on *scroll* event. */
         updateDropdownPosition(): void;
-        /** Update control knobs' positions. */
+        /** Updates control knobs' positions. */
         setControlPositions(): void;
-        /** Update the visual appearance label. */
-        setColorAppearence(): void;
-        /** Updates the control knobs positions. */
+        /** Update the visual appearance label and control knob labels. */
+        updateAppearance(): void;
+        /** Updates the control knobs actual positions. */
         updateControls(): void;
         /**
-         * Update all color form inputs.
+         * Updates all color form inputs.
          * @param {boolean=} isPrevented when `true`, the component original event is prevented
          */
         updateInputs(isPrevented?: boolean | undefined): void;
-        /** Show the dropdown. */
+        /** Shows the `ColorPicker` dropdown or the presets menu. */
         show(): void;
         /**
-         * Hides the currently opened dropdown.
+         * Hides the currently open `ColorPicker` dropdown.
          * @param {boolean=} focusPrevented
          */
         hide(focusPrevented?: boolean | undefined): void;
+        /** Removes `ColorPicker` from target `<input>`. */
         dispose(): void;
     }
+    import ColorPalette from "color-picker/src/js/color-palette";
     import Color from "color-picker/src/js/color";
 }
 declare module "color-picker/src/js/color-picker-element" {
     export default ColorPickerElement;
     /**
-     * @see https://codepen.io/dgrammatiko/pen/zLvXwR
-     * @see https://codepen.io/thednp/pen/yLVzZzW
-     * @see https://www.eyecon.ro/colorpicker/
-     * @see http://www.dematte.at/colorPicker/
-     *
+     * `ColorPickerElement` Web Component.
      * @example
      * <color-picker>
      *   <input type="text">
      * </color-picker>
      */
     class ColorPickerElement extends HTMLElement {
-        /** @type {ColorPicker?} */
-        colorPicker: ColorPicker | null;
-        /** @type {HTMLInputElement} */
-        input: HTMLInputElement;
         /** @type {boolean} */
         isDisconnected: boolean;
-        get value(): string;
-        get color(): Color | null;
+        /**
+         * Returns the current color value.
+         * @returns {string?}
+         */
+        get value(): string | null;
         connectedCallback(): void;
+        /** @type {HTMLInputElement} */
+        input: HTMLInputElement | undefined;
+        colorPicker: ColorPicker | undefined;
+        color: Color | undefined;
         disconnectedCallback(): void;
     }
     import ColorPicker from "color-picker/src/js/color-picker";
@@ -406,6 +508,7 @@ declare module "color-picker/src/js/color-picker-element" {
 }
 declare module "color-picker/types/source/source" {
     export { default as Color } from "color-picker/src/js/color";
+    export { default as ColorPalette } from "color-picker/src/js/color-palette";
     export { default as ColorPicker } from "color-picker/src/js/color-picker";
     export { default as ColorPickerElement } from "color-picker/src/js/color-picker-element";
 }