@esri/solutions-components 0.6.23 → 0.6.25

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

@@ -20,7 +20,7 @@ import { d as defineCustomElement$2 } from './scrim.js';
 /*!
  * 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.8.0
+ * v1.9.0
  */
 const CSS = {
   backButton: "back-button",
@@ -40,16 +40,17 @@ const SLOTS = {
   footerActions: "footer-actions",
 };
 
-const flowItemCss = ":host{box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:flex;inline-size:100%;flex:1 1 auto;overflow:hidden;--calcite-flow-item-footer-padding:0.5rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.back-button{border-width:0px;border-style:solid;border-color:var(--calcite-ui-border-3);border-inline-end-width:1px}calcite-panel{--calcite-panel-footer-padding:var(--calcite-flow-item-footer-padding)}:host([hidden]){display:none}[hidden]{display:none}";
+const flowItemCss = ":host{box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:flex;inline-size:100%;flex:1 1 auto;overflow:hidden}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.back-button{border-width:0px;border-style:solid;border-color:var(--calcite-ui-border-3);border-inline-end-width:1px}calcite-panel{--calcite-panel-footer-padding:var(--calcite-flow-item-footer-padding);--calcite-panel-header-border-block-end:var(--calcite-flow-item-header-border-block-end)}:host([hidden]){display:none}[hidden]{display:none}";
 
 const FlowItem = /*@__PURE__*/ proxyCustomElement(class FlowItem extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteFlowItemBack = createEvent(this, "calciteFlowItemBack", 6);
+    this.calciteFlowItemBack = createEvent(this, "calciteFlowItemBack", 7);
     this.calciteFlowItemScroll = createEvent(this, "calciteFlowItemScroll", 6);
     this.calciteFlowItemClose = createEvent(this, "calciteFlowItemClose", 6);
+    this.calciteFlowItemToggle = createEvent(this, "calciteFlowItemToggle", 6);
     // --------------------------------------------------------------------------
     //
     //  Private Methods
@@ -63,6 +64,10 @@ const FlowItem = /*@__PURE__*/ proxyCustomElement(class FlowItem extends HTMLEle
       event.stopPropagation();
       this.calciteFlowItemClose.emit();
     };
+    this.handlePanelToggle = (event) => {
+      event.stopPropagation();
+      this.calciteFlowItemToggle.emit();
+    };
     this.backButtonClick = () => {
       this.calciteFlowItemBack.emit();
     };
@@ -74,6 +79,9 @@ const FlowItem = /*@__PURE__*/ proxyCustomElement(class FlowItem extends HTMLEle
     };
     this.closable = false;
     this.closed = false;
+    this.collapsed = false;
+    this.collapseDirection = "down";
+    this.collapsible = false;
     this.beforeBack = undefined;
     this.description = undefined;
     this.disabled = false;
@@ -125,6 +133,8 @@ const FlowItem = /*@__PURE__*/ proxyCustomElement(class FlowItem extends HTMLEle
   // --------------------------------------------------------------------------
   /**
    * Sets focus on the component.
+   *
+   * @returns promise.
    */
   async setFocus() {
     await componentFocusable(this);
@@ -145,7 +155,8 @@ const FlowItem = /*@__PURE__*/ proxyCustomElement(class FlowItem extends HTMLEle
    *   top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element
    *   behavior: "auto" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value).
    * });
-   * @param options
+   * @param options - allows specific coordinates to be defined.
+   * @returns - promise that resolves once the content is scrolled to.
    */
   async scrollContentTo(options) {
     var _a;
@@ -167,8 +178,8 @@ const FlowItem = /*@__PURE__*/ proxyCustomElement(class FlowItem extends HTMLEle
       ref: this.setBackRef })) : null;
   }
   render() {
-    const { closable, closed, description, disabled, heading, headingLevel, loading, menuOpen, messages, } = this;
-    return (h(Host, null, h("calcite-panel", { closable: closable, closed: closed, description: description, disabled: disabled, heading: heading, headingLevel: headingLevel, loading: loading, menuOpen: menuOpen, messageOverrides: messages, onCalcitePanelClose: this.handlePanelClose, onCalcitePanelScroll: this.handlePanelScroll,
+    const { collapsed, collapseDirection, collapsible, closable, closed, description, disabled, heading, headingLevel, loading, menuOpen, messages, } = this;
+    return (h(Host, null, h("calcite-panel", { closable: closable, closed: closed, collapseDirection: collapseDirection, collapsed: collapsed, collapsible: collapsible, description: description, disabled: disabled, heading: heading, headingLevel: headingLevel, loading: loading, menuOpen: menuOpen, messageOverrides: messages, onCalcitePanelClose: this.handlePanelClose, onCalcitePanelScroll: this.handlePanelScroll, onCalcitePanelToggle: this.handlePanelToggle,
       // 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.setContainerRef }, this.renderBackButton(), h("slot", { name: SLOTS.actionBar, slot: SLOTS$1.actionBar }), h("slot", { name: SLOTS.headerActionsStart, slot: SLOTS$1.headerActionsStart }), h("slot", { name: SLOTS.headerActionsEnd, slot: SLOTS$1.headerActionsEnd }), h("slot", { name: SLOTS.headerContent, slot: SLOTS$1.headerContent }), h("slot", { name: SLOTS.headerMenuActions, slot: SLOTS$1.headerMenuActions }), h("slot", { name: SLOTS.fab, slot: SLOTS$1.fab }), h("slot", { name: SLOTS.footerActions, slot: SLOTS$1.footerActions }), h("slot", { name: SLOTS.footer, slot: SLOTS$1.footer }), h("slot", null))));
   }
@@ -182,6 +193,9 @@ const FlowItem = /*@__PURE__*/ proxyCustomElement(class FlowItem extends HTMLEle
 }, [1, "calcite-flow-item", {
     "closable": [516],
     "closed": [516],
+    "collapsed": [516],
+    "collapseDirection": [1, "collapse-direction"],
+    "collapsible": [516],
     "beforeBack": [16],
     "description": [1],
     "disabled": [516],

package/dist/components/calcite-flow.js

@@ -10,7 +10,7 @@ import { c as componentFocusable, s as setUpLoadableComponent, a as setComponent
 /*!
  * 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.8.0
+ * v1.9.0
  */
 const CSS = {
   frame: "frame",
@@ -123,7 +123,10 @@ const Flow = /*@__PURE__*/ proxyCustomElement(class Flow extends HTMLElement {
   //  Private Methods
   //
   // --------------------------------------------------------------------------
-  async handleItemBackClick() {
+  async handleItemBackClick(event) {
+    if (event.defaultPrevented) {
+      return;
+    }
     await this.back();
     return this.setFocus();
   }

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/main/LICENSE.md for details.
- * v1.8.0
+ * v1.9.0
  */
 const CSS = {
   wrapper: "wrapper",

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

@@ -28,7 +28,7 @@ import { d as defineCustomElement$2 } from './progress.js';
 /*!
  * 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.8.0
+ * v1.9.0
  */
 const CSS = {
   assistiveText: "assistive-text",
@@ -40,7 +40,7 @@ const CSS = {
 /*!
  * 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.8.0
+ * v1.9.0
  */
 /**
  * Specifies if an ISO string date (YYYY-MM-DD) has two digit year.
@@ -323,6 +323,7 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class InputDatePicker e
     this.name = undefined;
     this.numberingSystem = undefined;
     this.scale = "m";
+    this.status = "idle";
     this.placement = defaultMenuPlacement;
     this.range = false;
     this.required = false;
@@ -521,7 +522,7 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class InputDatePicker e
     };
     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: (_a = this.localeData) === null || _a === void 0 ? void 0 : _a.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: (_a = this.localeData) === null || _a === void 0 ? void 0 : _a.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: ", (_b = this.localeData) === null || _b === void 0 ? void 0 : _b.placeholder)), h("div", { "aria-hidden": toAriaBoolean(!this.open), "aria-label": messages.chooseDate, "aria-live": "polite", "aria-modal": "true", class: {
         [CSS.menu]: true,
@@ -542,7 +543,7 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class InputDatePicker e
       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: (_c = this.localeData) === null || _c === void 0 ? void 0 : _c.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: (_c = this.localeData) === null || _c === void 0 ? void 0 : _c.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 })));
   }
@@ -731,6 +732,7 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class InputDatePicker e
     "name": [513],
     "numberingSystem": [513, "numbering-system"],
     "scale": [513],
+    "status": [513],
     "placement": [513],
     "range": [516],
     "required": [516],

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

@@ -14,6 +14,7 @@ import { n as numberStringFormatter, g as getSupportedLocale, c as connectLocali
 import { d as deactivateFocusTrap, a as activateFocusTrap, c as connectFocusTrap } from './focusTrapComponent.js';
 import { l as localizeTimeString, t as toISOTimeString, i as isValidTime, f as formatTimeString, a as formatTimePart, d as defineCustomElement$2 } from './time-picker.js';
 import { 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 { d as defineCustomElement$8 } from './action.js';
 import { d as defineCustomElement$7 } from './icon.js';
@@ -25,7 +26,7 @@ import { d as defineCustomElement$3 } from './progress.js';
 /*!
  * 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.8.0
+ * v1.9.0
  */
 const CSS = {
   toggleIcon: "toggle-icon",
@@ -137,11 +138,11 @@ var L = 'en'; // global locale
 var Ls = {}; // global loaded locale
 
 Ls[L] = en;
+var IS_DAYJS = '$isDayjsObject'; // eslint-disable-next-line no-use-before-define
 
 var isDayjs = function isDayjs(d) {
-  return d instanceof Dayjs;
-}; // eslint-disable-line no-use-before-define
-
+  return d instanceof Dayjs || !!(d && d[IS_DAYJS]);
+};
 
 var parseLocale = function parseLocale(preset, object, isLocal) {
   var l;
@@ -234,13 +235,15 @@ var Dayjs = /*#__PURE__*/function () {
   function Dayjs(cfg) {
     this.$L = parseLocale(cfg.locale, null, true);
     this.parse(cfg); // for plugin
+
+    this.$x = this.$x || cfg.x || {};
+    this[IS_DAYJS] = true;
   }
 
   var _proto = Dayjs.prototype;
 
   _proto.parse = function parse(cfg) {
     this.$d = parseDate(cfg);
-    this.$x = cfg.x || {};
     this.init();
   };
 
@@ -1257,12 +1260,17 @@ const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class InputTimePicker e
     super();
     this.__registerHost();
     this.__attachShadow();
+    this.calciteInputTimePickerBeforeClose = createEvent(this, "calciteInputTimePickerBeforeClose", 6);
+    this.calciteInputTimePickerBeforeOpen = createEvent(this, "calciteInputTimePickerBeforeOpen", 6);
     this.calciteInputTimePickerChange = createEvent(this, "calciteInputTimePickerChange", 7);
+    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()}`;
+    this.openTransitionProp = "opacity";
     //--------------------------------------------------------------------------
     //
     //  Event Listeners
@@ -1335,6 +1343,7 @@ const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class InputTimePicker e
           this.focusOnOpen = false;
         },
       });
+      this.open = false;
     };
     this.popoverOpenHandler = () => {
       activateFocusTrap(this, {
@@ -1388,8 +1397,9 @@ const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class InputTimePicker e
     this.setCalcitePopoverEl = (el) => {
       this.popoverEl = el;
     };
-    this.setCalciteInputEl = (el) => {
+    this.setInputAndTransitionEl = (el) => {
       this.calciteInputEl = el;
+      this.transitionEl = el;
     };
     this.setCalciteTimePickerEl = (el) => {
       this.calciteTimePickerEl = el;
@@ -1470,6 +1480,7 @@ const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class InputTimePicker e
     this.numberingSystem = undefined;
     this.required = false;
     this.scale = "m";
+    this.status = "idle";
     this.overlayPositioning = "absolute";
     this.placement = "auto";
     this.step = 60;
@@ -1477,12 +1488,13 @@ const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class InputTimePicker e
     this.defaultMessages = undefined;
     this.effectiveLocale = "";
   }
-  openHandler(value) {
+  openHandler(open) {
+    onToggleOpenCloseComponent(this);
     if (this.disabled || this.readOnly) {
       this.open = false;
       return;
     }
-    if (value) {
+    if (open) {
       this.reposition(true);
     }
   }
@@ -1555,6 +1567,18 @@ const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class InputTimePicker e
   //  Private Methods
   //
   // --------------------------------------------------------------------------
+  onBeforeOpen() {
+    this.calciteInputTimePickerBeforeOpen.emit();
+  }
+  onOpen() {
+    this.calciteInputTimePickerOpen.emit();
+  }
+  onBeforeClose() {
+    this.calciteInputTimePickerBeforeClose.emit();
+  }
+  onClose() {
+    this.calciteInputTimePickerClose.emit();
+  }
   delocalizeTimeString(value) {
     // we need to set the corresponding locale before parsing, otherwise it defaults to English (possible dayjs bug)
     dayjs.locale(this.effectiveLocale.toLowerCase());
@@ -1764,6 +1788,9 @@ 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);
@@ -1795,9 +1822,9 @@ const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class InputTimePicker e
   // --------------------------------------------------------------------------
   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.setCalciteInputEl }), !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,
+      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)
       ref: this.setCalcitePopoverEl }, h("calcite-time-picker", { lang: this.effectiveLocale, messageOverrides: this.messageOverrides, numberingSystem: this.numberingSystem, onCalciteInternalTimePickerChange: this.timePickerChangeHandler, scale: this.scale, step: this.step, tabIndex: this.open ? undefined : -1, value: this.value,
       // 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)
@@ -1833,6 +1860,7 @@ const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class InputTimePicker e
     "numberingSystem": [1, "numbering-system"],
     "required": [516],
     "scale": [513],
+    "status": [513],
     "overlayPositioning": [1, "overlay-positioning"],
     "placement": [513],
     "step": [2],

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

@@ -6,7 +6,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as connectLabel, d as disconnectLabel } from './label.js';
 import { u as updateHostInteraction } from './interactive.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale2.js';
+import { b as getDateTimeFormat, c as connectLocalized, d as disconnectLocalized } from './locale2.js';
 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';
@@ -18,40 +18,100 @@ 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/main/LICENSE.md for details.
- * v1.8.0
+ * v1.9.0
  */
 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;
+}
 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) => {
+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) {
+  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" });
+      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
  */
-function toGMTLabel(offsetInHours) {
-  return `GMT${offsetInHours === 0 ? "" : offsetInHours.toLocaleString("en", { signDisplay: "always" })}`;
+function toUserFriendlyName(timeZoneName) {
+  return timeZoneName.replace(/_/g, " ");
 }
-let timeZoneGeneration;
-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;
 }
 
 const inputTimeZoneCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-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}::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}";
@@ -80,13 +140,13 @@ const InputTimeZone = /*@__PURE__*/ proxyCustomElement(class InputTimeZone exten
     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) => {
@@ -101,11 +161,14 @@ const InputTimeZone = /*@__PURE__*/ proxyCustomElement(class InputTimeZone exten
     };
     this.disabled = false;
     this.form = undefined;
+    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;
@@ -115,6 +178,17 @@ const InputTimeZone = /*@__PURE__*/ proxyCustomElement(class InputTimeZone exten
   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
@@ -135,6 +209,21 @@ const InputTimeZone = /*@__PURE__*/ proxyCustomElement(class InputTimeZone exten
   onLabelClick() {
     this.setFocus();
   }
+  findTimeZoneItem(value) {
+    const valueToMatch = value;
+    return this.timeZoneItems.find(({ value }) => 
+    // intentional == to match string to number
+    value == valueToMatch);
+  }
+  async createTimeZoneItems() {
+    var _a;
+    if (!this.effectiveLocale || !this.messages) {
+      return [];
+    }
+    return createTimeZoneItems(this.effectiveLocale, this.messages, this.mode, this.referenceDate instanceof Date
+      ? this.referenceDate
+      : new Date((_a = this.referenceDate) !== null && _a !== void 0 ? _a : Date.now()));
+  }
   // --------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -156,13 +245,14 @@ const InputTimeZone = /*@__PURE__*/ proxyCustomElement(class InputTimeZone exten
     var _a;
     setUpLoadableComponent(this);
     await setUpMessages(this);
-    const timeZoneGroups = await generateTimeZoneGroups();
-    this.timeZoneGroups = timeZoneGroups;
-    const offsetToMatch = (_a = this.value) !== null && _a !== void 0 ? _a : 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 = (_a = this.value) !== null && _a !== void 0 ? _a : 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;
   }
@@ -173,13 +263,12 @@ const InputTimeZone = /*@__PURE__*/ proxyCustomElement(class InputTimeZone exten
     updateHostInteraction(this);
   }
   render() {
-    return (h(Host, null, h("calcite-combobox", { clearDisabled: true, disabled: this.disabled, label: this.messages.chooseTimeZone, lang: this.effectiveLocale, 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",
+    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 delegatesFocus() { return true; }
@@ -187,17 +276,24 @@ const InputTimeZone = /*@__PURE__*/ proxyCustomElement(class InputTimeZone exten
   get el() { return this; }
   static get watchers() { return {
     "messageOverrides": ["onMessagesChange"],
-    "effectiveLocale": ["effectiveLocaleWatcher"]
+    "effectiveLocale": ["handleTimeZoneItemPropsChange", "effectiveLocaleWatcher"],
+    "messages": ["handleTimeZoneItemPropsChange"],
+    "mode": ["handleTimeZoneItemPropsChange"],
+    "referenceDate": ["handleTimeZoneItemPropsChange"],
+    "value": ["handleValueChange"]
   }; }
   static get style() { return inputTimeZoneCss; }
 }, [17, "calcite-input-time-zone", {
     "disabled": [516],
     "form": [513],
+    "maxItems": [514, "max-items"],
     "messages": [1040],
     "messageOverrides": [1040],
+    "mode": [513],
     "name": [513],
     "open": [1540],
     "overlayPositioning": [513, "overlay-positioning"],
+    "referenceDate": [1, "reference-date"],
     "required": [516],
     "scale": [513],
     "value": [1025],
@@ -206,7 +302,11 @@ const InputTimeZone = /*@__PURE__*/ proxyCustomElement(class InputTimeZone exten
     "setFocus": [64]
   }, undefined, {
     "messageOverrides": ["onMessagesChange"],
-    "effectiveLocale": ["effectiveLocaleWatcher"]
+    "effectiveLocale": ["handleTimeZoneItemPropsChange", "effectiveLocaleWatcher"],
+    "messages": ["handleTimeZoneItemPropsChange"],
+    "mode": ["handleTimeZoneItemPropsChange"],
+    "referenceDate": ["handleTimeZoneItemPropsChange"],
+    "value": ["handleValueChange"]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

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

@@ -10,7 +10,7 @@ import { a as getDepth, M as MAX_COLUMNS } from './utils3.js';
 /*!
  * 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.8.0
+ * v1.9.0
  */
 const CSS = {
   container: "container",

package/dist/components/calcite-menu-item.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/main/LICENSE.md for details.
- * v1.8.0
+ * v1.9.0
  */
 const CSS = {
   container: "container",

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/main/LICENSE.md for details.
- * v1.8.0
+ * v1.9.0
  */
 const CSS = {
   container: "container",