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

package/dist/esm/calcite-color-picker_3.entry.js

@@ -1,18 +1,21 @@
 /*!
  * 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 { r as registerInstance, c as createEvent, h, g as getElement } from './index-e5325014.js';
-import { i as isPrimaryPointerButton, a as getElementDir, f as focusElement, e as getThemeName } from './dom-698d7270.js';
-import { n as normalizeHex, C as CSSColorMode, p as parseMode, c as colorEqual, i as isValidHex, a as isLonghandHex, r as rgbToHex, b as hexChar } from './utils-1abaa53b.js';
-import { c as clamp } from './math-eb8845cd.js';
-import { u as updateHostInteraction } from './interactive-dec66263.js';
-import { i as isActivationKey } from './key-8d91dd67.js';
-import { c as componentLoaded, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-25289309.js';
-import { d as debounce, i as isObject } from './debounce-a685f152.js';
-import './resources-6d887db7.js';
-import './guid-928b0183.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-3d40e818.js';
+import { i as isPrimaryPointerButton, b as getElementDir, f as focusElement, e as getThemeName } from './dom-4b063f5a.js';
+import { n as normalizeHex, C as CSSColorMode, p as parseMode, c as colorEqual, i as isValidHex, a as isLonghandHex, r as rgbToHex, b as hexChar } from './utils-078ca2f8.js';
+import { c as clamp } from './math-fa7a3e4f.js';
+import { u as updateHostInteraction } from './interactive-3c9383d9.js';
+import { i as isActivationKey } from './key-ede764e3.js';
+import { u as updateMessages, s as setUpMessages, c as connectMessages, d as disconnectMessages } from './t9n-d3d4a0f4.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-9f9398ba.js';
+import { c as componentLoaded, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-b9b2ca65.js';
+import { d as debounce, i as isObject } from './debounce-48a363f4.js';
+import './resources-144d97f9.js';
+import './guid-5f99983c.js';
+import './observers-8de4feef.js';
 
 /** Error message constants. */
 var FUNC_ERROR_TEXT = 'Expected a function';
@@ -2546,25 +2549,27 @@ const ColorPicker = class {
       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$2.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$2.control, key: channelMode, selected: selected }, h("div", { class: CSS$2.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$2.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$2.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;
@@ -2616,33 +2621,37 @@ const ColorPicker = class {
     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$1);
     this.dimensions = DIMENSIONS.m;
+    this.effectiveLocale = "";
+    this.messages = undefined;
     this.savedColors = [];
     this.colorFieldScopeTop = undefined;
     this.colorFieldScopeLeft = undefined;
@@ -2663,6 +2672,9 @@ const ColorPicker = class {
     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;
@@ -2702,6 +2714,9 @@ const ColorPicker = class {
   get baseColorFieldColor() {
     return this.color || this.previousColor || DEFAULT_COLOR$1;
   }
+  effectiveLocaleChange() {
+    updateMessages(this, this.effectiveLocale);
+  }
   // using @Listen as a workaround for VDOM listener not firing
   handleChannelKeyUpOrDown(event) {
     this.shiftKeyChannelAdjustment = 0;
@@ -2741,7 +2756,7 @@ const ColorPicker = class {
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
-  componentWillLoad() {
+  async componentWillLoad() {
     setUpLoadableComponent(this);
     const { allowEmpty, color: color$1, format, value } = this;
     const willSetNoColor = allowEmpty && !value;
@@ -2758,6 +2773,11 @@ const ColorPicker = class {
     if (this.storageId && localStorage.getItem(storageKey)) {
       this.savedColors = JSON.parse(localStorage.getItem(storageKey));
     }
+    await setUpMessages(this);
+  }
+  connectedCallback() {
+    connectLocalized(this);
+    connectMessages(this);
   }
   componentDidLoad() {
     setComponentLoaded(this);
@@ -2765,6 +2785,8 @@ const ColorPicker = class {
   disconnectedCallback() {
     document.removeEventListener("pointermove", this.globalPointerMoveHandler);
     document.removeEventListener("pointerup", this.globalPointerUpHandler);
+    disconnectLocalized(this);
+    disconnectMessages(this);
   }
   componentDidRender() {
     updateHostInteraction(this);
@@ -2775,7 +2797,7 @@ const ColorPicker = class {
   //
   //--------------------------------------------------------------------------
   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;
@@ -2786,16 +2808,16 @@ const ColorPicker = class {
     return (h("div", { class: CSS$2.container }, h("div", { class: CSS$2.colorFieldAndSliderWrap }, h("canvas", { class: {
         [CSS$2.colorFieldAndSlider]: true,
         [CSS$2.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$2.scope]: true, [CSS$2.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$1.round().hue(), class: { [CSS$2.scope]: true, [CSS$2.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$2.scope]: true, [CSS$2.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$1.round().hue(), class: { [CSS$2.scope]: true, [CSS$2.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$2.controlSection]: true,
         [CSS$2.section]: true
       } }, hideHex ? null : (h("div", { class: CSS$2.hexOptions }, h("span", { class: {
         [CSS$2.header]: true,
         [CSS$2.headerHex]: true
-      } }, intlHex), h("calcite-color-picker-hex-input", { allowEmpty: allowEmpty, class: CSS$2.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$2.control, numberingSystem: this.numberingSystem, onCalciteColorPickerHexInputChange: this.handleHexInputChange, scale: hexInputScale, value: selectedColorInHex }))), hideChannels ? null : (h("calcite-tabs", { class: {
         [CSS$2.colorModeContainer]: true,
         [CSS$2.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$2.savedColorsSection]: true, [CSS$2.section]: true } }, h("div", { class: CSS$2.header }, h("label", null, intlSaved), h("div", { class: CSS$2.savedColorsButtons }, h("calcite-button", { appearance: "transparent", class: CSS$2.deleteColor, color: "neutral", disabled: noColor, iconStart: "minus", label: intlDeleteColor, onClick: this.deleteColor, scale: hexInputScale, type: "button" }), h("calcite-button", { appearance: "transparent", class: CSS$2.saveColor, color: "neutral", disabled: noColor, iconStart: "plus", label: intlSaveColor, onClick: this.saveColor, scale: hexInputScale, type: "button" }))), savedColors.length > 0 ? (h("div", { class: CSS$2.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$2.savedColorsSection]: true, [CSS$2.section]: true } }, h("div", { class: CSS$2.header }, h("label", null, messages.saved), h("div", { class: CSS$2.savedColorsButtons }, h("calcite-button", { appearance: "transparent", class: CSS$2.deleteColor, color: "neutral", disabled: noColor, iconStart: "minus", label: messages.deleteColor, onClick: this.deleteColor, scale: hexInputScale, type: "button" }), h("calcite-button", { appearance: "transparent", class: CSS$2.saveColor, color: "neutral", disabled: noColor, iconStart: "plus", label: messages.saveColor, onClick: this.saveColor, scale: hexInputScale, type: "button" }))), savedColors.length > 0 ? (h("div", { class: CSS$2.savedColors }, [
       ...savedColors.map((color) => (h("calcite-color-picker-swatch", { active: selectedColorInHex === color, class: CSS$2.savedColor, color: color, key: color, onClick: this.handleSavedColorSelect, onKeyDown: this.handleSavedColorKeyDown, scale: scale, tabIndex: 0 })))
     ])) : null))));
   }
@@ -2981,12 +3003,34 @@ const ColorPicker = class {
       .array()
       .map((value) => Math.floor(value));
   }
+  static get assetsDirs() { return ["assets"]; }
   get el() { return getElement(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"]
   }; }
 };
 ColorPicker.style = colorPickerCss;

package/dist/esm/calcite-combobox_3.entry.js

@@ -1,29 +1,29 @@
 /*!
  * 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 { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-e5325014.js';
-import { f as filter } from './filter-25221553.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-a3b2d77c.js';
-import { g as guid } from './guid-928b0183.js';
-import { n as nodeListToArray, i as isPrimaryPointerButton, t as toAriaBoolean, h as getElementProp, g as getSlotted } from './dom-698d7270.js';
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-bb22e2c3.js';
-import { s as submitForm, c as connectForm, a as afterConnectDefaultValueSet, d as disconnectForm, H as HiddenFormInputSlot } from './form-6e3b82cb.js';
-import { c as createObserver } from './observers-a87cbaca.js';
-import { u as updateHostInteraction } from './interactive-dec66263.js';
-import { c as connectOpenCloseComponent, d as disconnectOpenCloseComponent } from './openCloseComponent-ec5c9800.js';
-import { c as componentLoaded, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-25289309.js';
-import { d as debounce } from './debounce-a685f152.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-811c3adf.js';
-import './resources-6d887db7.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-3d40e818.js';
+import { f as filter } from './filter-e095381b.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-7ebc55ad.js';
+import { g as guid } from './guid-5f99983c.js';
+import { n as nodeListToArray, i as isPrimaryPointerButton, t as toAriaBoolean, h as getElementProp, g as getSlotted } from './dom-4b063f5a.js';
+import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-ec7a2761.js';
+import { s as submitForm, c as connectForm, a as afterConnectDefaultValueSet, d as disconnectForm, H as HiddenFormInputSlot } from './form-6f260994.js';
+import { c as createObserver } from './observers-8de4feef.js';
+import { u as updateHostInteraction } from './interactive-3c9383d9.js';
+import { c as connectOpenCloseComponent, d as disconnectOpenCloseComponent } from './openCloseComponent-a8a9808a.js';
+import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n-d3d4a0f4.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-9f9398ba.js';
+import { c as componentLoaded, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-b9b2ca65.js';
+import { d as debounce } from './debounce-48a363f4.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-fd34dd5a.js';
+import './resources-144d97f9.js';
+import './key-ede764e3.js';
 
 const ComboboxItem$1 = "CALCITE-COMBOBOX-ITEM";
 const ComboboxItemGroup$1 = "CALCITE-COMBOBOX-ITEM-GROUP";
 const ComboboxChildSelector = `${ComboboxItem$1}, ${ComboboxItemGroup$1}`;
-const TEXT = {
-  removeTag: "Remove tag"
-};
 
 function getAncestors(element) {
   const parent = element.parentElement?.closest(ComboboxChildSelector);
@@ -349,8 +349,10 @@ const Combobox = class {
     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 = [];
@@ -360,6 +362,8 @@ const Combobox = class {
     this.activeChipIndex = -1;
     this.activeDescendant = "";
     this.text = "";
+    this.effectiveLocale = undefined;
+    this.defaultMessages = undefined;
   }
   openHandler(value) {
     if (!value) {
@@ -397,6 +401,9 @@ const Combobox = class {
       this.updateItems();
     }
   }
+  onMessagesChange() {
+    /*  wired up by t9n util */
+  }
   flipPlacementsHandler() {
     this.setFilteredPlacements();
     this.reposition(true);
@@ -460,6 +467,8 @@ const Combobox = class {
   //
   // --------------------------------------------------------------------------
   connectedCallback() {
+    connectLocalized(this);
+    connectMessages(this);
     this.internalValueChangeFlag = true;
     this.value = this.getValue();
     this.internalValueChangeFlag = false;
@@ -473,9 +482,10 @@ const Combobox = class {
       this.openHandler(this.open);
     }
   }
-  componentWillLoad() {
+  async componentWillLoad() {
     setUpLoadableComponent(this);
     this.updateItems();
+    await setUpMessages(this);
   }
   componentDidLoad() {
     afterConnectDefaultValueSet(this, this.getValue());
@@ -496,11 +506,16 @@ const Combobox = class {
     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 &&
@@ -738,7 +753,7 @@ const Combobox = class {
   //
   //--------------------------------------------------------------------------
   renderChips() {
-    const { activeChipIndex, scale, selectionMode, intlRemoveTag } = this;
+    const { activeChipIndex, scale, selectionMode, messages } = this;
     return this.selectedItems.map((item, i) => {
       const chipClasses = {
         chip: true,
@@ -747,7 +762,7 @@ const Combobox = class {
       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() {
@@ -807,6 +822,7 @@ const Combobox = class {
         "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 getElement(this); }
   static get watchers() { return {
     "open": ["openHandler"],
@@ -814,9 +830,12 @@ const Combobox = class {
     "maxItems": ["maxItemsHandler"],
     "overlayPositioning": ["overlayPositioningHandler"],
     "value": ["valueHandler"],
+    "intlRemoveTag": ["onMessagesChange"],
+    "messageOverrides": ["onMessagesChange"],
     "flipPlacements": ["flipPlacementsHandler"],
     "selectedItems": ["selectedItemsHandler"],
-    "text": ["textHandler"]
+    "text": ["textHandler"],
+    "effectiveLocale": ["effectiveLocaleChange"]
   }; }
 };
 Combobox.style = comboboxCss;

package/dist/esm/calcite-date-picker_4.entry.js

@@ -1,18 +1,21 @@
 /*!
  * 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 { r as registerInstance, c as createEvent, h, H as Host, g as getElement, F as Fragment } from './index-e5325014.js';
-import { h as getDaysDiff, b as dateToISO, T as TEXT, c as dateFromISO, g as getValueAsDateRange, f as dateFromRange, e as getLocaleData, s as setEndOfDay, j as sameDate, i as inRange, k as getOrder, n as nextMonth, p as prevMonth } from './resources-ff911a63.js';
-import { c as connectLocalized, d as disconnectLocalized, n as numberStringFormatter } from './locale-26fba509.js';
-import { c as closestElementCrossShadowBoundary, a as getElementDir } from './dom-698d7270.js';
-import { C as CSS_UTILITY } from './resources-6d887db7.js';
-import { u as updateHostInteraction } from './interactive-dec66263.js';
-import { i as isActivationKey } from './key-8d91dd67.js';
-import { H as Heading } from './Heading-1ef3c37c.js';
-import './observers-a87cbaca.js';
-import './guid-928b0183.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, F as Fragment } from './index-3d40e818.js';
+import { h as getDaysDiff, b as dateToISO, c as dateFromISO, g as getValueAsDateRange, f as dateFromRange, e as getLocaleData, s as setEndOfDay, j as sameDate, i as inRange, k as getOrder, n as nextMonth, p as prevMonth } from './utils-7de78b5e.js';
+import { c as connectMessages, d as disconnectMessages, s as setUpMessages, u as updateMessages } from './t9n-d3d4a0f4.js';
+import { c as connectLocalized, d as disconnectLocalized, n as numberStringFormatter } from './locale-9f9398ba.js';
+import { c as closestElementCrossShadowBoundary, b as getElementDir } from './dom-4b063f5a.js';
+import { C as CSS_UTILITY } from './resources-144d97f9.js';
+import { u as updateHostInteraction } from './interactive-3c9383d9.js';
+import { i as isActivationKey } from './key-ede764e3.js';
+import { H as Heading } from './Heading-a542ba34.js';
+import './observers-8de4feef.js';
+import './guid-5f99983c.js';
+
+const HEADING_LEVEL = 2;
 
 const datePickerCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:600}:host([hidden]){display:none}:host{position:relative;display:inline-block;inline-size:100%;overflow:visible;border-radius:0px;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-2);background-color:var(--calcite-ui-foreground-1);vertical-align:top}:host([scale=s]){max-inline-size:216px}:host([scale=m]){max-inline-size:286px}:host([scale=l]){max-inline-size:398px}";
 
@@ -225,17 +228,19 @@ const DatePicker = class {
     this.maxAsDate = undefined;
     this.min = undefined;
     this.max = undefined;
-    this.intlPrevMonth = TEXT.prevMonth;
-    this.intlNextMonth = TEXT.nextMonth;
-    this.intlYear = TEXT.year;
+    this.intlPrevMonth = undefined;
+    this.intlNextMonth = undefined;
+    this.intlYear = undefined;
     this.numberingSystem = undefined;
     this.scale = "m";
     this.range = false;
     this.proximitySelectionDisabled = false;
+    this.messageOverrides = undefined;
+    this.messages = undefined;
     this.activeStartDate = undefined;
     this.activeEndDate = undefined;
-    this.globalAttributes = {};
     this.effectiveLocale = "";
+    this.defaultMessages = undefined;
     this.localeData = undefined;
     this.hoverRange = undefined;
   }
@@ -264,6 +269,9 @@ const DatePicker = class {
       this.maxAsDate = dateFromISO(max);
     }
   }
+  onMessagesChange() {
+    /* wired up by t9n util */
+  }
   // --------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -271,6 +279,7 @@ const DatePicker = class {
   // --------------------------------------------------------------------------
   connectedCallback() {
     connectLocalized(this);
+    connectMessages(this);
     if (Array.isArray(this.value)) {
       this.valueAsDate = getValueAsDateRange(this.value);
     }
@@ -286,11 +295,13 @@ const DatePicker = class {
   }
   disconnectedCallback() {
     disconnectLocalized(this);
+    disconnectMessages(this);
   }
   async componentWillLoad() {
     await this.loadLocaleData();
     this.onMinChanged(this.min);
     this.onMaxChanged(this.max);
+    await setUpMessages(this);
   }
   render() {
     const date = dateFromRange(this.range && Array.isArray(this.valueAsDate) ? this.valueAsDate[0] : this.valueAsDate, this.minAsDate, this.maxAsDate);
@@ -319,6 +330,9 @@ const DatePicker = class {
       : this.maxAsDate;
     return (h(Host, { onBlur: this.reset, onKeyDown: this.keyDownHandler, role: "application" }, this.renderCalendar(activeDate, maxDate, minDate, date, endDate)));
   }
+  effectiveLocaleChange() {
+    updateMessages(this, this.effectiveLocale);
+  }
   valueHandler(value) {
     if (Array.isArray(value)) {
       this.valueAsDate = getValueAsDateRange(value);
@@ -346,7 +360,7 @@ const DatePicker = class {
    */
   renderCalendar(activeDate, maxDate, minDate, date, endDate) {
     return (this.localeData && [
-      h("calcite-date-picker-month-header", { activeDate: activeDate, headingLevel: this.headingLevel, intlNextMonth: this.intlNextMonth, intlPrevMonth: this.intlPrevMonth, intlYear: this.intlYear, localeData: this.localeData, max: maxDate, min: minDate, onCalciteDatePickerSelect: this.monthHeaderSelectChange, scale: this.scale, selectedDate: this.activeRange === "end" ? endDate : date || new Date() }),
+      h("calcite-date-picker-month-header", { activeDate: activeDate, headingLevel: this.headingLevel || HEADING_LEVEL, localeData: this.localeData, max: maxDate, messages: this.messages, min: minDate, onCalciteDatePickerSelect: this.monthHeaderSelectChange, scale: this.scale, selectedDate: this.activeRange === "end" ? endDate : date || new Date() }),
       h("calcite-date-picker-month", { activeDate: activeDate, endDate: this.range ? endDate : undefined, hoverRange: this.hoverRange, localeData: this.localeData, max: maxDate, min: minDate, onCalciteDatePickerActiveDateChange: this.monthActiveDateChange, onCalciteDatePickerSelect: this.monthDateChange, onCalciteInternalDatePickerHover: this.monthHoverChange, onCalciteInternalDatePickerMouseOut: this.monthMouseOutChange, scale: this.scale, selectedDate: this.activeRange === "end" ? endDate : date, startDate: this.range ? date : undefined })
     ]);
   }
@@ -406,8 +420,12 @@ const DatePicker = class {
     "endAsDate": ["handleRangeChange"],
     "min": ["onMinChanged"],
     "max": ["onMaxChanged"],
-    "value": ["valueHandler"],
-    "effectiveLocale": ["loadLocaleData"]
+    "intlNextMonth": ["onMessagesChange"],
+    "intlPrevMonth": ["onMessagesChange"],
+    "intlYear": ["onMessagesChange"],
+    "messageOverrides": ["onMessagesChange"],
+    "effectiveLocale": ["effectiveLocaleChange", "loadLocaleData"],
+    "value": ["valueHandler"]
   }; }
 };
 DatePicker.style = datePickerCss;
@@ -871,11 +889,9 @@ const DatePickerMonthHeader = class {
     this.headingLevel = undefined;
     this.min = undefined;
     this.max = undefined;
-    this.intlPrevMonth = undefined;
-    this.intlNextMonth = undefined;
-    this.intlYear = undefined;
     this.scale = undefined;
     this.localeData = undefined;
+    this.messages = undefined;
     this.globalAttributes = {};
     this.nextMonthDate = undefined;
     this.prevMonthDate = undefined;
@@ -895,7 +911,8 @@ const DatePickerMonthHeader = class {
     return h("div", { class: CSS.header }, this.renderContent());
   }
   renderContent() {
-    if (!this.activeDate || !this.localeData) {
+    const { messages, localeData, activeDate } = this;
+    if (!activeDate || !localeData) {
       return null;
     }
     if (this.parentDatePickerEl) {
@@ -906,18 +923,18 @@ const DatePickerMonthHeader = class {
         ...(locale && { locale })
       };
     }
-    const activeMonth = this.activeDate.getMonth();
-    const { months, unitOrder } = this.localeData;
+    const activeMonth = activeDate.getMonth();
+    const { months, unitOrder } = localeData;
     const localizedMonth = (months.wide || months.narrow || months.abbreviated)[activeMonth];
-    const localizedYear = this.formatCalendarYear(this.activeDate.getFullYear());
+    const localizedYear = this.formatCalendarYear(activeDate.getFullYear());
     const iconScale = this.scale === "l" ? "m" : "s";
     const order = getOrder(unitOrder);
     const reverse = order.indexOf("y") < order.indexOf("m");
-    const suffix = this.localeData.year?.suffix;
-    return (h(Fragment, null, h("a", { "aria-disabled": `${this.prevMonthDate.getMonth() === activeMonth}`, "aria-label": this.intlPrevMonth, class: CSS.chevron, href: "#", onClick: this.prevMonthClick, onKeyDown: this.prevMonthKeydown, role: "button", tabindex: this.prevMonthDate.getMonth() === activeMonth ? -1 : 0 }, h("calcite-icon", { "flip-rtl": true, icon: ICON.chevronLeft, scale: iconScale })), h("div", { class: { text: true, [CSS.textReverse]: reverse } }, h(Heading, { class: CSS.month, level: this.headingLevel }, localizedMonth), h("span", { class: CSS.yearWrap }, h("input", { "aria-label": this.intlYear, class: {
+    const suffix = localeData.year?.suffix;
+    return (h(Fragment, null, h("a", { "aria-disabled": `${this.prevMonthDate.getMonth() === activeMonth}`, "aria-label": messages.prevMonth, class: CSS.chevron, href: "#", onClick: this.prevMonthClick, onKeyDown: this.prevMonthKeydown, role: "button", tabindex: this.prevMonthDate.getMonth() === activeMonth ? -1 : 0 }, h("calcite-icon", { "flip-rtl": true, icon: ICON.chevronLeft, scale: iconScale })), h("div", { class: { text: true, [CSS.textReverse]: reverse } }, h(Heading, { class: CSS.month, level: this.headingLevel }, localizedMonth), h("span", { class: CSS.yearWrap }, h("input", { "aria-label": messages.year, class: {
         year: true,
         [CSS.yearSuffix]: !!suffix
-      }, inputmode: "numeric", maxlength: "4", minlength: "1", onChange: this.onYearChange, onInput: this.onYearInput, onKeyDown: this.onYearKey, pattern: "\\d*", ref: (el) => (this.yearInput = el), type: "text", value: localizedYear }), suffix && h("span", { class: CSS.suffix }, suffix))), h("a", { "aria-disabled": `${this.nextMonthDate.getMonth() === activeMonth}`, "aria-label": this.intlNextMonth, class: CSS.chevron, href: "#", onClick: this.nextMonthClick, onKeyDown: this.nextMonthKeydown, role: "button", tabindex: this.nextMonthDate.getMonth() === activeMonth ? -1 : 0 }, h("calcite-icon", { "flip-rtl": true, icon: ICON.chevronRight, scale: iconScale }))));
+      }, inputmode: "numeric", maxlength: "4", minlength: "1", onChange: this.onYearChange, onInput: this.onYearInput, onKeyDown: this.onYearKey, pattern: "\\d*", ref: (el) => (this.yearInput = el), type: "text", value: localizedYear }), suffix && h("span", { class: CSS.suffix }, suffix))), h("a", { "aria-disabled": `${this.nextMonthDate.getMonth() === activeMonth}`, "aria-label": messages.nextMonth, class: CSS.chevron, href: "#", onClick: this.nextMonthClick, onKeyDown: this.nextMonthKeydown, role: "button", tabindex: this.nextMonthDate.getMonth() === activeMonth ? -1 : 0 }, h("calcite-icon", { "flip-rtl": true, icon: ICON.chevronRight, scale: iconScale }))));
   }
   setNextPrevMonthDates() {
     if (!this.activeDate) {

package/dist/esm/calcite-dropdown_3.entry.js

@@ -1,19 +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 { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-e5325014.js';
-import { t as toAriaBoolean, i as isPrimaryPointerButton, f as focusElement, h as getElementProp } from './dom-698d7270.js';
-import { f as filterComputedPlacements, c as connectFloatingUI, d as defaultMenuPlacement, u as updateAfterClose, a as disconnectFloatingUI, F as FloatingCSS, r as reposition } from './floating-ui-a3b2d77c.js';
-import { c as createObserver } from './observers-a87cbaca.js';
-import { u as updateHostInteraction } from './interactive-dec66263.js';
-import { c as connectOpenCloseComponent, d as disconnectOpenCloseComponent } from './openCloseComponent-ec5c9800.js';
-import { g as guid } from './guid-928b0183.js';
-import { i as isActivationKey } from './key-8d91dd67.js';
-import { c as componentLoaded, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-25289309.js';
-import './resources-6d887db7.js';
-import './debounce-a685f152.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-3d40e818.js';
+import { t as toAriaBoolean, i as isPrimaryPointerButton, f as focusElement, h as getElementProp } from './dom-4b063f5a.js';
+import { f as filterComputedPlacements, c as connectFloatingUI, d as defaultMenuPlacement, u as updateAfterClose, a as disconnectFloatingUI, F as FloatingCSS, r as reposition } from './floating-ui-7ebc55ad.js';
+import { c as createObserver } from './observers-8de4feef.js';
+import { u as updateHostInteraction } from './interactive-3c9383d9.js';
+import { c as connectOpenCloseComponent, d as disconnectOpenCloseComponent } from './openCloseComponent-a8a9808a.js';
+import { g as guid } from './guid-5f99983c.js';
+import { i as isActivationKey } from './key-ede764e3.js';
+import { c as componentLoaded, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-b9b2ca65.js';
+import './resources-144d97f9.js';
+import './debounce-48a363f4.js';
 
 const SLOTS = {
   dropdownTrigger: "trigger"

package/dist/esm/calcite-fab.entry.js

@@ -1,14 +1,14 @@
 /*!
  * 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 { r as registerInstance, h, g as getElement } from './index-e5325014.js';
-import { f as focusElement } from './dom-698d7270.js';
-import { u as updateHostInteraction } from './interactive-dec66263.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentLoaded } from './loadable-25289309.js';
-import './resources-6d887db7.js';
-import './guid-928b0183.js';
+import { r as registerInstance, h, g as getElement } from './index-3d40e818.js';
+import { f as focusElement } from './dom-4b063f5a.js';
+import { u as updateHostInteraction } from './interactive-3c9383d9.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentLoaded } from './loadable-b9b2ca65.js';
+import './resources-144d97f9.js';
+import './guid-5f99983c.js';
 
 const CSS = {
   button: "button"