@crowdstrike/glide-core 0.9.6 → 0.11.0

package/dist/split-button.styles.js

@@ -1,100 +1,7 @@
 import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
-    ${focusOutline(".component:focus-visible")}
+    ${focusOutline(".menu-button:focus-visible")}
   `,css`
     .component {
-      align-items: center;
-      border-color: transparent;
-      border-radius: 0.75rem 0 0 0.75rem;
-      border-style: solid;
-      border-width: 1px 0 1px 1px;
-      cursor: pointer;
       display: inline-flex;
-      font-family: var(--glide-core-heading-xxs-font-family);
-      font-style: var(--glide-core-heading-xxs-font-style);
-      font-weight: var(--glide-core-heading-xxs-font-weight);
-      gap: 0.625rem;
-      justify-content: center;
-      padding-block: var(--glide-core-spacing-xs);
-      padding-inline: var(--glide-core-spacing-md);
-      padding-inline-end: var(--glide-core-spacing-xs);
-      text-decoration: none;
-      transition-duration: 150ms;
-      transition-property: color, background-color, border-color, fill, stroke;
-      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-      user-select: none;
-
-      &:focus {
-        outline: none;
-      }
-
-      &.disabled {
-        opacity: 1;
-        pointer-events: none;
-      }
-
-      &.primary {
-        background-color: var(--glide-core-surface-primary);
-        border-color: transparent;
-        color: var(--glide-core-text-selected);
-
-        /* Since the "disabled" styles are shared between a link and a button, we use a disabled class and not a pseudo-class */
-        &.disabled {
-          background-color: var(--glide-core-surface-disabled);
-          border-color: transparent;
-          color: var(--glide-core-text-tertiary-disabled);
-        }
-
-        &:not(.disabled):active {
-          background-color: var(--glide-core-surface-selected-hover);
-          border-color: transparent;
-          color: var(--glide-core-text-selected);
-        }
-
-        &:not(:active):hover:not(.disabled) {
-          background-color: var(--glide-core-surface-hover);
-          border-color: transparent;
-          box-shadow: var(--glide-core-glow-sm);
-          color: var(--glide-core-text-primary);
-        }
-      }
-
-      &.secondary {
-        background-color: transparent;
-        border-color: var(--glide-core-border-primary);
-        color: var(--glide-core-text-primary);
-
-        &.disabled {
-          background-color: var(--glide-core-surface-disabled);
-          border-color: transparent;
-          color: var(--glide-core-text-tertiary-disabled);
-        }
-
-        &:not(.disabled):active {
-          background-color: var(--glide-core-surface-selected-hover);
-          border-color: transparent;
-          color: var(--glide-core-text-selected);
-        }
-
-        &:not(:active):hover:not(.disabled) {
-          background-color: var(--glide-core-surface-hover);
-          border-color: transparent;
-          box-shadow: var(--glide-core-glow-sm);
-          color: var(--glide-core-text-primary);
-        }
-      }
-
-      &.small {
-        block-size: 1.75rem;
-        box-sizing: border-box;
-        font-size: var(--glide-core-body-xs-font-size);
-        line-height: 1rem;
-      }
-
-      &.large {
-        block-size: 2.125rem;
-        box-sizing: border-box;
-        font-size: var(--glide-core-body-xxs-font-size);
-        line-height: 1.5rem;
-      }
     }
   `];

package/dist/split-button.test.basics.d.ts

@@ -1 +1,2 @@
-import './split-button.js';
+import './split-button.primary-button.js';
+import './split-button.primary-link.js';

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

@@ -1,100 +1,87 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
-import './split-button.js';
-import { assert, elementUpdated, expect, fixture, html, } from '@open-wc/testing';
+import './split-button.primary-button.js';
+import './split-button.primary-link.js';
+import { expect, fixture, html } from '@open-wc/testing';
+import GlideCoreMenuButton from './menu.button.js';
 import GlideCoreSplitButton from './split-button.js';
+import GlideCoreSplitButtonSecondaryButton from './split-button.secondary-button.js';
 import expectArgumentError from './library/expect-argument-error.js';
 GlideCoreSplitButton.shadowRootOptions.mode = 'open';
+GlideCoreSplitButtonSecondaryButton.shadowRootOptions.mode = 'open';
+GlideCoreMenuButton.shadowRootOptions.mode = 'open';
 it('registers', async () => {
     expect(window.customElements.get('glide-core-split-button')).to.equal(GlideCoreSplitButton);
 });
 it('is accessible', async () => {
     const component = await fixture(html `
-    <glide-core-split-button>Button</glide-core-split-button>
+    <glide-core-split-button>
+      <glide-core-split-button-primary-button
+        label="Label"
+      ></glide-core-split-button-primary-button>
+
+      <glide-core-split-button-secondary-button
+        label="Label"
+        slot="secondary-button"
+      >
+        <glide-core-menu-button label="Label"></glide-core-menu-button>
+      </glide-core-split-button-secondary-button>
+    </glide-core-split-button>
   `);
     await expect(component).to.be.accessible();
 });
 it('has defaults', async () => {
-    const component = await fixture(html `<glide-core-split-button>Button</glide-core-split-button>`);
-    const button = component.shadowRoot?.querySelector('button');
-    assert(button);
-    expect(component.ariaExpanded).to.equal(null);
-    expect(component.ariaControls).to.equal(null);
-    expect(component.ariaHasPopup).to.equal(null);
-    expect(component.disabled).to.equal(false);
-    expect(component.size).to.equal('large');
-    expect(component.variant).to.equal('primary');
-    expect(button.getAttribute('aria-controls')).to.equal(null);
-    expect(button.ariaExpanded).to.equal(null);
-    expect(button.ariaHasPopup).to.equal(null);
-    expect(button.disabled).to.equal(false);
-});
-it('renders a button with a label by default', async () => {
-    const component = await fixture(html `
-    <glide-core-split-button>Button</glide-core-split-button>
-  `);
-    expect(component.textContent).to.equal('Button');
-});
-it('renders with size "large" and variant "primary" by default', async () => {
-    const component = await fixture(html `
-    <glide-core-split-button>Button</glide-core-split-button>
-  `);
-    const button = component?.shadowRoot?.querySelector('[data-test="split-button"]');
-    expect(button?.classList.contains('large')).to.be.true;
-    expect(button?.classList.contains('primary')).to.be.true;
-});
-it('adds "small" styling when "size" attribute is "small"', async () => {
-    const component = await fixture(html `
-    <glide-core-split-button size="small">Button</glide-core-split-button>
-  `);
-    const button = component?.shadowRoot?.querySelector('[data-test="split-button"]');
-    expect(button?.classList.contains('small')).to.be.true;
-});
-it('adds "secondary" styling when "variant" attribute is "secondary"', async () => {
-    const component = await fixture(html `
-    <glide-core-split-button variant="secondary"
-      >Button</glide-core-split-button
-    >
-  `);
-    const button = component?.shadowRoot?.querySelector('[data-test="split-button"]');
-    expect(button?.classList.contains('secondary')).to.be.true;
-});
-it('sets the button as "disabled" when the attribute exists', async () => {
     const component = await fixture(html `
-    <glide-core-split-button disabled>Button</glide-core-split-button>
+    <glide-core-split-button>
+      <glide-core-split-button-primary-link
+        label="Label"
+      ></glide-core-split-button-primary-link>
+
+      <glide-core-split-button-secondary-button
+        label="Label"
+        slot="secondary-button"
+      >
+        <glide-core-menu-button label="Label"></glide-core-menu-button>
+      </glide-core-split-button-secondary-button>
+    </glide-core-split-button>
   `);
-    const button = component?.shadowRoot?.querySelector('[data-test="split-button"]');
-    expect(button).to.have.attribute('disabled');
+    expect(component.size).to.equal('large');
+    expect(component.variant).to.equal('primary');
 });
-it('renders a prefix slot when given', async () => {
-    const component = await fixture(html `
-    <glide-core-split-button
-      ><div data-prefix slot="prefix">Prefix</div>
-      Button</glide-core-split-button
-    >
-  `);
-    expect(component.querySelector('[data-prefix]')).to.be.not.null;
+it('throws when its default slot is empty', async () => {
+    await expectArgumentError(() => fixture(html `<glide-core-split-button>
+        <glide-core-split-button-secondary-button
+          label="Label"
+          slot="secondary-button"
+        >
+          <glide-core-menu-button label="Label"></glide-core-menu-button>
+        </glide-core-split-button-secondary-button>
+      </glide-core-split-button>`));
 });
-it('renders with prefix class when dynamically added and removed', async () => {
-    const component = await fixture(html `
-    <glide-core-split-button>
-      <span slot="prefix">prefix</span>Button</glide-core-split-button
-    >
-  `);
-    expect(document.querySelector('[slot="prefix"]')).to.be.not.null;
-    expect([
-        ...component.shadowRoot.querySelector('[data-test="split-button"]')
-            .classList,
-    ]).to.include('has-prefix');
-    component.querySelector('[slot="prefix"]')?.remove();
-    await elementUpdated(component);
-    expect([
-        ...component.shadowRoot.querySelector('[data-test="split-button"]')
-            .classList,
-    ]).to.not.include('has-prefix');
+it('throws when its default slot is the incorrect type', async () => {
+    await expectArgumentError(() => fixture(html `<glide-core-split-button>
+        <div></div>
+
+        <glide-core-split-button-secondary-button
+          label="Label"
+          slot="secondary-button"
+        >
+          <glide-core-menu-button label="Label"></glide-core-menu-button>
+        </glide-core-split-button-secondary-button>
+      </glide-core-split-button>`));
 });
-it('throws an error when there is no button label', async () => {
-    await expectArgumentError(() => fixture(html `<glide-core-split-button></glide-core-split-button>`));
+it('throws when its "secondary-button" slot is empty', async () => {
+    await expectArgumentError(() => fixture(html `<glide-core-split-button>
+        <glide-core-split-button-primary-button
+          label="Label"
+        ></glide-core-split-button-primary-button>
+      </glide-core-split-button>`));
 });
-it('throws an error when there is something other than text in the default slot', async () => {
-    await expectArgumentError(() => fixture(html `<glide-core-split-button><div>test</div></glide-core-split-button>`));
+it('throws when its "secondary-button" slot is the incorrect type', async () => {
+    await expectArgumentError(() => fixture(html `<glide-core-split-button>
+        <glide-core-split-button-primary-button
+          label="Label"
+        ></glide-core-split-button-primary-button>
+
+        <div slot="secondary-button"></div>
+      </glide-core-split-button>`));
 });

package/dist/split-button.test.interactions.d.ts

@@ -0,0 +1,4 @@
+import './menu.button.js';
+import './split-button.primary-button.js';
+import './split-button.primary-link.js';
+import './split-button.secondary-button.js';

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

@@ -0,0 +1,51 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+import './menu.button.js';
+import './split-button.primary-button.js';
+import './split-button.primary-link.js';
+import './split-button.secondary-button.js';
+import { expect, fixture, html } from '@open-wc/testing';
+import GlideCoreSplitButton from './split-button.js';
+import GlideCoreSplitButtonContainer from './split-button.js';
+GlideCoreSplitButtonContainer.shadowRootOptions.mode = 'open';
+it('sets `privateSize` on its buttons when `size` is set programmatically', async () => {
+    const component = await fixture(html `
+    <glide-core-split-button>
+      <glide-core-split-button-primary-button
+        label="Label"
+      ></glide-core-split-button-primary-button>
+
+      <glide-core-split-button-secondary-button
+        label="Label"
+        slot="secondary-button"
+      >
+        <glide-core-menu-link label="Label" url="/"></glide-core-menu-link
+      ></glide-core-split-button-secondary-button>
+    </glide-core-split-button>
+  `);
+    component.size = 'small';
+    const primaryButton = component.querySelector('glide-core-split-button-primary-button');
+    const secondaryButton = component.querySelector('glide-core-split-button-secondary-button');
+    expect(primaryButton?.privateSize).to.equal('small');
+    expect(secondaryButton?.privateSize).to.equal('small');
+});
+it('sets `privateVariant` on its buttons when `variant` is set programmatically', async () => {
+    const component = await fixture(html `
+    <glide-core-split-button>
+      <glide-core-split-button-primary-button
+        label="Label"
+      ></glide-core-split-button-primary-button>
+
+      <glide-core-split-button-secondary-button
+        label="Label"
+        slot="secondary-button"
+      >
+        <glide-core-menu-link label="Label" url="/"></glide-core-menu-link>
+      </glide-core-split-button-secondary-button>
+    </glide-core-split-button>
+  `);
+    component.variant = 'secondary';
+    const primaryButton = component.querySelector('glide-core-split-button-primary-button');
+    const secondaryButton = component.querySelector('glide-core-split-button-secondary-button');
+    expect(primaryButton?.privateVariant).to.equal('secondary');
+    expect(secondaryButton?.privateVariant).to.equal('secondary');
+});

package/dist/styles/opacity-and-scale-animation.js

@@ -13,12 +13,8 @@ import{css,unsafeCSS}from"lit";export default e=>css`
     }
 
     ${unsafeCSS(e)} {
-      animation: opacity-and-scale 250ms cubic-bezier(0.25, 0, 0.3, 1);
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      ${unsafeCSS(e)} {
-        animation: none !important;
+      @media (prefers-reduced-motion: no-preference) {
+        animation: opacity-and-scale 250ms cubic-bezier(0.25, 0, 0.3, 1);
       }
     }
   `;

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-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: #00000066;--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}
+: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-page-size-details-panel: 27.375rem;--glide-core-page-size-height: 46.875rem;--glide-core-page-size-width: 83.3125rem;--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-base-transparent: #0000001a;--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-table-row-hover: #1d7afc26;--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: #8a8a8a;--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-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-base-transparent: #0000001a;--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: #f0f0f0;--glide-core-surface-base-gray: #00000066;--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-table-row-hover: #1d7afc26;--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: #8a8a8a;--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: #c9c9c9;--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-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/tab.d.ts

@@ -5,24 +5,15 @@ declare global {
     }
 }
 /**
- * @description A single tab. Always place inside of a <glide-core-tab-group> component.
- *
- * @slot - Main content (label) for the tab
- *
- * @slot icon - A slot for placing an optional icon for the tab
- *
+ * @slot - A label.
+ * @slot icon - An optional icon.
  */
 export default class GlideCoreTab extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
-    /**
-     * The name of the panel corresponding to this tab
-     */
     panel: string;
-    /** Sets the active attribute on the tab. */
     active: boolean;
-    /** Disables the tab. */
     disabled: boolean;
     protected firstUpdated(): void;
     render(): import("lit").TemplateResult<1>;

package/dist/tab.group.d.ts

@@ -8,16 +8,14 @@ declare global {
     }
 }
 /**
- * @description The parent component for a group of tabs. Handles active state changes from clicking the tabs.
- *
- * @slot nav - The slot where you place the <glide-core-tab> components
- *
- * @slot - The default slot. Put the <glide-core-tab-panel> components here
+ * @slot - One ore more of `<glide-core-tab-panel>`.
+ * @slot nav - One or more of `<glide-core-tab>`.
  */
 export default class GlideCoreTabGroup extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
+    sticky: boolean;
     get activeTab(): GlideCoreTab | null;
     set activeTab(tab: GlideCoreTab | null);
     isAfterFirstUpdated: boolean;

package/dist/tab.group.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(t,e,s,i){var o,l=arguments.length,a=l<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,s,i);else for(var r=t.length-1;r>=0;r--)(o=t[r])&&(a=(l<3?o(a):l>3?o(e,s,a):o(e,s))||a);return l>3&&a&&Object.defineProperty(e,s,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.#s=100,this.#i=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.#f=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.#i.value,[GlideCoreTabPanel]),this.#d()}render(){return html`<div class="component" @click="${this.#v}" @keydown="${this.#m}" ${ref(this.#t)}><div class="tab-container">${when(this.isShowOverflowButtons,(()=>html`<button style="height: ${this.#f.value?.clientHeight}px" class="${classMap({overflow:!0,disabled:this.isDisableOverflowStartButton})}" @click="${this.#p}" 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.#f)} @scroll="${this.#w}" @focusout="${this.#E}" tabindex="-1"><slot name="nav" @slotchange="${this.#T}" ${ref(this.#l)}></slot></div>${when(this.isShowOverflowButtons,(()=>html`<button style="height: ${this.#f.value?.clientHeight}px" class="${classMap({overflow:!0,disabled:this.isDisableOverflowEndButton})}" @click="${this.#R}" 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.#g}" ${ref(this.#i)}></slot></div>`}updated(){this.#S()}#t;#e;#s;#i;#o;#l;#a;#r;#n;#c;#h;#b;#u;#f;#v(t){const e=t.target.closest("glide-core-tab");e&&e instanceof GlideCoreTab&&!e.disabled&&this.#O(e)}#R(){this.#y("right")}#p(){this.#y("left")}#g(){owSlotType(this.#i.value,[GlideCoreTabPanel])}#E(){for(const[,t]of this.tabElements.entries())t.tabIndex=t===this.activeTab?0:-1}#m(t){const e=t.target.closest("glide-core-tab");if(["Enter"," "].includes(t.key)&&e&&e instanceof GlideCoreTab&&!e.disabled&&(this.#O(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 s=this.tabElements.indexOf(e);switch(t.key){case"Home":s=0;break;case"End":s=this.tabElements.length-1;break;case"ArrowLeft":s--;break;case"ArrowRight":s++}s<0&&(s=this.tabElements.length-1),s>this.tabElements.length-1&&(s=0),this.tabElements[s].focus({preventScroll:!1});for(const[,t]of this.tabElements.entries())t.tabIndex=this.tabElements[s]===t?0:-1;this.#B(),t.preventDefault()}}}#T(){owSlotType(this.#l.value,[GlideCoreTab]),this.#S(),this.#C(),this.#B()}#w(){this.#u&&clearTimeout(this.#u),this.#u=setTimeout((()=>{this.#B()}),this.#s)}#y(t){const e="right"===t?1:-1;ow(this.#f.value,ow.object.instanceOf(HTMLElement));const s=e*this.#f.value?.clientWidth*.5;this.#f.value?.scrollBy({left:s,top:0})}#C(){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"),s=t.getAttribute("name");t.isActive=s===e,t.tabIndex=s===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-start")),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 s=this.activeTab===this.tabElements.at(0)||this.activeTab===this.tabElements.at(-1)?t:0,{width:i}=this.activeTab.getBoundingClientRect();this.#t.value.style.setProperty("--active-tab-indicator-width",i-s+"px"),this.isAfterFirstUpdated=!0}}#L(){const t=this.#f.value,e=t?.getBoundingClientRect();if(ow(t,ow.object.instanceOf(HTMLElement)),e){const{width:s}=e,i=t.scrollLeft+s,o=t.scrollWidth;this.isDisableOverflowEndButton=o-i<=this.#a}}#B(){const t=this.#f.value,e=t?.getBoundingClientRect();if(t&&e){const{width:s}=e;this.isShowOverflowButtons=t.scrollWidth-s>this.#a}this.#A(),this.#L()}#A(){ow(this.#f.value,ow.object.instanceOf(HTMLElement)),this.isDisableOverflowStartButton=this.#f.value.scrollLeft<=0}#d(){this.#h=new ResizeObserver((t=>{t?.at(0)?.target===this.#f.value&&(this.#b&&clearTimeout(this.#b),this.#b=setTimeout((()=>{this.#B()}),this.#s))})),ow(this.#f.value,ow.object.instanceOf(HTMLElement)),this.#h.observe(this.#f.value)}#S(){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")))}}#O(t){this.activeTab=t,this.#C(),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;
+var __decorate=this&&this.__decorate||function(t,e,s,o){var i,l=arguments.length,a=l<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,s):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,s,o);else for(var r=t.length-1;r>=0;r--)(i=t[r])&&(a=(l<3?i(a):l>3?i(e,s,a):i(e,s))||a);return l>3&&a&&Object.defineProperty(e,s,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,property,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.sticky=!1,this.isAfterFirstUpdated=!1,this.isDisableOverflowStartButton=!1,this.isDisableOverflowEndButton=!1,this.isShowOverflowButtons=!1,this.#t=createRef(),this.#e=null,this.#s=100,this.#o=createRef(),this.#i=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.#o.value,[GlideCoreTabPanel]),this.#f()}render(){return html`<div class="component" @click="${this.#v}" @keydown="${this.#m}" ${ref(this.#t)}><div class="${classMap({"tab-container":!0,sticky:this.sticky})}">${when(this.isShowOverflowButtons,(()=>html`<button style="height: ${this.#d.value?.clientHeight}px" class="${classMap({overflow:!0,disabled:this.isDisableOverflowStartButton})}" @click="${this.#p}" tabindex="-1" aria-label="${this.#i.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.#w}" @focusout="${this.#T}" tabindex="-1"><slot name="nav" @slotchange="${this.#E}" ${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.#R}" tabindex="-1" aria-label="${this.#i.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.#g}" ${ref(this.#o)}></slot></div>`}updated(){this.#y()}#t;#e;#s;#o;#i;#l;#a;#r;#n;#c;#h;#b;#u;#d;#v(t){const e=t.target.closest("glide-core-tab");e&&e instanceof GlideCoreTab&&!e.disabled&&this.#S(e)}#R(){this.#O("right")}#p(){this.#O("left")}#g(){owSlotType(this.#o.value,[GlideCoreTabPanel])}#T(){for(const[,t]of this.tabElements.entries())t.tabIndex=t===this.activeTab?0:-1}#m(t){const e=t.target.closest("glide-core-tab");if(["Enter"," "].includes(t.key)&&e&&e instanceof GlideCoreTab&&!e.disabled&&(this.#S(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 s=this.tabElements.indexOf(e);switch(t.key){case"Home":s=0;break;case"End":s=this.tabElements.length-1;break;case"ArrowLeft":s--;break;case"ArrowRight":s++}s<0&&(s=this.tabElements.length-1),s>this.tabElements.length-1&&(s=0),this.tabElements[s].focus({preventScroll:!1});for(const[,t]of this.tabElements.entries())t.tabIndex=this.tabElements[s]===t?0:-1;this.#B(),t.preventDefault()}}}#E(){owSlotType(this.#l.value,[GlideCoreTab]),this.#y(),this.#C(),this.#B()}#w(){this.#u&&clearTimeout(this.#u),this.#u=setTimeout((()=>{this.#B()}),this.#s)}#O(t){const e="right"===t?1:-1;ow(this.#d.value,ow.object.instanceOf(HTMLElement));const s=e*this.#d.value?.clientWidth*.5;this.#d.value?.scrollBy({left:s,top:0})}#C(){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"),s=t.getAttribute("name");t.isActive=s===e,t.tabIndex=s===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-start")),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 s=this.activeTab===this.tabElements.at(0)||this.activeTab===this.tabElements.at(-1)?t:0,{width:o}=this.activeTab.getBoundingClientRect();this.#t.value.style.setProperty("--active-tab-indicator-width",o-s+"px"),this.isAfterFirstUpdated=!0}}#L(){const t=this.#d.value,e=t?.getBoundingClientRect();if(ow(t,ow.object.instanceOf(HTMLElement)),e){const{width:s}=e,o=t.scrollLeft+s,i=t.scrollWidth;this.isDisableOverflowEndButton=i-o<=this.#a}}#B(){const t=this.#d.value,e=t?.getBoundingClientRect();if(t&&e){const{width:s}=e;this.isShowOverflowButtons=t.scrollWidth-s>this.#a}this.#G(),this.#L()}#G(){ow(this.#d.value,ow.object.instanceOf(HTMLElement)),this.isDisableOverflowStartButton=this.#d.value.scrollLeft<=0}#f(){this.#h=new ResizeObserver((t=>{t?.at(0)?.target===this.#d.value&&(this.#b&&clearTimeout(this.#b),this.#b=setTimeout((()=>{this.#B()}),this.#s))})),ow(this.#d.value,ow.object.instanceOf(HTMLElement)),this.#h.observe(this.#d.value)}#y(){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")))}}#S(t){this.activeTab=t,this.#C(),this.dispatchEvent(new CustomEvent("tab-show",{bubbles:!0,detail:{panel:t.panel}}))}};__decorate([property({type:Boolean,reflect:!0})],GlideCoreTabGroup.prototype,"sticky",void 0),__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

@@ -5,20 +5,29 @@ import{css}from"lit";export default[css`
       flex-direction: column;
 
       & .tab-container {
+        background-color: var(--glide-core-surface-page);
         border-block-end: 1px solid var(--glide-core-border-base-lighter);
         box-sizing: border-box;
         display: flex;
       }
 
+      & .sticky {
+        inset-block-start: 0;
+        position: sticky;
+      }
+
       & .tab-group {
         display: flex;
         gap: var(--glide-core-spacing-xl);
         overflow: auto hidden;
         position: relative;
-        scroll-behavior: smooth;
         scrollbar-width: none;
         white-space: nowrap;
 
+        @media (prefers-reduced-motion: no-preference) {
+          scroll-behavior: smooth;
+        }
+
         /* "-webkit-scrollbar" is needed for Safari */
 
         &::-webkit-scrollbar {
@@ -38,10 +47,14 @@ import{css}from"lit";export default[css`
           translate: var(--active-tab-indicator-translate, 0) 0;
         }
 
-        &.animated::after {
-          transition:
-            inline-size 250ms,
-            translate 250ms;
+        &.animated {
+          @media (prefers-reduced-motion: no-preference) {
+            &::after {
+              transition:
+                inline-size 250ms,
+                translate 250ms;
+            }
+          }
         }
       }
 
@@ -69,14 +82,4 @@ import{css}from"lit";export default[css`
     ::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;
-        }
-      }
-    }
   `];