@material/web 0.1.0-alpha.0

package/checkbox/lib/_checkbox.scss

@@ -0,0 +1,424 @@
+//
+// 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:math';
+@use '@material/web/focus/lib/focus-ring-theme';
+@use '@material/web/motion/animation';
+
+@use './checkbox-theme';
+
+$_transition-duration: 90ms;
+$_mark-stroke-size: 4px;
+$_unselected-outline-width: 2px;
+$_selected-checkmark-padding: 2.8px;
+
+// Manual calculation done on SVG
+$_mark-path-length: 29.7833385 !default;
+$_indeterminate-checked-easing-function: cubic-bezier(0.14, 0, 0, 1) !default;
+
+@function transition-enter(
+  $property,
+  $delay: 0ms,
+  $duration: $_transition-duration
+) {
+  @return animation.deceleration($property, $duration, $delay);
+}
+
+@function transition-exit(
+  $property,
+  $delay: 0ms,
+  $duration: $_transition-duration
+) {
+  @return animation.sharp($property, $duration, $delay);
+}
+
+@mixin static-styles() {
+  @include _mark-keyframes();
+  @include _animation();
+
+  .md3-checkbox {
+    @include _base();
+  }
+
+  .md3-checkbox__background {
+    @include _background();
+  }
+
+  .md3-checkbox__checkmark {
+    @include _checkmark();
+  }
+
+  .md3-checkbox__checkmark-path {
+    @include _checkmark-path();
+  }
+
+  .md3-checkbox__mixedmark {
+    @include _mixedmark();
+  }
+
+  .md3-checkbox__native-control:checked ~ .md3-checkbox__background,
+  .md3-checkbox__native-control:indeterminate ~ .md3-checkbox__background,
+  .md3-checkbox__native-control[data-indeterminate='true']
+    ~ .md3-checkbox__background {
+    @include _background--marked();
+
+    .md3-checkbox__checkmark-path {
+      @include _checkmark-path--marked();
+    }
+  }
+
+  .md3-checkbox__native-control {
+    @include _native-control();
+  }
+
+  .md3-checkbox--disabled,
+  .md3-checkbox__native-control:disabled {
+    @include _disabled();
+  }
+
+  .md3-checkbox__native-control:checked ~ .md3-checkbox__background {
+    .md3-checkbox__checkmark {
+      @include _checkmark--checked();
+    }
+
+    .md3-checkbox__mixedmark {
+      @include _mixedmark--checked();
+    }
+  }
+  .md3-checkbox__native-control:indeterminate ~ .md3-checkbox__background,
+  .md3-checkbox__native-control[data-indeterminate='true']
+    ~ .md3-checkbox__background {
+    .md3-checkbox__checkmark {
+      @include _checkmark--indeterminate();
+    }
+
+    .md3-checkbox__mixedmark {
+      @include _mixedmark--indeterminate();
+    }
+  }
+
+  .md3-checkbox__ripple {
+    position: absolute;
+    display: inline-flex;
+    z-index: -1;
+  }
+
+  @include focus-ring-theme.theme(
+    (
+      container-outer-padding-vertical: -2px,
+      container-outer-padding-horizontal: -2px,
+    )
+  );
+  @include checkbox-theme.high-contrast-styles();
+}
+
+@mixin _base() {
+  display: inline-flex;
+  position: relative;
+  line-height: 0;
+  white-space: nowrap;
+  cursor: pointer;
+  vertical-align: bottom;
+  z-index: 0;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+@mixin _disabled() {
+  cursor: default;
+  pointer-events: none;
+}
+
+@mixin _animation() {
+  $md3-checkbox-indeterminate-change-duration_: 500ms;
+
+  .md3-checkbox--anim-unchecked-checked,
+  .md3-checkbox--anim-unchecked-indeterminate,
+  .md3-checkbox--anim-checked-unchecked,
+  .md3-checkbox--anim-indeterminate-unchecked {
+    .md3-checkbox__background {
+      animation-duration: $_transition-duration * 2;
+      animation-timing-function: linear;
+    }
+  }
+
+  // stylelint-disable no-unknown-animations -- Asterisk is treated as
+  // animation name. Supress the lint warning.
+  .md3-checkbox--anim-unchecked-checked {
+    .md3-checkbox__checkmark-path {
+      // Instead of delaying the animation, we simply multiply its length by 2 and begin the
+      // animation at 50% in order to prevent a flash of styles applied to a checked checkmark
+      // as the background is fading in before the animation begins.
+      animation: md3-checkbox-unchecked-checked-checkmark-path
+        $_transition-duration * 2 linear 0s;
+      transition: none;
+    }
+  }
+
+  .md3-checkbox--anim-unchecked-indeterminate {
+    .md3-checkbox__mixedmark {
+      animation: md3-checkbox-unchecked-indeterminate-mixedmark
+        $_transition-duration linear 0s;
+      transition: none;
+    }
+  }
+
+  .md3-checkbox--anim-checked-unchecked {
+    .md3-checkbox__checkmark-path {
+      animation: md3-checkbox-checked-unchecked-checkmark-path
+        $_transition-duration linear 0s;
+      transition: none;
+    }
+  }
+
+  .md3-checkbox--anim-checked-indeterminate {
+    .md3-checkbox__checkmark {
+      animation: md3-checkbox-checked-indeterminate-checkmark
+        $_transition-duration linear 0s;
+      transition: none;
+    }
+
+    .md3-checkbox__mixedmark {
+      animation: md3-checkbox-checked-indeterminate-mixedmark
+        $_transition-duration linear 0s;
+      transition: none;
+    }
+  }
+
+  .md3-checkbox--anim-indeterminate-checked {
+    .md3-checkbox__checkmark {
+      animation: md3-checkbox-indeterminate-checked-checkmark
+        $md3-checkbox-indeterminate-change-duration_ linear 0s;
+      transition: none;
+    }
+
+    .md3-checkbox__mixedmark {
+      animation: md3-checkbox-indeterminate-checked-mixedmark
+        $md3-checkbox-indeterminate-change-duration_ linear 0s;
+      transition: none;
+    }
+  }
+
+  .md3-checkbox--anim-indeterminate-unchecked {
+    .md3-checkbox__mixedmark {
+      animation: md3-checkbox-indeterminate-unchecked-mixedmark
+        $md3-checkbox-indeterminate-change-duration_ * 0.6 linear 0s;
+      transition: none;
+    }
+  }
+}
+
+@mixin _background() {
+  display: inline-flex;
+  position: absolute;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  border-style: solid;
+  background-color: transparent;
+  pointer-events: none;
+  will-change: background-color, border-color;
+
+  transition: transition-exit(background-color), transition-exit(border-color);
+}
+
+@mixin _background--marked() {
+  transition: transition-enter(border-color), transition-enter(background-color);
+}
+
+// Native input
+
+@mixin _native-control() {
+  position: absolute;
+  margin: 0;
+  padding: 0;
+  opacity: 0;
+  cursor: inherit;
+}
+
+// Check mark
+
+@mixin _checkmark() {
+  padding: $_selected-checkmark-padding;
+  position: absolute;
+  inset: 0;
+  box-sizing: border-box;
+  width: 100%;
+  border: none;
+  transition: transition-exit(opacity, 0ms, $_transition-duration * 2);
+}
+
+@mixin _checkmark--checked() {
+  transition: transition-enter(opacity, 0ms, $_transition-duration * 2),
+    transition-enter(transform, 0ms, $_transition-duration * 2);
+
+  opacity: 1;
+}
+
+@mixin _checkmark--indeterminate() {
+  transform: rotate(45deg);
+  opacity: 0;
+
+  transition: transition-exit(opacity, 0ms, $_transition-duration),
+    transition-exit(transform, 0ms, $_transition-duration);
+}
+
+// Check mark path
+
+@mixin _checkmark-path() {
+  transition: transition-exit(
+    stroke-dashoffset,
+    0ms,
+    $_transition-duration * 2
+  );
+
+  stroke: currentColor;
+  stroke-width: $_mark-stroke-size;
+  stroke-dashoffset: $_mark-path-length;
+  stroke-dasharray: $_mark-path-length;
+}
+
+@mixin _checkmark-path--marked() {
+  stroke-dashoffset: 0;
+}
+
+// Mixed mark
+
+@mixin _mixedmark() {
+  width: 100%;
+  height: 0;
+  transform: scaleX(0) rotate(0deg);
+  border-width: math.div(math.floor($_mark-stroke-size), 4);
+  border-style: solid;
+  background-color: currentColor;
+  border-color: currentColor;
+  opacity: 0;
+  transition: transition-exit(opacity), transition-exit(transform);
+  margin: $_unselected-outline-width * 2;
+}
+
+@mixin _mixedmark--checked() {
+  transform: scaleX(1) rotate(-45deg);
+}
+
+@mixin _mixedmark--indeterminate() {
+  transform: scaleX(1) rotate(0deg);
+  opacity: 1;
+}
+
+@mixin _mark-keyframes() {
+  @keyframes md3-checkbox-unchecked-checked-checkmark-path {
+    0%,
+    50% {
+      stroke-dashoffset: $_mark-path-length;
+    }
+
+    50% {
+      animation-timing-function: animation.$deceleration-easing;
+    }
+
+    100% {
+      stroke-dashoffset: 0;
+    }
+  }
+
+  @keyframes md3-checkbox-unchecked-indeterminate-mixedmark {
+    0%,
+    68.2% {
+      transform: scaleX(0);
+    }
+
+    68.2% {
+      animation-timing-function: cubic-bezier(0, 0, 0, 1);
+    }
+
+    100% {
+      transform: scaleX(1);
+    }
+  }
+
+  @keyframes md3-checkbox-checked-unchecked-checkmark-path {
+    from {
+      animation-timing-function: animation.$acceleration-easing;
+      opacity: 1;
+      stroke-dashoffset: 0;
+    }
+
+    to {
+      opacity: 0;
+      stroke-dashoffset: $_mark-path-length * -1;
+    }
+  }
+
+  @keyframes md3-checkbox-checked-indeterminate-checkmark {
+    from {
+      animation-timing-function: animation.$deceleration-easing;
+      transform: rotate(0deg);
+      opacity: 1;
+    }
+
+    to {
+      transform: rotate(45deg);
+      opacity: 0;
+    }
+  }
+
+  @keyframes md3-checkbox-indeterminate-checked-checkmark {
+    from {
+      animation-timing-function: $_indeterminate-checked-easing-function;
+      transform: rotate(45deg);
+      opacity: 0;
+    }
+
+    to {
+      transform: rotate(360deg);
+      opacity: 1;
+    }
+  }
+
+  @keyframes md3-checkbox-checked-indeterminate-mixedmark {
+    from {
+      animation-timing-function: md3-animation-deceleration-curve-timing-function;
+      transform: rotate(-45deg);
+      opacity: 0;
+    }
+
+    to {
+      transform: rotate(0deg);
+      opacity: 1;
+    }
+  }
+
+  @keyframes md3-checkbox-indeterminate-checked-mixedmark {
+    from {
+      animation-timing-function: $_indeterminate-checked-easing-function;
+      transform: rotate(0deg);
+      opacity: 1;
+    }
+
+    to {
+      transform: rotate(315deg);
+      opacity: 0;
+    }
+  }
+
+  @keyframes md3-checkbox-indeterminate-unchecked-mixedmark {
+    0% {
+      animation-timing-function: linear;
+      transform: scaleX(1);
+      opacity: 1;
+    }
+
+    32.8%,
+    100% {
+      transform: scaleX(0);
+      opacity: 0;
+    }
+  }
+}

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

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

package/checkbox/lib/checkbox-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-checkbox-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--md-ripple-focus-state-layer-color:var(--md-checkbox-unselected-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--md-ripple-pressed-state-layer-color:var(--md-checkbox-unselected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-hover-state-layer-opacity:var(--md-checkbox-unselected-hover-state-layer-opacity, 0.08);--md-ripple-focus-state-layer-opacity:var(--md-checkbox-unselected-focus-state-layer-opacity, 0.12);--md-ripple-pressed-state-layer-opacity:var(--md-checkbox-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-checkbox{height:var(--md-checkbox-state-layer-size, 40px);width:var(--md-checkbox-state-layer-size, 40px)}:host .md3-checkbox .md3-checkbox__background{height:var(--md-checkbox-icon-size, 18px)}:host .md3-checkbox .md3-checkbox__background{width:var(--md-checkbox-icon-size, 18px)}:host .md3-checkbox .md3-checkbox__background{height:var(--md-checkbox-container-height, 18px)}:host .md3-checkbox .md3-checkbox__background{width:var(--md-checkbox-container-width, 18px)}:host .md3-checkbox .md3-checkbox__background{border-radius:var(--md-checkbox-container-shape, 2px)}:host .md3-checkbox .md3-checkbox__native-control:not(:checked):not(:indeterminate):not([data-indeterminate=true]):enabled~.md3-checkbox__background{border-color:var(--md-checkbox-unselected-outline-color, var(--md-sys-color-on-surface, #1c1b1f))}:host .md3-checkbox .md3-checkbox__native-control:not(:checked):not(:indeterminate):not([data-indeterminate=true]):enabled:hover~.md3-checkbox__background{border-color:var(--md-checkbox-unselected-hover-outline-color, var(--md-sys-color-on-surface, #1c1b1f))}:host .md3-checkbox .md3-checkbox__native-control:not(:checked):not(:indeterminate):not([data-indeterminate=true]):enabled:focus~.md3-checkbox__background{border-color:var(--md-checkbox-unselected-focus-outline-color, var(--md-sys-color-on-surface, #1c1b1f))}:host .md3-checkbox .md3-checkbox__native-control:not(:checked):not(:indeterminate):not([data-indeterminate=true]):enabled:active~.md3-checkbox__background{border-color:var(--md-checkbox-unselected-pressed-outline-color, var(--md-sys-color-on-surface, #1c1b1f))}:host .md3-checkbox .md3-checkbox__native-control:not(:checked):not(:indeterminate):not([data-indeterminate=true]):disabled~.md3-checkbox__background{border-color:var(--md-checkbox-unselected-disabled-outline-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38))}:host .md3-checkbox .md3-checkbox__native-control:checked:enabled~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control:indeterminate:enabled~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control[data-indeterminate=true]:enabled~.md3-checkbox__background{background-color:var(--md-checkbox-selected-container-color, var(--md-sys-color-primary, #6750a4))}:host .md3-checkbox .md3-checkbox__native-control:checked:enabled~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control:indeterminate:enabled~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control[data-indeterminate=true]:enabled~.md3-checkbox__background{border-color:var(--md-checkbox-selected-container-color, var(--md-sys-color-primary, #6750a4))}:host .md3-checkbox .md3-checkbox__native-control:checked:enabled:hover~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control:indeterminate:enabled:hover~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control[data-indeterminate=true]:enabled:hover~.md3-checkbox__background{background-color:var(--md-checkbox-selected-hover-container-color, var(--md-sys-color-primary, #6750a4))}:host .md3-checkbox .md3-checkbox__native-control:checked:enabled:hover~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control:indeterminate:enabled:hover~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control[data-indeterminate=true]:enabled:hover~.md3-checkbox__background{border-color:var(--md-checkbox-selected-hover-container-color, var(--md-sys-color-primary, #6750a4))}:host .md3-checkbox .md3-checkbox__native-control:checked:enabled:focus~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control:indeterminate:enabled:focus~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control[data-indeterminate=true]:enabled:focus~.md3-checkbox__background{background-color:var(--md-checkbox-selected-focus-container-color, var(--md-sys-color-primary, #6750a4))}:host .md3-checkbox .md3-checkbox__native-control:checked:enabled:focus~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control:indeterminate:enabled:focus~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control[data-indeterminate=true]:enabled:focus~.md3-checkbox__background{border-color:var(--md-checkbox-selected-focus-container-color, var(--md-sys-color-primary, #6750a4))}:host .md3-checkbox .md3-checkbox__native-control:checked:enabled:active~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control:indeterminate:enabled:active~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control[data-indeterminate=true]:enabled:active~.md3-checkbox__background{background-color:var(--md-checkbox-selected-pressed-container-color, var(--md-sys-color-primary, #6750a4))}:host .md3-checkbox .md3-checkbox__native-control:checked:enabled:active~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control:indeterminate:enabled:active~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control[data-indeterminate=true]:enabled:active~.md3-checkbox__background{border-color:var(--md-checkbox-selected-pressed-container-color, var(--md-sys-color-primary, #6750a4))}:host .md3-checkbox .md3-checkbox__native-control:checked:disabled~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control:indeterminate:disabled~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control[data-indeterminate=true]:disabled~.md3-checkbox__background{background-color:var(--md-checkbox-selected-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38))}:host .md3-checkbox .md3-checkbox__native-control:checked:disabled~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control:indeterminate:disabled~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control[data-indeterminate=true]:disabled~.md3-checkbox__background{border-color:var(--md-checkbox-selected-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38))}@keyframes md3-checkbox-fade-in-background{0%{border-color:var(--md-checkbox-unselected-outline-color, var(--md-sys-color-on-surface, #1c1b1f));background-color:var(--md-checkbox-unselected-outline-color, var(--md-sys-color-on-surface, #1c1b1f))}50%{border-color:var(--md-checkbox-selected-container-color, var(--md-sys-color-primary, #6750a4));background-color:var(--md-checkbox-selected-container-color, var(--md-sys-color-primary, #6750a4))}}@keyframes md3-checkbox-fade-out-background{0%,80%{border-color:var(--md-checkbox-selected-container-color, var(--md-sys-color-primary, #6750a4));background-color:var(--md-checkbox-selected-container-color, var(--md-sys-color-primary, #6750a4))}100%{border-color:var(--md-checkbox-unselected-outline-color, var(--md-sys-color-on-surface, #1c1b1f));background-color:rgba(0,0,0,0)}}:host .md3-checkbox .md3-checkbox--anim-unchecked-checked .md3-checkbox__native-control:enabled~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox--anim-unchecked-indeterminate .md3-checkbox__native-control:enabled~.md3-checkbox__background{animation-name:md3-checkbox-fade-in-background}:host .md3-checkbox .md3-checkbox--anim-checked-unchecked .md3-checkbox__native-control:enabled~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox--anim-indeterminate-unchecked .md3-checkbox__native-control:enabled~.md3-checkbox__background{animation-name:md3-checkbox-fade-out-background}:host .md3-checkbox .md3-checkbox__native-control:checked:enabled~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control:indeterminate:enabled~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control[data-indeterminate=true]:enabled~.md3-checkbox__background{border-width:var(--md-checkbox-selected-outline-width, 0)}:host .md3-checkbox .md3-checkbox__native-control:checked:enabled:hover~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control:indeterminate:enabled:hover~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control[data-indeterminate=true]:enabled:hover~.md3-checkbox__background{border-width:var(--md-checkbox-selected-hover-outline-width, 0)}:host .md3-checkbox .md3-checkbox__native-control:checked:enabled:focus~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control:indeterminate:enabled:focus~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control[data-indeterminate=true]:enabled:focus~.md3-checkbox__background{border-width:var(--md-checkbox-selected-focus-outline-width, 0)}:host .md3-checkbox .md3-checkbox__native-control:checked:enabled:active~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control:indeterminate:enabled:active~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control[data-indeterminate=true]:enabled:active~.md3-checkbox__background{border-width:var(--md-checkbox-selected-pressed-outline-width, 0)}:host .md3-checkbox .md3-checkbox__native-control:checked:disabled~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control:indeterminate:disabled~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control[data-indeterminate=true]:disabled~.md3-checkbox__background{border-width:var(--md-checkbox-selected-disabled-container-outline-width, 0)}:host .md3-checkbox .md3-checkbox__native-control:not(:checked):not(:indeterminate):not([data-indeterminate=true]):enabled~.md3-checkbox__background{border-width:var(--md-checkbox-unselected-outline-width, 2px)}:host .md3-checkbox .md3-checkbox__native-control:not(:checked):not(:indeterminate):not([data-indeterminate=true]):enabled:hover~.md3-checkbox__background{border-width:var(--md-checkbox-unselected-hover-outline-width, 2px)}:host .md3-checkbox .md3-checkbox__native-control:not(:checked):not(:indeterminate):not([data-indeterminate=true]):enabled:focus~.md3-checkbox__background{border-width:var(--md-checkbox-unselected-focus-outline-width, 2px)}:host .md3-checkbox .md3-checkbox__native-control:not(:checked):not(:indeterminate):not([data-indeterminate=true]):enabled:active~.md3-checkbox__background{border-width:var(--md-checkbox-unselected-pressed-outline-width, 2px)}:host .md3-checkbox .md3-checkbox__native-control:not(:checked):not(:indeterminate):not([data-indeterminate=true]):disabled~.md3-checkbox__background{border-width:var(--md-checkbox-unselected-disabled-outline-width, 2px)}:host .md3-checkbox .md3-checkbox__native-control~.md3-checkbox__background .md3-checkbox__checkmark{color:var(--md-checkbox-selected-icon-color, var(--md-sys-color-on-primary, #fff))}:host .md3-checkbox .md3-checkbox__native-control~.md3-checkbox__background .md3-checkbox__mixedmark{color:var(--md-checkbox-selected-icon-color, var(--md-sys-color-on-primary, #fff))}:host .md3-checkbox .md3-checkbox__native-control:hover~.md3-checkbox__background .md3-checkbox__checkmark{color:var(--md-checkbox-selected-hover-icon-color, var(--md-sys-color-on-primary, #fff))}:host .md3-checkbox .md3-checkbox__native-control:hover~.md3-checkbox__background .md3-checkbox__mixedmark{color:var(--md-checkbox-selected-hover-icon-color, var(--md-sys-color-on-primary, #fff))}:host .md3-checkbox .md3-checkbox__native-control:focus~.md3-checkbox__background .md3-checkbox__checkmark{color:var(--md-checkbox-selected-focus-icon-color, var(--md-sys-color-on-primary, #fff))}:host .md3-checkbox .md3-checkbox__native-control:focus~.md3-checkbox__background .md3-checkbox__mixedmark{color:var(--md-checkbox-selected-focus-icon-color, var(--md-sys-color-on-primary, #fff))}:host .md3-checkbox .md3-checkbox__native-control:active~.md3-checkbox__background .md3-checkbox__checkmark{color:var(--md-checkbox-selected-pressed-icon-color, var(--md-sys-color-on-primary, #fff))}:host .md3-checkbox .md3-checkbox__native-control:active~.md3-checkbox__background .md3-checkbox__mixedmark{color:var(--md-checkbox-selected-pressed-icon-color, var(--md-sys-color-on-primary, #fff))}:host .md3-checkbox .md3-checkbox__native-control:disabled~.md3-checkbox__background .md3-checkbox__checkmark{color:var(--md-checkbox-selected-disabled-icon-color, var(--md-sys-color-surface, #fffbfe))}:host .md3-checkbox .md3-checkbox__native-control:disabled~.md3-checkbox__background .md3-checkbox__mixedmark{color:var(--md-checkbox-selected-disabled-icon-color, var(--md-sys-color-surface, #fffbfe))}:host .md3-checkbox .md3-checkbox__ripple{height:var(--md-checkbox-state-layer-size, 40px);width:var(--md-checkbox-state-layer-size, 40px)}:host .md3-checkbox .md3-checkbox__native-control{width:var(--md-checkbox-state-layer-size, 40px);height:var(--md-checkbox-state-layer-size, 40px)}:host .md3-checkbox--touch{height:var(--md-checkbox-_touch-target-size, 48px);width:var(--md-checkbox-_touch-target-size, 48px)}:host .md3-checkbox--touch .md3-checkbox__native-control{width:var(--md-checkbox-_touch-target-size, 48px);height:var(--md-checkbox-_touch-target-size, 48px)}:host .md3-checkbox__native-control:checked:enabled~.md3-checkbox__ripple,:host .md3-checkbox__native-control:indeterminate:enabled~.md3-checkbox__ripple,:host .md3-checkbox__native-control[data-indeterminate=true]:enabled~.md3-checkbox__ripple{--md-ripple-hover-state-layer-color:var(--md-checkbox-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-focus-state-layer-color:var(--md-checkbox-selected-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-pressed-state-layer-color:var(--md-checkbox-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--md-ripple-hover-state-layer-opacity:var(--md-checkbox-selected-hover-state-layer-opacity, 0.08);--md-ripple-focus-state-layer-opacity:var(--md-checkbox-selected-focus-state-layer-opacity, 0.12);--md-ripple-pressed-state-layer-opacity:var(--md-checkbox-selected-pressed-state-layer-opacity, 0.12)}@keyframes md3-checkbox-unchecked-checked-checkmark-path{0%,50%{stroke-dashoffset:29.7833385}50%{animation-timing-function:cubic-bezier(0, 0, 0.2, 1)}100%{stroke-dashoffset:0}}@keyframes md3-checkbox-unchecked-indeterminate-mixedmark{0%,68.2%{transform:scaleX(0)}68.2%{animation-timing-function:cubic-bezier(0, 0, 0, 1)}100%{transform:scaleX(1)}}@keyframes md3-checkbox-checked-unchecked-checkmark-path{from{animation-timing-function:cubic-bezier(0.4, 0, 1, 1);opacity:1;stroke-dashoffset:0}to{opacity:0;stroke-dashoffset:-29.7833385}}@keyframes md3-checkbox-checked-indeterminate-checkmark{from{animation-timing-function:cubic-bezier(0, 0, 0.2, 1);transform:rotate(0deg);opacity:1}to{transform:rotate(45deg);opacity:0}}@keyframes md3-checkbox-indeterminate-checked-checkmark{from{animation-timing-function:cubic-bezier(0.14, 0, 0, 1);transform:rotate(45deg);opacity:0}to{transform:rotate(360deg);opacity:1}}@keyframes md3-checkbox-checked-indeterminate-mixedmark{from{animation-timing-function:md3-animation-deceleration-curve-timing-function;transform:rotate(-45deg);opacity:0}to{transform:rotate(0deg);opacity:1}}@keyframes md3-checkbox-indeterminate-checked-mixedmark{from{animation-timing-function:cubic-bezier(0.14, 0, 0, 1);transform:rotate(0deg);opacity:1}to{transform:rotate(315deg);opacity:0}}@keyframes md3-checkbox-indeterminate-unchecked-mixedmark{0%{animation-timing-function:linear;transform:scaleX(1);opacity:1}32.8%,100%{transform:scaleX(0);opacity:0}}:host .md3-checkbox--anim-unchecked-checked .md3-checkbox__background,:host .md3-checkbox--anim-unchecked-indeterminate .md3-checkbox__background,:host .md3-checkbox--anim-checked-unchecked .md3-checkbox__background,:host .md3-checkbox--anim-indeterminate-unchecked .md3-checkbox__background{animation-duration:180ms;animation-timing-function:linear}:host .md3-checkbox--anim-unchecked-checked .md3-checkbox__checkmark-path{animation:md3-checkbox-unchecked-checked-checkmark-path 180ms linear 0s;transition:none}:host .md3-checkbox--anim-unchecked-indeterminate .md3-checkbox__mixedmark{animation:md3-checkbox-unchecked-indeterminate-mixedmark 90ms linear 0s;transition:none}:host .md3-checkbox--anim-checked-unchecked .md3-checkbox__checkmark-path{animation:md3-checkbox-checked-unchecked-checkmark-path 90ms linear 0s;transition:none}:host .md3-checkbox--anim-checked-indeterminate .md3-checkbox__checkmark{animation:md3-checkbox-checked-indeterminate-checkmark 90ms linear 0s;transition:none}:host .md3-checkbox--anim-checked-indeterminate .md3-checkbox__mixedmark{animation:md3-checkbox-checked-indeterminate-mixedmark 90ms linear 0s;transition:none}:host .md3-checkbox--anim-indeterminate-checked .md3-checkbox__checkmark{animation:md3-checkbox-indeterminate-checked-checkmark 500ms linear 0s;transition:none}:host .md3-checkbox--anim-indeterminate-checked .md3-checkbox__mixedmark{animation:md3-checkbox-indeterminate-checked-mixedmark 500ms linear 0s;transition:none}:host .md3-checkbox--anim-indeterminate-unchecked .md3-checkbox__mixedmark{animation:md3-checkbox-indeterminate-unchecked-mixedmark 300ms linear 0s;transition:none}:host .md3-checkbox{display:inline-flex;position:relative;line-height:0;white-space:nowrap;cursor:pointer;vertical-align:bottom;z-index:0;align-items:center;justify-content:center;flex-direction:column}:host .md3-checkbox__background{display:inline-flex;position:absolute;align-items:center;justify-content:center;box-sizing:border-box;border-style:solid;background-color:rgba(0,0,0,0);pointer-events:none;will-change:background-color,border-color;transition:background-color 90ms cubic-bezier(0.4, 0, 0.6, 1) 0ms,border-color 90ms cubic-bezier(0.4, 0, 0.6, 1) 0ms}:host .md3-checkbox__checkmark{padding:2.8px;position:absolute;inset:0;box-sizing:border-box;width:100%;border:none;transition:opacity 180ms cubic-bezier(0.4, 0, 0.6, 1) 0ms}:host .md3-checkbox__checkmark-path{transition:stroke-dashoffset 180ms cubic-bezier(0.4, 0, 0.6, 1) 0ms;stroke:currentColor;stroke-width:4px;stroke-dashoffset:29.7833385;stroke-dasharray:29.7833385}:host .md3-checkbox__mixedmark{width:100%;height:0;transform:scaleX(0) rotate(0deg);border-width:1px;border-style:solid;background-color:currentColor;border-color:currentColor;opacity:0;transition:opacity 90ms cubic-bezier(0.4, 0, 0.6, 1) 0ms,transform 90ms cubic-bezier(0.4, 0, 0.6, 1) 0ms;margin:4px}:host .md3-checkbox__native-control:checked~.md3-checkbox__background,:host .md3-checkbox__native-control:indeterminate~.md3-checkbox__background,:host .md3-checkbox__native-control[data-indeterminate=true]~.md3-checkbox__background{transition:border-color 90ms cubic-bezier(0, 0, 0.2, 1) 0ms,background-color 90ms cubic-bezier(0, 0, 0.2, 1) 0ms}:host .md3-checkbox__native-control:checked~.md3-checkbox__background .md3-checkbox__checkmark-path,:host .md3-checkbox__native-control:indeterminate~.md3-checkbox__background .md3-checkbox__checkmark-path,:host .md3-checkbox__native-control[data-indeterminate=true]~.md3-checkbox__background .md3-checkbox__checkmark-path{stroke-dashoffset:0}:host .md3-checkbox__native-control{position:absolute;margin:0;padding:0;opacity:0;cursor:inherit}:host .md3-checkbox--disabled,:host .md3-checkbox__native-control:disabled{cursor:default;pointer-events:none}:host .md3-checkbox__native-control:checked~.md3-checkbox__background .md3-checkbox__checkmark{transition:opacity 180ms cubic-bezier(0, 0, 0.2, 1) 0ms,transform 180ms cubic-bezier(0, 0, 0.2, 1) 0ms;opacity:1}:host .md3-checkbox__native-control:checked~.md3-checkbox__background .md3-checkbox__mixedmark{transform:scaleX(1) rotate(-45deg)}:host .md3-checkbox__native-control:indeterminate~.md3-checkbox__background .md3-checkbox__checkmark,:host .md3-checkbox__native-control[data-indeterminate=true]~.md3-checkbox__background .md3-checkbox__checkmark{transform:rotate(45deg);opacity:0;transition:opacity 90ms cubic-bezier(0.4, 0, 0.6, 1) 0ms,transform 90ms cubic-bezier(0.4, 0, 0.6, 1) 0ms}:host .md3-checkbox__native-control:indeterminate~.md3-checkbox__background .md3-checkbox__mixedmark,:host .md3-checkbox__native-control[data-indeterminate=true]~.md3-checkbox__background .md3-checkbox__mixedmark{transform:scaleX(1) rotate(0deg);opacity:1}:host .md3-checkbox__ripple{position:absolute;display:inline-flex;z-index:-1}@media(forced-colors: active){:host .md3-checkbox .md3-checkbox__native-control:not(:checked):not(:indeterminate):not([data-indeterminate=true]):enabled~.md3-checkbox__background{border-color:CanvasText}:host .md3-checkbox .md3-checkbox__native-control:not(:checked):not(:indeterminate):not([data-indeterminate=true]):enabled:hover~.md3-checkbox__background{border-color:CanvasText}:host .md3-checkbox .md3-checkbox__native-control:not(:checked):not(:indeterminate):not([data-indeterminate=true]):enabled:focus~.md3-checkbox__background{border-color:CanvasText}:host .md3-checkbox .md3-checkbox__native-control:not(:checked):not(:indeterminate):not([data-indeterminate=true]):enabled:active~.md3-checkbox__background{border-color:CanvasText}:host .md3-checkbox .md3-checkbox__native-control:not(:checked):not(:indeterminate):not([data-indeterminate=true]):disabled~.md3-checkbox__background{border-color:GrayText}:host .md3-checkbox .md3-checkbox__native-control:checked:enabled~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control:indeterminate:enabled~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control[data-indeterminate=true]:enabled~.md3-checkbox__background{background-color:CanvasText}:host .md3-checkbox .md3-checkbox__native-control:checked:enabled~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control:indeterminate:enabled~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control[data-indeterminate=true]:enabled~.md3-checkbox__background{border-color:CanvasText}:host .md3-checkbox .md3-checkbox__native-control:checked:enabled:hover~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control:indeterminate:enabled:hover~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control[data-indeterminate=true]:enabled:hover~.md3-checkbox__background{background-color:CanvasText}:host .md3-checkbox .md3-checkbox__native-control:checked:enabled:hover~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control:indeterminate:enabled:hover~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control[data-indeterminate=true]:enabled:hover~.md3-checkbox__background{border-color:CanvasText}:host .md3-checkbox .md3-checkbox__native-control:checked:enabled:focus~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control:indeterminate:enabled:focus~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control[data-indeterminate=true]:enabled:focus~.md3-checkbox__background{background-color:CanvasText}:host .md3-checkbox .md3-checkbox__native-control:checked:enabled:focus~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control:indeterminate:enabled:focus~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control[data-indeterminate=true]:enabled:focus~.md3-checkbox__background{border-color:CanvasText}:host .md3-checkbox .md3-checkbox__native-control:checked:enabled:active~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control:indeterminate:enabled:active~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control[data-indeterminate=true]:enabled:active~.md3-checkbox__background{background-color:CanvasText}:host .md3-checkbox .md3-checkbox__native-control:checked:enabled:active~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control:indeterminate:enabled:active~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control[data-indeterminate=true]:enabled:active~.md3-checkbox__background{border-color:CanvasText}:host .md3-checkbox .md3-checkbox__native-control:checked:disabled~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control:indeterminate:disabled~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control[data-indeterminate=true]:disabled~.md3-checkbox__background{background-color:GrayText}:host .md3-checkbox .md3-checkbox__native-control:checked:disabled~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control:indeterminate:disabled~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control[data-indeterminate=true]:disabled~.md3-checkbox__background{border-color:GrayText}@keyframes md3-checkbox-fade-in-background{0%{border-color:CanvasText;background-color:CanvasText}50%{border-color:CanvasText;background-color:CanvasText}}@keyframes md3-checkbox-fade-out-background{0%,80%{border-color:CanvasText;background-color:CanvasText}100%{border-color:CanvasText;background-color:rgba(0,0,0,0)}}:host .md3-checkbox .md3-checkbox--anim-unchecked-checked .md3-checkbox__native-control:enabled~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox--anim-unchecked-indeterminate .md3-checkbox__native-control:enabled~.md3-checkbox__background{animation-name:md3-checkbox-fade-in-background}:host .md3-checkbox .md3-checkbox--anim-checked-unchecked .md3-checkbox__native-control:enabled~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox--anim-indeterminate-unchecked .md3-checkbox__native-control:enabled~.md3-checkbox__background{animation-name:md3-checkbox-fade-out-background}:host .md3-checkbox .md3-checkbox__native-control~.md3-checkbox__background .md3-checkbox__checkmark{color:Canvas}:host .md3-checkbox .md3-checkbox__native-control~.md3-checkbox__background .md3-checkbox__mixedmark{color:Canvas}:host .md3-checkbox .md3-checkbox__native-control:hover~.md3-checkbox__background .md3-checkbox__checkmark{color:Canvas}:host .md3-checkbox .md3-checkbox__native-control:hover~.md3-checkbox__background .md3-checkbox__mixedmark{color:Canvas}:host .md3-checkbox .md3-checkbox__native-control:focus~.md3-checkbox__background .md3-checkbox__checkmark{color:Canvas}:host .md3-checkbox .md3-checkbox__native-control:focus~.md3-checkbox__background .md3-checkbox__mixedmark{color:Canvas}:host .md3-checkbox .md3-checkbox__native-control:active~.md3-checkbox__background .md3-checkbox__checkmark{color:Canvas}:host .md3-checkbox .md3-checkbox__native-control:active~.md3-checkbox__background .md3-checkbox__mixedmark{color:Canvas}:host .md3-checkbox .md3-checkbox__native-control:disabled~.md3-checkbox__background .md3-checkbox__checkmark{color:Canvas}:host .md3-checkbox .md3-checkbox__native-control:disabled~.md3-checkbox__background .md3-checkbox__mixedmark{color:Canvas}}/*# sourceMappingURL=checkbox-styles.css.map */
+`;
+//# sourceMappingURL=checkbox-styles.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-styles.css.js","sourceRoot":"","sources":["checkbox-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-checkbox-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--md-ripple-focus-state-layer-color:var(--md-checkbox-unselected-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--md-ripple-pressed-state-layer-color:var(--md-checkbox-unselected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-hover-state-layer-opacity:var(--md-checkbox-unselected-hover-state-layer-opacity, 0.08);--md-ripple-focus-state-layer-opacity:var(--md-checkbox-unselected-focus-state-layer-opacity, 0.12);--md-ripple-pressed-state-layer-opacity:var(--md-checkbox-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-checkbox{height:var(--md-checkbox-state-layer-size, 40px);width:var(--md-checkbox-state-layer-size, 40px)}:host .md3-checkbox .md3-checkbox__background{height:var(--md-checkbox-icon-size, 18px)}:host .md3-checkbox .md3-checkbox__background{width:var(--md-checkbox-icon-size, 18px)}:host .md3-checkbox .md3-checkbox__background{height:var(--md-checkbox-container-height, 18px)}:host .md3-checkbox .md3-checkbox__background{width:var(--md-checkbox-container-width, 18px)}:host .md3-checkbox .md3-checkbox__background{border-radius:var(--md-checkbox-container-shape, 2px)}:host .md3-checkbox .md3-checkbox__native-control:not(:checked):not(:indeterminate):not([data-indeterminate=true]):enabled~.md3-checkbox__background{border-color:var(--md-checkbox-unselected-outline-color, var(--md-sys-color-on-surface, #1c1b1f))}:host .md3-checkbox .md3-checkbox__native-control:not(:checked):not(:indeterminate):not([data-indeterminate=true]):enabled:hover~.md3-checkbox__background{border-color:var(--md-checkbox-unselected-hover-outline-color, var(--md-sys-color-on-surface, #1c1b1f))}:host .md3-checkbox .md3-checkbox__native-control:not(:checked):not(:indeterminate):not([data-indeterminate=true]):enabled:focus~.md3-checkbox__background{border-color:var(--md-checkbox-unselected-focus-outline-color, var(--md-sys-color-on-surface, #1c1b1f))}:host .md3-checkbox .md3-checkbox__native-control:not(:checked):not(:indeterminate):not([data-indeterminate=true]):enabled:active~.md3-checkbox__background{border-color:var(--md-checkbox-unselected-pressed-outline-color, var(--md-sys-color-on-surface, #1c1b1f))}:host .md3-checkbox .md3-checkbox__native-control:not(:checked):not(:indeterminate):not([data-indeterminate=true]):disabled~.md3-checkbox__background{border-color:var(--md-checkbox-unselected-disabled-outline-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38))}:host .md3-checkbox .md3-checkbox__native-control:checked:enabled~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control:indeterminate:enabled~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control[data-indeterminate=true]:enabled~.md3-checkbox__background{background-color:var(--md-checkbox-selected-container-color, var(--md-sys-color-primary, #6750a4))}:host .md3-checkbox .md3-checkbox__native-control:checked:enabled~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control:indeterminate:enabled~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control[data-indeterminate=true]:enabled~.md3-checkbox__background{border-color:var(--md-checkbox-selected-container-color, var(--md-sys-color-primary, #6750a4))}:host .md3-checkbox .md3-checkbox__native-control:checked:enabled:hover~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control:indeterminate:enabled:hover~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control[data-indeterminate=true]:enabled:hover~.md3-checkbox__background{background-color:var(--md-checkbox-selected-hover-container-color, var(--md-sys-color-primary, #6750a4))}:host .md3-checkbox .md3-checkbox__native-control:checked:enabled:hover~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control:indeterminate:enabled:hover~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control[data-indeterminate=true]:enabled:hover~.md3-checkbox__background{border-color:var(--md-checkbox-selected-hover-container-color, var(--md-sys-color-primary, #6750a4))}:host .md3-checkbox .md3-checkbox__native-control:checked:enabled:focus~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control:indeterminate:enabled:focus~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control[data-indeterminate=true]:enabled:focus~.md3-checkbox__background{background-color:var(--md-checkbox-selected-focus-container-color, var(--md-sys-color-primary, #6750a4))}:host .md3-checkbox .md3-checkbox__native-control:checked:enabled:focus~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control:indeterminate:enabled:focus~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control[data-indeterminate=true]:enabled:focus~.md3-checkbox__background{border-color:var(--md-checkbox-selected-focus-container-color, var(--md-sys-color-primary, #6750a4))}:host .md3-checkbox .md3-checkbox__native-control:checked:enabled:active~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control:indeterminate:enabled:active~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control[data-indeterminate=true]:enabled:active~.md3-checkbox__background{background-color:var(--md-checkbox-selected-pressed-container-color, var(--md-sys-color-primary, #6750a4))}:host .md3-checkbox .md3-checkbox__native-control:checked:enabled:active~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control:indeterminate:enabled:active~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control[data-indeterminate=true]:enabled:active~.md3-checkbox__background{border-color:var(--md-checkbox-selected-pressed-container-color, var(--md-sys-color-primary, #6750a4))}:host .md3-checkbox .md3-checkbox__native-control:checked:disabled~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control:indeterminate:disabled~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control[data-indeterminate=true]:disabled~.md3-checkbox__background{background-color:var(--md-checkbox-selected-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38))}:host .md3-checkbox .md3-checkbox__native-control:checked:disabled~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control:indeterminate:disabled~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control[data-indeterminate=true]:disabled~.md3-checkbox__background{border-color:var(--md-checkbox-selected-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38))}@keyframes md3-checkbox-fade-in-background{0%{border-color:var(--md-checkbox-unselected-outline-color, var(--md-sys-color-on-surface, #1c1b1f));background-color:var(--md-checkbox-unselected-outline-color, var(--md-sys-color-on-surface, #1c1b1f))}50%{border-color:var(--md-checkbox-selected-container-color, var(--md-sys-color-primary, #6750a4));background-color:var(--md-checkbox-selected-container-color, var(--md-sys-color-primary, #6750a4))}}@keyframes md3-checkbox-fade-out-background{0%,80%{border-color:var(--md-checkbox-selected-container-color, var(--md-sys-color-primary, #6750a4));background-color:var(--md-checkbox-selected-container-color, var(--md-sys-color-primary, #6750a4))}100%{border-color:var(--md-checkbox-unselected-outline-color, var(--md-sys-color-on-surface, #1c1b1f));background-color:rgba(0,0,0,0)}}:host .md3-checkbox .md3-checkbox--anim-unchecked-checked .md3-checkbox__native-control:enabled~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox--anim-unchecked-indeterminate .md3-checkbox__native-control:enabled~.md3-checkbox__background{animation-name:md3-checkbox-fade-in-background}:host .md3-checkbox .md3-checkbox--anim-checked-unchecked .md3-checkbox__native-control:enabled~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox--anim-indeterminate-unchecked .md3-checkbox__native-control:enabled~.md3-checkbox__background{animation-name:md3-checkbox-fade-out-background}:host .md3-checkbox .md3-checkbox__native-control:checked:enabled~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control:indeterminate:enabled~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control[data-indeterminate=true]:enabled~.md3-checkbox__background{border-width:var(--md-checkbox-selected-outline-width, 0)}:host .md3-checkbox .md3-checkbox__native-control:checked:enabled:hover~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control:indeterminate:enabled:hover~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control[data-indeterminate=true]:enabled:hover~.md3-checkbox__background{border-width:var(--md-checkbox-selected-hover-outline-width, 0)}:host .md3-checkbox .md3-checkbox__native-control:checked:enabled:focus~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control:indeterminate:enabled:focus~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control[data-indeterminate=true]:enabled:focus~.md3-checkbox__background{border-width:var(--md-checkbox-selected-focus-outline-width, 0)}:host .md3-checkbox .md3-checkbox__native-control:checked:enabled:active~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control:indeterminate:enabled:active~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control[data-indeterminate=true]:enabled:active~.md3-checkbox__background{border-width:var(--md-checkbox-selected-pressed-outline-width, 0)}:host .md3-checkbox .md3-checkbox__native-control:checked:disabled~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control:indeterminate:disabled~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control[data-indeterminate=true]:disabled~.md3-checkbox__background{border-width:var(--md-checkbox-selected-disabled-container-outline-width, 0)}:host .md3-checkbox .md3-checkbox__native-control:not(:checked):not(:indeterminate):not([data-indeterminate=true]):enabled~.md3-checkbox__background{border-width:var(--md-checkbox-unselected-outline-width, 2px)}:host .md3-checkbox .md3-checkbox__native-control:not(:checked):not(:indeterminate):not([data-indeterminate=true]):enabled:hover~.md3-checkbox__background{border-width:var(--md-checkbox-unselected-hover-outline-width, 2px)}:host .md3-checkbox .md3-checkbox__native-control:not(:checked):not(:indeterminate):not([data-indeterminate=true]):enabled:focus~.md3-checkbox__background{border-width:var(--md-checkbox-unselected-focus-outline-width, 2px)}:host .md3-checkbox .md3-checkbox__native-control:not(:checked):not(:indeterminate):not([data-indeterminate=true]):enabled:active~.md3-checkbox__background{border-width:var(--md-checkbox-unselected-pressed-outline-width, 2px)}:host .md3-checkbox .md3-checkbox__native-control:not(:checked):not(:indeterminate):not([data-indeterminate=true]):disabled~.md3-checkbox__background{border-width:var(--md-checkbox-unselected-disabled-outline-width, 2px)}:host .md3-checkbox .md3-checkbox__native-control~.md3-checkbox__background .md3-checkbox__checkmark{color:var(--md-checkbox-selected-icon-color, var(--md-sys-color-on-primary, #fff))}:host .md3-checkbox .md3-checkbox__native-control~.md3-checkbox__background .md3-checkbox__mixedmark{color:var(--md-checkbox-selected-icon-color, var(--md-sys-color-on-primary, #fff))}:host .md3-checkbox .md3-checkbox__native-control:hover~.md3-checkbox__background .md3-checkbox__checkmark{color:var(--md-checkbox-selected-hover-icon-color, var(--md-sys-color-on-primary, #fff))}:host .md3-checkbox .md3-checkbox__native-control:hover~.md3-checkbox__background .md3-checkbox__mixedmark{color:var(--md-checkbox-selected-hover-icon-color, var(--md-sys-color-on-primary, #fff))}:host .md3-checkbox .md3-checkbox__native-control:focus~.md3-checkbox__background .md3-checkbox__checkmark{color:var(--md-checkbox-selected-focus-icon-color, var(--md-sys-color-on-primary, #fff))}:host .md3-checkbox .md3-checkbox__native-control:focus~.md3-checkbox__background .md3-checkbox__mixedmark{color:var(--md-checkbox-selected-focus-icon-color, var(--md-sys-color-on-primary, #fff))}:host .md3-checkbox .md3-checkbox__native-control:active~.md3-checkbox__background .md3-checkbox__checkmark{color:var(--md-checkbox-selected-pressed-icon-color, var(--md-sys-color-on-primary, #fff))}:host .md3-checkbox .md3-checkbox__native-control:active~.md3-checkbox__background .md3-checkbox__mixedmark{color:var(--md-checkbox-selected-pressed-icon-color, var(--md-sys-color-on-primary, #fff))}:host .md3-checkbox .md3-checkbox__native-control:disabled~.md3-checkbox__background .md3-checkbox__checkmark{color:var(--md-checkbox-selected-disabled-icon-color, var(--md-sys-color-surface, #fffbfe))}:host .md3-checkbox .md3-checkbox__native-control:disabled~.md3-checkbox__background .md3-checkbox__mixedmark{color:var(--md-checkbox-selected-disabled-icon-color, var(--md-sys-color-surface, #fffbfe))}:host .md3-checkbox .md3-checkbox__ripple{height:var(--md-checkbox-state-layer-size, 40px);width:var(--md-checkbox-state-layer-size, 40px)}:host .md3-checkbox .md3-checkbox__native-control{width:var(--md-checkbox-state-layer-size, 40px);height:var(--md-checkbox-state-layer-size, 40px)}:host .md3-checkbox--touch{height:var(--md-checkbox-_touch-target-size, 48px);width:var(--md-checkbox-_touch-target-size, 48px)}:host .md3-checkbox--touch .md3-checkbox__native-control{width:var(--md-checkbox-_touch-target-size, 48px);height:var(--md-checkbox-_touch-target-size, 48px)}:host .md3-checkbox__native-control:checked:enabled~.md3-checkbox__ripple,:host .md3-checkbox__native-control:indeterminate:enabled~.md3-checkbox__ripple,:host .md3-checkbox__native-control[data-indeterminate=true]:enabled~.md3-checkbox__ripple{--md-ripple-hover-state-layer-color:var(--md-checkbox-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-focus-state-layer-color:var(--md-checkbox-selected-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-pressed-state-layer-color:var(--md-checkbox-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--md-ripple-hover-state-layer-opacity:var(--md-checkbox-selected-hover-state-layer-opacity, 0.08);--md-ripple-focus-state-layer-opacity:var(--md-checkbox-selected-focus-state-layer-opacity, 0.12);--md-ripple-pressed-state-layer-opacity:var(--md-checkbox-selected-pressed-state-layer-opacity, 0.12)}@keyframes md3-checkbox-unchecked-checked-checkmark-path{0%,50%{stroke-dashoffset:29.7833385}50%{animation-timing-function:cubic-bezier(0, 0, 0.2, 1)}100%{stroke-dashoffset:0}}@keyframes md3-checkbox-unchecked-indeterminate-mixedmark{0%,68.2%{transform:scaleX(0)}68.2%{animation-timing-function:cubic-bezier(0, 0, 0, 1)}100%{transform:scaleX(1)}}@keyframes md3-checkbox-checked-unchecked-checkmark-path{from{animation-timing-function:cubic-bezier(0.4, 0, 1, 1);opacity:1;stroke-dashoffset:0}to{opacity:0;stroke-dashoffset:-29.7833385}}@keyframes md3-checkbox-checked-indeterminate-checkmark{from{animation-timing-function:cubic-bezier(0, 0, 0.2, 1);transform:rotate(0deg);opacity:1}to{transform:rotate(45deg);opacity:0}}@keyframes md3-checkbox-indeterminate-checked-checkmark{from{animation-timing-function:cubic-bezier(0.14, 0, 0, 1);transform:rotate(45deg);opacity:0}to{transform:rotate(360deg);opacity:1}}@keyframes md3-checkbox-checked-indeterminate-mixedmark{from{animation-timing-function:md3-animation-deceleration-curve-timing-function;transform:rotate(-45deg);opacity:0}to{transform:rotate(0deg);opacity:1}}@keyframes md3-checkbox-indeterminate-checked-mixedmark{from{animation-timing-function:cubic-bezier(0.14, 0, 0, 1);transform:rotate(0deg);opacity:1}to{transform:rotate(315deg);opacity:0}}@keyframes md3-checkbox-indeterminate-unchecked-mixedmark{0%{animation-timing-function:linear;transform:scaleX(1);opacity:1}32.8%,100%{transform:scaleX(0);opacity:0}}:host .md3-checkbox--anim-unchecked-checked .md3-checkbox__background,:host .md3-checkbox--anim-unchecked-indeterminate .md3-checkbox__background,:host .md3-checkbox--anim-checked-unchecked .md3-checkbox__background,:host .md3-checkbox--anim-indeterminate-unchecked .md3-checkbox__background{animation-duration:180ms;animation-timing-function:linear}:host .md3-checkbox--anim-unchecked-checked .md3-checkbox__checkmark-path{animation:md3-checkbox-unchecked-checked-checkmark-path 180ms linear 0s;transition:none}:host .md3-checkbox--anim-unchecked-indeterminate .md3-checkbox__mixedmark{animation:md3-checkbox-unchecked-indeterminate-mixedmark 90ms linear 0s;transition:none}:host .md3-checkbox--anim-checked-unchecked .md3-checkbox__checkmark-path{animation:md3-checkbox-checked-unchecked-checkmark-path 90ms linear 0s;transition:none}:host .md3-checkbox--anim-checked-indeterminate .md3-checkbox__checkmark{animation:md3-checkbox-checked-indeterminate-checkmark 90ms linear 0s;transition:none}:host .md3-checkbox--anim-checked-indeterminate .md3-checkbox__mixedmark{animation:md3-checkbox-checked-indeterminate-mixedmark 90ms linear 0s;transition:none}:host .md3-checkbox--anim-indeterminate-checked .md3-checkbox__checkmark{animation:md3-checkbox-indeterminate-checked-checkmark 500ms linear 0s;transition:none}:host .md3-checkbox--anim-indeterminate-checked .md3-checkbox__mixedmark{animation:md3-checkbox-indeterminate-checked-mixedmark 500ms linear 0s;transition:none}:host .md3-checkbox--anim-indeterminate-unchecked .md3-checkbox__mixedmark{animation:md3-checkbox-indeterminate-unchecked-mixedmark 300ms linear 0s;transition:none}:host .md3-checkbox{display:inline-flex;position:relative;line-height:0;white-space:nowrap;cursor:pointer;vertical-align:bottom;z-index:0;align-items:center;justify-content:center;flex-direction:column}:host .md3-checkbox__background{display:inline-flex;position:absolute;align-items:center;justify-content:center;box-sizing:border-box;border-style:solid;background-color:rgba(0,0,0,0);pointer-events:none;will-change:background-color,border-color;transition:background-color 90ms cubic-bezier(0.4, 0, 0.6, 1) 0ms,border-color 90ms cubic-bezier(0.4, 0, 0.6, 1) 0ms}:host .md3-checkbox__checkmark{padding:2.8px;position:absolute;inset:0;box-sizing:border-box;width:100%;border:none;transition:opacity 180ms cubic-bezier(0.4, 0, 0.6, 1) 0ms}:host .md3-checkbox__checkmark-path{transition:stroke-dashoffset 180ms cubic-bezier(0.4, 0, 0.6, 1) 0ms;stroke:currentColor;stroke-width:4px;stroke-dashoffset:29.7833385;stroke-dasharray:29.7833385}:host .md3-checkbox__mixedmark{width:100%;height:0;transform:scaleX(0) rotate(0deg);border-width:1px;border-style:solid;background-color:currentColor;border-color:currentColor;opacity:0;transition:opacity 90ms cubic-bezier(0.4, 0, 0.6, 1) 0ms,transform 90ms cubic-bezier(0.4, 0, 0.6, 1) 0ms;margin:4px}:host .md3-checkbox__native-control:checked~.md3-checkbox__background,:host .md3-checkbox__native-control:indeterminate~.md3-checkbox__background,:host .md3-checkbox__native-control[data-indeterminate=true]~.md3-checkbox__background{transition:border-color 90ms cubic-bezier(0, 0, 0.2, 1) 0ms,background-color 90ms cubic-bezier(0, 0, 0.2, 1) 0ms}:host .md3-checkbox__native-control:checked~.md3-checkbox__background .md3-checkbox__checkmark-path,:host .md3-checkbox__native-control:indeterminate~.md3-checkbox__background .md3-checkbox__checkmark-path,:host .md3-checkbox__native-control[data-indeterminate=true]~.md3-checkbox__background .md3-checkbox__checkmark-path{stroke-dashoffset:0}:host .md3-checkbox__native-control{position:absolute;margin:0;padding:0;opacity:0;cursor:inherit}:host .md3-checkbox--disabled,:host .md3-checkbox__native-control:disabled{cursor:default;pointer-events:none}:host .md3-checkbox__native-control:checked~.md3-checkbox__background .md3-checkbox__checkmark{transition:opacity 180ms cubic-bezier(0, 0, 0.2, 1) 0ms,transform 180ms cubic-bezier(0, 0, 0.2, 1) 0ms;opacity:1}:host .md3-checkbox__native-control:checked~.md3-checkbox__background .md3-checkbox__mixedmark{transform:scaleX(1) rotate(-45deg)}:host .md3-checkbox__native-control:indeterminate~.md3-checkbox__background .md3-checkbox__checkmark,:host .md3-checkbox__native-control[data-indeterminate=true]~.md3-checkbox__background .md3-checkbox__checkmark{transform:rotate(45deg);opacity:0;transition:opacity 90ms cubic-bezier(0.4, 0, 0.6, 1) 0ms,transform 90ms cubic-bezier(0.4, 0, 0.6, 1) 0ms}:host .md3-checkbox__native-control:indeterminate~.md3-checkbox__background .md3-checkbox__mixedmark,:host .md3-checkbox__native-control[data-indeterminate=true]~.md3-checkbox__background .md3-checkbox__mixedmark{transform:scaleX(1) rotate(0deg);opacity:1}:host .md3-checkbox__ripple{position:absolute;display:inline-flex;z-index:-1}@media(forced-colors: active){:host .md3-checkbox .md3-checkbox__native-control:not(:checked):not(:indeterminate):not([data-indeterminate=true]):enabled~.md3-checkbox__background{border-color:CanvasText}:host .md3-checkbox .md3-checkbox__native-control:not(:checked):not(:indeterminate):not([data-indeterminate=true]):enabled:hover~.md3-checkbox__background{border-color:CanvasText}:host .md3-checkbox .md3-checkbox__native-control:not(:checked):not(:indeterminate):not([data-indeterminate=true]):enabled:focus~.md3-checkbox__background{border-color:CanvasText}:host .md3-checkbox .md3-checkbox__native-control:not(:checked):not(:indeterminate):not([data-indeterminate=true]):enabled:active~.md3-checkbox__background{border-color:CanvasText}:host .md3-checkbox .md3-checkbox__native-control:not(:checked):not(:indeterminate):not([data-indeterminate=true]):disabled~.md3-checkbox__background{border-color:GrayText}:host .md3-checkbox .md3-checkbox__native-control:checked:enabled~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control:indeterminate:enabled~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control[data-indeterminate=true]:enabled~.md3-checkbox__background{background-color:CanvasText}:host .md3-checkbox .md3-checkbox__native-control:checked:enabled~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control:indeterminate:enabled~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control[data-indeterminate=true]:enabled~.md3-checkbox__background{border-color:CanvasText}:host .md3-checkbox .md3-checkbox__native-control:checked:enabled:hover~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control:indeterminate:enabled:hover~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control[data-indeterminate=true]:enabled:hover~.md3-checkbox__background{background-color:CanvasText}:host .md3-checkbox .md3-checkbox__native-control:checked:enabled:hover~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control:indeterminate:enabled:hover~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control[data-indeterminate=true]:enabled:hover~.md3-checkbox__background{border-color:CanvasText}:host .md3-checkbox .md3-checkbox__native-control:checked:enabled:focus~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control:indeterminate:enabled:focus~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control[data-indeterminate=true]:enabled:focus~.md3-checkbox__background{background-color:CanvasText}:host .md3-checkbox .md3-checkbox__native-control:checked:enabled:focus~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control:indeterminate:enabled:focus~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control[data-indeterminate=true]:enabled:focus~.md3-checkbox__background{border-color:CanvasText}:host .md3-checkbox .md3-checkbox__native-control:checked:enabled:active~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control:indeterminate:enabled:active~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control[data-indeterminate=true]:enabled:active~.md3-checkbox__background{background-color:CanvasText}:host .md3-checkbox .md3-checkbox__native-control:checked:enabled:active~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control:indeterminate:enabled:active~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control[data-indeterminate=true]:enabled:active~.md3-checkbox__background{border-color:CanvasText}:host .md3-checkbox .md3-checkbox__native-control:checked:disabled~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control:indeterminate:disabled~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control[data-indeterminate=true]:disabled~.md3-checkbox__background{background-color:GrayText}:host .md3-checkbox .md3-checkbox__native-control:checked:disabled~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control:indeterminate:disabled~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox__native-control[data-indeterminate=true]:disabled~.md3-checkbox__background{border-color:GrayText}@keyframes md3-checkbox-fade-in-background{0%{border-color:CanvasText;background-color:CanvasText}50%{border-color:CanvasText;background-color:CanvasText}}@keyframes md3-checkbox-fade-out-background{0%,80%{border-color:CanvasText;background-color:CanvasText}100%{border-color:CanvasText;background-color:rgba(0,0,0,0)}}:host .md3-checkbox .md3-checkbox--anim-unchecked-checked .md3-checkbox__native-control:enabled~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox--anim-unchecked-indeterminate .md3-checkbox__native-control:enabled~.md3-checkbox__background{animation-name:md3-checkbox-fade-in-background}:host .md3-checkbox .md3-checkbox--anim-checked-unchecked .md3-checkbox__native-control:enabled~.md3-checkbox__background,:host .md3-checkbox .md3-checkbox--anim-indeterminate-unchecked .md3-checkbox__native-control:enabled~.md3-checkbox__background{animation-name:md3-checkbox-fade-out-background}:host .md3-checkbox .md3-checkbox__native-control~.md3-checkbox__background .md3-checkbox__checkmark{color:Canvas}:host .md3-checkbox .md3-checkbox__native-control~.md3-checkbox__background .md3-checkbox__mixedmark{color:Canvas}:host .md3-checkbox .md3-checkbox__native-control:hover~.md3-checkbox__background .md3-checkbox__checkmark{color:Canvas}:host .md3-checkbox .md3-checkbox__native-control:hover~.md3-checkbox__background .md3-checkbox__mixedmark{color:Canvas}:host .md3-checkbox .md3-checkbox__native-control:focus~.md3-checkbox__background .md3-checkbox__checkmark{color:Canvas}:host .md3-checkbox .md3-checkbox__native-control:focus~.md3-checkbox__background .md3-checkbox__mixedmark{color:Canvas}:host .md3-checkbox .md3-checkbox__native-control:active~.md3-checkbox__background .md3-checkbox__checkmark{color:Canvas}:host .md3-checkbox .md3-checkbox__native-control:active~.md3-checkbox__background .md3-checkbox__mixedmark{color:Canvas}:host .md3-checkbox .md3-checkbox__native-control:disabled~.md3-checkbox__background .md3-checkbox__checkmark{color:Canvas}:host .md3-checkbox .md3-checkbox__native-control:disabled~.md3-checkbox__background .md3-checkbox__mixedmark{color:Canvas}}/*# sourceMappingURL=checkbox-styles.css.map */\n`;\n "]}

package/checkbox/lib/checkbox-styles.scss

@@ -0,0 +1,15 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@use './checkbox';
+@use './checkbox-theme';
+@use '@material/web/tokens';
+
+:host {
+  @include checkbox-theme.theme-styles(tokens.md-comp-checkbox-values());
+  @include checkbox.static-styles();
+
+  display: inline-flex;
+}

package/checkbox/lib/checkbox.d.ts

@@ -0,0 +1,56 @@
+/**
+ * @license
+ * Copyright 2019 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';
+/** @soyCompatible */
+export declare class Checkbox extends ActionElement {
+    protected formElement: HTMLInputElement;
+    checked: boolean;
+    indeterminate: boolean;
+    disabled: boolean;
+    name: string;
+    value: string;
+    /** @soyPrefixAttribute */
+    ariaLabel: string;
+    /** @soyPrefixAttribute */
+    ariaLabelledBy: undefined | string;
+    /** @soyPrefixAttribute */
+    ariaDescribedBy: undefined | 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 animationClass: string;
+    protected showFocusRing: boolean;
+    ripple: MdRipple;
+    protected update(changedProperties: PropertyValues): void;
+    protected calculateAnimationStateName(checked: boolean, indeterminate: boolean, disabled: boolean): string;
+    /** @soyTemplate */
+    protected renderRipple(): TemplateResult;
+    /** @soyTemplate */
+    protected renderFocusRing(): TemplateResult;
+    /**
+     * @soyTemplate
+     * @soyAttributes checkboxAttributes: input
+     * @soyClasses checkboxClasses: .md3-checkbox
+     */
+    protected render(): TemplateResult;
+    protected setFormData(formData: FormData): void;
+    beginPress({ positionEvent }: BeginPressConfig): void;
+    endPress({ cancelled }: EndPressConfig): void;
+    protected handleFocus(): void;
+    protected handleBlur(): void;
+    protected handlePointerEnter(e: PointerEvent): void;
+    handlePointerLeave(e: PointerEvent): void;
+    handlePointerDown(e: PointerEvent): void;
+    protected handleChange(): void;
+    protected resetAnimationClass(): void;
+}