@material/web 1.0.0-pre.1 → 1.0.0-pre.11

package/menu/sub-menu-item.js

@@ -0,0 +1,65 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { styles as listItemForcedColorsStyles } from '../list/lib/listitem/forced-colors-styles.css.js';
+import { styles as listItemStyles } from '../list/lib/listitem/list-item-styles.css.js';
+import { styles as forcedColorsStyles } from './lib/menuitem/forced-colors-styles.css.js';
+import { styles } from './lib/menuitem/menu-item-styles.css.js';
+import { SubMenuItem } from './lib/submenuitem/sub-menu-item.js';
+export { CloseMenuEvent, DeactivateItemsEvent } from './lib/shared.js';
+/**
+ * @summary Menus display a list of choices on a temporary surface.
+ *
+ * @description
+ * Menu items are the selectable choices within the menu. Menu items must
+ * implement the `MenuItem` interface and also have the `md-menu-item`
+ * attribute. Additionally menu items are list items so they must also have the
+ * `md-list-item` attribute.
+ *
+ * Menu items can control a menu by selectively firing the `close-menu` and
+ * `deselect-items` events.
+ *
+ * This menu item will open a sub-menu that is slotted in the `submenu` slot.
+ * Additionally, the containing menu must either have `has-overflow` or `fixed`
+ * set to `true` in order to display the containing menu properly.
+ *
+ * @example
+ * ```html
+ * <div style="position:relative;">
+ *   <button
+ *       class="anchor"
+ *       ${ref(anchorRef)}
+ *       @click=${() => this.menuRef.value.show()}>
+ *     Click to open menu
+ *   </button>
+ *   <!--
+ *     `has-overflow` is required when using a submenu which overflows the
+ *     menu's contents
+ *   -->
+ *   <md-menu has-overflow ${ref(menuRef)} ${(el) => el.anchor =
+ * anchorRef.value}> <md-menu-item header="This is a header"></md-menu-item>
+ *     <md-sub-menu-item header="this is a submenu item">
+ *       <md-menu slot="submenu">
+ *         <md-menu-item
+ *           header="This is an item inside a submenu"></md-menu-item>
+ *       </md-menu>
+ *     </md-sub-menu>
+ *   </md-menu>
+ * </div>
+ * ```
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdSubMenuItem = class MdSubMenuItem extends SubMenuItem {
+};
+MdSubMenuItem.styles = [listItemStyles, styles, listItemForcedColorsStyles, forcedColorsStyles];
+MdSubMenuItem = __decorate([
+    customElement('md-sub-menu-item')
+], MdSubMenuItem);
+export { MdSubMenuItem };
+//# sourceMappingURL=sub-menu-item.js.map

package/menu/sub-menu-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sub-menu-item.js","sourceRoot":"","sources":["sub-menu-item.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,0BAA0B,EAAC,MAAM,kDAAkD,CAAC;AACtG,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,8CAA8C,CAAC;AAEtF,OAAO,EAAC,MAAM,IAAI,kBAAkB,EAAC,MAAM,4CAA4C,CAAC;AACxF,OAAO,EAAC,MAAM,EAAC,MAAM,wCAAwC,CAAC;AAC9D,OAAO,EAAC,WAAW,EAAC,MAAM,oCAAoC,CAAC;AAG/D,OAAO,EAAC,cAAc,EAAE,oBAAoB,EAAW,MAAM,iBAAiB,CAAC;AAQ/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AAEI,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,WAAW;;AAC5B,oBAAM,GAClB,CAAC,cAAc,EAAE,MAAM,EAAE,0BAA0B,EAAE,kBAAkB,CAAC,CAAC;AAFlE,aAAa;IADzB,aAAa,CAAC,kBAAkB,CAAC;GACrB,aAAa,CAGzB;SAHY,aAAa","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles as listItemForcedColorsStyles} from '../list/lib/listitem/forced-colors-styles.css.js';\nimport {styles as listItemStyles} from '../list/lib/listitem/list-item-styles.css.js';\n\nimport {styles as forcedColorsStyles} from './lib/menuitem/forced-colors-styles.css.js';\nimport {styles} from './lib/menuitem/menu-item-styles.css.js';\nimport {SubMenuItem} from './lib/submenuitem/sub-menu-item.js';\n\nexport {ListItem} from '../list/lib/listitem/list-item.js';\nexport {CloseMenuEvent, DeactivateItemsEvent, MenuItem} from './lib/shared.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-sub-menu-item': MdSubMenuItem;\n  }\n}\n\n/**\n * @summary Menus display a list of choices on a temporary surface.\n *\n * @description\n * Menu items are the selectable choices within the menu. Menu items must\n * implement the `MenuItem` interface and also have the `md-menu-item`\n * attribute. Additionally menu items are list items so they must also have the\n * `md-list-item` attribute.\n *\n * Menu items can control a menu by selectively firing the `close-menu` and\n * `deselect-items` events.\n *\n * This menu item will open a sub-menu that is slotted in the `submenu` slot.\n * Additionally, the containing menu must either have `has-overflow` or `fixed`\n * set to `true` in order to display the containing menu properly.\n *\n * @example\n * ```html\n * <div style=\"position:relative;\">\n *   <button\n *       class=\"anchor\"\n *       ${ref(anchorRef)}\n *       @click=${() => this.menuRef.value.show()}>\n *     Click to open menu\n *   </button>\n *   <!--\n *     `has-overflow` is required when using a submenu which overflows the\n *     menu's contents\n *   -->\n *   <md-menu has-overflow ${ref(menuRef)} ${(el) => el.anchor =\n * anchorRef.value}> <md-menu-item header=\"This is a header\"></md-menu-item>\n *     <md-sub-menu-item header=\"this is a submenu item\">\n *       <md-menu slot=\"submenu\">\n *         <md-menu-item\n *           header=\"This is an item inside a submenu\"></md-menu-item>\n *       </md-menu>\n *     </md-sub-menu>\n *   </md-menu>\n * </div>\n * ```\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-sub-menu-item')\nexport class MdSubMenuItem extends SubMenuItem {\n  static override styles =\n      [listItemStyles, styles, listItemForcedColorsStyles, forcedColorsStyles];\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@material/web",
-  "version": "1.0.0-pre.1",
+  "version": "1.0.0-pre.11",
   "publishConfig": {
     "access": "public"
   },
@@ -19,7 +19,8 @@
     "build:ts": "wireit",
     "build:css-to-ts": "wireit",
     "build:sass": "wireit",
-    "test": "wireit"
+    "test": "wireit",
+    "build:catalog": "wireit"
   },
   "type": "module",
   "files": [
@@ -32,30 +33,29 @@
     "!**/test/**",
     "!**/testing/**",
     "!**/*_test.*",
-    "!.wireit/**"
+    "!.wireit/**",
+    "!catalog"
+  ],
+  "workspaces": [
+    ".",
+    "catalog"
   ],
   "dependencies": {
-    "lit": "^2.3.0",
+    "lit": "^2.7.4",
+    "safevalues": "^0.4.3",
     "tslib": "^2.4.0"
   },
   "devDependencies": {
-    "@commitlint/config-conventional": "^17.3.0",
     "@types/jasmine": "^4.0.3",
     "@web/test-runner": "^0.15.0",
     "@web/test-runner-playwright": "^0.9.0",
-    "commitlint": "^17.3.0",
     "jasmine": "^4.5.0",
     "sass": "^1.52.3",
     "sass-true": "^6.1.0",
-    "typescript": "~4.7.4",
+    "typescript": "4.9.4",
     "web-test-runner-jasmine": "^0.0.2",
     "wireit": "^0.9.0"
   },
-  "commitlint": {
-    "extends": [
-      "@commitlint/config-conventional"
-    ]
-  },
   "wireit": {
     "build": {
       "dependencies": [
@@ -68,7 +68,8 @@
         "tsconfig.json",
         "**/*.ts",
         "!**/*.d.ts",
-        "!**/*.css.ts"
+        "!**/*.css.ts",
+        "!catalog"
       ],
       "output": [
         ".tsbuildinfo",
@@ -76,7 +77,8 @@
         "**/*.js.map",
         "**/*.d.ts",
         "!*.js",
-        "!types/"
+        "!types/",
+        "!catalog"
       ],
       "clean": "if-file-deleted",
       "dependencies": [
@@ -84,12 +86,13 @@
       ]
     },
     "build:css-to-ts": {
-      "command": "find . \\( -path ./.wireit -o -path ./node_modules \\) -prune -o -name '*.css' -print | xargs node css-to-ts.js",
+      "command": "find . \\( -path ./.wireit -o -path ./node_modules -o -path ./catalog \\) -prune -o -name '*.css' -print | xargs node css-to-ts.js",
       "files": [
         "css-to-ts.js"
       ],
       "output": [
-        "**/*.css.ts"
+        "**/*.css.ts",
+        "!catalog"
       ],
       "dependencies": [
         "build:sass"
@@ -102,7 +105,8 @@
       ],
       "output": [
         "**/*.css",
-        "**/*.css.map"
+        "**/*.css.map",
+        "!catalog"
       ]
     },
     "test": {
@@ -114,6 +118,11 @@
         "web-test-runner.config.js"
       ],
       "output": []
+    },
+    "build:catalog": {
+      "dependencies": [
+        "./catalog:build:prod"
+      ]
     }
   }
-}
+}

package/radio/lib/_radio.scss

@@ -3,47 +3,53 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
+// go/keep-sorted start
+@use 'sass:list';
 @use 'sass:map';
+// go/keep-sorted end
+// go/keep-sorted start
 @use '../../focus/focus-ring';
-@use '../../motion/animation';
+@use '../../internal/motion/animation';
 @use '../../ripple/ripple';
-@use '../../sass/theme';
 @use '../../tokens';
+// go/keep-sorted end
 
 $_md-sys-motion: tokens.md-sys-motion-values();
 
 @mixin theme($tokens) {
-  $tokens: theme.validate-theme(tokens.md-comp-radio-button-values(), $tokens);
-  $tokens: theme.create-theme-vars($tokens, 'radio');
+  $supported-tokens: tokens.$md-comp-radio-button-supported-tokens;
 
-  @include theme.emit-theme-vars($tokens);
+  @each $token, $value in $tokens {
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Token `#{$token}` is not a supported token.';
+    }
+
+    @if $value {
+      --md-radio-#{$token}: #{$value};
+    }
+  }
 }
 
 @mixin styles() {
   $tokens: tokens.md-comp-radio-button-values();
-  $tokens: theme.create-theme-vars($tokens, 'radio');
 
   :host {
     @each $token, $value in $tokens {
-      --_#{$token}: #{$value};
+      --_#{$token}: var(--md-radio-#{$token}, #{$value});
     }
 
     @include ripple.theme(
       (
-        focus-state-layer-color: var(--_unselected-focus-state-layer-color),
-        focus-state-layer-opacity: var(--_unselected-focus-state-layer-opacity),
-        hover-state-layer-color: var(--_unselected-hover-state-layer-color),
-        hover-state-layer-opacity: var(--_unselected-hover-state-layer-opacity),
-        pressed-state-layer-color: var(--_unselected-pressed-state-layer-color),
-        pressed-state-layer-opacity:
-          var(--_unselected-pressed-state-layer-opacity),
+        hover-color: var(--_unselected-hover-state-layer-color),
+        hover-opacity: var(--_unselected-hover-state-layer-opacity),
+        pressed-color: var(--_unselected-pressed-state-layer-color),
+        pressed-opacity: var(--_unselected-pressed-state-layer-opacity),
       )
     );
 
     @include focus-ring.theme(
       (
-        offset-vertical: -2px,
-        offset-horizontal: -2px,
+        'outward-offset': -2px,
       )
     );
 
@@ -56,23 +62,18 @@ $_md-sys-motion: tokens.md-sys-motion-values();
     -webkit-tap-highlight-color: transparent;
   }
 
-  :host([checked]) {
+  .checked {
     @include ripple.theme(
       (
-        focus-state-layer-color: var(--_selected-focus-state-layer-color),
-        focus-state-layer-opacity: var(--_selected-focus-state-layer-opacity),
-        hover-state-layer-color: var(--_selected-hover-state-layer-color),
-        hover-state-layer-opacity: var(--_selected-hover-state-layer-opacity),
-        pressed-state-layer-color: var(--_selected-pressed-state-layer-color),
-        pressed-state-layer-opacity:
-          var(--_selected-pressed-state-layer-opacity),
+        hover-color: var(--_selected-hover-state-layer-color),
+        hover-opacity: var(--_selected-hover-state-layer-opacity),
+        pressed-color: var(--_selected-pressed-state-layer-color),
+        pressed-opacity: var(--_selected-pressed-state-layer-opacity),
       )
     );
   }
 
   input,
-  md-ripple,
-  md-focus-ring,
   .icon {
     inset: 0;
     margin: auto;
@@ -85,6 +86,7 @@ $_md-sys-motion: tokens.md-sys-motion-values();
   }
 
   md-ripple {
+    border-radius: 50%;
     height: var(--_state-layer-size);
     width: var(--_state-layer-size);
   }
@@ -106,11 +108,11 @@ $_md-sys-motion: tokens.md-sys-motion-values();
     transition: opacity 50ms linear;
   }
 
-  :host([checked]) .icon {
+  .checked .icon {
     fill: var(--_selected-icon-color);
   }
 
-  :host([checked]) .inner.circle {
+  .checked .inner.circle {
     animation: inner-circle-grow 300ms
       map.get($_md-sys-motion, easing-emphasized-decelerate);
     opacity: 1;
@@ -148,19 +150,19 @@ $_md-sys-motion: tokens.md-sys-motion-values();
     opacity: var(--_disabled-unselected-icon-opacity);
   }
 
-  :host([checked]:hover) .icon {
+  :host(:hover) .checked .icon {
     fill: var(--_selected-hover-icon-color);
   }
 
-  :host([checked]:focus-within) .icon {
+  :host(:focus-within) .checked .icon {
     fill: var(--_selected-focus-icon-color);
   }
 
-  :host([checked]:active) .icon {
+  :host(:active) .checked .icon {
     fill: var(--_selected-pressed-icon-color);
   }
 
-  :host([checked][disabled]) .icon {
+  :host([disabled]) .checked .icon {
     fill: var(--_disabled-selected-icon-color);
     opacity: var(--_disabled-selected-icon-opacity);
   }

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

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

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

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

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

@@ -3,7 +3,9 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
+// go/keep-sorted start
 @use './radio';
+// go/keep-sorted end
 
 @media (forced-colors: active) {
   :host {

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{--_disabled-selected-icon-color: var(--md-radio-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-selected-icon-opacity: var(--md-radio-disabled-selected-icon-opacity, 0.38);--_disabled-unselected-icon-color: var(--md-radio-disabled-unselected-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-unselected-icon-opacity: var(--md-radio-disabled-unselected-icon-opacity, 0.38);--_icon-size: var(--md-radio-icon-size, 20px);--_selected-focus-icon-color: var(--md-radio-selected-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-focus-state-layer-color: var(--md-radio-selected-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-focus-state-layer-opacity: var(--md-radio-selected-focus-state-layer-opacity, 0.12);--_selected-hover-icon-color: var(--md-radio-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-color: var(--md-radio-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-opacity: var(--md-radio-selected-hover-state-layer-opacity, 0.08);--_selected-icon-color: var(--md-radio-selected-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-icon-color: var(--md-radio-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-state-layer-color: var(--md-radio-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_selected-pressed-state-layer-opacity: var(--md-radio-selected-pressed-state-layer-opacity, 0.12);--_state-layer-size: var(--md-radio-state-layer-size, 40px);--_unselected-focus-icon-color: var(--md-radio-unselected-focus-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-focus-state-layer-color: var(--md-radio-unselected-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-focus-state-layer-opacity: var(--md-radio-unselected-focus-state-layer-opacity, 0.12);--_unselected-hover-icon-color: var(--md-radio-unselected-hover-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-hover-state-layer-color: var(--md-radio-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-hover-state-layer-opacity: var(--md-radio-unselected-hover-state-layer-opacity, 0.08);--_unselected-icon-color: var(--md-radio-unselected-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-pressed-icon-color: var(--md-radio-unselected-pressed-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-pressed-state-layer-color: var(--md-radio-unselected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_unselected-pressed-state-layer-opacity: var(--md-radio-unselected-pressed-state-layer-opacity, 0.12);--md-ripple-focus-state-layer-color:var(--_unselected-focus-state-layer-color);--md-ripple-focus-state-layer-opacity:var(--_unselected-focus-state-layer-opacity);--md-ripple-hover-state-layer-color:var(--_unselected-hover-state-layer-color);--md-ripple-hover-state-layer-opacity:var(--_unselected-hover-state-layer-opacity);--md-ripple-pressed-state-layer-color:var(--_unselected-pressed-state-layer-color);--md-ripple-pressed-state-layer-opacity:var(--_unselected-pressed-state-layer-opacity);--md-focus-ring-offset-vertical:-2px;--md-focus-ring-offset-horizontal:-2px;display:inline-flex;height:48px;position:relative;vertical-align:top;width:48px;-webkit-tap-highlight-color:rgba(0,0,0,0)}:host([checked]){--md-ripple-focus-state-layer-color:var(--_selected-focus-state-layer-color);--md-ripple-focus-state-layer-opacity:var(--_selected-focus-state-layer-opacity);--md-ripple-hover-state-layer-color:var(--_selected-hover-state-layer-color);--md-ripple-hover-state-layer-opacity:var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-state-layer-color:var(--_selected-pressed-state-layer-color);--md-ripple-pressed-state-layer-opacity:var(--_selected-pressed-state-layer-opacity)}input,md-ripple,md-focus-ring,.icon{inset:0;margin:auto;position:absolute}input{appearance:none;outline:none}md-ripple{height:var(--_state-layer-size);width:var(--_state-layer-size)}.icon{fill:var(--_unselected-icon-color);height:var(--_icon-size);width:var(--_icon-size)}.outer.circle{transition:fill 50ms linear}.inner.circle{opacity:0;transform-origin:center;transition:opacity 50ms linear}:host([checked]) .icon{fill:var(--_selected-icon-color)}:host([checked]) .inner.circle{animation:inner-circle-grow 300ms cubic-bezier(0.05, 0.7, 0.1, 1);opacity:1}@keyframes inner-circle-grow{from{transform:scale(0)}to{transform:scale(1)}}:host([disabled]) .circle{animation-duration:0s;transition-duration:0s}:host(:hover) .icon{fill:var(--_unselected-hover-icon-color)}:host(:focus-within) .icon{fill:var(--_unselected-focus-icon-color)}:host(:active) .icon{fill:var(--_unselected-pressed-icon-color)}:host([disabled]) .icon{fill:var(--_disabled-unselected-icon-color);opacity:var(--_disabled-unselected-icon-opacity)}:host([checked]:hover) .icon{fill:var(--_selected-hover-icon-color)}:host([checked]:focus-within) .icon{fill:var(--_selected-focus-icon-color)}:host([checked]:active) .icon{fill:var(--_selected-pressed-icon-color)}:host([checked][disabled]) .icon{fill:var(--_disabled-selected-icon-color);opacity:var(--_disabled-selected-icon-opacity)}/*# sourceMappingURL=radio-styles.css.map */
+export const styles = css `:host{--_disabled-selected-icon-color: var(--md-radio-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-icon-opacity: var(--md-radio-disabled-selected-icon-opacity, 0.38);--_disabled-unselected-icon-color: var(--md-radio-disabled-unselected-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-unselected-icon-opacity: var(--md-radio-disabled-unselected-icon-opacity, 0.38);--_icon-size: var(--md-radio-icon-size, 20px);--_selected-focus-icon-color: var(--md-radio-selected-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-icon-color: var(--md-radio-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-color: var(--md-radio-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-opacity: var(--md-radio-selected-hover-state-layer-opacity, 0.08);--_selected-icon-color: var(--md-radio-selected-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-icon-color: var(--md-radio-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-state-layer-color: var(--md-radio-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_selected-pressed-state-layer-opacity: var(--md-radio-selected-pressed-state-layer-opacity, 0.12);--_state-layer-size: var(--md-radio-state-layer-size, 40px);--_unselected-focus-icon-color: var(--md-radio-unselected-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-icon-color: var(--md-radio-unselected-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-state-layer-color: var(--md-radio-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-state-layer-opacity: var(--md-radio-unselected-hover-state-layer-opacity, 0.08);--_unselected-icon-color: var(--md-radio-unselected-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-pressed-icon-color: var(--md-radio-unselected-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-state-layer-color: var(--md-radio-unselected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_unselected-pressed-state-layer-opacity: var(--md-radio-unselected-pressed-state-layer-opacity, 0.12);--md-ripple-hover-color: var(--_unselected-hover-state-layer-color);--md-ripple-hover-opacity: var(--_unselected-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_unselected-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_unselected-pressed-state-layer-opacity);--md-focus-ring-outward-offset: -2px;display:inline-flex;height:48px;position:relative;vertical-align:top;width:48px;-webkit-tap-highlight-color:rgba(0,0,0,0)}.checked{--md-ripple-hover-color: var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity: var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_selected-pressed-state-layer-opacity)}input,.icon{inset:0;margin:auto;position:absolute}input{appearance:none;outline:none}md-ripple{border-radius:50%;height:var(--_state-layer-size);width:var(--_state-layer-size)}.icon{fill:var(--_unselected-icon-color);height:var(--_icon-size);width:var(--_icon-size)}.outer.circle{transition:fill 50ms linear}.inner.circle{opacity:0;transform-origin:center;transition:opacity 50ms linear}.checked .icon{fill:var(--_selected-icon-color)}.checked .inner.circle{animation:inner-circle-grow 300ms cubic-bezier(0.05, 0.7, 0.1, 1);opacity:1}@keyframes inner-circle-grow{from{transform:scale(0)}to{transform:scale(1)}}:host([disabled]) .circle{animation-duration:0s;transition-duration:0s}:host(:hover) .icon{fill:var(--_unselected-hover-icon-color)}:host(:focus-within) .icon{fill:var(--_unselected-focus-icon-color)}:host(:active) .icon{fill:var(--_unselected-pressed-icon-color)}:host([disabled]) .icon{fill:var(--_disabled-unselected-icon-color);opacity:var(--_disabled-unselected-icon-opacity)}:host(:hover) .checked .icon{fill:var(--_selected-hover-icon-color)}:host(:focus-within) .checked .icon{fill:var(--_selected-focus-icon-color)}:host(:active) .checked .icon{fill:var(--_selected-pressed-icon-color)}:host([disabled]) .checked .icon{fill:var(--_disabled-selected-icon-color);opacity:var(--_disabled-selected-icon-opacity)}/*# sourceMappingURL=radio-styles.css.map */
 `;
 //# 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{--_disabled-selected-icon-color: var(--md-radio-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-selected-icon-opacity: var(--md-radio-disabled-selected-icon-opacity, 0.38);--_disabled-unselected-icon-color: var(--md-radio-disabled-unselected-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-unselected-icon-opacity: var(--md-radio-disabled-unselected-icon-opacity, 0.38);--_icon-size: var(--md-radio-icon-size, 20px);--_selected-focus-icon-color: var(--md-radio-selected-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-focus-state-layer-color: var(--md-radio-selected-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-focus-state-layer-opacity: var(--md-radio-selected-focus-state-layer-opacity, 0.12);--_selected-hover-icon-color: var(--md-radio-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-color: var(--md-radio-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-opacity: var(--md-radio-selected-hover-state-layer-opacity, 0.08);--_selected-icon-color: var(--md-radio-selected-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-icon-color: var(--md-radio-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-state-layer-color: var(--md-radio-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_selected-pressed-state-layer-opacity: var(--md-radio-selected-pressed-state-layer-opacity, 0.12);--_state-layer-size: var(--md-radio-state-layer-size, 40px);--_unselected-focus-icon-color: var(--md-radio-unselected-focus-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-focus-state-layer-color: var(--md-radio-unselected-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-focus-state-layer-opacity: var(--md-radio-unselected-focus-state-layer-opacity, 0.12);--_unselected-hover-icon-color: var(--md-radio-unselected-hover-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-hover-state-layer-color: var(--md-radio-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-hover-state-layer-opacity: var(--md-radio-unselected-hover-state-layer-opacity, 0.08);--_unselected-icon-color: var(--md-radio-unselected-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-pressed-icon-color: var(--md-radio-unselected-pressed-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-pressed-state-layer-color: var(--md-radio-unselected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_unselected-pressed-state-layer-opacity: var(--md-radio-unselected-pressed-state-layer-opacity, 0.12);--md-ripple-focus-state-layer-color:var(--_unselected-focus-state-layer-color);--md-ripple-focus-state-layer-opacity:var(--_unselected-focus-state-layer-opacity);--md-ripple-hover-state-layer-color:var(--_unselected-hover-state-layer-color);--md-ripple-hover-state-layer-opacity:var(--_unselected-hover-state-layer-opacity);--md-ripple-pressed-state-layer-color:var(--_unselected-pressed-state-layer-color);--md-ripple-pressed-state-layer-opacity:var(--_unselected-pressed-state-layer-opacity);--md-focus-ring-offset-vertical:-2px;--md-focus-ring-offset-horizontal:-2px;display:inline-flex;height:48px;position:relative;vertical-align:top;width:48px;-webkit-tap-highlight-color:rgba(0,0,0,0)}:host([checked]){--md-ripple-focus-state-layer-color:var(--_selected-focus-state-layer-color);--md-ripple-focus-state-layer-opacity:var(--_selected-focus-state-layer-opacity);--md-ripple-hover-state-layer-color:var(--_selected-hover-state-layer-color);--md-ripple-hover-state-layer-opacity:var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-state-layer-color:var(--_selected-pressed-state-layer-color);--md-ripple-pressed-state-layer-opacity:var(--_selected-pressed-state-layer-opacity)}input,md-ripple,md-focus-ring,.icon{inset:0;margin:auto;position:absolute}input{appearance:none;outline:none}md-ripple{height:var(--_state-layer-size);width:var(--_state-layer-size)}.icon{fill:var(--_unselected-icon-color);height:var(--_icon-size);width:var(--_icon-size)}.outer.circle{transition:fill 50ms linear}.inner.circle{opacity:0;transform-origin:center;transition:opacity 50ms linear}:host([checked]) .icon{fill:var(--_selected-icon-color)}:host([checked]) .inner.circle{animation:inner-circle-grow 300ms cubic-bezier(0.05, 0.7, 0.1, 1);opacity:1}@keyframes inner-circle-grow{from{transform:scale(0)}to{transform:scale(1)}}:host([disabled]) .circle{animation-duration:0s;transition-duration:0s}:host(:hover) .icon{fill:var(--_unselected-hover-icon-color)}:host(:focus-within) .icon{fill:var(--_unselected-focus-icon-color)}:host(:active) .icon{fill:var(--_unselected-pressed-icon-color)}:host([disabled]) .icon{fill:var(--_disabled-unselected-icon-color);opacity:var(--_disabled-unselected-icon-opacity)}:host([checked]:hover) .icon{fill:var(--_selected-hover-icon-color)}:host([checked]:focus-within) .icon{fill:var(--_selected-focus-icon-color)}:host([checked]:active) .icon{fill:var(--_selected-pressed-icon-color)}:host([checked][disabled]) .icon{fill:var(--_disabled-selected-icon-color);opacity:var(--_disabled-selected-icon-opacity)}/*# sourceMappingURL=radio-styles.css.map */\n`;\n "]}
+{"version":3,"file":"radio-styles.css.js","sourceRoot":"","sources":["radio-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_disabled-selected-icon-color: var(--md-radio-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-icon-opacity: var(--md-radio-disabled-selected-icon-opacity, 0.38);--_disabled-unselected-icon-color: var(--md-radio-disabled-unselected-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-unselected-icon-opacity: var(--md-radio-disabled-unselected-icon-opacity, 0.38);--_icon-size: var(--md-radio-icon-size, 20px);--_selected-focus-icon-color: var(--md-radio-selected-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-icon-color: var(--md-radio-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-color: var(--md-radio-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-opacity: var(--md-radio-selected-hover-state-layer-opacity, 0.08);--_selected-icon-color: var(--md-radio-selected-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-icon-color: var(--md-radio-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-state-layer-color: var(--md-radio-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_selected-pressed-state-layer-opacity: var(--md-radio-selected-pressed-state-layer-opacity, 0.12);--_state-layer-size: var(--md-radio-state-layer-size, 40px);--_unselected-focus-icon-color: var(--md-radio-unselected-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-icon-color: var(--md-radio-unselected-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-state-layer-color: var(--md-radio-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-state-layer-opacity: var(--md-radio-unselected-hover-state-layer-opacity, 0.08);--_unselected-icon-color: var(--md-radio-unselected-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-pressed-icon-color: var(--md-radio-unselected-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-state-layer-color: var(--md-radio-unselected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_unselected-pressed-state-layer-opacity: var(--md-radio-unselected-pressed-state-layer-opacity, 0.12);--md-ripple-hover-color: var(--_unselected-hover-state-layer-color);--md-ripple-hover-opacity: var(--_unselected-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_unselected-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_unselected-pressed-state-layer-opacity);--md-focus-ring-outward-offset: -2px;display:inline-flex;height:48px;position:relative;vertical-align:top;width:48px;-webkit-tap-highlight-color:rgba(0,0,0,0)}.checked{--md-ripple-hover-color: var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity: var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_selected-pressed-state-layer-opacity)}input,.icon{inset:0;margin:auto;position:absolute}input{appearance:none;outline:none}md-ripple{border-radius:50%;height:var(--_state-layer-size);width:var(--_state-layer-size)}.icon{fill:var(--_unselected-icon-color);height:var(--_icon-size);width:var(--_icon-size)}.outer.circle{transition:fill 50ms linear}.inner.circle{opacity:0;transform-origin:center;transition:opacity 50ms linear}.checked .icon{fill:var(--_selected-icon-color)}.checked .inner.circle{animation:inner-circle-grow 300ms cubic-bezier(0.05, 0.7, 0.1, 1);opacity:1}@keyframes inner-circle-grow{from{transform:scale(0)}to{transform:scale(1)}}:host([disabled]) .circle{animation-duration:0s;transition-duration:0s}:host(:hover) .icon{fill:var(--_unselected-hover-icon-color)}:host(:focus-within) .icon{fill:var(--_unselected-focus-icon-color)}:host(:active) .icon{fill:var(--_unselected-pressed-icon-color)}:host([disabled]) .icon{fill:var(--_disabled-unselected-icon-color);opacity:var(--_disabled-unselected-icon-opacity)}:host(:hover) .checked .icon{fill:var(--_selected-hover-icon-color)}:host(:focus-within) .checked .icon{fill:var(--_selected-focus-icon-color)}:host(:active) .checked .icon{fill:var(--_selected-pressed-icon-color)}:host([disabled]) .checked .icon{fill:var(--_disabled-selected-icon-color);opacity:var(--_disabled-selected-icon-opacity)}/*# sourceMappingURL=radio-styles.css.map */\n`;\n "]}

package/radio/lib/radio-styles.scss

@@ -3,6 +3,8 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
+// go/keep-sorted start
 @use './radio';
+// go/keep-sorted end
 
 @include radio.styles;

package/radio/lib/radio.d.ts

@@ -5,18 +5,25 @@
  */
 import '../../focus/focus-ring.js';
 import '../../ripple/ripple.js';
-import { LitElement, TemplateResult } from 'lit';
-import { getFormValue } from '../../controller/form-controller.js';
+import { LitElement } from 'lit';
 declare const CHECKED: unique symbol;
 /**
- * @fires checked
+ * A radio component.
  */
 export declare class Radio extends LitElement {
+    /** @nocollapse */
     static shadowRootOptions: ShadowRootInit;
+    /** @nocollapse */
     static formAssociated: boolean;
+    /**
+     * Whether or not the radio is selected.
+     */
     get checked(): boolean;
     set checked(checked: boolean);
     [CHECKED]: boolean;
+    /**
+     * Whether or not the radio is disabled.
+     */
     disabled: boolean;
     /**
      * The element value to use in form submission when checked.
@@ -25,27 +32,26 @@ export declare class Radio extends LitElement {
     /**
      * The HTML name to use in form submission.
      */
-    name: string;
-    ariaLabel: string;
+    get name(): string;
+    set name(name: string);
     /**
      * The associated form element with which this element's value will submit.
      */
     get form(): HTMLFormElement;
+    /**
+     * The labels this element is associated with.
+     */
+    get labels(): NodeList;
     private readonly input;
-    private readonly ripple;
     private readonly selectionController;
-    private showFocusRing;
-    private showRipple;
+    private readonly internals;
     constructor();
-    [getFormValue](): string;
     focus(): void;
-    protected render(): TemplateResult;
-    private handleBlur;
-    private handleFocus;
+    protected render(): import("lit-html").TemplateResult<1>;
     private handleChange;
-    private handlePointerDown;
-    private readonly getRipple;
-    private readonly renderRipple;
-    private renderFocusRing;
+    /** @private */
+    formResetCallback(): void;
+    /** @private */
+    formStateRestoreCallback(state: string): void;
 }
 export {};