Track Checkbox focus state

- Also add z-index theming for ripple

PiperOrigin-RevId: 318565070

Author: dfreedm

CHANGELOG.md

@@ -33,6 +33,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 - Add `reducedTouchTarget` param to `mwc-checkbox` to control touchscreen accessibility.
 - Typeahead on `mwc-select`
 - Added `focusItemAtIndex(index)` and `getFocusedItemIndex` to both `list` and `menu`
+- Add `--m-ripple-z-index` to control ripple z-index.
 
 ### Changed
 

packages/checkbox/src/mwc-checkbox-base.ts

@@ -43,6 +43,8 @@ export class CheckboxBase extends FormElement {
 
   @internalProperty() protected shouldRenderRipple = false;
 
+  @internalProperty() protected focused = false;
+
   @queryAsync('mwc-ripple') ripple!: Promise<Ripple|null>;
 
   // MDC Foundation is unused
@@ -114,6 +116,7 @@ export class CheckboxBase extends FormElement {
       'mdc-checkbox--disabled': this.disabled,
       'mdc-checkbox--selected': selected,
       'mdc-checkbox--touch': !this.reducedTouchTarget,
+      'mdc-checkbox--focused': this.focused,
       // transition animiation classes
       'mdc-checkbox--anim-checked-indeterminate':
           this.animationClass == 'checked-indeterminate',
@@ -165,10 +168,12 @@ export class CheckboxBase extends FormElement {
   }
 
   private _handleFocus() {
+    this.focused = true;
     this.rippleHandlers.startFocus();
   }
 
   private _handleBlur() {
+    this.focused = false;
     this.rippleHandlers.endFocus();
   }
 

packages/checkbox/src/mwc-checkbox.scss

@@ -53,6 +53,20 @@ limitations under the License.
     varname: --mdc-checkbox-unchecked-color,
     fallback: checkbox.$border-color
   ),
+  $marked-stroke-color: (
+    varname: --m-checkbox-checked-color,
+    fallback: (
+      varname: --mdc-theme-secondary,
+      fallback: theme.prop-value(checkbox.$baseline-theme-color)
+    )
+  ),
+  $marked-fill-color: (
+    varname: --m-checkbox-checked-color,
+    fallback: (
+      varname: --mdc-theme-secondary,
+      fallback: theme.prop-value(checkbox.$baseline-theme-color)
+    )
+  ),
 );
 @include checkbox.ink-color((
   varname: --mdc-checkbox-mark-color,

packages/ripple/README.md

@@ -91,3 +91,4 @@ Name | Type | Default | Description
 | `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.
 | `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is "selected". This opacity is added to `press`, `hover`, and `focus` states.
 | `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is "activated". This opacity is added to `press`, `hover`, and `focus` states.
+| `--m-ripple-z-index` | `0` | Z-index of the ripple.

packages/ripple/src/mwc-ripple.scss

@@ -18,6 +18,7 @@ limitations under the License.
 @use 'sass:map';
 @use '@material/ripple';
 @use '@material/theme';
+@use '@material/theme/custom-properties';
 
 @include ripple.common();
 
@@ -122,5 +123,22 @@ limitations under the License.
   &.disabled {
     --mdc-ripple-color: transparent;
   }
+
+  &::before {
+    @include theme.property(
+      z-index,
+      custom-properties.create(--m-ripple-z-index, 1),
+      (alternate: true)
+    );
+
+  }
+
+  &::after {
+    @include theme.property(
+      z-index,
+      custom-properties.create(--m-ripple-z-index, 0),
+      (alternate: true)
+    );
+  }
 }