@crowdstrike/glide-core 0.13.0 → 0.14.0

package/dist/accordion.stories.d.ts

@@ -1,6 +0,0 @@
-import './icons/storybook.js';
-import type { Meta, StoryObj } from '@storybook/web-components';
-declare const meta: Meta;
-export default meta;
-export declare const Accordion: StoryObj;
-export declare const WithIcons: StoryObj;

package/dist/accordion.test.basics.d.ts

@@ -1 +0,0 @@
-import './accordion.js';

package/dist/accordion.test.basics.js

@@ -1,28 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-import './accordion.js';
-import { expect, fixture, html } from '@open-wc/testing';
-import GlideCoreAccordion from './accordion.js';
-GlideCoreAccordion.shadowRootOptions.mode = 'open';
-it('registers', async () => {
-    expect(window.customElements.get('glide-core-accordion')).to.equal(GlideCoreAccordion);
-});
-it('is accessible', async () => {
-    const component = await fixture(html `<glide-core-accordion label="Label">Content</glide-core-accordion>`);
-    await expect(component).to.be.accessible();
-});
-it('has defaults', async () => {
-    const component = await fixture(html `<glide-core-accordion label="Label">Content</glide-core-accordion>`);
-    expect(component.open).to.be.false;
-});
-it('`#onPrefixIconSlotChange` coverage', async () => {
-    await fixture(html `<glide-core-accordion label="Label">
-      Content
-      <div slot="prefix-icon"></div>
-    </glide-core-accordion>`);
-});
-it('`#onSuffixIconsSlotChange` coverage', async () => {
-    await fixture(html `<glide-core-accordion label="Label">
-      Content
-      <div slot="suffix-icons"></div>
-    </glide-core-accordion>`);
-});

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

@@ -1 +0,0 @@
-import './accordion.js';

package/dist/accordion.test.events.js

@@ -1,28 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-import './accordion.js';
-import { emulateMedia } from '@web/test-runner-commands';
-import { expect, fixture, html, oneEvent } from '@open-wc/testing';
-import GlideCoreAccordion from './accordion.js';
-GlideCoreAccordion.shadowRootOptions.mode = 'open';
-it('dispatches a "toggle" event on open', async () => {
-    await emulateMedia({ reducedMotion: 'reduce' });
-    const component = await fixture(html `<glide-core-accordion label="Label">Content</glide-core-accordion>`);
-    setTimeout(() => {
-        component.click();
-    });
-    const event = await oneEvent(component, 'toggle');
-    expect(event instanceof Event).to.be.true;
-    expect(event.bubbles).to.be.true;
-});
-it('dispatches a "toggle" event on close', async () => {
-    await emulateMedia({ reducedMotion: 'reduce' });
-    const component = await fixture(html `<glide-core-accordion label="Label" open>
-      Content
-    </glide-core-accordion>`);
-    setTimeout(() => {
-        component.click();
-    });
-    const event = await oneEvent(component, 'toggle');
-    expect(event instanceof Event).to.be.true;
-    expect(event.bubbles).to.be.true;
-});

package/dist/accordion.test.focus.d.ts

@@ -1 +0,0 @@
-import './accordion.js';

package/dist/accordion.test.focus.js

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

package/dist/accordion.test.interactions.d.ts

@@ -1 +0,0 @@
-import './accordion.js';

package/dist/accordion.test.interactions.js

@@ -1,75 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-import './accordion.js';
-import { emulateMedia } from '@web/test-runner-commands';
-import { expect, fixture, html, waitUntil } from '@open-wc/testing';
-import { sendKeys } from '@web/test-runner-commands';
-import GlideCoreAccordion from './accordion.js';
-GlideCoreAccordion.shadowRootOptions.mode = 'open';
-it('can be opened via click', async () => {
-    await emulateMedia({ reducedMotion: 'reduce' });
-    const component = await fixture(html `<glide-core-accordion label="Label">Content</glide-core-accordion>`);
-    component.click();
-    expect(component.open).to.be.true;
-});
-it('can be opened via click when animated', async () => {
-    await emulateMedia({ reducedMotion: 'no-preference' });
-    const component = await fixture(html `<glide-core-accordion label="Label">Content</glide-core-accordion>`);
-    component.click();
-    let animation;
-    let isAnimationFinished = false;
-    await waitUntil(() => {
-        animation = component.shadowRoot
-            ?.querySelector('[data-test="default-slot"]')
-            ?.getAnimations()
-            ?.at(0);
-        return animation;
-    });
-    animation?.addEventListener('finish', () => {
-        isAnimationFinished = true;
-    });
-    await waitUntil(() => isAnimationFinished);
-    expect(component.open).to.be.true;
-});
-it('can be opened via Space', async () => {
-    await emulateMedia({ reducedMotion: 'reduce' });
-    const component = await fixture(html `<glide-core-accordion label="Label">Content</glide-core-accordion>`);
-    component.focus();
-    await sendKeys({ press: ' ' });
-    expect(component.open).to.be.true;
-});
-it('can be opened via Enter', async () => {
-    await emulateMedia({ reducedMotion: 'reduce' });
-    const component = await fixture(html `<glide-core-accordion label="Label">Content</glide-core-accordion>`);
-    component.focus();
-    await sendKeys({ press: 'Enter' });
-    expect(component.open).to.be.true;
-});
-it('can be closed via click', async () => {
-    await emulateMedia({ reducedMotion: 'reduce' });
-    const component = await fixture(html `<glide-core-accordion label="Label" open>
-      Content
-    </glide-core-accordion>`);
-    component.click();
-    expect(component.open).to.be.false;
-});
-it('can be closed via click when animated', async () => {
-    await emulateMedia({ reducedMotion: 'no-preference' });
-    const component = await fixture(html `<glide-core-accordion label="Label" open>
-      Content
-    </glide-core-accordion>`);
-    component.click();
-    let animation;
-    let isAnimationFinished = false;
-    await waitUntil(() => {
-        animation = component.shadowRoot
-            ?.querySelector('[data-test="default-slot"]')
-            ?.getAnimations()
-            ?.at(0);
-        return animation;
-    });
-    animation?.addEventListener('finish', () => {
-        isAnimationFinished = true;
-    });
-    await waitUntil(() => isAnimationFinished);
-    expect(component.open).to.be.false;
-});

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

@@ -1 +0,0 @@
-import './button-group.button.js';

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

@@ -1,97 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-import './button-group.button.js';
-import { ArgumentError } from 'ow';
-import { expect, fixture, html } from '@open-wc/testing';
-import GlideCoreButtonGroupButton from './button-group.button.js';
-import sinon from 'sinon';
-GlideCoreButtonGroupButton.shadowRootOptions.mode = 'open';
-it('registers', async () => {
-    expect(window.customElements.get('glide-core-button-group-button')).to.equal(GlideCoreButtonGroupButton);
-});
-it('has defaults', async () => {
-    const component = await fixture(html `
-    <glide-core-button-group-button
-      label="Button"
-    ></glide-core-button-group-button>
-  `);
-    expect(component.disabled).to.be.false;
-    expect(component.selected).to.be.false;
-    expect(component.value).to.equal('');
-    expect(component.getAttribute('value')).to.equal('');
-    expect(component).to.not.have.attribute('disabled');
-    expect(component).to.not.have.attribute('selected');
-});
-it('is accessible', async () => {
-    const component = await fixture(html `<glide-core-button-group-button
-      label="Button"
-    ></glide-core-button-group-button>`);
-    await expect(component).to.be.accessible();
-});
-it('can have a label', async () => {
-    const component = await fixture(html `<glide-core-button-group-button
-      label="Button"
-      selected
-    ></glide-core-button-group-button>`);
-    expect(component.shadowRoot?.textContent?.trim()).to.equal('Button');
-});
-it('sets `aria-checked` when selected', async () => {
-    const component = await fixture(html `<glide-core-button-group-button
-      label="Button"
-      selected
-    ></glide-core-button-group-button>`);
-    const radio = component.shadowRoot?.querySelector('[role="radio"]');
-    expect(radio?.getAttribute('aria-checked')).to.equal('true');
-});
-it('sets `aria-checked` when not selected', async () => {
-    const component = await fixture(html `<glide-core-button-group-button
-      label="Button"
-    ></glide-core-button-group-button>`);
-    const radio = component.shadowRoot?.querySelector('[role="radio"]');
-    expect(radio?.getAttribute('aria-checked')).to.equal('false');
-});
-it('sets `aria-disabled` when disabled', async () => {
-    const component = await fixture(html `<glide-core-button-group-button
-      label="Button"
-      disabled
-    ></glide-core-button-group-button>`);
-    const radio = component.shadowRoot?.querySelector('[role="radio"]');
-    expect(radio?.getAttribute('aria-disabled')).to.equal('true');
-});
-it('sets `aria-disabled` when not disabled', async () => {
-    const component = await fixture(html `<glide-core-button-group-button
-      label="Button"
-    ></glide-core-button-group-button>`);
-    const radio = component.shadowRoot?.querySelector('[role="radio"]');
-    expect(radio?.getAttribute('aria-disabled')).to.equal('false');
-});
-it('is tabbable when selected', async () => {
-    const component = await fixture(html `<glide-core-button-group-button
-      label="Button"
-      selected
-    ></glide-core-button-group-button>`);
-    const radio = component.shadowRoot?.querySelector('[role="radio"]');
-    expect(radio?.getAttribute('tabindex')).to.equal('0');
-});
-it('is not tabbable when not selected', async () => {
-    const component = await fixture(html `<glide-core-button-group-button
-      label="Button"
-    ></glide-core-button-group-button>`);
-    const radio = component.shadowRoot?.querySelector('[role="radio"]');
-    expect(radio?.getAttribute('tabindex')).to.equal('-1');
-});
-it('throws when icon-only and no "icon" slot', async () => {
-    const spy = sinon.spy();
-    try {
-        await fixture(html `<glide-core-button-group-button
-        value="value"
-        selected
-        privateVariant="icon-only"
-      ></glide-core-button-group-button>`);
-    }
-    catch (error) {
-        if (error instanceof ArgumentError) {
-            spy();
-        }
-    }
-    expect(spy.callCount).to.equal(1);
-});

package/dist/button-group.button.test.events.d.ts

@@ -1 +0,0 @@
-import './button-group.button.js';

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

@@ -1,15 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-import './button-group.button.js';
-import { expect, fixture, html, oneEvent } from '@open-wc/testing';
-import GlideCoreButtonGroupButton from './button-group.button.js';
-it('emits a "private-selected" event when selected', async () => {
-    const component = await fixture(html `<glide-core-button-group-button
-      label="Button"
-    ></glide-core-button-group-button>`);
-    setTimeout(() => {
-        component.selected = true;
-    });
-    const event = await oneEvent(component, 'private-selected');
-    expect(event instanceof Event).to.be.true;
-    expect(event.bubbles).to.be.true;
-});

package/dist/button-group.button.test.focus.d.ts

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

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

@@ -1,13 +0,0 @@
-import { expect, fixture, html } from '@open-wc/testing';
-import GlideCoreButtonGroupButton from './button-group.button.js';
-GlideCoreButtonGroupButton.shadowRootOptions.mode = 'open';
-it('focuses itself when `focus()` is called ', async () => {
-    const component = await fixture(html `
-    <glide-core-button-group-button
-      label="Button"
-    ></glide-core-button-group-button>
-  `);
-    component.focus();
-    const radio = component.shadowRoot?.querySelector('[role="radio"]');
-    expect(component.shadowRoot?.activeElement).to.equal(radio);
-});

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

@@ -1 +0,0 @@
-import './button-group.button.js';

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

@@ -1,42 +0,0 @@
-import './button-group.button.js';
-import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
-import GlideCoreButtonGroupButton from './button-group.button.js';
-GlideCoreButtonGroupButton.shadowRootOptions.mode = 'open';
-it('sets `aria-checked` when selected programmatically', async () => {
-    const component = await fixture(html `<glide-core-button-group-button
-      label="Button"
-    ></glide-core-button-group-button>`);
-    component.selected = true;
-    await elementUpdated(component);
-    const radio = component.shadowRoot?.querySelector('[role="radio"]');
-    expect(radio?.getAttribute('aria-checked')).to.equal('true');
-});
-it('sets `aria-checked` when deselected programmatically', async () => {
-    const component = await fixture(html `<glide-core-button-group-button
-      label="Button"
-      selected
-    ></glide-core-button-group-button>`);
-    component.selected = false;
-    await elementUpdated(component);
-    const radio = component.shadowRoot?.querySelector('[role="radio"]');
-    expect(radio?.getAttribute('aria-checked')).to.equal('false');
-});
-it('sets `aria-disabled` when disabled programmatically', async () => {
-    const component = await fixture(html `<glide-core-button-group-button
-      label="Button"
-    ></glide-core-button-group-button>`);
-    component.disabled = true;
-    await elementUpdated(component);
-    const radio = component.shadowRoot?.querySelector('[role="radio"]');
-    expect(radio?.getAttribute('aria-disabled')).to.equal('true');
-});
-it('sets `aria-disabled` when enabled programmatically', async () => {
-    const component = await fixture(html `<glide-core-button-group-button
-      label="Button"
-      disabled
-    ></glide-core-button-group-button>`);
-    component.disabled = false;
-    await elementUpdated(component);
-    const radio = component.shadowRoot?.querySelector('[role="radio"]');
-    expect(radio?.getAttribute('aria-disabled')).to.equal('false');
-});

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

@@ -1,7 +0,0 @@
-import './button-group.js';
-import './icons/storybook.js';
-import type { Meta, StoryObj } from '@storybook/web-components';
-declare const meta: Meta;
-export default meta;
-export declare const ButtonGroup: StoryObj;
-export declare const WithIcons: StoryObj;

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

@@ -1 +0,0 @@
-import './button-group.js';

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

@@ -1,148 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-import './button-group.js';
-import { expect, fixture, html } from '@open-wc/testing';
-import GlideCoreButtonGroup from './button-group.js';
-import GlideCoreButtonGroupButton from './button-group.button.js';
-import expectArgumentError from './library/expect-argument-error.js';
-GlideCoreButtonGroup.shadowRootOptions.mode = 'open';
-GlideCoreButtonGroupButton.shadowRootOptions.mode = 'open';
-it('registers', async () => {
-    expect(window.customElements.get('glide-core-button-group')).to.equal(GlideCoreButtonGroup);
-});
-it('has defaults', async () => {
-    const component = await fixture(html `<glide-core-button-group label="Label">
-      <glide-core-button-group-button
-        label="One"
-      ></glide-core-button-group-button>
-
-      <glide-core-button-group-button
-        label="Two"
-      ></glide-core-button-group-button>
-    </glide-core-button-group>`);
-    expect(component.orientation).to.equal('horizontal');
-    expect(component.variant).to.equal(undefined);
-    expect(component.getAttribute('orientation')).to.equal('horizontal');
-    expect(component).to.not.have.attribute('variant');
-});
-it('is accessible', async () => {
-    const component = await fixture(html `<glide-core-button-group label="Label">
-      <glide-core-button-group-button
-        label="One"
-      ></glide-core-button-group-button>
-
-      <glide-core-button-group-button
-        label="Two"
-      ></glide-core-button-group-button>
-    </glide-core-button-group>`);
-    // It's unfortunate to ignore this rule. But the label doesn't meet color
-    // contrast requirements.
-    // Axe has an `ignoreTags` but no `ignoreSelectors`.
-    await expect(component).to.be.accessible({
-        ignoredRules: ['color-contrast'],
-    });
-});
-it('can have a label', async () => {
-    const component = await fixture(html `<glide-core-button-group label="Label">
-      <glide-core-button-group-button
-        label="One"
-      ></glide-core-button-group-button>
-
-      <glide-core-button-group-button
-        label="Two"
-      ></glide-core-button-group-button>
-    </glide-core-button-group>`);
-    const label = component.shadowRoot?.querySelector('[data-test="label"]');
-    const radioGroup = component.shadowRoot?.querySelector('[role="radiogroup"]');
-    expect(label?.textContent).to.equal('Label');
-    expect(radioGroup?.getAttribute('aria-labelledby')).to.equal(label?.id);
-});
-it('sets the orientation of each button when horizontal', async () => {
-    await fixture(html `<glide-core-button-group>
-      <glide-core-button-group-button
-        label="One"
-      ></glide-core-button-group-button>
-
-      <glide-core-button-group-button
-        label="Two"
-      ></glide-core-button-group-button>
-    </glide-core-button-group>`);
-    const buttons = document.querySelectorAll('glide-core-button-group-button');
-    expect(buttons[0]?.privateOrientation).to.equal('horizontal');
-    expect(buttons[1]?.privateOrientation).to.equal('horizontal');
-});
-it('sets the orientation of each button when vertical', async () => {
-    await fixture(html `<glide-core-button-group orientation="vertical">
-      <glide-core-button-group-button
-        label="One"
-      ></glide-core-button-group-button>
-
-      <glide-core-button-group-button
-        label="Two"
-      ></glide-core-button-group-button>
-    </glide-core-button-group>`);
-    const buttons = document.querySelectorAll('glide-core-button-group-button');
-    expect(buttons[0]?.privateOrientation).to.equal('vertical');
-    expect(buttons[1]?.privateOrientation).to.equal('vertical');
-});
-it('sets `privateVariant` on each button', async () => {
-    await fixture(html `<glide-core-button-group label="Label" variant="icon-only">
-      <glide-core-button-group-button label="One">
-        <div slot="icon">Icon</div>
-      </glide-core-button-group-button>
-
-      <glide-core-button-group-button label="Two">
-        <div slot="icon">Icon</div>
-      </glide-core-button-group-button>
-    </glide-core-button-group>`);
-    const buttons = document.querySelectorAll('glide-core-button-group-button');
-    expect(buttons[0].privateVariant).to.equal('icon-only');
-    expect(buttons[1].privateVariant).to.equal('icon-only');
-});
-it('throws when its default slot is the wrong type', async () => {
-    await expectArgumentError(() => {
-        return fixture(html `
-      <glide-core-button-group label="Label">
-        <div></div>
-      </glide-core-button-group>
-    `);
-    });
-    await expectArgumentError(() => {
-        return fixture(html `<glide-core-button-group label="Label"> </glide-core-button-group>`);
-    });
-});
-it('selects the first button not disabled', async () => {
-    await fixture(html `<glide-core-button-group>
-      <glide-core-button-group-button
-        label="One"
-        disabled
-      ></glide-core-button-group-button>
-
-      <glide-core-button-group-button
-        label="Two"
-      ></glide-core-button-group-button>
-
-      <glide-core-button-group-button
-        label="Three"
-      ></glide-core-button-group-button>
-    </glide-core-button-group>`);
-    const buttons = document.querySelectorAll('glide-core-button-group-button');
-    expect(buttons[0].selected).to.be.false;
-    expect(buttons[1].selected).to.be.true;
-    expect(buttons[2].selected).to.be.false;
-});
-it('selects no buttons when all are disabled', async () => {
-    await fixture(html `<glide-core-button-group>
-      <glide-core-button-group-button
-        label="One"
-        disabled
-      ></glide-core-button-group-button>
-
-      <glide-core-button-group-button
-        label="Two"
-        disabled
-      ></glide-core-button-group-button>
-    </glide-core-button-group>`);
-    const buttons = document.querySelectorAll('glide-core-button-group-button');
-    expect(buttons[0].selected).to.be.false;
-    expect(buttons[1].selected).to.be.false;
-});

package/dist/button-group.test.events.d.ts

@@ -1 +0,0 @@
-import './button-group.button.js';