@esri/calcite-components 1.0.0-next.549 → 1.0.0-next.551

package/dist/custom-elements/index.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.549
+ * v1.0.0-next.551
  */
 import { HTMLElement as HTMLElement$1, createEvent, h, Build, forceUpdate, Host, Fragment, getAssetPath, proxyCustomElement } from '@stencil/core/internal/client';
 export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
@@ -13,7 +13,7 @@ const Accordion = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteInternalAccordionChange = createEvent(this, "calciteInternalAccordionChange", 7);
+    this.calciteInternalAccordionChange = createEvent(this, "calciteInternalAccordionChange", 6);
     //--------------------------------------------------------------------------
     //
     //  Public Properties
@@ -422,10 +422,10 @@ const AccordionItem = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteInternalAccordionItemKeyEvent = createEvent(this, "calciteInternalAccordionItemKeyEvent", 7);
-    this.calciteInternalAccordionItemSelect = createEvent(this, "calciteInternalAccordionItemSelect", 7);
-    this.calciteInternalAccordionItemClose = createEvent(this, "calciteInternalAccordionItemClose", 7);
-    this.calciteInternalAccordionItemRegister = createEvent(this, "calciteInternalAccordionItemRegister", 7);
+    this.calciteInternalAccordionItemKeyEvent = createEvent(this, "calciteInternalAccordionItemKeyEvent", 6);
+    this.calciteInternalAccordionItemSelect = createEvent(this, "calciteInternalAccordionItemSelect", 6);
+    this.calciteInternalAccordionItemClose = createEvent(this, "calciteInternalAccordionItemClose", 6);
+    this.calciteInternalAccordionItemRegister = createEvent(this, "calciteInternalAccordionItemRegister", 6);
     //--------------------------------------------------------------------------
     //
     //  Public Properties
@@ -636,7 +636,7 @@ const Action = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteActionClick = createEvent(this, "calciteActionClick", 7);
+    this.calciteActionClick = createEvent(this, "calciteActionClick", 6);
     // --------------------------------------------------------------------------
     //
     //  Properties
@@ -2152,7 +2152,7 @@ const ActionBar = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteActionBarToggle = createEvent(this, "calciteActionBarToggle", 7);
+    this.calciteActionBarToggle = createEvent(this, "calciteActionBarToggle", 6);
     // --------------------------------------------------------------------------
     //
     //  Properties
@@ -2415,7 +2415,7 @@ const ActionMenu = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteActionMenuOpenChange = createEvent(this, "calciteActionMenuOpenChange", 7);
+    this.calciteActionMenuOpenChange = createEvent(this, "calciteActionMenuOpenChange", 6);
     // --------------------------------------------------------------------------
     //
     //  Properties
@@ -2690,7 +2690,7 @@ const ActionPad = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteActionPadToggle = createEvent(this, "calciteActionPadToggle", 7);
+    this.calciteActionPadToggle = createEvent(this, "calciteActionPadToggle", 6);
     // --------------------------------------------------------------------------
     //
     //  Properties
@@ -2812,6 +2812,51 @@ var StatusIcons;
   StatusIcons["blue"] = "lightbulb";
 })(StatusIcons || (StatusIcons = {}));
 
+const componentToTransitionListeners = new WeakMap();
+function transitionStart(event) {
+  if (event.propertyName === this.openTransitionProp && event.target === this.transitionEl) {
+    this.open ? this.onBeforeOpen() : this.onBeforeClose();
+  }
+}
+function transitionEnd(event) {
+  if (event.propertyName === this.openTransitionProp && event.target === this.transitionEl) {
+    this.open ? this.onOpen() : this.onClose();
+  }
+}
+/**
+ * Helper to keep track of transition listeners on setTransitionEl and connectedCallback on OpenCloseComponent components.
+ *
+ * @param component
+ */
+function connectOpenCloseComponent(component) {
+  disconnectOpenCloseComponent(component);
+  if (component.transitionEl) {
+    const boundOnTransitionStart = transitionStart.bind(component);
+    const boundOnTransitionEnd = transitionEnd.bind(component);
+    componentToTransitionListeners.set(component, [
+      component.transitionEl,
+      boundOnTransitionStart,
+      boundOnTransitionEnd
+    ]);
+    component.transitionEl.addEventListener("transitionstart", boundOnTransitionStart);
+    component.transitionEl.addEventListener("transitionend", boundOnTransitionEnd);
+  }
+}
+/**
+ * Helper to tear down transition listeners on disconnectedCallback on OpenCloseComponent components.
+ *
+ * @param component
+ */
+function disconnectOpenCloseComponent(component) {
+  if (!componentToTransitionListeners.has(component)) {
+    return;
+  }
+  const [transitionEl, start, end] = componentToTransitionListeners.get(component);
+  transitionEl.removeEventListener("transitionstart", start);
+  transitionEl.removeEventListener("transitionend", end);
+  componentToTransitionListeners.delete(component);
+}
+
 const alertCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host([scale=s]){--calcite-alert-width:40em;--calcite-alert-spacing-token-small:0.5rem;--calcite-alert-spacing-token-large:0.75rem}:host([scale=s]) slot[name=title]::slotted(*),:host([scale=s]) *::slotted([slot=title]){font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=s]) slot[name=message]::slotted(*),:host([scale=s]) *::slotted([slot=message]){font-size:var(--calcite-font-size--2);line-height:1.375}:host([scale=s]) slot[name=link]::slotted(*),:host([scale=s]) *::slotted([slot=link]){font-size:var(--calcite-font-size--2);line-height:1.375}:host([scale=s]) .alert-queue-count{margin-inline:0.5rem}:host([scale=s]) .container{--calcite-alert-min-height:3.5rem}:host([scale=s]) .alert-close{padding:0.5rem}:host([scale=m]){--calcite-alert-width:50em;--calcite-alert-spacing-token-small:0.75rem;--calcite-alert-spacing-token-large:1rem}:host([scale=m]) slot[name=title]::slotted(*),:host([scale=m]) *::slotted([slot=title]){font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=m]) slot[name=message]::slotted(*),:host([scale=m]) *::slotted([slot=message]){font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=m]) slot[name=link]::slotted(*),:host([scale=m]) *::slotted([slot=link]){font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=m]) .alert-queue-count{margin-inline:0.75rem}:host([scale=m]) .container{--calcite-alert-min-height:4.1875rem}:host([scale=l]){--calcite-alert-width:60em;--calcite-alert-spacing-token-small:1rem;--calcite-alert-spacing-token-large:1.25rem}:host([scale=l]) slot[name=title]::slotted(*),:host([scale=l]) *::slotted([slot=title]){-webkit-margin-after:0.25rem;margin-block-end:0.25rem;font-size:var(--calcite-font-size-1);line-height:1.375}:host([scale=l]) slot[name=message]::slotted(*),:host([scale=l]) *::slotted([slot=message]){font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=l]) slot[name=link]::slotted(*),:host([scale=l]) *::slotted([slot=link]){font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=l]) .alert-queue-count{margin-inline:1rem}:host([scale=l]) .container{--calcite-alert-min-height:5.625rem}:host{--calcite-alert-edge-distance:2rem;display:block}:host .container{pointer-events:none;position:fixed;margin-block:0px;margin-inline:auto;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:var(--calcite-ui-foreground-1);opacity:0;--tw-shadow:0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);--tw-shadow-colored:0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);border-radius:var(--calcite-border-radius);-webkit-border-before:0px solid transparent;border-block-start:0px solid transparent;border-inline:1px solid var(--calcite-ui-border-3);-webkit-border-after:1px solid var(--calcite-ui-border-3);border-block-end:1px solid var(--calcite-ui-border-3);min-block-size:var(--calcite-alert-min-height);inline-size:var(--calcite-alert-width);max-inline-size:calc(100% - (var(--calcite-alert-edge-distance) * 2 + 2px));max-block-size:0;z-index:101;-webkit-transition: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), all var(--calcite-animation-timing) ease-in-out;transition: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), all var(--calcite-animation-timing) ease-in-out}:host .container.bottom,:host .container.top{inset-inline-end:0;inset-inline-start:0}:host .container[class*=bottom]{-webkit-transform:translate3d(0, var(--calcite-alert-edge-distance), 0);transform:translate3d(0, var(--calcite-alert-edge-distance), 0);inset-block-end:var(--calcite-alert-edge-distance)}:host .container[class*=top]{-webkit-transform:translate3d(0, calc(-1 * var(--calcite-alert-edge-distance)), 0);transform:translate3d(0, calc(-1 * var(--calcite-alert-edge-distance)), 0);inset-block-start:var(--calcite-alert-edge-distance)}:host .container[class*=-start]{inset-inline-start:var(--calcite-alert-edge-distance);inset-inline-end:auto}:host .container[class*=-end]{inset-inline-end:var(--calcite-alert-edge-distance);inset-inline-start:auto}:host([calcite-hydrated-hidden]){visibility:hidden !important;pointer-events:none}.container{display:-ms-flexbox;display:flex;inline-size:100%;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.alert-close{outline-color:transparent}.alert-close:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}:host([open]) .container:not(.queued){max-block-size:100%;border-block-start-width:2px;opacity:1;pointer-events:initial}:host([open]) .container:not(.queued)[class*=bottom]{-webkit-transform:translate3d(0, calc(-1 * var(--calcite-alert-edge-distance)), inherit);transform:translate3d(0, calc(-1 * var(--calcite-alert-edge-distance)), inherit)}:host([open]) .container:not(.queued)[class*=top]{-webkit-transform:translate3d(0, var(--calcite-alert-edge-distance), inherit);transform:translate3d(0, var(--calcite-alert-edge-distance), inherit)}slot[name=title]::slotted(*),*::slotted([slot=title]){font-size:var(--calcite-font-size-0);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1)}slot[name=message]::slotted(*),*::slotted([slot=message]){margin:0px;display:inline;font-size:var(--calcite-font-size--1);line-height:1.375;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-2);-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}slot[name=link]::slotted(*),*::slotted([slot=link]){display:-ms-inline-flexbox;display:inline-flex;color:var(--calcite-ui-text-link)}.alert-content{-webkit-transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;padding-inline:var(--calcite-alert-spacing-token-large);-ms-flex:0 0 auto;flex:0 0 auto;overflow-wrap:break-word;background-color:var(--calcite-ui-foreground-1);-ms-flex:1 1 auto;flex:1 1 auto;min-inline-size:0;padding-block:var(--calcite-alert-spacing-token-small);padding-inline:0 var(--calcite-alert-spacing-token-small);border-end-start-radius:var(--calcite-border-radius);border-end-end-radius:var(--calcite-border-radius)}.alert-content:first-of-type:not(:only-child){-webkit-padding-start:var(--calcite-alert-spacing-token-large);padding-inline-start:var(--calcite-alert-spacing-token-large)}.alert-content:only-child{padding:var(--calcite-alert-spacing-token-small)}.alert-icon{-webkit-transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;padding-block:var(--calcite-alert-spacing-token-small);padding-inline:var(--calcite-alert-spacing-token-large);-ms-flex:0 0 auto;flex:0 0 auto;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-item-align:stretch;align-self:stretch;background-color:var(--calcite-ui-foreground-1);padding-block:0px}.alert-close{-webkit-transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;padding-block:var(--calcite-alert-spacing-token-small);padding-inline:var(--calcite-alert-spacing-token-large);-ms-flex:0 0 auto;flex:0 0 auto;cursor:pointer;-ms-flex-item-align:stretch;align-self:stretch;overflow:hidden;border-style:none;background-color:var(--calcite-ui-foreground-1);padding-block:0px;color:var(--calcite-ui-text-3);outline:2px solid transparent;outline-offset:2px;border-end-end-radius:var(--calcite-border-radius)}.alert-close:hover,.alert-close:focus{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-text-1)}.alert-close:open{background-color:var(--calcite-ui-foreground-3)}.alert-queue-count{visibility:hidden;display:-ms-flexbox;display:flex;cursor:default;-ms-flex-align:center;align-items:center;-ms-flex-pack:distribute;justify-content:space-around;-ms-flex-item-align:stretch;align-self:stretch;overflow:hidden;background-color:var(--calcite-ui-foreground-1);text-align:center;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-2);opacity:0;-webkit-transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-inline:0px solid transparent;border-start-end-radius:0}.alert-queue-count.active{visibility:visible;opacity:1}:host([auto-dismiss])>.alert-queue-count{-webkit-border-end:0px solid transparent;border-inline-end:0px solid transparent}.alert-dismiss-progress{position:absolute;inset-inline:0px;display:block;inline-size:100%;overflow:hidden;inset-block-start:-2px;block-size:2px;z-index:103;border-radius:var(--calcite-border-radius) var(--calcite-border-radius) 0 0}.alert-dismiss-progress:after{position:absolute;inset-block-start:0px;display:block;block-size:2px;content:\"\";background-color:var(--calcite-alert-dismiss-progress-background);z-index:104;inset-inline-end:0}:host([color=blue]) .container{border-block-start-color:var(--calcite-ui-info)}:host([color=blue]) .container .alert-icon{color:var(--calcite-ui-info)}:host([color=red]) .container{border-block-start-color:var(--calcite-ui-danger)}:host([color=red]) .container .alert-icon{color:var(--calcite-ui-danger)}:host([color=yellow]) .container{border-block-start-color:var(--calcite-ui-warning)}:host([color=yellow]) .container .alert-icon{color:var(--calcite-ui-warning)}:host([color=green]) .container{border-block-start-color:var(--calcite-ui-success)}:host([color=green]) .container .alert-icon{color:var(--calcite-ui-success)}:host([auto-dismiss-duration=fast]) .alert-dismiss-progress:after{-webkit-animation:dismissProgress 6000ms ease-out;animation:dismissProgress 6000ms ease-out}:host([auto-dismiss-duration=medium]) .alert-dismiss-progress:after{-webkit-animation:dismissProgress 10000ms ease-out;animation:dismissProgress 10000ms ease-out}:host([auto-dismiss-duration=slow]) .alert-dismiss-progress:after{-webkit-animation:dismissProgress 14000ms ease-out;animation:dismissProgress 14000ms ease-out}@-webkit-keyframes dismissProgress{0%{inline-size:0px;opacity:0.75}100%{inline-size:100%;opacity:1}}@keyframes dismissProgress{0%{inline-size:0px;opacity:0.75}100%{inline-size:100%;opacity:1}}";
 
 const Alert = class extends HTMLElement$1 {
@@ -2819,12 +2864,12 @@ const Alert = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteAlertBeforeClose = createEvent(this, "calciteAlertBeforeClose", 7);
-    this.calciteAlertClose = createEvent(this, "calciteAlertClose", 7);
-    this.calciteAlertBeforeOpen = createEvent(this, "calciteAlertBeforeOpen", 7);
-    this.calciteAlertOpen = createEvent(this, "calciteAlertOpen", 7);
-    this.calciteInternalAlertSync = createEvent(this, "calciteInternalAlertSync", 7);
-    this.calciteInternalAlertRegister = createEvent(this, "calciteInternalAlertRegister", 7);
+    this.calciteAlertBeforeClose = createEvent(this, "calciteAlertBeforeClose", 6);
+    this.calciteAlertClose = createEvent(this, "calciteAlertClose", 6);
+    this.calciteAlertBeforeOpen = createEvent(this, "calciteAlertBeforeOpen", 6);
+    this.calciteAlertOpen = createEvent(this, "calciteAlertOpen", 6);
+    this.calciteInternalAlertSync = createEvent(this, "calciteInternalAlertSync", 6);
+    this.calciteInternalAlertRegister = createEvent(this, "calciteInternalAlertRegister", 6);
     //--------------------------------------------------------------------------
     //
     //  Properties
@@ -2865,13 +2910,18 @@ const Alert = class extends HTMLElement$1 {
     this.queueLength = 0;
     /** is the alert queued */
     this.queued = false;
-    this.setContainerEl = (el) => {
-      this.containerEl = el;
-      this.containerEl.addEventListener("transitionstart", this.transitionStartHandler);
-    };
     this.autoDismissTimeoutId = null;
     this.trackTimer = Date.now();
-    this.activeTransitionProp = "opacity";
+    this.openTransitionProp = "opacity";
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    this.setTransitionEl = (el) => {
+      this.transitionEl = el;
+      connectOpenCloseComponent(this);
+    };
     /** close and emit calciteInternalAlertSync event with the updated queue payload */
     this.closeAlert = () => {
       this.autoDismissTimeoutId = null;
@@ -2881,16 +2931,6 @@ const Alert = class extends HTMLElement$1 {
       this.determineActiveAlert();
       this.calciteInternalAlertSync.emit({ queue: this.queue });
     };
-    this.transitionStartHandler = (event) => {
-      if (event.propertyName === this.activeTransitionProp && event.target === this.containerEl) {
-        this.open ? this.onBeforeOpen() : this.onBeforeClose();
-      }
-    };
-    this.transitionEnd = (event) => {
-      if (event.propertyName === this.activeTransitionProp && event.target === this.containerEl) {
-        this.open ? this.onOpen() : this.onClose();
-      }
-    };
   }
   activeHandler(value) {
     this.open = value;
@@ -2927,14 +2967,14 @@ const Alert = class extends HTMLElement$1 {
       this.openHandler(open);
       this.calciteInternalAlertRegister.emit();
     }
+    connectOpenCloseComponent(this);
   }
   componentWillLoad() {
     this.requestedIcon = setRequestedIcon(StatusIcons, this.icon, this.color);
   }
   disconnectedCallback() {
-    var _a;
     window.clearTimeout(this.autoDismissTimeoutId);
-    (_a = this.containerEl) === null || _a === void 0 ? void 0 : _a.removeEventListener("transitionstart", this.transitionStartHandler);
+    disconnectOpenCloseComponent(this);
   }
   render() {
     const closeButton = (h("button", { "aria-label": this.intlClose, class: "alert-close", onClick: this.closeAlert, ref: (el) => (this.closeButton = el), type: "button" }, h("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : "s" })));
@@ -2947,7 +2987,7 @@ const Alert = class extends HTMLElement$1 {
         container: true,
         queued,
         [placement]: true
-      }, onTransitionEnd: this.transitionEnd, ref: this.setContainerEl }, requestedIcon ? (h("div", { class: "alert-icon" }, h("calcite-icon", { icon: requestedIcon, scale: this.scale === "l" ? "m" : "s" }))) : null, h("div", { class: "alert-content" }, h("slot", { name: SLOTS$n.title }), h("slot", { name: SLOTS$n.message }), h("slot", { name: SLOTS$n.link })), queueCount, !autoDismiss ? closeButton : null, active && !queued && autoDismiss ? h("div", { class: "alert-dismiss-progress" }) : null)));
+      }, ref: this.setTransitionEl }, requestedIcon ? (h("div", { class: "alert-icon" }, h("calcite-icon", { icon: requestedIcon, scale: this.scale === "l" ? "m" : "s" }))) : null, h("div", { class: "alert-content" }, h("slot", { name: SLOTS$n.title }), h("slot", { name: SLOTS$n.message }), h("slot", { name: SLOTS$n.link })), queueCount, !autoDismiss ? closeButton : null, active && !queued && autoDismiss ? h("div", { class: "alert-dismiss-progress" }) : null)));
   }
   // when an alert is opened or closed, update queue and determine active alert
   alertSync(event) {
@@ -2985,11 +3025,6 @@ const Alert = class extends HTMLElement$1 {
       this.closeButton.focus();
     }
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  //--------------------------------------------------------------------------
   /** determine which alert is active */
   determineActiveAlert() {
     var _a;
@@ -3333,7 +3368,7 @@ const Block = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteBlockToggle = createEvent(this, "calciteBlockToggle", 7);
+    this.calciteBlockToggle = createEvent(this, "calciteBlockToggle", 6);
     // --------------------------------------------------------------------------
     //
     //  Properties
@@ -3499,7 +3534,7 @@ const BlockSection = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteBlockSectionToggle = createEvent(this, "calciteBlockSectionToggle", 7);
+    this.calciteBlockSectionToggle = createEvent(this, "calciteBlockSectionToggle", 6);
     /**
      * When true, the block's section content will be displayed.
      */
@@ -4105,7 +4140,7 @@ const Card = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteCardSelect = createEvent(this, "calciteCardSelect", 7);
+    this.calciteCardSelect = createEvent(this, "calciteCardSelect", 6);
     //--------------------------------------------------------------------------
     //
     //  Public Properties
@@ -4211,9 +4246,9 @@ const Checkbox = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteInternalCheckboxBlur = createEvent(this, "calciteInternalCheckboxBlur", 7);
-    this.calciteCheckboxChange = createEvent(this, "calciteCheckboxChange", 7);
-    this.calciteInternalCheckboxFocus = createEvent(this, "calciteInternalCheckboxFocus", 7);
+    this.calciteInternalCheckboxBlur = createEvent(this, "calciteInternalCheckboxBlur", 6);
+    this.calciteCheckboxChange = createEvent(this, "calciteCheckboxChange", 6);
+    this.calciteInternalCheckboxFocus = createEvent(this, "calciteInternalCheckboxFocus", 6);
     //--------------------------------------------------------------------------
     //
     //  Properties
@@ -4351,7 +4386,7 @@ const Chip = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteChipDismiss = createEvent(this, "calciteChipDismiss", 7);
+    this.calciteChipDismiss = createEvent(this, "calciteChipDismiss", 6);
     //--------------------------------------------------------------------------
     //
     //  Public Properties
@@ -6683,8 +6718,8 @@ const ColorPicker = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteColorPickerChange = createEvent(this, "calciteColorPickerChange", 7);
-    this.calciteColorPickerInput = createEvent(this, "calciteColorPickerInput", 7);
+    this.calciteColorPickerChange = createEvent(this, "calciteColorPickerChange", 6);
+    this.calciteColorPickerInput = createEvent(this, "calciteColorPickerInput", 6);
     //--------------------------------------------------------------------------
     //
     //  Public properties
@@ -7513,7 +7548,7 @@ const ColorPickerHexInput = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteColorPickerHexInputChange = createEvent(this, "calciteColorPickerHexInputChange", 7);
+    this.calciteColorPickerHexInputChange = createEvent(this, "calciteColorPickerHexInputChange", 6);
     //--------------------------------------------------------------------------
     //
     //  Public Properties
@@ -9428,14 +9463,14 @@ const Combobox = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteLookupChange = createEvent(this, "calciteLookupChange", 7);
-    this.calciteComboboxChange = createEvent(this, "calciteComboboxChange", 7);
-    this.calciteComboboxFilterChange = createEvent(this, "calciteComboboxFilterChange", 7);
-    this.calciteComboboxChipDismiss = createEvent(this, "calciteComboboxChipDismiss", 7);
-    this.calciteComboboxBeforeClose = createEvent(this, "calciteComboboxBeforeClose", 7);
-    this.calciteComboboxClose = createEvent(this, "calciteComboboxClose", 7);
-    this.calciteComboboxBeforeOpen = createEvent(this, "calciteComboboxBeforeOpen", 7);
-    this.calciteComboboxOpen = createEvent(this, "calciteComboboxOpen", 7);
+    this.calciteLookupChange = createEvent(this, "calciteLookupChange", 6);
+    this.calciteComboboxChange = createEvent(this, "calciteComboboxChange", 6);
+    this.calciteComboboxFilterChange = createEvent(this, "calciteComboboxFilterChange", 6);
+    this.calciteComboboxChipDismiss = createEvent(this, "calciteComboboxChipDismiss", 6);
+    this.calciteComboboxBeforeClose = createEvent(this, "calciteComboboxBeforeClose", 6);
+    this.calciteComboboxClose = createEvent(this, "calciteComboboxClose", 6);
+    this.calciteComboboxBeforeOpen = createEvent(this, "calciteComboboxBeforeOpen", 6);
+    this.calciteComboboxOpen = createEvent(this, "calciteComboboxOpen", 6);
     //--------------------------------------------------------------------------
     //
     //  Public Properties
@@ -9499,7 +9534,7 @@ const Combobox = class extends HTMLElement$1 {
     this.guid = guid();
     this.inputHeight = 0;
     this.ignoreSelectedEventsFlag = false;
-    this.activeTransitionProp = "opacity";
+    this.openTransitionProp = "opacity";
     // --------------------------------------------------------------------------
     //
     //  Private Methods
@@ -9618,16 +9653,6 @@ const Combobox = class extends HTMLElement$1 {
       this.open = false;
       this.el.removeEventListener("calciteComboboxOpen", this.toggleOpenEnd);
     };
-    this.transitionEnd = (event) => {
-      if (event.propertyName === this.activeTransitionProp && event.target === this.listContainerEl) {
-        this.open ? this.onOpen() : this.onClose();
-      }
-    };
-    this.transitionStartHandler = (event) => {
-      if (event.propertyName === this.activeTransitionProp && event.target === this.listContainerEl) {
-        this.open ? this.onBeforeOpen() : this.onBeforeClose();
-      }
-    };
     this.setMaxScrollerHeight = async () => {
       const { listContainerEl, open, referenceEl } = this;
       if (!listContainerEl || !open) {
@@ -9677,10 +9702,11 @@ const Combobox = class extends HTMLElement$1 {
       this.floatingEl = el;
       connectFloatingUI(this, this.referenceEl, this.floatingEl);
     };
-    this.setListContainerEl = (el) => {
+    this.setContainerEl = (el) => {
       this.resizeObserver.observe(el);
       this.listContainerEl = el;
-      this.listContainerEl.addEventListener("transitionstart", this.transitionStartHandler);
+      this.transitionEl = el;
+      connectOpenCloseComponent(this);
     };
     this.setReferenceEl = (el) => {
       this.referenceEl = el;
@@ -9862,6 +9888,7 @@ const Combobox = class extends HTMLElement$1 {
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
     connectLabel(this);
     connectForm(this);
+    connectOpenCloseComponent(this);
     this.reposition();
     this.setFilteredPlacements();
     if (this.active) {
@@ -9886,13 +9913,13 @@ const Combobox = class extends HTMLElement$1 {
     updateHostInteraction(this);
   }
   disconnectedCallback() {
-    var _a, _b, _c;
+    var _a, _b;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
     disconnectLabel(this);
     disconnectForm(this);
     disconnectFloatingUI(this, this.referenceEl, this.floatingEl);
-    (_c = this.listContainerEl) === null || _c === void 0 ? void 0 : _c.removeEventListener("transitionstart", this.transitionStartHandler);
+    disconnectOpenCloseComponent(this);
   }
   selectedItemsHandler() {
     this.internalValueChangeFlag = true;
@@ -10181,7 +10208,7 @@ const Combobox = class extends HTMLElement$1 {
     return this.visibleItems.map((item) => (h("li", { "aria-selected": toAriaBoolean(item.selected), id: item.guid ? `${itemUidPrefix}${item.guid}` : null, role: "option", tabindex: "-1" }, item.textLabel)));
   }
   renderFloatingUIContainer() {
-    const { active, setFloatingEl, setListContainerEl, open } = this;
+    const { active, setFloatingEl, setContainerEl, open } = this;
     const classes = {
       "list-container": true,
       [FloatingCSS.animation]: true,
@@ -10190,7 +10217,7 @@ const Combobox = class extends HTMLElement$1 {
     return (h("div", { "aria-hidden": "true", class: {
         "floating-ui-container": true,
         "floating-ui-container--active": open || active
-      }, ref: setFloatingEl }, h("div", { class: classes, onTransitionEnd: this.transitionEnd, ref: setListContainerEl }, h("ul", { class: { list: true, "list--hide": !(open || active) } }, h("slot", null)))));
+      }, ref: setFloatingEl }, h("div", { class: classes, ref: setContainerEl }, h("ul", { class: { list: true, "list--hide": !(open || active) } }, h("slot", null)))));
   }
   renderIconStart() {
     var _a;
@@ -10248,7 +10275,7 @@ const ComboboxItem = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteComboboxItemChange = createEvent(this, "calciteComboboxItemChange", 7);
+    this.calciteComboboxItemChange = createEvent(this, "calciteComboboxItemChange", 6);
     // --------------------------------------------------------------------------
     //
     //  Properties
@@ -10909,8 +10936,8 @@ const DatePicker = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteDatePickerChange = createEvent(this, "calciteDatePickerChange", 7);
-    this.calciteDatePickerRangeChange = createEvent(this, "calciteDatePickerRangeChange", 7);
+    this.calciteDatePickerChange = createEvent(this, "calciteDatePickerChange", 6);
+    this.calciteDatePickerRangeChange = createEvent(this, "calciteDatePickerRangeChange", 6);
     /**
      * Localized string for "previous month" (used for aria label)
      *
@@ -11332,8 +11359,8 @@ const DatePickerDay = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteDaySelect = createEvent(this, "calciteDaySelect", 7);
-    this.calciteInternalDayHover = createEvent(this, "calciteInternalDayHover", 7);
+    this.calciteDaySelect = createEvent(this, "calciteDaySelect", 6);
+    this.calciteInternalDayHover = createEvent(this, "calciteInternalDayHover", 6);
     /** Date is outside of range and can't be selected */
     this.disabled = false;
     /** Date is in the current month. */
@@ -11400,10 +11427,10 @@ const DatePickerMonth = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteDatePickerSelect = createEvent(this, "calciteDatePickerSelect", 7);
-    this.calciteInternalDatePickerHover = createEvent(this, "calciteInternalDatePickerHover", 7);
-    this.calciteDatePickerActiveDateChange = createEvent(this, "calciteDatePickerActiveDateChange", 7);
-    this.calciteInternalDatePickerMouseOut = createEvent(this, "calciteInternalDatePickerMouseOut", 7);
+    this.calciteDatePickerSelect = createEvent(this, "calciteDatePickerSelect", 6);
+    this.calciteInternalDatePickerHover = createEvent(this, "calciteInternalDatePickerHover", 6);
+    this.calciteDatePickerActiveDateChange = createEvent(this, "calciteDatePickerActiveDateChange", 6);
+    this.calciteInternalDatePickerMouseOut = createEvent(this, "calciteInternalDatePickerMouseOut", 6);
     /** Date currently active.*/
     this.activeDate = new Date();
     //--------------------------------------------------------------------------
@@ -11704,7 +11731,7 @@ const DatePickerMonthHeader = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteDatePickerSelect = createEvent(this, "calciteDatePickerSelect", 7);
+    this.calciteDatePickerSelect = createEvent(this, "calciteDatePickerSelect", 6);
     //--------------------------------------------------------------------------
     //
     //  Private Methods
@@ -11867,11 +11894,11 @@ const Dropdown = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteDropdownSelect = createEvent(this, "calciteDropdownSelect", 7);
-    this.calciteDropdownBeforeClose = createEvent(this, "calciteDropdownBeforeClose", 7);
-    this.calciteDropdownClose = createEvent(this, "calciteDropdownClose", 7);
-    this.calciteDropdownBeforeOpen = createEvent(this, "calciteDropdownBeforeOpen", 7);
-    this.calciteDropdownOpen = createEvent(this, "calciteDropdownOpen", 7);
+    this.calciteDropdownSelect = createEvent(this, "calciteDropdownSelect", 6);
+    this.calciteDropdownBeforeClose = createEvent(this, "calciteDropdownBeforeClose", 6);
+    this.calciteDropdownClose = createEvent(this, "calciteDropdownClose", 6);
+    this.calciteDropdownBeforeOpen = createEvent(this, "calciteDropdownBeforeOpen", 6);
+    this.calciteDropdownOpen = createEvent(this, "calciteDropdownOpen", 6);
     //--------------------------------------------------------------------------
     //
     //  Public Properties
@@ -11917,9 +11944,9 @@ const Dropdown = class extends HTMLElement$1 {
     this.type = "click";
     this.items = [];
     this.groups = [];
-    this.activeTransitionProp = "visibility";
     this.mutationObserver = createObserver("mutation", () => this.updateItems());
     this.resizeObserver = createObserver("resize", (entries) => this.resizeObserverCallback(entries));
+    this.openTransitionProp = "visibility";
     this.guid = `calcite-dropdown-${guid()}`;
     this.defaultAssignedElements = [];
     //--------------------------------------------------------------------------
@@ -11988,20 +12015,11 @@ const Dropdown = class extends HTMLElement$1 {
       scrollerEl.style.maxHeight = maxScrollerHeight > 0 ? `${maxScrollerHeight}px` : "";
       this.reposition();
     };
-    this.setScrollerEl = (scrollerEl) => {
-      this.resizeObserver.observe(scrollerEl);
-      this.scrollerEl = scrollerEl;
-      this.scrollerEl.addEventListener("transitionstart", this.transitionStartHandler);
-    };
-    this.transitionEnd = (event) => {
-      if (event.propertyName === this.activeTransitionProp && event.target === this.scrollerEl) {
-        this.open ? this.onOpen() : this.onClose();
-      }
-    };
-    this.transitionStartHandler = (event) => {
-      if (event.propertyName === this.activeTransitionProp && event.target === this.scrollerEl) {
-        this.open ? this.onBeforeOpen() : this.onBeforeClose();
-      }
+    this.setScrollerAndTransitionEl = (el) => {
+      this.resizeObserver.observe(el);
+      this.scrollerEl = el;
+      this.transitionEl = el;
+      connectOpenCloseComponent(this);
     };
     this.setReferenceEl = (el) => {
       this.referenceEl = el;
@@ -12090,6 +12108,7 @@ const Dropdown = class extends HTMLElement$1 {
     if (this.active) {
       this.activeHandler(this.active);
     }
+    connectOpenCloseComponent(this);
   }
   componentDidLoad() {
     this.reposition();
@@ -12098,11 +12117,11 @@ const Dropdown = class extends HTMLElement$1 {
     updateHostInteraction(this);
   }
   disconnectedCallback() {
-    var _a, _b, _c;
+    var _a, _b;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     disconnectFloatingUI(this, this.referenceEl, this.floatingEl);
     (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
-    (_c = this.scrollerEl) === null || _c === void 0 ? void 0 : _c.removeEventListener("transitionstart", this.transitionStartHandler);
+    disconnectOpenCloseComponent(this);
   }
   render() {
     const { open, guid } = this;
@@ -12110,7 +12129,7 @@ const Dropdown = class extends HTMLElement$1 {
         ["calcite-dropdown-content"]: true,
         [FloatingCSS.animation]: true,
         [FloatingCSS.animationActive]: open
-      }, id: `${guid}-menu`, onTransitionEnd: this.transitionEnd, ref: this.setScrollerEl, role: "menu" }, h("div", { hidden: !open }, h("slot", { onSlotchange: this.updateGroups }))))));
+      }, id: `${guid}-menu`, ref: this.setScrollerAndTransitionEl, role: "menu" }, h("div", { hidden: !open }, h("slot", { onSlotchange: this.updateGroups }))))));
   }
   //--------------------------------------------------------------------------
   //
@@ -12303,7 +12322,7 @@ const DropdownGroup = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteInternalDropdownItemChange = createEvent(this, "calciteInternalDropdownItemChange", 7);
+    this.calciteInternalDropdownItemChange = createEvent(this, "calciteInternalDropdownItemChange", 6);
     /**
       specify the selection mode - multi (allow any number of (or no) active items), single (allow and require one active item),
      none (no active items), defaults to single
@@ -12371,9 +12390,9 @@ const DropdownItem = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteInternalDropdownItemSelect = createEvent(this, "calciteInternalDropdownItemSelect", 7);
-    this.calciteInternalDropdownItemKeyEvent = createEvent(this, "calciteInternalDropdownItemKeyEvent", 7);
-    this.calciteInternalDropdownCloseRequest = createEvent(this, "calciteInternalDropdownCloseRequest", 7);
+    this.calciteInternalDropdownItemSelect = createEvent(this, "calciteInternalDropdownItemSelect", 6);
+    this.calciteInternalDropdownItemKeyEvent = createEvent(this, "calciteInternalDropdownItemKeyEvent", 6);
+    this.calciteInternalDropdownCloseRequest = createEvent(this, "calciteInternalDropdownCloseRequest", 6);
     //--------------------------------------------------------------------------
     //
     //  Public Properties
@@ -12624,7 +12643,7 @@ const Filter = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteFilterChange = createEvent(this, "calciteFilterChange", 7);
+    this.calciteFilterChange = createEvent(this, "calciteFilterChange", 6);
     // --------------------------------------------------------------------------
     //
     //  Properties
@@ -13079,7 +13098,7 @@ const Handle = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteHandleNudge = createEvent(this, "calciteHandleNudge", 7);
+    this.calciteHandleNudge = createEvent(this, "calciteHandleNudge", 6);
     // --------------------------------------------------------------------------
     //
     //  Properties
@@ -13326,9 +13345,9 @@ const InlineEditable = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteInlineEditableEditCancel = createEvent(this, "calciteInlineEditableEditCancel", 7);
-    this.calciteInlineEditableEditConfirm = createEvent(this, "calciteInlineEditableEditConfirm", 7);
-    this.calciteInternalInlineEditableEnableEditingChange = createEvent(this, "calciteInternalInlineEditableEnableEditingChange", 7);
+    this.calciteInlineEditableEditCancel = createEvent(this, "calciteInlineEditableEditCancel", 6);
+    this.calciteInlineEditableEditConfirm = createEvent(this, "calciteInlineEditableEditConfirm", 6);
+    this.calciteInternalInlineEditableEnableEditingChange = createEvent(this, "calciteInternalInlineEditableEnableEditingChange", 6);
     //--------------------------------------------------------------------------
     //
     //  Props
@@ -13570,10 +13589,10 @@ const Input = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteInternalInputFocus = createEvent(this, "calciteInternalInputFocus", 7);
-    this.calciteInternalInputBlur = createEvent(this, "calciteInternalInputBlur", 7);
+    this.calciteInternalInputFocus = createEvent(this, "calciteInternalInputFocus", 6);
+    this.calciteInternalInputBlur = createEvent(this, "calciteInternalInputBlur", 6);
     this.calciteInputInput = createEvent(this, "calciteInputInput", 7);
-    this.calciteInputChange = createEvent(this, "calciteInputChange", 7);
+    this.calciteInputChange = createEvent(this, "calciteInputChange", 6);
     //--------------------------------------------------------------------------
     //
     //  Properties
@@ -14148,13 +14167,13 @@ const InputDatePicker = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteDatePickerChange = createEvent(this, "calciteDatePickerChange", 7);
-    this.calciteDatePickerRangeChange = createEvent(this, "calciteDatePickerRangeChange", 7);
-    this.calciteInputDatePickerChange = createEvent(this, "calciteInputDatePickerChange", 7);
-    this.calciteInputDatePickerBeforeClose = createEvent(this, "calciteInputDatePickerBeforeClose", 7);
-    this.calciteInputDatePickerClose = createEvent(this, "calciteInputDatePickerClose", 7);
-    this.calciteInputDatePickerBeforeOpen = createEvent(this, "calciteInputDatePickerBeforeOpen", 7);
-    this.calciteInputDatePickerOpen = createEvent(this, "calciteInputDatePickerOpen", 7);
+    this.calciteDatePickerChange = createEvent(this, "calciteDatePickerChange", 6);
+    this.calciteDatePickerRangeChange = createEvent(this, "calciteDatePickerRangeChange", 6);
+    this.calciteInputDatePickerChange = createEvent(this, "calciteInputDatePickerChange", 6);
+    this.calciteInputDatePickerBeforeClose = createEvent(this, "calciteInputDatePickerBeforeClose", 6);
+    this.calciteInputDatePickerClose = createEvent(this, "calciteInputDatePickerClose", 6);
+    this.calciteInputDatePickerBeforeOpen = createEvent(this, "calciteInputDatePickerBeforeOpen", 6);
+    this.calciteInputDatePickerOpen = createEvent(this, "calciteInputDatePickerOpen", 6);
     //--------------------------------------------------------------------------
     //
     //  Public Properties
@@ -14221,11 +14240,7 @@ const InputDatePicker = class extends HTMLElement$1 {
     /** Layout */
     this.layout = "horizontal";
     this.focusedInput = "start";
-    this.activeTransitionProp = "opacity";
-    this.setContainerEl = (el) => {
-      this.containerEl = el;
-      this.containerEl.addEventListener("transitionstart", this.transitionStartHandler);
-    };
+    this.openTransitionProp = "opacity";
     //--------------------------------------------------------------------------
     //
     //  Private Methods
@@ -14237,15 +14252,9 @@ const InputDatePicker = class extends HTMLElement$1 {
         ? filterComputedPlacements(flipPlacements, el)
         : null;
     };
-    this.transitionStartHandler = (event) => {
-      if (event.propertyName === this.activeTransitionProp && event.target === this.containerEl) {
-        this.open ? this.onBeforeOpen() : this.onBeforeClose();
-      }
-    };
-    this.transitionEnd = (event) => {
-      if (event.propertyName === this.activeTransitionProp && event.target === this.containerEl) {
-        this.open ? this.onOpen() : this.onClose();
-      }
+    this.setTransitionEl = (el) => {
+      this.transitionEl = el;
+      connectOpenCloseComponent(this);
     };
     this.setStartInput = (el) => {
       this.startInput = el;
@@ -14442,6 +14451,7 @@ const InputDatePicker = class extends HTMLElement$1 {
     }
     connectLabel(this);
     connectForm(this);
+    connectOpenCloseComponent(this);
     this.reposition();
     this.setFilteredPlacements();
   }
@@ -14454,11 +14464,10 @@ const InputDatePicker = class extends HTMLElement$1 {
     this.reposition();
   }
   disconnectedCallback() {
-    var _a;
-    (_a = this.containerEl) === null || _a === void 0 ? void 0 : _a.removeEventListener("transitionstart", this.transitionStartHandler);
     disconnectLabel(this);
     disconnectForm(this);
     disconnectFloatingUI(this, this.referenceEl, this.floatingEl);
+    disconnectOpenCloseComponent(this);
   }
   componentDidRender() {
     updateHostInteraction(this);
@@ -14480,7 +14489,7 @@ const InputDatePicker = class extends HTMLElement$1 {
         ["calendar-picker-wrapper--end"]: this.focusedInput === "end",
         [FloatingCSS.animation]: true,
         [FloatingCSS.animationActive]: this.open
-      }, onTransitionEnd: this.transitionEnd, ref: this.setContainerEl }, h("calcite-date-picker", { activeRange: this.focusedInput, endAsDate: this.endAsDate, headingLevel: this.headingLevel, intlNextMonth: this.intlNextMonth, intlPrevMonth: this.intlPrevMonth, intlYear: this.intlYear, locale: this.locale, max: this.max, maxAsDate: this.maxAsDate, min: this.min, minAsDate: this.minAsDate, onCalciteDatePickerChange: this.handleDateChange, onCalciteDatePickerRangeChange: this.handleDateRangeChange, proximitySelectionDisabled: this.proximitySelectionDisabled, range: this.range, scale: this.scale, startAsDate: this.startAsDate, tabIndex: 0, valueAsDate: this.valueAsDate }))), this.range && this.layout === "horizontal" && (h("div", { class: "horizontal-arrow-container" }, h("calcite-icon", { flipRtl: true, icon: "arrow-right", scale: "s" }))), this.range && this.layout === "vertical" && this.scale !== "s" && (h("div", { class: "vertical-arrow-container" }, h("calcite-icon", { icon: "arrow-down", scale: "s" }))), this.range && (h("div", { class: "input-wrapper", ref: this.setEndWrapper }, h("calcite-input", { class: {
+      }, ref: this.setTransitionEl }, h("calcite-date-picker", { activeRange: this.focusedInput, endAsDate: this.endAsDate, headingLevel: this.headingLevel, intlNextMonth: this.intlNextMonth, intlPrevMonth: this.intlPrevMonth, intlYear: this.intlYear, locale: this.locale, max: this.max, maxAsDate: this.maxAsDate, min: this.min, minAsDate: this.minAsDate, onCalciteDatePickerChange: this.handleDateChange, onCalciteDatePickerRangeChange: this.handleDateRangeChange, proximitySelectionDisabled: this.proximitySelectionDisabled, range: this.range, scale: this.scale, startAsDate: this.startAsDate, tabIndex: 0, valueAsDate: this.valueAsDate }))), this.range && this.layout === "horizontal" && (h("div", { class: "horizontal-arrow-container" }, h("calcite-icon", { flipRtl: true, icon: "arrow-right", scale: "s" }))), this.range && this.layout === "vertical" && this.scale !== "s" && (h("div", { class: "vertical-arrow-container" }, h("calcite-icon", { icon: "arrow-down", scale: "s" }))), this.range && (h("div", { class: "input-wrapper", ref: this.setEndWrapper }, h("calcite-input", { class: {
         input: true,
         "border-top-color-one": this.layout === "vertical" && this.range
       }, disabled: disabled, icon: "calendar", "number-button-type": "none", onCalciteInputInput: this.inputInput, onCalciteInternalInputBlur: this.inputBlur, onCalciteInternalInputFocus: this.endInputFocus, placeholder: (_b = this.localeData) === null || _b === void 0 ? void 0 : _b.placeholder, readOnly: readOnly, ref: this.setEndInput, scale: this.scale, type: "text", value: formattedEndDate }))))), h(HiddenFormInputSlot, { component: this })));
@@ -14763,10 +14772,10 @@ const InputNumber = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteInternalInputNumberFocus = createEvent(this, "calciteInternalInputNumberFocus", 7);
-    this.calciteInternalInputNumberBlur = createEvent(this, "calciteInternalInputNumberBlur", 7);
+    this.calciteInternalInputNumberFocus = createEvent(this, "calciteInternalInputNumberFocus", 6);
+    this.calciteInternalInputNumberBlur = createEvent(this, "calciteInternalInputNumberBlur", 6);
     this.calciteInputNumberInput = createEvent(this, "calciteInputNumberInput", 7);
-    this.calciteInputNumberChange = createEvent(this, "calciteInputNumberChange", 7);
+    this.calciteInputNumberChange = createEvent(this, "calciteInputNumberChange", 6);
     //--------------------------------------------------------------------------
     //
     //  Properties
@@ -15989,7 +15998,7 @@ const Label = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteInternalLabelClick = createEvent(this, "calciteInternalLabelClick", 3);
+    this.calciteInternalLabelClick = createEvent(this, "calciteInternalLabelClick", 2);
     //--------------------------------------------------------------------------
     //
     //  Properties
@@ -16497,6 +16506,7 @@ function isFocusable($elem) {
 }
 
 const CSS$n = {
+  modal: "modal",
   title: "title",
   header: "header",
   footer: "footer",
@@ -16505,7 +16515,13 @@ const CSS$n = {
   close: "close",
   secondary: "secondary",
   primary: "primary",
-  overflowHidden: "overflow-hidden"
+  overflowHidden: "overflow-hidden",
+  // these classes help apply the animation in phases to only set transform on open/close
+  // this helps avoid a positioning issue for any floating-ui-owning children
+  openingIdle: "modal--opening-idle",
+  openingActive: "modal--opening-active",
+  closingIdle: "modal--closing-idle",
+  closingActive: "modal--closing-active"
 };
 const ICONS$6 = {
   close: "x"
@@ -16521,7 +16537,7 @@ const TEXT$b = {
   close: "Close"
 };
 
-const modalCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{position:fixed;inset:0px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;overflow-y:hidden;color:var(--calcite-ui-text-2);opacity:0;visibility:hidden !important;-webkit-transition:visibility 0ms linear 300ms, opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);transition:visibility 0ms linear 300ms, opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);z-index:101}:host([scale=s]){--calcite-modal-padding:0.75rem;--calcite-modal-padding-large:1rem;--calcite-modal-title-text:var(--calcite-font-size-1);--calcite-modal-content-text:var(--calcite-font-size--1);--calcite-modal-padding-internal:0.75rem;--calcite-modal-padding-large-internal:1rem;--calcite-modal-title-text-internal:var(--calcite-font-size-1);--calcite-modal-content-text-internal:var(--calcite-font-size--1)}:host([scale=m]){--calcite-modal-padding:1rem;--calcite-modal-padding-large:1.25rem;--calcite-modal-title-text:var(--calcite-font-size-2);--calcite-modal-content-text:var(--calcite-font-size-0);--calcite-modal-padding-internal:1rem;--calcite-modal-padding-large-internal:1.25rem;--calcite-modal-title-text-internal:var(--calcite-font-size-2);--calcite-modal-content-text-internal:var(--calcite-font-size-0)}:host([scale=l]){--calcite-modal-padding:1.25rem;--calcite-modal-padding-large:1.5rem;--calcite-modal-title-text:var(--calcite-font-size-3);--calcite-modal-content-text:var(--calcite-font-size-1);--calcite-modal-padding-internal:1.25rem;--calcite-modal-padding-large-internal:1.5rem;--calcite-modal-title-text-internal:var(--calcite-font-size-3);--calcite-modal-content-text-internal:var(--calcite-font-size-1)}.scrim{--calcite-scrim-background:rgba(0, 0, 0, 0.75);position:fixed;inset:0px;display:-ms-flexbox;display:flex;overflow-y:hidden}.modal{pointer-events:none;float:none;margin:1.5rem;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;inline-size:100%;-ms-flex-direction:column;flex-direction:column;overflow:hidden;border-radius:0.25rem;background-color:var(--calcite-ui-foreground-1);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);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);z-index:102;-webkit-overflow-scrolling:touch;visibility:hidden;-webkit-transition:visibility 0ms linear 300ms, opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), -webkit-transform var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);transition:visibility 0ms linear 300ms, opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), -webkit-transform var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);transition:transform var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), visibility 0ms linear 300ms, opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);transition:transform var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), visibility 0ms linear 300ms, opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), -webkit-transform var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);-webkit-transform:translate3d(0, 20px, 0);transform:translate3d(0, 20px, 0)}:host([open]){opacity:1;visibility:visible !important;-webkit-transition-delay:0ms;transition-delay:0ms}:host([open]) .modal{pointer-events:auto;visibility:visible;opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-transition:visibility 0ms linear, opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-inline-size var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-block-size var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), -webkit-transform var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);transition:visibility 0ms linear, opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-inline-size var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-block-size var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), -webkit-transform var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);transition:transform var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), visibility 0ms linear, opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-inline-size var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-block-size var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);transition:transform var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), visibility 0ms linear, opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-inline-size var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-block-size var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), -webkit-transform var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);-webkit-transition-delay:0ms;transition-delay:0ms}.header{display:-ms-flexbox;display:flex;min-inline-size:0px;max-inline-size:100%;border-start-start-radius:0.25rem;border-start-end-radius:0.25rem;border-width:0px;border-block-end-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);background-color:var(--calcite-ui-foreground-1);-ms-flex:0 0 auto;flex:0 0 auto;z-index:2}.close{-ms-flex-order:2;order:2;margin:0px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-style:none;background-color:transparent;color:var(--calcite-ui-text-3);outline-color:transparent;-webkit-transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-start-end-radius:0.25rem;padding-block:var(--calcite-modal-padding, var(--calcite-modal-padding-internal));-ms-flex:0 0 auto;flex:0 0 auto}.close calcite-icon{pointer-events:none;vertical-align:-2px}.close:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}.close:hover,.close:focus,.close:active{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-text-1)}.title{-ms-flex-order:1;order:1;display:-ms-flexbox;display:flex;min-inline-size:0px;-ms-flex-align:center;align-items:center;-ms-flex:1 1 auto;flex:1 1 auto;padding-block:var(--calcite-modal-padding, var(--calcite-model-padding-internal));padding-inline:var(--calcite-modal-padding-large, var(--calcite-modal-padding-large-internal))}slot[name=header]::slotted(*),*::slotted([slot=header]){margin:0px;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-1);font-size:var(--calcite-modal-title-text, var(--calcite-modal-title-text-internal))}.content{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;display:block;block-size:100%;overflow:auto;background-color:var(--calcite-ui-foreground-1);padding:0px;max-block-size:calc(100vh - 12rem);z-index:1}.content--spaced{padding:var(--calcite-modal-padding)}.content--no-footer{border-end-end-radius:0.25rem;border-end-start-radius:0.25rem}slot[name=content]::slotted(*),*::slotted([slot=content]){font-size:var(--calcite-modal-content-text, var(--calcite-modal-context-text-internal))}:host([background-color=grey]) .content{background-color:var(--calcite-ui-background)}.footer{-webkit-margin-before:auto;margin-block-start:auto;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;inline-size:100%;-ms-flex-pack:justify;justify-content:space-between;border-end-end-radius:0.25rem;border-end-start-radius:0.25rem;border-width:0px;border-block-start-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);background-color:var(--calcite-ui-foreground-1);-ms-flex:0 0 auto;flex:0 0 auto;padding-block:var(--calcite-modal-padding, var(--calcite-modal-padding-internal));padding-inline:var(--calcite-modal-padding-large, var(--calcite-modal-padding-large-internal));z-index:2}.footer--hide-back .back,.footer--hide-secondary .secondary{display:none}.back{display:block;-webkit-margin-end:auto;margin-inline-end:auto}.secondary{margin-inline:0.25rem;display:block}slot[name=primary]{display:block}:host([width=small]) .modal{inline-size:auto}:host([width=s]) .modal{max-inline-size:32rem}@media screen and (max-width: 35rem){:host([width=s]) .modal{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;border-radius:0px}:host([width=s]) .content{-ms-flex:1 1 auto;flex:1 1 auto;max-block-size:unset}:host([width=s][docked]){-ms-flex-align:end;align-items:flex-end}}:host([width=m]) .modal{max-inline-size:48rem}@media screen and (max-width: 51rem){:host([width=m]) .modal{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;border-radius:0px}:host([width=m]) .content{-ms-flex:1 1 auto;flex:1 1 auto;max-block-size:unset}:host([width=m][docked]){-ms-flex-align:end;align-items:flex-end}}:host([width=l]) .modal{max-inline-size:94rem}@media screen and (max-width: 97rem){:host([width=l]) .modal{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;border-radius:0px}:host([width=l]) .content{-ms-flex:1 1 auto;flex:1 1 auto;max-block-size:unset}:host([width=l][docked]){-ms-flex-align:end;align-items:flex-end}}:host([fullscreen]){background-color:transparent}:host([fullscreen]) .modal{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;-webkit-transform:translate3D(0, 20px, 0) scale(0.95);transform:translate3D(0, 20px, 0) scale(0.95)}:host([fullscreen]) .content{max-block-size:100%;-ms-flex:1 1 auto;flex:1 1 auto}:host([open][fullscreen]) .modal{-webkit-transform:translate3D(0, 0, 0) scale(1);transform:translate3D(0, 0, 0) scale(1)}:host([open][fullscreen]) .header{border-radius:0}:host([open][fullscreen]) .footer{border-radius:0}:host([docked]) .modal{block-size:auto}:host([docked]) .content{block-size:auto;-ms-flex:1 1 auto;flex:1 1 auto}@media screen and (max-width: 860px){:host([docked]) .modal{border-radius:var(--calcite-border-radius) var(--calcite-border-radius) 0 0}:host([docked]) .close{border-start-end-radius:var(--calcite-border-radius)}}:host([color=red]) .modal{border-color:var(--calcite-ui-danger)}:host([color=blue]) .modal{border-color:var(--calcite-ui-info)}:host([color=red]) .modal,:host([color=blue]) .modal{border-width:0px;border-block-start-width:4px;border-style:solid}:host([color=red]) .header,:host([color=blue]) .header{border-radius:0.25rem;border-end-end-radius:0px;border-end-start-radius:0px}@media screen and (max-width: 860px){slot[name=header]::slotted(*),*::slotted([slot=header]){font-size:var(--calcite-font-size-1)}.footer{position:-webkit-sticky;position:sticky;inset-block-end:0px}}@media screen and (max-width: 480px){.footer{-ms-flex-direction:column;flex-direction:column}.back,.secondary{margin:0px;-webkit-margin-after:0.25rem;margin-block-end:0.25rem}}";
+const modalCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{position:fixed;inset:0px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;overflow-y:hidden;color:var(--calcite-ui-text-2);opacity:0;visibility:hidden !important;-webkit-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);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);z-index:101}:host([scale=s]){--calcite-modal-padding:0.75rem;--calcite-modal-padding-large:1rem;--calcite-modal-title-text:var(--calcite-font-size-1);--calcite-modal-content-text:var(--calcite-font-size--1);--calcite-modal-padding-internal:0.75rem;--calcite-modal-padding-large-internal:1rem;--calcite-modal-title-text-internal:var(--calcite-font-size-1);--calcite-modal-content-text-internal:var(--calcite-font-size--1)}:host([scale=m]){--calcite-modal-padding:1rem;--calcite-modal-padding-large:1.25rem;--calcite-modal-title-text:var(--calcite-font-size-2);--calcite-modal-content-text:var(--calcite-font-size-0);--calcite-modal-padding-internal:1rem;--calcite-modal-padding-large-internal:1.25rem;--calcite-modal-title-text-internal:var(--calcite-font-size-2);--calcite-modal-content-text-internal:var(--calcite-font-size-0)}:host([scale=l]){--calcite-modal-padding:1.25rem;--calcite-modal-padding-large:1.5rem;--calcite-modal-title-text:var(--calcite-font-size-3);--calcite-modal-content-text:var(--calcite-font-size-1);--calcite-modal-padding-internal:1.25rem;--calcite-modal-padding-large-internal:1.5rem;--calcite-modal-title-text-internal:var(--calcite-font-size-3);--calcite-modal-content-text-internal:var(--calcite-font-size-1)}.scrim{--calcite-scrim-background:rgba(0, 0, 0, 0.75);position:fixed;inset:0px;display:-ms-flexbox;display:flex;overflow-y:hidden}.modal{pointer-events:none;float:none;margin:1.5rem;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;inline-size:100%;-ms-flex-direction:column;flex-direction:column;overflow:hidden;border-radius:0.25rem;background-color:var(--calcite-ui-foreground-1);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);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);z-index:102;-webkit-overflow-scrolling:touch;visibility:hidden;-webkit-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), -webkit-transform var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);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), -webkit-transform var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);transition:transform var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), 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);transition:transform var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), 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), -webkit-transform var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);--calcite-modal-hidden-position:translate3d(0, 20px, 0);--calcite-modal-shown-position:translate3d(0, 0, 0)}.modal--opening-idle{-webkit-transform:var(--calcite-modal-hidden-position);transform:var(--calcite-modal-hidden-position)}.modal--opening-active{-webkit-transform:var(--calcite-modal-shown-position);transform:var(--calcite-modal-shown-position)}.modal--closing-idle{-webkit-transform:var(--calcite-modal-shown-position);transform:var(--calcite-modal-shown-position)}.modal--closing-active{-webkit-transform:var(--calcite-modal-hidden-position);transform:var(--calcite-modal-hidden-position)}:host([open]){opacity:1;visibility:visible !important;-webkit-transition-delay:0ms;transition-delay:0ms}:host([open]) .modal{pointer-events:auto;visibility:visible;opacity:1;-webkit-transition:visibility 0ms linear, opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-inline-size var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-block-size var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), -webkit-transform var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);transition:visibility 0ms linear, opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-inline-size var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-block-size var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), -webkit-transform var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);transition:transform var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), visibility 0ms linear, opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-inline-size var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-block-size var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);transition:transform var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), visibility 0ms linear, opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-inline-size var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-block-size var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), -webkit-transform var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);-webkit-transition-delay:0ms;transition-delay:0ms}.header{display:-ms-flexbox;display:flex;min-inline-size:0px;max-inline-size:100%;border-start-start-radius:0.25rem;border-start-end-radius:0.25rem;border-width:0px;border-block-end-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);background-color:var(--calcite-ui-foreground-1);-ms-flex:0 0 auto;flex:0 0 auto;z-index:2}.close{-ms-flex-order:2;order:2;margin:0px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-style:none;background-color:transparent;color:var(--calcite-ui-text-3);outline-color:transparent;-webkit-transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-start-end-radius:0.25rem;padding-block:var(--calcite-modal-padding, var(--calcite-modal-padding-internal));-ms-flex:0 0 auto;flex:0 0 auto}.close calcite-icon{pointer-events:none;vertical-align:-2px}.close:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}.close:hover,.close:focus,.close:active{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-text-1)}.title{-ms-flex-order:1;order:1;display:-ms-flexbox;display:flex;min-inline-size:0px;-ms-flex-align:center;align-items:center;-ms-flex:1 1 auto;flex:1 1 auto;padding-block:var(--calcite-modal-padding, var(--calcite-model-padding-internal));padding-inline:var(--calcite-modal-padding-large, var(--calcite-modal-padding-large-internal))}slot[name=header]::slotted(*),*::slotted([slot=header]){margin:0px;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-1);font-size:var(--calcite-modal-title-text, var(--calcite-modal-title-text-internal))}.content{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;display:block;block-size:100%;overflow:auto;background-color:var(--calcite-ui-foreground-1);padding:0px;max-block-size:calc(100vh - 12rem);z-index:1}.content--spaced{padding:var(--calcite-modal-padding)}.content--no-footer{border-end-end-radius:0.25rem;border-end-start-radius:0.25rem}slot[name=content]::slotted(*),*::slotted([slot=content]){font-size:var(--calcite-modal-content-text, var(--calcite-modal-context-text-internal))}:host([background-color=grey]) .content{background-color:var(--calcite-ui-background)}.footer{-webkit-margin-before:auto;margin-block-start:auto;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;inline-size:100%;-ms-flex-pack:justify;justify-content:space-between;border-end-end-radius:0.25rem;border-end-start-radius:0.25rem;border-width:0px;border-block-start-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);background-color:var(--calcite-ui-foreground-1);-ms-flex:0 0 auto;flex:0 0 auto;padding-block:var(--calcite-modal-padding, var(--calcite-modal-padding-internal));padding-inline:var(--calcite-modal-padding-large, var(--calcite-modal-padding-large-internal));z-index:2}.footer--hide-back .back,.footer--hide-secondary .secondary{display:none}.back{display:block;-webkit-margin-end:auto;margin-inline-end:auto}.secondary{margin-inline:0.25rem;display:block}slot[name=primary]{display:block}:host([width=small]) .modal{inline-size:auto}:host([width=s]) .modal{max-inline-size:32rem}@media screen and (max-width: 35rem){:host([width=s]) .modal{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;border-radius:0px}:host([width=s]) .content{-ms-flex:1 1 auto;flex:1 1 auto;max-block-size:unset}:host([width=s][docked]){-ms-flex-align:end;align-items:flex-end}}:host([width=m]) .modal{max-inline-size:48rem}@media screen and (max-width: 51rem){:host([width=m]) .modal{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;border-radius:0px}:host([width=m]) .content{-ms-flex:1 1 auto;flex:1 1 auto;max-block-size:unset}:host([width=m][docked]){-ms-flex-align:end;align-items:flex-end}}:host([width=l]) .modal{max-inline-size:94rem}@media screen and (max-width: 97rem){:host([width=l]) .modal{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;border-radius:0px}:host([width=l]) .content{-ms-flex:1 1 auto;flex:1 1 auto;max-block-size:unset}:host([width=l][docked]){-ms-flex-align:end;align-items:flex-end}}:host([fullscreen]){background-color:transparent}:host([fullscreen]) .modal{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;--calcite-modal-hidden-position:translate3D(0, 20px, 0) scale(0.95);--calcite-modal-shown-position:translate3D(0, 0, 0) scale(1)}:host([fullscreen]) .content{max-block-size:100%;-ms-flex:1 1 auto;flex:1 1 auto}:host([open][fullscreen]) .header{border-radius:0}:host([open][fullscreen]) .footer{border-radius:0}:host([docked]) .modal{block-size:auto}:host([docked]) .content{block-size:auto;-ms-flex:1 1 auto;flex:1 1 auto}@media screen and (max-width: 860px){:host([docked]) .modal{border-radius:var(--calcite-border-radius) var(--calcite-border-radius) 0 0}:host([docked]) .close{border-start-end-radius:var(--calcite-border-radius)}}:host([color=red]) .modal{border-color:var(--calcite-ui-danger)}:host([color=blue]) .modal{border-color:var(--calcite-ui-info)}:host([color=red]) .modal,:host([color=blue]) .modal{border-width:0px;border-block-start-width:4px;border-style:solid}:host([color=red]) .header,:host([color=blue]) .header{border-radius:0.25rem;border-end-end-radius:0px;border-end-start-radius:0px}@media screen and (max-width: 860px){slot[name=header]::slotted(*),*::slotted([slot=header]){font-size:var(--calcite-font-size-1)}.footer{position:-webkit-sticky;position:sticky;inset-block-end:0px}}@media screen and (max-width: 480px){.footer{-ms-flex-direction:column;flex-direction:column}.back,.secondary{margin:0px;-webkit-margin-after:0.25rem;margin-block-end:0.25rem}}";
 
 const isFocusableExtended = (el) => {
   return isCalciteFocusable(el) || isFocusable(el);
@@ -16534,10 +16550,10 @@ const Modal = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteModalBeforeClose = createEvent(this, "calciteModalBeforeClose", 7);
-    this.calciteModalClose = createEvent(this, "calciteModalClose", 7);
-    this.calciteModalBeforeOpen = createEvent(this, "calciteModalBeforeOpen", 7);
-    this.calciteModalOpen = createEvent(this, "calciteModalOpen", 7);
+    this.calciteModalBeforeClose = createEvent(this, "calciteModalBeforeClose", 6);
+    this.calciteModalClose = createEvent(this, "calciteModalClose", 6);
+    this.calciteModalBeforeOpen = createEvent(this, "calciteModalBeforeOpen", 6);
+    this.calciteModalOpen = createEvent(this, "calciteModalOpen", 6);
     //--------------------------------------------------------------------------
     //
     //  Properties
@@ -16580,25 +16596,15 @@ const Modal = class extends HTMLElement$1 {
     //--------------------------------------------------------------------------
     this.hasFooter = true;
     this.mutationObserver = createObserver("mutation", () => this.updateFooterVisibility());
-    this.activeTransitionProp = "opacity";
+    this.openTransitionProp = "opacity";
     //--------------------------------------------------------------------------
     //
     //  Private Methods
     //
     //--------------------------------------------------------------------------
-    this.setContainerEl = (el) => {
-      this.containerEl = el;
-      this.containerEl.addEventListener("transitionstart", this.transitionStartHandler);
-    };
-    this.transitionStartHandler = (event) => {
-      if (event.propertyName === this.activeTransitionProp && event.target === this.containerEl) {
-        this.open ? this.onBeforeOpen() : this.onBeforeClose();
-      }
-    };
-    this.transitionEnd = (event) => {
-      if (event.propertyName === this.activeTransitionProp && event.target === this.containerEl) {
-        this.open ? this.onOpen() : this.onClose();
-      }
+    this.setTransitionEl = (el) => {
+      this.transitionEl = el;
+      connectOpenCloseComponent(this);
     };
     this.openEnd = () => {
       this.setFocus();
@@ -16650,6 +16656,7 @@ const Modal = class extends HTMLElement$1 {
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
     this.updateFooterVisibility();
     connectConditionalSlotComponent(this);
+    connectOpenCloseComponent(this);
     if (this.open) {
       this.active = this.open;
     }
@@ -16658,14 +16665,14 @@ const Modal = class extends HTMLElement$1 {
     }
   }
   disconnectedCallback() {
-    var _a, _b;
-    (_a = this.containerEl) === null || _a === void 0 ? void 0 : _a.removeEventListener("transitionstart", this.transitionStartHandler);
+    var _a;
     this.removeOverflowHiddenClass();
-    (_b = this.mutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     disconnectConditionalSlotComponent(this);
+    disconnectOpenCloseComponent(this);
   }
   render() {
-    return (h(Host, { "aria-describedby": this.contentId, "aria-labelledby": this.titleId, "aria-modal": "true", role: "dialog" }, h("calcite-scrim", { class: CSS$n.scrim, onClick: this.handleOutsideClose }), this.renderStyle(), h("div", { class: "modal", onTransitionEnd: this.transitionEnd, ref: this.setContainerEl }, h("div", { "data-focus-fence": true, onFocus: this.focusLastElement, tabindex: "0" }), h("div", { class: CSS$n.header }, this.renderCloseButton(), h("header", { class: CSS$n.title }, h("slot", { name: CSS$n.header }))), h("div", { class: {
+    return (h(Host, { "aria-describedby": this.contentId, "aria-labelledby": this.titleId, "aria-modal": "true", role: "dialog" }, h("calcite-scrim", { class: CSS$n.scrim, onClick: this.handleOutsideClose }), this.renderStyle(), h("div", { class: CSS$n.modal, ref: this.setTransitionEl }, h("div", { "data-focus-fence": true, onFocus: this.focusLastElement, tabindex: "0" }), h("div", { class: CSS$n.header }, this.renderCloseButton(), h("header", { class: CSS$n.title }, h("slot", { name: CSS$n.header }))), h("div", { class: {
         content: true,
         "content--spaced": !this.noPadding,
         "content--no-footer": !this.hasFooter
@@ -16680,11 +16687,11 @@ const Modal = class extends HTMLElement$1 {
   renderStyle() {
     const hasCustomWidth = !isNaN(parseInt(`${this.width}`));
     return hasCustomWidth ? (h("style", null, `
-        .modal {
+        .${CSS$n.modal} {
           max-width: ${this.width}px !important;
         }
         @media screen and (max-width: ${this.width}px) {
-          .modal {
+          .${CSS$n.modal} {
             height: 100% !important;
             max-height: 100% !important;
             width: 100% !important;
@@ -16756,29 +16763,34 @@ const Modal = class extends HTMLElement$1 {
     }
   }
   onBeforeOpen() {
+    this.transitionEl.classList.add(CSS$n.openingActive);
     this.calciteModalBeforeOpen.emit();
   }
   onOpen() {
+    this.transitionEl.classList.remove(CSS$n.openingIdle, CSS$n.openingActive);
     this.calciteModalOpen.emit();
   }
   onBeforeClose() {
+    this.transitionEl.classList.add(CSS$n.closingActive);
     this.calciteModalBeforeClose.emit();
   }
   onClose() {
+    this.transitionEl.classList.remove(CSS$n.closingIdle, CSS$n.closingActive);
     this.calciteModalClose.emit();
   }
   activeHandler(value) {
     this.open = value;
   }
-  async toggleModal(value, oldValue) {
-    if (value !== oldValue) {
-      this.active = value;
-      if (value) {
-        this.openModal();
-      }
-      else if (!value) {
-        this.close();
-      }
+  async toggleModal(value) {
+    var _a, _b;
+    this.active = value;
+    if (value) {
+      (_a = this.transitionEl) === null || _a === void 0 ? void 0 : _a.classList.add(CSS$n.openingIdle);
+      this.openModal();
+    }
+    else {
+      (_b = this.transitionEl) === null || _b === void 0 ? void 0 : _b.classList.add(CSS$n.closingIdle);
+      this.close();
     }
   }
   /** Open the modal */
@@ -16827,8 +16839,8 @@ const Notice = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteNoticeClose = createEvent(this, "calciteNoticeClose", 7);
-    this.calciteNoticeOpen = createEvent(this, "calciteNoticeOpen", 7);
+    this.calciteNoticeClose = createEvent(this, "calciteNoticeClose", 6);
+    this.calciteNoticeOpen = createEvent(this, "calciteNoticeOpen", 6);
     //--------------------------------------------------------------------------
     //
     //  Properties
@@ -16955,7 +16967,7 @@ const Option = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteInternalOptionChange = createEvent(this, "calciteInternalOptionChange", 7);
+    this.calciteInternalOptionChange = createEvent(this, "calciteInternalOptionChange", 6);
     //--------------------------------------------------------------------------
     //
     //  Properties
@@ -17036,7 +17048,7 @@ const OptionGroup = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteInternalOptionGroupChange = createEvent(this, "calciteInternalOptionGroupChange", 7);
+    this.calciteInternalOptionGroupChange = createEvent(this, "calciteInternalOptionGroupChange", 6);
     //--------------------------------------------------------------------------
     //
     //  Properties
@@ -17148,8 +17160,8 @@ const Pagination = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calcitePaginationUpdate = createEvent(this, "calcitePaginationUpdate", 7);
-    this.calcitePaginationChange = createEvent(this, "calcitePaginationChange", 7);
+    this.calcitePaginationUpdate = createEvent(this, "calcitePaginationUpdate", 6);
+    this.calcitePaginationChange = createEvent(this, "calcitePaginationChange", 6);
     //--------------------------------------------------------------------------
     //
     //  Public Properties
@@ -17366,10 +17378,10 @@ const Panel = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calcitePanelDismiss = createEvent(this, "calcitePanelDismiss", 7);
-    this.calcitePanelDismissedChange = createEvent(this, "calcitePanelDismissedChange", 7);
-    this.calcitePanelScroll = createEvent(this, "calcitePanelScroll", 7);
-    this.calcitePanelBackClick = createEvent(this, "calcitePanelBackClick", 7);
+    this.calcitePanelDismiss = createEvent(this, "calcitePanelDismiss", 6);
+    this.calcitePanelDismissedChange = createEvent(this, "calcitePanelDismissedChange", 6);
+    this.calcitePanelScroll = createEvent(this, "calcitePanelScroll", 6);
+    this.calcitePanelBackClick = createEvent(this, "calcitePanelBackClick", 6);
     // --------------------------------------------------------------------------
     //
     //  Properties
@@ -17962,7 +17974,7 @@ const PickList = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteListChange = createEvent(this, "calciteListChange", 7);
+    this.calciteListChange = createEvent(this, "calciteListChange", 6);
     // --------------------------------------------------------------------------
     //
     //  Properties
@@ -18163,10 +18175,10 @@ const PickListItem = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteListItemChange = createEvent(this, "calciteListItemChange", 7);
+    this.calciteListItemChange = createEvent(this, "calciteListItemChange", 6);
     this.calciteListItemRemove = createEvent(this, "calciteListItemRemove", 7);
-    this.calciteInternalListItemPropsChange = createEvent(this, "calciteInternalListItemPropsChange", 7);
-    this.calciteInternalListItemValueChange = createEvent(this, "calciteInternalListItemValueChange", 7);
+    this.calciteInternalListItemPropsChange = createEvent(this, "calciteInternalListItemPropsChange", 6);
+    this.calciteInternalListItemValueChange = createEvent(this, "calciteInternalListItemValueChange", 6);
     /**
      * When true, interaction is prevented and the component is displayed with lower opacity.
      */
@@ -18419,10 +18431,10 @@ const Popover = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calcitePopoverBeforeClose = createEvent(this, "calcitePopoverBeforeClose", 7);
-    this.calcitePopoverClose = createEvent(this, "calcitePopoverClose", 7);
-    this.calcitePopoverBeforeOpen = createEvent(this, "calcitePopoverBeforeOpen", 7);
-    this.calcitePopoverOpen = createEvent(this, "calcitePopoverOpen", 7);
+    this.calcitePopoverBeforeClose = createEvent(this, "calcitePopoverBeforeClose", 6);
+    this.calcitePopoverClose = createEvent(this, "calcitePopoverClose", 6);
+    this.calcitePopoverBeforeOpen = createEvent(this, "calcitePopoverBeforeOpen", 6);
+    this.calcitePopoverOpen = createEvent(this, "calcitePopoverOpen", 6);
     // --------------------------------------------------------------------------
     //
     //  Properties
@@ -18487,16 +18499,16 @@ const Popover = class extends HTMLElement$1 {
      */
     this.intlClose = TEXT$6.close;
     this.guid = `calcite-popover-${guid()}`;
-    this.activeTransitionProp = "opacity";
-    this.setContainerEl = (el) => {
-      this.containerEl = el;
-      this.containerEl.addEventListener("transitionstart", this.transitionStartHandler);
-    };
+    this.openTransitionProp = "opacity";
     // --------------------------------------------------------------------------
     //
     //  Private Methods
     //
     // --------------------------------------------------------------------------
+    this.setTransitionEl = (el) => {
+      this.transitionEl = el;
+      connectOpenCloseComponent(this);
+    };
     this.setFilteredPlacements = () => {
       const { el, flipPlacements } = this;
       this.filteredFlipPlacements = flipPlacements
@@ -18553,16 +18565,6 @@ const Popover = class extends HTMLElement$1 {
     this.hide = () => {
       this.open = false;
     };
-    this.transitionStartHandler = (event) => {
-      if (event.propertyName === this.activeTransitionProp && event.target === this.containerEl) {
-        this.open ? this.onBeforeOpen() : this.onBeforeClose();
-      }
-    };
-    this.transitionEnd = (event) => {
-      if (event.propertyName === this.activeTransitionProp && event.target === this.containerEl) {
-        this.open ? this.onOpen() : this.onClose();
-      }
-    };
     this.storeArrowEl = (el) => {
       this.arrowEl = el;
       this.reposition();
@@ -18605,6 +18607,7 @@ const Popover = class extends HTMLElement$1 {
   connectedCallback() {
     connectFloatingUI(this, this.effectiveReferenceElement, this.el);
     this.setFilteredPlacements();
+    connectOpenCloseComponent(this);
     if (this.dismissible) {
       this.handleDismissible(this.dismissible);
     }
@@ -18619,10 +18622,9 @@ const Popover = class extends HTMLElement$1 {
     this.reposition();
   }
   disconnectedCallback() {
-    var _a;
-    (_a = this.containerEl) === null || _a === void 0 ? void 0 : _a.removeEventListener("transitionstart", this.transitionStartHandler);
     this.removeReferences();
     disconnectFloatingUI(this, this.effectiveReferenceElement, this.el);
+    disconnectOpenCloseComponent(this);
   }
   // --------------------------------------------------------------------------
   //
@@ -18708,7 +18710,7 @@ const Popover = class extends HTMLElement$1 {
     return (h(Host, { "aria-hidden": toAriaBoolean(hidden), "aria-label": label, "aria-live": "polite", "calcite-hydrated-hidden": hidden, id: this.getId(), role: "dialog" }, h("div", { class: {
         [FloatingCSS.animation]: true,
         [FloatingCSS.animationActive]: displayed
-      }, onTransitionEnd: this.transitionEnd, ref: this.setContainerEl }, arrowNode, h("div", { class: {
+      }, ref: this.setTransitionEl }, arrowNode, h("div", { class: {
         [CSS$g.hasHeader]: !!heading,
         [CSS$g.container]: true
       } }, this.renderHeader(), h("div", { class: CSS$g.content }, h("slot", null)), !heading ? this.renderCloseButton() : null))));
@@ -18831,10 +18833,10 @@ const RadioButton = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteInternalRadioButtonBlur = createEvent(this, "calciteInternalRadioButtonBlur", 7);
-    this.calciteRadioButtonChange = createEvent(this, "calciteRadioButtonChange", 7);
-    this.calciteInternalRadioButtonCheckedChange = createEvent(this, "calciteInternalRadioButtonCheckedChange", 7);
-    this.calciteInternalRadioButtonFocus = createEvent(this, "calciteInternalRadioButtonFocus", 7);
+    this.calciteInternalRadioButtonBlur = createEvent(this, "calciteInternalRadioButtonBlur", 6);
+    this.calciteRadioButtonChange = createEvent(this, "calciteRadioButtonChange", 6);
+    this.calciteInternalRadioButtonCheckedChange = createEvent(this, "calciteInternalRadioButtonCheckedChange", 6);
+    this.calciteInternalRadioButtonFocus = createEvent(this, "calciteInternalRadioButtonFocus", 6);
     //--------------------------------------------------------------------------
     //
     //  Properties
@@ -19086,7 +19088,7 @@ const RadioButtonGroup = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteRadioButtonGroupChange = createEvent(this, "calciteRadioButtonGroupChange", 7);
+    this.calciteRadioButtonGroupChange = createEvent(this, "calciteRadioButtonGroupChange", 6);
     //--------------------------------------------------------------------------
     //
     //  Properties
@@ -19185,7 +19187,7 @@ const RadioGroup = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteRadioGroupChange = createEvent(this, "calciteRadioGroupChange", 7);
+    this.calciteRadioGroupChange = createEvent(this, "calciteRadioGroupChange", 6);
     //--------------------------------------------------------------------------
     //
     //  Properties
@@ -19390,7 +19392,7 @@ const RadioGroupItem = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteInternalRadioGroupItemChange = createEvent(this, "calciteInternalRadioGroupItemChange", 7);
+    this.calciteInternalRadioGroupItemChange = createEvent(this, "calciteInternalRadioGroupItemChange", 6);
     //--------------------------------------------------------------------------
     //
     //  Properties
@@ -19439,7 +19441,7 @@ const Rating = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteRatingChange = createEvent(this, "calciteRatingChange", 7);
+    this.calciteRatingChange = createEvent(this, "calciteRatingChange", 6);
     // --------------------------------------------------------------------------
     //
     //  Properties
@@ -19632,7 +19634,7 @@ const Select = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteSelectChange = createEvent(this, "calciteSelectChange", 7);
+    this.calciteSelectChange = createEvent(this, "calciteSelectChange", 6);
     //--------------------------------------------------------------------------
     //
     //  Properties
@@ -20001,7 +20003,7 @@ const ShellPanel = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteShellPanelToggle = createEvent(this, "calciteShellPanelToggle", 7);
+    this.calciteShellPanelToggle = createEvent(this, "calciteShellPanelToggle", 6);
     // --------------------------------------------------------------------------
     //
     //  Properties
@@ -20224,9 +20226,9 @@ const Slider = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteSliderInput = createEvent(this, "calciteSliderInput", 7);
-    this.calciteSliderChange = createEvent(this, "calciteSliderChange", 7);
-    this.calciteSliderUpdate = createEvent(this, "calciteSliderUpdate", 7);
+    this.calciteSliderInput = createEvent(this, "calciteSliderInput", 6);
+    this.calciteSliderChange = createEvent(this, "calciteSliderChange", 6);
+    this.calciteSliderUpdate = createEvent(this, "calciteSliderUpdate", 6);
     //--------------------------------------------------------------------------
     //
     //  Properties
@@ -24012,7 +24014,7 @@ const SortableList = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteListOrderChange = createEvent(this, "calciteListOrderChange", 7);
+    this.calciteListOrderChange = createEvent(this, "calciteListOrderChange", 6);
     /**
      * The selector for the handle elements.
      */
@@ -24175,8 +24177,8 @@ const SplitButton = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteSplitButtonPrimaryClick = createEvent(this, "calciteSplitButtonPrimaryClick", 7);
-    this.calciteSplitButtonSecondaryClick = createEvent(this, "calciteSplitButtonSecondaryClick", 7);
+    this.calciteSplitButtonPrimaryClick = createEvent(this, "calciteSplitButtonPrimaryClick", 6);
+    this.calciteSplitButtonSecondaryClick = createEvent(this, "calciteSplitButtonSecondaryClick", 6);
     /** specify the appearance style of the button, defaults to solid. */
     this.appearance = "solid";
     /** specify the color of the control, defaults to blue */
@@ -24257,8 +24259,8 @@ const Stepper = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteStepperItemChange = createEvent(this, "calciteStepperItemChange", 7);
-    this.calciteInternalStepperItemChange = createEvent(this, "calciteInternalStepperItemChange", 7);
+    this.calciteStepperItemChange = createEvent(this, "calciteStepperItemChange", 6);
+    this.calciteInternalStepperItemChange = createEvent(this, "calciteInternalStepperItemChange", 6);
     //--------------------------------------------------------------------------
     //
     //  Public Properties
@@ -24476,10 +24478,10 @@ const StepperItem = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteInternalStepperItemKeyEvent = createEvent(this, "calciteInternalStepperItemKeyEvent", 7);
-    this.calciteInternalStepperItemSelect = createEvent(this, "calciteInternalStepperItemSelect", 7);
-    this.calciteInternalUserRequestedStepperItemSelect = createEvent(this, "calciteInternalUserRequestedStepperItemSelect", 7);
-    this.calciteInternalStepperItemRegister = createEvent(this, "calciteInternalStepperItemRegister", 7);
+    this.calciteInternalStepperItemKeyEvent = createEvent(this, "calciteInternalStepperItemKeyEvent", 6);
+    this.calciteInternalStepperItemSelect = createEvent(this, "calciteInternalStepperItemSelect", 6);
+    this.calciteInternalUserRequestedStepperItemSelect = createEvent(this, "calciteInternalUserRequestedStepperItemSelect", 6);
+    this.calciteInternalStepperItemRegister = createEvent(this, "calciteInternalStepperItemRegister", 6);
     //--------------------------------------------------------------------------
     //
     //  Public Properties
@@ -24641,7 +24643,7 @@ const Switch = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteSwitchChange = createEvent(this, "calciteSwitchChange", 7);
+    this.calciteSwitchChange = createEvent(this, "calciteSwitchChange", 6);
     //--------------------------------------------------------------------------
     //
     //  Properties
@@ -24745,7 +24747,7 @@ const Tab = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteInternalTabRegister = createEvent(this, "calciteInternalTabRegister", 7);
+    this.calciteInternalTabRegister = createEvent(this, "calciteInternalTabRegister", 6);
     /**
      * Show this tab
      */
@@ -24842,8 +24844,8 @@ const TabNav = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteTabChange = createEvent(this, "calciteTabChange", 7);
-    this.calciteInternalTabChange = createEvent(this, "calciteInternalTabChange", 7);
+    this.calciteTabChange = createEvent(this, "calciteTabChange", 6);
+    this.calciteInternalTabChange = createEvent(this, "calciteInternalTabChange", 6);
     /**
      * @internal
      */
@@ -25046,11 +25048,11 @@ const TabTitle = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteTabsActivate = createEvent(this, "calciteTabsActivate", 7);
-    this.calciteInternalTabsActivate = createEvent(this, "calciteInternalTabsActivate", 7);
-    this.calciteInternalTabsFocusNext = createEvent(this, "calciteInternalTabsFocusNext", 7);
-    this.calciteInternalTabsFocusPrevious = createEvent(this, "calciteInternalTabsFocusPrevious", 7);
-    this.calciteInternalTabTitleRegister = createEvent(this, "calciteInternalTabTitleRegister", 7);
+    this.calciteTabsActivate = createEvent(this, "calciteTabsActivate", 6);
+    this.calciteInternalTabsActivate = createEvent(this, "calciteInternalTabsActivate", 6);
+    this.calciteInternalTabsFocusNext = createEvent(this, "calciteInternalTabsFocusNext", 6);
+    this.calciteInternalTabsFocusPrevious = createEvent(this, "calciteInternalTabsFocusPrevious", 6);
+    this.calciteInternalTabTitleRegister = createEvent(this, "calciteInternalTabTitleRegister", 6);
     //--------------------------------------------------------------------------
     //
     //  Properties
@@ -25491,7 +25493,7 @@ const TileSelect = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteTileSelectChange = createEvent(this, "calciteTileSelectChange", 7);
+    this.calciteTileSelectChange = createEvent(this, "calciteTileSelectChange", 6);
     //--------------------------------------------------------------------------
     //
     //  Properties
@@ -25750,9 +25752,9 @@ const TimePicker = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteInternalTimePickerBlur = createEvent(this, "calciteInternalTimePickerBlur", 7);
-    this.calciteInternalTimePickerChange = createEvent(this, "calciteInternalTimePickerChange", 7);
-    this.calciteInternalTimePickerFocus = createEvent(this, "calciteInternalTimePickerFocus", 7);
+    this.calciteInternalTimePickerBlur = createEvent(this, "calciteInternalTimePickerBlur", 6);
+    this.calciteInternalTimePickerChange = createEvent(this, "calciteInternalTimePickerChange", 6);
+    this.calciteInternalTimePickerFocus = createEvent(this, "calciteInternalTimePickerFocus", 6);
     //--------------------------------------------------------------------------
     //
     //  Properties
@@ -26408,7 +26410,7 @@ const Tip = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteTipDismiss = createEvent(this, "calciteTipDismiss", 7);
+    this.calciteTipDismiss = createEvent(this, "calciteTipDismiss", 6);
     // --------------------------------------------------------------------------
     //
     //  Properties
@@ -26503,8 +26505,8 @@ const TipManager = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteTipManagerToggle = createEvent(this, "calciteTipManagerToggle", 7);
-    this.calciteTipManagerClose = createEvent(this, "calciteTipManagerClose", 7);
+    this.calciteTipManagerToggle = createEvent(this, "calciteTipManagerToggle", 6);
+    this.calciteTipManagerClose = createEvent(this, "calciteTipManagerClose", 6);
     // --------------------------------------------------------------------------
     //
     //  Properties
@@ -27033,7 +27035,7 @@ const Tree = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteTreeSelect = createEvent(this, "calciteTreeSelect", 7);
+    this.calciteTreeSelect = createEvent(this, "calciteTreeSelect", 6);
     //--------------------------------------------------------------------------
     //
     //  Properties
@@ -27206,7 +27208,7 @@ const Tree = class extends HTMLElement$1 {
           if (!target.hasChildren) {
             break;
           }
-          if (target.expanded && document.activeElement === target) {
+          if (target.expanded && getRootNode(this.el).activeElement === target) {
             // When focus is on an open node, moves focus to the first child node.
             (_a = target.querySelector("calcite-tree-item")) === null || _a === void 0 ? void 0 : _a.focus();
             event.preventDefault();
@@ -27300,7 +27302,7 @@ const TreeItem = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteInternalTreeItemSelect = createEvent(this, "calciteInternalTreeItemSelect", 7);
+    this.calciteInternalTreeItemSelect = createEvent(this, "calciteInternalTreeItemSelect", 6);
     //--------------------------------------------------------------------------
     //
     //  Properties
@@ -27560,8 +27562,8 @@ const ValueList = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.calciteListChange = createEvent(this, "calciteListChange", 7);
-    this.calciteListOrderChange = createEvent(this, "calciteListOrderChange", 7);
+    this.calciteListChange = createEvent(this, "calciteListChange", 6);
+    this.calciteListOrderChange = createEvent(this, "calciteListOrderChange", 6);
     // --------------------------------------------------------------------------
     //
     //  Properties