copybara-service · Sep 29, 2026
diff --git a/labs/aria/progress/demo/demo.ts b/labs/aria/progress/demo/demo.ts
@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import './material-collection.js';
+import './index.js';
+
+import {
+  KnobTypesToKnobs,
+  MaterialCollection,
+  materialInitsToStoryInits,
+  setUpDemo,
+} from './material-collection.js';
+import {boolInput, Knob, numberInput} from './index.js';
+
+import {stories, StoryKnobs} from './stories.js';
+
+const collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(
+  'ARIA Progress',
+  [
+    new Knob('indeterminate', {ui: boolInput(), defaultValue: false}),
+    new Knob('value', {ui: numberInput({step: 1}), defaultValue: 50}),
+    new Knob('min', {ui: numberInput(), defaultValue: 0}),
+    new Knob('max', {ui: numberInput(), defaultValue: 100}),
+  ],
+);
+
+collection.addStories(...materialInitsToStoryInits(stories));
+
+setUpDemo(collection);
diff --git a/labs/aria/progress/demo/stories.ts b/labs/aria/progress/demo/stories.ts
@@ -0,0 +1,134 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import '@material/web/labs/aria/progress/md-aria-progress.js';
+
+import {MaterialStoryInit} from './material-collection.js';
+import {css, html, nothing} from 'lit';
+
+/** Knob types for ARIA Progress stories. */
+export interface StoryKnobs {
+  indeterminate?: boolean;
+  value?: number;
+  min?: number;
+  max?: number;
+}
+
+const progress: MaterialStoryInit<StoryKnobs> = {
+  name: 'progress',
+  render(knobs) {
+    return html`
+      <md-aria-progress
+        value=${knobs.indeterminate ? nothing : (knobs.value ?? nothing)}
+        min=${knobs.indeterminate ? nothing : (knobs.min ?? nothing)}
+        max=${knobs.indeterminate
+          ? nothing
+          : (knobs.max ?? nothing)}></md-aria-progress>
+    `;
+  },
+};
+
+const progressCustom: MaterialStoryInit<StoryKnobs> = {
+  name: 'custom progress',
+  styles: css`
+    /* |@property| would be nice here... */
+    @keyframes --linear-time {
+      0% {
+        --time: 0;
+      }
+      10% {
+        --time: 0.1;
+      }
+      20% {
+        --time: 0.2;
+      }
+      30% {
+        --time: 0.3;
+      }
+      40% {
+        --time: 0.4;
+      }
+      50% {
+        --time: 0.5;
+      }
+      60% {
+        --time: 0.6;
+      }
+      70% {
+        --time: 0.7;
+      }
+      80% {
+        --time: 0.8;
+      }
+      90% {
+        --time: 0.9;
+      }
+      100% {
+        --time: 1;
+      }
+    }
+
+    #track,
+    #bar {
+      --track-border-width: 1px;
+      position: absolute;
+      inset: 0px;
+      border-radius: 10000px;
+      --bg: peachpuff;
+      --fg: coral;
+      background-color: var(--bg);
+
+      @media (forced-colors: active) {
+        --fg: CanvasText;
+      }
+    }
+
+    #track {
+      border: var(--track-border-width) solid var(--fg);
+    }
+
+    #bar {
+      --bar-inset: calc(var(--track-border-width) + 1px);
+      inset: var(--bar-inset);
+      background-color: var(--fg);
+
+      md-aria-progress:state(indeterminate) & {
+        forced-color-adjust: none;
+        background-color: transparent;
+        background-image: repeating-linear-gradient(
+          to right,
+          transparent 0px,
+          transparent clamp(0px, calc(-5px + 10px * var(--time)), 10px),
+          var(--fg) clamp(0px, calc(-5px + 10px * var(--time)), 10px),
+          var(--fg) clamp(0px, calc(0px + 10px * var(--time)), 10px),
+          transparent clamp(0px, calc(0px + 10px * var(--time)), 10px),
+          transparent clamp(0px, calc(5px + 10px * var(--time)), 10px),
+          var(--fg) clamp(0px, calc(5px + 10px * var(--time)), 10px),
+          var(--fg) 10px
+        );
+        animation: --linear-time 1s infinite linear;
+      }
+
+      md-aria-progress:not(:state(indeterminate)) & {
+        width: calc(100% * var(--progress) - 2 * var(--bar-inset));
+      }
+    }
+  `,
+  render(knobs) {
+    return html`
+      <md-aria-progress
+        value=${knobs.indeterminate ? nothing : (knobs.value ?? nothing)}
+        min=${knobs.indeterminate ? nothing : (knobs.min ?? nothing)}
+        max=${knobs.indeterminate ? nothing : (knobs.max ?? nothing)}>
+        <div id="track"></div>
+        <div id="bar"></div>
+      </md-aria-progress>
+    `;
+  },
+};
+
+/** ARIA Progress stories. */
+export const stories = [progress, progressCustom];
diff --git a/labs/aria/progress/md-aria-progress.ts b/labs/aria/progress/md-aria-progress.ts
@@ -0,0 +1,15 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {AriaProgressElement} from './progress.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'md-aria-progress': AriaProgressElement;
+  }
+}
+
+customElements.define('md-aria-progress', AriaProgressElement);
diff --git a/labs/aria/progress/progress.ts b/labs/aria/progress/progress.ts
@@ -0,0 +1,171 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {LitElement, css, html} from 'lit';
+import {property} from 'lit/decorators.js';
+import {StyleInfo, styleMap} from 'lit/directives/style-map.js';
+import {
+  mixinCustomStateSet,
+  toggleState,
+} from '../../behaviors/custom-state-set.js';
+import {
+  internals,
+  mixinElementInternals,
+} from '../../behaviors/element-internals.js';
+
+const baseClass = mixinCustomStateSet(mixinElementInternals(LitElement));
+
+/**
+ * An ARIA progress element.
+ *
+ * @cssstate indeterminate - True when the progress has no `value`.
+ * @slot - Use this slot to replace the default rendered content of this
+ *     component. These CSS properties are available to slotted content:
+ *
+ *   - `--progress-value` - The current value, clamped to
+ *      [`--progress-min`, `--progress-max`].
+ *   - `--progress-min` - The minimum value.
+ *   - `--progress-max` - The maximum value, or `--progress-min` if `max` is
+ *      less than `min`.
+ *   - `--progress` - The current position, from 0 to 1, or `indeterminate`.
+ */
+export class AriaProgressElement extends baseClass {
+  static override styles = css`
+    @keyframes --_indeterminate {
+      from {
+        inset-inline-start: 0%;
+      }
+      to {
+        inset-inline-start: 80%;
+      }
+    }
+
+    :host {
+      display: inline-flex;
+      position: relative;
+      block-size: 1em;
+      inline-size: 10em;
+      vertical-align: -0.2em;
+      overflow: hidden;
+      container: size;
+    }
+
+    slot {
+      /* Defaults until overridden by inline styles; --progress-value is
+         not set inline when indeterminate. */
+      --progress-value: 0;
+      --progress-min: 0;
+      --progress-max: 100;
+      --progress: indeterminate;
+
+      :host(:not(:state(indeterminate))) & {
+        --progress: progress(
+          var(--progress-value),
+          var(--progress-min),
+          var(--progress-max)
+        );
+      }
+    }
+
+    #track,
+    #bar {
+      display: block;
+      position: absolute;
+
+      inset: 0.25em 0;
+      border-radius: 50cqmin;
+    }
+
+    #track {
+      border: 1px solid currentColor;
+    }
+
+    #bar {
+      forced-color-adjust: preserve-parent-color;
+      background: currentColor;
+
+      :host(:state(indeterminate)) & {
+        inset-inline: unset;
+        inline-size: 20%;
+        animation: --_indeterminate 2s ease-in-out infinite alternate;
+      }
+
+      :host(:not(:state(indeterminate))) & {
+        inline-size: calc(100% * var(--progress));
+      }
+    }
+  `;
+
+  /**
+   * The current value, or `null` if indeterminate. Clamped to [`min`, `max`]
+   * when used.
+   */
+  @property({type: Number, reflect: true, useDefault: true})
+  value: number | null = null;
+
+  /** The minimum value. */
+  @property({type: Number, reflect: true, useDefault: true})
+  min = 0;
+
+  /** The maximum value. Treated as `min` when less than `min`. */
+  @property({type: Number, reflect: true, useDefault: true})
+  max = 100;
+
+  constructor() {
+    super();
+
+    this[internals].role = 'progressbar';
+    this[toggleState]('indeterminate', true);
+  }
+
+  /**
+   * Updates ARIA properties and returns a `StyleInfo` containing computed
+   * `--progress-*` properties to be applied to this element's `<slot>`.
+   *
+   * This method must be called by any override for `value` / `min` / `max` to
+   * be correctly synced to ARIA properties and the entries it returns must be
+   * merged with any additional entries produced by the override for the
+   * `--progress-*` properties to be updated. New entries produced by the
+   * override do not affect ARIA or the indeterminate state.
+   */
+  protected getProgressStyles(): StyleInfo {
+    const styles: StyleInfo = {};
+
+    const {value, min, max} = this;
+    const indeterminate = value === null;
+    const usedMin = min;
+    const usedMax = Math.max(min, max);
+    const usedValue = indeterminate
+      ? null
+      : Math.min(usedMax, Math.max(usedMin, value));
+
+    if (indeterminate) {
+      this[internals].ariaValueNow = null;
+      this[toggleState]('indeterminate', true);
+    } else {
+      this[internals].ariaValueNow = String(usedValue);
+      styles['--progress-value'] = String(usedValue);
+      this[toggleState]('indeterminate', false);
+    }
+
+    this[internals].ariaValueMin = String(usedMin);
+    styles['--progress-min'] = String(usedMin);
+
+    this[internals].ariaValueMax = String(usedMax);
+    styles['--progress-max'] = String(usedMax);
+
+    return styles;
+  }
+
+  protected override render() {
+    return html`
+      <slot style="${styleMap(this.getProgressStyles())}">
+        <div id="track"></div>
+        <div id="bar"></div>
+      </slot>
+    `;
+  }
+}