@esri/calcite-components 1.0.0-next.317 → 1.0.0-next.320

package/dist/custom-elements/index.js

@@ -1955,6 +1955,28 @@ function throttle$1(func, wait, options) {
   });
 }
 
+const slotChangedMap = new WeakMap();
+function onSlotChange() {
+  forceUpdate(this);
+}
+const eventType = "slotchange";
+/**
+ * Helper to set up a conditional slot component on connectedCallback.
+ */
+function connectConditionalSlotComponent(component) {
+  const boundSlotChange = onSlotChange.bind(component);
+  component.el.shadowRoot.addEventListener(eventType, boundSlotChange);
+  slotChangedMap.set(component, boundSlotChange);
+}
+/**
+ * Helper to tear down a conditional slot component on disconnectedCallback.
+ */
+function disconnectConditionalSlotComponent(component) {
+  const boundSlotChange = slotChangedMap.get(component);
+  component.el.shadowRoot.removeEventListener(eventType, boundSlotChange);
+  slotChangedMap.delete(component);
+}
+
 const calciteActionBarCss = "@-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:300ms}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:host{-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{-ms-flex-item-align:stretch;align-self:stretch;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column;pointer-events:auto;max-width:15vw}:host([overflow-actions-disabled]){overflow-y:auto}:host([expanded]){max-width:20vw}::slotted(calcite-action-group){border-width:0;border-bottom-width:1px;border-style:solid;border-color:var(--calcite-ui-border-2)}::slotted(calcite-action-group:last-child){border-bottom-width:0}.action-group--bottom{padding-bottom:0;-ms-flex-positive:1;flex-grow:1;-ms-flex-pack:end;justify-content:flex-end}";
 
 let CalciteActionBar$1 = class extends HTMLElement$1 {
@@ -2080,11 +2102,13 @@ let CalciteActionBar$1 = class extends HTMLElement$1 {
       (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.observe(el);
     }
     this.conditionallyOverflowActions();
+    connectConditionalSlotComponent(this);
   }
   disconnectedCallback() {
     var _a, _b;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+    disconnectConditionalSlotComponent(this);
   }
   // --------------------------------------------------------------------------
   //
@@ -4277,7 +4301,7 @@ cs.get.rgb = function (string) {
 
 	var abbr = /^#([a-f0-9]{3,4})$/i;
 	var hex = /^#([a-f0-9]{6})([a-f0-9]{2})?$/i;
-	var rgba = /^rgba?\(\s*([+-]?\d+)\s*,?\s*([+-]?\d+)\s*,?\s*([+-]?\d+)\s*(?:[,|\/]\s*([+-]?[\d\.]+)(%?)\s*)?\)$/;
+	var rgba = /^rgba?\(\s*([+-]?\d+)(?=[\s,])\s*(?:,\s*)?([+-]?\d+)(?=[\s,])\s*(?:,\s*)?([+-]?\d+)\s*(?:[,|\/]\s*([+-]?[\d\.]+)(%?)\s*)?\)$/;
 	var per = /^rgba?\(\s*([+-]?[\d\.]+)\%\s*,?\s*([+-]?[\d\.]+)\%\s*,?\s*([+-]?[\d\.]+)\%\s*(?:[,|\/]\s*([+-]?[\d\.]+)(%?)\s*)?\)$/;
 	var keyword = /^(\w+)$/;
 
@@ -4364,7 +4388,7 @@ cs.get.hsl = function (string) {
 		return null;
 	}
 
-	var hsl = /^hsla?\(\s*([+-]?(?:\d{0,3}\.)?\d+)(?:deg)?\s*,?\s*([+-]?[\d\.]+)%\s*,?\s*([+-]?[\d\.]+)%\s*(?:[,|\/]\s*([+-]?[\d\.]+)\s*)?\)$/;
+	var hsl = /^hsla?\(\s*([+-]?(?:\d{0,3}\.)?\d+)(?:deg)?\s*,?\s*([+-]?[\d\.]+)%\s*,?\s*([+-]?[\d\.]+)%\s*(?:[,|\/]\s*([+-]?(?=\.\d|\d)(?:0|[1-9]\d*)?(?:\.\d*)?(?:[eE][+-]?\d+)?)\s*)?\)$/;
 	var match = string.match(hsl);
 
 	if (match) {
@@ -4385,7 +4409,7 @@ cs.get.hwb = function (string) {
 		return null;
 	}
 
-	var hwb = /^hwb\(\s*([+-]?\d{0,3}(?:\.\d+)?)(?:deg)?\s*,\s*([+-]?[\d\.]+)%\s*,\s*([+-]?[\d\.]+)%\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/;
+	var hwb = /^hwb\(\s*([+-]?\d{0,3}(?:\.\d+)?)(?:deg)?\s*,\s*([+-]?[\d\.]+)%\s*,\s*([+-]?[\d\.]+)%\s*(?:,\s*([+-]?(?=\.\d|\d)(?:0|[1-9]\d*)?(?:\.\d*)?(?:[eE][+-]?\d+)?)\s*)?\)$/;
 	var match = string.match(hwb);
 
 	if (match) {
@@ -13682,6 +13706,72 @@ let CalciteInputMessage$1 = class extends HTMLElement$1 {
 };
 
 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 (e) {
+    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;
@@ -13689,51 +13779,93 @@ function getMeridiem(hour) {
   const hourAsNumber = parseInt(hour);
   return hourAsNumber >= 0 && hourAsNumber <= 11 ? "AM" : "PM";
 }
-function getMeridiemHour(hour) {
-  if (!isValidNumber(hour)) {
-    return null;
+function isValidTime(value) {
+  if (!value || value.startsWith(":") || value.endsWith(":")) {
+    return false;
   }
-  const hourAsNumber = parseInt(hour);
-  if (hourAsNumber === 0) {
-    return "12";
+  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;
   }
-  return hourAsNumber > 12 ? formatTimePart(hourAsNumber - 12) : hour;
 }
-function parseTimeString(value) {
-  const timeString = formatTimeString(value);
-  const [hour, minute, second] = timeString ? timeString.split(":") : [null, null, null];
-  return {
-    hour,
-    minute,
-    second: second || (hour && minute ? "00" : null)
-  };
+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 formatTimeString(value) {
-  if (!value || value.endsWith(":") || value.startsWith(":")) {
+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 splitValue = value.split(":");
-  if (splitValue.length > 1) {
-    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)) {
-      let newValue = `${formatTimePart(hourAsNumber)}:${formatTimePart(minuteAsNumber)}`;
-      if (secondValid) {
-        newValue = `${newValue}:${formatTimePart(secondAsNumber)}`;
-      }
-      return newValue;
-    }
+  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 formatTimePart(number) {
-  const numberAsString = number.toString();
-  return number >= 0 && number <= 9 ? numberAsString.padStart(2, "0") : numberAsString;
+function parseTimeString(value) {
+  if (isValidTime(value)) {
+    const [hour, minute, second] = value.split(":");
+    return {
+      hour,
+      minute,
+      second
+    };
+  }
+  return {
+    hour: null,
+    minute: null,
+    second: null
+  };
 }
 
 const calciteInputTimePickerCss = "@-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:300ms}.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-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}::slotted(input[slot=hidden-form-input]){bottom:0 !important;left:0 !important;margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;right:0 !important;top:0 !important;-webkit-transform:none !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}";
@@ -13753,8 +13885,11 @@ let CalciteInputTimePicker$1 = class extends HTMLElement$1 {
     this.active = false;
     /** The disabled state of the time input */
     this.disabled = false;
-    /** Format of the hour value (12-hour or 24-hour) (this will be replaced by locale eventually) */
-    this.hourDisplayFormat = "12";
+    /**
+     * 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.
      *
@@ -13778,56 +13913,60 @@ let CalciteInputTimePicker$1 = class extends HTMLElement$1 {
     //--------------------------------------------------------------------------
     this.calciteInputBlurHandler = () => {
       this.active = false;
-      const newValue = formatTimeString(this.calciteInputEl.value) || formatTimeString(this.value);
-      if (newValue !== this.calciteInputEl.value) {
-        this.setInputValue(newValue);
-      }
+      const shouldIncludeSeconds = this.shouldIncludeSeconds();
+      const localizedInputValue = localizeTimeString(this.calciteInputEl.value, this.locale, shouldIncludeSeconds);
+      this.setInputValue(localizedInputValue || localizeTimeString(this.value, this.locale, shouldIncludeSeconds));
     };
     this.calciteInputFocusHandler = () => {
       this.active = true;
     };
     this.calciteInputInputHandler = (event) => {
-      this.setValue({ value: event.detail.value });
+      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" });
     };
     this.setCalciteInputEl = (el) => {
       this.calciteInputEl = el;
     };
+    this.setCalciteTimePickerEl = (el) => {
+      this.calciteTimePickerEl = el;
+    };
     this.setInputValue = (newInputValue) => {
       if (!this.calciteInputEl) {
         return;
       }
-      if (this.hourDisplayFormat === "12") {
-        const { hour, minute, second } = parseTimeString(newInputValue);
-        this.calciteInputEl.value = newInputValue
-          ? `${getMeridiemHour(hour)}:${minute}${this.step !== 60 ? ":" + second : ""} ${getMeridiem(hour)}`
-          : null;
-      }
-      else {
-        this.calciteInputEl.value = newInputValue;
-      }
+      this.calciteInputEl.value = newInputValue;
     };
     this.setValue = ({ value, origin = "input" }) => {
       const previousValue = this.value;
-      const validatedNewValue = formatTimeString(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 && validatedNewValue) ||
-          (validatedNewValue !== this.previousValidValue && validatedNewValue));
+          !!(!this.previousValidValue && newValue) ||
+          (newValue !== this.previousValidValue && newValue));
       if (value) {
         if (shouldEmit) {
-          this.previousValidValue = validatedNewValue;
+          this.previousValidValue = newValue;
         }
-        if (validatedNewValue && validatedNewValue !== this.value) {
-          this.value = validatedNewValue;
+        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(validatedNewValue);
+        this.setInputValue(newLocalizedValue);
       }
       if (shouldEmit) {
         const changeEvent = this.calciteInputTimePickerChange.emit();
@@ -13838,17 +13977,26 @@ let CalciteInputTimePicker$1 = class extends HTMLElement$1 {
           this.previousValidValue = previousValue;
         }
         else {
-          this.previousValidValue = validatedNewValue;
+          this.previousValidValue = newValue;
         }
       }
     };
   }
+  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();
+  }
   keyUpHandler(event) {
     if (event.key === "Escape" && this.active) {
       this.active = false;
@@ -13859,21 +14007,6 @@ let CalciteInputTimePicker$1 = class extends HTMLElement$1 {
     event.stopPropagation();
     this.active = false;
   }
-  timePickerChangeHandler(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    if (event.detail) {
-      const { hour, minute, second } = event.detail;
-      let value;
-      if (hour && minute) {
-        value = second && this.step !== 60 ? `${hour}:${minute}:${second}` : `${hour}:${minute}`;
-      }
-      else {
-        value = "";
-      }
-      this.setValue({ value, origin: "time-picker" });
-    }
-  }
   timePickerFocusHandler(event) {
     event.preventDefault();
     event.stopPropagation();
@@ -13896,6 +14029,9 @@ let CalciteInputTimePicker$1 = class extends HTMLElement$1 {
   onLabelClick() {
     this.setFocus();
   }
+  shouldIncludeSeconds() {
+    return this.step < 60;
+  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -13903,15 +14039,13 @@ let CalciteInputTimePicker$1 = class extends HTMLElement$1 {
   //--------------------------------------------------------------------------
   connectedCallback() {
     if (this.value) {
-      this.setValue({ value: this.value, origin: "loading" });
+      this.setValue({ value: isValidTime(this.value) ? this.value : undefined, origin: "loading" });
     }
     connectLabel(this);
     connectForm(this);
   }
   componentDidLoad() {
-    if (this.calciteInputEl.value !== this.value) {
-      this.setInputValue(this.value);
-    }
+    this.setInputValue(this.localizedValue);
   }
   disconnectedCallback() {
     disconnectLabel(this);
@@ -13923,12 +14057,12 @@ let CalciteInputTimePicker$1 = class extends HTMLElement$1 {
   //
   // --------------------------------------------------------------------------
   render() {
-    const { hour, minute, second } = parseTimeString(this.value);
     const popoverId = `${this.referenceElementId}-popover`;
-    return (h(Host, null, 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), onCalciteInputBlur: this.calciteInputBlurHandler, onCalciteInputFocus: this.calciteInputFocusHandler, onCalciteInputInput: this.calciteInputInputHandler, ref: this.setCalciteInputEl, scale: this.scale, step: this.step })), h("calcite-popover", { id: popoverId, label: "Time Picker", open: this.active || false, referenceElement: this.referenceElementId }, h("calcite-time-picker", { hour: hour, "hour-display-format": this.hourDisplayFormat, 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, minute: minute, scale: this.scale, second: second, step: this.step })), h(HiddenFormInputSlot, { component: this })));
+    return (h(Host, null, 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), onCalciteInputBlur: this.calciteInputBlurHandler, onCalciteInputFocus: this.calciteInputFocusHandler, onCalciteInputInput: this.calciteInputInputHandler, ref: this.setCalciteInputEl, scale: this.scale, step: this.step })), h("calcite-popover", { id: popoverId, label: "Time Picker", open: this.active || false, referenceElement: this.referenceElementId }, 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, onCalciteTimePickerChange: this.timePickerChangeHandler, ref: this.setCalciteTimePickerEl, scale: this.scale, step: this.step, value: this.value })), h(HiddenFormInputSlot, { component: this })));
   }
   get el() { return this; }
   static get watchers() { return {
+    "locale": ["localeWatcher"],
     "value": ["valueWatcher"]
   }; }
   static get style() { return calciteInputTimePickerCss; }
@@ -15115,7 +15249,7 @@ let CalcitePanel$1 = class extends HTMLElement$1 {
     this.setBackRef = (node) => {
       this.backButtonEl = node;
     };
-    this.panelKeyUpHandler = (event) => {
+    this.panelKeyDownHandler = (event) => {
       if (event.key === "Escape") {
         this.dismiss();
       }
@@ -15232,12 +15366,12 @@ let CalcitePanel$1 = class extends HTMLElement$1 {
     return (h("div", { class: CSS$j.fabContainer }, h("slot", { name: SLOTS$c.fab })));
   }
   render() {
-    const { dismissed, disabled, dismissible, el, loading, panelKeyUpHandler } = this;
+    const { dismissed, disabled, dismissible, el, loading, panelKeyDownHandler } = this;
     const rtl = getElementDir(el) === "rtl";
     const panelNode = (h("article", { "aria-busy": loading.toString(), class: {
         [CSS$j.container]: true,
         [CSS_UTILITY.rtl]: rtl
-      }, hidden: dismissible && dismissed, onKeyUp: panelKeyUpHandler, ref: this.setContainerRef, tabIndex: dismissible ? 0 : -1 }, this.renderHeaderNode(), this.renderContent(), this.renderFooterSlottedContent() || this.renderFooterActions()));
+      }, hidden: dismissible && dismissed, onKeyDown: panelKeyDownHandler, ref: this.setContainerRef, tabIndex: dismissible ? 0 : -1 }, this.renderHeaderNode(), this.renderContent(), this.renderFooterSlottedContent() || this.renderFooterActions()));
     return (h(Fragment, null, loading || disabled ? h("calcite-scrim", { loading: loading }) : null, panelNode));
   }
   get el() { return this; }
@@ -22919,26 +23053,32 @@ let CalciteTileSelectGroup$1 = class extends HTMLElement$1 {
 };
 
 const CSS$5 = {
+  button: "button",
   buttonBottomLeft: "button--bottom-left",
   buttonBottomRight: "button--bottom-right",
-  button: "button",
-  delimiter: "delimiter",
-  hour: "hour",
   buttonHourDown: "button--hour-down",
   buttonHourUp: "button--hour-up",
-  input: "input",
-  meridiem: "meridiem",
   buttonMeridiemDown: "button--meridiem-down",
   buttonMeridiemUp: "button--meridiem-up",
-  minute: "minute",
   buttonMinuteDown: "button--minute-down",
   buttonMinuteUp: "button--minute-up",
-  second: "second",
   buttonSecondDown: "button--second-down",
   buttonSecondUp: "button--second-up",
-  timePicker: "time-picker",
   buttonTopLeft: "button--top-left",
-  buttonTopRight: "button--top-right"
+  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"
 };
 const TEXT$2 = {
   hour: "Hour",
@@ -22955,8 +23095,11 @@ const TEXT$2 = {
   secondUp: "Increase second"
 };
 
-const calciteTimePickerCss = "@-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:300ms}.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-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{color:var(--calcite-ui-text-1);display:inline-block;font-weight:var(--calcite-font-weight-medium);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.time-picker{-webkit-box-shadow:0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);box-shadow:0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;border-radius:var(--calcite-border-radius)}span{-ms-flex-align:center;align-items:center;background-color:var(--calcite-ui-foreground-1);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center}span.button{cursor:pointer}span.button:hover,span.button:focus{background-color:var(--calcite-ui-foreground-2)}span.button:focus{outline:2px solid transparent;outline-offset:2px}span.button:active{background-color:var(--calcite-ui-foreground-3)}span.button.top-left{border-top-left-radius:var(--calcite-border-radius)}span.button.bottom-left{border-bottom-left-radius:var(--calcite-border-radius)}span.button.top-right{border-top-right-radius:var(--calcite-border-radius)}span.button.bottom-right{border-bottom-right-radius:var(--calcite-border-radius)}span.button calcite-icon{color:var(--calcite-ui-text-3)}span.input{font-weight:var(--calcite-font-weight-medium);position:relative}span.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)}span.input:focus,span.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)}:host([scale=s]){font-size:var(--calcite-font-size--1)}:host([scale=s]) span{height:24px;width:40px}:host([scale=s]) .delimiter{height:72px}:host([scale=s][hour-display-format=\"12\"]) .time-picker{width:124.2px}:host([scale=s][hour-display-format=\"12\"]:not([step=\"60\"])) .time-picker{width:168px}:host([scale=s][hour-display-format=\"24\"]) .time-picker{width:84.2px}:host([scale=s][hour-display-format=\"24\"]:not([step=\"60\"])) .time-picker{width:128.4px}:host([scale=m]){font-size:var(--calcite-font-size-0)}:host([scale=m]) span{height:32px;width:44px}:host([scale=m]) .delimiter{height:96px}:host([scale=m][hour-display-format=\"12\"]) .time-picker{width:136.8px}:host([scale=m][hour-display-format=\"12\"]:not([step=\"60\"])) .time-picker{width:186px}:host([scale=m][hour-display-format=\"24\"]) .time-picker{width:92.8px}:host([scale=m][hour-display-format=\"24\"]:not([step=\"60\"])) .time-picker{width:141.6px}:host([scale=l]){font-size:var(--calcite-font-size-1)}:host([scale=l]) span{height:48px;width:64px}:host([scale=l]) .delimiter{height:144px}:host([scale=l][hour-display-format=\"12\"]) .time-picker{width:198px}:host([scale=l][hour-display-format=\"12\"]:not([step=\"60\"])) .time-picker{width:268px}:host([scale=l][hour-display-format=\"24\"]) .time-picker{width:134px}:host([scale=l][hour-display-format=\"24\"]:not([step=\"60\"])) .time-picker{width:204px}";
+const calciteTimePickerCss = "@-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:300ms}.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-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{display:inline-block}.time-picker{background-color:var(--calcite-ui-foreground-1);display:-ms-flexbox;display:flex;font-weight:var(--calcite-font-weight-medium);-ms-flex-align:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-shadow:0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);box-shadow:0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);color:var(--calcite-ui-text-1);border-radius:var(--calcite-border-radius)}.time-picker .column{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.time-picker .button{background-color:var(--calcite-ui-foreground-1);cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.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-top-left-radius:var(--calcite-border-radius)}.time-picker .button.bottom-left{border-bottom-left-radius:var(--calcite-border-radius)}.time-picker .button.top-right{border-top-right-radius:var(--calcite-border-radius)}.time-picker .button.bottom-right{border-bottom-right-radius:var(--calcite-border-radius)}.time-picker .button calcite-icon{color:var(--calcite-ui-text-3)}.time-picker .input{background-color:var(--calcite-ui-foreground-1);cursor:pointer;font-weight:var(--calcite-font-weight-medium);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.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-left:0.75rem;padding-right:0.75rem;padding-top:0.25rem;padding-bottom: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-left:1rem;padding-right:1rem;padding-top:0.5rem;padding-bottom: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-left:1.25rem;padding-right:1.25rem;padding-top:0.75rem;padding-bottom: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);
+}
 let CalciteTimePicker$1 = class extends HTMLElement$1 {
   constructor() {
     super();
@@ -22970,10 +23113,6 @@ let CalciteTimePicker$1 = class extends HTMLElement$1 {
     //  Properties
     //
     //--------------------------------------------------------------------------
-    /** The hour value (24-hour format) */
-    this.hour = null;
-    /** Format of the hour value (12-hour or 24-hour) (this will be replaced by locale eventually) */
-    this.hourDisplayFormat = "12";
     /** aria-label for the hour input
      * @default "Hour"
      */
@@ -23022,35 +23161,25 @@ let CalciteTimePicker$1 = class extends HTMLElement$1 {
      * @default "Increase second"
      */
     this.intlSecondUp = TEXT$2.secondUp;
-    /** The minute value */
-    this.minute = null;
-    /** The second value */
-    this.second = null;
+    /**
+     * 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 that specifies the granularity that the value must adhere to */
     this.step = 60;
-    this.timeChanged = false;
-    // --------------------------------------------------------------------------
-    //
-    //  State
-    //
-    // --------------------------------------------------------------------------
-    /** The am/pm value */
-    this.meridiem = null;
-    this.displayHour = this.getDisplayHour();
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
+    /** The selected time in UTC */
+    this.value = null;
+    this.showSecond = this.step < 60;
     this.decrementHour = () => {
       const newHour = !this.hour ? 0 : this.hour === "00" ? 23 : parseInt(this.hour) - 1;
-      this.setTime("hour", newHour);
+      this.setValuePart("hour", newHour);
     };
     this.decrementMeridiem = () => {
       const newMeridiem = this.meridiem === "PM" ? "AM" : "PM";
-      this.setTime("meridiem", newMeridiem);
+      this.setValuePart("meridiem", newMeridiem);
     };
     this.decrementMinuteOrSecond = (key) => {
       let newValue;
@@ -23061,7 +23190,7 @@ let CalciteTimePicker$1 = class extends HTMLElement$1 {
       else {
         newValue = 59;
       }
-      this.setTime(key, newValue);
+      this.setValuePart(key, newValue);
     };
     this.decrementMinute = () => {
       this.decrementMinuteOrSecond("minute");
@@ -23083,7 +23212,7 @@ let CalciteTimePicker$1 = class extends HTMLElement$1 {
         const keyAsNumber = parseInt(key);
         let newHour;
         if (isValidNumber(this.hour)) {
-          switch (this.hourDisplayFormat) {
+          switch (this.hourCycle) {
             case "12":
               newHour =
                 this.hour === "01" && keyAsNumber >= 0 && keyAsNumber <= 2
@@ -23106,13 +23235,13 @@ let CalciteTimePicker$1 = class extends HTMLElement$1 {
         else {
           newHour = keyAsNumber;
         }
-        this.setTime("hour", newHour);
+        this.setValuePart("hour", newHour);
       }
       else {
         switch (key) {
           case "Backspace":
           case "Delete":
-            this.setTime("hour", null);
+            this.setValuePart("hour", null);
             break;
           case "ArrowDown":
             event.preventDefault();
@@ -23136,7 +23265,7 @@ let CalciteTimePicker$1 = class extends HTMLElement$1 {
     };
     this.incrementMeridiem = () => {
       const newMeridiem = this.meridiem === "AM" ? "PM" : "AM";
-      this.setTime("meridiem", newMeridiem);
+      this.setValuePart("meridiem", newMeridiem);
     };
     this.incrementHour = () => {
       const newHour = isValidNumber(this.hour)
@@ -23144,7 +23273,7 @@ let CalciteTimePicker$1 = class extends HTMLElement$1 {
           ? 0
           : parseInt(this.hour) + 1
         : 1;
-      this.setTime("hour", newHour);
+      this.setValuePart("hour", newHour);
     };
     this.incrementMinuteOrSecond = (key) => {
       const newValue = isValidNumber(this[key])
@@ -23152,7 +23281,7 @@ let CalciteTimePicker$1 = class extends HTMLElement$1 {
           ? 0
           : parseInt(this[key]) + 1
         : 0;
-      this.setTime(key, newValue);
+      this.setValuePart(key, newValue);
     };
     this.incrementMinute = () => {
       this.incrementMinuteOrSecond("minute");
@@ -23168,14 +23297,14 @@ let CalciteTimePicker$1 = class extends HTMLElement$1 {
     this.meridiemKeyDownHandler = (event) => {
       switch (event.key) {
         case "a":
-          this.setTime("meridiem", "AM");
+          this.setValuePart("meridiem", "AM");
           break;
         case "p":
-          this.setTime("meridiem", "PM");
+          this.setValuePart("meridiem", "PM");
           break;
         case "Backspace":
         case "Delete":
-          this.setTime("meridiem", null);
+          this.setValuePart("meridiem", null);
           break;
         case "ArrowUp":
           event.preventDefault();
@@ -23216,13 +23345,13 @@ let CalciteTimePicker$1 = class extends HTMLElement$1 {
         else {
           newMinute = keyAsNumber;
         }
-        this.setTime("minute", newMinute);
+        this.setValuePart("minute", newMinute);
       }
       else {
         switch (key) {
           case "Backspace":
           case "Delete":
-            this.setTime("minute", null);
+            this.setValuePart("minute", null);
             break;
           case "ArrowDown":
             event.preventDefault();
@@ -23264,13 +23393,13 @@ let CalciteTimePicker$1 = class extends HTMLElement$1 {
         else {
           newSecond = keyAsNumber;
         }
-        this.setTime("second", newSecond);
+        this.setValuePart("second", newSecond);
       }
       else {
         switch (key) {
           case "Backspace":
           case "Delete":
-            this.setTime("second", null);
+            this.setValuePart("second", null);
             break;
           case "ArrowDown":
             event.preventDefault();
@@ -23292,59 +23421,96 @@ let CalciteTimePicker$1 = class extends HTMLElement$1 {
         this.incrementSecond();
       }
     };
-    this.setTime = (key, value, emit = true) => {
-      switch (key) {
-        default:
-          return;
-        case "hour":
-          this.hour = typeof value === "number" ? formatTimePart(value) : value;
-          break;
-        case "minute":
-          this.minute = typeof value === "number" ? formatTimePart(value) : value;
-          break;
-        case "second":
-          this.second = typeof value === "number" ? formatTimePart(value) : value;
-          break;
-        case "meridiem":
-          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.meridiem = value;
-          }
-          else {
-            this.meridiem = value;
+    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);
+        }
+      }
+      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.calciteTimePickerChange.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;
           }
-          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"}`;
       }
-      this.timeChanged = true;
+      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.calciteTimePickerChange.emit(this.getTime());
+        this.calciteTimePickerChange.emit();
       }
     };
   }
-  hourChanged(newHour) {
-    if (this.hourDisplayFormat === "12" && isValidNumber(newHour)) {
-      this.meridiem = getMeridiem(newHour);
-    }
+  localeWatcher(newLocale) {
+    this.hourCycle = getLocaleHourCycle(newLocale);
+    this.setValue(this.value, false);
   }
-  timeChangeHandler() {
-    const { hour, minute } = this.getTime();
-    if (!hour && !minute) {
-      this.setTime("meridiem", null, false);
-    }
-    if (this.timeChanged) {
-      this.timeChanged = false;
+  valueWatcher(newValue) {
+    this.setValue(newValue, false);
+  }
+  hourChanged(newHour) {
+    if (this.meridiem && isValidNumber(newHour)) {
+      this.setValuePart("meridiem", getMeridiem(newHour));
     }
   }
   //--------------------------------------------------------------------------
@@ -23375,7 +23541,7 @@ let CalciteTimePicker$1 = class extends HTMLElement$1 {
             if (this.step !== 60) {
               this.setFocus("second");
             }
-            else if (this.hourDisplayFormat === "12") {
+            else if (this.hourCycle === "12") {
               this.setFocus("meridiem");
             }
             break;
@@ -23387,7 +23553,7 @@ let CalciteTimePicker$1 = class extends HTMLElement$1 {
             this.setFocus("minute");
             break;
           case "ArrowRight":
-            if (this.hourDisplayFormat === "12") {
+            if (this.hourCycle === "12") {
               this.setFocus("meridiem");
             }
             break;
@@ -23417,6 +23583,11 @@ let CalciteTimePicker$1 = class extends HTMLElement$1 {
     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 === " ") {
@@ -23424,40 +23595,14 @@ let CalciteTimePicker$1 = class extends HTMLElement$1 {
     }
     return isActivationKey(key);
   }
-  getDisplayHour() {
-    if (!this.hour) {
-      return "--";
-    }
-    if (this.hourDisplayFormat === "12") {
-      return getMeridiemHour(this.hour);
-    }
-    return this.hour;
-  }
-  getTime() {
-    return {
-      hour: this.hour,
-      minute: this.minute,
-      second: this.second
-    };
-  }
   // --------------------------------------------------------------------------
   //
   //  Lifecycle
   //
   // --------------------------------------------------------------------------
   connectedCallback() {
-    if (this.hourDisplayFormat === "12") {
-      this.meridiem = getMeridiem(this.hour);
-    }
-    if (isValidNumber(this.hour)) {
-      this.hour = formatTimePart(parseInt(this.hour));
-    }
-    if (isValidNumber(this.minute)) {
-      this.minute = formatTimePart(parseInt(this.minute));
-    }
-    if (isValidNumber(this.second)) {
-      this.second = formatTimePart(parseInt(this.second));
-    }
+    this.setValue(this.value, false);
+    this.hourCycle = getLocaleHourCycle(this.locale);
   }
   // --------------------------------------------------------------------------
   //
@@ -23465,58 +23610,63 @@ let CalciteTimePicker$1 = class extends HTMLElement$1 {
   //
   // --------------------------------------------------------------------------
   render() {
-    const iconScale = this.scale === "s" || this.scale === "m" ? "s" : "m";
-    const includeSeconds = this.step !== 60;
     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);
-    return (h(Host, null, h("div", { class: CSS$5.timePicker }, h("div", { role: "group" }, h("span", { "aria-label": this.intlHourUp, class: {
+    const showMeridiem = this.hourCycle === "12";
+    return (h("div", { class: {
+        [CSS$5.timePicker]: true,
+        [CSS$5.showMeridiem]: showMeridiem,
+        [CSS$5.showSecond]: this.showSecond,
+        [CSS$5[`scale-${this.scale}`]]: true
+      } }, h("div", { class: CSS$5.column, role: "group" }, h("span", { "aria-label": this.intlHourUp, class: {
         [CSS$5.button]: true,
         [CSS$5.buttonHourUp]: true,
         [CSS$5.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), "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.intlHour, "aria-valuemax": "23", "aria-valuemin": "1", "aria-valuenow": (hourIsNumber && parseInt(this.hour)) || "0", "aria-valuetext": this.hour, class: {
         [CSS$5.input]: true,
         [CSS$5.hour]: true
-      }, onFocus: this.focusHandler, onKeyDown: this.hourKeyDownHandler, ref: (el) => (this.hourEl = el), role: "spinbutton", tabIndex: 0 }, this.getDisplayHour()), 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.intlHourDown, class: {
         [CSS$5.button]: true,
         [CSS$5.buttonHourDown]: true,
         [CSS$5.buttonBottomLeft]: true
-      }, onClick: this.decrementHour, onKeyDown: this.hourDownButtonKeyDownHandler, role: "button", tabIndex: -1 }, h("calcite-icon", { icon: "chevron-down", scale: iconScale }))), h("span", { class: CSS$5.delimiter }, ":"), h("div", { 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$5.delimiter }, this.localizedHourSuffix), h("div", { class: CSS$5.column, role: "group" }, h("span", { "aria-label": this.intlMinuteUp, class: {
         [CSS$5.button]: true,
         [CSS$5.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), "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.intlMinute, "aria-valuemax": "12", "aria-valuemin": "1", "aria-valuenow": (minuteIsNumber && parseInt(this.minute)) || "0", "aria-valuetext": this.minute, class: {
         [CSS$5.input]: true,
         [CSS$5.minute]: true
-      }, onFocus: this.focusHandler, onKeyDown: this.minuteKeyDownHandler, ref: (el) => (this.minuteEl = el), role: "spinbutton", tabIndex: 0 }, this.minute ? this.minute : "--"), 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.intlMinuteDown, class: {
         [CSS$5.button]: true,
         [CSS$5.buttonMinuteDown]: true
-      }, onClick: this.decrementMinute, onKeyDown: this.minuteDownButtonKeyDownHandler, role: "button", tabIndex: -1 }, h("calcite-icon", { icon: "chevron-down", scale: iconScale }))), includeSeconds && h("span", { class: CSS$5.delimiter }, ":"), includeSeconds && (h("div", { 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$5.delimiter }, this.localizedMinuteSuffix), this.showSecond && (h("div", { class: CSS$5.column, role: "group" }, h("span", { "aria-label": this.intlSecondUp, class: {
         [CSS$5.button]: true,
         [CSS$5.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), "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.intlSecond, "aria-valuemax": "59", "aria-valuemin": "0", "aria-valuenow": (secondIsNumber && parseInt(this.second)) || "0", "aria-valuetext": this.second, class: {
         [CSS$5.input]: true,
         [CSS$5.second]: true
-      }, onFocus: this.focusHandler, onKeyDown: this.secondKeyDownHandler, ref: (el) => (this.secondEl = el), role: "spinbutton", tabIndex: 0 }, this.second ? this.second : "--"), 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.intlSecondDown, class: {
         [CSS$5.button]: true,
         [CSS$5.buttonSecondDown]: true
-      }, onClick: this.decrementSecond, onKeyDown: this.secondDownButtonKeyDownHandler, role: "button", tabIndex: -1 }, h("calcite-icon", { icon: "chevron-down", scale: iconScale })))), this.hourDisplayFormat === "12" && (h("div", { role: "group" }, h("span", { "aria-label": this.intlMeridiemUp, class: {
+      }, onClick: this.decrementSecond, onKeyDown: this.secondDownButtonKeyDownHandler, role: "button", tabIndex: -1 }, h("calcite-icon", { icon: "chevron-down", scale: iconScale })))), this.localizedSecondSuffix && (h("span", { class: CSS$5.delimiter }, this.localizedSecondSuffix)), showMeridiem && (h("div", { class: CSS$5.column, role: "group" }, h("span", { "aria-label": this.intlMeridiemUp, class: {
         [CSS$5.button]: true,
         [CSS$5.buttonMeridiemUp]: true,
         [CSS$5.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 === "AM" ? "1" : this.meridiem === "PM" ? "2" : undefined, "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.intlMeridiem, "aria-valuemax": "2", "aria-valuemin": "1", "aria-valuenow": (this.meridiem === "PM" && "2") || "1", "aria-valuetext": this.meridiem, class: {
         [CSS$5.input]: true,
         [CSS$5.meridiem]: true
-      }, onFocus: this.focusHandler, onKeyDown: this.meridiemKeyDownHandler, ref: (el) => (this.meridiemEl = el), role: "spinbutton", tabIndex: 0 }, this.meridiem ? this.meridiem : "--"), 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.intlMeridiemDown, class: {
         [CSS$5.button]: true,
         [CSS$5.buttonMeridiemDown]: true,
         [CSS$5.buttonBottomRight]: true
-      }, onClick: this.decrementMeridiem, onKeyDown: this.meridiemDownButtonKeyDownHandler, role: "button", tabIndex: -1 }, h("calcite-icon", { icon: "chevron-down", scale: iconScale })))))));
+      }, onClick: this.decrementMeridiem, onKeyDown: this.meridiemDownButtonKeyDownHandler, role: "button", tabIndex: -1 }, h("calcite-icon", { icon: "chevron-down", scale: iconScale }))))));
   }
   get el() { return this; }
   static get watchers() { return {
-    "hour": ["hourChanged", "timeChangeHandler"],
-    "minute": ["timeChangeHandler"],
-    "second": ["timeChangeHandler"]
+    "locale": ["localeWatcher"],
+    "value": ["valueWatcher"],
+    "hour": ["hourChanged"]
   }; }
   static get style() { return calciteTimePickerCss; }
 };
@@ -24959,7 +25109,7 @@ const CalciteInlineEditable = /*@__PURE__*/proxyCustomElement(CalciteInlineEdita
 const CalciteInput = /*@__PURE__*/proxyCustomElement(CalciteInput$1, [1,"calcite-input",{"alignment":[513],"autofocus":[4],"clearable":[516],"disabled":[516],"groupSeparator":[4,"group-separator"],"hidden":[4],"icon":[520],"intlLoading":[1,"intl-loading"],"iconFlipRtl":[516,"icon-flip-rtl"],"label":[1],"loading":[516],"locale":[1],"localeFormat":[4,"locale-format"],"max":[514],"min":[514],"maxlength":[514],"maxLength":[514,"max-length"],"minLength":[514,"min-length"],"name":[513],"numberButtonType":[513,"number-button-type"],"placeholder":[1],"prefixText":[1,"prefix-text"],"readOnly":[4,"read-only"],"required":[4],"scale":[1537],"status":[1537],"step":[520],"suffixText":[1,"suffix-text"],"editingEnabled":[1540,"editing-enabled"],"type":[513],"value":[1025],"localizedValue":[32]}]);
 const CalciteInputDatePicker = /*@__PURE__*/proxyCustomElement(CalciteInputDatePicker$1, [1,"calcite-input-date-picker",{"disabled":[516],"value":[1025],"headingLevel":[2,"heading-level"],"valueAsDate":[1040],"startAsDate":[1040],"endAsDate":[1040],"minAsDate":[1040],"maxAsDate":[1040],"min":[1],"max":[1],"active":[1540],"name":[1],"intlPrevMonth":[1,"intl-prev-month"],"intlNextMonth":[1,"intl-next-month"],"locale":[1],"scale":[513],"range":[516],"required":[516],"start":[1025],"end":[1025],"overlayPositioning":[1,"overlay-positioning"],"proximitySelectionDisabled":[4,"proximity-selection-disabled"],"layout":[513],"focusedInput":[32],"localeData":[32]},[[0,"calciteDaySelect","calciteDaySelectHandler"]]]);
 const CalciteInputMessage = /*@__PURE__*/proxyCustomElement(CalciteInputMessage$1, [1,"calcite-input-message",{"active":[516],"icon":[520],"scale":[1537],"status":[1537],"type":[513]}]);
-const CalciteInputTimePicker = /*@__PURE__*/proxyCustomElement(CalciteInputTimePicker$1, [1,"calcite-input-time-picker",{"active":[1540],"disabled":[516],"hourDisplayFormat":[1,"hour-display-format"],"intlHour":[1,"intl-hour"],"intlHourDown":[1,"intl-hour-down"],"intlHourUp":[1,"intl-hour-up"],"intlMeridiem":[1,"intl-meridiem"],"intlMeridiemDown":[1,"intl-meridiem-down"],"intlMeridiemUp":[1,"intl-meridiem-up"],"intlMinute":[1,"intl-minute"],"intlMinuteDown":[1,"intl-minute-down"],"intlMinuteUp":[1,"intl-minute-up"],"intlSecond":[1,"intl-second"],"intlSecondDown":[1,"intl-second-down"],"intlSecondUp":[1,"intl-second-up"],"name":[1],"required":[516],"scale":[513],"step":[2],"value":[1025]},[[0,"keyup","keyUpHandler"],[0,"calciteTimePickerBlur","timePickerBlurHandler"],[0,"calciteTimePickerChange","timePickerChangeHandler"],[0,"calciteTimePickerFocus","timePickerFocusHandler"]]]);
+const CalciteInputTimePicker = /*@__PURE__*/proxyCustomElement(CalciteInputTimePicker$1, [1,"calcite-input-time-picker",{"active":[1540],"disabled":[516],"intlHour":[1,"intl-hour"],"intlHourDown":[1,"intl-hour-down"],"intlHourUp":[1,"intl-hour-up"],"intlMeridiem":[1,"intl-meridiem"],"intlMeridiemDown":[1,"intl-meridiem-down"],"intlMeridiemUp":[1,"intl-meridiem-up"],"intlMinute":[1,"intl-minute"],"intlMinuteDown":[1,"intl-minute-down"],"intlMinuteUp":[1,"intl-minute-up"],"intlSecond":[1,"intl-second"],"intlSecondDown":[1,"intl-second-down"],"intlSecondUp":[1,"intl-second-up"],"locale":[1025,"lang"],"name":[1],"required":[516],"scale":[513],"step":[2],"value":[1025],"localizedValue":[32]},[[0,"click","clickHandler"],[0,"keyup","keyUpHandler"],[0,"calciteTimePickerBlur","timePickerBlurHandler"],[0,"calciteTimePickerFocus","timePickerFocusHandler"]]]);
 const CalciteLabel = /*@__PURE__*/proxyCustomElement(CalciteLabel$1, [1,"calcite-label",{"alignment":[513],"status":[513],"for":[513],"scale":[513],"layout":[513],"disableSpacing":[4,"disable-spacing"],"disabled":[516]}]);
 const CalciteLink = /*@__PURE__*/proxyCustomElement(CalciteLink$1, [1,"calcite-link",{"disabled":[516],"href":[513],"iconEnd":[513,"icon-end"],"iconFlipRtl":[513,"icon-flip-rtl"],"iconStart":[513,"icon-start"],"rel":[1],"target":[1],"childElType":[32]}]);
 const CalciteList = /*@__PURE__*/proxyCustomElement(CalciteList$1, [1,"calcite-list",{"headingLevel":[2,"heading-level"]}]);
@@ -25002,7 +25152,7 @@ const CalciteTabs = /*@__PURE__*/proxyCustomElement(CalciteTabs$1, [1,"calcite-t
 const CalciteTile = /*@__PURE__*/proxyCustomElement(CalciteTile$1, [1,"calcite-tile",{"active":[516],"description":[513],"disabled":[516],"embed":[516],"focused":[516],"heading":[513],"hidden":[516],"href":[513],"icon":[513]}]);
 const CalciteTileSelect = /*@__PURE__*/proxyCustomElement(CalciteTileSelect$1, [1,"calcite-tile-select",{"checked":[1540],"description":[513],"disabled":[516],"heading":[513],"hidden":[516],"icon":[513],"name":[520],"inputEnabled":[516,"input-enabled"],"inputAlignment":[513,"input-alignment"],"type":[513],"value":[8],"width":[513],"focused":[32]},[[0,"calciteCheckboxChange","checkboxChangeHandler"],[0,"calciteInternalCheckboxFocus","checkboxFocusBlurHandler"],[0,"calciteInternalCheckboxBlur","checkboxFocusBlurHandler"],[0,"calciteRadioButtonChange","radioButtonChangeHandler"],[0,"calciteInternalRadioButtonCheckedChange","radioButtonCheckedChangeHandler"],[0,"calciteInternalRadioButtonFocus","radioButtonFocusBlurHandler"],[0,"calciteInternalRadioButtonBlur","radioButtonFocusBlurHandler"],[0,"click","click"],[1,"mouseenter","mouseenter"],[1,"mouseleave","mouseleave"]]]);
 const CalciteTileSelectGroup = /*@__PURE__*/proxyCustomElement(CalciteTileSelectGroup$1, [1,"calcite-tile-select-group",{"layout":[513]}]);
-const CalciteTimePicker = /*@__PURE__*/proxyCustomElement(CalciteTimePicker$1, [1,"calcite-time-picker",{"hour":[1025],"hourDisplayFormat":[513,"hour-display-format"],"intlHour":[1,"intl-hour"],"intlHourDown":[1,"intl-hour-down"],"intlHourUp":[1,"intl-hour-up"],"intlMeridiem":[1,"intl-meridiem"],"intlMeridiemDown":[1,"intl-meridiem-down"],"intlMeridiemUp":[1,"intl-meridiem-up"],"intlMinute":[1,"intl-minute"],"intlMinuteDown":[1,"intl-minute-down"],"intlMinuteUp":[1,"intl-minute-up"],"intlSecond":[1,"intl-second"],"intlSecondDown":[1,"intl-second-down"],"intlSecondUp":[1,"intl-second-up"],"minute":[1025],"second":[1025],"scale":[513],"step":[514],"meridiem":[32],"displayHour":[32]},[[0,"blur","hostBlurHandler"],[0,"focus","hostFocusHandler"],[0,"keydown","keyDownHandler"]]]);
+const CalciteTimePicker = /*@__PURE__*/proxyCustomElement(CalciteTimePicker$1, [1,"calcite-time-picker",{"intlHour":[1,"intl-hour"],"intlHourDown":[1,"intl-hour-down"],"intlHourUp":[1,"intl-hour-up"],"intlMeridiem":[1,"intl-meridiem"],"intlMeridiemDown":[1,"intl-meridiem-down"],"intlMeridiemUp":[1,"intl-meridiem-up"],"intlMinute":[1,"intl-minute"],"intlMinuteDown":[1,"intl-minute-down"],"intlMinuteUp":[1,"intl-minute-up"],"intlSecond":[1,"intl-second"],"intlSecondDown":[1,"intl-second-down"],"intlSecondUp":[1,"intl-second-up"],"locale":[1025,"lang"],"scale":[1],"step":[2],"value":[1025],"hour":[32],"hourCycle":[32],"localizedHour":[32],"localizedHourSuffix":[32],"localizedMeridiem":[32],"localizedMinute":[32],"localizedMinuteSuffix":[32],"localizedSecond":[32],"localizedSecondSuffix":[32],"meridiem":[32],"minute":[32],"second":[32],"showSecond":[32]},[[0,"blur","hostBlurHandler"],[0,"focus","hostFocusHandler"],[0,"keydown","keyDownHandler"]]]);
 const CalciteTip = /*@__PURE__*/proxyCustomElement(CalciteTip$1, [1,"calcite-tip",{"dismissed":[1540],"nonDismissible":[516,"non-dismissible"],"heading":[1],"headingLevel":[2,"heading-level"],"selected":[516],"intlClose":[1,"intl-close"]}]);
 const CalciteTipGroup = /*@__PURE__*/proxyCustomElement(CalciteTipGroup$1, [1,"calcite-tip-group",{"groupTitle":[1,"group-title"]}]);
 const CalciteTipManager = /*@__PURE__*/proxyCustomElement(CalciteTipManager$1, [1,"calcite-tip-manager",{"closed":[1540],"headingLevel":[2,"heading-level"],"intlClose":[1,"intl-close"],"intlDefaultTitle":[1,"intl-default-title"],"intlNext":[1,"intl-next"],"intlPaginationLabel":[1,"intl-pagination-label"],"intlPrevious":[1,"intl-previous"],"selectedIndex":[32],"tips":[32],"total":[32],"direction":[32],"groupTitle":[32]}]);