@crowdstrike/glide-core 0.13.1 → 0.14.0

package/dist/tab.group.test.interactions.js

@@ -1,434 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-import './tab.group.js';
-import './tab.js';
-import './tab.panel.js';
-import { emulateMedia } from '@web/test-runner-commands';
-import { expect, fixture, html, waitUntil } from '@open-wc/testing';
-import { sendKeys } from '@web/test-runner-commands';
-import GlideCoreTabGroup from './tab.group.js';
-import GlideCoreTabPanel from './tab.panel.js';
-import sinon from 'sinon';
-GlideCoreTabGroup.shadowRootOptions.mode = 'open';
-GlideCoreTabPanel.shadowRootOptions.mode = 'open';
-it('does not render overflow buttons when there is no overflow', async () => {
-    const component = await fixture(html `
-    <div style="width:25rem">
-      <glide-core-tab-group>
-        <glide-core-tab slot="nav" panel="1">Tab 1</glide-core-tab>
-        <glide-core-tab slot="nav" panel="2">Tab 2</glide-core-tab>
-        <glide-core-tab slot="nav" panel="3">Tab 3</glide-core-tab>
-        <glide-core-tab slot="nav" panel="4">Tab 4</glide-core-tab>
-        <glide-core-tab slot="nav" panel="5">Tab 5</glide-core-tab>
-        <glide-core-tab slot="nav" panel="6">Tab 6</glide-core-tab>
-
-        <glide-core-tab-panel name="1">Content for Tab 1</glide-core-tab-panel>
-        <glide-core-tab-panel name="2">Content for Tab 2</glide-core-tab-panel>
-        <glide-core-tab-panel name="3">Content for Tab 3</glide-core-tab-panel>
-        <glide-core-tab-panel name="4">Content for Tab 4</glide-core-tab-panel>
-        <glide-core-tab-panel name="5">Content for Tab 5</glide-core-tab-panel>
-        <glide-core-tab-panel name="6">Content for Tab 6</glide-core-tab-panel>
-      </glide-core-tab-group>
-    </div>
-  `);
-    const tabGroup = component.querySelector('glide-core-tab-group');
-    const startOverflowButton = tabGroup?.shadowRoot?.querySelector('[data-test="overflow-start-button"]');
-    expect(startOverflowButton).to.be.null;
-    const endOverflowButton = tabGroup?.shadowRoot?.querySelector('[data-test="overflow-end-button"]');
-    expect(endOverflowButton).to.be.null;
-});
-it('renders overflow buttons when there is overflow', async () => {
-    const component = await fixture(html `
-    <div style="width:23rem">
-      <glide-core-tab-group>
-        <glide-core-tab slot="nav" panel="1">Tab 1</glide-core-tab>
-        <glide-core-tab slot="nav" panel="2">Tab 2</glide-core-tab>
-        <glide-core-tab slot="nav" panel="3">Tab 3</glide-core-tab>
-        <glide-core-tab slot="nav" panel="4">Tab 4</glide-core-tab>
-        <glide-core-tab slot="nav" panel="5">Tab 5</glide-core-tab>
-        <glide-core-tab slot="nav" panel="6">Tab 6</glide-core-tab>
-
-        <glide-core-tab-panel name="1">Content for Tab 1</glide-core-tab-panel>
-        <glide-core-tab-panel name="2">Content for Tab 2</glide-core-tab-panel>
-        <glide-core-tab-panel name="3">Content for Tab 3</glide-core-tab-panel>
-        <glide-core-tab-panel name="4">Content for Tab 4</glide-core-tab-panel>
-        <glide-core-tab-panel name="5">Content for Tab 5</glide-core-tab-panel>
-        <glide-core-tab-panel name="6">Content for Tab 6</glide-core-tab-panel>
-      </glide-core-tab-group>
-    </div>
-  `);
-    const tabGroup = component.querySelector('glide-core-tab-group');
-    await waitUntil(() => {
-        return (tabGroup?.shadowRoot?.querySelector('[data-test="overflow-start-button"]') !== null &&
-            tabGroup?.shadowRoot?.querySelector('[data-test="overflow-end-button"]') !== null);
-    });
-});
-it('renders a disabled start-overflow button when there is only overflow towards the end', async () => {
-    const component = await fixture(html `
-    <div style="width:23rem">
-      <glide-core-tab-group>
-        <glide-core-tab slot="nav" panel="1">Tab 1</glide-core-tab>
-        <glide-core-tab slot="nav" panel="2">Tab 2</glide-core-tab>
-        <glide-core-tab slot="nav" panel="3">Tab 3</glide-core-tab>
-        <glide-core-tab slot="nav" panel="4">Tab 4</glide-core-tab>
-        <glide-core-tab slot="nav" panel="5">Tab 5</glide-core-tab>
-        <glide-core-tab slot="nav" panel="6">Tab 6</glide-core-tab>
-
-        <glide-core-tab-panel name="1">Content for Tab 1</glide-core-tab-panel>
-        <glide-core-tab-panel name="2">Content for Tab 2</glide-core-tab-panel>
-        <glide-core-tab-panel name="3">Content for Tab 3</glide-core-tab-panel>
-        <glide-core-tab-panel name="4">Content for Tab 4</glide-core-tab-panel>
-        <glide-core-tab-panel name="5">Content for Tab 5</glide-core-tab-panel>
-        <glide-core-tab-panel name="6">Content for Tab 6</glide-core-tab-panel>
-      </glide-core-tab-group>
-    </div>
-  `);
-    const tabGroup = component.querySelector('glide-core-tab-group');
-    await waitUntil(() => {
-        return (tabGroup?.shadowRoot?.querySelector('[data-test="overflow-start-button"]') !== null &&
-            tabGroup?.shadowRoot?.querySelector('[data-test="overflow-end-button"]') !== null);
-    });
-    const startOverflowButton = tabGroup?.shadowRoot?.querySelector('[data-test="overflow-start-button"]');
-    expect(startOverflowButton?.disabled).to.be.true;
-    const endOverflowButton = tabGroup?.shadowRoot?.querySelector('[data-test="overflow-end-button"]');
-    expect(endOverflowButton?.disabled).to.be.false;
-});
-it('renders a disabled end-overflow button when there is only overflow at the start', async () => {
-    const component = await fixture(html `
-    <div style="width:23rem">
-      <glide-core-tab-group>
-        <glide-core-tab slot="nav" panel="1">Tab 1</glide-core-tab>
-        <glide-core-tab slot="nav" panel="2">Tab 2</glide-core-tab>
-        <glide-core-tab slot="nav" panel="3">Tab 3</glide-core-tab>
-        <glide-core-tab slot="nav" panel="4">Tab 4</glide-core-tab>
-        <glide-core-tab slot="nav" panel="5">Tab 5</glide-core-tab>
-        <glide-core-tab slot="nav" panel="6">Tab 6</glide-core-tab>
-
-        <glide-core-tab-panel name="1">Content for Tab 1</glide-core-tab-panel>
-        <glide-core-tab-panel name="2">Content for Tab 2</glide-core-tab-panel>
-        <glide-core-tab-panel name="3">Content for Tab 3</glide-core-tab-panel>
-        <glide-core-tab-panel name="4">Content for Tab 4</glide-core-tab-panel>
-        <glide-core-tab-panel name="5">Content for Tab 5</glide-core-tab-panel>
-        <glide-core-tab-panel name="6">Content for Tab 6</glide-core-tab-panel>
-      </glide-core-tab-group>
-    </div>
-  `);
-    const tabGroup = component.querySelector('glide-core-tab-group');
-    await waitUntil(() => {
-        return (tabGroup?.shadowRoot?.querySelector('[data-test="overflow-start-button"]') !== null &&
-            tabGroup?.shadowRoot?.querySelector('[data-test="overflow-end-button"]') !== null);
-    });
-    // Need to get the tab group into a state where there
-    // is overflow at the start -- do this by first scrolling to the end
-    const startOverflowButton = tabGroup?.shadowRoot?.querySelector('[data-test="overflow-start-button"]');
-    expect(startOverflowButton?.disabled).to.be.true;
-    const endOverflowButton = tabGroup?.shadowRoot?.querySelector('[data-test="overflow-end-button"]');
-    expect(endOverflowButton?.disabled).to.be.false;
-    endOverflowButton?.click();
-    await waitUntil(() => {
-        return (tabGroup?.shadowRoot?.querySelector('[data-test="overflow-end-button"]')?.disabled === true);
-    });
-    expect(startOverflowButton?.disabled).to.be.false;
-});
-it('scrolls tabs when overflow buttons are clicked', async () => {
-    await emulateMedia({ reducedMotion: 'reduce' });
-    const spy = sinon.spy();
-    const component = await fixture(html `
-    <div style="width:23rem">
-      <glide-core-tab-group>
-        <glide-core-tab slot="nav" panel="1">Tab 1</glide-core-tab>
-        <glide-core-tab slot="nav" panel="2">Tab 2</glide-core-tab>
-        <glide-core-tab slot="nav" panel="3">Tab 3</glide-core-tab>
-        <glide-core-tab slot="nav" panel="4">Tab 4</glide-core-tab>
-        <glide-core-tab slot="nav" panel="5">Tab 5</glide-core-tab>
-        <glide-core-tab slot="nav" panel="6">Tab 6</glide-core-tab>
-
-        <glide-core-tab-panel name="1">Content for Tab 1</glide-core-tab-panel>
-        <glide-core-tab-panel name="2">Content for Tab 2</glide-core-tab-panel>
-        <glide-core-tab-panel name="3">Content for Tab 3</glide-core-tab-panel>
-        <glide-core-tab-panel name="4">Content for Tab 4</glide-core-tab-panel>
-        <glide-core-tab-panel name="5">Content for Tab 5</glide-core-tab-panel>
-        <glide-core-tab-panel name="6">Content for Tab 6</glide-core-tab-panel>
-      </glide-core-tab-group>
-    </div>
-  `);
-    const tabGroup = component.querySelector('glide-core-tab-group');
-    await waitUntil(() => {
-        return (tabGroup?.shadowRoot?.querySelector('[data-test="overflow-start-button"]') !== null &&
-            tabGroup?.shadowRoot?.querySelector('[data-test="overflow-end-button"]') !== null);
-    });
-    tabGroup?.shadowRoot
-        ?.querySelector('[role="tablist"]')
-        ?.addEventListener('scroll', spy);
-    const endOverflowButton = tabGroup?.shadowRoot?.querySelector('[data-test="overflow-end-button"]');
-    endOverflowButton?.click();
-    await waitUntil(() => tabGroup?.shadowRoot?.querySelector('[data-test="overflow-end-button"]')?.disabled === true);
-    expect(spy.callCount).to.equal(1);
-    spy.resetHistory();
-    const startOverflowButton = tabGroup?.shadowRoot?.querySelector('[data-test="overflow-start-button"]');
-    expect(startOverflowButton).to.be.not.null;
-    expect(startOverflowButton?.disabled).to.be.false;
-    startOverflowButton?.click();
-    await waitUntil(() => tabGroup?.shadowRoot?.querySelector('[data-test="overflow-start-button"]')?.disabled === true);
-    expect(spy.callCount).to.equal(1);
-    expect(startOverflowButton?.disabled).to.be.true;
-    expect(endOverflowButton?.disabled).to.be.false;
-    await emulateMedia({ reducedMotion: 'no-preference' });
-});
-it('removes overflow buttons when the component is resized and there is no overflow', async () => {
-    const component = await fixture(html `
-    <div style="width:23rem" data-test="test-parent">
-      <glide-core-tab-group>
-        <glide-core-tab slot="nav" panel="1">Tab 1</glide-core-tab>
-        <glide-core-tab slot="nav" panel="2">Tab 2</glide-core-tab>
-        <glide-core-tab slot="nav" panel="3">Tab 3</glide-core-tab>
-        <glide-core-tab slot="nav" panel="4">Tab 4</glide-core-tab>
-        <glide-core-tab slot="nav" panel="5">Tab 5</glide-core-tab>
-        <glide-core-tab slot="nav" panel="6">Tab 6</glide-core-tab>
-
-        <glide-core-tab-panel name="1">Content for Tab 1</glide-core-tab-panel>
-        <glide-core-tab-panel name="2">Content for Tab 2</glide-core-tab-panel>
-        <glide-core-tab-panel name="3">Content for Tab 3</glide-core-tab-panel>
-        <glide-core-tab-panel name="4">Content for Tab 4</glide-core-tab-panel>
-        <glide-core-tab-panel name="5">Content for Tab 5</glide-core-tab-panel>
-        <glide-core-tab-panel name="6">Content for Tab 6</glide-core-tab-panel>
-      </glide-core-tab-group>
-    </div>
-  `);
-    const tabGroup = component.querySelector('glide-core-tab-group');
-    await waitUntil(() => {
-        return (tabGroup?.shadowRoot?.querySelector('[data-test="overflow-start-button"]') !== null &&
-            tabGroup?.shadowRoot?.querySelector('[data-test="overflow-end-button"]') !== null);
-    });
-    const container = document?.querySelector('[data-test="test-parent"]');
-    expect(container).to.be.not.null;
-    container.style.width = 'auto';
-    await waitUntil(() => tabGroup?.shadowRoot?.querySelector('[data-test="overflow-start-button"]') === null &&
-        tabGroup?.shadowRoot?.querySelector('[data-test="overflow-end-button"]') === null);
-});
-it('renders overflow buttons when the component is resized and there is overflow', async () => {
-    const component = await fixture(html `
-    <div data-test="test-parent">
-      <glide-core-tab-group>
-        <glide-core-tab slot="nav" panel="1">Tab 1</glide-core-tab>
-        <glide-core-tab slot="nav" panel="2">Tab 2</glide-core-tab>
-        <glide-core-tab slot="nav" panel="3">Tab 3</glide-core-tab>
-        <glide-core-tab slot="nav" panel="4">Tab 4</glide-core-tab>
-        <glide-core-tab slot="nav" panel="5">Tab 5</glide-core-tab>
-        <glide-core-tab slot="nav" panel="6">Tab 6</glide-core-tab>
-
-        <glide-core-tab-panel name="1">Content for Tab 1</glide-core-tab-panel>
-        <glide-core-tab-panel name="2">Content for Tab 2</glide-core-tab-panel>
-        <glide-core-tab-panel name="3">Content for Tab 3</glide-core-tab-panel>
-        <glide-core-tab-panel name="4">Content for Tab 4</glide-core-tab-panel>
-        <glide-core-tab-panel name="5">Content for Tab 5</glide-core-tab-panel>
-        <glide-core-tab-panel name="6">Content for Tab 6</glide-core-tab-panel>
-      </glide-core-tab-group>
-    </div>
-  `);
-    const tabGroup = component.querySelector('glide-core-tab-group');
-    const startOverflowButton = tabGroup?.shadowRoot?.querySelector('[data-test="overflow-start-button"]');
-    const endOverflowButton = tabGroup?.shadowRoot?.querySelector('[data-test="overflow-end-button"]');
-    expect(startOverflowButton).to.be.null;
-    expect(endOverflowButton).to.be.null;
-    const container = document?.querySelector('[data-test="test-parent"]');
-    expect(container).to.be.not.null;
-    container.style.width = '23rem';
-    await waitUntil(() => tabGroup?.shadowRoot?.querySelector('[data-test="overflow-start-button"]') !== null &&
-        tabGroup?.shadowRoot?.querySelector('[data-test="overflow-end-button"]') !== null);
-});
-it('has only one active tab that is tabbable after pressing the Enter key', async () => {
-    const component = await fixture(html `
-    <glide-core-tab-group>
-      <glide-core-tab slot="nav" panel="1">Tab 1</glide-core-tab>
-      <glide-core-tab slot="nav" panel="2">Tab 2</glide-core-tab>
-      <glide-core-tab slot="nav" panel="3">Tab 3</glide-core-tab>
-      <glide-core-tab slot="nav" panel="4">Tab 4</glide-core-tab>
-
-      <glide-core-tab-panel name="1">Content for Tab 1</glide-core-tab-panel>
-      <glide-core-tab-panel name="2">Content for Tab 2</glide-core-tab-panel>
-      <glide-core-tab-panel name="3">Content for Tab 3</glide-core-tab-panel>
-      <glide-core-tab-panel name="4">Content for Tab 4</glide-core-tab-panel>
-    </glide-core-tab-group>
-  `);
-    const [firstTab, secondTab, thirdTab, fourthTab] = component.tabElements;
-    expect(firstTab.active).to.be.true;
-    expect(secondTab.active).to.be.false;
-    expect(thirdTab.active).to.be.false;
-    expect(fourthTab.active).to.be.false;
-    expect(firstTab.tabIndex).to.equal(0);
-    expect(secondTab.tabIndex).to.equal(-1);
-    expect(thirdTab.tabIndex).to.equal(-1);
-    expect(fourthTab.tabIndex).to.equal(-1);
-    firstTab.focus();
-    await sendKeys({ press: 'ArrowRight' });
-    await sendKeys({ press: 'Enter' });
-    expect(firstTab.active).to.be.false;
-    expect(secondTab.active).to.be.true;
-    expect(thirdTab.active).to.be.false;
-    expect(fourthTab.active).to.be.false;
-    expect(firstTab.tabIndex).to.equal(-1);
-    expect(secondTab.tabIndex).to.equal(0);
-    expect(thirdTab.tabIndex).to.equal(-1);
-    expect(fourthTab.tabIndex).to.equal(-1);
-    await sendKeys({ press: 'End' });
-    await sendKeys({ press: 'Enter' });
-    expect(firstTab.active).to.be.false;
-    expect(secondTab.active).to.be.false;
-    expect(thirdTab.active).to.be.false;
-    expect(fourthTab.active).to.be.true;
-    expect(firstTab.tabIndex).to.equal(-1);
-    expect(secondTab.tabIndex).to.equal(-1);
-    expect(thirdTab.tabIndex).to.equal(-1);
-    expect(fourthTab.tabIndex).to.equal(0);
-    await sendKeys({ press: 'ArrowLeft' });
-    await sendKeys({ press: 'Enter' });
-    expect(firstTab.active).to.be.false;
-    expect(secondTab.active).to.be.false;
-    expect(thirdTab.active).to.be.true;
-    expect(fourthTab.active).to.be.false;
-    expect(firstTab.tabIndex).to.equal(-1);
-    expect(secondTab.tabIndex).to.equal(-1);
-    expect(thirdTab.tabIndex).to.equal(0);
-    expect(fourthTab.tabIndex).to.equal(-1);
-    await sendKeys({ press: 'Home' });
-    await sendKeys({ press: 'Enter' });
-    expect(firstTab.active).to.be.true;
-    expect(secondTab.active).to.be.false;
-    expect(thirdTab.active).to.be.false;
-    expect(fourthTab.active).to.be.false;
-    expect(firstTab.tabIndex).to.equal(0);
-    expect(secondTab.tabIndex).to.equal(-1);
-    expect(thirdTab.tabIndex).to.equal(-1);
-    expect(fourthTab.tabIndex).to.equal(-1);
-});
-it('has only one active tab that is tabbable when clicked', async () => {
-    const component = await fixture(html `
-    <glide-core-tab-group>
-      <glide-core-tab slot="nav" panel="1">Tab 1</glide-core-tab>
-      <glide-core-tab slot="nav" panel="2">Tab 2</glide-core-tab>
-      <glide-core-tab slot="nav" panel="3">Tab 3</glide-core-tab>
-
-      <glide-core-tab-panel name="1">Content for Tab 1</glide-core-tab-panel>
-      <glide-core-tab-panel name="2">Content for Tab 2</glide-core-tab-panel>
-      <glide-core-tab-panel name="3">Content for Tab 3</glide-core-tab-panel>
-    </glide-core-tab-group>
-  `);
-    const [firstTab, secondTab, thirdTab] = component.tabElements;
-    expect(firstTab.active).to.be.true;
-    expect(secondTab.active).to.be.false;
-    expect(thirdTab.active).to.be.false;
-    expect(firstTab.tabIndex).to.equal(0);
-    expect(secondTab.tabIndex).to.equal(-1);
-    expect(thirdTab.tabIndex).to.equal(-1);
-    secondTab.click();
-    expect(firstTab.active).to.be.false;
-    expect(secondTab.active).to.be.true;
-    expect(thirdTab.active).to.be.false;
-    expect(firstTab.tabIndex).to.equal(-1);
-    expect(secondTab.tabIndex).to.equal(0);
-    expect(thirdTab.tabIndex).to.equal(-1);
-    thirdTab.click();
-    expect(firstTab.active).to.be.false;
-    expect(secondTab.active).to.be.false;
-    expect(thirdTab.active).to.be.true;
-    expect(firstTab.tabIndex).to.equal(-1);
-    expect(secondTab.tabIndex).to.equal(-1);
-    expect(thirdTab.tabIndex).to.equal(0);
-});
-it('has only one tab panel that is active and tabbable when a tab is clicked', async () => {
-    const component = await fixture(html `
-    <glide-core-tab-group>
-      <glide-core-tab slot="nav" panel="1">Tab 1</glide-core-tab>
-      <glide-core-tab slot="nav" panel="2">Tab 2</glide-core-tab>
-
-      <glide-core-tab-panel name="1">Content for Tab 1</glide-core-tab-panel>
-      <glide-core-tab-panel name="2">Content for Tab 2</glide-core-tab-panel>
-    </glide-core-tab-group>
-  `);
-    const [, secondTab] = component.tabElements;
-    const [firstPanel, secondPanel] = component.panelElements;
-    expect(firstPanel.isActive).to.be.true;
-    expect(secondPanel.isActive).to.be.false;
-    expect(firstPanel.tabIndex).to.equal(0);
-    expect(secondPanel.tabIndex).to.equal(-1);
-    secondTab.click();
-    expect(firstPanel.isActive).to.be.false;
-    expect(secondPanel.isActive).to.be.true;
-    expect(firstPanel.tabIndex).to.equal(-1);
-    expect(secondPanel.tabIndex).to.equal(0);
-});
-it('has only one tab panel that is active and tabbable when using the keyboard to make selections', async () => {
-    const component = await fixture(html `
-    <glide-core-tab-group>
-      <glide-core-tab slot="nav" panel="1">Tab 1</glide-core-tab>
-      <glide-core-tab slot="nav" panel="2">Tab 2</glide-core-tab>
-
-      <glide-core-tab-panel name="1">Content for Tab 1</glide-core-tab-panel>
-      <glide-core-tab-panel name="2">Content for Tab 2</glide-core-tab-panel>
-    </glide-core-tab-group>
-  `);
-    const [firstTab] = component.tabElements;
-    const [firstPanel, secondPanel] = component.panelElements;
-    expect(firstPanel.isActive).to.be.true;
-    expect(secondPanel.isActive).to.be.false;
-    expect(firstPanel.tabIndex).to.equal(0);
-    expect(secondPanel.tabIndex).to.equal(-1);
-    firstTab.focus();
-    await sendKeys({ press: 'ArrowRight' });
-    await sendKeys({ press: 'Enter' });
-    expect(firstPanel.isActive).to.be.false;
-    expect(secondPanel.isActive).to.be.true;
-    expect(firstPanel.tabIndex).to.equal(-1);
-    expect(secondPanel.tabIndex).to.equal(0);
-});
-it('sets the last keyboard focused tab as tabbable ', async () => {
-    const component = await fixture(html `
-    <glide-core-tab-group>
-      <glide-core-tab slot="nav" panel="1">Tab 1</glide-core-tab>
-      <glide-core-tab slot="nav" panel="2">Tab 2</glide-core-tab>
-
-      <glide-core-tab-panel name="1">Content for Tab 1</glide-core-tab-panel>
-      <glide-core-tab-panel name="2">Content for Tab 2</glide-core-tab-panel>
-    </glide-core-tab-group>
-  `);
-    const [firstTab, secondTab] = component.tabElements;
-    expect(firstTab.active).to.be.true;
-    expect(secondTab.active).to.be.false;
-    expect(firstTab.tabIndex).to.equal(0);
-    expect(secondTab.tabIndex).to.equal(-1);
-    firstTab.focus();
-    await sendKeys({ press: 'ArrowRight' });
-    expect(firstTab.active).to.be.true;
-    expect(secondTab.active).to.be.false;
-    expect(firstTab.tabIndex).to.equal(-1);
-    expect(secondTab.tabIndex).to.equal(0);
-});
-it('sets the active tab as tabbable on tab blur', async () => {
-    // This behavior is to ensure that the last active tab is the first tabbable
-    // element in the component.
-    const component = await fixture(html `
-    <glide-core-tab-group>
-      <glide-core-tab slot="nav" panel="1">Tab 1</glide-core-tab>
-      <glide-core-tab slot="nav" panel="2">Tab 2</glide-core-tab>
-
-      <glide-core-tab-panel name="1">Content for Tab 1</glide-core-tab-panel>
-      <glide-core-tab-panel name="2">Content for Tab 2</glide-core-tab-panel>
-    </glide-core-tab-group>
-  `);
-    const [firstTab, secondTab] = component.tabElements;
-    expect(firstTab.active).to.be.true;
-    expect(secondTab.active).to.be.false;
-    expect(firstTab.tabIndex).to.equal(0);
-    expect(secondTab.tabIndex).to.equal(-1);
-    firstTab.focus();
-    await sendKeys({ press: 'ArrowRight' });
-    expect(firstTab.active).to.be.true;
-    expect(secondTab.active).to.be.false;
-    expect(firstTab.tabIndex).to.equal(-1);
-    expect(secondTab.tabIndex).to.equal(0);
-    secondTab.blur();
-    expect(firstTab.active).to.be.true;
-    expect(secondTab.active).to.be.false;
-    expect(firstTab.tabIndex).to.equal(0);
-    expect(secondTab.tabIndex).to.equal(-1);
-});

package/dist/tab.test.basics.d.ts

@@ -1 +0,0 @@
-import './tab.js';

package/dist/tab.test.basics.js

@@ -1,50 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-import './tab.js';
-import { expect, fixture, html } from '@open-wc/testing';
-import GlideCoreTab from './tab.js';
-GlideCoreTab.shadowRootOptions.mode = 'open';
-it('registers', async () => {
-    expect(window.customElements.get('glide-core-tab')).to.equal(GlideCoreTab);
-});
-it('renders correct markup and sets correct attributes for the default case', async () => {
-    const component = await fixture(html `
-    <glide-core-tab>Tab</glide-core-tab>
-  `);
-    await expect(component).to.not.be.accessible();
-    expect(component.active).to.be.false;
-    expect(component.disabled).to.be.false;
-    expect(component.getAttribute('aria-disabled')).to.equal(null, 'does not set aria-disabled');
-    expect([...component.shadowRoot.firstElementChild.classList]).to.deep.equal(['component']);
-});
-it('sets the panel attribute', async () => {
-    const component = await fixture(html `
-    <glide-core-tab panel="details">Tab</glide-core-tab>
-  `);
-    expect(component.panel).to.equal('details');
-});
-it('sets the active attribute', async () => {
-    const component = await fixture(html `
-    <glide-core-tab active>Tab</glide-core-tab>
-  `);
-    expect(component.active).to.be.true;
-});
-it('sets the disabled attribute', async () => {
-    const component = await fixture(html `
-    <glide-core-tab disabled>Tab</glide-core-tab>
-  `);
-    expect(component.disabled).to.be.true;
-    expect(component?.getAttribute('aria-disabled')).to.equal('true');
-});
-it('renders the icon slot', async () => {
-    const component = await fixture(html `
-    <glide-core-tab>
-      <span slot="icon">Icon</span>
-      <span>Tab</span>
-    </glide-core-tab>
-  `);
-    const slotNodes = component
-        .shadowRoot.querySelector('slot[name="icon"]')
-        ?.assignedNodes();
-    expect(slotNodes?.length).to.equal(1);
-    expect(slotNodes?.at(0)?.textContent?.trim()).to.equal('Icon');
-});

package/dist/tabs.stories.d.ts

@@ -1,8 +0,0 @@
-import './icons/storybook.js';
-import './tab.group.js';
-import './tab.panel.js';
-import type { Meta, StoryObj } from '@storybook/web-components';
-declare const meta: Meta;
-export default meta;
-export declare const Tabs: StoryObj;
-export declare const WithOverflow: StoryObj;

package/dist/tag.stories.d.ts

@@ -1,7 +0,0 @@
-import './icons/storybook.js';
-import './tag.js';
-import type { Meta, StoryObj } from '@storybook/web-components';
-declare const meta: Meta;
-export default meta;
-export declare const Tag: StoryObj;
-export declare const WithIcon: StoryObj;

package/dist/tag.test.basics.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/tag.test.basics.js

@@ -1,28 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-import { aTimeout, elementUpdated, expect, fixture, html, } from '@open-wc/testing';
-import GlideCoreTag from './tag.js';
-GlideCoreTag.shadowRootOptions.mode = 'open';
-it('registers', async () => {
-    expect(window.customElements.get('glide-core-tag')).to.equal(GlideCoreTag);
-});
-it('is accessible', async () => {
-    const component = await fixture(html `<glide-core-tag label="Label"></glide-core-tag>`);
-    // Wait for the animation to complete.
-    await aTimeout(100);
-    await expect(component).to.be.accessible();
-    component.removable = true;
-    await elementUpdated(component);
-    await expect(component).to.be.accessible();
-});
-it('has defaults', async () => {
-    const component = await fixture(html `<glide-core-tag label="Label"></glide-core-tag>`);
-    expect(component.disabled).to.be.false;
-    expect(component.removable).to.be.false;
-    expect(component.size).to.equal('medium');
-});
-it('can be removed', async () => {
-    const component = await fixture(html `<glide-core-tag label="Label" removable></glide-core-tag>`);
-    const button = component.shadowRoot?.querySelector('[data-test="removal-button"]');
-    expect(button?.checkVisibility()).to.be.true;
-    expect(button?.getAttribute('aria-label')).to.equal('Remove tag: Label');
-});

package/dist/tag.test.events.d.ts

@@ -1 +0,0 @@
-import './tag.js';

package/dist/tag.test.events.js

@@ -1,93 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-import './tag.js';
-import { expect, fixture, html, oneEvent } from '@open-wc/testing';
-import { sendKeys } from '@web/test-runner-commands';
-import GlideCoreTag from './tag.js';
-import sinon from 'sinon';
-GlideCoreTag.shadowRootOptions.mode = 'open';
-it('dispatches one "remove" event on click', async () => {
-    const component = await fixture(html `<glide-core-tag label="Label" removable></glide-core-tag>`);
-    setTimeout(() => {
-        component.shadowRoot
-            ?.querySelector('[data-test="removal-button"]')
-            ?.click();
-    });
-    const spy = sinon.spy();
-    component.addEventListener('remove', spy);
-    const event = await oneEvent(component, 'remove');
-    expect(event instanceof Event).to.be.true;
-    expect(event.bubbles).to.be.true;
-    expect(event.composed).to.be.true;
-    expect(spy.callCount).to.equal(1);
-});
-it('dispatches one "remove" event on Enter ', async () => {
-    const component = await fixture(html `<glide-core-tag label="Label" removable></glide-core-tag>`);
-    component.shadowRoot
-        ?.querySelector('[data-test="removal-button"]')
-        ?.focus();
-    sendKeys({ press: 'Enter' });
-    const spy = sinon.spy();
-    component.addEventListener('remove', spy);
-    const event = await oneEvent(component, 'remove');
-    expect(event instanceof Event).to.be.true;
-    expect(event.bubbles).to.be.true;
-    expect(event.composed).to.be.true;
-    expect(spy.callCount).to.equal(1);
-});
-it('dispatches one "remove" event on Space ', async () => {
-    const component = await fixture(html `<glide-core-tag label="Label" removable></glide-core-tag>`);
-    component.shadowRoot
-        ?.querySelector('[data-test="removal-button"]')
-        ?.focus();
-    sendKeys({ press: ' ' });
-    const spy = sinon.spy();
-    component.addEventListener('remove', spy);
-    const event = await oneEvent(component, 'remove');
-    expect(event instanceof Event).to.be.true;
-    expect(event.bubbles).to.be.true;
-    expect(event.composed).to.be.true;
-    expect(spy.callCount).to.equal(1);
-});
-it('dispatches one "edit" event on click', async () => {
-    const component = await fixture(html `<glide-core-tag label="Label" private-editable></glide-core-tag>`);
-    setTimeout(() => {
-        component.shadowRoot
-            ?.querySelector('[data-test="edit-button"]')
-            ?.click();
-    });
-    const spy = sinon.spy();
-    component.addEventListener('edit', spy);
-    const event = await oneEvent(component, 'edit');
-    expect(event instanceof Event).to.be.true;
-    expect(event.bubbles).to.be.true;
-    expect(event.composed).to.be.true;
-    expect(spy.callCount).to.equal(1);
-});
-it('dispatches one "edit" event on Enter ', async () => {
-    const component = await fixture(html `<glide-core-tag label="Label" private-editable></glide-core-tag>`);
-    component.shadowRoot
-        ?.querySelector('[data-test="edit-button"]')
-        ?.focus();
-    sendKeys({ press: 'Enter' });
-    const spy = sinon.spy();
-    component.addEventListener('edit', spy);
-    const event = await oneEvent(component, 'edit');
-    expect(event instanceof Event).to.be.true;
-    expect(event.bubbles).to.be.true;
-    expect(event.composed).to.be.true;
-    expect(spy.callCount).to.equal(1);
-});
-it('dispatches one "edit" event on Space ', async () => {
-    const component = await fixture(html `<glide-core-tag label="Label" private-editable></glide-core-tag>`);
-    component.shadowRoot
-        ?.querySelector('[data-test="edit-button"]')
-        ?.focus();
-    sendKeys({ press: ' ' });
-    const spy = sinon.spy();
-    component.addEventListener('edit', spy);
-    const event = await oneEvent(component, 'edit');
-    expect(event instanceof Event).to.be.true;
-    expect(event.bubbles).to.be.true;
-    expect(event.composed).to.be.true;
-    expect(spy.callCount).to.equal(1);
-});

package/dist/tag.test.focus.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/tag.test.focus.js

@@ -1,10 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-import { expect, fixture, html } from '@open-wc/testing';
-import GlideCoreTag from './tag.js';
-GlideCoreTag.shadowRootOptions.mode = 'open';
-it('calling `focus()` focuses the button', async () => {
-    const component = await fixture(html `<glide-core-tag label="Label" removable></glide-core-tag>`);
-    component.focus();
-    const button = component.shadowRoot?.querySelector('[data-test="removal-button"]');
-    expect(component.shadowRoot?.activeElement).to.equal(button);
-});

package/dist/tag.test.interactions.d.ts

@@ -1 +0,0 @@
-export {};