@spectrum-web-components/progress-circle - npm Package Compare versions

Comparing version 0.6.0 to 0.7.0

custom-elements.json

@@ -63,2 +63,12 @@ {
               "kind": "field",
+              "name": "static",
+              "type": {
+                "text": "'white' | undefined"
+              },
+              "privacy": "public",
+              "attribute": "static",
+              "reflects": true
+            },
+            {
+              "kind": "field",
               "name": "progress",
@@ -117,2 +127,9 @@ "type": {
             {
+              "name": "static",
+              "type": {
+                "text": "'white' | undefined"
+              },
+              "fieldName": "static"
+            },
+            {
               "name": "progress",
@@ -119,0 +136,0 @@ "type": {

package.json

 {
     "name": "@spectrum-web-components/progress-circle",
-    "version": "0.6.0",
+    "version": "0.7.0",
     "publishConfig": {
@@ -64,3 +64,3 @@ "access": "public"
     "devDependencies": {
-        "@spectrum-css/progresscircle": "^1.0.23"
+        "@spectrum-css/progresscircle": "^2.0.1"
     },
@@ -73,3 +73,3 @@ "types": "./src/index.d.ts",
     ],
-    "gitHead": "05c81318844160db3f8156144106e643507fef97"
+    "gitHead": "31d083d1eb61a1382335030c190c85d85f41e15d"
 }

README.md

@@ -54,5 +54,5 @@ ## Description
 
-### Over background
+### Static
 
-When a loader needs to be placed on top of a colored background, use the over background loader as signified by `[over-background]`. This loader uses a white opaque color no matter the background. Make sure the background offers enough contrast for the loader to be legible.
+If you display your `<sp-progress-cicle>` element over the top of other content, e.g. an image or an alternate background color, it may become appropariate to update the colors with which the circle and loading progress indicator are delivered. To do this, leverage the `static` attribute with the value of `white` to ensure the content of your page is being delivered accessibly.
 
@@ -66,3 +66,3 @@ ```html
         progress="42"
-        over-background
+        static="white"
         size="s"
@@ -73,3 +73,3 @@ ></sp-progress-circle>
         progress="7"
-        over-background
+        static="white"
     ></sp-progress-circle>
@@ -79,3 +79,3 @@ <sp-progress-circle
         progress="68"
-        over-background
+        static="white"
         size="l"
@@ -82,0 +82,0 @@ ></sp-progress-circle>

sp-progress-circle.dev.js

@@ -0,3 +1,4 @@
+"use strict";
 import { ProgressCircle } from "./src/ProgressCircle.dev.js";
 customElements.define("sp-progress-circle", ProgressCircle);
 //# sourceMappingURL=sp-progress-circle.dev.js.map

sp-progress-circle.js

@@ -1,2 +0,2 @@
-import{ProgressCircle as e}from"./src/ProgressCircle.js";customElements.define("sp-progress-circle",e);
+"use strict";import{ProgressCircle as e}from"./src/ProgressCircle.js";customElements.define("sp-progress-circle",e);
 //# sourceMappingURL=sp-progress-circle.js.map

src/index.dev.js

@@ -0,2 +1,3 @@
+"use strict";
 export * from "./ProgressCircle.dev.js";
 //# sourceMappingURL=index.dev.js.map

src/index.js

@@ -1,2 +0,2 @@
-export*from"./ProgressCircle.js";
+"use strict";export*from"./ProgressCircle.js";
 //# sourceMappingURL=index.js.map

src/progress-circle.css.dev.js

@@ -0,68 +1,63 @@
+"use strict";
 import { css } from "@spectrum-web-components/base";
 const styles = css`
-.fill-submask-2{animation:spectrum-fill-mask-2 1s linear infinite}@keyframes spectrum-fill-mask-1{0%{transform:rotate(90deg)}1.69%{transform:rotate(72.3deg)}3.39%{transform:rotate(55.5deg)}5.08%{transform:rotate(40.3deg)}6.78%{transform:rotate(25deg)}8.47%{transform:rotate(10.6deg)}10.17%{transform:rotate(0deg)}11.86%{transform:rotate(0deg)}13.56%{transform:rotate(0deg)}15.25%{transform:rotate(0deg)}16.95%{transform:rotate(0deg)}18.64%{transform:rotate(0deg)}20.34%{transform:rotate(0deg)}22.03%{transform:rotate(0deg)}23.73%{transform:rotate(0deg)}25.42%{transform:rotate(0deg)}27.12%{transform:rotate(0deg)}28.81%{transform:rotate(0deg)}30.51%{transform:rotate(0deg)}32.2%{transform:rotate(0deg)}33.9%{transform:rotate(0deg)}35.59%{transform:rotate(0deg)}37.29%{transform:rotate(0deg)}38.98%{transform:rotate(0deg)}40.68%{transform:rotate(0deg)}42.37%{transform:rotate(5.3deg)}44.07%{transform:rotate(13.4deg)}45.76%{transform:rotate(20.6deg)}47.46%{transform:rotate(29deg)}49.15%{transform:rotate(36.5deg)}50.85%{transform:rotate(42.6deg)}52.54%{transform:rotate(48.8deg)}54.24%{transform:rotate(54.2deg)}55.93%{transform:rotate(59.4deg)}57.63%{transform:rotate(63.2deg)}59.32%{transform:rotate(67.2deg)}61.02%{transform:rotate(70.8deg)}62.71%{transform:rotate(73.8deg)}64.41%{transform:rotate(76.2deg)}66.1%{transform:rotate(78.7deg)}67.8%{transform:rotate(80.6deg)}69.49%{transform:rotate(82.6deg)}71.19%{transform:rotate(83.7deg)}72.88%{transform:rotate(85deg)}74.58%{transform:rotate(86.3deg)}76.27%{transform:rotate(87deg)}77.97%{transform:rotate(87.7deg)}79.66%{transform:rotate(88.3deg)}81.36%{transform:rotate(88.6deg)}83.05%{transform:rotate(89.2deg)}84.75%{transform:rotate(89.2deg)}86.44%{transform:rotate(89.5deg)}88.14%{transform:rotate(89.9deg)}89.83%{transform:rotate(89.7deg)}91.53%{transform:rotate(90.1deg)}93.22%{transform:rotate(90.2deg)}94.92%{transform:rotate(90.1deg)}96.61%{transform:rotate(90deg)}98.31%{transform:rotate(89.8deg)}to{transform:rotate(90deg)}}@keyframes spectrum-fill-mask-2{0%{transform:rotate(180deg)}1.69%{transform:rotate(180deg)}3.39%{transform:rotate(180deg)}5.08%{transform:rotate(180deg)}6.78%{transform:rotate(180deg)}8.47%{transform:rotate(180deg)}10.17%{transform:rotate(179.2deg)}11.86%{transform:rotate(164deg)}13.56%{transform:rotate(151.8deg)}15.25%{transform:rotate(140.8deg)}16.95%{transform:rotate(130.3deg)}18.64%{transform:rotate(120.4deg)}20.34%{transform:rotate(110.8deg)}22.03%{transform:rotate(101.6deg)}23.73%{transform:rotate(93.5deg)}25.42%{transform:rotate(85.4deg)}27.12%{transform:rotate(78.1deg)}28.81%{transform:rotate(71.2deg)}30.51%{transform:rotate(89.1deg)}32.2%{transform:rotate(105.5deg)}33.9%{transform:rotate(121.3deg)}35.59%{transform:rotate(135.5deg)}37.29%{transform:rotate(148.4deg)}38.98%{transform:rotate(161deg)}40.68%{transform:rotate(173.5deg)}42.37%{transform:rotate(180deg)}44.07%{transform:rotate(180deg)}45.76%{transform:rotate(180deg)}47.46%{transform:rotate(180deg)}49.15%{transform:rotate(180deg)}50.85%{transform:rotate(180deg)}52.54%{transform:rotate(180deg)}54.24%{transform:rotate(180deg)}55.93%{transform:rotate(180deg)}57.63%{transform:rotate(180deg)}59.32%{transform:rotate(180deg)}61.02%{transform:rotate(180deg)}62.71%{transform:rotate(180deg)}64.41%{transform:rotate(180deg)}66.1%{transform:rotate(180deg)}67.8%{transform:rotate(180deg)}69.49%{transform:rotate(180deg)}71.19%{transform:rotate(180deg)}72.88%{transform:rotate(180deg)}74.58%{transform:rotate(180deg)}76.27%{transform:rotate(180deg)}77.97%{transform:rotate(180deg)}79.66%{transform:rotate(180deg)}81.36%{transform:rotate(180deg)}83.05%{transform:rotate(180deg)}84.75%{transform:rotate(180deg)}86.44%{transform:rotate(180deg)}88.14%{transform:rotate(180deg)}89.83%{transform:rotate(180deg)}91.53%{transform:rotate(180deg)}93.22%{transform:rotate(180deg)}94.92%{transform:rotate(180deg)}96.61%{transform:rotate(180deg)}98.31%{transform:rotate(180deg)}to{transform:rotate(180deg)}}@keyframes spectrum-fills-rotate{0%{transform:rotate(-90deg)}to{transform:rotate(270deg)}}:host{direction:ltr;display:inline-block;height:var(
---spectrum-progresscircle-m-height,var(--spectrum-global-dimension-size-400)
-);position:relative;transform:translateZ(0);width:var(
---spectrum-progresscircle-m-width,var(--spectrum-global-dimension-size-400)
-)}.track{border-radius:var(
---spectrum-progresscircle-m-width,var(--spectrum-global-dimension-size-400)
-);border-style:solid;border-width:var(--spectrum-progresscircle-m-border-size);box-sizing:border-box;height:var(
---spectrum-progresscircle-m-height,var(--spectrum-global-dimension-size-400)
-);width:var(
---spectrum-progresscircle-m-width,var(--spectrum-global-dimension-size-400)
-)}:host([dir=ltr]) .fills{left:0}:host([dir=rtl]) .fills{right:0}.fills{height:100%;position:absolute;top:0;width:100%}.fill{border-radius:var(
---spectrum-progresscircle-m-width,var(--spectrum-global-dimension-size-400)
-);border-style:solid;border-width:var(--spectrum-progresscircle-m-border-size);box-sizing:border-box;height:var(
---spectrum-progresscircle-m-height,var(--spectrum-global-dimension-size-400)
-);width:var(
---spectrum-progresscircle-m-width,var(--spectrum-global-dimension-size-400)
-)}.fillMask1,.fillMask2{height:100%;overflow:hidden;position:absolute;transform:rotate(180deg);transform-origin:100% center;width:50%}.fillSubMask1,.fillSubMask2{height:100%;overflow:hidden;transform:rotate(-180deg);transform-origin:100% center;width:100%}.fillMask2{transform:rotate(0deg)}:host([size=s]){height:var(
---spectrum-progresscircle-s-height,var(--spectrum-global-dimension-size-200)
-);width:var(
---spectrum-progresscircle-s-width,var(--spectrum-global-dimension-size-200)
-)}:host([size=s]) .track{border-radius:var(
---spectrum-progresscircle-s-width,var(--spectrum-global-dimension-size-200)
-);border-style:solid;border-width:var(--spectrum-progresscircle-s-border-size);height:var(
---spectrum-progresscircle-s-height,var(--spectrum-global-dimension-size-200)
-);width:var(
---spectrum-progresscircle-s-width,var(--spectrum-global-dimension-size-200)
-)}:host([size=s]) .fill{border-radius:var(
---spectrum-progresscircle-s-width,var(--spectrum-global-dimension-size-200)
-);border-style:solid;border-width:var(--spectrum-progresscircle-s-border-size);height:var(
---spectrum-progresscircle-s-height,var(--spectrum-global-dimension-size-200)
-);width:var(
---spectrum-progresscircle-s-width,var(--spectrum-global-dimension-size-200)
-)}:host([size=l]){height:var(
---spectrum-progresscircle-l-height,var(--spectrum-global-dimension-size-800)
-);width:var(
---spectrum-progresscircle-l-width,var(--spectrum-global-dimension-size-800)
-)}:host([size=l]) .track{border-radius:var(
---spectrum-progresscircle-l-width,var(--spectrum-global-dimension-size-800)
+.fill-submask-2{animation:spectrum-fill-mask-2 1s linear infinite}@keyframes spectrum-fill-mask-1{0%{transform:rotate(90deg)}1.69%{transform:rotate(72.3deg)}3.39%{transform:rotate(55.5deg)}5.08%{transform:rotate(40.3deg)}6.78%{transform:rotate(25deg)}8.47%{transform:rotate(10.6deg)}10.17%{transform:rotate(0deg)}11.86%{transform:rotate(0deg)}13.56%{transform:rotate(0deg)}15.25%{transform:rotate(0deg)}16.95%{transform:rotate(0deg)}18.64%{transform:rotate(0deg)}20.34%{transform:rotate(0deg)}22.03%{transform:rotate(0deg)}23.73%{transform:rotate(0deg)}25.42%{transform:rotate(0deg)}27.12%{transform:rotate(0deg)}28.81%{transform:rotate(0deg)}30.51%{transform:rotate(0deg)}32.2%{transform:rotate(0deg)}33.9%{transform:rotate(0deg)}35.59%{transform:rotate(0deg)}37.29%{transform:rotate(0deg)}38.98%{transform:rotate(0deg)}40.68%{transform:rotate(0deg)}42.37%{transform:rotate(5.3deg)}44.07%{transform:rotate(13.4deg)}45.76%{transform:rotate(20.6deg)}47.46%{transform:rotate(29deg)}49.15%{transform:rotate(36.5deg)}50.85%{transform:rotate(42.6deg)}52.54%{transform:rotate(48.8deg)}54.24%{transform:rotate(54.2deg)}55.93%{transform:rotate(59.4deg)}57.63%{transform:rotate(63.2deg)}59.32%{transform:rotate(67.2deg)}61.02%{transform:rotate(70.8deg)}62.71%{transform:rotate(73.8deg)}64.41%{transform:rotate(76.2deg)}66.1%{transform:rotate(78.7deg)}67.8%{transform:rotate(80.6deg)}69.49%{transform:rotate(82.6deg)}71.19%{transform:rotate(83.7deg)}72.88%{transform:rotate(85deg)}74.58%{transform:rotate(86.3deg)}76.27%{transform:rotate(87deg)}77.97%{transform:rotate(87.7deg)}79.66%{transform:rotate(88.3deg)}81.36%{transform:rotate(88.6deg)}83.05%{transform:rotate(89.2deg)}84.75%{transform:rotate(89.2deg)}86.44%{transform:rotate(89.5deg)}88.14%{transform:rotate(89.9deg)}89.83%{transform:rotate(89.7deg)}91.53%{transform:rotate(90.1deg)}93.22%{transform:rotate(90.2deg)}94.92%{transform:rotate(90.1deg)}96.61%{transform:rotate(90deg)}98.31%{transform:rotate(89.8deg)}to{transform:rotate(90deg)}}@keyframes spectrum-fill-mask-2{0%{transform:rotate(180deg)}1.69%{transform:rotate(180deg)}3.39%{transform:rotate(180deg)}5.08%{transform:rotate(180deg)}6.78%{transform:rotate(180deg)}8.47%{transform:rotate(180deg)}10.17%{transform:rotate(179.2deg)}11.86%{transform:rotate(164deg)}13.56%{transform:rotate(151.8deg)}15.25%{transform:rotate(140.8deg)}16.95%{transform:rotate(130.3deg)}18.64%{transform:rotate(120.4deg)}20.34%{transform:rotate(110.8deg)}22.03%{transform:rotate(101.6deg)}23.73%{transform:rotate(93.5deg)}25.42%{transform:rotate(85.4deg)}27.12%{transform:rotate(78.1deg)}28.81%{transform:rotate(71.2deg)}30.51%{transform:rotate(89.1deg)}32.2%{transform:rotate(105.5deg)}33.9%{transform:rotate(121.3deg)}35.59%{transform:rotate(135.5deg)}37.29%{transform:rotate(148.4deg)}38.98%{transform:rotate(161deg)}40.68%{transform:rotate(173.5deg)}42.37%{transform:rotate(180deg)}44.07%{transform:rotate(180deg)}45.76%{transform:rotate(180deg)}47.46%{transform:rotate(180deg)}49.15%{transform:rotate(180deg)}50.85%{transform:rotate(180deg)}52.54%{transform:rotate(180deg)}54.24%{transform:rotate(180deg)}55.93%{transform:rotate(180deg)}57.63%{transform:rotate(180deg)}59.32%{transform:rotate(180deg)}61.02%{transform:rotate(180deg)}62.71%{transform:rotate(180deg)}64.41%{transform:rotate(180deg)}66.1%{transform:rotate(180deg)}67.8%{transform:rotate(180deg)}69.49%{transform:rotate(180deg)}71.19%{transform:rotate(180deg)}72.88%{transform:rotate(180deg)}74.58%{transform:rotate(180deg)}76.27%{transform:rotate(180deg)}77.97%{transform:rotate(180deg)}79.66%{transform:rotate(180deg)}81.36%{transform:rotate(180deg)}83.05%{transform:rotate(180deg)}84.75%{transform:rotate(180deg)}86.44%{transform:rotate(180deg)}88.14%{transform:rotate(180deg)}89.83%{transform:rotate(180deg)}91.53%{transform:rotate(180deg)}93.22%{transform:rotate(180deg)}94.92%{transform:rotate(180deg)}96.61%{transform:rotate(180deg)}98.31%{transform:rotate(180deg)}to{transform:rotate(180deg)}}@keyframes spectrum-fills-rotate{0%{transform:rotate(-90deg)}to{transform:rotate(270deg)}}:host{--spectrum-progress-circle-track-border-color:var(
+--spectrum-gray-300
+);--spectrum-progress-circle-fill-border-color:var(--spectrum-blue-900);--spectrum-progress-circle-track-border-color-over-background:var(
+--spectrum-transparent-white-300
+);--spectrum-progress-circle-fill-border-color-over-background:var(
+--spectrum-transparent-white-900
+);--spectrum-progress-circle-size:var(
+--spectrum-progress-circle-size-medium
+);--spectrum-progress-circle-thickness:var(
+--spectrum-progress-circle-thickness-medium
+);--spectrum-progress-circle-track-border-style:solid}:host([size=s]){--spectrum-progress-circle-size:var(
+--spectrum-progress-circle-size-small
+);--spectrum-progress-circle-thickness:var(
+--spectrum-progress-circle-thickness-small
+)}.spectrum-ProgressCircle--medium{--spectrum-progress-circle-size:var(
+--spectrum-progress-circle-size-medium
+);--spectrum-progress-circle-thickness:var(
+--spectrum-progress-circle-thickness-medium
+)}:host([size=l]){--spectrum-progress-circle-size:var(
+--spectrum-progress-circle-size-large
+);--spectrum-progress-circle-thickness:var(
+--spectrum-progress-circle-thickness-large
+)}@media (forced-colors:active){:host{--highcontrast-progress-circle-fill-border-color:Highlight;--highcontrast-progress-circle-fill-border-color-over-background:Highlight}.track{--spectrum-progress-circle-track-border-style:double}}:host{block-size:var(
+--mod-progress-circle-size,var(--spectrum-progress-circle-size)
+);direction:ltr;display:inline-block;inline-size:var(
+--mod-progress-circle-size,var(--spectrum-progress-circle-size)
+);position:relative;transform:translateZ(0)}.track{block-size:var(
+--mod-progress-circle-size,var(--spectrum-progress-circle-size)
+);border-color:var(
+--mod-progress-circle-track-border-color,var(--spectrum-progress-circle-track-border-color)
+);border-radius:var(
+--mod-progress-circle-size,var(--spectrum-progress-circle-size)
+);border-style:var(
+--highcontrast-progress-circle-track-border-style,var(
+--mod-progress-circle-track-border-style,var(--spectrum-progress-circle-track-border-style)
+)
+);border-width:var(
+--mod-progress-circle-thickness,var(--spectrum-progress-circle-thickness)
+);box-sizing:border-box;inline-size:var(
+--mod-progress-circle-size,var(--spectrum-progress-circle-size)
+)}.fills{block-size:100%;inline-size:100%;inset-block-start:0;inset-inline-start:0;position:absolute}.fill{block-size:var(
+--mod-progress-circle-size,var(--spectrum-progress-circle-size)
+);border-color:var(
+--highcontrast-progress-circle-fill-border-color,var(
+--mod-progress-circle-fill-border-color,var(--spectrum-progress-circle-fill-border-color)
+)
+);border-radius:var(
+--mod-progress-circle-size,var(--spectrum-progress-circle-size)
 );border-style:solid;border-width:var(
---spectrum-progresscircle-l-border-size,var(--spectrum-global-dimension-size-50)
-);height:var(
---spectrum-progresscircle-l-height,var(--spectrum-global-dimension-size-800)
-);width:var(
---spectrum-progresscircle-l-width,var(--spectrum-global-dimension-size-800)
-)}:host([size=l]) .fill{border-radius:var(
---spectrum-progresscircle-l-width,var(--spectrum-global-dimension-size-800)
-);border-style:solid;border-width:var(
---spectrum-progresscircle-l-border-size,var(--spectrum-global-dimension-size-50)
-);height:var(
---spectrum-progresscircle-l-height,var(--spectrum-global-dimension-size-800)
-);width:var(
---spectrum-progresscircle-l-width,var(--spectrum-global-dimension-size-800)
-)}:host([indeterminate]) .fills{animation:spectrum-fills-rotate 1s cubic-bezier(.25,.78,.48,.89) infinite;transform:translateZ(0);transform-origin:center;will-change:transform}:host([indeterminate]) .fillSubMask1{animation:spectrum-fill-mask-1 1s linear infinite;transform:translateZ(0);will-change:transform}:host([indeterminate]) .fillSubMask2{animation:spectrum-fill-mask-2 1s linear infinite;transform:translateZ(0);will-change:transform}.track{border-color:var(
---spectrum-progresscircle-m-track-color,var(--spectrum-alias-track-color-default)
-)}.fill{border-color:var(
---spectrum-progresscircle-m-track-fill-color,var(--spectrum-semantic-informative-color-default)
-)}:host([over-background]) .track{border-color:var(
---spectrum-progresscircle-m-over-background-track-color
-)}:host([over-background]) .fill{border-color:var(
---spectrum-progresscircle-m-over-background-track-fill-color
-)}:host([indeterminate][over-background]) .track{border-color:var(
---spectrum-progresscircle-m-over-background-track-color
-)}:host([indeterminate][over-background]) .fill{border-color:var(
---spectrum-progresscircle-m-over-background-track-fill-color
-)}@media (forced-colors:active){.fill{--spectrum-progresscircle-m-track-fill-color:Highlight}}:host{--spectrum-progresscircle-m-over-background-track-fill-color:var(
+--mod-progress-circle-thickness,var(--spectrum-progress-circle-thickness)
+);box-sizing:border-box;inline-size:var(
+--mod-progress-circle-size,var(--spectrum-progress-circle-size)
+)}:host([static=white]) .track{border-color:var(
+--mod-progress-circle-track-border-color-over-background,var(--spectrum-progress-circle-track-border-color-over-background)
+)}:host([static=white]) .fill{border-color:var(
+--highcontrast-progress-circle-fill-border-color-over-background,var(
+--mod-progress-circle-fill-border-color-over-background,var(--spectrum-progress-circle-fill-border-color-over-background)
+)
+)}.fillMask1,.fillMask2{block-size:100%;inline-size:50%;overflow:hidden;position:absolute;transform:rotate(180deg);transform-origin:100% center}.fillSubMask1,.fillSubMask2{block-size:100%;inline-size:100%;overflow:hidden;transform:rotate(-180deg);transform-origin:100% center}.fillMask2{transform:rotate(0deg)}:host([indeterminate]) .fills{animation:spectrum-fills-rotate 1s cubic-bezier(.25,.78,.48,.89) infinite;transform:translateZ(0);transform-origin:center;will-change:transform}:host([indeterminate]) .fillSubMask1{animation:spectrum-fill-mask-1 1s linear infinite;transform:translateZ(0);will-change:transform}:host([indeterminate]) .fillSubMask2{animation:spectrum-fill-mask-2 1s linear infinite;transform:translateZ(0);will-change:transform}:host{--spectrum-progresscircle-m-over-background-track-fill-color:var(
 --spectrum-alias-track-fill-color-overbackground
@@ -69,0 +64,0 @@ )}

src/progress-circle.css.js

@@ -1,70 +0,64 @@
-import{css as r}from"@spectrum-web-components/base";const t=r`
-.fill-submask-2{animation:spectrum-fill-mask-2 1s linear infinite}@keyframes spectrum-fill-mask-1{0%{transform:rotate(90deg)}1.69%{transform:rotate(72.3deg)}3.39%{transform:rotate(55.5deg)}5.08%{transform:rotate(40.3deg)}6.78%{transform:rotate(25deg)}8.47%{transform:rotate(10.6deg)}10.17%{transform:rotate(0deg)}11.86%{transform:rotate(0deg)}13.56%{transform:rotate(0deg)}15.25%{transform:rotate(0deg)}16.95%{transform:rotate(0deg)}18.64%{transform:rotate(0deg)}20.34%{transform:rotate(0deg)}22.03%{transform:rotate(0deg)}23.73%{transform:rotate(0deg)}25.42%{transform:rotate(0deg)}27.12%{transform:rotate(0deg)}28.81%{transform:rotate(0deg)}30.51%{transform:rotate(0deg)}32.2%{transform:rotate(0deg)}33.9%{transform:rotate(0deg)}35.59%{transform:rotate(0deg)}37.29%{transform:rotate(0deg)}38.98%{transform:rotate(0deg)}40.68%{transform:rotate(0deg)}42.37%{transform:rotate(5.3deg)}44.07%{transform:rotate(13.4deg)}45.76%{transform:rotate(20.6deg)}47.46%{transform:rotate(29deg)}49.15%{transform:rotate(36.5deg)}50.85%{transform:rotate(42.6deg)}52.54%{transform:rotate(48.8deg)}54.24%{transform:rotate(54.2deg)}55.93%{transform:rotate(59.4deg)}57.63%{transform:rotate(63.2deg)}59.32%{transform:rotate(67.2deg)}61.02%{transform:rotate(70.8deg)}62.71%{transform:rotate(73.8deg)}64.41%{transform:rotate(76.2deg)}66.1%{transform:rotate(78.7deg)}67.8%{transform:rotate(80.6deg)}69.49%{transform:rotate(82.6deg)}71.19%{transform:rotate(83.7deg)}72.88%{transform:rotate(85deg)}74.58%{transform:rotate(86.3deg)}76.27%{transform:rotate(87deg)}77.97%{transform:rotate(87.7deg)}79.66%{transform:rotate(88.3deg)}81.36%{transform:rotate(88.6deg)}83.05%{transform:rotate(89.2deg)}84.75%{transform:rotate(89.2deg)}86.44%{transform:rotate(89.5deg)}88.14%{transform:rotate(89.9deg)}89.83%{transform:rotate(89.7deg)}91.53%{transform:rotate(90.1deg)}93.22%{transform:rotate(90.2deg)}94.92%{transform:rotate(90.1deg)}96.61%{transform:rotate(90deg)}98.31%{transform:rotate(89.8deg)}to{transform:rotate(90deg)}}@keyframes spectrum-fill-mask-2{0%{transform:rotate(180deg)}1.69%{transform:rotate(180deg)}3.39%{transform:rotate(180deg)}5.08%{transform:rotate(180deg)}6.78%{transform:rotate(180deg)}8.47%{transform:rotate(180deg)}10.17%{transform:rotate(179.2deg)}11.86%{transform:rotate(164deg)}13.56%{transform:rotate(151.8deg)}15.25%{transform:rotate(140.8deg)}16.95%{transform:rotate(130.3deg)}18.64%{transform:rotate(120.4deg)}20.34%{transform:rotate(110.8deg)}22.03%{transform:rotate(101.6deg)}23.73%{transform:rotate(93.5deg)}25.42%{transform:rotate(85.4deg)}27.12%{transform:rotate(78.1deg)}28.81%{transform:rotate(71.2deg)}30.51%{transform:rotate(89.1deg)}32.2%{transform:rotate(105.5deg)}33.9%{transform:rotate(121.3deg)}35.59%{transform:rotate(135.5deg)}37.29%{transform:rotate(148.4deg)}38.98%{transform:rotate(161deg)}40.68%{transform:rotate(173.5deg)}42.37%{transform:rotate(180deg)}44.07%{transform:rotate(180deg)}45.76%{transform:rotate(180deg)}47.46%{transform:rotate(180deg)}49.15%{transform:rotate(180deg)}50.85%{transform:rotate(180deg)}52.54%{transform:rotate(180deg)}54.24%{transform:rotate(180deg)}55.93%{transform:rotate(180deg)}57.63%{transform:rotate(180deg)}59.32%{transform:rotate(180deg)}61.02%{transform:rotate(180deg)}62.71%{transform:rotate(180deg)}64.41%{transform:rotate(180deg)}66.1%{transform:rotate(180deg)}67.8%{transform:rotate(180deg)}69.49%{transform:rotate(180deg)}71.19%{transform:rotate(180deg)}72.88%{transform:rotate(180deg)}74.58%{transform:rotate(180deg)}76.27%{transform:rotate(180deg)}77.97%{transform:rotate(180deg)}79.66%{transform:rotate(180deg)}81.36%{transform:rotate(180deg)}83.05%{transform:rotate(180deg)}84.75%{transform:rotate(180deg)}86.44%{transform:rotate(180deg)}88.14%{transform:rotate(180deg)}89.83%{transform:rotate(180deg)}91.53%{transform:rotate(180deg)}93.22%{transform:rotate(180deg)}94.92%{transform:rotate(180deg)}96.61%{transform:rotate(180deg)}98.31%{transform:rotate(180deg)}to{transform:rotate(180deg)}}@keyframes spectrum-fills-rotate{0%{transform:rotate(-90deg)}to{transform:rotate(270deg)}}:host{direction:ltr;display:inline-block;height:var(
---spectrum-progresscircle-m-height,var(--spectrum-global-dimension-size-400)
-);position:relative;transform:translateZ(0);width:var(
---spectrum-progresscircle-m-width,var(--spectrum-global-dimension-size-400)
-)}.track{border-radius:var(
---spectrum-progresscircle-m-width,var(--spectrum-global-dimension-size-400)
-);border-style:solid;border-width:var(--spectrum-progresscircle-m-border-size);box-sizing:border-box;height:var(
---spectrum-progresscircle-m-height,var(--spectrum-global-dimension-size-400)
-);width:var(
---spectrum-progresscircle-m-width,var(--spectrum-global-dimension-size-400)
-)}:host([dir=ltr]) .fills{left:0}:host([dir=rtl]) .fills{right:0}.fills{height:100%;position:absolute;top:0;width:100%}.fill{border-radius:var(
---spectrum-progresscircle-m-width,var(--spectrum-global-dimension-size-400)
-);border-style:solid;border-width:var(--spectrum-progresscircle-m-border-size);box-sizing:border-box;height:var(
---spectrum-progresscircle-m-height,var(--spectrum-global-dimension-size-400)
-);width:var(
---spectrum-progresscircle-m-width,var(--spectrum-global-dimension-size-400)
-)}.fillMask1,.fillMask2{height:100%;overflow:hidden;position:absolute;transform:rotate(180deg);transform-origin:100% center;width:50%}.fillSubMask1,.fillSubMask2{height:100%;overflow:hidden;transform:rotate(-180deg);transform-origin:100% center;width:100%}.fillMask2{transform:rotate(0deg)}:host([size=s]){height:var(
---spectrum-progresscircle-s-height,var(--spectrum-global-dimension-size-200)
-);width:var(
---spectrum-progresscircle-s-width,var(--spectrum-global-dimension-size-200)
-)}:host([size=s]) .track{border-radius:var(
---spectrum-progresscircle-s-width,var(--spectrum-global-dimension-size-200)
-);border-style:solid;border-width:var(--spectrum-progresscircle-s-border-size);height:var(
---spectrum-progresscircle-s-height,var(--spectrum-global-dimension-size-200)
-);width:var(
---spectrum-progresscircle-s-width,var(--spectrum-global-dimension-size-200)
-)}:host([size=s]) .fill{border-radius:var(
---spectrum-progresscircle-s-width,var(--spectrum-global-dimension-size-200)
-);border-style:solid;border-width:var(--spectrum-progresscircle-s-border-size);height:var(
---spectrum-progresscircle-s-height,var(--spectrum-global-dimension-size-200)
-);width:var(
---spectrum-progresscircle-s-width,var(--spectrum-global-dimension-size-200)
-)}:host([size=l]){height:var(
---spectrum-progresscircle-l-height,var(--spectrum-global-dimension-size-800)
-);width:var(
---spectrum-progresscircle-l-width,var(--spectrum-global-dimension-size-800)
-)}:host([size=l]) .track{border-radius:var(
---spectrum-progresscircle-l-width,var(--spectrum-global-dimension-size-800)
+"use strict";import{css as r}from"@spectrum-web-components/base";const e=r`
+.fill-submask-2{animation:spectrum-fill-mask-2 1s linear infinite}@keyframes spectrum-fill-mask-1{0%{transform:rotate(90deg)}1.69%{transform:rotate(72.3deg)}3.39%{transform:rotate(55.5deg)}5.08%{transform:rotate(40.3deg)}6.78%{transform:rotate(25deg)}8.47%{transform:rotate(10.6deg)}10.17%{transform:rotate(0deg)}11.86%{transform:rotate(0deg)}13.56%{transform:rotate(0deg)}15.25%{transform:rotate(0deg)}16.95%{transform:rotate(0deg)}18.64%{transform:rotate(0deg)}20.34%{transform:rotate(0deg)}22.03%{transform:rotate(0deg)}23.73%{transform:rotate(0deg)}25.42%{transform:rotate(0deg)}27.12%{transform:rotate(0deg)}28.81%{transform:rotate(0deg)}30.51%{transform:rotate(0deg)}32.2%{transform:rotate(0deg)}33.9%{transform:rotate(0deg)}35.59%{transform:rotate(0deg)}37.29%{transform:rotate(0deg)}38.98%{transform:rotate(0deg)}40.68%{transform:rotate(0deg)}42.37%{transform:rotate(5.3deg)}44.07%{transform:rotate(13.4deg)}45.76%{transform:rotate(20.6deg)}47.46%{transform:rotate(29deg)}49.15%{transform:rotate(36.5deg)}50.85%{transform:rotate(42.6deg)}52.54%{transform:rotate(48.8deg)}54.24%{transform:rotate(54.2deg)}55.93%{transform:rotate(59.4deg)}57.63%{transform:rotate(63.2deg)}59.32%{transform:rotate(67.2deg)}61.02%{transform:rotate(70.8deg)}62.71%{transform:rotate(73.8deg)}64.41%{transform:rotate(76.2deg)}66.1%{transform:rotate(78.7deg)}67.8%{transform:rotate(80.6deg)}69.49%{transform:rotate(82.6deg)}71.19%{transform:rotate(83.7deg)}72.88%{transform:rotate(85deg)}74.58%{transform:rotate(86.3deg)}76.27%{transform:rotate(87deg)}77.97%{transform:rotate(87.7deg)}79.66%{transform:rotate(88.3deg)}81.36%{transform:rotate(88.6deg)}83.05%{transform:rotate(89.2deg)}84.75%{transform:rotate(89.2deg)}86.44%{transform:rotate(89.5deg)}88.14%{transform:rotate(89.9deg)}89.83%{transform:rotate(89.7deg)}91.53%{transform:rotate(90.1deg)}93.22%{transform:rotate(90.2deg)}94.92%{transform:rotate(90.1deg)}96.61%{transform:rotate(90deg)}98.31%{transform:rotate(89.8deg)}to{transform:rotate(90deg)}}@keyframes spectrum-fill-mask-2{0%{transform:rotate(180deg)}1.69%{transform:rotate(180deg)}3.39%{transform:rotate(180deg)}5.08%{transform:rotate(180deg)}6.78%{transform:rotate(180deg)}8.47%{transform:rotate(180deg)}10.17%{transform:rotate(179.2deg)}11.86%{transform:rotate(164deg)}13.56%{transform:rotate(151.8deg)}15.25%{transform:rotate(140.8deg)}16.95%{transform:rotate(130.3deg)}18.64%{transform:rotate(120.4deg)}20.34%{transform:rotate(110.8deg)}22.03%{transform:rotate(101.6deg)}23.73%{transform:rotate(93.5deg)}25.42%{transform:rotate(85.4deg)}27.12%{transform:rotate(78.1deg)}28.81%{transform:rotate(71.2deg)}30.51%{transform:rotate(89.1deg)}32.2%{transform:rotate(105.5deg)}33.9%{transform:rotate(121.3deg)}35.59%{transform:rotate(135.5deg)}37.29%{transform:rotate(148.4deg)}38.98%{transform:rotate(161deg)}40.68%{transform:rotate(173.5deg)}42.37%{transform:rotate(180deg)}44.07%{transform:rotate(180deg)}45.76%{transform:rotate(180deg)}47.46%{transform:rotate(180deg)}49.15%{transform:rotate(180deg)}50.85%{transform:rotate(180deg)}52.54%{transform:rotate(180deg)}54.24%{transform:rotate(180deg)}55.93%{transform:rotate(180deg)}57.63%{transform:rotate(180deg)}59.32%{transform:rotate(180deg)}61.02%{transform:rotate(180deg)}62.71%{transform:rotate(180deg)}64.41%{transform:rotate(180deg)}66.1%{transform:rotate(180deg)}67.8%{transform:rotate(180deg)}69.49%{transform:rotate(180deg)}71.19%{transform:rotate(180deg)}72.88%{transform:rotate(180deg)}74.58%{transform:rotate(180deg)}76.27%{transform:rotate(180deg)}77.97%{transform:rotate(180deg)}79.66%{transform:rotate(180deg)}81.36%{transform:rotate(180deg)}83.05%{transform:rotate(180deg)}84.75%{transform:rotate(180deg)}86.44%{transform:rotate(180deg)}88.14%{transform:rotate(180deg)}89.83%{transform:rotate(180deg)}91.53%{transform:rotate(180deg)}93.22%{transform:rotate(180deg)}94.92%{transform:rotate(180deg)}96.61%{transform:rotate(180deg)}98.31%{transform:rotate(180deg)}to{transform:rotate(180deg)}}@keyframes spectrum-fills-rotate{0%{transform:rotate(-90deg)}to{transform:rotate(270deg)}}:host{--spectrum-progress-circle-track-border-color:var(
+--spectrum-gray-300
+);--spectrum-progress-circle-fill-border-color:var(--spectrum-blue-900);--spectrum-progress-circle-track-border-color-over-background:var(
+--spectrum-transparent-white-300
+);--spectrum-progress-circle-fill-border-color-over-background:var(
+--spectrum-transparent-white-900
+);--spectrum-progress-circle-size:var(
+--spectrum-progress-circle-size-medium
+);--spectrum-progress-circle-thickness:var(
+--spectrum-progress-circle-thickness-medium
+);--spectrum-progress-circle-track-border-style:solid}:host([size=s]){--spectrum-progress-circle-size:var(
+--spectrum-progress-circle-size-small
+);--spectrum-progress-circle-thickness:var(
+--spectrum-progress-circle-thickness-small
+)}.spectrum-ProgressCircle--medium{--spectrum-progress-circle-size:var(
+--spectrum-progress-circle-size-medium
+);--spectrum-progress-circle-thickness:var(
+--spectrum-progress-circle-thickness-medium
+)}:host([size=l]){--spectrum-progress-circle-size:var(
+--spectrum-progress-circle-size-large
+);--spectrum-progress-circle-thickness:var(
+--spectrum-progress-circle-thickness-large
+)}@media (forced-colors:active){:host{--highcontrast-progress-circle-fill-border-color:Highlight;--highcontrast-progress-circle-fill-border-color-over-background:Highlight}.track{--spectrum-progress-circle-track-border-style:double}}:host{block-size:var(
+--mod-progress-circle-size,var(--spectrum-progress-circle-size)
+);direction:ltr;display:inline-block;inline-size:var(
+--mod-progress-circle-size,var(--spectrum-progress-circle-size)
+);position:relative;transform:translateZ(0)}.track{block-size:var(
+--mod-progress-circle-size,var(--spectrum-progress-circle-size)
+);border-color:var(
+--mod-progress-circle-track-border-color,var(--spectrum-progress-circle-track-border-color)
+);border-radius:var(
+--mod-progress-circle-size,var(--spectrum-progress-circle-size)
+);border-style:var(
+--highcontrast-progress-circle-track-border-style,var(
+--mod-progress-circle-track-border-style,var(--spectrum-progress-circle-track-border-style)
+)
+);border-width:var(
+--mod-progress-circle-thickness,var(--spectrum-progress-circle-thickness)
+);box-sizing:border-box;inline-size:var(
+--mod-progress-circle-size,var(--spectrum-progress-circle-size)
+)}.fills{block-size:100%;inline-size:100%;inset-block-start:0;inset-inline-start:0;position:absolute}.fill{block-size:var(
+--mod-progress-circle-size,var(--spectrum-progress-circle-size)
+);border-color:var(
+--highcontrast-progress-circle-fill-border-color,var(
+--mod-progress-circle-fill-border-color,var(--spectrum-progress-circle-fill-border-color)
+)
+);border-radius:var(
+--mod-progress-circle-size,var(--spectrum-progress-circle-size)
 );border-style:solid;border-width:var(
---spectrum-progresscircle-l-border-size,var(--spectrum-global-dimension-size-50)
-);height:var(
---spectrum-progresscircle-l-height,var(--spectrum-global-dimension-size-800)
-);width:var(
---spectrum-progresscircle-l-width,var(--spectrum-global-dimension-size-800)
-)}:host([size=l]) .fill{border-radius:var(
---spectrum-progresscircle-l-width,var(--spectrum-global-dimension-size-800)
-);border-style:solid;border-width:var(
---spectrum-progresscircle-l-border-size,var(--spectrum-global-dimension-size-50)
-);height:var(
---spectrum-progresscircle-l-height,var(--spectrum-global-dimension-size-800)
-);width:var(
---spectrum-progresscircle-l-width,var(--spectrum-global-dimension-size-800)
-)}:host([indeterminate]) .fills{animation:spectrum-fills-rotate 1s cubic-bezier(.25,.78,.48,.89) infinite;transform:translateZ(0);transform-origin:center;will-change:transform}:host([indeterminate]) .fillSubMask1{animation:spectrum-fill-mask-1 1s linear infinite;transform:translateZ(0);will-change:transform}:host([indeterminate]) .fillSubMask2{animation:spectrum-fill-mask-2 1s linear infinite;transform:translateZ(0);will-change:transform}.track{border-color:var(
---spectrum-progresscircle-m-track-color,var(--spectrum-alias-track-color-default)
-)}.fill{border-color:var(
---spectrum-progresscircle-m-track-fill-color,var(--spectrum-semantic-informative-color-default)
-)}:host([over-background]) .track{border-color:var(
---spectrum-progresscircle-m-over-background-track-color
-)}:host([over-background]) .fill{border-color:var(
---spectrum-progresscircle-m-over-background-track-fill-color
-)}:host([indeterminate][over-background]) .track{border-color:var(
---spectrum-progresscircle-m-over-background-track-color
-)}:host([indeterminate][over-background]) .fill{border-color:var(
---spectrum-progresscircle-m-over-background-track-fill-color
-)}@media (forced-colors:active){.fill{--spectrum-progresscircle-m-track-fill-color:Highlight}}:host{--spectrum-progresscircle-m-over-background-track-fill-color:var(
+--mod-progress-circle-thickness,var(--spectrum-progress-circle-thickness)
+);box-sizing:border-box;inline-size:var(
+--mod-progress-circle-size,var(--spectrum-progress-circle-size)
+)}:host([static=white]) .track{border-color:var(
+--mod-progress-circle-track-border-color-over-background,var(--spectrum-progress-circle-track-border-color-over-background)
+)}:host([static=white]) .fill{border-color:var(
+--highcontrast-progress-circle-fill-border-color-over-background,var(
+--mod-progress-circle-fill-border-color-over-background,var(--spectrum-progress-circle-fill-border-color-over-background)
+)
+)}.fillMask1,.fillMask2{block-size:100%;inline-size:50%;overflow:hidden;position:absolute;transform:rotate(180deg);transform-origin:100% center}.fillSubMask1,.fillSubMask2{block-size:100%;inline-size:100%;overflow:hidden;transform:rotate(-180deg);transform-origin:100% center}.fillMask2{transform:rotate(0deg)}:host([indeterminate]) .fills{animation:spectrum-fills-rotate 1s cubic-bezier(.25,.78,.48,.89) infinite;transform:translateZ(0);transform-origin:center;will-change:transform}:host([indeterminate]) .fillSubMask1{animation:spectrum-fill-mask-1 1s linear infinite;transform:translateZ(0);will-change:transform}:host([indeterminate]) .fillSubMask2{animation:spectrum-fill-mask-2 1s linear infinite;transform:translateZ(0);will-change:transform}:host{--spectrum-progresscircle-m-over-background-track-fill-color:var(
 --spectrum-alias-track-fill-color-overbackground
 )}
-`;export default t;
+`;export default e;
 //# sourceMappingURL=progress-circle.css.js.map

src/ProgressCircle.d.ts

@@ -14,4 +14,6 @@ import { CSSResultArray, PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
     overBackground: boolean;
+    static?: 'white';
     progress: number;
     private makeRotation;
+    protected willUpdate(changes: PropertyValues<this>): void;
     protected render(): TemplateResult;
@@ -18,0 +20,0 @@ protected firstUpdated(changes: PropertyValues): void;

src/ProgressCircle.dev.js

@@ -0,1 +1,2 @@
+"use strict";
 var __defProp = Object.defineProperty;
@@ -36,6 +37,23 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
   }
+  willUpdate(changes) {
+    if (changes.has("overBackground")) {
+      this.static = this.overBackground ? "white" : this.static || void 0;
+      if (true) {
+        if (this.overBackground) {
+          window.__swc.warn(
+            this,
+            `<${this.localName}> element will stop accepting the "over-background" attribute, and its related "overBackground" property in a future release. Use the "static" attribute/property with a value of "white" instead.`,
+            "https://opensource.adobe.com/spectrum-web-components/components/progress-circle/#static",
+            { level: "deprecation" }
+          );
+        }
+      }
+    }
+  }
   render() {
     const styles = [
       this.makeRotation(-180 + 180 / 50 * Math.min(this.progress, 50)),
-      this.makeRotation(-180 + 180 / 50 * Math.max(this.progress - 50, 0))
+      this.makeRotation(
+        -180 + 180 / 50 * Math.max(this.progress - 50, 0)
+      )
     ];
@@ -46,3 +64,4 @@ const masks = ["Mask1", "Mask2"];
             <div class="fills">
-                ${masks.map((mask, index) => html`
+                ${masks.map(
+      (mask, index) => html`
                         <div class="fill${mask}">
@@ -56,3 +75,4 @@ <div
                         </div>
-                    `)}
+                    `
+    )}
             </div>
@@ -79,10 +99,15 @@ `;
       if (!this.label && !this.getAttribute("aria-label") && !this.getAttribute("aria-labelledby")) {
-        window.__swc.warn(this, "<sp-progress-circle> elements will not be accessible to screen readers without one of the following:", "https://opensource.adobe.com/spectrum-web-components/components/progress-circle/#accessibility", {
-          type: "accessibility",
-          issues: [
-            'value supplied to the "label" attribute, which will be displayed visually as part of the element, or',
-            'value supplied to the "aria-label" attribute, which will only be provided to screen readers, or',
-            'an element ID reference supplied to the "aria-labelledby" attribute, which will be provided by screen readers and will need to be managed manually by the parent application.'
-          ]
-        });
+        window.__swc.warn(
+          this,
+          "<sp-progress-circle> elements will not be accessible to screen readers without one of the following:",
+          "https://opensource.adobe.com/spectrum-web-components/components/progress-circle/#accessibility",
+          {
+            type: "accessibility",
+            issues: [
+              'value supplied to the "label" attribute, which will be displayed visually as part of the element, or',
+              'value supplied to the "aria-label" attribute, which will only be provided to screen readers, or',
+              'an element ID reference supplied to the "aria-labelledby" attribute, which will be provided by screen readers and will need to be managed manually by the parent application.'
+            ]
+          }
+        );
       }
@@ -102,4 +127,7 @@ }
 __decorateClass([
+  property({ reflect: true })
+], ProgressCircle.prototype, "static", 2);
+__decorateClass([
   property({ type: Number })
 ], ProgressCircle.prototype, "progress", 2);
 //# sourceMappingURL=ProgressCircle.dev.js.map

src/ProgressCircle.js

@@ -1,9 +0,9 @@
-var n=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var r=(l,e,s,i)=>{for(var t=i>1?void 0:i?u(e,s):e,o=l.length-1,d;o>=0;o--)(d=l[o])&&(t=(i?d(e,s,t):d(t))||t);return i&&t&&n(e,s,t),t};import{html as p,SizedMixin as b,SpectrumElement as c}from"@spectrum-web-components/base";import{property as a}from"@spectrum-web-components/base/src/decorators.js";import{ifDefined as h}from"@spectrum-web-components/base/src/directives.js";import m from"./progress-circle.css.js";export class ProgressCircle extends b(c,{validSizes:["s","m","l"]}){constructor(){super(...arguments);this.indeterminate=!1;this.label="";this.overBackground=!1;this.progress=0}static get styles(){return[m]}makeRotation(e){return this.indeterminate?void 0:`transform: rotate(${e}deg);`}render(){const e=[this.makeRotation(-180+3.6*Math.min(this.progress,50)),this.makeRotation(-180+3.6*Math.max(this.progress-50,0))];return p`
+"use strict";var p=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var i=(o,r,e,s)=>{for(var t=s>1?void 0:s?u(r,e):r,a=o.length-1,d;a>=0;a--)(d=o[a])&&(t=(s?d(r,e,t):d(t))||t);return s&&t&&p(r,e,t),t};import{html as n,SizedMixin as c,SpectrumElement as b}from"@spectrum-web-components/base";import{property as l}from"@spectrum-web-components/base/src/decorators.js";import{ifDefined as h}from"@spectrum-web-components/base/src/directives.js";import m from"./progress-circle.css.js";export class ProgressCircle extends c(b,{validSizes:["s","m","l"]}){constructor(){super(...arguments);this.indeterminate=!1;this.label="";this.overBackground=!1;this.progress=0}static get styles(){return[m]}makeRotation(e){return this.indeterminate?void 0:`transform: rotate(${e}deg);`}willUpdate(e){e.has("overBackground")&&(this.static=this.overBackground?"white":this.static||void 0)}render(){const e=[this.makeRotation(-180+3.6*Math.min(this.progress,50)),this.makeRotation(-180+3.6*Math.max(this.progress-50,0))];return n`
             <div class="track"></div>
             <div class="fills">
-                ${["Mask1","Mask2"].map((i,t)=>p`
-                        <div class="fill${i}">
+                ${["Mask1","Mask2"].map((t,a)=>n`
+                        <div class="fill${t}">
                             <div
-                                class="fillSub${i}"
-                                style=${h(e[t])}
+                                class="fillSub${t}"
+                                style=${h(e[a])}
                             >
@@ -15,3 +15,3 @@ <div class="fill"></div>
             </div>
-        `}firstUpdated(e){super.firstUpdated(e),this.hasAttribute("role")||this.setAttribute("role","progressbar")}updated(e){super.updated(e),!this.indeterminate&&e.has("progress")?this.setAttribute("aria-valuenow",""+this.progress):this.hasAttribute("aria-valuenow")&&this.removeAttribute("aria-valuenow"),this.label&&e.has("label")&&this.setAttribute("aria-label",this.label)}}r([a({type:Boolean,reflect:!0})],ProgressCircle.prototype,"indeterminate",2),r([a({type:String})],ProgressCircle.prototype,"label",2),r([a({type:Boolean,reflect:!0,attribute:"over-background"})],ProgressCircle.prototype,"overBackground",2),r([a({type:Number})],ProgressCircle.prototype,"progress",2);
+        `}firstUpdated(e){super.firstUpdated(e),this.hasAttribute("role")||this.setAttribute("role","progressbar")}updated(e){super.updated(e),!this.indeterminate&&e.has("progress")?this.setAttribute("aria-valuenow",""+this.progress):this.hasAttribute("aria-valuenow")&&this.removeAttribute("aria-valuenow"),this.label&&e.has("label")&&this.setAttribute("aria-label",this.label)}}i([l({type:Boolean,reflect:!0})],ProgressCircle.prototype,"indeterminate",2),i([l({type:String})],ProgressCircle.prototype,"label",2),i([l({type:Boolean,reflect:!0,attribute:"over-background"})],ProgressCircle.prototype,"overBackground",2),i([l({reflect:!0})],ProgressCircle.prototype,"static",2),i([l({type:Number})],ProgressCircle.prototype,"progress",2);
 //# sourceMappingURL=ProgressCircle.js.map

src/spectrum-config.js

@@ -42,5 +42,10 @@ /*
                 {
-                    type: 'boolean',
-                    name: 'over-background',
-                    selector: '.spectrum-ProgressCircle--overBackground',
+                    type: 'enum',
+                    name: 'static',
+                    values: [
+                        {
+                            selector: '.spectrum-ProgressCircle--staticWhite',
+                            name: 'white',
+                        },
+                    ],
                 },
@@ -47,0 +52,0 @@ ],

src/spectrum-progress-circle.css.dev.js

@@ -0,70 +1,65 @@
+"use strict";
 import { css } from "@spectrum-web-components/base";
 const styles = css`
-.fill-submask-2{animation:spectrum-fill-mask-2 1s linear infinite}@keyframes spectrum-fill-mask-1{0%{transform:rotate(90deg)}1.69%{transform:rotate(72.3deg)}3.39%{transform:rotate(55.5deg)}5.08%{transform:rotate(40.3deg)}6.78%{transform:rotate(25deg)}8.47%{transform:rotate(10.6deg)}10.17%{transform:rotate(0deg)}11.86%{transform:rotate(0deg)}13.56%{transform:rotate(0deg)}15.25%{transform:rotate(0deg)}16.95%{transform:rotate(0deg)}18.64%{transform:rotate(0deg)}20.34%{transform:rotate(0deg)}22.03%{transform:rotate(0deg)}23.73%{transform:rotate(0deg)}25.42%{transform:rotate(0deg)}27.12%{transform:rotate(0deg)}28.81%{transform:rotate(0deg)}30.51%{transform:rotate(0deg)}32.2%{transform:rotate(0deg)}33.9%{transform:rotate(0deg)}35.59%{transform:rotate(0deg)}37.29%{transform:rotate(0deg)}38.98%{transform:rotate(0deg)}40.68%{transform:rotate(0deg)}42.37%{transform:rotate(5.3deg)}44.07%{transform:rotate(13.4deg)}45.76%{transform:rotate(20.6deg)}47.46%{transform:rotate(29deg)}49.15%{transform:rotate(36.5deg)}50.85%{transform:rotate(42.6deg)}52.54%{transform:rotate(48.8deg)}54.24%{transform:rotate(54.2deg)}55.93%{transform:rotate(59.4deg)}57.63%{transform:rotate(63.2deg)}59.32%{transform:rotate(67.2deg)}61.02%{transform:rotate(70.8deg)}62.71%{transform:rotate(73.8deg)}64.41%{transform:rotate(76.2deg)}66.1%{transform:rotate(78.7deg)}67.8%{transform:rotate(80.6deg)}69.49%{transform:rotate(82.6deg)}71.19%{transform:rotate(83.7deg)}72.88%{transform:rotate(85deg)}74.58%{transform:rotate(86.3deg)}76.27%{transform:rotate(87deg)}77.97%{transform:rotate(87.7deg)}79.66%{transform:rotate(88.3deg)}81.36%{transform:rotate(88.6deg)}83.05%{transform:rotate(89.2deg)}84.75%{transform:rotate(89.2deg)}86.44%{transform:rotate(89.5deg)}88.14%{transform:rotate(89.9deg)}89.83%{transform:rotate(89.7deg)}91.53%{transform:rotate(90.1deg)}93.22%{transform:rotate(90.2deg)}94.92%{transform:rotate(90.1deg)}96.61%{transform:rotate(90deg)}98.31%{transform:rotate(89.8deg)}to{transform:rotate(90deg)}}@keyframes spectrum-fill-mask-2{0%{transform:rotate(180deg)}1.69%{transform:rotate(180deg)}3.39%{transform:rotate(180deg)}5.08%{transform:rotate(180deg)}6.78%{transform:rotate(180deg)}8.47%{transform:rotate(180deg)}10.17%{transform:rotate(179.2deg)}11.86%{transform:rotate(164deg)}13.56%{transform:rotate(151.8deg)}15.25%{transform:rotate(140.8deg)}16.95%{transform:rotate(130.3deg)}18.64%{transform:rotate(120.4deg)}20.34%{transform:rotate(110.8deg)}22.03%{transform:rotate(101.6deg)}23.73%{transform:rotate(93.5deg)}25.42%{transform:rotate(85.4deg)}27.12%{transform:rotate(78.1deg)}28.81%{transform:rotate(71.2deg)}30.51%{transform:rotate(89.1deg)}32.2%{transform:rotate(105.5deg)}33.9%{transform:rotate(121.3deg)}35.59%{transform:rotate(135.5deg)}37.29%{transform:rotate(148.4deg)}38.98%{transform:rotate(161deg)}40.68%{transform:rotate(173.5deg)}42.37%{transform:rotate(180deg)}44.07%{transform:rotate(180deg)}45.76%{transform:rotate(180deg)}47.46%{transform:rotate(180deg)}49.15%{transform:rotate(180deg)}50.85%{transform:rotate(180deg)}52.54%{transform:rotate(180deg)}54.24%{transform:rotate(180deg)}55.93%{transform:rotate(180deg)}57.63%{transform:rotate(180deg)}59.32%{transform:rotate(180deg)}61.02%{transform:rotate(180deg)}62.71%{transform:rotate(180deg)}64.41%{transform:rotate(180deg)}66.1%{transform:rotate(180deg)}67.8%{transform:rotate(180deg)}69.49%{transform:rotate(180deg)}71.19%{transform:rotate(180deg)}72.88%{transform:rotate(180deg)}74.58%{transform:rotate(180deg)}76.27%{transform:rotate(180deg)}77.97%{transform:rotate(180deg)}79.66%{transform:rotate(180deg)}81.36%{transform:rotate(180deg)}83.05%{transform:rotate(180deg)}84.75%{transform:rotate(180deg)}86.44%{transform:rotate(180deg)}88.14%{transform:rotate(180deg)}89.83%{transform:rotate(180deg)}91.53%{transform:rotate(180deg)}93.22%{transform:rotate(180deg)}94.92%{transform:rotate(180deg)}96.61%{transform:rotate(180deg)}98.31%{transform:rotate(180deg)}to{transform:rotate(180deg)}}@keyframes spectrum-fills-rotate{0%{transform:rotate(-90deg)}to{transform:rotate(270deg)}}:host{direction:ltr;display:inline-block;height:var(
---spectrum-progresscircle-m-height,var(--spectrum-global-dimension-size-400)
-);position:relative;transform:translateZ(0);width:var(
---spectrum-progresscircle-m-width,var(--spectrum-global-dimension-size-400)
-)}.track{border-radius:var(
---spectrum-progresscircle-m-width,var(--spectrum-global-dimension-size-400)
-);border-style:solid;border-width:var(--spectrum-progresscircle-m-border-size);box-sizing:border-box;height:var(
---spectrum-progresscircle-m-height,var(--spectrum-global-dimension-size-400)
-);width:var(
---spectrum-progresscircle-m-width,var(--spectrum-global-dimension-size-400)
-)}:host([dir=ltr]) .fills{left:0}:host([dir=rtl]) .fills{right:0}.fills{height:100%;position:absolute;top:0;width:100%}.fill{border-radius:var(
---spectrum-progresscircle-m-width,var(--spectrum-global-dimension-size-400)
-);border-style:solid;border-width:var(--spectrum-progresscircle-m-border-size);box-sizing:border-box;height:var(
---spectrum-progresscircle-m-height,var(--spectrum-global-dimension-size-400)
-);width:var(
---spectrum-progresscircle-m-width,var(--spectrum-global-dimension-size-400)
-)}.fillMask1,.fillMask2{height:100%;overflow:hidden;position:absolute;transform:rotate(180deg);transform-origin:100% center;width:50%}.fillSubMask1,.fillSubMask2{height:100%;overflow:hidden;transform:rotate(-180deg);transform-origin:100% center;width:100%}.fillMask2{transform:rotate(0deg)}:host([size=s]){height:var(
---spectrum-progresscircle-s-height,var(--spectrum-global-dimension-size-200)
-);width:var(
---spectrum-progresscircle-s-width,var(--spectrum-global-dimension-size-200)
-)}:host([size=s]) .track{border-radius:var(
---spectrum-progresscircle-s-width,var(--spectrum-global-dimension-size-200)
-);border-style:solid;border-width:var(--spectrum-progresscircle-s-border-size);height:var(
---spectrum-progresscircle-s-height,var(--spectrum-global-dimension-size-200)
-);width:var(
---spectrum-progresscircle-s-width,var(--spectrum-global-dimension-size-200)
-)}:host([size=s]) .fill{border-radius:var(
---spectrum-progresscircle-s-width,var(--spectrum-global-dimension-size-200)
-);border-style:solid;border-width:var(--spectrum-progresscircle-s-border-size);height:var(
---spectrum-progresscircle-s-height,var(--spectrum-global-dimension-size-200)
-);width:var(
---spectrum-progresscircle-s-width,var(--spectrum-global-dimension-size-200)
-)}:host([size=l]){height:var(
---spectrum-progresscircle-l-height,var(--spectrum-global-dimension-size-800)
-);width:var(
---spectrum-progresscircle-l-width,var(--spectrum-global-dimension-size-800)
-)}:host([size=l]) .track{border-radius:var(
---spectrum-progresscircle-l-width,var(--spectrum-global-dimension-size-800)
+.fill-submask-2{animation:spectrum-fill-mask-2 1s linear infinite}@keyframes spectrum-fill-mask-1{0%{transform:rotate(90deg)}1.69%{transform:rotate(72.3deg)}3.39%{transform:rotate(55.5deg)}5.08%{transform:rotate(40.3deg)}6.78%{transform:rotate(25deg)}8.47%{transform:rotate(10.6deg)}10.17%{transform:rotate(0deg)}11.86%{transform:rotate(0deg)}13.56%{transform:rotate(0deg)}15.25%{transform:rotate(0deg)}16.95%{transform:rotate(0deg)}18.64%{transform:rotate(0deg)}20.34%{transform:rotate(0deg)}22.03%{transform:rotate(0deg)}23.73%{transform:rotate(0deg)}25.42%{transform:rotate(0deg)}27.12%{transform:rotate(0deg)}28.81%{transform:rotate(0deg)}30.51%{transform:rotate(0deg)}32.2%{transform:rotate(0deg)}33.9%{transform:rotate(0deg)}35.59%{transform:rotate(0deg)}37.29%{transform:rotate(0deg)}38.98%{transform:rotate(0deg)}40.68%{transform:rotate(0deg)}42.37%{transform:rotate(5.3deg)}44.07%{transform:rotate(13.4deg)}45.76%{transform:rotate(20.6deg)}47.46%{transform:rotate(29deg)}49.15%{transform:rotate(36.5deg)}50.85%{transform:rotate(42.6deg)}52.54%{transform:rotate(48.8deg)}54.24%{transform:rotate(54.2deg)}55.93%{transform:rotate(59.4deg)}57.63%{transform:rotate(63.2deg)}59.32%{transform:rotate(67.2deg)}61.02%{transform:rotate(70.8deg)}62.71%{transform:rotate(73.8deg)}64.41%{transform:rotate(76.2deg)}66.1%{transform:rotate(78.7deg)}67.8%{transform:rotate(80.6deg)}69.49%{transform:rotate(82.6deg)}71.19%{transform:rotate(83.7deg)}72.88%{transform:rotate(85deg)}74.58%{transform:rotate(86.3deg)}76.27%{transform:rotate(87deg)}77.97%{transform:rotate(87.7deg)}79.66%{transform:rotate(88.3deg)}81.36%{transform:rotate(88.6deg)}83.05%{transform:rotate(89.2deg)}84.75%{transform:rotate(89.2deg)}86.44%{transform:rotate(89.5deg)}88.14%{transform:rotate(89.9deg)}89.83%{transform:rotate(89.7deg)}91.53%{transform:rotate(90.1deg)}93.22%{transform:rotate(90.2deg)}94.92%{transform:rotate(90.1deg)}96.61%{transform:rotate(90deg)}98.31%{transform:rotate(89.8deg)}to{transform:rotate(90deg)}}@keyframes spectrum-fill-mask-2{0%{transform:rotate(180deg)}1.69%{transform:rotate(180deg)}3.39%{transform:rotate(180deg)}5.08%{transform:rotate(180deg)}6.78%{transform:rotate(180deg)}8.47%{transform:rotate(180deg)}10.17%{transform:rotate(179.2deg)}11.86%{transform:rotate(164deg)}13.56%{transform:rotate(151.8deg)}15.25%{transform:rotate(140.8deg)}16.95%{transform:rotate(130.3deg)}18.64%{transform:rotate(120.4deg)}20.34%{transform:rotate(110.8deg)}22.03%{transform:rotate(101.6deg)}23.73%{transform:rotate(93.5deg)}25.42%{transform:rotate(85.4deg)}27.12%{transform:rotate(78.1deg)}28.81%{transform:rotate(71.2deg)}30.51%{transform:rotate(89.1deg)}32.2%{transform:rotate(105.5deg)}33.9%{transform:rotate(121.3deg)}35.59%{transform:rotate(135.5deg)}37.29%{transform:rotate(148.4deg)}38.98%{transform:rotate(161deg)}40.68%{transform:rotate(173.5deg)}42.37%{transform:rotate(180deg)}44.07%{transform:rotate(180deg)}45.76%{transform:rotate(180deg)}47.46%{transform:rotate(180deg)}49.15%{transform:rotate(180deg)}50.85%{transform:rotate(180deg)}52.54%{transform:rotate(180deg)}54.24%{transform:rotate(180deg)}55.93%{transform:rotate(180deg)}57.63%{transform:rotate(180deg)}59.32%{transform:rotate(180deg)}61.02%{transform:rotate(180deg)}62.71%{transform:rotate(180deg)}64.41%{transform:rotate(180deg)}66.1%{transform:rotate(180deg)}67.8%{transform:rotate(180deg)}69.49%{transform:rotate(180deg)}71.19%{transform:rotate(180deg)}72.88%{transform:rotate(180deg)}74.58%{transform:rotate(180deg)}76.27%{transform:rotate(180deg)}77.97%{transform:rotate(180deg)}79.66%{transform:rotate(180deg)}81.36%{transform:rotate(180deg)}83.05%{transform:rotate(180deg)}84.75%{transform:rotate(180deg)}86.44%{transform:rotate(180deg)}88.14%{transform:rotate(180deg)}89.83%{transform:rotate(180deg)}91.53%{transform:rotate(180deg)}93.22%{transform:rotate(180deg)}94.92%{transform:rotate(180deg)}96.61%{transform:rotate(180deg)}98.31%{transform:rotate(180deg)}to{transform:rotate(180deg)}}@keyframes spectrum-fills-rotate{0%{transform:rotate(-90deg)}to{transform:rotate(270deg)}}:host{--spectrum-progress-circle-track-border-color:var(
+--spectrum-gray-300
+);--spectrum-progress-circle-fill-border-color:var(--spectrum-blue-900);--spectrum-progress-circle-track-border-color-over-background:var(
+--spectrum-transparent-white-300
+);--spectrum-progress-circle-fill-border-color-over-background:var(
+--spectrum-transparent-white-900
+);--spectrum-progress-circle-size:var(
+--spectrum-progress-circle-size-medium
+);--spectrum-progress-circle-thickness:var(
+--spectrum-progress-circle-thickness-medium
+);--spectrum-progress-circle-track-border-style:solid}:host([size=s]){--spectrum-progress-circle-size:var(
+--spectrum-progress-circle-size-small
+);--spectrum-progress-circle-thickness:var(
+--spectrum-progress-circle-thickness-small
+)}.spectrum-ProgressCircle--medium{--spectrum-progress-circle-size:var(
+--spectrum-progress-circle-size-medium
+);--spectrum-progress-circle-thickness:var(
+--spectrum-progress-circle-thickness-medium
+)}:host([size=l]){--spectrum-progress-circle-size:var(
+--spectrum-progress-circle-size-large
+);--spectrum-progress-circle-thickness:var(
+--spectrum-progress-circle-thickness-large
+)}@media (forced-colors:active){:host{--highcontrast-progress-circle-fill-border-color:Highlight;--highcontrast-progress-circle-fill-border-color-over-background:Highlight}.track{--spectrum-progress-circle-track-border-style:double}}:host{block-size:var(
+--mod-progress-circle-size,var(--spectrum-progress-circle-size)
+);direction:ltr;display:inline-block;inline-size:var(
+--mod-progress-circle-size,var(--spectrum-progress-circle-size)
+);position:relative;transform:translateZ(0)}.track{block-size:var(
+--mod-progress-circle-size,var(--spectrum-progress-circle-size)
+);border-color:var(
+--mod-progress-circle-track-border-color,var(--spectrum-progress-circle-track-border-color)
+);border-radius:var(
+--mod-progress-circle-size,var(--spectrum-progress-circle-size)
+);border-style:var(
+--highcontrast-progress-circle-track-border-style,var(
+--mod-progress-circle-track-border-style,var(--spectrum-progress-circle-track-border-style)
+)
+);border-width:var(
+--mod-progress-circle-thickness,var(--spectrum-progress-circle-thickness)
+);box-sizing:border-box;inline-size:var(
+--mod-progress-circle-size,var(--spectrum-progress-circle-size)
+)}.fills{block-size:100%;inline-size:100%;inset-block-start:0;inset-inline-start:0;position:absolute}.fill{block-size:var(
+--mod-progress-circle-size,var(--spectrum-progress-circle-size)
+);border-color:var(
+--highcontrast-progress-circle-fill-border-color,var(
+--mod-progress-circle-fill-border-color,var(--spectrum-progress-circle-fill-border-color)
+)
+);border-radius:var(
+--mod-progress-circle-size,var(--spectrum-progress-circle-size)
 );border-style:solid;border-width:var(
---spectrum-progresscircle-l-border-size,var(--spectrum-global-dimension-size-50)
-);height:var(
---spectrum-progresscircle-l-height,var(--spectrum-global-dimension-size-800)
-);width:var(
---spectrum-progresscircle-l-width,var(--spectrum-global-dimension-size-800)
-)}:host([size=l]) .fill{border-radius:var(
---spectrum-progresscircle-l-width,var(--spectrum-global-dimension-size-800)
-);border-style:solid;border-width:var(
---spectrum-progresscircle-l-border-size,var(--spectrum-global-dimension-size-50)
-);height:var(
---spectrum-progresscircle-l-height,var(--spectrum-global-dimension-size-800)
-);width:var(
---spectrum-progresscircle-l-width,var(--spectrum-global-dimension-size-800)
-)}:host([indeterminate]) .fills{animation:spectrum-fills-rotate 1s cubic-bezier(.25,.78,.48,.89) infinite;transform:translateZ(0);transform-origin:center;will-change:transform}:host([indeterminate]) .fillSubMask1{animation:spectrum-fill-mask-1 1s linear infinite;transform:translateZ(0);will-change:transform}:host([indeterminate]) .fillSubMask2{animation:spectrum-fill-mask-2 1s linear infinite;transform:translateZ(0);will-change:transform}.track{border-color:var(
---spectrum-progresscircle-m-track-color,var(--spectrum-alias-track-color-default)
-)}.fill{border-color:var(
---spectrum-progresscircle-m-track-fill-color,var(--spectrum-semantic-informative-color-default)
-)}:host([over-background]) .track{border-color:var(
---spectrum-progresscircle-m-over-background-track-color
-)}:host([over-background]) .fill{border-color:var(
---spectrum-progresscircle-m-over-background-track-fill-color
-)}:host([indeterminate][over-background]) .track{border-color:var(
---spectrum-progresscircle-m-over-background-track-color
-)}:host([indeterminate][over-background]) .fill{border-color:var(
---spectrum-progresscircle-m-over-background-track-fill-color
-)}@media (forced-colors:active){.fill{--spectrum-progresscircle-m-track-fill-color:Highlight}}
+--mod-progress-circle-thickness,var(--spectrum-progress-circle-thickness)
+);box-sizing:border-box;inline-size:var(
+--mod-progress-circle-size,var(--spectrum-progress-circle-size)
+)}:host([static=white]) .track{border-color:var(
+--mod-progress-circle-track-border-color-over-background,var(--spectrum-progress-circle-track-border-color-over-background)
+)}:host([static=white]) .fill{border-color:var(
+--highcontrast-progress-circle-fill-border-color-over-background,var(
+--mod-progress-circle-fill-border-color-over-background,var(--spectrum-progress-circle-fill-border-color-over-background)
+)
+)}.fillMask1,.fillMask2{block-size:100%;inline-size:50%;overflow:hidden;position:absolute;transform:rotate(180deg);transform-origin:100% center}.fillSubMask1,.fillSubMask2{block-size:100%;inline-size:100%;overflow:hidden;transform:rotate(-180deg);transform-origin:100% center}.fillMask2{transform:rotate(0deg)}:host([indeterminate]) .fills{animation:spectrum-fills-rotate 1s cubic-bezier(.25,.78,.48,.89) infinite;transform:translateZ(0);transform-origin:center;will-change:transform}:host([indeterminate]) .fillSubMask1{animation:spectrum-fill-mask-1 1s linear infinite;transform:translateZ(0);will-change:transform}:host([indeterminate]) .fillSubMask2{animation:spectrum-fill-mask-2 1s linear infinite;transform:translateZ(0);will-change:transform}
 `;
 export default styles;
 //# sourceMappingURL=spectrum-progress-circle.css.dev.js.map

src/spectrum-progress-circle.css.js

@@ -1,68 +0,62 @@
-import{css as r}from"@spectrum-web-components/base";const t=r`
-.fill-submask-2{animation:spectrum-fill-mask-2 1s linear infinite}@keyframes spectrum-fill-mask-1{0%{transform:rotate(90deg)}1.69%{transform:rotate(72.3deg)}3.39%{transform:rotate(55.5deg)}5.08%{transform:rotate(40.3deg)}6.78%{transform:rotate(25deg)}8.47%{transform:rotate(10.6deg)}10.17%{transform:rotate(0deg)}11.86%{transform:rotate(0deg)}13.56%{transform:rotate(0deg)}15.25%{transform:rotate(0deg)}16.95%{transform:rotate(0deg)}18.64%{transform:rotate(0deg)}20.34%{transform:rotate(0deg)}22.03%{transform:rotate(0deg)}23.73%{transform:rotate(0deg)}25.42%{transform:rotate(0deg)}27.12%{transform:rotate(0deg)}28.81%{transform:rotate(0deg)}30.51%{transform:rotate(0deg)}32.2%{transform:rotate(0deg)}33.9%{transform:rotate(0deg)}35.59%{transform:rotate(0deg)}37.29%{transform:rotate(0deg)}38.98%{transform:rotate(0deg)}40.68%{transform:rotate(0deg)}42.37%{transform:rotate(5.3deg)}44.07%{transform:rotate(13.4deg)}45.76%{transform:rotate(20.6deg)}47.46%{transform:rotate(29deg)}49.15%{transform:rotate(36.5deg)}50.85%{transform:rotate(42.6deg)}52.54%{transform:rotate(48.8deg)}54.24%{transform:rotate(54.2deg)}55.93%{transform:rotate(59.4deg)}57.63%{transform:rotate(63.2deg)}59.32%{transform:rotate(67.2deg)}61.02%{transform:rotate(70.8deg)}62.71%{transform:rotate(73.8deg)}64.41%{transform:rotate(76.2deg)}66.1%{transform:rotate(78.7deg)}67.8%{transform:rotate(80.6deg)}69.49%{transform:rotate(82.6deg)}71.19%{transform:rotate(83.7deg)}72.88%{transform:rotate(85deg)}74.58%{transform:rotate(86.3deg)}76.27%{transform:rotate(87deg)}77.97%{transform:rotate(87.7deg)}79.66%{transform:rotate(88.3deg)}81.36%{transform:rotate(88.6deg)}83.05%{transform:rotate(89.2deg)}84.75%{transform:rotate(89.2deg)}86.44%{transform:rotate(89.5deg)}88.14%{transform:rotate(89.9deg)}89.83%{transform:rotate(89.7deg)}91.53%{transform:rotate(90.1deg)}93.22%{transform:rotate(90.2deg)}94.92%{transform:rotate(90.1deg)}96.61%{transform:rotate(90deg)}98.31%{transform:rotate(89.8deg)}to{transform:rotate(90deg)}}@keyframes spectrum-fill-mask-2{0%{transform:rotate(180deg)}1.69%{transform:rotate(180deg)}3.39%{transform:rotate(180deg)}5.08%{transform:rotate(180deg)}6.78%{transform:rotate(180deg)}8.47%{transform:rotate(180deg)}10.17%{transform:rotate(179.2deg)}11.86%{transform:rotate(164deg)}13.56%{transform:rotate(151.8deg)}15.25%{transform:rotate(140.8deg)}16.95%{transform:rotate(130.3deg)}18.64%{transform:rotate(120.4deg)}20.34%{transform:rotate(110.8deg)}22.03%{transform:rotate(101.6deg)}23.73%{transform:rotate(93.5deg)}25.42%{transform:rotate(85.4deg)}27.12%{transform:rotate(78.1deg)}28.81%{transform:rotate(71.2deg)}30.51%{transform:rotate(89.1deg)}32.2%{transform:rotate(105.5deg)}33.9%{transform:rotate(121.3deg)}35.59%{transform:rotate(135.5deg)}37.29%{transform:rotate(148.4deg)}38.98%{transform:rotate(161deg)}40.68%{transform:rotate(173.5deg)}42.37%{transform:rotate(180deg)}44.07%{transform:rotate(180deg)}45.76%{transform:rotate(180deg)}47.46%{transform:rotate(180deg)}49.15%{transform:rotate(180deg)}50.85%{transform:rotate(180deg)}52.54%{transform:rotate(180deg)}54.24%{transform:rotate(180deg)}55.93%{transform:rotate(180deg)}57.63%{transform:rotate(180deg)}59.32%{transform:rotate(180deg)}61.02%{transform:rotate(180deg)}62.71%{transform:rotate(180deg)}64.41%{transform:rotate(180deg)}66.1%{transform:rotate(180deg)}67.8%{transform:rotate(180deg)}69.49%{transform:rotate(180deg)}71.19%{transform:rotate(180deg)}72.88%{transform:rotate(180deg)}74.58%{transform:rotate(180deg)}76.27%{transform:rotate(180deg)}77.97%{transform:rotate(180deg)}79.66%{transform:rotate(180deg)}81.36%{transform:rotate(180deg)}83.05%{transform:rotate(180deg)}84.75%{transform:rotate(180deg)}86.44%{transform:rotate(180deg)}88.14%{transform:rotate(180deg)}89.83%{transform:rotate(180deg)}91.53%{transform:rotate(180deg)}93.22%{transform:rotate(180deg)}94.92%{transform:rotate(180deg)}96.61%{transform:rotate(180deg)}98.31%{transform:rotate(180deg)}to{transform:rotate(180deg)}}@keyframes spectrum-fills-rotate{0%{transform:rotate(-90deg)}to{transform:rotate(270deg)}}:host{direction:ltr;display:inline-block;height:var(
---spectrum-progresscircle-m-height,var(--spectrum-global-dimension-size-400)
-);position:relative;transform:translateZ(0);width:var(
---spectrum-progresscircle-m-width,var(--spectrum-global-dimension-size-400)
-)}.track{border-radius:var(
---spectrum-progresscircle-m-width,var(--spectrum-global-dimension-size-400)
-);border-style:solid;border-width:var(--spectrum-progresscircle-m-border-size);box-sizing:border-box;height:var(
---spectrum-progresscircle-m-height,var(--spectrum-global-dimension-size-400)
-);width:var(
---spectrum-progresscircle-m-width,var(--spectrum-global-dimension-size-400)
-)}:host([dir=ltr]) .fills{left:0}:host([dir=rtl]) .fills{right:0}.fills{height:100%;position:absolute;top:0;width:100%}.fill{border-radius:var(
---spectrum-progresscircle-m-width,var(--spectrum-global-dimension-size-400)
-);border-style:solid;border-width:var(--spectrum-progresscircle-m-border-size);box-sizing:border-box;height:var(
---spectrum-progresscircle-m-height,var(--spectrum-global-dimension-size-400)
-);width:var(
---spectrum-progresscircle-m-width,var(--spectrum-global-dimension-size-400)
-)}.fillMask1,.fillMask2{height:100%;overflow:hidden;position:absolute;transform:rotate(180deg);transform-origin:100% center;width:50%}.fillSubMask1,.fillSubMask2{height:100%;overflow:hidden;transform:rotate(-180deg);transform-origin:100% center;width:100%}.fillMask2{transform:rotate(0deg)}:host([size=s]){height:var(
---spectrum-progresscircle-s-height,var(--spectrum-global-dimension-size-200)
-);width:var(
---spectrum-progresscircle-s-width,var(--spectrum-global-dimension-size-200)
-)}:host([size=s]) .track{border-radius:var(
---spectrum-progresscircle-s-width,var(--spectrum-global-dimension-size-200)
-);border-style:solid;border-width:var(--spectrum-progresscircle-s-border-size);height:var(
---spectrum-progresscircle-s-height,var(--spectrum-global-dimension-size-200)
-);width:var(
---spectrum-progresscircle-s-width,var(--spectrum-global-dimension-size-200)
-)}:host([size=s]) .fill{border-radius:var(
---spectrum-progresscircle-s-width,var(--spectrum-global-dimension-size-200)
-);border-style:solid;border-width:var(--spectrum-progresscircle-s-border-size);height:var(
---spectrum-progresscircle-s-height,var(--spectrum-global-dimension-size-200)
-);width:var(
---spectrum-progresscircle-s-width,var(--spectrum-global-dimension-size-200)
-)}:host([size=l]){height:var(
---spectrum-progresscircle-l-height,var(--spectrum-global-dimension-size-800)
-);width:var(
---spectrum-progresscircle-l-width,var(--spectrum-global-dimension-size-800)
-)}:host([size=l]) .track{border-radius:var(
---spectrum-progresscircle-l-width,var(--spectrum-global-dimension-size-800)
+"use strict";import{css as r}from"@spectrum-web-components/base";const e=r`
+.fill-submask-2{animation:spectrum-fill-mask-2 1s linear infinite}@keyframes spectrum-fill-mask-1{0%{transform:rotate(90deg)}1.69%{transform:rotate(72.3deg)}3.39%{transform:rotate(55.5deg)}5.08%{transform:rotate(40.3deg)}6.78%{transform:rotate(25deg)}8.47%{transform:rotate(10.6deg)}10.17%{transform:rotate(0deg)}11.86%{transform:rotate(0deg)}13.56%{transform:rotate(0deg)}15.25%{transform:rotate(0deg)}16.95%{transform:rotate(0deg)}18.64%{transform:rotate(0deg)}20.34%{transform:rotate(0deg)}22.03%{transform:rotate(0deg)}23.73%{transform:rotate(0deg)}25.42%{transform:rotate(0deg)}27.12%{transform:rotate(0deg)}28.81%{transform:rotate(0deg)}30.51%{transform:rotate(0deg)}32.2%{transform:rotate(0deg)}33.9%{transform:rotate(0deg)}35.59%{transform:rotate(0deg)}37.29%{transform:rotate(0deg)}38.98%{transform:rotate(0deg)}40.68%{transform:rotate(0deg)}42.37%{transform:rotate(5.3deg)}44.07%{transform:rotate(13.4deg)}45.76%{transform:rotate(20.6deg)}47.46%{transform:rotate(29deg)}49.15%{transform:rotate(36.5deg)}50.85%{transform:rotate(42.6deg)}52.54%{transform:rotate(48.8deg)}54.24%{transform:rotate(54.2deg)}55.93%{transform:rotate(59.4deg)}57.63%{transform:rotate(63.2deg)}59.32%{transform:rotate(67.2deg)}61.02%{transform:rotate(70.8deg)}62.71%{transform:rotate(73.8deg)}64.41%{transform:rotate(76.2deg)}66.1%{transform:rotate(78.7deg)}67.8%{transform:rotate(80.6deg)}69.49%{transform:rotate(82.6deg)}71.19%{transform:rotate(83.7deg)}72.88%{transform:rotate(85deg)}74.58%{transform:rotate(86.3deg)}76.27%{transform:rotate(87deg)}77.97%{transform:rotate(87.7deg)}79.66%{transform:rotate(88.3deg)}81.36%{transform:rotate(88.6deg)}83.05%{transform:rotate(89.2deg)}84.75%{transform:rotate(89.2deg)}86.44%{transform:rotate(89.5deg)}88.14%{transform:rotate(89.9deg)}89.83%{transform:rotate(89.7deg)}91.53%{transform:rotate(90.1deg)}93.22%{transform:rotate(90.2deg)}94.92%{transform:rotate(90.1deg)}96.61%{transform:rotate(90deg)}98.31%{transform:rotate(89.8deg)}to{transform:rotate(90deg)}}@keyframes spectrum-fill-mask-2{0%{transform:rotate(180deg)}1.69%{transform:rotate(180deg)}3.39%{transform:rotate(180deg)}5.08%{transform:rotate(180deg)}6.78%{transform:rotate(180deg)}8.47%{transform:rotate(180deg)}10.17%{transform:rotate(179.2deg)}11.86%{transform:rotate(164deg)}13.56%{transform:rotate(151.8deg)}15.25%{transform:rotate(140.8deg)}16.95%{transform:rotate(130.3deg)}18.64%{transform:rotate(120.4deg)}20.34%{transform:rotate(110.8deg)}22.03%{transform:rotate(101.6deg)}23.73%{transform:rotate(93.5deg)}25.42%{transform:rotate(85.4deg)}27.12%{transform:rotate(78.1deg)}28.81%{transform:rotate(71.2deg)}30.51%{transform:rotate(89.1deg)}32.2%{transform:rotate(105.5deg)}33.9%{transform:rotate(121.3deg)}35.59%{transform:rotate(135.5deg)}37.29%{transform:rotate(148.4deg)}38.98%{transform:rotate(161deg)}40.68%{transform:rotate(173.5deg)}42.37%{transform:rotate(180deg)}44.07%{transform:rotate(180deg)}45.76%{transform:rotate(180deg)}47.46%{transform:rotate(180deg)}49.15%{transform:rotate(180deg)}50.85%{transform:rotate(180deg)}52.54%{transform:rotate(180deg)}54.24%{transform:rotate(180deg)}55.93%{transform:rotate(180deg)}57.63%{transform:rotate(180deg)}59.32%{transform:rotate(180deg)}61.02%{transform:rotate(180deg)}62.71%{transform:rotate(180deg)}64.41%{transform:rotate(180deg)}66.1%{transform:rotate(180deg)}67.8%{transform:rotate(180deg)}69.49%{transform:rotate(180deg)}71.19%{transform:rotate(180deg)}72.88%{transform:rotate(180deg)}74.58%{transform:rotate(180deg)}76.27%{transform:rotate(180deg)}77.97%{transform:rotate(180deg)}79.66%{transform:rotate(180deg)}81.36%{transform:rotate(180deg)}83.05%{transform:rotate(180deg)}84.75%{transform:rotate(180deg)}86.44%{transform:rotate(180deg)}88.14%{transform:rotate(180deg)}89.83%{transform:rotate(180deg)}91.53%{transform:rotate(180deg)}93.22%{transform:rotate(180deg)}94.92%{transform:rotate(180deg)}96.61%{transform:rotate(180deg)}98.31%{transform:rotate(180deg)}to{transform:rotate(180deg)}}@keyframes spectrum-fills-rotate{0%{transform:rotate(-90deg)}to{transform:rotate(270deg)}}:host{--spectrum-progress-circle-track-border-color:var(
+--spectrum-gray-300
+);--spectrum-progress-circle-fill-border-color:var(--spectrum-blue-900);--spectrum-progress-circle-track-border-color-over-background:var(
+--spectrum-transparent-white-300
+);--spectrum-progress-circle-fill-border-color-over-background:var(
+--spectrum-transparent-white-900
+);--spectrum-progress-circle-size:var(
+--spectrum-progress-circle-size-medium
+);--spectrum-progress-circle-thickness:var(
+--spectrum-progress-circle-thickness-medium
+);--spectrum-progress-circle-track-border-style:solid}:host([size=s]){--spectrum-progress-circle-size:var(
+--spectrum-progress-circle-size-small
+);--spectrum-progress-circle-thickness:var(
+--spectrum-progress-circle-thickness-small
+)}.spectrum-ProgressCircle--medium{--spectrum-progress-circle-size:var(
+--spectrum-progress-circle-size-medium
+);--spectrum-progress-circle-thickness:var(
+--spectrum-progress-circle-thickness-medium
+)}:host([size=l]){--spectrum-progress-circle-size:var(
+--spectrum-progress-circle-size-large
+);--spectrum-progress-circle-thickness:var(
+--spectrum-progress-circle-thickness-large
+)}@media (forced-colors:active){:host{--highcontrast-progress-circle-fill-border-color:Highlight;--highcontrast-progress-circle-fill-border-color-over-background:Highlight}.track{--spectrum-progress-circle-track-border-style:double}}:host{block-size:var(
+--mod-progress-circle-size,var(--spectrum-progress-circle-size)
+);direction:ltr;display:inline-block;inline-size:var(
+--mod-progress-circle-size,var(--spectrum-progress-circle-size)
+);position:relative;transform:translateZ(0)}.track{block-size:var(
+--mod-progress-circle-size,var(--spectrum-progress-circle-size)
+);border-color:var(
+--mod-progress-circle-track-border-color,var(--spectrum-progress-circle-track-border-color)
+);border-radius:var(
+--mod-progress-circle-size,var(--spectrum-progress-circle-size)
+);border-style:var(
+--highcontrast-progress-circle-track-border-style,var(
+--mod-progress-circle-track-border-style,var(--spectrum-progress-circle-track-border-style)
+)
+);border-width:var(
+--mod-progress-circle-thickness,var(--spectrum-progress-circle-thickness)
+);box-sizing:border-box;inline-size:var(
+--mod-progress-circle-size,var(--spectrum-progress-circle-size)
+)}.fills{block-size:100%;inline-size:100%;inset-block-start:0;inset-inline-start:0;position:absolute}.fill{block-size:var(
+--mod-progress-circle-size,var(--spectrum-progress-circle-size)
+);border-color:var(
+--highcontrast-progress-circle-fill-border-color,var(
+--mod-progress-circle-fill-border-color,var(--spectrum-progress-circle-fill-border-color)
+)
+);border-radius:var(
+--mod-progress-circle-size,var(--spectrum-progress-circle-size)
 );border-style:solid;border-width:var(
---spectrum-progresscircle-l-border-size,var(--spectrum-global-dimension-size-50)
-);height:var(
---spectrum-progresscircle-l-height,var(--spectrum-global-dimension-size-800)
-);width:var(
---spectrum-progresscircle-l-width,var(--spectrum-global-dimension-size-800)
-)}:host([size=l]) .fill{border-radius:var(
---spectrum-progresscircle-l-width,var(--spectrum-global-dimension-size-800)
-);border-style:solid;border-width:var(
---spectrum-progresscircle-l-border-size,var(--spectrum-global-dimension-size-50)
-);height:var(
---spectrum-progresscircle-l-height,var(--spectrum-global-dimension-size-800)
-);width:var(
---spectrum-progresscircle-l-width,var(--spectrum-global-dimension-size-800)
-)}:host([indeterminate]) .fills{animation:spectrum-fills-rotate 1s cubic-bezier(.25,.78,.48,.89) infinite;transform:translateZ(0);transform-origin:center;will-change:transform}:host([indeterminate]) .fillSubMask1{animation:spectrum-fill-mask-1 1s linear infinite;transform:translateZ(0);will-change:transform}:host([indeterminate]) .fillSubMask2{animation:spectrum-fill-mask-2 1s linear infinite;transform:translateZ(0);will-change:transform}.track{border-color:var(
---spectrum-progresscircle-m-track-color,var(--spectrum-alias-track-color-default)
-)}.fill{border-color:var(
---spectrum-progresscircle-m-track-fill-color,var(--spectrum-semantic-informative-color-default)
-)}:host([over-background]) .track{border-color:var(
---spectrum-progresscircle-m-over-background-track-color
-)}:host([over-background]) .fill{border-color:var(
---spectrum-progresscircle-m-over-background-track-fill-color
-)}:host([indeterminate][over-background]) .track{border-color:var(
---spectrum-progresscircle-m-over-background-track-color
-)}:host([indeterminate][over-background]) .fill{border-color:var(
---spectrum-progresscircle-m-over-background-track-fill-color
-)}@media (forced-colors:active){.fill{--spectrum-progresscircle-m-track-fill-color:Highlight}}
-`;export default t;
+--mod-progress-circle-thickness,var(--spectrum-progress-circle-thickness)
+);box-sizing:border-box;inline-size:var(
+--mod-progress-circle-size,var(--spectrum-progress-circle-size)
+)}:host([static=white]) .track{border-color:var(
+--mod-progress-circle-track-border-color-over-background,var(--spectrum-progress-circle-track-border-color-over-background)
+)}:host([static=white]) .fill{border-color:var(
+--highcontrast-progress-circle-fill-border-color-over-background,var(
+--mod-progress-circle-fill-border-color-over-background,var(--spectrum-progress-circle-fill-border-color-over-background)
+)
+)}.fillMask1,.fillMask2{block-size:100%;inline-size:50%;overflow:hidden;position:absolute;transform:rotate(180deg);transform-origin:100% center}.fillSubMask1,.fillSubMask2{block-size:100%;inline-size:100%;overflow:hidden;transform:rotate(-180deg);transform-origin:100% center}.fillMask2{transform:rotate(0deg)}:host([indeterminate]) .fills{animation:spectrum-fills-rotate 1s cubic-bezier(.25,.78,.48,.89) infinite;transform:translateZ(0);transform-origin:center;will-change:transform}:host([indeterminate]) .fillSubMask1{animation:spectrum-fill-mask-1 1s linear infinite;transform:translateZ(0);will-change:transform}:host([indeterminate]) .fillSubMask2{animation:spectrum-fill-mask-2 1s linear infinite;transform:translateZ(0);will-change:transform}
+`;export default e;
 //# sourceMappingURL=spectrum-progress-circle.css.js.map

stories/progress-circle.stories.js

@@ -1,2 +0,25 @@
-import{html as r}from"@spectrum-web-components/base";import"@spectrum-web-components/progress-circle/sp-progress-circle.js";export default{title:"Progress Circle",component:"sp-progress-circle",argTypes:{indeterminate:{name:"indeterminate",type:{name:"boolean",required:!1},description:"Whether the progress is indeterminate.",table:{type:{summary:"boolean"},defaultValue:{summary:!1}},control:{type:"boolean"}}}};export const Default=({indeterminate:e}={})=>r`
+"use strict";
+import { html } from "@spectrum-web-components/base";
+import "@spectrum-web-components/progress-circle/sp-progress-circle.js";
+import "@spectrum-web-components/button/sp-button.js";
+export default {
+  title: "Progress Circle",
+  component: "sp-progress-circle",
+  argTypes: {
+    indeterminate: {
+      name: "indeterminate",
+      type: { name: "boolean", required: false },
+      description: "Whether the progress is indeterminate.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      },
+      control: {
+        type: "boolean"
+      }
+    }
+  }
+};
+export const Default = ({ indeterminate } = {}) => {
+  return html`
         <div
@@ -8,7 +31,9 @@ style="width: 250px; height: 150px; display: flex; align-items: center; justify-content: space-around;"
                 size="s"
-                ?indeterminate=${e}
+                ?indeterminate=${indeterminate}
+                label="Loading progess demo"
             ></sp-progress-circle>
             <sp-progress-circle
                 progress="27"
-                ?indeterminate=${e}
+                ?indeterminate=${indeterminate}
+                label="Loading progess demo"
             ></sp-progress-circle>
@@ -18,6 +43,15 @@ <sp-progress-circle
                 size="l"
-                ?indeterminate=${e}
+                ?indeterminate=${indeterminate}
+                label="Loading progess demo"
             ></sp-progress-circle>
         </div>
-    `;Default.args={indeterminate:!1};export const overBackground=({indeterminate:e}={})=>r`
+    `;
+};
+Default.args = {
+  indeterminate: false
+};
+export const staticWhite = ({
+  indeterminate
+} = {}) => {
+  return html`
         <div
@@ -28,19 +62,41 @@ style="width: 250px; height: 150px; background-color: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: space-around;"
                 progress="53"
-                over-background
+                static="white"
                 size="s"
-                ?indeterminate=${e}
+                ?indeterminate=${indeterminate}
+                label="Loading progess demo"
             ></sp-progress-circle>
             <sp-progress-circle
                 progress="53"
-                over-background
-                ?indeterminate=${e}
+                static="white"
+                ?indeterminate=${indeterminate}
+                label="Loading progess demo"
             ></sp-progress-circle>
             <sp-progress-circle
                 progress="53"
-                over-background
+                static="white"
                 size="l"
-                ?indeterminate=${e}
+                ?indeterminate=${indeterminate}
+                label="Loading progess demo"
             ></sp-progress-circle>
         </div>
-    `;overBackground.args={indeterminate:!1},overBackground.storyName="Over background";
+    `;
+};
+staticWhite.args = {
+  indeterminate: false
+};
+export const inButton = ({
+  indeterminate
+} = {}) => html`
+    <sp-button variant="black" style="color: white">
+        <sp-progress-circle
+            progress="53"
+            static="white"
+            size="s"
+            ?indeterminate=${indeterminate}
+            slot="icon"
+            label="Processing"
+        ></sp-progress-circle>
+        Processing...
+    </sp-button>
+`;
 //# sourceMappingURL=progress-circle.stories.js.map

test/benchmark/basic-test.js

@@ -1,4 +0,8 @@
-import"@spectrum-web-components/progress-circle/sp-progress-circle.js";import{html as r}from"lit";import{measureFixtureCreation as e}from"../../../../test/benchmark/helpers.js";e(r`
+"use strict";
+import "@spectrum-web-components/progress-circle/sp-progress-circle.js";
+import { html } from "lit";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
+measureFixtureCreation(html`
     <sp-progress-circle indeterminate></sp-progress-circle>
 `);
 //# sourceMappingURL=basic-test.js.map

test/progress-circle.test-vrt.js

@@ -1,2 +0,5 @@
-import*as r from"../stories/progress-circle.stories.js";import{regressVisuals as s}from"../../../test/visual/test.js";s("ProgressCircleStories",r);
+"use strict";
+import * as stories from "../stories/progress-circle.stories.js";
+import { regressVisuals } from "../../../test/visual/test.js";
+regressVisuals("ProgressCircleStories", stories);
 //# sourceMappingURL=progress-circle.test-vrt.js.map

test/progress-circle.test.js

@@ -1,6 +0,22 @@
-import{elementUpdated as s,expect as r,fixture as t,html as a}from"@open-wc/testing";import"@spectrum-web-components/progress-circle/sp-progress-circle.js";import{stub as l}from"sinon";import{testForLitDevWarnings as c}from"../../../test/testing-helpers.js";describe("ProgressCircle",()=>{c(async()=>await t(a`
+"use strict";
+import { elementUpdated, expect, fixture, html } from "@open-wc/testing";
+import "@spectrum-web-components/progress-circle/sp-progress-circle.js";
+import { stub } from "sinon";
+import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
+describe("ProgressCircle", () => {
+  testForLitDevWarnings(
+    async () => await fixture(html`
                 <sp-progress-circle label="Loading"></sp-progress-circle>
-            `)),it("loads",async()=>{const e=await t(a`
+            `)
+  );
+  it("loads", async () => {
+    const el = await fixture(html`
             <sp-progress-circle label="Loading"></sp-progress-circle>
-        `);await s(e),r(e).to.not.be.undefined,await r(e).to.be.accessible()}),it("loads - [indeterminate]",async()=>{const e=await t(a`
+        `);
+    await elementUpdated(el);
+    expect(el).to.not.be.undefined;
+    await expect(el).to.be.accessible();
+  });
+  it("loads - [indeterminate]", async () => {
+    const el = await fixture(html`
             <sp-progress-circle
@@ -10,3 +26,9 @@ indeterminate
             ></sp-progress-circle>
-        `);await s(e),r(e).to.not.be.undefined,await r(e).to.be.accessible()}),it("accepts user `role`",async()=>{const e=await t(a`
+        `);
+    await elementUpdated(el);
+    expect(el).to.not.be.undefined;
+    await expect(el).to.be.accessible();
+  });
+  it("accepts user `role`", async () => {
+    const el = await fixture(html`
             <sp-progress-circle
@@ -16,3 +38,8 @@ role="progressbar"
             ></sp-progress-circle>
-        `);await s(e),r(e.getAttribute("role")).to.equal("progressbar")}),it("returns to indeterminate",async()=>{const e=await t(a`
+        `);
+    await elementUpdated(el);
+    expect(el.getAttribute("role")).to.equal("progressbar");
+  });
+  it("returns to indeterminate", async () => {
+    const el = await fixture(html`
             <sp-progress-circle
@@ -22,5 +49,32 @@ progress="50"
             ></sp-progress-circle>
-        `);await s(e),r(e.hasAttribute("aria-valuenow")).to.be.true,r(e.getAttribute("aria-valuenow")).to.equal("50"),e.indeterminate=!0,await s(e),r(e.hasAttribute("aria-valuenow")).to.be.false}),it("warns in Dev Mode when accessible attributes are not leveraged",async()=>{const e=l(console,"warn"),o=await t(a`
+        `);
+    await elementUpdated(el);
+    expect(el.hasAttribute("aria-valuenow")).to.be.true;
+    expect(el.getAttribute("aria-valuenow")).to.equal("50");
+    el.indeterminate = true;
+    await elementUpdated(el);
+    expect(el.hasAttribute("aria-valuenow")).to.be.false;
+  });
+  it("warns in Dev Mode when accessible attributes are not leveraged", async () => {
+    const consoleWarnStub = stub(console, "warn");
+    const el = await fixture(html`
             <sp-progress-circle progress="50"></sp-progress-circle>
-        `);await s(o),r(e.called).to.be.true;const i=e.getCall(0);r(i.args.at(0).includes("accessible"),"confirm accessibility-centric message").to.be.true,r(i.args.at(-1),"confirm `data` shape").to.deep.equal({data:{localName:"sp-progress-circle",type:"accessibility",level:"default"}}),e.restore()})});
+        `);
+    await elementUpdated(el);
+    expect(consoleWarnStub.called).to.be.true;
+    const spyCall = consoleWarnStub.getCall(0);
+    expect(
+      spyCall.args.at(0).includes("accessible"),
+      "confirm accessibility-centric message"
+    ).to.be.true;
+    expect(spyCall.args.at(-1), "confirm `data` shape").to.deep.equal({
+      data: {
+        localName: "sp-progress-circle",
+        type: "accessibility",
+        level: "default"
+      }
+    });
+    consoleWarnStub.restore();
+  });
+});
 //# sourceMappingURL=progress-circle.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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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 2 instances 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

Unidentified License

License

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

Found 2 instances in 1 package

Improved metrics

Total package byte prevSize

143256

increased by2.38%

Lines of code

965

increased by17.97%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes