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

package/progress/internal/circular-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-circular-progress-active-indicator-color, var(--md-sys-color-primary, #6750a4));--_active-indicator-width: var(--md-circular-progress-active-indicator-width, 8.3333333333);--_four-color-active-indicator-four-color: var(--md-circular-progress-four-color-active-indicator-four-color, var(--md-sys-color-tertiary-container, #ffd8e4));--_four-color-active-indicator-one-color: var(--md-circular-progress-four-color-active-indicator-one-color, var(--md-sys-color-primary, #6750a4));--_four-color-active-indicator-three-color: var(--md-circular-progress-four-color-active-indicator-three-color, var(--md-sys-color-tertiary, #7d5260));--_four-color-active-indicator-two-color: var(--md-circular-progress-four-color-active-indicator-two-color, var(--md-sys-color-primary-container, #eaddff));--_size: var(--md-circular-progress-size, 48px);display:inline-flex;vertical-align:middle;min-block-size:var(--_size);min-inline-size:var(--_size);position:relative;align-items:center;justify-content:center;contain:strict;content-visibility:auto}.progress{flex:1;align-self:stretch;margin:4px}.progress,.spinner,.left,.right,.circle,svg,.track,.progress{position:absolute;inset:0}svg{transform:rotate(-90deg)}circle{cx:50%;cy:50%;r:calc(50%*(1 - var(--_active-indicator-width)/100));stroke-width:calc(var(--_active-indicator-width)*1%);stroke-dasharray:100;fill:rgba(0,0,0,0)}.progress{transition:stroke-dashoffset 500ms cubic-bezier(0, 0, 0.2, 1);stroke:var(--_active-indicator-color)}.track{stroke:rgba(0,0,0,0)}.progress.indeterminate{animation:linear infinite linear-rotate;animation-duration:1568.2352941176ms}.spinner{animation:infinite both rotate-arc;animation-duration:5332ms;animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.left{overflow:hidden;inset:0 50% 0 0}.right{overflow:hidden;inset:0 0 0 50%}.circle{box-sizing:border-box;border-radius:50%;border:solid calc(var(--_active-indicator-width)/100*(var(--_size) - 8px));border-color:var(--_active-indicator-color) var(--_active-indicator-color) rgba(0,0,0,0) rgba(0,0,0,0);animation:expand-arc;animation-iteration-count:infinite;animation-fill-mode:both;animation-duration:1333ms,5332ms;animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.four-color .circle{animation-name:expand-arc,four-color}.left .circle{rotate:135deg;inset:0 -100% 0 0}.right .circle{rotate:100deg;inset:0 0 0 -100%;animation-delay:-666.5ms,0ms}@media screen and (forced-colors: active){.progress{stroke:CanvasText}.circle{border-color:CanvasText CanvasText Canvas Canvas}}@keyframes expand-arc{0%{transform:rotate(265deg)}50%{transform:rotate(130deg)}100%{transform:rotate(265deg)}}@keyframes rotate-arc{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}100%{transform:rotate(1080deg)}}@keyframes linear-rotate{to{transform:rotate(360deg)}}@keyframes four-color{0%{border-top-color:var(--_four-color-active-indicator-one-color);border-right-color:var(--_four-color-active-indicator-one-color)}15%{border-top-color:var(--_four-color-active-indicator-one-color);border-right-color:var(--_four-color-active-indicator-one-color)}25%{border-top-color:var(--_four-color-active-indicator-two-color);border-right-color:var(--_four-color-active-indicator-two-color)}40%{border-top-color:var(--_four-color-active-indicator-two-color);border-right-color:var(--_four-color-active-indicator-two-color)}50%{border-top-color:var(--_four-color-active-indicator-three-color);border-right-color:var(--_four-color-active-indicator-three-color)}65%{border-top-color:var(--_four-color-active-indicator-three-color);border-right-color:var(--_four-color-active-indicator-three-color)}75%{border-top-color:var(--_four-color-active-indicator-four-color);border-right-color:var(--_four-color-active-indicator-four-color)}90%{border-top-color:var(--_four-color-active-indicator-four-color);border-right-color:var(--_four-color-active-indicator-four-color)}100%{border-top-color:var(--_four-color-active-indicator-one-color);border-right-color:var(--_four-color-active-indicator-one-color)}}/*# sourceMappingURL=circular-progress-styles.css.map */
+`;
+//# sourceMappingURL=circular-progress-styles.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"circular-progress-styles.css.js","sourceRoot":"","sources":["circular-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-circular-progress-active-indicator-color, var(--md-sys-color-primary, #6750a4));--_active-indicator-width: var(--md-circular-progress-active-indicator-width, 8.3333333333);--_four-color-active-indicator-four-color: var(--md-circular-progress-four-color-active-indicator-four-color, var(--md-sys-color-tertiary-container, #ffd8e4));--_four-color-active-indicator-one-color: var(--md-circular-progress-four-color-active-indicator-one-color, var(--md-sys-color-primary, #6750a4));--_four-color-active-indicator-three-color: var(--md-circular-progress-four-color-active-indicator-three-color, var(--md-sys-color-tertiary, #7d5260));--_four-color-active-indicator-two-color: var(--md-circular-progress-four-color-active-indicator-two-color, var(--md-sys-color-primary-container, #eaddff));--_size: var(--md-circular-progress-size, 48px);display:inline-flex;vertical-align:middle;min-block-size:var(--_size);min-inline-size:var(--_size);position:relative;align-items:center;justify-content:center;contain:strict;content-visibility:auto}.progress{flex:1;align-self:stretch;margin:4px}.progress,.spinner,.left,.right,.circle,svg,.track,.progress{position:absolute;inset:0}svg{transform:rotate(-90deg)}circle{cx:50%;cy:50%;r:calc(50%*(1 - var(--_active-indicator-width)/100));stroke-width:calc(var(--_active-indicator-width)*1%);stroke-dasharray:100;fill:rgba(0,0,0,0)}.progress{transition:stroke-dashoffset 500ms cubic-bezier(0, 0, 0.2, 1);stroke:var(--_active-indicator-color)}.track{stroke:rgba(0,0,0,0)}.progress.indeterminate{animation:linear infinite linear-rotate;animation-duration:1568.2352941176ms}.spinner{animation:infinite both rotate-arc;animation-duration:5332ms;animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.left{overflow:hidden;inset:0 50% 0 0}.right{overflow:hidden;inset:0 0 0 50%}.circle{box-sizing:border-box;border-radius:50%;border:solid calc(var(--_active-indicator-width)/100*(var(--_size) - 8px));border-color:var(--_active-indicator-color) var(--_active-indicator-color) rgba(0,0,0,0) rgba(0,0,0,0);animation:expand-arc;animation-iteration-count:infinite;animation-fill-mode:both;animation-duration:1333ms,5332ms;animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.four-color .circle{animation-name:expand-arc,four-color}.left .circle{rotate:135deg;inset:0 -100% 0 0}.right .circle{rotate:100deg;inset:0 0 0 -100%;animation-delay:-666.5ms,0ms}@media screen and (forced-colors: active){.progress{stroke:CanvasText}.circle{border-color:CanvasText CanvasText Canvas Canvas}}@keyframes expand-arc{0%{transform:rotate(265deg)}50%{transform:rotate(130deg)}100%{transform:rotate(265deg)}}@keyframes rotate-arc{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}100%{transform:rotate(1080deg)}}@keyframes linear-rotate{to{transform:rotate(360deg)}}@keyframes four-color{0%{border-top-color:var(--_four-color-active-indicator-one-color);border-right-color:var(--_four-color-active-indicator-one-color)}15%{border-top-color:var(--_four-color-active-indicator-one-color);border-right-color:var(--_four-color-active-indicator-one-color)}25%{border-top-color:var(--_four-color-active-indicator-two-color);border-right-color:var(--_four-color-active-indicator-two-color)}40%{border-top-color:var(--_four-color-active-indicator-two-color);border-right-color:var(--_four-color-active-indicator-two-color)}50%{border-top-color:var(--_four-color-active-indicator-three-color);border-right-color:var(--_four-color-active-indicator-three-color)}65%{border-top-color:var(--_four-color-active-indicator-three-color);border-right-color:var(--_four-color-active-indicator-three-color)}75%{border-top-color:var(--_four-color-active-indicator-four-color);border-right-color:var(--_four-color-active-indicator-four-color)}90%{border-top-color:var(--_four-color-active-indicator-four-color);border-right-color:var(--_four-color-active-indicator-four-color)}100%{border-top-color:var(--_four-color-active-indicator-one-color);border-right-color:var(--_four-color-active-indicator-one-color)}}/*# sourceMappingURL=circular-progress-styles.css.map */\n`;\n "]}

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

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Progress } from './progress.js';
+/**
+ * A circular progress component.
+ */
+export declare class CircularProgress extends Progress {
+    protected renderIndicator(): import("lit-html").TemplateResult<1>;
+    private renderDeterminateContainer;
+    private renderIndeterminateContainer;
+}

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/{linearprogress/lib → progress/internal}/linear-progress.js

@@ -3,73 +3,50 @@
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-var _a;
 import { __decorate } from "tslib";
-import { html, LitElement, nothing } from 'lit';
+import { html } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
-import { requestUpdateOnAriaChange } from '../../internal/aria/delegate.js';
+import { Progress } from './progress.js';
 /**
  * A linear progress component.
  */
-export class LinearProgress extends LitElement {
+export class LinearProgress extends Progress {
     constructor() {
         super(...arguments);
-        /**
-         * Whether or not to render indeterminate progress in an animated state.
-         */
-        this.indeterminate = false;
-        /**
-         * Progress to display, a fraction between 0 and 1.
-         */
-        this.progress = 0;
         /**
          * Buffer amount to display, a fraction between 0 and 1.
          */
         this.buffer = 1;
-        /**
-         * Whether or not to render indeterminate mode using 4 colors instead of one.
-         *
-         */
-        this.fourColor = false;
         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.
-    render() {
-        const rootClasses = {
-            'indeterminate': this.indeterminate,
-            'animation-ready': this.animationReady,
-            'four-color': this.fourColor
-        };
+    renderIndicator() {
         const progressStyles = {
-            transform: `scaleX(${(this.indeterminate ? 1 : this.progress) * 100}%)`
+            transform: `scaleX(${(this.indeterminate ? 1 : this.value / this.max) * 100}%)`
         };
         const bufferStyles = {
-            transform: `scaleX(${(this.indeterminate ? 1 : this.buffer) * 100}%)`
+            transform: `scaleX(${(this.indeterminate ? 1 : this.buffer / this.max) * 100}%)`
         };
-        // Needed for closure conformance
-        const { ariaLabel } = this;
         return html `
-      <div
-          role="progressbar"
-          class="linear-progress ${classMap(rootClasses)}"
-          aria-label="${ariaLabel || nothing}"
-          aria-valuemin="0"
-          aria-valuemax="1"
-          aria-valuenow="${this.indeterminate ? nothing : this.progress}">
-        <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>
-      </div>`;
+      <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();
@@ -102,24 +79,11 @@ export class LinearProgress extends LitElement {
         await this.updateComplete;
     }
 }
-_a = LinearProgress;
-(() => {
-    requestUpdateOnAriaChange(_a);
-})();
-__decorate([
-    property({ type: Boolean })
-], LinearProgress.prototype, "indeterminate", void 0);
-__decorate([
-    property({ type: Number })
-], LinearProgress.prototype, "progress", void 0);
 __decorate([
     property({ type: Number })
 ], LinearProgress.prototype, "buffer", void 0);
 __decorate([
-    property({ type: Boolean, attribute: 'four-color' })
-], LinearProgress.prototype, "fourColor", void 0);
-__decorate([
-    query('.linear-progress')
+    query('.progress')
 ], LinearProgress.prototype, "rootEl", void 0);
 __decorate([
     state()

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,72 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+var _a;
+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,
+        };
+    }
+}
+_a = Progress;
+(() => {
+    requestUpdateOnAriaChange(_a);
+})();
+__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,EAAI,CAAC,CAAC;AAClC,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(this);\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/{linearprogress → progress}/linear-progress.d.ts

@@ -3,7 +3,7 @@
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { LinearProgress } from './lib/linear-progress.js';
+import { LinearProgress } from './internal/linear-progress.js';
 declare global {
     interface HTMLElementTagNameMap {
         'md-linear-progress': MdLinearProgress;

package/{linearprogress → progress}/linear-progress.js

@@ -5,8 +5,8 @@
  */
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
-import { LinearProgress } from './lib/linear-progress.js';
-import { styles } from './lib/linear-progress-styles.css.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.

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/{lib → internal}/_radio.scss

@@ -47,12 +47,6 @@ $_md-sys-motion: tokens.md-sys-motion-values();
       )
     );
 
-    @include focus-ring.theme(
-      (
-        'outward-offset': -2px,
-      )
-    );
-
     display: inline-flex;
     height: 48px;
     position: relative;
@@ -62,6 +56,14 @@ $_md-sys-motion: tokens.md-sys-motion-values();
     -webkit-tap-highlight-color: transparent;
   }
 
+  md-focus-ring {
+    @include focus-ring.theme(
+      (
+        'outward-offset': -2px,
+      )
+    );
+  }
+
   .checked {
     @include ripple.theme(
       (

package/radio/{lib → internal}/radio-styles.css.js

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host{--_disabled-selected-icon-color: var(--md-radio-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-icon-opacity: var(--md-radio-disabled-selected-icon-opacity, 0.38);--_disabled-unselected-icon-color: var(--md-radio-disabled-unselected-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-unselected-icon-opacity: var(--md-radio-disabled-unselected-icon-opacity, 0.38);--_icon-size: var(--md-radio-icon-size, 20px);--_selected-focus-icon-color: var(--md-radio-selected-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-icon-color: var(--md-radio-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-color: var(--md-radio-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-opacity: var(--md-radio-selected-hover-state-layer-opacity, 0.08);--_selected-icon-color: var(--md-radio-selected-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-icon-color: var(--md-radio-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-state-layer-color: var(--md-radio-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_selected-pressed-state-layer-opacity: var(--md-radio-selected-pressed-state-layer-opacity, 0.12);--_state-layer-size: var(--md-radio-state-layer-size, 40px);--_unselected-focus-icon-color: var(--md-radio-unselected-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-icon-color: var(--md-radio-unselected-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-state-layer-color: var(--md-radio-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-state-layer-opacity: var(--md-radio-unselected-hover-state-layer-opacity, 0.08);--_unselected-icon-color: var(--md-radio-unselected-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-pressed-icon-color: var(--md-radio-unselected-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-state-layer-color: var(--md-radio-unselected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_unselected-pressed-state-layer-opacity: var(--md-radio-unselected-pressed-state-layer-opacity, 0.12);--md-ripple-hover-color: var(--_unselected-hover-state-layer-color);--md-ripple-hover-opacity: var(--_unselected-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_unselected-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_unselected-pressed-state-layer-opacity);--md-focus-ring-outward-offset: -2px;display:inline-flex;height:48px;position:relative;vertical-align:top;width:48px;-webkit-tap-highlight-color:rgba(0,0,0,0)}.checked{--md-ripple-hover-color: var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity: var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_selected-pressed-state-layer-opacity)}input,.icon{inset:0;margin:auto;position:absolute}input{appearance:none;outline:none}md-ripple{border-radius:50%;height:var(--_state-layer-size);width:var(--_state-layer-size)}.icon{fill:var(--_unselected-icon-color);height:var(--_icon-size);width:var(--_icon-size)}.outer.circle{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 cubic-bezier(0.05, 0.7, 0.1, 1);opacity:1}@keyframes inner-circle-grow{from{transform:scale(0)}to{transform:scale(1)}}:host([disabled]) .circle{animation-duration:0s;transition-duration:0s}:host(:hover) .icon{fill:var(--_unselected-hover-icon-color)}:host(:focus-within) .icon{fill:var(--_unselected-focus-icon-color)}:host(:active) .icon{fill:var(--_unselected-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)}/*# sourceMappingURL=radio-styles.css.map */
+export const styles = css `:host{--_disabled-selected-icon-color: var(--md-radio-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-icon-opacity: var(--md-radio-disabled-selected-icon-opacity, 0.38);--_disabled-unselected-icon-color: var(--md-radio-disabled-unselected-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-unselected-icon-opacity: var(--md-radio-disabled-unselected-icon-opacity, 0.38);--_icon-size: var(--md-radio-icon-size, 20px);--_selected-focus-icon-color: var(--md-radio-selected-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-icon-color: var(--md-radio-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-color: var(--md-radio-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-opacity: var(--md-radio-selected-hover-state-layer-opacity, 0.08);--_selected-icon-color: var(--md-radio-selected-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-icon-color: var(--md-radio-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-state-layer-color: var(--md-radio-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_selected-pressed-state-layer-opacity: var(--md-radio-selected-pressed-state-layer-opacity, 0.12);--_state-layer-size: var(--md-radio-state-layer-size, 40px);--_unselected-focus-icon-color: var(--md-radio-unselected-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-icon-color: var(--md-radio-unselected-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-state-layer-color: var(--md-radio-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-state-layer-opacity: var(--md-radio-unselected-hover-state-layer-opacity, 0.08);--_unselected-icon-color: var(--md-radio-unselected-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-pressed-icon-color: var(--md-radio-unselected-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-state-layer-color: var(--md-radio-unselected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_unselected-pressed-state-layer-opacity: var(--md-radio-unselected-pressed-state-layer-opacity, 0.12);--md-ripple-hover-color: var(--_unselected-hover-state-layer-color);--md-ripple-hover-opacity: var(--_unselected-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_unselected-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_unselected-pressed-state-layer-opacity);display:inline-flex;height:48px;position:relative;vertical-align:top;width:48px;-webkit-tap-highlight-color:rgba(0,0,0,0)}md-focus-ring{--md-focus-ring-outward-offset: -2px}.checked{--md-ripple-hover-color: var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity: var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_selected-pressed-state-layer-opacity)}input,.icon{inset:0;margin:auto;position:absolute}input{appearance:none;outline:none}md-ripple{border-radius:50%;height:var(--_state-layer-size);width:var(--_state-layer-size)}.icon{fill:var(--_unselected-icon-color);height:var(--_icon-size);width:var(--_icon-size)}.outer.circle{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 cubic-bezier(0.05, 0.7, 0.1, 1);opacity:1}@keyframes inner-circle-grow{from{transform:scale(0)}to{transform:scale(1)}}:host([disabled]) .circle{animation-duration:0s;transition-duration:0s}:host(:hover) .icon{fill:var(--_unselected-hover-icon-color)}:host(:focus-within) .icon{fill:var(--_unselected-focus-icon-color)}:host(:active) .icon{fill:var(--_unselected-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)}/*# sourceMappingURL=radio-styles.css.map */
 `;
 //# sourceMappingURL=radio-styles.css.js.map

package/radio/{lib → internal}/radio-styles.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-styles.css.js","sourceRoot":"","sources":["radio-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{--_disabled-selected-icon-color: var(--md-radio-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-icon-opacity: var(--md-radio-disabled-selected-icon-opacity, 0.38);--_disabled-unselected-icon-color: var(--md-radio-disabled-unselected-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-unselected-icon-opacity: var(--md-radio-disabled-unselected-icon-opacity, 0.38);--_icon-size: var(--md-radio-icon-size, 20px);--_selected-focus-icon-color: var(--md-radio-selected-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-icon-color: var(--md-radio-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-color: var(--md-radio-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-opacity: var(--md-radio-selected-hover-state-layer-opacity, 0.08);--_selected-icon-color: var(--md-radio-selected-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-icon-color: var(--md-radio-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-state-layer-color: var(--md-radio-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_selected-pressed-state-layer-opacity: var(--md-radio-selected-pressed-state-layer-opacity, 0.12);--_state-layer-size: var(--md-radio-state-layer-size, 40px);--_unselected-focus-icon-color: var(--md-radio-unselected-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-icon-color: var(--md-radio-unselected-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-state-layer-color: var(--md-radio-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-state-layer-opacity: var(--md-radio-unselected-hover-state-layer-opacity, 0.08);--_unselected-icon-color: var(--md-radio-unselected-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-pressed-icon-color: var(--md-radio-unselected-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-state-layer-color: var(--md-radio-unselected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_unselected-pressed-state-layer-opacity: var(--md-radio-unselected-pressed-state-layer-opacity, 0.12);--md-ripple-hover-color: var(--_unselected-hover-state-layer-color);--md-ripple-hover-opacity: var(--_unselected-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_unselected-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_unselected-pressed-state-layer-opacity);--md-focus-ring-outward-offset: -2px;display:inline-flex;height:48px;position:relative;vertical-align:top;width:48px;-webkit-tap-highlight-color:rgba(0,0,0,0)}.checked{--md-ripple-hover-color: var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity: var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_selected-pressed-state-layer-opacity)}input,.icon{inset:0;margin:auto;position:absolute}input{appearance:none;outline:none}md-ripple{border-radius:50%;height:var(--_state-layer-size);width:var(--_state-layer-size)}.icon{fill:var(--_unselected-icon-color);height:var(--_icon-size);width:var(--_icon-size)}.outer.circle{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 cubic-bezier(0.05, 0.7, 0.1, 1);opacity:1}@keyframes inner-circle-grow{from{transform:scale(0)}to{transform:scale(1)}}:host([disabled]) .circle{animation-duration:0s;transition-duration:0s}:host(:hover) .icon{fill:var(--_unselected-hover-icon-color)}:host(:focus-within) .icon{fill:var(--_unselected-focus-icon-color)}:host(:active) .icon{fill:var(--_unselected-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)}/*# sourceMappingURL=radio-styles.css.map */\n`;\n "]}
+{"version":3,"file":"radio-styles.css.js","sourceRoot":"","sources":["radio-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{--_disabled-selected-icon-color: var(--md-radio-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-icon-opacity: var(--md-radio-disabled-selected-icon-opacity, 0.38);--_disabled-unselected-icon-color: var(--md-radio-disabled-unselected-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-unselected-icon-opacity: var(--md-radio-disabled-unselected-icon-opacity, 0.38);--_icon-size: var(--md-radio-icon-size, 20px);--_selected-focus-icon-color: var(--md-radio-selected-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-icon-color: var(--md-radio-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-color: var(--md-radio-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-opacity: var(--md-radio-selected-hover-state-layer-opacity, 0.08);--_selected-icon-color: var(--md-radio-selected-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-icon-color: var(--md-radio-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-state-layer-color: var(--md-radio-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_selected-pressed-state-layer-opacity: var(--md-radio-selected-pressed-state-layer-opacity, 0.12);--_state-layer-size: var(--md-radio-state-layer-size, 40px);--_unselected-focus-icon-color: var(--md-radio-unselected-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-icon-color: var(--md-radio-unselected-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-state-layer-color: var(--md-radio-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-state-layer-opacity: var(--md-radio-unselected-hover-state-layer-opacity, 0.08);--_unselected-icon-color: var(--md-radio-unselected-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-pressed-icon-color: var(--md-radio-unselected-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-state-layer-color: var(--md-radio-unselected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_unselected-pressed-state-layer-opacity: var(--md-radio-unselected-pressed-state-layer-opacity, 0.12);--md-ripple-hover-color: var(--_unselected-hover-state-layer-color);--md-ripple-hover-opacity: var(--_unselected-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_unselected-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_unselected-pressed-state-layer-opacity);display:inline-flex;height:48px;position:relative;vertical-align:top;width:48px;-webkit-tap-highlight-color:rgba(0,0,0,0)}md-focus-ring{--md-focus-ring-outward-offset: -2px}.checked{--md-ripple-hover-color: var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity: var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_selected-pressed-state-layer-opacity)}input,.icon{inset:0;margin:auto;position:absolute}input{appearance:none;outline:none}md-ripple{border-radius:50%;height:var(--_state-layer-size);width:var(--_state-layer-size)}.icon{fill:var(--_unselected-icon-color);height:var(--_icon-size);width:var(--_icon-size)}.outer.circle{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 cubic-bezier(0.05, 0.7, 0.1, 1);opacity:1}@keyframes inner-circle-grow{from{transform:scale(0)}to{transform:scale(1)}}:host([disabled]) .circle{animation-duration:0s;transition-duration:0s}:host(:hover) .icon{fill:var(--_unselected-hover-icon-color)}:host(:focus-within) .icon{fill:var(--_unselected-focus-icon-color)}:host(:active) .icon{fill:var(--_unselected-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)}/*# sourceMappingURL=radio-styles.css.map */\n`;\n "]}

package/radio/{lib → internal}/radio.d.ts

@@ -3,7 +3,7 @@
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import '../../focus/focus-ring.js';
+import '../../focus/md-focus-ring.js';
 import '../../ripple/ripple.js';
 import { LitElement } from 'lit';
 declare const CHECKED: unique symbol;
@@ -15,6 +15,7 @@ export declare class Radio extends LitElement {
     static shadowRootOptions: ShadowRootInit;
     /** @nocollapse */
     static formAssociated: boolean;
+    private readonly maskId;
     /**
      * Whether or not the radio is selected.
      */

package/radio/{lib → internal}/radio.js

@@ -5,7 +5,7 @@
  */
 var _a, _b;
 import { __decorate } from "tslib";
-import '../../focus/focus-ring.js';
+import '../../focus/md-focus-ring.js';
 import '../../ripple/ripple.js';
 import { html, isServer, LitElement, nothing } from 'lit';
 import { property, query } from 'lit/decorators.js';
@@ -14,6 +14,7 @@ import { requestUpdateOnAriaChange } from '../../internal/aria/delegate.js';
 import { dispatchActivationClick, isActivationClick, redispatchEvent } from '../../internal/controller/events.js';
 import { SingleSelectionController } from './single-selection-controller.js';
 const CHECKED = Symbol('checked');
+let maskId = 0;
 /**
  * A radio component.
  */
@@ -58,6 +59,9 @@ export class Radio extends LitElement {
     }
     constructor() {
         super();
+        // Unique maskId is required because of a Safari bug that fail to persist
+        // reference to the mask. This should be removed once the bug is fixed.
+        this.maskId = `cutout${++maskId}`;
         this[_b] = false;
         /**
          * Whether or not the radio is disabled.
@@ -90,13 +94,13 @@ export class Radio extends LitElement {
         return html `
       <div class=${classMap(classes)}>
         <md-ripple for="input" ?disabled=${this.disabled}></md-ripple>
-        <md-focus-ring for="input"></md-focus-ring>
+        <md-focus-ring part="focus-ring" for="input"></md-focus-ring>
         <svg class="icon" viewBox="0 0 20 20">
-          <mask id="cutout">
+          <mask id="${this.maskId}">
             <rect width="100%" height="100%" fill="white" />
             <circle cx="10" cy="10" r="8" fill="black" />
           </mask>
-          <circle class="outer circle" cx="10" cy="10" r="10" mask="url(#cutout)" />
+          <circle class="outer circle" cx="10" cy="10" r="10" mask="url(#${this.maskId})" />
           <circle class="inner circle" cx="10" cy="10" r="5" />
         </svg>
         <input