@material/web 1.1.0 → 1.1.2-nightly.035d155.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@material/web",
-  "version": "1.1.0",
+  "version": "1.1.2-nightly.035d155.0",
   "publishConfig": {
     "access": "public"
   },
@@ -29,8 +29,9 @@
     "build:sass": "wireit",
     "test": "wireit",
     "build:catalog": "wireit",
-    "build:analyzer": "wireit",
-    "update-docs": "wireit"
+    "build:scripts": "wireit",
+    "update-docs": "wireit",
+    "update-size": "wireit"
   },
   "type": "module",
   "files": [
@@ -40,6 +41,7 @@
     "**/*.scss",
     "!css-to-ts.js",
     "!web-test-runner.config.js",
+    "!commitlint.config.js",
     "!**/test/**",
     "!**/testing/**",
     "!**/*_test.*",
@@ -56,10 +58,14 @@
   },
   "devDependencies": {
     "@lit-labs/analyzer": "^0.9.2",
+    "@rollup/plugin-multi-entry": "^6.0.1",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
     "@types/jasmine": "^4.0.3",
     "@web/test-runner": "^0.15.0",
     "@web/test-runner-playwright": "^0.9.0",
     "jasmine": "^4.5.0",
+    "rollup": "^2.79.1",
     "sass": "^1.52.3",
     "sass-true": "^6.1.0",
     "typescript": "5.1.6",
@@ -90,6 +96,7 @@
         "**/*.d.ts",
         "!css-to-ts.js",
         "!web-test-runner.config.js",
+        "!commitlint.config.js",
         "!types/",
         "!catalog",
         "!scripts/"
@@ -145,19 +152,19 @@
         "./catalog:build:prod"
       ]
     },
-    "build:analyzer": {
+    "build:scripts": {
       "command": "tsc -b scripts/tsconfig.json --pretty",
       "files": [
         "scripts/tsconfig.json",
-        "scripts/analyzer/**/*.ts",
+        "scripts/**/*.ts",
         "!**/*.d.ts",
         "!**/*.css.ts"
       ],
       "output": [
         "scripts/.tsbuildinfo",
-        "scripts/analyzer/**/*.js",
-        "scripts/analyzer/**/*.js.map",
-        "scripts/analyzer/**/*.d.ts"
+        "scripts/**/*.js",
+        "scripts/**/*.js.map",
+        "scripts/**/*.d.ts"
       ],
       "clean": "if-file-deleted"
     },
@@ -175,7 +182,14 @@
       ],
       "output": [],
       "dependencies": [
-        "build:analyzer"
+        "build:scripts"
+      ]
+    },
+    "update-size": {
+      "command": "node scripts/size/update-size.js",
+      "dependencies": [
+        "build:scripts",
+        "build"
       ]
     }
   }

package/progress/internal/_linear-progress.scss

@@ -114,6 +114,12 @@ $_indeterminate-duration: 2s;
     z-index: -1; // Place behind tracks for Safari
   }
 
+  // dots are hidden when indeterminate or when there is no visible buffer to
+  // prevent infinite invisible animation.
+  .dots[hidden] {
+    display: none;
+  }
+
   // indeterminate
   .indeterminate .bar {
     transition: none;
@@ -131,10 +137,6 @@ $_indeterminate-duration: 2s;
     display: block;
   }
 
-  .indeterminate .dots {
-    display: none;
-  }
-
   .indeterminate .primary-bar {
     animation: linear infinite $_indeterminate-duration;
     animation-name: primary-indeterminate-translate;

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

@@ -4,6 +4,6 @@
   * 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);border-radius:var(--_track-shape);display:flex;position:relative;min-width:80px;height:var(--_track-height);content-visibility:auto;contain:strict}.progress,.dots,.inactive-track,.bar,.bar-inner{position:absolute}.progress{direction:ltr;inset:0;border-radius:inherit;overflow:hidden;display:flex;align-items:center}.bar{animation:none;width:100%;height: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)}.inactive-track{background:var(--_track-color);inset:0;transition:transform 250ms cubic-bezier(0.4, 0, 0.6, 1);transform-origin:left center}.dots{inset:0;animation:linear infinite 250ms;animation-name:buffering;background-color:var(--_track-color);background-repeat:repeat-x;-webkit-mask-image:url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 2' preserveAspectRatio='xMinYMin slice'%3E%3Ccircle cx='1' cy='1' r='1'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 2' preserveAspectRatio='xMinYMin slice'%3E%3Ccircle cx='1' cy='1' r='1'/%3E%3C/svg%3E");z-index:-1}.indeterminate .bar{transition:none}.indeterminate .primary-bar{inset-inline-start:-145.167%}.indeterminate .secondary-bar{inset-inline-start:-54.8889%;display:block}.indeterminate .dots{display:none}.indeterminate .primary-bar{animation:linear infinite 2s;animation-name:primary-indeterminate-translate}.indeterminate .primary-bar>.bar-inner{animation:linear infinite 2s primary-indeterminate-scale}.indeterminate.four-color .primary-bar>.bar-inner{animation-name:primary-indeterminate-scale,four-color;animation-duration:2s,4s}.indeterminate .secondary-bar{animation:linear infinite 2s;animation-name:secondary-indeterminate-translate}.indeterminate .secondary-bar>.bar-inner{animation:linear infinite 2s secondary-indeterminate-scale}.indeterminate.four-color .secondary-bar>.bar-inner{animation-name:secondary-indeterminate-scale,four-color;animation-duration:2s,4s}:host-context([dir=rtl]),:host([dir=rtl]){transform:scale(-1)}:host(:dir(rtl)){transform:scale(-1)}@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(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(83.6714%)}100%{transform:translateX(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(37.6519%)}48.35%{animation-timing-function:cubic-bezier(0.4, 0.627035, 0.6, 0.902026);transform:translateX(84.3862%)}100%{transform:translateX(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(forced-colors: active){:host{outline:1px solid CanvasText}.bar-inner,.dots{background-color:CanvasText}}/*# sourceMappingURL=linear-progress-styles.css.map */
+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);border-radius:var(--_track-shape);display:flex;position:relative;min-width:80px;height:var(--_track-height);content-visibility:auto;contain:strict}.progress,.dots,.inactive-track,.bar,.bar-inner{position:absolute}.progress{direction:ltr;inset:0;border-radius:inherit;overflow:hidden;display:flex;align-items:center}.bar{animation:none;width:100%;height: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)}.inactive-track{background:var(--_track-color);inset:0;transition:transform 250ms cubic-bezier(0.4, 0, 0.6, 1);transform-origin:left center}.dots{inset:0;animation:linear infinite 250ms;animation-name:buffering;background-color:var(--_track-color);background-repeat:repeat-x;-webkit-mask-image:url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 2' preserveAspectRatio='xMinYMin slice'%3E%3Ccircle cx='1' cy='1' r='1'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 2' preserveAspectRatio='xMinYMin slice'%3E%3Ccircle cx='1' cy='1' r='1'/%3E%3C/svg%3E");z-index:-1}.dots[hidden]{display:none}.indeterminate .bar{transition:none}.indeterminate .primary-bar{inset-inline-start:-145.167%}.indeterminate .secondary-bar{inset-inline-start:-54.8889%;display:block}.indeterminate .primary-bar{animation:linear infinite 2s;animation-name:primary-indeterminate-translate}.indeterminate .primary-bar>.bar-inner{animation:linear infinite 2s primary-indeterminate-scale}.indeterminate.four-color .primary-bar>.bar-inner{animation-name:primary-indeterminate-scale,four-color;animation-duration:2s,4s}.indeterminate .secondary-bar{animation:linear infinite 2s;animation-name:secondary-indeterminate-translate}.indeterminate .secondary-bar>.bar-inner{animation:linear infinite 2s secondary-indeterminate-scale}.indeterminate.four-color .secondary-bar>.bar-inner{animation-name:secondary-indeterminate-scale,four-color;animation-duration:2s,4s}:host-context([dir=rtl]),:host([dir=rtl]){transform:scale(-1)}:host(:dir(rtl)){transform:scale(-1)}@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(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(83.6714%)}100%{transform:translateX(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(37.6519%)}48.35%{animation-timing-function:cubic-bezier(0.4, 0.627035, 0.6, 0.902026);transform:translateX(84.3862%)}100%{transform:translateX(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(forced-colors: active){:host{outline:1px solid CanvasText}.bar-inner,.dots{background-color:CanvasText}}/*# sourceMappingURL=linear-progress-styles.css.map */
 `;
 //# sourceMappingURL=linear-progress-styles.css.js.map

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

@@ -1 +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);border-radius:var(--_track-shape);display:flex;position:relative;min-width:80px;height:var(--_track-height);content-visibility:auto;contain:strict}.progress,.dots,.inactive-track,.bar,.bar-inner{position:absolute}.progress{direction:ltr;inset:0;border-radius:inherit;overflow:hidden;display:flex;align-items:center}.bar{animation:none;width:100%;height: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)}.inactive-track{background:var(--_track-color);inset:0;transition:transform 250ms cubic-bezier(0.4, 0, 0.6, 1);transform-origin:left center}.dots{inset:0;animation:linear infinite 250ms;animation-name:buffering;background-color:var(--_track-color);background-repeat:repeat-x;-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 2' preserveAspectRatio='xMinYMin slice'%3E%3Ccircle cx='1' cy='1' r='1'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 2' preserveAspectRatio='xMinYMin slice'%3E%3Ccircle cx='1' cy='1' r='1'/%3E%3C/svg%3E\");z-index:-1}.indeterminate .bar{transition:none}.indeterminate .primary-bar{inset-inline-start:-145.167%}.indeterminate .secondary-bar{inset-inline-start:-54.8889%;display:block}.indeterminate .dots{display:none}.indeterminate .primary-bar{animation:linear infinite 2s;animation-name:primary-indeterminate-translate}.indeterminate .primary-bar>.bar-inner{animation:linear infinite 2s primary-indeterminate-scale}.indeterminate.four-color .primary-bar>.bar-inner{animation-name:primary-indeterminate-scale,four-color;animation-duration:2s,4s}.indeterminate .secondary-bar{animation:linear infinite 2s;animation-name:secondary-indeterminate-translate}.indeterminate .secondary-bar>.bar-inner{animation:linear infinite 2s secondary-indeterminate-scale}.indeterminate.four-color .secondary-bar>.bar-inner{animation-name:secondary-indeterminate-scale,four-color;animation-duration:2s,4s}:host-context([dir=rtl]),:host([dir=rtl]){transform:scale(-1)}:host(:dir(rtl)){transform:scale(-1)}@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(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(83.6714%)}100%{transform:translateX(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(37.6519%)}48.35%{animation-timing-function:cubic-bezier(0.4, 0.627035, 0.6, 0.902026);transform:translateX(84.3862%)}100%{transform:translateX(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(forced-colors: active){:host{outline:1px solid CanvasText}.bar-inner,.dots{background-color:CanvasText}}/*# sourceMappingURL=linear-progress-styles.css.map */\n`;\n "]}
+{"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);border-radius:var(--_track-shape);display:flex;position:relative;min-width:80px;height:var(--_track-height);content-visibility:auto;contain:strict}.progress,.dots,.inactive-track,.bar,.bar-inner{position:absolute}.progress{direction:ltr;inset:0;border-radius:inherit;overflow:hidden;display:flex;align-items:center}.bar{animation:none;width:100%;height: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)}.inactive-track{background:var(--_track-color);inset:0;transition:transform 250ms cubic-bezier(0.4, 0, 0.6, 1);transform-origin:left center}.dots{inset:0;animation:linear infinite 250ms;animation-name:buffering;background-color:var(--_track-color);background-repeat:repeat-x;-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 2' preserveAspectRatio='xMinYMin slice'%3E%3Ccircle cx='1' cy='1' r='1'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 2' preserveAspectRatio='xMinYMin slice'%3E%3Ccircle cx='1' cy='1' r='1'/%3E%3C/svg%3E\");z-index:-1}.dots[hidden]{display:none}.indeterminate .bar{transition:none}.indeterminate .primary-bar{inset-inline-start:-145.167%}.indeterminate .secondary-bar{inset-inline-start:-54.8889%;display:block}.indeterminate .primary-bar{animation:linear infinite 2s;animation-name:primary-indeterminate-translate}.indeterminate .primary-bar>.bar-inner{animation:linear infinite 2s primary-indeterminate-scale}.indeterminate.four-color .primary-bar>.bar-inner{animation-name:primary-indeterminate-scale,four-color;animation-duration:2s,4s}.indeterminate .secondary-bar{animation:linear infinite 2s;animation-name:secondary-indeterminate-translate}.indeterminate .secondary-bar>.bar-inner{animation:linear infinite 2s secondary-indeterminate-scale}.indeterminate.four-color .secondary-bar>.bar-inner{animation-name:secondary-indeterminate-scale,four-color;animation-duration:2s,4s}:host-context([dir=rtl]),:host([dir=rtl]){transform:scale(-1)}:host(:dir(rtl)){transform:scale(-1)}@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(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(83.6714%)}100%{transform:translateX(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(37.6519%)}48.35%{animation-timing-function:cubic-bezier(0.4, 0.627035, 0.6, 0.902026);transform:translateX(84.3862%)}100%{transform:translateX(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(forced-colors: active){:host{outline:1px solid CanvasText}.bar-inner,.dots{background-color:CanvasText}}/*# sourceMappingURL=linear-progress-styles.css.map */\n`;\n "]}

package/progress/internal/linear-progress.js

@@ -29,8 +29,11 @@ export class LinearProgress extends Progress {
         const dotStyles = {
             transform: `scaleX(${(this.indeterminate ? 1 : this.buffer / this.max) * 100}%)`,
         };
+        // Only display dots when visible - this prevents invisible infinite
+        // animation.
+        const hideDots = this.indeterminate || this.buffer >= this.max || this.value >= this.max;
         return html `
-      <div class="dots"></div>
+      <div class="dots" ?hidden=${hideDots}></div>
       <div class="inactive-track" style=${styleMap(dotStyles)}></div>
       <div class="bar primary-bar" style=${styleMap(progressStyles)}>
         <div class="bar-inner"></div>

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

@@ -1 +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,EAAC,MAAM,mBAAmB,CAAC;AAC3C,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;IA4BvC,CAAC;IA1BC,mEAAmE;IACnE,8EAA8E;IAC9E,mDAAmD;IAChC,eAAe;QAChC,MAAM,cAAc,GAAG;YACrB,SAAS,EAAE,UACT,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,GACrD,IAAI;SACL,CAAC;QACF,MAAM,SAAS,GAAG;YAChB,SAAS,EAAE,UACT,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,GACtD,IAAI;SACL,CAAC;QAEF,OAAO,IAAI,CAAA;;0CAE2B,QAAQ,CAAC,SAAS,CAAC;2CAClB,QAAQ,CAAC,cAAc,CAAC;;;;;;KAM9D,CAAC;IACJ,CAAC;CACF;AA5B2B;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;8CAAY","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html} from 'lit';\nimport {property} 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 `max`.\n   */\n  @property({type: Number}) buffer = 1;\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: `scaleX(${\n        (this.indeterminate ? 1 : this.value / this.max) * 100\n      }%)`,\n    };\n    const dotStyles = {\n      transform: `scaleX(${\n        (this.indeterminate ? 1 : this.buffer / this.max) * 100\n      }%)`,\n    };\n\n    return html`\n      <div class=\"dots\"></div>\n      <div class=\"inactive-track\" style=${styleMap(dotStyles)}></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"]}
+{"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,EAAC,MAAM,mBAAmB,CAAC;AAC3C,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;IAgCvC,CAAC;IA9BC,mEAAmE;IACnE,8EAA8E;IAC9E,mDAAmD;IAChC,eAAe;QAChC,MAAM,cAAc,GAAG;YACrB,SAAS,EAAE,UACT,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,GACrD,IAAI;SACL,CAAC;QACF,MAAM,SAAS,GAAG;YAChB,SAAS,EAAE,UACT,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,GACtD,IAAI;SACL,CAAC;QAEF,oEAAoE;QACpE,aAAa;QACb,MAAM,QAAQ,GACZ,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,CAAC;QAC1E,OAAO,IAAI,CAAA;kCACmB,QAAQ;0CACA,QAAQ,CAAC,SAAS,CAAC;2CAClB,QAAQ,CAAC,cAAc,CAAC;;;;;;KAM9D,CAAC;IACJ,CAAC;CACF;AAhC2B;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;8CAAY","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html} from 'lit';\nimport {property} 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 `max`.\n   */\n  @property({type: Number}) buffer = 1;\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: `scaleX(${\n        (this.indeterminate ? 1 : this.value / this.max) * 100\n      }%)`,\n    };\n    const dotStyles = {\n      transform: `scaleX(${\n        (this.indeterminate ? 1 : this.buffer / this.max) * 100\n      }%)`,\n    };\n\n    // Only display dots when visible - this prevents invisible infinite\n    // animation.\n    const hideDots =\n      this.indeterminate || this.buffer >= this.max || this.value >= this.max;\n    return html`\n      <div class=\"dots\" ?hidden=${hideDots}></div>\n      <div class=\"inactive-track\" style=${styleMap(dotStyles)}></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"]}

package/radio/internal/radio.js

@@ -10,7 +10,7 @@ import '../../ripple/ripple.js';
 import { html, isServer, LitElement } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { isActivationClick } from '../../internal/controller/events.js';
+import { isActivationClick } from '../../internal/events/form-label-activation.js';
 import { createValidator, getValidityAnchor, mixinConstraintValidation, } from '../../labs/behaviors/constraint-validation.js';
 import { internals, mixinElementInternals, } from '../../labs/behaviors/element-internals.js';
 import { mixinFocusable } from '../../labs/behaviors/focusable.js';

package/radio/internal/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","sourceRoot":"","sources":["radio.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/md-focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, isServer, LitElement} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {isActivationClick} from '../../internal/controller/events.js';\nimport {\n  createValidator,\n  getValidityAnchor,\n  mixinConstraintValidation,\n} from '../../labs/behaviors/constraint-validation.js';\nimport {\n  internals,\n  mixinElementInternals,\n} from '../../labs/behaviors/element-internals.js';\nimport {mixinFocusable} from '../../labs/behaviors/focusable.js';\nimport {\n  getFormState,\n  getFormValue,\n  mixinFormAssociated,\n} from '../../labs/behaviors/form-associated.js';\nimport {RadioValidator} from '../../labs/behaviors/validators/radio-validator.js';\n\nimport {SingleSelectionController} from './single-selection-controller.js';\n\nconst CHECKED = Symbol('checked');\nlet maskId = 0;\n\n// Separate variable needed for closure.\nconst radioBaseClass = mixinConstraintValidation(\n  mixinFormAssociated(mixinElementInternals(mixinFocusable(LitElement))),\n);\n\n/**\n * A radio component.\n *\n * @fires input {InputEvent} Dispatched when the value changes from user\n * interaction. --bubbles\n * @fires change {Event} Dispatched when the value changes from user\n * interaction. --bubbles --composed\n */\nexport class Radio extends radioBaseClass {\n  // Unique maskId is required because of a Safari bug that fail to persist\n  // reference to the mask. This should be removed once the bug is fixed.\n  private readonly maskId = `cutout${++maskId}`;\n\n  /**\n   * Whether or not the radio is selected.\n   */\n  @property({type: Boolean})\n  get checked() {\n    return this[CHECKED];\n  }\n  set checked(checked: boolean) {\n    const wasChecked = this.checked;\n    if (wasChecked === checked) {\n      return;\n    }\n\n    this[CHECKED] = checked;\n    this.requestUpdate('checked', wasChecked);\n    this.selectionController.handleCheckedChange();\n  }\n\n  [CHECKED] = false;\n\n  /**\n   * Whether or not the radio is required. If any radio is required in a group,\n   * all radios are implicitly required.\n   */\n  @property({type: Boolean}) required = false;\n\n  /**\n   * The element value to use in form submission when checked.\n   */\n  @property() value = 'on';\n\n  @query('.container') private readonly container!: HTMLElement;\n  private readonly selectionController = new SingleSelectionController(this);\n\n  constructor() {\n    super();\n    this.addController(this.selectionController);\n    if (!isServer) {\n      this[internals].role = 'radio';\n      this.addEventListener('click', this.handleClick.bind(this));\n      this.addEventListener('keydown', this.handleKeydown.bind(this));\n    }\n  }\n\n  protected override render() {\n    const classes = {'checked': this.checked};\n    return html`\n      <div class=\"container ${classMap(classes)}\" aria-hidden=\"true\">\n        <md-ripple\n          part=\"ripple\"\n          .control=${this}\n          ?disabled=${this.disabled}></md-ripple>\n        <md-focus-ring part=\"focus-ring\" .control=${this}></md-focus-ring>\n        <svg class=\"icon\" viewBox=\"0 0 20 20\">\n          <mask id=\"${this.maskId}\">\n            <rect width=\"100%\" height=\"100%\" fill=\"white\" />\n            <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"black\" />\n          </mask>\n          <circle\n            class=\"outer circle\"\n            cx=\"10\"\n            cy=\"10\"\n            r=\"10\"\n            mask=\"url(#${this.maskId})\" />\n          <circle class=\"inner circle\" cx=\"10\" cy=\"10\" r=\"5\" />\n        </svg>\n\n        <input\n          id=\"input\"\n          type=\"radio\"\n          tabindex=\"-1\"\n          .checked=${this.checked}\n          .value=${this.value}\n          ?disabled=${this.disabled} />\n      </div>\n    `;\n  }\n\n  protected override updated() {\n    this[internals].ariaChecked = String(this.checked);\n  }\n\n  private async handleClick(event: Event) {\n    if (this.disabled) {\n      return;\n    }\n\n    // allow event to propagate to user code after a microtask.\n    await 0;\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    if (isActivationClick(event)) {\n      this.focus();\n    }\n\n    // Per spec, clicking on a radio input always selects it.\n    this.checked = true;\n    this.dispatchEvent(new Event('change', {bubbles: true}));\n    this.dispatchEvent(\n      new InputEvent('input', {bubbles: true, composed: true}),\n    );\n  }\n\n  private async handleKeydown(event: KeyboardEvent) {\n    // allow event to propagate to user code after a microtask.\n    await 0;\n    if (event.key !== ' ' || event.defaultPrevented) {\n      return;\n    }\n\n    this.click();\n  }\n\n  // Writable mixin properties for lit-html binding, needed for lit-analyzer\n  declare disabled: boolean;\n  declare name: string;\n\n  override [getFormValue]() {\n    return this.checked ? this.value : null;\n  }\n\n  override [getFormState]() {\n    return String(this.checked);\n  }\n\n  override formResetCallback() {\n    // The checked property does not reflect, so the original attribute set by\n    // the user is used to determine the default value.\n    this.checked = this.hasAttribute('checked');\n  }\n\n  override formStateRestoreCallback(state: string) {\n    this.checked = state === 'true';\n  }\n\n  [createValidator]() {\n    return new RadioValidator(() => {\n      if (!this.selectionController) {\n        // Validation runs on superclass construction, so selection controller\n        // might not actually be ready until this class constructs.\n        return [this];\n      }\n\n      return this.selectionController.controls as [Radio, ...Radio[]];\n    });\n  }\n\n  [getValidityAnchor]() {\n    return this.container;\n  }\n}\n"]}
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["radio.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/md-focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, isServer, LitElement} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {isActivationClick} from '../../internal/events/form-label-activation.js';\nimport {\n  createValidator,\n  getValidityAnchor,\n  mixinConstraintValidation,\n} from '../../labs/behaviors/constraint-validation.js';\nimport {\n  internals,\n  mixinElementInternals,\n} from '../../labs/behaviors/element-internals.js';\nimport {mixinFocusable} from '../../labs/behaviors/focusable.js';\nimport {\n  getFormState,\n  getFormValue,\n  mixinFormAssociated,\n} from '../../labs/behaviors/form-associated.js';\nimport {RadioValidator} from '../../labs/behaviors/validators/radio-validator.js';\n\nimport {SingleSelectionController} from './single-selection-controller.js';\n\nconst CHECKED = Symbol('checked');\nlet maskId = 0;\n\n// Separate variable needed for closure.\nconst radioBaseClass = mixinConstraintValidation(\n  mixinFormAssociated(mixinElementInternals(mixinFocusable(LitElement))),\n);\n\n/**\n * A radio component.\n *\n * @fires input {InputEvent} Dispatched when the value changes from user\n * interaction. --bubbles\n * @fires change {Event} Dispatched when the value changes from user\n * interaction. --bubbles --composed\n */\nexport class Radio extends radioBaseClass {\n  // Unique maskId is required because of a Safari bug that fail to persist\n  // reference to the mask. This should be removed once the bug is fixed.\n  private readonly maskId = `cutout${++maskId}`;\n\n  /**\n   * Whether or not the radio is selected.\n   */\n  @property({type: Boolean})\n  get checked() {\n    return this[CHECKED];\n  }\n  set checked(checked: boolean) {\n    const wasChecked = this.checked;\n    if (wasChecked === checked) {\n      return;\n    }\n\n    this[CHECKED] = checked;\n    this.requestUpdate('checked', wasChecked);\n    this.selectionController.handleCheckedChange();\n  }\n\n  [CHECKED] = false;\n\n  /**\n   * Whether or not the radio is required. If any radio is required in a group,\n   * all radios are implicitly required.\n   */\n  @property({type: Boolean}) required = false;\n\n  /**\n   * The element value to use in form submission when checked.\n   */\n  @property() value = 'on';\n\n  @query('.container') private readonly container!: HTMLElement;\n  private readonly selectionController = new SingleSelectionController(this);\n\n  constructor() {\n    super();\n    this.addController(this.selectionController);\n    if (!isServer) {\n      this[internals].role = 'radio';\n      this.addEventListener('click', this.handleClick.bind(this));\n      this.addEventListener('keydown', this.handleKeydown.bind(this));\n    }\n  }\n\n  protected override render() {\n    const classes = {'checked': this.checked};\n    return html`\n      <div class=\"container ${classMap(classes)}\" aria-hidden=\"true\">\n        <md-ripple\n          part=\"ripple\"\n          .control=${this}\n          ?disabled=${this.disabled}></md-ripple>\n        <md-focus-ring part=\"focus-ring\" .control=${this}></md-focus-ring>\n        <svg class=\"icon\" viewBox=\"0 0 20 20\">\n          <mask id=\"${this.maskId}\">\n            <rect width=\"100%\" height=\"100%\" fill=\"white\" />\n            <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"black\" />\n          </mask>\n          <circle\n            class=\"outer circle\"\n            cx=\"10\"\n            cy=\"10\"\n            r=\"10\"\n            mask=\"url(#${this.maskId})\" />\n          <circle class=\"inner circle\" cx=\"10\" cy=\"10\" r=\"5\" />\n        </svg>\n\n        <input\n          id=\"input\"\n          type=\"radio\"\n          tabindex=\"-1\"\n          .checked=${this.checked}\n          .value=${this.value}\n          ?disabled=${this.disabled} />\n      </div>\n    `;\n  }\n\n  protected override updated() {\n    this[internals].ariaChecked = String(this.checked);\n  }\n\n  private async handleClick(event: Event) {\n    if (this.disabled) {\n      return;\n    }\n\n    // allow event to propagate to user code after a microtask.\n    await 0;\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    if (isActivationClick(event)) {\n      this.focus();\n    }\n\n    // Per spec, clicking on a radio input always selects it.\n    this.checked = true;\n    this.dispatchEvent(new Event('change', {bubbles: true}));\n    this.dispatchEvent(\n      new InputEvent('input', {bubbles: true, composed: true}),\n    );\n  }\n\n  private async handleKeydown(event: KeyboardEvent) {\n    // allow event to propagate to user code after a microtask.\n    await 0;\n    if (event.key !== ' ' || event.defaultPrevented) {\n      return;\n    }\n\n    this.click();\n  }\n\n  // Writable mixin properties for lit-html binding, needed for lit-analyzer\n  declare disabled: boolean;\n  declare name: string;\n\n  override [getFormValue]() {\n    return this.checked ? this.value : null;\n  }\n\n  override [getFormState]() {\n    return String(this.checked);\n  }\n\n  override formResetCallback() {\n    // The checked property does not reflect, so the original attribute set by\n    // the user is used to determine the default value.\n    this.checked = this.hasAttribute('checked');\n  }\n\n  override formStateRestoreCallback(state: string) {\n    this.checked = state === 'true';\n  }\n\n  [createValidator]() {\n    return new RadioValidator(() => {\n      if (!this.selectionController) {\n        // Validation runs on superclass construction, so selection controller\n        // might not actually be ready until this class constructs.\n        return [this];\n      }\n\n      return this.selectionController.controls as [Radio, ...Radio[]];\n    });\n  }\n\n  [getValidityAnchor]() {\n    return this.container;\n  }\n}\n"]}

package/ripple/internal/ripple.js

@@ -79,6 +79,13 @@ const EVENTS = [
  * scroll interaction.
  */
 const TOUCH_DELAY_MS = 150;
+/**
+ * Used to detect if HCM is active. Events do not process during HCM when the
+ * ripple is not displayed.
+ */
+const FORCED_COLORS = isServer
+    ? null
+    : window.matchMedia('(forced-colors: active)');
 /**
  * A ripple component.
  */
@@ -361,6 +368,10 @@ export class Ripple extends LitElement {
     }
     /** @private */
     async handleEvent(event) {
+        if (FORCED_COLORS?.matches) {
+            // Skip event logic since the ripple is `display: none`.
+            return;
+        }
         switch (event.type) {
             case 'click':
                 this.handleClick();

package/ripple/internal/ripple.js.map

@@ -1 +1 @@
-{"version":3,"file":"ripple.js","sourceRoot":"","sources":["ripple.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, isServer, LitElement, PropertyValues} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {\n  Attachable,\n  AttachableController,\n} from '../../internal/controller/attachable-controller.js';\nimport {EASING} from '../../internal/motion/animation.js';\n\nconst PRESS_GROW_MS = 450;\nconst MINIMUM_PRESS_MS = 225;\nconst INITIAL_ORIGIN_SCALE = 0.2;\nconst PADDING = 10;\nconst SOFT_EDGE_MINIMUM_SIZE = 75;\nconst SOFT_EDGE_CONTAINER_RATIO = 0.35;\nconst PRESS_PSEUDO = '::after';\nconst ANIMATION_FILL = 'forwards';\n\n/**\n * Interaction states for the ripple.\n *\n * On Touch:\n *  - `INACTIVE -> TOUCH_DELAY -> WAITING_FOR_CLICK -> INACTIVE`\n *  - `INACTIVE -> TOUCH_DELAY -> HOLDING -> WAITING_FOR_CLICK -> INACTIVE`\n *\n * On Mouse or Pen:\n *   - `INACTIVE -> WAITING_FOR_CLICK -> INACTIVE`\n */\nenum State {\n  /**\n   * Initial state of the control, no touch in progress.\n   *\n   * Transitions:\n   *   - on touch down: transition to `TOUCH_DELAY`.\n   *   - on mouse down: transition to `WAITING_FOR_CLICK`.\n   */\n  INACTIVE,\n  /**\n   * Touch down has been received, waiting to determine if it's a swipe or\n   * scroll.\n   *\n   * Transitions:\n   *   - on touch up: begin press; transition to `WAITING_FOR_CLICK`.\n   *   - on cancel: transition to `INACTIVE`.\n   *   - after `TOUCH_DELAY_MS`: begin press; transition to `HOLDING`.\n   */\n  TOUCH_DELAY,\n  /**\n   * A touch has been deemed to be a press\n   *\n   * Transitions:\n   *  - on up: transition to `WAITING_FOR_CLICK`.\n   */\n  HOLDING,\n  /**\n   * The user touch has finished, transition into rest state.\n   *\n   * Transitions:\n   *   - on click end press; transition to `INACTIVE`.\n   */\n  WAITING_FOR_CLICK,\n}\n\n/**\n * Events that the ripple listens to.\n */\nconst EVENTS = [\n  'click',\n  'contextmenu',\n  'pointercancel',\n  'pointerdown',\n  'pointerenter',\n  'pointerleave',\n  'pointerup',\n];\n\n/**\n * Delay reacting to touch so that we do not show the ripple for a swipe or\n * scroll interaction.\n */\nconst TOUCH_DELAY_MS = 150;\n\n/**\n * A ripple component.\n */\nexport class Ripple extends LitElement implements Attachable {\n  /**\n   * Disables the ripple.\n   */\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  get htmlFor() {\n    return this.attachableController.htmlFor;\n  }\n\n  set htmlFor(htmlFor: string | null) {\n    this.attachableController.htmlFor = htmlFor;\n  }\n\n  get control() {\n    return this.attachableController.control;\n  }\n  set control(control: HTMLElement | null) {\n    this.attachableController.control = control;\n  }\n\n  @state() private hovered = false;\n  @state() private pressed = false;\n\n  @query('.surface') private readonly mdRoot!: HTMLElement | null;\n  private rippleSize = '';\n  private rippleScale = '';\n  private initialSize = 0;\n  private growAnimation?: Animation;\n  private state = State.INACTIVE;\n  private rippleStartEvent?: PointerEvent;\n  private checkBoundsAfterContextMenu = false;\n  private readonly attachableController = new AttachableController(\n    this,\n    this.onControlChange.bind(this),\n  );\n\n  attach(control: HTMLElement) {\n    this.attachableController.attach(control);\n  }\n\n  detach() {\n    this.attachableController.detach();\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    // Needed for VoiceOver, which will create a \"group\" if the element is a\n    // sibling to other content.\n    this.setAttribute('aria-hidden', 'true');\n  }\n\n  protected override render() {\n    const classes = {\n      'hovered': this.hovered,\n      'pressed': this.pressed,\n    };\n\n    return html`<div class=\"surface ${classMap(classes)}\"></div>`;\n  }\n\n  protected override update(changedProps: PropertyValues<Ripple>) {\n    if (changedProps.has('disabled') && this.disabled) {\n      this.hovered = false;\n      this.pressed = false;\n    }\n    super.update(changedProps);\n  }\n\n  /**\n   * TODO(b/269799771): make private\n   * @private only public for slider\n   */\n  handlePointerenter(event: PointerEvent) {\n    if (!this.shouldReactToEvent(event)) {\n      return;\n    }\n\n    this.hovered = true;\n  }\n\n  /**\n   * TODO(b/269799771): make private\n   * @private only public for slider\n   */\n  handlePointerleave(event: PointerEvent) {\n    if (!this.shouldReactToEvent(event)) {\n      return;\n    }\n\n    this.hovered = false;\n\n    // release a held mouse or pen press that moves outside the element\n    if (this.state !== State.INACTIVE) {\n      this.endPressAnimation();\n    }\n  }\n\n  private handlePointerup(event: PointerEvent) {\n    if (!this.shouldReactToEvent(event)) {\n      return;\n    }\n\n    if (this.state === State.HOLDING) {\n      this.state = State.WAITING_FOR_CLICK;\n      return;\n    }\n\n    if (this.state === State.TOUCH_DELAY) {\n      this.state = State.WAITING_FOR_CLICK;\n      this.startPressAnimation(this.rippleStartEvent);\n      return;\n    }\n  }\n\n  private async handlePointerdown(event: PointerEvent) {\n    if (!this.shouldReactToEvent(event)) {\n      return;\n    }\n\n    this.rippleStartEvent = event;\n    if (!this.isTouch(event)) {\n      this.state = State.WAITING_FOR_CLICK;\n      this.startPressAnimation(event);\n      return;\n    }\n\n    // after a longpress contextmenu event, an extra `pointerdown` can be\n    // dispatched to the pressed element. Check that the down is within\n    // bounds of the element in this case.\n    if (this.checkBoundsAfterContextMenu && !this.inBounds(event)) {\n      return;\n    }\n\n    this.checkBoundsAfterContextMenu = false;\n\n    // Wait for a hold after touch delay\n    this.state = State.TOUCH_DELAY;\n    await new Promise((resolve) => {\n      setTimeout(resolve, TOUCH_DELAY_MS);\n    });\n\n    if (this.state !== State.TOUCH_DELAY) {\n      return;\n    }\n\n    this.state = State.HOLDING;\n    this.startPressAnimation(event);\n  }\n\n  private handleClick() {\n    // Click is a MouseEvent in Firefox and Safari, so we cannot use\n    // `shouldReactToEvent`\n    if (this.disabled) {\n      return;\n    }\n\n    if (this.state === State.WAITING_FOR_CLICK) {\n      this.endPressAnimation();\n      return;\n    }\n\n    if (this.state === State.INACTIVE) {\n      // keyboard synthesized click event\n      this.startPressAnimation();\n      this.endPressAnimation();\n    }\n  }\n\n  private handlePointercancel(event: PointerEvent) {\n    if (!this.shouldReactToEvent(event)) {\n      return;\n    }\n\n    this.endPressAnimation();\n  }\n\n  private handleContextmenu() {\n    if (this.disabled) {\n      return;\n    }\n\n    this.checkBoundsAfterContextMenu = true;\n    this.endPressAnimation();\n  }\n\n  private determineRippleSize() {\n    const {height, width} = this.getBoundingClientRect();\n    const maxDim = Math.max(height, width);\n    const softEdgeSize = Math.max(\n      SOFT_EDGE_CONTAINER_RATIO * maxDim,\n      SOFT_EDGE_MINIMUM_SIZE,\n    );\n\n    const initialSize = Math.floor(maxDim * INITIAL_ORIGIN_SCALE);\n    const hypotenuse = Math.sqrt(width ** 2 + height ** 2);\n    const maxRadius = hypotenuse + PADDING;\n\n    this.initialSize = initialSize;\n    this.rippleScale = `${(maxRadius + softEdgeSize) / initialSize}`;\n    this.rippleSize = `${initialSize}px`;\n  }\n\n  private getNormalizedPointerEventCoords(pointerEvent: PointerEvent): {\n    x: number;\n    y: number;\n  } {\n    const {scrollX, scrollY} = window;\n    const {left, top} = this.getBoundingClientRect();\n    const documentX = scrollX + left;\n    const documentY = scrollY + top;\n    const {pageX, pageY} = pointerEvent;\n    return {x: pageX - documentX, y: pageY - documentY};\n  }\n\n  private getTranslationCoordinates(positionEvent?: Event) {\n    const {height, width} = this.getBoundingClientRect();\n    // end in the center\n    const endPoint = {\n      x: (width - this.initialSize) / 2,\n      y: (height - this.initialSize) / 2,\n    };\n\n    let startPoint;\n    if (positionEvent instanceof PointerEvent) {\n      startPoint = this.getNormalizedPointerEventCoords(positionEvent);\n    } else {\n      startPoint = {\n        x: width / 2,\n        y: height / 2,\n      };\n    }\n\n    // center around start point\n    startPoint = {\n      x: startPoint.x - this.initialSize / 2,\n      y: startPoint.y - this.initialSize / 2,\n    };\n\n    return {startPoint, endPoint};\n  }\n\n  private startPressAnimation(positionEvent?: Event) {\n    if (!this.mdRoot) {\n      return;\n    }\n\n    this.pressed = true;\n    this.growAnimation?.cancel();\n    this.determineRippleSize();\n    const {startPoint, endPoint} =\n      this.getTranslationCoordinates(positionEvent);\n    const translateStart = `${startPoint.x}px, ${startPoint.y}px`;\n    const translateEnd = `${endPoint.x}px, ${endPoint.y}px`;\n\n    this.growAnimation = this.mdRoot.animate(\n      {\n        top: [0, 0],\n        left: [0, 0],\n        height: [this.rippleSize, this.rippleSize],\n        width: [this.rippleSize, this.rippleSize],\n        transform: [\n          `translate(${translateStart}) scale(1)`,\n          `translate(${translateEnd}) scale(${this.rippleScale})`,\n        ],\n      },\n      {\n        pseudoElement: PRESS_PSEUDO,\n        duration: PRESS_GROW_MS,\n        easing: EASING.STANDARD,\n        fill: ANIMATION_FILL,\n      },\n    );\n  }\n\n  private async endPressAnimation() {\n    this.state = State.INACTIVE;\n    const animation = this.growAnimation;\n    let pressAnimationPlayState = Infinity;\n    if (typeof animation?.currentTime === 'number') {\n      pressAnimationPlayState = animation.currentTime;\n    } else if (animation?.currentTime) {\n      pressAnimationPlayState = animation.currentTime.to('ms').value;\n    }\n\n    if (pressAnimationPlayState >= MINIMUM_PRESS_MS) {\n      this.pressed = false;\n      return;\n    }\n\n    await new Promise((resolve) => {\n      setTimeout(resolve, MINIMUM_PRESS_MS - pressAnimationPlayState);\n    });\n\n    if (this.growAnimation !== animation) {\n      // A new press animation was started. The old animation was canceled and\n      // should not finish the pressed state.\n      return;\n    }\n\n    this.pressed = false;\n  }\n\n  /**\n   * Returns `true` if\n   *  - the ripple element is enabled\n   *  - the pointer is primary for the input type\n   *  - the pointer is the pointer that started the interaction, or will start\n   * the interaction\n   *  - the pointer is a touch, or the pointer state has the primary button\n   * held, or the pointer is hovering\n   */\n  private shouldReactToEvent(event: PointerEvent) {\n    if (this.disabled || !event.isPrimary) {\n      return false;\n    }\n\n    if (\n      this.rippleStartEvent &&\n      this.rippleStartEvent.pointerId !== event.pointerId\n    ) {\n      return false;\n    }\n\n    if (event.type === 'pointerenter' || event.type === 'pointerleave') {\n      return !this.isTouch(event);\n    }\n\n    const isPrimaryButton = event.buttons === 1;\n    return this.isTouch(event) || isPrimaryButton;\n  }\n\n  /**\n   * Check if the event is within the bounds of the element.\n   *\n   * This is only needed for the \"stuck\" contextmenu longpress on Chrome.\n   */\n  private inBounds({x, y}: PointerEvent) {\n    const {top, left, bottom, right} = this.getBoundingClientRect();\n    return x >= left && x <= right && y >= top && y <= bottom;\n  }\n\n  private isTouch({pointerType}: PointerEvent) {\n    return pointerType === 'touch';\n  }\n\n  /** @private */\n  async handleEvent(event: Event) {\n    switch (event.type) {\n      case 'click':\n        this.handleClick();\n        break;\n      case 'contextmenu':\n        this.handleContextmenu();\n        break;\n      case 'pointercancel':\n        this.handlePointercancel(event as PointerEvent);\n        break;\n      case 'pointerdown':\n        await this.handlePointerdown(event as PointerEvent);\n        break;\n      case 'pointerenter':\n        this.handlePointerenter(event as PointerEvent);\n        break;\n      case 'pointerleave':\n        this.handlePointerleave(event as PointerEvent);\n        break;\n      case 'pointerup':\n        this.handlePointerup(event as PointerEvent);\n        break;\n      default:\n        break;\n    }\n  }\n\n  private onControlChange(prev: HTMLElement | null, next: HTMLElement | null) {\n    if (isServer) return;\n\n    for (const event of EVENTS) {\n      prev?.removeEventListener(event, this);\n      next?.addEventListener(event, this);\n    }\n  }\n}\n"]}
+{"version":3,"file":"ripple.js","sourceRoot":"","sources":["ripple.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, isServer, LitElement, PropertyValues} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {\n  Attachable,\n  AttachableController,\n} from '../../internal/controller/attachable-controller.js';\nimport {EASING} from '../../internal/motion/animation.js';\n\nconst PRESS_GROW_MS = 450;\nconst MINIMUM_PRESS_MS = 225;\nconst INITIAL_ORIGIN_SCALE = 0.2;\nconst PADDING = 10;\nconst SOFT_EDGE_MINIMUM_SIZE = 75;\nconst SOFT_EDGE_CONTAINER_RATIO = 0.35;\nconst PRESS_PSEUDO = '::after';\nconst ANIMATION_FILL = 'forwards';\n\n/**\n * Interaction states for the ripple.\n *\n * On Touch:\n *  - `INACTIVE -> TOUCH_DELAY -> WAITING_FOR_CLICK -> INACTIVE`\n *  - `INACTIVE -> TOUCH_DELAY -> HOLDING -> WAITING_FOR_CLICK -> INACTIVE`\n *\n * On Mouse or Pen:\n *   - `INACTIVE -> WAITING_FOR_CLICK -> INACTIVE`\n */\nenum State {\n  /**\n   * Initial state of the control, no touch in progress.\n   *\n   * Transitions:\n   *   - on touch down: transition to `TOUCH_DELAY`.\n   *   - on mouse down: transition to `WAITING_FOR_CLICK`.\n   */\n  INACTIVE,\n  /**\n   * Touch down has been received, waiting to determine if it's a swipe or\n   * scroll.\n   *\n   * Transitions:\n   *   - on touch up: begin press; transition to `WAITING_FOR_CLICK`.\n   *   - on cancel: transition to `INACTIVE`.\n   *   - after `TOUCH_DELAY_MS`: begin press; transition to `HOLDING`.\n   */\n  TOUCH_DELAY,\n  /**\n   * A touch has been deemed to be a press\n   *\n   * Transitions:\n   *  - on up: transition to `WAITING_FOR_CLICK`.\n   */\n  HOLDING,\n  /**\n   * The user touch has finished, transition into rest state.\n   *\n   * Transitions:\n   *   - on click end press; transition to `INACTIVE`.\n   */\n  WAITING_FOR_CLICK,\n}\n\n/**\n * Events that the ripple listens to.\n */\nconst EVENTS = [\n  'click',\n  'contextmenu',\n  'pointercancel',\n  'pointerdown',\n  'pointerenter',\n  'pointerleave',\n  'pointerup',\n];\n\n/**\n * Delay reacting to touch so that we do not show the ripple for a swipe or\n * scroll interaction.\n */\nconst TOUCH_DELAY_MS = 150;\n\n/**\n * Used to detect if HCM is active. Events do not process during HCM when the\n * ripple is not displayed.\n */\nconst FORCED_COLORS = isServer\n  ? null\n  : window.matchMedia('(forced-colors: active)');\n\n/**\n * A ripple component.\n */\nexport class Ripple extends LitElement implements Attachable {\n  /**\n   * Disables the ripple.\n   */\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  get htmlFor() {\n    return this.attachableController.htmlFor;\n  }\n\n  set htmlFor(htmlFor: string | null) {\n    this.attachableController.htmlFor = htmlFor;\n  }\n\n  get control() {\n    return this.attachableController.control;\n  }\n  set control(control: HTMLElement | null) {\n    this.attachableController.control = control;\n  }\n\n  @state() private hovered = false;\n  @state() private pressed = false;\n\n  @query('.surface') private readonly mdRoot!: HTMLElement | null;\n  private rippleSize = '';\n  private rippleScale = '';\n  private initialSize = 0;\n  private growAnimation?: Animation;\n  private state = State.INACTIVE;\n  private rippleStartEvent?: PointerEvent;\n  private checkBoundsAfterContextMenu = false;\n  private readonly attachableController = new AttachableController(\n    this,\n    this.onControlChange.bind(this),\n  );\n\n  attach(control: HTMLElement) {\n    this.attachableController.attach(control);\n  }\n\n  detach() {\n    this.attachableController.detach();\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    // Needed for VoiceOver, which will create a \"group\" if the element is a\n    // sibling to other content.\n    this.setAttribute('aria-hidden', 'true');\n  }\n\n  protected override render() {\n    const classes = {\n      'hovered': this.hovered,\n      'pressed': this.pressed,\n    };\n\n    return html`<div class=\"surface ${classMap(classes)}\"></div>`;\n  }\n\n  protected override update(changedProps: PropertyValues<Ripple>) {\n    if (changedProps.has('disabled') && this.disabled) {\n      this.hovered = false;\n      this.pressed = false;\n    }\n    super.update(changedProps);\n  }\n\n  /**\n   * TODO(b/269799771): make private\n   * @private only public for slider\n   */\n  handlePointerenter(event: PointerEvent) {\n    if (!this.shouldReactToEvent(event)) {\n      return;\n    }\n\n    this.hovered = true;\n  }\n\n  /**\n   * TODO(b/269799771): make private\n   * @private only public for slider\n   */\n  handlePointerleave(event: PointerEvent) {\n    if (!this.shouldReactToEvent(event)) {\n      return;\n    }\n\n    this.hovered = false;\n\n    // release a held mouse or pen press that moves outside the element\n    if (this.state !== State.INACTIVE) {\n      this.endPressAnimation();\n    }\n  }\n\n  private handlePointerup(event: PointerEvent) {\n    if (!this.shouldReactToEvent(event)) {\n      return;\n    }\n\n    if (this.state === State.HOLDING) {\n      this.state = State.WAITING_FOR_CLICK;\n      return;\n    }\n\n    if (this.state === State.TOUCH_DELAY) {\n      this.state = State.WAITING_FOR_CLICK;\n      this.startPressAnimation(this.rippleStartEvent);\n      return;\n    }\n  }\n\n  private async handlePointerdown(event: PointerEvent) {\n    if (!this.shouldReactToEvent(event)) {\n      return;\n    }\n\n    this.rippleStartEvent = event;\n    if (!this.isTouch(event)) {\n      this.state = State.WAITING_FOR_CLICK;\n      this.startPressAnimation(event);\n      return;\n    }\n\n    // after a longpress contextmenu event, an extra `pointerdown` can be\n    // dispatched to the pressed element. Check that the down is within\n    // bounds of the element in this case.\n    if (this.checkBoundsAfterContextMenu && !this.inBounds(event)) {\n      return;\n    }\n\n    this.checkBoundsAfterContextMenu = false;\n\n    // Wait for a hold after touch delay\n    this.state = State.TOUCH_DELAY;\n    await new Promise((resolve) => {\n      setTimeout(resolve, TOUCH_DELAY_MS);\n    });\n\n    if (this.state !== State.TOUCH_DELAY) {\n      return;\n    }\n\n    this.state = State.HOLDING;\n    this.startPressAnimation(event);\n  }\n\n  private handleClick() {\n    // Click is a MouseEvent in Firefox and Safari, so we cannot use\n    // `shouldReactToEvent`\n    if (this.disabled) {\n      return;\n    }\n\n    if (this.state === State.WAITING_FOR_CLICK) {\n      this.endPressAnimation();\n      return;\n    }\n\n    if (this.state === State.INACTIVE) {\n      // keyboard synthesized click event\n      this.startPressAnimation();\n      this.endPressAnimation();\n    }\n  }\n\n  private handlePointercancel(event: PointerEvent) {\n    if (!this.shouldReactToEvent(event)) {\n      return;\n    }\n\n    this.endPressAnimation();\n  }\n\n  private handleContextmenu() {\n    if (this.disabled) {\n      return;\n    }\n\n    this.checkBoundsAfterContextMenu = true;\n    this.endPressAnimation();\n  }\n\n  private determineRippleSize() {\n    const {height, width} = this.getBoundingClientRect();\n    const maxDim = Math.max(height, width);\n    const softEdgeSize = Math.max(\n      SOFT_EDGE_CONTAINER_RATIO * maxDim,\n      SOFT_EDGE_MINIMUM_SIZE,\n    );\n\n    const initialSize = Math.floor(maxDim * INITIAL_ORIGIN_SCALE);\n    const hypotenuse = Math.sqrt(width ** 2 + height ** 2);\n    const maxRadius = hypotenuse + PADDING;\n\n    this.initialSize = initialSize;\n    this.rippleScale = `${(maxRadius + softEdgeSize) / initialSize}`;\n    this.rippleSize = `${initialSize}px`;\n  }\n\n  private getNormalizedPointerEventCoords(pointerEvent: PointerEvent): {\n    x: number;\n    y: number;\n  } {\n    const {scrollX, scrollY} = window;\n    const {left, top} = this.getBoundingClientRect();\n    const documentX = scrollX + left;\n    const documentY = scrollY + top;\n    const {pageX, pageY} = pointerEvent;\n    return {x: pageX - documentX, y: pageY - documentY};\n  }\n\n  private getTranslationCoordinates(positionEvent?: Event) {\n    const {height, width} = this.getBoundingClientRect();\n    // end in the center\n    const endPoint = {\n      x: (width - this.initialSize) / 2,\n      y: (height - this.initialSize) / 2,\n    };\n\n    let startPoint;\n    if (positionEvent instanceof PointerEvent) {\n      startPoint = this.getNormalizedPointerEventCoords(positionEvent);\n    } else {\n      startPoint = {\n        x: width / 2,\n        y: height / 2,\n      };\n    }\n\n    // center around start point\n    startPoint = {\n      x: startPoint.x - this.initialSize / 2,\n      y: startPoint.y - this.initialSize / 2,\n    };\n\n    return {startPoint, endPoint};\n  }\n\n  private startPressAnimation(positionEvent?: Event) {\n    if (!this.mdRoot) {\n      return;\n    }\n\n    this.pressed = true;\n    this.growAnimation?.cancel();\n    this.determineRippleSize();\n    const {startPoint, endPoint} =\n      this.getTranslationCoordinates(positionEvent);\n    const translateStart = `${startPoint.x}px, ${startPoint.y}px`;\n    const translateEnd = `${endPoint.x}px, ${endPoint.y}px`;\n\n    this.growAnimation = this.mdRoot.animate(\n      {\n        top: [0, 0],\n        left: [0, 0],\n        height: [this.rippleSize, this.rippleSize],\n        width: [this.rippleSize, this.rippleSize],\n        transform: [\n          `translate(${translateStart}) scale(1)`,\n          `translate(${translateEnd}) scale(${this.rippleScale})`,\n        ],\n      },\n      {\n        pseudoElement: PRESS_PSEUDO,\n        duration: PRESS_GROW_MS,\n        easing: EASING.STANDARD,\n        fill: ANIMATION_FILL,\n      },\n    );\n  }\n\n  private async endPressAnimation() {\n    this.state = State.INACTIVE;\n    const animation = this.growAnimation;\n    let pressAnimationPlayState = Infinity;\n    if (typeof animation?.currentTime === 'number') {\n      pressAnimationPlayState = animation.currentTime;\n    } else if (animation?.currentTime) {\n      pressAnimationPlayState = animation.currentTime.to('ms').value;\n    }\n\n    if (pressAnimationPlayState >= MINIMUM_PRESS_MS) {\n      this.pressed = false;\n      return;\n    }\n\n    await new Promise((resolve) => {\n      setTimeout(resolve, MINIMUM_PRESS_MS - pressAnimationPlayState);\n    });\n\n    if (this.growAnimation !== animation) {\n      // A new press animation was started. The old animation was canceled and\n      // should not finish the pressed state.\n      return;\n    }\n\n    this.pressed = false;\n  }\n\n  /**\n   * Returns `true` if\n   *  - the ripple element is enabled\n   *  - the pointer is primary for the input type\n   *  - the pointer is the pointer that started the interaction, or will start\n   * the interaction\n   *  - the pointer is a touch, or the pointer state has the primary button\n   * held, or the pointer is hovering\n   */\n  private shouldReactToEvent(event: PointerEvent) {\n    if (this.disabled || !event.isPrimary) {\n      return false;\n    }\n\n    if (\n      this.rippleStartEvent &&\n      this.rippleStartEvent.pointerId !== event.pointerId\n    ) {\n      return false;\n    }\n\n    if (event.type === 'pointerenter' || event.type === 'pointerleave') {\n      return !this.isTouch(event);\n    }\n\n    const isPrimaryButton = event.buttons === 1;\n    return this.isTouch(event) || isPrimaryButton;\n  }\n\n  /**\n   * Check if the event is within the bounds of the element.\n   *\n   * This is only needed for the \"stuck\" contextmenu longpress on Chrome.\n   */\n  private inBounds({x, y}: PointerEvent) {\n    const {top, left, bottom, right} = this.getBoundingClientRect();\n    return x >= left && x <= right && y >= top && y <= bottom;\n  }\n\n  private isTouch({pointerType}: PointerEvent) {\n    return pointerType === 'touch';\n  }\n\n  /** @private */\n  async handleEvent(event: Event) {\n    if (FORCED_COLORS?.matches) {\n      // Skip event logic since the ripple is `display: none`.\n      return;\n    }\n\n    switch (event.type) {\n      case 'click':\n        this.handleClick();\n        break;\n      case 'contextmenu':\n        this.handleContextmenu();\n        break;\n      case 'pointercancel':\n        this.handlePointercancel(event as PointerEvent);\n        break;\n      case 'pointerdown':\n        await this.handlePointerdown(event as PointerEvent);\n        break;\n      case 'pointerenter':\n        this.handlePointerenter(event as PointerEvent);\n        break;\n      case 'pointerleave':\n        this.handlePointerleave(event as PointerEvent);\n        break;\n      case 'pointerup':\n        this.handlePointerup(event as PointerEvent);\n        break;\n      default:\n        break;\n    }\n  }\n\n  private onControlChange(prev: HTMLElement | null, next: HTMLElement | null) {\n    if (isServer) return;\n\n    for (const event of EVENTS) {\n      prev?.removeEventListener(event, this);\n      next?.addEventListener(event, this);\n    }\n  }\n}\n"]}

package/select/internal/_shared.scss

@@ -70,10 +70,19 @@
   }
 
   md-menu {
-    min-width: var(--__menu-min-width, inherit);
+    // Not inherited because it is applied every time the menu opens
+    min-width: var(--__menu-min-width);
+    // Inherits from `.menu-wrapper` because it is applied only when
+    // `clampMenuWidth` is true
     max-width: var(--__menu-max-width, inherit);
   }
 
+  .menu-wrapper {
+    width: 0px;
+    height: 0px;
+    max-width: inherit;
+  }
+
   md-menu ::slotted(:not[disabled]) {
     cursor: pointer;
   }

package/select/internal/select.d.ts

@@ -11,7 +11,7 @@ import { createValidator, getValidityAnchor } from '../../labs/behaviors/constra
 import { getFormValue } from '../../labs/behaviors/form-associated.js';
 import { onReportValidity } from '../../labs/behaviors/on-report-validity.js';
 import { SelectValidator } from '../../labs/behaviors/validators/select-validator.js';
-import { SelectOption } from './selectoption/selectOptionController.js';
+import { SelectOption } from './selectoption/select-option.js';
 declare const VALUE: unique symbol;
 declare const selectBaseClass: import("../../labs/behaviors/mixin.js").MixinReturn<import("../../labs/behaviors/mixin.js").MixinReturn<import("../../labs/behaviors/mixin.js").MixinReturn<(abstract new (...args: any[]) => import("../../labs/behaviors/element-internals.js").WithElementInternals) & typeof LitElement & import("../../labs/behaviors/form-associated.js").FormAssociatedConstructor, import("../../labs/behaviors/form-associated.js").FormAssociated>, import("../../labs/behaviors/constraint-validation.js").ConstraintValidation>, import("../../labs/behaviors/on-report-validity.js").OnReportValidity>;
 /**
@@ -93,6 +93,11 @@ export declare abstract class Select extends selectBaseClass {
      * Text to display in the field. Only set for SSR.
      */
     displayText: string;
+    /**
+     * Whether the menu should be aligned to the start or the end of the select's
+     * textbox.
+     */
+    menuAlign: 'start' | 'end';
     /**
      * The value of the currently selected option.
      *
@@ -145,6 +150,7 @@ export declare abstract class Select extends selectBaseClass {
     private get hasError();
     private focused;
     private open;
+    private defaultFocus;
     private readonly field;
     private readonly menu;
     private readonly labelEl;

package/select/internal/select.js

@@ -12,14 +12,14 @@ import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { html as staticHtml } from 'lit/static-html.js';
 import { requestUpdateOnAriaChange } from '../../internal/aria/delegate.js';
-import { redispatchEvent } from '../../internal/controller/events.js';
+import { redispatchEvent } from '../../internal/events/redispatch-event.js';
 import { createValidator, getValidityAnchor, mixinConstraintValidation, } from '../../labs/behaviors/constraint-validation.js';
 import { mixinElementInternals } from '../../labs/behaviors/element-internals.js';
 import { getFormValue, mixinFormAssociated, } from '../../labs/behaviors/form-associated.js';
 import { mixinOnReportValidity, onReportValidity, } from '../../labs/behaviors/on-report-validity.js';
 import { SelectValidator } from '../../labs/behaviors/validators/select-validator.js';
 import { getActiveItem } from '../../list/internal/list-navigation-helpers.js';
-import { isElementInSubtree, isSelectableKey, } from '../../menu/internal/controllers/shared.js';
+import { FocusState, isElementInSubtree, isSelectableKey, } from '../../menu/internal/controllers/shared.js';
 import { TYPEAHEAD_RECORD } from '../../menu/internal/controllers/typeaheadController.js';
 import { DEFAULT_TYPEAHEAD_BUFFER_TIME } from '../../menu/internal/menu.js';
 import { getSelectedItems } from './shared.js';
@@ -147,6 +147,11 @@ export class Select extends selectBaseClass {
          * Text to display in the field. Only set for SSR.
          */
         this.displayText = '';
+        /**
+         * Whether the menu should be aligned to the start or the end of the select's
+         * textbox.
+         */
+        this.menuAlign = 'start';
         this[_a] = '';
         /**
          * Used for initializing select when the user sets the `value` directly.
@@ -174,6 +179,7 @@ export class Select extends selectBaseClass {
         this.nativeErrorText = '';
         this.focused = false;
         this.open = false;
+        this.defaultFocus = FocusState.NONE;
         // Have to keep track of previous open because it's state and private and thus
         // cannot be tracked in PropertyValues<this> map.
         this.prevOpen = this.open;
@@ -354,35 +360,39 @@ export class Select extends selectBaseClass {
     }
     renderMenu() {
         const ariaLabel = this.label || this.ariaLabel;
-        return html ` <md-menu
-      id="listbox"
-      default-focus="none"
-      role="listbox"
-      tabindex="-1"
-      aria-label=${ariaLabel || nothing}
-      stay-open-on-focusout
-      part="menu"
-      exportparts="focus-ring: menu-focus-ring"
-      anchor="field"
-      style=${styleMap({
+        return html `<div class="menu-wrapper">
+      <md-menu
+        id="listbox"
+        .defaultFocus=${this.defaultFocus}
+        role="listbox"
+        tabindex="-1"
+        aria-label=${ariaLabel || nothing}
+        stay-open-on-focusout
+        part="menu"
+        exportparts="focus-ring: menu-focus-ring"
+        anchor="field"
+        style=${styleMap({
             '--__menu-min-width': `${this.selectWidth}px`,
             '--__menu-max-width': this.clampMenuWidth
                 ? `${this.selectWidth}px`
                 : undefined,
         })}
-      .open=${this.open}
-      .quick=${this.quick}
-      .positioning=${this.menuPositioning}
-      .typeaheadDelay=${this.typeaheadDelay}
-      @opening=${this.handleOpening}
-      @opened=${this.redispatchEvent}
-      @closing=${this.redispatchEvent}
-      @closed=${this.handleClosed}
-      @close-menu=${this.handleCloseMenu}
-      @request-selection=${this.handleRequestSelection}
-      @request-deselection=${this.handleRequestDeselection}>
-      ${this.renderMenuContent()}
-    </md-menu>`;
+        .open=${this.open}
+        .quick=${this.quick}
+        .positioning=${this.menuPositioning}
+        .typeaheadDelay=${this.typeaheadDelay}
+        .anchorCorner=${this.menuAlign === 'start' ? 'end-start' : 'end-end'}
+        .menuCorner=${this.menuAlign === 'start' ? 'start-start' : 'start-end'}
+        @opening=${this.handleOpening}
+        @opened=${this.redispatchEvent}
+        @closing=${this.redispatchEvent}
+        @closed=${this.handleClosed}
+        @close-menu=${this.handleCloseMenu}
+        @request-selection=${this.handleRequestSelection}
+        @request-deselection=${this.handleRequestDeselection}>
+        ${this.renderMenuContent()}
+      </md-menu>
+    </div>`;
     }
     renderMenuContent() {
         return html `<slot></slot>`;
@@ -398,12 +408,33 @@ export class Select extends selectBaseClass {
         const typeaheadController = this.menu.typeaheadController;
         const isOpenKey = event.code === 'Space' ||
             event.code === 'ArrowDown' ||
+            event.code === 'ArrowUp' ||
+            event.code === 'End' ||
+            event.code === 'Home' ||
             event.code === 'Enter';
         // Do not open if currently typing ahead because the user may be typing the
         // spacebar to match a word with a space
         if (!typeaheadController.isTypingAhead && isOpenKey) {
             event.preventDefault();
             this.open = true;
+            // https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/#kbd_label
+            switch (event.code) {
+                case 'Space':
+                case 'ArrowDown':
+                case 'Enter':
+                    // We will handle focusing last selected item in this.handleOpening()
+                    this.defaultFocus = FocusState.NONE;
+                    break;
+                case 'End':
+                    this.defaultFocus = FocusState.LAST_ITEM;
+                    break;
+                case 'ArrowUp':
+                case 'Home':
+                    this.defaultFocus = FocusState.FIRST_ITEM;
+                    break;
+                default:
+                    break;
+            }
             return;
         }
         const isPrintableKey = event.key.length === 1;
@@ -496,6 +527,11 @@ export class Select extends selectBaseClass {
     async handleOpening(e) {
         this.labelEl?.removeAttribute?.('aria-live');
         this.redispatchEvent(e);
+        // FocusState.NONE means we want to handle focus ourselves and focus the
+        // last selected item.
+        if (this.defaultFocus !== FocusState.NONE) {
+            return;
+        }
         const items = this.menu.items;
         const activeItem = getActiveItem(items)?.item;
         let [selectedItem] = this.lastSelectedOptionRecords[0] ?? [null];
@@ -672,6 +708,9 @@ __decorate([
 __decorate([
     property({ attribute: 'display-text' })
 ], Select.prototype, "displayText", void 0);
+__decorate([
+    property({ attribute: 'menu-align' })
+], Select.prototype, "menuAlign", void 0);
 __decorate([
     property()
 ], Select.prototype, "value", null);
@@ -690,6 +729,9 @@ __decorate([
 __decorate([
     state()
 ], Select.prototype, "open", void 0);
+__decorate([
+    state()
+], Select.prototype, "defaultFocus", void 0);
 __decorate([
     query('.field')
 ], Select.prototype, "field", void 0);