@esri/calcite-components 1.0.0-next.532 → 1.0.0-next.535

package/dist/esm/calcite-card.entry.js

@@ -1,13 +1,13 @@
 /*!
  * 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.532
+ * v1.0.0-next.535
  */
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-67812472.js';
-import { t as toAriaBoolean, g as getSlotted } from './dom-0cd3f6fc.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-419d3c9c.js';
-import './guid-601c13f1.js';
-import './observers-db6d1b56.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-75818348.js';
+import { t as toAriaBoolean, g as getSlotted } from './dom-50ba18b2.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-87def871.js';
+import './guid-165ed9d8.js';
+import './observers-d615e091.js';
 
 const CSS = {
   container: "container",

package/dist/esm/calcite-checkbox.entry.js

@@ -1,14 +1,14 @@
 /*!
  * 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.532
+ * v1.0.0-next.535
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-67812472.js';
-import { g as guid } from './guid-601c13f1.js';
-import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form-145e7101.js';
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-2db28cd1.js';
-import { u as updateHostInteraction } from './interactive-c1838314.js';
-import { t as toAriaBoolean } from './dom-0cd3f6fc.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-75818348.js';
+import { g as guid } from './guid-165ed9d8.js';
+import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form-e4b7aedd.js';
+import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-e48ce2a2.js';
+import { u as updateHostInteraction } from './interactive-027ad8d9.js';
+import { t as toAriaBoolean } from './dom-50ba18b2.js';
 
 const checkboxCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host([scale=s]){--calcite-checkbox-size:0.75rem}:host([scale=m]){--calcite-checkbox-size:var(--calcite-font-size--1)}:host([scale=l]){--calcite-checkbox-size:1rem}:host{position:relative;display:-ms-inline-flexbox;display:inline-flex;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host .check-svg,:host .toggle{inline-size:var(--calcite-checkbox-size);block-size:var(--calcite-checkbox-size)}:host .check-svg{pointer-events:none;-webkit-box-sizing:border-box;box-sizing:border-box;display:block;overflow:hidden;background-color:var(--calcite-ui-foreground-1);fill:currentColor;stroke:currentColor;stroke-width:1;-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;-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-border-input);box-shadow:inset 0 0 0 1px var(--calcite-ui-border-input);color:var(--calcite-ui-background)}:host([checked]) .check-svg,:host([indeterminate]) .check-svg{background-color:var(--calcite-ui-brand);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-brand);box-shadow:inset 0 0 0 1px var(--calcite-ui-brand)}:host([hovered]) .toggle .check-svg,:host .toggle:hover .check-svg{-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-brand);box-shadow:inset 0 0 0 2px var(--calcite-ui-brand)}.toggle{outline-color:transparent}.toggle:active,.toggle:focus,.toggle:focus-visible{outline:2px solid var(--calcite-ui-brand);outline-offset:2px}:host([disabled]){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([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;-webkit-transform:none !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}";
 

package/dist/esm/calcite-chip.entry.js

@@ -1,13 +1,13 @@
 /*!
  * 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.532
+ * v1.0.0-next.535
  */
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-67812472.js';
-import { g as getSlotted } from './dom-0cd3f6fc.js';
-import { g as guid } from './guid-601c13f1.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-419d3c9c.js';
-import './observers-db6d1b56.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-75818348.js';
+import { g as getSlotted } from './dom-50ba18b2.js';
+import { g as guid } from './guid-165ed9d8.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-87def871.js';
+import './observers-d615e091.js';
 
 const CSS = {
   title: "title",

package/dist/esm/calcite-color-picker_3.entry.js

@@ -1,15 +1,15 @@
 /*!
  * 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.532
+ * v1.0.0-next.535
  */
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-67812472.js';
-import { a as getElementDir, f as focusElement, b as getThemeName } from './dom-0cd3f6fc.js';
-import { n as normalizeHex, C as CSSColorMode, p as parseMode, c as colorEqual, i as isValidHex, a as isLonghandHex, r as rgbToHex, b as hexChar } from './utils-aba2aa4f.js';
-import { c as clamp } from './math-a662e675.js';
-import { u as updateHostInteraction } from './interactive-c1838314.js';
-import { d as debounce, i as isObject } from './debounce-0e2bb1be.js';
-import './guid-601c13f1.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-75818348.js';
+import { a as getElementDir, f as focusElement, b as getThemeName } from './dom-50ba18b2.js';
+import { n as normalizeHex, C as CSSColorMode, p as parseMode, c as colorEqual, i as isValidHex, a as isLonghandHex, r as rgbToHex, b as hexChar } from './utils-25a4bf72.js';
+import { c as clamp } from './math-404e5b2c.js';
+import { u as updateHostInteraction } from './interactive-027ad8d9.js';
+import { d as debounce, i as isObject } from './debounce-96842e57.js';
+import './guid-165ed9d8.js';
 
 /** Error message constants. */
 var FUNC_ERROR_TEXT = 'Expected a function';

package/dist/esm/calcite-combobox_3.entry.js

@@ -1,19 +1,19 @@
 /*!
  * 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.532
+ * v1.0.0-next.535
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-67812472.js';
-import { a as isSymbol, S as Symbol, d as debounce } from './debounce-0e2bb1be.js';
-import { i as isArray, f as forIn } from './forIn-a4b7fb5a.js';
-import { f as filterComputedPlacements, u as updatePopper, c as createPopper, d as defaultMenuPlacement, p as popperMenuComputedPlacements, C as CSS$2 } from './popper-b3ff297f.js';
-import { g as guid } from './guid-601c13f1.js';
-import { n as nodeListToArray, t as toAriaBoolean, d as getElementProp, g as getSlotted } from './dom-0cd3f6fc.js';
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-2db28cd1.js';
-import { s as submitForm, c as connectForm, a as afterConnectDefaultValueSet, d as disconnectForm, H as HiddenFormInputSlot } from './form-145e7101.js';
-import { c as createObserver } from './observers-db6d1b56.js';
-import { u as updateHostInteraction } from './interactive-c1838314.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-419d3c9c.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-75818348.js';
+import { a as isSymbol, S as Symbol, d as debounce } from './debounce-96842e57.js';
+import { i as isArray, f as forIn } from './forIn-1042ec83.js';
+import { f as filterComputedPlacements, u as updatePopper, c as createPopper, d as defaultMenuPlacement, p as popperMenuComputedPlacements, C as CSS$2 } from './popper-1fa91e9f.js';
+import { g as guid } from './guid-165ed9d8.js';
+import { n as nodeListToArray, t as toAriaBoolean, d as getElementProp, g as getSlotted } from './dom-50ba18b2.js';
+import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-e48ce2a2.js';
+import { s as submitForm, c as connectForm, a as afterConnectDefaultValueSet, d as disconnectForm, H as HiddenFormInputSlot } from './form-e4b7aedd.js';
+import { c as createObserver } from './observers-d615e091.js';
+import { u as updateHostInteraction } from './interactive-027ad8d9.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-87def871.js';
 
 /**
  * A specialized version of `_.map` for arrays without support for iteratee
@@ -385,16 +385,12 @@ const Combobox = class {
       this.el.removeEventListener("calciteComboboxOpen", this.toggleOpenEnd);
     };
     this.transitionEnd = (event) => {
-      if (event.propertyName === this.activeTransitionProp) {
+      if (event.propertyName === this.activeTransitionProp && event.target === this.listContainerEl) {
         this.open || this.active ? this.onOpen() : this.onClose();
       }
     };
-    /* *
-    - `transitionrun` fires when the transition is created at the start of any delay and is not cancellable once started.
-    - if there is no transition delay, both `transitionrun` and `transitionstart` are fired at the same time.
-    */
-    this.transitionRunHandler = (event) => {
-      if (event.propertyName === this.activeTransitionProp) {
+    this.transitionStartHandler = (event) => {
+      if (event.propertyName === this.activeTransitionProp && event.target === this.listContainerEl) {
         this.open || this.active ? this.onBeforeOpen() : this.onBeforeClose();
       }
     };
@@ -453,7 +449,7 @@ const Combobox = class {
     this.setListContainerEl = (el) => {
       this.resizeObserver.observe(el);
       this.listContainerEl = el;
-      this.listContainerEl.addEventListener("transitionrun", this.transitionRunHandler);
+      this.listContainerEl.addEventListener("transitionstart", this.transitionStartHandler);
     };
     this.setReferenceEl = (el) => {
       this.referenceEl = el;
@@ -641,15 +637,13 @@ const Combobox = class {
     updateHostInteraction(this);
   }
   disconnectedCallback() {
-    var _a, _b;
+    var _a, _b, _c;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
     this.destroyPopper();
     disconnectLabel(this);
     disconnectForm(this);
-    if (this.listContainerEl) {
-      this.listContainerEl.removeEventListener("transitionrun", this.transitionRunHandler);
-    }
+    (_c = this.listContainerEl) === null || _c === void 0 ? void 0 : _c.removeEventListener("transitionstart", this.transitionStartHandler);
   }
   selectedItemsHandler() {
     this.internalValueChangeFlag = true;

package/dist/esm/calcite-date-picker_4.entry.js

@@ -1,16 +1,16 @@
 /*!
  * 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.532
+ * v1.0.0-next.535
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, F as Fragment } from './index-67812472.js';
-import { T as TEXT, c as getDaysDiff, d as dateToISO, a as dateFromISO, b as dateFromRange, g as getLocaleData, H as HEADING_LEVEL, s as sameDate, i as inRange, e as getOrder, n as nextMonth, f as prevMonth, l as localizeNumber, h as parseNumber } from './resources-000bc05a.js';
-import { a as getElementDir, C as CSS_UTILITY } from './dom-0cd3f6fc.js';
-import { u as updateHostInteraction } from './interactive-c1838314.js';
-import { H as Heading } from './Heading-342b298a.js';
-import './locale-fda97619.js';
-import './key-6f99bc9e.js';
-import './guid-601c13f1.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, F as Fragment } from './index-75818348.js';
+import { T as TEXT, c as getDaysDiff, d as dateToISO, a as dateFromISO, b as dateFromRange, g as getLocaleData, H as HEADING_LEVEL, s as sameDate, i as inRange, e as getOrder, n as nextMonth, f as prevMonth, l as localizeNumber, h as parseNumber } from './resources-6e0684b7.js';
+import { a as getElementDir, C as CSS_UTILITY } from './dom-50ba18b2.js';
+import { u as updateHostInteraction } from './interactive-027ad8d9.js';
+import { H as Heading } from './Heading-a349bd74.js';
+import './locale-22768adb.js';
+import './key-7d364914.js';
+import './guid-165ed9d8.js';
 
 const datePickerCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{position:relative;display:inline-block;inline-size:100%;overflow:visible;border-radius:0px;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-2);background-color:var(--calcite-ui-foreground-1);vertical-align:top}:host([scale=s]){max-inline-size:216px}:host([scale=m]){max-inline-size:286px}:host([scale=l]){max-inline-size:398px}";
 

package/dist/esm/calcite-dropdown_3.entry.js

@@ -1,14 +1,14 @@
 /*!
  * 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.532
+ * v1.0.0-next.535
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-67812472.js';
-import { t as toAriaBoolean, f as focusElement, d as getElementProp } from './dom-0cd3f6fc.js';
-import { d as defaultMenuPlacement, f as filterComputedPlacements, C as CSS$2, u as updatePopper, c as createPopper, p as popperMenuComputedPlacements } from './popper-b3ff297f.js';
-import { c as createObserver } from './observers-db6d1b56.js';
-import { u as updateHostInteraction } from './interactive-c1838314.js';
-import './guid-601c13f1.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-75818348.js';
+import { t as toAriaBoolean, f as focusElement, d as getElementProp } from './dom-50ba18b2.js';
+import { d as defaultMenuPlacement, f as filterComputedPlacements, C as CSS$2, u as updatePopper, c as createPopper, p as popperMenuComputedPlacements } from './popper-1fa91e9f.js';
+import { c as createObserver } from './observers-d615e091.js';
+import { u as updateHostInteraction } from './interactive-027ad8d9.js';
+import './guid-165ed9d8.js';
 
 const SLOTS = {
   dropdownTrigger: "dropdown-trigger"
@@ -20,10 +20,10 @@ const Dropdown = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.calciteDropdownSelect = createEvent(this, "calciteDropdownSelect", 7);
-    this.calciteDropdownBeforeOpen = createEvent(this, "calciteDropdownBeforeOpen", 7);
-    this.calciteDropdownOpen = createEvent(this, "calciteDropdownOpen", 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);
     //--------------------------------------------------------------------------
     //
     //  Public Properties
@@ -136,18 +136,16 @@ const Dropdown = class {
     this.setScrollerEl = (scrollerEl) => {
       this.resizeObserver.observe(scrollerEl);
       this.scrollerEl = scrollerEl;
-      this.scrollerEl.addEventListener("transitionrun", this.transitionRunHandler);
+      this.scrollerEl.addEventListener("transitionstart", this.transitionStartHandler);
     };
     this.transitionEnd = (event) => {
-      if (event.propertyName === this.activeTransitionProp) {
-        this.open || this.active ? this.emitOpenCloseEvent("open") : this.emitOpenCloseEvent("close");
+      if (event.propertyName === this.activeTransitionProp && event.target === this.scrollerEl) {
+        this.open || this.active ? this.onOpen() : this.onClose();
       }
     };
-    this.transitionRunHandler = (event) => {
-      if (event.propertyName === this.activeTransitionProp) {
-        this.active || this.open
-          ? this.emitOpenCloseEvent("beforeOpen")
-          : this.emitOpenCloseEvent("beforeClose");
+    this.transitionStartHandler = (event) => {
+      if (event.propertyName === this.activeTransitionProp && event.target === this.scrollerEl) {
+        this.open || this.active ? this.onBeforeOpen() : this.onBeforeClose();
       }
     };
     this.setReferenceEl = (el) => {
@@ -233,13 +231,11 @@ const Dropdown = class {
     updateHostInteraction(this);
   }
   disconnectedCallback() {
-    var _a, _b;
+    var _a, _b, _c;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
     this.destroyPopper();
-    if (this.scrollerEl) {
-      this.scrollerEl.removeEventListener("transitionrun", this.transitionRunHandler);
-    }
+    (_c = this.scrollerEl) === null || _c === void 0 ? void 0 : _c.removeEventListener("transitionstart", this.transitionStartHandler);
   }
   render() {
     const { active, open } = this;
@@ -342,18 +338,17 @@ const Dropdown = class {
     }
     event.stopPropagation();
   }
-  emitOpenCloseEvent(componentVisibilityState) {
-    const payload = {
-      el: this.el
-    };
-    const emitComponentState = {
-      beforeOpen: () => this.calciteDropdownBeforeOpen.emit(payload),
-      open: () => this.calciteDropdownOpen.emit(payload),
-      beforeClose: () => this.calciteDropdownBeforeClose.emit(payload),
-      close: () => this.calciteDropdownClose.emit(payload)
-    };
-    (emitComponentState[componentVisibilityState] ||
-      emitComponentState["The component state is unknown."])();
+  onBeforeOpen() {
+    this.calciteDropdownBeforeOpen.emit();
+  }
+  onOpen() {
+    this.calciteDropdownOpen.emit();
+  }
+  onBeforeClose() {
+    this.calciteDropdownBeforeClose.emit();
+  }
+  onClose() {
+    this.calciteDropdownClose.emit();
   }
   getModifiers() {
     const flipModifier = {

package/dist/esm/calcite-fab.entry.js

@@ -1,12 +1,12 @@
 /*!
  * 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.532
+ * v1.0.0-next.535
  */
-import { r as registerInstance, h, g as getElement } from './index-67812472.js';
-import { f as focusElement } from './dom-0cd3f6fc.js';
-import { u as updateHostInteraction } from './interactive-c1838314.js';
-import './guid-601c13f1.js';
+import { r as registerInstance, h, g as getElement } from './index-75818348.js';
+import { f as focusElement } from './dom-50ba18b2.js';
+import { u as updateHostInteraction } from './interactive-027ad8d9.js';
+import './guid-165ed9d8.js';
 
 const CSS = {
   button: "button"

package/dist/esm/calcite-filter.entry.js

@@ -1,14 +1,14 @@
 /*!
  * 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.532
+ * v1.0.0-next.535
  */
-import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-67812472.js';
-import { f as focusElement } from './dom-0cd3f6fc.js';
-import { u as updateHostInteraction } from './interactive-c1838314.js';
-import { d as debounce } from './debounce-0e2bb1be.js';
-import { f as forIn } from './forIn-a4b7fb5a.js';
-import './guid-601c13f1.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-75818348.js';
+import { f as focusElement } from './dom-50ba18b2.js';
+import { u as updateHostInteraction } from './interactive-027ad8d9.js';
+import { d as debounce } from './debounce-96842e57.js';
+import { f as forIn } from './forIn-1042ec83.js';
+import './guid-165ed9d8.js';
 
 const CSS = {
   container: "container",

package/dist/esm/calcite-flow.entry.js

@@ -1,10 +1,10 @@
 /*!
  * 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.532
+ * v1.0.0-next.535
  */
-import { r as registerInstance, h, g as getElement } from './index-67812472.js';
-import { c as createObserver } from './observers-db6d1b56.js';
+import { r as registerInstance, h, g as getElement } from './index-75818348.js';
+import { c as createObserver } from './observers-d615e091.js';
 
 const CSS = {
   frame: "frame",

package/dist/esm/calcite-graph_2.entry.js

@@ -1,16 +1,16 @@
 /*!
  * 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.532
+ * v1.0.0-next.535
  */
-import { r as registerInstance, f as forceUpdate, h, g as getElement, c as createEvent, H as Host } from './index-67812472.js';
-import { g as guid } from './guid-601c13f1.js';
-import { c as createObserver } from './observers-db6d1b56.js';
-import { h as intersects } from './dom-0cd3f6fc.js';
-import { d as decimalPlaces, c as clamp } from './math-a662e675.js';
-import { c as connectLabel, d as disconnectLabel } from './label-2db28cd1.js';
-import { c as connectForm, d as disconnectForm, a as afterConnectDefaultValueSet, H as HiddenFormInputSlot } from './form-145e7101.js';
-import { u as updateHostInteraction } from './interactive-c1838314.js';
+import { r as registerInstance, f as forceUpdate, h, g as getElement, c as createEvent, H as Host } from './index-75818348.js';
+import { g as guid } from './guid-165ed9d8.js';
+import { c as createObserver } from './observers-d615e091.js';
+import { h as intersects } from './dom-50ba18b2.js';
+import { d as decimalPlaces, c as clamp } from './math-404e5b2c.js';
+import { c as connectLabel, d as disconnectLabel } from './label-e48ce2a2.js';
+import { c as connectForm, d as disconnectForm, a as afterConnectDefaultValueSet, H as HiddenFormInputSlot } from './form-e4b7aedd.js';
+import { u as updateHostInteraction } from './interactive-027ad8d9.js';
 
 /**
  * Calculate slope of the tangents

package/dist/esm/calcite-handle.entry.js

@@ -1,11 +1,11 @@
 /*!
  * 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.532
+ * v1.0.0-next.535
  */
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-67812472.js';
-import { t as toAriaBoolean } from './dom-0cd3f6fc.js';
-import './guid-601c13f1.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-75818348.js';
+import { t as toAriaBoolean } from './dom-50ba18b2.js';
+import './guid-165ed9d8.js';
 
 const CSS = {
   handle: "handle",

package/dist/esm/calcite-icon.entry.js

@@ -1,12 +1,12 @@
 /*!
  * 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.532
+ * v1.0.0-next.535
  */
-import { a as getAssetPath, r as registerInstance, h, H as Host, g as getElement } from './index-67812472.js';
-import { a as getElementDir, t as toAriaBoolean } from './dom-0cd3f6fc.js';
-import { c as createObserver } from './observers-db6d1b56.js';
-import './guid-601c13f1.js';
+import { a as getAssetPath, r as registerInstance, h, H as Host, g as getElement } from './index-75818348.js';
+import { a as getElementDir, t as toAriaBoolean } from './dom-50ba18b2.js';
+import { c as createObserver } from './observers-d615e091.js';
+import './guid-165ed9d8.js';
 
 const CSS = {
   icon: "icon",

package/dist/esm/calcite-inline-editable.entry.js

@@ -1,14 +1,14 @@
 /*!
  * 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.532
+ * v1.0.0-next.535
  */
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-67812472.js';
-import { d as getElementProp, g as getSlotted } from './dom-0cd3f6fc.js';
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-2db28cd1.js';
-import { c as createObserver } from './observers-db6d1b56.js';
-import { u as updateHostInteraction } from './interactive-c1838314.js';
-import './guid-601c13f1.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-75818348.js';
+import { d as getElementProp, g as getSlotted } from './dom-50ba18b2.js';
+import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-e48ce2a2.js';
+import { c as createObserver } from './observers-d615e091.js';
+import { u as updateHostInteraction } from './interactive-027ad8d9.js';
+import './guid-165ed9d8.js';
 
 const CSS = {
   wrapper: "wrapper",

package/dist/esm/calcite-input-date-picker.entry.js

@@ -1,18 +1,18 @@
 /*!
  * 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.532
+ * v1.0.0-next.535
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-67812472.js';
-import { T as TEXT, d as dateToISO, a as dateFromISO, b as dateFromRange, g as getLocaleData, s as sameDate, p as parseDateString, i as inRange } from './resources-000bc05a.js';
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-2db28cd1.js';
-import { s as submitForm, c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form-145e7101.js';
-import { d as defaultMenuPlacement, f as filterComputedPlacements, u as updatePopper, C as CSS$1, c as createPopper, p as popperMenuComputedPlacements } from './popper-b3ff297f.js';
-import { u as updateHostInteraction } from './interactive-c1838314.js';
-import { t as toAriaBoolean } from './dom-0cd3f6fc.js';
-import './locale-fda97619.js';
-import './key-6f99bc9e.js';
-import './guid-601c13f1.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-75818348.js';
+import { T as TEXT, d as dateToISO, a as dateFromISO, b as dateFromRange, g as getLocaleData, s as sameDate, p as parseDateString, i as inRange } from './resources-6e0684b7.js';
+import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-e48ce2a2.js';
+import { s as submitForm, c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form-e4b7aedd.js';
+import { d as defaultMenuPlacement, f as filterComputedPlacements, u as updatePopper, C as CSS$1, c as createPopper, p as popperMenuComputedPlacements } from './popper-1fa91e9f.js';
+import { u as updateHostInteraction } from './interactive-027ad8d9.js';
+import { t as toAriaBoolean } from './dom-50ba18b2.js';
+import './locale-22768adb.js';
+import './key-7d364914.js';
+import './guid-165ed9d8.js';
 
 const CSS = {
   menu: "menu-container",
@@ -27,8 +27,10 @@ const InputDatePicker = class {
     this.calciteDatePickerChange = createEvent(this, "calciteDatePickerChange", 7);
     this.calciteDatePickerRangeChange = createEvent(this, "calciteDatePickerRangeChange", 7);
     this.calciteInputDatePickerChange = createEvent(this, "calciteInputDatePickerChange", 7);
-    this.calciteInternalInputDatePickerOpen = createEvent(this, "calciteInternalInputDatePickerOpen", 7);
-    this.calciteInternalInputDatePickerClose = createEvent(this, "calciteInternalInputDatePickerClose", 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);
     //--------------------------------------------------------------------------
     //
     //  Public Properties
@@ -90,6 +92,10 @@ const InputDatePicker = class {
     this.layout = "horizontal";
     this.focusedInput = "start";
     this.activeTransitionProp = "opacity";
+    this.setContainerEl = (el) => {
+      this.containerEl = el;
+      this.containerEl.addEventListener("transitionstart", this.transitionStartHandler);
+    };
     //--------------------------------------------------------------------------
     //
     //  Private Methods
@@ -101,11 +107,14 @@ const InputDatePicker = class {
         ? filterComputedPlacements(flipPlacements, el)
         : null;
     };
+    this.transitionStartHandler = (event) => {
+      if (event.propertyName === this.activeTransitionProp && event.target === this.containerEl) {
+        this.active ? this.onBeforeOpen() : this.onBeforeClose();
+      }
+    };
     this.transitionEnd = (event) => {
-      if (event.propertyName === this.activeTransitionProp) {
-        this.active
-          ? this.calciteInternalInputDatePickerOpen.emit()
-          : this.calciteInternalInputDatePickerClose.emit();
+      if (event.propertyName === this.activeTransitionProp && event.target === this.containerEl) {
+        this.active ? this.onOpen() : this.onClose();
       }
     };
     this.setStartInput = (el) => {
@@ -305,6 +314,8 @@ const InputDatePicker = class {
     this.onMaxChanged(this.max);
   }
   disconnectedCallback() {
+    var _a;
+    (_a = this.containerEl) === null || _a === void 0 ? void 0 : _a.removeEventListener("transitionstart", this.transitionStartHandler);
     this.destroyPopper();
     disconnectLabel(this);
     disconnectForm(this);
@@ -329,7 +340,7 @@ const InputDatePicker = class {
         ["calendar-picker-wrapper--end"]: this.focusedInput === "end",
         [CSS$1.animation]: true,
         [CSS$1.animationActive]: this.active
-      }, onTransitionEnd: this.transitionEnd }, h("calcite-date-picker", { activeRange: this.focusedInput, endAsDate: this.endAsDate, headingLevel: this.headingLevel, intlNextMonth: this.intlNextMonth, intlPrevMonth: this.intlPrevMonth, intlYear: this.intlYear, locale: this.locale, max: this.max, maxAsDate: this.maxAsDate, min: this.min, minAsDate: this.minAsDate, onCalciteDatePickerChange: this.handleDateChange, onCalciteDatePickerRangeChange: this.handleDateRangeChange, proximitySelectionDisabled: this.proximitySelectionDisabled, range: this.range, scale: this.scale, startAsDate: this.startAsDate, tabIndex: 0, valueAsDate: this.valueAsDate }))), this.range && this.layout === "horizontal" && (h("div", { class: "horizontal-arrow-container" }, h("calcite-icon", { flipRtl: true, icon: "arrow-right", scale: "s" }))), this.range && this.layout === "vertical" && this.scale !== "s" && (h("div", { class: "vertical-arrow-container" }, h("calcite-icon", { icon: "arrow-down", scale: "s" }))), this.range && (h("div", { class: "input-wrapper", ref: this.setEndWrapper }, h("calcite-input", { class: {
+      }, onTransitionEnd: this.transitionEnd, ref: this.setContainerEl }, h("calcite-date-picker", { activeRange: this.focusedInput, endAsDate: this.endAsDate, headingLevel: this.headingLevel, intlNextMonth: this.intlNextMonth, intlPrevMonth: this.intlPrevMonth, intlYear: this.intlYear, locale: this.locale, max: this.max, maxAsDate: this.maxAsDate, min: this.min, minAsDate: this.minAsDate, onCalciteDatePickerChange: this.handleDateChange, onCalciteDatePickerRangeChange: this.handleDateRangeChange, proximitySelectionDisabled: this.proximitySelectionDisabled, range: this.range, scale: this.scale, startAsDate: this.startAsDate, tabIndex: 0, valueAsDate: this.valueAsDate }))), this.range && this.layout === "horizontal" && (h("div", { class: "horizontal-arrow-container" }, h("calcite-icon", { flipRtl: true, icon: "arrow-right", scale: "s" }))), this.range && this.layout === "vertical" && this.scale !== "s" && (h("div", { class: "vertical-arrow-container" }, h("calcite-icon", { icon: "arrow-down", scale: "s" }))), this.range && (h("div", { class: "input-wrapper", ref: this.setEndWrapper }, h("calcite-input", { class: {
         input: true,
         "border-top-color-one": this.layout === "vertical" && this.range
       }, disabled: disabled, icon: "calendar", "number-button-type": "none", onCalciteInputInput: this.inputInput, onCalciteInternalInputBlur: this.inputBlur, onCalciteInternalInputFocus: this.endInputFocus, placeholder: (_b = this.localeData) === null || _b === void 0 ? void 0 : _b.placeholder, readOnly: readOnly, ref: this.setEndInput, scale: this.scale, type: "text", value: formattedEndDate }))))), h(HiddenFormInputSlot, { component: this })));
@@ -345,6 +356,18 @@ const InputDatePicker = class {
   onLabelClick() {
     this.setFocus();
   }
+  onBeforeOpen() {
+    this.calciteInputDatePickerBeforeOpen.emit();
+  }
+  onOpen() {
+    this.calciteInputDatePickerOpen.emit();
+  }
+  onBeforeClose() {
+    this.calciteInputDatePickerBeforeClose.emit();
+  }
+  onClose() {
+    this.calciteInputDatePickerClose.emit();
+  }
   getModifiers() {
     const flipModifier = {
       name: "flip",

package/dist/esm/calcite-input-message.entry.js

@@ -1,11 +1,11 @@
 /*!
  * 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.532
+ * v1.0.0-next.535
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-67812472.js';
-import { s as setRequestedIcon, d as getElementProp } from './dom-0cd3f6fc.js';
-import './guid-601c13f1.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-75818348.js';
+import { s as setRequestedIcon, d as getElementProp } from './dom-50ba18b2.js';
+import './guid-165ed9d8.js';
 
 var StatusIconDefaults;
 (function (StatusIconDefaults) {

package/dist/esm/calcite-input-number.entry.js

@@ -1,18 +1,18 @@
 /*!
  * 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.532
+ * v1.0.0-next.535
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-67812472.js';
-import { T as TEXT$1, g as getSlotted, s as setRequestedIcon, d as getElementProp, a as getElementDir, C as CSS_UTILITY } from './dom-0cd3f6fc.js';
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-2db28cd1.js';
-import { s as submitForm, c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form-145e7101.js';
-import { d as delocalizeNumberString, i as isValidNumber, p as parseNumberString, g as getDecimalSeparator, l as localizeNumberString, s as sanitizeNumberString } from './locale-fda97619.js';
-import { n as numberKeys } from './key-6f99bc9e.js';
-import { d as decimalPlaces } from './math-a662e675.js';
-import { c as createObserver } from './observers-db6d1b56.js';
-import { u as updateHostInteraction } from './interactive-c1838314.js';
-import './guid-601c13f1.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-75818348.js';
+import { T as TEXT$1, g as getSlotted, s as setRequestedIcon, d as getElementProp, a as getElementDir, C as CSS_UTILITY } from './dom-50ba18b2.js';
+import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-e48ce2a2.js';
+import { s as submitForm, c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form-e4b7aedd.js';
+import { d as delocalizeNumberString, i as isValidNumber, p as parseNumberString, g as getDecimalSeparator, l as localizeNumberString, s as sanitizeNumberString } from './locale-22768adb.js';
+import { n as numberKeys } from './key-7d364914.js';
+import { d as decimalPlaces } from './math-404e5b2c.js';
+import { c as createObserver } from './observers-d615e091.js';
+import { u as updateHostInteraction } from './interactive-027ad8d9.js';
+import './guid-165ed9d8.js';
 
 const CSS = {
   loader: "loader",