@esri/calcite-components 1.0.0-next.678 → 1.0.0-next.679

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

@@ -1,17 +1,19 @@
 /*!
  * 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-next.678
+ * v1.0.0-next.679
  */
 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 { CSS, DEFAULT_COLOR, DEFAULT_STORAGE_KEY_PREFIX, DIMENSIONS, HSV_LIMITS, RGB_LIMITS } from "./resources";
 import { focusElement, 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());
@@ -264,25 +266,27 @@ export class ColorPicker {
       this.hueScopeNode = node;
     };
     this.renderChannelsTabTitle = (channelMode) => {
-      const { channelMode: activeChannelMode, intlRgb, intlHsv } = this;
+      const { channelMode: activeChannelMode, messages } = this;
       const selected = channelMode === activeChannelMode;
-      const label = channelMode === "rgb" ? intlRgb : intlHsv;
+      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 { 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", { 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?.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;
@@ -334,33 +338,37 @@ export class ColorPicker {
     this.hideHex = false;
     this.hideChannels = false;
     this.hideSaved = false;
-    this.intlB = TEXT.b;
-    this.intlBlue = TEXT.blue;
-    this.intlDeleteColor = TEXT.deleteColor;
-    this.intlG = TEXT.g;
-    this.intlGreen = TEXT.green;
-    this.intlH = TEXT.h;
-    this.intlHsv = TEXT.hsv;
-    this.intlHex = TEXT.hex;
-    this.intlHue = TEXT.hue;
-    this.intlNoColor = TEXT.noColor;
-    this.intlR = TEXT.r;
-    this.intlRed = TEXT.red;
-    this.intlRgb = TEXT.rgb;
-    this.intlS = TEXT.s;
-    this.intlSaturation = TEXT.saturation;
-    this.intlSaveColor = TEXT.saveColor;
-    this.intlSaved = TEXT.saved;
-    this.intlV = TEXT.v;
-    this.intlValue = TEXT.value;
+    this.intlB = undefined;
+    this.intlBlue = undefined;
+    this.intlDeleteColor = undefined;
+    this.intlG = undefined;
+    this.intlGreen = undefined;
+    this.intlH = undefined;
+    this.intlHsv = undefined;
+    this.intlHex = undefined;
+    this.intlHue = undefined;
+    this.intlNoColor = undefined;
+    this.intlR = undefined;
+    this.intlRed = undefined;
+    this.intlRgb = undefined;
+    this.intlS = undefined;
+    this.intlSaturation = undefined;
+    this.intlSaveColor = undefined;
+    this.intlSaved = undefined;
+    this.intlV = undefined;
+    this.intlValue = undefined;
     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;
@@ -381,6 +389,9 @@ export class ColorPicker {
     this.updateDimensions(scale);
     this.updateCanvasSize(this.fieldAndSliderRenderingContext?.canvas);
   }
+  onMessagesChange() {
+    /* wired up by t9n util */
+  }
   handleValueChange(value, oldValue) {
     const { allowEmpty, format } = this;
     const checkMode = !allowEmpty || value;
@@ -420,6 +431,9 @@ 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;
@@ -459,7 +473,7 @@ export class ColorPicker {
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
-  componentWillLoad() {
+  async componentWillLoad() {
     setUpLoadableComponent(this);
     const { allowEmpty, color, format, value } = this;
     const willSetNoColor = allowEmpty && !value;
@@ -476,6 +490,11 @@ 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);
@@ -483,6 +502,8 @@ export class ColorPicker {
   disconnectedCallback() {
     document.removeEventListener("pointermove", this.globalPointerMoveHandler);
     document.removeEventListener("pointerup", this.globalPointerUpHandler);
+    disconnectLocalized(this);
+    disconnectMessages(this);
   }
   componentDidRender() {
     updateHostInteraction(this);
@@ -493,7 +514,7 @@ 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;
@@ -504,16 +525,16 @@ export class ColorPicker {
     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?.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": this.intlHue, "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: {
+      }, 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, 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: "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, 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, color: "neutral", disabled: noColor, iconStart: "minus", label: messages.deleteColor, onClick: this.deleteColor, scale: hexInputScale, type: "button" }), h("calcite-button", { appearance: "transparent", class: CSS.saveColor, color: "neutral", disabled: noColor, iconStart: "plus", 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))));
   }
@@ -711,6 +732,7 @@ export class ColorPicker {
       "$": ["color-picker.css"]
     };
   }
+  static get assetsDirs() { return ["assets"]; }
   static get properties() {
     return {
       "allowEmpty": {
@@ -888,14 +910,13 @@ export class ColorPicker {
         "optional": false,
         "docs": {
           "tags": [{
-              "name": "default",
-              "text": "\"B\""
+              "name": "deprecated",
+              "text": "\u2013 translations are now built-in, if you need to override a string, please use `messageOverrides`"
             }],
           "text": "Accessible name for the RGB section's blue channel."
         },
         "attribute": "intl-b",
-        "reflect": false,
-        "defaultValue": "TEXT.b"
+        "reflect": false
       },
       "intlBlue": {
         "type": "string",
@@ -909,14 +930,13 @@ export class ColorPicker {
         "optional": false,
         "docs": {
           "tags": [{
-              "name": "default",
-              "text": "\"Blue\""
+              "name": "deprecated",
+              "text": "\u2013 translations are now built-in, if you need to override a string, please use `messageOverrides`"
             }],
           "text": "Accessible name for the RGB section's blue channel description."
         },
         "attribute": "intl-blue",
-        "reflect": false,
-        "defaultValue": "TEXT.blue"
+        "reflect": false
       },
       "intlDeleteColor": {
         "type": "string",
@@ -930,14 +950,13 @@ export class ColorPicker {
         "optional": false,
         "docs": {
           "tags": [{
-              "name": "default",
-              "text": "\"Delete color\""
+              "name": "deprecated",
+              "text": "\u2013 translations are now built-in, if you need to override a string, please use `messageOverrides`"
             }],
           "text": "Accessible name for the delete color button."
         },
         "attribute": "intl-delete-color",
-        "reflect": false,
-        "defaultValue": "TEXT.deleteColor"
+        "reflect": false
       },
       "intlG": {
         "type": "string",
@@ -953,12 +972,14 @@ export class ColorPicker {
           "tags": [{
               "name": "default",
               "text": "\"G\""
+            }, {
+              "name": "deprecated",
+              "text": "\u2013 translations are now built-in, if you need to override a string, please use `messageOverrides`"
             }],
           "text": "Accessible name for the RGB section's green channel."
         },
         "attribute": "intl-g",
-        "reflect": false,
-        "defaultValue": "TEXT.g"
+        "reflect": false
       },
       "intlGreen": {
         "type": "string",
@@ -972,14 +993,13 @@ export class ColorPicker {
         "optional": false,
         "docs": {
           "tags": [{
-              "name": "default",
-              "text": "\"Green\""
+              "name": "deprecated",
+              "text": "\u2013 translations are now built-in, if you need to override a string, please use `messageOverrides`"
             }],
           "text": "Accessible name for the RGB section's green channel description."
         },
         "attribute": "intl-green",
-        "reflect": false,
-        "defaultValue": "TEXT.green"
+        "reflect": false
       },
       "intlH": {
         "type": "string",
@@ -993,14 +1013,13 @@ export class ColorPicker {
         "optional": false,
         "docs": {
           "tags": [{
-              "name": "default",
-              "text": "\"H\""
+              "name": "deprecated",
+              "text": "\u2013 translations are now built-in, if you need to override a string, please use `messageOverrides`"
             }],
           "text": "Accessible name for the HSV section's hue channel."
         },
         "attribute": "intl-h",
-        "reflect": false,
-        "defaultValue": "TEXT.h"
+        "reflect": false
       },
       "intlHsv": {
         "type": "string",
@@ -1014,14 +1033,13 @@ export class ColorPicker {
         "optional": false,
         "docs": {
           "tags": [{
-              "name": "default",
-              "text": "\"HSV\""
+              "name": "deprecated",
+              "text": "\u2013 translations are now built-in, if you need to override a string, please use `messageOverrides`"
             }],
           "text": "Accessible name for the HSV mode."
         },
         "attribute": "intl-hsv",
-        "reflect": false,
-        "defaultValue": "TEXT.hsv"
+        "reflect": false
       },
       "intlHex": {
         "type": "string",
@@ -1035,14 +1053,13 @@ export class ColorPicker {
         "optional": false,
         "docs": {
           "tags": [{
-              "name": "default",
-              "text": "\"Hex\""
+              "name": "deprecated",
+              "text": "\u2013 translations are now built-in, if you need to override a string, please use `messageOverrides`"
             }],
           "text": "Accessible name for the Hex input."
         },
         "attribute": "intl-hex",
-        "reflect": false,
-        "defaultValue": "TEXT.hex"
+        "reflect": false
       },
       "intlHue": {
         "type": "string",
@@ -1056,14 +1073,13 @@ export class ColorPicker {
         "optional": false,
         "docs": {
           "tags": [{
-              "name": "default",
-              "text": "\"Hue\""
+              "name": "deprecated",
+              "text": "\u2013 translations are now built-in, if you need to override a string, please use `messageOverrides`"
             }],
           "text": "Accessible name for the HSV section's hue channel description."
         },
         "attribute": "intl-hue",
-        "reflect": false,
-        "defaultValue": "TEXT.hue"
+        "reflect": false
       },
       "intlNoColor": {
         "type": "string",
@@ -1077,14 +1093,13 @@ export class ColorPicker {
         "optional": false,
         "docs": {
           "tags": [{
-              "name": "default",
-              "text": "\"No color\""
+              "name": "deprecated",
+              "text": "\u2013 translations are now built-in, if you need to override a string, please use `messageOverrides`"
             }],
           "text": "Accessible name for the Hex input when there is no color selected."
         },
         "attribute": "intl-no-color",
-        "reflect": false,
-        "defaultValue": "TEXT.noColor"
+        "reflect": false
       },
       "intlR": {
         "type": "string",
@@ -1098,14 +1113,13 @@ export class ColorPicker {
         "optional": false,
         "docs": {
           "tags": [{
-              "name": "default",
-              "text": "\"R\""
+              "name": "deprecated",
+              "text": "\u2013 translations are now built-in, if you need to override a string, please use `messageOverrides`"
             }],
           "text": "Accessible name for the RGB section's red channel."
         },
         "attribute": "intl-r",
-        "reflect": false,
-        "defaultValue": "TEXT.r"
+        "reflect": false
       },
       "intlRed": {
         "type": "string",
@@ -1119,14 +1133,13 @@ export class ColorPicker {
         "optional": false,
         "docs": {
           "tags": [{
-              "name": "default",
-              "text": "\"Red\""
+              "name": "deprecated",
+              "text": "\u2013 translations are now built-in, if you need to override a string, please use `messageOverrides`"
             }],
           "text": "Accessible name for the RGB section's red channel description."
         },
         "attribute": "intl-red",
-        "reflect": false,
-        "defaultValue": "TEXT.red"
+        "reflect": false
       },
       "intlRgb": {
         "type": "string",
@@ -1140,14 +1153,13 @@ export class ColorPicker {
         "optional": false,
         "docs": {
           "tags": [{
-              "name": "default",
-              "text": "\"RGB\""
+              "name": "deprecated",
+              "text": "\u2013 translations are now built-in, if you need to override a string, please use `messageOverrides`"
             }],
           "text": "Accessible name for the RGB mode."
         },
         "attribute": "intl-rgb",
-        "reflect": false,
-        "defaultValue": "TEXT.rgb"
+        "reflect": false
       },
       "intlS": {
         "type": "string",
@@ -1161,14 +1173,13 @@ export class ColorPicker {
         "optional": false,
         "docs": {
           "tags": [{
-              "name": "default",
-              "text": "\"S\""
+              "name": "deprecated",
+              "text": "\u2013 translations are now built-in, if you need to override a string, please use `messageOverrides`"
             }],
           "text": "Accessible name for the HSV section's saturation channel."
         },
         "attribute": "intl-s",
-        "reflect": false,
-        "defaultValue": "TEXT.s"
+        "reflect": false
       },
       "intlSaturation": {
         "type": "string",
@@ -1182,14 +1193,13 @@ export class ColorPicker {
         "optional": false,
         "docs": {
           "tags": [{
-              "name": "default",
-              "text": "\"Saturation\""
+              "name": "deprecated",
+              "text": "\u2013 translations are now built-in, if you need to override a string, please use `messageOverrides`"
             }],
           "text": "Accessible name for the HSV section's saturation channel description."
         },
         "attribute": "intl-saturation",
-        "reflect": false,
-        "defaultValue": "TEXT.saturation"
+        "reflect": false
       },
       "intlSaveColor": {
         "type": "string",
@@ -1203,14 +1213,13 @@ export class ColorPicker {
         "optional": false,
         "docs": {
           "tags": [{
-              "name": "default",
-              "text": "\"Save color\""
+              "name": "deprecated",
+              "text": "\u2013 translations are now built-in, if you need to override a string, please use `messageOverrides`"
             }],
           "text": "Accessible name for the save color button."
         },
         "attribute": "intl-save-color",
-        "reflect": false,
-        "defaultValue": "TEXT.saveColor"
+        "reflect": false
       },
       "intlSaved": {
         "type": "string",
@@ -1224,14 +1233,13 @@ export class ColorPicker {
         "optional": false,
         "docs": {
           "tags": [{
-              "name": "default",
-              "text": "\"Saved\""
+              "name": "deprecated",
+              "text": "\u2013 translations are now built-in, if you need to override a string, please use `messageOverrides`"
             }],
           "text": "Accessible name for the saved colors section."
         },
         "attribute": "intl-saved",
-        "reflect": false,
-        "defaultValue": "TEXT.saved"
+        "reflect": false
       },
       "intlV": {
         "type": "string",
@@ -1245,14 +1253,13 @@ export class ColorPicker {
         "optional": false,
         "docs": {
           "tags": [{
-              "name": "default",
-              "text": "\"V\""
+              "name": "deprecated",
+              "text": "\u2013 translations are now built-in, if you need to override a string, please use `messageOverrides`"
             }],
           "text": "Accessible name for the HSV section's value channel."
         },
         "attribute": "intl-v",
-        "reflect": false,
-        "defaultValue": "TEXT.v"
+        "reflect": false
       },
       "intlValue": {
         "type": "string",
@@ -1266,14 +1273,13 @@ export class ColorPicker {
         "optional": false,
         "docs": {
           "tags": [{
-              "name": "default",
-              "text": "\"Value\""
+              "name": "deprecated",
+              "text": "\u2013 translations are now built-in, if you need to override a string, please use `messageOverrides`"
             }],
           "text": "Accessible name for the HSV section's value channel description."
         },
         "attribute": "intl-value",
-        "reflect": false,
-        "defaultValue": "TEXT.value"
+        "reflect": false
       },
       "scale": {
         "type": "string",
@@ -1315,6 +1321,29 @@ export class ColorPicker {
         "attribute": "storage-id",
         "reflect": true
       },
+      "messageOverrides": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "Partial<Messages>",
+          "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"
+            },
+            "Messages": {
+              "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,
@@ -1368,15 +1397,40 @@ export class ColorPicker {
         "attribute": "value",
         "reflect": false,
         "defaultValue": "defaultValue"
+      },
+      "messages": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "Messages",
+          "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": {
+            "Messages": {
+              "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": {},
@@ -1449,9 +1503,75 @@ export class ColorPicker {
       }, {
         "propName": "scale",
         "methodName": "handleScaleChange"
+      }, {
+        "propName": "intlG",
+        "methodName": "onMessagesChange"
+      }, {
+        "propName": "intlB",
+        "methodName": "onMessagesChange"
+      }, {
+        "propName": "intlV",
+        "methodName": "onMessagesChange"
+      }, {
+        "propName": "intlBlue",
+        "methodName": "onMessagesChange"
+      }, {
+        "propName": "intlDeleteColor",
+        "methodName": "onMessagesChange"
+      }, {
+        "propName": "intlGreen",
+        "methodName": "onMessagesChange"
+      }, {
+        "propName": "intlH",
+        "methodName": "onMessagesChange"
+      }, {
+        "propName": "intlHsv",
+        "methodName": "onMessagesChange"
+      }, {
+        "propName": "intlHex",
+        "methodName": "onMessagesChange"
+      }, {
+        "propName": "intlHue",
+        "methodName": "onMessagesChange"
+      }, {
+        "propName": "intlNoColor",
+        "methodName": "onMessagesChange"
+      }, {
+        "propName": "intlR",
+        "methodName": "onMessagesChange"
+      }, {
+        "propName": "intlRed",
+        "methodName": "onMessagesChange"
+      }, {
+        "propName": "intlRgb",
+        "methodName": "onMessagesChange"
+      }, {
+        "propName": "intlS",
+        "methodName": "onMessagesChange"
+      }, {
+        "propName": "intlSaturation",
+        "methodName": "onMessagesChange"
+      }, {
+        "propName": "intlSaveColor",
+        "methodName": "onMessagesChange"
+      }, {
+        "propName": "intlSaved",
+        "methodName": "onMessagesChange"
+      }, {
+        "propName": "intlV",
+        "methodName": "onMessagesChange"
+      }, {
+        "propName": "intlValue",
+        "methodName": "onMessagesChange"
+      }, {
+        "propName": "messageOverrides",
+        "methodName": "onMessagesChange"
       }, {
         "propName": "value",
         "methodName": "handleValueChange"
+      }, {
+        "propName": "effectiveLocale",
+        "methodName": "effectiveLocaleChange"
       }];
   }
   static get listeners() {