@crowdstrike/glide-core 0.5.1 → 0.6.0

package/dist/modal.icon-button.styles.js

@@ -1,8 +1,8 @@
-"use strict";import{css as e}from"lit";export default[e`
+import{css}from"lit";export default[css`
     ::slotted(*) {
       --size: 1.25rem;
 
       block-size: 1.25rem;
       inline-size: 1.25rem;
     }
-  `];
+  `];

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

@@ -0,0 +1,45 @@
+import { ArgumentError } from 'ow';
+import { expect, fixture, html } from '@open-wc/testing';
+import GlideCoreModalIconButton from './modal.icon-button.js';
+import sinon from 'sinon';
+GlideCoreModalIconButton.shadowRootOptions.mode = 'open';
+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();
+});
+it('renders and sets default attributes', async () => {
+    const element = 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(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"
+      >Test</glide-core-modal-icon-button
+    >`);
+    const buttonElement = element.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');
+    expect(buttonElement).to.have.attribute('label', '');
+});
+it('throws if it does not have a default slot', async () => {
+    const spy = sinon.spy();
+    try {
+        await fixture(html `<glide-core-modal-icon-button></glide-core-modal-icon-button>`);
+    }
+    catch (error) {
+        if (error instanceof ArgumentError) {
+            spy();
+        }
+    }
+    expect(spy.called).to.be.true;
+});

package/dist/modal.js

@@ -1,15 +1 @@
-"use strict";var Y=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var b=(l,o,t,n)=>{for(var c=n>1?void 0:n?N(o,t):o,R=l.length-1,B;R>=0;R--)(B=l[R])&&(c=(n?B(o,t,c):B(c))||c);return n&&c&&Y(o,t,c),c};var z=(l,o,t)=>{if(!o.has(l))throw TypeError("Cannot "+t)};var e=(l,o,t)=>(z(l,o,"read from private field"),t?t.call(l):o.get(l)),i=(l,o,t)=>{if(o.has(l))throw TypeError("Cannot add the same private member more than once");o instanceof WeakSet?o.add(l):o.set(l,t)};var r=(l,o,t)=>(z(l,o,"access private method"),t);var s,p,g,v,f,S,w,x,E,j,y,F,C,P,M,K,$,O,L,W,H,X;import"./modal.icon-button.js";import{LitElement as V,html as D}from"lit";import{classMap as U}from"lit/directives/class-map.js";import{createRef as m,ref as u}from"lit/directives/ref.js";import{customElement as q,property as T}from"lit/decorators.js";import{owSlot as I,owSlotType as d}from"./library/ow.js";import{when as J}from"lit/directives/when.js";import h from"./button.js";import Z from"./modal.icon-button.js";import A from"./modal.tertiary-icon.js";import Q from"./modal.styles.js";const k=new CSSStyleSheet;k.insertRule(`
-  @supports (scrollbar-gutter: stable) {
-    .private-glide-core-modal-lock-scroll {
-      scrollbar-gutter: stable !important;
-      overflow: hidden !important;
-    }
-  }
-`),k.insertRule(`
-  @supports not (scrollbar-gutter: stable) {
-    .private-glide-core-modal-lock-scroll {
-      padding-right: var(--glide-scroll-size, 0.9375rem) !important;
-      overflow: hidden !important;
-    }
-  }
-`);let a=class extends V{constructor(){super(...arguments);i(this,w);i(this,E);i(this,y);i(this,C);i(this,M);i(this,$);i(this,L);i(this,H);this.label="";this.showBackButton=!1;this.size="medium";i(this,s,m());i(this,p,m());i(this,g,m());i(this,v,m());i(this,f,m());i(this,S,m())}close(){e(this,s).value?.open&&(document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),this.dispatchEvent(new Event("close")),e(this,s).value?.close())}connectedCallback(){super.connectedCallback(),document.adoptedStyleSheets.includes(k)||document.adoptedStyleSheets.push(k)}disconnectedCallback(){super.disconnectedCallback(),document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),document.adoptedStyleSheets=document.adoptedStyleSheets.filter(t=>t!==k)}firstUpdated(){I(e(this,p).value),d(e(this,S).value,[Z]),d(e(this,g).value,[h]),d(e(this,v).value,[h]),d(e(this,f).value,[A,h])}render(){return D`<dialog class="${U({component:!0,small:this.size==="small",medium:this.size==="medium",large:this.size==="large",xlarge:this.size==="xlarge"})}" tabindex="-1" @keydown="${r(this,L,W)}" @mousedown="${r(this,H,X)}" ${u(e(this,s))}><header class="header"><h2 class="label" data-test="heading" id="heading">${J(this.showBackButton,()=>D`<glide-core-modal-icon-button data-test="back-button" @click="${r(this,w,x)}"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><title>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="${r(this,$,O)}" ${u(e(this,S))}></slot><glide-core-modal-icon-button data-test="close-button" @click="${r(this,w,x)}"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><title>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="${r(this,E,j)}" ${u(e(this,p))}></slot></article><footer class="footer"><menu class="menu"><li class="flex align-center"><slot name="tertiary" @slotchange="${r(this,M,K)}" ${u(e(this,f))}></slot></li><li><menu class="actions"><li><slot name="secondary" @slotchange="${r(this,C,P)}" ${u(e(this,v))}></slot></li><li><slot name="primary" @slotchange="${r(this,y,F)}" ${u(e(this,g))}></slot></li></menu></li></menu></footer></dialog>`}showModal(){if(!e(this,s).value?.open){if(document.documentElement.classList.add("private-glide-core-modal-lock-scroll"),!window.CSS.supports("scrollbar-gutter","stable")){const t=Math.abs(window.innerWidth-document.documentElement.clientWidth);document.documentElement.style.setProperty("--glide-scroll-size",`${t}px`)}e(this,s).value?.showModal(),e(this,s).value?.focus()}}};s=new WeakMap,p=new WeakMap,g=new WeakMap,v=new WeakMap,f=new WeakMap,S=new WeakMap,w=new WeakSet,x=function(){document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),this.dispatchEvent(new Event("close")),e(this,s).value?.close()},E=new WeakSet,j=function(){I(e(this,p).value)},y=new WeakSet,F=function(){d(e(this,g).value,[h])},C=new WeakSet,P=function(){d(e(this,v).value,[h])},M=new WeakSet,K=function(){d(e(this,f).value,[A,h])},$=new WeakSet,O=function(){d(e(this,S).value,[Z])},L=new WeakSet,W=function(t){t.key==="Escape"&&(document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),this.dispatchEvent(new Event("close")),e(this,s).value?.close())},H=new WeakSet,X=function(t){if(t.target!==e(this,s).value)return;const n=e(this,s).value?.getBoundingClientRect();n&&(n.top<=t.clientY&&t.clientY<=n.top+n.height&&n.left<=t.clientX&&t.clientX<=n.left+n.width||(document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),this.dispatchEvent(new Event("close")),e(this,s).value?.close()))},a.shadowRootOptions={...V.shadowRootOptions,mode:"closed"},a.styles=Q,b([T({reflect:!0})],a.prototype,"label",2),b([T({attribute:"show-back-button",type:Boolean,reflect:!0})],a.prototype,"showBackButton",2),b([T({reflect:!0})],a.prototype,"size",2),a=b([q("glide-core-modal")],a);export{a as default};
+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{owSlot,owSlotType}from"./library/ow.js";import{setContainingBlock}from"./library/set-containing-block.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 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(){owSlot(this.#t.value);const e=this.#t.value.assignedElements();setContainingBlock({elements:e,containingBlock:this.#e.value})}#f(){owSlotType(this.#o.value,[GlideCoreButton])}#u(){owSlotType(this.#l.value,[GlideCoreButton])}#h(){owSlotType(this.#n.value,[GlideCoreModalTertiaryIcon,GlideCoreButton]);const e=this.#n.value.assignedElements().filter((e=>e instanceof GlideCoreModalTertiaryIcon));for(const t of e)t.setContainingBlock(this.#e.value)}#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;

package/dist/modal.styles.js

@@ -1,4 +1,4 @@
-"use strict";import{css as i}from"lit";import e from"./styles/focus-outline.js";export default[i`
+import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[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 {
@@ -23,6 +23,7 @@
     }
 
     .component {
+      backdrop-filter: blur(100px);
       background-color: var(--glide-core-surface-base-lighter);
       border: none;
       border-radius: 0.5rem;
@@ -42,10 +43,6 @@
         outline: none;
       }
 
-      &:focus-visible {
-        ${e};
-      }
-
       &::backdrop {
         animation: backdrop-fade-in 250ms;
 
@@ -130,7 +127,7 @@
       }
 
       &:focus-visible {
-        ${e};
+        ${focusOutline};
       }
     }
 
@@ -166,4 +163,4 @@
     .align-center {
       align-items: center;
     }
-  `];
+  `];

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

@@ -18,4 +18,5 @@ export default class GlideCoreModalTertiaryIcon extends LitElement {
     tooltipPlacement: 'bottom' | 'left' | 'right' | 'top';
     firstUpdated(): void;
     render(): import("lit").TemplateResult<1>;
+    setContainingBlock(containingBlock: HTMLElement): void;
 }

package/dist/modal.tertiary-icon.js

@@ -1 +1 @@
-"use strict";var E=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var r=(e,t,o,m)=>{for(var i=m>1?void 0:m?R(t,o):t,n=e.length-1,f;n>=0;n--)(f=e[n])&&(i=(m?f(t,o,i):f(i))||i);return m&&i&&E(t,o,i),i};var c=(e,t,o)=>{if(!t.has(e))throw TypeError("Cannot "+o)};var s=(e,t,o)=>(c(e,t,"read from private field"),o?o.call(e):t.get(e)),h=(e,t,o)=>{if(t.has(e))throw TypeError("Cannot add the same private member more than once");t instanceof WeakSet?t.add(e):t.set(e,o)};var d=(e,t,o)=>(c(e,t,"access private method"),o);var a,p,v;import"./tooltip.js";import{LitElement as g,html as S}from"lit";import{createRef as $,ref as w}from"lit/directives/ref.js";import{customElement as x,property as b}from"lit/decorators.js";import{ifDefined as L}from"lit/directives/if-defined.js";import{owSlot as u}from"./library/ow.js";let l=class extends g{constructor(){super(...arguments);h(this,p);this.tooltipPlacement="bottom";h(this,a,$())}firstUpdated(){u(s(this,a).value)}render(){return S`<glide-core-tooltip placement="${this.tooltipPlacement}">${this.label} <span tabindex="0" aria-label="${L(this.label)}" slot="target"><slot @slotchange="${d(this,p,v)}" ${w(s(this,a))}></slot></span></glide-core-tooltip>`}};a=new WeakMap,p=new WeakSet,v=function(){u(s(this,a).value)},l.shadowRootOptions={...g.shadowRootOptions,mode:"closed"},r([b()],l.prototype,"label",2),r([b({attribute:"tooltip-placement"})],l.prototype,"tooltipPlacement",2),l=r([x("glide-core-modal-tertiary-icon")],l);export{l as default};
+var __decorate=this&&this.__decorate||function(e,t,o,l){var r,i=arguments.length,a=i<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,o,l);else for(var n=e.length-1;n>=0;n--)(r=e[n])&&(a=(i<3?r(a):i>3?r(t,o,a):r(t,o))||a);return i>3&&a&&Object.defineProperty(t,o,a),a};import"./tooltip.js";import{LitElement,html}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{owSlot}from"./library/ow.js";import GlideCoreTooltip from"./tooltip.js";let GlideCoreModalTertiaryIcon=class GlideCoreModalTertiaryIcon extends LitElement{constructor(){super(...arguments),this.tooltipPlacement="bottom",this.#e=createRef(),this.#t=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}firstUpdated(){owSlot(this.#e.value)}render(){return html`<glide-core-tooltip placement="${this.tooltipPlacement}" ${ref(this.#t)}>${this.label} <span tabindex="0" aria-label="${ifDefined(this.label)}" slot="target"><slot @slotchange="${this.#o}" ${ref(this.#e)}></slot></span></glide-core-tooltip>`}setContainingBlock(e){this.#t.value.containingBlock=e}#e;#t;#o(){owSlot(this.#e.value)}};__decorate([property()],GlideCoreModalTertiaryIcon.prototype,"label",void 0),__decorate([property({attribute:"tooltip-placement"})],GlideCoreModalTertiaryIcon.prototype,"tooltipPlacement",void 0),GlideCoreModalTertiaryIcon=__decorate([customElement("glide-core-modal-tertiary-icon")],GlideCoreModalTertiaryIcon);export default GlideCoreModalTertiaryIcon;

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

@@ -0,0 +1,59 @@
+import './button.js';
+import { ArgumentError } from 'ow';
+import { expect, fixture, html } from '@open-wc/testing';
+import GlideCoreModalTertiaryIcon from './modal.tertiary-icon.js';
+import sinon from 'sinon';
+GlideCoreModalTertiaryIcon.shadowRootOptions.mode = 'open';
+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();
+});
+it('renders and sets default attributes', async () => {
+    const element = 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(spanTag?.getAttribute('tabindex')).to.equal('0');
+    const toolip = element.shadowRoot?.querySelector('glide-core-tooltip');
+    expect(toolip).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"
+      >Test</glide-core-modal-tertiary-icon
+    >`);
+    const spanElement = element.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');
+    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"
+      >Test</glide-core-modal-tertiary-icon
+    >`);
+    const toolTip = element.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');
+    expect(toolTip).to.have.attribute('placement', 'bottom');
+});
+it('throws if it does not have a default slot', async () => {
+    const spy = sinon.spy();
+    try {
+        await fixture(html `<glide-core-modal-tertiary-icon></glide-core-modal-tertiary-icon>`);
+    }
+    catch (error) {
+        if (error instanceof ArgumentError) {
+            spy();
+        }
+    }
+    expect(spy.called).to.be.true;
+});

package/dist/modal.test.accessibility.js

@@ -0,0 +1,48 @@
+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();
+});
+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);
+});
+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');
+    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"');
+    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"');
+    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');
+    expect(label).to.be.ok;
+    expect(label?.tagName).to.equal('H2');
+});

package/dist/modal.test.basics.js

@@ -0,0 +1,203 @@
+import './button.js';
+import './modal.icon-button.js';
+import './modal.js';
+import { ArgumentError } from 'ow';
+import { expect, fixture, html } from '@open-wc/testing';
+import GlideCoreModal from './modal.js';
+import expectArgumentError from './library/expect-argument-error.js';
+import sinon from 'sinon';
+GlideCoreModal.shadowRootOptions.mode = 'open';
+it('registers', async () => {
+    expect(window.customElements.get('glide-core-modal')).to.equal(GlideCoreModal);
+});
+it('is closed by default', async () => {
+    const element = await fixture(html `<glide-core-modal label="Modal title">
+      Modal Content
+    </glide-core-modal>`);
+    const dialog = element.shadowRoot?.querySelector('dialog');
+    expect(dialog).to.be.ok;
+    expect(dialog?.hasAttribute('open')).to.be.false;
+});
+it('renders the provided "label"', async () => {
+    const element = await fixture(html `<glide-core-modal label="Modal title">
+      Modal Content
+    </glide-core-modal>`);
+    element.showModal();
+    const label = element.shadowRoot?.querySelector('[data-test="heading"]');
+    expect(label).to.be.ok;
+    expect(label?.textContent?.trim()).to.equal('Modal title');
+});
+it('does not render the show back button in the label by default', async () => {
+    const element = await fixture(html `<glide-core-modal label="Modal title">
+      Modal Content
+    </glide-core-modal>`);
+    element.showModal();
+    expect(element.shadowRoot?.querySelector('[data-test="back-button"]')).to.be.null;
+});
+it('renders the show back button in the label when provided with "show-back-button"', async () => {
+    const element = await fixture(html `<glide-core-modal label="Modal title" show-back-button>
+      Modal Content
+    </glide-core-modal>`);
+    element.showModal();
+    expect(element.shadowRoot?.querySelector('[data-test="back-button"]')).to.be.ok;
+});
+it('renders the provided default slotted content', async () => {
+    const element = await fixture(html `<glide-core-modal label="Modal title">
+      <p data-body>Inner content</p>
+    </glide-core-modal>`);
+    element.showModal();
+    const body = element.querySelector('[data-body]');
+    expect(body).to.be.ok;
+});
+it('renders the provided primary slot content', async () => {
+    const element = await fixture(html `<glide-core-modal label="Modal title">
+      Modal Content
+      <glide-core-button slot="primary" data-primary>Primary</glide-core-button>
+    </glide-core-modal>`);
+    element.showModal();
+    const slotContent = element.querySelector('[data-primary]');
+    expect(slotContent).to.be.ok;
+    const slotNodes = element.shadowRoot
+        ?.querySelector('slot[name="primary"]')
+        ?.assignedNodes();
+    expect(slotNodes?.length).to.equal(1);
+});
+it('renders the provided secondary slot content', async () => {
+    const element = await fixture(html `<glide-core-modal label="Modal title">
+      Modal Content
+      <glide-core-button slot="secondary" data-secondary
+        >Secondary</glide-core-button
+      >
+    </glide-core-modal>`);
+    element.showModal();
+    const slotContent = element.querySelector('[data-secondary]');
+    expect(slotContent).to.be.ok;
+    const slotNodes = element.shadowRoot
+        ?.querySelector('slot[name="secondary"]')
+        ?.assignedNodes();
+    expect(slotNodes?.length).to.equal(1);
+});
+it('renders the provided tertiary slot content', async () => {
+    const element = await fixture(html `<glide-core-modal label="Modal title">
+      Modal Content
+      <glide-core-button slot="tertiary" data-tertiary
+        >Tertiary</glide-core-button
+      >
+    </glide-core-modal>`);
+    element.showModal();
+    const slotContent = element.querySelector('[data-tertiary]');
+    expect(slotContent).to.be.ok;
+    const slotNodes = element.shadowRoot
+        ?.querySelector('slot[name="tertiary"]')
+        ?.assignedNodes();
+    expect(slotNodes?.length).to.equal(1);
+});
+it('renders the provided header-actions slot content', async () => {
+    const element = await fixture(html `<glide-core-modal label="Modal title">
+      Modal Content
+
+      <glide-core-modal-icon-button slot="header-actions" data-actions="1"
+        >action1</glide-core-modal-icon-button
+      >
+
+      <glide-core-modal-icon-button slot="header-actions" data-actions="2"
+        >action2</glide-core-modal-icon-button
+      >
+    </glide-core-modal>`);
+    element.showModal();
+    const slotContent = element.querySelector('[data-actions]');
+    expect(slotContent).to.be.ok;
+    const slotNodes = element.shadowRoot
+        ?.querySelector('slot[name="header-actions"]')
+        ?.assignedNodes();
+    expect(slotNodes?.length).to.equal(2);
+});
+it('defaults the size to "medium"', async () => {
+    const element = await fixture(html `<glide-core-modal label="Modal title">
+      Modal Content
+    </glide-core-modal>`);
+    expect([
+        ...element.shadowRoot.querySelector('dialog')
+            .classList,
+    ]).to.deep.equal(['component', 'medium']);
+});
+it('sets the size to "small"', async () => {
+    const element = await fixture(html `<glide-core-modal label="Modal title" size="small">
+      Modal Content
+    </glide-core-modal>`);
+    expect([
+        ...element.shadowRoot.querySelector('dialog')
+            .classList,
+    ]).to.deep.equal(['component', 'small']);
+});
+it('sets the size to "medium"', async () => {
+    const element = await fixture(html `<glide-core-modal label="Modal title" size="medium">
+      Modal Content
+    </glide-core-modal>`);
+    expect([
+        ...element.shadowRoot.querySelector('dialog')
+            .classList,
+    ]).to.deep.equal(['component', 'medium']);
+});
+it('sets the size to "large"', async () => {
+    const element = await fixture(html `<glide-core-modal label="Modal title" size="large">
+      Modal Content
+    </glide-core-modal>`);
+    expect([
+        ...element.shadowRoot.querySelector('dialog')
+            .classList,
+    ]).to.deep.equal(['component', 'large']);
+});
+it('sets the size to "xlarge"', async () => {
+    const element = await fixture(html `<glide-core-modal label="Modal title" size="xlarge">
+      Modal Content
+    </glide-core-modal>`);
+    expect([
+        ...element.shadowRoot.querySelector('dialog')
+            .classList,
+    ]).to.deep.equal(['component', 'xlarge']);
+});
+it('throws if it does not have a default slot', async () => {
+    const spy = sinon.spy();
+    try {
+        await fixture(html `<glide-core-modal label="Modal title"></glide-core-modal>`);
+    }
+    catch (error) {
+        if (error instanceof ArgumentError) {
+            spy();
+        }
+    }
+    expect(spy.called).to.be.true;
+});
+it('throws an error when the "primary" footer slot has the incorrect type', async () => {
+    await expectArgumentError(() => {
+        return fixture(html `<glide-core-modal label="Modal title">
+        Modal Content
+        <span slot="primary">Primary</span>
+      </glide-core-modal>`);
+    });
+});
+it('throws an error when the "secondary" footer slot has the incorrect type', async () => {
+    await expectArgumentError(() => {
+        return fixture(html `<glide-core-modal label="Modal title">
+        Modal Content
+        <span slot="secondary">Secondary</span>
+      </glide-core-modal>`);
+    });
+});
+it('throws an error when the "header actions" slot has the incorrect type', async () => {
+    await expectArgumentError(() => {
+        return fixture(html `<glide-core-modal label="Modal title">
+        Modal Content
+        <span slot="header-actions">Header Action</span>
+      </glide-core-modal>`);
+    });
+});
+it('throws an error when the "tertiary" footer slot has the incorrect type', async () => {
+    await expectArgumentError(() => {
+        return fixture(html `<glide-core-modal label="Modal title">
+        Modal Content
+        <span slot="tertiary">Tertiary</span>
+      </glide-core-modal>`);
+    });
+});

package/dist/modal.test.close.js

@@ -0,0 +1,38 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+import GlideCoreModal from './modal.js';
+GlideCoreModal.shadowRootOptions.mode = 'open';
+it('closes the modal when the close button is clicked', async () => {
+    const element = await fixture(html `<glide-core-modal label="Modal title">
+      Modal Content
+    </glide-core-modal>`);
+    element.showModal();
+    const button = element.shadowRoot.querySelector('[data-test="close-button"]');
+    expect(button).to.be.ok;
+    button?.click();
+    expect(element
+        .shadowRoot.querySelector('dialog')
+        ?.hasAttribute('open')).to.be.false;
+});
+it('closes the modal when the escape key is pressed', 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(dialogElement?.hasAttribute('open')).to.be.true;
+    await sendKeys({ press: 'Escape' });
+    expect(dialogElement?.hasAttribute('open')).to.be.false;
+});
+it('closes the modal via "show-back-button"', async () => {
+    const element = await fixture(html `<glide-core-modal label="Modal title" show-back-button>
+      Modal Content
+    </glide-core-modal>`);
+    element.showModal();
+    const dialogElement = element.shadowRoot.querySelector('dialog');
+    expect(dialogElement?.hasAttribute('open')).to.be.true;
+    const button = element.shadowRoot.querySelector('[data-test="back-button"]');
+    expect(button).to.be.ok;
+    button?.click();
+    expect(dialogElement?.hasAttribute('open')).to.be.false;
+});

package/dist/modal.test.events.js

@@ -0,0 +1,110 @@
+import './modal.js';
+import { expect, fixture, html } from '@open-wc/testing';
+import { sendKeys, sendMouse } from '@web/test-runner-commands';
+import GlideCoreModal from './modal.js';
+import sinon from 'sinon';
+GlideCoreModal.shadowRootOptions.mode = 'open';
+it('dispatches a "close" event when the modal is closed via the "close" method', async () => {
+    const spy = sinon.spy();
+    const element = await fixture(html `<glide-core-modal label="Modal title"
+      >Modal Content</glide-core-modal
+    >`);
+    element.addEventListener('close', spy);
+    element.showModal();
+    expect(spy.notCalled).to.be.true;
+    element.close();
+    expect(spy.called).to.be.true;
+});
+it('dispatches a "close" event when the modal is closed via the close button', async () => {
+    const spy = sinon.spy();
+    const element = await fixture(html `<glide-core-modal label="Modal title"
+      >Modal Content</glide-core-modal
+    >`);
+    element.addEventListener('close', spy);
+    element.showModal();
+    const button = element.shadowRoot?.querySelector('[data-test="close-button"]');
+    expect(button).to.be.ok;
+    button?.click();
+    expect(spy.called).to.be.true;
+});
+it('dispatches a "close" event when the modal is closed via the escape key', async () => {
+    const spy = sinon.spy();
+    const element = await fixture(html `<glide-core-modal label="Modal title"
+      >Modal Content</glide-core-modal
+    >`);
+    element.addEventListener('close', spy);
+    element.showModal();
+    await sendKeys({ press: 'Escape' });
+    expect(spy.called).to.be.true;
+});
+it('does not dispatch a "close" event when the modal is open and non-escape keys are pressed', async () => {
+    const spy = sinon.spy();
+    const element = await fixture(html `<glide-core-modal label="Modal title"
+      >Modal Content</glide-core-modal
+    >`);
+    element.addEventListener('close', spy);
+    element.showModal();
+    // Tests only a couple keys.
+    await sendKeys({ press: ' ' });
+    expect(spy.notCalled).to.be.true;
+    await sendKeys({ press: 'Enter' });
+    expect(spy.notCalled).to.be.true;
+});
+it('dispatches a "close" event when the modal is closed via "show-back-button"', async () => {
+    const spy = sinon.spy();
+    const element = await fixture(html `<glide-core-modal label="Modal title" show-back-button>
+      Modal Content
+    </glide-core-modal>`);
+    element.addEventListener('close', spy);
+    element.showModal();
+    const button = element.shadowRoot?.querySelector('[data-test="back-button"]');
+    expect(button).to.be.ok;
+    button?.click();
+    expect(spy.called).to.be.true;
+});
+it('does not emit a "close" event when clicking inside the dialog and the mouse is not positioned on a "close" button', async () => {
+    const spy = sinon.spy();
+    const element = await fixture(html `<glide-core-modal label="Modal title"
+      >Modal Content</glide-core-modal
+    >`);
+    element.showModal();
+    element.addEventListener('close', spy);
+    const dialogElement = element?.shadowRoot?.querySelector('dialog');
+    const boundingRectangle = dialogElement?.getBoundingClientRect();
+    expect(boundingRectangle).is.not.null;
+    const { top, left } = boundingRectangle;
+    await sendMouse({
+        type: 'click',
+        position: [Math.ceil(left + 1), Math.ceil(top + 1)],
+    });
+    expect(spy.notCalled).to.be.true;
+});
+it(`does not emit a "close" event if a mousedown event's origin does not come from the dialog element`, async () => {
+    const spy = sinon.spy();
+    const element = await fixture(html `<glide-core-modal label="Modal title">
+      <button data-test="target">Inside Body</button>
+    </glide-core-modal>`);
+    element.showModal();
+    element.addEventListener('close', spy);
+    const button = element.querySelector('[data-test="target"]');
+    expect(button).to.be.ok;
+    button?.dispatchEvent(new Event('mousedown', { bubbles: true }));
+    expect(spy.notCalled).to.be.true;
+});
+it('emits a "close" event when clicking outside the dialog', async () => {
+    const spy = sinon.spy();
+    const element = await fixture(html `<glide-core-modal label="Modal title"
+      >Modal Content</glide-core-modal
+    >`);
+    element.showModal();
+    element.addEventListener('close', spy);
+    const dialogElement = element?.shadowRoot?.querySelector('dialog');
+    const boundingRectangle = dialogElement?.getBoundingClientRect();
+    expect(boundingRectangle).is.not.null;
+    const { top, left } = boundingRectangle;
+    await sendMouse({
+        type: 'click',
+        position: [Math.floor(left - 1), Math.floor(top - 1)],
+    });
+    expect(spy.called).to.be.true;
+});

package/dist/modal.test.floating-components.d.ts

@@ -0,0 +1 @@
+export {};