feat(toast): default to "open === false", always dispatch "close" event

packages/toast/README.md

@@ -1,6 +1,6 @@
 ## Description
 
-`sp-toast`s display brief, temporary notifications. They are noticeable but do not disrupt the user experience and do not require an action to be taken.
+`sp-toast` elements display brief, temporary notifications. They are noticeable but do not disrupt the user experience and do not require an action to be taken.
 
 ### Usage
 
@@ -28,13 +28,15 @@ import { Toast } from '@spectrum-web-components/toast';
 ### Default
 
 ```html
-<sp-toast>This is important information that you should read, soon.</sp-toast>
+<sp-toast open>
+    This is important information that you should read, soon.
+</sp-toast>
 ```
 
 ### With actions
 
 ```html
-<sp-toast>
+<sp-toast open>
     This is important information that you should read, soon.
     <sp-button slot="action" variant="overBackground" quiet>
         Do something
@@ -45,7 +47,7 @@ import { Toast } from '@spectrum-web-components/toast';
 ### Wrapping
 
 ```html
-<sp-toast style="width: 300px">
+<sp-toast open style="width: 300px">
     This is important information that you should read, soon.
     <sp-button slot="action" variant="overBackground" quiet>
         Do something
@@ -58,23 +60,25 @@ import { Toast } from '@spectrum-web-components/toast';
 #### Negative
 
 ```html
-<sp-toast variant="negative">
+<sp-toast open variant="negative">
     This is negative information that you should read, soon.
 </sp-toast>
 ```
 
 #### Positive
 
 ```html
-<sp-toast variant="positive">
+<sp-toast open variant="positive">
     This is positive information that you should read, soon.
 </sp-toast>
 ```
 
 #### Info
 
 ```html
-<sp-toast variant="info">This is information that you should read.</sp-toast>
+<sp-toast open variant="info">
+    This is information that you should read.
+</sp-toast>
 ```
 
 ## Accessibility

packages/toast/src/Toast.ts

@@ -208,18 +208,15 @@ export class Toast extends SpectrumElement {
         `;
     }
 
-    protected firstUpdated(changes: PropertyValues): void {
-        super.firstUpdated(changes);
-        this.open = true;
-    }
-
     protected updated(changes: PropertyValues): void {
         super.updated(changes);
-        if (changes.has('open') && this.timeout) {
-            if (this.open) {
+        if (changes.has('open')) {
+            if (this.open && this.timeout) {
                 this.startCountdown();
             } else {
-                this.stopCountdown();
+                if (this.timeout) {
+                    this.stopCountdown();
+                }
                 const applyDefault = this.dispatchEvent(
                     new CustomEvent('close', {
                         composed: true,

packages/toast/test/toast.test.ts

@@ -18,6 +18,7 @@ import {
     html,
     expect,
     nextFrame,
+    waitUntil,
 } from '@open-wc/testing';
 import { ClearButton } from '@spectrum-web-components/button';
 import { waitForPredicate } from '../../../test/testing-helpers.js';
@@ -62,9 +63,11 @@ describe('Toast', () => {
         );
 
         await elementUpdated(el);
-        expect(el.open).to.be.true;
+        expect(el.open).to.be.false;
 
         ((el as unknown) as TestableToast)._timeout = 100;
+        el.open = true;
+        await elementUpdated(el);
 
         await waitForPredicate(() => el.open === false);
         expect(el.open).to.be.false;
@@ -77,10 +80,13 @@ describe('Toast', () => {
         );
 
         await elementUpdated(el);
-        expect(el.open).to.be.true;
+        expect(el.open).to.be.false;
 
         const testableEl = (el as unknown) as TestableToast;
         testableEl._timeout = 100;
+        el.open = true;
+        await elementUpdated(el);
+
         const firstStart = testableEl.countdownStart;
 
         await nextFrame();
@@ -112,13 +118,18 @@ describe('Toast', () => {
         );
 
         await elementUpdated(el);
-        await nextFrame();
 
         const testableEl = (el as unknown) as TestableToast;
-        expect(el.open).to.be.true;
+        expect(el.open, 'not open to start').to.be.false;
+
+        el.open = true;
+        await elementUpdated(el);
+        await nextFrame();
+
         expect(testableEl.countdownStart, 'initially not 0').to.not.equal(0);
 
         testableEl._timeout = 100;
+
         el.dispatchEvent(new FocusEvent('focusin'));
 
         await elementUpdated(el);
@@ -131,13 +142,13 @@ describe('Toast', () => {
             0
         );
 
-        await waitForPredicate(() => el.open === false);
-        expect(el.open).to.be.false;
+        await waitUntil(() => el.open === false, 'closes');
+        expect(el.open, 'not open to end').to.be.false;
     });
     it('closes', async () => {
         const el = await fixture<Toast>(
             html`
-                <sp-toast open timeout="100">Help text.</sp-toast>
+                <sp-toast open>Help text.</sp-toast>
             `
         );
 
@@ -198,4 +209,26 @@ describe('Toast', () => {
         await elementUpdated(el);
         expect(el.variant).to.equal(toastVariants[0]);
     });
+    it('maintains [variant] when disconnected/connected', async () => {
+        const el = await fixture<Toast>(
+            html`
+                <sp-toast variant="positive">
+                    This toast maintains variants.
+                </sp-toast>
+            `
+        );
+
+        await elementUpdated(el);
+        expect(el.variant).to.equal('positive');
+
+        el.remove();
+
+        await elementUpdated(el);
+        expect(el.variant).to.equal('positive');
+
+        document.body.append(el);
+
+        await elementUpdated(el);
+        expect(el.variant).to.equal('positive');
+    });
 });