= {
return html`
@@ -116,7 +116,7 @@ const insideButton: MaterialStoryInit = {
--md-tonal-button-with-icon-spacing-trailing: 8px;
width: 80px;
}`,
- render({progress, indeterminate, fourColor}) {
+ render({value, indeterminate, fourColor}) {
const loadTime = 2500;
let loadTimeout = -1;
const toggleLoad = (target: MdTonalButton) => {
@@ -140,7 +140,7 @@ const insideButton: MaterialStoryInit = {
toggleLoad(currentTarget as MdTonalButton);
}}>
diff --git a/progress/lib/circular-progress.ts b/progress/lib/circular-progress.ts
index b12b326bf..55594ade1 100644
--- a/progress/lib/circular-progress.ts
+++ b/progress/lib/circular-progress.ts
@@ -23,7 +23,7 @@ export class CircularProgress extends Progress {
// Determinate mode is rendered with an svg so the progress arc can be
// easily animated via stroke-dashoffset.
private renderDeterminateContainer() {
- const dashOffset = (1 - this.progress) * 100;
+ const dashOffset = (1 - this.value) * 100;
// note, dash-array/offset are relative to Setting `pathLength` but
// Chrome seems to render this inaccurately and using a large viewbox helps.
const pathLength = 100;
diff --git a/progress/lib/linear-progress.ts b/progress/lib/linear-progress.ts
index 0495190f6..07726ada5 100644
--- a/progress/lib/linear-progress.ts
+++ b/progress/lib/linear-progress.ts
@@ -36,7 +36,7 @@ export class LinearProgress extends Progress {
// due to a now fixed Chrome bug: crbug.com/389359.
protected override renderIndicator() {
const progressStyles = {
- transform: `scaleX(${(this.indeterminate ? 1 : this.progress) * 100}%)`
+ transform: `scaleX(${(this.indeterminate ? 1 : this.value) * 100}%)`
};
const bufferStyles = {
transform: `scaleX(${(this.indeterminate ? 1 : this.buffer) * 100}%)`
diff --git a/progress/lib/progress.ts b/progress/lib/progress.ts
index 091a91d1d..a3910afa3 100644
--- a/progress/lib/progress.ts
+++ b/progress/lib/progress.ts
@@ -22,7 +22,7 @@ export abstract class Progress extends LitElement {
/**
* Progress to display, a fraction between 0 and 1.
*/
- @property({type: Number}) progress = 0;
+ @property({type: Number}) value = 0;
/**
* Whether or not to display indeterminate progress, which gives no indication
@@ -44,7 +44,7 @@ export abstract class Progress extends LitElement {
aria-label="${ariaLabel || nothing}"
aria-valuemin="0"
aria-valuemax="1"
- aria-valuenow=${this.indeterminate ? nothing : this.progress}
+ aria-valuenow=${this.indeterminate ? nothing : this.value}
>${this.renderIndicator()}
`;
}