@esri/calcite-components 1.5.0-next.9 → 1.5.1-next.0

package/dist/esm/{calcite-input-time-picker.calcite-time-picker-c9e9c87a.js → calcite-input-time-picker.calcite-time-picker-65ddbb57.js}

@@ -1,18 +1,18 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.5.0-next.9
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.1-next.0
  */
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-b92f855d.js';
-import { s as submitForm, c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form-919a36a3.js';
-import { g as guid } from './guid-ab08af0d.js';
-import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive-842fb305.js';
-import { n as numberKeys, i as isActivationKey } from './key-fc5e25b9.js';
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-0e424201.js';
-import { c as componentLoaded, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-c7eefc56.js';
-import { b as getDateTimeFormat, i as isValidNumber, e as getSupportedNumberingSystem, n as numberStringFormatter, g as getSupportedLocale, c as connectLocalized, d as disconnectLocalized } from './locale-329bf093.js';
-import { d as deactivateFocusTrap, a as activateFocusTrap, c as connectFocusTrap } from './focusTrapComponent-624b6807.js';
-import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n-56c1ac23.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-c4010481.js';
+import { s as submitForm, c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form-3555a3c1.js';
+import { g as guid } from './guid-d024e9ef.js';
+import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive-c98ba50a.js';
+import { n as numberKeys, i as isActivationKey } from './key-30b154e6.js';
+import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-2bcffed9.js';
+import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-6ef29e8b.js';
+import { b as getDateTimeFormat, i as isValidNumber, e as getSupportedNumberingSystem, n as numberStringFormatter, g as getSupportedLocale, c as connectLocalized, d as disconnectLocalized } from './locale-c3441a6a.js';
+import { d as deactivateFocusTrap, a as activateFocusTrap, c as connectFocusTrap } from './focusTrapComponent-2c6be6d7.js';
+import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n-796fe9cd.js';
 
 const maxTenthForMinuteAndSecond = 5;
 function createLocaleDateTimeFormatter(locale, numberingSystem, includeSeconds = true) {
@@ -20,7 +20,7 @@ function createLocaleDateTimeFormatter(locale, numberingSystem, includeSeconds =
     hour: "2-digit",
     minute: "2-digit",
     timeZone: "UTC",
-    numberingSystem: getSupportedNumberingSystem(numberingSystem)
+    numberingSystem: getSupportedNumberingSystem(numberingSystem),
   };
   if (includeSeconds) {
     options.second = "2-digit";
@@ -126,7 +126,7 @@ function localizeTimePart({ value, part, locale, numberingSystem }) {
   const parts = formatter.formatToParts(date);
   return getLocalizedTimePart(part, parts);
 }
-function localizeTimeString({ value, locale, numberingSystem, includeSeconds = true }) {
+function localizeTimeString({ value, locale, numberingSystem, includeSeconds = true, }) {
   if (!isValidTime(value)) {
     return null;
   }
@@ -135,7 +135,7 @@ function localizeTimeString({ value, locale, numberingSystem, includeSeconds = t
   const formatter = createLocaleDateTimeFormatter(locale, numberingSystem, includeSeconds);
   return formatter?.format(dateFromTimeString) || null;
 }
-function localizeTimeStringToParts({ value, locale, numberingSystem }) {
+function localizeTimeStringToParts({ value, locale, numberingSystem, }) {
   if (!isValidTime(value)) {
     return null;
   }
@@ -151,7 +151,7 @@ function localizeTimeStringToParts({ value, locale, numberingSystem }) {
       localizedMinuteSuffix: getLocalizedTimePart("minuteSuffix", parts),
       localizedSecond: getLocalizedTimePart("second", parts),
       localizedSecondSuffix: getLocalizedTimePart("secondSuffix", parts),
-      localizedMeridiem: getLocalizedTimePart("meridiem", parts)
+      localizedMeridiem: getLocalizedTimePart("meridiem", parts),
     };
   }
   return null;
@@ -175,13 +175,13 @@ function parseTimeString(value) {
     return {
       hour,
       minute,
-      second
+      second,
     };
   }
   return {
     hour: null,
     minute: null,
-    second: null
+    second: null,
   };
 }
 function toISOTimeString(value, includeSeconds = true) {
@@ -197,7 +197,7 @@ function toISOTimeString(value, includeSeconds = true) {
 }
 
 const CSS$1 = {
-  toggleIcon: "toggle-icon"
+  toggleIcon: "toggle-icon",
 };
 
 var SECONDS_A_MINUTE = 60;
@@ -616,35 +616,86 @@ var Dayjs = /*#__PURE__*/function () {
       return isLowercase ? m.toLowerCase() : m;
     };
 
-    var matches = {
-      YY: String(this.$y).slice(-2),
-      YYYY: Utils.s(this.$y, 4, '0'),
-      M: $M + 1,
-      MM: Utils.s($M + 1, 2, '0'),
-      MMM: getShort(locale.monthsShort, $M, months, 3),
-      MMMM: getShort(months, $M),
-      D: this.$D,
-      DD: Utils.s(this.$D, 2, '0'),
-      d: String(this.$W),
-      dd: getShort(locale.weekdaysMin, this.$W, weekdays, 2),
-      ddd: getShort(locale.weekdaysShort, this.$W, weekdays, 3),
-      dddd: weekdays[this.$W],
-      H: String($H),
-      HH: Utils.s($H, 2, '0'),
-      h: get$H(1),
-      hh: get$H(2),
-      a: meridiemFunc($H, $m, true),
-      A: meridiemFunc($H, $m, false),
-      m: String($m),
-      mm: Utils.s($m, 2, '0'),
-      s: String(this.$s),
-      ss: Utils.s(this.$s, 2, '0'),
-      SSS: Utils.s(this.$ms, 3, '0'),
-      Z: zoneStr // 'ZZ' logic below
+    var matches = function matches(match) {
+      switch (match) {
+        case 'YY':
+          return String(_this3.$y).slice(-2);
 
+        case 'YYYY':
+          return Utils.s(_this3.$y, 4, '0');
+
+        case 'M':
+          return $M + 1;
+
+        case 'MM':
+          return Utils.s($M + 1, 2, '0');
+
+        case 'MMM':
+          return getShort(locale.monthsShort, $M, months, 3);
+
+        case 'MMMM':
+          return getShort(months, $M);
+
+        case 'D':
+          return _this3.$D;
+
+        case 'DD':
+          return Utils.s(_this3.$D, 2, '0');
+
+        case 'd':
+          return String(_this3.$W);
+
+        case 'dd':
+          return getShort(locale.weekdaysMin, _this3.$W, weekdays, 2);
+
+        case 'ddd':
+          return getShort(locale.weekdaysShort, _this3.$W, weekdays, 3);
+
+        case 'dddd':
+          return weekdays[_this3.$W];
+
+        case 'H':
+          return String($H);
+
+        case 'HH':
+          return Utils.s($H, 2, '0');
+
+        case 'h':
+          return get$H(1);
+
+        case 'hh':
+          return get$H(2);
+
+        case 'a':
+          return meridiemFunc($H, $m, true);
+
+        case 'A':
+          return meridiemFunc($H, $m, false);
+
+        case 'm':
+          return String($m);
+
+        case 'mm':
+          return Utils.s($m, 2, '0');
+
+        case 's':
+          return String(_this3.$s);
+
+        case 'ss':
+          return Utils.s(_this3.$s, 2, '0');
+
+        case 'SSS':
+          return Utils.s(_this3.$ms, 3, '0');
+
+        case 'Z':
+          return zoneStr;
+      }
+
+      return null;
     };
+
     return str.replace(REGEX_FORMAT, function (match, $1) {
-      return $1 || matches[match] || zoneStr.replace(':', '');
+      return $1 || matches(match) || zoneStr.replace(':', '');
     }); // 'ZZ'
   };
 
@@ -655,14 +706,57 @@ var Dayjs = /*#__PURE__*/function () {
   };
 
   _proto.diff = function diff(input, units, _float) {
-    var _C$Y$C$M$C$Q$C$W$C$D$;
+    var _this4 = this;
 
     var unit = Utils.p(units);
     var that = dayjs(input);
     var zoneDelta = (that.utcOffset() - this.utcOffset()) * MILLISECONDS_A_MINUTE;
     var diff = this - that;
-    var result = Utils.m(this, that);
-    result = (_C$Y$C$M$C$Q$C$W$C$D$ = {}, _C$Y$C$M$C$Q$C$W$C$D$[Y] = result / 12, _C$Y$C$M$C$Q$C$W$C$D$[M] = result, _C$Y$C$M$C$Q$C$W$C$D$[Q] = result / 3, _C$Y$C$M$C$Q$C$W$C$D$[W] = (diff - zoneDelta) / MILLISECONDS_A_WEEK, _C$Y$C$M$C$Q$C$W$C$D$[D] = (diff - zoneDelta) / MILLISECONDS_A_DAY, _C$Y$C$M$C$Q$C$W$C$D$[H] = diff / MILLISECONDS_A_HOUR, _C$Y$C$M$C$Q$C$W$C$D$[MIN] = diff / MILLISECONDS_A_MINUTE, _C$Y$C$M$C$Q$C$W$C$D$[S] = diff / MILLISECONDS_A_SECOND, _C$Y$C$M$C$Q$C$W$C$D$)[unit] || diff; // milliseconds
+
+    var getMonth = function getMonth() {
+      return Utils.m(_this4, that);
+    };
+
+    var result;
+
+    switch (unit) {
+      case Y:
+        result = getMonth() / 12;
+        break;
+
+      case M:
+        result = getMonth();
+        break;
+
+      case Q:
+        result = getMonth() / 3;
+        break;
+
+      case W:
+        result = (diff - zoneDelta) / MILLISECONDS_A_WEEK;
+        break;
+
+      case D:
+        result = (diff - zoneDelta) / MILLISECONDS_A_DAY;
+        break;
+
+      case H:
+        result = diff / MILLISECONDS_A_HOUR;
+        break;
+
+      case MIN:
+        result = diff / MILLISECONDS_A_MINUTE;
+        break;
+
+      case S:
+        result = diff / MILLISECONDS_A_SECOND;
+        break;
+
+      default:
+        result = diff; // milliseconds
+
+        break;
+    }
 
     return _float ? result : Utils.a(result);
   };
@@ -1267,60 +1361,60 @@ const updateLocale = (function (option, Dayjs, dayjs) {
   };
 });
 
-const inputTimePickerCss = "@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-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 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-right{animation-name:in-right}.calcite-animate__in-left{animation-name:in-left}.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);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}:host([hidden]){display:none}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-block;-webkit-user-select:none;user-select:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([scale=s]){--calcite-toggle-spacing:0.5rem}:host([scale=m]){--calcite-toggle-spacing:0.75rem}:host([scale=l]){--calcite-toggle-spacing:1rem}.input-wrapper{position:relative}.toggle-icon{position:absolute;display:flex;inline-size:1rem;cursor:pointer;align-items:center;inset-inline-end:0;inset-block:0;padding-inline:var(--calcite-toggle-spacing)}";
+const inputTimePickerCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-block;-webkit-user-select:none;user-select:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([scale=s]){--calcite-toggle-spacing:0.5rem}:host([scale=m]){--calcite-toggle-spacing:0.75rem}:host([scale=l]){--calcite-toggle-spacing:1rem}.input-wrapper{position:relative}.toggle-icon{position:absolute;display:flex;inline-size:1rem;cursor:pointer;align-items:center;inset-inline-end:0;inset-block:0;padding-inline:var(--calcite-toggle-spacing)}:host([hidden]){display:none}[hidden]{display:none}";
 
 // some bundlers (e.g., Webpack) need dynamic import paths to be static
 const supportedDayJsLocaleToLocaleConfigImport = new Map([
-  ["ar", () => import('./ar-59d029ae.js')],
-  ["bg", () => import('./bg-f1bc2dcd.js')],
-  ["bs", () => import('./bs-708632b8.js')],
-  ["ca", () => import('./ca-d2dff964.js')],
-  ["cs", () => import('./cs-5ed6f684.js')],
-  ["da", () => import('./da-57b25c23.js')],
-  ["de", () => import('./de-6f3a4ecc.js')],
-  ["de-at", () => import('./de-at-f3e1b6cf.js')],
-  ["de-ch", () => import('./de-ch-a20182b9.js')],
-  ["el", () => import('./el-fa1c4cbb.js')],
+  ["ar", () => import('./ar-37b15401.js')],
+  ["bg", () => import('./bg-160f6962.js')],
+  ["bs", () => import('./bs-993d9544.js')],
+  ["ca", () => import('./ca-1916af48.js')],
+  ["cs", () => import('./cs-26665e87.js')],
+  ["da", () => import('./da-9db49942.js')],
+  ["de", () => import('./de-3deb958f.js')],
+  ["de-at", () => import('./de-at-4e6a2189.js')],
+  ["de-ch", () => import('./de-ch-531815a3.js')],
+  ["el", () => import('./el-c166ad7f.js')],
   ["en", () => Promise.resolve().then(function () { return en$1; })],
-  ["en-au", () => import('./en-au-3002df41.js')],
-  ["en-ca", () => import('./en-ca-938d8133.js')],
-  ["en-gb", () => import('./en-gb-35e173ba.js')],
-  ["es", () => import('./es-5b0046eb.js')],
-  ["es-mx", () => import('./es-mx-088d1dae.js')],
-  ["et", () => import('./et-16b33370.js')],
-  ["fi", () => import('./fi-6706a61b.js')],
-  ["fr", () => import('./fr-830ccfce.js')],
-  ["fr-ch", () => import('./fr-ch-809465a2.js')],
-  ["he", () => import('./he-17ba1e55.js')],
-  ["hi", () => import('./hi-cbefcd73.js')],
-  ["hr", () => import('./hr-845efbd0.js')],
-  ["hu", () => import('./hu-d9588da1.js')],
-  ["id", () => import('./id-bba6c07d.js')],
-  ["it", () => import('./it-e8d3e426.js')],
-  ["it-ch", () => import('./it-ch-cad4e4e8.js')],
-  ["ja", () => import('./ja-e472d557.js')],
-  ["ko", () => import('./ko-a8778810.js')],
-  ["lt", () => import('./lt-d1368ec7.js')],
-  ["lv", () => import('./lv-7a1ad49c.js')],
-  ["mk", () => import('./mk-9ba678c1.js')],
-  ["nl", () => import('./nl-3adcb575.js')],
-  ["nb", () => import('./nb-870f5165.js')],
-  ["pl", () => import('./pl-187adb8e.js')],
-  ["pt", () => import('./pt-8cc34121.js')],
-  ["pt-br", () => import('./pt-br-fc6c227c.js')],
-  ["ro", () => import('./ro-cf71a33a.js')],
-  ["ru", () => import('./ru-d1811642.js')],
-  ["sk", () => import('./sk-d511b871.js')],
-  ["sl", () => import('./sl-f9e89a1b.js')],
-  ["sr", () => import('./sr-2b3072e5.js')],
-  ["sv", () => import('./sv-63efc38b.js')],
-  ["th", () => import('./th-97c8bc08.js')],
-  ["tr", () => import('./tr-9405942c.js')],
-  ["uk", () => import('./uk-b78734bb.js')],
-  ["vi", () => import('./vi-ea7be673.js')],
-  ["zh-cn", () => import('./zh-cn-e477e4c2.js')],
-  ["zh-hk", () => import('./zh-hk-3a6c02ed.js')],
-  ["zh-tw", () => import('./zh-tw-891739e7.js')]
+  ["en-au", () => import('./en-au-fb7e7d74.js')],
+  ["en-ca", () => import('./en-ca-c4601830.js')],
+  ["en-gb", () => import('./en-gb-ae19198d.js')],
+  ["es", () => import('./es-9e2be3ac.js')],
+  ["es-mx", () => import('./es-mx-d6957da5.js')],
+  ["et", () => import('./et-2664164d.js')],
+  ["fi", () => import('./fi-30646eb5.js')],
+  ["fr", () => import('./fr-900b64a1.js')],
+  ["fr-ch", () => import('./fr-ch-b78c5c6b.js')],
+  ["he", () => import('./he-4cf56a98.js')],
+  ["hi", () => import('./hi-95fcc135.js')],
+  ["hr", () => import('./hr-d5085a32.js')],
+  ["hu", () => import('./hu-4a79c16c.js')],
+  ["id", () => import('./id-f7cb3b13.js')],
+  ["it", () => import('./it-3c316ef5.js')],
+  ["it-ch", () => import('./it-ch-626f55c6.js')],
+  ["ja", () => import('./ja-8ae683ee.js')],
+  ["ko", () => import('./ko-56fa54da.js')],
+  ["lt", () => import('./lt-fdbd31d2.js')],
+  ["lv", () => import('./lv-a4cb55e3.js')],
+  ["mk", () => import('./mk-de18501f.js')],
+  ["nl", () => import('./nl-c232add8.js')],
+  ["nb", () => import('./nb-23fc2e54.js')],
+  ["pl", () => import('./pl-434e19da.js')],
+  ["pt", () => import('./pt-801b7229.js')],
+  ["pt-br", () => import('./pt-br-92527c58.js')],
+  ["ro", () => import('./ro-20d39226.js')],
+  ["ru", () => import('./ru-9cc8c06d.js')],
+  ["sk", () => import('./sk-133343f7.js')],
+  ["sl", () => import('./sl-37a96050.js')],
+  ["sr", () => import('./sr-d9b79d9e.js')],
+  ["sv", () => import('./sv-20f817fb.js')],
+  ["th", () => import('./th-2a2cf7fa.js')],
+  ["tr", () => import('./tr-1a3a138e.js')],
+  ["uk", () => import('./uk-97a96a59.js')],
+  ["vi", () => import('./vi-dabbb53f.js')],
+  ["zh-cn", () => import('./zh-cn-b65f0886.js')],
+  ["zh-hk", () => import('./zh-hk-0885c062.js')],
+  ["zh-tw", () => import('./zh-tw-637196fd.js')],
 ]);
 dayjs.extend(customParseFormat);
 dayjs.extend(localeData);
@@ -1355,7 +1449,7 @@ const InputTimePicker = class {
         value: this.value,
         locale: this.effectiveLocale,
         numberingSystem: this.numberingSystem,
-        includeSeconds: this.shouldIncludeSeconds()
+        includeSeconds: this.shouldIncludeSeconds(),
       });
       if (localizedTimeString !== inputValue) {
         this.setInputValue(localizedTimeString);
@@ -1374,7 +1468,7 @@ const InputTimePicker = class {
         numberStringFormatter.numberFormatOptions = {
           locale,
           numberingSystem,
-          useGrouping: false
+          useGrouping: false,
         };
         const valueInNumberingSystem = numberStringFormatter
           .delocalize(target.value)
@@ -1396,7 +1490,7 @@ const InputTimePicker = class {
         value,
         locale: this.effectiveLocale,
         numberingSystem: this.numberingSystem,
-        includeSeconds
+        includeSeconds,
       }));
     };
     this.popoverCloseHandler = () => {
@@ -1404,7 +1498,7 @@ const InputTimePicker = class {
         onDeactivate: () => {
           this.calciteInputEl.setFocus();
           this.focusOnOpen = false;
-        }
+        },
       });
     };
     this.popoverOpenHandler = () => {
@@ -1414,7 +1508,7 @@ const InputTimePicker = class {
             this.calciteTimePickerEl.setFocus();
             this.focusOnOpen = false;
           }
-        }
+        },
       });
     };
     this.keyDownHandler = (event) => {
@@ -1436,7 +1530,7 @@ const InputTimePicker = class {
           value: this.value,
           locale: this.effectiveLocale,
           numberingSystem: this.numberingSystem,
-          includeSeconds: this.shouldIncludeSeconds()
+          includeSeconds: this.shouldIncludeSeconds(),
         });
         if (newValue && this.calciteInputEl.value !== localizedTimeString) {
           this.setInputValue(localizedTimeString);
@@ -1465,8 +1559,8 @@ const InputTimePicker = class {
         focusTrapEl: el,
         focusTrapOptions: {
           initialFocus: false,
-          setReturnFocus: false
-        }
+          setReturnFocus: false,
+        },
       });
     };
     this.setInputValue = (newInputValue) => {
@@ -1497,7 +1591,7 @@ const InputTimePicker = class {
           value: oldValue,
           locale: this.effectiveLocale,
           numberingSystem: this.numberingSystem,
-          includeSeconds: this.shouldIncludeSeconds()
+          includeSeconds: this.shouldIncludeSeconds(),
         }));
       }
     };
@@ -1515,7 +1609,7 @@ const InputTimePicker = class {
           value: this.value,
           includeSeconds,
           locale: this.effectiveLocale,
-          numberingSystem: this.numberingSystem
+          numberingSystem: this.numberingSystem,
         })
         : "");
     };
@@ -1571,7 +1665,7 @@ const InputTimePicker = class {
       value: this.value,
       locale: this.effectiveLocale,
       numberingSystem,
-      includeSeconds: this.shouldIncludeSeconds()
+      includeSeconds: this.shouldIncludeSeconds(),
     }));
   }
   stepWatcher(newStep, oldStep) {
@@ -1592,7 +1686,7 @@ const InputTimePicker = class {
       value: this.value,
       locale,
       numberingSystem: this.numberingSystem,
-      includeSeconds: this.shouldIncludeSeconds()
+      includeSeconds: this.shouldIncludeSeconds(),
     }));
   }
   // --------------------------------------------------------------------------
@@ -1602,7 +1696,7 @@ const InputTimePicker = class {
   // --------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    await componentLoaded(this);
+    await componentFocusable(this);
     this.el.focus();
   }
   /**
@@ -1653,23 +1747,23 @@ const InputTimePicker = class {
           L: "DD/MM/YYYY",
           LL: "D MMMM YYYY",
           LLL: "D MMMM YYYY HH:mm A",
-          LLLL: "dddd D MMMM YYYY HH:mm A"
-        }
+          LLLL: "dddd D MMMM YYYY HH:mm A",
+        },
       };
     }
     if (locale === "en-au") {
       return {
-        meridiem: (hour) => (hour > 12 ? "pm" : "am")
+        meridiem: (hour) => (hour > 12 ? "pm" : "am"),
       };
     }
     if (locale === "en-ca") {
       return {
-        meridiem: (hour) => (hour > 12 ? "p.m." : "a.m.")
+        meridiem: (hour) => (hour > 12 ? "p.m." : "a.m."),
       };
     }
     if (locale === "el") {
       return {
-        meridiem: (hour) => (hour > 12 ? "μ.μ." : "π.μ.")
+        meridiem: (hour) => (hour > 12 ? "μ.μ." : "π.μ."),
       };
     }
     if (locale === "hi") {
@@ -1680,31 +1774,31 @@ const InputTimePicker = class {
           L: "DD/MM/YYYY",
           LL: "D MMMM YYYY",
           LLL: "D MMMM YYYY, h:mm A",
-          LLLL: "dddd, D MMMM YYYY, h:mm A"
+          LLLL: "dddd, D MMMM YYYY, h:mm A",
         },
-        meridiem: (hour) => (hour > 12 ? "pm" : "am")
+        meridiem: (hour) => (hour > 12 ? "pm" : "am"),
       };
     }
     if (locale === "ko") {
       return {
-        meridiem: (hour) => (hour > 12 ? "오후" : "오전")
+        meridiem: (hour) => (hour > 12 ? "오후" : "오전"),
       };
     }
     if (locale === "zh-tw") {
       return {
         formats: {
           LT: "AHH:mm",
-          LTS: "AHH:mm:ss"
-        }
+          LTS: "AHH:mm:ss",
+        },
       };
     }
     if (locale === "zh-hk") {
       return {
         formats: {
           LT: "AHH:mm",
-          LTS: "AHH:mm:ss"
+          LTS: "AHH:mm:ss",
         },
-        meridiem: (hour) => (hour > 12 ? "下午" : "上午")
+        meridiem: (hour) => (hour > 12 ? "下午" : "上午"),
       };
     }
   }
@@ -1743,7 +1837,7 @@ const InputTimePicker = class {
         value: this.value,
         locale: this.effectiveLocale,
         numberingSystem: this.numberingSystem,
-        includeSeconds: this.shouldIncludeSeconds()
+        includeSeconds: this.shouldIncludeSeconds(),
       }));
     }
   }
@@ -1820,10 +1914,10 @@ const CSS = {
   "scale-m": "scale-m",
   "scale-l": "scale-l",
   timePicker: "time-picker",
-  meridiemStart: "meridiem--start"
+  meridiemStart: "meridiem--start",
 };
 
-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-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 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-right{animation-name:in-right}.calcite-animate__in-left{animation-name:in-left}.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);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}: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;z-index:var(--calcite-app-z-index-header);outline-offset:0}.time-picker .button:active{background-color:var(--calcite-ui-foreground-3)}.time-picker .button.top-left{border-start-start-radius:var(--calcite-border-radius)}.time-picker .button.bottom-left{border-end-start-radius:var(--calcite-border-radius)}.time-picker .button.top-right{border-start-end-radius:var(--calcite-border-radius)}.time-picker .button.bottom-right{border-end-end-radius:var(--calcite-border-radius)}.time-picker .button calcite-icon{color:var(--calcite-ui-text-3)}.time-picker .input{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;background-color:var(--calcite-ui-foreground-1);font-weight:var(--calcite-font-weight-medium)}.time-picker .input:hover{box-shadow:inset 0 0 0 2px var(--calcite-ui-foreground-2);z-index:var(--calcite-app-z-index-header)}.time-picker .input:focus,.time-picker .input:hover:focus{outline:2px solid transparent;outline-offset:2px;box-shadow:inset 0 0 0 2px var(--calcite-ui-brand);z-index:var(--calcite-app-z-index-header);outline-offset:0}.time-picker.scale-s{font-size:var(--calcite-font-size--1)}.time-picker.scale-s .button,.time-picker.scale-s .input{padding-inline:0.75rem;padding-block:0.25rem}.time-picker.scale-s:not(.show-meridiem) .delimiter:last-child{padding-inline-end:0.75rem}.time-picker.scale-m{font-size:var(--calcite-font-size-0)}.time-picker.scale-m .button,.time-picker.scale-m .input{padding-inline:1rem;padding-block:0.5rem}.time-picker.scale-m:not(.show-meridiem) .delimiter:last-child{padding-inline-end:1rem}.time-picker.scale-l{font-size:var(--calcite-font-size-1)}.time-picker.scale-l .button,.time-picker.scale-l .input{padding-inline:1.25rem;padding-block:0.75rem}.time-picker.scale-l:not(.show-meridiem) .delimiter:last-child{padding-inline-end:1.25rem}";
+const timePickerCss = ":host{display:inline-block}.time-picker{display:flex;-webkit-user-select:none;user-select:none;align-items:center;background-color:var(--calcite-ui-foreground-1);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1);--tw-shadow:0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);--tw-shadow-colored:0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);border-radius:var(--calcite-border-radius)}.time-picker .column{display:flex;flex-direction:column}.time-picker .meridiem--start{order:-1}.time-picker .button{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;background-color:var(--calcite-ui-foreground-1)}.time-picker .button:hover,.time-picker .button:focus{background-color:var(--calcite-ui-foreground-2);outline:2px solid transparent;outline-offset:2px;z-index:var(--calcite-app-z-index-header);outline-offset:0}.time-picker .button:active{background-color:var(--calcite-ui-foreground-3)}.time-picker .button.top-left{border-start-start-radius:var(--calcite-border-radius)}.time-picker .button.bottom-left{border-end-start-radius:var(--calcite-border-radius)}.time-picker .button.top-right{border-start-end-radius:var(--calcite-border-radius)}.time-picker .button.bottom-right{border-end-end-radius:var(--calcite-border-radius)}.time-picker .button calcite-icon{color:var(--calcite-ui-text-3)}.time-picker .input{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;background-color:var(--calcite-ui-foreground-1);font-weight:var(--calcite-font-weight-medium)}.time-picker .input:hover{box-shadow:inset 0 0 0 2px var(--calcite-ui-foreground-2);z-index:var(--calcite-app-z-index-header)}.time-picker .input:focus,.time-picker .input:hover:focus{outline:2px solid transparent;outline-offset:2px;box-shadow:inset 0 0 0 2px var(--calcite-ui-brand);z-index:var(--calcite-app-z-index-header);outline-offset:0}.time-picker.scale-s{font-size:var(--calcite-font-size--1)}.time-picker.scale-s .button,.time-picker.scale-s .input{padding-inline:0.75rem;padding-block:0.25rem}.time-picker.scale-s:not(.show-meridiem) .delimiter:last-child{padding-inline-end:0.75rem}.time-picker.scale-m{font-size:var(--calcite-font-size-0)}.time-picker.scale-m .button,.time-picker.scale-m .input{padding-inline:1rem;padding-block:0.5rem}.time-picker.scale-m:not(.show-meridiem) .delimiter:last-child{padding-inline-end:1rem}.time-picker.scale-l{font-size:var(--calcite-font-size-1)}.time-picker.scale-l .button,.time-picker.scale-l .input{padding-inline:1.25rem;padding-block:0.75rem}.time-picker.scale-l:not(.show-meridiem) .delimiter:last-child{padding-inline-end:1.25rem}:host([hidden]){display:none}[hidden]{display:none}";
 
 function capitalize(str) {
   return str.charAt(0).toUpperCase() + str.slice(1);
@@ -2086,7 +2180,7 @@ const TimePicker = class {
       if (isValidTime(value)) {
         const { hour, minute, second } = parseTimeString(value);
         const { effectiveLocale: locale, numberingSystem } = this;
-        const { localizedHour, localizedHourSuffix, localizedMinute, localizedMinuteSuffix, localizedSecond, localizedSecondSuffix, localizedMeridiem } = localizeTimeStringToParts({ value, locale, numberingSystem });
+        const { localizedHour, localizedHourSuffix, localizedMinute, localizedMinuteSuffix, localizedSecond, localizedSecondSuffix, localizedMeridiem, } = localizeTimeStringToParts({ value, locale, numberingSystem });
         this.localizedHour = localizedHour;
         this.localizedHourSuffix = localizedHourSuffix;
         this.localizedMinute = localizedMinute;
@@ -2143,7 +2237,7 @@ const TimePicker = class {
             value: this.hour,
             part: "hour",
             locale,
-            numberingSystem
+            numberingSystem,
           });
         }
       }
@@ -2153,7 +2247,7 @@ const TimePicker = class {
           value: this[key],
           part: key,
           locale,
-          numberingSystem
+          numberingSystem,
         });
       }
       if (this.hour && this.minute) {
@@ -2288,7 +2382,7 @@ const TimePicker = class {
    * Sets focus on the component's first focusable element.
    */
   async setFocus() {
-    await componentLoaded(this);
+    await componentFocusable(this);
     this.el?.focus();
   }
   // --------------------------------------------------------------------------
@@ -2300,7 +2394,7 @@ const TimePicker = class {
     this.showSecond = this.step < 60;
   }
   async focusPart(target) {
-    await componentLoaded(this);
+    await componentFocusable(this);
     this[`${target || "hour"}El`]?.focus();
   }
   buttonActivated(event) {
@@ -2339,7 +2433,7 @@ const TimePicker = class {
     this.meridiemOrder = this.getMeridiemOrder(getTimeParts({
       value: "0:00:00",
       locale: this.effectiveLocale,
-      numberingSystem: this.numberingSystem
+      numberingSystem: this.numberingSystem,
     }));
   }
   async componentWillLoad() {
@@ -2368,58 +2462,58 @@ const TimePicker = class {
         [CSS.timePicker]: true,
         [CSS.showMeridiem]: showMeridiem,
         [CSS.showSecond]: this.showSecond,
-        [CSS[`scale-${this.scale}`]]: true
+        [CSS[`scale-${this.scale}`]]: true,
       }, dir: "ltr" }, h("div", { class: CSS.column, role: "group" }, h("span", { "aria-label": this.messages.hourUp, class: {
         [CSS.button]: true,
         [CSS.buttonHourUp]: true,
-        [CSS.buttonTopLeft]: true
+        [CSS.buttonTopLeft]: true,
       }, onClick: this.incrementHour, onKeyDown: this.hourUpButtonKeyDownHandler, role: "button" }, h("calcite-icon", { icon: "chevron-up", scale: iconScale })), h("span", { "aria-label": this.messages.hour, "aria-valuemax": "23", "aria-valuemin": "1", "aria-valuenow": (hourIsNumber && parseInt(this.hour)) || "0", "aria-valuetext": this.hour, class: {
         [CSS.input]: true,
-        [CSS.hour]: true
+        [CSS.hour]: true,
       }, onFocus: this.focusHandler, onKeyDown: this.hourKeyDownHandler, role: "spinbutton", tabIndex: 0,
       // eslint-disable-next-line react/jsx-sort-props
       ref: this.setHourEl }, this.localizedHour || "--"), h("span", { "aria-label": this.messages.hourDown, class: {
         [CSS.button]: true,
         [CSS.buttonHourDown]: true,
-        [CSS.buttonBottomLeft]: true
+        [CSS.buttonBottomLeft]: true,
       }, onClick: this.decrementHour, onKeyDown: this.hourDownButtonKeyDownHandler, role: "button" }, h("calcite-icon", { icon: "chevron-down", scale: iconScale }))), h("span", { class: CSS.delimiter }, this.localizedHourSuffix), h("div", { class: CSS.column, role: "group" }, h("span", { "aria-label": this.messages.minuteUp, class: {
         [CSS.button]: true,
-        [CSS.buttonMinuteUp]: true
+        [CSS.buttonMinuteUp]: true,
       }, onClick: this.incrementMinute, onKeyDown: this.minuteUpButtonKeyDownHandler, role: "button", tabIndex: -1 }, h("calcite-icon", { icon: "chevron-up", scale: iconScale })), h("span", { "aria-label": this.messages.minute, "aria-valuemax": "12", "aria-valuemin": "1", "aria-valuenow": (minuteIsNumber && parseInt(this.minute)) || "0", "aria-valuetext": this.minute, class: {
         [CSS.input]: true,
-        [CSS.minute]: true
+        [CSS.minute]: true,
       }, onFocus: this.focusHandler, onKeyDown: this.minuteKeyDownHandler, role: "spinbutton", tabIndex: 0,
       // eslint-disable-next-line react/jsx-sort-props
       ref: this.setMinuteEl }, this.localizedMinute || "--"), h("span", { "aria-label": this.messages.minuteDown, class: {
         [CSS.button]: true,
-        [CSS.buttonMinuteDown]: true
+        [CSS.buttonMinuteDown]: true,
       }, onClick: this.decrementMinute, onKeyDown: this.minuteDownButtonKeyDownHandler, role: "button" }, h("calcite-icon", { icon: "chevron-down", scale: iconScale }))), this.showSecond && h("span", { class: CSS.delimiter }, this.localizedMinuteSuffix), this.showSecond && (h("div", { class: CSS.column, role: "group" }, h("span", { "aria-label": this.messages.secondUp, class: {
         [CSS.button]: true,
-        [CSS.buttonSecondUp]: true
+        [CSS.buttonSecondUp]: true,
       }, onClick: this.incrementSecond, onKeyDown: this.secondUpButtonKeyDownHandler, role: "button" }, h("calcite-icon", { icon: "chevron-up", scale: iconScale })), h("span", { "aria-label": this.messages.second, "aria-valuemax": "59", "aria-valuemin": "0", "aria-valuenow": (secondIsNumber && parseInt(this.second)) || "0", "aria-valuetext": this.second, class: {
         [CSS.input]: true,
-        [CSS.second]: true
+        [CSS.second]: true,
       }, onFocus: this.focusHandler, onKeyDown: this.secondKeyDownHandler, role: "spinbutton", tabIndex: 0,
       // eslint-disable-next-line react/jsx-sort-props
       ref: this.setSecondEl }, this.localizedSecond || "--"), h("span", { "aria-label": this.messages.secondDown, class: {
         [CSS.button]: true,
-        [CSS.buttonSecondDown]: true
+        [CSS.buttonSecondDown]: true,
       }, onClick: this.decrementSecond, onKeyDown: this.secondDownButtonKeyDownHandler, role: "button" }, h("calcite-icon", { icon: "chevron-down", scale: iconScale })))), this.localizedSecondSuffix && (h("span", { class: CSS.delimiter }, this.localizedSecondSuffix)), showMeridiem && (h("div", { class: {
         [CSS.column]: true,
-        [CSS.meridiemStart]: this.meridiemOrder === 0
+        [CSS.meridiemStart]: this.meridiemOrder === 0,
       }, role: "group" }, h("span", { "aria-label": this.messages.meridiemUp, class: {
         [CSS.button]: true,
         [CSS.buttonMeridiemUp]: true,
-        [CSS.buttonTopRight]: true
+        [CSS.buttonTopRight]: true,
       }, onClick: this.incrementMeridiem, onKeyDown: this.meridiemUpButtonKeyDownHandler, role: "button" }, h("calcite-icon", { icon: "chevron-up", scale: iconScale })), h("span", { "aria-label": this.messages.meridiem, "aria-valuemax": "2", "aria-valuemin": "1", "aria-valuenow": (this.meridiem === "PM" && "2") || "1", "aria-valuetext": this.meridiem, class: {
         [CSS.input]: true,
-        [CSS.meridiem]: true
+        [CSS.meridiem]: true,
       }, onFocus: this.focusHandler, onKeyDown: this.meridiemKeyDownHandler, role: "spinbutton", tabIndex: 0,
       // eslint-disable-next-line react/jsx-sort-props
       ref: this.setMeridiemEl }, this.localizedMeridiem || "--"), h("span", { "aria-label": this.messages.meridiemDown, class: {
         [CSS.button]: true,
         [CSS.buttonMeridiemDown]: true,
-        [CSS.buttonBottomRight]: true
+        [CSS.buttonBottomRight]: true,
       }, onClick: this.decrementMeridiem, onKeyDown: this.meridiemDownButtonKeyDownHandler, role: "button" }, h("calcite-icon", { icon: "chevron-down", scale: iconScale }))))));
   }
   static get delegatesFocus() { return true; }