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

package/dist/collection/components/pick-list/shared-list-tests.js

@@ -1,463 +0,0 @@
-import { newE2EPage } from "@stencil/core/testing";
-import { disabled, focusable } from "../../tests/commonTests";
-import { html } from "../../../support/formatting";
-import { CSS as PICK_LIST_ITEM_CSS } from "../pick-list-item/resources";
-import { selectText } from "../../tests/utils";
-export function keyboardNavigation(listType) {
-    const getFocusedItemValue = (page) => page.evaluate(() => { var _a, _b; return (_b = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : null; });
-    async function getSelectedItemValues(list, listType) {
-        return Promise.all((await list.findAll(`calcite-${listType}-list-item[selected]`)).map((el) => el.getProperty("value")));
-    }
-    describe("multi selection", () => {
-        it("keyboard interaction", async () => {
-            const page = await newE2EPage({
-                html: `
-        <calcite-${listType}-list multiple>
-          <calcite-${listType}-list-item disabled value="zero" label="Zero (disabled)"></calcite-${listType}-list-item>
-          <calcite-${listType}-list-item value="one" label="One"></calcite-${listType}-list-item>
-          <calcite-${listType}-list-item value="two" label="Two"></calcite-${listType}-list-item>
-          <calcite-${listType}-list-item disabled value="three" label="Three (disabled)"></calcite-${listType}-list-item>
-        </calcite-${listType}-list>
-      `
-            });
-            const list = await page.find(`calcite-${listType}-list`);
-            await list.callMethod("setFocus");
-            expect(await getFocusedItemValue(page)).toEqual("one");
-            expect(await getSelectedItemValues(list, listType)).toEqual([]);
-            await list.press("ArrowDown");
-            expect(await getFocusedItemValue(page)).toEqual("two");
-            await list.press(" ");
-            expect(await getSelectedItemValues(list, listType)).toEqual(["two"]);
-            await list.press("ArrowDown");
-            expect(await getFocusedItemValue(page)).toEqual("one");
-            await list.press(" ");
-            expect(await getSelectedItemValues(list, listType)).toEqual(["one", "two"]);
-            await list.press("ArrowUp");
-            expect(await getFocusedItemValue(page)).toEqual("two");
-            await list.press(" ");
-            expect(await getSelectedItemValues(list, listType)).toEqual(["one"]);
-            await list.press("ArrowUp");
-            expect(await getFocusedItemValue(page)).toEqual("one");
-            await list.press(" ");
-            expect(await getSelectedItemValues(list, listType)).toEqual([]);
-        });
-    });
-    describe("single selection", () => {
-        describe("with selected item", () => {
-            it("keyboard interaction", async () => {
-                const page = await newE2EPage({
-                    html: `
-        <calcite-${listType}-list>
-          <calcite-${listType}-list-item id="one" value="one" label="One"></calcite-${listType}-list-item>
-          <calcite-${listType}-list-item id="two" value="two" label="Two"></calcite-${listType}-list-item>
-        </calcite-${listType}-list>
-      `
-                });
-                const list = await page.find(`calcite-${listType}-list`);
-                const firstItem = await page.find("#one");
-                const secondItem = await page.find("#two");
-                await list.callMethod("setFocus");
-                expect(await getSelectedItemValues(list, listType)).toEqual([]);
-                expect(await getFocusedItemValue(page)).toEqual("one");
-                expect(await getSelectedItemValues(list, listType)).toEqual([]);
-                expect(firstItem.tabIndex).toBe(-1);
-                expect(secondItem.tabIndex).toBe(-1);
-                await list.press("ArrowDown");
-                expect(await getFocusedItemValue(page)).toEqual("two");
-                expect(firstItem.tabIndex).toBe(-1);
-                expect(secondItem.tabIndex).toBe(-1);
-                await list.press(" ");
-                expect(await getSelectedItemValues(list, listType)).toEqual(["two"]);
-                await list.press("ArrowDown");
-                expect(await getFocusedItemValue(page)).toEqual("one");
-                expect(firstItem.tabIndex).toBe(-1);
-                expect(firstItem.tabIndex).toBe(-1);
-                await list.press(" ");
-                expect(await getSelectedItemValues(list, listType)).toEqual(["one"]);
-                await list.press("ArrowUp");
-                expect(await getFocusedItemValue(page)).toEqual("two");
-                expect(firstItem.tabIndex).toBe(-1);
-                expect(secondItem.tabIndex).toBe(-1);
-                await list.press(" ");
-                expect(await getSelectedItemValues(list, listType)).toEqual(["two"]);
-                await list.press("ArrowUp");
-                expect(await getFocusedItemValue(page)).toEqual("one");
-                await list.press(" ");
-                expect(await getSelectedItemValues(list, listType)).toEqual(["one"]);
-            });
-            it("keyboard interaction + selectionFollowsFocus", async () => {
-                const page = await newE2EPage({
-                    html: `
-        <calcite-${listType}-list selection-follows-focus>
-          <calcite-${listType}-list-item value="one" label="One"></calcite-${listType}-list-item>
-          <calcite-${listType}-list-item value="two" label="Two"></calcite-${listType}-list-item>
-        </calcite-${listType}-list>
-      `
-                });
-                const list = await page.find(`calcite-${listType}-list`);
-                expect(await getFocusedItemValue(page)).toBeNull();
-                expect(await getSelectedItemValues(list, listType)).toEqual([]);
-                await list.callMethod("setFocus");
-                await page.waitForChanges();
-                expect(await getFocusedItemValue(page)).toEqual("one");
-                expect(await getSelectedItemValues(list, listType)).toEqual(["one"]);
-                await list.press("ArrowDown");
-                expect(await getFocusedItemValue(page)).toEqual("two");
-                expect(await getSelectedItemValues(list, listType)).toEqual(["two"]);
-                await list.press("ArrowDown");
-                expect(await getFocusedItemValue(page)).toEqual("one");
-                expect(await getSelectedItemValues(list, listType)).toEqual(["one"]);
-                await list.press("ArrowUp");
-                expect(await getFocusedItemValue(page)).toEqual("two");
-                expect(await getSelectedItemValues(list, listType)).toEqual(["two"]);
-                await list.press("ArrowUp");
-                expect(await getFocusedItemValue(page)).toEqual("one");
-                expect(await getSelectedItemValues(list, listType)).toEqual(["one"]);
-            });
-        });
-        it("navigating items after filtering", async () => {
-            const page = await newE2EPage({
-                html: `
-        <calcite-${listType}-list filter-enabled>
-          <calcite-${listType}-list-item value="one" label="One" selected></calcite-${listType}-list-item>
-          <calcite-${listType}-list-item value="two" label="Two"></calcite-${listType}-list-item>
-        </calcite-${listType}-list>
-      `
-            });
-            const filter = await page.find(`calcite-${listType}-list >>> calcite-filter`);
-            await filter.callMethod("setFocus");
-            await page.keyboard.type("one");
-            await page.waitForEvent("calciteFilterChange");
-            await page.keyboard.press("Tab");
-            expect(await getFocusedItemValue(page)).toEqual("one");
-            await filter.callMethod("setFocus");
-            await page.waitForChanges();
-            await page.keyboard.press("Backspace");
-            await page.keyboard.press("Backspace");
-            await page.keyboard.press("Backspace");
-            await page.waitForChanges();
-            await page.keyboard.type("two");
-            await page.waitForEvent("calciteFilterChange");
-            await page.keyboard.press("Tab");
-            expect(await getFocusedItemValue(page)).toEqual("two");
-        });
-        it("resets tabindex to selected item when focusing out of list", async () => {
-            const page = await newE2EPage();
-            await page.setContent(html `
-        <calcite-${listType}-list>
-          <calcite-${listType}-list-item value="one" label="One" selected></calcite-${listType}-list-item>
-          <calcite-${listType}-list-item value="two" label="Two"></calcite-${listType}-list-item>
-        </calcite-${listType}-list>
-      `);
-            await page.keyboard.press("Tab");
-            await page.keyboard.press("Tab");
-            expect(await getFocusedItemValue(page)).toEqual(null);
-            await page.keyboard.down("Shift");
-            await page.keyboard.press("Tab");
-            expect(await getFocusedItemValue(page)).toEqual("one");
-        });
-    });
-}
-export function selectionAndDeselection(listType) {
-    describe("when multiple is false and an item is clicked", () => {
-        it("should emit an event with the last selected item data", async () => {
-            const page = await newE2EPage();
-            await page.setContent(`<calcite-${listType}-list>
-          <calcite-${listType}-list-item value="one" label="One"></calcite-${listType}-list-item>
-          <calcite-${listType}-list-item value="two" label="Two"></calcite-${listType}-list-item>
-        </calcite-${listType}-list>`);
-            const list = await page.find(`calcite-${listType}-list`);
-            const item1 = await list.find("[value=one]");
-            const item2 = await list.find("[value=two]");
-            const toggleSpy = await list.spyOnEvent("calciteListChange");
-            await item1.click();
-            await item2.click();
-            expect(toggleSpy).toHaveReceivedEventTimes(2);
-        });
-    });
-    describe("when multiple is true and a item is clicked", () => {
-        it("should emit an event with each selected item's data", async () => {
-            const page = await newE2EPage();
-            await page.setContent(`<calcite-${listType}-list multiple>
-          <calcite-${listType}-list-item value="one" label="One"></calcite-${listType}-list-item>
-          <calcite-${listType}-list-item value="two" label="Two"></calcite-${listType}-list-item>
-        </calcite-${listType}-list>`);
-            const list = await page.find(`calcite-${listType}-list`);
-            const item1 = await list.find("[value=one]");
-            const item2 = await list.find("[value=two]");
-            const toggleSpy = await list.spyOnEvent("calciteListChange");
-            await item1.click();
-            await item2.click();
-            await item2.click(); // deselect
-            expect(toggleSpy).toHaveReceivedEventTimes(3);
-        });
-    });
-    describe("preselected items", () => {
-        it("should be included in the list of selected items", async () => {
-            const page = await newE2EPage();
-            await page.setContent(`<calcite-${listType}-list multiple>
-          <calcite-${listType}-list-item value="one" label="One" selected></calcite-${listType}-list-item>
-          <calcite-${listType}-list-item value="two" label="Two"></calcite-${listType}-list-item>
-        </calcite-${listType}-list>`);
-            const numSelected = await page.evaluate(async (listType) => {
-                const list = document.querySelector(`calcite-${listType}-list`);
-                return (await list.getSelectedItems()).size;
-            }, listType);
-            expect(numSelected).toBe(1);
-        });
-    });
-    describe("shift click behavior", () => {
-        it("should multi-select", async () => {
-            const page = await newE2EPage();
-            await page.setContent(`<calcite-${listType}-list multiple>
-          <calcite-${listType}-list-item value="one" label="One"></calcite-${listType}-list-item>
-          <calcite-${listType}-list-item value="two" label="Two"></calcite-${listType}-list-item>
-          <calcite-${listType}-list-item value="three" label="Three"></calcite-${listType}-list-item>
-        </calcite-${listType}-list>`);
-            const list = await page.find(`calcite-${listType}-list`);
-            const item1 = await list.find("[value=one]");
-            const item3 = await list.find("[value=three]");
-            await item1.click();
-            await page.keyboard.down("Shift");
-            await item3.click();
-            await page.keyboard.up("Shift");
-            const numSelected = await page.evaluate(async (listType) => {
-                const list = document.querySelector(`calcite-${listType}-list`);
-                return (await list.getSelectedItems()).size;
-            }, listType);
-            expect(numSelected).toBe(3);
-        });
-        it("should multi de-select", async () => {
-            const page = await newE2EPage();
-            await page.setContent(`<calcite-${listType}-list multiple>
-          <calcite-${listType}-list-item value="one" label="One" selected></calcite-${listType}-list-item>
-          <calcite-${listType}-list-item value="two" label="Two" selected></calcite-${listType}-list-item>
-          <calcite-${listType}-list-item value="three" label="Three" selected></calcite-${listType}-list-item>
-        </calcite-${listType}-list>`);
-            const list = await page.find(`calcite-${listType}-list`);
-            const item1 = await list.find("[value=one]");
-            const item3 = await list.find("[value=three]");
-            await item1.click();
-            await page.keyboard.down("Shift");
-            await item3.click();
-            await page.keyboard.up("Shift");
-            const numSelected = await page.evaluate(async (type) => {
-                const domList = document.querySelector(`calcite-${type}-list`);
-                return (await domList.getSelectedItems()).size;
-            }, listType);
-            expect(numSelected).toBe(0);
-        });
-    });
-    describe("calciteListChange event", () => {
-        it("should fire event when a selection changed", async () => {
-            const page = await newE2EPage();
-            await page.setContent(`<calcite-${listType}-list>
-          <calcite-${listType}-list-item label="test" value="example"></calcite-${listType}-list-item>
-        </calcite-${listType}-list>`);
-            const item = await page.find(`calcite-${listType}-list-item`);
-            await page.evaluate(() => {
-                document.addEventListener("calciteListChange", (event) => {
-                    window.eventDetail = event.detail;
-                });
-            });
-            await item.click();
-            await page.waitForChanges();
-            const eventDetail = await page.evaluateHandle(() => {
-                const detail = window.eventDetail;
-                return {
-                    size: detail.size,
-                    hasItem: detail.has("example")
-                };
-            });
-            const properties = await eventDetail.getProperties();
-            expect(eventDetail).toBeDefined();
-            expect(properties.get("size")._remoteObject.value).toBe(1);
-            expect(properties.get("hasItem")._remoteObject.value).toBe(true);
-        });
-    });
-    describe("when an item is selected and then gets removed", () => {
-        it("should deselect the removed item from the selectedValues map", async () => {
-            const page = await newE2EPage();
-            await page.setContent(`<calcite-${listType}-list multiple>
-          <calcite-${listType}-list-item value="one" label="One"></calcite-${listType}-list-item>
-          <calcite-${listType}-list-item id="item2" value="two" label="Two" selected></calcite-${listType}-list-item>
-        </calcite-${listType}-list>`);
-            const numSelected = await page.evaluate(async (type) => {
-                document.querySelector("#item2").remove();
-                const domList = document.querySelector(`calcite-${type}-list`);
-                return (await domList.getSelectedItems()).size;
-            }, listType);
-            expect(numSelected).toBe(0);
-        });
-    });
-    describe("value changes after item is selected", () => {
-        it("should update the value in selectedValues map", async () => {
-            const page = await newE2EPage();
-            await page.setContent(`<calcite-${listType}-list>
-          <calcite-${listType}-list-item value="one" label="One" selected></calcite-${listType}-list-item>
-          <calcite-${listType}-list-item value="two" label="Two" selected></calcite-${listType}-list-item>
-          <calcite-${listType}-list-item value="three" label="Three" selected></calcite-${listType}-list-item>
-        </calcite-${listType}-list>`);
-            const list = await page.find(`calcite-${listType}-list`);
-            const item1 = await list.find("[value=one]");
-            await item1.click();
-            const hasValueOne = await page.evaluate(async (type) => {
-                const pageList = document.querySelector(`calcite-${type}-list`);
-                return (await pageList.getSelectedItems()).has("one");
-            }, listType);
-            expect(hasValueOne).toBe(true);
-            item1.setProperty("value", "four");
-            await page.waitForChanges();
-            const hasValues = await page.evaluate(async (type) => {
-                const pageList = document.querySelector(`calcite-${type}-list`);
-                const result = await pageList.getSelectedItems();
-                return {
-                    four: result.has("four"),
-                    one: result.has("one")
-                };
-            }, listType);
-            expect(hasValues.one).toBe(false);
-            expect(hasValues.four).toBe(true);
-        });
-    });
-}
-export function filterBehavior(listType) {
-    let page = null;
-    let item1;
-    let item2;
-    let filter;
-    beforeEach(async () => {
-        page = await newE2EPage();
-        await page.setContent(`<calcite-${listType}-list filter-enabled>
-        <calcite-${listType}-list-item value="1" label="One" description="uno"></calcite-${listType}-list-item>
-        <calcite-${listType}-list-item value="2" label="Two [regex chars]" description="dos (regex chars)"></calcite-${listType}-list-item>
-      </calcite-${listType}-list>`);
-        item1 = await page.find(`calcite-${listType}-list-item[value="1"]`);
-        item2 = await page.find(`calcite-${listType}-list-item[value="2"]`);
-        filter = await page.find(`calcite-${listType}-list >>> calcite-filter`);
-        item1.setProperty("metadata", { category: "first" });
-        item2.setProperty("metadata", { category: "second /regex chars/" });
-        await page.waitForChanges();
-    });
-    it("should match text in the label prop", async () => {
-        // Match first item
-        await selectText(filter);
-        await filter.type("one");
-        await item2.waitForNotVisible();
-        expect(await item1.isVisible()).toBe(true);
-        expect(await item2.isVisible()).toBe(false);
-        // Match second item (with regex chars)
-        await selectText(filter);
-        await filter.type("two [");
-        await item1.waitForNotVisible();
-        expect(await item1.isVisible()).toBe(false);
-        expect(await item2.isVisible()).toBe(true);
-    });
-    it("should match text in the description prop", async () => {
-        // Match first item
-        await selectText(filter);
-        await filter.type("uno");
-        await item2.waitForNotVisible();
-        expect(await item1.isVisible()).toBe(true);
-        expect(await item2.isVisible()).toBe(false);
-        // Match second item (with regex chars)
-        await selectText(filter);
-        await filter.type("dos (");
-        await item1.waitForNotVisible();
-        expect(await item1.isVisible()).toBe(false);
-        expect(await item2.isVisible()).toBe(true);
-    });
-    it("should match text in the metadata prop", async () => {
-        // Match first item
-        await selectText(filter);
-        await filter.type("first");
-        await item2.waitForNotVisible();
-        expect(await item1.isVisible()).toBe(true);
-        expect(await item2.isVisible()).toBe(false);
-        // Match second item (with regex chars)
-        await selectText(filter);
-        await filter.type("second /");
-        await item1.waitForNotVisible();
-        expect(await item1.isVisible()).toBe(false);
-        expect(await item2.isVisible()).toBe(true);
-    });
-}
-export function loadingState(listType) {
-    it("loading", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-${listType}-list loading>
-        <calcite-${listType}-list-item value="one" label="One"></calcite-${listType}-list-item>
-      </calcite-${listType}-list>`);
-        const list = await page.find(`calcite-${listType}-list`);
-        const item1 = await list.find("[value=one]");
-        const toggleSpy = await list.spyOnEvent("calciteListChange");
-        await item1.click();
-        expect(toggleSpy).toHaveReceivedEventTimes(0);
-    });
-}
-export function itemRemoval(listType) {
-    const pickListGroupHtml = html ` <calcite-pick-list-group
-      label="Will be removed when slotted 'parent item' is removed"
-      value="remove-me"
-    >
-      <calcite-pick-list-item
-        slot="parent-item"
-        value="remove-me"
-        label="Remove me!"
-        removable
-      ></calcite-pick-list-item>
-    </calcite-pick-list-group>
-    <calcite-pick-list-group label="Will not be removed when child item is removed" value="do-not-remove-me">
-      <calcite-pick-list-item value="remove-me" label="Do not remove me!" removable></calcite-pick-list-item>
-    </calcite-pick-list-group>`;
-    it("handles removing items", async () => {
-        const page = await newE2EPage({
-            html: html `
-      <calcite-${listType}-list>
-        ${listType === "value" ? "" : pickListGroupHtml}
-        <calcite-${listType}-list-item value="remove-me" label="Remove me!" removable></calcite-${listType}-list-item>
-      </calcite-${listType}-list>
-    `
-        });
-        const list = await page.find(`calcite-${listType}-list`);
-        const removeItemSpy = await list.spyOnEvent("calciteListItemRemove");
-        const listChangeSpy = await list.spyOnEvent("calciteListChange");
-        const removableItems = await page.$$eval(`calcite-${listType}-list-item`, (items, listType, selector) => {
-            items.forEach((item) => {
-                listType === "pick"
-                    ? item.shadowRoot.querySelector(selector).click()
-                    : item.shadowRoot
-                        .querySelector("calcite-pick-list-item")
-                        .shadowRoot.querySelector(selector)
-                        .click();
-            });
-            return items;
-        }, listType, `.${PICK_LIST_ITEM_CSS.remove}`);
-        await page.waitForChanges();
-        expect(await page.findAll(`calcite-${listType}-list-item`)).toHaveLength(0);
-        expect(await page.findAll(`calcite-pick-list-group`)).toHaveLength(listType === "pick" ? 1 : 0);
-        expect(removeItemSpy).toHaveReceivedEventTimes(removableItems.length);
-        expect(listChangeSpy).toHaveReceivedEventTimes(1);
-    });
-}
-export function focusing(listType) {
-    describe("when setFocus method is called", () => {
-        it("should focus filter", () => focusable(html `
-        <calcite-${listType}-list filter-enabled>
-          <calcite-${listType}-list-item label="Sample" value="one"></calcite-${listType}-list-item>
-        </calcite-${listType}-list>
-      `, {
-            focusId: "filter",
-            shadowFocusTargetSelector: "calcite-filter"
-        }));
-    });
-}
-export function disabling(listType) {
-    it("can be disabled", () => disabled(html `
-      <calcite-${listType}-list>
-        <calcite-${listType}-list-item label="Sample" value="one"></calcite-${listType}-list-item>
-      </calcite-${listType}-list>
-    `, {
-        focusTarget: "child"
-    }));
-}

package/dist/collection/components/pick-list-group/pick-list-group.e2e.js

@@ -1,54 +0,0 @@
-import { newE2EPage } from "@stencil/core/testing";
-import { CSS, SLOTS } from "./resources";
-import { accessible, defaults, renders, slots, hidden } from "../../tests/commonTests";
-import { html } from "../../../support/formatting";
-describe("calcite-pick-list-group", () => {
-    it("renders", async () => renders("calcite-pick-list-group", { display: "block" }));
-    it("honors hidden attribute", async () => hidden("calcite-pick-list-group"));
-    it("is accessible", async () => {
-        await accessible("<calcite-pick-list-group></calcite-pick-list-group>");
-        await accessible(`<calcite-pick-list-group group-title="awesome title, bruh"></calcite-pick-list-group>`);
-        await accessible(html `
-      <calcite-pick-list>
-        <calcite-pick-list-group>
-          <calcite-pick-list-item label="Sample" value="one"></calcite-pick-list-item>
-        </calcite-pick-list-group>
-      </calcite-pick-list>
-    `);
-    });
-    it("has property defaults", async () => defaults("calcite-pick-list-group", [
-        {
-            propertyName: "headingLevel",
-            defaultValue: undefined
-        }
-    ]));
-    it("has slots", () => slots("calcite-pick-list-group", SLOTS));
-    it("should render", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-pick-list-group></calcite-pick-list-group>`);
-        const pickList = await page.find("calcite-pick-list-group");
-        expect(pickList).not.toBeNull();
-        const isVisible = await pickList.isVisible();
-        expect(isVisible).toBe(true);
-    });
-    it("should render a header if one is provided", async () => {
-        const page = await newE2EPage();
-        const headingText = "testing";
-        await page.setContent(`<calcite-pick-list-group group-title=${headingText}></calcite-pick-list-group>`);
-        const heading = await page.find(`calcite-pick-list-group >>> .${CSS.heading}`);
-        const isVisible = await heading.isVisible();
-        expect(isVisible).toBe(true);
-        expect(heading.innerText).toBe(headingText);
-    });
-    it("should indent children if a parent slot is passed", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-pick-list filter-enabled>
-      <calcite-pick-list-group>
-        <calcite-pick-list-item slot="parent-item" value="nums" label="Numbers"></calcite-pick-list-item>
-        <calcite-pick-list-item value="1" label="One" description="uno"></calcite-pick-list-item>
-      </calcite-pick-list-group>
-    </calcite-pick-list>`);
-        const indentedContainer = await page.find(`calcite-pick-list-group >>> ${CSS.indented}`);
-        expect(indentedContainer).toBeDefined();
-    });
-});

package/dist/collection/components/pick-list-item/pick-list-item.e2e.js

@@ -1,124 +0,0 @@
-import { CSS, SLOTS } from "./resources";
-import { accessible, disabled, renders, slots, hidden } from "../../tests/commonTests";
-import { newE2EPage } from "@stencil/core/testing";
-import { html } from "../../../support/formatting";
-describe("calcite-pick-list-item", () => {
-    it("renders", async () => renders("calcite-pick-list-item", { display: "flex" }));
-    it("honors hidden attribute", async () => hidden("calcite-list-item"));
-    it("is accessible", async () => {
-        await accessible(html `
-      <calcite-pick-list>
-        <calcite-pick-list-item label="test" description="a number" value="one"></calcite-pick-list-item>
-      </calcite-pick-list>
-    `);
-        await accessible(html `
-      <calcite-pick-list>
-        <calcite-pick-list-item label="test" description="a number" value="one" selected></calcite-pick-list-item>
-      </calcite-pick-list>
-    `);
-        await accessible(html `
-      <calcite-pick-list>
-        <calcite-pick-list-item label="test" description="a number" value="one" removable></calcite-pick-list-item>
-      </calcite-pick-list>
-    `);
-    });
-    it("has slots", () => slots("calcite-pick-list-item", SLOTS));
-    it("can be disabled", async () => disabled("calcite-pick-list-item"));
-    it("should toggle selected attribute when clicked", async () => {
-        const page = await newE2EPage({ html: `<calcite-pick-list-item label="test"></calcite-pick-list-item>` });
-        const item = await page.find("calcite-pick-list-item");
-        expect(await item.getProperty("selected")).toBe(false);
-        await item.click();
-        expect(await item.getProperty("selected")).toBe(true);
-        await item.click();
-        expect(await item.getProperty("selected")).toBe(false);
-    });
-    it("should toggle selected attribute when icon is clicked", async () => {
-        const page = await newE2EPage({
-            html: `<calcite-pick-list-item label="test" icon="circle"></calcite-pick-list-item>`
-        });
-        const item = await page.find("calcite-pick-list-item");
-        expect(await item.getProperty("selected")).toBe(false);
-        const icon = await page.find(`calcite-pick-list-item >>> .${CSS.icon}`);
-        await icon.click();
-        expect(await item.getProperty("selected")).toBe(true);
-        await icon.click();
-        expect(await item.getProperty("selected")).toBe(false);
-    });
-    it("should fire event calciteListItemChange when item is clicked", async () => {
-        const page = await newE2EPage({
-            html: `<calcite-pick-list-item label="test" value="example"></calcite-pick-list-item>`
-        });
-        const item = await page.find("calcite-pick-list-item");
-        await page.evaluate(() => {
-            document.addEventListener("calciteListItemChange", (event) => {
-                window.eventDetail = event.detail;
-            });
-        });
-        await item.click();
-        const eventDetail = await page.evaluateHandle(() => window.eventDetail);
-        const properties = await eventDetail.getProperties();
-        expect(properties.get("item")).toBeDefined();
-        expect(properties.get("value")._remoteObject.value).toBe("example");
-        expect(properties.get("selected")._remoteObject.value).toBe(true);
-        expect(properties.get("shiftPressed")._remoteObject.value).toBe(false);
-    });
-    it("prevents deselection when disableDeselect is true", async () => {
-        const page = await newE2EPage({
-            html: `<calcite-pick-list-item label="test" value="example" disable-deselect selected></calcite-pick-list-item>`
-        });
-        const item = await page.find("calcite-pick-list-item");
-        await item.click();
-        expect(await item.getProperty("selected")).toBe(true);
-    });
-    it("prevents selection when nonInteractive is true", async () => {
-        const page = await newE2EPage({
-            html: `<calcite-pick-list-item label="test" value="example" non-interactive></calcite-pick-list-item>`
-        });
-        const item = await page.find("calcite-pick-list-item");
-        await item.click();
-        expect(await item.getProperty("selected")).toBe(false);
-    });
-    it("prevents deselection when nonInteractive is true", async () => {
-        const page = await newE2EPage({
-            html: `<calcite-pick-list-item label="test" value="example" non-interactive selected></calcite-pick-list-item>`
-        });
-        const item = await page.find("calcite-pick-list-item");
-        await item.click();
-        expect(await item.getProperty("selected")).toBe(true);
-    });
-    it("allows for easy removal", async () => {
-        const page = await newE2EPage({
-            html: `<calcite-pick-list-item label="test" value="example" removable></calcite-pick-list-item>`
-        });
-        const removeButton = await page.find(`calcite-pick-list-item >>> .${CSS.remove}`);
-        expect(removeButton).toBeTruthy();
-        const item = await page.find("calcite-pick-list-item");
-        const removeEventSpy = await item.spyOnEvent("calciteListItemRemove");
-        await removeButton.click();
-        expect(removeEventSpy).toHaveReceivedEventTimes(1);
-    });
-    it("slot keyboard navigation", async () => {
-        const page = await newE2EPage();
-        await page.setContent(html `
-        <calcite-pick-list style="width: 400px">
-          <calcite-pick-list-item label="apple" value="apple" icon="circle" intl-remove="Remove">
-            <calcite-action slot="actions-end" icon="information"></calcite-action>
-          </calcite-pick-list-item>
-          <calcite-pick-list-item label="mango" value="mango" selected="" icon="circle" intl-remove="Remove">
-            <calcite-action slot="actions-end" icon="information"></calcite-action>
-          </calcite-pick-list-item>
-        </calcite-pick-list>
-      `);
-        const item = await page.find("calcite-pick-list-item:nth-child(2)");
-        await item.click();
-        await item.press("Tab");
-        expect(await page.evaluate(() => document.activeElement.getAttribute("slot"))).toEqual("actions-end");
-        await page.keyboard.down("Shift");
-        await page.keyboard.press("Tab");
-        await page.keyboard.up("Shift");
-        expect(await page.evaluate(() => document.activeElement.matches("calcite-pick-list-item:nth-child(2)"))).toBe(true);
-        await item.press("Tab");
-        expect(await page.evaluate(() => document.activeElement.getAttribute("slot"))).toEqual("actions-end");
-    });
-});