@crowdstrike/glide-core 0.5.1 → 0.6.0

package/dist/menu.options.styles.js

@@ -0,0 +1,33 @@
+import{css}from"lit";export default[css`
+    :host {
+      display: inline-block;
+      inline-size: 100%;
+    }
+
+    .component {
+      &.large {
+        --gap: var(--glide-core-spacing-sm);
+        --padding-inline: var(--glide-core-spacing-sm);
+        --padding-block: var(--glide-core-spacing-xxs);
+
+        font-family: var(--glide-core-body-sm-font-family);
+        font-size: var(--glide-core-body-sm-font-size);
+        font-style: var(--glide-core-body-sm-font-style);
+        font-weight: var(--glide-core-body-sm-font-weight);
+        line-height: var(--glide-core-body-sm-line-height);
+      }
+
+      &.small {
+        --gap: var(--glide-core-spacing-xs);
+        --padding-inline: var(--glide-core-spacing-xs);
+        --padding-block: var(--glide-core-spacing-xxxs);
+        --size: 0.75rem;
+
+        font-family: var(--glide-core-body-xs-font-family);
+        font-size: var(--glide-core-body-xs-font-size);
+        font-style: var(--glide-core-body-xs-font-style);
+        font-weight: var(--glide-core-body-xs-font-weight);
+        line-height: var(--glide-core-body-xs-line-height);
+      }
+    }
+  `];

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

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

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

@@ -0,0 +1,43 @@
+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.called).to.be.true;
+});
+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.notCalled).to.be.true;
+});

package/dist/menu.stories.d.ts

@@ -2,6 +2,7 @@ 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;

package/dist/menu.styles.js

@@ -1,4 +1,4 @@
-"use strict";import{css as e}from"lit";export default[e`
+import{css}from"lit";export default[css`
     :host {
       /* Contains elements with "padding", "margin", and "width". Inline by default. */
       display: inline-block;
@@ -9,17 +9,18 @@
       display: flex;
     }
 
-    .target-container {
+    .target-slot {
       display: flex;
       position: relative;
     }
 
-    .options {
+    .default-slot {
       background-color: var(--glide-core-surface-modal);
       border: 1px solid var(--glide-core-surface-modal);
       border-radius: var(--glide-core-spacing-xs);
       box-shadow: var(--glide-core-shadow-lg);
       box-sizing: border-box;
+      display: flex;
       inline-size: max-content;
       inset-block-start: 0;
       inset-inline-start: 0;
@@ -30,8 +31,8 @@
       visibility: hidden;
 
       /*
-        ".target-container" is relative and many Menus may be stacked in a column.
-        This ensures the ".options" of Menus earlier in the column aren't obscured
+        ".container" is relative and many Menus may be stacked in a column.
+        This ensures the ".menu" of Menus earlier in the column aren't obscured
         by the ".target-container" that come later.
       */
       z-index: 1;
@@ -39,30 +40,5 @@
       &.visible {
         visibility: visible;
       }
-
-      &.large {
-        --gap: var(--glide-core-spacing-sm);
-        --padding-inline: var(--glide-core-spacing-sm);
-        --padding-block: var(--glide-core-spacing-xxs);
-
-        font-family: var(--glide-core-body-sm-font-family);
-        font-size: var(--glide-core-body-sm-font-size);
-        font-style: var(--glide-core-body-sm-font-style);
-        font-weight: var(--glide-core-body-sm-font-weight);
-        line-height: var(--glide-core-body-sm-line-height);
-      }
-
-      &.small {
-        --gap: var(--glide-core-spacing-xs);
-        --padding-inline: var(--glide-core-spacing-xs);
-        --padding-block: var(--glide-core-spacing-xxxs);
-        --size: 0.75rem;
-
-        font-family: var(--glide-core-body-xs-font-family);
-        font-size: var(--glide-core-body-xs-font-size);
-        font-style: var(--glide-core-body-xs-font-style);
-        font-weight: var(--glide-core-body-xs-font-weight);
-        line-height: var(--glide-core-body-xs-line-height);
-      }
     }
-  `];
+  `];

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

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

package/dist/menu.test.basics.js

@@ -0,0 +1,183 @@
+import './menu.button.js';
+import './menu.link.js';
+import { ArgumentError } from 'ow';
+import { expect, fixture, html } from '@open-wc/testing';
+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('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(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>`);
+    const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
+    const target = component.querySelector('button');
+    expect(component.open).to.be.true;
+    expect(defaultSlot?.checkVisibility({ checkVisibilityCSS: true })).to.be.true;
+    expect(target?.ariaExpanded).to.equal('true');
+});
+it('can have a default slot', 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 assignedElements = component.shadowRoot
+        ?.querySelectorAll('slot')[1]
+        .assignedElements();
+    expect(assignedElements?.at(0) instanceof GlideCoreMenuOptions).to.be.true;
+});
+it('can have a target slot', 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 assignedElements = component.shadowRoot
+        ?.querySelector('slot[name="target"]')
+        ?.assignedElements();
+    expect(assignedElements?.at(0)?.textContent).to.equal('Target');
+});
+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>
+  `);
+    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>
+  `);
+    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>`);
+    const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
+    const target = component.querySelector('button');
+    expect(defaultSlot?.checkVisibility({ checkVisibilityCSS: true })).not.be.ok;
+    expect(target?.ariaExpanded).to.equal('false');
+});
+it('throws if it does not have a default slot', async () => {
+    const spy = sinon.spy();
+    try {
+        await fixture(html `<glide-core-menu
+        ><button slot="target">Target</button></glide-core-menu
+      >`);
+    }
+    catch (error) {
+        if (error instanceof ArgumentError) {
+            spy();
+        }
+    }
+    expect(spy.called).to.be.true;
+});
+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.called).to.be.true;
+});
+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.focus.d.ts

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

package/dist/menu.test.focus.js

@@ -0,0 +1,84 @@
+import './menu.link.js';
+import { assert, elementUpdated, expect, fixture, html, } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+import GlideCoreMenu from './menu.js';
+import GlideCoreMenuOptions from './menu.options.js';
+GlideCoreMenu.shadowRootOptions.mode = 'open';
+it('focuses the target on `focus()`', 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>`);
+    component.focus();
+    const target = component.querySelector('button');
+    assert(target);
+    expect(document.activeElement).to.equal(target);
+});
+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.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({ checkVisibilityCSS: true })).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>`);
+    component.focus();
+    const options = component.querySelector('glide-core-menu-options');
+    assert(options instanceof GlideCoreMenuOptions);
+    options.focus();
+    const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
+    expect(component.open).to.be.true;
+    expect(defaultSlot?.checkVisibility({ checkVisibilityCSS: true })).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>`);
+    component.focus();
+    const option = component.querySelector('glide-core-menu-link');
+    assert(option);
+    option?.focus();
+    expect(component.open).to.be.true;
+});
+it('sets the focused option as active', 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>`);
+    component.focus();
+    const target = 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(target?.privateActive).to.be.false;
+    expect(link?.privateActive).to.be.true;
+    expect(options?.getAttribute('aria-activedescendant')).to.equal(link?.id);
+});

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

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