@crowdstrike/glide-core 0.13.1 → 0.14.1

package/dist/menu.options.test.basics.js

@@ -1,44 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-import './menu.button.js';
-import './menu.link.js';
-import { ArgumentError } from 'ow';
-import { expect, fixture, html } from '@open-wc/testing';
-import { repeat } from 'lit/directives/repeat.js';
-import GlideCoreMenu from './menu.js';
-import GlideCoreMenuOptions from './menu.options.js';
-import expectArgumentError from './library/expect-argument-error.js';
-import sinon from 'sinon';
-GlideCoreMenu.shadowRootOptions.mode = 'open';
-it('throws if it does not have a default slot', async () => {
-    const spy = sinon.spy();
-    try {
-        await fixture(html `<glide-core-menu-options></glide-core-menu-options>`);
-    }
-    catch (error) {
-        if (error instanceof ArgumentError) {
-            spy();
-        }
-    }
-    expect(spy.callCount).to.equal(1);
-});
-it('throws if the default slot is the incorrect type', async () => {
-    await expectArgumentError(() => {
-        return fixture(html `<glide-core-menu-options>
-        <option>Option</option>
-      </glide-core-menu-options>`);
-    });
-});
-it('does not throw if the default slot only contains whitespace', async () => {
-    const spy = sinon.spy();
-    try {
-        await fixture(html `<glide-core-menu-options>
-        ${repeat([], () => html `<glide-core-menu-link label="Link"></glide-core-menu-link>`)}
-      </glide-core-menu-options>`);
-    }
-    catch (error) {
-        if (error instanceof ArgumentError) {
-            spy();
-        }
-    }
-    expect(spy.callCount).to.equal(0);
-});

package/dist/menu.options.test.events.d.ts

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

package/dist/menu.options.test.events.js

@@ -1,19 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-import './menu.button.js';
-import { expect, fixture, html, oneEvent } from '@open-wc/testing';
-import GlideCoreMenu from './menu.js';
-import GlideCoreMenuOptions from './menu.options.js';
-GlideCoreMenu.shadowRootOptions.mode = 'open';
-it('dispatches a "private-slot-change" event', async () => {
-    const component = await fixture(html `<glide-core-menu-options>
-      <glide-core-menu-button label="One"></glide-core-menu-button>
-    </glide-core-menu-options>`);
-    setTimeout(() => {
-        const option = document.createElement('glide-core-menu-button');
-        option.label = 'Label';
-        component.append(option);
-    });
-    const event = await oneEvent(component, 'private-slot-change');
-    expect(event instanceof Event).to.be.true;
-    expect(event.bubbles).to.be.true;
-});

package/dist/menu.stories.d.ts

@@ -1,11 +0,0 @@
-import './button.js';
-import './icons/storybook.js';
-import './menu.button.js';
-import './menu.js';
-import './menu.link.js';
-import './menu.options.js';
-import type { Meta, StoryObj } from '@storybook/web-components';
-declare const meta: Meta;
-export default meta;
-export declare const Menu: StoryObj;
-export declare const WithIcons: StoryObj;

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

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

package/dist/menu.test.basics.js

@@ -1,178 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-import './menu.options.js';
-import { ArgumentError } from 'ow';
-import { aTimeout, expect, fixture, html } from '@open-wc/testing';
-import GlideCoreMenu from './menu.js';
-import GlideCoreMenuButton from './menu.button.js';
-import GlideCoreMenuLink from './menu.link.js';
-import expectArgumentError from './library/expect-argument-error.js';
-import sinon from 'sinon';
-GlideCoreMenu.shadowRootOptions.mode = 'open';
-GlideCoreMenuButton.shadowRootOptions.mode = 'open';
-GlideCoreMenuLink.shadowRootOptions.mode = 'open';
-it('registers', async () => {
-    expect(window.customElements.get('glide-core-menu')).to.equal(GlideCoreMenu);
-});
-it('has defaults', async () => {
-    // Required attributes are supplied here and thus left unasserted below. The
-    // idea is that this test shouldn't fail to typecheck if these templates are
-    // eventually typechecked, which means supplying all required attributes and slots.
-    const component = await fixture(html `<glide-core-menu>
-      <button slot="target">Target</button>
-
-      <glide-core-menu-options>
-        <glide-core-menu-link label="Link"></glide-core-menu-link>
-      </glide-core-menu-options>
-    </glide-core-menu>`);
-    const options = component.querySelector('glide-core-menu-options');
-    expect(component.getAttribute('size')).to.equal('large');
-    expect(component.size).to.equal('large');
-    expect(options?.privateSize).to.equal('large');
-});
-it('is accessible', async () => {
-    const component = await fixture(html `<glide-core-menu>
-      <button slot="target">Target</button>
-
-      <glide-core-menu-options>
-        <glide-core-menu-link label="Link"></glide-core-menu-link>
-      </glide-core-menu-options>
-    </glide-core-menu>`);
-    const target = component.querySelector('button');
-    const options = component.querySelector('glide-core-menu-options');
-    expect(target?.getAttribute('aria-controls')).to.equal(options?.id);
-    expect(target?.getAttribute('aria-haspopup')).to.equal('true');
-    expect(options?.ariaLabelledby).to.equal(target?.id);
-    await expect(component).to.be.accessible();
-});
-it('can be opened', async () => {
-    const component = await fixture(html `<glide-core-menu open>
-      <button slot="target">Target</button>
-
-      <glide-core-menu-options>
-        <glide-core-menu-link label="Link"></glide-core-menu-link>
-      </glide-core-menu-options>
-    </glide-core-menu>`);
-    // Wait for Floating UI.
-    await aTimeout(0);
-    const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
-    const options = component.querySelector('glide-core-menu-options');
-    const target = component.querySelector('button');
-    const link = component.querySelector('glide-core-menu-link');
-    expect(component.open).to.be.true;
-    expect(defaultSlot?.checkVisibility()).to.be.true;
-    expect(target?.ariaExpanded).to.equal('true');
-    expect(options?.getAttribute('aria-activedescendant')).to.equal(link?.id);
-});
-it('activates the first menu link by default', async () => {
-    const component = await fixture(html `
-    <glide-core-menu open>
-      <button slot="target">Target</button>
-
-      <glide-core-menu-options>
-        <glide-core-menu-link label="One"></glide-core-menu-link>
-        <glide-core-menu-link label="Two"></glide-core-menu-link>
-      </glide-core-menu-options>
-    </glide-core-menu>
-  `);
-    // Wait for Floating UI.
-    await aTimeout(0);
-    const links = component.querySelectorAll('glide-core-menu-link');
-    const options = component.querySelector('glide-core-menu-options');
-    expect(links[0].privateActive).to.be.true;
-    expect(links[1].privateActive).to.be.false;
-    expect(options?.getAttribute('aria-activedescendant')).to.equal(links[0].id);
-});
-it('activates the first menu button by default', async () => {
-    const component = await fixture(html `
-    <glide-core-menu open>
-      <button slot="target">Target</button>
-
-      <glide-core-menu-options>
-        <glide-core-menu-button label="One"></glide-core-menu-button>
-        <glide-core-menu-button label="Two"></glide-core-menu-button>
-      </glide-core-menu-options>
-    </glide-core-menu>
-  `);
-    // Wait for Floating UI.
-    await aTimeout(0);
-    const buttons = component.querySelectorAll('glide-core-menu-button');
-    const options = component.querySelector('glide-core-menu-options');
-    expect(buttons[0].privateActive).to.be.true;
-    expect(buttons[1].privateActive).to.be.false;
-    expect(options?.getAttribute('aria-activedescendant')).to.equal(buttons[0].id);
-});
-it('is not opened when initially `open` and its target is `disabled`', async () => {
-    const component = await fixture(html `<glide-core-menu open>
-      <button slot="target" disabled>Target</button>
-
-      <glide-core-menu-options>
-        <glide-core-menu-link label="Link"></glide-core-menu-link>
-      </glide-core-menu-options>
-    </glide-core-menu>`);
-    // Wait for Floating UI.
-    await aTimeout(0);
-    const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
-    const target = component.querySelector('button');
-    const options = component.querySelector('glide-core-menu-options');
-    expect(defaultSlot?.checkVisibility()).to.be.false;
-    expect(target?.ariaExpanded).to.equal('false');
-    expect(options?.getAttribute('aria-activedescendant')).to.equal('');
-});
-it('adds `tabIndex` to its target when it is a `<span>`', async () => {
-    const component = await fixture(html `<glide-core-menu>
-      <span slot="target">Target</span>
-
-      <glide-core-menu-options>
-        <glide-core-menu-link label="Link"></glide-core-menu-link>
-      </glide-core-menu-options>
-    </glide-core-menu>`);
-    const target = component.querySelector('span');
-    expect(target?.tabIndex).to.equal(0);
-});
-it('throws if it does not have a default slot', async () => {
-    await expectArgumentError(() => {
-        return fixture(html `<glide-core-menu
-        ><button slot="target">Target</button></glide-core-menu
-      >`);
-    });
-});
-it('throws if the default slot is the incorrect type', async () => {
-    await expectArgumentError(() => {
-        return fixture(html `<glide-core-menu>
-        <option>Option</option>
-        <button slot="target">Target</button>
-      </glide-core-menu>`);
-    });
-});
-it('throws if it does not have a "target" slot', async () => {
-    const spy = sinon.spy();
-    try {
-        await fixture(html `<glide-core-menu>
-        <glide-core-menu-options>
-          <glide-core-menu-link label="Link"></glide-core-menu-link>
-        </glide-core-menu-options>
-      </glide-core-menu>`);
-    }
-    catch (error) {
-        if (error instanceof ArgumentError) {
-            spy();
-        }
-    }
-    expect(spy.callCount).to.equal(1);
-});
-it('sets accessibility attributes', async () => {
-    const component = await fixture(html `<glide-core-menu>
-      <button slot="target">Target</button>
-
-      <glide-core-menu-options>
-        <glide-core-menu-link label="Link"></glide-core-menu-link>
-      </glide-core-menu-options>
-    </glide-core-menu>`);
-    const target = component.querySelector('button');
-    const options = component.querySelector('glide-core-menu-options');
-    expect(target?.getAttribute('aria-expanded')).to.equal('false');
-    expect(target?.getAttribute('aria-haspopup')).to.equal('true');
-    expect(target?.ariaExpanded).to.equal('false');
-    expect(target?.ariaHasPopup).to.equal('true');
-    expect(options?.ariaLabelledby).to.equal(target?.id);
-});

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

@@ -1,3 +0,0 @@
-import './menu.js';
-import './menu.link.js';
-import './menu.options.js';

package/dist/menu.test.events.js

@@ -1,125 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-import './menu.js';
-import './menu.link.js';
-import './menu.options.js';
-import { assert, expect, fixture, html, oneEvent } from '@open-wc/testing';
-import { sendKeys } from '@web/test-runner-commands';
-import sinon from 'sinon';
-it('dispatches one link "click" event when a link is selected via click', async () => {
-    const component = await fixture(html `<glide-core-menu open>
-      <button slot="target">Target</button>
-
-      <glide-core-menu-options>
-        <glide-core-menu-link label="Link"></glide-core-menu-link>
-      </glide-core-menu-options>
-    </glide-core-menu>`);
-    const spy = sinon.spy();
-    const link = component.querySelector('glide-core-menu-link');
-    assert(link);
-    link.addEventListener('click', spy);
-    setTimeout(() => link.click());
-    const event = await oneEvent(component, 'click');
-    expect(event instanceof PointerEvent).to.be.true;
-    expect(event.bubbles).to.be.true;
-    expect(event.target).to.equal(link);
-    expect(spy.callCount).to.equal(1);
-});
-it('dispatches one button "click" event when a button is selected via click', async () => {
-    const component = await fixture(html `<glide-core-menu open>
-      <button slot="target">Target</button>
-
-      <glide-core-menu-options>
-        <glide-core-menu-button label="Button"></glide-core-menu-button>
-      </glide-core-menu-options>
-    </glide-core-menu>`);
-    const spy = sinon.spy();
-    const button = component.querySelector('glide-core-menu-button');
-    assert(button);
-    button.addEventListener('click', spy);
-    setTimeout(() => button.click());
-    const event = await oneEvent(button, 'click');
-    expect(event instanceof PointerEvent).to.be.true;
-    expect(event.bubbles).to.be.true;
-    expect(event.target).to.equal(button);
-    expect(spy.callCount).to.equal(1);
-});
-it('dispatches one link "click" event when a link is selected via Space', async () => {
-    const component = await fixture(html `<glide-core-menu open>
-      <button slot="target">Target</button>
-
-      <glide-core-menu-options>
-        <glide-core-menu-link label="Link"></glide-core-menu-link>
-      </glide-core-menu-options>
-    </glide-core-menu>`);
-    const spy = sinon.spy();
-    const link = component.querySelector('glide-core-menu-link');
-    assert(link);
-    link.addEventListener('click', spy);
-    component.querySelector('button')?.focus();
-    sendKeys({ press: ' ' });
-    const event = await oneEvent(link, 'click');
-    expect(event instanceof PointerEvent).to.be.true;
-    expect(event.bubbles).to.be.true;
-    expect(event.target).to.equal(link);
-    expect(spy.callCount).to.equal(1);
-});
-it('dispatches one button "click" event when a button is selected via Space', async () => {
-    const component = await fixture(html `<glide-core-menu open>
-      <button slot="target">Target</button>
-
-      <glide-core-menu-options>
-        <glide-core-menu-button label="Button"></glide-core-menu-button>
-      </glide-core-menu-options>
-    </glide-core-menu>`);
-    const spy = sinon.spy();
-    const button = component.querySelector('glide-core-menu-button');
-    assert(button);
-    button.addEventListener('click', spy);
-    component.querySelector('button')?.focus();
-    sendKeys({ press: ' ' });
-    const event = await oneEvent(button, 'click');
-    expect(event instanceof PointerEvent).to.be.true;
-    expect(event.bubbles).to.be.true;
-    expect(event.target).to.equal(button);
-    expect(spy.callCount).to.equal(1);
-});
-it('dispatches one link "click" event when a link is selected via Enter', async () => {
-    const component = await fixture(html `<glide-core-menu open>
-      <button slot="target">Target</button>
-
-      <glide-core-menu-options>
-        <glide-core-menu-link label="Link"></glide-core-menu-link>
-      </glide-core-menu-options>
-    </glide-core-menu>`);
-    const spy = sinon.spy();
-    const link = component.querySelector('glide-core-menu-link');
-    assert(link);
-    link.addEventListener('click', spy);
-    component.querySelector('button')?.focus();
-    sendKeys({ press: 'Enter' });
-    const event = await oneEvent(link, 'click');
-    expect(event instanceof PointerEvent).to.be.true;
-    expect(event.bubbles).to.be.true;
-    expect(event.target).to.equal(link);
-    expect(spy.callCount).to.equal(1);
-});
-it('dispatches one button "click" event when a button is selected via Enter', async () => {
-    const component = await fixture(html `<glide-core-menu open>
-      <button slot="target">Target</button>
-
-      <glide-core-menu-options>
-        <glide-core-menu-button label="Button"></glide-core-menu-button>
-      </glide-core-menu-options>
-    </glide-core-menu>`);
-    const spy = sinon.spy();
-    const button = component.querySelector('glide-core-menu-button');
-    assert(button);
-    button.addEventListener('click', spy);
-    component.querySelector('button')?.focus();
-    sendKeys({ press: 'Enter' });
-    const event = await oneEvent(button, 'click');
-    expect(event instanceof PointerEvent).to.be.true;
-    expect(event.bubbles).to.be.true;
-    expect(event.target).to.equal(button);
-    expect(spy.callCount).to.equal(1);
-});

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

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

package/dist/menu.test.focus.js

@@ -1,102 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-import './menu.link.js';
-import './menu.options.js';
-import { aTimeout, assert, elementUpdated, expect, fixture, html, } from '@open-wc/testing';
-import { sendKeys } from '@web/test-runner-commands';
-import GlideCoreMenu from './menu.js';
-GlideCoreMenu.shadowRootOptions.mode = 'open';
-it('closes when it loses focus', async () => {
-    const component = await fixture(html `<glide-core-menu open>
-      <button slot="target">Target</button>
-
-      <glide-core-menu-options>
-        <glide-core-menu-link label="Link"></glide-core-menu-link>
-      </glide-core-menu-options>
-    </glide-core-menu>`);
-    component.querySelector('button')?.focus();
-    await sendKeys({ press: 'Tab' });
-    const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
-    const options = component.querySelector('glide-core-menu-options');
-    expect(component.open).to.be.false;
-    expect(defaultSlot?.checkVisibility()).be.false;
-    expect(options?.getAttribute('aria-activedescendant')).to.equal('');
-});
-it('remains open when the options component is focused', async () => {
-    const component = await fixture(html `<glide-core-menu open>
-      <button slot="target">Target</button>
-
-      <glide-core-menu-options>
-        <glide-core-menu-link label="Link"></glide-core-menu-link>
-      </glide-core-menu-options>
-    </glide-core-menu>`);
-    // Wait for Floating UI.
-    await aTimeout(0);
-    component.querySelector('button')?.focus();
-    const options = component.querySelector('glide-core-menu-options');
-    const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
-    options?.focus();
-    expect(component.open).to.be.true;
-    expect(defaultSlot?.checkVisibility()).to.be.true;
-});
-it('remains open when an option is focused', async () => {
-    const component = await fixture(html `<glide-core-menu open>
-      <button slot="target">Target</button>
-
-      <glide-core-menu-options>
-        <glide-core-menu-link label="Link"></glide-core-menu-link>
-      </glide-core-menu-options>
-    </glide-core-menu>`);
-    // Wait for Floating UI.
-    await aTimeout(0);
-    component.querySelector('button')?.focus();
-    const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
-    const option = component.querySelector('glide-core-menu-link');
-    assert(option);
-    option?.focus();
-    expect(component.open).to.be.true;
-    expect(defaultSlot?.checkVisibility()).to.be.true;
-});
-it('sets an inactive option as active when focused', async () => {
-    const component = await fixture(html `<glide-core-menu open>
-      <button slot="target">Target</button>
-
-      <glide-core-menu-options>
-        <glide-core-menu-button label="Button"></glide-core-menu-button>
-        <glide-core-menu-link label="Link"></glide-core-menu-link>
-      </glide-core-menu-options>
-    </glide-core-menu>`);
-    // Wait for Floating UI.
-    await aTimeout(0);
-    component.querySelector('button')?.focus();
-    const button = component.querySelector('glide-core-menu-button');
-    const link = component.querySelector('glide-core-menu-link');
-    const options = component.querySelector('glide-core-menu-options');
-    link?.focus();
-    await elementUpdated(component);
-    expect(link?.privateActive).to.be.true;
-    expect(button?.privateActive).to.be.false;
-    expect(options?.getAttribute('aria-activedescendant')).to.equal(link?.id);
-});
-// Kind of an odd test. There's a comment in `#onDefaultSlotFocusin` that
-// explains it.
-it('sets an already active option as active when focused', async () => {
-    const component = await fixture(html `<glide-core-menu open>
-      <button slot="target">Target</button>
-
-      <glide-core-menu-options>
-        <glide-core-menu-button label="Button"></glide-core-menu-button>
-        <glide-core-menu-link label="Link"></glide-core-menu-link>
-      </glide-core-menu-options>
-    </glide-core-menu>`);
-    // Wait for Floating UI.
-    await aTimeout(0);
-    component.querySelector('button')?.focus();
-    const button = component.querySelector('glide-core-menu-button');
-    const link = component.querySelector('glide-core-menu-link');
-    const options = component.querySelector('glide-core-menu-options');
-    button?.focus();
-    await elementUpdated(component);
-    expect(button?.privateActive).to.be.true;
-    expect(link?.privateActive).to.be.false;
-    expect(options?.getAttribute('aria-activedescendant')).to.equal(button?.id);
-});

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

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