('.inactive-track')!;
+ expect(dots.hasAttribute('hidden')).toBeFalse();
+ expect(inactiveTrack.style.transform).toContain('scaleX(0.6)');
+ });
+
+ it('renders only the active path and no track chrome when indeterminate', async () => {
+ const {element} = await setupTest(
+ html``,
+ );
+ expect(element.shadowRoot!.querySelector('svg path.active')).not.toBeNull();
+ expect(element.shadowRoot!.querySelector('.dots')).toBeNull();
+ expect(element.shadowRoot!.querySelector('.inactive-track')).toBeNull();
+ expect(element.shadowRoot!.querySelector('.stop-indicator')).toBeNull();
+ });
+
+ it('hides dots when the buffer reaches max', async () => {
+ const {element} = await setupTest(
+ html``,
+ );
+ expect(
+ element.shadowRoot!.querySelector('.dots')!.hasAttribute('hidden'),
+ ).toBeTrue();
+ });
+
+ it('hides dots when the value reaches max', async () => {
+ const {element} = await setupTest(
+ html``,
+ );
+ expect(
+ element.shadowRoot!.querySelector('.dots')!.hasAttribute('hidden'),
+ ).toBeTrue();
+ });
+});
diff --git a/labs/gb/components/linearprogress/md-gb-linear-progress.ts b/labs/gb/components/linearprogress/md-gb-linear-progress.ts
new file mode 100644
index 0000000000..f10fced462
--- /dev/null
+++ b/labs/gb/components/linearprogress/md-gb-linear-progress.ts
@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {LinearProgressElement} from './linear-progress-element.js';
+
+declare global {
+ interface HTMLElementTagNameMap {
+ /** A Material Design linear progress component. */
+ 'md-gb-linear-progress': LinearProgressElement;
+ }
+}
+
+customElements.define('md-gb-linear-progress', LinearProgressElement);
diff --git a/labs/gb/components/shared/progress-base.ts b/labs/gb/components/shared/progress-base.ts
new file mode 100644
index 0000000000..9ec6c59aeb
--- /dev/null
+++ b/labs/gb/components/shared/progress-base.ts
@@ -0,0 +1,70 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {html, LitElement, nothing, TemplateResult} from 'lit';
+import {property} from 'lit/decorators.js';
+import {classMap, type ClassInfo} from 'lit/directives/class-map.js';
+
+import {ARIAMixinStrict} from '../../../../internal/aria/aria.js';
+import {mixinDelegatesAria} from '../../../../internal/aria/delegate.js';
+
+// Separate variable needed for closure.
+const progressBaseClass = mixinDelegatesAria(LitElement);
+
+/**
+ * A shared base class for progress indicators (circular and linear).
+ *
+ * Owns the common reactive state (`value`, `max`, `indeterminate`,
+ * `fourColor`), the `role="progressbar"` container and the ARIA wiring.
+ * Subclasses implement `renderIndicator()` to render the actual indicator DOM.
+ */
+export abstract class ProgressElement extends progressBaseClass {
+ /**
+ * Progress to display, a fraction between 0 and `max`.
+ */
+ @property({type: Number}) value = 0;
+
+ /**
+ * Maximum progress to display, defaults to 1.
+ */
+ @property({type: Number}) max = 1;
+
+ /**
+ * Whether or not to display indeterminate progress, which gives no indication
+ * to how long an activity will take.
+ */
+ @property({type: Boolean}) indeterminate = false;
+
+ /**
+ * Whether or not to render indeterminate mode using 4 colors instead of one.
+ */
+ @property({type: Boolean, attribute: 'four-color'}) fourColor = false;
+
+ protected override render() {
+ // Needed for closure conformance
+ const {ariaLabel} = this as ARIAMixinStrict;
+ return html`
+ ${this.renderIndicator()}
+ `;
+ }
+
+ protected getRenderClasses(): ClassInfo {
+ return {
+ 'indeterminate': this.indeterminate,
+ 'four-color': this.fourColor,
+ };
+ }
+
+ protected abstract renderIndicator(): TemplateResult;
+}
diff --git a/labs/gb/components/shared/wave-path.ts b/labs/gb/components/shared/wave-path.ts
new file mode 100644
index 0000000000..2fa6867453
--- /dev/null
+++ b/labs/gb/components/shared/wave-path.ts
@@ -0,0 +1,96 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+const DEG_STEP = (2 * Math.PI) / 360;
+
+function round(value: number): number {
+ return Math.round(value * 100) / 100;
+}
+
+/**
+ * Options for {@link linearWavePath}.
+ */
+export interface LinearWaveOptions {
+ width: number;
+ height: number;
+ amplitude: number;
+ wavelength: number;
+ phase?: number;
+ resolution?: number;
+}
+
+/**
+ * Builds the SVG path `d` for a horizontal sine wave centered vertically.
+ *
+ * When `amplitude` or `wavelength` is not positive a straight line is returned.
+ */
+export function linearWavePath(options: LinearWaveOptions): string {
+ const {width, height, amplitude, wavelength, phase = 0} = options;
+ const resolution =
+ options.resolution && options.resolution > 0 ? options.resolution : 1;
+ const center = height / 2;
+
+ if (amplitude <= 0 || wavelength <= 0 || width <= 0) {
+ return `M0,${round(center)} L${round(Math.max(width, 0))},${round(center)}`;
+ }
+
+ const k = (2 * Math.PI) / wavelength;
+ const points: string[] = [];
+ for (let x = 0; x < width; x += resolution) {
+ const y = center + amplitude * Math.sin(k * x + phase);
+ points.push(`${round(x)},${round(y)}`);
+ }
+ const endY = center + amplitude * Math.sin(k * width + phase);
+ points.push(`${round(width)},${round(endY)}`);
+
+ return `M${points[0]} L${points.slice(1).join(' ')}`;
+}
+
+/**
+ * Options for {@link circularWavePath}.
+ */
+export interface CircularWaveOptions {
+ size: number;
+ strokeWidth: number;
+ amplitude: number;
+ wavelength: number;
+ phase?: number;
+}
+
+/**
+ * Builds the SVG path `d` for a closed wavy ring inscribed in a square viewBox
+ * of `size` units.
+ *
+ * The number of wave cycles is rounded to an integer so the wave closes on
+ * itself without a visible seam. When `amplitude` or `wavelength` is not
+ * positive a plain circle (sampled as a closed polygon) is returned.
+ */
+export function circularWavePath(options: CircularWaveOptions): string {
+ const {size, strokeWidth, amplitude, wavelength, phase = 0} = options;
+ const center = size / 2;
+ const safeAmplitude = amplitude > 0 ? amplitude : 0;
+ const radius = center - strokeWidth / 2 - safeAmplitude;
+
+ if (radius <= 0) {
+ return '';
+ }
+
+ const circumference = 2 * Math.PI * radius;
+ const waves =
+ safeAmplitude > 0 && wavelength > 0
+ ? Math.max(1, Math.round(circumference / wavelength))
+ : 0;
+
+ const points: string[] = [];
+ for (let angle = 0; angle < 2 * Math.PI; angle += DEG_STEP) {
+ const r = radius + safeAmplitude * Math.sin(waves * angle + phase);
+ const x = center + r * Math.cos(angle);
+ const y = center + r * Math.sin(angle);
+ points.push(`${round(x)},${round(y)}`);
+ }
+
+ return `M${points[0]} L${points.slice(1).join(' ')} Z`;
+}
diff --git a/labs/gb/components/shared/wave-path_test.ts b/labs/gb/components/shared/wave-path_test.ts
new file mode 100644
index 0000000000..5fa409dc5b
--- /dev/null
+++ b/labs/gb/components/shared/wave-path_test.ts
@@ -0,0 +1,136 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// import 'jasmine'; (google3-only)
+
+import {circularWavePath, linearWavePath} from './wave-path.js';
+
+interface Point {
+ x: number;
+ y: number;
+}
+
+function parsePoints(path: string): Point[] {
+ return path
+ .replace(/[MLZ]/g, ' ')
+ .trim()
+ .split(/\s+/)
+ .filter((pair) => pair.includes(','))
+ .map((pair) => {
+ const [x, y] = pair.split(',').map(Number);
+ return {x, y};
+ });
+}
+
+describe('linearWavePath', () => {
+ it('returns a straight centered line when amplitude is 0', () => {
+ const path = linearWavePath({
+ width: 100,
+ height: 8,
+ amplitude: 0,
+ wavelength: 40,
+ });
+ expect(path).toBe('M0,4 L100,4');
+ });
+
+ it('returns a straight line when wavelength is not positive', () => {
+ const path = linearWavePath({
+ width: 100,
+ height: 8,
+ amplitude: 3,
+ wavelength: 0,
+ });
+ expect(path).toBe('M0,4 L100,4');
+ });
+
+ it('starts at x=0 and ends at x=width', () => {
+ const points = parsePoints(
+ linearWavePath({width: 120, height: 10, amplitude: 3, wavelength: 40}),
+ );
+ expect(points[0].x).toBe(0);
+ expect(points[points.length - 1].x).toBe(120);
+ });
+
+ it('keeps all x values monotonically non-decreasing within bounds', () => {
+ const points = parsePoints(
+ linearWavePath({width: 120, height: 10, amplitude: 3, wavelength: 40}),
+ );
+ for (let i = 1; i < points.length; i++) {
+ expect(points[i].x).toBeGreaterThanOrEqual(points[i - 1].x);
+ expect(points[i].x).toBeLessThanOrEqual(120);
+ }
+ });
+
+ it('oscillates within +/- amplitude of the vertical center', () => {
+ const amplitude = 3;
+ const center = 5;
+ const points = parsePoints(
+ linearWavePath({width: 200, height: 10, amplitude, wavelength: 40}),
+ );
+ let maxDeviation = 0;
+ for (const {y} of points) {
+ maxDeviation = Math.max(maxDeviation, Math.abs(y - center));
+ expect(Math.abs(y - center)).toBeLessThanOrEqual(amplitude + 0.01);
+ }
+ expect(maxDeviation).toBeGreaterThan(amplitude - 0.5);
+ });
+});
+
+describe('circularWavePath', () => {
+ it('returns a closed path', () => {
+ const path = circularWavePath({
+ size: 48,
+ strokeWidth: 4,
+ amplitude: 2,
+ wavelength: 15,
+ });
+ expect(path.startsWith('M')).toBeTrue();
+ expect(path.endsWith('Z')).toBeTrue();
+ });
+
+ it('returns an empty string when the radius collapses', () => {
+ const path = circularWavePath({
+ size: 4,
+ strokeWidth: 8,
+ amplitude: 2,
+ wavelength: 15,
+ });
+ expect(path).toBe('');
+ });
+
+ it('samples a constant radius when amplitude is 0', () => {
+ const size = 48;
+ const strokeWidth = 4;
+ const center = size / 2;
+ const expectedRadius = center - strokeWidth / 2;
+ const points = parsePoints(
+ circularWavePath({size, strokeWidth, amplitude: 0, wavelength: 15}),
+ );
+ for (const {x, y} of points) {
+ const r = Math.hypot(x - center, y - center);
+ expect(Math.abs(r - expectedRadius)).toBeLessThan(0.05);
+ }
+ });
+
+ it('keeps every point within +/- amplitude of the midline radius', () => {
+ const size = 48;
+ const strokeWidth = 4;
+ const amplitude = 2;
+ const center = size / 2;
+ const midlineRadius = center - strokeWidth / 2 - amplitude;
+ const points = parsePoints(
+ circularWavePath({size, strokeWidth, amplitude, wavelength: 15}),
+ );
+ let maxRadius = 0;
+ for (const {x, y} of points) {
+ const r = Math.hypot(x - center, y - center);
+ expect(r).toBeGreaterThanOrEqual(midlineRadius - amplitude - 0.05);
+ expect(r).toBeLessThanOrEqual(midlineRadius + amplitude + 0.05);
+ maxRadius = Math.max(maxRadius, r);
+ }
+ expect(maxRadius).toBeLessThanOrEqual(center - strokeWidth / 2 + 0.05);
+ });
+});