@esri/calcite-components 1.7.0-next.13 → 1.7.0-next.14

package/dist/esm/{calcite-input-time-picker.calcite-time-picker-c2e3e738.js → calcite-input-time-picker.calcite-time-picker-e496d079.js}

@@ -1,21 +1,22 @@
 /*!
  * 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.7.0-next.13
+ * v1.7.0-next.14
  */
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-b970cf2b.js';
-import { s as submitForm, c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form-44b83a17.js';
-import { g as guid } from './guid-922dbbe0.js';
-import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive-a5b4cda0.js';
-import { n as numberKeys, i as isActivationKey } from './key-4913bd62.js';
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-5ecfd527.js';
-import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-2460e79e.js';
-import { b as getDateTimeFormat, i as isValidNumber, e as getSupportedNumberingSystem, n as numberStringFormatter, g as getSupportedLocale, c as connectLocalized, d as disconnectLocalized } from './locale-ccb8fa38.js';
-import { d as deactivateFocusTrap, a as activateFocusTrap, c as connectFocusTrap } from './focusTrapComponent-5cde505c.js';
-import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n-b3120e3b.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-c3d6823a.js';
+import { s as submitForm, c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form-b226ad7f.js';
+import { g as guid } from './guid-65e9e228.js';
+import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive-fba0d02e.js';
+import { n as numberKeys } from './key-3a19d047.js';
+import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-bb6becbd.js';
+import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-68f3f302.js';
+import { n as numberStringFormatter, b as getDateTimeFormat, i as isValidNumber, e as getSupportedNumberingSystem, g as getSupportedLocale, c as connectLocalized, d as disconnectLocalized } from './locale-a489e018.js';
+import { d as deactivateFocusTrap, a as activateFocusTrap, c as connectFocusTrap } from './focusTrapComponent-9d61e99e.js';
+import { d as decimalPlaces, g as getDecimals } from './math-3c914a96.js';
+import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n-b23b3609.js';
 
 const maxTenthForMinuteAndSecond = 5;
-function createLocaleDateTimeFormatter(locale, numberingSystem, includeSeconds = true) {
+function createLocaleDateTimeFormatter(locale, numberingSystem, includeSeconds = true, fractionalSecondDigits) {
   const options = {
     hour: "2-digit",
     minute: "2-digit",
@@ -24,31 +25,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;
@@ -114,6 +153,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;
   }
@@ -126,20 +188,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);
@@ -150,6 +212,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),
     };
@@ -171,14 +240,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,
@@ -188,10 +264,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;
 }
@@ -1364,57 +1443,57 @@ const updateLocale = (function (option, Dayjs, dayjs) {
 const inputTimePickerCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-block;-webkit-user-select:none;user-select:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([scale=s]){--calcite-toggle-spacing:0.5rem}:host([scale=m]){--calcite-toggle-spacing:0.75rem}:host([scale=l]){--calcite-toggle-spacing:1rem}.input-wrapper{position:relative}.toggle-icon{position:absolute;display:flex;inline-size:1rem;cursor:pointer;align-items:center;inset-inline-end:0;inset-block:0;padding-inline:var(--calcite-toggle-spacing)}:host([hidden]){display:none}[hidden]{display:none}";
 
 // some bundlers (e.g., Webpack) need dynamic import paths to be static
-const supportedDayJsLocaleToLocaleConfigImport = new Map([
-  ["ar", () => import('./ar-7cca40ea.js')],
-  ["bg", () => import('./bg-25bf4ee6.js')],
-  ["bs", () => import('./bs-4be99035.js')],
-  ["ca", () => import('./ca-431f5ffd.js')],
-  ["cs", () => import('./cs-782d542f.js')],
-  ["da", () => import('./da-3d378e16.js')],
-  ["de", () => import('./de-7c478ee3.js')],
-  ["de-at", () => import('./de-at-c2770b6c.js')],
-  ["de-ch", () => import('./de-ch-cd4b90e9.js')],
-  ["el", () => import('./el-527357bd.js')],
+const supportedDayjsLocaleToLocaleConfigImport = new Map([
+  ["ar", () => import('./ar-78982992.js')],
+  ["bg", () => import('./bg-2f54eb5c.js')],
+  ["bs", () => import('./bs-e1e0719f.js')],
+  ["ca", () => import('./ca-3e6f25a1.js')],
+  ["cs", () => import('./cs-9fc201b1.js')],
+  ["da", () => import('./da-33cfbc62.js')],
+  ["de", () => import('./de-3462a2be.js')],
+  ["de-at", () => import('./de-at-f5ddce47.js')],
+  ["de-ch", () => import('./de-ch-24269f5d.js')],
+  ["el", () => import('./el-c753e8df.js')],
   ["en", () => Promise.resolve().then(function () { return en$1; })],
-  ["en-au", () => import('./en-au-87c50dce.js')],
-  ["en-ca", () => import('./en-ca-31d241e1.js')],
-  ["en-gb", () => import('./en-gb-92c502dc.js')],
-  ["es", () => import('./es-e8e2cbfd.js')],
-  ["es-mx", () => import('./es-mx-b9a80253.js')],
-  ["et", () => import('./et-0fb079e4.js')],
-  ["fi", () => import('./fi-572a315d.js')],
-  ["fr", () => import('./fr-d5ee90ed.js')],
-  ["fr-ch", () => import('./fr-ch-04190e70.js')],
-  ["he", () => import('./he-745cfc9f.js')],
-  ["hi", () => import('./hi-262e499d.js')],
-  ["hr", () => import('./hr-d2e680f6.js')],
-  ["hu", () => import('./hu-fd8e4a6c.js')],
-  ["id", () => import('./id-96611a8f.js')],
-  ["it", () => import('./it-6c8731eb.js')],
-  ["it-ch", () => import('./it-ch-ba049790.js')],
-  ["ja", () => import('./ja-b4d82dd3.js')],
-  ["ko", () => import('./ko-d4a90140.js')],
-  ["lt", () => import('./lt-55ff2da9.js')],
-  ["lv", () => import('./lv-c24efb10.js')],
-  ["mk", () => import('./mk-18326341.js')],
-  ["nl", () => import('./nl-26d47719.js')],
-  ["nb", () => import('./nb-48fda3d1.js')],
-  ["pl", () => import('./pl-c5d5ee7d.js')],
-  ["pt", () => import('./pt-f1559439.js')],
-  ["pt-br", () => import('./pt-br-52032196.js')],
-  ["ro", () => import('./ro-1da80b10.js')],
-  ["ru", () => import('./ru-e7cd85fd.js')],
-  ["sk", () => import('./sk-cb838437.js')],
-  ["sl", () => import('./sl-06c67a88.js')],
-  ["sr", () => import('./sr-8a02e97f.js')],
-  ["sv", () => import('./sv-3ccf128e.js')],
-  ["th", () => import('./th-bc3a4f60.js')],
-  ["tr", () => import('./tr-ca509c5a.js')],
-  ["uk", () => import('./uk-8410f044.js')],
-  ["vi", () => import('./vi-4bfdfc5e.js')],
-  ["zh-cn", () => import('./zh-cn-dc66f578.js')],
-  ["zh-hk", () => import('./zh-hk-2379a9d5.js')],
-  ["zh-tw", () => import('./zh-tw-b373850b.js')],
+  ["en-au", () => import('./en-au-2dd870a5.js')],
+  ["en-ca", () => import('./en-ca-3b7caf5c.js')],
+  ["en-gb", () => import('./en-gb-0c261721.js')],
+  ["es", () => import('./es-a5f671c5.js')],
+  ["es-mx", () => import('./es-mx-498f6751.js')],
+  ["et", () => import('./et-30d6ce3c.js')],
+  ["fi", () => import('./fi-8691a46a.js')],
+  ["fr", () => import('./fr-367c3ac4.js')],
+  ["fr-ch", () => import('./fr-ch-c3f2b21d.js')],
+  ["he", () => import('./he-5b8edc25.js')],
+  ["hi", () => import('./hi-b8afe5e9.js')],
+  ["hr", () => import('./hr-c4dce020.js')],
+  ["hu", () => import('./hu-47afc582.js')],
+  ["id", () => import('./id-029e04d5.js')],
+  ["it", () => import('./it-f16fce5f.js')],
+  ["it-ch", () => import('./it-ch-2225b563.js')],
+  ["ja", () => import('./ja-4890d0d2.js')],
+  ["ko", () => import('./ko-b98c4dd4.js')],
+  ["lt", () => import('./lt-420a6f08.js')],
+  ["lv", () => import('./lv-e2e759d9.js')],
+  ["mk", () => import('./mk-c9da4390.js')],
+  ["nl", () => import('./nl-59f3f458.js')],
+  ["nb", () => import('./nb-ee10386d.js')],
+  ["pl", () => import('./pl-acfdfd9b.js')],
+  ["pt", () => import('./pt-0fa069e9.js')],
+  ["pt-br", () => import('./pt-br-6a7dcc09.js')],
+  ["ro", () => import('./ro-82c40e0e.js')],
+  ["ru", () => import('./ru-44d1a106.js')],
+  ["sk", () => import('./sk-0c4f0332.js')],
+  ["sl", () => import('./sl-cc701750.js')],
+  ["sr", () => import('./sr-165d1437.js')],
+  ["sv", () => import('./sv-510ef66a.js')],
+  ["th", () => import('./th-5318f755.js')],
+  ["tr", () => import('./tr-abd5cab0.js')],
+  ["uk", () => import('./uk-1ba4a885.js')],
+  ["vi", () => import('./vi-a4843f0b.js')],
+  ["zh-cn", () => import('./zh-cn-ba328574.js')],
+  ["zh-hk", () => import('./zh-hk-fc8b22ac.js')],
+  ["zh-tw", () => import('./zh-tw-18ff5468.js')],
 ]);
 dayjs.extend(customParseFormat);
 dayjs.extend(localeData);
@@ -1450,6 +1529,7 @@ const InputTimePicker = class {
         locale: this.effectiveLocale,
         numberingSystem: this.numberingSystem,
         includeSeconds: this.shouldIncludeSeconds(),
+        fractionalSecondDigits: decimalPlaces(this.step),
       });
       if (localizedTimeString !== inputValue) {
         this.setInputValue(localizedTimeString);
@@ -1491,6 +1571,7 @@ const InputTimePicker = class {
         locale: this.effectiveLocale,
         numberingSystem: this.numberingSystem,
         includeSeconds,
+        fractionalSecondDigits: decimalPlaces(this.step),
       }));
     };
     this.popoverCloseHandler = () => {
@@ -1525,15 +1606,18 @@ const InputTimePicker = class {
           return;
         }
         const newValue = this.delocalizeTimeString(this.calciteInputEl.value);
-        this.setValue(newValue);
-        const localizedTimeString = localizeTimeString({
-          value: this.value,
-          locale: this.effectiveLocale,
-          numberingSystem: this.numberingSystem,
-          includeSeconds: this.shouldIncludeSeconds(),
-        });
-        if (newValue && this.calciteInputEl.value !== localizedTimeString) {
-          this.setInputValue(localizedTimeString);
+        if (isValidTime(newValue)) {
+          this.setValue(newValue);
+          const localizedTimeString = localizeTimeString({
+            value: this.value,
+            locale: this.effectiveLocale,
+            numberingSystem: this.numberingSystem,
+            includeSeconds: this.shouldIncludeSeconds(),
+            fractionalSecondDigits: decimalPlaces(this.step),
+          });
+          if (newValue && this.calciteInputEl.value !== localizedTimeString) {
+            this.setInputValue(localizedTimeString);
+          }
         }
       }
       else if (key === "ArrowDown") {
@@ -1592,6 +1676,7 @@ const InputTimePicker = class {
           locale: this.effectiveLocale,
           numberingSystem: this.numberingSystem,
           includeSeconds: this.shouldIncludeSeconds(),
+          fractionalSecondDigits: decimalPlaces(this.step),
         }));
       }
     };
@@ -1610,6 +1695,7 @@ const InputTimePicker = class {
           includeSeconds,
           locale: this.effectiveLocale,
           numberingSystem: this.numberingSystem,
+          fractionalSecondDigits: decimalPlaces(this.step),
         })
         : "");
     };
@@ -1666,6 +1752,7 @@ const InputTimePicker = class {
       locale: this.effectiveLocale,
       numberingSystem,
       includeSeconds: this.shouldIncludeSeconds(),
+      fractionalSecondDigits: decimalPlaces(this.step),
     }));
   }
   stepWatcher(newStep, oldStep) {
@@ -1687,6 +1774,7 @@ const InputTimePicker = class {
       locale,
       numberingSystem: this.numberingSystem,
       includeSeconds: this.shouldIncludeSeconds(),
+      fractionalSecondDigits: decimalPlaces(this.step),
     }));
   }
   // --------------------------------------------------------------------------
@@ -1715,26 +1803,114 @@ const InputTimePicker = class {
   delocalizeTimeString(value) {
     // we need to set the corresponding locale before parsing, otherwise it defaults to English (possible dayjs bug)
     dayjs.locale(this.effectiveLocale.toLowerCase());
-    const dayjsParseResult = dayjs(value, ["LTS", "LT"]);
+    const nonFractionalSecondParts = this.delocalizeTimeStringToParts(value);
+    let delocalizedTimeString;
+    if (this.shouldIncludeFractionalSeconds()) {
+      const stepPrecision = decimalPlaces(this.step);
+      const centisecondParts = this.delocalizeTimeStringToParts(value, "S");
+      if (stepPrecision === 1) {
+        delocalizedTimeString =
+          centisecondParts.millisecond !== 0
+            ? this.getTimeStringFromParts(centisecondParts)
+            : this.getTimeStringFromParts(nonFractionalSecondParts);
+      }
+      else {
+        const decisecondParts = this.delocalizeTimeStringToParts(value, "SS");
+        if (stepPrecision === 2) {
+          if (decisecondParts.millisecond !== 0) {
+            delocalizedTimeString = this.getTimeStringFromParts(decisecondParts);
+          }
+          else if (centisecondParts.millisecond !== 0) {
+            delocalizedTimeString = this.getTimeStringFromParts(centisecondParts);
+          }
+          else {
+            delocalizedTimeString = this.getTimeStringFromParts(nonFractionalSecondParts);
+          }
+        }
+        else if (stepPrecision >= 3) {
+          const millisecondParts = this.delocalizeTimeStringToParts(value, "SSS");
+          if (millisecondParts.millisecond !== 0) {
+            delocalizedTimeString = this.getTimeStringFromParts(millisecondParts);
+          }
+          else if (decisecondParts.millisecond !== 0) {
+            delocalizedTimeString = this.getTimeStringFromParts(decisecondParts);
+          }
+          else if (centisecondParts.millisecond !== 0) {
+            delocalizedTimeString = this.getTimeStringFromParts(centisecondParts);
+          }
+          else {
+            delocalizedTimeString = this.getTimeStringFromParts(nonFractionalSecondParts);
+          }
+        }
+      }
+    }
+    else {
+      delocalizedTimeString = this.getTimeStringFromParts(nonFractionalSecondParts);
+    }
+    return delocalizedTimeString;
+  }
+  delocalizeTimeStringToParts(localizedTimeString, fractionalSecondFormatToken) {
+    const ltsFormatString = this.localeConfig?.formats?.LTS;
+    const fractionalSecondTokenMatch = ltsFormatString.match(/ss\.*(S+)/g);
+    if (fractionalSecondFormatToken && this.shouldIncludeFractionalSeconds()) {
+      const secondFormatToken = `ss.${fractionalSecondFormatToken}`;
+      this.localeConfig.formats.LTS = fractionalSecondTokenMatch
+        ? ltsFormatString.replace(fractionalSecondTokenMatch[0], secondFormatToken)
+        : ltsFormatString.replace("ss", secondFormatToken);
+    }
+    else if (fractionalSecondTokenMatch) {
+      this.localeConfig.formats.LTS = ltsFormatString.replace(fractionalSecondTokenMatch[0], "ss");
+    }
+    dayjs.updateLocale(this.getSupportedDayjsLocale(getSupportedLocale(this.effectiveLocale)), this.localeConfig);
+    const dayjsParseResult = dayjs(localizedTimeString, ["LTS", "LT"]);
     if (dayjsParseResult.isValid()) {
-      let unformattedTimeString = `${dayjsParseResult.get("hour")}:${dayjsParseResult.get("minute")}`;
-      if (this.shouldIncludeSeconds()) {
-        unformattedTimeString += `:${dayjsParseResult.get("seconds") || 0}`;
+      return {
+        hour: dayjsParseResult.get("hour"),
+        minute: dayjsParseResult.get("minute"),
+        second: dayjsParseResult.get("second"),
+        millisecond: dayjsParseResult.get("millisecond"),
+      };
+    }
+    return {
+      hour: null,
+      minute: null,
+      second: null,
+      millisecond: null,
+    };
+  }
+  getTimeStringFromParts(parts) {
+    let timeString = "";
+    if (!parts) {
+      return timeString;
+    }
+    if (parts.hour !== null && parts.minute !== null) {
+      timeString = `${formatTimePart(parts.hour)}:${formatTimePart(parts.minute)}`;
+      if (this.shouldIncludeSeconds() && parts.second !== null) {
+        timeString += `:${formatTimePart(parts.second)}`;
+        if (this.shouldIncludeFractionalSeconds() && parts.millisecond !== null) {
+          const second = (parts.millisecond * 0.001).toFixed(decimalPlaces(this.step));
+          timeString += `.${second.toString().replace("0.", "")}`;
+        }
       }
-      return formatTimeString(unformattedTimeString) || "";
     }
-    return "";
+    return timeString;
   }
-  async loadDateTimeLocaleData() {
-    let supportedLocale = getSupportedLocale(this.effectiveLocale).toLowerCase();
-    if (supportedLocale === "no") {
-      supportedLocale = "nb";
+  getSupportedDayjsLocale(locale) {
+    const dayjsLocale = locale.toLowerCase();
+    if (dayjsLocale === "no") {
+      return "nb";
     }
-    if (supportedLocale === "pt-pt") {
-      supportedLocale = "pt";
+    if (dayjsLocale === "pt-pt") {
+      return "pt";
     }
-    const { default: localeConfig } = await supportedDayJsLocaleToLocaleConfigImport.get(supportedLocale)();
-    dayjs.locale(localeConfig, null, true);
+    return dayjsLocale;
+  }
+  async loadDateTimeLocaleData() {
+    let supportedLocale = getSupportedLocale(this.effectiveLocale).toLowerCase();
+    supportedLocale = this.getSupportedDayjsLocale(supportedLocale);
+    const { default: localeConfig } = await supportedDayjsLocaleToLocaleConfigImport.get(supportedLocale)();
+    this.localeConfig = localeConfig;
+    dayjs.locale(this.localeConfig, null, true);
     dayjs.updateLocale(supportedLocale, this.getExtendedLocaleConfig(supportedLocale));
   }
   getExtendedLocaleConfig(locale) {
@@ -1808,6 +1984,9 @@ const InputTimePicker = class {
   shouldIncludeSeconds() {
     return this.step < 60;
   }
+  shouldIncludeFractionalSeconds() {
+    return decimalPlaces(this.step) > 0;
+  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -1838,6 +2017,7 @@ const InputTimePicker = class {
         locale: this.effectiveLocale,
         numberingSystem: this.numberingSystem,
         includeSeconds: this.shouldIncludeSeconds(),
+        fractionalSecondDigits: decimalPlaces(this.step),
       }));
     }
   }
@@ -1891,6 +2071,8 @@ 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",
@@ -1903,6 +2085,7 @@ const CSS = {
   buttonTopRight: "button--top-right",
   column: "column",
   delimiter: "delimiter",
+  fractionalSecond: "fractionalSecond",
   hour: "hour",
   input: "input",
   meridiem: "meridiem",
@@ -1928,6 +2111,9 @@ const TimePicker = class {
     this.calciteInternalTimePickerBlur = createEvent(this, "calciteInternalTimePickerBlur", 6);
     this.calciteInternalTimePickerChange = createEvent(this, "calciteInternalTimePickerChange", 6);
     this.calciteInternalTimePickerFocus = createEvent(this, "calciteInternalTimePickerFocus", 6);
+    this.decrementFractionalSecond = () => {
+      this.nudgeFractionalSecond("down");
+    };
     this.decrementHour = () => {
       const newHour = !this.hour ? 0 : this.hour === "00" ? 23 : parseInt(this.hour) - 1;
       this.setValuePart("hour", newHour);
@@ -1956,9 +2142,39 @@ const TimePicker = class {
     this.focusHandler = (event) => {
       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.hourKeyDownHandler = (event) => {
@@ -2012,10 +2228,8 @@ const TimePicker = class {
         }
       }
     };
-    this.hourUpButtonKeyDownHandler = (event) => {
-      if (this.buttonActivated(event)) {
-        this.incrementHour();
-      }
+    this.incrementFractionalSecond = () => {
+      this.nudgeFractionalSecond("up");
     };
     this.incrementMeridiem = () => {
       const newMeridiem = this.meridiem === "AM" ? "PM" : "AM";
@@ -2043,11 +2257,6 @@ const TimePicker = class {
     this.incrementSecond = () => {
       this.incrementMinuteOrSecond("second");
     };
-    this.meridiemDownButtonKeyDownHandler = (event) => {
-      if (this.buttonActivated(event)) {
-        this.decrementMeridiem();
-      }
-    };
     this.meridiemKeyDownHandler = (event) => {
       switch (event.key) {
         case "a":
@@ -2073,16 +2282,6 @@ const TimePicker = class {
           break;
       }
     };
-    this.meridiemUpButtonKeyDownHandler = (event) => {
-      if (this.buttonActivated(event)) {
-        this.incrementMeridiem();
-      }
-    };
-    this.minuteDownButtonKeyDownHandler = (event) => {
-      if (this.buttonActivated(event)) {
-        this.decrementMinute();
-      }
-    };
     this.minuteKeyDownHandler = (event) => {
       const { key } = event;
       if (numberKeys.includes(key)) {
@@ -2120,16 +2319,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)) {
@@ -2167,29 +2401,28 @@ const TimePicker = class {
         }
       }
     };
-    this.secondUpButtonKeyDownHandler = (event) => {
-      if (this.buttonActivated(event)) {
-        this.incrementSecond();
-      }
-    };
     this.setHourEl = (el) => (this.hourEl = el);
     this.setMeridiemEl = (el) => (this.meridiemEl = el);
     this.setMinuteEl = (el) => (this.minuteEl = el);
     this.setSecondEl = (el) => (this.secondEl = el);
-    this.setValue = (value, emit = true) => {
+    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);
@@ -2199,23 +2432,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) => {
       const { effectiveLocale: locale, numberingSystem } = this;
       if (key === "meridiem") {
         this.meridiem = value;
@@ -2241,6 +2474,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({
@@ -2250,16 +2499,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}:${this.second ?? "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
         ? localizeTimeStringToParts({ value: this.value, locale, numberingSystem })
           ?.localizedMeridiem || null
@@ -2275,11 +2532,14 @@ const TimePicker = class {
     this.messages = undefined;
     this.messageOverrides = 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;
@@ -2287,14 +2547,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 */
@@ -2349,6 +2610,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");
@@ -2360,7 +2638,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();
             }
@@ -2390,19 +2671,13 @@ const TimePicker = class {
   //  Private Methods
   //
   // --------------------------------------------------------------------------
-  updateShowSecond() {
-    this.showSecond = this.step < 60;
-  }
   async focusPart(target) {
     await componentFocusable(this);
     this[`${target || "hour"}El`]?.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;
@@ -2418,7 +2693,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));
   }
   // --------------------------------------------------------------------------
   //
@@ -2429,7 +2705,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,
@@ -2457,6 +2733,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,
@@ -2467,7 +2744,7 @@ 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.incrementHour, 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,
@@ -2476,10 +2753,10 @@ const TimePicker = 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.decrementHour, 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.incrementMinute, 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,
@@ -2487,10 +2764,10 @@ const TimePicker = class {
       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.decrementMinute, 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.incrementSecond, 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,
@@ -2498,14 +2775,25 @@ const TimePicker = class {
       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.decrementSecond, 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.incrementFractionalSecond, 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,
+      }, 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.decrementFractionalSecond, 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.incrementMeridiem, 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,
@@ -2514,7 +2802,7 @@ const TimePicker = 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.decrementMeridiem, role: "button" }, h("calcite-icon", { icon: "chevron-down", scale: iconScale }))))));
   }
   static get delegatesFocus() { return true; }
   static get assetsDirs() { return ["assets"]; }