@esri/calcite-components 1.0.0-beta.95 → 1.0.0-beta.97

package/dist/collection/components/color-picker/color-picker.js

@@ -1,12 +1,12 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.95
+ * v1.0.0-beta.97
  */
-import { Component, Element, Event, h, Listen, Method, Prop, State, Watch } from "@stencil/core";
+import { h } from "@stencil/core";
 import Color from "color";
 import { CSS, DEFAULT_COLOR, DEFAULT_STORAGE_KEY_PREFIX, DIMENSIONS, HSV_LIMITS, RGB_LIMITS, TEXT } from "./resources";
-import { focusElement, getElementDir } from "../../utils/dom";
+import { focusElement, getElementDir, isPrimaryPointerButton } from "../../utils/dom";
 import { colorEqual, CSSColorMode, normalizeHex, parseMode } from "./utils";
 import { throttle } from "lodash-es";
 import { clamp } from "../../utils/math";
@@ -23,12 +23,16 @@ export class ColorPicker {
     //
     //--------------------------------------------------------------------------
     /**
-     * When false, empty color (null) will be allowed as a value. Otherwise, a color value is always enforced by the component.
+     * When `false`, an empty color (`null`) will be allowed as a `value`. Otherwise, a color value is enforced on the component.
      *
-     * When true, clearing the input and blurring will restore the last valid color set. When false, it will set it to empty.
+     * When `true`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`. When `false`, an empty color (`null`) will be allowed as a `value`.
      */
     this.allowEmpty = false;
-    /** specify the appearance - solid (containing border), or minimal (no containing border) */
+    /**
+     * Specifies the appearance style of the component -
+     *
+     * `"solid"` (containing border) or `"minimal"` (no containing border).
+     */
     this.appearance = "solid";
     /**
      * Internal prop for advanced use-cases.
@@ -37,146 +41,141 @@ export class ColorPicker {
      */
     this.color = DEFAULT_COLOR;
     /**
-     * When true, disabled prevents user interaction.
+     * When `true`, interaction is prevented and the component is displayed with lower opacity.
      */
     this.disabled = false;
     /**
-     * The format of the value property.
+     * The format of `value`.
      *
-     * When "auto", the format will be inferred from `value` when set.
+     * When `"auto"`, the format will be inferred from `value` when set.
      *
      * @default "auto"
      */
     this.format = defaultFormat;
-    /** When true, hides the hex input */
+    /** When `true`, hides the Hex input. */
     this.hideHex = false;
-    /** When true, hides the RGB/HSV channel inputs */
+    /** When `true`, hides the RGB/HSV channel inputs. */
     this.hideChannels = false;
-    /** When true, hides the saved colors section */
+    /** When `true`, hides the saved colors section. */
     this.hideSaved = false;
     /**
-     * Label used for the blue channel
+     * Accessible name for the RGB section's blue channel.
      *
      * @default "B"
      */
     this.intlB = TEXT.b;
     /**
-     * Label used for the blue channel description
+     * Accessible name for the RGB section's blue channel description.
      *
      * @default "Blue"
      */
     this.intlBlue = TEXT.blue;
     /**
-     * Label used for the delete color button.
+     * Accessible name for the delete color button.
      *
      * @default "Delete color"
      */
     this.intlDeleteColor = TEXT.deleteColor;
     /**
-     * Label used for the green channel
+     * Accessible name for the RGB section's green channel.
      *
      * @default "G"
      */
     this.intlG = TEXT.g;
     /**
-     * Label used for the green channel description
+     * Accessible name for the RGB section's green channel description.
      *
      * @default "Green"
      */
     this.intlGreen = TEXT.green;
     /**
-     * Label used for the hue channel
+     * Accessible name for the HSV section's hue channel.
      *
      * @default "H"
      */
     this.intlH = TEXT.h;
     /**
-     * Label used for the HSV mode
+     * Accessible name for the HSV mode.
      *
      * @default "HSV"
      */
     this.intlHsv = TEXT.hsv;
     /**
-     * Label used for the hex input
+     * Accessible name for the Hex input.
      *
      * @default "Hex"
      */
     this.intlHex = TEXT.hex;
     /**
-     * Label used for the hue channel description
+     * Accessible name for the HSV section's hue channel description.
      *
      * @default "Hue"
      */
     this.intlHue = TEXT.hue;
     /**
-     * Label used for the hex input when there is no color selected.
+     * Accessible name for the Hex input when there is no color selected.
      *
      * @default "No color"
      */
     this.intlNoColor = TEXT.noColor;
     /**
-     * Label used for the red channel
+     * Accessible name for the RGB section's red channel.
      *
      * @default "R"
      */
     this.intlR = TEXT.r;
     /**
-     * Label used for the red channel description
+     * Accessible name for the RGB section's red channel description.
      *
      * @default "Red"
      */
     this.intlRed = TEXT.red;
     /**
-     * Label used for the RGB mode
+     * Accessible name for the RGB mode.
      *
      * @default "RGB"
      */
     this.intlRgb = TEXT.rgb;
     /**
-     * Label used for the saturation channel
+     * Accessible name for the HSV section's saturation channel.
      *
      * @default "S"
      */
     this.intlS = TEXT.s;
     /**
-     * Label used for the saturation channel description
+     * Accessible name for the HSV section's saturation channel description.
      *
      * @default "Saturation"
      */
     this.intlSaturation = TEXT.saturation;
     /**
-     * Label used for the save color button.
+     * Accessible name for the save color button.
      *
      * @default "Save color"
      */
     this.intlSaveColor = TEXT.saveColor;
     /**
-     * Label used for the saved colors section
+     * Accessible name for the saved colors section.
      *
      * @default "Saved"
      */
     this.intlSaved = TEXT.saved;
     /**
-     * Label used for the value channel
+     * Accessible name for the HSV section's value channel.
      *
      * @default "V"
      */
     this.intlV = TEXT.v;
     /**
-     * Label used for the
+     * Accessible name for the HSV section's value channel description.
      *
      * @default "Value"
      */
     this.intlValue = TEXT.value;
-    /**
-     * The scale of the color picker.
-     */
+    /** Specifies the size of the component. */
     this.scale = "m";
     /**
-     * The component's value.
-     *
-     * This value can be either a CSS color string,
-     * a RGB, HSL or HSV object.
+     * The component's value, where the value can be a CSS color string, or a RGB, HSL or HSV object.
      *
      * The type will be preserved as the color is updated.
      *
@@ -298,6 +297,9 @@ export class ColorPicker {
     };
     this.handleColorFieldAndSliderPointerDown = (event) => {
       var _a, _b;
+      if (!isPrimaryPointerButton(event)) {
+        return;
+      }
       const { offsetX, offsetY } = event;
       const region = this.getCanvasRegion(offsetY);
       if (region === "color-field") {
@@ -317,7 +319,10 @@ export class ColorPicker {
       this.activeColorFieldAndSliderRect =
         this.fieldAndSliderRenderingContext.canvas.getBoundingClientRect();
     };
-    this.globalPointerUpHandler = () => {
+    this.globalPointerUpHandler = (event) => {
+      if (!isPrimaryPointerButton(event)) {
+        return;
+      }
       const previouslyDragging = this.sliderThumbState === "drag" || this.hueThumbState === "drag";
       this.hueThumbState = "idle";
       this.sliderThumbState = "idle";
@@ -445,10 +450,9 @@ export class ColorPicker {
         ? [intlRed, intlGreen, intlBlue]
         : [intlHue, intlSaturation, intlValue];
       const direction = getElementDir(this.el);
-      return (h("calcite-tab", { active: active, class: CSS.control, key: channelMode },
-        h("div", { class: CSS.channels, dir: "ltr" }, channels.map((channel, index) => 
-        /* the channel container is ltr, so we apply the host's direction */
-        this.renderChannel(channel, index, channelLabels[index], channelAriaLabels[index], direction)))));
+      return (h("calcite-tab", { active: active, class: CSS.control, key: channelMode }, h("div", { class: CSS.channels, dir: "ltr" }, channels.map((channel, index) => 
+      /* the channel container is ltr, so we apply the host's direction */
+      this.renderChannel(channel, index, channelLabels[index], channelAriaLabels[index], direction)))));
     };
     this.renderChannel = (value, index, label, ariaLabel, direction) => (h("calcite-input", { class: CSS.channel, "data-channel-index": index, dir: direction, label: ariaLabel, numberButtonType: "none", numberingSystem: this.numberingSystem, onCalciteInputChange: this.handleChannelChange, onCalciteInputInput: this.handleChannelInput, onKeyDown: this.handleKeyDown, prefixText: label, scale: this.scale === "l" ? "m" : "s", type: "number", value: value === null || value === void 0 ? void 0 : value.toString() }));
     this.deleteColor = () => {
@@ -624,42 +628,21 @@ export class ColorPicker {
     const hueLeft = hueScopeLeft !== null && hueScopeLeft !== void 0 ? hueScopeLeft : (colorFieldWidth * DEFAULT_COLOR.hue()) / HSV_LIMITS.h;
     const noColor = color === null;
     const vertical = scopeOrientation === "vertical";
-    return (h("div", { class: CSS.container },
-      h("div", { class: CSS.colorFieldAndSliderWrap },
-        h("canvas", { class: {
-            [CSS.colorFieldAndSlider]: true,
-            [CSS.colorFieldAndSliderInteractive]: colorFieldAndSliderInteractive
-          }, onPointerDown: this.handleColorFieldAndSliderPointerDown, onPointerEnter: this.handleColorFieldAndSliderPointerEnterOrMove, onPointerLeave: this.handleColorFieldAndSliderPointerLeave, onPointerMove: this.handleColorFieldAndSliderPointerEnterOrMove, ref: this.initColorFieldAndSlider }),
-        h("div", { "aria-label": vertical ? this.intlValue : this.intlSaturation, "aria-valuemax": vertical ? HSV_LIMITS.v : HSV_LIMITS.s, "aria-valuemin": "0", "aria-valuenow": (vertical ? color === null || color === void 0 ? void 0 : color.saturationv() : color === null || color === void 0 ? void 0 : color.value()) || "0", class: { [CSS.scope]: true, [CSS.colorFieldScope]: true }, onKeyDown: this.handleColorFieldScopeKeyDown, ref: this.storeColorFieldScope, role: "slider", style: { top: `${colorFieldScopeTop || 0}px`, left: `${colorFieldScopeLeft || 0}px` }, tabindex: "0" }),
-        h("div", { "aria-label": this.intlHue, "aria-valuemax": HSV_LIMITS.h, "aria-valuemin": "0", "aria-valuenow": (color === null || color === void 0 ? void 0 : color.round().hue()) || DEFAULT_COLOR.round().hue(), class: { [CSS.scope]: true, [CSS.hueScope]: true }, onKeyDown: this.handleHueScopeKeyDown, ref: this.storeHueScope, role: "slider", style: { top: `${hueTop}px`, left: `${hueLeft}px` }, tabindex: "0" })),
-      hideHex && hideChannels ? null : (h("div", { class: {
-          [CSS.controlSection]: true,
-          [CSS.section]: true
-        } },
-        hideHex ? null : (h("div", { class: CSS.hexOptions },
-          h("span", { class: {
-              [CSS.header]: true,
-              [CSS.headerHex]: true
-            } }, intlHex),
-          h("calcite-color-picker-hex-input", { allowEmpty: allowEmpty, class: CSS.control, numberingSystem: this.numberingSystem, onCalciteColorPickerHexInputChange: this.handleHexInputChange, scale: hexInputScale, value: selectedColorInHex }))),
-        hideChannels ? null : (h("calcite-tabs", { class: {
-            [CSS.colorModeContainer]: true,
-            [CSS.splitSection]: true
-          }, scale: hexInputScale },
-          h("calcite-tab-nav", { slot: "tab-nav" },
-            this.renderChannelsTabTitle("rgb"),
-            this.renderChannelsTabTitle("hsv")),
-          this.renderChannelsTab("rgb"),
-          this.renderChannelsTab("hsv"))))),
-      hideSaved ? null : (h("div", { class: { [CSS.savedColorsSection]: true, [CSS.section]: true } },
-        h("div", { class: CSS.header },
-          h("label", null, intlSaved),
-          h("div", { class: CSS.savedColorsButtons },
-            h("calcite-button", { appearance: "transparent", class: CSS.deleteColor, color: "neutral", disabled: noColor, iconStart: "minus", label: intlDeleteColor, onClick: this.deleteColor, scale: hexInputScale, type: "button" }),
-            h("calcite-button", { appearance: "transparent", class: CSS.saveColor, color: "neutral", disabled: noColor, iconStart: "plus", label: intlSaveColor, onClick: this.saveColor, scale: hexInputScale, type: "button" }))),
-        savedColors.length > 0 ? (h("div", { class: CSS.savedColors }, [
-          ...savedColors.map((color) => (h("calcite-color-picker-swatch", { active: selectedColorInHex === color, class: CSS.savedColor, color: color, key: color, onClick: this.handleSavedColorSelect, onKeyDown: this.handleSavedColorKeyDown, scale: scale, tabIndex: 0 })))
-        ])) : null))));
+    return (h("div", { class: CSS.container }, h("div", { class: CSS.colorFieldAndSliderWrap }, h("canvas", { class: {
+        [CSS.colorFieldAndSlider]: true,
+        [CSS.colorFieldAndSliderInteractive]: colorFieldAndSliderInteractive
+      }, onPointerDown: this.handleColorFieldAndSliderPointerDown, onPointerEnter: this.handleColorFieldAndSliderPointerEnterOrMove, onPointerLeave: this.handleColorFieldAndSliderPointerLeave, onPointerMove: this.handleColorFieldAndSliderPointerEnterOrMove, ref: this.initColorFieldAndSlider }), h("div", { "aria-label": vertical ? this.intlValue : this.intlSaturation, "aria-valuemax": vertical ? HSV_LIMITS.v : HSV_LIMITS.s, "aria-valuemin": "0", "aria-valuenow": (vertical ? color === null || color === void 0 ? void 0 : color.saturationv() : color === null || color === void 0 ? void 0 : color.value()) || "0", class: { [CSS.scope]: true, [CSS.colorFieldScope]: true }, onKeyDown: this.handleColorFieldScopeKeyDown, ref: this.storeColorFieldScope, role: "slider", style: { top: `${colorFieldScopeTop || 0}px`, left: `${colorFieldScopeLeft || 0}px` }, tabindex: "0" }), h("div", { "aria-label": this.intlHue, "aria-valuemax": HSV_LIMITS.h, "aria-valuemin": "0", "aria-valuenow": (color === null || color === void 0 ? void 0 : color.round().hue()) || DEFAULT_COLOR.round().hue(), class: { [CSS.scope]: true, [CSS.hueScope]: true }, onKeyDown: this.handleHueScopeKeyDown, ref: this.storeHueScope, role: "slider", style: { top: `${hueTop}px`, left: `${hueLeft}px` }, tabindex: "0" })), hideHex && hideChannels ? null : (h("div", { class: {
+        [CSS.controlSection]: true,
+        [CSS.section]: true
+      } }, hideHex ? null : (h("div", { class: CSS.hexOptions }, h("span", { class: {
+        [CSS.header]: true,
+        [CSS.headerHex]: true
+      } }, intlHex), h("calcite-color-picker-hex-input", { allowEmpty: allowEmpty, class: CSS.control, numberingSystem: this.numberingSystem, onCalciteColorPickerHexInputChange: this.handleHexInputChange, scale: hexInputScale, value: selectedColorInHex }))), hideChannels ? null : (h("calcite-tabs", { class: {
+        [CSS.colorModeContainer]: true,
+        [CSS.splitSection]: true
+      }, scale: hexInputScale }, h("calcite-tab-nav", { slot: "tab-nav" }, this.renderChannelsTabTitle("rgb"), this.renderChannelsTabTitle("hsv")), this.renderChannelsTab("rgb"), this.renderChannelsTab("hsv"))))), hideSaved ? null : (h("div", { class: { [CSS.savedColorsSection]: true, [CSS.section]: true } }, h("div", { class: CSS.header }, h("label", null, intlSaved), h("div", { class: CSS.savedColorsButtons }, h("calcite-button", { appearance: "transparent", class: CSS.deleteColor, color: "neutral", disabled: noColor, iconStart: "minus", label: intlDeleteColor, onClick: this.deleteColor, scale: hexInputScale, type: "button" }), h("calcite-button", { appearance: "transparent", class: CSS.saveColor, color: "neutral", disabled: noColor, iconStart: "plus", label: intlSaveColor, onClick: this.saveColor, scale: hexInputScale, type: "button" }))), savedColors.length > 0 ? (h("div", { class: CSS.savedColors }, [
+      ...savedColors.map((color) => (h("calcite-color-picker-swatch", { active: selectedColorInHex === color, class: CSS.savedColor, color: color, key: color, onClick: this.handleSavedColorSelect, onKeyDown: this.handleSavedColorKeyDown, scale: scale, tabIndex: 0 })))
+    ])) : null))));
   }
   // --------------------------------------------------------------------------
   //
@@ -845,751 +828,772 @@ export class ColorPicker {
   }
   static get is() { return "calcite-color-picker"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["color-picker.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["color-picker.css"]
-  }; }
-  static get properties() { return {
-    "allowEmpty": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When false, empty color (null) will be allowed as a value. Otherwise, a color value is always enforced by the component.\n\nWhen true, clearing the input and blurring will restore the last valid color set. When false, it will set it to empty."
-      },
-      "attribute": "allow-empty",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "appearance": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "ColorAppearance",
-        "resolved": "\"default\" | \"minimal\" | \"solid\"",
-        "references": {
-          "ColorAppearance": {
-            "location": "import",
-            "path": "./interfaces"
+  static get originalStyleUrls() {
+    return {
+      "$": ["color-picker.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["color-picker.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "allowEmpty": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When `false`, an empty color (`null`) will be allowed as a `value`. Otherwise, a color value is enforced on the component.\n\nWhen `true`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`. When `false`, an empty color (`null`) will be allowed as a `value`."
+        },
+        "attribute": "allow-empty",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "appearance": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ColorAppearance",
+          "resolved": "\"default\" | \"minimal\" | \"solid\"",
+          "references": {
+            "ColorAppearance": {
+              "location": "import",
+              "path": "./interfaces"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "specify the appearance - solid (containing border), or minimal (no containing border)"
-      },
-      "attribute": "appearance",
-      "reflect": true,
-      "defaultValue": "\"solid\""
-    },
-    "color": {
-      "type": "unknown",
-      "mutable": true,
-      "complexType": {
-        "original": "InternalColor | null",
-        "resolved": "Color<ColorParam>",
-        "references": {
-          "InternalColor": {
-            "location": "import",
-            "path": "./interfaces"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the appearance style of the component -\n\n`\"solid\"` (containing border) or `\"minimal\"` (no containing border)."
+        },
+        "attribute": "appearance",
+        "reflect": true,
+        "defaultValue": "\"solid\""
+      },
+      "color": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "InternalColor | null",
+          "resolved": "Color<ColorParam>",
+          "references": {
+            "InternalColor": {
+              "location": "import",
+              "path": "./interfaces"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "internal",
-            "text": undefined
-          }],
-        "text": "Internal prop for advanced use-cases."
-      },
-      "defaultValue": "DEFAULT_COLOR"
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, disabled prevents user interaction."
-      },
-      "attribute": "disabled",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "format": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "Format",
-        "resolved": "\"auto\" | \"hex\" | \"hexa\" | \"hsl\" | \"hsl-css\" | \"hsla\" | \"hsla-css\" | \"hsv\" | \"hsva\" | \"rgb\" | \"rgb-css\" | \"rgba\" | \"rgba-css\"",
-        "references": {
-          "Format": {
-            "location": "import",
-            "path": "./utils"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "Internal prop for advanced use-cases."
+        },
+        "defaultValue": "DEFAULT_COLOR"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When `true`, interaction is prevented and the component is displayed with lower opacity."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "format": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Format",
+          "resolved": "\"auto\" | \"hex\" | \"hexa\" | \"hsl\" | \"hsl-css\" | \"hsla\" | \"hsla-css\" | \"hsv\" | \"hsva\" | \"rgb\" | \"rgb-css\" | \"rgba\" | \"rgba-css\"",
+          "references": {
+            "Format": {
+              "location": "import",
+              "path": "./utils"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"auto\""
-          }],
-        "text": "The format of the value property.\n\nWhen \"auto\", the format will be inferred from `value` when set."
-      },
-      "attribute": "format",
-      "reflect": true,
-      "defaultValue": "defaultFormat"
-    },
-    "hideHex": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, hides the hex input"
-      },
-      "attribute": "hide-hex",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "hideChannels": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, hides the RGB/HSV channel inputs"
-      },
-      "attribute": "hide-channels",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "hideSaved": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, hides the saved colors section"
-      },
-      "attribute": "hide-saved",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "intlB": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"B\""
-          }],
-        "text": "Label used for the blue channel"
-      },
-      "attribute": "intl-b",
-      "reflect": false,
-      "defaultValue": "TEXT.b"
-    },
-    "intlBlue": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"Blue\""
-          }],
-        "text": "Label used for the blue channel description"
-      },
-      "attribute": "intl-blue",
-      "reflect": false,
-      "defaultValue": "TEXT.blue"
-    },
-    "intlDeleteColor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"Delete color\""
-          }],
-        "text": "Label used for the delete color button."
-      },
-      "attribute": "intl-delete-color",
-      "reflect": false,
-      "defaultValue": "TEXT.deleteColor"
-    },
-    "intlG": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"G\""
-          }],
-        "text": "Label used for the green channel"
-      },
-      "attribute": "intl-g",
-      "reflect": false,
-      "defaultValue": "TEXT.g"
-    },
-    "intlGreen": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"Green\""
-          }],
-        "text": "Label used for the green channel description"
-      },
-      "attribute": "intl-green",
-      "reflect": false,
-      "defaultValue": "TEXT.green"
-    },
-    "intlH": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"H\""
-          }],
-        "text": "Label used for the hue channel"
-      },
-      "attribute": "intl-h",
-      "reflect": false,
-      "defaultValue": "TEXT.h"
-    },
-    "intlHsv": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"HSV\""
-          }],
-        "text": "Label used for the HSV mode"
-      },
-      "attribute": "intl-hsv",
-      "reflect": false,
-      "defaultValue": "TEXT.hsv"
-    },
-    "intlHex": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"Hex\""
-          }],
-        "text": "Label used for the hex input"
-      },
-      "attribute": "intl-hex",
-      "reflect": false,
-      "defaultValue": "TEXT.hex"
-    },
-    "intlHue": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"Hue\""
-          }],
-        "text": "Label used for the hue channel description"
-      },
-      "attribute": "intl-hue",
-      "reflect": false,
-      "defaultValue": "TEXT.hue"
-    },
-    "intlNoColor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"No color\""
-          }],
-        "text": "Label used for the hex input when there is no color selected."
-      },
-      "attribute": "intl-no-color",
-      "reflect": false,
-      "defaultValue": "TEXT.noColor"
-    },
-    "intlR": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"R\""
-          }],
-        "text": "Label used for the red channel"
-      },
-      "attribute": "intl-r",
-      "reflect": false,
-      "defaultValue": "TEXT.r"
-    },
-    "intlRed": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"Red\""
-          }],
-        "text": "Label used for the red channel description"
-      },
-      "attribute": "intl-red",
-      "reflect": false,
-      "defaultValue": "TEXT.red"
-    },
-    "intlRgb": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"RGB\""
-          }],
-        "text": "Label used for the RGB mode"
-      },
-      "attribute": "intl-rgb",
-      "reflect": false,
-      "defaultValue": "TEXT.rgb"
-    },
-    "intlS": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"S\""
-          }],
-        "text": "Label used for the saturation channel"
-      },
-      "attribute": "intl-s",
-      "reflect": false,
-      "defaultValue": "TEXT.s"
-    },
-    "intlSaturation": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"Saturation\""
-          }],
-        "text": "Label used for the saturation channel description"
-      },
-      "attribute": "intl-saturation",
-      "reflect": false,
-      "defaultValue": "TEXT.saturation"
-    },
-    "intlSaveColor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"Save color\""
-          }],
-        "text": "Label used for the save color button."
-      },
-      "attribute": "intl-save-color",
-      "reflect": false,
-      "defaultValue": "TEXT.saveColor"
-    },
-    "intlSaved": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"Saved\""
-          }],
-        "text": "Label used for the saved colors section"
-      },
-      "attribute": "intl-saved",
-      "reflect": false,
-      "defaultValue": "TEXT.saved"
-    },
-    "intlV": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"V\""
-          }],
-        "text": "Label used for the value channel"
-      },
-      "attribute": "intl-v",
-      "reflect": false,
-      "defaultValue": "TEXT.v"
-    },
-    "intlValue": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"Value\""
-          }],
-        "text": "Label used for the"
-      },
-      "attribute": "intl-value",
-      "reflect": false,
-      "defaultValue": "TEXT.value"
-    },
-    "scale": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "Scale",
-        "resolved": "\"l\" | \"m\" | \"s\"",
-        "references": {
-          "Scale": {
-            "location": "import",
-            "path": "../interfaces"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"auto\""
+            }],
+          "text": "The format of `value`.\n\nWhen `\"auto\"`, the format will be inferred from `value` when set."
+        },
+        "attribute": "format",
+        "reflect": true,
+        "defaultValue": "defaultFormat"
+      },
+      "hideHex": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When `true`, hides the Hex input."
+        },
+        "attribute": "hide-hex",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "hideChannels": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When `true`, hides the RGB/HSV channel inputs."
+        },
+        "attribute": "hide-channels",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "hideSaved": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When `true`, hides the saved colors section."
+        },
+        "attribute": "hide-saved",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "intlB": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"B\""
+            }],
+          "text": "Accessible name for the RGB section's blue channel."
+        },
+        "attribute": "intl-b",
+        "reflect": false,
+        "defaultValue": "TEXT.b"
+      },
+      "intlBlue": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"Blue\""
+            }],
+          "text": "Accessible name for the RGB section's blue channel description."
+        },
+        "attribute": "intl-blue",
+        "reflect": false,
+        "defaultValue": "TEXT.blue"
+      },
+      "intlDeleteColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"Delete color\""
+            }],
+          "text": "Accessible name for the delete color button."
+        },
+        "attribute": "intl-delete-color",
+        "reflect": false,
+        "defaultValue": "TEXT.deleteColor"
+      },
+      "intlG": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"G\""
+            }],
+          "text": "Accessible name for the RGB section's green channel."
+        },
+        "attribute": "intl-g",
+        "reflect": false,
+        "defaultValue": "TEXT.g"
+      },
+      "intlGreen": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"Green\""
+            }],
+          "text": "Accessible name for the RGB section's green channel description."
+        },
+        "attribute": "intl-green",
+        "reflect": false,
+        "defaultValue": "TEXT.green"
+      },
+      "intlH": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"H\""
+            }],
+          "text": "Accessible name for the HSV section's hue channel."
+        },
+        "attribute": "intl-h",
+        "reflect": false,
+        "defaultValue": "TEXT.h"
+      },
+      "intlHsv": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"HSV\""
+            }],
+          "text": "Accessible name for the HSV mode."
+        },
+        "attribute": "intl-hsv",
+        "reflect": false,
+        "defaultValue": "TEXT.hsv"
+      },
+      "intlHex": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"Hex\""
+            }],
+          "text": "Accessible name for the Hex input."
+        },
+        "attribute": "intl-hex",
+        "reflect": false,
+        "defaultValue": "TEXT.hex"
+      },
+      "intlHue": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"Hue\""
+            }],
+          "text": "Accessible name for the HSV section's hue channel description."
+        },
+        "attribute": "intl-hue",
+        "reflect": false,
+        "defaultValue": "TEXT.hue"
+      },
+      "intlNoColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"No color\""
+            }],
+          "text": "Accessible name for the Hex input when there is no color selected."
+        },
+        "attribute": "intl-no-color",
+        "reflect": false,
+        "defaultValue": "TEXT.noColor"
+      },
+      "intlR": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"R\""
+            }],
+          "text": "Accessible name for the RGB section's red channel."
+        },
+        "attribute": "intl-r",
+        "reflect": false,
+        "defaultValue": "TEXT.r"
+      },
+      "intlRed": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"Red\""
+            }],
+          "text": "Accessible name for the RGB section's red channel description."
+        },
+        "attribute": "intl-red",
+        "reflect": false,
+        "defaultValue": "TEXT.red"
+      },
+      "intlRgb": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"RGB\""
+            }],
+          "text": "Accessible name for the RGB mode."
+        },
+        "attribute": "intl-rgb",
+        "reflect": false,
+        "defaultValue": "TEXT.rgb"
+      },
+      "intlS": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"S\""
+            }],
+          "text": "Accessible name for the HSV section's saturation channel."
+        },
+        "attribute": "intl-s",
+        "reflect": false,
+        "defaultValue": "TEXT.s"
+      },
+      "intlSaturation": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"Saturation\""
+            }],
+          "text": "Accessible name for the HSV section's saturation channel description."
+        },
+        "attribute": "intl-saturation",
+        "reflect": false,
+        "defaultValue": "TEXT.saturation"
+      },
+      "intlSaveColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"Save color\""
+            }],
+          "text": "Accessible name for the save color button."
+        },
+        "attribute": "intl-save-color",
+        "reflect": false,
+        "defaultValue": "TEXT.saveColor"
+      },
+      "intlSaved": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"Saved\""
+            }],
+          "text": "Accessible name for the saved colors section."
+        },
+        "attribute": "intl-saved",
+        "reflect": false,
+        "defaultValue": "TEXT.saved"
+      },
+      "intlV": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"V\""
+            }],
+          "text": "Accessible name for the HSV section's value channel."
+        },
+        "attribute": "intl-v",
+        "reflect": false,
+        "defaultValue": "TEXT.v"
+      },
+      "intlValue": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"Value\""
+            }],
+          "text": "Accessible name for the HSV section's value channel description."
+        },
+        "attribute": "intl-value",
+        "reflect": false,
+        "defaultValue": "TEXT.value"
+      },
+      "scale": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Scale",
+          "resolved": "\"l\" | \"m\" | \"s\"",
+          "references": {
+            "Scale": {
+              "location": "import",
+              "path": "../interfaces"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The scale of the color picker."
-      },
-      "attribute": "scale",
-      "reflect": true,
-      "defaultValue": "\"m\""
-    },
-    "storageId": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Storage ID for colors."
-      },
-      "attribute": "storage-id",
-      "reflect": true
-    },
-    "numberingSystem": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "standard UniCode numeral system tag for localization"
-      },
-      "attribute": "numbering-system",
-      "reflect": true
-    },
-    "value": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "ColorValue | null",
-        "resolved": "HSL | HSL & ObjectWithAlpha | HSV | HSV & ObjectWithAlpha | RGB | RGB & ObjectWithAlpha | string",
-        "references": {
-          "ColorValue": {
-            "location": "import",
-            "path": "./interfaces"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the size of the component."
+        },
+        "attribute": "scale",
+        "reflect": true,
+        "defaultValue": "\"m\""
+      },
+      "storageId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the storage ID for colors."
+        },
+        "attribute": "storage-id",
+        "reflect": true
+      },
+      "numberingSystem": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "NumberingSystem",
+          "resolved": "\"arab\" | \"arabext\" | \"bali\" | \"beng\" | \"deva\" | \"fullwide\" | \"gujr\" | \"guru\" | \"hanidec\" | \"khmr\" | \"knda\" | \"laoo\" | \"latn\" | \"limb\" | \"mlym\" | \"mong\" | \"mymr\" | \"orya\" | \"tamldec\" | \"telu\" | \"thai\" | \"tibt\"",
+          "references": {
+            "NumberingSystem": {
+              "location": "import",
+              "path": "../../utils/locale"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"#007ac2\""
-          }, {
-            "name": "see",
-            "text": "[CSS Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color)"
-          }, {
-            "name": "see",
-            "text": "[ColorValue](https://github.com/Esri/calcite-components/blob/master/src/components/color-picker/interfaces.ts#L10)"
-          }],
-        "text": "The component's value.\n\nThis value can be either a CSS color string,\na RGB, HSL or HSV object.\n\nThe type will be preserved as the color is updated."
-      },
-      "attribute": "value",
-      "reflect": false,
-      "defaultValue": "defaultValue"
-    }
-  }; }
-  static get states() { return {
-    "colorFieldAndSliderInteractive": {},
-    "channelMode": {},
-    "channels": {},
-    "dimensions": {},
-    "savedColors": {},
-    "colorFieldScopeTop": {},
-    "colorFieldScopeLeft": {},
-    "scopeOrientation": {},
-    "hueScopeLeft": {},
-    "hueScopeTop": {}
-  }; }
-  static get events() { return [{
-      "method": "calciteColorPickerChange",
-      "name": "calciteColorPickerChange",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Fires when the color value has changed."
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }, {
-      "method": "calciteColorPickerInput",
-      "name": "calciteColorPickerInput",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Fires as the color value changes.\n\nThis is similar to the change event with the exception of dragging. When dragging the color field or hue slider thumb, this event fires as the thumb is moved."
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }]; }
-  static get methods() { return {
-    "setFocus": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the Unicode numeral system used by the component for localization."
+        },
+        "attribute": "numbering-system",
+        "reflect": true
+      },
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "ColorValue | null",
+          "resolved": "HSL | HSL & ObjectWithAlpha | HSV | HSV & ObjectWithAlpha | RGB | RGB & ObjectWithAlpha | string",
+          "references": {
+            "ColorValue": {
+              "location": "import",
+              "path": "./interfaces"
+            }
           }
         },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Sets focus on the component.",
-        "tags": []
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"#007ac2\""
+            }, {
+              "name": "see",
+              "text": "[CSS Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color)"
+            }, {
+              "name": "see",
+              "text": "[ColorValue](https://github.com/Esri/calcite-components/blob/master/src/components/color-picker/interfaces.ts#L10)"
+            }],
+          "text": "The component's value, where the value can be a CSS color string, or a RGB, HSL or HSV object.\n\nThe type will be preserved as the color is updated."
+        },
+        "attribute": "value",
+        "reflect": false,
+        "defaultValue": "defaultValue"
       }
-    }
-  }; }
+    };
+  }
+  static get states() {
+    return {
+      "colorFieldAndSliderInteractive": {},
+      "channelMode": {},
+      "channels": {},
+      "dimensions": {},
+      "savedColors": {},
+      "colorFieldScopeTop": {},
+      "colorFieldScopeLeft": {},
+      "scopeOrientation": {},
+      "hueScopeLeft": {},
+      "hueScopeTop": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "calciteColorPickerChange",
+        "name": "calciteColorPickerChange",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fires when the color value has changed."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "calciteColorPickerInput",
+        "name": "calciteColorPickerInput",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fires as the color value changes.\n\nSimilar to the `calciteColorPickerChange` event with the exception of dragging. When dragging the color field or hue slider thumb, this event fires as the thumb is moved."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Sets focus on the component.",
+          "tags": []
+        }
+      }
+    };
+  }
   static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "color",
-      "methodName": "handleColorChange"
-    }, {
-      "propName": "format",
-      "methodName": "handleFormatChange"
-    }, {
-      "propName": "scale",
-      "methodName": "handleScaleChange"
-    }, {
-      "propName": "value",
-      "methodName": "handleValueChange"
-    }]; }
-  static get listeners() { return [{
-      "name": "keydown",
-      "method": "handleChannelKeyUpOrDown",
-      "target": undefined,
-      "capture": true,
-      "passive": false
-    }, {
-      "name": "keyup",
-      "method": "handleChannelKeyUpOrDown",
-      "target": undefined,
-      "capture": true,
-      "passive": false
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "color",
+        "methodName": "handleColorChange"
+      }, {
+        "propName": "format",
+        "methodName": "handleFormatChange"
+      }, {
+        "propName": "scale",
+        "methodName": "handleScaleChange"
+      }, {
+        "propName": "value",
+        "methodName": "handleValueChange"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "keydown",
+        "method": "handleChannelKeyUpOrDown",
+        "target": undefined,
+        "capture": true,
+        "passive": false
+      }, {
+        "name": "keyup",
+        "method": "handleChannelKeyUpOrDown",
+        "target": undefined,
+        "capture": true,
+        "passive": false
+      }];
+  }
 }