@spectrum-web-components/picker 1.0.2 → 1.0.3

package/test/index.js

@@ -0,0 +1,1680 @@
+"use strict";
+import {
+  aTimeout,
+  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,
+  arrowRightEvent,
+  arrowUpEvent,
+  testForLitDevWarnings,
+  tEvent
+} from "../../../test/testing-helpers.js";
+import {
+  a11ySnapshot,
+  findAccessibilityNode,
+  sendKeys,
+  setViewport
+} from "@web/test-runner-commands";
+import {
+  Default,
+  disabled,
+  iconsOnly,
+  noVisibleLabel,
+  slottedLabel,
+  tooltip
+} from "../stories/picker.stories.js";
+import { M as pending } from "../stories/picker-pending.stories.js";
+import { sendMouse } from "../../../test/plugins/browser.js";
+import {
+  ignoreResizeObserverLoopError,
+  fixture as styledFixture
+} from "../../../test/testing-helpers.js";
+import "@spectrum-web-components/picker/sp-picker.js";
+import "@spectrum-web-components/field-label/sp-field-label.js";
+import "@spectrum-web-components/menu/sp-menu.js";
+import "@spectrum-web-components/menu/sp-menu-group.js";
+import "@spectrum-web-components/menu/sp-menu-item.js";
+import "@spectrum-web-components/theme/src/themes.js";
+import { isWebKit } from "@spectrum-web-components/shared";
+import { SAFARI_FOCUS_RING_CLASS } from "@spectrum-web-components/picker/src/MobileController.js";
+ignoreResizeObserverLoopError(before, after);
+const isMenuActiveElement = function(el) {
+  var _a;
+  return ((_a = el.shadowRoot.activeElement) == null ? void 0 : _a.localName) === "sp-menu";
+};
+export function runPickerTests() {
+  let el;
+  const pickerFixture = async () => {
+    const test = await fixture(html`
+            <sp-theme scale="medium" color="light" system="spectrum">
+                <sp-field-label for="picker">Where do you live?</sp-field-label>
+                <sp-picker
+                    id="picker"
+                    style="width: 200px; --spectrum-alias-ui-icon-chevron-size-100: 10px;"
+                >
+                    <sp-menu-item>Deselect</sp-menu-item>
+                    <sp-menu-item value="option-2">Select Inverse</sp-menu-item>
+                    <sp-menu-item>Feather...</sp-menu-item>
+                    <sp-menu-item>Select and Mask...</sp-menu-item>
+                    <sp-menu-item>Save Selection</sp-menu-item>
+                    <sp-menu-item disabled>Make Work Path</sp-menu-item>
+                </sp-picker>
+            </sp-theme>
+        `);
+    return test.querySelector("sp-picker");
+  };
+  describe("accessibility model", () => {
+    it('accessible with "<sp-field-label>"', async function() {
+      const test = await fixture(html`
+                <div>
+                    ${Default({
+        onChange: () => {
+          return;
+        }
+      })}
+                </div>
+            `);
+      const el2 = test.querySelector("sp-picker");
+      let snapshot = await a11ySnapshot({});
+      expect(
+        findAccessibilityNode(
+          snapshot,
+          (node) => node.name === "Select a Country with a very long label, too long, in fact Where do you live?"
+        ),
+        "`name` is the label text"
+      ).to.not.be.null;
+      el2.value = "option-2";
+      await elementUpdated(el2);
+      await nextFrame();
+      await nextFrame();
+      snapshot = await a11ySnapshot({});
+      expect(
+        findAccessibilityNode(
+          snapshot,
+          (node) => node.name === "Select Inverse Where do you live?"
+        ),
+        "`name` is the the selected item text plus the label text"
+      ).to.not.be.null;
+    });
+    it('accessible with "label" attribute', async () => {
+      const test = await fixture(html`
+                <div>
+                    ${noVisibleLabel({
+        onChange: () => {
+          return;
+        }
+      })}
+                </div>
+            `);
+      const el2 = test.querySelector("sp-picker");
+      let snapshot = await a11ySnapshot({});
+      expect(
+        findAccessibilityNode(
+          snapshot,
+          (node) => node.name === "Where do you live?"
+        ),
+        "`name` is the label text"
+      ).to.not.be.null;
+      el2.value = "option-2";
+      await elementUpdated(el2);
+      await nextFrame();
+      await nextFrame();
+      snapshot = await a11ySnapshot({});
+      expect(
+        findAccessibilityNode(
+          snapshot,
+          (node) => node.name === "Select Inverse Where do you live?"
+        ),
+        "`name` is the the selected item text plus the label text"
+      ).to.not.be.null;
+    });
+    it('accessible with "label" slot', async function() {
+      const test = await fixture(html`
+                <div>
+                    ${slottedLabel({
+        onChange: () => {
+          return;
+        }
+      })}
+                </div>
+            `);
+      const el2 = test.querySelector("sp-picker");
+      await elementUpdated(el2);
+      await nextFrame();
+      await nextFrame();
+      let snapshot = await a11ySnapshot({});
+      let name = "Where do you live?";
+      let node = findAccessibilityNode(
+        snapshot,
+        (node2) => node2.name === name
+      );
+      expect(
+        node,
+        `node not available: ${JSON.stringify(snapshot, null, "  ")}`
+      ).to.not.be.null;
+      el2.value = "option-2";
+      await elementUpdated(el2);
+      await nextFrame();
+      await nextFrame();
+      snapshot = await a11ySnapshot({});
+      name = "Select Inverse Where do you live?";
+      node = findAccessibilityNode(
+        snapshot,
+        (node2) => node2.name === name
+      );
+      expect(
+        node,
+        `node not available: ${JSON.stringify(snapshot, null, "  ")}`
+      ).to.not.be.null;
+    });
+  });
+  describe("standard", () => {
+    beforeEach(async () => {
+      el = await pickerFixture();
+      await elementUpdated(el);
+      await nextFrame();
+      await nextFrame();
+    });
+    it("loads accessibly", async () => {
+      await expect(el).to.be.accessible();
+    });
+    it("closes accessibly", async () => {
+      el.focus();
+      await elementUpdated(el);
+      expect(el.shadowRoot.activeElement).to.equal(el.button);
+      const opened = oneEvent(el, "sp-opened");
+      el.open = true;
+      await opened;
+      expect(el.open).to.be.true;
+      const accessibleCloseButton = el.shadowRoot.querySelector(
+        ".visually-hidden button"
+      );
+      expect(accessibleCloseButton).to.have.attribute(
+        "aria-label",
+        "Dismiss"
+      );
+      const closed = oneEvent(el, "sp-closed");
+      accessibleCloseButton.click();
+      await closed;
+      await elementUpdated(el);
+      expect(el.open).to.be.false;
+      expect(el.shadowRoot.activeElement).to.equal(el.button);
+      expect(document.activeElement).to.eq(el);
+    });
+    it("accepts new selected item content", async () => {
+      await nextFrame();
+      await nextFrame();
+      const option2 = el.querySelector('[value="option-2"');
+      el.value = "option-2";
+      await elementUpdated(option2);
+      await elementUpdated(el);
+      await aTimeout(150);
+      expect(el.value).to.equal("option-2");
+      expect((el.button.textContent || "").trim()).to.include(
+        "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.include(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.include(newLabel2);
+    });
+    it("accepts new selected item content when open", async () => {
+      await nextFrame();
+      const option2 = el.querySelector('[value="option-2"');
+      el.value = "option-2";
+      await elementUpdated(el);
+      await aTimeout(150);
+      expect(el.value).to.equal("option-2");
+      expect((el.button.textContent || "").trim()).to.include(
+        "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);
+      await aTimeout(150);
+      expect(el.value).to.equal("option-2");
+      expect((el.button.textContent || "").trim()).to.include(
+        "Invert Selection"
+      );
+    });
+    it("unsets value when children removed", async () => {
+      await nextFrame();
+      el.value = "option-2";
+      await elementUpdated(el);
+      await aTimeout(150);
+      expect(el.value).to.equal("option-2");
+      expect((el.button.textContent || "").trim()).to.include(
+        "Select Inverse"
+      );
+      const items = el.querySelectorAll("sp-menu-item");
+      items.forEach((item) => {
+        item.remove();
+      });
+      await elementUpdated(el);
+      await nextFrame();
+      await aTimeout(150);
+      expect(
+        el.optionsMenu.childItems.length
+      ).to.equal(0);
+      if ("showPopover" in document.createElement("div")) {
+        return;
+      }
+      expect(el.value).to.equal("");
+      expect((el.button.textContent || "").trim()).to.not.include(
+        "Select Inverse"
+      );
+    });
+    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 nextFrame();
+      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 () => {
+      await nextFrame();
+      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);
+      await nextFrame();
+      await nextFrame();
+      snapshot = await a11ySnapshot({});
+      expect(
+        findAccessibilityNode(
+          snapshot,
+          (node) => node.name === "Select Inverse Where do you live?"
+        ),
+        "`name` is the selected item text plus the label 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 () => {
+      var _a, _b;
+      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;
+      expect(
+        document.activeElement === el,
+        `focused ${(_a = document.activeElement) == null ? void 0 : _a.localName} instead of back on Picker`
+      ).to.be.true;
+      expect(
+        el.shadowRoot.activeElement === el.button,
+        `focused ${(_b = el.shadowRoot.activeElement) == null ? void 0 : _b.localName} instead of back on button`
+      ).to.be.true;
+      await waitUntil(
+        () => !firstItem.focused,
+        "finally, not visually focused"
+      );
+    });
+    it("opens with visible focus on a menu item on `Space`", async function() {
+      var _a, _b;
+      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: "Space" });
+      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;
+      expect(
+        document.activeElement === el,
+        `focused ${(_a = document.activeElement) == null ? void 0 : _a.localName} instead of back on Picker`
+      ).to.be.true;
+      expect(
+        el.shadowRoot.activeElement === el.button,
+        `focused ${(_b = el.shadowRoot.activeElement) == null ? void 0 : _b.localName} instead of back on button`
+      ).to.be.true;
+      await waitUntil(
+        () => !firstItem.focused,
+        "finally, not visually focused"
+      );
+    });
+    it("opens, on click, without visible focus on a menu item", async () => {
+      await nextFrame();
+      await nextFrame();
+      const firstItem = el.querySelector("sp-menu-item");
+      const boundingRect = el.button.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;
+      expect(el.open).to.be.true;
+      expect(firstItem.focused, "still not visually focused").to.be.false;
+    });
+    it("opens and selects in a single pointer button interaction", async () => {
+      await nextFrame();
+      await nextFrame();
+      const thirdItem = el.querySelector(
+        "sp-menu-item:nth-of-type(3)"
+      );
+      const boundingRect = el.button.getBoundingClientRect();
+      expect(el.value).to.not.equal(thirdItem.value);
+      const opened = oneEvent(el, "sp-opened");
+      await sendMouse({
+        steps: [
+          {
+            type: "move",
+            position: [
+              boundingRect.x + boundingRect.width / 2,
+              boundingRect.y + boundingRect.height / 2
+            ]
+          },
+          {
+            type: "down"
+          }
+        ]
+      });
+      await opened;
+      const thirdItemRect = thirdItem.getBoundingClientRect();
+      const closed = oneEvent(el, "sp-closed");
+      await sendMouse({
+        steps: [
+          {
+            type: "move",
+            position: [
+              thirdItemRect.x + thirdItemRect.width / 2,
+              thirdItemRect.y + thirdItemRect.height / 2
+            ]
+          },
+          {
+            type: "up"
+          }
+        ]
+      });
+      await closed;
+      expect(el.open).to.be.false;
+      expect(el.value).to.equal(thirdItem.value);
+    });
+    it("opens/closes multiple times", async () => {
+      await nextFrame();
+      await nextFrame();
+      expect(el.open).to.be.false;
+      const boundingRect = el.button.getBoundingClientRect();
+      let opened = oneEvent(el, "sp-opened");
+      sendMouse({
+        steps: [
+          {
+            type: "click",
+            position: [
+              boundingRect.x + boundingRect.width / 2,
+              boundingRect.y + boundingRect.height / 2
+            ]
+          }
+        ]
+      });
+      await opened;
+      expect(el.open).to.be.true;
+      let closed = oneEvent(el, "sp-closed");
+      sendMouse({
+        steps: [
+          {
+            type: "click",
+            position: [
+              boundingRect.x + boundingRect.width / 2,
+              boundingRect.y + boundingRect.height / 2
+            ]
+          }
+        ]
+      });
+      await closed;
+      expect(el.open).to.be.false;
+      opened = oneEvent(el, "sp-opened");
+      sendMouse({
+        steps: [
+          {
+            type: "click",
+            position: [
+              boundingRect.x + boundingRect.width / 2,
+              boundingRect.y + boundingRect.height / 2
+            ]
+          }
+        ]
+      });
+      await opened;
+      expect(el.open).to.be.true;
+      closed = oneEvent(el, "sp-closed");
+      sendMouse({
+        steps: [
+          {
+            type: "click",
+            position: [
+              boundingRect.x + boundingRect.width / 2,
+              boundingRect.y + boundingRect.height / 2
+            ]
+          }
+        ]
+      });
+      await closed;
+      expect(el.open).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;
+      const opened = oneEvent(el, "sp-opened");
+      el.click();
+      await opened;
+      await elementUpdated(el);
+      expect(el.open).to.be.true;
+      const closed = oneEvent(el, "sp-closed");
+      other.click();
+      closed;
+      await elementUpdated(el);
+      other.remove();
+    });
+    it("selects", async () => {
+      var _a, _b;
+      const secondItem = el.querySelector(
+        "sp-menu-item:nth-of-type(2)"
+      );
+      const opened = oneEvent(el, "sp-opened");
+      el.click();
+      await opened;
+      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)"
+      );
+      let opened = oneEvent(el, "sp-opened");
+      el.click();
+      await opened;
+      expect(el.open).to.be.true;
+      expect((_a = el.selectedItem) == null ? void 0 : _a.itemText).to.be.undefined;
+      expect(el.value).to.equal("");
+      let 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");
+      opened = oneEvent(el, "sp-opened");
+      el.click();
+      await opened;
+      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");
+      closed = oneEvent(el, "sp-closed");
+      firstItem.click();
+      await closed;
+      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.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;
+      const closed = oneEvent(el, "sp-closed");
+      secondItem.click();
+      await closed;
+      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 opened = oneEvent(el, "sp-opened");
+      el.click();
+      await opened;
+      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 changed = oneEvent(el, "change");
+      secondItem.click();
+      await changed;
+      expect(
+        preventChangeSpy.calledOnce,
+        preventChangeSpy.callCount.toString()
+      ).to.be.true;
+      expect(secondItem.selected, "selection prevented").to.be.false;
+      expect(el.open).to.be.true;
+    });
+    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 opened = oneEvent(el, "sp-opened");
+      el.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;
+      const opened = oneEvent(el, "sp-opened");
+      button.dispatchEvent(arrowUpEvent());
+      await elementUpdated(el);
+      expect(el.open, "open by ArrowUp").to.be.true;
+      await opened;
+      const closed = oneEvent(el, "sp-closed");
+      sendKeys({
+        press: "Escape"
+      });
+      await closed;
+      expect(el.open).to.be.false;
+    });
+    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;
+      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;
+      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);
+      });
+      el.focus();
+      await elementUpdated(el);
+      await waitUntil(
+        () => el.menuItems.length === 6
+      );
+      await sendKeys({
+        press: "ArrowLeft"
+      });
+      await elementUpdated(el);
+      expect(selectionSpy.callCount).to.equal(1);
+      expect(selectionSpy.calledWith("Deselected"));
+      await sendKeys({
+        press: "ArrowLeft"
+      });
+      await elementUpdated(el);
+      expect(selectionSpy.callCount).to.equal(1);
+      await sendKeys({
+        press: "ArrowRight"
+      });
+      await nextFrame();
+      await nextFrame();
+      expect(selectionSpy.calledWith("option-2"));
+      await sendKeys({
+        press: "ArrowRight"
+      });
+      await nextFrame();
+      await nextFrame();
+      await sendKeys({
+        press: "ArrowRight"
+      });
+      await nextFrame();
+      await nextFrame();
+      await sendKeys({
+        press: "ArrowRight"
+      });
+      await nextFrame();
+      await nextFrame();
+      await sendKeys({
+        press: "ArrowRight"
+      });
+      await nextFrame();
+      await nextFrame();
+      expect(selectionSpy.calledWith("Save Selection"));
+      expect(selectionSpy.calledWith("Make Work Path")).to.be.false;
+      expect(selectionSpy.callCount).to.equal(5);
+    });
+    it("quick selects first item on ArrowRight when no value", async () => {
+      await nextFrame();
+      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("closes when focusing away from the menu", async () => {
+      const firstItem = el.querySelector("sp-menu-item");
+      const thirdItem = el.querySelector(
+        "sp-menu-item:nth-of-type(3)"
+      );
+      const button = el.button;
+      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;
+      const opened = oneEvent(el, "sp-opened");
+      sendKeys({ press: "Enter" });
+      await opened;
+      await elementUpdated(el);
+      await waitUntil(
+        () => firstItem.focused,
+        "The first items should have become focused visually."
+      );
+      await sendKeys({ press: "ArrowDown" });
+      await sendKeys({ press: "ArrowDown" });
+      expect(thirdItem.focused).to.be.true;
+      const closed = oneEvent(el, "sp-closed");
+      button.focus();
+      await closed;
+      expect(isMenuActiveElement(el)).to.be.false;
+      expect(el.open).to.be.false;
+    });
+    it("does not listen to streaming `Enter` keydown", async () => {
+      const openSpy = spy();
+      const closedSpy = spy();
+      el.addEventListener("sp-opened", () => openSpy());
+      el.addEventListener("sp-closed", () => closedSpy());
+      const firstItem = el.querySelector("sp-menu-item");
+      const thirdItem = el.querySelector(
+        "sp-menu-item:nth-of-type(3)"
+      );
+      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;
+      const opened = oneEvent(el, "sp-opened");
+      sendKeys({ down: "Enter" });
+      await opened;
+      await aTimeout(300);
+      expect(openSpy.callCount).to.equal(1);
+      await sendKeys({ up: "Enter" });
+      await waitUntil(
+        () => firstItem.focused,
+        "The first items should have become focused visually."
+      );
+      await sendKeys({ press: "ArrowDown" });
+      await sendKeys({ press: "ArrowDown" });
+      expect(thirdItem.focused).to.be.true;
+      const closed = oneEvent(el, "sp-closed");
+      sendKeys({ down: "Enter" });
+      await closed;
+      await aTimeout(300);
+      expect(el.value).to.equal(thirdItem.value);
+      expect(openSpy.callCount).to.equal(1);
+      expect(closedSpy.callCount).to.equal(1);
+      await sendKeys({ up: "Enter" });
+    });
+    it("allows tabing to close", async () => {
+      const input = document.createElement("input");
+      el.insertAdjacentElement("afterend", input);
+      const opened = oneEvent(el, "sp-opened");
+      el.open = true;
+      await opened;
+      await nextFrame();
+      expect(el.open).to.be.true;
+      el.focus();
+      const closed = oneEvent(el, "sp-closed");
+      sendKeys({ press: "Tab" });
+      await closed;
+      expect(el.open, "closes").to.be.false;
+    });
+    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("can close and immediately 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(el),
+          "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 === el, "focuses el").to.be.true;
+        const opened = oneEvent(el, "sp-opened");
+        await sendKeys({ press: "ArrowUp" });
+        await opened;
+        expect(el.open, "opened").to.be.true;
+        await waitUntil(
+          () => isMenuActiveElement(el),
+          "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");
+        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);
+      el.click();
+      await elementUpdated(el);
+      expect(el.open).to.be.false;
+    });
+    it("scrolls selected into view on open", async () => {
+      const styles = document.createElement("style");
+      styles.innerText = "sp-popover { height: 40px; }";
+      el.shadowRoot.append(styles);
+      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);
+      const opened = oneEvent(el, "sp-opened");
+      el.open = true;
+      await opened;
+      await waitUntil(
+        () => isMenuActiveElement(el),
+        "first item focused"
+      );
+      const getParentOffset = (el2) => {
+        const parentScroll = el2.assignedSlot.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 })
+      );
+      await sendKeys({
+        press: "ArrowDown"
+      });
+      await elementUpdated(el);
+      await nextFrame();
+      expect(getParentOffset(lastItem)).to.be.greaterThan(40);
+      expect(getParentOffset(firstItem)).to.be.greaterThan(-1);
+    });
+    it("manages focus-ring styles", async () => {
+      if (!isWebKit()) {
+        return;
+      }
+      el.isMobile.matches = true;
+      el.bindEvents();
+      await setViewport({ width: 360, height: 640 });
+      await nextFrame();
+      let opened = oneEvent(el, "sp-opened");
+      const boundingRect = el.button.getBoundingClientRect();
+      sendMouse({
+        steps: [
+          {
+            type: "click",
+            position: [
+              boundingRect.x + boundingRect.width / 2,
+              boundingRect.y + boundingRect.height / 2
+            ]
+          }
+        ]
+      });
+      await opened;
+      const tray = el.shadowRoot.querySelector("sp-tray");
+      expect(tray).to.not.be.null;
+      let closed = oneEvent(el, "sp-closed");
+      const firstItem = el.querySelector("sp-menu-item");
+      firstItem.click();
+      await elementUpdated(el);
+      await closed;
+      expect(el.open).to.be.false;
+      const button = el.shadowRoot.querySelector(
+        "#button"
+      );
+      expect(button).to.not.be.null;
+      expect(button.classList.contains(SAFARI_FOCUS_RING_CLASS)).to.be.true;
+      expect(document.activeElement === el).to.be.true;
+      await sendMouse({
+        steps: [
+          {
+            type: "click",
+            position: [0, 0]
+          }
+        ]
+      });
+      expect(document.activeElement === el).to.be.false;
+      opened = oneEvent(el, "sp-opened");
+      await sendKeys({
+        press: "Tab"
+      });
+      await sendKeys({
+        press: "Enter"
+      });
+      await elementUpdated(el);
+      await opened;
+      closed = oneEvent(el, "sp-closed");
+      firstItem.click();
+      await elementUpdated(el);
+      await closed;
+      expect(el.open).to.be.false;
+      expect(button.classList.contains(SAFARI_FOCUS_RING_CLASS)).to.be.false;
+    });
+  });
+  describe("grouped", async () => {
+    const groupedFixture = async () => {
+      return fixture(html`
+                <sp-picker
+                    quiet
+                    label="I would like to use Spectrum Web Components"
+                    value="0"
+                >
+                    <sp-menu-group>
+                        <span slot="header">Timeline</span>
+                        <sp-menu-item value="0" id="should-be-selected">
+                            Immediately
+                        </sp-menu-item>
+                        <sp-menu-item value="1">
+                            I'm already using them
+                        </sp-menu-item>
+                        <sp-menu-item value="2">Soon</sp-menu-item>
+                        <sp-menu-item value="3">
+                            As part of my next project
+                        </sp-menu-item>
+                        <sp-menu-item value="4">In the future</sp-menu-item>
+                    </sp-menu-group>
+                </sp-picker>
+            `);
+    };
+    beforeEach(async () => {
+      el = await groupedFixture();
+      await elementUpdated(el);
+      await nextFrame();
+      await nextFrame();
+    });
+    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`
+                <div>
+                    <sp-field-label for="picker-slotted">
+                        Where do you live?
+                    </sp-field-label>
+                    <sp-picker id="picker-slotted">
+                        <span slot="label">
+                            Select a Country with a very long label, too long in
+                            fact
+                        </span>
+                        <sp-menu-item>Deselect</sp-menu-item>
+                        <sp-menu-item value="option-2">
+                            Select Inverse
+                        </sp-menu-item>
+                        <sp-menu-item>Feather...</sp-menu-item>
+                        <sp-menu-item>Select and Mask...</sp-menu-item>
+                        <sp-menu-item>Save Selection</sp-menu-item>
+                        <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);
+      await nextFrame();
+    });
+    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("Dev mode", () => {
+    let consoleWarnStub;
+    before(() => {
+      window.__swc.verbose = true;
+      consoleWarnStub = stub(console, "warn");
+    });
+    afterEach(() => {
+      consoleWarnStub.resetHistory();
+    });
+    after(async () => {
+      window.__swc.verbose = false;
+      consoleWarnStub.restore();
+      if (el.open) {
+        const closed = oneEvent(el, "sp-closed");
+        el.open = false;
+        await closed;
+      }
+    });
+    const pickerFixture2 = async () => {
+      const test = await fixture(html`
+                <div>
+                    <sp-field-label for="picker-deprecated">
+                        Where do you live?
+                    </sp-field-label>
+                    <sp-picker
+                        id="picker-deprecated"
+                        label="Select a Country with a very long label, too long in fact"
+                    >
+                        <sp-menu>
+                            <sp-menu-item>Deselect</sp-menu-item>
+                            <sp-menu-item value="option-2">
+                                Select Inverse
+                            </sp-menu-item>
+                            <sp-menu-item>Feather...</sp-menu-item>
+                            <sp-menu-item>Select and Mask...</sp-menu-item>
+                            <sp-menu-item>Save Selection</sp-menu-item>
+                            <sp-menu-item disabled>Make Work Path</sp-menu-item>
+                        </sp-menu>
+                    </sp-picker>
+                </div>
+            `);
+      return test.querySelector("sp-picker");
+    };
+    it("does not warn in Dev Mode when accessible elements leveraged", async () => {
+      const test = await fixture(html`
+                <div>
+                    <sp-field-label for="test">Test label</sp-field-label>
+                    <sp-picker id="test">
+                        <sp-menu-item>Feather...</sp-menu-item>
+                        <sp-menu-item>Select and Mask...</sp-menu-item>
+                        <sp-menu-item>Save Selection</sp-menu-item>
+                    </sp-picker>
+                </div>
+            `);
+      el = test.querySelector("sp-picker");
+      await elementUpdated(el);
+      await nextFrame();
+      await nextFrame();
+      expect(consoleWarnStub.called).to.be.false;
+    });
+    it("warns in Dev Mode when accessible attributes are not leveraged", async function() {
+      this.retries(0);
+      el = await fixture(html`
+                <sp-picker>
+                    <sp-menu-item>Feather...</sp-menu-item>
+                    <sp-menu-item>Select and Mask...</sp-menu-item>
+                    <sp-menu-item>Save Selection</sp-menu-item>
+                </sp-picker>
+            `);
+      await elementUpdated(el);
+      await nextFrame();
+      await nextFrame();
+      expect(consoleWarnStub.called).to.be.true;
+      const spyCall = consoleWarnStub.getCall(0);
+      expect(
+        spyCall.args.at(0).includes("accessible"),
+        "confirm accessibility-centric message"
+      ).to.be.true;
+      expect(spyCall.args.at(-1), "confirm `data` shape").to.deep.equal({
+        data: {
+          localName: "sp-picker",
+          type: "accessibility",
+          level: "default"
+        }
+      });
+    });
+    describe("deprecated", () => {
+      it("warns in Dev Mode of deprecated `<sp-menu>` usage", async () => {
+        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"
+          }
+        });
+      });
+    });
+    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);
+        await nextFrame();
+      });
+      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.click();
+        await opened;
+        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);
+    await nextFrame();
+    let snapshot = await a11ySnapshot({});
+    expect(
+      findAccessibilityNode(
+        snapshot,
+        (node) => node.name === "Delete Choose an action type..."
+      ),
+      "`name` is the label text"
+    ).to.not.be.null;
+    el2.value = "2";
+    await elementUpdated(el2);
+    await nextFrame();
+    await nextFrame();
+    expect(el2.value).to.equal("2");
+    snapshot = await a11ySnapshot({});
+    expect(
+      findAccessibilityNode(
+        snapshot,
+        (node) => node.name === "Copy Choose an action type..."
+      ),
+      "`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.parentElement.style.float = "left";
+    el2.parentElement.style.float = "left";
+    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(el2.open).to.be.false;
+    expect(el1.open).to.be.true;
+    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, _e;
+    const el2 = await fixture(html`
+            <sp-picker
+                value="inverse"
+                label="Select a Country with a very long label, too long in fact"
+            >
+                <sp-menu-item value="deselect">Deselect Text</sp-menu-item>
+                <sp-menu-item value="inverse">Select Inverse</sp-menu-item>
+                <sp-menu-item>Feather...</sp-menu-item>
+                <sp-menu-item>Select and Mask...</sp-menu-item>
+                <sp-menu-item>Save Selection</sp-menu-item>
+                <sp-menu-item disabled>Make Work Path</sp-menu-item>
+            </sp-picker>
+        `);
+    await nextFrame();
+    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;
+    expect(
+      el2 === document.activeElement,
+      `activeElement is ${(_d = document.activeElement) == null ? void 0 : _d.localName}`
+    ).to.be.true;
+    expect(
+      el2.optionsMenu === el2.shadowRoot.activeElement,
+      `activeElement is ${(_e = el2.shadowRoot.activeElement) == null ? void 0 : _e.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`
+            <sp-picker
+                value="missing"
+                label="Select a Country with a very long label, too long in fact"
+            >
+                <sp-menu-item value="deselect">Deselect Text</sp-menu-item>
+                <sp-menu-item value="inverse">Select Inverse</sp-menu-item>
+                <sp-menu-item>Feather...</sp-menu-item>
+                <sp-menu-item>Select and Mask...</sp-menu-item>
+                <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`
+            <sp-picker
+                label="Select a Country with a very long label, too long in fact"
+            >
+                <sp-menu-item value="deselect" @mouseenter=${handleMouseenter}>
+                    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`
+            <sp-picker
+                label="Select a Country with a very long label, too long in fact"
+                @sp-opened=${handleOpenedSpy}
+                @sp-closed=${handleClosedSpy}
+            >
+                <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 closed = oneEvent(el2, "sp-closed");
+    el2.open = false;
+    await closed;
+    await elementUpdated(el2);
+    expect(closedSpy.calledOnce).to.be.true;
+  });
+  it("closes tooltip on button blur", async () => {
+    var _a;
+    const test = await styledFixture(html`
+            <div>${tooltip(tooltip.args)}</div>
+        `);
+    const el2 = test.querySelector("sp-picker");
+    await elementUpdated(el2);
+    const input1 = document.createElement("input");
+    const input2 = document.createElement("input");
+    const tooltipEl = el2.querySelector("sp-tooltip");
+    el2.insertAdjacentElement("beforebegin", input1);
+    el2.insertAdjacentElement("afterend", input2);
+    input1.focus();
+    expect(document.activeElement === input1).to.be.true;
+    const tooltipOpened = oneEvent(el2, "sp-opened");
+    await sendKeys({
+      press: "Tab"
+    });
+    await tooltipOpened;
+    expect(
+      document.activeElement === el2,
+      `Actually, ${(_a = document.activeElement) == null ? void 0 : _a.localName}`
+    ).to.be.true;
+    expect(tooltipEl.open).to.be.true;
+    expect(el2.open).to.be.false;
+    expect(el2.focused).to.be.true;
+    const menuOpen = oneEvent(el2, "sp-opened");
+    const tooltipClosed = oneEvent(el2, "sp-closed");
+    await sendKeys({
+      press: "ArrowDown"
+    });
+    await menuOpen;
+    await tooltipClosed;
+    expect(document.activeElement === el2).to.be.true;
+    expect(tooltipEl.open).to.be.false;
+    expect(el2.open).to.be.true;
+    const menuClosed = oneEvent(el2, "sp-closed");
+    await sendKeys({
+      press: "Tab"
+    });
+    await menuClosed;
+    expect(document.activeElement === el2).to.be.false;
+    expect(tooltipEl.open).to.be.false;
+    expect(el2.open).to.be.false;
+  });
+  describe("disabled", function() {
+    beforeEach(async function() {
+      const test = await fixture(html`
+                <div>${disabled(disabled.args)}</div>
+            `);
+      this.label = test.querySelector("sp-field-label");
+      this.el = test.querySelector("sp-picker");
+      await elementUpdated(this.elel);
+    });
+    it("does not recieve focus from an `<sp-field-label>`", async function() {
+      expect(this.el.disabled).to.be.true;
+      expect(this.el.focused).to.be.false;
+      this.label.click();
+      await elementUpdated(this.el);
+      expect(this.el.focused).to.be.false;
+    });
+    it("does not open from `click()`", async function() {
+      expect(this.el.disabled).to.be.true;
+      expect(this.el.open).to.be.false;
+      this.el.click();
+      await elementUpdated(this.el);
+      expect(this.el.open).to.be.false;
+    });
+    it("does not open from `sendMouse()`", async function() {
+      expect(this.el.disabled).to.be.true;
+      expect(this.el.open).to.be.false;
+      const boundingRect = this.el.button.getBoundingClientRect();
+      sendMouse({
+        steps: [
+          {
+            type: "click",
+            position: [
+              boundingRect.x + boundingRect.width / 2,
+              boundingRect.y + boundingRect.height / 2
+            ]
+          }
+        ]
+      });
+      await nextFrame();
+      await nextFrame();
+      await nextFrame();
+      await nextFrame();
+      expect(this.el.open).to.be.false;
+    });
+  });
+  describe("pending", function() {
+    beforeEach(async function() {
+      const test = await fixture(html`
+                <div>${pending({ pending: true })}</div>
+            `);
+      this.label = test.querySelector("sp-field-label");
+      this.el = test.querySelector("sp-picker");
+      await elementUpdated(this.elel);
+    });
+    it("receives focus from an `<sp-field-label>`", async function() {
+      expect(this.el.focused).to.be.false;
+      this.label.click();
+      await elementUpdated(this.el);
+      expect(this.el.focused).to.be.true;
+    });
+    it("does not open from `click()`", async function() {
+      expect(this.el.open).to.be.false;
+      this.el.click();
+      await elementUpdated(this.el);
+      expect(this.el.open).to.be.false;
+    });
+    it('manages its "name" value in the accessibility tree when [pending]', async () => {
+      const snapshot = await a11ySnapshot(
+        {}
+      );
+      expect(
+        findAccessibilityNode(
+          snapshot,
+          (node) => node.name === "Pending Choose your neighborhood Where do you live?"
+        )
+      ).to.not.be.null;
+    });
+  });
+}
+//# sourceMappingURL=index.js.map