@material/web 0.1.0-alpha.0

package/radio/lib/_radio-theme.scss

@@ -0,0 +1,376 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
+
+@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';
+
+$light-theme: tokens.md-comp-radio-button-values();
+$custom-property-prefix: 'radio';
+
+@mixin theme($theme) {
+  $theme: theme.validate-theme($light-theme, $theme);
+  @include theme.emit-theme-vars(
+    theme.create-theme-vars($theme, $custom-property-prefix)
+  );
+}
+
+@mixin theme-styles($theme) {
+  $theme: theme.validate-theme($light-theme, $theme);
+  // Set touch target manually until tokens provide this information.
+  $theme: map.set($theme, _touch-target-size, 48px);
+  $theme: theme.create-theme-vars($theme, $prefix: $custom-property-prefix);
+
+  .md3-radio {
+    @include _disabled-selected-icon-color(
+      map.get($theme, disabled-selected-icon-color)
+    );
+    @include _disabled-selected-icon-opacity(
+      map.get($theme, disabled-selected-icon-opacity)
+    );
+    @include _disabled-unselected-icon-color(
+      map.get($theme, disabled-unselected-icon-color)
+    );
+    @include _disabled-unselected-icon-opacity(
+      map.get($theme, disabled-unselected-icon-opacity)
+    );
+    @include _icon-size(map.get($theme, icon-size));
+    @include _selected-focus-icon-color(
+      map.get($theme, selected-focus-icon-color)
+    );
+    @include _selected-hover-icon-color(
+      map.get($theme, selected-hover-icon-color)
+    );
+    @include _selected-icon-color(map.get($theme, selected-icon-color));
+    @include _selected-pressed-icon-color(
+      map.get($theme, selected-pressed-icon-color)
+    );
+    @include _state-layer-size(map.get($theme, state-layer-size));
+    @include _touch-target($size: map.get($theme, state-layer-size));
+    @include _unselected-focus-icon-color(
+      map.get($theme, unselected-focus-icon-color)
+    );
+    @include _unselected-hover-icon-color(
+      map.get($theme, unselected-hover-icon-color)
+    );
+    @include _unselected-icon-color(map.get($theme, unselected-icon-color));
+    @include _unselected-pressed-icon-color(
+      map.get($theme, unselected-pressed-icon-color)
+    );
+  }
+
+  .md3-radio--touch {
+    @include _touch-target($size: map.get($theme, _touch-target-size));
+  }
+
+  @include ripple-theme.theme(
+    (
+      hover-state-layer-color:
+        map.get($theme, unselected-hover-state-layer-color),
+      focus-state-layer-color:
+        map.get($theme, unselected-focus-state-layer-color),
+      pressed-state-layer-color:
+        map.get($theme, unselected-pressed-state-layer-color),
+      hover-state-layer-opacity:
+        map.get($theme, unselected-hover-state-layer-opacity),
+      focus-state-layer-opacity:
+        map.get($theme, unselected-focus-state-layer-opacity),
+      pressed-state-layer-opacity:
+        map.get($theme, unselected-pressed-state-layer-opacity),
+    )
+  );
+
+  @include _checked-selector() {
+    @include ripple-theme.theme(
+      (
+        hover-state-layer-color:
+          map.get($theme, selected-hover-state-layer-color),
+        focus-state-layer-color:
+          map.get($theme, selected-focus-state-layer-color),
+        pressed-state-layer-color:
+          map.get($theme, selected-pressed-state-layer-color),
+        hover-state-layer-opacity:
+          map.get($theme, selected-hover-state-layer-opacity),
+        focus-state-layer-opacity:
+          map.get($theme, selected-focus-state-layer-opacity),
+        pressed-state-layer-opacity:
+          map.get($theme, selected-pressed-state-layer-opacity),
+      )
+    );
+  }
+}
+
+$_theme-extension-keys: (
+  touch-target-size: null,
+);
+
+@mixin theme-extension($theme) {
+  $theme: theme.validate-theme($_theme-extension-keys, $theme);
+
+  .md3-radio {
+    @include _touch-target(map.get($theme, touch-target-size));
+  }
+}
+
+@mixin high-contrast-styles() {
+  @include _disabled-selected-icon-color(GrayText);
+  @include _disabled-selected-icon-opacity(1);
+  @include _disabled-unselected-icon-color(GrayText);
+  @include _disabled-unselected-icon-opacity(1);
+  @include _selected-icon-color(CanvasText);
+  @include _selected-hover-icon-color(CanvasText);
+  @include _selected-focus-icon-color(CanvasText);
+  @include _selected-pressed-icon-color(CanvasText);
+  @include _unselected-icon-color(CanvasText);
+  @include _unselected-hover-icon-color(CanvasText);
+  @include _unselected-focus-icon-color(CanvasText);
+  @include _unselected-pressed-icon-color(CanvasText);
+}
+
+///
+/// Sets the stroke color of a checked, disabled radio button.
+/// @param {Color} $color - The desired stroke color.
+///
+@mixin disabled-checked-stroke-color($color) {
+  @include _if-disabled-checked {
+    @include _stroke-color($color);
+  }
+}
+
+///
+/// Sets the stroke color of an unchecked, disabled radio button.
+/// @param {Color} $color - The desired stroke color.
+///
+@mixin disabled-unchecked-stroke-color($color) {
+  @include _if-disabled-unchecked {
+    @include _stroke-color($color);
+  }
+}
+
+///
+/// Sets the ink color of a disabled radio button.
+/// @param {Color} $color - The desired ink color
+///
+@mixin disabled-ink-color($color) {
+  @include _if-disabled {
+    @include _ink-color($color);
+  }
+}
+
+@mixin _disabled-selected-icon-color($color) {
+  @include disabled-checked-stroke-color($color);
+  @include disabled-ink-color($color);
+}
+
+@mixin _disabled-selected-icon-opacity($opacity) {
+  @include _disabled-checked-stroke-opacity($opacity);
+  @include _disabled-ink-opacity($opacity);
+}
+
+@mixin _disabled-unselected-icon-color($color) {
+  @include disabled-unchecked-stroke-color($color);
+}
+
+@mixin _disabled-unselected-icon-opacity($opacity) {
+  @include _disabled-unchecked-stroke-opacity($opacity);
+}
+
+@mixin _icon-size($size) {
+  .md3-radio__background {
+    height: $size;
+    width: $size;
+  }
+}
+
+@mixin _selected-hover-icon-color($color) {
+  @include _if-input-selected {
+    &:hover + {
+      @include _stroke-color($color);
+      @include _ink-color($color);
+    }
+  }
+}
+
+@mixin _selected-focus-icon-color($color) {
+  @include _if-input-selected {
+    &:focus + {
+      @include _stroke-color($color);
+      @include _ink-color($color);
+    }
+  }
+}
+
+@mixin _selected-pressed-icon-color($color) {
+  @include _if-input-selected {
+    &:active + {
+      @include _stroke-color($color);
+      @include _ink-color($color);
+    }
+  }
+}
+
+@mixin _selected-icon-color($color) {
+  @include _if-input-selected {
+    & + {
+      @include _stroke-color($color);
+      @include _ink-color($color);
+    }
+  }
+}
+
+@mixin _unselected-hover-icon-color($color) {
+  @include _if-input-unselected {
+    &:hover + {
+      @include _stroke-color($color);
+    }
+  }
+}
+
+@mixin _unselected-focus-icon-color($color) {
+  @include _if-input-unselected {
+    &:focus + {
+      @include _stroke-color($color);
+    }
+  }
+}
+
+@mixin _unselected-pressed-icon-color($color) {
+  @include _if-input-unselected {
+    &:active + {
+      @include _stroke-color($color);
+    }
+  }
+}
+
+@mixin _unselected-icon-color($color) {
+  @include _if-input-unselected {
+    & + {
+      @include _stroke-color($color);
+    }
+  }
+}
+
+@mixin _disabled-unchecked-stroke-opacity($opacity) {
+  @include _if-disabled-unchecked {
+    @include _stroke-opacity($opacity);
+  }
+}
+
+@mixin _disabled-checked-stroke-opacity($opacity) {
+  @include _if-disabled-checked {
+    @include _stroke-opacity($opacity);
+  }
+}
+
+@mixin _disabled-ink-opacity($opacity) {
+  @include _if-disabled {
+    @include _ink-opacity($opacity);
+  }
+}
+
+@mixin _touch-target($size) {
+  block-size: $size;
+  inline-size: $size;
+}
+
+@mixin _state-layer-size($size) {
+  .md3-radio__ripple {
+    block-size: $size;
+    inline-size: $size;
+  }
+}
+
+///
+/// Sets the ink color for radio. This is wrapped in a mixin
+/// that qualifies state such as `_if-enabled`
+///
+@mixin _ink-color($color) {
+  .md3-radio__background .md3-radio__inner-circle {
+    background-color: $color;
+  }
+}
+
+@mixin _ink-opacity($opacity) {
+  .md3-radio__background .md3-radio__inner-circle {
+    opacity: $opacity;
+  }
+}
+
+///
+/// Sets the stroke color for radio. This is wrapped in a mixin
+/// that qualifies state such as `_if-enabled`
+///
+@mixin _stroke-color($color) {
+  .md3-radio__background .md3-radio__outer-circle {
+    border-color: $color;
+  }
+}
+
+@mixin _stroke-opacity($opacity) {
+  .md3-radio__background .md3-radio__outer-circle {
+    opacity: $opacity;
+  }
+}
+
+@mixin _checked-selector() {
+  @include shadow-dom.host-aware(selector.append(&, '[checked]')) {
+    @content;
+  }
+}
+
+@mixin _if-input-unselected {
+  .md3-radio__native-control:enabled:not(:checked) {
+    @content;
+  }
+}
+
+@mixin _if-input-selected {
+  .md3-radio__native-control:enabled:checked {
+    @content;
+  }
+}
+
+///
+/// Helps select the radio background only when its native control is in the
+/// disabled state.
+///
+@mixin _if-disabled {
+  .md3-radio__native-control:disabled {
+    + {
+      @content;
+    }
+  }
+}
+
+///
+/// Helps select the radio background only when its native control is in the
+/// disabled & unchecked state.
+///
+@mixin _if-disabled-unchecked {
+  .md3-radio__native-control:disabled {
+    &:not(:checked) + {
+      @content;
+    }
+  }
+}
+
+///
+/// Helps select the radio background only when its native control is in the
+/// disabled & checked state.
+///
+@mixin _if-disabled-checked {
+  .md3-radio__native-control:disabled {
+    &:checked + {
+      @content;
+    }
+  }
+}

package/radio/lib/_radio.scss

@@ -0,0 +1,131 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// 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 './radio-theme';
+
+@mixin static-styles() {
+  .md3-radio {
+    display: inline-flex;
+    position: relative;
+    cursor: pointer;
+    will-change: opacity, transform, border-color, color;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .md3-radio__background {
+    display: inline-flex;
+    position: relative;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .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: exit(border-color);
+  }
+
+  .md3-radio__inner-circle {
+    position: absolute;
+    box-sizing: border-box;
+    block-size: 50%;
+    inline-size: 50%;
+    transform: scale(0);
+    border-radius: 50%;
+    transition: exit(transform), exit(border-color);
+  }
+
+  .md3-radio__ripple {
+    position: absolute;
+    display: inline-flex;
+    z-index: -1;
+  }
+
+  .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;
+  }
+
+  .md3-radio__native-control:checked,
+  .md3-radio__native-control:disabled {
+    + .md3-radio__background {
+      transition: enter(opacity), enter(transform);
+
+      .md3-radio__outer-circle {
+        transition: enter(border-color);
+      }
+
+      .md3-radio__inner-circle {
+        transition: enter(transform), enter(border-color);
+      }
+    }
+  }
+
+  .md3-radio--disabled {
+    cursor: default;
+    pointer-events: none;
+  }
+
+  .md3-radio__native-control:checked {
+    + .md3-radio__background {
+      .md3-radio__inner-circle {
+        transform: scale(1);
+        transition: enter(transform), enter(border-color);
+      }
+    }
+  }
+
+  .md3-radio__native-control:disabled,
+  [aria-disabled='true'] .md3-radio__native-control {
+    + .md3-radio__background {
+      cursor: default;
+    }
+  }
+
+  @include focus-ring-theme.theme(
+    (
+      container-outer-padding-vertical: -2px,
+      container-outer-padding-horizontal: -2px,
+    )
+  );
+
+  @media (forced-colors: active) {
+    .md3-radio {
+      @include radio-theme.high-contrast-styles();
+    }
+  }
+}
+
+$_transition-duration: 120ms;
+
+@function enter($name) {
+  @return animation.deceleration($name, $_transition-duration);
+}
+
+@function exit($name) {
+  @return animation.sharp($name, $_transition-duration);
+}

package/radio/lib/radio-styles.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

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

@@ -0,0 +1,9 @@
+/**
+  * @license
+  * Copyright 2022 Google LLC
+  * SPDX-License-Identifier: Apache-2.0
+  */
+import { css } from 'lit';
+export const styles = css `:host{--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 */
+`;
+//# sourceMappingURL=radio-styles.css.js.map

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

@@ -0,0 +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 "]}

package/radio/lib/radio-styles.scss

@@ -0,0 +1,14 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@use './radio';
+@use './radio-theme';
+
+:host {
+  @include radio-theme.theme-styles(radio-theme.$light-theme);
+  @include radio.static-styles();
+
+  display: inline-flex;
+}

package/radio/lib/radio.d.ts

@@ -0,0 +1,93 @@
+/**
+ * @license
+ * 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 { PropertyValues, TemplateResult } from 'lit';
+import { SingleSelectionController } from './single-selection-controller.js';
+/**
+ * @fires checked
+ * @soyCompatible
+ */
+export declare class Radio extends ActionElement {
+    protected formElement: HTMLInputElement;
+    ripple: MdRipple;
+    protected _checked: boolean;
+    protected showFocusRing: boolean;
+    global: boolean;
+    get checked(): boolean;
+    protected getChecked(): boolean;
+    /**
+     * We define our own getter/setter for `checked` because we need to track
+     * changes to it synchronously.
+     *
+     * The order in which the `checked` property is set across radio buttons
+     * within the same group is very important. However, we can't rely on
+     * UpdatingElement's `updated` callback to observe these changes (which is
+     * also what the `@observer` decorator uses), because it batches changes to
+     * all properties.
+     *
+     * Consider:
+     *
+     *   radio1.disabled = true;
+     *   radio2.checked = true;
+     *   radio1.checked = true;
+     *
+     * In this case we'd first see all changes for radio1, and then for radio2,
+     * and we couldn't tell that radio1 was the most recently checked.
+     */
+    set checked(isChecked: boolean);
+    protected setChecked(isChecked: boolean): void;
+    disabled: boolean;
+    value: string;
+    name: string;
+    /**
+     * Touch target extends beyond visual boundary of a component by default.
+     * Set to `true` to remove touch target added to the component.
+     * @see https://material.io/design/usability/accessibility.html
+     */
+    reducedTouchTarget: boolean;
+    protected selectionController?: SingleSelectionController;
+    /**
+     * input's tabindex is updated based on checked status.
+     * Tab navigation will be removed from unchecked radios.
+     */
+    formElementTabIndex: number;
+    protected focused: boolean;
+    /** @soyPrefixAttribute */
+    ariaLabel: string;
+    /** @soyPrefixAttribute */
+    ariaLabelledBy: string;
+    /** @soyPrefixAttribute */
+    ariaDescribedBy: undefined | string;
+    protected rippleElement: MdRipple | null;
+    /** @soyTemplate */
+    protected renderRipple(): TemplateResult | string;
+    /** @soyTemplate */
+    protected renderFocusRing(): TemplateResult;
+    get isRippleActive(): boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: PropertyValues): void;
+    protected createAdapter(): void;
+    beginPress({ positionEvent }: BeginPressConfig): void;
+    endPress({ cancelled }: EndPressConfig): void;
+    click(): void;
+    protected handleFocus(): void;
+    protected handleBlur(): void;
+    protected setFormData(formData: FormData): void;
+    /**
+     * @soyTemplate
+     * @soyAttributes radioAttributes: input
+     * @soyClasses radioClasses: .md3-radio
+     */
+    protected render(): TemplateResult;
+    protected handlePointerEnter(): void;
+    handlePointerDown(event: PointerEvent): void;
+    handlePointerLeave(e: PointerEvent): void;
+    protected changeHandler(): void;
+}