@crowdstrike/glide-core 0.7.0 → 0.9.0

package/dist/menu.styles.js

@@ -20,25 +20,11 @@ import{css}from"lit";export default[css`
       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;
+      inset: unset;
       margin-block: 0;
       min-inline-size: 9.375rem;
       padding: var(--glide-core-spacing-xxxs);
       position: absolute;
-      visibility: hidden;
-
-      /*
-        ".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;
-
-      &.visible {
-        visibility: visible;
-      }
     }
   `];

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

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

package/dist/menu.test.basics.js

@@ -1,12 +1,15 @@
-import './menu.button.js';
-import './menu.link.js';
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import { ArgumentError } from 'ow';
-import { expect, fixture, html } from '@open-wc/testing';
+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 GlideCoreMenuOptions from './menu.options.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);
 });
@@ -37,6 +40,7 @@ it('is accessible', async () => {
     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();
 });
@@ -48,11 +52,16 @@ it('can be opened', async () => {
         <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({ checkVisibilityCSS: true })).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('can have a default slot', async () => {
     const component = await fixture(html `<glide-core-menu>
@@ -91,6 +100,8 @@ it('activates the first menu link by default', async () => {
       </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;
@@ -108,6 +119,8 @@ it('activates the first menu button by default', async () => {
       </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;
@@ -122,10 +135,14 @@ it('is not opened when initially `open` and its target is `disabled`', async ()
         <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');
-    expect(defaultSlot?.checkVisibility({ checkVisibilityCSS: true })).not.be.ok;
+    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('throws if it does not have a default slot', async () => {
     await expectArgumentError(() => {
@@ -156,7 +173,7 @@ it('throws if it does not have a "target" slot', async () => {
             spy();
         }
     }
-    expect(spy.called).to.be.true;
+    expect(spy.callCount).to.equal(1);
 });
 it('sets accessibility attributes', async () => {
     const component = await fixture(html `<glide-core-menu>

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

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

package/dist/menu.test.events.js

@@ -1,7 +1,8 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+import './menu.js';
 import './menu.link.js';
 import './menu.options.js';
 import { expect, fixture, html, oneEvent } from '@open-wc/testing';
-import GlideCoreMenu from './menu.js';
 it('dispatches a "click" event when a link is clicked', async () => {
     const component = await fixture(html `<glide-core-menu open>
       <button slot="target">Target</button>

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

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

package/dist/menu.test.focus.js

@@ -1,8 +1,9 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import './menu.link.js';
-import { assert, elementUpdated, expect, fixture, html, } from '@open-wc/testing';
+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';
-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>
@@ -30,7 +31,7 @@ it('closes when it loses focus', async () => {
     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(defaultSlot?.checkVisibility()).be.false;
     expect(options?.getAttribute('aria-activedescendant')).to.equal('');
 });
 it('remains open when the options component is focused', async () => {
@@ -41,13 +42,14 @@ it('remains open when the options component is focused', async () => {
         <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.focus();
     const options = component.querySelector('glide-core-menu-options');
-    assert(options instanceof GlideCoreMenuOptions);
-    options.focus();
     const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
+    options?.focus();
     expect(component.open).to.be.true;
-    expect(defaultSlot?.checkVisibility({ checkVisibilityCSS: true })).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>
@@ -57,11 +59,15 @@ it('remains open when an option is focused', async () => {
         <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.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 the focused option as active', async () => {
     const component = await fixture(html `<glide-core-menu open>
@@ -72,6 +78,8 @@ it('sets the focused option as active', async () => {
         <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.focus();
     const target = component.querySelector('glide-core-menu-button');
     const link = component.querySelector('glide-core-menu-link');