@esri/calcite-components 1.0.0-beta.90 → 1.0.0-beta.93

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

@@ -1,659 +1,704 @@
 /*!
  * 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-beta.90
+ * v1.0.0-beta.93
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-125082eb.js';
-import { t as toAriaBoolean, f as focusElement, d as getElementProp } from './dom-796bedfe.js';
-import { d as defaultMenuPlacement, f as filterComputedPlacements, c as connectFloatingUI, a as disconnectFloatingUI, F as FloatingCSS, p as positionFloatingUI } from './floating-ui-e347c202.js';
-import { c as createObserver } from './observers-20a0920e.js';
-import { u as updateHostInteraction } from './interactive-010acdfb.js';
-import { g as guid } from './guid-b66e2624.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-ebacd58f.js';
+import { t as toAriaBoolean, f as focusElement, d as getElementProp } from './dom-a762d6de.js';
+import { d as defaultMenuPlacement, f as filterComputedPlacements, c as connectFloatingUI, a as disconnectFloatingUI, F as FloatingCSS, p as positionFloatingUI } from './floating-ui-ae7423f2.js';
+import { c as createObserver } from './observers-78730da1.js';
+import { u as updateHostInteraction } from './interactive-ee876f5b.js';
+import { c as connectOpenCloseComponent, d as disconnectOpenCloseComponent } from './openCloseComponent-424d53d5.js';
+import { g as guid } from './guid-979aa261.js';
+import { i as isActivationKey } from './key-efdd4e0d.js';
+import './resources-3f24d3fc.js';
 
-const SLOTS = {
-  dropdownTrigger: "dropdown-trigger"
+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;inline-size:0;block-size:0;overflow:hidden}.calcite-dropdown-wrapper .calcite-floating-ui-anim{position:relative;-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);z-index:1;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;inline-size:unset;block-size:unset;overflow:unset}: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) {
-    registerInstance(this, hostRef);
-    this.calciteDropdownSelect = createEvent(this, "calciteDropdownSelect", 7);
-    this.calciteDropdownBeforeClose = createEvent(this, "calciteDropdownBeforeClose", 7);
-    this.calciteDropdownClose = createEvent(this, "calciteDropdownClose", 7);
-    this.calciteDropdownBeforeOpen = createEvent(this, "calciteDropdownBeforeOpen", 7);
-    this.calciteDropdownOpen = createEvent(this, "calciteDropdownOpen", 7);
-    //--------------------------------------------------------------------------
-    //
-    //  Public Properties
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * 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
-     */
-    this.disableCloseOnSelect = false;
-    /** is the dropdown disabled  */
-    this.disabled = false;
-    /**
-     specify the maximum number of calcite-dropdown-items to display before showing the scroller, must be greater than 0 -
-     this value does not include groupTitles passed to calcite-dropdown-group
-     */
-    this.maxItems = 0;
-    /** Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. */
-    this.overlayPositioning = "absolute";
-    /**
-     * Determines where the dropdown will be positioned relative to the button.
-     *
-     * @default "bottom-start"
-     */
-    this.placement = defaultMenuPlacement;
-    /** specify the scale of dropdown, defaults to m */
-    this.scale = "m";
-    /**
-     * **read-only** The currently selected items
-     *
-     * @readonly
-     */
-    this.selectedItems = [];
-    /** specify whether the dropdown is opened by hover or click of a trigger element */
-    this.type = "click";
-    this.items = [];
-    this.activeTransitionProp = "visibility";
-    this.mutationObserver = createObserver("mutation", () => this.updateItems());
-    this.resizeObserver = createObserver("resize", (entries) => this.resizeObserverCallback(entries));
-    this.guid = `calcite-dropdown-${guid()}`;
-    this.defaultAssignedElements = [];
-    //--------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    //--------------------------------------------------------------------------
-    this.slotChangeHandler = (event) => {
-      this.defaultAssignedElements = event.target.assignedElements({
-        flatten: true
-      });
-      this.updateItems();
-    };
-    this.setFilteredPlacements = () => {
-      const { el, flipPlacements } = this;
-      this.filteredFlipPlacements = flipPlacements
-        ? filterComputedPlacements(flipPlacements, el)
-        : null;
-    };
-    this.updateTriggers = (event) => {
-      this.triggers = event.target.assignedElements({
-        flatten: true
-      });
-      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])
-        .reduce((previousValue, currentValue) => [...previousValue, ...currentValue], []);
-      this.updateSelectedItems();
-      this.reposition();
-    };
-    this.resizeObserverCallback = (entries) => {
-      entries.forEach((entry) => {
-        const { target } = entry;
-        if (target === this.referenceEl) {
-          this.setDropdownWidth();
-        }
-        else if (target === this.scrollerEl) {
-          this.setMaxScrollerHeight();
-        }
-      });
-    };
-    this.setDropdownWidth = () => {
-      const { referenceEl, scrollerEl } = this;
-      const referenceElWidth = referenceEl === null || referenceEl === void 0 ? void 0 : referenceEl.clientWidth;
-      if (!referenceElWidth || !scrollerEl) {
-        return;
-      }
-      scrollerEl.style.minWidth = `${referenceElWidth}px`;
-    };
-    this.setMaxScrollerHeight = () => {
-      const { active, scrollerEl, open } = this;
-      const isOpen = !(active || open);
-      if (!scrollerEl || isOpen) {
-        return;
-      }
-      this.reposition();
-      const maxScrollerHeight = this.getMaxScrollerHeight();
-      scrollerEl.style.maxHeight = maxScrollerHeight > 0 ? `${maxScrollerHeight}px` : "";
-      this.reposition();
-    };
-    this.setScrollerEl = (scrollerEl) => {
-      this.resizeObserver.observe(scrollerEl);
-      this.scrollerEl = scrollerEl;
-      this.scrollerEl.addEventListener("transitionstart", this.transitionStartHandler);
-    };
-    this.transitionEnd = (event) => {
-      if (event.propertyName === this.activeTransitionProp && event.target === this.scrollerEl) {
-        this.open || this.active ? 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.setReferenceEl = (el) => {
-      this.referenceEl = el;
-      connectFloatingUI(this, this.referenceEl, this.floatingEl);
-      this.resizeObserver.observe(el);
-    };
-    this.setFloatingEl = (el) => {
-      this.floatingEl = el;
-      connectFloatingUI(this, this.referenceEl, this.floatingEl);
-    };
-    this.keyDownHandler = (event) => {
-      const target = event.target;
-      if (target !== this.referenceEl) {
-        return;
-      }
-      const key = event.key;
-      if ((this.open || this.active) && (key === "Escape" || (event.shiftKey && key === "Tab"))) {
-        this.closeCalciteDropdown();
-        return;
-      }
-      switch (key) {
-        case " ":
-        case "Enter":
-          this.openCalciteDropdown();
-          break;
-        case "Escape":
-          this.closeCalciteDropdown();
-          break;
-      }
-    };
-    this.focusOnFirstActiveOrFirstItem = () => {
-      this.getFocusableElement(this.items.find((item) => item.active) || this.items[0]);
-    };
-    this.toggleOpenEnd = () => {
-      this.focusOnFirstActiveOrFirstItem();
-      this.el.removeEventListener("calciteDropdownOpen", this.toggleOpenEnd);
-    };
-    this.openCalciteDropdown = () => {
-      this.active = !this.active;
-      this.open = !this.open;
-      if (this.active || this.open) {
-        this.el.addEventListener("calciteDropdownOpen", this.toggleOpenEnd);
-      }
-    };
-  }
-  activeHandler() {
-    if (!this.disabled) {
-      this.reposition();
-      return;
-    }
-    this.active = false;
-    this.open = false;
-  }
-  handleDisabledChange(value) {
-    if (!value) {
-      this.active = false;
-      this.open = false;
-    }
-  }
-  flipPlacementsHandler() {
-    this.setFilteredPlacements();
-  }
-  maxItemsHandler() {
-    this.setMaxScrollerHeight();
-  }
-  overlayPositioningHandler() {
-    this.reposition();
-  }
-  placementHandler() {
-    this.reposition();
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  //--------------------------------------------------------------------------
-  connectedCallback() {
-    var _a;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
-    this.setFilteredPlacements();
-    this.reposition();
-  }
-  componentDidLoad() {
-    this.reposition();
-  }
-  componentDidRender() {
-    updateHostInteraction(this);
-  }
-  disconnectedCallback() {
-    var _a, _b, _c;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-    disconnectFloatingUI(this, this.referenceEl, this.floatingEl);
-    (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
-    (_c = this.scrollerEl) === null || _c === void 0 ? void 0 : _c.removeEventListener("transitionstart", this.transitionStartHandler);
-  }
-  render() {
-    const { active, open, guid } = this;
-    return (h(Host, null, h("div", { class: "calcite-dropdown-trigger-container", id: `${guid}-menubutton`, onClick: this.openCalciteDropdown, onKeyDown: this.keyDownHandler, ref: this.setReferenceEl }, h("slot", { "aria-controls": `${guid}-menu`, "aria-expanded": toAriaBoolean(active || open), "aria-haspopup": "menu", name: SLOTS.dropdownTrigger, onSlotchange: this.updateTriggers })), h("div", { "aria-hidden": toAriaBoolean(!(active || open)), class: "calcite-dropdown-wrapper", ref: this.setFloatingEl }, h("div", { "aria-labelledby": `${guid}-menubutton`, class: {
-        ["calcite-dropdown-content"]: true,
-        [FloatingCSS.animation]: true,
-        [FloatingCSS.animationActive]: active || open
-      }, id: `${guid}-menu`, onTransitionEnd: this.transitionEnd, ref: this.setScrollerEl, role: "menu" }, h("div", { hidden: !(open || active) }, h("slot", { onSlotchange: this.slotChangeHandler }))))));
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Public Methods
-  //
-  //--------------------------------------------------------------------------
-  /** Updates the position of the component. */
-  async reposition() {
-    const { floatingEl, referenceEl, placement, overlayPositioning } = this;
-    return positionFloatingUI({
-      floatingEl,
-      referenceEl,
-      overlayPositioning,
-      placement,
-      type: "menu"
-    });
-  }
-  closeCalciteDropdownOnClick(event) {
-    const isOpen = !(this.open || this.active);
-    if (isOpen || event.composedPath().includes(this.el)) {
-      return;
-    }
-    this.closeCalciteDropdown(false);
-  }
-  closeCalciteDropdownOnEvent(event) {
-    this.closeCalciteDropdown();
-    event.stopPropagation();
-  }
-  closeCalciteDropdownOnOpenEvent(event) {
-    if (event.composedPath().includes(this.el)) {
-      return;
-    }
-    this.active = false;
-    this.open = false;
-  }
-  mouseEnterHandler() {
-    if (this.type === "hover") {
-      this.openCalciteDropdown();
-    }
-  }
-  mouseLeaveHandler() {
-    if (this.type === "hover") {
-      this.closeCalciteDropdown();
-    }
-  }
-  calciteInternalDropdownItemKeyEvent(event) {
-    const { keyboardEvent } = event.detail;
-    // handle edge
-    const target = keyboardEvent.target;
-    const itemToFocus = target.nodeName !== "A" ? target : target.parentNode;
-    const isFirstItem = this.itemIndex(itemToFocus) === 0;
-    const isLastItem = this.itemIndex(itemToFocus) === this.items.length - 1;
-    switch (keyboardEvent.key) {
-      case "Tab":
-        if (isLastItem && !keyboardEvent.shiftKey) {
-          this.closeCalciteDropdown();
-        }
-        else if (isFirstItem && keyboardEvent.shiftKey) {
-          this.closeCalciteDropdown();
-        }
-        else if (keyboardEvent.shiftKey) {
-          this.focusPrevItem(itemToFocus);
-        }
-        else {
-          this.focusNextItem(itemToFocus);
-        }
-        break;
-      case "ArrowDown":
-        this.focusNextItem(itemToFocus);
-        break;
-      case "ArrowUp":
-        this.focusPrevItem(itemToFocus);
-        break;
-      case "Home":
-        this.focusFirstItem();
-        break;
-      case "End":
-        this.focusLastItem();
-        break;
-    }
-    event.stopPropagation();
-  }
-  handleItemSelect(event) {
-    this.updateSelectedItems();
-    event.stopPropagation();
-    this.calciteDropdownSelect.emit();
-    if (!this.disableCloseOnSelect ||
-      event.detail.requestedDropdownGroup.selectionMode === "none") {
-      this.closeCalciteDropdown();
-    }
-    event.stopPropagation();
-  }
-  onBeforeOpen() {
-    this.calciteDropdownBeforeOpen.emit();
-  }
-  onOpen() {
-    this.calciteDropdownOpen.emit();
-  }
-  onBeforeClose() {
-    this.calciteDropdownBeforeClose.emit();
-  }
-  onClose() {
-    this.calciteDropdownClose.emit();
-  }
-  updateSelectedItems() {
-    this.selectedItems = this.items.filter((item) => item.active);
-  }
-  getMaxScrollerHeight() {
-    const { maxItems } = this;
-    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;
-          }
-          maxScrollerHeight += groupHeaderHeight;
-        }
-        if (itemsToProcess < maxItems) {
-          maxScrollerHeight += item.offsetHeight;
-          itemsToProcess += 1;
-        }
-      });
-    }
-    return maxScrollerHeight;
-  }
-  closeCalciteDropdown(focusTrigger = true) {
-    this.active = false;
-    this.open = false;
-    if (focusTrigger) {
-      focusElement(this.triggers[0]);
-    }
-  }
-  focusFirstItem() {
-    const firstItem = this.items[0];
-    this.getFocusableElement(firstItem);
-  }
-  focusLastItem() {
-    const lastItem = this.items[this.items.length - 1];
-    this.getFocusableElement(lastItem);
-  }
-  focusNextItem(el) {
-    const index = this.itemIndex(el);
-    const nextItem = this.items[index + 1] || this.items[0];
-    this.getFocusableElement(nextItem);
-  }
-  focusPrevItem(el) {
-    const index = this.itemIndex(el);
-    const prevItem = this.items[index - 1] || this.items[this.items.length - 1];
-    this.getFocusableElement(prevItem);
-  }
-  itemIndex(el) {
-    return this.items.indexOf(el);
-  }
-  getFocusableElement(item) {
-    if (!item) {
-      return;
-    }
-    const target = item.attributes.isLink
-      ? item.shadowRoot.querySelector("a")
-      : item;
-    focusElement(target);
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "active": ["activeHandler"],
-    "open": ["activeHandler"],
-    "disabled": ["handleDisabledChange"],
-    "flipPlacements": ["flipPlacementsHandler"],
-    "maxItems": ["maxItemsHandler"],
-    "overlayPositioning": ["overlayPositioningHandler"],
-    "placement": ["placementHandler"]
-  }; }
-};
+const Dropdown = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteDropdownSelect = createEvent(this, "calciteDropdownSelect", 6);
+    this.calciteDropdownBeforeClose = createEvent(this, "calciteDropdownBeforeClose", 6);
+    this.calciteDropdownClose = createEvent(this, "calciteDropdownClose", 6);
+    this.calciteDropdownBeforeOpen = createEvent(this, "calciteDropdownBeforeOpen", 6);
+    this.calciteDropdownOpen = createEvent(this, "calciteDropdownOpen", 6);
+    //--------------------------------------------------------------------------
+    //
+    //  Public Properties
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * 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
+     */
+    this.disableCloseOnSelect = false;
+    /** is the dropdown disabled  */
+    this.disabled = false;
+    /**
+     specify the maximum number of calcite-dropdown-items to display before showing the scroller, must be greater than 0 -
+     this value does not include groupTitles passed to calcite-dropdown-group
+     */
+    this.maxItems = 0;
+    /**
+     * Determines the type of positioning to use for the overlaid content.
+     *
+     * Using the "absolute" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The "fixed" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is "fixed".
+     *
+     */
+    this.overlayPositioning = "absolute";
+    /**
+     * Determines where the dropdown will be positioned relative to the button.
+     *
+     * @default "bottom-start"
+     */
+    this.placement = defaultMenuPlacement;
+    /** specify the scale of dropdown, defaults to m */
+    this.scale = "m";
+    /**
+     * **read-only** The currently selected items
+     *
+     * @readonly
+     */
+    this.selectedItems = [];
+    /** specify whether the dropdown is opened by hover or click of a trigger element */
+    this.type = "click";
+    this.items = [];
+    this.groups = [];
+    this.mutationObserver = createObserver("mutation", () => this.updateItems());
+    this.resizeObserver = createObserver("resize", (entries) => this.resizeObserverCallback(entries));
+    this.openTransitionProp = "visibility";
+    this.guid = `calcite-dropdown-${guid()}`;
+    this.defaultAssignedElements = [];
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    this.slotChangeHandler = (event) => {
+      this.defaultAssignedElements = event.target.assignedElements({
+        flatten: true
+      });
+      this.updateItems();
+    };
+    this.setFilteredPlacements = () => {
+      const { el, flipPlacements } = this;
+      this.filteredFlipPlacements = flipPlacements
+        ? filterComputedPlacements(flipPlacements, el)
+        : null;
+    };
+    this.updateTriggers = (event) => {
+      this.triggers = event.target.assignedElements({
+        flatten: true
+      });
+      this.reposition();
+    };
+    this.updateItems = () => {
+      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;
+        if (target === this.referenceEl) {
+          this.setDropdownWidth();
+        }
+        else if (target === this.scrollerEl) {
+          this.setMaxScrollerHeight();
+        }
+      });
+    };
+    this.setDropdownWidth = () => {
+      const { referenceEl, scrollerEl } = this;
+      const referenceElWidth = referenceEl === null || referenceEl === void 0 ? void 0 : referenceEl.clientWidth;
+      if (!referenceElWidth || !scrollerEl) {
+        return;
+      }
+      scrollerEl.style.minWidth = `${referenceElWidth}px`;
+    };
+    this.setMaxScrollerHeight = () => {
+      const { scrollerEl } = this;
+      if (!scrollerEl) {
+        return;
+      }
+      this.reposition();
+      const maxScrollerHeight = this.getMaxScrollerHeight();
+      scrollerEl.style.maxHeight = maxScrollerHeight > 0 ? `${maxScrollerHeight}px` : "";
+      this.reposition();
+    };
+    this.setScrollerAndTransitionEl = (el) => {
+      this.resizeObserver.observe(el);
+      this.scrollerEl = el;
+      this.transitionEl = el;
+      connectOpenCloseComponent(this);
+    };
+    this.setReferenceEl = (el) => {
+      this.referenceEl = el;
+      connectFloatingUI(this, this.referenceEl, this.floatingEl);
+      this.resizeObserver.observe(el);
+    };
+    this.setFloatingEl = (el) => {
+      this.floatingEl = el;
+      connectFloatingUI(this, this.referenceEl, this.floatingEl);
+    };
+    this.keyDownHandler = (event) => {
+      const target = event.target;
+      if (target !== this.referenceEl) {
+        return;
+      }
+      const { defaultPrevented, key } = event;
+      if (defaultPrevented) {
+        return;
+      }
+      if (this.open) {
+        if (key === "Escape") {
+          this.closeCalciteDropdown();
+          event.preventDefault();
+          return;
+        }
+        else if (event.shiftKey && key === "Tab") {
+          this.closeCalciteDropdown();
+          event.preventDefault();
+          return;
+        }
+      }
+      if (isActivationKey(key)) {
+        this.openCalciteDropdown();
+        event.preventDefault();
+      }
+      else if (key === "Escape") {
+        this.closeCalciteDropdown();
+        event.preventDefault();
+      }
+    };
+    this.focusOnFirstActiveOrFirstItem = () => {
+      this.getFocusableElement(this.items.find((item) => item.selected) || this.items[0]);
+    };
+    this.toggleOpenEnd = () => {
+      this.focusOnFirstActiveOrFirstItem();
+      this.el.removeEventListener("calciteDropdownOpen", this.toggleOpenEnd);
+    };
+    this.openCalciteDropdown = () => {
+      this.open = !this.open;
+      if (this.open) {
+        this.el.addEventListener("calciteDropdownOpen", this.toggleOpenEnd);
+      }
+    };
+  }
+  activeHandler(value) {
+    this.open = value;
+  }
+  openHandler(value) {
+    if (!this.disabled) {
+      this.reposition();
+      this.active = value;
+      return;
+    }
+    this.open = false;
+  }
+  handleDisabledChange(value) {
+    if (!value) {
+      this.open = false;
+    }
+  }
+  flipPlacementsHandler() {
+    this.setFilteredPlacements();
+    this.reposition();
+  }
+  maxItemsHandler() {
+    this.setMaxScrollerHeight();
+  }
+  overlayPositioningHandler() {
+    this.reposition();
+  }
+  placementHandler() {
+    this.reposition();
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  connectedCallback() {
+    var _a;
+    (_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);
+    }
+    connectOpenCloseComponent(this);
+  }
+  componentDidLoad() {
+    this.reposition();
+  }
+  componentDidRender() {
+    updateHostInteraction(this);
+  }
+  disconnectedCallback() {
+    var _a, _b;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    disconnectFloatingUI(this, this.referenceEl, this.floatingEl);
+    (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+    disconnectOpenCloseComponent(this);
+  }
+  render() {
+    const { open, guid } = this;
+    return (h(Host, null, h("div", { class: "calcite-dropdown-trigger-container", id: `${guid}-menubutton`, onClick: this.openCalciteDropdown, onKeyDown: this.keyDownHandler, ref: this.setReferenceEl }, h("slot", { "aria-controls": `${guid}-menu`, "aria-expanded": toAriaBoolean(open), "aria-haspopup": "menu", name: SLOTS.dropdownTrigger, onSlotchange: this.updateTriggers })), h("div", { "aria-hidden": toAriaBoolean(!open), class: "calcite-dropdown-wrapper", ref: this.setFloatingEl }, h("div", { "aria-labelledby": `${guid}-menubutton`, class: {
+        ["calcite-dropdown-content"]: true,
+        [FloatingCSS.animation]: true,
+        [FloatingCSS.animationActive]: open
+      }, id: `${guid}-menu`, ref: this.setScrollerAndTransitionEl, role: "menu" }, h("slot", { onSlotchange: this.updateGroups })))));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  //--------------------------------------------------------------------------
+  /** Updates the position of the component. */
+  async reposition() {
+    const { floatingEl, referenceEl, placement, overlayPositioning, filteredFlipPlacements } = this;
+    return positionFloatingUI({
+      floatingEl,
+      referenceEl,
+      overlayPositioning,
+      placement,
+      flipPlacements: filteredFlipPlacements,
+      type: "menu"
+    });
+  }
+  closeCalciteDropdownOnClick(event) {
+    if (!this.open || event.composedPath().includes(this.el)) {
+      return;
+    }
+    this.closeCalciteDropdown(false);
+  }
+  closeCalciteDropdownOnEvent(event) {
+    this.closeCalciteDropdown();
+    event.stopPropagation();
+  }
+  closeCalciteDropdownOnOpenEvent(event) {
+    if (event.composedPath().includes(this.el)) {
+      return;
+    }
+    this.open = false;
+  }
+  mouseEnterHandler() {
+    if (this.type === "hover") {
+      this.openCalciteDropdown();
+    }
+  }
+  mouseLeaveHandler() {
+    if (this.type === "hover") {
+      this.closeCalciteDropdown();
+    }
+  }
+  calciteInternalDropdownItemKeyEvent(event) {
+    const { keyboardEvent } = event.detail;
+    // handle edge
+    const target = keyboardEvent.target;
+    const itemToFocus = target.nodeName !== "A" ? target : target.parentNode;
+    const isFirstItem = this.itemIndex(itemToFocus) === 0;
+    const isLastItem = this.itemIndex(itemToFocus) === this.items.length - 1;
+    switch (keyboardEvent.key) {
+      case "Tab":
+        if (isLastItem && !keyboardEvent.shiftKey) {
+          this.closeCalciteDropdown();
+        }
+        else if (isFirstItem && keyboardEvent.shiftKey) {
+          this.closeCalciteDropdown();
+        }
+        else if (keyboardEvent.shiftKey) {
+          this.focusPrevItem(itemToFocus);
+        }
+        else {
+          this.focusNextItem(itemToFocus);
+        }
+        break;
+      case "ArrowDown":
+        this.focusNextItem(itemToFocus);
+        break;
+      case "ArrowUp":
+        this.focusPrevItem(itemToFocus);
+        break;
+      case "Home":
+        this.focusFirstItem();
+        break;
+      case "End":
+        this.focusLastItem();
+        break;
+    }
+    event.stopPropagation();
+  }
+  handleItemSelect(event) {
+    this.updateSelectedItems();
+    event.stopPropagation();
+    this.calciteDropdownSelect.emit({
+      item: event.detail.requestedDropdownItem
+    });
+    if (!this.disableCloseOnSelect ||
+      event.detail.requestedDropdownGroup.selectionMode === "none") {
+      this.closeCalciteDropdown();
+    }
+    event.stopPropagation();
+  }
+  onBeforeOpen() {
+    this.calciteDropdownBeforeOpen.emit();
+  }
+  onOpen() {
+    this.calciteDropdownOpen.emit();
+  }
+  onBeforeClose() {
+    this.calciteDropdownBeforeClose.emit();
+  }
+  onClose() {
+    this.calciteDropdownClose.emit();
+  }
+  updateSelectedItems() {
+    this.selectedItems = this.items.filter((item) => item.selected);
+  }
+  getMaxScrollerHeight() {
+    const { maxItems, items } = this;
+    let itemsToProcess = 0;
+    let maxScrollerHeight = 0;
+    let groupHeaderHeight;
+    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;
+          }
+          if (itemsToProcess < maxItems) {
+            maxScrollerHeight += item.offsetHeight;
+            itemsToProcess += 1;
+          }
+        });
+      }
+    });
+    return items.length > maxItems ? maxScrollerHeight : 0;
+  }
+  closeCalciteDropdown(focusTrigger = true) {
+    this.open = false;
+    if (focusTrigger) {
+      focusElement(this.triggers[0]);
+    }
+  }
+  focusFirstItem() {
+    const firstItem = this.items[0];
+    this.getFocusableElement(firstItem);
+  }
+  focusLastItem() {
+    const lastItem = this.items[this.items.length - 1];
+    this.getFocusableElement(lastItem);
+  }
+  focusNextItem(el) {
+    const index = this.itemIndex(el);
+    const nextItem = this.items[index + 1] || this.items[0];
+    this.getFocusableElement(nextItem);
+  }
+  focusPrevItem(el) {
+    const index = this.itemIndex(el);
+    const prevItem = this.items[index - 1] || this.items[this.items.length - 1];
+    this.getFocusableElement(prevItem);
+  }
+  itemIndex(el) {
+    return this.items.indexOf(el);
+  }
+  getFocusableElement(item) {
+    if (!item) {
+      return;
+    }
+    const target = item.attributes.isLink
+      ? item.shadowRoot.querySelector("a")
+      : item;
+    focusElement(target);
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "active": ["activeHandler"],
+    "open": ["openHandler"],
+    "disabled": ["handleDisabledChange"],
+    "flipPlacements": ["flipPlacementsHandler"],
+    "maxItems": ["maxItemsHandler"],
+    "overlayPositioning": ["overlayPositioningHandler"],
+    "placement": ["placementHandler"]
+  }; }
+};
 Dropdown.style = dropdownCss;
 
-const CSS$1 = {
-  containerSmall: "container--s",
-  containerMedium: "container--m",
-  containerLarge: "container--l"
+const CSS$1 = {
+  containerSmall: "container--s",
+  containerMedium: "container--m",
+  containerLarge: "container--l"
 };
 
 const dropdownGroupCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--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{display:block}.container{text-align:start}.container--s{font-size:var(--calcite-font-size--2);line-height:1rem}.container--s .dropdown-title{padding:0.5rem}.container--m{font-size:var(--calcite-font-size--1);line-height:1rem}.container--m .dropdown-title{padding:0.75rem}.container--l{font-size:var(--calcite-font-size-0);line-height:1.25rem}.container--l .dropdown-title{padding:1rem}.dropdown-title{-webkit-margin-after:-1px;margin-block-end:-1px;display:block;cursor:default;overflow-wrap:break-word;border-width:0px;border-block-end-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);font-weight:var(--calcite-font-weight-bold);color:var(--calcite-ui-text-2)}.dropdown-separator{display:block;block-size:1px;background-color:var(--calcite-ui-border-3)}";
 
-const DropdownGroup = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.calciteInternalDropdownItemChange = createEvent(this, "calciteInternalDropdownItemChange", 7);
-    /**
-      specify the selection mode - multi (allow any number of (or no) active items), single (allow and require one active item),
-     none (no active items), defaults to single
-     */
-    this.selectionMode = "single";
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  //--------------------------------------------------------------------------
-  componentWillLoad() {
-    this.groupPosition = this.getGroupPosition();
-  }
-  render() {
-    const scale = this.scale || getElementProp(this.el, "scale", "m");
-    const groupTitle = this.groupTitle ? (h("span", { "aria-hidden": "true", class: "dropdown-title" }, this.groupTitle)) : null;
-    const dropdownSeparator = this.groupPosition > 0 ? h("div", { class: "dropdown-separator", role: "separator" }) : null;
-    return (h(Host, { "aria-label": this.groupTitle, role: "group" }, h("div", { class: {
-        container: true,
-        [CSS$1.containerSmall]: scale === "s",
-        [CSS$1.containerMedium]: scale === "m",
-        [CSS$1.containerLarge]: scale === "l"
-      }, title: this.groupTitle }, dropdownSeparator, groupTitle, h("slot", null))));
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Event Listeners
-  //
-  //--------------------------------------------------------------------------
-  updateActiveItemOnChange(event) {
-    this.requestedDropdownGroup = event.detail.requestedDropdownGroup;
-    this.requestedDropdownItem = event.detail.requestedDropdownItem;
-    this.calciteInternalDropdownItemChange.emit({
-      requestedDropdownGroup: this.requestedDropdownGroup,
-      requestedDropdownItem: this.requestedDropdownItem
-    });
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  //--------------------------------------------------------------------------
-  getGroupPosition() {
-    return Array.prototype.indexOf.call(this.el.parentElement.querySelectorAll("calcite-dropdown-group"), this.el);
-  }
-  get el() { return getElement(this); }
-};
+const DropdownGroup = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteInternalDropdownItemChange = createEvent(this, "calciteInternalDropdownItemChange", 6);
+    /**
+      specify the selection mode - multi (allow any number of (or no) active items), single (allow and require one active item),
+     none (no active items), defaults to single
+     */
+    this.selectionMode = "single";
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  componentWillLoad() {
+    this.groupPosition = this.getGroupPosition();
+  }
+  render() {
+    const scale = this.scale || getElementProp(this.el, "scale", "m");
+    const groupTitle = this.groupTitle ? (h("span", { "aria-hidden": "true", class: "dropdown-title" }, this.groupTitle)) : null;
+    const dropdownSeparator = this.groupPosition > 0 ? h("div", { class: "dropdown-separator", role: "separator" }) : null;
+    return (h(Host, { "aria-label": this.groupTitle, role: "group" }, h("div", { class: {
+        container: true,
+        [CSS$1.containerSmall]: scale === "s",
+        [CSS$1.containerMedium]: scale === "m",
+        [CSS$1.containerLarge]: scale === "l"
+      }, title: this.groupTitle }, dropdownSeparator, groupTitle, h("slot", null))));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Event Listeners
+  //
+  //--------------------------------------------------------------------------
+  updateActiveItemOnChange(event) {
+    this.requestedDropdownGroup = event.detail.requestedDropdownGroup;
+    this.requestedDropdownItem = event.detail.requestedDropdownItem;
+    this.calciteInternalDropdownItemChange.emit({
+      requestedDropdownGroup: this.requestedDropdownGroup,
+      requestedDropdownItem: this.requestedDropdownItem
+    });
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  getGroupPosition() {
+    return Array.prototype.indexOf.call(this.el.parentElement.querySelectorAll("calcite-dropdown-group"), this.el);
+  }
+  get el() { return getElement(this); }
+};
 DropdownGroup.style = dropdownGroupCss;
 
-const CSS = {
-  containerLink: "container--link",
-  containerSmall: "container--s",
-  containerMedium: "container--m",
-  containerLarge: "container--l",
-  containerMulti: "container--multi-selection",
-  containerSingle: "container--single-selection",
-  containerNone: "container--none-selection"
+const CSS = {
+  containerLink: "container--link",
+  containerSmall: "container--s",
+  containerMedium: "container--m",
+  containerLarge: "container--l",
+  containerMulti: "container--multi-selection",
+  containerSingle: "container--single-selection",
+  containerNone: "container--none-selection"
 };
 
-const dropdownItemCss = "@-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}.container--s{padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem;-webkit-padding-end:0.5rem;padding-inline-end:0.5rem;-webkit-padding-start:1.5rem;padding-inline-start:1.5rem}.container--m{padding-block:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem;-webkit-padding-end:0.75rem;padding-inline-end:0.75rem;-webkit-padding-start:2rem;padding-inline-start:2rem}.container--l{padding-block:0.75rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;-webkit-padding-end:1rem;padding-inline-end:1rem;-webkit-padding-start:2.5rem;padding-inline-start:2.5rem}.container--s.container--none-selection{-webkit-padding-start:0.25rem;padding-inline-start:0.25rem}.container--s.container--none-selection .dropdown-link{-webkit-padding-start:0px;padding-inline-start:0px}.container--m.container--none-selection{-webkit-padding-start:0.5rem;padding-inline-start:0.5rem}.container--m.container--none-selection .dropdown-link{-webkit-padding-start:0px;padding-inline-start:0px}.container--l.container--none-selection{-webkit-padding-start:0.75rem;padding-inline-start:0.75rem}.container--l.container--none-selection .dropdown-link{-webkit-padding-start:0px;padding-inline-start:0px}:host{position:relative;display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center}.container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;cursor:pointer;-ms-flex-align:center;align-items:center;color:var(--calcite-ui-text-3);-webkit-text-decoration-line:none;text-decoration-line:none;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);text-align:start}.dropdown-item-content{-ms-flex:1 1 auto;flex:1 1 auto;-webkit-padding-end:auto;padding-inline-end:auto;-webkit-padding-start:0.25rem;padding-inline-start:0.25rem}:host,.container--link a{outline-color:transparent}:host(:focus){outline:2px solid transparent;outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}.container--link{padding:0px}.container--link a{position:relative;display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;cursor:pointer;-ms-flex-align:center;align-items:center;color:var(--calcite-ui-text-3);-webkit-text-decoration-line:none;text-decoration-line:none;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.container--s .dropdown-link{padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem;-webkit-padding-end:0.5rem;padding-inline-end:0.5rem;-webkit-padding-start:1.5rem;padding-inline-start:1.5rem}.container--m .dropdown-link{padding-block:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem;-webkit-padding-end:0.75rem;padding-inline-end:0.75rem;-webkit-padding-start:2rem;padding-inline-start:2rem}.container--l .dropdown-link{padding-block:0.75rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;-webkit-padding-end:1rem;padding-inline-end:1rem;-webkit-padding-start:2.5rem;padding-inline-start:2.5rem}:host(:hover) .container,:host(:active) .container{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-text-1);-webkit-text-decoration-line:none;text-decoration-line:none}:host(:hover) .container--link .dropdown-link,:host(:active) .container--link .dropdown-link{color:var(--calcite-ui-text-1)}:host(:focus) .container{color:var(--calcite-ui-text-1);-webkit-text-decoration-line:none;text-decoration-line:none}:host(:active) .container{background-color:var(--calcite-ui-foreground-3)}:host(:hover) .container:before,:host(:active) .container:before,:host(:focus) .container:before{opacity:1}:host([active]) .container:not(.container--none-selection),:host([active]) .container--link .dropdown-link{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1)}:host([active]) .container:not(.container--none-selection):before,:host([active]) .container--link .dropdown-link:before{opacity:1;color:var(--calcite-ui-brand)}:host([active]) .container:not(.container--none-selection) calcite-icon,:host([active]) .container--link .dropdown-link calcite-icon{color:var(--calcite-ui-brand)}.container--multi-selection:before,.container--none-selection:before{display:none}.container--s:before{inset-inline-start:0.5rem}.container--m:before{inset-inline-start:0.75rem}.container--l:before{inset-inline-start:1rem}.dropdown-item-icon{position:absolute;opacity:0;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transform:scale(0.9);transform:scale(0.9)}.container--s .dropdown-item-icon{inset-inline-start:0.25rem}.container--m .dropdown-item-icon{inset-inline-start:0.5rem}.container--l .dropdown-item-icon{inset-inline-start:0.75rem}:host(:hover) .dropdown-item-icon{color:var(--calcite-ui-border-1);opacity:1}:host([active]) .dropdown-item-icon{color:var(--calcite-ui-brand);opacity:1}.container--s .dropdown-item-icon-start{-webkit-margin-end:0.5rem;margin-inline-end:0.5rem;-webkit-margin-start:0.25rem;margin-inline-start:0.25rem}.container--s .dropdown-item-icon-end{-webkit-margin-start:0.5rem;margin-inline-start:0.5rem}.container--m .dropdown-item-icon-start{-webkit-margin-end:0.75rem;margin-inline-end:0.75rem;-webkit-margin-start:0.25rem;margin-inline-start:0.25rem}.container--m .dropdown-item-icon-end{-webkit-margin-start:0.75rem;margin-inline-start:0.75rem}.container--l .dropdown-item-icon-start{-webkit-margin-end:1rem;margin-inline-end:1rem;-webkit-margin-start:0.25rem;margin-inline-start:0.25rem}.container--l .dropdown-item-icon-end{-webkit-margin-start:1rem;margin-inline-start:1rem}";
+const dropdownItemCss = "@-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}.container--s{padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem;-webkit-padding-end:0.5rem;padding-inline-end:0.5rem;-webkit-padding-start:1.5rem;padding-inline-start:1.5rem}.container--m{padding-block:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem;-webkit-padding-end:0.75rem;padding-inline-end:0.75rem;-webkit-padding-start:2rem;padding-inline-start:2rem}.container--l{padding-block:0.75rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;-webkit-padding-end:1rem;padding-inline-end:1rem;-webkit-padding-start:2.5rem;padding-inline-start:2.5rem}.container--s.container--none-selection{-webkit-padding-start:0.25rem;padding-inline-start:0.25rem}.container--s.container--none-selection .dropdown-link{-webkit-padding-start:0px;padding-inline-start:0px}.container--m.container--none-selection{-webkit-padding-start:0.5rem;padding-inline-start:0.5rem}.container--m.container--none-selection .dropdown-link{-webkit-padding-start:0px;padding-inline-start:0px}.container--l.container--none-selection{-webkit-padding-start:0.75rem;padding-inline-start:0.75rem}.container--l.container--none-selection .dropdown-link{-webkit-padding-start:0px;padding-inline-start:0px}:host{position:relative;display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center}.container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;cursor:pointer;-ms-flex-align:center;align-items:center;color:var(--calcite-ui-text-3);-webkit-text-decoration-line:none;text-decoration-line:none;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);text-align:start}.dropdown-item-content{-ms-flex:1 1 auto;flex:1 1 auto;-webkit-padding-end:auto;padding-inline-end:auto;-webkit-padding-start:0.25rem;padding-inline-start:0.25rem}:host,.container--link a{outline-color:transparent}:host(:focus){outline:2px solid transparent;outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}.container--link{padding:0px}.container--link a{position:relative;display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;cursor:pointer;-ms-flex-align:center;align-items:center;color:var(--calcite-ui-text-3);-webkit-text-decoration-line:none;text-decoration-line:none;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.container--s .dropdown-link{padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem;-webkit-padding-end:0.5rem;padding-inline-end:0.5rem;-webkit-padding-start:1.5rem;padding-inline-start:1.5rem}.container--m .dropdown-link{padding-block:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem;-webkit-padding-end:0.75rem;padding-inline-end:0.75rem;-webkit-padding-start:2rem;padding-inline-start:2rem}.container--l .dropdown-link{padding-block:0.75rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;-webkit-padding-end:1rem;padding-inline-end:1rem;-webkit-padding-start:2.5rem;padding-inline-start:2.5rem}:host(:hover) .container,:host(:active) .container{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-text-1);-webkit-text-decoration-line:none;text-decoration-line:none}:host(:hover) .container--link .dropdown-link,:host(:active) .container--link .dropdown-link{color:var(--calcite-ui-text-1)}:host(:focus) .container{color:var(--calcite-ui-text-1);-webkit-text-decoration-line:none;text-decoration-line:none}:host(:active) .container{background-color:var(--calcite-ui-foreground-3)}:host(:hover) .container:before,:host(:active) .container:before,:host(:focus) .container:before{opacity:1}:host([selected]) .container:not(.container--none-selection),:host([selected]) .container--link .dropdown-link{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1)}:host([selected]) .container:not(.container--none-selection):before,:host([selected]) .container--link .dropdown-link:before{opacity:1;color:var(--calcite-ui-brand)}:host([selected]) .container:not(.container--none-selection) calcite-icon,:host([selected]) .container--link .dropdown-link calcite-icon{color:var(--calcite-ui-brand)}.container--multi-selection:before,.container--none-selection:before{display:none}.container--s:before{inset-inline-start:0.5rem}.container--m:before{inset-inline-start:0.75rem}.container--l:before{inset-inline-start:1rem}.dropdown-item-icon{position:absolute;opacity:0;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transform:scale(0.9);transform:scale(0.9)}.container--s .dropdown-item-icon{inset-inline-start:0.25rem}.container--m .dropdown-item-icon{inset-inline-start:0.5rem}.container--l .dropdown-item-icon{inset-inline-start:0.75rem}:host(:hover) .dropdown-item-icon{color:var(--calcite-ui-border-1);opacity:1}:host([active]) .dropdown-item-icon{color:var(--calcite-ui-brand);opacity:1}.container--s .dropdown-item-icon-start{-webkit-margin-end:0.5rem;margin-inline-end:0.5rem;-webkit-margin-start:0.25rem;margin-inline-start:0.25rem}.container--s .dropdown-item-icon-end{-webkit-margin-start:0.5rem;margin-inline-start:0.5rem}.container--m .dropdown-item-icon-start{-webkit-margin-end:0.75rem;margin-inline-end:0.75rem;-webkit-margin-start:0.25rem;margin-inline-start:0.25rem}.container--m .dropdown-item-icon-end{-webkit-margin-start:0.75rem;margin-inline-start:0.75rem}.container--l .dropdown-item-icon-start{-webkit-margin-end:1rem;margin-inline-end:1rem;-webkit-margin-start:0.25rem;margin-inline-start:0.25rem}.container--l .dropdown-item-icon-end{-webkit-margin-start:1rem;margin-inline-start:1rem}";
 
-const DropdownItem = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.calciteInternalDropdownItemSelect = createEvent(this, "calciteInternalDropdownItemSelect", 7);
-    this.calciteInternalDropdownItemKeyEvent = createEvent(this, "calciteInternalDropdownItemKeyEvent", 7);
-    this.calciteInternalDropdownCloseRequest = createEvent(this, "calciteInternalDropdownCloseRequest", 7);
-    //--------------------------------------------------------------------------
-    //
-    //  Public Properties
-    //
-    //--------------------------------------------------------------------------
-    /** Indicates whether the item is active. */
-    this.active = false;
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Public Methods
-  //
-  //--------------------------------------------------------------------------
-  /** Sets focus on the component. */
-  async setFocus() {
-    var _a;
-    (_a = this.el) === null || _a === void 0 ? void 0 : _a.focus();
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  //--------------------------------------------------------------------------
-  componentWillLoad() {
-    this.initialize();
-  }
-  connectedCallback() {
-    this.initialize();
-  }
-  render() {
-    const scale = getElementProp(this.el, "scale", "m");
-    const iconStartEl = (h("calcite-icon", { class: "dropdown-item-icon-start", flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: "s" }));
-    const contentNode = (h("span", { class: "dropdown-item-content" }, h("slot", null)));
-    const iconEndEl = (h("calcite-icon", { class: "dropdown-item-icon-end", flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: "s" }));
-    const slottedContent = this.iconStart && this.iconEnd
-      ? [iconStartEl, contentNode, iconEndEl]
-      : this.iconStart
-        ? [iconStartEl, h("slot", null)]
-        : this.iconEnd
-          ? [contentNode, iconEndEl]
-          : contentNode;
-    const contentEl = !this.href ? (slottedContent) : (h("a", { "aria-label": this.label, class: "dropdown-link", href: this.href, ref: (el) => (this.childLink = el), rel: this.rel, target: this.target }, slottedContent));
-    const itemRole = this.href
-      ? null
-      : this.selectionMode === "single"
-        ? "menuitemradio"
-        : this.selectionMode === "multi"
-          ? "menuitemcheckbox"
-          : "menuitem";
-    const itemAria = this.selectionMode !== "none" ? toAriaBoolean(this.active) : null;
-    return (h(Host, { "aria-checked": itemAria, role: itemRole, tabindex: "0" }, h("div", { class: {
-        container: true,
-        [CSS.containerLink]: !!this.href,
-        [CSS.containerSmall]: scale === "s",
-        [CSS.containerMedium]: scale === "m",
-        [CSS.containerLarge]: scale === "l",
-        [CSS.containerMulti]: this.selectionMode === "multi",
-        [CSS.containerSingle]: this.selectionMode === "single",
-        [CSS.containerNone]: this.selectionMode === "none"
-      } }, this.selectionMode !== "none" ? (h("calcite-icon", { class: "dropdown-item-icon", icon: this.selectionMode === "multi" ? "check" : "bullet-point", scale: "s" })) : null, contentEl)));
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Event Listeners
-  //
-  //--------------------------------------------------------------------------
-  onClick() {
-    this.emitRequestedItem();
-  }
-  keyDownHandler(event) {
-    switch (event.key) {
-      case " ":
-      case "Enter":
-        this.emitRequestedItem();
-        if (this.href) {
-          this.childLink.click();
-        }
-        event.preventDefault();
-        break;
-      case "Escape":
-        this.calciteInternalDropdownCloseRequest.emit();
-        event.preventDefault();
-        break;
-      case "Tab":
-        this.calciteInternalDropdownItemKeyEvent.emit({ keyboardEvent: event });
-        break;
-      case "ArrowUp":
-      case "ArrowDown":
-      case "Home":
-      case "End":
-        event.preventDefault();
-        this.calciteInternalDropdownItemKeyEvent.emit({ keyboardEvent: event });
-        break;
-    }
-  }
-  updateActiveItemOnChange(event) {
-    const parentEmittedChange = event.composedPath().includes(this.parentDropdownGroupEl);
-    if (parentEmittedChange) {
-      this.requestedDropdownGroup = event.detail.requestedDropdownGroup;
-      this.requestedDropdownItem = event.detail.requestedDropdownItem;
-      this.determineActiveItem();
-    }
-    event.stopPropagation();
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  //--------------------------------------------------------------------------
-  initialize() {
-    this.selectionMode = getElementProp(this.el, "selection-mode", "single");
-    this.parentDropdownGroupEl = this.el.closest("calcite-dropdown-group");
-    if (this.selectionMode === "none") {
-      this.active = false;
-    }
-  }
-  determineActiveItem() {
-    switch (this.selectionMode) {
-      case "multi":
-        if (this.el === this.requestedDropdownItem) {
-          this.active = !this.active;
-        }
-        break;
-      case "single":
-        if (this.el === this.requestedDropdownItem) {
-          this.active = true;
-        }
-        else if (this.requestedDropdownGroup === this.parentDropdownGroupEl) {
-          this.active = false;
-        }
-        break;
-      case "none":
-        this.active = false;
-        break;
-    }
-  }
-  emitRequestedItem() {
-    this.calciteInternalDropdownItemSelect.emit({
-      requestedDropdownItem: this.el,
-      requestedDropdownGroup: this.parentDropdownGroupEl
-    });
-  }
-  get el() { return getElement(this); }
-};
+const DropdownItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteInternalDropdownItemSelect = createEvent(this, "calciteInternalDropdownItemSelect", 6);
+    this.calciteInternalDropdownItemKeyEvent = createEvent(this, "calciteInternalDropdownItemKeyEvent", 6);
+    this.calciteInternalDropdownCloseRequest = createEvent(this, "calciteInternalDropdownCloseRequest", 6);
+    //--------------------------------------------------------------------------
+    //
+    //  Public Properties
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Indicates whether the item is active.
+     *
+     * @deprecated Use selected instead.
+     */
+    this.active = false;
+    /** When true, item is selected  */
+    this.selected = false;
+  }
+  activeHandler(value) {
+    this.selected = value;
+  }
+  selectedHandler(value) {
+    this.active = value;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  //--------------------------------------------------------------------------
+  /** Sets focus on the component. */
+  async setFocus() {
+    var _a;
+    (_a = this.el) === null || _a === void 0 ? void 0 : _a.focus();
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  componentWillLoad() {
+    this.initialize();
+  }
+  connectedCallback() {
+    const isSelected = this.selected || this.active;
+    if (isSelected) {
+      this.activeHandler(isSelected);
+      this.selectedHandler(isSelected);
+    }
+    this.initialize();
+  }
+  render() {
+    const scale = getElementProp(this.el, "scale", "m");
+    const iconStartEl = (h("calcite-icon", { class: "dropdown-item-icon-start", flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: "s" }));
+    const contentNode = (h("span", { class: "dropdown-item-content" }, h("slot", null)));
+    const iconEndEl = (h("calcite-icon", { class: "dropdown-item-icon-end", flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: "s" }));
+    const slottedContent = this.iconStart && this.iconEnd
+      ? [iconStartEl, contentNode, iconEndEl]
+      : this.iconStart
+        ? [iconStartEl, h("slot", null)]
+        : this.iconEnd
+          ? [contentNode, iconEndEl]
+          : contentNode;
+    const contentEl = !this.href ? (slottedContent) : (h("a", { "aria-label": this.label, class: "dropdown-link", href: this.href, ref: (el) => (this.childLink = el), rel: this.rel, target: this.target }, slottedContent));
+    const itemRole = this.href
+      ? null
+      : this.selectionMode === "single"
+        ? "menuitemradio"
+        : this.selectionMode === "multi"
+          ? "menuitemcheckbox"
+          : "menuitem";
+    const itemAria = this.selectionMode !== "none" ? toAriaBoolean(this.selected) : null;
+    return (h(Host, { "aria-checked": itemAria, role: itemRole, tabindex: "0" }, h("div", { class: {
+        container: true,
+        [CSS.containerLink]: !!this.href,
+        [CSS.containerSmall]: scale === "s",
+        [CSS.containerMedium]: scale === "m",
+        [CSS.containerLarge]: scale === "l",
+        [CSS.containerMulti]: this.selectionMode === "multi",
+        [CSS.containerSingle]: this.selectionMode === "single",
+        [CSS.containerNone]: this.selectionMode === "none"
+      } }, this.selectionMode !== "none" ? (h("calcite-icon", { class: "dropdown-item-icon", icon: this.selectionMode === "multi" ? "check" : "bullet-point", scale: "s" })) : null, contentEl)));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Event Listeners
+  //
+  //--------------------------------------------------------------------------
+  onClick() {
+    this.emitRequestedItem();
+  }
+  keyDownHandler(event) {
+    switch (event.key) {
+      case " ":
+      case "Enter":
+        this.emitRequestedItem();
+        if (this.href) {
+          this.childLink.click();
+        }
+        event.preventDefault();
+        break;
+      case "Escape":
+        this.calciteInternalDropdownCloseRequest.emit();
+        event.preventDefault();
+        break;
+      case "Tab":
+        this.calciteInternalDropdownItemKeyEvent.emit({ keyboardEvent: event });
+        break;
+      case "ArrowUp":
+      case "ArrowDown":
+      case "Home":
+      case "End":
+        event.preventDefault();
+        this.calciteInternalDropdownItemKeyEvent.emit({ keyboardEvent: event });
+        break;
+    }
+  }
+  updateActiveItemOnChange(event) {
+    const parentEmittedChange = event.composedPath().includes(this.parentDropdownGroupEl);
+    if (parentEmittedChange) {
+      this.requestedDropdownGroup = event.detail.requestedDropdownGroup;
+      this.requestedDropdownItem = event.detail.requestedDropdownItem;
+      this.determineActiveItem();
+    }
+    event.stopPropagation();
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  initialize() {
+    this.selectionMode = getElementProp(this.el, "selection-mode", "single");
+    this.parentDropdownGroupEl = this.el.closest("calcite-dropdown-group");
+    if (this.selectionMode === "none") {
+      this.selected = false;
+    }
+  }
+  determineActiveItem() {
+    switch (this.selectionMode) {
+      case "multi":
+        if (this.el === this.requestedDropdownItem) {
+          this.selected = !this.selected;
+        }
+        break;
+      case "single":
+        if (this.el === this.requestedDropdownItem) {
+          this.selected = true;
+        }
+        else if (this.requestedDropdownGroup === this.parentDropdownGroupEl) {
+          this.selected = false;
+        }
+        break;
+      case "none":
+        this.selected = false;
+        break;
+    }
+  }
+  emitRequestedItem() {
+    this.calciteInternalDropdownItemSelect.emit({
+      requestedDropdownItem: this.el,
+      requestedDropdownGroup: this.parentDropdownGroupEl
+    });
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "active": ["activeHandler"],
+    "selected": ["selectedHandler"]
+  }; }
+};
 DropdownItem.style = dropdownItemCss;
 
 export { Dropdown as calcite_dropdown, DropdownGroup as calcite_dropdown_group, DropdownItem as calcite_dropdown_item };