@spectrum-web-components/tabs 0.8.16-devmode.0 → 0.9.0

package/test/tabs-vertical-sizes.test-vrt.js

@@ -1,4 +1,2 @@
-import * as stories from "../stories/tabs-vertical-sizes.stories.js";
-import { regressVisuals } from "../../../test/visual/test.js";
-regressVisuals("TabsVerticalSizesStories", stories);
+import*as s from"../stories/tabs-vertical-sizes.stories.js";import{regressVisuals as r}from"../../../test/visual/test.js";r("TabsVerticalSizesStories",s);
 //# sourceMappingURL=tabs-vertical-sizes.test-vrt.js.map

package/test/tabs-vertical-sizes.test-vrt.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["tabs-vertical-sizes.test-vrt.ts"],
   "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport * as stories from '../stories/tabs-vertical-sizes.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\n\nregressVisuals('TabsVerticalSizesStories', stories);\n"],
-  "mappings": "AAYA;AACA;AAEA,eAAe,4BAA4B,OAAO;",
+  "mappings": "AAYA,4DACA,8DAEA,EAAe,2BAA4B,CAAO",
   "names": []
 }

package/test/tabs.test-vrt.js

@@ -1,4 +1,2 @@
-import * as stories from "../stories/tabs.stories.js";
-import { regressVisuals } from "../../../test/visual/test.js";
-regressVisuals("TabsStories", stories);
+import*as s from"../stories/tabs.stories.js";import{regressVisuals as r}from"../../../test/visual/test.js";r("TabsStories",s);
 //# sourceMappingURL=tabs.test-vrt.js.map

package/test/tabs.test-vrt.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["tabs.test-vrt.ts"],
   "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport * as stories from '../stories/tabs.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\n\nregressVisuals('TabsStories', stories);\n"],
-  "mappings": "AAYA;AACA;AAEA,eAAe,eAAe,OAAO;",
+  "mappings": "AAYA,6CACA,8DAEA,EAAe,cAAe,CAAO",
   "names": []
 }

package/test/tabs.test.js

@@ -1,28 +1,4 @@
-import "@spectrum-web-components/tabs/sp-tabs.js";
-import "@spectrum-web-components/tabs/sp-tab.js";
-import "@spectrum-web-components/tabs/sp-tab-panel.js";
-import { Tab } from "@spectrum-web-components/tabs";
-import "@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark.js";
-import {
-  elementUpdated,
-  expect,
-  fixture,
-  oneEvent,
-  waitUntil
-} from "@open-wc/testing";
-import { html } from "lit/static-html.js";
-import { LitElement } from "@spectrum-web-components/base";
-import {
-  arrowDownEvent,
-  arrowLeftEvent,
-  arrowRightEvent,
-  arrowUpEvent,
-  enterEvent,
-  spaceEvent
-} from "../../../test/testing-helpers.js";
-import { sendKeys } from "@web/test-runner-commands";
-const createTabs = async () => {
-  const tabs = await fixture(html`
+import"@spectrum-web-components/tabs/sp-tabs.js";import"@spectrum-web-components/tabs/sp-tab.js";import"@spectrum-web-components/tabs/sp-tab-panel.js";import{Tab as u}from"@spectrum-web-components/tabs";import"@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark.js";import{elementUpdated as s,expect as t,fixture as b,oneEvent as y,waitUntil as E}from"@open-wc/testing";import{html as o}from"lit/static-html.js";import{LitElement as S}from"@spectrum-web-components/base";import{arrowDownEvent as g,arrowLeftEvent as f,arrowRightEvent as m,arrowUpEvent as w,enterEvent as v,spaceEvent as T}from"../../../test/testing-helpers.js";import{sendKeys as h}from"@web/test-runner-commands";const d=async()=>{const e=await b(o`
             <sp-tabs selected="first">
                 <sp-tab label="Tab 1" value="first"></sp-tab>
                 <sp-tab label="Tab 2" value="second"></sp-tab>
@@ -31,254 +7,47 @@ const createTabs = async () => {
                 <sp-tab-panel value="second">Second tab content</sp-tab-panel>
                 <sp-tab-panel value="third">Third tab content</sp-tab-panel>
             </sp-tabs>
-        `);
-  await elementUpdated(tabs);
-  return tabs;
-};
-describe("Tabs", () => {
-  it("loads accessibly", async () => {
-    const tabs = await createTabs();
-    const tabList = tabs.querySelectorAll("sp-tab");
-    expect(tabList).to.exist;
-    expect(tabList.length).to.equal(3);
-    await expect(tabs).to.be.accessible();
-  });
-  it("loads accessibly w/o panels", async () => {
-    const tabs = await fixture(html`
+        `);return await s(e),e};describe("Tabs",()=>{it("loads accessibly",async()=>{const e=await d(),a=e.querySelectorAll("sp-tab");t(a).to.exist,t(a.length).to.equal(3),await t(e).to.be.accessible()}),it("loads accessibly w/o panels",async()=>{const e=await b(o`
                 <sp-tabs selected="first">
                     <sp-tab value="first">Tab 1</sp-tab>
                     <sp-tab value="second">Tab 2</sp-tab>
                     <sp-tab value="third">Tab 3</sp-tab>
                 </sp-tabs>
-            `);
-    const tabList = tabs.querySelectorAll("sp-tab");
-    expect(tabList).to.exist;
-    expect(tabList.length).to.equal(3);
-    await expect(tabs).to.be.accessible();
-  });
-  it("can be disabled", async () => {
-    const tabs = await createTabs();
-    const tab = tabs.querySelector('[label="Tab 3"]');
-    tabs.disabled = true;
-    await elementUpdated(tabs);
-    expect(tabs.selected).to.equal("first");
-    tab.click();
-    await elementUpdated(tabs);
-    expect(tabs.selected).to.equal("first");
-  });
-  it("can have disabled sp-tab children", async () => {
-    const tabs = await createTabs();
-    const tab2 = tabs.querySelector('[label="Tab 2"]');
-    const tab3 = tabs.querySelector('[label="Tab 3"]');
-    tab3.disabled = true;
-    await elementUpdated(tab3);
-    expect(tabs.selected).to.equal("first");
-    tab3.click();
-    await elementUpdated(tabs);
-    expect(tabs.selected).to.equal("first");
-    tab2.click();
-    await elementUpdated(tabs);
-    expect(tabs.selected).to.equal("second");
-  });
-  it("reflects selected tab with selected property", async () => {
-    const tabs = await createTabs();
-    const firstTab = tabs.querySelector("sp-tab[value=first]");
-    const secondTab = tabs.querySelector("sp-tab[value=second]");
-    const thirdTab = tabs.querySelector("sp-tab[value=third]");
-    const firstPanel = tabs.querySelector("sp-tab-panel[value=first]");
-    const secondPanel = tabs.querySelector("sp-tab-panel[value=second]");
-    const thirdPanel = tabs.querySelector("sp-tab-panel[value=third]");
-    expect(firstTab.selected, "first: 1, selected").to.be.true;
-    expect(firstPanel.selected, "first panel: 1, selected").to.be.true;
-    expect(secondTab.selected, "second: 1, not selected").to.be.false;
-    expect(secondPanel.selected, "second panel: 1, not selected").to.be.false;
-    expect(thirdTab.selected, "third: 1, not selected").to.be.false;
-    expect(thirdPanel.selected, "third panel: 1, not selected").to.be.false;
-    expect(tabs.selected).to.equal(firstTab.value);
-    secondTab.click();
-    await elementUpdated(tabs);
-    expect(firstTab.selected, "first: 2, not selected").to.be.false;
-    expect(firstPanel.selected, "first panel: 2, not selected").to.be.false;
-    expect(secondTab.selected, "second: 2, selected").to.be.true;
-    expect(secondTab.selected, "first panel: 2, selected").to.be.true;
-    expect(thirdTab.selected, "third: 2, not selected").to.be.false;
-    expect(thirdTab.selected, "first panel: 2, not selected").to.be.false;
-    expect(tabs.selected).to.equal(secondTab.value);
-    thirdTab.click();
-    await elementUpdated(tabs);
-    expect(firstTab.selected, "first: 3, not selected").to.be.false;
-    expect(firstPanel.selected, "first panel: 3, not selected").to.be.false;
-    expect(secondTab.selected, "second: 3, not selected").to.be.false;
-    expect(secondPanel.selected, "second panel: 3, not selected").to.be.false;
-    expect(thirdTab.selected, "third: 3, selected").to.be.true;
-    expect(thirdTab.selected, "first panel: 3, selected").to.be.true;
-    expect(tabs.selected).to.equal(thirdTab.value);
-  });
-  it("autofocuses", async () => {
-    const tabs = await fixture(html`
+            `),a=e.querySelectorAll("sp-tab");t(a).to.exist,t(a.length).to.equal(3),await t(e).to.be.accessible()}),it("can be disabled",async()=>{const e=await d(),a=e.querySelector('[label="Tab 3"]');e.disabled=!0,await s(e),t(e.selected).to.equal("first"),a.click(),await s(e),t(e.selected).to.equal("first")}),it("can have disabled sp-tab children",async()=>{const e=await d(),a=e.querySelector('[label="Tab 2"]'),c=e.querySelector('[label="Tab 3"]');c.disabled=!0,await s(c),t(e.selected).to.equal("first"),c.click(),await s(e),t(e.selected).to.equal("first"),a.click(),await s(e),t(e.selected).to.equal("second")}),it("reflects selected tab with selected property",async()=>{const e=await d(),a=e.querySelector("sp-tab[value=first]"),c=e.querySelector("sp-tab[value=second]"),l=e.querySelector("sp-tab[value=third]"),n=e.querySelector("sp-tab-panel[value=first]"),i=e.querySelector("sp-tab-panel[value=second]"),r=e.querySelector("sp-tab-panel[value=third]");t(a.selected,"first: 1, selected").to.be.true,t(n.selected,"first panel: 1, selected").to.be.true,t(c.selected,"second: 1, not selected").to.be.false,t(i.selected,"second panel: 1, not selected").to.be.false,t(l.selected,"third: 1, not selected").to.be.false,t(r.selected,"third panel: 1, not selected").to.be.false,t(e.selected).to.equal(a.value),c.click(),await s(e),t(a.selected,"first: 2, not selected").to.be.false,t(n.selected,"first panel: 2, not selected").to.be.false,t(c.selected,"second: 2, selected").to.be.true,t(c.selected,"first panel: 2, selected").to.be.true,t(l.selected,"third: 2, not selected").to.be.false,t(l.selected,"first panel: 2, not selected").to.be.false,t(e.selected).to.equal(c.value),l.click(),await s(e),t(a.selected,"first: 3, not selected").to.be.false,t(n.selected,"first panel: 3, not selected").to.be.false,t(c.selected,"second: 3, not selected").to.be.false,t(i.selected,"second panel: 3, not selected").to.be.false,t(l.selected,"third: 3, selected").to.be.true,t(l.selected,"first panel: 3, selected").to.be.true,t(e.selected).to.equal(l.value)}),it("autofocuses",async()=>{const e=await b(o`
                 <sp-tabs selected="second" autofocus>
                     <sp-tab label="Tab 1" value="first"></sp-tab>
                     <sp-tab label="Tab 2" value="second"></sp-tab>
                     <sp-tab label="Tab 3" value="third"></sp-tab>
                 </sp-tabs>
-            `);
-    await elementUpdated(tabs);
-    const autoElement = tabs.querySelector('[label="Tab 2"]');
-    await waitUntil(() => document.activeElement === autoElement, "Autofocused");
-  });
-  it("auto", async () => {
-    const el = await fixture(html`
+            `);await s(e);const a=e.querySelector('[label="Tab 2"]');await E(()=>document.activeElement===a,"Autofocused")}),it("auto",async()=>{const e=await b(o`
                 <sp-tabs selected="second" auto>
                     <sp-tab label="Tab 1" value="first"></sp-tab>
                     <sp-tab label="Tab 2" value="second"></sp-tab>
                     <sp-tab label="Tab 3" value="third"></sp-tab>
                 </sp-tabs>
-            `);
-    await elementUpdated(el);
-    expect(el.selected).to.equal("second");
-    el.focus();
-    await sendKeys({
-      press: "ArrowLeft"
-    });
-    expect(el.selected).to.equal("first");
-    await sendKeys({
-      press: "ArrowLeft"
-    });
-    expect(el.selected).to.equal("third");
-    await sendKeys({
-      press: "ArrowRight"
-    });
-    expect(el.selected).to.equal("first");
-  });
-  it("forces only one tab to be selected", async () => {
-    const tabs = await createTabs();
-    const selectedTabs = tabs.querySelectorAll("sp-tab[selected]");
-    expect(tabs.selected).to.equal("first");
-    expect(selectedTabs.length).to.equal(1);
-  });
-  it("de-selects all but first selected tab if multiple selected", async () => {
-    const tabs = await createTabs();
-    const tab1 = tabs.querySelector("sp-tab[value=first]");
-    const tab2 = tabs.querySelector("sp-tab[value=second]");
-    if (!(tab1 instanceof Tab))
-      throw new Error("tab1 not of type Tab");
-    if (!(tab2 instanceof Tab))
-      throw new Error("tab2 not of type Tab");
-    expect(tabs.selected).to.equal("first");
-    expect(tab1.selected).to.be.true;
-    expect(tab2.selected).to.be.false;
-  });
-  it("ensures setting selection updates selected tab", async () => {
-    const tabs = await createTabs();
-    const tab1 = tabs.querySelector("sp-tab[value=first]");
-    const tab2 = tabs.querySelector("sp-tab[value=second]");
-    const tab3 = tabs.querySelector("sp-tab[value=third]");
-    if (!(tab1 instanceof Tab))
-      throw new Error("tab1 not of type Tab");
-    if (!(tab2 instanceof Tab))
-      throw new Error("tab2 not of type Tab");
-    if (!(tab3 instanceof Tab))
-      throw new Error("tab3 not of type Tab");
-    expect(tabs.selected).to.equal("first");
-    expect(tab1.selected, "first: 1, selected").to.be.true;
-    expect(tab2.selected, "second: 1, not selected").to.be.false;
-    expect(tab3.selected, "thurd: 1, not selected").to.be.false;
-    tabs.selected = "second";
-    await elementUpdated(tabs);
-    expect(tabs.selected).to.equal("second");
-    expect(tab1.selected, "first: 2, not selected").to.be.false;
-    expect(tab2.selected, "second: 2, selected").to.be.true;
-    expect(tab3.selected, "third: 2, not selected").to.be.false;
-    tabs.selected = "third";
-    await elementUpdated(tabs);
-    expect(tabs.selected).to.equal("third");
-    expect(tab1.selected, "first: 3, not selected").to.be.false;
-    expect(tab2.selected, "second: 3, not selected").to.be.false;
-    expect(tab3.selected, "third: 3, selected").to.be.true;
-  });
-  it("ensures setting selected and clicking on tab both work together", async () => {
-    const tabs = await createTabs();
-    const tab1 = tabs.querySelector("sp-tab[value=first]");
-    const tab2 = tabs.querySelector("sp-tab[value=second]");
-    const tab3 = tabs.querySelector("sp-tab[value=third]");
-    if (!(tab1 instanceof Tab))
-      throw new Error("tab1 not of type Tab");
-    if (!(tab2 instanceof Tab))
-      throw new Error("tab2 not of type Tab");
-    if (!(tab3 instanceof Tab))
-      throw new Error("tab3 not of type Tab");
-    tab2.click();
-    await elementUpdated(tabs);
-    expect(tabs.selected).to.equal("second");
-    expect(tab1.selected).to.be.false;
-    expect(tab2.selected).to.be.true;
-    expect(tab3.selected).to.be.false;
-    tabs.selected = "first";
-    await elementUpdated(tabs);
-    expect(tabs.selected).to.equal("first");
-    expect(tab1.selected).to.be.true;
-    expect(tab2.selected).to.be.false;
-    expect(tab3.selected).to.be.false;
-  });
-  it("displays `vertical`", async () => {
-    const el = await fixture(html`
+            `);await s(e),t(e.selected).to.equal("second"),e.focus(),await h({press:"ArrowLeft"}),t(e.selected).to.equal("first"),await h({press:"ArrowLeft"}),t(e.selected).to.equal("third"),await h({press:"ArrowRight"}),t(e.selected).to.equal("first")}),it("forces only one tab to be selected",async()=>{const e=await d(),a=e.querySelectorAll("sp-tab[selected]");t(e.selected).to.equal("first"),t(a.length).to.equal(1)}),it("de-selects all but first selected tab if multiple selected",async()=>{const e=await d(),a=e.querySelector("sp-tab[value=first]"),c=e.querySelector("sp-tab[value=second]");if(!(a instanceof u))throw new Error("tab1 not of type Tab");if(!(c instanceof u))throw new Error("tab2 not of type Tab");t(e.selected).to.equal("first"),t(a.selected).to.be.true,t(c.selected).to.be.false}),it("ensures setting selection updates selected tab",async()=>{const e=await d(),a=e.querySelector("sp-tab[value=first]"),c=e.querySelector("sp-tab[value=second]"),l=e.querySelector("sp-tab[value=third]");if(!(a instanceof u))throw new Error("tab1 not of type Tab");if(!(c instanceof u))throw new Error("tab2 not of type Tab");if(!(l instanceof u))throw new Error("tab3 not of type Tab");t(e.selected).to.equal("first"),t(a.selected,"first: 1, selected").to.be.true,t(c.selected,"second: 1, not selected").to.be.false,t(l.selected,"thurd: 1, not selected").to.be.false,e.selected="second",await s(e),t(e.selected).to.equal("second"),t(a.selected,"first: 2, not selected").to.be.false,t(c.selected,"second: 2, selected").to.be.true,t(l.selected,"third: 2, not selected").to.be.false,e.selected="third",await s(e),t(e.selected).to.equal("third"),t(a.selected,"first: 3, not selected").to.be.false,t(c.selected,"second: 3, not selected").to.be.false,t(l.selected,"third: 3, selected").to.be.true}),it("ensures setting selected and clicking on tab both work together",async()=>{const e=await d(),a=e.querySelector("sp-tab[value=first]"),c=e.querySelector("sp-tab[value=second]"),l=e.querySelector("sp-tab[value=third]");if(!(a instanceof u))throw new Error("tab1 not of type Tab");if(!(c instanceof u))throw new Error("tab2 not of type Tab");if(!(l instanceof u))throw new Error("tab3 not of type Tab");c.click(),await s(e),t(e.selected).to.equal("second"),t(a.selected).to.be.false,t(c.selected).to.be.true,t(l.selected).to.be.false,e.selected="first",await s(e),t(e.selected).to.equal("first"),t(a.selected).to.be.true,t(c.selected).to.be.false,t(l.selected).to.be.false}),it("displays `vertical`",async()=>{const e=await b(o`
             <sp-tabs selected="first" direction="vertical">
                 <sp-tab label="Tab 1" value="first"></sp-tab>
                 <sp-tab label="Tab 2" value="second"></sp-tab>
                 <sp-tab label="Tab 3" value="third"></sp-tab>
             </sp-tabs>
-        `);
-    await elementUpdated(el);
-    expect(el.selected).to.be.equal("first");
-    el.selected = "first";
-    await elementUpdated(el);
-    expect(el.selected).to.be.equal("first");
-  });
-  it("displays with nothing `selected`", async () => {
-    const el = await fixture(html`
+        `);await s(e),t(e.selected).to.be.equal("first"),e.selected="first",await s(e),t(e.selected).to.be.equal("first")}),it("displays with nothing `selected`",async()=>{const e=await b(o`
             <sp-tabs>
                 <sp-tab label="Tab 1" value="first"></sp-tab>
                 <sp-tab label="Tab 2" value="second"></sp-tab>
                 <sp-tab label="Tab 3" value="third"></sp-tab>
             </sp-tabs>
-        `);
-    await elementUpdated(el);
-    expect(el.selected).to.be.equal("");
-    el.selected = "first";
-    await elementUpdated(el);
-    expect(el.selected).to.be.equal("first");
-  });
-  it("ignores children with no `value`", async () => {
-    const el = await fixture(html`
+        `);await s(e),t(e.selected).to.be.equal(""),e.selected="first",await s(e),t(e.selected).to.be.equal("first")}),it("ignores children with no `value`",async()=>{const e=await b(o`
             <sp-tabs selected="first">
                 <sp-tab label="Tab 1" value="first"></sp-tab>
                 <div id="other">Other thing</div>
             </sp-tabs>
-        `);
-    await elementUpdated(el);
-    expect(el.selected).to.be.equal("first");
-    const otherThing = el.querySelector("#other");
-    otherThing.click();
-    await elementUpdated(el);
-    expect(el.selected).to.be.equal("first");
-  });
-  it("allows selection to be cancellable", async () => {
-    const cancelSelection = (event) => event.preventDefault();
-    const el = await fixture(html`
-            <sp-tabs selected="first" @change=${cancelSelection}>
+        `);await s(e),t(e.selected).to.be.equal("first"),e.querySelector("#other").click(),await s(e),t(e.selected).to.be.equal("first")}),it("allows selection to be cancellable",async()=>{const a=await b(o`
+            <sp-tabs selected="first" @change=${l=>l.preventDefault()}>
                 <sp-tab label="Tab 1" value="first"></sp-tab>
                 <sp-tab label="Tab 2" value="second"></sp-tab>
             </sp-tabs>
-        `);
-    await elementUpdated(el);
-    expect(el.selected).to.be.equal("first");
-    const secondTab = el.querySelector('[value="second"]');
-    secondTab.click();
-    await elementUpdated(el);
-    expect(el.selected).to.be.equal("first");
-  });
-  it("prevents [tabindex=0] while `focusin`", async () => {
-    const el = await fixture(html`
+        `);await s(a),t(a.selected).to.be.equal("first"),a.querySelector('[value="second"]').click(),await s(a),t(a.selected).to.be.equal("first")}),it("prevents [tabindex=0] while `focusin`",async()=>{const e=await b(o`
             <sp-tabs>
                 <sp-tab label="Tab 1" value="first" selected>
                     <sp-icon-checkmark slot="icon"></sp-icon-checkmark>
@@ -287,28 +56,7 @@ describe("Tabs", () => {
                     <sp-icon-checkmark slot="icon"></sp-icon-checkmark>
                 </sp-tab>
             </sp-tabs>
-        `);
-    const selected = el.querySelector('[value="first"]');
-    const toBeSelected = el.querySelector('[value="second"]');
-    await elementUpdated(el);
-    await waitUntil(() => el.selected === "first", "wait for selection");
-    expect(el.selected).to.equal("first");
-    expect(selected.tabIndex).to.equal(0);
-    toBeSelected.dispatchEvent(new Event("focusin", { bubbles: true }));
-    await elementUpdated(el);
-    expect(el.selected).to.equal("first");
-    expect(selected.tabIndex).to.equal(-1);
-    toBeSelected.dispatchEvent(new Event("focusout", { bubbles: true }));
-    await elementUpdated(el);
-    expect(el.selected).to.equal("first");
-    expect(selected.tabIndex).to.equal(0);
-    toBeSelected.click();
-    await elementUpdated(el);
-    expect(el.selected).to.equal("second");
-    expect(toBeSelected.tabIndex).to.equal(0);
-  });
-  it("accepts keyboard based selection", async () => {
-    const el = await fixture(html`
+        `),a=e.querySelector('[value="first"]'),c=e.querySelector('[value="second"]');await s(e),await E(()=>e.selected==="first","wait for selection"),t(e.selected).to.equal("first"),t(a.tabIndex).to.equal(0),c.dispatchEvent(new Event("focusin",{bubbles:!0})),await s(e),t(e.selected).to.equal("first"),t(a.tabIndex).to.equal(-1),c.dispatchEvent(new Event("focusout",{bubbles:!0})),await s(e),t(e.selected).to.equal("first"),t(a.tabIndex).to.equal(0),c.click(),await s(e),t(e.selected).to.equal("second"),t(c.tabIndex).to.equal(0)}),it("accepts keyboard based selection",async()=>{const e=await b(o`
             <sp-tabs selected="Unknown">
                 <sp-tab label="Tab 1" value="first">
                     <sp-icon-checkmark slot="icon"></sp-icon-checkmark>
@@ -317,33 +65,7 @@ describe("Tabs", () => {
                     <sp-icon-checkmark slot="icon"></sp-icon-checkmark>
                 </sp-tab>
             </sp-tabs>
-        `);
-    await elementUpdated(el);
-    expect(el.selected).to.be.equal("");
-    const firstTab = el.querySelector('[value="first"]');
-    const secondTab = el.querySelector('[value="second"]');
-    firstTab.dispatchEvent(new FocusEvent("focusin", { bubbles: true }));
-    firstTab.focus();
-    await elementUpdated(el);
-    expect(document.activeElement === firstTab, "Focus first tab").to.be.true;
-    firstTab.dispatchEvent(arrowLeftEvent());
-    firstTab.dispatchEvent(arrowUpEvent());
-    await elementUpdated(el);
-    expect(document.activeElement === secondTab, "Focus second tab").to.be.true;
-    secondTab.dispatchEvent(enterEvent());
-    await elementUpdated(el);
-    expect(el.selected).to.be.equal("second");
-    secondTab.dispatchEvent(arrowRightEvent());
-    await elementUpdated(el);
-    expect(document.activeElement === firstTab, "Focus first tab").to.be.true;
-    firstTab.dispatchEvent(spaceEvent());
-    await elementUpdated(el);
-    expect(el.selected).to.be.equal("first");
-  });
-  it("accepts keyboard based selection through shadow DOM", async () => {
-    class TabTestEl extends LitElement {
-      render() {
-        return html`
+        `);await s(e),t(e.selected).to.be.equal("");const a=e.querySelector('[value="first"]'),c=e.querySelector('[value="second"]');a.dispatchEvent(new FocusEvent("focusin",{bubbles:!0})),a.focus(),await s(e),t(document.activeElement===a,"Focus first tab").to.be.true,a.dispatchEvent(f()),a.dispatchEvent(w()),await s(e),t(document.activeElement===c,"Focus second tab").to.be.true,c.dispatchEvent(v()),await s(e),t(e.selected).to.be.equal("second"),c.dispatchEvent(m()),await s(e),t(document.activeElement===a,"Focus first tab").to.be.true,a.dispatchEvent(T()),await s(e),t(e.selected).to.be.equal("first")}),it("accepts keyboard based selection through shadow DOM",async()=>{class e extends S{render(){return o`
                     <sp-tabs selected="Unknown">
                         <sp-tab label="Tab 1" value="first">
                             <sp-icon-checkmark slot="icon"></sp-icon-checkmark>
@@ -352,43 +74,9 @@ describe("Tabs", () => {
                             <sp-icon-checkmark slot="icon"></sp-icon-checkmark>
                         </sp-tab>
                     </sp-tabs>
-                `;
-      }
-    }
-    customElements.define("tab-test-el", TabTestEl);
-    const el = await fixture(html`
+                `}}customElements.define("tab-test-el",e);const a=await b(o`
                 <tab-test-el></tab-test-el>
-            `);
-    await elementUpdated(el);
-    const rootNode = el.shadowRoot;
-    const tabsEl = rootNode.querySelector("sp-tabs");
-    await elementUpdated(tabsEl);
-    expect(tabsEl.selected).to.be.equal("");
-    const firstTab = tabsEl.querySelector('[value="first"]');
-    const secondTab = tabsEl.querySelector('[value="second"]');
-    firstTab.dispatchEvent(new FocusEvent("focusin", { bubbles: true }));
-    firstTab.focus();
-    await elementUpdated(el);
-    let activeElement = rootNode.activeElement;
-    expect(activeElement === firstTab, "Focus first tab").to.be.true;
-    firstTab.dispatchEvent(arrowLeftEvent());
-    firstTab.dispatchEvent(arrowUpEvent());
-    await elementUpdated(el);
-    activeElement = rootNode.activeElement;
-    expect(activeElement === secondTab, "Focus second tab").to.be.true;
-    secondTab.dispatchEvent(enterEvent());
-    await elementUpdated(el);
-    expect(tabsEl.selected).to.be.equal("second");
-    secondTab.dispatchEvent(arrowRightEvent());
-    await elementUpdated(el);
-    activeElement = rootNode.activeElement;
-    expect(activeElement === firstTab, "Focus first tab").to.be.true;
-    firstTab.dispatchEvent(spaceEvent());
-    await elementUpdated(el);
-    expect(tabsEl.selected).to.be.equal("first");
-  });
-  it('accepts keyboard based selection - [direction="vertical"]', async () => {
-    const el = await fixture(html`
+            `);await s(a);const c=a.shadowRoot,l=c.querySelector("sp-tabs");await s(l),t(l.selected).to.be.equal("");const n=l.querySelector('[value="first"]'),i=l.querySelector('[value="second"]');n.dispatchEvent(new FocusEvent("focusin",{bubbles:!0})),n.focus(),await s(a);let r=c.activeElement;t(r===n,"Focus first tab").to.be.true,n.dispatchEvent(f()),n.dispatchEvent(w()),await s(a),r=c.activeElement,t(r===i,"Focus second tab").to.be.true,i.dispatchEvent(v()),await s(a),t(l.selected).to.be.equal("second"),i.dispatchEvent(m()),await s(a),r=c.activeElement,t(r===n,"Focus first tab").to.be.true,n.dispatchEvent(T()),await s(a),t(l.selected).to.be.equal("first")}),it('accepts keyboard based selection - [direction="vertical"]',async()=>{const e=await b(o`
             <sp-tabs selected="Unknown" direction="vertical">
                 <sp-tab label="Tab 1" value="first">
                     <sp-icon-checkmark slot="icon"></sp-icon-checkmark>
@@ -397,82 +85,15 @@ describe("Tabs", () => {
                     <sp-icon-checkmark slot="icon"></sp-icon-checkmark>
                 </sp-tab>
             </sp-tabs>
-        `);
-    await elementUpdated(el);
-    expect(el.selected).to.be.equal("");
-    const firstTab = el.querySelector('[value="first"]');
-    const secondTab = el.querySelector('[value="second"]');
-    firstTab.dispatchEvent(new FocusEvent("focusin", { bubbles: true }));
-    firstTab.focus();
-    await elementUpdated(el);
-    expect(document.activeElement === firstTab, "Focus first tab").to.be.true;
-    firstTab.dispatchEvent(arrowLeftEvent());
-    firstTab.dispatchEvent(arrowUpEvent());
-    await elementUpdated(el);
-    expect(document.activeElement === secondTab, "Focus second tab").to.be.true;
-    secondTab.dispatchEvent(enterEvent());
-    await elementUpdated(el);
-    expect(el.selected).to.be.equal("second");
-    secondTab.dispatchEvent(arrowDownEvent());
-    await elementUpdated(el);
-    expect(document.activeElement === firstTab, "Focus first tab").to.be.true;
-    firstTab.dispatchEvent(spaceEvent());
-    await elementUpdated(el);
-    expect(el.selected).to.be.equal("first");
-  });
-  it("selects through slotted DOM", async () => {
-    const el = await fixture(html`
+        `);await s(e),t(e.selected).to.be.equal("");const a=e.querySelector('[value="first"]'),c=e.querySelector('[value="second"]');a.dispatchEvent(new FocusEvent("focusin",{bubbles:!0})),a.focus(),await s(e),t(document.activeElement===a,"Focus first tab").to.be.true,a.dispatchEvent(f()),a.dispatchEvent(w()),await s(e),t(document.activeElement===c,"Focus second tab").to.be.true,c.dispatchEvent(v()),await s(e),t(e.selected).to.be.equal("second"),c.dispatchEvent(g()),await s(e),t(document.activeElement===a,"Focus first tab").to.be.true,a.dispatchEvent(T()),await s(e),t(e.selected).to.be.equal("first")}),it("selects through slotted DOM",async()=>{const e=await b(o`
                 <sp-tabs selected="first">
                     <sp-tab value="first">Tab 1</sp-tab>
                     <sp-tab value="second"><span>Tab 2</span></sp-tab>
                 </sp-tabs>
-            `);
-    const span = el.querySelector("span");
-    await elementUpdated(el);
-    expect(el.selected).to.equal("first");
-    span.click();
-    await elementUpdated(el);
-    expect(el.selected).to.equal("second");
-  });
-  it("updates selection indicator in response to tab updates", async () => {
-    const el = await fixture(html`
+            `),a=e.querySelector("span");await s(e),t(e.selected).to.equal("first"),a.click(),await s(e),t(e.selected).to.equal("second")}),it("updates selection indicator in response to tab updates",async()=>{const e=await b(o`
                 <sp-tabs selected="first">
                     <sp-tab value="first">Tab 1</sp-tab>
                     <sp-tab value="second">Tab 2</sp-tab>
                 </sp-tabs>
-            `);
-    const selected = el.querySelector('[value="first"]');
-    await elementUpdated(el);
-    const extractScaleX = /scaleX\((.+)\)/;
-    const initialExec = extractScaleX.exec(el.selectionIndicatorStyle);
-    const initialWidth = parseFloat(initialExec[1]);
-    let contentchanged = oneEvent(el, "sp-tab-contentchange");
-    selected.textContent = "WWWWWWWWWWWWWWWWWWWWWWWWW";
-    await contentchanged;
-    await elementUpdated(el);
-    const longerExec = extractScaleX.exec(el.selectionIndicatorStyle);
-    const longerWidth = parseFloat(longerExec[1]);
-    expect(initialWidth).to.be.lessThan(longerWidth);
-    contentchanged = oneEvent(el, "sp-tab-contentchange");
-    selected.textContent = "W";
-    await contentchanged;
-    await elementUpdated(el);
-    const shorterExec = extractScaleX.exec(el.selectionIndicatorStyle);
-    const shorterWidth = parseFloat(shorterExec[1]);
-    expect(initialWidth).to.be.greaterThan(shorterWidth);
-    expect(longerWidth).to.be.greaterThan(shorterWidth);
-  });
-  it("clicks on #list do not throw", async () => {
-    const tabs = await createTabs();
-    const tabList = tabs.shadowRoot.querySelector("#list");
-    let hasError = false;
-    const oldOnerror = window.onerror;
-    window.onerror = () => {
-      hasError = true;
-    };
-    tabList.dispatchEvent(new MouseEvent("click"));
-    expect(hasError, "it should not error").to.be.false;
-    window.onerror = oldOnerror;
-  });
-});
+            `),a=e.querySelector('[value="first"]');await s(e);const c=/scaleX\((.+)\)/,l=c.exec(e.selectionIndicatorStyle),n=parseFloat(l[1]);let i=y(e,"sp-tab-contentchange");a.textContent="WWWWWWWWWWWWWWWWWWWWWWWWW",await i,await s(e);const r=c.exec(e.selectionIndicatorStyle),p=parseFloat(r[1]);t(n).to.be.lessThan(p),i=y(e,"sp-tab-contentchange"),a.textContent="W",await i,await s(e);const k=c.exec(e.selectionIndicatorStyle),q=parseFloat(k[1]);t(n).to.be.greaterThan(q),t(p).to.be.greaterThan(q)}),it("clicks on #list do not throw",async()=>{const a=(await d()).shadowRoot.querySelector("#list");let c=!1;const l=window.onerror;window.onerror=()=>{c=!0},a.dispatchEvent(new MouseEvent("click")),t(c,"it should not error").to.be.false,window.onerror=l})});
 //# sourceMappingURL=tabs.test.js.map