@material/web 1.0.0 → 1.0.2-nightly.33c1afe.0

package/radio/internal/_radio.scss

@@ -33,153 +33,174 @@ $_md-sys-motion: tokens.md-sys-motion-values();
 @mixin styles() {
   $tokens: tokens.md-comp-radio-values();
 
-  :host {
-    @each $token, $value in $tokens {
-      --_#{$token}: var(--md-radio-#{$token}, #{$value});
-    }
-
-    @include ripple.theme(
-      (
-        hover-color: var(--_hover-state-layer-color),
-        hover-opacity: var(--_hover-state-layer-opacity),
-        pressed-color: var(--_pressed-state-layer-color),
-        pressed-opacity: var(--_pressed-state-layer-opacity),
-      )
-    );
-
-    display: inline-flex;
-    height: var(--_icon-size);
-    outline: none;
-    position: relative;
-    vertical-align: top; // Fix extra space when placed inside display: block
-    width: var(--_icon-size);
-    // Remove highlight color for mobile Safari
-    -webkit-tap-highlight-color: transparent;
-  }
+  @layer {
+    :host {
+      @each $token, $value in $tokens {
+        --_#{$token}: var(--md-radio-#{$token}, #{$value});
+      }
+
+      @include ripple.theme(
+        (
+          hover-color: var(--_hover-state-layer-color),
+          hover-opacity: var(--_hover-state-layer-opacity),
+          pressed-color: var(--_pressed-state-layer-color),
+          pressed-opacity: var(--_pressed-state-layer-opacity),
+        )
+      );
+
+      display: inline-flex;
+      height: var(--_icon-size);
+      outline: none;
+      position: relative;
+      vertical-align: top; // Fix extra space when placed inside display: block
+      width: var(--_icon-size);
+      // Remove highlight color for mobile Safari
+      -webkit-tap-highlight-color: transparent;
+      cursor: pointer;
+    }
 
-  :host([touch-target='wrapper']) {
-    margin: max(0px, ((48px - var(--_icon-size)) / 2));
-  }
+    :host([disabled]) {
+      cursor: default;
+    }
 
-  .container {
-    display: flex;
-    height: 100%;
-    place-content: center;
-    place-items: center;
-    width: 100%;
-  }
+    :host([touch-target='wrapper']) {
+      margin: max(0px, ((48px - var(--_icon-size)) / 2));
+    }
 
-  md-focus-ring {
-    height: 44px;
-    inset: unset;
-    width: 44px;
-  }
+    .container {
+      display: flex;
+      height: 100%;
+      place-content: center;
+      place-items: center;
+      width: 100%;
+    }
 
-  .checked {
-    @include ripple.theme(
-      (
-        hover-color: var(--_selected-hover-state-layer-color),
-        hover-opacity: var(--_selected-hover-state-layer-opacity),
-        pressed-color: var(--_selected-pressed-state-layer-color),
-        pressed-opacity: var(--_selected-pressed-state-layer-opacity),
-      )
-    );
-  }
+    md-focus-ring {
+      height: 44px;
+      inset: unset;
+      width: 44px;
+    }
 
-  // <input> is also the touch target
-  input {
-    appearance: none;
-    height: 48px;
-    margin: 0;
-    position: absolute;
-    width: 48px;
-  }
+    .checked {
+      @include ripple.theme(
+        (
+          hover-color: var(--_selected-hover-state-layer-color),
+          hover-opacity: var(--_selected-hover-state-layer-opacity),
+          pressed-color: var(--_selected-pressed-state-layer-color),
+          pressed-opacity: var(--_selected-pressed-state-layer-opacity),
+        )
+      );
+    }
 
-  :host([touch-target='none']) input {
-    width: 100%;
-    height: 100%;
-  }
+    // <input> is also the touch target
+    input {
+      appearance: none;
+      height: 48px;
+      margin: 0;
+      position: absolute;
+      width: 48px;
+      cursor: inherit;
+    }
 
-  md-ripple {
-    border-radius: 50%;
-    height: var(--_state-layer-size);
-    inset: unset;
-    width: var(--_state-layer-size);
-  }
+    :host([touch-target='none']) input {
+      width: 100%;
+      height: 100%;
+    }
 
-  .icon {
-    fill: var(--_icon-color);
-    inset: 0;
-    position: absolute;
-  }
+    md-ripple {
+      border-radius: 50%;
+      height: var(--_state-layer-size);
+      inset: unset;
+      width: var(--_state-layer-size);
+    }
 
-  .outer.circle {
-    // Outline color enter/exit transition
-    transition: fill 50ms linear;
-  }
+    .icon {
+      fill: var(--_icon-color);
+      inset: 0;
+      position: absolute;
+    }
 
-  .inner.circle {
-    opacity: 0;
-    transform-origin: center;
-    transition: opacity 50ms linear;
-  }
+    .outer.circle {
+      // Outline color enter/exit transition
+      transition: fill 50ms linear;
+    }
 
-  .checked .icon {
-    fill: var(--_selected-icon-color);
-  }
+    .inner.circle {
+      opacity: 0;
+      transform-origin: center;
+      transition: opacity 50ms linear;
+    }
 
-  .checked .inner.circle {
-    animation: inner-circle-grow 300ms
-      map.get($_md-sys-motion, easing-emphasized-decelerate);
-    opacity: 1;
-  }
+    .checked .icon {
+      fill: var(--_selected-icon-color);
+    }
 
-  @keyframes inner-circle-grow {
-    from {
-      transform: scale(0);
+    .checked .inner.circle {
+      animation: inner-circle-grow 300ms
+        map.get($_md-sys-motion, easing-emphasized-decelerate);
+      opacity: 1;
     }
-    to {
-      transform: scale(1);
+
+    @keyframes inner-circle-grow {
+      from {
+        transform: scale(0);
+      }
+      to {
+        transform: scale(1);
+      }
     }
-  }
 
-  // Don't animate when disabled
-  :host([disabled]) .circle {
-    animation-duration: 0s;
-    transition-duration: 0s;
-  }
+    // Don't animate when disabled
+    :host([disabled]) .circle {
+      animation-duration: 0s;
+      transition-duration: 0s;
+    }
 
-  :host(:hover) .icon {
-    fill: var(--_hover-icon-color);
-  }
+    :host(:hover) .icon {
+      fill: var(--_hover-icon-color);
+    }
 
-  :host(:focus-within) .icon {
-    fill: var(--_focus-icon-color);
-  }
+    :host(:focus-within) .icon {
+      fill: var(--_focus-icon-color);
+    }
 
-  :host(:active) .icon {
-    fill: var(--_pressed-icon-color);
-  }
+    :host(:active) .icon {
+      fill: var(--_pressed-icon-color);
+    }
 
-  :host([disabled]) .icon {
-    fill: var(--_disabled-unselected-icon-color);
-    opacity: var(--_disabled-unselected-icon-opacity);
-  }
+    :host([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(:hover) .checked .icon {
+      fill: var(--_selected-hover-icon-color);
+    }
 
-  :host(:focus-within) .checked .icon {
-    fill: var(--_selected-focus-icon-color);
-  }
+    :host(:focus-within) .checked .icon {
+      fill: var(--_selected-focus-icon-color);
+    }
 
-  :host(:active) .checked .icon {
-    fill: var(--_selected-pressed-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);
+    }
   }
 
-  :host([disabled]) .checked .icon {
-    fill: var(--_disabled-selected-icon-color);
-    opacity: var(--_disabled-selected-icon-opacity);
+  @layer hcm {
+    @media (forced-colors: active) {
+      .icon {
+        fill: CanvasText;
+      }
+
+      :host([disabled]) .icon {
+        fill: GrayText;
+        opacity: 1;
+      }
+    }
   }
 }

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

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host{--_disabled-selected-icon-color: var(--md-radio-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-icon-opacity: var(--md-radio-disabled-selected-icon-opacity, 0.38);--_disabled-unselected-icon-color: var(--md-radio-disabled-unselected-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-unselected-icon-opacity: var(--md-radio-disabled-unselected-icon-opacity, 0.38);--_icon-size: var(--md-radio-icon-size, 20px);--_selected-focus-icon-color: var(--md-radio-selected-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-icon-color: var(--md-radio-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-color: var(--md-radio-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-opacity: var(--md-radio-selected-hover-state-layer-opacity, 0.08);--_selected-icon-color: var(--md-radio-selected-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-icon-color: var(--md-radio-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-state-layer-color: var(--md-radio-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_selected-pressed-state-layer-opacity: var(--md-radio-selected-pressed-state-layer-opacity, 0.12);--_state-layer-size: var(--md-radio-state-layer-size, 40px);--_focus-icon-color: var(--md-radio-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-icon-color: var(--md-radio-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-color: var(--md-radio-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-radio-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-radio-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-icon-color: var(--md-radio-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-color: var(--md-radio-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-radio-pressed-state-layer-opacity, 0.12);--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity);display:inline-flex;height:var(--_icon-size);outline:none;position:relative;vertical-align:top;width:var(--_icon-size);-webkit-tap-highlight-color:rgba(0,0,0,0)}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_icon-size))/2)}.container{display:flex;height:100%;place-content:center;place-items:center;width:100%}md-focus-ring{height:44px;inset:unset;width:44px}.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{appearance:none;height:48px;margin:0;position:absolute;width:48px}:host([touch-target=none]) input{width:100%;height:100%}md-ripple{border-radius:50%;height:var(--_state-layer-size);inset:unset;width:var(--_state-layer-size)}.icon{fill:var(--_icon-color);inset:0;position:absolute}.outer.circle{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(--_hover-icon-color)}:host(:focus-within) .icon{fill:var(--_focus-icon-color)}:host(:active) .icon{fill:var(--_pressed-icon-color)}:host([disabled]) .icon{fill:var(--_disabled-unselected-icon-color);opacity:var(--_disabled-unselected-icon-opacity)}:host(:hover) .checked .icon{fill:var(--_selected-hover-icon-color)}:host(:focus-within) .checked .icon{fill:var(--_selected-focus-icon-color)}:host(:active) .checked .icon{fill:var(--_selected-pressed-icon-color)}:host([disabled]) .checked .icon{fill:var(--_disabled-selected-icon-color);opacity:var(--_disabled-selected-icon-opacity)}/*# sourceMappingURL=radio-styles.css.map */
+export const styles = css `@layer{: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);--_focus-icon-color: var(--md-radio-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-icon-color: var(--md-radio-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-color: var(--md-radio-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-radio-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-radio-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-icon-color: var(--md-radio-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-color: var(--md-radio-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-radio-pressed-state-layer-opacity, 0.12);--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity);display:inline-flex;height:var(--_icon-size);outline:none;position:relative;vertical-align:top;width:var(--_icon-size);-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:pointer}:host([disabled]){cursor:default}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_icon-size))/2)}.container{display:flex;height:100%;place-content:center;place-items:center;width:100%}md-focus-ring{height:44px;inset:unset;width:44px}.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{appearance:none;height:48px;margin:0;position:absolute;width:48px;cursor:inherit}:host([touch-target=none]) input{width:100%;height:100%}md-ripple{border-radius:50%;height:var(--_state-layer-size);inset:unset;width:var(--_state-layer-size)}.icon{fill:var(--_icon-color);inset:0;position:absolute}.outer.circle{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(--_hover-icon-color)}:host(:focus-within) .icon{fill:var(--_focus-icon-color)}:host(:active) .icon{fill:var(--_pressed-icon-color)}:host([disabled]) .icon{fill:var(--_disabled-unselected-icon-color);opacity:var(--_disabled-unselected-icon-opacity)}:host(:hover) .checked .icon{fill:var(--_selected-hover-icon-color)}:host(:focus-within) .checked .icon{fill:var(--_selected-focus-icon-color)}:host(:active) .checked .icon{fill:var(--_selected-pressed-icon-color)}:host([disabled]) .checked .icon{fill:var(--_disabled-selected-icon-color);opacity:var(--_disabled-selected-icon-opacity)}}@layer hcm{@media(forced-colors: active){.icon{fill:CanvasText}:host([disabled]) .icon{fill:GrayText;opacity:1}}}/*# sourceMappingURL=radio-styles.css.map */
 `;
 //# sourceMappingURL=radio-styles.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"radio-styles.css.js","sourceRoot":"","sources":["radio-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_disabled-selected-icon-color: var(--md-radio-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-icon-opacity: var(--md-radio-disabled-selected-icon-opacity, 0.38);--_disabled-unselected-icon-color: var(--md-radio-disabled-unselected-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-unselected-icon-opacity: var(--md-radio-disabled-unselected-icon-opacity, 0.38);--_icon-size: var(--md-radio-icon-size, 20px);--_selected-focus-icon-color: var(--md-radio-selected-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-icon-color: var(--md-radio-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-color: var(--md-radio-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-opacity: var(--md-radio-selected-hover-state-layer-opacity, 0.08);--_selected-icon-color: var(--md-radio-selected-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-icon-color: var(--md-radio-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-state-layer-color: var(--md-radio-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_selected-pressed-state-layer-opacity: var(--md-radio-selected-pressed-state-layer-opacity, 0.12);--_state-layer-size: var(--md-radio-state-layer-size, 40px);--_focus-icon-color: var(--md-radio-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-icon-color: var(--md-radio-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-color: var(--md-radio-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-radio-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-radio-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-icon-color: var(--md-radio-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-color: var(--md-radio-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-radio-pressed-state-layer-opacity, 0.12);--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity);display:inline-flex;height:var(--_icon-size);outline:none;position:relative;vertical-align:top;width:var(--_icon-size);-webkit-tap-highlight-color:rgba(0,0,0,0)}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_icon-size))/2)}.container{display:flex;height:100%;place-content:center;place-items:center;width:100%}md-focus-ring{height:44px;inset:unset;width:44px}.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{appearance:none;height:48px;margin:0;position:absolute;width:48px}:host([touch-target=none]) input{width:100%;height:100%}md-ripple{border-radius:50%;height:var(--_state-layer-size);inset:unset;width:var(--_state-layer-size)}.icon{fill:var(--_icon-color);inset:0;position:absolute}.outer.circle{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(--_hover-icon-color)}:host(:focus-within) .icon{fill:var(--_focus-icon-color)}:host(:active) .icon{fill:var(--_pressed-icon-color)}:host([disabled]) .icon{fill:var(--_disabled-unselected-icon-color);opacity:var(--_disabled-unselected-icon-opacity)}:host(:hover) .checked .icon{fill:var(--_selected-hover-icon-color)}:host(:focus-within) .checked .icon{fill:var(--_selected-focus-icon-color)}:host(:active) .checked .icon{fill:var(--_selected-pressed-icon-color)}:host([disabled]) .checked .icon{fill:var(--_disabled-selected-icon-color);opacity:var(--_disabled-selected-icon-opacity)}/*# 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`@layer{: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);--_focus-icon-color: var(--md-radio-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-icon-color: var(--md-radio-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-color: var(--md-radio-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-radio-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-radio-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-icon-color: var(--md-radio-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-color: var(--md-radio-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-radio-pressed-state-layer-opacity, 0.12);--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity);display:inline-flex;height:var(--_icon-size);outline:none;position:relative;vertical-align:top;width:var(--_icon-size);-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:pointer}:host([disabled]){cursor:default}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_icon-size))/2)}.container{display:flex;height:100%;place-content:center;place-items:center;width:100%}md-focus-ring{height:44px;inset:unset;width:44px}.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{appearance:none;height:48px;margin:0;position:absolute;width:48px;cursor:inherit}:host([touch-target=none]) input{width:100%;height:100%}md-ripple{border-radius:50%;height:var(--_state-layer-size);inset:unset;width:var(--_state-layer-size)}.icon{fill:var(--_icon-color);inset:0;position:absolute}.outer.circle{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(--_hover-icon-color)}:host(:focus-within) .icon{fill:var(--_focus-icon-color)}:host(:active) .icon{fill:var(--_pressed-icon-color)}:host([disabled]) .icon{fill:var(--_disabled-unselected-icon-color);opacity:var(--_disabled-unselected-icon-opacity)}:host(:hover) .checked .icon{fill:var(--_selected-hover-icon-color)}:host(:focus-within) .checked .icon{fill:var(--_selected-focus-icon-color)}:host(:active) .checked .icon{fill:var(--_selected-pressed-icon-color)}:host([disabled]) .checked .icon{fill:var(--_disabled-selected-icon-color);opacity:var(--_disabled-selected-icon-opacity)}}@layer hcm{@media(forced-colors: active){.icon{fill:CanvasText}:host([disabled]) .icon{fill:GrayText;opacity:1}}}/*# sourceMappingURL=radio-styles.css.map */\n`;\n "]}

package/radio/internal/radio.d.ts

@@ -6,13 +6,18 @@
 import '../../focus/md-focus-ring.js';
 import '../../ripple/ripple.js';
 import { LitElement } from 'lit';
+import { getFormState, getFormValue } from '../../labs/behaviors/form-associated.js';
 declare const CHECKED: unique symbol;
+declare const radioBaseClass: import("../../labs/behaviors/mixin.js").MixinReturn<(abstract new (...args: any[]) => import("../../labs/behaviors/element-internals.js").WithElementInternals) & (abstract new (...args: any[]) => import("../../labs/behaviors/focusable.js").Focusable) & typeof LitElement & import("../../labs/behaviors/form-associated.js").FormAssociatedConstructor, import("../../labs/behaviors/form-associated.js").FormAssociated>;
 /**
  * A radio component.
+ *
+ * @fires input {InputEvent} Dispatched when the value changes from user
+ * interaction. --bubbles
+ * @fires change {Event} Dispatched when the value changes from user
+ * interaction. --bubbles --composed
  */
-export declare class Radio extends LitElement {
-    /** @nocollapse */
-    static readonly formAssociated = true;
+export declare class Radio extends radioBaseClass {
     private readonly maskId;
     /**
      * Whether or not the radio is selected.
@@ -20,37 +25,21 @@ export declare class Radio extends LitElement {
     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.
      */
     value: string;
-    /**
-     * The HTML name to use in form submission.
-     */
-    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 selectionController;
-    private readonly internals;
     constructor();
     protected render(): import("lit-html").TemplateResult<1>;
     protected updated(): void;
     private handleClick;
     private handleKeydown;
-    /** @private */
+    disabled: boolean;
+    name: string;
+    [getFormValue](): string;
+    [getFormState](): string;
     formResetCallback(): void;
-    /** @private */
     formStateRestoreCallback(state: string): void;
 }
 export {};

package/radio/internal/radio.js

@@ -10,15 +10,24 @@ import '../../ripple/ripple.js';
 import { html, isServer, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { polyfillElementInternalsAria, setupHostAria } from '../../internal/aria/aria.js';
 import { isActivationClick } from '../../internal/controller/events.js';
+import { internals, mixinElementInternals, } from '../../labs/behaviors/element-internals.js';
+import { mixinFocusable } from '../../labs/behaviors/focusable.js';
+import { getFormState, getFormValue, mixinFormAssociated, } from '../../labs/behaviors/form-associated.js';
 import { SingleSelectionController } from './single-selection-controller.js';
 const CHECKED = Symbol('checked');
 let maskId = 0;
+// Separate variable needed for closure.
+const radioBaseClass = mixinFormAssociated(mixinElementInternals(mixinFocusable(LitElement)));
 /**
  * A radio component.
+ *
+ * @fires input {InputEvent} Dispatched when the value changes from user
+ * interaction. --bubbles
+ * @fires change {Event} Dispatched when the value changes from user
+ * interaction. --bubbles --composed
  */
-export class Radio extends LitElement {
+export class Radio extends radioBaseClass {
     /**
      * Whether or not the radio is selected.
      */
@@ -31,69 +40,47 @@ export class Radio extends LitElement {
             return;
         }
         this[CHECKED] = checked;
-        const state = String(checked);
-        this.internals.setFormValue(this.checked ? this.value : null, state);
         this.requestUpdate('checked', wasChecked);
         this.selectionController.handleCheckedChange();
     }
-    /**
-     * The HTML name to use in form submission.
-     */
-    get name() {
-        return this.getAttribute('name') ?? '';
-    }
-    set name(name) {
-        this.setAttribute('name', name);
-    }
-    /**
-     * The associated form element with which this element's value will submit.
-     */
-    get form() {
-        return this.internals.form;
-    }
-    /**
-     * The labels this element is associated with.
-     */
-    get labels() {
-        return this.internals.labels;
-    }
     constructor() {
         super();
         // Unique maskId is required because of a Safari bug that fail to persist
         // reference to the mask. This should be removed once the bug is fixed.
         this.maskId = `cutout${++maskId}`;
         this[_a] = false;
-        /**
-         * Whether or not the radio is disabled.
-         */
-        this.disabled = false;
         /**
          * The element value to use in form submission when checked.
          */
         this.value = 'on';
         this.selectionController = new SingleSelectionController(this);
-        this.internals = polyfillElementInternalsAria(this, this /* needed for closure */.attachInternals());
         this.addController(this.selectionController);
         if (!isServer) {
-            this.internals.role = 'radio';
+            this[internals].role = 'radio';
             this.addEventListener('click', this.handleClick.bind(this));
             this.addEventListener('keydown', this.handleKeydown.bind(this));
         }
     }
     render() {
-        const classes = { checked: this.checked };
+        const classes = { 'checked': this.checked };
         return html `
       <div class="container ${classMap(classes)}" aria-hidden="true">
-        <md-ripple part="ripple" .control=${this}
-            ?disabled=${this.disabled}></md-ripple>
+        <md-ripple
+          part="ripple"
+          .control=${this}
+          ?disabled=${this.disabled}></md-ripple>
         <md-focus-ring part="focus-ring" .control=${this}></md-focus-ring>
         <svg class="icon" viewBox="0 0 20 20">
           <mask id="${this.maskId}">
             <rect width="100%" height="100%" fill="white" />
             <circle cx="10" cy="10" r="8" fill="black" />
           </mask>
-          <circle class="outer circle" cx="10" cy="10" r="10"
-              mask="url(#${this.maskId})" />
+          <circle
+            class="outer circle"
+            cx="10"
+            cy="10"
+            r="10"
+            mask="url(#${this.maskId})" />
           <circle class="inner circle" cx="10" cy="10" r="5" />
         </svg>
 
@@ -103,13 +90,12 @@ export class Radio extends LitElement {
           tabindex="-1"
           .checked=${this.checked}
           .value=${this.value}
-          ?disabled=${this.disabled}
-        >
+          ?disabled=${this.disabled} />
       </div>
     `;
     }
     updated() {
-        this.internals.ariaChecked = String(this.checked);
+        this[internals].ariaChecked = String(this.checked);
     }
     async handleClick(event) {
         if (this.disabled) {
@@ -136,29 +122,24 @@ export class Radio extends LitElement {
         }
         this.click();
     }
-    /** @private */
+    [(_a = CHECKED, getFormValue)]() {
+        return this.checked ? this.value : null;
+    }
+    [getFormState]() {
+        return String(this.checked);
+    }
     formResetCallback() {
         // The checked property does not reflect, so the original attribute set by
         // the user is used to determine the default value.
         this.checked = this.hasAttribute('checked');
     }
-    /** @private */
     formStateRestoreCallback(state) {
         this.checked = state === 'true';
     }
 }
-_a = CHECKED;
-(() => {
-    setupHostAria(Radio);
-})();
-/** @nocollapse */
-Radio.formAssociated = true;
 __decorate([
     property({ type: Boolean })
 ], Radio.prototype, "checked", null);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Radio.prototype, "disabled", void 0);
 __decorate([
     property()
 ], Radio.prototype, "value", void 0);

package/radio/internal/radio.js.map

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

package/radio/internal/single-selection-controller.js

@@ -165,7 +165,7 @@ export class SingleSelectionController {
         // There are three tabindex states for a group of elements:
         // 1. If any are checked, that element is focusable.
         const siblings = this.getNamedSiblings();
-        const checkedSibling = siblings.find(sibling => sibling.checked);
+        const checkedSibling = siblings.find((sibling) => sibling.checked);
         // 2. If an element is focused, the others are no longer focusable.
         if (checkedSibling || this.focused) {
             const focusable = checkedSibling || this.host;