@esri/calcite-components 1.0.0-beta.94 → 1.0.0-beta.96

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

@@ -1,31 +1,32 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.94
+ * v1.0.0-beta.96
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, Build } from '@stencil/core/internal/client/index.js';
 import { T as TEXT, g as getValueAsDateRange, a as getLocaleData, d as defineCustomElement$8 } from './date-picker.js';
 import { d as dateToISO, a as dateFromISO, s as setEndOfDay, b as dateFromRange, c as sameDate, p as parseDateString, i as inRange } 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';
-import { d as defaultMenuPlacement, f as filterComputedPlacements, c as connectFloatingUI, p as positionFloatingUI, a as disconnectFloatingUI, F as FloatingCSS, r as repositionDebounceTimeout } from './floating-ui.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 { u as updateHostInteraction } from './interactive.js';
 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 { 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';
 import { d as defineCustomElement$4 } from './icon.js';
 import { d as defineCustomElement$3 } from './input.js';
 import { d as defineCustomElement$2 } from './progress.js';
-import { d as debounce } from './debounce.js';
 
 const CSS = {
   menu: "menu-container",
   menuActive: "menu-container--active"
 };
 
-const inputDatePickerCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 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;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:host{--calcite-icon-size:1rem;--calcite-spacing-eighth:0.125rem;--calcite-spacing-quarter:0.25rem;--calcite-spacing-half:0.5rem;--calcite-spacing-three-quarters:0.75rem;--calcite-spacing:1rem;--calcite-spacing-plus-quarter:1.25rem;--calcite-spacing-plus-half:1.5rem;--calcite-spacing-double:2rem;--calcite-menu-min-width:10rem;--calcite-header-min-height:3rem;--calcite-footer-min-height:3rem}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host{position:relative;display:inline-block;inline-size:100%;overflow:visible;vertical-align:top;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host .menu-container .calcite-floating-ui-anim{position:relative;-webkit-transition:var(--calcite-floating-ui-transition);transition:var(--calcite-floating-ui-transition);visibility:hidden;-webkit-transition-property:visibility, opacity, -webkit-transform;transition-property:visibility, opacity, -webkit-transform;transition-property:transform, visibility, opacity;transition-property:transform, visibility, opacity, -webkit-transform;opacity:0;-webkit-box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:1;border-radius:0.25rem}:host .menu-container[data-placement^=bottom] .calcite-floating-ui-anim{-webkit-transform:translateY(-5px);transform:translateY(-5px)}:host .menu-container[data-placement^=top] .calcite-floating-ui-anim{-webkit-transform:translateY(5px);transform:translateY(5px)}:host .menu-container[data-placement^=left] .calcite-floating-ui-anim{-webkit-transform:translateX(5px);transform:translateX(5px)}:host .menu-container[data-placement^=right] .calcite-floating-ui-anim{-webkit-transform:translateX(-5px);transform:translateX(-5px)}:host .menu-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;visibility:visible;-webkit-transform:translate(0);transform:translate(0)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.calendar-picker-wrapper{position:static;inline-size:100%;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}.input-wrapper{position:relative}:host([range]) .input-container{display:-ms-flexbox;display:flex}:host([range]) .input-wrapper{-ms-flex:1 1 auto;flex:1 1 auto}:host([range]) .horizontal-arrow-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;border-width:1px;border-inline-start-width:0px;border-inline-end-width:0px;border-style:solid;border-color:var(--calcite-ui-border-input);background-color:var(--calcite-ui-background);padding-block:0px;padding-inline:0.25rem}:host([range][layout=vertical]) .input-wrapper{inline-size:100%}:host([range][layout=vertical]) .input-container{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}:host([range][layout=vertical]) .calendar-picker-wrapper--end{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}:host([range][layout=vertical]) .vertical-arrow-container{inset-block-start:1.5rem;position:absolute;inset-inline-start:0px;z-index:1;margin-inline:1px;background-color:var(--calcite-ui-foreground-1);padding-inline:0.625rem}:host([scale=s][range]:not([layout=vertical])) .calendar-picker-wrapper{inline-size:216px}:host([scale=m][range]:not([layout=vertical])) .calendar-picker-wrapper{inline-size:286px}:host([scale=l][range]:not([layout=vertical])) .calendar-picker-wrapper{inline-size:398px}.menu-container{display:block;position:absolute;z-index:900;-webkit-transform:scale(0);transform:scale(0);inline-size:0;block-size:0;overflow:hidden;pointer-events:none;visibility:hidden}.menu-container .calcite-floating-ui-anim{position:relative;-webkit-transition:var(--calcite-floating-ui-transition);transition:var(--calcite-floating-ui-transition);visibility:hidden;-webkit-transition-property:visibility, opacity, -webkit-transform;transition-property:visibility, opacity, -webkit-transform;transition-property:transform, visibility, opacity;transition-property:transform, visibility, opacity, -webkit-transform;opacity:0;-webkit-box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:1;border-radius:0.25rem}.menu-container[data-placement^=bottom] .calcite-floating-ui-anim{-webkit-transform:translateY(-5px);transform:translateY(-5px)}.menu-container[data-placement^=top] .calcite-floating-ui-anim{-webkit-transform:translateY(5px);transform:translateY(5px)}.menu-container[data-placement^=left] .calcite-floating-ui-anim{-webkit-transform:translateX(5px);transform:translateX(5px)}.menu-container[data-placement^=right] .calcite-floating-ui-anim{-webkit-transform:translateX(-5px);transform:translateX(-5px)}.menu-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;visibility:visible;-webkit-transform:translate(0);transform:translate(0)}:host([open]) .menu-container{pointer-events:initial;visibility:visible;inline-size:unset;block-size:unset;overflow:unset}.menu-container--active{pointer-events:initial;visibility:visible;inline-size:unset;block-size:unset;overflow:unset}.input .calcite-input__wrapper{-webkit-margin-before:0px;margin-block-start:0px}:host([range][layout=vertical][scale=m]) .vertical-arrow-container{inset-block-start:1.5rem;-webkit-padding-start:0.75rem;padding-inline-start:0.75rem}:host([range][layout=vertical][scale=m]) .vertical-arrow-container calcite-icon{block-size:0.75rem;inline-size:0.75rem;min-inline-size:0px}:host([range][layout=vertical][scale=l]) .vertical-arrow-container{inset-block-start:2.25rem;padding-inline:0.875rem}:host([range][layout=vertical][open]) .vertical-arrow-container{display:none}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;-webkit-transform:none !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}";
+const inputDatePickerCss = "@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.01}}:host{--calcite-icon-size:1rem;--calcite-spacing-eighth:0.125rem;--calcite-spacing-quarter:0.25rem;--calcite-spacing-half:0.5rem;--calcite-spacing-three-quarters:0.75rem;--calcite-spacing:1rem;--calcite-spacing-plus-quarter:1.25rem;--calcite-spacing-plus-half:1.5rem;--calcite-spacing-double:2rem;--calcite-menu-min-width:10rem;--calcite-header-min-height:3rem;--calcite-footer-min-height:3rem}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}: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{position:relative;display:inline-block;inline-size:100%;overflow:visible;vertical-align:top;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host .menu-container .calcite-floating-ui-anim{position:relative;transition:var(--calcite-floating-ui-transition);visibility:hidden;transition-property:transform, visibility, opacity;opacity:0;box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:1;border-radius:0.25rem}:host .menu-container[data-placement^=bottom] .calcite-floating-ui-anim{transform:translateY(-5px)}:host .menu-container[data-placement^=top] .calcite-floating-ui-anim{transform:translateY(5px)}:host .menu-container[data-placement^=left] .calcite-floating-ui-anim{transform:translateX(5px)}:host .menu-container[data-placement^=right] .calcite-floating-ui-anim{transform:translateX(-5px)}:host .menu-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;visibility:visible;transform:translate(0)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.calendar-picker-wrapper{position:static;inline-size:100%;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);transform:translate3d(0, 0, 0)}.input-wrapper{position:relative}:host([range]) .input-container{display:flex}:host([range]) .input-wrapper{flex:1 1 auto}:host([range]) .horizontal-arrow-container{display:flex;align-items:center;border-width:1px;border-inline-start-width:0px;border-inline-end-width:0px;border-style:solid;border-color:var(--calcite-ui-border-input);background-color:var(--calcite-ui-background);padding-block:0px;padding-inline:0.25rem}:host([range][layout=vertical]) .input-wrapper{inline-size:100%}:host([range][layout=vertical]) .input-container{flex-direction:column;align-items:flex-start}:host([range][layout=vertical]) .calendar-picker-wrapper--end{transform:translate3d(0, 0, 0)}:host([range][layout=vertical]) .vertical-arrow-container{inset-block-start:1.5rem;position:absolute;z-index:1;margin-inline:1px;background-color:var(--calcite-ui-foreground-1);padding-inline:0.625rem;inset-inline-start:0}:host([scale=s][range]:not([layout=vertical])) .calendar-picker-wrapper{inline-size:216px}:host([scale=m][range]:not([layout=vertical])) .calendar-picker-wrapper{inline-size:286px}:host([scale=l][range]:not([layout=vertical])) .calendar-picker-wrapper{inline-size:398px}.menu-container{display:block;position:absolute;z-index:900;inline-size:0;block-size:0;overflow:hidden;pointer-events:none;visibility:hidden}.menu-container .calcite-floating-ui-anim{position:relative;transition:var(--calcite-floating-ui-transition);visibility:hidden;transition-property:transform, visibility, opacity;opacity:0;box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:1;border-radius:0.25rem}.menu-container[data-placement^=bottom] .calcite-floating-ui-anim{transform:translateY(-5px)}.menu-container[data-placement^=top] .calcite-floating-ui-anim{transform:translateY(5px)}.menu-container[data-placement^=left] .calcite-floating-ui-anim{transform:translateX(5px)}.menu-container[data-placement^=right] .calcite-floating-ui-anim{transform:translateX(-5px)}.menu-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;visibility:visible;transform:translate(0)}:host([open]) .menu-container{pointer-events:initial;visibility:visible;inline-size:unset;block-size:unset;overflow:unset}.menu-container--active{pointer-events:initial;visibility:visible;inline-size:unset;block-size:unset;overflow:unset}.input .calcite-input__wrapper{margin-block-start:0px}:host([range][layout=vertical][scale=m]) .vertical-arrow-container{inset-block-start:1.5rem;padding-inline-start:0.75rem}:host([range][layout=vertical][scale=m]) .vertical-arrow-container calcite-icon{block-size:0.75rem;inline-size:0.75rem;min-inline-size:0px}:host([range][layout=vertical][scale=l]) .vertical-arrow-container{inset-block-start:2.25rem;padding-inline:0.875rem}:host([range][layout=vertical][open]) .vertical-arrow-container{display:none}::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}";
 
 const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -45,55 +46,53 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     //
     //--------------------------------------------------------------------------
     /**
-     * When false, the component won't be interactive.
+     * When `true`, interaction is prevented and the component is displayed with lower opacity.
      */
     this.disabled = false;
     /**
-     * When true, still focusable but controls are gone and the value cannot be modified.
+     * When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified.
      *
      * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
      */
     this.readOnly = false;
     /**
-     * Expand or collapse when calendar does not have input
+     * When `true`, the component is active.
      *
-     * @deprecated use open instead
+     * @deprecated use `open` instead.
      */
     this.active = false;
-    /** Expand or collapse when calendar does not have input */
+    /** When `true`, displays the `calcite-date-picker` component. */
     this.open = false;
     /**
-     * Localized string for "previous month" (used for aria label)
+     * Accessible name for the component's previous month button.
      *
      * @default "Previous month"
      */
     this.intlPrevMonth = TEXT.prevMonth;
     /**
-     * Localized string for "next month" (used for aria label)
+     * Accessible name for the component's next month button.
      *
      * @default "Next month"
      */
     this.intlNextMonth = TEXT.nextMonth;
     /**
-     * Localized string for "year" (used for aria label)
+     * Accessible name for the component's year input.
      *
      * @default "Year"
      */
     this.intlYear = TEXT.year;
-    /** BCP 47 language tag for desired language and country format */
-    this.locale = document.documentElement.lang || "en";
-    /** specify the scale of the date picker */
+    /** Specifies the size of the component. */
     this.scale = "m";
     /**
-     * Determines where the date-picker component will be positioned relative to the input.
+     * Specifies the placement of the `calcite-date-picker` relative to the component.
      *
      * @default "bottom-start"
      */
     this.placement = defaultMenuPlacement;
-    /** Range mode activation */
+    /** When `true`, activates a range for the component. */
     this.range = false;
     /**
-     * When true, makes the component required for form-submission.
+     * When `true`, the component must have a value in order for the form to submit.
      *
      * @internal
      */
@@ -101,22 +100,28 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     /**
      * Determines the type of positioning to use for the overlaid content.
      *
-     * Using the "absolute" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The "fixed" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is "fixed".
+     * Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.
+     *
+     * `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
      *
      */
     this.overlayPositioning = "absolute";
-    /** Disables the default behaviour on the third click of narrowing or extending the range and instead starts a new range. */
+    /**
+     * When `true`, disables the default behavior on the third click of narrowing or extending the range.
+     * Instead starts a new range.
+     */
     this.proximitySelectionDisabled = false;
-    /** Layout */
+    /** Defines the layout of the component. */
     this.layout = "horizontal";
+    this.effectiveLocale = "";
     this.focusedInput = "start";
+    this.globalAttributes = {};
     this.openTransitionProp = "opacity";
     //--------------------------------------------------------------------------
     //
     //  Private Methods
     //
     //--------------------------------------------------------------------------
-    this.debouncedReposition = debounce(() => this.reposition(), repositionDebounceTimeout);
     this.setFilteredPlacements = () => {
       const { el, flipPlacements } = this;
       this.filteredFlipPlacements = flipPlacements
@@ -164,8 +169,17 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
       }
       this.focusedInput = "end";
     };
-    this.inputInput = (event) => {
-      this.input(event.detail.value);
+    this.startInputInput = () => {
+      const parsedValue = this.parseNumerals(this.startInput.value);
+      const formattedValue = this.formatNumerals(parsedValue);
+      this.startInput.value = formattedValue;
+      this.input(parsedValue);
+    };
+    this.endInputInput = () => {
+      const parsedValue = this.parseNumerals(this.endInput.value);
+      const formattedValue = this.formatNumerals(parsedValue);
+      this.endInput.value = formattedValue;
+      this.input(parsedValue);
     };
     this.setFloatingEl = (el) => {
       if (el) {
@@ -208,6 +222,25 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
         (_b = this.startInput) === null || _b === void 0 ? void 0 : _b.setFocus();
       }
     };
+    this.commonDateSeparators = [".", "-", "/"];
+    this.formatNumerals = (value) => value
+      ? value
+        .split("")
+        .map((char) => 
+      // convert common separators to the locale's
+      this.commonDateSeparators.includes(char)
+        ? this.localeData.separator
+        : numberKeys.includes(char)
+          ? numberStringFormatter.numberFormatter.format(Number(char))
+          : char)
+        .join("")
+      : "";
+    this.parseNumerals = (value) => value
+      ? value
+        .split("")
+        .map((char) => numberKeys.includes(char) ? numberStringFormatter.delocalize(char) : char)
+        .join("")
+      : "";
   }
   handleDisabledAndReadOnlyChange(value) {
     if (!value) {
@@ -233,7 +266,7 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   }
   flipPlacementsHandler() {
     this.setFilteredPlacements();
-    this.debouncedReposition();
+    this.reposition(true);
   }
   onMinChanged(min) {
     if (min) {
@@ -251,13 +284,21 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   openHandler(value) {
     this.active = value;
     if (this.disabled || this.readOnly) {
+      if (!value) {
+        updateAfterClose(this.floatingEl);
+      }
       this.open = false;
       return;
     }
-    this.debouncedReposition();
+    if (value) {
+      this.reposition(true);
+    }
+    else {
+      updateAfterClose(this.floatingEl);
+    }
   }
   overlayPositioningHandler() {
-    this.debouncedReposition();
+    this.reposition(true);
   }
   //--------------------------------------------------------------------------
   //
@@ -278,22 +319,26 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   //  Public Methods
   //
   // --------------------------------------------------------------------------
-  /** Updates the position of the component. */
+  /** Sets focus on the component. */
   async setFocus() {
     var _a;
     (_a = this.startInput) === null || _a === void 0 ? void 0 : _a.setFocus();
   }
-  /** Updates the position of the component. */
-  async reposition() {
+  /**
+   * Updates the position of the component.
+   *
+   * @param delayed
+   */
+  async reposition(delayed = false) {
     const { floatingEl, referenceEl, placement, overlayPositioning, filteredFlipPlacements } = this;
-    return positionFloatingUI({
+    return reposition(this, {
       floatingEl,
       referenceEl,
       overlayPositioning,
       placement,
       flipPlacements: filteredFlipPlacements,
       type: "menu"
-    });
+    }, delayed);
   }
   // --------------------------------------------------------------------------
   //
@@ -301,6 +346,7 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   //
   // --------------------------------------------------------------------------
   connectedCallback() {
+    connectLocalized(this);
     const isOpen = this.active || this.open;
     isOpen && this.activeHandler(isOpen);
     isOpen && this.openHandler(isOpen);
@@ -330,7 +376,12 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     connectForm(this);
     connectOpenCloseComponent(this);
     this.setFilteredPlacements();
-    this.debouncedReposition();
+    this.reposition(true);
+    numberStringFormatter.numberFormatOptions = {
+      numberingSystem: this.numberingSystem,
+      locale: this.effectiveLocale,
+      useGrouping: false
+    };
   }
   async componentWillLoad() {
     await this.loadLocaleData();
@@ -338,13 +389,14 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     this.onMaxChanged(this.max);
   }
   componentDidLoad() {
-    this.debouncedReposition();
+    this.reposition(true);
   }
   disconnectedCallback() {
     disconnectLabel(this);
     disconnectForm(this);
     disconnectFloatingUI(this, this.referenceEl, this.floatingEl);
     disconnectOpenCloseComponent(this);
+    disconnectLocalized(this);
   }
   componentDidRender() {
     updateHostInteraction(this);
@@ -356,9 +408,13 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     const endDate = this.range
       ? dateFromRange(this.endAsDate, this.minAsDate, this.maxAsDate)
       : null;
-    const formattedEndDate = endDate ? endDate.toLocaleDateString(this.locale) : "";
-    const formattedDate = date ? date.toLocaleDateString(this.locale) : "";
-    return (h(Host, { onBlur: this.deactivate, onKeyDown: this.keyDownHandler, role: "application" }, this.localeData && (h("div", { "aria-expanded": toAriaBoolean(this.open), class: "input-container", role: "application" }, h("div", { class: "input-wrapper", ref: this.setStartWrapper }, h("calcite-input", { class: `input ${this.layout === "vertical" && this.range ? `no-bottom-border` : ``}`, disabled: disabled, icon: "calendar", label: getLabelText(this), "number-button-type": "none", onCalciteInputInput: this.inputInput, onCalciteInternalInputBlur: this.inputBlur, onCalciteInternalInputFocus: this.startInputFocus, placeholder: (_a = this.localeData) === null || _a === void 0 ? void 0 : _a.placeholder, readOnly: readOnly, ref: this.setStartInput, scale: this.scale, type: "text", value: formattedDate })), h("div", { "aria-hidden": toAriaBoolean(!this.open), class: {
+    const formattedEndDate = endDate
+      ? this.formatNumerals(endDate.toLocaleDateString(this.effectiveLocale))
+      : "";
+    const formattedDate = date
+      ? this.formatNumerals(date.toLocaleDateString(this.effectiveLocale))
+      : "";
+    return (h(Host, { onBlur: this.deactivate, onKeyDown: this.keyDownHandler, role: "application" }, this.localeData && (h("div", { "aria-expanded": toAriaBoolean(this.open), class: "input-container", role: "application" }, h("div", { class: "input-wrapper", ref: this.setStartWrapper }, h("calcite-input", { class: `input ${this.layout === "vertical" && this.range ? `no-bottom-border` : ``}`, disabled: disabled, icon: "calendar", label: getLabelText(this), lang: this.effectiveLocale, "number-button-type": "none", numberingSystem: this.numberingSystem, onCalciteInputInput: this.startInputInput, onCalciteInternalInputBlur: this.inputBlur, onCalciteInternalInputFocus: this.startInputFocus, placeholder: (_a = this.localeData) === null || _a === void 0 ? void 0 : _a.placeholder, readOnly: readOnly, ref: this.setStartInput, scale: this.scale, type: "text", value: formattedDate })), h("div", { "aria-hidden": toAriaBoolean(!this.open), class: {
         [CSS.menu]: true,
         [CSS.menuActive]: this.open
       }, ref: this.setFloatingEl }, h("div", { class: {
@@ -366,10 +422,10 @@ 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", { activeRange: this.focusedInput, endAsDate: this.endAsDate, headingLevel: this.headingLevel, intlNextMonth: this.intlNextMonth, intlPrevMonth: this.intlPrevMonth, intlYear: this.intlYear, locale: this.locale, max: this.max, maxAsDate: this.maxAsDate, min: this.min, minAsDate: this.minAsDate, 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", { activeRange: this.focusedInput, endAsDate: this.endAsDate, headingLevel: this.headingLevel, intlNextMonth: this.intlNextMonth, intlPrevMonth: this.intlPrevMonth, intlYear: this.intlYear, lang: this.effectiveLocale, max: this.max, maxAsDate: this.maxAsDate, min: this.min, minAsDate: this.minAsDate, numberingSystem: this.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", onCalciteInputInput: this.inputInput, onCalciteInternalInputBlur: this.inputBlur, onCalciteInternalInputFocus: this.endInputFocus, placeholder: (_b = this.localeData) === null || _b === void 0 ? void 0 : _b.placeholder, readOnly: readOnly, ref: this.setEndInput, scale: this.scale, type: "text", value: formattedEndDate }))))), h(HiddenFormInputSlot, { component: this })));
+      }, disabled: disabled, icon: "calendar", lang: this.effectiveLocale, "number-button-type": "none", numberingSystem: this.numberingSystem, onCalciteInputInput: this.endInputInput, onCalciteInternalInputBlur: this.inputBlur, onCalciteInternalInputFocus: this.endInputFocus, placeholder: (_b = this.localeData) === null || _b === void 0 ? void 0 : _b.placeholder, readOnly: readOnly, ref: this.setEndInput, scale: this.scale, type: "text", value: formattedEndDate }))))), h(HiddenFormInputSlot, { component: this })));
   }
   setReferenceEl() {
     const { focusedInput, layout, endWrapper, startWrapper } = this;
@@ -404,8 +460,7 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     if (!Build.isBrowser) {
       return;
     }
-    const { locale } = this;
-    this.localeData = await getLocaleData(locale);
+    this.localeData = await getLocaleData(this.effectiveLocale);
   }
   clearCurrentValue() {
     if (!this.range) {
@@ -481,19 +536,20 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
    * @param target
    */
   blur(target) {
-    const { locale, focusedInput, endAsDate, range, startAsDate, valueAsDate } = this;
+    const { focusedInput, endAsDate, range, startAsDate, valueAsDate } = this;
+    const locale = this.effectiveLocale;
     const date = this.getDateFromInput(target.value);
     if (!date) {
       if (!range && valueAsDate) {
-        target.value = Array.isArray(valueAsDate)
+        target.value = this.formatNumerals(Array.isArray(valueAsDate)
           ? valueAsDate[focusedInput === "end" ? 1 : 0].toLocaleDateString(locale)
-          : valueAsDate.toLocaleDateString(locale);
+          : valueAsDate.toLocaleDateString(locale));
       }
       else if (focusedInput === "start" && startAsDate) {
-        target.value = startAsDate.toLocaleDateString(locale);
+        target.value = this.formatNumerals(startAsDate.toLocaleDateString(locale));
       }
       else if (focusedInput === "end" && endAsDate) {
-        target.value = endAsDate.toLocaleDateString(locale);
+        target.value = this.formatNumerals(endAsDate.toLocaleDateString(locale));
       }
     }
   }
@@ -553,7 +609,7 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     "focusedInput": ["setReferenceEl"],
     "start": ["startWatcher"],
     "end": ["endWatcher"],
-    "locale": ["loadLocaleData"]
+    "effectiveLocale": ["loadLocaleData"]
   }; }
   static get style() { return inputDatePickerCss; }
 }, [1, "calcite-input-date-picker", {
@@ -567,8 +623,8 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     "endAsDate": [1040],
     "minAsDate": [1040],
     "maxAsDate": [1040],
-    "min": [1537],
-    "max": [1537],
+    "min": [1025],
+    "max": [1025],
     "active": [1540],
     "open": [1540],
     "name": [513],
@@ -576,6 +632,7 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     "intlNextMonth": [1, "intl-next-month"],
     "intlYear": [1, "intl-year"],
     "locale": [1],
+    "numberingSystem": [513, "numbering-system"],
     "scale": [513],
     "placement": [513],
     "range": [516],
@@ -583,9 +640,11 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     "start": [1537],
     "end": [1537],
     "overlayPositioning": [513, "overlay-positioning"],
-    "proximitySelectionDisabled": [516, "proximity-selection-disabled"],
+    "proximitySelectionDisabled": [4, "proximity-selection-disabled"],
     "layout": [513],
+    "effectiveLocale": [32],
     "focusedInput": [32],
+    "globalAttributes": [32],
     "localeData": [32],
     "setFocus": [64],
     "reposition": [64]

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-beta.94
+ * v1.0.0-beta.96
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client/index.js';
 import { s as setRequestedIcon, g as getElementProp } from './dom.js';
@@ -14,7 +14,7 @@ var StatusIconDefaults;
   StatusIconDefaults["idle"] = "information";
 })(StatusIconDefaults || (StatusIconDefaults = {}));
 
-const inputMessageCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 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;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host([active][scale=m]),:host([active][scale=l]){--calcite-input-message-spacing-value:0.25rem}:host{visibility:hidden;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;block-size:0px;inline-size:100%;-ms-flex-align:center;align-items:center;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1);opacity:0;-webkit-transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}:host([active]){visibility:visible;block-size:auto;opacity:1;-webkit-transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}:host([active][scale=m]),:host([active][scale=l]){-webkit-margin-before:var(--calcite-input-message-spacing-value);margin-block-start:var(--calcite-input-message-spacing-value)}:host([calcite-hydrated-hidden]){visibility:hidden !important;pointer-events:none}.calcite-input-message-icon{pointer-events:none;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-negative:0;flex-shrink:0;-webkit-transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}:host([status=invalid]) .calcite-input-message-icon{color:var(--calcite-ui-danger)}:host([status=warning]) .calcite-input-message-icon{color:var(--calcite-ui-warning)}:host([status=valid]) .calcite-input-message-icon{color:var(--calcite-ui-success)}:host([status=idle]) .calcite-input-message-icon{color:var(--calcite-ui-brand)}:host([status][active]){color:var(--calcite-ui-text-1)}:host([status][scale=s]){font-size:var(--calcite-font-size--3);line-height:0.75rem}:host([status][scale=m]){-webkit-margin-before:0.25rem;margin-block-start:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([status][scale=l]){-webkit-margin-before:0.25rem;margin-block-start:0.25rem;font-size:var(--calcite-font-size--1);line-height:1rem}";
+const inputMessageCss = "@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.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host([scale=m]),:host([scale=l]){--calcite-input-message-spacing-value:0.25rem}:host{visibility:hidden;box-sizing:border-box;display:flex;block-size:0px;inline-size:100%;align-items:center;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1);visibility:visible;height:auto;opacity:1;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}:host([scale=m]),:host([scale=l]){margin-block-start:var(--calcite-input-message-spacing-value)}.calcite-input-message-icon{pointer-events:none;display:inline-flex;flex-shrink:0;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;margin-inline-end:0.5rem}:host([status=invalid]) .calcite-input-message-icon{color:var(--calcite-ui-danger)}:host([status=warning]) .calcite-input-message-icon{color:var(--calcite-ui-warning)}:host([status=valid]) .calcite-input-message-icon{color:var(--calcite-ui-success)}:host([status=idle]) .calcite-input-message-icon{color:var(--calcite-ui-brand)}:host([status]){color:var(--calcite-ui-text-1)}:host([status][scale=s]){font-size:var(--calcite-font-size--3);line-height:0.75rem}:host([status][scale=m]){margin-block-start:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([status][scale=l]){margin-block-start:0.25rem;font-size:var(--calcite-font-size--1);line-height:1rem}";
 
 const InputMessage = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -26,11 +26,16 @@ const InputMessage = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     //  Properties
     //
     //--------------------------------------------------------------------------
-    /** Indicates whether the message is displayed. */
+    /**
+     * When `true`, the component is active.
+     *
+     * @deprecated use global `hidden` attribute instead.
+     * @mdn [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden)
+     */
     this.active = false;
-    /** specify the scale of the input, defaults to m */
+    /** Specifies the size of the component. */
     this.scale = "m";
-    /** specify the status of the input field, determines message and icons */
+    /** Specifies the status of the input field, which determines message and icons. */
     this.status = "idle";
   }
   handleIconEl() {