@esri/calcite-components 1.0.0-beta.94 → 1.0.0-beta.96

package/dist/components/time-picker.js

@@ -1,25 +1,26 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.94
+ * v1.0.0-beta.96
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { n as numberKeys, i as isActivationKey } from './key.js';
-import { i as isValidNumber } from './locale.js';
+import { i as isValidNumber, g as getSupportedLocale, b as getSupportedNumberingSystem, u as updateEffectiveLocale, c as connectLocalized, d as disconnectLocalized } from './locale.js';
 import { d as defineCustomElement$1 } from './icon.js';
 
 const maxTenthForMinuteAndSecond = 5;
-function createLocaleDateTimeFormatter(locale, includeSeconds = true) {
+function createLocaleDateTimeFormatter(locale, numberingSystem, includeSeconds = true) {
   try {
     const options = {
       hour: "2-digit",
       minute: "2-digit",
-      timeZone: "UTC"
+      timeZone: "UTC",
+      numberingSystem: getSupportedNumberingSystem(numberingSystem)
     };
     if (includeSeconds) {
       options.second = "2-digit";
     }
-    return new Intl.DateTimeFormat(locale, options);
+    return new Intl.DateTimeFormat(getSupportedLocale(locale), options);
   }
   catch (error) {
     throw new Error(`Invalid locale supplied while attempting to create a DateTime formatter: ${locale}`);
@@ -42,8 +43,8 @@ function formatTimeString(value) {
   }
   return `${hour}:${minute}`;
 }
-function getLocaleHourCycle(locale) {
-  const formatter = createLocaleDateTimeFormatter(locale);
+function getLocaleHourCycle(locale, numberingSystem) {
+  const formatter = createLocaleDateTimeFormatter(locale, numberingSystem);
   const parts = formatter.formatToParts(new Date(Date.UTC(0, 0, 0, 0, 0, 0)));
   return getLocalizedTimePart("meridiem", parts) ? "12" : "24";
 }
@@ -112,7 +113,7 @@ function isValidTimePart(value, part) {
   const valueAsNumber = Number(value);
   return part === "hour" ? valueAsNumber >= 0 && valueAsNumber < 24 : valueAsNumber >= 0 && valueAsNumber < 60;
 }
-function localizeTimePart(value, part, locale) {
+function localizeTimePart({ value, part, locale, numberingSystem }) {
   if (!isValidTimePart(value, part)) {
     return;
   }
@@ -121,27 +122,27 @@ function localizeTimePart(value, part, locale) {
   if (!date) {
     return;
   }
-  const formatter = createLocaleDateTimeFormatter(locale);
+  const formatter = createLocaleDateTimeFormatter(locale, numberingSystem);
   const parts = formatter.formatToParts(date);
   return getLocalizedTimePart(part, parts);
 }
-function localizeTimeString(value, locale = "en", includeSeconds = true) {
+function localizeTimeString({ value, locale, numberingSystem, includeSeconds = true }) {
   if (!isValidTime(value)) {
     return null;
   }
   const { hour, minute, second = "0" } = parseTimeString(value);
   const dateFromTimeString = new Date(Date.UTC(0, 0, 0, parseInt(hour), parseInt(minute), parseInt(second)));
-  const formatter = createLocaleDateTimeFormatter(locale, includeSeconds);
+  const formatter = createLocaleDateTimeFormatter(locale, numberingSystem, includeSeconds);
   return (formatter === null || formatter === void 0 ? void 0 : formatter.format(dateFromTimeString)) || null;
 }
-function localizeTimeStringToParts(value, locale = "en") {
+function localizeTimeStringToParts({ value, locale, numberingSystem }) {
   if (!isValidTime(value)) {
     return null;
   }
   const { hour, minute, second = "0" } = parseTimeString(value);
   const dateFromTimeString = new Date(Date.UTC(0, 0, 0, parseInt(hour), parseInt(minute), parseInt(second)));
   if (dateFromTimeString) {
-    const formatter = createLocaleDateTimeFormatter(locale);
+    const formatter = createLocaleDateTimeFormatter(locale, numberingSystem);
     const parts = formatter.formatToParts(dateFromTimeString);
     return {
       localizedHour: getLocalizedTimePart("hour", parts),
@@ -155,14 +156,14 @@ function localizeTimeStringToParts(value, locale = "en") {
   }
   return null;
 }
-function getTimeParts(value, locale = "en") {
+function getTimeParts({ value, locale, numberingSystem }) {
   if (!isValidTime(value)) {
     return null;
   }
   const { hour, minute, second = "0" } = parseTimeString(value);
   const dateFromTimeString = new Date(Date.UTC(0, 0, 0, parseInt(hour), parseInt(minute), parseInt(second)));
   if (dateFromTimeString) {
-    const formatter = createLocaleDateTimeFormatter(locale);
+    const formatter = createLocaleDateTimeFormatter(locale, numberingSystem);
     const parts = formatter.formatToParts(dateFromTimeString);
     return parts;
   }
@@ -228,7 +229,7 @@ const TEXT = {
   secondUp: "Increase second"
 };
 
-const timePickerCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:inline-block}.time-picker{display:-ms-flexbox;display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-flex-align:center;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);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);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:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.time-picker .meridiem--start{-ms-flex-order:-1;order:-1}.time-picker .button{display:-ms-inline-flexbox;display:inline-flex;cursor:pointer;-ms-flex-align:center;align-items:center;-ms-flex-pack: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}.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:-ms-inline-flexbox;display:inline-flex;cursor:pointer;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:var(--calcite-ui-foreground-1);font-weight:var(--calcite-font-weight-medium)}.time-picker .input:hover{-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-foreground-2);box-shadow:inset 0 0 0 2px var(--calcite-ui-foreground-2)}.time-picker .input:focus,.time-picker .input:hover:focus{outline:2px solid transparent;outline-offset:2px;-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-brand);box-shadow:inset 0 0 0 2px var(--calcite-ui-brand)}.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{-webkit-padding-end:0.75rem;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{-webkit-padding-end:1rem;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{-webkit-padding-end:1.25rem;padding-inline-end:1.25rem}";
+const timePickerCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}: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}.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)}.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)}.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}";
 
 function capitalize(str) {
   return str.charAt(0).toUpperCase() + str.slice(1);
@@ -318,18 +319,18 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      * @default "Increase second"
      */
     this.intlSecondUp = TEXT.secondUp;
-    /**
-     * BCP 47 language tag for desired language and country format.
-     *
-     * @internal
-     */
-    this.locale = document.documentElement.lang || navigator.language || "en";
     /** Specifies the size of the component. */
     this.scale = "m";
-    /** Specifies the granularity the "value" must adhere to (in seconds). */
+    /** Specifies the granularity the `value` must adhere to (in seconds). */
     this.step = 60;
     /** The component's value in UTC (always 24-hour format). */
     this.value = null;
+    // --------------------------------------------------------------------------
+    //
+    //  State
+    //
+    // --------------------------------------------------------------------------
+    this.effectiveLocale = "";
     this.showSecond = this.step < 60;
     this.decrementHour = () => {
       const newHour = !this.hour ? 0 : this.hour === "00" ? 23 : parseInt(this.hour) - 1;
@@ -582,7 +583,8 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.setValue = (value, emit = true) => {
       if (isValidTime(value)) {
         const { hour, minute, second } = parseTimeString(value);
-        const { localizedHour, localizedHourSuffix, localizedMinute, localizedMinuteSuffix, localizedSecond, localizedSecondSuffix, localizedMeridiem } = localizeTimeStringToParts(value, this.locale);
+        const { effectiveLocale: locale, numberingSystem } = this;
+        const { localizedHour, localizedHourSuffix, localizedMinute, localizedMinuteSuffix, localizedSecond, localizedSecondSuffix, localizedMeridiem } = localizeTimeStringToParts({ value, locale, numberingSystem });
         this.localizedHour = localizedHour;
         this.localizedHourSuffix = localizedHourSuffix;
         this.localizedMinute = localizedMinute;
@@ -595,7 +597,7 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         if (localizedMeridiem) {
           this.localizedMeridiem = localizedMeridiem;
           this.meridiem = getMeridiem(this.hour);
-          const formatParts = getTimeParts(value, this.locale);
+          const formatParts = getTimeParts({ value, locale, numberingSystem });
           this.meridiemOrder = this.getMeridiemOrder(formatParts);
         }
       }
@@ -619,6 +621,7 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     this.setValuePart = (key, value, emit = true) => {
       var _a;
+      const { effectiveLocale: locale, numberingSystem } = this;
       if (key === "meridiem") {
         this.meridiem = value;
         if (isValidNumber(this.hour)) {
@@ -635,12 +638,22 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
               }
               break;
           }
-          this.localizedHour = localizeTimePart(this.hour, "hour", this.locale);
+          this.localizedHour = localizeTimePart({
+            value: this.hour,
+            part: "hour",
+            locale,
+            numberingSystem
+          });
         }
       }
       else {
         this[key] = typeof value === "number" ? formatTimePart(value) : value;
-        this[`localized${capitalize(key)}`] = localizeTimePart(this[key], key, this.locale);
+        this[`localized${capitalize(key)}`] = localizeTimePart({
+          value: this[key],
+          part: key,
+          locale,
+          numberingSystem
+        });
       }
       if (this.hour && this.minute) {
         const showSeconds = this.second && this.showSecond;
@@ -650,20 +663,22 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         this.value = null;
       }
       this.localizedMeridiem = this.value
-        ? ((_a = localizeTimeStringToParts(this.value, this.locale)) === null || _a === void 0 ? void 0 : _a.localizedMeridiem) || null
-        : localizeTimePart(this.meridiem, "meridiem", this.locale);
+        ? ((_a = localizeTimeStringToParts({ value: this.value, locale, numberingSystem })) === null || _a === void 0 ? void 0 : _a.localizedMeridiem) || null
+        : localizeTimePart({ value: this.meridiem, part: "meridiem", locale, numberingSystem });
       if (emit) {
         this.calciteInternalTimePickerChange.emit();
       }
     };
   }
-  localeWatcher(newLocale) {
-    this.hourCycle = getLocaleHourCycle(newLocale);
-    this.setValue(this.value, false);
+  localeChanged() {
+    updateEffectiveLocale(this);
   }
   valueWatcher(newValue) {
     this.setValue(newValue, false);
   }
+  effectiveLocaleWatcher() {
+    this.updateLocale();
+  }
   //--------------------------------------------------------------------------
   //
   //  Event Listeners
@@ -762,7 +777,8 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return isActivationKey(key);
   }
   getMeridiemOrder(formatParts) {
-    const isRTLKind = this.locale === "ar" || this.locale === "he";
+    const locale = this.effectiveLocale;
+    const isRTLKind = locale === "ar" || locale === "he";
     if (formatParts && !isRTLKind) {
       const index = formatParts.findIndex((parts) => {
         return parts.value === this.localizedMeridiem;
@@ -771,15 +787,26 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
     return 0;
   }
+  updateLocale() {
+    this.hourCycle = getLocaleHourCycle(this.effectiveLocale, this.numberingSystem);
+    this.setValue(this.value, false);
+  }
   // --------------------------------------------------------------------------
   //
   //  Lifecycle
   //
   // --------------------------------------------------------------------------
   connectedCallback() {
-    this.setValue(this.value, false);
-    this.hourCycle = getLocaleHourCycle(this.locale);
-    this.meridiemOrder = this.getMeridiemOrder(getTimeParts("0:00:00", this.locale));
+    connectLocalized(this);
+    this.updateLocale();
+    this.meridiemOrder = this.getMeridiemOrder(getTimeParts({
+      value: "0:00:00",
+      locale: this.effectiveLocale,
+      numberingSystem: this.numberingSystem
+    }));
+  }
+  disconnectedCallback() {
+    disconnectLocalized(this);
   }
   // --------------------------------------------------------------------------
   //
@@ -844,8 +871,9 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   get el() { return this; }
   static get watchers() { return {
-    "locale": ["localeWatcher"],
-    "value": ["valueWatcher"]
+    "locale": ["localeChanged"],
+    "value": ["valueWatcher"],
+    "effectiveLocale": ["effectiveLocaleWatcher"]
   }; }
   static get style() { return timePickerCss; }
 }, [1, "calcite-time-picker", {
@@ -861,10 +889,12 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "intlSecond": [1, "intl-second"],
     "intlSecondDown": [1, "intl-second-down"],
     "intlSecondUp": [1, "intl-second-up"],
-    "locale": [1025, "lang"],
+    "locale": [1025],
     "scale": [513],
     "step": [514],
+    "numberingSystem": [1, "numbering-system"],
     "value": [1025],
+    "effectiveLocale": [32],
     "hour": [32],
     "hourCycle": [32],
     "localizedHour": [32],

package/dist/components/tooltip.js

@@ -1,13 +1,12 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.94
+ * v1.0.0-beta.96
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client/index.js';
 import { g as guid } from './guid.js';
-import { b as defaultOffsetDistance, c as connectFloatingUI, a as disconnectFloatingUI, p as positionFloatingUI, F as FloatingCSS, r as repositionDebounceTimeout } from './floating-ui.js';
-import { q as queryElementRoots, t as toAriaBoolean } from './dom.js';
-import { d as debounce } from './debounce.js';
+import { b as defaultOffsetDistance, c as connectFloatingUI, u as updateAfterClose, a as disconnectFloatingUI, r as reposition, F as FloatingCSS } from './floating-ui.js';
+import { i as isPrimaryPointerButton, q as queryElementRoots, t as toAriaBoolean } from './dom.js';
 
 const CSS = {
   container: "container",
@@ -52,10 +51,14 @@ class TooltipManager {
       this.hoverEvent(event, false);
     };
     this.clickHandler = (event) => {
+      if (!isPrimaryPointerButton(event)) {
+        return;
+      }
       const clickedTooltip = this.queryTooltip(event.composedPath());
       this.clickedTooltip = clickedTooltip;
       if (clickedTooltip === null || clickedTooltip === void 0 ? void 0 : clickedTooltip.closeOnClick) {
         this.toggleTooltip(clickedTooltip, false);
+        this.clearHoverTimeout(clickedTooltip);
       }
     };
     this.focusShow = (event) => {
@@ -95,16 +98,16 @@ class TooltipManager {
   }
   addListeners() {
     document.addEventListener("keydown", this.keyDownHandler);
-    document.addEventListener("mouseover", this.mouseEnterShow, { capture: true });
-    document.addEventListener("mouseout", this.mouseLeaveHide, { capture: true });
+    document.addEventListener("pointerover", this.mouseEnterShow, { capture: true });
+    document.addEventListener("pointerout", this.mouseLeaveHide, { capture: true });
     document.addEventListener("pointerdown", this.clickHandler, { capture: true });
     document.addEventListener("focusin", this.focusShow, { capture: true });
     document.addEventListener("focusout", this.blurHide, { capture: true });
   }
   removeListeners() {
     document.removeEventListener("keydown", this.keyDownHandler);
-    document.removeEventListener("mouseover", this.mouseEnterShow, { capture: true });
-    document.removeEventListener("mouseout", this.mouseLeaveHide, { capture: true });
+    document.removeEventListener("pointerover", this.mouseEnterShow, { capture: true });
+    document.removeEventListener("pointerout", this.mouseLeaveHide, { capture: true });
     document.removeEventListener("pointerdown", this.clickHandler, { capture: true });
     document.removeEventListener("focusin", this.focusShow, { capture: true });
     document.removeEventListener("focusout", this.blurHide, { capture: true });
@@ -147,10 +150,10 @@ class TooltipManager {
     if (!activeTooltipEl) {
       return;
     }
-    if (type === "mouseover" && event.composedPath().includes(activeTooltipEl)) {
+    if (type === "pointerover" && event.composedPath().includes(activeTooltipEl)) {
       this.clearHoverTimeout(activeTooltipEl);
     }
-    else if (type === "mouseout" && !hoverTimeouts.has(activeTooltipEl)) {
+    else if (type === "pointerout" && !hoverTimeouts.has(activeTooltipEl)) {
       this.hoverTooltip(activeTooltipEl, false);
     }
   }
@@ -172,7 +175,7 @@ class TooltipManager {
   }
 }
 
-const tooltipCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:block;position:absolute;z-index:999;-webkit-transform:scale(0);transform:scale(0)}.calcite-floating-ui-anim{position:relative;-webkit-transition:var(--calcite-floating-ui-transition);transition:var(--calcite-floating-ui-transition);visibility:hidden;-webkit-transition-property:visibility, opacity, -webkit-transform;transition-property:visibility, opacity, -webkit-transform;transition-property:transform, visibility, opacity;transition-property:transform, visibility, opacity, -webkit-transform;opacity:0;-webkit-box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:1;border-radius:0.25rem}:host([data-placement^=bottom]) .calcite-floating-ui-anim{-webkit-transform:translateY(-5px);transform:translateY(-5px)}:host([data-placement^=top]) .calcite-floating-ui-anim{-webkit-transform:translateY(5px);transform:translateY(5px)}:host([data-placement^=left]) .calcite-floating-ui-anim{-webkit-transform:translateX(5px);transform:translateX(5px)}:host([data-placement^=right]) .calcite-floating-ui-anim{-webkit-transform:translateX(-5px);transform:translateX(-5px)}:host([data-placement]) .calcite-floating-ui-anim--active{opacity:1;visibility:visible;-webkit-transform:translate(0);transform:translate(0)}:host([calcite-hydrated-hidden]){visibility:hidden !important;pointer-events:none}.arrow,.arrow::before{position:absolute;inline-size:8px;block-size:8px;z-index:-1}.arrow::before{content:\"\";--tw-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);--tw-shadow-colored:0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);-webkit-transform:rotate(45deg);transform:rotate(45deg);background:var(--calcite-ui-foreground-1)}:host([data-placement^=top]) .arrow{inset-block-end:-4px}:host([data-placement^=bottom]) .arrow{inset-block-start:-4px}:host([data-placement^=left]) .arrow{direction:ltr;inset-inline-end:-4px}:host([data-placement^=right]) .arrow{direction:ltr;inset-inline-start:-4px}.container{position:relative;overflow:hidden;border-radius:0.25rem;background-color:var(--calcite-ui-foreground-1);padding-block:0.75rem;padding-inline:1rem;font-size:var(--calcite-font-size--2);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1);max-inline-size:20rem;max-block-size:20rem;text-align:start}.calcite-floating-ui-anim{border-radius:0.25rem;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);background-color:var(--calcite-ui-foreground-1)}.arrow::before{outline:1px solid var(--calcite-ui-border-3)}";
+const tooltipCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:block;position:absolute;z-index:999}.calcite-floating-ui-anim{position:relative;transition:var(--calcite-floating-ui-transition);visibility:hidden;transition-property:transform, visibility, opacity;opacity:0;box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:1;border-radius:0.25rem}:host([data-placement^=bottom]) .calcite-floating-ui-anim{transform:translateY(-5px)}:host([data-placement^=top]) .calcite-floating-ui-anim{transform:translateY(5px)}:host([data-placement^=left]) .calcite-floating-ui-anim{transform:translateX(5px)}:host([data-placement^=right]) .calcite-floating-ui-anim{transform:translateX(-5px)}:host([data-placement]) .calcite-floating-ui-anim--active{opacity:1;visibility:visible;transform:translate(0)}:host([calcite-hydrated-hidden]){visibility:hidden !important;pointer-events:none}.arrow,.arrow::before{position:absolute;inline-size:8px;block-size:8px;z-index:-1}.arrow::before{content:\"\";--tw-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);--tw-shadow-colored:0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);transform:rotate(45deg);background:var(--calcite-ui-foreground-1)}:host([data-placement^=top]) .arrow{inset-block-end:-4px}:host([data-placement^=bottom]) .arrow{inset-block-start:-4px}:host([data-placement^=left]) .arrow{direction:ltr;inset-inline-end:-4px}:host([data-placement^=right]) .arrow{direction:ltr;inset-inline-start:-4px}.container{position:relative;overflow:hidden;border-radius:0.25rem;background-color:var(--calcite-ui-foreground-1);padding-block:0.75rem;padding-inline:1rem;font-size:var(--calcite-font-size--2);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1);max-inline-size:20rem;max-block-size:20rem;text-align:start}.calcite-floating-ui-anim{border-radius:0.25rem;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);background-color:var(--calcite-ui-foreground-1)}.arrow::before{outline:1px solid var(--calcite-ui-border-3)}";
 
 const manager = new TooltipManager();
 const Tooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -198,13 +201,15 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      */
     this.offsetSkidding = 0;
     /**
-     * When true, the component is open.
+     * When `true`, the component is open.
      */
     this.open = false;
     /**
      * Determines the type of positioning to use for the overlaid content.
      *
-     * Using the "absolute" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The "fixed" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is "fixed".
+     * Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.
+     *
+     * The `"fixed"` value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
      *
      */
     this.overlayPositioning = "absolute";
@@ -221,7 +226,6 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     //  Private Methods
     //
     // --------------------------------------------------------------------------
-    this.debouncedReposition = debounce(() => this.reposition(), repositionDebounceTimeout);
     this.setUpReferenceElement = (warn = true) => {
       this.removeReferences();
       this.effectiveReferenceElement = this.getReferenceElement();
@@ -260,19 +264,24 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
   }
   offsetDistanceOffsetHandler() {
-    this.debouncedReposition();
+    this.reposition(true);
   }
   offsetSkiddingHandler() {
-    this.debouncedReposition();
+    this.reposition(true);
   }
-  openHandler() {
-    this.debouncedReposition();
+  openHandler(value) {
+    if (value) {
+      this.reposition(true);
+    }
+    else {
+      updateAfterClose(this.el);
+    }
   }
   overlayPositioningHandler() {
-    this.debouncedReposition();
+    this.reposition(true);
   }
   placementHandler() {
-    this.debouncedReposition();
+    this.reposition(true);
   }
   referenceElementHandler() {
     this.setUpReferenceElement();
@@ -289,7 +298,7 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     if (this.referenceElement && !this.effectiveReferenceElement) {
       this.setUpReferenceElement();
     }
-    this.debouncedReposition();
+    this.reposition(true);
     this.hasLoaded = true;
   }
   disconnectedCallback() {
@@ -301,19 +310,24 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   //  Public Methods
   //
   // --------------------------------------------------------------------------
-  /** Updates the position of the component. */
-  async reposition() {
+  /**
+   * Updates the position of the component.
+   *
+   * @param delayed
+   */
+  async reposition(delayed = false) {
     const { el, effectiveReferenceElement, placement, overlayPositioning, offsetDistance, offsetSkidding, arrowEl } = this;
-    return positionFloatingUI({
+    return reposition(this, {
       floatingEl: el,
       referenceEl: effectiveReferenceElement,
       overlayPositioning,
       placement,
       offsetDistance,
       offsetSkidding,
+      includeArrow: true,
       arrowEl,
       type: "tooltip"
-    });
+    }, delayed);
   }
   getReferenceElement() {
     const { referenceElement, el } = this;

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-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.94
+ * v1.0.0-beta.96
  */
 function rgbToHex(color) {
   const { r, g, b } = color;

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-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.94
+ * v1.0.0-beta.96
  */
 import { n as nodeListToArray } from './dom.js';
 import { Build } from '@stencil/core/internal/client/index.js';
@@ -38,4 +38,4 @@ function getDepth(element) {
   return result.snapshotLength;
 }
 
-export { ComboboxChildSelector as C, TEXT as T, getItemChildren as a, ComboboxItem as b, ComboboxItemGroup as c, getAncestors as d, getDepth as e, getItemAncestors as g, hasActiveChildren as h };
+export { ComboboxItemGroup as C, TEXT as T, ComboboxChildSelector as a, getItemChildren as b, ComboboxItem as c, getAncestors as d, getDepth as e, getItemAncestors as g, hasActiveChildren as h };

package/dist/esm/{ExpandToggle-2bc42f9b.js → ExpandToggle-947164fe.js}

@@ -1,12 +1,12 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.94
+ * v1.0.0-beta.96
  */
-import { f as forceUpdate, h } from './index-53f14b87.js';
-import { a as getElementDir } from './dom-8d6885a3.js';
-import { S as SLOTS } from './resources-771c3479.js';
-import { S as SLOTS$1 } from './resources-322d57c9.js';
+import { f as forceUpdate, h } from './index-14216daa.js';
+import { a as getElementDir } from './dom-a73e8a2b.js';
+import { S as SLOTS } from './resources-22c8d6b5.js';
+import { S as SLOTS$1 } from './resources-aad6b1a9.js';
 
 const overflowActionsDebounceInMs = 150;
 const groupBufferPx = 2;

package/dist/esm/{Heading-04d330d7.js → Heading-257e631d.js}

@@ -1,9 +1,9 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.94
+ * v1.0.0-beta.96
  */
-import { h } from './index-53f14b87.js';
+import { h } from './index-14216daa.js';
 
 function constrainHeadingLevel(level) {
   return Math.min(Math.max(Math.ceil(level), 1), 6);

package/dist/esm/{app-globals-51ac9156.js → app-globals-5b11622a.js}

@@ -1,9 +1,9 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.94
+ * v1.0.0-beta.96
  */
-import { d as darkTheme, a as autoTheme } from './resources-54fe885f.js';
+import { d as darkTheme, a as autoTheme } from './resources-d9cc509f.js';
 
 /**
  * Emits when the theme is dynamically toggled between light and dark on <body> or in OS preferences.

package/dist/esm/{array-0910abb3.js → array-1589fdff.js}

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.94
+ * v1.0.0-beta.96
  */
 function getRoundRobinIndex(index, total) {
   return (index + total) % total;