@esri/calcite-components 1.7.1-next.1 → 1.8.0-next.0

package/dist/components/time-picker.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.1-next.1
+ * v1.8.0-next.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { n as numberKeys } from './key.js';
@@ -292,6 +292,7 @@ const CSS = {
   fractionalSecond: "fractionalSecond",
   hour: "hour",
   input: "input",
+  inputFocus: "inputFocus",
   meridiem: "meridiem",
   minute: "minute",
   second: "second",
@@ -304,7 +305,7 @@ const CSS = {
   meridiemStart: "meridiem--start",
 };
 
-const timePickerCss = ":host{display:inline-block}.time-picker{display:flex;-webkit-user-select:none;user-select:none;align-items:center;background-color:var(--calcite-ui-foreground-1);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1);--tw-shadow:0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);--tw-shadow-colored:0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);border-radius:var(--calcite-border-radius)}.time-picker .column{display:flex;flex-direction:column}.time-picker .meridiem--start{order:-1}.time-picker .button{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;background-color:var(--calcite-ui-foreground-1)}.time-picker .button:hover,.time-picker .button:focus{background-color:var(--calcite-ui-foreground-2);outline:2px solid transparent;outline-offset:2px;z-index:var(--calcite-app-z-index-header);outline-offset:0}.time-picker .button:active{background-color:var(--calcite-ui-foreground-3)}.time-picker .button.top-left{border-start-start-radius:var(--calcite-border-radius)}.time-picker .button.bottom-left{border-end-start-radius:var(--calcite-border-radius)}.time-picker .button.top-right{border-start-end-radius:var(--calcite-border-radius)}.time-picker .button.bottom-right{border-end-end-radius:var(--calcite-border-radius)}.time-picker .button calcite-icon{color:var(--calcite-ui-text-3)}.time-picker .input{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;background-color:var(--calcite-ui-foreground-1);font-weight:var(--calcite-font-weight-medium)}.time-picker .input:hover{box-shadow:inset 0 0 0 2px var(--calcite-ui-foreground-2);z-index:var(--calcite-app-z-index-header)}.time-picker .input:focus,.time-picker .input:hover:focus{outline:2px solid transparent;outline-offset:2px;box-shadow:inset 0 0 0 2px var(--calcite-ui-brand);z-index:var(--calcite-app-z-index-header);outline-offset:0}.time-picker.scale-s{font-size:var(--calcite-font-size--1)}.time-picker.scale-s .button,.time-picker.scale-s .input{padding-inline:0.75rem;padding-block:0.25rem}.time-picker.scale-s:not(.show-meridiem) .delimiter:last-child{padding-inline-end:0.75rem}.time-picker.scale-m{font-size:var(--calcite-font-size-0)}.time-picker.scale-m .button,.time-picker.scale-m .input{padding-inline:1rem;padding-block:0.5rem}.time-picker.scale-m:not(.show-meridiem) .delimiter:last-child{padding-inline-end:1rem}.time-picker.scale-l{font-size:var(--calcite-font-size-1)}.time-picker.scale-l .button,.time-picker.scale-l .input{padding-inline:1.25rem;padding-block:0.75rem}.time-picker.scale-l:not(.show-meridiem) .delimiter:last-child{padding-inline-end:1.25rem}:host([hidden]){display:none}[hidden]{display:none}";
+const timePickerCss = ":host{display:inline-block}.time-picker{display:flex;-webkit-user-select:none;user-select:none;align-items:center;background-color:var(--calcite-ui-foreground-1);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1);--tw-shadow:0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);--tw-shadow-colored:0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);border-radius:var(--calcite-border-radius)}.time-picker .column{display:flex;flex-direction:column}.time-picker .meridiem--start{order:-1}.time-picker .button{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;background-color:var(--calcite-ui-foreground-1)}.time-picker .button:hover,.time-picker .button:focus{background-color:var(--calcite-ui-foreground-2);outline:2px solid transparent;outline-offset:2px;z-index:var(--calcite-app-z-index-header);outline-offset:0}.time-picker .button:active{background-color:var(--calcite-ui-foreground-3)}.time-picker .button.top-left{border-start-start-radius:var(--calcite-border-radius)}.time-picker .button.bottom-left{border-end-start-radius:var(--calcite-border-radius)}.time-picker .button.top-right{border-start-end-radius:var(--calcite-border-radius)}.time-picker .button.bottom-right{border-end-end-radius:var(--calcite-border-radius)}.time-picker .button calcite-icon{color:var(--calcite-ui-text-3)}.time-picker .input{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;background-color:var(--calcite-ui-foreground-1);font-weight:var(--calcite-font-weight-medium)}.time-picker .input:hover{box-shadow:inset 0 0 0 2px var(--calcite-ui-foreground-2);z-index:var(--calcite-app-z-index-header)}.time-picker .input:focus,.time-picker .input:hover:focus{outline:2px solid transparent;outline-offset:2px;outline-offset:0}.time-picker .input.inputFocus,.time-picker .input:hover.inputFocus{box-shadow:inset 0 0 0 2px var(--calcite-ui-brand);z-index:var(--calcite-app-z-index-header)}.time-picker.scale-s{font-size:var(--calcite-font-size--1)}.time-picker.scale-s .button,.time-picker.scale-s .input{padding-inline:0.75rem;padding-block:0.25rem}.time-picker.scale-s:not(.show-meridiem) .delimiter:last-child{padding-inline-end:0.75rem}.time-picker.scale-m{font-size:var(--calcite-font-size-0)}.time-picker.scale-m .button,.time-picker.scale-m .input{padding-inline:1rem;padding-block:0.5rem}.time-picker.scale-m:not(.show-meridiem) .delimiter:last-child{padding-inline-end:1rem}.time-picker.scale-l{font-size:var(--calcite-font-size-1)}.time-picker.scale-l .button,.time-picker.scale-l .input{padding-inline:1.25rem;padding-block:0.75rem}.time-picker.scale-l:not(.show-meridiem) .delimiter:last-child{padding-inline-end:1.25rem}:host([hidden]){display:none}[hidden]{display:none}";
 
 function capitalize(str) {
   return str.charAt(0).toUpperCase() + str.slice(1);
@@ -317,9 +318,7 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.calciteInternalTimePickerBlur = createEvent(this, "calciteInternalTimePickerBlur", 6);
     this.calciteInternalTimePickerChange = createEvent(this, "calciteInternalTimePickerChange", 6);
     this.calciteInternalTimePickerFocus = createEvent(this, "calciteInternalTimePickerFocus", 6);
-    this.decrementFractionalSecond = () => {
-      this.nudgeFractionalSecond("down");
-    };
+    this.pointerActivated = false;
     this.decrementHour = () => {
       const newHour = !this.hour ? 0 : this.hour === "00" ? 23 : parseInt(this.hour) - 1;
       this.setValuePart("hour", newHour);
@@ -346,6 +345,9 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.decrementMinuteOrSecond("second");
     };
     this.focusHandler = (event) => {
+      if (this.pointerActivated) {
+        return;
+      }
       this.activeEl = event.currentTarget;
     };
     this.fractionalSecondKeyDownHandler = (event) => {
@@ -383,6 +385,21 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         }
       }
     };
+    this.fractionalSecondDownClickHandler = () => {
+      this.activeEl = this.fractionalSecondEl;
+      this.fractionalSecondEl.focus();
+      this.nudgeFractionalSecond("down");
+    };
+    this.fractionalSecondUpClickHandler = () => {
+      this.activeEl = this.fractionalSecondEl;
+      this.fractionalSecondEl.focus();
+      this.nudgeFractionalSecond("up");
+    };
+    this.hourDownClickHandler = () => {
+      this.activeEl = this.hourEl;
+      this.hourEl.focus();
+      this.decrementHour();
+    };
     this.hourKeyDownHandler = (event) => {
       const { key } = event;
       if (numberKeys.includes(key)) {
@@ -434,8 +451,10 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         }
       }
     };
-    this.incrementFractionalSecond = () => {
-      this.nudgeFractionalSecond("up");
+    this.hourUpClickHandler = () => {
+      this.activeEl = this.hourEl;
+      this.hourEl.focus();
+      this.incrementHour();
     };
     this.incrementMeridiem = () => {
       const newMeridiem = this.meridiem === "AM" ? "PM" : "AM";
@@ -463,6 +482,14 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.incrementSecond = () => {
       this.incrementMinuteOrSecond("second");
     };
+    this.inputClickHandler = (event) => {
+      this.activeEl = event.target;
+    };
+    this.meridiemUpClickHandler = () => {
+      this.activeEl = this.meridiemEl;
+      this.meridiemEl.focus();
+      this.incrementMeridiem();
+    };
     this.meridiemKeyDownHandler = (event) => {
       switch (event.key) {
         case "a":
@@ -488,6 +515,21 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
           break;
       }
     };
+    this.meridiemDownClickHandler = () => {
+      this.activeEl = this.meridiemEl;
+      this.meridiemEl.focus();
+      this.decrementMeridiem();
+    };
+    this.minuteDownClickHandler = () => {
+      this.activeEl = this.minuteEl;
+      this.minuteEl.focus();
+      this.decrementMinute();
+    };
+    this.minuteUpClickHandler = () => {
+      this.activeEl = this.minuteEl;
+      this.minuteEl.focus();
+      this.incrementMinute();
+    };
     this.minuteKeyDownHandler = (event) => {
       const { key } = event;
       if (numberKeys.includes(key)) {
@@ -607,6 +649,16 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         }
       }
     };
+    this.secondDownClickHandler = () => {
+      this.activeEl = this.secondEl;
+      this.secondEl.focus();
+      this.decrementSecond();
+    };
+    this.secondUpClickHandler = () => {
+      this.activeEl = this.secondEl;
+      this.secondEl.focus();
+      this.incrementSecond();
+    };
     this.setHourEl = (el) => (this.hourEl = el);
     this.setMeridiemEl = (el) => (this.meridiemEl = el);
     this.setMinuteEl = (el) => (this.minuteEl = el);
@@ -737,6 +789,7 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.value = null;
     this.messages = undefined;
     this.messageOverrides = undefined;
+    this.activeEl = undefined;
     this.effectiveLocale = "";
     this.fractionalSecond = undefined;
     this.hour = undefined;
@@ -774,13 +827,16 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   //  Event Listeners
   //
   //--------------------------------------------------------------------------
-  hostBlurHandler() {
+  blurHandler() {
+    this.activeEl = undefined;
+    this.pointerActivated = false;
     this.calciteInternalTimePickerBlur.emit();
   }
   hostFocusHandler() {
     this.calciteInternalTimePickerFocus.emit();
   }
   keyDownHandler(event) {
+    this.pointerActivated = false;
     const { defaultPrevented, key } = event;
     if (defaultPrevented) {
       return;
@@ -860,6 +916,9 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         break;
     }
   }
+  pointerDownHandler() {
+    this.pointerActivated = true;
+  }
   //--------------------------------------------------------------------------
   //
   //  Public Methods
@@ -950,65 +1009,70 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         [CSS.button]: true,
         [CSS.buttonHourUp]: true,
         [CSS.buttonTopLeft]: true,
-      }, 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: {
+      }, onClick: this.hourUpClickHandler, role: "button" }, h("calcite-icon", { icon: "chevron-up", scale: iconScale })), h("span", { "aria-label": this.messages.hour, "aria-valuemax": "23", "aria-valuemin": "1", "aria-valuenow": (hourIsNumber && parseInt(this.hour)) || "0", "aria-valuetext": this.hour, class: {
         [CSS.input]: true,
         [CSS.hour]: true,
-      }, onFocus: this.focusHandler, onKeyDown: this.hourKeyDownHandler, role: "spinbutton", tabIndex: 0,
+        [CSS.inputFocus]: this.activeEl && this.activeEl === this.hourEl,
+      }, onClick: this.inputClickHandler, onFocus: this.focusHandler, onKeyDown: this.hourKeyDownHandler, role: "spinbutton", tabIndex: 0,
       // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setHourEl }, this.localizedHour || "--"), h("span", { "aria-label": this.messages.hourDown, class: {
         [CSS.button]: true,
         [CSS.buttonHourDown]: true,
         [CSS.buttonBottomLeft]: true,
-      }, onClick: this.decrementHour, role: "button" }, h("calcite-icon", { icon: "chevron-down", scale: iconScale }))), h("span", { class: CSS.delimiter }, this.localizedHourSuffix), h("div", { class: CSS.column, role: "group" }, h("span", { "aria-label": this.messages.minuteUp, class: {
+      }, onClick: this.hourDownClickHandler, role: "button" }, h("calcite-icon", { icon: "chevron-down", scale: iconScale }))), h("span", { class: CSS.delimiter }, this.localizedHourSuffix), h("div", { class: CSS.column, role: "group" }, h("span", { "aria-label": this.messages.minuteUp, class: {
         [CSS.button]: true,
         [CSS.buttonMinuteUp]: true,
-      }, onClick: this.incrementMinute, 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: {
+      }, onClick: this.minuteUpClickHandler, role: "button" }, h("calcite-icon", { icon: "chevron-up", scale: iconScale })), h("span", { "aria-label": this.messages.minute, "aria-valuemax": "12", "aria-valuemin": "1", "aria-valuenow": (minuteIsNumber && parseInt(this.minute)) || "0", "aria-valuetext": this.minute, class: {
         [CSS.input]: true,
         [CSS.minute]: true,
-      }, onFocus: this.focusHandler, onKeyDown: this.minuteKeyDownHandler, role: "spinbutton", tabIndex: 0,
+        [CSS.inputFocus]: this.activeEl && this.activeEl === this.minuteEl,
+      }, onClick: this.inputClickHandler, onFocus: this.focusHandler, onKeyDown: this.minuteKeyDownHandler, role: "spinbutton", tabIndex: 0,
       // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setMinuteEl }, this.localizedMinute || "--"), h("span", { "aria-label": this.messages.minuteDown, class: {
         [CSS.button]: true,
         [CSS.buttonMinuteDown]: true,
-      }, onClick: this.decrementMinute, role: "button" }, h("calcite-icon", { icon: "chevron-down", scale: iconScale }))), this.showSecond && h("span", { class: CSS.delimiter }, this.localizedMinuteSuffix), this.showSecond && (h("div", { class: CSS.column, role: "group" }, h("span", { "aria-label": this.messages.secondUp, class: {
+      }, onClick: this.minuteDownClickHandler, role: "button" }, h("calcite-icon", { icon: "chevron-down", scale: iconScale }))), this.showSecond && h("span", { class: CSS.delimiter }, this.localizedMinuteSuffix), this.showSecond && (h("div", { class: CSS.column, role: "group" }, h("span", { "aria-label": this.messages.secondUp, class: {
         [CSS.button]: true,
         [CSS.buttonSecondUp]: true,
-      }, onClick: this.incrementSecond, role: "button" }, h("calcite-icon", { icon: "chevron-up", scale: iconScale })), h("span", { "aria-label": this.messages.second, "aria-valuemax": "59", "aria-valuemin": "0", "aria-valuenow": (secondIsNumber && parseInt(this.second)) || "0", "aria-valuetext": this.second, class: {
+      }, onClick: this.secondUpClickHandler, role: "button" }, h("calcite-icon", { icon: "chevron-up", scale: iconScale })), h("span", { "aria-label": this.messages.second, "aria-valuemax": "59", "aria-valuemin": "0", "aria-valuenow": (secondIsNumber && parseInt(this.second)) || "0", "aria-valuetext": this.second, class: {
         [CSS.input]: true,
         [CSS.second]: true,
-      }, onFocus: this.focusHandler, onKeyDown: this.secondKeyDownHandler, role: "spinbutton", tabIndex: 0,
+        [CSS.inputFocus]: this.activeEl && this.activeEl === this.secondEl,
+      }, onClick: this.inputClickHandler, onFocus: this.focusHandler, onKeyDown: this.secondKeyDownHandler, role: "spinbutton", tabIndex: 0,
       // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setSecondEl }, this.localizedSecond || "--"), h("span", { "aria-label": this.messages.secondDown, class: {
         [CSS.button]: true,
         [CSS.buttonSecondDown]: true,
-      }, onClick: this.decrementSecond, 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: {
+      }, onClick: this.secondDownClickHandler, role: "button" }, h("calcite-icon", { icon: "chevron-down", scale: iconScale })))), this.showFractionalSecond && (h("span", { class: CSS.delimiter }, this.localizedDecimalSeparator)), this.showFractionalSecond && (h("div", { class: CSS.column, role: "group" }, h("span", { "aria-label": this.messages.fractionalSecondUp, class: {
         [CSS.button]: true,
         [CSS.buttonFractionalSecondUp]: true,
-      }, onClick: this.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: {
+      }, onClick: this.fractionalSecondUpClickHandler, role: "button" }, h("calcite-icon", { icon: "chevron-up", scale: iconScale })), h("span", { "aria-label": this.messages.fractionalSecond, "aria-valuemax": "999", "aria-valuemin": "1", "aria-valuenow": (fractionalSecondIsNumber && parseInt(this.fractionalSecond)) || "0", "aria-valuetext": this.localizedFractionalSecond, class: {
         [CSS.input]: true,
         [CSS.fractionalSecond]: true,
-      }, onFocus: this.focusHandler, onKeyDown: this.fractionalSecondKeyDownHandler, role: "spinbutton", tabIndex: 0,
+        [CSS.inputFocus]: this.activeEl && this.activeEl === this.fractionalSecondEl,
+      }, onClick: this.inputClickHandler, onFocus: this.focusHandler, onKeyDown: this.fractionalSecondKeyDownHandler, role: "spinbutton", tabIndex: 0,
       // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setFractionalSecondEl }, this.localizedFractionalSecond || "--"), h("span", { "aria-label": this.messages.fractionalSecondDown, class: {
         [CSS.button]: true,
         [CSS.buttonFractionalSecondDown]: true,
-      }, onClick: this.decrementFractionalSecond, 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.fractionalSecondDownClickHandler, role: "button" }, h("calcite-icon", { icon: "chevron-down", scale: iconScale })))), this.localizedSecondSuffix && (h("span", { class: CSS.delimiter }, this.localizedSecondSuffix)), showMeridiem && (h("div", { class: {
         [CSS.column]: true,
         [CSS.meridiemStart]: this.meridiemOrder === 0,
       }, role: "group" }, h("span", { "aria-label": this.messages.meridiemUp, class: {
         [CSS.button]: true,
         [CSS.buttonMeridiemUp]: true,
         [CSS.buttonTopRight]: true,
-      }, onClick: this.incrementMeridiem, role: "button" }, h("calcite-icon", { icon: "chevron-up", scale: iconScale })), h("span", { "aria-label": this.messages.meridiem, "aria-valuemax": "2", "aria-valuemin": "1", "aria-valuenow": (this.meridiem === "PM" && "2") || "1", "aria-valuetext": this.meridiem, class: {
+      }, onClick: this.meridiemUpClickHandler, role: "button" }, h("calcite-icon", { icon: "chevron-up", scale: iconScale })), h("span", { "aria-label": this.messages.meridiem, "aria-valuemax": "2", "aria-valuemin": "1", "aria-valuenow": (this.meridiem === "PM" && "2") || "1", "aria-valuetext": this.meridiem, class: {
         [CSS.input]: true,
         [CSS.meridiem]: true,
-      }, onFocus: this.focusHandler, onKeyDown: this.meridiemKeyDownHandler, role: "spinbutton", tabIndex: 0,
+        [CSS.inputFocus]: this.activeEl && this.activeEl === this.meridiemEl,
+      }, onClick: this.inputClickHandler, onFocus: this.focusHandler, onKeyDown: this.meridiemKeyDownHandler, role: "spinbutton", tabIndex: 0,
       // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setMeridiemEl }, this.localizedMeridiem || "--"), h("span", { "aria-label": this.messages.meridiemDown, class: {
         [CSS.button]: true,
         [CSS.buttonMeridiemDown]: true,
         [CSS.buttonBottomRight]: true,
-      }, onClick: this.decrementMeridiem, role: "button" }, h("calcite-icon", { icon: "chevron-down", scale: iconScale }))))));
+      }, onClick: this.meridiemDownClickHandler, role: "button" }, h("calcite-icon", { icon: "chevron-down", scale: iconScale }))))));
   }
   static get delegatesFocus() { return true; }
   static get assetsDirs() { return ["assets"]; }
@@ -1027,6 +1091,7 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "value": [1025],
     "messages": [1040],
     "messageOverrides": [1040],
+    "activeEl": [32],
     "effectiveLocale": [32],
     "fractionalSecond": [32],
     "hour": [32],
@@ -1047,7 +1112,7 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "showSecond": [32],
     "defaultMessages": [32],
     "setFocus": [64]
-  }, [[0, "blur", "hostBlurHandler"], [0, "focus", "hostFocusHandler"], [0, "keydown", "keyDownHandler"]]]);
+  }, [[0, "blur", "blurHandler"], [0, "focus", "hostFocusHandler"], [0, "keydown", "keyDownHandler"], [1, "pointerdown", "pointerDownHandler"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;

package/dist/components/tr.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.1-next.1
+ * v1.8.0-next.0
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/uk.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.1-next.1
+ * v1.8.0-next.0
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/utils.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.1-next.1
+ * v1.8.0-next.0
  */
 const hexChar = /^[0-9A-F]$/i;
 const shorthandHex = /^#[0-9A-F]{3}$/i;

package/dist/components/utils2.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.1-next.1
+ * v1.8.0-next.0
  */
 import { o as nodeListToArray } from './dom.js';
 import { Build } from '@stencil/core/internal/client/index.js';

package/dist/components/utils3.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.1-next.1
+ * v1.8.0-next.0
  */
 import { Build } from '@stencil/core/internal/client/index.js';
 

package/dist/components/vi.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.1-next.1
+ * v1.8.0-next.0
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/zh-cn.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.1-next.1
+ * v1.8.0-next.0
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/zh-hk.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.1-next.1
+ * v1.8.0-next.0
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/zh-tw.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.1-next.1
+ * v1.8.0-next.0
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/esm/{ExpandToggle-b64ca934.js → ExpandToggle-8f1a743a.js}

@@ -1,12 +1,12 @@
 /*!
  * 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.1-next.1
+ * v1.8.0-next.0
  */
-import { f as forceUpdate, h } from './index-827489a7.js';
-import { g as getElementDir } from './dom-3a67d0f4.js';
-import { S as SLOTS$1 } from './resources-001bd202.js';
-import { S as SLOTS } from './resources-e7d047a8.js';
+import { f as forceUpdate, h } from './index-c3fbce88.js';
+import { g as getElementDir } from './dom-5be70645.js';
+import { S as SLOTS$1 } from './resources-4f6dd419.js';
+import { S as SLOTS } from './resources-8532b757.js';
 
 const overflowActionsDebounceInMs = 150;
 const groupBufferPx = 2;

package/dist/esm/{FloatingArrow-5c09b6b8.js → FloatingArrow-d3664841.js}

@@ -1,9 +1,9 @@
 /*!
  * 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.1-next.1
+ * v1.8.0-next.0
  */
-import { h } from './index-827489a7.js';
+import { h } from './index-c3fbce88.js';
 
 const CSS = {
   arrow: "calcite-floating-ui-arrow",

package/dist/esm/{Heading-e191abdd.js → Heading-97311bc1.js}

@@ -1,9 +1,9 @@
 /*!
  * 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.1-next.1
+ * v1.8.0-next.0
  */
-import { h } from './index-827489a7.js';
+import { h } from './index-c3fbce88.js';
 
 function constrainHeadingLevel(level) {
   return Math.min(Math.max(Math.ceil(level), 1), 6);

package/dist/esm/{app-globals-6ad15981.js → app-globals-8543070d.js}

@@ -1,9 +1,9 @@
 /*!
  * 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.1-next.1
+ * v1.8.0-next.0
  */
-import { d as darkMode, a as autoMode } from './resources-ea41f056.js';
+import { d as darkMode, a as autoMode } from './resources-3caa5205.js';
 
 /**
  * Emits when the mode is dynamically toggled between light and dark on <body> or in OS preferences.

package/dist/esm/{ar-0daa2f1c.js → ar-777d5897.js}

@@ -1,24 +1,24 @@
 /*!
  * 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.1-next.1
+ * v1.8.0-next.0
  */
-import { d as dayjs } from './calcite-input-time-picker.calcite-time-picker-d6f987e5.js';
-import './index-827489a7.js';
-import './form-606799cd.js';
-import './dom-3a67d0f4.js';
-import './guid-22639dcd.js';
-import './resources-ea41f056.js';
-import './interactive-66c4842a.js';
-import './browser-9b7d9d9e.js';
-import './key-e0ed45d2.js';
-import './label-21046f01.js';
-import './loadable-6d0b870c.js';
-import './locale-f3cc92be.js';
-import './observers-3c121663.js';
-import './focusTrapComponent-a9dc1b43.js';
-import './math-4e8f01ee.js';
-import './t9n-75b506e8.js';
+import { d as dayjs } from './calcite-input-time-picker.calcite-time-picker-0bed126d.js';
+import './index-c3fbce88.js';
+import './form-91d5efbc.js';
+import './dom-5be70645.js';
+import './guid-2bb3871a.js';
+import './resources-3caa5205.js';
+import './interactive-189f9bf3.js';
+import './browser-42aa39cb.js';
+import './key-bf48a440.js';
+import './label-ad101fad.js';
+import './loadable-7d950f31.js';
+import './locale-e9747e3f.js';
+import './observers-9cb41972.js';
+import './focusTrapComponent-ab24c2c4.js';
+import './math-a9b9a7c5.js';
+import './t9n-c9255e01.js';
 
 // Arabic [ar]
 var months = 'يناير_فبراير_مارس_أبريل_مايو_يونيو_يوليو_أغسطس_سبتمبر_أكتوبر_نوفمبر_ديسمبر'.split('_');

package/dist/esm/{array-6e276ac6.js → array-00bc1715.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.1-next.1
+ * v1.8.0-next.0
  */
 function getRoundRobinIndex(index, total) {
   return (index + total) % total;

package/dist/esm/{bg-68426798.js → bg-35221306.js}

@@ -1,24 +1,24 @@
 /*!
  * 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.1-next.1
+ * v1.8.0-next.0
  */
-import { d as dayjs } from './calcite-input-time-picker.calcite-time-picker-d6f987e5.js';
-import './index-827489a7.js';
-import './form-606799cd.js';
-import './dom-3a67d0f4.js';
-import './guid-22639dcd.js';
-import './resources-ea41f056.js';
-import './interactive-66c4842a.js';
-import './browser-9b7d9d9e.js';
-import './key-e0ed45d2.js';
-import './label-21046f01.js';
-import './loadable-6d0b870c.js';
-import './locale-f3cc92be.js';
-import './observers-3c121663.js';
-import './focusTrapComponent-a9dc1b43.js';
-import './math-4e8f01ee.js';
-import './t9n-75b506e8.js';
+import { d as dayjs } from './calcite-input-time-picker.calcite-time-picker-0bed126d.js';
+import './index-c3fbce88.js';
+import './form-91d5efbc.js';
+import './dom-5be70645.js';
+import './guid-2bb3871a.js';
+import './resources-3caa5205.js';
+import './interactive-189f9bf3.js';
+import './browser-42aa39cb.js';
+import './key-bf48a440.js';
+import './label-ad101fad.js';
+import './loadable-7d950f31.js';
+import './locale-e9747e3f.js';
+import './observers-9cb41972.js';
+import './focusTrapComponent-ab24c2c4.js';
+import './math-a9b9a7c5.js';
+import './t9n-c9255e01.js';
 
 // Bulgarian [bg]
 var locale = {

package/dist/esm/{browser-9b7d9d9e.js → browser-42aa39cb.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.1-next.1
+ * v1.8.0-next.0
  */
 function getUserAgentData() {
   return navigator.userAgentData;

package/dist/esm/{bs-24cf36d3.js → bs-39a2d3ca.js}

@@ -1,24 +1,24 @@
 /*!
  * 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.1-next.1
+ * v1.8.0-next.0
  */
-import { d as dayjs } from './calcite-input-time-picker.calcite-time-picker-d6f987e5.js';
-import './index-827489a7.js';
-import './form-606799cd.js';
-import './dom-3a67d0f4.js';
-import './guid-22639dcd.js';
-import './resources-ea41f056.js';
-import './interactive-66c4842a.js';
-import './browser-9b7d9d9e.js';
-import './key-e0ed45d2.js';
-import './label-21046f01.js';
-import './loadable-6d0b870c.js';
-import './locale-f3cc92be.js';
-import './observers-3c121663.js';
-import './focusTrapComponent-a9dc1b43.js';
-import './math-4e8f01ee.js';
-import './t9n-75b506e8.js';
+import { d as dayjs } from './calcite-input-time-picker.calcite-time-picker-0bed126d.js';
+import './index-c3fbce88.js';
+import './form-91d5efbc.js';
+import './dom-5be70645.js';
+import './guid-2bb3871a.js';
+import './resources-3caa5205.js';
+import './interactive-189f9bf3.js';
+import './browser-42aa39cb.js';
+import './key-bf48a440.js';
+import './label-ad101fad.js';
+import './loadable-7d950f31.js';
+import './locale-e9747e3f.js';
+import './observers-9cb41972.js';
+import './focusTrapComponent-ab24c2c4.js';
+import './math-a9b9a7c5.js';
+import './t9n-c9255e01.js';
 
 // Bosnian [bs]
 var locale = {

package/dist/esm/{ca-28c2418d.js → ca-424fc229.js}

@@ -1,24 +1,24 @@
 /*!
  * 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.1-next.1
+ * v1.8.0-next.0
  */
-import { d as dayjs } from './calcite-input-time-picker.calcite-time-picker-d6f987e5.js';
-import './index-827489a7.js';
-import './form-606799cd.js';
-import './dom-3a67d0f4.js';
-import './guid-22639dcd.js';
-import './resources-ea41f056.js';
-import './interactive-66c4842a.js';
-import './browser-9b7d9d9e.js';
-import './key-e0ed45d2.js';
-import './label-21046f01.js';
-import './loadable-6d0b870c.js';
-import './locale-f3cc92be.js';
-import './observers-3c121663.js';
-import './focusTrapComponent-a9dc1b43.js';
-import './math-4e8f01ee.js';
-import './t9n-75b506e8.js';
+import { d as dayjs } from './calcite-input-time-picker.calcite-time-picker-0bed126d.js';
+import './index-c3fbce88.js';
+import './form-91d5efbc.js';
+import './dom-5be70645.js';
+import './guid-2bb3871a.js';
+import './resources-3caa5205.js';
+import './interactive-189f9bf3.js';
+import './browser-42aa39cb.js';
+import './key-bf48a440.js';
+import './label-ad101fad.js';
+import './loadable-7d950f31.js';
+import './locale-e9747e3f.js';
+import './observers-9cb41972.js';
+import './focusTrapComponent-ab24c2c4.js';
+import './math-a9b9a7c5.js';
+import './t9n-c9255e01.js';
 
 // Catalan [ca]
 var locale = {