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

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

@@ -1,200 +1,31 @@
 /*!
  * 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.97
+ * v1.0.0-beta.99
  */
 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, isPrimaryPointerButton } from "../../utils/dom";
+import { CSS, DEFAULT_COLOR, DEFAULT_STORAGE_KEY_PREFIX, DIMENSIONS, HSV_LIMITS, RGB_LIMITS } from "./resources";
+import { getElementDir, isPrimaryPointerButton } from "../../utils/dom";
 import { colorEqual, CSSColorMode, normalizeHex, parseMode } from "./utils";
 import { throttle } from "lodash-es";
 import { clamp } from "../../utils/math";
 import { updateHostInteraction } from "../../utils/interactive";
 import { isActivationKey } from "../../utils/key";
+import { connectMessages, disconnectMessages, setUpMessages, updateMessages } from "../../utils/t9n";
+import { connectLocalized, disconnectLocalized } from "../../utils/locale";
+import { setUpLoadableComponent, setComponentLoaded, componentLoaded } from "../../utils/loadable";
 const throttleFor60FpsInMs = 16;
 const defaultValue = normalizeHex(DEFAULT_COLOR.hex());
 const defaultFormat = "auto";
 export class ColorPicker {
   constructor() {
-    //--------------------------------------------------------------------------
-    //
-    //  Public properties
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * When `false`, an empty color (`null`) will be allowed as a `value`. Otherwise, a color value is enforced on the component.
-     *
-     * 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;
-    /**
-     * Specifies the appearance style of the component -
-     *
-     * `"solid"` (containing border) or `"minimal"` (no containing border).
-     */
-    this.appearance = "solid";
-    /**
-     * Internal prop for advanced use-cases.
-     *
-     * @internal
-     */
-    this.color = DEFAULT_COLOR;
-    /**
-     * When `true`, interaction is prevented and the component is displayed with lower opacity.
-     */
-    this.disabled = false;
-    /**
-     * The format of `value`.
-     *
-     * When `"auto"`, the format will be inferred from `value` when set.
-     *
-     * @default "auto"
-     */
-    this.format = defaultFormat;
-    /** When `true`, hides the Hex input. */
-    this.hideHex = false;
-    /** When `true`, hides the RGB/HSV channel inputs. */
-    this.hideChannels = false;
-    /** When `true`, hides the saved colors section. */
-    this.hideSaved = false;
-    /**
-     * Accessible name for the RGB section's blue channel.
-     *
-     * @default "B"
-     */
-    this.intlB = TEXT.b;
-    /**
-     * Accessible name for the RGB section's blue channel description.
-     *
-     * @default "Blue"
-     */
-    this.intlBlue = TEXT.blue;
-    /**
-     * Accessible name for the delete color button.
-     *
-     * @default "Delete color"
-     */
-    this.intlDeleteColor = TEXT.deleteColor;
-    /**
-     * Accessible name for the RGB section's green channel.
-     *
-     * @default "G"
-     */
-    this.intlG = TEXT.g;
-    /**
-     * Accessible name for the RGB section's green channel description.
-     *
-     * @default "Green"
-     */
-    this.intlGreen = TEXT.green;
-    /**
-     * Accessible name for the HSV section's hue channel.
-     *
-     * @default "H"
-     */
-    this.intlH = TEXT.h;
-    /**
-     * Accessible name for the HSV mode.
-     *
-     * @default "HSV"
-     */
-    this.intlHsv = TEXT.hsv;
-    /**
-     * Accessible name for the Hex input.
-     *
-     * @default "Hex"
-     */
-    this.intlHex = TEXT.hex;
-    /**
-     * Accessible name for the HSV section's hue channel description.
-     *
-     * @default "Hue"
-     */
-    this.intlHue = TEXT.hue;
-    /**
-     * Accessible name for the Hex input when there is no color selected.
-     *
-     * @default "No color"
-     */
-    this.intlNoColor = TEXT.noColor;
-    /**
-     * Accessible name for the RGB section's red channel.
-     *
-     * @default "R"
-     */
-    this.intlR = TEXT.r;
-    /**
-     * Accessible name for the RGB section's red channel description.
-     *
-     * @default "Red"
-     */
-    this.intlRed = TEXT.red;
-    /**
-     * Accessible name for the RGB mode.
-     *
-     * @default "RGB"
-     */
-    this.intlRgb = TEXT.rgb;
-    /**
-     * Accessible name for the HSV section's saturation channel.
-     *
-     * @default "S"
-     */
-    this.intlS = TEXT.s;
-    /**
-     * Accessible name for the HSV section's saturation channel description.
-     *
-     * @default "Saturation"
-     */
-    this.intlSaturation = TEXT.saturation;
-    /**
-     * Accessible name for the save color button.
-     *
-     * @default "Save color"
-     */
-    this.intlSaveColor = TEXT.saveColor;
-    /**
-     * Accessible name for the saved colors section.
-     *
-     * @default "Saved"
-     */
-    this.intlSaved = TEXT.saved;
-    /**
-     * Accessible name for the HSV section's value channel.
-     *
-     * @default "V"
-     */
-    this.intlV = TEXT.v;
-    /**
-     * Accessible name for the HSV section's value channel description.
-     *
-     * @default "Value"
-     */
-    this.intlValue = TEXT.value;
-    /** Specifies the size of the component. */
-    this.scale = "m";
-    /**
-     * 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.
-     *
-     * @default "#007ac2"
-     * @see [CSS Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color)
-     * @see [ColorValue](https://github.com/Esri/calcite-components/blob/master/src/components/color-picker/interfaces.ts#L10)
-     */
-    this.value = defaultValue;
     this.colorFieldAndSliderHovered = false;
     this.hueThumbState = "idle";
     this.internalColorUpdateContext = null;
     this.mode = CSSColorMode.HEX;
     this.shiftKeyChannelAdjustment = 0;
     this.sliderThumbState = "idle";
-    this.colorFieldAndSliderInteractive = false;
-    this.channelMode = "rgb";
-    this.channels = this.toChannels(DEFAULT_COLOR);
-    this.dimensions = DIMENSIONS.m;
-    this.savedColors = [];
     this.handleTabActivate = (event) => {
       this.channelMode = event.currentTarget.getAttribute("data-color-mode");
       this.updateChannelsFromColor(this.color);
@@ -250,7 +81,6 @@ export class ColorPicker {
     };
     this.handleChannelInput = (event) => {
       const input = event.currentTarget;
-      const internalInput = event.detail.nativeEvent.target;
       const channelIndex = Number(input.getAttribute("data-channel-index"));
       const limit = this.channelMode === "rgb"
         ? RGB_LIMITS[Object.keys(RGB_LIMITS)[channelIndex]]
@@ -265,7 +95,9 @@ export class ColorPicker {
         inputValue = clamped.toString();
       }
       input.value = inputValue;
-      internalInput.value = inputValue;
+      // TODO: refactor calcite-input so we don't need to sync the internals
+      // https://github.com/Esri/calcite-components/issues/6100
+      input.internalSyncChildElValue();
     };
     this.handleChannelChange = (event) => {
       const input = event.currentTarget;
@@ -296,7 +128,6 @@ export class ColorPicker {
       }
     };
     this.handleColorFieldAndSliderPointerDown = (event) => {
-      var _a, _b;
       if (!isPrimaryPointerButton(event)) {
         return;
       }
@@ -305,12 +136,12 @@ export class ColorPicker {
       if (region === "color-field") {
         this.hueThumbState = "drag";
         this.captureColorFieldColor(offsetX, offsetY);
-        (_a = this.colorFieldScopeNode) === null || _a === void 0 ? void 0 : _a.focus();
+        this.colorFieldScopeNode?.focus();
       }
       else if (region === "slider") {
         this.sliderThumbState = "drag";
         this.captureHueSliderColor(offsetX);
-        (_b = this.hueScopeNode) === null || _b === void 0 ? void 0 : _b.focus();
+        this.hueScopeNode?.focus();
       }
       // prevent text selection outside of color field & slider area
       event.preventDefault();
@@ -436,25 +267,27 @@ export class ColorPicker {
       this.hueScopeNode = node;
     };
     this.renderChannelsTabTitle = (channelMode) => {
-      const { channelMode: activeChannelMode, intlRgb, intlHsv } = this;
-      const active = channelMode === activeChannelMode;
-      const label = channelMode === "rgb" ? intlRgb : intlHsv;
-      return (h("calcite-tab-title", { active: active, class: CSS.colorMode, "data-color-mode": channelMode, key: channelMode, onCalciteTabsActivate: this.handleTabActivate }, label));
+      const { channelMode: activeChannelMode, messages } = this;
+      const selected = channelMode === activeChannelMode;
+      const label = channelMode === "rgb" ? messages.rgb : messages.hsv;
+      return (h("calcite-tab-title", { class: CSS.colorMode, "data-color-mode": channelMode, key: channelMode, onCalciteTabsActivate: this.handleTabActivate, selected: selected }, label));
     };
     this.renderChannelsTab = (channelMode) => {
-      const { channelMode: activeChannelMode, channels, intlB, intlBlue, intlG, intlGreen, intlH, intlHue, intlR, intlRed, intlS, intlSaturation, intlV, intlValue } = this;
-      const active = channelMode === activeChannelMode;
+      const { channelMode: activeChannelMode, channels, messages } = this;
+      const selected = channelMode === activeChannelMode;
       const isRgb = channelMode === "rgb";
-      const channelLabels = isRgb ? [intlR, intlG, intlB] : [intlH, intlS, intlV];
+      const channelLabels = isRgb
+        ? [messages.r, messages.g, messages.b]
+        : [messages.h, messages.s, messages.v];
       const channelAriaLabels = isRgb
-        ? [intlRed, intlGreen, intlBlue]
-        : [intlHue, intlSaturation, intlValue];
+        ? [messages.red, messages.green, messages.blue]
+        : [messages.hue, messages.saturation, messages.value];
       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) => 
+      return (h("calcite-tab", { class: CSS.control, key: channelMode, selected: selected }, 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.renderChannel = (value, index, label, ariaLabel, direction) => (h("calcite-input", { class: CSS.channel, "data-channel-index": index, dir: direction, label: ariaLabel, lang: this.effectiveLocale, 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?.toString() }));
     this.deleteColor = () => {
       const colorToDelete = this.color.hex();
       const inStorage = this.savedColors.indexOf(colorToDelete) > -1;
@@ -498,6 +331,32 @@ export class ColorPicker {
       this.fieldAndSliderRenderingContext = canvas.getContext("2d");
       this.updateCanvasSize(canvas);
     };
+    this.allowEmpty = false;
+    this.appearance = "solid";
+    this.color = DEFAULT_COLOR;
+    this.disabled = false;
+    this.format = defaultFormat;
+    this.hideHex = false;
+    this.hideChannels = false;
+    this.hideSaved = false;
+    this.scale = "m";
+    this.storageId = undefined;
+    this.messageOverrides = undefined;
+    this.numberingSystem = undefined;
+    this.value = defaultValue;
+    this.defaultMessages = undefined;
+    this.colorFieldAndSliderInteractive = false;
+    this.channelMode = "rgb";
+    this.channels = this.toChannels(DEFAULT_COLOR);
+    this.dimensions = DIMENSIONS.m;
+    this.effectiveLocale = "";
+    this.messages = undefined;
+    this.savedColors = [];
+    this.colorFieldScopeTop = undefined;
+    this.colorFieldScopeLeft = undefined;
+    this.scopeOrientation = undefined;
+    this.hueScopeLeft = undefined;
+    this.hueScopeTop = undefined;
   }
   handleColorChange(color, oldColor) {
     this.drawColorFieldAndSlider();
@@ -509,9 +368,11 @@ export class ColorPicker {
     this.internalColorSet(this.color, false, "internal");
   }
   handleScaleChange(scale = "m") {
-    var _a;
     this.updateDimensions(scale);
-    this.updateCanvasSize((_a = this.fieldAndSliderRenderingContext) === null || _a === void 0 ? void 0 : _a.canvas);
+    this.updateCanvasSize(this.fieldAndSliderRenderingContext?.canvas);
+  }
+  onMessagesChange() {
+    /* wired up by t9n util */
   }
   handleValueChange(value, oldValue) {
     const { allowEmpty, format } = this;
@@ -552,12 +413,15 @@ export class ColorPicker {
   get baseColorFieldColor() {
     return this.color || this.previousColor || DEFAULT_COLOR;
   }
+  effectiveLocaleChange() {
+    updateMessages(this, this.effectiveLocale);
+  }
   // using @Listen as a workaround for VDOM listener not firing
   handleChannelKeyUpOrDown(event) {
     this.shiftKeyChannelAdjustment = 0;
     const { key } = event;
     if ((key !== "ArrowUp" && key !== "ArrowDown") ||
-      !event.composedPath().some((node) => { var _a; return (_a = node.classList) === null || _a === void 0 ? void 0 : _a.contains(CSS.channel); })) {
+      !event.composedPath().some((node) => node.classList?.contains(CSS.channel))) {
       return;
     }
     const { shiftKey } = event;
@@ -583,14 +447,16 @@ export class ColorPicker {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    return focusElement(this.colorFieldScopeNode);
+    await componentLoaded(this);
+    this.el.focus();
   }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
-  componentWillLoad() {
+  async componentWillLoad() {
+    setUpLoadableComponent(this);
     const { allowEmpty, color, format, value } = this;
     const willSetNoColor = allowEmpty && !value;
     const parsedMode = parseMode(value);
@@ -606,10 +472,20 @@ export class ColorPicker {
     if (this.storageId && localStorage.getItem(storageKey)) {
       this.savedColors = JSON.parse(localStorage.getItem(storageKey));
     }
+    await setUpMessages(this);
+  }
+  connectedCallback() {
+    connectLocalized(this);
+    connectMessages(this);
+  }
+  componentDidLoad() {
+    setComponentLoaded(this);
   }
   disconnectedCallback() {
     document.removeEventListener("pointermove", this.globalPointerMoveHandler);
     document.removeEventListener("pointerup", this.globalPointerUpHandler);
+    disconnectLocalized(this);
+    disconnectMessages(this);
   }
   componentDidRender() {
     updateHostInteraction(this);
@@ -620,27 +496,27 @@ export class ColorPicker {
   //
   //--------------------------------------------------------------------------
   render() {
-    const { allowEmpty, color, intlDeleteColor, hideHex, hideChannels, hideSaved, intlHex, intlSaved, intlSaveColor, savedColors, scale } = this;
+    const { allowEmpty, color, messages, hideHex, hideChannels, hideSaved, savedColors, scale } = this;
     const selectedColorInHex = color ? color.hex() : null;
     const hexInputScale = scale === "l" ? "m" : "s";
     const { colorFieldAndSliderInteractive, colorFieldScopeTop, colorFieldScopeLeft, hueScopeLeft, hueScopeTop, scopeOrientation, dimensions: { colorField: { height: colorFieldHeight, width: colorFieldWidth }, slider: { height: sliderHeight } } } = this;
-    const hueTop = hueScopeTop !== null && hueScopeTop !== void 0 ? hueScopeTop : sliderHeight / 2 + colorFieldHeight;
-    const hueLeft = hueScopeLeft !== null && hueScopeLeft !== void 0 ? hueScopeLeft : (colorFieldWidth * DEFAULT_COLOR.hue()) / HSV_LIMITS.h;
+    const hueTop = hueScopeTop ?? sliderHeight / 2 + colorFieldHeight;
+    const hueLeft = 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: {
+      }, onPointerDown: this.handleColorFieldAndSliderPointerDown, onPointerEnter: this.handleColorFieldAndSliderPointerEnterOrMove, onPointerLeave: this.handleColorFieldAndSliderPointerLeave, onPointerMove: this.handleColorFieldAndSliderPointerEnterOrMove, ref: this.initColorFieldAndSlider }), h("div", { "aria-label": vertical ? messages.value : messages.saturation, "aria-valuemax": vertical ? HSV_LIMITS.v : HSV_LIMITS.s, "aria-valuemin": "0", "aria-valuenow": (vertical ? color?.saturationv() : 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": messages.hue, "aria-valuemax": HSV_LIMITS.h, "aria-valuemin": "0", "aria-valuenow": 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: {
+      } }, messages.hex), h("calcite-color-picker-hex-input", { allowEmpty: allowEmpty, class: CSS.control, hexLabel: messages.hex, 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 }, [
+      }, scale: hexInputScale }, h("calcite-tab-nav", { slot: "title-group" }, 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, messages.saved), h("div", { class: CSS.savedColorsButtons }, h("calcite-button", { appearance: "transparent", class: CSS.deleteColor, disabled: noColor, iconStart: "minus", kind: "neutral", label: messages.deleteColor, onClick: this.deleteColor, scale: hexInputScale, type: "button" }), h("calcite-button", { appearance: "transparent", class: CSS.saveColor, disabled: noColor, iconStart: "plus", kind: "neutral", label: messages.saveColor, 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))));
   }
@@ -828,6 +704,7 @@ export class ColorPicker {
   }
   static get is() { return "calcite-color-picker"; }
   static get encapsulation() { return "shadow"; }
+  static get delegatesFocus() { return true; }
   static get originalStyleUrls() {
     return {
       "$": ["color-picker.scss"]
@@ -838,6 +715,7 @@ export class ColorPicker {
       "$": ["color-picker.css"]
     };
   }
+  static get assetsDirs() { return ["assets"]; }
   static get properties() {
     return {
       "allowEmpty": {
@@ -862,12 +740,15 @@ export class ColorPicker {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "ColorAppearance",
-          "resolved": "\"default\" | \"minimal\" | \"solid\"",
+          "original": "Extract<\"minimal\" | \"solid\", Appearance>",
+          "resolved": "\"minimal\" | \"solid\"",
           "references": {
-            "ColorAppearance": {
+            "Extract": {
+              "location": "global"
+            },
+            "Appearance": {
               "location": "import",
-              "path": "./interfaces"
+              "path": "../interfaces"
             }
           }
         },
@@ -875,7 +756,7 @@ export class ColorPicker {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Specifies the appearance style of the component -\n\n`\"solid\"` (containing border) or `\"minimal\"` (no containing border)."
+          "text": "Specifies the appearance style of the component -"
         },
         "attribute": "appearance",
         "reflect": true,
@@ -1003,405 +884,6 @@ export class ColorPicker {
         "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,
@@ -1442,6 +924,29 @@ export class ColorPicker {
         "attribute": "storage-id",
         "reflect": true
       },
+      "messageOverrides": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "Partial<ColorPickerMessages>",
+          "resolved": "{ b?: string; blue?: string; deleteColor?: string; g?: string; green?: string; h?: string; hsv?: string; hex?: string; hue?: string; noColor?: string; opacity?: string; r?: string; red?: string; rgb?: string; s?: string; saturation?: string; saveColor?: string; saved?: string; v?: string; value?: string; }",
+          "references": {
+            "Partial": {
+              "location": "global"
+            },
+            "ColorPickerMessages": {
+              "location": "import",
+              "path": "./assets/color-picker/t9n"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Use this property to override individual strings used by the component."
+        }
+      },
       "numberingSystem": {
         "type": "string",
         "mutable": false,
@@ -1456,7 +961,7 @@ export class ColorPicker {
           }
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": "Specifies the Unicode numeral system used by the component for localization."
@@ -1495,15 +1000,40 @@ export class ColorPicker {
         "attribute": "value",
         "reflect": false,
         "defaultValue": "defaultValue"
+      },
+      "messages": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "ColorPickerMessages",
+          "resolved": "{ b: string; blue: string; deleteColor: string; g: string; green: string; h: string; hsv: string; hex: string; hue: string; noColor: string; opacity: string; r: string; red: string; rgb: string; s: string; saturation: string; saveColor: string; saved: string; v: string; value: string; }",
+          "references": {
+            "ColorPickerMessages": {
+              "location": "import",
+              "path": "./assets/color-picker/t9n"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "Made into a prop for testing purposes only"
+        }
       }
     };
   }
   static get states() {
     return {
+      "defaultMessages": {},
       "colorFieldAndSliderInteractive": {},
       "channelMode": {},
       "channels": {},
       "dimensions": {},
+      "effectiveLocale": {},
       "savedColors": {},
       "colorFieldScopeTop": {},
       "colorFieldScopeLeft": {},
@@ -1576,9 +1106,15 @@ export class ColorPicker {
       }, {
         "propName": "scale",
         "methodName": "handleScaleChange"
+      }, {
+        "propName": "messageOverrides",
+        "methodName": "onMessagesChange"
       }, {
         "propName": "value",
         "methodName": "handleValueChange"
+      }, {
+        "propName": "effectiveLocale",
+        "methodName": "effectiveLocaleChange"
       }];
   }
   static get listeners() {