@esri/solutions-components 0.6.15 → 0.6.16

package/dist/components/time-picker.js

@@ -4,19 +4,20 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { n as numberKeys, i as isActivationKey } from './key.js';
-import { b as getDateTimeFormat, i as isValidNumber, e as getSupportedNumberingSystem, c as connectLocalized, d as disconnectLocalized } from './locale2.js';
+import { n as numberKeys } from './key.js';
+import { n as numberStringFormatter, b as getDateTimeFormat, i as isValidNumber, f as getSupportedNumberingSystem, c as connectLocalized, d as disconnectLocalized } from './locale2.js';
 import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n.js';
+import { d as decimalPlaces, g as getDecimals } from './math.js';
 import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable.js';
 import { d as defineCustomElement$1 } from './icon.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 maxTenthForMinuteAndSecond = 5;
-function createLocaleDateTimeFormatter(locale, numberingSystem, includeSeconds = true) {
+function createLocaleDateTimeFormatter(locale, numberingSystem, includeSeconds = true, fractionalSecondDigits) {
   const options = {
     hour: "2-digit",
     minute: "2-digit",
@@ -25,31 +26,69 @@ function createLocaleDateTimeFormatter(locale, numberingSystem, includeSeconds =
   };
   if (includeSeconds) {
     options.second = "2-digit";
+    if (fractionalSecondDigits) {
+      options.fractionalSecondDigits = fractionalSecondDigits;
+    }
   }
   return getDateTimeFormat(locale, options);
 }
-function formatTimePart(number) {
+function formatTimePart(number, minLength) {
+  if (number === null || number === undefined) {
+    return;
+  }
   const numberAsString = number.toString();
-  return number >= 0 && number <= 9 ? numberAsString.padStart(2, "0") : numberAsString;
+  const numberDecimalPlaces = decimalPlaces(number);
+  if (number < 1 && numberDecimalPlaces > 0 && numberDecimalPlaces < 4) {
+    const fractionalDigits = numberAsString.replace("0.", "");
+    if (!minLength || fractionalDigits.length === minLength) {
+      return fractionalDigits;
+    }
+    if (fractionalDigits.length < minLength) {
+      return fractionalDigits.padEnd(minLength, "0");
+    }
+    return fractionalDigits;
+  }
+  if (number >= 0 && number < 10) {
+    return numberAsString.padStart(2, "0");
+  }
+  if (number >= 10) {
+    return 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}`;
+  const { hour, minute, second, fractionalSecond } = parseTimeString(value);
+  let formattedValue = `${formatTimePart(parseInt(hour))}:${formatTimePart(parseInt(minute))}`;
+  if (second) {
+    formattedValue += `:${formatTimePart(parseInt(second))}`;
+    if (fractionalSecond) {
+      formattedValue += `.${fractionalSecond}`;
+    }
   }
-  return `${hour}:${minute}`;
+  return formattedValue;
+}
+function fractionalSecondPartToMilliseconds(fractionalSecondPart) {
+  return parseInt((parseFloat(`0.${fractionalSecondPart}`) / 0.001).toFixed(3));
 }
 function getLocaleHourCycle(locale, numberingSystem) {
   const formatter = createLocaleDateTimeFormatter(locale, numberingSystem);
   const parts = formatter.formatToParts(new Date(Date.UTC(0, 0, 0, 0, 0, 0)));
   return getLocalizedTimePart("meridiem", parts) ? "12" : "24";
 }
+function getLocalizedDecimalSeparator(locale, numberingSystem) {
+  numberStringFormatter.numberFormatOptions = {
+    locale,
+    numberingSystem,
+  };
+  return numberStringFormatter.localize("1.1").split("")[1];
+}
+function getLocalizedTimePartSuffix(part, locale, numberingSystem = "latn") {
+  const formatter = createLocaleDateTimeFormatter(locale, numberingSystem);
+  const parts = formatter.formatToParts(new Date(Date.UTC(0, 0, 0, 0, 0, 0)));
+  return getLocalizedTimePart(`${part}Suffix`, parts);
+}
 function getLocalizedTimePart(part, parts) {
   if (!part || !parts) {
     return null;
@@ -115,6 +154,29 @@ function isValidTimePart(value, part) {
   return part === "hour" ? valueAsNumber >= 0 && valueAsNumber < 24 : valueAsNumber >= 0 && valueAsNumber < 60;
 }
 function localizeTimePart({ value, part, locale, numberingSystem }) {
+  if (part === "fractionalSecond") {
+    const localizedDecimalSeparator = getLocalizedDecimalSeparator(locale, numberingSystem);
+    let localizedFractionalSecond = null;
+    if (value) {
+      numberStringFormatter.numberFormatOptions = {
+        locale,
+        numberingSystem,
+      };
+      const localizedZero = numberStringFormatter.localize("0");
+      if (parseInt(value) === 0) {
+        localizedFractionalSecond = "".padStart(value.length, localizedZero);
+      }
+      else {
+        localizedFractionalSecond = numberStringFormatter
+          .localize(`0.${value}`)
+          .replace(`${localizedZero}${localizedDecimalSeparator}`, "");
+        if (localizedFractionalSecond.length < value.length) {
+          localizedFractionalSecond = localizedFractionalSecond.padEnd(value.length, localizedZero);
+        }
+      }
+    }
+    return localizedFractionalSecond;
+  }
   if (!isValidTimePart(value, part)) {
     return;
   }
@@ -127,20 +189,20 @@ function localizeTimePart({ value, part, locale, numberingSystem }) {
   const parts = formatter.formatToParts(date);
   return getLocalizedTimePart(part, parts);
 }
-function localizeTimeString({ value, locale, numberingSystem, includeSeconds = true, }) {
+function localizeTimeString({ value, locale, numberingSystem, includeSeconds = true, fractionalSecondDigits, }) {
   if (!isValidTime(value)) {
     return null;
   }
-  const { hour, minute, second = "0" } = parseTimeString(value);
-  const dateFromTimeString = new Date(Date.UTC(0, 0, 0, parseInt(hour), parseInt(minute), parseInt(second)));
-  const formatter = createLocaleDateTimeFormatter(locale, numberingSystem, includeSeconds);
-  return formatter?.format(dateFromTimeString) || null;
+  const { hour, minute, second = "0", fractionalSecond } = parseTimeString(value);
+  const dateFromTimeString = new Date(Date.UTC(0, 0, 0, parseInt(hour), parseInt(minute), parseInt(second), fractionalSecond && fractionalSecondPartToMilliseconds(fractionalSecond)));
+  const formatter = createLocaleDateTimeFormatter(locale, numberingSystem, includeSeconds, fractionalSecondDigits);
+  return formatter.format(dateFromTimeString) || null;
 }
-function localizeTimeStringToParts({ value, locale, numberingSystem, }) {
+function localizeTimeStringToParts({ value, locale, numberingSystem = "latn", }) {
   if (!isValidTime(value)) {
     return null;
   }
-  const { hour, minute, second = "0" } = parseTimeString(value);
+  const { hour, minute, second = "0", fractionalSecond } = parseTimeString(value);
   const dateFromTimeString = new Date(Date.UTC(0, 0, 0, parseInt(hour), parseInt(minute), parseInt(second)));
   if (dateFromTimeString) {
     const formatter = createLocaleDateTimeFormatter(locale, numberingSystem);
@@ -151,6 +213,13 @@ function localizeTimeStringToParts({ value, locale, numberingSystem, }) {
       localizedMinute: getLocalizedTimePart("minute", parts),
       localizedMinuteSuffix: getLocalizedTimePart("minuteSuffix", parts),
       localizedSecond: getLocalizedTimePart("second", parts),
+      localizedDecimalSeparator: getLocalizedDecimalSeparator(locale, numberingSystem),
+      localizedFractionalSecond: localizeTimePart({
+        value: fractionalSecond,
+        part: "fractionalSecond",
+        locale,
+        numberingSystem,
+      }),
       localizedSecondSuffix: getLocalizedTimePart("secondSuffix", parts),
       localizedMeridiem: getLocalizedTimePart("meridiem", parts),
     };
@@ -172,14 +241,21 @@ function getTimeParts({ value, locale, numberingSystem }) {
 }
 function parseTimeString(value) {
   if (isValidTime(value)) {
-    const [hour, minute, second] = value.split(":");
+    const [hour, minute, secondDecimal] = value.split(":");
+    let second = secondDecimal;
+    let fractionalSecond = null;
+    if (secondDecimal?.includes(".")) {
+      [second, fractionalSecond] = secondDecimal.split(".");
+    }
     return {
+      fractionalSecond,
       hour,
       minute,
       second,
     };
   }
   return {
+    fractionalSecond: null,
     hour: null,
     minute: null,
     second: null,
@@ -189,10 +265,13 @@ function toISOTimeString(value, includeSeconds = true) {
   if (!isValidTime(value)) {
     return "";
   }
-  const { hour, minute, second } = parseTimeString(value);
+  const { hour, minute, second, fractionalSecond } = parseTimeString(value);
   let isoTimeString = `${formatTimePart(parseInt(hour))}:${formatTimePart(parseInt(minute))}`;
   if (includeSeconds) {
     isoTimeString += `:${formatTimePart(parseInt((includeSeconds && second) || "0"))}`;
+    if (fractionalSecond) {
+      isoTimeString += `.${fractionalSecond}`;
+    }
   }
   return isoTimeString;
 }
@@ -200,12 +279,14 @@ function toISOTimeString(value, includeSeconds = true) {
 /*!
  * 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",
@@ -218,8 +299,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",
@@ -232,7 +315,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);
@@ -245,6 +328,7 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class TimePicker extends HTM
     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);
@@ -271,12 +355,60 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class TimePicker extends HTM
       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;
@@ -329,10 +461,10 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class TimePicker extends HTM
         }
       }
     };
-    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";
@@ -360,10 +492,13 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class TimePicker extends HTM
     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) {
@@ -390,15 +525,20 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class TimePicker extends HTM
           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;
@@ -437,16 +577,51 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class TimePicker extends HTM
         }
       }
     };
-    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)) {
@@ -484,29 +659,38 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class TimePicker extends HTM
         }
       }
     };
-    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);
@@ -516,23 +700,23 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class TimePicker extends HTM
       }
       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") {
@@ -559,6 +743,22 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class TimePicker extends HTM
           });
         }
       }
+      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({
@@ -568,16 +768,24 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class TimePicker extends HTM
           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 });
@@ -591,12 +799,16 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class TimePicker extends HTM
     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;
@@ -604,14 +816,15 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class TimePicker extends HTM
     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 */
@@ -624,13 +837,16 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class TimePicker extends HTM
   //  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;
@@ -666,6 +882,23 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class TimePicker extends HTM
             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");
@@ -677,7 +910,10 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class TimePicker extends HTM
       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();
             }
@@ -690,6 +926,9 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class TimePicker extends HTM
         break;
     }
   }
+  pointerDownHandler() {
+    this.pointerActivated = true;
+  }
   //--------------------------------------------------------------------------
   //
   //  Public Methods
@@ -708,20 +947,14 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class TimePicker extends HTM
   //  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;
@@ -737,7 +970,8 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class TimePicker extends HTM
   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));
   }
   // --------------------------------------------------------------------------
   //
@@ -748,7 +982,7 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class TimePicker extends HTM
     connectLocalized(this);
     this.updateLocale();
     connectMessages(this);
-    this.updateShowSecond();
+    this.toggleSecond();
     this.meridiemOrder = this.getMeridiemOrder(getTimeParts({
       value: "0:00:00",
       locale: this.effectiveLocale,
@@ -776,6 +1010,7 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class TimePicker extends HTM
     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,
@@ -786,54 +1021,70 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class TimePicker extends HTM
         [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"]; }
@@ -852,12 +1103,16 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class TimePicker extends HTM
     "value": [1025],
     "messages": [1040],
     "messageOverrides": [1040],
+    "activeEl": [32],
     "effectiveLocale": [32],
+    "fractionalSecond": [32],
     "hour": [32],
     "hourCycle": [32],
+    "localizedDecimalSeparator": [32],
     "localizedHour": [32],
     "localizedHourSuffix": [32],
     "localizedMeridiem": [32],
+    "localizedFractionalSecond": [32],
     "localizedMinute": [32],
     "localizedMinuteSuffix": [32],
     "localizedSecond": [32],
@@ -865,10 +1120,11 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class TimePicker extends HTM
     "meridiem": [32],
     "minute": [32],
     "second": [32],
+    "showFractionalSecond": [32],
     "showSecond": [32],
     "defaultMessages": [32],
     "setFocus": [64]
-  }, [[0, "blur", "hostBlurHandler"], [0, "focus", "hostFocusHandler"], [0, "keydown", "keyDownHandler"]]]);
+  }, [[0, "blur", "blurHandler"], [0, "focus", "hostFocusHandler"], [0, "keydown", "keyDownHandler"], [1, "pointerdown", "pointerDownHandler"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
@@ -889,4 +1145,4 @@ function defineCustomElement() {
 }
 defineCustomElement();
 
-export { TimePicker as T, defineCustomElement as d, formatTimeString as f, isValidTime as i, localizeTimeString as l, toISOTimeString as t };
+export { TimePicker as T, formatTimePart as a, defineCustomElement as d, formatTimeString as f, isValidTime as i, localizeTimeString as l, toISOTimeString as t };