@spectrum-web-components/toast - npm Package Compare versions

Comparing version 0.5.5-alpha.60 to 0.5.5-alpha.84

package.json

@@ -21,6 +21,7 @@ {
     ],
-    "version": "0.5.5-alpha.60+a478c2c4",
+    "version": "0.5.5-alpha.84+1680fb01",
     "description": "",
-    "main": "src/index.js",
-    "module": "src/index.js",
+    "main": "./src/index.js",
+    "module": "./src/index.js",
+    "types": "./src/index.d.ts",
     "type": "module",
@@ -55,9 +56,9 @@ "exports": {
     "dependencies": {
-        "@spectrum-web-components/base": "^0.1.4-alpha.60+a478c2c4",
-        "@spectrum-web-components/button": "^0.9.5-alpha.60+a478c2c4",
-        "@spectrum-web-components/icon": "^0.6.4-alpha.60+a478c2c4",
-        "@spectrum-web-components/icons-ui": "^0.3.4-alpha.60+a478c2c4",
+        "@spectrum-web-components/base": "^0.1.4-alpha.84+1680fb01",
+        "@spectrum-web-components/button": "^0.9.5-alpha.84+1680fb01",
+        "@spectrum-web-components/icon": "^0.6.4-alpha.84+1680fb01",
+        "@spectrum-web-components/icons-ui": "^0.3.4-alpha.84+1680fb01",
         "tslib": "^2.0.0"
     },
-    "gitHead": "a478c2c484b45e88c5d8b5cc64a255e31d0a3829"
+    "gitHead": "1680fb01795050191c13f5c05f554d923ff850ae"
 }

README.md

 ## 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.
 
@@ -31,3 +31,5 @@ ### Usage
 ```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>
 ```
@@ -38,3 +40,3 @@
 ```html
-<sp-toast>
+<sp-toast open>
     This is important information that you should read, soon.
@@ -50,3 +52,3 @@ <sp-button slot="action" variant="overBackground" quiet>
 ```html
-<sp-toast style="width: 300px">
+<sp-toast open style="width: 300px">
     This is important information that you should read, soon.
@@ -64,3 +66,3 @@ <sp-button slot="action" variant="overBackground" quiet>
 ```html
-<sp-toast variant="negative">
+<sp-toast open variant="negative">
     This is negative information that you should read, soon.
@@ -73,3 +75,3 @@ </sp-toast>
 ```html
-<sp-toast variant="positive">
+<sp-toast open variant="positive">
     This is positive information that you should read, soon.
@@ -82,3 +84,5 @@ </sp-toast>
 ```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>
 ```
@@ -85,0 +89,0 @@

src/spectrum-toast.css.js

@@ -14,5 +14,5 @@ /*
 const styles = css `
-:host([dir=ltr]){padding-right:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100));padding-left:var(--spectrum-toast-neutral-padding-left,var(--spectrum-global-dimension-size-200))}:host([dir=rtl]){padding-left:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100));padding-right:var(--spectrum-toast-neutral-padding-left,var(--spectrum-global-dimension-size-200))}:host{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:stretch;border-radius:var(--spectrum-toast-neutral-border-radius,var(--spectrum-global-dimension-static-size-50));padding-top:var(--spectrum-toast-neutral-padding-y,var(--spectrum-global-dimension-size-100));padding-bottom:var(--spectrum-toast-neutral-padding-y,var(--spectrum-global-dimension-size-100));font-size:var(--spectrum-toast-neutral-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-toast-neutral-text-font-weight,var(--spectrum-global-font-weight-bold));-webkit-font-smoothing:antialiased;background-color:var(--spectrum-toast-neutral-background-color,var(--spectrum-global-color-static-gray-700));color:var(--spectrum-toast-neutral-background-color,var(--spectrum-global-color-static-gray-700))}:host([dir=ltr]) .type{margin-right:var(--spectrum-toast-neutral-icon-padding-right,var(--spectrum-global-dimension-size-150));margin-left:0}:host([dir=rtl]) .type{margin-left:var(--spectrum-toast-neutral-icon-padding-right,var(--spectrum-global-dimension-size-150));margin-right:0}.type{flex-shrink:0;flex-grow:0;margin-top:var(--spectrum-global-dimension-size-85);margin-bottom:var(--spectrum-global-dimension-size-85);color:#fff}:host([dir=ltr]) .content{padding-right:var(--spectrum-toast-neutral-content-padding-right,var(--spectrum-global-dimension-size-200));padding-left:0;text-align:left}:host([dir=rtl]) .content{padding-left:var(--spectrum-toast-neutral-content-padding-right,var(--spectrum-global-dimension-size-200));padding-right:0;text-align:right}.content{flex:1 1 auto;display:inline-block;box-sizing:border-box;padding-top:var(--spectrum-global-dimension-size-65);padding-bottom:var(--spectrum-global-dimension-size-65);font-size:var(--spectrum-toast-info-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-toast-info-text-font-weight,var(--spectrum-global-font-weight-bold));line-height:var(--spectrum-toast-info-text-line-height,var(--spectrum-alias-body-text-line-height));color:var(--spectrum-toast-neutral-text-color,var(--spectrum-global-color-static-white))}.buttons{display:flex;flex:0 0 auto;align-items:flex-start}:host([dir=ltr]) .buttons .spectrum-ClearButton+.spectrum-ClearButton,:host([dir=ltr]) .buttons .spectrum-ClearButton+::slotted([slot=action]),:host([dir=ltr]) .buttons slot[name=action]+.spectrum-ClearButton,:host([dir=ltr]) .buttons slot[name=action]+::slotted([slot=action]){margin-left:var(--spectrum-toast-neutral-button-gap-x,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) .buttons .spectrum-ClearButton+.spectrum-ClearButton,:host([dir=rtl]) .buttons .spectrum-ClearButton+::slotted([slot=action]),:host([dir=rtl]) .buttons slot[name=action]+.spectrum-ClearButton,:host([dir=rtl]) .buttons slot[name=action]+::slotted([slot=action]){margin-right:var(--spectrum-toast-neutral-button-gap-x,var(--spectrum-global-dimension-size-100))}.body{flex:1 1 auto;align-self:center}:host([dir=ltr]) .body ::slotted([slot=action]){float:right;margin-right:var(--spectrum-global-dimension-size-130)}:host([dir=rtl]) .body ::slotted([slot=action]){float:left;margin-left:var(--spectrum-global-dimension-size-130)}:host([dir=ltr]) .body+.buttons{padding-left:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100));border-left-width:1px;border-left-style:solid}:host([dir=rtl]) .body+.buttons{padding-right:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100));border-right-width:1px;border-right-style:solid}:host([dir=ltr]) .buttons{border-left-color:hsla(0,0%,100%,.2)}:host([dir=rtl]) .buttons{border-right-color:hsla(0,0%,100%,.2)}:host([variant=warning]){background-color:var(--spectrum-toast-warning-background-color,var(--spectrum-global-color-static-orange-700))}:host([variant=warning]),:host([variant=warning]) .closeButton.focus-visible:not(:active),:host([variant=warning]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-warning-background-color,var(--spectrum-global-color-static-orange-700))}:host([variant=warning]),:host([variant=warning]) .closeButton.focus-visible:not(:active),:host([variant=warning]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-warning-background-color,var(--spectrum-global-color-static-orange-700))}:host([variant=error]),:host([variant=negative]){background-color:var(--spectrum-toast-negative-background-color,var(--spectrum-global-color-static-red-700))}:host([variant=error]),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=negative]),:host([variant=negative]) .closeButton.focus-visible:not(:active),:host([variant=negative]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-negative-background-color,var(--spectrum-global-color-static-red-700))}:host([variant=error]),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=error]) .closeButton:focus-visible:not(:active),:host([variant=negative]),:host([variant=negative]) .closeButton.focus-visible:not(:active),:host([variant=negative]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-negative-background-color,var(--spectrum-global-color-static-red-700))}:host([variant=info]){background-color:var(--spectrum-toast-info-background-color,var(--spectrum-global-color-static-blue-700))}:host([variant=info]),:host([variant=info]) .closeButton.focus-visible:not(:active),:host([variant=info]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-info-background-color,var(--spectrum-global-color-static-blue-700))}:host([variant=info]),:host([variant=info]) .closeButton.focus-visible:not(:active),:host([variant=info]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-info-background-color,var(--spectrum-global-color-static-blue-700))}:host([variant=positive]),:host([variant=success]){background-color:var(--spectrum-toast-positive-background-color,var(--spectrum-global-color-static-green-700))}:host([variant=positive]),:host([variant=positive]) .closeButton.focus-visible:not(:active),:host([variant=positive]) .closeButton.focus-visible:not(:active),:host([variant=success]),:host([variant=success]) .closeButton.focus-visible:not(:active),:host([variant=success]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-positive-background-color,var(--spectrum-global-color-static-green-700))}:host([variant=positive]),:host([variant=positive]) .closeButton.focus-visible:not(:active),:host([variant=positive]) .closeButton:focus-visible:not(:active),:host([variant=success]),:host([variant=success]) .closeButton.focus-visible:not(:active),:host([variant=success]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-positive-background-color,var(--spectrum-global-color-static-green-700))}
+:host([dir=ltr]){padding-right:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]){padding-left:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=ltr]){padding-left:var(--spectrum-toast-neutral-padding-left,var(--spectrum-global-dimension-size-200))}:host([dir=rtl]){padding-right:var(--spectrum-toast-neutral-padding-left,var(--spectrum-global-dimension-size-200))}:host{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:stretch;border-radius:var(--spectrum-toast-neutral-border-radius,var(--spectrum-global-dimension-static-size-50));padding-top:var(--spectrum-toast-neutral-padding-y,var(--spectrum-global-dimension-size-100));padding-bottom:var(--spectrum-toast-neutral-padding-y,var(--spectrum-global-dimension-size-100));font-size:var(--spectrum-toast-neutral-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-toast-neutral-text-font-weight,var(--spectrum-global-font-weight-bold));-webkit-font-smoothing:antialiased}:host([dir=ltr]) .type{margin-right:var(--spectrum-toast-neutral-icon-padding-right,var(--spectrum-global-dimension-size-150))}:host([dir=rtl]) .type{margin-left:var(--spectrum-toast-neutral-icon-padding-right,var(--spectrum-global-dimension-size-150))}:host([dir=ltr]) .type{margin-left:0}:host([dir=rtl]) .type{margin-right:0}.type{flex-shrink:0;flex-grow:0;margin-top:var(--spectrum-global-dimension-size-85);margin-bottom:var(--spectrum-global-dimension-size-85)}:host([dir=ltr]) .content{padding-right:var(--spectrum-toast-neutral-content-padding-right,var(--spectrum-global-dimension-size-200))}:host([dir=rtl]) .content{padding-left:var(--spectrum-toast-neutral-content-padding-right,var(--spectrum-global-dimension-size-200))}:host([dir=ltr]) .content{padding-left:0}:host([dir=rtl]) .content{padding-right:0}:host([dir=ltr]) .content{text-align:left}:host([dir=rtl]) .content{text-align:right}.content{flex:1 1 auto;display:inline-block;box-sizing:border-box;padding-top:var(--spectrum-global-dimension-size-65);padding-bottom:var(--spectrum-global-dimension-size-65);font-size:var(--spectrum-toast-info-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-toast-info-text-font-weight,var(--spectrum-global-font-weight-bold));line-height:var(--spectrum-toast-info-text-line-height,var(--spectrum-alias-body-text-line-height))}.buttons{display:flex;flex:0 0 auto;align-items:flex-start}:host([dir=ltr]) .buttons .spectrum-ClearButton+.spectrum-ClearButton,:host([dir=ltr]) .buttons .spectrum-ClearButton+::slotted([slot=action]),:host([dir=ltr]) .buttons slot[name=action]+.spectrum-ClearButton,:host([dir=ltr]) .buttons slot[name=action]+::slotted([slot=action]){margin-left:var(--spectrum-toast-neutral-button-gap-x,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) .buttons .spectrum-ClearButton+.spectrum-ClearButton,:host([dir=rtl]) .buttons .spectrum-ClearButton+::slotted([slot=action]),:host([dir=rtl]) .buttons slot[name=action]+.spectrum-ClearButton,:host([dir=rtl]) .buttons slot[name=action]+::slotted([slot=action]){margin-right:var(--spectrum-toast-neutral-button-gap-x,var(--spectrum-global-dimension-size-100))}.body{flex:1 1 auto;align-self:center}:host([dir=ltr]) .body ::slotted([slot=action]){float:right}:host([dir=rtl]) .body ::slotted([slot=action]){float:left}:host([dir=ltr]) .body ::slotted([slot=action]){margin-right:var(--spectrum-global-dimension-size-130)}:host([dir=rtl]) .body ::slotted([slot=action]){margin-left:var(--spectrum-global-dimension-size-130)}:host([dir=ltr]) .body+.buttons{padding-left:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) .body+.buttons{padding-right:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=ltr]) .body+.buttons{border-left-width:1px}:host([dir=rtl]) .body+.buttons{border-right-width:1px}:host([dir=ltr]) .body+.buttons{border-left-style:solid}:host([dir=rtl]) .body+.buttons{border-right-style:solid}:host{background-color:var(--spectrum-toast-neutral-background-color,var(--spectrum-global-color-static-gray-700));color:var(--spectrum-toast-neutral-background-color,var(--spectrum-global-color-static-gray-700))}.content{color:var(--spectrum-toast-neutral-text-color,var(--spectrum-global-color-static-white))}.type{color:#fff}:host([dir=ltr]) .buttons{border-left-color:hsla(0,0%,100%,.2)}:host([dir=rtl]) .buttons{border-right-color:hsla(0,0%,100%,.2)}:host([variant=warning]){background-color:var(--spectrum-toast-warning-background-color,var(--spectrum-global-color-static-orange-700))}:host([variant=warning]),:host([variant=warning]) .closeButton.focus-visible:not(:active),:host([variant=warning]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-warning-background-color,var(--spectrum-global-color-static-orange-700))}:host([variant=warning]),:host([variant=warning]) .closeButton.focus-visible:not(:active),:host([variant=warning]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-warning-background-color,var(--spectrum-global-color-static-orange-700))}:host([variant=error]),:host([variant=negative]){background-color:var(--spectrum-toast-negative-background-color,var(--spectrum-global-color-static-red-700))}:host([variant=error]),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=negative]),:host([variant=negative]) .closeButton.focus-visible:not(:active),:host([variant=negative]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-negative-background-color,var(--spectrum-global-color-static-red-700))}:host([variant=error]),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=error]) .closeButton:focus-visible:not(:active),:host([variant=negative]),:host([variant=negative]) .closeButton.focus-visible:not(:active),:host([variant=negative]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-negative-background-color,var(--spectrum-global-color-static-red-700))}:host([variant=info]){background-color:var(--spectrum-toast-info-background-color,var(--spectrum-global-color-static-blue-700))}:host([variant=info]),:host([variant=info]) .closeButton.focus-visible:not(:active),:host([variant=info]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-info-background-color,var(--spectrum-global-color-static-blue-700))}:host([variant=info]),:host([variant=info]) .closeButton.focus-visible:not(:active),:host([variant=info]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-info-background-color,var(--spectrum-global-color-static-blue-700))}:host([variant=positive]),:host([variant=success]){background-color:var(--spectrum-toast-positive-background-color,var(--spectrum-global-color-static-green-700))}:host([variant=positive]),:host([variant=positive]) .closeButton.focus-visible:not(:active),:host([variant=positive]) .closeButton.focus-visible:not(:active),:host([variant=success]),:host([variant=success]) .closeButton.focus-visible:not(:active),:host([variant=success]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-positive-background-color,var(--spectrum-global-color-static-green-700))}:host([variant=positive]),:host([variant=positive]) .closeButton.focus-visible:not(:active),:host([variant=positive]) .closeButton:focus-visible:not(:active),:host([variant=success]),:host([variant=success]) .closeButton.focus-visible:not(:active),:host([variant=success]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-positive-background-color,var(--spectrum-global-color-static-green-700))}
 `;
 export default styles;
 //# sourceMappingURL=spectrum-toast.css.js.map

src/spectrum-toast.css.ts

@@ -14,4 +14,4 @@ /*
 const styles = css`
-:host([dir=ltr]){padding-right:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100));padding-left:var(--spectrum-toast-neutral-padding-left,var(--spectrum-global-dimension-size-200))}:host([dir=rtl]){padding-left:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100));padding-right:var(--spectrum-toast-neutral-padding-left,var(--spectrum-global-dimension-size-200))}:host{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:stretch;border-radius:var(--spectrum-toast-neutral-border-radius,var(--spectrum-global-dimension-static-size-50));padding-top:var(--spectrum-toast-neutral-padding-y,var(--spectrum-global-dimension-size-100));padding-bottom:var(--spectrum-toast-neutral-padding-y,var(--spectrum-global-dimension-size-100));font-size:var(--spectrum-toast-neutral-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-toast-neutral-text-font-weight,var(--spectrum-global-font-weight-bold));-webkit-font-smoothing:antialiased;background-color:var(--spectrum-toast-neutral-background-color,var(--spectrum-global-color-static-gray-700));color:var(--spectrum-toast-neutral-background-color,var(--spectrum-global-color-static-gray-700))}:host([dir=ltr]) .type{margin-right:var(--spectrum-toast-neutral-icon-padding-right,var(--spectrum-global-dimension-size-150));margin-left:0}:host([dir=rtl]) .type{margin-left:var(--spectrum-toast-neutral-icon-padding-right,var(--spectrum-global-dimension-size-150));margin-right:0}.type{flex-shrink:0;flex-grow:0;margin-top:var(--spectrum-global-dimension-size-85);margin-bottom:var(--spectrum-global-dimension-size-85);color:#fff}:host([dir=ltr]) .content{padding-right:var(--spectrum-toast-neutral-content-padding-right,var(--spectrum-global-dimension-size-200));padding-left:0;text-align:left}:host([dir=rtl]) .content{padding-left:var(--spectrum-toast-neutral-content-padding-right,var(--spectrum-global-dimension-size-200));padding-right:0;text-align:right}.content{flex:1 1 auto;display:inline-block;box-sizing:border-box;padding-top:var(--spectrum-global-dimension-size-65);padding-bottom:var(--spectrum-global-dimension-size-65);font-size:var(--spectrum-toast-info-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-toast-info-text-font-weight,var(--spectrum-global-font-weight-bold));line-height:var(--spectrum-toast-info-text-line-height,var(--spectrum-alias-body-text-line-height));color:var(--spectrum-toast-neutral-text-color,var(--spectrum-global-color-static-white))}.buttons{display:flex;flex:0 0 auto;align-items:flex-start}:host([dir=ltr]) .buttons .spectrum-ClearButton+.spectrum-ClearButton,:host([dir=ltr]) .buttons .spectrum-ClearButton+::slotted([slot=action]),:host([dir=ltr]) .buttons slot[name=action]+.spectrum-ClearButton,:host([dir=ltr]) .buttons slot[name=action]+::slotted([slot=action]){margin-left:var(--spectrum-toast-neutral-button-gap-x,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) .buttons .spectrum-ClearButton+.spectrum-ClearButton,:host([dir=rtl]) .buttons .spectrum-ClearButton+::slotted([slot=action]),:host([dir=rtl]) .buttons slot[name=action]+.spectrum-ClearButton,:host([dir=rtl]) .buttons slot[name=action]+::slotted([slot=action]){margin-right:var(--spectrum-toast-neutral-button-gap-x,var(--spectrum-global-dimension-size-100))}.body{flex:1 1 auto;align-self:center}:host([dir=ltr]) .body ::slotted([slot=action]){float:right;margin-right:var(--spectrum-global-dimension-size-130)}:host([dir=rtl]) .body ::slotted([slot=action]){float:left;margin-left:var(--spectrum-global-dimension-size-130)}:host([dir=ltr]) .body+.buttons{padding-left:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100));border-left-width:1px;border-left-style:solid}:host([dir=rtl]) .body+.buttons{padding-right:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100));border-right-width:1px;border-right-style:solid}:host([dir=ltr]) .buttons{border-left-color:hsla(0,0%,100%,.2)}:host([dir=rtl]) .buttons{border-right-color:hsla(0,0%,100%,.2)}:host([variant=warning]){background-color:var(--spectrum-toast-warning-background-color,var(--spectrum-global-color-static-orange-700))}:host([variant=warning]),:host([variant=warning]) .closeButton.focus-visible:not(:active),:host([variant=warning]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-warning-background-color,var(--spectrum-global-color-static-orange-700))}:host([variant=warning]),:host([variant=warning]) .closeButton.focus-visible:not(:active),:host([variant=warning]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-warning-background-color,var(--spectrum-global-color-static-orange-700))}:host([variant=error]),:host([variant=negative]){background-color:var(--spectrum-toast-negative-background-color,var(--spectrum-global-color-static-red-700))}:host([variant=error]),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=negative]),:host([variant=negative]) .closeButton.focus-visible:not(:active),:host([variant=negative]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-negative-background-color,var(--spectrum-global-color-static-red-700))}:host([variant=error]),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=error]) .closeButton:focus-visible:not(:active),:host([variant=negative]),:host([variant=negative]) .closeButton.focus-visible:not(:active),:host([variant=negative]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-negative-background-color,var(--spectrum-global-color-static-red-700))}:host([variant=info]){background-color:var(--spectrum-toast-info-background-color,var(--spectrum-global-color-static-blue-700))}:host([variant=info]),:host([variant=info]) .closeButton.focus-visible:not(:active),:host([variant=info]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-info-background-color,var(--spectrum-global-color-static-blue-700))}:host([variant=info]),:host([variant=info]) .closeButton.focus-visible:not(:active),:host([variant=info]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-info-background-color,var(--spectrum-global-color-static-blue-700))}:host([variant=positive]),:host([variant=success]){background-color:var(--spectrum-toast-positive-background-color,var(--spectrum-global-color-static-green-700))}:host([variant=positive]),:host([variant=positive]) .closeButton.focus-visible:not(:active),:host([variant=positive]) .closeButton.focus-visible:not(:active),:host([variant=success]),:host([variant=success]) .closeButton.focus-visible:not(:active),:host([variant=success]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-positive-background-color,var(--spectrum-global-color-static-green-700))}:host([variant=positive]),:host([variant=positive]) .closeButton.focus-visible:not(:active),:host([variant=positive]) .closeButton:focus-visible:not(:active),:host([variant=success]),:host([variant=success]) .closeButton.focus-visible:not(:active),:host([variant=success]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-positive-background-color,var(--spectrum-global-color-static-green-700))}
+:host([dir=ltr]){padding-right:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]){padding-left:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=ltr]){padding-left:var(--spectrum-toast-neutral-padding-left,var(--spectrum-global-dimension-size-200))}:host([dir=rtl]){padding-right:var(--spectrum-toast-neutral-padding-left,var(--spectrum-global-dimension-size-200))}:host{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:stretch;border-radius:var(--spectrum-toast-neutral-border-radius,var(--spectrum-global-dimension-static-size-50));padding-top:var(--spectrum-toast-neutral-padding-y,var(--spectrum-global-dimension-size-100));padding-bottom:var(--spectrum-toast-neutral-padding-y,var(--spectrum-global-dimension-size-100));font-size:var(--spectrum-toast-neutral-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-toast-neutral-text-font-weight,var(--spectrum-global-font-weight-bold));-webkit-font-smoothing:antialiased}:host([dir=ltr]) .type{margin-right:var(--spectrum-toast-neutral-icon-padding-right,var(--spectrum-global-dimension-size-150))}:host([dir=rtl]) .type{margin-left:var(--spectrum-toast-neutral-icon-padding-right,var(--spectrum-global-dimension-size-150))}:host([dir=ltr]) .type{margin-left:0}:host([dir=rtl]) .type{margin-right:0}.type{flex-shrink:0;flex-grow:0;margin-top:var(--spectrum-global-dimension-size-85);margin-bottom:var(--spectrum-global-dimension-size-85)}:host([dir=ltr]) .content{padding-right:var(--spectrum-toast-neutral-content-padding-right,var(--spectrum-global-dimension-size-200))}:host([dir=rtl]) .content{padding-left:var(--spectrum-toast-neutral-content-padding-right,var(--spectrum-global-dimension-size-200))}:host([dir=ltr]) .content{padding-left:0}:host([dir=rtl]) .content{padding-right:0}:host([dir=ltr]) .content{text-align:left}:host([dir=rtl]) .content{text-align:right}.content{flex:1 1 auto;display:inline-block;box-sizing:border-box;padding-top:var(--spectrum-global-dimension-size-65);padding-bottom:var(--spectrum-global-dimension-size-65);font-size:var(--spectrum-toast-info-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-toast-info-text-font-weight,var(--spectrum-global-font-weight-bold));line-height:var(--spectrum-toast-info-text-line-height,var(--spectrum-alias-body-text-line-height))}.buttons{display:flex;flex:0 0 auto;align-items:flex-start}:host([dir=ltr]) .buttons .spectrum-ClearButton+.spectrum-ClearButton,:host([dir=ltr]) .buttons .spectrum-ClearButton+::slotted([slot=action]),:host([dir=ltr]) .buttons slot[name=action]+.spectrum-ClearButton,:host([dir=ltr]) .buttons slot[name=action]+::slotted([slot=action]){margin-left:var(--spectrum-toast-neutral-button-gap-x,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) .buttons .spectrum-ClearButton+.spectrum-ClearButton,:host([dir=rtl]) .buttons .spectrum-ClearButton+::slotted([slot=action]),:host([dir=rtl]) .buttons slot[name=action]+.spectrum-ClearButton,:host([dir=rtl]) .buttons slot[name=action]+::slotted([slot=action]){margin-right:var(--spectrum-toast-neutral-button-gap-x,var(--spectrum-global-dimension-size-100))}.body{flex:1 1 auto;align-self:center}:host([dir=ltr]) .body ::slotted([slot=action]){float:right}:host([dir=rtl]) .body ::slotted([slot=action]){float:left}:host([dir=ltr]) .body ::slotted([slot=action]){margin-right:var(--spectrum-global-dimension-size-130)}:host([dir=rtl]) .body ::slotted([slot=action]){margin-left:var(--spectrum-global-dimension-size-130)}:host([dir=ltr]) .body+.buttons{padding-left:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) .body+.buttons{padding-right:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=ltr]) .body+.buttons{border-left-width:1px}:host([dir=rtl]) .body+.buttons{border-right-width:1px}:host([dir=ltr]) .body+.buttons{border-left-style:solid}:host([dir=rtl]) .body+.buttons{border-right-style:solid}:host{background-color:var(--spectrum-toast-neutral-background-color,var(--spectrum-global-color-static-gray-700));color:var(--spectrum-toast-neutral-background-color,var(--spectrum-global-color-static-gray-700))}.content{color:var(--spectrum-toast-neutral-text-color,var(--spectrum-global-color-static-white))}.type{color:#fff}:host([dir=ltr]) .buttons{border-left-color:hsla(0,0%,100%,.2)}:host([dir=rtl]) .buttons{border-right-color:hsla(0,0%,100%,.2)}:host([variant=warning]){background-color:var(--spectrum-toast-warning-background-color,var(--spectrum-global-color-static-orange-700))}:host([variant=warning]),:host([variant=warning]) .closeButton.focus-visible:not(:active),:host([variant=warning]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-warning-background-color,var(--spectrum-global-color-static-orange-700))}:host([variant=warning]),:host([variant=warning]) .closeButton.focus-visible:not(:active),:host([variant=warning]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-warning-background-color,var(--spectrum-global-color-static-orange-700))}:host([variant=error]),:host([variant=negative]){background-color:var(--spectrum-toast-negative-background-color,var(--spectrum-global-color-static-red-700))}:host([variant=error]),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=negative]),:host([variant=negative]) .closeButton.focus-visible:not(:active),:host([variant=negative]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-negative-background-color,var(--spectrum-global-color-static-red-700))}:host([variant=error]),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=error]) .closeButton:focus-visible:not(:active),:host([variant=negative]),:host([variant=negative]) .closeButton.focus-visible:not(:active),:host([variant=negative]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-negative-background-color,var(--spectrum-global-color-static-red-700))}:host([variant=info]){background-color:var(--spectrum-toast-info-background-color,var(--spectrum-global-color-static-blue-700))}:host([variant=info]),:host([variant=info]) .closeButton.focus-visible:not(:active),:host([variant=info]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-info-background-color,var(--spectrum-global-color-static-blue-700))}:host([variant=info]),:host([variant=info]) .closeButton.focus-visible:not(:active),:host([variant=info]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-info-background-color,var(--spectrum-global-color-static-blue-700))}:host([variant=positive]),:host([variant=success]){background-color:var(--spectrum-toast-positive-background-color,var(--spectrum-global-color-static-green-700))}:host([variant=positive]),:host([variant=positive]) .closeButton.focus-visible:not(:active),:host([variant=positive]) .closeButton.focus-visible:not(:active),:host([variant=success]),:host([variant=success]) .closeButton.focus-visible:not(:active),:host([variant=success]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-positive-background-color,var(--spectrum-global-color-static-green-700))}:host([variant=positive]),:host([variant=positive]) .closeButton.focus-visible:not(:active),:host([variant=positive]) .closeButton:focus-visible:not(:active),:host([variant=success]),:host([variant=success]) .closeButton.focus-visible:not(:active),:host([variant=success]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-positive-background-color,var(--spectrum-global-color-static-green-700))}
 `;
 export default styles;

src/toast.css.js

@@ -14,5 +14,5 @@ /*
 const styles = css `
-:host([dir=ltr]){padding-right:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100));padding-left:var(--spectrum-toast-neutral-padding-left,var(--spectrum-global-dimension-size-200))}:host([dir=rtl]){padding-left:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100));padding-right:var(--spectrum-toast-neutral-padding-left,var(--spectrum-global-dimension-size-200))}:host{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:stretch;border-radius:var(--spectrum-toast-neutral-border-radius,var(--spectrum-global-dimension-static-size-50));padding-top:var(--spectrum-toast-neutral-padding-y,var(--spectrum-global-dimension-size-100));padding-bottom:var(--spectrum-toast-neutral-padding-y,var(--spectrum-global-dimension-size-100));font-size:var(--spectrum-toast-neutral-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-toast-neutral-text-font-weight,var(--spectrum-global-font-weight-bold));-webkit-font-smoothing:antialiased;background-color:var(--spectrum-toast-neutral-background-color,var(--spectrum-global-color-static-gray-700));color:var(--spectrum-toast-neutral-background-color,var(--spectrum-global-color-static-gray-700))}:host([dir=ltr]) .type{margin-right:var(--spectrum-toast-neutral-icon-padding-right,var(--spectrum-global-dimension-size-150));margin-left:0}:host([dir=rtl]) .type{margin-left:var(--spectrum-toast-neutral-icon-padding-right,var(--spectrum-global-dimension-size-150));margin-right:0}.type{flex-shrink:0;flex-grow:0;margin-top:var(--spectrum-global-dimension-size-85);margin-bottom:var(--spectrum-global-dimension-size-85);color:#fff}:host([dir=ltr]) .content{padding-right:var(--spectrum-toast-neutral-content-padding-right,var(--spectrum-global-dimension-size-200));padding-left:0;text-align:left}:host([dir=rtl]) .content{padding-left:var(--spectrum-toast-neutral-content-padding-right,var(--spectrum-global-dimension-size-200));padding-right:0;text-align:right}.content{flex:1 1 auto;display:inline-block;box-sizing:border-box;padding-top:var(--spectrum-global-dimension-size-65);padding-bottom:var(--spectrum-global-dimension-size-65);font-size:var(--spectrum-toast-info-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-toast-info-text-font-weight,var(--spectrum-global-font-weight-bold));line-height:var(--spectrum-toast-info-text-line-height,var(--spectrum-alias-body-text-line-height));color:var(--spectrum-toast-neutral-text-color,var(--spectrum-global-color-static-white))}.buttons{display:flex;flex:0 0 auto;align-items:flex-start}:host([dir=ltr]) .buttons .spectrum-ClearButton+.spectrum-ClearButton,:host([dir=ltr]) .buttons .spectrum-ClearButton+::slotted([slot=action]),:host([dir=ltr]) .buttons slot[name=action]+.spectrum-ClearButton,:host([dir=ltr]) .buttons slot[name=action]+::slotted([slot=action]){margin-left:var(--spectrum-toast-neutral-button-gap-x,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) .buttons .spectrum-ClearButton+.spectrum-ClearButton,:host([dir=rtl]) .buttons .spectrum-ClearButton+::slotted([slot=action]),:host([dir=rtl]) .buttons slot[name=action]+.spectrum-ClearButton,:host([dir=rtl]) .buttons slot[name=action]+::slotted([slot=action]){margin-right:var(--spectrum-toast-neutral-button-gap-x,var(--spectrum-global-dimension-size-100))}.body{flex:1 1 auto;align-self:center}:host([dir=ltr]) .body ::slotted([slot=action]){float:right;margin-right:var(--spectrum-global-dimension-size-130)}:host([dir=rtl]) .body ::slotted([slot=action]){float:left;margin-left:var(--spectrum-global-dimension-size-130)}:host([dir=ltr]) .body+.buttons{padding-left:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100));border-left-width:1px;border-left-style:solid}:host([dir=rtl]) .body+.buttons{padding-right:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100));border-right-width:1px;border-right-style:solid}:host([dir=ltr]) .buttons{border-left-color:hsla(0,0%,100%,.2)}:host([dir=rtl]) .buttons{border-right-color:hsla(0,0%,100%,.2)}:host([variant=warning]){background-color:var(--spectrum-toast-warning-background-color,var(--spectrum-global-color-static-orange-700))}:host([variant=warning]),:host([variant=warning]) .closeButton.focus-visible:not(:active),:host([variant=warning]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-warning-background-color,var(--spectrum-global-color-static-orange-700))}:host([variant=warning]),:host([variant=warning]) .closeButton.focus-visible:not(:active),:host([variant=warning]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-warning-background-color,var(--spectrum-global-color-static-orange-700))}:host([variant=error]),:host([variant=negative]){background-color:var(--spectrum-toast-negative-background-color,var(--spectrum-global-color-static-red-700))}:host([variant=error]),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=negative]),:host([variant=negative]) .closeButton.focus-visible:not(:active),:host([variant=negative]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-negative-background-color,var(--spectrum-global-color-static-red-700))}:host([variant=error]),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=error]) .closeButton:focus-visible:not(:active),:host([variant=negative]),:host([variant=negative]) .closeButton.focus-visible:not(:active),:host([variant=negative]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-negative-background-color,var(--spectrum-global-color-static-red-700))}:host([variant=info]){background-color:var(--spectrum-toast-info-background-color,var(--spectrum-global-color-static-blue-700))}:host([variant=info]),:host([variant=info]) .closeButton.focus-visible:not(:active),:host([variant=info]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-info-background-color,var(--spectrum-global-color-static-blue-700))}:host([variant=info]),:host([variant=info]) .closeButton.focus-visible:not(:active),:host([variant=info]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-info-background-color,var(--spectrum-global-color-static-blue-700))}:host([variant=positive]),:host([variant=success]){background-color:var(--spectrum-toast-positive-background-color,var(--spectrum-global-color-static-green-700))}:host([variant=positive]),:host([variant=positive]) .closeButton.focus-visible:not(:active),:host([variant=positive]) .closeButton.focus-visible:not(:active),:host([variant=success]),:host([variant=success]) .closeButton.focus-visible:not(:active),:host([variant=success]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-positive-background-color,var(--spectrum-global-color-static-green-700))}:host([variant=positive]),:host([variant=positive]) .closeButton.focus-visible:not(:active),:host([variant=positive]) .closeButton:focus-visible:not(:active),:host([variant=success]),:host([variant=success]) .closeButton.focus-visible:not(:active),:host([variant=success]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-positive-background-color,var(--spectrum-global-color-static-green-700))}.content{line-height:1.5}:host(:not([open])){display:none}
+:host([dir=ltr]){padding-right:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]){padding-left:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=ltr]){padding-left:var(--spectrum-toast-neutral-padding-left,var(--spectrum-global-dimension-size-200))}:host([dir=rtl]){padding-right:var(--spectrum-toast-neutral-padding-left,var(--spectrum-global-dimension-size-200))}:host{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:stretch;border-radius:var(--spectrum-toast-neutral-border-radius,var(--spectrum-global-dimension-static-size-50));padding-top:var(--spectrum-toast-neutral-padding-y,var(--spectrum-global-dimension-size-100));padding-bottom:var(--spectrum-toast-neutral-padding-y,var(--spectrum-global-dimension-size-100));font-size:var(--spectrum-toast-neutral-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-toast-neutral-text-font-weight,var(--spectrum-global-font-weight-bold));-webkit-font-smoothing:antialiased}:host([dir=ltr]) .type{margin-right:var(--spectrum-toast-neutral-icon-padding-right,var(--spectrum-global-dimension-size-150))}:host([dir=rtl]) .type{margin-left:var(--spectrum-toast-neutral-icon-padding-right,var(--spectrum-global-dimension-size-150))}:host([dir=ltr]) .type{margin-left:0}:host([dir=rtl]) .type{margin-right:0}.type{flex-shrink:0;flex-grow:0;margin-top:var(--spectrum-global-dimension-size-85);margin-bottom:var(--spectrum-global-dimension-size-85)}:host([dir=ltr]) .content{padding-right:var(--spectrum-toast-neutral-content-padding-right,var(--spectrum-global-dimension-size-200))}:host([dir=rtl]) .content{padding-left:var(--spectrum-toast-neutral-content-padding-right,var(--spectrum-global-dimension-size-200))}:host([dir=ltr]) .content{padding-left:0}:host([dir=rtl]) .content{padding-right:0}:host([dir=ltr]) .content{text-align:left}:host([dir=rtl]) .content{text-align:right}.content{flex:1 1 auto;display:inline-block;box-sizing:border-box;padding-top:var(--spectrum-global-dimension-size-65);padding-bottom:var(--spectrum-global-dimension-size-65);font-size:var(--spectrum-toast-info-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-toast-info-text-font-weight,var(--spectrum-global-font-weight-bold));line-height:var(--spectrum-toast-info-text-line-height,var(--spectrum-alias-body-text-line-height))}.buttons{display:flex;flex:0 0 auto;align-items:flex-start}:host([dir=ltr]) .buttons .spectrum-ClearButton+.spectrum-ClearButton,:host([dir=ltr]) .buttons .spectrum-ClearButton+::slotted([slot=action]),:host([dir=ltr]) .buttons slot[name=action]+.spectrum-ClearButton,:host([dir=ltr]) .buttons slot[name=action]+::slotted([slot=action]){margin-left:var(--spectrum-toast-neutral-button-gap-x,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) .buttons .spectrum-ClearButton+.spectrum-ClearButton,:host([dir=rtl]) .buttons .spectrum-ClearButton+::slotted([slot=action]),:host([dir=rtl]) .buttons slot[name=action]+.spectrum-ClearButton,:host([dir=rtl]) .buttons slot[name=action]+::slotted([slot=action]){margin-right:var(--spectrum-toast-neutral-button-gap-x,var(--spectrum-global-dimension-size-100))}.body{flex:1 1 auto;align-self:center}:host([dir=ltr]) .body ::slotted([slot=action]){float:right}:host([dir=rtl]) .body ::slotted([slot=action]){float:left}:host([dir=ltr]) .body ::slotted([slot=action]){margin-right:var(--spectrum-global-dimension-size-130)}:host([dir=rtl]) .body ::slotted([slot=action]){margin-left:var(--spectrum-global-dimension-size-130)}:host([dir=ltr]) .body+.buttons{padding-left:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) .body+.buttons{padding-right:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=ltr]) .body+.buttons{border-left-width:1px}:host([dir=rtl]) .body+.buttons{border-right-width:1px}:host([dir=ltr]) .body+.buttons{border-left-style:solid}:host([dir=rtl]) .body+.buttons{border-right-style:solid}:host{background-color:var(--spectrum-toast-neutral-background-color,var(--spectrum-global-color-static-gray-700));color:var(--spectrum-toast-neutral-background-color,var(--spectrum-global-color-static-gray-700))}.content{color:var(--spectrum-toast-neutral-text-color,var(--spectrum-global-color-static-white))}.type{color:#fff}:host([dir=ltr]) .buttons{border-left-color:hsla(0,0%,100%,.2)}:host([dir=rtl]) .buttons{border-right-color:hsla(0,0%,100%,.2)}:host([variant=warning]){background-color:var(--spectrum-toast-warning-background-color,var(--spectrum-global-color-static-orange-700))}:host([variant=warning]),:host([variant=warning]) .closeButton.focus-visible:not(:active),:host([variant=warning]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-warning-background-color,var(--spectrum-global-color-static-orange-700))}:host([variant=warning]),:host([variant=warning]) .closeButton.focus-visible:not(:active),:host([variant=warning]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-warning-background-color,var(--spectrum-global-color-static-orange-700))}:host([variant=error]),:host([variant=negative]){background-color:var(--spectrum-toast-negative-background-color,var(--spectrum-global-color-static-red-700))}:host([variant=error]),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=negative]),:host([variant=negative]) .closeButton.focus-visible:not(:active),:host([variant=negative]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-negative-background-color,var(--spectrum-global-color-static-red-700))}:host([variant=error]),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=error]) .closeButton:focus-visible:not(:active),:host([variant=negative]),:host([variant=negative]) .closeButton.focus-visible:not(:active),:host([variant=negative]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-negative-background-color,var(--spectrum-global-color-static-red-700))}:host([variant=info]){background-color:var(--spectrum-toast-info-background-color,var(--spectrum-global-color-static-blue-700))}:host([variant=info]),:host([variant=info]) .closeButton.focus-visible:not(:active),:host([variant=info]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-info-background-color,var(--spectrum-global-color-static-blue-700))}:host([variant=info]),:host([variant=info]) .closeButton.focus-visible:not(:active),:host([variant=info]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-info-background-color,var(--spectrum-global-color-static-blue-700))}:host([variant=positive]),:host([variant=success]){background-color:var(--spectrum-toast-positive-background-color,var(--spectrum-global-color-static-green-700))}:host([variant=positive]),:host([variant=positive]) .closeButton.focus-visible:not(:active),:host([variant=positive]) .closeButton.focus-visible:not(:active),:host([variant=success]),:host([variant=success]) .closeButton.focus-visible:not(:active),:host([variant=success]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-positive-background-color,var(--spectrum-global-color-static-green-700))}:host([variant=positive]),:host([variant=positive]) .closeButton.focus-visible:not(:active),:host([variant=positive]) .closeButton:focus-visible:not(:active),:host([variant=success]),:host([variant=success]) .closeButton.focus-visible:not(:active),:host([variant=success]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-positive-background-color,var(--spectrum-global-color-static-green-700))}.content{line-height:1.5}:host(:not([open])){display:none}
 `;
 export default styles;
 //# sourceMappingURL=toast.css.js.map

src/toast.css.ts

@@ -14,4 +14,4 @@ /*
 const styles = css`
-:host([dir=ltr]){padding-right:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100));padding-left:var(--spectrum-toast-neutral-padding-left,var(--spectrum-global-dimension-size-200))}:host([dir=rtl]){padding-left:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100));padding-right:var(--spectrum-toast-neutral-padding-left,var(--spectrum-global-dimension-size-200))}:host{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:stretch;border-radius:var(--spectrum-toast-neutral-border-radius,var(--spectrum-global-dimension-static-size-50));padding-top:var(--spectrum-toast-neutral-padding-y,var(--spectrum-global-dimension-size-100));padding-bottom:var(--spectrum-toast-neutral-padding-y,var(--spectrum-global-dimension-size-100));font-size:var(--spectrum-toast-neutral-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-toast-neutral-text-font-weight,var(--spectrum-global-font-weight-bold));-webkit-font-smoothing:antialiased;background-color:var(--spectrum-toast-neutral-background-color,var(--spectrum-global-color-static-gray-700));color:var(--spectrum-toast-neutral-background-color,var(--spectrum-global-color-static-gray-700))}:host([dir=ltr]) .type{margin-right:var(--spectrum-toast-neutral-icon-padding-right,var(--spectrum-global-dimension-size-150));margin-left:0}:host([dir=rtl]) .type{margin-left:var(--spectrum-toast-neutral-icon-padding-right,var(--spectrum-global-dimension-size-150));margin-right:0}.type{flex-shrink:0;flex-grow:0;margin-top:var(--spectrum-global-dimension-size-85);margin-bottom:var(--spectrum-global-dimension-size-85);color:#fff}:host([dir=ltr]) .content{padding-right:var(--spectrum-toast-neutral-content-padding-right,var(--spectrum-global-dimension-size-200));padding-left:0;text-align:left}:host([dir=rtl]) .content{padding-left:var(--spectrum-toast-neutral-content-padding-right,var(--spectrum-global-dimension-size-200));padding-right:0;text-align:right}.content{flex:1 1 auto;display:inline-block;box-sizing:border-box;padding-top:var(--spectrum-global-dimension-size-65);padding-bottom:var(--spectrum-global-dimension-size-65);font-size:var(--spectrum-toast-info-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-toast-info-text-font-weight,var(--spectrum-global-font-weight-bold));line-height:var(--spectrum-toast-info-text-line-height,var(--spectrum-alias-body-text-line-height));color:var(--spectrum-toast-neutral-text-color,var(--spectrum-global-color-static-white))}.buttons{display:flex;flex:0 0 auto;align-items:flex-start}:host([dir=ltr]) .buttons .spectrum-ClearButton+.spectrum-ClearButton,:host([dir=ltr]) .buttons .spectrum-ClearButton+::slotted([slot=action]),:host([dir=ltr]) .buttons slot[name=action]+.spectrum-ClearButton,:host([dir=ltr]) .buttons slot[name=action]+::slotted([slot=action]){margin-left:var(--spectrum-toast-neutral-button-gap-x,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) .buttons .spectrum-ClearButton+.spectrum-ClearButton,:host([dir=rtl]) .buttons .spectrum-ClearButton+::slotted([slot=action]),:host([dir=rtl]) .buttons slot[name=action]+.spectrum-ClearButton,:host([dir=rtl]) .buttons slot[name=action]+::slotted([slot=action]){margin-right:var(--spectrum-toast-neutral-button-gap-x,var(--spectrum-global-dimension-size-100))}.body{flex:1 1 auto;align-self:center}:host([dir=ltr]) .body ::slotted([slot=action]){float:right;margin-right:var(--spectrum-global-dimension-size-130)}:host([dir=rtl]) .body ::slotted([slot=action]){float:left;margin-left:var(--spectrum-global-dimension-size-130)}:host([dir=ltr]) .body+.buttons{padding-left:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100));border-left-width:1px;border-left-style:solid}:host([dir=rtl]) .body+.buttons{padding-right:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100));border-right-width:1px;border-right-style:solid}:host([dir=ltr]) .buttons{border-left-color:hsla(0,0%,100%,.2)}:host([dir=rtl]) .buttons{border-right-color:hsla(0,0%,100%,.2)}:host([variant=warning]){background-color:var(--spectrum-toast-warning-background-color,var(--spectrum-global-color-static-orange-700))}:host([variant=warning]),:host([variant=warning]) .closeButton.focus-visible:not(:active),:host([variant=warning]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-warning-background-color,var(--spectrum-global-color-static-orange-700))}:host([variant=warning]),:host([variant=warning]) .closeButton.focus-visible:not(:active),:host([variant=warning]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-warning-background-color,var(--spectrum-global-color-static-orange-700))}:host([variant=error]),:host([variant=negative]){background-color:var(--spectrum-toast-negative-background-color,var(--spectrum-global-color-static-red-700))}:host([variant=error]),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=negative]),:host([variant=negative]) .closeButton.focus-visible:not(:active),:host([variant=negative]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-negative-background-color,var(--spectrum-global-color-static-red-700))}:host([variant=error]),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=error]) .closeButton:focus-visible:not(:active),:host([variant=negative]),:host([variant=negative]) .closeButton.focus-visible:not(:active),:host([variant=negative]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-negative-background-color,var(--spectrum-global-color-static-red-700))}:host([variant=info]){background-color:var(--spectrum-toast-info-background-color,var(--spectrum-global-color-static-blue-700))}:host([variant=info]),:host([variant=info]) .closeButton.focus-visible:not(:active),:host([variant=info]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-info-background-color,var(--spectrum-global-color-static-blue-700))}:host([variant=info]),:host([variant=info]) .closeButton.focus-visible:not(:active),:host([variant=info]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-info-background-color,var(--spectrum-global-color-static-blue-700))}:host([variant=positive]),:host([variant=success]){background-color:var(--spectrum-toast-positive-background-color,var(--spectrum-global-color-static-green-700))}:host([variant=positive]),:host([variant=positive]) .closeButton.focus-visible:not(:active),:host([variant=positive]) .closeButton.focus-visible:not(:active),:host([variant=success]),:host([variant=success]) .closeButton.focus-visible:not(:active),:host([variant=success]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-positive-background-color,var(--spectrum-global-color-static-green-700))}:host([variant=positive]),:host([variant=positive]) .closeButton.focus-visible:not(:active),:host([variant=positive]) .closeButton:focus-visible:not(:active),:host([variant=success]),:host([variant=success]) .closeButton.focus-visible:not(:active),:host([variant=success]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-positive-background-color,var(--spectrum-global-color-static-green-700))}.content{line-height:1.5}:host(:not([open])){display:none}
+:host([dir=ltr]){padding-right:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]){padding-left:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=ltr]){padding-left:var(--spectrum-toast-neutral-padding-left,var(--spectrum-global-dimension-size-200))}:host([dir=rtl]){padding-right:var(--spectrum-toast-neutral-padding-left,var(--spectrum-global-dimension-size-200))}:host{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:stretch;border-radius:var(--spectrum-toast-neutral-border-radius,var(--spectrum-global-dimension-static-size-50));padding-top:var(--spectrum-toast-neutral-padding-y,var(--spectrum-global-dimension-size-100));padding-bottom:var(--spectrum-toast-neutral-padding-y,var(--spectrum-global-dimension-size-100));font-size:var(--spectrum-toast-neutral-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-toast-neutral-text-font-weight,var(--spectrum-global-font-weight-bold));-webkit-font-smoothing:antialiased}:host([dir=ltr]) .type{margin-right:var(--spectrum-toast-neutral-icon-padding-right,var(--spectrum-global-dimension-size-150))}:host([dir=rtl]) .type{margin-left:var(--spectrum-toast-neutral-icon-padding-right,var(--spectrum-global-dimension-size-150))}:host([dir=ltr]) .type{margin-left:0}:host([dir=rtl]) .type{margin-right:0}.type{flex-shrink:0;flex-grow:0;margin-top:var(--spectrum-global-dimension-size-85);margin-bottom:var(--spectrum-global-dimension-size-85)}:host([dir=ltr]) .content{padding-right:var(--spectrum-toast-neutral-content-padding-right,var(--spectrum-global-dimension-size-200))}:host([dir=rtl]) .content{padding-left:var(--spectrum-toast-neutral-content-padding-right,var(--spectrum-global-dimension-size-200))}:host([dir=ltr]) .content{padding-left:0}:host([dir=rtl]) .content{padding-right:0}:host([dir=ltr]) .content{text-align:left}:host([dir=rtl]) .content{text-align:right}.content{flex:1 1 auto;display:inline-block;box-sizing:border-box;padding-top:var(--spectrum-global-dimension-size-65);padding-bottom:var(--spectrum-global-dimension-size-65);font-size:var(--spectrum-toast-info-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-toast-info-text-font-weight,var(--spectrum-global-font-weight-bold));line-height:var(--spectrum-toast-info-text-line-height,var(--spectrum-alias-body-text-line-height))}.buttons{display:flex;flex:0 0 auto;align-items:flex-start}:host([dir=ltr]) .buttons .spectrum-ClearButton+.spectrum-ClearButton,:host([dir=ltr]) .buttons .spectrum-ClearButton+::slotted([slot=action]),:host([dir=ltr]) .buttons slot[name=action]+.spectrum-ClearButton,:host([dir=ltr]) .buttons slot[name=action]+::slotted([slot=action]){margin-left:var(--spectrum-toast-neutral-button-gap-x,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) .buttons .spectrum-ClearButton+.spectrum-ClearButton,:host([dir=rtl]) .buttons .spectrum-ClearButton+::slotted([slot=action]),:host([dir=rtl]) .buttons slot[name=action]+.spectrum-ClearButton,:host([dir=rtl]) .buttons slot[name=action]+::slotted([slot=action]){margin-right:var(--spectrum-toast-neutral-button-gap-x,var(--spectrum-global-dimension-size-100))}.body{flex:1 1 auto;align-self:center}:host([dir=ltr]) .body ::slotted([slot=action]){float:right}:host([dir=rtl]) .body ::slotted([slot=action]){float:left}:host([dir=ltr]) .body ::slotted([slot=action]){margin-right:var(--spectrum-global-dimension-size-130)}:host([dir=rtl]) .body ::slotted([slot=action]){margin-left:var(--spectrum-global-dimension-size-130)}:host([dir=ltr]) .body+.buttons{padding-left:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) .body+.buttons{padding-right:var(--spectrum-toast-neutral-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=ltr]) .body+.buttons{border-left-width:1px}:host([dir=rtl]) .body+.buttons{border-right-width:1px}:host([dir=ltr]) .body+.buttons{border-left-style:solid}:host([dir=rtl]) .body+.buttons{border-right-style:solid}:host{background-color:var(--spectrum-toast-neutral-background-color,var(--spectrum-global-color-static-gray-700));color:var(--spectrum-toast-neutral-background-color,var(--spectrum-global-color-static-gray-700))}.content{color:var(--spectrum-toast-neutral-text-color,var(--spectrum-global-color-static-white))}.type{color:#fff}:host([dir=ltr]) .buttons{border-left-color:hsla(0,0%,100%,.2)}:host([dir=rtl]) .buttons{border-right-color:hsla(0,0%,100%,.2)}:host([variant=warning]){background-color:var(--spectrum-toast-warning-background-color,var(--spectrum-global-color-static-orange-700))}:host([variant=warning]),:host([variant=warning]) .closeButton.focus-visible:not(:active),:host([variant=warning]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-warning-background-color,var(--spectrum-global-color-static-orange-700))}:host([variant=warning]),:host([variant=warning]) .closeButton.focus-visible:not(:active),:host([variant=warning]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-warning-background-color,var(--spectrum-global-color-static-orange-700))}:host([variant=error]),:host([variant=negative]){background-color:var(--spectrum-toast-negative-background-color,var(--spectrum-global-color-static-red-700))}:host([variant=error]),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=negative]),:host([variant=negative]) .closeButton.focus-visible:not(:active),:host([variant=negative]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-negative-background-color,var(--spectrum-global-color-static-red-700))}:host([variant=error]),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=error]) .closeButton:focus-visible:not(:active),:host([variant=negative]),:host([variant=negative]) .closeButton.focus-visible:not(:active),:host([variant=negative]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-negative-background-color,var(--spectrum-global-color-static-red-700))}:host([variant=info]){background-color:var(--spectrum-toast-info-background-color,var(--spectrum-global-color-static-blue-700))}:host([variant=info]),:host([variant=info]) .closeButton.focus-visible:not(:active),:host([variant=info]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-info-background-color,var(--spectrum-global-color-static-blue-700))}:host([variant=info]),:host([variant=info]) .closeButton.focus-visible:not(:active),:host([variant=info]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-info-background-color,var(--spectrum-global-color-static-blue-700))}:host([variant=positive]),:host([variant=success]){background-color:var(--spectrum-toast-positive-background-color,var(--spectrum-global-color-static-green-700))}:host([variant=positive]),:host([variant=positive]) .closeButton.focus-visible:not(:active),:host([variant=positive]) .closeButton.focus-visible:not(:active),:host([variant=success]),:host([variant=success]) .closeButton.focus-visible:not(:active),:host([variant=success]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-positive-background-color,var(--spectrum-global-color-static-green-700))}:host([variant=positive]),:host([variant=positive]) .closeButton.focus-visible:not(:active),:host([variant=positive]) .closeButton:focus-visible:not(:active),:host([variant=success]),:host([variant=success]) .closeButton.focus-visible:not(:active),:host([variant=success]) .closeButton:focus-visible:not(:active){color:var(--spectrum-toast-positive-background-color,var(--spectrum-global-color-static-green-700))}.content{line-height:1.5}:host(:not([open])){display:none}
 `;
 export default styles;

src/Toast.d.ts

@@ -35,4 +35,3 @@ import { CSSResultArray, TemplateResult, SpectrumElement, PropertyValues } from '@spectrum-web-components/base';
     protected render(): TemplateResult;
-    protected firstUpdated(changes: PropertyValues): void;
     protected updated(changes: PropertyValues): void;
 }

src/Toast.js

@@ -172,14 +172,12 @@ /*
     }
-    firstUpdated(changes) {
-        super.firstUpdated(changes);
-        this.open = true;
-    }
     updated(changes) {
         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', {
@@ -186,0 +184,0 @@ composed: true,

src/Toast.ts

@@ -211,14 +211,11 @@ /*
 
-    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(
@@ -225,0 +222,0 @@ new CustomEvent('close', {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

121939

increased by2.47%

Lines of code

1178

increased by4.62%

Number of lines in readme file

87

increased by4.82%

Dependency changes

• Updated@spectrum-web-components/base@^0.1.4-alpha.84+1680fb01

• Updated@spectrum-web-components/button@^0.9.5-alpha.84+1680fb01

• Updated@spectrum-web-components/icon@^0.6.4-alpha.84+1680fb01

• Updated@spectrum-web-components/icons-ui@^0.3.4-alpha.84+1680fb01