material-web-evo 10002.10001.10000

package/checkbox/internal/_checkbox.scss

@@ -0,0 +1,392 @@
+//
+// 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 '../../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: tokens.$md-comp-checkbox-supported-tokens;
+  @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 {
+    border-start-start-radius: map.get($tokens, 'container-shape-start-start');
+    border-start-end-radius: map.get($tokens, 'container-shape-start-end');
+    border-end-end-radius: map.get($tokens, 'container-shape-end-end');
+    border-end-start-radius: map.get($tokens, 'container-shape-end-start');
+    display: inline-flex;
+    height: map.get($tokens, 'container-size');
+    position: relative;
+    vertical-align: top; // Fix extra space when placed inside display: block
+    width: map.get($tokens, 'container-size');
+    -webkit-tap-highlight-color: transparent;
+    cursor: pointer;
+  }
+
+  :host([disabled]) {
+    cursor: default;
+  }
+
+  :host([touch-target='wrapper']) {
+    margin: max(0px, ((48px - map.get($tokens, 'container-size')) / 2));
+  }
+
+  md-focus-ring {
+    height: 44px;
+    inset: unset;
+    width: 44px;
+  }
+
+  // <input> is also the touch target
+  input {
+    appearance: none;
+    height: 48px;
+    margin: 0;
+    opacity: 0;
+    outline: none;
+    position: absolute;
+    width: 48px;
+    z-index: 1;
+    cursor: inherit;
+  }
+
+  :host([touch-target='none']) input {
+    height: 100%;
+    width: 100%;
+  }
+
+  .container {
+    border-radius: inherit;
+    display: flex;
+    height: 100%;
+    place-content: center;
+    place-items: center;
+    position: relative;
+    width: 100%;
+  }
+
+  .outline,
+  .background,
+  .icon {
+    inset: 0;
+    position: absolute;
+  }
+
+  .outline,
+  .background {
+    border-radius: inherit;
+  }
+
+  .outline {
+    border-color: map.get($tokens, 'outline-color');
+    border-style: solid;
+    border-width: map.get($tokens, 'outline-width');
+    box-sizing: border-box;
+  }
+
+  .background {
+    background-color: map.get($tokens, '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: map.get($tokens, 'state-layer-shape');
+    height: map.get($tokens, 'state-layer-size');
+    inset: unset;
+    width: map.get($tokens, 'state-layer-size');
+
+    @include ripple.theme(
+      (
+        hover-color: map.get($tokens, 'hover-state-layer-color'),
+        hover-opacity: map.get($tokens, 'hover-state-layer-opacity'),
+        pressed-color: map.get($tokens, 'pressed-state-layer-color'),
+        pressed-opacity: map.get($tokens, 'pressed-state-layer-opacity'),
+      )
+    );
+  }
+
+  .selected md-ripple {
+    @include ripple.theme(
+      (
+        hover-color: map.get($tokens, 'selected-hover-state-layer-color'),
+        hover-opacity: map.get($tokens, 'selected-hover-state-layer-opacity'),
+        pressed-color: map.get($tokens, 'selected-pressed-state-layer-color'),
+        pressed-opacity:
+          map.get($tokens, 'selected-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: map.get($tokens, 'selected-icon-color');
+    height: map.get($tokens, 'icon-size');
+    width: map.get($tokens, '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(:hover) .outline {
+    border-color: map.get($tokens, 'hover-outline-color');
+    border-width: map.get($tokens, 'hover-outline-width');
+  }
+
+  :where(:hover) .background {
+    background: map.get($tokens, 'selected-hover-container-color');
+  }
+
+  :where(:hover) .icon {
+    fill: map.get($tokens, 'selected-hover-icon-color');
+  }
+
+  :where(:focus-within) .outline {
+    border-color: map.get($tokens, 'focus-outline-color');
+    border-width: map.get($tokens, 'focus-outline-width');
+  }
+
+  :where(:focus-within) .background {
+    background: map.get($tokens, 'selected-focus-container-color');
+  }
+
+  :where(:focus-within) .icon {
+    fill: map.get($tokens, 'selected-focus-icon-color');
+  }
+
+  :where(:active) .outline {
+    border-color: map.get($tokens, 'pressed-outline-color');
+    border-width: map.get($tokens, 'pressed-outline-width');
+  }
+
+  :where(:active) .background {
+    background: map.get($tokens, 'selected-pressed-container-color');
+  }
+
+  :where(:active) .icon {
+    fill: map.get($tokens, 'selected-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: map.get($tokens, 'disabled-outline-color');
+    border-width: map.get($tokens, 'disabled-outline-width');
+    opacity: map.get($tokens, '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: map.get($tokens, 'selected-disabled-container-color');
+    opacity: map.get($tokens, 'selected-disabled-container-opacity');
+  }
+
+  :where(.disabled) .icon {
+    fill: map.get($tokens, '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

@@ -0,0 +1 @@
+:host{border-start-start-radius:var(--md-checkbox-container-shape-start-start, var(--md-checkbox-container-shape, 2px));border-start-end-radius:var(--md-checkbox-container-shape-start-end, var(--md-checkbox-container-shape, 2px));border-end-end-radius:var(--md-checkbox-container-shape-end-end, var(--md-checkbox-container-shape, 2px));border-end-start-radius:var(--md-checkbox-container-shape-end-start, var(--md-checkbox-container-shape, 2px));display:inline-flex;height:var(--md-checkbox-container-size, 18px);position:relative;vertical-align:top;width:var(--md-checkbox-container-size, 18px);-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:pointer}:host([disabled]){cursor:default}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--md-checkbox-container-size, 18px))/2)}md-focus-ring{height:44px;inset:unset;width:44px}input{appearance:none;height:48px;margin:0;opacity:0;outline:none;position:absolute;width:48px;z-index:1;cursor:inherit}:host([touch-target=none]) input{height:100%;width:100%}.container{border-radius:inherit;display:flex;height:100%;place-content:center;place-items:center;position:relative;width:100%}.outline,.background,.icon{inset:0;position:absolute}.outline,.background{border-radius:inherit}.outline{border-color:var(--md-checkbox-outline-color, var(--md-sys-color-on-surface-variant, #49454f));border-style:solid;border-width:var(--md-checkbox-outline-width, 2px);box-sizing:border-box}.background{background-color:var(--md-checkbox-selected-container-color, var(--md-sys-color-primary, #6750a4))}.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(--md-checkbox-state-layer-shape, var(--md-sys-shape-corner-full, 9999px));height:var(--md-checkbox-state-layer-size, 40px);inset:unset;width:var(--md-checkbox-state-layer-size, 40px);--md-ripple-hover-color: var(--md-checkbox-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-checkbox-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-checkbox-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-pressed-opacity: var(--md-checkbox-pressed-state-layer-opacity, 0.12)}.selected md-ripple{--md-ripple-hover-color: var(--md-checkbox-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-hover-opacity: var(--md-checkbox-selected-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-checkbox-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-opacity: var(--md-checkbox-selected-pressed-state-layer-opacity, 0.12)}.icon{fill:var(--md-checkbox-selected-icon-color, var(--md-sys-color-on-primary, #fff));height:var(--md-checkbox-icon-size, 18px);width:var(--md-checkbox-icon-size, 18px)}.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(:hover) .outline{border-color:var(--md-checkbox-hover-outline-color, var(--md-sys-color-on-surface, #1d1b20));border-width:var(--md-checkbox-hover-outline-width, 2px)}:where(:hover) .background{background:var(--md-checkbox-selected-hover-container-color, var(--md-sys-color-primary, #6750a4))}:where(:hover) .icon{fill:var(--md-checkbox-selected-hover-icon-color, var(--md-sys-color-on-primary, #fff))}:where(:focus-within) .outline{border-color:var(--md-checkbox-focus-outline-color, var(--md-sys-color-on-surface, #1d1b20));border-width:var(--md-checkbox-focus-outline-width, 2px)}:where(:focus-within) .background{background:var(--md-checkbox-selected-focus-container-color, var(--md-sys-color-primary, #6750a4))}:where(:focus-within) .icon{fill:var(--md-checkbox-selected-focus-icon-color, var(--md-sys-color-on-primary, #fff))}:where(:active) .outline{border-color:var(--md-checkbox-pressed-outline-color, var(--md-sys-color-on-surface, #1d1b20));border-width:var(--md-checkbox-pressed-outline-width, 2px)}:where(:active) .background{background:var(--md-checkbox-selected-pressed-container-color, var(--md-sys-color-primary, #6750a4))}:where(:active) .icon{fill:var(--md-checkbox-selected-pressed-icon-color, var(--md-sys-color-on-primary, #fff))}:where(.disabled,.prev-disabled) :is(.background,.icon,.mark){animation-duration:0s;transition-duration:0s}:where(.disabled) .outline{border-color:var(--md-checkbox-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));border-width:var(--md-checkbox-disabled-outline-width, 2px);opacity:var(--md-checkbox-disabled-container-opacity, 0.38)}:where(.selected.disabled) .outline{visibility:hidden}:where(.selected.disabled) .background{background:var(--md-checkbox-selected-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-checkbox-selected-disabled-container-opacity, 0.38)}:where(.disabled) .icon{fill:var(--md-checkbox-selected-disabled-icon-color, var(--md-sys-color-surface, #fef7ff))}@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 */

package/checkbox/internal/checkbox-styles.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["_checkbox.scss","../../ripple/internal/_ripple.scss"],"names":[],"mappings":"AA0CE,MACE,kHACA,8GACA,0GACA,8GACA,oBACA,+CACA,kBACA,mBACA,8CACA,0CACA,eAGF,kBACE,eAGF,8BACE,mEAGF,cACE,YACA,YACA,WAIF,MACE,gBACA,YACA,SACA,UACA,aACA,kBACA,WACA,UACA,eAGF,iCACE,YACA,WAGF,WACE,sBACA,aACA,YACA,qBACA,mBACA,kBACA,WAGF,2BAGE,QACA,kBAGF,qBAEE,sBAGF,SACE,+FACA,mBACA,mDACA,sBAGF,YACE,mGAIF,kBAEE,UACA,+BACA,sCAEA,kEAKA,qBAGF,yCACE,UAEA,+BAEA,kEAKA,mBAKF,UACE,4FACA,iDACA,YACA,gDCtIE,2XDkJJ,oBClJI,+ZDgKJ,MAQE,kFACA,0CACA,yCAKF,YACE,OAnLW,IAoLX,qCACA,MArLW,IAyLb,WACE,OA1LW,IA2LX,oCACA,WAIF,MACE,yBACA,0DAIA,0BACA,2DAOF,gBACE,yBACA,0DAIA,0BACA,2DAUA,8CASE,yDAGF,0DAIE,sBAGF,wDAIE,qBAQF,0DACE,wDAOJ,uBACE,yBAMF,oCACE,0CAEF,sCACE,KACE,SAMJ,wBACE,6FACA,yDAGF,2BACE,mGAGF,qBACE,wFAGF,+BACE,6FACA,yDAGF,kCACE,mGAGF,4BACE,wFAGF,yBACE,+FACA,2DAGF,4BACE,qGAGF,sBACE,0FAMF,8DACE,sBACA,uBAGF,2BACE,gGACA,4DACA,4DAGF,oCAGE,kBAGF,uCAGE,yGACA,qEAGF,wBACE,2FAGF,8BACE,YACE,4BAGF,+BACE,0BACA,UAGF,SACE,wBAGF,mBACE,sBACA,UAGF,MACE","file":"checkbox-styles.css"}

package/checkbox/internal/checkbox-styles.d.ts

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

package/checkbox/internal/checkbox-styles.js

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./checkbox/internal/checkbox-styles.css.
+import { css } from 'lit';
+export const styles = css `:host{border-start-start-radius:var(--md-checkbox-container-shape-start-start, var(--md-checkbox-container-shape, 2px));border-start-end-radius:var(--md-checkbox-container-shape-start-end, var(--md-checkbox-container-shape, 2px));border-end-end-radius:var(--md-checkbox-container-shape-end-end, var(--md-checkbox-container-shape, 2px));border-end-start-radius:var(--md-checkbox-container-shape-end-start, var(--md-checkbox-container-shape, 2px));display:inline-flex;height:var(--md-checkbox-container-size, 18px);position:relative;vertical-align:top;width:var(--md-checkbox-container-size, 18px);-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:pointer}:host([disabled]){cursor:default}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--md-checkbox-container-size, 18px))/2)}md-focus-ring{height:44px;inset:unset;width:44px}input{appearance:none;height:48px;margin:0;opacity:0;outline:none;position:absolute;width:48px;z-index:1;cursor:inherit}:host([touch-target=none]) input{height:100%;width:100%}.container{border-radius:inherit;display:flex;height:100%;place-content:center;place-items:center;position:relative;width:100%}.outline,.background,.icon{inset:0;position:absolute}.outline,.background{border-radius:inherit}.outline{border-color:var(--md-checkbox-outline-color, var(--md-sys-color-on-surface-variant, #49454f));border-style:solid;border-width:var(--md-checkbox-outline-width, 2px);box-sizing:border-box}.background{background-color:var(--md-checkbox-selected-container-color, var(--md-sys-color-primary, #6750a4))}.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(--md-checkbox-state-layer-shape, var(--md-sys-shape-corner-full, 9999px));height:var(--md-checkbox-state-layer-size, 40px);inset:unset;width:var(--md-checkbox-state-layer-size, 40px);--md-ripple-hover-color: var(--md-checkbox-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-checkbox-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-checkbox-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-pressed-opacity: var(--md-checkbox-pressed-state-layer-opacity, 0.12)}.selected md-ripple{--md-ripple-hover-color: var(--md-checkbox-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-hover-opacity: var(--md-checkbox-selected-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-checkbox-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-opacity: var(--md-checkbox-selected-pressed-state-layer-opacity, 0.12)}.icon{fill:var(--md-checkbox-selected-icon-color, var(--md-sys-color-on-primary, #fff));height:var(--md-checkbox-icon-size, 18px);width:var(--md-checkbox-icon-size, 18px)}.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(:hover) .outline{border-color:var(--md-checkbox-hover-outline-color, var(--md-sys-color-on-surface, #1d1b20));border-width:var(--md-checkbox-hover-outline-width, 2px)}:where(:hover) .background{background:var(--md-checkbox-selected-hover-container-color, var(--md-sys-color-primary, #6750a4))}:where(:hover) .icon{fill:var(--md-checkbox-selected-hover-icon-color, var(--md-sys-color-on-primary, #fff))}:where(:focus-within) .outline{border-color:var(--md-checkbox-focus-outline-color, var(--md-sys-color-on-surface, #1d1b20));border-width:var(--md-checkbox-focus-outline-width, 2px)}:where(:focus-within) .background{background:var(--md-checkbox-selected-focus-container-color, var(--md-sys-color-primary, #6750a4))}:where(:focus-within) .icon{fill:var(--md-checkbox-selected-focus-icon-color, var(--md-sys-color-on-primary, #fff))}:where(:active) .outline{border-color:var(--md-checkbox-pressed-outline-color, var(--md-sys-color-on-surface, #1d1b20));border-width:var(--md-checkbox-pressed-outline-width, 2px)}:where(:active) .background{background:var(--md-checkbox-selected-pressed-container-color, var(--md-sys-color-primary, #6750a4))}:where(:active) .icon{fill:var(--md-checkbox-selected-pressed-icon-color, var(--md-sys-color-on-primary, #fff))}:where(.disabled,.prev-disabled) :is(.background,.icon,.mark){animation-duration:0s;transition-duration:0s}:where(.disabled) .outline{border-color:var(--md-checkbox-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));border-width:var(--md-checkbox-disabled-outline-width, 2px);opacity:var(--md-checkbox-disabled-container-opacity, 0.38)}:where(.selected.disabled) .outline{visibility:hidden}:where(.selected.disabled) .background{background:var(--md-checkbox-selected-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-checkbox-selected-disabled-container-opacity, 0.38)}:where(.disabled) .icon{fill:var(--md-checkbox-selected-disabled-icon-color, var(--md-sys-color-surface, #fef7ff))}@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.js.map

package/checkbox/internal/checkbox-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-styles.js","sourceRoot":"","sources":["checkbox-styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,oEAAoE;AACpE,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACxB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2024 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n// Generated stylesheet for ./checkbox/internal/checkbox-styles.css.\nimport {css} from 'lit';\nexport const styles = css`:host{border-start-start-radius:var(--md-checkbox-container-shape-start-start, var(--md-checkbox-container-shape, 2px));border-start-end-radius:var(--md-checkbox-container-shape-start-end, var(--md-checkbox-container-shape, 2px));border-end-end-radius:var(--md-checkbox-container-shape-end-end, var(--md-checkbox-container-shape, 2px));border-end-start-radius:var(--md-checkbox-container-shape-end-start, var(--md-checkbox-container-shape, 2px));display:inline-flex;height:var(--md-checkbox-container-size, 18px);position:relative;vertical-align:top;width:var(--md-checkbox-container-size, 18px);-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:pointer}:host([disabled]){cursor:default}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--md-checkbox-container-size, 18px))/2)}md-focus-ring{height:44px;inset:unset;width:44px}input{appearance:none;height:48px;margin:0;opacity:0;outline:none;position:absolute;width:48px;z-index:1;cursor:inherit}:host([touch-target=none]) input{height:100%;width:100%}.container{border-radius:inherit;display:flex;height:100%;place-content:center;place-items:center;position:relative;width:100%}.outline,.background,.icon{inset:0;position:absolute}.outline,.background{border-radius:inherit}.outline{border-color:var(--md-checkbox-outline-color, var(--md-sys-color-on-surface-variant, #49454f));border-style:solid;border-width:var(--md-checkbox-outline-width, 2px);box-sizing:border-box}.background{background-color:var(--md-checkbox-selected-container-color, var(--md-sys-color-primary, #6750a4))}.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(--md-checkbox-state-layer-shape, var(--md-sys-shape-corner-full, 9999px));height:var(--md-checkbox-state-layer-size, 40px);inset:unset;width:var(--md-checkbox-state-layer-size, 40px);--md-ripple-hover-color: var(--md-checkbox-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-checkbox-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-checkbox-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-pressed-opacity: var(--md-checkbox-pressed-state-layer-opacity, 0.12)}.selected md-ripple{--md-ripple-hover-color: var(--md-checkbox-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-hover-opacity: var(--md-checkbox-selected-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-checkbox-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-opacity: var(--md-checkbox-selected-pressed-state-layer-opacity, 0.12)}.icon{fill:var(--md-checkbox-selected-icon-color, var(--md-sys-color-on-primary, #fff));height:var(--md-checkbox-icon-size, 18px);width:var(--md-checkbox-icon-size, 18px)}.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(:hover) .outline{border-color:var(--md-checkbox-hover-outline-color, var(--md-sys-color-on-surface, #1d1b20));border-width:var(--md-checkbox-hover-outline-width, 2px)}:where(:hover) .background{background:var(--md-checkbox-selected-hover-container-color, var(--md-sys-color-primary, #6750a4))}:where(:hover) .icon{fill:var(--md-checkbox-selected-hover-icon-color, var(--md-sys-color-on-primary, #fff))}:where(:focus-within) .outline{border-color:var(--md-checkbox-focus-outline-color, var(--md-sys-color-on-surface, #1d1b20));border-width:var(--md-checkbox-focus-outline-width, 2px)}:where(:focus-within) .background{background:var(--md-checkbox-selected-focus-container-color, var(--md-sys-color-primary, #6750a4))}:where(:focus-within) .icon{fill:var(--md-checkbox-selected-focus-icon-color, var(--md-sys-color-on-primary, #fff))}:where(:active) .outline{border-color:var(--md-checkbox-pressed-outline-color, var(--md-sys-color-on-surface, #1d1b20));border-width:var(--md-checkbox-pressed-outline-width, 2px)}:where(:active) .background{background:var(--md-checkbox-selected-pressed-container-color, var(--md-sys-color-primary, #6750a4))}:where(:active) .icon{fill:var(--md-checkbox-selected-pressed-icon-color, var(--md-sys-color-on-primary, #fff))}:where(.disabled,.prev-disabled) :is(.background,.icon,.mark){animation-duration:0s;transition-duration:0s}:where(.disabled) .outline{border-color:var(--md-checkbox-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));border-width:var(--md-checkbox-disabled-outline-width, 2px);opacity:var(--md-checkbox-disabled-container-opacity, 0.38)}:where(.selected.disabled) .outline{visibility:hidden}:where(.selected.disabled) .background{background:var(--md-checkbox-selected-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-checkbox-selected-disabled-container-opacity, 0.38)}:where(.disabled) .icon{fill:var(--md-checkbox-selected-disabled-icon-color, var(--md-sys-color-surface, #fef7ff))}@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}}\n`;\n"]}

package/checkbox/internal/checkbox-styles.scss

@@ -0,0 +1,10 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use './checkbox';
+// go/keep-sorted end
+
+@include checkbox.styles;

package/checkbox/internal/checkbox.d.ts

@@ -0,0 +1,72 @@
+/**
+ * @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';
+import { createValidator, getValidityAnchor } from '../../labs/behaviors/constraint-validation.js';
+import { getFormState, getFormValue } from '../../labs/behaviors/form-associated.js';
+import { CheckboxValidator } from '../../labs/behaviors/validators/checkbox-validator.js';
+declare const checkboxBaseClass: import("../../labs/behaviors/mixin.js").MixinReturn<import("../../labs/behaviors/mixin.js").MixinReturn<import("../../labs/behaviors/mixin.js").MixinReturn<(abstract new (...args: any[]) => import("../../labs/behaviors/element-internals.js").WithElementInternals) & typeof LitElement & import("../../labs/behaviors/form-associated.js").FormAssociatedConstructor, import("../../labs/behaviors/form-associated.js").FormAssociated>, import("../../labs/behaviors/constraint-validation.js").ConstraintValidation>>;
+/**
+ * A checkbox component.
+ *
+ *
+ * @fires change {Event} The native `change` event on
+ * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)
+ * --bubbles
+ * @fires input {InputEvent} The native `input` event on
+ * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)
+ * --bubbles --composed
+ */
+export declare class Checkbox extends checkboxBaseClass {
+    /** @nocollapse */
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    /**
+     * Whether or not the checkbox is selected.
+     */
+    checked: 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;
+    /**
+     * When true, require the checkbox to be selected when participating in
+     * form submission.
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation
+     */
+    required: 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;
+    private prevChecked;
+    private prevDisabled;
+    private prevIndeterminate;
+    private readonly input;
+    constructor();
+    protected update(changed: PropertyValues<Checkbox>): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+    private handleInput;
+    private handleChange;
+    disabled: boolean;
+    name: string;
+    [getFormValue](): string;
+    [getFormState](): string;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string): void;
+    [createValidator](): CheckboxValidator;
+    [getValidityAnchor](): HTMLInputElement;
+}
+export {};