@crowdstrike/glide-core 0.9.6 → 0.11.0

package/dist/label.test.basics.js

@@ -13,9 +13,9 @@ it('has defaults', async () => {
       <input id="input" slot="control" />
     </glide-core-private-label>`);
     expect(component.getAttribute('error')).to.equal(null);
-    expect(component.error).to.equal(false);
+    expect(component.error).to.be.false;
     expect(component.getAttribute('hide')).to.equal(null);
-    expect(component.hide).to.equal(false);
+    expect(component.hide).to.be.false;
     expect(component.getAttribute('orientation')).to.equal('horizontal');
     expect(component.orientation).to.equal('horizontal');
     expect(component.hasAttribute('required')).to.be.false;
@@ -68,7 +68,7 @@ it('can be required', async () => {
       <input id="input" slot="control" />
     </glide-core-private-label>`);
     expect(component.hasAttribute('required')).to.be.true;
-    expect(component.required).to.equal(true);
+    expect(component.required).to.be.true;
     const label = component.shadowRoot?.querySelector('[data-test="label"]');
     expect(label?.textContent?.includes('*')).to.be.true;
 });
@@ -78,7 +78,7 @@ it('can have an `error`', async () => {
       <input id="input" slot="control" />
     </glide-core-private-label>`);
     expect(component.hasAttribute('error')).to.be.true;
-    expect(component.error).to.equal(true);
+    expect(component.error).to.be.true;
 });
 it('places the tooltip on the bottom when horizontal', async () => {
     const component = await fixture(html `<glide-core-private-label>

package/dist/library/ow.js

@@ -1 +1 @@
-import ow,{}from"ow";const isDevelopment=window.location.host.startsWith("localhost")||window.location.host.startsWith("127.0.0.1");export function owSlot(e){isDevelopment&&(ow(e,ow.object.is((e=>e instanceof HTMLSlotElement))),ow(e.assignedNodes().length,ow.number.is((e=>e>0)).message(e.name?`Expected a "${e.name}" slot.`:"Expected a default slot.")))}export function owSlotType(e,o=[]){if(isDevelopment&&(ow(e,ow.object.is((e=>e instanceof HTMLSlotElement))),0!==e.assignedNodes().length&&o.length>0)){const t=e.assignedNodes({flatten:!0}).filter((e=>!!(e instanceof Text&&o.includes(Text))||!(e instanceof Text)));ow(t.length,ow.number.is((e=>e>0)).message(`Expected a slotted node that extends ${o.map((({name:e})=>e)).join(" or ")}.`));for(const e of t){const t=`Expected slotted node to extend ${o.map((({name:e})=>e)).join(" or ")}. Extends ${e.constructor.name} instead.`,n=o.some((o=>e instanceof o));ow(n,ow.boolean.true.message(t))}}}const shim=new Proxy((()=>{}),{get:()=>shim,apply:()=>shim}),owOrShim=isDevelopment?ow:shim;export default owOrShim;
+import ow,{}from"ow";const isDevelopment=window.location.host.startsWith("localhost")||window.location.host.startsWith("127.0.0.1");export function owSlot(e){isDevelopment&&(ow(e,ow.object.is((e=>e instanceof HTMLSlotElement))),ow(e.assignedNodes().length,ow.number.is((e=>e>0)).message(e.name?`Expected a "${e.name}" slot.`:"Expected a default slot.")))}export function owSlotType(e,o=[]){if(isDevelopment&&(ow(e,ow.object.is((e=>e instanceof HTMLSlotElement))),0!==e.assignedNodes().length&&o.length>0)){const t=e.assignedNodes({flatten:!0}).filter((e=>!!(e instanceof Text&&o.includes(Text))||!(e instanceof Text)));ow(t.length,ow.number.is((e=>e>0)).message(`Expected a slotted element that extends ${o.map((({name:e})=>e)).join(" or ")}.`));for(const e of t){const t=`Expected slotted element to extend ${o.map((({name:e})=>e)).join(" or ")}. Extends ${e.constructor.name} instead.`,n=o.some((o=>e instanceof o));ow(n,ow.boolean.true.message(t))}}}const shim=new Proxy((()=>{}),{get:()=>shim,apply:()=>shim}),owOrShim=isDevelopment?ow:shim;export default owOrShim;

package/dist/menu.button.d.ts

@@ -5,8 +5,6 @@ declare global {
     }
 }
 /**
- * @description A button for use within a <glide-core-menu>.
- *
  * @slot icon - An icon.
  */
 export default class GlideCoreMenuButton extends LitElement {

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

@@ -11,11 +11,11 @@ it('has defaults', async () => {
     // typechecked, which means supplying required attributes up front.
     const component = await fixture(html `<glide-core-menu-button label="Label"></glide-core-menu-button>`);
     // Not reflected. So no attribute assertions are necessary.
-    expect(component.privateActive).to.equal(false);
+    expect(component.privateActive).to.be.false;
 });
 it('can have a label', async () => {
-    const button = await fixture(html `<glide-core-menu-button label="Label"></glide-core-menu-button>`);
-    expect(button.shadowRoot?.textContent?.trim()).to.equal('Label');
+    const component = await fixture(html `<glide-core-menu-button label="Label"></glide-core-menu-button>`);
+    expect(component.shadowRoot?.textContent?.trim()).to.equal('Label');
 });
 it('can have an icon', async () => {
     const component = await fixture(html `<glide-core-menu-button label="Label">

package/dist/menu.d.ts

@@ -6,9 +6,7 @@ declare global {
     }
 }
 /**
- * @description A basic menu.
- *
- * @slot - `<glide-core-menu-options>`.
+ * @slot - One of `<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 {
@@ -24,7 +22,6 @@ export default class GlideCoreMenu extends LitElement {
     createRenderRoot(): ShadowRoot;
     disconnectedCallback(): void;
     firstUpdated(): void;
-    focus(options?: FocusOptions): void;
     private get isTargetDisabled();
     render(): import("lit").TemplateResult<1>;
 }

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&&(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;
+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=!1,this.#s="large",this.#l=createRef(),this.#a=()=>{this.#n?this.#n=!1:(this.open=!1,this.#r&&(this.#r.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.#c():this.#h()}get size(){return this.#s}set size(e){this.#s=e,this.#r&&(this.#r.privateSize=e)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.#a,{capture:!0})}createRenderRoot(){return this.#d=super.createRenderRoot(),this.#d}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.#a,{capture:!0})}firstUpdated(){ow(this.#r,ow.object.instanceOf(GlideCoreMenuOptions)),owSlot(this.#t.value),owSlot(this.#l.value),owSlotType(this.#t.value,[GlideCoreMenuOptions]),this.#t.value.popover="manual";const e=this.#p?.at(0);this.open&&e&&!this.isTargetDisabled&&(e.privateActive=!0,this.#c()),this.#l.value.addEventListener("mouseup",(()=>{this.#n=!0}))}get isTargetDisabled(){const e=this.#u&&"disabled"in this.#u&&this.#u.disabled,t=this.#u&&"true"===this.#u.ariaDisabled;return Boolean(e)||Boolean(t)}render(){return html`<div class="component" @focusout="${this.#m}" ${ref(this.#e)}><slot class="target-slot" name="target" @click="${this.#f}" @keydown="${this.#E}" @slotchange="${this.#v}" ${ref(this.#l)}></slot><slot class="default-slot" @click="${this.#g}" @focusin="${this.#S}" @keydown="${this.#E}" @mouseover="${this.#w}" @slotchange="${this.#C}" ${ref(this.#t)}></slot></div>`}#y;#e;#t;#i;#o;#n;#d;#s;#l;get#R(){return this.#p?.find((({privateActive:e})=>e))}#a;#k(e){this.#u&&"focus"in this.#u&&this.#u?.focus(e)}#h(){this.#y?.(),this.#r&&(this.#r.ariaActivedescendant=""),this.#u&&(this.#u.ariaExpanded="false"),this.#t.value?.hidePopover()}get#r(){const e=this.#t.value?.assignedElements().at(0);return e instanceof GlideCoreMenuOptions?e:null}#C(){ow(this.#r,ow.object.instanceOf(GlideCoreMenuOptions)),owSlot(this.#t.value),owSlotType(this.#t.value,[GlideCoreMenuOptions]);const e=this.#p?.at(0);e&&(e.privateActive=!0),this.#r.privateSize=this.size}#g(){this.open=!1}#S(e){(e.target instanceof GlideCoreMenuButton||e.target instanceof GlideCoreMenuLink)&&this.#R&&this.#r&&(this.#R.privateActive=!1,e.target.privateActive=!0,this.#r.ariaActivedescendant=e.target.id)}#w(e){if(e.target instanceof GlideCoreMenuLink||e.target instanceof GlideCoreMenuButton){if(this.#p)for(const t of this.#p)t.privateActive=t===e.target;this.#r&&(this.#r.ariaActivedescendant=e.target.id)}}#m(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)}#E(e){if(ow(this.#r,ow.object.instanceOf(GlideCoreMenuOptions)),[" ","Enter"].includes(e.key)&&this.open)return this.open=!1,this.#k(),this.#R?.click(),void(this.#i=!0);if(["Escape"].includes(e.key)&&this.open)return this.open=!1,void this.#k();if(["ArrowUp","ArrowDown"].includes(e.key)&&!this.open&&this.#R)return e.preventDefault(),this.open=!0,void(this.#r.ariaActivedescendant=this.#R.id);if(this.open){ow(this.#p,ow.array),ow(this.#r,ow.object.instanceOf(GlideCoreMenuOptions)),ow(this.#R,ow.object.is((e=>e instanceof GlideCoreMenuButton||e instanceof GlideCoreMenuLink)));const t=this.#p.indexOf(this.#R);if("ArrowUp"===e.key&&!e.metaKey){e.preventDefault();const i=this.#p.at(t-1);return void(i&&0!==t&&(this.#R.privateActive=!1,this.#r.ariaActivedescendant=i.id,i.privateActive=!0))}if("ArrowDown"===e.key&&!e.metaKey){e.preventDefault();const i=this.#p.at(t+1);return void(i&&(this.#R.privateActive=!1,this.#r.ariaActivedescendant=i.id,i.privateActive=!0))}if("ArrowUp"===e.key&&e.metaKey||"Home"===e.key||"PageUp"===e.key){e.preventDefault();const t=this.#p.at(0);return void(t&&(this.#R.privateActive=!1,this.#r.ariaActivedescendant=t.id,t.privateActive=!0))}if("ArrowDown"===e.key&&e.metaKey||"End"===e.key||"PageDown"===e.key){e.preventDefault();const t=this.#p.at(-1);return void(t&&(this.#R.privateActive=!1,this.#r.ariaActivedescendant=t.id,t.privateActive=!0))}}}#v(){owSlot(this.#l.value),ow(this.#u,ow.object.instanceOf(Element)),ow(this.#r,ow.object.instanceOf(GlideCoreMenuOptions));new MutationObserver((()=>{this.open&&!this.isTargetDisabled?this.#c():this.#h()})).observe(this.#u,{attributes:!0,attributeFilter:["aria-disabled","disabled"]}),this.#u.ariaHasPopup="true",this.#u.id=nanoid(),this.#u.setAttribute("aria-controls",this.#r.id),this.#r.ariaLabelledby=this.#u.id,this.open&&!this.isTargetDisabled?this.#c():this.#h()}#f(){this.isTargetDisabled?this.#h():this.#i?this.#i=!1:this.#p&&this.#p.length>0&&(this.open=!this.open)}get#p(){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))}#c(){this.#y?.(),this.#u&&this.#t.value&&(this.#y=autoUpdate(this.#u,this.#t.value,(()=>{(async()=>{if(this.#u&&this.#t.value){const{x:e,y:t,placement:i}=await computePosition(this.#u,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.#r&&this.#R?.id&&(this.#r.ariaActivedescendant=this.#R.id),this.#u&&(this.#u.ariaExpanded="true")})()})))}get#u(){return this.#l.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.d.ts

@@ -5,8 +5,6 @@ declare global {
     }
 }
 /**
- * @description A link for use within a <glide-core-menu>.
- *
  * @slot icon - An icon.
  */
 export default class GlideCoreMenuLink extends LitElement {
@@ -16,6 +14,7 @@ export default class GlideCoreMenuLink extends LitElement {
     label?: string;
     url?: string;
     privateActive: boolean;
+    click(): void;
     connectedCallback(): void;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/menu.link.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,i,o){var r,n=arguments.length,l=n<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 s=e.length-1;s>=0;s--)(r=e[s])&&(l=(n<3?r(l):n>3?r(t,i,l):r(t,i))||l);return n>3&&l&&Object.defineProperty(t,i,l),l};import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{nanoid}from"nanoid";import styles from"./menu.link.styles.js";let GlideCoreMenuLink=class GlideCoreMenuLink extends LitElement{constructor(){super(...arguments),this.privateActive=!1,this.#e=nanoid()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}connectedCallback(){super.connectedCallback(),this.id=this.#e,this.role="menuitem",this.tabIndex=-1}render(){return html`<a class="${classMap({component:!0,active:this.privateActive})}" data-test="component" href="${ifDefined(this.url)}"><slot name="icon"></slot>${this.label}</a>`}#e};__decorate([property({reflect:!0})],GlideCoreMenuLink.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreMenuLink.prototype,"url",void 0),__decorate([property({type:Boolean})],GlideCoreMenuLink.prototype,"privateActive",void 0),GlideCoreMenuLink=__decorate([customElement("glide-core-menu-link")],GlideCoreMenuLink);export default GlideCoreMenuLink;
+var __decorate=this&&this.__decorate||function(e,t,i,o){var r,n=arguments.length,l=n<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 s=e.length-1;s>=0;s--)(r=e[s])&&(l=(n<3?r(l):n>3?r(t,i,l):r(t,i))||l);return n>3&&l&&Object.defineProperty(t,i,l),l};import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{nanoid}from"nanoid";import styles from"./menu.link.styles.js";let GlideCoreMenuLink=class GlideCoreMenuLink extends LitElement{constructor(){super(...arguments),this.privateActive=!1,this.#e=createRef(),this.#t=nanoid()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}click(){this.#e.value?.click()}connectedCallback(){super.connectedCallback(),this.id=this.#t,this.role="menuitem",this.tabIndex=-1}render(){return html`<a class="${classMap({component:!0,active:this.privateActive})}" data-test="component" href="${ifDefined(this.url)}" ${ref(this.#e)}><slot name="icon"></slot>${this.label}</a>`}#e;#t};__decorate([property({reflect:!0})],GlideCoreMenuLink.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreMenuLink.prototype,"url",void 0),__decorate([property({type:Boolean})],GlideCoreMenuLink.prototype,"privateActive",void 0),GlideCoreMenuLink=__decorate([customElement("glide-core-menu-link")],GlideCoreMenuLink);export default GlideCoreMenuLink;

package/dist/menu.options.d.ts

@@ -5,8 +5,6 @@ declare global {
     }
 }
 /**
- * @description An options container for use within a <glide-core-menu>.
- *
  * @slot - One or more of <glide-core-menu-link> or <glide-core-menu-button>.
  */
 export default class GlideCoreMenuOptions extends LitElement {

package/dist/menu.test.events.js

@@ -55,8 +55,8 @@ it('dispatches one link "click" event when a link is selected via Space', async
     const link = component.querySelector('glide-core-menu-link');
     assert(link);
     link.addEventListener('click', spy);
-    component.focus();
-    sendKeys({ press: 'Space' });
+    component.querySelector('button')?.focus();
+    sendKeys({ press: ' ' });
     const event = await oneEvent(link, 'click');
     expect(event instanceof PointerEvent).to.be.true;
     expect(event.bubbles).to.be.true;
@@ -75,8 +75,8 @@ it('dispatches one button "click" event when a button is selected via Space', as
     const button = component.querySelector('glide-core-menu-button');
     assert(button);
     button.addEventListener('click', spy);
-    component.focus();
-    sendKeys({ press: 'Space' });
+    component.querySelector('button')?.focus();
+    sendKeys({ press: ' ' });
     const event = await oneEvent(button, 'click');
     expect(event instanceof PointerEvent).to.be.true;
     expect(event.bubbles).to.be.true;
@@ -95,7 +95,7 @@ it('dispatches one link "click" event when a link is selected via Enter', async
     const link = component.querySelector('glide-core-menu-link');
     assert(link);
     link.addEventListener('click', spy);
-    component.focus();
+    component.querySelector('button')?.focus();
     sendKeys({ press: 'Enter' });
     const event = await oneEvent(link, 'click');
     expect(event instanceof PointerEvent).to.be.true;
@@ -115,7 +115,7 @@ it('dispatches one button "click" event when a button is selected via Enter', as
     const button = component.querySelector('glide-core-menu-button');
     assert(button);
     button.addEventListener('click', spy);
-    component.focus();
+    component.querySelector('button')?.focus();
     sendKeys({ press: 'Enter' });
     const event = await oneEvent(button, 'click');
     expect(event instanceof PointerEvent).to.be.true;

package/dist/menu.test.focus.js

@@ -5,19 +5,6 @@ import { aTimeout, assert, elementUpdated, expect, fixture, html, } from '@open-
 import { sendKeys } from '@web/test-runner-commands';
 import GlideCoreMenu from './menu.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>
@@ -26,7 +13,7 @@ it('closes when it loses focus', async () => {
         <glide-core-menu-link label="Link"></glide-core-menu-link>
       </glide-core-menu-options>
     </glide-core-menu>`);
-    component.focus();
+    component.querySelector('button')?.focus();
     await sendKeys({ press: 'Tab' });
     const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
     const options = component.querySelector('glide-core-menu-options');
@@ -44,7 +31,7 @@ it('remains open when the options component is focused', async () => {
     </glide-core-menu>`);
     // Wait for Floating UI.
     await aTimeout(0);
-    component.focus();
+    component.querySelector('button')?.focus();
     const options = component.querySelector('glide-core-menu-options');
     const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
     options?.focus();
@@ -61,7 +48,7 @@ it('remains open when an option is focused', async () => {
     </glide-core-menu>`);
     // Wait for Floating UI.
     await aTimeout(0);
-    component.focus();
+    component.querySelector('button')?.focus();
     const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
     const option = component.querySelector('glide-core-menu-link');
     assert(option);
@@ -80,7 +67,7 @@ it('sets an inactive option as active when focused', async () => {
     </glide-core-menu>`);
     // Wait for Floating UI.
     await aTimeout(0);
-    component.focus();
+    component.querySelector('button')?.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');
@@ -103,7 +90,7 @@ it('sets an already active option as active when focused', async () => {
     </glide-core-menu>`);
     // Wait for Floating UI.
     await aTimeout(0);
-    component.focus();
+    component.querySelector('button')?.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');

package/dist/menu.test.interactions.js

@@ -11,6 +11,7 @@ import { LitElement } from 'lit';
 import { aTimeout, assert, elementUpdated, expect, fixture, html, } from '@open-wc/testing';
 import { customElement } from 'lit/decorators.js';
 import { sendKeys } from '@web/test-runner-commands';
+import { sendMouse } from '@web/test-runner-commands';
 import GlideCoreMenu from './menu.js';
 let GlideCoreNestedSlot = class GlideCoreNestedSlot extends LitElement {
     static { this.shadowRootOptions = {
@@ -30,8 +31,27 @@ let GlideCoreNestedSlot = class GlideCoreNestedSlot extends LitElement {
 GlideCoreNestedSlot = __decorate([
     customElement('glide-core-nested-slot')
 ], GlideCoreNestedSlot);
+let GlideCoreMenuInAnotherComponent = class GlideCoreMenuInAnotherComponent extends LitElement {
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        mode: 'closed',
+    }; }
+    render() {
+        return 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>`;
+    }
+};
+GlideCoreMenuInAnotherComponent = __decorate([
+    customElement('glide-core-menu-in-another-component')
+], GlideCoreMenuInAnotherComponent);
 GlideCoreMenu.shadowRootOptions.mode = 'open';
 GlideCoreNestedSlot.shadowRootOptions.mode = 'open';
+GlideCoreMenuInAnotherComponent.shadowRootOptions.mode = 'open';
 it('opens on click', async () => {
     const component = await fixture(html `<glide-core-menu>
       <button slot="target">Target</button>
@@ -377,19 +397,23 @@ it('sets `privateSize` on the options component when `size` is changed programma
     const options = component.querySelector('glide-core-menu-options');
     expect(options?.privateSize).to.equal('small');
 });
-it('closes when clicked', 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.querySelector('button')?.click();
-    const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
-    const options = component.querySelector('glide-core-menu-options');
-    const target = component.querySelector('button');
-    expect(component.open).to.be.false;
+it('closes when its target clicked', async () => {
+    const component = await fixture(html `<glide-core-menu-in-another-component></glide-core-menu-in-another-component>`);
+    // Wait for it to open.
+    await aTimeout(0);
+    const target = component.shadowRoot?.querySelector('button');
+    assert(target);
+    const { x, y } = target.getBoundingClientRect();
+    // Calling `click()` won't do because Menu relies on a "mouseup" event to
+    // decide if it should close.
+    await sendMouse({
+        type: 'click',
+        position: [Math.ceil(x), Math.ceil(y)],
+    });
+    const menu = component.shadowRoot?.querySelector('glide-core-menu');
+    const defaultSlot = menu?.shadowRoot?.querySelector('slot:not([name])');
+    const options = menu?.querySelector('glide-core-menu-options');
+    expect(menu?.open).to.be.false;
     expect(defaultSlot?.checkVisibility()).to.be.false;
     expect(options?.getAttribute('aria-activedescendant')).to.equal('');
     expect(target?.ariaExpanded).to.equal('false');
@@ -422,7 +446,7 @@ it('closes on Escape', async () => {
     </glide-core-menu>`);
     // Wait for it to open
     await aTimeout(0);
-    component.focus();
+    component.querySelector('button')?.focus();
     await sendKeys({ press: 'Escape' });
     const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
     const options = component.querySelector('glide-core-menu-options');
@@ -457,7 +481,7 @@ it('closes when an option is selected via Enter', async () => {
         <glide-core-menu-link label="Link"></glide-core-menu-link>
       </glide-core-menu-options>
     </glide-core-menu>`);
-    component.focus();
+    component.querySelector('button')?.focus();
     component
         .querySelector('glide-core-menu-link')
         ?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
@@ -478,7 +502,7 @@ it('closes when an option is selected via Space', async () => {
         <glide-core-menu-link label="Link"></glide-core-menu-link>
       </glide-core-menu-options>
     </glide-core-menu>`);
-    component.focus();
+    component.querySelector('button')?.focus();
     await sendKeys({ press: ' ' });
     const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
     const options = component.querySelector('glide-core-menu-options');
@@ -617,7 +641,7 @@ it('activates the next option on ArrowDown', async () => {
   `);
     // Wait for Floating UI.
     await aTimeout(0);
-    component.focus();
+    component.querySelector('button')?.focus();
     const links = component.querySelectorAll('glide-core-menu-link');
     const options = component.querySelector('glide-core-menu-options');
     links[1].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
@@ -640,7 +664,7 @@ it('activates the previous option on ArrowUp', async () => {
   `);
     // Wait for Floating UI.
     await aTimeout(0);
-    component.focus();
+    component.querySelector('button')?.focus();
     const links = component.querySelectorAll('glide-core-menu-link');
     const options = component.querySelector('glide-core-menu-options');
     links[1].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
@@ -662,7 +686,7 @@ it('activates the first option on Home', async () => {
   `);
     // Wait for Floating UI.
     await aTimeout(0);
-    component.focus();
+    component.querySelector('button')?.focus();
     const links = component.querySelectorAll('glide-core-menu-link');
     const options = component.querySelector('glide-core-menu-options');
     links[1].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
@@ -684,7 +708,7 @@ it('activates the first option on PageUp', async () => {
   `);
     // Wait for Floating UI.
     await aTimeout(0);
-    component.focus();
+    component.querySelector('button')?.focus();
     const links = component.querySelectorAll('glide-core-menu-link');
     const options = component.querySelector('glide-core-menu-options');
     links[1].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
@@ -706,7 +730,7 @@ it('activates the first option on Meta + ArrowUp', async () => {
   `);
     // Wait for Floating UI.
     await aTimeout(0);
-    component.focus();
+    component.querySelector('button')?.focus();
     const links = component.querySelectorAll('glide-core-menu-link');
     const options = component.querySelector('glide-core-menu-options');
     links[1].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
@@ -730,7 +754,7 @@ it('activates the last option on End', async () => {
   `);
     // Wait for Floating UI.
     await aTimeout(0);
-    component.focus();
+    component.querySelector('button')?.focus();
     await sendKeys({ press: 'End' });
     const links = component.querySelectorAll('glide-core-menu-link');
     const options = component.querySelector('glide-core-menu-options');
@@ -752,7 +776,7 @@ it('activates the last option on PageDown', async () => {
     component.querySelector('button')?.click();
     // Wait for Floating UI.
     await aTimeout(0);
-    component.focus();
+    component.querySelector('button')?.focus();
     const links = component.querySelectorAll('glide-core-menu-link');
     const options = component.querySelector('glide-core-menu-options');
     links[0].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
@@ -774,7 +798,7 @@ it('activates the last option on Meta + ArrowDown', async () => {
   `);
     // Wait for Floating UI.
     await aTimeout(0);
-    component.focus();
+    component.querySelector('button')?.focus();
     const links = component.querySelectorAll('glide-core-menu-link');
     const options = component.querySelector('glide-core-menu-options');
     links[0].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));

package/dist/modal.d.ts

@@ -6,31 +6,20 @@ declare global {
     }
 }
 /**
- * @description A Modal dialog component which interrupts interaction with the rest of the page.
- *
- * @event close - Emitted when the Modal closes.
+ * @event close - `(event: "close", listener: (event: Event)) => void) => void`
  *
  * @slot - The content of the modal.
- *
- * @slot header-actions - A slot for placing additional header actions. These are co-located with the close button.
- *                        Use the `glide-core-modal-icon-button` component only.
- *
- * @slot primary - A slot for rendering a primary action button. Normally a "Continue", "Next", or "Submit" action.
- *
- * @slot secondary - A slot for rendering a secondary action button. Normally a "Cancel" action.
- *
- * @slot tertiary - A slot for rendering an icon+tooltip for additional information,
- *                  or a tertiary action button.
+ * @slot header-actions - One or more of `<glide-core-modal-icon-button>`.
+ * @slot primary - One of `<glide-core-button>`.
+ * @slot secondary - One of `<glide-core-button>`.
+ * @slot tertiary - One or more of `<glide-core-button>` or `<glide-core-modal-tertiary-icon>`.
  */
 export default class GlideCoreModal extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
-    /** The title text for the Modal. */
     label: string;
-    /** Adds a back/dismiss button in the Modal header. */
-    showBackButton: boolean;
-    /** Fixed-size options for the Modal. */
+    backButton: boolean;
     size?: 'small' | 'medium' | 'large' | 'xlarge';
     close(): void;
     connectedCallback(): void;

package/dist/modal.icon-button.d.ts

@@ -6,8 +6,6 @@ declare global {
     }
 }
 /**
- * @description A Modal Icon Button. Should be used only in the "header-actions" slot of a Modal.
- *
  * @slot - The content of the button. Should only be an icon. The icon should also leverage the
  *         "label" attribute for accessibility so that it is read to screenreaders.
  *

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

@@ -18,19 +18,19 @@ it('renders and sets default attributes', async () => {
     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');
+    expect(buttonElement?.getAttribute('variant')).to.equal('tertiary');
 });
 it('adds an accessible label when given', async () => {
     const component = await fixture(html `<glide-core-modal-icon-button label="test-label"
       >Test</glide-core-modal-icon-button
     >`);
     const buttonElement = component.shadowRoot?.querySelector('glide-core-icon-button');
-    expect(buttonElement).to.have.attribute('label', 'test-label');
+    expect(buttonElement?.getAttribute('label')).to.equal('test-label');
 });
 it('does not add an acceessible label when not given', async () => {
     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', '');
+    expect(buttonElement?.getAttribute('label')).to.equal('');
 });
 it('throws if it does not have a default slot', async () => {
     const spy = sinon.spy();

package/dist/modal.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,l){var n,r=arguments.length,i=r<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,o,l);else for(var s=e.length-1;s>=0;s--)(n=e[s])&&(i=(r<3?n(i):r>3?n(t,o,i):n(t,o))||i);return r>3&&i&&Object.defineProperty(t,o,i),i};import"./modal.icon-button.js";import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{when}from"lit/directives/when.js";import GlideCoreButton from"./button.js";import GlideCoreModalIconButton from"./modal.icon-button.js";import GlideCoreModalTertiaryIcon from"./modal.tertiary-icon.js";import ow,{owSlot,owSlotType}from"./library/ow.js";import styles from"./modal.styles.js";const globalStylesheet=new CSSStyleSheet;globalStylesheet.insertRule("\n  @supports (scrollbar-gutter: stable) {\n    .private-glide-core-modal-lock-scroll {\n      scrollbar-gutter: stable !important;\n      overflow: hidden !important;\n    }\n  }\n"),globalStylesheet.insertRule("\n  @supports not (scrollbar-gutter: stable) {\n    .private-glide-core-modal-lock-scroll {\n      padding-right: var(--glide-scroll-size, 0.9375rem) !important;\n      overflow: hidden !important;\n    }\n  }\n");let GlideCoreModal=class GlideCoreModal extends LitElement{constructor(){super(...arguments),this.label="",this.showBackButton=!1,this.size="medium",this.#e=createRef(),this.#t=createRef(),this.#o=createRef(),this.#l=createRef(),this.#n=createRef(),this.#r=createRef(),this.#i=new LocalizeController(this)}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}close(){this.#e.value?.open&&(document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),this.dispatchEvent(new Event("close")),this.#e.value?.close())}connectedCallback(){super.connectedCallback();document.adoptedStyleSheets.includes(globalStylesheet)||document.adoptedStyleSheets.push(globalStylesheet)}disconnectedCallback(){super.disconnectedCallback(),document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),document.adoptedStyleSheets=document.adoptedStyleSheets.filter((e=>e!==globalStylesheet))}firstUpdated(){owSlot(this.#t.value),owSlotType(this.#r.value,[GlideCoreModalIconButton]),owSlotType(this.#o.value,[GlideCoreButton]),owSlotType(this.#l.value,[GlideCoreButton]),owSlotType(this.#n.value,[GlideCoreModalTertiaryIcon,GlideCoreButton])}render(){return html`<dialog class="${classMap({component:!0,small:"small"===this.size,medium:"medium"===this.size,large:"large"===this.size,xlarge:"xlarge"===this.size})}" tabindex="-1" @keydown="${this.#s}" @mousedown="${this.#a}" ${ref(this.#e)}><header class="header"><h2 class="label" data-test="heading" id="heading">${when(this.showBackButton,(()=>html`<glide-core-modal-icon-button data-test="back-button" @click="${this.#c}"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><title>${this.#i.term("dismiss")}</title><path d="M12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20V18ZM20 14.5C20 16.433 18.433 18 16.5 18V20C19.5376 20 22 17.5376 22 14.5H20ZM16.5 11C18.433 11 20 12.567 20 14.5H22C22 11.4624 19.5376 9 16.5 9V11ZM16.5 18H12V20H16.5V18ZM16.5 9H3V11H16.5V9Z" fill="currentColor"/><path d="M7 6L3 10L7 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></glide-core-modal-icon-button>`))} ${this.label}</h2><div class="header-actions" role="toolbar"><slot name="header-actions" @slotchange="${this.#d}" ${ref(this.#r)}></slot><glide-core-modal-icon-button data-test="close-button" @click="${this.#c}"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><title>${this.#i.term("close")}</title><path d="M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></glide-core-modal-icon-button></div></header><article aria-labelledby="heading" class="body" role="region" tabindex="0"><slot @slotchange="${this.#m}" ${ref(this.#t)}></slot></article><footer class="footer"><menu class="menu"><li class="flex align-center"><slot name="tertiary" @slotchange="${this.#h}" ${ref(this.#n)}></slot></li><li><menu class="actions"><li><slot name="secondary" @slotchange="${this.#u}" ${ref(this.#l)}></slot></li><li><slot name="primary" @slotchange="${this.#f}" ${ref(this.#o)}></slot></li></menu></li></menu></footer></dialog>`}showModal(){if(!this.#e.value?.open){if(document.documentElement.classList.add("private-glide-core-modal-lock-scroll"),!window.CSS.supports("scrollbar-gutter","stable")){const e=Math.abs(window.innerWidth-document.documentElement.clientWidth);document.documentElement.style.setProperty("--glide-scroll-size",`${e}px`)}this.#e.value?.showModal(),this.#e.value?.focus()}}#e;#t;#o;#l;#n;#r;#i;#c(){document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),this.dispatchEvent(new Event("close")),this.#e.value?.close()}#m(){ow(this.#e.value,ow.object.instanceOf(HTMLDialogElement)),owSlot(this.#t.value)}#f(){owSlotType(this.#o.value,[GlideCoreButton])}#u(){owSlotType(this.#l.value,[GlideCoreButton])}#h(){ow(this.#e.value,ow.object.instanceOf(HTMLDialogElement)),owSlotType(this.#n.value,[GlideCoreModalTertiaryIcon,GlideCoreButton])}#d(){owSlotType(this.#r.value,[GlideCoreModalIconButton])}#s(e){"Escape"===e.key&&(document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),this.dispatchEvent(new Event("close")),this.#e.value?.close())}#a(e){if(e.target!==this.#e.value)return;const t=this.#e.value?.getBoundingClientRect();if(t){t.top<=e.clientY&&e.clientY<=t.top+t.height&&t.left<=e.clientX&&e.clientX<=t.left+t.width||(document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),this.dispatchEvent(new Event("close")),this.#e.value?.close())}}};__decorate([property({reflect:!0})],GlideCoreModal.prototype,"label",void 0),__decorate([property({attribute:"show-back-button",type:Boolean,reflect:!0})],GlideCoreModal.prototype,"showBackButton",void 0),__decorate([property({reflect:!0})],GlideCoreModal.prototype,"size",void 0),GlideCoreModal=__decorate([customElement("glide-core-modal")],GlideCoreModal);export default GlideCoreModal;
+var __decorate=this&&this.__decorate||function(e,t,o,l){var n,r=arguments.length,i=r<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,o,l);else for(var s=e.length-1;s>=0;s--)(n=e[s])&&(i=(r<3?n(i):r>3?n(t,o,i):n(t,o))||i);return r>3&&i&&Object.defineProperty(t,o,i),i};import"./modal.icon-button.js";import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{when}from"lit/directives/when.js";import GlideCoreButton from"./button.js";import GlideCoreModalIconButton from"./modal.icon-button.js";import GlideCoreModalTertiaryIcon from"./modal.tertiary-icon.js";import ow,{owSlot,owSlotType}from"./library/ow.js";import styles from"./modal.styles.js";const globalStylesheet=new CSSStyleSheet;globalStylesheet.insertRule("\n  @supports (scrollbar-gutter: stable) {\n    .private-glide-core-modal-lock-scroll {\n      scrollbar-gutter: stable !important;\n      overflow: hidden !important;\n    }\n  }\n"),globalStylesheet.insertRule("\n  @supports not (scrollbar-gutter: stable) {\n    .private-glide-core-modal-lock-scroll {\n      padding-right: var(--glide-scroll-size, 0.9375rem) !important;\n      overflow: hidden !important;\n    }\n  }\n");let GlideCoreModal=class GlideCoreModal extends LitElement{constructor(){super(...arguments),this.label="",this.backButton=!1,this.size="medium",this.#e=createRef(),this.#t=createRef(),this.#o=createRef(),this.#l=createRef(),this.#n=createRef(),this.#r=createRef(),this.#i=new LocalizeController(this)}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}close(){this.#e.value?.open&&(document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),this.dispatchEvent(new Event("close")),this.#e.value?.close())}connectedCallback(){super.connectedCallback();document.adoptedStyleSheets.includes(globalStylesheet)||document.adoptedStyleSheets.push(globalStylesheet)}disconnectedCallback(){super.disconnectedCallback(),document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),document.adoptedStyleSheets=document.adoptedStyleSheets.filter((e=>e!==globalStylesheet))}firstUpdated(){owSlot(this.#t.value),owSlotType(this.#r.value,[GlideCoreModalIconButton]),owSlotType(this.#o.value,[GlideCoreButton]),owSlotType(this.#l.value,[GlideCoreButton]),owSlotType(this.#n.value,[GlideCoreModalTertiaryIcon,GlideCoreButton])}render(){return html`<dialog class="${classMap({component:!0,small:"small"===this.size,medium:"medium"===this.size,large:"large"===this.size,xlarge:"xlarge"===this.size})}" tabindex="-1" @keydown="${this.#s}" @mousedown="${this.#a}" ${ref(this.#e)}><header class="header"><h2 class="label" data-test="heading" id="heading">${when(this.backButton,(()=>html`<glide-core-modal-icon-button class="icon-button" data-test="back-button" @click="${this.#c}"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><title>${this.#i.term("dismiss")}</title><path d="M12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20V18ZM20 14.5C20 16.433 18.433 18 16.5 18V20C19.5376 20 22 17.5376 22 14.5H20ZM16.5 11C18.433 11 20 12.567 20 14.5H22C22 11.4624 19.5376 9 16.5 9V11ZM16.5 18H12V20H16.5V18ZM16.5 9H3V11H16.5V9Z" fill="currentColor"/><path d="M7 6L3 10L7 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></glide-core-modal-icon-button>`))} ${this.label}</h2><div class="header-actions" role="toolbar"><slot name="header-actions" @slotchange="${this.#d}" ${ref(this.#r)}></slot><glide-core-modal-icon-button class="icon-button" data-test="close-button" @click="${this.#c}"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><title>${this.#i.term("close")}</title><path d="M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></glide-core-modal-icon-button></div></header><article aria-labelledby="heading" class="body" role="region" tabindex="0"><slot @slotchange="${this.#m}" ${ref(this.#t)}></slot></article><footer class="footer"><menu class="menu"><li class="flex align-center"><slot name="tertiary" @slotchange="${this.#u}" ${ref(this.#n)}></slot></li><li><menu class="actions"><li><slot name="secondary" @slotchange="${this.#h}" ${ref(this.#l)}></slot></li><li><slot name="primary" @slotchange="${this.#f}" ${ref(this.#o)}></slot></li></menu></li></menu></footer></dialog>`}showModal(){if(!this.#e.value?.open){if(document.documentElement.classList.add("private-glide-core-modal-lock-scroll"),!window.CSS.supports("scrollbar-gutter","stable")){const e=Math.abs(window.innerWidth-document.documentElement.clientWidth);document.documentElement.style.setProperty("--glide-scroll-size",`${e}px`)}this.#e.value?.showModal(),this.#e.value?.focus()}}#e;#t;#o;#l;#n;#r;#i;#c(){document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),this.dispatchEvent(new Event("close")),this.#e.value?.close()}#m(){ow(this.#e.value,ow.object.instanceOf(HTMLDialogElement)),owSlot(this.#t.value)}#f(){owSlotType(this.#o.value,[GlideCoreButton])}#h(){owSlotType(this.#l.value,[GlideCoreButton])}#u(){ow(this.#e.value,ow.object.instanceOf(HTMLDialogElement)),owSlotType(this.#n.value,[GlideCoreModalTertiaryIcon,GlideCoreButton])}#d(){owSlotType(this.#r.value,[GlideCoreModalIconButton])}#s(e){"Escape"===e.key&&(document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),this.dispatchEvent(new Event("close")),this.#e.value?.close())}#a(e){if(e.target!==this.#e.value)return;const t=this.#e.value?.getBoundingClientRect();if(t){t.top<=e.clientY&&e.clientY<=t.top+t.height&&t.left<=e.clientX&&e.clientX<=t.left+t.width||(document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),this.dispatchEvent(new Event("close")),this.#e.value?.close())}}};__decorate([property({reflect:!0})],GlideCoreModal.prototype,"label",void 0),__decorate([property({attribute:"back-button",type:Boolean,reflect:!0})],GlideCoreModal.prototype,"backButton",void 0),__decorate([property({reflect:!0})],GlideCoreModal.prototype,"size",void 0),GlideCoreModal=__decorate([customElement("glide-core-modal")],GlideCoreModal);export default GlideCoreModal;

package/dist/modal.styles.js

@@ -24,22 +24,6 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       }
     }
 
-    @media (prefers-reduced-motion) {
-      /**
-        ':host' is targeted here to increase specificity so that
-        we don't need to use '!important' to turn off the animation.
-      */
-      :host .component {
-        &[open] {
-          animation: none;
-        }
-
-        &::backdrop {
-          animation: none;
-        }
-      }
-    }
-
     .component {
       backdrop-filter: blur(100px);
       background-color: var(--glide-core-surface-modal);
@@ -54,8 +38,11 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       padding: 1.25rem;
 
       &[open] {
-        animation: modal-open 250ms;
         opacity: 1;
+
+        @media (prefers-reduced-motion: no-preference) {
+          animation: modal-open 250ms;
+        }
       }
 
       &:focus {
@@ -63,18 +50,21 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       }
 
       &::backdrop {
-        animation: backdrop-fade-in 250ms;
-
         /* prefix required for Safari */
         /* stylelint-disable-next-line property-no-vendor-prefix */
         -webkit-backdrop-filter: blur(3px);
         backdrop-filter: blur(3px);
         background-color: rgba(0 0 0 / 40%);
+
+        @media (prefers-reduced-motion: no-preference) {
+          animation: backdrop-fade-in 250ms;
+        }
       }
 
       ::slotted([slot='tertiary']) {
         --size: 1rem;
 
+        display: contents;
         size: 1rem;
       }
     }
@@ -123,6 +113,10 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       line-height: 1;
     }
 
+    .icon-button {
+      display: contents;
+    }
+
     .body {
       line-height: 1;
       overflow: auto;

package/dist/modal.tertiary-icon.d.ts

@@ -6,9 +6,6 @@ declare global {
     }
 }
 /**
- * @description A Modal tertiary icon wrapper.  Provides opinionated styling and accessibility for icons in Modals.
- *  Should be used only in the "tertiary" slot of a Modal.
- *
  * @slot - The icon to be rendered.
  */
 export default class GlideCoreModalTertiaryIcon extends LitElement {