@crowdstrike/glide-core 0.7.0 → 0.8.0

package/dist/dropdown.test.interactions.filterable.js

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

package/dist/dropdown.test.interactions.js

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

package/dist/dropdown.test.interactions.multiple.js

@@ -1,9 +1,9 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import { assert, elementUpdated, expect, fixture, html, } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import { sendMouse } from '@web/test-runner-commands';
 import GlideCoreDropdown from './dropdown.js';
 import GlideCoreDropdownOption from './dropdown.option.js';
-import GlideCoreTag from './tag.js';
 GlideCoreDropdown.shadowRootOptions.mode = 'open';
 GlideCoreDropdownOption.shadowRootOptions.mode = 'open';
 it('opens on click', async () => {

package/dist/dropdown.test.interactions.single.js

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

package/dist/dropdown.test.validity.js

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

package/dist/form-controls-layout.test.basics.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import './checkbox.js';
 import './input.js';
 import { ArgumentError } from 'ow';

package/dist/icon-button.test.basics.js

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

package/dist/input.test.basics.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 GlideCoreInput from './input.js';

package/dist/input.test.events.js

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

package/dist/input.test.focus.js

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

package/dist/input.test.form.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import './input.js';
 import { expect, fixture, html } from '@open-wc/testing';
 it('can be reset to initial value', async () => {

package/dist/input.test.validity.js

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

package/dist/label.styles.js

@@ -5,10 +5,10 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
         display: grid;
 
         /*
-         Since 1fr is actually minmax(auto, 1fr), this explicit minmax will make it so
-         the first column is sized to its content, and the second column fills the rest
-         of the space.
-        */
+       Since 1fr is actually minmax(auto, 1fr), this explicit minmax will make it so
+       the first column is sized to its content, and the second column fills the rest
+       of the space.
+      */
         grid-template-columns: auto minmax(0, 1fr);
       }
 
@@ -54,9 +54,9 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
 
       &.visible {
         /*
-      The default is "display: content". But "order" does not work with
-      "display: content" and "order" is needed above.
-    */
+    The default is "display: content". But "order" does not work with
+    "display: content" and "order" is needed above.
+  */
         display: block;
       }
     }
@@ -68,10 +68,10 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       color: var(--glide-core-text-body-1);
 
       /*
-      Any "display" that's not inline-level will do. We don't want the button to
-      acquire a line box, which will make it taller than its content and thus
-      make it difficult to center vertically with the label.
-      */
+    Any "display" that's not inline-level will do. We don't want the button to
+    acquire a line box, which will make it taller than its content and thus
+    make it difficult to center vertically with the label.
+    */
 
       display: flex;
       padding: 0;

package/dist/label.test.basics.js

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

package/dist/library/localize.d.ts

@@ -13,5 +13,7 @@ export interface Translation extends DefaultTranslation {
     clearEntry: string;
     moreInformation: string;
     notifications: string;
+    nextTab: string;
+    previousTab: string;
     removeTag: (name: string) => string;
 }

package/dist/library/ow.test.d.ts

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
 export default class GlideCoreSlot extends LitElement {
-    render(): any;
+    static shadowRootOptions: ShadowRootInit;
+    render(): import("lit").TemplateResult<1>;
 }

package/dist/library/ow.test.js

@@ -1,24 +1,29 @@
+/* eslint-disable @typescript-eslint/no-unsafe-call */
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-/* eslint-disable @crowdstrike/glide-core-eslint-plugin/prefer-closed-shadow-root */
-/* This is a test file that doesn't contain one of our components, so we don't need to enforce this rule. */
 import { LitElement } from 'lit';
 import { assert, expect, fixture, html } from '@open-wc/testing';
 import { customElement } from 'lit/decorators.js';
+import { html as litHtml } from 'lit';
 import { owSlot, owSlotType } from './ow.js';
 let GlideCoreSlot = class GlideCoreSlot extends LitElement {
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        mode: 'closed',
+    }; }
     render() {
-        return html `<slot></slot>`;
+        return litHtml `<slot></slot>`;
     }
 };
 GlideCoreSlot = __decorate([
     customElement('glide-core-slot')
 ], GlideCoreSlot);
 export default GlideCoreSlot;
+GlideCoreSlot.shadowRootOptions.mode = 'open';
 it('throws when a slot lacks a node', async () => {
     const component = await fixture(html `<glide-core-slot></glide-core-slot>`);
     const slot = component.shadowRoot?.querySelector('slot');

package/dist/menu.button.test.basics.js

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

package/dist/menu.link.test.basics.js

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

package/dist/menu.options.test.basics.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import './menu.button.js';
 import './menu.link.js';
 import { ArgumentError } from 'ow';

package/dist/menu.styles.js

@@ -31,10 +31,10 @@ import{css}from"lit";export default[css`
       visibility: hidden;
 
       /*
-        ".container" is relative and many Menus may be stacked in a column.
-        This ensures the ".menu" of Menus earlier in the column aren't obscured
-        by the ".target-container" that come later.
-      */
+      ".container" is relative and many Menus may be stacked in a column.
+      This ensures the ".menu" of Menus earlier in the column aren't obscured
+      by the ".target-container" that come later.
+    */
       z-index: 1;
 
       &.visible {

package/dist/menu.test.basics.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import './menu.button.js';
 import './menu.link.js';
 import { ArgumentError } from 'ow';

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

@@ -1,2 +1,3 @@
+import './menu.js';
 import './menu.link.js';
 import './menu.options.js';

package/dist/menu.test.events.js

@@ -1,7 +1,8 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+import './menu.js';
 import './menu.link.js';
 import './menu.options.js';
 import { expect, fixture, html, oneEvent } from '@open-wc/testing';
-import GlideCoreMenu from './menu.js';
 it('dispatches a "click" event when a link is clicked', async () => {
     const component = await fixture(html `<glide-core-menu open>
       <button slot="target">Target</button>

package/dist/menu.test.focus.js

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

package/dist/menu.test.interactions.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);

package/dist/modal.icon-button.test.basics.js

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

package/dist/modal.tertiary-icon.test.basics.js

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

package/dist/modal.test.accessibility.js

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

package/dist/modal.test.basics.js

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

package/dist/modal.test.close.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 GlideCoreModal from './modal.js';

package/dist/modal.test.events.js

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

package/dist/modal.test.floating-components.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import { expect, fixture, html } from '@open-wc/testing';
 import GlideCoreModal from './modal.js';
 import GlideCoreModalTertiaryIcon from './modal.tertiary-icon.js';

package/dist/modal.test.lock-scroll.js

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

package/dist/modal.test.methods.js

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

package/dist/modal.test.scrollbars.js

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

package/dist/radio-group.test.basics.js

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

package/dist/radio-group.test.events.js

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

package/dist/radio-group.test.focus.js

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

package/dist/radio-group.test.form.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import { assert, elementUpdated, expect, fixture, html, } from '@open-wc/testing';
 import GlideCoreRadio from './radio.js';
 import GlideCoreRadioGroup from './radio-group.js';

package/dist/radio-group.test.validity.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
 import GlideCoreRadio from './radio.js';
 import GlideCoreRadioGroup from './radio-group.js';

package/dist/split-button.test.basics.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import './split-button.js';
 import { assert, elementUpdated, expect, fixture, html, } from '@open-wc/testing';
 import GlideCoreSplitButton from './split-button.js';

package/dist/split-container.test.basics.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import './split-button.js';
 import './split-container.js';
 import './split-link.js';

package/dist/split-link.test.basics.js

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

package/dist/split-link.test.interactions.js

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

package/dist/tab.d.ts

@@ -22,8 +22,6 @@ export default class GlideCoreTab extends LitElement {
     panel: string;
     /** Sets the active attribute on the tab. */
     active: boolean;
-    /** Sets the variant attribute on the tab. */
-    variant: string;
     /** Disables the tab. */
     disabled: boolean;
     protected firstUpdated(): void;

package/dist/tab.group.d.ts

@@ -18,17 +18,15 @@ export default class GlideCoreTabGroup extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
-    /**
-     * Sets the variant attribute on the tab group.
-     * Automatically sets this variant on all <glide-core-tab> components inside the default slot
-     * */
-    variant: string;
     /**
      * The tab element that is currently active
      * */
     activeTab?: GlideCoreTab;
+    isShowOverflowStartButton: boolean;
+    isShowOverflowEndButton: boolean;
     panelElements: GlideCoreTabPanel[];
     tabElements: GlideCoreTab[];
+    disconnectedCallback(): void;
     firstUpdated(): void;
     render(): import("lit").TemplateResult<1>;
     updated(): void;

package/dist/tab.group.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,a){var s,i=arguments.length,r=i<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,o):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,o,a);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(r=(i<3?s(r):i>3?s(t,o,r):s(t,o))||r);return i>3&&r&&Object.defineProperty(t,o,r),r};import"./icon-button.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{owSlotType}from"./library/ow.js";import GlideCoreTab from"./tab.js";import GlideCoreTabPanel from"./tab.panel.js";import styles from"./tab.group.styles.js";let GlideCoreTabGroup=class GlideCoreTabGroup extends LitElement{constructor(){super(...arguments),this.variant="primary",this.#e=createRef(),this.#t=createRef(),this.#o=e=>{const t=e.target.closest("glide-core-tab");t&&t instanceof GlideCoreTab&&!t.disabled&&this.#a(t)},this.#s=e=>{const t=e.target.closest("glide-core-tab");if(["Enter"," "].includes(e.key)&&t&&t instanceof GlideCoreTab&&!t.disabled&&(this.#a(t),e.preventDefault()),["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(e.key)){const t=this.tabElements.find((e=>e.matches(":focus")));if("glide-core-tab"===t?.tagName.toLowerCase()){let o=this.tabElements.indexOf(t);switch(e.key){case"Home":o=0;break;case"End":o=this.tabElements.length-1;break;case"vertical"===this.variant?"ArrowUp":"ArrowLeft":o--;break;case"vertical"===this.variant?"ArrowDown":"ArrowRight":o++}o<0&&(o=this.tabElements.length-1),o>this.tabElements.length-1&&(o=0),this.tabElements[o].focus({preventScroll:!0}),e.preventDefault()}}}}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlotType(this.#t.value,[GlideCoreTab]),owSlotType(this.#e.value,[GlideCoreTabPanel]),this.#i(),this.#r()}render(){return html`<div class="${classMap({component:!0,vertical:"vertical"===this.variant})}" @click="${this.#o}" @keydown="${this.#s}"><div role="tablist" class="${classMap({"tab-group":!0,[this.variant]:!0})}"><slot name="nav" @slotchange="${this.#l}" ${ref(this.#t)}></slot></div><slot @slotchange="${this.#n}" ${ref(this.#e)}></slot></div>`}updated(){this.#i()}#e;#t;#o;#s;#n(){owSlotType(this.#e.value,[GlideCoreTabPanel])}#l(){owSlotType(this.#t.value,[GlideCoreTab])}#r(){for(const[e,t]of this.tabElements.entries()){let o;this.activeTab||0!==e?o=this.activeTab===t:(this.activeTab=t,o=!0),t.active=o}for(const e of this.panelElements){const t=this.activeTab?.getAttribute("panel"),o=e.getAttribute("name");e.isActive=o===t}}#i(){for(const e of this.tabElements){e.variant=this.variant;for(const t of this.panelElements)e.setAttribute("aria-controls",t.getAttribute("id")),t.setAttribute("aria-labelledby",e.getAttribute("id"))}}#a(e){this.activeTab=e,this.#r(),this.dispatchEvent(new CustomEvent("tab-show",{bubbles:!0,detail:{panel:e.panel}}))}};__decorate([property({reflect:!0})],GlideCoreTabGroup.prototype,"variant",void 0),__decorate([state()],GlideCoreTabGroup.prototype,"activeTab",void 0),__decorate([queryAssignedElements()],GlideCoreTabGroup.prototype,"panelElements",void 0),__decorate([queryAssignedElements({slot:"nav"})],GlideCoreTabGroup.prototype,"tabElements",void 0),GlideCoreTabGroup=__decorate([customElement("glide-core-tab-group")],GlideCoreTabGroup);export default GlideCoreTabGroup;
+var __decorate=this&&this.__decorate||function(t,e,o,i){var s,l=arguments.length,n=l<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,o,i);else for(var r=t.length-1;r>=0;r--)(s=t[r])&&(n=(l<3?s(n):l>3?s(e,o,n):s(e,o))||n);return l>3&&n&&Object.defineProperty(e,o,n),n};import"./icon-button.js";import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,queryAssignedElements,state}from"lit/decorators.js";import{when}from"lit/directives/when.js";import GlideCoreTab from"./tab.js";import GlideCoreTabPanel from"./tab.panel.js";import ow,{owSlotType}from"./library/ow.js";import styles from"./tab.group.styles.js";let GlideCoreTabGroup=class GlideCoreTabGroup extends LitElement{constructor(){super(...arguments),this.isShowOverflowStartButton=!1,this.isShowOverflowEndButton=!1,this.#t=100,this.#e=createRef(),this.#o=new LocalizeController(this),this.#i=createRef(),this.#s=createRef(),this.#l=createRef(),this.#n=null,this.#r=null,this.#a=null,this.#h=createRef(),this.#c=t=>{const e=t.target.closest("glide-core-tab");e&&e instanceof GlideCoreTab&&!e.disabled&&this.#u(e)},this.#f=()=>{this.#d("right",!0)},this.#b=()=>{this.#d("left",!0)},this.#v=t=>{const e=t.target.closest("glide-core-tab");if(["Enter"," "].includes(t.key)&&e&&e instanceof GlideCoreTab&&!e.disabled&&(this.#u(e),t.preventDefault()),["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key)){const e=this.tabElements.find((t=>t.matches(":focus")));if("glide-core-tab"===e?.tagName.toLowerCase()){let o=this.tabElements.indexOf(e);switch(t.key){case"Home":o=0;break;case"End":o=this.tabElements.length-1;break;case"ArrowLeft":o--;break;case"ArrowRight":o++}if(o<0&&(o=this.tabElements.length-1),o>this.tabElements.length-1&&(o=0),this.tabElements[o].focus({preventScroll:!1}),this.#m(),this.isShowOverflowStartButton&&this.#l.value&&"ArrowLeft"===t.key){const t=Number.parseInt(window.getComputedStyle(document.documentElement).fontSize),e=this.#l.value?.getBoundingClientRect(),{right:i}=e,s=this.tabElements[o]?.getBoundingClientRect(),{right:l}=s;i>l-t&&this.#d("left")}if(this.isShowOverflowEndButton&&this.#s.value&&"ArrowRight"===t.key){const t=Number.parseInt(window.getComputedStyle(document.documentElement).fontSize),e=this.#s.value?.getBoundingClientRect(),{left:i}=e,s=this.tabElements[o]?.getBoundingClientRect(),{left:l}=s;i<l+t&&this.#d("right")}t.preventDefault()}}},this.#m=()=>{this.#w(),this.#E()}}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}disconnectedCallback(){this.#n?.disconnect(),this.#n=null}firstUpdated(){owSlotType(this.#i.value,[GlideCoreTab]),owSlotType(this.#e.value,[GlideCoreTabPanel]),this.#p(),this.#g(),this.#T()}render(){return html`<div class="component" @click="${this.#c}" @keydown="${this.#v}"><div class="tab-container"><div class="overflow-button-container" style="height: ${this.#h.value?.clientHeight}px">${when(this.isShowOverflowStartButton,(()=>html`<button style="height: ${this.#h.value?.clientHeight}px" class="overflow" @click="${this.#b}" tabindex="-1" aria-label="${this.#o.term("previousTab")}" data-test="overflow-start-button" ${ref(this.#l)}><svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M15 6L9 12L15 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>`))}</div><div role="tablist" class="tab-group" ${ref(this.#h)} @scroll="${this.#R}"><slot name="nav" @slotchange="${this.#y}" ${ref(this.#i)}></slot></div><div class="overflow-button-container" style="height: ${this.#h.value?.clientHeight}px">${when(this.isShowOverflowEndButton,(()=>html`<button style="height: ${this.#h.value?.clientHeight}px" class="overflow" @click="${this.#f}" tabindex="-1" aria-label="${this.#o.term("nextTab")}" data-test="overflow-end-button" ${ref(this.#s)}><svg aria-hidden="true" width="18" height="18" 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></button>`))}</div></div><slot @slotchange="${this.#S}" ${ref(this.#e)}></slot></div>`}updated(){this.#p()}#t;#e;#o;#i;#s;#l;#n;#r;#a;#h;#c;#f;#b;#v;#m;#S(){owSlotType(this.#e.value,[GlideCoreTabPanel])}#y(){owSlotType(this.#i.value,[GlideCoreTab]),this.#m()}#R(){this.#a&&clearTimeout(this.#a),this.#a=setTimeout((()=>{this.#m()}),this.#t)}#d(t,e){const o="right"===t?1:-1;ow(this.#h.value,ow.object.instanceOf(HTMLElement));const i=o*this.#h.value?.clientWidth*.5;this.#h.value?.scrollBy({left:i,top:0,behavior:e?"smooth":"auto"})}#g(){for(const[t,e]of this.tabElements.entries()){let o;this.activeTab||0!==t?o=this.activeTab===e:(this.activeTab=e,o=!0),e.active=o}for(const t of this.panelElements){const e=this.activeTab?.getAttribute("panel"),o=t.getAttribute("name");t.isActive=o===e}}#E(){const t=this.#h.value,e=t?.getBoundingClientRect();ow(t,ow.object.instanceOf(HTMLElement));if(e){const{width:o}=e,i=t.scrollLeft+o,s=t.scrollWidth;this.isShowOverflowEndButton=s-i>1}}#w(){ow(this.#h.value,ow.object.instanceOf(HTMLElement)),this.isShowOverflowStartButton=this.#h.value.scrollLeft>0}#T(){this.#n=new ResizeObserver((t=>{t?.at(0)?.target===this.#h.value&&(this.#r&&clearTimeout(this.#r),this.#r=setTimeout((()=>{this.#m()}),this.#t))})),ow(this.#h.value,ow.object.instanceOf(HTMLElement)),this.#n.observe(this.#h.value)}#p(){for(const t of this.tabElements)for(const e of this.panelElements)t.setAttribute("aria-controls",e.getAttribute("id")),e.setAttribute("aria-labelledby",t.getAttribute("id"))}#u(t){this.activeTab=t,this.#g(),this.dispatchEvent(new CustomEvent("tab-show",{bubbles:!0,detail:{panel:t.panel}}))}};__decorate([state()],GlideCoreTabGroup.prototype,"activeTab",void 0),__decorate([state()],GlideCoreTabGroup.prototype,"isShowOverflowStartButton",void 0),__decorate([state()],GlideCoreTabGroup.prototype,"isShowOverflowEndButton",void 0),__decorate([queryAssignedElements()],GlideCoreTabGroup.prototype,"panelElements",void 0),__decorate([queryAssignedElements({slot:"nav"})],GlideCoreTabGroup.prototype,"tabElements",void 0),GlideCoreTabGroup=__decorate([customElement("glide-core-tab-group")],GlideCoreTabGroup);export default GlideCoreTabGroup;

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>
@@ -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';