@esri/calcite-components 1.0.0-next.520 → 1.0.0-next.521

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.520
+ * v1.0.0-next.521
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-3ec30bad.js';
-import { a as isSymbol, S as Symbol, d as debounce } from './debounce-17713200.js';
-import { i as isArray, f as forIn } from './forIn-3302954f.js';
-import { f as filterComputedPlacements, u as updatePopper, c as createPopper, d as defaultMenuPlacement, p as popperMenuComputedPlacements, C as CSS$2 } from './popper-00afea1c.js';
-import { g as guid } from './guid-5aa84743.js';
-import { n as nodeListToArray, t as toAriaBoolean, d as getElementProp, g as getSlotted } from './dom-3bc3e6f2.js';
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-3a519eed.js';
-import { s as submitForm, c as connectForm, a as afterConnectDefaultValueSet, d as disconnectForm, H as HiddenFormInputSlot } from './form-cb292ed6.js';
-import { c as createObserver } from './observers-f302dd59.js';
-import { u as updateHostInteraction } from './interactive-21921578.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-8a611e76.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-3d4e33c9.js';
+import { a as isSymbol, S as Symbol, d as debounce } from './debounce-671be4ab.js';
+import { i as isArray, f as forIn } from './forIn-61b8f555.js';
+import { f as filterComputedPlacements, u as updatePopper, c as createPopper, d as defaultMenuPlacement, p as popperMenuComputedPlacements, C as CSS$2 } from './popper-0f8ca820.js';
+import { g as guid } from './guid-681ada01.js';
+import { n as nodeListToArray, t as toAriaBoolean, d as getElementProp, g as getSlotted } from './dom-1d25d90d.js';
+import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-78ef6888.js';
+import { s as submitForm, c as connectForm, a as afterConnectDefaultValueSet, d as disconnectForm, H as HiddenFormInputSlot } from './form-9231bd75.js';
+import { c as createObserver } from './observers-f4b26851.js';
+import { u as updateHostInteraction } from './interactive-206f3e33.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-251f048d.js';
 
 /**
  * A specialized version of `_.map` for arrays without support for iteratee
@@ -207,8 +207,14 @@ const Combobox = class {
     //  Public Properties
     //
     //--------------------------------------------------------------------------
-    /** Opens or closes the combobox */
+    /**
+     * When true, opens the combobox
+     *
+     * @deprecated use open instead
+     */
     this.active = false;
+    /**When true, opens the combobox */
+    this.open = false;
     /** Disable combobox input */
     this.disabled = false;
     /** Specify the maximum number of combobox items (including nested children) to display before showing the scroller */
@@ -282,8 +288,9 @@ const Combobox = class {
             this.addCustomChip(this.text, true);
             event.preventDefault();
           }
-          else if (this.active) {
+          else if (this.open || this.active) {
             this.active = false;
+            this.open = false;
             event.preventDefault();
           }
           break;
@@ -300,9 +307,10 @@ const Combobox = class {
           }
           break;
         case "ArrowDown":
-          if (!this.active) {
+          if (!(this.open || this.active)) {
             event.preventDefault();
             this.active = true;
+            this.open = true;
           }
           this.shiftActiveItemIndex(1);
           if (!this.comboboxInViewport()) {
@@ -313,11 +321,12 @@ const Combobox = class {
           if (!this.textInput.value) {
             event.preventDefault();
             this.active = true;
+            this.open = true;
             this.shiftActiveItemIndex(1);
           }
           break;
         case "Home":
-          if (this.active) {
+          if (this.open || this.active) {
             event.preventDefault();
           }
           this.updateActiveItemIndex(0);
@@ -327,7 +336,7 @@ const Combobox = class {
           }
           break;
         case "End":
-          if (this.active) {
+          if (this.open || this.active) {
             event.preventDefault();
           }
           this.updateActiveItemIndex(this.visibleItems.length - 1);
@@ -338,6 +347,7 @@ const Combobox = class {
           break;
         case "Escape":
           this.active = false;
+          this.open = false;
           break;
         case "Enter":
           if (this.activeItemIndex > -1) {
@@ -366,15 +376,17 @@ const Combobox = class {
     };
     this.toggleCloseEnd = () => {
       this.active = false;
+      this.open = false;
       this.el.removeEventListener("calciteComboboxClose", this.toggleCloseEnd);
     };
     this.toggleOpenEnd = () => {
       this.active = true;
+      this.open = false;
       this.el.removeEventListener("calciteComboboxOpen", this.toggleOpenEnd);
     };
     this.transitionEnd = (event) => {
       if (event.propertyName === this.activeTransitionProp) {
-        this.active ? this.onOpen() : this.onClose();
+        this.open || this.active ? this.onOpen() : this.onClose();
       }
     };
     /* *
@@ -383,12 +395,13 @@ const Combobox = class {
     */
     this.transitionRunHandler = (event) => {
       if (event.propertyName === this.activeTransitionProp) {
-        this.active ? this.onBeforeOpen() : this.onBeforeClose();
+        this.open || this.active ? this.onBeforeOpen() : this.onBeforeClose();
       }
     };
     this.setMaxScrollerHeight = async () => {
-      const { active, listContainerEl } = this;
-      if (!listContainerEl || !active) {
+      const { active, listContainerEl, open } = this;
+      const isOpen = !(active || open);
+      if (!listContainerEl || isOpen) {
         return;
       }
       await this.reposition();
@@ -398,6 +411,7 @@ const Combobox = class {
     };
     this.calciteChipDismissHandler = (event, comboboxItem) => {
       this.active = false;
+      this.open = false;
       const selection = this.items.find((item) => item === comboboxItem);
       if (selection) {
         this.toggleSelection(selection, false);
@@ -409,12 +423,14 @@ const Combobox = class {
         return;
       }
       this.active = !this.active;
+      this.open = !this.open;
       this.updateActiveItemIndex(0);
       this.setFocus();
     };
     this.setInactiveIfNotContained = (event) => {
       const composedPath = event.composedPath();
-      if (!this.active || composedPath.includes(this.el) || composedPath.includes(this.referenceEl)) {
+      const isOpen = !(this.open || this.active);
+      if (isOpen || composedPath.includes(this.el) || composedPath.includes(this.referenceEl)) {
         return;
       }
       if (this.allowCustomValues && this.text.trim().length) {
@@ -429,6 +445,7 @@ const Combobox = class {
         this.updateActiveItemIndex(-1);
       }
       this.active = false;
+      this.open = false;
     };
     this.setMenuEl = (el) => {
       this.menuEl = el;
@@ -520,6 +537,7 @@ const Combobox = class {
   activeHandler() {
     if (this.disabled) {
       this.active = false;
+      this.open = false;
       return;
     }
     this.setMaxScrollerHeight();
@@ -527,6 +545,7 @@ const Combobox = class {
   handleDisabledChange(value) {
     if (!value) {
       this.active = false;
+      this.open = false;
     }
   }
   maxItemsHandler() {
@@ -670,7 +689,7 @@ const Combobox = class {
     };
     const eventListenerModifier = {
       name: "eventListeners",
-      enabled: this.active
+      enabled: this.open || this.active
     };
     return [flipModifier, eventListenerModifier];
   }
@@ -748,6 +767,7 @@ const Combobox = class {
         this.textInput.value = item.textLabel;
       }
       this.active = false;
+      this.open = false;
       this.updateActiveItemIndex(-1);
       this.resetText();
       this.filterItems("");
@@ -930,10 +950,10 @@ const Combobox = class {
     });
   }
   renderInput() {
-    const { guid, active, disabled, placeholder, selectionMode, needsIcon, selectedItems } = this;
+    const { guid, active, disabled, placeholder, selectionMode, needsIcon, selectedItems, open } = this;
     const single = selectionMode === "single";
     const selectedItem = selectedItems[0];
-    const showLabel = !active && single && !!selectedItem;
+    const showLabel = !(open || active) && single && !!selectedItem;
     return (h("span", { class: {
         "input-wrap": true,
         "input-wrap--single": single
@@ -952,13 +972,13 @@ const Combobox = class {
     return this.visibleItems.map((item) => (h("li", { "aria-selected": toAriaBoolean(item.selected), id: item.guid ? `${itemUidPrefix}${item.guid}` : null, role: "option", tabindex: "-1" }, item.textLabel)));
   }
   renderPopperContainer() {
-    const { active, setMenuEl, setListContainerEl } = this;
+    const { active, setMenuEl, setListContainerEl, open } = this;
     const classes = {
       "list-container": true,
       [CSS$2.animation]: true,
-      [CSS$2.animationActive]: active
+      [CSS$2.animationActive]: open || active
     };
-    return (h("div", { "aria-hidden": "true", class: { "popper-container": true, "popper-container--active": active }, ref: setMenuEl }, h("div", { class: classes, onTransitionEnd: this.transitionEnd, ref: setListContainerEl }, h("ul", { class: { list: true, "list--hide": !active } }, h("slot", null)))));
+    return (h("div", { "aria-hidden": "true", class: { "popper-container": true, "popper-container--active": open || active }, ref: setMenuEl }, h("div", { class: classes, onTransitionEnd: this.transitionEnd, ref: setListContainerEl }, h("ul", { class: { list: true, "list--hide": !(open || active) } }, h("slot", null)))));
   }
   renderIconStart() {
     var _a;
@@ -969,21 +989,22 @@ const Combobox = class {
       ((selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon) || placeholderIcon) && (h("span", { class: "icon-start" }, h("calcite-icon", { class: "selected-icon", icon: (_a = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon) !== null && _a !== void 0 ? _a : placeholderIcon, scale: "s" }))));
   }
   renderIconEnd() {
-    const { active } = this;
-    return (h("span", { class: "icon-end" }, h("calcite-icon", { icon: active ? "chevron-up" : "chevron-down", scale: "s" })));
+    const { active, open } = this;
+    return (h("span", { class: "icon-end" }, h("calcite-icon", { icon: active || open ? "chevron-up" : "chevron-down", scale: "s" })));
   }
   render() {
-    const { active, guid, label } = this;
+    const { active, guid, label, open } = this;
     const single = this.selectionMode === "single";
-    return (h(Host, { onKeyDown: this.keydownHandler }, h("div", { "aria-autocomplete": "list", "aria-expanded": toAriaBoolean(active), "aria-haspopup": "listbox", "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-owns": `${listboxUidPrefix}${guid}`, class: {
+    return (h(Host, { onKeyDown: this.keydownHandler }, h("div", { "aria-autocomplete": "list", "aria-expanded": toAriaBoolean(open || active), "aria-haspopup": "listbox", "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-owns": `${listboxUidPrefix}${guid}`, class: {
         wrapper: true,
         "wrapper--single": single || !this.selectedItems.length,
-        "wrapper--active": active
+        "wrapper--active": open || active
       }, onClick: this.clickHandler, ref: this.setReferenceEl, role: "combobox" }, h("div", { class: "grid-input" }, this.renderIconStart(), !single && this.renderChips(), h("label", { class: "screen-readers-only", htmlFor: `${inputUidPrefix}${guid}`, id: `${labelUidPrefix}${guid}` }, label), this.renderInput()), this.renderIconEnd()), h("ul", { "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-multiselectable": "true", class: "screen-readers-only", id: `${listboxUidPrefix}${guid}`, role: "listbox", tabIndex: -1 }, this.renderListBoxOptions()), this.renderPopperContainer(), h(HiddenFormInputSlot, { component: this })));
   }
   get el() { return getElement(this); }
   static get watchers() { return {
     "active": ["activeHandler"],
+    "open": ["activeHandler"],
     "disabled": ["handleDisabledChange"],
     "maxItems": ["maxItemsHandler"],
     "value": ["valueHandler"],

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.520
+ * v1.0.0-next.521
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, F as Fragment } from './index-3ec30bad.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-790145ca.js';
-import { a as getElementDir, C as CSS_UTILITY } from './dom-3bc3e6f2.js';
-import { u as updateHostInteraction } from './interactive-21921578.js';
-import { H as Heading } from './Heading-252785eb.js';
-import './locale-1e310e6f.js';
-import './key-02ae0e60.js';
-import './guid-5aa84743.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, F as Fragment } from './index-3d4e33c9.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-9cd6c136.js';
+import { a as getElementDir, C as CSS_UTILITY } from './dom-1d25d90d.js';
+import { u as updateHostInteraction } from './interactive-206f3e33.js';
+import { H as Heading } from './Heading-d8e9c4d0.js';
+import './locale-ddc99d54.js';
+import './key-aaa7a17a.js';
+import './guid-681ada01.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;width: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-width:216px}:host([scale=m]){max-width:286px}:host([scale=l]){max-width:398px}";
 

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

@@ -1,20 +1,20 @@
 /*!
  * 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.520
+ * v1.0.0-next.521
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-3ec30bad.js';
-import { t as toAriaBoolean, f as focusElement, d as getElementProp } from './dom-3bc3e6f2.js';
-import { d as defaultMenuPlacement, f as filterComputedPlacements, C as CSS$2, u as updatePopper, c as createPopper, p as popperMenuComputedPlacements } from './popper-00afea1c.js';
-import { c as createObserver } from './observers-f302dd59.js';
-import { u as updateHostInteraction } from './interactive-21921578.js';
-import './guid-5aa84743.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-3d4e33c9.js';
+import { t as toAriaBoolean, f as focusElement, d as getElementProp } from './dom-1d25d90d.js';
+import { d as defaultMenuPlacement, f as filterComputedPlacements, C as CSS$2, u as updatePopper, c as createPopper, p as popperMenuComputedPlacements } from './popper-0f8ca820.js';
+import { c as createObserver } from './observers-f4b26851.js';
+import { u as updateHostInteraction } from './interactive-206f3e33.js';
+import './guid-681ada01.js';
 
 const SLOTS = {
   dropdownTrigger: "dropdown-trigger"
 };
 
-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{--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{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:0 1 auto;flex:0 1 auto}: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}:host .calcite-dropdown-wrapper{display:block;position:absolute;z-index:900;-webkit-transform:scale(0);transform:scale(0);visibility:hidden;pointer-events:none}.calcite-dropdown-wrapper .calcite-popper-anim{position:relative;z-index:1;-webkit-transition:var(--calcite-popper-transition);transition:var(--calcite-popper-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-popper-placement^=bottom] .calcite-popper-anim{-webkit-transform:translateY(-5px);transform:translateY(-5px)}.calcite-dropdown-wrapper[data-popper-placement^=top] .calcite-popper-anim{-webkit-transform:translateY(5px);transform:translateY(5px)}.calcite-dropdown-wrapper[data-popper-placement^=left] .calcite-popper-anim{-webkit-transform:translateX(5px);transform:translateX(5px)}.calcite-dropdown-wrapper[data-popper-placement^=right] .calcite-popper-anim{-webkit-transform:translateX(-5px);transform:translateX(-5px)}.calcite-dropdown-wrapper[data-popper-placement] .calcite-popper-anim--active{opacity:1;visibility:visible;-webkit-transform:translate(0);transform:translate(0)}:host([active]) .calcite-dropdown-wrapper{pointer-events:initial;visibility:visible}:host .calcite-dropdown-content{width:auto;overflow-y:auto;overflow-x:hidden;background-color:var(--calcite-ui-foreground-1);max-height:90vh;width:var(--calcite-dropdown-width)}.calcite-dropdown-trigger-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto}:host([width=s]){--calcite-dropdown-width:12rem}:host([width=m]){--calcite-dropdown-width:14rem}:host([width=l]){--calcite-dropdown-width:16rem}";
+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{--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{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:0 1 auto;flex:0 1 auto}: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}:host .calcite-dropdown-wrapper{display:block;position:absolute;z-index:900;-webkit-transform:scale(0);transform:scale(0);visibility:hidden;pointer-events:none}.calcite-dropdown-wrapper .calcite-popper-anim{position:relative;z-index:1;-webkit-transition:var(--calcite-popper-transition);transition:var(--calcite-popper-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-popper-placement^=bottom] .calcite-popper-anim{-webkit-transform:translateY(-5px);transform:translateY(-5px)}.calcite-dropdown-wrapper[data-popper-placement^=top] .calcite-popper-anim{-webkit-transform:translateY(5px);transform:translateY(5px)}.calcite-dropdown-wrapper[data-popper-placement^=left] .calcite-popper-anim{-webkit-transform:translateX(5px);transform:translateX(5px)}.calcite-dropdown-wrapper[data-popper-placement^=right] .calcite-popper-anim{-webkit-transform:translateX(-5px);transform:translateX(-5px)}.calcite-dropdown-wrapper[data-popper-placement] .calcite-popper-anim--active{opacity:1;visibility:visible;-webkit-transform:translate(0);transform:translate(0)}:host([active]) .calcite-dropdown-wrapper,:host([open]) .calcite-dropdown-wrapper{pointer-events:initial;visibility:visible}:host .calcite-dropdown-content{width:auto;overflow-y:auto;overflow-x:hidden;background-color:var(--calcite-ui-foreground-1);max-height:90vh;width:var(--calcite-dropdown-width)}.calcite-dropdown-trigger-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto}:host([width=s]){--calcite-dropdown-width:12rem}:host([width=m]){--calcite-dropdown-width:14rem}:host([width=l]){--calcite-dropdown-width:16rem}";
 
 const Dropdown = class {
   constructor(hostRef) {
@@ -29,8 +29,14 @@ const Dropdown = class {
     //  Public Properties
     //
     //--------------------------------------------------------------------------
-    /** Opens or closes the dropdown */
+    /**
+     * Opens or closes the dropdown
+     *
+     * @deprecated use open instead.
+     */
     this.active = false;
+    /** When true, opens the dropdown */
+    this.open = false;
     /**
      allow the dropdown to remain open after a selection is made
      if the selection-mode of the selected item's containing group is "none", the dropdown will always close
@@ -117,8 +123,9 @@ const Dropdown = class {
       scrollerEl.style.minWidth = `${referenceElWidth}px`;
     };
     this.setMaxScrollerHeight = () => {
-      const { active, scrollerEl } = this;
-      if (!scrollerEl || !active) {
+      const { active, scrollerEl, open } = this;
+      const isOpen = !(active || open);
+      if (!scrollerEl || isOpen) {
         return;
       }
       this.reposition();
@@ -133,12 +140,14 @@ const Dropdown = class {
     };
     this.transitionEnd = (event) => {
       if (event.propertyName === this.activeTransitionProp) {
-        this.active ? this.emitOpenCloseEvent("open") : this.emitOpenCloseEvent("close");
+        this.open || this.active ? this.emitOpenCloseEvent("open") : this.emitOpenCloseEvent("close");
       }
     };
     this.transitionRunHandler = (event) => {
       if (event.propertyName === this.activeTransitionProp) {
-        this.active ? this.emitOpenCloseEvent("beforeOpen") : this.emitOpenCloseEvent("beforeClose");
+        this.active || this.open
+          ? this.emitOpenCloseEvent("beforeOpen")
+          : this.emitOpenCloseEvent("beforeClose");
       }
     };
     this.setReferenceEl = (el) => {
@@ -154,7 +163,7 @@ const Dropdown = class {
         return;
       }
       const key = e.key;
-      if (this.active && (key === "Escape" || (e.shiftKey && key === "Tab"))) {
+      if ((this.open || this.active) && (key === "Escape" || (e.shiftKey && key === "Tab"))) {
         this.closeCalciteDropdown();
         return;
       }
@@ -177,7 +186,8 @@ const Dropdown = class {
     };
     this.openCalciteDropdown = () => {
       this.active = !this.active;
-      if (this.active) {
+      this.open = !this.open;
+      if (this.active || this.open) {
         this.el.addEventListener("calciteDropdownOpen", this.toggleOpenEnd);
       }
     };
@@ -188,10 +198,12 @@ const Dropdown = class {
       return;
     }
     this.active = false;
+    this.open = false;
   }
   handleDisabledChange(value) {
     if (!value) {
       this.active = false;
+      this.open = false;
     }
   }
   flipPlacementsHandler() {
@@ -230,12 +242,12 @@ const Dropdown = class {
     }
   }
   render() {
-    const { active } = this;
-    return (h(Host, null, h("div", { class: "calcite-dropdown-trigger-container", onClick: this.openCalciteDropdown, onKeyDown: this.keyDownHandler, ref: this.setReferenceEl }, h("slot", { "aria-expanded": toAriaBoolean(active), "aria-haspopup": "true", name: SLOTS.dropdownTrigger, onSlotchange: this.updateTriggers })), h("div", { "aria-hidden": toAriaBoolean(!active), class: "calcite-dropdown-wrapper", ref: this.setMenuEl }, h("div", { class: {
+    const { active, open } = this;
+    return (h(Host, null, h("div", { class: "calcite-dropdown-trigger-container", onClick: this.openCalciteDropdown, onKeyDown: this.keyDownHandler, ref: this.setReferenceEl }, h("slot", { "aria-expanded": toAriaBoolean(active || open), "aria-haspopup": "true", name: SLOTS.dropdownTrigger, onSlotchange: this.updateTriggers })), h("div", { "aria-hidden": toAriaBoolean(!(active || open)), class: "calcite-dropdown-wrapper", ref: this.setMenuEl }, h("div", { class: {
         ["calcite-dropdown-content"]: true,
         [CSS$2.animation]: true,
-        [CSS$2.animationActive]: active
-      }, onTransitionEnd: this.transitionEnd, ref: this.setScrollerEl }, h("div", { hidden: !this.active }, h("slot", { onSlotchange: this.updateGroups }))))));
+        [CSS$2.animationActive]: active || open
+      }, onTransitionEnd: this.transitionEnd, ref: this.setScrollerEl }, h("div", { hidden: !(open || active) }, h("slot", { onSlotchange: this.updateGroups }))))));
   }
   //--------------------------------------------------------------------------
   //
@@ -256,7 +268,8 @@ const Dropdown = class {
       : this.createPopper();
   }
   closeCalciteDropdownOnClick(e) {
-    if (!this.active || e.composedPath().includes(this.el)) {
+    const isOpen = !(this.open || this.active);
+    if (isOpen || e.composedPath().includes(this.el)) {
       return;
     }
     this.closeCalciteDropdown(false);
@@ -270,6 +283,7 @@ const Dropdown = class {
       return;
     }
     this.active = false;
+    this.open = false;
   }
   mouseEnterHandler() {
     if (this.type === "hover") {
@@ -351,7 +365,7 @@ const Dropdown = class {
     };
     const eventListenerModifier = {
       name: "eventListeners",
-      enabled: this.active
+      enabled: this.open || this.active
     };
     return [flipModifier, eventListenerModifier];
   }
@@ -402,6 +416,7 @@ const Dropdown = class {
   }
   closeCalciteDropdown(focusTrigger = true) {
     this.active = false;
+    this.open = false;
     if (focusTrigger) {
       focusElement(this.triggers[0]);
     }
@@ -439,6 +454,7 @@ const Dropdown = class {
   get el() { return getElement(this); }
   static get watchers() { return {
     "active": ["activeHandler"],
+    "open": ["activeHandler"],
     "disabled": ["handleDisabledChange"],
     "flipPlacements": ["flipPlacementsHandler"],
     "maxItems": ["maxItemsHandler"],

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.520
+ * v1.0.0-next.521
  */
-import { r as registerInstance, h, g as getElement } from './index-3ec30bad.js';
-import { f as focusElement } from './dom-3bc3e6f2.js';
-import { u as updateHostInteraction } from './interactive-21921578.js';
-import './guid-5aa84743.js';
+import { r as registerInstance, h, g as getElement } from './index-3d4e33c9.js';
+import { f as focusElement } from './dom-1d25d90d.js';
+import { u as updateHostInteraction } from './interactive-206f3e33.js';
+import './guid-681ada01.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.520
+ * v1.0.0-next.521
  */
-import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-3ec30bad.js';
-import { f as focusElement } from './dom-3bc3e6f2.js';
-import { u as updateHostInteraction } from './interactive-21921578.js';
-import { d as debounce } from './debounce-17713200.js';
-import { f as forIn } from './forIn-3302954f.js';
-import './guid-5aa84743.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-3d4e33c9.js';
+import { f as focusElement } from './dom-1d25d90d.js';
+import { u as updateHostInteraction } from './interactive-206f3e33.js';
+import { d as debounce } from './debounce-671be4ab.js';
+import { f as forIn } from './forIn-61b8f555.js';
+import './guid-681ada01.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.520
+ * v1.0.0-next.521
  */
-import { r as registerInstance, h, g as getElement } from './index-3ec30bad.js';
-import { c as createObserver } from './observers-f302dd59.js';
+import { r as registerInstance, h, g as getElement } from './index-3d4e33c9.js';
+import { c as createObserver } from './observers-f4b26851.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.520
+ * v1.0.0-next.521
  */
-import { r as registerInstance, f as forceUpdate, h, g as getElement, c as createEvent, H as Host } from './index-3ec30bad.js';
-import { g as guid } from './guid-5aa84743.js';
-import { c as createObserver } from './observers-f302dd59.js';
-import { h as intersects } from './dom-3bc3e6f2.js';
-import { d as decimalPlaces, c as clamp } from './math-9da1254c.js';
-import { c as connectLabel, d as disconnectLabel } from './label-3a519eed.js';
-import { c as connectForm, d as disconnectForm, a as afterConnectDefaultValueSet, H as HiddenFormInputSlot } from './form-cb292ed6.js';
-import { u as updateHostInteraction } from './interactive-21921578.js';
+import { r as registerInstance, f as forceUpdate, h, g as getElement, c as createEvent, H as Host } from './index-3d4e33c9.js';
+import { g as guid } from './guid-681ada01.js';
+import { c as createObserver } from './observers-f4b26851.js';
+import { h as intersects } from './dom-1d25d90d.js';
+import { d as decimalPlaces, c as clamp } from './math-6704b0cd.js';
+import { c as connectLabel, d as disconnectLabel } from './label-78ef6888.js';
+import { c as connectForm, d as disconnectForm, a as afterConnectDefaultValueSet, H as HiddenFormInputSlot } from './form-9231bd75.js';
+import { u as updateHostInteraction } from './interactive-206f3e33.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.520
+ * v1.0.0-next.521
  */
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-3ec30bad.js';
-import { t as toAriaBoolean } from './dom-3bc3e6f2.js';
-import './guid-5aa84743.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-3d4e33c9.js';
+import { t as toAriaBoolean } from './dom-1d25d90d.js';
+import './guid-681ada01.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.520
+ * v1.0.0-next.521
  */
-import { a as getAssetPath, r as registerInstance, h, H as Host, g as getElement } from './index-3ec30bad.js';
-import { a as getElementDir, t as toAriaBoolean } from './dom-3bc3e6f2.js';
-import { c as createObserver } from './observers-f302dd59.js';
-import './guid-5aa84743.js';
+import { a as getAssetPath, r as registerInstance, h, H as Host, g as getElement } from './index-3d4e33c9.js';
+import { a as getElementDir, t as toAriaBoolean } from './dom-1d25d90d.js';
+import { c as createObserver } from './observers-f4b26851.js';
+import './guid-681ada01.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.520
+ * v1.0.0-next.521
  */
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-3ec30bad.js';
-import { d as getElementProp, g as getSlotted } from './dom-3bc3e6f2.js';
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-3a519eed.js';
-import { c as createObserver } from './observers-f302dd59.js';
-import { u as updateHostInteraction } from './interactive-21921578.js';
-import './guid-5aa84743.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-3d4e33c9.js';
+import { d as getElementProp, g as getSlotted } from './dom-1d25d90d.js';
+import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-78ef6888.js';
+import { c as createObserver } from './observers-f4b26851.js';
+import { u as updateHostInteraction } from './interactive-206f3e33.js';
+import './guid-681ada01.js';
 
 const CSS = {
   wrapper: "wrapper",