@crowdstrike/glide-core 0.7.0 → 0.9.0

package/dist/tab.group.styles.js

@@ -1,27 +1,41 @@
 import{css}from"lit";export default[css`
     .component {
+      background-color: transparent;
       display: flex;
       flex-direction: column;
 
-      &.vertical {
-        flex-direction: row;
+      & .tab-container {
+        border-block-end: 1px solid var(--glide-core-border-base-lighter);
+        display: flex;
+
+        & .overflow-button-container {
+          flex-shrink: 0;
+          inline-size: 1.875rem;
+        }
       }
-    }
 
-    .tab-group {
-      display: flex;
+      & .tab-group {
+        display: flex;
+        overflow: auto hidden;
+        scrollbar-width: none;
+        white-space: nowrap;
 
-      &.primary {
-        border-block-end: 1px solid var(--glide-core-border-primary);
-      }
+        /* "-webkit-scrollbar" is needed for Safari */
 
-      &.secondary {
-        border-block-end: 1px solid var(--glide-core-border-base-lighter);
+        &::-webkit-scrollbar {
+          block-size: 0;
+          inline-size: 0;
+        }
       }
 
-      &.vertical {
-        border: 1px solid var(--glide-core-border-base-darker);
-        flex-direction: column;
+      & .overflow {
+        background-color: transparent;
+        border: none;
+        cursor: pointer;
+        inline-size: 1.875rem;
+        margin: 0;
+        outline: none;
+        padding: 0;
       }
     }
   `];

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import './tab.group.js';
 import './tab.js';
 import './tab.panel.js';
@@ -8,6 +9,9 @@ import GlideCoreTabPanel from './tab.panel.js';
 import expectArgumentError from './library/expect-argument-error.js';
 GlideCoreTabGroup.shadowRootOptions.mode = 'open';
 GlideCoreTabPanel.shadowRootOptions.mode = 'open';
+function isPanelHidden(panel) {
+    return panel.shadowRoot?.firstElementChild?.classList.contains('hidden');
+}
 it('registers', async () => {
     expect(window.customElements.get('glide-core-tab-group')).to.equal(GlideCoreTabGroup);
     expect(window.customElements.get('glide-core-tab-panel')).to.equal(GlideCoreTabPanel);
@@ -22,39 +26,16 @@ it('renders correct markup and sets correct attributes for the default case', as
     await expect(tabGroup).to.be.accessible();
     const [firstTab] = tabGroup.tabElements;
     expect(tabGroup.activeTab).to.equal(firstTab, 'activeTab defaults to first tab');
-    expect(tabGroup.variant).to.equal('primary');
     expect([...tabGroup.shadowRoot.firstElementChild.classList]).to.deep.equal([
         'component',
     ]);
     expect([
         ...tabGroup.shadowRoot.querySelector('.tab-group').classList,
-    ]).to.deep.equal(['tab-group', 'primary']);
+    ]).to.deep.equal(['tab-group']);
     const slot = tabGroup.shadowRoot.querySelector('slot:not([name="nav"])');
     expect(slot).to.exist;
     expect(slot.assignedElements.length).to.equal(0);
 });
-it('renders a secondary variant', async () => {
-    const element = await fixture(html `
-    <glide-core-tab-group variant="secondary">
-      <glide-core-tab slot="nav" panel="1">Tab 1</glide-core-tab>
-      <glide-core-tab-panel name="1">Content for Tab 1</glide-core-tab-panel>
-    </glide-core-tab-group>
-  `);
-    expect([
-        ...element.shadowRoot.querySelector('.tab-group').classList,
-    ]).to.deep.equal(['tab-group', 'secondary']);
-});
-it('renders a vertical variant', async () => {
-    const element = await fixture(html `
-    <glide-core-tab-group variant="vertical">
-      <glide-core-tab slot="nav" panel="1">Tab 1</glide-core-tab>
-      <glide-core-tab-panel name="1">Content for Tab 1</glide-core-tab-panel>
-    </glide-core-tab-group>
-  `);
-    expect([
-        ...element.shadowRoot.querySelector('.tab-group').classList,
-    ]).to.deep.equal(['tab-group', 'vertical']);
-});
 it('can switch tabs', async () => {
     const tabGroup = await fixture(html `
     <glide-core-tab-group>
@@ -86,7 +67,7 @@ it('can switch tabs', async () => {
     expect(triggeredEvent.bubbles).to.be.true;
     expect(triggeredEvent.detail.panel).to.equal('2', 'Can get the panel name from the tab click event');
     secondTab.focus();
-    await sendKeys({ press: 'Tab' });
+    await sendKeys({ press: 'ArrowRight' });
     // Should be focused on third tab. Press Enter on it
     await sendKeys({ press: 'Enter' });
     const secondTriggeredEvent = await listener;
@@ -133,37 +114,10 @@ it('can use left/right, home and end keys to focus on tabs', async () => {
     await sendKeys({ press: 'Enter' });
     expect(thirdTab.active).to.equal(true);
 });
-it('can use up/down keys to focus on vertical tabs', async () => {
-    const tabGroup = await fixture(html `
-    <glide-core-tab-group variant="vertical">
-      <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] = tabGroup.tabElements;
-    firstTab.focus();
-    await sendKeys({ press: 'ArrowDown' });
-    await sendKeys({ press: 'Enter' });
-    expect(secondTab.active).to.equal(true, 'down works');
-    await sendKeys({ press: 'ArrowUp' });
-    await sendKeys({ press: 'Enter' });
-    expect(firstTab.active).to.equal(true, 'up works');
-    await sendKeys({ press: 'ArrowUp' });
-    await sendKeys({ press: 'Enter' });
-    expect(thirdTab.active).to.equal(true, 'up from first goes to last');
-    await sendKeys({ press: 'ArrowDown' });
-    await sendKeys({ press: 'Enter' });
-    expect(firstTab.active).to.equal(true, 'down from last goes to first');
-});
 it('throws an error when an element other than `glide-core-tab` is a child of the `nav` slot', async () => {
     await expectArgumentError(() => {
         return fixture(html `
-      <glide-core-tab-group variant="vertical">
+      <glide-core-tab-group>
         <div slot="nav">Tab 1</div>
         <glide-core-tab-panel name="1">Content for Tab 1</glide-core-tab-panel>
       </glide-core-tab-group>
@@ -173,13 +127,10 @@ it('throws an error when an element other than `glide-core-tab` is a child of th
 it('throws an error when an element other than `glide-core-tab-panel` is a child of the default slot', async () => {
     await expectArgumentError(() => {
         return fixture(html `
-      <glide-core-tab-group variant="vertical">
+      <glide-core-tab-group>
         <glide-core-tab slot="nav" panel="1">Tab 1</glide-core-tab>
         <div>Default Content</div>
       </glide-core-tab-group>
     `);
     });
 });
-function isPanelHidden(panel) {
-    return panel.shadowRoot?.firstElementChild?.classList.contains('hidden');
-}

package/dist/tab.group.test.interactions.d.ts

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

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

@@ -0,0 +1,454 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+import './tab.group.js';
+import './tab.js';
+import './tab.panel.js';
+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('renders an end overflow button on end overflow', async () => {
+    const element = 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 = element.querySelector('glide-core-tab-group');
+    const endOverflowButton = tabGroup?.shadowRoot?.querySelector('[data-test="overflow-end-button"]');
+    expect(endOverflowButton).to.be.not.null;
+});
+it('does not render an end overflow button when there is no end overflow', async () => {
+    const element = 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 = element.querySelector('glide-core-tab-group');
+    const endOverflowButton = tabGroup?.shadowRoot?.querySelector('[data-test="overflow-end-button"]');
+    expect(endOverflowButton).to.be.not.null;
+    endOverflowButton?.click();
+    await waitUntil(() => tabGroup?.shadowRoot?.querySelector('[data-test="overflow-end-button"]') === null);
+});
+it('renders a start overflow button on start overflow', async () => {
+    const element = 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 = element.querySelector('glide-core-tab-group');
+    // Need to get the tab group into a state where there
+    // is overflow on the right -- do this by first scrolling to the right
+    const endOverflowButton = tabGroup?.shadowRoot?.querySelector('[data-test="overflow-end-button"]');
+    expect(endOverflowButton).to.be.not.null;
+    endOverflowButton?.click();
+    await waitUntil(() => tabGroup?.shadowRoot?.querySelector('[data-test="overflow-start-button"]'));
+});
+it('does not render a start overflow button when there is no start overflow', async () => {
+    const element = 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 = element.querySelector('glide-core-tab-group');
+    const endOverflowButton = tabGroup?.shadowRoot?.querySelector('[data-test="overflow-end-button"]');
+    let startOverflowButton = tabGroup?.shadowRoot?.querySelector('[data-test="overflow-start-button"]');
+    expect(endOverflowButton).to.be.not.null;
+    expect(startOverflowButton).to.be.null;
+    endOverflowButton?.click();
+    await waitUntil(() => tabGroup?.shadowRoot?.querySelector('[data-test="overflow-start-button"]'));
+    startOverflowButton = tabGroup?.shadowRoot?.querySelector('[data-test="overflow-start-button"]');
+    startOverflowButton?.click();
+    await waitUntil(() => tabGroup?.shadowRoot?.querySelector('[data-test="overflow-start-button"]') === null);
+});
+it('scrolls tabs when overflow buttons are clicked', async () => {
+    const spy = sinon.spy();
+    const element = 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 = element.querySelector('glide-core-tab-group');
+    tabGroup?.shadowRoot
+        ?.querySelector('[role="tablist"]')
+        ?.addEventListener('scroll', spy);
+    const endOverflowButton = tabGroup?.shadowRoot?.querySelector('[data-test="overflow-end-button"]');
+    expect(endOverflowButton).to.be.not.null;
+    endOverflowButton?.click();
+    await waitUntil(() => tabGroup?.shadowRoot?.querySelector('[data-test="overflow-end-button"]') === null);
+    expect(spy.called).to.be.true;
+    spy.resetHistory();
+    const startOverflowButton = tabGroup?.shadowRoot?.querySelector('[data-test="overflow-start-button"]');
+    expect(startOverflowButton).to.be.not.null;
+    startOverflowButton?.click();
+    await waitUntil(() => tabGroup?.shadowRoot?.querySelector('[data-test="overflow-start-button"]') === null);
+    expect(spy.called).to.be.true;
+});
+it('removes overflow buttons when the component is resized and there is no overflow', async () => {
+    const element = await fixture(html `
+    <div style="width:25rem" 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 = element.querySelector('glide-core-tab-group');
+    const endOverflowButton = tabGroup?.shadowRoot?.querySelector('[data-test="overflow-end-button"]');
+    expect(endOverflowButton).to.be.not.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 element = 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 = element.querySelector('glide-core-tab-group');
+    const endOverflowButton = tabGroup?.shadowRoot?.querySelector('[data-test="overflow-end-button"]');
+    expect(endOverflowButton).to.be.null;
+    const container = document?.querySelector('[data-test="test-parent"]');
+    expect(container).to.be.not.null;
+    container.style.width = '25rem';
+    await waitUntil(() => tabGroup?.shadowRoot?.querySelector('[data-test="overflow-start-button"]') === null &&
+        tabGroup?.shadowRoot?.querySelector('[data-test="overflow-end-button"]'));
+});
+it('scrolls using keyboard when there is overflow and only a few pixels of overflowed tabs are on-screen', async () => {
+    const spy = sinon.spy();
+    const element = await fixture(html `
+    <div style="width: 17rem;">
+      <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>
+    </div>
+  `);
+    const tabGroup = element.querySelector('glide-core-tab-group');
+    expect(tabGroup).to.be.not.null;
+    tabGroup?.shadowRoot
+        ?.querySelector('[role="tablist"]')
+        ?.addEventListener('scroll', spy);
+    tabGroup?.tabElements[0].focus();
+    await sendKeys({ press: 'ArrowRight' });
+    await sendKeys({ press: 'ArrowRight' });
+    await sendKeys({ press: 'ArrowRight' });
+    await waitUntil(() => tabGroup?.shadowRoot?.querySelector('[data-test="overflow-end-button"]') === null);
+    expect(tabGroup?.tabElements[3]).to.have.focus;
+    expect(spy.callCount).to.equal(1);
+    spy.resetHistory();
+    await sendKeys({ press: 'ArrowLeft' });
+    await sendKeys({ press: 'ArrowLeft' });
+    await sendKeys({ press: 'ArrowLeft' });
+    await waitUntil(() => tabGroup?.shadowRoot?.querySelector('[data-test="overflow-start-button"]') === null);
+    expect(tabGroup?.tabElements[0]).to.have.focus;
+    expect(spy.callCount).to.equal(1);
+});
+it('has only one active tab that is tabbable after pressing the Enter key', async () => {
+    const tabGroup = 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] = tabGroup.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 tabGroup = 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] = tabGroup.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 tabGroup = 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] = tabGroup.tabElements;
+    const [firstPanel, secondPanel] = tabGroup.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 tabGroup = 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] = tabGroup.tabElements;
+    const [firstPanel, secondPanel] = tabGroup.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 tabGroup = 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] = tabGroup.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 tabGroup = 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] = tabGroup.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.js

@@ -1 +1 @@
-var GlideCoreTab_1,__decorate=this&&this.__decorate||function(t,e,i,r){var a,s=arguments.length,o=s<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(t,e,i,r);else for(var l=t.length-1;l>=0;l--)(a=t[l])&&(o=(s<3?a(o):s>3?a(e,i,o):a(e,i))||o);return s>3&&o&&Object.defineProperty(e,i,o),o};import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{customElement,property}from"lit/decorators.js";import styles from"./tab.styles.js";let GlideCoreTab=class GlideCoreTab extends LitElement{constructor(){super(...arguments),this.panel="",this.active=!1,this.variant="primary",this.disabled=!1}static{GlideCoreTab_1=this}static{this.instanceCount=0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){this.setAttribute("role","tab"),this.hasAttribute("id")||(this.id="glide-core-tab-"+GlideCoreTab_1.instanceCount++)}render(){return html`<div class="${classMap({component:!0,primary:"primary"===this.variant,secondary:"secondary"===this.variant,vertical:"vertical"===this.variant,active:this.active,disabled:this.disabled})}"><span class="container"><slot name="icon"></slot><div class="default-slot"><slot></slot></div></span></div>`}updated(t){t.has("active")&&this.setAttribute("aria-selected",this.active?"true":"false"),t.has("disabled")&&(this.disabled?(this.setAttribute("aria-disabled","true"),this.setAttribute("tabindex","-1")):(this.removeAttribute("aria-disabled"),this.setAttribute("tabindex","0")))}};__decorate([property({reflect:!0})],GlideCoreTab.prototype,"panel",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreTab.prototype,"active",void 0),__decorate([property({reflect:!0})],GlideCoreTab.prototype,"variant",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreTab.prototype,"disabled",void 0),GlideCoreTab=GlideCoreTab_1=__decorate([customElement("glide-core-tab")],GlideCoreTab);export default GlideCoreTab;
+var __decorate=this&&this.__decorate||function(t,e,i,o){var s,r=arguments.length,a=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,i,o);else for(var l=t.length-1;l>=0;l--)(s=t[l])&&(a=(r<3?s(a):r>3?s(e,i,a):s(e,i))||a);return r>3&&a&&Object.defineProperty(e,i,a),a};import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{customElement,property}from"lit/decorators.js";import{nanoid}from"nanoid";import styles from"./tab.styles.js";let GlideCoreTab=class GlideCoreTab extends LitElement{constructor(){super(...arguments),this.panel="",this.active=!1,this.disabled=!1,this.#t=nanoid()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){this.setAttribute("role","tab"),this.id=this.#t}render(){return html`<div class="${classMap({component:!0,active:this.active,disabled:this.disabled})}"><span class="container"><slot name="icon"></slot><div class="default-slot"><slot></slot></div></span></div>`}updated(t){t.has("active")&&this.setAttribute("aria-selected",this.active?"true":"false"),t.has("disabled")&&(this.disabled?(this.setAttribute("aria-disabled","true"),this.setAttribute("tabindex","-1")):this.removeAttribute("aria-disabled"))}#t};__decorate([property({reflect:!0})],GlideCoreTab.prototype,"panel",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreTab.prototype,"active",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreTab.prototype,"disabled",void 0),GlideCoreTab=__decorate([customElement("glide-core-tab")],GlideCoreTab);export default GlideCoreTab;

package/dist/tab.panel.d.ts

@@ -11,6 +11,7 @@ declare global {
  *
  */
 export default class GlideCoreTabPanel extends LitElement {
+    #private;
     static instanceCount: number;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];