@fluentui/web-components 3.0.0-beta.107 → 3.0.0-beta.109

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/CHANGELOG.md +20 -2
  2. package/custom-elements.json +14 -0
  3. package/dist/esm/progress-bar/progress-bar.base.d.ts +4 -5
  4. package/dist/esm/progress-bar/progress-bar.base.js +26 -15
  5. package/dist/esm/progress-bar/progress-bar.base.js.map +1 -1
  6. package/dist/esm/progress-bar/progress-bar.d.ts +1 -1
  7. package/dist/esm/progress-bar/progress-bar.styles.js +11 -0
  8. package/dist/esm/progress-bar/progress-bar.styles.js.map +1 -1
  9. package/dist/esm/progress-bar/progress-bar.template.js +2 -8
  10. package/dist/esm/progress-bar/progress-bar.template.js.map +1 -1
  11. package/dist/web-components.d.ts +4 -5
  12. package/dist/web-components.js +20 -5
  13. package/dist/web-components.min.js +70 -70
  14. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,12 +1,30 @@
1
1
  # Change Log - @fluentui/web-components
2
2
 
3
- This log was last generated on Mon, 02 Jun 2025 04:06:59 GMT and should not be manually modified.
3
+ This log was last generated on Fri, 20 Jun 2025 04:06:19 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [3.0.0-beta.109](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.109)
8
+
9
+ Fri, 20 Jun 2025 04:06:19 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.108..@fluentui/web-components_v3.0.0-beta.109)
11
+
12
+ ### Changes
13
+
14
+ - fix: progress bar when value is missing in firefox and safari ([PR #34684](https://github.com/microsoft/fluentui/pull/34684) by machi@microsoft.com)
15
+
16
+ ## [3.0.0-beta.108](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.108)
17
+
18
+ Thu, 19 Jun 2025 04:06:30 GMT
19
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.107..@fluentui/web-components_v3.0.0-beta.108)
20
+
21
+ ### Changes
22
+
23
+ - refactor: use css attr func to calculate progress indicator width ([PR #34674](https://github.com/microsoft/fluentui/pull/34674) by machi@microsoft.com)
24
+
7
25
  ## [3.0.0-beta.107](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.107)
8
26
 
9
- Mon, 02 Jun 2025 04:06:59 GMT
27
+ Mon, 02 Jun 2025 04:07:10 GMT
10
28
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.106..@fluentui/web-components_v3.0.0-beta.107)
11
29
 
12
30
  ### Changes
package/custom-elements.json CHANGED
@@ -18411,6 +18411,11 @@
18411
18411
  ],
18412
18412
  "description": "Updates the percent complete when the `min` property changes."
18413
18413
  },
18414
+ {
18415
+ "kind": "method",
18416
+ "name": "setIndicatorWidth",
18417
+ "privacy": "private"
18418
+ },
18414
18419
  {
18415
18420
  "kind": "field",
18416
18421
  "name": "role",
@@ -18549,6 +18554,15 @@
18549
18554
  "module": "src/progress-bar/progress-bar.base.ts"
18550
18555
  }
18551
18556
  },
18557
+ {
18558
+ "kind": "method",
18559
+ "name": "setIndicatorWidth",
18560
+ "privacy": "private",
18561
+ "inheritedFrom": {
18562
+ "name": "BaseProgressBar",
18563
+ "module": "src/progress-bar/progress-bar.base.ts"
18564
+ }
18565
+ },
18552
18566
  {
18553
18567
  "kind": "field",
18554
18568
  "name": "role",
package/dist/esm/progress-bar/progress-bar.base.d.ts CHANGED
@@ -7,6 +7,8 @@ import { ProgressBarValidationState } from './progress-bar.options.js';
7
7
  * @public
8
8
  */
9
9
  export declare class BaseProgressBar extends FASTElement {
10
+ /** @internal */
11
+ indicator: HTMLElement;
10
12
  /**
11
13
  * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
12
14
  *
@@ -64,10 +66,7 @@ export declare class BaseProgressBar extends FASTElement {
64
66
  * @internal
65
67
  */
66
68
  protected maxChanged(prev: number | undefined, next: number | undefined): void;
67
- /**
68
- * Indicates progress in %
69
- * @internal
70
- */
71
- get percentComplete(): number;
72
69
  constructor();
70
+ connectedCallback(): void;
71
+ private setIndicatorWidth;
73
72
  }
package/dist/esm/progress-bar/progress-bar.base.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { __decorate } from "tslib";
2
- import { attr, FASTElement, nullableNumberConverter, volatile } from '@microsoft/fast-element';
2
+ import { attr, FASTElement, nullableNumberConverter, observable } from '@microsoft/fast-element';
3
3
  import { swapStates } from '../utils/element-internals.js';
4
4
  import { ProgressBarValidationState } from './progress-bar.options.js';
5
5
  /**
@@ -24,6 +24,7 @@ export class BaseProgressBar extends FASTElement {
24
24
  */
25
25
  valueChanged(prev, next) {
26
26
  this.elementInternals.ariaValueNow = typeof next === 'number' ? `${next}` : null;
27
+ this.setIndicatorWidth();
27
28
  }
28
29
  /**
29
30
  * Updates the percent complete when the `min` property changes.
@@ -33,6 +34,7 @@ export class BaseProgressBar extends FASTElement {
33
34
  */
34
35
  minChanged(prev, next) {
35
36
  this.elementInternals.ariaValueMin = typeof next === 'number' ? `${next}` : null;
37
+ this.setIndicatorWidth();
36
38
  }
37
39
  /**
38
40
  * Updates the percent complete when the `max` property changes.
@@ -43,17 +45,7 @@ export class BaseProgressBar extends FASTElement {
43
45
  */
44
46
  maxChanged(prev, next) {
45
47
  this.elementInternals.ariaValueMax = typeof next === 'number' ? `${next}` : null;
46
- }
47
- /**
48
- * Indicates progress in %
49
- * @internal
50
- */
51
- get percentComplete() {
52
- const min = this.min ?? 0;
53
- const max = this.max ?? 100;
54
- const value = this.value ?? 0;
55
- const range = max - min;
56
- return range === 0 ? 0 : Math.fround(((value - min) / range) * 100);
48
+ this.setIndicatorWidth();
57
49
  }
58
50
  constructor() {
59
51
  super();
@@ -71,7 +63,29 @@ export class BaseProgressBar extends FASTElement {
71
63
  this.validationState = null;
72
64
  this.elementInternals.role = 'progressbar';
73
65
  }
66
+ connectedCallback() {
67
+ super.connectedCallback();
68
+ this.setIndicatorWidth();
69
+ }
70
+ setIndicatorWidth() {
71
+ if (!this.$fastController.isConnected || CSS.supports('width: attr(value type(<number>))')) {
72
+ return;
73
+ }
74
+ if (typeof this.value !== 'number') {
75
+ this.indicator.style.removeProperty('width');
76
+ return;
77
+ }
78
+ const min = this.min ?? 0;
79
+ const max = this.max ?? 100;
80
+ const value = this.value ?? 0;
81
+ const range = max - min;
82
+ const width = range === 0 ? 0 : Math.fround(((value - min) / range) * 100);
83
+ this.indicator.style.setProperty('width', `${width}%`);
84
+ }
74
85
  }
86
+ __decorate([
87
+ observable
88
+ ], BaseProgressBar.prototype, "indicator", void 0);
75
89
  __decorate([
76
90
  attr({ attribute: 'validation-state' })
77
91
  ], BaseProgressBar.prototype, "validationState", void 0);
@@ -84,7 +98,4 @@ __decorate([
84
98
  __decorate([
85
99
  attr({ converter: nullableNumberConverter })
86
100
  ], BaseProgressBar.prototype, "max", void 0);
87
- __decorate([
88
- volatile
89
- ], BaseProgressBar.prototype, "percentComplete", null);
90
101
  //# sourceMappingURL=progress-bar.base.js.map
package/dist/esm/progress-bar/progress-bar.base.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"progress-bar.base.js","sourceRoot":"","sources":["../../../src/progress-bar/progress-bar.base.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,uBAAuB,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC/F,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,0BAA0B,EAAE,MAAM,2BAA2B,CAAC;AAEvE;;;;;GAKG;AACH,MAAM,OAAO,eAAgB,SAAQ,WAAW;IAgB9C;;;;OAIG;IACI,sBAAsB,CAC3B,IAA4C,EAC5C,IAA4C;QAE5C,UAAU,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,0BAA0B,CAAC,CAAC;IAC5E,CAAC;IAUD;;;;OAIG;IACO,YAAY,CAAC,IAAwB,EAAE,IAAwB;QACvE,IAAI,CAAC,gBAAgB,CAAC,YAAY,GAAG,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;IACnF,CAAC;IAUD;;;;;OAKG;IACO,UAAU,CAAC,IAAwB,EAAE,IAAwB;QACrE,IAAI,CAAC,gBAAgB,CAAC,YAAY,GAAG,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;IACnF,CAAC;IAUD;;;;;;OAMG;IACO,UAAU,CAAC,IAAwB,EAAE,IAAwB;QACrE,IAAI,CAAC,gBAAgB,CAAC,YAAY,GAAG,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;IACnF,CAAC;IAED;;;OAGG;IAEH,IAAW,eAAe;QACxB,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;QAC1B,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC;QAC5B,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC;QAC9B,MAAM,KAAK,GAAG,GAAG,GAAG,GAAG,CAAC;QAExB,OAAO,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,KAAK,CAAC,GAAG,GAAG,CAAC,CAAC;IACtE,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QAhGV;;;;WAIG;QACI,qBAAgB,GAAqB,IAAI,CAAC,eAAe,EAAE,CAAC;QAEnE;;;;WAIG;QAEI,oBAAe,GAAsC,IAAI,CAAC;QAqF/D,IAAI,CAAC,gBAAgB,CAAC,IAAI,GAAG,aAAa,CAAC;IAC7C,CAAC;CACF;AAvFQ;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;wDACyB;AAoB1D;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;8CACvB;AAiBf;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;4CACzB;AAkBb;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;4CACzB;AAkBpB;IADC,QAAQ;sDAQR"}
1
+ {"version":3,"file":"progress-bar.base.js","sourceRoot":"","sources":["../../../src/progress-bar/progress-bar.base.ts"],"names":[],"mappings":"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"}
package/dist/esm/progress-bar/progress-bar.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { BaseProgressBar } from './progress-bar.base.js';
2
- import { ProgressBarShape, ProgressBarThickness } from './progress-bar.options.js';
2
+ import type { ProgressBarShape, ProgressBarThickness } from './progress-bar.options.js';
3
3
  /**
4
4
  * A Progress HTML Element.
5
5
  * Based on BaseProgressBar and includes style and layout specific attributes
package/dist/esm/progress-bar/progress-bar.styles.js CHANGED
@@ -14,6 +14,13 @@ export const styles = css `
14
14
  background-color: ${colorNeutralBackground6};
15
15
  border-radius: ${borderRadiusMedium};
16
16
  contain: content;
17
+
18
+ @supports (width: attr(value type(<number>))) {
19
+ --max: attr(max type(<number>), 100);
20
+ --min: attr(min type(<number>), 0);
21
+ --value: attr(value type(<number>), 0);
22
+ --indicator-width: clamp(0%, calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * 100%), 100%);
23
+ }
17
24
  }
18
25
 
19
26
  :host([thickness='large']) {
@@ -32,6 +39,10 @@ export const styles = css `
32
39
 
33
40
  :host([value]) .indicator {
34
41
  transition: all 0.2s ease-in-out;
42
+
43
+ @supports (width: attr(value type(<number>))) {
44
+ width: var(--indicator-width);
45
+ }
35
46
  }
36
47
 
37
48
  :host(:not([value])) .indicator {
package/dist/esm/progress-bar/progress-bar.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"progress-bar.styles.js","sourceRoot":"","sources":["../../../src/progress-bar/progress-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,8BAA8B,EAAE,MAAM,mBAAmB,CAAC;AAC5E,OAAO,EACL,kBAAkB,EAClB,gBAAgB,EAChB,4BAA4B,EAC5B,uBAAuB,EACvB,iCAAiC,EACjC,4BAA4B,EAC5B,0BAA0B,EAC1B,0BAA0B,GAC3B,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,OAAO,CAAC;;;;;;wBAMI,uBAAuB;qBAC1B,kBAAkB;;;;;;;;;qBASlB,gBAAgB;;;;wBAIb,4BAA4B;;;;;;;;;;;;;;QAc5C,uBAAuB;QACvB,0BAA0B;QAC1B,uBAAuB;;;;;;;;;wBASP,0BAA0B;;;;wBAI1B,iCAAiC;;;;wBAIjC,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;CAwBnD,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;GAQjC,CAAC,CACH,CAAC"}
1
+ {"version":3,"file":"progress-bar.styles.js","sourceRoot":"","sources":["../../../src/progress-bar/progress-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,8BAA8B,EAAE,MAAM,mBAAmB,CAAC;AAC5E,OAAO,EACL,kBAAkB,EAClB,gBAAgB,EAChB,4BAA4B,EAC5B,uBAAuB,EACvB,iCAAiC,EACjC,4BAA4B,EAC5B,0BAA0B,EAC1B,0BAA0B,GAC3B,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,OAAO,CAAC;;;;;;wBAMI,uBAAuB;qBAC1B,kBAAkB;;;;;;;;;;;;;;;;qBAgBlB,gBAAgB;;;;wBAIb,4BAA4B;;;;;;;;;;;;;;;;;;QAkB5C,uBAAuB;QACvB,0BAA0B;QAC1B,uBAAuB;;;;;;;;;wBASP,0BAA0B;;;;wBAI1B,iCAAiC;;;;wBAIjC,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;CAwBnD,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;GAQjC,CAAC,CACH,CAAC"}
package/dist/esm/progress-bar/progress-bar.template.js CHANGED
@@ -1,12 +1,6 @@
1
- import { html } from '@microsoft/fast-element';
1
+ import { html, ref } from '@microsoft/fast-element';
2
2
  export function progressTemplate() {
3
- return html `
4
- <div
5
- class="indicator"
6
- part="indicator"
7
- style="${x => (typeof x.value === 'number' ? `width: ${x.percentComplete}%` : void 0)}"
8
- ></div>
9
- `;
3
+ return html ` <div class="indicator" part="indicator" ${ref('indicator')}></div> `;
10
4
  }
11
5
  export const template = progressTemplate();
12
6
  //# sourceMappingURL=progress-bar.template.js.map
package/dist/esm/progress-bar/progress-bar.template.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"progress-bar.template.js","sourceRoot":"","sources":["../../../src/progress-bar/progress-bar.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAI/C,MAAM,UAAU,gBAAgB;IAC9B,OAAO,IAAI,CAAA;;;;eAIE,CAAC,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,eAAe,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;;GAExF,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAqC,gBAAgB,EAAE,CAAC"}
1
+ {"version":3,"file":"progress-bar.template.js","sourceRoot":"","sources":["../../../src/progress-bar/progress-bar.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAIpD,MAAM,UAAU,gBAAgB;IAC9B,OAAO,IAAI,CAAA,4CAA4C,GAAG,CAAC,WAAW,CAAC,UAAU,CAAC;AACpF,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAqC,gBAAgB,EAAE,CAAC"}
package/dist/web-components.d.ts CHANGED
@@ -2194,6 +2194,8 @@ export declare class BaseField extends FASTElement {
2194
2194
  * @public
2195
2195
  */
2196
2196
  export declare class BaseProgressBar extends FASTElement {
2197
+ /** @internal */
2198
+ indicator: HTMLElement;
2197
2199
  /**
2198
2200
  * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
2199
2201
  *
@@ -2251,12 +2253,9 @@ export declare class BaseProgressBar extends FASTElement {
2251
2253
  * @internal
2252
2254
  */
2253
2255
  protected maxChanged(prev: number | undefined, next: number | undefined): void;
2254
- /**
2255
- * Indicates progress in %
2256
- * @internal
2257
- */
2258
- get percentComplete(): number;
2259
2256
  constructor();
2257
+ connectedCallback(): void;
2258
+ private setIndicatorWidth;
2260
2259
  }
2261
2260
 
2262
2261
  /**
package/dist/web-components.js CHANGED
@@ -9611,6 +9611,7 @@ class BaseProgressBar extends FASTElement {
9611
9611
  */
9612
9612
  valueChanged(prev, next) {
9613
9613
  this.elementInternals.ariaValueNow = typeof next === "number" ? `${next}` : null;
9614
+ this.setIndicatorWidth();
9614
9615
  }
9615
9616
  /**
9616
9617
  * Updates the percent complete when the `min` property changes.
@@ -9620,6 +9621,7 @@ class BaseProgressBar extends FASTElement {
9620
9621
  */
9621
9622
  minChanged(prev, next) {
9622
9623
  this.elementInternals.ariaValueMin = typeof next === "number" ? `${next}` : null;
9624
+ this.setIndicatorWidth();
9623
9625
  }
9624
9626
  /**
9625
9627
  * Updates the percent complete when the `max` property changes.
@@ -9630,15 +9632,29 @@ class BaseProgressBar extends FASTElement {
9630
9632
  */
9631
9633
  maxChanged(prev, next) {
9632
9634
  this.elementInternals.ariaValueMax = typeof next === "number" ? `${next}` : null;
9635
+ this.setIndicatorWidth();
9633
9636
  }
9634
- get percentComplete() {
9637
+ connectedCallback() {
9638
+ super.connectedCallback();
9639
+ this.setIndicatorWidth();
9640
+ }
9641
+ setIndicatorWidth() {
9642
+ if (!this.$fastController.isConnected || CSS.supports("width: attr(value type(<number>))")) {
9643
+ return;
9644
+ }
9645
+ if (typeof this.value !== "number") {
9646
+ this.indicator.style.removeProperty("width");
9647
+ return;
9648
+ }
9635
9649
  const min = this.min ?? 0;
9636
9650
  const max = this.max ?? 100;
9637
9651
  const value = this.value ?? 0;
9638
9652
  const range = max - min;
9639
- return range === 0 ? 0 : Math.fround((value - min) / range * 100);
9653
+ const width = range === 0 ? 0 : Math.fround((value - min) / range * 100);
9654
+ this.indicator.style.setProperty("width", `${width}%`);
9640
9655
  }
9641
9656
  }
9657
+ __decorateClass$m([observable], BaseProgressBar.prototype, "indicator", 2);
9642
9658
  __decorateClass$m([attr({
9643
9659
  attribute: "validation-state"
9644
9660
  })], BaseProgressBar.prototype, "validationState", 2);
@@ -9651,7 +9667,6 @@ __decorateClass$m([attr({
9651
9667
  __decorateClass$m([attr({
9652
9668
  converter: nullableNumberConverter
9653
9669
  })], BaseProgressBar.prototype, "max", 2);
9654
- __decorateClass$m([volatile], BaseProgressBar.prototype, "percentComplete", 1);
9655
9670
 
9656
9671
  var __defProp$l = Object.defineProperty;
9657
9672
  var __getOwnPropDesc$l = Object.getOwnPropertyDescriptor;
@@ -9668,13 +9683,13 @@ __decorateClass$l([attr], ProgressBar.prototype, "shape", 2);
9668
9683
  const styles$h = css`
9669
9684
  ${display("block")}
9670
9685
 
9671
- :host{width:100%;height:2px;overflow-x:hidden;background-color:${colorNeutralBackground6};border-radius:${borderRadiusMedium};contain:content}:host([thickness='large']){height:4px}:host([shape='square']){border-radius:${borderRadiusNone}}.indicator{background-color:${colorCompoundBrandBackground};border-radius:inherit;height:100%}:host([value]) .indicator{transition:all 0.2s ease-in-out}:host(:not([value])) .indicator{position:relative;width:33%;background-image:linear-gradient(
9686
+ :host{width:100%;height:2px;overflow-x:hidden;background-color:${colorNeutralBackground6};border-radius:${borderRadiusMedium};contain:content;@supports (width:attr(value type(<number>))){--max:attr(max type(<number>),100);--min:attr(min type(<number>),0);--value:attr(value type(<number>),0);--indicator-width:clamp(0%,calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * 100%),100%)}}:host([thickness='large']){height:4px}:host([shape='square']){border-radius:${borderRadiusNone}}.indicator{background-color:${colorCompoundBrandBackground};border-radius:inherit;height:100%}:host([value]) .indicator{transition:all 0.2s ease-in-out;@supports (width:attr(value type(<number>))){width:var(--indicator-width)}}:host(:not([value])) .indicator{position:relative;width:33%;background-image:linear-gradient(
9672
9687
  to right,${colorNeutralBackground6} 0%,${colorTransparentBackground} 50%,${colorNeutralBackground6} 100%
9673
9688
  );animation-name:indeterminate;animation-duration:3s;animation-timing-function:linear;animation-iteration-count:infinite}:host([validation-state='error']) .indicator{background-color:${colorPaletteRedBackground3}}:host([validation-state='warning']) .indicator{background-color:${colorPaletteDarkOrangeBackground3}}:host([validation-state='success']) .indicator{background-color:${colorPaletteGreenBackground3}}@layer animations{@media (prefers-reduced-motion:no-preference){:host([value]){transition:none}:host(:not([value])) .indicator{animation-duration:0.01ms;animation-iteration-count:1}}}@keyframes indeterminate{0%{inset-inline-start:-33%}100%{inset-inline-start:100%}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
9674
9689
  :host{background-color:CanvasText}.indicator,:host(:is([validation-state='success'],[validation-state='warning'],[validation-state='error'])) .indicator{background-color:Highlight}`));
9675
9690
 
9676
9691
  function progressTemplate() {
9677
- return html`<div class="indicator" part="indicator" style="${x => typeof x.value === "number" ? `width: ${x.percentComplete}%` : void 0}"></div>`;
9692
+ return html`<div class="indicator" part="indicator" ${ref("indicator")}></div>`;
9678
9693
  }
9679
9694
  const template$h = progressTemplate();
9680
9695