@crowdstrike/glide-core 0.9.0 → 0.9.2

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

@@ -12,7 +12,7 @@ it('registers', async () => {
     expect(window.customElements.get('glide-core-radio')).to.equal(GlideCoreRadio);
 });
 it('is accessible', async () => {
-    const element = await fixture(html `
+    const component = await fixture(html `
     <glide-core-radio-group label="label" name="name" value="value-1">
       <glide-core-radio value="value-1" label="One"></glide-core-radio>
       <glide-core-radio value="value-2" label="Two"></glide-core-radio>
@@ -21,7 +21,7 @@ it('is accessible', async () => {
       <div slot="description">Description</div>
     </glide-core-radio-group>
   `);
-    await expect(element).to.be.accessible();
+    await expect(component).to.be.accessible();
 });
 it('renders appropriate attributes on glide-core-radio', async () => {
     await fixture(html `
@@ -170,7 +170,7 @@ it('sets the group "value" when a radio is set as "checked"', async () => {
     const group = document.querySelector('glide-core-radio-group');
     expect(group).to.have.attribute('value', 'value-2');
 });
-it('throws an error when an element other than `glide-core-radio` is a child of the default slot', async () => {
+it('throws an error when an component other than `glide-core-radio` is a child of the default slot', async () => {
     await expectArgumentError(() => {
         return fixture(html `
       <glide-core-radio-group label="label" name="name">

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

@@ -178,7 +178,7 @@ it('does not move focus if there is only one button when pressing arrow keys', a
     expect(radio).to.have.focus;
 });
 it('changes the "checked" attribute when clicking', async () => {
-    const element = await fixture(html `<glide-core-radio-group name="name">
+    const component = await fixture(html `<glide-core-radio-group name="name">
       <glide-core-radio value="value-1" checked label="One"></glide-core-radio>
       <glide-core-radio value="value-2" label="Two"></glide-core-radio>
       <glide-core-radio value="value-3" label="Three"></glide-core-radio>
@@ -186,33 +186,33 @@ it('changes the "checked" attribute when clicking', async () => {
     const radios = document.querySelectorAll('glide-core-radio');
     expect(radios.length).to.equal(3);
     radios[2].click();
-    await elementUpdated(element);
+    await elementUpdated(component);
     expect(radios[2]).to.have.focus;
     expect(radios[2]).to.have.attribute('checked');
     expect(radios[0]).to.not.have.attribute('checked');
 });
 it('does not change focus nor the "checked" attribute when clicking a disabled radio', async () => {
-    const element = await fixture(html `<glide-core-radio-group name="name">
+    const component = await fixture(html `<glide-core-radio-group name="name">
       <glide-core-radio value="value-1" checked label="One"></glide-core-radio>
       <glide-core-radio value="value-2" disabled label="Two"></glide-core-radio>
     </glide-core-radio-group>`);
     const radios = document.querySelectorAll('glide-core-radio');
     expect(radios.length).to.equal(2);
     radios[1].click();
-    await elementUpdated(element);
+    await elementUpdated(component);
     expect(radios[0]).to.have.focus;
     expect(radios[0]).to.have.attribute('checked');
     expect(radios[1]).to.not.have.attribute('checked');
 });
 it('does not change focus nor the "checked" attribute when clicking a disabled group', async () => {
-    const element = await fixture(html `<glide-core-radio-group name="name" disabled>
+    const component = await fixture(html `<glide-core-radio-group name="name" disabled>
       <glide-core-radio value="value-1" checked label="One"></glide-core-radio>
       <glide-core-radio value="value-2" label="Two"></glide-core-radio>
     </glide-core-radio-group>`);
     const radios = document.querySelectorAll('glide-core-radio');
     expect(radios.length).to.equal(2);
     radios[1].click();
-    await elementUpdated(element);
+    await elementUpdated(component);
     expect(radios[0]).to.not.have.focus;
     expect(radios[0]).to.have.attribute('checked');
     expect(radios[1]).to.not.have.attribute('checked');

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

@@ -1,7 +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 GlideCoreRadio from './radio.js';
 import GlideCoreRadioGroup from './radio-group.js';
+import sinon from 'sinon';
 GlideCoreRadio.shadowRootOptions.mode = 'open';
 GlideCoreRadioGroup.shadowRootOptions.mode = 'open';
 it('exposes standard form control properties and methods', async () => {
@@ -103,3 +105,20 @@ it('has no `formData` value when a radio is checked but without a "value"', asyn
     const formData = new FormData(form);
     expect(formData.get('name')).to.be.null;
 });
+it('submits its form on Enter', async () => {
+    const form = document.createElement('form');
+    const component = await fixture(html `<glide-core-radio-group label="label">
+      <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>`, {
+        parentNode: form,
+    });
+    const spy = sinon.spy();
+    form.addEventListener('submit', (event) => {
+        event.preventDefault();
+        spy();
+    });
+    component.focus();
+    await sendKeys({ press: 'Enter' });
+    expect(spy.callCount).to.equal(1);
+});

package/dist/radio.d.ts

@@ -6,7 +6,6 @@ declare global {
 }
 /**
  * @description A radio element for use with `<glide-core-radio-group>`.
- *
  */
 export default class GlideCoreRadio extends LitElement {
     #private;
@@ -17,7 +16,7 @@ export default class GlideCoreRadio extends LitElement {
     invalid: boolean;
     required: boolean;
     value: string;
-    label: string;
+    label?: string;
     firstUpdated(): void;
     render(): import("lit").TemplateResult<1>;
     willUpdate(changedProperties: PropertyValueMap<GlideCoreRadio>): void;

package/dist/radio.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,i,r){var a,o=arguments.length,d=o<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)d=Reflect.decorate(e,t,i,r);else for(var s=e.length-1;s>=0;s--)(a=e[s])&&(d=(o<3?a(d):o>3?a(t,i,d):a(t,i))||d);return o>3&&d&&Object.defineProperty(t,i,d),d};import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{customElement,property}from"lit/decorators.js";import styles from"./radio.styles.js";let GlideCoreRadio=class GlideCoreRadio extends LitElement{constructor(){super(...arguments),this.checked=!1,this.disabled=!1,this.invalid=!1,this.required=!1,this.value="",this.label="",this.#e=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){this.role="radio",this.ariaChecked=this.checked.toString(),this.ariaDisabled=this.disabled.toString(),this.ariaInvalid=this.invalid.toString(),this.ariaRequired=this.required.toString(),this.ariaLabel=this.label,this.#e=!0}render(){return html`<span class="${classMap({component:!0,disabled:this.disabled})}"><span id="radio" class="${classMap({"radio-circle":!0,checked:this.checked,animate:this.#e})}" data-test="radio" data-test-error="${this.invalid}"></span> ${this.label}</span>`}willUpdate(e){this.hasUpdated&&(e.has("checked")&&(this.ariaChecked=this.checked.toString()),e.has("disabled")&&(this.ariaDisabled=this.disabled.toString()),e.has("required")&&(this.ariaRequired=this.required.toString()),e.has("invalid")&&(this.ariaInvalid=this.invalid.toString()),e.has("label")&&(this.ariaLabel=this.label))}#e};__decorate([property({type:Boolean,reflect:!0})],GlideCoreRadio.prototype,"checked",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreRadio.prototype,"disabled",void 0),__decorate([property({type:Boolean})],GlideCoreRadio.prototype,"invalid",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreRadio.prototype,"required",void 0),__decorate([property()],GlideCoreRadio.prototype,"value",void 0),__decorate([property({reflect:!0})],GlideCoreRadio.prototype,"label",void 0),GlideCoreRadio=__decorate([customElement("glide-core-radio")],GlideCoreRadio);export default GlideCoreRadio;
+var __decorate=this&&this.__decorate||function(e,t,i,r){var a,o=arguments.length,d=o<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)d=Reflect.decorate(e,t,i,r);else for(var s=e.length-1;s>=0;s--)(a=e[s])&&(d=(o<3?a(d):o>3?a(t,i,d):a(t,i))||d);return o>3&&d&&Object.defineProperty(t,i,d),d};import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{customElement,property}from"lit/decorators.js";import styles from"./radio.styles.js";let GlideCoreRadio=class GlideCoreRadio extends LitElement{constructor(){super(...arguments),this.checked=!1,this.disabled=!1,this.invalid=!1,this.required=!1,this.value="",this.#e=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){this.role="radio",this.ariaChecked=this.checked.toString(),this.ariaDisabled=this.disabled.toString(),this.ariaInvalid=this.invalid.toString(),this.ariaRequired=this.required.toString(),this.label&&(this.ariaLabel=this.label),this.#e=!0}render(){return html`<span class="${classMap({component:!0,disabled:this.disabled})}"><span id="radio" class="${classMap({"radio-circle":!0,checked:this.checked,animate:this.#e})}" data-test="radio" data-test-error="${this.invalid}"></span> ${this.label}</span>`}willUpdate(e){this.hasUpdated&&(e.has("checked")&&(this.ariaChecked=this.checked.toString()),e.has("disabled")&&(this.ariaDisabled=this.disabled.toString()),e.has("required")&&(this.ariaRequired=this.required.toString()),e.has("invalid")&&(this.ariaInvalid=this.invalid.toString()),e.has("label")&&this.label&&(this.ariaLabel=this.label))}#e};__decorate([property({type:Boolean,reflect:!0})],GlideCoreRadio.prototype,"checked",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreRadio.prototype,"disabled",void 0),__decorate([property({type:Boolean})],GlideCoreRadio.prototype,"invalid",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreRadio.prototype,"required",void 0),__decorate([property()],GlideCoreRadio.prototype,"value",void 0),__decorate([property({reflect:!0})],GlideCoreRadio.prototype,"label",void 0),GlideCoreRadio=__decorate([customElement("glide-core-radio")],GlideCoreRadio);export default GlideCoreRadio;

package/dist/radio.styles.js

@@ -1,4 +1,6 @@
 import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
+    ${focusOutline(":host(:focus-visible) .component .radio-circle")}
+  `,css`
     @keyframes animate-radio {
       from {
         opacity: 0;
@@ -26,12 +28,6 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       outline: none;
     }
 
-    /* Using nesting creates an issue on Safari with :host */
-    /* stylelint-disable-next-line csstools/use-nesting */
-    :host(:focus-visible) .component .radio-circle {
-      ${focusOutline};
-    }
-
     .component {
       align-items: center;
       color: var(--glide-core-text-body-1);

package/dist/split-button.styles.js

@@ -1,4 +1,6 @@
 import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
+    ${focusOutline(".component:focus-visible")}
+  `,css`
     .component {
       align-items: center;
       border-color: transparent;
@@ -25,10 +27,6 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
         outline: none;
       }
 
-      &:focus-visible {
-        ${focusOutline};
-      }
-
       &.disabled {
         opacity: 1;
         pointer-events: none;

package/dist/split-container.d.ts

@@ -8,7 +8,7 @@ declare global {
     }
 }
 /**
- * @description A split button that provides a button action and a menu of alternate actions.
+ * @description A pair of buttons. One is the primary action. The other controls a menu of alternate actions.
  *
  * @slot - One or more of `<glide-core-menu-link>` or `<glide-core-menu-button>`.
  * @slot primary-action - One of either `<glide-core-split-button>` or `<glide-core-split-link>`.

package/dist/split-container.styles.js

@@ -1,4 +1,6 @@
 import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
+    ${focusOutline(".menu-button:focus-visible")}
+  `,css`
     .component {
       display: inline-flex;
       position: relative;
@@ -55,10 +57,6 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
           outline: none;
         }
 
-        &:focus-visible {
-          ${focusOutline};
-        }
-
         &:disabled {
           cursor: default;
           opacity: 1;

package/dist/status-indicator.d.ts

@@ -5,7 +5,7 @@ declare global {
     }
 }
 /**
- * @cssprop [--size] - Sets the size of the icon.
+ * @cssprop [--size] - The size of the icon.
  */
 export default class GlideCoreStatusIndicator extends LitElement {
     static shadowRootOptions: ShadowRootInit;

package/dist/styles/focus-outline.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("lit").CSSResult;
+declare const _default: (selector: string) => import("lit").CSSResult;
 export default _default;

package/dist/styles/focus-outline.js

@@ -1 +1,7 @@
-import{unsafeCSS}from"lit";export default unsafeCSS("\n  outline: 2px solid var(--glide-core-border-focus);\n  outline-offset: 1px;\n");
+import{css,unsafeCSS}from"lit";export default e=>css`
+    /* stylelint-disable selector-type-case, selector-type-no-unknown */
+    ${unsafeCSS(e)} {
+      outline: 2px solid var(--glide-core-border-focus) !important;
+      outline-offset: 1px;
+    }
+  `;

package/dist/styles/menu-opening-animation.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (selector: string) => import("lit").CSSResult;
+export default _default;

package/dist/styles/menu-opening-animation.js

@@ -0,0 +1,26 @@
+import{css,unsafeCSS}from"lit";export default e=>css`
+    /* stylelint-disable selector-type-case, selector-type-no-unknown */
+    @keyframes menu-opening {
+      from {
+        opacity: 0;
+        transform: scaleY(0);
+        transform-origin: 0% 0%;
+      }
+
+      to {
+        opacity: 1;
+        transform: scaleY(1);
+        transform-origin: 0% 0%;
+      }
+    }
+
+    ${unsafeCSS(e)} {
+      animation: menu-opening 150ms cubic-bezier(0.25, 0, 0.3, 1);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      ${unsafeCSS(e)} {
+        animation: none !important;
+      }
+    }
+  `;

package/dist/styles/variables.css

@@ -1 +1 @@
-:root,:host{color-scheme:normal;--glide-core-border-radius-lg: .75rem;--glide-core-border-radius-md: .5rem;--glide-core-border-radius-none: 0rem;--glide-core-border-radius-round: 7.5rem;--glide-core-border-radius-sm: .25rem;--glide-core-border-radius-xs: .125rem;--glide-core-border-width-lg: .25rem;--glide-core-border-width-md: .125rem;--glide-core-border-width-none: 0rem;--glide-core-border-width-sm: .0625rem;--glide-core-spacing-lg: 1.5rem;--glide-core-spacing-md: 1rem;--glide-core-spacing-sm: .75rem;--glide-core-spacing-xl: 2rem;--glide-core-spacing-xs: .5rem;--glide-core-spacing-xxl: 3rem;--glide-core-spacing-xxs: .25rem;--glide-core-spacing-xxxl: 4rem;--glide-core-spacing-xxxs: .125rem;--glide-core-spacing-zero: 0rem}:root,:host,.theme-light{color-scheme:light;--glide-core-border-action: #0073e6;--glide-core-border-action-disabled: #d7e7ff;--glide-core-border-action-hover: #eef5ff;--glide-core-border-base: #c9c9c9;--glide-core-border-base-dark: #6d6d6d;--glide-core-border-base-darker: #424242;--glide-core-border-base-light: #e3e3e3;--glide-core-border-base-lighter: #f0f0f0;--glide-core-border-base-lightest: #ffffff;--glide-core-border-disabled: #8a8a8a;--glide-core-border-focus: #0073e6;--glide-core-border-focus-light: #eef5ff;--glide-core-border-primary: #054fb9;--glide-core-border-primary-hover: #0461cf;--glide-core-icon-active: #0073e6;--glide-core-icon-default: #212121;--glide-core-icon-default2: #212121;--glide-core-icon-display: #212121;--glide-core-icon-display-light: #6d6d6d;--glide-core-icon-hover: #8babf1;--glide-core-icon-primary: #054fb9;--glide-core-icon-primary-hover: #0461cf;--glide-core-icon-secondary-disabled: #d7e7ff;--glide-core-icon-selected: #ffffff;--glide-core-icon-selected-disabled: #eef5ff;--glide-core-icon-selected2: #ffffff;--glide-core-icon-tertiary-disabled: #8a8a8a;--glide-core-status-error: #db2d24;--glide-core-status-expired: #ff3b30;--glide-core-status-failed: #ff3b30;--glide-core-status-in-progress: #ffcc00;--glide-core-status-queued: #5ac8fa;--glide-core-status-scheduled: #af52de;--glide-core-status-success: #34c759;--glide-core-status-unknown: #6d6d6d;--glide-core-status-warning-critical: #ff3b30;--glide-core-status-warning-high: #ff9500;--glide-core-status-warning-informational: #0073e6;--glide-core-status-warning-low: #607d8b;--glide-core-status-warning-medium: #ffcc00;--glide-core-surface-active: #ffffff;--glide-core-surface-attention: #fffbeb;--glide-core-surface-base: #f0f0f0;--glide-core-surface-base-dark: #212121;--glide-core-surface-base-gray: #0000001a;--glide-core-surface-base-gray-dark: #00000066;--glide-core-surface-base-gray-light: #00000012;--glide-core-surface-base-light: #ffffff8c;--glide-core-surface-base-lighter: #ffffffbf;--glide-core-surface-base-lightest: #ffffffcc;--glide-core-surface-base-xlightest: #ffffffe5;--glide-core-surface-disabled: #f0f0f0;--glide-core-surface-dot-step: #8babf1;--glide-core-surface-error: #fff0ef;--glide-core-surface-focus: #0073e6;--glide-core-surface-hover: #d7e7ff;--glide-core-surface-informational: #eef5ff;--glide-core-surface-modal: #ffffff;--glide-core-surface-page: #ffffff;--glide-core-surface-primary: #0073e6;--glide-core-surface-primary-disabled: #1d7afc26;--glide-core-surface-secondary: #eef5ff;--glide-core-surface-secondary-disabled: #eef5ff;--glide-core-surface-selected: #0073e6;--glide-core-surface-selected-disabled: #8a8a8a;--glide-core-surface-selected-hover: #054fb9;--glide-core-surface-success: #f1fdf4;--glide-core-surface-unselected-disabled: #e3e3e3;--glide-core-surface-warning: #fff6e9;--glide-core-surface-white-1percent: #ffffff03;--glide-core-text-body-1: #212121;--glide-core-text-body-2: #212121;--glide-core-text-body-light: #424242;--glide-core-text-body-lighter: #c9c9c9;--glide-core-text-disabled: #f0f0f0;--glide-core-text-header-1: #424242;--glide-core-text-header-2: #6d6d6d;--glide-core-text-link: #0461cf;--glide-core-text-link-dark-surface: #8babf1;--glide-core-text-link-table: #0461cf;--glide-core-text-placeholder: #6d6d6d;--glide-core-text-primary: #054fb9;--glide-core-text-primary-hover: #0461cf;--glide-core-text-secondary: #0073e6;--glide-core-text-secondary-disabled: #d7e7ff;--glide-core-text-selected: #ffffff;--glide-core-text-selected-2: #ffffff;--glide-core-text-syntax-blue: #0000ff;--glide-core-text-syntax-dark: #151515;--glide-core-text-syntax-green: #116644;--glide-core-text-syntax-purple: #770088;--glide-core-text-syntax-red-dark: #95150e;--glide-core-text-syntax-red-light: #ee4400;--glide-core-text-tertiary: #212121;--glide-core-text-tertiary-disabled: #8a8a8a}:host,.theme-dark{color-scheme:dark;--glide-core-border-action: #0073e6;--glide-core-border-action-disabled: #eef5ff;--glide-core-border-action-hover: #eef5ff;--glide-core-border-base: #6d6d6d;--glide-core-border-base-dark: #c9c9c9;--glide-core-border-base-darker: #e3e3e3;--glide-core-border-base-light: #212121;--glide-core-border-base-lighter: #212121;--glide-core-border-base-lightest: #424242;--glide-core-border-disabled: #8a8a8a;--glide-core-border-focus: #0073e6;--glide-core-border-focus-light: #eef5ff;--glide-core-border-primary: #ffffff;--glide-core-border-primary-hover: #0461cf;--glide-core-icon-active: #0073e6;--glide-core-icon-default: #ffffff;--glide-core-icon-default2: #212121;--glide-core-icon-display: #ffffff;--glide-core-icon-display-light: #d7e7ff;--glide-core-icon-hover: #eef5ff;--glide-core-icon-primary: #ffffff;--glide-core-icon-primary-hover: #d7e7ff;--glide-core-icon-secondary-disabled: #d7e7ff;--glide-core-icon-selected: #ffffff;--glide-core-icon-selected-disabled: #eef5ff;--glide-core-icon-selected2: #424242;--glide-core-icon-tertiary-disabled: #6d6d6d;--glide-core-status-error: #ff3b30;--glide-core-status-expired: #ff3b30;--glide-core-status-failed: #ff3b30;--glide-core-status-in-progress: #ffcc00;--glide-core-status-queued: #5ac8fa;--glide-core-status-scheduled: #af52de;--glide-core-status-success: #34c759;--glide-core-status-unknown: #6d6d6d;--glide-core-status-warning-critical: #ff3b30;--glide-core-status-warning-high: #ff9500;--glide-core-status-warning-informational: #0073e6;--glide-core-status-warning-low: #607d8b;--glide-core-status-warning-medium: #ffcc00;--glide-core-surface-active: #ffffff;--glide-core-surface-attention: #fffbeb;--glide-core-surface-base: #424242;--glide-core-surface-base-dark: #212121;--glide-core-surface-base-gray: #ffffff8c;--glide-core-surface-base-gray-dark: #ffffff8c;--glide-core-surface-base-gray-light: #00000066;--glide-core-surface-base-light: #0000008c;--glide-core-surface-base-lighter: #000000bf;--glide-core-surface-base-lightest: #000000cc;--glide-core-surface-base-xlightest: #000000e5;--glide-core-surface-disabled: #424242;--glide-core-surface-dot-step: #8babf1;--glide-core-surface-error: #fff0ef;--glide-core-surface-focus: #0073e6;--glide-core-surface-hover: #0461cf;--glide-core-surface-informational: #eef5ff;--glide-core-surface-modal: #151515;--glide-core-surface-page: #212121;--glide-core-surface-primary: #0073e6;--glide-core-surface-primary-disabled: #6d6d6d;--glide-core-surface-secondary: #f0f0f0;--glide-core-surface-secondary-disabled: #f0f0f0;--glide-core-surface-selected: #0073e6;--glide-core-surface-selected-disabled: #8a8a8a;--glide-core-surface-selected-hover: #054fb9;--glide-core-surface-success: #f1fdf4;--glide-core-surface-unselected-disabled: #e3e3e3;--glide-core-surface-warning: #fff6e9;--glide-core-surface-white-1percent: #ffffff;--glide-core-text-body-1: #ffffff;--glide-core-text-body-2: #212121;--glide-core-text-body-light: #ffffff;--glide-core-text-body-lighter: #c9c9c9;--glide-core-text-disabled: #f0f0f0;--glide-core-text-header-1: #ffffff;--glide-core-text-header-2: #d7e7ff;--glide-core-text-link: #8babf1;--glide-core-text-link-dark-surface: #8babf1;--glide-core-text-link-table: #d0e8f2;--glide-core-text-placeholder: #d7e7ff;--glide-core-text-primary: #ffffff;--glide-core-text-primary-hover: #d7e7ff;--glide-core-text-secondary: #8babf1;--glide-core-text-secondary-disabled: #d7e7ff;--glide-core-text-selected: #ffffff;--glide-core-text-selected-2: #424242;--glide-core-text-syntax-blue: #0000ff;--glide-core-text-syntax-dark: #ffffff;--glide-core-text-syntax-green: #116644;--glide-core-text-syntax-purple: #770088;--glide-core-text-syntax-red-dark: #95150e;--glide-core-text-syntax-red-light: #ee4400;--glide-core-text-tertiary: #ffffff;--glide-core-text-tertiary-disabled: #6d6d6d}:root{--glide-core-body-md-font-family: var(--glide-core-font-sans);--glide-core-body-md-font-size: 1rem;--glide-core-body-md-font-style: normal;--glide-core-body-md-font-weight: 400;--glide-core-body-md-line-height: normal;--glide-core-body-sm-font-family: var(--glide-core-font-sans);--glide-core-body-sm-font-size: .875rem;--glide-core-body-sm-font-variant: normal;--glide-core-body-sm-font-weight: 400;--glide-core-body-sm-line-height: 1.3;--glide-core-body-xs-font-family: var(--glide-core-font-sans);--glide-core-body-xs-font-size: .75rem;--glide-core-body-xs-font-variant: normal;--glide-core-body-xs-font-weight: 400;--glide-core-body-xs-line-height: 1.3;--glide-core-color-dark-blue: #054fb9;--glide-core-color-white: #ffffff;--glide-core-font-sans: "Nunito";--glide-core-font-weight-bold: 700;--glide-core-font-weight-semi-bold: 600;--glide-core-glow-sm: 0px 0px 2px 0px #2c97eee5;--glide-core-heading-xs-font-size: 1.25rem;--glide-core-heading-xs-font-weight: var(--glide-core-font-weight-semi-bold);--glide-core-heading-xxs-font-family: var(--glide-core-font-sans);--glide-core-heading-xxs-font-size: 1rem;--glide-core-heading-xxs-font-style: normal;--glide-core-heading-xxs-font-variant: normal;--glide-core-heading-xxs-font-weight: var(--glide-core-font-weight-bold);--glide-core-heading-xxxs-font-family: var(--glide-core-font-sans);--glide-core-heading-xxxs-font-size: .875rem;--glide-core-heading-xxxs-font-style: normal;--glide-core-heading-xxxs-font-variant: normal;--glide-core-heading-xxxs-font-weight: var(--glide-core-font-weight-bold);--glide-core-heading-xxxs-line-height: 1.7;--glide-core-shadow-lg: 0px 4px 14px 0px #00000040;--glide-core-shadow-sm: 0px 2.275px 8.342px 0px rgba(181, 181, 181, .25);--glide-core-shadow-xl: 0px 4px 60px 0px #adadad}
+:root,:host{color-scheme:normal;--glide-core-border-radius-lg: .75rem;--glide-core-border-radius-md: .5rem;--glide-core-border-radius-none: 0rem;--glide-core-border-radius-round: 7.5rem;--glide-core-border-radius-sm: .25rem;--glide-core-border-radius-xs: .125rem;--glide-core-border-width-lg: .25rem;--glide-core-border-width-md: .125rem;--glide-core-border-width-none: 0rem;--glide-core-border-width-sm: .0625rem;--glide-core-spacing-lg: 1.5rem;--glide-core-spacing-md: 1rem;--glide-core-spacing-sm: .75rem;--glide-core-spacing-xl: 2rem;--glide-core-spacing-xs: .5rem;--glide-core-spacing-xxl: 3rem;--glide-core-spacing-xxs: .25rem;--glide-core-spacing-xxxl: 4rem;--glide-core-spacing-xxxs: .125rem;--glide-core-spacing-zero: 0rem}:root,:host,.theme-light{color-scheme:light;--glide-core-border-action: #0073e6;--glide-core-border-action-disabled: #d7e7ff;--glide-core-border-action-hover: #eef5ff;--glide-core-border-base: #c9c9c9;--glide-core-border-base-dark: #6d6d6d;--glide-core-border-base-darker: #424242;--glide-core-border-base-light: #e3e3e3;--glide-core-border-base-lighter: #f0f0f0;--glide-core-border-base-lightest: #ffffff;--glide-core-border-disabled: #8a8a8a;--glide-core-border-focus: #0073e6;--glide-core-border-focus-light: #eef5ff;--glide-core-border-primary: #054fb9;--glide-core-border-primary-hover: #0461cf;--glide-core-icon-active: #0073e6;--glide-core-icon-default: #212121;--glide-core-icon-default2: #212121;--glide-core-icon-display: #212121;--glide-core-icon-display-light: #6d6d6d;--glide-core-icon-hover: #8babf1;--glide-core-icon-primary: #054fb9;--glide-core-icon-primary-hover: #0461cf;--glide-core-icon-secondary-disabled: #d7e7ff;--glide-core-icon-selected: #ffffff;--glide-core-icon-selected-disabled: #eef5ff;--glide-core-icon-selected2: #ffffff;--glide-core-icon-tertiary-disabled: #8a8a8a;--glide-core-status-error: #db2d24;--glide-core-status-expired: #ff3b30;--glide-core-status-failed: #ff3b30;--glide-core-status-in-progress: #ffcc00;--glide-core-status-queued: #5ac8fa;--glide-core-status-scheduled: #af52de;--glide-core-status-success: #34c759;--glide-core-status-unknown: #6d6d6d;--glide-core-status-warning-critical: #ff3b30;--glide-core-status-warning-high: #ff9500;--glide-core-status-warning-informational: #0073e6;--glide-core-status-warning-low: #607d8b;--glide-core-status-warning-medium: #ffcc00;--glide-core-surface-active: #ffffff;--glide-core-surface-attention: #fffbeb;--glide-core-surface-base: #f0f0f0;--glide-core-surface-base-dark: #212121;--glide-core-surface-base-gray: #0000001a;--glide-core-surface-base-gray-dark: #00000066;--glide-core-surface-base-gray-light: #00000012;--glide-core-surface-base-gray-lighter: #00000008;--glide-core-surface-base-light: #ffffff8c;--glide-core-surface-base-lighter: #ffffffbf;--glide-core-surface-base-lightest: #ffffffcc;--glide-core-surface-base-xlightest: #ffffffe5;--glide-core-surface-disabled: #f0f0f0;--glide-core-surface-dot-step: #8babf1;--glide-core-surface-error: #fff0ef;--glide-core-surface-focus: #0073e6;--glide-core-surface-hover: #d7e7ff;--glide-core-surface-informational: #eef5ff;--glide-core-surface-modal: #ffffff;--glide-core-surface-page: #ffffff;--glide-core-surface-primary: #0073e6;--glide-core-surface-primary-disabled: #1d7afc26;--glide-core-surface-secondary: #eef5ff;--glide-core-surface-secondary-disabled: #eef5ff;--glide-core-surface-selected: #0073e6;--glide-core-surface-selected-disabled: #8a8a8a;--glide-core-surface-selected-hover: #054fb9;--glide-core-surface-success: #f1fdf4;--glide-core-surface-unselected-disabled: #e3e3e3;--glide-core-surface-warning: #fff6e9;--glide-core-surface-white-1percent: #ffffff03;--glide-core-text-body-1: #212121;--glide-core-text-body-2: #212121;--glide-core-text-body-light: #424242;--glide-core-text-body-lighter: #c9c9c9;--glide-core-text-disabled: #f0f0f0;--glide-core-text-header-1: #424242;--glide-core-text-header-2: #6d6d6d;--glide-core-text-link: #0461cf;--glide-core-text-link-dark-surface: #8babf1;--glide-core-text-link-table: #0461cf;--glide-core-text-placeholder: #6d6d6d;--glide-core-text-primary: #054fb9;--glide-core-text-primary-hover: #0461cf;--glide-core-text-secondary: #0073e6;--glide-core-text-secondary-disabled: #d7e7ff;--glide-core-text-selected: #ffffff;--glide-core-text-selected-2: #ffffff;--glide-core-text-syntax-blue: #0000ff;--glide-core-text-syntax-dark: #151515;--glide-core-text-syntax-green: #116644;--glide-core-text-syntax-purple: #770088;--glide-core-text-syntax-red-dark: #95150e;--glide-core-text-syntax-red-light: #ee4400;--glide-core-text-tertiary: #212121;--glide-core-text-tertiary-disabled: #8a8a8a}:host,.theme-dark{color-scheme:dark;--glide-core-border-action: #0073e6;--glide-core-border-action-disabled: #eef5ff;--glide-core-border-action-hover: #eef5ff;--glide-core-border-base: #6d6d6d;--glide-core-border-base-dark: #c9c9c9;--glide-core-border-base-darker: #e3e3e3;--glide-core-border-base-light: #212121;--glide-core-border-base-lighter: #212121;--glide-core-border-base-lightest: #424242;--glide-core-border-disabled: #8a8a8a;--glide-core-border-focus: #0073e6;--glide-core-border-focus-light: #eef5ff;--glide-core-border-primary: #ffffff;--glide-core-border-primary-hover: #0461cf;--glide-core-icon-active: #0073e6;--glide-core-icon-default: #ffffff;--glide-core-icon-default2: #212121;--glide-core-icon-display: #ffffff;--glide-core-icon-display-light: #d7e7ff;--glide-core-icon-hover: #eef5ff;--glide-core-icon-primary: #ffffff;--glide-core-icon-primary-hover: #d7e7ff;--glide-core-icon-secondary-disabled: #d7e7ff;--glide-core-icon-selected: #ffffff;--glide-core-icon-selected-disabled: #eef5ff;--glide-core-icon-selected2: #424242;--glide-core-icon-tertiary-disabled: #6d6d6d;--glide-core-status-error: #ff3b30;--glide-core-status-expired: #ff3b30;--glide-core-status-failed: #ff3b30;--glide-core-status-in-progress: #ffcc00;--glide-core-status-queued: #5ac8fa;--glide-core-status-scheduled: #af52de;--glide-core-status-success: #34c759;--glide-core-status-unknown: #6d6d6d;--glide-core-status-warning-critical: #ff3b30;--glide-core-status-warning-high: #ff9500;--glide-core-status-warning-informational: #0073e6;--glide-core-status-warning-low: #607d8b;--glide-core-status-warning-medium: #ffcc00;--glide-core-surface-active: #ffffff;--glide-core-surface-attention: #fffbeb;--glide-core-surface-base: #424242;--glide-core-surface-base-dark: #212121;--glide-core-surface-base-gray: #ffffff8c;--glide-core-surface-base-gray-dark: #ffffff8c;--glide-core-surface-base-gray-light: #00000066;--glide-core-surface-base-gray-lighter: #ffffff1a;--glide-core-surface-base-light: #0000008c;--glide-core-surface-base-lighter: #000000bf;--glide-core-surface-base-lightest: #000000cc;--glide-core-surface-base-xlightest: #000000e5;--glide-core-surface-disabled: #424242;--glide-core-surface-dot-step: #8babf1;--glide-core-surface-error: #fff0ef;--glide-core-surface-focus: #0073e6;--glide-core-surface-hover: #0461cf;--glide-core-surface-informational: #eef5ff;--glide-core-surface-modal: #151515;--glide-core-surface-page: #212121;--glide-core-surface-primary: #0073e6;--glide-core-surface-primary-disabled: #6d6d6d;--glide-core-surface-secondary: #f0f0f0;--glide-core-surface-secondary-disabled: #f0f0f0;--glide-core-surface-selected: #0073e6;--glide-core-surface-selected-disabled: #8a8a8a;--glide-core-surface-selected-hover: #054fb9;--glide-core-surface-success: #f1fdf4;--glide-core-surface-unselected-disabled: #e3e3e3;--glide-core-surface-warning: #fff6e9;--glide-core-surface-white-1percent: #000000e5;--glide-core-text-body-1: #ffffff;--glide-core-text-body-2: #212121;--glide-core-text-body-light: #ffffff;--glide-core-text-body-lighter: #c9c9c9;--glide-core-text-disabled: #f0f0f0;--glide-core-text-header-1: #ffffff;--glide-core-text-header-2: #d7e7ff;--glide-core-text-link: #8babf1;--glide-core-text-link-dark-surface: #8babf1;--glide-core-text-link-table: #d0e8f2;--glide-core-text-placeholder: #d7e7ff;--glide-core-text-primary: #ffffff;--glide-core-text-primary-hover: #d7e7ff;--glide-core-text-secondary: #8babf1;--glide-core-text-secondary-disabled: #d7e7ff;--glide-core-text-selected: #ffffff;--glide-core-text-selected-2: #424242;--glide-core-text-syntax-blue: #0000ff;--glide-core-text-syntax-dark: #ffffff;--glide-core-text-syntax-green: #116644;--glide-core-text-syntax-purple: #770088;--glide-core-text-syntax-red-dark: #95150e;--glide-core-text-syntax-red-light: #ee4400;--glide-core-text-tertiary: #ffffff;--glide-core-text-tertiary-disabled: #6d6d6d}:root{--glide-core-body-md-font-family: var(--glide-core-font-sans);--glide-core-body-md-font-size: 1rem;--glide-core-body-md-font-style: normal;--glide-core-body-md-font-weight: 400;--glide-core-body-md-line-height: normal;--glide-core-body-sm-font-family: var(--glide-core-font-sans);--glide-core-body-sm-font-size: .875rem;--glide-core-body-sm-font-variant: normal;--glide-core-body-sm-font-weight: 400;--glide-core-body-sm-line-height: 1.3;--glide-core-body-xs-font-family: var(--glide-core-font-sans);--glide-core-body-xs-font-size: .75rem;--glide-core-body-xs-font-variant: normal;--glide-core-body-xs-font-weight: 400;--glide-core-body-xs-line-height: 1.3;--glide-core-color-dark-blue: #054fb9;--glide-core-color-white: #ffffff;--glide-core-font-sans: "Nunito";--glide-core-font-weight-bold: 700;--glide-core-font-weight-semi-bold: 600;--glide-core-glow-sm: 0px 0px 2px 0px #2c97eee5;--glide-core-heading-xs-font-size: 1.25rem;--glide-core-heading-xs-font-weight: var(--glide-core-font-weight-semi-bold);--glide-core-heading-xxs-font-family: var(--glide-core-font-sans);--glide-core-heading-xxs-font-size: 1rem;--glide-core-heading-xxs-font-style: normal;--glide-core-heading-xxs-font-variant: normal;--glide-core-heading-xxs-font-weight: var(--glide-core-font-weight-bold);--glide-core-heading-xxxs-font-family: var(--glide-core-font-sans);--glide-core-heading-xxxs-font-size: .875rem;--glide-core-heading-xxxs-font-style: normal;--glide-core-heading-xxxs-font-variant: normal;--glide-core-heading-xxxs-font-weight: var(--glide-core-font-weight-bold);--glide-core-heading-xxxs-line-height: 1.7;--glide-core-shadow-lg: 0px 4px 14px 0px #00000040;--glide-core-shadow-sm: 0px 2.275px 8.342px 0px rgba(181, 181, 181, .25);--glide-core-shadow-xl: 0px 4px 60px 0px #adadad}

package/dist/styles/visually-hidden.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("lit").CSSResult;
+declare const _default: (selector: string) => import("lit").CSSResult;
 export default _default;

package/dist/styles/visually-hidden.js

@@ -1 +1,14 @@
-import{unsafeCSS}from"lit";export default unsafeCSS("\n    border-width: 0;\n    clip: rect(0, 0, 0, 0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n");
+import{css,unsafeCSS}from"lit";export default e=>css`
+    /* stylelint-disable selector-type-case, selector-type-no-unknown */
+    ${unsafeCSS(e)} {
+      block-size: 1px;
+      border-width: 0;
+      clip: rect(0, 0, 0, 0);
+      inline-size: 1px;
+      margin: -1px;
+      overflow: hidden;
+      padding: 0;
+      position: absolute;
+      white-space: nowrap;
+    }
+  `;

package/dist/tab.group.d.ts

@@ -18,12 +18,12 @@ export default class GlideCoreTabGroup extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
-    /**
-     * The tab element that is currently active
-     * */
-    activeTab?: GlideCoreTab;
-    isShowOverflowStartButton: boolean;
-    isShowOverflowEndButton: boolean;
+    get activeTab(): GlideCoreTab | null;
+    set activeTab(tab: GlideCoreTab | null);
+    isAfterFirstUpdated: boolean;
+    isDisableOverflowStartButton: boolean;
+    isDisableOverflowEndButton: boolean;
+    isShowOverflowButtons: boolean;
     panelElements: GlideCoreTabPanel[];
     tabElements: GlideCoreTab[];
     disconnectedCallback(): void;

package/dist/tab.group.js

@@ -1 +1 @@
-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.#b("right",!0)},this.#d=()=>{this.#b("left",!0)},this.#v=()=>{for(const[,t]of this.tabElements.entries())t.tabIndex=t===this.activeTab?0:-1},this.#m=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++}o<0&&(o=this.tabElements.length-1),o>this.tabElements.length-1&&(o=0),this.tabElements[o].focus({preventScroll:!1});for(const[,t]of this.tabElements.entries())t.tabIndex=this.tabElements[o]===t?0:-1;if(this.#w(),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.#b("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.#b("right")}t.preventDefault()}}},this.#w=()=>{this.#E(),this.#p()}}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.#T(),this.#g(),this.#R()}render(){return html`<div class="component" @click="${this.#c}" @keydown="${this.#m}"><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.#d}" 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.#y}" @focusout="${this.#v}"><slot name="nav" @slotchange="${this.#S}" ${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.#C}" ${ref(this.#e)}></slot></div>`}updated(){this.#T()}#t;#e;#o;#i;#s;#l;#n;#r;#a;#h;#c;#f;#d;#v;#m;#w;#C(){owSlotType(this.#e.value,[GlideCoreTabPanel])}#S(){owSlotType(this.#i.value,[GlideCoreTab]),this.#w()}#y(){this.#a&&clearTimeout(this.#a),this.#a=setTimeout((()=>{this.#w()}),this.#t)}#b(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())this.activeTab||0!==t?(e.active=this.activeTab===e,e.tabIndex=this.activeTab===e?0:-1):(this.activeTab=e,this.activeTab.active=!0,this.activeTab.tabIndex=0);for(const t of this.panelElements){const e=this.activeTab?.getAttribute("panel"),o=t.getAttribute("name");t.isActive=o===e,t.tabIndex=o===e?0:-1}}#p(){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}}#E(){ow(this.#h.value,ow.object.instanceOf(HTMLElement)),this.isShowOverflowStartButton=this.#h.value.scrollLeft>0}#R(){this.#n=new ResizeObserver((t=>{t?.at(0)?.target===this.#h.value&&(this.#r&&clearTimeout(this.#r),this.#r=setTimeout((()=>{this.#w()}),this.#t))})),ow(this.#h.value,ow.object.instanceOf(HTMLElement)),this.#n.observe(this.#h.value)}#T(){for(const t of this.tabElements){const e=this.panelElements.filter((e=>e.name===t.panel))?.at(0);ow(e,ow.object.instanceOf(GlideCoreTabPanel)),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;
+var __decorate=this&&this.__decorate||function(t,e,i,s){var o,l=arguments.length,a=l<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,i,s);else for(var r=t.length-1;r>=0;r--)(o=t[r])&&(a=(l<3?o(a):l>3?o(e,i,a):o(e,i))||a);return l>3&&a&&Object.defineProperty(e,i,a),a};import"./icon-button.js";import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";import{classMap}from"lit/directives/class-map.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.isAfterFirstUpdated=!1,this.isDisableOverflowStartButton=!1,this.isDisableOverflowEndButton=!1,this.isShowOverflowButtons=!1,this.#t=createRef(),this.#e=null,this.#i=100,this.#s=createRef(),this.#o=new LocalizeController(this),this.#l=createRef(),this.#a=1,this.#r=createRef(),this.#n=createRef(),this.#c=null,this.#h=null,this.#b=null,this.#u=null,this.#d=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get activeTab(){return this.#e}set activeTab(t){this.#c=this.#e,this.#e=t}disconnectedCallback(){this.#h?.disconnect(),this.#h=null}firstUpdated(){owSlotType(this.#l.value,[GlideCoreTab]),owSlotType(this.#s.value,[GlideCoreTabPanel]),this.#f(),this.#v(),this.#m(),this.#p()}render(){return html`<div class="component" @click="${this.#w}" @keydown="${this.#T}" ${ref(this.#t)}><div class="tab-container">${when(this.isShowOverflowButtons,(()=>html`<button style="height: ${this.#d.value?.clientHeight}px" class="${classMap({overflow:!0,disabled:this.isDisableOverflowStartButton})}" @click="${this.#E}" tabindex="-1" aria-label="${this.#o.term("previousTab")}" data-test="overflow-start-button" ${ref(this.#n)} ?disabled="${this.isDisableOverflowStartButton}"><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 role="tablist" class="${classMap({"tab-group":!0,animated:this.isAfterFirstUpdated})}" ${ref(this.#d)} @scroll="${this.#R}" @focusout="${this.#g}" tabindex="-1"><slot name="nav" @slotchange="${this.#S}" ${ref(this.#l)}></slot></div>${when(this.isShowOverflowButtons,(()=>html`<button style="height: ${this.#d.value?.clientHeight}px" class="${classMap({overflow:!0,disabled:this.isDisableOverflowEndButton})}" @click="${this.#y}" tabindex="-1" aria-label="${this.#o.term("nextTab")}" data-test="overflow-end-button" ${ref(this.#r)} ?disabled="${this.isDisableOverflowEndButton}"><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><slot @slotchange="${this.#O}" ${ref(this.#s)}></slot></div>`}updated(){this.#f()}#t;#e;#i;#s;#o;#l;#a;#r;#n;#c;#h;#b;#u;#d;#w(t){const e=t.target.closest("glide-core-tab");e&&e instanceof GlideCoreTab&&!e.disabled&&this.#B(e)}#y(){this.#C("right")}#E(){this.#C("left")}#O(){owSlotType(this.#s.value,[GlideCoreTabPanel])}#g(){for(const[,t]of this.tabElements.entries())t.tabIndex=t===this.activeTab?0:-1}#T(t){const e=t.target.closest("glide-core-tab");if(["Enter"," "].includes(t.key)&&e&&e instanceof GlideCoreTab&&!e.disabled&&(this.#B(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 i=this.tabElements.indexOf(e);switch(t.key){case"Home":i=0;break;case"End":i=this.tabElements.length-1;break;case"ArrowLeft":i--;break;case"ArrowRight":i++}i<0&&(i=this.tabElements.length-1),i>this.tabElements.length-1&&(i=0),this.tabElements[i].focus({preventScroll:!1});for(const[,t]of this.tabElements.entries())t.tabIndex=this.tabElements[i]===t?0:-1;this.#L(),t.preventDefault()}}}#S(){owSlotType(this.#l.value,[GlideCoreTab]),this.#L()}#R(){this.#u&&clearTimeout(this.#u),this.#u=setTimeout((()=>{this.#L()}),this.#i)}#C(t){const e="right"===t?1:-1;ow(this.#d.value,ow.object.instanceOf(HTMLElement));const i=e*this.#d.value?.clientWidth*.5;this.#d.value?.scrollBy({left:i,top:0})}#v(){for(const[t,e]of this.tabElements.entries())this.activeTab||0!==t?(e.active=this.activeTab===e,e.tabIndex=this.activeTab===e?0:-1):(this.activeTab=e,this.activeTab.active=!0,this.activeTab.tabIndex=0);for(const t of this.panelElements){const e=this.activeTab?.getAttribute("panel"),i=t.getAttribute("name");t.isActive=i===e,t.tabIndex=i===e?0:-1}if(this.activeTab!==this.#c&&this.activeTab&&this.tabElements.length>0&&this.#t.value){const t=Number.parseInt(window.getComputedStyle(this.activeTab).getPropertyValue("padding-inline-"+(this.activeTab===this.tabElements.at(0)?"start":"end"))),e=this.activeTab===this.tabElements.at(0)?t:this.activeTab.offsetLeft-this.tabElements[0].offsetLeft;this.#t.value.style.setProperty("--active-tab-indicator-translate",`${e}px`);const i=this.activeTab===this.tabElements.at(0)||this.activeTab===this.tabElements.at(-1)?t:0;this.#t.value.style.setProperty("--active-tab-indicator-width",this.activeTab.clientWidth-i+"px")}}#A(){const t=this.#d.value,e=t?.getBoundingClientRect();if(ow(t,ow.object.instanceOf(HTMLElement)),e){const{width:i}=e,s=t.scrollLeft+i,o=t.scrollWidth;this.isDisableOverflowEndButton=o-s<=this.#a}}#L(){const t=this.#d.value,e=t?.getBoundingClientRect();if(t&&e){const{width:i}=e;this.isShowOverflowButtons=t.scrollWidth-i>this.#a}this.#G(),this.#A()}#G(){ow(this.#d.value,ow.object.instanceOf(HTMLElement)),this.isDisableOverflowStartButton=this.#d.value.scrollLeft<=0}#m(){requestAnimationFrame((()=>{if(this.activeTab&&this.#t.value){const t=Number.parseInt(window.getComputedStyle(this.activeTab).getPropertyValue("padding-inline-start")),{width:e}=this.activeTab.getBoundingClientRect();this.#t.value.style.setProperty("--active-tab-indicator-width",e-t+"px"),this.#t.value.style.setProperty("--active-tab-indicator-translate",`${t}px`),setTimeout((()=>{this.isAfterFirstUpdated=!0}))}}))}#p(){this.#h=new ResizeObserver((t=>{t?.at(0)?.target===this.#d.value&&(this.#b&&clearTimeout(this.#b),this.#b=setTimeout((()=>{this.#L()}),this.#i))})),ow(this.#d.value,ow.object.instanceOf(HTMLElement)),this.#h.observe(this.#d.value)}#f(){for(const t of this.tabElements){const e=this.panelElements.filter((e=>e.name===t.panel))?.at(0);e?.getAttribute("id")&&(t.setAttribute("aria-controls",e.getAttribute("id")),e.setAttribute("aria-labelledby",t.getAttribute("id")))}}#B(t){this.activeTab=t,this.#v(),this.dispatchEvent(new CustomEvent("tab-show",{bubbles:!0,detail:{panel:t.panel}}))}};__decorate([state()],GlideCoreTabGroup.prototype,"activeTab",null),__decorate([state()],GlideCoreTabGroup.prototype,"isAfterFirstUpdated",void 0),__decorate([state()],GlideCoreTabGroup.prototype,"isDisableOverflowStartButton",void 0),__decorate([state()],GlideCoreTabGroup.prototype,"isDisableOverflowEndButton",void 0),__decorate([state()],GlideCoreTabGroup.prototype,"isShowOverflowButtons",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

@@ -6,17 +6,16 @@ import{css}from"lit";export default[css`
 
       & .tab-container {
         border-block-end: 1px solid var(--glide-core-border-base-lighter);
+        box-sizing: border-box;
         display: flex;
-
-        & .overflow-button-container {
-          flex-shrink: 0;
-          inline-size: 1.875rem;
-        }
       }
 
       & .tab-group {
         display: flex;
+        gap: var(--glide-core-spacing-xl);
         overflow: auto hidden;
+        position: relative;
+        scroll-behavior: smooth;
         scrollbar-width: none;
         white-space: nowrap;
 
@@ -26,16 +25,58 @@ import{css}from"lit";export default[css`
           block-size: 0;
           inline-size: 0;
         }
+
+        &::after {
+          background: var(--glide-core-border-focus);
+          block-size: 0.125rem;
+          content: '';
+          inline-size: var(--active-tab-indicator-width);
+          inset-block-end: 0;
+          inset-inline: 0;
+          position: absolute;
+          transform-origin: left;
+          translate: var(--active-tab-indicator-translate, 0) 0;
+        }
+
+        &.animated::after {
+          transition:
+            inline-size 250ms,
+            translate 250ms;
+        }
       }
 
       & .overflow {
         background-color: transparent;
         border: none;
+        color: var(--glide-core-icon-default);
         cursor: pointer;
+        flex-shrink: 0;
         inline-size: 1.875rem;
         margin: 0;
         outline: none;
         padding: 0;
+
+        &.disabled {
+          color: var(--glide-core-icon-tertiary-disabled);
+        }
+      }
+    }
+
+    ::slotted([slot='nav']:first-of-type) {
+      padding-inline-start: 0.1875rem;
+    }
+
+    ::slotted([slot='nav']:last-of-type) {
+      padding-inline-end: 0.1875rem;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .component .tab-group {
+        scroll-behavior: auto;
+
+        &.animated::after {
+          transition: none;
+        }
       }
     }
   `];

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

@@ -2,11 +2,12 @@
 import './tab.group.js';
 import './tab.js';
 import './tab.panel.js';
-import { expect, fixture, html, oneEvent } from '@open-wc/testing';
+import { expect, fixture, html, oneEvent, 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 expectArgumentError from './library/expect-argument-error.js';
+import sinon from 'sinon';
 GlideCoreTabGroup.shadowRootOptions.mode = 'open';
 GlideCoreTabPanel.shadowRootOptions.mode = 'open';
 function isPanelHidden(panel) {
@@ -31,7 +32,7 @@ it('renders correct markup and sets correct attributes for the default case', as
     ]);
     expect([
         ...tabGroup.shadowRoot.querySelector('.tab-group').classList,
-    ]).to.deep.equal(['tab-group']);
+    ]).to.deep.equal(['tab-group', 'animated']);
     const slot = tabGroup.shadowRoot.querySelector('slot:not([name="nav"])');
     expect(slot).to.exist;
     expect(slot.assignedElements.length).to.equal(0);
@@ -125,6 +126,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 () => {
+    const spy = sinon.spy();
+    window.addEventListener('unhandledrejection', spy);
+    // https://github.com/CrowdStrike/glide-core/pull/335#issuecomment-2327451869
+    const stub = sinon.stub(console, 'error');
     await expectArgumentError(() => {
         return fixture(html `
       <glide-core-tab-group>
@@ -133,4 +138,6 @@ it('throws an error when an element other than `glide-core-tab-panel` is a child
       </glide-core-tab-group>
     `);
     });
+    await waitUntil(() => spy.callCount === 1);
+    stub.restore();
 });