@material/web 1.0.0-pre.12 → 1.0.0-pre.14

package/checkbox/internal/_checkbox.scss

@@ -0,0 +1,471 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:math';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../focus/focus-ring';
+@use '../../ripple/ripple';
+@use '../../tokens';
+// go/keep-sorted end
+
+// Motion token values.
+$_md-sys-motion: tokens.md-sys-motion-values();
+// The stroke width of the icon marks.
+$_mark-stroke: 2px;
+// The coordinates in an 18px viewBox of the bottom left corner of the
+// indeterminate icon. Y is negative to fix an issue in Safari (see below).
+$_indeterminate-bottom-left: 4px, -10px;
+// The coordinates in an 18px viewBox of the bottom left corner of the
+// checkmark icon. Y is negative to fix an issue in Safari (see below).
+$_checkmark-bottom-left: 7px, -14px;
+
+@mixin theme($tokens) {
+  $supported-tokens: list.join(
+    tokens.$md-comp-checkbox-supported-tokens,
+    (
+      'container-shape-start-start',
+      'container-shape-start-end',
+      'container-shape-end-end',
+      'container-shape-end-start'
+    )
+  );
+
+  @each $token, $value in $tokens {
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Token `#{$token}` is not a supported token.';
+    }
+
+    @if $value {
+      --md-checkbox-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-checkbox-values();
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: var(--md-checkbox-#{$token}, #{$value});
+    }
+
+    // Support logical shape properties
+    --_container-shape-start-start: var(
+      --md-checkbox-container-shape-start-start,
+      var(--_container-shape)
+    );
+    --_container-shape-start-end: var(
+      --md-checkbox-container-shape-start-end,
+      var(--_container-shape)
+    );
+    --_container-shape-end-end: var(
+      --md-checkbox-container-shape-end-end,
+      var(--_container-shape)
+    );
+    --_container-shape-end-start: var(
+      --md-checkbox-container-shape-end-start,
+      var(--_container-shape)
+    );
+
+    border-start-start-radius: var(--_container-shape-start-start);
+    border-start-end-radius: var(--_container-shape-start-end);
+    border-end-end-radius: var(--_container-shape-end-end);
+    border-end-start-radius: var(--_container-shape-end-start);
+    display: inline-flex;
+    height: 48px;
+    position: relative;
+    vertical-align: top; // Fix extra space when placed inside display: block
+    width: 48px;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  md-focus-ring {
+    @include focus-ring.theme(
+      (
+        'outward-offset': -2px,
+      )
+    );
+  }
+
+  input {
+    appearance: none;
+    inset: 0;
+    margin: 0;
+    outline: none;
+    position: absolute;
+    opacity: 0;
+    block-size: 100%;
+    inline-size: 100%;
+  }
+
+  .container {
+    border-radius: inherit;
+    height: 100%;
+    position: relative;
+    width: 100%;
+  }
+
+  // Center elements within the container.
+  .outline,
+  .background,
+  md-ripple,
+  .icon {
+    inset: 0;
+    margin: auto;
+    position: absolute;
+  }
+
+  .outline,
+  .background {
+    border-radius: inherit;
+    height: var(--_container-size);
+    width: var(--_container-size);
+  }
+
+  .outline {
+    border-color: var(--_outline-color);
+    border-style: solid;
+    border-width: var(--_outline-width);
+    box-sizing: border-box;
+  }
+
+  .background {
+    background-color: var(--_selected-container-color);
+  }
+
+  // Background and icon transitions.
+  .background,
+  .icon {
+    opacity: 0; // Background and icon fade in
+    transition-duration: 150ms, 50ms; // Exit duration for scale and opacity.
+    transition-property: transform, opacity;
+    // Exit easing function for scale, linear for opacity.
+    transition-timing-function: map.get(
+        $_md-sys-motion,
+        easing-emphasized-accelerate
+      ),
+      linear;
+    transform: scale(0.6); // Background and icon scale from 60% to 100%.
+  }
+
+  :where(.selected) :is(.background, .icon) {
+    opacity: 1;
+    // Enter duration for scale and opacity.
+    transition-duration: 350ms, 50ms;
+    // Enter easing function for scale, linear for opacity.
+    transition-timing-function: map.get(
+        $_md-sys-motion,
+        easing-emphasized-decelerate
+      ),
+      linear;
+    transform: scale(1);
+  }
+
+  // Ripple
+
+  md-ripple {
+    border-radius: var(--_state-layer-shape);
+    height: var(--_state-layer-size);
+    width: var(--_state-layer-size);
+
+    @include ripple.theme(
+      (
+        hover-color: var(--_hover-state-layer-color),
+        hover-opacity: var(--_hover-state-layer-opacity),
+        pressed-color: var(--_pressed-state-layer-color),
+        pressed-opacity: var(--_pressed-state-layer-opacity),
+      )
+    );
+  }
+
+  .selected md-ripple {
+    @include ripple.theme(
+      (
+        hover-color: var(--_selected-hover-state-layer-color),
+        hover-opacity: var(--_selected-hover-state-layer-opacity),
+        pressed-color: var(--_selected-pressed-state-layer-color),
+        pressed-opacity: var(--_selected-pressed-state-layer-opacity),
+      )
+    );
+  }
+
+  .error md-ripple {
+    @include ripple.theme(
+      (
+        hover-color: var(--_error-hover-state-layer-color),
+        hover-opacity: var(--_error-hover-state-layer-opacity),
+        pressed-color: var(--_error-pressed-state-layer-color),
+        pressed-opacity: var(--_error-pressed-state-layer-opacity),
+      )
+    );
+  }
+
+  // Icon and icon marks
+
+  .icon {
+    // The icon is created with two <rect> marks for animation:
+    // 1. Short end
+    //   - the smaller leading part of the checkmark
+    //   - hidden behind long end for indeterminate mark
+    // 2. Long end
+    //   - the larger trailing part of the checkmark
+    //   - the entirety of the indeterminate mark
+    fill: var(--_selected-icon-color);
+    height: var(--_icon-size);
+    width: var(--_icon-size);
+  }
+
+  // The short end of the checkmark. Initially hidden underneath the
+  // indeterminate mark.
+  .mark.short {
+    height: $_mark-stroke;
+    transition-property: transform, height;
+    width: $_mark-stroke;
+  }
+
+  // The long end of the checkmark. Initially the indeterminate mark.
+  .mark.long {
+    height: $_mark-stroke;
+    transition-property: transform, width;
+    width: 10px;
+  }
+
+  // Exit duration and easing.
+  .mark {
+    animation-duration: 150ms;
+    animation-timing-function: map.get(
+      $_md-sys-motion,
+      easing-emphasized-accelerate
+    );
+    transition-duration: 150ms;
+    transition-timing-function: map.get(
+      $_md-sys-motion,
+      easing-emphasized-accelerate
+    );
+  }
+
+  // Enter duration and easing.
+  .selected .mark {
+    animation-duration: 350ms;
+    animation-timing-function: map.get(
+      $_md-sys-motion,
+      easing-emphasized-decelerate
+    );
+    transition-duration: 350ms;
+    transition-timing-function: map.get(
+      $_md-sys-motion,
+      easing-emphasized-decelerate
+    );
+  }
+
+  // Creates the checkmark icon.
+  .checked,
+  // Keep the checkmark shape when unselecting a checked checkbox.
+  .prev-checked.unselected {
+    .mark {
+      // Transform from the bottom left of the rectangles, whch turn into the
+      // bottom-most point of the checkmark.
+      // Fix Safari's transform-origin bug from "top left" to "bottom left"
+      $scale: scaleY(-1);
+      // Move the "bottom left" corner to the checkmark location.
+      $translate: translate($_checkmark-bottom-left);
+      // Rotate the checkmark.
+      $rotate: rotate(45deg);
+      transform: $scale $translate $rotate;
+    }
+
+    .mark.short {
+      // The right triangle that forms the short end has an X, Y length of
+      // 4dp, 4dp. The hypoteneuse is √(4*4 + 4*4), which is the length of the
+      // short end when checked.
+      height: 1px * math.sqrt(32);
+    }
+
+    .mark.long {
+      // The right triangle that forms the long end has an X, Y length of
+      // 8dp, 8dp. The hypoteneuse is √(8*8 + 8*8), which is the length of the
+      // long end when checked.
+      width: 1px * math.sqrt(128);
+    }
+  }
+
+  // Creates the indeterminate icon.
+  .indeterminate,
+  // Keep the indeterminate shape when unselecting an indeterminate checkbox.
+  .prev-indeterminate.unselected {
+    .mark {
+      transform: scaleY(-1) translate($_indeterminate-bottom-left) rotate(0deg);
+    }
+  }
+
+  // When selecting an unselected checkbox, don't transition between the
+  // checked and indeterminate states. The checkmark icon or indeterminate icon
+  // should fade in from its final position.
+  .prev-unselected .mark {
+    transition-property: none;
+  }
+
+  // When checking a checkbox, the long mark of the checkmark grows from the
+  // bottom-most point of the checkmark. An animation provides the starting
+  // width to animate from.
+  .prev-unselected.checked .mark.long {
+    animation-name: prev-unselected-to-checked;
+  }
+  @keyframes prev-unselected-to-checked {
+    from {
+      width: 0;
+    }
+  }
+
+  // States
+
+  :where(.error) .outline {
+    border-color: var(--_error-outline-color);
+    // TODO(b/262410085): add once token is added
+    // border-width: var(--_error-outline-width);
+  }
+
+  :where(.error) .background {
+    background: var(--_selected-error-container-color);
+  }
+
+  :where(.error) .icon {
+    fill: var(--_selected-error-icon-color);
+  }
+
+  :where(:hover) .outline {
+    border-color: var(--_hover-outline-color);
+    border-width: var(--_hover-outline-width);
+  }
+
+  :where(:hover) .background {
+    background: var(--_selected-hover-container-color);
+  }
+
+  :where(:hover) .icon {
+    fill: var(--_selected-hover-icon-color);
+  }
+
+  :where(.error:hover) .outline {
+    border-color: var(--_error-hover-outline-color);
+  }
+
+  :where(.error:hover) .background {
+    background: var(--_selected-error-hover-container-color);
+  }
+
+  :where(.error:hover) .icon {
+    fill: var(--_selected-error-hover-icon-color);
+  }
+
+  :where(:focus-within) .outline {
+    border-color: var(--_focus-outline-color);
+    border-width: var(--_focus-outline-width);
+  }
+
+  :where(:focus-within) .background {
+    background: var(--_selected-focus-container-color);
+  }
+
+  :where(:focus-within) .icon {
+    fill: var(--_selected-focus-icon-color);
+  }
+
+  :where(.error:focus-within) .outline {
+    border-color: var(--_error-focus-outline-color);
+  }
+
+  :where(.error:focus-within) .background {
+    background: var(--_selected-error-focus-container-color);
+  }
+
+  :where(.error:focus-within) .icon {
+    fill: var(--_selected-error-focus-icon-color);
+  }
+
+  :where(:active) .outline {
+    border-color: var(--_pressed-outline-color);
+    border-width: var(--_pressed-outline-width);
+  }
+
+  :where(:active) .background {
+    background: var(--_selected-pressed-container-color);
+  }
+
+  :where(:active) .icon {
+    fill: var(--_selected-pressed-icon-color);
+  }
+
+  :where(.error:active) .outline {
+    border-color: var(--_error-pressed-outline-color);
+  }
+
+  :where(.error:active) .background {
+    background: var(--_selected-error-pressed-container-color);
+  }
+
+  :where(.error:active) .icon {
+    fill: var(--_selected-error-pressed-icon-color);
+  }
+
+  // Don't animate to/from disabled states because the outline is hidden when
+  // selected. Without this, there'd be a FOUC if the checkbox state is
+  // programmatically  changed while disabled.
+  :where(.disabled, .prev-disabled) :is(.background, .icon, .mark) {
+    animation-duration: 0s;
+    transition-duration: 0s;
+  }
+
+  :where(.disabled) .outline {
+    border-color: var(--_disabled-outline-color);
+    border-width: var(--_disabled-outline-width);
+    opacity: var(--_disabled-container-opacity);
+  }
+
+  :where(.selected.disabled) .outline {
+    // Hide the outline behind the transparent selected container color.
+    // This can be removed once disabled colors are flattened.
+    visibility: hidden;
+  }
+
+  :where(.selected.disabled) .background {
+    // Set disabled opacity only when selected since opacity is used to show
+    // or hide the container background.
+    background: var(--_selected-disabled-container-color);
+    opacity: var(--_selected-disabled-container-opacity);
+  }
+
+  :where(.disabled) .icon {
+    fill: var(--_selected-disabled-icon-color);
+  }
+
+  @media (forced-colors: active) {
+    .background {
+      background-color: CanvasText;
+    }
+
+    .selected.disabled .background {
+      background-color: GrayText;
+      opacity: 1;
+    }
+
+    .outline {
+      border-color: CanvasText;
+    }
+
+    .disabled .outline {
+      border-color: GrayText;
+      opacity: 1;
+    }
+
+    .icon {
+      fill: Canvas;
+    }
+  }
+}

package/checkbox/internal/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{--_container-shape: var(--md-checkbox-container-shape, 2px);--_container-size: var(--md-checkbox-container-size, 18px);--_error-hover-state-layer-color: var(--md-checkbox-error-hover-state-layer-color, var(--md-sys-color-error, #b3261e));--_error-hover-state-layer-opacity: var(--md-checkbox-error-hover-state-layer-opacity, 0.08);--_error-pressed-state-layer-color: var(--md-checkbox-error-pressed-state-layer-color, var(--md-sys-color-error, #b3261e));--_error-pressed-state-layer-opacity: var(--md-checkbox-error-pressed-state-layer-opacity, 0.12);--_icon-size: var(--md-checkbox-icon-size, 18px);--_selected-container-color: var(--md-checkbox-selected-container-color, var(--md-sys-color-primary, #6750a4));--_selected-disabled-container-color: var(--md-checkbox-selected-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_selected-disabled-container-opacity: var(--md-checkbox-selected-disabled-container-opacity, 0.38);--_selected-disabled-icon-color: var(--md-checkbox-selected-disabled-icon-color, var(--md-sys-color-surface, #fef7ff));--_selected-error-container-color: var(--md-checkbox-selected-error-container-color, var(--md-sys-color-error, #b3261e));--_selected-error-focus-container-color: var(--md-checkbox-selected-error-focus-container-color, var(--md-sys-color-error, #b3261e));--_selected-error-focus-icon-color: var(--md-checkbox-selected-error-focus-icon-color, var(--md-sys-color-on-error, #fff));--_selected-error-hover-container-color: var(--md-checkbox-selected-error-hover-container-color, var(--md-sys-color-error, #b3261e));--_selected-error-hover-icon-color: var(--md-checkbox-selected-error-hover-icon-color, var(--md-sys-color-on-error, #fff));--_selected-error-icon-color: var(--md-checkbox-selected-error-icon-color, var(--md-sys-color-on-error, #fff));--_selected-error-pressed-container-color: var(--md-checkbox-selected-error-pressed-container-color, var(--md-sys-color-error, #b3261e));--_selected-error-pressed-icon-color: var(--md-checkbox-selected-error-pressed-icon-color, var(--md-sys-color-on-error, #fff));--_selected-focus-container-color: var(--md-checkbox-selected-focus-container-color, var(--md-sys-color-primary, #6750a4));--_selected-focus-icon-color: var(--md-checkbox-selected-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_selected-hover-container-color: var(--md-checkbox-selected-hover-container-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-icon-color: var(--md-checkbox-selected-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_selected-hover-state-layer-color: var(--md-checkbox-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-opacity: var(--md-checkbox-selected-hover-state-layer-opacity, 0.08);--_selected-icon-color: var(--md-checkbox-selected-icon-color, var(--md-sys-color-on-primary, #fff));--_selected-pressed-container-color: var(--md-checkbox-selected-pressed-container-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-icon-color: var(--md-checkbox-selected-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_selected-pressed-state-layer-color: var(--md-checkbox-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_selected-pressed-state-layer-opacity: var(--md-checkbox-selected-pressed-state-layer-opacity, 0.12);--_state-layer-shape: var(--md-checkbox-state-layer-shape, 9999px);--_state-layer-size: var(--md-checkbox-state-layer-size, 40px);--_disabled-container-opacity: var(--md-checkbox-disabled-container-opacity, 0.38);--_disabled-outline-color: var(--md-checkbox-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-width: var(--md-checkbox-disabled-outline-width, 2px);--_error-focus-outline-color: var(--md-checkbox-error-focus-outline-color, var(--md-sys-color-error, #b3261e));--_error-hover-outline-color: var(--md-checkbox-error-hover-outline-color, var(--md-sys-color-error, #b3261e));--_error-outline-color: var(--md-checkbox-error-outline-color, var(--md-sys-color-error, #b3261e));--_error-pressed-outline-color: var(--md-checkbox-error-pressed-outline-color, var(--md-sys-color-error, #b3261e));--_focus-outline-color: var(--md-checkbox-focus-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_focus-outline-width: var(--md-checkbox-focus-outline-width, 2px);--_hover-outline-color: var(--md-checkbox-hover-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-outline-width: var(--md-checkbox-hover-outline-width, 2px);--_hover-state-layer-color: var(--md-checkbox-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-checkbox-hover-state-layer-opacity, 0.08);--_outline-color: var(--md-checkbox-outline-color, var(--md-sys-color-on-surface-variant, #49454f));--_outline-width: var(--md-checkbox-outline-width, 2px);--_pressed-outline-color: var(--md-checkbox-pressed-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-outline-width: var(--md-checkbox-pressed-outline-width, 2px);--_pressed-state-layer-color: var(--md-checkbox-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-checkbox-pressed-state-layer-opacity, 0.12);--_container-shape-start-start: var( --md-checkbox-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-checkbox-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-checkbox-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-checkbox-container-shape-end-start, var(--_container-shape) );border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start);display:inline-flex;height:48px;position:relative;vertical-align:top;width:48px;-webkit-tap-highlight-color:rgba(0,0,0,0)}md-focus-ring{--md-focus-ring-outward-offset: -2px}input{appearance:none;inset:0;margin:0;outline:none;position:absolute;opacity:0;block-size:100%;inline-size:100%}.container{border-radius:inherit;height:100%;position:relative;width:100%}.outline,.background,md-ripple,.icon{inset:0;margin:auto;position:absolute}.outline,.background{border-radius:inherit;height:var(--_container-size);width:var(--_container-size)}.outline{border-color:var(--_outline-color);border-style:solid;border-width:var(--_outline-width);box-sizing:border-box}.background{background-color:var(--_selected-container-color)}.background,.icon{opacity:0;transition-duration:150ms,50ms;transition-property:transform,opacity;transition-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15),linear;transform:scale(0.6)}:where(.selected) :is(.background,.icon){opacity:1;transition-duration:350ms,50ms;transition-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1),linear;transform:scale(1)}md-ripple{border-radius:var(--_state-layer-shape);height:var(--_state-layer-size);width:var(--_state-layer-size);--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}.selected md-ripple{--md-ripple-hover-color: var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity: var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_selected-pressed-state-layer-opacity)}.error md-ripple{--md-ripple-hover-color: var(--_error-hover-state-layer-color);--md-ripple-hover-opacity: var(--_error-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_error-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_error-pressed-state-layer-opacity)}.icon{fill:var(--_selected-icon-color);height:var(--_icon-size);width:var(--_icon-size)}.mark.short{height:2px;transition-property:transform,height;width:2px}.mark.long{height:2px;transition-property:transform,width;width:10px}.mark{animation-duration:150ms;animation-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15);transition-duration:150ms;transition-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15)}.selected .mark{animation-duration:350ms;animation-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1);transition-duration:350ms;transition-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1)}.checked .mark,.prev-checked.unselected .mark{transform:scaleY(-1) translate(7px, -14px) rotate(45deg)}.checked .mark.short,.prev-checked.unselected .mark.short{height:5.6568542495px}.checked .mark.long,.prev-checked.unselected .mark.long{width:11.313708499px}.indeterminate .mark,.prev-indeterminate.unselected .mark{transform:scaleY(-1) translate(4px, -10px) rotate(0deg)}.prev-unselected .mark{transition-property:none}.prev-unselected.checked .mark.long{animation-name:prev-unselected-to-checked}@keyframes prev-unselected-to-checked{from{width:0}}:where(.error) .outline{border-color:var(--_error-outline-color)}:where(.error) .background{background:var(--_selected-error-container-color)}:where(.error) .icon{fill:var(--_selected-error-icon-color)}:where(:hover) .outline{border-color:var(--_hover-outline-color);border-width:var(--_hover-outline-width)}:where(:hover) .background{background:var(--_selected-hover-container-color)}:where(:hover) .icon{fill:var(--_selected-hover-icon-color)}:where(.error:hover) .outline{border-color:var(--_error-hover-outline-color)}:where(.error:hover) .background{background:var(--_selected-error-hover-container-color)}:where(.error:hover) .icon{fill:var(--_selected-error-hover-icon-color)}:where(:focus-within) .outline{border-color:var(--_focus-outline-color);border-width:var(--_focus-outline-width)}:where(:focus-within) .background{background:var(--_selected-focus-container-color)}:where(:focus-within) .icon{fill:var(--_selected-focus-icon-color)}:where(.error:focus-within) .outline{border-color:var(--_error-focus-outline-color)}:where(.error:focus-within) .background{background:var(--_selected-error-focus-container-color)}:where(.error:focus-within) .icon{fill:var(--_selected-error-focus-icon-color)}:where(:active) .outline{border-color:var(--_pressed-outline-color);border-width:var(--_pressed-outline-width)}:where(:active) .background{background:var(--_selected-pressed-container-color)}:where(:active) .icon{fill:var(--_selected-pressed-icon-color)}:where(.error:active) .outline{border-color:var(--_error-pressed-outline-color)}:where(.error:active) .background{background:var(--_selected-error-pressed-container-color)}:where(.error:active) .icon{fill:var(--_selected-error-pressed-icon-color)}:where(.disabled,.prev-disabled) :is(.background,.icon,.mark){animation-duration:0s;transition-duration:0s}:where(.disabled) .outline{border-color:var(--_disabled-outline-color);border-width:var(--_disabled-outline-width);opacity:var(--_disabled-container-opacity)}:where(.selected.disabled) .outline{visibility:hidden}:where(.selected.disabled) .background{background:var(--_selected-disabled-container-color);opacity:var(--_selected-disabled-container-opacity)}:where(.disabled) .icon{fill:var(--_selected-disabled-icon-color)}@media(forced-colors: active){.background{background-color:CanvasText}.selected.disabled .background{background-color:GrayText;opacity:1}.outline{border-color:CanvasText}.disabled .outline{border-color:GrayText;opacity:1}.icon{fill:Canvas}}/*# sourceMappingURL=checkbox-styles.css.map */
+`;
+//# sourceMappingURL=checkbox-styles.css.js.map

package/checkbox/internal/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{--_container-shape: var(--md-checkbox-container-shape, 2px);--_container-size: var(--md-checkbox-container-size, 18px);--_error-hover-state-layer-color: var(--md-checkbox-error-hover-state-layer-color, var(--md-sys-color-error, #b3261e));--_error-hover-state-layer-opacity: var(--md-checkbox-error-hover-state-layer-opacity, 0.08);--_error-pressed-state-layer-color: var(--md-checkbox-error-pressed-state-layer-color, var(--md-sys-color-error, #b3261e));--_error-pressed-state-layer-opacity: var(--md-checkbox-error-pressed-state-layer-opacity, 0.12);--_icon-size: var(--md-checkbox-icon-size, 18px);--_selected-container-color: var(--md-checkbox-selected-container-color, var(--md-sys-color-primary, #6750a4));--_selected-disabled-container-color: var(--md-checkbox-selected-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_selected-disabled-container-opacity: var(--md-checkbox-selected-disabled-container-opacity, 0.38);--_selected-disabled-icon-color: var(--md-checkbox-selected-disabled-icon-color, var(--md-sys-color-surface, #fef7ff));--_selected-error-container-color: var(--md-checkbox-selected-error-container-color, var(--md-sys-color-error, #b3261e));--_selected-error-focus-container-color: var(--md-checkbox-selected-error-focus-container-color, var(--md-sys-color-error, #b3261e));--_selected-error-focus-icon-color: var(--md-checkbox-selected-error-focus-icon-color, var(--md-sys-color-on-error, #fff));--_selected-error-hover-container-color: var(--md-checkbox-selected-error-hover-container-color, var(--md-sys-color-error, #b3261e));--_selected-error-hover-icon-color: var(--md-checkbox-selected-error-hover-icon-color, var(--md-sys-color-on-error, #fff));--_selected-error-icon-color: var(--md-checkbox-selected-error-icon-color, var(--md-sys-color-on-error, #fff));--_selected-error-pressed-container-color: var(--md-checkbox-selected-error-pressed-container-color, var(--md-sys-color-error, #b3261e));--_selected-error-pressed-icon-color: var(--md-checkbox-selected-error-pressed-icon-color, var(--md-sys-color-on-error, #fff));--_selected-focus-container-color: var(--md-checkbox-selected-focus-container-color, var(--md-sys-color-primary, #6750a4));--_selected-focus-icon-color: var(--md-checkbox-selected-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_selected-hover-container-color: var(--md-checkbox-selected-hover-container-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-icon-color: var(--md-checkbox-selected-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_selected-hover-state-layer-color: var(--md-checkbox-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-opacity: var(--md-checkbox-selected-hover-state-layer-opacity, 0.08);--_selected-icon-color: var(--md-checkbox-selected-icon-color, var(--md-sys-color-on-primary, #fff));--_selected-pressed-container-color: var(--md-checkbox-selected-pressed-container-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-icon-color: var(--md-checkbox-selected-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_selected-pressed-state-layer-color: var(--md-checkbox-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_selected-pressed-state-layer-opacity: var(--md-checkbox-selected-pressed-state-layer-opacity, 0.12);--_state-layer-shape: var(--md-checkbox-state-layer-shape, 9999px);--_state-layer-size: var(--md-checkbox-state-layer-size, 40px);--_disabled-container-opacity: var(--md-checkbox-disabled-container-opacity, 0.38);--_disabled-outline-color: var(--md-checkbox-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-width: var(--md-checkbox-disabled-outline-width, 2px);--_error-focus-outline-color: var(--md-checkbox-error-focus-outline-color, var(--md-sys-color-error, #b3261e));--_error-hover-outline-color: var(--md-checkbox-error-hover-outline-color, var(--md-sys-color-error, #b3261e));--_error-outline-color: var(--md-checkbox-error-outline-color, var(--md-sys-color-error, #b3261e));--_error-pressed-outline-color: var(--md-checkbox-error-pressed-outline-color, var(--md-sys-color-error, #b3261e));--_focus-outline-color: var(--md-checkbox-focus-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_focus-outline-width: var(--md-checkbox-focus-outline-width, 2px);--_hover-outline-color: var(--md-checkbox-hover-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-outline-width: var(--md-checkbox-hover-outline-width, 2px);--_hover-state-layer-color: var(--md-checkbox-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-checkbox-hover-state-layer-opacity, 0.08);--_outline-color: var(--md-checkbox-outline-color, var(--md-sys-color-on-surface-variant, #49454f));--_outline-width: var(--md-checkbox-outline-width, 2px);--_pressed-outline-color: var(--md-checkbox-pressed-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-outline-width: var(--md-checkbox-pressed-outline-width, 2px);--_pressed-state-layer-color: var(--md-checkbox-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-checkbox-pressed-state-layer-opacity, 0.12);--_container-shape-start-start: var( --md-checkbox-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-checkbox-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-checkbox-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-checkbox-container-shape-end-start, var(--_container-shape) );border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start);display:inline-flex;height:48px;position:relative;vertical-align:top;width:48px;-webkit-tap-highlight-color:rgba(0,0,0,0)}md-focus-ring{--md-focus-ring-outward-offset: -2px}input{appearance:none;inset:0;margin:0;outline:none;position:absolute;opacity:0;block-size:100%;inline-size:100%}.container{border-radius:inherit;height:100%;position:relative;width:100%}.outline,.background,md-ripple,.icon{inset:0;margin:auto;position:absolute}.outline,.background{border-radius:inherit;height:var(--_container-size);width:var(--_container-size)}.outline{border-color:var(--_outline-color);border-style:solid;border-width:var(--_outline-width);box-sizing:border-box}.background{background-color:var(--_selected-container-color)}.background,.icon{opacity:0;transition-duration:150ms,50ms;transition-property:transform,opacity;transition-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15),linear;transform:scale(0.6)}:where(.selected) :is(.background,.icon){opacity:1;transition-duration:350ms,50ms;transition-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1),linear;transform:scale(1)}md-ripple{border-radius:var(--_state-layer-shape);height:var(--_state-layer-size);width:var(--_state-layer-size);--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}.selected md-ripple{--md-ripple-hover-color: var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity: var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_selected-pressed-state-layer-opacity)}.error md-ripple{--md-ripple-hover-color: var(--_error-hover-state-layer-color);--md-ripple-hover-opacity: var(--_error-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_error-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_error-pressed-state-layer-opacity)}.icon{fill:var(--_selected-icon-color);height:var(--_icon-size);width:var(--_icon-size)}.mark.short{height:2px;transition-property:transform,height;width:2px}.mark.long{height:2px;transition-property:transform,width;width:10px}.mark{animation-duration:150ms;animation-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15);transition-duration:150ms;transition-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15)}.selected .mark{animation-duration:350ms;animation-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1);transition-duration:350ms;transition-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1)}.checked .mark,.prev-checked.unselected .mark{transform:scaleY(-1) translate(7px, -14px) rotate(45deg)}.checked .mark.short,.prev-checked.unselected .mark.short{height:5.6568542495px}.checked .mark.long,.prev-checked.unselected .mark.long{width:11.313708499px}.indeterminate .mark,.prev-indeterminate.unselected .mark{transform:scaleY(-1) translate(4px, -10px) rotate(0deg)}.prev-unselected .mark{transition-property:none}.prev-unselected.checked .mark.long{animation-name:prev-unselected-to-checked}@keyframes prev-unselected-to-checked{from{width:0}}:where(.error) .outline{border-color:var(--_error-outline-color)}:where(.error) .background{background:var(--_selected-error-container-color)}:where(.error) .icon{fill:var(--_selected-error-icon-color)}:where(:hover) .outline{border-color:var(--_hover-outline-color);border-width:var(--_hover-outline-width)}:where(:hover) .background{background:var(--_selected-hover-container-color)}:where(:hover) .icon{fill:var(--_selected-hover-icon-color)}:where(.error:hover) .outline{border-color:var(--_error-hover-outline-color)}:where(.error:hover) .background{background:var(--_selected-error-hover-container-color)}:where(.error:hover) .icon{fill:var(--_selected-error-hover-icon-color)}:where(:focus-within) .outline{border-color:var(--_focus-outline-color);border-width:var(--_focus-outline-width)}:where(:focus-within) .background{background:var(--_selected-focus-container-color)}:where(:focus-within) .icon{fill:var(--_selected-focus-icon-color)}:where(.error:focus-within) .outline{border-color:var(--_error-focus-outline-color)}:where(.error:focus-within) .background{background:var(--_selected-error-focus-container-color)}:where(.error:focus-within) .icon{fill:var(--_selected-error-focus-icon-color)}:where(:active) .outline{border-color:var(--_pressed-outline-color);border-width:var(--_pressed-outline-width)}:where(:active) .background{background:var(--_selected-pressed-container-color)}:where(:active) .icon{fill:var(--_selected-pressed-icon-color)}:where(.error:active) .outline{border-color:var(--_error-pressed-outline-color)}:where(.error:active) .background{background:var(--_selected-error-pressed-container-color)}:where(.error:active) .icon{fill:var(--_selected-error-pressed-icon-color)}:where(.disabled,.prev-disabled) :is(.background,.icon,.mark){animation-duration:0s;transition-duration:0s}:where(.disabled) .outline{border-color:var(--_disabled-outline-color);border-width:var(--_disabled-outline-width);opacity:var(--_disabled-container-opacity)}:where(.selected.disabled) .outline{visibility:hidden}:where(.selected.disabled) .background{background:var(--_selected-disabled-container-color);opacity:var(--_selected-disabled-container-opacity)}:where(.disabled) .icon{fill:var(--_selected-disabled-icon-color)}@media(forced-colors: active){.background{background-color:CanvasText}.selected.disabled .background{background-color:GrayText;opacity:1}.outline{border-color:CanvasText}.disabled .outline{border-color:GrayText;opacity:1}.icon{fill:Canvas}}/*# sourceMappingURL=checkbox-styles.css.map */\n`;\n "]}

package/checkbox/internal/checkbox.d.ts

@@ -0,0 +1,66 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import '../../focus/md-focus-ring.js';
+import '../../ripple/ripple.js';
+import { LitElement, PropertyValues } from 'lit';
+/**
+ * A checkbox component.
+ */
+export declare class Checkbox extends LitElement {
+    /** @nocollapse */
+    static formAssociated: boolean;
+    /**
+     * Whether or not the checkbox is selected.
+     */
+    checked: boolean;
+    /**
+     * Whether or not the checkbox is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Whether or not the checkbox is invalid.
+     */
+    error: boolean;
+    /**
+     * Whether or not the checkbox is indeterminate.
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes
+     */
+    indeterminate: boolean;
+    /**
+     * The value of the checkbox that is submitted with a form when selected.
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value
+     */
+    value: string;
+    /**
+     * The HTML name to use in form submission.
+     */
+    get name(): string;
+    set name(name: string);
+    /**
+     * The associated form element with which this element's value will submit.
+     */
+    get form(): HTMLFormElement;
+    /**
+     * The labels this element is associated with.
+     */
+    get labels(): NodeList;
+    private prevChecked;
+    private prevDisabled;
+    private prevIndeterminate;
+    private readonly input;
+    private readonly internals;
+    constructor();
+    focus(): void;
+    protected update(changed: PropertyValues<Checkbox>): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+    private handleChange;
+    /** @private */
+    formResetCallback(): void;
+    /** @private */
+    formStateRestoreCallback(state: string): void;
+}