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

Comparing version 0.35.1-rc.43 to 0.36.0

package.json

 {
     "name": "@spectrum-web-components/toast",
-    "version": "0.35.1-rc.43+432051b80",
+    "version": "0.36.0",
     "publishConfig": {
@@ -60,9 +60,9 @@ "access": "public"
     "dependencies": {
-        "@spectrum-web-components/base": "^0.35.1-rc.43+432051b80",
-        "@spectrum-web-components/button": "^0.35.1-rc.43+432051b80",
-        "@spectrum-web-components/icon": "^0.35.1-rc.43+432051b80",
-        "@spectrum-web-components/icons-workflow": "^0.35.1-rc.43+432051b80"
+        "@spectrum-web-components/base": "^0.36.0",
+        "@spectrum-web-components/button": "^0.36.0",
+        "@spectrum-web-components/icon": "^0.36.0",
+        "@spectrum-web-components/icons-workflow": "^0.36.0"
     },
     "devDependencies": {
-        "@spectrum-css/toast": "^9.0.42"
+        "@spectrum-css/toast": "^9.1.0"
     },
@@ -75,3 +75,3 @@ "types": "./src/index.d.ts",
     ],
-    "gitHead": "432051b8085e7c86032333fa296bfa5334d47d84"
+    "gitHead": "a532ff8a410abeefb54d9638a2316ae82570566e"
 }

src/spectrum-toast.css.dev.js

 "use strict";
 import { css } from "@spectrum-web-components/base";
 const styles = css`
-:host{--spectrum-toast-font-weight:var(--spectrum-regular-font-weight);--spectrum-toast-font-size:var(--spectrum-font-size-100);--spectrum-toast-corner-radius:var(--spectrum-corner-radius-100);--spectrum-toast-block-size:var(--spectrum-toast-height);--spectrum-toast-border-width:var(--spectrum-border-width-100);--spectrum-toast-line-height:var(--spectrum-line-height-100);--spectrum-toast-line-height-cjk:var(--spectrum-cjk-line-height-100);--spectrum-toast-spacing-icon-to-text:var(--spectrum-text-to-visual-100);--spectrum-toast-spacing-start-edge-to-text-and-icon:var(
+:host{--spectrum-toast-font-weight:var(--spectrum-regular-font-weight);--spectrum-toast-font-size:var(--spectrum-font-size-100);--spectrum-toast-corner-radius:var(--spectrum-corner-radius-100);--spectrum-toast-block-size:var(--spectrum-toast-height);--spectrum-toast-max-inline-size:var(--spectrum-toast-maximum-width);--spectrum-toast-border-width:var(--spectrum-border-width-100);--spectrum-toast-line-height:var(--spectrum-line-height-100);--spectrum-toast-line-height-cjk:var(--spectrum-cjk-line-height-100);--spectrum-toast-spacing-icon-to-text:var(--spectrum-text-to-visual-100);--spectrum-toast-spacing-start-edge-to-text-and-icon:var(
 --spectrum-spacing-300
@@ -38,3 +38,7 @@ );--spectrum-toast-spacing-text-and-action-button-to-divider:var(
 --mod-toast-font-weight,var(--spectrum-toast-font-weight)
-);min-block-size:var(--spectrum-toast-block-size);padding-inline-start:var(
+);max-inline-size:var(
+--mod-toast-max-inline-size,var(--spectrum-toast-max-inline-size)
+);min-block-size:var(
+--mod-toast-block-size,var(--spectrum-toast-block-size)
+);padding-inline-start:var(
 --mod-toast-spacing-start-edge-to-text-and-icon,var(--spectrum-toast-spacing-start-edge-to-text-and-icon)
@@ -41,0 +45,0 @@ )}:host([variant=negative]){background-color:var(

src/spectrum-toast.css.js

 "use strict";import{css as t}from"@spectrum-web-components/base";const o=t`
-:host{--spectrum-toast-font-weight:var(--spectrum-regular-font-weight);--spectrum-toast-font-size:var(--spectrum-font-size-100);--spectrum-toast-corner-radius:var(--spectrum-corner-radius-100);--spectrum-toast-block-size:var(--spectrum-toast-height);--spectrum-toast-border-width:var(--spectrum-border-width-100);--spectrum-toast-line-height:var(--spectrum-line-height-100);--spectrum-toast-line-height-cjk:var(--spectrum-cjk-line-height-100);--spectrum-toast-spacing-icon-to-text:var(--spectrum-text-to-visual-100);--spectrum-toast-spacing-start-edge-to-text-and-icon:var(
+:host{--spectrum-toast-font-weight:var(--spectrum-regular-font-weight);--spectrum-toast-font-size:var(--spectrum-font-size-100);--spectrum-toast-corner-radius:var(--spectrum-corner-radius-100);--spectrum-toast-block-size:var(--spectrum-toast-height);--spectrum-toast-max-inline-size:var(--spectrum-toast-maximum-width);--spectrum-toast-border-width:var(--spectrum-border-width-100);--spectrum-toast-line-height:var(--spectrum-line-height-100);--spectrum-toast-line-height-cjk:var(--spectrum-cjk-line-height-100);--spectrum-toast-spacing-icon-to-text:var(--spectrum-text-to-visual-100);--spectrum-toast-spacing-start-edge-to-text-and-icon:var(
 --spectrum-spacing-300
@@ -36,3 +36,7 @@ );--spectrum-toast-spacing-text-and-action-button-to-divider:var(
 --mod-toast-font-weight,var(--spectrum-toast-font-weight)
-);min-block-size:var(--spectrum-toast-block-size);padding-inline-start:var(
+);max-inline-size:var(
+--mod-toast-max-inline-size,var(--spectrum-toast-max-inline-size)
+);min-block-size:var(
+--mod-toast-block-size,var(--spectrum-toast-block-size)
+);padding-inline-start:var(
 --mod-toast-spacing-start-edge-to-text-and-icon,var(--spectrum-toast-spacing-start-edge-to-text-and-icon)
@@ -39,0 +43,0 @@ )}:host([variant=negative]){background-color:var(

src/toast.css.dev.js

 "use strict";
 import { css } from "@spectrum-web-components/base";
 const styles = css`
-:host{--spectrum-toast-font-weight:var(--spectrum-regular-font-weight);--spectrum-toast-font-size:var(--spectrum-font-size-100);--spectrum-toast-corner-radius:var(--spectrum-corner-radius-100);--spectrum-toast-block-size:var(--spectrum-toast-height);--spectrum-toast-border-width:var(--spectrum-border-width-100);--spectrum-toast-line-height:var(--spectrum-line-height-100);--spectrum-toast-line-height-cjk:var(--spectrum-cjk-line-height-100);--spectrum-toast-spacing-icon-to-text:var(--spectrum-text-to-visual-100);--spectrum-toast-spacing-start-edge-to-text-and-icon:var(
+:host{--spectrum-toast-font-weight:var(--spectrum-regular-font-weight);--spectrum-toast-font-size:var(--spectrum-font-size-100);--spectrum-toast-corner-radius:var(--spectrum-corner-radius-100);--spectrum-toast-block-size:var(--spectrum-toast-height);--spectrum-toast-max-inline-size:var(--spectrum-toast-maximum-width);--spectrum-toast-border-width:var(--spectrum-border-width-100);--spectrum-toast-line-height:var(--spectrum-line-height-100);--spectrum-toast-line-height-cjk:var(--spectrum-cjk-line-height-100);--spectrum-toast-spacing-icon-to-text:var(--spectrum-text-to-visual-100);--spectrum-toast-spacing-start-edge-to-text-and-icon:var(
 --spectrum-spacing-300
@@ -38,3 +38,7 @@ );--spectrum-toast-spacing-text-and-action-button-to-divider:var(
 --mod-toast-font-weight,var(--spectrum-toast-font-weight)
-);min-block-size:var(--spectrum-toast-block-size);padding-inline-start:var(
+);max-inline-size:var(
+--mod-toast-max-inline-size,var(--spectrum-toast-max-inline-size)
+);min-block-size:var(
+--mod-toast-block-size,var(--spectrum-toast-block-size)
+);padding-inline-start:var(
 --mod-toast-spacing-start-edge-to-text-and-icon,var(--spectrum-toast-spacing-start-edge-to-text-and-icon)
@@ -41,0 +45,0 @@ )}:host([variant=negative]){background-color:var(

src/toast.css.js

 "use strict";import{css as t}from"@spectrum-web-components/base";const o=t`
-:host{--spectrum-toast-font-weight:var(--spectrum-regular-font-weight);--spectrum-toast-font-size:var(--spectrum-font-size-100);--spectrum-toast-corner-radius:var(--spectrum-corner-radius-100);--spectrum-toast-block-size:var(--spectrum-toast-height);--spectrum-toast-border-width:var(--spectrum-border-width-100);--spectrum-toast-line-height:var(--spectrum-line-height-100);--spectrum-toast-line-height-cjk:var(--spectrum-cjk-line-height-100);--spectrum-toast-spacing-icon-to-text:var(--spectrum-text-to-visual-100);--spectrum-toast-spacing-start-edge-to-text-and-icon:var(
+:host{--spectrum-toast-font-weight:var(--spectrum-regular-font-weight);--spectrum-toast-font-size:var(--spectrum-font-size-100);--spectrum-toast-corner-radius:var(--spectrum-corner-radius-100);--spectrum-toast-block-size:var(--spectrum-toast-height);--spectrum-toast-max-inline-size:var(--spectrum-toast-maximum-width);--spectrum-toast-border-width:var(--spectrum-border-width-100);--spectrum-toast-line-height:var(--spectrum-line-height-100);--spectrum-toast-line-height-cjk:var(--spectrum-cjk-line-height-100);--spectrum-toast-spacing-icon-to-text:var(--spectrum-text-to-visual-100);--spectrum-toast-spacing-start-edge-to-text-and-icon:var(
 --spectrum-spacing-300
@@ -36,3 +36,7 @@ );--spectrum-toast-spacing-text-and-action-button-to-divider:var(
 --mod-toast-font-weight,var(--spectrum-toast-font-weight)
-);min-block-size:var(--spectrum-toast-block-size);padding-inline-start:var(
+);max-inline-size:var(
+--mod-toast-max-inline-size,var(--spectrum-toast-max-inline-size)
+);min-block-size:var(
+--mod-toast-block-size,var(--spectrum-toast-block-size)
+);padding-inline-start:var(
 --mod-toast-spacing-start-edge-to-text-and-icon,var(--spectrum-toast-spacing-start-edge-to-text-and-icon)
@@ -39,0 +43,0 @@ )}:host([variant=negative]){background-color:var(

src/Toast.d.ts

@@ -8,2 +8,3 @@ import { CSSResultArray, PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
 export declare type ToastVariants = 'negative' | 'positive' | 'info' | 'error' | 'warning' | '';
+declare const Toast_base: typeof SpectrumElement;
 /**
@@ -17,3 +18,3 @@ * @element sp-toast
  */
-export declare class Toast extends SpectrumElement {
+export declare class Toast extends Toast_base {
     static get styles(): CSSResultArray;
@@ -58,1 +59,2 @@ open: boolean;
 }
+export {};

src/Toast.dev.js

@@ -22,2 +22,3 @@ "use strict";
 import "@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark-circle.js";
+import { FocusVisiblePolyfillMixin } from "@spectrum-web-components/shared/src/focus-visible.js";
 import toastStyles from "./toast.css.js";
@@ -31,3 +32,3 @@ export const toastVariants = [
 ];
-export class Toast extends SpectrumElement {
+export class Toast extends FocusVisiblePolyfillMixin(SpectrumElement) {
   constructor() {
@@ -160,3 +161,3 @@ super(...arguments);
                     label="Close"
-                    variant="white"
+                    static="white"
                 ></sp-close-button>
@@ -163,0 +164,0 @@ </div>

src/Toast.js

@@ -1,2 +0,2 @@
-"use strict";var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var r=(a,i,t,o)=>{for(var e=o>1?void 0:o?p(i,t):i,n=a.length-1,u;n>=0;n--)(u=a[n])&&(e=(o?u(i,t,e):u(e))||e);return o&&e&&c(i,t,e),e};import{html as s,SpectrumElement as d}from"@spectrum-web-components/base";import{property as l}from"@spectrum-web-components/base/src/decorators.js";import"@spectrum-web-components/button/sp-close-button.js";import"@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js";import"@spectrum-web-components/icons-workflow/icons/sp-icon-info.js";import"@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark-circle.js";import h from"./toast.css.js";export const toastVariants=["negative","positive","info","error","warning"];export class Toast extends d{constructor(){super(...arguments);this.open=!1;this._timeout=null;this._variant="";this.countdownStart=0;this.nextCount=-1;this.doCountdown=t=>{this.countdownStart||(this.countdownStart=performance.now()),t-this.countdownStart>this._timeout?(this.shouldClose(),this.countdownStart=0):this.countdown()};this.countdown=()=>{cancelAnimationFrame(this.nextCount),this.nextCount=requestAnimationFrame(this.doCountdown)};this.holdCountdown=()=>{this.stopCountdown(),this.addEventListener("focusout",this.resumeCountdown)};this.resumeCountdown=()=>{this.removeEventListener("focusout",this.holdCountdown),this.countdown()}}static get styles(){return[h]}set timeout(t){const e=typeof t!==null&&t>0?Math.max(6e3,t):null,n=this.timeout;e&&this.countdownStart&&(this.countdownStart=performance.now()),this._timeout=e,this.requestUpdate("timeout",n)}get timeout(){return this._timeout}set variant(t){if(t===this.variant)return;const o=this.variant;toastVariants.includes(t)?(this.setAttribute("variant",t),this._variant=t):(this.removeAttribute("variant"),this._variant=""),this.requestUpdate("variant",o)}get variant(){return this._variant}renderIcon(t){switch(t){case"info":return s`
+"use strict";var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var r=(a,i,t,o)=>{for(var e=o>1?void 0:o?p(i,t):i,s=a.length-1,u;s>=0;s--)(u=a[s])&&(e=(o?u(i,t,e):u(e))||e);return o&&e&&c(i,t,e),e};import{html as n,SpectrumElement as d}from"@spectrum-web-components/base";import{property as l}from"@spectrum-web-components/base/src/decorators.js";import"@spectrum-web-components/button/sp-close-button.js";import"@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js";import"@spectrum-web-components/icons-workflow/icons/sp-icon-info.js";import"@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark-circle.js";import{FocusVisiblePolyfillMixin as h}from"@spectrum-web-components/shared/src/focus-visible.js";import m from"./toast.css.js";export const toastVariants=["negative","positive","info","error","warning"];export class Toast extends h(d){constructor(){super(...arguments);this.open=!1;this._timeout=null;this._variant="";this.countdownStart=0;this.nextCount=-1;this.doCountdown=t=>{this.countdownStart||(this.countdownStart=performance.now()),t-this.countdownStart>this._timeout?(this.shouldClose(),this.countdownStart=0):this.countdown()};this.countdown=()=>{cancelAnimationFrame(this.nextCount),this.nextCount=requestAnimationFrame(this.doCountdown)};this.holdCountdown=()=>{this.stopCountdown(),this.addEventListener("focusout",this.resumeCountdown)};this.resumeCountdown=()=>{this.removeEventListener("focusout",this.holdCountdown),this.countdown()}}static get styles(){return[m]}set timeout(t){const e=typeof t!==null&&t>0?Math.max(6e3,t):null,s=this.timeout;e&&this.countdownStart&&(this.countdownStart=performance.now()),this._timeout=e,this.requestUpdate("timeout",s)}get timeout(){return this._timeout}set variant(t){if(t===this.variant)return;const o=this.variant;toastVariants.includes(t)?(this.setAttribute("variant",t),this._variant=t):(this.removeAttribute("variant"),this._variant=""),this.requestUpdate("variant",o)}get variant(){return this._variant}renderIcon(t){switch(t){case"info":return n`
                     <sp-icon-info
@@ -6,5 +6,5 @@ label="Information"
                     ></sp-icon-info>
-                `;case"negative":case"error":case"warning":return s`
+                `;case"negative":case"error":case"warning":return n`
                     <sp-icon-alert label="Error" class="type"></sp-icon-alert>
-                `;case"positive":case"success":return s`
+                `;case"positive":case"success":return n`
                     <sp-icon-checkmark-circle
@@ -14,3 +14,3 @@ label="Success"
                     ></sp-icon-checkmark-circle>
-                `;default:return s``}}startCountdown(){this.countdown(),this.addEventListener("focusin",this.holdCountdown)}stopCountdown(){cancelAnimationFrame(this.nextCount),this.countdownStart=0}shouldClose(){this.dispatchEvent(new CustomEvent("close",{composed:!0,bubbles:!0,cancelable:!0}))&&this.close()}close(){this.open=!1}render(){return s`
+                `;default:return n``}}startCountdown(){this.countdown(),this.addEventListener("focusin",this.holdCountdown)}stopCountdown(){cancelAnimationFrame(this.nextCount),this.countdownStart=0}shouldClose(){this.dispatchEvent(new CustomEvent("close",{composed:!0,bubbles:!0,cancelable:!0}))&&this.close()}close(){this.open=!1}render(){return n`
             ${this.renderIcon(this.variant)}
@@ -27,3 +27,3 @@ <div class="body" role="alert">
                     label="Close"
-                    variant="white"
+                    static="white"
                 ></sp-close-button>
@@ -30,0 +30,0 @@ </div>

stories/toast.stories.js

@@ -5,3 +5,2 @@ "use strict";
 import "@spectrum-web-components/button/sp-button.js";
-import "@spectrum-web-components/overlay/sp-overlay.js";
 import "@spectrum-web-components/overlay/overlay-trigger.js";
@@ -143,17 +142,2 @@ import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
 export const overlaidLeft = () => overlaid("left");
-export const overlay = (args) => {
-  return html`
-        <style>
-            sp-toast {
-                position: fixed;
-                bottom: 1em;
-                left: 1em;
-            }
-        </style>
-        <sp-button id="overlay">Toggle Toast overlay</sp-button>
-        <sp-overlay trigger="overlay@click" type="auto" open>
-            ${variantDemo({ ...args, variant: "positive" })}
-        </sp-overlay>
-    `;
-};
 //# sourceMappingURL=toast.stories.js.map

test/toast.test.js

@@ -239,3 +239,16 @@ "use strict";
   });
+  it('sp close button renders with static="white"', async () => {
+    const el = await fixture(
+      html`
+                <sp-toast open>Help text.</sp-toast>
+            `
+    );
+    const renderRoot = el.shadowRoot ? el.shadowRoot : el;
+    const closeButton = renderRoot.querySelector(
+      "sp-close-button"
+    );
+    expect(closeButton).to.exist;
+    expect(closeButton.getAttribute("static")).to.equal("white");
+  });
 });
 //# sourceMappingURL=toast.test.js.map

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

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

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

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

183603

increased by6.43%

Number of package files

38

increased by2.7%

Lines of code

1678

increased by22.84%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• + Added@spectrum-web-components/base@0.36.0(transitive)

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

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

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

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

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

• + Added@spectrum-web-components/icons-workflow@0.36.0(transitive)

• + Added@spectrum-web-components/iconset@0.36.0(transitive)

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

• - Removed@spectrum-web-components/base@0.35.1-rc.43(transitive)

• - Removed@spectrum-web-components/button@0.35.1-rc.43(transitive)

• - Removed@spectrum-web-components/clear-button@0.35.1-rc.43(transitive)

• - Removed@spectrum-web-components/close-button@0.35.1-rc.43(transitive)

• - Removed@spectrum-web-components/icon@0.35.1-rc.43(transitive)

• - Removed@spectrum-web-components/icons-ui@0.35.1-rc.43(transitive)

• - Removed@spectrum-web-components/icons-workflow@0.35.1-rc.43(transitive)

• - Removed@spectrum-web-components/iconset@0.35.1-rc.43(transitive)

• - Removed@spectrum-web-components/shared@0.35.1-rc.43(transitive)

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

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

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

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