@crowdstrike/glide-core 0.6.5 → 0.8.0

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.d.ts

@@ -44,6 +44,7 @@ export default class GlideCoreRadioGroup extends LitElement {
     updated(changedProperties: PropertyValueMap<GlideCoreRadioGroup>): void;
     willUpdate(changedProperties: PropertyValueMap<GlideCoreRadioGroup>): void;
     constructor();
+    private isBlurring;
     private isCheckingValidity;
     private isReportValidityOrSubmit;
 }

package/dist/radio-group.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,i,t,o){var s,d=arguments.length,a=d<3?i:null===o?o=Object.getOwnPropertyDescriptor(i,t):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,i,t,o);else for(var r=e.length-1;r>=0;r--)(s=e[r])&&(a=(d<3?s(a):d>3?s(i,t,a):s(i,t))||a);return d>3&&a&&Object.defineProperty(i,t,a),a};import"./label.js";import"./tooltip.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,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{owSlot,owSlotType}from"./library/ow.js";import GlideCoreRadio from"./radio.js";import styles from"./radio-group.styles.js";let GlideCoreRadioGroup=class GlideCoreRadioGroup extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}checkValidity(){return this.isCheckingValidity=!0,this.#e.checkValidity()}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#i),this.#t=void 0}firstUpdated(){owSlot(this.#o.value),owSlotType(this.#o.value,[GlideCoreRadio]),this.#t=this.#s.find((e=>e.checked)),this.#d()}focus(e){let i=this.#s.find((e=>e.checked));i||(i=this.#s.find((e=>0===e.tabIndex))),i?.focus(e)}get form(){return this.#e.form}get validity(){return this.#e.validity}get willValidate(){return this.#e.willValidate}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#i)}formResetCallback(){if(this.#t&&this.contains(this.#t))for(const e of this.#s)this.#a(e===this.#t,e)}render(){return html`<div class="component" @click="${this.#r}" @keydown="${this.#l}" ${ref(this.#n)}><glide-core-label orientation="horizontal" split="${ifDefined(this.privateSplit??void 0)}" ?disabled="${this.disabled}" ?error="${this.#h}" ?hide="${this.hideLabel}" ?required="${this.required}"><label id="label" data-test="label">${this.label}</label><div class="${classMap({"radio-container":!0,vertical:!0,invalid:this.#h})}" role="radiogroup" slot="control" aria-labelledby="label description"><slot ${ref(this.#o)} @slotchange="${this.#c}"></slot></div><slot name="tooltip" slot="tooltip"></slot><slot id="description" name="description" slot="description"></slot></glide-core-label></div>`}reportValidity(){return this.#e.reportValidity()}updated(e){this.hasUpdated&&(e.has("value")||e.has("required"))&&(this.#p(),this.#f(!this.#e.validity.valid),this.requestUpdate())}willUpdate(e){if(this.hasUpdated){if(e.has("required")&&this.#u(),e.has("disabled")){for(const e of this.#s)this.#R(this.disabled,e);!this.disabled&&this.#m()}if(e.has("value"))for(const e of this.#s)e.checked=e.value===this.value}}constructor(){super(),this.description="",this.disabled=!1,this.label="",this.hideLabel=!1,this.name="",this.required=!1,this.value="",this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#n=createRef(),this.#o=createRef(),this.#t=void 0,this.#i=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,this.value)},this.#e=this.attachInternals(),this.addEventListener("invalid",this.#b)}#n;#o;#t;#e;#v;#i;#d(){const e=this.#s.find((e=>e.checked));this.value=e?.value??this.#t?.value??"",this.#v=e??this.#t,this.required&&this.#u();for(const e of this.#s)this.disabled?this.#R(this.disabled,e):this.#R(e.disabled,e);!this.disabled&&this.#m()}get#h(){const e=!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit;return this.#f(e),e}#r(e){if(this.disabled)return;if(e.target instanceof GlideCoreRadio&&e.target.disabled&&this.#v&&!this.#v.disabled)return void this.#v?.focus();const i=e.target;if(i instanceof GlideCoreRadio&&i&&!i.disabled){this.#a(!0,i);for(const e of this.#s)e!==i&&this.#a(!1,e)}}#c(){owSlot(this.#o.value),owSlotType(this.#o.value,[GlideCoreRadio]),this.#d()}#b(e){e.preventDefault(),this.isCheckingValidity||(this.isReportValidityOrSubmit=!0,this.focus())}#l(e){if(!(this.disabled||e.target instanceof GlideCoreRadio&&e.target?.disabled)&&e.target instanceof GlideCoreRadio){const i=e.target;switch(e.key){case"ArrowUp":case"ArrowLeft":{e.preventDefault();let t=i.previousElementSibling;for(;(!t||t instanceof GlideCoreRadio&&t.disabled||!(t instanceof GlideCoreRadio))&&t!==i;)if(null===t){const e=this.#s.at(-1);e&&(t=e)}else t=t.previousElementSibling;t&&t instanceof GlideCoreRadio&&!t.disabled&&t!==i&&(this.#a(!1,i),this.#a(!0,t));break}case"ArrowDown":case"ArrowRight":{e.preventDefault();let t=i.nextElementSibling;for(;(!t||t instanceof GlideCoreRadio&&t.disabled||!(t instanceof GlideCoreRadio))&&t!==i;)if(null===t){const e=this.#s.at(0);e&&(t=e)}else t=t.nextElementSibling;t&&t instanceof GlideCoreRadio&&!t.disabled&&t!==i&&(this.#a(!1,i),this.#a(!0,t));break}case" ":if(e.preventDefault(),!i.disabled&&!i.checked){this.#a(!0,i);for(const e of this.#s)e!==i&&this.#a(!1,e)}}}}#p(){const e=this.#s.find((e=>e.checked));this.required&&!e?this.#e.setValidity({valueMissing:!0}," ",this.#n.value):this.#e.setValidity({})}get#s(){return this.#o.value?.assignedElements().filter((e=>e instanceof GlideCoreRadio))??[]}#a(e,i){i.checked=e,i.tabIndex=e?0:-1,e&&(this.#v=i,this.value=i.value,i.focus(),i.dispatchEvent(new Event("change",{bubbles:!0})),i.dispatchEvent(new Event("input",{bubbles:!0})))}#R(e,i){i.disabled=e,e&&(i.tabIndex=-1)}#f(e){for(const i of this.#s)i.invalid=e}#m(){if(this.disabled||this.#s.every((e=>e.disabled)))return;let e=null;const i=this.#s.find((e=>!e.disabled&&e.checked));if(i)e=i;else{const i=this.#s.find((e=>!e.disabled));i&&(e=i)}if(e)for(const i of this.#s)i.tabIndex=i===e?0:-1}#u(){for(const e of this.#s)e.required=this.required}};__decorate([property()],GlideCoreRadioGroup.prototype,"description",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreRadioGroup.prototype,"disabled",void 0),__decorate([property()],GlideCoreRadioGroup.prototype,"label",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreRadioGroup.prototype,"hideLabel",void 0),__decorate([property()],GlideCoreRadioGroup.prototype,"name",void 0),__decorate([property()],GlideCoreRadioGroup.prototype,"privateSplit",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreRadioGroup.prototype,"required",void 0),__decorate([property({reflect:!0})],GlideCoreRadioGroup.prototype,"value",void 0),__decorate([state()],GlideCoreRadioGroup.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreRadioGroup.prototype,"isReportValidityOrSubmit",void 0),GlideCoreRadioGroup=__decorate([customElement("glide-core-radio-group")],GlideCoreRadioGroup);export default GlideCoreRadioGroup;
+var __decorate=this&&this.__decorate||function(e,i,t,o){var s,d=arguments.length,a=d<3?i:null===o?o=Object.getOwnPropertyDescriptor(i,t):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,i,t,o);else for(var r=e.length-1;r>=0;r--)(s=e[r])&&(a=(d<3?s(a):d>3?s(i,t,a):s(i,t))||a);return d>3&&a&&Object.defineProperty(i,t,a),a};import"./label.js";import"./tooltip.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,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{owSlot,owSlotType}from"./library/ow.js";import GlideCoreRadio from"./radio.js";import styles from"./radio-group.styles.js";let GlideCoreRadioGroup=class GlideCoreRadioGroup extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}checkValidity(){this.isCheckingValidity=!0;const e=this.#e.checkValidity();return this.isCheckingValidity=!1,e}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#i),this.#t=void 0}firstUpdated(){owSlot(this.#o.value),owSlotType(this.#o.value,[GlideCoreRadio]),this.#t=this.#s.find((e=>e.checked)),this.#d()}focus(e){let i=this.#s.find((e=>e.checked));i||(i=this.#s.find((e=>0===e.tabIndex))),i?.focus(e)}get form(){return this.#e.form}get validity(){return this.#e.validity}get willValidate(){return this.#e.willValidate}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#i)}formResetCallback(){if(this.#t&&this.contains(this.#t))for(const e of this.#s)this.#a(e===this.#t,e)}render(){return html`<div class="component" @click="${this.#r}" @keydown="${this.#l}" ${ref(this.#n)}><glide-core-label orientation="horizontal" split="${ifDefined(this.privateSplit??void 0)}" ?disabled="${this.disabled}" ?error="${this.#h}" ?hide="${this.hideLabel}" ?required="${this.required}"><label id="label" data-test="label">${this.label}</label><div class="${classMap({"radio-container":!0,vertical:!0,invalid:this.#h})}" role="radiogroup" slot="control" aria-labelledby="label description" @blur="${this.#c}"><slot ${ref(this.#o)} @slotchange="${this.#p}"></slot></div><slot name="tooltip" slot="tooltip"></slot><slot id="description" name="description" slot="description"></slot></glide-core-label></div>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#e.reportValidity();return this.requestUpdate(),e}updated(e){this.hasUpdated&&(e.has("value")||e.has("required"))&&(this.#f(),this.#u(!this.#e.validity.valid),this.requestUpdate())}willUpdate(e){if(this.hasUpdated){if(e.has("required")&&this.#R(),e.has("disabled")){for(const e of this.#s)this.#m(this.disabled,e);!this.disabled&&this.#b()}if(e.has("value"))for(const e of this.#s)e.checked=e.value===this.value}}constructor(){super(),this.description="",this.disabled=!1,this.label="",this.hideLabel=!1,this.name="",this.required=!1,this.value="",this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#n=createRef(),this.#o=createRef(),this.#t=void 0,this.#i=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,this.value)},this.#e=this.attachInternals(),this.addEventListener("invalid",this.#v)}#n;#o;#t;#e;#C;#i;#d(){const e=this.#s.find((e=>e.checked));this.value=e?.value??this.#t?.value??"",this.#C=e??this.#t,this.required&&this.#R();for(const e of this.#s)this.disabled?this.#m(this.disabled,e):this.#m(e.disabled,e),e.addEventListener("blur",this.#y.bind(this));!this.disabled&&this.#b()}get#h(){const e=!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit;return this.#u(e),e}#c(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1}#r(e){if(this.disabled)return;if(e.target instanceof GlideCoreRadio&&e.target.disabled&&this.#C&&!this.#C.disabled)return void this.#C?.focus();const i=e.target;if(i instanceof GlideCoreRadio&&i&&!i.disabled){this.#a(!0,i);for(const e of this.#s)e!==i&&this.#a(!1,e)}}#p(){owSlot(this.#o.value),owSlotType(this.#o.value,[GlideCoreRadio]),this.#d()}#v(e){if(e.preventDefault(),!this.isCheckingValidity){if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}}#l(e){if(!(this.disabled||e.target instanceof GlideCoreRadio&&e.target?.disabled)&&e.target instanceof GlideCoreRadio){const i=e.target;switch(e.key){case"ArrowUp":case"ArrowLeft":{e.preventDefault();let t=i.previousElementSibling;for(;(!t||t instanceof GlideCoreRadio&&t.disabled||!(t instanceof GlideCoreRadio))&&t!==i;)if(null===t){const e=this.#s.at(-1);e&&(t=e)}else t=t.previousElementSibling;t&&t instanceof GlideCoreRadio&&!t.disabled&&t!==i&&(this.#a(!1,i),this.#a(!0,t));break}case"ArrowDown":case"ArrowRight":{e.preventDefault();let t=i.nextElementSibling;for(;(!t||t instanceof GlideCoreRadio&&t.disabled||!(t instanceof GlideCoreRadio))&&t!==i;)if(null===t){const e=this.#s.at(0);e&&(t=e)}else t=t.nextElementSibling;t&&t instanceof GlideCoreRadio&&!t.disabled&&t!==i&&(this.#a(!1,i),this.#a(!0,t));break}case" ":if(e.preventDefault(),!i.disabled&&!i.checked){this.#a(!0,i);for(const e of this.#s)e!==i&&this.#a(!1,e)}}}}#y(e){const i=e.relatedTarget;i&&i instanceof GlideCoreRadio&&this.#s.includes(i)||this.#c()}#f(){const e=this.#s.find((e=>e.checked));this.required&&!e?this.#e.setValidity({valueMissing:!0}," ",this.#n.value):this.#e.setValidity({})}get#s(){return this.#o.value?.assignedElements().filter((e=>e instanceof GlideCoreRadio))??[]}#a(e,i){i.checked=e,i.tabIndex=e?0:-1,e&&(this.#C=i,this.value=i.value,i.focus(),i.dispatchEvent(new Event("change",{bubbles:!0})),i.dispatchEvent(new Event("input",{bubbles:!0})))}#m(e,i){i.disabled=e,e&&(i.tabIndex=-1)}#u(e){for(const i of this.#s)i.invalid=e}#b(){if(this.disabled||this.#s.every((e=>e.disabled)))return;let e=null;const i=this.#s.find((e=>!e.disabled&&e.checked));if(i)e=i;else{const i=this.#s.find((e=>!e.disabled));i&&(e=i)}if(e)for(const i of this.#s)i.tabIndex=i===e?0:-1}#R(){for(const e of this.#s)e.required=this.required}};__decorate([property()],GlideCoreRadioGroup.prototype,"description",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreRadioGroup.prototype,"disabled",void 0),__decorate([property()],GlideCoreRadioGroup.prototype,"label",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreRadioGroup.prototype,"hideLabel",void 0),__decorate([property()],GlideCoreRadioGroup.prototype,"name",void 0),__decorate([property()],GlideCoreRadioGroup.prototype,"privateSplit",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreRadioGroup.prototype,"required",void 0),__decorate([property({reflect:!0})],GlideCoreRadioGroup.prototype,"value",void 0),__decorate([state()],GlideCoreRadioGroup.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreRadioGroup.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreRadioGroup.prototype,"isReportValidityOrSubmit",void 0),GlideCoreRadioGroup=__decorate([customElement("glide-core-radio-group")],GlideCoreRadioGroup);export default GlideCoreRadioGroup;

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,6 +1,8 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import './radio-group.js';
 import './radio.js';
 import { expect, fixture, html } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
 import GlideCoreRadio from './radio.js';
 import GlideCoreRadioGroup from './radio-group.js';
 GlideCoreRadio.shadowRootOptions.mode = 'open';
@@ -73,3 +75,21 @@ it('focuses the first tabbable radio when none are checked', async () => {
     const radio = component.querySelector('glide-core-radio[value="value-2"]');
     expect(radio).to.have.focus;
 });
+it('reports validity if blurred', async () => {
+    const component = await fixture(html `<glide-core-radio-group label="Checkbox Group" required>
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+      <glide-core-radio value="value-2" label="Two"></glide-core-radio>
+    </glide-core-radio-group>`);
+    component.focus();
+    const radioItems = component.querySelectorAll('glide-core-radio');
+    expect(document.activeElement === radioItems[0]).to.be.true;
+    expect(component.shadowRoot
+        ?.querySelector('glide-core-label')
+        ?.hasAttribute('error')).to.be.false;
+    await sendKeys({ press: 'Tab' });
+    expect(document.activeElement === document.body).to.be.true;
+    expect(component.validity.valid).to.equal(false);
+    expect(component.shadowRoot
+        ?.querySelector('glide-core-label')
+        ?.hasAttribute('error')).to.be.true;
+});

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