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

Comparing version 0.4.4-alpha.28 to 0.4.4-alpha.71

CHANGELOG.md

@@ -6,2 +6,6 @@ # Change Log
 
+## [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)
+
+**Note:** Version bump only for package @spectrum-web-components/toast
+
 ## [0.4.3](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/toast@0.4.2...@spectrum-web-components/toast@0.4.3) (2020-07-27)
@@ -8,0 +12,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-alpha.28+1f7f36f5",
+    "version": "0.4.4-alpha.71+1e82c26e",
     "description": "",
@@ -48,13 +48,12 @@ "main": "src/index.js",
     "devDependencies": {
-        "@spectrum-css/toast": "^2.0.2"
+        "@spectrum-css/toast": "^3.0.0-beta.3"
     },
     "dependencies": {
-        "@spectrum-web-components/button": "^0.8.4-alpha.28+1f7f36f5",
-        "@spectrum-web-components/icon": "^0.5.2-alpha.34+1f7f36f5",
-        "@spectrum-web-components/icons-ui": "^0.2.2-alpha.34+1f7f36f5",
-        "lit-element": "^2.1.0",
-        "lit-html": "^1.0.0",
+        "@spectrum-web-components/base": "^0.0.2-alpha.1038+1e82c26e",
+        "@spectrum-web-components/button": "^0.8.4-alpha.71+1e82c26e",
+        "@spectrum-web-components/icon": "^0.5.2-alpha.77+1e82c26e",
+        "@spectrum-web-components/icons-ui": "^0.2.2-alpha.77+1e82c26e",
         "tslib": "^2.0.0"
     },
-    "gitHead": "1f7f36f5bc1bd448f5a5eeb72a72414712e849ff"
+    "gitHead": "1e82c26ee95e858f3c97afd070e1fc9e3905cebd"
 }

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

Manifest confusion

Supply chain risk

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

101610

increased by15.72%

Dependency count

5

decreased by-16.67%

Lines of code

1057

increased by11.73%

Dependency changes

• + Added@spectrum-web-components/base@^0.0.2-alpha.1038+1e82c26e

• + Added@spectrum-web-components/base@0.0.2-alpha.1038(transitive)

• - Removedlit-element@^2.1.0

• - Removedlit-html@^1.0.0

• Updated@spectrum-web-components/button@^0.8.4-alpha.71+1e82c26e

• Updated@spectrum-web-components/icon@^0.5.2-alpha.77+1e82c26e

• Updated@spectrum-web-components/icons-ui@^0.2.2-alpha.77+1e82c26e