@esri/calcite-components 1.0.0-next.596 → 1.0.0-next.597

package/dist/collection/components/dropdown/dropdown.e2e.js

@@ -0,0 +1,1030 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { accessible, defaults, disabled, floatingUIOwner, renders, hidden } from "../../tests/commonTests";
+import dedent from "dedent";
+import { html } from "../../../support/formatting";
+import { CSS } from "./resources";
+describe("calcite-dropdown", () => {
+    it("renders", () => renders(html `<calcite-dropdown>
+        <calcite-button slot="dropdown-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>`, { display: "inline-flex" }));
+    it("honors hidden attribute", async () => hidden("calcite-dropdown"));
+    it("defaults", async () => defaults("calcite-dropdown", [
+        {
+            propertyName: "overlayPositioning",
+            defaultValue: "absolute"
+        },
+        {
+            propertyName: "flipPlacements",
+            defaultValue: undefined
+        }
+    ]));
+    it("can be disabled", () => disabled(html `<calcite-dropdown>
+        <calcite-button slot="dropdown-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>`, { focusTarget: "child" }));
+    /**
+     * 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
+     * @param root0.mostRecentId
+     */
+    async function assertSelectedItems(page, { expectedItemIds, mostRecentId }) {
+        const selectedItemIds = await page.evaluate(() => {
+            const dropdown = document.querySelector("calcite-dropdown");
+            return dropdown.selectedItems.map((item) => item.id);
+        });
+        if (mostRecentId) {
+            const selectedItemId = await page.evaluate(() => {
+                return window.eventDetail.item.id;
+            });
+            expect(selectedItemId).toBe(mostRecentId);
+        }
+        expect(selectedItemIds).toHaveLength(expectedItemIds.length);
+        expectedItemIds.forEach((itemId, index) => expect(selectedItemIds[index]).toEqual(itemId));
+    }
+    /**
+     * Helper to wire up the page to assert on the event detail
+     *
+     * @param page
+     */
+    assertSelectedItems.setUpEvents = async (page) => {
+        await page.evaluate(() => {
+            document.addEventListener("calciteDropdownSelect", ({ detail }) => {
+                window.eventDetail = detail;
+            });
+        });
+    };
+    const dropdownSelectionModeContent = html `
+    <calcite-dropdown>
+      <calcite-button slot="dropdown-trigger" id="trigger">Open dropdown</calcite-button>
+      <calcite-dropdown-group id="group-1" selection-mode="multi">
+        <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>
+  `;
+    it("renders default props when none are provided", async () => {
+        const page = await newE2EPage();
+        await page.setContent(html `<calcite-dropdown>
+      <calcite-button slot="dropdown-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");
+    });
+    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="dropdown-trigger">Open dropdown</calcite-button>
+      <calcite-dropdown-group id="group-1" selection-mode="multi">
+        <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", "multi");
+    });
+    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="dropdown-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();
+    });
+    it("renders group title if specified and not if absent", async () => {
+        const page = await newE2EPage();
+        await page.setContent(html `<calcite-dropdown>
+      <calcite-button slot="dropdown-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();
+    });
+    it("renders selected item based on attribute in dom", async () => {
+        const page = await newE2EPage();
+        await page.setContent(html `<calcite-dropdown>
+      <calcite-button slot="dropdown-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 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']");
+        //active prop is deprecated
+        expect(item1).not.toHaveAttribute("active");
+        expect(item3).not.toHaveAttribute("active");
+        expect(item1).not.toHaveAttribute("selected");
+        expect(item2).toHaveAttribute("selected");
+        expect(item3).not.toHaveAttribute("selected");
+    });
+    it("renders multiple selected items when group is in multi selection mode", async () => {
+        const page = await newE2EPage();
+        await page.setContent(html `<calcite-dropdown>
+      <calcite-button id="trigger" slot="dropdown-trigger">Open dropdown</calcite-button>
+      <calcite-dropdown-group id="group-1" selection-mode="multi">
+        <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", "multi");
+        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"],
+            mostRecentId: "item-1"
+        });
+        await trigger.click();
+        await page.waitForChanges();
+        await item2.click();
+        await page.waitForChanges();
+        await assertSelectedItems(page, {
+            expectedItemIds: ["item-1"],
+            mostRecentId: "item-2"
+        });
+        await trigger.click();
+        await page.waitForChanges();
+        await item3.click();
+        await page.waitForChanges();
+        await assertSelectedItems(page, {
+            expectedItemIds: ["item-1", "item-3"],
+            mostRecentId: "item-3"
+        });
+        // active prop is deprecated
+        expect(item1).toHaveAttribute("active");
+        expect(item2).not.toHaveAttribute("active");
+        expect(item3).toHaveAttribute("active");
+        expect(item1).toHaveAttribute("selected");
+        expect(item2).not.toHaveAttribute("selected");
+        expect(item3).toHaveAttribute("selected");
+        expect(itemChangeSpy).toHaveReceivedEventTimes(3);
+    });
+    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="dropdown-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"],
+            mostRecentId: "item-1"
+        });
+        await trigger.click();
+        await page.waitForChanges();
+        await item3.click();
+        await page.waitForChanges();
+        await assertSelectedItems(page, {
+            expectedItemIds: ["item-3"],
+            mostRecentId: "item-3"
+        });
+        //active prop is deprecated
+        expect(item1).not.toHaveAttribute("active");
+        expect(item2).not.toHaveAttribute("active");
+        expect(item3).toHaveAttribute("active");
+        expect(item1).not.toHaveAttribute("selected");
+        expect(item2).not.toHaveAttribute("selected");
+        expect(item3).toHaveAttribute("selected");
+        expect(itemChangeSpy).toHaveReceivedEventTimes(2);
+    });
+    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="dropdown-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: [], mostRecentId: "item-1" });
+        await trigger.click();
+        await item2.click();
+        await page.waitForChanges();
+        await assertSelectedItems(page, { expectedItemIds: [], mostRecentId: "item-2" });
+        await trigger.click();
+        await item3.click();
+        await page.waitForChanges();
+        await assertSelectedItems(page, { expectedItemIds: [], mostRecentId: "item-3" });
+        //active prop is deprecated
+        expect(item1).not.toHaveAttribute("active");
+        expect(item2).not.toHaveAttribute("active");
+        expect(item3).not.toHaveAttribute("active");
+        expect(item1).not.toHaveAttribute("selected");
+        expect(item2).not.toHaveAttribute("selected");
+        expect(item3).not.toHaveAttribute("selected");
+        expect(itemChangeSpy).toHaveReceivedEventTimes(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="dropdown-trigger" id="trigger">Open dropdown</calcite-button>
+      <calcite-dropdown-group id="group-1" selection-mode="multi">
+        <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", "multi");
+        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"],
+            mostRecentId: "item-1"
+        });
+        await trigger.click();
+        await page.waitForChanges();
+        await item2.click();
+        await page.waitForChanges();
+        await assertSelectedItems(page, {
+            expectedItemIds: ["item-1", "item-5"],
+            mostRecentId: "item-2"
+        });
+        await trigger.click();
+        await page.waitForChanges();
+        await item3.click();
+        await page.waitForChanges();
+        await assertSelectedItems(page, {
+            expectedItemIds: ["item-1", "item-3", "item-5"],
+            mostRecentId: "item-3"
+        });
+        await trigger.click();
+        await page.waitForChanges();
+        await item4.click();
+        await page.waitForChanges();
+        await assertSelectedItems(page, {
+            expectedItemIds: ["item-1", "item-3", "item-4"],
+            mostRecentId: "item-4"
+        });
+        await trigger.click();
+        await page.waitForChanges();
+        await item6.click();
+        await page.waitForChanges();
+        await assertSelectedItems(page, {
+            expectedItemIds: ["item-1", "item-3", "item-6"],
+            mostRecentId: "item-6"
+        });
+        await trigger.click();
+        await page.waitForChanges();
+        await item7.click();
+        await page.waitForChanges();
+        await assertSelectedItems(page, {
+            expectedItemIds: ["item-1", "item-3", "item-6"],
+            mostRecentId: "item-7"
+        });
+        await trigger.click();
+        await page.waitForChanges();
+        await item9.click();
+        await page.waitForChanges();
+        await assertSelectedItems(page, {
+            expectedItemIds: ["item-1", "item-3", "item-6"],
+            mostRecentId: "item-9"
+        });
+        //active is deprecated
+        expect(item1).toHaveAttribute("active");
+        expect(item2).not.toHaveAttribute("active");
+        expect(item3).toHaveAttribute("active");
+        expect(item4).not.toHaveAttribute("active");
+        expect(item5).not.toHaveAttribute("active");
+        expect(item6).toHaveAttribute("active");
+        expect(item7).not.toHaveAttribute("active");
+        expect(item8).not.toHaveAttribute("active");
+        expect(item9).not.toHaveAttribute("active");
+        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="dropdown-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="dropdown-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="dropdown-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-3");
+    });
+    it("should focus the first selected item on open (multi)", async () => {
+        const page = await newE2EPage({
+            html: html `<calcite-dropdown>
+        <calcite-button slot="dropdown-trigger">Open Dropdown</calcite-button>
+        <calcite-dropdown-group selection-mode="multi">
+          <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 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-2");
+    });
+    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="dropdown-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-dropdown-group>
+      </calcite-dropdown>`);
+            await page.waitForChanges();
+            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");
+            const item = await page.find("#item-50");
+            expect(await item.isIntersectingViewport()).toBe(true);
+        });
+        it("control max items displayed", async () => {
+            const maxItems = 7;
+            const page = await newE2EPage({
+                html: html `<calcite-dropdown max-items="${maxItems}">
+          <calcite-button slot="dropdown-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>`
+            });
+            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");
+            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);
+            }
+        });
+    });
+    it("closes when a selection is made", async () => {
+        const page = await newE2EPage();
+        await page.setContent(html `<calcite-dropdown>
+      <calcite-button id="trigger" slot="dropdown-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);
+    });
+    it("remains open when disable-close-on-select is requested and selected item is not in a selection-mode:none group", async () => {
+        const page = await newE2EPage();
+        await page.setContent(html `<calcite-dropdown disable-close-on-select>
+      <calcite-button id="trigger" slot="dropdown-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);
+    });
+    it("closes when disable-close-on-select is requested and selected item is in a selection-mode:none group", async () => {
+        const page = await newE2EPage();
+        await page.setContent(html `<calcite-dropdown disable-close-on-select>
+      <calcite-button id="trigger" slot="dropdown-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);
+    });
+    describe("toggles the dropdown with click, enter, or space", () => {
+        it("toggles when dropdown-trigger is a button", async () => {
+            const page = await newE2EPage();
+            await page.setContent(html `
+        <calcite-dropdown>
+          <calcite-button slot="dropdown-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='dropdown-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 trigger.focus();
+            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 dropdown-trigger is an action", async () => {
+            const page = await newE2EPage();
+            await page.setContent(html `
+        <calcite-dropdown>
+          <calcite-action slot="dropdown-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='dropdown-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 trigger.focus();
+            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("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="dropdown-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="dropdown-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="dropdown-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="dropdown-trigger">Open dropdown</calcite-button>
+        <calcite-icon class="trigger" icon="caretDown" scale="s" slot="dropdown-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);
+    });
+    it("is accessible", async () => {
+        await 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();
+        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(item1).toEqualAttribute("role", "menuitemcheckbox");
+        expect(item1).toEqualAttribute("aria-checked", "false");
+        expect(item2).toEqualAttribute("role", "menuitemcheckbox");
+        expect(item2).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(item5).toEqualAttribute("role", "menuitemradio");
+        expect(item5).toEqualAttribute("aria-checked", "true");
+        expect(item6).toEqualAttribute("role", "menuitem");
+        expect(item6).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 disable-close-on-select>
+        <calcite-button slot="dropdown-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 wrapperName = "dropdown-wrapping-component";
+        await page.evaluate(async (templateHTML, wrapperName) => {
+            customElements.define(wrapperName, class extends HTMLElement {
+                constructor() {
+                    super();
+                }
+                connectedCallback() {
+                    this.attachShadow({ mode: "open" }).innerHTML = templateHTML;
+                }
+            });
+            document.body.innerHTML = `<${wrapperName}></${wrapperName}>`;
+            const wrapper = document.querySelector(wrapperName);
+            wrapper.shadowRoot.querySelector("#item-3").click();
+        }, wrappedDropdownTemplateHTML, wrapperName);
+        await page.waitForChanges();
+        const finalSelectedItem = await page.evaluate(async (wrapperName) => {
+            const wrapper = document.querySelector(wrapperName);
+            return wrapper.shadowRoot.querySelector("calcite-dropdown-item[selected]").id;
+        }, wrapperName);
+        await expect(finalSelectedItem).toBe("item-3");
+    });
+    it("dropdown should not overflow when wrapped inside a tab #3007", async () => {
+        const page = await newE2EPage({
+            html: html `<calcite-tabs>
+        <calcite-tab-nav slot="tab-nav">
+          <calcite-tab-title is-active>First tab</calcite-tab-title>
+        </calcite-tab-nav>
+        <calcite-tab is-active>
+          <calcite-dropdown>
+            <calcite-button slot="dropdown-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();
+        const button = await page.find("calcite-button");
+        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);
+    });
+    it("dropdown wrapper shouldn't 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="dropdown-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 page.evaluate(() => {
+            const filter = document.querySelector(`calcite-pick-list`).shadowRoot.querySelector("calcite-filter");
+            const filterInput = filter.shadowRoot.querySelector("calcite-input");
+            filterInput.value = "nums";
+        });
+        expect(dropdownContentHeight.height).toBe("0px");
+    });
+    it("owns a floating-ui", () => floatingUIOwner(html ` <calcite-dropdown>
+        <calcite-button slot="dropdown-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>`, "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="dropdown-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}`);
+        expect(await group.isVisible()).toBe(false);
+        const calciteDropdownBeforeOpenEvent = page.waitForEvent("calciteDropdownBeforeOpen");
+        const calciteDropdownOpenEvent = page.waitForEvent("calciteDropdownOpen");
+        const calciteDropdownBeforeOpenSpy = await element.spyOnEvent("calciteDropdownBeforeOpen");
+        const calciteDropdownOpenSpy = await element.spyOnEvent("calciteDropdownOpen");
+        await element.setProperty("active", true);
+        await page.waitForChanges();
+        expect(await element.getProperty("open")).toBe(true);
+        await calciteDropdownBeforeOpenEvent;
+        await calciteDropdownOpenEvent;
+        expect(calciteDropdownBeforeOpenSpy).toHaveReceivedEventTimes(1);
+        expect(calciteDropdownOpenSpy).toHaveReceivedEventTimes(1);
+        expect(await group.isVisible()).toBe(true);
+        const calciteDropdownBeforeCloseEvent = page.waitForEvent("calciteDropdownBeforeClose");
+        const calciteDropdownCloseEvent = page.waitForEvent("calciteDropdownClose");
+        const calciteDropdownBeforeCloseSpy = await element.spyOnEvent("calciteDropdownBeforeClose");
+        const calciteDropdownCloseSpy = await element.spyOnEvent("calciteDropdownClose");
+        await element.setProperty("active", false);
+        await page.waitForChanges();
+        await calciteDropdownBeforeCloseEvent;
+        await calciteDropdownCloseEvent;
+        expect(calciteDropdownBeforeCloseSpy).toHaveReceivedEventTimes(1);
+        expect(calciteDropdownCloseSpy).toHaveReceivedEventTimes(1);
+        expect(await group.isVisible()).toBe(false);
+    });
+});