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

Comparing version 0.4.4 to 0.5.0

CHANGELOG.md

@@ -6,2 +6,8 @@ # Change Log
 
+# [0.5.0](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/toast@0.4.4...@spectrum-web-components/toast@0.5.0) (2020-08-31)
+
+### Features
+
+-   update to Spectrum CSS v3.0.0 ([e8b3d8f](https://github.com/adobe/spectrum-web-components/commit/e8b3d8f75c77c04b4d7af126b91b0f6ad2a40742))
+
 ## [0.4.4](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/toast@0.4.3...@spectrum-web-components/toast@0.4.4) (2020-08-19)
@@ -8,0 +14,0 @@

custom-elements.json

@@ -40,2 +40,6 @@ {
           "type": "ToastVariants"
+        },
+        {
+          "name": "shadowRoot",
+          "type": "ShadowRoot"
         }
@@ -42,0 +46,0 @@ ],

package.json

@@ -21,3 +21,3 @@ {
     ],
-    "version": "0.4.4",
+    "version": "0.5.0",
     "description": "",
@@ -45,16 +45,18 @@ "main": "src/index.js",
     ],
+    "scripts": {
+        "test": "echo \"Error: run tests from mono-repo root.\" && exit 1"
+    },
     "author": "",
     "license": "Apache-2.0",
     "devDependencies": {
-        "@spectrum-css/toast": "^2.0.2"
+        "@spectrum-css/toast": "^3.0.0-beta.3"
     },
     "dependencies": {
-        "@spectrum-web-components/button": "^0.8.4",
-        "@spectrum-web-components/icon": "^0.5.2",
-        "@spectrum-web-components/icons-ui": "^0.2.2",
-        "lit-element": "^2.1.0",
-        "lit-html": "^1.0.0",
+        "@spectrum-web-components/base": "^0.1.0",
+        "@spectrum-web-components/button": "^0.9.0",
+        "@spectrum-web-components/icon": "^0.6.0",
+        "@spectrum-web-components/icons-ui": "^0.3.0",
         "tslib": "^2.0.0"
     },
-    "gitHead": "61d6daa63fedca757761095d1e1ed6919d8a1673"
+    "gitHead": "51706b5f7aeec990c6323501aa22f8aee5827e31"
 }

src/spectrum-toast.css.d.ts

@@ -1,2 +0,2 @@
-declare const styles: import("lit-element").CSSResult;
+declare const styles: import("@spectrum-web-components/base").CSSResult;
 export default styles;

src/spectrum-toast.css.js

@@ -12,7 +12,7 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css `
-:host{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:stretch;border-radius:var(--spectrum-toast-border-radius,var(--spectrum-global-dimension-static-size-50));padding:var(--spectrum-toast-padding-y,var(--spectrum-global-dimension-size-100)) var(--spectrum-toast-padding-right,var(--spectrum-global-dimension-size-100)) var(--spectrum-toast-padding-y,var(--spectrum-global-dimension-size-100)) var(--spectrum-toast-padding-left,var(--spectrum-global-dimension-size-200));font-size:var(--spectrum-toast-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-toast-text-font-weight,var(--spectrum-global-font-weight-bold));-webkit-font-smoothing:antialiased;background-color:var(--spectrum-toast-background-color,var(--spectrum-global-color-static-gray-700));color:var(--spectrum-toast-background-color,var(--spectrum-global-color-static-gray-700))}.type{flex-shrink:0;flex-grow:0;margin:var(--spectrum-global-dimension-size-85) var(--spectrum-toast-icon-padding-right,var(--spectrum-global-dimension-size-150)) var(--spectrum-global-dimension-size-85) 0;color:#fff}.content{flex:1 1 auto;display:inline-block;box-sizing:border-box;padding:var(--spectrum-global-dimension-size-65) var(--spectrum-toast-content-padding-right,var(--spectrum-global-dimension-size-200)) var(--spectrum-global-dimension-size-65) 0;text-align:left;color:var(--spectrum-toast-text-color,var(--spectrum-global-color-static-white))}.buttons{display:flex;flex:0 0 auto;align-items:flex-start;border-left-color:hsla(0,0%,100%,.2)}.buttons .spectrum-ClearButton+.spectrum-ClearButton,.buttons .spectrum-ClearButton+::slotted([slot=action]){margin-left:var(--spectrum-toast-button-gap,var(--spectrum-global-dimension-size-100))}.body{flex:1 1 auto;align-self:center}.body ::slotted([slot=action]){float:right;margin-right:var(--spectrum-global-dimension-size-130)}.body+.buttons{padding-left:var(--spectrum-toast-padding-right,var(--spectrum-global-dimension-size-100));border-left-width:1px;border-left-style:solid}: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){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-error-background-color,var(--spectrum-global-color-static-red-700))}:host([variant=error]),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=negative]),:host([variant=negative]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-error-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){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=success]),: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-padding-right,var(--spectrum-global-dimension-size-100));padding-left:var(--spectrum-toast-padding-left,var(--spectrum-global-dimension-size-200))}:host([dir=rtl]){padding-left:var(--spectrum-toast-padding-right,var(--spectrum-global-dimension-size-100));padding-right:var(--spectrum-toast-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-border-radius,var(--spectrum-global-dimension-static-size-50));padding-top:var(--spectrum-toast-padding-y,var(--spectrum-global-dimension-size-100));padding-bottom:var(--spectrum-toast-padding-y,var(--spectrum-global-dimension-size-100));font-size:var(--spectrum-toast-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-toast-text-font-weight,var(--spectrum-global-font-weight-bold));-webkit-font-smoothing:antialiased;background-color:var(--spectrum-toast-background-color,var(--spectrum-global-color-static-gray-700));color:var(--spectrum-toast-background-color,var(--spectrum-global-color-static-gray-700))}:host([dir=ltr]) .type{margin-right:var(--spectrum-toast-icon-padding-right,var(--spectrum-global-dimension-size-150));margin-left:0}:host([dir=rtl]) .type{margin-left:var(--spectrum-toast-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-content-padding-right,var(--spectrum-global-dimension-size-200));padding-left:0;text-align:left}:host([dir=rtl]) .content{padding-left:var(--spectrum-toast-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);color:var(--spectrum-toast-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-button-gap,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-button-gap,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-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-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){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-error-background-color,var(--spectrum-global-color-static-red-700))}:host([variant=error]),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=negative]),:host([variant=negative]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-error-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){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=success]),: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

@@ -12,6 +12,6 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css`
-:host{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:stretch;border-radius:var(--spectrum-toast-border-radius,var(--spectrum-global-dimension-static-size-50));padding:var(--spectrum-toast-padding-y,var(--spectrum-global-dimension-size-100)) var(--spectrum-toast-padding-right,var(--spectrum-global-dimension-size-100)) var(--spectrum-toast-padding-y,var(--spectrum-global-dimension-size-100)) var(--spectrum-toast-padding-left,var(--spectrum-global-dimension-size-200));font-size:var(--spectrum-toast-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-toast-text-font-weight,var(--spectrum-global-font-weight-bold));-webkit-font-smoothing:antialiased;background-color:var(--spectrum-toast-background-color,var(--spectrum-global-color-static-gray-700));color:var(--spectrum-toast-background-color,var(--spectrum-global-color-static-gray-700))}.type{flex-shrink:0;flex-grow:0;margin:var(--spectrum-global-dimension-size-85) var(--spectrum-toast-icon-padding-right,var(--spectrum-global-dimension-size-150)) var(--spectrum-global-dimension-size-85) 0;color:#fff}.content{flex:1 1 auto;display:inline-block;box-sizing:border-box;padding:var(--spectrum-global-dimension-size-65) var(--spectrum-toast-content-padding-right,var(--spectrum-global-dimension-size-200)) var(--spectrum-global-dimension-size-65) 0;text-align:left;color:var(--spectrum-toast-text-color,var(--spectrum-global-color-static-white))}.buttons{display:flex;flex:0 0 auto;align-items:flex-start;border-left-color:hsla(0,0%,100%,.2)}.buttons .spectrum-ClearButton+.spectrum-ClearButton,.buttons .spectrum-ClearButton+::slotted([slot=action]){margin-left:var(--spectrum-toast-button-gap,var(--spectrum-global-dimension-size-100))}.body{flex:1 1 auto;align-self:center}.body ::slotted([slot=action]){float:right;margin-right:var(--spectrum-global-dimension-size-130)}.body+.buttons{padding-left:var(--spectrum-toast-padding-right,var(--spectrum-global-dimension-size-100));border-left-width:1px;border-left-style:solid}: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){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-error-background-color,var(--spectrum-global-color-static-red-700))}:host([variant=error]),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=negative]),:host([variant=negative]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-error-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){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=success]),: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-padding-right,var(--spectrum-global-dimension-size-100));padding-left:var(--spectrum-toast-padding-left,var(--spectrum-global-dimension-size-200))}:host([dir=rtl]){padding-left:var(--spectrum-toast-padding-right,var(--spectrum-global-dimension-size-100));padding-right:var(--spectrum-toast-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-border-radius,var(--spectrum-global-dimension-static-size-50));padding-top:var(--spectrum-toast-padding-y,var(--spectrum-global-dimension-size-100));padding-bottom:var(--spectrum-toast-padding-y,var(--spectrum-global-dimension-size-100));font-size:var(--spectrum-toast-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-toast-text-font-weight,var(--spectrum-global-font-weight-bold));-webkit-font-smoothing:antialiased;background-color:var(--spectrum-toast-background-color,var(--spectrum-global-color-static-gray-700));color:var(--spectrum-toast-background-color,var(--spectrum-global-color-static-gray-700))}:host([dir=ltr]) .type{margin-right:var(--spectrum-toast-icon-padding-right,var(--spectrum-global-dimension-size-150));margin-left:0}:host([dir=rtl]) .type{margin-left:var(--spectrum-toast-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-content-padding-right,var(--spectrum-global-dimension-size-200));padding-left:0;text-align:left}:host([dir=rtl]) .content{padding-left:var(--spectrum-toast-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);color:var(--spectrum-toast-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-button-gap,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-button-gap,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-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-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){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-error-background-color,var(--spectrum-global-color-static-red-700))}:host([variant=error]),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=negative]),:host([variant=negative]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-error-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){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=success]),: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/spectrum-vars.json

 {
   "custom-properties": {
+    "--spectrum-toast-padding-right": "var(--spectrum-global-dimension-size-100)",
+    "--spectrum-toast-padding-left": "var(--spectrum-global-dimension-size-200)",
     "--spectrum-toast-border-radius": "var(--spectrum-global-dimension-static-size-50)",
     "--spectrum-toast-padding-y": "var(--spectrum-global-dimension-size-100)",
-    "--spectrum-toast-padding-right": "var(--spectrum-global-dimension-size-100)",
-    "--spectrum-toast-padding-left": "var(--spectrum-global-dimension-size-200)",
     "--spectrum-toast-text-size": "var(--spectrum-alias-font-size-default)",
@@ -8,0 +8,0 @@ "--spectrum-toast-text-font-weight": "var(--spectrum-global-font-weight-bold)",

src/toast.css.d.ts

@@ -1,2 +0,2 @@
-declare const styles: import("lit-element").CSSResult;
+declare const styles: import("@spectrum-web-components/base").CSSResult;
 export default styles;

src/toast.css.js

@@ -12,7 +12,7 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css `
-:host{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:stretch;border-radius:var(--spectrum-toast-border-radius,var(--spectrum-global-dimension-static-size-50));padding:var(--spectrum-toast-padding-y,var(--spectrum-global-dimension-size-100)) var(--spectrum-toast-padding-right,var(--spectrum-global-dimension-size-100)) var(--spectrum-toast-padding-y,var(--spectrum-global-dimension-size-100)) var(--spectrum-toast-padding-left,var(--spectrum-global-dimension-size-200));font-size:var(--spectrum-toast-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-toast-text-font-weight,var(--spectrum-global-font-weight-bold));-webkit-font-smoothing:antialiased;background-color:var(--spectrum-toast-background-color,var(--spectrum-global-color-static-gray-700));color:var(--spectrum-toast-background-color,var(--spectrum-global-color-static-gray-700))}.type{flex-shrink:0;flex-grow:0;margin:var(--spectrum-global-dimension-size-85) var(--spectrum-toast-icon-padding-right,var(--spectrum-global-dimension-size-150)) var(--spectrum-global-dimension-size-85) 0;color:#fff}.content{flex:1 1 auto;display:inline-block;box-sizing:border-box;padding:var(--spectrum-global-dimension-size-65) var(--spectrum-toast-content-padding-right,var(--spectrum-global-dimension-size-200)) var(--spectrum-global-dimension-size-65) 0;text-align:left;color:var(--spectrum-toast-text-color,var(--spectrum-global-color-static-white))}.buttons{display:flex;flex:0 0 auto;align-items:flex-start;border-left-color:hsla(0,0%,100%,.2)}.buttons .spectrum-ClearButton+.spectrum-ClearButton,.buttons .spectrum-ClearButton+::slotted([slot=action]){margin-left:var(--spectrum-toast-button-gap,var(--spectrum-global-dimension-size-100))}.body{flex:1 1 auto;align-self:center}.body ::slotted([slot=action]){float:right;margin-right:var(--spectrum-global-dimension-size-130)}.body+.buttons{padding-left:var(--spectrum-toast-padding-right,var(--spectrum-global-dimension-size-100));border-left-width:1px;border-left-style:solid}: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){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-error-background-color,var(--spectrum-global-color-static-red-700))}:host([variant=error]),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=negative]),:host([variant=negative]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-error-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){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=success]),: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-padding-right,var(--spectrum-global-dimension-size-100));padding-left:var(--spectrum-toast-padding-left,var(--spectrum-global-dimension-size-200))}:host([dir=rtl]){padding-left:var(--spectrum-toast-padding-right,var(--spectrum-global-dimension-size-100));padding-right:var(--spectrum-toast-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-border-radius,var(--spectrum-global-dimension-static-size-50));padding-top:var(--spectrum-toast-padding-y,var(--spectrum-global-dimension-size-100));padding-bottom:var(--spectrum-toast-padding-y,var(--spectrum-global-dimension-size-100));font-size:var(--spectrum-toast-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-toast-text-font-weight,var(--spectrum-global-font-weight-bold));-webkit-font-smoothing:antialiased;background-color:var(--spectrum-toast-background-color,var(--spectrum-global-color-static-gray-700));color:var(--spectrum-toast-background-color,var(--spectrum-global-color-static-gray-700))}:host([dir=ltr]) .type{margin-right:var(--spectrum-toast-icon-padding-right,var(--spectrum-global-dimension-size-150));margin-left:0}:host([dir=rtl]) .type{margin-left:var(--spectrum-toast-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-content-padding-right,var(--spectrum-global-dimension-size-200));padding-left:0;text-align:left}:host([dir=rtl]) .content{padding-left:var(--spectrum-toast-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);color:var(--spectrum-toast-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-button-gap,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-button-gap,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-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-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){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-error-background-color,var(--spectrum-global-color-static-red-700))}:host([variant=error]),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=negative]),:host([variant=negative]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-error-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){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=success]),: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

@@ -12,6 +12,6 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css`
-:host{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:stretch;border-radius:var(--spectrum-toast-border-radius,var(--spectrum-global-dimension-static-size-50));padding:var(--spectrum-toast-padding-y,var(--spectrum-global-dimension-size-100)) var(--spectrum-toast-padding-right,var(--spectrum-global-dimension-size-100)) var(--spectrum-toast-padding-y,var(--spectrum-global-dimension-size-100)) var(--spectrum-toast-padding-left,var(--spectrum-global-dimension-size-200));font-size:var(--spectrum-toast-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-toast-text-font-weight,var(--spectrum-global-font-weight-bold));-webkit-font-smoothing:antialiased;background-color:var(--spectrum-toast-background-color,var(--spectrum-global-color-static-gray-700));color:var(--spectrum-toast-background-color,var(--spectrum-global-color-static-gray-700))}.type{flex-shrink:0;flex-grow:0;margin:var(--spectrum-global-dimension-size-85) var(--spectrum-toast-icon-padding-right,var(--spectrum-global-dimension-size-150)) var(--spectrum-global-dimension-size-85) 0;color:#fff}.content{flex:1 1 auto;display:inline-block;box-sizing:border-box;padding:var(--spectrum-global-dimension-size-65) var(--spectrum-toast-content-padding-right,var(--spectrum-global-dimension-size-200)) var(--spectrum-global-dimension-size-65) 0;text-align:left;color:var(--spectrum-toast-text-color,var(--spectrum-global-color-static-white))}.buttons{display:flex;flex:0 0 auto;align-items:flex-start;border-left-color:hsla(0,0%,100%,.2)}.buttons .spectrum-ClearButton+.spectrum-ClearButton,.buttons .spectrum-ClearButton+::slotted([slot=action]){margin-left:var(--spectrum-toast-button-gap,var(--spectrum-global-dimension-size-100))}.body{flex:1 1 auto;align-self:center}.body ::slotted([slot=action]){float:right;margin-right:var(--spectrum-global-dimension-size-130)}.body+.buttons{padding-left:var(--spectrum-toast-padding-right,var(--spectrum-global-dimension-size-100));border-left-width:1px;border-left-style:solid}: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){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-error-background-color,var(--spectrum-global-color-static-red-700))}:host([variant=error]),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=negative]),:host([variant=negative]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-error-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){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=success]),: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-padding-right,var(--spectrum-global-dimension-size-100));padding-left:var(--spectrum-toast-padding-left,var(--spectrum-global-dimension-size-200))}:host([dir=rtl]){padding-left:var(--spectrum-toast-padding-right,var(--spectrum-global-dimension-size-100));padding-right:var(--spectrum-toast-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-border-radius,var(--spectrum-global-dimension-static-size-50));padding-top:var(--spectrum-toast-padding-y,var(--spectrum-global-dimension-size-100));padding-bottom:var(--spectrum-toast-padding-y,var(--spectrum-global-dimension-size-100));font-size:var(--spectrum-toast-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-toast-text-font-weight,var(--spectrum-global-font-weight-bold));-webkit-font-smoothing:antialiased;background-color:var(--spectrum-toast-background-color,var(--spectrum-global-color-static-gray-700));color:var(--spectrum-toast-background-color,var(--spectrum-global-color-static-gray-700))}:host([dir=ltr]) .type{margin-right:var(--spectrum-toast-icon-padding-right,var(--spectrum-global-dimension-size-150));margin-left:0}:host([dir=rtl]) .type{margin-left:var(--spectrum-toast-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-content-padding-right,var(--spectrum-global-dimension-size-200));padding-left:0;text-align:left}:host([dir=rtl]) .content{padding-left:var(--spectrum-toast-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);color:var(--spectrum-toast-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-button-gap,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-button-gap,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-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-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){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-error-background-color,var(--spectrum-global-color-static-red-700))}:host([variant=error]),:host([variant=error]) .closeButton.focus-visible:not(:active),:host([variant=negative]),:host([variant=negative]) .closeButton.focus-visible:not(:active){color:var(--spectrum-toast-error-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){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=success]),: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

@@ -1,2 +0,2 @@
-import { CSSResultArray, TemplateResult, LitElement, PropertyValues } from 'lit-element';
+import { CSSResultArray, TemplateResult, SpectrumElement, PropertyValues } from '@spectrum-web-components/base';
 import '@spectrum-web-components/button/sp-clear-button.js';
@@ -9,3 +9,3 @@ import '@spectrum-web-components/icon/sp-icon.js';
  */
-export declare class Toast extends LitElement {
+export declare class Toast extends SpectrumElement {
     static get styles(): CSSResultArray;
@@ -12,0 +12,0 @@ open: boolean;

src/Toast.js

@@ -13,3 +13,3 @@ /*
 import { __decorate } from "tslib";
-import { html, LitElement, property, } from 'lit-element';
+import { html, SpectrumElement, property, } from '@spectrum-web-components/base';
 import '@spectrum-web-components/button/sp-clear-button.js';
@@ -29,3 +29,3 @@ import '@spectrum-web-components/icon/sp-icon.js';
  */
-export class Toast extends LitElement {
+export class Toast extends SpectrumElement {
     constructor() {
@@ -32,0 +32,0 @@ super(...arguments);

src/Toast.ts

@@ -17,6 +17,6 @@ /*
     TemplateResult,
-    LitElement,
+    SpectrumElement,
     property,
     PropertyValues,
-} from 'lit-element';
+} from '@spectrum-web-components/base';
 import '@spectrum-web-components/button/sp-clear-button.js';
@@ -52,3 +52,3 @@ import '@spectrum-web-components/icon/sp-icon.js';
 
-export class Toast extends LitElement {
+export class Toast extends SpectrumElement {
     public static get styles(): CSSResultArray {
@@ -55,0 +55,0 @@ return [toastStyles];

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

101934

increased by15.88%

Dependency count

5

decreased by-16.67%

Lines of code

1057

increased by11.73%

Dependency changes

• + Added@spectrum-web-components/base@^0.1.0

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

• + Added@spectrum-web-components/icon@0.6.3(transitive)

• + Added@spectrum-web-components/icons-ui@0.3.3(transitive)

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

• - Removedlit-element@^2.1.0

• - Removedlit-html@^1.0.0

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

• - Removed@spectrum-web-components/icon@0.5.2(transitive)

• - Removed@spectrum-web-components/icons-ui@0.2.2(transitive)

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

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

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

• Updated@spectrum-web-components/icons-ui@^0.3.0