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

package/hydrate/index.js

@@ -1,7 +1,7 @@
 /*!
  * 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.15
  */
 'use strict';
 
@@ -15861,9 +15861,18 @@ const SCOPE_SIZE = 1;
 
 const clamp$1 = (value, min, max) => Math.max(min, Math.min(value, max));
 const decimalNumberRegex = new RegExp(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
+/**
+ * Returns the quantity of real decimal places for a number, which excludes trailing zeros.
+ *
+ * Adapted from {@link https://stackoverflow.com/questions/10454518/javascript-how-to-retrieve-the-number-of-decimals-of-a-string-number}.
+ *
+ * @param decimal - decimal value
+ * @param value
+ * @returns {number} the amount of decimal places in a number
+ */
 const decimalPlaces = (value) => {
   const match = ("" + value).match(decimalNumberRegex);
-  if (!match) {
+  if (!match || parseInt(match[1]) === 0) {
     return 0;
   }
   return Math.max(0, 
@@ -15872,6 +15881,12 @@ const decimalPlaces = (value) => {
     // Adjust for scientific notation.
     (match[2] ? +match[2] : 0));
 };
+function getDecimals(value) {
+  if (decimalPlaces(value) > 0 && value > 0) {
+    return parseFloat(`0.${value.toString().split(".")[1]}`);
+  }
+  return value;
+}
 function remap(value, fromMin, fromMax, toMin, toMax) {
   return ((value - fromMin) * (toMax - toMin)) / (fromMax - fromMin) + toMin;
 }
@@ -20135,6 +20150,16 @@ function dateToISO(date) {
   }
   return "";
 }
+/**
+ * Retrieve day, month, and year strings from a ISO string (YYYY-mm-dd)
+ *
+ * @param string
+ * @param isoDate
+ */
+function datePartsFromISO(isoDate) {
+  const dateParts = isoDate.split("-");
+  return { day: dateParts[2], month: dateParts[1], year: dateParts[0] };
+}
 /**
  * Check if two dates are the same day, month, year
  *
@@ -25106,6 +25131,31 @@ function updateFocusTrapElements(component) {
   component.focusTrap?.updateContainerElements(component.el);
 }
 
+/**
+ * Specifies if an ISO string date (YYYY-MM-DD) has two digit year.
+ *
+ * @param {string} value
+ * @returns {boolean}
+ */
+function isTwoDigitYear(value) {
+  if (!value) {
+    return false;
+  }
+  const { year } = datePartsFromISO(value);
+  return Number(year) < 100;
+}
+/**
+ * Returns a normalized year to current century from a given two digit year number.
+ *
+ * @param {number} twoDigitYear
+ * @returns {string}
+ */
+function normalizeToCurrentCentury(twoDigitYear) {
+  const currentYear = new Date().getFullYear();
+  const normalizedYear = Math.floor(currentYear / 100) * 100 + twoDigitYear;
+  return normalizedYear;
+}
+
 const inputDatePickerCss = "/*!@:host*/.sc-calcite-input-date-picker-h{--calcite-icon-size:1rem;--calcite-spacing-eighth:0.125rem;--calcite-spacing-quarter:0.25rem;--calcite-spacing-half:0.5rem;--calcite-spacing-three-quarters:0.75rem;--calcite-spacing:1rem;--calcite-spacing-plus-quarter:1.25rem;--calcite-spacing-plus-half:1.5rem;--calcite-spacing-double:2rem;--calcite-menu-min-width:10rem;--calcite-header-min-height:3rem;--calcite-footer-min-height:3rem}/*!@:host([disabled])*/[disabled].sc-calcite-input-date-picker-h{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}/*!@:host([disabled]) *,\n:host([disabled]) ::slotted(*)*/[disabled].sc-calcite-input-date-picker-h *.sc-calcite-input-date-picker,.sc-calcite-input-date-picker-h[disabled] .sc-calcite-input-date-picker-s>*{pointer-events:none}/*!@:host*/.sc-calcite-input-date-picker-h{position:relative;display:inline-block;inline-size:100%;overflow:visible;vertical-align:top;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}/*!@:host .menu-container .calcite-floating-ui-anim*/.sc-calcite-input-date-picker-h .menu-container.sc-calcite-input-date-picker .calcite-floating-ui-anim.sc-calcite-input-date-picker{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:transform, visibility, opacity;opacity:0;box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:var(--calcite-app-z-index);border-radius:0.25rem}/*!@:host .menu-container[data-placement^=bottom] .calcite-floating-ui-anim*/.sc-calcite-input-date-picker-h .menu-container[data-placement^=bottom].sc-calcite-input-date-picker .calcite-floating-ui-anim.sc-calcite-input-date-picker{transform:translateY(-5px)}/*!@:host .menu-container[data-placement^=top] .calcite-floating-ui-anim*/.sc-calcite-input-date-picker-h .menu-container[data-placement^=top].sc-calcite-input-date-picker .calcite-floating-ui-anim.sc-calcite-input-date-picker{transform:translateY(5px)}/*!@:host .menu-container[data-placement^=left] .calcite-floating-ui-anim*/.sc-calcite-input-date-picker-h .menu-container[data-placement^=left].sc-calcite-input-date-picker .calcite-floating-ui-anim.sc-calcite-input-date-picker{transform:translateX(5px)}/*!@:host .menu-container[data-placement^=right] .calcite-floating-ui-anim*/.sc-calcite-input-date-picker-h .menu-container[data-placement^=right].sc-calcite-input-date-picker .calcite-floating-ui-anim.sc-calcite-input-date-picker{transform:translateX(-5px)}/*!@:host .menu-container[data-placement] .calcite-floating-ui-anim--active*/.sc-calcite-input-date-picker-h .menu-container[data-placement].sc-calcite-input-date-picker .calcite-floating-ui-anim--active.sc-calcite-input-date-picker{opacity:1;transform:translate(0)}/*!@:host([scale=s])*/[scale=s].sc-calcite-input-date-picker-h{--calcite-toggle-spacing:0.5rem}/*!@:host([scale=m])*/[scale=m].sc-calcite-input-date-picker-h{--calcite-toggle-spacing:0.75rem}/*!@:host([scale=l])*/[scale=l].sc-calcite-input-date-picker-h{--calcite-toggle-spacing:1rem}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-input-date-picker-h[disabled] .sc-calcite-input-date-picker-s>[calcite-hydrated][disabled],[disabled].sc-calcite-input-date-picker-h [calcite-hydrated][disabled].sc-calcite-input-date-picker{opacity:1}/*!@.calendar-picker-wrapper*/.calendar-picker-wrapper.sc-calcite-input-date-picker{position:static;inline-size:100%;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);transform:translate3d(0, 0, 0)}/*!@.input-wrapper*/.input-wrapper.sc-calcite-input-date-picker{position:relative}/*!@.toggle-icon*/.toggle-icon.sc-calcite-input-date-picker{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([range]) .input-container*/[range].sc-calcite-input-date-picker-h .input-container.sc-calcite-input-date-picker{display:flex}/*!@:host([range]) .input-wrapper*/[range].sc-calcite-input-date-picker-h .input-wrapper.sc-calcite-input-date-picker{flex:1 1 auto}/*!@:host([range]) .horizontal-arrow-container*/[range].sc-calcite-input-date-picker-h .horizontal-arrow-container.sc-calcite-input-date-picker{display:flex;align-items:center;border-width:1px;border-inline-start-width:0px;border-inline-end-width:0px;border-style:solid;border-color:var(--calcite-ui-border-input);background-color:var(--calcite-ui-background);padding-block:0px;padding-inline:0.25rem}/*!@:host([range][layout=vertical]) .input-wrapper*/[range][layout=vertical].sc-calcite-input-date-picker-h .input-wrapper.sc-calcite-input-date-picker{inline-size:100%}/*!@:host([range][layout=vertical]) .input-container*/[range][layout=vertical].sc-calcite-input-date-picker-h .input-container.sc-calcite-input-date-picker{flex-direction:column;align-items:flex-start}/*!@:host([range][layout=vertical]) .calendar-picker-wrapper--end*/[range][layout=vertical].sc-calcite-input-date-picker-h .calendar-picker-wrapper--end.sc-calcite-input-date-picker{transform:translate3d(0, 0, 0)}/*!@:host([range][layout=vertical]) .vertical-arrow-container*/[range][layout=vertical].sc-calcite-input-date-picker-h .vertical-arrow-container.sc-calcite-input-date-picker{inset-block-start:1.5rem;position:absolute;z-index:var(--calcite-app-z-index);margin-inline:1px;background-color:var(--calcite-ui-foreground-1);padding-inline:0.625rem;inset-inline-start:0}/*!@:host([scale=s][range]:not([layout=vertical])) .calendar-picker-wrapper*/[scale=s][range].sc-calcite-input-date-picker-h:not([layout=vertical]) .calendar-picker-wrapper.sc-calcite-input-date-picker{inline-size:216px}/*!@:host([scale=m][range]:not([layout=vertical])) .calendar-picker-wrapper*/[scale=m][range].sc-calcite-input-date-picker-h:not([layout=vertical]) .calendar-picker-wrapper.sc-calcite-input-date-picker{inline-size:286px}/*!@:host([scale=l][range]:not([layout=vertical])) .calendar-picker-wrapper*/[scale=l][range].sc-calcite-input-date-picker-h:not([layout=vertical]) .calendar-picker-wrapper.sc-calcite-input-date-picker{inline-size:398px}/*!@.menu-container*/.menu-container.sc-calcite-input-date-picker{--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown);display:block;position:absolute;z-index:var(--calcite-floating-ui-z-index);visibility:hidden}/*!@.menu-container .calcite-floating-ui-anim*/.menu-container.sc-calcite-input-date-picker .calcite-floating-ui-anim.sc-calcite-input-date-picker{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:transform, visibility, opacity;opacity:0;box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:var(--calcite-app-z-index);border-radius:0.25rem}/*!@.menu-container[data-placement^=bottom] .calcite-floating-ui-anim*/.menu-container[data-placement^=bottom].sc-calcite-input-date-picker .calcite-floating-ui-anim.sc-calcite-input-date-picker{transform:translateY(-5px)}/*!@.menu-container[data-placement^=top] .calcite-floating-ui-anim*/.menu-container[data-placement^=top].sc-calcite-input-date-picker .calcite-floating-ui-anim.sc-calcite-input-date-picker{transform:translateY(5px)}/*!@.menu-container[data-placement^=left] .calcite-floating-ui-anim*/.menu-container[data-placement^=left].sc-calcite-input-date-picker .calcite-floating-ui-anim.sc-calcite-input-date-picker{transform:translateX(5px)}/*!@.menu-container[data-placement^=right] .calcite-floating-ui-anim*/.menu-container[data-placement^=right].sc-calcite-input-date-picker .calcite-floating-ui-anim.sc-calcite-input-date-picker{transform:translateX(-5px)}/*!@.menu-container[data-placement] .calcite-floating-ui-anim--active*/.menu-container[data-placement].sc-calcite-input-date-picker .calcite-floating-ui-anim--active.sc-calcite-input-date-picker{opacity:1;transform:translate(0)}/*!@:host([open]) .menu-container*/[open].sc-calcite-input-date-picker-h .menu-container.sc-calcite-input-date-picker{visibility:visible}/*!@.menu-container--active*/.menu-container--active.sc-calcite-input-date-picker{visibility:visible}/*!@.input .calcite-input__wrapper*/.input.sc-calcite-input-date-picker .calcite-input__wrapper.sc-calcite-input-date-picker{margin-block-start:0px}/*!@:host([range][layout=vertical][scale=m]) .vertical-arrow-container*/[range][layout=vertical][scale=m].sc-calcite-input-date-picker-h .vertical-arrow-container.sc-calcite-input-date-picker{inset-block-start:1.5rem;padding-inline-start:0.75rem}/*!@:host([range][layout=vertical][scale=m]) .vertical-arrow-container calcite-icon*/[range][layout=vertical][scale=m].sc-calcite-input-date-picker-h .vertical-arrow-container.sc-calcite-input-date-picker calcite-icon.sc-calcite-input-date-picker{block-size:0.75rem;inline-size:0.75rem;min-inline-size:0px}/*!@:host([range][layout=vertical][scale=l]) .vertical-arrow-container*/[range][layout=vertical][scale=l].sc-calcite-input-date-picker-h .vertical-arrow-container.sc-calcite-input-date-picker{inset-block-start:2.25rem;padding-inline:0.875rem}/*!@:host([range][layout=vertical][open]) .vertical-arrow-container*/[range][layout=vertical][open].sc-calcite-input-date-picker-h .vertical-arrow-container.sc-calcite-input-date-picker{display:none}/*!@::slotted(input[slot=hidden-form-input])*/.sc-calcite-input-date-picker-s>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}/*!@.assistive-text*/.assistive-text.sc-calcite-input-date-picker{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}/*!@:host([hidden])*/[hidden].sc-calcite-input-date-picker-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-input-date-picker{display:none}";
 
 class InputDatePicker {
@@ -25273,9 +25323,15 @@ class InputDatePicker {
       const oldValueIsArray = Array.isArray(oldValue);
       const valueIsArray = Array.isArray(valueAsDate);
       const newStartDate = valueIsArray ? valueAsDate[0] : null;
-      const newStartDateISO = valueIsArray ? dateToISO(newStartDate) : "";
+      let newStartDateISO = valueIsArray ? dateToISO(newStartDate) : "";
+      if (newStartDateISO && isTwoDigitYear(newStartDateISO)) {
+        newStartDateISO = this.getNormalizedDate(newStartDateISO);
+      }
       const newEndDate = valueIsArray ? valueAsDate[1] : null;
-      const newEndDateISO = valueIsArray ? dateToISO(newEndDate) : "";
+      let newEndDateISO = valueIsArray ? dateToISO(newEndDate) : "";
+      if (newEndDateISO && isTwoDigitYear(newEndDateISO)) {
+        newEndDateISO = this.getNormalizedDate(newEndDateISO);
+      }
       const newValue = newStartDateISO || newEndDateISO ? [newStartDateISO, newEndDateISO] : "";
       if (newValue === oldValue) {
         return;
@@ -25301,7 +25357,10 @@ class InputDatePicker {
         return;
       }
       const oldValue = this.value;
-      const newValue = dateToISO(value);
+      let newValue = dateToISO(value);
+      if (isTwoDigitYear(newValue)) {
+        newValue = this.getNormalizedDate(newValue);
+      }
       if (newValue === oldValue) {
         return;
       }
@@ -25347,6 +25406,7 @@ class InputDatePicker {
     this.max = undefined;
     this.open = false;
     this.name = undefined;
+    this.normalizeYear = false;
     this.numberingSystem = undefined;
     this.scale = "m";
     this.placement = defaultMenuPlacement;
@@ -25376,9 +25436,17 @@ class InputDatePicker {
     if (!this.userChangedValue) {
       let newValueAsDate;
       if (Array.isArray(newValue)) {
+        if (isTwoDigitYear(newValue[0]) || isTwoDigitYear(newValue[1])) {
+          this.value = newValue.map((val) => this.getNormalizedDate(val));
+          return;
+        }
         newValueAsDate = getValueAsDateRange(newValue);
       }
       else if (newValue) {
+        if (isTwoDigitYear(newValue)) {
+          this.value = this.getNormalizedDate(newValue);
+          return;
+        }
         newValueAsDate = dateFromISO(newValue);
       }
       else {
@@ -25480,10 +25548,18 @@ class InputDatePicker {
     const { open } = this;
     open && this.openHandler(open);
     if (Array.isArray(this.value)) {
+      if (isTwoDigitYear(this.value[0]) || isTwoDigitYear(this.value[1])) {
+        this.value = this.value.map((val) => this.getNormalizedDate(val));
+        return;
+      }
       this.valueAsDate = getValueAsDateRange(this.value);
     }
     else if (this.value) {
       try {
+        if (isTwoDigitYear(this.value)) {
+          this.value = this.getNormalizedDate(this.value);
+          return;
+        }
         this.valueAsDate = dateFromISO(this.value);
       }
       catch (error) {
@@ -25692,6 +25768,17 @@ class InputDatePicker {
   warnAboutInvalidValue(value) {
     console.warn(`The specified value "${value}" does not conform to the required format, "YYYY-MM-DD".`);
   }
+  getNormalizedDate(value) {
+    if (!value) {
+      return "";
+    }
+    if (!this.normalizeYear) {
+      return value;
+    }
+    const { day, month, year } = datePartsFromISO(value);
+    const normalizedYear = normalizeToCurrentCentury(Number(year));
+    return `${normalizedYear}-${month}-${day}`;
+  }
   static get delegatesFocus() { return true; }
   static get assetsDirs() { return ["assets"]; }
   get el() { return getElement(this); }
@@ -25732,6 +25819,7 @@ class InputDatePicker {
       "max": [1],
       "open": [1540],
       "name": [513],
+      "normalizeYear": [516, "normalize-year"],
       "numberingSystem": [513, "numbering-system"],
       "scale": [513],
       "placement": [513],
@@ -25750,7 +25838,7 @@ class InputDatePicker {
     },
     "$listeners$": [[0, "calciteDaySelect", "calciteDaySelectHandler"]],
     "$lazyBundleId$": "-",
-    "$attrsToReflect$": [["disabled", "disabled"], ["focusTrapDisabled", "focus-trap-disabled"], ["form", "form"], ["readOnly", "read-only"], ["headingLevel", "heading-level"], ["open", "open"], ["name", "name"], ["numberingSystem", "numbering-system"], ["scale", "scale"], ["placement", "placement"], ["range", "range"], ["required", "required"], ["overlayPositioning", "overlay-positioning"], ["layout", "layout"]]
+    "$attrsToReflect$": [["disabled", "disabled"], ["focusTrapDisabled", "focus-trap-disabled"], ["form", "form"], ["readOnly", "read-only"], ["headingLevel", "heading-level"], ["open", "open"], ["name", "name"], ["normalizeYear", "normalize-year"], ["numberingSystem", "numbering-system"], ["scale", "scale"], ["placement", "placement"], ["range", "range"], ["required", "required"], ["overlayPositioning", "overlay-positioning"], ["layout", "layout"]]
   }; }
 }
 
@@ -26784,7 +26872,7 @@ class InputText {
 }
 
 const maxTenthForMinuteAndSecond = 5;
-function createLocaleDateTimeFormatter(locale, numberingSystem, includeSeconds = true) {
+function createLocaleDateTimeFormatter(locale, numberingSystem, includeSeconds = true, fractionalSecondDigits) {
   const options = {
     hour: "2-digit",
     minute: "2-digit",
@@ -26793,31 +26881,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;
@@ -26883,6 +27009,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;
   }
@@ -26895,20 +27044,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);
@@ -26919,6 +27068,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),
     };
@@ -26940,14 +27096,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,
@@ -26957,10 +27120,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;
 }
@@ -28133,7 +28299,7 @@ var updateLocale = (function (option, Dayjs, dayjs) {
 const inputTimePickerCss = "/*!@:host([disabled])*/[disabled].sc-calcite-input-time-picker-h{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}/*!@:host([disabled]) *,\n:host([disabled]) ::slotted(*)*/[disabled].sc-calcite-input-time-picker-h *.sc-calcite-input-time-picker,.sc-calcite-input-time-picker-h[disabled] .sc-calcite-input-time-picker-s>*{pointer-events:none}/*!@:host*/.sc-calcite-input-time-picker-h{display:inline-block;-webkit-user-select:none;user-select:none}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-input-time-picker-h[disabled] .sc-calcite-input-time-picker-s>[calcite-hydrated][disabled],[disabled].sc-calcite-input-time-picker-h [calcite-hydrated][disabled].sc-calcite-input-time-picker{opacity:1}/*!@::slotted(input[slot=hidden-form-input])*/.sc-calcite-input-time-picker-s>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])*/[scale=s].sc-calcite-input-time-picker-h{--calcite-toggle-spacing:0.5rem}/*!@:host([scale=m])*/[scale=m].sc-calcite-input-time-picker-h{--calcite-toggle-spacing:0.75rem}/*!@:host([scale=l])*/[scale=l].sc-calcite-input-time-picker-h{--calcite-toggle-spacing:1rem}/*!@.input-wrapper*/.input-wrapper.sc-calcite-input-time-picker{position:relative}/*!@.toggle-icon*/.toggle-icon.sc-calcite-input-time-picker{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])*/[hidden].sc-calcite-input-time-picker-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-input-time-picker{display:none}";
 
 // some bundlers (e.g., Webpack) need dynamic import paths to be static
-const supportedDayJsLocaleToLocaleConfigImport = new Map([
+const supportedDayjsLocaleToLocaleConfigImport = new Map([
   ["ar", () => Promise.resolve().then(function () { return ar; })],
   ["bg", () => Promise.resolve().then(function () { return bg; })],
   ["bs", () => Promise.resolve().then(function () { return bs; })],
@@ -28219,6 +28385,7 @@ class InputTimePicker {
         locale: this.effectiveLocale,
         numberingSystem: this.numberingSystem,
         includeSeconds: this.shouldIncludeSeconds(),
+        fractionalSecondDigits: decimalPlaces(this.step),
       });
       if (localizedTimeString !== inputValue) {
         this.setInputValue(localizedTimeString);
@@ -28260,6 +28427,7 @@ class InputTimePicker {
         locale: this.effectiveLocale,
         numberingSystem: this.numberingSystem,
         includeSeconds,
+        fractionalSecondDigits: decimalPlaces(this.step),
       }));
     };
     this.popoverCloseHandler = () => {
@@ -28294,15 +28462,18 @@ class InputTimePicker {
           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") {
@@ -28361,6 +28532,7 @@ class InputTimePicker {
           locale: this.effectiveLocale,
           numberingSystem: this.numberingSystem,
           includeSeconds: this.shouldIncludeSeconds(),
+          fractionalSecondDigits: decimalPlaces(this.step),
         }));
       }
     };
@@ -28379,6 +28551,7 @@ class InputTimePicker {
           includeSeconds,
           locale: this.effectiveLocale,
           numberingSystem: this.numberingSystem,
+          fractionalSecondDigits: decimalPlaces(this.step),
         })
         : "");
     };
@@ -28435,6 +28608,7 @@ class InputTimePicker {
       locale: this.effectiveLocale,
       numberingSystem,
       includeSeconds: this.shouldIncludeSeconds(),
+      fractionalSecondDigits: decimalPlaces(this.step),
     }));
   }
   stepWatcher(newStep, oldStep) {
@@ -28456,6 +28630,7 @@ class InputTimePicker {
       locale,
       numberingSystem: this.numberingSystem,
       includeSeconds: this.shouldIncludeSeconds(),
+      fractionalSecondDigits: decimalPlaces(this.step),
     }));
   }
   // --------------------------------------------------------------------------
@@ -28484,26 +28659,114 @@ class InputTimePicker {
   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) {
@@ -28577,6 +28840,9 @@ class InputTimePicker {
   shouldIncludeSeconds() {
     return this.step < 60;
   }
+  shouldIncludeFractionalSeconds() {
+    return decimalPlaces(this.step) > 0;
+  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -28607,6 +28873,7 @@ class InputTimePicker {
         locale: this.effectiveLocale,
         numberingSystem: this.numberingSystem,
         includeSeconds: this.shouldIncludeSeconds(),
+        fractionalSecondDigits: decimalPlaces(this.step),
       }));
     }
   }
@@ -37676,7 +37943,7 @@ const shellCss = "/*!@:host*/.sc-calcite-shell-h{box-sizing:border-box;backgroun
  * @slot center-row - [Deprecated] Use the `"panel-bottom"` slot instead. A slot for adding the bottom `calcite-shell-center-row`.
  * @slot modals - A slot for adding `calcite-modal` components. When placed in this slot, the modal position will be constrained to the extent of the shell.
  * @slot alerts - A slot for adding `calcite-alert` components. When placed in this slot, the alert position will be constrained to the extent of the shell.
- * @slot sheets - A slot for adding `calcite-sheet` components. When placed in this slot, the alert position will be constrained to the extent of the shell.
+ * @slot sheets - A slot for adding `calcite-sheet` components. When placed in this slot, the sheet position will be constrained to the extent of the shell.
  */
 class Shell {
   constructor(hostRef) {
@@ -41474,6 +41741,8 @@ const CSS$6 = {
   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",
@@ -41486,6 +41755,7 @@ const CSS$6 = {
   buttonTopRight: "button--top-right",
   column: "column",
   delimiter: "delimiter",
+  fractionalSecond: "fractionalSecond",
   hour: "hour",
   input: "input",
   meridiem: "meridiem",
@@ -41511,6 +41781,9 @@ class TimePicker {
     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);
@@ -41539,9 +41812,39 @@ class TimePicker {
     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) => {
@@ -41595,10 +41898,8 @@ class TimePicker {
         }
       }
     };
-    this.hourUpButtonKeyDownHandler = (event) => {
-      if (this.buttonActivated(event)) {
-        this.incrementHour();
-      }
+    this.incrementFractionalSecond = () => {
+      this.nudgeFractionalSecond("up");
     };
     this.incrementMeridiem = () => {
       const newMeridiem = this.meridiem === "AM" ? "PM" : "AM";
@@ -41626,11 +41927,6 @@ class TimePicker {
     this.incrementSecond = () => {
       this.incrementMinuteOrSecond("second");
     };
-    this.meridiemDownButtonKeyDownHandler = (event) => {
-      if (this.buttonActivated(event)) {
-        this.decrementMeridiem();
-      }
-    };
     this.meridiemKeyDownHandler = (event) => {
       switch (event.key) {
         case "a":
@@ -41656,16 +41952,6 @@ class TimePicker {
           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)) {
@@ -41703,16 +41989,51 @@ class TimePicker {
         }
       }
     };
-    this.minuteUpButtonKeyDownHandler = (event) => {
-      if (this.buttonActivated(event)) {
-        this.incrementMinute();
-      }
-    };
-    this.secondDownButtonKeyDownHandler = (event) => {
-      if (this.buttonActivated(event)) {
-        this.decrementSecond();
-      }
-    };
+    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.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)) {
@@ -41750,29 +42071,28 @@ class TimePicker {
         }
       }
     };
-    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);
@@ -41782,23 +42102,23 @@ class TimePicker {
       }
       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;
@@ -41824,6 +42144,22 @@ class TimePicker {
           });
         }
       }
+      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({
@@ -41833,16 +42169,24 @@ class TimePicker {
           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
@@ -41858,11 +42202,14 @@ class TimePicker {
     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;
@@ -41870,14 +42217,15 @@ class TimePicker {
     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 */
@@ -41932,6 +42280,23 @@ class TimePicker {
             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");
@@ -41943,7 +42308,10 @@ class TimePicker {
       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();
             }
@@ -41973,19 +42341,13 @@ class TimePicker {
   //  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;
@@ -42001,7 +42363,8 @@ class TimePicker {
   updateLocale() {
     updateMessages(this);
     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));
   }
   // --------------------------------------------------------------------------
   //
@@ -42012,7 +42375,7 @@ class TimePicker {
     connectLocalized(this);
     this.updateLocale();
     connectMessages(this);
-    this.updateShowSecond();
+    this.toggleSecond();
     this.meridiemOrder = this.getMeridiemOrder(getTimeParts({
       value: "0:00:00",
       locale: this.effectiveLocale,
@@ -42040,6 +42403,7 @@ class TimePicker {
     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 (hAsync("div", { class: {
         [CSS$6.timePicker]: true,
@@ -42050,7 +42414,7 @@ class TimePicker {
         [CSS$6.button]: true,
         [CSS$6.buttonHourUp]: true,
         [CSS$6.buttonTopLeft]: true,
-      }, onClick: this.incrementHour, onKeyDown: this.hourUpButtonKeyDownHandler, role: "button" }, hAsync("calcite-icon", { icon: "chevron-up", scale: iconScale })), hAsync("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" }, hAsync("calcite-icon", { icon: "chevron-up", scale: iconScale })), hAsync("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$6.input]: true,
         [CSS$6.hour]: true,
       }, onFocus: this.focusHandler, onKeyDown: this.hourKeyDownHandler, role: "spinbutton", tabIndex: 0,
@@ -42059,10 +42423,10 @@ class TimePicker {
         [CSS$6.button]: true,
         [CSS$6.buttonHourDown]: true,
         [CSS$6.buttonBottomLeft]: true,
-      }, onClick: this.decrementHour, onKeyDown: this.hourDownButtonKeyDownHandler, role: "button" }, hAsync("calcite-icon", { icon: "chevron-down", scale: iconScale }))), hAsync("span", { class: CSS$6.delimiter }, this.localizedHourSuffix), hAsync("div", { class: CSS$6.column, role: "group" }, hAsync("span", { "aria-label": this.messages.minuteUp, class: {
+      }, onClick: this.decrementHour, role: "button" }, hAsync("calcite-icon", { icon: "chevron-down", scale: iconScale }))), hAsync("span", { class: CSS$6.delimiter }, this.localizedHourSuffix), hAsync("div", { class: CSS$6.column, role: "group" }, hAsync("span", { "aria-label": this.messages.minuteUp, class: {
         [CSS$6.button]: true,
         [CSS$6.buttonMinuteUp]: true,
-      }, onClick: this.incrementMinute, onKeyDown: this.minuteUpButtonKeyDownHandler, role: "button", tabIndex: -1 }, hAsync("calcite-icon", { icon: "chevron-up", scale: iconScale })), hAsync("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" }, hAsync("calcite-icon", { icon: "chevron-up", scale: iconScale })), hAsync("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$6.input]: true,
         [CSS$6.minute]: true,
       }, onFocus: this.focusHandler, onKeyDown: this.minuteKeyDownHandler, role: "spinbutton", tabIndex: 0,
@@ -42070,10 +42434,10 @@ class TimePicker {
       ref: this.setMinuteEl }, this.localizedMinute || "--"), hAsync("span", { "aria-label": this.messages.minuteDown, class: {
         [CSS$6.button]: true,
         [CSS$6.buttonMinuteDown]: true,
-      }, onClick: this.decrementMinute, onKeyDown: this.minuteDownButtonKeyDownHandler, role: "button" }, hAsync("calcite-icon", { icon: "chevron-down", scale: iconScale }))), this.showSecond && hAsync("span", { class: CSS$6.delimiter }, this.localizedMinuteSuffix), this.showSecond && (hAsync("div", { class: CSS$6.column, role: "group" }, hAsync("span", { "aria-label": this.messages.secondUp, class: {
+      }, onClick: this.decrementMinute, role: "button" }, hAsync("calcite-icon", { icon: "chevron-down", scale: iconScale }))), this.showSecond && hAsync("span", { class: CSS$6.delimiter }, this.localizedMinuteSuffix), this.showSecond && (hAsync("div", { class: CSS$6.column, role: "group" }, hAsync("span", { "aria-label": this.messages.secondUp, class: {
         [CSS$6.button]: true,
         [CSS$6.buttonSecondUp]: true,
-      }, onClick: this.incrementSecond, onKeyDown: this.secondUpButtonKeyDownHandler, role: "button" }, hAsync("calcite-icon", { icon: "chevron-up", scale: iconScale })), hAsync("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" }, hAsync("calcite-icon", { icon: "chevron-up", scale: iconScale })), hAsync("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$6.input]: true,
         [CSS$6.second]: true,
       }, onFocus: this.focusHandler, onKeyDown: this.secondKeyDownHandler, role: "spinbutton", tabIndex: 0,
@@ -42081,14 +42445,25 @@ class TimePicker {
       ref: this.setSecondEl }, this.localizedSecond || "--"), hAsync("span", { "aria-label": this.messages.secondDown, class: {
         [CSS$6.button]: true,
         [CSS$6.buttonSecondDown]: true,
-      }, onClick: this.decrementSecond, onKeyDown: this.secondDownButtonKeyDownHandler, role: "button" }, hAsync("calcite-icon", { icon: "chevron-down", scale: iconScale })))), this.localizedSecondSuffix && (hAsync("span", { class: CSS$6.delimiter }, this.localizedSecondSuffix)), showMeridiem && (hAsync("div", { class: {
+      }, onClick: this.decrementSecond, role: "button" }, hAsync("calcite-icon", { icon: "chevron-down", scale: iconScale })))), this.showFractionalSecond && (hAsync("span", { class: CSS$6.delimiter }, this.localizedDecimalSeparator)), this.showFractionalSecond && (hAsync("div", { class: CSS$6.column, role: "group" }, hAsync("span", { "aria-label": this.messages.fractionalSecondUp, class: {
+        [CSS$6.button]: true,
+        [CSS$6.buttonFractionalSecondUp]: true,
+      }, onClick: this.incrementFractionalSecond, role: "button" }, hAsync("calcite-icon", { icon: "chevron-up", scale: iconScale })), hAsync("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$6.input]: true,
+        [CSS$6.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 || "--"), hAsync("span", { "aria-label": this.messages.fractionalSecondDown, class: {
+        [CSS$6.button]: true,
+        [CSS$6.buttonFractionalSecondDown]: true,
+      }, onClick: this.decrementFractionalSecond, role: "button" }, hAsync("calcite-icon", { icon: "chevron-down", scale: iconScale })))), this.localizedSecondSuffix && (hAsync("span", { class: CSS$6.delimiter }, this.localizedSecondSuffix)), showMeridiem && (hAsync("div", { class: {
         [CSS$6.column]: true,
         [CSS$6.meridiemStart]: this.meridiemOrder === 0,
       }, role: "group" }, hAsync("span", { "aria-label": this.messages.meridiemUp, class: {
         [CSS$6.button]: true,
         [CSS$6.buttonMeridiemUp]: true,
         [CSS$6.buttonTopRight]: true,
-      }, onClick: this.incrementMeridiem, onKeyDown: this.meridiemUpButtonKeyDownHandler, role: "button" }, hAsync("calcite-icon", { icon: "chevron-up", scale: iconScale })), hAsync("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" }, hAsync("calcite-icon", { icon: "chevron-up", scale: iconScale })), hAsync("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$6.input]: true,
         [CSS$6.meridiem]: true,
       }, onFocus: this.focusHandler, onKeyDown: this.meridiemKeyDownHandler, role: "spinbutton", tabIndex: 0,
@@ -42097,7 +42472,7 @@ class TimePicker {
         [CSS$6.button]: true,
         [CSS$6.buttonMeridiemDown]: true,
         [CSS$6.buttonBottomRight]: true,
-      }, onClick: this.decrementMeridiem, onKeyDown: this.meridiemDownButtonKeyDownHandler, role: "button" }, hAsync("calcite-icon", { icon: "chevron-down", scale: iconScale }))))));
+      }, onClick: this.decrementMeridiem, role: "button" }, hAsync("calcite-icon", { icon: "chevron-down", scale: iconScale }))))));
   }
   static get delegatesFocus() { return true; }
   static get assetsDirs() { return ["assets"]; }
@@ -42120,11 +42495,14 @@ class TimePicker {
       "messages": [1040],
       "messageOverrides": [1040],
       "effectiveLocale": [32],
+      "fractionalSecond": [32],
       "hour": [32],
       "hourCycle": [32],
+      "localizedDecimalSeparator": [32],
       "localizedHour": [32],
       "localizedHourSuffix": [32],
       "localizedMeridiem": [32],
+      "localizedFractionalSecond": [32],
       "localizedMinute": [32],
       "localizedMinuteSuffix": [32],
       "localizedSecond": [32],
@@ -42132,6 +42510,7 @@ class TimePicker {
       "meridiem": [32],
       "minute": [32],
       "second": [32],
+      "showFractionalSecond": [32],
       "showSecond": [32],
       "defaultMessages": [32],
       "setFocus": [64]