@crowdstrike/glide-core 0.5.0 → 0.5.2

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 {
@@ -43,7 +43,7 @@
       }
 
       &:focus-visible {
-        ${e};
+        ${focusOutline};
       }
 
       &::backdrop {
@@ -130,7 +130,7 @@
       }
 
       &:focus-visible {
-        ${e};
+        ${focusOutline};
       }
     }
 
@@ -166,4 +166,4 @@
     .align-center {
       align-items: center;
     }
-  `];
+  `];

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 d=e.length-1;d>=0;d--)(r=e[d])&&(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";let GlideCoreModalTertiaryIcon=class GlideCoreModalTertiaryIcon extends LitElement{constructor(){super(...arguments),this.tooltipPlacement="bottom",this.#e=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}firstUpdated(){owSlot(this.#e.value)}render(){return html`<glide-core-tooltip placement="${this.tooltipPlacement}">${this.label} <span tabindex="0" aria-label="${ifDefined(this.label)}" slot="target"><slot @slotchange="${this.#t}" ${ref(this.#e)}></slot></span></glide-core-tooltip>`}#e;#t(){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.lock-scroll.js

@@ -0,0 +1,76 @@
+import * as sinon from 'sinon';
+import { expect, fixture, html } from '@open-wc/testing';
+import { sendKeys, sendMouse } from '@web/test-runner-commands';
+import GlideCoreModal from './modal.js';
+GlideCoreModal.shadowRootOptions.mode = 'open';
+const addSpy = sinon.spy(document.documentElement.classList, 'add');
+const removeSpy = sinon.spy(document.documentElement.classList, 'remove');
+afterEach(() => {
+    addSpy.resetHistory();
+    removeSpy.resetHistory();
+});
+after(() => {
+    addSpy.restore();
+    removeSpy.restore();
+});
+it('adds the "private-glide-core-modal-lock-scroll" class to the documentElement when opened and removes it when closed', async () => {
+    const element = await fixture(html `<glide-core-modal label="Modal title"
+      >Modal Content</glide-core-modal
+    >`);
+    element.showModal();
+    expect(addSpy.callCount).to.equal(1);
+    expect(addSpy.calledWith('private-glide-core-modal-lock-scroll')).to.be.ok;
+    expect(removeSpy.callCount).to.equal(0);
+    element.close();
+    expect(removeSpy.callCount).to.equal(1);
+    expect(removeSpy.calledWith('private-glide-core-modal-lock-scroll')).to.be.ok;
+    // Verify `add` was not called again for some reason
+    expect(addSpy.callCount).to.equal(1);
+});
+it('removes the "private-glide-core-modal-lock-scroll" class 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();
+    expect(removeSpy.callCount).to.equal(0);
+    const button = element.shadowRoot.querySelector('[data-test="close-button"]');
+    expect(button).to.be.ok;
+    button?.click();
+    expect(removeSpy.callCount).to.equal(1);
+});
+it('removes the "private-glide-core-modal-lock-scroll" class when the "close" method is called', async () => {
+    const element = await fixture(html `<glide-core-modal label="Modal title"
+      >Modal Content</glide-core-modal
+    >`);
+    element.showModal();
+    expect(removeSpy.callCount).to.equal(0);
+    const dialogElement = element.shadowRoot.querySelector('dialog');
+    expect(dialogElement?.hasAttribute('open')).to.be.true;
+    element.close();
+    expect(removeSpy.callCount).to.equal(1);
+});
+it('removes the "private-glide-core-modal-lock-scroll" class 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();
+    expect(removeSpy.callCount).to.equal(0);
+    await sendKeys({ press: 'Escape' });
+    expect(removeSpy.callCount).to.equal(1);
+});
+it('removes class "private-glide-core-modal-lock-scroll" from document when click is outside dialog', async () => {
+    const element = await fixture(html `<glide-core-modal label="Modal title"
+      >Modal Content</glide-core-modal
+    >`);
+    element.showModal();
+    const dialogElement = element?.shadowRoot?.querySelector('dialog');
+    const boundingRectangle = dialogElement?.getBoundingClientRect();
+    expect(boundingRectangle).is.not.null;
+    expect(document.documentElement.classList.contains('private-glide-core-modal-lock-scroll')).to.be.true;
+    const { top, left } = boundingRectangle;
+    await sendMouse({
+        type: 'click',
+        position: [Math.floor(left - 1), Math.floor(top - 1)],
+    });
+    expect(document.documentElement.classList.contains('private-glide-core-modal-lock-scroll')).to.be.false;
+});

package/dist/modal.test.methods.js

@@ -0,0 +1,23 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import GlideCoreModal from './modal.js';
+GlideCoreModal.shadowRootOptions.mode = 'open';
+it('opens the modal when the "showModal" method is called and closes it when "close" is called', 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;
+    element.close();
+    expect(dialogElement?.hasAttribute('open')).to.be.false;
+});
+it('remains open when the "showModal" method is called twice', 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;
+    element.showModal();
+    expect(dialogElement?.hasAttribute('open')).to.be.true;
+});

package/dist/modal.test.scrollbars.js

@@ -0,0 +1,19 @@
+import './modal.js';
+import * as sinon from 'sinon';
+import { expect, fixture, html } from '@open-wc/testing';
+import GlideCoreModal from './modal.js';
+GlideCoreModal.shadowRootOptions.mode = 'open';
+const cssSupportsStub = sinon.stub(window.CSS, 'supports').returns(false);
+const setPropertySpy = sinon.spy(document.documentElement.style, 'setProperty');
+afterEach(() => {
+    cssSupportsStub.restore();
+    setPropertySpy.restore();
+});
+it('sets the "--glide-scroll-size" variable when the browser does not support scrollbar-gutter', async () => {
+    const element = await fixture(html `<glide-core-modal label="Modal title">
+      Modal Content
+    </glide-core-modal>`);
+    element.showModal();
+    expect(cssSupportsStub.calledWith('scrollbar-gutter')).to.be.ok;
+    expect(setPropertySpy.callCount).to.equal(1);
+});