@esri/solutions-components 0.10.27 → 0.10.28

package/dist/components/calcite-fab.js

@@ -5,7 +5,7 @@
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { f as focusElement } from './dom.js';
-import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive.js';
+import { u as updateHostInteraction, I as InteractiveContainer } from './interactive.js';
 import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable.js';
 import { d as defineCustomElement$4 } from './button.js';
 import { d as defineCustomElement$3 } from './icon.js';
@@ -14,7 +14,7 @@ import { d as defineCustomElement$2 } from './loader.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.2
+ * v2.13.0
  */
 const CSS = {
     button: "button",
@@ -47,9 +47,6 @@ const Fab = /*@__PURE__*/ proxyCustomElement(class Fab extends HTMLElement {
     //  Lifecycle
     //
     //--------------------------------------------------------------------------
-    connectedCallback() {
-        connectInteractive(this);
-    }
     componentWillLoad() {
         setUpLoadableComponent(this);
     }
@@ -59,9 +56,6 @@ const Fab = /*@__PURE__*/ proxyCustomElement(class Fab extends HTMLElement {
     componentDidRender() {
         updateHostInteraction(this);
     }
-    disconnectedCallback() {
-        disconnectInteractive(this);
-    }
     // --------------------------------------------------------------------------
     //
     //  Methods
@@ -80,7 +74,7 @@ const Fab = /*@__PURE__*/ proxyCustomElement(class Fab extends HTMLElement {
     render() {
         const { appearance, kind, disabled, loading, scale, textEnabled, icon, label, text, iconFlipRtl, } = this;
         const title = !textEnabled ? label || text || null : null;
-        return (h(InteractiveContainer, { key: 'a3f179f9542d93366d6befded12604369f905580', disabled: disabled }, h("calcite-button", { key: '2adc3c8d6408743bfa905995ce75c7ed4d241733', appearance: appearance === "solid" ? "solid" : "outline-fill", class: CSS.button, disabled: disabled, iconFlipRtl: iconFlipRtl ? "start" : null, iconStart: icon, kind: kind, label: label, loading: loading, ref: (buttonEl) => {
+        return (h(InteractiveContainer, { key: '7953bd06defeddfed5530500901609524f7b58fd', disabled: disabled }, h("calcite-button", { key: 'c2bbe2be5e2ac375abab75024005f1eb5afed51c', appearance: appearance === "solid" ? "solid" : "outline-fill", class: CSS.button, disabled: disabled, iconFlipRtl: iconFlipRtl ? "start" : null, iconStart: icon, kind: kind, label: label, loading: loading, ref: (buttonEl) => {
                 this.buttonEl = buttonEl;
             }, round: true, scale: scale, title: title, type: "button", width: "auto" }, this.textEnabled ? this.text : null)));
     }

package/dist/components/calcite-inline-editable.js

@@ -5,7 +5,7 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { a as getSlotted } from './dom.js';
-import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive.js';
+import { u as updateHostInteraction, I as InteractiveContainer } from './interactive.js';
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label.js';
 import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable.js';
 import { c as connectLocalized, d as disconnectLocalized } from './locale2.js';
@@ -18,7 +18,7 @@ import { d as defineCustomElement$2 } from './loader.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.2
+ * v2.13.0
  */
 const CSS = {
     wrapper: "wrapper",
@@ -146,7 +146,6 @@ const InlineEditable = /*@__PURE__*/ proxyCustomElement(class InlineEditable ext
     //
     //--------------------------------------------------------------------------
     connectedCallback() {
-        connectInteractive(this);
         connectLabel(this);
         connectLocalized(this);
         connectMessages(this);
@@ -161,7 +160,6 @@ const InlineEditable = /*@__PURE__*/ proxyCustomElement(class InlineEditable ext
         setComponentLoaded(this);
     }
     disconnectedCallback() {
-        disconnectInteractive(this);
         disconnectLabel(this);
         disconnectLocalized(this);
         disconnectMessages(this);
@@ -171,12 +169,12 @@ const InlineEditable = /*@__PURE__*/ proxyCustomElement(class InlineEditable ext
         updateHostInteraction(this);
     }
     render() {
-        return (h(InteractiveContainer, { key: '679bc60f370860de292d87bc9557f451f3674a4a', disabled: this.disabled }, h("div", { key: 'fa5d6c787837eeb8174dc45d7bcdc61b7e1c1851', class: CSS.wrapper, onClick: this.enableEditingHandler, onKeyDown: this.escapeKeyHandler }, h("div", { key: '2a432c9940c1652490168333d15c19396d149a10', class: CSS.inputWrapper }, h("slot", { key: '80a11e4a0c3ace9a4ef5578f797e4a6b4b3f72e9' })), h("div", { key: '540e6cf43d413ebe15345a37902b110094010d57', class: CSS.controlsWrapper }, h("calcite-button", { key: '1ee7fa765b9bd7745424bb8f8f524c0a9ba6c44e', appearance: "transparent", class: CSS.enableEditingButton, disabled: this.disabled, iconStart: "pencil", kind: "neutral", label: this.messages.enableEditing, onClick: this.enableEditingHandler, ref: (el) => (this.enableEditingButton = el), scale: this.scale, style: {
+        return (h(InteractiveContainer, { key: '2b20c0c889e02709ab25fed13afe8cc03a0ad5a5', disabled: this.disabled }, h("div", { key: '31a6ae689e94a21c34718d848e43e7e848c82c33', class: CSS.wrapper, onClick: this.enableEditingHandler, onKeyDown: this.escapeKeyHandler }, h("div", { key: '21d48b4543d362c8253987aa04aa88b91dcbebd2', class: CSS.inputWrapper }, h("slot", { key: '1b0e62cefa8959014d776a55e882d89c1038d72e' })), h("div", { key: 'c10288b692a896c7d4a924fb3a99d5d1a0b8b655', class: CSS.controlsWrapper }, h("calcite-button", { key: '7b8312b37c3e1aa9e07b6cbad9f116c0e3b63438', appearance: "transparent", class: CSS.enableEditingButton, disabled: this.disabled, iconStart: "pencil", kind: "neutral", label: this.messages.enableEditing, onClick: this.enableEditingHandler, ref: (el) => (this.enableEditingButton = el), scale: this.scale, style: {
                 opacity: this.editingEnabled ? "0" : "1",
                 width: this.editingEnabled ? "0" : "inherit",
             }, type: "button" }), this.shouldShowControls && [
-            h("div", { key: 'd9eb2bfc9affd4c7fb6510448476c5b83399a2ca', class: CSS.cancelEditingButtonWrapper }, h("calcite-button", { key: '03243abe113f8e441e05f87feef164215082feda', appearance: "transparent", class: CSS.cancelEditingButton, disabled: this.disabled, iconStart: "x", kind: "neutral", label: this.messages.cancelEditing, onClick: this.cancelEditingHandler, ref: (el) => (this.cancelEditingButton = el), scale: this.scale, type: "button" })),
-            h("calcite-button", { key: '92bdc973c915fbf4980a1fb01ffd4cf9a9f41557', appearance: "solid", class: CSS.confirmChangesButton, disabled: this.disabled, iconStart: "check", kind: "brand", label: this.messages.confirmChanges, loading: this.loading, onClick: this.confirmChangesHandler, ref: (el) => (this.confirmEditingButton = el), scale: this.scale, type: "button" }),
+            h("div", { key: '96dc366959dff0b01f2b6720d04137d978b480ba', class: CSS.cancelEditingButtonWrapper }, h("calcite-button", { key: '74263d601b8f410497061c2a61ad9a7cc0950651', appearance: "transparent", class: CSS.cancelEditingButton, disabled: this.disabled, iconStart: "x", kind: "neutral", label: this.messages.cancelEditing, onClick: this.cancelEditingHandler, ref: (el) => (this.cancelEditingButton = el), scale: this.scale, type: "button" })),
+            h("calcite-button", { key: 'b6b0853810cb99eb88c908487078cc74e05f48bc', appearance: "solid", class: CSS.confirmChangesButton, disabled: this.disabled, iconStart: "check", kind: "brand", label: this.messages.confirmChanges, loading: this.loading, onClick: this.confirmChangesHandler, ref: (el) => (this.confirmEditingButton = el), scale: this.scale, type: "button" }),
         ]))));
     }
     //--------------------------------------------------------------------------

package/dist/components/calcite-input-time-picker.js

@@ -5,8 +5,7 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { s as submitForm, c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form.js';
-import { g as guid } from './guid.js';
-import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive.js';
+import { u as updateHostInteraction, I as InteractiveContainer } from './interactive.js';
 import { n as numberKeys } from './key.js';
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label.js';
 import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable.js';
@@ -682,7 +681,7 @@ var u = function u(formatStr, formats) {
   });
 };
 
-var formattingTokens = /(\[[^[]*\])|([-_:/.,()\s]+)|(A|a|YYYY|YY?|MM?M?M?|Do|DD?|hh?|HH?|mm?|ss?|S{1,3}|z|ZZ?)/g;
+var formattingTokens = /(\[[^[]*\])|([-_:/.,()\s]+)|(A|a|Q|YYYY|YY?|ww?|MM?M?M?|Do|DD?|hh?|HH?|mm?|ss?|S{1,3}|z|ZZ?)/g;
 var match1 = /\d/; // 0 - 9
 
 var match2 = /\d\d/; // 00 - 99
@@ -757,6 +756,9 @@ var expressions = {
   a: [matchWord, function (input) {
     this.afternoon = meridiemMatch(input, true);
   }],
+  Q: [match1, function (input) {
+    this.month = (input - 1) * 3 + 1;
+  }],
   S: [match1, function (input) {
     this.milliseconds = +input * 100;
   }],
@@ -791,6 +793,8 @@ var expressions = {
       }
     }
   }],
+  w: [match1to2, addInput('week')],
+  ww: [match2, addInput('week')],
   M: [match1to2, addInput('month')],
   MM: [match2, addInput('month')],
   MMM: [matchWord, function (input) {
@@ -892,7 +896,7 @@ function makeParser(format) {
   };
 }
 
-var parseFormattedInput = function parseFormattedInput(input, format, utc) {
+var parseFormattedInput = function parseFormattedInput(input, format, utc, dayjs) {
   try {
     if (['x', 'X'].indexOf(format) > -1) return new Date((format === 'X' ? 1000 : 1) * input);
     var parser = makeParser(format);
@@ -905,7 +909,8 @@ var parseFormattedInput = function parseFormattedInput(input, format, utc) {
         minutes = _parser2.minutes,
         seconds = _parser2.seconds,
         milliseconds = _parser2.milliseconds,
-        zone = _parser2.zone;
+        zone = _parser2.zone,
+        week = _parser2.week;
 
     var now = new Date();
     var d = day || (!year && !month ? now.getDate() : 1);
@@ -929,7 +934,14 @@ var parseFormattedInput = function parseFormattedInput(input, format, utc) {
       return new Date(Date.UTC(y, M, d, h, m, s, ms));
     }
 
-    return new Date(y, M, d, h, m, s, ms);
+    var newDate;
+    newDate = new Date(y, M, d, h, m, s, ms);
+
+    if (week) {
+      newDate = dayjs(newDate).week(week).toDate();
+    }
+
+    return newDate;
   } catch (e) {
     return new Date(''); // Invalid Date
   }
@@ -968,7 +980,7 @@ const customParseFormat = (function (o, C, d) {
         locale = d.Ls[pl];
       }
 
-      this.$d = parseFormattedInput(date, format, utc);
+      this.$d = parseFormattedInput(date, format, utc, d);
       this.init();
       if (pl && pl !== true) this.$L = this.locale(pl).$L; // use != to treat
       // input number 1410715640579 and format string '1410715640579' equal
@@ -1192,7 +1204,7 @@ const updateLocale = (function (option, Dayjs, dayjs) {
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.2
+ * v2.13.0
  */
 const CSS = {
     toggleIcon: "toggle-icon",
@@ -1273,10 +1285,8 @@ const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class InputTimePicker e
         this.calciteInputTimePickerClose = createEvent(this, "calciteInputTimePickerClose", 6);
         this.calciteInputTimePickerOpen = createEvent(this, "calciteInputTimePickerOpen", 6);
         this.focusOnOpen = false;
-        this.dialogId = `time-picker-dialog--${guid()}`;
         /** whether the value of the input was changed as a result of user typing or not */
         this.userChangedValue = false;
-        this.referenceElementId = `input-time-picker-${guid()}`;
         //--------------------------------------------------------------------------
         //
         //  Event Listeners
@@ -1419,6 +1429,7 @@ const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class InputTimePicker e
         };
         this.setCalcitePopoverEl = (el) => {
             this.popoverEl = el;
+            this.openHandler();
         };
         this.setInputEl = (el) => {
             this.calciteInputEl = el;
@@ -1524,6 +1535,7 @@ const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class InputTimePicker e
         this.placement = "auto";
         this.step = 60;
         this.value = null;
+        this.calciteInputEl = undefined;
         this.defaultMessages = undefined;
         this.effectiveLocale = "";
     }
@@ -1794,7 +1806,6 @@ const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class InputTimePicker e
     //
     //--------------------------------------------------------------------------
     connectedCallback() {
-        connectInteractive(this);
         connectLocalized(this);
         if (isValidTime(this.value)) {
             this.setValueDirectly(this.value);
@@ -1821,10 +1832,8 @@ const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class InputTimePicker e
                 fractionalSecondDigits: decimalPlaces(this.step),
             }));
         }
-        this.openHandler();
     }
     disconnectedCallback() {
-        disconnectInteractive(this);
         disconnectLabel(this);
         disconnectForm(this);
         disconnectLocalized(this);
@@ -1840,11 +1849,11 @@ const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class InputTimePicker e
     //
     // --------------------------------------------------------------------------
     render() {
-        const { disabled, messages, readOnly, dialogId } = this;
-        return (h(Host, { key: '5bf59228db214a262663f204d9633c77b969dcc2', onBlur: this.hostBlurHandler, onKeyDown: this.keyDownHandler }, h(InteractiveContainer, { key: '0ba712e725695bfae5c3d2bcfe151f5b3abe0baa', disabled: this.disabled }, h("div", { key: 'ac841ee97c7e970353494103f22ad596d7e8d080', class: "input-wrapper", onClick: this.onInputWrapperClick }, h("calcite-input-text", { key: 'd5e3ee19763195c57b75f7001301d9233d011c94', "aria-autocomplete": "none", "aria-errormessage": IDS.validationMessage, "aria-haspopup": "dialog", "aria-invalid": toAriaBoolean(this.status === "invalid"), disabled: disabled, icon: "clock", id: this.referenceElementId, label: getLabelText(this), lang: this.effectiveLocale, onCalciteInputTextInput: this.calciteInternalInputInputHandler, onCalciteInternalInputTextFocus: this.calciteInternalInputFocusHandler, readOnly: readOnly, ref: this.setInputEl, role: "combobox", scale: this.scale, status: this.status }), !this.readOnly && this.renderToggleIcon(this.open)), h("calcite-popover", { key: 'c86106dcc1410ec7be8fdf4ced44a00a2bf3aa93', focusTrapDisabled: true, id: dialogId, label: messages.chooseTime, lang: this.effectiveLocale, onCalcitePopoverBeforeClose: this.popoverBeforeCloseHandler, onCalcitePopoverBeforeOpen: this.popoverBeforeOpenHandler, onCalcitePopoverClose: this.popoverCloseHandler, onCalcitePopoverOpen: this.popoverOpenHandler, overlayPositioning: this.overlayPositioning, placement: this.placement, ref: this.setCalcitePopoverEl, referenceElement: this.referenceElementId, triggerDisabled: true }, h("calcite-time-picker", { key: '85d96849fc7e3859a72d2e738a67307d16faadb2', lang: this.effectiveLocale, messageOverrides: this.messageOverrides, numberingSystem: this.numberingSystem, onCalciteInternalTimePickerChange: this.timePickerChangeHandler, ref: this.setCalciteTimePickerEl, scale: this.scale, step: this.step, tabIndex: this.open ? undefined : -1, value: this.value })), h(HiddenFormInputSlot, { key: 'd63640ad5ab2acae003d02c7e22938e1875004cf', component: this }), this.validationMessage && this.status === "invalid" ? (h(Validation, { icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
+        const { disabled, messages, readOnly } = this;
+        return (h(Host, { key: '7d5021d0867938190a71ecc258687504668aa919', onBlur: this.hostBlurHandler, onKeyDown: this.keyDownHandler }, h(InteractiveContainer, { key: '3df503ada54e8259f0e4e7013191942e4bc17020', disabled: this.disabled }, h("div", { key: '748dd86d90db29b4baaa1af42839b3b234e54d0b', class: "input-wrapper", onClick: this.onInputWrapperClick }, h("calcite-input-text", { key: 'af404dc58cb00afb62ecef587db4426bfc7b3495', "aria-autocomplete": "none", "aria-errormessage": IDS.validationMessage, "aria-haspopup": "dialog", "aria-invalid": toAriaBoolean(this.status === "invalid"), disabled: disabled, icon: "clock", label: getLabelText(this), lang: this.effectiveLocale, onCalciteInputTextInput: this.calciteInternalInputInputHandler, onCalciteInternalInputTextFocus: this.calciteInternalInputFocusHandler, readOnly: readOnly, ref: this.setInputEl, role: "combobox", scale: this.scale, status: this.status }, !this.readOnly && this.renderToggleIcon(this.open))), h("calcite-popover", { key: '93f1e3a580ad988617e4959a2e379f03a5128bf0', autoClose: true, focusTrapDisabled: true, label: messages.chooseTime, lang: this.effectiveLocale, onCalcitePopoverBeforeClose: this.popoverBeforeCloseHandler, onCalcitePopoverBeforeOpen: this.popoverBeforeOpenHandler, onCalcitePopoverClose: this.popoverCloseHandler, onCalcitePopoverOpen: this.popoverOpenHandler, overlayPositioning: this.overlayPositioning, placement: this.placement, ref: this.setCalcitePopoverEl, referenceElement: this.calciteInputEl, triggerDisabled: true }, h("calcite-time-picker", { key: '264696f0f4187f69999b4d751ffbe02759214e78', lang: this.effectiveLocale, messageOverrides: this.messageOverrides, numberingSystem: this.numberingSystem, onCalciteInternalTimePickerChange: this.timePickerChangeHandler, ref: this.setCalciteTimePickerEl, scale: this.scale, step: this.step, tabIndex: this.open ? undefined : -1, value: this.value })), h(HiddenFormInputSlot, { key: '73e605e12a6de2c5480e392cbfbea09025243111', component: this }), this.validationMessage && this.status === "invalid" ? (h(Validation, { icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
     }
     renderToggleIcon(open) {
-        return (h("span", { class: CSS.toggleIcon }, h("calcite-icon", { icon: open ? "chevron-up" : "chevron-down", scale: getIconScale(this.scale) })));
+        return (h("span", { class: CSS.toggleIcon, slot: "action" }, h("calcite-icon", { icon: open ? "chevron-up" : "chevron-down", scale: getIconScale(this.scale) })));
     }
     static get delegatesFocus() { return true; }
     static get assetsDirs() { return ["assets"]; }
@@ -1883,6 +1892,7 @@ const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class InputTimePicker e
         "placement": [513],
         "step": [2],
         "value": [1025],
+        "calciteInputEl": [32],
         "defaultMessages": [32],
         "effectiveLocale": [32],
         "setFocus": [64],

package/dist/components/calcite-input-time-zone.js

@@ -19,7 +19,7 @@ import { d as defineCustomElement$2 } from './icon.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.2
+ * v2.13.0
  */
 const CSS = {
     offset: "offset",
@@ -28,24 +28,9 @@ const CSS = {
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.2
+ * v2.13.0
  */
 const hourToMinutes = 60;
-const timeZoneNameBlockList = [
-    "CET",
-    "CST6CDT",
-    "EET",
-    "EST",
-    "EST5EDT",
-    "Factory",
-    "HST",
-    "MET",
-    "MST",
-    "MST7MDT",
-    "PST8PDT",
-    "UTC",
-    "WET",
-];
 function timeZoneOffsetToDecimal(shortOffsetTimeZoneName) {
     const minusSign = "−";
     const hyphen = "-";
@@ -72,6 +57,13 @@ function getUserTimeZoneName() {
     const dateFormatter = new Intl.DateTimeFormat();
     return dateFormatter.resolvedOptions().timeZone;
 }
+async function getNormalizer(mode) {
+    if (mode === "offset") {
+        return (timeZone) => timeZone;
+    }
+    const { normalize } = await import('./time-zones.js');
+    return normalize;
+}
 async function createTimeZoneItems(locale, messages, mode, referenceDate, standardTime) {
     if (mode === "name") {
         const { groupByName } = await import('./index4.js');
@@ -83,7 +75,9 @@ async function createTimeZoneItems(locale, messages, mode, referenceDate, standa
             return {
                 label,
                 value,
-                filterValue: timeZone,
+                metadata: {
+                    filterValue: timeZone,
+                },
             };
         })
             .filter((group) => !!group)
@@ -97,30 +91,52 @@ async function createTimeZoneItems(locale, messages, mode, referenceDate, standa
                 : "en-GB";
     const referenceDateInMs = referenceDate.getTime();
     if (mode === "region") {
-        const [{ groupByRegion }, { getCountry }] = await Promise.all([
+        const [{ groupByRegion }, { getCountry, global: globalLabel }] = await Promise.all([
             import('./index5.js'),
-            import('./country.js'),
+            import('./region.js'),
         ]);
         const groups = await groupByRegion();
         return groups
             .map(({ label: region, tzs }) => {
+            tzs.sort((timeZoneA, timeZoneB) => {
+                const labeledTimeZoneA = getTimeZoneLabel(timeZoneA, messages);
+                const labeledTimeZoneB = getTimeZoneLabel(timeZoneB, messages);
+                const gmtTimeZoneString = "Etc/GMT";
+                if (timeZoneA.startsWith(gmtTimeZoneString) && timeZoneB.startsWith(gmtTimeZoneString)) {
+                    // we use the IANA timezone for simpler and consistent sorting across locales
+                    const offsetStringA = timeZoneA.substring(gmtTimeZoneString.length);
+                    const offsetStringB = timeZoneB.substring(gmtTimeZoneString.length);
+                    const offsetA = offsetStringA === "" ? 0 : parseInt(offsetStringA);
+                    const offsetB = offsetStringB === "" ? 0 : parseInt(offsetStringB);
+                    return offsetB - offsetA;
+                }
+                return labeledTimeZoneA.localeCompare(labeledTimeZoneB);
+            });
             return {
-                label: region,
+                label: getMessageOrKeyFallback(messages, region),
                 items: tzs.map((timeZone) => {
                     const decimalOffset = timeZoneOffsetToDecimal(getTimeZoneShortOffset(timeZone, effectiveLocale, referenceDateInMs));
+                    const label = getTimeZoneLabel(timeZone, messages);
+                    const filterValue = region === globalLabel
+                        ? // we rely on the label for search since GMT items have their signs inverted (see https://en.wikipedia.org/wiki/Tz_database#Area)
+                            // in addition to the label we also add "Global" and "Etc" to allow searching for these items
+                            `${getTimeZoneLabel(globalLabel, messages)} Etc`
+                        : toUserFriendlyName(timeZone);
+                    const countryCode = getCountry(timeZone);
+                    const country = getMessageOrKeyFallback(messages, countryCode);
                     return {
-                        label: getTimeZoneLabel(timeZone, messages),
+                        label,
                         value: timeZone,
-                        filterValue: toUserFriendlyName(timeZone),
                         metadata: {
+                            country: country === label ? undefined : country,
+                            filterValue,
                             offset: decimalOffset,
-                            country: getCountry(timeZone),
                         },
                     };
                 }),
             };
         })
-            .sort((groupA, groupB) => groupA.label.localeCompare(groupB.label));
+            .sort((groupA, groupB) => groupA.label === globalLabel ? -1 : groupB.label === globalLabel ? 1 : groupA.label.localeCompare(groupB.label));
     }
     const [{ groupByOffset }, { DateEngine }] = await Promise.all([
         import('./index6.js'),
@@ -132,17 +148,18 @@ async function createTimeZoneItems(locale, messages, mode, referenceDate, standa
         startDate: new Date(referenceDateInMs).toISOString(),
     });
     const listFormatter = new Intl.ListFormat(locale, { style: "long", type: "conjunction" });
+    const offsetTimeZoneNameBlockList = ["Factory", "Etc/UTC"];
     // we remove blocked entries from tzs and adjust label indices accordingly
     groups.forEach((group) => {
         const indexOffsets = [];
         let removedSoFar = 0;
         group.tzs.forEach((tz, index) => {
-            if (timeZoneNameBlockList.includes(tz)) {
+            if (offsetTimeZoneNameBlockList.includes(tz)) {
                 removedSoFar++;
             }
             indexOffsets[index] = removedSoFar;
         });
-        group.tzs = group.tzs.filter((tz) => !timeZoneNameBlockList.includes(tz));
+        group.tzs = group.tzs.filter((tz) => !offsetTimeZoneNameBlockList.includes(tz));
         group.labelTzIdx = group.labelTzIdx
             .map((index) => index - indexOffsets[index])
             .filter((index) => index >= 0 && index < group.tzs.length);
@@ -157,7 +174,9 @@ async function createTimeZoneItems(locale, messages, mode, referenceDate, standa
         return {
             label,
             value,
-            filterValue: tzs.map((tz) => toUserFriendlyName(tz)),
+            metadata: {
+                filterValue: tzs.map((tz) => toUserFriendlyName(tz)),
+            },
         };
     })
         .filter((group) => !!group)
@@ -247,7 +266,7 @@ const InputTimeZone = /*@__PURE__*/ proxyCustomElement(class InputTimeZone exten
                 this.calciteInputTimeZoneChange.emit();
                 return;
             }
-            const selected = this.findTimeZoneItemByLabel(selectedItem.textLabel);
+            const selected = this.findTimeZoneItemByLabel(selectedItem.getAttribute("data-label"));
             const selectedValue = `${selected.value}`;
             if (this.value === selectedValue && selected.label === this.selectedTimeZoneItem.label) {
                 return;
@@ -305,7 +324,11 @@ const InputTimeZone = /*@__PURE__*/ proxyCustomElement(class InputTimeZone exten
         /* wired up by t9n util */
     }
     handleTimeZoneItemPropsChange() {
-        this.updateTimeZoneItemsAndSelection();
+        if (!this.timeZoneItems) {
+            return;
+        }
+        this.updateTimeZoneItems();
+        this.updateTimeZoneSelection();
     }
     openChanged() {
         // we set the property instead of the attribute to ensure open/close events are emitted properly
@@ -313,9 +336,14 @@ const InputTimeZone = /*@__PURE__*/ proxyCustomElement(class InputTimeZone exten
     }
     handleValueChange(value, oldValue) {
         value = this.normalizeValue(value);
-        if (!value && this.clearable) {
-            this.value = value;
-            this.selectedTimeZoneItem = null;
+        if (!value) {
+            if (this.clearable) {
+                this.value = value;
+                this.selectedTimeZoneItem = null;
+                return;
+            }
+            this.value = oldValue;
+            this.selectedTimeZoneItem = this.findTimeZoneItem(oldValue);
             return;
         }
         const timeZoneItem = this.findTimeZoneItem(value);
@@ -356,9 +384,10 @@ const InputTimeZone = /*@__PURE__*/ proxyCustomElement(class InputTimeZone exten
             return;
         }
         const { label, metadata } = this.selectedTimeZoneItem;
-        this.comboboxEl.selectedItems[0].textLabel = open
-            ? label
-            : getSelectedRegionTimeZoneLabel(label, metadata.country, this.messages);
+        this.comboboxEl.selectedItems[0].textLabel =
+            !metadata.country || open
+                ? label
+                : getSelectedRegionTimeZoneLabel(label, metadata.country, this.messages);
     }
     findTimeZoneItem(value) {
         return findTimeZoneItemByProp(this.timeZoneItems, "value", value);
@@ -366,8 +395,10 @@ const InputTimeZone = /*@__PURE__*/ proxyCustomElement(class InputTimeZone exten
     findTimeZoneItemByLabel(label) {
         return findTimeZoneItemByProp(this.timeZoneItems, "label", label);
     }
-    async updateTimeZoneItemsAndSelection() {
+    async updateTimeZoneItems() {
         this.timeZoneItems = await this.createTimeZoneItems();
+    }
+    async updateTimeZoneSelection() {
         if (this.value === "" && this.clearable) {
             this.selectedTimeZoneItem = null;
             return;
@@ -403,31 +434,34 @@ const InputTimeZone = /*@__PURE__*/ proxyCustomElement(class InputTimeZone exten
         disconnectMessages(this);
     }
     normalizeValue(value) {
-        return value === null ? "" : value;
+        value = value === null ? "" : value;
+        return value ? this.normalizer(value) : value;
     }
     async componentWillLoad() {
         setUpLoadableComponent(this);
-        await setUpMessages(this);
+        const [, normalizer] = await Promise.all([setUpMessages(this), getNormalizer(this.mode)]);
+        this.normalizer = normalizer;
+        await this.updateTimeZoneItems();
         this.value = this.normalizeValue(this.value);
-        await this.updateTimeZoneItemsAndSelection();
+        await this.updateTimeZoneSelection();
         const selectedValue = this.selectedTimeZoneItem ? `${this.selectedTimeZoneItem.value}` : null;
         afterConnectDefaultValueSet(this, selectedValue);
         this.value = selectedValue;
     }
     componentDidLoad() {
         setComponentLoaded(this);
-        this.overrideSelectedLabelForRegion(this.open);
         this.openChanged();
     }
     componentDidRender() {
         updateHostInteraction(this);
+        this.overrideSelectedLabelForRegion(this.open);
     }
     render() {
-        return (h(Host, { key: 'f6514d911e175218d13e8b10850d32c8e1307d21' }, h(InteractiveContainer, { key: '02472ff66a2bae4e70435d22a71a201aa68b2eb3', disabled: this.disabled }, h("calcite-combobox", { key: '418552fd458195d30c0ad5f99bf61ee793c1207e', clearDisabled: !this.clearable, disabled: this.disabled, label: this.messages.chooseTimeZone, lang: this.effectiveLocale, maxItems: this.maxItems, onCalciteComboboxBeforeClose: this.onComboboxBeforeClose, onCalciteComboboxBeforeOpen: this.onComboboxBeforeOpen, onCalciteComboboxChange: this.onComboboxChange, onCalciteComboboxClose: this.onComboboxClose, onCalciteComboboxOpen: this.onComboboxOpen, overlayPositioning: this.overlayPositioning, placeholder: this.mode === "name"
+        return (h(Host, { key: 'b94fb2d93cdcaf0c44bbd2a0c7deaf59701078bf' }, h(InteractiveContainer, { key: '45246bbab441e9daf0e372832e74d7660039c770', disabled: this.disabled }, h("calcite-combobox", { key: '294e44d8ab01079651c417f7808348e584f135b7', clearDisabled: !this.clearable, disabled: this.disabled, label: this.messages.chooseTimeZone, lang: this.effectiveLocale, maxItems: this.maxItems, onCalciteComboboxBeforeClose: this.onComboboxBeforeClose, onCalciteComboboxBeforeOpen: this.onComboboxBeforeOpen, onCalciteComboboxChange: this.onComboboxChange, onCalciteComboboxClose: this.onComboboxClose, onCalciteComboboxOpen: this.onComboboxOpen, overlayPositioning: this.overlayPositioning, placeholder: this.mode === "name"
                 ? this.messages.namePlaceholder
                 : this.mode === "offset"
                     ? this.messages.offsetPlaceholder
-                    : this.messages.regionPlaceholder, placeholderIcon: "search", readOnly: this.readOnly, ref: this.setComboboxRef, scale: this.scale, selectionMode: this.clearable ? "single" : "single-persist", status: this.status, "validation-icon": this.validationIcon, "validation-message": this.validationMessage }, this.renderItems()), h(HiddenFormInputSlot, { key: '4b67af71a4c5f676a76b5ad43639e8c5828992bd', component: this }))));
+                    : this.messages.regionPlaceholder, placeholderIcon: "search", readOnly: this.readOnly, ref: this.setComboboxRef, scale: this.scale, selectionMode: this.clearable ? "single" : "single-persist", status: this.status, "validation-icon": this.validationIcon, "validation-message": this.validationMessage }, this.renderItems()), h(HiddenFormInputSlot, { key: '0b7a0694166f1d5b36b780d3436dad15d466bc3c', component: this }))));
     }
     renderItems() {
         if (this.mode === "region") {
@@ -435,15 +469,15 @@ const InputTimeZone = /*@__PURE__*/ proxyCustomElement(class InputTimeZone exten
         }
         return this.timeZoneItems.map((group) => {
             const selected = this.selectedTimeZoneItem === group;
-            const { label, value } = group;
-            return (h("calcite-combobox-item", { "data-value": value, key: label, selected: selected, textLabel: label, value: `${group.filterValue}` }));
+            const { label, metadata, value } = group;
+            return (h("calcite-combobox-item", { "data-label": label, key: label, metadata: metadata, selected: selected, textLabel: label, value: value }));
         });
     }
     renderRegionItems() {
-        return this.timeZoneItems.flatMap(({ label, items }) => (h("calcite-combobox-item-group", { key: label, label: getMessageOrKeyFallback(this.messages, label) }, items.map((item) => {
+        return this.timeZoneItems.flatMap(({ label, items }) => (h("calcite-combobox-item-group", { key: label, label: label }, items.map((item) => {
             const selected = this.selectedTimeZoneItem === item;
-            const { label, value } = item;
-            return (h("calcite-combobox-item", { "data-value": value, description: getMessageOrKeyFallback(this.messages, item.metadata.country), key: label, metadata: item.metadata, selected: selected, textLabel: label, value: `${item.filterValue}` }, h("span", { class: CSS.offset, slot: "content-end" }, item.metadata.offset)));
+            const { label, metadata, value } = item;
+            return (h("calcite-combobox-item", { "data-label": label, description: metadata.country, key: label, metadata: metadata, selected: selected, textLabel: label, value: value }, h("span", { class: CSS.offset, slot: "content-end" }, metadata.offset)));
         }))));
     }
     static get delegatesFocus() { return true; }

package/dist/components/calcite-list-item-group.js

@@ -4,13 +4,13 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive.js';
+import { u as updateHostInteraction, I as InteractiveContainer } from './interactive.js';
 import { M as MAX_COLUMNS } from './resources4.js';
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.2
+ * v2.13.0
  */
 const CSS = {
     container: "container",
@@ -43,15 +43,9 @@ const ListItemGroup = /*@__PURE__*/ proxyCustomElement(class ListItemGroup exten
     //  Lifecycle
     //
     // --------------------------------------------------------------------------
-    connectedCallback() {
-        connectInteractive(this);
-    }
     componentDidRender() {
         updateHostInteraction(this);
     }
-    disconnectedCallback() {
-        disconnectInteractive(this);
-    }
     // --------------------------------------------------------------------------
     //
     //  Render Methods
@@ -59,7 +53,7 @@ const ListItemGroup = /*@__PURE__*/ proxyCustomElement(class ListItemGroup exten
     // --------------------------------------------------------------------------
     render() {
         const { disabled, heading } = this;
-        return (h(Host, { key: '85b83e04247b94aa14924a0f835a1a998dea8a09' }, h(InteractiveContainer, { key: 'd07a3dde8836dad2a905b4621fae3c6c2c3c3966', disabled: disabled }, h("tr", { key: 'e0371d077ffca503468e60ea4906391eed32ae85', class: CSS.container }, h("td", { key: '41a9ea1a58f0cd4b6daabee4a4b628184aff0cae', class: CSS.heading, colSpan: MAX_COLUMNS }, heading)), h("slot", { key: '74dbc9667e9ac7b420a4584b80add4692b143a14', onSlotchange: this.handleDefaultSlotChange }))));
+        return (h(Host, { key: 'e1e0304c3d4fe02909fd0075de2e4f5ef806be39' }, h(InteractiveContainer, { key: '5fb0861fb58de90808e98b7061d3c906c822203c', disabled: disabled }, h("tr", { key: 'c77af78f937c3135601df2c4574b858662d5fcdb', class: CSS.container }, h("td", { key: 'f1ae6b9e09e78f87b814287f8eaeb0a105575c7a', class: CSS.heading, colSpan: MAX_COLUMNS }, heading)), h("slot", { key: '7346d5d774173403910eddd35bf700ccd1437c4f', onSlotchange: this.handleDefaultSlotChange }))));
     }
     get el() { return this; }
     static get style() { return CalciteListItemGroupStyle0; }

package/dist/components/calcite-menu-item.js

@@ -4,7 +4,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment, Host } from '@stencil/core/internal/client';
-import { h as slotChangeGetAssignedElements, g as getElementDir } from './dom.js';
+import { h as slotChangeGetAssignedElements, g as getElementDir, t as toAriaBoolean } from './dom.js';
 import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable.js';
 import { C as CSS_UTILITY } from './resources.js';
 import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n.js';
@@ -17,7 +17,7 @@ import { d as defineCustomElement$2 } from './menu.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.2
+ * v2.13.0
  */
 const CSS = {
     container: "container",
@@ -267,10 +267,10 @@ const CalciteMenuItem$1 = /*@__PURE__*/ proxyCustomElement(class CalciteMenuItem
     }
     render() {
         const dir = getElementDir(this.el);
-        return (h(Host, { key: 'bcce69d3d73b19ee5cefd5fa318ceab1c56783ca', onBlur: this.blurHandler, onFocus: this.focusHandler }, h("li", { key: 'cb0c08894182a55dc48d1a584d38bb9f3eac0e8b', class: {
+        return (h(Host, { key: 'e57c6579d3287593d663a8586cfd25c90246b1a4', onBlur: this.blurHandler, onFocus: this.focusHandler }, h("li", { key: '954549390e447ec43ccf681949095d1393d9068a', class: {
                 [CSS.container]: true,
                 [CSS.isParentVertical]: this.topLevelMenuLayout === "vertical",
-            }, role: "none" }, h("div", { key: '5ce74539a6937fbfa3035495a20531226add6781', class: CSS.itemContent }, h("a", { key: '194e81581df9f9e9b2708862e8875f0d8b2f5350', "aria-current": this.isFocused ? "page" : false, "aria-expanded": this.open, "aria-haspopup": this.hasSubmenu, "aria-label": this.label, class: { [CSS.layoutVertical]: this.layout === "vertical", [CSS.content]: true }, href: this.href, onClick: this.clickHandler, onKeyDown: this.keyDownHandler, ref: (el) => (this.anchorEl = el), rel: this.rel, role: "menuitem", tabIndex: this.isTopLevelItem ? 0 : -1, target: this.target }, this.renderItemContent(dir)), this.href && this.hasSubmenu ? this.renderDropdownAction(dir) : null), this.renderSubmenuItems(dir))));
+            }, role: "none" }, h("div", { key: '6130156128f303bb225007e337fae78385614cf5', class: CSS.itemContent }, h("a", { key: '9103ba8f3683feb1eb2301f05412b434c39ec3d3', "aria-current": this.isFocused ? "page" : false, "aria-expanded": toAriaBoolean(this.open), "aria-haspopup": toAriaBoolean(this.hasSubmenu), "aria-label": this.label, class: { [CSS.layoutVertical]: this.layout === "vertical", [CSS.content]: true }, href: this.href, onClick: this.clickHandler, onKeyDown: this.keyDownHandler, ref: (el) => (this.anchorEl = el), rel: this.rel, role: "menuitem", tabIndex: this.isTopLevelItem ? 0 : -1, target: this.target }, this.renderItemContent(dir)), this.href && this.hasSubmenu ? this.renderDropdownAction(dir) : null), this.renderSubmenuItems(dir))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return this; }

package/dist/components/calcite-meter.js

@@ -13,7 +13,7 @@ import { c as createObserver } from './observers.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.2
+ * v2.13.0
  */
 const CSS = {
     container: "container",
@@ -292,7 +292,7 @@ const Meter = /*@__PURE__*/ proxyCustomElement(class Meter extends HTMLElement {
             : unitLabel
                 ? textUnitLabel
                 : undefined;
-        return (h(Host, { key: '63487d7e530d66178ca535feed2ff2c149fef627' }, h("div", { key: '98b299ee370f14bdb266e69d9b9c8d303b580de9', "aria-label": label, "aria-valuemax": rangeLabelType === "percent" ? maxPercent : max, "aria-valuemin": rangeLabelType === "percent" ? minPercent : min, "aria-valuenow": valueLabelType === "percent" ? currentPercent : value, "aria-valuetext": valueText, class: {
+        return (h(Host, { key: '66acf0e583d412615e49ef652baf9bfbb97dab39' }, h("div", { key: 'eea0363c803ea0f4a1e2650aa543a4a0f2fe095c', "aria-label": label, "aria-valuemax": rangeLabelType === "percent" ? maxPercent : max, "aria-valuemin": rangeLabelType === "percent" ? minPercent : min, "aria-valuenow": valueLabelType === "percent" ? currentPercent : value, "aria-valuetext": valueText, class: {
                 [CSS.container]: true,
                 [CSS.stepsVisible]: rangeLabels,
                 [CSS.valueVisible]: valueLabel,