@crowdstrike/glide-core 0.5.1 → 0.5.2

package/dist/textarea.test.events.js

@@ -0,0 +1,204 @@
+import './textarea.js';
+import * as sinon from 'sinon';
+import { aTimeout, expect, fixture, oneEvent } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+it('dispatches a `input` event when typed in', async () => {
+    const template = `<glide-core-textarea label="label"></glide-core-textarea>`;
+    const textarea = await fixture(template);
+    setTimeout(async () => {
+        textarea.focus();
+        await sendKeys({ type: 'testing' });
+        textarea.blur();
+    });
+    const event = await oneEvent(textarea, 'input');
+    expect(event instanceof Event).to.be.true;
+    expect(event.bubbles).to.be.true;
+});
+it('dispatches an `change` event when typed in', async () => {
+    const template = `<glide-core-textarea label="label"></glide-core-textarea>`;
+    const textarea = await fixture(template);
+    setTimeout(async () => {
+        textarea.focus();
+        await sendKeys({ type: 'testing' });
+        textarea.blur();
+    });
+    const event = await oneEvent(textarea, 'change');
+    expect(event instanceof Event).to.be.true;
+    expect(event.bubbles).to.be.true;
+});
+it('dispatches an `invalid` event on submit when required and no value', async () => {
+    const form = document.createElement('form');
+    const template = `<glide-core-textarea label="label" required></glide-core-textarea>`;
+    const textarea = await fixture(template, {
+        parentNode: form,
+    });
+    setTimeout(() => form.requestSubmit());
+    const event = await oneEvent(textarea, 'invalid');
+    expect(event instanceof Event).to.be.true;
+});
+it('dispatches an `invalid` event after `checkValidity` is called when required and no value', async () => {
+    const form = document.createElement('form');
+    const template = `<glide-core-textarea label="label" required></glide-core-textarea>`;
+    const textarea = await fixture(template, {
+        parentNode: form,
+    });
+    setTimeout(() => textarea.checkValidity());
+    const event = await oneEvent(textarea, 'invalid');
+    expect(event instanceof Event).to.be.true;
+});
+it('dispatches an `invalid` event after `reportValidity` is called when required and no value', async () => {
+    const form = document.createElement('form');
+    const template = `<glide-core-textarea label="label" required></glide-core-textarea>`;
+    const textarea = await fixture(template, {
+        parentNode: form,
+    });
+    setTimeout(() => textarea.reportValidity());
+    const event = await oneEvent(textarea, 'invalid');
+    expect(event instanceof Event).to.be.true;
+});
+it('does not dispatch an `invalid` event after `checkValidity` is called when not required', async () => {
+    const form = document.createElement('form');
+    const template = `<glide-core-textarea label="label"></glide-core-textarea>`;
+    const textarea = await fixture(template, {
+        parentNode: form,
+    });
+    const spy = sinon.spy();
+    textarea.addEventListener('invalid', spy);
+    textarea.checkValidity();
+    await aTimeout(0);
+    expect(spy.notCalled).to.be.true;
+});
+it('does not dispatch an `invalid` event after `checkValidity` is called when required, no value, and disabled', async () => {
+    const form = document.createElement('form');
+    const template = `<glide-core-textarea label="label" required disabled></glide-core-textarea>`;
+    const textarea = await fixture(template, {
+        parentNode: form,
+    });
+    const spy = sinon.spy();
+    textarea.addEventListener('invalid', spy);
+    textarea.checkValidity();
+    await aTimeout(0);
+    expect(spy.notCalled).to.be.true;
+});
+it('does not dispatch an `invalid` event when `reportValidity` is called when not required,', async () => {
+    const form = document.createElement('form');
+    const template = `<glide-core-textarea label="label"></glide-core-textarea>`;
+    const textarea = await fixture(template, {
+        parentNode: form,
+    });
+    const spy = sinon.spy();
+    textarea.addEventListener('invalid', spy);
+    textarea.reportValidity();
+    await aTimeout(0);
+    expect(spy.notCalled).to.be.true;
+});
+it('does not dispatch an `invalid` event when `reportValidity` is called when required, no value, and disabled', async () => {
+    const form = document.createElement('form');
+    const template = `<glide-core-textarea label="label" required disabled></glide-core-textarea>`;
+    const textarea = await fixture(template, {
+        parentNode: form,
+    });
+    const spy = sinon.spy();
+    textarea.addEventListener('invalid', spy);
+    textarea.reportValidity();
+    await aTimeout(0);
+    expect(spy.notCalled).to.be.true;
+});
+it('dispatches an `invalid` event after `requestSubmit` is called when `maxlength` exceeded', async () => {
+    const form = document.createElement('form');
+    const template = `<glide-core-textarea label="label" maxlength="3"></glide-core-textarea>`;
+    const textarea = await fixture(template, {
+        parentNode: form,
+    });
+    setTimeout(async () => {
+        textarea.focus();
+        await sendKeys({ type: 'testing' });
+        form.requestSubmit();
+    });
+    const event = await oneEvent(textarea, 'invalid');
+    expect(event instanceof Event).to.be.true;
+});
+it('dispatches an `invalid` event after `checkValidity` is called when `maxlength` exceeded', async () => {
+    const form = document.createElement('form');
+    const template = `<glide-core-textarea label="label" maxlength="3"></glide-core-textarea>`;
+    const textarea = await fixture(template, {
+        parentNode: form,
+    });
+    setTimeout(async () => {
+        textarea.focus();
+        await sendKeys({ type: 'testing' });
+        textarea.checkValidity();
+    });
+    const event = await oneEvent(textarea, 'invalid');
+    expect(event instanceof Event).to.be.true;
+});
+it('dispatches an `invalid` event after `reportValidity` is called when `maxlength` exceeded', async () => {
+    const form = document.createElement('form');
+    const template = `<glide-core-textarea label="label" maxlength="3"></glide-core-textarea>`;
+    const textarea = await fixture(template, {
+        parentNode: form,
+    });
+    setTimeout(async () => {
+        textarea.focus();
+        await sendKeys({ type: 'testing' });
+        textarea.reportValidity();
+    });
+    const event = await oneEvent(textarea, 'invalid');
+    expect(event instanceof Event).to.be.true;
+});
+it('does not dispatch an `invalid` event after `checkValidity` is called when `maxlength` not exceeded', async () => {
+    const form = document.createElement('form');
+    const template = `<glide-core-textarea label="label" maxlength="3"></glide-core-textarea>`;
+    const textarea = await fixture(template, {
+        parentNode: form,
+    });
+    const spy = sinon.spy();
+    textarea.addEventListener('invalid', spy);
+    textarea.focus();
+    await sendKeys({ type: 'ab' });
+    textarea.checkValidity();
+    await aTimeout(0);
+    expect(spy.notCalled).to.be.true;
+});
+it('does not dispatch an `invalid` event after `checkValidity` is called when `maxlength` exceeded and disabled', async () => {
+    const form = document.createElement('form');
+    const template = `<glide-core-textarea label="label" maxlength="3" disabled></glide-core-textarea>`;
+    const textarea = await fixture(template, {
+        parentNode: form,
+    });
+    const spy = sinon.spy();
+    textarea.addEventListener('invalid', spy);
+    textarea.focus();
+    await sendKeys({ type: 'test' });
+    textarea.checkValidity();
+    await aTimeout(0);
+    expect(spy.notCalled).to.be.true;
+});
+it('does not dispatch an `invalid` event when `reportValidity` is called and `maxlength` is not exceeded,', async () => {
+    const form = document.createElement('form');
+    const template = `<glide-core-textarea label="label" maxlength="3"></glide-core-textarea>`;
+    const textarea = await fixture(template, {
+        parentNode: form,
+    });
+    const spy = sinon.spy();
+    textarea.addEventListener('invalid', spy);
+    textarea.focus();
+    await sendKeys({ type: 'ab' });
+    textarea.reportValidity();
+    await aTimeout(0);
+    expect(spy.notCalled).to.be.true;
+});
+it('does not dispatch an `invalid` event when `reportValidity` is called `maxlength` exceeded and disabled,', async () => {
+    const form = document.createElement('form');
+    const template = `<glide-core-textarea label="label" maxlength="3" disabled></glide-core-textarea>`;
+    const textarea = await fixture(template, {
+        parentNode: form,
+    });
+    const spy = sinon.spy();
+    textarea.addEventListener('invalid', spy);
+    textarea.focus();
+    await sendKeys({ type: 'test' });
+    textarea.reportValidity();
+    await aTimeout(0);
+    expect(spy.notCalled).to.be.true;
+});

package/dist/textarea.test.form.js

@@ -0,0 +1,70 @@
+import './textarea.js';
+import { expect, fixture, html } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+it('can be reset to initial value', async () => {
+    const form = document.createElement('form');
+    const textarea = await fixture(html `<glide-core-textarea
+      value="testing"
+      label="label"
+    ></glide-core-textarea>`, { parentNode: form });
+    textarea.focus();
+    await sendKeys({ type: '-value' });
+    await expect(textarea.value).to.equal('testing-value');
+    form.reset();
+    expect(textarea.value).to.equal('testing');
+});
+it('can be reset if there was no initial value', async () => {
+    const form = document.createElement('form');
+    const textarea = await fixture(html `<glide-core-textarea label="label"></glide-core-textarea>`, { parentNode: form });
+    textarea.value = 'value';
+    form.reset();
+    expect(textarea.value).to.equal('');
+});
+it('has `formData` when it has a `value` and `name`', async () => {
+    const form = document.createElement('form');
+    await fixture(html `<glide-core-textarea
+      value="value"
+      label="label"
+      name="name"
+    ></glide-core-textarea>`, { parentNode: form });
+    const formData = new FormData(form);
+    expect(formData.get('name')).to.be.equal('value');
+});
+it('has `formData` when text is entered and has a `name`', async () => {
+    const form = document.createElement('form');
+    const textarea = await fixture(html `<glide-core-textarea
+      value=""
+      label="label"
+      name="name"
+    ></glide-core-textarea>`, { parentNode: form });
+    textarea?.focus();
+    await sendKeys({ type: 'testing' });
+    const formData = new FormData(form);
+    expect(formData.get('name')).to.be.equal('testing');
+});
+it('has no `formData` value when it has a value and is disabled', async () => {
+    const form = document.createElement('form');
+    await fixture(html `<glide-core-textarea
+      value="value"
+      label="label"
+      name="test-name"
+      disabled
+    ></glide-core-textarea>`, { parentNode: form });
+    const formData = new FormData(form);
+    expect(formData.get('test-name')).to.be.null;
+});
+it('appends no `formData` when it has a value and no `name`', async () => {
+    const form = document.createElement('form');
+    await fixture(html `<glide-core-textarea
+      value="value"
+      label="label"
+    ></glide-core-textarea>`, { parentNode: form });
+    const formData = new FormData(form);
+    expect(formData).to.be.empty;
+});
+it('appends no `formData` when it has no value and a `name`', async () => {
+    const form = document.createElement('form');
+    await fixture(html `<glide-core-textarea label="label" name="name"></glide-core-textarea>`, { parentNode: form });
+    const formData = new FormData(form);
+    expect(formData).to.be.empty;
+});

package/dist/textarea.test.validity.js

@@ -0,0 +1,83 @@
+import { expect, fixture } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+import GlideCoreTextarea from './textarea.js';
+GlideCoreTextarea.shadowRootOptions.mode = 'open';
+it('is valid by default', async () => {
+    const template = '<glide-core-textarea></glide-core-textarea>';
+    const textarea = await fixture(template);
+    expect(textarea.validity?.valid).to.be.true;
+    expect(textarea.validity?.valueMissing).to.be.false;
+    expect(textarea.validity?.tooLong).to.be.false;
+    expect(textarea.checkValidity()).to.be.true;
+    expect(textarea.reportValidity()).to.be.true;
+});
+it('is valid after being filled in and required', async () => {
+    const template = '<glide-core-textarea required></glide-core-textarea>';
+    const textarea = await fixture(template);
+    textarea.focus();
+    await sendKeys({ type: 'value' });
+    expect(textarea.validity?.valid).to.be.true;
+    expect(textarea.validity?.valueMissing).to.be.false;
+    expect(textarea.validity?.tooLong).to.be.false;
+    expect(textarea.checkValidity()).to.be.true;
+    expect(textarea.reportValidity()).to.be.true;
+});
+it('is invalid if no value and required', async () => {
+    const template = '<glide-core-textarea required></glide-core-textarea>';
+    const textarea = await fixture(template);
+    expect(textarea.validity?.valid).to.be.false;
+    expect(textarea.validity?.valueMissing).to.be.true;
+    expect(textarea.validity?.tooLong).to.be.false;
+    expect(textarea.willValidate).to.be.true;
+    expect(textarea.checkValidity()).to.be.false;
+    expect(textarea.reportValidity()).to.be.false;
+});
+it('is valid when empty and does not exceed `maxlength`', async () => {
+    const template = '<glide-core-textarea maxlength="3"></glide-core-textarea>';
+    const textarea = await fixture(template);
+    expect(textarea.validity?.valid).to.be.true;
+    expect(textarea.validity?.valueMissing).to.be.false;
+    expect(textarea.validity?.tooLong).to.be.false;
+    expect(textarea.checkValidity()).to.be.true;
+    expect(textarea.reportValidity()).to.be.true;
+});
+it('is valid when filled in and does not exceed `maxlength`', async () => {
+    const template = '<glide-core-textarea maxlength="3"></glide-core-textarea>';
+    const textarea = await fixture(template);
+    textarea.focus();
+    await sendKeys({ type: 'abc' });
+    expect(textarea.validity?.valid).to.be.true;
+    expect(textarea.validity?.valueMissing).to.be.false;
+    expect(textarea.validity?.tooLong).to.be.false;
+    expect(textarea.checkValidity()).to.be.true;
+    expect(textarea.reportValidity()).to.be.true;
+});
+it('is invalid when filled in and exceeds `maxlength`', async () => {
+    const template = '<glide-core-textarea maxlength="3"></glide-core-textarea>';
+    const textarea = await fixture(template);
+    textarea.focus();
+    await sendKeys({ type: 'value' });
+    expect(textarea.validity?.valid).to.be.false;
+    expect(textarea.validity?.valueMissing).to.be.false;
+    expect(textarea.validity?.tooLong).to.be.true;
+    expect(textarea.checkValidity()).to.be.false;
+    expect(textarea.reportValidity()).to.be.false;
+});
+it('is valid if no value but required and disabled', async () => {
+    const template = '<glide-core-textarea required disabled></glide-core-textarea>';
+    const textarea = await fixture(template);
+    expect(textarea.validity?.valid).to.be.true;
+    expect(textarea.validity?.valueMissing).to.be.false;
+    expect(textarea.validity?.tooLong).to.be.false;
+    expect(textarea.checkValidity()).to.be.true;
+    expect(textarea.reportValidity()).to.be.true;
+});
+it('is valid when filled in, disabled, and exceeds `maxlength`', async () => {
+    const template = '<glide-core-textarea value="value" disabled maxlength="3"></glide-core-textarea>';
+    const textarea = await fixture(template);
+    expect(textarea.validity?.valid).to.be.true;
+    expect(textarea.validity?.valueMissing).to.be.false;
+    expect(textarea.validity?.tooLong).to.be.false;
+    expect(textarea.checkValidity()).to.be.true;
+    expect(textarea.reportValidity()).to.be.true;
+});

package/dist/toasts.js

@@ -1 +1 @@
-"use strict";var u=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var d=(t,e,o,i)=>{for(var r=i>1?void 0:i?v(e,o):e,a=t.length-1,s;a>=0;a--)(s=t[a])&&(r=(i?s(e,o,r):s(r))||r);return i&&r&&u(e,o,r),r};var g=(t,e,o)=>{if(!e.has(t))throw TypeError("Cannot "+o)};var m=(t,e,o)=>(g(t,e,"read from private field"),o?o.call(t):e.get(t)),p=(t,e,o)=>{if(e.has(t))throw TypeError("Cannot add the same private member more than once");e instanceof WeakSet?e.add(t):e.set(t,o)};var c;import"./toasts.toast.js";import{LitElement as f,html as E}from"lit";import{createRef as b,ref as h}from"lit/directives/ref.js";import{customElement as R}from"lit/decorators.js";import x from"./toasts.styles.js";let n=class extends f{constructor(){super(...arguments);p(this,c,b())}add(o){const{variant:i,label:r,description:a,duration:s}=o,l=Object.assign(document.createElement("glide-core-toast"),{variant:i,label:r,description:a,duration:s});return m(this,c).value.append(l),l.addEventListener("close",()=>{l.remove()},{once:!0}),l}render(){return E`<div class="component" role="region" tabindex="-1" aria-label="Notifications" ${h(m(this,c))}></div>`}};c=new WeakMap,n.shadowRootOptions={...f.shadowRootOptions,mode:"closed"},n.styles=x,n=d([R("glide-core-toasts")],n);export{n as default};
+var __decorate=this&&this.__decorate||function(e,t,o,s){var r,i=arguments.length,n=i<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,o):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,s);else for(var a=e.length-1;a>=0;a--)(r=e[a])&&(n=(i<3?r(n):i>3?r(t,o,n):r(t,o))||n);return i>3&&n&&Object.defineProperty(t,o,n),n};import"./toasts.toast.js";import{LitElement,html}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement}from"lit/decorators.js";import styles from"./toasts.styles.js";let GlideCoreToasts=class GlideCoreToasts extends LitElement{static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}add(e){const{variant:t,label:o,description:s,duration:r}=e,i=Object.assign(document.createElement("glide-core-toast"),{variant:t,label:o,description:s,duration:r});return this.#e.value.append(i),i.addEventListener("close",(()=>{i.remove()}),{once:!0}),i}render(){return html`<div class="component" role="region" tabindex="-1" aria-label="Notifications" ${ref(this.#e)}></div>`}#e=createRef()};GlideCoreToasts=__decorate([customElement("glide-core-toasts")],GlideCoreToasts);export default GlideCoreToasts;

package/dist/toasts.styles.js

@@ -1,4 +1,4 @@
-"use strict";import{css as i}from"lit";export default[i`
+import{css}from"lit";export default[css`
     .component {
       display: flex;
       flex-direction: column;
@@ -12,4 +12,4 @@
       padding: var(--glide-core-spacing-sm);
       position: fixed;
     }
-  `];
+  `];

package/dist/toasts.test.basics.js

@@ -0,0 +1,94 @@
+import { assert, expect, fixture, html } from '@open-wc/testing';
+import GlideCoreToasts from './toasts.js';
+GlideCoreToasts.shadowRootOptions.mode = 'open';
+// NOTE: Due to https://github.com/modernweb-dev/web/issues/2520, we sometimes need
+// to manually dispatch the `transitionend` event in tests.
+it('registers', async () => {
+    expect(window.customElements.get('glide-core-toasts')).to.equal(GlideCoreToasts);
+});
+it('is accessible', async () => {
+    const component = await fixture(html `<glide-core-toasts></glide-core-toasts>`);
+    component.add({
+        label: 'Test toast',
+        description: 'Test toast description',
+        variant: 'informational',
+    });
+    await expect(component).to.be.accessible();
+});
+it('sets correct role', async () => {
+    const component = await fixture(html `<glide-core-toasts></glide-core-toasts>`);
+    component.add({
+        label: 'Test toast',
+        description: 'Test toast description',
+        variant: 'informational',
+    });
+    expect(component.shadowRoot?.firstElementChild?.getAttribute('role')).to.equal('region');
+});
+it('can add a toast', async () => {
+    const component = await fixture(html `<glide-core-toasts></glide-core-toasts>`);
+    component.add({
+        label: 'Test toast',
+        description: 'Test toast description',
+        variant: 'informational',
+    });
+    const toasts = component.shadowRoot?.querySelectorAll('glide-core-toast');
+    assert(toasts);
+    expect(toasts.length).to.equal(1);
+    const toast = toasts[0];
+    expect(toast.label).to.equal('Test toast');
+    expect(toast.description).to.equal('Test toast description');
+    expect(toast.variant).to.equal('informational');
+});
+it('can add a toast with duration', async () => {
+    const component = await fixture(html `<glide-core-toasts></glide-core-toasts>`);
+    component.add({
+        label: 'Test toast',
+        description: 'Test toast description',
+        variant: 'informational',
+        duration: 10_000,
+    });
+    const toasts = component.shadowRoot?.querySelectorAll('glide-core-toast');
+    assert(toasts);
+    const toast = toasts[0];
+    expect(toast.duration).to.equal(10_000);
+});
+it('can add multiple toasts', async () => {
+    const component = await fixture(html `<glide-core-toasts></glide-core-toasts>`);
+    component.add({
+        label: 'Test toast',
+        description: 'Test toast description',
+        variant: 'informational',
+    });
+    component.add({
+        label: 'Test toast 2',
+        description: 'Test toast description 2',
+        variant: 'success',
+    });
+    const toasts = component.shadowRoot?.querySelectorAll('glide-core-toast');
+    assert(toasts);
+    expect(toasts.length).to.equal(2);
+    const toast1 = toasts[0];
+    expect(toast1.label).to.equal('Test toast');
+    expect(toast1.description).to.equal('Test toast description');
+    expect(toast1.variant).to.equal('informational');
+    const toast2 = toasts[1];
+    expect(toast2.label).to.equal('Test toast 2');
+    expect(toast2.description).to.equal('Test toast description 2');
+    expect(toast2.variant).to.equal('success');
+});
+it('removes a closed toast from the DOM', async () => {
+    const component = await fixture(html `<glide-core-toasts></glide-core-toasts>`);
+    component.add({
+        label: 'Test toast',
+        description: 'Test toast description',
+        variant: 'informational',
+    });
+    let toasts = component.shadowRoot?.querySelectorAll('glide-core-toast');
+    assert(toasts);
+    expect(toasts.length).to.equal(1);
+    const toast = toasts[0];
+    toast.close();
+    toast.dispatchEvent(new Event('close', { bubbles: true }));
+    toasts = component.shadowRoot?.querySelectorAll('glide-core-toast');
+    expect(toasts?.length).to.equal(0);
+});

package/dist/toasts.toast.js

@@ -1 +1 @@
-"use strict";var k=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var r=(i,e,t,l)=>{for(var o=l>1?void 0:l?w(e,t):e,u=i.length-1,h;u>=0;u--)(h=i[u])&&(o=(l?h(e,t,o):h(o))||o);return l&&o&&k(e,t,o),o};var v=(i,e,t)=>{if(!e.has(i))throw TypeError("Cannot "+t)};var a=(i,e,t)=>(v(i,e,"read from private field"),t?t.call(i):e.get(i)),c=(i,e,t)=>{if(e.has(i))throw TypeError("Cannot add the same private member more than once");e instanceof WeakSet?e.add(i):e.set(i,t)};var f=(i,e,t)=>(v(i,e,"access private method"),t);var n,m,b,p,L;import"./icon-button.js";import"./status-indicator.js";import"./tooltip.js";import{LitElement as g,html as E}from"lit";import{classMap as y}from"lit/directives/class-map.js";import{createRef as I,ref as M}from"lit/directives/ref.js";import{customElement as $,property as d}from"lit/decorators.js";import N from"./toasts.toast.styles.js";let s=class extends g{constructor(){super(...arguments);c(this,m);c(this,p);this.duration=5e3;c(this,n,I())}close(){const t=a(this,n)?.value;t?.addEventListener("transitionend",()=>{t?.classList?.remove("open"),t?.classList?.remove("closing"),t?.classList?.add("closed"),this.dispatchEvent(new Event("close",{bubbles:!0}))},{once:!0}),t?.classList?.add("closing")}firstUpdated(){requestAnimationFrame(()=>{this.open()})}open(){const t=Math.max(this.duration??0,5e3);t<Number.POSITIVE_INFINITY&&setTimeout(()=>{this.close()},t),a(this,n)?.value?.classList?.add("open")}render(){return E`<div class="${y({component:!0,[this.variant]:!0})}" role="alert" aria-labelledby="label description" ${M(a(this,n))}><glide-core-status-indicator style="--size: 1.25rem;" class="icon" variant="${a(this,p,L)}"></glide-core-status-indicator><div class="label" id="label">${this.label}</div><glide-core-icon-button label="Close" variant="tertiary" class="close-button" @click="${f(this,m,b)}"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><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-icon-button><div class="description" id="description">${this.description}</div></div>`}};n=new WeakMap,m=new WeakSet,b=function(){this.close()},p=new WeakSet,L=function(){return{informational:"warning-informational",success:"success"}[this.variant]},s.shadowRootOptions={...g.shadowRootOptions,mode:"closed"},s.styles=N,r([d({reflect:!0})],s.prototype,"label",2),r([d({reflect:!0})],s.prototype,"description",2),r([d()],s.prototype,"variant",2),r([d({type:Number})],s.prototype,"duration",2),s=r([$("glide-core-toast")],s);export{s as default};
+var __decorate=this&&this.__decorate||function(t,e,o,s){var i,r=arguments.length,a=r<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,o):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,o,s);else for(var n=t.length-1;n>=0;n--)(i=t[n])&&(a=(r<3?i(a):r>3?i(e,o,a):i(e,o))||a);return r>3&&a&&Object.defineProperty(e,o,a),a};import"./icon-button.js";import"./status-indicator.js";import"./tooltip.js";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 styles from"./toasts.toast.styles.js";let GlideCoreToast=class GlideCoreToast extends LitElement{constructor(){super(...arguments),this.duration=5e3,this.#t=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}close(){const t=this.#t?.value;t?.addEventListener("transitionend",(()=>{t?.classList?.remove("open"),t?.classList?.remove("closing"),t?.classList?.add("closed"),this.dispatchEvent(new Event("close",{bubbles:!0}))}),{once:!0}),t?.classList?.add("closing")}firstUpdated(){requestAnimationFrame((()=>{this.open()}))}open(){const t=Math.max(this.duration??0,5e3);t<Number.POSITIVE_INFINITY&&setTimeout((()=>{this.close()}),t),this.#t?.value?.classList?.add("open")}render(){return html`<div class="${classMap({component:!0,[this.variant]:!0})}" role="alert" aria-labelledby="label description" ${ref(this.#t)}><glide-core-status-indicator style="--size: 1.25rem;" class="icon" variant="${this.#e}"></glide-core-status-indicator><div class="label" id="label">${this.label}</div><glide-core-icon-button label="Close" variant="tertiary" class="close-button" @click="${this.#o}"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><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-icon-button><div class="description" id="description">${this.description}</div></div>`}#t;#o(){this.close()}get#e(){return{informational:"warning-informational",success:"success"}[this.variant]}};__decorate([property({reflect:!0})],GlideCoreToast.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreToast.prototype,"description",void 0),__decorate([property()],GlideCoreToast.prototype,"variant",void 0),__decorate([property({type:Number})],GlideCoreToast.prototype,"duration",void 0),GlideCoreToast=__decorate([customElement("glide-core-toast")],GlideCoreToast);export default GlideCoreToast;

package/dist/toasts.toast.styles.js

@@ -1,8 +1,9 @@
-"use strict";import{css as o}from"lit";export default[o`
+import{css}from"lit";export default[css`
     .component {
       align-items: center;
       border-radius: var(--glide-core-spacing-sm);
       box-shadow: var(--glide-core-shadow-lg);
+      color: var(--glide-core-text-body-2);
       column-gap: var(--glide-core-spacing-xs);
       display: grid;
       font-family: var(--glide-core-body-xs-font-family);
@@ -51,10 +52,12 @@
     }
 
     .close-button {
+      --icon-color: var(--glide-core-icon-default2);
+
       grid-column: 3;
     }
 
     .description {
       grid-column: 2;
     }
-  `];
+  `];

package/dist/toasts.toast.test.basics.js

@@ -0,0 +1,139 @@
+import { assert, expect, fixture, html } from '@open-wc/testing';
+import GlideCoreToast from './toasts.toast.js';
+import sinon from 'sinon';
+GlideCoreToast.shadowRootOptions.mode = 'open';
+// NOTE: Due to https://github.com/modernweb-dev/web/issues/2520, we sometimes need
+// to manually dispatch the `transitionend` event in tests.
+it('registers', async () => {
+    expect(window.customElements.get('glide-core-toast')).to.equal(GlideCoreToast);
+});
+it('is accessible', async () => {
+    const component = await fixture(html `<glide-core-toast
+      variant="informational"
+      label="Label"
+      description="Toast description"
+    ></glide-core-toast>`);
+    await expect(component).to.be.accessible();
+});
+it('sets correct role', async () => {
+    const component = await fixture(html `<glide-core-toast
+      variant="informational"
+      label="Label"
+      description="Toast description"
+    ></glide-core-toast>`);
+    expect(component.shadowRoot?.firstElementChild?.getAttribute('role')).to.equal('alert');
+});
+it('sets correct aria labelling', async () => {
+    const component = await fixture(html `<glide-core-toast
+      variant="informational"
+      label="Label"
+      description="Toast description"
+    ></glide-core-toast>`);
+    expect(component.shadowRoot?.firstElementChild?.getAttribute('aria-labelledby')).to.equal('label description');
+    expect(component.shadowRoot?.firstElementChild?.querySelector('#label')
+        ?.textContent).to.equal('Label');
+    expect(component.shadowRoot?.firstElementChild?.querySelector('#description')
+        ?.textContent).to.equal('Toast description');
+});
+it('sets variant, label, and description', async () => {
+    const component = await fixture(html `<glide-core-toast
+      variant="informational"
+      label="Label"
+      description="Toast description"
+    ></glide-core-toast>`);
+    await expect(component.variant).to.equal('informational');
+    await expect(component.label).to.equal('Label');
+    await expect(component.description).to.equal('Toast description');
+});
+it('opens and closes by default', async () => {
+    const clock = sinon.useFakeTimers();
+    const component = await fixture(html `<glide-core-toast
+      variant="informational"
+      label="Label"
+      description="Toast description"
+    ></glide-core-toast>`);
+    clock.tick(3000);
+    const shadowElement = component.shadowRoot.firstElementChild;
+    await expect([...shadowElement.classList]).to.deep.equal([
+        'component',
+        'informational',
+        'open',
+    ]);
+    clock.tick(3000);
+    shadowElement?.dispatchEvent(new TransitionEvent('transitionend'));
+    await expect([
+        ...component.shadowRoot.firstElementChild.classList,
+    ]).to.deep.equal(['component', 'informational', 'closed']);
+    clock.restore();
+});
+it('responds to duration', async () => {
+    const clock = sinon.useFakeTimers();
+    const component = await fixture(html `<glide-core-toast
+      variant="informational"
+      label="Label"
+      description="Toast description"
+      duration="10000"
+    ></glide-core-toast>`);
+    clock.tick(9500);
+    const shadowElement = component.shadowRoot.firstElementChild;
+    await expect([...shadowElement.classList]).to.deep.equal([
+        'component',
+        'informational',
+        'open',
+    ]);
+    clock.tick(1000);
+    shadowElement?.dispatchEvent(new TransitionEvent('transitionend'));
+    await expect([
+        ...component.shadowRoot.firstElementChild.classList,
+    ]).to.deep.equal(['component', 'informational', 'closed']);
+    clock.restore();
+});
+it('responds to duration of Infinity', async () => {
+    const clock = sinon.useFakeTimers();
+    const component = await fixture(html `<glide-core-toast
+      variant="informational"
+      label="Label"
+      description="Toast description"
+      duration="Infinity"
+    ></glide-core-toast>`);
+    clock.tick(9500);
+    const shadowElement = component.shadowRoot.firstElementChild;
+    await expect([...shadowElement.classList]).to.deep.equal([
+        'component',
+        'informational',
+        'open',
+    ]);
+    clock.restore();
+});
+it('does not allow less than 5000 duration', async () => {
+    const clock = sinon.useFakeTimers();
+    const component = await fixture(html `<glide-core-toast
+      variant="informational"
+      label="Label"
+      description="Toast description"
+      duration="3000"
+    ></glide-core-toast>`);
+    clock.tick(4000);
+    const shadowElement = component.shadowRoot.firstElementChild;
+    await expect([...shadowElement.classList]).to.deep.equal([
+        'component',
+        'informational',
+        'open',
+    ]);
+    clock.restore();
+});
+it('can be closed by clicking on the x icon', async () => {
+    const component = await fixture(html `<glide-core-toast
+      variant="informational"
+      label="Label"
+      description="Toast description"
+    ></glide-core-toast>`);
+    const shadowElement = component.shadowRoot.firstElementChild;
+    const closeButton = shadowElement?.querySelector('glide-core-icon-button[label="Close"]');
+    assert(closeButton);
+    closeButton.click();
+    shadowElement?.dispatchEvent(new TransitionEvent('transitionend'));
+    await expect([
+        ...component.shadowRoot.firstElementChild.classList,
+    ]).to.deep.equal(['component', 'informational', 'closed']);
+});