@spectrum-web-components/progress-bar 0.5.13 → 0.6.0
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.
- package/custom-elements.json +3 -3
 - package/package.json +22 -9
 - package/sp-progress-bar.dev.js +3 -0
 - package/sp-progress-bar.dev.js.map +7 -0
 - package/sp-progress-bar.js +3 -14
 - package/sp-progress-bar.js.map +7 -1
 - package/src/ProgressBar.dev.js +109 -0
 - package/src/ProgressBar.dev.js.map +7 -0
 - package/src/ProgressBar.js +87 -81
 - package/src/ProgressBar.js.map +7 -1
 - package/src/index.dev.js +2 -0
 - package/src/index.dev.js.map +7 -0
 - package/src/index.js +2 -13
 - package/src/index.js.map +7 -1
 - package/src/progress-bar.css.dev.js +94 -0
 - package/src/progress-bar.css.dev.js.map +7 -0
 - package/src/progress-bar.css.js +3 -14
 - package/src/progress-bar.css.js.map +7 -1
 - package/src/spectrum-progress-bar.css.dev.js +94 -0
 - package/src/spectrum-progress-bar.css.dev.js.map +7 -0
 - package/src/spectrum-progress-bar.css.js +3 -14
 - package/src/spectrum-progress-bar.css.js.map +7 -1
 - package/stories/progress-bar-sizes.stories.js +9 -20
 - package/stories/progress-bar-sizes.stories.js.map +7 -1
 - package/stories/progress-bar.stories.js +15 -26
 - package/stories/progress-bar.stories.js.map +7 -1
 - package/test/benchmark/basic-test.js +5 -16
 - package/test/benchmark/basic-test.js.map +7 -1
 - package/test/progress-bar-sizes.test-vrt.js +4 -15
 - package/test/progress-bar-sizes.test-vrt.js.map +7 -1
 - package/test/progress-bar.test-vrt.js +4 -15
 - package/test/progress-bar.test-vrt.js.map +7 -1
 - package/test/progress-bar.test.js +70 -55
 - package/test/progress-bar.test.js.map +7 -1
 
    
        package/custom-elements.json
    CHANGED
    
    | 
         @@ -4,7 +4,7 @@ 
     | 
|
| 
       4 
4 
     | 
    
         
             
              "modules": [
         
     | 
| 
       5 
5 
     | 
    
         
             
                {
         
     | 
| 
       6 
6 
     | 
    
         
             
                  "kind": "javascript-module",
         
     | 
| 
       7 
     | 
    
         
            -
                  "path": "sp-progress-bar. 
     | 
| 
      
 7 
     | 
    
         
            +
                  "path": "sp-progress-bar.js",
         
     | 
| 
       8 
8 
     | 
    
         
             
                  "declarations": [],
         
     | 
| 
       9 
9 
     | 
    
         
             
                  "exports": [
         
     | 
| 
       10 
10 
     | 
    
         
             
                    {
         
     | 
| 
         @@ -19,7 +19,7 @@ 
     | 
|
| 
       19 
19 
     | 
    
         
             
                },
         
     | 
| 
       20 
20 
     | 
    
         
             
                {
         
     | 
| 
       21 
21 
     | 
    
         
             
                  "kind": "javascript-module",
         
     | 
| 
       22 
     | 
    
         
            -
                  "path": "src/ProgressBar. 
     | 
| 
      
 22 
     | 
    
         
            +
                  "path": "src/ProgressBar.js",
         
     | 
| 
       23 
23 
     | 
    
         
             
                  "declarations": [
         
     | 
| 
       24 
24 
     | 
    
         
             
                    {
         
     | 
| 
       25 
25 
     | 
    
         
             
                      "kind": "class",
         
     | 
| 
         @@ -142,7 +142,7 @@ 
     | 
|
| 
       142 
142 
     | 
    
         
             
                      "name": "ProgressBar",
         
     | 
| 
       143 
143 
     | 
    
         
             
                      "declaration": {
         
     | 
| 
       144 
144 
     | 
    
         
             
                        "name": "ProgressBar",
         
     | 
| 
       145 
     | 
    
         
            -
                        "module": "src/ProgressBar. 
     | 
| 
      
 145 
     | 
    
         
            +
                        "module": "src/ProgressBar.js"
         
     | 
| 
       146 
146 
     | 
    
         
             
                      }
         
     | 
| 
       147 
147 
     | 
    
         
             
                    }
         
     | 
| 
       148 
148 
     | 
    
         
             
                  ]
         
     | 
    
        package/package.json
    CHANGED
    
    | 
         @@ -1,6 +1,6 @@ 
     | 
|
| 
       1 
1 
     | 
    
         
             
            {
         
     | 
| 
       2 
2 
     | 
    
         
             
                "name": "@spectrum-web-components/progress-bar",
         
     | 
| 
       3 
     | 
    
         
            -
                "version": "0. 
     | 
| 
      
 3 
     | 
    
         
            +
                "version": "0.6.0",
         
     | 
| 
       4 
4 
     | 
    
         
             
                "publishConfig": {
         
     | 
| 
       5 
5 
     | 
    
         
             
                    "access": "public"
         
     | 
| 
       6 
6 
     | 
    
         
             
                },
         
     | 
| 
         @@ -20,11 +20,24 @@ 
     | 
|
| 
       20 
20 
     | 
    
         
             
                "module": "src/index.js",
         
     | 
| 
       21 
21 
     | 
    
         
             
                "type": "module",
         
     | 
| 
       22 
22 
     | 
    
         
             
                "exports": {
         
     | 
| 
       23 
     | 
    
         
            -
                    ".":  
     | 
| 
       24 
     | 
    
         
            -
             
     | 
| 
      
 23 
     | 
    
         
            +
                    ".": {
         
     | 
| 
      
 24 
     | 
    
         
            +
                        "development": "./src/index.dev.js",
         
     | 
| 
      
 25 
     | 
    
         
            +
                        "default": "./src/index.js"
         
     | 
| 
      
 26 
     | 
    
         
            +
                    },
         
     | 
| 
       25 
27 
     | 
    
         
             
                    "./package.json": "./package.json",
         
     | 
| 
       26 
     | 
    
         
            -
                    "./ 
     | 
| 
       27 
     | 
    
         
            -
             
     | 
| 
      
 28 
     | 
    
         
            +
                    "./src/ProgressBar.js": {
         
     | 
| 
      
 29 
     | 
    
         
            +
                        "development": "./src/ProgressBar.dev.js",
         
     | 
| 
      
 30 
     | 
    
         
            +
                        "default": "./src/ProgressBar.js"
         
     | 
| 
      
 31 
     | 
    
         
            +
                    },
         
     | 
| 
      
 32 
     | 
    
         
            +
                    "./src/index.js": {
         
     | 
| 
      
 33 
     | 
    
         
            +
                        "development": "./src/index.dev.js",
         
     | 
| 
      
 34 
     | 
    
         
            +
                        "default": "./src/index.js"
         
     | 
| 
      
 35 
     | 
    
         
            +
                    },
         
     | 
| 
      
 36 
     | 
    
         
            +
                    "./src/progress-bar.css.js": "./src/progress-bar.css.js",
         
     | 
| 
      
 37 
     | 
    
         
            +
                    "./sp-progress-bar.js": {
         
     | 
| 
      
 38 
     | 
    
         
            +
                        "development": "./sp-progress-bar.dev.js",
         
     | 
| 
      
 39 
     | 
    
         
            +
                        "default": "./sp-progress-bar.js"
         
     | 
| 
      
 40 
     | 
    
         
            +
                    }
         
     | 
| 
       28 
41 
     | 
    
         
             
                },
         
     | 
| 
       29 
42 
     | 
    
         
             
                "scripts": {
         
     | 
| 
       30 
43 
     | 
    
         
             
                    "test": "echo \"Error: run tests from mono-repo root.\" && exit 1"
         
     | 
| 
         @@ -44,17 +57,17 @@ 
     | 
|
| 
       44 
57 
     | 
    
         
             
                    "lit-html"
         
     | 
| 
       45 
58 
     | 
    
         
             
                ],
         
     | 
| 
       46 
59 
     | 
    
         
             
                "dependencies": {
         
     | 
| 
       47 
     | 
    
         
            -
                    "@spectrum-web-components/base": "^0. 
     | 
| 
       48 
     | 
    
         
            -
                    "@spectrum-web-components/field-label": "^0.7. 
     | 
| 
      
 60 
     | 
    
         
            +
                    "@spectrum-web-components/base": "^0.6.0",
         
     | 
| 
      
 61 
     | 
    
         
            +
                    "@spectrum-web-components/field-label": "^0.7.14",
         
     | 
| 
       49 
62 
     | 
    
         
             
                    "tslib": "^2.0.0"
         
     | 
| 
       50 
63 
     | 
    
         
             
                },
         
     | 
| 
       51 
64 
     | 
    
         
             
                "devDependencies": {
         
     | 
| 
       52 
     | 
    
         
            -
                    "@spectrum-css/progressbar": "^1.0. 
     | 
| 
      
 65 
     | 
    
         
            +
                    "@spectrum-css/progressbar": "^1.0.33"
         
     | 
| 
       53 
66 
     | 
    
         
             
                },
         
     | 
| 
       54 
67 
     | 
    
         
             
                "types": "./src/index.d.ts",
         
     | 
| 
       55 
68 
     | 
    
         
             
                "customElements": "custom-elements.json",
         
     | 
| 
       56 
69 
     | 
    
         
             
                "sideEffects": [
         
     | 
| 
       57 
70 
     | 
    
         
             
                    "./sp-*.js"
         
     | 
| 
       58 
71 
     | 
    
         
             
                ],
         
     | 
| 
       59 
     | 
    
         
            -
                "gitHead": " 
     | 
| 
      
 72 
     | 
    
         
            +
                "gitHead": "50cac779bbb0d6735c2061f1eceb86b9daf9b22b"
         
     | 
| 
       60 
73 
     | 
    
         
             
            }
         
     | 
| 
         @@ -0,0 +1,7 @@ 
     | 
|
| 
      
 1 
     | 
    
         
            +
            {
         
     | 
| 
      
 2 
     | 
    
         
            +
              "version": 3,
         
     | 
| 
      
 3 
     | 
    
         
            +
              "sources": ["sp-progress-bar.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 { ProgressBar } from './src/ProgressBar.dev.js'\n\ncustomElements.define('sp-progress-bar', ProgressBar);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-progress-bar': ProgressBar;\n    }\n}\n"],
         
     | 
| 
      
 5 
     | 
    
         
            +
              "mappings": "AAYA;AAEA,eAAe,OAAO,mBAAmB,WAAW;",
         
     | 
| 
      
 6 
     | 
    
         
            +
              "names": []
         
     | 
| 
      
 7 
     | 
    
         
            +
            }
         
     | 
    
        package/sp-progress-bar.js
    CHANGED
    
    | 
         @@ -1,14 +1,3 @@ 
     | 
|
| 
       1 
     | 
    
         
            -
             
     | 
| 
       2 
     | 
    
         
            -
             
     | 
| 
       3 
     | 
    
         
            -
             
     | 
| 
       4 
     | 
    
         
            -
            you may not use this file except in compliance with the License. You may obtain a copy
         
     | 
| 
       5 
     | 
    
         
            -
            of the License at http://www.apache.org/licenses/LICENSE-2.0
         
     | 
| 
       6 
     | 
    
         
            -
             
     | 
| 
       7 
     | 
    
         
            -
            Unless required by applicable law or agreed to in writing, software distributed under
         
     | 
| 
       8 
     | 
    
         
            -
            the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
         
     | 
| 
       9 
     | 
    
         
            -
            OF ANY KIND, either express or implied. See the License for the specific language
         
     | 
| 
       10 
     | 
    
         
            -
            governing permissions and limitations under the License.
         
     | 
| 
       11 
     | 
    
         
            -
            */
         
     | 
| 
       12 
     | 
    
         
            -
            import { ProgressBar } from './src/ProgressBar.js';
         
     | 
| 
       13 
     | 
    
         
            -
            customElements.define('sp-progress-bar', ProgressBar);
         
     | 
| 
       14 
     | 
    
         
            -
            //# sourceMappingURL=sp-progress-bar.js.map
         
     | 
| 
      
 1 
     | 
    
         
            +
            import { ProgressBar } from "./src/ProgressBar.js";
         
     | 
| 
      
 2 
     | 
    
         
            +
            customElements.define("sp-progress-bar", ProgressBar);
         
     | 
| 
      
 3 
     | 
    
         
            +
            //# sourceMappingURL=sp-progress-bar.js.map
         
     | 
    
        package/sp-progress-bar.js.map
    CHANGED
    
    | 
         @@ -1 +1,7 @@ 
     | 
|
| 
       1 
     | 
    
         
            -
            { 
     | 
| 
      
 1 
     | 
    
         
            +
            {
         
     | 
| 
      
 2 
     | 
    
         
            +
              "version": 3,
         
     | 
| 
      
 3 
     | 
    
         
            +
              "sources": ["sp-progress-bar.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 { ProgressBar } from './src/ProgressBar.js';\n\ncustomElements.define('sp-progress-bar', ProgressBar);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-progress-bar': ProgressBar;\n    }\n}\n"],
         
     | 
| 
      
 5 
     | 
    
         
            +
              "mappings": "AAYA;AAEA,eAAe,OAAO,mBAAmB,WAAW;",
         
     | 
| 
      
 6 
     | 
    
         
            +
              "names": []
         
     | 
| 
      
 7 
     | 
    
         
            +
            }
         
     | 
| 
         @@ -0,0 +1,109 @@ 
     | 
|
| 
      
 1 
     | 
    
         
            +
            var __defProp = Object.defineProperty;
         
     | 
| 
      
 2 
     | 
    
         
            +
            var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
         
     | 
| 
      
 3 
     | 
    
         
            +
            var __decorateClass = (decorators, target, key, kind) => {
         
     | 
| 
      
 4 
     | 
    
         
            +
              var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
         
     | 
| 
      
 5 
     | 
    
         
            +
              for (var i = decorators.length - 1, decorator; i >= 0; i--)
         
     | 
| 
      
 6 
     | 
    
         
            +
                if (decorator = decorators[i])
         
     | 
| 
      
 7 
     | 
    
         
            +
                  result = (kind ? decorator(target, key, result) : decorator(result)) || result;
         
     | 
| 
      
 8 
     | 
    
         
            +
              if (kind && result)
         
     | 
| 
      
 9 
     | 
    
         
            +
                __defProp(target, key, result);
         
     | 
| 
      
 10 
     | 
    
         
            +
              return result;
         
     | 
| 
      
 11 
     | 
    
         
            +
            };
         
     | 
| 
      
 12 
     | 
    
         
            +
            import {
         
     | 
| 
      
 13 
     | 
    
         
            +
              html,
         
     | 
| 
      
 14 
     | 
    
         
            +
              SizedMixin,
         
     | 
| 
      
 15 
     | 
    
         
            +
              SpectrumElement
         
     | 
| 
      
 16 
     | 
    
         
            +
            } from "@spectrum-web-components/base";
         
     | 
| 
      
 17 
     | 
    
         
            +
            import { property } from "@spectrum-web-components/base/src/decorators.js";
         
     | 
| 
      
 18 
     | 
    
         
            +
            import "@spectrum-web-components/field-label/sp-field-label.js";
         
     | 
| 
      
 19 
     | 
    
         
            +
            import styles from "./progress-bar.css.js";
         
     | 
| 
      
 20 
     | 
    
         
            +
            export class ProgressBar extends SizedMixin(SpectrumElement) {
         
     | 
| 
      
 21 
     | 
    
         
            +
              constructor() {
         
     | 
| 
      
 22 
     | 
    
         
            +
                super(...arguments);
         
     | 
| 
      
 23 
     | 
    
         
            +
                this.indeterminate = false;
         
     | 
| 
      
 24 
     | 
    
         
            +
                this.label = "";
         
     | 
| 
      
 25 
     | 
    
         
            +
                this.overBackground = false;
         
     | 
| 
      
 26 
     | 
    
         
            +
                this.sideLabel = false;
         
     | 
| 
      
 27 
     | 
    
         
            +
                this.progress = 0;
         
     | 
| 
      
 28 
     | 
    
         
            +
              }
         
     | 
| 
      
 29 
     | 
    
         
            +
              static get styles() {
         
     | 
| 
      
 30 
     | 
    
         
            +
                return [styles];
         
     | 
| 
      
 31 
     | 
    
         
            +
              }
         
     | 
| 
      
 32 
     | 
    
         
            +
              render() {
         
     | 
| 
      
 33 
     | 
    
         
            +
                return html`
         
     | 
| 
      
 34 
     | 
    
         
            +
                        ${this.label ? html`
         
     | 
| 
      
 35 
     | 
    
         
            +
                                  <sp-field-label size=${this.size} class="label">
         
     | 
| 
      
 36 
     | 
    
         
            +
                                      ${this.label}
         
     | 
| 
      
 37 
     | 
    
         
            +
                                  </sp-field-label>
         
     | 
| 
      
 38 
     | 
    
         
            +
                                  ${this.indeterminate ? html`` : html`
         
     | 
| 
      
 39 
     | 
    
         
            +
                                            <sp-field-label
         
     | 
| 
      
 40 
     | 
    
         
            +
                                                size=${this.size}
         
     | 
| 
      
 41 
     | 
    
         
            +
                                                class="percentage"
         
     | 
| 
      
 42 
     | 
    
         
            +
                                            >
         
     | 
| 
      
 43 
     | 
    
         
            +
                                                ${this.progress}%
         
     | 
| 
      
 44 
     | 
    
         
            +
                                            </sp-field-label>
         
     | 
| 
      
 45 
     | 
    
         
            +
                                        `}
         
     | 
| 
      
 46 
     | 
    
         
            +
                              ` : html``}
         
     | 
| 
      
 47 
     | 
    
         
            +
                        <div class="track">
         
     | 
| 
      
 48 
     | 
    
         
            +
                            <div
         
     | 
| 
      
 49 
     | 
    
         
            +
                                class="fill"
         
     | 
| 
      
 50 
     | 
    
         
            +
                                style="transform: scaleX(calc(${this.progress} / 100));"
         
     | 
| 
      
 51 
     | 
    
         
            +
                            ></div>
         
     | 
| 
      
 52 
     | 
    
         
            +
                        </div>
         
     | 
| 
      
 53 
     | 
    
         
            +
                    `;
         
     | 
| 
      
 54 
     | 
    
         
            +
              }
         
     | 
| 
      
 55 
     | 
    
         
            +
              firstUpdated(changes) {
         
     | 
| 
      
 56 
     | 
    
         
            +
                super.firstUpdated(changes);
         
     | 
| 
      
 57 
     | 
    
         
            +
                if (!this.hasAttribute("role")) {
         
     | 
| 
      
 58 
     | 
    
         
            +
                  this.setAttribute("role", "progressbar");
         
     | 
| 
      
 59 
     | 
    
         
            +
                }
         
     | 
| 
      
 60 
     | 
    
         
            +
              }
         
     | 
| 
      
 61 
     | 
    
         
            +
              updated(changes) {
         
     | 
| 
      
 62 
     | 
    
         
            +
                super.updated(changes);
         
     | 
| 
      
 63 
     | 
    
         
            +
                if (changes.has("indeterminate")) {
         
     | 
| 
      
 64 
     | 
    
         
            +
                  if (this.indeterminate) {
         
     | 
| 
      
 65 
     | 
    
         
            +
                    this.removeAttribute("aria-valuemin");
         
     | 
| 
      
 66 
     | 
    
         
            +
                    this.removeAttribute("aria-valuemax");
         
     | 
| 
      
 67 
     | 
    
         
            +
                  } else {
         
     | 
| 
      
 68 
     | 
    
         
            +
                    this.setAttribute("aria-valuemin", "0");
         
     | 
| 
      
 69 
     | 
    
         
            +
                    this.setAttribute("aria-valuemax", "100");
         
     | 
| 
      
 70 
     | 
    
         
            +
                  }
         
     | 
| 
      
 71 
     | 
    
         
            +
                }
         
     | 
| 
      
 72 
     | 
    
         
            +
                if (!this.indeterminate && changes.has("progress")) {
         
     | 
| 
      
 73 
     | 
    
         
            +
                  this.setAttribute("aria-valuenow", "" + this.progress);
         
     | 
| 
      
 74 
     | 
    
         
            +
                } else if (this.hasAttribute("aria-valuenow")) {
         
     | 
| 
      
 75 
     | 
    
         
            +
                  this.removeAttribute("aria-valuenow");
         
     | 
| 
      
 76 
     | 
    
         
            +
                }
         
     | 
| 
      
 77 
     | 
    
         
            +
                if (this.label && changes.has("label")) {
         
     | 
| 
      
 78 
     | 
    
         
            +
                  this.setAttribute("aria-label", this.label);
         
     | 
| 
      
 79 
     | 
    
         
            +
                }
         
     | 
| 
      
 80 
     | 
    
         
            +
                if (true) {
         
     | 
| 
      
 81 
     | 
    
         
            +
                  if (!this.label && !this.getAttribute("aria-label") && !this.getAttribute("aria-labelledby")) {
         
     | 
| 
      
 82 
     | 
    
         
            +
                    window.__swc.warn(this, "<sp-progress-bar> elements will not be accessible to screen readers without one of the following:", "https://opensource.adobe.com/spectrum-web-components/components/progress-bar/#accessibility", {
         
     | 
| 
      
 83 
     | 
    
         
            +
                      type: "accessibility",
         
     | 
| 
      
 84 
     | 
    
         
            +
                      issues: [
         
     | 
| 
      
 85 
     | 
    
         
            +
                        'value supplied to the "label" attribute, which will be displayed visually as part of the element, or',
         
     | 
| 
      
 86 
     | 
    
         
            +
                        'value supplied to the "aria-label" attribute, which will only be provided to screen readers, or',
         
     | 
| 
      
 87 
     | 
    
         
            +
                        '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.'
         
     | 
| 
      
 88 
     | 
    
         
            +
                      ]
         
     | 
| 
      
 89 
     | 
    
         
            +
                    });
         
     | 
| 
      
 90 
     | 
    
         
            +
                  }
         
     | 
| 
      
 91 
     | 
    
         
            +
                }
         
     | 
| 
      
 92 
     | 
    
         
            +
              }
         
     | 
| 
      
 93 
     | 
    
         
            +
            }
         
     | 
| 
      
 94 
     | 
    
         
            +
            __decorateClass([
         
     | 
| 
      
 95 
     | 
    
         
            +
              property({ type: Boolean, reflect: true })
         
     | 
| 
      
 96 
     | 
    
         
            +
            ], ProgressBar.prototype, "indeterminate", 2);
         
     | 
| 
      
 97 
     | 
    
         
            +
            __decorateClass([
         
     | 
| 
      
 98 
     | 
    
         
            +
              property({ type: String })
         
     | 
| 
      
 99 
     | 
    
         
            +
            ], ProgressBar.prototype, "label", 2);
         
     | 
| 
      
 100 
     | 
    
         
            +
            __decorateClass([
         
     | 
| 
      
 101 
     | 
    
         
            +
              property({ type: Boolean, reflect: true, attribute: "over-background" })
         
     | 
| 
      
 102 
     | 
    
         
            +
            ], ProgressBar.prototype, "overBackground", 2);
         
     | 
| 
      
 103 
     | 
    
         
            +
            __decorateClass([
         
     | 
| 
      
 104 
     | 
    
         
            +
              property({ type: Boolean, reflect: true, attribute: "side-label" })
         
     | 
| 
      
 105 
     | 
    
         
            +
            ], ProgressBar.prototype, "sideLabel", 2);
         
     | 
| 
      
 106 
     | 
    
         
            +
            __decorateClass([
         
     | 
| 
      
 107 
     | 
    
         
            +
              property({ type: Number })
         
     | 
| 
      
 108 
     | 
    
         
            +
            ], ProgressBar.prototype, "progress", 2);
         
     | 
| 
      
 109 
     | 
    
         
            +
            //# sourceMappingURL=ProgressBar.dev.js.map
         
     | 
| 
         @@ -0,0 +1,7 @@ 
     | 
|
| 
      
 1 
     | 
    
         
            +
            {
         
     | 
| 
      
 2 
     | 
    
         
            +
              "version": 3,
         
     | 
| 
      
 3 
     | 
    
         
            +
              "sources": ["ProgressBar.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 { property } from '@spectrum-web-components/base/src/decorators.js';\n\nimport '@spectrum-web-components/field-label/sp-field-label.js';\nimport styles from './progress-bar.css.js';\n\n/**\n * @element sp-progress-bar\n */\nexport class ProgressBar extends SizedMixin(SpectrumElement) {\n    public static override get styles(): CSSResultArray {\n        return [styles];\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({ type: Boolean, reflect: true, attribute: 'side-label' })\n    public sideLabel = false;\n\n    @property({ type: Number })\n    public progress = 0;\n\n    protected override render(): TemplateResult {\n        return html`\n            ${this.label\n                ? html`\n                      <sp-field-label size=${this.size} class=\"label\">\n                          ${this.label}\n                      </sp-field-label>\n                      ${this.indeterminate\n                          ? html``\n                          : html`\n                                <sp-field-label\n                                    size=${this.size}\n                                    class=\"percentage\"\n                                >\n                                    ${this.progress}%\n                                </sp-field-label>\n                            `}\n                  `\n                : html``}\n            <div class=\"track\">\n                <div\n                    class=\"fill\"\n                    style=\"transform: scaleX(calc(${this.progress} / 100));\"\n                ></div>\n            </div>\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 (changes.has('indeterminate')) {\n            if (this.indeterminate) {\n                this.removeAttribute('aria-valuemin');\n                this.removeAttribute('aria-valuemax');\n            } else {\n                this.setAttribute('aria-valuemin', '0');\n                this.setAttribute('aria-valuemax', '100');\n            }\n        }\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 (this.label && changes.has('label')) {\n            this.setAttribute('aria-label', this.label);\n        }\n\n        if (window.__swc.DEBUG) {\n            if (\n                !this.label &&\n                !this.getAttribute('aria-label') &&\n                !this.getAttribute('aria-labelledby')\n            ) {\n                window.__swc.warn(\n                    this,\n                    '<sp-progress-bar> elements will not be accessible to screen readers without one of the following:',\n                    'https://opensource.adobe.com/spectrum-web-components/components/progress-bar/#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                            '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": ";;;;;;;;;;;AAYA;AAAA;AAAA;AAAA;AAAA;AAQA;AAEA;AACA;AAKO,aAAM,oBAAoB,WAAW,eAAe,EAAE;AAAA,EAAtD;AAAA;AAMI,yBAAgB;AAGhB,iBAAQ;AAGR,0BAAiB;AAGjB,qBAAY;AAGZ,oBAAW;AAAA;AAAA,aAjBS,SAAyB;AAChD,WAAO,CAAC,MAAM;AAAA,EAClB;AAAA,EAiBmB,SAAyB;AACxC,WAAO;AAAA,cACD,KAAK,QACD;AAAA,6CAC2B,KAAK;AAAA,4BACtB,KAAK;AAAA;AAAA,wBAET,KAAK,gBACD,SACA;AAAA;AAAA,2CAEe,KAAK;AAAA;AAAA;AAAA,sCAGV,KAAK;AAAA;AAAA;AAAA,sBAIzB;AAAA;AAAA;AAAA;AAAA,oDAIkC,KAAK;AAAA;AAAA;AAAA;AAAA,EAIrD;AAAA,EAEmB,aAAa,SAA+B;AAC3D,UAAM,aAAa,OAAO;AAC1B,QAAI,CAAC,KAAK,aAAa,MAAM,GAAG;AAC5B,WAAK,aAAa,QAAQ,aAAa;AAAA,IAC3C;AAAA,EACJ;AAAA,EAEmB,QAAQ,SAA+B;AACtD,UAAM,QAAQ,OAAO;AACrB,QAAI,QAAQ,IAAI,eAAe,GAAG;AAC9B,UAAI,KAAK,eAAe;AACpB,aAAK,gBAAgB,eAAe;AACpC,aAAK,gBAAgB,eAAe;AAAA,MACxC,OAAO;AACH,aAAK,aAAa,iBAAiB,GAAG;AACtC,aAAK,aAAa,iBAAiB,KAAK;AAAA,MAC5C;AAAA,IACJ;AACA,QAAI,CAAC,KAAK,iBAAiB,QAAQ,IAAI,UAAU,GAAG;AAChD,WAAK,aAAa,iBAAiB,KAAK,KAAK,QAAQ;AAAA,IACzD,WAAW,KAAK,aAAa,eAAe,GAAG;AAC3C,WAAK,gBAAgB,eAAe;AAAA,IACxC;AACA,QAAI,KAAK,SAAS,QAAQ,IAAI,OAAO,GAAG;AACpC,WAAK,aAAa,cAAc,KAAK,KAAK;AAAA,IAC9C;AAEA,QAAI,MAAoB;AACpB,UACI,CAAC,KAAK,SACN,CAAC,KAAK,aAAa,YAAY,KAC/B,CAAC,KAAK,aAAa,iBAAiB,GACtC;AACE,eAAO,MAAM,KACT,MACA,qGACA,+FACA;AAAA,UACI,MAAM;AAAA,UACN,QAAQ;AAAA,YACJ;AAAA,YACA;AAAA,YACA;AAAA,UACJ;AAAA,QACJ,CACJ;AAAA,MACJ;AAAA,IACJ;AAAA,EACJ;AACJ;AA3FW;AAAA,EADP,AAAC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GACnC,AANJ,YAMI;AAGA;AAAA,EADP,AAAC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GACnB,AATJ,YASI;AAGA;AAAA,EADP,AAAC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,kBAAkB,CAAC;AAAA,GACjE,AAZJ,YAYI;AAGA;AAAA,EADP,AAAC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,aAAa,CAAC;AAAA,GAC5D,AAfJ,YAeI;AAGA;AAAA,EADP,AAAC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GACnB,AAlBJ,YAkBI;",
         
     | 
| 
      
 6 
     | 
    
         
            +
              "names": []
         
     | 
| 
      
 7 
     | 
    
         
            +
            }
         
     | 
    
        package/src/ProgressBar.js
    CHANGED
    
    | 
         @@ -1,44 +1,41 @@ 
     | 
|
| 
       1 
     | 
    
         
            -
             
     | 
| 
       2 
     | 
    
         
            -
             
     | 
| 
       3 
     | 
    
         
            -
             
     | 
| 
       4 
     | 
    
         
            -
             
     | 
| 
       5 
     | 
    
         
            -
             
     | 
| 
       6 
     | 
    
         
            -
             
     | 
| 
       7 
     | 
    
         
            -
             
     | 
| 
       8 
     | 
    
         
            -
             
     | 
| 
       9 
     | 
    
         
            -
             
     | 
| 
       10 
     | 
    
         
            -
             
     | 
| 
       11 
     | 
    
         
            -
             
     | 
| 
       12 
     | 
    
         
            -
            import { 
     | 
| 
       13 
     | 
    
         
            -
             
     | 
| 
       14 
     | 
    
         
            -
             
     | 
| 
       15 
     | 
    
         
            -
             
     | 
| 
       16 
     | 
    
         
            -
             
     | 
| 
       17 
     | 
    
         
            -
             
     | 
| 
       18 
     | 
    
         
            -
              
     | 
| 
       19 
     | 
    
         
            -
              
     | 
| 
      
 1 
     | 
    
         
            +
            var __defProp = Object.defineProperty;
         
     | 
| 
      
 2 
     | 
    
         
            +
            var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
         
     | 
| 
      
 3 
     | 
    
         
            +
            var __decorateClass = (decorators, target, key, kind) => {
         
     | 
| 
      
 4 
     | 
    
         
            +
              var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
         
     | 
| 
      
 5 
     | 
    
         
            +
              for (var i = decorators.length - 1, decorator; i >= 0; i--)
         
     | 
| 
      
 6 
     | 
    
         
            +
                if (decorator = decorators[i])
         
     | 
| 
      
 7 
     | 
    
         
            +
                  result = (kind ? decorator(target, key, result) : decorator(result)) || result;
         
     | 
| 
      
 8 
     | 
    
         
            +
              if (kind && result)
         
     | 
| 
      
 9 
     | 
    
         
            +
                __defProp(target, key, result);
         
     | 
| 
      
 10 
     | 
    
         
            +
              return result;
         
     | 
| 
      
 11 
     | 
    
         
            +
            };
         
     | 
| 
      
 12 
     | 
    
         
            +
            import {
         
     | 
| 
      
 13 
     | 
    
         
            +
              html,
         
     | 
| 
      
 14 
     | 
    
         
            +
              SizedMixin,
         
     | 
| 
      
 15 
     | 
    
         
            +
              SpectrumElement
         
     | 
| 
      
 16 
     | 
    
         
            +
            } from "@spectrum-web-components/base";
         
     | 
| 
      
 17 
     | 
    
         
            +
            import { property } from "@spectrum-web-components/base/src/decorators.js";
         
     | 
| 
      
 18 
     | 
    
         
            +
            import "@spectrum-web-components/field-label/sp-field-label.js";
         
     | 
| 
      
 19 
     | 
    
         
            +
            import styles from "./progress-bar.css.js";
         
     | 
| 
       20 
20 
     | 
    
         
             
            export class ProgressBar extends SizedMixin(SpectrumElement) {
         
     | 
| 
       21 
     | 
    
         
            -
             
     | 
| 
       22 
     | 
    
         
            -
             
     | 
| 
       23 
     | 
    
         
            -
             
     | 
| 
       24 
     | 
    
         
            -
             
     | 
| 
       25 
     | 
    
         
            -
             
     | 
| 
       26 
     | 
    
         
            -
             
     | 
| 
       27 
     | 
    
         
            -
             
     | 
| 
       28 
     | 
    
         
            -
             
     | 
| 
       29 
     | 
    
         
            -
             
     | 
| 
       30 
     | 
    
         
            -
             
     | 
| 
       31 
     | 
    
         
            -
             
     | 
| 
       32 
     | 
    
         
            -
             
     | 
| 
       33 
     | 
    
         
            -
             
     | 
| 
       34 
     | 
    
         
            -
                        ${this.label
         
     | 
| 
       35 
     | 
    
         
            -
                        ? html `
         
     | 
| 
      
 21 
     | 
    
         
            +
              constructor() {
         
     | 
| 
      
 22 
     | 
    
         
            +
                super(...arguments);
         
     | 
| 
      
 23 
     | 
    
         
            +
                this.indeterminate = false;
         
     | 
| 
      
 24 
     | 
    
         
            +
                this.label = "";
         
     | 
| 
      
 25 
     | 
    
         
            +
                this.overBackground = false;
         
     | 
| 
      
 26 
     | 
    
         
            +
                this.sideLabel = false;
         
     | 
| 
      
 27 
     | 
    
         
            +
                this.progress = 0;
         
     | 
| 
      
 28 
     | 
    
         
            +
              }
         
     | 
| 
      
 29 
     | 
    
         
            +
              static get styles() {
         
     | 
| 
      
 30 
     | 
    
         
            +
                return [styles];
         
     | 
| 
      
 31 
     | 
    
         
            +
              }
         
     | 
| 
      
 32 
     | 
    
         
            +
              render() {
         
     | 
| 
      
 33 
     | 
    
         
            +
                return html`
         
     | 
| 
      
 34 
     | 
    
         
            +
                        ${this.label ? html`
         
     | 
| 
       36 
35 
     | 
    
         
             
                                  <sp-field-label size=${this.size} class="label">
         
     | 
| 
       37 
36 
     | 
    
         
             
                                      ${this.label}
         
     | 
| 
       38 
37 
     | 
    
         
             
                                  </sp-field-label>
         
     | 
| 
       39 
     | 
    
         
            -
                                  ${this.indeterminate
         
     | 
| 
       40 
     | 
    
         
            -
                            ? html ``
         
     | 
| 
       41 
     | 
    
         
            -
                            : html `
         
     | 
| 
      
 38 
     | 
    
         
            +
                                  ${this.indeterminate ? html`` : html`
         
     | 
| 
       42 
39 
     | 
    
         
             
                                            <sp-field-label
         
     | 
| 
       43 
40 
     | 
    
         
             
                                                size=${this.size}
         
     | 
| 
       44 
41 
     | 
    
         
             
                                                class="percentage"
         
     | 
| 
         @@ -46,8 +43,7 @@ export class ProgressBar extends SizedMixin(SpectrumElement) { 
     | 
|
| 
       46 
43 
     | 
    
         
             
                                                ${this.progress}%
         
     | 
| 
       47 
44 
     | 
    
         
             
                                            </sp-field-label>
         
     | 
| 
       48 
45 
     | 
    
         
             
                                        `}
         
     | 
| 
       49 
     | 
    
         
            -
                              `
         
     | 
| 
       50 
     | 
    
         
            -
                        : html ``}
         
     | 
| 
      
 46 
     | 
    
         
            +
                              ` : html``}
         
     | 
| 
       51 
47 
     | 
    
         
             
                        <div class="track">
         
     | 
| 
       52 
48 
     | 
    
         
             
                            <div
         
     | 
| 
       53 
49 
     | 
    
         
             
                                class="fill"
         
     | 
| 
         @@ -55,49 +51,59 @@ export class ProgressBar extends SizedMixin(SpectrumElement) { 
     | 
|
| 
       55 
51 
     | 
    
         
             
                            ></div>
         
     | 
| 
       56 
52 
     | 
    
         
             
                        </div>
         
     | 
| 
       57 
53 
     | 
    
         
             
                    `;
         
     | 
| 
      
 54 
     | 
    
         
            +
              }
         
     | 
| 
      
 55 
     | 
    
         
            +
              firstUpdated(changes) {
         
     | 
| 
      
 56 
     | 
    
         
            +
                super.firstUpdated(changes);
         
     | 
| 
      
 57 
     | 
    
         
            +
                if (!this.hasAttribute("role")) {
         
     | 
| 
      
 58 
     | 
    
         
            +
                  this.setAttribute("role", "progressbar");
         
     | 
| 
      
 59 
     | 
    
         
            +
                }
         
     | 
| 
      
 60 
     | 
    
         
            +
              }
         
     | 
| 
      
 61 
     | 
    
         
            +
              updated(changes) {
         
     | 
| 
      
 62 
     | 
    
         
            +
                super.updated(changes);
         
     | 
| 
      
 63 
     | 
    
         
            +
                if (changes.has("indeterminate")) {
         
     | 
| 
      
 64 
     | 
    
         
            +
                  if (this.indeterminate) {
         
     | 
| 
      
 65 
     | 
    
         
            +
                    this.removeAttribute("aria-valuemin");
         
     | 
| 
      
 66 
     | 
    
         
            +
                    this.removeAttribute("aria-valuemax");
         
     | 
| 
      
 67 
     | 
    
         
            +
                  } else {
         
     | 
| 
      
 68 
     | 
    
         
            +
                    this.setAttribute("aria-valuemin", "0");
         
     | 
| 
      
 69 
     | 
    
         
            +
                    this.setAttribute("aria-valuemax", "100");
         
     | 
| 
      
 70 
     | 
    
         
            +
                  }
         
     | 
| 
      
 71 
     | 
    
         
            +
                }
         
     | 
| 
      
 72 
     | 
    
         
            +
                if (!this.indeterminate && changes.has("progress")) {
         
     | 
| 
      
 73 
     | 
    
         
            +
                  this.setAttribute("aria-valuenow", "" + this.progress);
         
     | 
| 
      
 74 
     | 
    
         
            +
                } else if (this.hasAttribute("aria-valuenow")) {
         
     | 
| 
      
 75 
     | 
    
         
            +
                  this.removeAttribute("aria-valuenow");
         
     | 
| 
       58 
76 
     | 
    
         
             
                }
         
     | 
| 
       59 
     | 
    
         
            -
                 
     | 
| 
       60 
     | 
    
         
            -
             
     | 
| 
       61 
     | 
    
         
            -
                    if (!this.hasAttribute('role')) {
         
     | 
| 
       62 
     | 
    
         
            -
                        this.setAttribute('role', 'progressbar');
         
     | 
| 
       63 
     | 
    
         
            -
                    }
         
     | 
| 
      
 77 
     | 
    
         
            +
                if (this.label && changes.has("label")) {
         
     | 
| 
      
 78 
     | 
    
         
            +
                  this.setAttribute("aria-label", this.label);
         
     | 
| 
       64 
79 
     | 
    
         
             
                }
         
     | 
| 
       65 
     | 
    
         
            -
                 
     | 
| 
       66 
     | 
    
         
            -
             
     | 
| 
       67 
     | 
    
         
            -
                     
     | 
| 
       68 
     | 
    
         
            -
             
     | 
| 
       69 
     | 
    
         
            -
             
     | 
| 
       70 
     | 
    
         
            -
             
     | 
| 
       71 
     | 
    
         
            -
                         
     | 
| 
       72 
     | 
    
         
            -
                         
     | 
| 
       73 
     | 
    
         
            -
             
     | 
| 
       74 
     | 
    
         
            -
             
     | 
| 
       75 
     | 
    
         
            -
             
     | 
| 
       76 
     | 
    
         
            -
                    }
         
     | 
| 
       77 
     | 
    
         
            -
                    if (!this.indeterminate && changes.has('progress')) {
         
     | 
| 
       78 
     | 
    
         
            -
                        this.setAttribute('aria-valuenow', '' + this.progress);
         
     | 
| 
       79 
     | 
    
         
            -
                    }
         
     | 
| 
       80 
     | 
    
         
            -
                    else if (this.hasAttribute('aria-valuenow')) {
         
     | 
| 
       81 
     | 
    
         
            -
                        this.removeAttribute('aria-valuenow');
         
     | 
| 
       82 
     | 
    
         
            -
                    }
         
     | 
| 
       83 
     | 
    
         
            -
                    if (this.label && changes.has('label')) {
         
     | 
| 
       84 
     | 
    
         
            -
                        this.setAttribute('aria-label', this.label);
         
     | 
| 
       85 
     | 
    
         
            -
                    }
         
     | 
| 
      
 80 
     | 
    
         
            +
                if (false) {
         
     | 
| 
      
 81 
     | 
    
         
            +
                  if (!this.label && !this.getAttribute("aria-label") && !this.getAttribute("aria-labelledby")) {
         
     | 
| 
      
 82 
     | 
    
         
            +
                    window.__swc.warn(this, "<sp-progress-bar> elements will not be accessible to screen readers without one of the following:", "https://opensource.adobe.com/spectrum-web-components/components/progress-bar/#accessibility", {
         
     | 
| 
      
 83 
     | 
    
         
            +
                      type: "accessibility",
         
     | 
| 
      
 84 
     | 
    
         
            +
                      issues: [
         
     | 
| 
      
 85 
     | 
    
         
            +
                        'value supplied to the "label" attribute, which will be displayed visually as part of the element, or',
         
     | 
| 
      
 86 
     | 
    
         
            +
                        'value supplied to the "aria-label" attribute, which will only be provided to screen readers, or',
         
     | 
| 
      
 87 
     | 
    
         
            +
                        '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.'
         
     | 
| 
      
 88 
     | 
    
         
            +
                      ]
         
     | 
| 
      
 89 
     | 
    
         
            +
                    });
         
     | 
| 
      
 90 
     | 
    
         
            +
                  }
         
     | 
| 
       86 
91 
     | 
    
         
             
                }
         
     | 
| 
      
 92 
     | 
    
         
            +
              }
         
     | 
| 
       87 
93 
     | 
    
         
             
            }
         
     | 
| 
       88 
     | 
    
         
            -
             
     | 
| 
       89 
     | 
    
         
            -
             
     | 
| 
       90 
     | 
    
         
            -
            ], ProgressBar.prototype, "indeterminate",  
     | 
| 
       91 
     | 
    
         
            -
             
     | 
| 
       92 
     | 
    
         
            -
             
     | 
| 
       93 
     | 
    
         
            -
            ], ProgressBar.prototype, "label",  
     | 
| 
       94 
     | 
    
         
            -
             
     | 
| 
       95 
     | 
    
         
            -
             
     | 
| 
       96 
     | 
    
         
            -
            ], ProgressBar.prototype, "overBackground",  
     | 
| 
       97 
     | 
    
         
            -
             
     | 
| 
       98 
     | 
    
         
            -
             
     | 
| 
       99 
     | 
    
         
            -
            ], ProgressBar.prototype, "sideLabel",  
     | 
| 
       100 
     | 
    
         
            -
             
     | 
| 
       101 
     | 
    
         
            -
             
     | 
| 
       102 
     | 
    
         
            -
            ], ProgressBar.prototype, "progress",  
     | 
| 
       103 
     | 
    
         
            -
            //# sourceMappingURL=ProgressBar.js.map
         
     | 
| 
      
 94 
     | 
    
         
            +
            __decorateClass([
         
     | 
| 
      
 95 
     | 
    
         
            +
              property({ type: Boolean, reflect: true })
         
     | 
| 
      
 96 
     | 
    
         
            +
            ], ProgressBar.prototype, "indeterminate", 2);
         
     | 
| 
      
 97 
     | 
    
         
            +
            __decorateClass([
         
     | 
| 
      
 98 
     | 
    
         
            +
              property({ type: String })
         
     | 
| 
      
 99 
     | 
    
         
            +
            ], ProgressBar.prototype, "label", 2);
         
     | 
| 
      
 100 
     | 
    
         
            +
            __decorateClass([
         
     | 
| 
      
 101 
     | 
    
         
            +
              property({ type: Boolean, reflect: true, attribute: "over-background" })
         
     | 
| 
      
 102 
     | 
    
         
            +
            ], ProgressBar.prototype, "overBackground", 2);
         
     | 
| 
      
 103 
     | 
    
         
            +
            __decorateClass([
         
     | 
| 
      
 104 
     | 
    
         
            +
              property({ type: Boolean, reflect: true, attribute: "side-label" })
         
     | 
| 
      
 105 
     | 
    
         
            +
            ], ProgressBar.prototype, "sideLabel", 2);
         
     | 
| 
      
 106 
     | 
    
         
            +
            __decorateClass([
         
     | 
| 
      
 107 
     | 
    
         
            +
              property({ type: Number })
         
     | 
| 
      
 108 
     | 
    
         
            +
            ], ProgressBar.prototype, "progress", 2);
         
     | 
| 
      
 109 
     | 
    
         
            +
            //# sourceMappingURL=ProgressBar.js.map
         
     | 
    
        package/src/ProgressBar.js.map
    CHANGED
    
    | 
         @@ -1 +1,7 @@ 
     | 
|
| 
       1 
     | 
    
         
            -
            { 
     | 
| 
      
 1 
     | 
    
         
            +
            {
         
     | 
| 
      
 2 
     | 
    
         
            +
              "version": 3,
         
     | 
| 
      
 3 
     | 
    
         
            +
              "sources": ["ProgressBar.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 { property } from '@spectrum-web-components/base/src/decorators.js';\n\nimport '@spectrum-web-components/field-label/sp-field-label.js';\nimport styles from './progress-bar.css.js';\n\n/**\n * @element sp-progress-bar\n */\nexport class ProgressBar extends SizedMixin(SpectrumElement) {\n    public static override get styles(): CSSResultArray {\n        return [styles];\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({ type: Boolean, reflect: true, attribute: 'side-label' })\n    public sideLabel = false;\n\n    @property({ type: Number })\n    public progress = 0;\n\n    protected override render(): TemplateResult {\n        return html`\n            ${this.label\n                ? html`\n                      <sp-field-label size=${this.size} class=\"label\">\n                          ${this.label}\n                      </sp-field-label>\n                      ${this.indeterminate\n                          ? html``\n                          : html`\n                                <sp-field-label\n                                    size=${this.size}\n                                    class=\"percentage\"\n                                >\n                                    ${this.progress}%\n                                </sp-field-label>\n                            `}\n                  `\n                : html``}\n            <div class=\"track\">\n                <div\n                    class=\"fill\"\n                    style=\"transform: scaleX(calc(${this.progress} / 100));\"\n                ></div>\n            </div>\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 (changes.has('indeterminate')) {\n            if (this.indeterminate) {\n                this.removeAttribute('aria-valuemin');\n                this.removeAttribute('aria-valuemax');\n            } else {\n                this.setAttribute('aria-valuemin', '0');\n                this.setAttribute('aria-valuemax', '100');\n            }\n        }\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 (this.label && changes.has('label')) {\n            this.setAttribute('aria-label', this.label);\n        }\n\n        if (window.__swc.DEBUG) {\n            if (\n                !this.label &&\n                !this.getAttribute('aria-label') &&\n                !this.getAttribute('aria-labelledby')\n            ) {\n                window.__swc.warn(\n                    this,\n                    '<sp-progress-bar> elements will not be accessible to screen readers without one of the following:',\n                    'https://opensource.adobe.com/spectrum-web-components/components/progress-bar/#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                            '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": ";;;;;;;;;;;AAYA;AAAA;AAAA;AAAA;AAAA;AAQA;AAEA;AACA;AAKO,aAAM,oBAAoB,WAAW,eAAe,EAAE;AAAA,EAAtD;AAAA;AAMI,yBAAgB;AAGhB,iBAAQ;AAGR,0BAAiB;AAGjB,qBAAY;AAGZ,oBAAW;AAAA;AAAA,aAjBS,SAAyB;AAChD,WAAO,CAAC,MAAM;AAAA,EAClB;AAAA,EAiBmB,SAAyB;AACxC,WAAO;AAAA,cACD,KAAK,QACD;AAAA,6CAC2B,KAAK;AAAA,4BACtB,KAAK;AAAA;AAAA,wBAET,KAAK,gBACD,SACA;AAAA;AAAA,2CAEe,KAAK;AAAA;AAAA;AAAA,sCAGV,KAAK;AAAA;AAAA;AAAA,sBAIzB;AAAA;AAAA;AAAA;AAAA,oDAIkC,KAAK;AAAA;AAAA;AAAA;AAAA,EAIrD;AAAA,EAEmB,aAAa,SAA+B;AAC3D,UAAM,aAAa,OAAO;AAC1B,QAAI,CAAC,KAAK,aAAa,MAAM,GAAG;AAC5B,WAAK,aAAa,QAAQ,aAAa;AAAA,IAC3C;AAAA,EACJ;AAAA,EAEmB,QAAQ,SAA+B;AACtD,UAAM,QAAQ,OAAO;AACrB,QAAI,QAAQ,IAAI,eAAe,GAAG;AAC9B,UAAI,KAAK,eAAe;AACpB,aAAK,gBAAgB,eAAe;AACpC,aAAK,gBAAgB,eAAe;AAAA,MACxC,OAAO;AACH,aAAK,aAAa,iBAAiB,GAAG;AACtC,aAAK,aAAa,iBAAiB,KAAK;AAAA,MAC5C;AAAA,IACJ;AACA,QAAI,CAAC,KAAK,iBAAiB,QAAQ,IAAI,UAAU,GAAG;AAChD,WAAK,aAAa,iBAAiB,KAAK,KAAK,QAAQ;AAAA,IACzD,WAAW,KAAK,aAAa,eAAe,GAAG;AAC3C,WAAK,gBAAgB,eAAe;AAAA,IACxC;AACA,QAAI,KAAK,SAAS,QAAQ,IAAI,OAAO,GAAG;AACpC,WAAK,aAAa,cAAc,KAAK,KAAK;AAAA,IAC9C;AAEA,QAAI,OAAoB;AACpB,UACI,CAAC,KAAK,SACN,CAAC,KAAK,aAAa,YAAY,KAC/B,CAAC,KAAK,aAAa,iBAAiB,GACtC;AACE,eAAO,MAAM,KACT,MACA,qGACA,+FACA;AAAA,UACI,MAAM;AAAA,UACN,QAAQ;AAAA,YACJ;AAAA,YACA;AAAA,YACA;AAAA,UACJ;AAAA,QACJ,CACJ;AAAA,MACJ;AAAA,IACJ;AAAA,EACJ;AACJ;AA3FW;AAAA,EADP,AAAC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GACnC,AANJ,YAMI;AAGA;AAAA,EADP,AAAC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GACnB,AATJ,YASI;AAGA;AAAA,EADP,AAAC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,kBAAkB,CAAC;AAAA,GACjE,AAZJ,YAYI;AAGA;AAAA,EADP,AAAC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,aAAa,CAAC;AAAA,GAC5D,AAfJ,YAeI;AAGA;AAAA,EADP,AAAC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GACnB,AAlBJ,YAkBI;",
         
     | 
| 
      
 6 
     | 
    
         
            +
              "names": []
         
     | 
| 
      
 7 
     | 
    
         
            +
            }
         
     | 
    
        package/src/index.dev.js
    ADDED
    
    
| 
         @@ -0,0 +1,7 @@ 
     | 
|
| 
      
 1 
     | 
    
         
            +
            {
         
     | 
| 
      
 2 
     | 
    
         
            +
              "version": 3,
         
     | 
| 
      
 3 
     | 
    
         
            +
              "sources": ["index.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\nexport * from './ProgressBar.dev.js'\n"],
         
     | 
| 
      
 5 
     | 
    
         
            +
              "mappings": "AAYA;",
         
     | 
| 
      
 6 
     | 
    
         
            +
              "names": []
         
     | 
| 
      
 7 
     | 
    
         
            +
            }
         
     | 
    
        package/src/index.js
    CHANGED
    
    | 
         @@ -1,13 +1,2 @@ 
     | 
|
| 
       1 
     | 
    
         
            -
             
     | 
| 
       2 
     | 
    
         
            -
             
     | 
| 
       3 
     | 
    
         
            -
            This file is licensed to you under the Apache License, Version 2.0 (the "License");
         
     | 
| 
       4 
     | 
    
         
            -
            you may not use this file except in compliance with the License. You may obtain a copy
         
     | 
| 
       5 
     | 
    
         
            -
            of the License at http://www.apache.org/licenses/LICENSE-2.0
         
     | 
| 
       6 
     | 
    
         
            -
             
     | 
| 
       7 
     | 
    
         
            -
            Unless required by applicable law or agreed to in writing, software distributed under
         
     | 
| 
       8 
     | 
    
         
            -
            the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
         
     | 
| 
       9 
     | 
    
         
            -
            OF ANY KIND, either express or implied. See the License for the specific language
         
     | 
| 
       10 
     | 
    
         
            -
            governing permissions and limitations under the License.
         
     | 
| 
       11 
     | 
    
         
            -
            */
         
     | 
| 
       12 
     | 
    
         
            -
            export * from './ProgressBar.js';
         
     | 
| 
       13 
     | 
    
         
            -
            //# sourceMappingURL=index.js.map
         
     | 
| 
      
 1 
     | 
    
         
            +
            export * from "./ProgressBar.js";
         
     | 
| 
      
 2 
     | 
    
         
            +
            //# sourceMappingURL=index.js.map
         
     | 
    
        package/src/index.js.map
    CHANGED
    
    | 
         @@ -1 +1,7 @@ 
     | 
|
| 
       1 
     | 
    
         
            -
            { 
     | 
| 
      
 1 
     | 
    
         
            +
            {
         
     | 
| 
      
 2 
     | 
    
         
            +
              "version": 3,
         
     | 
| 
      
 3 
     | 
    
         
            +
              "sources": ["index.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\nexport * from './ProgressBar.js';\n"],
         
     | 
| 
      
 5 
     | 
    
         
            +
              "mappings": "AAYA;",
         
     | 
| 
      
 6 
     | 
    
         
            +
              "names": []
         
     | 
| 
      
 7 
     | 
    
         
            +
            }
         
     | 
| 
         @@ -0,0 +1,94 @@ 
     | 
|
| 
      
 1 
     | 
    
         
            +
            import { css } from "@spectrum-web-components/base";
         
     | 
| 
      
 2 
     | 
    
         
            +
            const styles = css`
         
     | 
| 
      
 3 
     | 
    
         
            +
            :host([size=s]){--spectrum-progressbar-border-radius:var(
         
     | 
| 
      
 4 
     | 
    
         
            +
            --spectrum-progressbar-s-border-radius
         
     | 
| 
      
 5 
     | 
    
         
            +
            );--spectrum-progressbar-indeterminate-fill-width:var(
         
     | 
| 
      
 6 
     | 
    
         
            +
            --spectrum-progressbar-s-indeterminate-fill-width,var(--spectrum-global-dimension-static-percent-70)
         
     | 
| 
      
 7 
     | 
    
         
            +
            );--spectrum-progressbar-indeterminate-duration:var(
         
     | 
| 
      
 8 
     | 
    
         
            +
            --spectrum-progressbar-s-indeterminate-duration,var(--spectrum-global-animation-duration-2000)
         
     | 
| 
      
 9 
     | 
    
         
            +
            );--spectrum-progressbar-value-gap-y:var(
         
     | 
| 
      
 10 
     | 
    
         
            +
            --spectrum-progressbar-s-value-gap-y,0px
         
     | 
| 
      
 11 
     | 
    
         
            +
            );--spectrum-progressbar-height:var(
         
     | 
| 
      
 12 
     | 
    
         
            +
            --spectrum-progressbar-s-height,var(--spectrum-global-dimension-size-50)
         
     | 
| 
      
 13 
     | 
    
         
            +
            );--spectrum-progressbar-width:var(
         
     | 
| 
      
 14 
     | 
    
         
            +
            --spectrum-progressbar-s-width,var(--spectrum-global-dimension-static-size-2400)
         
     | 
| 
      
 15 
     | 
    
         
            +
            )}:host([size=m]){--spectrum-progressbar-border-radius:var(
         
     | 
| 
      
 16 
     | 
    
         
            +
            --spectrum-progressbar-m-border-radius
         
     | 
| 
      
 17 
     | 
    
         
            +
            );--spectrum-progressbar-indeterminate-fill-width:var(
         
     | 
| 
      
 18 
     | 
    
         
            +
            --spectrum-progressbar-m-indeterminate-fill-width,var(--spectrum-global-dimension-static-percent-70)
         
     | 
| 
      
 19 
     | 
    
         
            +
            );--spectrum-progressbar-indeterminate-duration:var(
         
     | 
| 
      
 20 
     | 
    
         
            +
            --spectrum-progressbar-m-indeterminate-duration,var(--spectrum-global-animation-duration-2000)
         
     | 
| 
      
 21 
     | 
    
         
            +
            );--spectrum-progressbar-value-gap-y:var(
         
     | 
| 
      
 22 
     | 
    
         
            +
            --spectrum-progressbar-m-value-gap-y,0px
         
     | 
| 
      
 23 
     | 
    
         
            +
            );--spectrum-progressbar-height:var(
         
     | 
| 
      
 24 
     | 
    
         
            +
            --spectrum-progressbar-m-height,var(--spectrum-global-dimension-size-75)
         
     | 
| 
      
 25 
     | 
    
         
            +
            );--spectrum-progressbar-width:var(
         
     | 
| 
      
 26 
     | 
    
         
            +
            --spectrum-progressbar-m-width,var(--spectrum-global-dimension-static-size-2400)
         
     | 
| 
      
 27 
     | 
    
         
            +
            );--spectrum-fieldlabel-side-padding-right:var(
         
     | 
| 
      
 28 
     | 
    
         
            +
            --spectrum-fieldlabel-m-side-padding-right,var(--spectrum-global-dimension-size-150)
         
     | 
| 
      
 29 
     | 
    
         
            +
            )}:host([size=l]){--spectrum-progressbar-indeterminate-fill-width:var(
         
     | 
| 
      
 30 
     | 
    
         
            +
            --spectrum-progressbar-l-indeterminate-fill-width,var(--spectrum-global-dimension-static-percent-70)
         
     | 
| 
      
 31 
     | 
    
         
            +
            );--spectrum-progressbar-indeterminate-duration:var(
         
     | 
| 
      
 32 
     | 
    
         
            +
            --spectrum-progressbar-l-indeterminate-duration,var(--spectrum-global-animation-duration-2000)
         
     | 
| 
      
 33 
     | 
    
         
            +
            );--spectrum-progressbar-value-gap-y:var(
         
     | 
| 
      
 34 
     | 
    
         
            +
            --spectrum-progressbar-l-value-gap-y,0px
         
     | 
| 
      
 35 
     | 
    
         
            +
            );--spectrum-progressbar-height:var(
         
     | 
| 
      
 36 
     | 
    
         
            +
            --spectrum-progressbar-l-height,var(--spectrum-global-dimension-size-100)
         
     | 
| 
      
 37 
     | 
    
         
            +
            );--spectrum-progressbar-border-radius:var(
         
     | 
| 
      
 38 
     | 
    
         
            +
            --spectrum-progressbar-l-border-radius,var(--spectrum-global-dimension-size-50)
         
     | 
| 
      
 39 
     | 
    
         
            +
            );--spectrum-progressbar-width:var(
         
     | 
| 
      
 40 
     | 
    
         
            +
            --spectrum-progressbar-l-width,var(--spectrum-global-dimension-static-size-2500)
         
     | 
| 
      
 41 
     | 
    
         
            +
            )}:host([size=xl]){--spectrum-progressbar-border-radius:var(
         
     | 
| 
      
 42 
     | 
    
         
            +
            --spectrum-progressbar-xl-border-radius
         
     | 
| 
      
 43 
     | 
    
         
            +
            );--spectrum-progressbar-indeterminate-fill-width:var(
         
     | 
| 
      
 44 
     | 
    
         
            +
            --spectrum-progressbar-xl-indeterminate-fill-width,var(--spectrum-global-dimension-static-percent-70)
         
     | 
| 
      
 45 
     | 
    
         
            +
            );--spectrum-progressbar-indeterminate-duration:var(
         
     | 
| 
      
 46 
     | 
    
         
            +
            --spectrum-progressbar-xl-indeterminate-duration,var(--spectrum-global-animation-duration-2000)
         
     | 
| 
      
 47 
     | 
    
         
            +
            );--spectrum-progressbar-value-gap-y:var(
         
     | 
| 
      
 48 
     | 
    
         
            +
            --spectrum-progressbar-xl-value-gap-y,0px
         
     | 
| 
      
 49 
     | 
    
         
            +
            );--spectrum-progressbar-height:var(
         
     | 
| 
      
 50 
     | 
    
         
            +
            --spectrum-progressbar-xl-height,var(--spectrum-global-dimension-size-125)
         
     | 
| 
      
 51 
     | 
    
         
            +
            );--spectrum-progressbar-width:var(
         
     | 
| 
      
 52 
     | 
    
         
            +
            --spectrum-progressbar-xl-width,var(--spectrum-global-dimension-static-size-2800)
         
     | 
| 
      
 53 
     | 
    
         
            +
            )}:host{align-items:center;display:inline-flex;flex-flow:row wrap;justify-content:space-between;position:relative;vertical-align:top;width:var(--spectrum-progressbar-width)}.track{border-radius:var(--spectrum-progressbar-border-radius);overflow:hidden;width:100%;z-index:1}.fill,.track{height:var(--spectrum-progressbar-height)}.fill{border:none;transition:width 1s}:host([dir=ltr]) .label,:host([dir=ltr]) .percentage{text-align:left}:host([dir=rtl]) .label,:host([dir=rtl]) .percentage{text-align:right}.label,.percentage{margin-bottom:var(
         
     | 
| 
      
 54 
     | 
    
         
            +
            --spectrum-progressbar-value-gap-y
         
     | 
| 
      
 55 
     | 
    
         
            +
            )}.label{flex:1 1 0%}:host([dir=ltr]) .percentage{margin-left:var(
         
     | 
| 
      
 56 
     | 
    
         
            +
            --spectrum-fieldlabel-side-padding-right
         
     | 
| 
      
 57 
     | 
    
         
            +
            )}:host([dir=rtl]) .percentage{margin-right:var(
         
     | 
| 
      
 58 
     | 
    
         
            +
            --spectrum-fieldlabel-side-padding-right
         
     | 
| 
      
 59 
     | 
    
         
            +
            )}.percentage{align-self:flex-start}:host([side-label]){display:inline-flex;flex-flow:row;justify-content:space-between;width:auto}:host([side-label]) .track{flex:1 1 var(--spectrum-progressbar-width);min-width:var(
         
     | 
| 
      
 60 
     | 
    
         
            +
            --spectrum-progressbar-width
         
     | 
| 
      
 61 
     | 
    
         
            +
            )}:host([dir=ltr][side-label]) .label{margin-right:var(
         
     | 
| 
      
 62 
     | 
    
         
            +
            --spectrum-fieldlabel-side-padding-right
         
     | 
| 
      
 63 
     | 
    
         
            +
            )}:host([dir=rtl][side-label]) .label{margin-left:var(
         
     | 
| 
      
 64 
     | 
    
         
            +
            --spectrum-fieldlabel-side-padding-right
         
     | 
| 
      
 65 
     | 
    
         
            +
            )}:host([side-label]) .label{flex-grow:0;margin-bottom:0}:host([dir=ltr][side-label]) .percentage{text-align:right}:host([dir=rtl][side-label]) .percentage{text-align:left}:host([dir=ltr][side-label]) .percentage{margin-left:var(
         
     | 
| 
      
 66 
     | 
    
         
            +
            --spectrum-fieldlabel-side-padding-right
         
     | 
| 
      
 67 
     | 
    
         
            +
            )}:host([dir=rtl][side-label]) .percentage{margin-right:var(
         
     | 
| 
      
 68 
     | 
    
         
            +
            --spectrum-fieldlabel-side-padding-right
         
     | 
| 
      
 69 
     | 
    
         
            +
            )}:host([side-label]) .percentage{margin-bottom:0;order:3}:host([indeterminate]) .fill{animation-timing-function:var(
         
     | 
| 
      
 70 
     | 
    
         
            +
            --spectrum-progressbar-indeterminate-animation-ease
         
     | 
| 
      
 71 
     | 
    
         
            +
            );position:relative;width:var(
         
     | 
| 
      
 72 
     | 
    
         
            +
            --spectrum-progressbar-indeterminate-fill-width
         
     | 
| 
      
 73 
     | 
    
         
            +
            );will-change:transform}:host([dir=ltr][indeterminate]) .fill{animation:indeterminate-loop-ltr var(--spectrum-progressbar-indeterminate-duration) infinite}:host([dir=rtl][indeterminate]) .fill{animation:indeterminate-loop-rtl var(--spectrum-progressbar-indeterminate-duration) infinite}@keyframes indeterminate-loop-ltr{0%{transform:translate(calc(var(--spectrum-progressbar-indeterminate-fill-width)*-1))}to{transform:translate(var(--spectrum-progressbar-width))}}@keyframes indeterminate-loop-rtl{0%{transform:translate(var(--spectrum-progressbar-width))}to{transform:translate(calc(var(--spectrum-progressbar-width)*-1))}}.fill{background:var(
         
     | 
| 
      
 74 
     | 
    
         
            +
            --spectrum-progressbar-m-track-fill-color,var(--spectrum-semantic-informative-color-default)
         
     | 
| 
      
 75 
     | 
    
         
            +
            )}.track{background-color:var(
         
     | 
| 
      
 76 
     | 
    
         
            +
            --spectrum-progressbar-m-track-color,var(--spectrum-alias-track-color-default)
         
     | 
| 
      
 77 
     | 
    
         
            +
            )}:host([over-background]) .fill{background:var(
         
     | 
| 
      
 78 
     | 
    
         
            +
            --spectrum-progressbar-m-overbackground-track-fill-color,var(--spectrum-alias-track-fill-color-overbackground)
         
     | 
| 
      
 79 
     | 
    
         
            +
            )}:host([over-background]) .label,:host([over-background]) .percentage{color:var(
         
     | 
| 
      
 80 
     | 
    
         
            +
            --spectrum-progressbar-m-overbackground-track-fill-color,var(--spectrum-alias-track-fill-color-overbackground)
         
     | 
| 
      
 81 
     | 
    
         
            +
            )}:host([over-background]) .track{background-color:var(
         
     | 
| 
      
 82 
     | 
    
         
            +
            --spectrum-progressbar-m-overbackground-track-color,var(--spectrum-alias-track-color-overbackground)
         
     | 
| 
      
 83 
     | 
    
         
            +
            )}:host([positive]) .fill{background:var(
         
     | 
| 
      
 84 
     | 
    
         
            +
            --spectrum-meter-m-positive-track-fill-color,var(--spectrum-semantic-positive-status-color)
         
     | 
| 
      
 85 
     | 
    
         
            +
            )}:host(.is-notice) .fill{background:var(
         
     | 
| 
      
 86 
     | 
    
         
            +
            --spectrum-meter-m-notice-track-fill-color,var(--spectrum-semantic-notice-status-color)
         
     | 
| 
      
 87 
     | 
    
         
            +
            )}:host(.is-negative) .fill{background:var(
         
     | 
| 
      
 88 
     | 
    
         
            +
            --spectrum-meter-m-negative-track-fill-color,var(--spectrum-semantic-negative-status-color)
         
     | 
| 
      
 89 
     | 
    
         
            +
            )}.label,.percentage{color:var(
         
     | 
| 
      
 90 
     | 
    
         
            +
            --spectrum-fieldlabel-m-text-color,var(--spectrum-alias-label-text-color)
         
     | 
| 
      
 91 
     | 
    
         
            +
            )}@media (forced-colors:active){.track{--spectrum-progressbar-m-track-fill-color:ButtonText;--spectrum-progressbar-m-track-color:ButtonFace;border:1px solid ButtonText;forced-color-adjust:none}}.fill{transform-origin:left;width:100%}:host([dir=rtl]) .fill{transform-origin:right}
         
     | 
| 
      
 92 
     | 
    
         
            +
            `;
         
     | 
| 
      
 93 
     | 
    
         
            +
            export default styles;
         
     | 
| 
      
 94 
     | 
    
         
            +
            //# sourceMappingURL=progress-bar.css.dev.js.map
         
     |