fix(progress)!: rename progress property to value

PiperOrigin-RevId: 549471839

docs/components/circular-progress.md

@@ -75,7 +75,7 @@ indeterminate.](images/circularprogress/usage.gif "Determinate and indeterminate
       aria-label="Two circular progress indicators, one with three quarters of the track full
 and the other
 indeterminate.">
-    <md-circular-progress progress="0.75"></md-circular-progress>
+    <md-circular-progress value="0.75"></md-circular-progress>
 
     <md-circular-progress indeterminate></md-circular-progress>
   </figure>
@@ -86,7 +86,7 @@ indeterminate.">
 <!-- catalog-only-end -->
 
 ```html
-<md-circular-progress progress="0.75"></md-circular-progress>
+<md-circular-progress value="0.75"></md-circular-progress>
 
 <md-circular-progress indeterminate></md-circular-progress>
 ```
@@ -131,7 +131,7 @@ Add an
 attribute to progress indicators to give them a descriptive name.
 
 ```html
-<md-circular-progress progress="0.5" aria-label="Page refresh progress"></md-circular-progress>
+<md-circular-progress value="0.5" aria-label="Page refresh progress"></md-circular-progress>
 ```
 
 ## Theming
@@ -179,7 +179,7 @@ Token                                           | Default value
       }
     </style>
 
-    <md-circular-progress progress="0.5"></md-circular-progress>
+    <md-circular-progress value="0.5"></md-circular-progress>
   </figure>
 </div>
 
@@ -198,5 +198,5 @@ Token                                           | Default value
 }
 </style>
 
-<md-circular-progress progress="0.5"></md-circular-progress>
+<md-circular-progress value="0.5"></md-circular-progress>
 ```

docs/components/linear-progress.md

@@ -82,7 +82,7 @@ indeterminate.](images/linearprogress/usage.gif "Determinate and indeterminate l
       style="min-width:300px;flex-direction:column;justify-content:center;gap:16px;"
       title="Determinate and indeterminate linear progress indicators."
       aria-label="Two linear progress indicators, one with half the track and the other indeterminate.">
-    <md-linear-progress style="width:100%;" progress="0.5"></md-linear-progress>
+    <md-linear-progress style="width:100%;" value="0.5"></md-linear-progress>
     <md-linear-progress style="width:100%;" indeterminate></md-linear-progress>
   </figure>
 </div>
@@ -92,7 +92,7 @@ indeterminate.](images/linearprogress/usage.gif "Determinate and indeterminate l
 <!-- catalog-only-end -->
 
 ```html
-<md-linear-progress progress="0.5"></md-linear-progress>
+<md-linear-progress value="0.5"></md-linear-progress>
 
 <md-linear-progress indeterminate></md-linear-progress>
 ```
@@ -136,7 +136,7 @@ Add an
 attribute to progress indicators to give them a descriptive name.
 
 ```html
-<md-linear-progress progress="0.5" aria-label="Download progress"></md-linear-progress>
+<md-linear-progress value="0.5" aria-label="Download progress"></md-linear-progress>
 ```
 
 ## Theming
@@ -187,7 +187,7 @@ Token                                          | Default value
       flex-grow: 1;
     }
   </style>
-  <md-linear-progress progress="0.5"></md-linear-progress>
+  <md-linear-progress value="0.5"></md-linear-progress>
   </figure>
 </div>
 
@@ -206,5 +206,5 @@ Token                                          | Default value
 }
 </style>
 
-<md-linear-progress progress="0.5"></md-linear-progress>
+<md-linear-progress value="0.5"></md-linear-progress>
 ```

progress/demo/demo.ts

@@ -22,7 +22,7 @@ function cssWire<T = string>(prop: string, unit = '') {
 
 const collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(
     'Progress indicators', [
-      new Knob('progress', {ui: numberInput({step: 0.1}), defaultValue: 0.5}),
+      new Knob('value', {ui: numberInput({step: 0.1}), defaultValue: 0.5}),
       new Knob('indeterminate', {ui: boolInput(), defaultValue: false}),
       new Knob('fourColor', {ui: boolInput(), defaultValue: false}),
       new Knob(

progress/demo/stories.ts

@@ -19,7 +19,7 @@ import {classMap} from 'lit/directives/class-map.js';
 
 /** Knob types for linear progress stories. */
 export interface StoryKnobs {
-  progress: number;
+  value: number;
   'buffer (linear)': number;
   indeterminate: boolean;
   fourColor: boolean;
@@ -47,14 +47,14 @@ const standard: MaterialStoryInit<StoryKnobs> = {
     }
   `,
   render(knobs) {
-    const {progress, indeterminate, fourColor} = knobs;
+    const {value, indeterminate, fourColor} = knobs;
     const buffer = knobs['buffer (linear)'];
     const classes = {'custom': knobs['custom theme (linear)']};
 
     return html`
       <md-linear-progress
           class=${classMap(classes)}
-          .progress=${progress}
+          .value=${value}
           .buffer=${buffer}
           .indeterminate=${indeterminate}
           .fourColor=${fourColor}
@@ -65,10 +65,10 @@ const standard: MaterialStoryInit<StoryKnobs> = {
 
 const standardCircular: MaterialStoryInit<StoryKnobs> = {
   name: 'Circular progress',
-  render({progress, indeterminate, fourColor}) {
+  render({value, indeterminate, fourColor}) {
     return html`
       <md-circular-progress
-          .progress=${progress}
+          .value=${value}
           .indeterminate=${indeterminate}
           .fourColor=${fourColor}
       ></md-circular-progress>`;
@@ -87,7 +87,7 @@ const iconButton: MaterialStoryInit<StoryKnobs> = {
       position: absolute;
     }
   `,
-  render({progress, indeterminate, fourColor}) {
+  render({value, indeterminate, fourColor}) {
     const toggle = ({target}: Event) => {
       const spinner =
           ((target as HTMLElement).parentElement as MdCircularProgress);
@@ -97,7 +97,7 @@ const iconButton: MaterialStoryInit<StoryKnobs> = {
     return html`
       <div class="around-icon">
         <md-circular-progress
-          .progress=${progress}
+          .value=${value}
           .indeterminate=${indeterminate}
           .fourColor=${fourColor}
         ></md-circular-progress>
@@ -116,7 +116,7 @@ const insideButton: MaterialStoryInit<StoryKnobs> = {
         --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<StoryKnobs> = {
           toggleLoad(currentTarget as MdTonalButton);
         }}>
         <md-circular-progress slot="nothing"
-            .progress=${progress}
+            .value=${value}
             .indeterminate=${indeterminate}
             .fourColor=${fourColor}
         ></md-circular-progress>

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;

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}%)`

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()}</div>
     `;
   }