@esri/calcite-components 1.9.0-next.9 → 1.9.1-next.0

package/dist/collection/components/input/input.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0-next.9
+ * v1.9.1-next.0
  */
 import { h, Host, } from "@stencil/core";
 import { getElementDir, getSlotted, isPrimaryPointerButton, setRequestedIcon, } from "../../utils/dom";

package/dist/collection/components/input/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0-next.9
+ * v1.9.1-next.0
  */
 export const CSS = {
   loader: "loader",

package/dist/collection/components/input-date-picker/input-date-picker.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0-next.9
+ * v1.9.1-next.0
  */
 import { Build, h, Host, } from "@stencil/core";
 import { dateFromISO, dateFromLocalizedString, dateFromRange, datePartsFromISO, datePartsFromLocalizedString, dateToISO, inRange, } from "../../utils/date";
@@ -264,6 +264,7 @@ export class InputDatePicker {
     this.name = undefined;
     this.numberingSystem = undefined;
     this.scale = "m";
+    this.status = "idle";
     this.placement = defaultMenuPlacement;
     this.range = false;
     this.required = false;
@@ -461,7 +462,7 @@ export class InputDatePicker {
     };
     return (h(Host, { onBlur: this.deactivate, onKeyDown: this.keyDownHandler }, this.localeData && (h("div", { class: "input-container" }, h("div", { class: "input-wrapper", onClick: this.onInputWrapperClick,
       // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-      ref: this.setStartWrapper }, h("calcite-input", { "aria-autocomplete": "none", "aria-controls": this.dialogId, "aria-describedby": this.placeholderTextId, "aria-expanded": toAriaBoolean(this.open), "aria-haspopup": "dialog", class: `input ${this.layout === "vertical" && this.range ? `no-bottom-border` : ``}`, disabled: disabled, icon: "calendar", "number-button-type": "none", numberingSystem: numberingSystem, onCalciteInputInput: this.calciteInternalInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.startInputFocus, onFocus: this.startEndInputFocus, placeholder: this.localeData?.placeholder, readOnly: readOnly, role: "combobox", scale: this.scale, type: "text",
+      ref: this.setStartWrapper }, h("calcite-input", { "aria-autocomplete": "none", "aria-controls": this.dialogId, "aria-describedby": this.placeholderTextId, "aria-expanded": toAriaBoolean(this.open), "aria-haspopup": "dialog", class: `input ${this.layout === "vertical" && this.range ? `no-bottom-border` : ``}`, disabled: disabled, icon: "calendar", "number-button-type": "none", numberingSystem: numberingSystem, onCalciteInputInput: this.calciteInternalInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.startInputFocus, onFocus: this.startEndInputFocus, placeholder: this.localeData?.placeholder, readOnly: readOnly, role: "combobox", scale: this.scale, status: this.status, type: "text",
       // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setStartInput }), !this.readOnly && this.renderToggleIcon(this.open && this.focusedInput === "start"), h("span", { "aria-hidden": "true", class: CSS.assistiveText, id: this.placeholderTextId }, "Date Format: ", this.localeData?.placeholder)), h("div", { "aria-hidden": toAriaBoolean(!this.open), "aria-label": messages.chooseDate, "aria-live": "polite", "aria-modal": "true", class: {
         [CSS.menu]: true,
@@ -482,7 +483,7 @@ export class InputDatePicker {
       ref: this.setEndWrapper }, h("calcite-input", { "aria-autocomplete": "none", "aria-controls": this.dialogId, "aria-expanded": toAriaBoolean(this.open), "aria-haspopup": "dialog", class: {
         input: true,
         "border-top-color-one": this.layout === "vertical" && this.range,
-      }, disabled: disabled, icon: "calendar", "number-button-type": "none", numberingSystem: numberingSystem, onCalciteInputInput: this.calciteInternalInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.endInputFocus, onFocus: this.startEndInputFocus, placeholder: this.localeData?.placeholder, readOnly: readOnly, role: "combobox", scale: this.scale, type: "text",
+      }, disabled: disabled, icon: "calendar", "number-button-type": "none", numberingSystem: numberingSystem, onCalciteInputInput: this.calciteInternalInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.endInputFocus, onFocus: this.startEndInputFocus, placeholder: this.localeData?.placeholder, readOnly: readOnly, role: "combobox", scale: this.scale, status: this.status, type: "text",
       // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setEndInput }), !this.readOnly && this.renderToggleIcon(this.open && this.focusedInput === "end"))))), h(HiddenFormInputSlot, { component: this })));
   }
@@ -997,6 +998,29 @@ export class InputDatePicker {
         "reflect": true,
         "defaultValue": "\"m\""
       },
+      "status": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Status",
+          "resolved": "\"idle\" | \"invalid\" | \"valid\"",
+          "references": {
+            "Status": {
+              "location": "import",
+              "path": "../interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the status of the input field, which determines message and icons."
+        },
+        "attribute": "status",
+        "reflect": true,
+        "defaultValue": "\"idle\""
+      },
       "placement": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/input-date-picker/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0-next.9
+ * v1.9.1-next.0
  */
 export const CSS = {
   assistiveText: "assistive-text",

package/dist/collection/components/input-date-picker/utils.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0-next.9
+ * v1.9.1-next.0
  */
 import { datePartsFromISO } from "../../utils/date";
 /**

package/dist/collection/components/input-message/input-message.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0-next.9
+ * v1.9.1-next.0
  */
 import { h, Host } from "@stencil/core";
 import { setRequestedIcon } from "../../utils/dom";

package/dist/collection/components/input-message/interfaces.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0-next.9
+ * v1.9.1-next.0
  */
 export var StatusIconDefaults;
 (function (StatusIconDefaults) {

package/dist/collection/components/input-number/input-number.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0-next.9
+ * v1.9.1-next.0
  */
 import { h, Host, } from "@stencil/core";
 import { getElementDir, getSlotted, isPrimaryPointerButton, setRequestedIcon, } from "../../utils/dom";

package/dist/collection/components/input-number/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0-next.9
+ * v1.9.1-next.0
  */
 export const CSS = {
   loader: "loader",

package/dist/collection/components/input-text/input-text.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0-next.9
+ * v1.9.1-next.0
  */
 import { h, Host, } from "@stencil/core";
 import { getElementDir, getSlotted, setRequestedIcon } from "../../utils/dom";

package/dist/collection/components/input-text/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0-next.9
+ * v1.9.1-next.0
  */
 export const CSS = {
   loader: "loader",

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0-next.9
+ * v1.9.1-next.0
  */
 import { h, Host, } from "@stencil/core";
 import { connectForm, disconnectForm, HiddenFormInputSlot, submitForm, } from "../../utils/form";
@@ -299,6 +299,7 @@ export class InputTimePicker {
     this.numberingSystem = undefined;
     this.required = false;
     this.scale = "m";
+    this.status = "idle";
     this.overlayPositioning = "absolute";
     this.placement = "auto";
     this.step = 60;
@@ -638,7 +639,7 @@ export class InputTimePicker {
   // --------------------------------------------------------------------------
   render() {
     const { disabled, messages, readOnly, dialogId } = this;
-    return (h(Host, { onBlur: this.hostBlurHandler, onKeyDown: this.keyDownHandler }, h("div", { class: "input-wrapper", onClick: this.onInputWrapperClick }, h("calcite-input", { "aria-autocomplete": "none", "aria-haspopup": "dialog", disabled: disabled, icon: "clock", id: this.referenceElementId, label: getLabelText(this), lang: this.effectiveLocale, onCalciteInputInput: this.calciteInternalInputInputHandler, onCalciteInternalInputFocus: this.calciteInternalInputFocusHandler, readOnly: readOnly, role: "combobox", scale: this.scale, step: this.step,
+    return (h(Host, { onBlur: this.hostBlurHandler, onKeyDown: this.keyDownHandler }, h("div", { class: "input-wrapper", onClick: this.onInputWrapperClick }, h("calcite-input", { "aria-autocomplete": "none", "aria-haspopup": "dialog", disabled: disabled, icon: "clock", id: this.referenceElementId, label: getLabelText(this), lang: this.effectiveLocale, onCalciteInputInput: this.calciteInternalInputInputHandler, onCalciteInternalInputFocus: this.calciteInternalInputFocusHandler, readOnly: readOnly, role: "combobox", scale: this.scale, status: this.status, step: this.step,
       // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setInputAndTransitionEl }), !this.readOnly && this.renderToggleIcon(this.open)), h("calcite-popover", { 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, referenceElement: this.referenceElementId, triggerDisabled: true,
       // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
@@ -890,6 +891,29 @@ export class InputTimePicker {
         "reflect": true,
         "defaultValue": "\"m\""
       },
+      "status": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Status",
+          "resolved": "\"idle\" | \"invalid\" | \"valid\"",
+          "references": {
+            "Status": {
+              "location": "import",
+              "path": "../interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the status of the input field, which determines message and icons."
+        },
+        "attribute": "status",
+        "reflect": true,
+        "defaultValue": "\"idle\""
+      },
       "overlayPositioning": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/input-time-picker/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0-next.9
+ * v1.9.1-next.0
  */
 export const CSS = {
   toggleIcon: "toggle-icon",

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

@@ -1,14 +1,14 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0-next.9
+ * v1.9.1-next.0
  */
 import { h, Host, } from "@stencil/core";
 import { connectLabel, disconnectLabel } from "../../utils/label";
 import { updateHostInteraction } from "../../utils/interactive";
 import { connectLocalized, disconnectLocalized, } from "../../utils/locale";
 import { connectMessages, disconnectMessages, setUpMessages, updateMessages, } from "../../utils/t9n";
-import { generateTimeZoneGroups, getUserTimeZoneOffset } from "./utils";
+import { createTimeZoneItems, getUserTimeZoneName, getUserTimeZoneOffset } from "./utils";
 import { componentFocusable, setComponentLoaded, setUpLoadableComponent, } from "../../utils/loadable";
 import { afterConnectDefaultValueSet, connectForm, disconnectForm, HiddenFormInputSlot, } from "../../utils/form";
 export class InputTimeZone {
@@ -27,13 +27,13 @@ export class InputTimeZone {
     this.onComboboxChange = (event) => {
       event.stopPropagation();
       const combobox = event.target;
-      const selected = this.timeZoneGroups.find(({ offsetValue }) => combobox.value === `${offsetValue}`);
-      const selectedValue = `${selected.offsetValue}`;
+      const selected = this.findTimeZoneItem(combobox.selectedItems[0].getAttribute("data-value"));
+      const selectedValue = `${selected.value}`;
       if (this.value === selectedValue) {
         return;
       }
       this.value = selectedValue;
-      this.selectedTimeZoneGroup = selected;
+      this.selectedTimeZoneItem = selected;
       this.calciteInputTimeZoneChange.emit();
     };
     this.onComboboxClose = (event) => {
@@ -51,9 +51,11 @@ export class InputTimeZone {
     this.maxItems = 0;
     this.messages = undefined;
     this.messageOverrides = undefined;
+    this.mode = "offset";
     this.name = undefined;
     this.open = false;
     this.overlayPositioning = "absolute";
+    this.referenceDate = undefined;
     this.required = false;
     this.scale = "m";
     this.value = undefined;
@@ -63,6 +65,17 @@ export class InputTimeZone {
   onMessagesChange() {
     /* wired up by t9n util */
   }
+  handleTimeZoneItemPropsChange() {
+    this.createTimeZoneItems();
+  }
+  handleValueChange(value, oldValue) {
+    const timeZoneItem = this.findTimeZoneItem(value);
+    if (!timeZoneItem) {
+      this.value = oldValue;
+      return;
+    }
+    this.selectedTimeZoneItem = timeZoneItem;
+  }
   //--------------------------------------------------------------------------
   //
   //  Public Methods
@@ -83,6 +96,20 @@ export class InputTimeZone {
   onLabelClick() {
     this.setFocus();
   }
+  findTimeZoneItem(value) {
+    const valueToMatch = value;
+    return this.timeZoneItems.find(({ value }) => 
+    // intentional == to match string to number
+    value == valueToMatch);
+  }
+  async createTimeZoneItems() {
+    if (!this.effectiveLocale || !this.messages) {
+      return [];
+    }
+    return createTimeZoneItems(this.effectiveLocale, this.messages, this.mode, this.referenceDate instanceof Date
+      ? this.referenceDate
+      : new Date(this.referenceDate ?? Date.now()));
+  }
   // --------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -103,13 +130,14 @@ export class InputTimeZone {
   async componentWillLoad() {
     setUpLoadableComponent(this);
     await setUpMessages(this);
-    const timeZoneGroups = await generateTimeZoneGroups();
-    this.timeZoneGroups = timeZoneGroups;
-    const offsetToMatch = this.value ?? getUserTimeZoneOffset();
-    this.selectedTimeZoneGroup = timeZoneGroups.find(({ offsetValue }) => 
-    // intentional == to match string to number
-    offsetValue == offsetToMatch);
-    const selectedValue = `${this.selectedTimeZoneGroup.offsetValue}`;
+    this.timeZoneItems = await this.createTimeZoneItems();
+    const fallbackValue = this.mode === "offset" ? getUserTimeZoneOffset() : getUserTimeZoneName();
+    const valueToMatch = this.value ?? fallbackValue;
+    this.selectedTimeZoneItem = this.findTimeZoneItem(valueToMatch);
+    if (!this.selectedTimeZoneItem) {
+      this.selectedTimeZoneItem = this.findTimeZoneItem(fallbackValue);
+    }
+    const selectedValue = `${this.selectedTimeZoneItem.value}`;
     afterConnectDefaultValueSet(this, selectedValue);
     this.value = selectedValue;
   }
@@ -122,11 +150,10 @@ export class InputTimeZone {
   render() {
     return (h(Host, null, h("calcite-combobox", { clearDisabled: true, 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, scale: this.scale, selectionMode: "single-persist",
       // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-      ref: this.setComboboxRef }, this.timeZoneGroups.map((group) => {
-      const selected = this.selectedTimeZoneGroup === group;
-      const label = group.offsetLabel;
-      const value = group.offsetValue;
-      return (h("calcite-combobox-item", { key: label, selected: selected, textLabel: label, value: `${value}` }));
+      ref: this.setComboboxRef }, 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, { component: this })));
   }
   static get is() { return "calcite-input-time-zone"; }
@@ -244,6 +271,32 @@ export class InputTimeZone {
           "text": "Use this property to override individual strings used by the component."
         }
       },
+      "mode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "TimeZoneMode",
+          "resolved": "\"name\" | \"offset\"",
+          "references": {
+            "TimeZoneMode": {
+              "location": "import",
+              "path": "./interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"offset\""
+            }],
+          "text": "This specifies the type of `value` and the associated options presented to the user:\n\nUsing `\"offset\"` will provide options related"
+        },
+        "attribute": "mode",
+        "reflect": true,
+        "defaultValue": "\"offset\""
+      },
       "name": {
         "type": "string",
         "mutable": false,
@@ -302,6 +355,30 @@ export class InputTimeZone {
         "reflect": true,
         "defaultValue": "\"absolute\""
       },
+      "referenceDate": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Date | string",
+          "resolved": "Date | string",
+          "references": {
+            "Date": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "see",
+              "text": "[Date.prototype.toISOString](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString)"
+            }],
+          "text": "This date will be used as a reference to Daylight Savings Time when creating time zone item groups.\n\nIt can be either a Date instance or a string in ISO format (YYYY-MM-DD, YYYY-MM-DDTHH:MM:SS.SSSZ)"
+        },
+        "attribute": "reference-date",
+        "reflect": false
+      },
       "required": {
         "type": "boolean",
         "mutable": false,
@@ -477,6 +554,21 @@ export class InputTimeZone {
     return [{
         "propName": "messageOverrides",
         "methodName": "onMessagesChange"
+      }, {
+        "propName": "effectiveLocale",
+        "methodName": "handleTimeZoneItemPropsChange"
+      }, {
+        "propName": "messages",
+        "methodName": "handleTimeZoneItemPropsChange"
+      }, {
+        "propName": "mode",
+        "methodName": "handleTimeZoneItemPropsChange"
+      }, {
+        "propName": "referenceDate",
+        "methodName": "handleTimeZoneItemPropsChange"
+      }, {
+        "propName": "value",
+        "methodName": "handleValueChange"
       }, {
         "propName": "effectiveLocale",
         "methodName": "effectiveLocaleWatcher"

package/dist/collection/components/input-time-zone/utils.js

@@ -1,38 +1,99 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0-next.9
+ * v1.9.1-next.0
  */
+import { getDateTimeFormat } from "../../utils/locale";
 const hourToMinutes = 60;
+function timeZoneOffsetToDecimal(shortOffsetTimeZoneName) {
+  const minusSign = "−";
+  const hyphen = "-";
+  return (shortOffsetTimeZoneName
+    .replace(":15", ".25")
+    .replace(":30", ".5")
+    .replace(":45", ".75")
+    // ensures decimal string representation is parseable
+    .replace(minusSign, hyphen));
+}
+function toOffsetValue(timeZoneName, referenceDateInMs) {
+  // we use "en-US" to allow us to reliably remove the standard time token
+  const offset = getTimeZoneShortOffset(timeZoneName, "en-US", referenceDateInMs).replace("GMT", "");
+  if (offset === "") {
+    return 0;
+  }
+  return Number(timeZoneOffsetToDecimal(offset)) * hourToMinutes;
+}
 export function getUserTimeZoneOffset() {
   const localDate = new Date();
   return localDate.getTimezoneOffset() * -1;
 }
-function getFallbackTimeZoneGroups() {
-  const timeZoneOffsets = [
-    -11, -10, -9.5, -9, -8, -7, -6, -5, -4, -3, -2.5, -2, -1, 0, 1, 2, 3, 3.5, 4, 4.5, 5, 6, 6.5, 7, 8, 8.75, 9, 9.5,
-    10, 10.5, 11, 12, 12.75, 13, 14,
-  ];
-  return timeZoneOffsets.map((offset) => {
+export function getUserTimeZoneName() {
+  const dateFormatter = new Intl.DateTimeFormat();
+  return dateFormatter.resolvedOptions().timeZone;
+}
+/**
+ * The lazy-loaded timezone-groups lib to be used across instances.
+ */
+let timeZoneGroups;
+export async function createTimeZoneItems(locale, messages, mode, referenceDate) {
+  const referenceDateInMs = referenceDate.getTime();
+  const timeZoneNames = Intl.supportedValuesOf("timeZone");
+  if (mode === "offset") {
+    if (!timeZoneGroups) {
+      timeZoneGroups = Promise.all([
+        import("timezone-groups/dist/index.js"),
+        import("timezone-groups/dist/strategy/native/index.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" });
+      return timeZoneGroups
+        .map(({ labelTzIndices, tzs }) => {
+        const groupRepTz = tzs[0];
+        const decimalOffset = timeZoneOffsetToDecimal(getTimeZoneShortOffset(groupRepTz, locale, referenceDateInMs));
+        const value = toOffsetValue(groupRepTz, referenceDateInMs);
+        const label = createTimeZoneOffsetLabel(messages, decimalOffset, listFormatter.format(labelTzIndices.map((index) => messages[tzs[index]])));
+        return {
+          label,
+          value,
+          filterValue: tzs.map((tz) => toUserFriendlyName(tz)),
+        };
+      })
+        .filter((group) => !!group)
+        .sort((groupA, groupB) => groupA.value - groupB.value);
+    });
+  }
+  return timeZoneNames
+    .map((timeZone) => {
+    const label = toUserFriendlyName(timeZone);
+    const value = timeZone;
     return {
-      offsetValue: offset * hourToMinutes,
-      offsetLabel: toGMTLabel(offset),
+      label,
+      value,
+      filterValue: timeZone,
     };
-  });
+  })
+    .filter((group) => !!group)
+    .sort();
 }
 /**
- * Exported for testing-purposes only
+ * Exported for testing purposes only
  *
  * @internal
  */
-export function toGMTLabel(offsetInHours) {
-  return `GMT${offsetInHours === 0 ? "" : offsetInHours.toLocaleString("en", { signDisplay: "always" })}`;
+export function toUserFriendlyName(timeZoneName) {
+  return timeZoneName.replace(/_/g, " ");
 }
-let timeZoneGeneration;
-export async function generateTimeZoneGroups() {
-  if (timeZoneGeneration) {
-    return timeZoneGeneration;
-  }
-  timeZoneGeneration = Promise.resolve(getFallbackTimeZoneGroups());
-  return timeZoneGeneration;
+function createTimeZoneOffsetLabel(messages, offsetLabel, groupLabel) {
+  return messages.timeZoneLabel.replace("{offset}", offsetLabel).replace("{cities}", groupLabel);
+}
+function getTimeZoneShortOffset(timeZone, locale, referenceDateInMs = Date.now()) {
+  const dateTimeFormat = getDateTimeFormat(locale, { timeZone, timeZoneName: "shortOffset" });
+  const parts = dateTimeFormat.formatToParts(referenceDateInMs);
+  return parts.find(({ type }) => type === "timeZoneName").value;
 }

package/dist/collection/components/label/label.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0-next.9
+ * v1.9.1-next.0
  */
 import { h, Host } from "@stencil/core";
 import { labelConnectedEvent, labelDisconnectedEvent } from "../../utils/label";

package/dist/collection/components/label/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0-next.9
+ * v1.9.1-next.0
  */
 export const CSS = {
   container: "container",

package/dist/collection/components/link/link.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0-next.9
+ * v1.9.1-next.0
  */
 import { h, Host } from "@stencil/core";
 import { focusElement, getElementDir } from "../../utils/dom";