@crowdstrike/glide-core 0.8.0 → 0.9.1

package/dist/menu.d.ts

@@ -8,7 +8,7 @@ declare global {
 /**
  * @description A basic menu.
  *
- * @slot - <glide-core-menu-options>.
+ * @slot - `<glide-core-menu-options>`.
  * @slot target - A focusable element against which Menu will be positioned. Opens and closes Menu when interacted with.
  */
 export default class GlideCoreMenu extends LitElement {
@@ -18,15 +18,13 @@ export default class GlideCoreMenu extends LitElement {
     get open(): boolean;
     set open(isOpen: boolean);
     placement: Placement;
-    containingBlock?: Element;
     get size(): 'small' | 'large';
     set size(size: 'small' | 'large');
     connectedCallback(): void;
     createRenderRoot(): ShadowRoot;
     disconnectedCallback(): void;
     firstUpdated(): void;
-    focus(): void;
+    focus(options?: FocusOptions): void;
+    private get isTargetDisabled();
     render(): import("lit").TemplateResult<1>;
-    setContainingBlock(containingBlock: Element): void;
-    private isTargetDisabled;
 }

package/dist/menu.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,i,o){var n,s=arguments.length,a=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,o);else for(var l=e.length-1;l>=0;l--)(n=e[l])&&(a=(s<3?n(a):s>3?n(t,i,a):n(t,i))||a);return s>3&&a&&Object.defineProperty(t,i,a),a};import{LitElement,html}from"lit";import{autoUpdate,computePosition,flip,offset,platform}from"@floating-ui/dom";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{nanoid}from"nanoid";import{offsetParent}from"composed-offset-position";import GlideCoreMenuButton from"./menu.button.js";import GlideCoreMenuLink from"./menu.link.js";import GlideCoreMenuOptions from"./menu.options.js";import ow,{owSlot,owSlotType}from"./library/ow.js";import styles from"./menu.styles.js";let GlideCoreMenu=class GlideCoreMenu extends LitElement{constructor(){super(...arguments),this.placement="bottom-start",this.isTargetDisabled=!1,this.#e=createRef(),this.#t=createRef(),this.#i=!1,this.#o=!1,this.#n="large",this.#s=createRef(),this.#a=e=>{e.target&&e.target instanceof Node&&this.contains(e.target)||(this.open=!1,this.#l&&(this.#l.ariaActivedescendant=""))}}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get open(){return this.#o}set open(e){this.#o=e,e&&!this.isTargetDisabled&&this.#l?(this.#r(),this.#l.ariaActivedescendant=this.#c?.id??""):this.#l&&(this.#p?.(),this.#l.ariaActivedescendant=""),this.#d&&(this.#d.ariaExpanded=e&&!this.isTargetDisabled?"true":"false")}get size(){return this.#n}set size(e){this.#n=e,this.#l&&(this.#l.privateSize=e)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.#a,{capture:!0})}createRenderRoot(){return this.#h=super.createRenderRoot(),this.#h}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.#a,{capture:!0})}firstUpdated(){ow(this.#l,ow.object.instanceOf(GlideCoreMenuOptions)),owSlot(this.#t.value),owSlot(this.#s.value),owSlotType(this.#t.value,[GlideCoreMenuOptions]);const e=this.#m?.at(0);this.open&&e&&(this.#r(),e.privateActive=!0,this.#l.ariaActivedescendant=e.id)}focus(){this.#d&&"focus"in this.#d&&this.#d?.focus()}render(){return html`<div class="component" @focusout="${this.#f}" ${ref(this.#e)}><slot class="target-slot" name="target" @click="${this.#u}" @keydown="${this.#E}" @slotchange="${this.#g}" ${ref(this.#s)}></slot><slot class="${classMap({"default-slot":!0,visible:this.open})}" @click="${this.#v}" @focusin="${this.#C}" @keydown="${this.#E}" @mouseover="${this.#w}" @slotchange="${this.#S}" ${ref(this.#t)}></slot></div>`}setContainingBlock(e){this.containingBlock=e}#p;#e;#t;#i;#o;#h;#n;#s;get#c(){return this.#m?.find((({privateActive:e})=>e))}get#l(){const e=this.#t.value?.assignedElements().at(0);return e||null}#a;#S(){ow(this.#l,ow.object.instanceOf(GlideCoreMenuOptions)),owSlot(this.#t.value),owSlotType(this.#t.value,[GlideCoreMenuOptions]);const e=this.#m?.at(0);e&&(e.privateActive=!0),this.#l.privateSize=this.size}#v(){this.open=!1,this.#l&&(this.#l.ariaActivedescendant="")}#C(e){(e.target instanceof GlideCoreMenuButton||e.target instanceof GlideCoreMenuLink)&&this.#c&&this.#l&&(e.target.privateActive=!0,this.#c.privateActive=!1,this.#l.ariaActivedescendant=e.target.id)}#w(e){if(e.target instanceof GlideCoreMenuLink||e.target instanceof GlideCoreMenuButton){if(this.#m)for(const t of this.#m)t.privateActive=t===e.target;this.#l&&(this.#l.ariaActivedescendant=e.target.id)}}#f(e){const t=e.relatedTarget instanceof HTMLElement&&this.#h?.contains(e.relatedTarget),i=e.relatedTarget instanceof GlideCoreMenuOptions,o=e.relatedTarget instanceof GlideCoreMenuButton||e.relatedTarget instanceof GlideCoreMenuLink;t||i||o||(this.open=!1)}#E(e){if(ow(this.#l,ow.object.instanceOf(GlideCoreMenuOptions)),[" ","Enter","Escape"].includes(e.key)&&this.open)return this.open=!1,this.#l.ariaActivedescendant="",this.focus(),void(this.#i=!0);if([" ","ArrowUp","ArrowDown"].includes(e.key)&&!this.open&&this.#c)return e.preventDefault(),this.open=!0,void(this.#l.ariaActivedescendant=this.#c.id);if(this.open){ow(this.#m,ow.array),ow(this.#l,ow.object.instanceOf(GlideCoreMenuOptions)),ow(this.#c,ow.object.is((e=>e instanceof GlideCoreMenuButton||e instanceof GlideCoreMenuLink)));const t=this.#m.indexOf(this.#c);if("ArrowUp"===e.key&&!e.metaKey){e.preventDefault();const i=this.#m.at(t-1);return void(i&&0!==t&&(this.#c.privateActive=!1,this.#l.ariaActivedescendant=i.id,i.privateActive=!0))}if("ArrowDown"===e.key&&!e.metaKey){e.preventDefault();const i=this.#m.at(t+1);return void(i&&(this.#c.privateActive=!1,this.#l.ariaActivedescendant=i.id,i.privateActive=!0))}if("ArrowUp"===e.key&&e.metaKey||"Home"===e.key||"PageUp"===e.key){e.preventDefault();const t=this.#m.at(0);return void(t&&(this.#c.privateActive=!1,this.#l.ariaActivedescendant=t.id,t.privateActive=!0))}if("ArrowDown"===e.key&&e.metaKey||"End"===e.key||"PageDown"===e.key){e.preventDefault();const t=this.#m.at(-1);return void(t&&(this.#c.privateActive=!1,this.#l.ariaActivedescendant=t.id,t.privateActive=!0))}}}#g(){owSlot(this.#s.value),ow(this.#d,ow.object.instanceOf(Element)),ow(this.#l,ow.object.instanceOf(GlideCoreMenuOptions)),this.#y(),this.isTargetDisabled&&(this.open=!1);new MutationObserver((e=>{e.some((e=>"disabled"===e.attributeName||"aria-disabled"===e.attributeName))&&(this.#y(),this.isTargetDisabled&&(this.open=!1))})).observe(this.#d,{attributes:!0}),this.#d.ariaHasPopup="true",this.#d.ariaExpanded=this.open?"true":"false",this.#d.id=nanoid(),this.#d.setAttribute("aria-controls",this.#l.id),this.#l.ariaLabelledby=this.#d.id}#u(){this.isTargetDisabled||this.#i?this.#i=!1:(this.#d instanceof HTMLElement&&(this.#d.ariaExpanded=this.open?"true":"false"),this.#m&&this.#m.length>0&&(this.open=!this.open),this.open&&this.#c&&this.#l?this.#l.ariaActivedescendant=this.#c.id:!this.open&&this.#l&&(this.#l.ariaActivedescendant="",this.focus()))}get#m(){let e=this.#t.value?.assignedElements()?.at(0)?.children;const t=e?.[0];if(t instanceof HTMLSlotElement&&(e=t.assignedElements()),e)return[...e].filter((e=>e instanceof GlideCoreMenuLink||e instanceof GlideCoreMenuButton))}#y(){const e=this.#d&&"disabled"in this.#d&&this.#d.disabled,t=this.#d&&"true"===this.#d.ariaDisabled;this.isTargetDisabled=Boolean(e)||Boolean(t)}#r(){this.#d&&this.#t.value&&(this.#p=autoUpdate(this.#d,this.#t.value,(()=>{(async()=>{if(this.#d&&this.#t.value){const{x:e,y:t,placement:i}=await computePosition(this.#d,this.#t.value,{platform:{...platform,getOffsetParent:e=>this.containingBlock??platform.getOffsetParent(e,offsetParent)},placement:this.placement,middleware:[offset({mainAxis:16*Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-xxs"))}),flip()]});this.#t.value.dataset.placement=i,Object.assign(this.#t.value.style,{left:`${e}px`,top:`${t}px`})}})()})))}get#d(){return this.#s.value?.assignedElements().at(0)}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreMenu.prototype,"open",null),__decorate([property({reflect:!0})],GlideCoreMenu.prototype,"placement",void 0),__decorate([state()],GlideCoreMenu.prototype,"containingBlock",void 0),__decorate([property({reflect:!0})],GlideCoreMenu.prototype,"size",null),__decorate([state()],GlideCoreMenu.prototype,"isTargetDisabled",void 0),GlideCoreMenu=__decorate([customElement("glide-core-menu")],GlideCoreMenu);export default GlideCoreMenu;
+var __decorate=this&&this.__decorate||function(e,t,i,o){var n,s=arguments.length,l=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,i,o);else for(var a=e.length-1;a>=0;a--)(n=e[a])&&(l=(s<3?n(l):s>3?n(t,i,l):n(t,i))||l);return s>3&&l&&Object.defineProperty(t,i,l),l};import{LitElement,html}from"lit";import{autoUpdate,computePosition,flip,offset}from"@floating-ui/dom";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{nanoid}from"nanoid";import GlideCoreMenuButton from"./menu.button.js";import GlideCoreMenuLink from"./menu.link.js";import GlideCoreMenuOptions from"./menu.options.js";import ow,{owSlot,owSlotType}from"./library/ow.js";import styles from"./menu.styles.js";let GlideCoreMenu=class GlideCoreMenu extends LitElement{constructor(){super(...arguments),this.placement="bottom-start",this.#e=createRef(),this.#t=createRef(),this.#i=!1,this.#o=!1,this.#n="large",this.#s=createRef(),this.#l=e=>{e.target&&e.target instanceof Node&&this.contains(e.target)||(this.open=!1,this.#a&&(this.#a.ariaActivedescendant=""))}}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get open(){return this.#o}set open(e){this.#o=e,e&&!this.isTargetDisabled?this.#r():this.#c()}get size(){return this.#n}set size(e){this.#n=e,this.#a&&(this.#a.privateSize=e)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.#l,{capture:!0})}createRenderRoot(){return this.#d=super.createRenderRoot(),this.#d}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.#l,{capture:!0})}firstUpdated(){ow(this.#a,ow.object.instanceOf(GlideCoreMenuOptions)),owSlot(this.#t.value),owSlot(this.#s.value),owSlotType(this.#t.value,[GlideCoreMenuOptions]),this.#t.value.popover="manual";const e=this.#h?.at(0);this.open&&e&&!this.isTargetDisabled&&(e.privateActive=!0,this.#r())}focus(e){this.#p&&"focus"in this.#p&&this.#p?.focus(e)}get isTargetDisabled(){const e=this.#p&&"disabled"in this.#p&&this.#p.disabled,t=this.#p&&"true"===this.#p.ariaDisabled;return Boolean(e)||Boolean(t)}render(){return html`<div class="component" @focusout="${this.#u}" ${ref(this.#e)}><slot class="target-slot" name="target" @click="${this.#m}" @keydown="${this.#f}" @slotchange="${this.#E}" ${ref(this.#s)}></slot><slot class="default-slot" @click="${this.#v}" @focusin="${this.#g}" @keydown="${this.#f}" @mouseover="${this.#w}" @slotchange="${this.#S}" ${ref(this.#t)}></slot></div>`}#C;#e;#t;#i;#o;#d;#n;#s;get#y(){return this.#h?.find((({privateActive:e})=>e))}#l;#c(){this.#C?.(),this.#a&&(this.#a.ariaActivedescendant=""),this.#p&&(this.#p.ariaExpanded="false"),this.#t.value?.hidePopover()}get#a(){const e=this.#t.value?.assignedElements().at(0);return e instanceof GlideCoreMenuOptions?e:null}#S(){ow(this.#a,ow.object.instanceOf(GlideCoreMenuOptions)),owSlot(this.#t.value),owSlotType(this.#t.value,[GlideCoreMenuOptions]);const e=this.#h?.at(0);e&&(e.privateActive=!0),this.#a.privateSize=this.size}#v(){this.open=!1}#g(e){(e.target instanceof GlideCoreMenuButton||e.target instanceof GlideCoreMenuLink)&&this.#y&&this.#a&&(e.target.privateActive=!0,this.#y.privateActive=!1,this.#a.ariaActivedescendant=e.target.id)}#w(e){if(e.target instanceof GlideCoreMenuLink||e.target instanceof GlideCoreMenuButton){if(this.#h)for(const t of this.#h)t.privateActive=t===e.target;this.#a&&(this.#a.ariaActivedescendant=e.target.id)}}#u(e){const t=e.relatedTarget instanceof HTMLElement&&this.#d?.contains(e.relatedTarget),i=e.relatedTarget instanceof GlideCoreMenuOptions,o=e.relatedTarget instanceof GlideCoreMenuButton||e.relatedTarget instanceof GlideCoreMenuLink;t||i||o||(this.open=!1)}#f(e){if(ow(this.#a,ow.object.instanceOf(GlideCoreMenuOptions)),[" ","Enter"].includes(e.key)&&this.open)return this.open=!1,this.focus(),this.#y?.dispatchEvent(new PointerEvent("click",{bubbles:!0})),void(this.#i=!0);if(["Escape"].includes(e.key)&&this.open)return this.open=!1,void this.focus();if([" ","ArrowUp","ArrowDown"].includes(e.key)&&!this.open&&this.#y)return e.preventDefault(),this.open=!0,void(this.#a.ariaActivedescendant=this.#y.id);if(this.open){ow(this.#h,ow.array),ow(this.#a,ow.object.instanceOf(GlideCoreMenuOptions)),ow(this.#y,ow.object.is((e=>e instanceof GlideCoreMenuButton||e instanceof GlideCoreMenuLink)));const t=this.#h.indexOf(this.#y);if("ArrowUp"===e.key&&!e.metaKey){e.preventDefault();const i=this.#h.at(t-1);return void(i&&0!==t&&(this.#y.privateActive=!1,this.#a.ariaActivedescendant=i.id,i.privateActive=!0))}if("ArrowDown"===e.key&&!e.metaKey){e.preventDefault();const i=this.#h.at(t+1);return void(i&&(this.#y.privateActive=!1,this.#a.ariaActivedescendant=i.id,i.privateActive=!0))}if("ArrowUp"===e.key&&e.metaKey||"Home"===e.key||"PageUp"===e.key){e.preventDefault();const t=this.#h.at(0);return void(t&&(this.#y.privateActive=!1,this.#a.ariaActivedescendant=t.id,t.privateActive=!0))}if("ArrowDown"===e.key&&e.metaKey||"End"===e.key||"PageDown"===e.key){e.preventDefault();const t=this.#h.at(-1);return void(t&&(this.#y.privateActive=!1,this.#a.ariaActivedescendant=t.id,t.privateActive=!0))}}}#E(){owSlot(this.#s.value),ow(this.#p,ow.object.instanceOf(Element)),ow(this.#a,ow.object.instanceOf(GlideCoreMenuOptions));new MutationObserver((e=>{e.some((e=>"disabled"===e.attributeName||"aria-disabled"===e.attributeName))&&(this.open&&!this.isTargetDisabled?this.#r():this.#c())})).observe(this.#p,{attributes:!0}),this.#p.ariaHasPopup="true",this.#p.id=nanoid(),this.#p.setAttribute("aria-controls",this.#a.id),this.#a.ariaLabelledby=this.#p.id,this.open&&!this.isTargetDisabled?this.#r():this.#c()}#m(){this.isTargetDisabled?this.#c():this.#i?this.#i=!1:this.#h&&this.#h.length>0&&(this.open=!this.open)}get#h(){let e=this.#t.value?.assignedElements()?.at(0)?.children;const t=e?.[0];if(t instanceof HTMLSlotElement&&(e=t.assignedElements()),e)return[...e].filter((e=>e instanceof GlideCoreMenuLink||e instanceof GlideCoreMenuButton))}#r(){this.#C?.(),this.#p&&this.#t.value&&(this.#C=autoUpdate(this.#p,this.#t.value,(()=>{(async()=>{if(this.#p&&this.#t.value){const{x:e,y:t,placement:i}=await computePosition(this.#p,this.#t.value,{placement:this.placement,middleware:[offset({mainAxis:Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}),flip()]});this.#t.value.dataset.placement=i,Object.assign(this.#t.value.style,{left:`${e}px`,top:`${t}px`})}this.#t.value?.showPopover(),this.#a&&this.#y?.id&&(this.#a.ariaActivedescendant=this.#y.id),this.#p&&(this.#p.ariaExpanded="true")})()})))}get#p(){return this.#s.value?.assignedElements().at(0)}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreMenu.prototype,"open",null),__decorate([property({reflect:!0})],GlideCoreMenu.prototype,"placement",void 0),__decorate([property({reflect:!0})],GlideCoreMenu.prototype,"size",null),GlideCoreMenu=__decorate([customElement("glide-core-menu")],GlideCoreMenu);export default GlideCoreMenu;

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

@@ -19,7 +19,7 @@ it('throws if it does not have a default slot', async () => {
             spy();
         }
     }
-    expect(spy.called).to.be.true;
+    expect(spy.callCount).to.equal(1);
 });
 it('throws if the default slot is the incorrect type', async () => {
     await expectArgumentError(() => {
@@ -40,5 +40,5 @@ it('does not throw if the default slot only contains whitespace', async () => {
             spy();
         }
     }
-    expect(spy.notCalled).to.be.true;
+    expect(spy.callCount).to.equal(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,13 +1,15 @@
 /* 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 { 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);
 });
@@ -38,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();
 });
@@ -49,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>
@@ -92,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;
@@ -109,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;
@@ -123,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(() => {
@@ -157,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.js

@@ -2,8 +2,10 @@
 import './menu.js';
 import './menu.link.js';
 import './menu.options.js';
-import { expect, fixture, html, oneEvent } from '@open-wc/testing';
-it('dispatches a "click" event when a link is clicked', async () => {
+import { aTimeout, 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>
 
@@ -11,21 +13,209 @@ it('dispatches a "click" event when a link is clicked', async () => {
         <glide-core-menu-link label="Link"></glide-core-menu-link>
       </glide-core-menu-options>
     </glide-core-menu>`);
-    setTimeout(() => document.querySelector('glide-core-menu-link')?.click());
+    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 a "click" event when a button is clicked', async () => {
+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="Link"></glide-core-menu-button>
+        <glide-core-menu-button label="Button"></glide-core-menu-button>
       </glide-core-menu-options>
     </glide-core-menu>`);
-    setTimeout(() => document.querySelector('glide-core-menu-button')?.click());
-    const event = await oneEvent(component, 'click');
+    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.focus();
+    sendKeys({ press: 'Space' });
+    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.focus();
+    sendKeys({ press: 'Space' });
+    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.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.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);
+});
+it('does not dispatch a link "click" event when opened via click', 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 spy = sinon.spy();
+    const link = component.querySelector('glide-core-menu-link');
+    const target = component.querySelector('button');
+    link?.addEventListener('click', spy);
+    target?.click();
+    await aTimeout(0);
+    expect(spy.callCount).to.equal(0);
+});
+it('does not dispatch a button "click" event when opened via click', async () => {
+    const component = await fixture(html `<glide-core-menu>
+      <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');
+    const target = component.querySelector('button');
+    button?.addEventListener('click', spy);
+    target?.click();
+    await aTimeout(0);
+    expect(spy.callCount).to.equal(0);
+});
+it('does not dispatch a link "click" event when opened via Space', 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 spy = sinon.spy();
+    const link = component.querySelector('glide-core-menu-link');
+    link?.addEventListener('click', spy);
+    component.focus();
+    sendKeys({ press: 'Space' });
+    await aTimeout(0);
+    expect(spy.callCount).to.equal(0);
+});
+it('does not dispatch a button "click" event when opened via Space', async () => {
+    const component = await fixture(html `<glide-core-menu>
+      <button slot="target">Target</button>
+
+      <glide-core-menu-options>
+        <glide-core-menu-button label="Link"></glide-core-menu-button>
+      </glide-core-menu-options>
+    </glide-core-menu>`);
+    const spy = sinon.spy();
+    const button = component.querySelector('glide-core-menu-button');
+    button?.addEventListener('click', spy);
+    component.focus();
+    sendKeys({ press: 'Space' });
+    await aTimeout(0);
+    expect(spy.callCount).to.equal(0);
+});
+it('does not dispatch a link "click" event when opened via Enter', 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 spy = sinon.spy();
+    const link = component.querySelector('glide-core-menu-link');
+    link?.addEventListener('click', spy);
+    component.focus();
+    sendKeys({ press: 'Enter' });
+    await aTimeout(0);
+    expect(spy.callCount).to.equal(0);
+});
+it('does not dispatch a button "click" event when opened via Enter', async () => {
+    const component = await fixture(html `<glide-core-menu>
+      <button slot="target">Target</button>
+
+      <glide-core-menu-options>
+        <glide-core-menu-button label="Link"></glide-core-menu-button>
+      </glide-core-menu-options>
+    </glide-core-menu>`);
+    const spy = sinon.spy();
+    const button = component.querySelector('glide-core-menu-button');
+    button?.addEventListener('click', spy);
+    component.focus();
+    sendKeys({ press: 'Enter' });
+    await aTimeout(0);
+    expect(spy.callCount).to.equal(0);
 });

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,9 +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>
@@ -31,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 () => {
@@ -42,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>
@@ -58,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>
@@ -73,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');