@esri/solutions-components 0.6.15 → 0.6.17

package/dist/esm/calcite-time-picker.entry.js

@@ -4,25 +4,28 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-c7de2486.js';
-import { n as numberKeys, i as isActivationKey } from './key-02fa06ae.js';
-import { i as isValidNumber, c as connectLocalized, d as disconnectLocalized } from './locale-00000ab4.js';
-import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-9791aa0c.js';
-import { i as isValidTime, p as parseTimeString, a as localizeTimeStringToParts, g as getMeridiem, b as getTimeParts, c as formatTimePart, d as localizeTimePart, e as getLocaleHourCycle, m as maxTenthForMinuteAndSecond } from './time-73378c4a.js';
-import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-f848be11.js';
-import './dom-2b326ec3.js';
-import './guid-70cda807.js';
-import './resources-1e6d76df.js';
-import './observers-95c50046.js';
+import { n as numberKeys } from './key-554ad3f4.js';
+import { i as isValidNumber, c as connectLocalized, d as disconnectLocalized } from './locale-56a910a3.js';
+import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-142cc7d6.js';
+import { a as formatTimePart, p as parseTimeString, i as isValidTime, b as localizeTimeStringToParts, g as getMeridiem, c as getTimeParts, d as getLocalizedTimePartSuffix, e as getLocalizedDecimalSeparator, h as localizeTimePart, j as getLocaleHourCycle, m as maxTenthForMinuteAndSecond } from './time-84f496fe.js';
+import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-d0274dee.js';
+import { d as decimalPlaces, g as getDecimals } from './math-158e90ac.js';
+import './dom-ae3d8818.js';
+import './guid-d34fe102.js';
+import './resources-4d5cdf35.js';
+import './observers-a3cec8e4.js';
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.1
+ * v1.8.0
  */
 const CSS = {
   button: "button",
   buttonBottomLeft: "button--bottom-left",
   buttonBottomRight: "button--bottom-right",
+  buttonFractionalSecondDown: "button--fractionalSecond-down",
+  buttonFractionalSecondUp: "button--fractionalSecond-up",
   buttonHourDown: "button--hour-down",
   buttonHourUp: "button--hour-up",
   buttonMeridiemDown: "button--meridiem-down",
@@ -35,8 +38,10 @@ const CSS = {
   buttonTopRight: "button--top-right",
   column: "column",
   delimiter: "delimiter",
+  fractionalSecond: "fractionalSecond",
   hour: "hour",
   input: "input",
+  inputFocus: "inputFocus",
   meridiem: "meridiem",
   minute: "minute",
   second: "second",
@@ -49,7 +54,7 @@ const CSS = {
   meridiemStart: "meridiem--start",
 };
 
-const timePickerCss = ":host{display:inline-block}.time-picker{display:flex;-webkit-user-select:none;-moz-user-select:none;user-select:none;align-items:center;background-color:var(--calcite-ui-foreground-1);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1);--tw-shadow:0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);--tw-shadow-colored:0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);border-radius:var(--calcite-border-radius)}.time-picker .column{display:flex;flex-direction:column}.time-picker .meridiem--start{order:-1}.time-picker .button{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;background-color:var(--calcite-ui-foreground-1)}.time-picker .button:hover,.time-picker .button:focus{background-color:var(--calcite-ui-foreground-2);outline:2px solid transparent;outline-offset:2px;z-index:var(--calcite-app-z-index-header);outline-offset:0}.time-picker .button:active{background-color:var(--calcite-ui-foreground-3)}.time-picker .button.top-left{border-start-start-radius:var(--calcite-border-radius)}.time-picker .button.bottom-left{border-end-start-radius:var(--calcite-border-radius)}.time-picker .button.top-right{border-start-end-radius:var(--calcite-border-radius)}.time-picker .button.bottom-right{border-end-end-radius:var(--calcite-border-radius)}.time-picker .button calcite-icon{color:var(--calcite-ui-text-3)}.time-picker .input{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;background-color:var(--calcite-ui-foreground-1);font-weight:var(--calcite-font-weight-medium)}.time-picker .input:hover{box-shadow:inset 0 0 0 2px var(--calcite-ui-foreground-2);z-index:var(--calcite-app-z-index-header)}.time-picker .input:focus,.time-picker .input:hover:focus{outline:2px solid transparent;outline-offset:2px;box-shadow:inset 0 0 0 2px var(--calcite-ui-brand);z-index:var(--calcite-app-z-index-header);outline-offset:0}.time-picker.scale-s{font-size:var(--calcite-font-size--1)}.time-picker.scale-s .button,.time-picker.scale-s .input{padding-inline:0.75rem;padding-block:0.25rem}.time-picker.scale-s:not(.show-meridiem) .delimiter:last-child{padding-inline-end:0.75rem}.time-picker.scale-m{font-size:var(--calcite-font-size-0)}.time-picker.scale-m .button,.time-picker.scale-m .input{padding-inline:1rem;padding-block:0.5rem}.time-picker.scale-m:not(.show-meridiem) .delimiter:last-child{padding-inline-end:1rem}.time-picker.scale-l{font-size:var(--calcite-font-size-1)}.time-picker.scale-l .button,.time-picker.scale-l .input{padding-inline:1.25rem;padding-block:0.75rem}.time-picker.scale-l:not(.show-meridiem) .delimiter:last-child{padding-inline-end:1.25rem}:host([hidden]){display:none}[hidden]{display:none}";
+const timePickerCss = ":host{display:inline-block}.time-picker{display:flex;-webkit-user-select:none;-moz-user-select:none;user-select:none;align-items:center;background-color:var(--calcite-ui-foreground-1);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1);--tw-shadow:0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);--tw-shadow-colored:0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);border-radius:var(--calcite-border-radius)}.time-picker .column{display:flex;flex-direction:column}.time-picker .meridiem--start{order:-1}.time-picker .button{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;background-color:var(--calcite-ui-foreground-1)}.time-picker .button:hover,.time-picker .button:focus{background-color:var(--calcite-ui-foreground-2);outline:2px solid transparent;outline-offset:2px;z-index:var(--calcite-app-z-index-header);outline-offset:0}.time-picker .button:active{background-color:var(--calcite-ui-foreground-3)}.time-picker .button.top-left{border-start-start-radius:var(--calcite-border-radius)}.time-picker .button.bottom-left{border-end-start-radius:var(--calcite-border-radius)}.time-picker .button.top-right{border-start-end-radius:var(--calcite-border-radius)}.time-picker .button.bottom-right{border-end-end-radius:var(--calcite-border-radius)}.time-picker .button calcite-icon{color:var(--calcite-ui-text-3)}.time-picker .input{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;background-color:var(--calcite-ui-foreground-1);font-weight:var(--calcite-font-weight-medium)}.time-picker .input:hover{box-shadow:inset 0 0 0 2px var(--calcite-ui-foreground-2);z-index:var(--calcite-app-z-index-header)}.time-picker .input:focus,.time-picker .input:hover:focus{outline:2px solid transparent;outline-offset:2px;outline-offset:0}.time-picker .input.inputFocus,.time-picker .input:hover.inputFocus{box-shadow:inset 0 0 0 2px var(--calcite-ui-brand);z-index:var(--calcite-app-z-index-header)}.time-picker.scale-s{font-size:var(--calcite-font-size--1)}.time-picker.scale-s .button,.time-picker.scale-s .input{padding-inline:0.75rem;padding-block:0.25rem}.time-picker.scale-s:not(.show-meridiem) .delimiter:last-child{padding-inline-end:0.75rem}.time-picker.scale-m{font-size:var(--calcite-font-size-0)}.time-picker.scale-m .button,.time-picker.scale-m .input{padding-inline:1rem;padding-block:0.5rem}.time-picker.scale-m:not(.show-meridiem) .delimiter:last-child{padding-inline-end:1rem}.time-picker.scale-l{font-size:var(--calcite-font-size-1)}.time-picker.scale-l .button,.time-picker.scale-l .input{padding-inline:1.25rem;padding-block:0.75rem}.time-picker.scale-l:not(.show-meridiem) .delimiter:last-child{padding-inline-end:1.25rem}:host([hidden]){display:none}[hidden]{display:none}";
 
 function capitalize(str) {
   return str.charAt(0).toUpperCase() + str.slice(1);
@@ -60,6 +65,7 @@ const TimePicker = class {
     this.calciteInternalTimePickerBlur = createEvent(this, "calciteInternalTimePickerBlur", 6);
     this.calciteInternalTimePickerChange = createEvent(this, "calciteInternalTimePickerChange", 6);
     this.calciteInternalTimePickerFocus = createEvent(this, "calciteInternalTimePickerFocus", 6);
+    this.pointerActivated = false;
     this.decrementHour = () => {
       const newHour = !this.hour ? 0 : this.hour === "00" ? 23 : parseInt(this.hour) - 1;
       this.setValuePart("hour", newHour);
@@ -86,13 +92,61 @@ const TimePicker = class {
       this.decrementMinuteOrSecond("second");
     };
     this.focusHandler = (event) => {
+      if (this.pointerActivated) {
+        return;
+      }
       this.activeEl = event.currentTarget;
     };
-    this.hourDownButtonKeyDownHandler = (event) => {
-      if (this.buttonActivated(event)) {
-        this.decrementHour();
+    this.fractionalSecondKeyDownHandler = (event) => {
+      const { key } = event;
+      if (numberKeys.includes(key)) {
+        const stepPrecision = decimalPlaces(this.step);
+        const fractionalSecondAsInteger = parseInt(this.fractionalSecond);
+        const fractionalSecondAsIntegerLength = fractionalSecondAsInteger.toString().length;
+        let newFractionalSecondAsIntegerString;
+        if (fractionalSecondAsIntegerLength >= stepPrecision) {
+          newFractionalSecondAsIntegerString = key.padStart(stepPrecision, "0");
+        }
+        else if (fractionalSecondAsIntegerLength < stepPrecision) {
+          newFractionalSecondAsIntegerString = `${fractionalSecondAsInteger}${key}`.padStart(stepPrecision, "0");
+        }
+        this.setValuePart("fractionalSecond", parseFloat(`0.${newFractionalSecondAsIntegerString}`));
+      }
+      else {
+        switch (key) {
+          case "Backspace":
+          case "Delete":
+            this.setValuePart("fractionalSecond", null);
+            break;
+          case "ArrowDown":
+            event.preventDefault();
+            this.nudgeFractionalSecond("down");
+            break;
+          case "ArrowUp":
+            event.preventDefault();
+            this.nudgeFractionalSecond("up");
+            break;
+          case " ":
+            event.preventDefault();
+            break;
+        }
       }
     };
+    this.fractionalSecondDownClickHandler = () => {
+      this.activeEl = this.fractionalSecondEl;
+      this.fractionalSecondEl.focus();
+      this.nudgeFractionalSecond("down");
+    };
+    this.fractionalSecondUpClickHandler = () => {
+      this.activeEl = this.fractionalSecondEl;
+      this.fractionalSecondEl.focus();
+      this.nudgeFractionalSecond("up");
+    };
+    this.hourDownClickHandler = () => {
+      this.activeEl = this.hourEl;
+      this.hourEl.focus();
+      this.decrementHour();
+    };
     this.hourKeyDownHandler = (event) => {
       const { key } = event;
       if (numberKeys.includes(key)) {
@@ -144,10 +198,10 @@ const TimePicker = class {
         }
       }
     };
-    this.hourUpButtonKeyDownHandler = (event) => {
-      if (this.buttonActivated(event)) {
-        this.incrementHour();
-      }
+    this.hourUpClickHandler = () => {
+      this.activeEl = this.hourEl;
+      this.hourEl.focus();
+      this.incrementHour();
     };
     this.incrementMeridiem = () => {
       const newMeridiem = this.meridiem === "AM" ? "PM" : "AM";
@@ -175,10 +229,13 @@ const TimePicker = class {
     this.incrementSecond = () => {
       this.incrementMinuteOrSecond("second");
     };
-    this.meridiemDownButtonKeyDownHandler = (event) => {
-      if (this.buttonActivated(event)) {
-        this.decrementMeridiem();
-      }
+    this.inputClickHandler = (event) => {
+      this.activeEl = event.target;
+    };
+    this.meridiemUpClickHandler = () => {
+      this.activeEl = this.meridiemEl;
+      this.meridiemEl.focus();
+      this.incrementMeridiem();
     };
     this.meridiemKeyDownHandler = (event) => {
       switch (event.key) {
@@ -205,15 +262,20 @@ const TimePicker = class {
           break;
       }
     };
-    this.meridiemUpButtonKeyDownHandler = (event) => {
-      if (this.buttonActivated(event)) {
-        this.incrementMeridiem();
-      }
+    this.meridiemDownClickHandler = () => {
+      this.activeEl = this.meridiemEl;
+      this.meridiemEl.focus();
+      this.decrementMeridiem();
     };
-    this.minuteDownButtonKeyDownHandler = (event) => {
-      if (this.buttonActivated(event)) {
-        this.decrementMinute();
-      }
+    this.minuteDownClickHandler = () => {
+      this.activeEl = this.minuteEl;
+      this.minuteEl.focus();
+      this.decrementMinute();
+    };
+    this.minuteUpClickHandler = () => {
+      this.activeEl = this.minuteEl;
+      this.minuteEl.focus();
+      this.incrementMinute();
     };
     this.minuteKeyDownHandler = (event) => {
       const { key } = event;
@@ -252,16 +314,51 @@ const TimePicker = class {
         }
       }
     };
-    this.minuteUpButtonKeyDownHandler = (event) => {
-      if (this.buttonActivated(event)) {
-        this.incrementMinute();
+    this.nudgeFractionalSecond = (direction) => {
+      const stepDecimal = getDecimals(this.step);
+      const stepPrecision = decimalPlaces(this.step);
+      const fractionalSecondAsInteger = parseInt(this.fractionalSecond);
+      const fractionalSecondAsFloat = parseFloat(`0.${this.fractionalSecond}`);
+      let nudgedValue;
+      let nudgedValueRounded;
+      let nudgedValueRoundedDecimals;
+      let newFractionalSecond;
+      if (direction === "up") {
+        nudgedValue = isNaN(fractionalSecondAsInteger) ? 0 : fractionalSecondAsFloat + stepDecimal;
+        nudgedValueRounded = parseFloat(nudgedValue.toFixed(stepPrecision));
+        nudgedValueRoundedDecimals = getDecimals(nudgedValueRounded);
+        newFractionalSecond =
+          nudgedValueRounded < 1 && decimalPlaces(nudgedValueRoundedDecimals) > 0
+            ? formatTimePart(nudgedValueRoundedDecimals, stepPrecision)
+            : "".padStart(stepPrecision, "0");
+      }
+      if (direction === "down") {
+        nudgedValue =
+          isNaN(fractionalSecondAsInteger) || fractionalSecondAsInteger === 0
+            ? 1 - stepDecimal
+            : fractionalSecondAsFloat - stepDecimal;
+        nudgedValueRounded = parseFloat(nudgedValue.toFixed(stepPrecision));
+        nudgedValueRoundedDecimals = getDecimals(nudgedValueRounded);
+        newFractionalSecond =
+          nudgedValueRounded < 1 &&
+            decimalPlaces(nudgedValueRoundedDecimals) > 0 &&
+            Math.sign(nudgedValueRoundedDecimals) === 1
+            ? formatTimePart(nudgedValueRoundedDecimals, stepPrecision)
+            : "".padStart(stepPrecision, "0");
       }
+      this.setValuePart("fractionalSecond", newFractionalSecond);
     };
-    this.secondDownButtonKeyDownHandler = (event) => {
-      if (this.buttonActivated(event)) {
-        this.decrementSecond();
+    this.sanitizeValue = (value) => {
+      const { hour, minute, second, fractionalSecond } = parseTimeString(value);
+      if (fractionalSecond) {
+        const sanitizedFractionalSecond = this.sanitizeFractionalSecond(fractionalSecond);
+        return `${hour}:${minute}:${second}.${sanitizedFractionalSecond}`;
       }
+      return isValidTime(value) && value;
     };
+    this.sanitizeFractionalSecond = (fractionalSecond) => fractionalSecond && decimalPlaces(this.step) !== fractionalSecond.length
+      ? parseFloat(`0.${fractionalSecond}`).toFixed(decimalPlaces(this.step)).replace("0.", "")
+      : fractionalSecond;
     this.secondKeyDownHandler = (event) => {
       const { key } = event;
       if (numberKeys.includes(key)) {
@@ -299,29 +396,38 @@ const TimePicker = class {
         }
       }
     };
-    this.secondUpButtonKeyDownHandler = (event) => {
-      if (this.buttonActivated(event)) {
-        this.incrementSecond();
-      }
+    this.secondDownClickHandler = () => {
+      this.activeEl = this.secondEl;
+      this.secondEl.focus();
+      this.decrementSecond();
+    };
+    this.secondUpClickHandler = () => {
+      this.activeEl = this.secondEl;
+      this.secondEl.focus();
+      this.incrementSecond();
     };
     this.setHourEl = (el) => (this.hourEl = el);
     this.setMeridiemEl = (el) => (this.meridiemEl = el);
     this.setMinuteEl = (el) => (this.minuteEl = el);
     this.setSecondEl = (el) => (this.secondEl = el);
-    this.setValue = (value, emit = true) => {
+    this.setFractionalSecondEl = (el) => (this.fractionalSecondEl = el);
+    this.setValue = (value) => {
       if (isValidTime(value)) {
-        const { hour, minute, second } = parseTimeString(value);
+        const { hour, minute, second, fractionalSecond } = parseTimeString(value);
         const { effectiveLocale: locale, numberingSystem } = this;
-        const { localizedHour, localizedHourSuffix, localizedMinute, localizedMinuteSuffix, localizedSecond, localizedSecondSuffix, localizedMeridiem, } = localizeTimeStringToParts({ value, locale, numberingSystem });
+        const { localizedHour, localizedHourSuffix, localizedMinute, localizedMinuteSuffix, localizedSecond, localizedDecimalSeparator, localizedFractionalSecond, localizedSecondSuffix, localizedMeridiem, } = localizeTimeStringToParts({ value, locale, numberingSystem });
+        this.hour = hour;
+        this.minute = minute;
+        this.second = second;
+        this.fractionalSecond = this.sanitizeFractionalSecond(fractionalSecond);
         this.localizedHour = localizedHour;
         this.localizedHourSuffix = localizedHourSuffix;
         this.localizedMinute = localizedMinute;
         this.localizedMinuteSuffix = localizedMinuteSuffix;
         this.localizedSecond = localizedSecond;
+        this.localizedDecimalSeparator = localizedDecimalSeparator;
+        this.localizedFractionalSecond = localizedFractionalSecond;
         this.localizedSecondSuffix = localizedSecondSuffix;
-        this.hour = hour;
-        this.minute = minute;
-        this.second = second;
         if (localizedMeridiem) {
           this.localizedMeridiem = localizedMeridiem;
           this.meridiem = getMeridiem(this.hour);
@@ -331,23 +437,23 @@ const TimePicker = class {
       }
       else {
         this.hour = null;
+        this.fractionalSecond = null;
         this.localizedHour = null;
-        this.localizedHourSuffix = null;
+        this.localizedHourSuffix = getLocalizedTimePartSuffix("hour", this.effectiveLocale, this.numberingSystem);
         this.localizedMeridiem = null;
         this.localizedMinute = null;
-        this.localizedMinuteSuffix = null;
+        this.localizedMinuteSuffix = getLocalizedTimePartSuffix("minute", this.effectiveLocale, this.numberingSystem);
         this.localizedSecond = null;
-        this.localizedSecondSuffix = null;
+        this.localizedDecimalSeparator = getLocalizedDecimalSeparator(this.effectiveLocale, this.numberingSystem);
+        this.localizedFractionalSecond = null;
+        this.localizedSecondSuffix = getLocalizedTimePartSuffix("second", this.effectiveLocale, this.numberingSystem);
         this.meridiem = null;
         this.minute = null;
         this.second = null;
         this.value = null;
       }
-      if (emit) {
-        this.calciteInternalTimePickerChange.emit();
-      }
     };
-    this.setValuePart = (key, value, emit = true) => {
+    this.setValuePart = (key, value) => {
       var _a, _b;
       const { effectiveLocale: locale, numberingSystem } = this;
       if (key === "meridiem") {
@@ -374,6 +480,22 @@ const TimePicker = class {
           });
         }
       }
+      else if (key === "fractionalSecond") {
+        const stepPrecision = decimalPlaces(this.step);
+        if (typeof value === "number") {
+          this.fractionalSecond =
+            value === 0 ? "".padStart(stepPrecision, "0") : formatTimePart(value, stepPrecision);
+        }
+        else {
+          this.fractionalSecond = value;
+        }
+        this.localizedFractionalSecond = localizeTimePart({
+          value: this.fractionalSecond,
+          part: "fractionalSecond",
+          locale,
+          numberingSystem,
+        });
+      }
       else {
         this[key] = typeof value === "number" ? formatTimePart(value) : value;
         this[`localized${capitalize(key)}`] = localizeTimePart({
@@ -383,16 +505,24 @@ const TimePicker = class {
           numberingSystem,
         });
       }
+      let emit = false;
+      let newValue;
       if (this.hour && this.minute) {
-        let newValue = `${this.hour}:${this.minute}`;
+        newValue = `${this.hour}:${this.minute}`;
         if (this.showSecond) {
           newValue = `${newValue}:${(_a = this.second) !== null && _a !== void 0 ? _a : "00"}`;
+          if (this.showFractionalSecond && this.fractionalSecond) {
+            newValue = `${newValue}.${this.fractionalSecond}`;
+          }
         }
-        this.value = newValue;
       }
       else {
-        this.value = null;
+        newValue = null;
+      }
+      if (this.value !== newValue) {
+        emit = true;
       }
+      this.value = newValue;
       this.localizedMeridiem = this.value
         ? ((_b = localizeTimeStringToParts({ value: this.value, locale, numberingSystem })) === null || _b === void 0 ? void 0 : _b.localizedMeridiem) || null
         : localizeTimePart({ value: this.meridiem, part: "meridiem", locale, numberingSystem });
@@ -406,12 +536,16 @@ const TimePicker = class {
     this.value = null;
     this.messages = undefined;
     this.messageOverrides = undefined;
+    this.activeEl = undefined;
     this.effectiveLocale = "";
+    this.fractionalSecond = undefined;
     this.hour = undefined;
     this.hourCycle = undefined;
+    this.localizedDecimalSeparator = ".";
     this.localizedHour = undefined;
     this.localizedHourSuffix = undefined;
     this.localizedMeridiem = undefined;
+    this.localizedFractionalSecond = undefined;
     this.localizedMinute = undefined;
     this.localizedMinuteSuffix = undefined;
     this.localizedSecond = undefined;
@@ -419,14 +553,15 @@ const TimePicker = class {
     this.meridiem = undefined;
     this.minute = undefined;
     this.second = undefined;
+    this.showFractionalSecond = undefined;
     this.showSecond = undefined;
     this.defaultMessages = undefined;
   }
   stepChange() {
-    this.updateShowSecond();
+    this.toggleSecond();
   }
   valueWatcher(newValue) {
-    this.setValue(newValue, false);
+    this.setValue(newValue);
   }
   onMessagesChange() {
     /* wired up by t9n util */
@@ -439,13 +574,16 @@ const TimePicker = class {
   //  Event Listeners
   //
   //--------------------------------------------------------------------------
-  hostBlurHandler() {
+  blurHandler() {
+    this.activeEl = undefined;
+    this.pointerActivated = false;
     this.calciteInternalTimePickerBlur.emit();
   }
   hostFocusHandler() {
     this.calciteInternalTimePickerFocus.emit();
   }
   keyDownHandler(event) {
+    this.pointerActivated = false;
     const { defaultPrevented, key } = event;
     if (defaultPrevented) {
       return;
@@ -481,6 +619,23 @@ const TimePicker = class {
             this.focusPart("minute");
             event.preventDefault();
             break;
+          case "ArrowRight":
+            if (this.showFractionalSecond) {
+              this.focusPart("fractionalSecond");
+            }
+            else if (this.hourCycle === "12") {
+              this.focusPart("meridiem");
+              event.preventDefault();
+            }
+            break;
+        }
+        break;
+      case this.fractionalSecondEl:
+        switch (key) {
+          case "ArrowLeft":
+            this.focusPart("second");
+            event.preventDefault();
+            break;
           case "ArrowRight":
             if (this.hourCycle === "12") {
               this.focusPart("meridiem");
@@ -492,7 +647,10 @@ const TimePicker = class {
       case this.meridiemEl:
         switch (key) {
           case "ArrowLeft":
-            if (this.step !== 60) {
+            if (this.showFractionalSecond) {
+              this.focusPart("fractionalSecond");
+            }
+            else if (this.step !== 60) {
               this.focusPart("second");
               event.preventDefault();
             }
@@ -505,6 +663,9 @@ const TimePicker = class {
         break;
     }
   }
+  pointerDownHandler() {
+    this.pointerActivated = true;
+  }
   //--------------------------------------------------------------------------
   //
   //  Public Methods
@@ -523,20 +684,14 @@ const TimePicker = class {
   //  Private Methods
   //
   // --------------------------------------------------------------------------
-  updateShowSecond() {
-    this.showSecond = this.step < 60;
-  }
   async focusPart(target) {
     var _a;
     await componentFocusable(this);
     (_a = this[`${target || "hour"}El`]) === null || _a === void 0 ? void 0 : _a.focus();
   }
-  buttonActivated(event) {
-    const { key } = event;
-    if (key === " ") {
-      event.preventDefault();
-    }
-    return isActivationKey(key);
+  toggleSecond() {
+    this.showSecond = this.step < 60;
+    this.showFractionalSecond = decimalPlaces(this.step) > 0;
   }
   getMeridiemOrder(formatParts) {
     const locale = this.effectiveLocale;
@@ -552,7 +707,8 @@ const TimePicker = class {
   updateLocale() {
     updateMessages(this, this.effectiveLocale);
     this.hourCycle = getLocaleHourCycle(this.effectiveLocale, this.numberingSystem);
-    this.setValue(this.value, false);
+    this.localizedDecimalSeparator = getLocalizedDecimalSeparator(this.effectiveLocale, this.numberingSystem);
+    this.setValue(this.sanitizeValue(this.value));
   }
   // --------------------------------------------------------------------------
   //
@@ -563,7 +719,7 @@ const TimePicker = class {
     connectLocalized(this);
     this.updateLocale();
     connectMessages(this);
-    this.updateShowSecond();
+    this.toggleSecond();
     this.meridiemOrder = this.getMeridiemOrder(getTimeParts({
       value: "0:00:00",
       locale: this.effectiveLocale,
@@ -591,6 +747,7 @@ const TimePicker = class {
     const iconScale = this.scale === "s" || this.scale === "m" ? "s" : "m";
     const minuteIsNumber = isValidNumber(this.minute);
     const secondIsNumber = isValidNumber(this.second);
+    const fractionalSecondIsNumber = isValidNumber(this.fractionalSecond);
     const showMeridiem = this.hourCycle === "12";
     return (h("div", { class: {
         [CSS.timePicker]: true,
@@ -601,54 +758,70 @@ const TimePicker = class {
         [CSS.button]: true,
         [CSS.buttonHourUp]: true,
         [CSS.buttonTopLeft]: true,
-      }, onClick: this.incrementHour, onKeyDown: this.hourUpButtonKeyDownHandler, role: "button" }, h("calcite-icon", { icon: "chevron-up", scale: iconScale })), h("span", { "aria-label": this.messages.hour, "aria-valuemax": "23", "aria-valuemin": "1", "aria-valuenow": (hourIsNumber && parseInt(this.hour)) || "0", "aria-valuetext": this.hour, class: {
+      }, onClick: this.hourUpClickHandler, role: "button" }, h("calcite-icon", { icon: "chevron-up", scale: iconScale })), h("span", { "aria-label": this.messages.hour, "aria-valuemax": "23", "aria-valuemin": "1", "aria-valuenow": (hourIsNumber && parseInt(this.hour)) || "0", "aria-valuetext": this.hour, class: {
         [CSS.input]: true,
         [CSS.hour]: true,
-      }, onFocus: this.focusHandler, onKeyDown: this.hourKeyDownHandler, role: "spinbutton", tabIndex: 0,
-      // eslint-disable-next-line react/jsx-sort-props
+        [CSS.inputFocus]: this.activeEl && this.activeEl === this.hourEl,
+      }, onClick: this.inputClickHandler, onFocus: this.focusHandler, onKeyDown: this.hourKeyDownHandler, role: "spinbutton", tabIndex: 0,
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setHourEl }, this.localizedHour || "--"), h("span", { "aria-label": this.messages.hourDown, class: {
         [CSS.button]: true,
         [CSS.buttonHourDown]: true,
         [CSS.buttonBottomLeft]: true,
-      }, onClick: this.decrementHour, onKeyDown: this.hourDownButtonKeyDownHandler, role: "button" }, h("calcite-icon", { icon: "chevron-down", scale: iconScale }))), h("span", { class: CSS.delimiter }, this.localizedHourSuffix), h("div", { class: CSS.column, role: "group" }, h("span", { "aria-label": this.messages.minuteUp, class: {
+      }, onClick: this.hourDownClickHandler, role: "button" }, h("calcite-icon", { icon: "chevron-down", scale: iconScale }))), h("span", { class: CSS.delimiter }, this.localizedHourSuffix), h("div", { class: CSS.column, role: "group" }, h("span", { "aria-label": this.messages.minuteUp, class: {
         [CSS.button]: true,
         [CSS.buttonMinuteUp]: true,
-      }, onClick: this.incrementMinute, onKeyDown: this.minuteUpButtonKeyDownHandler, role: "button", tabIndex: -1 }, h("calcite-icon", { icon: "chevron-up", scale: iconScale })), h("span", { "aria-label": this.messages.minute, "aria-valuemax": "12", "aria-valuemin": "1", "aria-valuenow": (minuteIsNumber && parseInt(this.minute)) || "0", "aria-valuetext": this.minute, class: {
+      }, onClick: this.minuteUpClickHandler, role: "button" }, h("calcite-icon", { icon: "chevron-up", scale: iconScale })), h("span", { "aria-label": this.messages.minute, "aria-valuemax": "12", "aria-valuemin": "1", "aria-valuenow": (minuteIsNumber && parseInt(this.minute)) || "0", "aria-valuetext": this.minute, class: {
         [CSS.input]: true,
         [CSS.minute]: true,
-      }, onFocus: this.focusHandler, onKeyDown: this.minuteKeyDownHandler, role: "spinbutton", tabIndex: 0,
-      // eslint-disable-next-line react/jsx-sort-props
+        [CSS.inputFocus]: this.activeEl && this.activeEl === this.minuteEl,
+      }, onClick: this.inputClickHandler, onFocus: this.focusHandler, onKeyDown: this.minuteKeyDownHandler, role: "spinbutton", tabIndex: 0,
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setMinuteEl }, this.localizedMinute || "--"), h("span", { "aria-label": this.messages.minuteDown, class: {
         [CSS.button]: true,
         [CSS.buttonMinuteDown]: true,
-      }, onClick: this.decrementMinute, onKeyDown: this.minuteDownButtonKeyDownHandler, role: "button" }, h("calcite-icon", { icon: "chevron-down", scale: iconScale }))), this.showSecond && h("span", { class: CSS.delimiter }, this.localizedMinuteSuffix), this.showSecond && (h("div", { class: CSS.column, role: "group" }, h("span", { "aria-label": this.messages.secondUp, class: {
+      }, onClick: this.minuteDownClickHandler, role: "button" }, h("calcite-icon", { icon: "chevron-down", scale: iconScale }))), this.showSecond && h("span", { class: CSS.delimiter }, this.localizedMinuteSuffix), this.showSecond && (h("div", { class: CSS.column, role: "group" }, h("span", { "aria-label": this.messages.secondUp, class: {
         [CSS.button]: true,
         [CSS.buttonSecondUp]: true,
-      }, onClick: this.incrementSecond, onKeyDown: this.secondUpButtonKeyDownHandler, role: "button" }, h("calcite-icon", { icon: "chevron-up", scale: iconScale })), h("span", { "aria-label": this.messages.second, "aria-valuemax": "59", "aria-valuemin": "0", "aria-valuenow": (secondIsNumber && parseInt(this.second)) || "0", "aria-valuetext": this.second, class: {
+      }, onClick: this.secondUpClickHandler, role: "button" }, h("calcite-icon", { icon: "chevron-up", scale: iconScale })), h("span", { "aria-label": this.messages.second, "aria-valuemax": "59", "aria-valuemin": "0", "aria-valuenow": (secondIsNumber && parseInt(this.second)) || "0", "aria-valuetext": this.second, class: {
         [CSS.input]: true,
         [CSS.second]: true,
-      }, onFocus: this.focusHandler, onKeyDown: this.secondKeyDownHandler, role: "spinbutton", tabIndex: 0,
-      // eslint-disable-next-line react/jsx-sort-props
+        [CSS.inputFocus]: this.activeEl && this.activeEl === this.secondEl,
+      }, onClick: this.inputClickHandler, onFocus: this.focusHandler, onKeyDown: this.secondKeyDownHandler, role: "spinbutton", tabIndex: 0,
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setSecondEl }, this.localizedSecond || "--"), h("span", { "aria-label": this.messages.secondDown, class: {
         [CSS.button]: true,
         [CSS.buttonSecondDown]: true,
-      }, onClick: this.decrementSecond, onKeyDown: this.secondDownButtonKeyDownHandler, role: "button" }, h("calcite-icon", { icon: "chevron-down", scale: iconScale })))), this.localizedSecondSuffix && (h("span", { class: CSS.delimiter }, this.localizedSecondSuffix)), showMeridiem && (h("div", { class: {
+      }, onClick: this.secondDownClickHandler, role: "button" }, h("calcite-icon", { icon: "chevron-down", scale: iconScale })))), this.showFractionalSecond && (h("span", { class: CSS.delimiter }, this.localizedDecimalSeparator)), this.showFractionalSecond && (h("div", { class: CSS.column, role: "group" }, h("span", { "aria-label": this.messages.fractionalSecondUp, class: {
+        [CSS.button]: true,
+        [CSS.buttonFractionalSecondUp]: true,
+      }, onClick: this.fractionalSecondUpClickHandler, role: "button" }, h("calcite-icon", { icon: "chevron-up", scale: iconScale })), h("span", { "aria-label": this.messages.fractionalSecond, "aria-valuemax": "999", "aria-valuemin": "1", "aria-valuenow": (fractionalSecondIsNumber && parseInt(this.fractionalSecond)) || "0", "aria-valuetext": this.localizedFractionalSecond, class: {
+        [CSS.input]: true,
+        [CSS.fractionalSecond]: true,
+        [CSS.inputFocus]: this.activeEl && this.activeEl === this.fractionalSecondEl,
+      }, onClick: this.inputClickHandler, onFocus: this.focusHandler, onKeyDown: this.fractionalSecondKeyDownHandler, role: "spinbutton", tabIndex: 0,
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+      ref: this.setFractionalSecondEl }, this.localizedFractionalSecond || "--"), h("span", { "aria-label": this.messages.fractionalSecondDown, class: {
+        [CSS.button]: true,
+        [CSS.buttonFractionalSecondDown]: true,
+      }, onClick: this.fractionalSecondDownClickHandler, role: "button" }, h("calcite-icon", { icon: "chevron-down", scale: iconScale })))), this.localizedSecondSuffix && (h("span", { class: CSS.delimiter }, this.localizedSecondSuffix)), showMeridiem && (h("div", { class: {
         [CSS.column]: true,
         [CSS.meridiemStart]: this.meridiemOrder === 0,
       }, role: "group" }, h("span", { "aria-label": this.messages.meridiemUp, class: {
         [CSS.button]: true,
         [CSS.buttonMeridiemUp]: true,
         [CSS.buttonTopRight]: true,
-      }, onClick: this.incrementMeridiem, onKeyDown: this.meridiemUpButtonKeyDownHandler, role: "button" }, h("calcite-icon", { icon: "chevron-up", scale: iconScale })), h("span", { "aria-label": this.messages.meridiem, "aria-valuemax": "2", "aria-valuemin": "1", "aria-valuenow": (this.meridiem === "PM" && "2") || "1", "aria-valuetext": this.meridiem, class: {
+      }, onClick: this.meridiemUpClickHandler, role: "button" }, h("calcite-icon", { icon: "chevron-up", scale: iconScale })), h("span", { "aria-label": this.messages.meridiem, "aria-valuemax": "2", "aria-valuemin": "1", "aria-valuenow": (this.meridiem === "PM" && "2") || "1", "aria-valuetext": this.meridiem, class: {
         [CSS.input]: true,
         [CSS.meridiem]: true,
-      }, onFocus: this.focusHandler, onKeyDown: this.meridiemKeyDownHandler, role: "spinbutton", tabIndex: 0,
-      // eslint-disable-next-line react/jsx-sort-props
+        [CSS.inputFocus]: this.activeEl && this.activeEl === this.meridiemEl,
+      }, onClick: this.inputClickHandler, onFocus: this.focusHandler, onKeyDown: this.meridiemKeyDownHandler, role: "spinbutton", tabIndex: 0,
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setMeridiemEl }, this.localizedMeridiem || "--"), h("span", { "aria-label": this.messages.meridiemDown, class: {
         [CSS.button]: true,
         [CSS.buttonMeridiemDown]: true,
         [CSS.buttonBottomRight]: true,
-      }, onClick: this.decrementMeridiem, onKeyDown: this.meridiemDownButtonKeyDownHandler, role: "button" }, h("calcite-icon", { icon: "chevron-down", scale: iconScale }))))));
+      }, onClick: this.meridiemDownClickHandler, role: "button" }, h("calcite-icon", { icon: "chevron-down", scale: iconScale }))))));
   }
   static get delegatesFocus() { return true; }
   static get assetsDirs() { return ["assets"]; }