@material/web 0.1.0-alpha.0 → 0.1.0-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@material/web",
-  "version": "0.1.0-alpha.0",
+  "version": "0.1.0-alpha.1",
   "publishConfig": {
     "access": "public"
   },
@@ -15,24 +15,24 @@
   },
   "homepage": "https://github.com/material-components/material-web#readme",
   "scripts": {
-    "clean": "npm run clean:sass && npm run clean:ts",
-    "clean:sass": "find . -name '*.css*' -type f -delete",
-    "clean:ts": "tsc --build --clean",
-    "build": "npm run build:sass && npm run build:ts",
-    "prebuild:sass": "[ -d node_modules/@material/web ] || (mkdir -p node_modules/@material && ln -s ../../ node_modules/@material/web)",
-    "build:sass": "sass --style=compressed --load-path=node_modules --load-path=node_modules/sass-true/sass $(ls -d */ | grep -v node_modules)",
-    "prebuild:ts": "find . -name '*.css' -type f | xargs node css-to-ts.js",
-    "build:ts": "tsc"
+    "build": "wireit",
+    "build:ts": "wireit",
+    "build:css-to-ts": "wireit",
+    "build:sass": "wireit",
+    "test": "wireit"
   },
+  "type": "module",
   "files": [
     "**/*.js",
     "**/*.js.map",
     "**/*.d.ts",
     "**/*.scss",
     "!css-to-ts.js",
+    "!web-test-runner.config.js",
     "!**/test/**",
     "!**/testing/**",
-    "!**/*_test.*"
+    "!**/*_test.*",
+    "!.wireit/**"
   ],
   "dependencies": {
     "lit": "^2.3.0",
@@ -40,9 +40,73 @@
   },
   "devDependencies": {
     "@types/jasmine": "^4.0.3",
-    "jasmine": "^4.2.0",
+    "@web/test-runner": "^0.15.0",
+    "@web/test-runner-playwright": "^0.9.0",
+    "jasmine": "^4.5.0",
     "sass": "^1.52.3",
     "sass-true": "^6.1.0",
-    "typescript": "~4.7.3"
+    "typescript": "~4.7.4",
+    "web-test-runner-jasmine": "^0.0.2",
+    "wireit": "^0.9.0"
+  },
+  "wireit": {
+    "build": {
+      "dependencies": [
+        "build:ts"
+      ]
+    },
+    "build:ts": {
+      "command": "tsc --pretty",
+      "files": [
+        "tsconfig.json",
+        "**/*.ts",
+        "!**/*.d.ts",
+        "!**/*.css.ts"
+      ],
+      "output": [
+        ".tsbuildinfo",
+        "**/*.js",
+        "**/*.js.map",
+        "**/*.d.ts",
+        "!*.js",
+        "!types/"
+      ],
+      "clean": "if-file-deleted",
+      "dependencies": [
+        "build:css-to-ts"
+      ]
+    },
+    "build:css-to-ts": {
+      "command": "find . \\( -path ./.wireit -o -path ./node_modules \\) -prune -o -name '*.css' -print | xargs node css-to-ts.js",
+      "files": [
+        "css-to-ts.js"
+      ],
+      "output": [
+        "**/*.css.ts"
+      ],
+      "dependencies": [
+        "build:sass"
+      ]
+    },
+    "build:sass": {
+      "command": "sass --style=compressed --load-path=node_modules --load-path=node_modules/sass-true/sass $(ls -d */ | grep -v node_modules)",
+      "files": [
+        "**/*.scss"
+      ],
+      "output": [
+        "**/*.css",
+        "**/*.css.map"
+      ]
+    },
+    "test": {
+      "command": "wtr",
+      "dependencies": [
+        "build:ts"
+      ],
+      "files": [
+        "web-test-runner.config.js"
+      ],
+      "output": []
+    }
   }
 }

package/radio/harness.d.ts

@@ -3,7 +3,7 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { Harness } from '@material/web/testing/harness.js';
+import { Harness } from '../testing/harness.js';
 import { Radio } from './lib/radio.js';
 /**
  * Test harness for radio.

package/radio/harness.js

@@ -3,7 +3,7 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { Harness } from '@material/web/testing/harness.js';
+import { Harness } from '../testing/harness.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,kCAAkC,CAAC;AAIzD;;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 '@material/web/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 './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"]}

package/radio/lib/_radio-theme.scss

@@ -9,10 +9,9 @@
 @use 'sass:map';
 @use 'sass:selector';
 
-@use '@material/web/ripple/ripple-theme';
-@use '@material/web/compat/theme/shadow-dom';
-@use '@material/web/sass/theme';
-@use '@material/web/tokens';
+@use '../../ripple/ripple-theme';
+@use '../../sass/theme';
+@use '../../tokens';
 
 $light-theme: tokens.md-comp-radio-button-values();
 $custom-property-prefix: 'radio';
@@ -322,8 +321,10 @@ $_theme-extension-keys: (
 }
 
 @mixin _checked-selector() {
-  @include shadow-dom.host-aware(selector.append(&, '[checked]')) {
-    @content;
+  @at-root {
+    :host([checked]) {
+      @content;
+    }
   }
 }
 

package/radio/lib/_radio.scss

@@ -6,8 +6,8 @@
 // stylelint-disable selector-class-pattern --
 // Selector '.md3-*' should only be used in this project.
 
-@use '@material/web/focus/lib/focus-ring-theme';
-@use '@material/web/motion/animation';
+@use '../../focus/focus-ring';
+@use '../../motion/animation';
 
 @use './radio-theme';
 
@@ -106,10 +106,10 @@
     }
   }
 
-  @include focus-ring-theme.theme(
+  @include focus-ring.theme(
     (
-      container-outer-padding-vertical: -2px,
-      container-outer-padding-horizontal: -2px,
+      offset-vertical: -2px,
+      offset-horizontal: -2px,
     )
   );
 

package/radio/lib/radio-styles.css.js

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host{--md-ripple-hover-state-layer-color:var(--md-radio-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--md-ripple-focus-state-layer-color:var(--md-radio-unselected-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--md-ripple-pressed-state-layer-color:var(--md-radio-unselected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-hover-state-layer-opacity:var(--md-radio-unselected-hover-state-layer-opacity, 0.08);--md-ripple-focus-state-layer-opacity:var(--md-radio-unselected-focus-state-layer-opacity, 0.12);--md-ripple-pressed-state-layer-opacity:var(--md-radio-unselected-pressed-state-layer-opacity, 0.12);--md-focus-ring-container-outer-padding-vertical:-2px;--md-focus-ring-container-outer-padding-horizontal:-2px;display:inline-flex}:host .md3-radio{block-size:var(--md-radio-state-layer-size, 40px);inline-size:var(--md-radio-state-layer-size, 40px)}:host .md3-radio .md3-radio__native-control:disabled:checked+.md3-radio__background .md3-radio__outer-circle{border-color:var(--md-radio-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1c1b1f))}:host .md3-radio .md3-radio__native-control:disabled+.md3-radio__background .md3-radio__inner-circle{background-color:var(--md-radio-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1c1b1f))}:host .md3-radio .md3-radio__native-control:disabled:checked+.md3-radio__background .md3-radio__outer-circle{opacity:var(--md-radio-disabled-selected-icon-opacity, 0.38)}:host .md3-radio .md3-radio__native-control:disabled+.md3-radio__background .md3-radio__inner-circle{opacity:var(--md-radio-disabled-selected-icon-opacity, 0.38)}:host .md3-radio .md3-radio__native-control:disabled:not(:checked)+.md3-radio__background .md3-radio__outer-circle{border-color:var(--md-radio-disabled-unselected-icon-color, var(--md-sys-color-on-surface, #1c1b1f))}:host .md3-radio .md3-radio__native-control:disabled:not(:checked)+.md3-radio__background .md3-radio__outer-circle{opacity:var(--md-radio-disabled-unselected-icon-opacity, 0.38)}:host .md3-radio .md3-radio__background{height:var(--md-radio-icon-size, 20px);width:var(--md-radio-icon-size, 20px)}:host .md3-radio .md3-radio__native-control:enabled:checked:focus+.md3-radio__background .md3-radio__outer-circle{border-color:var(--md-radio-selected-focus-icon-color, var(--md-sys-color-primary, #6750a4))}:host .md3-radio .md3-radio__native-control:enabled:checked:focus+.md3-radio__background .md3-radio__inner-circle{background-color:var(--md-radio-selected-focus-icon-color, var(--md-sys-color-primary, #6750a4))}:host .md3-radio .md3-radio__native-control:enabled:checked:hover+.md3-radio__background .md3-radio__outer-circle{border-color:var(--md-radio-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4))}:host .md3-radio .md3-radio__native-control:enabled:checked:hover+.md3-radio__background .md3-radio__inner-circle{background-color:var(--md-radio-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4))}:host .md3-radio .md3-radio__native-control:enabled:checked+.md3-radio__background .md3-radio__outer-circle{border-color:var(--md-radio-selected-icon-color, var(--md-sys-color-primary, #6750a4))}:host .md3-radio .md3-radio__native-control:enabled:checked+.md3-radio__background .md3-radio__inner-circle{background-color:var(--md-radio-selected-icon-color, var(--md-sys-color-primary, #6750a4))}:host .md3-radio .md3-radio__native-control:enabled:checked:active+.md3-radio__background .md3-radio__outer-circle{border-color:var(--md-radio-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4))}:host .md3-radio .md3-radio__native-control:enabled:checked:active+.md3-radio__background .md3-radio__inner-circle{background-color:var(--md-radio-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4))}:host .md3-radio .md3-radio__ripple{block-size:var(--md-radio-state-layer-size, 40px);inline-size:var(--md-radio-state-layer-size, 40px)}:host .md3-radio .md3-radio__native-control:enabled:not(:checked):focus+.md3-radio__background .md3-radio__outer-circle{border-color:var(--md-radio-unselected-focus-icon-color, var(--md-sys-color-on-surface, #1c1b1f))}:host .md3-radio .md3-radio__native-control:enabled:not(:checked):hover+.md3-radio__background .md3-radio__outer-circle{border-color:var(--md-radio-unselected-hover-icon-color, var(--md-sys-color-on-surface, #1c1b1f))}:host .md3-radio .md3-radio__native-control:enabled:not(:checked)+.md3-radio__background .md3-radio__outer-circle{border-color:var(--md-radio-unselected-icon-color, var(--md-sys-color-on-surface, #1c1b1f))}:host .md3-radio .md3-radio__native-control:enabled:not(:checked):active+.md3-radio__background .md3-radio__outer-circle{border-color:var(--md-radio-unselected-pressed-icon-color, var(--md-sys-color-on-surface, #1c1b1f))}:host .md3-radio--touch{block-size:var(--md-radio-_touch-target-size, 48px);inline-size:var(--md-radio-_touch-target-size, 48px)}:host([checked]){--md-ripple-hover-state-layer-color:var(--md-radio-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-focus-state-layer-color:var(--md-radio-selected-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-pressed-state-layer-color:var(--md-radio-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--md-ripple-hover-state-layer-opacity:var(--md-radio-selected-hover-state-layer-opacity, 0.08);--md-ripple-focus-state-layer-opacity:var(--md-radio-selected-focus-state-layer-opacity, 0.12);--md-ripple-pressed-state-layer-opacity:var(--md-radio-selected-pressed-state-layer-opacity, 0.12)}:host .md3-radio{display:inline-flex;position:relative;cursor:pointer;will-change:opacity,transform,border-color,color;justify-content:center;align-items:center}:host .md3-radio__background{display:inline-flex;position:relative;box-sizing:border-box;align-items:center;justify-content:center}:host .md3-radio__outer-circle{position:absolute;inset-block-start:0;inset-inline-start:0;box-sizing:border-box;block-size:100%;inline-size:100%;border-width:2px;border-style:solid;border-radius:50%;transition:border-color 120ms cubic-bezier(0.4, 0, 0.6, 1)}:host .md3-radio__inner-circle{position:absolute;box-sizing:border-box;block-size:50%;inline-size:50%;transform:scale(0);border-radius:50%;transition:transform 120ms cubic-bezier(0.4, 0, 0.6, 1),border-color 120ms cubic-bezier(0.4, 0, 0.6, 1)}:host .md3-radio__ripple{position:absolute;display:inline-flex;z-index:-1}:host .md3-radio__native-control{position:absolute;margin:0;padding:0;opacity:0;cursor:inherit;z-index:1;block-size:100%;inline-size:100%;inset:0}:host .md3-radio__native-control:checked+.md3-radio__background,:host .md3-radio__native-control:disabled+.md3-radio__background{transition:opacity 120ms cubic-bezier(0, 0, 0.2, 1),transform 120ms cubic-bezier(0, 0, 0.2, 1)}:host .md3-radio__native-control:checked+.md3-radio__background .md3-radio__outer-circle,:host .md3-radio__native-control:disabled+.md3-radio__background .md3-radio__outer-circle{transition:border-color 120ms cubic-bezier(0, 0, 0.2, 1)}:host .md3-radio__native-control:checked+.md3-radio__background .md3-radio__inner-circle,:host .md3-radio__native-control:disabled+.md3-radio__background .md3-radio__inner-circle{transition:transform 120ms cubic-bezier(0, 0, 0.2, 1),border-color 120ms cubic-bezier(0, 0, 0.2, 1)}:host .md3-radio--disabled{cursor:default;pointer-events:none}:host .md3-radio__native-control:checked+.md3-radio__background .md3-radio__inner-circle{transform:scale(1);transition:transform 120ms cubic-bezier(0, 0, 0.2, 1),border-color 120ms cubic-bezier(0, 0, 0.2, 1)}:host .md3-radio__native-control:disabled+.md3-radio__background,:host [aria-disabled=true] .md3-radio__native-control+.md3-radio__background{cursor:default}@media(forced-colors: active){:host .md3-radio .md3-radio__native-control:disabled:checked+.md3-radio__background .md3-radio__outer-circle{border-color:GrayText}:host .md3-radio .md3-radio__native-control:disabled+.md3-radio__background .md3-radio__inner-circle{background-color:GrayText}:host .md3-radio .md3-radio__native-control:disabled:checked+.md3-radio__background .md3-radio__outer-circle{opacity:1}:host .md3-radio .md3-radio__native-control:disabled+.md3-radio__background .md3-radio__inner-circle{opacity:1}:host .md3-radio .md3-radio__native-control:disabled:not(:checked)+.md3-radio__background .md3-radio__outer-circle{border-color:GrayText}:host .md3-radio .md3-radio__native-control:disabled:not(:checked)+.md3-radio__background .md3-radio__outer-circle{opacity:1}:host .md3-radio .md3-radio__native-control:enabled:checked+.md3-radio__background .md3-radio__outer-circle{border-color:CanvasText}:host .md3-radio .md3-radio__native-control:enabled:checked+.md3-radio__background .md3-radio__inner-circle{background-color:CanvasText}:host .md3-radio .md3-radio__native-control:enabled:checked:hover+.md3-radio__background .md3-radio__outer-circle{border-color:CanvasText}:host .md3-radio .md3-radio__native-control:enabled:checked:hover+.md3-radio__background .md3-radio__inner-circle{background-color:CanvasText}:host .md3-radio .md3-radio__native-control:enabled:checked:focus+.md3-radio__background .md3-radio__outer-circle{border-color:CanvasText}:host .md3-radio .md3-radio__native-control:enabled:checked:focus+.md3-radio__background .md3-radio__inner-circle{background-color:CanvasText}:host .md3-radio .md3-radio__native-control:enabled:checked:active+.md3-radio__background .md3-radio__outer-circle{border-color:CanvasText}:host .md3-radio .md3-radio__native-control:enabled:checked:active+.md3-radio__background .md3-radio__inner-circle{background-color:CanvasText}:host .md3-radio .md3-radio__native-control:enabled:not(:checked)+.md3-radio__background .md3-radio__outer-circle{border-color:CanvasText}:host .md3-radio .md3-radio__native-control:enabled:not(:checked):hover+.md3-radio__background .md3-radio__outer-circle{border-color:CanvasText}:host .md3-radio .md3-radio__native-control:enabled:not(:checked):focus+.md3-radio__background .md3-radio__outer-circle{border-color:CanvasText}:host .md3-radio .md3-radio__native-control:enabled:not(:checked):active+.md3-radio__background .md3-radio__outer-circle{border-color:CanvasText}}/*# sourceMappingURL=radio-styles.css.map */
+export const styles = css `:host{--md-ripple-hover-state-layer-color:var(--md-radio-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--md-ripple-focus-state-layer-color:var(--md-radio-unselected-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--md-ripple-pressed-state-layer-color:var(--md-radio-unselected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-hover-state-layer-opacity:var(--md-radio-unselected-hover-state-layer-opacity, 0.08);--md-ripple-focus-state-layer-opacity:var(--md-radio-unselected-focus-state-layer-opacity, 0.12);--md-ripple-pressed-state-layer-opacity:var(--md-radio-unselected-pressed-state-layer-opacity, 0.12);--md-focus-ring-offset-vertical:-2px;--md-focus-ring-offset-horizontal:-2px;display:inline-flex}:host .md3-radio{block-size:var(--md-radio-state-layer-size, 40px);inline-size:var(--md-radio-state-layer-size, 40px)}:host .md3-radio .md3-radio__native-control:disabled:checked+.md3-radio__background .md3-radio__outer-circle{border-color:var(--md-radio-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1c1b1f))}:host .md3-radio .md3-radio__native-control:disabled+.md3-radio__background .md3-radio__inner-circle{background-color:var(--md-radio-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1c1b1f))}:host .md3-radio .md3-radio__native-control:disabled:checked+.md3-radio__background .md3-radio__outer-circle{opacity:var(--md-radio-disabled-selected-icon-opacity, 0.38)}:host .md3-radio .md3-radio__native-control:disabled+.md3-radio__background .md3-radio__inner-circle{opacity:var(--md-radio-disabled-selected-icon-opacity, 0.38)}:host .md3-radio .md3-radio__native-control:disabled:not(:checked)+.md3-radio__background .md3-radio__outer-circle{border-color:var(--md-radio-disabled-unselected-icon-color, var(--md-sys-color-on-surface, #1c1b1f))}:host .md3-radio .md3-radio__native-control:disabled:not(:checked)+.md3-radio__background .md3-radio__outer-circle{opacity:var(--md-radio-disabled-unselected-icon-opacity, 0.38)}:host .md3-radio .md3-radio__background{height:var(--md-radio-icon-size, 20px);width:var(--md-radio-icon-size, 20px)}:host .md3-radio .md3-radio__native-control:enabled:checked:focus+.md3-radio__background .md3-radio__outer-circle{border-color:var(--md-radio-selected-focus-icon-color, var(--md-sys-color-primary, #6750a4))}:host .md3-radio .md3-radio__native-control:enabled:checked:focus+.md3-radio__background .md3-radio__inner-circle{background-color:var(--md-radio-selected-focus-icon-color, var(--md-sys-color-primary, #6750a4))}:host .md3-radio .md3-radio__native-control:enabled:checked:hover+.md3-radio__background .md3-radio__outer-circle{border-color:var(--md-radio-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4))}:host .md3-radio .md3-radio__native-control:enabled:checked:hover+.md3-radio__background .md3-radio__inner-circle{background-color:var(--md-radio-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4))}:host .md3-radio .md3-radio__native-control:enabled:checked+.md3-radio__background .md3-radio__outer-circle{border-color:var(--md-radio-selected-icon-color, var(--md-sys-color-primary, #6750a4))}:host .md3-radio .md3-radio__native-control:enabled:checked+.md3-radio__background .md3-radio__inner-circle{background-color:var(--md-radio-selected-icon-color, var(--md-sys-color-primary, #6750a4))}:host .md3-radio .md3-radio__native-control:enabled:checked:active+.md3-radio__background .md3-radio__outer-circle{border-color:var(--md-radio-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4))}:host .md3-radio .md3-radio__native-control:enabled:checked:active+.md3-radio__background .md3-radio__inner-circle{background-color:var(--md-radio-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4))}:host .md3-radio .md3-radio__ripple{block-size:var(--md-radio-state-layer-size, 40px);inline-size:var(--md-radio-state-layer-size, 40px)}:host .md3-radio .md3-radio__native-control:enabled:not(:checked):focus+.md3-radio__background .md3-radio__outer-circle{border-color:var(--md-radio-unselected-focus-icon-color, var(--md-sys-color-on-surface, #1c1b1f))}:host .md3-radio .md3-radio__native-control:enabled:not(:checked):hover+.md3-radio__background .md3-radio__outer-circle{border-color:var(--md-radio-unselected-hover-icon-color, var(--md-sys-color-on-surface, #1c1b1f))}:host .md3-radio .md3-radio__native-control:enabled:not(:checked)+.md3-radio__background .md3-radio__outer-circle{border-color:var(--md-radio-unselected-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}:host .md3-radio .md3-radio__native-control:enabled:not(:checked):active+.md3-radio__background .md3-radio__outer-circle{border-color:var(--md-radio-unselected-pressed-icon-color, var(--md-sys-color-on-surface, #1c1b1f))}:host .md3-radio--touch{block-size:var(--md-radio-_touch-target-size, 48px);inline-size:var(--md-radio-_touch-target-size, 48px)}:host([checked]){--md-ripple-hover-state-layer-color:var(--md-radio-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-focus-state-layer-color:var(--md-radio-selected-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-pressed-state-layer-color:var(--md-radio-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--md-ripple-hover-state-layer-opacity:var(--md-radio-selected-hover-state-layer-opacity, 0.08);--md-ripple-focus-state-layer-opacity:var(--md-radio-selected-focus-state-layer-opacity, 0.12);--md-ripple-pressed-state-layer-opacity:var(--md-radio-selected-pressed-state-layer-opacity, 0.12)}:host .md3-radio{display:inline-flex;position:relative;cursor:pointer;will-change:opacity,transform,border-color,color;justify-content:center;align-items:center}:host .md3-radio__background{display:inline-flex;position:relative;box-sizing:border-box;align-items:center;justify-content:center}:host .md3-radio__outer-circle{position:absolute;inset-block-start:0;inset-inline-start:0;box-sizing:border-box;block-size:100%;inline-size:100%;border-width:2px;border-style:solid;border-radius:50%;transition:border-color 120ms cubic-bezier(0.4, 0, 0.6, 1)}:host .md3-radio__inner-circle{position:absolute;box-sizing:border-box;block-size:50%;inline-size:50%;transform:scale(0);border-radius:50%;transition:transform 120ms cubic-bezier(0.4, 0, 0.6, 1),border-color 120ms cubic-bezier(0.4, 0, 0.6, 1)}:host .md3-radio__ripple{position:absolute;display:inline-flex;z-index:-1}:host .md3-radio__native-control{position:absolute;margin:0;padding:0;opacity:0;cursor:inherit;z-index:1;block-size:100%;inline-size:100%;inset:0}:host .md3-radio__native-control:checked+.md3-radio__background,:host .md3-radio__native-control:disabled+.md3-radio__background{transition:opacity 120ms cubic-bezier(0, 0, 0.2, 1),transform 120ms cubic-bezier(0, 0, 0.2, 1)}:host .md3-radio__native-control:checked+.md3-radio__background .md3-radio__outer-circle,:host .md3-radio__native-control:disabled+.md3-radio__background .md3-radio__outer-circle{transition:border-color 120ms cubic-bezier(0, 0, 0.2, 1)}:host .md3-radio__native-control:checked+.md3-radio__background .md3-radio__inner-circle,:host .md3-radio__native-control:disabled+.md3-radio__background .md3-radio__inner-circle{transition:transform 120ms cubic-bezier(0, 0, 0.2, 1),border-color 120ms cubic-bezier(0, 0, 0.2, 1)}:host .md3-radio--disabled{cursor:default;pointer-events:none}:host .md3-radio__native-control:checked+.md3-radio__background .md3-radio__inner-circle{transform:scale(1);transition:transform 120ms cubic-bezier(0, 0, 0.2, 1),border-color 120ms cubic-bezier(0, 0, 0.2, 1)}:host .md3-radio__native-control:disabled+.md3-radio__background,:host [aria-disabled=true] .md3-radio__native-control+.md3-radio__background{cursor:default}@media(forced-colors: active){:host .md3-radio .md3-radio__native-control:disabled:checked+.md3-radio__background .md3-radio__outer-circle{border-color:GrayText}:host .md3-radio .md3-radio__native-control:disabled+.md3-radio__background .md3-radio__inner-circle{background-color:GrayText}:host .md3-radio .md3-radio__native-control:disabled:checked+.md3-radio__background .md3-radio__outer-circle{opacity:1}:host .md3-radio .md3-radio__native-control:disabled+.md3-radio__background .md3-radio__inner-circle{opacity:1}:host .md3-radio .md3-radio__native-control:disabled:not(:checked)+.md3-radio__background .md3-radio__outer-circle{border-color:GrayText}:host .md3-radio .md3-radio__native-control:disabled:not(:checked)+.md3-radio__background .md3-radio__outer-circle{opacity:1}:host .md3-radio .md3-radio__native-control:enabled:checked+.md3-radio__background .md3-radio__outer-circle{border-color:CanvasText}:host .md3-radio .md3-radio__native-control:enabled:checked+.md3-radio__background .md3-radio__inner-circle{background-color:CanvasText}:host .md3-radio .md3-radio__native-control:enabled:checked:hover+.md3-radio__background .md3-radio__outer-circle{border-color:CanvasText}:host .md3-radio .md3-radio__native-control:enabled:checked:hover+.md3-radio__background .md3-radio__inner-circle{background-color:CanvasText}:host .md3-radio .md3-radio__native-control:enabled:checked:focus+.md3-radio__background .md3-radio__outer-circle{border-color:CanvasText}:host .md3-radio .md3-radio__native-control:enabled:checked:focus+.md3-radio__background .md3-radio__inner-circle{background-color:CanvasText}:host .md3-radio .md3-radio__native-control:enabled:checked:active+.md3-radio__background .md3-radio__outer-circle{border-color:CanvasText}:host .md3-radio .md3-radio__native-control:enabled:checked:active+.md3-radio__background .md3-radio__inner-circle{background-color:CanvasText}:host .md3-radio .md3-radio__native-control:enabled:not(:checked)+.md3-radio__background .md3-radio__outer-circle{border-color:CanvasText}:host .md3-radio .md3-radio__native-control:enabled:not(:checked):hover+.md3-radio__background .md3-radio__outer-circle{border-color:CanvasText}:host .md3-radio .md3-radio__native-control:enabled:not(:checked):focus+.md3-radio__background .md3-radio__outer-circle{border-color:CanvasText}:host .md3-radio .md3-radio__native-control:enabled:not(:checked):active+.md3-radio__background .md3-radio__outer-circle{border-color:CanvasText}}/*# sourceMappingURL=radio-styles.css.map */
 `;
 //# sourceMappingURL=radio-styles.css.js.map

package/radio/lib/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{--md-ripple-hover-state-layer-color:var(--md-radio-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--md-ripple-focus-state-layer-color:var(--md-radio-unselected-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--md-ripple-pressed-state-layer-color:var(--md-radio-unselected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-hover-state-layer-opacity:var(--md-radio-unselected-hover-state-layer-opacity, 0.08);--md-ripple-focus-state-layer-opacity:var(--md-radio-unselected-focus-state-layer-opacity, 0.12);--md-ripple-pressed-state-layer-opacity:var(--md-radio-unselected-pressed-state-layer-opacity, 0.12);--md-focus-ring-container-outer-padding-vertical:-2px;--md-focus-ring-container-outer-padding-horizontal:-2px;display:inline-flex}:host .md3-radio{block-size:var(--md-radio-state-layer-size, 40px);inline-size:var(--md-radio-state-layer-size, 40px)}:host .md3-radio .md3-radio__native-control:disabled:checked+.md3-radio__background .md3-radio__outer-circle{border-color:var(--md-radio-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1c1b1f))}:host .md3-radio .md3-radio__native-control:disabled+.md3-radio__background .md3-radio__inner-circle{background-color:var(--md-radio-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1c1b1f))}:host .md3-radio .md3-radio__native-control:disabled:checked+.md3-radio__background .md3-radio__outer-circle{opacity:var(--md-radio-disabled-selected-icon-opacity, 0.38)}:host .md3-radio .md3-radio__native-control:disabled+.md3-radio__background .md3-radio__inner-circle{opacity:var(--md-radio-disabled-selected-icon-opacity, 0.38)}:host .md3-radio .md3-radio__native-control:disabled:not(:checked)+.md3-radio__background .md3-radio__outer-circle{border-color:var(--md-radio-disabled-unselected-icon-color, var(--md-sys-color-on-surface, #1c1b1f))}:host .md3-radio .md3-radio__native-control:disabled:not(:checked)+.md3-radio__background .md3-radio__outer-circle{opacity:var(--md-radio-disabled-unselected-icon-opacity, 0.38)}:host .md3-radio .md3-radio__background{height:var(--md-radio-icon-size, 20px);width:var(--md-radio-icon-size, 20px)}:host .md3-radio .md3-radio__native-control:enabled:checked:focus+.md3-radio__background .md3-radio__outer-circle{border-color:var(--md-radio-selected-focus-icon-color, var(--md-sys-color-primary, #6750a4))}:host .md3-radio .md3-radio__native-control:enabled:checked:focus+.md3-radio__background .md3-radio__inner-circle{background-color:var(--md-radio-selected-focus-icon-color, var(--md-sys-color-primary, #6750a4))}:host .md3-radio .md3-radio__native-control:enabled:checked:hover+.md3-radio__background .md3-radio__outer-circle{border-color:var(--md-radio-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4))}:host .md3-radio .md3-radio__native-control:enabled:checked:hover+.md3-radio__background .md3-radio__inner-circle{background-color:var(--md-radio-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4))}:host .md3-radio .md3-radio__native-control:enabled:checked+.md3-radio__background .md3-radio__outer-circle{border-color:var(--md-radio-selected-icon-color, var(--md-sys-color-primary, #6750a4))}:host .md3-radio .md3-radio__native-control:enabled:checked+.md3-radio__background .md3-radio__inner-circle{background-color:var(--md-radio-selected-icon-color, var(--md-sys-color-primary, #6750a4))}:host .md3-radio .md3-radio__native-control:enabled:checked:active+.md3-radio__background .md3-radio__outer-circle{border-color:var(--md-radio-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4))}:host .md3-radio .md3-radio__native-control:enabled:checked:active+.md3-radio__background .md3-radio__inner-circle{background-color:var(--md-radio-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4))}:host .md3-radio .md3-radio__ripple{block-size:var(--md-radio-state-layer-size, 40px);inline-size:var(--md-radio-state-layer-size, 40px)}:host .md3-radio .md3-radio__native-control:enabled:not(:checked):focus+.md3-radio__background .md3-radio__outer-circle{border-color:var(--md-radio-unselected-focus-icon-color, var(--md-sys-color-on-surface, #1c1b1f))}:host .md3-radio .md3-radio__native-control:enabled:not(:checked):hover+.md3-radio__background .md3-radio__outer-circle{border-color:var(--md-radio-unselected-hover-icon-color, var(--md-sys-color-on-surface, #1c1b1f))}:host .md3-radio .md3-radio__native-control:enabled:not(:checked)+.md3-radio__background .md3-radio__outer-circle{border-color:var(--md-radio-unselected-icon-color, var(--md-sys-color-on-surface, #1c1b1f))}:host .md3-radio .md3-radio__native-control:enabled:not(:checked):active+.md3-radio__background .md3-radio__outer-circle{border-color:var(--md-radio-unselected-pressed-icon-color, var(--md-sys-color-on-surface, #1c1b1f))}:host .md3-radio--touch{block-size:var(--md-radio-_touch-target-size, 48px);inline-size:var(--md-radio-_touch-target-size, 48px)}:host([checked]){--md-ripple-hover-state-layer-color:var(--md-radio-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-focus-state-layer-color:var(--md-radio-selected-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-pressed-state-layer-color:var(--md-radio-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--md-ripple-hover-state-layer-opacity:var(--md-radio-selected-hover-state-layer-opacity, 0.08);--md-ripple-focus-state-layer-opacity:var(--md-radio-selected-focus-state-layer-opacity, 0.12);--md-ripple-pressed-state-layer-opacity:var(--md-radio-selected-pressed-state-layer-opacity, 0.12)}:host .md3-radio{display:inline-flex;position:relative;cursor:pointer;will-change:opacity,transform,border-color,color;justify-content:center;align-items:center}:host .md3-radio__background{display:inline-flex;position:relative;box-sizing:border-box;align-items:center;justify-content:center}:host .md3-radio__outer-circle{position:absolute;inset-block-start:0;inset-inline-start:0;box-sizing:border-box;block-size:100%;inline-size:100%;border-width:2px;border-style:solid;border-radius:50%;transition:border-color 120ms cubic-bezier(0.4, 0, 0.6, 1)}:host .md3-radio__inner-circle{position:absolute;box-sizing:border-box;block-size:50%;inline-size:50%;transform:scale(0);border-radius:50%;transition:transform 120ms cubic-bezier(0.4, 0, 0.6, 1),border-color 120ms cubic-bezier(0.4, 0, 0.6, 1)}:host .md3-radio__ripple{position:absolute;display:inline-flex;z-index:-1}:host .md3-radio__native-control{position:absolute;margin:0;padding:0;opacity:0;cursor:inherit;z-index:1;block-size:100%;inline-size:100%;inset:0}:host .md3-radio__native-control:checked+.md3-radio__background,:host .md3-radio__native-control:disabled+.md3-radio__background{transition:opacity 120ms cubic-bezier(0, 0, 0.2, 1),transform 120ms cubic-bezier(0, 0, 0.2, 1)}:host .md3-radio__native-control:checked+.md3-radio__background .md3-radio__outer-circle,:host .md3-radio__native-control:disabled+.md3-radio__background .md3-radio__outer-circle{transition:border-color 120ms cubic-bezier(0, 0, 0.2, 1)}:host .md3-radio__native-control:checked+.md3-radio__background .md3-radio__inner-circle,:host .md3-radio__native-control:disabled+.md3-radio__background .md3-radio__inner-circle{transition:transform 120ms cubic-bezier(0, 0, 0.2, 1),border-color 120ms cubic-bezier(0, 0, 0.2, 1)}:host .md3-radio--disabled{cursor:default;pointer-events:none}:host .md3-radio__native-control:checked+.md3-radio__background .md3-radio__inner-circle{transform:scale(1);transition:transform 120ms cubic-bezier(0, 0, 0.2, 1),border-color 120ms cubic-bezier(0, 0, 0.2, 1)}:host .md3-radio__native-control:disabled+.md3-radio__background,:host [aria-disabled=true] .md3-radio__native-control+.md3-radio__background{cursor:default}@media(forced-colors: active){:host .md3-radio .md3-radio__native-control:disabled:checked+.md3-radio__background .md3-radio__outer-circle{border-color:GrayText}:host .md3-radio .md3-radio__native-control:disabled+.md3-radio__background .md3-radio__inner-circle{background-color:GrayText}:host .md3-radio .md3-radio__native-control:disabled:checked+.md3-radio__background .md3-radio__outer-circle{opacity:1}:host .md3-radio .md3-radio__native-control:disabled+.md3-radio__background .md3-radio__inner-circle{opacity:1}:host .md3-radio .md3-radio__native-control:disabled:not(:checked)+.md3-radio__background .md3-radio__outer-circle{border-color:GrayText}:host .md3-radio .md3-radio__native-control:disabled:not(:checked)+.md3-radio__background .md3-radio__outer-circle{opacity:1}:host .md3-radio .md3-radio__native-control:enabled:checked+.md3-radio__background .md3-radio__outer-circle{border-color:CanvasText}:host .md3-radio .md3-radio__native-control:enabled:checked+.md3-radio__background .md3-radio__inner-circle{background-color:CanvasText}:host .md3-radio .md3-radio__native-control:enabled:checked:hover+.md3-radio__background .md3-radio__outer-circle{border-color:CanvasText}:host .md3-radio .md3-radio__native-control:enabled:checked:hover+.md3-radio__background .md3-radio__inner-circle{background-color:CanvasText}:host .md3-radio .md3-radio__native-control:enabled:checked:focus+.md3-radio__background .md3-radio__outer-circle{border-color:CanvasText}:host .md3-radio .md3-radio__native-control:enabled:checked:focus+.md3-radio__background .md3-radio__inner-circle{background-color:CanvasText}:host .md3-radio .md3-radio__native-control:enabled:checked:active+.md3-radio__background .md3-radio__outer-circle{border-color:CanvasText}:host .md3-radio .md3-radio__native-control:enabled:checked:active+.md3-radio__background .md3-radio__inner-circle{background-color:CanvasText}:host .md3-radio .md3-radio__native-control:enabled:not(:checked)+.md3-radio__background .md3-radio__outer-circle{border-color:CanvasText}:host .md3-radio .md3-radio__native-control:enabled:not(:checked):hover+.md3-radio__background .md3-radio__outer-circle{border-color:CanvasText}:host .md3-radio .md3-radio__native-control:enabled:not(:checked):focus+.md3-radio__background .md3-radio__outer-circle{border-color:CanvasText}:host .md3-radio .md3-radio__native-control:enabled:not(:checked):active+.md3-radio__background .md3-radio__outer-circle{border-color:CanvasText}}/*# 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{--md-ripple-hover-state-layer-color:var(--md-radio-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--md-ripple-focus-state-layer-color:var(--md-radio-unselected-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--md-ripple-pressed-state-layer-color:var(--md-radio-unselected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-hover-state-layer-opacity:var(--md-radio-unselected-hover-state-layer-opacity, 0.08);--md-ripple-focus-state-layer-opacity:var(--md-radio-unselected-focus-state-layer-opacity, 0.12);--md-ripple-pressed-state-layer-opacity:var(--md-radio-unselected-pressed-state-layer-opacity, 0.12);--md-focus-ring-offset-vertical:-2px;--md-focus-ring-offset-horizontal:-2px;display:inline-flex}:host .md3-radio{block-size:var(--md-radio-state-layer-size, 40px);inline-size:var(--md-radio-state-layer-size, 40px)}:host .md3-radio .md3-radio__native-control:disabled:checked+.md3-radio__background .md3-radio__outer-circle{border-color:var(--md-radio-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1c1b1f))}:host .md3-radio .md3-radio__native-control:disabled+.md3-radio__background .md3-radio__inner-circle{background-color:var(--md-radio-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1c1b1f))}:host .md3-radio .md3-radio__native-control:disabled:checked+.md3-radio__background .md3-radio__outer-circle{opacity:var(--md-radio-disabled-selected-icon-opacity, 0.38)}:host .md3-radio .md3-radio__native-control:disabled+.md3-radio__background .md3-radio__inner-circle{opacity:var(--md-radio-disabled-selected-icon-opacity, 0.38)}:host .md3-radio .md3-radio__native-control:disabled:not(:checked)+.md3-radio__background .md3-radio__outer-circle{border-color:var(--md-radio-disabled-unselected-icon-color, var(--md-sys-color-on-surface, #1c1b1f))}:host .md3-radio .md3-radio__native-control:disabled:not(:checked)+.md3-radio__background .md3-radio__outer-circle{opacity:var(--md-radio-disabled-unselected-icon-opacity, 0.38)}:host .md3-radio .md3-radio__background{height:var(--md-radio-icon-size, 20px);width:var(--md-radio-icon-size, 20px)}:host .md3-radio .md3-radio__native-control:enabled:checked:focus+.md3-radio__background .md3-radio__outer-circle{border-color:var(--md-radio-selected-focus-icon-color, var(--md-sys-color-primary, #6750a4))}:host .md3-radio .md3-radio__native-control:enabled:checked:focus+.md3-radio__background .md3-radio__inner-circle{background-color:var(--md-radio-selected-focus-icon-color, var(--md-sys-color-primary, #6750a4))}:host .md3-radio .md3-radio__native-control:enabled:checked:hover+.md3-radio__background .md3-radio__outer-circle{border-color:var(--md-radio-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4))}:host .md3-radio .md3-radio__native-control:enabled:checked:hover+.md3-radio__background .md3-radio__inner-circle{background-color:var(--md-radio-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4))}:host .md3-radio .md3-radio__native-control:enabled:checked+.md3-radio__background .md3-radio__outer-circle{border-color:var(--md-radio-selected-icon-color, var(--md-sys-color-primary, #6750a4))}:host .md3-radio .md3-radio__native-control:enabled:checked+.md3-radio__background .md3-radio__inner-circle{background-color:var(--md-radio-selected-icon-color, var(--md-sys-color-primary, #6750a4))}:host .md3-radio .md3-radio__native-control:enabled:checked:active+.md3-radio__background .md3-radio__outer-circle{border-color:var(--md-radio-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4))}:host .md3-radio .md3-radio__native-control:enabled:checked:active+.md3-radio__background .md3-radio__inner-circle{background-color:var(--md-radio-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4))}:host .md3-radio .md3-radio__ripple{block-size:var(--md-radio-state-layer-size, 40px);inline-size:var(--md-radio-state-layer-size, 40px)}:host .md3-radio .md3-radio__native-control:enabled:not(:checked):focus+.md3-radio__background .md3-radio__outer-circle{border-color:var(--md-radio-unselected-focus-icon-color, var(--md-sys-color-on-surface, #1c1b1f))}:host .md3-radio .md3-radio__native-control:enabled:not(:checked):hover+.md3-radio__background .md3-radio__outer-circle{border-color:var(--md-radio-unselected-hover-icon-color, var(--md-sys-color-on-surface, #1c1b1f))}:host .md3-radio .md3-radio__native-control:enabled:not(:checked)+.md3-radio__background .md3-radio__outer-circle{border-color:var(--md-radio-unselected-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}:host .md3-radio .md3-radio__native-control:enabled:not(:checked):active+.md3-radio__background .md3-radio__outer-circle{border-color:var(--md-radio-unselected-pressed-icon-color, var(--md-sys-color-on-surface, #1c1b1f))}:host .md3-radio--touch{block-size:var(--md-radio-_touch-target-size, 48px);inline-size:var(--md-radio-_touch-target-size, 48px)}:host([checked]){--md-ripple-hover-state-layer-color:var(--md-radio-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-focus-state-layer-color:var(--md-radio-selected-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-pressed-state-layer-color:var(--md-radio-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--md-ripple-hover-state-layer-opacity:var(--md-radio-selected-hover-state-layer-opacity, 0.08);--md-ripple-focus-state-layer-opacity:var(--md-radio-selected-focus-state-layer-opacity, 0.12);--md-ripple-pressed-state-layer-opacity:var(--md-radio-selected-pressed-state-layer-opacity, 0.12)}:host .md3-radio{display:inline-flex;position:relative;cursor:pointer;will-change:opacity,transform,border-color,color;justify-content:center;align-items:center}:host .md3-radio__background{display:inline-flex;position:relative;box-sizing:border-box;align-items:center;justify-content:center}:host .md3-radio__outer-circle{position:absolute;inset-block-start:0;inset-inline-start:0;box-sizing:border-box;block-size:100%;inline-size:100%;border-width:2px;border-style:solid;border-radius:50%;transition:border-color 120ms cubic-bezier(0.4, 0, 0.6, 1)}:host .md3-radio__inner-circle{position:absolute;box-sizing:border-box;block-size:50%;inline-size:50%;transform:scale(0);border-radius:50%;transition:transform 120ms cubic-bezier(0.4, 0, 0.6, 1),border-color 120ms cubic-bezier(0.4, 0, 0.6, 1)}:host .md3-radio__ripple{position:absolute;display:inline-flex;z-index:-1}:host .md3-radio__native-control{position:absolute;margin:0;padding:0;opacity:0;cursor:inherit;z-index:1;block-size:100%;inline-size:100%;inset:0}:host .md3-radio__native-control:checked+.md3-radio__background,:host .md3-radio__native-control:disabled+.md3-radio__background{transition:opacity 120ms cubic-bezier(0, 0, 0.2, 1),transform 120ms cubic-bezier(0, 0, 0.2, 1)}:host .md3-radio__native-control:checked+.md3-radio__background .md3-radio__outer-circle,:host .md3-radio__native-control:disabled+.md3-radio__background .md3-radio__outer-circle{transition:border-color 120ms cubic-bezier(0, 0, 0.2, 1)}:host .md3-radio__native-control:checked+.md3-radio__background .md3-radio__inner-circle,:host .md3-radio__native-control:disabled+.md3-radio__background .md3-radio__inner-circle{transition:transform 120ms cubic-bezier(0, 0, 0.2, 1),border-color 120ms cubic-bezier(0, 0, 0.2, 1)}:host .md3-radio--disabled{cursor:default;pointer-events:none}:host .md3-radio__native-control:checked+.md3-radio__background .md3-radio__inner-circle{transform:scale(1);transition:transform 120ms cubic-bezier(0, 0, 0.2, 1),border-color 120ms cubic-bezier(0, 0, 0.2, 1)}:host .md3-radio__native-control:disabled+.md3-radio__background,:host [aria-disabled=true] .md3-radio__native-control+.md3-radio__background{cursor:default}@media(forced-colors: active){:host .md3-radio .md3-radio__native-control:disabled:checked+.md3-radio__background .md3-radio__outer-circle{border-color:GrayText}:host .md3-radio .md3-radio__native-control:disabled+.md3-radio__background .md3-radio__inner-circle{background-color:GrayText}:host .md3-radio .md3-radio__native-control:disabled:checked+.md3-radio__background .md3-radio__outer-circle{opacity:1}:host .md3-radio .md3-radio__native-control:disabled+.md3-radio__background .md3-radio__inner-circle{opacity:1}:host .md3-radio .md3-radio__native-control:disabled:not(:checked)+.md3-radio__background .md3-radio__outer-circle{border-color:GrayText}:host .md3-radio .md3-radio__native-control:disabled:not(:checked)+.md3-radio__background .md3-radio__outer-circle{opacity:1}:host .md3-radio .md3-radio__native-control:enabled:checked+.md3-radio__background .md3-radio__outer-circle{border-color:CanvasText}:host .md3-radio .md3-radio__native-control:enabled:checked+.md3-radio__background .md3-radio__inner-circle{background-color:CanvasText}:host .md3-radio .md3-radio__native-control:enabled:checked:hover+.md3-radio__background .md3-radio__outer-circle{border-color:CanvasText}:host .md3-radio .md3-radio__native-control:enabled:checked:hover+.md3-radio__background .md3-radio__inner-circle{background-color:CanvasText}:host .md3-radio .md3-radio__native-control:enabled:checked:focus+.md3-radio__background .md3-radio__outer-circle{border-color:CanvasText}:host .md3-radio .md3-radio__native-control:enabled:checked:focus+.md3-radio__background .md3-radio__inner-circle{background-color:CanvasText}:host .md3-radio .md3-radio__native-control:enabled:checked:active+.md3-radio__background .md3-radio__outer-circle{border-color:CanvasText}:host .md3-radio .md3-radio__native-control:enabled:checked:active+.md3-radio__background .md3-radio__inner-circle{background-color:CanvasText}:host .md3-radio .md3-radio__native-control:enabled:not(:checked)+.md3-radio__background .md3-radio__outer-circle{border-color:CanvasText}:host .md3-radio .md3-radio__native-control:enabled:not(:checked):hover+.md3-radio__background .md3-radio__outer-circle{border-color:CanvasText}:host .md3-radio .md3-radio__native-control:enabled:not(:checked):focus+.md3-radio__background .md3-radio__outer-circle{border-color:CanvasText}:host .md3-radio .md3-radio__native-control:enabled:not(:checked):active+.md3-radio__background .md3-radio__outer-circle{border-color:CanvasText}}/*# sourceMappingURL=radio-styles.css.map */\n`;\n "]}

package/radio/lib/radio.d.ts

@@ -3,11 +3,11 @@
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import '@material/web/focus/focus-ring.js';
-import '@material/web/ripple/ripple.js';
-import { ActionElement, BeginPressConfig, EndPressConfig } from '@material/web/actionelement/action-element.js';
-import { MdRipple } from '@material/web/ripple/ripple.js';
+import '../../focus/focus-ring.js';
+import '../../ripple/ripple.js';
 import { PropertyValues, TemplateResult } from 'lit';
+import { ActionElement, BeginPressConfig, EndPressConfig } from '../../actionelement/action-element.js';
+import { MdRipple } from '../../ripple/ripple.js';
 import { SingleSelectionController } from './single-selection-controller.js';
 /**
  * @fires checked
@@ -58,11 +58,8 @@ export declare class Radio extends ActionElement {
      */
     formElementTabIndex: number;
     protected focused: boolean;
-    /** @soyPrefixAttribute */
     ariaLabel: string;
-    /** @soyPrefixAttribute */
     ariaLabelledBy: string;
-    /** @soyPrefixAttribute */
     ariaDescribedBy: undefined | string;
     protected rippleElement: MdRipple | null;
     /** @soyTemplate */

package/radio/lib/radio.js

@@ -6,17 +6,16 @@
 import { __decorate, __metadata } from "tslib";
 // Style preference for leading underscores.
 // tslint:disable:strip-private-property-underscore
-import '@material/web/focus/focus-ring.js';
-import '@material/web/ripple/ripple.js';
-import { ActionElement } from '@material/web/actionelement/action-element.js';
-import { ariaProperty as legacyAriaProperty } from '@material/web/compat/base/aria-property.js';
-import { ariaProperty } from '@material/web/decorators/aria-property.js';
-import { pointerPress, shouldShowStrongFocus } from '@material/web/focus/strong-focus.js';
-import { MdRipple } from '@material/web/ripple/ripple.js';
+import '../../focus/focus-ring.js';
+import '../../ripple/ripple.js';
 import { html } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { ActionElement } from '../../actionelement/action-element.js';
+import { ariaProperty } from '../../decorators/aria-property.js';
+import { pointerPress, shouldShowStrongFocus } from '../../focus/strong-focus.js';
+import { MdRipple } from '../../ripple/ripple.js';
 import { SingleSelectionController } from './single-selection-controller.js';
 /**
  * @fires checked
@@ -284,19 +283,19 @@ __decorate([
 __decorate([
     ariaProperty // tslint:disable-line:no-new-decorators
     ,
-    property({ attribute: 'aria-label' }),
+    property({ attribute: 'data-aria-label', noAccessor: true }),
     __metadata("design:type", String)
 ], Radio.prototype, "ariaLabel", void 0);
 __decorate([
-    legacyAriaProperty // tslint:disable-line:no-new-decorators
+    ariaProperty // tslint:disable-line:no-new-decorators
     ,
-    property({ attribute: 'aria-labelledby' }),
+    property({ attribute: 'data-aria-labelledby', noAccessor: true }),
     __metadata("design:type", String)
 ], Radio.prototype, "ariaLabelledBy", void 0);
 __decorate([
-    legacyAriaProperty // tslint:disable-line:no-new-decorators
+    ariaProperty // tslint:disable-line:no-new-decorators
     ,
-    property({ type: String, attribute: 'aria-describedby' }),
+    property({ type: String, attribute: 'data-aria-describedby', noAccessor: true }),
     __metadata("design:type", String)
 ], Radio.prototype, "ariaDescribedBy", void 0);
 //# sourceMappingURL=radio.js.map

package/radio/lib/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\n// Style preference for leading underscores.\n// tslint:disable:strip-private-property-underscore\n\nimport '@material/web/focus/focus-ring.js';\nimport '@material/web/ripple/ripple.js';\n\nimport {ActionElement, BeginPressConfig, EndPressConfig} from '@material/web/actionelement/action-element.js';\nimport {ariaProperty as legacyAriaProperty} from '@material/web/compat/base/aria-property.js';\nimport {ariaProperty} from '@material/web/decorators/aria-property.js';\nimport {pointerPress, shouldShowStrongFocus} from '@material/web/focus/strong-focus.js';\nimport {MdRipple} from '@material/web/ripple/ripple.js';\nimport {html, PropertyValues, TemplateResult} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\n\nimport {SingleSelectionController} from './single-selection-controller.js';\n\n/**\n * @fires checked\n * @soyCompatible\n */\nexport class Radio extends ActionElement {\n  @query('input') protected formElement!: HTMLInputElement;\n\n  @query('md-ripple') ripple!: MdRipple;\n\n  protected _checked = false;\n\n  @state() protected showFocusRing = false;\n\n  @property({type: Boolean}) global = false;\n\n  @property({type: Boolean, reflect: true})\n  get checked(): boolean {\n    return this.getChecked();\n  }\n\n  protected getChecked(): boolean {\n    return this._checked;\n  }\n\n  /**\n   * We define our own getter/setter for `checked` because we need to track\n   * changes to it synchronously.\n   *\n   * The order in which the `checked` property is set across radio buttons\n   * within the same group is very important. However, we can't rely on\n   * UpdatingElement's `updated` callback to observe these changes (which is\n   * also what the `@observer` decorator uses), because it batches changes to\n   * all properties.\n   *\n   * Consider:\n   *\n   *   radio1.disabled = true;\n   *   radio2.checked = true;\n   *   radio1.checked = true;\n   *\n   * In this case we'd first see all changes for radio1, and then for radio2,\n   * and we couldn't tell that radio1 was the most recently checked.\n   */\n  set checked(isChecked: boolean) {\n    this.setChecked(isChecked);\n  }\n\n  protected setChecked(isChecked: boolean) {\n    const oldValue = this._checked;\n    if (isChecked === oldValue) {\n      return;\n    }\n    this._checked = isChecked;\n    this.selectionController?.update(this);\n\n    this.requestUpdate('checked', oldValue);\n\n    // useful when unchecks self and wrapping element needs to synchronize\n    // TODO(b/168543810): Remove triggering event on programmatic API call.\n    this.dispatchEvent(new Event('checked', {bubbles: true, composed: true}));\n  }\n\n  @property({type: Boolean}) override disabled = false;\n\n  @property({type: String}) value = 'on';\n\n  @property({type: String}) name = '';\n\n  /**\n   * Touch target extends beyond visual boundary of a component by default.\n   * Set to `true` to remove touch target added to the component.\n   * @see https://material.io/design/usability/accessibility.html\n   */\n  @property({type: Boolean}) reducedTouchTarget = false;\n\n  protected selectionController?: SingleSelectionController;\n\n  /**\n   * input's tabindex is updated based on checked status.\n   * Tab navigation will be removed from unchecked radios.\n   */\n  @property({type: Number}) formElementTabIndex = 0;\n\n  @state() protected focused = false;\n\n  /** @soyPrefixAttribute */\n  @ariaProperty  // tslint:disable-line:no-new-decorators\n  @property({attribute: 'aria-label'})\n  override ariaLabel!: string;\n\n  /** @soyPrefixAttribute */\n  @legacyAriaProperty  // tslint:disable-line:no-new-decorators\n  @property({attribute: 'aria-labelledby'})\n  ariaLabelledBy!: string;\n\n  /** @soyPrefixAttribute */\n  @legacyAriaProperty  // tslint:disable-line:no-new-decorators\n  @property({type: String, attribute: 'aria-describedby'})\n  ariaDescribedBy!: undefined|string;\n\n  protected rippleElement: MdRipple|null = null;\n\n  /** @soyTemplate */\n  protected renderRipple(): TemplateResult|string {\n    return html`<md-ripple unbounded\n        ?disabled=\"${this.disabled}\"></md-ripple>`;\n  }\n\n  /** @soyTemplate */\n  protected renderFocusRing(): TemplateResult {\n    return html`<md-focus-ring .visible=\"${\n        this.showFocusRing}\"></md-focus-ring>`;\n  }\n\n  get isRippleActive() {\n    return false;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    // Note that we must defer creating the selection controller until the\n    // element has connected, because selection controllers are keyed by the\n    // radio's shadow root. For example, if we're stamping in a lit map\n    // or repeat, then we'll be constructed before we're added to a root node.\n    //\n    // Also note if we aren't using native shadow DOM, we still need a\n    // SelectionController, because we should update checked status of other\n    // radios in the group when selection changes. It also simplifies\n    // implementation and testing to use one in all cases.\n    //\n    // eslint-disable-next-line @typescript-eslint/no-use-before-define\n    this.selectionController = SingleSelectionController.getController(this);\n    this.selectionController.register(this);\n\n    // Radios maybe checked before connected, update selection as soon it is\n    // connected to DOM. Last checked radio button in the DOM will be selected.\n    //\n    // NOTE: If we update selection only after firstUpdate() we might mistakenly\n    // update checked status before other radios are rendered.\n    this.selectionController.update(this);\n  }\n\n  override disconnectedCallback() {\n    // The controller is initialized in connectedCallback, so if we are in\n    // disconnectedCallback then it must be initialized.\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n    this.selectionController!.unregister(this);\n    this.selectionController = undefined;\n  }\n\n  override updated(changedProperties: PropertyValues) {\n    if (changedProperties.has('checked') && this.formElement) {\n      this.formElement.checked = this.checked;\n      if (!this.checked) {\n        // Remove focus ring when unchecked on other radio programmatically.\n        // Blur on input since this determines the focus style.\n        this.formElement?.blur();\n      }\n    }\n  }\n\n  protected createAdapter() {}\n\n  override beginPress({positionEvent}: BeginPressConfig) {\n    this.ripple.beginPress(positionEvent);\n  }\n\n  override endPress({cancelled}: EndPressConfig) {\n    this.ripple.endPress();\n\n    if (cancelled) {\n      return;\n    }\n\n    super.endPress({\n      cancelled,\n      actionData:\n          {checked: this.formElement.checked, value: this.formElement.value}\n    });\n  }\n\n  override click() {\n    this.formElement.focus();\n    this.formElement.click();\n  }\n\n  protected handleFocus() {\n    this.focused = true;\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  protected handleBlur() {\n    this.focused = false;\n    this.showFocusRing = false;\n  }\n\n  protected setFormData(formData: FormData) {\n    if (this.name && this.checked) {\n      formData.append(this.name, this.value);\n    }\n  }\n\n  /**\n   * @soyTemplate\n   * @soyAttributes radioAttributes: input\n   * @soyClasses radioClasses: .md3-radio\n   */\n  protected override render(): TemplateResult {\n    /** @classMap */\n    const classes = {\n      'md3-radio--touch': !this.reducedTouchTarget,\n      'md3-ripple-upgraded--background-focused': this.focused,\n      'md3-radio--disabled': this.disabled,\n    };\n\n    return html`\n      <div class=\"md3-radio ${classMap(classes)}\">\n        ${this.renderFocusRing()}\n        <input\n          tabindex=\"${this.formElementTabIndex}\"\n          class=\"md3-radio__native-control\"\n          type=\"radio\"\n          name=\"${this.name}\"\n          aria-label=\"${ifDefined(this.ariaLabel)}\"\n          aria-labelledby=\"${ifDefined(this.ariaLabelledBy)}\"\n          aria-describedby=\"${ifDefined(this.ariaDescribedBy)}\"\n          ?checked=\"${this.checked}\"\n          .value=\"${this.value}\"\n          ?disabled=\"${this.disabled}\"\n          @change=\"${this.changeHandler}\"\n          @focus=\"${this.handleFocus}\"\n          @click=\"${this.handleClick}\"\n          @blur=\"${this.handleBlur}\"\n          @pointerenter=${this.handlePointerEnter}\n          @pointerdown=${this.handlePointerDown}\n          @pointerup=${this.handlePointerUp}\n          @pointercancel=${this.handlePointerCancel}\n          @pointerleave=${this.handlePointerLeave}\n          >\n        <div class=\"md3-radio__background\">\n          <div class=\"md3-radio__outer-circle\"></div>\n          <div class=\"md3-radio__inner-circle\"></div>\n        </div>\n        <div class=\"md3-radio__ripple\">\n          ${this.renderRipple()}\n        </div>\n      </div>`;\n  }\n\n  protected handlePointerEnter() {\n    this.ripple.beginHover();\n  }\n\n  override handlePointerDown(event: PointerEvent) {\n    super.handlePointerDown(event);\n\n    pointerPress();\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  override handlePointerLeave(e: PointerEvent) {\n    super.handlePointerLeave(e);\n    this.ripple.endHover();\n  }\n\n  protected changeHandler() {\n    if (this.disabled) {\n      return;\n    }\n\n    // Per spec, the change event on a radio input always represents checked.\n    this.checked = true;\n    this.dispatchEvent(new Event('change', {\n      bubbles: true,\n      composed: true,\n    }));\n  }\n}\n"]}
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["radio.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,4CAA4C;AAC5C,mDAAmD;AAEnD,OAAO,2BAA2B,CAAC;AACnC,OAAO,wBAAwB,CAAC;AAEhC,OAAO,EAAC,IAAI,EAAiC,MAAM,KAAK,CAAC;AACzD,OAAO,EAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAC,SAAS,EAAC,MAAM,8BAA8B,CAAC;AAEvD,OAAO,EAAC,aAAa,EAAmC,MAAM,uCAAuC,CAAC;AACtG,OAAO,EAAC,YAAY,EAAC,MAAM,mCAAmC,CAAC;AAC/D,OAAO,EAAC,YAAY,EAAE,qBAAqB,EAAC,MAAM,6BAA6B,CAAC;AAChF,OAAO,EAAC,QAAQ,EAAC,MAAM,wBAAwB,CAAC;AAEhD,OAAO,EAAC,yBAAyB,EAAC,MAAM,kCAAkC,CAAC;AAE3E;;;GAGG;AACH,MAAM,OAAO,KAAM,SAAQ,aAAa;IAAxC;;QAKY,aAAQ,GAAG,KAAK,CAAC;QAER,kBAAa,GAAG,KAAK,CAAC;QAEd,WAAM,GAAG,KAAK,CAAC;QAiDN,aAAQ,GAAG,KAAK,CAAC;QAE3B,UAAK,GAAG,IAAI,CAAC;QAEb,SAAI,GAAG,EAAE,CAAC;QAEpC;;;;WAIG;QACwB,uBAAkB,GAAG,KAAK,CAAC;QAItD;;;WAGG;QACuB,wBAAmB,GAAG,CAAC,CAAC;QAE/B,YAAO,GAAG,KAAK,CAAC;QAezB,kBAAa,GAAkB,IAAI,CAAC;IAiLhD,CAAC;IAnQC,IAAI,OAAO;QACT,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC;IAC3B,CAAC;IAES,UAAU;QAClB,OAAO,IAAI,CAAC,QAAQ,CAAC;IACvB,CAAC;IAED;;;;;;;;;;;;;;;;;;OAkBG;IACH,IAAI,OAAO,CAAC,SAAkB;QAC5B,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC;IAC7B,CAAC;IAES,UAAU,CAAC,SAAkB;QACrC,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,SAAS,KAAK,QAAQ,EAAE;YAC1B,OAAO;SACR;QACD,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC;QAC1B,IAAI,CAAC,mBAAmB,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC;QAEvC,IAAI,CAAC,aAAa,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;QAExC,sEAAsE;QACtE,uEAAuE;QACvE,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,SAAS,EAAE,EAAC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC;IAC5E,CAAC;IAwCD,mBAAmB;IACT,YAAY;QACpB,OAAO,IAAI,CAAA;qBACM,IAAI,CAAC,QAAQ,gBAAgB,CAAC;IACjD,CAAC;IAED,mBAAmB;IACT,eAAe;QACvB,OAAO,IAAI,CAAA,4BACP,IAAI,CAAC,aAAa,oBAAoB,CAAC;IAC7C,CAAC;IAED,IAAI,cAAc;QAChB,OAAO,KAAK,CAAC;IACf,CAAC;IAEQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,sEAAsE;QACtE,wEAAwE;QACxE,mEAAmE;QACnE,0EAA0E;QAC1E,EAAE;QACF,kEAAkE;QAClE,wEAAwE;QACxE,iEAAiE;QACjE,sDAAsD;QACtD,EAAE;QACF,mEAAmE;QACnE,IAAI,CAAC,mBAAmB,GAAG,yBAAyB,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QACzE,IAAI,CAAC,mBAAmB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QAExC,wEAAwE;QACxE,2EAA2E;QAC3E,EAAE;QACF,4EAA4E;QAC5E,0DAA0D;QAC1D,IAAI,CAAC,mBAAmB,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IACxC,CAAC;IAEQ,oBAAoB;QAC3B,sEAAsE;QACtE,oDAAoD;QACpD,oEAAoE;QACpE,IAAI,CAAC,mBAAoB,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;QAC3C,IAAI,CAAC,mBAAmB,GAAG,SAAS,CAAC;IACvC,CAAC;IAEQ,OAAO,CAAC,iBAAiC;QAChD,IAAI,iBAAiB,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,WAAW,EAAE;YACxD,IAAI,CAAC,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;YACxC,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;gBACjB,oEAAoE;gBACpE,uDAAuD;gBACvD,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC;aAC1B;SACF;IACH,CAAC;IAES,aAAa,KAAI,CAAC;IAEnB,UAAU,CAAC,EAAC,aAAa,EAAmB;QACnD,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;IACxC,CAAC;IAEQ,QAAQ,CAAC,EAAC,SAAS,EAAiB;QAC3C,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;QAEvB,IAAI,SAAS,EAAE;YACb,OAAO;SACR;QAED,KAAK,CAAC,QAAQ,CAAC;YACb,SAAS;YACT,UAAU,EACN,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,KAAK,EAAC;SACvE,CAAC,CAAC;IACL,CAAC;IAEQ,KAAK;QACZ,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;QACzB,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;IAC3B,CAAC;IAES,WAAW;QACnB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACpB,IAAI,CAAC,aAAa,GAAG,qBAAqB,EAAE,CAAC;IAC/C,CAAC;IAES,UAAU;QAClB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;IAC7B,CAAC;IAES,WAAW,CAAC,QAAkB;QACtC,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,EAAE;YAC7B,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;SACxC;IACH,CAAC;IAED;;;;OAIG;IACgB,MAAM;QACvB,gBAAgB;QAChB,MAAM,OAAO,GAAG;YACd,kBAAkB,EAAE,CAAC,IAAI,CAAC,kBAAkB;YAC5C,yCAAyC,EAAE,IAAI,CAAC,OAAO;YACvD,qBAAqB,EAAE,IAAI,CAAC,QAAQ;SACrC,CAAC;QAEF,OAAO,IAAI,CAAA;8BACe,QAAQ,CAAC,OAAO,CAAC;UACrC,IAAI,CAAC,eAAe,EAAE;;sBAEV,IAAI,CAAC,mBAAmB;;;kBAG5B,IAAI,CAAC,IAAI;wBACH,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC;6BACpB,SAAS,CAAC,IAAI,CAAC,cAAc,CAAC;8BAC7B,SAAS,CAAC,IAAI,CAAC,eAAe,CAAC;sBACvC,IAAI,CAAC,OAAO;oBACd,IAAI,CAAC,KAAK;uBACP,IAAI,CAAC,QAAQ;qBACf,IAAI,CAAC,aAAa;oBACnB,IAAI,CAAC,WAAW;oBAChB,IAAI,CAAC,WAAW;mBACjB,IAAI,CAAC,UAAU;0BACR,IAAI,CAAC,kBAAkB;yBACxB,IAAI,CAAC,iBAAiB;uBACxB,IAAI,CAAC,eAAe;2BAChB,IAAI,CAAC,mBAAmB;0BACzB,IAAI,CAAC,kBAAkB;;;;;;;YAOrC,IAAI,CAAC,YAAY,EAAE;;aAElB,CAAC;IACZ,CAAC;IAES,kBAAkB;QAC1B,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC;IAC3B,CAAC;IAEQ,iBAAiB,CAAC,KAAmB;QAC5C,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;QAE/B,YAAY,EAAE,CAAC;QACf,IAAI,CAAC,aAAa,GAAG,qBAAqB,EAAE,CAAC;IAC/C,CAAC;IAEQ,kBAAkB,CAAC,CAAe;QACzC,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC;QAC5B,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;IACzB,CAAC;IAES,aAAa;QACrB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO;SACR;QAED,yEAAyE;QACzE,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACpB,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE;YACrC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CAAC,CAAC;IACN,CAAC;CACF;AA9QiB;IAAf,KAAK,CAAC,OAAO,CAAC;8BAAyB,gBAAgB;0CAAC;AAErC;IAAnB,KAAK,CAAC,WAAW,CAAC;8BAAU,QAAQ;qCAAC;AAI7B;IAAR,KAAK,EAAE;;4CAAiC;AAEd;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;;qCAAgB;AAG1C;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;;;oCAGxC;AA4C0B;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;;uCAA2B;AAE3B;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;;oCAAc;AAEb;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;;mCAAW;AAOT;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;;iDAA4B;AAQ5B;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;;kDAAyB;AAEzC;IAAR,KAAK,EAAE;;sCAA2B;AAInC;IAFC,YAAY,CAAE,wCAAwC;;IACtD,QAAQ,CAAC,EAAC,SAAS,EAAE,iBAAiB,EAAE,UAAU,EAAE,IAAI,EAAC,CAAC;;wCAC/B;AAI5B;IAFC,YAAY,CAAE,wCAAwC;;IACtD,QAAQ,CAAC,EAAC,SAAS,EAAE,sBAAsB,EAAE,UAAU,EAAE,IAAI,EAAC,CAAC;;6CACxC;AAKxB;IAHC,YAAY,CAAE,wCAAwC;;IACtD,QAAQ,CACL,EAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,uBAAuB,EAAE,UAAU,EAAE,IAAI,EAAC,CAAC;;8CACtC","sourcesContent":["/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// Style preference for leading underscores.\n// tslint:disable:strip-private-property-underscore\n\nimport '../../focus/focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, PropertyValues, TemplateResult} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\n\nimport {ActionElement, BeginPressConfig, EndPressConfig} from '../../actionelement/action-element.js';\nimport {ariaProperty} from '../../decorators/aria-property.js';\nimport {pointerPress, shouldShowStrongFocus} from '../../focus/strong-focus.js';\nimport {MdRipple} from '../../ripple/ripple.js';\n\nimport {SingleSelectionController} from './single-selection-controller.js';\n\n/**\n * @fires checked\n * @soyCompatible\n */\nexport class Radio extends ActionElement {\n  @query('input') protected formElement!: HTMLInputElement;\n\n  @query('md-ripple') ripple!: MdRipple;\n\n  protected _checked = false;\n\n  @state() protected showFocusRing = false;\n\n  @property({type: Boolean}) global = false;\n\n  @property({type: Boolean, reflect: true})\n  get checked(): boolean {\n    return this.getChecked();\n  }\n\n  protected getChecked(): boolean {\n    return this._checked;\n  }\n\n  /**\n   * We define our own getter/setter for `checked` because we need to track\n   * changes to it synchronously.\n   *\n   * The order in which the `checked` property is set across radio buttons\n   * within the same group is very important. However, we can't rely on\n   * UpdatingElement's `updated` callback to observe these changes (which is\n   * also what the `@observer` decorator uses), because it batches changes to\n   * all properties.\n   *\n   * Consider:\n   *\n   *   radio1.disabled = true;\n   *   radio2.checked = true;\n   *   radio1.checked = true;\n   *\n   * In this case we'd first see all changes for radio1, and then for radio2,\n   * and we couldn't tell that radio1 was the most recently checked.\n   */\n  set checked(isChecked: boolean) {\n    this.setChecked(isChecked);\n  }\n\n  protected setChecked(isChecked: boolean) {\n    const oldValue = this._checked;\n    if (isChecked === oldValue) {\n      return;\n    }\n    this._checked = isChecked;\n    this.selectionController?.update(this);\n\n    this.requestUpdate('checked', oldValue);\n\n    // useful when unchecks self and wrapping element needs to synchronize\n    // TODO(b/168543810): Remove triggering event on programmatic API call.\n    this.dispatchEvent(new Event('checked', {bubbles: true, composed: true}));\n  }\n\n  @property({type: Boolean}) override disabled = false;\n\n  @property({type: String}) value = 'on';\n\n  @property({type: String}) name = '';\n\n  /**\n   * Touch target extends beyond visual boundary of a component by default.\n   * Set to `true` to remove touch target added to the component.\n   * @see https://material.io/design/usability/accessibility.html\n   */\n  @property({type: Boolean}) reducedTouchTarget = false;\n\n  protected selectionController?: SingleSelectionController;\n\n  /**\n   * input's tabindex is updated based on checked status.\n   * Tab navigation will be removed from unchecked radios.\n   */\n  @property({type: Number}) formElementTabIndex = 0;\n\n  @state() protected focused = false;\n\n  @ariaProperty  // tslint:disable-line:no-new-decorators\n  @property({attribute: 'data-aria-label', noAccessor: true})\n  override ariaLabel!: string;\n\n  @ariaProperty  // tslint:disable-line:no-new-decorators\n  @property({attribute: 'data-aria-labelledby', noAccessor: true})\n  ariaLabelledBy!: string;\n\n  @ariaProperty  // tslint:disable-line:no-new-decorators\n  @property(\n      {type: String, attribute: 'data-aria-describedby', noAccessor: true})\n  ariaDescribedBy!: undefined|string;\n\n  protected rippleElement: MdRipple|null = null;\n\n  /** @soyTemplate */\n  protected renderRipple(): TemplateResult|string {\n    return html`<md-ripple unbounded\n        ?disabled=\"${this.disabled}\"></md-ripple>`;\n  }\n\n  /** @soyTemplate */\n  protected renderFocusRing(): TemplateResult {\n    return html`<md-focus-ring .visible=\"${\n        this.showFocusRing}\"></md-focus-ring>`;\n  }\n\n  get isRippleActive() {\n    return false;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    // Note that we must defer creating the selection controller until the\n    // element has connected, because selection controllers are keyed by the\n    // radio's shadow root. For example, if we're stamping in a lit map\n    // or repeat, then we'll be constructed before we're added to a root node.\n    //\n    // Also note if we aren't using native shadow DOM, we still need a\n    // SelectionController, because we should update checked status of other\n    // radios in the group when selection changes. It also simplifies\n    // implementation and testing to use one in all cases.\n    //\n    // eslint-disable-next-line @typescript-eslint/no-use-before-define\n    this.selectionController = SingleSelectionController.getController(this);\n    this.selectionController.register(this);\n\n    // Radios maybe checked before connected, update selection as soon it is\n    // connected to DOM. Last checked radio button in the DOM will be selected.\n    //\n    // NOTE: If we update selection only after firstUpdate() we might mistakenly\n    // update checked status before other radios are rendered.\n    this.selectionController.update(this);\n  }\n\n  override disconnectedCallback() {\n    // The controller is initialized in connectedCallback, so if we are in\n    // disconnectedCallback then it must be initialized.\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n    this.selectionController!.unregister(this);\n    this.selectionController = undefined;\n  }\n\n  override updated(changedProperties: PropertyValues) {\n    if (changedProperties.has('checked') && this.formElement) {\n      this.formElement.checked = this.checked;\n      if (!this.checked) {\n        // Remove focus ring when unchecked on other radio programmatically.\n        // Blur on input since this determines the focus style.\n        this.formElement?.blur();\n      }\n    }\n  }\n\n  protected createAdapter() {}\n\n  override beginPress({positionEvent}: BeginPressConfig) {\n    this.ripple.beginPress(positionEvent);\n  }\n\n  override endPress({cancelled}: EndPressConfig) {\n    this.ripple.endPress();\n\n    if (cancelled) {\n      return;\n    }\n\n    super.endPress({\n      cancelled,\n      actionData:\n          {checked: this.formElement.checked, value: this.formElement.value}\n    });\n  }\n\n  override click() {\n    this.formElement.focus();\n    this.formElement.click();\n  }\n\n  protected handleFocus() {\n    this.focused = true;\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  protected handleBlur() {\n    this.focused = false;\n    this.showFocusRing = false;\n  }\n\n  protected setFormData(formData: FormData) {\n    if (this.name && this.checked) {\n      formData.append(this.name, this.value);\n    }\n  }\n\n  /**\n   * @soyTemplate\n   * @soyAttributes radioAttributes: input\n   * @soyClasses radioClasses: .md3-radio\n   */\n  protected override render(): TemplateResult {\n    /** @classMap */\n    const classes = {\n      'md3-radio--touch': !this.reducedTouchTarget,\n      'md3-ripple-upgraded--background-focused': this.focused,\n      'md3-radio--disabled': this.disabled,\n    };\n\n    return html`\n      <div class=\"md3-radio ${classMap(classes)}\">\n        ${this.renderFocusRing()}\n        <input\n          tabindex=\"${this.formElementTabIndex}\"\n          class=\"md3-radio__native-control\"\n          type=\"radio\"\n          name=\"${this.name}\"\n          aria-label=\"${ifDefined(this.ariaLabel)}\"\n          aria-labelledby=\"${ifDefined(this.ariaLabelledBy)}\"\n          aria-describedby=\"${ifDefined(this.ariaDescribedBy)}\"\n          ?checked=\"${this.checked}\"\n          .value=\"${this.value}\"\n          ?disabled=\"${this.disabled}\"\n          @change=\"${this.changeHandler}\"\n          @focus=\"${this.handleFocus}\"\n          @click=\"${this.handleClick}\"\n          @blur=\"${this.handleBlur}\"\n          @pointerenter=${this.handlePointerEnter}\n          @pointerdown=${this.handlePointerDown}\n          @pointerup=${this.handlePointerUp}\n          @pointercancel=${this.handlePointerCancel}\n          @pointerleave=${this.handlePointerLeave}\n          >\n        <div class=\"md3-radio__background\">\n          <div class=\"md3-radio__outer-circle\"></div>\n          <div class=\"md3-radio__inner-circle\"></div>\n        </div>\n        <div class=\"md3-radio__ripple\">\n          ${this.renderRipple()}\n        </div>\n      </div>`;\n  }\n\n  protected handlePointerEnter() {\n    this.ripple.beginHover();\n  }\n\n  override handlePointerDown(event: PointerEvent) {\n    super.handlePointerDown(event);\n\n    pointerPress();\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  override handlePointerLeave(e: PointerEvent) {\n    super.handlePointerLeave(e);\n    this.ripple.endHover();\n  }\n\n  protected changeHandler() {\n    if (this.disabled) {\n      return;\n    }\n\n    // Per spec, the change event on a radio input always represents checked.\n    this.checked = true;\n    this.dispatchEvent(new Event('change', {\n      bubbles: true,\n      composed: true,\n    }));\n  }\n}\n"]}

package/ripple/_ripple-theme.scss

@@ -1,6 +1,17 @@
 //
-// Copyright 2021 Google LLC
+// Copyright 2022 Google LLC
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@forward './lib/ripple-theme' show values, theme;
+// TODO(b/262006953): delete this file in favor of _ripple.scss
+
+@use 'sass:map';
+@use '../sass/theme';
+@use './lib/md-comp-ripple';
+
+@mixin theme($theme) {
+  $theme: theme.validate-theme(md-comp-ripple.values(), $theme);
+  $theme: theme.create-theme-vars($theme, ripple);
+
+  @include theme.emit-theme-vars($theme);
+}

package/ripple/_ripple.scss

@@ -0,0 +1,6 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './lib/ripple' show theme;

package/ripple/directive.d.ts

@@ -0,0 +1,63 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Directive, DirectiveParameters, ElementPart, PartInfo } from 'lit/directive.js';
+import { Ripple } from './lib/ripple.js';
+/**
+ * Normalized ripple accessor type.
+ *
+ * Use with `await rippleFunction()`
+ */
+declare type RippleFunction = () => Ripple | null | Promise<Ripple | null>;
+declare class RippleDirective extends Directive {
+    private rippleGetter;
+    private element?;
+    private state;
+    private checkBoundsAfterContextMenu;
+    private rippleStartEvent;
+    private touchTimer;
+    private clickTimer;
+    constructor(partInfo: PartInfo);
+    render(ripple: RippleFunction | Promise<Ripple | null>): symbol;
+    handleEvent(event: Event): Promise<void>;
+    update(part: ElementPart, [ripple]: DirectiveParameters<this>): symbol;
+    /**
+     * Returns `true` if
+     *  - the ripple element is enabled
+     *  - the pointer is primary for the input type
+     *  - the pointer is the pointer that started the interaction, or will start
+     * the interaction
+     *  - the pointer is a touch, or the pointer state has the primary button
+     * held, or the pointer is hovering
+     */
+    private shouldReactToEvent;
+    private isTouch;
+    /**
+     * Check if the event is within the bounds of the element.
+     *
+     * This is only needed for the "stuck" contextmenu longpress on Chrome.
+     */
+    private inBounds;
+    private beginPress;
+    private endPress;
+    private waitForTouchHold;
+    private click;
+    private contextMenu;
+    private pointerDown;
+    private pointerUp;
+    private pointerCancel;
+    private pointerEnter;
+    private pointerLeave;
+}
+/**
+ * Connects a Ripple element to a node that drives the interaction
+ *
+ * @param rippleGetter A function that returns an `md-ripple` element
+ * @param simulateKeyboardClick For elements that do not issue a click on
+ *     keyboard interaction, pass `true` to enable press animations on Enter or
+ *     Spacebar
+ */
+export declare const ripple: (ripple: Promise<Ripple> | RippleFunction) => import("lit-html/directive.js").DirectiveResult<typeof RippleDirective>;
+export {};