@spectrum-web-components/picker 0.12.1-devmode.0 → 0.13.0

package/test/index.js

@@ -1,37 +1,4 @@
-import {
-  elementUpdated,
-  expect,
-  fixture,
-  html,
-  nextFrame,
-  oneEvent,
-  waitUntil
-} from "@open-wc/testing";
-import "@spectrum-web-components/shared/src/focus-visible.js";
-import { spy, stub } from "sinon";
-import {
-  arrowDownEvent,
-  arrowLeftEvent,
-  arrowRightEvent,
-  arrowUpEvent,
-  testForLitDevWarnings,
-  tEvent
-} from "../../../test/testing-helpers.js";
-import {
-  a11ySnapshot,
-  findAccessibilityNode,
-  sendKeys
-} from "@web/test-runner-commands";
-import { iconsOnly } from "../stories/picker.stories.js";
-import { sendMouse } from "../../../test/plugins/browser.js";
-const isMenuActiveElement = function() {
-  var _a;
-  return ((_a = document.activeElement) == null ? void 0 : _a.localName) === "sp-menu";
-};
-export function runPickerTests() {
-  let el;
-  const pickerFixture = async () => {
-    const test = await fixture(html`
+import{elementUpdated as s,expect as t,fixture as w,html as b,nextFrame as d,oneEvent as i,waitUntil as r}from"@open-wc/testing";import"@spectrum-web-components/shared/src/focus-visible.js";import{spy as h,stub as x}from"sinon";import{arrowDownEvent as M,arrowLeftEvent as T,arrowRightEvent as k,arrowUpEvent as N,testForLitDevWarnings as P,tEvent as C}from"../../../test/testing-helpers.js";import{a11ySnapshot as q,findAccessibilityNode as g,sendKeys as u}from"@web/test-runner-commands";import{iconsOnly as L}from"../stories/picker.stories.js";import{sendMouse as D}from"../../../test/plugins/browser.js";const v=function(){var e;return((e=document.activeElement)==null?void 0:e.localName)==="sp-menu"};export function runPickerTests(){let e;const S=async()=>(await w(b`
                 <div>
                     <sp-field-label for="picker">
                         Where do you live?
@@ -51,636 +18,7 @@ export function runPickerTests() {
                         <sp-menu-item disabled>Make Work Path</sp-menu-item>
                     </sp-picker>
                 </div>
-            `);
-    return test.querySelector("sp-picker");
-  };
-  describe("standard", () => {
-    beforeEach(async () => {
-      el = await pickerFixture();
-      await elementUpdated(el);
-    });
-    afterEach(async () => {
-      if (el.open) {
-        const closed = oneEvent(el, "sp-closed");
-        el.open = false;
-        await closed;
-      }
-    });
-    it("loads accessibly", async () => {
-      await expect(el).to.be.accessible();
-    });
-    it("closes accessibly", async () => {
-      const opened = oneEvent(el, "sp-opened");
-      el.open = true;
-      await opened;
-      expect(el.open).to.be.true;
-      const accessibleCloseButton = document.querySelector(".visually-hidden button");
-      const closed = oneEvent(el, "sp-closed");
-      accessibleCloseButton.click();
-      await closed;
-      expect(el.open).to.be.false;
-    });
-    it("accepts new selected item content", async () => {
-      const option2 = el.querySelector('[value="option-2"');
-      el.value = "option-2";
-      await elementUpdated(option2);
-      await elementUpdated(el);
-      expect(el.value).to.equal("option-2");
-      expect((el.button.textContent || "").trim()).to.equal("Select Inverse");
-      let itemUpdated = oneEvent(el, "sp-menu-item-added-or-updated");
-      const newLabel1 = "Invert Selection";
-      option2.innerHTML = newLabel1;
-      await itemUpdated;
-      await elementUpdated(el);
-      expect(el.value).to.equal("option-2");
-      expect((el.button.textContent || "").trim()).to.equal(newLabel1);
-      itemUpdated = oneEvent(el, "sp-menu-item-added-or-updated");
-      const newLabel2 = "Other option";
-      option2.childNodes[0].textContent = newLabel2;
-      await itemUpdated;
-      await elementUpdated(el);
-      expect(el.value).to.equal("option-2");
-      expect((el.button.textContent || "").trim()).to.equal(newLabel2);
-    });
-    it("accepts new selected item content when open", async () => {
-      const option2 = el.querySelector('[value="option-2"');
-      el.value = "option-2";
-      await elementUpdated(el);
-      expect(el.value).to.equal("option-2");
-      expect((el.button.textContent || "").trim()).to.equal("Select Inverse");
-      const opened = oneEvent(el, "sp-opened");
-      el.open = true;
-      await opened;
-      const itemUpdated = oneEvent(option2, "sp-menu-item-added-or-updated");
-      option2.innerHTML = "Invert Selection";
-      await itemUpdated;
-      await elementUpdated(el);
-      expect(el.value).to.equal("option-2");
-      expect((el.button.textContent || "").trim()).to.equal("Invert Selection");
-    });
-    it("unsets value when children removed", async () => {
-      el.value = "option-2";
-      await elementUpdated(el);
-      expect(el.value).to.equal("option-2");
-      expect((el.button.textContent || "").trim()).to.equal("Select Inverse");
-      const items = el.querySelectorAll("sp-menu-item");
-      const removals = [];
-      items.forEach((item) => {
-        const removal = oneEvent(el, "sp-menu-item-removed");
-        item.remove();
-        removals.push(removal);
-      });
-      await Promise.all(removals);
-      await elementUpdated(el);
-      expect(el.value).to.equal("");
-      expect((el.button.textContent || "").trim()).to.equal("");
-    });
-    it("accepts a new item and value at the same time", async () => {
-      el.value = "option-2";
-      await elementUpdated(el);
-      expect(el.value).to.equal("option-2");
-      const item = document.createElement("sp-menu-item");
-      item.value = "option-new";
-      item.textContent = "New Option";
-      el.append(item);
-      await elementUpdated(el);
-      el.value = "option-new";
-      await elementUpdated(el);
-      expect(el.value).to.equal("option-new");
-    });
-    it("accepts a new item that can be selected", async () => {
-      el.value = "option-2";
-      await elementUpdated(el);
-      expect(el.value).to.equal("option-2");
-      const item = document.createElement("sp-menu-item");
-      item.value = "option-new";
-      item.textContent = "New Option";
-      el.append(item);
-      await elementUpdated(item);
-      await elementUpdated(el);
-      let opened = oneEvent(el, "sp-opened");
-      el.open = true;
-      await opened;
-      await nextFrame();
-      const close = oneEvent(el, "sp-closed");
-      item.click();
-      await close;
-      await nextFrame();
-      expect(el.value, "first time").to.equal("option-new");
-      opened = oneEvent(el, "sp-opened");
-      el.open = true;
-      await opened;
-      await nextFrame();
-      expect(el.value, "second time").to.equal("option-new");
-    });
-    it('manages its "name" value in the accessibility tree', async () => {
-      let snapshot = await a11ySnapshot({});
-      expect(findAccessibilityNode(snapshot, (node) => node.name === "Where do you live?"), "`name` is the label text").to.not.be.null;
-      el.value = "option-2";
-      await elementUpdated(el);
-      snapshot = await a11ySnapshot({});
-      expect(findAccessibilityNode(snapshot, (node) => node.name === "Where do you live? Select Inverse"), "`name` is the label text plus the selected item text").to.not.be.null;
-    });
-    it("manages `aria-activedescendant`", async () => {
-      const firstItem = el.querySelector("sp-menu-item:nth-child(1)");
-      const secondItem = el.querySelector("sp-menu-item:nth-child(2)");
-      const opened = oneEvent(el, "sp-opened");
-      el.open = true;
-      await opened;
-      expect(el.optionsMenu.getAttribute("aria-activedescendant")).to.equal(firstItem == null ? void 0 : firstItem.id);
-      await sendKeys({ press: "ArrowDown" });
-      await elementUpdated(el);
-      expect(el.optionsMenu.getAttribute("aria-activedescendant")).to.equal(secondItem == null ? void 0 : secondItem.id);
-    });
-    it("renders invalid accessibly", async () => {
-      el.invalid = true;
-      await elementUpdated(el);
-      expect(el.invalid).to.be.true;
-      await expect(el).to.be.accessible();
-    });
-    it("renders selection accessibly", async () => {
-      el.value = "option-2";
-      await elementUpdated(el);
-      await expect(el).to.be.accessible();
-    });
-    it("opens with visible focus on a menu item on `DownArrow`", async () => {
-      const firstItem = el.querySelector("sp-menu-item");
-      await elementUpdated(el);
-      expect(firstItem.focused, "should not visually focused").to.be.false;
-      el.focus();
-      await elementUpdated(el);
-      const opened = oneEvent(el, "sp-opened");
-      await sendKeys({ press: "ArrowRight" });
-      await sendKeys({ press: "ArrowLeft" });
-      await sendKeys({ press: "ArrowDown" });
-      await opened;
-      expect(el.open).to.be.true;
-      expect(firstItem.focused, "should be visually focused").to.be.true;
-      const closed = oneEvent(el, "sp-closed");
-      await sendKeys({
-        press: "Escape"
-      });
-      await closed;
-      expect(el.open).to.be.false;
-      await waitUntil(() => !firstItem.focused, "not visually focused");
-    });
-    it("opens without visible focus on a menu item on click", async () => {
-      const firstItem = el.querySelector("sp-menu-item");
-      await elementUpdated(el);
-      const boundingRect = el.getBoundingClientRect();
-      expect(firstItem.focused, "not visually focused").to.be.false;
-      const opened = oneEvent(el, "sp-opened");
-      sendMouse({
-        steps: [
-          {
-            type: "click",
-            position: [
-              boundingRect.x + boundingRect.width / 2,
-              boundingRect.y + boundingRect.height / 2
-            ]
-          }
-        ]
-      });
-      await opened;
-      await elementUpdated(el);
-      expect(el.open).to.be.true;
-      expect(firstItem.focused, "still not visually focused").to.be.false;
-    });
-    it("closes when becoming disabled", async () => {
-      expect(el.open).to.be.false;
-      el.click();
-      await elementUpdated(el);
-      expect(el.open).to.be.true;
-      el.disabled = true;
-      await elementUpdated(el);
-      expect(el.open).to.be.false;
-    });
-    it("closes when clicking away", async () => {
-      el.id = "closing";
-      const other = document.createElement("div");
-      document.body.append(other);
-      await elementUpdated(el);
-      expect(el.open).to.be.false;
-      el.click();
-      await elementUpdated(el);
-      expect(el.open).to.be.true;
-      other.click();
-      await waitUntil(() => !el.open, "closed");
-      other.remove();
-    });
-    it("selects", async () => {
-      var _a, _b;
-      const secondItem = el.querySelector("sp-menu-item:nth-of-type(2)");
-      const button = el.button;
-      const opened = oneEvent(el, "sp-opened");
-      button.click();
-      await opened;
-      await elementUpdated(el);
-      expect(el.open).to.be.true;
-      expect((_a = el.selectedItem) == null ? void 0 : _a.itemText).to.be.undefined;
-      expect(el.value).to.equal("");
-      const closed = oneEvent(el, "sp-closed");
-      secondItem.click();
-      await closed;
-      expect(el.open).to.be.false;
-      expect((_b = el.selectedItem) == null ? void 0 : _b.itemText).to.equal("Select Inverse");
-      expect(el.value).to.equal("option-2");
-    });
-    it("re-selects", async () => {
-      var _a, _b, _c, _d;
-      const firstItem = el.querySelector("sp-menu-item:nth-of-type(1)");
-      const secondItem = el.querySelector("sp-menu-item:nth-of-type(2)");
-      const button = el.button;
-      const opened = oneEvent(el, "sp-opened");
-      button.click();
-      await opened;
-      await nextFrame();
-      expect(el.open).to.be.true;
-      expect((_a = el.selectedItem) == null ? void 0 : _a.itemText).to.be.undefined;
-      expect(el.value).to.equal("");
-      const closed = oneEvent(el, "sp-closed");
-      secondItem.click();
-      await closed;
-      await nextFrame();
-      expect(el.open).to.be.false;
-      expect((_b = el.selectedItem) == null ? void 0 : _b.itemText).to.equal("Select Inverse");
-      expect(el.value).to.equal("option-2");
-      const opened2 = oneEvent(el, "sp-opened");
-      button.click();
-      await opened2;
-      await nextFrame();
-      expect(el.open).to.be.true;
-      expect((_c = el.selectedItem) == null ? void 0 : _c.itemText).to.equal("Select Inverse");
-      expect(el.value).to.equal("option-2");
-      const closed2 = oneEvent(el, "sp-closed");
-      firstItem.click();
-      await closed2;
-      await nextFrame();
-      expect(el.open).to.be.false;
-      expect((_d = el.selectedItem) == null ? void 0 : _d.itemText).to.equal("Deselect");
-      expect(el.value).to.equal("Deselect");
-    });
-    it("dispatches bubbling and composed events", async () => {
-      const changeSpy = spy();
-      const parent = el.parentElement;
-      parent.attachShadow({ mode: "open" });
-      parent.shadowRoot.append(el);
-      const secondItem = el.querySelector("sp-menu-item:nth-of-type(2)");
-      parent.addEventListener("change", () => changeSpy());
-      expect(el.value).to.equal("");
-      const opened = oneEvent(el, "sp-opened");
-      el.open = true;
-      await opened;
-      await elementUpdated(el);
-      const closed = oneEvent(el, "sp-closed");
-      secondItem.click();
-      await closed;
-      await elementUpdated(el);
-      expect(el.value).to.equal(secondItem.value);
-      expect(changeSpy.calledOnce).to.be.true;
-    });
-    it("can have selection prevented", async () => {
-      var _a;
-      const preventChangeSpy = spy();
-      const secondItem = el.querySelector("sp-menu-item:nth-of-type(2)");
-      const button = el.button;
-      let opened = oneEvent(el, "sp-opened");
-      button.click();
-      await opened;
-      await elementUpdated(el);
-      expect(el.open).to.be.true;
-      expect((_a = el.selectedItem) == null ? void 0 : _a.itemText).to.be.undefined;
-      expect(el.value).to.equal("");
-      expect(secondItem.selected).to.be.false;
-      el.addEventListener("change", (event) => {
-        event.preventDefault();
-        preventChangeSpy();
-      });
-      const closed = oneEvent(el, "sp-closed");
-      opened = oneEvent(el, "sp-opened");
-      secondItem.click();
-      await closed;
-      await opened;
-      await elementUpdated(el);
-      expect(preventChangeSpy.calledOnce).to.be.true;
-      expect(secondItem.selected, "selection prevented").to.be.false;
-    });
-    it("can throw focus after `change`", async () => {
-      var _a;
-      const input = document.createElement("input");
-      document.body.append(input);
-      await elementUpdated(el);
-      const secondItem = el.querySelector("sp-menu-item:nth-of-type(2)");
-      const button = el.button;
-      const opened = oneEvent(el, "sp-opened");
-      button.click();
-      await opened;
-      await elementUpdated(el);
-      expect(el.open).to.be.true;
-      expect((_a = el.selectedItem) == null ? void 0 : _a.itemText).to.be.undefined;
-      expect(el.value).to.equal("");
-      expect(secondItem.selected).to.be.false;
-      el.addEventListener("change", () => {
-        input.focus();
-      });
-      const closed = oneEvent(el, "sp-closed");
-      secondItem.click();
-      await closed;
-      await elementUpdated(el);
-      expect(el.open).to.be.false;
-      expect(el.value, "value changed").to.equal("option-2");
-      expect(secondItem.selected, "selected changed").to.be.true;
-      await waitUntil(() => document.activeElement === input, "focus throw");
-      input.remove();
-    });
-    it("opens on ArrowUp", async () => {
-      const button = el.button;
-      el.focus();
-      await elementUpdated(el);
-      expect(el.open, "inially closed").to.be.false;
-      button.dispatchEvent(tEvent());
-      await elementUpdated(el);
-      expect(el.open, "still closed").to.be.false;
-      button.dispatchEvent(arrowUpEvent());
-      await elementUpdated(el);
-      expect(el.open, "open by ArrowUp").to.be.true;
-      await waitUntil(() => document.querySelector("active-overlay") !== null, "an active-overlay has been inserted on the page");
-      button.dispatchEvent(new KeyboardEvent("keyup", {
-        bubbles: true,
-        composed: true,
-        cancelable: true,
-        key: "Escape",
-        code: "Escape"
-      }));
-      await elementUpdated(el);
-      await waitUntil(() => el.open === false, "closed by Escape");
-      await waitUntil(() => document.querySelector("active-overlay") === null, "an active-overlay has been inserted on the page");
-    });
-    it("opens on ArrowDown", async () => {
-      var _a, _b;
-      const firstItem = el.querySelector("sp-menu-item:nth-of-type(1)");
-      const button = el.button;
-      el.focus();
-      await elementUpdated(el);
-      expect(el.open, "inially closed").to.be.false;
-      const opened = oneEvent(el, "sp-opened");
-      button.dispatchEvent(arrowDownEvent());
-      await opened;
-      await elementUpdated(el);
-      expect(el.open, "open by ArrowDown").to.be.true;
-      expect((_a = el.selectedItem) == null ? void 0 : _a.itemText).to.be.undefined;
-      expect(el.value).to.equal("");
-      const closed = oneEvent(el, "sp-closed");
-      firstItem.click();
-      await closed;
-      await elementUpdated(el);
-      expect(el.open).to.be.false;
-      expect((_b = el.selectedItem) == null ? void 0 : _b.itemText).to.equal("Deselect");
-      expect(el.value).to.equal("Deselect");
-    });
-    it("quick selects on ArrowLeft/Right", async () => {
-      const selectionSpy = spy();
-      el.addEventListener("change", (event) => {
-        const { value } = event.target;
-        selectionSpy(value);
-      });
-      const button = el.button;
-      el.focus();
-      button.dispatchEvent(arrowLeftEvent());
-      await elementUpdated(el);
-      expect(selectionSpy.callCount).to.equal(1);
-      expect(selectionSpy.calledWith("Deselected"));
-      button.dispatchEvent(arrowLeftEvent());
-      await elementUpdated(el);
-      expect(selectionSpy.callCount).to.equal(1);
-      button.dispatchEvent(arrowRightEvent());
-      await elementUpdated(el);
-      expect(selectionSpy.calledWith("option-2"));
-      button.dispatchEvent(arrowRightEvent());
-      button.dispatchEvent(arrowRightEvent());
-      button.dispatchEvent(arrowRightEvent());
-      button.dispatchEvent(arrowRightEvent());
-      await elementUpdated(el);
-      expect(selectionSpy.callCount).to.equal(5);
-      expect(selectionSpy.calledWith("Save Selection"));
-      expect(selectionSpy.calledWith("Make Work Path")).to.be.false;
-    });
-    it("quick selects first item on ArrowRight when no value", async () => {
-      const selectionSpy = spy();
-      el.addEventListener("change", (event) => {
-        const { value } = event.target;
-        selectionSpy(value);
-      });
-      const button = el.button;
-      el.focus();
-      button.dispatchEvent(arrowRightEvent());
-      await elementUpdated(el);
-      expect(selectionSpy.callCount).to.equal(1);
-      expect(selectionSpy.calledWith("Deselected"));
-    });
-    it("loads", async () => {
-      expect(el).to.not.be.undefined;
-    });
-    it("refocuses on list when open", async () => {
-      const firstItem = el.querySelector("sp-menu-item");
-      const input = document.createElement("input");
-      el.insertAdjacentElement("afterend", input);
-      el.focus();
-      await sendKeys({ press: "Tab" });
-      expect(document.activeElement === input).to.be.true;
-      await sendKeys({ press: "Shift+Tab" });
-      expect(document.activeElement === el).to.be.true;
-      await sendKeys({ press: "Enter" });
-      const opened = oneEvent(el, "sp-opened");
-      el.open = true;
-      await opened;
-      await elementUpdated(el);
-      await waitUntil(() => firstItem.focused, "The first items should have become focused visually.");
-      el.blur();
-      await elementUpdated(el);
-      expect(el.open).to.be.true;
-      el.focus();
-      await elementUpdated(el);
-      await waitUntil(() => isMenuActiveElement(), "first item refocused");
-      expect(el.open).to.be.true;
-      expect(isMenuActiveElement()).to.be.true;
-      await sendKeys({ press: "ArrowDown" });
-      await sendKeys({ press: "ArrowUp" });
-      expect(firstItem.focused).to.be.true;
-    });
-    it("does not allow tabing to close", async () => {
-      el.open = true;
-      await elementUpdated(el);
-      expect(el.open).to.be.true;
-      el.focus();
-      await elementUpdated(el);
-      await waitUntil(() => isMenuActiveElement(), "first item refocused");
-      expect(el.open).to.be.true;
-      expect(isMenuActiveElement()).to.be.true;
-      await sendKeys({ press: "Tab" });
-      expect(el.open, "stays open").to.be.true;
-    });
-    describe("tab order", () => {
-      let input1;
-      let input2;
-      beforeEach(() => {
-        const surroundingInput = () => {
-          const input = document.createElement("input");
-          input.type = "text";
-          input.tabIndex = 0;
-          return input;
-        };
-        input1 = surroundingInput();
-        input2 = surroundingInput();
-        el.insertAdjacentElement("beforebegin", input1);
-        el.insertAdjacentElement("afterend", input2);
-      });
-      afterEach(() => {
-        input1.remove();
-        input2.remove();
-      });
-      it("tabs forward through the element", async () => {
-        input1.focus();
-        await nextFrame();
-        expect(document.activeElement === input1, "focuses input 1").to.true;
-        let focused = oneEvent(el, "focus");
-        await sendKeys({ press: "Tab" });
-        await focused;
-        expect(el.focused, "focused").to.be.true;
-        expect(el.open, "closed").to.be.false;
-        expect(document.activeElement === el, "focuses el").to.be.true;
-        focused = oneEvent(input2, "focus");
-        await sendKeys({ press: "Tab" });
-        await focused;
-        expect(document.activeElement === input2, "focuses input 2").to.true;
-      });
-      it("shift+tabs backwards through the element", async () => {
-        input2.focus();
-        await nextFrame();
-        expect(document.activeElement, "focuses input 2").to.equal(input2);
-        let focused = oneEvent(el, "focus");
-        await sendKeys({ press: "Shift+Tab" });
-        await focused;
-        expect(el.focused, "focused").to.be.true;
-        expect(el.open, "closed").to.be.false;
-        expect(document.activeElement, "focuses el").to.equal(el);
-        focused = oneEvent(input1, "focus");
-        await sendKeys({ press: "Shift+Tab" });
-        await focused;
-        expect(document.activeElement, "focuses input 1").to.equal(input1);
-      });
-      it('traps tab in the menu as a `type="modal"` overlay forward', async () => {
-        el.focus();
-        await nextFrame();
-        expect(document.activeElement, "focuses el").to.equal(el);
-        const opened = oneEvent(el, "sp-opened");
-        await sendKeys({ press: "ArrowDown" });
-        await opened;
-        expect(el.open, "opened").to.be.true;
-        await waitUntil(() => isMenuActiveElement(), "first item focused");
-        const activeElement = document.activeElement;
-        const blured = oneEvent(activeElement, "blur");
-        await sendKeys({ press: "Tab" });
-        await blured;
-        expect(el.open).to.be.true;
-        expect(document.activeElement === input1).to.be.false;
-        expect(document.activeElement === input2).to.be.false;
-      });
-      it('traps tab in the menu as a `type="modal"` overlay backwards', async () => {
-        el.focus();
-        await nextFrame();
-        expect(document.activeElement, "focuses el").to.equal(el);
-        const opened = oneEvent(el, "sp-opened");
-        await sendKeys({ press: "ArrowDown" });
-        await opened;
-        expect(el.open, "opened").to.be.true;
-        await waitUntil(() => isMenuActiveElement(), "first item focused");
-        const activeElement = document.activeElement;
-        const blured = oneEvent(activeElement, "blur");
-        await sendKeys({ press: "Shift+Tab" });
-        await blured;
-        expect(el.open).to.be.true;
-        expect(document.activeElement === input1).to.be.false;
-        expect(document.activeElement === input2).to.be.false;
-      });
-      it("can close and immediate tab to the next tab stop", async () => {
-        el.focus();
-        await nextFrame();
-        expect(document.activeElement, "focuses el").to.equal(el);
-        const opened = oneEvent(el, "sp-opened");
-        await sendKeys({ press: "ArrowUp" });
-        await opened;
-        expect(el.open, "opened").to.be.true;
-        await waitUntil(() => isMenuActiveElement(), "first item focused");
-        const closed = oneEvent(el, "sp-closed");
-        el.open = false;
-        await closed;
-        expect(el.open).to.be.false;
-        expect(document.activeElement === el).to.be.true;
-        const focused = oneEvent(input2, "focus");
-        await sendKeys({ press: "Tab" });
-        await focused;
-        expect(el.open).to.be.false;
-        expect(document.activeElement === input2).to.be.true;
-      });
-      it("can close and immediate shift+tab to the previous tab stop", async () => {
-        el.focus();
-        await nextFrame();
-        expect(document.activeElement, "focuses el").to.equal(el);
-        const opened = oneEvent(el, "sp-opened");
-        await sendKeys({ press: "ArrowUp" });
-        await opened;
-        expect(el.open, "opened").to.be.true;
-        await waitUntil(() => isMenuActiveElement(), "first item focused");
-        const closed = oneEvent(el, "sp-closed");
-        el.open = false;
-        await closed;
-        expect(el.open).to.be.false;
-        expect(document.activeElement === el).to.be.true;
-        const focused = oneEvent(input1, "focus");
-        await sendKeys({ press: "Shift+Tab" });
-        await focused;
-        expect(el.open).to.be.false;
-        expect(document.activeElement === input1).to.be.true;
-      });
-    });
-    it("does not open when [readonly]", async () => {
-      el.readonly = true;
-      await elementUpdated(el);
-      const button = el.button;
-      button.click();
-      await elementUpdated(el);
-      expect(el.open).to.be.false;
-    });
-    it("scrolls selected into view on open", async () => {
-      await el.generatePopover();
-      el.popover.style.height = "40px";
-      const firstItem = el.querySelector("sp-menu-item:first-child");
-      const lastItem = el.querySelector("sp-menu-item:last-child");
-      lastItem.disabled = false;
-      el.value = lastItem.value;
-      await elementUpdated(el);
-      el.open = true;
-      await elementUpdated(el);
-      await waitUntil(() => isMenuActiveElement(), "first item focused");
-      const getParentOffset = (el2) => {
-        const parentScroll = el2.parentElement.scrollTop;
-        const parentOffset = el2.offsetTop - parentScroll;
-        return parentOffset;
-      };
-      expect(getParentOffset(lastItem)).to.be.lessThan(40);
-      expect(getParentOffset(firstItem)).to.be.lessThan(-1);
-      lastItem.dispatchEvent(new FocusEvent("focusin", { bubbles: true }));
-      lastItem.dispatchEvent(arrowDownEvent());
-      await elementUpdated(el);
-      await nextFrame();
-      expect(getParentOffset(lastItem)).to.be.greaterThan(40);
-      expect(getParentOffset(firstItem)).to.be.greaterThan(-1);
-    });
-  });
-  describe("grouped", async () => {
-    const groupedFixture = async () => {
-      return fixture(html`
+            `)).querySelector("sp-picker");describe("standard",()=>{beforeEach(async()=>{e=await S(),await s(e)}),afterEach(async()=>{if(e.open){const a=i(e,"sp-closed");e.open=!1,await a}}),it("loads accessibly",async()=>{await t(e).to.be.accessible()}),it("closes accessibly",async()=>{const a=i(e,"sp-opened");e.open=!0,await a,t(e.open).to.be.true;const o=document.querySelector(".visually-hidden button"),n=i(e,"sp-closed");o.click(),await n,t(e.open).to.be.false}),it("accepts new selected item content",async()=>{const a=e.querySelector('[value="option-2"');e.value="option-2",await s(a),await s(e),t(e.value).to.equal("option-2"),t((e.button.textContent||"").trim()).to.equal("Select Inverse");let o=i(e,"sp-menu-item-added-or-updated");const n="Invert Selection";a.innerHTML=n,await o,await s(e),t(e.value).to.equal("option-2"),t((e.button.textContent||"").trim()).to.equal(n),o=i(e,"sp-menu-item-added-or-updated");const c="Other option";a.childNodes[0].textContent=c,await o,await s(e),t(e.value).to.equal("option-2"),t((e.button.textContent||"").trim()).to.equal(c)}),it("accepts new selected item content when open",async()=>{const a=e.querySelector('[value="option-2"');e.value="option-2",await s(e),t(e.value).to.equal("option-2"),t((e.button.textContent||"").trim()).to.equal("Select Inverse");const o=i(e,"sp-opened");e.open=!0,await o;const n=i(a,"sp-menu-item-added-or-updated");a.innerHTML="Invert Selection",await n,await s(e),t(e.value).to.equal("option-2"),t((e.button.textContent||"").trim()).to.equal("Invert Selection")}),it("unsets value when children removed",async()=>{e.value="option-2",await s(e),t(e.value).to.equal("option-2"),t((e.button.textContent||"").trim()).to.equal("Select Inverse");const a=e.querySelectorAll("sp-menu-item"),o=[];a.forEach(n=>{const c=i(e,"sp-menu-item-removed");n.remove(),o.push(c)}),await Promise.all(o),await s(e),t(e.value).to.equal(""),t((e.button.textContent||"").trim()).to.equal("")}),it("accepts a new item and value at the same time",async()=>{e.value="option-2",await s(e),t(e.value).to.equal("option-2");const a=document.createElement("sp-menu-item");a.value="option-new",a.textContent="New Option",e.append(a),await s(e),e.value="option-new",await s(e),t(e.value).to.equal("option-new")}),it("accepts a new item that can be selected",async()=>{e.value="option-2",await s(e),t(e.value).to.equal("option-2");const a=document.createElement("sp-menu-item");a.value="option-new",a.textContent="New Option",e.append(a),await s(a),await s(e);let o=i(e,"sp-opened");e.open=!0,await o,await d();const n=i(e,"sp-closed");a.click(),await n,await d(),t(e.value,"first time").to.equal("option-new"),o=i(e,"sp-opened"),e.open=!0,await o,await d(),t(e.value,"second time").to.equal("option-new")}),it('manages its "name" value in the accessibility tree',async()=>{let a=await q({});t(g(a,o=>o.name==="Where do you live?"),"`name` is the label text").to.not.be.null,e.value="option-2",await s(e),a=await q({}),t(g(a,o=>o.name==="Where do you live? Select Inverse"),"`name` is the label text plus the selected item text").to.not.be.null}),it("manages `aria-activedescendant`",async()=>{const a=e.querySelector("sp-menu-item:nth-child(1)"),o=e.querySelector("sp-menu-item:nth-child(2)"),n=i(e,"sp-opened");e.open=!0,await n,t(e.optionsMenu.getAttribute("aria-activedescendant")).to.equal(a==null?void 0:a.id),await u({press:"ArrowDown"}),await s(e),t(e.optionsMenu.getAttribute("aria-activedescendant")).to.equal(o==null?void 0:o.id)}),it("renders invalid accessibly",async()=>{e.invalid=!0,await s(e),t(e.invalid).to.be.true,await t(e).to.be.accessible()}),it("renders selection accessibly",async()=>{e.value="option-2",await s(e),await t(e).to.be.accessible()}),it("opens with visible focus on a menu item on `DownArrow`",async()=>{const a=e.querySelector("sp-menu-item");await s(e),t(a.focused,"should not visually focused").to.be.false,e.focus(),await s(e);const o=i(e,"sp-opened");await u({press:"ArrowRight"}),await u({press:"ArrowLeft"}),await u({press:"ArrowDown"}),await o,t(e.open).to.be.true,t(a.focused,"should be visually focused").to.be.true;const n=i(e,"sp-closed");await u({press:"Escape"}),await n,t(e.open).to.be.false,await r(()=>!a.focused,"not visually focused")}),it("opens without visible focus on a menu item on click",async()=>{const a=e.querySelector("sp-menu-item");await s(e);const o=e.getBoundingClientRect();t(a.focused,"not visually focused").to.be.false;const n=i(e,"sp-opened");D({steps:[{type:"click",position:[o.x+o.width/2,o.y+o.height/2]}]}),await n,await s(e),t(e.open).to.be.true,t(a.focused,"still not visually focused").to.be.false}),it("closes when becoming disabled",async()=>{t(e.open).to.be.false,e.click(),await s(e),t(e.open).to.be.true,e.disabled=!0,await s(e),t(e.open).to.be.false}),it("closes when clicking away",async()=>{e.id="closing";const a=document.createElement("div");document.body.append(a),await s(e),t(e.open).to.be.false,e.click(),await s(e),t(e.open).to.be.true,a.click(),await r(()=>!e.open,"closed"),a.remove()}),it("selects",async()=>{var l,p;const a=e.querySelector("sp-menu-item:nth-of-type(2)"),o=e.button,n=i(e,"sp-opened");o.click(),await n,await s(e),t(e.open).to.be.true,t((l=e.selectedItem)==null?void 0:l.itemText).to.be.undefined,t(e.value).to.equal("");const c=i(e,"sp-closed");a.click(),await c,t(e.open).to.be.false,t((p=e.selectedItem)==null?void 0:p.itemText).to.equal("Select Inverse"),t(e.value).to.equal("option-2")}),it("re-selects",async()=>{var f,y,E,I;const a=e.querySelector("sp-menu-item:nth-of-type(1)"),o=e.querySelector("sp-menu-item:nth-of-type(2)"),n=e.button,c=i(e,"sp-opened");n.click(),await c,await d(),t(e.open).to.be.true,t((f=e.selectedItem)==null?void 0:f.itemText).to.be.undefined,t(e.value).to.equal("");const l=i(e,"sp-closed");o.click(),await l,await d(),t(e.open).to.be.false,t((y=e.selectedItem)==null?void 0:y.itemText).to.equal("Select Inverse"),t(e.value).to.equal("option-2");const p=i(e,"sp-opened");n.click(),await p,await d(),t(e.open).to.be.true,t((E=e.selectedItem)==null?void 0:E.itemText).to.equal("Select Inverse"),t(e.value).to.equal("option-2");const m=i(e,"sp-closed");a.click(),await m,await d(),t(e.open).to.be.false,t((I=e.selectedItem)==null?void 0:I.itemText).to.equal("Deselect"),t(e.value).to.equal("Deselect")}),it("dispatches bubbling and composed events",async()=>{const a=h(),o=e.parentElement;o.attachShadow({mode:"open"}),o.shadowRoot.append(e);const n=e.querySelector("sp-menu-item:nth-of-type(2)");o.addEventListener("change",()=>a()),t(e.value).to.equal("");const c=i(e,"sp-opened");e.open=!0,await c,await s(e);const l=i(e,"sp-closed");n.click(),await l,await s(e),t(e.value).to.equal(n.value),t(a.calledOnce).to.be.true}),it("can have selection prevented",async()=>{var p;const a=h(),o=e.querySelector("sp-menu-item:nth-of-type(2)"),n=e.button;let c=i(e,"sp-opened");n.click(),await c,await s(e),t(e.open).to.be.true,t((p=e.selectedItem)==null?void 0:p.itemText).to.be.undefined,t(e.value).to.equal(""),t(o.selected).to.be.false,e.addEventListener("change",m=>{m.preventDefault(),a()});const l=i(e,"sp-closed");c=i(e,"sp-opened"),o.click(),await l,await c,await s(e),t(a.calledOnce).to.be.true,t(o.selected,"selection prevented").to.be.false}),it("can throw focus after `change`",async()=>{var p;const a=document.createElement("input");document.body.append(a),await s(e);const o=e.querySelector("sp-menu-item:nth-of-type(2)"),n=e.button,c=i(e,"sp-opened");n.click(),await c,await s(e),t(e.open).to.be.true,t((p=e.selectedItem)==null?void 0:p.itemText).to.be.undefined,t(e.value).to.equal(""),t(o.selected).to.be.false,e.addEventListener("change",()=>{a.focus()});const l=i(e,"sp-closed");o.click(),await l,await s(e),t(e.open).to.be.false,t(e.value,"value changed").to.equal("option-2"),t(o.selected,"selected changed").to.be.true,await r(()=>document.activeElement===a,"focus throw"),a.remove()}),it("opens on ArrowUp",async()=>{const a=e.button;e.focus(),await s(e),t(e.open,"inially closed").to.be.false,a.dispatchEvent(C()),await s(e),t(e.open,"still closed").to.be.false,a.dispatchEvent(N()),await s(e),t(e.open,"open by ArrowUp").to.be.true,await r(()=>document.querySelector("active-overlay")!==null,"an active-overlay has been inserted on the page"),a.dispatchEvent(new KeyboardEvent("keyup",{bubbles:!0,composed:!0,cancelable:!0,key:"Escape",code:"Escape"})),await s(e),await r(()=>e.open===!1,"closed by Escape"),await r(()=>document.querySelector("active-overlay")===null,"an active-overlay has been inserted on the page")}),it("opens on ArrowDown",async()=>{var l,p;const a=e.querySelector("sp-menu-item:nth-of-type(1)"),o=e.button;e.focus(),await s(e),t(e.open,"inially closed").to.be.false;const n=i(e,"sp-opened");o.dispatchEvent(M()),await n,await s(e),t(e.open,"open by ArrowDown").to.be.true,t((l=e.selectedItem)==null?void 0:l.itemText).to.be.undefined,t(e.value).to.equal("");const c=i(e,"sp-closed");a.click(),await c,await s(e),t(e.open).to.be.false,t((p=e.selectedItem)==null?void 0:p.itemText).to.equal("Deselect"),t(e.value).to.equal("Deselect")}),it("quick selects on ArrowLeft/Right",async()=>{const a=h();e.addEventListener("change",n=>{const{value:c}=n.target;a(c)});const o=e.button;e.focus(),o.dispatchEvent(T()),await s(e),t(a.callCount).to.equal(1),t(a.calledWith("Deselected")),o.dispatchEvent(T()),await s(e),t(a.callCount).to.equal(1),o.dispatchEvent(k()),await s(e),t(a.calledWith("option-2")),o.dispatchEvent(k()),o.dispatchEvent(k()),o.dispatchEvent(k()),o.dispatchEvent(k()),await s(e),t(a.callCount).to.equal(5),t(a.calledWith("Save Selection")),t(a.calledWith("Make Work Path")).to.be.false}),it("quick selects first item on ArrowRight when no value",async()=>{const a=h();e.addEventListener("change",n=>{const{value:c}=n.target;a(c)});const o=e.button;e.focus(),o.dispatchEvent(k()),await s(e),t(a.callCount).to.equal(1),t(a.calledWith("Deselected"))}),it("loads",async()=>{t(e).to.not.be.undefined}),it("refocuses on list when open",async()=>{const a=e.querySelector("sp-menu-item"),o=document.createElement("input");e.insertAdjacentElement("afterend",o),e.focus(),await u({press:"Tab"}),t(document.activeElement===o).to.be.true,await u({press:"Shift+Tab"}),t(document.activeElement===e).to.be.true,await u({press:"Enter"});const n=i(e,"sp-opened");e.open=!0,await n,await s(e),await r(()=>a.focused,"The first items should have become focused visually."),e.blur(),await s(e),t(e.open).to.be.true,e.focus(),await s(e),await r(()=>v(),"first item refocused"),t(e.open).to.be.true,t(v()).to.be.true,await u({press:"ArrowDown"}),await u({press:"ArrowUp"}),t(a.focused).to.be.true}),it("does not allow tabing to close",async()=>{e.open=!0,await s(e),t(e.open).to.be.true,e.focus(),await s(e),await r(()=>v(),"first item refocused"),t(e.open).to.be.true,t(v()).to.be.true,await u({press:"Tab"}),t(e.open,"stays open").to.be.true}),describe("tab order",()=>{let a,o;beforeEach(()=>{const n=()=>{const c=document.createElement("input");return c.type="text",c.tabIndex=0,c};a=n(),o=n(),e.insertAdjacentElement("beforebegin",a),e.insertAdjacentElement("afterend",o)}),afterEach(()=>{a.remove(),o.remove()}),it("tabs forward through the element",async()=>{a.focus(),await d(),t(document.activeElement===a,"focuses input 1").to.true;let n=i(e,"focus");await u({press:"Tab"}),await n,t(e.focused,"focused").to.be.true,t(e.open,"closed").to.be.false,t(document.activeElement===e,"focuses el").to.be.true,n=i(o,"focus"),await u({press:"Tab"}),await n,t(document.activeElement===o,"focuses input 2").to.true}),it("shift+tabs backwards through the element",async()=>{o.focus(),await d(),t(document.activeElement,"focuses input 2").to.equal(o);let n=i(e,"focus");await u({press:"Shift+Tab"}),await n,t(e.focused,"focused").to.be.true,t(e.open,"closed").to.be.false,t(document.activeElement,"focuses el").to.equal(e),n=i(a,"focus"),await u({press:"Shift+Tab"}),await n,t(document.activeElement,"focuses input 1").to.equal(a)}),it('traps tab in the menu as a `type="modal"` overlay forward',async()=>{e.focus(),await d(),t(document.activeElement,"focuses el").to.equal(e);const n=i(e,"sp-opened");await u({press:"ArrowDown"}),await n,t(e.open,"opened").to.be.true,await r(()=>v(),"first item focused");const c=document.activeElement,l=i(c,"blur");await u({press:"Tab"}),await l,t(e.open).to.be.true,t(document.activeElement===a).to.be.false,t(document.activeElement===o).to.be.false}),it('traps tab in the menu as a `type="modal"` overlay backwards',async()=>{e.focus(),await d(),t(document.activeElement,"focuses el").to.equal(e);const n=i(e,"sp-opened");await u({press:"ArrowDown"}),await n,t(e.open,"opened").to.be.true,await r(()=>v(),"first item focused");const c=document.activeElement,l=i(c,"blur");await u({press:"Shift+Tab"}),await l,t(e.open).to.be.true,t(document.activeElement===a).to.be.false,t(document.activeElement===o).to.be.false}),it("can close and immediate tab to the next tab stop",async()=>{e.focus(),await d(),t(document.activeElement,"focuses el").to.equal(e);const n=i(e,"sp-opened");await u({press:"ArrowUp"}),await n,t(e.open,"opened").to.be.true,await r(()=>v(),"first item focused");const c=i(e,"sp-closed");e.open=!1,await c,t(e.open).to.be.false,t(document.activeElement===e).to.be.true;const l=i(o,"focus");await u({press:"Tab"}),await l,t(e.open).to.be.false,t(document.activeElement===o).to.be.true}),it("can close and immediate shift+tab to the previous tab stop",async()=>{e.focus(),await d(),t(document.activeElement,"focuses el").to.equal(e);const n=i(e,"sp-opened");await u({press:"ArrowUp"}),await n,t(e.open,"opened").to.be.true,await r(()=>v(),"first item focused");const c=i(e,"sp-closed");e.open=!1,await c,t(e.open).to.be.false,t(document.activeElement===e).to.be.true;const l=i(a,"focus");await u({press:"Shift+Tab"}),await l,t(e.open).to.be.false,t(document.activeElement===a).to.be.true})}),it("does not open when [readonly]",async()=>{e.readonly=!0,await s(e),e.button.click(),await s(e),t(e.open).to.be.false}),it("scrolls selected into view on open",async()=>{await e.generatePopover(),e.popover.style.height="40px";const a=e.querySelector("sp-menu-item:first-child"),o=e.querySelector("sp-menu-item:last-child");o.disabled=!1,e.value=o.value,await s(e),e.open=!0,await s(e),await r(()=>v(),"first item focused");const n=c=>{const l=c.parentElement.scrollTop;return c.offsetTop-l};t(n(o)).to.be.lessThan(40),t(n(a)).to.be.lessThan(-1),o.dispatchEvent(new FocusEvent("focusin",{bubbles:!0})),o.dispatchEvent(M()),await s(e),await d(),t(n(o)).to.be.greaterThan(40),t(n(a)).to.be.greaterThan(-1)})}),describe("grouped",async()=>{const a=async()=>w(b`
                     <sp-picker
                         quiet
                         label="I would like to use Spectrum Web Components"
@@ -702,20 +40,7 @@ export function runPickerTests() {
                             <sp-menu-item value="4">In the future</sp-menu-item>
                         </sp-menu-group>
                     </sp-picker>
-                `);
-    };
-    beforeEach(async () => {
-      el = await groupedFixture();
-      await elementUpdated(el);
-    });
-    it("selects the item with a matching value in a group", async () => {
-      const item = el.querySelector("#should-be-selected");
-      expect(item.selected).to.be.true;
-    });
-  });
-  describe("slotted label", () => {
-    const pickerFixture2 = async () => {
-      const test = await fixture(html`
+                `);beforeEach(async()=>{e=await a(),await s(e)}),it("selects the item with a matching value in a group",async()=>{const o=e.querySelector("#should-be-selected");t(o.selected).to.be.true})}),describe("slotted label",()=>{const a=async()=>(await w(b`
                     <div>
                         <sp-field-label for="picker-slotted">
                             Where do you live?
@@ -736,27 +61,7 @@ export function runPickerTests() {
                             <sp-menu-item disabled>Make Work Path</sp-menu-item>
                         </sp-picker>
                     </div>
-                `);
-      return test.querySelector("sp-picker");
-    };
-    beforeEach(async () => {
-      el = await pickerFixture2();
-      await elementUpdated(el);
-    });
-    afterEach(async () => {
-      if (el.open) {
-        const closed = oneEvent(el, "sp-closed");
-        el.open = false;
-        await closed;
-      }
-    });
-    it("loads accessibly w/ slotted label", async () => {
-      await expect(el).to.be.accessible();
-    });
-  });
-  describe("deprecated", () => {
-    const pickerFixture2 = async () => {
-      const test = await fixture(html`
+                `)).querySelector("sp-picker");beforeEach(async()=>{e=await a(),await s(e)}),afterEach(async()=>{if(e.open){const o=i(e,"sp-closed");e.open=!1,await o}}),it("loads accessibly w/ slotted label",async()=>{await t(e).to.be.accessible()})}),describe("deprecated",()=>{const a=async()=>(await w(b`
                     <div>
                         <sp-field-label for="picker-deprecated">
                             Where do you live?
@@ -780,121 +85,9 @@ export function runPickerTests() {
                             </sp-menu>
                         </sp-picker>
                     </div>
-                `);
-      return test.querySelector("sp-picker");
-    };
-    describe("Dev mode", () => {
-      it("warns in Dev Mode of deprecated `<sp-menu>` usage", async () => {
-        const consoleWarnStub = stub(console, "warn");
-        el = await pickerFixture2();
-        await elementUpdated(el);
-        expect(consoleWarnStub.called).to.be.true;
-        const spyCall = consoleWarnStub.getCall(0);
-        expect(spyCall.args.at(0).includes("<sp-menu>"), "confirm <sp-menu>-centric message").to.be.true;
-        expect(spyCall.args.at(-1), "confirm `data` shape").to.deep.equal({
-          data: {
-            localName: "sp-picker",
-            type: "api",
-            level: "deprecation"
-          }
-        });
-        consoleWarnStub.restore();
-        if (el.open) {
-          const closed = oneEvent(el, "sp-closed");
-          el.open = false;
-          await closed;
-        }
-      });
-    });
-    describe("Dev mode ignored", () => {
-      const { ignoreWarningLocalNames } = window.__swc;
-      before(() => {
-        window.__swc.ignoreWarningLocalNames = {
-          "sp-picker": true
-        };
-      });
-      before(() => {
-        window.__swc.ignoreWarningLocalNames = ignoreWarningLocalNames;
-      });
-      beforeEach(async () => {
-        el = await pickerFixture2();
-        await elementUpdated(el);
-      });
-      afterEach(async () => {
-        if (el.open) {
-          const closed = oneEvent(el, "sp-closed");
-          el.open = false;
-          await closed;
-        }
-      });
-      it("selects with deprecated syntax", async () => {
-        var _a, _b;
-        const secondItem = el.querySelector("sp-menu-item:nth-of-type(2)");
-        const opened = oneEvent(el, "sp-opened");
-        el.button.click();
-        await opened;
-        await elementUpdated(el);
-        expect(el.open).to.be.true;
-        expect((_a = el.selectedItem) == null ? void 0 : _a.itemText).to.be.undefined;
-        expect(el.value).to.equal("");
-        const closed = oneEvent(el, "sp-closed");
-        secondItem.click();
-        await closed;
-        expect(el.open).to.be.false;
-        expect((_b = el.selectedItem) == null ? void 0 : _b.itemText).to.equal("Select Inverse");
-        expect(el.value).to.equal("option-2");
-      });
-    });
-  });
-  testForLitDevWarnings(async () => await pickerFixture());
-  it('manages its "name" value in the accessibility tree when [icons-only]', async () => {
-    const test = await fixture(html`
-            <div>${iconsOnly({})}</div>
-        `);
-    const el2 = test.querySelector("sp-picker");
-    await elementUpdated(el2);
-    let snapshot = await a11ySnapshot({});
-    expect(findAccessibilityNode(snapshot, (node) => node.name === "Choose an action type... Delete"), "`name` is the label text").to.not.be.null;
-    el2.value = "2";
-    await elementUpdated(el2);
-    snapshot = await a11ySnapshot({});
-    expect(findAccessibilityNode(snapshot, (node) => node.name === "Choose an action type... Copy"), "`name` is the label text plus the selected item text").to.not.be.null;
-  });
-  it("toggles between pickers", async () => {
-    const el2 = await pickerFixture();
-    const el1 = await pickerFixture();
-    el1.id = "away";
-    el2.id = "other";
-    await Promise.all([elementUpdated(el1), elementUpdated(el2)]);
-    expect(el1.open, "closed 1").to.be.false;
-    expect(el2.open, "closed 1").to.be.false;
-    let open = oneEvent(el1, "sp-opened");
-    el1.click();
-    await open;
-    expect(el1.open).to.be.true;
-    expect(el2.open).to.be.false;
-    open = oneEvent(el2, "sp-opened");
-    let closed = oneEvent(el1, "sp-closed");
-    el2.click();
-    await Promise.all([open, closed]);
-    expect(el1.open).to.be.false;
-    expect(el2.open).to.be.true;
-    open = oneEvent(el1, "sp-opened");
-    closed = oneEvent(el2, "sp-closed");
-    el1.click();
-    await Promise.all([open, closed]);
-    expect(el1.open).to.be.true;
-    expect(el2.open).to.be.false;
-    closed = oneEvent(el1, "sp-closed");
-    sendKeys({
-      press: "Escape"
-    });
-    await closed;
-    expect(el1.open).to.be.false;
-  });
-  it("displays selected item text by default", async () => {
-    var _a, _b, _c, _d;
-    const el2 = await fixture(html`
+                `)).querySelector("sp-picker");describe("Dev mode",()=>{it("warns in Dev Mode of deprecated `<sp-menu>` usage",async()=>{const o=x(console,"warn");e=await a(),await s(e),t(o.called).to.be.true;const n=o.getCall(0);if(t(n.args.at(0).includes("<sp-menu>"),"confirm <sp-menu>-centric message").to.be.true,t(n.args.at(-1),"confirm `data` shape").to.deep.equal({data:{localName:"sp-picker",type:"api",level:"deprecation"}}),o.restore(),e.open){const c=i(e,"sp-closed");e.open=!1,await c}})}),describe("Dev mode ignored",()=>{const{ignoreWarningLocalNames:o}=window.__swc;before(()=>{window.__swc.ignoreWarningLocalNames={"sp-picker":!0}}),before(()=>{window.__swc.ignoreWarningLocalNames=o}),beforeEach(async()=>{e=await a(),await s(e)}),afterEach(async()=>{if(e.open){const n=i(e,"sp-closed");e.open=!1,await n}}),it("selects with deprecated syntax",async()=>{var p,m;const n=e.querySelector("sp-menu-item:nth-of-type(2)"),c=i(e,"sp-opened");e.button.click(),await c,await s(e),t(e.open).to.be.true,t((p=e.selectedItem)==null?void 0:p.itemText).to.be.undefined,t(e.value).to.equal("");const l=i(e,"sp-closed");n.click(),await l,t(e.open).to.be.false,t((m=e.selectedItem)==null?void 0:m.itemText).to.equal("Select Inverse"),t(e.value).to.equal("option-2")})})}),P(async()=>await S()),it('manages its "name" value in the accessibility tree when [icons-only]',async()=>{const o=(await w(b`
+            <div>${L({})}</div>
+        `)).querySelector("sp-picker");await s(o);let n=await q({});t(g(n,c=>c.name==="Choose an action type... Delete"),"`name` is the label text").to.not.be.null,o.value="2",await s(o),n=await q({}),t(g(n,c=>c.name==="Choose an action type... Copy"),"`name` is the label text plus the selected item text").to.not.be.null}),it("toggles between pickers",async()=>{const a=await S(),o=await S();o.id="away",a.id="other",await Promise.all([s(o),s(a)]),t(o.open,"closed 1").to.be.false,t(a.open,"closed 1").to.be.false;let n=i(o,"sp-opened");o.click(),await n,t(o.open).to.be.true,t(a.open).to.be.false,n=i(a,"sp-opened");let c=i(o,"sp-closed");a.click(),await Promise.all([n,c]),t(o.open).to.be.false,t(a.open).to.be.true,n=i(o,"sp-opened"),c=i(a,"sp-closed"),o.click(),await Promise.all([n,c]),t(o.open).to.be.true,t(a.open).to.be.false,c=i(o,"sp-closed"),u({press:"Escape"}),await c,t(o.open).to.be.false}),it("displays selected item text by default",async()=>{var l,p,m,f;const a=await w(b`
                 <sp-picker
                     value="inverse"
                     label="Select a Country with a very long label, too long in fact"
@@ -907,31 +100,7 @@ export function runPickerTests() {
                     <sp-menu-item>Save Selection</sp-menu-item>
                     <sp-menu-item disabled>Make Work Path</sp-menu-item>
                 </sp-picker>
-            `);
-    await elementUpdated(el2);
-    await waitUntil(() => {
-      var _a2;
-      return ((_a2 = el2.selectedItem) == null ? void 0 : _a2.itemText) === "Select Inverse";
-    }, `Selected Item Text: ${(_a = el2.selectedItem) == null ? void 0 : _a.itemText}`);
-    const firstItem = el2.querySelector("sp-menu-item:nth-of-type(1)");
-    const secondItem = el2.querySelector("sp-menu-item:nth-of-type(2)");
-    expect(el2.value).to.equal("inverse");
-    expect((_b = el2.selectedItem) == null ? void 0 : _b.itemText).to.equal("Select Inverse");
-    el2.focus();
-    await elementUpdated(el2);
-    expect(el2 === document.activeElement, `activeElement is ${(_c = document.activeElement) == null ? void 0 : _c.localName}`).to.be.true;
-    const opened = oneEvent(el2, "sp-opened");
-    sendKeys({ press: "Enter" });
-    await opened;
-    await elementUpdated(el2.optionsMenu);
-    expect(el2.optionsMenu === document.activeElement, `activeElement is ${(_d = document.activeElement) == null ? void 0 : _d.localName}`).to.be.true;
-    expect(firstItem.focused, 'firstItem NOT "focused"').to.be.false;
-    expect(secondItem.focused, 'secondItem "focused"').to.be.true;
-    expect(el2.optionsMenu.getAttribute("aria-activedescendant")).to.equal(secondItem.id);
-  });
-  it("resets value when item not available", async () => {
-    var _a;
-    const el2 = await fixture(html`
+            `);await s(a),await r(()=>{var y;return((y=a.selectedItem)==null?void 0:y.itemText)==="Select Inverse"},`Selected Item Text: ${(l=a.selectedItem)==null?void 0:l.itemText}`);const o=a.querySelector("sp-menu-item:nth-of-type(1)"),n=a.querySelector("sp-menu-item:nth-of-type(2)");t(a.value).to.equal("inverse"),t((p=a.selectedItem)==null?void 0:p.itemText).to.equal("Select Inverse"),a.focus(),await s(a),t(a===document.activeElement,`activeElement is ${(m=document.activeElement)==null?void 0:m.localName}`).to.be.true;const c=i(a,"sp-opened");u({press:"Enter"}),await c,await s(a.optionsMenu),t(a.optionsMenu===document.activeElement,`activeElement is ${(f=document.activeElement)==null?void 0:f.localName}`).to.be.true,t(o.focused,'firstItem NOT "focused"').to.be.false,t(n.focused,'secondItem "focused"').to.be.true,t(a.optionsMenu.getAttribute("aria-activedescendant")).to.equal(n.id)}),it("resets value when item not available",async()=>{var o;const a=await w(b`
                 <sp-picker
                     value="missing"
                     label="Select a Country with a very long label, too long in fact"
@@ -944,74 +113,24 @@ export function runPickerTests() {
                     <sp-menu-item>Save Selection</sp-menu-item>
                     <sp-menu-item disabled>Make Work Path</sp-menu-item>
                 </sp-picker>
-            `);
-    await elementUpdated(el2);
-    await waitUntil(() => el2.value === "");
-    expect(el2.value).to.equal("");
-    expect((_a = el2.selectedItem) == null ? void 0 : _a.itemText).to.be.undefined;
-  });
-  it("allows event listeners on child items", async () => {
-    const mouseenterSpy = spy();
-    const handleMouseenter = () => mouseenterSpy();
-    const el2 = await fixture(html`
+            `);await s(a),await r(()=>a.value===""),t(a.value).to.equal(""),t((o=a.selectedItem)==null?void 0:o.itemText).to.be.undefined}),it("allows event listeners on child items",async()=>{const a=h(),n=await w(b`
                 <sp-picker
                     label="Select a Country with a very long label, too long in fact"
                 >
                     <sp-menu-item
                         value="deselect"
-                        @mouseenter=${handleMouseenter}
+                        @mouseenter=${()=>a()}
                     >
                         Deselect Text
                     </sp-menu-item>
                 </sp-picker>
-            `);
-    await elementUpdated(el2);
-    const hoverEl = el2.querySelector("sp-menu-item");
-    const opened = oneEvent(el2, "sp-opened");
-    el2.open = true;
-    await opened;
-    await elementUpdated(el2);
-    expect(el2.open).to.be.true;
-    hoverEl.dispatchEvent(new MouseEvent("mouseenter"));
-    await elementUpdated(el2);
-    expect(el2.open).to.be.true;
-    const closed = oneEvent(el2, "sp-closed");
-    el2.open = false;
-    await closed;
-    await elementUpdated(el2);
-    expect(el2.open).to.be.false;
-    expect(mouseenterSpy.calledOnce).to.be.true;
-  });
-  it("dispatches events on open/close", async () => {
-    const openedSpy = spy();
-    const closedSpy = spy();
-    const handleOpenedSpy = (event) => openedSpy(event);
-    const handleClosedSpy = (event) => closedSpy(event);
-    const el2 = await fixture(html`
+            `);await s(n);const c=n.querySelector("sp-menu-item"),l=i(n,"sp-opened");n.open=!0,await l,await s(n),t(n.open).to.be.true,c.dispatchEvent(new MouseEvent("mouseenter")),await s(n),t(n.open).to.be.true;const p=i(n,"sp-closed");n.open=!1,await p,await s(n),t(n.open).to.be.false,t(a.calledOnce).to.be.true}),it("dispatches events on open/close",async()=>{const a=h(),o=h(),l=await w(b`
                 <sp-picker
                     label="Select a Country with a very long label, too long in fact"
-                    @sp-opened=${handleOpenedSpy}
-                    @sp-closed=${handleClosedSpy}
+                    @sp-opened=${E=>a(E)}
+                    @sp-closed=${E=>o(E)}
                 >
                     <sp-menu-item value="deselect">Deselect Text</sp-menu-item>
                 </sp-picker>
-            `);
-    await elementUpdated(el2);
-    const opened = oneEvent(el2, "sp-opened");
-    el2.open = true;
-    await opened;
-    await elementUpdated(el2);
-    expect(openedSpy.calledOnce).to.be.true;
-    expect(closedSpy.calledOnce).to.be.false;
-    const openedEvent = openedSpy.args[0][0];
-    expect(openedEvent.detail.interaction).to.equal("modal");
-    const closed = oneEvent(el2, "sp-closed");
-    el2.open = false;
-    await closed;
-    await elementUpdated(el2);
-    expect(closedSpy.calledOnce).to.be.true;
-    const closedEvent = closedSpy.args[0][0];
-    expect(closedEvent.detail.interaction).to.equal("modal");
-  });
-}
+            `);await s(l);const p=i(l,"sp-opened");l.open=!0,await p,await s(l),t(a.calledOnce).to.be.true,t(o.calledOnce).to.be.false;const m=a.args[0][0];t(m.detail.interaction).to.equal("modal");const f=i(l,"sp-closed");l.open=!1,await f,await s(l),t(o.calledOnce).to.be.true;const y=o.args[0][0];t(y.detail.interaction).to.equal("modal")})}
 //# sourceMappingURL=index.js.map