@esri/solutions-components 0.10.27 → 0.10.29

package/dist/components/calcite-dialog.js

@@ -35,7 +35,7 @@ const interact = interact_min.exports;
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.2
+ * v2.13.0
  */
 const CSS = {
     dialog: "dialog",
@@ -67,7 +67,7 @@ const dialogDragStep = 25;
 const initialDragPosition = { x: 0, y: 0 };
 const initialResizePosition = { top: 0, right: 0, bottom: 0, left: 0 };
 
-const dialogCss = ":host{--calcite-dialog-scrim-background-color:rgba(0, 0, 0, 0.85);pointer-events:none;inset:0px;z-index:var(--calcite-z-index-overlay);display:flex;--calcite-internal-dialog-animation-offset:20px}:host([modal]){position:absolute}.container{pointer-events:auto;position:fixed;inset:0px;z-index:var(--calcite-z-index-overlay);display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--calcite-color-text-2);opacity:0;visibility:hidden;transition:visibility 0ms linear var(--calcite-internal-animation-timing-slow), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88)}:host([placement=top]) .container{align-items:flex-start;justify-content:center}:host([placement=top-start]) .container{align-items:flex-start;justify-content:flex-start}:host([placement=top-end]) .container{align-items:flex-start;justify-content:flex-end}:host([placement=bottom]) .container{align-items:flex-end;justify-content:center}:host([placement=bottom-start]) .container{align-items:flex-end;justify-content:flex-start}:host([placement=bottom-end]) .container{align-items:flex-end;justify-content:flex-end}:host(:not([modal])) .container{pointer-events:none}:host([scale=s]){--calcite-internal-dialog-content-padding:var(--calcite-dialog-content-space, var(--calcite-spacing-sm));--calcite-internal-dialog-min-size-x:198px;--calcite-internal-dialog-min-size-y:140px}:host([scale=m]){--calcite-internal-dialog-content-padding:var(--calcite-dialog-content-space, var(--calcite-spacing-md));--calcite-internal-dialog-min-size-x:288px;--calcite-internal-dialog-min-size-y:180px}:host([scale=l]){--calcite-internal-dialog-content-padding:var(--calcite-dialog-content-space, var(--calcite-spacing-lg));--calcite-internal-dialog-min-size-x:388px;--calcite-internal-dialog-min-size-y:220px}.scrim{--calcite-scrim-background:var(--calcite-dialog-scrim-background-color, var(--calcite-color-transparent-scrim));--calcite-scrim-background-color:var(\n    --calcite-dialog-scrim-background-color,\n    var(--calcite-color-transparent-scrim)\n  );position:fixed;inset:0px;display:flex;overflow-y:hidden}calcite-panel{--calcite-panel-content-space:var(--calcite-dialog-content-space, var(--calcite-internal-dialog-content-padding));--calcite-panel-footer-padding:var(--calcite-dialog-footer-space);--calcite-panel-header-border-block-end:var(--calcite-border-width-sm) solid var(--calcite-dialog-border-color)}.dialog{pointer-events:none;position:relative;z-index:var(--calcite-z-index-modal);margin:1.5rem;box-sizing:border-box;display:flex;inline-size:100%;flex-direction:column;border-radius:0.25rem;opacity:0;--tw-shadow:0 2px 12px -4px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.16);--tw-shadow-colored:0 2px 12px -4px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);-webkit-overflow-scrolling:touch;visibility:hidden;transition:inset-block var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);min-inline-size:var(--calcite-dialog-min-size-x, var(--calcite-internal-dialog-min-size-x));max-inline-size:var(--calcite-dialog-max-size-x, 100%);min-block-size:var(--calcite-dialog-min-size-y, var(--calcite-internal-dialog-min-size-y));max-block-size:var(--calcite-dialog-max-size-y, 100%);--calcite-internal-dialog-hidden-position:calc(\n    var(--calcite-dialog-offset-y, 0px) + var(--calcite-internal-dialog-animation-offset)\n  );--calcite-internal-dialog-shown-position:var(--calcite-dialog-offset-y, 0);inset-inline-start:var(--calcite-dialog-offset-x, 0);inset-block-start:var(--calcite-internal-dialog-hidden-position)}.dialog--opening-active{inset-block-start:var(--calcite-internal-dialog-shown-position)}:host([menu-open]) .dialog{transition:visibility 0ms linear var(--calcite-internal-animation-timing-slow), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88)}.panel{border-radius:0.25rem}.container--open{opacity:1;visibility:visible;transition-delay:0ms}.container--open .dialog{pointer-events:auto;visibility:visible;opacity:1;transition:inset-block var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);transition-delay:0ms}:host([width=small]) .dialog{inline-size:auto}:host([width-scale=s]) .dialog{inline-size:var(--calcite-dialog-size-x, 32rem);block-size:var(--calcite-dialog-size-y, auto)}@media screen and (max-width: 35rem){:host([width-scale=s]) .dialog{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;inset-inline-start:0;inset-block-start:var(--calcite-internal-dialog-animation-offset)}:host([width-scale=s]) .dialog--opening-active{inset-block-start:0}}:host([width-scale=m]) .dialog{inline-size:var(--calcite-dialog-size-x, 48rem);block-size:var(--calcite-dialog-size-y, auto)}@media screen and (max-width: 51rem){:host([width-scale=m]) .dialog{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;inset-inline-start:0;inset-block-start:var(--calcite-internal-dialog-animation-offset)}:host([width-scale=m]) .dialog--opening-active{inset-block-start:0}}:host([width-scale=l]) .dialog{inline-size:var(--calcite-dialog-size-x, 94rem);block-size:var(--calcite-dialog-size-y, auto)}@media screen and (max-width: 97rem){:host([width-scale=l]) .dialog{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;inset-inline-start:0;inset-block-start:var(--calcite-internal-dialog-animation-offset)}:host([width-scale=l]) .dialog--opening-active{inset-block-start:0}}:host([placement=cover]) .dialog{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;border-radius:0px}:host([placement=cover]) .panel{border-radius:0px}:host([kind]) .panel{border-start-start-radius:0px;border-start-end-radius:0px}:host([kind=brand]) .dialog{border-color:var(--calcite-color-brand)}:host([kind=danger]) .dialog{border-color:var(--calcite-color-status-danger)}:host([kind=info]) .dialog{border-color:var(--calcite-color-status-info)}:host([kind=success]) .dialog{border-color:var(--calcite-color-status-success)}:host([kind=warning]) .dialog{border-color:var(--calcite-color-status-warning)}:host([kind=brand][open]) .dialog,:host([kind=danger][open]) .dialog,:host([kind=info][open]) .dialog,:host([kind=success][open]) .dialog,:host([kind=warning][open]) .dialog{border-width:0px;border-block-start-width:4px;border-style:solid}.container--embedded{position:absolute;pointer-events:auto}.container--embedded calcite-scrim{position:absolute}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}:host([hidden]){display:none}[hidden]{display:none}";
+const dialogCss = ":host{--calcite-dialog-scrim-background-color:rgba(0, 0, 0, 0.85);pointer-events:none;inset:0px;z-index:var(--calcite-z-index-overlay);display:flex;--calcite-internal-dialog-animation-offset:20px}:host([modal]){position:absolute}.container{pointer-events:auto;position:fixed;inset:0px;z-index:var(--calcite-z-index-overlay);display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--calcite-color-text-2);opacity:0;visibility:hidden;transition:visibility 0ms linear var(--calcite-internal-animation-timing-slow), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88)}:host([placement=top]) .container{align-items:flex-start;justify-content:center}:host([placement=top-start]) .container{align-items:flex-start;justify-content:flex-start}:host([placement=top-end]) .container{align-items:flex-start;justify-content:flex-end}:host([placement=bottom]) .container{align-items:flex-end;justify-content:center}:host([placement=bottom-start]) .container{align-items:flex-end;justify-content:flex-start}:host([placement=bottom-end]) .container{align-items:flex-end;justify-content:flex-end}:host(:not([modal])) .container{pointer-events:none}:host([scale=s]){--calcite-internal-dialog-content-padding:var(--calcite-dialog-content-space, var(--calcite-spacing-sm));--calcite-internal-dialog-min-size-x:198px;--calcite-internal-dialog-min-size-y:140px}:host([scale=m]){--calcite-internal-dialog-content-padding:var(--calcite-dialog-content-space, var(--calcite-spacing-md));--calcite-internal-dialog-min-size-x:288px;--calcite-internal-dialog-min-size-y:180px}:host([scale=l]){--calcite-internal-dialog-content-padding:var(--calcite-dialog-content-space, var(--calcite-spacing-lg));--calcite-internal-dialog-min-size-x:388px;--calcite-internal-dialog-min-size-y:220px}.scrim{--calcite-scrim-background:var(--calcite-dialog-scrim-background-color, var(--calcite-color-transparent-scrim));--calcite-scrim-background-color:var(\n    --calcite-dialog-scrim-background-color,\n    var(--calcite-color-transparent-scrim)\n  );position:fixed;inset:0px;display:flex;overflow-y:hidden}calcite-panel{--calcite-panel-content-space:var(--calcite-dialog-content-space, var(--calcite-internal-dialog-content-padding));--calcite-panel-footer-padding:var(--calcite-dialog-footer-space);--calcite-panel-header-border-block-end:var(--calcite-border-width-sm) solid var(--calcite-dialog-border-color);--calcite-panel-background-color:var(--calcite-dialog-background-color)}.dialog{pointer-events:none;position:relative;z-index:var(--calcite-z-index-modal);margin:1.5rem;box-sizing:border-box;display:flex;inline-size:100%;flex-direction:column;border-radius:0.25rem;opacity:0;--tw-shadow:0 2px 12px -4px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.16);--tw-shadow-colored:0 2px 12px -4px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);-webkit-overflow-scrolling:touch;visibility:hidden;transition:inset-block var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);min-inline-size:var(--calcite-dialog-min-size-x, var(--calcite-internal-dialog-min-size-x));max-inline-size:var(--calcite-dialog-max-size-x, 100%);min-block-size:var(--calcite-dialog-min-size-y, var(--calcite-internal-dialog-min-size-y));max-block-size:var(--calcite-dialog-max-size-y, 100%);--calcite-internal-dialog-hidden-position:calc(\n    var(--calcite-dialog-offset-y, 0px) + var(--calcite-internal-dialog-animation-offset)\n  );--calcite-internal-dialog-shown-position:var(--calcite-dialog-offset-y, 0);inset-inline-start:var(--calcite-dialog-offset-x, 0);inset-block-start:var(--calcite-internal-dialog-hidden-position)}.dialog--opening-active{inset-block-start:var(--calcite-internal-dialog-shown-position)}:host([menu-open]) .dialog{transition:visibility 0ms linear var(--calcite-internal-animation-timing-slow), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88)}.panel{border-radius:0.25rem}.container--open{opacity:1;visibility:visible;transition-delay:0ms}.container--open .dialog{pointer-events:auto;visibility:visible;opacity:1;transition:inset-block var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);transition-delay:0ms}:host([width=small]) .dialog{inline-size:auto}:host([width-scale=s]) .dialog{inline-size:var(--calcite-dialog-size-x, 32rem);block-size:var(--calcite-dialog-size-y, auto)}@media screen and (max-width: 35rem){:host([width-scale=s]) .dialog{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;inset-inline-start:0;inset-block-start:var(--calcite-internal-dialog-animation-offset)}:host([width-scale=s]) .dialog--opening-active{inset-block-start:0}}:host([width-scale=m]) .dialog{inline-size:var(--calcite-dialog-size-x, 48rem);block-size:var(--calcite-dialog-size-y, auto)}@media screen and (max-width: 51rem){:host([width-scale=m]) .dialog{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;inset-inline-start:0;inset-block-start:var(--calcite-internal-dialog-animation-offset)}:host([width-scale=m]) .dialog--opening-active{inset-block-start:0}}:host([width-scale=l]) .dialog{inline-size:var(--calcite-dialog-size-x, 94rem);block-size:var(--calcite-dialog-size-y, auto)}@media screen and (max-width: 97rem){:host([width-scale=l]) .dialog{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;inset-inline-start:0;inset-block-start:var(--calcite-internal-dialog-animation-offset)}:host([width-scale=l]) .dialog--opening-active{inset-block-start:0}}:host([placement=cover]) .dialog{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;border-radius:0px}:host([placement=cover]) .panel{border-radius:0px}:host([kind]) .panel{border-start-start-radius:0px;border-start-end-radius:0px}:host([kind=brand]) .dialog{border-color:var(--calcite-color-brand)}:host([kind=danger]) .dialog{border-color:var(--calcite-color-status-danger)}:host([kind=info]) .dialog{border-color:var(--calcite-color-status-info)}:host([kind=success]) .dialog{border-color:var(--calcite-color-status-success)}:host([kind=warning]) .dialog{border-color:var(--calcite-color-status-warning)}:host([kind=brand][open]) .dialog,:host([kind=danger][open]) .dialog,:host([kind=info][open]) .dialog,:host([kind=success][open]) .dialog,:host([kind=warning][open]) .dialog{border-width:0px;border-block-start-width:4px;border-style:solid}.container--embedded{position:absolute;pointer-events:auto}.container--embedded calcite-scrim{position:absolute}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}:host([hidden]){display:none}[hidden]{display:none}";
 const CalciteDialogStyle0 = dialogCss;
 
 let totalOpenDialogs = 0;
@@ -169,9 +169,6 @@ const Dialog = /*@__PURE__*/ proxyCustomElement(class Dialog extends HTMLElement
                     break;
             }
         };
-        this.setContainerEl = (el) => {
-            this.containerEl = el;
-        };
         this.setTransitionEl = (el) => {
             this.transitionEl = el;
             this.setupInteractions();
@@ -195,7 +192,7 @@ const Dialog = /*@__PURE__*/ proxyCustomElement(class Dialog extends HTMLElement
             this.open = false;
         };
         this.handlePanelKeyDown = (event) => {
-            if (this.escapeDisabled) {
+            if (this.escapeDisabled && event.key === "Escape") {
                 event.preventDefault();
             }
         };
@@ -301,11 +298,11 @@ const Dialog = /*@__PURE__*/ proxyCustomElement(class Dialog extends HTMLElement
     }
     render() {
         const { assistiveText, description, heading, opened } = this;
-        return (h(Host, { key: '6a00a9f9c7c9ba8079b24cae446322bfa258348d' }, h("div", { key: 'd7a5e0f37a1fe05852bdd1b88a8b47f185e1bf71', class: {
+        return (h(Host, { key: 'bf406255eaa6d94c8443af185a74a2b2d58c6d59' }, h("div", { key: 'de2a34b6da4a82c66e9fafdbdd2056e4e11e1315', class: {
                 [CSS.container]: true,
                 [CSS.containerOpen]: opened,
                 [CSS.containerEmbedded]: this.embedded,
-            }, ref: this.setContainerEl }, this.modal ? (h("calcite-scrim", { class: CSS.scrim, onClick: this.handleOutsideClose })) : null, h("div", { key: 'f0236b163b7f7856033c581b9191d0fc491eee46', "aria-description": description, "aria-label": heading, "aria-modal": toAriaBoolean(this.modal), class: CSS.dialog, onKeyDown: this.handleKeyDown, ref: this.setTransitionEl, role: "dialog" }, assistiveText ? (h("div", { "aria-live": "polite", class: CSS.assistiveText, key: "assistive-text" }, assistiveText)) : null, h("slot", { key: 'b0d18a7ce3e4ad5df276b8f04f41284bbe55efff', name: SLOTS.content }, h("calcite-panel", { key: '65bcc069837d6749c84351d7ca29c82e112ff809', beforeClose: this.beforeClose, class: CSS.panel, closable: !this.closeDisabled, closed: !opened, description: description, heading: heading, headingLevel: this.headingLevel, loading: this.loading, menuOpen: this.menuOpen, messageOverrides: this.messageOverrides, onCalcitePanelClose: this.handleInternalPanelCloseClick, onCalcitePanelScroll: this.handleInternalPanelScroll, onKeyDown: this.handlePanelKeyDown, overlayPositioning: this.overlayPositioning, ref: (el) => (this.panelEl = el), scale: this.scale }, h("slot", { key: '90a1b0007537031a9c1ae3761f48d05d3dd62d78', name: SLOTS.actionBar, slot: SLOTS$1.actionBar }), h("slot", { key: 'b32c13fd7cf274e1fb9ffa071a7406e1a26e0b72', name: SLOTS.alerts, slot: SLOTS$1.alerts }), h("slot", { key: 'd3433c5b0ed4ec801950a72cea50f61efa9b6b8e', name: SLOTS.headerActionsStart, slot: SLOTS$1.headerActionsStart }), h("slot", { key: '164df8e6a746f0e351c629193c5052a3f9254e48', name: SLOTS.headerActionsEnd, slot: SLOTS$1.headerActionsEnd }), h("slot", { key: 'e67304954b705afe57384f27214ecab5b89eaed9', name: SLOTS.headerContent, slot: SLOTS$1.headerContent }), h("slot", { key: 'b4108e58478e2e4e00494c8c8e7b1790804f55ee', name: SLOTS.headerMenuActions, slot: SLOTS$1.headerMenuActions }), h("slot", { key: 'c9b54cd7003e3ff18c000fb32215b9dd0de6586e', name: SLOTS.fab, slot: SLOTS$1.fab }), h("slot", { key: 'bf3b9d2fcbbda75832d3c27a4a5118b7eca0c891', name: SLOTS.contentTop, slot: SLOTS$1.contentTop }), h("slot", { key: 'db86d0c4aa3b8655e6566462d47c33d2ae2a8518', name: SLOTS.contentBottom, slot: SLOTS$1.contentBottom }), h("slot", { key: '98d5f7a2864e00b5f5a13110b892c7f52c12cf93', name: SLOTS.footerStart, slot: SLOTS$1.footerStart }), h("slot", { key: '8a104a39303414390b745f23987466abaa7a874c', name: SLOTS.footer, slot: SLOTS$1.footer }), h("slot", { key: '15673502ce16cab5f70c6be6204c8b9d59c3ce88', name: SLOTS.footerEnd, slot: SLOTS$1.footerEnd }), h("slot", { key: '7dfb7dd86d4019c9256adccc7b16554b9fe0a05c' })))))));
+            } }, this.modal ? (h("calcite-scrim", { class: CSS.scrim, onClick: this.handleOutsideClose })) : null, h("div", { key: 'be47093e3a955ce45a71c555700143a4a1c7a166', "aria-description": description, "aria-label": heading, "aria-modal": toAriaBoolean(this.modal), class: CSS.dialog, onKeyDown: this.handleKeyDown, ref: this.setTransitionEl, role: "dialog" }, assistiveText ? (h("div", { "aria-live": "polite", class: CSS.assistiveText, key: "assistive-text" }, assistiveText)) : null, h("slot", { key: '6ed9f10ae7d5ecc1ec9062d6aba559001d5194e6', name: SLOTS.content }, h("calcite-panel", { key: 'cd6ebaa7d7362cbeb70e9ae623f38298d1e831e3', beforeClose: this.beforeClose, class: CSS.panel, closable: !this.closeDisabled, closed: !opened, description: description, heading: heading, headingLevel: this.headingLevel, loading: this.loading, menuOpen: this.menuOpen, messageOverrides: this.messageOverrides, onCalcitePanelClose: this.handleInternalPanelCloseClick, onCalcitePanelScroll: this.handleInternalPanelScroll, onKeyDown: this.handlePanelKeyDown, overlayPositioning: this.overlayPositioning, ref: (el) => (this.panelEl = el), scale: this.scale }, h("slot", { key: '2ce955775c33b09fc849a083d0bcc1c8ce523dd8', name: SLOTS.actionBar, slot: SLOTS$1.actionBar }), h("slot", { key: 'dd44184de251320af6225baa2e59571b881a23cd', name: SLOTS.alerts, slot: SLOTS$1.alerts }), h("slot", { key: 'da343a1a10e015b04b37463c10592e612a576e9b', name: SLOTS.headerActionsStart, slot: SLOTS$1.headerActionsStart }), h("slot", { key: '6680fde2bd7ad6dc5803c78ea7250d11d4920b7c', name: SLOTS.headerActionsEnd, slot: SLOTS$1.headerActionsEnd }), h("slot", { key: 'a17ca64188ffe6000792e67eafc838df575ebbc3', name: SLOTS.headerContent, slot: SLOTS$1.headerContent }), h("slot", { key: '7e048c4a9104053ca0a61ab2514b018efb4fc872', name: SLOTS.headerMenuActions, slot: SLOTS$1.headerMenuActions }), h("slot", { key: '6760c8a6c105a511fcb859cfd222f8c1355a82c4', name: SLOTS.fab, slot: SLOTS$1.fab }), h("slot", { key: 'e0f2e7644281d408d8c21ce5bf16b08af0a59c3b', name: SLOTS.contentTop, slot: SLOTS$1.contentTop }), h("slot", { key: '01889c3b7fc13bc49521c27feb2ab35346552504', name: SLOTS.contentBottom, slot: SLOTS$1.contentBottom }), h("slot", { key: '593bad35110b5d7e7b44d598b397e4b87cc28e28', name: SLOTS.footerStart, slot: SLOTS$1.footerStart }), h("slot", { key: '5e84099e096a6afb678cce9731b189f4011dc067', name: SLOTS.footer, slot: SLOTS$1.footer }), h("slot", { key: '69a805bd0c1f43a6d165939e62db562428f39f11', name: SLOTS.footerEnd, slot: SLOTS$1.footerEnd }), h("slot", { key: 'b49e14ff6d2c63caaa8fd296920618e7673eb71b' })))))));
     }
     effectiveLocaleChange() {
         updateMessages(this, this.effectiveLocale);

package/dist/components/calcite-fab.js

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

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

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

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

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

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

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