@material/web 1.0.0-pre.13 → 1.0.0-pre.15

package/progress/internal/circular-progress.js

@@ -0,0 +1,49 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { html } from 'lit';
+import { Progress } from './progress.js';
+/**
+ * A circular progress component.
+ */
+export class CircularProgress extends Progress {
+    renderIndicator() {
+        if (this.indeterminate) {
+            return this.renderIndeterminateContainer();
+        }
+        return this.renderDeterminateContainer();
+    }
+    // Determinate mode is rendered with an svg so the progress arc can be
+    // easily animated via stroke-dashoffset.
+    renderDeterminateContainer() {
+        const dashOffset = (1 - this.value / this.max) * 100;
+        // note, dash-array/offset are relative to Setting `pathLength` but
+        // Chrome seems to render this inaccurately and using a large viewbox helps.
+        return html `
+      <svg viewBox="0 0 4800 4800">
+        <circle class="track" pathLength="100"></circle>
+        <circle class="progress" pathLength="100"
+          stroke-dashoffset=${dashOffset}></circle>
+      </svg>
+    `;
+    }
+    // Indeterminate mode rendered with 2 bordered-divs. The borders are
+    // clipped into half circles by their containers. The divs are then carefully
+    // animated to produce changes to the spinner arc size.
+    // This approach has 4.5x the FPS of rendering via svg on Chrome 111.
+    // See https://lit.dev/playground/#gist=febb773565272f75408ab06a0eb49746.
+    renderIndeterminateContainer() {
+        return html `
+      <div class="spinner">
+        <div class="left">
+          <div class="circle"></div>
+        </div>
+        <div class="right">
+          <div class="circle"></div>
+        </div>
+      </div>`;
+    }
+}
+//# sourceMappingURL=circular-progress.js.map

package/progress/internal/circular-progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"circular-progress.js","sourceRoot":"","sources":["circular-progress.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,QAAQ,EAAC,MAAM,eAAe,CAAC;AAEvC;;GAEG;AACH,MAAM,OAAO,gBAAiB,SAAQ,QAAQ;IACzB,eAAe;QAChC,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,OAAO,IAAI,CAAC,4BAA4B,EAAE,CAAC;SAC5C;QAED,OAAO,IAAI,CAAC,0BAA0B,EAAE,CAAC;IAC3C,CAAC;IAED,sEAAsE;IACtE,yCAAyC;IACjC,0BAA0B;QAChC,MAAM,UAAU,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC;QACrD,mEAAmE;QACnE,4EAA4E;QAC5E,OAAO,IAAI,CAAA;;;;8BAIe,UAAU;;KAEnC,CAAC;IACJ,CAAC;IAED,oEAAoE;IACpE,6EAA6E;IAC7E,uDAAuD;IACvD,qEAAqE;IACrE,yEAAyE;IACjE,4BAA4B;QAClC,OAAO,IAAI,CAAA;;;;;;;;aAQF,CAAC;IACZ,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html} from 'lit';\n\nimport {Progress} from './progress.js';\n\n/**\n * A circular progress component.\n */\nexport class CircularProgress extends Progress {\n  protected override renderIndicator() {\n    if (this.indeterminate) {\n      return this.renderIndeterminateContainer();\n    }\n\n    return this.renderDeterminateContainer();\n  }\n\n  // Determinate mode is rendered with an svg so the progress arc can be\n  // easily animated via stroke-dashoffset.\n  private renderDeterminateContainer() {\n    const dashOffset = (1 - this.value / this.max) * 100;\n    // note, dash-array/offset are relative to Setting `pathLength` but\n    // Chrome seems to render this inaccurately and using a large viewbox helps.\n    return html`\n      <svg viewBox=\"0 0 4800 4800\">\n        <circle class=\"track\" pathLength=\"100\"></circle>\n        <circle class=\"progress\" pathLength=\"100\"\n          stroke-dashoffset=${dashOffset}></circle>\n      </svg>\n    `;\n  }\n\n  // Indeterminate mode rendered with 2 bordered-divs. The borders are\n  // clipped into half circles by their containers. The divs are then carefully\n  // animated to produce changes to the spinner arc size.\n  // This approach has 4.5x the FPS of rendering via svg on Chrome 111.\n  // See https://lit.dev/playground/#gist=febb773565272f75408ab06a0eb49746.\n  private renderIndeterminateContainer() {\n    return html`\n      <div class=\"spinner\">\n        <div class=\"left\">\n          <div class=\"circle\"></div>\n        </div>\n        <div class=\"right\">\n          <div class=\"circle\"></div>\n        </div>\n      </div>`;\n  }\n}\n"]}

package/progress/internal/linear-progress-styles.css.js

@@ -0,0 +1,9 @@
+/**
+  * @license
+  * Copyright 2022 Google LLC
+  * SPDX-License-Identifier: Apache-2.0
+  */
+import { css } from 'lit';
+export const styles = css `:host{--_active-indicator-color: var(--md-linear-progress-active-indicator-color, var(--md-sys-color-primary, #6750a4));--_active-indicator-height: var(--md-linear-progress-active-indicator-height, 4px);--_four-color-active-indicator-four-color: var(--md-linear-progress-four-color-active-indicator-four-color, var(--md-sys-color-tertiary-container, #ffd8e4));--_four-color-active-indicator-one-color: var(--md-linear-progress-four-color-active-indicator-one-color, var(--md-sys-color-primary, #6750a4));--_four-color-active-indicator-three-color: var(--md-linear-progress-four-color-active-indicator-three-color, var(--md-sys-color-tertiary, #7d5260));--_four-color-active-indicator-two-color: var(--md-linear-progress-four-color-active-indicator-two-color, var(--md-sys-color-primary-container, #eaddff));--_track-color: var(--md-linear-progress-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_track-height: var(--md-linear-progress-track-height, 4px);--_track-shape: var(--md-linear-progress-track-shape, 0px);display:block;position:relative;min-inline-size:80px;block-size:var(--_track-height);content-visibility:auto;contain:strict}.progress,.track,.buffer-bar,.bar,.bar-inner{position:absolute}.progress{inset:0;outline:rgba(0,0,0,0) solid 1px;border-radius:var(--_track-shape);overflow:hidden;display:flex;align-items:center}.bar{animation:none;inline-size:100%;block-size:var(--_active-indicator-height);transform-origin:left center;transition:transform 250ms cubic-bezier(0.4, 0, 0.6, 1)}.secondary-bar{display:none}.bar-inner{inset:0;animation:none;background:var(--_active-indicator-color)}.buffer-bar{background:var(--_track-color);inset:0;transition:transform 250ms cubic-bezier(0.4, 0, 0.6, 1);transform-origin:left center}.track{inset:0;animation:linear infinite 250ms;animation-name:buffering;background:0/calc(var(--_track-height) / 2 * 5) 100% radial-gradient(circle at calc(var(--_track-height) / 2 * 2), var(--_track-color) 0, var(--_track-color) calc(var(--_track-height) / 2), transparent calc(var(--_track-height) / 2))}.indeterminate .bar{transition:none}.indeterminate .primary-bar{inset-inline-start:-145.167%}.indeterminate .secondary-bar{inset-inline-start:-54.8889%;display:block}.indeterminate .track{display:none}.indeterminate.animation-ready .primary-bar{animation:linear infinite 2s;animation-name:primary-indeterminate-translate}.indeterminate.animation-ready .primary-bar>.bar-inner{animation:linear infinite 2s primary-indeterminate-scale}.indeterminate.animation-ready.four-color .primary-bar>.bar-inner{animation-name:primary-indeterminate-scale,four-color;animation-duration:2s,4s}.indeterminate.animation-ready .secondary-bar{animation:linear infinite 2s;animation-name:secondary-indeterminate-translate}.indeterminate.animation-ready .secondary-bar>.bar-inner{animation:linear infinite 2s secondary-indeterminate-scale}.indeterminate.animation-ready.four-color .secondary-bar>.bar-inner{animation-name:secondary-indeterminate-scale,four-color;animation-duration:2s,4s}:host-context([dir=rtl]) .progress .bar{transform-origin:right center}:host-context([dir=rtl]) .progress .buffer-bar{transform-origin:right center}:host-context([dir=rtl]) .progress .track{animation-name:buffering-rtl}:host-context([dir=rtl]) .progress.indeterminate.animation-ready .primary-bar{animation-name:primary-indeterminate-translate-rtl}:host-context([dir=rtl]) .progress.indeterminate.animation-ready .secondary-bar{animation-name:secondary-indeterminate-translate-rtl}:host([dir=rtl]) .progress .bar{transform-origin:right center}:host([dir=rtl]) .progress .buffer-bar{transform-origin:right center}:host([dir=rtl]) .progress .track{animation-name:buffering-rtl}:host([dir=rtl]) .progress.indeterminate.animation-ready .primary-bar{animation-name:primary-indeterminate-translate-rtl}:host([dir=rtl]) .progress.indeterminate.animation-ready .secondary-bar{animation-name:secondary-indeterminate-translate-rtl}.progress:dir(rtl) .bar{transform-origin:right center}.progress:dir(rtl) .buffer-bar{transform-origin:right center}.progress:dir(rtl) .track{animation-name:buffering-rtl}.progress:dir(rtl).indeterminate.animation-ready .primary-bar{animation-name:primary-indeterminate-translate-rtl}.progress:dir(rtl).indeterminate.animation-ready .secondary-bar{animation-name:secondary-indeterminate-translate-rtl}@keyframes primary-indeterminate-scale{0%{transform:scaleX(0.08)}36.65%{animation-timing-function:cubic-bezier(0.334731, 0.12482, 0.785844, 1);transform:scaleX(0.08)}69.15%{animation-timing-function:cubic-bezier(0.06, 0.11, 0.6, 1);transform:scaleX(0.661479)}100%{transform:scaleX(0.08)}}@keyframes secondary-indeterminate-scale{0%{animation-timing-function:cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971);transform:scaleX(0.08)}19.15%{animation-timing-function:cubic-bezier(0.152313, 0.196432, 0.648374, 1.00432);transform:scaleX(0.457104)}44.15%{animation-timing-function:cubic-bezier(0.257759, -0.003163, 0.211762, 1.38179);transform:scaleX(0.72796)}100%{transform:scaleX(0.08)}}@keyframes buffering{0%{transform:translateX(calc(1 * calc(var(--_track-height) / 2 * 5)))}}@keyframes primary-indeterminate-translate{0%{transform:translateX(0px)}20%{animation-timing-function:cubic-bezier(0.5, 0, 0.701732, 0.495819);transform:translateX(0px)}59.15%{animation-timing-function:cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);transform:translateX(calc(1 * 83.6714%))}100%{transform:translateX(calc(1 * 200.611%))}}@keyframes secondary-indeterminate-translate{0%{animation-timing-function:cubic-bezier(0.15, 0, 0.515058, 0.409685);transform:translateX(0px)}25%{animation-timing-function:cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);transform:translateX(calc(1 * 37.6519%))}48.35%{animation-timing-function:cubic-bezier(0.4, 0.627035, 0.6, 0.902026);transform:translateX(calc(1 * 84.3862%))}100%{transform:translateX(calc(1 * 160.278%))}}@keyframes buffering-rtl{0%{transform:translateX(calc(-1 * calc(var(--_track-height) / 2 * 5)))}}@keyframes primary-indeterminate-translate-rtl{0%{transform:translateX(0px)}20%{animation-timing-function:cubic-bezier(0.5, 0, 0.701732, 0.495819);transform:translateX(0px)}59.15%{animation-timing-function:cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);transform:translateX(calc(-1 * 83.6714%))}100%{transform:translateX(calc(-1 * 200.611%))}}@keyframes secondary-indeterminate-translate-rtl{0%{animation-timing-function:cubic-bezier(0.15, 0, 0.515058, 0.409685);transform:translateX(0px)}25%{animation-timing-function:cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);transform:translateX(calc(-1 * 37.6519%))}48.35%{animation-timing-function:cubic-bezier(0.4, 0.627035, 0.6, 0.902026);transform:translateX(calc(-1 * 84.3862%))}100%{transform:translateX(calc(-1 * 160.278%))}}@keyframes four-color{0%{background:var(--_four-color-active-indicator-one-color)}15%{background:var(--_four-color-active-indicator-one-color)}25%{background:var(--_four-color-active-indicator-two-color)}40%{background:var(--_four-color-active-indicator-two-color)}50%{background:var(--_four-color-active-indicator-three-color)}65%{background:var(--_four-color-active-indicator-three-color)}75%{background:var(--_four-color-active-indicator-four-color)}90%{background:var(--_four-color-active-indicator-four-color)}100%{background:var(--_four-color-active-indicator-one-color)}}@media screen and (forced-colors: active){.progress{--_active-indicator-color: canvastext;--_track-color: graytext;border:1px solid canvastext}.indeterminate.progress{--_track-color: canvas}}/*# sourceMappingURL=linear-progress-styles.css.map */
+`;
+//# sourceMappingURL=linear-progress-styles.css.js.map

package/progress/internal/linear-progress-styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"linear-progress-styles.css.js","sourceRoot":"","sources":["linear-progress-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_active-indicator-color: var(--md-linear-progress-active-indicator-color, var(--md-sys-color-primary, #6750a4));--_active-indicator-height: var(--md-linear-progress-active-indicator-height, 4px);--_four-color-active-indicator-four-color: var(--md-linear-progress-four-color-active-indicator-four-color, var(--md-sys-color-tertiary-container, #ffd8e4));--_four-color-active-indicator-one-color: var(--md-linear-progress-four-color-active-indicator-one-color, var(--md-sys-color-primary, #6750a4));--_four-color-active-indicator-three-color: var(--md-linear-progress-four-color-active-indicator-three-color, var(--md-sys-color-tertiary, #7d5260));--_four-color-active-indicator-two-color: var(--md-linear-progress-four-color-active-indicator-two-color, var(--md-sys-color-primary-container, #eaddff));--_track-color: var(--md-linear-progress-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_track-height: var(--md-linear-progress-track-height, 4px);--_track-shape: var(--md-linear-progress-track-shape, 0px);display:block;position:relative;min-inline-size:80px;block-size:var(--_track-height);content-visibility:auto;contain:strict}.progress,.track,.buffer-bar,.bar,.bar-inner{position:absolute}.progress{inset:0;outline:rgba(0,0,0,0) solid 1px;border-radius:var(--_track-shape);overflow:hidden;display:flex;align-items:center}.bar{animation:none;inline-size:100%;block-size:var(--_active-indicator-height);transform-origin:left center;transition:transform 250ms cubic-bezier(0.4, 0, 0.6, 1)}.secondary-bar{display:none}.bar-inner{inset:0;animation:none;background:var(--_active-indicator-color)}.buffer-bar{background:var(--_track-color);inset:0;transition:transform 250ms cubic-bezier(0.4, 0, 0.6, 1);transform-origin:left center}.track{inset:0;animation:linear infinite 250ms;animation-name:buffering;background:0/calc(var(--_track-height) / 2 * 5) 100% radial-gradient(circle at calc(var(--_track-height) / 2 * 2), var(--_track-color) 0, var(--_track-color) calc(var(--_track-height) / 2), transparent calc(var(--_track-height) / 2))}.indeterminate .bar{transition:none}.indeterminate .primary-bar{inset-inline-start:-145.167%}.indeterminate .secondary-bar{inset-inline-start:-54.8889%;display:block}.indeterminate .track{display:none}.indeterminate.animation-ready .primary-bar{animation:linear infinite 2s;animation-name:primary-indeterminate-translate}.indeterminate.animation-ready .primary-bar>.bar-inner{animation:linear infinite 2s primary-indeterminate-scale}.indeterminate.animation-ready.four-color .primary-bar>.bar-inner{animation-name:primary-indeterminate-scale,four-color;animation-duration:2s,4s}.indeterminate.animation-ready .secondary-bar{animation:linear infinite 2s;animation-name:secondary-indeterminate-translate}.indeterminate.animation-ready .secondary-bar>.bar-inner{animation:linear infinite 2s secondary-indeterminate-scale}.indeterminate.animation-ready.four-color .secondary-bar>.bar-inner{animation-name:secondary-indeterminate-scale,four-color;animation-duration:2s,4s}:host-context([dir=rtl]) .progress .bar{transform-origin:right center}:host-context([dir=rtl]) .progress .buffer-bar{transform-origin:right center}:host-context([dir=rtl]) .progress .track{animation-name:buffering-rtl}:host-context([dir=rtl]) .progress.indeterminate.animation-ready .primary-bar{animation-name:primary-indeterminate-translate-rtl}:host-context([dir=rtl]) .progress.indeterminate.animation-ready .secondary-bar{animation-name:secondary-indeterminate-translate-rtl}:host([dir=rtl]) .progress .bar{transform-origin:right center}:host([dir=rtl]) .progress .buffer-bar{transform-origin:right center}:host([dir=rtl]) .progress .track{animation-name:buffering-rtl}:host([dir=rtl]) .progress.indeterminate.animation-ready .primary-bar{animation-name:primary-indeterminate-translate-rtl}:host([dir=rtl]) .progress.indeterminate.animation-ready .secondary-bar{animation-name:secondary-indeterminate-translate-rtl}.progress:dir(rtl) .bar{transform-origin:right center}.progress:dir(rtl) .buffer-bar{transform-origin:right center}.progress:dir(rtl) .track{animation-name:buffering-rtl}.progress:dir(rtl).indeterminate.animation-ready .primary-bar{animation-name:primary-indeterminate-translate-rtl}.progress:dir(rtl).indeterminate.animation-ready .secondary-bar{animation-name:secondary-indeterminate-translate-rtl}@keyframes primary-indeterminate-scale{0%{transform:scaleX(0.08)}36.65%{animation-timing-function:cubic-bezier(0.334731, 0.12482, 0.785844, 1);transform:scaleX(0.08)}69.15%{animation-timing-function:cubic-bezier(0.06, 0.11, 0.6, 1);transform:scaleX(0.661479)}100%{transform:scaleX(0.08)}}@keyframes secondary-indeterminate-scale{0%{animation-timing-function:cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971);transform:scaleX(0.08)}19.15%{animation-timing-function:cubic-bezier(0.152313, 0.196432, 0.648374, 1.00432);transform:scaleX(0.457104)}44.15%{animation-timing-function:cubic-bezier(0.257759, -0.003163, 0.211762, 1.38179);transform:scaleX(0.72796)}100%{transform:scaleX(0.08)}}@keyframes buffering{0%{transform:translateX(calc(1 * calc(var(--_track-height) / 2 * 5)))}}@keyframes primary-indeterminate-translate{0%{transform:translateX(0px)}20%{animation-timing-function:cubic-bezier(0.5, 0, 0.701732, 0.495819);transform:translateX(0px)}59.15%{animation-timing-function:cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);transform:translateX(calc(1 * 83.6714%))}100%{transform:translateX(calc(1 * 200.611%))}}@keyframes secondary-indeterminate-translate{0%{animation-timing-function:cubic-bezier(0.15, 0, 0.515058, 0.409685);transform:translateX(0px)}25%{animation-timing-function:cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);transform:translateX(calc(1 * 37.6519%))}48.35%{animation-timing-function:cubic-bezier(0.4, 0.627035, 0.6, 0.902026);transform:translateX(calc(1 * 84.3862%))}100%{transform:translateX(calc(1 * 160.278%))}}@keyframes buffering-rtl{0%{transform:translateX(calc(-1 * calc(var(--_track-height) / 2 * 5)))}}@keyframes primary-indeterminate-translate-rtl{0%{transform:translateX(0px)}20%{animation-timing-function:cubic-bezier(0.5, 0, 0.701732, 0.495819);transform:translateX(0px)}59.15%{animation-timing-function:cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);transform:translateX(calc(-1 * 83.6714%))}100%{transform:translateX(calc(-1 * 200.611%))}}@keyframes secondary-indeterminate-translate-rtl{0%{animation-timing-function:cubic-bezier(0.15, 0, 0.515058, 0.409685);transform:translateX(0px)}25%{animation-timing-function:cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);transform:translateX(calc(-1 * 37.6519%))}48.35%{animation-timing-function:cubic-bezier(0.4, 0.627035, 0.6, 0.902026);transform:translateX(calc(-1 * 84.3862%))}100%{transform:translateX(calc(-1 * 160.278%))}}@keyframes four-color{0%{background:var(--_four-color-active-indicator-one-color)}15%{background:var(--_four-color-active-indicator-one-color)}25%{background:var(--_four-color-active-indicator-two-color)}40%{background:var(--_four-color-active-indicator-two-color)}50%{background:var(--_four-color-active-indicator-three-color)}65%{background:var(--_four-color-active-indicator-three-color)}75%{background:var(--_four-color-active-indicator-four-color)}90%{background:var(--_four-color-active-indicator-four-color)}100%{background:var(--_four-color-active-indicator-one-color)}}@media screen and (forced-colors: active){.progress{--_active-indicator-color: canvastext;--_track-color: graytext;border:1px solid canvastext}.indeterminate.progress{--_track-color: canvas}}/*# sourceMappingURL=linear-progress-styles.css.map */\n`;\n "]}

package/progress/internal/linear-progress.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Progress } from './progress.js';
+/**
+ * A linear progress component.
+ */
+export declare class LinearProgress extends Progress {
+    /**
+     * Buffer amount to display, a fraction between 0 and 1.
+     */
+    buffer: number;
+    private readonly rootEl;
+    private animationReady;
+    private resizeObserver;
+    protected getRenderClasses(): {
+        'animation-ready': boolean;
+        indeterminate: boolean;
+        'four-color': boolean;
+    };
+    protected renderIndicator(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): Promise<void>;
+    disconnectedCallback(): void;
+    private restartAnimation;
+}

package/progress/internal/linear-progress.js

@@ -0,0 +1,91 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { Progress } from './progress.js';
+/**
+ * A linear progress component.
+ */
+export class LinearProgress extends Progress {
+    constructor() {
+        super(...arguments);
+        /**
+         * Buffer amount to display, a fraction between 0 and 1.
+         */
+        this.buffer = 1;
+        this.animationReady = true;
+        this.resizeObserver = null;
+    }
+    getRenderClasses() {
+        return {
+            ...super.getRenderClasses(),
+            'animation-ready': this.animationReady,
+        };
+    }
+    // Note, the indeterminate animation is rendered with transform %'s
+    // Previously, this was optimized to use px calculated with the resizeObserver
+    // due to a now fixed Chrome bug: crbug.com/389359.
+    renderIndicator() {
+        const progressStyles = {
+            transform: `scaleX(${(this.indeterminate ? 1 : this.value / this.max) * 100}%)`
+        };
+        const bufferStyles = {
+            transform: `scaleX(${(this.indeterminate ? 1 : this.buffer / this.max) * 100}%)`
+        };
+        return html `
+      <div class="track"></div>
+      <div class="buffer-bar" style=${styleMap(bufferStyles)}></div>
+      <div class="bar primary-bar" style=${styleMap(progressStyles)}>
+        <div class="bar-inner"></div>
+      </div>
+      <div class="bar secondary-bar">
+        <div class="bar-inner"></div>
+      </div>
+    `;
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+        // wait for rendering.
+        await this.updateComplete;
+        if (this.resizeObserver) {
+            return;
+        }
+        this.resizeObserver = new ResizeObserver(() => {
+            if (this.indeterminate) {
+                this.restartAnimation();
+            }
+        });
+        this.resizeObserver.observe(this.rootEl);
+    }
+    disconnectedCallback() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
+        super.disconnectedCallback();
+    }
+    // When size changes, restart the animation
+    // to avoid jank.
+    async restartAnimation() {
+        await this.updateComplete;
+        this.animationReady = false;
+        await new Promise(requestAnimationFrame);
+        this.animationReady = true;
+        await this.updateComplete;
+    }
+}
+__decorate([
+    property({ type: Number })
+], LinearProgress.prototype, "buffer", void 0);
+__decorate([
+    query('.progress')
+], LinearProgress.prototype, "rootEl", void 0);
+__decorate([
+    state()
+], LinearProgress.prototype, "animationReady", void 0);
+//# sourceMappingURL=linear-progress.js.map

package/progress/internal/linear-progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"linear-progress.js","sourceRoot":"","sources":["linear-progress.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AACzB,OAAO,EAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAErD,OAAO,EAAC,QAAQ,EAAC,MAAM,eAAe,CAAC;AAEvC;;GAEG;AACH,MAAM,OAAO,cAAe,SAAQ,QAAQ;IAA5C;;QACE;;WAEG;QACuB,WAAM,GAAG,CAAC,CAAC;QAIpB,mBAAc,GAAG,IAAI,CAAC;QAC/B,mBAAc,GAAwB,IAAI,CAAC;IAkErD,CAAC;IAhEoB,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,iBAAiB,EAAE,IAAI,CAAC,cAAc;SACvC,CAAC;IACJ,CAAC;IAED,mEAAmE;IACnE,8EAA8E;IAC9E,mDAAmD;IAChC,eAAe;QAChC,MAAM,cAAc,GAAG;YACrB,SAAS,EACL,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,IAAI;SACzE,CAAC;QACF,MAAM,YAAY,GAAG;YACnB,SAAS,EACL,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,IAAI;SAC1E,CAAC;QAEF,OAAO,IAAI,CAAA;;sCAEuB,QAAQ,CAAC,YAAY,CAAC;2CACjB,QAAQ,CAAC,cAAc,CAAC;;;;;;KAM9D,CAAC;IACJ,CAAC;IAEQ,KAAK,CAAC,iBAAiB;QAC9B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,sBAAsB;QACtB,MAAM,IAAI,CAAC,cAAc,CAAC;QAC1B,IAAI,IAAI,CAAC,cAAc,EAAE;YACvB,OAAO;SACR;QACD,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;YAC5C,IAAI,IAAI,CAAC,aAAa,EAAE;gBACtB,IAAI,CAAC,gBAAgB,EAAE,CAAC;aACzB;QACH,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,MAAO,CAAC,CAAC;IAC5C,CAAC;IAEQ,oBAAoB;QAC3B,IAAI,IAAI,CAAC,cAAc,EAAE;YACvB,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;YACjC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;SAC5B;QACD,KAAK,CAAC,oBAAoB,EAAE,CAAC;IAC/B,CAAC;IAED,2CAA2C;IAC3C,iBAAiB;IACT,KAAK,CAAC,gBAAgB;QAC5B,MAAM,IAAI,CAAC,cAAc,CAAC;QAC1B,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;QAC5B,MAAM,IAAI,OAAO,CAAC,qBAAqB,CAAC,CAAC;QACzC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;QAC3B,MAAM,IAAI,CAAC,cAAc,CAAC;IAC5B,CAAC;CACF;AAvE2B;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;8CAAY;AAEjB;IAAnB,KAAK,CAAC,WAAW,CAAC;8CAA4C;AAEtD;IAAR,KAAK,EAAE;sDAA+B","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {styleMap} from 'lit/directives/style-map.js';\n\nimport {Progress} from './progress.js';\n\n/**\n * A linear progress component.\n */\nexport class LinearProgress extends Progress {\n  /**\n   * Buffer amount to display, a fraction between 0 and 1.\n   */\n  @property({type: Number}) buffer = 1;\n\n  @query('.progress') private readonly rootEl!: HTMLElement|null;\n\n  @state() private animationReady = true;\n  private resizeObserver: ResizeObserver|null = null;\n\n  protected override getRenderClasses() {\n    return {\n      ...super.getRenderClasses(),\n      'animation-ready': this.animationReady,\n    };\n  }\n\n  // Note, the indeterminate animation is rendered with transform %'s\n  // Previously, this was optimized to use px calculated with the resizeObserver\n  // due to a now fixed Chrome bug: crbug.com/389359.\n  protected override renderIndicator() {\n    const progressStyles = {\n      transform:\n          `scaleX(${(this.indeterminate ? 1 : this.value / this.max) * 100}%)`\n    };\n    const bufferStyles = {\n      transform:\n          `scaleX(${(this.indeterminate ? 1 : this.buffer / this.max) * 100}%)`\n    };\n\n    return html`\n      <div class=\"track\"></div>\n      <div class=\"buffer-bar\" style=${styleMap(bufferStyles)}></div>\n      <div class=\"bar primary-bar\" style=${styleMap(progressStyles)}>\n        <div class=\"bar-inner\"></div>\n      </div>\n      <div class=\"bar secondary-bar\">\n        <div class=\"bar-inner\"></div>\n      </div>\n    `;\n  }\n\n  override async connectedCallback() {\n    super.connectedCallback();\n    // wait for rendering.\n    await this.updateComplete;\n    if (this.resizeObserver) {\n      return;\n    }\n    this.resizeObserver = new ResizeObserver(() => {\n      if (this.indeterminate) {\n        this.restartAnimation();\n      }\n    });\n    this.resizeObserver.observe(this.rootEl!);\n  }\n\n  override disconnectedCallback() {\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n      this.resizeObserver = null;\n    }\n    super.disconnectedCallback();\n  }\n\n  // When size changes, restart the animation\n  // to avoid jank.\n  private async restartAnimation() {\n    await this.updateComplete;\n    this.animationReady = false;\n    await new Promise(requestAnimationFrame);\n    this.animationReady = true;\n    await this.updateComplete;\n  }\n}\n"]}

package/progress/internal/progress.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { LitElement, TemplateResult } from 'lit';
+/**
+ * A progress component.
+ */
+export declare abstract class Progress extends LitElement {
+    /**
+     * Progress to display, a fraction between 0 and `max`.
+     */
+    value: number;
+    /**
+     * Maximum progress to display, defaults to 1.
+     */
+    max: number;
+    /**
+     * Whether or not to display indeterminate progress, which gives no indication
+     * to how long an activity will take.
+     */
+    indeterminate: boolean;
+    /**
+     * Whether or not to render indeterminate mode using 4 colors instead of one.
+     */
+    fourColor: boolean;
+    protected render(): TemplateResult<1>;
+    protected getRenderClasses(): {
+        indeterminate: boolean;
+        'four-color': boolean;
+    };
+    protected abstract renderIndicator(): TemplateResult;
+}

package/progress/internal/progress.js

@@ -0,0 +1,70 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { html, LitElement, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { requestUpdateOnAriaChange } from '../../internal/aria/delegate.js';
+/**
+ * A progress component.
+ */
+export class Progress extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Progress to display, a fraction between 0 and `max`.
+         */
+        this.value = 0;
+        /**
+         * Maximum progress to display, defaults to 1.
+         */
+        this.max = 1;
+        /**
+         * Whether or not to display indeterminate progress, which gives no indication
+         * to how long an activity will take.
+         */
+        this.indeterminate = false;
+        /**
+         * Whether or not to render indeterminate mode using 4 colors instead of one.
+         */
+        this.fourColor = false;
+    }
+    render() {
+        // Needed for closure conformance
+        const { ariaLabel } = this;
+        return html `
+      <div class="progress ${classMap(this.getRenderClasses())}"
+        role="progressbar"
+        aria-label="${ariaLabel || nothing}"
+        aria-valuemin="0"
+        aria-valuemax=${this.max}
+        aria-valuenow=${this.indeterminate ? nothing : this.value}
+      >${this.renderIndicator()}</div>
+    `;
+    }
+    getRenderClasses() {
+        return {
+            'indeterminate': this.indeterminate,
+            'four-color': this.fourColor,
+        };
+    }
+}
+(() => {
+    requestUpdateOnAriaChange(Progress);
+})();
+__decorate([
+    property({ type: Number })
+], Progress.prototype, "value", void 0);
+__decorate([
+    property({ type: Number })
+], Progress.prototype, "max", void 0);
+__decorate([
+    property({ type: Boolean })
+], Progress.prototype, "indeterminate", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'four-color' })
+], Progress.prototype, "fourColor", void 0);
+//# sourceMappingURL=progress.js.map

package/progress/internal/progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.js","sourceRoot":"","sources":["progress.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAiB,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAGrD,OAAO,EAAC,yBAAyB,EAAC,MAAM,iCAAiC,CAAC;AAE1E;;GAEG;AACH,MAAM,OAAgB,QAAS,SAAQ,UAAU;IAAjD;;QAKE;;WAEG;QACuB,UAAK,GAAG,CAAC,CAAC;QAEpC;;WAEG;QACuB,QAAG,GAAG,CAAC,CAAC;QAElC;;;WAGG;QACwB,kBAAa,GAAG,KAAK,CAAC;QAEjD;;WAEG;QACiD,cAAS,GAAG,KAAK,CAAC;IAwBxE,CAAC;IAtBoB,MAAM;QACvB,iCAAiC;QACjC,MAAM,EAAC,SAAS,EAAC,GAAG,IAAuB,CAAC;QAC5C,OAAO,IAAI,CAAA;6BACc,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;;sBAExC,SAAS,IAAI,OAAO;;wBAElB,IAAI,CAAC,GAAG;wBACR,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK;SACxD,IAAI,CAAC,eAAe,EAAE;KAC1B,CAAC;IACJ,CAAC;IAES,gBAAgB;QACxB,OAAO;YACL,eAAe,EAAE,IAAI,CAAC,aAAa;YACnC,YAAY,EAAE,IAAI,CAAC,SAAS;SAC7B,CAAC;IACJ,CAAC;CAGF;AA/CC;IACE,yBAAyB,CAAC,QAAQ,CAAC,CAAC;AACtC,CAAC,GAAA,CAAA;AAKyB;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;uCAAW;AAKV;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;qCAAS;AAMP;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;+CAAuB;AAKG;IAAnD,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAC,CAAC;2CAAmB","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement, nothing, TemplateResult} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';\n\n/**\n * A progress component.\n */\nexport abstract class Progress extends LitElement {\n  static {\n    requestUpdateOnAriaChange(Progress);\n  }\n\n  /**\n   * Progress to display, a fraction between 0 and `max`.\n   */\n  @property({type: Number}) value = 0;\n\n  /**\n   * Maximum progress to display, defaults to 1.\n   */\n  @property({type: Number}) max = 1;\n\n  /**\n   * Whether or not to display indeterminate progress, which gives no indication\n   * to how long an activity will take.\n   */\n  @property({type: Boolean}) indeterminate = false;\n\n  /**\n   * Whether or not to render indeterminate mode using 4 colors instead of one.\n   */\n  @property({type: Boolean, attribute: 'four-color'}) fourColor = false;\n\n  protected override render() {\n    // Needed for closure conformance\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`\n      <div class=\"progress ${classMap(this.getRenderClasses())}\"\n        role=\"progressbar\"\n        aria-label=\"${ariaLabel || nothing}\"\n        aria-valuemin=\"0\"\n        aria-valuemax=${this.max}\n        aria-valuenow=${this.indeterminate ? nothing : this.value}\n      >${this.renderIndicator()}</div>\n    `;\n  }\n\n  protected getRenderClasses() {\n    return {\n      'indeterminate': this.indeterminate,\n      'four-color': this.fourColor,\n    };\n  }\n\n  protected abstract renderIndicator(): TemplateResult;\n}\n"]}

package/progress/linear-progress.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { LinearProgress } from './internal/linear-progress.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.
+ */
+export declare class MdLinearProgress extends LinearProgress {
+    static styles: import("lit").CSSResult[];
+}

package/progress/linear-progress.js

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { LinearProgress } from './internal/linear-progress.js';
+import { styles } from './internal/linear-progress-styles.css.js';
+/**
+ * @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.
+ */
+let MdLinearProgress = class MdLinearProgress extends LinearProgress {
+};
+MdLinearProgress.styles = [styles];
+MdLinearProgress = __decorate([
+    customElement('md-linear-progress')
+], MdLinearProgress);
+export { MdLinearProgress };
+//# sourceMappingURL=linear-progress.js.map

package/progress/linear-progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"linear-progress.js","sourceRoot":"","sources":["linear-progress.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,cAAc,EAAC,MAAM,+BAA+B,CAAC;AAC7D,OAAO,EAAC,MAAM,EAAC,MAAM,0CAA0C,CAAC;AAQhE;;;;;;;;GAQG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,cAAc;;AAClC,uBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AADvB,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAE5B;SAFY,gBAAgB","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {LinearProgress} from './internal/linear-progress.js';\nimport {styles} from './internal/linear-progress-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-linear-progress': MdLinearProgress;\n  }\n}\n\n/**\n * @summary Linear progress indicators display progress by animating along the\n * length of a fixed, visible track.\n *\n * @description\n * Progress indicators inform users about the status of ongoing processes.\n * - Determinate indicators display how long a process will take.\n * - Indeterminate indicators express an unspecified amount of wait time.\n */\n@customElement('md-linear-progress')\nexport class MdLinearProgress extends LinearProgress {\n  static override styles = [styles];\n}\n"]}

package/radio/_radio.scss

@@ -3,4 +3,4 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@forward './lib/radio' show theme;
+@forward './internal/radio' show theme;

package/radio/harness.d.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { Harness } from '../testing/harness.js';
-import { Radio } from './lib/radio.js';
+import { Radio } from './internal/radio.js';
 /**
  * Test harness for radio.
  */

package/radio/harness.js.map

@@ -1 +1 @@
-{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAI9C;;GAEG;AACH,MAAM,OAAO,YAAa,SAAQ,OAAc;IACrC,KAAK,CAAC,qBAAqB;QAClC,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAqB,CAAC;IAC5E,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {Radio} from './lib/radio.js';\n\n/**\n * Test harness for radio.\n */\nexport class RadioHarness extends Harness<Radio> {\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector('input') as HTMLInputElement;\n  }\n}\n"]}
+{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAI9C;;GAEG;AACH,MAAM,OAAO,YAAa,SAAQ,OAAc;IACrC,KAAK,CAAC,qBAAqB;QAClC,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAqB,CAAC;IAC5E,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {Radio} from './internal/radio.js';\n\n/**\n * Test harness for radio.\n */\nexport class RadioHarness extends Harness<Radio> {\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector('input') as HTMLInputElement;\n  }\n}\n"]}

package/radio/internal/_radio.scss

@@ -0,0 +1,185 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:list';
+@use 'sass:map';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../focus/focus-ring';
+@use '../../internal/motion/animation';
+@use '../../ripple/ripple';
+@use '../../tokens';
+// go/keep-sorted end
+
+$_md-sys-motion: tokens.md-sys-motion-values();
+
+@mixin theme($tokens) {
+  $supported-tokens: tokens.$md-comp-radio-button-supported-tokens;
+
+  @each $token, $value in $tokens {
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Token `#{$token}` is not a supported token.';
+    }
+
+    @if $value {
+      --md-radio-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-radio-button-values();
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: var(--md-radio-#{$token}, #{$value});
+    }
+
+    @include ripple.theme(
+      (
+        hover-color: var(--_hover-state-layer-color),
+        hover-opacity: var(--_hover-state-layer-opacity),
+        pressed-color: var(--_pressed-state-layer-color),
+        pressed-opacity: var(--_pressed-state-layer-opacity),
+      )
+    );
+
+    display: inline-flex;
+    height: var(--_icon-size);
+    position: relative;
+    vertical-align: top; // Fix extra space when placed inside display: block
+    width: var(--_icon-size);
+    // Remove highlight color for mobile Safari
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  :host([touch-target='wrapper']) {
+    margin: max(0px, ((48px - var(--_icon-size)) / 2));
+  }
+
+  .container {
+    display: grid;
+    height: 100%;
+    place-content: center;
+    place-items: center;
+    width: 100%;
+  }
+
+  md-focus-ring {
+    height: 44px;
+    inset: unset;
+    width: 44px;
+  }
+
+  .checked {
+    @include ripple.theme(
+      (
+        hover-color: var(--_selected-hover-state-layer-color),
+        hover-opacity: var(--_selected-hover-state-layer-opacity),
+        pressed-color: var(--_selected-pressed-state-layer-color),
+        pressed-opacity: var(--_selected-pressed-state-layer-opacity),
+      )
+    );
+  }
+
+  // <input> is also the touch target
+  input {
+    appearance: none;
+    height: 48px;
+    outline: none;
+    margin: 0;
+    position: absolute;
+    width: 48px;
+  }
+
+  :host([touch-target='none']) input {
+    width: 100%;
+    height: 100%;
+  }
+
+  md-ripple {
+    border-radius: 50%;
+    height: var(--_state-layer-size);
+    inset: unset;
+    width: var(--_state-layer-size);
+  }
+
+  .icon {
+    fill: var(--_icon-color);
+    inset: 0;
+    position: absolute;
+  }
+
+  .outer.circle {
+    // Outline color enter/exit transition
+    transition: fill 50ms linear;
+  }
+
+  .inner.circle {
+    opacity: 0;
+    transform-origin: center;
+    transition: opacity 50ms linear;
+  }
+
+  .checked .icon {
+    fill: var(--_selected-icon-color);
+  }
+
+  .checked .inner.circle {
+    animation: inner-circle-grow 300ms
+      map.get($_md-sys-motion, easing-emphasized-decelerate);
+    opacity: 1;
+  }
+
+  @keyframes inner-circle-grow {
+    from {
+      transform: scale(0);
+    }
+    to {
+      transform: scale(1);
+    }
+  }
+
+  // Don't animate when disabled
+  :host([disabled]) .circle {
+    animation-duration: 0s;
+    transition-duration: 0s;
+  }
+
+  :host(:hover) .icon {
+    fill: var(--_hover-icon-color);
+  }
+
+  :host(:focus-within) .icon {
+    fill: var(--_focus-icon-color);
+  }
+
+  :host(:active) .icon {
+    fill: var(--_pressed-icon-color);
+  }
+
+  :host([disabled]) .icon {
+    fill: var(--_disabled-unselected-icon-color);
+    opacity: var(--_disabled-unselected-icon-opacity);
+  }
+
+  :host(:hover) .checked .icon {
+    fill: var(--_selected-hover-icon-color);
+  }
+
+  :host(:focus-within) .checked .icon {
+    fill: var(--_selected-focus-icon-color);
+  }
+
+  :host(:active) .checked .icon {
+    fill: var(--_selected-pressed-icon-color);
+  }
+
+  :host([disabled]) .checked .icon {
+    fill: var(--_disabled-selected-icon-color);
+    opacity: var(--_disabled-selected-icon-opacity);
+  }
+}

package/radio/internal/forced-colors-styles.css.js

@@ -0,0 +1,9 @@
+/**
+  * @license
+  * Copyright 2022 Google LLC
+  * SPDX-License-Identifier: Apache-2.0
+  */
+import { css } from 'lit';
+export const styles = css `@media(forced-colors: active){:host{--md-radio-disabled-selected-icon-color: GrayText;--md-radio-disabled-selected-icon-opacity: 1;--md-radio-disabled-unselected-icon-color: GrayText;--md-radio-disabled-unselected-icon-opacity: 1;--md-radio-selected-icon-color: CanvasText;--md-radio-selected-hover-icon-color: CanvasText;--md-radio-selected-focus-icon-color: CanvasText;--md-radio-selected-pressed-icon-color: CanvasText;--md-radio-icon-color: CanvasText;--md-radio-hover-icon-color: CanvasText;--md-radio-focus-icon-color: CanvasText;--md-radio-pressed-icon-color: CanvasText}}/*# sourceMappingURL=forced-colors-styles.css.map */
+`;
+//# sourceMappingURL=forced-colors-styles.css.js.map

package/radio/internal/forced-colors-styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"forced-colors-styles.css.js","sourceRoot":"","sources":["forced-colors-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`@media(forced-colors: active){:host{--md-radio-disabled-selected-icon-color: GrayText;--md-radio-disabled-selected-icon-opacity: 1;--md-radio-disabled-unselected-icon-color: GrayText;--md-radio-disabled-unselected-icon-opacity: 1;--md-radio-selected-icon-color: CanvasText;--md-radio-selected-hover-icon-color: CanvasText;--md-radio-selected-focus-icon-color: CanvasText;--md-radio-selected-pressed-icon-color: CanvasText;--md-radio-icon-color: CanvasText;--md-radio-hover-icon-color: CanvasText;--md-radio-focus-icon-color: CanvasText;--md-radio-pressed-icon-color: CanvasText}}/*# sourceMappingURL=forced-colors-styles.css.map */\n`;\n "]}

package/radio/internal/forced-colors-styles.scss

@@ -0,0 +1,29 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use './radio';
+// go/keep-sorted end
+
+@media (forced-colors: active) {
+  :host {
+    @include radio.theme(
+      (
+        disabled-selected-icon-color: GrayText,
+        disabled-selected-icon-opacity: 1,
+        disabled-unselected-icon-color: GrayText,
+        disabled-unselected-icon-opacity: 1,
+        selected-icon-color: CanvasText,
+        selected-hover-icon-color: CanvasText,
+        selected-focus-icon-color: CanvasText,
+        selected-pressed-icon-color: CanvasText,
+        icon-color: CanvasText,
+        hover-icon-color: CanvasText,
+        focus-icon-color: CanvasText,
+        pressed-icon-color: CanvasText,
+      )
+    );
+  }
+}