diff --git a/packages/toast/README.md b/packages/toast/README.md
index 2c11a9cfe1..86c661ced7 100644
--- a/packages/toast/README.md
+++ b/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
-This is important information that you should read, soon.
+
+ This is important information that you should read, soon.
+
```
### With actions
```html
-
+
This is important information that you should read, soon.
Do something
@@ -45,7 +47,7 @@ import { Toast } from '@spectrum-web-components/toast';
### Wrapping
```html
-
+
This is important information that you should read, soon.
Do something
@@ -58,7 +60,7 @@ import { Toast } from '@spectrum-web-components/toast';
#### Negative
```html
-
+
This is negative information that you should read, soon.
```
@@ -66,7 +68,7 @@ import { Toast } from '@spectrum-web-components/toast';
#### Positive
```html
-
+
This is positive information that you should read, soon.
```
@@ -74,7 +76,9 @@ import { Toast } from '@spectrum-web-components/toast';
#### Info
```html
-This is information that you should read.
+
+ This is information that you should read.
+
```
## Accessibility
diff --git a/packages/toast/src/Toast.ts b/packages/toast/src/Toast.ts
index 25f165030b..de7c86f6db 100644
--- a/packages/toast/src/Toast.ts
+++ b/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,
diff --git a/packages/toast/test/toast.test.ts b/packages/toast/test/toast.test.ts
index b49ee61b3f..d60a401acb 100644
--- a/packages/toast/test/toast.test.ts
+++ b/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(
html`
- Help text.
+ Help text.
`
);
@@ -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(
+ html`
+
+ This toast maintains variants.
+
+ `
+ );
+
+ 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');
+ });
});