@crowdstrike/glide-core 0.7.0 → 0.8.0

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

@@ -0,0 +1,258 @@
+/* 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.called).to.be.true;
+    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.called).to.be.true;
+});

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 GlideCoreTab_1,__decorate=this&&this.__decorate||function(t,e,i,s){var o,a=arguments.length,r=a<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,i,s);else for(var l=t.length-1;l>=0;l--)(o=t[l])&&(r=(a<3?o(r):a>3?o(e,i,r):o(e,i))||r);return a>3&&r&&Object.defineProperty(e,i,r),r};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.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,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({type:Boolean,reflect:!0})],GlideCoreTab.prototype,"disabled",void 0),GlideCoreTab=GlideCoreTab_1=__decorate([customElement("glide-core-tab")],GlideCoreTab);export default GlideCoreTab;

package/dist/tab.styles.js

@@ -12,16 +12,20 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
     .component {
       align-items: center;
       cursor: pointer;
-      display: inline-flex;
       font-family: var(--glide-core-heading-xxs-font-family);
       font-size: var(--glide-core-heading-xxxs-font-size);
       font-style: var(--glide-core-heading-xxs-font-style);
+      font-weight: var(--glide-core-body-sm-font-weight);
       gap: 0.4375rem;
       justify-content: center;
       line-height: 1.1875rem;
       padding-block: var(--glide-core-spacing-xs);
       padding-inline: var(--glide-core-spacing-md);
 
+      &.active {
+        border-block-end: 2px solid var(--glide-core-border-focus);
+      }
+
       &:hover {
         color: var(--glide-core-text-primary);
       }
@@ -35,74 +39,9 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       & .container {
         border-radius: 0.0625rem;
         display: flex;
+        flex-shrink: 0;
         gap: var(--glide-core-spacing-xs);
-      }
-
-      /* Primary */
-
-      &.primary {
-        border: 1px solid transparent;
-        border-block-end-width: 0;
-        border-end-end-radius: 0;
-        border-end-start-radius: 0;
-        border-start-end-radius: var(--glide-core-spacing-sm);
-        border-start-start-radius: var(--glide-core-spacing-sm);
-        font-weight: var(--glide-core-heading-xxs-font-weight);
-
-        &.active,
-        &:hover:not(.disabled) {
-          background-color: var(--glide-core-surface-base);
-          border: 1px solid var(--glide-core-border-primary);
-
-          /* hide the outer tab-group bottom border */
-          border-block-end: 1px solid var(--glide-core-surface-base);
-          margin-block-end: -1px;
-        }
-
-        & .active.default-slot {
-          background-color: red;
-        }
-      }
-
-      /* Secondary */
-
-      &.secondary {
-        border-color: transparent;
-        border-style: solid;
-        border-width: 1px;
-        font-weight: var(--glide-core-body-sm-font-weight);
-
-        &.active {
-          border-block-end: 2px solid var(--glide-core-border-focus);
-        }
-      }
-
-      /* Vertical */
-
-      &.vertical {
-        flex-direction: column;
-        font-weight: var(--glide-core-body-sm-font-weight);
-        padding-inline: var(--glide-core-spacing-xxs);
-
-        & .default-slot {
-          transform: rotate(180deg);
-          writing-mode: vertical-lr;
-        }
-
-        &.active {
-          border-inline-start: 2px solid var(--glide-core-border-focus);
-        }
-
-        &.active,
-        &.disabled {
-          background-color: var(--glide-core-surface-base);
-        }
-
-        & .container {
-          display: flex;
-          flex-direction: column;
-          gap: var(--glide-core-spacing-xs);
-        }
+        white-space: nowrap;
       }
     }
   `];

package/dist/tab.test.basics.js

@@ -12,29 +12,9 @@ it('renders correct markup and sets correct attributes for the default case', as
     await expect(element).to.not.be.accessible();
     expect(element.active).to.equal(false, 'active defaults to false');
     expect(element.disabled).to.equal(false, 'disabled defaults to false');
-    expect(element.variant).to.equal('primary');
     expect(element.getAttribute('aria-disabled')).to.equal(null, 'does not set aria-disabled');
     expect([...element.shadowRoot.firstElementChild.classList]).to.deep.equal([
         'component',
-        'primary',
-    ]);
-});
-it('renders a secondary variant', async () => {
-    const element = await fixture(html `
-    <glide-core-tab variant="secondary">Tab</glide-core-tab>
-  `);
-    expect([...element.shadowRoot.firstElementChild.classList]).to.deep.equal([
-        'component',
-        'secondary',
-    ]);
-});
-it('renders a vertical variant', async () => {
-    const element = await fixture(html `
-    <glide-core-tab variant="vertical">Tab</glide-core-tab>
-  `);
-    expect([...element.shadowRoot.firstElementChild.classList]).to.deep.equal([
-        'component',
-        'vertical',
     ]);
 });
 it('sets the panel attribute', async () => {

package/dist/tabs.stories.d.ts

@@ -5,5 +5,4 @@ import type { Meta, StoryObj } from '@storybook/web-components';
 declare const meta: Meta;
 export default meta;
 export declare const Primary: StoryObj;
-export declare const Secondary: StoryObj;
-export declare const Vertical: StoryObj;
+export declare const Overflow: StoryObj;

package/dist/tag.test.basics.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import { ArgumentError } from 'ow';
 import { aTimeout, expect, fixture, html } from '@open-wc/testing';
 import GlideCoreTag from './tag.js';

package/dist/textarea.test.basics.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import { expect, fixture } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import GlideCoreTextarea from './textarea.js';

package/dist/textarea.test.events.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import './textarea.js';
 import * as sinon from 'sinon';
 import { aTimeout, expect, fixture, oneEvent } from '@open-wc/testing';

package/dist/textarea.test.form.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import './textarea.js';
 import { expect, fixture, html } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';

package/dist/textarea.test.validity.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import { expect, fixture, html } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import GlideCoreTextarea from './textarea.js';

package/dist/toggle.test.basics.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import { expect, fixture, html } from '@open-wc/testing';
 import GlideCoreToggle from './toggle.js';
 GlideCoreToggle.shadowRootOptions.mode = 'open';

package/dist/toggle.test.events.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import { expect, fixture, html, oneEvent } from '@open-wc/testing';
 import GlideCoreToggle from './toggle.js';
 GlideCoreToggle.shadowRootOptions.mode = 'open';

package/dist/toggle.test.states.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
 import GlideCoreToggle from './toggle.js';
 GlideCoreToggle.shadowRootOptions.mode = 'open';

package/dist/tooltip.test.basics.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import './tooltip.js';
 import { ArgumentError } from 'ow';
 import { expect, fixture, html } from '@open-wc/testing';

package/dist/tooltip.test.interactions.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import './tooltip.js';
 import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';

package/dist/translations/en.js

@@ -1 +1 @@
-const translation={$code:"en",$name:"English",$dir:"ltr",close:"Close",dismiss:"Dismiss",open:"Open",selectAll:"Select all",clearEntry:"Clear entry",moreInformation:"More information",notifications:"Notifications",removeTag:e=>`Remove tag: ${e}`};export default translation;
+const translation={$code:"en",$name:"English",$dir:"ltr",close:"Close",dismiss:"Dismiss",open:"Open",selectAll:"Select all",clearEntry:"Clear entry",moreInformation:"More information",nextTab:"Next tab",notifications:"Notifications",previousTab:"Previous tab",removeTag:e=>`Remove tag: ${e}`};export default translation;

package/dist/translations/fr.js

@@ -1 +1 @@
-const translation={$code:"fr",$name:"French",$dir:"ltr",close:"Fermer",dismiss:"Congédier",open:"Ouvrir",selectAll:"Tout sélectionner",clearEntry:"Effacer l’entrée",moreInformation:"Plus d’informations",notifications:"Notifications",removeTag:e=>`Supprimer la balise : ${e}`};export default translation;
+const translation={$code:"fr",$name:"French",$dir:"ltr",close:"Fermer",dismiss:"Congédier",open:"Ouvrir",selectAll:"Tout sélectionner",clearEntry:"Effacer l’entrée",moreInformation:"Plus d’informations",notifications:"Notifications",nextTab:"",previousTab:"",removeTag:e=>`Supprimer la balise : ${e}`};export default translation;

package/dist/translations/ja.js

@@ -1 +1 @@
-const translation={$code:"ja",$name:"Japanese",$dir:"ltr",close:"閉じる",dismiss:"無視",open:"オープン",selectAll:"すべて選択",clearEntry:"入力のクリア",moreInformation:"詳細情報",notifications:"通知",removeTag:e=>`タグを削除: ${e}`};export default translation;
+const translation={$code:"ja",$name:"Japanese",$dir:"ltr",close:"閉じる",dismiss:"無視",open:"オープン",selectAll:"すべて選択",clearEntry:"入力のクリア",moreInformation:"詳細情報",notifications:"通知",nextTab:"",previousTab:"",removeTag:e=>`タグを削除: ${e}`};export default translation;

package/dist/tree.item.d.ts

@@ -1,6 +1,6 @@
 import './tree.item.menu.js';
 import { LitElement } from 'lit';
-import GlideCoreMenu from './menu.js';
+import type GlideCoreMenu from './menu.js';
 declare global {
     interface HTMLElementTagNameMap {
         'glide-core-tree-item': GlideCoreTreeItem;

package/dist/tree.item.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,i,o){var s,r=arguments.length,l=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,i,o);else for(var n=e.length-1;n>=0;n--)(s=e[n])&&(l=(r<3?s(l):r>3?s(t,i,l):s(t,i))||l);return r>3&&l&&Object.defineProperty(t,i,l),l};import"./tree.item.menu.js";import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,queryAssignedElements,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import GlideCoreMenu from"./menu.js";import{when}from"lit/directives/when.js";import styles from"./tree.item.styles.js";let GlideCoreTreeItem=class GlideCoreTreeItem extends LitElement{constructor(){super(...arguments),this.expanded=!1,this.label="",this.level=1,this.selected=!1,this.removeIndentation=!1,this.nonCollapsible=!1,this.childTreeItems=[],this.#e=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}firstUpdated(){this.#t()}focus(){this.#e.value?.focus()}get hasChildTreeItems(){return this.childTreeItems.length>0}get hasExpandIcon(){return this.hasChildTreeItems&&!this.nonCollapsible}render(){return html`<div class="${classMap({component:!0,expanded:this.expanded,selected:this.selected})}" role="treeitem" aria-label="${this.label}" aria-selected="${ifDefined(this.#i)}" aria-expanded="${ifDefined(this.#o)}"><div class="${classMap({"label-container":!0})}" tabindex="-1" ${ref(this.#e)}><div style="flex-shrink: 0; width:${this.#s};"></div>${when(!this.removeIndentation||this.hasExpandIcon,(()=>html`<div class="expand-icon-container">${when(this.hasExpandIcon,(()=>html`<div><svg aria-hidden="true" class="${classMap({"expand-icon":!0,"expand-icon-expanded":this.expanded})}" width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>`))}</div>`))}<slot name="prefix"></slot><div class="label">${this.label}</div><div class="icon-container"><slot name="menu"></slot><slot name="suffix"></slot></div></div><div class="child-items" role="group"><slot></slot></div></div>`}selectItem(e){let t;for(const i of this.slotElements)if(e===i)i.setAttribute("selected","true"),t=i;else{i.removeAttribute("selected");const o=i.selectItem(e);o&&(t=o)}return t}setContainingBlock(e){for(const t of this.menuSlotAssignedElements)t.setContainingBlock(e)}toggleExpand(){this.expanded=!this.expanded}#e;get#o(){return this.hasChildTreeItems?this.expanded?"true":"false":void 0}get#i(){return this.hasChildTreeItems?void 0:this.selected?"true":"false"}get#s(){return 20*(this.level-1)+"px"}#t(){const e=[];for(const t of this.slotElements)t.level=this.level+1,e.push(t);this.childTreeItems=e}};__decorate([property({type:Boolean})],GlideCoreTreeItem.prototype,"expanded",void 0),__decorate([property({reflect:!0})],GlideCoreTreeItem.prototype,"label",void 0),__decorate([property({type:Number})],GlideCoreTreeItem.prototype,"level",void 0),__decorate([property({type:Boolean})],GlideCoreTreeItem.prototype,"selected",void 0),__decorate([property({type:Boolean,attribute:"remove-indentation"})],GlideCoreTreeItem.prototype,"removeIndentation",void 0),__decorate([property({type:Boolean,attribute:"non-collapsible"})],GlideCoreTreeItem.prototype,"nonCollapsible",void 0),__decorate([queryAssignedElements({slot:"menu"})],GlideCoreTreeItem.prototype,"menuSlotAssignedElements",void 0),__decorate([queryAssignedElements({slot:"prefix"})],GlideCoreTreeItem.prototype,"prefixSlotAssignedElements",void 0),__decorate([queryAssignedElements()],GlideCoreTreeItem.prototype,"slotElements",void 0),__decorate([queryAssignedElements({slot:"suffix"})],GlideCoreTreeItem.prototype,"suffixSlotAssignedElements",void 0),__decorate([state()],GlideCoreTreeItem.prototype,"childTreeItems",void 0),GlideCoreTreeItem=__decorate([customElement("glide-core-tree-item")],GlideCoreTreeItem);export default GlideCoreTreeItem;
+var __decorate=this&&this.__decorate||function(e,t,i,o){var s,r=arguments.length,l=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,i,o);else for(var n=e.length-1;n>=0;n--)(s=e[n])&&(l=(r<3?s(l):r>3?s(t,i,l):s(t,i))||l);return r>3&&l&&Object.defineProperty(t,i,l),l};import"./tree.item.menu.js";import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,queryAssignedElements,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{when}from"lit/directives/when.js";import styles from"./tree.item.styles.js";let GlideCoreTreeItem=class GlideCoreTreeItem extends LitElement{constructor(){super(...arguments),this.expanded=!1,this.label="",this.level=1,this.selected=!1,this.removeIndentation=!1,this.nonCollapsible=!1,this.childTreeItems=[],this.#e=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}firstUpdated(){this.#t()}focus(){this.#e.value?.focus()}get hasChildTreeItems(){return this.childTreeItems.length>0}get hasExpandIcon(){return this.hasChildTreeItems&&!this.nonCollapsible}render(){return html`<div class="${classMap({component:!0,expanded:this.expanded,selected:this.selected})}" role="treeitem" aria-label="${this.label}" aria-selected="${ifDefined(this.#i)}" aria-expanded="${ifDefined(this.#o)}"><div class="${classMap({"label-container":!0})}" tabindex="-1" ${ref(this.#e)}><div style="flex-shrink: 0; width:${this.#s};"></div>${when(!this.removeIndentation||this.hasExpandIcon,(()=>html`<div class="expand-icon-container">${when(this.hasExpandIcon,(()=>html`<div><svg aria-hidden="true" class="${classMap({"expand-icon":!0,"expand-icon-expanded":this.expanded})}" width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>`))}</div>`))}<slot name="prefix"></slot><div class="label">${this.label}</div><div class="icon-container"><slot name="menu"></slot><slot name="suffix"></slot></div></div><div class="child-items" role="group"><slot></slot></div></div>`}selectItem(e){let t;for(const i of this.slotElements)if(e===i)i.setAttribute("selected","true"),t=i;else{i.removeAttribute("selected");const o=i.selectItem(e);o&&(t=o)}return t}setContainingBlock(e){for(const t of this.menuSlotAssignedElements)t.setContainingBlock(e)}toggleExpand(){this.expanded=!this.expanded}#e;get#o(){return this.hasChildTreeItems?this.expanded?"true":"false":void 0}get#i(){return this.hasChildTreeItems?void 0:this.selected?"true":"false"}get#s(){return 20*(this.level-1)+"px"}#t(){const e=[];for(const t of this.slotElements)t.level=this.level+1,e.push(t);this.childTreeItems=e}};__decorate([property({type:Boolean})],GlideCoreTreeItem.prototype,"expanded",void 0),__decorate([property({reflect:!0})],GlideCoreTreeItem.prototype,"label",void 0),__decorate([property({type:Number})],GlideCoreTreeItem.prototype,"level",void 0),__decorate([property({type:Boolean})],GlideCoreTreeItem.prototype,"selected",void 0),__decorate([property({type:Boolean,attribute:"remove-indentation"})],GlideCoreTreeItem.prototype,"removeIndentation",void 0),__decorate([property({type:Boolean,attribute:"non-collapsible"})],GlideCoreTreeItem.prototype,"nonCollapsible",void 0),__decorate([queryAssignedElements({slot:"menu"})],GlideCoreTreeItem.prototype,"menuSlotAssignedElements",void 0),__decorate([queryAssignedElements({slot:"prefix"})],GlideCoreTreeItem.prototype,"prefixSlotAssignedElements",void 0),__decorate([queryAssignedElements()],GlideCoreTreeItem.prototype,"slotElements",void 0),__decorate([queryAssignedElements({slot:"suffix"})],GlideCoreTreeItem.prototype,"suffixSlotAssignedElements",void 0),__decorate([state()],GlideCoreTreeItem.prototype,"childTreeItems",void 0),GlideCoreTreeItem=__decorate([customElement("glide-core-tree-item")],GlideCoreTreeItem);export default GlideCoreTreeItem;

package/dist/tree.item.menu.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,l){var r,n=arguments.length,i=n<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,o,l);else for(var m=e.length-1;m>=0;m--)(r=e[m])&&(i=(n<3?r(i):n>3?r(t,o,i):r(t,o))||i);return n>3&&i&&Object.defineProperty(t,o,i),i};import"./icon-button.js";import"./menu.js";import"./menu.options.js";import{LitElement,html}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{owSlot,owSlotType}from"./library/ow.js";import GlideCoreMenu from"./menu.js";import GlideCoreMenuButton from"./menu.button.js";import GlideCoreMenuLink from"./menu.link.js";import ow from"./library/ow.js";import styles from"./tree.item.menu.styles.js";let GlideCoreTreeItemMenu=class GlideCoreTreeItemMenu extends LitElement{constructor(){super(...arguments),this.placement="bottom-start",this.#e=createRef(),this.#t=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreMenuButton,GlideCoreMenuLink])}render(){return html`<glide-core-menu class="component" placement="${this.placement}" ${ref(this.#t)}><glide-core-menu-options><slot @slotchange="${this.#o}" ${ref(this.#e)}></slot></glide-core-menu-options><glide-core-icon-button slot="target" variant="tertiary"><svg width="4" height="14" viewBox="0 0 4 18" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 15C2.55228 15 3 15.4477 3 16C3 16.5523 2.55228 17 2 17C1.44772 17 1 16.5523 1 16C1 15.4477 1.44772 15 2 15Z"/><path d="M2 8C2.55228 8 3 8.44772 3 9C3 9.55228 2.55228 10 2 10C1.44772 10 1 9.55228 1 9C1 8.44772 1.44772 8 2 8Z"/><path d="M2 1C2.55228 1 3 1.44772 3 2C3 2.55228 2.55228 3 2 3C1.44772 3 1 2.55228 1 2C1 1.44772 1.44772 1 2 1Z"/></svg></glide-core-icon-button></glide-core-menu>`}setContainingBlock(e){ow(this.#t.value,ow.object.instanceOf(Element)),this.#t.value.setContainingBlock(e)}#e;#t;#o(){owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreMenuButton,GlideCoreMenuLink])}};__decorate([property({reflect:!0})],GlideCoreTreeItemMenu.prototype,"placement",void 0),GlideCoreTreeItemMenu=__decorate([customElement("glide-core-tree-item-menu")],GlideCoreTreeItemMenu);export default GlideCoreTreeItemMenu;
+var __decorate=this&&this.__decorate||function(e,t,o,l){var r,n=arguments.length,i=n<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,o,l);else for(var m=e.length-1;m>=0;m--)(r=e[m])&&(i=(n<3?r(i):n>3?r(t,o,i):r(t,o))||i);return n>3&&i&&Object.defineProperty(t,o,i),i};import"./icon-button.js";import"./menu.js";import"./menu.options.js";import{LitElement,html}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{owSlot,owSlotType}from"./library/ow.js";import GlideCoreMenuButton from"./menu.button.js";import GlideCoreMenuLink from"./menu.link.js";import ow from"./library/ow.js";import styles from"./tree.item.menu.styles.js";let GlideCoreTreeItemMenu=class GlideCoreTreeItemMenu extends LitElement{constructor(){super(...arguments),this.placement="bottom-start",this.#e=createRef(),this.#t=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreMenuButton,GlideCoreMenuLink])}render(){return html`<glide-core-menu class="component" placement="${this.placement}" ${ref(this.#t)}><glide-core-menu-options><slot @slotchange="${this.#o}" ${ref(this.#e)}></slot></glide-core-menu-options><glide-core-icon-button slot="target" variant="tertiary"><svg width="4" height="14" viewBox="0 0 4 18" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 15C2.55228 15 3 15.4477 3 16C3 16.5523 2.55228 17 2 17C1.44772 17 1 16.5523 1 16C1 15.4477 1.44772 15 2 15Z"/><path d="M2 8C2.55228 8 3 8.44772 3 9C3 9.55228 2.55228 10 2 10C1.44772 10 1 9.55228 1 9C1 8.44772 1.44772 8 2 8Z"/><path d="M2 1C2.55228 1 3 1.44772 3 2C3 2.55228 2.55228 3 2 3C1.44772 3 1 2.55228 1 2C1 1.44772 1.44772 1 2 1Z"/></svg></glide-core-icon-button></glide-core-menu>`}setContainingBlock(e){ow(this.#t.value,ow.object.instanceOf(Element)),this.#t.value.setContainingBlock(e)}#e;#t;#o(){owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreMenuButton,GlideCoreMenuLink])}};__decorate([property({reflect:!0})],GlideCoreTreeItemMenu.prototype,"placement",void 0),GlideCoreTreeItemMenu=__decorate([customElement("glide-core-tree-item-menu")],GlideCoreTreeItemMenu);export default GlideCoreTreeItemMenu;

package/dist/tree.item.test.basics.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import { expect, fixture, html } from '@open-wc/testing';
 import TreeItem from './tree.item.js';
 TreeItem.shadowRootOptions.mode = 'open';

package/dist/tree.test.basics.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import './tree.item.icon-button.js';
 import './tree.item.js';
 import './tree.js';

package/dist/tree.test.events.js

@@ -1,7 +1,7 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import './tree.item.menu.js';
 import './tree.js';
 import { expect, fixture, html, oneEvent } from '@open-wc/testing';
-import GlideCoreTree from './tree.js';
 import GlideCoreTreeItem from './tree.item.js';
 it('dispatches an "item-selected" event when an item is clicked', async () => {
     const component = await fixture(html `