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

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

@@ -1,13 +1,15 @@
 /*!
  * 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 { c as getElementDir } from './dom.js';
 import { S as SLOTS$1, d as defineCustomElement$5 } from './panel.js';
 import { u as updateHostInteraction } from './interactive.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentLoaded } from './loadable.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale.js';
+import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n.js';
+import { a as setUpLoadableComponent, s as setComponentLoaded, c as componentLoaded } from './loadable.js';
 import { d as defineCustomElement$9 } from './action.js';
 import { d as defineCustomElement$8 } from './action-menu.js';
 import { d as defineCustomElement$7 } from './icon.js';
@@ -23,9 +25,6 @@ const ICONS = {
   backLeft: "chevron-left",
   backRight: "chevron-right"
 };
-const TEXT = {
-  back: "Back"
-};
 const SLOTS = {
   headerActionsStart: "header-actions-start",
   headerActionsEnd: "header-actions-end",
@@ -68,9 +67,6 @@ const FlowItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.setContainerRef = (node) => {
       this.containerEl = node;
     };
-    this.getBackLabel = () => {
-      return this.intlBack || TEXT.back;
-    };
     this.closable = false;
     this.closed = false;
     this.beforeBack = undefined;
@@ -84,24 +80,43 @@ const FlowItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.intlOptions = undefined;
     this.loading = false;
     this.menuOpen = false;
+    this.messageOverrides = undefined;
+    this.messages = undefined;
     this.showBackButton = false;
     this.widthScale = undefined;
     this.backButtonEl = undefined;
+    this.defaultMessages = undefined;
+    this.effectiveLocale = "";
+  }
+  onMessagesChange() {
+    /* wired up by t9n util */
   }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
-  componentWillLoad() {
+  connectedCallback() {
+    connectLocalized(this);
+    connectMessages(this);
+  }
+  async componentWillLoad() {
+    await setUpMessages(this);
     setUpLoadableComponent(this);
   }
   componentDidRender() {
     updateHostInteraction(this);
   }
+  disconnectedCallback() {
+    disconnectLocalized(this);
+    disconnectMessages(this);
+  }
   componentDidLoad() {
     setComponentLoaded(this);
   }
+  effectiveLocaleChange() {
+    updateMessages(this, this.effectiveLocale);
+  }
   // --------------------------------------------------------------------------
   //
   //  Methods
@@ -141,17 +156,25 @@ const FlowItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   renderBackButton() {
     const { el } = this;
     const rtl = getElementDir(el) === "rtl";
-    const { showBackButton, backButtonClick } = this;
-    const label = this.getBackLabel();
+    const { showBackButton, backButtonClick, messages } = this;
+    const label = messages.back;
     const icon = rtl ? ICONS.backRight : ICONS.backLeft;
     return showBackButton ? (h("calcite-action", { "aria-label": label, class: CSS.backButton, icon: icon, key: "flow-back-button", onClick: backButtonClick, ref: this.setBackRef, scale: "s", slot: "header-actions-start", text: label })) : null;
   }
   render() {
-    const { closable, closed, description, disabled, heading, headingLevel, heightScale, intlClose, intlOptions, loading, menuOpen, widthScale, backButtonEl } = this;
-    const label = this.getBackLabel();
-    return (h(Host, null, h("calcite-panel", { closable: closable, closed: closed, description: description, disabled: disabled, heading: heading, headingLevel: headingLevel, heightScale: heightScale, intlClose: intlClose, intlOptions: intlOptions, loading: loading, menuOpen: menuOpen, onCalcitePanelClose: this.handlePanelClose, onCalcitePanelScroll: this.handlePanelScroll, ref: this.setContainerRef, widthScale: widthScale }, this.renderBackButton(), h("slot", { name: SLOTS.headerActionsStart, slot: SLOTS$1.headerActionsStart }), h("slot", { name: SLOTS.headerActionsEnd, slot: SLOTS$1.headerActionsEnd }), h("slot", { name: SLOTS.headerContent, slot: SLOTS$1.headerContent }), h("slot", { name: SLOTS.headerMenuActions, slot: SLOTS$1.headerMenuActions }), h("slot", { name: SLOTS.fab, slot: SLOTS$1.fab }), h("slot", { name: SLOTS.footerActions, slot: SLOTS$1.footerActions }), h("slot", { name: SLOTS.footer, slot: SLOTS$1.footer }), h("slot", null)), backButtonEl ? (h("calcite-tooltip", { label: label, overlayPositioning: "fixed", placement: "top", referenceElement: backButtonEl }, label)) : null));
+    const { closable, closed, description, disabled, heading, headingLevel, heightScale, loading, menuOpen, messages, widthScale, backButtonEl } = this;
+    const label = messages.back;
+    return (h(Host, null, h("calcite-panel", { closable: closable, closed: closed, description: description, disabled: disabled, heading: heading, headingLevel: headingLevel, heightScale: heightScale, loading: loading, menuOpen: menuOpen, messageOverrides: messages, onCalcitePanelClose: this.handlePanelClose, onCalcitePanelScroll: this.handlePanelScroll, ref: this.setContainerRef, widthScale: widthScale }, this.renderBackButton(), h("slot", { name: SLOTS.headerActionsStart, slot: SLOTS$1.headerActionsStart }), h("slot", { name: SLOTS.headerActionsEnd, slot: SLOTS$1.headerActionsEnd }), h("slot", { name: SLOTS.headerContent, slot: SLOTS$1.headerContent }), h("slot", { name: SLOTS.headerMenuActions, slot: SLOTS$1.headerMenuActions }), h("slot", { name: SLOTS.fab, slot: SLOTS$1.fab }), h("slot", { name: SLOTS.footerActions, slot: SLOTS$1.footerActions }), h("slot", { name: SLOTS.footer, slot: SLOTS$1.footer }), h("slot", null)), backButtonEl ? (h("calcite-tooltip", { label: label, overlayPositioning: "fixed", placement: "top", referenceElement: backButtonEl }, label)) : null));
   }
+  static get assetsDirs() { return ["assets"]; }
   get el() { return this; }
+  static get watchers() { return {
+    "intlBack": ["onMessagesChange"],
+    "intlClose": ["onMessagesChange"],
+    "intlOptions": ["onMessagesChange"],
+    "messageOverrides": ["onMessagesChange"],
+    "effectiveLocale": ["effectiveLocaleChange"]
+  }; }
   static get style() { return flowItemCss; }
 }, [1, "calcite-flow-item", {
     "closable": [1540],
@@ -167,9 +190,13 @@ const FlowItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "intlOptions": [1, "intl-options"],
     "loading": [516],
     "menuOpen": [516, "menu-open"],
+    "messageOverrides": [1040],
+    "messages": [1040],
     "showBackButton": [516, "show-back-button"],
     "widthScale": [513, "width-scale"],
     "backButtonEl": [32],
+    "defaultMessages": [32],
+    "effectiveLocale": [32],
     "setFocus": [64],
     "scrollContentTo": [64]
   }]);

package/dist/components/calcite-flow.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 { c as createObserver } from './observers.js';

package/dist/components/calcite-graph.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 { G as Graph, d as defineCustomElement$1 } from './graph.js';
 

package/dist/components/calcite-handle.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 { H as Handle, d as defineCustomElement$1 } from './handle.js';
 

package/dist/components/calcite-icon.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 { I as Icon, d as defineCustomElement$1 } from './icon.js';
 

package/dist/components/calcite-inline-editable.js

@@ -1,14 +1,16 @@
 /*!
  * 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 { g as getElementProp, b as getSlotted } from './dom.js';
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label2.js';
 import { c as createObserver } from './observers.js';
 import { u as updateHostInteraction } from './interactive.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentLoaded } from './loadable.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale.js';
+import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n.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';
@@ -22,11 +24,6 @@ const CSS = {
   enableEditingButton: "enable-editing-button",
   controlsWrapper: "controls-wrapper"
 };
-const TEXT = {
-  intlEnablingEditing: "Click to edit",
-  intlCancelEditing: "Cancel",
-  intlConfirmChanges: "Save"
-};
 
 const inlineEditableCss = "@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([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host{display:block}:host([scale=s]) .controls-wrapper{block-size:1.5rem}:host([scale=m]) .controls-wrapper{block-size:2rem}:host([scale=l]) .controls-wrapper{block-size:2.75rem}:host(:not([editing-enabled]):not([disabled])) .wrapper:hover{background-color:var(--calcite-ui-foreground-2)}.wrapper{box-sizing:border-box;display:flex;justify-content:space-between;background-color:var(--calcite-ui-foreground-1);transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}.wrapper .input-wrapper{flex:1 1 0%}.controls-wrapper{display:flex}:host([disabled]) .cancel-editing-button-wrapper{border-color:var(--calcite-ui-border-2)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}";
 
@@ -113,11 +110,15 @@ const InlineEditable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     this.editingEnabled = false;
     this.loading = false;
     this.controls = false;
-    this.intlEnableEditing = TEXT.intlEnablingEditing;
-    this.intlCancelEditing = TEXT.intlCancelEditing;
-    this.intlConfirmChanges = TEXT.intlConfirmChanges;
+    this.intlEnableEditing = undefined;
+    this.intlCancelEditing = undefined;
+    this.intlConfirmChanges = undefined;
     this.scale = undefined;
     this.afterConfirm = undefined;
+    this.messages = undefined;
+    this.messageOverrides = undefined;
+    this.defaultMessages = undefined;
+    this.effectiveLocale = undefined;
   }
   disabledWatcher(disabled) {
     if (this.inputElement) {
@@ -132,6 +133,9 @@ const InlineEditable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
       this.shouldEmitCancel = true;
     }
   }
+  onMessagesChange() {
+    /* wired up by t9n util */
+  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -139,29 +143,34 @@ const InlineEditable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   //--------------------------------------------------------------------------
   connectedCallback() {
     connectLabel(this);
+    connectLocalized(this);
+    connectMessages(this);
     this.mutationObserver?.observe(this.el, { childList: true });
     this.mutationObserverCallback();
   }
-  componentWillLoad() {
+  async componentWillLoad() {
     setUpLoadableComponent(this);
+    await setUpMessages(this);
   }
   componentDidLoad() {
     setComponentLoaded(this);
   }
   disconnectedCallback() {
     disconnectLabel(this);
+    disconnectLocalized(this);
+    disconnectMessages(this);
     this.mutationObserver?.disconnect();
   }
   componentDidRender() {
     updateHostInteraction(this);
   }
   render() {
-    return (h("div", { class: CSS.wrapper, onClick: this.enableEditingHandler, onKeyDown: this.escapeKeyHandler }, h("div", { class: CSS.inputWrapper }, h("slot", null)), h("div", { class: CSS.controlsWrapper }, h("calcite-button", { appearance: "transparent", class: CSS.enableEditingButton, color: "neutral", disabled: this.disabled, iconStart: "pencil", label: this.intlEnableEditing, onClick: this.enableEditingHandler, ref: (el) => (this.enableEditingButton = el), scale: this.scale, style: {
+    return (h("div", { class: CSS.wrapper, onClick: this.enableEditingHandler, onKeyDown: this.escapeKeyHandler }, h("div", { class: CSS.inputWrapper }, h("slot", null)), h("div", { class: CSS.controlsWrapper }, h("calcite-button", { appearance: "transparent", class: CSS.enableEditingButton, color: "neutral", disabled: this.disabled, iconStart: "pencil", label: this.messages.enableEditing, onClick: this.enableEditingHandler, ref: (el) => (this.enableEditingButton = el), scale: this.scale, style: {
         opacity: this.editingEnabled ? "0" : "1",
         width: this.editingEnabled ? "0" : "inherit"
       }, type: "button" }), this.shouldShowControls && [
-      h("div", { class: CSS.cancelEditingButtonWrapper }, h("calcite-button", { appearance: "transparent", class: CSS.cancelEditingButton, color: "neutral", disabled: this.disabled, iconStart: "x", label: this.intlCancelEditing, onClick: this.cancelEditingHandler, ref: (el) => (this.cancelEditingButton = el), scale: this.scale, type: "button" })),
-      h("calcite-button", { appearance: "solid", class: CSS.confirmChangesButton, color: "blue", disabled: this.disabled, iconStart: "check", label: this.intlConfirmChanges, loading: this.loading, onClick: this.confirmChangesHandler, ref: (el) => (this.confirmEditingButton = el), scale: this.scale, type: "button" })
+      h("div", { class: CSS.cancelEditingButtonWrapper }, h("calcite-button", { appearance: "transparent", class: CSS.cancelEditingButton, color: "neutral", disabled: this.disabled, iconStart: "x", label: this.messages.cancelEditing, onClick: this.cancelEditingHandler, ref: (el) => (this.cancelEditingButton = el), scale: this.scale, type: "button" })),
+      h("calcite-button", { appearance: "solid", class: CSS.confirmChangesButton, color: "blue", disabled: this.disabled, iconStart: "check", label: this.messages.confirmChanges, loading: this.loading, onClick: this.confirmChangesHandler, ref: (el) => (this.confirmEditingButton = el), scale: this.scale, type: "button" })
     ])));
   }
   //--------------------------------------------------------------------------
@@ -174,6 +183,9 @@ const InlineEditable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
       this.disableEditing();
     }
   }
+  effectiveLocaleChange() {
+    updateMessages(this, this.effectiveLocale);
+  }
   //--------------------------------------------------------------------------
   //
   //  Public Methods
@@ -215,10 +227,16 @@ const InlineEditable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   get shouldShowControls() {
     return this.editingEnabled && this.controls;
   }
+  static get assetsDirs() { return ["assets"]; }
   get el() { return this; }
   static get watchers() { return {
     "disabled": ["disabledWatcher"],
-    "editingEnabled": ["editingEnabledWatcher"]
+    "editingEnabled": ["editingEnabledWatcher"],
+    "intlCancelEditing": ["onMessagesChange"],
+    "intlConfirmChanges": ["onMessagesChange"],
+    "intlEnableEditing": ["onMessagesChange"],
+    "messageOverrides": ["onMessagesChange"],
+    "effectiveLocale": ["effectiveLocaleChange"]
   }; }
   static get style() { return inlineEditableCss; }
 }, [1, "calcite-inline-editable", {
@@ -231,6 +249,10 @@ const InlineEditable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     "intlConfirmChanges": [513, "intl-confirm-changes"],
     "scale": [1537],
     "afterConfirm": [16],
+    "messages": [1040],
+    "messageOverrides": [1040],
+    "defaultMessages": [32],
+    "effectiveLocale": [32],
     "setFocus": [64]
   }, [[0, "calciteInternalInputBlur", "blurHandler"]]]);
 function defineCustomElement$1() {

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

@@ -1,10 +1,10 @@
 /*!
  * 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, Build } from '@stencil/core/internal/client/index.js';
-import { g as getValueAsDateRange, T as TEXT, a as getLocaleData, d as defineCustomElement$8 } from './date-picker.js';
+import { g as getValueAsDateRange, a as getLocaleData, d as defineCustomElement$8 } from './date-picker.js';
 import { d as datePartsFromLocalizedString, a as dateFromLocalizedString, i as inRange, b as dateToISO, s as setEndOfDay, c as dateFromISO, e as dateFromRange } from './date.js';
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label2.js';
 import { s as submitForm, c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form.js';
@@ -14,7 +14,7 @@ import { t as toAriaBoolean } from './dom.js';
 import { c as connectOpenCloseComponent, d as disconnectOpenCloseComponent } from './openCloseComponent.js';
 import { n as numberStringFormatter, c as connectLocalized, d as disconnectLocalized } from './locale.js';
 import { n as numberKeys } from './key.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$7 } from './date-picker-day.js';
 import { d as defineCustomElement$6 } from './date-picker-month.js';
 import { d as defineCustomElement$5 } from './date-picker-month-header.js';
@@ -243,9 +243,9 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     this.max = undefined;
     this.open = false;
     this.name = 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.placement = defaultMenuPlacement;
@@ -256,6 +256,7 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     this.overlayPositioning = "absolute";
     this.proximitySelectionDisabled = false;
     this.layout = "horizontal";
+    this.messageOverrides = undefined;
     this.datePickerActiveDate = undefined;
     this.effectiveLocale = "";
     this.focusedInput = "start";
@@ -455,7 +456,9 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
         ["calendar-picker-wrapper--end"]: this.focusedInput === "end",
         [FloatingCSS.animation]: true,
         [FloatingCSS.animationActive]: this.open
-      }, ref: this.setTransitionEl }, h("calcite-date-picker", { activeDate: this.datePickerActiveDate, activeRange: this.focusedInput, endAsDate: this.endAsDate, headingLevel: this.headingLevel, intlNextMonth: this.intlNextMonth, intlPrevMonth: this.intlPrevMonth, intlYear: this.intlYear, max: this.max, maxAsDate: this.maxAsDate, min: this.min, minAsDate: this.minAsDate, numberingSystem: numberingSystem, onCalciteDatePickerChange: this.handleDateChange, onCalciteDatePickerRangeChange: this.handleDateRangeChange, proximitySelectionDisabled: this.proximitySelectionDisabled, range: this.range, scale: this.scale, startAsDate: this.startAsDate, tabIndex: 0, valueAsDate: this.valueAsDate }))), this.range && this.layout === "horizontal" && (h("div", { class: "horizontal-arrow-container" }, h("calcite-icon", { flipRtl: true, icon: "arrow-right", scale: "s" }))), this.range && this.layout === "vertical" && this.scale !== "s" && (h("div", { class: "vertical-arrow-container" }, h("calcite-icon", { icon: "arrow-down", scale: "s" }))), this.range && (h("div", { class: "input-wrapper", ref: this.setEndWrapper }, h("calcite-input", { class: {
+      }, ref: this.setTransitionEl }, h("calcite-date-picker", { activeDate: this.datePickerActiveDate, activeRange: this.focusedInput, endAsDate: this.endAsDate, headingLevel: this.headingLevel,
+      //t9n props are used here to forward the messages only.
+      intlNextMonth: this.intlNextMonth, intlPrevMonth: this.intlPrevMonth, intlYear: this.intlYear, max: this.max, maxAsDate: this.maxAsDate, messageOverrides: this.messageOverrides, min: this.min, minAsDate: this.minAsDate, numberingSystem: numberingSystem, onCalciteDatePickerChange: this.handleDateChange, onCalciteDatePickerRangeChange: this.handleDateRangeChange, proximitySelectionDisabled: this.proximitySelectionDisabled, range: this.range, scale: this.scale, startAsDate: this.startAsDate, tabIndex: 0, valueAsDate: this.valueAsDate }))), this.range && this.layout === "horizontal" && (h("div", { class: "horizontal-arrow-container" }, h("calcite-icon", { flipRtl: true, icon: "arrow-right", scale: "s" }))), this.range && this.layout === "vertical" && this.scale !== "s" && (h("div", { class: "vertical-arrow-container" }, h("calcite-icon", { icon: "arrow-down", scale: "s" }))), this.range && (h("div", { class: "input-wrapper", ref: this.setEndWrapper }, h("calcite-input", { class: {
         input: true,
         "border-top-color-one": this.layout === "vertical" && this.range
       }, disabled: disabled, icon: "calendar", "number-button-type": "none", numberingSystem: numberingSystem, onCalciteInputInput: this.calciteInternalInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.endInputFocus, placeholder: this.localeData?.placeholder, readOnly: readOnly, ref: this.setEndInput, scale: this.scale, type: "text" }))))), h(HiddenFormInputSlot, { component: this })));
@@ -616,6 +619,7 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     "overlayPositioning": [513, "overlay-positioning"],
     "proximitySelectionDisabled": [4, "proximity-selection-disabled"],
     "layout": [513],
+    "messageOverrides": [1040],
     "datePickerActiveDate": [32],
     "effectiveLocale": [32],
     "focusedInput": [32],

package/dist/components/calcite-input-message.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, Host } from '@stencil/core/internal/client/index.js';
 import { e as setRequestedIcon, g as getElementProp } from './dom.js';

package/dist/components/calcite-input-number.js

@@ -1,10 +1,10 @@
 /*!
  * 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 { b as getSlotted, i as isPrimaryPointerButton, T as TEXT$1, e as setRequestedIcon, g as getElementProp, c as getElementDir, C as CSS_UTILITY } from './dom.js';
+import { b as getSlotted, i as isPrimaryPointerButton, e as setRequestedIcon, g as getElementProp, c as getElementDir, C as CSS_UTILITY } from './dom.js';
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label2.js';
 import { s as submitForm, c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form.js';
 import { n as numberStringFormatter, i as isValidNumber, p as parseNumberString, s as sanitizeNumberString, a as defaultNumberingSystem, c as connectLocalized, d as disconnectLocalized } from './locale.js';
@@ -12,7 +12,8 @@ import { n as numberKeys } from './key.js';
 import { d as decimalPlaces } from './math.js';
 import { c as createObserver } from './observers.js';
 import { u as updateHostInteraction } from './interactive.js';
-import { a as setComponentLoaded, s as setUpLoadableComponent, c as componentLoaded } from './loadable.js';
+import { u as updateMessages, c as connectMessages, d as disconnectMessages, s as setUpMessages } from './t9n.js';
+import { s as setComponentLoaded, a as setUpLoadableComponent, c as componentLoaded } from './loadable.js';
 import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './progress.js';
 
@@ -35,9 +36,6 @@ const CSS = {
 const SLOTS = {
   action: "action"
 };
-const TEXT = {
-  clear: "Clear value"
-};
 
 const inputNumberCss = "@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([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host{display:block}:host([scale=s]) input,:host([scale=s]) .prefix,:host([scale=s]) .suffix{block-size:1.5rem;padding-inline:0.5rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=s]) .number-button-wrapper,:host([scale=s]) .action-wrapper calcite-button,:host([scale=s]) .action-wrapper calcite-button button{block-size:1.5rem}:host([scale=s]) .clear-button{min-block-size:1.5rem;min-inline-size:1.5rem}:host([scale=m]) input,:host([scale=m]) .prefix,:host([scale=m]) .suffix{block-size:2rem;padding-inline:0.75rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=m]) .number-button-wrapper,:host([scale=m]) .action-wrapper calcite-button,:host([scale=m]) .action-wrapper calcite-button button{block-size:2rem}:host([scale=m]) .clear-button{min-block-size:2rem;min-inline-size:2rem}:host([scale=l]) input,:host([scale=l]) .prefix,:host([scale=l]) .suffix{block-size:2.75rem;padding-inline:1rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host([scale=l]) .number-button-wrapper,:host([scale=l]) .action-wrapper calcite-button,:host([scale=l]) .action-wrapper calcite-button button{block-size:2.75rem}:host([scale=l]) .clear-button{min-block-size:2.75rem;min-inline-size:2.75rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host input{transition:var(--calcite-animation-timing), block-size 0, outline-offset 0s;-webkit-appearance:none;position:relative;margin:0px;box-sizing:border-box;display:flex;max-block-size:100%;inline-size:100%;max-inline-size:100%;flex:1 1 0%;border-radius:0px;background-color:var(--calcite-ui-foreground-1);font-family:inherit;font-weight:var(--calcite-font-weight-normal);border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-input);color:var(--calcite-ui-text-1)}:host input::placeholder,:host input:-ms-input-placeholder,:host input::-ms-input-placeholder{font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-3)}:host input:focus{border-color:var(--calcite-ui-brand);color:var(--calcite-ui-text-1)}:host input[readonly]{background-color:var(--calcite-ui-background);font-weight:var(--calcite-font-weight-medium)}:host input[readonly]:focus{color:var(--calcite-ui-text-1)}:host calcite-icon{color:var(--calcite-ui-text-3)}:host input{outline-color:transparent}:host input:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}:host([status=invalid]) input{border-color:var(--calcite-ui-danger)}:host([status=invalid]) input:focus{outline:2px solid var(--calcite-ui-danger);outline-offset:-2px}:host([scale=s]) .icon{inset-inline-start:0.5rem}:host([scale=m]) .icon{inset-inline-start:0.75rem}:host([scale=l]) .icon{inset-inline-start:1rem}:host([icon][scale=s]) input{padding-inline-start:2rem}:host([icon][scale=m]) input{padding-inline-start:2.5rem}:host([icon][scale=l]) input{padding-inline-start:3rem}.element-wrapper{position:relative;order:3;display:inline-flex;flex:1 1 0%;align-items:center}.icon{pointer-events:none;position:absolute;z-index:1;display:block;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}.clear-button{pointer-events:initial;order:4;margin:0px;box-sizing:border-box;display:flex;min-block-size:100%;cursor:pointer;align-items:center;justify-content:center;align-self:stretch;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-input);background-color:var(--calcite-ui-foreground-1);outline-color:transparent;border-inline-start-width:0px}.clear-button:hover{background-color:var(--calcite-ui-foreground-2);transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}.clear-button:hover calcite-icon{color:var(--calcite-ui-text-1);transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}.clear-button:active{background-color:var(--calcite-ui-foreground-3)}.clear-button:active calcite-icon{color:var(--calcite-ui-text-1)}.clear-button:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}.clear-button:disabled{opacity:var(--calcite-ui-opacity-disabled)}.loader{inset-block-start:1px;inset-inline:1px;pointer-events:none;position:absolute;display:block}.action-wrapper{order:7;display:flex}.prefix,.suffix{box-sizing:border-box;display:flex;block-size:auto;min-block-size:100%;-webkit-user-select:none;user-select:none;align-content:center;align-items:center;overflow-wrap:break-word;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-input);background-color:var(--calcite-ui-background);font-weight:var(--calcite-font-weight-medium);line-height:1;color:var(--calcite-ui-text-2)}.prefix{order:2;border-inline-end-width:0px}.suffix{order:5;border-inline-start-width:0px}:host([alignment=start]) input{text-align:start}:host([alignment=end]) input{text-align:end}.number-button-wrapper{pointer-events:none;order:6;box-sizing:border-box;display:flex;flex-direction:column;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}:host([number-button-type=vertical]) .wrapper{flex-direction:row;display:flex}:host([number-button-type=vertical]) input{order:2}:host([number-button-type=horizontal]) .calcite--rtl .number-button-item[data-adjustment=down] calcite-icon{transform:rotate(-90deg)}:host([number-button-type=horizontal]) .calcite--rtl .number-button-item[data-adjustment=up] calcite-icon{transform:rotate(-90deg)}.number-button-item.number-button-item--horizontal[data-adjustment=down],.number-button-item.number-button-item--horizontal[data-adjustment=up]{order:1;max-block-size:100%;min-block-size:100%;align-self:stretch}.number-button-item.number-button-item--horizontal[data-adjustment=down] calcite-icon,.number-button-item.number-button-item--horizontal[data-adjustment=up] calcite-icon{transform:rotate(90deg)}.number-button-item.number-button-item--horizontal[data-adjustment=down]{border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-input);border-inline-end-width:0px}.number-button-item.number-button-item--horizontal[data-adjustment=down]:hover{background-color:var(--calcite-ui-foreground-2)}.number-button-item.number-button-item--horizontal[data-adjustment=down]:hover calcite-icon{color:var(--calcite-ui-text-1)}.number-button-item.number-button-item--horizontal[data-adjustment=up]{order:5}.number-button-item.number-button-item--horizontal[data-adjustment=up]:hover{background-color:var(--calcite-ui-foreground-2)}.number-button-item.number-button-item--horizontal[data-adjustment=up]:hover calcite-icon{color:var(--calcite-ui-text-1)}:host([number-button-type=vertical]) .number-button-item[data-adjustment=down]:hover{background-color:var(--calcite-ui-foreground-2)}:host([number-button-type=vertical]) .number-button-item[data-adjustment=down]:hover calcite-icon{color:var(--calcite-ui-text-1)}:host([number-button-type=vertical]) .number-button-item[data-adjustment=up]:hover{background-color:var(--calcite-ui-foreground-2)}:host([number-button-type=vertical]) .number-button-item[data-adjustment=up]:hover calcite-icon{color:var(--calcite-ui-text-1)}:host([number-button-type=vertical]) .number-button-item[data-adjustment=down]{border-block-start-width:0px}.number-button-item{max-block-size:50%;min-block-size:50%;pointer-events:initial;margin:0px;box-sizing:border-box;display:flex;cursor:pointer;align-items:center;align-self:center;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-input);background-color:var(--calcite-ui-foreground-1);padding-block:0px;padding-inline:0.5rem;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-inline-start-width:0px}.number-button-item calcite-icon{pointer-events:none;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}.number-button-item:focus{background-color:var(--calcite-ui-foreground-2)}.number-button-item:focus calcite-icon{color:var(--calcite-ui-text-1)}.number-button-item:active{background-color:var(--calcite-ui-foreground-3)}.number-button-item:disabled{pointer-events:none}.wrapper{position:relative;display:flex;flex-direction:row;align-items:center}:host(.no-bottom-border) input{border-block-end-width:0px}:host(.border-top-color-one) input{border-block-start-color:var(--calcite-ui-border-1)}:host .inline-child{background-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}:host .inline-child .editing-enabled{background-color:inherit}:host .inline-child:not(.editing-enabled){display:flex;cursor:pointer;border-color:transparent;padding-inline-start:0}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}";
 
@@ -302,7 +300,7 @@ const InputNumber = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.hidden = false;
     this.icon = undefined;
     this.intlClear = undefined;
-    this.intlLoading = TEXT$1.loading;
+    this.intlLoading = undefined;
     this.iconFlipRtl = false;
     this.label = undefined;
     this.loading = false;
@@ -327,7 +325,10 @@ const InputNumber = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.suffixText = undefined;
     this.editingEnabled = false;
     this.value = "";
+    this.messages = undefined;
+    this.messageOverrides = undefined;
     this.effectiveLocale = "";
+    this.defaultMessages = undefined;
     this.localizedValue = undefined;
   }
   disabledWatcher() {
@@ -341,6 +342,9 @@ const InputNumber = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   minWatcher() {
     this.minString = this.min?.toString() || null;
   }
+  onMessagesChange() {
+    /* wired up by t9n util */
+  }
   valueWatcher(newValue, previousValue) {
     if (!this.userChangedValue) {
       this.setNumberValue({
@@ -363,6 +367,7 @@ const InputNumber = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return this.clearable && this.value.length > 0;
   }
   effectiveLocaleWatcher(locale) {
+    updateMessages(this, this.effectiveLocale);
     numberStringFormatter.numberFormatOptions = {
       locale,
       numberingSystem: this.numberingSystem,
@@ -376,6 +381,7 @@ const InputNumber = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   //--------------------------------------------------------------------------
   connectedCallback() {
     connectLocalized(this);
+    connectMessages(this);
     this.scale = getElementProp(this.el, "scale", this.scale);
     this.inlineEditableEl = this.el.closest("calcite-inline-editable");
     if (this.inlineEditableEl) {
@@ -401,14 +407,16 @@ const InputNumber = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     disconnectLabel(this);
     disconnectForm(this);
     disconnectLocalized(this);
+    disconnectMessages(this);
     this.mutationObserver?.disconnect();
     this.el.removeEventListener("calciteInternalHiddenInputChange", this.hiddenInputChangeHandler);
   }
-  componentWillLoad() {
+  async componentWillLoad() {
     setUpLoadableComponent(this);
     this.maxString = this.max?.toString();
     this.minString = this.min?.toString();
     this.requestedIcon = setRequestedIcon({}, this.icon, "number");
+    await setUpMessages(this);
   }
   componentShouldUpdate(newValue, oldValue, property) {
     if (property === "value" && newValue && !isValidNumber(newValue)) {
@@ -491,8 +499,8 @@ const InputNumber = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   // --------------------------------------------------------------------------
   render() {
     const dir = getElementDir(this.el);
-    const loader = (h("div", { class: CSS.loader }, h("calcite-progress", { label: this.intlLoading, type: "indeterminate" })));
-    const inputClearButton = (h("button", { "aria-label": this.intlClear || TEXT.clear, class: CSS.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputValue, tabIndex: -1, type: "button" }, h("calcite-icon", { icon: "x", scale: "s" })));
+    const loader = (h("div", { class: CSS.loader }, h("calcite-progress", { label: this.messages.loading, type: "indeterminate" })));
+    const inputClearButton = (h("button", { "aria-label": this.messages.clear, class: CSS.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputValue, tabIndex: -1, type: "button" }, h("calcite-icon", { icon: "x", scale: "s" })));
     const iconEl = (h("calcite-icon", { class: CSS.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: "s" }));
     const isHorizontalNumberButton = this.numberButtonType === "horizontal";
     const numberButtonsHorizontalUp = (h("button", { "aria-hidden": "true", class: {
@@ -513,11 +521,15 @@ const InputNumber = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       ? numberButtonsHorizontalUp
       : null, h(HiddenFormInputSlot, { component: this }))));
   }
+  static get assetsDirs() { return ["assets"]; }
   get el() { return this; }
   static get watchers() { return {
     "disabled": ["disabledWatcher"],
     "max": ["maxWatcher"],
     "min": ["minWatcher"],
+    "intlClear": ["onMessagesChange"],
+    "intlLoading": ["onMessagesChange"],
+    "messageOverrides": ["onMessagesChange"],
     "value": ["valueWatcher"],
     "icon": ["updateRequestedIcon"],
     "effectiveLocale": ["effectiveLocaleWatcher"]
@@ -557,7 +569,10 @@ const InputNumber = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "suffixText": [1, "suffix-text"],
     "editingEnabled": [1540, "editing-enabled"],
     "value": [1025],
+    "messages": [1040],
+    "messageOverrides": [1040],
     "effectiveLocale": [32],
+    "defaultMessages": [32],
     "localizedValue": [32],
     "setFocus": [64],
     "selectText": [64]