@esri/calcite-components 1.7.0-next.2 → 1.7.0-next.21

package/dist/collection/components/time-picker/assets/time-picker/t9n/index.d.ts

@@ -1,4 +1,7 @@
 export type TimePickerMessages = {
+  fractionalSecond: string;
+  fractionalSecondDown: string;
+  fractionalSecondUp: string;
   hour: string;
   hourDown: string;
   hourUp: string;

package/dist/collection/components/time-picker/assets/time-picker/t9n/messages.json

@@ -1,4 +1,7 @@
 {
+  "fractionalSecond": "Fractional second",
+  "fractionalSecondDown": "Decrease fractional second",
+  "fractionalSecondUp": "Increase fractional second",
   "hour": "Hour",
   "hourDown": "Decrease hour",
   "hourUp": "Increase hour",

package/dist/collection/components/time-picker/assets/time-picker/t9n/messages_en.json

@@ -1,4 +1,7 @@
 {
+  "fractionalSecond": "Fractional second",
+  "fractionalSecondDown": "Decrease fractional second",
+  "fractionalSecondUp": "Increase fractional second",
   "hour": "Hour",
   "hourDown": "Decrease hour",
   "hourUp": "Increase hour",

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

@@ -1,12 +1,14 @@
 /*!
  * 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.2
+ * v1.7.0-next.21
  */
 export 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",
@@ -19,6 +21,7 @@ export const CSS = {
   buttonTopRight: "button--top-right",
   column: "column",
   delimiter: "delimiter",
+  fractionalSecond: "fractionalSecond",
   hour: "hour",
   input: "input",
   meridiem: "meridiem",

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

@@ -1,21 +1,25 @@
 /*!
  * 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.2
+ * v1.7.0-next.21
  */
 import { h, } from "@stencil/core";
-import { isActivationKey, numberKeys } from "../../utils/key";
+import { numberKeys } from "../../utils/key";
 import { isValidNumber } from "../../utils/number";
 import { connectLocalized, disconnectLocalized, } from "../../utils/locale";
 import { connectMessages, disconnectMessages, setUpMessages, updateMessages, } from "../../utils/t9n";
-import { formatTimePart, getLocaleHourCycle, getMeridiem, getTimeParts, isValidTime, localizeTimePart, localizeTimeStringToParts, maxTenthForMinuteAndSecond, parseTimeString, } from "../../utils/time";
+import { formatTimePart, getLocaleHourCycle, getLocalizedDecimalSeparator, getLocalizedTimePartSuffix, getMeridiem, getTimeParts, isValidTime, localizeTimePart, localizeTimeStringToParts, maxTenthForMinuteAndSecond, parseTimeString, } from "../../utils/time";
 import { CSS } from "./resources";
 import { componentFocusable, setComponentLoaded, setUpLoadableComponent, } from "../../utils/loadable";
+import { decimalPlaces, getDecimals } from "../../utils/math";
 function capitalize(str) {
   return str.charAt(0).toUpperCase() + str.slice(1);
 }
 export class TimePicker {
   constructor() {
+    this.decrementFractionalSecond = () => {
+      this.nudgeFractionalSecond("down");
+    };
     this.decrementHour = () => {
       const newHour = !this.hour ? 0 : this.hour === "00" ? 23 : parseInt(this.hour) - 1;
       this.setValuePart("hour", newHour);
@@ -44,9 +48,39 @@ export 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) => {
@@ -100,10 +134,8 @@ export 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";
@@ -131,11 +163,6 @@ export class TimePicker {
     this.incrementSecond = () => {
       this.incrementMinuteOrSecond("second");
     };
-    this.meridiemDownButtonKeyDownHandler = (event) => {
-      if (this.buttonActivated(event)) {
-        this.decrementMeridiem();
-      }
-    };
     this.meridiemKeyDownHandler = (event) => {
       switch (event.key) {
         case "a":
@@ -161,16 +188,6 @@ export 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)) {
@@ -208,16 +225,51 @@ export class TimePicker {
         }
       }
     };
-    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)) {
@@ -255,29 +307,28 @@ export 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);
@@ -287,23 +338,23 @@ export 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;
@@ -329,6 +380,22 @@ export 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({
@@ -338,16 +405,24 @@ export 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
@@ -363,11 +438,14 @@ export 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;
@@ -375,14 +453,15 @@ export 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 */
@@ -437,6 +516,23 @@ export 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");
@@ -448,7 +544,10 @@ export 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();
             }
@@ -478,19 +577,13 @@ export 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;
@@ -506,7 +599,8 @@ export class TimePicker {
   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));
   }
   // --------------------------------------------------------------------------
   //
@@ -517,7 +611,7 @@ export class TimePicker {
     connectLocalized(this);
     this.updateLocale();
     connectMessages(this);
-    this.updateShowSecond();
+    this.toggleSecond();
     this.meridiemOrder = this.getMeridiemOrder(getTimeParts({
       value: "0:00:00",
       locale: this.effectiveLocale,
@@ -545,6 +639,7 @@ export 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 (h("div", { class: {
         [CSS.timePicker]: true,
@@ -555,7 +650,7 @@ export class TimePicker {
         [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,
@@ -564,10 +659,10 @@ export class TimePicker {
         [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,
@@ -575,10 +670,10 @@ export class TimePicker {
       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,
@@ -586,14 +681,25 @@ export class TimePicker {
       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,
@@ -602,7 +708,7 @@ export class TimePicker {
         [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 is() { return "calcite-time-picker"; }
   static get encapsulation() { return "shadow"; }
@@ -706,7 +812,7 @@ export class TimePicker {
         "mutable": true,
         "complexType": {
           "original": "TimePickerMessages",
-          "resolved": "{ hour: string; hourDown: string; hourUp: string; meridiem: string; meridiemDown: string; meridiemUp: string; minute: string; minuteDown: string; minuteUp: string; second: string; secondDown: string; secondUp: string; }",
+          "resolved": "{ fractionalSecond: string; fractionalSecondDown: string; fractionalSecondUp: string; hour: string; hourDown: string; hourUp: string; meridiem: string; meridiemDown: string; meridiemUp: string; minute: string; minuteDown: string; minuteUp: string; second: string; secondDown: string; secondUp: string; }",
           "references": {
             "TimePickerMessages": {
               "location": "import",
@@ -729,7 +835,7 @@ export class TimePicker {
         "mutable": true,
         "complexType": {
           "original": "Partial<TimePickerMessages>",
-          "resolved": "{ hour?: string; hourDown?: string; hourUp?: string; meridiem?: string; meridiemDown?: string; meridiemUp?: string; minute?: string; minuteDown?: string; minuteUp?: string; second?: string; secondDown?: string; secondUp?: string; }",
+          "resolved": "{ fractionalSecond?: string; fractionalSecondDown?: string; fractionalSecondUp?: string; hour?: string; hourDown?: string; hourUp?: string; meridiem?: string; meridiemDown?: string; meridiemUp?: string; minute?: string; minuteDown?: string; minuteUp?: string; second?: string; secondDown?: string; secondUp?: string; }",
           "references": {
             "Partial": {
               "location": "global"
@@ -752,11 +858,14 @@ export class TimePicker {
   static get states() {
     return {
       "effectiveLocale": {},
+      "fractionalSecond": {},
       "hour": {},
       "hourCycle": {},
+      "localizedDecimalSeparator": {},
       "localizedHour": {},
       "localizedHourSuffix": {},
       "localizedMeridiem": {},
+      "localizedFractionalSecond": {},
       "localizedMinute": {},
       "localizedMinuteSuffix": {},
       "localizedSecond": {},
@@ -764,6 +873,7 @@ export class TimePicker {
       "meridiem": {},
       "minute": {},
       "second": {},
+      "showFractionalSecond": {},
       "showSecond": {},
       "defaultMessages": {}
     };

package/dist/collection/components/tip/resources.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.2
+ * v1.7.0-next.21
  */
 export const CSS = {
   container: "container",

package/dist/collection/components/tip/tip.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.2
+ * v1.7.0-next.21
  */
 import { Fragment, h, } from "@stencil/core";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent, } from "../../utils/conditionalSlot";

package/dist/collection/components/tip-group/tip-group.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.2
+ * v1.7.0-next.21
  */
 import { h } from "@stencil/core";
 /**

package/dist/collection/components/tip-manager/resources.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.2
+ * v1.7.0-next.21
  */
 export const CSS = {
   header: "header",

package/dist/collection/components/tip-manager/tip-manager.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.2
+ * v1.7.0-next.21
  */
 import { h, } from "@stencil/core";
 import { getElementDir, toAriaBoolean } from "../../utils/dom";

package/dist/collection/components/tooltip/TooltipManager.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.2
+ * v1.7.0-next.21
  */
 import { getShadowRootNode, isPrimaryPointerButton } from "../../utils/dom";
 import { TOOLTIP_OPEN_DELAY_MS, TOOLTIP_CLOSE_DELAY_MS } from "./resources";

package/dist/collection/components/tooltip/resources.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.2
+ * v1.7.0-next.21
  */
 export const CSS = {
   container: "container",

package/dist/collection/components/tooltip/tooltip.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.2
+ * v1.7.0-next.21
  */
 import { h, Host, } from "@stencil/core";
 import { toAriaBoolean } from "../../utils/dom";