fix(progress): squash linearprogress and circular progress into progress

This changes the following imports from:

```js
import '@material/web/circularprogress/circular-progress.js';
import '@material/web/linearprogress/linear-progress.js';
```

to

```js
import '@material/web/progress/circular-progress.js';
import '@material/web/progress/linear-progress.js';
```

PiperOrigin-RevId: 547860610

catalog/src/ssr.ts

@@ -15,7 +15,7 @@ import '@material/web/menu/menu.js';
 import '@material/web/checkbox/checkbox.js';
 import '@material/web/list/list.js';
 import '@material/web/list/list-item-link.js';
-import '@material/web/circularprogress/circular-progress.js';
+import '@material/web/progress/circular-progress.js';
 import '@material/web/tabs/tabs.js';
 import '@material/web/tabs/tab.js';
 import '@material/web/iconbutton/standard-icon-button.js';
@@ -27,4 +27,4 @@ import '@material/web/button/filled-button.js';
 import '@material/web/button/tonal-button.js';
 import '@material/web/button/outlined-button.js';
 import '@material/web/button/text-button.js';
-import '@material/web/linearprogress/linear-progress.js';
+import '@material/web/progress/linear-progress.js';

circularprogress/circular-progress.ts

@@ -4,28 +4,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {customElement} from 'lit/decorators.js';
-
-import {CircularProgress} from './lib/circular-progress.js';
-import {styles} from './lib/circular-progress-styles.css.js';
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'md-circular-progress': MdCircularProgress;
-  }
-}
-
 /**
- * @summary Circular progress indicators display progress by animating along an
- * invisible circular track in a clockwise direction. They can be applied
- * directly to a surface, such as a button or card.
- *
- * @description
- * Progress indicators inform users about the status of ongoing processes.
- * - Determinate indicators display how long a process will take.
- * - Indeterminate indicators express an unspecified amount of wait time.
+ * TODO(b/291100596): Stub left behind for migration. Prefer
+ * `import @material/web/progress/circular-progress.js`
  */
-@customElement('md-circular-progress')
-export class MdCircularProgress extends CircularProgress {
-  static override styles = [styles];
-}
+
+export * from '@material/web/progress/circular-progress.js';

linearprogress/linear-progress.ts

@@ -4,27 +4,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {customElement} from 'lit/decorators.js';
-
-import {LinearProgress} from './lib/linear-progress.js';
-import {styles} from './lib/linear-progress-styles.css.js';
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'md-linear-progress': MdLinearProgress;
-  }
-}
-
 /**
- * @summary Linear progress indicators display progress by animating along the
- * length of a fixed, visible track.
- *
- * @description
- * Progress indicators inform users about the status of ongoing processes.
- * - Determinate indicators display how long a process will take.
- * - Indeterminate indicators express an unspecified amount of wait time.
+ * TODO(b/291100596): Stub left behind for migration. Prefer
+ * `import @material/web/progress/linear-progress.js`
  */
-@customElement('md-linear-progress')
-export class MdLinearProgress extends LinearProgress {
-  static override styles = [styles];
-}
+
+export * from '@material/web/progress/linear-progress.js';

progress/circular-progress.ts

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {customElement} from 'lit/decorators.js';
+
+import {CircularProgress} from './lib/circular-progress.js';
+import {styles} from './lib/circular-progress-styles.css.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'md-circular-progress': MdCircularProgress;
+  }
+}
+
+/**
+ * @summary Circular progress indicators display progress by animating along an
+ * invisible circular track in a clockwise direction. They can be applied
+ * directly to a surface, such as a button or card.
+ *
+ * @description
+ * Progress indicators inform users about the status of ongoing processes.
+ * - Determinate indicators display how long a process will take.
+ * - Indeterminate indicators express an unspecified amount of wait time.
+ */
+@customElement('md-circular-progress')
+export class MdCircularProgress extends CircularProgress {
+  static override styles = [styles];
+}

linearprogress/demo/demo.ts → progress/demo/demo.ts

@@ -21,28 +21,39 @@ function cssWire<T = string>(prop: string, unit = '') {
 }
 
 const collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(
-    'Progress indicators (linear)', [
+    'Progress indicators', [
       new Knob('progress', {ui: numberInput({step: 0.1}), defaultValue: 0.5}),
-      new Knob('buffer', {ui: numberInput({step: 0.1}), defaultValue: 0.8}),
       new Knob('indeterminate', {ui: boolInput(), defaultValue: false}),
       new Knob('fourColor', {ui: boolInput(), defaultValue: false}),
-      new Knob('track color', {
+      new Knob(
+          'buffer (linear)', {ui: numberInput({step: 0.1}), defaultValue: 0.8}),
+      new Knob('track color (linear)', {
         ui: colorPicker(),
         defaultValue: '',
         wiring: cssWire('--md-linear-progress-track-color')
       }),
-      new Knob('track height', {
+      new Knob('track height (linear)', {
         ui: numberInput(),
         defaultValue: 4,
         wiring: cssWire<number>('--md-linear-progress-track-height', 'px')
       }),
-      new Knob('indicator height', {
+      new Knob('indicator height (linear)', {
         ui: numberInput(),
         defaultValue: 4,
         wiring: cssWire<number>(
             '--md-linear-progress-active-indicator-height', 'px')
       }),
-      new Knob('custom theme', {ui: boolInput()}),
+      new Knob('custom theme (linear)', {ui: boolInput()}),
+      new Knob('size (circular)', {
+        ui: numberInput(),
+        defaultValue: 48,
+        wiring: cssWire<number>('--md-circular-progress-size', 'px')
+      }),
+      new Knob('trackWidth (circular)', {
+        ui: numberInput(),
+        defaultValue: 8.33,
+        wiring: cssWire<number>('--md-circular-progress-active-indicator-width')
+      }),
     ]);
 
 collection.addStories(...materialInitsToStoryInits(stories));

circularprogress/demo/stories.ts → progress/demo/stories.ts

@@ -4,27 +4,66 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+
+import '@material/web/progress/linear-progress.js';
 import '@material/web/button/tonal-button.js';
 import '@material/web/icon/icon.js';
 import '@material/web/iconbutton/standard-icon-button.js';
-import '@material/web/circularprogress/circular-progress.js';
+import '@material/web/progress/circular-progress.js';
 
 import {MdTonalButton} from '@material/web/button/tonal-button.js';
-import {MdCircularProgress} from '@material/web/circularprogress/circular-progress.js';
 import {MaterialStoryInit} from './material-collection.js';
+import {MdCircularProgress} from '@material/web/progress/circular-progress.js';
 import {css, html} from 'lit';
+import {classMap} from 'lit/directives/class-map.js';
 
-
-/** Knob types for circular-progress stories. */
+/** Knob types for linear progress stories. */
 export interface StoryKnobs {
   progress: number;
+  'buffer (linear)': number;
   indeterminate: boolean;
   fourColor: boolean;
-  size: number;
-  trackWidth: number;
+  'track color (linear)': string;
+  'track height (linear)': number;
+  'indicator height (linear)': number;
+  'custom theme (linear)': boolean;
+  'size (circular)': number;
+  'trackWidth (circular)': number;
 }
 
 const standard: MaterialStoryInit<StoryKnobs> = {
+  name: 'Linear progress',
+  styles: css`
+    md-linear-progress {
+      inline-size: 50vw;
+    }
+
+    .custom {
+      --md-linear-progress-active-indicator-color: linear-gradient(steelblue, lightblue);
+      --md-linear-progress-track-color: gainsboro;
+      --md-linear-progress-active-indicator-height: 20px;
+      --md-linear-progress-track-height: 20px;
+      --md-linear-progress-track-shape: 9999px;
+    }
+  `,
+  render(knobs) {
+    const {progress, 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}
+          .buffer=${buffer}
+          .indeterminate=${indeterminate}
+          .fourColor=${fourColor}
+      ></md-linear-progress>`;
+  }
+};
+
+
+const standardCircular: MaterialStoryInit<StoryKnobs> = {
   name: 'Circular progress',
   render({progress, indeterminate, fourColor}) {
     return html`
@@ -100,5 +139,5 @@ const insideButton: MaterialStoryInit<StoryKnobs> = {
   }
 };
 
-/** Circular Progress stories. */
-export const stories = [standard, iconButton, insideButton];
+/** Linear Progress stories. */
+export const stories = [standard, standardCircular, iconButton, insideButton];

linearprogress/harness.ts → progress/harness.ts

@@ -6,6 +6,7 @@
 
 import {Harness} from '../testing/harness.js';
 
+import {CircularProgress} from './lib/circular-progress.js';
 import {LinearProgress} from './lib/linear-progress.js';
 
 /**
@@ -19,3 +20,13 @@ export class LinearProgressHarness extends Harness<LinearProgress> {
     return this.element['rootEl'];
   }
 }
+
+/**
+ * Test harness for circular-progress.
+ */
+export class CircularProgressHarness extends Harness<CircularProgress> {
+  override async getInteractiveElement() {
+    await this.element.updateComplete;
+    return this.element.querySelector<HTMLElement>('.circularProgresss')!;
+  }
+}