@material/web 1.0.0-pre.8 → 1.0.0

package/button/outlined-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"outlined-button.js","sourceRoot":"","sources":["outlined-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,cAAc,EAAC,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,cAAc;;AAClC,uBAAM,GAAG,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;AAD7C,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAE5B;SAFY,gBAAgB","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {OutlinedButton} from './lib/outlined-button.js';\nimport {styles as outlinedStyles} from './lib/outlined-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-outlined-button': MdOutlinedButton;\n  }\n}\n\n/**\n * @summary Buttons help people take action, such as sending an email, sharing a\n * document, or liking a comment.\n *\n * @description\n * __Emphasis:__ Medium emphasis – For important actions that don’t distract\n * from other onscreen elements.\n *\n * __Rationale:__ Use an outlined button for actions that need attention but\n * aren’t the primary action, such as “See all” or “Add to cart.” This is also\n * the button to use for giving someone the opportunity to change their mind or\n * escape a flow.\n *\n * __Example usages:__\n * - Reply\n * - View all\n * - Add to cart\n * - Take out of trash\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-outlined-button')\nexport class MdOutlinedButton extends OutlinedButton {\n  static override styles = [sharedStyles, outlinedStyles];\n}\n"]}
+{"version":3,"file":"outlined-button.js","sourceRoot":"","sources":["outlined-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,cAAc,EAAC,MAAM,+BAA+B,CAAC;AAC7D,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AAQvE;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEI,WAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,cAAc;;AAClC,uBAAM,GAAG,CAAC,YAAY,EAAE,cAAc,CAAC,AAAjC,CAAkC;AAD7C,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAE5B","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {OutlinedButton} from './internal/outlined-button.js';\nimport {styles as outlinedStyles} from './internal/outlined-styles.css.js';\nimport {styles as sharedStyles} from './internal/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-outlined-button': MdOutlinedButton;\n  }\n}\n\n/**\n * @summary Buttons help people take action, such as sending an email, sharing a\n * document, or liking a comment.\n *\n * @description\n * __Emphasis:__ Medium emphasis – For important actions that don’t distract\n * from other onscreen elements.\n *\n * __Rationale:__ Use an outlined button for actions that need attention but\n * aren’t the primary action, such as “See all” or “Add to cart.” This is also\n * the button to use for giving someone the opportunity to change their mind or\n * escape a flow.\n *\n * __Example usages:__\n * - Reply\n * - View all\n * - Add to cart\n * - Take out of trash\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-outlined-button')\nexport class MdOutlinedButton extends OutlinedButton {\n  static override styles = [sharedStyles, outlinedStyles];\n}\n"]}

package/button/text-button.d.ts

@@ -3,7 +3,7 @@
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { TextButton } from './lib/text-button.js';
+import { TextButton } from './internal/text-button.js';
 declare global {
     interface HTMLElementTagNameMap {
         'md-text-button': MdTextButton;

package/button/text-button.js

@@ -5,9 +5,9 @@
  */
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
-import { styles as sharedStyles } from './lib/shared-styles.css.js';
-import { TextButton } from './lib/text-button.js';
-import { styles as textStyles } from './lib/text-styles.css.js';
+import { styles as sharedStyles } from './internal/shared-styles.css.js';
+import { TextButton } from './internal/text-button.js';
+import { styles as textStyles } from './internal/text-styles.css.js';
 /**
  * @summary Buttons help people take action, such as sending an email, sharing a
  * document, or liking a comment.
@@ -28,11 +28,10 @@ import { styles as textStyles } from './lib/text-styles.css.js';
  * @final
  * @suppress {visibility}
  */
-let MdTextButton = class MdTextButton extends TextButton {
+export let MdTextButton = class MdTextButton extends TextButton {
 };
 MdTextButton.styles = [sharedStyles, textStyles];
 MdTextButton = __decorate([
     customElement('md-text-button')
 ], MdTextButton);
-export { MdTextButton };
 //# sourceMappingURL=text-button.js.map

package/button/text-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-button.js","sourceRoot":"","sources":["text-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAC,UAAU,EAAC,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAC,MAAM,IAAI,UAAU,EAAC,MAAM,0BAA0B,CAAC;AAQ9D;;;;;;;;;;;;;;;;;;;GAmBG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;;AAC1B,mBAAM,GAAG,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;AADzC,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAExB;SAFY,YAAY","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\nimport {TextButton} from './lib/text-button.js';\nimport {styles as textStyles} from './lib/text-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-text-button': MdTextButton;\n  }\n}\n\n/**\n * @summary Buttons help people take action, such as sending an email, sharing a\n * document, or liking a comment.\n *\n * @description\n * __Emphasis:__ Low emphasis – For optional or supplementary actions with the\n * least amount of prominence\n *\n * __Rationale:__ Text buttons have less visual prominence, so should be used\n * for low emphasis actions, such as an alternative option.\n *\n * __Example usages:__\n * - Learn more\n * - View all\n * - Change account\n * - Turn on\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-text-button')\nexport class MdTextButton extends TextButton {\n  static override styles = [sharedStyles, textStyles];\n}\n"]}
+{"version":3,"file":"text-button.js","sourceRoot":"","sources":["text-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAC,UAAU,EAAC,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAC,MAAM,IAAI,UAAU,EAAC,MAAM,+BAA+B,CAAC;AAQnE;;;;;;;;;;;;;;;;;;;GAmBG;AAEI,WAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;;AAC1B,mBAAM,GAAG,CAAC,YAAY,EAAE,UAAU,CAAC,AAA7B,CAA8B;AADzC,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAExB","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles as sharedStyles} from './internal/shared-styles.css.js';\nimport {TextButton} from './internal/text-button.js';\nimport {styles as textStyles} from './internal/text-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-text-button': MdTextButton;\n  }\n}\n\n/**\n * @summary Buttons help people take action, such as sending an email, sharing a\n * document, or liking a comment.\n *\n * @description\n * __Emphasis:__ Low emphasis – For optional or supplementary actions with the\n * least amount of prominence\n *\n * __Rationale:__ Text buttons have less visual prominence, so should be used\n * for low emphasis actions, such as an alternative option.\n *\n * __Example usages:__\n * - Learn more\n * - View all\n * - Change account\n * - Turn on\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-text-button')\nexport class MdTextButton extends TextButton {\n  static override styles = [sharedStyles, textStyles];\n}\n"]}

package/checkbox/_checkbox.scss

@@ -3,4 +3,4 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@forward './lib/checkbox' show theme;
+@forward './internal/checkbox' show theme;

package/checkbox/checkbox.d.ts

@@ -3,7 +3,7 @@
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { Checkbox } from './lib/checkbox.js';
+import { Checkbox } from './internal/checkbox.js';
 declare global {
     interface HTMLElementTagNameMap {
         'md-checkbox': MdCheckbox;

package/checkbox/checkbox.js

@@ -5,9 +5,8 @@
  */
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
-import { Checkbox } from './lib/checkbox.js';
-import { styles } from './lib/checkbox-styles.css.js';
-import { styles as forcedColorsStyles } from './lib/forced-colors-styles.css.js';
+import { Checkbox } from './internal/checkbox.js';
+import { styles } from './internal/checkbox-styles.css.js';
 /**
  * @summary Checkboxes allow users to select one or more items from a set.
  * Checkboxes can turn an option on or off.
@@ -21,11 +20,10 @@ import { styles as forcedColorsStyles } from './lib/forced-colors-styles.css.js'
  * @final
  * @suppress {visibility}
  */
-let MdCheckbox = class MdCheckbox extends Checkbox {
+export let MdCheckbox = class MdCheckbox extends Checkbox {
 };
-MdCheckbox.styles = [styles, forcedColorsStyles];
+MdCheckbox.styles = [styles];
 MdCheckbox = __decorate([
     customElement('md-checkbox')
 ], MdCheckbox);
-export { MdCheckbox };
 //# sourceMappingURL=checkbox.js.map

package/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["checkbox.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,MAAM,EAAC,MAAM,8BAA8B,CAAC;AACpD,OAAO,EAAC,MAAM,IAAI,kBAAkB,EAAC,MAAM,mCAAmC,CAAC;AAQ/E;;;;;;;;;;;;GAYG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,QAAQ;;AACtB,iBAAM,GAAG,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;AAD3C,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAEtB;SAFY,UAAU","sourcesContent":["/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {Checkbox} from './lib/checkbox.js';\nimport {styles} from './lib/checkbox-styles.css.js';\nimport {styles as forcedColorsStyles} from './lib/forced-colors-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-checkbox': MdCheckbox;\n  }\n}\n\n/**\n * @summary Checkboxes allow users to select one or more items from a set.\n * Checkboxes can turn an option on or off.\n *\n * @description\n * Use checkboxes to:\n * - Select one or more options from a list\n * - Present a list containing sub-selections\n * - Turn an item on or off in a desktop environment\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-checkbox')\nexport class MdCheckbox extends Checkbox {\n  static override styles = [styles, forcedColorsStyles];\n}\n"]}
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["checkbox.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,QAAQ,EAAC,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAC,MAAM,EAAC,MAAM,mCAAmC,CAAC;AAQzD;;;;;;;;;;;;GAYG;AAEI,WAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,QAAQ;;AACtB,iBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AADvB,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAEtB","sourcesContent":["/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {Checkbox} from './internal/checkbox.js';\nimport {styles} from './internal/checkbox-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-checkbox': MdCheckbox;\n  }\n}\n\n/**\n * @summary Checkboxes allow users to select one or more items from a set.\n * Checkboxes can turn an option on or off.\n *\n * @description\n * Use checkboxes to:\n * - Select one or more options from a list\n * - Present a list containing sub-selections\n * - Turn an item on or off in a desktop environment\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-checkbox')\nexport class MdCheckbox extends Checkbox {\n  static override styles = [styles];\n}\n"]}

package/checkbox/harness.d.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { Harness } from '../testing/harness.js';
-import { Checkbox } from './lib/checkbox.js';
+import { Checkbox } from './internal/checkbox.js';
 /**
  * Test harness for checkbox.
  */

package/checkbox/harness.js.map

@@ -1 +1 @@
-{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAI9C;;GAEG;AACH,MAAM,OAAO,eAAgB,SAAQ,OAAiB;IAC3C,KAAK,CAAC,qBAAqB;QAClC,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAE,CAAC;IACzD,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {Checkbox} from './lib/checkbox.js';\n\n/**\n * Test harness for checkbox.\n */\nexport class CheckboxHarness extends Harness<Checkbox> {\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector('input')!;\n  }\n}\n"]}
+{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAI9C;;GAEG;AACH,MAAM,OAAO,eAAgB,SAAQ,OAAiB;IAC3C,KAAK,CAAC,qBAAqB;QAClC,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAE,CAAC;IACzD,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {Checkbox} from './internal/checkbox.js';\n\n/**\n * Test harness for checkbox.\n */\nexport class CheckboxHarness extends Harness<Checkbox> {\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector('input')!;\n  }\n}\n"]}

package/checkbox/internal/_checkbox.scss

@@ -0,0 +1,416 @@
+//
+// 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: 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: var(--_container-size);
+    position: relative;
+    vertical-align: top; // Fix extra space when placed inside display: block
+    width: var(--_container-size);
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  :host([touch-target='wrapper']) {
+    margin: max(0px, ((48px - var(--_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;
+  }
+
+  :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(--_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);
+    inset: unset;
+    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),
+      )
+    );
+  }
+
+  // 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(: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(: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(: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);
+  }
+
+  // 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);--_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-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);--_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:var(--_container-size);position:relative;vertical-align:top;width:var(--_container-size);-webkit-tap-highlight-color:rgba(0,0,0,0)}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_container-size))/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}: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(--_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);inset:unset;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)}.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(: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(: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(: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(.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);--_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-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);--_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:var(--_container-size);position:relative;vertical-align:top;width:var(--_container-size);-webkit-tap-highlight-color:rgba(0,0,0,0)}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_container-size))/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}: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(--_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);inset:unset;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)}.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(: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(: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(: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(.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 "]}