@esri/calcite-components 1.0.0-next.591 → 1.0.0-next.593

package/dist/collection/components/tree-item/tree-item.e2e.js

@@ -1,302 +0,0 @@
-import { newE2EPage } from "@stencil/core/testing";
-import { accessible, renders, defaults, slots, hidden } from "../../tests/commonTests";
-import { html } from "../../../support/formatting";
-import { SLOTS } from "./resources";
-describe("calcite-tree-item", () => {
-    it("renders", async () => renders("calcite-tree-item", { visible: false, display: "block" }));
-    it("honors hidden attribute", async () => hidden(`<calcite-tree-item expanded></calcite-tree-item>`));
-    it("is accessible", async () => accessible(`<calcite-tree-item></calcite-tree-item>`));
-    it("is accessible: nested children", async () => accessible(`
-    <calcite-tree lines>
-      <calcite-tree-item>
-        <a href="#">Child 2</a>
-        <calcite-tree slot="children">
-          <calcite-tree-item>
-            <a href="http://www.google.com">Grandchild 1</a>
-          </calcite-tree-item>
-        </calcite-tree>
-    </calcite-tree-item>
-  </calcite-tree>`));
-    it("has property defaults", async () => defaults("calcite-tree-item", [
-        {
-            propertyName: "selected",
-            defaultValue: false
-        },
-        {
-            propertyName: "expanded",
-            defaultValue: false
-        },
-        {
-            propertyName: "parentExpanded",
-            defaultValue: false
-        },
-        {
-            propertyName: "depth",
-            defaultValue: 0
-        },
-        {
-            propertyName: "hasChildren",
-            defaultValue: false
-        },
-        { propertyName: "indeterminate", defaultValue: undefined }
-    ]));
-    it("has slots", () => slots("calcite-tree-item", SLOTS));
-    it("should expand/collapse children when the icon is clicked, but not select/deselect group", async () => {
-        const page = await newE2EPage();
-        await page.setContent(html `
-      <calcite-tree lines id="parentTree" selection-mode="ancestors">
-        <calcite-tree-item id="firstItem">
-          <a href="#">Child 2</a>
-
-          <calcite-tree slot="children">
-            <calcite-tree-item>
-              <a href="http://www.google.com">Grandchild 1</a>
-            </calcite-tree-item>
-          </calcite-tree>
-        </calcite-tree-item>
-      </calcite-tree>
-    `);
-        const item = await page.find("calcite-tree-item");
-        expect(item).not.toHaveAttribute("checked");
-        const icon = await page.find('#firstItem >>> [data-test-id="icon"]');
-        await icon.click();
-        const childContainer = await page.find('#firstItem >>> [data-test-id="calcite-tree-children"]');
-        const isVisible = await childContainer.isVisible();
-        expect(isVisible).toBe(true);
-        expect(item).not.toHaveAttribute("checked");
-    });
-    it("should allow starting expanded", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-tree lines id="parentTree">
-      <calcite-tree-item id="firstItem" expanded>
-        <a href="#">Child 2</a>
-
-        <calcite-tree slot="children">
-          <calcite-tree-item>
-            <a href="#" id="childLink">Grandchild 1</a>
-          </calcite-tree-item>
-        </calcite-tree>
-      </calcite-tree-item>
-    </calcite-tree>`);
-        const child = await page.find("#childLink");
-        const isVisible = await child.isVisible();
-        expect(isVisible).toBe(true);
-    });
-    it("should navigate when the link inside the tree item is clicked", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-tree lines id="parentTree">
-      <calcite-tree-item id="firstItem">
-        <a href="#">Child 1</a>
-      </calcite-tree-item>
-    </calcite-tree>`);
-        const anchor = await page.find("#firstItem a");
-        await anchor.click();
-        await page.waitForChanges();
-        expect(page.url()).toContain("#");
-    });
-    it("should navigate to the link url when the item but not the link is clicked", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-tree lines id="parentTree">
-      <calcite-tree-item id="firstItem">
-        <a href="#">Child 1</a>
-      </calcite-tree-item>
-    </calcite-tree>`);
-        const item = await page.find("#firstItem");
-        await item.click();
-        await page.waitForChanges();
-        expect(page.url()).toContain("#");
-    });
-    it("should navigate to the inner link when a child item is clicked and not the outer link", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-tree lines id="parentTree">
-      <calcite-tree-item expanded>
-        <a href="#outer">Child 2</a>
-
-        <calcite-tree slot="children">
-          <calcite-tree-item id="secondItem">
-            <a href="#inner">Grandchild 1</a>
-          </calcite-tree-item>
-        </calcite-tree>
-      </calcite-tree-item>
-    </calcite-tree>`);
-        await page.waitForChanges();
-        const hash = await page.evaluate(() => {
-            const item = document.getElementById("secondItem");
-            item.click();
-            return window.location.hash;
-        });
-        expect(hash).toEqual("#inner");
-    });
-    describe("when a tree-item has ancestors selection-mode and is selected", () => {
-        it("should update its ancestor tree-items' indeterminate properties", async () => {
-            const tree = `<calcite-tree selection-mode="ancestors">
-        <calcite-tree-item expanded data-id="ancestor">
-          <span> Fruits </span>
-          <calcite-tree slot="children">
-            <calcite-tree-item>
-              <calcite-link href="#go" tabindex="-1"> Bananas </calcite-link>
-            </calcite-tree-item>
-            <calcite-tree-item expanded data-id="ancestor">
-              <span> Pears </span>
-              <calcite-tree slot="children">
-                <calcite-tree-item selected>
-                  <calcite-link href="#go" tabindex="-1"> Anjou </calcite-link>
-                </calcite-tree-item>
-                <calcite-tree-item>
-                  <calcite-link href="#go" tabindex="-1"> Bartlett </calcite-link>
-                </calcite-tree-item>
-              </calcite-tree>
-            </calcite-tree-item>
-          </calcite-tree>
-        </calcite-tree-item>
-      </calcite-tree>
-      `;
-            const page = await newE2EPage({ html: tree });
-            const ancestors = await page.findAll(`calcite-tree-item[data-id="ancestor"]`);
-            for (let i = 0; i < ancestors.length; i++) {
-                const node = ancestors[i];
-                expect(await node.getProperty("indeterminate")).toBe(true);
-            }
-        });
-    });
-    describe("when a parent tree-item is expanded and a new item is appended into it", () => {
-        it("should render the visible, keyboard navigable item", async () => {
-            const page = await newE2EPage();
-            await page.setContent(`<calcite-panel>
-        <calcite-button id='add-item-btn'>Add item to tree</calcite-button>
-        <calcite-tree>
-          <calcite-tree-item expanded><span>Element 1</span>
-            <calcite-tree slot='children' id='target-tree'>
-              <calcite-tree-item>Child 1</calcite-tree-item>
-            </calcite-tree>
-          </calcite-tree-item>
-          <calcite-tree-item>Element 2</calcite-tree-item>
-        </calcite-tree>
-      </calcite-panel>`);
-            await page.evaluate(() => {
-                const tree = document.querySelector("#target-tree");
-                document.querySelector("#add-item-btn").addEventListener("click", () => {
-                    const newItem = document.createElement("calcite-tree-item");
-                    newItem.id = "newbie";
-                    newItem.appendChild(document.createTextNode("Child 2"));
-                    tree.appendChild(newItem);
-                });
-            });
-            const btn = await page.find("calcite-button");
-            await btn.click();
-            const item = await page.find("#newbie");
-            expect(item).toEqualAttribute("aria-hidden", "false");
-            expect(item).not.toHaveAttribute("calcite-hydrated-hidden");
-            expect(item.tabIndex).toBe(0);
-        });
-    });
-    it("clicking on node-container, label, or checkbox selects/deselects, but does not expand/collapse children", async () => {
-        const page = await newE2EPage();
-        await page.setContent(html `
-      <calcite-tree selection-mode="ancestors" scale="m">
-        <calcite-tree-item>
-          <span>Child 1</span>
-
-          <calcite-tree slot="children">
-            <calcite-tree-item>
-              <span>Grandchild 1</span>
-              <calcite-tree slot="children">
-                <calcite-tree-item>
-                  <span>Great Grandchild 1</span>
-                </calcite-tree-item>
-                <calcite-tree-item>
-                  <span>Great Grandchild 2</span>
-                </calcite-tree-item>
-                <calcite-tree-item>
-                  <span>Great Grandchild 3</span>
-                </calcite-tree-item>
-              </calcite-tree>
-            </calcite-tree-item>
-            <calcite-tree-item>
-              <span>Grandchild 2</span>
-            </calcite-tree-item>
-            <calcite-tree-item>
-              <span>Grandchild 3</span>
-            </calcite-tree-item>
-          </calcite-tree>
-        </calcite-tree-item>
-
-        <calcite-tree-item>
-          <span>Child 2</span>
-        </calcite-tree-item>
-        <calcite-tree-item>
-          <span>Child 3</span>
-        </calcite-tree-item>
-      </calcite-tree>
-    `);
-        const container = await page.find("calcite-tree-item >>> .node-container");
-        const label = await container.find("label");
-        const checkbox = await label.find("calcite-checkbox");
-        const icon = await container.find(`[data-test-id="icon"]`);
-        await icon.click();
-        const childContainer = await page.find(`calcite-tree-item >>> [data-test-id="calcite-tree-children"]`);
-        const isVisible = await childContainer.isVisible();
-        expect(isVisible).toBe(true);
-        await container.click();
-        expect(checkbox).toHaveAttribute("checked");
-        expect(isVisible).toBe(true);
-        await container.click();
-        expect(checkbox).not.toHaveAttribute("checked");
-        expect(isVisible).toBe(true);
-        await label.click();
-        expect(checkbox).toHaveAttribute("checked");
-        expect(isVisible).toBe(true);
-        await label.click();
-        expect(checkbox).not.toHaveAttribute("checked");
-        expect(isVisible).toBe(true);
-        await checkbox.click();
-        expect(checkbox).toHaveAttribute("checked");
-        expect(isVisible).toBe(true);
-        await checkbox.click();
-        expect(checkbox).not.toHaveAttribute("checked");
-        expect(isVisible).toBe(true);
-    });
-    it("right arrow key expands subtree and left arrow collapses it", async () => {
-        const page = await newE2EPage({
-            html: `
-        <calcite-tree>
-          <calcite-tree-item id="cables">
-            Cables
-            <calcite-tree slot="children">
-              <calcite-tree-item id="xlr">XLR Cable</calcite-tree-item>
-              <calcite-tree-item id="instrument">Instrument Cable</calcite-tree-item>
-            </calcite-tree>
-          </calcite-tree-item>
-        </calcite-tree>
-    `
-        });
-        await page.keyboard.press("Tab");
-        expect(await page.evaluate(() => document.activeElement.id)).toBe("cables");
-        expect(await page.evaluate(() => document.activeElement.expanded)).toBe(false);
-        await page.keyboard.press("ArrowRight");
-        expect(await page.evaluate(() => document.activeElement.id)).toBe("cables");
-        expect(await page.evaluate(() => document.activeElement.expanded)).toBe(true);
-        await page.keyboard.press("ArrowLeft");
-        expect(await page.evaluate(() => document.activeElement.id)).toBe("cables");
-        expect(await page.evaluate(() => document.activeElement.expanded)).toBe(false);
-    });
-    it("right arrow key focuses first item in expanded subtree", async () => {
-        const page = await newE2EPage({
-            html: `
-        <calcite-tree>
-          <calcite-tree-item id="cables" expanded>
-            Cables
-            <calcite-tree slot="children">
-              <calcite-tree-item id="xlr">XLR Cable</calcite-tree-item>
-              <calcite-tree-item id="instrument">Instrument Cable</calcite-tree-item>
-            </calcite-tree>
-          </calcite-tree-item>
-        </calcite-tree>
-    `
-        });
-        await page.keyboard.press("Tab");
-        expect(await page.evaluate(() => document.activeElement.id)).toBe("cables");
-        await page.keyboard.press("ArrowRight");
-        expect(await page.evaluate(() => document.activeElement.id)).toBe("xlr");
-    });
-});

package/dist/collection/components/value-list/value-list.e2e.js

@@ -1,205 +0,0 @@
-import { newE2EPage } from "@stencil/core/testing";
-import { CSS, ICON_TYPES } from "./resources";
-import { accessible, hidden, renders } from "../../tests/commonTests";
-import { selectionAndDeselection, filterBehavior, loadingState, keyboardNavigation, itemRemoval, focusing, disabling } from "../pick-list/shared-list-tests";
-import { dragAndDrop } from "../../tests/utils";
-import { html } from "../../../support/formatting";
-describe("calcite-value-list", () => {
-    it("renders", () => renders("calcite-value-list", { display: "flex" }));
-    it("honors hidden attribute", async () => hidden("calcite-value-list"));
-    it("is accessible", () => accessible(html `
-      <calcite-value-list>
-        <calcite-value-list-item label="Sample" value="one"></calcite-value-list-item>
-      </calcite-value-list>
-    `));
-    describe("disabling", () => {
-        disabling("value");
-    });
-    describe("Selection and Deselection", () => {
-        selectionAndDeselection("value");
-    });
-    describe("Keyboard navigation", () => {
-        keyboardNavigation("value");
-    });
-    describe("icon logic", () => {
-        it("should be 'grip' when in `configuration` mode drag and drop is enabled", async () => {
-            const page = await newE2EPage({
-                html: `<calcite-value-list drag-enabled>
-        <calcite-value-list-item value="one"></calcite-value-list-item>
-      </calcite-value-list>`
-            });
-            const item = await page.find("calcite-value-list-item");
-            const icon = await item.getProperty("icon");
-            expect(icon).toBe(ICON_TYPES.grip);
-        });
-        it("should be null when drag and drop is disabled", async () => {
-            const page = await newE2EPage({
-                html: `<calcite-value-list>
-        <calcite-value-list-item value="one"></calcite-value-list-item>
-      </calcite-value-list>`
-            });
-            const item = await page.find("calcite-value-list-item");
-            const icon = await item.getProperty("icon");
-            expect(icon).toBeNull();
-        });
-    });
-    describe("filter behavior (hide/show items)", () => {
-        filterBehavior("value");
-    });
-    describe("item removal", () => {
-        itemRemoval("value");
-    });
-    describe("loading state", () => {
-        loadingState("value");
-    });
-    describe("setFocus", () => {
-        focusing("value");
-    });
-    describe("drag and drop", () => {
-        async function createSimpleValueList() {
-            return newE2EPage({
-                html: `<calcite-value-list drag-enabled>
-        <calcite-value-list-item value="one" label="One"></calcite-value-list-item>
-        <calcite-value-list-item value="two" label="Two"></calcite-value-list-item>
-        <calcite-value-list-item value="three" label="Three"></calcite-value-list-item>
-      </calcite-value-list>`
-            });
-        }
-        it("works using a mouse", async () => {
-            const page = await createSimpleValueList();
-            const listOrderChangeSpy = await page.spyOnEvent("calciteListOrderChange");
-            await dragAndDrop(page, {
-                element: `calcite-value-list-item[value="one"]`,
-                shadow: `.${CSS.handle}`
-            }, {
-                element: `calcite-value-list-item[value="two"]`,
-                shadow: `.${CSS.handle}`
-            });
-            const [first, second] = await page.findAll("calcite-value-list-item");
-            expect(await first.getProperty("value")).toBe("two");
-            expect(await second.getProperty("value")).toBe("one");
-            expect(listOrderChangeSpy).toHaveReceivedEventTimes(1);
-            expect(listOrderChangeSpy).toHaveReceivedEventDetail(["two", "one", "three"]);
-        });
-        it("works using a keyboard", async () => {
-            const page = await createSimpleValueList();
-            const listOrderChangeSpy = await page.spyOnEvent("calciteListOrderChange");
-            await page.keyboard.press("Tab");
-            await page.keyboard.press("Space");
-            await page.waitForChanges();
-            let totalMoves = 0;
-            async function assertKeyboardMove(direction, expectedValueOrder) {
-                const arrowKey = `Arrow${(direction.charAt(0).toUpperCase() + direction.slice(1))}`;
-                await page.keyboard.press(arrowKey);
-                await page.waitForChanges();
-                const itemsAfter = await page.findAll("calcite-value-list-item");
-                for (let i = 0; i < itemsAfter.length; i++) {
-                    expect(await itemsAfter[i].getProperty("value")).toBe(expectedValueOrder[i]);
-                }
-                expect(listOrderChangeSpy).toHaveReceivedEventTimes(++totalMoves);
-                expect(listOrderChangeSpy).toHaveReceivedEventDetail(expectedValueOrder);
-            }
-            await assertKeyboardMove("down", ["two", "one", "three"]);
-            await assertKeyboardMove("down", ["two", "three", "one"]);
-            await assertKeyboardMove("down", ["one", "two", "three"]);
-            await assertKeyboardMove("up", ["two", "three", "one"]);
-            await assertKeyboardMove("up", ["two", "one", "three"]);
-            await assertKeyboardMove("up", ["one", "two", "three"]);
-        });
-        it("supports dragging items between lists", async () => {
-            const page = await newE2EPage({
-                html: `
-        <calcite-value-list id="first-letters" drag-enabled group="letters">
-          <calcite-value-list-item value="a" label="A"></calcite-value-list-item>
-          <calcite-value-list-item value="b" label="B"></calcite-value-list-item>
-        </calcite-value-list>
-
-        <calcite-value-list id="numbers" drag-enabled group="numbers">
-          <calcite-value-list-item value="1" label="One"></calcite-value-list-item>
-          <calcite-value-list-item value="2" label="Two"></calcite-value-list-item>
-        </calcite-value-list>
-
-        <calcite-value-list id="no-group" drag-enabled>
-          <calcite-value-list-item value="no-group" label="No group"></calcite-value-list-item>
-        </calcite-value-list>
-
-        <calcite-value-list id="second-letters" drag-enabled group="letters">
-          <calcite-value-list-item value="c" label="C"></calcite-value-list-item>
-          <calcite-value-list-item value="d" label="D"></calcite-value-list-item>
-          <calcite-value-list-item value="e" label="E"></calcite-value-list-item>
-          <calcite-value-list-item value="f" label="F"></calcite-value-list-item>
-        </calcite-value-list>
-        `
-            });
-            await dragAndDrop(page, {
-                element: `calcite-value-list-item[value="d"]`,
-                shadow: `.${CSS.handle}`
-            }, {
-                element: `#first-letters`,
-                pointerPosition: {
-                    vertical: "bottom"
-                }
-            });
-            await dragAndDrop(page, {
-                element: `calcite-value-list-item[value="e"]`,
-                shadow: `.${CSS.handle}`
-            }, {
-                element: `#numbers`,
-                pointerPosition: {
-                    vertical: "bottom"
-                }
-            });
-            await dragAndDrop(page, {
-                element: `calcite-value-list-item[value="e"]`,
-                shadow: `.${CSS.handle}`
-            }, {
-                element: `#no-group`,
-                pointerPosition: {
-                    vertical: "bottom"
-                }
-            });
-            const [first, second, third, fourth, fifth, sixth, seventh, eight, ninth] = await page.findAll("calcite-value-list-item");
-            expect(await first.getProperty("value")).toBe("a");
-            expect(await second.getProperty("value")).toBe("b");
-            expect(await third.getProperty("value")).toBe("d");
-            expect(await fourth.getProperty("value")).toBe("1");
-            expect(await fifth.getProperty("value")).toBe("2");
-            expect(await sixth.getProperty("value")).toBe("no-group");
-            expect(await seventh.getProperty("value")).toBe("c");
-            expect(await eight.getProperty("value")).toBe("e");
-            expect(await ninth.getProperty("value")).toBe("f");
-        });
-        it("is drag and drop list accessible", async () => {
-            const page = await createSimpleValueList();
-            let startIndex = 0;
-            await page.keyboard.press("Tab");
-            await page.waitForChanges();
-            const items = await page.findAll("calcite-value-list-item");
-            const item = await page.find('calcite-value-list-item[value="one"]');
-            const handle = await page.find('calcite-value-list-item[value="one"] >>> .handle');
-            const assistiveTextElement = await page.find("calcite-value-list >>> .assistive-text");
-            const handleAriaLabel = handle.getAttribute("aria-label");
-            const itemLabel = await item.getProperty("label");
-            expect(handleAriaLabel).toBe(`${itemLabel}, press space and use arrow keys to reorder content. Current position ${startIndex + 1} of ${items.length}.`);
-            await page.keyboard.press("Space");
-            await page.waitForChanges();
-            expect(assistiveTextElement.textContent).toBe(`Reordering ${itemLabel}, current position ${startIndex + 1} of ${items.length}.`);
-            await page.keyboard.press("ArrowDown");
-            await page.waitForChanges();
-            startIndex += 1;
-            const changeHandleLabel = handle.getAttribute("aria-label");
-            expect(changeHandleLabel).toBe(`${itemLabel}, new position ${startIndex + 1} of ${items.length}. Press space to confirm.`);
-            await page.keyboard.press("Space");
-            await page.waitForChanges();
-            expect(assistiveTextElement.textContent).toBe(`${itemLabel}, current position ${startIndex + 1} of ${items.length}.`);
-            await page.keyboard.press("Space");
-            await page.waitForChanges();
-            await page.keyboard.press("ArrowUp");
-            await page.keyboard.press("Space");
-            await page.waitForChanges();
-            startIndex -= 1;
-            const idleHandleLabel = handle.getAttribute("aria-label");
-            expect(idleHandleLabel).toBe(`${itemLabel}, new position ${startIndex + 1} of ${items.length}. Press space to confirm.`);
-        });
-    });
-});

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

@@ -1,96 +0,0 @@
-import { CSS as PICK_LIST_ITEM_CSS, SLOTS } from "../pick-list-item/resources";
-import { accessible, disabled, focusable, renders, slots, hidden } from "../../tests/commonTests";
-import { newE2EPage } from "@stencil/core/testing";
-import { html } from "../../../support/formatting";
-describe("calcite-value-list-item", () => {
-    it("renders", async () => renders("calcite-value-list-item", { display: "flex" }));
-    it("honors hidden attribute", async () => hidden("calcite-value-list-item"));
-    it("is accessible", async () => {
-        await accessible(html `
-      <calcite-value-list>
-        <calcite-value-list-item label="test" description="a number" value="one"></calcite-value-list-item>
-      </calcite-value-list>
-    `);
-        await accessible(html `
-      <calcite-value-list>
-        <calcite-value-list-item label="test" description="a number" value="one" selected></calcite-value-list-item>
-      </calcite-value-list>
-    `);
-        await accessible(html `
-      <calcite-value-list>
-        <calcite-value-list-item label="test" description="a number" value="one" removable></calcite-value-list-item>
-      </calcite-value-list>
-    `);
-    });
-    it("has slots", () => slots("calcite-value-list-item", SLOTS));
-    it("is focusable", async () => focusable("calcite-value-list-item"));
-    it("can be disabled", async () => disabled("calcite-value-list-item"));
-    it("should toggle selected attribute when clicked", async () => {
-        const page = await newE2EPage({ html: `<calcite-value-list-item label="test"></calcite-value-list-item>` });
-        const item = await page.find("calcite-value-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 fire event calciteListItemChange when item is clicked", async () => {
-        const page = await newE2EPage({
-            html: `<calcite-value-list-item label="test" value="example"></calcite-value-list-item>`
-        });
-        const item = await page.find("calcite-value-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-value-list-item label="test" value="example" disable-deselect selected></calcite-value-list-item>`
-        });
-        const item = await page.find("calcite-value-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-value-list-item label="test" value="example" non-interactive></calcite-value-list-item>`
-        });
-        const item = await page.find("calcite-value-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-value-list-item label="test" value="example" non-interactive selected></calcite-value-list-item>`
-        });
-        const item = await page.find("calcite-value-list-item");
-        await item.click();
-        expect(await item.getProperty("selected")).toBe(true);
-    });
-    function queryWrappedPickListPart(page, partSelector, partMethodToInvoke) {
-        return page.$eval("calcite-value-list-item", (item, selector, partMethod) => {
-            const part = item.shadowRoot
-                .querySelector("calcite-pick-list-item")
-                .shadowRoot.querySelector(selector);
-            if (partMethod) {
-                part[partMethod]();
-            }
-        }, partSelector, partMethodToInvoke);
-    }
-    it("allows for easy removal", async () => {
-        const page = await newE2EPage({
-            html: `<calcite-value-list-item label="test" value="example" removable></calcite-value-list-item>`
-        });
-        const item = await page.find("calcite-value-list-item");
-        const removeEventSpy = await item.spyOnEvent("calciteListItemRemove");
-        await queryWrappedPickListPart(page, `.${PICK_LIST_ITEM_CSS.remove}`, "click");
-        expect(removeEventSpy).toHaveReceivedEventTimes(1);
-    });
-});

package/dist/collection/demos/_assets/demo-dom-swapper.js

@@ -1,45 +0,0 @@
-/**
- * This component helps test existing components work when encapsulated in another component's shadow DOM.
- *
- * Demo pages should set this component as the root, under `<body>`
- *
- * Note:* due to style encapsulation, demo styles need to be a child of the component
- */
-class DomSwapper extends HTMLElement {
-    constructor() {
-        super();
-        this._context = "light";
-        const shadow = this.attachShadow({ mode: "open" });
-        const slot = document.createElement("slot");
-        shadow.append(slot);
-        this._slot = slot;
-    }
-    get context() {
-        return this._context;
-    }
-    set context(value) {
-        this._context = value;
-    }
-    /**
-     * moves content between light and shadow DOM
-     *
-     * @param context
-     */
-    moveTo(context) {
-        if (context === "light") {
-            this.append(...Array.from(this.shadowRoot.children).filter((node) => node !== this._slot));
-            this._context = "light";
-        }
-        else {
-            if (!this._headStyles) {
-                this._headStyles = this.recreateDemoStyle();
-            }
-            this.shadowRoot.append(...this._headStyles, ...this.shadowRoot.querySelector("slot").assignedNodes());
-            this._context = "shadow";
-        }
-    }
-    recreateDemoStyle() {
-        return Array.from(document.querySelectorAll("head style:not([data-styles]), head link[rel=stylesheet]")).map((style) => style.cloneNode(true));
-    }
-}
-customElements.define("demo-dom-swapper", DomSwapper);

package/dist/collection/demos/_assets/demo-spacer.js

@@ -1,17 +0,0 @@
-class DemoSpacer extends HTMLElement {
-    constructor() {
-        super();
-        this.attachShadow({ mode: "open" });
-        this.shadowRoot.innerHTML = `
-          <style>
-            :host {
-              display: grid;
-              grid-template-columns: 1fr;
-              grid-gap: ${this.getAttribute("gap") || "12px"};
-            }
-          </style>
-          <slot></slot>
-        `;
-    }
-}
-customElements.define("demo-spacer", DemoSpacer);