@crowdstrike/glide-core 0.5.0 → 0.5.2

package/dist/menu.test.interactions.js

@@ -0,0 +1,522 @@
+import './menu.link.js';
+import { 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('opens when clicked', async () => {
+    const component = await fixture(html `<glide-core-menu>
+      <button slot="target">Target</button>
+      <glide-core-menu-link label="Link"></glide-core-menu-link>
+    </glide-core-menu>`);
+    component.querySelector('button')?.click();
+    await elementUpdated(component);
+    const menu = component.shadowRoot?.querySelector('[data-test="menu"]');
+    expect(component.open).to.be.true;
+    expect(menu?.checkVisibility({ checkVisibilityCSS: true })).to.be.true;
+});
+it('does not open when clicked when its target is `disabled`', async () => {
+    const component = await fixture(html `<glide-core-menu>
+      <button slot="target" disabled>Target</button>
+      <glide-core-menu-link label="Link"></glide-core-menu-link>
+    </glide-core-menu>`);
+    component.querySelector('button')?.click();
+    const menu = component.shadowRoot?.querySelector('[data-test="menu"]');
+    const target = component.querySelector('button');
+    expect(component.open).to.be.false;
+    expect(menu?.checkVisibility({ checkVisibilityCSS: true })).to.not.be.ok;
+    expect(menu?.getAttribute('aria-activedescendant')).to.equal('');
+    expect(target?.ariaExpanded).to.equal('false');
+});
+it('does not open when clicked when its target is `aria-disabled`', async () => {
+    const component = await fixture(html `<glide-core-menu>
+      <button aria-disabled="true" slot="target">Target</button>
+      <glide-core-menu-link label="Link"></glide-core-menu-link>
+    </glide-core-menu>`);
+    component.querySelector('button')?.click();
+    const menu = component.shadowRoot?.querySelector('[data-test="menu"]');
+    const target = component.querySelector('button');
+    expect(component.open).to.be.false;
+    expect(menu?.checkVisibility({ checkVisibilityCSS: true })).to.not.be.ok;
+    expect(menu?.getAttribute('aria-activedescendant')).to.equal('');
+    expect(target?.ariaExpanded).to.equal('false');
+});
+it('opens on Enter', async () => {
+    const component = await fixture(html `<glide-core-menu>
+      <button slot="target">Target</button>
+      <glide-core-menu-link label="Link"></glide-core-menu-link>
+    </glide-core-menu>`);
+    component.querySelector('button')?.focus();
+    await sendKeys({ press: 'Enter' });
+    const menu = component.shadowRoot?.querySelector('[data-test="menu"]');
+    const target = component.querySelector('button');
+    const link = component.querySelector('glide-core-menu-link');
+    expect(component.open).to.be.true;
+    expect(menu?.checkVisibility({ checkVisibilityCSS: true })).to.be.true;
+    expect(menu?.getAttribute('aria-activedescendant')).to.equal(link?.id);
+    expect(target?.ariaExpanded).to.equal('true');
+});
+it('opens on ArrowUp', async () => {
+    const component = await fixture(html `<glide-core-menu>
+      <button slot="target">Target</button>
+      <glide-core-menu-link label="Link"></glide-core-menu-link>
+    </glide-core-menu>`);
+    component.querySelector('button')?.focus();
+    await sendKeys({ press: 'ArrowUp' });
+    const menu = component.shadowRoot?.querySelector('[data-test="menu"]');
+    const target = component.querySelector('button');
+    const link = component.querySelector('glide-core-menu-link');
+    expect(component.open).to.be.true;
+    expect(menu?.checkVisibility({ checkVisibilityCSS: true })).to.be.true;
+    expect(menu?.getAttribute('aria-activedescendant')).to.equal(link?.id);
+    expect(target?.ariaExpanded).to.equal('true');
+});
+it('opens on ArrowDown', async () => {
+    const component = await fixture(html `<glide-core-menu>
+      <button slot="target">Target</button>
+      <glide-core-menu-link label="Link"></glide-core-menu-link>
+    </glide-core-menu>`);
+    component.querySelector('button')?.focus();
+    await sendKeys({ press: 'ArrowDown' });
+    const menu = component.shadowRoot?.querySelector('[data-test="menu"]');
+    const target = component.querySelector('button');
+    const link = component.querySelector('glide-core-menu-link');
+    expect(component.open).to.be.true;
+    expect(menu?.checkVisibility({ checkVisibilityCSS: true })).to.be.true;
+    expect(menu?.getAttribute('aria-activedescendant')).to.equal(link?.id);
+    expect(target?.ariaExpanded).to.equal('true');
+});
+it('opens on Space', async () => {
+    const component = await fixture(html `<glide-core-menu>
+      <button slot="target">Target</button>
+      <glide-core-menu-link label="Link"></glide-core-menu-link>
+    </glide-core-menu>`);
+    component.querySelector('button')?.focus();
+    await sendKeys({ press: ' ' });
+    const menu = component.shadowRoot?.querySelector('[data-test="menu"]');
+    const target = component.querySelector('button');
+    const link = component.querySelector('glide-core-menu-link');
+    expect(component.open).to.be.true;
+    expect(menu?.checkVisibility({ checkVisibilityCSS: true })).to.be.true;
+    expect(menu?.getAttribute('aria-activedescendant')).to.equal(link?.id);
+    expect(target?.ariaExpanded).to.equal('true');
+});
+it('opens when opened programmatically', async () => {
+    const component = await fixture(html `<glide-core-menu>
+      <button slot="target">Target</button>
+      <glide-core-menu-link label="Link"></glide-core-menu-link>
+    </glide-core-menu>`);
+    component.open = true;
+    await elementUpdated(component);
+    const menu = component.shadowRoot?.querySelector('[data-test="menu"]');
+    const target = component.querySelector('button');
+    const link = component.querySelector('glide-core-menu-link');
+    expect(menu?.checkVisibility({ checkVisibilityCSS: true })).to.be.true;
+    expect(menu?.getAttribute('aria-activedescendant')).to.equal(link?.id);
+    expect(target?.ariaExpanded).to.equal('true');
+});
+it('does not open when opened programmatically and its target is `disabled`', async () => {
+    const component = await fixture(html `<glide-core-menu>
+      <button slot="target" disabled>Target</button>
+      <glide-core-menu-link label="Link"></glide-core-menu-link>
+    </glide-core-menu>`);
+    component.open = true;
+    await elementUpdated(component);
+    const menu = component.shadowRoot?.querySelector('[data-test="menu"]');
+    const target = component.querySelector('button');
+    expect(menu?.checkVisibility({ checkVisibilityCSS: true })).to.not.be.ok;
+    expect(menu?.getAttribute('aria-activedescendant')).to.equal('');
+    expect(target?.ariaExpanded).to.equal('false');
+});
+it('does not open when opened programmatically and its target is `aria-disabled`', async () => {
+    const component = await fixture(html `<glide-core-menu>
+      <button aria-disabled="true" slot="target">Target</button>
+      <glide-core-menu-link label="Link"></glide-core-menu-link>
+    </glide-core-menu>`);
+    component.open = true;
+    await elementUpdated(component);
+    const menu = component.shadowRoot?.querySelector('[data-test="menu"]');
+    const target = component.querySelector('button');
+    expect(menu?.checkVisibility({ checkVisibilityCSS: true })).to.not.be.ok;
+    expect(menu?.getAttribute('aria-activedescendant')).to.equal('');
+    expect(target?.ariaExpanded).to.equal('false');
+});
+// See the `document` click listener comment in `menu.ts` for an explanation.
+it('opens when opened programmatically via the click handler of another element', async () => {
+    const div = document.createElement('div');
+    const component = await fixture(html `<glide-core-menu>
+      <button slot="target">Target</button>
+      <glide-core-menu-link label="Link"></glide-core-menu-link>
+    </glide-core-menu>`, { parentNode: div });
+    const anotherElement = document.createElement('button');
+    anotherElement.addEventListener('click', () => (component.open = true));
+    div.append(anotherElement);
+    anotherElement.click();
+    await elementUpdated(component);
+    const menu = component.shadowRoot?.querySelector('[data-test="menu"]');
+    const target = component.querySelector('button');
+    const link = component.querySelector('glide-core-menu-link');
+    expect(component.open).to.be.true;
+    expect(menu?.checkVisibility({ checkVisibilityCSS: true })).to.be.true;
+    expect(menu?.getAttribute('aria-activedescendant')).to.equal(link?.id);
+    expect(target?.ariaExpanded).to.equal('true');
+});
+it('closes when clicked', async () => {
+    const component = await fixture(html `<glide-core-menu open>
+      <button slot="target">Target</button>
+      <glide-core-menu-link label="Link"></glide-core-menu-link>
+    </glide-core-menu>`);
+    component.querySelector('button')?.click();
+    await elementUpdated(component);
+    const menu = component?.shadowRoot?.querySelector('[data-test="menu"]');
+    const target = component.querySelector('button');
+    expect(component.open).to.be.false;
+    expect(menu?.checkVisibility({ checkVisibilityCSS: true })).to.be.false;
+    expect(menu?.getAttribute('aria-activedescendant')).to.equal('');
+    expect(target?.ariaExpanded).to.equal('false');
+});
+it('closes when something outside of it is clicked', async () => {
+    const component = await fixture(html `<glide-core-menu>
+      <button slot="target">Target</button>
+      <glide-core-menu-link label="Link"></glide-core-menu-link>
+    </glide-core-menu>`);
+    component.querySelector('button')?.click();
+    document.body.click();
+    const menu = component?.shadowRoot?.querySelector('[data-test="menu"]');
+    const target = component.querySelector('button');
+    expect(component.open).to.be.false;
+    expect(menu?.getAttribute('aria-activedescendant')).to.equal('');
+    expect(target?.ariaExpanded).to.equal('false');
+});
+it('closes on Escape when the button has focus', async () => {
+    const component = await fixture(html `<glide-core-menu open>
+      <button slot="target">Target</button>
+      <glide-core-menu-link label="Link"></glide-core-menu-link>
+    </glide-core-menu>`);
+    component.querySelector('button')?.click();
+    await sendKeys({ press: 'Escape' });
+    const menu = component?.shadowRoot?.querySelector('[data-test="menu"]');
+    const target = component.querySelector('button');
+    expect(component.open).to.be.false;
+    expect(menu?.getAttribute('aria-activedescendant')).to.equal('');
+    expect(target?.ariaExpanded).to.equal('false');
+});
+it('closes when an option is selected via click', async () => {
+    const component = await fixture(html `<glide-core-menu open>
+      <button slot="target">Target</button>
+      <glide-core-menu-link label="Link"></glide-core-menu-link>
+    </glide-core-menu>`);
+    component.querySelector('glide-core-menu-link')?.click();
+    await elementUpdated(component);
+    const menu = component?.shadowRoot?.querySelector('[data-test="menu"]');
+    const target = component.querySelector('button');
+    expect(component.open).to.be.false;
+    expect(menu?.getAttribute('aria-activedescendant')).to.equal('');
+    expect(target?.ariaExpanded).to.equal('false');
+    expect(target?.ariaExpanded).to.equal('false');
+});
+it('closes when an option is selected via Enter', async () => {
+    const component = await fixture(html `<glide-core-menu open>
+      <button slot="target">Target</button>
+      <glide-core-menu-link label="Link"></glide-core-menu-link>
+    </glide-core-menu>`);
+    component.focus();
+    component
+        .querySelector('glide-core-menu-link')
+        ?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+    await sendKeys({ press: 'Enter' });
+    await elementUpdated(component);
+    const menu = component?.shadowRoot?.querySelector('[data-test="menu"]');
+    const target = component.querySelector('button');
+    expect(component.open).to.be.false;
+    expect(menu?.getAttribute('aria-activedescendant')).to.equal('');
+    expect(target?.ariaExpanded).to.equal('false');
+});
+it('closes when an option is selected via Space', async () => {
+    const component = await fixture(html `<glide-core-menu open>
+      <button slot="target">Target</button>
+      <glide-core-menu-link label="Link"></glide-core-menu-link>
+    </glide-core-menu>`);
+    component.focus();
+    await sendKeys({ press: ' ' });
+    const menu = component?.shadowRoot?.querySelector('[data-test="menu"]');
+    const target = component.querySelector('button');
+    expect(component.open).to.be.false;
+    expect(menu?.getAttribute('aria-activedescendant')).to.equal('');
+    expect(target?.ariaExpanded).to.equal('false');
+});
+it('activates the first menu link by default', async () => {
+    const component = await fixture(html `
+    <glide-core-menu>
+      <button slot="target">Target</button>
+      <glide-core-menu-link label="One"></glide-core-menu-link>
+      <glide-core-menu-link label="Two"></glide-core-menu-link>
+    </glide-core-menu>
+  `);
+    component.querySelector('button')?.click();
+    await elementUpdated(component);
+    const options = component.querySelectorAll('glide-core-menu-link');
+    const menu = component?.shadowRoot?.querySelector('[data-test="menu"]');
+    expect(options[0].privateActive).to.be.true;
+    expect(options[1].privateActive).to.be.false;
+    expect(menu?.getAttribute('aria-activedescendant')).to.equal(options[0].id);
+});
+it('activates the first menu button by default', async () => {
+    const component = await fixture(html `
+    <glide-core-menu>
+      <button slot="target">Target</button>
+      <glide-core-menu-button label="One"></glide-core-menu-button>
+      <glide-core-menu-button label="Two"></glide-core-menu-button>
+    </glide-core-menu>
+  `);
+    component.querySelector('button')?.click();
+    await elementUpdated(component);
+    const options = component.querySelectorAll('glide-core-menu-button');
+    const menu = component?.shadowRoot?.querySelector('[data-test="menu"]');
+    expect(options[0].privateActive).to.be.true;
+    expect(options[1].privateActive).to.be.false;
+    expect(menu?.getAttribute('aria-activedescendant')).to.equal(options[0].id);
+});
+it('activates a menu link on "mouseover"', async () => {
+    const component = await fixture(html `
+    <glide-core-menu open>
+      <button slot="target">Target</button>
+      <glide-core-menu-link label="One"></glide-core-menu-link>
+      <glide-core-menu-link label="Two"></glide-core-menu-link>
+    </glide-core-menu>
+  `);
+    const options = component.querySelectorAll('glide-core-menu-link');
+    const menu = component?.shadowRoot?.querySelector('[data-test="menu"]');
+    options[1].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+    await elementUpdated(component);
+    expect(options[0].privateActive).to.be.false;
+    expect(options[1].privateActive).to.be.true;
+    expect(menu?.getAttribute('aria-activedescendant')).to.equal(options[1].id);
+});
+it('activates a menu button on "mouseover"', async () => {
+    const component = await fixture(html `
+    <glide-core-menu open>
+      <button slot="target">Target</button>
+      <glide-core-menu-button label="One"></glide-core-menu-button>
+      <glide-core-menu-button label="Two"></glide-core-menu-button>
+    </glide-core-menu>
+  `);
+    const options = component.querySelectorAll('glide-core-menu-button');
+    const menu = component?.shadowRoot?.querySelector('[data-test="menu"]');
+    options[1].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+    await elementUpdated(component);
+    expect(options[0].privateActive).to.be.false;
+    expect(options[1].privateActive).to.be.true;
+    expect(menu?.getAttribute('aria-activedescendant')).to.equal(options[1].id);
+});
+it('activates the next option on ArrowDown', async () => {
+    const component = await fixture(html `
+    <glide-core-menu>
+      <button slot="target">Target</button>
+      <glide-core-menu-link label="One"></glide-core-menu-link>
+      <glide-core-menu-link label="Two"></glide-core-menu-link>
+      <glide-core-menu-link label="Three"></glide-core-menu-link>
+    </glide-core-menu>
+  `);
+    component.querySelector('button')?.click();
+    component.focus();
+    const options = component.querySelectorAll('glide-core-menu-link');
+    const menu = component?.shadowRoot?.querySelector('[data-test="menu"]');
+    options[1].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+    await sendKeys({ press: 'ArrowDown' });
+    expect(options[0].privateActive).to.be.false;
+    expect(options[1].privateActive).to.be.false;
+    expect(options[2].privateActive).to.be.true;
+    expect(menu?.getAttribute('aria-activedescendant')).to.equal(options[2].id);
+});
+it('activates the previous option on ArrowUp', async () => {
+    const component = await fixture(html `
+    <glide-core-menu>
+      <button slot="target">Target</button>
+      <glide-core-menu-link label="One"></glide-core-menu-link>
+      <glide-core-menu-link label="Two"></glide-core-menu-link>
+    </glide-core-menu>
+  `);
+    component.querySelector('button')?.click();
+    component.focus();
+    const options = component.querySelectorAll('glide-core-menu-link');
+    const menu = component?.shadowRoot?.querySelector('[data-test="menu"]');
+    options[1].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+    await sendKeys({ press: 'ArrowUp' });
+    expect(options[0].privateActive).to.be.true;
+    expect(options[1].privateActive).to.be.false;
+    expect(menu?.getAttribute('aria-activedescendant')).to.equal(options[0].id);
+});
+it('activates the first option on Home', async () => {
+    const component = await fixture(html `
+    <glide-core-menu>
+      <button slot="target">Target</button>
+      <glide-core-menu-link label="One"></glide-core-menu-link>
+      <glide-core-menu-link label="Two"></glide-core-menu-link>
+    </glide-core-menu>
+  `);
+    component.querySelector('button')?.click();
+    component.focus();
+    const options = component.querySelectorAll('glide-core-menu-link');
+    const menu = component?.shadowRoot?.querySelector('[data-test="menu"]');
+    options[1].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+    await sendKeys({ press: 'Home' });
+    expect(options[0].privateActive).to.be.true;
+    expect(options[1].privateActive).to.be.false;
+    expect(menu?.getAttribute('aria-activedescendant')).to.equal(options[0].id);
+});
+it('activates the first option on PageUp', async () => {
+    const component = await fixture(html `
+    <glide-core-menu>
+      <button slot="target">Target</button>
+      <glide-core-menu-link label="One"></glide-core-menu-link>
+      <glide-core-menu-link label="Two"></glide-core-menu-link>
+    </glide-core-menu>
+  `);
+    component.querySelector('button')?.click();
+    component.focus();
+    const options = component.querySelectorAll('glide-core-menu-link');
+    const menu = component?.shadowRoot?.querySelector('[data-test="menu"]');
+    options[1].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+    await sendKeys({ press: 'PageUp' });
+    expect(options[0].privateActive).to.be.true;
+    expect(options[1].privateActive).to.be.false;
+    expect(menu?.getAttribute('aria-activedescendant')).to.equal(options[0].id);
+});
+it('activates the first option on ArrowUp + Meta', async () => {
+    const component = await fixture(html `
+    <glide-core-menu>
+      <button slot="target">Target</button>
+      <glide-core-menu-link label="One"></glide-core-menu-link>
+      <glide-core-menu-link label="Two"></glide-core-menu-link>
+    </glide-core-menu>
+  `);
+    component.querySelector('button')?.click();
+    component.focus();
+    const options = component.querySelectorAll('glide-core-menu-link');
+    const menu = component?.shadowRoot?.querySelector('[data-test="menu"]');
+    options[1].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+    await sendKeys({ down: 'Meta' });
+    await sendKeys({ press: 'ArrowUp' });
+    expect(options[0].privateActive).to.be.true;
+    expect(options[1].privateActive).to.be.false;
+    expect(menu?.getAttribute('aria-activedescendant')).to.equal(options[0].id);
+});
+it('activates the last option on End', async () => {
+    const component = await fixture(html `
+    <glide-core-menu>
+      <button slot="target">Target</button>
+      <glide-core-menu-link label="One"></glide-core-menu-link>
+      <glide-core-menu-link label="Two"></glide-core-menu-link>
+    </glide-core-menu>
+  `);
+    component.querySelector('button')?.click();
+    component.focus();
+    await sendKeys({ press: 'End' });
+    const options = component.querySelectorAll('glide-core-menu-link');
+    const menu = component?.shadowRoot?.querySelector('[data-test="menu"]');
+    expect(options[0].privateActive).to.be.false;
+    expect(options[1].privateActive).to.be.true;
+    expect(menu?.getAttribute('aria-activedescendant')).to.equal(options[1].id);
+});
+it('activates the last option on PageDown', async () => {
+    const component = await fixture(html `
+    <glide-core-menu>
+      <button slot="target">Target</button>
+      <glide-core-menu-link label="One"></glide-core-menu-link>
+      <glide-core-menu-link label="Two"></glide-core-menu-link>
+    </glide-core-menu>
+  `);
+    component.querySelector('button')?.click();
+    component.focus();
+    const options = component.querySelectorAll('glide-core-menu-link');
+    const menu = component?.shadowRoot?.querySelector('[data-test="menu"]');
+    options[0].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+    await sendKeys({ press: 'PageDown' });
+    expect(options[0].privateActive).to.be.false;
+    expect(options[1].privateActive).to.be.true;
+    expect(menu?.getAttribute('aria-activedescendant')).to.equal(options[1].id);
+});
+it('activates the last option on Meta + ArrowDown', async () => {
+    const component = await fixture(html `
+    <glide-core-menu>
+      <button slot="target">Target</button>
+      <glide-core-menu-link label="One"></glide-core-menu-link>
+      <glide-core-menu-link label="Two"></glide-core-menu-link>
+    </glide-core-menu>
+  `);
+    component.querySelector('button')?.click();
+    component.focus();
+    const options = component.querySelectorAll('glide-core-menu-link');
+    const menu = component?.shadowRoot?.querySelector('[data-test="menu"]');
+    options[0].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+    await sendKeys({ down: 'Meta' });
+    await sendKeys({ press: 'ArrowDown' });
+    await sendKeys({ up: 'Meta' });
+    expect(options[0].privateActive).to.be.false;
+    expect(options[1].privateActive).to.be.true;
+    expect(menu?.getAttribute('aria-activedescendant')).to.equal(options[1].id);
+});
+it('sets `aria-activedescendant` on open', async () => {
+    const component = await fixture(html `<glide-core-menu>
+      <button slot="target">Target</button>
+      <glide-core-menu-link label="Link"></glide-core-menu-link>
+    </glide-core-menu>`);
+    component.querySelector('button')?.click();
+    await elementUpdated(component);
+    const option = component.querySelector('glide-core-menu-link');
+    const menu = component?.shadowRoot?.querySelector('[data-test="menu"]');
+    expect(menu?.getAttribute('aria-activedescendant')).to.equal(option?.id);
+});
+it('sets `aria-activedescendant` on close', async () => {
+    const component = await fixture(html `<glide-core-menu open>
+      <button slot="target">Target</button>
+      <glide-core-menu-link label="Link"></glide-core-menu-link>
+    </glide-core-menu>`);
+    component.querySelector('button')?.click();
+    await elementUpdated(component);
+    const menu = component?.shadowRoot?.querySelector('[data-test="menu"]');
+    expect(menu?.getAttribute('aria-activedescendant')).to.equal('');
+});
+it('sets `aria-expanded` on open', async () => {
+    const component = await fixture(html `<glide-core-menu>
+      <button slot="target">Target</button>
+      <glide-core-menu-link label="Link"></glide-core-menu-link>
+    </glide-core-menu>`);
+    component.querySelector('button')?.click();
+    expect(component.querySelector('button')?.getAttribute('aria-expanded')).to.equal('true');
+});
+it('sets `aria-expanded` on close', async () => {
+    const component = await fixture(html `<glide-core-menu open>
+      <button slot="target">Target</button>
+      <glide-core-menu-link label="Link"></glide-core-menu-link>
+    </glide-core-menu>`);
+    component.querySelector('button')?.click();
+    expect(component.querySelector('button')?.getAttribute('aria-expanded')).to.equal('false');
+});
+it('does not wrap on ArrowUp', async () => {
+    const component = await fixture(html `
+    <glide-core-menu>
+      <button slot="target">Target</button>
+      <glide-core-menu-link label="One"></glide-core-menu-link>
+      <glide-core-menu-link label="Two"></glide-core-menu-link>
+    </glide-core-menu>
+  `);
+    component.querySelector('button')?.click();
+    await sendKeys({ press: 'ArrowUp' });
+    const link = component.querySelector('glide-core-menu-link');
+    expect(link?.privateActive).to.be.true;
+});
+it('does not wrap on ArrowDown', async () => {
+    const component = await fixture(html `
+    <glide-core-menu>
+      <button slot="target">Target</button>
+      <glide-core-menu-link label="One"></glide-core-menu-link>
+      <glide-core-menu-link label="Two"></glide-core-menu-link>
+    </glide-core-menu>
+  `);
+    component.querySelector('button')?.click();
+    const options = component.querySelectorAll('glide-core-menu-link');
+    options[1].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+    await sendKeys({ press: 'ArrowDown' });
+    expect(options[1].privateActive).to.be.true;
+});

package/dist/modal.icon-button.js

@@ -1 +1 @@
-"use strict";var u=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var p=(t,e,o,a)=>{for(var i=a>1?void 0:a?E(e,o):e,f=t.length-1,n;f>=0;f--)(n=t[f])&&(i=(a?n(e,o,i):n(i))||i);return a&&i&&u(e,o,i),i};var c=(t,e,o)=>{if(!e.has(t))throw TypeError("Cannot "+o)};var m=(t,e,o)=>(c(t,e,"read from private field"),o?o.call(t):e.get(t)),d=(t,e,o)=>{if(e.has(t))throw TypeError("Cannot add the same private member more than once");e instanceof WeakSet?e.add(t):e.set(t,o)};var h=(t,e,o)=>(c(t,e,"access private method"),o);var l,s,v;import"./icon-button.js";import{LitElement as b,html as R}from"lit";import{createRef as S,ref as w}from"lit/directives/ref.js";import{customElement as y,property as L}from"lit/decorators.js";import{ifDefined as T}from"lit/directives/if-defined.js";import{owSlot as g}from"./library/ow.js";import $ from"./modal.icon-button.styles.js";let r=class extends b{constructor(){super(...arguments);d(this,s);this.label="";d(this,l,S())}firstUpdated(){g(m(this,l).value)}render(){return R`<glide-core-icon-button label="${T(this.label)}" variant="tertiary"><slot @slotchange="${h(this,s,v)}" ${w(m(this,l))}></slot></glide-core-icon-button>`}};l=new WeakMap,s=new WeakSet,v=function(){g(m(this,l).value)},r.shadowRootOptions={...b.shadowRootOptions,mode:"closed"},r.styles=$,p([L()],r.prototype,"label",2),r=p([y("glide-core-modal-icon-button")],r);export{r as default};
+var __decorate=this&&this.__decorate||function(t,e,o,l){var r,i=arguments.length,n=i<3?e:null===l?l=Object.getOwnPropertyDescriptor(e,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,o,l);else for(var s=t.length-1;s>=0;s--)(r=t[s])&&(n=(i<3?r(n):i>3?r(e,o,n):r(e,o))||n);return i>3&&n&&Object.defineProperty(e,o,n),n};import"./icon-button.js";import{LitElement,html}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{owSlot}from"./library/ow.js";import styles from"./modal.icon-button.styles.js";let GlideCoreModalIconButton=class GlideCoreModalIconButton extends LitElement{constructor(){super(...arguments),this.label="",this.#t=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlot(this.#t.value)}render(){return html`<glide-core-icon-button label="${ifDefined(this.label)}" variant="tertiary"><slot @slotchange="${this.#e}" ${ref(this.#t)}></slot></glide-core-icon-button>`}#t;#e(){owSlot(this.#t.value)}};__decorate([property()],GlideCoreModalIconButton.prototype,"label",void 0),GlideCoreModalIconButton=__decorate([customElement("glide-core-modal-icon-button")],GlideCoreModalIconButton);export default GlideCoreModalIconButton;

package/dist/modal.icon-button.styles.js

@@ -1,8 +1,8 @@
-"use strict";import{css as e}from"lit";export default[e`
+import{css}from"lit";export default[css`
     ::slotted(*) {
       --size: 1.25rem;
 
       block-size: 1.25rem;
       inline-size: 1.25rem;
     }
-  `];
+  `];

package/dist/modal.icon-button.test.basics.js

@@ -0,0 +1,45 @@
+import { ArgumentError } from 'ow';
+import { expect, fixture, html } from '@open-wc/testing';
+import GlideCoreModalIconButton from './modal.icon-button.js';
+import sinon from 'sinon';
+GlideCoreModalIconButton.shadowRootOptions.mode = 'open';
+it('registers', async () => {
+    expect(window.customElements.get('glide-core-modal-icon-button')).to.equal(GlideCoreModalIconButton);
+});
+it('is accessible', async () => {
+    const element = await fixture(html `<glide-core-modal-icon-button>Test</glide-core-modal-icon-button>`);
+    await expect(element).to.be.accessible();
+});
+it('renders and sets default attributes', async () => {
+    const element = await fixture(html `
+    <glide-core-modal-icon-button>Test</glide-core-modal-icon-button>
+  `);
+    expect(element).to.be.ok;
+    const buttonElement = element.shadowRoot?.querySelector('glide-core-icon-button');
+    expect(buttonElement).to.be.not.null;
+    expect(buttonElement).to.have.attribute('variant', 'tertiary');
+});
+it('adds an accessible label when given', async () => {
+    const element = await fixture(html `<glide-core-modal-icon-button label="test-label"
+      >Test</glide-core-modal-icon-button
+    >`);
+    const buttonElement = element.shadowRoot?.querySelector('glide-core-icon-button');
+    expect(buttonElement).to.have.attribute('label', 'test-label');
+});
+it('does not add an acceessible label when not given', async () => {
+    const element = await fixture(html `<glide-core-modal-icon-button>Test</glide-core-modal-icon-button>`);
+    const buttonElement = element.shadowRoot?.querySelector('glide-core-icon-button');
+    expect(buttonElement).to.have.attribute('label', '');
+});
+it('throws if it does not have a default slot', async () => {
+    const spy = sinon.spy();
+    try {
+        await fixture(html `<glide-core-modal-icon-button></glide-core-modal-icon-button>`);
+    }
+    catch (error) {
+        if (error instanceof ArgumentError) {
+            spy();
+        }
+    }
+    expect(spy.called).to.be.true;
+});

package/dist/modal.js

@@ -1,15 +1 @@
-"use strict";var Y=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var b=(l,o,t,n)=>{for(var c=n>1?void 0:n?N(o,t):o,R=l.length-1,B;R>=0;R--)(B=l[R])&&(c=(n?B(o,t,c):B(c))||c);return n&&c&&Y(o,t,c),c};var z=(l,o,t)=>{if(!o.has(l))throw TypeError("Cannot "+t)};var e=(l,o,t)=>(z(l,o,"read from private field"),t?t.call(l):o.get(l)),i=(l,o,t)=>{if(o.has(l))throw TypeError("Cannot add the same private member more than once");o instanceof WeakSet?o.add(l):o.set(l,t)};var r=(l,o,t)=>(z(l,o,"access private method"),t);var s,p,g,v,f,S,w,x,E,j,y,F,C,P,M,K,$,O,L,W,H,X;import"./modal.icon-button.js";import{LitElement as V,html as D}from"lit";import{classMap as U}from"lit/directives/class-map.js";import{createRef as m,ref as u}from"lit/directives/ref.js";import{customElement as q,property as T}from"lit/decorators.js";import{owSlot as I,owSlotType as d}from"./library/ow.js";import{when as J}from"lit/directives/when.js";import h from"./button.js";import Z from"./modal.icon-button.js";import A from"./modal.tertiary-icon.js";import Q from"./modal.styles.js";const k=new CSSStyleSheet;k.insertRule(`
-  @supports (scrollbar-gutter: stable) {
-    .private-glide-core-modal-lock-scroll {
-      scrollbar-gutter: stable !important;
-      overflow: hidden !important;
-    }
-  }
-`),k.insertRule(`
-  @supports not (scrollbar-gutter: stable) {
-    .private-glide-core-modal-lock-scroll {
-      padding-right: var(--glide-scroll-size, 0.9375rem) !important;
-      overflow: hidden !important;
-    }
-  }
-`);let a=class extends V{constructor(){super(...arguments);i(this,w);i(this,E);i(this,y);i(this,C);i(this,M);i(this,$);i(this,L);i(this,H);this.label="";this.showBackButton=!1;this.size="medium";i(this,s,m());i(this,p,m());i(this,g,m());i(this,v,m());i(this,f,m());i(this,S,m())}close(){e(this,s).value?.open&&(document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),this.dispatchEvent(new Event("close")),e(this,s).value?.close())}connectedCallback(){super.connectedCallback(),document.adoptedStyleSheets.includes(k)||document.adoptedStyleSheets.push(k)}disconnectedCallback(){super.disconnectedCallback(),document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),document.adoptedStyleSheets=document.adoptedStyleSheets.filter(t=>t!==k)}firstUpdated(){I(e(this,p).value),d(e(this,S).value,[Z]),d(e(this,g).value,[h]),d(e(this,v).value,[h]),d(e(this,f).value,[A,h])}render(){return D`<dialog class="${U({component:!0,small:this.size==="small",medium:this.size==="medium",large:this.size==="large",xlarge:this.size==="xlarge"})}" tabindex="-1" @keydown="${r(this,L,W)}" @mousedown="${r(this,H,X)}" ${u(e(this,s))}><header class="header"><h2 class="label" data-test="heading" id="heading">${J(this.showBackButton,()=>D`<glide-core-modal-icon-button data-test="back-button" @click="${r(this,w,x)}"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><title>Dismiss</title><path d="M12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20V18ZM20 14.5C20 16.433 18.433 18 16.5 18V20C19.5376 20 22 17.5376 22 14.5H20ZM16.5 11C18.433 11 20 12.567 20 14.5H22C22 11.4624 19.5376 9 16.5 9V11ZM16.5 18H12V20H16.5V18ZM16.5 9H3V11H16.5V9Z" fill="currentColor"/><path d="M7 6L3 10L7 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></glide-core-modal-icon-button>`)} ${this.label}</h2><div class="header-actions" role="toolbar"><slot name="header-actions" @slotchange="${r(this,$,O)}" ${u(e(this,S))}></slot><glide-core-modal-icon-button data-test="close-button" @click="${r(this,w,x)}"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><title>Close</title><path d="M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></glide-core-modal-icon-button></div></header><article aria-labelledby="heading" class="body" role="region" tabindex="0"><slot @slotchange="${r(this,E,j)}" ${u(e(this,p))}></slot></article><footer class="footer"><menu class="menu"><li class="flex align-center"><slot name="tertiary" @slotchange="${r(this,M,K)}" ${u(e(this,f))}></slot></li><li><menu class="actions"><li><slot name="secondary" @slotchange="${r(this,C,P)}" ${u(e(this,v))}></slot></li><li><slot name="primary" @slotchange="${r(this,y,F)}" ${u(e(this,g))}></slot></li></menu></li></menu></footer></dialog>`}showModal(){if(!e(this,s).value?.open){if(document.documentElement.classList.add("private-glide-core-modal-lock-scroll"),!window.CSS.supports("scrollbar-gutter","stable")){const t=Math.abs(window.innerWidth-document.documentElement.clientWidth);document.documentElement.style.setProperty("--glide-scroll-size",`${t}px`)}e(this,s).value?.showModal(),e(this,s).value?.focus()}}};s=new WeakMap,p=new WeakMap,g=new WeakMap,v=new WeakMap,f=new WeakMap,S=new WeakMap,w=new WeakSet,x=function(){document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),this.dispatchEvent(new Event("close")),e(this,s).value?.close()},E=new WeakSet,j=function(){I(e(this,p).value)},y=new WeakSet,F=function(){d(e(this,g).value,[h])},C=new WeakSet,P=function(){d(e(this,v).value,[h])},M=new WeakSet,K=function(){d(e(this,f).value,[A,h])},$=new WeakSet,O=function(){d(e(this,S).value,[Z])},L=new WeakSet,W=function(t){t.key==="Escape"&&(document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),this.dispatchEvent(new Event("close")),e(this,s).value?.close())},H=new WeakSet,X=function(t){if(t.target!==e(this,s).value)return;const n=e(this,s).value?.getBoundingClientRect();n&&(n.top<=t.clientY&&t.clientY<=n.top+n.height&&n.left<=t.clientX&&t.clientX<=n.left+n.width||(document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),this.dispatchEvent(new Event("close")),e(this,s).value?.close()))},a.shadowRootOptions={...V.shadowRootOptions,mode:"closed"},a.styles=Q,b([T({reflect:!0})],a.prototype,"label",2),b([T({attribute:"show-back-button",type:Boolean,reflect:!0})],a.prototype,"showBackButton",2),b([T({reflect:!0})],a.prototype,"size",2),a=b([q("glide-core-modal")],a);export{a as default};
+var __decorate=this&&this.__decorate||function(e,t,o,l){var n,r=arguments.length,i=r<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,o,l);else for(var s=e.length-1;s>=0;s--)(n=e[s])&&(i=(r<3?n(i):r>3?n(t,o,i):n(t,o))||i);return r>3&&i&&Object.defineProperty(t,o,i),i};import"./modal.icon-button.js";import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{owSlot,owSlotType}from"./library/ow.js";import{when}from"lit/directives/when.js";import GlideCoreButton from"./button.js";import GlideCoreModalIconButton from"./modal.icon-button.js";import GlideCoreModalTertiaryIcon from"./modal.tertiary-icon.js";import styles from"./modal.styles.js";const globalStylesheet=new CSSStyleSheet;globalStylesheet.insertRule("\n  @supports (scrollbar-gutter: stable) {\n    .private-glide-core-modal-lock-scroll {\n      scrollbar-gutter: stable !important;\n      overflow: hidden !important;\n    }\n  }\n"),globalStylesheet.insertRule("\n  @supports not (scrollbar-gutter: stable) {\n    .private-glide-core-modal-lock-scroll {\n      padding-right: var(--glide-scroll-size, 0.9375rem) !important;\n      overflow: hidden !important;\n    }\n  }\n");let GlideCoreModal=class GlideCoreModal extends LitElement{constructor(){super(...arguments),this.label="",this.showBackButton=!1,this.size="medium",this.#e=createRef(),this.#t=createRef(),this.#o=createRef(),this.#l=createRef(),this.#n=createRef(),this.#r=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}close(){this.#e.value?.open&&(document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),this.dispatchEvent(new Event("close")),this.#e.value?.close())}connectedCallback(){super.connectedCallback();document.adoptedStyleSheets.includes(globalStylesheet)||document.adoptedStyleSheets.push(globalStylesheet)}disconnectedCallback(){super.disconnectedCallback(),document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),document.adoptedStyleSheets=document.adoptedStyleSheets.filter((e=>e!==globalStylesheet))}firstUpdated(){owSlot(this.#t.value),owSlotType(this.#r.value,[GlideCoreModalIconButton]),owSlotType(this.#o.value,[GlideCoreButton]),owSlotType(this.#l.value,[GlideCoreButton]),owSlotType(this.#n.value,[GlideCoreModalTertiaryIcon,GlideCoreButton])}render(){return html`<dialog class="${classMap({component:!0,small:"small"===this.size,medium:"medium"===this.size,large:"large"===this.size,xlarge:"xlarge"===this.size})}" tabindex="-1" @keydown="${this.#i}" @mousedown="${this.#s}" ${ref(this.#e)}><header class="header"><h2 class="label" data-test="heading" id="heading">${when(this.showBackButton,(()=>html`<glide-core-modal-icon-button data-test="back-button" @click="${this.#a}"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><title>Dismiss</title><path d="M12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20V18ZM20 14.5C20 16.433 18.433 18 16.5 18V20C19.5376 20 22 17.5376 22 14.5H20ZM16.5 11C18.433 11 20 12.567 20 14.5H22C22 11.4624 19.5376 9 16.5 9V11ZM16.5 18H12V20H16.5V18ZM16.5 9H3V11H16.5V9Z" fill="currentColor"/><path d="M7 6L3 10L7 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></glide-core-modal-icon-button>`))} ${this.label}</h2><div class="header-actions" role="toolbar"><slot name="header-actions" @slotchange="${this.#c}" ${ref(this.#r)}></slot><glide-core-modal-icon-button data-test="close-button" @click="${this.#a}"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><title>Close</title><path d="M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></glide-core-modal-icon-button></div></header><article aria-labelledby="heading" class="body" role="region" tabindex="0"><slot @slotchange="${this.#d}" ${ref(this.#t)}></slot></article><footer class="footer"><menu class="menu"><li class="flex align-center"><slot name="tertiary" @slotchange="${this.#m}" ${ref(this.#n)}></slot></li><li><menu class="actions"><li><slot name="secondary" @slotchange="${this.#h}" ${ref(this.#l)}></slot></li><li><slot name="primary" @slotchange="${this.#u}" ${ref(this.#o)}></slot></li></menu></li></menu></footer></dialog>`}showModal(){if(!this.#e.value?.open){if(document.documentElement.classList.add("private-glide-core-modal-lock-scroll"),!window.CSS.supports("scrollbar-gutter","stable")){const e=Math.abs(window.innerWidth-document.documentElement.clientWidth);document.documentElement.style.setProperty("--glide-scroll-size",`${e}px`)}this.#e.value?.showModal(),this.#e.value?.focus()}}#e;#t;#o;#l;#n;#r;#a(){document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),this.dispatchEvent(new Event("close")),this.#e.value?.close()}#d(){owSlot(this.#t.value)}#u(){owSlotType(this.#o.value,[GlideCoreButton])}#h(){owSlotType(this.#l.value,[GlideCoreButton])}#m(){owSlotType(this.#n.value,[GlideCoreModalTertiaryIcon,GlideCoreButton])}#c(){owSlotType(this.#r.value,[GlideCoreModalIconButton])}#i(e){"Escape"===e.key&&(document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),this.dispatchEvent(new Event("close")),this.#e.value?.close())}#s(e){if(e.target!==this.#e.value)return;const t=this.#e.value?.getBoundingClientRect();if(t){t.top<=e.clientY&&e.clientY<=t.top+t.height&&t.left<=e.clientX&&e.clientX<=t.left+t.width||(document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),this.dispatchEvent(new Event("close")),this.#e.value?.close())}}};__decorate([property({reflect:!0})],GlideCoreModal.prototype,"label",void 0),__decorate([property({attribute:"show-back-button",type:Boolean,reflect:!0})],GlideCoreModal.prototype,"showBackButton",void 0),__decorate([property({reflect:!0})],GlideCoreModal.prototype,"size",void 0),GlideCoreModal=__decorate([customElement("glide-core-modal")],GlideCoreModal);export default GlideCoreModal;