@spectrum-web-components/picker 0.11.5 → 0.12.0

package/test/index.js

@@ -1,29 +1,37 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-import { elementUpdated, expect, fixture, html, nextFrame, oneEvent, waitUntil, } from '@open-wc/testing';
-import '@spectrum-web-components/shared/src/focus-visible.js';
-import { spy } from 'sinon';
-import { arrowDownEvent, arrowLeftEvent, arrowRightEvent, arrowUpEvent, 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 || _a === void 0 ? void 0 : _a.localName) === 'sp-menu';
+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 `
+  let el;
+  const pickerFixture = async () => {
+    const test = await fixture(html`
                 <div>
                     <sp-field-label for="picker">
                         Where do you live?
@@ -44,657 +52,670 @@ export function runPickerTests() {
                     </sp-picker>
                 </div>
             `);
-        return test.querySelector('sp-picker');
+    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`
+                    <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-divider></sp-menu-divider>
+                            <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>
+                `);
     };
-    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;
-            // Overlaid content is outside of the context of the Picker element
-            // and cannot be managed via its updateComplete cycle.
-            await nextFrame();
-            const close = oneEvent(el, 'sp-closed');
-            item.click();
-            await close;
-            // Overlaid content is outside of the context of the Picker element
-            // and cannot be managed via its updateComplete cycle.
-            await nextFrame();
-            expect(el.value, 'first time').to.equal('option-new');
-            opened = oneEvent(el, 'sp-opened');
-            el.open = true;
-            await opened;
-            // Overlaid content is outside of the context of the Picker element
-            // and cannot be managed via its updateComplete cycle.
-            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 || firstItem === void 0 ? void 0 : firstItem.id);
-            await sendKeys({ press: 'ArrowDown' });
-            await elementUpdated(el);
-            expect(el.optionsMenu.getAttribute('aria-activedescendant')).to.equal(secondItem === null || secondItem === void 0 ? 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 || _a === void 0 ? 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 || _b === void 0 ? 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 || _a === void 0 ? 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 || _b === void 0 ? 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 || _c === void 0 ? 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 || _d === void 0 ? 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 || _a === void 0 ? 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 || _a === void 0 ? 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 || _a === void 0 ? 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 || _b === void 0 ? 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;
-            // Force :focus-visible heuristic
-            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 () => {
-                // start at input1
-                input1.focus();
-                await nextFrame();
-                expect(document.activeElement === input1, 'focuses input 1').to
-                    .true;
-                // tab to the picker
-                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;
-                // tab through the picker to input2
-                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 () => {
-                // start at input1
-                input2.focus();
-                await nextFrame();
-                expect(document.activeElement, 'focuses input 2').to.equal(input2);
-                // tab to the picker
-                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);
-                // tab through the picker to input2
-                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);
-                // press down to open the picker
-                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);
-                // press down to open the picker
-                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);
-                // press down to open the picker
-                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);
-                // press down to open the picker
-                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 = (el) => {
-                const parentScroll = el.parentElement
-                    .scrollTop;
-                const parentOffset = el.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);
-        });
+    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 pickerFixture = async () => {
-            const test = await fixture(html `
+  });
+  describe("slotted label", () => {
+    const pickerFixture2 = async () => {
+      const test = await fixture(html`
                     <div>
                         <sp-field-label for="picker-slotted">
                             Where do you live?
@@ -716,26 +737,26 @@ export function runPickerTests() {
                         </sp-picker>
                     </div>
                 `);
-            return test.querySelector('sp-picker');
-        };
-        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 w/ slotted label', async () => {
-            await expect(el).to.be.accessible();
-        });
+      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 pickerFixture = async () => {
-            const test = await fixture(html `
+  });
+  describe("deprecated", () => {
+    const pickerFixture2 = async () => {
+      const test = await fixture(html`
                     <div>
                         <sp-field-label for="picker-deprecated">
                             Where do you live?
@@ -760,85 +781,120 @@ export function runPickerTests() {
                         </sp-picker>
                     </div>
                 `);
-            return test.querySelector('sp-picker');
-        };
-        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('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 || _a === void 0 ? 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 || _b === void 0 ? void 0 : _b.itemText).to.equal('Select Inverse');
-            expect(el.value).to.equal('option-2');
-        });
+      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;
+        }
+      });
     });
-    it('manages its "name" value in the accessibility tree when [icons-only]', async () => {
-        const test = await fixture(html `
-            <div>${iconsOnly({})}</div>
-        `);
-        const el = test.querySelector('sp-picker');
+    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);
-        let snapshot = (await a11ySnapshot({}));
-        expect(findAccessibilityNode(snapshot, (node) => node.name === 'Choose an action type... Delete'), '`name` is the label text').to.not.be.null;
-        el.value = '2';
+      });
+      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);
-        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',
-        });
+        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(el1.open).to.be.false;
+        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('displays selected item text by default', async () => {
-        var _a, _b, _c, _d;
-        const el = await fixture(html `
+  });
+  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`
                 <sp-picker
                     value="inverse"
                     label="Select a Country with a very long label, too long in fact"
@@ -852,27 +908,30 @@ export function runPickerTests() {
                     <sp-menu-item disabled>Make Work Path</sp-menu-item>
                 </sp-picker>
             `);
-        await elementUpdated(el);
-        await waitUntil(() => { var _a; return ((_a = el.selectedItem) === null || _a === void 0 ? void 0 : _a.itemText) === 'Select Inverse'; }, `Selected Item Text: ${(_a = el.selectedItem) === null || _a === void 0 ? void 0 : _a.itemText}`);
-        const firstItem = el.querySelector('sp-menu-item:nth-of-type(1)');
-        const secondItem = el.querySelector('sp-menu-item:nth-of-type(2)');
-        expect(el.value).to.equal('inverse');
-        expect((_b = el.selectedItem) === null || _b === void 0 ? void 0 : _b.itemText).to.equal('Select Inverse');
-        el.focus();
-        await elementUpdated(el);
-        expect(el === document.activeElement, `activeElement is ${(_c = document.activeElement) === null || _c === void 0 ? void 0 : _c.localName}`).to.be.true;
-        const opened = oneEvent(el, 'sp-opened');
-        sendKeys({ press: 'Enter' });
-        await opened;
-        await elementUpdated(el.optionsMenu);
-        expect(el.optionsMenu === document.activeElement, `activeElement is ${(_d = document.activeElement) === null || _d === void 0 ? 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(el.optionsMenu.getAttribute('aria-activedescendant')).to.equal(secondItem.id);
-    });
-    it('resets value when item not available', async () => {
-        var _a;
-        const el = await fixture(html `
+    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`
                 <sp-picker
                     value="missing"
                     label="Select a Country with a very long label, too long in fact"
@@ -886,15 +945,15 @@ export function runPickerTests() {
                     <sp-menu-item disabled>Make Work Path</sp-menu-item>
                 </sp-picker>
             `);
-        await elementUpdated(el);
-        await waitUntil(() => el.value === '');
-        expect(el.value).to.equal('');
-        expect((_a = el.selectedItem) === null || _a === void 0 ? void 0 : _a.itemText).to.be.undefined;
-    });
-    it('allows event listeners on child items', async () => {
-        const mouseenterSpy = spy();
-        const handleMouseenter = () => mouseenterSpy();
-        const el = await fixture(html `
+    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"
                 >
@@ -906,29 +965,29 @@ export function runPickerTests() {
                     </sp-menu-item>
                 </sp-picker>
             `);
-        await elementUpdated(el);
-        const hoverEl = el.querySelector('sp-menu-item');
-        const opened = oneEvent(el, 'sp-opened');
-        el.open = true;
-        await opened;
-        await elementUpdated(el);
-        expect(el.open).to.be.true;
-        hoverEl.dispatchEvent(new MouseEvent('mouseenter'));
-        await elementUpdated(el);
-        expect(el.open).to.be.true;
-        const closed = oneEvent(el, 'sp-closed');
-        el.open = false;
-        await closed;
-        await elementUpdated(el);
-        expect(el.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 el = await fixture(html `
+    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}
@@ -937,24 +996,22 @@ export function runPickerTests() {
                     <sp-menu-item value="deselect">Deselect Text</sp-menu-item>
                 </sp-picker>
             `);
-        await elementUpdated(el);
-        const opened = oneEvent(el, 'sp-opened');
-        el.open = true;
-        await opened;
-        await elementUpdated(el);
-        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(el, 'sp-closed');
-        el.open = false;
-        await closed;
-        await elementUpdated(el);
-        expect(closedSpy.calledOnce).to.be.true;
-        const closedEvent = closedSpy
-            .args[0][0];
-        expect(closedEvent.detail.interaction).to.equal('modal');
-    });
+    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");
+  });
 }
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map