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

package/dist/components/calcite-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 { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { c as color, d as defineCustomElement$a } from './color-picker-swatch.js';
-import { D as DEFAULT_COLOR, H as HSV_LIMITS, C as CSS, T as TEXT, a as DIMENSIONS, d as defineCustomElement$b, b as DEFAULT_STORAGE_KEY_PREFIX, R as RGB_LIMITS } from './color-picker-hex-input.js';
+import { D as DEFAULT_COLOR, H as HSV_LIMITS, C as CSS, a as DIMENSIONS, d as defineCustomElement$b, b as DEFAULT_STORAGE_KEY_PREFIX, R as RGB_LIMITS } from './color-picker-hex-input.js';
 import { i as isPrimaryPointerButton, c as getElementDir, f as focusElement } from './dom.js';
 import { n as normalizeHex, C as CSSColorMode, p as parseMode, c as colorEqual } from './utils.js';
 import { c as clamp } from './math.js';
 import { u as updateHostInteraction } from './interactive.js';
 import { i as isActivationKey } from './key.js';
-import { c as componentLoaded, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable.js';
+import { u as updateMessages, s as setUpMessages, c as connectMessages, d as disconnectMessages } from './t9n.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale.js';
+import { c as componentLoaded, a as setUpLoadableComponent, s as setComponentLoaded } from './loadable.js';
 import { d as defineCustomElement$c } from './button.js';
 import { d as defineCustomElement$9 } from './icon.js';
 import { d as defineCustomElement$8 } from './input.js';
@@ -346,25 +348,27 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       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;
@@ -416,33 +420,37 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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;
@@ -463,6 +471,9 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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;
@@ -502,6 +513,9 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   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;
@@ -541,7 +555,7 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
-  componentWillLoad() {
+  async componentWillLoad() {
     setUpLoadableComponent(this);
     const { allowEmpty, color: color$1, format, value } = this;
     const willSetNoColor = allowEmpty && !value;
@@ -558,6 +572,11 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     if (this.storageId && localStorage.getItem(storageKey)) {
       this.savedColors = JSON.parse(localStorage.getItem(storageKey));
     }
+    await setUpMessages(this);
+  }
+  connectedCallback() {
+    connectLocalized(this);
+    connectMessages(this);
   }
   componentDidLoad() {
     setComponentLoaded(this);
@@ -565,6 +584,8 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   disconnectedCallback() {
     document.removeEventListener("pointermove", this.globalPointerMoveHandler);
     document.removeEventListener("pointerup", this.globalPointerUpHandler);
+    disconnectLocalized(this);
+    disconnectMessages(this);
   }
   componentDidRender() {
     updateHostInteraction(this);
@@ -575,7 +596,7 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   //
   //--------------------------------------------------------------------------
   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;
@@ -586,16 +607,16 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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))));
   }
@@ -781,12 +802,34 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       .array()
       .map((value) => Math.floor(value));
   }
+  static get assetsDirs() { return ["assets"]; }
   get el() { return this; }
   static get watchers() { return {
     "color": ["handleColorChange"],
     "format": ["handleFormatChange"],
     "scale": ["handleScaleChange"],
-    "value": ["handleValueChange"]
+    "intlG": ["onMessagesChange"],
+    "intlB": ["onMessagesChange"],
+    "intlV": ["onMessagesChange", "onMessagesChange"],
+    "intlBlue": ["onMessagesChange"],
+    "intlDeleteColor": ["onMessagesChange"],
+    "intlGreen": ["onMessagesChange"],
+    "intlH": ["onMessagesChange"],
+    "intlHsv": ["onMessagesChange"],
+    "intlHex": ["onMessagesChange"],
+    "intlHue": ["onMessagesChange"],
+    "intlNoColor": ["onMessagesChange"],
+    "intlR": ["onMessagesChange"],
+    "intlRed": ["onMessagesChange"],
+    "intlRgb": ["onMessagesChange"],
+    "intlS": ["onMessagesChange"],
+    "intlSaturation": ["onMessagesChange"],
+    "intlSaveColor": ["onMessagesChange"],
+    "intlSaved": ["onMessagesChange"],
+    "intlValue": ["onMessagesChange"],
+    "messageOverrides": ["onMessagesChange"],
+    "value": ["handleValueChange"],
+    "effectiveLocale": ["effectiveLocaleChange"]
   }; }
   static get style() { return colorPickerCss; }
 }, [1, "calcite-color-picker", {
@@ -819,12 +862,16 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "intlValue": [1, "intl-value"],
     "scale": [513],
     "storageId": [513, "storage-id"],
+    "messageOverrides": [1040],
     "numberingSystem": [513, "numbering-system"],
     "value": [1025],
+    "messages": [1040],
+    "defaultMessages": [32],
     "colorFieldAndSliderInteractive": [32],
     "channelMode": [32],
     "channels": [32],
     "dimensions": [32],
+    "effectiveLocale": [32],
     "savedColors": [32],
     "colorFieldScopeTop": [32],
     "colorFieldScopeLeft": [32],

package/dist/components/calcite-combobox-item-group.js

@@ -1,7 +1,7 @@
 /*!
  * 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 { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client/index.js';
 import { d as getAncestors, e as getDepth } from './utils2.js';

package/dist/components/calcite-combobox-item.js

@@ -1,7 +1,7 @@
 /*!
  * 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 { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { g as getElementProp, b as getSlotted } from './dom.js';

package/dist/components/calcite-combobox.js

@@ -1,20 +1,22 @@
 /*!
  * 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 { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { f as filter } from './filter2.js';
 import { d as defaultMenuPlacement, f as filterComputedPlacements, c as connectFloatingUI, u as updateAfterClose, r as reposition, a as disconnectFloatingUI, F as FloatingCSS } from './floating-ui.js';
 import { g as guid } from './guid.js';
-import { C as ComboboxItemGroup, T as TEXT, a as ComboboxChildSelector, g as getItemAncestors, b as getItemChildren, h as hasActiveChildren, c as ComboboxItem } from './utils2.js';
+import { C as ComboboxItemGroup, a as ComboboxChildSelector, g as getItemAncestors, b as getItemChildren, h as hasActiveChildren, c as ComboboxItem } from './utils2.js';
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label2.js';
 import { s as submitForm, c as connectForm, a as afterConnectDefaultValueSet, d as disconnectForm, H as HiddenFormInputSlot } from './form.js';
 import { c as createObserver } from './observers.js';
 import { u as updateHostInteraction } from './interactive.js';
 import { i as isPrimaryPointerButton, t as toAriaBoolean } from './dom.js';
 import { c as connectOpenCloseComponent, d as disconnectOpenCloseComponent } from './openCloseComponent.js';
-import { c as componentLoaded, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable.js';
+import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale.js';
+import { c as componentLoaded, a as setUpLoadableComponent, s as setComponentLoaded } from './loadable.js';
 import { d as defineCustomElement$3 } from './chip.js';
 import { d as defineCustomElement$2 } from './icon.js';
 import { d as debounce } from './debounce.js';
@@ -325,8 +327,10 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.selectionMode = "multi";
     this.scale = "m";
     this.value = null;
-    this.intlRemoveTag = TEXT.removeTag;
+    this.intlRemoveTag = undefined;
     this.flipPlacements = undefined;
+    this.messages = undefined;
+    this.messageOverrides = undefined;
     this.selectedItems = [];
     this.filteredItems = [];
     this.items = [];
@@ -336,6 +340,8 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.activeChipIndex = -1;
     this.activeDescendant = "";
     this.text = "";
+    this.effectiveLocale = undefined;
+    this.defaultMessages = undefined;
   }
   openHandler(value) {
     if (!value) {
@@ -373,6 +379,9 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.updateItems();
     }
   }
+  onMessagesChange() {
+    /*  wired up by t9n util */
+  }
   flipPlacementsHandler() {
     this.setFilteredPlacements();
     this.reposition(true);
@@ -436,6 +445,8 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   //
   // --------------------------------------------------------------------------
   connectedCallback() {
+    connectLocalized(this);
+    connectMessages(this);
     this.internalValueChangeFlag = true;
     this.value = this.getValue();
     this.internalValueChangeFlag = false;
@@ -449,9 +460,10 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.openHandler(this.open);
     }
   }
-  componentWillLoad() {
+  async componentWillLoad() {
     setUpLoadableComponent(this);
     this.updateItems();
+    await setUpMessages(this);
   }
   componentDidLoad() {
     afterConnectDefaultValueSet(this, this.getValue());
@@ -472,11 +484,16 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     disconnectForm(this);
     disconnectFloatingUI(this, this.referenceEl, this.floatingEl);
     disconnectOpenCloseComponent(this);
+    disconnectLocalized(this);
+    disconnectMessages(this);
   }
   /** when search text is cleared, reset active to  */
   textHandler() {
     this.updateActiveItemIndex(-1);
   }
+  effectiveLocaleChange() {
+    updateMessages(this, this.effectiveLocale);
+  }
   comboboxInViewport() {
     const bounding = this.el.getBoundingClientRect();
     return (bounding.top >= 0 &&
@@ -714,7 +731,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   //
   //--------------------------------------------------------------------------
   renderChips() {
-    const { activeChipIndex, scale, selectionMode, intlRemoveTag } = this;
+    const { activeChipIndex, scale, selectionMode, messages } = this;
     return this.selectedItems.map((item, i) => {
       const chipClasses = {
         chip: true,
@@ -723,7 +740,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       const ancestors = [...getItemAncestors(item)].reverse();
       const pathLabel = [...ancestors, item].map((el) => el.textLabel);
       const label = selectionMode !== "ancestors" ? item.textLabel : pathLabel.join(" / ");
-      return (h("calcite-chip", { class: chipClasses, closable: true, dismissLabel: intlRemoveTag, icon: item.icon, id: item.guid ? `${chipUidPrefix}${item.guid}` : null, key: item.textLabel, onCalciteChipClose: () => this.calciteChipCloseHandler(item), scale: scale, title: label, value: item.value }, label));
+      return (h("calcite-chip", { class: chipClasses, closable: true, dismissLabel: messages.removeTag, icon: item.icon, id: item.guid ? `${chipUidPrefix}${item.guid}` : null, key: item.textLabel, onCalciteChipClose: () => this.calciteChipCloseHandler(item), scale: scale, title: label, value: item.value }, label));
     });
   }
   renderInput() {
@@ -783,6 +800,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         "wrapper--active": open
       }, onClick: this.clickHandler, onKeyDown: this.keydownHandler, ref: this.setReferenceEl, role: "combobox" }, h("div", { class: "grid-input" }, this.renderIconStart(), !single && this.renderChips(), h("label", { class: "screen-readers-only", htmlFor: `${inputUidPrefix}${guid}`, id: `${labelUidPrefix}${guid}` }, label), this.renderInput()), this.renderIconEnd()), h("ul", { "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-multiselectable": "true", class: "screen-readers-only", id: `${listboxUidPrefix}${guid}`, role: "listbox", tabIndex: -1 }, this.renderListBoxOptions()), this.renderFloatingUIContainer(), h(HiddenFormInputSlot, { component: this })));
   }
+  static get assetsDirs() { return ["assets"]; }
   get el() { return this; }
   static get watchers() { return {
     "open": ["openHandler"],
@@ -790,9 +808,12 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "maxItems": ["maxItemsHandler"],
     "overlayPositioning": ["overlayPositioningHandler"],
     "value": ["valueHandler"],
+    "intlRemoveTag": ["onMessagesChange"],
+    "messageOverrides": ["onMessagesChange"],
     "flipPlacements": ["flipPlacementsHandler"],
     "selectedItems": ["selectedItemsHandler"],
-    "text": ["textHandler"]
+    "text": ["textHandler"],
+    "effectiveLocale": ["effectiveLocaleChange"]
   }; }
   static get style() { return comboboxCss; }
 }, [1, "calcite-combobox", {
@@ -811,6 +832,8 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "value": [1025],
     "intlRemoveTag": [1, "intl-remove-tag"],
     "flipPlacements": [16],
+    "messages": [1040],
+    "messageOverrides": [1040],
     "selectedItems": [1040],
     "filteredItems": [1040],
     "items": [32],
@@ -820,6 +843,8 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "activeChipIndex": [32],
     "activeDescendant": [32],
     "text": [32],
+    "effectiveLocale": [32],
+    "defaultMessages": [32],
     "reposition": [64],
     "setFocus": [64]
   }, [[5, "pointerdown", "documentClickHandler"], [0, "calciteComboboxItemChange", "calciteComboboxItemChangeHandler"]]]);

package/dist/components/calcite-date-picker-day.js

@@ -1,7 +1,7 @@
 /*!
  * 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 { D as DatePickerDay, d as defineCustomElement$1 } from './date-picker-day.js';
 

package/dist/components/calcite-date-picker-month-header.js

@@ -1,7 +1,7 @@
 /*!
  * 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 { D as DatePickerMonthHeader, d as defineCustomElement$1 } from './date-picker-month-header.js';
 

package/dist/components/calcite-date-picker-month.js

@@ -1,7 +1,7 @@
 /*!
  * 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 { D as DatePickerMonth, d as defineCustomElement$1 } from './date-picker-month.js';
 

package/dist/components/calcite-date-picker.js

@@ -1,7 +1,7 @@
 /*!
  * 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 { D as DatePicker, d as defineCustomElement$1 } from './date-picker.js';
 

package/dist/components/calcite-dropdown-group.js

@@ -1,7 +1,7 @@
 /*!
  * 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 { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { g as getElementProp } from './dom.js';

package/dist/components/calcite-dropdown-item.js

@@ -1,11 +1,11 @@
 /*!
  * 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 { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { g as getElementProp, t as toAriaBoolean } from './dom.js';
-import { c as componentLoaded, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable.js';
+import { c as componentLoaded, a as setUpLoadableComponent, s as setComponentLoaded } from './loadable.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
 const CSS = {

package/dist/components/calcite-dropdown.js

@@ -1,7 +1,7 @@
 /*!
  * 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 { D as Dropdown, d as defineCustomElement$1 } from './dropdown.js';
 

package/dist/components/calcite-fab.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-next.678
+ * v1.0.0-next.679
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client/index.js';
 import { f as focusElement } from './dom.js';
 import { u as updateHostInteraction } from './interactive.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentLoaded } from './loadable.js';
+import { a as setUpLoadableComponent, s as setComponentLoaded, c as componentLoaded } from './loadable.js';
 import { d as defineCustomElement$4 } from './button.js';
 import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './loader.js';

package/dist/components/calcite-filter.js

@@ -1,7 +1,7 @@
 /*!
  * 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 { F as Filter, d as defineCustomElement$1 } from './filter.js';