@esri/calcite-components 1.0.0-next.596 → 1.0.0-next.598

package/dist/esm/calcite-input-time-picker_2.entry.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-next.596
+ * v1.0.0-next.598
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-61da5fbc.js';
-import { g as guid } from './guid-cd505852.js';
-import { i as isValidNumber, a as getLocale, w as watchGlobalAttributes, u as unwatchGlobalAttributes } from './globalAttributes-6affbda6.js';
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-6c6aade5.js';
-import { s as submitForm, c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form-c902fafa.js';
-import { u as updateHostInteraction } from './interactive-6cafa58c.js';
-import { n as numberKeys, i as isActivationKey } from './key-d6e66ea5.js';
-import './observers-5010a9dd.js';
-import './dom-4436bd07.js';
-import './resources-ce568df4.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-cf16b53b.js';
+import { g as guid } from './guid-3260dd45.js';
+import { i as isValidNumber, g as getSupportedLocale, b as getSupportedNumberingSystem, n as numberStringFormatter, u as updateEffectiveLocale, c as connectLocalized, d as disconnectLocalized } from './locale-66ebbf7a.js';
+import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-a2d9ea4b.js';
+import { s as submitForm, c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form-6ee82a1e.js';
+import { u as updateHostInteraction } from './interactive-53846bd5.js';
+import { n as numberKeys, i as isActivationKey } from './key-a3bce814.js';
+import './observers-85e8fe58.js';
+import './dom-648b4a2f.js';
+import './resources-8468e332.js';
 
 const maxTenthForMinuteAndSecond = 5;
-function createLocaleDateTimeFormatter(locale, includeSeconds = true) {
+function createLocaleDateTimeFormatter(locale, numberingSystem, includeSeconds = true) {
   try {
     const options = {
       hour: "2-digit",
       minute: "2-digit",
-      timeZone: "UTC"
+      timeZone: "UTC",
+      numberingSystem: getSupportedNumberingSystem(numberingSystem)
     };
     if (includeSeconds) {
       options.second = "2-digit";
     }
-    return new Intl.DateTimeFormat(locale, options);
+    return new Intl.DateTimeFormat(getSupportedLocale(locale), options);
   }
   catch (error) {
     throw new Error(`Invalid locale supplied while attempting to create a DateTime formatter: ${locale}`);
@@ -48,8 +49,8 @@ function formatTimeString(value) {
   }
   return `${hour}:${minute}`;
 }
-function getLocaleHourCycle(locale) {
-  const formatter = createLocaleDateTimeFormatter(locale);
+function getLocaleHourCycle(locale, numberingSystem) {
+  const formatter = createLocaleDateTimeFormatter(locale, numberingSystem);
   const parts = formatter.formatToParts(new Date(Date.UTC(0, 0, 0, 0, 0, 0)));
   return getLocalizedTimePart("meridiem", parts) ? "12" : "24";
 }
@@ -118,7 +119,7 @@ function isValidTimePart(value, part) {
   const valueAsNumber = Number(value);
   return part === "hour" ? valueAsNumber >= 0 && valueAsNumber < 24 : valueAsNumber >= 0 && valueAsNumber < 60;
 }
-function localizeTimePart(value, part, locale) {
+function localizeTimePart({ value, part, locale, numberingSystem }) {
   if (!isValidTimePart(value, part)) {
     return;
   }
@@ -127,27 +128,27 @@ function localizeTimePart(value, part, locale) {
   if (!date) {
     return;
   }
-  const formatter = createLocaleDateTimeFormatter(locale);
+  const formatter = createLocaleDateTimeFormatter(locale, numberingSystem);
   const parts = formatter.formatToParts(date);
   return getLocalizedTimePart(part, parts);
 }
-function localizeTimeString(value, locale = "en", includeSeconds = true) {
+function localizeTimeString({ value, locale, numberingSystem, includeSeconds = true }) {
   if (!isValidTime(value)) {
     return null;
   }
   const { hour, minute, second = "0" } = parseTimeString(value);
   const dateFromTimeString = new Date(Date.UTC(0, 0, 0, parseInt(hour), parseInt(minute), parseInt(second)));
-  const formatter = createLocaleDateTimeFormatter(locale, includeSeconds);
+  const formatter = createLocaleDateTimeFormatter(locale, numberingSystem, includeSeconds);
   return (formatter === null || formatter === void 0 ? void 0 : formatter.format(dateFromTimeString)) || null;
 }
-function localizeTimeStringToParts(value, locale = "en") {
+function localizeTimeStringToParts({ value, locale, numberingSystem }) {
   if (!isValidTime(value)) {
     return null;
   }
   const { hour, minute, second = "0" } = parseTimeString(value);
   const dateFromTimeString = new Date(Date.UTC(0, 0, 0, parseInt(hour), parseInt(minute), parseInt(second)));
   if (dateFromTimeString) {
-    const formatter = createLocaleDateTimeFormatter(locale);
+    const formatter = createLocaleDateTimeFormatter(locale, numberingSystem);
     const parts = formatter.formatToParts(dateFromTimeString);
     return {
       localizedHour: getLocalizedTimePart("hour", parts),
@@ -161,14 +162,14 @@ function localizeTimeStringToParts(value, locale = "en") {
   }
   return null;
 }
-function getTimeParts(value, locale = "en") {
+function getTimeParts({ value, locale, numberingSystem }) {
   if (!isValidTime(value)) {
     return null;
   }
   const { hour, minute, second = "0" } = parseTimeString(value);
   const dateFromTimeString = new Date(Date.UTC(0, 0, 0, parseInt(hour), parseInt(minute), parseInt(second)));
   if (dateFromTimeString) {
-    const formatter = createLocaleDateTimeFormatter(locale);
+    const formatter = createLocaleDateTimeFormatter(locale, numberingSystem);
     const parts = formatter.formatToParts(dateFromTimeString);
     return parts;
   }
@@ -190,7 +191,7 @@ function parseTimeString(value) {
   };
 }
 
-const inputTimePickerCss = "@-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}@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([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{display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}::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 inputTimePickerCss = "@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([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host{display:inline-block;-webkit-user-select:none;user-select:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}::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 InputTimePicker = class {
   constructor(hostRef) {
@@ -202,33 +203,35 @@ const InputTimePicker = class {
     //
     //--------------------------------------------------------------------------
     /**
-     * The active state of the time input
+     * When `true`, the component is active.
      *
-     * @deprecated Use open instead.
+     * @deprecated Use `open` instead.
      */
     this.active = false;
-    /** When true, displays the `calcite-time-picker` component.*/
+    /** When `true`, displays the `calcite-time-picker` component. */
     this.open = false;
-    /** The disabled state of the time input */
+    /** 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;
     /**
-     * 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
      */
     this.required = false;
-    /** The scale (size) of the time input */
+    /** Specifies the size of the component. */
     this.scale = "m";
     /**
      * 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";
@@ -238,9 +241,9 @@ const InputTimePicker = class {
      * @see [LogicalPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/floating-ui.ts#L25)
      */
     this.placement = "auto";
-    /** number (seconds) that specifies the granularity that the value must adhere to */
+    /** Specifies the granularity the component's `value` must adhere to (in seconds). */
     this.step = 60;
-    /** The selected time in UTC (always 24-hour format) */
+    /** The component's value in UTC (always 24-hour format). */
     this.value = null;
     /** whether the value of the input was changed as a result of user typing or not */
     this.internalValueChange = false;
@@ -251,7 +254,7 @@ const InputTimePicker = class {
     //  State
     //
     //--------------------------------------------------------------------------
-    this.globalAttributes = {};
+    this.effectiveLocale = "";
     //--------------------------------------------------------------------------
     //
     //  Event Listeners
@@ -260,9 +263,21 @@ const InputTimePicker = class {
     this.calciteInternalInputBlurHandler = () => {
       this.open = false;
       const shouldIncludeSeconds = this.shouldIncludeSeconds();
-      const locale = getLocale(this);
-      const localizedInputValue = localizeTimeString(this.calciteInputEl.value, locale, shouldIncludeSeconds);
-      this.setInputValue(localizedInputValue || localizeTimeString(this.value, locale, shouldIncludeSeconds));
+      const { effectiveLocale: locale, numberingSystem, value, calciteInputEl } = this;
+      numberStringFormatter.numberFormatOptions = {
+        locale,
+        numberingSystem,
+        useGrouping: false
+      };
+      const delocalizedValue = numberStringFormatter.delocalize(calciteInputEl.value);
+      const localizedInputValue = localizeTimeString({
+        value: delocalizedValue,
+        includeSeconds: shouldIncludeSeconds,
+        locale,
+        numberingSystem
+      });
+      this.setInputValue(localizedInputValue ||
+        localizeTimeString({ value, locale, numberingSystem, includeSeconds: shouldIncludeSeconds }));
     };
     this.calciteInternalInputFocusHandler = (event) => {
       if (!this.readOnly) {
@@ -272,7 +287,21 @@ const InputTimePicker = class {
     };
     this.calciteInputInputHandler = (event) => {
       const target = event.target;
-      this.setValue({ value: target.value });
+      numberStringFormatter.numberFormatOptions = {
+        locale: this.effectiveLocale,
+        numberingSystem: this.numberingSystem,
+        useGrouping: false
+      };
+      const delocalizedValue = numberStringFormatter.delocalize(target.value);
+      this.setValue({ value: delocalizedValue });
+      // only translate the numerals until blur
+      const localizedValue = delocalizedValue
+        .split("")
+        .map((char) => numberKeys.includes(char)
+        ? numberStringFormatter.numberFormatter.format(Number(char))
+        : char)
+        .join("");
+      this.setInputValue(localizedValue);
     };
     this.timePickerChangeHandler = (event) => {
       event.stopPropagation();
@@ -318,7 +347,12 @@ const InputTimePicker = class {
     this.setValue = ({ value, origin = "input" }) => {
       const previousValue = this.value;
       const newValue = formatTimeString(value);
-      const newLocalizedValue = localizeTimeString(newValue, getLocale(this), this.shouldIncludeSeconds());
+      const newLocalizedValue = localizeTimeString({
+        value: newValue,
+        locale: this.effectiveLocale,
+        numberingSystem: this.numberingSystem,
+        includeSeconds: this.shouldIncludeSeconds()
+      });
       this.internalValueChange = origin !== "external" && origin !== "loading";
       const shouldEmit = origin !== "loading" &&
         origin !== "external" &&
@@ -371,9 +405,8 @@ const InputTimePicker = class {
       this.open = false;
     }
   }
-  localeWatcher() {
-    const locale = getLocale(this);
-    this.setInputValue(localizeTimeString(this.value, locale, this.shouldIncludeSeconds()));
+  localeChanged() {
+    updateEffectiveLocale(this);
   }
   valueWatcher(newValue) {
     if (!this.internalValueChange) {
@@ -381,6 +414,14 @@ const InputTimePicker = class {
     }
     this.internalValueChange = false;
   }
+  effectiveLocaleWatcher() {
+    this.setInputValue(localizeTimeString({
+      value: this.value,
+      locale: this.effectiveLocale,
+      numberingSystem: this.numberingSystem,
+      includeSeconds: this.shouldIncludeSeconds()
+    }));
+  }
   clickHandler(event) {
     if (event.composedPath().includes(this.calciteTimePickerEl)) {
       return;
@@ -426,13 +467,13 @@ const InputTimePicker = class {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    connectLocalized(this);
     const { active, open } = this;
     if (this.value) {
       this.setValue({ value: isValidTime(this.value) ? this.value : undefined, origin: "loading" });
     }
     connectLabel(this);
     connectForm(this);
-    watchGlobalAttributes(this, ["lang"]);
     if (open) {
       this.active = open;
     }
@@ -446,7 +487,7 @@ const InputTimePicker = class {
   disconnectedCallback() {
     disconnectLabel(this);
     disconnectForm(this);
-    unwatchGlobalAttributes(this);
+    disconnectLocalized(this);
   }
   componentDidRender() {
     updateHostInteraction(this);
@@ -458,7 +499,7 @@ const InputTimePicker = class {
   // --------------------------------------------------------------------------
   render() {
     const popoverId = `${this.referenceElementId}-popover`;
-    return (h(Host, { onKeyDown: this.keyDownHandler }, h("div", { "aria-controls": popoverId, "aria-haspopup": "dialog", "aria-label": this.name, "aria-owns": popoverId, id: this.referenceElementId, role: "combobox" }, h("calcite-input", { disabled: this.disabled, icon: "clock", label: getLabelText(this), onCalciteInputInput: this.calciteInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.calciteInternalInputFocusHandler, readOnly: this.readOnly, ref: this.setCalciteInputEl, scale: this.scale, step: this.step })), h("calcite-popover", { id: popoverId, label: "Time Picker", open: this.open, overlayPositioning: this.overlayPositioning, placement: this.placement, ref: this.setCalcitePopoverEl, referenceElement: this.referenceElementId, triggerDisabled: true }, h("calcite-time-picker", { intlHour: this.intlHour, intlHourDown: this.intlHourDown, intlHourUp: this.intlHourUp, intlMeridiem: this.intlMeridiem, intlMeridiemDown: this.intlMeridiemDown, intlMeridiemUp: this.intlMeridiemUp, intlMinute: this.intlMinute, intlMinuteDown: this.intlMinuteDown, intlMinuteUp: this.intlMinuteUp, intlSecond: this.intlSecond, intlSecondDown: this.intlSecondDown, intlSecondUp: this.intlSecondUp, lang: getLocale(this), onCalciteInternalTimePickerChange: this.timePickerChangeHandler, ref: this.setCalciteTimePickerEl, scale: this.scale, step: this.step, value: this.value })), h(HiddenFormInputSlot, { component: this })));
+    return (h(Host, { onKeyDown: this.keyDownHandler }, h("div", { "aria-controls": popoverId, "aria-haspopup": "dialog", "aria-label": this.name, "aria-owns": popoverId, id: this.referenceElementId, role: "combobox" }, h("calcite-input", { disabled: this.disabled, icon: "clock", label: getLabelText(this), onCalciteInputInput: this.calciteInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.calciteInternalInputFocusHandler, readOnly: this.readOnly, ref: this.setCalciteInputEl, scale: this.scale, step: this.step })), h("calcite-popover", { id: popoverId, label: "Time Picker", open: this.open, overlayPositioning: this.overlayPositioning, placement: this.placement, ref: this.setCalcitePopoverEl, referenceElement: this.referenceElementId, triggerDisabled: true }, h("calcite-time-picker", { intlHour: this.intlHour, intlHourDown: this.intlHourDown, intlHourUp: this.intlHourUp, intlMeridiem: this.intlMeridiem, intlMeridiemDown: this.intlMeridiemDown, intlMeridiemUp: this.intlMeridiemUp, intlMinute: this.intlMinute, intlMinuteDown: this.intlMinuteDown, intlMinuteUp: this.intlMinuteUp, intlSecond: this.intlSecond, intlSecondDown: this.intlSecondDown, intlSecondUp: this.intlSecondUp, lang: this.effectiveLocale, numberingSystem: this.numberingSystem, onCalciteInternalTimePickerChange: this.timePickerChangeHandler, ref: this.setCalciteTimePickerEl, scale: this.scale, step: this.step, value: this.value })), h(HiddenFormInputSlot, { component: this })));
   }
   get el() { return getElement(this); }
   static get watchers() { return {
@@ -466,9 +507,9 @@ const InputTimePicker = class {
     "open": ["openHandler"],
     "disabled": ["handleDisabledAndReadOnlyChange"],
     "readOnly": ["handleDisabledAndReadOnlyChange"],
-    "globalAttributes": ["localeWatcher"],
-    "locale": ["localeWatcher"],
-    "value": ["valueWatcher"]
+    "locale": ["localeChanged"],
+    "value": ["valueWatcher"],
+    "effectiveLocale": ["effectiveLocaleWatcher"]
   }; }
 };
 InputTimePicker.style = inputTimePickerCss;
@@ -517,7 +558,7 @@ const TEXT = {
   secondUp: "Increase second"
 };
 
-const timePickerCss = "@-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}@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{display:inline-block}.time-picker{display:-ms-flexbox;display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-flex-align:center;align-items:center;background-color:var(--calcite-ui-foreground-1);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1);--tw-shadow:0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);--tw-shadow-colored:0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);-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);border-radius:var(--calcite-border-radius)}.time-picker .column{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.time-picker .meridiem--start{-ms-flex-order:-1;order:-1}.time-picker .button{display:-ms-inline-flexbox;display:inline-flex;cursor:pointer;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:var(--calcite-ui-foreground-1)}.time-picker .button:hover,.time-picker .button:focus{background-color:var(--calcite-ui-foreground-2);outline:2px solid transparent;outline-offset:2px}.time-picker .button:active{background-color:var(--calcite-ui-foreground-3)}.time-picker .button.top-left{border-start-start-radius:var(--calcite-border-radius)}.time-picker .button.bottom-left{border-end-start-radius:var(--calcite-border-radius)}.time-picker .button.top-right{border-start-end-radius:var(--calcite-border-radius)}.time-picker .button.bottom-right{border-end-end-radius:var(--calcite-border-radius)}.time-picker .button calcite-icon{color:var(--calcite-ui-text-3)}.time-picker .input{display:-ms-inline-flexbox;display:inline-flex;cursor:pointer;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:var(--calcite-ui-foreground-1);font-weight:var(--calcite-font-weight-medium)}.time-picker .input:hover{-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-foreground-2);box-shadow:inset 0 0 0 2px var(--calcite-ui-foreground-2)}.time-picker .input:focus,.time-picker .input:hover:focus{outline:2px solid transparent;outline-offset:2px;-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-brand);box-shadow:inset 0 0 0 2px var(--calcite-ui-brand)}.time-picker.scale-s{font-size:var(--calcite-font-size--1)}.time-picker.scale-s .button,.time-picker.scale-s .input{padding-inline:0.75rem;padding-block:0.25rem}.time-picker.scale-s:not(.show-meridiem) .delimiter:last-child{-webkit-padding-end:0.75rem;padding-inline-end:0.75rem}.time-picker.scale-m{font-size:var(--calcite-font-size-0)}.time-picker.scale-m .button,.time-picker.scale-m .input{padding-inline:1rem;padding-block:0.5rem}.time-picker.scale-m:not(.show-meridiem) .delimiter:last-child{-webkit-padding-end:1rem;padding-inline-end:1rem}.time-picker.scale-l{font-size:var(--calcite-font-size-1)}.time-picker.scale-l .button,.time-picker.scale-l .input{padding-inline:1.25rem;padding-block:0.75rem}.time-picker.scale-l:not(.show-meridiem) .delimiter:last-child{-webkit-padding-end:1.25rem;padding-inline-end:1.25rem}";
+const timePickerCss = "@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{display:inline-block}.time-picker{display:flex;-webkit-user-select:none;user-select:none;align-items:center;background-color:var(--calcite-ui-foreground-1);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1);--tw-shadow:0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);--tw-shadow-colored:0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);border-radius:var(--calcite-border-radius)}.time-picker .column{display:flex;flex-direction:column}.time-picker .meridiem--start{order:-1}.time-picker .button{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;background-color:var(--calcite-ui-foreground-1)}.time-picker .button:hover,.time-picker .button:focus{background-color:var(--calcite-ui-foreground-2);outline:2px solid transparent;outline-offset:2px}.time-picker .button:active{background-color:var(--calcite-ui-foreground-3)}.time-picker .button.top-left{border-start-start-radius:var(--calcite-border-radius)}.time-picker .button.bottom-left{border-end-start-radius:var(--calcite-border-radius)}.time-picker .button.top-right{border-start-end-radius:var(--calcite-border-radius)}.time-picker .button.bottom-right{border-end-end-radius:var(--calcite-border-radius)}.time-picker .button calcite-icon{color:var(--calcite-ui-text-3)}.time-picker .input{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;background-color:var(--calcite-ui-foreground-1);font-weight:var(--calcite-font-weight-medium)}.time-picker .input:hover{box-shadow:inset 0 0 0 2px var(--calcite-ui-foreground-2)}.time-picker .input:focus,.time-picker .input:hover:focus{outline:2px solid transparent;outline-offset:2px;box-shadow:inset 0 0 0 2px var(--calcite-ui-brand)}.time-picker.scale-s{font-size:var(--calcite-font-size--1)}.time-picker.scale-s .button,.time-picker.scale-s .input{padding-inline:0.75rem;padding-block:0.25rem}.time-picker.scale-s:not(.show-meridiem) .delimiter:last-child{padding-inline-end:0.75rem}.time-picker.scale-m{font-size:var(--calcite-font-size-0)}.time-picker.scale-m .button,.time-picker.scale-m .input{padding-inline:1rem;padding-block:0.5rem}.time-picker.scale-m:not(.show-meridiem) .delimiter:last-child{padding-inline-end:1rem}.time-picker.scale-l{font-size:var(--calcite-font-size-1)}.time-picker.scale-l .button,.time-picker.scale-l .input{padding-inline:1.25rem;padding-block:0.75rem}.time-picker.scale-l:not(.show-meridiem) .delimiter:last-child{padding-inline-end:1.25rem}";
 
 function capitalize(str) {
   return str.charAt(0).toUpperCase() + str.slice(1);
@@ -607,7 +648,7 @@ const TimePicker = class {
     this.intlSecondUp = TEXT.secondUp;
     /** Specifies the size of the component. */
     this.scale = "m";
-    /** Specifies the granularity the "value" must adhere to (in seconds). */
+    /** Specifies the granularity the `value` must adhere to (in seconds). */
     this.step = 60;
     /** The component's value in UTC (always 24-hour format). */
     this.value = null;
@@ -616,7 +657,7 @@ const TimePicker = class {
     //  State
     //
     // --------------------------------------------------------------------------
-    this.globalAttributes = {};
+    this.effectiveLocale = "";
     this.showSecond = this.step < 60;
     this.decrementHour = () => {
       const newHour = !this.hour ? 0 : this.hour === "00" ? 23 : parseInt(this.hour) - 1;
@@ -869,8 +910,8 @@ const TimePicker = class {
     this.setValue = (value, emit = true) => {
       if (isValidTime(value)) {
         const { hour, minute, second } = parseTimeString(value);
-        const locale = getLocale(this);
-        const { localizedHour, localizedHourSuffix, localizedMinute, localizedMinuteSuffix, localizedSecond, localizedSecondSuffix, localizedMeridiem } = localizeTimeStringToParts(value, locale);
+        const { effectiveLocale: locale, numberingSystem } = this;
+        const { localizedHour, localizedHourSuffix, localizedMinute, localizedMinuteSuffix, localizedSecond, localizedSecondSuffix, localizedMeridiem } = localizeTimeStringToParts({ value, locale, numberingSystem });
         this.localizedHour = localizedHour;
         this.localizedHourSuffix = localizedHourSuffix;
         this.localizedMinute = localizedMinute;
@@ -883,7 +924,7 @@ const TimePicker = class {
         if (localizedMeridiem) {
           this.localizedMeridiem = localizedMeridiem;
           this.meridiem = getMeridiem(this.hour);
-          const formatParts = getTimeParts(value, locale);
+          const formatParts = getTimeParts({ value, locale, numberingSystem });
           this.meridiemOrder = this.getMeridiemOrder(formatParts);
         }
       }
@@ -907,7 +948,7 @@ const TimePicker = class {
     };
     this.setValuePart = (key, value, emit = true) => {
       var _a;
-      const locale = getLocale(this);
+      const { effectiveLocale: locale, numberingSystem } = this;
       if (key === "meridiem") {
         this.meridiem = value;
         if (isValidNumber(this.hour)) {
@@ -924,12 +965,22 @@ const TimePicker = class {
               }
               break;
           }
-          this.localizedHour = localizeTimePart(this.hour, "hour", locale);
+          this.localizedHour = localizeTimePart({
+            value: this.hour,
+            part: "hour",
+            locale,
+            numberingSystem
+          });
         }
       }
       else {
         this[key] = typeof value === "number" ? formatTimePart(value) : value;
-        this[`localized${capitalize(key)}`] = localizeTimePart(this[key], key, locale);
+        this[`localized${capitalize(key)}`] = localizeTimePart({
+          value: this[key],
+          part: key,
+          locale,
+          numberingSystem
+        });
       }
       if (this.hour && this.minute) {
         const showSeconds = this.second && this.showSecond;
@@ -939,19 +990,22 @@ const TimePicker = class {
         this.value = null;
       }
       this.localizedMeridiem = this.value
-        ? ((_a = localizeTimeStringToParts(this.value, locale)) === null || _a === void 0 ? void 0 : _a.localizedMeridiem) || null
-        : localizeTimePart(this.meridiem, "meridiem", locale);
+        ? ((_a = localizeTimeStringToParts({ value: this.value, locale, numberingSystem })) === null || _a === void 0 ? void 0 : _a.localizedMeridiem) || null
+        : localizeTimePart({ value: this.meridiem, part: "meridiem", locale, numberingSystem });
       if (emit) {
         this.calciteInternalTimePickerChange.emit();
       }
     };
   }
-  localeWatcher() {
-    this.updateLocale();
+  localeChanged() {
+    updateEffectiveLocale(this);
   }
   valueWatcher(newValue) {
     this.setValue(newValue, false);
   }
+  effectiveLocaleWatcher() {
+    this.updateLocale();
+  }
   //--------------------------------------------------------------------------
   //
   //  Event Listeners
@@ -1050,7 +1104,7 @@ const TimePicker = class {
     return isActivationKey(key);
   }
   getMeridiemOrder(formatParts) {
-    const locale = getLocale(this);
+    const locale = this.effectiveLocale;
     const isRTLKind = locale === "ar" || locale === "he";
     if (formatParts && !isRTLKind) {
       const index = formatParts.findIndex((parts) => {
@@ -1061,8 +1115,7 @@ const TimePicker = class {
     return 0;
   }
   updateLocale() {
-    const locale = getLocale(this);
-    this.hourCycle = getLocaleHourCycle(locale);
+    this.hourCycle = getLocaleHourCycle(this.effectiveLocale, this.numberingSystem);
     this.setValue(this.value, false);
   }
   // --------------------------------------------------------------------------
@@ -1071,13 +1124,16 @@ const TimePicker = class {
   //
   // --------------------------------------------------------------------------
   connectedCallback() {
+    connectLocalized(this);
     this.updateLocale();
-    const locale = getLocale(this);
-    this.meridiemOrder = this.getMeridiemOrder(getTimeParts("0:00:00", locale));
-    watchGlobalAttributes(this, ["lang"]);
+    this.meridiemOrder = this.getMeridiemOrder(getTimeParts({
+      value: "0:00:00",
+      locale: this.effectiveLocale,
+      numberingSystem: this.numberingSystem
+    }));
   }
   disconnectedCallback() {
-    unwatchGlobalAttributes(this);
+    disconnectLocalized(this);
   }
   // --------------------------------------------------------------------------
   //
@@ -1142,9 +1198,9 @@ const TimePicker = class {
   }
   get el() { return getElement(this); }
   static get watchers() { return {
-    "globalAttributes": ["localeWatcher"],
-    "locale": ["localeWatcher"],
-    "value": ["valueWatcher"]
+    "locale": ["localeChanged"],
+    "value": ["valueWatcher"],
+    "effectiveLocale": ["effectiveLocaleWatcher"]
   }; }
 };
 TimePicker.style = timePickerCss;