@spectrum-web-components/picker 0.13.0 → 0.13.2

package/test/index.js

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