From b5fa7f40b489bb71d01dfd9bb3697c05c8c68d5c Mon Sep 17 00:00:00 2001
From: Eliza Khachatryan <eli97736@esri.com>
Date: Thu, 24 Aug 2023 12:29:12 -0700
Subject: [PATCH] refactor(dropdown, dropdown-item-group, dropdown-item):
 `getElementProp` is refactored out in favor of inheritable props set directly
 on parent (#7582)

**Related Issue:** #6038

## Summary

`getElementProp` is refactored out across child components as an
outdated pattern in favor of inheritable props set directly on the
parent.

The logic for setting these props thus moves to the parent, getting rid
of the `getElementProp` altogether. The parent component gets a
`mutationObserver` to do this as well as `watchers` for when it needs to
modify the children.

Inherited props addressed:

- [x]  `scale` is inherited from `dropdown`,
- [x] `selectionMode` is inherited from `dropdown-item-group`, so there
can be a mix of types within one dropdown.
---
 .../dropdown-group/dropdown-group.e2e.ts      |   20 +-
 .../dropdown-group/dropdown-group.tsx         |   49 +-
 .../components/dropdown-group/resources.ts    |    5 -
 .../dropdown-item/dropdown-item.tsx           |   36 +-
 .../src/components/dropdown-item/resources.ts |    4 +-
 .../src/components/dropdown/dropdown.e2e.ts   | 2075 +++++++++--------
 .../src/components/dropdown/dropdown.tsx      |   16 +-
 7 files changed, 1139 insertions(+), 1066 deletions(-)
 delete mode 100644 packages/calcite-components/src/components/dropdown-group/resources.ts

diff --git a/packages/calcite-components/src/components/dropdown-group/dropdown-group.e2e.ts b/packages/calcite-components/src/components/dropdown-group/dropdown-group.e2e.ts
index eb2d3871d58..bd4f35a409c 100644
--- a/packages/calcite-components/src/components/dropdown-group/dropdown-group.e2e.ts
+++ b/packages/calcite-components/src/components/dropdown-group/dropdown-group.e2e.ts
@@ -1,6 +1,24 @@
-import { renders, hidden } from "../../tests/commonTests";
+import { defaults, hidden, reflects, renders } from "../../tests/commonTests";
 
 describe("calcite-dropdown-group", () => {
+  describe("defaults", () => {
+    defaults("calcite-dropdown-group", [
+      {
+        propertyName: "selectionMode",
+        defaultValue: "single",
+      },
+    ]);
+  });
+
+  describe("reflects", () => {
+    reflects("calcite-dropdown-group", [
+      {
+        propertyName: "selectionMode",
+        value: "single",
+      },
+    ]);
+  });
+
   describe("renders", () => {
     renders("calcite-dropdown-group", { display: "block" });
   });
diff --git a/packages/calcite-components/src/components/dropdown-group/dropdown-group.tsx b/packages/calcite-components/src/components/dropdown-group/dropdown-group.tsx
index 79eb28e1c44..bc7d9e8dc58 100644
--- a/packages/calcite-components/src/components/dropdown-group/dropdown-group.tsx
+++ b/packages/calcite-components/src/components/dropdown-group/dropdown-group.tsx
@@ -8,11 +8,13 @@ import {
   Listen,
   Prop,
   VNode,
+  Watch,
 } from "@stencil/core";
-import { getElementProp } from "../../utils/dom";
 import { Scale, SelectionMode } from "../interfaces";
 import { RequestedItem } from "./interfaces";
-import { CSS } from "./resources";
+import { createObserver } from "../../utils/observers";
+import { CSS } from "../dropdown-item/resources";
+
 /**
  * @slot - A slot for adding `calcite-dropdown-item`s.
  */
@@ -34,18 +36,25 @@ export class DropdownGroup {
   @Prop({ reflect: true }) groupTitle: string;
 
   /**
-   * Specifies the component's selection mode, where
-   * `"multiple"` allows any number of (or no) selected `calcite-dropdown-item`s,
-   * `"single"` allows and requires one selected `calcite-dropdown-item`, and
-   * `"none"` does not allow selection on `calcite-dropdown-item`s.
+   * Specifies the size of the component inherited from the parent `calcite-dropdown`, defaults to `m`.
+   *
+   * @internal
    */
-  @Prop({ reflect: true }) selectionMode: Extract<"single" | "none" | "multiple", SelectionMode> =
-    "single";
+  @Prop() scale: Scale = "m";
 
   /**
-   * Specifies the size of the component.
+   * Specifies the selection mode for `calcite-dropdown-item` children, defaults to `single`:
+   * - `multiple` allows any number of selected items,
+   * - `single` allows only one selection (default),
+   * - `none` doesn't allow for any selection.
    */
-  @Prop({ reflect: true }) scale: Scale;
+  @Prop({ reflect: true }) selectionMode: Extract<"none" | "single" | "multiple", SelectionMode> =
+    "single";
+
+  @Watch("selectionMode")
+  handlePropsChange(): void {
+    this.updateItems();
+  }
 
   //--------------------------------------------------------------------------
   //
@@ -64,12 +73,15 @@ export class DropdownGroup {
   //
   //--------------------------------------------------------------------------
 
+  connectedCallback(): void {
+    this.updateItems();
+  }
+
   componentWillLoad(): void {
     this.groupPosition = this.getGroupPosition();
   }
 
   render(): VNode {
-    const scale: Scale = this.scale || getElementProp(this.el, "scale", "m");
     const groupTitle = this.groupTitle ? (
       <span aria-hidden="true" class="dropdown-title">
         {this.groupTitle}
@@ -83,12 +95,9 @@ export class DropdownGroup {
       <Host aria-label={this.groupTitle} role="group">
         <div
           class={{
-            container: true,
-            [CSS.containerSmall]: scale === "s",
-            [CSS.containerMedium]: scale === "m",
-            [CSS.containerLarge]: scale === "l",
+            [CSS.container]: true,
+            [`${CSS.container}--${this.scale}`]: true,
           }}
-          title={this.groupTitle}
         >
           {dropdownSeparator}
           {groupTitle}
@@ -131,6 +140,14 @@ export class DropdownGroup {
   /** the requested item */
   private requestedDropdownItem: HTMLCalciteDropdownItemElement;
 
+  private updateItems = (): void => {
+    Array.from(this.el.querySelectorAll("calcite-dropdown-item")).forEach(
+      (item) => (item.selectionMode = this.selectionMode)
+    );
+  };
+
+  mutationObserver = createObserver("mutation", () => this.updateItems());
+
   //--------------------------------------------------------------------------
   //
   //  Private Methods
diff --git a/packages/calcite-components/src/components/dropdown-group/resources.ts b/packages/calcite-components/src/components/dropdown-group/resources.ts
deleted file mode 100644
index 66b8bb5ddda..00000000000
--- a/packages/calcite-components/src/components/dropdown-group/resources.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export const CSS = {
-  containerSmall: "container--s",
-  containerMedium: "container--m",
-  containerLarge: "container--l",
-};
diff --git a/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx b/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx
index 9bb35dd4c20..41c49e3dc7f 100644
--- a/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx
+++ b/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx
@@ -10,7 +10,7 @@ import {
   Prop,
   VNode,
 } from "@stencil/core";
-import { getElementProp, toAriaBoolean } from "../../utils/dom";
+import { toAriaBoolean } from "../../utils/dom";
 import { ItemKeyboardEvent } from "../dropdown/interfaces";
 import { RequestedItem } from "../dropdown-group/interfaces";
 import { FlipContext, Scale, SelectionMode } from "../interfaces";
@@ -99,6 +99,23 @@ export class DropdownItem implements LoadableComponent {
     this.el?.focus();
   }
 
+  /**
+   * Specifies the selection mode inherited from `calcite-dropdown-group`, defaults to `single`:
+   * - `multiple` allows any number of selected items,
+   * - `single` allows only one selection (default),
+   * - `none` doesn't allow for any selection.
+   *
+   * @internal
+   */
+  @Prop() selectionMode: Extract<"none" | "single" | "multiple", SelectionMode> = "single";
+
+  /**
+   * Specifies the size of the component inherited from `calcite-dropdown`, defaults to `m`.
+   *
+   * @internal
+   */
+  @Prop() scale: Scale = "m";
+
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -119,8 +136,8 @@ export class DropdownItem implements LoadableComponent {
   }
 
   render(): VNode {
-    const scale = getElementProp(this.el, "scale", this.scale);
-    const { href, selectionMode, label, iconFlipRtl } = this;
+    const { href, selectionMode, label, iconFlipRtl, scale } = this;
+
     const iconStartEl = (
       <calcite-icon
         class={CSS.iconStart}
@@ -183,11 +200,9 @@ export class DropdownItem implements LoadableComponent {
       <Host aria-checked={itemAria} aria-label={!href ? label : ""} role={itemRole} tabindex="0">
         <div
           class={{
-            container: true,
+            [CSS.container]: true,
             [CSS.containerLink]: !!href,
-            [CSS.containerSmall]: scale === "s",
-            [CSS.containerMedium]: scale === "m",
-            [CSS.containerLarge]: scale === "l",
+            [`${CSS.container}--${scale}`]: true,
             [CSS.containerMulti]: selectionMode === "multiple",
             [CSS.containerSingle]: selectionMode === "single",
             [CSS.containerNone]: selectionMode === "none",
@@ -273,15 +288,9 @@ export class DropdownItem implements LoadableComponent {
   /** requested item */
   private requestedDropdownItem: HTMLCalciteDropdownItemElement;
 
-  /** what selection mode is the parent dropdown group in */
-  private selectionMode: Extract<"none" | "single" | "multiple", SelectionMode>;
-
   /** if href is requested, track the rendered child link*/
   private childLink: HTMLAnchorElement;
 
-  /** Specifies the scale of dropdown-item controlled by the parent, defaults to m */
-  scale: Scale = "m";
-
   //--------------------------------------------------------------------------
   //
   //  Private Methods
@@ -289,7 +298,6 @@ export class DropdownItem implements LoadableComponent {
   //--------------------------------------------------------------------------
 
   private initialize(): void {
-    this.selectionMode = getElementProp(this.el, "selection-mode", "single");
     this.parentDropdownGroupEl = this.el.closest("calcite-dropdown-group");
     if (this.selectionMode === "none") {
       this.selected = false;
diff --git a/packages/calcite-components/src/components/dropdown-item/resources.ts b/packages/calcite-components/src/components/dropdown-item/resources.ts
index a6be186345d..ba822992ac4 100644
--- a/packages/calcite-components/src/components/dropdown-item/resources.ts
+++ b/packages/calcite-components/src/components/dropdown-item/resources.ts
@@ -1,8 +1,6 @@
 export const CSS = {
+  container: "container",
   containerLink: "container--link",
-  containerSmall: "container--s",
-  containerMedium: "container--m",
-  containerLarge: "container--l",
   containerMulti: "container--multi-selection",
   containerSingle: "container--single-selection",
   containerNone: "container--none-selection",
diff --git a/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts b/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts
index e7603d4e0aa..8a739dab21b 100644
--- a/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts
+++ b/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts
@@ -1,1223 +1,1254 @@
 import { E2EPage, newE2EPage } from "@stencil/core/testing";
 import dedent from "dedent";
 import { html } from "../../../support/formatting";
-import { focusable, accessible, defaults, disabled, floatingUIOwner, hidden, renders } from "../../tests/commonTests";
+import {
+  accessible,
+  defaults,
+  disabled,
+  floatingUIOwner,
+  focusable,
+  hidden,
+  reflects,
+  renders,
+} from "../../tests/commonTests";
 import { GlobalTestProps, getFocusedElementProp } from "../../tests/utils";
 import { CSS } from "./resources";
 
-const simpleDropdownHTML = html`<calcite-dropdown>
-  <calcite-button slot="trigger">Open dropdown</calcite-button>
-  <calcite-dropdown-group id="group-1">
-    <calcite-dropdown-item id="item-1"> Dropdown Item Content </calcite-dropdown-item>
-    <calcite-dropdown-item id="item-2" selected> Dropdown Item Content </calcite-dropdown-item>
-    <calcite-dropdown-item id="item-3"> Dropdown Item Content </calcite-dropdown-item>
-  </calcite-dropdown-group>
-</calcite-dropdown>`;
-
 describe("calcite-dropdown", () => {
-  describe("focusable", () => {
-    focusable(simpleDropdownHTML, {
-      focusTargetSelector: '[slot="trigger"]',
-    });
-  });
-
-  describe("renders", () => {
-    renders(simpleDropdownHTML, { display: "inline-flex" });
-  });
-
-  describe("honors hidden attribute", () => {
-    hidden("calcite-dropdown");
-  });
+  const simpleDropdownHTML = html`
+    <calcite-dropdown>
+      <calcite-button slot="trigger">Open dropdown</calcite-button>
+      <calcite-dropdown-group id="group-1">
+        <calcite-dropdown-item id="item-1"> Dropdown Item Content </calcite-dropdown-item>
+        <calcite-dropdown-item id="item-2" selected> Dropdown Item Content </calcite-dropdown-item>
+        <calcite-dropdown-item id="item-3"> Dropdown Item Content </calcite-dropdown-item>
+      </calcite-dropdown-group>
+    </calcite-dropdown>
+  `;
 
   describe("defaults", () => {
     defaults("calcite-dropdown", [
       {
-        propertyName: "overlayPositioning",
-        defaultValue: "absolute",
+        propertyName: "scale",
+        defaultValue: "m",
       },
       {
-        propertyName: "flipPlacements",
-        defaultValue: undefined,
+        propertyName: "placement",
+        defaultValue: "bottom-start",
       },
     ]);
-  });
 
-  describe.skip("disabled", () => {
-    disabled(simpleDropdownHTML, {
-      focusTarget: {
-        tab: "calcite-button",
-        click: "calcite-dropdown-item",
-      },
+    describe("reflects", () => {
+      reflects("calcite-dropdown", [
+        {
+          propertyName: "scale",
+          value: "m",
+        },
+        {
+          propertyName: "placement",
+          value: "bottom-start",
+        },
+      ]);
     });
-  });
 
-  interface SelectedItemsAssertionOptions {
-    /**
-     * IDs from items to assert selection
-     */
-    expectedItemIds: string[];
-  }
-
-  /**
-   * Test helper for selected calcite-dropdown items. Expects items to have IDs to test against.
-   *
-   * Note: assertSelectedItems.setUpEvents must be called before using this method
-   *
-   * @param page
-   * @param root0
-   * @param root0.expectedItemIds
-   */
-  async function assertSelectedItems(page: E2EPage, { expectedItemIds }: SelectedItemsAssertionOptions): Promise<void> {
-    await page.waitForTimeout(100);
-    const selectedItemIds = await page.evaluate(() => {
-      const dropdown = document.querySelector<HTMLCalciteDropdownElement>("calcite-dropdown");
-      return dropdown.selectedItems.map((item) => item.id);
+    describe("focusable", () => {
+      focusable(simpleDropdownHTML, {
+        focusTargetSelector: '[slot="trigger"]',
+      });
     });
 
-    expect(selectedItemIds).toHaveLength(expectedItemIds.length);
-
-    expectedItemIds.forEach((itemId, index) => expect(selectedItemIds[index]).toEqual(itemId));
-  }
+    describe("renders", () => {
+      renders(simpleDropdownHTML, { display: "inline-flex" });
+    });
 
-  type SelectionEventTestWindow = GlobalTestProps<{ eventDetail: Selection }>;
+    describe("honors hidden attribute", () => {
+      hidden("calcite-dropdown");
+    });
 
-  /**
-   * Helper to wire up the page to assert on the event detail
-   *
-   * @param page
-   */
-  assertSelectedItems.setUpEvents = async (page: E2EPage) => {
-    await page.evaluate(() => {
-      document.addEventListener("calciteDropdownSelect", ({ detail }: CustomEvent<Selection>) => {
-        (window as SelectionEventTestWindow).eventDetail = detail;
+    describe.skip("disabled", () => {
+      disabled(simpleDropdownHTML, {
+        focusTarget: {
+          tab: "calcite-button",
+          click: "calcite-dropdown-item",
+        },
       });
     });
-  };
 
-  const dropdownSelectionModeContent = html`
-    <calcite-dropdown>
-      <calcite-button slot="trigger" id="trigger">Open dropdown</calcite-button>
-      <calcite-dropdown-group id="group-1" selection-mode="multiple">
-        <calcite-dropdown-item id="item-1"> Dropdown Item Content </calcite-dropdown-item>
-        <calcite-dropdown-item id="item-2" selected> Dropdown Item Content </calcite-dropdown-item>
-        <calcite-dropdown-item id="item-3" selected> Dropdown Item Content </calcite-dropdown-item>
-      </calcite-dropdown-group>
-      <calcite-dropdown-group id="group-2" selection-mode="single">
-        <calcite-dropdown-item id="item-4"> Dropdown Item Content </calcite-dropdown-item>
-        <calcite-dropdown-item id="item-5" selected> Dropdown Item Content </calcite-dropdown-item>
-      </calcite-dropdown-group>
-      <calcite-dropdown-group id="group-3" selection-mode="none">
-        <calcite-dropdown-item id="item-6"> Dropdown Item Content </calcite-dropdown-item>
-        <calcite-dropdown-item id="item-7" href="google.com"> Dropdown Item Content </calcite-dropdown-item>
-      </calcite-dropdown-group>
-    </calcite-dropdown>
-  `;
+    interface SelectedItemsAssertionOptions {
+      /**
+       * IDs from items to assert selection
+       */
+      expectedItemIds: string[];
+    }
 
-  it("renders default props when none are provided", async () => {
-    const page = await newE2EPage();
-    await page.setContent(html`<calcite-dropdown>
-      <calcite-button slot="trigger">Open dropdown</calcite-button>
-      <calcite-dropdown-group id="group-1">
-        <calcite-dropdown-item id="item-1"> Dropdown Item Content </calcite-dropdown-item>
-        <calcite-dropdown-item id="item-2" selected> Dropdown Item Content </calcite-dropdown-item>
-        <calcite-dropdown-item id="item-3"> Dropdown Item Content </calcite-dropdown-item>
-      </calcite-dropdown-group>
-    </calcite-dropdown>`);
-
-    const element = await page.find("calcite-dropdown");
-    const group1 = await element.find("calcite-dropdown-group[id='group-1']");
-    expect(element).toEqualAttribute("scale", "m");
-    expect(element).toEqualAttribute("placement", "bottom-start");
-    expect(group1).toEqualAttribute("selection-mode", "single");
-  });
+    /**
+     * Test helper for selected calcite-dropdown items. Expects items to have IDs to test against.
+     *
+     * Note: assertSelectedItems.setUpEvents must be called before using this method
+     *
+     * @param page
+     * @param root0
+     * @param root0.expectedItemIds
+     */
+    async function assertSelectedItems(
+      page: E2EPage,
+      { expectedItemIds }: SelectedItemsAssertionOptions
+    ): Promise<void> {
+      await page.waitForTimeout(100);
+      const selectedItemIds = await page.evaluate(() => {
+        const dropdown = document.querySelector<HTMLCalciteDropdownElement>("calcite-dropdown");
+        return dropdown.selectedItems.map((item) => item.id);
+      });
 
-  it("renders requested props when valid props are provided", async () => {
-    const page = await newE2EPage();
-    await page.setContent(html`<calcite-dropdown placement="bottom-end" scale="l" width="l">
-      <calcite-button slot="trigger">Open dropdown</calcite-button>
-      <calcite-dropdown-group id="group-1" selection-mode="multiple">
-        <calcite-dropdown-item id="item-1"> Dropdown Item Content </calcite-dropdown-item>
-        <calcite-dropdown-item id="item-2" selected> Dropdown Item Content </calcite-dropdown-item>
-        <calcite-dropdown-item id="item-3"> Dropdown Item Content </calcite-dropdown-item>
-      </calcite-dropdown-group>
-    </calcite-dropdown>`);
-
-    const element = await page.find("calcite-dropdown");
-    const group1 = await element.find("calcite-dropdown-group[id='group-1']");
-    expect(element).toEqualAttribute("scale", "l");
-    expect(element).toEqualAttribute("width", "l");
-    expect(element).toEqualAttribute("placement", "bottom-end");
-    expect(group1).toEqualAttribute("selection-mode", "multiple");
-  });
+      expect(selectedItemIds).toHaveLength(expectedItemIds.length);
 
-  it("renders icons if requested and does not render icons if not requested", async () => {
-    const page = await newE2EPage();
-    await page.setContent(html`<calcite-dropdown>
-      <calcite-button slot="trigger">Open dropdown</calcite-button>
-      <calcite-dropdown-group>
-        <calcite-dropdown-item icon-start="grid" id="item-1"> Dropdown Item Content </calcite-dropdown-item>
-        <calcite-dropdown-item icon-end="grid" id="item-2" selected> Dropdown Item Content </calcite-dropdown-item>
-        <calcite-dropdown-item icon-start="grid" icon-end="grid" id="item-3">
-          Dropdown Item Content
-        </calcite-dropdown-item>
-        <calcite-dropdown-item id="item-4"> Dropdown Item Content </calcite-dropdown-item>
-      </calcite-dropdown-group>
-    </calcite-dropdown>`);
-
-    const item1IconStart = await page.find("calcite-dropdown-item[id='item-1'] >>> .dropdown-item-icon-start");
-    const item1IconEnd = await page.find("calcite-dropdown-item[id='item-1'] >>> .dropdown-item-icon-end");
-    const item2IconStart = await page.find("calcite-dropdown-item[id='item-2'] >>> .dropdown-item-icon-start");
-    const item2IconEnd = await page.find("calcite-dropdown-item[id='item-2'] >>> .dropdown-item-icon-end");
-    const item3IconStart = await page.find("calcite-dropdown-item[id='item-3'] >>> .dropdown-item-icon-start");
-    const item3IconEnd = await page.find("calcite-dropdown-item[id='item-3'] >>> .dropdown-item-icon-end");
-    const item4IconStart = await page.find("calcite-dropdown-item[id='item-4'] >>> .dropdown-item-icon-start");
-    const item4IconEnd = await page.find("calcite-dropdown-item[id='item-4'] >>> .dropdown-item-icon-end");
-    expect(item1IconStart).not.toBeNull();
-    expect(item1IconEnd).toBeNull();
-    expect(item2IconStart).toBeNull();
-    expect(item2IconEnd).not.toBeNull();
-    expect(item3IconStart).not.toBeNull();
-    expect(item3IconEnd).not.toBeNull();
-    expect(item4IconStart).toBeNull();
-    expect(item4IconEnd).toBeNull();
-  });
+      expectedItemIds.forEach((itemId, index) => expect(selectedItemIds[index]).toEqual(itemId));
+    }
 
-  it("renders group title if specified and not if absent", async () => {
-    const page = await newE2EPage();
-    await page.setContent(html`<calcite-dropdown>
-      <calcite-button slot="trigger">Open dropdown</calcite-button>
-      <calcite-dropdown-group id="group-1" group-title="My Group 1 Title">
-        <calcite-dropdown-item id="item-1"> Dropdown Item Content </calcite-dropdown-item>
-        <calcite-dropdown-item id="item-2" selected> Dropdown Item Content </calcite-dropdown-item>
-      </calcite-dropdown-group>
-      <calcite-dropdown-group id="group-2">
-        <calcite-dropdown-item id="item-3"> Dropdown Item Content </calcite-dropdown-item>
-        <calcite-dropdown-item id="item-4" selected> Dropdown Item Content </calcite-dropdown-item>
-      </calcite-dropdown-group>
-    </calcite-dropdown>`);
+    type SelectionEventTestWindow = GlobalTestProps<{ eventDetail: Selection }>;
 
-    const group1Title = await page.find("calcite-dropdown-group[id='group-1'] >>> .dropdown-title");
-    const group2Title = await page.find("calcite-dropdown-group[id='group-2'] >>> .dropdown-title");
-    expect(group1Title).not.toBeNull();
-    expect(group2Title).toBeNull();
-  });
+    /**
+     * Helper to wire up the page to assert on the event detail
+     *
+     * @param page
+     */
+    assertSelectedItems.setUpEvents = async (page: E2EPage) => {
+      await page.evaluate(() => {
+        document.addEventListener("calciteDropdownSelect", ({ detail }: CustomEvent<Selection>) => {
+          (window as SelectionEventTestWindow).eventDetail = detail;
+        });
+      });
+    };
 
-  it("renders selected item based on attribute in dom", async () => {
-    const page = await newE2EPage();
-    await page.setContent(html`<calcite-dropdown>
-      <calcite-button slot="trigger">Open dropdown</calcite-button>
-      <calcite-dropdown-group id="group-1">
-        <calcite-dropdown-item id="item-1"> Dropdown Item Content </calcite-dropdown-item>
-        <calcite-dropdown-item id="item-2" selected> Dropdown Item Content </calcite-dropdown-item>
-        <calcite-dropdown-item id="item-3"> Dropdown Item Content </calcite-dropdown-item>
-      </calcite-dropdown-group>
-    </calcite-dropdown>`);
+    const dropdownSelectionModeContent = html`
+      <calcite-dropdown>
+        <calcite-button slot="trigger" id="trigger">Open dropdown</calcite-button>
+        <calcite-dropdown-group id="group-1" selection-mode="multiple">
+          <calcite-dropdown-item id="item-1"> Dropdown Item Content </calcite-dropdown-item>
+          <calcite-dropdown-item id="item-2" selected> Dropdown Item Content </calcite-dropdown-item>
+          <calcite-dropdown-item id="item-3" selected> Dropdown Item Content </calcite-dropdown-item>
+        </calcite-dropdown-group>
+        <calcite-dropdown-group id="group-2" selection-mode="single">
+          <calcite-dropdown-item id="item-4"> Dropdown Item Content </calcite-dropdown-item>
+          <calcite-dropdown-item id="item-5" selected> Dropdown Item Content </calcite-dropdown-item>
+        </calcite-dropdown-group>
+        <calcite-dropdown-group id="group-3" selection-mode="none">
+          <calcite-dropdown-item id="item-6"> Dropdown Item Content </calcite-dropdown-item>
+          <calcite-dropdown-item id="item-7" href="google.com"> Dropdown Item Content </calcite-dropdown-item>
+        </calcite-dropdown-group>
+      </calcite-dropdown>
+    `;
 
-    const element = await page.find("calcite-dropdown");
-    const item1 = await element.find("calcite-dropdown-item[id='item-1']");
-    const item2 = await element.find("calcite-dropdown-item[id='item-2']");
-    const item3 = await element.find("calcite-dropdown-item[id='item-3']");
+    it("renders requested props when valid props are provided", async () => {
+      const page = await newE2EPage();
+      await page.setContent(html`<calcite-dropdown placement="bottom-end" width="l">
+        <calcite-button slot="trigger">Open dropdown</calcite-button>
+        <calcite-dropdown-group id="group-1" selection-mode="multiple">
+          <calcite-dropdown-item id="item-1"> Dropdown Item Content </calcite-dropdown-item>
+          <calcite-dropdown-item id="item-2" selected> Dropdown Item Content </calcite-dropdown-item>
+          <calcite-dropdown-item id="item-3"> Dropdown Item Content </calcite-dropdown-item>
+        </calcite-dropdown-group>
+      </calcite-dropdown>`);
 
-    expect(item1).not.toHaveAttribute("selected");
-    expect(item2).toHaveAttribute("selected");
-    expect(item3).not.toHaveAttribute("selected");
-  });
+      const element = await page.find("calcite-dropdown");
+      const group1 = await element.find("calcite-dropdown-group[id='group-1']");
 
-  it("renders multiple selected items when group is in multiple selection mode", async () => {
-    const page = await newE2EPage();
-    await page.setContent(html`<calcite-dropdown>
-      <calcite-button id="trigger" slot="trigger">Open dropdown</calcite-button>
-      <calcite-dropdown-group id="group-1" selection-mode="multiple">
-        <calcite-dropdown-item id="item-1"> Dropdown Item Content </calcite-dropdown-item>
-        <calcite-dropdown-item id="item-2" selected> Dropdown Item Content </calcite-dropdown-item>
-        <calcite-dropdown-item id="item-3"> Dropdown Item Content </calcite-dropdown-item>
-      </calcite-dropdown-group>
-    </calcite-dropdown>`);
-
-    const element = await page.find("calcite-dropdown");
-    const trigger = await element.find("#trigger");
-    const group1 = await element.find("calcite-dropdown-group[id='group-1']");
-    const item1 = await element.find("calcite-dropdown-item[id='item-1']");
-    const item2 = await element.find("calcite-dropdown-item[id='item-2']");
-    const item3 = await element.find("calcite-dropdown-item[id='item-3']");
-    const itemChangeSpy = await element.spyOnEvent("calciteDropdownSelect");
-    await assertSelectedItems.setUpEvents(page);
-    expect(group1).toEqualAttribute("selection-mode", "multiple");
-    await trigger.click();
-    await page.waitForChanges();
-    await assertSelectedItems(page, { expectedItemIds: ["item-2"] });
-    await item1.click();
-    await page.waitForChanges();
-    await assertSelectedItems(page, {
-      expectedItemIds: ["item-1", "item-2"],
-    });
-    await trigger.click();
-    await page.waitForChanges();
-    await item2.click();
-    await page.waitForChanges();
-    await assertSelectedItems(page, {
-      expectedItemIds: ["item-1"],
+      expect(element).toEqualAttribute("width", "l");
+      expect(element).toEqualAttribute("placement", "bottom-end");
+      expect(group1).toEqualAttribute("selection-mode", "multiple");
     });
-    await trigger.click();
-    await page.waitForChanges();
-    await item3.click();
-    await page.waitForChanges();
-    await assertSelectedItems(page, {
-      expectedItemIds: ["item-1", "item-3"],
+
+    it("inheritable non-default props `selectionMode` and `scale` set on parent get passed into items", async () => {
+      const page = await newE2EPage();
+      await page.setContent(html`
+        <calcite-dropdown selection-mode="single-persist" scale="s">
+          <calcite-button slot="trigger">Open dropdown</calcite-button>
+          <calcite-dropdown-group id="group-1">
+            <calcite-dropdown-item id="item-1">Content</calcite-dropdown-item>
+            <calcite-dropdown-item id="item-2" selected>Content</calcite-dropdown-item>
+            <calcite-dropdown-item id="item-3">Content</calcite-dropdown-item>
+          </calcite-dropdown-group>
+        </calcite-dropdown>
+      `);
+      const dropdownItems = await page.findAll("calcite-dropdown-items");
+
+      dropdownItems.forEach(async (item) => {
+        expect(await item.getProperty("selectionMode")).toBe("single-persist");
+        expect(await item.getProperty("scale")).toBe("s");
+      });
     });
 
-    expect(item1).toHaveAttribute("selected");
-    expect(item2).not.toHaveAttribute("selected");
-    expect(item3).toHaveAttribute("selected");
-    expect(itemChangeSpy).toHaveReceivedEventTimes(3);
-  });
+    it("renders icons if requested and does not render icons if not requested", async () => {
+      const page = await newE2EPage();
+      await page.setContent(html`<calcite-dropdown>
+        <calcite-button slot="trigger">Open dropdown</calcite-button>
+        <calcite-dropdown-group>
+          <calcite-dropdown-item icon-start="grid" id="item-1"> Dropdown Item Content </calcite-dropdown-item>
+          <calcite-dropdown-item icon-end="grid" id="item-2" selected> Dropdown Item Content </calcite-dropdown-item>
+          <calcite-dropdown-item icon-start="grid" icon-end="grid" id="item-3">
+            Dropdown Item Content
+          </calcite-dropdown-item>
+          <calcite-dropdown-item id="item-4"> Dropdown Item Content </calcite-dropdown-item>
+        </calcite-dropdown-group>
+      </calcite-dropdown>`);
 
-  it("renders just one selected item when group is in single selection mode", async () => {
-    const page = await newE2EPage();
-    await page.setContent(html`<calcite-dropdown>
-      <calcite-button id="trigger" slot="trigger">Open dropdown</calcite-button>
-      <calcite-dropdown-group id="group-1" selection-mode="single">
-        <calcite-dropdown-item id="item-1"> Dropdown Item Content </calcite-dropdown-item>
-        <calcite-dropdown-item id="item-2" selected> Dropdown Item Content </calcite-dropdown-item>
-        <calcite-dropdown-item id="item-3"> Dropdown Item Content </calcite-dropdown-item>
-      </calcite-dropdown-group>
-    </calcite-dropdown>`);
-
-    const element = await page.find("calcite-dropdown");
-    const trigger = await element.find("#trigger");
-    const group1 = await element.find("calcite-dropdown-group[id='group-1']");
-    const item1 = await element.find("calcite-dropdown-item[id='item-1']");
-    const item2 = await element.find("calcite-dropdown-item[id='item-2']");
-    const item3 = await element.find("calcite-dropdown-item[id='item-3']");
-    const itemChangeSpy = await element.spyOnEvent("calciteDropdownSelect");
-    await assertSelectedItems.setUpEvents(page);
-    expect(group1).toEqualAttribute("selection-mode", "single");
-    await assertSelectedItems(page, { expectedItemIds: ["item-2"] });
-    await trigger.click();
-    await page.waitForChanges();
-    await item1.click();
-    await page.waitForChanges();
-    await assertSelectedItems(page, {
-      expectedItemIds: ["item-1"],
+      const item1IconStart = await page.find("calcite-dropdown-item[id='item-1'] >>> .dropdown-item-icon-start");
+      const item1IconEnd = await page.find("calcite-dropdown-item[id='item-1'] >>> .dropdown-item-icon-end");
+      const item2IconStart = await page.find("calcite-dropdown-item[id='item-2'] >>> .dropdown-item-icon-start");
+      const item2IconEnd = await page.find("calcite-dropdown-item[id='item-2'] >>> .dropdown-item-icon-end");
+      const item3IconStart = await page.find("calcite-dropdown-item[id='item-3'] >>> .dropdown-item-icon-start");
+      const item3IconEnd = await page.find("calcite-dropdown-item[id='item-3'] >>> .dropdown-item-icon-end");
+      const item4IconStart = await page.find("calcite-dropdown-item[id='item-4'] >>> .dropdown-item-icon-start");
+      const item4IconEnd = await page.find("calcite-dropdown-item[id='item-4'] >>> .dropdown-item-icon-end");
+      expect(item1IconStart).not.toBeNull();
+      expect(item1IconEnd).toBeNull();
+      expect(item2IconStart).toBeNull();
+      expect(item2IconEnd).not.toBeNull();
+      expect(item3IconStart).not.toBeNull();
+      expect(item3IconEnd).not.toBeNull();
+      expect(item4IconStart).toBeNull();
+      expect(item4IconEnd).toBeNull();
     });
-    await trigger.click();
-    await page.waitForChanges();
-    await item3.click();
-    await page.waitForChanges();
-    await assertSelectedItems(page, {
-      expectedItemIds: ["item-3"],
+
+    it("renders group title if specified and not if absent", async () => {
+      const page = await newE2EPage();
+      await page.setContent(html`<calcite-dropdown>
+        <calcite-button slot="trigger">Open dropdown</calcite-button>
+        <calcite-dropdown-group id="group-1" group-title="My Group 1 Title">
+          <calcite-dropdown-item id="item-1"> Dropdown Item Content </calcite-dropdown-item>
+          <calcite-dropdown-item id="item-2" selected> Dropdown Item Content </calcite-dropdown-item>
+        </calcite-dropdown-group>
+        <calcite-dropdown-group id="group-2">
+          <calcite-dropdown-item id="item-3"> Dropdown Item Content </calcite-dropdown-item>
+          <calcite-dropdown-item id="item-4" selected> Dropdown Item Content </calcite-dropdown-item>
+        </calcite-dropdown-group>
+      </calcite-dropdown>`);
+
+      const group1Title = await page.find("calcite-dropdown-group[id='group-1'] >>> .dropdown-title");
+      const group2Title = await page.find("calcite-dropdown-group[id='group-2'] >>> .dropdown-title");
+      expect(group1Title).not.toBeNull();
+      expect(group2Title).toBeNull();
     });
 
-    expect(item1).not.toHaveAttribute("selected");
-    expect(item2).not.toHaveAttribute("selected");
-    expect(item3).toHaveAttribute("selected");
-    expect(itemChangeSpy).toHaveReceivedEventTimes(2);
-  });
+    it("renders selected item based on attribute in dom", async () => {
+      const page = await newE2EPage();
+      await page.setContent(html`<calcite-dropdown>
+        <calcite-button slot="trigger">Open dropdown</calcite-button>
+        <calcite-dropdown-group id="group-1">
+          <calcite-dropdown-item id="item-1"> Dropdown Item Content </calcite-dropdown-item>
+          <calcite-dropdown-item id="item-2" selected> Dropdown Item Content </calcite-dropdown-item>
+          <calcite-dropdown-item id="item-3"> Dropdown Item Content </calcite-dropdown-item>
+        </calcite-dropdown-group>
+      </calcite-dropdown>`);
 
-  it("renders no selected item when group is in none selection mode (and removes any selected state set in dom on load)", async () => {
-    const page = await newE2EPage();
-    await page.setContent(html`<calcite-dropdown>
-      <calcite-button id="trigger" slot="trigger">Open dropdown</calcite-button>
-      <calcite-dropdown-group id="group-1" selection-mode="none">
-        <calcite-dropdown-item id="item-1"> Dropdown Item Content </calcite-dropdown-item>
-        <calcite-dropdown-item id="item-2" selected> Dropdown Item Content </calcite-dropdown-item>
-        <calcite-dropdown-item id="item-3"> Dropdown Item Content </calcite-dropdown-item>
-      </calcite-dropdown-group>
-    </calcite-dropdown>`);
-
-    const element = await page.find("calcite-dropdown");
-    const trigger = await element.find("#trigger");
-    const group1 = await element.find("calcite-dropdown-group[id='group-1']");
-    const item1 = await element.find("calcite-dropdown-item[id='item-1']");
-    const item2 = await element.find("calcite-dropdown-item[id='item-2']");
-    const item3 = await element.find("calcite-dropdown-item[id='item-3']");
-    const itemChangeSpy = await element.spyOnEvent("calciteDropdownSelect");
-    await assertSelectedItems.setUpEvents(page);
-    expect(group1).toEqualAttribute("selection-mode", "none");
-    await trigger.click();
-    await item1.click();
-    await page.waitForChanges();
-    await assertSelectedItems(page, { expectedItemIds: [] });
-    await trigger.click();
-    await item2.click();
-    await page.waitForChanges();
-    await assertSelectedItems(page, { expectedItemIds: [] });
-    await trigger.click();
-    await item3.click();
-    await page.waitForChanges();
-    await assertSelectedItems(page, { expectedItemIds: [] });
-
-    expect(item1).not.toHaveAttribute("selected");
-    expect(item2).not.toHaveAttribute("selected");
-    expect(item3).not.toHaveAttribute("selected");
-    expect(itemChangeSpy).toHaveReceivedEventTimes(3);
-  });
+      const element = await page.find("calcite-dropdown");
+      const item1 = await element.find("calcite-dropdown-item[id='item-1']");
+      const item2 = await element.find("calcite-dropdown-item[id='item-2']");
+      const item3 = await element.find("calcite-dropdown-item[id='item-3']");
 
-  it("renders the correct selected state when parent contains groups of assorted selection modes", async () => {
-    const page = await newE2EPage();
-    await page.setContent(html`<calcite-dropdown>
-      <calcite-button slot="trigger" id="trigger">Open dropdown</calcite-button>
-      <calcite-dropdown-group id="group-1" selection-mode="multiple">
-        <calcite-dropdown-item id="item-1"> Dropdown Item Content </calcite-dropdown-item>
-        <calcite-dropdown-item id="item-2" selected> Dropdown Item Content </calcite-dropdown-item>
-        <calcite-dropdown-item id="item-3"> Dropdown Item Content </calcite-dropdown-item>
-      </calcite-dropdown-group>
-      <calcite-dropdown-group id="group-2" selection-mode="single">
-        <calcite-dropdown-item id="item-4"> Dropdown Item Content </calcite-dropdown-item>
-        <calcite-dropdown-item id="item-5" selected> Dropdown Item Content </calcite-dropdown-item>
-        <calcite-dropdown-item id="item-6"> Dropdown Item Content </calcite-dropdown-item>
-      </calcite-dropdown-group>
-      <calcite-dropdown-group id="group-3" selection-mode="none">
-        <calcite-dropdown-item id="item-7"> Dropdown Item Content </calcite-dropdown-item>
-        <calcite-dropdown-item id="item-8"> Dropdown Item Content </calcite-dropdown-item>
-        <calcite-dropdown-item id="item-9"> Dropdown Item Content </calcite-dropdown-item>
-      </calcite-dropdown-group>
-    </calcite-dropdown>`);
-
-    const element = await page.find("calcite-dropdown");
-    const trigger = await element.find("#trigger");
-    const group1 = await element.find("calcite-dropdown-group[id='group-1']");
-    const group2 = await element.find("calcite-dropdown-group[id='group-2']");
-    const group3 = await element.find("calcite-dropdown-group[id='group-3']");
-    const item1 = await element.find("calcite-dropdown-item[id='item-1']");
-    const item2 = await element.find("calcite-dropdown-item[id='item-2']");
-    const item3 = await element.find("calcite-dropdown-item[id='item-3']");
-    const item4 = await element.find("calcite-dropdown-item[id='item-4']");
-    const item5 = await element.find("calcite-dropdown-item[id='item-5']");
-    const item6 = await element.find("calcite-dropdown-item[id='item-6']");
-    const item7 = await element.find("calcite-dropdown-item[id='item-7']");
-    const item8 = await element.find("calcite-dropdown-item[id='item-8']");
-    const item9 = await element.find("calcite-dropdown-item[id='item-9']");
-    const itemChangeSpy = await element.spyOnEvent("calciteDropdownSelect");
-    await assertSelectedItems.setUpEvents(page);
-
-    expect(group1).toEqualAttribute("selection-mode", "multiple");
-    expect(group2).toEqualAttribute("selection-mode", "single");
-    expect(group3).toEqualAttribute("selection-mode", "none");
-    await assertSelectedItems(page, { expectedItemIds: ["item-2", "item-5"] });
-
-    await trigger.click();
-    await page.waitForChanges();
-    await item1.click();
-    await page.waitForChanges();
-    await assertSelectedItems(page, {
-      expectedItemIds: ["item-1", "item-2", "item-5"],
-    });
-    await trigger.click();
-    await page.waitForChanges();
-    await item2.click();
-    await page.waitForChanges();
-    await assertSelectedItems(page, {
-      expectedItemIds: ["item-1", "item-5"],
-    });
-    await trigger.click();
-    await page.waitForChanges();
-    await item3.click();
-    await page.waitForChanges();
-    await assertSelectedItems(page, {
-      expectedItemIds: ["item-1", "item-3", "item-5"],
-    });
-    await trigger.click();
-    await page.waitForChanges();
-    await item4.click();
-    await page.waitForChanges();
-    await assertSelectedItems(page, {
-      expectedItemIds: ["item-1", "item-3", "item-4"],
-    });
-    await trigger.click();
-    await page.waitForChanges();
-    await item6.click();
-    await page.waitForChanges();
-    await assertSelectedItems(page, {
-      expectedItemIds: ["item-1", "item-3", "item-6"],
-    });
-    await trigger.click();
-    await page.waitForChanges();
-    await item7.click();
-    await page.waitForChanges();
-    await assertSelectedItems(page, {
-      expectedItemIds: ["item-1", "item-3", "item-6"],
-    });
-    await trigger.click();
-    await page.waitForChanges();
-    await item9.click();
-    await page.waitForChanges();
-    await assertSelectedItems(page, {
-      expectedItemIds: ["item-1", "item-3", "item-6"],
+      expect(item1).not.toHaveAttribute("selected");
+      expect(item2).toHaveAttribute("selected");
+      expect(item3).not.toHaveAttribute("selected");
     });
 
-    expect(item1).toHaveAttribute("selected");
-    expect(item2).not.toHaveAttribute("selected");
-    expect(item3).toHaveAttribute("selected");
-    expect(item4).not.toHaveAttribute("selected");
-    expect(item5).not.toHaveAttribute("selected");
-    expect(item6).toHaveAttribute("selected");
-    expect(item7).not.toHaveAttribute("selected");
-    expect(item8).not.toHaveAttribute("selected");
-    expect(item9).not.toHaveAttribute("selected");
-    expect(itemChangeSpy).toHaveReceivedEventTimes(7);
-  });
+    it("renders multiple selected items when group is in multiple selection mode", async () => {
+      const page = await newE2EPage();
+      await page.setContent(html`
+        <calcite-dropdown>
+          <calcite-button id="trigger" slot="trigger">Open dropdown</calcite-button>
+          <calcite-dropdown-group id="group-1" selection-mode="multiple">
+            <calcite-dropdown-item id="item-1"> Dropdown Item Content </calcite-dropdown-item>
+            <calcite-dropdown-item id="item-2" selected> Dropdown Item Content </calcite-dropdown-item>
+            <calcite-dropdown-item id="item-3"> Dropdown Item Content </calcite-dropdown-item>
+          </calcite-dropdown-group>
+        </calcite-dropdown>
+      `);
 
-  it("renders a calcite-dropdown-item with child anchor link with passed attributes if href is present", async () => {
-    const page = await newE2EPage();
-    await page.setContent(html`<calcite-dropdown>
-      <calcite-button id="trigger" slot="trigger">Open dropdown</calcite-button>
-      <calcite-dropdown-group id="group-1" selection-mode="none">
-        <calcite-dropdown-item id="item-1"> Dropdown Item Content </calcite-dropdown-item>
-        <calcite-dropdown-item id="item-2" href="google.com" rel="noopener noreferrer" target="_blank">
-          Dropdown Item Content
-        </calcite-dropdown-item>
-        <calcite-dropdown-item id="item-3"> Dropdown Item Content </calcite-dropdown-item>
-      </calcite-dropdown-group>
-    </calcite-dropdown>`);
-    const elementAsLink = await page.find("calcite-dropdown-item[id='item-2'] >>> a");
-    expect(elementAsLink).not.toBeNull();
-    expect(elementAsLink).toEqualAttribute("href", "google.com");
-    expect(elementAsLink).toEqualAttribute("rel", "noopener noreferrer");
-    expect(elementAsLink).toEqualAttribute("target", "_blank");
-  });
+      const element = await page.find("calcite-dropdown");
+      const trigger = await element.find("#trigger");
+      const group1 = await element.find("calcite-dropdown-group[id='group-1']");
+      const item1 = await element.find("calcite-dropdown-item[id='item-1']");
+      const item2 = await element.find("calcite-dropdown-item[id='item-2']");
+      const item3 = await element.find("calcite-dropdown-item[id='item-3']");
+      const itemChangeSpy = await element.spyOnEvent("calciteDropdownSelect");
+      await assertSelectedItems.setUpEvents(page);
+      expect(group1).toEqualAttribute("selection-mode", "multiple");
+      await trigger.click();
+      await page.waitForChanges();
+      await assertSelectedItems(page, { expectedItemIds: ["item-2"] });
+      await item1.click();
+      await page.waitForChanges();
+      await assertSelectedItems(page, {
+        expectedItemIds: ["item-1", "item-2"],
+      });
+      await trigger.click();
+      await page.waitForChanges();
+      await item2.click();
+      await page.waitForChanges();
+      await assertSelectedItems(page, {
+        expectedItemIds: ["item-1"],
+      });
+      await trigger.click();
+      await page.waitForChanges();
+      await item3.click();
+      await page.waitForChanges();
+      await assertSelectedItems(page, {
+        expectedItemIds: ["item-1", "item-3"],
+      });
 
-  it("should focus the first item on open when there is no selected item", async () => {
-    const page = await newE2EPage({
-      html: html`<calcite-dropdown>
-        <calcite-button slot="trigger">Open Dropdown</calcite-button>
-        <calcite-dropdown-group>
-          <calcite-dropdown-item id="item-1">1</calcite-dropdown-item>
-          <calcite-dropdown-item id="item-2">2</calcite-dropdown-item>
-          <calcite-dropdown-item id="item-3">3</calcite-dropdown-item>
-          <calcite-dropdown-item id="item-4">4</calcite-dropdown-item>
-        </calcite-dropdown-group>
-      </calcite-dropdown>`,
+      expect(item1).toHaveAttribute("selected");
+      expect(item2).not.toHaveAttribute("selected");
+      expect(item3).toHaveAttribute("selected");
+      expect(itemChangeSpy).toHaveReceivedEventTimes(3);
     });
 
-    const element = await page.find("calcite-dropdown");
-    const dropdownOpenEvent = page.waitForEvent("calciteDropdownOpen");
-    await element.click();
-    await dropdownOpenEvent;
-    expect(await page.evaluate(() => document.activeElement.id)).toEqual("item-1");
-  });
-
-  it("should focus the first selected item on open", async () => {
-    const page = await newE2EPage({
-      html: html`<calcite-dropdown>
-        <calcite-button slot="trigger">Open Dropdown</calcite-button>
-        <calcite-dropdown-group>
-          <calcite-dropdown-item id="item-1">1</calcite-dropdown-item>
-          <calcite-dropdown-item id="item-2">2</calcite-dropdown-item>
-          <calcite-dropdown-item id="item-3" selected>3</calcite-dropdown-item>
-          <calcite-dropdown-item id="item-4">4</calcite-dropdown-item>
+    it("renders just one selected item when group is in single selection mode", async () => {
+      const page = await newE2EPage();
+      await page.setContent(html`<calcite-dropdown>
+        <calcite-button id="trigger" slot="trigger">Open dropdown</calcite-button>
+        <calcite-dropdown-group id="group-1" selection-mode="single">
+          <calcite-dropdown-item id="item-1"> Dropdown Item Content </calcite-dropdown-item>
+          <calcite-dropdown-item id="item-2" selected> Dropdown Item Content </calcite-dropdown-item>
+          <calcite-dropdown-item id="item-3"> Dropdown Item Content </calcite-dropdown-item>
         </calcite-dropdown-group>
-      </calcite-dropdown>`,
-    });
+      </calcite-dropdown>`);
 
-    const element = await page.find("calcite-dropdown");
-    const dropdownOpenEvent = page.waitForEvent("calciteDropdownOpen");
-    await element.click();
-    await dropdownOpenEvent;
+      const element = await page.find("calcite-dropdown");
+      const trigger = await element.find("#trigger");
+      const group1 = await element.find("calcite-dropdown-group[id='group-1']");
+      const item1 = await element.find("calcite-dropdown-item[id='item-1']");
+      const item2 = await element.find("calcite-dropdown-item[id='item-2']");
+      const item3 = await element.find("calcite-dropdown-item[id='item-3']");
+      const itemChangeSpy = await element.spyOnEvent("calciteDropdownSelect");
+      await assertSelectedItems.setUpEvents(page);
+      expect(group1).toEqualAttribute("selection-mode", "single");
+      await assertSelectedItems(page, { expectedItemIds: ["item-2"] });
+      await trigger.click();
+      await page.waitForChanges();
+      await item1.click();
+      await page.waitForChanges();
+      await assertSelectedItems(page, {
+        expectedItemIds: ["item-1"],
+      });
+      await trigger.click();
+      await page.waitForChanges();
+      await item3.click();
+      await page.waitForChanges();
+      await assertSelectedItems(page, {
+        expectedItemIds: ["item-3"],
+      });
 
-    expect(await page.evaluate(() => document.activeElement.id)).toEqual("item-3");
-  });
+      expect(item1).not.toHaveAttribute("selected");
+      expect(item2).not.toHaveAttribute("selected");
+      expect(item3).toHaveAttribute("selected");
+      expect(itemChangeSpy).toHaveReceivedEventTimes(2);
+    });
 
-  it("should focus the first selected item on open (multi)", async () => {
-    const page = await newE2EPage({
-      html: html`<calcite-dropdown>
-        <calcite-button slot="trigger">Open Dropdown</calcite-button>
-        <calcite-dropdown-group selection-mode="multiple">
-          <calcite-dropdown-item id="item-1">1</calcite-dropdown-item>
-          <calcite-dropdown-item id="item-2" selected>2</calcite-dropdown-item>
-          <calcite-dropdown-item id="item-3">3</calcite-dropdown-item>
-          <calcite-dropdown-item id="item-4" selected>4</calcite-dropdown-item>
+    it("renders no selected item when group is in none selection mode (and removes any selected state set in dom on load)", async () => {
+      const page = await newE2EPage();
+      await page.setContent(html`<calcite-dropdown>
+        <calcite-button id="trigger" slot="trigger">Open dropdown</calcite-button>
+        <calcite-dropdown-group id="group-1" selection-mode="none">
+          <calcite-dropdown-item id="item-1"> Dropdown Item Content </calcite-dropdown-item>
+          <calcite-dropdown-item id="item-2" selected> Dropdown Item Content </calcite-dropdown-item>
+          <calcite-dropdown-item id="item-3"> Dropdown Item Content </calcite-dropdown-item>
         </calcite-dropdown-group>
-      </calcite-dropdown>`,
-    });
+      </calcite-dropdown>`);
 
-    const element = await page.find("calcite-dropdown");
-    const dropdownOpenEvent = page.waitForEvent("calciteDropdownOpen");
-    await element.click();
-    await dropdownOpenEvent;
+      const element = await page.find("calcite-dropdown");
+      const trigger = await element.find("#trigger");
+      const group1 = await element.find("calcite-dropdown-group[id='group-1']");
+      const item1 = await element.find("calcite-dropdown-item[id='item-1']");
+      const item2 = await element.find("calcite-dropdown-item[id='item-2']");
+      const item3 = await element.find("calcite-dropdown-item[id='item-3']");
+      const itemChangeSpy = await element.spyOnEvent("calciteDropdownSelect");
+      await assertSelectedItems.setUpEvents(page);
+      expect(group1).toEqualAttribute("selection-mode", "none");
+      await trigger.click();
+      await item1.click();
+      await page.waitForChanges();
+      await assertSelectedItems(page, { expectedItemIds: [] });
+      await trigger.click();
+      await item2.click();
+      await page.waitForChanges();
+      await assertSelectedItems(page, { expectedItemIds: [] });
+      await trigger.click();
+      await item3.click();
+      await page.waitForChanges();
+      await assertSelectedItems(page, { expectedItemIds: [] });
 
-    expect(await page.evaluate(() => document.activeElement.id)).toEqual("item-2");
-  });
+      expect(item1).not.toHaveAttribute("selected");
+      expect(item2).not.toHaveAttribute("selected");
+      expect(item3).not.toHaveAttribute("selected");
+      expect(itemChangeSpy).toHaveReceivedEventTimes(3);
+    });
 
-  describe("scrolling", () => {
-    it("focused item should be in view when long", async () => {
+    it("renders the correct selected state when parent contains groups of assorted selection modes", async () => {
       const page = await newE2EPage();
-
       await page.setContent(html`<calcite-dropdown>
-        <calcite-button slot="trigger">Open Dropdown</calcite-button>
-        <calcite-dropdown-group>
-          <calcite-dropdown-item id="item-1">1</calcite-dropdown-item>
-          <calcite-dropdown-item id="item-2">2</calcite-dropdown-item>
-          <calcite-dropdown-item id="item-3">3</calcite-dropdown-item>
-          <calcite-dropdown-item id="item-4">4</calcite-dropdown-item>
-          <calcite-dropdown-item id="item-5">5</calcite-dropdown-item>
-          <calcite-dropdown-item id="item-6">6</calcite-dropdown-item>
-          <calcite-dropdown-item id="item-7">7</calcite-dropdown-item>
-          <calcite-dropdown-item id="item-8">8</calcite-dropdown-item>
-          <calcite-dropdown-item id="item-9">9</calcite-dropdown-item>
-          <calcite-dropdown-item id="item-10">10</calcite-dropdown-item>
-          <calcite-dropdown-item id="item-11">11</calcite-dropdown-item>
-          <calcite-dropdown-item id="item-12">12</calcite-dropdown-item>
-          <calcite-dropdown-item id="item-13">13</calcite-dropdown-item>
-          <calcite-dropdown-item id="item-14">14</calcite-dropdown-item>
-          <calcite-dropdown-item id="item-15">15</calcite-dropdown-item>
-          <calcite-dropdown-item id="item-16">16</calcite-dropdown-item>
-          <calcite-dropdown-item id="item-17">17</calcite-dropdown-item>
-          <calcite-dropdown-item id="item-18">18</calcite-dropdown-item>
-          <calcite-dropdown-item id="item-19">19</calcite-dropdown-item>
-          <calcite-dropdown-item id="item-20">20</calcite-dropdown-item>
-          <calcite-dropdown-item id="item-21">21</calcite-dropdown-item>
-          <calcite-dropdown-item id="item-22">22</calcite-dropdown-item>
-          <calcite-dropdown-item id="item-23">23</calcite-dropdown-item>
-          <calcite-dropdown-item id="item-24">24</calcite-dropdown-item>
-          <calcite-dropdown-item id="item-25">25</calcite-dropdown-item>
-          <calcite-dropdown-item id="item-26">26</calcite-dropdown-item>
-          <calcite-dropdown-item id="item-27">27</calcite-dropdown-item>
-          <calcite-dropdown-item id="item-28">28</calcite-dropdown-item>
-          <calcite-dropdown-item id="item-29">29</calcite-dropdown-item>
-          <calcite-dropdown-item id="item-30">30</calcite-dropdown-item>
-          <calcite-dropdown-item id="item-41">41</calcite-dropdown-item>
-          <calcite-dropdown-item id="item-42">42</calcite-dropdown-item>
-          <calcite-dropdown-item id="item-43">43</calcite-dropdown-item>
-          <calcite-dropdown-item id="item-44">44</calcite-dropdown-item>
-          <calcite-dropdown-item id="item-45">45</calcite-dropdown-item>
-          <calcite-dropdown-item id="item-46">46</calcite-dropdown-item>
-          <calcite-dropdown-item id="item-47">47</calcite-dropdown-item>
-          <calcite-dropdown-item id="item-48">48</calcite-dropdown-item>
-          <calcite-dropdown-item id="item-49">49</calcite-dropdown-item>
-          <calcite-dropdown-item id="item-50" selected>50</calcite-dropdown-item>
+        <calcite-button slot="trigger" id="trigger">Open dropdown</calcite-button>
+        <calcite-dropdown-group id="group-1" selection-mode="multiple">
+          <calcite-dropdown-item id="item-1"> Dropdown Item Content </calcite-dropdown-item>
+          <calcite-dropdown-item id="item-2" selected> Dropdown Item Content </calcite-dropdown-item>
+          <calcite-dropdown-item id="item-3"> Dropdown Item Content </calcite-dropdown-item>
+        </calcite-dropdown-group>
+        <calcite-dropdown-group id="group-2" selection-mode="single">
+          <calcite-dropdown-item id="item-4"> Dropdown Item Content </calcite-dropdown-item>
+          <calcite-dropdown-item id="item-5" selected> Dropdown Item Content </calcite-dropdown-item>
+          <calcite-dropdown-item id="item-6"> Dropdown Item Content </calcite-dropdown-item>
+        </calcite-dropdown-group>
+        <calcite-dropdown-group id="group-3" selection-mode="none">
+          <calcite-dropdown-item id="item-7"> Dropdown Item Content </calcite-dropdown-item>
+          <calcite-dropdown-item id="item-8"> Dropdown Item Content </calcite-dropdown-item>
+          <calcite-dropdown-item id="item-9"> Dropdown Item Content </calcite-dropdown-item>
         </calcite-dropdown-group>
       </calcite-dropdown>`);
+
+      const element = await page.find("calcite-dropdown");
+      const trigger = await element.find("#trigger");
+      const group1 = await element.find("calcite-dropdown-group[id='group-1']");
+      const group2 = await element.find("calcite-dropdown-group[id='group-2']");
+      const group3 = await element.find("calcite-dropdown-group[id='group-3']");
+      const item1 = await element.find("calcite-dropdown-item[id='item-1']");
+      const item2 = await element.find("calcite-dropdown-item[id='item-2']");
+      const item3 = await element.find("calcite-dropdown-item[id='item-3']");
+      const item4 = await element.find("calcite-dropdown-item[id='item-4']");
+      const item5 = await element.find("calcite-dropdown-item[id='item-5']");
+      const item6 = await element.find("calcite-dropdown-item[id='item-6']");
+      const item7 = await element.find("calcite-dropdown-item[id='item-7']");
+      const item8 = await element.find("calcite-dropdown-item[id='item-8']");
+      const item9 = await element.find("calcite-dropdown-item[id='item-9']");
+      const itemChangeSpy = await element.spyOnEvent("calciteDropdownSelect");
+      await assertSelectedItems.setUpEvents(page);
+
+      expect(group1).toEqualAttribute("selection-mode", "multiple");
+      expect(group2).toEqualAttribute("selection-mode", "single");
+      expect(group3).toEqualAttribute("selection-mode", "none");
+      await assertSelectedItems(page, { expectedItemIds: ["item-2", "item-5"] });
+
+      await trigger.click();
+      await page.waitForChanges();
+      await item1.click();
+      await page.waitForChanges();
+      await assertSelectedItems(page, {
+        expectedItemIds: ["item-1", "item-2", "item-5"],
+      });
+      await trigger.click();
+      await page.waitForChanges();
+      await item2.click();
+      await page.waitForChanges();
+      await assertSelectedItems(page, {
+        expectedItemIds: ["item-1", "item-5"],
+      });
+      await trigger.click();
+      await page.waitForChanges();
+      await item3.click();
+      await page.waitForChanges();
+      await assertSelectedItems(page, {
+        expectedItemIds: ["item-1", "item-3", "item-5"],
+      });
+      await trigger.click();
+      await page.waitForChanges();
+      await item4.click();
+      await page.waitForChanges();
+      await assertSelectedItems(page, {
+        expectedItemIds: ["item-1", "item-3", "item-4"],
+      });
+      await trigger.click();
+      await page.waitForChanges();
+      await item6.click();
+      await page.waitForChanges();
+      await assertSelectedItems(page, {
+        expectedItemIds: ["item-1", "item-3", "item-6"],
+      });
+      await trigger.click();
+      await page.waitForChanges();
+      await item7.click();
+      await page.waitForChanges();
+      await assertSelectedItems(page, {
+        expectedItemIds: ["item-1", "item-3", "item-6"],
+      });
+      await trigger.click();
+      await page.waitForChanges();
+      await item9.click();
       await page.waitForChanges();
+      await assertSelectedItems(page, {
+        expectedItemIds: ["item-1", "item-3", "item-6"],
+      });
+
+      expect(item1).toHaveAttribute("selected");
+      expect(item2).not.toHaveAttribute("selected");
+      expect(item3).toHaveAttribute("selected");
+      expect(item4).not.toHaveAttribute("selected");
+      expect(item5).not.toHaveAttribute("selected");
+      expect(item6).toHaveAttribute("selected");
+      expect(item7).not.toHaveAttribute("selected");
+      expect(item8).not.toHaveAttribute("selected");
+      expect(item9).not.toHaveAttribute("selected");
+      expect(itemChangeSpy).toHaveReceivedEventTimes(7);
+    });
+
+    it("renders a calcite-dropdown-item with child anchor link with passed attributes if href is present", async () => {
+      const page = await newE2EPage();
+      await page.setContent(html`<calcite-dropdown>
+        <calcite-button id="trigger" slot="trigger">Open dropdown</calcite-button>
+        <calcite-dropdown-group id="group-1" selection-mode="none">
+          <calcite-dropdown-item id="item-1"> Dropdown Item Content </calcite-dropdown-item>
+          <calcite-dropdown-item id="item-2" href="google.com" rel="noopener noreferrer" target="_blank">
+            Dropdown Item Content
+          </calcite-dropdown-item>
+          <calcite-dropdown-item id="item-3"> Dropdown Item Content </calcite-dropdown-item>
+        </calcite-dropdown-group>
+      </calcite-dropdown>`);
+      const elementAsLink = await page.find("calcite-dropdown-item[id='item-2'] >>> a");
+      expect(elementAsLink).not.toBeNull();
+      expect(elementAsLink).toEqualAttribute("href", "google.com");
+      expect(elementAsLink).toEqualAttribute("rel", "noopener noreferrer");
+      expect(elementAsLink).toEqualAttribute("target", "_blank");
+    });
+
+    it("should focus the first item on open when there is no selected item", async () => {
+      const page = await newE2EPage({
+        html: html`<calcite-dropdown>
+          <calcite-button slot="trigger">Open Dropdown</calcite-button>
+          <calcite-dropdown-group>
+            <calcite-dropdown-item id="item-1">1</calcite-dropdown-item>
+            <calcite-dropdown-item id="item-2">2</calcite-dropdown-item>
+            <calcite-dropdown-item id="item-3">3</calcite-dropdown-item>
+            <calcite-dropdown-item id="item-4">4</calcite-dropdown-item>
+          </calcite-dropdown-group>
+        </calcite-dropdown>`,
+      });
+
+      const element = await page.find("calcite-dropdown");
+      const dropdownOpenEvent = page.waitForEvent("calciteDropdownOpen");
+      await element.click();
+      await dropdownOpenEvent;
+      expect(await page.evaluate(() => document.activeElement.id)).toEqual("item-1");
+    });
+
+    it("should focus the first selected item on open", async () => {
+      const page = await newE2EPage({
+        html: html`<calcite-dropdown>
+          <calcite-button slot="trigger">Open Dropdown</calcite-button>
+          <calcite-dropdown-group>
+            <calcite-dropdown-item id="item-1">1</calcite-dropdown-item>
+            <calcite-dropdown-item id="item-2">2</calcite-dropdown-item>
+            <calcite-dropdown-item id="item-3" selected>3</calcite-dropdown-item>
+            <calcite-dropdown-item id="item-4">4</calcite-dropdown-item>
+          </calcite-dropdown-group>
+        </calcite-dropdown>`,
+      });
 
       const element = await page.find("calcite-dropdown");
       const dropdownOpenEvent = page.waitForEvent("calciteDropdownOpen");
       await element.click();
       await dropdownOpenEvent;
 
-      expect(await page.evaluate(() => document.activeElement.id)).toEqual("item-50");
+      expect(await page.evaluate(() => document.activeElement.id)).toEqual("item-3");
+    });
+
+    it("should focus the first selected item on open (multi)", async () => {
+      const page = await newE2EPage({
+        html: html`<calcite-dropdown>
+          <calcite-button slot="trigger">Open Dropdown</calcite-button>
+          <calcite-dropdown-group selection-mode="multiple">
+            <calcite-dropdown-item id="item-1">1</calcite-dropdown-item>
+            <calcite-dropdown-item id="item-2" selected>2</calcite-dropdown-item>
+            <calcite-dropdown-item id="item-3">3</calcite-dropdown-item>
+            <calcite-dropdown-item id="item-4" selected>4</calcite-dropdown-item>
+          </calcite-dropdown-group>
+        </calcite-dropdown>`,
+      });
 
-      const item = await page.find("#item-50");
+      const element = await page.find("calcite-dropdown");
+      const dropdownOpenEvent = page.waitForEvent("calciteDropdownOpen");
+      await element.click();
+      await dropdownOpenEvent;
 
-      expect(await item.isIntersectingViewport()).toBe(true);
+      expect(await page.evaluate(() => document.activeElement.id)).toEqual("item-2");
     });
 
-    it("control max items displayed", async () => {
-      const maxItems = 7;
-      const page = await newE2EPage({
-        html: html`<calcite-dropdown max-items="${maxItems}">
+    describe("scrolling", () => {
+      it("focused item should be in view when long", async () => {
+        const page = await newE2EPage();
+
+        await page.setContent(html`<calcite-dropdown>
           <calcite-button slot="trigger">Open Dropdown</calcite-button>
-          <calcite-dropdown-group group-title="First group">
+          <calcite-dropdown-group>
             <calcite-dropdown-item id="item-1">1</calcite-dropdown-item>
             <calcite-dropdown-item id="item-2">2</calcite-dropdown-item>
             <calcite-dropdown-item id="item-3">3</calcite-dropdown-item>
             <calcite-dropdown-item id="item-4">4</calcite-dropdown-item>
             <calcite-dropdown-item id="item-5">5</calcite-dropdown-item>
-          </calcite-dropdown-group>
-          <calcite-dropdown-group group-title="Second group">
             <calcite-dropdown-item id="item-6">6</calcite-dropdown-item>
             <calcite-dropdown-item id="item-7">7</calcite-dropdown-item>
             <calcite-dropdown-item id="item-8">8</calcite-dropdown-item>
             <calcite-dropdown-item id="item-9">9</calcite-dropdown-item>
             <calcite-dropdown-item id="item-10">10</calcite-dropdown-item>
+            <calcite-dropdown-item id="item-11">11</calcite-dropdown-item>
+            <calcite-dropdown-item id="item-12">12</calcite-dropdown-item>
+            <calcite-dropdown-item id="item-13">13</calcite-dropdown-item>
+            <calcite-dropdown-item id="item-14">14</calcite-dropdown-item>
+            <calcite-dropdown-item id="item-15">15</calcite-dropdown-item>
+            <calcite-dropdown-item id="item-16">16</calcite-dropdown-item>
+            <calcite-dropdown-item id="item-17">17</calcite-dropdown-item>
+            <calcite-dropdown-item id="item-18">18</calcite-dropdown-item>
+            <calcite-dropdown-item id="item-19">19</calcite-dropdown-item>
+            <calcite-dropdown-item id="item-20">20</calcite-dropdown-item>
+            <calcite-dropdown-item id="item-21">21</calcite-dropdown-item>
+            <calcite-dropdown-item id="item-22">22</calcite-dropdown-item>
+            <calcite-dropdown-item id="item-23">23</calcite-dropdown-item>
+            <calcite-dropdown-item id="item-24">24</calcite-dropdown-item>
+            <calcite-dropdown-item id="item-25">25</calcite-dropdown-item>
+            <calcite-dropdown-item id="item-26">26</calcite-dropdown-item>
+            <calcite-dropdown-item id="item-27">27</calcite-dropdown-item>
+            <calcite-dropdown-item id="item-28">28</calcite-dropdown-item>
+            <calcite-dropdown-item id="item-29">29</calcite-dropdown-item>
+            <calcite-dropdown-item id="item-30">30</calcite-dropdown-item>
+            <calcite-dropdown-item id="item-41">41</calcite-dropdown-item>
+            <calcite-dropdown-item id="item-42">42</calcite-dropdown-item>
+            <calcite-dropdown-item id="item-43">43</calcite-dropdown-item>
+            <calcite-dropdown-item id="item-44">44</calcite-dropdown-item>
+            <calcite-dropdown-item id="item-45">45</calcite-dropdown-item>
+            <calcite-dropdown-item id="item-46">46</calcite-dropdown-item>
+            <calcite-dropdown-item id="item-47">47</calcite-dropdown-item>
+            <calcite-dropdown-item id="item-48">48</calcite-dropdown-item>
+            <calcite-dropdown-item id="item-49">49</calcite-dropdown-item>
+            <calcite-dropdown-item id="item-50" selected>50</calcite-dropdown-item>
           </calcite-dropdown-group>
-        </calcite-dropdown>`,
-      });
+        </calcite-dropdown>`);
+        await page.waitForChanges();
 
-      const element = await page.find("calcite-dropdown");
-      const dropdownOpenEvent = page.waitForEvent("calciteDropdownOpen");
-      await element.click();
-      await dropdownOpenEvent;
+        const element = await page.find("calcite-dropdown");
+        const dropdownOpenEvent = page.waitForEvent("calciteDropdownOpen");
+        await element.click();
+        await dropdownOpenEvent;
 
-      const items = await page.findAll("calcite-dropdown-item");
+        expect(await page.evaluate(() => document.activeElement.id)).toEqual("item-50");
 
-      for (let i = 0; i < items.length; i++) {
-        expect(await items[i].isIntersectingViewport()).toBe(i <= maxItems - 1);
-      }
+        const item = await page.find("#item-50");
 
-      const newMaxItems = 4;
-      element.setProperty("maxItems", newMaxItems);
-      await page.waitForChanges();
+        expect(await item.isIntersectingViewport()).toBe(true);
+      });
 
-      for (let i = 0; i < items.length; i++) {
-        expect(await items[i].isIntersectingViewport()).toBe(i <= newMaxItems - 1);
-      }
-    });
-  });
+      it("control max items displayed", async () => {
+        const maxItems = 7;
+        const page = await newE2EPage({
+          html: html`<calcite-dropdown max-items="${maxItems}">
+            <calcite-button slot="trigger">Open Dropdown</calcite-button>
+            <calcite-dropdown-group group-title="First group">
+              <calcite-dropdown-item id="item-1">1</calcite-dropdown-item>
+              <calcite-dropdown-item id="item-2">2</calcite-dropdown-item>
+              <calcite-dropdown-item id="item-3">3</calcite-dropdown-item>
+              <calcite-dropdown-item id="item-4">4</calcite-dropdown-item>
+              <calcite-dropdown-item id="item-5">5</calcite-dropdown-item>
+            </calcite-dropdown-group>
+            <calcite-dropdown-group group-title="Second group">
+              <calcite-dropdown-item id="item-6">6</calcite-dropdown-item>
+              <calcite-dropdown-item id="item-7">7</calcite-dropdown-item>
+              <calcite-dropdown-item id="item-8">8</calcite-dropdown-item>
+              <calcite-dropdown-item id="item-9">9</calcite-dropdown-item>
+              <calcite-dropdown-item id="item-10">10</calcite-dropdown-item>
+            </calcite-dropdown-group>
+          </calcite-dropdown>`,
+        });
 
-  it("closes when a selection is made", async () => {
-    const page = await newE2EPage();
-    await page.setContent(html`<calcite-dropdown>
-      <calcite-button id="trigger" slot="trigger">Open dropdown</calcite-button>
-      <calcite-dropdown-group id="group-1" selection-mode="single">
-        <calcite-dropdown-item id="item-1"> Dropdown Item Content </calcite-dropdown-item>
-        <calcite-dropdown-item id="item-2" selected> Dropdown Item Content </calcite-dropdown-item>
-        <calcite-dropdown-item id="item-3"> Dropdown Item Content </calcite-dropdown-item>
-      </calcite-dropdown-group>
-    </calcite-dropdown>`);
-
-    const element = await page.find("calcite-dropdown");
-    const trigger = await element.find("#trigger");
-    const item1 = await element.find("calcite-dropdown-item[id='item-1']");
-    const dropdownWrapper = await page.find("calcite-dropdown >>> .calcite-dropdown-wrapper");
-    expect(await dropdownWrapper.isVisible()).toBe(false);
-    await trigger.click();
-    await page.waitForChanges();
-    expect(await dropdownWrapper.isVisible()).toBe(true);
-    await item1.click();
-    await page.waitForChanges();
-    expect(await dropdownWrapper.isVisible()).toBe(false);
-  });
+        const element = await page.find("calcite-dropdown");
+        const dropdownOpenEvent = page.waitForEvent("calciteDropdownOpen");
+        await element.click();
+        await dropdownOpenEvent;
 
-  it("remains open when close-on-select-disabled is requested and selected item is not in a selection-mode:none group", async () => {
-    const page = await newE2EPage();
-    await page.setContent(html`<calcite-dropdown close-on-select-disabled>
-      <calcite-button id="trigger" slot="trigger">Open dropdown</calcite-button>
-      <calcite-dropdown-group id="group-1" selection-mode="single">
-        <calcite-dropdown-item id="item-1"> Dropdown Item Content </calcite-dropdown-item>
-        <calcite-dropdown-item id="item-2" selected> Dropdown Item Content </calcite-dropdown-item>
-        <calcite-dropdown-item>
-          <div id="item-3">Dropdown Item Content</div>
-        </calcite-dropdown-item>
-      </calcite-dropdown-group>
-    </calcite-dropdown>`);
-
-    const element = await page.find("calcite-dropdown");
-    const trigger = await element.find("#trigger");
-    const item1 = await element.find("#item-1");
-    const item3 = await element.find("#item-3");
-    const dropdownWrapper = await page.find("calcite-dropdown >>> .calcite-dropdown-wrapper");
-    expect(await dropdownWrapper.isVisible()).toBe(false);
-    await trigger.click();
-    await page.waitForChanges();
-    expect(await dropdownWrapper.isVisible()).toBe(true);
-    await item1.click();
-    await page.waitForChanges();
-    expect(await dropdownWrapper.isVisible()).toBe(true);
-    await item3.click();
-    await page.waitForChanges();
-    expect(await dropdownWrapper.isVisible()).toBe(true);
-  });
+        const items = await page.findAll("calcite-dropdown-item");
 
-  it("closes when close-on-select-disabled is requested and selected item is in a selection-mode:none group", async () => {
-    const page = await newE2EPage();
-    await page.setContent(html`<calcite-dropdown close-on-select-disabled>
-      <calcite-button id="trigger" slot="trigger">Open dropdown</calcite-button>
-      <calcite-dropdown-group id="group-1" selection-mode="none">
-        <calcite-dropdown-item>
-          <div id="item-1">Dropdown Item Content</div>
-        </calcite-dropdown-item>
-        <calcite-dropdown-item id="item-2"> Dropdown Item Content </calcite-dropdown-item>
-        <calcite-dropdown-item id="item-3"> Dropdown Item Content </calcite-dropdown-item>
-      </calcite-dropdown-group>
-    </calcite-dropdown>`);
-
-    const element = await page.find("calcite-dropdown");
-    const trigger = await element.find("#trigger");
-    const item1 = await element.find("#item-1");
-    const dropdownWrapper = await page.find("calcite-dropdown >>> .calcite-dropdown-wrapper");
-    expect(await dropdownWrapper.isVisible()).toBe(false);
-    await trigger.click();
-    await page.waitForChanges();
-    expect(await dropdownWrapper.isVisible()).toBe(true);
-    await item1.click();
-    await page.waitForChanges();
-    expect(await dropdownWrapper.isVisible()).toBe(false);
-  });
+        for (let i = 0; i < items.length; i++) {
+          expect(await items[i].isIntersectingViewport()).toBe(i <= maxItems - 1);
+        }
+
+        const newMaxItems = 4;
+        element.setProperty("maxItems", newMaxItems);
+        await page.waitForChanges();
+
+        for (let i = 0; i < items.length; i++) {
+          expect(await items[i].isIntersectingViewport()).toBe(i <= newMaxItems - 1);
+        }
+      });
+    });
 
-  describe("toggles the dropdown with click, enter, or space", () => {
-    it("toggles when trigger is a button", async () => {
+    it("closes when a selection is made", async () => {
       const page = await newE2EPage();
-      await page.setContent(html`
-        <calcite-dropdown>
-          <calcite-button slot="trigger">Open dropdown</calcite-button>
-          <calcite-dropdown-group selection-mode="single">
-            <calcite-dropdown-item id="item-1"> Dropdown Item Content </calcite-dropdown-item>
-            <calcite-dropdown-item id="item-2" selected> Dropdown Item Content </calcite-dropdown-item>
-          </calcite-dropdown-group>
-        </calcite-dropdown>
-      `);
-      const element = await page.find("calcite-dropdown");
-      const trigger = await element.find("calcite-button[slot='trigger']");
-      const dropdownWrapper = await page.find(`calcite-dropdown >>> .calcite-dropdown-wrapper`);
-      const calciteDropdownOpen = await element.spyOnEvent("calciteDropdownOpen");
-      const calciteDropdownClose = await element.spyOnEvent("calciteDropdownClose");
-      let waitForCalciteDropdownOpen = page.waitForEvent("calciteDropdownOpen");
-      const waitForCalciteDropdownClose = page.waitForEvent("calciteDropdownClose");
+      await page.setContent(html`<calcite-dropdown>
+        <calcite-button id="trigger" slot="trigger">Open dropdown</calcite-button>
+        <calcite-dropdown-group id="group-1" selection-mode="single">
+          <calcite-dropdown-item id="item-1"> Dropdown Item Content </calcite-dropdown-item>
+          <calcite-dropdown-item id="item-2" selected> Dropdown Item Content </calcite-dropdown-item>
+          <calcite-dropdown-item id="item-3"> Dropdown Item Content </calcite-dropdown-item>
+        </calcite-dropdown-group>
+      </calcite-dropdown>`);
 
+      const element = await page.find("calcite-dropdown");
+      const trigger = await element.find("#trigger");
+      const item1 = await element.find("calcite-dropdown-item[id='item-1']");
+      const dropdownWrapper = await page.find("calcite-dropdown >>> .calcite-dropdown-wrapper");
       expect(await dropdownWrapper.isVisible()).toBe(false);
       await trigger.click();
       await page.waitForChanges();
       expect(await dropdownWrapper.isVisible()).toBe(true);
-      await waitForCalciteDropdownOpen;
-      expect(calciteDropdownOpen).toHaveReceivedEventTimes(1);
-      expect(calciteDropdownClose).toHaveReceivedEventTimes(0);
-
-      await element.callMethod("setFocus");
-      await page.waitForChanges();
-      await page.keyboard.press("Space");
+      await item1.click();
       await page.waitForChanges();
       expect(await dropdownWrapper.isVisible()).toBe(false);
-      await waitForCalciteDropdownClose;
-      expect(calciteDropdownOpen).toHaveReceivedEventTimes(1);
-      expect(calciteDropdownClose).toHaveReceivedEventTimes(1);
+    });
 
-      waitForCalciteDropdownOpen = page.waitForEvent("calciteDropdownOpen");
+    it("remains open when close-on-select-disabled is requested and selected item is not in a selection-mode:none group", async () => {
+      const page = await newE2EPage();
+      await page.setContent(html`<calcite-dropdown close-on-select-disabled>
+        <calcite-button id="trigger" slot="trigger">Open dropdown</calcite-button>
+        <calcite-dropdown-group id="group-1" selection-mode="single">
+          <calcite-dropdown-item id="item-1"> Dropdown Item Content </calcite-dropdown-item>
+          <calcite-dropdown-item id="item-2" selected> Dropdown Item Content </calcite-dropdown-item>
+          <calcite-dropdown-item>
+            <div id="item-3">Dropdown Item Content</div>
+          </calcite-dropdown-item>
+        </calcite-dropdown-group>
+      </calcite-dropdown>`);
 
-      await page.keyboard.press("Enter");
+      const element = await page.find("calcite-dropdown");
+      const trigger = await element.find("#trigger");
+      const item1 = await element.find("#item-1");
+      const item3 = await element.find("#item-3");
+      const dropdownWrapper = await page.find("calcite-dropdown >>> .calcite-dropdown-wrapper");
+      expect(await dropdownWrapper.isVisible()).toBe(false);
+      await trigger.click();
+      await page.waitForChanges();
+      expect(await dropdownWrapper.isVisible()).toBe(true);
+      await item1.click();
+      await page.waitForChanges();
+      expect(await dropdownWrapper.isVisible()).toBe(true);
+      await item3.click();
       await page.waitForChanges();
       expect(await dropdownWrapper.isVisible()).toBe(true);
-      await waitForCalciteDropdownOpen;
-      expect(calciteDropdownOpen).toHaveReceivedEventTimes(2);
-      expect(calciteDropdownClose).toHaveReceivedEventTimes(1);
     });
 
-    it("toggle when trigger is an action", async () => {
+    it("closes when close-on-select-disabled is requested and selected item is in a selection-mode:none group", async () => {
       const page = await newE2EPage();
-      await page.setContent(html`
-        <calcite-dropdown>
-          <calcite-action slot="trigger">Open dropdown</calcite-action>
-          <calcite-dropdown-group selection-mode="single">
-            <calcite-dropdown-item id="item-1"> Dropdown Item Content</calcite-dropdown-item>
-            <calcite-dropdown-item id="item-2" selected> Dropdown Item Content</calcite-dropdown-item>
-          </calcite-dropdown-group>
-        </calcite-dropdown>
-      `);
-      const element = await page.find("calcite-dropdown");
-      const trigger = await element.find("calcite-action[slot='trigger'] >>> button");
-      const dropdownWrapper = await page.find(`calcite-dropdown >>> .calcite-dropdown-wrapper`);
-      const calciteDropdownOpen = await element.spyOnEvent("calciteDropdownOpen");
-      const calciteDropdownClose = await element.spyOnEvent("calciteDropdownClose");
-      let waitForCalciteDropdownOpen = page.waitForEvent("calciteDropdownOpen");
-      const waitForCalciteDropdownClose = page.waitForEvent("calciteDropdownClose");
+      await page.setContent(html`<calcite-dropdown close-on-select-disabled>
+        <calcite-button id="trigger" slot="trigger">Open dropdown</calcite-button>
+        <calcite-dropdown-group id="group-1" selection-mode="none">
+          <calcite-dropdown-item>
+            <div id="item-1">Dropdown Item Content</div>
+          </calcite-dropdown-item>
+          <calcite-dropdown-item id="item-2"> Dropdown Item Content </calcite-dropdown-item>
+          <calcite-dropdown-item id="item-3"> Dropdown Item Content </calcite-dropdown-item>
+        </calcite-dropdown-group>
+      </calcite-dropdown>`);
 
+      const element = await page.find("calcite-dropdown");
+      const trigger = await element.find("#trigger");
+      const item1 = await element.find("#item-1");
+      const dropdownWrapper = await page.find("calcite-dropdown >>> .calcite-dropdown-wrapper");
       expect(await dropdownWrapper.isVisible()).toBe(false);
       await trigger.click();
       await page.waitForChanges();
       expect(await dropdownWrapper.isVisible()).toBe(true);
-      await waitForCalciteDropdownOpen;
-      expect(calciteDropdownOpen).toHaveReceivedEventTimes(1);
-      expect(calciteDropdownClose).toHaveReceivedEventTimes(0);
-
-      await element.callMethod("setFocus");
-      await page.waitForChanges();
-      await page.keyboard.press("Space");
+      await item1.click();
       await page.waitForChanges();
       expect(await dropdownWrapper.isVisible()).toBe(false);
-      await waitForCalciteDropdownClose;
-      expect(calciteDropdownOpen).toHaveReceivedEventTimes(1);
-      expect(calciteDropdownClose).toHaveReceivedEventTimes(1);
+    });
 
-      waitForCalciteDropdownOpen = page.waitForEvent("calciteDropdownOpen");
+    describe("toggles the dropdown with click, enter, or space", () => {
+      it("toggles when trigger is a button", async () => {
+        const page = await newE2EPage();
+        await page.setContent(html`
+          <calcite-dropdown>
+            <calcite-button slot="trigger">Open dropdown</calcite-button>
+            <calcite-dropdown-group selection-mode="single">
+              <calcite-dropdown-item id="item-1"> Dropdown Item Content </calcite-dropdown-item>
+              <calcite-dropdown-item id="item-2" selected> Dropdown Item Content </calcite-dropdown-item>
+            </calcite-dropdown-group>
+          </calcite-dropdown>
+        `);
+        const element = await page.find("calcite-dropdown");
+        const trigger = await element.find("calcite-button[slot='trigger']");
+        const dropdownWrapper = await page.find(`calcite-dropdown >>> .calcite-dropdown-wrapper`);
+        const calciteDropdownOpen = await element.spyOnEvent("calciteDropdownOpen");
+        const calciteDropdownClose = await element.spyOnEvent("calciteDropdownClose");
+        let waitForCalciteDropdownOpen = page.waitForEvent("calciteDropdownOpen");
+        const waitForCalciteDropdownClose = page.waitForEvent("calciteDropdownClose");
+
+        expect(await dropdownWrapper.isVisible()).toBe(false);
+        await trigger.click();
+        await page.waitForChanges();
+        expect(await dropdownWrapper.isVisible()).toBe(true);
+        await waitForCalciteDropdownOpen;
+        expect(calciteDropdownOpen).toHaveReceivedEventTimes(1);
+        expect(calciteDropdownClose).toHaveReceivedEventTimes(0);
+
+        await element.callMethod("setFocus");
+        await page.waitForChanges();
+        await page.keyboard.press("Space");
+        await page.waitForChanges();
+        expect(await dropdownWrapper.isVisible()).toBe(false);
+        await waitForCalciteDropdownClose;
+        expect(calciteDropdownOpen).toHaveReceivedEventTimes(1);
+        expect(calciteDropdownClose).toHaveReceivedEventTimes(1);
+
+        waitForCalciteDropdownOpen = page.waitForEvent("calciteDropdownOpen");
+
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        expect(await dropdownWrapper.isVisible()).toBe(true);
+        await waitForCalciteDropdownOpen;
+        expect(calciteDropdownOpen).toHaveReceivedEventTimes(2);
+        expect(calciteDropdownClose).toHaveReceivedEventTimes(1);
+      });
+
+      it("toggle when trigger is an action", async () => {
+        const page = await newE2EPage();
+        await page.setContent(html`
+          <calcite-dropdown>
+            <calcite-action slot="trigger">Open dropdown</calcite-action>
+            <calcite-dropdown-group selection-mode="single">
+              <calcite-dropdown-item id="item-1"> Dropdown Item Content</calcite-dropdown-item>
+              <calcite-dropdown-item id="item-2" selected> Dropdown Item Content</calcite-dropdown-item>
+            </calcite-dropdown-group>
+          </calcite-dropdown>
+        `);
+        const element = await page.find("calcite-dropdown");
+        const trigger = await element.find("calcite-action[slot='trigger'] >>> button");
+        const dropdownWrapper = await page.find(`calcite-dropdown >>> .calcite-dropdown-wrapper`);
+        const calciteDropdownOpen = await element.spyOnEvent("calciteDropdownOpen");
+        const calciteDropdownClose = await element.spyOnEvent("calciteDropdownClose");
+        let waitForCalciteDropdownOpen = page.waitForEvent("calciteDropdownOpen");
+        const waitForCalciteDropdownClose = page.waitForEvent("calciteDropdownClose");
+
+        expect(await dropdownWrapper.isVisible()).toBe(false);
+        await trigger.click();
+        await page.waitForChanges();
+        expect(await dropdownWrapper.isVisible()).toBe(true);
+        await waitForCalciteDropdownOpen;
+        expect(calciteDropdownOpen).toHaveReceivedEventTimes(1);
+        expect(calciteDropdownClose).toHaveReceivedEventTimes(0);
+
+        await element.callMethod("setFocus");
+        await page.waitForChanges();
+        await page.keyboard.press("Space");
+        await page.waitForChanges();
+        expect(await dropdownWrapper.isVisible()).toBe(false);
+        await waitForCalciteDropdownClose;
+        expect(calciteDropdownOpen).toHaveReceivedEventTimes(1);
+        expect(calciteDropdownClose).toHaveReceivedEventTimes(1);
+
+        waitForCalciteDropdownOpen = page.waitForEvent("calciteDropdownOpen");
+
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        expect(await dropdownWrapper.isVisible()).toBe(true);
+        await waitForCalciteDropdownOpen;
+        expect(calciteDropdownOpen).toHaveReceivedEventTimes(2);
+        expect(calciteDropdownClose).toHaveReceivedEventTimes(1);
+      });
+    });
+
+    describe("Focus order with Tab key", () => {
+      it("closes dropdown and focuses the next focusable element on Tab", async () => {
+        const page = await newE2EPage();
+        await page.setContent(html`
+          <calcite-dropdown>
+            <calcite-action slot="trigger" id="trigger">Open dropdown</calcite-action>
+            <calcite-dropdown-group selection-mode="single">
+              <calcite-dropdown-item id="item-1"> Dropdown Item Content</calcite-dropdown-item>
+              <calcite-dropdown-item id="item-2" selected> Dropdown Item Content</calcite-dropdown-item>
+            </calcite-dropdown-group>
+          </calcite-dropdown>
+          <calcite-button id="button-1">Click</calcite-button>
+        `);
+        const element = await page.find("calcite-dropdown");
+        const trigger = await element.find("calcite-action[slot='trigger'] >>> button");
+        const dropdownWrapper = await page.find(`calcite-dropdown >>> .calcite-dropdown-wrapper`);
+        const calciteDropdownClose = await element.spyOnEvent("calciteDropdownClose");
+        const calciteDropdownOpen = await element.spyOnEvent("calciteDropdownOpen");
+
+        expect(await dropdownWrapper.isVisible()).toBe(false);
+        await trigger.click();
+        await page.waitForChanges();
+        expect(await dropdownWrapper.isVisible()).toBe(true);
+        expect(calciteDropdownOpen).toHaveReceivedEventTimes(1);
+        expect(calciteDropdownClose).toHaveReceivedEventTimes(0);
+        expect(await getFocusedElementProp(page, "id")).toBe("item-2");
+
+        await element.press("Tab");
+        await page.waitForChanges();
+        expect(await getFocusedElementProp(page, "id")).toBe("button-1");
+        expect(calciteDropdownClose).toHaveReceivedEventTimes(1);
+        expect(await dropdownWrapper.isVisible()).toBe(false);
+      });
+
+      it("closes dropdown and focuses the trigger on Shift+Tab", async () => {
+        const page = await newE2EPage();
+        await page.setContent(html`
+          <calcite-dropdown>
+            <calcite-action slot="trigger" id="trigger">Open dropdown</calcite-action>
+            <calcite-dropdown-group selection-mode="single">
+              <calcite-dropdown-item id="item-1"> Dropdown Item Content</calcite-dropdown-item>
+              <calcite-dropdown-item id="item-2" selected> Dropdown Item Content</calcite-dropdown-item>
+            </calcite-dropdown-group>
+          </calcite-dropdown>
+          <calcite-button id="button-1">Click</calcite-button>
+        `);
+        const element = await page.find("calcite-dropdown");
+        const trigger = await element.find("calcite-action[slot='trigger'] >>> button");
+        const dropdownWrapper = await page.find(`calcite-dropdown >>> .calcite-dropdown-wrapper`);
+        const calciteDropdownClose = await element.spyOnEvent("calciteDropdownClose");
+        const calciteDropdownOpen = await element.spyOnEvent("calciteDropdownOpen");
+
+        expect(await dropdownWrapper.isVisible()).toBe(false);
+        await trigger.click();
+        await page.waitForChanges();
+        expect(await dropdownWrapper.isVisible()).toBe(true);
+        expect(calciteDropdownOpen).toHaveReceivedEventTimes(1);
+        expect(calciteDropdownClose).toHaveReceivedEventTimes(0);
+        expect(await getFocusedElementProp(page, "id")).toBe("item-2");
+
+        await page.keyboard.down("Shift");
+        await element.press("Tab");
+        await page.keyboard.up("Shift");
+        await page.waitForChanges();
+        expect(await getFocusedElementProp(page, "id")).toBe("trigger");
+        expect(calciteDropdownClose).toHaveReceivedEventTimes(1);
+        expect(await dropdownWrapper.isVisible()).toBe(false);
+      });
+    });
 
-      await page.keyboard.press("Enter");
+    it("closes existing open dropdown when opened", async () => {
+      const page = await newE2EPage();
+      await page.setContent(html` <calcite-dropdown id="dropdown-1">
+          <calcite-button id="trigger" slot="trigger">Open dropdown</calcite-button>
+          <calcite-dropdown-group id="group-1" selection-mode="single">
+            <calcite-dropdown-item id="item-1"> Dropdown Item Content </calcite-dropdown-item>
+            <calcite-dropdown-item id="item-2" selected> Dropdown Item Content </calcite-dropdown-item>
+            <calcite-dropdown-item id="item-3"> Dropdown Item Content </calcite-dropdown-item>
+          </calcite-dropdown-group>
+        </calcite-dropdown>
+        <calcite-dropdown id="dropdown-2">
+          <calcite-button id="trigger" slot="trigger">Open dropdown</calcite-button>
+          <calcite-dropdown-group id="group-1" selection-mode="single">
+            <calcite-dropdown-item id="item-1"> Dropdown Item Content </calcite-dropdown-item>
+            <calcite-dropdown-item id="item-2" selected> Dropdown Item Content </calcite-dropdown-item>
+            <calcite-dropdown-item id="item-3"> Dropdown Item Content </calcite-dropdown-item>
+          </calcite-dropdown-group>
+        </calcite-dropdown>`);
+
+      const element1 = await page.find("calcite-dropdown[id='dropdown-1']");
+      const element2 = await page.find("calcite-dropdown[id='dropdown-2']");
+      const trigger1 = await element1.find("#trigger");
+      const trigger2 = await element2.find("#trigger");
+      const dropdownWrapper1 = await page.find("calcite-dropdown[id='dropdown-1'] >>> .calcite-dropdown-wrapper");
+      const dropdownWrapper2 = await page.find("calcite-dropdown[id='dropdown-2'] >>> .calcite-dropdown-wrapper");
+      expect(await dropdownWrapper1.isVisible()).toBe(false);
+      expect(await dropdownWrapper2.isVisible()).toBe(false);
+      await trigger1.click();
       await page.waitForChanges();
-      expect(await dropdownWrapper.isVisible()).toBe(true);
-      await waitForCalciteDropdownOpen;
-      expect(calciteDropdownOpen).toHaveReceivedEventTimes(2);
-      expect(calciteDropdownClose).toHaveReceivedEventTimes(1);
+      expect(await dropdownWrapper1.isVisible()).toBe(true);
+      expect(await dropdownWrapper2.isVisible()).toBe(false);
+      await trigger2.click();
+      await page.waitForChanges();
+      expect(await dropdownWrapper1.isVisible()).toBe(false);
+      expect(await dropdownWrapper2.isVisible()).toBe(true);
     });
-  });
 
-  describe("Focus order with Tab key", () => {
-    it("closes dropdown and focuses the next focusable element on Tab", async () => {
+    it("focus is returned to trigger after close", async () => {
       const page = await newE2EPage();
       await page.setContent(html`
         <calcite-dropdown>
-          <calcite-action slot="trigger" id="trigger">Open dropdown</calcite-action>
-          <calcite-dropdown-group selection-mode="single">
-            <calcite-dropdown-item id="item-1"> Dropdown Item Content</calcite-dropdown-item>
-            <calcite-dropdown-item id="item-2" selected> Dropdown Item Content</calcite-dropdown-item>
+          <calcite-button id="trigger" slot="trigger">Open dropdown</calcite-button>
+          <calcite-dropdown-group id="group-1" selection-mode="single">
+            <calcite-dropdown-item id="item-1"> Dropdown Item Content </calcite-dropdown-item>
+            <calcite-dropdown-item id="item-2" selected> Dropdown Item Content </calcite-dropdown-item>
+            <calcite-dropdown-item id="item-3"> Dropdown Item Content </calcite-dropdown-item>
           </calcite-dropdown-group>
         </calcite-dropdown>
-        <calcite-button id="button-1">Click</calcite-button>
       `);
-      const element = await page.find("calcite-dropdown");
-      const trigger = await element.find("calcite-action[slot='trigger'] >>> button");
-      const dropdownWrapper = await page.find(`calcite-dropdown >>> .calcite-dropdown-wrapper`);
-      const calciteDropdownClose = await element.spyOnEvent("calciteDropdownClose");
-      const calciteDropdownOpen = await element.spyOnEvent("calciteDropdownOpen");
 
+      const element = await page.find("calcite-dropdown");
+      const trigger = await element.find("#trigger");
+      const item1 = await element.find("calcite-dropdown-item[id='item-1']");
+      const dropdownWrapper = await page.find("calcite-dropdown >>> .calcite-dropdown-wrapper");
       expect(await dropdownWrapper.isVisible()).toBe(false);
       await trigger.click();
       await page.waitForChanges();
       expect(await dropdownWrapper.isVisible()).toBe(true);
-      expect(calciteDropdownOpen).toHaveReceivedEventTimes(1);
-      expect(calciteDropdownClose).toHaveReceivedEventTimes(0);
-      expect(await getFocusedElementProp(page, "id")).toBe("item-2");
-
-      await element.press("Tab");
+      await item1.click();
       await page.waitForChanges();
-      expect(await getFocusedElementProp(page, "id")).toBe("button-1");
-      expect(calciteDropdownClose).toHaveReceivedEventTimes(1);
       expect(await dropdownWrapper.isVisible()).toBe(false);
+      expect(await page.evaluate(() => document.activeElement.id)).toEqual("trigger");
     });
 
-    it("closes dropdown and focuses the trigger on Shift+Tab", async () => {
+    it("accepts multiple triggers", async () => {
       const page = await newE2EPage();
       await page.setContent(html`
         <calcite-dropdown>
-          <calcite-action slot="trigger" id="trigger">Open dropdown</calcite-action>
-          <calcite-dropdown-group selection-mode="single">
-            <calcite-dropdown-item id="item-1"> Dropdown Item Content</calcite-dropdown-item>
-            <calcite-dropdown-item id="item-2" selected> Dropdown Item Content</calcite-dropdown-item>
+          <calcite-button class="trigger" slot="trigger">Open dropdown</calcite-button>
+          <calcite-icon class="trigger" icon="caretDown" scale="s" slot="trigger"></calcite-icon>
+          <calcite-dropdown-group id="group-1" selection-mode="single">
+            <calcite-dropdown-item id="item-1"> Dropdown Item Content </calcite-dropdown-item>
+            <calcite-dropdown-item id="item-2" selected> Dropdown Item Content </calcite-dropdown-item>
+            <calcite-dropdown-item id="item-3"> Dropdown Item Content </calcite-dropdown-item>
           </calcite-dropdown-group>
         </calcite-dropdown>
-        <calcite-button id="button-1">Click</calcite-button>
       `);
-      const element = await page.find("calcite-dropdown");
-      const trigger = await element.find("calcite-action[slot='trigger'] >>> button");
-      const dropdownWrapper = await page.find(`calcite-dropdown >>> .calcite-dropdown-wrapper`);
-      const calciteDropdownClose = await element.spyOnEvent("calciteDropdownClose");
-      const calciteDropdownOpen = await element.spyOnEvent("calciteDropdownOpen");
 
+      const element = await page.find("calcite-dropdown");
+      const trigger = await element.findAll(".trigger");
+      const dropdownWrapper = await page.find("calcite-dropdown >>> .calcite-dropdown-wrapper");
+      await trigger[0].click();
+      expect(await dropdownWrapper.isVisible()).toBe(true);
+      await trigger[0].click();
+      await page.waitForChanges();
       expect(await dropdownWrapper.isVisible()).toBe(false);
-      await trigger.click();
       await page.waitForChanges();
+      await trigger[1].click();
       expect(await dropdownWrapper.isVisible()).toBe(true);
-      expect(calciteDropdownOpen).toHaveReceivedEventTimes(1);
-      expect(calciteDropdownClose).toHaveReceivedEventTimes(0);
-      expect(await getFocusedElementProp(page, "id")).toBe("item-2");
-
-      await page.keyboard.down("Shift");
-      await element.press("Tab");
-      await page.keyboard.up("Shift");
+      await trigger[1].click();
       await page.waitForChanges();
-      expect(await getFocusedElementProp(page, "id")).toBe("trigger");
-      expect(calciteDropdownClose).toHaveReceivedEventTimes(1);
       expect(await dropdownWrapper.isVisible()).toBe(false);
     });
-  });
-
-  it("closes existing open dropdown when opened", async () => {
-    const page = await newE2EPage();
-    await page.setContent(html` <calcite-dropdown id="dropdown-1">
-        <calcite-button id="trigger" slot="trigger">Open dropdown</calcite-button>
-        <calcite-dropdown-group id="group-1" selection-mode="single">
-          <calcite-dropdown-item id="item-1"> Dropdown Item Content </calcite-dropdown-item>
-          <calcite-dropdown-item id="item-2" selected> Dropdown Item Content </calcite-dropdown-item>
-          <calcite-dropdown-item id="item-3"> Dropdown Item Content </calcite-dropdown-item>
-        </calcite-dropdown-group>
-      </calcite-dropdown>
-      <calcite-dropdown id="dropdown-2">
-        <calcite-button id="trigger" slot="trigger">Open dropdown</calcite-button>
-        <calcite-dropdown-group id="group-1" selection-mode="single">
-          <calcite-dropdown-item id="item-1"> Dropdown Item Content </calcite-dropdown-item>
-          <calcite-dropdown-item id="item-2" selected> Dropdown Item Content </calcite-dropdown-item>
-          <calcite-dropdown-item id="item-3"> Dropdown Item Content </calcite-dropdown-item>
-        </calcite-dropdown-group>
-      </calcite-dropdown>`);
-
-    const element1 = await page.find("calcite-dropdown[id='dropdown-1']");
-    const element2 = await page.find("calcite-dropdown[id='dropdown-2']");
-    const trigger1 = await element1.find("#trigger");
-    const trigger2 = await element2.find("#trigger");
-    const dropdownWrapper1 = await page.find("calcite-dropdown[id='dropdown-1'] >>> .calcite-dropdown-wrapper");
-    const dropdownWrapper2 = await page.find("calcite-dropdown[id='dropdown-2'] >>> .calcite-dropdown-wrapper");
-    expect(await dropdownWrapper1.isVisible()).toBe(false);
-    expect(await dropdownWrapper2.isVisible()).toBe(false);
-    await trigger1.click();
-    await page.waitForChanges();
-    expect(await dropdownWrapper1.isVisible()).toBe(true);
-    expect(await dropdownWrapper2.isVisible()).toBe(false);
-    await trigger2.click();
-    await page.waitForChanges();
-    expect(await dropdownWrapper1.isVisible()).toBe(false);
-    expect(await dropdownWrapper2.isVisible()).toBe(true);
-  });
-
-  it("focus is returned to trigger after close", async () => {
-    const page = await newE2EPage();
-    await page.setContent(html`
-      <calcite-dropdown>
-        <calcite-button id="trigger" slot="trigger">Open dropdown</calcite-button>
-        <calcite-dropdown-group id="group-1" selection-mode="single">
-          <calcite-dropdown-item id="item-1"> Dropdown Item Content </calcite-dropdown-item>
-          <calcite-dropdown-item id="item-2" selected> Dropdown Item Content </calcite-dropdown-item>
-          <calcite-dropdown-item id="item-3"> Dropdown Item Content </calcite-dropdown-item>
-        </calcite-dropdown-group>
-      </calcite-dropdown>
-    `);
-
-    const element = await page.find("calcite-dropdown");
-    const trigger = await element.find("#trigger");
-    const item1 = await element.find("calcite-dropdown-item[id='item-1']");
-    const dropdownWrapper = await page.find("calcite-dropdown >>> .calcite-dropdown-wrapper");
-    expect(await dropdownWrapper.isVisible()).toBe(false);
-    await trigger.click();
-    await page.waitForChanges();
-    expect(await dropdownWrapper.isVisible()).toBe(true);
-    await item1.click();
-    await page.waitForChanges();
-    expect(await dropdownWrapper.isVisible()).toBe(false);
-    expect(await page.evaluate(() => document.activeElement.id)).toEqual("trigger");
-  });
 
-  it("accepts multiple triggers", async () => {
-    const page = await newE2EPage();
-    await page.setContent(html`
-      <calcite-dropdown>
-        <calcite-button class="trigger" slot="trigger">Open dropdown</calcite-button>
-        <calcite-icon class="trigger" icon="caretDown" scale="s" slot="trigger"></calcite-icon>
-        <calcite-dropdown-group id="group-1" selection-mode="single">
-          <calcite-dropdown-item id="item-1"> Dropdown Item Content </calcite-dropdown-item>
-          <calcite-dropdown-item id="item-2" selected> Dropdown Item Content </calcite-dropdown-item>
-          <calcite-dropdown-item id="item-3"> Dropdown Item Content </calcite-dropdown-item>
-        </calcite-dropdown-group>
-      </calcite-dropdown>
-    `);
-
-    const element = await page.find("calcite-dropdown");
-    const trigger = await element.findAll(".trigger");
-    const dropdownWrapper = await page.find("calcite-dropdown >>> .calcite-dropdown-wrapper");
-    await trigger[0].click();
-    expect(await dropdownWrapper.isVisible()).toBe(true);
-    await trigger[0].click();
-    await page.waitForChanges();
-    expect(await dropdownWrapper.isVisible()).toBe(false);
-    await page.waitForChanges();
-    await trigger[1].click();
-    expect(await dropdownWrapper.isVisible()).toBe(true);
-    await trigger[1].click();
-    await page.waitForChanges();
-    expect(await dropdownWrapper.isVisible()).toBe(false);
-  });
+    describe("accessible", () => {
+      accessible(dedent`${dropdownSelectionModeContent}`);
+    });
 
-  describe("accessible", () => {
-    accessible(dedent`${dropdownSelectionModeContent}`);
-  });
+    it("correct role and aria properties are applied based on selection type", async () => {
+      const page = await newE2EPage();
+      await page.setContent(dedent`${dropdownSelectionModeContent}`);
+      await page.waitForChanges();
 
-  it("correct role and aria properties are applied based on selection type", async () => {
-    const page = await newE2EPage();
-    await page.setContent(dedent`${dropdownSelectionModeContent}`);
-    await page.waitForChanges();
+      const element = await page.find("calcite-dropdown");
+      const group1 = await element.find("calcite-dropdown-group[id='group-1']");
+      const group2 = await element.find("calcite-dropdown-group[id='group-2']");
+      const group3 = await element.find("calcite-dropdown-group[id='group-3']");
+      const item1 = await element.find("calcite-dropdown-item[id='item-1']");
+      const item2 = await element.find("calcite-dropdown-item[id='item-2']");
+      const item3 = await element.find("calcite-dropdown-item[id='item-3']");
+      const item4 = await element.find("calcite-dropdown-item[id='item-4']");
+      const item5 = await element.find("calcite-dropdown-item[id='item-5']");
+      const item6 = await element.find("calcite-dropdown-item[id='item-6']");
+      const item7 = await element.find("calcite-dropdown-item[id='item-7']");
 
-    const element = await page.find("calcite-dropdown");
-    const group1 = await element.find("calcite-dropdown-group[id='group-1']");
-    const group2 = await element.find("calcite-dropdown-group[id='group-2']");
-    const group3 = await element.find("calcite-dropdown-group[id='group-3']");
-    const item1 = await element.find("calcite-dropdown-item[id='item-1']");
-    const item2 = await element.find("calcite-dropdown-item[id='item-2']");
-    const item3 = await element.find("calcite-dropdown-item[id='item-3']");
-    const item4 = await element.find("calcite-dropdown-item[id='item-4']");
-    const item5 = await element.find("calcite-dropdown-item[id='item-5']");
-    const item6 = await element.find("calcite-dropdown-item[id='item-6']");
-    const item7 = await element.find("calcite-dropdown-item[id='item-7']");
+      expect(group1).toEqualAttribute("role", "group");
+      expect(group2).toEqualAttribute("role", "group");
+      expect(group3).toEqualAttribute("role", "group");
 
-    expect(group1).toEqualAttribute("role", "group");
-    expect(group2).toEqualAttribute("role", "group");
-    expect(group3).toEqualAttribute("role", "group");
+      expect(item1).toEqualAttribute("role", "menuitemcheckbox");
+      expect(item1).toEqualAttribute("aria-checked", "false");
 
-    expect(item1).toEqualAttribute("role", "menuitemcheckbox");
-    expect(item1).toEqualAttribute("aria-checked", "false");
+      expect(item2).toEqualAttribute("role", "menuitemcheckbox");
+      expect(item2).toEqualAttribute("aria-checked", "true");
 
-    expect(item2).toEqualAttribute("role", "menuitemcheckbox");
-    expect(item2).toEqualAttribute("aria-checked", "true");
+      expect(item3).toEqualAttribute("role", "menuitemcheckbox");
+      expect(item3).toEqualAttribute("aria-checked", "true");
 
-    expect(item3).toEqualAttribute("role", "menuitemcheckbox");
-    expect(item3).toEqualAttribute("aria-checked", "true");
+      expect(item4).toEqualAttribute("role", "menuitemradio");
+      expect(item4).toEqualAttribute("aria-checked", "false");
 
-    expect(item4).toEqualAttribute("role", "menuitemradio");
-    expect(item4).toEqualAttribute("aria-checked", "false");
+      expect(item5).toEqualAttribute("role", "menuitemradio");
+      expect(item5).toEqualAttribute("aria-checked", "true");
 
-    expect(item5).toEqualAttribute("role", "menuitemradio");
-    expect(item5).toEqualAttribute("aria-checked", "true");
+      expect(item6).toEqualAttribute("role", "menuitem");
+      expect(item6).not.toHaveAttribute("aria-checked");
 
-    expect(item6).toEqualAttribute("role", "menuitem");
-    expect(item6).not.toHaveAttribute("aria-checked");
+      expect(item7).not.toHaveAttribute("role");
+      expect(item7).not.toHaveAttribute("aria-checked");
+    });
 
-    expect(item7).not.toHaveAttribute("role");
-    expect(item7).not.toHaveAttribute("aria-checked");
-  });
+    it("item selection should work when placed inside shadow DOM (#992)", async () => {
+      const wrappedDropdownTemplateHTML = html`
+        <calcite-dropdown close-on-select-disabled>
+          <calcite-button slot="trigger">Open</calcite-button>
+          <calcite-dropdown-group selection-mode="single">
+            <calcite-dropdown-item id="item-1" selected>1</calcite-dropdown-item>
+            <calcite-dropdown-item id="item-2">2</calcite-dropdown-item>
+            <calcite-dropdown-item id="item-3">3</calcite-dropdown-item>
+          </calcite-dropdown-group>
+        </calcite-dropdown>
+      `;
 
-  it("item selection should work when placed inside shadow DOM (#992)", async () => {
-    const wrappedDropdownTemplateHTML = html`
-      <calcite-dropdown close-on-select-disabled>
-        <calcite-button slot="trigger">Open</calcite-button>
-        <calcite-dropdown-group selection-mode="single">
-          <calcite-dropdown-item id="item-1" selected>1</calcite-dropdown-item>
-          <calcite-dropdown-item id="item-2">2</calcite-dropdown-item>
-          <calcite-dropdown-item id="item-3">3</calcite-dropdown-item>
-        </calcite-dropdown-group>
-      </calcite-dropdown>
-    `;
+      const page = await newE2EPage({
+        // load page with the dropdown template,
+        // so they're available in the browser-evaluated fn below
+        html: wrappedDropdownTemplateHTML,
+      });
+      await page.waitForChanges();
 
-    const page = await newE2EPage({
-      // load page with the dropdown template,
-      // so they're available in the browser-evaluated fn below
-      html: wrappedDropdownTemplateHTML,
-    });
-    await page.waitForChanges();
+      const wrapperName = "dropdown-wrapping-component";
 
-    const wrapperName = "dropdown-wrapping-component";
+      await page.evaluate(
+        async (templateHTML: string, wrapperName: string): Promise<void> => {
+          customElements.define(
+            wrapperName,
+            class extends HTMLElement {
+              constructor() {
+                super();
+              }
 
-    await page.evaluate(
-      async (templateHTML: string, wrapperName: string): Promise<void> => {
-        customElements.define(
-          wrapperName,
-          class extends HTMLElement {
-            constructor() {
-              super();
+              connectedCallback(): void {
+                this.attachShadow({ mode: "open" }).innerHTML = templateHTML;
+              }
             }
+          );
 
-            connectedCallback(): void {
-              this.attachShadow({ mode: "open" }).innerHTML = templateHTML;
-            }
-          }
-        );
+          document.body.innerHTML = `<${wrapperName}></${wrapperName}>`;
+
+          const wrapper = document.querySelector(wrapperName);
+          wrapper.shadowRoot.querySelector<HTMLCalciteDropdownItemElement>("#item-3").click();
+        },
+        wrappedDropdownTemplateHTML,
+        wrapperName
+      );
 
-        document.body.innerHTML = `<${wrapperName}></${wrapperName}>`;
+      await page.waitForChanges();
 
+      const finalSelectedItem = await page.evaluate(async (wrapperName: string): Promise<string> => {
         const wrapper = document.querySelector(wrapperName);
-        wrapper.shadowRoot.querySelector<HTMLCalciteDropdownItemElement>("#item-3").click();
-      },
-      wrappedDropdownTemplateHTML,
-      wrapperName
-    );
+        return wrapper.shadowRoot.querySelector("calcite-dropdown-item[selected]").id;
+      }, wrapperName);
 
-    await page.waitForChanges();
+      await expect(finalSelectedItem).toBe("item-3");
+    });
 
-    const finalSelectedItem = await page.evaluate(async (wrapperName: string): Promise<string> => {
-      const wrapper = document.querySelector(wrapperName);
-      return wrapper.shadowRoot.querySelector("calcite-dropdown-item[selected]").id;
-    }, wrapperName);
+    it.skip("dropdown should not overflow when wrapped inside a tab #3007", async () => {
+      const page = await newE2EPage({
+        html: html`<calcite-tabs>
+          <calcite-tab-nav slot="title-group">
+            <calcite-tab-title is-active>First tab</calcite-tab-title>
+          </calcite-tab-nav>
+          <calcite-tab is-active>
+            <calcite-dropdown>
+              <calcite-button slot="trigger" class="dropdown">Dropdown</calcite-button>
+              <calcite-dropdown-group group-title="Select one">
+                <calcite-dropdown-item>First</calcite-dropdown-item>
+                <calcite-dropdown-item>Second</calcite-dropdown-item>
+              </calcite-dropdown-group>
+            </calcite-dropdown>
+          </calcite-tab>
+        </calcite-tabs>`,
+      });
+      await page.waitForChanges();
 
-    await expect(finalSelectedItem).toBe("item-3");
-  });
+      const button = await page.find("calcite-button");
 
-  it.skip("dropdown should not overflow when wrapped inside a tab #3007", async () => {
-    const page = await newE2EPage({
-      html: html`<calcite-tabs>
-        <calcite-tab-nav slot="title-group">
-          <calcite-tab-title is-active>First tab</calcite-tab-title>
-        </calcite-tab-nav>
-        <calcite-tab is-active>
-          <calcite-dropdown>
-            <calcite-button slot="trigger" class="dropdown">Dropdown</calcite-button>
-            <calcite-dropdown-group group-title="Select one">
-              <calcite-dropdown-item>First</calcite-dropdown-item>
-              <calcite-dropdown-item>Second</calcite-dropdown-item>
-            </calcite-dropdown-group>
-          </calcite-dropdown>
-        </calcite-tab>
-      </calcite-tabs>`,
+      await button.click();
+      await page.waitForChanges();
+
+      expect(
+        await page.$eval("calcite-dropdown", (dropdown) => {
+          // check whether the element is overflown, ref :https://stackoverflow.com/questions/9333379/check-if-an-elements-content-is-overflowing
+          const { clientWidth, clientHeight, scrollWidth, scrollHeight } = dropdown;
+          return scrollHeight > clientHeight || scrollWidth > clientWidth;
+        })
+      ).toBe(false);
     });
-    await page.waitForChanges();
 
-    const button = await page.find("calcite-button");
+    it("dropdown wrapper should have height when filter results empty and combined with a PickList in Panel  #3048", async () => {
+      const page = await newE2EPage({
+        html: html`<calcite-panel heading="Issue #3048">
+          <calcite-pick-list filter-enabled>
+            <calcite-dropdown slot="menu-actions" placement="bottom-end" type="click">
+              <calcite-action slot="trigger" title="Sort" icon="sort-descending"> </calcite-action>
+              <calcite-dropdown-group selection-mode="single">
+                <calcite-dropdown-item>Display name</calcite-dropdown-item>
+                <calcite-dropdown-item>Type</calcite-dropdown-item>
+              </calcite-dropdown-group>
+            </calcite-dropdown>
+            <calcite-pick-list-item label="calcite" description="calcite!"> </calcite-pick-list-item>
+            <calcite-pick-list-item label="calcite" description="calcite"> </calcite-pick-list-item>
+          </calcite-pick-list>
+        </calcite-panel>`,
+      });
+      await page.waitForChanges();
+
+      const dropdownContentHeight = await (
+        await page.find("calcite-dropdown >>> .calcite-dropdown-wrapper")
+      ).getComputedStyle();
 
-    await button.click();
-    await page.waitForChanges();
+      await page.evaluate(() => {
+        const filter = document.querySelector(`calcite-pick-list`).shadowRoot.querySelector("calcite-filter");
+        const filterInput = filter.shadowRoot.querySelector("calcite-input");
+        filterInput.value = "numbers";
+      });
 
-    expect(
-      await page.$eval("calcite-dropdown", (dropdown) => {
-        // check whether the element is overflown, ref :https://stackoverflow.com/questions/9333379/check-if-an-elements-content-is-overflowing
-        const { clientWidth, clientHeight, scrollWidth, scrollHeight } = dropdown;
-        return scrollHeight > clientHeight || scrollWidth > clientWidth;
-      })
-    ).toBe(false);
-  });
+      expect(dropdownContentHeight.height).toBe("72px");
+    });
 
-  it("dropdown wrapper should have height when filter results empty and combined with a PickList in Panel  #3048", async () => {
-    const page = await newE2EPage({
-      html: html`<calcite-panel heading="Issue #3048">
-        <calcite-pick-list filter-enabled>
-          <calcite-dropdown slot="menu-actions" placement="bottom-end" type="click">
-            <calcite-action slot="trigger" title="Sort" icon="sort-descending"> </calcite-action>
+    describe("owns a floating-ui", () => {
+      floatingUIOwner(
+        html`
+          <calcite-dropdown>
+            <calcite-button slot="trigger">Open</calcite-button>
             <calcite-dropdown-group selection-mode="single">
-              <calcite-dropdown-item>Display name</calcite-dropdown-item>
-              <calcite-dropdown-item>Type</calcite-dropdown-item>
+              <calcite-dropdown-item id="item-1" selected>1</calcite-dropdown-item>
+              <calcite-dropdown-item id="item-2">2</calcite-dropdown-item>
+              <calcite-dropdown-item id="item-3">3</calcite-dropdown-item>
             </calcite-dropdown-group>
           </calcite-dropdown>
-          <calcite-pick-list-item label="calcite" description="calcite!"> </calcite-pick-list-item>
-          <calcite-pick-list-item label="calcite" description="calcite"> </calcite-pick-list-item>
-        </calcite-pick-list>
-      </calcite-panel>`,
-    });
-    await page.waitForChanges();
-
-    const dropdownContentHeight = await (
-      await page.find("calcite-dropdown >>> .calcite-dropdown-wrapper")
-    ).getComputedStyle();
-
-    await page.evaluate(() => {
-      const filter = document.querySelector(`calcite-pick-list`).shadowRoot.querySelector("calcite-filter");
-      const filterInput = filter.shadowRoot.querySelector("calcite-input");
-      filterInput.value = "numbers";
+        `,
+        "open",
+        {
+          shadowSelector: ".calcite-dropdown-wrapper",
+        }
+      );
     });
 
-    expect(dropdownContentHeight.height).toBe("72px");
-  });
-
-  describe("owns a floating-ui", () => {
-    floatingUIOwner(
-      html`
+    it("should emit component status for transition-chained events: 'calciteDropdownBeforeOpen', 'calciteDropdownOpen', 'calciteDropdownBeforeClose', 'calciteDropdownClose'", async () => {
+      const page = await newE2EPage();
+      await page.setContent(html`
         <calcite-dropdown>
-          <calcite-button slot="trigger">Open</calcite-button>
-          <calcite-dropdown-group selection-mode="single">
-            <calcite-dropdown-item id="item-1" selected>1</calcite-dropdown-item>
-            <calcite-dropdown-item id="item-2">2</calcite-dropdown-item>
-            <calcite-dropdown-item id="item-3">3</calcite-dropdown-item>
+          <calcite-button slot="trigger">Open dropdown</calcite-button>
+          <calcite-dropdown-group id="group-1">
+            <calcite-dropdown-item id="item-1"> Dropdown Item Content </calcite-dropdown-item>
+            <calcite-dropdown-item id="item-2" selected> Dropdown Item Content </calcite-dropdown-item>
+            <calcite-dropdown-item id="item-3"> Dropdown Item Content </calcite-dropdown-item>
           </calcite-dropdown-group>
         </calcite-dropdown>
-      `,
-      "open",
-      {
-        shadowSelector: ".calcite-dropdown-wrapper",
-      }
-    );
-  });
-
-  it("should emit component status for transition-chained events: 'calciteDropdownBeforeOpen', 'calciteDropdownOpen', 'calciteDropdownBeforeClose', 'calciteDropdownClose'", async () => {
-    const page = await newE2EPage();
-    await page.setContent(html`
-      <calcite-dropdown>
-        <calcite-button slot="trigger">Open dropdown</calcite-button>
-        <calcite-dropdown-group id="group-1">
-          <calcite-dropdown-item id="item-1"> Dropdown Item Content </calcite-dropdown-item>
-          <calcite-dropdown-item id="item-2" selected> Dropdown Item Content </calcite-dropdown-item>
-          <calcite-dropdown-item id="item-3"> Dropdown Item Content </calcite-dropdown-item>
-        </calcite-dropdown-group>
-      </calcite-dropdown>
-    `);
-    const element = await page.find(`calcite-dropdown`);
-    const group = await page.find(`calcite-dropdown >>> .${CSS.calciteDropdownContent}`);
+      `);
+      const element = await page.find(`calcite-dropdown`);
+      const group = await page.find(`calcite-dropdown >>> .${CSS.calciteDropdownContent}`);
 
-    expect(await group.isVisible()).toBe(false);
+      expect(await group.isVisible()).toBe(false);
 
-    const calciteDropdownBeforeOpenEvent = page.waitForEvent("calciteDropdownBeforeOpen");
-    const calciteDropdownOpenEvent = page.waitForEvent("calciteDropdownOpen");
+      const calciteDropdownBeforeOpenEvent = page.waitForEvent("calciteDropdownBeforeOpen");
+      const calciteDropdownOpenEvent = page.waitForEvent("calciteDropdownOpen");
 
-    const calciteDropdownBeforeOpenSpy = await element.spyOnEvent("calciteDropdownBeforeOpen");
-    const calciteDropdownOpenSpy = await element.spyOnEvent("calciteDropdownOpen");
+      const calciteDropdownBeforeOpenSpy = await element.spyOnEvent("calciteDropdownBeforeOpen");
+      const calciteDropdownOpenSpy = await element.spyOnEvent("calciteDropdownOpen");
 
-    element.setProperty("open", true);
-    await page.waitForChanges();
+      element.setProperty("open", true);
+      await page.waitForChanges();
 
-    expect(await element.getProperty("open")).toBe(true);
-    await calciteDropdownBeforeOpenEvent;
-    await calciteDropdownOpenEvent;
+      expect(await element.getProperty("open")).toBe(true);
+      await calciteDropdownBeforeOpenEvent;
+      await calciteDropdownOpenEvent;
 
-    expect(calciteDropdownBeforeOpenSpy).toHaveReceivedEventTimes(1);
-    expect(calciteDropdownOpenSpy).toHaveReceivedEventTimes(1);
+      expect(calciteDropdownBeforeOpenSpy).toHaveReceivedEventTimes(1);
+      expect(calciteDropdownOpenSpy).toHaveReceivedEventTimes(1);
 
-    expect(await group.isVisible()).toBe(true);
+      expect(await group.isVisible()).toBe(true);
 
-    const calciteDropdownBeforeCloseEvent = page.waitForEvent("calciteDropdownBeforeClose");
-    const calciteDropdownCloseEvent = page.waitForEvent("calciteDropdownClose");
+      const calciteDropdownBeforeCloseEvent = page.waitForEvent("calciteDropdownBeforeClose");
+      const calciteDropdownCloseEvent = page.waitForEvent("calciteDropdownClose");
 
-    const calciteDropdownBeforeCloseSpy = await element.spyOnEvent("calciteDropdownBeforeClose");
-    const calciteDropdownCloseSpy = await element.spyOnEvent("calciteDropdownClose");
+      const calciteDropdownBeforeCloseSpy = await element.spyOnEvent("calciteDropdownBeforeClose");
+      const calciteDropdownCloseSpy = await element.spyOnEvent("calciteDropdownClose");
 
-    element.setProperty("open", false);
-    await page.waitForChanges();
+      element.setProperty("open", false);
+      await page.waitForChanges();
 
-    await calciteDropdownBeforeCloseEvent;
-    await calciteDropdownCloseEvent;
+      await calciteDropdownBeforeCloseEvent;
+      await calciteDropdownCloseEvent;
 
-    expect(calciteDropdownBeforeCloseSpy).toHaveReceivedEventTimes(1);
-    expect(calciteDropdownCloseSpy).toHaveReceivedEventTimes(1);
+      expect(calciteDropdownBeforeCloseSpy).toHaveReceivedEventTimes(1);
+      expect(calciteDropdownCloseSpy).toHaveReceivedEventTimes(1);
 
-    expect(await group.isVisible()).toBe(false);
+      expect(await group.isVisible()).toBe(false);
+    });
   });
 });
diff --git a/packages/calcite-components/src/components/dropdown/dropdown.tsx b/packages/calcite-components/src/components/dropdown/dropdown.tsx
index b31570c4a5b..8bbe791201b 100644
--- a/packages/calcite-components/src/components/dropdown/dropdown.tsx
+++ b/packages/calcite-components/src/components/dropdown/dropdown.tsx
@@ -158,11 +158,6 @@ export class Dropdown
     this.reposition(true);
   }
 
-  /**
-   * Specifies the size of the component.
-   */
-  @Prop({ reflect: true }) scale: Scale = "m";
-
   /**
    * Specifies the component's selected items.
    *
@@ -180,6 +175,14 @@ export class Dropdown
    */
   @Prop({ reflect: true }) width: Scale;
 
+  /** Specifies the size of the component. */
+  @Prop({ reflect: true }) scale: Scale = "m";
+
+  @Watch("scale")
+  handlePropsChange(): void {
+    this.updateItems();
+  }
+
   //--------------------------------------------------------------------------
   //
   //  Public Methods
@@ -208,6 +211,7 @@ export class Dropdown
       onToggleOpenCloseComponent(this);
     }
     connectInteractive(this);
+    this.updateItems();
   }
 
   componentWillLoad(): void {
@@ -486,6 +490,8 @@ export class Dropdown
     this.updateSelectedItems();
 
     this.reposition(true);
+
+    this.items.forEach((item) => (item.scale = this.scale));
   };
 
   updateGroups = (event: Event): void => {