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

package/dist/esm/calcite-input-time-picker_2.entry.js

@@ -1,18 +1,18 @@
 /*!
  * 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.597
  */
-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-5326c3af.js';
+import { g as guid } from './guid-57e25130.js';
+import { i as isValidNumber, b as getSupportedLocale, u as updateEffectiveLocale, c as connectLocalized, d as disconnectLocalized } from './locale-6840e756.js';
+import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-a209a39c.js';
+import { s as submitForm, c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form-08544720.js';
+import { u as updateHostInteraction } from './interactive-c086cb04.js';
+import { n as numberKeys, i as isActivationKey } from './key-42705c39.js';
+import './observers-68c33472.js';
+import './dom-1ac7b489.js';
+import './resources-bf3cbf16.js';
 
 const maxTenthForMinuteAndSecond = 5;
 function createLocaleDateTimeFormatter(locale, includeSeconds = true) {
@@ -140,10 +140,11 @@ function localizeTimeString(value, locale = "en", includeSeconds = true) {
   const formatter = createLocaleDateTimeFormatter(locale, includeSeconds);
   return (formatter === null || formatter === void 0 ? void 0 : formatter.format(dateFromTimeString)) || null;
 }
-function localizeTimeStringToParts(value, locale = "en") {
+function localizeTimeStringToParts(value, locale) {
   if (!isValidTime(value)) {
     return null;
   }
+  locale = getSupportedLocale(locale);
   const { hour, minute, second = "0" } = parseTimeString(value);
   const dateFromTimeString = new Date(Date.UTC(0, 0, 0, parseInt(hour), parseInt(minute), parseInt(second)));
   if (dateFromTimeString) {
@@ -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,7 +263,7 @@ const InputTimePicker = class {
     this.calciteInternalInputBlurHandler = () => {
       this.open = false;
       const shouldIncludeSeconds = this.shouldIncludeSeconds();
-      const locale = getLocale(this);
+      const locale = this.effectiveLocale;
       const localizedInputValue = localizeTimeString(this.calciteInputEl.value, locale, shouldIncludeSeconds);
       this.setInputValue(localizedInputValue || localizeTimeString(this.value, locale, shouldIncludeSeconds));
     };
@@ -318,7 +321,7 @@ 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(newValue, this.effectiveLocale, this.shouldIncludeSeconds());
       this.internalValueChange = origin !== "external" && origin !== "loading";
       const shouldEmit = origin !== "loading" &&
         origin !== "external" &&
@@ -371,9 +374,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 +383,9 @@ const InputTimePicker = class {
     }
     this.internalValueChange = false;
   }
+  effectiveLocaleWatcher() {
+    this.setInputValue(localizeTimeString(this.value, this.effectiveLocale, this.shouldIncludeSeconds()));
+  }
   clickHandler(event) {
     if (event.composedPath().includes(this.calciteTimePickerEl)) {
       return;
@@ -426,13 +431,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 +451,7 @@ const InputTimePicker = class {
   disconnectedCallback() {
     disconnectLabel(this);
     disconnectForm(this);
-    unwatchGlobalAttributes(this);
+    disconnectLocalized(this);
   }
   componentDidRender() {
     updateHostInteraction(this);
@@ -458,7 +463,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, 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 +471,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 +522,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);
@@ -616,7 +621,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,7 +874,7 @@ const TimePicker = class {
     this.setValue = (value, emit = true) => {
       if (isValidTime(value)) {
         const { hour, minute, second } = parseTimeString(value);
-        const locale = getLocale(this);
+        const locale = this.effectiveLocale;
         const { localizedHour, localizedHourSuffix, localizedMinute, localizedMinuteSuffix, localizedSecond, localizedSecondSuffix, localizedMeridiem } = localizeTimeStringToParts(value, locale);
         this.localizedHour = localizedHour;
         this.localizedHourSuffix = localizedHourSuffix;
@@ -907,7 +912,7 @@ const TimePicker = class {
     };
     this.setValuePart = (key, value, emit = true) => {
       var _a;
-      const locale = getLocale(this);
+      const locale = this.effectiveLocale;
       if (key === "meridiem") {
         this.meridiem = value;
         if (isValidNumber(this.hour)) {
@@ -946,12 +951,15 @@ const TimePicker = class {
       }
     };
   }
-  localeWatcher() {
-    this.updateLocale();
+  localeChanged() {
+    updateEffectiveLocale(this);
   }
   valueWatcher(newValue) {
     this.setValue(newValue, false);
   }
+  effectiveLocaleWatcher() {
+    this.updateLocale();
+  }
   //--------------------------------------------------------------------------
   //
   //  Event Listeners
@@ -1050,7 +1058,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 +1069,7 @@ const TimePicker = class {
     return 0;
   }
   updateLocale() {
-    const locale = getLocale(this);
-    this.hourCycle = getLocaleHourCycle(locale);
+    this.hourCycle = getLocaleHourCycle(this.effectiveLocale);
     this.setValue(this.value, false);
   }
   // --------------------------------------------------------------------------
@@ -1071,13 +1078,12 @@ 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("0:00:00", this.effectiveLocale));
   }
   disconnectedCallback() {
-    unwatchGlobalAttributes(this);
+    disconnectLocalized(this);
   }
   // --------------------------------------------------------------------------
   //
@@ -1142,9 +1148,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;