@esri/calcite-components 1.0.0-beta.71 → 1.0.0-beta.72

package/dist/collection/components/calcite-time-picker/calcite-time-picker.js

@@ -2,11 +2,14 @@
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
-import { Component, Element, Host, h, Prop, Event, Watch, State, Listen, Method } from "@stencil/core";
-import { getKey, isActivationKey, numberKeys } from "../../utils/key";
+import { Component, Element, h, Prop, Event, Watch, State, Listen, Method } from "@stencil/core";
+import { isActivationKey, numberKeys } from "../../utils/key";
 import { isValidNumber } from "../../utils/number";
-import { formatTimePart, maxTenthForMinuteAndSecond, getMeridiem, getMeridiemHour } from "../../utils/time";
+import { formatTimePart, maxTenthForMinuteAndSecond, getMeridiem, isValidTime, localizeTimeStringToParts, parseTimeString, localizeTimePart, getLocaleHourCycle } from "../../utils/time";
 import { CSS, TEXT } from "./resources";
+function capitalize(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
 export class CalciteTimePicker {
   constructor() {
     //--------------------------------------------------------------------------
@@ -14,10 +17,6 @@ export class CalciteTimePicker {
     //  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"
      */
@@ -66,35 +65,25 @@ export class CalciteTimePicker {
      * @default "Increase second"
      */
     this.intlSecondUp = TEXT.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;
@@ -105,7 +94,7 @@ export class CalciteTimePicker {
       else {
         newValue = 59;
       }
-      this.setTime(key, newValue);
+      this.setValuePart(key, newValue);
     };
     this.decrementMinute = () => {
       this.decrementMinuteOrSecond("minute");
@@ -122,12 +111,12 @@ export class CalciteTimePicker {
       }
     };
     this.hourKeyDownHandler = (event) => {
-      const key = getKey(event.key);
+      const key = event.key;
       if (numberKeys.includes(key)) {
         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
@@ -150,13 +139,13 @@ export class CalciteTimePicker {
         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();
@@ -180,7 +169,7 @@ export class CalciteTimePicker {
     };
     this.incrementMeridiem = () => {
       const newMeridiem = this.meridiem === "AM" ? "PM" : "AM";
-      this.setTime("meridiem", newMeridiem);
+      this.setValuePart("meridiem", newMeridiem);
     };
     this.incrementHour = () => {
       const newHour = isValidNumber(this.hour)
@@ -188,7 +177,7 @@ export class CalciteTimePicker {
           ? 0
           : parseInt(this.hour) + 1
         : 1;
-      this.setTime("hour", newHour);
+      this.setValuePart("hour", newHour);
     };
     this.incrementMinuteOrSecond = (key) => {
       const newValue = isValidNumber(this[key])
@@ -196,7 +185,7 @@ export class CalciteTimePicker {
           ? 0
           : parseInt(this[key]) + 1
         : 0;
-      this.setTime(key, newValue);
+      this.setValuePart(key, newValue);
     };
     this.incrementMinute = () => {
       this.incrementMinuteOrSecond("minute");
@@ -210,16 +199,16 @@ export class CalciteTimePicker {
       }
     };
     this.meridiemKeyDownHandler = (event) => {
-      switch (getKey(event.key)) {
+      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();
@@ -246,7 +235,7 @@ export class CalciteTimePicker {
       }
     };
     this.minuteKeyDownHandler = (event) => {
-      const key = getKey(event.key);
+      const key = event.key;
       if (numberKeys.includes(key)) {
         const keyAsNumber = parseInt(key);
         let newMinute;
@@ -260,13 +249,13 @@ export class CalciteTimePicker {
         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();
@@ -294,7 +283,7 @@ export class CalciteTimePicker {
       }
     };
     this.secondKeyDownHandler = (event) => {
-      const key = getKey(event.key);
+      const key = event.key;
       if (numberKeys.includes(key)) {
         const keyAsNumber = parseInt(key);
         let newSecond;
@@ -308,13 +297,13 @@ export class CalciteTimePicker {
         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();
@@ -336,59 +325,96 @@ export class CalciteTimePicker {
         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);
       }
-      this.timeChanged = true;
+      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.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));
     }
   }
   //--------------------------------------------------------------------------
@@ -403,7 +429,7 @@ export class CalciteTimePicker {
     this.calciteTimePickerFocus.emit();
   }
   keyDownHandler(event) {
-    const key = getKey(event.key);
+    const key = event.key;
     switch (this.activeEl) {
       case this.hourEl:
         if (key === "ArrowRight") {
@@ -419,7 +445,7 @@ export class CalciteTimePicker {
             if (this.step !== 60) {
               this.setFocus("second");
             }
-            else if (this.hourDisplayFormat === "12") {
+            else if (this.hourCycle === "12") {
               this.setFocus("meridiem");
             }
             break;
@@ -431,7 +457,7 @@ export class CalciteTimePicker {
             this.setFocus("minute");
             break;
           case "ArrowRight":
-            if (this.hourDisplayFormat === "12") {
+            if (this.hourCycle === "12") {
               this.setFocus("meridiem");
             }
             break;
@@ -461,47 +487,26 @@ export class CalciteTimePicker {
     var _a;
     (_a = this[`${target || "hour"}El`]) === null || _a === void 0 ? void 0 : _a.focus();
   }
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
   buttonActivated(event) {
-    const key = getKey(event.key);
+    const key = event.key;
     if (key === " ") {
       event.preventDefault();
     }
     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);
   }
   // --------------------------------------------------------------------------
   //
@@ -509,79 +514,84 @@ export class CalciteTimePicker {
   //
   // --------------------------------------------------------------------------
   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.timePicker },
-        h("div", { 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), "aria-valuetext": this.hour, class: {
-              [CSS.input]: true,
-              [CSS.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: {
-              [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 }, ":"),
-        h("div", { 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), "aria-valuetext": this.minute, class: {
-              [CSS.input]: true,
-              [CSS.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: {
-              [CSS.button]: true,
-              [CSS.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.delimiter }, ":"),
-        includeSeconds && (h("div", { 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), "aria-valuetext": this.second, class: {
-              [CSS.input]: true,
-              [CSS.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: {
-              [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.hourDisplayFormat === "12" && (h("div", { 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 === "AM" ? "1" : this.meridiem === "PM" ? "2" : undefined, "aria-valuetext": this.meridiem, class: {
-              [CSS.input]: true,
-              [CSS.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: {
-              [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 })))))));
+    const showMeridiem = this.hourCycle === "12";
+    return (h("div", { class: {
+        [CSS.timePicker]: true,
+        [CSS.showMeridiem]: showMeridiem,
+        [CSS.showSecond]: this.showSecond,
+        [CSS[`scale-${this.scale}`]]: true
+      } },
+      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, 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 }))))));
   }
   static get is() { return "calcite-time-picker"; }
   static get encapsulation() { return "shadow"; }
@@ -592,47 +602,6 @@ export class CalciteTimePicker {
     "$": ["calcite-time-picker.css"]
   }; }
   static get properties() { return {
-    "hour": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "The hour value (24-hour format)"
-      },
-      "attribute": "hour",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "hourDisplayFormat": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "HourDisplayFormat",
-        "resolved": "\"12\" | \"24\"",
-        "references": {
-          "HourDisplayFormat": {
-            "location": "import",
-            "path": "../../utils/time"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Format of the hour value (12-hour or 24-hour) (this will be replaced by locale eventually)"
-      },
-      "attribute": "hour-display-format",
-      "reflect": true,
-      "defaultValue": "\"12\""
-    },
     "intlHour": {
       "type": "string",
       "mutable": false,
@@ -885,25 +854,7 @@ export class CalciteTimePicker {
       "reflect": false,
       "defaultValue": "TEXT.secondUp"
     },
-    "minute": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "The minute value"
-      },
-      "attribute": "minute",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "second": {
+    "locale": {
       "type": "string",
       "mutable": true,
       "complexType": {
@@ -912,14 +863,17 @@ export class CalciteTimePicker {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
-        "tags": [],
-        "text": "The second value"
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": "BCP 47 language tag for desired language and country format"
       },
-      "attribute": "second",
+      "attribute": "lang",
       "reflect": false,
-      "defaultValue": "null"
+      "defaultValue": "document.documentElement.lang || navigator.language || \"en\""
     },
     "scale": {
       "type": "string",
@@ -941,7 +895,7 @@ export class CalciteTimePicker {
         "text": "The scale (size) of the time picker"
       },
       "attribute": "scale",
-      "reflect": true,
+      "reflect": false,
       "defaultValue": "\"m\""
     },
     "step": {
@@ -959,13 +913,42 @@ export class CalciteTimePicker {
         "text": "number that specifies the granularity that the value must adhere to"
       },
       "attribute": "step",
-      "reflect": true,
+      "reflect": false,
       "defaultValue": "60"
+    },
+    "value": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The selected time in UTC"
+      },
+      "attribute": "value",
+      "reflect": false,
+      "defaultValue": "null"
     }
   }; }
   static get states() { return {
+    "hour": {},
+    "hourCycle": {},
+    "localizedHour": {},
+    "localizedHourSuffix": {},
+    "localizedMeridiem": {},
+    "localizedMinute": {},
+    "localizedMinuteSuffix": {},
+    "localizedSecond": {},
+    "localizedSecondSuffix": {},
     "meridiem": {},
-    "displayHour": {}
+    "minute": {},
+    "second": {},
+    "showSecond": {}
   }; }
   static get events() { return [{
       "method": "calciteTimePickerBlur",
@@ -981,14 +964,9 @@ export class CalciteTimePicker {
         "text": ""
       },
       "complexType": {
-        "original": "Time",
-        "resolved": "Time",
-        "references": {
-          "Time": {
-            "location": "import",
-            "path": "../../utils/time"
-          }
-        }
+        "original": "void",
+        "resolved": "void",
+        "references": {}
       }
     }, {
       "method": "calciteTimePickerChange",
@@ -1004,14 +982,9 @@ export class CalciteTimePicker {
         "text": ""
       },
       "complexType": {
-        "original": "Time",
-        "resolved": "Time",
-        "references": {
-          "Time": {
-            "location": "import",
-            "path": "../../utils/time"
-          }
-        }
+        "original": "string",
+        "resolved": "string",
+        "references": {}
       }
     }, {
       "method": "calciteTimePickerFocus",
@@ -1027,20 +1000,15 @@ export class CalciteTimePicker {
         "text": ""
       },
       "complexType": {
-        "original": "Time",
-        "resolved": "Time",
-        "references": {
-          "Time": {
-            "location": "import",
-            "path": "../../utils/time"
-          }
-        }
+        "original": "void",
+        "resolved": "void",
+        "references": {}
       }
     }]; }
   static get methods() { return {
     "setFocus": {
       "complexType": {
-        "signature": "(target: TimeFocusId) => Promise<void>",
+        "signature": "(target: TimePart) => Promise<void>",
         "parameters": [{
             "tags": [],
             "text": ""
@@ -1049,7 +1017,7 @@ export class CalciteTimePicker {
           "Promise": {
             "location": "global"
           },
-          "TimeFocusId": {
+          "TimePart": {
             "location": "import",
             "path": "../../utils/time"
           }
@@ -1064,17 +1032,14 @@ export class CalciteTimePicker {
   }; }
   static get elementRef() { return "el"; }
   static get watchers() { return [{
-      "propName": "hour",
-      "methodName": "hourChanged"
+      "propName": "locale",
+      "methodName": "localeWatcher"
     }, {
-      "propName": "hour",
-      "methodName": "timeChangeHandler"
-    }, {
-      "propName": "minute",
-      "methodName": "timeChangeHandler"
+      "propName": "value",
+      "methodName": "valueWatcher"
     }, {
-      "propName": "second",
-      "methodName": "timeChangeHandler"
+      "propName": "hour",
+      "methodName": "hourChanged"
     }]; }
   static get listeners() { return [{
       "name": "blur",