@spectrum-web-components/progress-circle 0.48.1 → 0.49.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/README.md +3 -3
  2. package/package.json +4 -4
  3. package/src/ProgressCircle.d.ts +7 -0
  4. package/src/ProgressCircle.dev.js +18 -2
  5. package/src/ProgressCircle.dev.js.map +2 -2
  6. package/src/ProgressCircle.js +4 -4
  7. package/src/ProgressCircle.js.map +2 -2
  8. package/src/progress-circle.css.dev.js +1 -1
  9. package/src/progress-circle.css.dev.js.map +1 -1
  10. package/src/progress-circle.css.js +1 -1
  11. package/src/progress-circle.css.js.map +1 -1
  12. package/src/spectrum-config.js +1 -1
  13. package/src/spectrum-progress-circle.css.dev.js +1 -1
  14. package/src/spectrum-progress-circle.css.dev.js.map +1 -1
  15. package/src/spectrum-progress-circle.css.js +1 -1
  16. package/src/spectrum-progress-circle.css.js.map +1 -1
  17. package/stories/progress-circle.stories.js +4 -4
  18. package/stories/progress-circle.stories.js.map +1 -1
  19. package/test/progress-circle.test.js +39 -0
  20. package/test/progress-circle.test.js.map +2 -2
  21. package/custom-elements.json +0 -185
package/README.md CHANGED
@@ -62,18 +62,18 @@ If you display your `<sp-progress-cicle>` element over the top of other content,
62
62
  <sp-progress-circle
63
63
  label="A small representation of a partially completed action"
64
64
  progress="42"
65
- static="white"
65
+ static-color="white"
66
66
  size="s"
67
67
  ></sp-progress-circle>
68
68
  <sp-progress-circle
69
69
  label="A medium representation of a barely started action"
70
70
  progress="7"
71
- static="white"
71
+ static-color="white"
72
72
  ></sp-progress-circle>
73
73
  <sp-progress-circle
74
74
  label="A large representation of a somewhat completed action"
75
75
  progress="68"
76
- static="white"
76
+ static-color="white"
77
77
  size="l"
78
78
  ></sp-progress-circle>
79
79
  </div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/progress-circle",
3
- "version": "0.48.1",
3
+ "version": "0.49.0-beta.1",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -57,8 +57,8 @@
57
57
  "lit-html"
58
58
  ],
59
59
  "dependencies": {
60
- "@spectrum-web-components/base": "^0.48.1",
61
- "@spectrum-web-components/shared": "^0.48.1"
60
+ "@spectrum-web-components/base": "^0.49.0-beta.1",
61
+ "@spectrum-web-components/shared": "^0.49.0-beta.1"
62
62
  },
63
63
  "devDependencies": {
64
64
  "@spectrum-css/progresscircle": "^3.1.0"
@@ -69,5 +69,5 @@
69
69
  "./sp-*.js",
70
70
  "./**/*.dev.js"
71
71
  ],
72
- "gitHead": "b756ecc3587411e4dbeb825bad40a9f4a3c7a248"
72
+ "gitHead": "74ee2c5b1276e8e4f768566a1c3c4e263a7eb8b3"
73
73
  }
package/src/ProgressCircle.d.ts CHANGED
@@ -10,8 +10,15 @@ export declare class ProgressCircle extends ProgressCircle_base {
10
10
  static get styles(): CSSResultArray;
11
11
  indeterminate: boolean;
12
12
  label: string;
13
+ /**
14
+ * @deprecated Use `staticColor` instead.
15
+ */
13
16
  overBackground: boolean;
17
+ /**
18
+ * @deprecated Use `staticColor` instead.
19
+ */
14
20
  static?: 'white';
21
+ staticColor?: 'white';
15
22
  progress: number;
16
23
  private slotEl;
17
24
  private makeRotation;
package/src/ProgressCircle.dev.js CHANGED
@@ -39,12 +39,25 @@ export class ProgressCircle extends SizedMixin(SpectrumElement, {
39
39
  }
40
40
  willUpdate(changes) {
41
41
  if (changes.has("overBackground")) {
42
- this.static = this.overBackground ? "white" : this.static || void 0;
42
+ this.staticColor = this.overBackground ? "white" : this.staticColor || void 0;
43
43
  if (true) {
44
44
  if (this.overBackground) {
45
45
  window.__swc.warn(
46
46
  this,
47
- `<${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.`,
47
+ `<${this.localName}> element will stop accepting the "over-background" attribute, and its related "overBackground" property in a future release. Use the "static-color" attribute with a value of "white" instead.`,
48
+ "https://opensource.adobe.com/spectrum-web-components/components/progress-circle/#static",
49
+ { level: "deprecation" }
50
+ );
51
+ }
52
+ }
53
+ }
54
+ if (changes.has("static")) {
55
+ this.staticColor = this.static;
56
+ if (true) {
57
+ if (this.static) {
58
+ window.__swc.warn(
59
+ this,
60
+ `<${this.localName}> element will stop accepting the "static" attribute. Use the "static-color" attribute with a value of "white" instead.`,
48
61
  "https://opensource.adobe.com/spectrum-web-components/components/progress-circle/#static",
49
62
  { level: "deprecation" }
50
63
  );
@@ -137,6 +150,9 @@ __decorateClass([
137
150
  __decorateClass([
138
151
  property({ reflect: true })
139
152
  ], ProgressCircle.prototype, "static", 2);
153
+ __decorateClass([
154
+ property({ reflect: true, attribute: "static-color" })
155
+ ], ProgressCircle.prototype, "staticColor", 2);
140
156
  __decorateClass([
141
157
  property({ type: Number })
142
158
  ], ProgressCircle.prototype, "progress", 2);
package/src/ProgressCircle.dev.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["ProgressCircle.ts"],
4
- "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SizedMixin,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { getLabelFromSlot } from '@spectrum-web-components/shared/src/get-label-from-slot.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\n\nimport progressCircleStyles from './progress-circle.css.js';\n\n/**\n * @element sp-progress-circle\n */\nexport class ProgressCircle extends SizedMixin(SpectrumElement, {\n validSizes: ['s', 'm', 'l'],\n}) {\n public static override get styles(): CSSResultArray {\n return [progressCircleStyles];\n }\n\n @property({ type: Boolean, reflect: true })\n public indeterminate = false;\n\n @property({ type: String })\n public label = '';\n\n @property({ type: Boolean, reflect: true, attribute: 'over-background' })\n public overBackground = false;\n\n @property({ reflect: true })\n public static?: 'white';\n\n @property({ type: Number })\n public progress = 0;\n\n @query('slot')\n private slotEl!: HTMLSlotElement;\n\n private makeRotation(rotation: number): string | undefined {\n return this.indeterminate\n ? undefined\n : `transform: rotate(${rotation}deg);`;\n }\n\n protected override willUpdate(changes: PropertyValues<this>): void {\n if (changes.has('overBackground')) {\n // Apply \"static\" from \"overBackground\", preferring \"static\",\n // until the deprecation period is over.\n this.static = this.overBackground\n ? 'white'\n : this.static || undefined;\n if (window.__swc.DEBUG) {\n if (this.overBackground) {\n window.__swc.warn(\n this,\n `<${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.`,\n 'https://opensource.adobe.com/spectrum-web-components/components/progress-circle/#static',\n { level: 'deprecation' }\n );\n }\n }\n }\n }\n\n protected override render(): TemplateResult {\n const styles = [\n this.makeRotation(-180 + (180 / 50) * Math.min(this.progress, 50)),\n this.makeRotation(\n -180 + (180 / 50) * Math.max(this.progress - 50, 0)\n ),\n ];\n const masks = ['Mask1', 'Mask2'];\n return html`\n <slot @slotchange=${this.handleSlotchange}></slot>\n <div class=\"track\"></div>\n <div class=\"fills\">\n ${masks.map(\n (mask, index) => html`\n <div class=\"fill${mask}\">\n <div\n class=\"fillSub${mask}\"\n style=${ifDefined(styles[index])}\n >\n <div class=\"fill\"></div>\n </div>\n </div>\n `\n )}\n </div>\n `;\n }\n\n protected handleSlotchange(): void {\n const labelFromSlot = getLabelFromSlot(this.label, this.slotEl);\n if (labelFromSlot) {\n this.label = labelFromSlot;\n }\n }\n\n protected override firstUpdated(changes: PropertyValues): void {\n super.firstUpdated(changes);\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'progressbar');\n }\n }\n\n protected override updated(changes: PropertyValues): void {\n super.updated(changes);\n if (!this.indeterminate && changes.has('progress')) {\n this.setAttribute('aria-valuenow', '' + this.progress);\n } else if (this.hasAttribute('aria-valuenow')) {\n this.removeAttribute('aria-valuenow');\n }\n if (changes.has('label')) {\n if (this.label.length) {\n this.setAttribute('aria-label', this.label);\n } else if (\n changes.get('label') === this.getAttribute('aria-label')\n ) {\n this.removeAttribute('aria-label');\n }\n }\n\n if (window.__swc.DEBUG) {\n if (\n !this.label &&\n !this.getAttribute('aria-label') &&\n !this.getAttribute('aria-labelledby') &&\n !this.slotEl.assignedNodes().length\n ) {\n window.__swc.warn(\n this,\n '<sp-progress-circle> elements need one of the following to be accessible:',\n 'https://opensource.adobe.com/spectrum-web-components/components/progress-circle/#accessibility',\n {\n type: 'accessibility',\n issues: [\n 'value supplied to the \"label\" attribute, which will be displayed visually as part of the element, or',\n 'text content supplied directly to the <sp-progress-circle> element, or',\n 'value supplied to the \"aria-label\" attribute, which will only be provided to screen readers, or',\n '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.',\n ],\n }\n );\n }\n }\n }\n}\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SizedMixin,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { getLabelFromSlot } from '@spectrum-web-components/shared/src/get-label-from-slot.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\n\nimport progressCircleStyles from './progress-circle.css.js';\n\n/**\n * @element sp-progress-circle\n */\nexport class ProgressCircle extends SizedMixin(SpectrumElement, {\n validSizes: ['s', 'm', 'l'],\n}) {\n public static override get styles(): CSSResultArray {\n return [progressCircleStyles];\n }\n\n @property({ type: Boolean, reflect: true })\n public indeterminate = false;\n\n @property({ type: String })\n public label = '';\n\n /**\n * @deprecated Use `staticColor` instead.\n */\n @property({ type: Boolean, reflect: true, attribute: 'over-background' })\n public overBackground = false;\n\n /**\n * @deprecated Use `staticColor` instead.\n */\n @property({ reflect: true })\n public static?: 'white';\n\n @property({ reflect: true, attribute: 'static-color' })\n public staticColor?: 'white';\n\n @property({ type: Number })\n public progress = 0;\n\n @query('slot')\n private slotEl!: HTMLSlotElement;\n\n private makeRotation(rotation: number): string | undefined {\n return this.indeterminate\n ? undefined\n : `transform: rotate(${rotation}deg);`;\n }\n\n protected override willUpdate(changes: PropertyValues<this>): void {\n if (changes.has('overBackground')) {\n // Apply \"staticColor\" from \"overBackground\", preferring \"staticColor\",\n // until the deprecation period is over.\n this.staticColor = this.overBackground\n ? 'white'\n : this.staticColor || undefined;\n if (window.__swc.DEBUG) {\n if (this.overBackground) {\n window.__swc.warn(\n this,\n `<${this.localName}> element will stop accepting the \"over-background\" attribute, and its related \"overBackground\" property in a future release. Use the \"static-color\" attribute with a value of \"white\" instead.`,\n 'https://opensource.adobe.com/spectrum-web-components/components/progress-circle/#static',\n { level: 'deprecation' }\n );\n }\n }\n }\n if (changes.has('static')) {\n // Apply \"staticColor\" from \"static\", preferring \"staticColor\",\n // until the deprecation period is over.\n this.staticColor = this.static;\n if (window.__swc.DEBUG) {\n if (this.static) {\n window.__swc.warn(\n this,\n `<${this.localName}> element will stop accepting the \"static\" attribute. Use the \"static-color\" attribute with a value of \"white\" instead.`,\n 'https://opensource.adobe.com/spectrum-web-components/components/progress-circle/#static',\n { level: 'deprecation' }\n );\n }\n }\n }\n }\n\n protected override render(): TemplateResult {\n const styles = [\n this.makeRotation(-180 + (180 / 50) * Math.min(this.progress, 50)),\n this.makeRotation(\n -180 + (180 / 50) * Math.max(this.progress - 50, 0)\n ),\n ];\n const masks = ['Mask1', 'Mask2'];\n return html`\n <slot @slotchange=${this.handleSlotchange}></slot>\n <div class=\"track\"></div>\n <div class=\"fills\">\n ${masks.map(\n (mask, index) => html`\n <div class=\"fill${mask}\">\n <div\n class=\"fillSub${mask}\"\n style=${ifDefined(styles[index])}\n >\n <div class=\"fill\"></div>\n </div>\n </div>\n `\n )}\n </div>\n `;\n }\n\n protected handleSlotchange(): void {\n const labelFromSlot = getLabelFromSlot(this.label, this.slotEl);\n if (labelFromSlot) {\n this.label = labelFromSlot;\n }\n }\n\n protected override firstUpdated(changes: PropertyValues): void {\n super.firstUpdated(changes);\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'progressbar');\n }\n }\n\n protected override updated(changes: PropertyValues): void {\n super.updated(changes);\n if (!this.indeterminate && changes.has('progress')) {\n this.setAttribute('aria-valuenow', '' + this.progress);\n } else if (this.hasAttribute('aria-valuenow')) {\n this.removeAttribute('aria-valuenow');\n }\n if (changes.has('label')) {\n if (this.label.length) {\n this.setAttribute('aria-label', this.label);\n } else if (\n changes.get('label') === this.getAttribute('aria-label')\n ) {\n this.removeAttribute('aria-label');\n }\n }\n\n if (window.__swc.DEBUG) {\n if (\n !this.label &&\n !this.getAttribute('aria-label') &&\n !this.getAttribute('aria-labelledby') &&\n !this.slotEl.assignedNodes().length\n ) {\n window.__swc.warn(\n this,\n '<sp-progress-circle> elements need one of the following to be accessible:',\n 'https://opensource.adobe.com/spectrum-web-components/components/progress-circle/#accessibility',\n {\n type: 'accessibility',\n issues: [\n 'value supplied to the \"label\" attribute, which will be displayed visually as part of the element, or',\n 'text content supplied directly to the <sp-progress-circle> element, or',\n 'value supplied to the \"aria-label\" attribute, which will only be provided to screen readers, or',\n '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.',\n ],\n }\n );\n }\n }\n }\n}\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/src/ProgressCircle.js CHANGED
@@ -1,17 +1,17 @@
1
- "use strict";var p=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var i=(o,s,e,r)=>{for(var t=r>1?void 0:r?c(s,e):s,l=o.length-1,n;l>=0;l--)(n=o[l])&&(t=(r?n(s,e,t):n(t))||t);return r&&t&&p(s,e,t),t};import{html as d,SizedMixin as u,SpectrumElement as h}from"@spectrum-web-components/base";import{property as a,query as b}from"@spectrum-web-components/base/src/decorators.js";import{getLabelFromSlot as m}from"@spectrum-web-components/shared/src/get-label-from-slot.js";import{ifDefined as v}from"@spectrum-web-components/base/src/directives.js";import f from"./progress-circle.css.js";export class ProgressCircle extends u(h,{validSizes:["s","m","l"]}){constructor(){super(...arguments);this.indeterminate=!1;this.label="";this.overBackground=!1;this.progress=0}static get styles(){return[f]}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))],r=["Mask1","Mask2"];return d`
1
+ "use strict";var p=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var i=(o,a,e,s)=>{for(var t=s>1?void 0:s?d(a,e):a,l=o.length-1,n;l>=0;l--)(n=o[l])&&(t=(s?n(a,e,t):n(t))||t);return s&&t&&p(a,e,t),t};import{html as c,SizedMixin as u,SpectrumElement as h}from"@spectrum-web-components/base";import{property as r,query as b}from"@spectrum-web-components/base/src/decorators.js";import{getLabelFromSlot as m}from"@spectrum-web-components/shared/src/get-label-from-slot.js";import{ifDefined as f}from"@spectrum-web-components/base/src/directives.js";import w from"./progress-circle.css.js";export class ProgressCircle extends u(h,{validSizes:["s","m","l"]}){constructor(){super(...arguments);this.indeterminate=!1;this.label="";this.overBackground=!1;this.progress=0}static get styles(){return[w]}makeRotation(e){return this.indeterminate?void 0:`transform: rotate(${e}deg);`}willUpdate(e){e.has("overBackground")&&(this.staticColor=this.overBackground?"white":this.staticColor||void 0),e.has("static")&&(this.staticColor=this.static)}render(){const e=[this.makeRotation(-180+3.6*Math.min(this.progress,50)),this.makeRotation(-180+3.6*Math.max(this.progress-50,0))],s=["Mask1","Mask2"];return c`
2
2
  <slot @slotchange=${this.handleSlotchange}></slot>
3
3
  <div class="track"></div>
4
4
  <div class="fills">
5
- ${r.map((t,l)=>d`
5
+ ${s.map((t,l)=>c`
6
6
  <div class="fill${t}">
7
7
  <div
8
8
  class="fillSub${t}"
9
- style=${v(e[l])}
9
+ style=${f(e[l])}
10
10
  >
11
11
  <div class="fill"></div>
12
12
  </div>
13
13
  </div>
14
14
  `)}
15
15
  </div>
16
- `}handleSlotchange(){const e=m(this.label,this.slotEl);e&&(this.label=e)}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"),e.has("label")&&(this.label.length?this.setAttribute("aria-label",this.label):e.get("label")===this.getAttribute("aria-label")&&this.removeAttribute("aria-label"))}}i([a({type:Boolean,reflect:!0})],ProgressCircle.prototype,"indeterminate",2),i([a({type:String})],ProgressCircle.prototype,"label",2),i([a({type:Boolean,reflect:!0,attribute:"over-background"})],ProgressCircle.prototype,"overBackground",2),i([a({reflect:!0})],ProgressCircle.prototype,"static",2),i([a({type:Number})],ProgressCircle.prototype,"progress",2),i([b("slot")],ProgressCircle.prototype,"slotEl",2);
16
+ `}handleSlotchange(){const e=m(this.label,this.slotEl);e&&(this.label=e)}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"),e.has("label")&&(this.label.length?this.setAttribute("aria-label",this.label):e.get("label")===this.getAttribute("aria-label")&&this.removeAttribute("aria-label"))}}i([r({type:Boolean,reflect:!0})],ProgressCircle.prototype,"indeterminate",2),i([r({type:String})],ProgressCircle.prototype,"label",2),i([r({type:Boolean,reflect:!0,attribute:"over-background"})],ProgressCircle.prototype,"overBackground",2),i([r({reflect:!0})],ProgressCircle.prototype,"static",2),i([r({reflect:!0,attribute:"static-color"})],ProgressCircle.prototype,"staticColor",2),i([r({type:Number})],ProgressCircle.prototype,"progress",2),i([b("slot")],ProgressCircle.prototype,"slotEl",2);
17
17
  //# sourceMappingURL=ProgressCircle.js.map
package/src/ProgressCircle.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["ProgressCircle.ts"],
4
- "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SizedMixin,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { getLabelFromSlot } from '@spectrum-web-components/shared/src/get-label-from-slot.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\n\nimport progressCircleStyles from './progress-circle.css.js';\n\n/**\n * @element sp-progress-circle\n */\nexport class ProgressCircle extends SizedMixin(SpectrumElement, {\n validSizes: ['s', 'm', 'l'],\n}) {\n public static override get styles(): CSSResultArray {\n return [progressCircleStyles];\n }\n\n @property({ type: Boolean, reflect: true })\n public indeterminate = false;\n\n @property({ type: String })\n public label = '';\n\n @property({ type: Boolean, reflect: true, attribute: 'over-background' })\n public overBackground = false;\n\n @property({ reflect: true })\n public static?: 'white';\n\n @property({ type: Number })\n public progress = 0;\n\n @query('slot')\n private slotEl!: HTMLSlotElement;\n\n private makeRotation(rotation: number): string | undefined {\n return this.indeterminate\n ? undefined\n : `transform: rotate(${rotation}deg);`;\n }\n\n protected override willUpdate(changes: PropertyValues<this>): void {\n if (changes.has('overBackground')) {\n // Apply \"static\" from \"overBackground\", preferring \"static\",\n // until the deprecation period is over.\n this.static = this.overBackground\n ? 'white'\n : this.static || undefined;\n if (window.__swc.DEBUG) {\n if (this.overBackground) {\n window.__swc.warn(\n this,\n `<${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.`,\n 'https://opensource.adobe.com/spectrum-web-components/components/progress-circle/#static',\n { level: 'deprecation' }\n );\n }\n }\n }\n }\n\n protected override render(): TemplateResult {\n const styles = [\n this.makeRotation(-180 + (180 / 50) * Math.min(this.progress, 50)),\n this.makeRotation(\n -180 + (180 / 50) * Math.max(this.progress - 50, 0)\n ),\n ];\n const masks = ['Mask1', 'Mask2'];\n return html`\n <slot @slotchange=${this.handleSlotchange}></slot>\n <div class=\"track\"></div>\n <div class=\"fills\">\n ${masks.map(\n (mask, index) => html`\n <div class=\"fill${mask}\">\n <div\n class=\"fillSub${mask}\"\n style=${ifDefined(styles[index])}\n >\n <div class=\"fill\"></div>\n </div>\n </div>\n `\n )}\n </div>\n `;\n }\n\n protected handleSlotchange(): void {\n const labelFromSlot = getLabelFromSlot(this.label, this.slotEl);\n if (labelFromSlot) {\n this.label = labelFromSlot;\n }\n }\n\n protected override firstUpdated(changes: PropertyValues): void {\n super.firstUpdated(changes);\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'progressbar');\n }\n }\n\n protected override updated(changes: PropertyValues): void {\n super.updated(changes);\n if (!this.indeterminate && changes.has('progress')) {\n this.setAttribute('aria-valuenow', '' + this.progress);\n } else if (this.hasAttribute('aria-valuenow')) {\n this.removeAttribute('aria-valuenow');\n }\n if (changes.has('label')) {\n if (this.label.length) {\n this.setAttribute('aria-label', this.label);\n } else if (\n changes.get('label') === this.getAttribute('aria-label')\n ) {\n this.removeAttribute('aria-label');\n }\n }\n\n if (window.__swc.DEBUG) {\n if (\n !this.label &&\n !this.getAttribute('aria-label') &&\n !this.getAttribute('aria-labelledby') &&\n !this.slotEl.assignedNodes().length\n ) {\n window.__swc.warn(\n this,\n '<sp-progress-circle> elements need one of the following to be accessible:',\n 'https://opensource.adobe.com/spectrum-web-components/components/progress-circle/#accessibility',\n {\n type: 'accessibility',\n issues: [\n 'value supplied to the \"label\" attribute, which will be displayed visually as part of the element, or',\n 'text content supplied directly to the <sp-progress-circle> element, or',\n 'value supplied to the \"aria-label\" attribute, which will only be provided to screen readers, or',\n '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.',\n ],\n }\n );\n }\n }\n }\n}\n"],
5
- "mappings": "qNAYA,OAEI,QAAAA,EAEA,cAAAC,EACA,mBAAAC,MAEG,gCACP,OACI,YAAAC,EACA,SAAAC,MACG,kDACP,OAAS,oBAAAC,MAAwB,6DACjC,OAAS,aAAAC,MAAiB,kDAE1B,OAAOC,MAA0B,2BAK1B,aAAM,uBAAuBN,EAAWC,EAAiB,CAC5D,WAAY,CAAC,IAAK,IAAK,GAAG,CAC9B,CAAC,CAAE,CAFI,kCAQH,KAAO,cAAgB,GAGvB,KAAO,MAAQ,GAGf,KAAO,eAAiB,GAMxB,KAAO,SAAW,EAjBlB,WAA2B,QAAyB,CAChD,MAAO,CAACK,CAAoB,CAChC,CAoBQ,aAAaC,EAAsC,CACvD,OAAO,KAAK,cACN,OACA,qBAAqBA,CAAQ,OACvC,CAEmB,WAAWC,EAAqC,CAC3DA,EAAQ,IAAI,gBAAgB,IAG5B,KAAK,OAAS,KAAK,eACb,QACA,KAAK,QAAU,OAY7B,CAEmB,QAAyB,CACxC,MAAMC,EAAS,CACX,KAAK,aAAa,KAAQ,IAAY,KAAK,IAAI,KAAK,SAAU,EAAE,CAAC,EACjE,KAAK,aACD,KAAQ,IAAY,KAAK,IAAI,KAAK,SAAW,GAAI,CAAC,CACtD,CACJ,EACMC,EAAQ,CAAC,QAAS,OAAO,EAC/B,OAAOX;AAAA,gCACiB,KAAK,gBAAgB;AAAA;AAAA;AAAA,kBAGnCW,EAAM,IACJ,CAACC,EAAMC,IAAUb;AAAA,0CACKY,CAAI;AAAA;AAAA,gDAEEA,CAAI;AAAA,wCACZN,EAAUI,EAAOG,CAAK,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,qBAMhD,CAAC;AAAA;AAAA,SAGb,CAEU,kBAAyB,CAC/B,MAAMC,EAAgBT,EAAiB,KAAK,MAAO,KAAK,MAAM,EAC1DS,IACA,KAAK,MAAQA,EAErB,CAEmB,aAAaL,EAA+B,CAC3D,MAAM,aAAaA,CAAO,EACrB,KAAK,aAAa,MAAM,GACzB,KAAK,aAAa,OAAQ,aAAa,CAE/C,CAEmB,QAAQA,EAA+B,CACtD,MAAM,QAAQA,CAAO,EACjB,CAAC,KAAK,eAAiBA,EAAQ,IAAI,UAAU,EAC7C,KAAK,aAAa,gBAAiB,GAAK,KAAK,QAAQ,EAC9C,KAAK,aAAa,eAAe,GACxC,KAAK,gBAAgB,eAAe,EAEpCA,EAAQ,IAAI,OAAO,IACf,KAAK,MAAM,OACX,KAAK,aAAa,aAAc,KAAK,KAAK,EAE1CA,EAAQ,IAAI,OAAO,IAAM,KAAK,aAAa,YAAY,GAEvD,KAAK,gBAAgB,YAAY,EA2B7C,CACJ,CA9HWM,EAAA,CADNZ,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAPjC,eAQF,6BAGAY,EAAA,CADNZ,EAAS,CAAE,KAAM,MAAO,CAAC,GAVjB,eAWF,qBAGAY,EAAA,CADNZ,EAAS,CAAE,KAAM,QAAS,QAAS,GAAM,UAAW,iBAAkB,CAAC,GAb/D,eAcF,8BAGAY,EAAA,CADNZ,EAAS,CAAE,QAAS,EAAK,CAAC,GAhBlB,eAiBF,sBAGAY,EAAA,CADNZ,EAAS,CAAE,KAAM,MAAO,CAAC,GAnBjB,eAoBF,wBAGCY,EAAA,CADPX,EAAM,MAAM,GAtBJ,eAuBD",
4
+ "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SizedMixin,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { getLabelFromSlot } from '@spectrum-web-components/shared/src/get-label-from-slot.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\n\nimport progressCircleStyles from './progress-circle.css.js';\n\n/**\n * @element sp-progress-circle\n */\nexport class ProgressCircle extends SizedMixin(SpectrumElement, {\n validSizes: ['s', 'm', 'l'],\n}) {\n public static override get styles(): CSSResultArray {\n return [progressCircleStyles];\n }\n\n @property({ type: Boolean, reflect: true })\n public indeterminate = false;\n\n @property({ type: String })\n public label = '';\n\n /**\n * @deprecated Use `staticColor` instead.\n */\n @property({ type: Boolean, reflect: true, attribute: 'over-background' })\n public overBackground = false;\n\n /**\n * @deprecated Use `staticColor` instead.\n */\n @property({ reflect: true })\n public static?: 'white';\n\n @property({ reflect: true, attribute: 'static-color' })\n public staticColor?: 'white';\n\n @property({ type: Number })\n public progress = 0;\n\n @query('slot')\n private slotEl!: HTMLSlotElement;\n\n private makeRotation(rotation: number): string | undefined {\n return this.indeterminate\n ? undefined\n : `transform: rotate(${rotation}deg);`;\n }\n\n protected override willUpdate(changes: PropertyValues<this>): void {\n if (changes.has('overBackground')) {\n // Apply \"staticColor\" from \"overBackground\", preferring \"staticColor\",\n // until the deprecation period is over.\n this.staticColor = this.overBackground\n ? 'white'\n : this.staticColor || undefined;\n if (window.__swc.DEBUG) {\n if (this.overBackground) {\n window.__swc.warn(\n this,\n `<${this.localName}> element will stop accepting the \"over-background\" attribute, and its related \"overBackground\" property in a future release. Use the \"static-color\" attribute with a value of \"white\" instead.`,\n 'https://opensource.adobe.com/spectrum-web-components/components/progress-circle/#static',\n { level: 'deprecation' }\n );\n }\n }\n }\n if (changes.has('static')) {\n // Apply \"staticColor\" from \"static\", preferring \"staticColor\",\n // until the deprecation period is over.\n this.staticColor = this.static;\n if (window.__swc.DEBUG) {\n if (this.static) {\n window.__swc.warn(\n this,\n `<${this.localName}> element will stop accepting the \"static\" attribute. Use the \"static-color\" attribute with a value of \"white\" instead.`,\n 'https://opensource.adobe.com/spectrum-web-components/components/progress-circle/#static',\n { level: 'deprecation' }\n );\n }\n }\n }\n }\n\n protected override render(): TemplateResult {\n const styles = [\n this.makeRotation(-180 + (180 / 50) * Math.min(this.progress, 50)),\n this.makeRotation(\n -180 + (180 / 50) * Math.max(this.progress - 50, 0)\n ),\n ];\n const masks = ['Mask1', 'Mask2'];\n return html`\n <slot @slotchange=${this.handleSlotchange}></slot>\n <div class=\"track\"></div>\n <div class=\"fills\">\n ${masks.map(\n (mask, index) => html`\n <div class=\"fill${mask}\">\n <div\n class=\"fillSub${mask}\"\n style=${ifDefined(styles[index])}\n >\n <div class=\"fill\"></div>\n </div>\n </div>\n `\n )}\n </div>\n `;\n }\n\n protected handleSlotchange(): void {\n const labelFromSlot = getLabelFromSlot(this.label, this.slotEl);\n if (labelFromSlot) {\n this.label = labelFromSlot;\n }\n }\n\n protected override firstUpdated(changes: PropertyValues): void {\n super.firstUpdated(changes);\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'progressbar');\n }\n }\n\n protected override updated(changes: PropertyValues): void {\n super.updated(changes);\n if (!this.indeterminate && changes.has('progress')) {\n this.setAttribute('aria-valuenow', '' + this.progress);\n } else if (this.hasAttribute('aria-valuenow')) {\n this.removeAttribute('aria-valuenow');\n }\n if (changes.has('label')) {\n if (this.label.length) {\n this.setAttribute('aria-label', this.label);\n } else if (\n changes.get('label') === this.getAttribute('aria-label')\n ) {\n this.removeAttribute('aria-label');\n }\n }\n\n if (window.__swc.DEBUG) {\n if (\n !this.label &&\n !this.getAttribute('aria-label') &&\n !this.getAttribute('aria-labelledby') &&\n !this.slotEl.assignedNodes().length\n ) {\n window.__swc.warn(\n this,\n '<sp-progress-circle> elements need one of the following to be accessible:',\n 'https://opensource.adobe.com/spectrum-web-components/components/progress-circle/#accessibility',\n {\n type: 'accessibility',\n issues: [\n 'value supplied to the \"label\" attribute, which will be displayed visually as part of the element, or',\n 'text content supplied directly to the <sp-progress-circle> element, or',\n 'value supplied to the \"aria-label\" attribute, which will only be provided to screen readers, or',\n '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.',\n ],\n }\n );\n }\n }\n }\n}\n"],
5
+ "mappings": "qNAYA,OAEI,QAAAA,EAEA,cAAAC,EACA,mBAAAC,MAEG,gCACP,OACI,YAAAC,EACA,SAAAC,MACG,kDACP,OAAS,oBAAAC,MAAwB,6DACjC,OAAS,aAAAC,MAAiB,kDAE1B,OAAOC,MAA0B,2BAK1B,aAAM,uBAAuBN,EAAWC,EAAiB,CAC5D,WAAY,CAAC,IAAK,IAAK,GAAG,CAC9B,CAAC,CAAE,CAFI,kCAQH,KAAO,cAAgB,GAGvB,KAAO,MAAQ,GAMf,KAAO,eAAiB,GAYxB,KAAO,SAAW,EA1BlB,WAA2B,QAAyB,CAChD,MAAO,CAACK,CAAoB,CAChC,CA6BQ,aAAaC,EAAsC,CACvD,OAAO,KAAK,cACN,OACA,qBAAqBA,CAAQ,OACvC,CAEmB,WAAWC,EAAqC,CAC3DA,EAAQ,IAAI,gBAAgB,IAG5B,KAAK,YAAc,KAAK,eAClB,QACA,KAAK,aAAe,QAY1BA,EAAQ,IAAI,QAAQ,IAGpB,KAAK,YAAc,KAAK,OAYhC,CAEmB,QAAyB,CACxC,MAAMC,EAAS,CACX,KAAK,aAAa,KAAQ,IAAY,KAAK,IAAI,KAAK,SAAU,EAAE,CAAC,EACjE,KAAK,aACD,KAAQ,IAAY,KAAK,IAAI,KAAK,SAAW,GAAI,CAAC,CACtD,CACJ,EACMC,EAAQ,CAAC,QAAS,OAAO,EAC/B,OAAOX;AAAA,gCACiB,KAAK,gBAAgB;AAAA;AAAA;AAAA,kBAGnCW,EAAM,IACJ,CAACC,EAAMC,IAAUb;AAAA,0CACKY,CAAI;AAAA;AAAA,gDAEEA,CAAI;AAAA,wCACZN,EAAUI,EAAOG,CAAK,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,qBAMhD,CAAC;AAAA;AAAA,SAGb,CAEU,kBAAyB,CAC/B,MAAMC,EAAgBT,EAAiB,KAAK,MAAO,KAAK,MAAM,EAC1DS,IACA,KAAK,MAAQA,EAErB,CAEmB,aAAaL,EAA+B,CAC3D,MAAM,aAAaA,CAAO,EACrB,KAAK,aAAa,MAAM,GACzB,KAAK,aAAa,OAAQ,aAAa,CAE/C,CAEmB,QAAQA,EAA+B,CACtD,MAAM,QAAQA,CAAO,EACjB,CAAC,KAAK,eAAiBA,EAAQ,IAAI,UAAU,EAC7C,KAAK,aAAa,gBAAiB,GAAK,KAAK,QAAQ,EAC9C,KAAK,aAAa,eAAe,GACxC,KAAK,gBAAgB,eAAe,EAEpCA,EAAQ,IAAI,OAAO,IACf,KAAK,MAAM,OACX,KAAK,aAAa,aAAc,KAAK,KAAK,EAE1CA,EAAQ,IAAI,OAAO,IAAM,KAAK,aAAa,YAAY,GAEvD,KAAK,gBAAgB,YAAY,EA2B7C,CACJ,CAtJWM,EAAA,CADNZ,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAPjC,eAQF,6BAGAY,EAAA,CADNZ,EAAS,CAAE,KAAM,MAAO,CAAC,GAVjB,eAWF,qBAMAY,EAAA,CADNZ,EAAS,CAAE,KAAM,QAAS,QAAS,GAAM,UAAW,iBAAkB,CAAC,GAhB/D,eAiBF,8BAMAY,EAAA,CADNZ,EAAS,CAAE,QAAS,EAAK,CAAC,GAtBlB,eAuBF,sBAGAY,EAAA,CADNZ,EAAS,CAAE,QAAS,GAAM,UAAW,cAAe,CAAC,GAzB7C,eA0BF,2BAGAY,EAAA,CADNZ,EAAS,CAAE,KAAM,MAAO,CAAC,GA5BjB,eA6BF,wBAGCY,EAAA,CADPX,EAAM,MAAM,GA/BJ,eAgCD",
6
6
  "names": ["html", "SizedMixin", "SpectrumElement", "property", "query", "getLabelFromSlot", "ifDefined", "progressCircleStyles", "rotation", "changes", "styles", "masks", "mask", "index", "labelFromSlot", "__decorateClass"]
7
7
  }
package/src/progress-circle.css.dev.js CHANGED
@@ -1,7 +1,7 @@
1
1
  "use strict";
2
2
  import { css } from "@spectrum-web-components/base";
3
3
  const styles = css`
4
- .fill-submask-2{animation:1s linear infinite b}@keyframes a{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(0)}11.86%{transform:rotate(0)}13.56%{transform:rotate(0)}15.25%{transform:rotate(0)}16.95%{transform:rotate(0)}18.64%{transform:rotate(0)}20.34%{transform:rotate(0)}22.03%{transform:rotate(0)}23.73%{transform:rotate(0)}25.42%{transform:rotate(0)}27.12%{transform:rotate(0)}28.81%{transform:rotate(0)}30.51%{transform:rotate(0)}32.2%{transform:rotate(0)}33.9%{transform:rotate(0)}35.59%{transform:rotate(0)}37.29%{transform:rotate(0)}38.98%{transform:rotate(0)}40.68%{transform:rotate(0)}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 b{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 c{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-accent-content-color-default);--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)}: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{position:var(--mod-progress-circle-position,relative);direction:ltr;display:inline-block;transform:translateZ(0)}:host,.track{inline-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size));block-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size))}.track{box-sizing:border-box;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));border-radius: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))}.fills{inline-size:100%;block-size:100%;position:absolute;inset-block-start:0;inset-inline-start:0}.fill{box-sizing:border-box;inline-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size));block-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size));border-style:solid;border-width:var(--mod-progress-circle-thickness,var(--spectrum-progress-circle-thickness));border-radius: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)))}: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{inline-size:50%;block-size:100%;transform-origin:100%;position:absolute;overflow:hidden;transform:rotate(180deg)}.fillSubMask1,.fillSubMask2{inline-size:100%;block-size:100%;transform-origin:100%;overflow:hidden;transform:rotate(-180deg)}.fillMask2{transform:rotate(0)}:host([indeterminate]) .fills{will-change:transform;transform-origin:50%;animation:1s cubic-bezier(.25,.78,.48,.89) infinite c;transform:translateZ(0)}:host([indeterminate]) .fillSubMask1{will-change:transform;animation:1s linear infinite a;transform:translateZ(0)}:host([indeterminate]) .fillSubMask2{will-change:transform;animation:1s linear infinite b;transform:translateZ(0)}:host{block-size:var(--mod-progress-circle-size,var(--_spectrum-progress-circle-size));inline-size:var(--mod-progress-circle-size,var(--_spectrum-progress-circle-size));--spectrum-progress-circle-size:inherit;--spectrum-progresscircle-m-over-background-track-fill-color:var(--spectrum-alias-track-fill-color-overbackground);--_spectrum-progress-circle-size:var(--spectrum-progress-circle-size,var(--spectrum-progress-circle-size-medium))}:host([size=s]){--_spectrum-progress-circle-size:var(--spectrum-progress-circle-size,var(--spectrum-progress-circle-size-small))}:host([size=l]){--_spectrum-progress-circle-size:var(--spectrum-progress-circle-size,var(--spectrum-progress-circle-size-large))}slot{display:none}.track,.fill{block-size:var(--mod-progress-circle-size,var(--_spectrum-progress-circle-size));border-radius:var(--mod-progress-circle-size,var(--_spectrum-progress-circle-size));inline-size:var(--mod-progress-circle-size,var(--_spectrum-progress-circle-size))}:host([indeterminate]) .fills,:host([indeterminate]) .fillSubMask1,:host([indeterminate]) .fillSubMask2{animation-duration:var(--spectrum-animation-duration-2000)}
4
+ .fill-submask-2{animation:1s linear infinite b}@keyframes a{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(0)}11.86%{transform:rotate(0)}13.56%{transform:rotate(0)}15.25%{transform:rotate(0)}16.95%{transform:rotate(0)}18.64%{transform:rotate(0)}20.34%{transform:rotate(0)}22.03%{transform:rotate(0)}23.73%{transform:rotate(0)}25.42%{transform:rotate(0)}27.12%{transform:rotate(0)}28.81%{transform:rotate(0)}30.51%{transform:rotate(0)}32.2%{transform:rotate(0)}33.9%{transform:rotate(0)}35.59%{transform:rotate(0)}37.29%{transform:rotate(0)}38.98%{transform:rotate(0)}40.68%{transform:rotate(0)}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 b{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 c{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-accent-content-color-default);--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)}: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{position:var(--mod-progress-circle-position,relative);direction:ltr;display:inline-block;transform:translateZ(0)}:host,.track{inline-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size));block-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size))}.track{box-sizing:border-box;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));border-radius: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))}.fills{inline-size:100%;block-size:100%;position:absolute;inset-block-start:0;inset-inline-start:0}.fill{box-sizing:border-box;inline-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size));block-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size));border-style:solid;border-width:var(--mod-progress-circle-thickness,var(--spectrum-progress-circle-thickness));border-radius: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)))}:host([static-color=white]) .track{border-color:var(--mod-progress-circle-track-border-color-over-background,var(--spectrum-progress-circle-track-border-color-over-background))}:host([static-color=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{inline-size:50%;block-size:100%;transform-origin:100%;position:absolute;overflow:hidden;transform:rotate(180deg)}.fillSubMask1,.fillSubMask2{inline-size:100%;block-size:100%;transform-origin:100%;overflow:hidden;transform:rotate(-180deg)}.fillMask2{transform:rotate(0)}:host([indeterminate]) .fills{will-change:transform;transform-origin:50%;animation:1s cubic-bezier(.25,.78,.48,.89) infinite c;transform:translateZ(0)}:host([indeterminate]) .fillSubMask1{will-change:transform;animation:1s linear infinite a;transform:translateZ(0)}:host([indeterminate]) .fillSubMask2{will-change:transform;animation:1s linear infinite b;transform:translateZ(0)}:host{block-size:var(--mod-progress-circle-size,var(--_spectrum-progress-circle-size));inline-size:var(--mod-progress-circle-size,var(--_spectrum-progress-circle-size));--spectrum-progress-circle-size:inherit;--spectrum-progresscircle-m-over-background-track-fill-color:var(--spectrum-alias-track-fill-color-overbackground);--_spectrum-progress-circle-size:var(--spectrum-progress-circle-size,var(--spectrum-progress-circle-size-medium))}:host([size=s]){--_spectrum-progress-circle-size:var(--spectrum-progress-circle-size,var(--spectrum-progress-circle-size-small))}:host([size=l]){--_spectrum-progress-circle-size:var(--spectrum-progress-circle-size,var(--spectrum-progress-circle-size-large))}slot{display:none}.track,.fill{block-size:var(--mod-progress-circle-size,var(--_spectrum-progress-circle-size));border-radius:var(--mod-progress-circle-size,var(--_spectrum-progress-circle-size));inline-size:var(--mod-progress-circle-size,var(--_spectrum-progress-circle-size))}:host([indeterminate]) .fills,:host([indeterminate]) .fillSubMask1,:host([indeterminate]) .fillSubMask2{animation-duration:var(--spectrum-animation-duration-2000)}
5
5
  `;
6
6
  export default styles;
7
7
  //# sourceMappingURL=progress-circle.css.dev.js.map
package/src/progress-circle.css.dev.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["progress-circle.css.ts"],
4
- "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n .fill-submask-2{animation:1s linear infinite b}@keyframes a{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(0)}11.86%{transform:rotate(0)}13.56%{transform:rotate(0)}15.25%{transform:rotate(0)}16.95%{transform:rotate(0)}18.64%{transform:rotate(0)}20.34%{transform:rotate(0)}22.03%{transform:rotate(0)}23.73%{transform:rotate(0)}25.42%{transform:rotate(0)}27.12%{transform:rotate(0)}28.81%{transform:rotate(0)}30.51%{transform:rotate(0)}32.2%{transform:rotate(0)}33.9%{transform:rotate(0)}35.59%{transform:rotate(0)}37.29%{transform:rotate(0)}38.98%{transform:rotate(0)}40.68%{transform:rotate(0)}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 b{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 c{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-accent-content-color-default);--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)}: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{position:var(--mod-progress-circle-position,relative);direction:ltr;display:inline-block;transform:translateZ(0)}:host,.track{inline-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size));block-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size))}.track{box-sizing:border-box;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));border-radius: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))}.fills{inline-size:100%;block-size:100%;position:absolute;inset-block-start:0;inset-inline-start:0}.fill{box-sizing:border-box;inline-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size));block-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size));border-style:solid;border-width:var(--mod-progress-circle-thickness,var(--spectrum-progress-circle-thickness));border-radius: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)))}: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{inline-size:50%;block-size:100%;transform-origin:100%;position:absolute;overflow:hidden;transform:rotate(180deg)}.fillSubMask1,.fillSubMask2{inline-size:100%;block-size:100%;transform-origin:100%;overflow:hidden;transform:rotate(-180deg)}.fillMask2{transform:rotate(0)}:host([indeterminate]) .fills{will-change:transform;transform-origin:50%;animation:1s cubic-bezier(.25,.78,.48,.89) infinite c;transform:translateZ(0)}:host([indeterminate]) .fillSubMask1{will-change:transform;animation:1s linear infinite a;transform:translateZ(0)}:host([indeterminate]) .fillSubMask2{will-change:transform;animation:1s linear infinite b;transform:translateZ(0)}:host{block-size:var(--mod-progress-circle-size,var(--_spectrum-progress-circle-size));inline-size:var(--mod-progress-circle-size,var(--_spectrum-progress-circle-size));--spectrum-progress-circle-size:inherit;--spectrum-progresscircle-m-over-background-track-fill-color:var(--spectrum-alias-track-fill-color-overbackground);--_spectrum-progress-circle-size:var(--spectrum-progress-circle-size,var(--spectrum-progress-circle-size-medium))}:host([size=s]){--_spectrum-progress-circle-size:var(--spectrum-progress-circle-size,var(--spectrum-progress-circle-size-small))}:host([size=l]){--_spectrum-progress-circle-size:var(--spectrum-progress-circle-size,var(--spectrum-progress-circle-size-large))}slot{display:none}.track,.fill{block-size:var(--mod-progress-circle-size,var(--_spectrum-progress-circle-size));border-radius:var(--mod-progress-circle-size,var(--_spectrum-progress-circle-size));inline-size:var(--mod-progress-circle-size,var(--_spectrum-progress-circle-size))}:host([indeterminate]) .fills,:host([indeterminate]) .fillSubMask1,:host([indeterminate]) .fillSubMask2{animation-duration:var(--spectrum-animation-duration-2000)}\n`;\nexport default styles;"],
4
+ "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n .fill-submask-2{animation:1s linear infinite b}@keyframes a{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(0)}11.86%{transform:rotate(0)}13.56%{transform:rotate(0)}15.25%{transform:rotate(0)}16.95%{transform:rotate(0)}18.64%{transform:rotate(0)}20.34%{transform:rotate(0)}22.03%{transform:rotate(0)}23.73%{transform:rotate(0)}25.42%{transform:rotate(0)}27.12%{transform:rotate(0)}28.81%{transform:rotate(0)}30.51%{transform:rotate(0)}32.2%{transform:rotate(0)}33.9%{transform:rotate(0)}35.59%{transform:rotate(0)}37.29%{transform:rotate(0)}38.98%{transform:rotate(0)}40.68%{transform:rotate(0)}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 b{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 c{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-accent-content-color-default);--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)}: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{position:var(--mod-progress-circle-position,relative);direction:ltr;display:inline-block;transform:translateZ(0)}:host,.track{inline-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size));block-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size))}.track{box-sizing:border-box;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));border-radius: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))}.fills{inline-size:100%;block-size:100%;position:absolute;inset-block-start:0;inset-inline-start:0}.fill{box-sizing:border-box;inline-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size));block-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size));border-style:solid;border-width:var(--mod-progress-circle-thickness,var(--spectrum-progress-circle-thickness));border-radius: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)))}:host([static-color=white]) .track{border-color:var(--mod-progress-circle-track-border-color-over-background,var(--spectrum-progress-circle-track-border-color-over-background))}:host([static-color=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{inline-size:50%;block-size:100%;transform-origin:100%;position:absolute;overflow:hidden;transform:rotate(180deg)}.fillSubMask1,.fillSubMask2{inline-size:100%;block-size:100%;transform-origin:100%;overflow:hidden;transform:rotate(-180deg)}.fillMask2{transform:rotate(0)}:host([indeterminate]) .fills{will-change:transform;transform-origin:50%;animation:1s cubic-bezier(.25,.78,.48,.89) infinite c;transform:translateZ(0)}:host([indeterminate]) .fillSubMask1{will-change:transform;animation:1s linear infinite a;transform:translateZ(0)}:host([indeterminate]) .fillSubMask2{will-change:transform;animation:1s linear infinite b;transform:translateZ(0)}:host{block-size:var(--mod-progress-circle-size,var(--_spectrum-progress-circle-size));inline-size:var(--mod-progress-circle-size,var(--_spectrum-progress-circle-size));--spectrum-progress-circle-size:inherit;--spectrum-progresscircle-m-over-background-track-fill-color:var(--spectrum-alias-track-fill-color-overbackground);--_spectrum-progress-circle-size:var(--spectrum-progress-circle-size,var(--spectrum-progress-circle-size-medium))}:host([size=s]){--_spectrum-progress-circle-size:var(--spectrum-progress-circle-size,var(--spectrum-progress-circle-size-small))}:host([size=l]){--_spectrum-progress-circle-size:var(--spectrum-progress-circle-size,var(--spectrum-progress-circle-size-large))}slot{display:none}.track,.fill{block-size:var(--mod-progress-circle-size,var(--_spectrum-progress-circle-size));border-radius:var(--mod-progress-circle-size,var(--_spectrum-progress-circle-size));inline-size:var(--mod-progress-circle-size,var(--_spectrum-progress-circle-size))}:host([indeterminate]) .fills,:host([indeterminate]) .fillSubMask1,:host([indeterminate]) .fillSubMask2{animation-duration:var(--spectrum-animation-duration-2000)}\n`;\nexport default styles;"],
5
5
  "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
6
6
  "names": []
7
7
  }
package/src/progress-circle.css.js CHANGED
@@ -1,4 +1,4 @@
1
1
  "use strict";import{css as r}from"@spectrum-web-components/base";const e=r`
2
- .fill-submask-2{animation:1s linear infinite b}@keyframes a{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(0)}11.86%{transform:rotate(0)}13.56%{transform:rotate(0)}15.25%{transform:rotate(0)}16.95%{transform:rotate(0)}18.64%{transform:rotate(0)}20.34%{transform:rotate(0)}22.03%{transform:rotate(0)}23.73%{transform:rotate(0)}25.42%{transform:rotate(0)}27.12%{transform:rotate(0)}28.81%{transform:rotate(0)}30.51%{transform:rotate(0)}32.2%{transform:rotate(0)}33.9%{transform:rotate(0)}35.59%{transform:rotate(0)}37.29%{transform:rotate(0)}38.98%{transform:rotate(0)}40.68%{transform:rotate(0)}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 b{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 c{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-accent-content-color-default);--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)}: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{position:var(--mod-progress-circle-position,relative);direction:ltr;display:inline-block;transform:translateZ(0)}:host,.track{inline-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size));block-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size))}.track{box-sizing:border-box;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));border-radius: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))}.fills{inline-size:100%;block-size:100%;position:absolute;inset-block-start:0;inset-inline-start:0}.fill{box-sizing:border-box;inline-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size));block-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size));border-style:solid;border-width:var(--mod-progress-circle-thickness,var(--spectrum-progress-circle-thickness));border-radius: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)))}: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{inline-size:50%;block-size:100%;transform-origin:100%;position:absolute;overflow:hidden;transform:rotate(180deg)}.fillSubMask1,.fillSubMask2{inline-size:100%;block-size:100%;transform-origin:100%;overflow:hidden;transform:rotate(-180deg)}.fillMask2{transform:rotate(0)}:host([indeterminate]) .fills{will-change:transform;transform-origin:50%;animation:1s cubic-bezier(.25,.78,.48,.89) infinite c;transform:translateZ(0)}:host([indeterminate]) .fillSubMask1{will-change:transform;animation:1s linear infinite a;transform:translateZ(0)}:host([indeterminate]) .fillSubMask2{will-change:transform;animation:1s linear infinite b;transform:translateZ(0)}:host{block-size:var(--mod-progress-circle-size,var(--_spectrum-progress-circle-size));inline-size:var(--mod-progress-circle-size,var(--_spectrum-progress-circle-size));--spectrum-progress-circle-size:inherit;--spectrum-progresscircle-m-over-background-track-fill-color:var(--spectrum-alias-track-fill-color-overbackground);--_spectrum-progress-circle-size:var(--spectrum-progress-circle-size,var(--spectrum-progress-circle-size-medium))}:host([size=s]){--_spectrum-progress-circle-size:var(--spectrum-progress-circle-size,var(--spectrum-progress-circle-size-small))}:host([size=l]){--_spectrum-progress-circle-size:var(--spectrum-progress-circle-size,var(--spectrum-progress-circle-size-large))}slot{display:none}.track,.fill{block-size:var(--mod-progress-circle-size,var(--_spectrum-progress-circle-size));border-radius:var(--mod-progress-circle-size,var(--_spectrum-progress-circle-size));inline-size:var(--mod-progress-circle-size,var(--_spectrum-progress-circle-size))}:host([indeterminate]) .fills,:host([indeterminate]) .fillSubMask1,:host([indeterminate]) .fillSubMask2{animation-duration:var(--spectrum-animation-duration-2000)}
2
+ .fill-submask-2{animation:1s linear infinite b}@keyframes a{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(0)}11.86%{transform:rotate(0)}13.56%{transform:rotate(0)}15.25%{transform:rotate(0)}16.95%{transform:rotate(0)}18.64%{transform:rotate(0)}20.34%{transform:rotate(0)}22.03%{transform:rotate(0)}23.73%{transform:rotate(0)}25.42%{transform:rotate(0)}27.12%{transform:rotate(0)}28.81%{transform:rotate(0)}30.51%{transform:rotate(0)}32.2%{transform:rotate(0)}33.9%{transform:rotate(0)}35.59%{transform:rotate(0)}37.29%{transform:rotate(0)}38.98%{transform:rotate(0)}40.68%{transform:rotate(0)}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 b{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 c{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-accent-content-color-default);--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)}: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{position:var(--mod-progress-circle-position,relative);direction:ltr;display:inline-block;transform:translateZ(0)}:host,.track{inline-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size));block-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size))}.track{box-sizing:border-box;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));border-radius: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))}.fills{inline-size:100%;block-size:100%;position:absolute;inset-block-start:0;inset-inline-start:0}.fill{box-sizing:border-box;inline-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size));block-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size));border-style:solid;border-width:var(--mod-progress-circle-thickness,var(--spectrum-progress-circle-thickness));border-radius: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)))}:host([static-color=white]) .track{border-color:var(--mod-progress-circle-track-border-color-over-background,var(--spectrum-progress-circle-track-border-color-over-background))}:host([static-color=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{inline-size:50%;block-size:100%;transform-origin:100%;position:absolute;overflow:hidden;transform:rotate(180deg)}.fillSubMask1,.fillSubMask2{inline-size:100%;block-size:100%;transform-origin:100%;overflow:hidden;transform:rotate(-180deg)}.fillMask2{transform:rotate(0)}:host([indeterminate]) .fills{will-change:transform;transform-origin:50%;animation:1s cubic-bezier(.25,.78,.48,.89) infinite c;transform:translateZ(0)}:host([indeterminate]) .fillSubMask1{will-change:transform;animation:1s linear infinite a;transform:translateZ(0)}:host([indeterminate]) .fillSubMask2{will-change:transform;animation:1s linear infinite b;transform:translateZ(0)}:host{block-size:var(--mod-progress-circle-size,var(--_spectrum-progress-circle-size));inline-size:var(--mod-progress-circle-size,var(--_spectrum-progress-circle-size));--spectrum-progress-circle-size:inherit;--spectrum-progresscircle-m-over-background-track-fill-color:var(--spectrum-alias-track-fill-color-overbackground);--_spectrum-progress-circle-size:var(--spectrum-progress-circle-size,var(--spectrum-progress-circle-size-medium))}:host([size=s]){--_spectrum-progress-circle-size:var(--spectrum-progress-circle-size,var(--spectrum-progress-circle-size-small))}:host([size=l]){--_spectrum-progress-circle-size:var(--spectrum-progress-circle-size,var(--spectrum-progress-circle-size-large))}slot{display:none}.track,.fill{block-size:var(--mod-progress-circle-size,var(--_spectrum-progress-circle-size));border-radius:var(--mod-progress-circle-size,var(--_spectrum-progress-circle-size));inline-size:var(--mod-progress-circle-size,var(--_spectrum-progress-circle-size))}:host([indeterminate]) .fills,:host([indeterminate]) .fillSubMask1,:host([indeterminate]) .fillSubMask2{animation-duration:var(--spectrum-animation-duration-2000)}
3
3
  `;export default e;
4
4
  //# sourceMappingURL=progress-circle.css.js.map
package/src/progress-circle.css.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["progress-circle.css.ts"],
4
- "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n .fill-submask-2{animation:1s linear infinite b}@keyframes a{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(0)}11.86%{transform:rotate(0)}13.56%{transform:rotate(0)}15.25%{transform:rotate(0)}16.95%{transform:rotate(0)}18.64%{transform:rotate(0)}20.34%{transform:rotate(0)}22.03%{transform:rotate(0)}23.73%{transform:rotate(0)}25.42%{transform:rotate(0)}27.12%{transform:rotate(0)}28.81%{transform:rotate(0)}30.51%{transform:rotate(0)}32.2%{transform:rotate(0)}33.9%{transform:rotate(0)}35.59%{transform:rotate(0)}37.29%{transform:rotate(0)}38.98%{transform:rotate(0)}40.68%{transform:rotate(0)}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 b{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 c{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-accent-content-color-default);--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)}: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{position:var(--mod-progress-circle-position,relative);direction:ltr;display:inline-block;transform:translateZ(0)}:host,.track{inline-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size));block-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size))}.track{box-sizing:border-box;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));border-radius: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))}.fills{inline-size:100%;block-size:100%;position:absolute;inset-block-start:0;inset-inline-start:0}.fill{box-sizing:border-box;inline-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size));block-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size));border-style:solid;border-width:var(--mod-progress-circle-thickness,var(--spectrum-progress-circle-thickness));border-radius: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)))}: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{inline-size:50%;block-size:100%;transform-origin:100%;position:absolute;overflow:hidden;transform:rotate(180deg)}.fillSubMask1,.fillSubMask2{inline-size:100%;block-size:100%;transform-origin:100%;overflow:hidden;transform:rotate(-180deg)}.fillMask2{transform:rotate(0)}:host([indeterminate]) .fills{will-change:transform;transform-origin:50%;animation:1s cubic-bezier(.25,.78,.48,.89) infinite c;transform:translateZ(0)}:host([indeterminate]) .fillSubMask1{will-change:transform;animation:1s linear infinite a;transform:translateZ(0)}:host([indeterminate]) .fillSubMask2{will-change:transform;animation:1s linear infinite b;transform:translateZ(0)}:host{block-size:var(--mod-progress-circle-size,var(--_spectrum-progress-circle-size));inline-size:var(--mod-progress-circle-size,var(--_spectrum-progress-circle-size));--spectrum-progress-circle-size:inherit;--spectrum-progresscircle-m-over-background-track-fill-color:var(--spectrum-alias-track-fill-color-overbackground);--_spectrum-progress-circle-size:var(--spectrum-progress-circle-size,var(--spectrum-progress-circle-size-medium))}:host([size=s]){--_spectrum-progress-circle-size:var(--spectrum-progress-circle-size,var(--spectrum-progress-circle-size-small))}:host([size=l]){--_spectrum-progress-circle-size:var(--spectrum-progress-circle-size,var(--spectrum-progress-circle-size-large))}slot{display:none}.track,.fill{block-size:var(--mod-progress-circle-size,var(--_spectrum-progress-circle-size));border-radius:var(--mod-progress-circle-size,var(--_spectrum-progress-circle-size));inline-size:var(--mod-progress-circle-size,var(--_spectrum-progress-circle-size))}:host([indeterminate]) .fills,:host([indeterminate]) .fillSubMask1,:host([indeterminate]) .fillSubMask2{animation-duration:var(--spectrum-animation-duration-2000)}\n`;\nexport default styles;"],
4
+ "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n .fill-submask-2{animation:1s linear infinite b}@keyframes a{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(0)}11.86%{transform:rotate(0)}13.56%{transform:rotate(0)}15.25%{transform:rotate(0)}16.95%{transform:rotate(0)}18.64%{transform:rotate(0)}20.34%{transform:rotate(0)}22.03%{transform:rotate(0)}23.73%{transform:rotate(0)}25.42%{transform:rotate(0)}27.12%{transform:rotate(0)}28.81%{transform:rotate(0)}30.51%{transform:rotate(0)}32.2%{transform:rotate(0)}33.9%{transform:rotate(0)}35.59%{transform:rotate(0)}37.29%{transform:rotate(0)}38.98%{transform:rotate(0)}40.68%{transform:rotate(0)}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 b{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 c{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-accent-content-color-default);--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)}: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{position:var(--mod-progress-circle-position,relative);direction:ltr;display:inline-block;transform:translateZ(0)}:host,.track{inline-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size));block-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size))}.track{box-sizing:border-box;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));border-radius: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))}.fills{inline-size:100%;block-size:100%;position:absolute;inset-block-start:0;inset-inline-start:0}.fill{box-sizing:border-box;inline-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size));block-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size));border-style:solid;border-width:var(--mod-progress-circle-thickness,var(--spectrum-progress-circle-thickness));border-radius: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)))}:host([static-color=white]) .track{border-color:var(--mod-progress-circle-track-border-color-over-background,var(--spectrum-progress-circle-track-border-color-over-background))}:host([static-color=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{inline-size:50%;block-size:100%;transform-origin:100%;position:absolute;overflow:hidden;transform:rotate(180deg)}.fillSubMask1,.fillSubMask2{inline-size:100%;block-size:100%;transform-origin:100%;overflow:hidden;transform:rotate(-180deg)}.fillMask2{transform:rotate(0)}:host([indeterminate]) .fills{will-change:transform;transform-origin:50%;animation:1s cubic-bezier(.25,.78,.48,.89) infinite c;transform:translateZ(0)}:host([indeterminate]) .fillSubMask1{will-change:transform;animation:1s linear infinite a;transform:translateZ(0)}:host([indeterminate]) .fillSubMask2{will-change:transform;animation:1s linear infinite b;transform:translateZ(0)}:host{block-size:var(--mod-progress-circle-size,var(--_spectrum-progress-circle-size));inline-size:var(--mod-progress-circle-size,var(--_spectrum-progress-circle-size));--spectrum-progress-circle-size:inherit;--spectrum-progresscircle-m-over-background-track-fill-color:var(--spectrum-alias-track-fill-color-overbackground);--_spectrum-progress-circle-size:var(--spectrum-progress-circle-size,var(--spectrum-progress-circle-size-medium))}:host([size=s]){--_spectrum-progress-circle-size:var(--spectrum-progress-circle-size,var(--spectrum-progress-circle-size-small))}:host([size=l]){--_spectrum-progress-circle-size:var(--spectrum-progress-circle-size,var(--spectrum-progress-circle-size-large))}slot{display:none}.track,.fill{block-size:var(--mod-progress-circle-size,var(--_spectrum-progress-circle-size));border-radius:var(--mod-progress-circle-size,var(--_spectrum-progress-circle-size));inline-size:var(--mod-progress-circle-size,var(--_spectrum-progress-circle-size))}:host([indeterminate]) .fills,:host([indeterminate]) .fillSubMask1,:host([indeterminate]) .fillSubMask2{animation-duration:var(--spectrum-animation-duration-2000)}\n`;\nexport default styles;"],
5
5
  "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
6
6
  "names": ["css", "styles"]
7
7
  }
package/src/spectrum-config.js CHANGED
@@ -44,7 +44,7 @@ const config = {
44
44
  ),
45
45
  ...converter.enumerateAttributes(
46
46
  [['spectrum-ProgressCircle--staticWhite', 'white']],
47
- 'static'
47
+ 'static-color'
48
48
  ),
49
49
  converter.classToClass('spectrum-ProgressCircle-track'),
50
50
  converter.classToClass('spectrum-ProgressCircle-fills'),
package/src/spectrum-progress-circle.css.dev.js CHANGED
@@ -1,7 +1,7 @@
1
1
  "use strict";
2
2
  import { css } from "@spectrum-web-components/base";
3
3
  const styles = css`
4
- .fill-submask-2{animation:1s linear infinite b}@keyframes a{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(0)}11.86%{transform:rotate(0)}13.56%{transform:rotate(0)}15.25%{transform:rotate(0)}16.95%{transform:rotate(0)}18.64%{transform:rotate(0)}20.34%{transform:rotate(0)}22.03%{transform:rotate(0)}23.73%{transform:rotate(0)}25.42%{transform:rotate(0)}27.12%{transform:rotate(0)}28.81%{transform:rotate(0)}30.51%{transform:rotate(0)}32.2%{transform:rotate(0)}33.9%{transform:rotate(0)}35.59%{transform:rotate(0)}37.29%{transform:rotate(0)}38.98%{transform:rotate(0)}40.68%{transform:rotate(0)}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 b{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 c{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-accent-content-color-default);--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)}: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{position:var(--mod-progress-circle-position,relative);direction:ltr;display:inline-block;transform:translateZ(0)}:host,.track{inline-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size));block-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size))}.track{box-sizing:border-box;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));border-radius: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))}.fills{inline-size:100%;block-size:100%;position:absolute;inset-block-start:0;inset-inline-start:0}.fill{box-sizing:border-box;inline-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size));block-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size));border-style:solid;border-width:var(--mod-progress-circle-thickness,var(--spectrum-progress-circle-thickness));border-radius: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)))}: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{inline-size:50%;block-size:100%;transform-origin:100%;position:absolute;overflow:hidden;transform:rotate(180deg)}.fillSubMask1,.fillSubMask2{inline-size:100%;block-size:100%;transform-origin:100%;overflow:hidden;transform:rotate(-180deg)}.fillMask2{transform:rotate(0)}:host([indeterminate]) .fills{will-change:transform;transform-origin:50%;animation:1s cubic-bezier(.25,.78,.48,.89) infinite c;transform:translateZ(0)}:host([indeterminate]) .fillSubMask1{will-change:transform;animation:1s linear infinite a;transform:translateZ(0)}:host([indeterminate]) .fillSubMask2{will-change:transform;animation:1s linear infinite b;transform:translateZ(0)}
4
+ .fill-submask-2{animation:1s linear infinite b}@keyframes a{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(0)}11.86%{transform:rotate(0)}13.56%{transform:rotate(0)}15.25%{transform:rotate(0)}16.95%{transform:rotate(0)}18.64%{transform:rotate(0)}20.34%{transform:rotate(0)}22.03%{transform:rotate(0)}23.73%{transform:rotate(0)}25.42%{transform:rotate(0)}27.12%{transform:rotate(0)}28.81%{transform:rotate(0)}30.51%{transform:rotate(0)}32.2%{transform:rotate(0)}33.9%{transform:rotate(0)}35.59%{transform:rotate(0)}37.29%{transform:rotate(0)}38.98%{transform:rotate(0)}40.68%{transform:rotate(0)}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 b{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 c{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-accent-content-color-default);--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)}: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{position:var(--mod-progress-circle-position,relative);direction:ltr;display:inline-block;transform:translateZ(0)}:host,.track{inline-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size));block-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size))}.track{box-sizing:border-box;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));border-radius: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))}.fills{inline-size:100%;block-size:100%;position:absolute;inset-block-start:0;inset-inline-start:0}.fill{box-sizing:border-box;inline-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size));block-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size));border-style:solid;border-width:var(--mod-progress-circle-thickness,var(--spectrum-progress-circle-thickness));border-radius: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)))}:host([static-color=white]) .track{border-color:var(--mod-progress-circle-track-border-color-over-background,var(--spectrum-progress-circle-track-border-color-over-background))}:host([static-color=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{inline-size:50%;block-size:100%;transform-origin:100%;position:absolute;overflow:hidden;transform:rotate(180deg)}.fillSubMask1,.fillSubMask2{inline-size:100%;block-size:100%;transform-origin:100%;overflow:hidden;transform:rotate(-180deg)}.fillMask2{transform:rotate(0)}:host([indeterminate]) .fills{will-change:transform;transform-origin:50%;animation:1s cubic-bezier(.25,.78,.48,.89) infinite c;transform:translateZ(0)}:host([indeterminate]) .fillSubMask1{will-change:transform;animation:1s linear infinite a;transform:translateZ(0)}:host([indeterminate]) .fillSubMask2{will-change:transform;animation:1s linear infinite b;transform:translateZ(0)}
5
5
  `;
6
6
  export default styles;
7
7
  //# sourceMappingURL=spectrum-progress-circle.css.dev.js.map
package/src/spectrum-progress-circle.css.dev.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["spectrum-progress-circle.css.ts"],
4
- "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n .fill-submask-2{animation:1s linear infinite b}@keyframes a{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(0)}11.86%{transform:rotate(0)}13.56%{transform:rotate(0)}15.25%{transform:rotate(0)}16.95%{transform:rotate(0)}18.64%{transform:rotate(0)}20.34%{transform:rotate(0)}22.03%{transform:rotate(0)}23.73%{transform:rotate(0)}25.42%{transform:rotate(0)}27.12%{transform:rotate(0)}28.81%{transform:rotate(0)}30.51%{transform:rotate(0)}32.2%{transform:rotate(0)}33.9%{transform:rotate(0)}35.59%{transform:rotate(0)}37.29%{transform:rotate(0)}38.98%{transform:rotate(0)}40.68%{transform:rotate(0)}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 b{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 c{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-accent-content-color-default);--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)}: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{position:var(--mod-progress-circle-position,relative);direction:ltr;display:inline-block;transform:translateZ(0)}:host,.track{inline-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size));block-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size))}.track{box-sizing:border-box;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));border-radius: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))}.fills{inline-size:100%;block-size:100%;position:absolute;inset-block-start:0;inset-inline-start:0}.fill{box-sizing:border-box;inline-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size));block-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size));border-style:solid;border-width:var(--mod-progress-circle-thickness,var(--spectrum-progress-circle-thickness));border-radius: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)))}: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{inline-size:50%;block-size:100%;transform-origin:100%;position:absolute;overflow:hidden;transform:rotate(180deg)}.fillSubMask1,.fillSubMask2{inline-size:100%;block-size:100%;transform-origin:100%;overflow:hidden;transform:rotate(-180deg)}.fillMask2{transform:rotate(0)}:host([indeterminate]) .fills{will-change:transform;transform-origin:50%;animation:1s cubic-bezier(.25,.78,.48,.89) infinite c;transform:translateZ(0)}:host([indeterminate]) .fillSubMask1{will-change:transform;animation:1s linear infinite a;transform:translateZ(0)}:host([indeterminate]) .fillSubMask2{will-change:transform;animation:1s linear infinite b;transform:translateZ(0)}\n`;\nexport default styles;"],
4
+ "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n .fill-submask-2{animation:1s linear infinite b}@keyframes a{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(0)}11.86%{transform:rotate(0)}13.56%{transform:rotate(0)}15.25%{transform:rotate(0)}16.95%{transform:rotate(0)}18.64%{transform:rotate(0)}20.34%{transform:rotate(0)}22.03%{transform:rotate(0)}23.73%{transform:rotate(0)}25.42%{transform:rotate(0)}27.12%{transform:rotate(0)}28.81%{transform:rotate(0)}30.51%{transform:rotate(0)}32.2%{transform:rotate(0)}33.9%{transform:rotate(0)}35.59%{transform:rotate(0)}37.29%{transform:rotate(0)}38.98%{transform:rotate(0)}40.68%{transform:rotate(0)}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 b{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 c{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-accent-content-color-default);--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)}: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{position:var(--mod-progress-circle-position,relative);direction:ltr;display:inline-block;transform:translateZ(0)}:host,.track{inline-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size));block-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size))}.track{box-sizing:border-box;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));border-radius: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))}.fills{inline-size:100%;block-size:100%;position:absolute;inset-block-start:0;inset-inline-start:0}.fill{box-sizing:border-box;inline-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size));block-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size));border-style:solid;border-width:var(--mod-progress-circle-thickness,var(--spectrum-progress-circle-thickness));border-radius: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)))}:host([static-color=white]) .track{border-color:var(--mod-progress-circle-track-border-color-over-background,var(--spectrum-progress-circle-track-border-color-over-background))}:host([static-color=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{inline-size:50%;block-size:100%;transform-origin:100%;position:absolute;overflow:hidden;transform:rotate(180deg)}.fillSubMask1,.fillSubMask2{inline-size:100%;block-size:100%;transform-origin:100%;overflow:hidden;transform:rotate(-180deg)}.fillMask2{transform:rotate(0)}:host([indeterminate]) .fills{will-change:transform;transform-origin:50%;animation:1s cubic-bezier(.25,.78,.48,.89) infinite c;transform:translateZ(0)}:host([indeterminate]) .fillSubMask1{will-change:transform;animation:1s linear infinite a;transform:translateZ(0)}:host([indeterminate]) .fillSubMask2{will-change:transform;animation:1s linear infinite b;transform:translateZ(0)}\n`;\nexport default styles;"],
5
5
  "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
6
6
  "names": []
7
7
  }
package/src/spectrum-progress-circle.css.js CHANGED
@@ -1,4 +1,4 @@
1
1
  "use strict";import{css as r}from"@spectrum-web-components/base";const t=r`
2
- .fill-submask-2{animation:1s linear infinite b}@keyframes a{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(0)}11.86%{transform:rotate(0)}13.56%{transform:rotate(0)}15.25%{transform:rotate(0)}16.95%{transform:rotate(0)}18.64%{transform:rotate(0)}20.34%{transform:rotate(0)}22.03%{transform:rotate(0)}23.73%{transform:rotate(0)}25.42%{transform:rotate(0)}27.12%{transform:rotate(0)}28.81%{transform:rotate(0)}30.51%{transform:rotate(0)}32.2%{transform:rotate(0)}33.9%{transform:rotate(0)}35.59%{transform:rotate(0)}37.29%{transform:rotate(0)}38.98%{transform:rotate(0)}40.68%{transform:rotate(0)}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 b{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 c{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-accent-content-color-default);--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)}: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{position:var(--mod-progress-circle-position,relative);direction:ltr;display:inline-block;transform:translateZ(0)}:host,.track{inline-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size));block-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size))}.track{box-sizing:border-box;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));border-radius: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))}.fills{inline-size:100%;block-size:100%;position:absolute;inset-block-start:0;inset-inline-start:0}.fill{box-sizing:border-box;inline-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size));block-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size));border-style:solid;border-width:var(--mod-progress-circle-thickness,var(--spectrum-progress-circle-thickness));border-radius: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)))}: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{inline-size:50%;block-size:100%;transform-origin:100%;position:absolute;overflow:hidden;transform:rotate(180deg)}.fillSubMask1,.fillSubMask2{inline-size:100%;block-size:100%;transform-origin:100%;overflow:hidden;transform:rotate(-180deg)}.fillMask2{transform:rotate(0)}:host([indeterminate]) .fills{will-change:transform;transform-origin:50%;animation:1s cubic-bezier(.25,.78,.48,.89) infinite c;transform:translateZ(0)}:host([indeterminate]) .fillSubMask1{will-change:transform;animation:1s linear infinite a;transform:translateZ(0)}:host([indeterminate]) .fillSubMask2{will-change:transform;animation:1s linear infinite b;transform:translateZ(0)}
2
+ .fill-submask-2{animation:1s linear infinite b}@keyframes a{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(0)}11.86%{transform:rotate(0)}13.56%{transform:rotate(0)}15.25%{transform:rotate(0)}16.95%{transform:rotate(0)}18.64%{transform:rotate(0)}20.34%{transform:rotate(0)}22.03%{transform:rotate(0)}23.73%{transform:rotate(0)}25.42%{transform:rotate(0)}27.12%{transform:rotate(0)}28.81%{transform:rotate(0)}30.51%{transform:rotate(0)}32.2%{transform:rotate(0)}33.9%{transform:rotate(0)}35.59%{transform:rotate(0)}37.29%{transform:rotate(0)}38.98%{transform:rotate(0)}40.68%{transform:rotate(0)}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 b{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 c{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-accent-content-color-default);--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)}: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{position:var(--mod-progress-circle-position,relative);direction:ltr;display:inline-block;transform:translateZ(0)}:host,.track{inline-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size));block-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size))}.track{box-sizing:border-box;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));border-radius: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))}.fills{inline-size:100%;block-size:100%;position:absolute;inset-block-start:0;inset-inline-start:0}.fill{box-sizing:border-box;inline-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size));block-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size));border-style:solid;border-width:var(--mod-progress-circle-thickness,var(--spectrum-progress-circle-thickness));border-radius: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)))}:host([static-color=white]) .track{border-color:var(--mod-progress-circle-track-border-color-over-background,var(--spectrum-progress-circle-track-border-color-over-background))}:host([static-color=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{inline-size:50%;block-size:100%;transform-origin:100%;position:absolute;overflow:hidden;transform:rotate(180deg)}.fillSubMask1,.fillSubMask2{inline-size:100%;block-size:100%;transform-origin:100%;overflow:hidden;transform:rotate(-180deg)}.fillMask2{transform:rotate(0)}:host([indeterminate]) .fills{will-change:transform;transform-origin:50%;animation:1s cubic-bezier(.25,.78,.48,.89) infinite c;transform:translateZ(0)}:host([indeterminate]) .fillSubMask1{will-change:transform;animation:1s linear infinite a;transform:translateZ(0)}:host([indeterminate]) .fillSubMask2{will-change:transform;animation:1s linear infinite b;transform:translateZ(0)}
3
3
  `;export default t;
4
4
  //# sourceMappingURL=spectrum-progress-circle.css.js.map
package/src/spectrum-progress-circle.css.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["spectrum-progress-circle.css.ts"],
4
- "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n .fill-submask-2{animation:1s linear infinite b}@keyframes a{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(0)}11.86%{transform:rotate(0)}13.56%{transform:rotate(0)}15.25%{transform:rotate(0)}16.95%{transform:rotate(0)}18.64%{transform:rotate(0)}20.34%{transform:rotate(0)}22.03%{transform:rotate(0)}23.73%{transform:rotate(0)}25.42%{transform:rotate(0)}27.12%{transform:rotate(0)}28.81%{transform:rotate(0)}30.51%{transform:rotate(0)}32.2%{transform:rotate(0)}33.9%{transform:rotate(0)}35.59%{transform:rotate(0)}37.29%{transform:rotate(0)}38.98%{transform:rotate(0)}40.68%{transform:rotate(0)}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 b{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 c{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-accent-content-color-default);--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)}: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{position:var(--mod-progress-circle-position,relative);direction:ltr;display:inline-block;transform:translateZ(0)}:host,.track{inline-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size));block-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size))}.track{box-sizing:border-box;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));border-radius: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))}.fills{inline-size:100%;block-size:100%;position:absolute;inset-block-start:0;inset-inline-start:0}.fill{box-sizing:border-box;inline-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size));block-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size));border-style:solid;border-width:var(--mod-progress-circle-thickness,var(--spectrum-progress-circle-thickness));border-radius: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)))}: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{inline-size:50%;block-size:100%;transform-origin:100%;position:absolute;overflow:hidden;transform:rotate(180deg)}.fillSubMask1,.fillSubMask2{inline-size:100%;block-size:100%;transform-origin:100%;overflow:hidden;transform:rotate(-180deg)}.fillMask2{transform:rotate(0)}:host([indeterminate]) .fills{will-change:transform;transform-origin:50%;animation:1s cubic-bezier(.25,.78,.48,.89) infinite c;transform:translateZ(0)}:host([indeterminate]) .fillSubMask1{will-change:transform;animation:1s linear infinite a;transform:translateZ(0)}:host([indeterminate]) .fillSubMask2{will-change:transform;animation:1s linear infinite b;transform:translateZ(0)}\n`;\nexport default styles;"],
4
+ "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n .fill-submask-2{animation:1s linear infinite b}@keyframes a{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(0)}11.86%{transform:rotate(0)}13.56%{transform:rotate(0)}15.25%{transform:rotate(0)}16.95%{transform:rotate(0)}18.64%{transform:rotate(0)}20.34%{transform:rotate(0)}22.03%{transform:rotate(0)}23.73%{transform:rotate(0)}25.42%{transform:rotate(0)}27.12%{transform:rotate(0)}28.81%{transform:rotate(0)}30.51%{transform:rotate(0)}32.2%{transform:rotate(0)}33.9%{transform:rotate(0)}35.59%{transform:rotate(0)}37.29%{transform:rotate(0)}38.98%{transform:rotate(0)}40.68%{transform:rotate(0)}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 b{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 c{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-accent-content-color-default);--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)}: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{position:var(--mod-progress-circle-position,relative);direction:ltr;display:inline-block;transform:translateZ(0)}:host,.track{inline-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size));block-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size))}.track{box-sizing:border-box;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));border-radius: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))}.fills{inline-size:100%;block-size:100%;position:absolute;inset-block-start:0;inset-inline-start:0}.fill{box-sizing:border-box;inline-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size));block-size:var(--mod-progress-circle-size,var(--spectrum-progress-circle-size));border-style:solid;border-width:var(--mod-progress-circle-thickness,var(--spectrum-progress-circle-thickness));border-radius: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)))}:host([static-color=white]) .track{border-color:var(--mod-progress-circle-track-border-color-over-background,var(--spectrum-progress-circle-track-border-color-over-background))}:host([static-color=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{inline-size:50%;block-size:100%;transform-origin:100%;position:absolute;overflow:hidden;transform:rotate(180deg)}.fillSubMask1,.fillSubMask2{inline-size:100%;block-size:100%;transform-origin:100%;overflow:hidden;transform:rotate(-180deg)}.fillMask2{transform:rotate(0)}:host([indeterminate]) .fills{will-change:transform;transform-origin:50%;animation:1s cubic-bezier(.25,.78,.48,.89) infinite c;transform:translateZ(0)}:host([indeterminate]) .fillSubMask1{will-change:transform;animation:1s linear infinite a;transform:translateZ(0)}:host([indeterminate]) .fillSubMask2{will-change:transform;animation:1s linear infinite b;transform:translateZ(0)}\n`;\nexport default styles;"],
5
5
  "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
6
6
  "names": ["css", "styles"]
7
7
  }
package/stories/progress-circle.stories.js CHANGED
@@ -57,20 +57,20 @@ export const staticWhite = ({
57
57
  >
58
58
  <sp-progress-circle
59
59
  progress="53"
60
- static="white"
60
+ static-color="white"
61
61
  size="s"
62
62
  ?indeterminate=${indeterminate}
63
63
  label="Loading progress demo"
64
64
  ></sp-progress-circle>
65
65
  <sp-progress-circle
66
66
  progress="53"
67
- static="white"
67
+ static-color="white"
68
68
  ?indeterminate=${indeterminate}
69
69
  label="Loading progress demo"
70
70
  ></sp-progress-circle>
71
71
  <sp-progress-circle
72
72
  progress="53"
73
- static="white"
73
+ static-color="white"
74
74
  size="l"
75
75
  ?indeterminate=${indeterminate}
76
76
  label="Loading progress demo"
@@ -93,7 +93,7 @@ export const inButton = ({
93
93
  <sp-button variant="black" style="color: white">
94
94
  <sp-progress-circle
95
95
  progress="53"
96
- static="white"
96
+ static-color="white"
97
97
  size="s"
98
98
  ?indeterminate=${indeterminate}
99
99
  slot="icon"
package/stories/progress-circle.stories.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["progress-circle.stories.ts"],
4
- "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '@spectrum-web-components/progress-circle/sp-progress-circle.js';\nimport '@spectrum-web-components/button/sp-button.js';\n\nexport default {\n title: 'Progress Circle',\n component: 'sp-progress-circle',\n argTypes: {\n indeterminate: {\n name: 'indeterminate',\n type: { name: 'boolean', required: false },\n description: 'Whether the progress is indeterminate.',\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n },\n};\n\ninterface StoryArgs {\n indeterminate?: boolean;\n}\n\nexport const Default = ({ indeterminate }: StoryArgs = {}): TemplateResult => {\n return html`\n <div\n style=\"width: 250px; height: 150px; display: flex; align-items: center; justify-content: space-around;\"\n >\n <sp-progress-circle\n progress=\"27\"\n size=\"s\"\n ?indeterminate=${indeterminate}\n label=\"Loading progress demo\"\n ></sp-progress-circle>\n <sp-progress-circle\n progress=\"27\"\n ?indeterminate=${indeterminate}\n label=\"Loading progress demo\"\n ></sp-progress-circle>\n <sp-progress-circle\n progress=\"27\"\n size=\"l\"\n ?indeterminate=${indeterminate}\n label=\"Loading progress demo\"\n ></sp-progress-circle>\n </div>\n `;\n};\nDefault.args = {\n indeterminate: false,\n};\n\nexport const staticWhite = ({\n indeterminate,\n}: StoryArgs = {}): TemplateResult => {\n return html`\n <div\n style=\"width: 250px; height: 150px; background-color: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: space-around;\"\n >\n <sp-progress-circle\n progress=\"53\"\n static=\"white\"\n size=\"s\"\n ?indeterminate=${indeterminate}\n label=\"Loading progress demo\"\n ></sp-progress-circle>\n <sp-progress-circle\n progress=\"53\"\n static=\"white\"\n ?indeterminate=${indeterminate}\n label=\"Loading progress demo\"\n ></sp-progress-circle>\n <sp-progress-circle\n progress=\"53\"\n static=\"white\"\n size=\"l\"\n ?indeterminate=${indeterminate}\n label=\"Loading progress demo\"\n ></sp-progress-circle>\n </div>\n `;\n};\nstaticWhite.args = {\n indeterminate: false,\n};\n\nexport const inButton = ({\n indeterminate,\n}: StoryArgs = {}): TemplateResult => html`\n <style>\n sp-progress-circle[slot='icon'] {\n align-self: center;\n margin-block: 0;\n }\n </style>\n <sp-button variant=\"black\" style=\"color: white\">\n <sp-progress-circle\n progress=\"53\"\n static=\"white\"\n size=\"s\"\n ?indeterminate=${indeterminate}\n slot=\"icon\"\n label=\"Processing\"\n ></sp-progress-circle>\n Processing...\n </sp-button>\n`;\n"],
4
+ "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '@spectrum-web-components/progress-circle/sp-progress-circle.js';\nimport '@spectrum-web-components/button/sp-button.js';\n\nexport default {\n title: 'Progress Circle',\n component: 'sp-progress-circle',\n argTypes: {\n indeterminate: {\n name: 'indeterminate',\n type: { name: 'boolean', required: false },\n description: 'Whether the progress is indeterminate.',\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n },\n};\n\ninterface StoryArgs {\n indeterminate?: boolean;\n}\n\nexport const Default = ({ indeterminate }: StoryArgs = {}): TemplateResult => {\n return html`\n <div\n style=\"width: 250px; height: 150px; display: flex; align-items: center; justify-content: space-around;\"\n >\n <sp-progress-circle\n progress=\"27\"\n size=\"s\"\n ?indeterminate=${indeterminate}\n label=\"Loading progress demo\"\n ></sp-progress-circle>\n <sp-progress-circle\n progress=\"27\"\n ?indeterminate=${indeterminate}\n label=\"Loading progress demo\"\n ></sp-progress-circle>\n <sp-progress-circle\n progress=\"27\"\n size=\"l\"\n ?indeterminate=${indeterminate}\n label=\"Loading progress demo\"\n ></sp-progress-circle>\n </div>\n `;\n};\nDefault.args = {\n indeterminate: false,\n};\n\nexport const staticWhite = ({\n indeterminate,\n}: StoryArgs = {}): TemplateResult => {\n return html`\n <div\n style=\"width: 250px; height: 150px; background-color: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: space-around;\"\n >\n <sp-progress-circle\n progress=\"53\"\n static-color=\"white\"\n size=\"s\"\n ?indeterminate=${indeterminate}\n label=\"Loading progress demo\"\n ></sp-progress-circle>\n <sp-progress-circle\n progress=\"53\"\n static-color=\"white\"\n ?indeterminate=${indeterminate}\n label=\"Loading progress demo\"\n ></sp-progress-circle>\n <sp-progress-circle\n progress=\"53\"\n static-color=\"white\"\n size=\"l\"\n ?indeterminate=${indeterminate}\n label=\"Loading progress demo\"\n ></sp-progress-circle>\n </div>\n `;\n};\nstaticWhite.args = {\n indeterminate: false,\n};\n\nexport const inButton = ({\n indeterminate,\n}: StoryArgs = {}): TemplateResult => html`\n <style>\n sp-progress-circle[slot='icon'] {\n align-self: center;\n margin-block: 0;\n }\n </style>\n <sp-button variant=\"black\" style=\"color: white\">\n <sp-progress-circle\n progress=\"53\"\n static-color=\"white\"\n size=\"s\"\n ?indeterminate=${indeterminate}\n slot=\"icon\"\n label=\"Processing\"\n ></sp-progress-circle>\n Processing...\n </sp-button>\n`;\n"],
5
5
  "mappings": ";AAYA,SAAS,YAA4B;AAErC,OAAO;AACP,OAAO;AAEP,eAAe;AAAA,EACX,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,IACN,eAAe;AAAA,MACX,MAAM;AAAA,MACN,MAAM,EAAE,MAAM,WAAW,UAAU,MAAM;AAAA,MACzC,aAAa;AAAA,MACb,OAAO;AAAA,QACH,MAAM,EAAE,SAAS,UAAU;AAAA,QAC3B,cAAc,EAAE,SAAS,MAAM;AAAA,MACnC;AAAA,MACA,SAAS;AAAA,QACL,MAAM;AAAA,MACV;AAAA,IACJ;AAAA,EACJ;AACJ;AAMO,aAAM,UAAU,CAAC,EAAE,cAAc,IAAe,CAAC,MAAsB;AAC1E,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iCAOsB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA,iCAKb,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iCAMb,aAAa;AAAA;AAAA;AAAA;AAAA;AAK9C;AACA,QAAQ,OAAO;AAAA,EACX,eAAe;AACnB;AAEO,aAAM,cAAc,CAAC;AAAA,EACxB;AACJ,IAAe,CAAC,MAAsB;AAClC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iCAQsB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iCAMb,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iCAOb,aAAa;AAAA;AAAA;AAAA;AAAA;AAK9C;AACA,YAAY,OAAO;AAAA,EACf,eAAe;AACnB;AAEO,aAAM,WAAW,CAAC;AAAA,EACrB;AACJ,IAAe,CAAC,MAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAYT,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
6
6
  "names": []
7
7
  }
package/test/progress-circle.test.js CHANGED
@@ -41,6 +41,30 @@ describe("ProgressCircle", () => {
41
41
  }
42
42
  });
43
43
  });
44
+ it("warns in Dev Mode when static attribute is supplied", async () => {
45
+ const el = await fixture(html`
46
+ <sp-progress-circle
47
+ progress="50"
48
+ static="white"
49
+ ></sp-progress-circle>
50
+ `);
51
+ await elementUpdated(el);
52
+ expect(consoleWarnStub.called).to.be.true;
53
+ const spyCall = consoleWarnStub.getCall(0);
54
+ expect(
55
+ spyCall.args.at(0).includes(
56
+ 'element will stop accepting the "static" attribute'
57
+ ),
58
+ "confirm attribute deprecation message"
59
+ ).to.be.true;
60
+ expect(spyCall.args.at(-1), "confirm `data` shape").to.deep.equal({
61
+ data: {
62
+ localName: "sp-progress-circle",
63
+ type: "api",
64
+ level: "deprecation"
65
+ }
66
+ });
67
+ });
44
68
  it("warns in Dev Mode when overBackground attribute is supplied", async () => {
45
69
  const el = await fixture(html`
46
70
  <sp-progress-circle
@@ -145,5 +169,20 @@ describe("ProgressCircle", () => {
145
169
  expect(el.hasAttribute("aria-label")).to.be.true;
146
170
  expect(el.getAttribute("aria-label")).to.equal("Loading");
147
171
  });
172
+ it("prefers `staticColor` over `static`", async () => {
173
+ const el = await fixture(html`
174
+ <sp-progress-circle
175
+ progress="50"
176
+ static="white"
177
+ ></sp-progress-circle>
178
+ `);
179
+ await elementUpdated(el);
180
+ expect(el.staticColor).to.equal("white");
181
+ el.setAttribute("static", "white");
182
+ await elementUpdated(el);
183
+ expect(el.staticColor).to.equal("white");
184
+ expect(el.static).to.equal("white");
185
+ expect(el.getAttribute("static-color")).to.equal("white");
186
+ });
148
187
  });
149
188
  //# sourceMappingURL=progress-circle.test.js.map
package/test/progress-circle.test.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["progress-circle.test.ts"],
4
- "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { elementUpdated, expect, fixture, html } from '@open-wc/testing';\n\nimport '@spectrum-web-components/progress-circle/sp-progress-circle.js';\nimport { ProgressCircle } from '@spectrum-web-components/progress-circle';\nimport { stub } from 'sinon';\nimport { testForLitDevWarnings } from '../../../test/testing-helpers.js';\n\ndescribe('ProgressCircle', () => {\n testForLitDevWarnings(\n async () =>\n await fixture<ProgressCircle>(html`\n <sp-progress-circle label=\"Loading\"></sp-progress-circle>\n `)\n );\n describe('dev mode', () => {\n let consoleWarnStub!: ReturnType<typeof stub>;\n before(() => {\n window.__swc.verbose = true;\n consoleWarnStub = stub(console, 'warn');\n });\n afterEach(() => {\n consoleWarnStub.resetHistory();\n });\n after(() => {\n window.__swc.verbose = false;\n consoleWarnStub.restore();\n });\n\n it('warns in Dev Mode when accessible attributes are not leveraged', async () => {\n const el = await fixture<ProgressCircle>(html`\n <sp-progress-circle progress=\"50\"></sp-progress-circle>\n `);\n\n await elementUpdated(el);\n\n expect(consoleWarnStub.called).to.be.true;\n const spyCall = consoleWarnStub.getCall(0);\n expect(\n (spyCall.args.at(0) as string).includes('accessible'),\n 'confirm accessibility-centric message'\n ).to.be.true;\n expect(spyCall.args.at(-1), 'confirm `data` shape').to.deep.equal({\n data: {\n localName: 'sp-progress-circle',\n type: 'accessibility',\n level: 'default',\n },\n });\n });\n it('warns in Dev Mode when overBackground attribute is supplied', async () => {\n const el = await fixture<ProgressCircle>(html`\n <sp-progress-circle\n progress=\"50\"\n ?over-background=${true}\n ></sp-progress-circle>\n `);\n\n await elementUpdated(el);\n\n expect(consoleWarnStub.called).to.be.true;\n const spyCall = consoleWarnStub.getCall(0);\n expect(\n (spyCall.args.at(0) as string).includes(\n 'element will stop accepting the \"over-background\" attribute'\n ),\n 'confirm attribute deprecation message'\n ).to.be.true;\n expect(spyCall.args.at(-1), 'confirm `data` shape').to.deep.equal({\n data: {\n localName: 'sp-progress-circle',\n type: 'api',\n level: 'deprecation',\n },\n });\n });\n });\n it('loads', async () => {\n const el = await fixture<ProgressCircle>(html`\n <sp-progress-circle label=\"Loading\"></sp-progress-circle>\n `);\n\n await elementUpdated(el);\n expect(el).to.not.be.undefined;\n\n await expect(el).to.be.accessible();\n });\n it('loads - [indeterminate]', async () => {\n const el = await fixture<ProgressCircle>(html`\n <sp-progress-circle\n indeterminate\n label=\"Loading\"\n ></sp-progress-circle>\n `);\n\n await elementUpdated(el);\n expect(el).to.not.be.undefined;\n\n await expect(el).to.be.accessible();\n });\n it('accepts label from `slot`', async () => {\n const el = await fixture<ProgressCircle>(html`\n <sp-progress-circle role=\"progressbar\">\n Label From Slot\n </sp-progress-circle>\n `);\n\n await elementUpdated(el);\n\n expect(el.getAttribute('aria-label')).to.equal('Label From Slot');\n });\n it('accepts user `role`', async () => {\n const el = await fixture<ProgressCircle>(html`\n <sp-progress-circle\n role=\"progressbar\"\n label=\"With user role\"\n ></sp-progress-circle>\n `);\n\n await elementUpdated(el);\n\n expect(el.getAttribute('role')).to.equal('progressbar');\n });\n it('returns to indeterminate', async () => {\n const el = await fixture<ProgressCircle>(html`\n <sp-progress-circle\n progress=\"50\"\n label=\"Will be indeterminate\"\n ></sp-progress-circle>\n `);\n\n await elementUpdated(el);\n\n expect(el.hasAttribute('aria-valuenow')).to.be.true;\n expect(el.getAttribute('aria-valuenow')).to.equal('50');\n\n el.indeterminate = true;\n\n await elementUpdated(el);\n\n expect(el.hasAttribute('aria-valuenow')).to.be.false;\n });\n it('accepts `aria-label`', async () => {\n const el = await fixture<ProgressCircle>(html`\n <sp-progress-circle aria-label=\"Loading\"></sp-progress-circle>\n `);\n\n await elementUpdated(el);\n\n expect(el.hasAttribute('aria-label')).to.be.true;\n expect(el.getAttribute('aria-label')).to.equal('Loading');\n });\n it('sets `aria-label` to equal `label` if `label` is set', async () => {\n const el = await fixture<ProgressCircle>(html`\n <sp-progress-circle label=\"Loading\"></sp-progress-circle>\n `);\n\n await elementUpdated(el);\n\n expect(el.hasAttribute('aria-label')).to.be.true;\n expect(el.getAttribute('aria-label')).to.equal('Loading');\n });\n it('does not remove `aria-label` if set independently of `label`', async () => {\n const el = await fixture<ProgressCircle>(html`\n <sp-progress-circle\n label=\"\"\n aria-label=\"Loading\"\n ></sp-progress-circle>\n `);\n\n await elementUpdated(el);\n\n expect(el.hasAttribute('aria-label')).to.be.true;\n expect(el.getAttribute('aria-label')).to.equal('Loading');\n });\n});\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { elementUpdated, expect, fixture, html } from '@open-wc/testing';\n\nimport '@spectrum-web-components/progress-circle/sp-progress-circle.js';\nimport { ProgressCircle } from '@spectrum-web-components/progress-circle';\nimport { stub } from 'sinon';\nimport { testForLitDevWarnings } from '../../../test/testing-helpers.js';\n\ndescribe('ProgressCircle', () => {\n testForLitDevWarnings(\n async () =>\n await fixture<ProgressCircle>(html`\n <sp-progress-circle label=\"Loading\"></sp-progress-circle>\n `)\n );\n describe('dev mode', () => {\n let consoleWarnStub!: ReturnType<typeof stub>;\n before(() => {\n window.__swc.verbose = true;\n consoleWarnStub = stub(console, 'warn');\n });\n afterEach(() => {\n consoleWarnStub.resetHistory();\n });\n after(() => {\n window.__swc.verbose = false;\n consoleWarnStub.restore();\n });\n\n it('warns in Dev Mode when accessible attributes are not leveraged', async () => {\n const el = await fixture<ProgressCircle>(html`\n <sp-progress-circle progress=\"50\"></sp-progress-circle>\n `);\n\n await elementUpdated(el);\n\n expect(consoleWarnStub.called).to.be.true;\n const spyCall = consoleWarnStub.getCall(0);\n expect(\n (spyCall.args.at(0) as string).includes('accessible'),\n 'confirm accessibility-centric message'\n ).to.be.true;\n expect(spyCall.args.at(-1), 'confirm `data` shape').to.deep.equal({\n data: {\n localName: 'sp-progress-circle',\n type: 'accessibility',\n level: 'default',\n },\n });\n });\n it('warns in Dev Mode when static attribute is supplied', async () => {\n const el = await fixture<ProgressCircle>(html`\n <sp-progress-circle\n progress=\"50\"\n static=\"white\"\n ></sp-progress-circle>\n `);\n\n await elementUpdated(el);\n\n expect(consoleWarnStub.called).to.be.true;\n const spyCall = consoleWarnStub.getCall(0);\n expect(\n (spyCall.args.at(0) as string).includes(\n 'element will stop accepting the \"static\" attribute'\n ),\n 'confirm attribute deprecation message'\n ).to.be.true;\n expect(spyCall.args.at(-1), 'confirm `data` shape').to.deep.equal({\n data: {\n localName: 'sp-progress-circle',\n type: 'api',\n level: 'deprecation',\n },\n });\n });\n it('warns in Dev Mode when overBackground attribute is supplied', async () => {\n const el = await fixture<ProgressCircle>(html`\n <sp-progress-circle\n progress=\"50\"\n ?over-background=${true}\n ></sp-progress-circle>\n `);\n\n await elementUpdated(el);\n\n expect(consoleWarnStub.called).to.be.true;\n const spyCall = consoleWarnStub.getCall(0);\n expect(\n (spyCall.args.at(0) as string).includes(\n 'element will stop accepting the \"over-background\" attribute'\n ),\n 'confirm attribute deprecation message'\n ).to.be.true;\n expect(spyCall.args.at(-1), 'confirm `data` shape').to.deep.equal({\n data: {\n localName: 'sp-progress-circle',\n type: 'api',\n level: 'deprecation',\n },\n });\n });\n });\n it('loads', async () => {\n const el = await fixture<ProgressCircle>(html`\n <sp-progress-circle label=\"Loading\"></sp-progress-circle>\n `);\n\n await elementUpdated(el);\n expect(el).to.not.be.undefined;\n\n await expect(el).to.be.accessible();\n });\n it('loads - [indeterminate]', async () => {\n const el = await fixture<ProgressCircle>(html`\n <sp-progress-circle\n indeterminate\n label=\"Loading\"\n ></sp-progress-circle>\n `);\n\n await elementUpdated(el);\n expect(el).to.not.be.undefined;\n\n await expect(el).to.be.accessible();\n });\n it('accepts label from `slot`', async () => {\n const el = await fixture<ProgressCircle>(html`\n <sp-progress-circle role=\"progressbar\">\n Label From Slot\n </sp-progress-circle>\n `);\n\n await elementUpdated(el);\n\n expect(el.getAttribute('aria-label')).to.equal('Label From Slot');\n });\n it('accepts user `role`', async () => {\n const el = await fixture<ProgressCircle>(html`\n <sp-progress-circle\n role=\"progressbar\"\n label=\"With user role\"\n ></sp-progress-circle>\n `);\n\n await elementUpdated(el);\n\n expect(el.getAttribute('role')).to.equal('progressbar');\n });\n it('returns to indeterminate', async () => {\n const el = await fixture<ProgressCircle>(html`\n <sp-progress-circle\n progress=\"50\"\n label=\"Will be indeterminate\"\n ></sp-progress-circle>\n `);\n\n await elementUpdated(el);\n\n expect(el.hasAttribute('aria-valuenow')).to.be.true;\n expect(el.getAttribute('aria-valuenow')).to.equal('50');\n\n el.indeterminate = true;\n\n await elementUpdated(el);\n\n expect(el.hasAttribute('aria-valuenow')).to.be.false;\n });\n it('accepts `aria-label`', async () => {\n const el = await fixture<ProgressCircle>(html`\n <sp-progress-circle aria-label=\"Loading\"></sp-progress-circle>\n `);\n\n await elementUpdated(el);\n\n expect(el.hasAttribute('aria-label')).to.be.true;\n expect(el.getAttribute('aria-label')).to.equal('Loading');\n });\n it('sets `aria-label` to equal `label` if `label` is set', async () => {\n const el = await fixture<ProgressCircle>(html`\n <sp-progress-circle label=\"Loading\"></sp-progress-circle>\n `);\n\n await elementUpdated(el);\n\n expect(el.hasAttribute('aria-label')).to.be.true;\n expect(el.getAttribute('aria-label')).to.equal('Loading');\n });\n it('does not remove `aria-label` if set independently of `label`', async () => {\n const el = await fixture<ProgressCircle>(html`\n <sp-progress-circle\n label=\"\"\n aria-label=\"Loading\"\n ></sp-progress-circle>\n `);\n\n await elementUpdated(el);\n\n expect(el.hasAttribute('aria-label')).to.be.true;\n expect(el.getAttribute('aria-label')).to.equal('Loading');\n });\n it('prefers `staticColor` over `static`', async () => {\n const el = await fixture<ProgressCircle>(html`\n <sp-progress-circle\n progress=\"50\"\n static=\"white\"\n ></sp-progress-circle>\n `);\n\n await elementUpdated(el);\n\n expect(el.staticColor).to.equal('white');\n\n el.setAttribute('static', 'white');\n await elementUpdated(el);\n\n expect(el.staticColor).to.equal('white');\n expect(el.static).to.equal('white');\n expect(el.getAttribute('static-color')).to.equal('white');\n });\n});\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/custom-elements.json DELETED
@@ -1,185 +0,0 @@
1
- {
2
- "schemaVersion": "1.0.0",
3
- "readme": "",
4
- "modules": [
5
- {
6
- "kind": "javascript-module",
7
- "path": "sp-progress-circle.js",
8
- "declarations": [],
9
- "exports": [
10
- {
11
- "kind": "custom-element-definition",
12
- "name": "sp-progress-circle",
13
- "declaration": {
14
- "name": "ProgressCircle",
15
- "module": "/src/ProgressCircle.js"
16
- }
17
- }
18
- ]
19
- },
20
- {
21
- "kind": "javascript-module",
22
- "path": "src/ProgressCircle.js",
23
- "declarations": [
24
- {
25
- "kind": "class",
26
- "description": "",
27
- "name": "ProgressCircle",
28
- "members": [
29
- {
30
- "kind": "field",
31
- "name": "indeterminate",
32
- "type": {
33
- "text": "boolean"
34
- },
35
- "privacy": "public",
36
- "default": "false",
37
- "attribute": "indeterminate",
38
- "reflects": true
39
- },
40
- {
41
- "kind": "field",
42
- "name": "label",
43
- "type": {
44
- "text": "string"
45
- },
46
- "privacy": "public",
47
- "default": "''",
48
- "attribute": "label"
49
- },
50
- {
51
- "kind": "field",
52
- "name": "overBackground",
53
- "type": {
54
- "text": "boolean"
55
- },
56
- "privacy": "public",
57
- "default": "false",
58
- "attribute": "over-background",
59
- "reflects": true
60
- },
61
- {
62
- "kind": "field",
63
- "name": "static",
64
- "type": {
65
- "text": "'white' | undefined"
66
- },
67
- "privacy": "public",
68
- "attribute": "static",
69
- "reflects": true
70
- },
71
- {
72
- "kind": "field",
73
- "name": "progress",
74
- "type": {
75
- "text": "number"
76
- },
77
- "privacy": "public",
78
- "default": "0",
79
- "attribute": "progress"
80
- },
81
- {
82
- "kind": "field",
83
- "name": "slotEl",
84
- "type": {
85
- "text": "HTMLSlotElement"
86
- },
87
- "privacy": "private"
88
- },
89
- {
90
- "kind": "method",
91
- "name": "makeRotation",
92
- "privacy": "private",
93
- "return": {
94
- "type": {
95
- "text": "string | undefined"
96
- }
97
- },
98
- "parameters": [
99
- {
100
- "name": "rotation",
101
- "type": {
102
- "text": "number"
103
- }
104
- }
105
- ]
106
- },
107
- {
108
- "kind": "method",
109
- "name": "handleSlotchange",
110
- "privacy": "protected",
111
- "return": {
112
- "type": {
113
- "text": "void"
114
- }
115
- }
116
- }
117
- ],
118
- "attributes": [
119
- {
120
- "name": "indeterminate",
121
- "type": {
122
- "text": "boolean"
123
- },
124
- "default": "false",
125
- "fieldName": "indeterminate"
126
- },
127
- {
128
- "name": "label",
129
- "type": {
130
- "text": "string"
131
- },
132
- "default": "''",
133
- "fieldName": "label"
134
- },
135
- {
136
- "name": "over-background",
137
- "type": {
138
- "text": "boolean"
139
- },
140
- "default": "false",
141
- "fieldName": "overBackground"
142
- },
143
- {
144
- "name": "static",
145
- "type": {
146
- "text": "'white' | undefined"
147
- },
148
- "fieldName": "static"
149
- },
150
- {
151
- "name": "progress",
152
- "type": {
153
- "text": "number"
154
- },
155
- "default": "0",
156
- "fieldName": "progress"
157
- }
158
- ],
159
- "mixins": [
160
- {
161
- "name": "SizedMixin",
162
- "package": "@spectrum-web-components/base"
163
- }
164
- ],
165
- "superclass": {
166
- "name": "SpectrumElement",
167
- "package": "@spectrum-web-components/base"
168
- },
169
- "tagName": "sp-progress-circle",
170
- "customElement": true
171
- }
172
- ],
173
- "exports": [
174
- {
175
- "kind": "js",
176
- "name": "ProgressCircle",
177
- "declaration": {
178
- "name": "ProgressCircle",
179
- "module": "src/ProgressCircle.js"
180
- }
181
- }
182
- ]
183
- }
184
- ]
185
- }