npm - @esri/calcite-components - Versions diffs - 1.0.0-next.548 → 1.0.0-next.550 - Mend

@esri/calcite-components 1.0.0-next.548 → 1.0.0-next.550

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (842) hide show

package/hydrate/index.js CHANGED Viewed

@@ -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.548
+ * v1.0.0-next.550
  */
 'use strict';
@@ -5571,7 +5571,7 @@ const accordionCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyfra
 class Accordion {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.calciteInternalAccordionChange = createEvent(this, "calciteInternalAccordionChange", 7);
+    this.calciteInternalAccordionChange = createEvent(this, "calciteInternalAccordionChange", 6);
     //--------------------------------------------------------------------------
     //
     //  Public Properties
@@ -5987,10 +5987,10 @@ const accordionItemCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@ke
 class AccordionItem {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    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
@@ -6218,7 +6218,7 @@ const actionCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes
 class Action {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.calciteActionClick = createEvent(this, "calciteActionClick", 7);
+    this.calciteActionClick = createEvent(this, "calciteActionClick", 6);
     // --------------------------------------------------------------------------
     //
     //  Properties
@@ -7760,7 +7760,7 @@ const actionBarCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyfra
 class ActionBar {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.calciteActionBarToggle = createEvent(this, "calciteActionBarToggle", 7);
+    this.calciteActionBarToggle = createEvent(this, "calciteActionBarToggle", 6);
     // --------------------------------------------------------------------------
     //
     //  Properties
@@ -8059,7 +8059,7 @@ const SUPPORTED_MENU_NAV_KEYS = ["ArrowUp", "ArrowDown", "End", "Home"];
 class ActionMenu {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.calciteActionMenuOpenChange = createEvent(this, "calciteActionMenuOpenChange", 7);
+    this.calciteActionMenuOpenChange = createEvent(this, "calciteActionMenuOpenChange", 6);
     // --------------------------------------------------------------------------
     //
     //  Properties
@@ -8354,7 +8354,7 @@ const actionPadCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyfra
 class ActionPad {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.calciteActionPadToggle = createEvent(this, "calciteActionPadToggle", 7);
+    this.calciteActionPadToggle = createEvent(this, "calciteActionPadToggle", 6);
     // --------------------------------------------------------------------------
     //
     //  Properties
@@ -8493,6 +8493,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*/.sc-calcite-alert: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*/.calcite-animate.sc-calcite-alert{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*/.calcite-animate__in.sc-calcite-alert{-webkit-animation-name:in;animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-alert{-webkit-animation-name:in-down;animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-alert{-webkit-animation-name:in-up;animation-name:in-up}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-alert{-webkit-animation-name:in-scale;animation-name:in-scale}/*!@:root*/.sc-calcite-alert:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}/*!@:host([hidden])*/[hidden].sc-calcite-alert-h{display:none}/*!@:host([scale=s])*/[scale=s].sc-calcite-alert-h{--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(*), \n:host([scale=s]) *::slotted([slot=title])*/.sc-calcite-alert-h[scale=s] slot[name=title].sc-calcite-alert-s>*,.sc-calcite-alert-h[scale=s] *.sc-calcite-alert-s>[slot=title]{font-size:var(--calcite-font-size--1);line-height:1.375}/*!@:host([scale=s]) slot[name=message]::slotted(*), \n:host([scale=s]) *::slotted([slot=message])*/.sc-calcite-alert-h[scale=s] slot[name=message].sc-calcite-alert-s>*,.sc-calcite-alert-h[scale=s] *.sc-calcite-alert-s>[slot=message]{font-size:var(--calcite-font-size--2);line-height:1.375}/*!@:host([scale=s]) slot[name=link]::slotted(*), \n:host([scale=s]) *::slotted([slot=link])*/.sc-calcite-alert-h[scale=s] slot[name=link].sc-calcite-alert-s>*,.sc-calcite-alert-h[scale=s] *.sc-calcite-alert-s>[slot=link]{font-size:var(--calcite-font-size--2);line-height:1.375}/*!@:host([scale=s]) .alert-queue-count*/[scale=s].sc-calcite-alert-h .alert-queue-count.sc-calcite-alert{margin-inline:0.5rem}/*!@:host([scale=s]) .container*/[scale=s].sc-calcite-alert-h .container.sc-calcite-alert{--calcite-alert-min-height:3.5rem}/*!@:host([scale=s]) .alert-close*/[scale=s].sc-calcite-alert-h .alert-close.sc-calcite-alert{padding:0.5rem}/*!@:host([scale=m])*/[scale=m].sc-calcite-alert-h{--calcite-alert-width:50em;--calcite-alert-spacing-token-small:0.75rem;--calcite-alert-spacing-token-large:1rem}/*!@:host([scale=m]) slot[name=title]::slotted(*), \n:host([scale=m]) *::slotted([slot=title])*/.sc-calcite-alert-h[scale=m] slot[name=title].sc-calcite-alert-s>*,.sc-calcite-alert-h[scale=m] *.sc-calcite-alert-s>[slot=title]{font-size:var(--calcite-font-size-0);line-height:1.375}/*!@:host([scale=m]) slot[name=message]::slotted(*), \n:host([scale=m]) *::slotted([slot=message])*/.sc-calcite-alert-h[scale=m] slot[name=message].sc-calcite-alert-s>*,.sc-calcite-alert-h[scale=m] *.sc-calcite-alert-s>[slot=message]{font-size:var(--calcite-font-size--1);line-height:1.375}/*!@:host([scale=m]) slot[name=link]::slotted(*), \n:host([scale=m]) *::slotted([slot=link])*/.sc-calcite-alert-h[scale=m] slot[name=link].sc-calcite-alert-s>*,.sc-calcite-alert-h[scale=m] *.sc-calcite-alert-s>[slot=link]{font-size:var(--calcite-font-size--1);line-height:1.375}/*!@:host([scale=m]) .alert-queue-count*/[scale=m].sc-calcite-alert-h .alert-queue-count.sc-calcite-alert{margin-inline:0.75rem}/*!@:host([scale=m]) .container*/[scale=m].sc-calcite-alert-h .container.sc-calcite-alert{--calcite-alert-min-height:4.1875rem}/*!@:host([scale=l])*/[scale=l].sc-calcite-alert-h{--calcite-alert-width:60em;--calcite-alert-spacing-token-small:1rem;--calcite-alert-spacing-token-large:1.25rem}/*!@:host([scale=l]) slot[name=title]::slotted(*), \n:host([scale=l]) *::slotted([slot=title])*/.sc-calcite-alert-h[scale=l] slot[name=title].sc-calcite-alert-s>*,.sc-calcite-alert-h[scale=l] *.sc-calcite-alert-s>[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(*), \n:host([scale=l]) *::slotted([slot=message])*/.sc-calcite-alert-h[scale=l] slot[name=message].sc-calcite-alert-s>*,.sc-calcite-alert-h[scale=l] *.sc-calcite-alert-s>[slot=message]{font-size:var(--calcite-font-size-0);line-height:1.375}/*!@:host([scale=l]) slot[name=link]::slotted(*), \n:host([scale=l]) *::slotted([slot=link])*/.sc-calcite-alert-h[scale=l] slot[name=link].sc-calcite-alert-s>*,.sc-calcite-alert-h[scale=l] *.sc-calcite-alert-s>[slot=link]{font-size:var(--calcite-font-size-0);line-height:1.375}/*!@:host([scale=l]) .alert-queue-count*/[scale=l].sc-calcite-alert-h .alert-queue-count.sc-calcite-alert{margin-inline:1rem}/*!@:host([scale=l]) .container*/[scale=l].sc-calcite-alert-h .container.sc-calcite-alert{--calcite-alert-min-height:5.625rem}/*!@:host*/.sc-calcite-alert-h{--calcite-alert-edge-distance:2rem;display:block}/*!@:host .container*/.sc-calcite-alert-h .container.sc-calcite-alert{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*/.sc-calcite-alert-h .container.bottom.sc-calcite-alert,.sc-calcite-alert-h .container.top.sc-calcite-alert{inset-inline-end:0;inset-inline-start:0}/*!@:host .container[class*=bottom]*/.sc-calcite-alert-h .container[class*=bottom].sc-calcite-alert{-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]*/.sc-calcite-alert-h .container[class*=top].sc-calcite-alert{-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]*/.sc-calcite-alert-h .container[class*=-start].sc-calcite-alert{inset-inline-start:var(--calcite-alert-edge-distance);inset-inline-end:auto}/*!@:host .container[class*=-end]*/.sc-calcite-alert-h .container[class*=-end].sc-calcite-alert{inset-inline-end:var(--calcite-alert-edge-distance);inset-inline-start:auto}/*!@:host([calcite-hydrated-hidden])*/[calcite-hydrated-hidden].sc-calcite-alert-h{visibility:hidden !important;pointer-events:none}/*!@.container*/.container.sc-calcite-alert{display:-ms-flexbox;display:flex;inline-size:100%;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}/*!@.alert-close*/.alert-close.sc-calcite-alert{outline-color:transparent}/*!@.alert-close:focus*/.alert-close.sc-calcite-alert:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}/*!@:host([open]) .container:not(.queued)*/[open].sc-calcite-alert-h .container.sc-calcite-alert:not(.queued){max-block-size:100%;border-block-start-width:2px;opacity:1;pointer-events:initial}/*!@:host([open]) .container:not(.queued)[class*=bottom]*/[open].sc-calcite-alert-h .container.sc-calcite-alert: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]*/[open].sc-calcite-alert-h .container.sc-calcite-alert: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(*), \n*::slotted([slot=title])*/slot[name=title].sc-calcite-alert-s>*,*.sc-calcite-alert-s>[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(*), \n*::slotted([slot=message])*/slot[name=message].sc-calcite-alert-s>*,*.sc-calcite-alert-s>[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(*), \n*::slotted([slot=link])*/slot[name=link].sc-calcite-alert-s>*,*.sc-calcite-alert-s>[slot=link]{display:-ms-inline-flexbox;display:inline-flex;color:var(--calcite-ui-text-link)}/*!@.alert-content*/.alert-content.sc-calcite-alert{-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)*/.alert-content.sc-calcite-alert: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*/.alert-content.sc-calcite-alert:only-child{padding:var(--calcite-alert-spacing-token-small)}/*!@.alert-icon*/.alert-icon.sc-calcite-alert{-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*/.alert-close.sc-calcite-alert{-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*/.alert-close.sc-calcite-alert:hover,.alert-close.sc-calcite-alert:focus{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-text-1)}/*!@.alert-close:open*/.alert-close.sc-calcite-alert:open{background-color:var(--calcite-ui-foreground-3)}/*!@.alert-queue-count*/.alert-queue-count.sc-calcite-alert{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*/.alert-queue-count.active.sc-calcite-alert{visibility:visible;opacity:1}/*!@:host([auto-dismiss]) > .alert-queue-count*/[auto-dismiss].sc-calcite-alert-h>.alert-queue-count.sc-calcite-alert{-webkit-border-end:0px solid transparent;border-inline-end:0px solid transparent}/*!@.alert-dismiss-progress*/.alert-dismiss-progress.sc-calcite-alert{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*/.alert-dismiss-progress.sc-calcite-alert: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*/[color=blue].sc-calcite-alert-h .container.sc-calcite-alert{border-block-start-color:var(--calcite-ui-info)}/*!@:host([color=blue]) .container .alert-icon*/[color=blue].sc-calcite-alert-h .container.sc-calcite-alert .alert-icon.sc-calcite-alert{color:var(--calcite-ui-info)}/*!@:host([color=red]) .container*/[color=red].sc-calcite-alert-h .container.sc-calcite-alert{border-block-start-color:var(--calcite-ui-danger)}/*!@:host([color=red]) .container .alert-icon*/[color=red].sc-calcite-alert-h .container.sc-calcite-alert .alert-icon.sc-calcite-alert{color:var(--calcite-ui-danger)}/*!@:host([color=yellow]) .container*/[color=yellow].sc-calcite-alert-h .container.sc-calcite-alert{border-block-start-color:var(--calcite-ui-warning)}/*!@:host([color=yellow]) .container .alert-icon*/[color=yellow].sc-calcite-alert-h .container.sc-calcite-alert .alert-icon.sc-calcite-alert{color:var(--calcite-ui-warning)}/*!@:host([color=green]) .container*/[color=green].sc-calcite-alert-h .container.sc-calcite-alert{border-block-start-color:var(--calcite-ui-success)}/*!@:host([color=green]) .container .alert-icon*/[color=green].sc-calcite-alert-h .container.sc-calcite-alert .alert-icon.sc-calcite-alert{color:var(--calcite-ui-success)}/*!@:host([auto-dismiss-duration=fast]) .alert-dismiss-progress:after*/[auto-dismiss-duration=fast].sc-calcite-alert-h .alert-dismiss-progress.sc-calcite-alert:after{-webkit-animation:dismissProgress 6000ms ease-out;animation:dismissProgress 6000ms ease-out}/*!@:host([auto-dismiss-duration=medium]) .alert-dismiss-progress:after*/[auto-dismiss-duration=medium].sc-calcite-alert-h .alert-dismiss-progress.sc-calcite-alert:after{-webkit-animation:dismissProgress 10000ms ease-out;animation:dismissProgress 10000ms ease-out}/*!@:host([auto-dismiss-duration=slow]) .alert-dismiss-progress:after*/[auto-dismiss-duration=slow].sc-calcite-alert-h .alert-dismiss-progress.sc-calcite-alert: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}}";
 /**
@@ -8507,12 +8552,12 @@ const alertCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes
 class Alert {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    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
@@ -8553,13 +8598,18 @@ class Alert {
     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;
@@ -8569,16 +8619,6 @@ class Alert {
       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;
@@ -8615,14 +8655,14 @@ class Alert {
       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 = (hAsync("button", { "aria-label": this.intlClose, class: "alert-close", onClick: this.closeAlert, ref: (el) => (this.closeButton = el), type: "button" }, hAsync("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : "s" })));
@@ -8635,7 +8675,7 @@ class Alert {
         container: true,
         queued,
         [placement]: true
-      }, onTransitionEnd: this.transitionEnd, ref: this.setContainerEl }, requestedIcon ? (hAsync("div", { class: "alert-icon" }, hAsync("calcite-icon", { icon: requestedIcon, scale: this.scale === "l" ? "m" : "s" }))) : null, hAsync("div", { class: "alert-content" }, hAsync("slot", { name: SLOTS$n.title }), hAsync("slot", { name: SLOTS$n.message }), hAsync("slot", { name: SLOTS$n.link })), queueCount, !autoDismiss ? closeButton : null, active && !queued && autoDismiss ? hAsync("div", { class: "alert-dismiss-progress" }) : null)));
+      }, ref: this.setTransitionEl }, requestedIcon ? (hAsync("div", { class: "alert-icon" }, hAsync("calcite-icon", { icon: requestedIcon, scale: this.scale === "l" ? "m" : "s" }))) : null, hAsync("div", { class: "alert-content" }, hAsync("slot", { name: SLOTS$n.title }), hAsync("slot", { name: SLOTS$n.message }), hAsync("slot", { name: SLOTS$n.link })), queueCount, !autoDismiss ? closeButton : null, active && !queued && autoDismiss ? hAsync("div", { class: "alert-dismiss-progress" }) : null)));
   }
   // when an alert is opened or closed, update queue and determine active alert
   alertSync(event) {
@@ -8673,11 +8713,6 @@ class Alert {
       this.closeButton.focus();
     }
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  //--------------------------------------------------------------------------
   /** determine which alert is active */
   determineActiveAlert() {
     var _a;
@@ -9062,7 +9097,7 @@ const blockCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes
 class Block {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.calciteBlockToggle = createEvent(this, "calciteBlockToggle", 7);
+    this.calciteBlockToggle = createEvent(this, "calciteBlockToggle", 6);
     // --------------------------------------------------------------------------
     //
     //  Properties
@@ -9253,7 +9288,7 @@ const blockSectionCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@key
 class BlockSection {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.calciteBlockSectionToggle = createEvent(this, "calciteBlockSectionToggle", 7);
+    this.calciteBlockSectionToggle = createEvent(this, "calciteBlockSectionToggle", 6);
     /**
      * When true, the block's section content will be displayed.
      */
@@ -9914,7 +9949,7 @@ const cardCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes i
 class Card {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.calciteCardSelect = createEvent(this, "calciteCardSelect", 7);
+    this.calciteCardSelect = createEvent(this, "calciteCardSelect", 6);
     //--------------------------------------------------------------------------
     //
     //  Public Properties
@@ -10034,9 +10069,9 @@ const checkboxCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyfram
 class Checkbox {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    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
@@ -10196,7 +10231,7 @@ const chipCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes i
 class Chip {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.calciteChipDismiss = createEvent(this, "calciteChipDismiss", 7);
+    this.calciteChipDismiss = createEvent(this, "calciteChipDismiss", 6);
     //--------------------------------------------------------------------------
     //
     //  Public Properties
@@ -12546,8 +12581,8 @@ const defaultFormat = "auto";
 class ColorPicker {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    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
@@ -13425,7 +13460,7 @@ const DEFAULT_COLOR = color();
 class ColorPickerHexInput {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.calciteColorPickerHexInputChange = createEvent(this, "calciteColorPickerHexInputChange", 7);
+    this.calciteColorPickerHexInputChange = createEvent(this, "calciteColorPickerHexInputChange", 6);
     //--------------------------------------------------------------------------
     //
     //  Public Properties
@@ -15366,14 +15401,14 @@ const inputUidPrefix = "combobox-input-";
 class Combobox {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    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
@@ -15437,7 +15472,7 @@ class Combobox {
     this.guid = guid();
     this.inputHeight = 0;
     this.ignoreSelectedEventsFlag = false;
-    this.activeTransitionProp = "opacity";
+    this.openTransitionProp = "opacity";
     // --------------------------------------------------------------------------
     //
     //  Private Methods
@@ -15556,16 +15591,6 @@ class Combobox {
       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) {
@@ -15615,10 +15640,11 @@ class Combobox {
       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;
@@ -15800,6 +15826,7 @@ class Combobox {
     (_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) {
@@ -15824,13 +15851,13 @@ class Combobox {
     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;
@@ -16119,7 +16146,7 @@ class Combobox {
     return this.visibleItems.map((item) => (hAsync("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,
@@ -16128,7 +16155,7 @@ class Combobox {
     return (hAsync("div", { "aria-hidden": "true", class: {
         "floating-ui-container": true,
         "floating-ui-container--active": open || active
-      }, ref: setFloatingEl }, hAsync("div", { class: classes, onTransitionEnd: this.transitionEnd, ref: setListContainerEl }, hAsync("ul", { class: { list: true, "list--hide": !(open || active) } }, hAsync("slot", null)))));
+      }, ref: setFloatingEl }, hAsync("div", { class: classes, ref: setContainerEl }, hAsync("ul", { class: { list: true, "list--hide": !(open || active) } }, hAsync("slot", null)))));
   }
   renderIconStart() {
     var _a;
@@ -16223,7 +16250,7 @@ const comboboxItemCss = "@charset \"UTF-8\";@-webkit-keyframes in{0%{opacity:0}1
 class ComboboxItem {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.calciteComboboxItemChange = createEvent(this, "calciteComboboxItemChange", 7);
+    this.calciteComboboxItemChange = createEvent(this, "calciteComboboxItemChange", 6);
     // --------------------------------------------------------------------------
     //
     //  Properties
@@ -16805,8 +16832,8 @@ const datePickerCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyfr
 class DatePicker {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    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)
      *
@@ -17257,8 +17284,8 @@ const datePickerDayCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@ke
 class DatePickerDay {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    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. */
@@ -17345,10 +17372,10 @@ const datePickerMonthCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@
 class DatePickerMonth {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    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();
     //--------------------------------------------------------------------------
@@ -17665,7 +17692,7 @@ const datePickerMonthHeaderCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacit
 class DatePickerMonthHeader {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.calciteDatePickerSelect = createEvent(this, "calciteDatePickerSelect", 7);
+    this.calciteDatePickerSelect = createEvent(this, "calciteDatePickerSelect", 6);
     //--------------------------------------------------------------------------
     //
     //  Private Methods
@@ -17846,17 +17873,17 @@ const SLOTS$j = {
 const dropdownCss = "@-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*/.sc-calcite-dropdown: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*/.calcite-animate.sc-calcite-dropdown{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*/.calcite-animate__in.sc-calcite-dropdown{-webkit-animation-name:in;animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-dropdown{-webkit-animation-name:in-down;animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-dropdown{-webkit-animation-name:in-up;animation-name:in-up}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-dropdown{-webkit-animation-name:in-scale;animation-name:in-scale}/*!@:root*/.sc-calcite-dropdown:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}/*!@:host([hidden])*/[hidden].sc-calcite-dropdown-h{display:none}/*!@:host([disabled])*/[disabled].sc-calcite-dropdown-h{pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}/*!@:host*/.sc-calcite-dropdown-h{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:0 1 auto;flex:0 1 auto}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-dropdown-h[disabled] .sc-calcite-dropdown-s>[calcite-hydrated][disabled],[disabled].sc-calcite-dropdown-h [calcite-hydrated][disabled].sc-calcite-dropdown{opacity:1}/*!@:host .calcite-dropdown-wrapper*/.sc-calcite-dropdown-h .calcite-dropdown-wrapper.sc-calcite-dropdown{display:block;position:absolute;z-index:900;-webkit-transform:scale(0);transform:scale(0);visibility:hidden;pointer-events:none}/*!@.calcite-dropdown-wrapper .calcite-floating-ui-anim*/.calcite-dropdown-wrapper.sc-calcite-dropdown .calcite-floating-ui-anim.sc-calcite-dropdown{position:relative;z-index:1;-webkit-transition:var(--calcite-floating-ui-transition);transition:var(--calcite-floating-ui-transition);visibility:hidden;-webkit-transition-property:visibility, opacity, -webkit-transform;transition-property:visibility, opacity, -webkit-transform;transition-property:transform, visibility, opacity;transition-property:transform, visibility, opacity, -webkit-transform;opacity:0;-webkit-box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);border-radius:0.25rem}/*!@.calcite-dropdown-wrapper[data-placement^=bottom] .calcite-floating-ui-anim*/.calcite-dropdown-wrapper[data-placement^=bottom].sc-calcite-dropdown .calcite-floating-ui-anim.sc-calcite-dropdown{-webkit-transform:translateY(-5px);transform:translateY(-5px)}/*!@.calcite-dropdown-wrapper[data-placement^=top] .calcite-floating-ui-anim*/.calcite-dropdown-wrapper[data-placement^=top].sc-calcite-dropdown .calcite-floating-ui-anim.sc-calcite-dropdown{-webkit-transform:translateY(5px);transform:translateY(5px)}/*!@.calcite-dropdown-wrapper[data-placement^=left] .calcite-floating-ui-anim*/.calcite-dropdown-wrapper[data-placement^=left].sc-calcite-dropdown .calcite-floating-ui-anim.sc-calcite-dropdown{-webkit-transform:translateX(5px);transform:translateX(5px)}/*!@.calcite-dropdown-wrapper[data-placement^=right] .calcite-floating-ui-anim*/.calcite-dropdown-wrapper[data-placement^=right].sc-calcite-dropdown .calcite-floating-ui-anim.sc-calcite-dropdown{-webkit-transform:translateX(-5px);transform:translateX(-5px)}/*!@.calcite-dropdown-wrapper[data-placement] .calcite-floating-ui-anim--active*/.calcite-dropdown-wrapper[data-placement].sc-calcite-dropdown .calcite-floating-ui-anim--active.sc-calcite-dropdown{opacity:1;visibility:visible;-webkit-transform:translate(0);transform:translate(0)}/*!@:host([open]) .calcite-dropdown-wrapper*/[open].sc-calcite-dropdown-h .calcite-dropdown-wrapper.sc-calcite-dropdown{pointer-events:initial;visibility:visible}/*!@:host .calcite-dropdown-content*/.sc-calcite-dropdown-h .calcite-dropdown-content.sc-calcite-dropdown{max-block-size:45vh;inline-size:auto;overflow-y:auto;overflow-x:hidden;background-color:var(--calcite-ui-foreground-1);inline-size:var(--calcite-dropdown-width)}/*!@.calcite-dropdown-trigger-container*/.calcite-dropdown-trigger-container.sc-calcite-dropdown{position:relative;display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto}@media (forced-colors: active){/*!@:host([open]) .calcite-dropdown-wrapper*/[open].sc-calcite-dropdown-h .calcite-dropdown-wrapper.sc-calcite-dropdown{border:1px solid canvasText}}/*!@:host([width=s])*/[width=s].sc-calcite-dropdown-h{--calcite-dropdown-width:12rem}/*!@:host([width=m])*/[width=m].sc-calcite-dropdown-h{--calcite-dropdown-width:14rem}/*!@:host([width=l])*/[width=l].sc-calcite-dropdown-h{--calcite-dropdown-width:16rem}";
 /**
- * @slot - A slot for adding `calcite-dropdown-group`s or `calcite-dropdown-item`s.
- * @slot dropdown-trigger - A slot for the element that triggers the dropdown.
+ * @slot - A slot for adding `calcite-dropdown-group` components. Every `calcite-dropdown-item` must have a parent `calcite-dropdown-group`, even if the `groupTitle` property is not set.
+ * @slot dropdown-trigger - A slot for the element that triggers the `calcite-dropdown`.
  */
 class Dropdown {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    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
@@ -17902,9 +17929,9 @@ class Dropdown {
     this.type = "click";
     this.items = [];
     this.groups = [];
-    this.activeTransitionProp = "visibility";
     this.mutationObserver = createObserver();
     this.resizeObserver = createObserver();
+    this.openTransitionProp = "visibility";
     this.guid = `calcite-dropdown-${guid()}`;
     this.defaultAssignedElements = [];
     //--------------------------------------------------------------------------
@@ -17973,20 +18000,11 @@ class Dropdown {
       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;
@@ -18075,6 +18093,7 @@ class Dropdown {
     if (this.active) {
       this.activeHandler(this.active);
     }
+    connectOpenCloseComponent(this);
   }
   componentDidLoad() {
     this.reposition();
@@ -18083,11 +18102,11 @@ class Dropdown {
     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;
@@ -18095,7 +18114,7 @@ class Dropdown {
         ["calcite-dropdown-content"]: true,
         [FloatingCSS.animation]: true,
         [FloatingCSS.animationActive]: open
-      }, id: `${guid}-menu`, onTransitionEnd: this.transitionEnd, ref: this.setScrollerEl, role: "menu" }, hAsync("div", { hidden: !open }, hAsync("slot", { onSlotchange: this.updateGroups }))))));
+      }, id: `${guid}-menu`, ref: this.setScrollerAndTransitionEl, role: "menu" }, hAsync("div", { hidden: !open }, hAsync("slot", { onSlotchange: this.updateGroups }))))));
   }
   //--------------------------------------------------------------------------
   //
@@ -18306,12 +18325,12 @@ const CSS$D = {
 const dropdownGroupCss = "@-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*/.sc-calcite-dropdown-group: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*/.calcite-animate.sc-calcite-dropdown-group{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*/.calcite-animate__in.sc-calcite-dropdown-group{-webkit-animation-name:in;animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-dropdown-group{-webkit-animation-name:in-down;animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-dropdown-group{-webkit-animation-name:in-up;animation-name:in-up}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-dropdown-group{-webkit-animation-name:in-scale;animation-name:in-scale}/*!@:root*/.sc-calcite-dropdown-group:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}/*!@:host([hidden])*/[hidden].sc-calcite-dropdown-group-h{display:none}/*!@:host*/.sc-calcite-dropdown-group-h{display:block}/*!@.container*/.container.sc-calcite-dropdown-group{text-align:start}/*!@.container--s*/.container--s.sc-calcite-dropdown-group{font-size:var(--calcite-font-size--2);line-height:1rem}/*!@.container--s .dropdown-title*/.container--s.sc-calcite-dropdown-group .dropdown-title.sc-calcite-dropdown-group{padding:0.5rem}/*!@.container--m*/.container--m.sc-calcite-dropdown-group{font-size:var(--calcite-font-size--1);line-height:1rem}/*!@.container--m .dropdown-title*/.container--m.sc-calcite-dropdown-group .dropdown-title.sc-calcite-dropdown-group{padding:0.75rem}/*!@.container--l*/.container--l.sc-calcite-dropdown-group{font-size:var(--calcite-font-size-0);line-height:1.25rem}/*!@.container--l .dropdown-title*/.container--l.sc-calcite-dropdown-group .dropdown-title.sc-calcite-dropdown-group{padding:1rem}/*!@.dropdown-title*/.dropdown-title.sc-calcite-dropdown-group{-webkit-margin-after:-1px;margin-block-end:-1px;display:block;cursor:default;overflow-wrap:break-word;border-width:0px;border-block-end-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);font-weight:var(--calcite-font-weight-bold);color:var(--calcite-ui-text-2)}/*!@.dropdown-separator*/.dropdown-separator.sc-calcite-dropdown-group{display:block;block-size:1px;background-color:var(--calcite-ui-border-3)}";
 /**
- * @slot - A slot for adding `calcite-dropdown-item`s.
+ * @slot - A slot for adding `calcite-dropdown-item` components.
  */
 class DropdownGroup {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    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
@@ -18392,9 +18411,9 @@ const dropdownItemCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@key
 class DropdownItem {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    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
@@ -18678,7 +18697,7 @@ const filterCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes
 class Filter {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.calciteFilterChange = createEvent(this, "calciteFilterChange", 7);
+    this.calciteFilterChange = createEvent(this, "calciteFilterChange", 6);
     // --------------------------------------------------------------------------
     //
     //  Properties
@@ -19176,7 +19195,7 @@ const handleCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes
 class Handle {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.calciteHandleNudge = createEvent(this, "calciteHandleNudge", 7);
+    this.calciteHandleNudge = createEvent(this, "calciteHandleNudge", 6);
     // --------------------------------------------------------------------------
     //
     //  Properties
@@ -19382,9 +19401,9 @@ const inlineEditableCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@k
 class InlineEditable {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    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
@@ -19646,10 +19665,10 @@ const inputCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes
 class Input {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    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
@@ -20267,13 +20286,13 @@ const inputDatePickerCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@
 class InputDatePicker {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    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
@@ -20340,11 +20359,7 @@ class InputDatePicker {
     /** 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
@@ -20356,15 +20371,9 @@ class InputDatePicker {
         ? 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;
@@ -20561,6 +20570,7 @@ class InputDatePicker {
     }
     connectLabel(this);
     connectForm(this);
+    connectOpenCloseComponent(this);
     this.reposition();
     this.setFilteredPlacements();
   }
@@ -20573,11 +20583,10 @@ class InputDatePicker {
     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);
@@ -20599,7 +20608,7 @@ class InputDatePicker {
         ["calendar-picker-wrapper--end"]: this.focusedInput === "end",
         [FloatingCSS.animation]: true,
         [FloatingCSS.animationActive]: this.open
-      }, onTransitionEnd: this.transitionEnd, ref: this.setContainerEl }, hAsync("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" && (hAsync("div", { class: "horizontal-arrow-container" }, hAsync("calcite-icon", { flipRtl: true, icon: "arrow-right", scale: "s" }))), this.range && this.layout === "vertical" && this.scale !== "s" && (hAsync("div", { class: "vertical-arrow-container" }, hAsync("calcite-icon", { icon: "arrow-down", scale: "s" }))), this.range && (hAsync("div", { class: "input-wrapper", ref: this.setEndWrapper }, hAsync("calcite-input", { class: {
+      }, ref: this.setTransitionEl }, hAsync("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" && (hAsync("div", { class: "horizontal-arrow-container" }, hAsync("calcite-icon", { flipRtl: true, icon: "arrow-right", scale: "s" }))), this.range && this.layout === "vertical" && this.scale !== "s" && (hAsync("div", { class: "vertical-arrow-container" }, hAsync("calcite-icon", { icon: "arrow-down", scale: "s" }))), this.range && (hAsync("div", { class: "input-wrapper", ref: this.setEndWrapper }, hAsync("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 }))))), hAsync(HiddenFormInputSlot, { component: this })));
@@ -20937,10 +20946,10 @@ const inputNumberCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyf
 class InputNumber {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    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
@@ -22274,7 +22283,7 @@ const labelCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes
 class Label {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.calciteInternalLabelClick = createEvent(this, "calciteInternalLabelClick", 3);
+    this.calciteInternalLabelClick = createEvent(this, "calciteInternalLabelClick", 2);
     //--------------------------------------------------------------------------
     //
     //  Properties
@@ -22879,6 +22888,7 @@ function isFocusable($elem) {
 }
 const CSS$n = {
+  modal: "modal",
   title: "title",
   header: "header",
   footer: "footer",
@@ -22887,7 +22897,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"
@@ -22903,7 +22919,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*/.sc-calcite-modal: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*/.calcite-animate.sc-calcite-modal{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*/.calcite-animate__in.sc-calcite-modal{-webkit-animation-name:in;animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-modal{-webkit-animation-name:in-down;animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-modal{-webkit-animation-name:in-up;animation-name:in-up}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-modal{-webkit-animation-name:in-scale;animation-name:in-scale}/*!@:root*/.sc-calcite-modal:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}/*!@:host([hidden])*/[hidden].sc-calcite-modal-h{display:none}/*!@:host*/.sc-calcite-modal-h{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])*/[scale=s].sc-calcite-modal-h{--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])*/[scale=m].sc-calcite-modal-h{--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])*/[scale=l].sc-calcite-modal-h{--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*/.scrim.sc-calcite-modal{--calcite-scrim-background:rgba(0, 0, 0, 0.75);position:fixed;inset:0px;display:-ms-flexbox;display:flex;overflow-y:hidden}/*!@.modal*/.modal.sc-calcite-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])*/[open].sc-calcite-modal-h{opacity:1;visibility:visible !important;-webkit-transition-delay:0ms;transition-delay:0ms}/*!@:host([open]) .modal*/[open].sc-calcite-modal-h .modal.sc-calcite-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*/.header.sc-calcite-modal{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*/.close.sc-calcite-modal{-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*/.close.sc-calcite-modal calcite-icon.sc-calcite-modal{pointer-events:none;vertical-align:-2px}/*!@.close:focus*/.close.sc-calcite-modal:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}/*!@.close:hover,  .close:focus,  .close:active*/.close.sc-calcite-modal:hover,.close.sc-calcite-modal:focus,.close.sc-calcite-modal:active{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-text-1)}/*!@.title*/.title.sc-calcite-modal{-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(*), \n*::slotted([slot=header])*/slot[name=header].sc-calcite-modal-s>*,*.sc-calcite-modal-s>[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*/.content.sc-calcite-modal{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*/.content--spaced.sc-calcite-modal{padding:var(--calcite-modal-padding)}/*!@.content--no-footer*/.content--no-footer.sc-calcite-modal{border-end-end-radius:0.25rem;border-end-start-radius:0.25rem}/*!@slot[name=content]::slotted(*),\n*::slotted([slot=content])*/slot[name=content].sc-calcite-modal-s>*,*.sc-calcite-modal-s>[slot=content]{font-size:var(--calcite-modal-content-text, var(--calcite-modal-context-text-internal))}/*!@:host([background-color=grey]) .content*/[background-color=grey].sc-calcite-modal-h .content.sc-calcite-modal{background-color:var(--calcite-ui-background)}/*!@.footer*/.footer.sc-calcite-modal{-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, \n.footer--hide-secondary .secondary*/.footer--hide-back.sc-calcite-modal .back.sc-calcite-modal,.footer--hide-secondary.sc-calcite-modal .secondary.sc-calcite-modal{display:none}/*!@.back*/.back.sc-calcite-modal{display:block;-webkit-margin-end:auto;margin-inline-end:auto}/*!@.secondary*/.secondary.sc-calcite-modal{margin-inline:0.25rem;display:block}/*!@slot[name=primary]*/slot[name=primary].sc-calcite-modal{display:block}/*!@:host([width=small]) .modal*/[width=small].sc-calcite-modal-h .modal.sc-calcite-modal{inline-size:auto}/*!@:host([width=s]) .modal*/[width=s].sc-calcite-modal-h .modal.sc-calcite-modal{max-inline-size:32rem}@media screen and (max-width: 35rem){/*!@:host([width=s]) .modal*/[width=s].sc-calcite-modal-h .modal.sc-calcite-modal{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;border-radius:0px}/*!@:host([width=s]) .content*/[width=s].sc-calcite-modal-h .content.sc-calcite-modal{-ms-flex:1 1 auto;flex:1 1 auto;max-block-size:unset}/*!@:host([width=s][docked])*/[width=s][docked].sc-calcite-modal-h{-ms-flex-align:end;align-items:flex-end}}/*!@:host([width=m]) .modal*/[width=m].sc-calcite-modal-h .modal.sc-calcite-modal{max-inline-size:48rem}@media screen and (max-width: 51rem){/*!@:host([width=m]) .modal*/[width=m].sc-calcite-modal-h .modal.sc-calcite-modal{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;border-radius:0px}/*!@:host([width=m]) .content*/[width=m].sc-calcite-modal-h .content.sc-calcite-modal{-ms-flex:1 1 auto;flex:1 1 auto;max-block-size:unset}/*!@:host([width=m][docked])*/[width=m][docked].sc-calcite-modal-h{-ms-flex-align:end;align-items:flex-end}}/*!@:host([width=l]) .modal*/[width=l].sc-calcite-modal-h .modal.sc-calcite-modal{max-inline-size:94rem}@media screen and (max-width: 97rem){/*!@:host([width=l]) .modal*/[width=l].sc-calcite-modal-h .modal.sc-calcite-modal{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;border-radius:0px}/*!@:host([width=l]) .content*/[width=l].sc-calcite-modal-h .content.sc-calcite-modal{-ms-flex:1 1 auto;flex:1 1 auto;max-block-size:unset}/*!@:host([width=l][docked])*/[width=l][docked].sc-calcite-modal-h{-ms-flex-align:end;align-items:flex-end}}/*!@:host([fullscreen])*/[fullscreen].sc-calcite-modal-h{background-color:transparent}/*!@:host([fullscreen]) .modal*/[fullscreen].sc-calcite-modal-h .modal.sc-calcite-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*/[fullscreen].sc-calcite-modal-h .content.sc-calcite-modal{max-block-size:100%;-ms-flex:1 1 auto;flex:1 1 auto}/*!@:host([open][fullscreen]) .modal*/[open][fullscreen].sc-calcite-modal-h .modal.sc-calcite-modal{-webkit-transform:translate3D(0, 0, 0) scale(1);transform:translate3D(0, 0, 0) scale(1)}/*!@:host([open][fullscreen]) .header*/[open][fullscreen].sc-calcite-modal-h .header.sc-calcite-modal{border-radius:0}/*!@:host([open][fullscreen]) .footer*/[open][fullscreen].sc-calcite-modal-h .footer.sc-calcite-modal{border-radius:0}/*!@:host([docked]) .modal*/[docked].sc-calcite-modal-h .modal.sc-calcite-modal{block-size:auto}/*!@:host([docked]) .content*/[docked].sc-calcite-modal-h .content.sc-calcite-modal{block-size:auto;-ms-flex:1 1 auto;flex:1 1 auto}@media screen and (max-width: 860px){/*!@:host([docked]) .modal*/[docked].sc-calcite-modal-h .modal.sc-calcite-modal{border-radius:var(--calcite-border-radius) var(--calcite-border-radius) 0 0}/*!@:host([docked]) .close*/[docked].sc-calcite-modal-h .close.sc-calcite-modal{border-start-end-radius:var(--calcite-border-radius)}}/*!@:host([color=red]) .modal*/[color=red].sc-calcite-modal-h .modal.sc-calcite-modal{border-color:var(--calcite-ui-danger)}/*!@:host([color=blue]) .modal*/[color=blue].sc-calcite-modal-h .modal.sc-calcite-modal{border-color:var(--calcite-ui-info)}/*!@:host([color=red]) .modal, \n:host([color=blue]) .modal*/[color=red].sc-calcite-modal-h .modal.sc-calcite-modal,[color=blue].sc-calcite-modal-h .modal.sc-calcite-modal{border-width:0px;border-block-start-width:4px;border-style:solid}/*!@:host([color=red]) .header, \n:host([color=blue]) .header*/[color=red].sc-calcite-modal-h .header.sc-calcite-modal,[color=blue].sc-calcite-modal-h .header.sc-calcite-modal{border-radius:0.25rem;border-end-end-radius:0px;border-end-start-radius:0px}@media screen and (max-width: 860px){/*!@slot[name=header]::slotted(*), \n*::slotted([slot=header])*/slot[name=header].sc-calcite-modal-s>*,*.sc-calcite-modal-s>[slot=header]{font-size:var(--calcite-font-size-1)}/*!@.footer*/.footer.sc-calcite-modal{position:-webkit-sticky;position:sticky;inset-block-end:0px}}@media screen and (max-width: 480px){/*!@.footer*/.footer.sc-calcite-modal{-ms-flex-direction:column;flex-direction:column}/*!@.back, \n.secondary*/.back.sc-calcite-modal,.secondary.sc-calcite-modal{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*/.sc-calcite-modal: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*/.calcite-animate.sc-calcite-modal{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*/.calcite-animate__in.sc-calcite-modal{-webkit-animation-name:in;animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-modal{-webkit-animation-name:in-down;animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-modal{-webkit-animation-name:in-up;animation-name:in-up}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-modal{-webkit-animation-name:in-scale;animation-name:in-scale}/*!@:root*/.sc-calcite-modal:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}/*!@:host([hidden])*/[hidden].sc-calcite-modal-h{display:none}/*!@:host*/.sc-calcite-modal-h{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])*/[scale=s].sc-calcite-modal-h{--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])*/[scale=m].sc-calcite-modal-h{--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])*/[scale=l].sc-calcite-modal-h{--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*/.scrim.sc-calcite-modal{--calcite-scrim-background:rgba(0, 0, 0, 0.75);position:fixed;inset:0px;display:-ms-flexbox;display:flex;overflow-y:hidden}/*!@.modal*/.modal.sc-calcite-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*/.modal--opening-idle.sc-calcite-modal{-webkit-transform:var(--calcite-modal-hidden-position);transform:var(--calcite-modal-hidden-position)}/*!@.modal--opening-active*/.modal--opening-active.sc-calcite-modal{-webkit-transform:var(--calcite-modal-shown-position);transform:var(--calcite-modal-shown-position)}/*!@.modal--closing-idle*/.modal--closing-idle.sc-calcite-modal{-webkit-transform:var(--calcite-modal-shown-position);transform:var(--calcite-modal-shown-position)}/*!@.modal--closing-active*/.modal--closing-active.sc-calcite-modal{-webkit-transform:var(--calcite-modal-hidden-position);transform:var(--calcite-modal-hidden-position)}/*!@:host([open])*/[open].sc-calcite-modal-h{opacity:1;visibility:visible !important;-webkit-transition-delay:0ms;transition-delay:0ms}/*!@:host([open]) .modal*/[open].sc-calcite-modal-h .modal.sc-calcite-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*/.header.sc-calcite-modal{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*/.close.sc-calcite-modal{-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*/.close.sc-calcite-modal calcite-icon.sc-calcite-modal{pointer-events:none;vertical-align:-2px}/*!@.close:focus*/.close.sc-calcite-modal:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}/*!@.close:hover,  .close:focus,  .close:active*/.close.sc-calcite-modal:hover,.close.sc-calcite-modal:focus,.close.sc-calcite-modal:active{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-text-1)}/*!@.title*/.title.sc-calcite-modal{-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(*), \n*::slotted([slot=header])*/slot[name=header].sc-calcite-modal-s>*,*.sc-calcite-modal-s>[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*/.content.sc-calcite-modal{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*/.content--spaced.sc-calcite-modal{padding:var(--calcite-modal-padding)}/*!@.content--no-footer*/.content--no-footer.sc-calcite-modal{border-end-end-radius:0.25rem;border-end-start-radius:0.25rem}/*!@slot[name=content]::slotted(*),\n*::slotted([slot=content])*/slot[name=content].sc-calcite-modal-s>*,*.sc-calcite-modal-s>[slot=content]{font-size:var(--calcite-modal-content-text, var(--calcite-modal-context-text-internal))}/*!@:host([background-color=grey]) .content*/[background-color=grey].sc-calcite-modal-h .content.sc-calcite-modal{background-color:var(--calcite-ui-background)}/*!@.footer*/.footer.sc-calcite-modal{-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, \n.footer--hide-secondary .secondary*/.footer--hide-back.sc-calcite-modal .back.sc-calcite-modal,.footer--hide-secondary.sc-calcite-modal .secondary.sc-calcite-modal{display:none}/*!@.back*/.back.sc-calcite-modal{display:block;-webkit-margin-end:auto;margin-inline-end:auto}/*!@.secondary*/.secondary.sc-calcite-modal{margin-inline:0.25rem;display:block}/*!@slot[name=primary]*/slot[name=primary].sc-calcite-modal{display:block}/*!@:host([width=small]) .modal*/[width=small].sc-calcite-modal-h .modal.sc-calcite-modal{inline-size:auto}/*!@:host([width=s]) .modal*/[width=s].sc-calcite-modal-h .modal.sc-calcite-modal{max-inline-size:32rem}@media screen and (max-width: 35rem){/*!@:host([width=s]) .modal*/[width=s].sc-calcite-modal-h .modal.sc-calcite-modal{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;border-radius:0px}/*!@:host([width=s]) .content*/[width=s].sc-calcite-modal-h .content.sc-calcite-modal{-ms-flex:1 1 auto;flex:1 1 auto;max-block-size:unset}/*!@:host([width=s][docked])*/[width=s][docked].sc-calcite-modal-h{-ms-flex-align:end;align-items:flex-end}}/*!@:host([width=m]) .modal*/[width=m].sc-calcite-modal-h .modal.sc-calcite-modal{max-inline-size:48rem}@media screen and (max-width: 51rem){/*!@:host([width=m]) .modal*/[width=m].sc-calcite-modal-h .modal.sc-calcite-modal{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;border-radius:0px}/*!@:host([width=m]) .content*/[width=m].sc-calcite-modal-h .content.sc-calcite-modal{-ms-flex:1 1 auto;flex:1 1 auto;max-block-size:unset}/*!@:host([width=m][docked])*/[width=m][docked].sc-calcite-modal-h{-ms-flex-align:end;align-items:flex-end}}/*!@:host([width=l]) .modal*/[width=l].sc-calcite-modal-h .modal.sc-calcite-modal{max-inline-size:94rem}@media screen and (max-width: 97rem){/*!@:host([width=l]) .modal*/[width=l].sc-calcite-modal-h .modal.sc-calcite-modal{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;border-radius:0px}/*!@:host([width=l]) .content*/[width=l].sc-calcite-modal-h .content.sc-calcite-modal{-ms-flex:1 1 auto;flex:1 1 auto;max-block-size:unset}/*!@:host([width=l][docked])*/[width=l][docked].sc-calcite-modal-h{-ms-flex-align:end;align-items:flex-end}}/*!@:host([fullscreen])*/[fullscreen].sc-calcite-modal-h{background-color:transparent}/*!@:host([fullscreen]) .modal*/[fullscreen].sc-calcite-modal-h .modal.sc-calcite-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*/[fullscreen].sc-calcite-modal-h .content.sc-calcite-modal{max-block-size:100%;-ms-flex:1 1 auto;flex:1 1 auto}/*!@:host([open][fullscreen]) .header*/[open][fullscreen].sc-calcite-modal-h .header.sc-calcite-modal{border-radius:0}/*!@:host([open][fullscreen]) .footer*/[open][fullscreen].sc-calcite-modal-h .footer.sc-calcite-modal{border-radius:0}/*!@:host([docked]) .modal*/[docked].sc-calcite-modal-h .modal.sc-calcite-modal{block-size:auto}/*!@:host([docked]) .content*/[docked].sc-calcite-modal-h .content.sc-calcite-modal{block-size:auto;-ms-flex:1 1 auto;flex:1 1 auto}@media screen and (max-width: 860px){/*!@:host([docked]) .modal*/[docked].sc-calcite-modal-h .modal.sc-calcite-modal{border-radius:var(--calcite-border-radius) var(--calcite-border-radius) 0 0}/*!@:host([docked]) .close*/[docked].sc-calcite-modal-h .close.sc-calcite-modal{border-start-end-radius:var(--calcite-border-radius)}}/*!@:host([color=red]) .modal*/[color=red].sc-calcite-modal-h .modal.sc-calcite-modal{border-color:var(--calcite-ui-danger)}/*!@:host([color=blue]) .modal*/[color=blue].sc-calcite-modal-h .modal.sc-calcite-modal{border-color:var(--calcite-ui-info)}/*!@:host([color=red]) .modal, \n:host([color=blue]) .modal*/[color=red].sc-calcite-modal-h .modal.sc-calcite-modal,[color=blue].sc-calcite-modal-h .modal.sc-calcite-modal{border-width:0px;border-block-start-width:4px;border-style:solid}/*!@:host([color=red]) .header, \n:host([color=blue]) .header*/[color=red].sc-calcite-modal-h .header.sc-calcite-modal,[color=blue].sc-calcite-modal-h .header.sc-calcite-modal{border-radius:0.25rem;border-end-end-radius:0px;border-end-start-radius:0px}@media screen and (max-width: 860px){/*!@slot[name=header]::slotted(*), \n*::slotted([slot=header])*/slot[name=header].sc-calcite-modal-s>*,*.sc-calcite-modal-s>[slot=header]{font-size:var(--calcite-font-size-1)}/*!@.footer*/.footer.sc-calcite-modal{position:-webkit-sticky;position:sticky;inset-block-end:0px}}@media screen and (max-width: 480px){/*!@.footer*/.footer.sc-calcite-modal{-ms-flex-direction:column;flex-direction:column}/*!@.back, \n.secondary*/.back.sc-calcite-modal,.secondary.sc-calcite-modal{margin:0px;-webkit-margin-after:0.25rem;margin-block-end:0.25rem}}";
 const isFocusableExtended = (el) => {
   return isCalciteFocusable(el) || isFocusable(el);
@@ -22921,10 +22937,10 @@ const getFocusableElements = (el) => {
 class Modal {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    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
@@ -22967,25 +22983,15 @@ class Modal {
     //--------------------------------------------------------------------------
     this.hasFooter = true;
     this.mutationObserver = createObserver();
-    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();
@@ -23037,6 +23043,7 @@ class Modal {
     (_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;
     }
@@ -23045,14 +23052,14 @@ class Modal {
     }
   }
   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 (hAsync(Host, { "aria-describedby": this.contentId, "aria-labelledby": this.titleId, "aria-modal": "true", role: "dialog" }, hAsync("calcite-scrim", { class: CSS$n.scrim, onClick: this.handleOutsideClose }), this.renderStyle(), hAsync("div", { class: "modal", onTransitionEnd: this.transitionEnd, ref: this.setContainerEl }, hAsync("div", { "data-focus-fence": true, onFocus: this.focusLastElement, tabindex: "0" }), hAsync("div", { class: CSS$n.header }, this.renderCloseButton(), hAsync("header", { class: CSS$n.title }, hAsync("slot", { name: CSS$n.header }))), hAsync("div", { class: {
+    return (hAsync(Host, { "aria-describedby": this.contentId, "aria-labelledby": this.titleId, "aria-modal": "true", role: "dialog" }, hAsync("calcite-scrim", { class: CSS$n.scrim, onClick: this.handleOutsideClose }), this.renderStyle(), hAsync("div", { class: CSS$n.modal, ref: this.setTransitionEl }, hAsync("div", { "data-focus-fence": true, onFocus: this.focusLastElement, tabindex: "0" }), hAsync("div", { class: CSS$n.header }, this.renderCloseButton(), hAsync("header", { class: CSS$n.title }, hAsync("slot", { name: CSS$n.header }))), hAsync("div", { class: {
         content: true,
         "content--spaced": !this.noPadding,
         "content--no-footer": !this.hasFooter
@@ -23067,11 +23074,11 @@ class Modal {
   renderStyle() {
     const hasCustomWidth = !isNaN(parseInt(`${this.width}`));
     return hasCustomWidth ? (hAsync("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;
@@ -23143,29 +23150,34 @@ class Modal {
     }
   }
   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 */
@@ -23251,8 +23263,8 @@ const noticeCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes
 class Notice {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    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
@@ -23396,7 +23408,7 @@ const optionCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes
 class Option {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.calciteInternalOptionChange = createEvent(this, "calciteInternalOptionChange", 7);
+    this.calciteInternalOptionChange = createEvent(this, "calciteInternalOptionChange", 6);
     //--------------------------------------------------------------------------
     //
     //  Properties
@@ -23488,7 +23500,7 @@ const optionGroupCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyf
 class OptionGroup {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.calciteInternalOptionGroupChange = createEvent(this, "calciteInternalOptionGroupChange", 7);
+    this.calciteInternalOptionGroupChange = createEvent(this, "calciteInternalOptionGroupChange", 6);
     //--------------------------------------------------------------------------
     //
     //  Properties
@@ -23609,8 +23621,8 @@ const maxPagesDisplayed = 5;
 class Pagination {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    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
@@ -23853,10 +23865,10 @@ const panelCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes
 class Panel {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    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
@@ -24480,7 +24492,7 @@ const pickListCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyfram
 class PickList {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.calciteListChange = createEvent(this, "calciteListChange", 7);
+    this.calciteListChange = createEvent(this, "calciteListChange", 6);
     // --------------------------------------------------------------------------
     //
     //  Properties
@@ -24715,10 +24727,10 @@ const pickListItemCss = "@charset \"UTF-8\";@-webkit-keyframes in{0%{opacity:0}1
 class PickListItem {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    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.
      */
@@ -24994,10 +25006,10 @@ const manager$1 = new PopoverManager$1();
 class Popover {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    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
@@ -25062,16 +25074,16 @@ class Popover {
      */
     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
@@ -25128,16 +25140,6 @@ class Popover {
     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();
@@ -25180,6 +25182,7 @@ class Popover {
   connectedCallback() {
     connectFloatingUI(this, this.effectiveReferenceElement, this.el);
     this.setFilteredPlacements();
+    connectOpenCloseComponent(this);
     if (this.dismissible) {
       this.handleDismissible(this.dismissible);
     }
@@ -25194,10 +25197,9 @@ class Popover {
     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);
   }
   // --------------------------------------------------------------------------
   //
@@ -25283,7 +25285,7 @@ class Popover {
     return (hAsync(Host, { "aria-hidden": toAriaBoolean(hidden), "aria-label": label, "aria-live": "polite", "calcite-hydrated-hidden": hidden, id: this.getId(), role: "dialog" }, hAsync("div", { class: {
         [FloatingCSS.animation]: true,
         [FloatingCSS.animationActive]: displayed
-      }, onTransitionEnd: this.transitionEnd, ref: this.setContainerEl }, arrowNode, hAsync("div", { class: {
+      }, ref: this.setTransitionEl }, arrowNode, hAsync("div", { class: {
         [CSS$g.hasHeader]: !!heading,
         [CSS$g.container]: true
       } }, this.renderHeader(), hAsync("div", { class: CSS$g.content }, hAsync("slot", null)), !heading ? this.renderCloseButton() : null))));
@@ -25460,10 +25462,10 @@ const radioButtonCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyf
 class RadioButton {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    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
@@ -25738,7 +25740,7 @@ const radioButtonGroupCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}
 class RadioButtonGroup {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.calciteRadioButtonGroupChange = createEvent(this, "calciteRadioButtonGroupChange", 7);
+    this.calciteRadioButtonGroupChange = createEvent(this, "calciteRadioButtonGroupChange", 6);
     //--------------------------------------------------------------------------
     //
     //  Properties
@@ -25853,7 +25855,7 @@ const radioGroupCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyfr
 class RadioGroup {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.calciteRadioGroupChange = createEvent(this, "calciteRadioGroupChange", 7);
+    this.calciteRadioGroupChange = createEvent(this, "calciteRadioGroupChange", 6);
     //--------------------------------------------------------------------------
     //
     //  Properties
@@ -26072,7 +26074,7 @@ const radioGroupItemCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@k
 class RadioGroupItem {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.calciteInternalRadioGroupItemChange = createEvent(this, "calciteInternalRadioGroupItemChange", 7);
+    this.calciteInternalRadioGroupItemChange = createEvent(this, "calciteInternalRadioGroupItemChange", 6);
     //--------------------------------------------------------------------------
     //
     //  Properties
@@ -26133,7 +26135,7 @@ const ratingCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes
 class Rating {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.calciteRatingChange = createEvent(this, "calciteRatingChange", 7);
+    this.calciteRatingChange = createEvent(this, "calciteRatingChange", 6);
     // --------------------------------------------------------------------------
     //
     //  Properties
@@ -26363,7 +26365,7 @@ function isOptionGroup(optionOrGroup) {
 class Select {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.calciteSelectChange = createEvent(this, "calciteSelectChange", 7);
+    this.calciteSelectChange = createEvent(this, "calciteSelectChange", 6);
     //--------------------------------------------------------------------------
     //
     //  Properties
@@ -26784,7 +26786,7 @@ const shellPanelCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyfr
 class ShellPanel {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.calciteShellPanelToggle = createEvent(this, "calciteShellPanelToggle", 7);
+    this.calciteShellPanelToggle = createEvent(this, "calciteShellPanelToggle", 6);
     // --------------------------------------------------------------------------
     //
     //  Properties
@@ -27022,9 +27024,9 @@ function isRange(value) {
 class Slider {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    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
@@ -30848,7 +30850,7 @@ const sortableListCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@key
 class SortableList {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.calciteListOrderChange = createEvent(this, "calciteListOrderChange", 7);
+    this.calciteListOrderChange = createEvent(this, "calciteListOrderChange", 6);
     /**
      * The selector for the handle elements.
      */
@@ -31024,8 +31026,8 @@ const splitButtonCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyf
 class SplitButton {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    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 */
@@ -31123,7 +31125,7 @@ class SplitButton {
   }; }
 }
-const stepperCss = "@-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*/.sc-calcite-stepper: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*/.calcite-animate.sc-calcite-stepper{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*/.calcite-animate__in.sc-calcite-stepper{-webkit-animation-name:in;animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-stepper{-webkit-animation-name:in-down;animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-stepper{-webkit-animation-name:in-up;animation-name:in-up}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-stepper{-webkit-animation-name:in-scale;animation-name:in-scale}/*!@:root*/.sc-calcite-stepper:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}/*!@:host([hidden])*/[hidden].sc-calcite-stepper-h{display:none}/*!@:host*/.sc-calcite-stepper-h{position:relative;display:-ms-flexbox;display:flex;inline-size:100%;min-inline-size:100%;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:justify;justify-content:space-between}/*!@:host([layout=vertical])*/[layout=vertical].sc-calcite-stepper-h{-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-direction:column;flex-direction:column}/*!@:host([layout=horizontal])*/[layout=horizontal].sc-calcite-stepper-h{display:grid;grid-template-areas:\"items\" \"content\"}";
+const stepperCss = "@-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*/.sc-calcite-stepper: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*/.calcite-animate.sc-calcite-stepper{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*/.calcite-animate__in.sc-calcite-stepper{-webkit-animation-name:in;animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-stepper{-webkit-animation-name:in-down;animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-stepper{-webkit-animation-name:in-up;animation-name:in-up}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-stepper{-webkit-animation-name:in-scale;animation-name:in-scale}/*!@:root*/.sc-calcite-stepper:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}/*!@:host([hidden])*/[hidden].sc-calcite-stepper-h{display:none}/*!@:host*/.sc-calcite-stepper-h{position:relative;display:-ms-flexbox;display:flex;inline-size:100%;min-inline-size:-moz-fit-content;min-inline-size:-webkit-fit-content;min-inline-size:fit-content;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:justify;justify-content:space-between}/*!@:host([layout=vertical])*/[layout=vertical].sc-calcite-stepper-h{-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-direction:column;flex-direction:column}/*!@:host([layout=horizontal])*/[layout=horizontal].sc-calcite-stepper-h{display:grid;grid-template-areas:\"items\" \"content\"}";
 /**
  * @slot - A slot for adding `calcite-stepper-item`s.
@@ -31131,8 +31133,8 @@ const stepperCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframe
 class Stepper {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    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
@@ -31369,10 +31371,10 @@ const stepperItemCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyf
 class StepperItem {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    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
@@ -31554,7 +31556,7 @@ const switchCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes
 class Switch {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.calciteSwitchChange = createEvent(this, "calciteSwitchChange", 7);
+    this.calciteSwitchChange = createEvent(this, "calciteSwitchChange", 6);
     //--------------------------------------------------------------------------
     //
     //  Properties
@@ -31676,7 +31678,7 @@ const tabCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in
 class Tab {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.calciteInternalTabRegister = createEvent(this, "calciteInternalTabRegister", 7);
+    this.calciteInternalTabRegister = createEvent(this, "calciteInternalTabRegister", 6);
     /**
      * Show this tab
      */
@@ -31789,8 +31791,8 @@ const tabNavCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes
 class TabNav {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    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
      */
@@ -32008,11 +32010,11 @@ const tabTitleCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyfram
 class TabTitle {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    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
@@ -32512,7 +32514,7 @@ const tileSelectCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyfr
 class TileSelect {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.calciteTileSelectChange = createEvent(this, "calciteTileSelectChange", 7);
+    this.calciteTileSelectChange = createEvent(this, "calciteTileSelectChange", 6);
     //--------------------------------------------------------------------------
     //
     //  Properties
@@ -32804,9 +32806,9 @@ function capitalize(str) {
 class TimePicker {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    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
@@ -33503,7 +33505,7 @@ const tipCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in
 class Tip {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.calciteTipDismiss = createEvent(this, "calciteTipDismiss", 7);
+    this.calciteTipDismiss = createEvent(this, "calciteTipDismiss", 6);
     // --------------------------------------------------------------------------
     //
     //  Properties
@@ -33625,8 +33627,8 @@ const tipManagerCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyfr
 class TipManager {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    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
@@ -34211,7 +34213,7 @@ const treeCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes i
 class Tree {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.calciteTreeSelect = createEvent(this, "calciteTreeSelect", 7);
+    this.calciteTreeSelect = createEvent(this, "calciteTreeSelect", 6);
     //--------------------------------------------------------------------------
     //
     //  Properties
@@ -34494,7 +34496,7 @@ const treeItemCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyfram
 class TreeItem {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.calciteInternalTreeItemSelect = createEvent(this, "calciteInternalTreeItemSelect", 7);
+    this.calciteInternalTreeItemSelect = createEvent(this, "calciteInternalTreeItemSelect", 6);
     //--------------------------------------------------------------------------
     //
     //  Properties
@@ -34775,8 +34777,8 @@ const valueListCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyfra
 class ValueList {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    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