@crowdstrike/glide-core 0.9.1 → 0.9.2

package/dist/input.test.form.js

@@ -1,6 +1,9 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
 import './input.js';
 import { expect, fixture, html } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+import GlideCoreInput from './input.js';
+import sinon from 'sinon';
 it('can be reset to initial value', async () => {
     const form = document.createElement('form');
     const input = await fixture(html `<glide-core-input value="value"></glide-core-input>`, {
@@ -55,3 +58,17 @@ it('has no `formData` value when it has a value but without a `name`', async ()
     const formData = new FormData(form);
     expect(formData.get('name')).to.be.null;
 });
+it('submits its form on Enter', async () => {
+    const form = document.createElement('form');
+    const component = await fixture(html `<glide-core-input value="value"></glide-core-input>`, {
+        parentNode: form,
+    });
+    const spy = sinon.spy();
+    form.addEventListener('submit', (event) => {
+        event.preventDefault();
+        spy();
+    });
+    component.focus();
+    await sendKeys({ press: 'Enter' });
+    expect(spy.callCount).to.equal(1);
+});

package/dist/label.styles.js

@@ -1,4 +1,7 @@
 import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import visuallyHidden from"./styles/visually-hidden.js";export default[css`
+    ${focusOutline(".optional-tooltip-target:focus-visible ")}
+    ${visuallyHidden(".tooltips-and-label.hidden")}
+  `,css`
     .component {
       &.horizontal {
         --column-gap: var(--glide-core-spacing-sm);
@@ -34,11 +37,11 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       column-gap: var(--glide-core-spacing-xs);
       display: flex;
 
-      /* 
-        Allows for an ellipsis on the label. See the linked comment for why it's "3ch" 
+      /*
+        Allows for an ellipsis on the label. See the linked comment for why it's "3ch"
         instead of "0".
 
-        - https://github.com/CrowdStrike/glide-core/pull/317#issuecomment-2297025365 
+        - https://github.com/CrowdStrike/glide-core/pull/317#issuecomment-2297025365
         - https://css-tricks.com/flexbox-truncated-text/#aa-the-solution-is-min-width-0-on-the-flex-child
       */
       min-inline-size: 3ch;
@@ -47,10 +50,6 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       &.left {
         justify-content: flex-end;
       }
-
-      &.hidden {
-        ${visuallyHidden};
-      }
     }
 
     .optional-tooltip {
@@ -83,10 +82,6 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
 
       display: flex;
       padding: 0;
-
-      &:focus-visible {
-        ${focusOutline};
-      }
     }
 
     .label {

package/dist/library/localize.test.js

@@ -0,0 +1,45 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement } from 'lit';
+import { LocalizeController } from './localize.js';
+import { customElement } from 'lit/decorators.js';
+import { expect, fixture, html } from '@open-wc/testing';
+import en from '../translations/en.js';
+let GlideCoreMockComponent = class GlideCoreMockComponent extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.localize = new LocalizeController(this);
+    }
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        mode: 'closed',
+    }; }
+};
+GlideCoreMockComponent = __decorate([
+    customElement('mock-component')
+], GlideCoreMockComponent);
+it('can call any term from en translation if locale is Japanese', async () => {
+    const component = await fixture(
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+    html `<mock-component></mock-component>`);
+    component.lang = 'ja';
+    expect(component.localize.lang()).to.equal('ja');
+    const keys = Object.keys(en);
+    for (const key of keys) {
+        expect(component.localize.term(key)).to.be.ok;
+    }
+});
+it('can call any term from en translation if locale is French', async () => {
+    const component = await fixture(html `<mock-component></mock-component>`);
+    component.lang = 'fr';
+    expect(component.localize.lang()).to.equal('fr');
+    const keys = Object.keys(en);
+    for (const key of keys) {
+        expect(component.localize.term(key)).to.be.ok;
+    }
+});

package/dist/menu.button.styles.js

@@ -11,6 +11,7 @@ import{css}from"lit";export default[css`
       inline-size: 100%;
       padding-block: var(--padding-block);
       padding-inline: var(--padding-inline);
+      transition: background-color 100ms ease-in-out;
       user-select: none;
 
       &.active {

package/dist/menu.js

@@ -1 +1 @@
-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;
+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&&(this.#y.privateActive=!1,e.target.privateActive=!0,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.link.styles.js

@@ -13,6 +13,7 @@ import{css}from"lit";export default[css`
       padding-block: var(--padding-block);
       padding-inline: var(--padding-inline);
       text-decoration: none;
+      transition: background-color 100ms ease-in-out;
       user-select: none;
 
       &.active {

package/dist/menu.styles.js

@@ -1,4 +1,6 @@
-import{css}from"lit";export default[css`
+import{css}from"lit";import menuOpeningAnimation from"./styles/menu-opening-animation.js";export default[css`
+    ${menuOpeningAnimation(".default-slot:popover-open")}
+  `,css`
     :host {
       /* Contains elements with "padding", "margin", and "width". Inline by default. */
       display: inline-block;

package/dist/menu.test.events.js

@@ -2,7 +2,7 @@
 import './menu.js';
 import './menu.link.js';
 import './menu.options.js';
-import { aTimeout, assert, expect, fixture, html, oneEvent, } from '@open-wc/testing';
+import { assert, expect, fixture, html, oneEvent } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import sinon from 'sinon';
 it('dispatches one link "click" event when a link is selected via click', async () => {
@@ -123,99 +123,3 @@ it('dispatches one button "click" event when a button is selected via Enter', as
     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.js

@@ -69,7 +69,7 @@ it('remains open when an option is focused', async () => {
     expect(component.open).to.be.true;
     expect(defaultSlot?.checkVisibility()).to.be.true;
 });
-it('sets the focused option as active', async () => {
+it('sets an inactive option as active when focused', async () => {
     const component = await fixture(html `<glide-core-menu open>
       <button slot="target">Target</button>
 
@@ -81,12 +81,35 @@ it('sets the focused option as active', async () => {
     // Wait for Floating UI.
     await aTimeout(0);
     component.focus();
-    const target = component.querySelector('glide-core-menu-button');
+    const button = component.querySelector('glide-core-menu-button');
     const link = component.querySelector('glide-core-menu-link');
     const options = component.querySelector('glide-core-menu-options');
     link?.focus();
     await elementUpdated(component);
-    expect(target?.privateActive).to.be.false;
     expect(link?.privateActive).to.be.true;
+    expect(button?.privateActive).to.be.false;
     expect(options?.getAttribute('aria-activedescendant')).to.equal(link?.id);
 });
+// Kind of an odd test. There's a comment in `#onDefaultSlotFocusin` that
+// explains it.
+it('sets an already active option as active when focused', async () => {
+    const component = await fixture(html `<glide-core-menu open>
+      <button slot="target">Target</button>
+
+      <glide-core-menu-options>
+        <glide-core-menu-button label="Button"></glide-core-menu-button>
+        <glide-core-menu-link label="Link"></glide-core-menu-link>
+      </glide-core-menu-options>
+    </glide-core-menu>`);
+    // Wait for Floating UI.
+    await aTimeout(0);
+    component.focus();
+    const button = component.querySelector('glide-core-menu-button');
+    const link = component.querySelector('glide-core-menu-link');
+    const options = component.querySelector('glide-core-menu-options');
+    button?.focus();
+    await elementUpdated(component);
+    expect(button?.privateActive).to.be.true;
+    expect(link?.privateActive).to.be.false;
+    expect(options?.getAttribute('aria-activedescendant')).to.equal(button?.id);
+});

package/dist/menu.test.interactions.js

@@ -712,6 +712,7 @@ it('activates the first option on Meta + ArrowUp', async () => {
     links[1].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
     await sendKeys({ down: 'Meta' });
     await sendKeys({ press: 'ArrowUp' });
+    await sendKeys({ up: 'Meta' });
     expect(links[0].privateActive).to.be.true;
     expect(links[1].privateActive).to.be.false;
     expect(options?.getAttribute('aria-activedescendant')).to.equal(links[0].id);
@@ -872,6 +873,7 @@ it('does not wrap on Meta + ArrowUp', async () => {
     await aTimeout(0);
     await sendKeys({ down: 'Meta' });
     await sendKeys({ press: 'ArrowUp' });
+    await sendKeys({ up: 'Meta' });
     const link = component.querySelector('glide-core-menu-link');
     expect(link?.privateActive).to.be.true;
 });
@@ -910,5 +912,6 @@ it('does not wrap on ArrowDown', async () => {
     options[1].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
     await sendKeys({ down: 'Meta' });
     await sendKeys({ press: 'ArrowDown' });
+    await sendKeys({ up: 'Meta' });
     expect(options[1].privateActive).to.be.true;
 });

package/dist/modal.d.ts

@@ -10,10 +10,6 @@ declare global {
  *
  * @event close - Emitted when the Modal closes.
  *
- * @function showModal - A method on the `glide-core-modal` component to open the Modal programmatically.
- *
- * @function close - A method on the `glide-core-modal` component to close the Modal programmatically.
- *
  * @slot - The content of the modal.
  *
  * @slot header-actions - A slot for placing additional header actions. These are co-located with the close button.
@@ -36,9 +32,6 @@ export default class GlideCoreModal extends LitElement {
     showBackButton: boolean;
     /** Fixed-size options for the Modal. */
     size?: 'small' | 'medium' | 'large' | 'xlarge';
-    /**
-     * Event called by consumers to programmatically close the Modal.
-     */
     close(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;

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

@@ -8,28 +8,28 @@ 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();
+    const component = await fixture(html `<glide-core-modal-icon-button>Test</glide-core-modal-icon-button>`);
+    await expect(component).to.be.accessible();
 });
 it('renders and sets default attributes', async () => {
-    const element = await fixture(html `
+    const component = 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(component).to.be.ok;
+    const buttonElement = component.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"
+    const component = 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');
+    const buttonElement = component.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');
+    const component = await fixture(html `<glide-core-modal-icon-button>Test</glide-core-modal-icon-button>`);
+    const buttonElement = component.shadowRoot?.querySelector('glide-core-icon-button');
     expect(buttonElement).to.have.attribute('label', '');
 });
 it('throws if it does not have a default slot', async () => {

package/dist/modal.styles.js

@@ -1,4 +1,6 @@
 import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
+    ${focusOutline(".body:focus-visible")}
+  `,css`
     /* When browser support improves, we can have nicer animations with https://caniuse.com/mdn-css_at-rules_starting-style */
     @keyframes backdrop-fade-in {
       from {
@@ -130,10 +132,6 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       &:focus {
         outline: none;
       }
-
-      &:focus-visible {
-        ${focusOutline};
-      }
     }
 
     .footer {

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

@@ -9,41 +9,41 @@ it('registers', async () => {
     expect(window.customElements.get('glide-core-modal-tertiary-icon')).to.equal(GlideCoreModalTertiaryIcon);
 });
 it('is accessible', async () => {
-    const element = await fixture(html `<glide-core-modal-tertiary-icon>Test</glide-core-modal-tertiary-icon>`);
-    await expect(element).to.be.accessible();
+    const component = await fixture(html `<glide-core-modal-tertiary-icon>Test</glide-core-modal-tertiary-icon>`);
+    await expect(component).to.be.accessible();
 });
 it('renders and sets default attributes', async () => {
-    const element = await fixture(html `
+    const component = await fixture(html `
     <glide-core-modal-tertiary-icon>Test</glide-core-modal-tertiary-icon>
   `);
-    expect(element).to.be.ok;
-    const spanTag = element.shadowRoot?.querySelector('span');
+    expect(component).to.be.ok;
+    const spanTag = component.shadowRoot?.querySelector('span');
     expect(spanTag?.getAttribute('tabindex')).to.equal('0');
-    const tooltip = element.shadowRoot?.querySelector('glide-core-tooltip');
+    const tooltip = component.shadowRoot?.querySelector('glide-core-tooltip');
     expect(tooltip).to.not.be.null;
 });
 it('adds an accessible label when given', async () => {
-    const element = await fixture(html `<glide-core-modal-tertiary-icon label="test-label"
+    const component = await fixture(html `<glide-core-modal-tertiary-icon label="test-label"
       >Test</glide-core-modal-tertiary-icon
     >`);
-    const spanElement = element.shadowRoot?.querySelector('span');
+    const spanElement = component.shadowRoot?.querySelector('span');
     expect(spanElement).to.have.attribute('aria-label', 'test-label');
 });
 it('does not add an acceessible label when not given', async () => {
-    const element = await fixture(html `<glide-core-modal-tertiary-icon>Test</glide-core-modal-tertiary-icon>`);
-    const spanElement = element.shadowRoot?.querySelector('span');
+    const component = await fixture(html `<glide-core-modal-tertiary-icon>Test</glide-core-modal-tertiary-icon>`);
+    const spanElement = component.shadowRoot?.querySelector('span');
     expect(spanElement).to.not.have.attribute('aria-label');
 });
 it('sets the tooltip placement when attribute "tooltip-placement" is given', async () => {
-    const element = await fixture(html `<glide-core-modal-tertiary-icon tooltip-placement="right"
+    const component = await fixture(html `<glide-core-modal-tertiary-icon tooltip-placement="right"
       >Test</glide-core-modal-tertiary-icon
     >`);
-    const toolTip = element.shadowRoot?.querySelector('glide-core-tooltip');
+    const toolTip = component.shadowRoot?.querySelector('glide-core-tooltip');
     expect(toolTip).to.have.attribute('placement', 'right');
 });
 it('sets the tooltip placement to "bottom" when attribute "tooltip-placement" is not given', async () => {
-    const element = await fixture(html `<glide-core-modal-tertiary-icon>Test</glide-core-modal-tertiary-icon>`);
-    const toolTip = element.shadowRoot?.querySelector('glide-core-tooltip');
+    const component = await fixture(html `<glide-core-modal-tertiary-icon>Test</glide-core-modal-tertiary-icon>`);
+    const toolTip = component.shadowRoot?.querySelector('glide-core-tooltip');
     expect(toolTip).to.have.attribute('placement', 'bottom');
 });
 it('throws if it does not have a default slot', async () => {

package/dist/modal.test.accessibility.js

@@ -3,47 +3,36 @@ import { expect, fixture, html } from '@open-wc/testing';
 import GlideCoreModal from './modal.js';
 GlideCoreModal.shadowRootOptions.mode = 'open';
 it('is accessible', async () => {
-    const element = await fixture(html `<glide-core-modal label="Modal title">
-      Modal Content
-    </glide-core-modal>`);
-    await expect(element).to.be.accessible();
+    const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
+    await expect(component).to.be.accessible();
 });
 it('focuses the dialog upon opening', async () => {
-    const element = await fixture(html `<glide-core-modal label="Modal title">
-      Modal Content
-    </glide-core-modal>`);
-    element.showModal();
-    const dialogElement = element.shadowRoot?.querySelector('dialog');
-    expect(element.shadowRoot?.activeElement).to.equal(dialogElement);
+    const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
+    component.showModal();
+    const dialogElement = component.shadowRoot?.querySelector('dialog');
+    expect(component.shadowRoot?.activeElement).to.equal(dialogElement);
 });
 it('sets the tabindex on the dialog to "-1"', async () => {
-    const element = await fixture(html `<glide-core-modal label="Modal title">
-      Modal Content
-    </glide-core-modal>`);
-    element.showModal();
-    const dialogElement = element.shadowRoot?.querySelector('dialog');
+    const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
+    component.showModal();
+    const dialogElement = component.shadowRoot?.querySelector('dialog');
     expect(dialogElement?.getAttribute('tabindex')).to.equal('-1');
 });
 it('sets the "toolbar" role on the header-actions section', async () => {
-    const element = await fixture(html `<glide-core-modal label="Modal title">
-      Modal Content
-    </glide-core-modal>`);
-    element.showModal();
-    const toolbar = element.shadowRoot?.querySelector('[role="toolbar"');
+    const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
+    component.showModal();
+    const toolbar = component.shadowRoot?.querySelector('[role="toolbar"');
     expect(toolbar).to.be.ok;
 });
 it('sets proper aria attributes and roles on the article', async () => {
-    const element = await fixture(html `<glide-core-modal label="Modal title">
-      Modal Content
-    </glide-core-modal>`);
-    element.showModal();
-    const content = element.shadowRoot?.querySelector('[role="region"');
+    const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
+    component.showModal();
+    const content = component.shadowRoot?.querySelector('[role="region"');
     expect(content).to.be.ok;
     expect(content?.tagName).to.equal('ARTICLE');
     expect(content?.getAttribute('aria-labelledby')).to.equal('heading');
     expect(content?.getAttribute('tabindex')).to.equal('0');
-    // Verify the aria-labelledby id attribute is found
-    const label = element.shadowRoot?.querySelector('#heading');
+    const label = component.shadowRoot?.querySelector('#heading');
     expect(label).to.be.ok;
     expect(label?.tagName).to.equal('H2');
 });