@esri/calcite-components 1.0.0-beta.97 → 1.0.0-beta.99

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

@@ -1,18 +1,20 @@
 /*!
  * 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.97
+ * v1.0.0-beta.99
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-1f9b54dc.js';
-import { g as guid } from './guid-9f15e57a.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-35f81208.js';
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-333c4a4c.js';
-import { s as submitForm, c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form-80dbd90e.js';
-import { u as updateHostInteraction } from './interactive-5db230e8.js';
-import { n as numberKeys, i as isActivationKey } from './key-acc755b7.js';
-import './observers-9f44e9b3.js';
-import './dom-8f0a9ff2.js';
-import './resources-9c476cb6.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-680b14c0.js';
+import { g as guid } from './guid-84e67314.js';
+import { i as isValidNumber, g as getSupportedLocale, b as getSupportedNumberingSystem, n as numberStringFormatter, c as connectLocalized, d as disconnectLocalized } from './locale-ef464903.js';
+import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-94761635.js';
+import { s as submitForm, c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form-108e135c.js';
+import { u as updateHostInteraction } from './interactive-cb22432d.js';
+import { n as numberKeys, i as isActivationKey } from './key-80f1c74a.js';
+import { c as componentLoaded, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-0a040e7f.js';
+import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-12ad7895.js';
+import './observers-d270ae38.js';
+import './dom-1c94c1bc.js';
+import './resources-2aff4e95.js';
 
 const maxTenthForMinuteAndSecond = 5;
 function createLocaleDateTimeFormatter(locale, numberingSystem, includeSeconds = true) {
@@ -55,7 +57,6 @@ function getLocaleHourCycle(locale, numberingSystem) {
   return getLocalizedTimePart("meridiem", parts) ? "12" : "24";
 }
 function getLocalizedTimePart(part, parts) {
-  var _a, _b, _c, _d;
   if (!part || !parts) {
     return null;
   }
@@ -64,7 +65,7 @@ function getLocalizedTimePart(part, parts) {
     const minuteIndex = parts.indexOf(parts.find(({ type }) => type === "minute"));
     const hourSuffix = parts[hourIndex + 1];
     return hourSuffix && hourSuffix.type === "literal" && minuteIndex - hourIndex === 2
-      ? ((_a = hourSuffix.value) === null || _a === void 0 ? void 0 : _a.trim()) || null
+      ? hourSuffix.value?.trim() || null
       : null;
   }
   if (part === "minuteSuffix") {
@@ -72,15 +73,15 @@ function getLocalizedTimePart(part, parts) {
     const secondIndex = parts.indexOf(parts.find(({ type }) => type === "second"));
     const minuteSuffix = parts[minuteIndex + 1];
     return minuteSuffix && minuteSuffix.type === "literal" && secondIndex - minuteIndex === 2
-      ? ((_b = minuteSuffix.value) === null || _b === void 0 ? void 0 : _b.trim()) || null
+      ? minuteSuffix.value?.trim() || null
       : null;
   }
   if (part === "secondSuffix") {
     const secondIndex = parts.indexOf(parts.find(({ type }) => type === "second"));
     const secondSuffix = parts[secondIndex + 1];
-    return secondSuffix && secondSuffix.type === "literal" ? ((_c = secondSuffix.value) === null || _c === void 0 ? void 0 : _c.trim()) || null : null;
+    return secondSuffix && secondSuffix.type === "literal" ? secondSuffix.value?.trim() || null : null;
   }
-  return ((_d = parts.find(({ type }) => (part == "meridiem" ? type === "dayPeriod" : type === part))) === null || _d === void 0 ? void 0 : _d.value) || null;
+  return parts.find(({ type }) => (part == "meridiem" ? type === "dayPeriod" : type === part))?.value || null;
 }
 function getMeridiem(hour) {
   if (!isValidNumber(hour)) {
@@ -139,7 +140,7 @@ function localizeTimeString({ value, locale, numberingSystem, includeSeconds = t
   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, numberingSystem, includeSeconds);
-  return (formatter === null || formatter === void 0 ? void 0 : formatter.format(dateFromTimeString)) || null;
+  return formatter?.format(dateFromTimeString) || null;
 }
 function localizeTimeStringToParts({ value, locale, numberingSystem }) {
   if (!isValidTime(value)) {
@@ -191,72 +192,18 @@ function parseTimeString(value) {
   };
 }
 
-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 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}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:600}:host([hidden]){display:none}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host{display: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) {
     registerInstance(this, hostRef);
     this.calciteInputTimePickerChange = createEvent(this, "calciteInputTimePickerChange", 7);
-    //--------------------------------------------------------------------------
-    //
-    //  Properties
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * When `true`, the component is active.
-     *
-     * @deprecated Use `open` instead.
-     */
-    this.active = false;
-    /** When `true`, displays the `calcite-time-picker` component. */
-    this.open = false;
-    /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
-    this.disabled = false;
-    /**
-     * 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`, the component must have a value in order for the form to submit.
-     *
-     * @internal
-     */
-    this.required = false;
-    /** Specifies the size of the component. */
-    this.scale = "m";
-    /**
-     * Determines the type of positioning to use for the overlaid content.
-     *
-     * 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";
-    /**
-     * Determines where the popover will be positioned relative to the input.
-     *
-     * @see [LogicalPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/floating-ui.ts#L25)
-     */
-    this.placement = "auto";
-    /** Specifies the granularity the component's `value` must adhere to (in seconds). */
-    this.step = 60;
-    /** 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;
     this.previousValidValue = null;
     this.referenceElementId = `input-time-picker-${guid()}`;
     //--------------------------------------------------------------------------
     //
-    //  State
-    //
-    //--------------------------------------------------------------------------
-    this.effectiveLocale = "";
-    //--------------------------------------------------------------------------
-    //
     //  Event Listeners
     //
     //--------------------------------------------------------------------------
@@ -388,12 +335,22 @@ const InputTimePicker = class {
         }
       }
     };
-  }
-  activeHandler(value) {
-    this.open = value;
+    this.open = false;
+    this.disabled = false;
+    this.readOnly = false;
+    this.messagesOverrides = undefined;
+    this.name = undefined;
+    this.numberingSystem = undefined;
+    this.required = false;
+    this.scale = "m";
+    this.overlayPositioning = "absolute";
+    this.placement = "auto";
+    this.step = 60;
+    this.value = null;
+    this.effectiveLocale = "";
+    this.localizedValue = undefined;
   }
   openHandler(value) {
-    this.active = value;
     if (this.disabled || this.readOnly) {
       this.open = false;
       return;
@@ -407,9 +364,6 @@ const InputTimePicker = class {
       this.open = false;
     }
   }
-  localeChanged() {
-    updateEffectiveLocale(this);
-  }
   valueWatcher(newValue) {
     if (!this.internalValueChange) {
       this.setValue({ value: newValue, origin: "external" });
@@ -449,8 +403,8 @@ const InputTimePicker = class {
   // --------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    var _a;
-    (_a = this.calciteInputEl) === null || _a === void 0 ? void 0 : _a.setFocus();
+    await componentLoaded(this);
+    this.el.focus();
   }
   /**
    * Updates the position of the component.
@@ -458,8 +412,7 @@ const InputTimePicker = class {
    * @param delayed
    */
   async reposition(delayed = false) {
-    var _a;
-    (_a = this.popoverEl) === null || _a === void 0 ? void 0 : _a.reposition(delayed);
+    this.popoverEl?.reposition(delayed);
   }
   onLabelClick() {
     this.setFocus();
@@ -474,20 +427,17 @@ 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);
-    if (open) {
-      this.active = open;
-    }
-    else if (active) {
-      this.open = active;
-    }
+  }
+  componentWillLoad() {
+    setUpLoadableComponent(this);
   }
   componentDidLoad() {
+    setComponentLoaded(this);
     this.setInputValue(this.localizedValue);
   }
   disconnectedCallback() {
@@ -505,15 +455,14 @@ 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: this.effectiveLocale, numberingSystem: this.numberingSystem, 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", { focusTrapDisabled: true, 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", { lang: this.effectiveLocale, messageOverrides: this.messagesOverrides, numberingSystem: this.numberingSystem, onCalciteInternalTimePickerChange: this.timePickerChangeHandler, ref: this.setCalciteTimePickerEl, scale: this.scale, step: this.step, value: this.value })), h(HiddenFormInputSlot, { component: this })));
   }
+  static get delegatesFocus() { return true; }
   get el() { return getElement(this); }
   static get watchers() { return {
-    "active": ["activeHandler"],
     "open": ["openHandler"],
     "disabled": ["handleDisabledAndReadOnlyChange"],
     "readOnly": ["handleDisabledAndReadOnlyChange"],
-    "locale": ["localeChanged"],
     "value": ["valueWatcher"],
     "effectiveLocale": ["effectiveLocaleWatcher"]
   }; }
@@ -549,22 +498,8 @@ const CSS = {
   timePicker: "time-picker",
   meridiemStart: "meridiem--start"
 };
-const TEXT = {
-  hour: "Hour",
-  hourDown: "Decrease hour",
-  hourUp: "Increase hour",
-  meridiem: "AM/PM",
-  meridiemDown: "Decrease AM/PM",
-  meridiemUp: "Increase AM/PM",
-  minute: "Minute",
-  minuteDown: "Decrease minute",
-  minuteUp: "Increase minute",
-  second: "Second",
-  secondDown: "Decrease second",
-  secondUp: "Increase second"
-};
 
-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}";
+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}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:600}: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);
@@ -575,96 +510,6 @@ const TimePicker = class {
     this.calciteInternalTimePickerBlur = createEvent(this, "calciteInternalTimePickerBlur", 6);
     this.calciteInternalTimePickerChange = createEvent(this, "calciteInternalTimePickerChange", 6);
     this.calciteInternalTimePickerFocus = createEvent(this, "calciteInternalTimePickerFocus", 6);
-    //--------------------------------------------------------------------------
-    //
-    //  Properties
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * Accessible name for the component's hour input.
-     *
-     * @default "Hour"
-     */
-    this.intlHour = TEXT.hour;
-    /**
-     * Accessible name for the component's hour down button.
-     *
-     * @default "Decrease hour"
-     */
-    this.intlHourDown = TEXT.hourDown;
-    /**
-     * Accessible name for the component's hour up button.
-     *
-     * @default "Increase hour"
-     */
-    this.intlHourUp = TEXT.hourUp;
-    /**
-     * Accessible name for the component's meridiem (AM/PM) input.
-     *
-     * @default "AM/PM"
-     */
-    this.intlMeridiem = TEXT.meridiem;
-    /**
-     * Accessible name for the component's meridiem (AM/PM) down button.
-     *
-     * @default "Decrease AM/PM"
-     */
-    this.intlMeridiemDown = TEXT.meridiemDown;
-    /**
-     * Accessible name for the component's meridiem (AM/PM) up button.
-     *
-     * @default "Increase AM/PM"
-     */
-    this.intlMeridiemUp = TEXT.meridiemUp;
-    /**
-     * Accessible name for the component's minute input.
-     *
-     * @default "Minute"
-     */
-    this.intlMinute = TEXT.minute;
-    /**
-     * Accessible name for the component's minute down button.
-     *
-     * @default "Decrease minute"
-     */
-    this.intlMinuteDown = TEXT.minuteDown;
-    /**
-     * Accessible name for the component's minute up button.
-     *
-     * @default "Increase minute"
-     */
-    this.intlMinuteUp = TEXT.minuteUp;
-    /**
-     * Accessible name for the component's second input.
-     *
-     * @default "Second"
-     */
-    this.intlSecond = TEXT.second;
-    /**
-     * Accessible name for the component's second down button.
-     *
-     * @default "Decrease second"
-     */
-    this.intlSecondDown = TEXT.secondDown;
-    /**
-     * Accessible name for the component's second up button.
-     *
-     * @default "Increase second"
-     */
-    this.intlSecondUp = TEXT.secondUp;
-    /** Specifies the size of the component. */
-    this.scale = "m";
-    /** 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;
-    // --------------------------------------------------------------------------
-    //
-    //  State
-    //
-    // --------------------------------------------------------------------------
-    this.effectiveLocale = "";
-    this.showSecond = this.step < 60;
     this.decrementHour = () => {
       const newHour = !this.hour ? 0 : this.hour === "00" ? 23 : parseInt(this.hour) - 1;
       this.setValuePart("hour", newHour);
@@ -953,7 +798,6 @@ const TimePicker = class {
       }
     };
     this.setValuePart = (key, value, emit = true) => {
-      var _a;
       const { effectiveLocale: locale, numberingSystem } = this;
       if (key === "meridiem") {
         this.meridiem = value;
@@ -996,19 +840,41 @@ const TimePicker = class {
         this.value = null;
       }
       this.localizedMeridiem = this.value
-        ? ((_a = localizeTimeStringToParts({ value: this.value, locale, numberingSystem })) === null || _a === void 0 ? void 0 : _a.localizedMeridiem) || null
+        ? localizeTimeStringToParts({ value: this.value, locale, numberingSystem })
+          ?.localizedMeridiem || null
         : localizeTimePart({ value: this.meridiem, part: "meridiem", locale, numberingSystem });
       if (emit) {
         this.calciteInternalTimePickerChange.emit();
       }
     };
-  }
-  localeChanged() {
-    updateEffectiveLocale(this);
+    this.scale = "m";
+    this.step = 60;
+    this.numberingSystem = undefined;
+    this.value = null;
+    this.messages = undefined;
+    this.messageOverrides = undefined;
+    this.effectiveLocale = "";
+    this.hour = undefined;
+    this.hourCycle = undefined;
+    this.localizedHour = undefined;
+    this.localizedHourSuffix = undefined;
+    this.localizedMeridiem = undefined;
+    this.localizedMinute = undefined;
+    this.localizedMinuteSuffix = undefined;
+    this.localizedSecond = undefined;
+    this.localizedSecondSuffix = undefined;
+    this.meridiem = undefined;
+    this.minute = undefined;
+    this.second = undefined;
+    this.showSecond = this.step < 60;
+    this.defaultMessages = undefined;
   }
   valueWatcher(newValue) {
     this.setValue(newValue, false);
   }
+  onMessagesChange() {
+    /* wired up by t9n util */
+  }
   effectiveLocaleWatcher() {
     this.updateLocale();
   }
@@ -1031,23 +897,23 @@ const TimePicker = class {
     switch (this.activeEl) {
       case this.hourEl:
         if (key === "ArrowRight") {
-          this.setFocus("minute");
+          this.focusPart("minute");
           event.preventDefault();
         }
         break;
       case this.minuteEl:
         switch (key) {
           case "ArrowLeft":
-            this.setFocus("hour");
+            this.focusPart("hour");
             event.preventDefault();
             break;
           case "ArrowRight":
             if (this.step !== 60) {
-              this.setFocus("second");
+              this.focusPart("second");
               event.preventDefault();
             }
             else if (this.hourCycle === "12") {
-              this.setFocus("meridiem");
+              this.focusPart("meridiem");
               event.preventDefault();
             }
             break;
@@ -1056,12 +922,12 @@ const TimePicker = class {
       case this.secondEl:
         switch (key) {
           case "ArrowLeft":
-            this.setFocus("minute");
+            this.focusPart("minute");
             event.preventDefault();
             break;
           case "ArrowRight":
             if (this.hourCycle === "12") {
-              this.setFocus("meridiem");
+              this.focusPart("meridiem");
               event.preventDefault();
             }
             break;
@@ -1071,11 +937,11 @@ const TimePicker = class {
         switch (key) {
           case "ArrowLeft":
             if (this.step !== 60) {
-              this.setFocus("second");
+              this.focusPart("second");
               event.preventDefault();
             }
             else {
-              this.setFocus("minute");
+              this.focusPart("minute");
               event.preventDefault();
             }
             break;
@@ -1090,18 +956,20 @@ const TimePicker = class {
   //--------------------------------------------------------------------------
   /**
    * Sets focus on the component.
-   *
-   * @param target
    */
-  async setFocus(target) {
-    var _a;
-    (_a = this[`${target || "hour"}El`]) === null || _a === void 0 ? void 0 : _a.focus();
+  async setFocus() {
+    await componentLoaded(this);
+    this.el?.focus();
   }
   // --------------------------------------------------------------------------
   //
   //  Private Methods
   //
   // --------------------------------------------------------------------------
+  async focusPart(target) {
+    await componentLoaded(this);
+    this[`${target || "hour"}El`]?.focus();
+  }
   buttonActivated(event) {
     const { key } = event;
     if (key === " ") {
@@ -1121,6 +989,7 @@ const TimePicker = class {
     return 0;
   }
   updateLocale() {
+    updateMessages(this, this.effectiveLocale);
     this.hourCycle = getLocaleHourCycle(this.effectiveLocale, this.numberingSystem);
     this.setValue(this.value, false);
   }
@@ -1132,14 +1001,23 @@ const TimePicker = class {
   connectedCallback() {
     connectLocalized(this);
     this.updateLocale();
+    connectMessages(this);
     this.meridiemOrder = this.getMeridiemOrder(getTimeParts({
       value: "0:00:00",
       locale: this.effectiveLocale,
       numberingSystem: this.numberingSystem
     }));
   }
+  async componentWillLoad() {
+    setUpLoadableComponent(this);
+    await setUpMessages(this);
+  }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
   disconnectedCallback() {
     disconnectLocalized(this);
+    disconnectMessages(this);
   }
   // --------------------------------------------------------------------------
   //
@@ -1157,55 +1035,57 @@ const TimePicker = class {
         [CSS.showMeridiem]: showMeridiem,
         [CSS.showSecond]: this.showSecond,
         [CSS[`scale-${this.scale}`]]: true
-      }, dir: "ltr" }, h("div", { class: CSS.column, role: "group" }, h("span", { "aria-label": this.intlHourUp, class: {
+      }, dir: "ltr" }, h("div", { class: CSS.column, role: "group" }, h("span", { "aria-label": this.messages.hourUp, class: {
         [CSS.button]: true,
         [CSS.buttonHourUp]: true,
         [CSS.buttonTopLeft]: true
-      }, onClick: this.incrementHour, onKeyDown: this.hourUpButtonKeyDownHandler, role: "button", tabIndex: -1 }, h("calcite-icon", { icon: "chevron-up", scale: iconScale })), h("span", { "aria-label": this.intlHour, "aria-valuemax": "23", "aria-valuemin": "1", "aria-valuenow": (hourIsNumber && parseInt(this.hour)) || "0", "aria-valuetext": this.hour, class: {
+      }, onClick: this.incrementHour, onKeyDown: this.hourUpButtonKeyDownHandler, role: "button", tabIndex: -1 }, h("calcite-icon", { icon: "chevron-up", scale: iconScale })), h("span", { "aria-label": this.messages.hour, "aria-valuemax": "23", "aria-valuemin": "1", "aria-valuenow": (hourIsNumber && parseInt(this.hour)) || "0", "aria-valuetext": this.hour, class: {
         [CSS.input]: true,
         [CSS.hour]: true
-      }, onFocus: this.focusHandler, onKeyDown: this.hourKeyDownHandler, ref: this.setHourEl, role: "spinbutton", tabIndex: 0 }, this.localizedHour || "--"), h("span", { "aria-label": this.intlHourDown, class: {
+      }, onFocus: this.focusHandler, onKeyDown: this.hourKeyDownHandler, ref: this.setHourEl, role: "spinbutton", tabIndex: 0 }, this.localizedHour || "--"), h("span", { "aria-label": this.messages.hourDown, class: {
         [CSS.button]: true,
         [CSS.buttonHourDown]: true,
         [CSS.buttonBottomLeft]: true
-      }, onClick: this.decrementHour, onKeyDown: this.hourDownButtonKeyDownHandler, role: "button", tabIndex: -1 }, h("calcite-icon", { icon: "chevron-down", scale: iconScale }))), h("span", { class: CSS.delimiter }, this.localizedHourSuffix), h("div", { class: CSS.column, role: "group" }, h("span", { "aria-label": this.intlMinuteUp, class: {
+      }, onClick: this.decrementHour, onKeyDown: this.hourDownButtonKeyDownHandler, role: "button", tabIndex: -1 }, h("calcite-icon", { icon: "chevron-down", scale: iconScale }))), h("span", { class: CSS.delimiter }, this.localizedHourSuffix), h("div", { class: CSS.column, role: "group" }, h("span", { "aria-label": this.messages.minuteUp, class: {
         [CSS.button]: true,
         [CSS.buttonMinuteUp]: true
-      }, onClick: this.incrementMinute, onKeyDown: this.minuteUpButtonKeyDownHandler, role: "button", tabIndex: -1 }, h("calcite-icon", { icon: "chevron-up", scale: iconScale })), h("span", { "aria-label": this.intlMinute, "aria-valuemax": "12", "aria-valuemin": "1", "aria-valuenow": (minuteIsNumber && parseInt(this.minute)) || "0", "aria-valuetext": this.minute, class: {
+      }, onClick: this.incrementMinute, onKeyDown: this.minuteUpButtonKeyDownHandler, role: "button", tabIndex: -1 }, h("calcite-icon", { icon: "chevron-up", scale: iconScale })), h("span", { "aria-label": this.messages.minute, "aria-valuemax": "12", "aria-valuemin": "1", "aria-valuenow": (minuteIsNumber && parseInt(this.minute)) || "0", "aria-valuetext": this.minute, class: {
         [CSS.input]: true,
         [CSS.minute]: true
-      }, onFocus: this.focusHandler, onKeyDown: this.minuteKeyDownHandler, ref: this.setMinuteEl, role: "spinbutton", tabIndex: 0 }, this.localizedMinute || "--"), h("span", { "aria-label": this.intlMinuteDown, class: {
+      }, onFocus: this.focusHandler, onKeyDown: this.minuteKeyDownHandler, ref: this.setMinuteEl, role: "spinbutton", tabIndex: 0 }, this.localizedMinute || "--"), h("span", { "aria-label": this.messages.minuteDown, class: {
         [CSS.button]: true,
         [CSS.buttonMinuteDown]: true
-      }, onClick: this.decrementMinute, onKeyDown: this.minuteDownButtonKeyDownHandler, role: "button", tabIndex: -1 }, h("calcite-icon", { icon: "chevron-down", scale: iconScale }))), this.showSecond && h("span", { class: CSS.delimiter }, this.localizedMinuteSuffix), this.showSecond && (h("div", { class: CSS.column, role: "group" }, h("span", { "aria-label": this.intlSecondUp, class: {
+      }, onClick: this.decrementMinute, onKeyDown: this.minuteDownButtonKeyDownHandler, role: "button", tabIndex: -1 }, h("calcite-icon", { icon: "chevron-down", scale: iconScale }))), this.showSecond && h("span", { class: CSS.delimiter }, this.localizedMinuteSuffix), this.showSecond && (h("div", { class: CSS.column, role: "group" }, h("span", { "aria-label": this.messages.secondUp, class: {
         [CSS.button]: true,
         [CSS.buttonSecondUp]: true
-      }, onClick: this.incrementSecond, onKeyDown: this.secondUpButtonKeyDownHandler, role: "button", tabIndex: -1 }, h("calcite-icon", { icon: "chevron-up", scale: iconScale })), h("span", { "aria-label": this.intlSecond, "aria-valuemax": "59", "aria-valuemin": "0", "aria-valuenow": (secondIsNumber && parseInt(this.second)) || "0", "aria-valuetext": this.second, class: {
+      }, onClick: this.incrementSecond, onKeyDown: this.secondUpButtonKeyDownHandler, role: "button", tabIndex: -1 }, h("calcite-icon", { icon: "chevron-up", scale: iconScale })), h("span", { "aria-label": this.messages.second, "aria-valuemax": "59", "aria-valuemin": "0", "aria-valuenow": (secondIsNumber && parseInt(this.second)) || "0", "aria-valuetext": this.second, class: {
         [CSS.input]: true,
         [CSS.second]: true
-      }, onFocus: this.focusHandler, onKeyDown: this.secondKeyDownHandler, ref: this.setSecondEl, role: "spinbutton", tabIndex: 0 }, this.localizedSecond || "--"), h("span", { "aria-label": this.intlSecondDown, class: {
+      }, onFocus: this.focusHandler, onKeyDown: this.secondKeyDownHandler, ref: this.setSecondEl, role: "spinbutton", tabIndex: 0 }, this.localizedSecond || "--"), h("span", { "aria-label": this.messages.secondDown, class: {
         [CSS.button]: true,
         [CSS.buttonSecondDown]: true
       }, onClick: this.decrementSecond, onKeyDown: this.secondDownButtonKeyDownHandler, role: "button", tabIndex: -1 }, h("calcite-icon", { icon: "chevron-down", scale: iconScale })))), this.localizedSecondSuffix && (h("span", { class: CSS.delimiter }, this.localizedSecondSuffix)), showMeridiem && (h("div", { class: {
         [CSS.column]: true,
         [CSS.meridiemStart]: this.meridiemOrder === 0
-      }, role: "group" }, h("span", { "aria-label": this.intlMeridiemUp, class: {
+      }, role: "group" }, h("span", { "aria-label": this.messages.meridiemUp, class: {
         [CSS.button]: true,
         [CSS.buttonMeridiemUp]: true,
         [CSS.buttonTopRight]: true
-      }, onClick: this.incrementMeridiem, onKeyDown: this.meridiemUpButtonKeyDownHandler, role: "button", tabIndex: -1 }, h("calcite-icon", { icon: "chevron-up", scale: iconScale })), h("span", { "aria-label": this.intlMeridiem, "aria-valuemax": "2", "aria-valuemin": "1", "aria-valuenow": (this.meridiem === "PM" && "2") || "1", "aria-valuetext": this.meridiem, class: {
+      }, onClick: this.incrementMeridiem, onKeyDown: this.meridiemUpButtonKeyDownHandler, role: "button", tabIndex: -1 }, h("calcite-icon", { icon: "chevron-up", scale: iconScale })), h("span", { "aria-label": this.messages.meridiem, "aria-valuemax": "2", "aria-valuemin": "1", "aria-valuenow": (this.meridiem === "PM" && "2") || "1", "aria-valuetext": this.meridiem, class: {
         [CSS.input]: true,
         [CSS.meridiem]: true
-      }, onFocus: this.focusHandler, onKeyDown: this.meridiemKeyDownHandler, ref: this.setMeridiemEl, role: "spinbutton", tabIndex: 0 }, this.localizedMeridiem || "--"), h("span", { "aria-label": this.intlMeridiemDown, class: {
+      }, onFocus: this.focusHandler, onKeyDown: this.meridiemKeyDownHandler, ref: this.setMeridiemEl, role: "spinbutton", tabIndex: 0 }, this.localizedMeridiem || "--"), h("span", { "aria-label": this.messages.meridiemDown, class: {
         [CSS.button]: true,
         [CSS.buttonMeridiemDown]: true,
         [CSS.buttonBottomRight]: true
       }, onClick: this.decrementMeridiem, onKeyDown: this.meridiemDownButtonKeyDownHandler, role: "button", tabIndex: -1 }, h("calcite-icon", { icon: "chevron-down", scale: iconScale }))))));
   }
+  static get delegatesFocus() { return true; }
+  static get assetsDirs() { return ["assets"]; }
   get el() { return getElement(this); }
   static get watchers() { return {
-    "locale": ["localeChanged"],
     "value": ["valueWatcher"],
+    "messageOverrides": ["onMessagesChange"],
     "effectiveLocale": ["effectiveLocaleWatcher"]
   }; }
 };