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

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.1-next.2
+ * v1.8.0-next.1
  */
 'use strict';
 
@@ -7707,6 +7707,8 @@ const numberingSystems = [
 ];
 const isNumberingSystemSupported = (numberingSystem) => numberingSystems.includes(numberingSystem);
 const browserNumberingSystem = new Intl.NumberFormat().resolvedOptions().numberingSystem;
+// for consistent browser behavior, we normalize numberingSystem to prevent the browser-inferred value
+// see https://github.com/Esri/calcite-design-system/issues/3079#issuecomment-1168964195 for more info
 const defaultNumberingSystem = browserNumberingSystem === "arab" || !isNumberingSystemSupported(browserNumberingSystem)
   ? "latn"
   : browserNumberingSystem;
@@ -10377,11 +10379,14 @@ class ActionPad {
   }; }
 }
 
+function isOpen(component) {
+  return "opened" in component ? component.opened : component.open;
+}
 function emitImmediately(component, nonOpenCloseComponent = false) {
-  (nonOpenCloseComponent ? component[component.transitionProp] : component.open)
+  (nonOpenCloseComponent ? component[component.transitionProp] : isOpen(component))
     ? component.onBeforeOpen()
     : component.onBeforeClose();
-  (nonOpenCloseComponent ? component[component.transitionProp] : component.open)
+  (nonOpenCloseComponent ? component[component.transitionProp] : isOpen(component))
     ? component.onOpen()
     : component.onClose();
 }
@@ -10433,14 +10438,14 @@ function onToggleOpenCloseComponent(component, nonOpenCloseComponent = false) {
         if (event.propertyName === component.openTransitionProp && event.target === component.transitionEl) {
           clearTimeout(fallbackTimeoutId);
           component.transitionEl.removeEventListener("transitionstart", onStart);
-          (nonOpenCloseComponent ? component[component.transitionProp] : component.open)
+          (nonOpenCloseComponent ? component[component.transitionProp] : isOpen(component))
             ? component.onBeforeOpen()
             : component.onBeforeClose();
         }
       }
       function onEndOrCancel(event) {
         if (event.propertyName === component.openTransitionProp && event.target === component.transitionEl) {
-          (nonOpenCloseComponent ? component[component.transitionProp] : component.open)
+          (nonOpenCloseComponent ? component[component.transitionProp] : isOpen(component))
             ? component.onOpen()
             : component.onClose();
           component.transitionEl.removeEventListener("transitionend", onEndOrCancel);
@@ -25720,8 +25725,14 @@ class InputDatePicker {
     const endDate = this.range
       ? dateFromRange((Array.isArray(this.valueAsDate) && this.valueAsDate[1]) || undefined, this.minAsDate, this.maxAsDate)
       : null;
-    const localizedDate = date && this.formatNumerals(date.toLocaleDateString(this.effectiveLocale));
-    const localizedEndDate = endDate && this.formatNumerals(endDate.toLocaleDateString(this.effectiveLocale));
+    const formattingOptions = {
+      // we explicitly set numberingSystem to prevent the browser-inferred value
+      // see https://github.com/Esri/calcite-design-system/issues/3079#issuecomment-1168964195 for more info
+      numberingSystem: defaultNumberingSystem,
+    };
+    const localizedDate = date && this.formatNumerals(date.toLocaleDateString(this.effectiveLocale, formattingOptions));
+    const localizedEndDate = endDate &&
+      this.formatNumerals(endDate.toLocaleDateString(this.effectiveLocale, formattingOptions));
     this.setInputValue(localizedDate ?? "", "start");
     this.setInputValue((this.range && localizedEndDate) ?? "", "end");
   }
@@ -32472,7 +32483,7 @@ const SLOTS$g = {
   actionsEnd: "actions-end",
 };
 
-const listCss = "/*!@:host([disabled])*/[disabled].sc-calcite-list-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-list-h *.sc-calcite-list,.sc-calcite-list-h[disabled] .sc-calcite-list-s>*{pointer-events:none}/*!@:host*/.sc-calcite-list-h{display:block}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-list-h[disabled] .sc-calcite-list-s>[calcite-hydrated][disabled],[disabled].sc-calcite-list-h [calcite-hydrated][disabled].sc-calcite-list{opacity:1}/*!@.container*/.container.sc-calcite-list{position:relative}/*!@.table-container*/.table-container.sc-calcite-list{position:relative;z-index:var(--calcite-app-z-index);box-sizing:border-box;display:flex;inline-size:100%;flex-direction:column;background-color:transparent}/*!@.table-container **/.table-container.sc-calcite-list *.sc-calcite-list{box-sizing:border-box}/*!@.table*/.table.sc-calcite-list{inline-size:100%;border-collapse:collapse}/*!@.stack*/.stack.sc-calcite-list{--calcite-stack-padding-inline:0;--calcite-stack-padding-block:0}/*!@::slotted(calcite-list-item)*/.sc-calcite-list-s>calcite-list-item{margin-block-end:1px;--tw-shadow:0 1px 0 var(--calcite-ui-border-3);--tw-shadow-colored:0 1px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}/*!@::slotted(calcite-list-item:last-child)*/.sc-calcite-list-s>calcite-list-item:last-child{--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)}/*!@.sticky-pos*/.sticky-pos.sc-calcite-list{position:sticky;inset-block-start:0px;z-index:var(--calcite-app-z-index-sticky);background-color:var(--calcite-ui-foreground-1)}/*!@.sticky-pos th*/.sticky-pos.sc-calcite-list th.sc-calcite-list{padding:0px}/*!@.assistive-text*/.assistive-text.sc-calcite-list{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-list-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-list{display:none}";
+const listCss = "/*!@:host([disabled])*/[disabled].sc-calcite-list-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-list-h *.sc-calcite-list,.sc-calcite-list-h[disabled] .sc-calcite-list-s>*{pointer-events:none}/*!@:host*/.sc-calcite-list-h{display:block}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-list-h[disabled] .sc-calcite-list-s>[calcite-hydrated][disabled],[disabled].sc-calcite-list-h [calcite-hydrated][disabled].sc-calcite-list{opacity:1}/*!@.container*/.container.sc-calcite-list{position:relative}/*!@.table-container*/.table-container.sc-calcite-list{box-sizing:border-box;display:flex;inline-size:100%;flex-direction:column;background-color:transparent}/*!@.table-container **/.table-container.sc-calcite-list *.sc-calcite-list{box-sizing:border-box}/*!@.table*/.table.sc-calcite-list{inline-size:100%;border-collapse:collapse}/*!@.stack*/.stack.sc-calcite-list{--calcite-stack-padding-inline:0;--calcite-stack-padding-block:0}/*!@::slotted(calcite-list-item)*/.sc-calcite-list-s>calcite-list-item{margin-block-end:1px;--tw-shadow:0 1px 0 var(--calcite-ui-border-3);--tw-shadow-colored:0 1px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}/*!@::slotted(calcite-list-item:last-child)*/.sc-calcite-list-s>calcite-list-item:last-child{--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)}/*!@.sticky-pos*/.sticky-pos.sc-calcite-list{position:sticky;inset-block-start:0px;z-index:var(--calcite-app-z-index-sticky);background-color:var(--calcite-ui-foreground-1)}/*!@.sticky-pos th*/.sticky-pos.sc-calcite-list th.sc-calcite-list{padding:0px}/*!@.assistive-text*/.assistive-text.sc-calcite-list{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-list-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-list{display:none}";
 
 const listItemSelector = "calcite-list-item";
 const listItemSelectorDirect = `:scope > calcite-list-item`;
@@ -32951,7 +32962,7 @@ class List$1 {
   }; }
 }
 
-const listItemCss = "/*!@:host([disabled])*/[disabled].sc-calcite-list-item-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-list-item-h *.sc-calcite-list-item,.sc-calcite-list-item-h[disabled] .sc-calcite-list-item-s>*{pointer-events:none}/*!@:host*/.sc-calcite-list-item-h{display:flex;flex-direction:column;--calcite-list-item-icon-color:var(--calcite-ui-brand);--calcite-list-item-spacing-indent:1rem}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-list-item-h[disabled] .sc-calcite-list-item-s>[calcite-hydrated][disabled],[disabled].sc-calcite-list-item-h [calcite-hydrated][disabled].sc-calcite-list-item{opacity:1}/*!@.container*/.container.sc-calcite-list-item{box-sizing:border-box;display:flex;flex:1 1 0%;background-color:var(--calcite-ui-foreground-1);font-family:var(--calcite-sans-family);padding-inline-start:calc(var(--calcite-list-item-spacing-indent) * var(--calcite-list-item-spacing-indent-multiplier))}/*!@.container **/.container.sc-calcite-list-item *.sc-calcite-list-item{box-sizing:border-box}/*!@.container:hover*/.container.sc-calcite-list-item:hover{cursor:pointer;background-color:var(--calcite-ui-foreground-2)}/*!@.container--border-selected*/.container--border-selected.sc-calcite-list-item{border-inline-start:4px solid var(--calcite-ui-brand)}/*!@.container--border-unselected*/.container--border-unselected.sc-calcite-list-item{border-inline-start:4px solid transparent}/*!@.nested-container*/.nested-container.sc-calcite-list-item{display:flex;flex-direction:column;background-color:var(--calcite-ui-foreground-1)}/*!@.nested-container--hidden*/.nested-container--hidden.sc-calcite-list-item{display:none}/*!@.content-container*/.content-container.sc-calcite-list-item{display:flex;flex:1 1 auto;align-items:stretch;padding:0px;font-family:var(--calcite-sans-family);font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-2)}/*!@tr,\ntd*/tr.sc-calcite-list-item,td.sc-calcite-list-item{outline-color:transparent}/*!@tr:focus,\ntd:focus*/tr.sc-calcite-list-item:focus,td.sc-calcite-list-item:focus{z-index:var(--calcite-app-z-index-sticky);outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}/*!@.content,\n.custom-content*/.content.sc-calcite-list-item,.custom-content.sc-calcite-list-item{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;padding-inline:0.75rem;padding-block:0.5rem;font-size:var(--calcite-font-size--2);line-height:1.375}/*!@.label,\n.description*/.label.sc-calcite-list-item,.description.sc-calcite-list-item{font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size--2);font-weight:var(--calcite-font-weight-normal);word-wrap:break-word;word-break:break-word}/*!@.label:only-child,\n.description:only-child*/.label.sc-calcite-list-item:only-child,.description.sc-calcite-list-item:only-child{margin:0px;padding-block:0.25rem}/*!@.label*/.label.sc-calcite-list-item{color:var(--calcite-ui-text-1)}/*!@.description*/.description.sc-calcite-list-item{margin-block-start:0.125rem;color:var(--calcite-ui-text-3)}/*!@.content-start*/.content-start.sc-calcite-list-item{justify-content:flex-start}/*!@.content-end*/.content-end.sc-calcite-list-item{justify-content:flex-end}/*!@.content-start,\n.content-end*/.content-start.sc-calcite-list-item,.content-end.sc-calcite-list-item{flex:1 1 auto}/*!@.content-container--has-center-content .content-start,\n.content-container--has-center-content .content-end*/.content-container--has-center-content.sc-calcite-list-item .content-start.sc-calcite-list-item,.content-container--has-center-content.sc-calcite-list-item .content-end.sc-calcite-list-item{flex:0 1 auto}/*!@.selection-container*/.selection-container.sc-calcite-list-item{display:flex;padding-inline:0.75rem;color:var(--calcite-list-item-icon-color)}/*!@.actions-start,\n.actions-end,\n.content-start,\n.content-end,\n.selection-container,\n.drag-container,\n.open-container*/.actions-start.sc-calcite-list-item,.actions-end.sc-calcite-list-item,.content-start.sc-calcite-list-item,.content-end.sc-calcite-list-item,.selection-container.sc-calcite-list-item,.drag-container.sc-calcite-list-item,.open-container.sc-calcite-list-item{display:flex;align-items:center}/*!@.open-container,\n.selection-container*/.open-container.sc-calcite-list-item,.selection-container.sc-calcite-list-item{cursor:pointer}/*!@.content-start ::slotted(calcite-icon),\n.content-end ::slotted(calcite-icon)*/.content-start .sc-calcite-list-item-s>calcite-icon,.content-end .sc-calcite-list-item-s>calcite-icon{margin-inline:0.75rem;align-self:center}/*!@.actions-start ::slotted(calcite-action),\n.actions-end ::slotted(calcite-action)*/.actions-start .sc-calcite-list-item-s>calcite-action,.actions-end .sc-calcite-list-item-s>calcite-action{align-self:stretch;color:inherit}/*!@::slotted(calcite-list-item)*/.sc-calcite-list-item-s>calcite-list-item{border-width:0px;border-block-start-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3)}/*!@:host([hidden])*/[hidden].sc-calcite-list-item-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-list-item{display:none}";
+const listItemCss = "/*!@:host([disabled])*/[disabled].sc-calcite-list-item-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-list-item-h *.sc-calcite-list-item,.sc-calcite-list-item-h[disabled] .sc-calcite-list-item-s>*{pointer-events:none}/*!@:host*/.sc-calcite-list-item-h{display:flex;flex-direction:column;--calcite-list-item-icon-color:var(--calcite-ui-brand);--calcite-list-item-spacing-indent:1rem}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-list-item-h[disabled] .sc-calcite-list-item-s>[calcite-hydrated][disabled],[disabled].sc-calcite-list-item-h [calcite-hydrated][disabled].sc-calcite-list-item{opacity:1}/*!@.container*/.container.sc-calcite-list-item{box-sizing:border-box;display:flex;flex:1 1 0%;background-color:var(--calcite-ui-foreground-1);font-family:var(--calcite-sans-family);padding-inline-start:calc(var(--calcite-list-item-spacing-indent) * var(--calcite-list-item-spacing-indent-multiplier))}/*!@.container **/.container.sc-calcite-list-item *.sc-calcite-list-item{box-sizing:border-box}/*!@.container:hover*/.container.sc-calcite-list-item:hover{cursor:pointer;background-color:var(--calcite-ui-foreground-2)}/*!@.container--border-selected*/.container--border-selected.sc-calcite-list-item{border-inline-start:4px solid var(--calcite-ui-brand)}/*!@.container--border-unselected*/.container--border-unselected.sc-calcite-list-item{border-inline-start:4px solid transparent}/*!@.nested-container*/.nested-container.sc-calcite-list-item{display:flex;flex-direction:column;background-color:var(--calcite-ui-foreground-1)}/*!@.nested-container--hidden*/.nested-container--hidden.sc-calcite-list-item{display:none}/*!@.content-container*/.content-container.sc-calcite-list-item{display:flex;flex:1 1 auto;align-items:stretch;padding:0px;font-family:var(--calcite-sans-family);font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-2)}/*!@tr,\ntd*/tr.sc-calcite-list-item,td.sc-calcite-list-item{outline-color:transparent}/*!@tr:focus,\ntd:focus*/tr.sc-calcite-list-item:focus,td.sc-calcite-list-item:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}/*!@.content,\n.custom-content*/.content.sc-calcite-list-item,.custom-content.sc-calcite-list-item{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;padding-inline:0.75rem;padding-block:0.5rem;font-size:var(--calcite-font-size--2);line-height:1.375}/*!@.label,\n.description*/.label.sc-calcite-list-item,.description.sc-calcite-list-item{font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size--2);font-weight:var(--calcite-font-weight-normal);word-wrap:break-word;word-break:break-word}/*!@.label:only-child,\n.description:only-child*/.label.sc-calcite-list-item:only-child,.description.sc-calcite-list-item:only-child{margin:0px;padding-block:0.25rem}/*!@.label*/.label.sc-calcite-list-item{color:var(--calcite-ui-text-1)}/*!@.description*/.description.sc-calcite-list-item{margin-block-start:0.125rem;color:var(--calcite-ui-text-3)}/*!@.content-start*/.content-start.sc-calcite-list-item{justify-content:flex-start}/*!@.content-end*/.content-end.sc-calcite-list-item{justify-content:flex-end}/*!@.content-start,\n.content-end*/.content-start.sc-calcite-list-item,.content-end.sc-calcite-list-item{flex:1 1 auto}/*!@.content-container--has-center-content .content-start,\n.content-container--has-center-content .content-end*/.content-container--has-center-content.sc-calcite-list-item .content-start.sc-calcite-list-item,.content-container--has-center-content.sc-calcite-list-item .content-end.sc-calcite-list-item{flex:0 1 auto}/*!@.selection-container*/.selection-container.sc-calcite-list-item{display:flex;padding-inline:0.75rem;color:var(--calcite-list-item-icon-color)}/*!@.actions-start,\n.actions-end,\n.content-start,\n.content-end,\n.selection-container,\n.drag-container,\n.open-container*/.actions-start.sc-calcite-list-item,.actions-end.sc-calcite-list-item,.content-start.sc-calcite-list-item,.content-end.sc-calcite-list-item,.selection-container.sc-calcite-list-item,.drag-container.sc-calcite-list-item,.open-container.sc-calcite-list-item{display:flex;align-items:center}/*!@.open-container,\n.selection-container*/.open-container.sc-calcite-list-item,.selection-container.sc-calcite-list-item{cursor:pointer}/*!@.content-start ::slotted(calcite-icon),\n.content-end ::slotted(calcite-icon)*/.content-start .sc-calcite-list-item-s>calcite-icon,.content-end .sc-calcite-list-item-s>calcite-icon{margin-inline:0.75rem;align-self:center}/*!@.actions-start ::slotted(calcite-action),\n.actions-end ::slotted(calcite-action)*/.actions-start .sc-calcite-list-item-s>calcite-action,.actions-end .sc-calcite-list-item-s>calcite-action{align-self:stretch;color:inherit}/*!@::slotted(calcite-list-item)*/.sc-calcite-list-item-s>calcite-list-item{border-width:0px;border-block-start-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3)}/*!@:host([hidden])*/[hidden].sc-calcite-list-item-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-list-item{display:none}";
 
 const focusMap = new Map();
 const listSelector = "calcite-list";
@@ -33026,7 +33037,9 @@ class ListItem {
       const { containerEl, contentEl, actionsStartEl, actionsEndEl, open, openable } = this;
       const cells = [actionsStartEl, contentEl, actionsEndEl].filter(Boolean);
       const currentIndex = cells.findIndex((cell) => composedPath.includes(cell));
-      if (key === "Enter") {
+      if (key === "Enter" &&
+        !composedPath.includes(actionsStartEl) &&
+        !composedPath.includes(actionsEndEl)) {
         event.preventDefault();
         this.toggleSelected();
       }
@@ -33932,17 +33945,16 @@ class Modal {
       this.setFocus();
       this.el.removeEventListener("calciteModalOpen", this.openEnd);
     };
+    this.handleCloseClick = () => {
+      this.open = false;
+    };
     this.handleOutsideClose = () => {
       if (this.outsideCloseDisabled) {
         return;
       }
-      this.closeModal();
+      this.open = false;
     };
-    /** Close the modal, first running the `beforeClose` method */
     this.closeModal = async () => {
-      if (this.ignoreOpenChange) {
-        return;
-      }
       if (this.beforeClose) {
         try {
           await this.beforeClose(this.el);
@@ -33957,11 +33969,8 @@ class Modal {
           return;
         }
       }
-      this.ignoreOpenChange = true;
-      this.open = false;
       this.opened = false;
       this.removeOverflowHiddenClass();
-      this.ignoreOpenChange = false;
     };
     this.handleMutationObserver = () => {
       this.updateFooterVisibility();
@@ -34022,7 +34031,6 @@ class Modal {
     setUpLoadableComponent(this);
     // when modal initially renders, if active was set we need to open as watcher doesn't fire
     if (this.open) {
-      onToggleOpenCloseComponent(this);
       requestAnimationFrame(() => this.openModal());
     }
   }
@@ -34075,7 +34083,7 @@ class Modal {
     return (hAsync("div", { class: CSS$v.contentBottom, hidden: !this.hasContentBottom }, hAsync("slot", { name: SLOTS$f.contentBottom, onSlotchange: this.contentBottomSlotChangeHandler })));
   }
   renderCloseButton() {
-    return !this.closeButtonDisabled ? (hAsync("button", { "aria-label": this.messages.close, class: CSS$v.close, key: "button", onClick: this.closeModal, title: this.messages.close,
+    return !this.closeButtonDisabled ? (hAsync("button", { "aria-label": this.messages.close, class: CSS$v.close, key: "button", onClick: this.handleCloseClick, title: this.messages.close,
       // 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: (el) => (this.closeButtonEl = el) }, hAsync("calcite-icon", { icon: ICONS$6.close, scale: this.scale === "s" ? "s" : this.scale === "m" ? "m" : this.scale === "l" ? "l" : null }))) : null;
   }
@@ -34120,7 +34128,7 @@ class Modal {
   //--------------------------------------------------------------------------
   handleEscape(event) {
     if (this.open && !this.escapeDisabled && event.key === "Escape" && !event.defaultPrevented) {
-      this.closeModal();
+      this.open = false;
       event.preventDefault();
     }
   }
@@ -34178,28 +34186,28 @@ class Modal {
     this.calciteModalClose.emit();
     deactivateFocusTrap(this);
   }
-  async toggleModal(value) {
+  toggleModal(value) {
     if (this.ignoreOpenChange) {
       return;
     }
+    if (value) {
+      this.openModal();
+    }
+    else {
+      this.closeModal();
+    }
+  }
+  handleOpenedChange(value) {
     onToggleOpenCloseComponent(this);
     if (value) {
       this.transitionEl?.classList.add(CSS$v.openingIdle);
-      this.openModal();
     }
     else {
       this.transitionEl?.classList.add(CSS$v.closingIdle);
-      this.closeModal();
     }
   }
-  /** Open the modal */
   openModal() {
-    if (this.ignoreOpenChange) {
-      return;
-    }
-    this.ignoreOpenChange = true;
     this.el.addEventListener("calciteModalOpen", this.openEnd);
-    this.open = true;
     this.opened = true;
     const titleEl = getSlotted(this.el, SLOTS$f.header);
     const contentEl = getSlotted(this.el, SLOTS$f.content);
@@ -34210,7 +34218,6 @@ class Modal {
       // use an inline style instead of a utility class to avoid global class declarations.
       document.documentElement.style.setProperty("overflow", "hidden");
     }
-    this.ignoreOpenChange = false;
   }
   removeOverflowHiddenClass() {
     document.documentElement.style.setProperty("overflow", this.initialOverflowCSS);
@@ -34221,7 +34228,8 @@ class Modal {
     "focusTrapDisabled": ["handleFocusTrapDisabled"],
     "messageOverrides": ["onMessagesChange"],
     "effectiveLocale": ["effectiveLocaleChange"],
-    "open": ["toggleModal"]
+    "open": ["toggleModal"],
+    "opened": ["handleOpenedChange"]
   }; }
   static get style() { return modalCss; }
   static get cmpMeta() { return {
@@ -37673,12 +37681,9 @@ class Sheet {
       if (this.outsideCloseDisabled) {
         return;
       }
-      this.closeSheet();
+      this.open = false;
     };
     this.closeSheet = async () => {
-      if (this.ignoreOpenChange) {
-        return;
-      }
       if (this.beforeClose) {
         try {
           await this.beforeClose(this.el);
@@ -37693,11 +37698,8 @@ class Sheet {
           return;
         }
       }
-      this.ignoreOpenChange = true;
-      this.open = false;
       this.opened = false;
       this.removeOverflowHiddenClass();
-      this.ignoreOpenChange = false;
     };
     this.beforeClose = undefined;
     this.displayMode = "overlay";
@@ -37718,11 +37720,10 @@ class Sheet {
     }
     focusTrapDisabled ? deactivateFocusTrap(this) : activateFocusTrap(this);
   }
-  async toggleSheet(value) {
+  toggleSheet(value) {
     if (this.ignoreOpenChange) {
       return;
     }
-    onToggleOpenCloseComponent(this);
     if (value) {
       this.openSheet();
     }
@@ -37730,6 +37731,9 @@ class Sheet {
       this.closeSheet();
     }
   }
+  handleOpenedChange() {
+    onToggleOpenCloseComponent(this);
+  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -37739,7 +37743,6 @@ class Sheet {
     setUpLoadableComponent(this);
     // when sheet initially renders, if active was set we need to open as watcher doesn't fire
     if (this.open) {
-      onToggleOpenCloseComponent(this);
       requestAnimationFrame(() => this.openSheet());
     }
   }
@@ -37776,7 +37779,7 @@ class Sheet {
   //--------------------------------------------------------------------------
   handleEscape(event) {
     if (this.open && !this.escapeDisabled && event.key === "Escape" && !event.defaultPrevented) {
-      this.closeSheet();
+      this.open = false;
       event.preventDefault();
     }
   }
@@ -37819,18 +37822,13 @@ class Sheet {
     deactivateFocusTrap(this);
   }
   openSheet() {
-    if (this.ignoreOpenChange) {
-      return;
-    }
     this.el.addEventListener("calciteSheetOpen", this.openEnd);
-    this.open = true;
     this.opened = true;
     if (!this.slottedInShell) {
       this.initialOverflowCSS = document.documentElement.style.overflow;
       // use an inline style instead of a utility class to avoid global class declarations.
       document.documentElement.style.setProperty("overflow", "hidden");
     }
-    this.ignoreOpenChange = false;
   }
   removeOverflowHiddenClass() {
     document.documentElement.style.setProperty("overflow", this.initialOverflowCSS);
@@ -37841,7 +37839,8 @@ class Sheet {
   get el() { return getElement(this); }
   static get watchers() { return {
     "focusTrapDisabled": ["handleFocusTrapDisabled"],
-    "open": ["toggleSheet"]
+    "open": ["toggleSheet"],
+    "opened": ["handleOpenedChange"]
   }; }
   static get style() { return sheetCss; }
   static get cmpMeta() { return {
@@ -42618,6 +42617,7 @@ const CSS$6 = {
   fractionalSecond: "fractionalSecond",
   hour: "hour",
   input: "input",
+  inputFocus: "inputFocus",
   meridiem: "meridiem",
   minute: "minute",
   second: "second",
@@ -42630,7 +42630,7 @@ const CSS$6 = {
   meridiemStart: "meridiem--start",
 };
 
-const timePickerCss = "/*!@:host*/.sc-calcite-time-picker-h{display:inline-block}/*!@.time-picker*/.time-picker.sc-calcite-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*/.time-picker.sc-calcite-time-picker .column.sc-calcite-time-picker{display:flex;flex-direction:column}/*!@.time-picker .meridiem--start*/.time-picker.sc-calcite-time-picker .meridiem--start.sc-calcite-time-picker{order:-1}/*!@.time-picker .button*/.time-picker.sc-calcite-time-picker .button.sc-calcite-time-picker{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*/.time-picker.sc-calcite-time-picker .button.sc-calcite-time-picker:hover,.time-picker.sc-calcite-time-picker .button.sc-calcite-time-picker: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*/.time-picker.sc-calcite-time-picker .button.sc-calcite-time-picker:active{background-color:var(--calcite-ui-foreground-3)}/*!@.time-picker .button.top-left*/.time-picker.sc-calcite-time-picker .button.top-left.sc-calcite-time-picker{border-start-start-radius:var(--calcite-border-radius)}/*!@.time-picker .button.bottom-left*/.time-picker.sc-calcite-time-picker .button.bottom-left.sc-calcite-time-picker{border-end-start-radius:var(--calcite-border-radius)}/*!@.time-picker .button.top-right*/.time-picker.sc-calcite-time-picker .button.top-right.sc-calcite-time-picker{border-start-end-radius:var(--calcite-border-radius)}/*!@.time-picker .button.bottom-right*/.time-picker.sc-calcite-time-picker .button.bottom-right.sc-calcite-time-picker{border-end-end-radius:var(--calcite-border-radius)}/*!@.time-picker .button calcite-icon*/.time-picker.sc-calcite-time-picker .button.sc-calcite-time-picker calcite-icon.sc-calcite-time-picker{color:var(--calcite-ui-text-3)}/*!@.time-picker .input*/.time-picker.sc-calcite-time-picker .input.sc-calcite-time-picker{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*/.time-picker.sc-calcite-time-picker .input.sc-calcite-time-picker: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*/.time-picker.sc-calcite-time-picker .input.sc-calcite-time-picker:focus,.time-picker.sc-calcite-time-picker .input.sc-calcite-time-picker: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*/.time-picker.scale-s.sc-calcite-time-picker{font-size:var(--calcite-font-size--1)}/*!@.time-picker.scale-s .button,\n.time-picker.scale-s .input*/.time-picker.scale-s.sc-calcite-time-picker .button.sc-calcite-time-picker,.time-picker.scale-s.sc-calcite-time-picker .input.sc-calcite-time-picker{padding-inline:0.75rem;padding-block:0.25rem}/*!@.time-picker.scale-s:not(.show-meridiem) .delimiter:last-child*/.time-picker.scale-s.sc-calcite-time-picker:not(.show-meridiem) .delimiter.sc-calcite-time-picker:last-child{padding-inline-end:0.75rem}/*!@.time-picker.scale-m*/.time-picker.scale-m.sc-calcite-time-picker{font-size:var(--calcite-font-size-0)}/*!@.time-picker.scale-m .button,\n.time-picker.scale-m .input*/.time-picker.scale-m.sc-calcite-time-picker .button.sc-calcite-time-picker,.time-picker.scale-m.sc-calcite-time-picker .input.sc-calcite-time-picker{padding-inline:1rem;padding-block:0.5rem}/*!@.time-picker.scale-m:not(.show-meridiem) .delimiter:last-child*/.time-picker.scale-m.sc-calcite-time-picker:not(.show-meridiem) .delimiter.sc-calcite-time-picker:last-child{padding-inline-end:1rem}/*!@.time-picker.scale-l*/.time-picker.scale-l.sc-calcite-time-picker{font-size:var(--calcite-font-size-1)}/*!@.time-picker.scale-l .button,\n.time-picker.scale-l .input*/.time-picker.scale-l.sc-calcite-time-picker .button.sc-calcite-time-picker,.time-picker.scale-l.sc-calcite-time-picker .input.sc-calcite-time-picker{padding-inline:1.25rem;padding-block:0.75rem}/*!@.time-picker.scale-l:not(.show-meridiem) .delimiter:last-child*/.time-picker.scale-l.sc-calcite-time-picker:not(.show-meridiem) .delimiter.sc-calcite-time-picker:last-child{padding-inline-end:1.25rem}/*!@:host([hidden])*/[hidden].sc-calcite-time-picker-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-time-picker{display:none}";
+const timePickerCss = "/*!@:host*/.sc-calcite-time-picker-h{display:inline-block}/*!@.time-picker*/.time-picker.sc-calcite-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*/.time-picker.sc-calcite-time-picker .column.sc-calcite-time-picker{display:flex;flex-direction:column}/*!@.time-picker .meridiem--start*/.time-picker.sc-calcite-time-picker .meridiem--start.sc-calcite-time-picker{order:-1}/*!@.time-picker .button*/.time-picker.sc-calcite-time-picker .button.sc-calcite-time-picker{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*/.time-picker.sc-calcite-time-picker .button.sc-calcite-time-picker:hover,.time-picker.sc-calcite-time-picker .button.sc-calcite-time-picker: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*/.time-picker.sc-calcite-time-picker .button.sc-calcite-time-picker:active{background-color:var(--calcite-ui-foreground-3)}/*!@.time-picker .button.top-left*/.time-picker.sc-calcite-time-picker .button.top-left.sc-calcite-time-picker{border-start-start-radius:var(--calcite-border-radius)}/*!@.time-picker .button.bottom-left*/.time-picker.sc-calcite-time-picker .button.bottom-left.sc-calcite-time-picker{border-end-start-radius:var(--calcite-border-radius)}/*!@.time-picker .button.top-right*/.time-picker.sc-calcite-time-picker .button.top-right.sc-calcite-time-picker{border-start-end-radius:var(--calcite-border-radius)}/*!@.time-picker .button.bottom-right*/.time-picker.sc-calcite-time-picker .button.bottom-right.sc-calcite-time-picker{border-end-end-radius:var(--calcite-border-radius)}/*!@.time-picker .button calcite-icon*/.time-picker.sc-calcite-time-picker .button.sc-calcite-time-picker calcite-icon.sc-calcite-time-picker{color:var(--calcite-ui-text-3)}/*!@.time-picker .input*/.time-picker.sc-calcite-time-picker .input.sc-calcite-time-picker{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*/.time-picker.sc-calcite-time-picker .input.sc-calcite-time-picker: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*/.time-picker.sc-calcite-time-picker .input.sc-calcite-time-picker:focus,.time-picker.sc-calcite-time-picker .input.sc-calcite-time-picker:hover:focus{outline:2px solid transparent;outline-offset:2px;outline-offset:0}/*!@.time-picker .input.inputFocus, .time-picker .input:hover.inputFocus*/.time-picker.sc-calcite-time-picker .input.inputFocus.sc-calcite-time-picker,.time-picker.sc-calcite-time-picker .input.sc-calcite-time-picker: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*/.time-picker.scale-s.sc-calcite-time-picker{font-size:var(--calcite-font-size--1)}/*!@.time-picker.scale-s .button,\n.time-picker.scale-s .input*/.time-picker.scale-s.sc-calcite-time-picker .button.sc-calcite-time-picker,.time-picker.scale-s.sc-calcite-time-picker .input.sc-calcite-time-picker{padding-inline:0.75rem;padding-block:0.25rem}/*!@.time-picker.scale-s:not(.show-meridiem) .delimiter:last-child*/.time-picker.scale-s.sc-calcite-time-picker:not(.show-meridiem) .delimiter.sc-calcite-time-picker:last-child{padding-inline-end:0.75rem}/*!@.time-picker.scale-m*/.time-picker.scale-m.sc-calcite-time-picker{font-size:var(--calcite-font-size-0)}/*!@.time-picker.scale-m .button,\n.time-picker.scale-m .input*/.time-picker.scale-m.sc-calcite-time-picker .button.sc-calcite-time-picker,.time-picker.scale-m.sc-calcite-time-picker .input.sc-calcite-time-picker{padding-inline:1rem;padding-block:0.5rem}/*!@.time-picker.scale-m:not(.show-meridiem) .delimiter:last-child*/.time-picker.scale-m.sc-calcite-time-picker:not(.show-meridiem) .delimiter.sc-calcite-time-picker:last-child{padding-inline-end:1rem}/*!@.time-picker.scale-l*/.time-picker.scale-l.sc-calcite-time-picker{font-size:var(--calcite-font-size-1)}/*!@.time-picker.scale-l .button,\n.time-picker.scale-l .input*/.time-picker.scale-l.sc-calcite-time-picker .button.sc-calcite-time-picker,.time-picker.scale-l.sc-calcite-time-picker .input.sc-calcite-time-picker{padding-inline:1.25rem;padding-block:0.75rem}/*!@.time-picker.scale-l:not(.show-meridiem) .delimiter:last-child*/.time-picker.scale-l.sc-calcite-time-picker:not(.show-meridiem) .delimiter.sc-calcite-time-picker:last-child{padding-inline-end:1.25rem}/*!@:host([hidden])*/[hidden].sc-calcite-time-picker-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-time-picker{display:none}";
 
 function capitalize(str) {
   return str.charAt(0).toUpperCase() + str.slice(1);
@@ -42641,9 +42641,7 @@ 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.pointerActivated = false;
     this.decrementHour = () => {
       const newHour = !this.hour ? 0 : this.hour === "00" ? 23 : parseInt(this.hour) - 1;
       this.setValuePart("hour", newHour);
@@ -42670,6 +42668,9 @@ class TimePicker {
       this.decrementMinuteOrSecond("second");
     };
     this.focusHandler = (event) => {
+      if (this.pointerActivated) {
+        return;
+      }
       this.activeEl = event.currentTarget;
     };
     this.fractionalSecondKeyDownHandler = (event) => {
@@ -42707,6 +42708,21 @@ class TimePicker {
         }
       }
     };
+    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)) {
@@ -42758,8 +42774,10 @@ class TimePicker {
         }
       }
     };
-    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";
@@ -42787,6 +42805,14 @@ class TimePicker {
     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":
@@ -42812,6 +42838,21 @@ class TimePicker {
           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)) {
@@ -42931,6 +42972,16 @@ class TimePicker {
         }
       }
     };
+    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);
@@ -43061,6 +43112,7 @@ class TimePicker {
     this.value = null;
     this.messages = undefined;
     this.messageOverrides = undefined;
+    this.activeEl = undefined;
     this.effectiveLocale = "";
     this.fractionalSecond = undefined;
     this.hour = undefined;
@@ -43098,13 +43150,16 @@ class TimePicker {
   //  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;
@@ -43184,6 +43239,9 @@ class TimePicker {
         break;
     }
   }
+  pointerDownHandler() {
+    this.pointerActivated = true;
+  }
   //--------------------------------------------------------------------------
   //
   //  Public Methods
@@ -43274,65 +43332,70 @@ class TimePicker {
         [CSS$6.button]: true,
         [CSS$6.buttonHourUp]: true,
         [CSS$6.buttonTopLeft]: true,
-      }, 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: {
+      }, onClick: this.hourUpClickHandler, 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,
+        [CSS$6.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 || "--"), hAsync("span", { "aria-label": this.messages.hourDown, class: {
         [CSS$6.button]: true,
         [CSS$6.buttonHourDown]: true,
         [CSS$6.buttonBottomLeft]: true,
-      }, 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: {
+      }, onClick: this.hourDownClickHandler, 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, 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: {
+      }, onClick: this.minuteUpClickHandler, 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,
+        [CSS$6.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 || "--"), hAsync("span", { "aria-label": this.messages.minuteDown, class: {
         [CSS$6.button]: true,
         [CSS$6.buttonMinuteDown]: true,
-      }, 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: {
+      }, onClick: this.minuteDownClickHandler, 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, 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.secondUpClickHandler, 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,
+        [CSS$6.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 || "--"), hAsync("span", { "aria-label": this.messages.secondDown, class: {
         [CSS$6.button]: true,
         [CSS$6.buttonSecondDown]: true,
-      }, 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: {
+      }, onClick: this.secondDownClickHandler, 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: {
+      }, onClick: this.fractionalSecondUpClickHandler, 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,
+        [CSS$6.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 || "--"), 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: {
+      }, onClick: this.fractionalSecondDownClickHandler, 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, 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.meridiemUpClickHandler, 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,
+        [CSS$6.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 || "--"), hAsync("span", { "aria-label": this.messages.meridiemDown, class: {
         [CSS$6.button]: true,
         [CSS$6.buttonMeridiemDown]: true,
         [CSS$6.buttonBottomRight]: true,
-      }, onClick: this.decrementMeridiem, role: "button" }, hAsync("calcite-icon", { icon: "chevron-down", scale: iconScale }))))));
+      }, onClick: this.meridiemDownClickHandler, role: "button" }, hAsync("calcite-icon", { icon: "chevron-down", scale: iconScale }))))));
   }
   static get delegatesFocus() { return true; }
   static get assetsDirs() { return ["assets"]; }
@@ -43354,6 +43417,7 @@ class TimePicker {
       "value": [1025],
       "messages": [1040],
       "messageOverrides": [1040],
+      "activeEl": [32],
       "effectiveLocale": [32],
       "fractionalSecond": [32],
       "hour": [32],
@@ -43375,7 +43439,7 @@ class TimePicker {
       "defaultMessages": [32],
       "setFocus": [64]
     },
-    "$listeners$": [[0, "blur", "hostBlurHandler"], [0, "focus", "hostFocusHandler"], [0, "keydown", "keyDownHandler"]],
+    "$listeners$": [[0, "blur", "blurHandler"], [0, "focus", "hostFocusHandler"], [0, "keydown", "keyDownHandler"], [1, "pointerdown", "pointerDownHandler"]],
     "$lazyBundleId$": "-",
     "$attrsToReflect$": [["scale", "scale"], ["step", "step"]]
   }; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "1.7.1-next.2",
+  "version": "1.8.0-next.1",
   "homepage": "https://developers.arcgis.com/calcite-design-system/",
   "description": "Web Components for Esri's Calcite Design System.",
   "main": "dist/index.cjs.js",
@@ -88,5 +88,5 @@
   "volta": {
     "extends": "../../package.json"
   },
-  "gitHead": "4b4c43c952b54a6a74d41e4257607ad98bc2efe4"
+  "gitHead": "df1d71bb1a5da2055c2a0c105eb0d1db99af44b1"
 }