@crowdstrike/glide-core 0.13.0 → 0.14.0

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

@@ -1,58 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-import { elementUpdated, expect, fixture, html, waitUntil, } from '@open-wc/testing';
-import GlideCoreMenuButton from './menu.button.js';
-import GlideCoreSplitButtonSecondaryButton from './split-button.secondary-button.js';
-import expectArgumentError from './library/expect-argument-error.js';
-import sinon from 'sinon';
-GlideCoreSplitButtonSecondaryButton.shadowRootOptions.mode = 'open';
-GlideCoreMenuButton.shadowRootOptions.mode = 'open';
-it('registers', async () => {
-    expect(window.customElements.get('glide-core-split-button-secondary-button')).to.equal(GlideCoreSplitButtonSecondaryButton);
-});
-it('is accessible', async () => {
-    const component = await fixture(html `
-    <glide-core-split-button-secondary-button label="Label">
-      <glide-core-menu-button label="Label"></glide-core-menu-button>
-    </glide-core-split-button-secondary-button>
-  `);
-    await expect(component).to.be.accessible();
-    component.disabled = true;
-    await elementUpdated(component);
-    await expect(component).to.be.accessible();
-});
-it('has defaults', async () => {
-    const component = await fixture(html `
-    <glide-core-split-button-secondary-button label="Label">
-      <glide-core-menu-button label="Label"></glide-core-menu-button>
-    </glide-core-split-button-secondary-button>
-  `);
-    expect(component.disabled).to.be.false;
-    expect(component.menuOpen).to.be.false;
-    expect(component.menuPlacement).to.be.equal('bottom-end');
-    expect(component.privateSize).to.be.equal('large');
-    expect(component.privateVariant).to.be.equal('primary');
-});
-it('throws when its default slot is empty', async () => {
-    await expectArgumentError(() => fixture(html `
-      <glide-core-split-button-secondary-button
-        label="Label"
-      ></glide-core-split-button-secondary-button>
-    `));
-});
-it('throws when its default slot is the incorrect type', async () => {
-    await expectArgumentError(() => fixture(html `
-      <glide-core-split-button-secondary-button label="Label">
-        <div></div>
-      </glide-core-split-button-secondary-button>
-    `));
-    // Menu is rendered asynchronously outside of this component's lifecycle
-    // and asserts against its default slot. That assertion, which is expected
-    // to fail in this case, results in an unhandled rejection that gets logged.
-    // `console.error` is stubbed so the logs aren't muddied.
-    const stub = sinon.stub(console, 'error');
-    // Menu asserts against its default slot once on `firstUpdated` and again
-    // on "slotchange". So we wait until the stub is called twice before restoring
-    // it.
-    await waitUntil(() => stub.calledTwice);
-    stub.restore();
-});

package/dist/split-button.secondary-button.test.focus.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/split-button.secondary-button.test.focus.js

@@ -1,14 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-import { expect, fixture, html } from '@open-wc/testing';
-import GlideCoreSplitButtonSecondaryButton from './split-button.secondary-button.js';
-GlideCoreSplitButtonSecondaryButton.shadowRootOptions.mode = 'open';
-it('focuses itself when `focus()` is called', async () => {
-    const component = await fixture(html `
-    <glide-core-split-button-secondary-button label="Label">
-      <glide-core-menu-button label="Label"></glide-core-menu-button>
-    </glide-core-split-button-secondary-button>
-  `);
-    component.focus();
-    const button = component.shadowRoot?.querySelector('[data-test="button"]');
-    expect(component.shadowRoot?.activeElement).to.equal(button);
-});

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

@@ -1,2 +0,0 @@
-import './menu.button.js';
-import './menu.options.js';

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

@@ -1,30 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-import './menu.button.js';
-import './menu.options.js';
-import { aTimeout, expect, fixture, html } from '@open-wc/testing';
-import GlideCoreSplitButtonSecondaryButton from './split-button.secondary-button.js';
-GlideCoreSplitButtonSecondaryButton.shadowRootOptions.mode = 'open';
-it('sets `menuOpen` when its menu is opened', async () => {
-    const component = await fixture(html `
-    <glide-core-split-button-secondary-button label="Label">
-      <glide-core-menu-button label="Label"></glide-core-menu-button>
-    </glide-core-split-button-secondary-button>
-  `);
-    component.click();
-    // Wait for the Mutation Observer to pick up the attribute change.
-    await aTimeout(0);
-    expect(component.menuOpen).to.be.true;
-});
-it('sets `menuOpen` when its menu is closed', async () => {
-    const component = await fixture(html `
-    <glide-core-split-button-secondary-button label="Label" menu-open>
-      <glide-core-menu-button label="Label"></glide-core-menu-button>
-    </glide-core-split-button-secondary-button>
-  `);
-    // Wait for Menu to open.
-    await aTimeout(0);
-    document.body.click();
-    // Wait for the Mutation Observer to pick up the attribute change.
-    await aTimeout(0);
-    expect(component.menuOpen).to.be.false;
-});

package/dist/split-button.stories.d.ts

@@ -1,13 +0,0 @@
-import './icons/storybook.js';
-import './menu.button.js';
-import './menu.link.js';
-import './split-button.js';
-import './split-button.primary-button.js';
-import './split-button.primary-link.js';
-import './split-button.secondary-button.js';
-import type { Meta, StoryObj } from '@storybook/web-components';
-declare const meta: Meta;
-export default meta;
-export declare const SplitButton: StoryObj;
-export declare const WithIcon: StoryObj;
-export declare const WithPrimaryLink: StoryObj;

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

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

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

@@ -1,87 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-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>
-      <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>
-      <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>
-  `);
-    expect(component.size).to.equal('large');
-    expect(component.variant).to.equal('primary');
-});
-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('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 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 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

@@ -1,4 +0,0 @@
-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

@@ -1,51 +0,0 @@
-/* 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/tab.group.test.basics.d.ts

@@ -1,3 +0,0 @@
-import './tab.group.js';
-import './tab.js';
-import './tab.panel.js';

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

@@ -1,234 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-import './tab.group.js';
-import './tab.js';
-import './tab.panel.js';
-import { assert, 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) {
-    return panel.shadowRoot?.firstElementChild?.classList.contains('hidden');
-}
-it('registers', async () => {
-    expect(window.customElements.get('glide-core-tab-group')).to.equal(GlideCoreTabGroup);
-    expect(window.customElements.get('glide-core-tab-panel')).to.equal(GlideCoreTabPanel);
-});
-it('renders correct markup and sets correct attributes for the default case', async () => {
-    const component = await fixture(html `
-    <glide-core-tab-group>
-      <glide-core-tab slot="nav" panel="1">Tab 1</glide-core-tab>
-      <glide-core-tab-panel name="1">Content for Tab 1</glide-core-tab-panel>
-    </glide-core-tab-group>
-  `);
-    await expect(component).to.be.accessible();
-    const [firstTab] = component.tabElements;
-    expect(component.activeTab).to.equal(firstTab, 'activeTab defaults to first tab');
-    expect([...component.shadowRoot.firstElementChild.classList]).to.deep.equal(['component']);
-    expect([
-        ...component.shadowRoot.querySelector('.tab-group').classList,
-    ]).to.deep.equal(['tab-group', 'animated']);
-    const slot = component.shadowRoot.querySelector('slot:not([name="nav"])');
-    expect(slot).to.exist;
-    expect(slot.assignedElements.length).to.equal(0);
-});
-it('can switch tabs', async () => {
-    const component = await fixture(html `
-    <glide-core-tab-group>
-      <glide-core-tab slot="nav" panel="1">Tab 1</glide-core-tab>
-      <glide-core-tab slot="nav" panel="2">Tab 2</glide-core-tab>
-      <glide-core-tab slot="nav" panel="3">Tab 3</glide-core-tab>
-      <glide-core-tab slot="nav" panel="4" disabled>Disabled</glide-core-tab>
-
-      <glide-core-tab-panel name="1">Content for Tab 1</glide-core-tab-panel>
-      <glide-core-tab-panel name="2">Content for Tab 2</glide-core-tab-panel>
-      <glide-core-tab-panel name="3">Content for Tab 3</glide-core-tab-panel>
-      <glide-core-tab-panel name="4">Content for Tab 4</glide-core-tab-panel>
-    </glide-core-tab-group>
-  `);
-    const listener = oneEvent(component, 'tab-show');
-    const [firstTab, secondTab, thirdTab, disabledTab] = component.tabElements;
-    const [firstPanel, secondPanel, thirdPanel] = component.panelElements;
-    // first tab defaults to active
-    expect(firstTab.active).to.be.true;
-    // other tabs default to not active
-    expect(secondTab.active).to.be.false;
-    // first panel is not hidden by default
-    expect(isPanelHidden(firstPanel)).to.be.false;
-    // nonactive panel is hidden by default
-    expect(isPanelHidden(secondPanel)).to.be.true;
-    secondTab.click();
-    const triggeredEvent = await listener;
-    // after clicking a different tab, previous tab is no longer active
-    expect(firstTab.active).to.be.false;
-    // clicked tab becomes active
-    expect(secondTab.active).to.be.true;
-    // after clicking a different tab, previous panel is hidden
-    expect(isPanelHidden(firstPanel)).to.be.true;
-    // clicked tab's panel is no longer hidden
-    expect(isPanelHidden(secondPanel)).to.be.false;
-    expect(triggeredEvent.type).to.equal('tab-show', 'correct tab event fires');
-    expect(triggeredEvent.bubbles).to.be.true;
-    expect(triggeredEvent.detail.panel).to.equal('2', 'Can get the panel name from the tab click event');
-    secondTab.focus();
-    await sendKeys({ press: 'ArrowRight' });
-    // Should be focused on third tab. Press Enter on it
-    await sendKeys({ press: 'Enter' });
-    const secondTriggeredEvent = await listener;
-    // after pressing Enter on a different tab, previous tab is no longer active
-    expect(secondTab.active).to.be.false;
-    // new tab becomes active
-    expect(thirdTab.active).to.be.true;
-    // after pressing Enter on a different tab, previous panel is hidden
-    expect(isPanelHidden(secondPanel)).to.be.true;
-    // new tab's panel is no longer hidden
-    expect(isPanelHidden(thirdPanel)).to.be.false;
-    expect(secondTriggeredEvent.type).to.equal('tab-show', 'correct tab event fires for keydown');
-    expect(secondTriggeredEvent.bubbles).to.be.true;
-    expect(secondTriggeredEvent.detail.panel).to.equal('2', 'Can get the panel name from the tab show event');
-    disabledTab.click();
-    // clicking on a disabled tab does not make it active
-    expect(disabledTab.active).to.be.false;
-});
-it('can use left/right, home and end keys to focus on tabs', async () => {
-    const component = await fixture(html `
-    <glide-core-tab-group>
-      <glide-core-tab slot="nav" panel="1">Tab 1</glide-core-tab>
-      <glide-core-tab slot="nav" panel="2">Tab 2</glide-core-tab>
-      <glide-core-tab slot="nav" panel="3">Tab 3</glide-core-tab>
-
-      <glide-core-tab-panel name="1">Content for Tab 1</glide-core-tab-panel>
-      <glide-core-tab-panel name="2">Content for Tab 2</glide-core-tab-panel>
-      <glide-core-tab-panel name="3">Content for Tab 3</glide-core-tab-panel>
-    </glide-core-tab-group>
-  `);
-    const [firstTab, secondTab, thirdTab] = component.tabElements;
-    firstTab.focus();
-    await sendKeys({ press: 'ArrowRight' });
-    await sendKeys({ press: 'Enter' });
-    // right works
-    expect(secondTab.active).to.be.true;
-    await sendKeys({ press: 'ArrowLeft' });
-    await sendKeys({ press: 'Enter' });
-    // left works
-    expect(firstTab.active).to.be.true;
-    await sendKeys({ press: 'ArrowLeft' });
-    await sendKeys({ press: 'Enter' });
-    // left from first goes to last
-    expect(thirdTab.active).to.be.true;
-    await sendKeys({ press: 'ArrowRight' });
-    await sendKeys({ press: 'Enter' });
-    // right from last goes to first
-    expect(firstTab.active).to.be.true;
-    await sendKeys({ press: 'Home' });
-    await sendKeys({ press: 'Enter' });
-    expect(firstTab.active).to.be.true;
-    await sendKeys({ press: 'End' });
-    await sendKeys({ press: 'Enter' });
-    expect(thirdTab.active).to.be.true;
-});
-it('sets padding-inline-start of the Tab Group via `--tabs-padding-inline-start`', async () => {
-    const component = await fixture(html `
-    <glide-core-tab-group style="--tabs-padding-inline-start: 100px;">
-      <glide-core-tab slot="nav" panel="1">Tab 1</glide-core-tab>
-
-      <glide-core-tab-panel name="1">Content for Tab 1</glide-core-tab-panel>
-    </glide-core-tab-group>
-  `);
-    const tabContainer = component?.shadowRoot?.querySelector('[data-test="tab-container"]');
-    assert(tabContainer);
-    expect(window.getComputedStyle(tabContainer).paddingInline).to.equal('100px 0px');
-});
-it('sets padding-inline-end of the Tab Group via `--tabs-padding-inline-end`', async () => {
-    const component = await fixture(html `
-    <glide-core-tab-group style="--tabs-padding-inline-end: 100px;">
-      <glide-core-tab slot="nav" panel="1">Tab 1</glide-core-tab>
-
-      <glide-core-tab-panel name="1">Content for Tab 1</glide-core-tab-panel>
-    </glide-core-tab-group>
-  `);
-    const tabContainer = component?.shadowRoot?.querySelector('[data-test="tab-container"]');
-    assert(tabContainer);
-    expect(window.getComputedStyle(tabContainer).paddingInline).to.equal('0px 100px');
-});
-it('sets padding-block-start of the Tab Group via `--tabs-padding-block-start`', async () => {
-    const component = await fixture(html `
-    <glide-core-tab-group style="--tabs-padding-block-start: 100px;">
-      <glide-core-tab slot="nav" panel="1">Tab 1</glide-core-tab>
-
-      <glide-core-tab-panel name="1">Content for Tab 1</glide-core-tab-panel>
-    </glide-core-tab-group>
-  `);
-    const tabContainer = component?.shadowRoot?.querySelector('[data-test="tab-container"]');
-    assert(tabContainer);
-    expect(window.getComputedStyle(tabContainer).paddingBlock).to.equal('100px 0px');
-});
-it('sets padding-block-end of the Tab Group via `--tabs-padding-block-end`', async () => {
-    const component = await fixture(html `
-    <glide-core-tab-group style="--tabs-padding-block-end: 100px;">
-      <glide-core-tab slot="nav" panel="1">Tab 1</glide-core-tab>
-
-      <glide-core-tab-panel name="1">Content for Tab 1</glide-core-tab-panel>
-    </glide-core-tab-group>
-  `);
-    const tabContainer = component?.shadowRoot?.querySelector('[data-test="tab-container"]');
-    assert(tabContainer);
-    expect(window.getComputedStyle(tabContainer).paddingBlock).to.equal('0px 100px');
-});
-it('sets padding-inline-start of the Tab Panel via `--panel-padding-inline-start`', async () => {
-    const component = await fixture(html `
-    <glide-core-tab-group style="--panel-padding-inline-start: 100px;">
-      <glide-core-tab slot="nav" panel="1">Tab 1</glide-core-tab>
-
-      <glide-core-tab-panel name="1">Content for Tab 1</glide-core-tab-panel>
-    </glide-core-tab-group>
-  `);
-    const tabPanel = component
-        ?.querySelector('glide-core-tab-panel')
-        ?.shadowRoot?.querySelector('[data-test="tab-panel"]');
-    assert(tabPanel);
-    expect(window.getComputedStyle(tabPanel).paddingInline).to.equal('100px 0px');
-});
-it('sets padding-inline-end of the Tab Panel via `--panel-padding-inline-end`', async () => {
-    const component = await fixture(html `
-    <glide-core-tab-group style="--panel-padding-inline-end: 100px;">
-      <glide-core-tab slot="nav" panel="1">Tab 1</glide-core-tab>
-
-      <glide-core-tab-panel name="1">Content for Tab 1</glide-core-tab-panel>
-    </glide-core-tab-group>
-  `);
-    const tabPanel = component
-        ?.querySelector('glide-core-tab-panel')
-        ?.shadowRoot?.querySelector('[data-test="tab-panel"]');
-    assert(tabPanel);
-    expect(window.getComputedStyle(tabPanel).paddingInline).to.equal('0px 100px');
-});
-it('throws an error when an element other than `glide-core-tab` is a child of the `nav` slot', async () => {
-    await expectArgumentError(() => {
-        return fixture(html `
-      <glide-core-tab-group>
-        <div slot="nav">Tab 1</div>
-        <glide-core-tab-panel name="1">Content for Tab 1</glide-core-tab-panel>
-      </glide-core-tab-group>
-    `);
-    });
-});
-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>
-        <glide-core-tab slot="nav" panel="1">Tab 1</glide-core-tab>
-        <div>Default Content</div>
-      </glide-core-tab-group>
-    `);
-    });
-    await waitUntil(() => spy.callCount === 1);
-    stub.restore();
-});

package/dist/tab.group.test.interactions.d.ts

@@ -1,3 +0,0 @@
-import './tab.group.js';
-import './tab.js';
-import './tab.panel.js';