@crowdstrike/glide-core 0.8.0 → 0.9.0

package/dist/textarea.test.events.js

@@ -1,11 +1,10 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
 import './textarea.js';
 import * as sinon from 'sinon';
-import { aTimeout, expect, fixture, oneEvent } from '@open-wc/testing';
+import { aTimeout, expect, fixture, html, 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);
+    const textarea = await fixture(html `<glide-core-textarea label="label"></glide-core-textarea>`);
     setTimeout(async () => {
         textarea.focus();
         await sendKeys({ type: 'testing' });
@@ -16,8 +15,7 @@ it('dispatches a `input` event when typed in', async () => {
     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);
+    const textarea = await fixture(html `<glide-core-textarea label="label"></glide-core-textarea>`);
     setTimeout(async () => {
         textarea.focus();
         await sendKeys({ type: 'testing' });
@@ -29,8 +27,7 @@ it('dispatches an `change` event when typed in', async () => {
 });
 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, {
+    const textarea = await fixture(html `<glide-core-textarea label="label" required></glide-core-textarea>`, {
         parentNode: form,
     });
     setTimeout(() => form.requestSubmit());
@@ -39,8 +36,7 @@ it('dispatches an `invalid` event on submit when required and no value', async (
 });
 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, {
+    const textarea = await fixture(html `<glide-core-textarea label="label" required></glide-core-textarea>`, {
         parentNode: form,
     });
     setTimeout(() => textarea.checkValidity());
@@ -49,8 +45,7 @@ it('dispatches an `invalid` event after `checkValidity` is called when required
 });
 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, {
+    const textarea = await fixture(html `<glide-core-textarea label="label" required></glide-core-textarea>`, {
         parentNode: form,
     });
     setTimeout(() => textarea.reportValidity());
@@ -59,56 +54,62 @@ it('dispatches an `invalid` event after `reportValidity` is called when required
 });
 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, {
+    const textarea = await fixture(html `<glide-core-textarea label="label"></glide-core-textarea>`, {
         parentNode: form,
     });
     const spy = sinon.spy();
     textarea.addEventListener('invalid', spy);
     textarea.checkValidity();
     await aTimeout(0);
-    expect(spy.notCalled).to.be.true;
+    expect(spy.callCount).to.equal(0);
 });
 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, {
+    const textarea = await fixture(html `<glide-core-textarea
+      label="label"
+      required
+      disabled
+    ></glide-core-textarea>`, {
         parentNode: form,
     });
     const spy = sinon.spy();
     textarea.addEventListener('invalid', spy);
     textarea.checkValidity();
     await aTimeout(0);
-    expect(spy.notCalled).to.be.true;
+    expect(spy.callCount).to.equal(0);
 });
 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, {
+    const textarea = await fixture(html `<glide-core-textarea label="label"></glide-core-textarea>`, {
         parentNode: form,
     });
     const spy = sinon.spy();
     textarea.addEventListener('invalid', spy);
     textarea.reportValidity();
     await aTimeout(0);
-    expect(spy.notCalled).to.be.true;
+    expect(spy.callCount).to.equal(0);
 });
 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, {
+    const textarea = await fixture(html `<glide-core-textarea
+      label="label"
+      required
+      disabled
+    ></glide-core-textarea>`, {
         parentNode: form,
     });
     const spy = sinon.spy();
     textarea.addEventListener('invalid', spy);
     textarea.reportValidity();
     await aTimeout(0);
-    expect(spy.notCalled).to.be.true;
+    expect(spy.callCount).to.equal(0);
 });
 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, {
+    const textarea = await fixture(html `<glide-core-textarea
+      label="label"
+      maxlength="3"
+    ></glide-core-textarea>`, {
         parentNode: form,
     });
     setTimeout(async () => {
@@ -121,8 +122,10 @@ it('dispatches an `invalid` event after `requestSubmit` is called when `maxlengt
 });
 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, {
+    const textarea = await fixture(html `<glide-core-textarea
+      label="label"
+      maxlength="3"
+    ></glide-core-textarea>`, {
         parentNode: form,
     });
     setTimeout(async () => {
@@ -135,8 +138,10 @@ it('dispatches an `invalid` event after `checkValidity` is called when `maxlengt
 });
 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, {
+    const textarea = await fixture(html `<glide-core-textarea
+      label="label"
+      maxlength="3"
+    ></glide-core-textarea>`, {
         parentNode: form,
     });
     setTimeout(async () => {
@@ -149,8 +154,10 @@ it('dispatches an `invalid` event after `reportValidity` is called when `maxleng
 });
 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, {
+    const textarea = await fixture(html `<glide-core-textarea
+      label="label"
+      maxlength="3"
+    ></glide-core-textarea>`, {
         parentNode: form,
     });
     const spy = sinon.spy();
@@ -159,12 +166,15 @@ it('does not dispatch an `invalid` event after `checkValidity` is called when `m
     await sendKeys({ type: 'ab' });
     textarea.checkValidity();
     await aTimeout(0);
-    expect(spy.notCalled).to.be.true;
+    expect(spy.callCount).to.equal(0);
 });
 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, {
+    const textarea = await fixture(html `<glide-core-textarea
+      label="label"
+      maxlength="3"
+      disabled
+    ></glide-core-textarea>`, {
         parentNode: form,
     });
     const spy = sinon.spy();
@@ -173,12 +183,14 @@ it('does not dispatch an `invalid` event after `checkValidity` is called when `m
     await sendKeys({ type: 'test' });
     textarea.checkValidity();
     await aTimeout(0);
-    expect(spy.notCalled).to.be.true;
+    expect(spy.callCount).to.equal(0);
 });
 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, {
+    const textarea = await fixture(html `<glide-core-textarea
+      label="label"
+      maxlength="3"
+    ></glide-core-textarea>`, {
         parentNode: form,
     });
     const spy = sinon.spy();
@@ -187,12 +199,15 @@ it('does not dispatch an `invalid` event when `reportValidity` is called and `ma
     await sendKeys({ type: 'ab' });
     textarea.reportValidity();
     await aTimeout(0);
-    expect(spy.notCalled).to.be.true;
+    expect(spy.callCount).to.equal(0);
 });
 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, {
+    const textarea = await fixture(html `<glide-core-textarea
+      label="label"
+      maxlength="3"
+      disabled
+    ></glide-core-textarea>`, {
         parentNode: form,
     });
     const spy = sinon.spy();
@@ -201,5 +216,5 @@ it('does not dispatch an `invalid` event when `reportValidity` is called `maxlen
     await sendKeys({ type: 'test' });
     textarea.reportValidity();
     await aTimeout(0);
-    expect(spy.notCalled).to.be.true;
+    expect(spy.callCount).to.equal(0);
 });

package/dist/textarea.test.translations.d.ts

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

package/dist/textarea.test.translations.js

@@ -0,0 +1,34 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
+import GlideCoreTextarea from './textarea.js';
+GlideCoreTextarea.shadowRootOptions.mode = 'open';
+it('renders dynamic strings in Japanese', async () => {
+    const element = await fixture(html `
+    <glide-core-textarea
+      label="Test"
+      value="lorem"
+      maxlength="40"
+    ></glide-core-textarea>
+  `);
+    document.documentElement.setAttribute('lang', 'ja');
+    await elementUpdated(element);
+    const maxCharacterCountText = element.shadowRoot?.querySelector('[data-test="character-count-text"]');
+    expect(maxCharacterCountText?.textContent?.trim()).to.equal('5/40');
+    const maxCharacterCountAnnouncement = element.shadowRoot?.querySelector('[data-test="character-count-announcement"]');
+    expect(maxCharacterCountAnnouncement?.textContent?.trim()).to.equal('Character count 5 of 40');
+});
+it('renders dynamic strings in French', async () => {
+    const element = await fixture(html `
+    <glide-core-textarea
+      label="Test"
+      value="lorem"
+      maxlength="40"
+    ></glide-core-textarea>
+  `);
+    document.documentElement.setAttribute('lang', 'fr');
+    await elementUpdated(element);
+    const maxCharacterCountText = element.shadowRoot?.querySelector('[data-test="character-count-text"]');
+    expect(maxCharacterCountText?.textContent?.trim()).to.equal('5/40');
+    const maxCharacterCountAnnouncement = element.shadowRoot?.querySelector('[data-test="character-count-announcement"]');
+    expect(maxCharacterCountAnnouncement?.textContent?.trim()).to.equal('Character count 5 of 40');
+});

package/dist/textarea.test.validity.js

@@ -1,20 +1,20 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
-import { expect, fixture, html } from '@open-wc/testing';
+import { elementUpdated, expect, fixture, html } 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);
+    const textarea = await fixture(html `<glide-core-textarea></glide-core-textarea>`);
     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;
+    await elementUpdated(textarea);
+    expect(textarea.shadowRoot?.querySelector('textarea')).to.have.attribute('aria-invalid', 'false');
 });
 it('is valid after being filled in and required', async () => {
-    const template = '<glide-core-textarea required></glide-core-textarea>';
-    const textarea = await fixture(template);
+    const textarea = await fixture(html `<glide-core-textarea required></glide-core-textarea>`);
     textarea.focus();
     await sendKeys({ type: 'value' });
     expect(textarea.validity?.valid).to.be.true;
@@ -22,29 +22,32 @@ it('is valid after being filled in and required', async () => {
     expect(textarea.validity?.tooLong).to.be.false;
     expect(textarea.checkValidity()).to.be.true;
     expect(textarea.reportValidity()).to.be.true;
+    await elementUpdated(textarea);
+    expect(textarea.shadowRoot?.querySelector('textarea')).to.have.attribute('aria-invalid', 'false');
 });
 it('is invalid if no value and required', async () => {
-    const template = '<glide-core-textarea required></glide-core-textarea>';
-    const textarea = await fixture(template);
+    const textarea = await fixture(html `<glide-core-textarea required></glide-core-textarea>`);
     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;
+    await elementUpdated(textarea);
+    expect(textarea.shadowRoot?.querySelector('textarea')).to.have.attribute('aria-invalid', 'true');
 });
 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);
+    const textarea = await fixture(html `<glide-core-textarea maxlength="3"></glide-core-textarea>`);
     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;
+    await elementUpdated(textarea);
+    expect(textarea.shadowRoot?.querySelector('textarea')).to.have.attribute('aria-invalid', 'false');
 });
 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);
+    const textarea = await fixture(html `<glide-core-textarea maxlength="3"></glide-core-textarea>`);
     textarea.focus();
     await sendKeys({ type: 'abc' });
     expect(textarea.validity?.valid).to.be.true;
@@ -52,10 +55,11 @@ it('is valid when filled in and does not exceed `maxlength`', async () => {
     expect(textarea.validity?.tooLong).to.be.false;
     expect(textarea.checkValidity()).to.be.true;
     expect(textarea.reportValidity()).to.be.true;
+    await elementUpdated(textarea);
+    expect(textarea.shadowRoot?.querySelector('textarea')).to.have.attribute('aria-invalid', 'false');
 });
 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);
+    const textarea = await fixture(html `<glide-core-textarea maxlength="3"></glide-core-textarea>`);
     textarea.focus();
     await sendKeys({ type: 'value' });
     expect(textarea.validity?.valid).to.be.false;
@@ -63,24 +67,104 @@ it('is invalid when filled in and exceeds `maxlength`', async () => {
     expect(textarea.validity?.tooLong).to.be.true;
     expect(textarea.checkValidity()).to.be.false;
     expect(textarea.reportValidity()).to.be.false;
+    await elementUpdated(textarea);
+    expect(textarea.shadowRoot?.querySelector('textarea')).to.have.attribute('aria-invalid', 'true');
 });
 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);
+    const textarea = await fixture(html `<glide-core-textarea required disabled></glide-core-textarea>`);
+    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;
+    await elementUpdated(textarea);
+    expect(textarea.shadowRoot?.querySelector('textarea')).to.have.attribute('aria-invalid', 'false');
+});
+it('updates validity when `required` and `value` is changed programmatically', async () => {
+    const textarea = await fixture(html `<glide-core-textarea label="Label" required></glide-core-textarea>`);
+    expect(textarea.validity?.valid).to.be.false;
+    expect(textarea.validity?.valueMissing).to.be.true;
+    expect(textarea.checkValidity()).to.be.false;
+    expect(textarea.reportValidity()).to.be.false;
+    await elementUpdated(textarea);
+    expect(textarea.shadowRoot?.querySelector('textarea')).to.have.attribute('aria-invalid', 'true');
+    textarea.value = 'text';
+    await elementUpdated(textarea);
+    expect(textarea.validity?.valid).to.be.true;
+    expect(textarea.validity?.valueMissing).to.be.false;
+    expect(textarea.checkValidity()).to.be.true;
+    expect(textarea.reportValidity()).to.be.true;
+    await elementUpdated(textarea);
+    expect(textarea.shadowRoot?.querySelector('textarea')).to.have.attribute('aria-invalid', 'false');
+    // Resetting the value to empty to ensure it goes
+    // back to an invalid state
+    textarea.value = '';
+    await elementUpdated(textarea);
+    expect(textarea.validity?.valid).to.be.false;
+    expect(textarea.validity?.valueMissing).to.be.true;
+    expect(textarea.checkValidity()).to.be.false;
+    expect(textarea.reportValidity()).to.be.false;
+    expect(textarea.shadowRoot?.querySelector('textarea')).to.have.attribute('aria-invalid', 'true');
+});
+it('is invalid when `value` is empty and `required` is set to `true` programmatically', async () => {
+    const textarea = await fixture(html `<glide-core-textarea label="Label"></glide-core-textarea>`);
+    expect(textarea.validity?.valid).to.be.true;
+    expect(textarea.validity?.valueMissing).to.be.false;
+    expect(textarea.checkValidity()).to.be.true;
+    expect(textarea.reportValidity()).to.be.true;
+    await elementUpdated(textarea);
+    expect(textarea.shadowRoot?.querySelector('textarea')).to.have.attribute('aria-invalid', 'false');
+    textarea.required = true;
+    await elementUpdated(textarea);
+    expect(textarea.validity?.valid).to.be.false;
+    expect(textarea.validity?.valueMissing).to.be.true;
+    expect(textarea.checkValidity()).to.be.false;
+    expect(textarea.reportValidity()).to.be.false;
+    expect(textarea.shadowRoot?.querySelector('textarea')).to.have.attribute('aria-invalid', 'true');
+});
+it('is valid when `value` is empty and `required` is set to `false` programmatically', async () => {
+    const textarea = await fixture(html `<glide-core-textarea label="Label" required></glide-core-textarea>`);
+    expect(textarea.validity?.valid).to.be.false;
+    expect(textarea.validity?.valueMissing).to.be.true;
+    expect(textarea.checkValidity()).to.be.false;
+    expect(textarea.reportValidity()).to.be.false;
+    await elementUpdated(textarea);
+    expect(textarea.shadowRoot?.querySelector('textarea')).to.have.attribute('aria-invalid', 'true');
+    textarea.required = false;
+    await elementUpdated(textarea);
+    expect(textarea.validity?.valid).to.be.true;
+    expect(textarea.validity?.valueMissing).to.be.false;
+    expect(textarea.checkValidity()).to.be.true;
+    expect(textarea.reportValidity()).to.be.true;
+    expect(textarea.shadowRoot?.querySelector('textarea')).to.have.attribute('aria-invalid', 'false');
+});
+it('is valid when filled in, disabled, and value exceeds `maxlength`', async () => {
+    const textarea = await fixture(html `<glide-core-textarea
+      value="value"
+      disabled
+      maxlength="3"
+    ></glide-core-textarea>`);
     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;
+    await elementUpdated(textarea);
+    expect(textarea.shadowRoot?.querySelector('textarea')).to.have.attribute('aria-invalid', 'false');
 });
-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);
+it('is valid when filled in, readonly, and value exceeds `maxlength`', async () => {
+    const textarea = await fixture(html `<glide-core-textarea
+      value="value"
+      readonly
+      maxlength="3"
+    ></glide-core-textarea>`);
     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;
+    await elementUpdated(textarea);
+    expect(textarea.shadowRoot?.querySelector('textarea')).to.have.attribute('aria-invalid', 'false');
 });
 it('blurs the textarea and reports validity if `blur` is called', async () => {
     const textarea = await fixture(html `<glide-core-textarea required></glide-core-textarea>`);
@@ -91,6 +175,6 @@ it('blurs the textarea and reports validity if `blur` is called', async () => {
     await textarea.updateComplete;
     expect(textarea.shadowRoot?.activeElement === null).to.be.true;
     expect(textarea.validity.valid).to.equal(false);
-    expect(textarea.shadowRoot?.querySelector('glide-core-label')?.error).to.be
-        .true;
+    expect(textarea.shadowRoot?.querySelector('glide-core-private-label')?.error)
+        .to.be.true;
 });

package/dist/toasts.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,r){var s,i=arguments.length,l=i<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(s=e[n])&&(l=(i<3?s(l):i>3?s(t,o,l):s(t,o))||l);return i>3&&l&&Object.defineProperty(t,o,l),l};import"./toasts.toast.js";import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement}from"lit/decorators.js";import ow from"./library/ow.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:r,duration:s}=e,i=Object.assign(document.createElement("glide-core-toast"),{variant:t,label:o,description:r,duration:s});return ow(this.#e.value,ow.object.instanceOf(Element)),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="${this.#t.term("notifications")}" ${ref(this.#e)}></div>`}#e=createRef();#t=new LocalizeController(this)};GlideCoreToasts=__decorate([customElement("glide-core-toasts")],GlideCoreToasts);export default GlideCoreToasts;
+var __decorate=this&&this.__decorate||function(e,t,o,r){var l,s=arguments.length,n=s<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,r);else for(var i=e.length-1;i>=0;i--)(l=e[i])&&(n=(s<3?l(n):s>3?l(t,o,n):l(t,o))||n);return s>3&&n&&Object.defineProperty(t,o,n),n};import"./toasts.toast.js";import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement}from"lit/decorators.js";import ow from"./library/ow.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){ow(this.#e.value,ow.object.instanceOf(Element)),this.#e.value.popover="manual",this.#e.value.showPopover();const{variant:t,label:o,description:r,duration:l}=e,s=Object.assign(document.createElement("glide-core-toast"),{variant:t,label:o,description:r,duration:l});return this.#e.value.append(s),s.addEventListener("close",(()=>{s.remove(),0===this.#e.value?.querySelectorAll("glide-core-toast").length&&this.#e.value?.hidePopover()}),{once:!0}),s}render(){return html`<div class="component" role="region" tabindex="-1" aria-label="${this.#t.term("notifications")}" ${ref(this.#e)}></div>`}#e=createRef();#t=new LocalizeController(this)};GlideCoreToasts=__decorate([customElement("glide-core-toasts")],GlideCoreToasts);export default GlideCoreToasts;

package/dist/toasts.styles.js

@@ -1,15 +1,22 @@
 import{css}from"lit";export default[css`
     .component {
-      display: flex;
+      background-color: transparent;
+      border: none;
+      display: none;
       flex-direction: column;
       gap: var(--glide-core-spacing-md);
       inline-size: 24.25rem;
       inset-block-start: 0;
       inset-inline-end: 0;
+      margin: 0 0 auto auto;
       max-block-size: 100%;
       max-inline-size: 100%;
       overflow: hidden;
       padding: var(--glide-core-spacing-sm);
       position: fixed;
+
+      &:popover-open {
+        display: flex;
+      }
     }
   `];

package/dist/toasts.test.basics.js

@@ -92,3 +92,23 @@ it('removes a closed toast from the DOM', async () => {
     toasts = component.shadowRoot?.querySelectorAll('glide-core-toast');
     expect(toasts?.length).to.equal(0);
 });
+it('is hidden unless there are toasts displayed', async () => {
+    const component = await fixture(html `<glide-core-toasts></glide-core-toasts>`);
+    const shadowComponent = component.shadowRoot?.querySelector('.component');
+    assert(shadowComponent);
+    expect(shadowComponent.hasAttribute('popover')).to.equal(false);
+    expect(getComputedStyle(shadowComponent).display).to.equal('none');
+    component.add({
+        label: 'Test toast',
+        description: 'Test toast description',
+        variant: 'informational',
+    });
+    expect(shadowComponent.getAttribute('popover')).to.equal('manual');
+    expect(getComputedStyle(shadowComponent).display).to.equal('flex');
+    const toasts = component.shadowRoot?.querySelectorAll('glide-core-toast');
+    assert(toasts);
+    const toast = toasts[0];
+    toast.close();
+    toast.dispatchEvent(new Event('close', { bubbles: true }));
+    expect(getComputedStyle(shadowComponent).display).to.equal('none');
+});

package/dist/toggle.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,i){var l,r=arguments.length,s=r<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,i);else for(var d=e.length-1;d>=0;d--)(l=e[d])&&(s=(r<3?l(s):r>3?l(t,o,s):l(t,o))||s);return r>3&&s&&Object.defineProperty(t,o,s),s};import"./label.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 styles from"./toggle.styles.js";let GlideCoreToggle=class GlideCoreToggle extends LitElement{constructor(){super(...arguments),this.checked=!1,this.disabled=!1,this.hideLabel=!1,this.orientation="horizontal",this.#e=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}click(){this.#e.value?.click()}focus(e){this.#e.value?.focus(e)}render(){return html`<div data-test="component"><glide-core-label orientation="${this.orientation}" split="${ifDefined(this.privateSplit??void 0)}" ?disabled="${this.disabled}" ?hide="${this.hideLabel}"><slot name="tooltip" slot="tooltip"></slot><label for="input">${this.label}</label><div class="toggle-and-input" slot="control"><input aria-checked="${this.checked}" aria-describedby="summary description" data-test="input" id="input" role="switch" type="checkbox" ?checked="${this.checked}" ?disabled="${this.disabled}" @change="${this.#t}" ${ref(this.#e)}></div><div slot="summary" id="summary">${this.summary}</div><slot class="description" id="description" name="description" slot="description"></slot></glide-core-label></div>`}#e;#t(e){e.target instanceof HTMLInputElement&&(this.checked=e.target.checked),this.dispatchEvent(new Event(e.type,e))}};__decorate([property({type:Boolean})],GlideCoreToggle.prototype,"checked",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreToggle.prototype,"disabled",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreToggle.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"name",void 0),__decorate([property()],GlideCoreToggle.prototype,"privateSplit",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"summary",void 0),GlideCoreToggle=__decorate([customElement("glide-core-toggle")],GlideCoreToggle);export default GlideCoreToggle;
+var __decorate=this&&this.__decorate||function(e,t,o,i){var r,l=arguments.length,s=l<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,i);else for(var d=e.length-1;d>=0;d--)(r=e[d])&&(s=(l<3?r(s):l>3?r(t,o,s):r(t,o))||s);return l>3&&s&&Object.defineProperty(t,o,s),s};import"./label.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 styles from"./toggle.styles.js";let GlideCoreToggle=class GlideCoreToggle extends LitElement{constructor(){super(...arguments),this.checked=!1,this.disabled=!1,this.hideLabel=!1,this.orientation="horizontal",this.#e=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}click(){this.#e.value?.click()}focus(e){this.#e.value?.focus(e)}render(){return html`<div data-test="component"><glide-core-private-label orientation="${this.orientation}" split="${ifDefined(this.privateSplit??void 0)}" ?disabled="${this.disabled}" ?hide="${this.hideLabel}"><slot name="tooltip" slot="tooltip"></slot><label for="input">${this.label}</label><div class="toggle-and-input" slot="control"><input aria-checked="${this.checked}" aria-describedby="summary description" data-test="input" id="input" role="switch" type="checkbox" ?checked="${this.checked}" ?disabled="${this.disabled}" @change="${this.#t}" ${ref(this.#e)}></div><div slot="summary" id="summary">${this.summary}</div><slot class="description" id="description" name="description" slot="description"></slot></glide-core-private-label></div>`}#e;#t(e){e.target instanceof HTMLInputElement&&(this.checked=e.target.checked),this.dispatchEvent(new Event(e.type,e))}};__decorate([property({type:Boolean})],GlideCoreToggle.prototype,"checked",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreToggle.prototype,"disabled",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreToggle.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"name",void 0),__decorate([property()],GlideCoreToggle.prototype,"privateSplit",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"summary",void 0),GlideCoreToggle=__decorate([customElement("glide-core-toggle")],GlideCoreToggle);export default GlideCoreToggle;

package/dist/toggle.test.focus.js

@@ -1,7 +1,7 @@
 import { expect, fixture, html } from '@open-wc/testing';
 import GlideCoreToggle from './toggle.js';
 GlideCoreToggle.shadowRootOptions.mode = 'open';
-it('focuses the input when `focus` is called', async () => {
+it('focuses the input when `focus()` is called', async () => {
     const component = await fixture(html `<glide-core-toggle label="Label"></glide-core-toggle>`);
     component.focus();
     const input = component.shadowRoot?.querySelector('[data-test="input"]');

package/dist/toggle.test.interactions.d.ts

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

package/dist/tooltip.d.ts

@@ -12,12 +12,14 @@ export default class GlideCoreTooltip extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
-    disabled: boolean;
+    get disabled(): boolean;
+    set disabled(isDisabled: boolean);
+    offset: number;
+    get open(): boolean;
+    set open(isOpen: boolean);
     placement?: 'bottom' | 'left' | 'right' | 'top';
-    containingBlock?: Element;
+    disconnectedCallback(): void;
     firstUpdated(): void;
-    private get isVisible();
-    private set isVisible(value);
     render(): import("lit").TemplateResult<1>;
-    setContainingBlock(containingBlock: Element): void;
+    private effectivePlacement;
 }

package/dist/tooltip.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,i){var l,s=arguments.length,a=s<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,o,i);else for(var r=e.length-1;r>=0;r--)(l=e[r])&&(a=(s<3?l(a):s>3?l(t,o,a):l(t,o))||a);return s>3&&a&&Object.defineProperty(t,o,a),a};import{LitElement,html}from"lit";import{arrow,autoUpdate,computePosition,flip,offset,platform,shift}from"@floating-ui/dom";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{offsetParent}from"composed-offset-position";import{owSlot}from"./library/ow.js";import styles from"./tooltip.styles.js";let GlideCoreTooltip=class GlideCoreTooltip extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.#e=createRef(),this.#t=createRef(),this.#o=!1,this.#i=createRef(),this.#l=createRef(),this.#s=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlot(this.#t.value),owSlot(this.#l.value),this.#a()}get isVisible(){return this.#o}set isVisible(e){this.#o=e,this.isVisible?this.#a():this.#r?.()}render(){return html`<div class="component" @mouseover="${this.#n}" @mouseout="${this.#f}"><div aria-labelledby="${ifDefined(this.disabled?void 0:"tooltip")}" class="target" slot="target" @focusin="${this.#p}" @focusout="${this.#c}" @keydown="${this.#d}" ${ref(this.#i)}><slot @slotchange="${this.#m}" ${ref(this.#l)} name="target"></slot></div><div class="${classMap({tooltip:!0,visible:this.isVisible&&!this.disabled})}" id="tooltip" role="${ifDefined(this.disabled?void 0:"tooltip")}" ${ref(this.#s)}><span aria-label="${ifDefined(this.disabled?void 0:"Tooltip: ")}"></span><slot @slotchange="${this.#h}" ${ref(this.#t)}></slot><div class="arrow" ${ref(this.#e)}></div></div></div>`}setContainingBlock(e){this.containingBlock=e}#e;#r;#u;#t;#o;#i;#l;#s;#g(){clearTimeout(this.#u)}#h(){owSlot(this.#t.value)}#p(){this.isVisible=!0}#c(){this.isVisible=!1}#d(e){"Escape"===e.key&&(this.isVisible=!1)}#f(){this.#R()}#n(){this.#g(),this.isVisible=!0}#m(){owSlot(this.#l.value)}#R(){this.#u=setTimeout((()=>{this.isVisible=!1}),200)}#a(){this.#i.value&&this.#s.value&&(this.#r=autoUpdate(this.#i.value,this.#s.value,(()=>{(async()=>{if(this.#i.value&&this.#s.value){const e=this.#e.value,{placement:t,x:o,y:i,middlewareData:l}=await computePosition(this.#i.value,this.#s.value,{platform:{...platform,getOffsetParent:e=>this.containingBlock&&e!==this.#e.value?this.containingBlock:platform.getOffsetParent(e,offsetParent)},placement:this.placement,strategy:"fixed",middleware:[offset(6),flip({fallbackStrategy:"initialPlacement"}),shift(),arrow({element:e})]});Object.assign(this.#s.value.style,{left:`${o}px`,top:`${i}px`});const s=l.arrow?.x??null,a=l.arrow?.y??null,r={top:"bottom",right:"left",bottom:"top",left:"right"}[t.split("-")[0]];Object.assign(e.style,{left:null===s?"":`${s}px`,top:null===a?"":`${a}px`,right:"",bottom:"",[r]:"-3px"})}})()})))}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreTooltip.prototype,"disabled",void 0),__decorate([property()],GlideCoreTooltip.prototype,"placement",void 0),__decorate([state()],GlideCoreTooltip.prototype,"containingBlock",void 0),__decorate([state()],GlideCoreTooltip.prototype,"isVisible",null),GlideCoreTooltip=__decorate([customElement("glide-core-tooltip")],GlideCoreTooltip);export default GlideCoreTooltip;
+var __decorate=this&&this.__decorate||function(e,t,o,l){var i,s=arguments.length,a=s<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--)(i=e[n])&&(a=(s<3?i(a):s>3?i(t,o,a):i(t,o))||a);return s>3&&a&&Object.defineProperty(t,o,a),a};import{LitElement,html}from"lit";import{arrow,autoUpdate,computePosition,flip,limitShift,offset,shift}from"@floating-ui/dom";import{choose}from"lit/directives/choose.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import ow,{owSlot}from"./library/ow.js";import styles from"./tooltip.styles.js";let GlideCoreTooltip=class GlideCoreTooltip extends LitElement{constructor(){super(...arguments),this.offset=4,this.effectivePlacement=this.placement??"bottom",this.#e=createRef(),this.#t=createRef(),this.#o=!1,this.#l=!1,this.#i=createRef(),this.#s=createRef(),this.#a=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}get disabled(){return this.#o}set disabled(e){this.#o=e,this.open&&!e?this.#n():this.#r()}get open(){return this.#l}set open(e){this.#l=e,e&&!this.disabled?this.#n():this.#r()}disconnectedCallback(){super.disconnectedCallback(),clearTimeout(this.#f),clearTimeout(this.#p)}firstUpdated(){owSlot(this.#t.value),owSlot(this.#s.value),ow(this.#a.value,ow.object.instanceOf(HTMLElement)),this.#a.value.popover="manual",this.open&&!this.disabled&&this.#n()}render(){return html`<div class="component" @mouseover="${this.#h}" @mouseout="${this.#d}"><div aria-labelledby="${ifDefined(this.disabled?void 0:"tooltip")}" class="target" data-test="target" slot="target" @focusin="${this.#c}" @focusout="${this.#m}" @keydown="${this.#u}" ${ref(this.#i)}><slot @slotchange="${this.#v}" ${ref(this.#s)} name="target"></slot></div><div class="${classMap({tooltip:!0,[this.effectivePlacement]:!0})}" id="tooltip" data-test="tooltip" data-open-delay="300" data-close-delay="200" role="${ifDefined(this.disabled?void 0:"tooltip")}" ${ref(this.#a)}><div class="${classMap({arrow:!0,[this.effectivePlacement]:!0})}" data-test="arrow" ${ref(this.#e)}>${choose(this.effectivePlacement,[["top",()=>html`<svg viewBox="0 0 10 6" fill="none"><path d="M4.23178 5.07814C4.63157 5.55789 5.36843 5.55789 5.76822 5.07813L10 -7.9486e-08L-2.62268e-07 3.57628e-07L4.23178 5.07814Z" fill="#212121"/></svg>`],["right",()=>html`<svg viewBox="0 0 6 10" fill="none"><path d="M0.921865 4.23178C0.442111 4.63157 0.442112 5.36843 0.921866 5.76822L6 10L6 -2.62268e-07L0.921865 4.23178Z" fill="#212121"/></svg>`],["bottom",()=>html`<svg viewBox="0 0 10 6" fill="none"><path d="M4.23178 0.921865C4.63157 0.442111 5.36843 0.442112 5.76822 0.921866L10 6L-2.62268e-07 6L4.23178 0.921865Z" fill="#212121"/></svg>`],["left",()=>html`<svg viewBox="0 0 6 10" fill="none"><path d="M5.07814 4.23178C5.55789 4.63157 5.55789 5.36843 5.07813 5.76822L-4.37114e-07 10L0 -2.62268e-07L5.07814 4.23178Z" fill="#212121"/></svg>`]])}</div><span aria-label="${ifDefined(this.disabled?void 0:"Tooltip: ")}"></span><slot class="default-slot" @slotchange="${this.#R}" ${ref(this.#t)}></slot></div></div>`}#e;#g;#f;#t;#o;#l;#p;#i;#s;#a;#E(){clearTimeout(this.#f)}#r(){this.#a.value?.hidePopover(),this.#g&&this.#g()}#R(){owSlot(this.#t.value)}#c(){this.open=!0}#m(){this.open=!1}#u(e){"Escape"===e.key&&(this.open=!1)}#d(){this.#w(),clearTimeout(this.#p)}#h(){ow(this.#a.value,ow.object.instanceOf(HTMLElement)),this.#E(),this.#p=setTimeout((()=>{this.open=!0}),Number(this.#a.value.dataset.openDelay))}#v(){owSlot(this.#s.value)}#w(){ow(this.#a.value,ow.object.instanceOf(HTMLElement)),this.#f=setTimeout((()=>{this.open=!1}),Number(this.#a.value.dataset.closeDelay))}#n(){this.disabled||(this.#g?.(),this.#i.value&&this.#a.value&&(this.#g=autoUpdate(this.#i.value,this.#a.value,(()=>{(async()=>{if(this.#i.value&&this.#a.value&&this.#e.value){const{x:e,y:t,placement:o,middlewareData:l}=await computePosition(this.#i.value,this.#a.value,{placement:this.placement,middleware:[offset(this.offset),flip({fallbackStrategy:"initialPlacement"}),shift({limiter:limitShift({offset:20})}),arrow({element:this.#e.value})]});Object.assign(this.#a.value.style,{left:`${e}px`,top:`${t}px`}),Object.assign(this.#e.value.style,{left:l.arrow?.x?`${l.arrow.x}px`:null,top:l.arrow?.y?`${l.arrow.y}px`:null}),this.effectivePlacement=o,this.#a.value.showPopover()}})()}))))}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreTooltip.prototype,"disabled",null),__decorate([property({reflect:!0,type:Number})],GlideCoreTooltip.prototype,"offset",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTooltip.prototype,"open",null),__decorate([property()],GlideCoreTooltip.prototype,"placement",void 0),__decorate([state()],GlideCoreTooltip.prototype,"effectivePlacement",void 0),GlideCoreTooltip=__decorate([customElement("glide-core-tooltip")],GlideCoreTooltip);export default GlideCoreTooltip;