@spectrum-web-components/tabs 1.0.2 → 1.0.3

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["tabs-overflow.test.ts"],
+  "sourcesContent": ["/*\nCopyright 2022 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*/\nimport { ActionButton } from '@spectrum-web-components/action-button';\nimport { isFirefox } from '@spectrum-web-components/shared/src/platform.js';\nimport {\n    calculateScrollTargetForLeftSide,\n    calculateScrollTargetForRightSide,\n    Tab,\n    Tabs,\n    TabsOverflow,\n} from '@spectrum-web-components/tabs';\nimport '@spectrum-web-components/tabs/sp-tab-panel.js';\nimport '@spectrum-web-components/tabs/sp-tab.js';\nimport '@spectrum-web-components/tabs/sp-tabs-overflow.js';\nimport '@spectrum-web-components/tabs/sp-tabs.js';\nimport '@spectrum-web-components/theme/scale-medium.js';\nimport '@spectrum-web-components/theme/sp-theme.js';\nimport '@spectrum-web-components/theme/theme-light.js';\n\nimport { elementUpdated, expect, fixture, waitUntil } from '@open-wc/testing';\nimport {\n    ElementSize,\n    ElementSizes,\n    html,\n    nothing,\n} from '@spectrum-web-components/base';\nimport { sendKeys, setViewport } from '@web/test-runner-commands';\nimport { repeat } from 'lit/directives/repeat.js';\n\nconst RIGHT_BUTTON_SELECTOR = '.right-scroll';\nconst LEFT_BUTTON_SELECTOR = '.left-scroll';\n\ntype OverflowProperties = {\n    count: number;\n    size: ElementSize;\n    includeTabPanel: boolean;\n    selected?: number;\n    labelPrev?: string;\n    labelNext?: string;\n    dir?: 'ltr' | 'rtl';\n};\n\nconst renderTabsOverflow = async ({\n    count,\n    size,\n    includeTabPanel,\n    selected = 1,\n    dir = 'ltr',\n}: OverflowProperties): Promise<HTMLDivElement> => {\n    const theme = await fixture<HTMLDivElement>(html`\n        <sp-theme dir=${dir} system=\"spectrum\" scale=\"medium\" color=\"light\">\n            <div class=\"container\" style=\"width: 200px; height: 150px;\">\n                <sp-tabs-overflow>\n                    <sp-tabs size=${size} selected=${selected}>\n                        ${repeat(\n                            new Array(count),\n                            (item) => item,\n                            (_item, index) => html`\n                                <sp-tab\n                                    label=${`Tab Item ${index + 1}`}\n                                    value=${index + 1}\n                                ></sp-tab>\n                            `\n                        )}\n                        ${includeTabPanel\n                            ? html`\n                                  ${repeat(\n                                      new Array(count),\n                                      (item) => item,\n                                      (_item, index) => html`\n                                          <sp-tab-panel value=${index + 1}>\n                                              Content for Tab Item ${index + 1}\n                                          </sp-tab-panel>\n                                      `\n                                  )}\n                              `\n                            : nothing}\n                    </sp-tabs>\n                </sp-tabs-overflow>\n            </div>\n        </sp-theme>\n    `);\n    await elementUpdated(theme);\n    const tabsContainer = theme.querySelector('.container') as HTMLDivElement;\n\n    return tabsContainer;\n};\n\ndescribe('TabsOverflow', () => {\n    it('loads default tabs-overflow accessibly', async () => {\n        const el = await fixture<TabsOverflow>(html`\n            <sp-tabs-overflow>\n                <sp-tabs size=\"m\" selected=\"1\">\n                    <sp-tab label=\"Tab Item 1\" value=\"1\"></sp-tab>\n                    <sp-tab label=\"Tab Item 2\" value=\"2\"></sp-tab>\n                    <sp-tab-panel value=\"1\">Tab Content 1</sp-tab-panel>\n                    <sp-tab-panel value=\"2\">Tab Content 2</sp-tab-panel>\n                </sp-tabs>\n            </sp-tabs-overflow>\n        `);\n\n        await elementUpdated(el);\n\n        await expect(el).to.be.accessible();\n    });\n\n    it('show render left and right buttons in shadowDom', async () => {\n        const el = await renderTabsOverflow({\n            count: 20,\n            size: ElementSizes.L,\n            includeTabPanel: true,\n        });\n\n        const spTabsOverflows: TabsOverflow = el.querySelector(\n            'sp-tabs-overflow'\n        ) as TabsOverflow;\n        const rightButton = spTabsOverflows.shadowRoot.querySelector(\n            '.right-scroll'\n        ) as ActionButton;\n        expect(rightButton).to.exist;\n        const leftButton = spTabsOverflows.shadowRoot.querySelector(\n            '.left-scroll'\n        ) as ActionButton;\n        expect(leftButton).to.exist;\n    });\n\n    it('reflect proper sp-tab size', async () => {\n        const el = await renderTabsOverflow({\n            count: 20,\n            size: ElementSizes.M,\n            includeTabPanel: true,\n        });\n\n        const spTabsOverflows: TabsOverflow = el.querySelector(\n            'sp-tabs-overflow'\n        ) as TabsOverflow;\n\n        expect(spTabsOverflows.getAttribute('size')).to.equal('m');\n    });\n\n    it('should scroll when the button is clicked', async () => {\n        const el = await renderTabsOverflow({\n            count: 20,\n            size: ElementSizes.L,\n            includeTabPanel: true,\n        });\n        await elementUpdated(el);\n\n        const spTabsOverflows: TabsOverflow = el.querySelector(\n            'sp-tabs-overflow'\n        ) as TabsOverflow;\n        const leftButton = spTabsOverflows.shadowRoot.querySelector(\n            '.left-scroll'\n        ) as ActionButton;\n\n        const rightButton = spTabsOverflows.shadowRoot.querySelector(\n            '.right-scroll'\n        ) as ActionButton;\n\n        leftButton.dispatchEvent(new Event('click', {}));\n\n        const tabsEl = spTabsOverflows.querySelector('sp-tab') as Tab;\n        const initialLeft = tabsEl.getBoundingClientRect().left;\n        rightButton.dispatchEvent(new Event('click', {}));\n        await elementUpdated(el);\n        rightButton.dispatchEvent(new Event('click', {}));\n        await elementUpdated(el);\n        rightButton.dispatchEvent(new Event('click', {}));\n        await elementUpdated(el);\n        const finalLeft = tabsEl.getBoundingClientRect().left;\n        expect(finalLeft).to.be.lessThanOrEqual(initialLeft);\n    });\n\n    it('should scroll up to the last item and back in LTR', async () => {\n        // TODO: run on iPhone as per https://github.com/adobe/spectrum-web-components/pull/4722\n        // await setUserAgent(\n        // 'Mozilla/5.0 (iPhone; CPU iPhone OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148'\n        // );\n\n        // Skipping on Firefox due to timeouts on CI\n        if (isFirefox()) return;\n\n        const el = await renderTabsOverflow({\n            count: 8,\n            size: ElementSizes.L,\n            includeTabPanel: true,\n            dir: 'ltr',\n        });\n        await elementUpdated(el);\n        await setViewport({ width: 360, height: 640 });\n        await nextFrame();\n\n        const tabsOverflow = el.querySelector(\n            'sp-tabs-overflow'\n        ) as TabsOverflow;\n\n        expect(tabsOverflow['overflowState'].canScrollLeft).to.be.false;\n        expect(tabsOverflow['overflowState'].canScrollRight).to.be.true;\n\n        await scrollToEnd(el, RIGHT_BUTTON_SELECTOR, 'ltr');\n\n        expect(tabsOverflow['overflowState'].canScrollLeft).to.be.true;\n        expect(tabsOverflow['overflowState'].canScrollRight).to.be.false;\n\n        await scrollToEnd(el, LEFT_BUTTON_SELECTOR, 'ltr');\n\n        expect(tabsOverflow['overflowState'].canScrollLeft).to.be.false;\n        expect(tabsOverflow['overflowState'].canScrollRight).to.be.true;\n    });\n\n    it('should scroll up to the last item and back in RTL', async () => {\n        // TODO: run on iPhone as per https://github.com/adobe/spectrum-web-components/pull/4722\n        // await setUserAgent(\n        // 'Mozilla/5.0 (iPhone; CPU iPhone OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148'\n        // );\n\n        // Skipping on Firefox due to timeouts on CI\n        if (isFirefox()) return;\n\n        const el = await renderTabsOverflow({\n            count: 8,\n            size: ElementSizes.L,\n            includeTabPanel: true,\n            dir: 'rtl',\n        });\n        await elementUpdated(el);\n        await setViewport({ width: 360, height: 640 });\n        await nextFrame();\n\n        const tabsOverflow = el.querySelector(\n            'sp-tabs-overflow'\n        ) as TabsOverflow;\n\n        expect(tabsOverflow['overflowState'].canScrollLeft).to.be.true;\n        expect(tabsOverflow['overflowState'].canScrollRight).to.be.false;\n\n        await scrollToEnd(el, LEFT_BUTTON_SELECTOR, 'rtl');\n\n        expect(tabsOverflow['overflowState'].canScrollLeft).to.be.false;\n        expect(tabsOverflow['overflowState'].canScrollRight).to.be.true;\n\n        await scrollToEnd(el, RIGHT_BUTTON_SELECTOR, 'rtl');\n\n        expect(tabsOverflow['overflowState'].canScrollLeft).to.be.true;\n        expect(tabsOverflow['overflowState'].canScrollRight).to.be.false;\n    });\n\n    it('should fail properly if slot is not sp-tabs', async () => {\n        const el = await fixture<TabsOverflow>(html`\n            <sp-tabs-overflow>\n                <div>Some div</div>\n            </sp-tabs-overflow>\n        `);\n\n        await elementUpdated(el);\n        const slot = el.shadowRoot.querySelector('slot');\n        const slotContent = slot?.assignedElements() || '';\n        expect(slotContent[0].toString()).to.not.contains('Tabs');\n    });\n\n    it('should automatically bring the selected tab into view', async () => {\n        const el = await renderTabsOverflow({\n            count: 20,\n            size: ElementSizes.L,\n            includeTabPanel: false,\n            selected: 10,\n        });\n        await elementUpdated(el);\n\n        // Grab the list of tabs.\n        const tabsEl = el.querySelector('sp-tabs') as Tabs;\n\n        // Grab the coordonates of the selected tab.\n        let selectedTab = tabsEl.querySelector(\n            `[role=\"tab\"][value=\"10\"]`\n        ) as Tab;\n        expect(selectedTab).to.exist;\n        let selectedTabPosition = selectedTab.getBoundingClientRect();\n\n        // Selected tab is in the viewport, offset left is greater than 0 and less than the width of the tabs.\n        expect(selectedTabPosition.left).to.be.greaterThan(0);\n        expect(selectedTabPosition.left).to.be.lessThan(tabsEl.offsetWidth);\n\n        // First tab is not in the viewport anymore, its offset left is less than 0.\n        const firstTab = tabsEl.querySelector(`[role=\"tab\"][value=\"1\"]`) as Tab;\n        const firstTabPosition = firstTab.getBoundingClientRect();\n        expect(firstTabPosition.left).to.be.lessThan(0);\n\n        // Make the component automatically scroll left by selecting the first tab.\n        tabsEl.selected = '1';\n        await elementUpdated(tabsEl);\n\n        selectedTab = tabsEl.querySelector(`[role=\"tab\"][value=\"1\"]`) as Tab;\n        expect(selectedTab).to.exist;\n        selectedTabPosition = selectedTab.getBoundingClientRect();\n\n        // First tab is in the viewport, offset left is greater than 0 and less than the width of the tabs.\n        expect(selectedTabPosition.left).to.be.greaterThan(0);\n        expect(selectedTabPosition.left).to.be.lessThan(tabsEl.offsetWidth);\n\n        // Tab nr. 10 is not in the viewport anymore.\n        const previousSelection = tabsEl.querySelector(\n            `[role=\"tab\"][value=\"10\"]`\n        ) as Tab;\n        const previousSelectionPosition =\n            previousSelection.getBoundingClientRect();\n        expect(previousSelectionPosition.left).to.be.greaterThan(\n            tabsEl.offsetWidth\n        );\n    });\n\n    it('prev and next buttons have default labels', async () => {\n        const el = await renderTabsOverflow({\n            count: 20,\n            size: ElementSizes.M,\n            includeTabPanel: true,\n        });\n        await elementUpdated(el);\n\n        const spTabsOverflows: TabsOverflow = el.querySelector(\n            'sp-tabs-overflow'\n        ) as TabsOverflow;\n        const leftButton = spTabsOverflows.shadowRoot.querySelector(\n            '.left-scroll'\n        ) as ActionButton;\n        const rightButton = spTabsOverflows.shadowRoot.querySelector(\n            '.right-scroll'\n        ) as ActionButton;\n\n        expect(leftButton?.getAttribute('aria-label')).to.equal(\n            'Scroll to previous tabs'\n        );\n        expect(rightButton?.getAttribute('aria-label')).to.equal(\n            'Scroll to next tabs'\n        );\n    });\n\n    it('prev and next buttons labels overwritten via attributes', async () => {\n        const tabsContainer = await fixture<HTMLDivElement>(html`\n            <div class=\"container\" style=\"width: 200px; height: 150px;\">\n                <sp-tabs-overflow\n                    label-previous=\"custom label prev\"\n                    label-next=\"custom label next\"\n                >\n                    <sp-tabs size=${ElementSizes.M} selected=${1}>\n                        ${repeat(\n                            new Array(20),\n                            (item) => item,\n                            (_item, index) => html`\n                                <sp-tab\n                                    label=${`Tab Item ${index + 1}`}\n                                    value=${index + 1}\n                                ></sp-tab>\n                            `\n                        )}\n                        ${repeat(\n                            new Array(20),\n                            (item) => item,\n                            (_item, index) => html`\n                                <sp-tab-panel value=${index + 1}>\n                                    Content for Tab Item ${index + 1}\n                                </sp-tab-panel>\n                            `\n                        )}\n                    </sp-tabs>\n                </sp-tabs-overflow>\n            </div>\n        `);\n        await elementUpdated(tabsContainer);\n        const el = tabsContainer;\n\n        const spTabsOverflows: TabsOverflow = el.querySelector(\n            'sp-tabs-overflow'\n        ) as TabsOverflow;\n        const leftButton = spTabsOverflows.shadowRoot.querySelector(\n            '.left-scroll'\n        ) as ActionButton;\n        const rightButton = spTabsOverflows.shadowRoot.querySelector(\n            '.right-scroll'\n        ) as ActionButton;\n\n        expect(leftButton?.getAttribute('aria-label')).to.equal(\n            'custom label prev'\n        );\n        expect(rightButton?.getAttribute('aria-label')).to.equal(\n            'custom label next'\n        );\n    });\n});\n\ndescribe('calculateScrollTargetForRightSide', () => {\n    const container = { offsetWidth: 100, scrollLeft: 0 } as HTMLDivElement;\n    const tabs = [\n        { offsetLeft: 0, offsetWidth: 100 }, // currently selected tab\n        { offsetLeft: 100, offsetWidth: 100 },\n        { offsetLeft: 200, offsetWidth: 100 },\n    ] as Tab[];\n\n    it('correctly aligns tab on the right side of the viewport', () => {\n        // Where do I need to scroll on the x axis to get the tab at index 2 to be visible?\n        expect(\n            calculateScrollTargetForRightSide(2, 'ltr', tabs, container)\n        ).to.equal(100); // You need to scroll 100px more\n\n        // Repeat for RTL\n        expect(\n            calculateScrollTargetForRightSide(2, 'rtl', tabs, container)\n        ).to.equal(0); // You need to scroll at the begining of the scrollable area\n    });\n});\n\ndescribe('calculateScrollTargetForLeftSide', () => {\n    const container = { offsetWidth: 100, scrollLeft: 200 } as HTMLDivElement;\n    const tabs = [\n        { offsetLeft: -200, offsetWidth: 100 },\n        { offsetLeft: -100, offsetWidth: 100 },\n        { offsetLeft: 0, offsetWidth: 100 }, // currently selected tab\n    ] as Tab[];\n\n    it('correctly aligns tab on the left side of the viewport', () => {\n        // Where do I need to scroll on the x axis to get the tab at index 1 to be visible?\n        expect(\n            calculateScrollTargetForLeftSide(1, 'ltr', tabs, container)\n        ).to.equal(-100); // you need to scroll back -100px\n\n        // Where do I need to scroll on the x axis to get the first tab to be visible?\n        expect(\n            calculateScrollTargetForLeftSide(0, 'ltr', tabs, container)\n        ).to.equal(0); // you need to scroll to the begining of the scrollable area\n\n        // Repeat for RTL\n        expect(\n            calculateScrollTargetForLeftSide(1, 'rtl', tabs, container)\n        ).to.equal(100);\n\n        expect(\n            calculateScrollTargetForLeftSide(0, 'rtl', tabs, container)\n        ).to.equal(0);\n    });\n});\n\nasync function repeatScroll(\n    options: {\n        times: number;\n        elementToUpdate: TabsOverflow;\n        elementToScroll: HTMLElement;\n        distanceToReachInIteration: (iteration: number) => number;\n    },\n    iteration = 1\n): Promise<void> {\n    const {\n        times,\n        elementToUpdate,\n        elementToScroll,\n        distanceToReachInIteration,\n    } = options;\n    if (iteration > times) return;\n\n    const distanceToReach = distanceToReachInIteration(iteration);\n\n    await sendKeys({ press: 'Enter' });\n    await elementUpdated(elementToUpdate);\n    await waitUntil(\n        () =>\n            Math.ceil(Math.abs(elementToScroll.scrollLeft)) -\n                Math.abs(distanceToReach) ===\n            0,\n        `scroll to ${distanceToReach}`\n    );\n    return await repeatScroll(options, iteration + 1);\n}\n\nasync function scrollToEnd(\n    tabsContainer: HTMLDivElement,\n    buttonSelector: string,\n    direction: 'ltr' | 'rtl' = 'ltr'\n): Promise<void> {\n    const tabs = tabsContainer.querySelector('sp-tabs') as Tabs;\n    const tabsList = tabs.shadowRoot!.querySelector('#list') as HTMLElement;\n    const tabsOverflow = tabsContainer.querySelector(\n        'sp-tabs-overflow'\n    ) as TabsOverflow;\n    const button = tabsOverflow.shadowRoot.querySelector(\n        buttonSelector\n    ) as ActionButton;\n\n    const { scrollWidth, clientWidth } = tabsList;\n    const distPerScroll = clientWidth * tabsOverflow['scrollFactor'];\n    const totalScrollDist = scrollWidth - clientWidth;\n    const scrollsToEnd = Math.ceil(totalScrollDist / distPerScroll);\n    let distanceToReachInIteration: (iteration: number) => number;\n\n    if (direction === 'ltr') {\n        distanceToReachInIteration =\n            buttonSelector === LEFT_BUTTON_SELECTOR\n                ? (iteration: number) =>\n                      Math.max(totalScrollDist - iteration * distPerScroll, 0)\n                : (iteration: number) =>\n                      Math.min(iteration * distPerScroll, totalScrollDist);\n    } else {\n        distanceToReachInIteration =\n            buttonSelector === LEFT_BUTTON_SELECTOR\n                ? (iteration: number) =>\n                      Math.max(-1 * iteration * distPerScroll, -totalScrollDist)\n                : (iteration: number) =>\n                      -Math.max(totalScrollDist - iteration * distPerScroll, 0);\n    }\n\n    button.focus();\n    return await repeatScroll({\n        times: scrollsToEnd,\n        elementToUpdate: tabsOverflow,\n        elementToScroll: tabsList,\n        distanceToReachInIteration,\n    });\n}\n\nfunction nextFrame(): Promise<void> {\n    return new Promise((res) => requestAnimationFrame(() => res()));\n}\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,5 @@
+"use strict";
+import * as stories from "../stories/tabs-vertical-right-sizes.stories.js";
+import { regressVisuals } from "../../../test/visual/test.js";
+regressVisuals("TabsVerticalRightSizesStories", stories);
+//# sourceMappingURL=tabs-vertical-right-sizes.test-vrt.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["tabs-vertical-right-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-right-sizes.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\nimport type { TestsType } from '../../../test/visual/test.js';\n\nregressVisuals('TabsVerticalRightSizesStories', stories as unknown as TestsType);\n"],
+  "mappings": ";AAYA,YAAY,aAAa;AACzB,SAAS,sBAAsB;AAG/B,eAAe,iCAAiC,OAA+B;",
+  "names": []
+}

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

@@ -0,0 +1,5 @@
+"use strict";
+import * as stories from "../stories/tabs-vertical-sizes.stories.js";
+import { regressVisuals } from "../../../test/visual/test.js";
+regressVisuals("TabsVerticalSizesStories", stories);
+//# sourceMappingURL=tabs-vertical-sizes.test-vrt.js.map

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

@@ -0,0 +1,7 @@
+{
+  "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';\nimport type { TestsType } from '../../../test/visual/test.js';\n\nregressVisuals('TabsVerticalSizesStories', stories as unknown as TestsType);\n"],
+  "mappings": ";AAYA,YAAY,aAAa;AACzB,SAAS,sBAAsB;AAG/B,eAAe,4BAA4B,OAA+B;",
+  "names": []
+}

package/test/tabs.test-vrt.js

@@ -0,0 +1,5 @@
+"use strict";
+import * as stories from "../stories/tabs.stories.js";
+import { regressVisuals } from "../../../test/visual/test.js";
+regressVisuals("TabsStories", stories);
+//# sourceMappingURL=tabs.test-vrt.js.map

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

@@ -0,0 +1,7 @@
+{
+  "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';\nimport type { TestsType } from '../../../test/visual/test.js';\n\nregressVisuals('TabsStories', stories as unknown as TestsType);\n"],
+  "mappings": ";AAYA,YAAY,aAAa;AACzB,SAAS,sBAAsB;AAG/B,eAAe,eAAe,OAA+B;",
+  "names": []
+}

package/test/tabs.test.js

@@ -0,0 +1,507 @@
+"use strict";
+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,
+  nextFrame,
+  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`
+            <sp-tabs selected="first">
+                <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-tab-panel value="first">First tab content</sp-tab-panel>
+                <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`
+                <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`
+                <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`
+                <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`
+            <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`
+            <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`
+            <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}>
+                <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`
+            <sp-tabs>
+                <sp-tab label="Tab 1" value="first" selected>
+                    <sp-icon-checkmark slot="icon"></sp-icon-checkmark>
+                </sp-tab>
+                <sp-tab label="Tab 2" value="second">
+                    <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`
+            <sp-tabs selected="Unknown">
+                <sp-tab label="Tab 1" value="first">
+                    <sp-icon-checkmark slot="icon"></sp-icon-checkmark>
+                </sp-tab>
+                <sp-tab label="Tab 2" value="second">
+                    <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());
+    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");
+    firstTab.dispatchEvent(arrowUpEvent());
+    await elementUpdated(el);
+    expect(document.activeElement === secondTab, "Focus second tab").to.be.true;
+    secondTab.dispatchEvent(arrowDownEvent());
+    await elementUpdated(el);
+    expect(document.activeElement === firstTab, "Focus first tab").to.be.true;
+  });
+  it("accepts keyboard based selection through shadow DOM", async () => {
+    class TabTestEl extends LitElement {
+      render() {
+        return html`
+                    <sp-tabs selected="Unknown">
+                        <sp-tab label="Tab 1" value="first">
+                            <sp-icon-checkmark slot="icon"></sp-icon-checkmark>
+                        </sp-tab>
+                        <sp-tab label="Tab 2" value="second">
+                            <sp-icon-checkmark slot="icon"></sp-icon-checkmark>
+                        </sp-tab>
+                    </sp-tabs>
+                `;
+      }
+    }
+    customElements.define("tab-test-el", TabTestEl);
+    const el = await fixture(
+      html`
+                <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());
+    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`
+            <sp-tabs selected="Unknown" direction="vertical">
+                <sp-tab label="Tab 1" value="first">
+                    <sp-icon-checkmark slot="icon"></sp-icon-checkmark>
+                </sp-tab>
+                <sp-tab label="Tab 2" value="second">
+                    <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());
+    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");
+    firstTab.dispatchEvent(arrowRightEvent());
+    await elementUpdated(el);
+    expect(document.activeElement === secondTab, "Focus second tab").to.be.true;
+    secondTab.dispatchEvent(arrowLeftEvent());
+    expect(document.activeElement === firstTab, "Focus first tab").to.be.true;
+  });
+  it("selects through slotted DOM", async () => {
+    const el = await fixture(
+      html`
+                <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`
+                <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]);
+    selected.textContent = "WWWWWWWWWWWWWWWWWWWWWWWWW";
+    await nextFrame();
+    await nextFrame();
+    const longerExec = extractScaleX.exec(
+      el.selectionIndicatorStyle
+    );
+    const longerWidth = parseFloat(longerExec[1]);
+    expect(initialWidth).to.be.lessThan(longerWidth);
+    selected.textContent = "W";
+    await nextFrame();
+    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;
+  });
+});
+//# sourceMappingURL=tabs.test.js.map