@esri/solutions-components 0.10.10 → 0.10.12

package/dist/components/calcite-fab.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.11.1
+ * v2.12.0
  */
 const CSS = {
     button: "button",
@@ -80,7 +80,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: '0466fa59a357502db1c407ffd8008f3620216bbe', disabled: disabled }, h("calcite-button", { key: 'd7cc0cf746d373240a3fb2274d3eeb6283bef052', 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: '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) => {
                 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

@@ -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.11.1
+ * v2.12.0
  */
 const CSS = {
     wrapper: "wrapper",
@@ -171,12 +171,12 @@ const InlineEditable = /*@__PURE__*/ proxyCustomElement(class InlineEditable ext
         updateHostInteraction(this);
     }
     render() {
-        return (h(InteractiveContainer, { key: 'd93607e37bf516e5fa3726e8e4715c64113b771c', disabled: this.disabled }, h("div", { key: '5b0b9dae803d012be8a1b716659f424e9f8100f3', class: CSS.wrapper, onClick: this.enableEditingHandler, onKeyDown: this.escapeKeyHandler }, h("div", { key: '3036a2f71c798fb649867b435702d28fcc56b93e', class: CSS.inputWrapper }, h("slot", { key: 'def90e123156ccc1bfd762ab352bca6b90324f03' })), h("div", { key: '090a1a87210cbfafd5e2e45ab09805f2523f46ac', class: CSS.controlsWrapper }, h("calcite-button", { key: 'c45936623bed1a6a10e3fb72e15dd3bd632cf8f1', 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: '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: {
                 opacity: this.editingEnabled ? "0" : "1",
                 width: this.editingEnabled ? "0" : "inherit",
             }, type: "button" }), this.shouldShowControls && [
-            h("div", { key: 'da8516b462c97bc00e261c6e6959a26bdb8c5312', class: CSS.cancelEditingButtonWrapper }, h("calcite-button", { key: 'd19dba3fad6d1933a212e331aeb1b51c2b480397', 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: 'e487af0adfa1ea3da2cd0ec9f39a88fe19c682ed', 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: '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" }),
         ]))));
     }
     //--------------------------------------------------------------------------

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

@@ -11,14 +11,13 @@ 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';
 import { n as numberStringFormatter, g as getSupportedLocale, c as connectLocalized, d as disconnectLocalized } from './locale2.js';
-import { d as deactivateFocusTrap, a as activateFocusTrap, c as connectFocusTrap } from './focusTrapComponent.js';
+import { a as activateFocusTrap, d as deactivateFocusTrap, c as connectFocusTrap } from './focusTrapComponent.js';
 import { d as defineCustomElement$2, l as localizeTimeString, t as toISOTimeString, i as isValidTime, f as formatTimeString, a as formatTimePart } from './time-picker.js';
 import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n.js';
-import { o as onToggleOpenCloseComponent } from './openCloseComponent.js';
 import { d as decimalPlaces } from './math.js';
 import { g as getIconScale } from './component.js';
 import { V as Validation } from './Validation.js';
-import { k as focusFirstTabbable } from './dom.js';
+import { k as focusFirstTabbable, t as toAriaBoolean } from './dom.js';
 import { s as syncHiddenFormInput } from './input2.js';
 import { d as defineCustomElement$8 } from './action.js';
 import { d as defineCustomElement$7 } from './icon.js';
@@ -1193,13 +1192,16 @@ 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.11.1
+ * v2.12.0
  */
 const CSS = {
     toggleIcon: "toggle-icon",
 };
+const IDS = {
+    validationMessage: "inputTimePickerValidationMessage",
+};
 
-const inputTimePickerCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-block;-webkit-user-select:none;-moz-user-select:none;user-select:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}::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;--calcite-internal-input-text-input-padding-inline-end:calc(var(--calcite-toggle-spacing) + 1rem)}:host([scale=m]){--calcite-toggle-spacing:0.75rem;--calcite-internal-input-text-input-padding-inline-end:calc(var(--calcite-toggle-spacing) + 1.5rem)}:host([scale=l]){--calcite-toggle-spacing:1rem;--calcite-internal-input-text-input-padding-inline-end:calc(var(--calcite-toggle-spacing) + 2rem)}.input-wrapper{position:relative}.toggle-icon{position:absolute;display:flex;cursor:pointer;align-items:center;inset-inline-end:0;inset-block:0;padding-inline:var(--calcite-toggle-spacing);--calcite-ui-icon-color:var(--calcite-color-text-3)}.input-wrapper:hover .toggle-icon,calcite-input-text:focus+.toggle-icon{--calcite-ui-icon-color:var(--calcite-color-text-1)}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:0.5rem}:host([scale=s]) .validation-container{padding-block-start:0.25rem}:host([hidden]){display:none}[hidden]{display:none}";
+const inputTimePickerCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-block;-webkit-user-select:none;-moz-user-select:none;user-select:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}::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;--calcite-internal-input-text-input-padding-inline-end:calc(var(--calcite-toggle-spacing) + 1rem)}:host([scale=m]){--calcite-toggle-spacing:0.75rem;--calcite-internal-input-text-input-padding-inline-end:calc(var(--calcite-toggle-spacing) + 1.5rem)}:host([scale=l]){--calcite-toggle-spacing:1rem;--calcite-internal-input-text-input-padding-inline-end:calc(var(--calcite-toggle-spacing) + 2rem)}.input-wrapper{position:relative}.toggle-icon{position:absolute;display:flex;cursor:pointer;align-items:center;inset-inline-end:0;inset-block:0;padding-inline:var(--calcite-toggle-spacing);--calcite-icon-color:var(--calcite-color-text-3)}.input-wrapper:hover .toggle-icon,calcite-input-text:focus+.toggle-icon{--calcite-icon-color:var(--calcite-color-text-1)}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:0.5rem}:host([scale=s]) .validation-container{padding-block-start:0.25rem}:host([hidden]){display:none}[hidden]{display:none}";
 const CalciteInputTimePickerStyle0 = inputTimePickerCss;
 
 // some bundlers (e.g., Webpack) need dynamic import paths to be static
@@ -1275,7 +1277,6 @@ const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class InputTimePicker e
         /** 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()}`;
-        this.openTransitionProp = "opacity";
         //--------------------------------------------------------------------------
         //
         //  Event Listeners
@@ -1341,16 +1342,18 @@ const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class InputTimePicker e
                 fractionalSecondDigits: decimalPlaces(this.step),
             }));
         };
-        this.popoverCloseHandler = () => {
-            deactivateFocusTrap(this, {
-                onDeactivate: () => {
-                    this.calciteInputEl.setFocus();
-                    this.focusOnOpen = false;
-                },
-            });
-            this.open = false;
+        // --------------------------------------------------------------------------
+        //
+        //  Private Methods
+        //
+        // --------------------------------------------------------------------------
+        this.popoverBeforeOpenHandler = (event) => {
+            event.stopPropagation();
+            this.calciteInputTimePickerBeforeOpen.emit();
         };
-        this.popoverOpenHandler = () => {
+        this.popoverOpenHandler = (event) => {
+            event.stopPropagation();
+            this.calciteInputTimePickerOpen.emit();
             activateFocusTrap(this, {
                 onActivate: () => {
                     if (this.focusOnOpen) {
@@ -1360,6 +1363,21 @@ const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class InputTimePicker e
                 },
             });
         };
+        this.popoverBeforeCloseHandler = (event) => {
+            event.stopPropagation();
+            this.calciteInputTimePickerBeforeClose.emit();
+        };
+        this.popoverCloseHandler = (event) => {
+            event.stopPropagation();
+            this.calciteInputTimePickerClose.emit();
+            deactivateFocusTrap(this, {
+                onDeactivate: () => {
+                    this.calciteInputEl.setFocus();
+                    this.focusOnOpen = false;
+                },
+            });
+            this.open = false;
+        };
         this.keyDownHandler = (event) => {
             const { defaultPrevented, key } = event;
             if (defaultPrevented) {
@@ -1402,9 +1420,8 @@ const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class InputTimePicker e
         this.setCalcitePopoverEl = (el) => {
             this.popoverEl = el;
         };
-        this.setInputAndTransitionEl = (el) => {
+        this.setInputEl = (el) => {
             this.calciteInputEl = el;
-            this.transitionEl = el;
         };
         this.setCalciteTimePickerEl = (el) => {
             this.calciteTimePickerEl = el;
@@ -1511,12 +1528,12 @@ const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class InputTimePicker e
         this.effectiveLocale = "";
     }
     openHandler() {
-        onToggleOpenCloseComponent(this);
         if (this.disabled || this.readOnly) {
             this.open = false;
             return;
         }
-        this.reposition(true);
+        // we set the property instead of the attribute to ensure popover's open/close events are emitted properly
+        this.popoverEl.open = this.open;
     }
     handleFocusTrapDisabled(focusTrapDisabled) {
         if (!this.open) {
@@ -1581,23 +1598,6 @@ const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class InputTimePicker e
     async reposition(delayed = false) {
         this.popoverEl?.reposition(delayed);
     }
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
-    onBeforeOpen() {
-        this.calciteInputTimePickerBeforeOpen.emit();
-    }
-    onOpen() {
-        this.calciteInputTimePickerOpen.emit();
-    }
-    onBeforeClose() {
-        this.calciteInputTimePickerBeforeClose.emit();
-    }
-    onClose() {
-        this.calciteInputTimePickerClose.emit();
-    }
     syncHiddenFormInput(input) {
         syncHiddenFormInput("time", this, input);
     }
@@ -1809,9 +1809,6 @@ const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class InputTimePicker e
     async componentWillLoad() {
         setUpLoadableComponent(this);
         await Promise.all([setUpMessages(this), this.loadDateTimeLocaleData()]);
-        if (this.open) {
-            onToggleOpenCloseComponent(this);
-        }
     }
     componentDidLoad() {
         setComponentLoaded(this);
@@ -1824,6 +1821,7 @@ const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class InputTimePicker e
                 fractionalSecondDigits: decimalPlaces(this.step),
             }));
         }
+        this.openHandler();
     }
     disconnectedCallback() {
         disconnectInteractive(this);
@@ -1843,7 +1841,7 @@ const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class InputTimePicker e
     // --------------------------------------------------------------------------
     render() {
         const { disabled, messages, readOnly, dialogId } = this;
-        return (h(Host, { key: 'ec4a410a515b9946a41cb8b62127cf7a898eea8b', onBlur: this.hostBlurHandler, onKeyDown: this.keyDownHandler }, h(InteractiveContainer, { key: 'eca5d0c66e85f116cd0745f60cc4a45209c40c28', disabled: this.disabled }, h("div", { key: '339720c5b82e0d85bb34bd48c6f026140448df85', class: "input-wrapper", onClick: this.onInputWrapperClick }, h("calcite-input-text", { key: 'dcd2283e4938cb7efc9c582800afbefd9d5c686a', "aria-autocomplete": "none", "aria-haspopup": "dialog", disabled: disabled, icon: "clock", id: this.referenceElementId, label: getLabelText(this), lang: this.effectiveLocale, onCalciteInputTextInput: this.calciteInternalInputInputHandler, onCalciteInternalInputTextFocus: this.calciteInternalInputFocusHandler, readOnly: readOnly, ref: this.setInputAndTransitionEl, role: "combobox", scale: this.scale, status: this.status }), !this.readOnly && this.renderToggleIcon(this.open)), h("calcite-popover", { key: '172e98f419cc1a09eb1d61118a159998419f357c', focusTrapDisabled: true, id: dialogId, label: messages.chooseTime, lang: this.effectiveLocale, onCalcitePopoverClose: this.popoverCloseHandler, onCalcitePopoverOpen: this.popoverOpenHandler, open: this.open, overlayPositioning: this.overlayPositioning, placement: this.placement, ref: this.setCalcitePopoverEl, referenceElement: this.referenceElementId, triggerDisabled: true }, h("calcite-time-picker", { key: 'dd05e18d80b9c5eb89d122b72c97a8ae024d2e3c', 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: '783d02637f8582ddefdaaeba9c7fcae107793c47', component: this }), this.validationMessage && this.status === "invalid" ? (h(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
+        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)));
     }
     renderToggleIcon(open) {
         return (h("span", { class: CSS.toggleIcon }, h("calcite-icon", { icon: open ? "chevron-up" : "chevron-down", scale: getIconScale(this.scale) })));

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

@@ -10,15 +10,25 @@ import { b as getDateTimeFormat, c as connectLocalized, d as disconnectLocalized
 import { u as updateMessages, c as connectMessages, d as disconnectMessages, s as setUpMessages } from './t9n.js';
 import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable.js';
 import { c as connectForm, d as disconnectForm, a as afterConnectDefaultValueSet, H as HiddenFormInputSlot } from './form.js';
-import { d as defineCustomElement$5 } from './chip.js';
-import { d as defineCustomElement$4 } from './combobox.js';
-import { d as defineCustomElement$3 } from './combobox-item.js';
+import { d as defineCustomElement$6 } from './chip.js';
+import { d as defineCustomElement$5 } from './combobox.js';
+import { d as defineCustomElement$4 } from './combobox-item.js';
+import { d as defineCustomElement$3 } from './combobox-item-group.js';
 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.11.1
+ * v2.12.0
+ */
+const CSS = {
+    offset: "offset",
+};
+
+/*!
+ * 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.0
  */
 const hourToMinutes = 60;
 const timeZoneNameBlockList = [
@@ -62,83 +72,114 @@ function getUserTimeZoneName() {
     const dateFormatter = new Intl.DateTimeFormat();
     return dateFormatter.resolvedOptions().timeZone;
 }
-/**
- * The lazy-loaded timezone-groups lib to be used across instances.
- */
-let timeZoneGroups;
 async function createTimeZoneItems(locale, messages, mode, referenceDate, standardTime) {
+    if (mode === "name") {
+        const { groupByName } = await import('./index4.js');
+        const groups = await groupByName();
+        return groups
+            .map(({ label: timeZone }) => {
+            const label = toUserFriendlyName(timeZone);
+            const value = timeZone;
+            return {
+                label,
+                value,
+                filterValue: timeZone,
+            };
+        })
+            .filter((group) => !!group)
+            .sort();
+    }
+    const effectiveLocale = standardTime === "user"
+        ? locale
+        : // we use locales that will always yield a short offset that matches `standardTime`
+            standardTime === "utc"
+                ? "fr"
+                : "en-GB";
     const referenceDateInMs = referenceDate.getTime();
-    const timeZoneNames = Intl.supportedValuesOf("timeZone");
-    if (mode === "offset") {
-        if (!timeZoneGroups) {
-            timeZoneGroups = Promise.all([
-                import('./index4.js'),
-                import('./index5.js'),
-            ]);
-        }
-        return timeZoneGroups.then(async ([{ groupTimeZones }, { DateEngine }]) => {
-            const timeZoneGroups = await groupTimeZones({
-                dateEngine: new DateEngine(),
-                groupDateRange: 1,
-                startDate: new Date(referenceDateInMs).toISOString(),
-            });
-            const listFormatter = new Intl.ListFormat(locale, { style: "long", type: "conjunction" });
-            // we remove blocked entries from tzs and adjust label indices accordingly
-            timeZoneGroups.forEach((group) => {
-                const indexOffsets = [];
-                let removedSoFar = 0;
-                group.tzs.forEach((tz, index) => {
-                    if (timeZoneNameBlockList.includes(tz)) {
-                        removedSoFar++;
-                    }
-                    indexOffsets[index] = removedSoFar;
-                });
-                group.tzs = group.tzs.filter((tz) => !timeZoneNameBlockList.includes(tz));
-                group.labelTzIndices = group.labelTzIndices
-                    .map((index) => index - indexOffsets[index])
-                    .filter((index) => index >= 0 && index < group.tzs.length);
-            });
-            const effectiveLocale = standardTime === "user"
-                ? locale
-                : // we use locales that will always yield a short offset that matches `standardTime`
-                    standardTime === "utc"
-                        ? "fr"
-                        : "en-GB";
-            return timeZoneGroups
-                .map(({ labelTzIndices, tzs }) => {
-                const groupRepTz = tzs[0];
-                const decimalOffset = timeZoneOffsetToDecimal(getTimeZoneShortOffset(groupRepTz, effectiveLocale, referenceDateInMs));
-                const value = toOffsetValue(groupRepTz, referenceDateInMs);
-                const tzLabels = labelTzIndices.map((index) => {
-                    const timeZone = tzs[index];
-                    const timeZoneLabel = messages[timeZone];
-                    return (timeZoneLabel ||
-                        // get city token
-                        timeZone.split("/").pop());
-                });
-                const label = createTimeZoneOffsetLabel(messages, decimalOffset, listFormatter.format(tzLabels));
-                return {
-                    label,
-                    value,
-                    filterValue: tzs.map((tz) => toUserFriendlyName(tz)),
-                };
-            })
-                .filter((group) => !!group)
-                .sort((groupA, groupB) => groupA.value - groupB.value);
-        });
+    if (mode === "region") {
+        const [{ groupByRegion }, { getCountry }] = await Promise.all([
+            import('./index5.js'),
+            import('./country.js'),
+        ]);
+        const groups = await groupByRegion();
+        return groups
+            .map(({ label: region, tzs }) => {
+            return {
+                label: region,
+                items: tzs.map((timeZone) => {
+                    const decimalOffset = timeZoneOffsetToDecimal(getTimeZoneShortOffset(timeZone, effectiveLocale, referenceDateInMs));
+                    return {
+                        label: getTimeZoneLabel(timeZone, messages),
+                        value: timeZone,
+                        filterValue: toUserFriendlyName(timeZone),
+                        metadata: {
+                            offset: decimalOffset,
+                            country: getCountry(timeZone),
+                        },
+                    };
+                }),
+            };
+        })
+            .sort((groupA, groupB) => groupA.label.localeCompare(groupB.label));
     }
-    return timeZoneNames
-        .map((timeZone) => {
-        const label = toUserFriendlyName(timeZone);
-        const value = timeZone;
+    const [{ groupByOffset }, { DateEngine }] = await Promise.all([
+        import('./index6.js'),
+        import('./index7.js'),
+    ]);
+    const groups = await groupByOffset({
+        dateEngine: new DateEngine(),
+        groupDateRange: 1,
+        startDate: new Date(referenceDateInMs).toISOString(),
+    });
+    const listFormatter = new Intl.ListFormat(locale, { style: "long", type: "conjunction" });
+    // 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)) {
+                removedSoFar++;
+            }
+            indexOffsets[index] = removedSoFar;
+        });
+        group.tzs = group.tzs.filter((tz) => !timeZoneNameBlockList.includes(tz));
+        group.labelTzIdx = group.labelTzIdx
+            .map((index) => index - indexOffsets[index])
+            .filter((index) => index >= 0 && index < group.tzs.length);
+    });
+    return groups
+        .map(({ labelTzIdx, tzs }) => {
+        const groupRepTz = tzs[0];
+        const decimalOffset = timeZoneOffsetToDecimal(getTimeZoneShortOffset(groupRepTz, effectiveLocale, referenceDateInMs));
+        const value = toOffsetValue(groupRepTz, referenceDateInMs);
+        const tzLabels = labelTzIdx.map((index) => getTimeZoneLabel(tzs[index], messages));
+        const label = createTimeZoneOffsetLabel(messages, decimalOffset, listFormatter.format(tzLabels));
         return {
             label,
             value,
-            filterValue: timeZone,
+            filterValue: tzs.map((tz) => toUserFriendlyName(tz)),
         };
     })
         .filter((group) => !!group)
-        .sort();
+        .sort((groupA, groupB) => groupA.value - groupB.value);
+}
+function getTimeZoneLabel(timeZone, messages) {
+    return messages[timeZone] || getCity(timeZone);
+}
+function getSelectedRegionTimeZoneLabel(city, country, messages) {
+    const template = messages.timeZoneRegionLabel;
+    return template.replace("{city}", city).replace("{country}", getMessageOrKeyFallback(messages, country));
+}
+function getMessageOrKeyFallback(messages, key) {
+    return messages[key] || key;
+}
+/**
+ * Exported for testing purposes only
+ *
+ * @internal
+ */
+function getCity(timeZone) {
+    return timeZone.split("/").pop();
 }
 /**
  * Exported for testing purposes only
@@ -156,15 +197,21 @@ function getTimeZoneShortOffset(timeZone, locale, referenceDateInMs = Date.now()
     const parts = dateTimeFormat.formatToParts(referenceDateInMs);
     return parts.find(({ type }) => type === "timeZoneName").value;
 }
+function isGroup(item) {
+    return item.items !== undefined;
+}
+function flattenTimeZoneItems(timeZoneItems) {
+    return isGroup(timeZoneItems[0]) ? timeZoneItems.flatMap((item) => item.items) : timeZoneItems;
+}
 function findTimeZoneItemByProp(timeZoneItems, prop, valueToMatch) {
     return valueToMatch == null
         ? null
-        : timeZoneItems.find((item) => 
+        : flattenTimeZoneItems(timeZoneItems).find((item) => 
         // intentional == to match string to number
         item[prop] == valueToMatch);
 }
 
-const inputTimeZoneCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}::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}";
+const inputTimeZoneCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block}.offset{white-space:nowrap}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}::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}";
 const CalciteInputTimeZoneStyle0 = inputTimeZoneCss;
 
 const InputTimeZone = /*@__PURE__*/ proxyCustomElement(class InputTimeZone extends HTMLElement {
@@ -182,10 +229,12 @@ const InputTimeZone = /*@__PURE__*/ proxyCustomElement(class InputTimeZone exten
         };
         this.onComboboxBeforeClose = (event) => {
             event.stopPropagation();
+            this.overrideSelectedLabelForRegion(false);
             this.calciteInputTimeZoneBeforeClose.emit();
         };
         this.onComboboxBeforeOpen = (event) => {
             event.stopPropagation();
+            this.overrideSelectedLabelForRegion(true);
             this.calciteInputTimeZoneBeforeOpen.emit();
         };
         this.onComboboxChange = (event) => {
@@ -292,6 +341,21 @@ const InputTimeZone = /*@__PURE__*/ proxyCustomElement(class InputTimeZone exten
     onLabelClick() {
         this.setFocus();
     }
+    /**
+     * Helps override the selected item's label for region mode outside of item rendering logic to avoid flickering text change
+     *
+     * @param open
+     * @private
+     */
+    overrideSelectedLabelForRegion(open) {
+        if (this.mode !== "region" || !this.selectedTimeZoneItem) {
+            return;
+        }
+        const { label, metadata } = this.selectedTimeZoneItem;
+        this.comboboxEl.selectedItems[0].textLabel = open
+            ? label
+            : getSelectedRegionTimeZoneLabel(label, metadata.country, this.messages);
+    }
     findTimeZoneItem(value) {
         return findTimeZoneItemByProp(this.timeZoneItems, "value", value);
     }
@@ -348,16 +412,34 @@ const InputTimeZone = /*@__PURE__*/ proxyCustomElement(class InputTimeZone exten
     }
     componentDidLoad() {
         setComponentLoaded(this);
+        this.overrideSelectedLabelForRegion(this.open);
     }
     componentDidRender() {
         updateHostInteraction(this);
     }
     render() {
-        return (h(Host, { key: 'dad642e8f2094c402f24c65422463ca875627fa9' }, h(InteractiveContainer, { key: 'c452b27815cc331bf2475233f21463a08726f797', disabled: this.disabled }, h("calcite-combobox", { key: '70ce16ff8302b6dea19767b9cf00dd735d9019dd', 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, open: this.open, overlayPositioning: this.overlayPositioning, placeholder: this.mode === "name" ? this.messages.namePlaceholder : this.messages.offsetPlaceholder, 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.timeZoneItems.map((group) => {
+        return (h(Host, { key: '812212005676701893065226cd3594995779c332' }, h(InteractiveContainer, { key: '5c2ddca0fa6198a055ea78b3039a8239973cc4a4', disabled: this.disabled }, h("calcite-combobox", { key: 'ab33d3ebd756d1841870b516a7d174f8f3d20f13', 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, open: this.open, 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: '850e92f46d459fd7599183613151ab5d2b75ead6', component: this }))));
+    }
+    renderItems() {
+        if (this.mode === "region") {
+            return this.renderRegionItems();
+        }
+        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}` }));
-        })), h(HiddenFormInputSlot, { key: 'd8d6cdaffb68c5cb0ed57abd922ad4b84e26de5d', component: this }))));
+        });
+    }
+    renderRegionItems() {
+        return this.timeZoneItems.flatMap(({ label, items }) => (h("calcite-combobox-item-group", { key: label, label: getMessageOrKeyFallback(this.messages, 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)));
+        }))));
     }
     static get delegatesFocus() { return true; }
     static get assetsDirs() { return ["assets"]; }
@@ -407,7 +489,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["calcite-input-time-zone", "calcite-chip", "calcite-combobox", "calcite-combobox-item", "calcite-icon"];
+    const components = ["calcite-input-time-zone", "calcite-chip", "calcite-combobox", "calcite-combobox-item", "calcite-combobox-item-group", "calcite-icon"];
     components.forEach(tagName => { switch (tagName) {
         case "calcite-input-time-zone":
             if (!customElements.get(tagName)) {
@@ -416,15 +498,20 @@ function defineCustomElement$1() {
             break;
         case "calcite-chip":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$6();
             }
             break;
         case "calcite-combobox":
             if (!customElements.get(tagName)) {
-                defineCustomElement$4();
+                defineCustomElement$5();
             }
             break;
         case "calcite-combobox-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "calcite-combobox-item-group":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }

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

@@ -10,7 +10,7 @@ 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.11.1
+ * v2.12.0
  */
 const CSS = {
     container: "container",
@@ -59,7 +59,7 @@ const ListItemGroup = /*@__PURE__*/ proxyCustomElement(class ListItemGroup exten
     // --------------------------------------------------------------------------
     render() {
         const { disabled, heading } = this;
-        return (h(Host, { key: '47c22129d1b6879d3efbb1f98bdefe332e24bfdf' }, h(InteractiveContainer, { key: '07458b983fa815316690de5dffd4a74df1a5af59', disabled: disabled }, h("tr", { key: '970298669c14dbf7a6b73bbcccfbd8b0416368dd', class: CSS.container }, h("td", { key: '84768e0299ec183bc51f08b80b90e4c1358c9d6d', class: CSS.heading, colSpan: MAX_COLUMNS }, heading)), h("slot", { key: 'ebdbc017ca136f67f5b456994ecc277625056232', onSlotchange: this.handleDefaultSlotChange }))));
+        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 }))));
     }
     get el() { return this; }
     static get style() { return CalciteListItemGroupStyle0; }