@spectrum-web-components/action-group 0.11.0 → 0.11.2

package/test/action-group.test.js

@@ -1,18 +1,55 @@
-import{elementUpdated as n,expect as e,fixture as i,html as c,waitUntil as d}from"@open-wc/testing";import"@spectrum-web-components/action-button/sp-action-button.js";import{LitElement as p}from"@spectrum-web-components/base";import"@spectrum-web-components/overlay/overlay-trigger.js";import"@spectrum-web-components/tooltip/sp-tooltip.js";import{arrowDownEvent as f,arrowLeftEvent as w,arrowRightEvent as b,arrowUpEvent as g,endEvent as q,homeEvent as S,testForLitDevWarnings as y}from"../../../test/testing-helpers";import{sendKeys as u}from"@web/test-runner-commands";import"@spectrum-web-components/action-group/sp-action-group.js";class A extends p{render(){return c`
+"use strict";
+import {
+  elementUpdated,
+  expect,
+  fixture,
+  html,
+  waitUntil
+} from "@open-wc/testing";
+import "@spectrum-web-components/action-button/sp-action-button.js";
+import { LitElement } from "@spectrum-web-components/base";
+import "@spectrum-web-components/overlay/overlay-trigger.js";
+import "@spectrum-web-components/tooltip/sp-tooltip.js";
+import {
+  arrowDownEvent,
+  arrowLeftEvent,
+  arrowRightEvent,
+  arrowUpEvent,
+  endEvent,
+  homeEvent,
+  testForLitDevWarnings
+} from "../../../test/testing-helpers";
+import { sendKeys } from "@web/test-runner-commands";
+import "@spectrum-web-components/action-group/sp-action-group.js";
+class QuietActionGroup extends LitElement {
+  render() {
+    return html`
             <sp-action-group quiet>
                 <slot name="first"></slot>
                 <slot name="second"></slot>
             </sp-action-group>
-        `}}customElements.define("quiet-action-group",A);class m extends p{render(){return c`
+        `;
+  }
+}
+customElements.define("quiet-action-group", QuietActionGroup);
+class EmphasizedActionGroup extends LitElement {
+  render() {
+    return html`
             <sp-action-group emphasized>
                 <slot name="first"></slot>
                 <slot name="second"></slot>
             </sp-action-group>
-        `}}customElements.define("emphasized-action-group",m);async function r(a){return await i(c`
+        `;
+  }
+}
+customElements.define("emphasized-action-group", EmphasizedActionGroup);
+async function singleSelectedActionGroup(selected) {
+  const el = await fixture(
+    html`
             <sp-action-group
                 label="Selects User-Chosen Buttons"
                 selects="single"
-                .selected=${a}
+                .selected=${selected}
             >
                 <sp-action-button value="first" class="first">
                     First
@@ -21,11 +58,17 @@ import{elementUpdated as n,expect as e,fixture as i,html as c,waitUntil as d}fro
                     Second
                 </sp-action-button>
             </sp-action-group>
-        `)}async function v(a){return await i(c`
+        `
+  );
+  return el;
+}
+async function multipleSelectedActionGroup(selected) {
+  const el = await fixture(
+    html`
             <sp-action-group
                 label="Selects User-Chosen Buttons"
                 selects="multiple"
-                .selected=${a}
+                .selected=${selected}
             >
                 <sp-action-button value="first" class="first">
                     First
@@ -34,26 +77,67 @@ import{elementUpdated as n,expect as e,fixture as i,html as c,waitUntil as d}fro
                     Second
                 </sp-action-button>
             </sp-action-group>
-        `)}describe("ActionGroup",()=>{it("loads empty action-group accessibly",async()=>{const t=await i(c`
+        `
+  );
+  return el;
+}
+describe("ActionGroup", () => {
+  it("loads empty action-group accessibly", async () => {
+    const el = await fixture(
+      html`
                 <sp-action-group></sp-action-group>
-            `);await n(t),await e(t).to.be.accessible()}),y(async()=>await i(c`
+            `
+    );
+    await elementUpdated(el);
+    await expect(el).to.be.accessible();
+  });
+  testForLitDevWarnings(
+    async () => await fixture(
+      html`
                     <sp-action-group aria-label="Default Group">
                         <sp-action-button>First</sp-action-button>
                         <sp-action-button>Second</sp-action-button>
                         <sp-action-button>Third</sp-action-button>
                     </sp-action-group>
-                `)),it("loads default action-group accessibly",async()=>{const t=await i(c`
+                `
+    )
+  );
+  it("loads default action-group accessibly", async () => {
+    const el = await fixture(
+      html`
                 <sp-action-group aria-label="Default Group">
                     <sp-action-button>First</sp-action-button>
                     <sp-action-button>Second</sp-action-button>
                     <sp-action-button>Third</sp-action-button>
                 </sp-action-group>
-            `);await n(t),await e(t).to.be.accessible(),e(t.getAttribute("aria-label")).to.equal("Default Group"),e(t.hasAttribute("role")).to.be.false,e(t.children[0].getAttribute("role")).to.equal("button")}),it("applies `quiet` attribute to its children",async()=>{const t=await i(c`
+            `
+    );
+    await elementUpdated(el);
+    await expect(el).to.be.accessible();
+    expect(el.getAttribute("aria-label")).to.equal("Default Group");
+    expect(el.hasAttribute("role")).to.be.false;
+    expect(el.children[0].getAttribute("role")).to.equal("button");
+  });
+  it("applies `quiet` attribute to its children", async () => {
+    const el = await fixture(
+      html`
                 <sp-action-group quiet>
                     <sp-action-button id="first">First</sp-action-button>
                     <sp-action-button id="second">Second</sp-action-button>
                 </sp-action-group>
-            `),o=t.querySelector("#first"),s=t.querySelector("#second");await n(t),e(o.hasAttribute("quiet")).to.be.true,e(o.quiet).to.be.true,e(s.hasAttribute("quiet")).to.be.true,e(s.quiet).to.be.true}),it("applies `quiet` attribute to its slotted children",async()=>{const t=await i(c`
+            `
+    );
+    const firstButton = el.querySelector("#first");
+    const secondButton = el.querySelector("#second");
+    await elementUpdated(el);
+    expect(firstButton.hasAttribute("quiet")).to.be.true;
+    expect(firstButton.quiet).to.be.true;
+    expect(secondButton.hasAttribute("quiet")).to.be.true;
+    expect(secondButton.quiet).to.be.true;
+  });
+  it("applies `quiet` attribute to its slotted children", async () => {
+    const el = await fixture(
+      html`
                 <quiet-action-group>
                     <sp-action-button slot="first" id="first">
                         First
@@ -62,7 +146,19 @@ import{elementUpdated as n,expect as e,fixture as i,html as c,waitUntil as d}fro
                         Second
                     </sp-action-button>
                 </quiet-action-group>
-            `),o=t.querySelector("#first"),s=t.querySelector("#second");await n(t),e(o.hasAttribute("quiet")).to.be.true,e(o.quiet).to.be.true,e(s.hasAttribute("quiet")).to.be.true,e(s.quiet).to.be.true}),it("applies `emphasized` attribute to its slotted children",async()=>{const t=await i(c`
+            `
+    );
+    const firstButton = el.querySelector("#first");
+    const secondButton = el.querySelector("#second");
+    await elementUpdated(el);
+    expect(firstButton.hasAttribute("quiet")).to.be.true;
+    expect(firstButton.quiet).to.be.true;
+    expect(secondButton.hasAttribute("quiet")).to.be.true;
+    expect(secondButton.quiet).to.be.true;
+  });
+  it("applies `emphasized` attribute to its slotted children", async () => {
+    const el = await fixture(
+      html`
                 <emphasized-action-group>
                     <sp-action-button slot="first" id="first">
                         First
@@ -71,7 +167,19 @@ import{elementUpdated as n,expect as e,fixture as i,html as c,waitUntil as d}fro
                         Second
                     </sp-action-button>
                 </emphasized-action-group>
-            `),o=t.querySelector("#first"),s=t.querySelector("#second");await n(t),e(o.hasAttribute("emphasized")).to.be.true,e(o.emphasized).to.be.true,e(s.hasAttribute("emphasized")).to.be.true,e(s.emphasized).to.be.true}),it("applies `quiet` attribute to slotted children with overlays",async()=>{const t=await i(c`
+            `
+    );
+    const firstButton = el.querySelector("#first");
+    const secondButton = el.querySelector("#second");
+    await elementUpdated(el);
+    expect(firstButton.hasAttribute("emphasized")).to.be.true;
+    expect(firstButton.emphasized).to.be.true;
+    expect(secondButton.hasAttribute("emphasized")).to.be.true;
+    expect(secondButton.emphasized).to.be.true;
+  });
+  it("applies `quiet` attribute to slotted children with overlays", async () => {
+    const el = await fixture(
+      html`
                 <quiet-action-group>
                     <overlay-trigger slot="first">
                         <sp-action-button slot="trigger" id="first">
@@ -84,7 +192,19 @@ import{elementUpdated as n,expect as e,fixture as i,html as c,waitUntil as d}fro
                         </sp-action-button>
                     </overlay-trigger>
                 </quiet-action-group>
-            `),o=t.querySelector("#first"),s=t.querySelector("#second");await n(t),e(o.hasAttribute("quiet")).to.be.true,e(o.quiet).to.be.true,e(s.hasAttribute("quiet")).to.be.true,e(s.quiet).to.be.true}),it("applies `emphasized` attribute to slotted children with overlays",async()=>{const t=await i(c`
+            `
+    );
+    const firstButton = el.querySelector("#first");
+    const secondButton = el.querySelector("#second");
+    await elementUpdated(el);
+    expect(firstButton.hasAttribute("quiet")).to.be.true;
+    expect(firstButton.quiet).to.be.true;
+    expect(secondButton.hasAttribute("quiet")).to.be.true;
+    expect(secondButton.quiet).to.be.true;
+  });
+  it("applies `emphasized` attribute to slotted children with overlays", async () => {
+    const el = await fixture(
+      html`
                 <emphasized-action-group>
                     <overlay-trigger slot="first">
                         <sp-action-button slot="trigger" id="first">
@@ -97,19 +217,48 @@ import{elementUpdated as n,expect as e,fixture as i,html as c,waitUntil as d}fro
                         </sp-action-button>
                     </overlay-trigger>
                 </emphasized-action-group>
-            `),o=t.querySelector("#first"),s=t.querySelector("#second");await n(t),e(o.hasAttribute("emphasized")).to.be.true,e(o.emphasized).to.be.true,e(s.hasAttribute("emphasized")).to.be.true,e(s.emphasized).to.be.true}),it('loads [selects="single"] action-group accessibly',async()=>{const t=await i(c`
+            `
+    );
+    const firstButton = el.querySelector("#first");
+    const secondButton = el.querySelector("#second");
+    await elementUpdated(el);
+    expect(firstButton.hasAttribute("emphasized")).to.be.true;
+    expect(firstButton.emphasized).to.be.true;
+    expect(secondButton.hasAttribute("emphasized")).to.be.true;
+    expect(secondButton.emphasized).to.be.true;
+  });
+  it('loads [selects="single"] action-group accessibly', async () => {
+    const el = await fixture(
+      html`
                 <sp-action-group label="Selects Single Group" selects="single">
                     <sp-action-button>First</sp-action-button>
                     <sp-action-button>Second</sp-action-button>
                     <sp-action-button>Third</sp-action-button>
                 </sp-action-group>
-            `);await n(t),await e(t).to.be.accessible(),e(t.getAttribute("aria-label")).to.equal("Selects Single Group"),e(t.getAttribute("role")).to.equal("radiogroup"),e(t.children[0].getAttribute("role")).to.equal("radio")}),it('loads [selects="single"] action-group w/ selection accessibly',async()=>{const t=await i(c`
+            `
+    );
+    await elementUpdated(el);
+    await expect(el).to.be.accessible();
+    expect(el.getAttribute("aria-label")).to.equal("Selects Single Group");
+    expect(el.getAttribute("role")).to.equal("radiogroup");
+    expect(el.children[0].getAttribute("role")).to.equal("radio");
+  });
+  it('loads [selects="single"] action-group w/ selection accessibly', async () => {
+    const el = await fixture(
+      html`
                 <sp-action-group label="Selects Single Group" selects="single">
                     <sp-action-button>First</sp-action-button>
                     <sp-action-button>Second</sp-action-button>
                     <sp-action-button selected>Third</sp-action-button>
                 </sp-action-group>
-            `);await n(t),await e(t).to.be.accessible()}),it('loads [selects="multiple"] action-group accessibly',async()=>{const t=await i(c`
+            `
+    );
+    await elementUpdated(el);
+    await expect(el).to.be.accessible();
+  });
+  it('loads [selects="multiple"] action-group accessibly', async () => {
+    const el = await fixture(
+      html`
                 <sp-action-group
                     label="Selects Multiple Group"
                     selects="multiple"
@@ -118,7 +267,19 @@ import{elementUpdated as n,expect as e,fixture as i,html as c,waitUntil as d}fro
                     <sp-action-button>Second</sp-action-button>
                     <sp-action-button>Third</sp-action-button>
                 </sp-action-group>
-            `);await n(t),await e(t).to.be.accessible(),e(t.getAttribute("aria-label")).to.equal("Selects Multiple Group"),e(t.getAttribute("role")).to.equal("group"),e(t.children[0].getAttribute("role")).to.equal("checkbox")}),it('loads [selects="multiple"] action-group w/ selection accessibly',async()=>{const t=await i(c`
+            `
+    );
+    await elementUpdated(el);
+    await expect(el).to.be.accessible();
+    expect(el.getAttribute("aria-label")).to.equal(
+      "Selects Multiple Group"
+    );
+    expect(el.getAttribute("role")).to.equal("group");
+    expect(el.children[0].getAttribute("role")).to.equal("checkbox");
+  });
+  it('loads [selects="multiple"] action-group w/ selection accessibly', async () => {
+    const el = await fixture(
+      html`
                 <sp-action-group
                     label="Selects Multiple Group"
                     selects="multiple"
@@ -127,19 +288,42 @@ import{elementUpdated as n,expect as e,fixture as i,html as c,waitUntil as d}fro
                     <sp-action-button selected>Second</sp-action-button>
                     <sp-action-button selected>Third</sp-action-button>
                 </sp-action-group>
-            `);await n(t),await e(t).to.be.accessible()}),it('sets tab stop when [selects="single"] and the initial button is [disabled]',async()=>{const t=await i(c`
+            `
+    );
+    await elementUpdated(el);
+    await expect(el).to.be.accessible();
+  });
+  it('sets tab stop when [selects="single"] and the initial button is [disabled]', async () => {
+    const el = await fixture(
+      html`
                 <sp-action-group label="Selects Single Group" selects="single">
                     <sp-action-button disabled>First</sp-action-button>
                     <sp-action-button class="second">Second</sp-action-button>
                     <sp-action-button>Third</sp-action-button>
                 </sp-action-group>
-            `),o=t.querySelector(".second");await n(t),e(o.hasAttribute("tabindex")),e(o.getAttribute("tabindex")).to.equal("0")}),it('surfaces [selects="single"] selection',async()=>{const t=await i(c`
+            `
+    );
+    const secondButton = el.querySelector(".second");
+    await elementUpdated(el);
+    expect(secondButton.hasAttribute("tabindex"));
+    expect(secondButton.getAttribute("tabindex")).to.equal("0");
+  });
+  it('surfaces [selects="single"] selection', async () => {
+    const el = await fixture(
+      html`
                 <sp-action-group label="Selects Single Group" selects="single">
                     <sp-action-button>First</sp-action-button>
                     <sp-action-button>Second</sp-action-button>
                     <sp-action-button selected>Third</sp-action-button>
                 </sp-action-group>
-            `);await n(t),e(t.selected,'"Third" selected').to.deep.equal(["Third"])}),it('surfaces [selects="multiple"] selection',async()=>{const t=await i(c`
+            `
+    );
+    await elementUpdated(el);
+    expect(el.selected, '"Third" selected').to.deep.equal(["Third"]);
+  });
+  it('surfaces [selects="multiple"] selection', async () => {
+    const el = await fixture(
+      html`
                 <sp-action-group
                     label="Selects Multiple Group"
                     selects="multiple"
@@ -148,13 +332,34 @@ import{elementUpdated as n,expect as e,fixture as i,html as c,waitUntil as d}fro
                     <sp-action-button selected>Second</sp-action-button>
                     <sp-action-button selected>Third</sp-action-button>
                 </sp-action-group>
-            `);await n(t),e(t.selected,'"Second" and "Third" selected').to.deep.equal(["Second","Third"])}),it("does not select without [selects]",async()=>{const t=await i(c`
+            `
+    );
+    await elementUpdated(el);
+    expect(el.selected, '"Second" and "Third" selected').to.deep.equal([
+      "Second",
+      "Third"
+    ]);
+  });
+  it("does not select without [selects]", async () => {
+    const el = await fixture(
+      html`
                 <sp-action-group label="No Selects Group">
                     <sp-action-button>First</sp-action-button>
                     <sp-action-button selected>Second</sp-action-button>
                     <sp-action-button class="third">Third</sp-action-button>
                 </sp-action-group>
-            `),o=t.querySelector(".third");await n(t),e(t.selected.length).to.equal(1),o.click(),await n(t),e(t.selected.length).to.equal(1)}),it('selects via `click` while [selects="single"]',async()=>{const t=await i(c`
+            `
+    );
+    const thirdElement = el.querySelector(".third");
+    await elementUpdated(el);
+    expect(el.selected.length).to.equal(1);
+    thirdElement.click();
+    await elementUpdated(el);
+    expect(el.selected.length).to.equal(1);
+  });
+  it('selects via `click` while [selects="single"]', async () => {
+    const el = await fixture(
+      html`
                 <sp-action-group label="Selects Single Group" selects="single">
                     <sp-action-button value="first">First</sp-action-button>
                     <sp-action-button value="second" selected>
@@ -164,7 +369,23 @@ import{elementUpdated as n,expect as e,fixture as i,html as c,waitUntil as d}fro
                         Third
                     </sp-action-button>
                 </sp-action-group>
-            `),o=t.querySelector(".third");await n(t),e(t.selected.length).to.equal(1),e(t.selected.includes("second")),o.click(),await n(t),e(o.selected,"third child selected").to.be.true,await d(()=>t.selected.length===1&&t.selected.includes("third"),"Updates value of `selected`")}),it('selects via `click` while  [selects="multiple"] selection',async()=>{const t=await i(c`
+            `
+    );
+    const thirdElement = el.querySelector(".third");
+    await elementUpdated(el);
+    expect(el.selected.length).to.equal(1);
+    expect(el.selected.includes("second"));
+    thirdElement.click();
+    await elementUpdated(el);
+    expect(thirdElement.selected, "third child selected").to.be.true;
+    await waitUntil(
+      () => el.selected.length === 1 && el.selected.includes("third"),
+      "Updates value of `selected`"
+    );
+  });
+  it('selects via `click` while  [selects="multiple"] selection', async () => {
+    const el = await fixture(
+      html`
                 <sp-action-group
                     label="Selects Multiple Group"
                     selects="multiple"
@@ -175,27 +396,100 @@ import{elementUpdated as n,expect as e,fixture as i,html as c,waitUntil as d}fro
                     <sp-action-button class="second">Second</sp-action-button>
                     <sp-action-button class="third">Third</sp-action-button>
                 </sp-action-group>
-            `),o=t.querySelector(".first"),s=t.querySelector(".second"),l=t.querySelector(".third");await n(t),e(t.selected.length).to.equal(1),e(t.selected.includes("First")),o.click(),s.click(),l.click(),await n(t),e(s.selected,"second child selected").to.be.true,e(l.selected,"third child selected").to.be.true,await d(()=>t.selected.length===2&&t.selected.includes("Second")&&t.selected.includes("Third"),"Updates value of `selected`")}),it("does not respond to clicks on itself",async()=>{const t=await i(c`
+            `
+    );
+    const firstElement = el.querySelector(".first");
+    const secondElement = el.querySelector(".second");
+    const thirdElement = el.querySelector(".third");
+    await elementUpdated(el);
+    expect(el.selected.length).to.equal(1);
+    expect(el.selected.includes("First"));
+    firstElement.click();
+    secondElement.click();
+    thirdElement.click();
+    await elementUpdated(el);
+    expect(secondElement.selected, "second child selected").to.be.true;
+    expect(thirdElement.selected, "third child selected").to.be.true;
+    await waitUntil(
+      () => el.selected.length === 2 && el.selected.includes("Second") && el.selected.includes("Third"),
+      "Updates value of `selected`"
+    );
+  });
+  it("does not respond to clicks on itself", async () => {
+    const el = await fixture(
+      html`
                 <sp-action-group label="Selects Single Group" selects="single">
                     <sp-action-button>First</sp-action-button>
                     <sp-action-button>Second</sp-action-button>
                     <sp-action-button class="third">Third</sp-action-button>
                 </sp-action-group>
-            `);await n(t),e(t.selected.length).to.equal(0),t.click(),await n(t),e(t.selected.length).to.equal(0)}),it("selection can be prevented",async()=>{const t=await i(c`
+            `
+    );
+    await elementUpdated(el);
+    expect(el.selected.length).to.equal(0);
+    el.click();
+    await elementUpdated(el);
+    expect(el.selected.length).to.equal(0);
+  });
+  it("selection can be prevented", async () => {
+    const el = await fixture(
+      html`
                 <sp-action-group
                     label="Selects Single Group"
                     selects="single"
-                    @change=${s=>{s.preventDefault()}}
+                    @change=${(event) => {
+        event.preventDefault();
+      }}
                 >
                     <sp-action-button>First</sp-action-button>
                     <sp-action-button>Second</sp-action-button>
                     <sp-action-button class="third">Third</sp-action-button>
                 </sp-action-group>
-            `),o=t.querySelector(".third");await n(t),e(t.selected.length).to.equal(0),o.click(),await n(t),e(o.selected,"third child not selected").to.be.false,e(t.selected.length).to.equal(0)}),it('selects user-passed value while [selects="single"]',async()=>{const t=await r(["first"]);await n(t),e(t.selected.length).to.equal(1);const o=t.querySelector(".first"),s=t.querySelector(".second");e(o.selected,"first button selected").to.be.true,e(s.selected,"second button not selected").to.be.false,s.click(),await n(t),e(t.selected.length).to.equal(1),e(o.selected,"first button not selected").to.be.false,e(s.selected,"second button selected").to.be.true}),it('selects can be updated while [selects="single"]',async()=>{const t=await r(["first"]);await n(t),e(t.selected.length).to.equal(1);const o=t.querySelector(".first"),s=t.querySelector(".second");e(o.selected,"first button selected").to.be.true,e(s.selected,"second button not selected").to.be.false,t.selected=["second"],await n(t),e(t.selected.length).to.equal(1),e(o.selected,"first button not selected").to.be.false,e(s.selected,"second button selected").to.be.true}),it('selects user-passed value while [selects="multiple"]',async()=>{const t=await i(c`
+            `
+    );
+    const thirdElement = el.querySelector(".third");
+    await elementUpdated(el);
+    expect(el.selected.length).to.equal(0);
+    thirdElement.click();
+    await elementUpdated(el);
+    expect(thirdElement.selected, "third child not selected").to.be.false;
+    expect(el.selected.length).to.equal(0);
+  });
+  it('selects user-passed value while [selects="single"]', async () => {
+    const el = await singleSelectedActionGroup(["first"]);
+    await elementUpdated(el);
+    expect(el.selected.length).to.equal(1);
+    const firstButton = el.querySelector(".first");
+    const secondButton = el.querySelector(".second");
+    expect(firstButton.selected, "first button selected").to.be.true;
+    expect(secondButton.selected, "second button not selected").to.be.false;
+    secondButton.click();
+    await elementUpdated(el);
+    expect(el.selected.length).to.equal(1);
+    expect(firstButton.selected, "first button not selected").to.be.false;
+    expect(secondButton.selected, "second button selected").to.be.true;
+  });
+  it('selects can be updated while [selects="single"]', async () => {
+    const el = await singleSelectedActionGroup(["first"]);
+    await elementUpdated(el);
+    expect(el.selected.length).to.equal(1);
+    const firstButton = el.querySelector(".first");
+    const secondButton = el.querySelector(".second");
+    expect(firstButton.selected, "first button selected").to.be.true;
+    expect(secondButton.selected, "second button not selected").to.be.false;
+    el.selected = ["second"];
+    await elementUpdated(el);
+    expect(el.selected.length).to.equal(1);
+    expect(firstButton.selected, "first button not selected").to.be.false;
+    expect(secondButton.selected, "second button selected").to.be.true;
+  });
+  it('selects user-passed value while [selects="multiple"]', async () => {
+    const el = await fixture(
+      html`
                 <sp-action-group
                     label="Selects Multiple Group"
                     selects="multiple"
-                    .selected=${["first","second"]}
+                    .selected=${["first", "second"]}
                 >
                     <sp-action-button class="first" value="first">
                         First
@@ -207,11 +501,36 @@ import{elementUpdated as n,expect as e,fixture as i,html as c,waitUntil as d}fro
                         Third
                     </sp-action-button>
                 </sp-action-group>
-            `);await n(t);const o=t.querySelector(".first"),s=t.querySelector(".second"),l=t.querySelector(".third");e(t.selected.length).to.equal(2),e(o.selected,"first button selected").to.be.true,e(s.selected,"second button selected").to.be.true,e(l.selected,"third button not selected").to.be.false,l.click(),await n(t),e(t.selected.length).to.equal(3),e(o.selected,"first button selected").to.be.true,e(s.selected,"second button selected").to.be.true,e(l.selected,"third button selected").to.be.true,o.click(),await n(t),e(t.selected.length).to.equal(2),e(o.selected,"first button not selected").to.be.false,e(s.selected,"second button selected").to.be.true,e(l.selected,"third button selected").to.be.true}),it('selects can be updated while [selects="multiple"]',async()=>{const t=await i(c`
+            `
+    );
+    await elementUpdated(el);
+    const firstButton = el.querySelector(".first");
+    const secondButton = el.querySelector(".second");
+    const thirdButton = el.querySelector(".third");
+    expect(el.selected.length).to.equal(2);
+    expect(firstButton.selected, "first button selected").to.be.true;
+    expect(secondButton.selected, "second button selected").to.be.true;
+    expect(thirdButton.selected, "third button not selected").to.be.false;
+    thirdButton.click();
+    await elementUpdated(el);
+    expect(el.selected.length).to.equal(3);
+    expect(firstButton.selected, "first button selected").to.be.true;
+    expect(secondButton.selected, "second button selected").to.be.true;
+    expect(thirdButton.selected, "third button selected").to.be.true;
+    firstButton.click();
+    await elementUpdated(el);
+    expect(el.selected.length).to.equal(2);
+    expect(firstButton.selected, "first button not selected").to.be.false;
+    expect(secondButton.selected, "second button selected").to.be.true;
+    expect(thirdButton.selected, "third button selected").to.be.true;
+  });
+  it('selects can be updated while [selects="multiple"]', async () => {
+    const el = await fixture(
+      html`
                 <sp-action-group
                     label="Selects Multiple Group"
                     selects="multiple"
-                    .selected=${["first","second"]}
+                    .selected=${["first", "second"]}
                 >
                     <sp-action-button class="first" value="first">
                         First
@@ -223,7 +542,55 @@ import{elementUpdated as n,expect as e,fixture as i,html as c,waitUntil as d}fro
                         Third
                     </sp-action-button>
                 </sp-action-group>
-            `);await n(t);const o=t.querySelector(".first"),s=t.querySelector(".second"),l=t.querySelector(".third");e(t.selected.length).to.equal(2),e(o.selected,"first button selected").to.be.true,e(s.selected,"second button selected").to.be.true,e(l.selected,"third button not selected").to.be.false,t.selected=["first","second","third"],await n(t),e(t.selected.length).to.equal(3),e(o.selected,"first button selected").to.be.true,e(s.selected,"second button selected").to.be.true,e(l.selected,"third button selected").to.be.true,t.selected=["second","third"],await n(t),e(t.selected.length,JSON.stringify(t.selected)).to.equal(2),e(o.selected,"first button not selected").to.be.false,e(s.selected,"second button selected").to.be.true,e(l.selected,"third button selected").to.be.true}),it('selects multiple user-passed values while [selects="single"], but then proceeds with radio-button style functionality',async()=>{const t=await r(["first","second"]);await n(t),e(t.selected.length).to.equal(2);const o=t.querySelector(".first"),s=t.querySelector(".second");e(o.selected,"first button selected").to.be.true,e(s.selected,"second button selected").to.be.true,s.click(),await n(t),e(t.selected.length).to.equal(1),e(o.selected,"first button selected").to.be.false,e(s.selected,"second button selected").to.be.true}),it('only selects user-passed buttons if present in action-group while [selects="multiple"]',async()=>{const t=await v(["second","fourth"]);await n(t),e(t.selected.length).to.equal(1);const o=t.querySelector(".second");e(o.selected,"second button selected").to.be.true;const s=t.querySelector(".first");e(s.selected,"first button selected").to.be.false}),it("selects user-passed values with no .selects value, but does not allow interaction afterwards",async()=>{const t=await i(c`
+            `
+    );
+    await elementUpdated(el);
+    const firstButton = el.querySelector(".first");
+    const secondButton = el.querySelector(".second");
+    const thirdButton = el.querySelector(".third");
+    expect(el.selected.length).to.equal(2);
+    expect(firstButton.selected, "first button selected").to.be.true;
+    expect(secondButton.selected, "second button selected").to.be.true;
+    expect(thirdButton.selected, "third button not selected").to.be.false;
+    el.selected = ["first", "second", "third"];
+    await elementUpdated(el);
+    expect(el.selected.length).to.equal(3);
+    expect(firstButton.selected, "first button selected").to.be.true;
+    expect(secondButton.selected, "second button selected").to.be.true;
+    expect(thirdButton.selected, "third button selected").to.be.true;
+    el.selected = ["second", "third"];
+    await elementUpdated(el);
+    expect(el.selected.length, JSON.stringify(el.selected)).to.equal(2);
+    expect(firstButton.selected, "first button not selected").to.be.false;
+    expect(secondButton.selected, "second button selected").to.be.true;
+    expect(thirdButton.selected, "third button selected").to.be.true;
+  });
+  it('selects multiple user-passed values while [selects="single"], but then proceeds with radio-button style functionality', async () => {
+    const el = await singleSelectedActionGroup(["first", "second"]);
+    await elementUpdated(el);
+    expect(el.selected.length).to.equal(2);
+    const firstButton = el.querySelector(".first");
+    const secondButton = el.querySelector(".second");
+    expect(firstButton.selected, "first button selected").to.be.true;
+    expect(secondButton.selected, "second button selected").to.be.true;
+    secondButton.click();
+    await elementUpdated(el);
+    expect(el.selected.length).to.equal(1);
+    expect(firstButton.selected, "first button selected").to.be.false;
+    expect(secondButton.selected, "second button selected").to.be.true;
+  });
+  it('only selects user-passed buttons if present in action-group while [selects="multiple"]', async () => {
+    const el = await multipleSelectedActionGroup(["second", "fourth"]);
+    await elementUpdated(el);
+    expect(el.selected.length).to.equal(1);
+    const secondButton = el.querySelector(".second");
+    expect(secondButton.selected, "second button selected").to.be.true;
+    const firstButton = el.querySelector(".first");
+    expect(firstButton.selected, "first button selected").to.be.false;
+  });
+  it("selects user-passed values with no .selects value, but does not allow interaction afterwards", async () => {
+    const el = await fixture(
+      html`
                 <sp-action-group
                     label="Selects User-Chosen Buttons"
                     .selected=${["first"]}
@@ -235,10 +602,26 @@ import{elementUpdated as n,expect as e,fixture as i,html as c,waitUntil as d}fro
                         Second
                     </sp-action-button>
                 </sp-action-group>
-            `);await n(t),e(t.selected.length).to.equal(1);const o=t.querySelector(".first"),s=t.querySelector(".second");e(o.selected,"first button selected").to.be.true,e(s.selected,"second button selected").to.be.false,s.click(),await n(t),e(t.selected.length).to.equal(1),e(o.selected,"first button selected").to.be.true,e(s.selected,"second button selected").to.be.false}),it("selects multiple buttons if .selected is passed in, but does not allow further interaction afterwards",async()=>{const t=await i(c`
+            `
+    );
+    await elementUpdated(el);
+    expect(el.selected.length).to.equal(1);
+    const firstButton = el.querySelector(".first");
+    const secondButton = el.querySelector(".second");
+    expect(firstButton.selected, "first button selected").to.be.true;
+    expect(secondButton.selected, "second button selected").to.be.false;
+    secondButton.click();
+    await elementUpdated(el);
+    expect(el.selected.length).to.equal(1);
+    expect(firstButton.selected, "first button selected").to.be.true;
+    expect(secondButton.selected, "second button selected").to.be.false;
+  });
+  it("selects multiple buttons if .selected is passed in, but does not allow further interaction afterwards", async () => {
+    const el = await fixture(
+      html`
                 <sp-action-group
                     label="Selects User-Chosen Buttons"
-                    .selected=${["first","second"]}
+                    .selected=${["first", "second"]}
                 >
                     <sp-action-button class="first" value="first">
                         First
@@ -247,12 +630,30 @@ import{elementUpdated as n,expect as e,fixture as i,html as c,waitUntil as d}fro
                         Second
                     </sp-action-button>
                 </sp-action-group>
-            `);await n(t),e(t.selected.length).to.equal(2);const o=t.querySelector(".first");e(o.selected,"first button selected").to.be.true;const s=t.querySelector(".second");e(s.selected,"second button selected").to.be.true,o.click(),await n(t),e(t.selected.length).to.equal(2),e(o.selected,"first button selected").to.be.true,e(s.selected,"second button selected").to.be.true}),it('will not change .selected state if event is prevented while [selects="multiple"]',async()=>{const t=await i(c`
+            `
+    );
+    await elementUpdated(el);
+    expect(el.selected.length).to.equal(2);
+    const firstButton = el.querySelector(".first");
+    expect(firstButton.selected, "first button selected").to.be.true;
+    const secondButton = el.querySelector(".second");
+    expect(secondButton.selected, "second button selected").to.be.true;
+    firstButton.click();
+    await elementUpdated(el);
+    expect(el.selected.length).to.equal(2);
+    expect(firstButton.selected, "first button selected").to.be.true;
+    expect(secondButton.selected, "second button selected").to.be.true;
+  });
+  it('will not change .selected state if event is prevented while [selects="multiple"]', async () => {
+    const el = await fixture(
+      html`
                 <sp-action-group
                     label="Selects Multiple Group"
                     selects="multiple"
-                    .selected=${["first","second"]}
-                    @change=${h=>{h.preventDefault()}}
+                    .selected=${["first", "second"]}
+                    @change=${(event) => {
+        event.preventDefault();
+      }}
                 >
                     <sp-action-button class="first" value="first">
                         First
@@ -264,12 +665,33 @@ import{elementUpdated as n,expect as e,fixture as i,html as c,waitUntil as d}fro
                         Third
                     </sp-action-button>
                 </sp-action-group>
-            `),o=t.querySelector(".first"),s=t.querySelector(".second"),l=t.querySelector(".third");await n(t),e(t.selected.length).to.equal(2),e(o.selected,"first child selected").to.be.true,e(s.selected,"second child selected").to.be.true,l.click(),await n(t),e(l.selected,"third child not selected").to.be.false,e(t.selected.length).to.equal(2),s.click(),await n(t),e(s.selected,"second element still selected").to.be.true}),it('will not change .selected state if event is prevented while [selects="single"]',async()=>{const t=await i(c`
+            `
+    );
+    const firstElement = el.querySelector(".first");
+    const secondElement = el.querySelector(".second");
+    const thirdElement = el.querySelector(".third");
+    await elementUpdated(el);
+    expect(el.selected.length).to.equal(2);
+    expect(firstElement.selected, "first child selected").to.be.true;
+    expect(secondElement.selected, "second child selected").to.be.true;
+    thirdElement.click();
+    await elementUpdated(el);
+    expect(thirdElement.selected, "third child not selected").to.be.false;
+    expect(el.selected.length).to.equal(2);
+    secondElement.click();
+    await elementUpdated(el);
+    expect(secondElement.selected, "second element still selected").to.be.true;
+  });
+  it('will not change .selected state if event is prevented while [selects="single"]', async () => {
+    const el = await fixture(
+      html`
                 <sp-action-group
                     label="Selects Single Group"
                     selects="single"
                     .selected=${["first"]}
-                    @change=${l=>{l.preventDefault()}}
+                    @change=${(event) => {
+        event.preventDefault();
+      }}
                 >
                     <sp-action-button class="first" value="first">
                         First
@@ -278,11 +700,30 @@ import{elementUpdated as n,expect as e,fixture as i,html as c,waitUntil as d}fro
                         Second
                     </sp-action-button>
                 </sp-action-group>
-            `),o=t.querySelector(".first"),s=t.querySelector(".second");await n(t),e(t.selected.length).to.equal(1),e(o.selected,"first child selected").to.be.true,s.click(),await n(t),e(s.selected,"second child not selected").to.be.false,e(t.selected.length).to.equal(1),o.click(),await n(t),e(o.selected,"first element still selected").to.be.true}),it("will not change .selected state if event is prevented while selects is undefined",async()=>{const t=await i(c`
+            `
+    );
+    const firstElement = el.querySelector(".first");
+    const secondElement = el.querySelector(".second");
+    await elementUpdated(el);
+    expect(el.selected.length).to.equal(1);
+    expect(firstElement.selected, "first child selected").to.be.true;
+    secondElement.click();
+    await elementUpdated(el);
+    expect(secondElement.selected, "second child not selected").to.be.false;
+    expect(el.selected.length).to.equal(1);
+    firstElement.click();
+    await elementUpdated(el);
+    expect(firstElement.selected, "first element still selected").to.be.true;
+  });
+  it("will not change .selected state if event is prevented while selects is undefined", async () => {
+    const el = await fixture(
+      html`
                 <sp-action-group
                     label="Selects Single Group"
                     .selected=${["first"]}
-                    @change=${l=>{l.preventDefault()}}
+                    @change=${(event) => {
+        event.preventDefault();
+      }}
                 >
                     <sp-action-button class="first" value="first">
                         First
@@ -291,7 +732,22 @@ import{elementUpdated as n,expect as e,fixture as i,html as c,waitUntil as d}fro
                         Second
                     </sp-action-button>
                 </sp-action-group>
-            `),o=t.querySelector(".first"),s=t.querySelector(".second");await n(t),e(t.selected.length).to.equal(1),e(o.selected,"first child selected").to.be.true,s.click(),await n(t),e(t.selected.length).to.equal(1),e(o.selected,"first child selected").to.be.true,e(s.selected,"second child not selected").to.be.false}),it("will accept selected as a JSON string",async()=>{const t=await i(c`
+            `
+    );
+    const firstElement = el.querySelector(".first");
+    const secondElement = el.querySelector(".second");
+    await elementUpdated(el);
+    expect(el.selected.length).to.equal(1);
+    expect(firstElement.selected, "first child selected").to.be.true;
+    secondElement.click();
+    await elementUpdated(el);
+    expect(el.selected.length).to.equal(1);
+    expect(firstElement.selected, "first child selected").to.be.true;
+    expect(secondElement.selected, "second child not selected").to.be.false;
+  });
+  it("will accept selected as a JSON string", async () => {
+    const el = await fixture(
+      html`
                 <sp-action-group
                     label="Selects Single Group"
                     selects="single"
@@ -304,13 +760,64 @@ import{elementUpdated as n,expect as e,fixture as i,html as c,waitUntil as d}fro
                         Second
                     </sp-action-button>
                 </sp-action-group>
-            `);await n(t);const o=t.querySelector(".first"),s=t.querySelector(".second");e(t.selected.length).to.equal(1),e(o.selected,"first child selected").to.be.true,e(s.selected,"second child selected").to.be.false});const a=async t=>{const o=t.querySelector(".third");await n(t),e(t.selected.length).to.equal(1),e(t.selected[0]).to.equal("Second"),o.click(),await n(t),e(o.selected,"third child selected").to.be.true,e(t.selected.length).to.equal(1),e(t.selected[0]).to.equal("Third"),t.dispatchEvent(b()),await u({press:"Enter"}),await n(t),e(t.selected.length).to.equal(1),e(t.selected[0]).to.equal("First"),t.dispatchEvent(w()),t.dispatchEvent(g()),await u({press:"Enter"}),e(t.selected.length).to.equal(1),e(t.selected[0]).to.equal("Second"),t.dispatchEvent(q()),await u({press:"Enter"}),e(t.selected.length).to.equal(1),e(t.selected[0]).to.equal("Third"),await u({press:"Enter"}),t.dispatchEvent(S()),await u({press:"Enter"}),e(t.selected.length).to.equal(1),e(t.selected[0]).to.equal("First"),t.dispatchEvent(f()),await u({press:"Enter"}),e(t.selected.length).to.equal(1),e(t.selected[0]).to.equal("Second")};it("accepts keybord input",async()=>{const t=await i(c`
+            `
+    );
+    await elementUpdated(el);
+    const firstElement = el.querySelector(".first");
+    const secondElement = el.querySelector(".second");
+    expect(el.selected.length).to.equal(1);
+    expect(firstElement.selected, "first child selected").to.be.true;
+    expect(secondElement.selected, "second child selected").to.be.false;
+  });
+  const acceptKeyboardInput = async (el) => {
+    const thirdElement = el.querySelector(".third");
+    await elementUpdated(el);
+    expect(el.selected.length).to.equal(1);
+    expect(el.selected[0]).to.equal("Second");
+    thirdElement.click();
+    await elementUpdated(el);
+    expect(thirdElement.selected, "third child selected").to.be.true;
+    expect(el.selected.length).to.equal(1);
+    expect(el.selected[0]).to.equal("Third");
+    el.dispatchEvent(arrowRightEvent());
+    await sendKeys({ press: "Enter" });
+    await elementUpdated(el);
+    expect(el.selected.length).to.equal(1);
+    expect(el.selected[0]).to.equal("First");
+    el.dispatchEvent(arrowLeftEvent());
+    el.dispatchEvent(arrowUpEvent());
+    await sendKeys({ press: "Enter" });
+    expect(el.selected.length).to.equal(1);
+    expect(el.selected[0]).to.equal("Second");
+    el.dispatchEvent(endEvent());
+    await sendKeys({ press: "Enter" });
+    expect(el.selected.length).to.equal(1);
+    expect(el.selected[0]).to.equal("Third");
+    await sendKeys({ press: "Enter" });
+    el.dispatchEvent(homeEvent());
+    await sendKeys({ press: "Enter" });
+    expect(el.selected.length).to.equal(1);
+    expect(el.selected[0]).to.equal("First");
+    el.dispatchEvent(arrowDownEvent());
+    await sendKeys({ press: "Enter" });
+    expect(el.selected.length).to.equal(1);
+    expect(el.selected[0]).to.equal("Second");
+  };
+  it("accepts keybord input", async () => {
+    const el = await fixture(
+      html`
                 <sp-action-group label="Selects Single Group" selects="single">
                     <sp-action-button>First</sp-action-button>
                     <sp-action-button selected>Second</sp-action-button>
                     <sp-action-button class="third">Third</sp-action-button>
                 </sp-action-group>
-            `);await a(t)}),it("accepts keybord input with tooltip",async()=>{const t=await i(c`
+            `
+    );
+    await acceptKeyboardInput(el);
+  });
+  it("accepts keybord input with tooltip", async () => {
+    const el = await fixture(
+      html`
                 <sp-action-group label="Selects Single Group" selects="single">
                     <overlay-trigger>
                         <sp-action-button slot="trigger">
@@ -335,7 +842,13 @@ import{elementUpdated as n,expect as e,fixture as i,html as c,waitUntil as d}fro
                         <sp-tooltip slot="hover-content">Select me.</sp-tooltip>
                     </overlay-trigger>
                 </sp-action-group>
-            `);await a(t)}),it('accepts keybord input when [dir="ltr"]',async()=>{const t=await i(c`
+            `
+    );
+    await acceptKeyboardInput(el);
+  });
+  it('accepts keybord input when [dir="ltr"]', async () => {
+    const el = await fixture(
+      html`
                 <sp-action-group
                     label="Selects Single Group"
                     selects="single"
@@ -345,5 +858,25 @@ import{elementUpdated as n,expect as e,fixture as i,html as c,waitUntil as d}fro
                     <sp-action-button disabled>Second</sp-action-button>
                     <sp-action-button class="third">Third</sp-action-button>
                 </sp-action-group>
-            `),o=t.querySelector(".third");await n(t),e(t.selected.length).to.equal(0),o.click(),await n(t),e(o.selected,"third child selected").to.be.true,e(t.selected.length).to.equal(1),e(t.selected[0]).to.equal("Third"),t.dispatchEvent(b()),await u({press:"Enter"}),await n(t),e(t.selected.length).to.equal(1),e(t.selected[0]).to.equal("First"),t.dispatchEvent(g()),await u({press:"Enter"}),e(t.selected.length).to.equal(1),e(t.selected[0]).to.equal("Third")})});
+            `
+    );
+    const thirdElement = el.querySelector(".third");
+    await elementUpdated(el);
+    expect(el.selected.length).to.equal(0);
+    thirdElement.click();
+    await elementUpdated(el);
+    expect(thirdElement.selected, "third child selected").to.be.true;
+    expect(el.selected.length).to.equal(1);
+    expect(el.selected[0]).to.equal("Third");
+    el.dispatchEvent(arrowRightEvent());
+    await sendKeys({ press: "Enter" });
+    await elementUpdated(el);
+    expect(el.selected.length).to.equal(1);
+    expect(el.selected[0]).to.equal("First");
+    el.dispatchEvent(arrowUpEvent());
+    await sendKeys({ press: "Enter" });
+    expect(el.selected.length).to.equal(1);
+    expect(el.selected[0]).to.equal("Third");
+  });
+});
 //# sourceMappingURL=action-group.test.js.map