@spectrum-web-components/progress-bar 1.9.0 → 1.9.1-nightly.20251028214328
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/CHANGELOG.md +535 -0
- package/package.json +75 -75
- package/src/ProgressBar.d.ts +3 -3
- package/src/progress-bar-overrides.css.dev.js.map +2 -2
- package/src/progress-bar-overrides.css.js.map +2 -2
- package/src/progress-bar.css.dev.js.map +2 -2
- package/src/progress-bar.css.js.map +2 -2
- package/src/spectrum-progress-bar.css.dev.js.map +2 -2
- package/src/spectrum-progress-bar.css.js.map +2 -2
- package/stories/progress-bar-sizes.stories.js +44 -0
- package/stories/progress-bar-sizes.stories.js.map +7 -0
- package/stories/progress-bar.stories.js +109 -0
- package/stories/progress-bar.stories.js.map +7 -0
- package/test/benchmark/basic-test.js +8 -0
- package/{sp-progress-bar.dev.js.map → test/benchmark/basic-test.js.map} +3 -3
- package/test/progress-bar-memory.test.js +8 -0
- package/{sp-progress-bar.js.map → test/progress-bar-memory.test.js.map} +4 -4
- package/test/progress-bar-sizes.test-vrt.js +5 -0
- package/test/progress-bar-sizes.test-vrt.js.map +7 -0
- package/test/progress-bar.test-vrt.js +5 -0
- package/test/progress-bar.test-vrt.js.map +7 -0
- package/test/progress-bar.test.js +245 -0
- package/test/progress-bar.test.js.map +7 -0
- package/custom-elements.json +0 -203
- package/sp-progress-bar.d.ts +0 -17
- package/sp-progress-bar.dev.js +0 -5
- package/sp-progress-bar.js +0 -2
package/package.json
CHANGED
|
@@ -1,79 +1,79 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
2
|
+
"name": "@spectrum-web-components/progress-bar",
|
|
3
|
+
"version": "1.9.1-nightly.20251028214328",
|
|
4
|
+
"publishConfig": {
|
|
5
|
+
"access": "public"
|
|
6
|
+
},
|
|
7
|
+
"description": "",
|
|
8
|
+
"license": "Apache-2.0",
|
|
9
|
+
"repository": {
|
|
10
|
+
"type": "git",
|
|
11
|
+
"url": "https://github.com/adobe/spectrum-web-components.git",
|
|
12
|
+
"directory": "1st-gen/packages/progress-bar"
|
|
13
|
+
},
|
|
14
|
+
"author": "Adobe",
|
|
15
|
+
"homepage": "https://opensource.adobe.com/spectrum-web-components/components/progress-bar",
|
|
16
|
+
"bugs": {
|
|
17
|
+
"url": "https://github.com/adobe/spectrum-web-components/issues"
|
|
18
|
+
},
|
|
19
|
+
"main": "./src/index.js",
|
|
20
|
+
"module": "./src/index.js",
|
|
21
|
+
"type": "module",
|
|
22
|
+
"exports": {
|
|
23
|
+
".": {
|
|
24
|
+
"development": "./src/index.dev.js",
|
|
25
|
+
"default": "./src/index.js"
|
|
6
26
|
},
|
|
7
|
-
"
|
|
8
|
-
"
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
"url": "https://github.com/adobe/spectrum-web-components.git",
|
|
12
|
-
"directory": "packages/progress-bar"
|
|
27
|
+
"./package.json": "./package.json",
|
|
28
|
+
"./src/ProgressBar.js": {
|
|
29
|
+
"development": "./src/ProgressBar.dev.js",
|
|
30
|
+
"default": "./src/ProgressBar.js"
|
|
13
31
|
},
|
|
14
|
-
"
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
"url": "https://github.com/adobe/spectrum-web-components/issues"
|
|
32
|
+
"./src/index.js": {
|
|
33
|
+
"development": "./src/index.dev.js",
|
|
34
|
+
"default": "./src/index.js"
|
|
18
35
|
},
|
|
19
|
-
"
|
|
20
|
-
"
|
|
21
|
-
"
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
"
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
"
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
"component",
|
|
64
|
-
"css"
|
|
65
|
-
],
|
|
66
|
-
"dependencies": {
|
|
67
|
-
"@spectrum-web-components/base": "1.9.0",
|
|
68
|
-
"@spectrum-web-components/field-label": "1.9.0",
|
|
69
|
-
"@spectrum-web-components/reactive-controllers": "1.9.0",
|
|
70
|
-
"@spectrum-web-components/shared": "1.9.0"
|
|
71
|
-
},
|
|
72
|
-
"types": "./src/index.d.ts",
|
|
73
|
-
"customElements": "custom-elements.json",
|
|
74
|
-
"deprecationNotice": "The over-background attribute has been deprecated and will be removed in a future release. Use static-color='white' instead.",
|
|
75
|
-
"sideEffects": [
|
|
76
|
-
"./sp-*.js",
|
|
77
|
-
"./**/*.dev.js"
|
|
78
|
-
]
|
|
79
|
-
}
|
|
36
|
+
"./src/progress-bar-overrides.css.js": "./src/progress-bar-overrides.css.js",
|
|
37
|
+
"./src/progress-bar.css.js": "./src/progress-bar.css.js",
|
|
38
|
+
"./sp-progress-bar.js": {
|
|
39
|
+
"development": "./sp-progress-bar.dev.js",
|
|
40
|
+
"default": "./sp-progress-bar.js"
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
"scripts": {
|
|
44
|
+
"test": "echo \"Error: run tests from mono-repo root.\" && exit 1"
|
|
45
|
+
},
|
|
46
|
+
"files": [
|
|
47
|
+
"**/*.d.ts",
|
|
48
|
+
"**/*.js",
|
|
49
|
+
"**/*.js.map",
|
|
50
|
+
"custom-elements.json",
|
|
51
|
+
"!stories/",
|
|
52
|
+
"!test/"
|
|
53
|
+
],
|
|
54
|
+
"keywords": [
|
|
55
|
+
"design-system",
|
|
56
|
+
"spectrum",
|
|
57
|
+
"adobe",
|
|
58
|
+
"adobe-spectrum",
|
|
59
|
+
"web components",
|
|
60
|
+
"web-components",
|
|
61
|
+
"lit-element",
|
|
62
|
+
"lit-html",
|
|
63
|
+
"component",
|
|
64
|
+
"css"
|
|
65
|
+
],
|
|
66
|
+
"dependencies": {
|
|
67
|
+
"@spectrum-web-components/base": "1.9.1-nightly.20251028214328",
|
|
68
|
+
"@spectrum-web-components/field-label": "1.9.1-nightly.20251028214328",
|
|
69
|
+
"@spectrum-web-components/reactive-controllers": "1.9.1-nightly.20251028214328",
|
|
70
|
+
"@spectrum-web-components/shared": "1.9.1-nightly.20251028214328"
|
|
71
|
+
},
|
|
72
|
+
"types": "./src/index.d.ts",
|
|
73
|
+
"customElements": "custom-elements.json",
|
|
74
|
+
"deprecationNotice": "The over-background attribute has been deprecated and will be removed in a future release. Use static-color='white' instead.",
|
|
75
|
+
"sideEffects": [
|
|
76
|
+
"./sp-*.js",
|
|
77
|
+
"./**/*.dev.js"
|
|
78
|
+
]
|
|
79
|
+
}
|
package/src/ProgressBar.d.ts
CHANGED
|
@@ -12,12 +12,12 @@
|
|
|
12
12
|
import { CSSResultArray, PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
|
|
13
13
|
import '@spectrum-web-components/field-label/sp-field-label.js';
|
|
14
14
|
declare const ProgressBar_base: typeof SpectrumElement & {
|
|
15
|
-
new (...args: any[]): import("@spectrum-web-components/shared/
|
|
16
|
-
prototype: import("@spectrum-web-components/shared/
|
|
15
|
+
new (...args: any[]): import("@spectrum-web-components/core/shared/observe-slot-text.js").SlotTextObservingInterface;
|
|
16
|
+
prototype: import("@spectrum-web-components/core/shared/observe-slot-text.js").SlotTextObservingInterface;
|
|
17
17
|
} & {
|
|
18
18
|
new (...args: any[]): import("@spectrum-web-components/base").SizedElementInterface;
|
|
19
19
|
prototype: import("@spectrum-web-components/base").SizedElementInterface;
|
|
20
|
-
};
|
|
20
|
+
} & import("@spectrum-web-components/base").SizedElementConstructor;
|
|
21
21
|
/**
|
|
22
22
|
* @element sp-progress-bar
|
|
23
23
|
*/
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["progress-bar-overrides.css.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": ";
|
|
4
|
+
"sourcesContent": ["import { css } from '@spectrum-web-components/base';\nconst styles = css`\n :host{--spectrum-progressbar-animation-ease-in-out-indeterminate:var(--system-progress-bar-animation-ease-in-out-indeterminate);--spectrum-progressbar-animation-duration-indeterminate:var(--system-progress-bar-animation-duration-indeterminate);--spectrum-progressbar-corner-radius:var(--system-progress-bar-corner-radius);--spectrum-progressbar-fill-size-indeterminate:var(--system-progress-bar-fill-size-indeterminate);--spectrum-progressbar-size-2400:var(--system-progress-bar-size-2400);--spectrum-progressbar-size-2500:var(--system-progress-bar-size-2500);--spectrum-progressbar-size-2800:var(--system-progress-bar-size-2800);--spectrum-progressbar-line-height-cjk:var(--system-progress-bar-line-height-cjk);--spectrum-progressbar-min-size:var(--system-progress-bar-min-size);--spectrum-progressbar-max-size:var(--system-progress-bar-max-size);--spectrum-progressbar-line-height:var(--system-progress-bar-line-height);--spectrum-progressbar-spacing-label-to-progressbar:var(--system-progress-bar-spacing-label-to);--spectrum-progressbar-spacing-label-to-text:var(--system-progress-bar-spacing-label-to-text);--spectrum-progressbar-text-color:var(--system-progress-bar-text-color);--spectrum-progressbar-track-color:var(--system-progress-bar-track-color);--spectrum-progressbar-fill-color:var(--system-progress-bar-fill-color);--spectrum-progressbar-label-and-value-white:var(--system-progress-bar-label-and-value-white);--spectrum-progressbar-track-color-white:var(--system-progress-bar-track-color-white);--spectrum-progressbar-fill-color-white:var(--system-progress-bar-fill-color-white);--spectrum-progressbar-size-default:var(--system-progress-bar-size-m-size-default);--spectrum-progressbar-font-size:var(--system-progress-bar-size-m-font-size);--spectrum-progressbar-thickness:var(--system-progress-bar-size-m-thickness);--spectrum-progressbar-spacing-top-to-text:var(--system-progress-bar-size-m-spacing-top-to-text)}:host([size=s]){--spectrum-progressbar-size-default:var(--system-progress-bar-size-s-size-default);--spectrum-progressbar-font-size:var(--system-progress-bar-size-s-font-size);--spectrum-progressbar-thickness:var(--system-progress-bar-size-s-thickness);--spectrum-progressbar-spacing-top-to-text:var(--system-progress-bar-size-s-spacing-top-to-text)}:host([size=l]){--spectrum-progressbar-size-default:var(--system-progress-bar-size-l-size-default);--spectrum-progressbar-font-size:var(--system-progress-bar-size-l-font-size);--spectrum-progressbar-thickness:var(--system-progress-bar-size-l-thickness);--spectrum-progressbar-spacing-top-to-text:var(--system-progress-bar-size-l-spacing-top-to-text)}:host([size=xl]){--spectrum-progressbar-size-default:var(--system-progress-bar-size-xl-size-default);--spectrum-progressbar-font-size:var(--system-progress-bar-size-xl-font-size);--spectrum-progressbar-thickness:var(--system-progress-bar-size-xl-thickness);--spectrum-progressbar-spacing-top-to-text:var(--system-progress-bar-size-xl-spacing-top-to-text)}\n`;\nexport default styles;"],
|
|
5
|
+
"mappings": ";AAAA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["progress-bar-overrides.css.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import { css } from '@spectrum-web-components/base';\nconst styles = css`\n :host{--spectrum-progressbar-animation-ease-in-out-indeterminate:var(--system-progress-bar-animation-ease-in-out-indeterminate);--spectrum-progressbar-animation-duration-indeterminate:var(--system-progress-bar-animation-duration-indeterminate);--spectrum-progressbar-corner-radius:var(--system-progress-bar-corner-radius);--spectrum-progressbar-fill-size-indeterminate:var(--system-progress-bar-fill-size-indeterminate);--spectrum-progressbar-size-2400:var(--system-progress-bar-size-2400);--spectrum-progressbar-size-2500:var(--system-progress-bar-size-2500);--spectrum-progressbar-size-2800:var(--system-progress-bar-size-2800);--spectrum-progressbar-line-height-cjk:var(--system-progress-bar-line-height-cjk);--spectrum-progressbar-min-size:var(--system-progress-bar-min-size);--spectrum-progressbar-max-size:var(--system-progress-bar-max-size);--spectrum-progressbar-line-height:var(--system-progress-bar-line-height);--spectrum-progressbar-spacing-label-to-progressbar:var(--system-progress-bar-spacing-label-to);--spectrum-progressbar-spacing-label-to-text:var(--system-progress-bar-spacing-label-to-text);--spectrum-progressbar-text-color:var(--system-progress-bar-text-color);--spectrum-progressbar-track-color:var(--system-progress-bar-track-color);--spectrum-progressbar-fill-color:var(--system-progress-bar-fill-color);--spectrum-progressbar-label-and-value-white:var(--system-progress-bar-label-and-value-white);--spectrum-progressbar-track-color-white:var(--system-progress-bar-track-color-white);--spectrum-progressbar-fill-color-white:var(--system-progress-bar-fill-color-white);--spectrum-progressbar-size-default:var(--system-progress-bar-size-m-size-default);--spectrum-progressbar-font-size:var(--system-progress-bar-size-m-font-size);--spectrum-progressbar-thickness:var(--system-progress-bar-size-m-thickness);--spectrum-progressbar-spacing-top-to-text:var(--system-progress-bar-size-m-spacing-top-to-text)}:host([size=s]){--spectrum-progressbar-size-default:var(--system-progress-bar-size-s-size-default);--spectrum-progressbar-font-size:var(--system-progress-bar-size-s-font-size);--spectrum-progressbar-thickness:var(--system-progress-bar-size-s-thickness);--spectrum-progressbar-spacing-top-to-text:var(--system-progress-bar-size-s-spacing-top-to-text)}:host([size=l]){--spectrum-progressbar-size-default:var(--system-progress-bar-size-l-size-default);--spectrum-progressbar-font-size:var(--system-progress-bar-size-l-font-size);--spectrum-progressbar-thickness:var(--system-progress-bar-size-l-thickness);--spectrum-progressbar-spacing-top-to-text:var(--system-progress-bar-size-l-spacing-top-to-text)}:host([size=xl]){--spectrum-progressbar-size-default:var(--system-progress-bar-size-xl-size-default);--spectrum-progressbar-font-size:var(--system-progress-bar-size-xl-font-size);--spectrum-progressbar-thickness:var(--system-progress-bar-size-xl-thickness);--spectrum-progressbar-spacing-top-to-text:var(--system-progress-bar-size-xl-spacing-top-to-text)}\n`;\nexport default styles;"],
|
|
5
|
+
"mappings": "aAAA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["progress-bar.css.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": ";
|
|
4
|
+
"sourcesContent": ["import { css } from '@spectrum-web-components/base';\nconst styles = css`\n :host{font-size:var(--mod-progressbar-font-size,var(--spectrum-progressbar-font-size));vertical-align:top;inline-size:var(--mod-progressbar-size-default,var(--spectrum-progressbar-size-default));max-inline-size:var(--mod-progressbar-max-size,var(--spectrum-progressbar-max-size));min-inline-size:var(--mod-progressbar-min-size,var(--spectrum-progressbar-min-size));flex-flow:wrap;justify-content:space-between;align-items:center;display:inline-flex;position:relative}.label,.percentage{text-align:start;line-height:var(--mod-progressbar-line-height,var(--spectrum-progressbar-line-height));color:var(--mod-progressbar-text-color,var(--spectrum-progressbar-text-color));margin-block-start:var(--mod-progressbar-spacing-top-to-text,var(--spectrum-progressbar-spacing-top-to-text));margin-block-end:var(--mod-progressbar-spacing-label-to-progressbar,var(--spectrum-progressbar-spacing-label-to-progressbar))}.label:lang(ja),.label:lang(ko),.label:lang(zh),.percentage:lang(ja),.percentage:lang(ko),.percentage:lang(zh){line-height:var(--mod-progressbar-line-height-cjk,var(--spectrum-progressbar-line-height-cjk))}.label{flex:1}.percentage{align-self:flex-start;margin-inline-start:var(--mod-progressbar-spacing-label-to-text,var(--spectrum-progressbar-spacing-label-to-text))}.track{inline-size:100%;block-size:var(--mod-progressbar-thickness,var(--spectrum-progressbar-thickness));border-radius:var(--spectrum-progressbar-corner-radius);background:var(--highcontrast-progressbar-track-color,var(--mod-progressbar-track-color,var(--spectrum-progressbar-track-color)));overflow:hidden}.fill{block-size:var(--mod-progressbar-thickness,var(--spectrum-progressbar-thickness));background:var(--highcontrast-progressbar-fill-color,var(--mod-progressbar-fill-color,var(--spectrum-progressbar-fill-color)));border:none;transition:width 1s}:host([indeterminate]) .fill{inline-size:var(--mod-progressbar-fill-size-indeterminate,var(--spectrum-progressbar-fill-size-indeterminate));animation-timing-function:var(--mod-progressbar-animation-ease-in-out-indeterminate,var(--spectrum-progressbar-animation-ease-in-out-indeterminate));will-change:transform;animation-name:indeterminate-loop-ltr;animation-duration:var(--mod-progressbar-animation-duration-indeterminate,var(--spectrum-progressbar-animation-duration-indeterminate));animation-iteration-count:infinite;position:relative}:host([indeterminate]) .fill:dir(rtl),:host([dir=rtl][indeterminate]) .fill{animation-name:indeterminate-loop-rtl}:host([side-label]){flex-flow:row;justify-content:space-between;display:inline-flex}:host([side-label]) .track{flex:1 1 var(--mod-progressbar-size-default,var(--spectrum-progressbar-size-default))}:host([side-label]) .label{flex-grow:0;margin-block-end:0;margin-inline-end:var(--mod-progressbar-spacing-label-to-text,var(--spectrum-progressbar-spacing-label-to-text))}:host([side-label]) .percentage{text-align:end;order:3;margin-block-end:0;margin-inline-start:var(--mod-spacing-progressbar-label-to-text,var(--spectrum-progressbar-spacing-label-to-text))}:host([static-color=white]) .fill{background:var(--mod-progressbar-fill-color-white,var(--spectrum-progressbar-fill-color-white))}:host([static-color=white]) .fill,:host([static-color=white]) .label,:host([static-color=white]) .percentage{color:var(--mod-progressbar-label-and-value-white,var(--spectrum-progressbar-label-and-value-white))}:host([static-color=white]) .track{background:var(--spectrum-progressbar-track-color-white)}@keyframes indeterminate-loop-ltr{0%{transform:translate(-100%)}to{transform:translate(var(--spectrum-progressbar-size-default))}}@keyframes indeterminate-loop-rtl{0%{transform:translate(100%)}to{transform:translate(calc(var(--spectrum-progressbar-size-default)*-1))}}@media (forced-colors:active){.track{--highcontrast-progressbar-fill-color:ButtonText;--highcontrast-progressbar-track-color:ButtonFace;forced-color-adjust:none;border:1px solid buttontext}}:host{--spectrum-progressbar-animation-ease-in-out-indeterminate:var(--system-progress-bar-animation-ease-in-out-indeterminate);--spectrum-progressbar-animation-duration-indeterminate:var(--system-progress-bar-animation-duration-indeterminate);--spectrum-progressbar-corner-radius:var(--system-progress-bar-corner-radius);--spectrum-progressbar-fill-size-indeterminate:var(--system-progress-bar-fill-size-indeterminate);--spectrum-progressbar-size-2400:var(--system-progress-bar-size-2400);--spectrum-progressbar-size-2500:var(--system-progress-bar-size-2500);--spectrum-progressbar-size-2800:var(--system-progress-bar-size-2800);--spectrum-progressbar-line-height-cjk:var(--system-progress-bar-line-height-cjk);--spectrum-progressbar-min-size:var(--system-progress-bar-min-size);--spectrum-progressbar-max-size:var(--system-progress-bar-max-size);--spectrum-progressbar-line-height:var(--system-progress-bar-line-height);--spectrum-progressbar-spacing-label-to-progressbar:var(--system-progress-bar-spacing-label-to);--spectrum-progressbar-spacing-label-to-text:var(--system-progress-bar-spacing-label-to-text);--spectrum-progressbar-text-color:var(--system-progress-bar-text-color);--spectrum-progressbar-track-color:var(--system-progress-bar-track-color);--spectrum-progressbar-fill-color:var(--system-progress-bar-fill-color);--spectrum-progressbar-label-and-value-white:var(--system-progress-bar-label-and-value-white);--spectrum-progressbar-track-color-white:var(--system-progress-bar-track-color-white);--spectrum-progressbar-fill-color-white:var(--system-progress-bar-fill-color-white);--spectrum-progressbar-size-default:var(--system-progress-bar-size-m-size-default);--spectrum-progressbar-font-size:var(--system-progress-bar-size-m-font-size);--spectrum-progressbar-thickness:var(--system-progress-bar-size-m-thickness);--spectrum-progressbar-spacing-top-to-text:var(--system-progress-bar-size-m-spacing-top-to-text)}:host([size=s]){--spectrum-progressbar-size-default:var(--system-progress-bar-size-s-size-default);--spectrum-progressbar-font-size:var(--system-progress-bar-size-s-font-size);--spectrum-progressbar-thickness:var(--system-progress-bar-size-s-thickness);--spectrum-progressbar-spacing-top-to-text:var(--system-progress-bar-size-s-spacing-top-to-text)}:host([size=l]){--spectrum-progressbar-size-default:var(--system-progress-bar-size-l-size-default);--spectrum-progressbar-font-size:var(--system-progress-bar-size-l-font-size);--spectrum-progressbar-thickness:var(--system-progress-bar-size-l-thickness);--spectrum-progressbar-spacing-top-to-text:var(--system-progress-bar-size-l-spacing-top-to-text)}:host([size=xl]){--spectrum-progressbar-size-default:var(--system-progress-bar-size-xl-size-default);--spectrum-progressbar-font-size:var(--system-progress-bar-size-xl-font-size);--spectrum-progressbar-thickness:var(--system-progress-bar-size-xl-thickness);--spectrum-progressbar-spacing-top-to-text:var(--system-progress-bar-size-xl-spacing-top-to-text)}.fill{transform-origin:0;width:100%}:host([dir=rtl]) .fill{transform-origin:100%}\n`;\nexport default styles;"],
|
|
5
|
+
"mappings": ";AAAA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["progress-bar.css.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import { css } from '@spectrum-web-components/base';\nconst styles = css`\n :host{font-size:var(--mod-progressbar-font-size,var(--spectrum-progressbar-font-size));vertical-align:top;inline-size:var(--mod-progressbar-size-default,var(--spectrum-progressbar-size-default));max-inline-size:var(--mod-progressbar-max-size,var(--spectrum-progressbar-max-size));min-inline-size:var(--mod-progressbar-min-size,var(--spectrum-progressbar-min-size));flex-flow:wrap;justify-content:space-between;align-items:center;display:inline-flex;position:relative}.label,.percentage{text-align:start;line-height:var(--mod-progressbar-line-height,var(--spectrum-progressbar-line-height));color:var(--mod-progressbar-text-color,var(--spectrum-progressbar-text-color));margin-block-start:var(--mod-progressbar-spacing-top-to-text,var(--spectrum-progressbar-spacing-top-to-text));margin-block-end:var(--mod-progressbar-spacing-label-to-progressbar,var(--spectrum-progressbar-spacing-label-to-progressbar))}.label:lang(ja),.label:lang(ko),.label:lang(zh),.percentage:lang(ja),.percentage:lang(ko),.percentage:lang(zh){line-height:var(--mod-progressbar-line-height-cjk,var(--spectrum-progressbar-line-height-cjk))}.label{flex:1}.percentage{align-self:flex-start;margin-inline-start:var(--mod-progressbar-spacing-label-to-text,var(--spectrum-progressbar-spacing-label-to-text))}.track{inline-size:100%;block-size:var(--mod-progressbar-thickness,var(--spectrum-progressbar-thickness));border-radius:var(--spectrum-progressbar-corner-radius);background:var(--highcontrast-progressbar-track-color,var(--mod-progressbar-track-color,var(--spectrum-progressbar-track-color)));overflow:hidden}.fill{block-size:var(--mod-progressbar-thickness,var(--spectrum-progressbar-thickness));background:var(--highcontrast-progressbar-fill-color,var(--mod-progressbar-fill-color,var(--spectrum-progressbar-fill-color)));border:none;transition:width 1s}:host([indeterminate]) .fill{inline-size:var(--mod-progressbar-fill-size-indeterminate,var(--spectrum-progressbar-fill-size-indeterminate));animation-timing-function:var(--mod-progressbar-animation-ease-in-out-indeterminate,var(--spectrum-progressbar-animation-ease-in-out-indeterminate));will-change:transform;animation-name:indeterminate-loop-ltr;animation-duration:var(--mod-progressbar-animation-duration-indeterminate,var(--spectrum-progressbar-animation-duration-indeterminate));animation-iteration-count:infinite;position:relative}:host([indeterminate]) .fill:dir(rtl),:host([dir=rtl][indeterminate]) .fill{animation-name:indeterminate-loop-rtl}:host([side-label]){flex-flow:row;justify-content:space-between;display:inline-flex}:host([side-label]) .track{flex:1 1 var(--mod-progressbar-size-default,var(--spectrum-progressbar-size-default))}:host([side-label]) .label{flex-grow:0;margin-block-end:0;margin-inline-end:var(--mod-progressbar-spacing-label-to-text,var(--spectrum-progressbar-spacing-label-to-text))}:host([side-label]) .percentage{text-align:end;order:3;margin-block-end:0;margin-inline-start:var(--mod-spacing-progressbar-label-to-text,var(--spectrum-progressbar-spacing-label-to-text))}:host([static-color=white]) .fill{background:var(--mod-progressbar-fill-color-white,var(--spectrum-progressbar-fill-color-white))}:host([static-color=white]) .fill,:host([static-color=white]) .label,:host([static-color=white]) .percentage{color:var(--mod-progressbar-label-and-value-white,var(--spectrum-progressbar-label-and-value-white))}:host([static-color=white]) .track{background:var(--spectrum-progressbar-track-color-white)}@keyframes indeterminate-loop-ltr{0%{transform:translate(-100%)}to{transform:translate(var(--spectrum-progressbar-size-default))}}@keyframes indeterminate-loop-rtl{0%{transform:translate(100%)}to{transform:translate(calc(var(--spectrum-progressbar-size-default)*-1))}}@media (forced-colors:active){.track{--highcontrast-progressbar-fill-color:ButtonText;--highcontrast-progressbar-track-color:ButtonFace;forced-color-adjust:none;border:1px solid buttontext}}:host{--spectrum-progressbar-animation-ease-in-out-indeterminate:var(--system-progress-bar-animation-ease-in-out-indeterminate);--spectrum-progressbar-animation-duration-indeterminate:var(--system-progress-bar-animation-duration-indeterminate);--spectrum-progressbar-corner-radius:var(--system-progress-bar-corner-radius);--spectrum-progressbar-fill-size-indeterminate:var(--system-progress-bar-fill-size-indeterminate);--spectrum-progressbar-size-2400:var(--system-progress-bar-size-2400);--spectrum-progressbar-size-2500:var(--system-progress-bar-size-2500);--spectrum-progressbar-size-2800:var(--system-progress-bar-size-2800);--spectrum-progressbar-line-height-cjk:var(--system-progress-bar-line-height-cjk);--spectrum-progressbar-min-size:var(--system-progress-bar-min-size);--spectrum-progressbar-max-size:var(--system-progress-bar-max-size);--spectrum-progressbar-line-height:var(--system-progress-bar-line-height);--spectrum-progressbar-spacing-label-to-progressbar:var(--system-progress-bar-spacing-label-to);--spectrum-progressbar-spacing-label-to-text:var(--system-progress-bar-spacing-label-to-text);--spectrum-progressbar-text-color:var(--system-progress-bar-text-color);--spectrum-progressbar-track-color:var(--system-progress-bar-track-color);--spectrum-progressbar-fill-color:var(--system-progress-bar-fill-color);--spectrum-progressbar-label-and-value-white:var(--system-progress-bar-label-and-value-white);--spectrum-progressbar-track-color-white:var(--system-progress-bar-track-color-white);--spectrum-progressbar-fill-color-white:var(--system-progress-bar-fill-color-white);--spectrum-progressbar-size-default:var(--system-progress-bar-size-m-size-default);--spectrum-progressbar-font-size:var(--system-progress-bar-size-m-font-size);--spectrum-progressbar-thickness:var(--system-progress-bar-size-m-thickness);--spectrum-progressbar-spacing-top-to-text:var(--system-progress-bar-size-m-spacing-top-to-text)}:host([size=s]){--spectrum-progressbar-size-default:var(--system-progress-bar-size-s-size-default);--spectrum-progressbar-font-size:var(--system-progress-bar-size-s-font-size);--spectrum-progressbar-thickness:var(--system-progress-bar-size-s-thickness);--spectrum-progressbar-spacing-top-to-text:var(--system-progress-bar-size-s-spacing-top-to-text)}:host([size=l]){--spectrum-progressbar-size-default:var(--system-progress-bar-size-l-size-default);--spectrum-progressbar-font-size:var(--system-progress-bar-size-l-font-size);--spectrum-progressbar-thickness:var(--system-progress-bar-size-l-thickness);--spectrum-progressbar-spacing-top-to-text:var(--system-progress-bar-size-l-spacing-top-to-text)}:host([size=xl]){--spectrum-progressbar-size-default:var(--system-progress-bar-size-xl-size-default);--spectrum-progressbar-font-size:var(--system-progress-bar-size-xl-font-size);--spectrum-progressbar-thickness:var(--system-progress-bar-size-xl-thickness);--spectrum-progressbar-spacing-top-to-text:var(--system-progress-bar-size-xl-spacing-top-to-text)}.fill{transform-origin:0;width:100%}:host([dir=rtl]) .fill{transform-origin:100%}\n`;\nexport default styles;"],
|
|
5
|
+
"mappings": "aAAA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["spectrum-progress-bar.css.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": ";
|
|
4
|
+
"sourcesContent": ["import { css } from '@spectrum-web-components/base';\nconst styles = css`\n :host{font-size:var(--mod-progressbar-font-size,var(--spectrum-progressbar-font-size));vertical-align:top;inline-size:var(--mod-progressbar-size-default,var(--spectrum-progressbar-size-default));max-inline-size:var(--mod-progressbar-max-size,var(--spectrum-progressbar-max-size));min-inline-size:var(--mod-progressbar-min-size,var(--spectrum-progressbar-min-size));flex-flow:wrap;justify-content:space-between;align-items:center;display:inline-flex;position:relative}.label,.percentage{text-align:start;line-height:var(--mod-progressbar-line-height,var(--spectrum-progressbar-line-height));color:var(--mod-progressbar-text-color,var(--spectrum-progressbar-text-color));margin-block-start:var(--mod-progressbar-spacing-top-to-text,var(--spectrum-progressbar-spacing-top-to-text));margin-block-end:var(--mod-progressbar-spacing-label-to-progressbar,var(--spectrum-progressbar-spacing-label-to-progressbar))}.label:lang(ja),.label:lang(ko),.label:lang(zh),.percentage:lang(ja),.percentage:lang(ko),.percentage:lang(zh){line-height:var(--mod-progressbar-line-height-cjk,var(--spectrum-progressbar-line-height-cjk))}.label{flex:1}.percentage{align-self:flex-start;margin-inline-start:var(--mod-progressbar-spacing-label-to-text,var(--spectrum-progressbar-spacing-label-to-text))}.track{inline-size:100%;block-size:var(--mod-progressbar-thickness,var(--spectrum-progressbar-thickness));border-radius:var(--spectrum-progressbar-corner-radius);background:var(--highcontrast-progressbar-track-color,var(--mod-progressbar-track-color,var(--spectrum-progressbar-track-color)));overflow:hidden}.fill{block-size:var(--mod-progressbar-thickness,var(--spectrum-progressbar-thickness));background:var(--highcontrast-progressbar-fill-color,var(--mod-progressbar-fill-color,var(--spectrum-progressbar-fill-color)));border:none;transition:width 1s}:host([indeterminate]) .fill{inline-size:var(--mod-progressbar-fill-size-indeterminate,var(--spectrum-progressbar-fill-size-indeterminate));animation-timing-function:var(--mod-progressbar-animation-ease-in-out-indeterminate,var(--spectrum-progressbar-animation-ease-in-out-indeterminate));will-change:transform;animation-name:indeterminate-loop-ltr;animation-duration:var(--mod-progressbar-animation-duration-indeterminate,var(--spectrum-progressbar-animation-duration-indeterminate));animation-iteration-count:infinite;position:relative}:host([indeterminate]) .fill:dir(rtl),:host([dir=rtl][indeterminate]) .fill{animation-name:indeterminate-loop-rtl}:host([side-label]){flex-flow:row;justify-content:space-between;display:inline-flex}:host([side-label]) .track{flex:1 1 var(--mod-progressbar-size-default,var(--spectrum-progressbar-size-default))}:host([side-label]) .label{flex-grow:0;margin-block-end:0;margin-inline-end:var(--mod-progressbar-spacing-label-to-text,var(--spectrum-progressbar-spacing-label-to-text))}:host([side-label]) .percentage{text-align:end;order:3;margin-block-end:0;margin-inline-start:var(--mod-spacing-progressbar-label-to-text,var(--spectrum-progressbar-spacing-label-to-text))}:host([static-color=white]) .fill{background:var(--mod-progressbar-fill-color-white,var(--spectrum-progressbar-fill-color-white))}:host([static-color=white]) .fill,:host([static-color=white]) .label,:host([static-color=white]) .percentage{color:var(--mod-progressbar-label-and-value-white,var(--spectrum-progressbar-label-and-value-white))}:host([static-color=white]) .track{background:var(--spectrum-progressbar-track-color-white)}@keyframes indeterminate-loop-ltr{0%{transform:translate(calc(var(--mod-progressbar-fill-size-indeterminate,var(--spectrum-progressbar-fill-size-indeterminate))*-1))}to{transform:translate(var(--mod-progressbar-size-default,var(--spectrum-progressbar-size-default)))}}@keyframes indeterminate-loop-rtl{0%{transform:translate(var(--mod-progressbar-size-default,var(--spectrum-progressbar-fill-size-indeterminate)))}to{transform:translate(calc(var(--mod-progressbar-size-default,var(--spectrum-progressbar-size-default))*-1))}}@media (forced-colors:active){.track{--highcontrast-progressbar-fill-color:ButtonText;--highcontrast-progressbar-track-color:ButtonFace;forced-color-adjust:none;border:1px solid buttontext}}\n`;\nexport default styles;"],
|
|
5
|
+
"mappings": ";AAAA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["spectrum-progress-bar.css.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import { css } from '@spectrum-web-components/base';\nconst styles = css`\n :host{font-size:var(--mod-progressbar-font-size,var(--spectrum-progressbar-font-size));vertical-align:top;inline-size:var(--mod-progressbar-size-default,var(--spectrum-progressbar-size-default));max-inline-size:var(--mod-progressbar-max-size,var(--spectrum-progressbar-max-size));min-inline-size:var(--mod-progressbar-min-size,var(--spectrum-progressbar-min-size));flex-flow:wrap;justify-content:space-between;align-items:center;display:inline-flex;position:relative}.label,.percentage{text-align:start;line-height:var(--mod-progressbar-line-height,var(--spectrum-progressbar-line-height));color:var(--mod-progressbar-text-color,var(--spectrum-progressbar-text-color));margin-block-start:var(--mod-progressbar-spacing-top-to-text,var(--spectrum-progressbar-spacing-top-to-text));margin-block-end:var(--mod-progressbar-spacing-label-to-progressbar,var(--spectrum-progressbar-spacing-label-to-progressbar))}.label:lang(ja),.label:lang(ko),.label:lang(zh),.percentage:lang(ja),.percentage:lang(ko),.percentage:lang(zh){line-height:var(--mod-progressbar-line-height-cjk,var(--spectrum-progressbar-line-height-cjk))}.label{flex:1}.percentage{align-self:flex-start;margin-inline-start:var(--mod-progressbar-spacing-label-to-text,var(--spectrum-progressbar-spacing-label-to-text))}.track{inline-size:100%;block-size:var(--mod-progressbar-thickness,var(--spectrum-progressbar-thickness));border-radius:var(--spectrum-progressbar-corner-radius);background:var(--highcontrast-progressbar-track-color,var(--mod-progressbar-track-color,var(--spectrum-progressbar-track-color)));overflow:hidden}.fill{block-size:var(--mod-progressbar-thickness,var(--spectrum-progressbar-thickness));background:var(--highcontrast-progressbar-fill-color,var(--mod-progressbar-fill-color,var(--spectrum-progressbar-fill-color)));border:none;transition:width 1s}:host([indeterminate]) .fill{inline-size:var(--mod-progressbar-fill-size-indeterminate,var(--spectrum-progressbar-fill-size-indeterminate));animation-timing-function:var(--mod-progressbar-animation-ease-in-out-indeterminate,var(--spectrum-progressbar-animation-ease-in-out-indeterminate));will-change:transform;animation-name:indeterminate-loop-ltr;animation-duration:var(--mod-progressbar-animation-duration-indeterminate,var(--spectrum-progressbar-animation-duration-indeterminate));animation-iteration-count:infinite;position:relative}:host([indeterminate]) .fill:dir(rtl),:host([dir=rtl][indeterminate]) .fill{animation-name:indeterminate-loop-rtl}:host([side-label]){flex-flow:row;justify-content:space-between;display:inline-flex}:host([side-label]) .track{flex:1 1 var(--mod-progressbar-size-default,var(--spectrum-progressbar-size-default))}:host([side-label]) .label{flex-grow:0;margin-block-end:0;margin-inline-end:var(--mod-progressbar-spacing-label-to-text,var(--spectrum-progressbar-spacing-label-to-text))}:host([side-label]) .percentage{text-align:end;order:3;margin-block-end:0;margin-inline-start:var(--mod-spacing-progressbar-label-to-text,var(--spectrum-progressbar-spacing-label-to-text))}:host([static-color=white]) .fill{background:var(--mod-progressbar-fill-color-white,var(--spectrum-progressbar-fill-color-white))}:host([static-color=white]) .fill,:host([static-color=white]) .label,:host([static-color=white]) .percentage{color:var(--mod-progressbar-label-and-value-white,var(--spectrum-progressbar-label-and-value-white))}:host([static-color=white]) .track{background:var(--spectrum-progressbar-track-color-white)}@keyframes indeterminate-loop-ltr{0%{transform:translate(calc(var(--mod-progressbar-fill-size-indeterminate,var(--spectrum-progressbar-fill-size-indeterminate))*-1))}to{transform:translate(var(--mod-progressbar-size-default,var(--spectrum-progressbar-size-default)))}}@keyframes indeterminate-loop-rtl{0%{transform:translate(var(--mod-progressbar-size-default,var(--spectrum-progressbar-fill-size-indeterminate)))}to{transform:translate(calc(var(--mod-progressbar-size-default,var(--spectrum-progressbar-size-default))*-1))}}@media (forced-colors:active){.track{--highcontrast-progressbar-fill-color:ButtonText;--highcontrast-progressbar-track-color:ButtonFace;forced-color-adjust:none;border:1px solid buttontext}}\n`;\nexport default styles;"],
|
|
5
|
+
"mappings": "aAAA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
import { html } from "@spectrum-web-components/base";
|
|
3
|
+
import "@spectrum-web-components/progress-bar/sp-progress-bar.js";
|
|
4
|
+
export default {
|
|
5
|
+
title: "Progress Bar/Sizes",
|
|
6
|
+
component: "sp-progress-bar"
|
|
7
|
+
};
|
|
8
|
+
export const s = () => {
|
|
9
|
+
return html`
|
|
10
|
+
<sp-progress-bar
|
|
11
|
+
label="Loading"
|
|
12
|
+
progress="50"
|
|
13
|
+
size="s"
|
|
14
|
+
></sp-progress-bar>
|
|
15
|
+
`;
|
|
16
|
+
};
|
|
17
|
+
export const m = () => {
|
|
18
|
+
return html`
|
|
19
|
+
<sp-progress-bar
|
|
20
|
+
label="Loading"
|
|
21
|
+
progress="50"
|
|
22
|
+
size="m"
|
|
23
|
+
></sp-progress-bar>
|
|
24
|
+
`;
|
|
25
|
+
};
|
|
26
|
+
export const l = () => {
|
|
27
|
+
return html`
|
|
28
|
+
<sp-progress-bar
|
|
29
|
+
label="Loading"
|
|
30
|
+
progress="50"
|
|
31
|
+
size="l"
|
|
32
|
+
></sp-progress-bar>
|
|
33
|
+
`;
|
|
34
|
+
};
|
|
35
|
+
export const XL = () => {
|
|
36
|
+
return html`
|
|
37
|
+
<sp-progress-bar
|
|
38
|
+
label="Loading"
|
|
39
|
+
progress="50"
|
|
40
|
+
size="xl"
|
|
41
|
+
></sp-progress-bar>
|
|
42
|
+
`;
|
|
43
|
+
};
|
|
44
|
+
//# sourceMappingURL=progress-bar-sizes.stories.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["progress-bar-sizes.stories.ts"],
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '@spectrum-web-components/progress-bar/sp-progress-bar.js';\n\nexport default {\n title: 'Progress Bar/Sizes',\n component: 'sp-progress-bar',\n};\n\nexport const s = (): TemplateResult => {\n return html`\n <sp-progress-bar\n label=\"Loading\"\n progress=\"50\"\n size=\"s\"\n ></sp-progress-bar>\n `;\n};\n\nexport const m = (): TemplateResult => {\n return html`\n <sp-progress-bar\n label=\"Loading\"\n progress=\"50\"\n size=\"m\"\n ></sp-progress-bar>\n `;\n};\n\nexport const l = (): TemplateResult => {\n return html`\n <sp-progress-bar\n label=\"Loading\"\n progress=\"50\"\n size=\"l\"\n ></sp-progress-bar>\n `;\n};\n\nexport const XL = (): TemplateResult => {\n return html`\n <sp-progress-bar\n label=\"Loading\"\n progress=\"50\"\n size=\"xl\"\n ></sp-progress-bar>\n `;\n};\n"],
|
|
5
|
+
"mappings": ";AAYA,SAAS,YAA4B;AAErC,OAAO;AAEP,eAAe;AAAA,EACX,OAAO;AAAA,EACP,WAAW;AACf;AAEO,aAAM,IAAI,MAAsB;AACnC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOX;AAEO,aAAM,IAAI,MAAsB;AACnC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOX;AAEO,aAAM,IAAI,MAAsB;AACnC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOX;AAEO,aAAM,KAAK,MAAsB;AACpC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOX;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
import { html } from "@spectrum-web-components/base";
|
|
3
|
+
import "@spectrum-web-components/progress-bar/sp-progress-bar.js";
|
|
4
|
+
export default {
|
|
5
|
+
title: "Progress Bar",
|
|
6
|
+
component: "sp-progress-bar"
|
|
7
|
+
};
|
|
8
|
+
export const label = () => {
|
|
9
|
+
return html`
|
|
10
|
+
<sp-progress-bar label="Loading" progress="50"></sp-progress-bar>
|
|
11
|
+
`;
|
|
12
|
+
};
|
|
13
|
+
export const indeterminate = () => {
|
|
14
|
+
return html`
|
|
15
|
+
<sp-progress-bar label="Loading" indeterminate></sp-progress-bar>
|
|
16
|
+
`;
|
|
17
|
+
};
|
|
18
|
+
export const sideLabel = () => {
|
|
19
|
+
return html`
|
|
20
|
+
<sp-progress-bar
|
|
21
|
+
side-label
|
|
22
|
+
label="Loading"
|
|
23
|
+
progress="50"
|
|
24
|
+
></sp-progress-bar>
|
|
25
|
+
`;
|
|
26
|
+
};
|
|
27
|
+
export const sideIndeterminate = () => {
|
|
28
|
+
return html`
|
|
29
|
+
<sp-progress-bar
|
|
30
|
+
side-label
|
|
31
|
+
label="Loading"
|
|
32
|
+
indeterminate
|
|
33
|
+
></sp-progress-bar>
|
|
34
|
+
`;
|
|
35
|
+
};
|
|
36
|
+
const makeOverBackground = (variant) => (story) => {
|
|
37
|
+
const color = variant === "black" ? "rgb(181, 209, 211)" : "var(--spectrum-seafoam-900)";
|
|
38
|
+
return html`
|
|
39
|
+
<div
|
|
40
|
+
style="
|
|
41
|
+
--mod-actionbutton-static-content-color: ${color};
|
|
42
|
+
--mod-button-static-content-color: ${color};
|
|
43
|
+
background-color: ${color};
|
|
44
|
+
color: ${color};
|
|
45
|
+
padding: calc(var(--swc-scale-factor) * 14px) calc(var(--swc-scale-factor) * 20px);
|
|
46
|
+
display: inline-block;
|
|
47
|
+
"
|
|
48
|
+
>
|
|
49
|
+
${story()}
|
|
50
|
+
</div>
|
|
51
|
+
`;
|
|
52
|
+
};
|
|
53
|
+
export const staticWhite = () => {
|
|
54
|
+
return makeOverBackground("white")(
|
|
55
|
+
() => html`
|
|
56
|
+
<sp-progress-bar
|
|
57
|
+
progress="50"
|
|
58
|
+
static-color="white"
|
|
59
|
+
></sp-progress-bar>
|
|
60
|
+
`
|
|
61
|
+
);
|
|
62
|
+
};
|
|
63
|
+
export const staticWhiteLabel = () => {
|
|
64
|
+
return makeOverBackground("white")(
|
|
65
|
+
() => html`
|
|
66
|
+
<sp-progress-bar
|
|
67
|
+
label="Loading"
|
|
68
|
+
progress="50"
|
|
69
|
+
static-color="white"
|
|
70
|
+
></sp-progress-bar>
|
|
71
|
+
`
|
|
72
|
+
);
|
|
73
|
+
};
|
|
74
|
+
export const staticWhiteIndeterminate = () => {
|
|
75
|
+
return makeOverBackground("white")(
|
|
76
|
+
() => html`
|
|
77
|
+
<sp-progress-bar
|
|
78
|
+
label="Loading"
|
|
79
|
+
indeterminate
|
|
80
|
+
static-color="white"
|
|
81
|
+
></sp-progress-bar>
|
|
82
|
+
`
|
|
83
|
+
);
|
|
84
|
+
};
|
|
85
|
+
export const staticWhiteSideLabel = () => {
|
|
86
|
+
return makeOverBackground("white")(
|
|
87
|
+
() => html`
|
|
88
|
+
<sp-progress-bar
|
|
89
|
+
label="Loading"
|
|
90
|
+
progress="50"
|
|
91
|
+
static-color="white"
|
|
92
|
+
side-label
|
|
93
|
+
></sp-progress-bar>
|
|
94
|
+
`
|
|
95
|
+
);
|
|
96
|
+
};
|
|
97
|
+
export const staticWhiteSideLabelIndeterminate = () => {
|
|
98
|
+
return makeOverBackground("white")(
|
|
99
|
+
() => html`
|
|
100
|
+
<sp-progress-bar
|
|
101
|
+
label="Loading"
|
|
102
|
+
indeterminate
|
|
103
|
+
static-color="white"
|
|
104
|
+
side-label
|
|
105
|
+
></sp-progress-bar>
|
|
106
|
+
`
|
|
107
|
+
);
|
|
108
|
+
};
|
|
109
|
+
//# sourceMappingURL=progress-bar.stories.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["progress-bar.stories.ts"],
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '@spectrum-web-components/progress-bar/sp-progress-bar.js';\n\nexport default {\n title: 'Progress Bar',\n component: 'sp-progress-bar',\n};\n\nexport const label = (): TemplateResult => {\n return html`\n <sp-progress-bar label=\"Loading\" progress=\"50\"></sp-progress-bar>\n `;\n};\n\nexport const indeterminate = (): TemplateResult => {\n return html`\n <sp-progress-bar label=\"Loading\" indeterminate></sp-progress-bar>\n `;\n};\n\nexport const sideLabel = (): TemplateResult => {\n return html`\n <sp-progress-bar\n side-label\n label=\"Loading\"\n progress=\"50\"\n ></sp-progress-bar>\n `;\n};\n\nexport const sideIndeterminate = (): TemplateResult => {\n return html`\n <sp-progress-bar\n side-label\n label=\"Loading\"\n indeterminate\n ></sp-progress-bar>\n `;\n};\n\nconst makeOverBackground =\n (variant?: 'white' | 'black') =>\n (story: () => TemplateResult): TemplateResult => {\n const color =\n variant === 'black'\n ? 'rgb(181, 209, 211)'\n : 'var(--spectrum-seafoam-900)';\n return html`\n <div\n style=\"\n --mod-actionbutton-static-content-color: ${color};\n --mod-button-static-content-color: ${color};\n background-color: ${color};\n color: ${color};\n padding: calc(var(--swc-scale-factor) * 14px) calc(var(--swc-scale-factor) * 20px);\n display: inline-block;\n \"\n >\n ${story()}\n </div>\n `;\n };\n\nexport const staticWhite = (): TemplateResult => {\n return makeOverBackground('white')(\n () => html`\n <sp-progress-bar\n progress=\"50\"\n static-color=\"white\"\n ></sp-progress-bar>\n `\n );\n};\n\nexport const staticWhiteLabel = (): TemplateResult => {\n return makeOverBackground('white')(\n () => html`\n <sp-progress-bar\n label=\"Loading\"\n progress=\"50\"\n static-color=\"white\"\n ></sp-progress-bar>\n `\n );\n};\n\nexport const staticWhiteIndeterminate = (): TemplateResult => {\n return makeOverBackground('white')(\n () => html`\n <sp-progress-bar\n label=\"Loading\"\n indeterminate\n static-color=\"white\"\n ></sp-progress-bar>\n `\n );\n};\n\nexport const staticWhiteSideLabel = (): TemplateResult => {\n return makeOverBackground('white')(\n () => html`\n <sp-progress-bar\n label=\"Loading\"\n progress=\"50\"\n static-color=\"white\"\n side-label\n ></sp-progress-bar>\n `\n );\n};\n\nexport const staticWhiteSideLabelIndeterminate = (): TemplateResult => {\n return makeOverBackground('white')(\n () => html`\n <sp-progress-bar\n label=\"Loading\"\n indeterminate\n static-color=\"white\"\n side-label\n ></sp-progress-bar>\n `\n );\n};\n"],
|
|
5
|
+
"mappings": ";AAYA,SAAS,YAA4B;AAErC,OAAO;AAEP,eAAe;AAAA,EACX,OAAO;AAAA,EACP,WAAW;AACf;AAEO,aAAM,QAAQ,MAAsB;AACvC,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,gBAAgB,MAAsB;AAC/C,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,YAAY,MAAsB;AAC3C,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOX;AAEO,aAAM,oBAAoB,MAAsB;AACnD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOX;AAEA,MAAM,qBACF,CAAC,YACD,CAAC,UAAgD;AAC7C,QAAM,QACF,YAAY,UACN,uBACA;AACV,SAAO;AAAA;AAAA;AAAA,+DAGgD,KAAK;AAAA,yDACX,KAAK;AAAA,wCACtB,KAAK;AAAA,6BAChB,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKhB,MAAM,CAAC;AAAA;AAAA;AAGrB;AAEG,aAAM,cAAc,MAAsB;AAC7C,SAAO,mBAAmB,OAAO;AAAA,IAC7B,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMV;AACJ;AAEO,aAAM,mBAAmB,MAAsB;AAClD,SAAO,mBAAmB,OAAO;AAAA,IAC7B,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOV;AACJ;AAEO,aAAM,2BAA2B,MAAsB;AAC1D,SAAO,mBAAmB,OAAO;AAAA,IAC7B,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOV;AACJ;AAEO,aAAM,uBAAuB,MAAsB;AACtD,SAAO,mBAAmB,OAAO;AAAA,IAC7B,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQV;AACJ;AAEO,aAAM,oCAAoC,MAAsB;AACnE,SAAO,mBAAmB,OAAO;AAAA,IAC7B,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQV;AACJ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
import "@spectrum-web-components/progress-bar/sp-progress-bar.js";
|
|
3
|
+
import { html } from "lit";
|
|
4
|
+
import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
|
|
5
|
+
measureFixtureCreation(html`
|
|
6
|
+
<sp-progress-bar label="Loading" indeterminate></sp-progress-bar>
|
|
7
|
+
`);
|
|
8
|
+
//# sourceMappingURL=basic-test.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["
|
|
4
|
-
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {
|
|
5
|
-
"mappings": ";AAYA,SAAS,
|
|
3
|
+
"sources": ["basic-test.ts"],
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport '@spectrum-web-components/progress-bar/sp-progress-bar.js';\nimport { html } from 'lit';\nimport { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';\n\nmeasureFixtureCreation(html`\n <sp-progress-bar label=\"Loading\" indeterminate></sp-progress-bar>\n`);\n"],
|
|
5
|
+
"mappings": ";AAYA,OAAO;AACP,SAAS,YAAY;AACrB,SAAS,8BAA8B;AAEvC,uBAAuB;AAAA;AAAA,CAEtB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
import { html } from "@open-wc/testing";
|
|
3
|
+
import "@spectrum-web-components/progress-bar/sp-progress-bar.js";
|
|
4
|
+
import { testForMemoryLeaks } from "../../../test/testing-helpers.js";
|
|
5
|
+
testForMemoryLeaks(html`
|
|
6
|
+
<sp-progress-bar></sp-progress-bar>
|
|
7
|
+
`);
|
|
8
|
+
//# sourceMappingURL=progress-bar-memory.test.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["
|
|
4
|
-
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": [
|
|
3
|
+
"sources": ["progress-bar-memory.test.ts"],
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { html } from '@open-wc/testing';\nimport '@spectrum-web-components/progress-bar/sp-progress-bar.js';\nimport { testForMemoryLeaks } from '../../../test/testing-helpers.js';\n\ntestForMemoryLeaks(html`\n <sp-progress-bar></sp-progress-bar>\n`);\n"],
|
|
5
|
+
"mappings": ";AAYA,SAAS,YAAY;AACrB,OAAO;AACP,SAAS,0BAA0B;AAEnC,mBAAmB;AAAA;AAAA,CAElB;",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|