@esri/calcite-components 1.0.0-next.540 → 1.0.0-next.543

package/dist/cjs/calcite-date-picker_4.cjs.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.540
+ * v1.0.0-next.543
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ddace81d.js');
-const resources = require('./resources-67b8eec0.js');
-const dom = require('./dom-7a972f83.js');
-const interactive = require('./interactive-7f751988.js');
-const Heading = require('./Heading-69bc15ec.js');
-require('./locale-47b632ed.js');
-require('./key-c005f343.js');
-require('./guid-44753eac.js');
+const index = require('./index-8528542e.js');
+const resources = require('./resources-34d97c02.js');
+const dom = require('./dom-6e56f2dc.js');
+const interactive = require('./interactive-9f1f58c7.js');
+const Heading = require('./Heading-beaacc00.js');
+require('./locale-bbad01f3.js');
+require('./key-c8de60bc.js');
+require('./guid-c51c9e0a.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-floating-ui-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/cjs/calcite-dropdown_3.cjs.entry.js

@@ -1,24 +1,24 @@
 /*!
  * 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.540
+ * v1.0.0-next.543
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ddace81d.js');
-const dom = require('./dom-7a972f83.js');
-const floatingUi = require('./floating-ui-b254038e.js');
-const observers = require('./observers-d1ad3104.js');
-const interactive = require('./interactive-7f751988.js');
-const guid = require('./guid-44753eac.js');
+const index = require('./index-8528542e.js');
+const dom = require('./dom-6e56f2dc.js');
+const floatingUi = require('./floating-ui-5841fd96.js');
+const observers = require('./observers-c5c8b954.js');
+const interactive = require('./interactive-9f1f58c7.js');
+const guid = require('./guid-c51c9e0a.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-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}: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{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:0 1 auto;flex:0 1 auto}: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-floating-ui-anim{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{-webkit-transform:translateY(-5px);transform:translateY(-5px)}.calcite-dropdown-wrapper[data-placement^=top] .calcite-floating-ui-anim{-webkit-transform:translateY(5px);transform:translateY(5px)}.calcite-dropdown-wrapper[data-placement^=left] .calcite-floating-ui-anim{-webkit-transform:translateX(5px);transform:translateX(5px)}.calcite-dropdown-wrapper[data-placement^=right] .calcite-floating-ui-anim{-webkit-transform:translateX(-5px);transform:translateX(-5px)}.calcite-dropdown-wrapper[data-placement] .calcite-floating-ui-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{inline-size:auto;overflow-y:auto;overflow-x:hidden;background-color:var(--calcite-ui-foreground-1);max-block-size:90vh;inline-size:var(--calcite-dropdown-width)}.calcite-dropdown-trigger-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto}@media (forced-colors: active){:host([active]) .calcite-dropdown-wrapper,:host([open]) .calcite-dropdown-wrapper{border:1px solid canvasText}}: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-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}: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{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:0 1 auto;flex:0 1 auto}: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-floating-ui-anim{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{-webkit-transform:translateY(-5px);transform:translateY(-5px)}.calcite-dropdown-wrapper[data-placement^=top] .calcite-floating-ui-anim{-webkit-transform:translateY(5px);transform:translateY(5px)}.calcite-dropdown-wrapper[data-placement^=left] .calcite-floating-ui-anim{-webkit-transform:translateX(5px);transform:translateX(5px)}.calcite-dropdown-wrapper[data-placement^=right] .calcite-floating-ui-anim{-webkit-transform:translateX(-5px);transform:translateX(-5px)}.calcite-dropdown-wrapper[data-placement] .calcite-floating-ui-anim--active{opacity:1;visibility:visible;-webkit-transform:translate(0);transform:translate(0)}:host([open]) .calcite-dropdown-wrapper{pointer-events:initial;visibility:visible}:host .calcite-dropdown-content{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{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{border:1px solid canvasText}}: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) {
@@ -72,6 +72,7 @@ const Dropdown = class {
     /** specify whether the dropdown is opened by hover or click of a trigger element */
     this.type = "click";
     this.items = [];
+    this.groups = [];
     this.activeTransitionProp = "visibility";
     this.mutationObserver = observers.createObserver("mutation", () => this.updateItems());
     this.resizeObserver = observers.createObserver("resize", (entries) => this.resizeObserverCallback(entries));
@@ -101,15 +102,19 @@ const Dropdown = class {
       this.reposition();
     };
     this.updateItems = () => {
-      const { defaultAssignedElements } = this;
-      this.items = defaultAssignedElements.filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-dropdown-group, calcite-dropdown-item"))
-        .map((el) => el.matches("calcite-dropdown-group")
-        ? Array.from(el.querySelectorAll("calcite-dropdown-item"))
-        : [el])
+      this.items = this.groups
+        .map((group) => Array.from(group === null || group === void 0 ? void 0 : group.querySelectorAll("calcite-dropdown-item")))
         .reduce((previousValue, currentValue) => [...previousValue, ...currentValue], []);
       this.updateSelectedItems();
       this.reposition();
     };
+    this.updateGroups = (event) => {
+      const groups = event.target
+        .assignedElements({ flatten: true })
+        .filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-dropdown-group"));
+      this.groups = groups;
+      this.updateItems();
+    };
     this.resizeObserverCallback = (entries) => {
       entries.forEach((entry) => {
         const { target } = entry;
@@ -130,9 +135,8 @@ const Dropdown = class {
       scrollerEl.style.minWidth = `${referenceElWidth}px`;
     };
     this.setMaxScrollerHeight = () => {
-      const { active, scrollerEl, open } = this;
-      const isOpen = !(active || open);
-      if (!scrollerEl || isOpen) {
+      const { scrollerEl, open } = this;
+      if (!scrollerEl || !open) {
         return;
       }
       this.reposition();
@@ -147,12 +151,12 @@ const Dropdown = class {
     };
     this.transitionEnd = (event) => {
       if (event.propertyName === this.activeTransitionProp && event.target === this.scrollerEl) {
-        this.open || this.active ? this.onOpen() : this.onClose();
+        this.open ? this.onOpen() : this.onClose();
       }
     };
     this.transitionStartHandler = (event) => {
       if (event.propertyName === this.activeTransitionProp && event.target === this.scrollerEl) {
-        this.open || this.active ? this.onBeforeOpen() : this.onBeforeClose();
+        this.open ? this.onBeforeOpen() : this.onBeforeClose();
       }
     };
     this.setReferenceEl = (el) => {
@@ -170,7 +174,7 @@ const Dropdown = class {
         return;
       }
       const key = event.key;
-      if ((this.open || this.active) && (key === "Escape" || (event.shiftKey && key === "Tab"))) {
+      if (this.open && (key === "Escape" || (event.shiftKey && key === "Tab"))) {
         this.closeCalciteDropdown();
         return;
       }
@@ -192,24 +196,25 @@ const Dropdown = class {
       this.el.removeEventListener("calciteDropdownOpen", this.toggleOpenEnd);
     };
     this.openCalciteDropdown = () => {
-      this.active = !this.active;
       this.open = !this.open;
-      if (this.active || this.open) {
+      if (this.open) {
         this.el.addEventListener("calciteDropdownOpen", this.toggleOpenEnd);
       }
     };
   }
-  activeHandler() {
+  activeHandler(value) {
+    this.open = value;
+  }
+  openHandler(value) {
     if (!this.disabled) {
       this.reposition();
+      this.active = value;
       return;
     }
-    this.active = false;
     this.open = false;
   }
   handleDisabledChange(value) {
     if (!value) {
-      this.active = false;
       this.open = false;
     }
   }
@@ -235,6 +240,12 @@ const Dropdown = class {
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
     this.setFilteredPlacements();
     this.reposition();
+    if (this.open) {
+      this.openHandler(this.open);
+    }
+    if (this.active) {
+      this.activeHandler(this.active);
+    }
   }
   componentDidLoad() {
     this.reposition();
@@ -250,12 +261,12 @@ const Dropdown = class {
     (_c = this.scrollerEl) === null || _c === void 0 ? void 0 : _c.removeEventListener("transitionstart", this.transitionStartHandler);
   }
   render() {
-    const { active, open, guid } = this;
-    return (index.h(index.Host, null, index.h("div", { class: "calcite-dropdown-trigger-container", id: `${guid}-menubutton`, onClick: this.openCalciteDropdown, onKeyDown: this.keyDownHandler, ref: this.setReferenceEl }, index.h("slot", { "aria-controls": `${guid}-menu`, "aria-expanded": dom.toAriaBoolean(active || open), "aria-haspopup": "menu", name: SLOTS.dropdownTrigger, onSlotchange: this.updateTriggers })), index.h("div", { "aria-hidden": dom.toAriaBoolean(!(active || open)), class: "calcite-dropdown-wrapper", ref: this.setFloatingEl }, index.h("div", { "aria-labelledby": `${guid}-menubutton`, class: {
+    const { open, guid } = this;
+    return (index.h(index.Host, null, index.h("div", { class: "calcite-dropdown-trigger-container", id: `${guid}-menubutton`, onClick: this.openCalciteDropdown, onKeyDown: this.keyDownHandler, ref: this.setReferenceEl }, index.h("slot", { "aria-controls": `${guid}-menu`, "aria-expanded": dom.toAriaBoolean(open), "aria-haspopup": "menu", name: SLOTS.dropdownTrigger, onSlotchange: this.updateTriggers })), index.h("div", { "aria-hidden": dom.toAriaBoolean(!open), class: "calcite-dropdown-wrapper", ref: this.setFloatingEl }, index.h("div", { "aria-labelledby": `${guid}-menubutton`, class: {
         ["calcite-dropdown-content"]: true,
         [floatingUi.FloatingCSS.animation]: true,
-        [floatingUi.FloatingCSS.animationActive]: active || open
-      }, id: `${guid}-menu`, onTransitionEnd: this.transitionEnd, ref: this.setScrollerEl, role: "menu" }, index.h("div", { hidden: !(open || active) }, index.h("slot", { onSlotchange: this.slotChangeHandler }))))));
+        [floatingUi.FloatingCSS.animationActive]: open
+      }, id: `${guid}-menu`, onTransitionEnd: this.transitionEnd, ref: this.setScrollerEl, role: "menu" }, index.h("div", { hidden: !open }, index.h("slot", { onSlotchange: this.updateGroups }))))));
   }
   //--------------------------------------------------------------------------
   //
@@ -274,8 +285,7 @@ const Dropdown = class {
     });
   }
   closeCalciteDropdownOnClick(event) {
-    const isOpen = !(this.open || this.active);
-    if (isOpen || event.composedPath().includes(this.el)) {
+    if (!this.open || event.composedPath().includes(this.el)) {
       return;
     }
     this.closeCalciteDropdown(false);
@@ -288,7 +298,6 @@ const Dropdown = class {
     if (event.composedPath().includes(this.el)) {
       return;
     }
-    this.active = false;
     this.open = false;
   }
   mouseEnterHandler() {
@@ -368,24 +377,25 @@ const Dropdown = class {
     let itemsToProcess = 0;
     let maxScrollerHeight = 0;
     let groupHeaderHeight;
-    if (maxItems > 0 && itemsToProcess < maxItems) {
-      this.items.forEach((item) => {
-        if (item.matches("calcite-dropdown-group calcite-dropdown-item:first-child")) {
-          if (isNaN(groupHeaderHeight)) {
-            groupHeaderHeight = item.offsetTop;
+    this.groups.forEach((group) => {
+      if (maxItems > 0 && itemsToProcess < maxItems) {
+        Array.from(group.children).forEach((item, index) => {
+          if (index === 0) {
+            if (isNaN(groupHeaderHeight)) {
+              groupHeaderHeight = item.offsetTop;
+            }
+            maxScrollerHeight += groupHeaderHeight;
           }
-          maxScrollerHeight += groupHeaderHeight;
-        }
-        if (itemsToProcess < maxItems) {
-          maxScrollerHeight += item.offsetHeight;
-          itemsToProcess += 1;
-        }
-      });
-    }
+          if (itemsToProcess < maxItems) {
+            maxScrollerHeight += item.offsetHeight;
+            itemsToProcess += 1;
+          }
+        });
+      }
+    });
     return maxScrollerHeight;
   }
   closeCalciteDropdown(focusTrigger = true) {
-    this.active = false;
     this.open = false;
     if (focusTrigger) {
       dom.focusElement(this.triggers[0]);
@@ -424,7 +434,7 @@ const Dropdown = class {
   get el() { return index.getElement(this); }
   static get watchers() { return {
     "active": ["activeHandler"],
-    "open": ["activeHandler"],
+    "open": ["openHandler"],
     "disabled": ["handleDisabledChange"],
     "flipPlacements": ["flipPlacementsHandler"],
     "maxItems": ["maxItemsHandler"],

package/dist/cjs/calcite-fab.cjs.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.540
+ * v1.0.0-next.543
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ddace81d.js');
-const dom = require('./dom-7a972f83.js');
-const interactive = require('./interactive-7f751988.js');
-require('./guid-44753eac.js');
+const index = require('./index-8528542e.js');
+const dom = require('./dom-6e56f2dc.js');
+const interactive = require('./interactive-9f1f58c7.js');
+require('./guid-c51c9e0a.js');
 
 const CSS = {
   button: "button"

package/dist/cjs/calcite-filter.cjs.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.540
+ * v1.0.0-next.543
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ddace81d.js');
-const dom = require('./dom-7a972f83.js');
-const interactive = require('./interactive-7f751988.js');
-const filter = require('./filter-c44b5955.js');
-const debounce = require('./debounce-17d75cb0.js');
-require('./guid-44753eac.js');
+const index = require('./index-8528542e.js');
+const dom = require('./dom-6e56f2dc.js');
+const interactive = require('./interactive-9f1f58c7.js');
+const filter = require('./filter-014c9a9e.js');
+const debounce = require('./debounce-e4d93984.js');
+require('./guid-c51c9e0a.js');
 
 const CSS = {
   container: "container",

package/dist/cjs/calcite-flow.cjs.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.540
+ * v1.0.0-next.543
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ddace81d.js');
-const observers = require('./observers-d1ad3104.js');
+const index = require('./index-8528542e.js');
+const observers = require('./observers-c5c8b954.js');
 
 const CSS = {
   frame: "frame",

package/dist/cjs/calcite-graph_2.cjs.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.540
+ * v1.0.0-next.543
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ddace81d.js');
-const guid = require('./guid-44753eac.js');
-const observers = require('./observers-d1ad3104.js');
-const dom = require('./dom-7a972f83.js');
-const math = require('./math-f1ed3643.js');
-const label = require('./label-66c5161f.js');
-const form = require('./form-351a39d4.js');
-const interactive = require('./interactive-7f751988.js');
+const index = require('./index-8528542e.js');
+const guid = require('./guid-c51c9e0a.js');
+const observers = require('./observers-c5c8b954.js');
+const dom = require('./dom-6e56f2dc.js');
+const math = require('./math-91308f73.js');
+const label = require('./label-01c65314.js');
+const form = require('./form-1e353995.js');
+const interactive = require('./interactive-9f1f58c7.js');
 
 /**
  * Calculate slope of the tangents

package/dist/cjs/calcite-handle.cjs.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.540
+ * v1.0.0-next.543
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ddace81d.js');
-const dom = require('./dom-7a972f83.js');
-require('./guid-44753eac.js');
+const index = require('./index-8528542e.js');
+const dom = require('./dom-6e56f2dc.js');
+require('./guid-c51c9e0a.js');
 
 const CSS = {
   handle: "handle",

package/dist/cjs/calcite-icon.cjs.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.540
+ * v1.0.0-next.543
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ddace81d.js');
-const dom = require('./dom-7a972f83.js');
-const observers = require('./observers-d1ad3104.js');
-require('./guid-44753eac.js');
+const index = require('./index-8528542e.js');
+const dom = require('./dom-6e56f2dc.js');
+const observers = require('./observers-c5c8b954.js');
+require('./guid-c51c9e0a.js');
 
 const CSS = {
   icon: "icon",

package/dist/cjs/calcite-inline-editable.cjs.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.540
+ * v1.0.0-next.543
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ddace81d.js');
-const dom = require('./dom-7a972f83.js');
-const label = require('./label-66c5161f.js');
-const observers = require('./observers-d1ad3104.js');
-const interactive = require('./interactive-7f751988.js');
-require('./guid-44753eac.js');
+const index = require('./index-8528542e.js');
+const dom = require('./dom-6e56f2dc.js');
+const label = require('./label-01c65314.js');
+const observers = require('./observers-c5c8b954.js');
+const interactive = require('./interactive-9f1f58c7.js');
+require('./guid-c51c9e0a.js');
 
 const CSS = {
   wrapper: "wrapper",

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

@@ -1,22 +1,22 @@
 /*!
  * 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.540
+ * v1.0.0-next.543
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ddace81d.js');
-const resources = require('./resources-67b8eec0.js');
-const label = require('./label-66c5161f.js');
-const form = require('./form-351a39d4.js');
-const floatingUi = require('./floating-ui-b254038e.js');
-const interactive = require('./interactive-7f751988.js');
-const dom = require('./dom-7a972f83.js');
-require('./locale-47b632ed.js');
-require('./key-c005f343.js');
-require('./guid-44753eac.js');
+const index = require('./index-8528542e.js');
+const resources = require('./resources-34d97c02.js');
+const label = require('./label-01c65314.js');
+const form = require('./form-1e353995.js');
+const floatingUi = require('./floating-ui-5841fd96.js');
+const interactive = require('./interactive-9f1f58c7.js');
+const dom = require('./dom-6e56f2dc.js');
+require('./locale-bbad01f3.js');
+require('./key-c8de60bc.js');
+require('./guid-c51c9e0a.js');
 
 const CSS = {
   menu: "menu-container",

package/dist/cjs/calcite-input-message.cjs.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.540
+ * v1.0.0-next.543
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ddace81d.js');
-const dom = require('./dom-7a972f83.js');
-require('./guid-44753eac.js');
+const index = require('./index-8528542e.js');
+const dom = require('./dom-6e56f2dc.js');
+require('./guid-c51c9e0a.js');
 
 var StatusIconDefaults;
 (function (StatusIconDefaults) {

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

@@ -1,22 +1,22 @@
 /*!
  * 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.540
+ * v1.0.0-next.543
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ddace81d.js');
-const dom = require('./dom-7a972f83.js');
-const label = require('./label-66c5161f.js');
-const form = require('./form-351a39d4.js');
-const locale = require('./locale-47b632ed.js');
-const key = require('./key-c005f343.js');
-const math = require('./math-f1ed3643.js');
-const observers = require('./observers-d1ad3104.js');
-const interactive = require('./interactive-7f751988.js');
-require('./guid-44753eac.js');
+const index = require('./index-8528542e.js');
+const dom = require('./dom-6e56f2dc.js');
+const label = require('./label-01c65314.js');
+const form = require('./form-1e353995.js');
+const locale = require('./locale-bbad01f3.js');
+const key = require('./key-c8de60bc.js');
+const math = require('./math-91308f73.js');
+const observers = require('./observers-c5c8b954.js');
+const interactive = require('./interactive-9f1f58c7.js');
+require('./guid-c51c9e0a.js');
 
 const CSS = {
   loader: "loader",