@esri/calcite-components 1.0.0-beta.90 → 1.0.0-beta.93

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

@@ -1,1094 +1,1108 @@
 /*!
  * 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.90
+ * v1.0.0-beta.93
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-125082eb.js';
-import { g as guid } from './guid-b66e2624.js';
-import { i as isValidNumber } from './locale-8e785c01.js';
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-a26004cb.js';
-import { s as submitForm, c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form-4ca0d7b1.js';
-import { u as updateHostInteraction } from './interactive-010acdfb.js';
-import { n as numberKeys, i as isActivationKey } from './key-44ba709a.js';
-import './dom-796bedfe.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-ebacd58f.js';
+import { g as guid } from './guid-979aa261.js';
+import { i as isValidNumber } from './locale-6759d954.js';
+import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-d3d802aa.js';
+import { s as submitForm, c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form-e49dd288.js';
+import { u as updateHostInteraction } from './interactive-ee876f5b.js';
+import { n as numberKeys, i as isActivationKey } from './key-efdd4e0d.js';
+import './dom-a762d6de.js';
+import './resources-3f24d3fc.js';
 
-const maxTenthForMinuteAndSecond = 5;
-function createLocaleDateTimeFormatter(locale, includeSeconds = true) {
-  try {
-    const options = {
-      hour: "2-digit",
-      minute: "2-digit",
-      timeZone: "UTC"
-    };
-    if (includeSeconds) {
-      options.second = "2-digit";
-    }
-    return new Intl.DateTimeFormat(locale, options);
-  }
-  catch (error) {
-    throw new Error(`Invalid locale supplied while attempting to create a DateTime formatter: ${locale}`);
-  }
-}
-function formatTimePart(number) {
-  const numberAsString = number.toString();
-  return number >= 0 && number <= 9 ? numberAsString.padStart(2, "0") : numberAsString;
-}
-function formatTimeString(value) {
-  if (!isValidTime(value)) {
-    return null;
-  }
-  const [hourString, minuteString, secondString] = value.split(":");
-  const hour = formatTimePart(parseInt(hourString));
-  const minute = formatTimePart(parseInt(minuteString));
-  if (secondString) {
-    const second = formatTimePart(parseInt(secondString));
-    return `${hour}:${minute}:${second}`;
-  }
-  return `${hour}:${minute}`;
-}
-function getLocaleHourCycle(locale) {
-  const formatter = createLocaleDateTimeFormatter(locale);
-  const parts = formatter.formatToParts(new Date(Date.UTC(0, 0, 0, 0, 0, 0)));
-  return getLocalizedTimePart("meridiem", parts) ? "12" : "24";
-}
-function getLocalizedTimePart(part, parts) {
-  var _a, _b, _c, _d;
-  if (!part || !parts) {
-    return null;
-  }
-  if (part === "hourSuffix") {
-    const hourIndex = parts.indexOf(parts.find(({ type }) => type === "hour"));
-    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
-      : null;
-  }
-  if (part === "minuteSuffix") {
-    const minuteIndex = parts.indexOf(parts.find(({ type }) => type === "minute"));
-    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
-      : 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 ((_d = parts.find(({ type }) => (part == "meridiem" ? type === "dayPeriod" : type === part))) === null || _d === void 0 ? void 0 : _d.value) || null;
-}
-function getMeridiem(hour) {
-  if (!isValidNumber(hour)) {
-    return null;
-  }
-  const hourAsNumber = parseInt(hour);
-  return hourAsNumber >= 0 && hourAsNumber <= 11 ? "AM" : "PM";
-}
-function isValidTime(value) {
-  if (!value || value.startsWith(":") || value.endsWith(":")) {
-    return false;
-  }
-  const splitValue = value.split(":");
-  const validLength = splitValue.length > 1 && splitValue.length < 4;
-  if (!validLength) {
-    return false;
-  }
-  const [hour, minute, second] = splitValue;
-  const hourAsNumber = parseInt(splitValue[0]);
-  const minuteAsNumber = parseInt(splitValue[1]);
-  const secondAsNumber = parseInt(splitValue[2]);
-  const hourValid = isValidNumber(hour) && hourAsNumber >= 0 && hourAsNumber < 24;
-  const minuteValid = isValidNumber(minute) && minuteAsNumber >= 0 && minuteAsNumber < 60;
-  const secondValid = isValidNumber(second) && secondAsNumber >= 0 && secondAsNumber < 60;
-  if ((hourValid && minuteValid && !second) || (hourValid && minuteValid && secondValid)) {
-    return true;
-  }
-}
-function isValidTimePart(value, part) {
-  if (part === "meridiem") {
-    return value === "AM" || value === "PM";
-  }
-  if (!isValidNumber(value)) {
-    return false;
-  }
-  const valueAsNumber = Number(value);
-  return part === "hour" ? valueAsNumber >= 0 && valueAsNumber < 24 : valueAsNumber >= 0 && valueAsNumber < 60;
-}
-function localizeTimePart(value, part, locale) {
-  if (!isValidTimePart(value, part)) {
-    return;
-  }
-  const valueAsNumber = parseInt(value);
-  const date = new Date(Date.UTC(0, 0, 0, part === "hour" ? valueAsNumber : part === "meridiem" ? (value === "AM" ? 0 : 12) : 0, part === "minute" ? valueAsNumber : 0, part === "second" ? valueAsNumber : 0));
-  if (!date) {
-    return;
-  }
-  const formatter = createLocaleDateTimeFormatter(locale);
-  const parts = formatter.formatToParts(date);
-  return getLocalizedTimePart(part, parts);
-}
-function localizeTimeString(value, locale = "en", 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);
-  return (formatter === null || formatter === void 0 ? void 0 : formatter.format(dateFromTimeString)) || null;
-}
-function localizeTimeStringToParts(value, locale = "en") {
-  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 parts = formatter.formatToParts(dateFromTimeString);
-    return {
-      localizedHour: getLocalizedTimePart("hour", parts),
-      localizedHourSuffix: getLocalizedTimePart("hourSuffix", parts),
-      localizedMinute: getLocalizedTimePart("minute", parts),
-      localizedMinuteSuffix: getLocalizedTimePart("minuteSuffix", parts),
-      localizedSecond: getLocalizedTimePart("second", parts),
-      localizedSecondSuffix: getLocalizedTimePart("secondSuffix", parts),
-      localizedMeridiem: getLocalizedTimePart("meridiem", parts)
-    };
-  }
-  return null;
-}
-function getTimeParts(value, locale = "en") {
-  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 parts = formatter.formatToParts(dateFromTimeString);
-    return parts;
-  }
-  return null;
-}
-function parseTimeString(value) {
-  if (isValidTime(value)) {
-    const [hour, minute, second] = value.split(":");
-    return {
-      hour,
-      minute,
-      second
-    };
-  }
-  return {
-    hour: null,
-    minute: null,
-    second: null
-  };
+const maxTenthForMinuteAndSecond = 5;
+function createLocaleDateTimeFormatter(locale, includeSeconds = true) {
+  try {
+    const options = {
+      hour: "2-digit",
+      minute: "2-digit",
+      timeZone: "UTC"
+    };
+    if (includeSeconds) {
+      options.second = "2-digit";
+    }
+    return new Intl.DateTimeFormat(locale, options);
+  }
+  catch (error) {
+    throw new Error(`Invalid locale supplied while attempting to create a DateTime formatter: ${locale}`);
+  }
+}
+function formatTimePart(number) {
+  const numberAsString = number.toString();
+  return number >= 0 && number <= 9 ? numberAsString.padStart(2, "0") : numberAsString;
+}
+function formatTimeString(value) {
+  if (!isValidTime(value)) {
+    return null;
+  }
+  const [hourString, minuteString, secondString] = value.split(":");
+  const hour = formatTimePart(parseInt(hourString));
+  const minute = formatTimePart(parseInt(minuteString));
+  if (secondString) {
+    const second = formatTimePart(parseInt(secondString));
+    return `${hour}:${minute}:${second}`;
+  }
+  return `${hour}:${minute}`;
+}
+function getLocaleHourCycle(locale) {
+  const formatter = createLocaleDateTimeFormatter(locale);
+  const parts = formatter.formatToParts(new Date(Date.UTC(0, 0, 0, 0, 0, 0)));
+  return getLocalizedTimePart("meridiem", parts) ? "12" : "24";
+}
+function getLocalizedTimePart(part, parts) {
+  var _a, _b, _c, _d;
+  if (!part || !parts) {
+    return null;
+  }
+  if (part === "hourSuffix") {
+    const hourIndex = parts.indexOf(parts.find(({ type }) => type === "hour"));
+    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
+      : null;
+  }
+  if (part === "minuteSuffix") {
+    const minuteIndex = parts.indexOf(parts.find(({ type }) => type === "minute"));
+    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
+      : 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 ((_d = parts.find(({ type }) => (part == "meridiem" ? type === "dayPeriod" : type === part))) === null || _d === void 0 ? void 0 : _d.value) || null;
+}
+function getMeridiem(hour) {
+  if (!isValidNumber(hour)) {
+    return null;
+  }
+  const hourAsNumber = parseInt(hour);
+  return hourAsNumber >= 0 && hourAsNumber <= 11 ? "AM" : "PM";
+}
+function isValidTime(value) {
+  if (!value || value.startsWith(":") || value.endsWith(":")) {
+    return false;
+  }
+  const splitValue = value.split(":");
+  const validLength = splitValue.length > 1 && splitValue.length < 4;
+  if (!validLength) {
+    return false;
+  }
+  const [hour, minute, second] = splitValue;
+  const hourAsNumber = parseInt(splitValue[0]);
+  const minuteAsNumber = parseInt(splitValue[1]);
+  const secondAsNumber = parseInt(splitValue[2]);
+  const hourValid = isValidNumber(hour) && hourAsNumber >= 0 && hourAsNumber < 24;
+  const minuteValid = isValidNumber(minute) && minuteAsNumber >= 0 && minuteAsNumber < 60;
+  const secondValid = isValidNumber(second) && secondAsNumber >= 0 && secondAsNumber < 60;
+  if ((hourValid && minuteValid && !second) || (hourValid && minuteValid && secondValid)) {
+    return true;
+  }
+}
+function isValidTimePart(value, part) {
+  if (part === "meridiem") {
+    return value === "AM" || value === "PM";
+  }
+  if (!isValidNumber(value)) {
+    return false;
+  }
+  const valueAsNumber = Number(value);
+  return part === "hour" ? valueAsNumber >= 0 && valueAsNumber < 24 : valueAsNumber >= 0 && valueAsNumber < 60;
+}
+function localizeTimePart(value, part, locale) {
+  if (!isValidTimePart(value, part)) {
+    return;
+  }
+  const valueAsNumber = parseInt(value);
+  const date = new Date(Date.UTC(0, 0, 0, part === "hour" ? valueAsNumber : part === "meridiem" ? (value === "AM" ? 0 : 12) : 0, part === "minute" ? valueAsNumber : 0, part === "second" ? valueAsNumber : 0));
+  if (!date) {
+    return;
+  }
+  const formatter = createLocaleDateTimeFormatter(locale);
+  const parts = formatter.formatToParts(date);
+  return getLocalizedTimePart(part, parts);
+}
+function localizeTimeString(value, locale = "en", 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);
+  return (formatter === null || formatter === void 0 ? void 0 : formatter.format(dateFromTimeString)) || null;
+}
+function localizeTimeStringToParts(value, locale = "en") {
+  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 parts = formatter.formatToParts(dateFromTimeString);
+    return {
+      localizedHour: getLocalizedTimePart("hour", parts),
+      localizedHourSuffix: getLocalizedTimePart("hourSuffix", parts),
+      localizedMinute: getLocalizedTimePart("minute", parts),
+      localizedMinuteSuffix: getLocalizedTimePart("minuteSuffix", parts),
+      localizedSecond: getLocalizedTimePart("second", parts),
+      localizedSecondSuffix: getLocalizedTimePart("secondSuffix", parts),
+      localizedMeridiem: getLocalizedTimePart("meridiem", parts)
+    };
+  }
+  return null;
+}
+function getTimeParts(value, locale = "en") {
+  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 parts = formatter.formatToParts(dateFromTimeString);
+    return parts;
+  }
+  return null;
+}
+function parseTimeString(value) {
+  if (isValidTime(value)) {
+    const [hour, minute, second] = value.split(":");
+    return {
+      hour,
+      minute,
+      second
+    };
+  }
+  return {
+    hour: null,
+    minute: null,
+    second: null
+  };
 }
 
 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}: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 InputTimePicker = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.calciteInputTimePickerChange = createEvent(this, "calciteInputTimePickerChange", 7);
-    //--------------------------------------------------------------------------
-    //
-    //  Properties
-    //
-    //--------------------------------------------------------------------------
-    /** The active state of the time input */
-    this.active = false;
-    /** The disabled state of the time input */
-    this.disabled = false;
-    /**
-     * When true, still focusable but controls are gone and the value cannot be modified.
-     *
-     * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
-     */
-    this.readOnly = false;
-    /**
-     * BCP 47 language tag for desired language and country format
-     *
-     * @internal
-     */
-    this.locale = document.documentElement.lang || navigator.language || "en";
-    /**
-     * When true, makes the component required for form-submission.
-     *
-     * @internal
-     */
-    this.required = false;
-    /** The scale (size) of the time input */
-    this.scale = "m";
-    /**
-     * 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";
-    /** number (seconds) that specifies the granularity that the value must adhere to */
-    this.step = 60;
-    /** The selected time 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()}`;
-    //--------------------------------------------------------------------------
-    //
-    //  Event Listeners
-    //
-    //--------------------------------------------------------------------------
-    this.calciteInternalInputBlurHandler = () => {
-      this.active = false;
-      const shouldIncludeSeconds = this.shouldIncludeSeconds();
-      const localizedInputValue = localizeTimeString(this.calciteInputEl.value, this.locale, shouldIncludeSeconds);
-      this.setInputValue(localizedInputValue || localizeTimeString(this.value, this.locale, shouldIncludeSeconds));
-    };
-    this.calciteInternalInputFocusHandler = (event) => {
-      if (!this.readOnly) {
-        this.active = true;
-        event.stopPropagation();
-      }
-    };
-    this.calciteInputInputHandler = (event) => {
-      const target = event.target;
-      this.setValue({ value: target.value });
-    };
-    this.timePickerChangeHandler = (event) => {
-      event.stopPropagation();
-      const target = event.target;
-      const value = target.value;
-      this.setValue({ value, origin: "time-picker" });
-      event.stopPropagation();
-    };
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
-    this.keyDownHandler = ({ defaultPrevented, key }) => {
-      if (key === "Enter" && !defaultPrevented) {
-        submitForm(this);
-      }
-      if (key === "Escape" && this.active) {
-        this.active = false;
-      }
-    };
-    this.setCalcitePopoverEl = (el) => {
-      this.popoverEl = el;
-    };
-    this.setCalciteInputEl = (el) => {
-      this.calciteInputEl = el;
-    };
-    this.setCalciteTimePickerEl = (el) => {
-      this.calciteTimePickerEl = el;
-    };
-    this.setInputValue = (newInputValue) => {
-      if (!this.calciteInputEl) {
-        return;
-      }
-      this.calciteInputEl.value = newInputValue;
-    };
-    this.setValue = ({ value, origin = "input" }) => {
-      const previousValue = this.value;
-      const newValue = formatTimeString(value);
-      const newLocalizedValue = localizeTimeString(newValue, this.locale, this.shouldIncludeSeconds());
-      this.internalValueChange = origin !== "external" && origin !== "loading";
-      const shouldEmit = origin !== "loading" &&
-        origin !== "external" &&
-        ((value !== this.previousValidValue && !value) ||
-          !!(!this.previousValidValue && newValue) ||
-          (newValue !== this.previousValidValue && newValue));
-      if (value) {
-        if (shouldEmit) {
-          this.previousValidValue = newValue;
-        }
-        if (newValue && newValue !== this.value) {
-          this.value = newValue;
-        }
-        this.localizedValue = newLocalizedValue;
-      }
-      else {
-        this.value = value;
-        this.localizedValue = null;
-      }
-      if (origin === "time-picker" || origin === "external") {
-        this.setInputValue(newLocalizedValue);
-      }
-      if (shouldEmit) {
-        const changeEvent = this.calciteInputTimePickerChange.emit();
-        if (changeEvent.defaultPrevented) {
-          this.internalValueChange = false;
-          this.value = previousValue;
-          this.setInputValue(previousValue);
-          this.previousValidValue = previousValue;
-        }
-        else {
-          this.previousValidValue = newValue;
-        }
-      }
-    };
-  }
-  activeHandler() {
-    if (this.disabled || this.readOnly) {
-      this.active = false;
-      return;
-    }
-    this.reposition();
-  }
-  handleDisabledAndReadOnlyChange(value) {
-    if (!value) {
-      this.active = false;
-    }
-  }
-  localeWatcher(newLocale) {
-    this.setInputValue(localizeTimeString(this.value, newLocale, this.shouldIncludeSeconds()));
-  }
-  valueWatcher(newValue) {
-    if (!this.internalValueChange) {
-      this.setValue({ value: newValue, origin: "external" });
-    }
-    this.internalValueChange = false;
-  }
-  clickHandler(event) {
-    if (event.composedPath().includes(this.calciteTimePickerEl)) {
-      return;
-    }
-    this.setFocus();
-  }
-  timePickerBlurHandler(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    this.active = false;
-  }
-  timePickerFocusHandler(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    if (!this.readOnly) {
-      this.active = true;
-    }
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Public Methods
-  //
-  // --------------------------------------------------------------------------
-  /** Sets focus on the component. */
-  async setFocus() {
-    var _a;
-    (_a = this.calciteInputEl) === null || _a === void 0 ? void 0 : _a.setFocus();
-  }
-  /** Updates the position of the component. */
-  async reposition() {
-    var _a;
-    (_a = this.popoverEl) === null || _a === void 0 ? void 0 : _a.reposition();
-  }
-  onLabelClick() {
-    this.setFocus();
-  }
-  shouldIncludeSeconds() {
-    return this.step < 60;
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  //--------------------------------------------------------------------------
-  connectedCallback() {
-    if (this.value) {
-      this.setValue({ value: isValidTime(this.value) ? this.value : undefined, origin: "loading" });
-    }
-    connectLabel(this);
-    connectForm(this);
-  }
-  componentDidLoad() {
-    this.setInputValue(this.localizedValue);
-  }
-  disconnectedCallback() {
-    disconnectLabel(this);
-    disconnectForm(this);
-  }
-  componentDidRender() {
-    updateHostInteraction(this);
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Render Methods
-  //
-  // --------------------------------------------------------------------------
-  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.active, 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.locale, 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 {
-    "active": ["activeHandler"],
-    "disabled": ["handleDisabledAndReadOnlyChange"],
-    "readOnly": ["handleDisabledAndReadOnlyChange"],
-    "locale": ["localeWatcher"],
-    "value": ["valueWatcher"]
-  }; }
-};
+const InputTimePicker = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteInputTimePickerChange = createEvent(this, "calciteInputTimePickerChange", 7);
+    //--------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    //--------------------------------------------------------------------------
+    /** The active state of the time input */
+    this.active = false;
+    /** The disabled state of the time input */
+    this.disabled = false;
+    /**
+     * When true, still focusable but controls are gone and the value cannot be modified.
+     *
+     * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
+     */
+    this.readOnly = false;
+    /**
+     * BCP 47 language tag for desired language and country format
+     *
+     * @internal
+     */
+    this.locale = document.documentElement.lang || navigator.language || "en";
+    /**
+     * When true, makes the component required for form-submission.
+     *
+     * @internal
+     */
+    this.required = false;
+    /** The scale (size) of the time input */
+    this.scale = "m";
+    /**
+     * 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";
+    /** number (seconds) that specifies the granularity that the value must adhere to */
+    this.step = 60;
+    /** The selected time 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()}`;
+    //--------------------------------------------------------------------------
+    //
+    //  Event Listeners
+    //
+    //--------------------------------------------------------------------------
+    this.calciteInternalInputBlurHandler = () => {
+      this.active = false;
+      const shouldIncludeSeconds = this.shouldIncludeSeconds();
+      const localizedInputValue = localizeTimeString(this.calciteInputEl.value, this.locale, shouldIncludeSeconds);
+      this.setInputValue(localizedInputValue || localizeTimeString(this.value, this.locale, shouldIncludeSeconds));
+    };
+    this.calciteInternalInputFocusHandler = (event) => {
+      if (!this.readOnly) {
+        this.active = true;
+        event.stopPropagation();
+      }
+    };
+    this.calciteInputInputHandler = (event) => {
+      const target = event.target;
+      this.setValue({ value: target.value });
+    };
+    this.timePickerChangeHandler = (event) => {
+      event.stopPropagation();
+      const target = event.target;
+      const value = target.value;
+      this.setValue({ value, origin: "time-picker" });
+    };
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    this.keyDownHandler = (event) => {
+      const { defaultPrevented, key } = event;
+      if (defaultPrevented) {
+        return;
+      }
+      if (key === "Enter") {
+        if (submitForm(this)) {
+          event.preventDefault();
+        }
+      }
+      if (key === "Escape" && this.active) {
+        this.active = false;
+        event.preventDefault();
+      }
+    };
+    this.setCalcitePopoverEl = (el) => {
+      this.popoverEl = el;
+    };
+    this.setCalciteInputEl = (el) => {
+      this.calciteInputEl = el;
+    };
+    this.setCalciteTimePickerEl = (el) => {
+      this.calciteTimePickerEl = el;
+    };
+    this.setInputValue = (newInputValue) => {
+      if (!this.calciteInputEl) {
+        return;
+      }
+      this.calciteInputEl.value = newInputValue;
+    };
+    this.setValue = ({ value, origin = "input" }) => {
+      const previousValue = this.value;
+      const newValue = formatTimeString(value);
+      const newLocalizedValue = localizeTimeString(newValue, this.locale, this.shouldIncludeSeconds());
+      this.internalValueChange = origin !== "external" && origin !== "loading";
+      const shouldEmit = origin !== "loading" &&
+        origin !== "external" &&
+        ((value !== this.previousValidValue && !value) ||
+          !!(!this.previousValidValue && newValue) ||
+          (newValue !== this.previousValidValue && newValue));
+      if (value) {
+        if (shouldEmit) {
+          this.previousValidValue = newValue;
+        }
+        if (newValue && newValue !== this.value) {
+          this.value = newValue;
+        }
+        this.localizedValue = newLocalizedValue;
+      }
+      else {
+        this.value = value;
+        this.localizedValue = null;
+      }
+      if (origin === "time-picker" || origin === "external") {
+        this.setInputValue(newLocalizedValue);
+      }
+      if (shouldEmit) {
+        const changeEvent = this.calciteInputTimePickerChange.emit();
+        if (changeEvent.defaultPrevented) {
+          this.internalValueChange = false;
+          this.value = previousValue;
+          this.setInputValue(previousValue);
+          this.previousValidValue = previousValue;
+        }
+        else {
+          this.previousValidValue = newValue;
+        }
+      }
+    };
+  }
+  activeHandler() {
+    if (this.disabled || this.readOnly) {
+      this.active = false;
+      return;
+    }
+    this.reposition();
+  }
+  handleDisabledAndReadOnlyChange(value) {
+    if (!value) {
+      this.active = false;
+    }
+  }
+  localeWatcher(newLocale) {
+    this.setInputValue(localizeTimeString(this.value, newLocale, this.shouldIncludeSeconds()));
+  }
+  valueWatcher(newValue) {
+    if (!this.internalValueChange) {
+      this.setValue({ value: newValue, origin: "external" });
+    }
+    this.internalValueChange = false;
+  }
+  clickHandler(event) {
+    if (event.composedPath().includes(this.calciteTimePickerEl)) {
+      return;
+    }
+    this.setFocus();
+  }
+  timePickerBlurHandler(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.active = false;
+  }
+  timePickerFocusHandler(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    if (!this.readOnly) {
+      this.active = true;
+    }
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+  /** Sets focus on the component. */
+  async setFocus() {
+    var _a;
+    (_a = this.calciteInputEl) === null || _a === void 0 ? void 0 : _a.setFocus();
+  }
+  /** Updates the position of the component. */
+  async reposition() {
+    var _a;
+    (_a = this.popoverEl) === null || _a === void 0 ? void 0 : _a.reposition();
+  }
+  onLabelClick() {
+    this.setFocus();
+  }
+  shouldIncludeSeconds() {
+    return this.step < 60;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  connectedCallback() {
+    if (this.value) {
+      this.setValue({ value: isValidTime(this.value) ? this.value : undefined, origin: "loading" });
+    }
+    connectLabel(this);
+    connectForm(this);
+  }
+  componentDidLoad() {
+    this.setInputValue(this.localizedValue);
+  }
+  disconnectedCallback() {
+    disconnectLabel(this);
+    disconnectForm(this);
+  }
+  componentDidRender() {
+    updateHostInteraction(this);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  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.active, 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.locale, 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 {
+    "active": ["activeHandler"],
+    "disabled": ["handleDisabledAndReadOnlyChange"],
+    "readOnly": ["handleDisabledAndReadOnlyChange"],
+    "locale": ["localeWatcher"],
+    "value": ["valueWatcher"]
+  }; }
+};
 InputTimePicker.style = inputTimePickerCss;
 
-const CSS = {
-  button: "button",
-  buttonBottomLeft: "button--bottom-left",
-  buttonBottomRight: "button--bottom-right",
-  buttonHourDown: "button--hour-down",
-  buttonHourUp: "button--hour-up",
-  buttonMeridiemDown: "button--meridiem-down",
-  buttonMeridiemUp: "button--meridiem-up",
-  buttonMinuteDown: "button--minute-down",
-  buttonMinuteUp: "button--minute-up",
-  buttonSecondDown: "button--second-down",
-  buttonSecondUp: "button--second-up",
-  buttonTopLeft: "button--top-left",
-  buttonTopRight: "button--top-right",
-  column: "column",
-  delimiter: "delimiter",
-  hour: "hour",
-  input: "input",
-  meridiem: "meridiem",
-  minute: "minute",
-  second: "second",
-  showMeridiem: "show-meridiem",
-  showSecond: "show-second",
-  "scale-s": "scale-s",
-  "scale-m": "scale-m",
-  "scale-l": "scale-l",
-  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 CSS = {
+  button: "button",
+  buttonBottomLeft: "button--bottom-left",
+  buttonBottomRight: "button--bottom-right",
+  buttonHourDown: "button--hour-down",
+  buttonHourUp: "button--hour-up",
+  buttonMeridiemDown: "button--meridiem-down",
+  buttonMeridiemUp: "button--meridiem-up",
+  buttonMinuteDown: "button--minute-down",
+  buttonMinuteUp: "button--minute-up",
+  buttonSecondDown: "button--second-down",
+  buttonSecondUp: "button--second-up",
+  buttonTopLeft: "button--top-left",
+  buttonTopRight: "button--top-right",
+  column: "column",
+  delimiter: "delimiter",
+  hour: "hour",
+  input: "input",
+  meridiem: "meridiem",
+  minute: "minute",
+  second: "second",
+  showMeridiem: "show-meridiem",
+  showSecond: "show-second",
+  "scale-s": "scale-s",
+  "scale-m": "scale-m",
+  "scale-l": "scale-l",
+  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 = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{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}";
 
-function capitalize(str) {
-  return str.charAt(0).toUpperCase() + str.slice(1);
-}
-const TimePicker = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.calciteInternalTimePickerBlur = createEvent(this, "calciteInternalTimePickerBlur", 7);
-    this.calciteInternalTimePickerChange = createEvent(this, "calciteInternalTimePickerChange", 7);
-    this.calciteInternalTimePickerFocus = createEvent(this, "calciteInternalTimePickerFocus", 7);
-    //--------------------------------------------------------------------------
-    //
-    //  Properties
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * aria-label for the hour input
-     *
-     * @default "Hour"
-     */
-    this.intlHour = TEXT.hour;
-    /**
-     * aria-label for the hour down button
-     *
-     * @default "Decrease hour"
-     */
-    this.intlHourDown = TEXT.hourDown;
-    /**
-     * aria-label for the hour up button
-     *
-     * @default "Increase hour"
-     */
-    this.intlHourUp = TEXT.hourUp;
-    /**
-     * aria-label for the meridiem (am/pm) input
-     *
-     * @default "AM/PM"
-     */
-    this.intlMeridiem = TEXT.meridiem;
-    /**
-     * aria-label for the meridiem (am/pm) down button
-     *
-     * @default "Decrease AM/PM"
-     */
-    this.intlMeridiemDown = TEXT.meridiemDown;
-    /**
-     * aria-label for the meridiem (am/pm) up button
-     *
-     * @default "Increase AM/PM"
-     */
-    this.intlMeridiemUp = TEXT.meridiemUp;
-    /**
-     * aria-label for the minute input
-     *
-     * @default "Minute"
-     */
-    this.intlMinute = TEXT.minute;
-    /**
-     * aria-label for the minute down button
-     *
-     * @default "Decrease minute"
-     */
-    this.intlMinuteDown = TEXT.minuteDown;
-    /**
-     * aria-label for the minute up button
-     *
-     * @default "Increase minute"
-     */
-    this.intlMinuteUp = TEXT.minuteUp;
-    /**
-     * aria-label for the second input
-     *
-     * @default "Second"
-     */
-    this.intlSecond = TEXT.second;
-    /**
-     * aria-label for the second down button
-     *
-     * @default "Decrease second"
-     */
-    this.intlSecondDown = TEXT.secondDown;
-    /**
-     * aria-label for the second up button
-     *
-     * @default "Increase second"
-     */
-    this.intlSecondUp = TEXT.secondUp;
-    /**
-     * BCP 47 language tag for desired language and country format
-     *
-     * @internal
-     */
-    this.locale = document.documentElement.lang || navigator.language || "en";
-    /** The scale (size) of the time picker */
-    this.scale = "m";
-    /** number (seconds) that specifies the granularity that the value must adhere to */
-    this.step = 60;
-    /** The selected time in UTC (always 24-hour format) */
-    this.value = null;
-    this.showSecond = this.step < 60;
-    this.decrementHour = () => {
-      const newHour = !this.hour ? 0 : this.hour === "00" ? 23 : parseInt(this.hour) - 1;
-      this.setValuePart("hour", newHour);
-    };
-    this.decrementMeridiem = () => {
-      const newMeridiem = this.meridiem === "PM" ? "AM" : "PM";
-      this.setValuePart("meridiem", newMeridiem);
-    };
-    this.decrementMinuteOrSecond = (key) => {
-      let newValue;
-      if (isValidNumber(this[key])) {
-        const valueAsNumber = parseInt(this[key]);
-        newValue = valueAsNumber === 0 ? 59 : valueAsNumber - 1;
-      }
-      else {
-        newValue = 59;
-      }
-      this.setValuePart(key, newValue);
-    };
-    this.decrementMinute = () => {
-      this.decrementMinuteOrSecond("minute");
-    };
-    this.decrementSecond = () => {
-      this.decrementMinuteOrSecond("second");
-    };
-    this.focusHandler = (event) => {
-      this.activeEl = event.currentTarget;
-    };
-    this.hourDownButtonKeyDownHandler = (event) => {
-      if (this.buttonActivated(event)) {
-        this.decrementHour();
-      }
-    };
-    this.hourKeyDownHandler = (event) => {
-      const key = event.key;
-      if (numberKeys.includes(key)) {
-        const keyAsNumber = parseInt(key);
-        let newHour;
-        if (isValidNumber(this.hour)) {
-          switch (this.hourCycle) {
-            case "12":
-              newHour =
-                this.hour === "01" && keyAsNumber >= 0 && keyAsNumber <= 2
-                  ? `1${keyAsNumber}`
-                  : keyAsNumber;
-              break;
-            case "24":
-              if (this.hour === "01") {
-                newHour = `1${keyAsNumber}`;
-              }
-              else if (this.hour === "02" && keyAsNumber >= 0 && keyAsNumber <= 3) {
-                newHour = `2${keyAsNumber}`;
-              }
-              else {
-                newHour = keyAsNumber;
-              }
-              break;
-          }
-        }
-        else {
-          newHour = keyAsNumber;
-        }
-        this.setValuePart("hour", newHour);
-      }
-      else {
-        switch (key) {
-          case "Backspace":
-          case "Delete":
-            this.setValuePart("hour", null);
-            break;
-          case "ArrowDown":
-            event.preventDefault();
-            this.decrementHour();
-            break;
-          case "ArrowUp":
-            event.preventDefault();
-            this.incrementHour();
-            break;
-          case " ":
-          case "Spacebar":
-            event.preventDefault();
-            break;
-        }
-      }
-    };
-    this.hourUpButtonKeyDownHandler = (event) => {
-      if (this.buttonActivated(event)) {
-        this.incrementHour();
-      }
-    };
-    this.incrementMeridiem = () => {
-      const newMeridiem = this.meridiem === "AM" ? "PM" : "AM";
-      this.setValuePart("meridiem", newMeridiem);
-    };
-    this.incrementHour = () => {
-      const newHour = isValidNumber(this.hour)
-        ? this.hour === "23"
-          ? 0
-          : parseInt(this.hour) + 1
-        : 1;
-      this.setValuePart("hour", newHour);
-    };
-    this.incrementMinuteOrSecond = (key) => {
-      const newValue = isValidNumber(this[key])
-        ? this[key] === "59"
-          ? 0
-          : parseInt(this[key]) + 1
-        : 0;
-      this.setValuePart(key, newValue);
-    };
-    this.incrementMinute = () => {
-      this.incrementMinuteOrSecond("minute");
-    };
-    this.incrementSecond = () => {
-      this.incrementMinuteOrSecond("second");
-    };
-    this.meridiemDownButtonKeyDownHandler = (event) => {
-      if (this.buttonActivated(event)) {
-        this.decrementMeridiem();
-      }
-    };
-    this.meridiemKeyDownHandler = (event) => {
-      switch (event.key) {
-        case "a":
-          this.setValuePart("meridiem", "AM");
-          break;
-        case "p":
-          this.setValuePart("meridiem", "PM");
-          break;
-        case "Backspace":
-        case "Delete":
-          this.setValuePart("meridiem", null);
-          break;
-        case "ArrowUp":
-          event.preventDefault();
-          this.incrementMeridiem();
-          break;
-        case "ArrowDown":
-          event.preventDefault();
-          this.decrementMeridiem();
-          break;
-        case " ":
-        case "Spacebar":
-          event.preventDefault();
-          break;
-      }
-    };
-    this.meridiemUpButtonKeyDownHandler = (event) => {
-      if (this.buttonActivated(event)) {
-        this.incrementMeridiem();
-      }
-    };
-    this.minuteDownButtonKeyDownHandler = (event) => {
-      if (this.buttonActivated(event)) {
-        this.decrementMinute();
-      }
-    };
-    this.minuteKeyDownHandler = (event) => {
-      const key = event.key;
-      if (numberKeys.includes(key)) {
-        const keyAsNumber = parseInt(key);
-        let newMinute;
-        if (isValidNumber(this.minute) && this.minute.startsWith("0")) {
-          const minuteAsNumber = parseInt(this.minute);
-          newMinute =
-            minuteAsNumber > maxTenthForMinuteAndSecond
-              ? keyAsNumber
-              : `${minuteAsNumber}${keyAsNumber}`;
-        }
-        else {
-          newMinute = keyAsNumber;
-        }
-        this.setValuePart("minute", newMinute);
-      }
-      else {
-        switch (key) {
-          case "Backspace":
-          case "Delete":
-            this.setValuePart("minute", null);
-            break;
-          case "ArrowDown":
-            event.preventDefault();
-            this.decrementMinute();
-            break;
-          case "ArrowUp":
-            event.preventDefault();
-            this.incrementMinute();
-            break;
-          case " ":
-          case "Spacebar":
-            event.preventDefault();
-            break;
-        }
-      }
-    };
-    this.minuteUpButtonKeyDownHandler = (event) => {
-      if (this.buttonActivated(event)) {
-        this.incrementMinute();
-      }
-    };
-    this.secondDownButtonKeyDownHandler = (event) => {
-      if (this.buttonActivated(event)) {
-        this.decrementSecond();
-      }
-    };
-    this.secondKeyDownHandler = (event) => {
-      const key = event.key;
-      if (numberKeys.includes(key)) {
-        const keyAsNumber = parseInt(key);
-        let newSecond;
-        if (isValidNumber(this.second) && this.second.startsWith("0")) {
-          const secondAsNumber = parseInt(this.second);
-          newSecond =
-            secondAsNumber > maxTenthForMinuteAndSecond
-              ? keyAsNumber
-              : `${secondAsNumber}${keyAsNumber}`;
-        }
-        else {
-          newSecond = keyAsNumber;
-        }
-        this.setValuePart("second", newSecond);
-      }
-      else {
-        switch (key) {
-          case "Backspace":
-          case "Delete":
-            this.setValuePart("second", null);
-            break;
-          case "ArrowDown":
-            event.preventDefault();
-            this.decrementSecond();
-            break;
-          case "ArrowUp":
-            event.preventDefault();
-            this.incrementSecond();
-            break;
-          case " ":
-          case "Spacebar":
-            event.preventDefault();
-            break;
-        }
-      }
-    };
-    this.secondUpButtonKeyDownHandler = (event) => {
-      if (this.buttonActivated(event)) {
-        this.incrementSecond();
-      }
-    };
-    this.setHourEl = (el) => (this.hourEl = el);
-    this.setMeridiemEl = (el) => (this.meridiemEl = el);
-    this.setMinuteEl = (el) => (this.minuteEl = el);
-    this.setSecondEl = (el) => (this.secondEl = el);
-    this.setValue = (value, emit = true) => {
-      if (isValidTime(value)) {
-        const { hour, minute, second } = parseTimeString(value);
-        const { localizedHour, localizedHourSuffix, localizedMinute, localizedMinuteSuffix, localizedSecond, localizedSecondSuffix, localizedMeridiem } = localizeTimeStringToParts(value, this.locale);
-        this.localizedHour = localizedHour;
-        this.localizedHourSuffix = localizedHourSuffix;
-        this.localizedMinute = localizedMinute;
-        this.localizedMinuteSuffix = localizedMinuteSuffix;
-        this.localizedSecond = localizedSecond;
-        this.localizedSecondSuffix = localizedSecondSuffix;
-        this.hour = hour;
-        this.minute = minute;
-        this.second = second;
-        if (localizedMeridiem) {
-          this.localizedMeridiem = localizedMeridiem;
-          this.meridiem = getMeridiem(this.hour);
-          const formatParts = getTimeParts(value, this.locale);
-          this.meridiemOrder = this.getMeridiemOrder(formatParts);
-        }
-      }
-      else {
-        this.hour = null;
-        this.localizedHour = null;
-        this.localizedHourSuffix = null;
-        this.localizedMeridiem = null;
-        this.localizedMinute = null;
-        this.localizedMinuteSuffix = null;
-        this.localizedSecond = null;
-        this.localizedSecondSuffix = null;
-        this.meridiem = null;
-        this.minute = null;
-        this.second = null;
-        this.value = null;
-      }
-      if (emit) {
-        this.calciteInternalTimePickerChange.emit();
-      }
-    };
-    this.setValuePart = (key, value, emit = true) => {
-      var _a;
-      if (key === "meridiem") {
-        this.meridiem = value;
-        if (isValidNumber(this.hour)) {
-          const hourAsNumber = parseInt(this.hour);
-          switch (value) {
-            case "AM":
-              if (hourAsNumber >= 12) {
-                this.hour = formatTimePart(hourAsNumber - 12);
-              }
-              break;
-            case "PM":
-              if (hourAsNumber < 12) {
-                this.hour = formatTimePart(hourAsNumber + 12);
-              }
-              break;
-          }
-          this.localizedHour = localizeTimePart(this.hour, "hour", this.locale);
-        }
-      }
-      else {
-        this[key] = typeof value === "number" ? formatTimePart(value) : value;
-        this[`localized${capitalize(key)}`] = localizeTimePart(this[key], key, this.locale);
-      }
-      if (this.hour && this.minute) {
-        const showSeconds = this.second && this.showSecond;
-        this.value = `${this.hour}:${this.minute}:${showSeconds ? this.second : "00"}`;
-      }
-      else {
-        this.value = null;
-      }
-      this.localizedMeridiem = this.value
-        ? ((_a = localizeTimeStringToParts(this.value, this.locale)) === null || _a === void 0 ? void 0 : _a.localizedMeridiem) || null
-        : localizeTimePart(this.meridiem, "meridiem", this.locale);
-      if (emit) {
-        this.calciteInternalTimePickerChange.emit();
-      }
-    };
-  }
-  localeWatcher(newLocale) {
-    this.hourCycle = getLocaleHourCycle(newLocale);
-    this.setValue(this.value, false);
-  }
-  valueWatcher(newValue) {
-    this.setValue(newValue, false);
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Event Listeners
-  //
-  //--------------------------------------------------------------------------
-  hostBlurHandler() {
-    this.calciteInternalTimePickerBlur.emit();
-  }
-  hostFocusHandler() {
-    this.calciteInternalTimePickerFocus.emit();
-  }
-  keyDownHandler(event) {
-    const key = event.key;
-    switch (this.activeEl) {
-      case this.hourEl:
-        if (key === "ArrowRight") {
-          this.setFocus("minute");
-        }
-        break;
-      case this.minuteEl:
-        switch (key) {
-          case "ArrowLeft":
-            this.setFocus("hour");
-            break;
-          case "ArrowRight":
-            if (this.step !== 60) {
-              this.setFocus("second");
-            }
-            else if (this.hourCycle === "12") {
-              this.setFocus("meridiem");
-            }
-            break;
-        }
-        break;
-      case this.secondEl:
-        switch (key) {
-          case "ArrowLeft":
-            this.setFocus("minute");
-            break;
-          case "ArrowRight":
-            if (this.hourCycle === "12") {
-              this.setFocus("meridiem");
-            }
-            break;
-        }
-        break;
-      case this.meridiemEl:
-        switch (key) {
-          case "ArrowLeft":
-            if (this.step !== 60) {
-              this.setFocus("second");
-            }
-            else {
-              this.setFocus("minute");
-            }
-            break;
-        }
-        break;
-    }
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Public Methods
-  //
-  //--------------------------------------------------------------------------
-  /**
-   * 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();
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  // --------------------------------------------------------------------------
-  buttonActivated(event) {
-    const key = event.key;
-    if (key === " ") {
-      event.preventDefault();
-    }
-    return isActivationKey(key);
-  }
-  getMeridiemOrder(formatParts) {
-    const isRTLKind = this.locale === "ar" || this.locale === "he";
-    if (formatParts && !isRTLKind) {
-      const index = formatParts.findIndex((parts) => {
-        return parts.value === this.localizedMeridiem;
-      });
-      return index;
-    }
-    return 0;
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  // --------------------------------------------------------------------------
-  connectedCallback() {
-    this.setValue(this.value, false);
-    this.hourCycle = getLocaleHourCycle(this.locale);
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Render Methods
-  //
-  // --------------------------------------------------------------------------
-  render() {
-    const hourIsNumber = isValidNumber(this.hour);
-    const iconScale = this.scale === "s" || this.scale === "m" ? "s" : "m";
-    const minuteIsNumber = isValidNumber(this.minute);
-    const secondIsNumber = isValidNumber(this.second);
-    const showMeridiem = this.hourCycle === "12";
-    return (h("div", { class: {
-        [CSS.timePicker]: true,
-        [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: {
-        [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: {
-        [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: {
-        [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: {
-        [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: {
-        [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: {
-        [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: {
-        [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: {
-        [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: {
-        [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: {
-        [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: {
-        [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: {
-        [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 }))))));
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "locale": ["localeWatcher"],
-    "value": ["valueWatcher"]
-  }; }
-};
+function capitalize(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+const TimePicker = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteInternalTimePickerBlur = createEvent(this, "calciteInternalTimePickerBlur", 6);
+    this.calciteInternalTimePickerChange = createEvent(this, "calciteInternalTimePickerChange", 6);
+    this.calciteInternalTimePickerFocus = createEvent(this, "calciteInternalTimePickerFocus", 6);
+    //--------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * aria-label for the hour input
+     *
+     * @default "Hour"
+     */
+    this.intlHour = TEXT.hour;
+    /**
+     * aria-label for the hour down button
+     *
+     * @default "Decrease hour"
+     */
+    this.intlHourDown = TEXT.hourDown;
+    /**
+     * aria-label for the hour up button
+     *
+     * @default "Increase hour"
+     */
+    this.intlHourUp = TEXT.hourUp;
+    /**
+     * aria-label for the meridiem (am/pm) input
+     *
+     * @default "AM/PM"
+     */
+    this.intlMeridiem = TEXT.meridiem;
+    /**
+     * aria-label for the meridiem (am/pm) down button
+     *
+     * @default "Decrease AM/PM"
+     */
+    this.intlMeridiemDown = TEXT.meridiemDown;
+    /**
+     * aria-label for the meridiem (am/pm) up button
+     *
+     * @default "Increase AM/PM"
+     */
+    this.intlMeridiemUp = TEXT.meridiemUp;
+    /**
+     * aria-label for the minute input
+     *
+     * @default "Minute"
+     */
+    this.intlMinute = TEXT.minute;
+    /**
+     * aria-label for the minute down button
+     *
+     * @default "Decrease minute"
+     */
+    this.intlMinuteDown = TEXT.minuteDown;
+    /**
+     * aria-label for the minute up button
+     *
+     * @default "Increase minute"
+     */
+    this.intlMinuteUp = TEXT.minuteUp;
+    /**
+     * aria-label for the second input
+     *
+     * @default "Second"
+     */
+    this.intlSecond = TEXT.second;
+    /**
+     * aria-label for the second down button
+     *
+     * @default "Decrease second"
+     */
+    this.intlSecondDown = TEXT.secondDown;
+    /**
+     * aria-label for the second up button
+     *
+     * @default "Increase second"
+     */
+    this.intlSecondUp = TEXT.secondUp;
+    /**
+     * BCP 47 language tag for desired language and country format
+     *
+     * @internal
+     */
+    this.locale = document.documentElement.lang || navigator.language || "en";
+    /** The scale (size) of the time picker */
+    this.scale = "m";
+    /** number (seconds) that specifies the granularity that the value must adhere to */
+    this.step = 60;
+    /** The selected time in UTC (always 24-hour format) */
+    this.value = null;
+    this.showSecond = this.step < 60;
+    this.decrementHour = () => {
+      const newHour = !this.hour ? 0 : this.hour === "00" ? 23 : parseInt(this.hour) - 1;
+      this.setValuePart("hour", newHour);
+    };
+    this.decrementMeridiem = () => {
+      const newMeridiem = this.meridiem === "PM" ? "AM" : "PM";
+      this.setValuePart("meridiem", newMeridiem);
+    };
+    this.decrementMinuteOrSecond = (key) => {
+      let newValue;
+      if (isValidNumber(this[key])) {
+        const valueAsNumber = parseInt(this[key]);
+        newValue = valueAsNumber === 0 ? 59 : valueAsNumber - 1;
+      }
+      else {
+        newValue = 59;
+      }
+      this.setValuePart(key, newValue);
+    };
+    this.decrementMinute = () => {
+      this.decrementMinuteOrSecond("minute");
+    };
+    this.decrementSecond = () => {
+      this.decrementMinuteOrSecond("second");
+    };
+    this.focusHandler = (event) => {
+      this.activeEl = event.currentTarget;
+    };
+    this.hourDownButtonKeyDownHandler = (event) => {
+      if (this.buttonActivated(event)) {
+        this.decrementHour();
+      }
+    };
+    this.hourKeyDownHandler = (event) => {
+      const { key } = event;
+      if (numberKeys.includes(key)) {
+        const keyAsNumber = parseInt(key);
+        let newHour;
+        if (isValidNumber(this.hour)) {
+          switch (this.hourCycle) {
+            case "12":
+              newHour =
+                this.hour === "01" && keyAsNumber >= 0 && keyAsNumber <= 2
+                  ? `1${keyAsNumber}`
+                  : keyAsNumber;
+              break;
+            case "24":
+              if (this.hour === "01") {
+                newHour = `1${keyAsNumber}`;
+              }
+              else if (this.hour === "02" && keyAsNumber >= 0 && keyAsNumber <= 3) {
+                newHour = `2${keyAsNumber}`;
+              }
+              else {
+                newHour = keyAsNumber;
+              }
+              break;
+          }
+        }
+        else {
+          newHour = keyAsNumber;
+        }
+        this.setValuePart("hour", newHour);
+      }
+      else {
+        switch (key) {
+          case "Backspace":
+          case "Delete":
+            this.setValuePart("hour", null);
+            break;
+          case "ArrowDown":
+            event.preventDefault();
+            this.decrementHour();
+            break;
+          case "ArrowUp":
+            event.preventDefault();
+            this.incrementHour();
+            break;
+          case " ":
+            event.preventDefault();
+            break;
+        }
+      }
+    };
+    this.hourUpButtonKeyDownHandler = (event) => {
+      if (this.buttonActivated(event)) {
+        this.incrementHour();
+      }
+    };
+    this.incrementMeridiem = () => {
+      const newMeridiem = this.meridiem === "AM" ? "PM" : "AM";
+      this.setValuePart("meridiem", newMeridiem);
+    };
+    this.incrementHour = () => {
+      const newHour = isValidNumber(this.hour)
+        ? this.hour === "23"
+          ? 0
+          : parseInt(this.hour) + 1
+        : 1;
+      this.setValuePart("hour", newHour);
+    };
+    this.incrementMinuteOrSecond = (key) => {
+      const newValue = isValidNumber(this[key])
+        ? this[key] === "59"
+          ? 0
+          : parseInt(this[key]) + 1
+        : 0;
+      this.setValuePart(key, newValue);
+    };
+    this.incrementMinute = () => {
+      this.incrementMinuteOrSecond("minute");
+    };
+    this.incrementSecond = () => {
+      this.incrementMinuteOrSecond("second");
+    };
+    this.meridiemDownButtonKeyDownHandler = (event) => {
+      if (this.buttonActivated(event)) {
+        this.decrementMeridiem();
+      }
+    };
+    this.meridiemKeyDownHandler = (event) => {
+      switch (event.key) {
+        case "a":
+          this.setValuePart("meridiem", "AM");
+          break;
+        case "p":
+          this.setValuePart("meridiem", "PM");
+          break;
+        case "Backspace":
+        case "Delete":
+          this.setValuePart("meridiem", null);
+          break;
+        case "ArrowUp":
+          event.preventDefault();
+          this.incrementMeridiem();
+          break;
+        case "ArrowDown":
+          event.preventDefault();
+          this.decrementMeridiem();
+          break;
+        case " ":
+          event.preventDefault();
+          break;
+      }
+    };
+    this.meridiemUpButtonKeyDownHandler = (event) => {
+      if (this.buttonActivated(event)) {
+        this.incrementMeridiem();
+      }
+    };
+    this.minuteDownButtonKeyDownHandler = (event) => {
+      if (this.buttonActivated(event)) {
+        this.decrementMinute();
+      }
+    };
+    this.minuteKeyDownHandler = (event) => {
+      const { key } = event;
+      if (numberKeys.includes(key)) {
+        const keyAsNumber = parseInt(key);
+        let newMinute;
+        if (isValidNumber(this.minute) && this.minute.startsWith("0")) {
+          const minuteAsNumber = parseInt(this.minute);
+          newMinute =
+            minuteAsNumber > maxTenthForMinuteAndSecond
+              ? keyAsNumber
+              : `${minuteAsNumber}${keyAsNumber}`;
+        }
+        else {
+          newMinute = keyAsNumber;
+        }
+        this.setValuePart("minute", newMinute);
+      }
+      else {
+        switch (key) {
+          case "Backspace":
+          case "Delete":
+            this.setValuePart("minute", null);
+            break;
+          case "ArrowDown":
+            event.preventDefault();
+            this.decrementMinute();
+            break;
+          case "ArrowUp":
+            event.preventDefault();
+            this.incrementMinute();
+            break;
+          case " ":
+            event.preventDefault();
+            break;
+        }
+      }
+    };
+    this.minuteUpButtonKeyDownHandler = (event) => {
+      if (this.buttonActivated(event)) {
+        this.incrementMinute();
+      }
+    };
+    this.secondDownButtonKeyDownHandler = (event) => {
+      if (this.buttonActivated(event)) {
+        this.decrementSecond();
+      }
+    };
+    this.secondKeyDownHandler = (event) => {
+      const { key } = event;
+      if (numberKeys.includes(key)) {
+        const keyAsNumber = parseInt(key);
+        let newSecond;
+        if (isValidNumber(this.second) && this.second.startsWith("0")) {
+          const secondAsNumber = parseInt(this.second);
+          newSecond =
+            secondAsNumber > maxTenthForMinuteAndSecond
+              ? keyAsNumber
+              : `${secondAsNumber}${keyAsNumber}`;
+        }
+        else {
+          newSecond = keyAsNumber;
+        }
+        this.setValuePart("second", newSecond);
+      }
+      else {
+        switch (key) {
+          case "Backspace":
+          case "Delete":
+            this.setValuePart("second", null);
+            break;
+          case "ArrowDown":
+            event.preventDefault();
+            this.decrementSecond();
+            break;
+          case "ArrowUp":
+            event.preventDefault();
+            this.incrementSecond();
+            break;
+          case " ":
+            event.preventDefault();
+            break;
+        }
+      }
+    };
+    this.secondUpButtonKeyDownHandler = (event) => {
+      if (this.buttonActivated(event)) {
+        this.incrementSecond();
+      }
+    };
+    this.setHourEl = (el) => (this.hourEl = el);
+    this.setMeridiemEl = (el) => (this.meridiemEl = el);
+    this.setMinuteEl = (el) => (this.minuteEl = el);
+    this.setSecondEl = (el) => (this.secondEl = el);
+    this.setValue = (value, emit = true) => {
+      if (isValidTime(value)) {
+        const { hour, minute, second } = parseTimeString(value);
+        const { localizedHour, localizedHourSuffix, localizedMinute, localizedMinuteSuffix, localizedSecond, localizedSecondSuffix, localizedMeridiem } = localizeTimeStringToParts(value, this.locale);
+        this.localizedHour = localizedHour;
+        this.localizedHourSuffix = localizedHourSuffix;
+        this.localizedMinute = localizedMinute;
+        this.localizedMinuteSuffix = localizedMinuteSuffix;
+        this.localizedSecond = localizedSecond;
+        this.localizedSecondSuffix = localizedSecondSuffix;
+        this.hour = hour;
+        this.minute = minute;
+        this.second = second;
+        if (localizedMeridiem) {
+          this.localizedMeridiem = localizedMeridiem;
+          this.meridiem = getMeridiem(this.hour);
+          const formatParts = getTimeParts(value, this.locale);
+          this.meridiemOrder = this.getMeridiemOrder(formatParts);
+        }
+      }
+      else {
+        this.hour = null;
+        this.localizedHour = null;
+        this.localizedHourSuffix = null;
+        this.localizedMeridiem = null;
+        this.localizedMinute = null;
+        this.localizedMinuteSuffix = null;
+        this.localizedSecond = null;
+        this.localizedSecondSuffix = null;
+        this.meridiem = null;
+        this.minute = null;
+        this.second = null;
+        this.value = null;
+      }
+      if (emit) {
+        this.calciteInternalTimePickerChange.emit();
+      }
+    };
+    this.setValuePart = (key, value, emit = true) => {
+      var _a;
+      if (key === "meridiem") {
+        this.meridiem = value;
+        if (isValidNumber(this.hour)) {
+          const hourAsNumber = parseInt(this.hour);
+          switch (value) {
+            case "AM":
+              if (hourAsNumber >= 12) {
+                this.hour = formatTimePart(hourAsNumber - 12);
+              }
+              break;
+            case "PM":
+              if (hourAsNumber < 12) {
+                this.hour = formatTimePart(hourAsNumber + 12);
+              }
+              break;
+          }
+          this.localizedHour = localizeTimePart(this.hour, "hour", this.locale);
+        }
+      }
+      else {
+        this[key] = typeof value === "number" ? formatTimePart(value) : value;
+        this[`localized${capitalize(key)}`] = localizeTimePart(this[key], key, this.locale);
+      }
+      if (this.hour && this.minute) {
+        const showSeconds = this.second && this.showSecond;
+        this.value = `${this.hour}:${this.minute}:${showSeconds ? this.second : "00"}`;
+      }
+      else {
+        this.value = null;
+      }
+      this.localizedMeridiem = this.value
+        ? ((_a = localizeTimeStringToParts(this.value, this.locale)) === null || _a === void 0 ? void 0 : _a.localizedMeridiem) || null
+        : localizeTimePart(this.meridiem, "meridiem", this.locale);
+      if (emit) {
+        this.calciteInternalTimePickerChange.emit();
+      }
+    };
+  }
+  localeWatcher(newLocale) {
+    this.hourCycle = getLocaleHourCycle(newLocale);
+    this.setValue(this.value, false);
+  }
+  valueWatcher(newValue) {
+    this.setValue(newValue, false);
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Event Listeners
+  //
+  //--------------------------------------------------------------------------
+  hostBlurHandler() {
+    this.calciteInternalTimePickerBlur.emit();
+  }
+  hostFocusHandler() {
+    this.calciteInternalTimePickerFocus.emit();
+  }
+  keyDownHandler(event) {
+    const { defaultPrevented, key } = event;
+    if (defaultPrevented) {
+      return;
+    }
+    switch (this.activeEl) {
+      case this.hourEl:
+        if (key === "ArrowRight") {
+          this.setFocus("minute");
+          event.preventDefault();
+        }
+        break;
+      case this.minuteEl:
+        switch (key) {
+          case "ArrowLeft":
+            this.setFocus("hour");
+            event.preventDefault();
+            break;
+          case "ArrowRight":
+            if (this.step !== 60) {
+              this.setFocus("second");
+              event.preventDefault();
+            }
+            else if (this.hourCycle === "12") {
+              this.setFocus("meridiem");
+              event.preventDefault();
+            }
+            break;
+        }
+        break;
+      case this.secondEl:
+        switch (key) {
+          case "ArrowLeft":
+            this.setFocus("minute");
+            event.preventDefault();
+            break;
+          case "ArrowRight":
+            if (this.hourCycle === "12") {
+              this.setFocus("meridiem");
+              event.preventDefault();
+            }
+            break;
+        }
+        break;
+      case this.meridiemEl:
+        switch (key) {
+          case "ArrowLeft":
+            if (this.step !== 60) {
+              this.setFocus("second");
+              event.preventDefault();
+            }
+            else {
+              this.setFocus("minute");
+              event.preventDefault();
+            }
+            break;
+        }
+        break;
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * 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();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+  buttonActivated(event) {
+    const { key } = event;
+    if (key === " ") {
+      event.preventDefault();
+    }
+    return isActivationKey(key);
+  }
+  getMeridiemOrder(formatParts) {
+    const isRTLKind = this.locale === "ar" || this.locale === "he";
+    if (formatParts && !isRTLKind) {
+      const index = formatParts.findIndex((parts) => {
+        return parts.value === this.localizedMeridiem;
+      });
+      return index;
+    }
+    return 0;
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    this.setValue(this.value, false);
+    this.hourCycle = getLocaleHourCycle(this.locale);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    const hourIsNumber = isValidNumber(this.hour);
+    const iconScale = this.scale === "s" || this.scale === "m" ? "s" : "m";
+    const minuteIsNumber = isValidNumber(this.minute);
+    const secondIsNumber = isValidNumber(this.second);
+    const showMeridiem = this.hourCycle === "12";
+    return (h("div", { class: {
+        [CSS.timePicker]: true,
+        [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: {
+        [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: {
+        [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: {
+        [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: {
+        [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: {
+        [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: {
+        [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: {
+        [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: {
+        [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: {
+        [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: {
+        [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: {
+        [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: {
+        [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 }))))));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "locale": ["localeWatcher"],
+    "value": ["valueWatcher"]
+  }; }
+};
 TimePicker.style = timePickerCss;
 
 export { InputTimePicker as calcite_input_time_picker, TimePicker as calcite_time_picker };