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

Comparing version 0.7.2 to 0.7.3

CHANGELOG.md

@@ -6,2 +6,8 @@ # Change Log
 
+## [0.7.3](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/toast@0.7.2...@spectrum-web-components/toast@0.7.3) (2021-02-11)
+
+### Bug Fixes
+
+-   update to latest spectrum-css packages ([a5ca19f](https://github.com/adobe/spectrum-web-components/commit/a5ca19f67d5b3f0951667c4441d4d977bf1e0937))
+
 ## [0.7.2](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/toast@0.7.1...@spectrum-web-components/toast@0.7.2) (2021-02-02)
@@ -8,0 +14,0 @@

package.json

@@ -21,3 +21,3 @@ {
     ],
-    "version": "0.7.2",
+    "version": "0.7.3",
     "description": "",
@@ -53,12 +53,12 @@ "main": "./src/index.js",
     "devDependencies": {
-        "@spectrum-css/toast": "^3.0.0-beta.6"
+        "@spectrum-css/toast": "^3.0.0"
     },
     "dependencies": {
-        "@spectrum-web-components/base": "^0.3.2",
-        "@spectrum-web-components/button": "^0.11.2",
-        "@spectrum-web-components/icon": "^0.8.2",
-        "@spectrum-web-components/icons-workflow": "^0.5.2",
+        "@spectrum-web-components/base": "^0.3.3",
+        "@spectrum-web-components/button": "^0.12.0",
+        "@spectrum-web-components/icon": "^0.8.3",
+        "@spectrum-web-components/icons-workflow": "^0.5.3",
         "tslib": "^2.0.0"
     },
-    "gitHead": "7783ce454deb5a97b3d274ee1b54a24c09065ce4"
+    "gitHead": "975a9d6bf075d367fbc77c9b5cec4eabce66f6c0"
 }

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))}: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-semantic-neutral-background-color-default));color:var(--spectrum-toast-neutral-background-color,var(--spectrum-semantic-neutral-background-color-default))}.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-semantic-negative-color-background))}: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-semantic-negative-color-background))}: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-semantic-negative-color-background))}:host([variant=info]){background-color:var(--spectrum-toast-info-background-color,var(--spectrum-semantic-informative-color-background))}: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-semantic-informative-color-background))}: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-semantic-informative-color-background))}:host([variant=positive]),:host([variant=success]){background-color:var(--spectrum-toast-positive-background-color,var(--spectrum-semantic-positive-color-background))}: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-semantic-positive-color-background))}: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-semantic-positive-color-background))}
+:host{--spectrum-toast-icon-padding-y:var(--spectrum-global-dimension-size-85);--spectrum-toast-neutral-content-padding-top:var(--spectrum-global-dimension-size-65);--spectrum-toast-content-padding-bottom:var(--spectrum-global-dimension-size-65);--spectrum-toast-button-margin-right:var(--spectrum-global-dimension-size-130)}: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-toast-icon-padding-y);margin-bottom:var(--spectrum-toast-icon-padding-y)}: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-toast-neutral-content-padding-top,var(--spectrum-global-dimension-size-65));padding-bottom:var(--spectrum-toast-content-padding-bottom);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-toast-button-margin-right)}:host([dir=rtl]) .body ::slotted([slot=action]){margin-left:var(--spectrum-toast-button-margin-right)}: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-semantic-neutral-background-color-default));color:var(--spectrum-toast-neutral-background-color,var(--spectrum-semantic-neutral-background-color-default))}.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-semantic-negative-color-background))}: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-semantic-negative-color-background))}: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-semantic-negative-color-background))}:host([variant=info]){background-color:var(--spectrum-toast-info-background-color,var(--spectrum-semantic-informative-color-background))}: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-semantic-informative-color-background))}: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-semantic-informative-color-background))}:host([variant=positive]),:host([variant=success]){background-color:var(--spectrum-toast-positive-background-color,var(--spectrum-semantic-positive-color-background))}: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-semantic-positive-color-background))}: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-semantic-positive-color-background))}
 `;
 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))}: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-semantic-neutral-background-color-default));color:var(--spectrum-toast-neutral-background-color,var(--spectrum-semantic-neutral-background-color-default))}.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-semantic-negative-color-background))}: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-semantic-negative-color-background))}: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-semantic-negative-color-background))}:host([variant=info]){background-color:var(--spectrum-toast-info-background-color,var(--spectrum-semantic-informative-color-background))}: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-semantic-informative-color-background))}: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-semantic-informative-color-background))}:host([variant=positive]),:host([variant=success]){background-color:var(--spectrum-toast-positive-background-color,var(--spectrum-semantic-positive-color-background))}: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-semantic-positive-color-background))}: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-semantic-positive-color-background))}
+:host{--spectrum-toast-icon-padding-y:var(--spectrum-global-dimension-size-85);--spectrum-toast-neutral-content-padding-top:var(--spectrum-global-dimension-size-65);--spectrum-toast-content-padding-bottom:var(--spectrum-global-dimension-size-65);--spectrum-toast-button-margin-right:var(--spectrum-global-dimension-size-130)}: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-toast-icon-padding-y);margin-bottom:var(--spectrum-toast-icon-padding-y)}: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-toast-neutral-content-padding-top,var(--spectrum-global-dimension-size-65));padding-bottom:var(--spectrum-toast-content-padding-bottom);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-toast-button-margin-right)}:host([dir=rtl]) .body ::slotted([slot=action]){margin-left:var(--spectrum-toast-button-margin-right)}: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-semantic-neutral-background-color-default));color:var(--spectrum-toast-neutral-background-color,var(--spectrum-semantic-neutral-background-color-default))}.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-semantic-negative-color-background))}: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-semantic-negative-color-background))}: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-semantic-negative-color-background))}:host([variant=info]){background-color:var(--spectrum-toast-info-background-color,var(--spectrum-semantic-informative-color-background))}: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-semantic-informative-color-background))}: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-semantic-informative-color-background))}:host([variant=positive]),:host([variant=success]){background-color:var(--spectrum-toast-positive-background-color,var(--spectrum-semantic-positive-color-background))}: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-semantic-positive-color-background))}: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-semantic-positive-color-background))}
 `;
 export default styles;

src/spectrum-vars.json

@@ -11,2 +11,3 @@ {
     "--spectrum-toast-neutral-content-padding-right": "var(--spectrum-global-dimension-size-200)",
+    "--spectrum-toast-neutral-content-padding-top": "var(--spectrum-global-dimension-size-65)",
     "--spectrum-toast-info-text-size": "var(--spectrum-alias-font-size-default)",
@@ -13,0 +14,0 @@ "--spectrum-toast-info-text-font-weight": "var(--spectrum-global-font-weight-bold)",

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))}: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-semantic-neutral-background-color-default));color:var(--spectrum-toast-neutral-background-color,var(--spectrum-semantic-neutral-background-color-default))}.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-semantic-negative-color-background))}: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-semantic-negative-color-background))}: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-semantic-negative-color-background))}:host([variant=info]){background-color:var(--spectrum-toast-info-background-color,var(--spectrum-semantic-informative-color-background))}: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-semantic-informative-color-background))}: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-semantic-informative-color-background))}:host([variant=positive]),:host([variant=success]){background-color:var(--spectrum-toast-positive-background-color,var(--spectrum-semantic-positive-color-background))}: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-semantic-positive-color-background))}: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-semantic-positive-color-background))}.content{line-height:1.5}:host(:not([open])){display:none}
+:host{--spectrum-toast-icon-padding-y:var(--spectrum-global-dimension-size-85);--spectrum-toast-neutral-content-padding-top:var(--spectrum-global-dimension-size-65);--spectrum-toast-content-padding-bottom:var(--spectrum-global-dimension-size-65);--spectrum-toast-button-margin-right:var(--spectrum-global-dimension-size-130)}: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-toast-icon-padding-y);margin-bottom:var(--spectrum-toast-icon-padding-y)}: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-toast-neutral-content-padding-top,var(--spectrum-global-dimension-size-65));padding-bottom:var(--spectrum-toast-content-padding-bottom);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-toast-button-margin-right)}:host([dir=rtl]) .body ::slotted([slot=action]){margin-left:var(--spectrum-toast-button-margin-right)}: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-semantic-neutral-background-color-default));color:var(--spectrum-toast-neutral-background-color,var(--spectrum-semantic-neutral-background-color-default))}.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-semantic-negative-color-background))}: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-semantic-negative-color-background))}: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-semantic-negative-color-background))}:host([variant=info]){background-color:var(--spectrum-toast-info-background-color,var(--spectrum-semantic-informative-color-background))}: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-semantic-informative-color-background))}: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-semantic-informative-color-background))}:host([variant=positive]),:host([variant=success]){background-color:var(--spectrum-toast-positive-background-color,var(--spectrum-semantic-positive-color-background))}: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-semantic-positive-color-background))}: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-semantic-positive-color-background))}.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))}: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-semantic-neutral-background-color-default));color:var(--spectrum-toast-neutral-background-color,var(--spectrum-semantic-neutral-background-color-default))}.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-semantic-negative-color-background))}: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-semantic-negative-color-background))}: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-semantic-negative-color-background))}:host([variant=info]){background-color:var(--spectrum-toast-info-background-color,var(--spectrum-semantic-informative-color-background))}: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-semantic-informative-color-background))}: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-semantic-informative-color-background))}:host([variant=positive]),:host([variant=success]){background-color:var(--spectrum-toast-positive-background-color,var(--spectrum-semantic-positive-color-background))}: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-semantic-positive-color-background))}: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-semantic-positive-color-background))}.content{line-height:1.5}:host(:not([open])){display:none}
+:host{--spectrum-toast-icon-padding-y:var(--spectrum-global-dimension-size-85);--spectrum-toast-neutral-content-padding-top:var(--spectrum-global-dimension-size-65);--spectrum-toast-content-padding-bottom:var(--spectrum-global-dimension-size-65);--spectrum-toast-button-margin-right:var(--spectrum-global-dimension-size-130)}: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-toast-icon-padding-y);margin-bottom:var(--spectrum-toast-icon-padding-y)}: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-toast-neutral-content-padding-top,var(--spectrum-global-dimension-size-65));padding-bottom:var(--spectrum-toast-content-padding-bottom);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-toast-button-margin-right)}:host([dir=rtl]) .body ::slotted([slot=action]){margin-left:var(--spectrum-toast-button-margin-right)}: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-semantic-neutral-background-color-default));color:var(--spectrum-toast-neutral-background-color,var(--spectrum-semantic-neutral-background-color-default))}.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-semantic-negative-color-background))}: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-semantic-negative-color-background))}: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-semantic-negative-color-background))}:host([variant=info]){background-color:var(--spectrum-toast-info-background-color,var(--spectrum-semantic-informative-color-background))}: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-semantic-informative-color-background))}: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-semantic-informative-color-background))}:host([variant=positive]),:host([variant=success]){background-color:var(--spectrum-toast-positive-background-color,var(--spectrum-semantic-positive-color-background))}: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-semantic-positive-color-background))}: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-semantic-positive-color-background))}.content{line-height:1.5}:host(:not([open])){display:none}
 `;
 export default styles;

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

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

Improved metrics

Total package byte prevSize

127266

increased by2.52%

Lines of code

1181

increased by1.99%

Dependency changes

• + Added@spectrum-web-components/button@0.12.0(transitive)

• + Added@spectrum-web-components/shared@0.10.0(transitive)

• - Removed@spectrum-web-components/button@0.11.2(transitive)

• - Removed@spectrum-web-components/shared@0.9.0(transitive)

• Updated@spectrum-web-components/base@^0.3.3

• Updated@spectrum-web-components/button@^0.12.0

• Updated@spectrum-web-components/icon@^0.8.3

• Updated@spectrum-web-components/icons-workflow@^0.5.3