@material/web 1.0.0-pre.8 → 1.0.0

package/switch/lib/README.md

@@ -1,55 +0,0 @@
-# Switch
-
-## DOM structure
-
-```html
-<button class="md3-switch">
-  <div class="md3-switch__track">
-    ::before
-    <div class="md3-switch__handle">
-      ::before
-      <div class="md3-switch__icons">
-      </div>
-    </div>
-  </div>
-  <input type="checkbox" aria-hidden="true">
-</button>
-```
-
-### .md3-switch
-
-This is the outermost button. It holds the track and the input checkbox.
-
-NOTE: This is intentionally left without a border to make the focus-ring simpler
-to apply.
-
-### .md3-switch__track
-
-This is the track. It contains the track selected styles.
-
-### .md3-switch__track::before
-
-This element contains the track unselected styles. Its opacity is set to 0
-when the switch is selected.
-
-### .md3-switch__handle
-
-This is the handle. It contains the styles of selected styles.
-
-### .md3-switch__handle::before
-
-This element contains the handle unselected styles. Its opacity is set to 0
-when the switch is selected.
-
-
-## Animations
-
-*  opacity on .md3-switch__track::before
-   *  Why? setting opacity will change between selected and unselected track
-*  opacity on .md3-switch__handle::before
-   *  Why? setting opacity will change between selected and unselected handle
-*  transform (scale) on .md3-switch__handle
-   *  Why? This animates the growing & shrinking of the handle.
-*  margin-inline-start & margin-inline-end on .md3-switch__handle
-   *  Why? This animates the position of the handle.
-

package/switch/lib/_handle.scss

@@ -1,168 +0,0 @@
-//
-// Copyright 2022 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
-// go/keep-sorted start
-@use 'sass:map';
-// go/keep-sorted end
-// go/keep-sorted start
-@use '../../ripple/ripple';
-@use '../../tokens';
-// go/keep-sorted end
-
-$_md-sys-motion: tokens.md-sys-motion-values();
-$_easing-standard: map.get($_md-sys-motion, easing-standard);
-
-@mixin styles() {
-  .md3-switch__handle-container {
-    position: relative;
-    // this easing is custom to perform the "overshoot" animation
-    transition: margin 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
-    display: flex;
-    $margin: calc(var(--_track-width) - var(--_track-height));
-
-    .md3-switch--selected & {
-      margin-inline-start: $margin;
-    }
-
-    .md3-switch--unselected & {
-      margin-inline-end: $margin;
-    }
-
-    .md3-switch:disabled & {
-      transition: none;
-    }
-  }
-
-  .md3-switch__handle {
-    // Handle shape
-    border-start-start-radius: var(--_handle-shape-start-start);
-    border-start-end-radius: var(--_handle-shape-start-end);
-    border-end-end-radius: var(--_handle-shape-end-end);
-    border-end-start-radius: var(--_handle-shape-end-start);
-    height: var(--_unselected-handle-height);
-    width: var(--_unselected-handle-width);
-    background-color: var(--_selected-handle-color);
-
-    transform-origin: center;
-    transition-property: height, width, background-color;
-    transition-duration: 250ms, 250ms, 67ms;
-    transition-timing-function: $_easing-standard, $_easing-standard, linear;
-    z-index: 0;
-
-    &::before {
-      content: '';
-      display: flex;
-      position: absolute;
-      height: 100%;
-      width: 100%;
-      border-radius: inherit;
-      box-sizing: border-box;
-
-      transition: opacity 67ms linear;
-
-      .md3-switch--selected & {
-        // When selected, turn off ::before
-        opacity: 0;
-      }
-
-      .md3-switch:disabled & {
-        transition: none;
-      }
-    }
-
-    .md3-switch:disabled & {
-      transition: none;
-    }
-
-    .md3-switch--selected &,
-    .md3-switch--unselected &.md3-switch__handle--big {
-      height: var(--_selected-handle-height);
-      width: var(--_selected-handle-width);
-    }
-
-    .md3-switch--selected:enabled:active &,
-    .md3-switch--unselected:enabled:active & {
-      height: var(--_pressed-handle-height);
-      width: var(--_pressed-handle-width);
-      transition-timing-function: linear;
-      transition-duration: 100ms;
-    }
-
-    .md3-switch--selected:hover & {
-      background-color: var(--_selected-hover-handle-color);
-    }
-
-    .md3-switch--selected:focus-visible & {
-      background-color: var(--_selected-focus-handle-color);
-    }
-
-    .md3-switch--selected:active & {
-      background-color: var(--_selected-pressed-handle-color);
-    }
-
-    .md3-switch--selected:disabled & {
-      background-color: var(--_disabled-selected-handle-color);
-    }
-
-    &::before {
-      background-color: var(--_unselected-handle-color);
-
-      .md3-switch--unselected:hover & {
-        background-color: var(--_unselected-hover-handle-color);
-      }
-
-      .md3-switch--unselected:focus-visible & {
-        background-color: var(--_unselected-focus-handle-color);
-      }
-
-      .md3-switch--unselected:active & {
-        background-color: var(--_unselected-pressed-handle-color);
-      }
-
-      .md3-switch--unselected:disabled & {
-        background-color: var(--_disabled-unselected-handle-color);
-      }
-    }
-  }
-
-  .md3-switch__ripple {
-    position: absolute;
-    display: inline-flex;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    height: var(--_state-layer-size);
-    width: var(--_state-layer-size);
-
-    .md3-switch--selected & {
-      @include ripple.theme(
-        (
-          hover-color: var(--_selected-hover-state-layer-color),
-          focus-color: var(--_selected-focus-state-layer-color),
-          pressed-color: var(--_selected-pressed-state-layer-color),
-          hover-opacity: var(--_selected-hover-state-layer-opacity),
-          focus-opacity: var(--_selected-focus-state-layer-opacity),
-          pressed-opacity: var(--_selected-pressed-state-layer-opacity),
-        )
-      );
-    }
-
-    .md3-switch--unselected & {
-      @include ripple.theme(
-        (
-          hover-color: var(--_unselected-hover-state-layer-color),
-          focus-color: var(--_unselected-focus-state-layer-color),
-          pressed-color: var(--_unselected-pressed-state-layer-color),
-          hover-opacity: var(--_unselected-hover-state-layer-opacity),
-          focus-opacity: var(--_unselected-focus-state-layer-opacity),
-          pressed-opacity: var(--_unselected-pressed-state-layer-opacity),
-        )
-      );
-    }
-  }
-}

package/switch/lib/_icon.scss

@@ -1,73 +0,0 @@
-//
-// Copyright 2022 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
-// go/keep-sorted start
-@use 'sass:map';
-// go/keep-sorted end
-// go/keep-sorted start
-@use '../../tokens';
-// go/keep-sorted end
-
-$_md-sys-motion: tokens.md-sys-motion-values();
-$_easing-standard: map.get($_md-sys-motion, easing-standard);
-
-@mixin styles() {
-  .md3-switch__icons {
-    position: relative;
-    height: 100%;
-    width: 100%;
-  }
-
-  .md3-switch__icon {
-    position: absolute;
-    inset: 0;
-    margin: auto;
-
-    transition: fill 67ms linear, opacity 33ms linear,
-      transform 167ms $_easing-standard;
-    opacity: 0;
-
-    .md3-switch:disabled & {
-      transition: none;
-    }
-  }
-
-  .md3-switch--selected .md3-switch__icon--on,
-  .md3-switch--unselected .md3-switch__icon--off {
-    opacity: 1;
-  }
-
-  // rotate selected icon into view when there is no unselected icon
-  .md3-switch--unselected
-    .md3-switch__handle:not(.md3-switch__handle--big)
-    .md3-switch__icon--on {
-    transform: rotate(-45deg);
-  }
-
-  .md3-switch__icon {
-    .md3-switch--selected & {
-      width: var(--_selected-icon-size);
-      height: var(--_selected-icon-size);
-      fill: var(--_selected-icon-color);
-    }
-
-    .md3-switch--unselected & {
-      width: var(--_unselected-icon-size);
-      height: var(--_unselected-icon-size);
-      fill: var(--_unselected-icon-color);
-    }
-
-    .md3-switch--selected:disabled & {
-      fill: var(--_disabled-selected-icon-color);
-    }
-
-    .md3-switch--unselected:disabled & {
-      fill: var(--_disabled-unselected-icon-color);
-    }
-  }
-}

package/switch/lib/_switch.scss

@@ -1,226 +0,0 @@
-//
-// Copyright 2021 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
-// go/keep-sorted start
-@use 'sass:list';
-@use 'sass:map';
-// go/keep-sorted end
-// go/keep-sorted start
-@use '../../focus/focus-ring';
-@use '../../sass/color';
-@use '../../sass/touch-target';
-@use '../../tokens';
-@use './handle';
-@use './icon';
-@use './track';
-// go/keep-sorted end
-
-$_forced-colors-theme: (
-  disabled-selected-icon-color: GrayText,
-  disabled-selected-icon-opacity: 1,
-  disabled-selected-track-color: GrayText,
-  disabled-track-opacity: 1,
-  disabled-unselected-handle-color: GrayText,
-  disabled-unselected-handle-opacity: 1,
-  disabled-unselected-icon-color: Canvas,
-  disabled-unselected-icon-opacity: 1,
-  selected-focus-track-color: ButtonText,
-  selected-hover-track-color: ButtonText,
-  selected-icon-color: ButtonText,
-  selected-pressed-track-color: ButtonText,
-  selected-track-color: ButtonText,
-  unselected-focus-handle-color: ButtonText,
-  unselected-handle-color: ButtonText,
-  unselected-hover-handle-color: ButtonText,
-  unselected-icon-color: Canvas,
-  unselected-pressed-handle-color: ButtonText,
-);
-
-@mixin theme($tokens) {
-  $supported-tokens: list.join(
-    tokens.$md-comp-switch-supported-tokens,
-    (
-      'handle-shape-start-start',
-      'handle-shape-start-end',
-      'handle-shape-end-end',
-      'handle-shape-end-start',
-      'track-shape-start-start',
-      'track-shape-start-end',
-      'track-shape-end-end',
-      'track-shape-end-start'
-    )
-  );
-
-  $tokens: _flatten-disable-colors($tokens);
-
-  @each $token, $value in $tokens {
-    @if list.index($supported-tokens, $token) == null {
-      @error 'Token `#{$token}` is not a supported token.';
-    }
-
-    @if $value {
-      --md-switch-#{$token}: #{$value};
-    }
-  }
-}
-
-@mixin styles() {
-  $tokens: tokens.md-comp-switch-values();
-  $tokens: _flatten-disable-colors($tokens);
-
-  :host {
-    @each $token, $value in $tokens {
-      --_#{$token}: var(--md-switch-#{$token}, #{$value});
-    }
-
-    // Support logical shape properties
-    --_handle-shape-start-start: var(
-      --md-switch-handle-shape-start-start,
-      var(--_handle-shape)
-    );
-    --_handle-shape-start-end: var(
-      --md-switch-handle-shape-start-end,
-      var(--_handle-shape)
-    );
-    --_handle-shape-end-end: var(
-      --md-switch-handle-shape-end-end,
-      var(--_handle-shape)
-    );
-    --_handle-shape-end-start: var(
-      --md-switch-handle-shape-end-start,
-      var(--_handle-shape)
-    );
-    --_track-shape-start-start: var(
-      --md-switch-track-shape-start-start,
-      var(--_track-shape)
-    );
-    --_track-shape-start-end: var(
-      --md-switch-track-shape-start-end,
-      var(--_track-shape)
-    );
-    --_track-shape-end-end: var(
-      --md-switch-track-shape-end-end,
-      var(--_track-shape)
-    );
-    --_track-shape-end-start: var(
-      --md-switch-track-shape-end-start,
-      var(--_track-shape)
-    );
-
-    // TODO(b/230630968): create a forced-colors-mode mixin
-    @media screen and (forced-colors: active) {
-      @include theme($_forced-colors-theme);
-    }
-
-    display: inline-flex;
-    outline: none;
-    vertical-align: top;
-    -webkit-tap-highlight-color: transparent;
-  }
-
-  md-focus-ring {
-    @include focus-ring.theme(
-      (
-        'shape-start-start': var(--_track-shape-start-start),
-        'shape-start-end': var(--_track-shape-start-end),
-        'shape-end-end': var(--_track-shape-end-end),
-        'shape-end-start': var(--_track-shape-end-start),
-      )
-    );
-  }
-
-  .md3-switch {
-    align-items: center;
-    background: none;
-    border: none;
-    cursor: pointer;
-    display: inline-flex;
-    flex-shrink: 0; // Stop from collapsing in flex containers
-    margin: 0;
-    outline: none;
-    padding: 0;
-    position: relative;
-    width: var(--_track-width);
-    height: var(--_track-height);
-
-    // Track shape
-    border-start-start-radius: var(--_track-shape-start-start);
-    border-start-end-radius: var(--_track-shape-start-end);
-    border-end-end-radius: var(--_track-shape-end-end);
-    border-end-start-radius: var(--_track-shape-end-start);
-  }
-
-  // Touch target
-  .md3-switch__touch {
-    @include touch-target.touch-target();
-  }
-
-  // Disabled
-  .md3-switch:disabled {
-    cursor: default;
-    pointer-events: none;
-  }
-
-  // Disabled - Track
-  .md3-switch__track {
-    .md3-switch:disabled & {
-      background-color: transparent;
-      border-color: transparent;
-
-      &::before {
-        background-clip: content-box;
-      }
-    }
-    .md3-switch--selected:disabled & {
-      background-clip: border-box;
-    }
-  }
-
-  @include track.styles();
-  @include handle.styles();
-  @include icon.styles();
-}
-
-@function _flatten-disable-colors($theme) {
-  @return color.join-color-and-opacity-pairs(
-    $theme,
-    (
-      // Disabled Handle
-      (
-          color-key: disabled-selected-handle-color,
-          opacity-key: disabled-selected-handle-opacity
-        ),
-      (
-        color-key: disabled-unselected-handle-color,
-        opacity-key: disabled-unselected-handle-opacity
-      ),
-      // Disabled Track
-      (
-          color-key: disabled-selected-track-color,
-          opacity-key: disabled-track-opacity
-        ),
-      (
-        color-key: disabled-unselected-track-color,
-        opacity-key: disabled-track-opacity
-      ),
-      (
-        color-key: disabled-unselected-track-outline-color,
-        opacity-key: disabled-track-opacity
-      ),
-      // Disabled Icon
-      (
-          color-key: disabled-selected-icon-color,
-          opacity-key: disabled-selected-icon-opacity
-        ),
-      (
-        color-key: disabled-unselected-icon-color,
-        opacity-key: disabled-unselected-icon-opacity
-      )
-    )
-  );
-}

package/switch/lib/_track.scss

@@ -1,98 +0,0 @@
-//
-// Copyright 2022 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
-// go/keep-sorted start
-@use 'sass:map';
-// go/keep-sorted end
-
-@mixin styles() {
-  .md3-switch__track {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
-
-    border-radius: inherit;
-
-    // Center content
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    transition: background-color 67ms linear;
-    background-color: var(--_selected-track-color);
-
-    .md3-switch:disabled & {
-      transition: none;
-    }
-
-    .md3-switch--selected:hover & {
-      background-color: var(--_selected-hover-track-color);
-    }
-
-    .md3-switch--selected:focus-visible & {
-      background-color: var(--_selected-focus-track-color);
-    }
-
-    .md3-switch--selected:active & {
-      background-color: var(--_selected-pressed-track-color);
-    }
-
-    .md3-switch--selected:disabled & {
-      background-color: var(--_disabled-selected-track-color);
-    }
-
-    &::before {
-      content: '';
-      display: flex;
-      position: absolute;
-      height: 100%;
-      width: 100%;
-      border-radius: inherit;
-      box-sizing: border-box;
-      border-style: solid;
-
-      transition-property: opacity, background-color;
-      transition-timing-function: linear;
-      transition-duration: 67ms;
-
-      border-width: var(--_track-outline-width);
-      background-color: var(--_unselected-track-color);
-      border-color: var(--_unselected-track-outline-color);
-
-      .md3-switch:disabled & {
-        transition: none;
-      }
-
-      .md3-switch--selected & {
-        // When selected, turn off ::before
-        opacity: 0;
-      }
-
-      .md3-switch--unselected:hover & {
-        background-color: var(--_unselected-hover-track-color);
-        border-color: var(--_unselected-hover-track-outline-color);
-      }
-
-      .md3-switch--unselected:focus-visible & {
-        background-color: var(--_unselected-focus-track-color);
-        border-color: var(--_unselected-focus-track-outline-color);
-      }
-
-      .md3-switch--unselected:active & {
-        background-color: var(--_unselected-pressed-track-color);
-        border-color: var(--_unselected-pressed-track-outline-color);
-      }
-
-      .md3-switch--unselected:disabled & {
-        background-color: var(--_disabled-unselected-track-color);
-        border-color: var(--_disabled-unselected-track-outline-color);
-      }
-    }
-  }
-}

package/switch/lib/switch-styles.css.js

@@ -1,9 +0,0 @@
-/**
-  * @license
-  * Copyright 2022 Google LLC
-  * SPDX-License-Identifier: Apache-2.0
-  */
-import { css } from 'lit';
-export const styles = css `:host{--_disabled-selected-handle-color: var(--md-switch-disabled-selected-handle-color, rgb(var(--md-sys-color-surface-rgb, 254, 247, 255), 1));--_disabled-selected-icon-color: var(--md-switch-disabled-selected-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 29, 27, 32), 0.38));--_disabled-selected-track-color: var(--md-switch-disabled-selected-track-color, rgb(var(--md-sys-color-on-surface-rgb, 29, 27, 32), 0.12));--_disabled-unselected-handle-color: var(--md-switch-disabled-unselected-handle-color, rgb(var(--md-sys-color-on-surface-rgb, 29, 27, 32), 0.38));--_disabled-unselected-icon-color: var(--md-switch-disabled-unselected-icon-color, rgb(var(--md-sys-color-surface-container-highest-rgb, 230, 224, 233), 0.38));--_disabled-unselected-track-color: var(--md-switch-disabled-unselected-track-color, rgb(var(--md-sys-color-surface-container-highest-rgb, 230, 224, 233), 0.12));--_disabled-unselected-track-outline-color: var(--md-switch-disabled-unselected-track-outline-color, rgb(var(--md-sys-color-on-surface-rgb, 29, 27, 32), 0.12));--_handle-shape: var(--md-switch-handle-shape, 9999px);--_pressed-handle-height: var(--md-switch-pressed-handle-height, 28px);--_pressed-handle-width: var(--md-switch-pressed-handle-width, 28px);--_selected-focus-handle-color: var(--md-switch-selected-focus-handle-color, var(--md-sys-color-primary-container, #eaddff));--_selected-focus-icon-color: var(--md-switch-selected-focus-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_selected-focus-state-layer-color: var(--md-switch-selected-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-focus-state-layer-opacity: var(--md-switch-selected-focus-state-layer-opacity, 0.12);--_selected-focus-track-color: var(--md-switch-selected-focus-track-color, var(--md-sys-color-primary, #6750a4));--_selected-handle-color: var(--md-switch-selected-handle-color, var(--md-sys-color-on-primary, #fff));--_selected-handle-height: var(--md-switch-selected-handle-height, 24px);--_selected-handle-width: var(--md-switch-selected-handle-width, 24px);--_selected-hover-handle-color: var(--md-switch-selected-hover-handle-color, var(--md-sys-color-primary-container, #eaddff));--_selected-hover-icon-color: var(--md-switch-selected-hover-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_selected-hover-state-layer-color: var(--md-switch-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-opacity: var(--md-switch-selected-hover-state-layer-opacity, 0.08);--_selected-hover-track-color: var(--md-switch-selected-hover-track-color, var(--md-sys-color-primary, #6750a4));--_selected-icon-color: var(--md-switch-selected-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_selected-icon-size: var(--md-switch-selected-icon-size, 16px);--_selected-pressed-handle-color: var(--md-switch-selected-pressed-handle-color, var(--md-sys-color-primary-container, #eaddff));--_selected-pressed-icon-color: var(--md-switch-selected-pressed-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_selected-pressed-state-layer-color: var(--md-switch-selected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-state-layer-opacity: var(--md-switch-selected-pressed-state-layer-opacity, 0.12);--_selected-pressed-track-color: var(--md-switch-selected-pressed-track-color, var(--md-sys-color-primary, #6750a4));--_selected-track-color: var(--md-switch-selected-track-color, var(--md-sys-color-primary, #6750a4));--_state-layer-shape: var(--md-switch-state-layer-shape, 9999px);--_state-layer-size: var(--md-switch-state-layer-size, 40px);--_track-height: var(--md-switch-track-height, 32px);--_track-outline-width: var(--md-switch-track-outline-width, 2px);--_track-shape: var(--md-switch-track-shape, 9999px);--_track-width: var(--md-switch-track-width, 52px);--_unselected-focus-handle-color: var(--md-switch-unselected-focus-handle-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-focus-icon-color: var(--md-switch-unselected-focus-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-focus-state-layer-color: var(--md-switch-unselected-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-focus-state-layer-opacity: var(--md-switch-unselected-focus-state-layer-opacity, 0.12);--_unselected-focus-track-color: var(--md-switch-unselected-focus-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-focus-track-outline-color: var(--md-switch-unselected-focus-track-outline-color, var(--md-sys-color-outline, #79747e));--_unselected-handle-color: var(--md-switch-unselected-handle-color, var(--md-sys-color-outline, #79747e));--_unselected-handle-height: var(--md-switch-unselected-handle-height, 16px);--_unselected-handle-width: var(--md-switch-unselected-handle-width, 16px);--_unselected-hover-handle-color: var(--md-switch-unselected-hover-handle-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-hover-icon-color: var(--md-switch-unselected-hover-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-hover-state-layer-color: var(--md-switch-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-state-layer-opacity: var(--md-switch-unselected-hover-state-layer-opacity, 0.08);--_unselected-hover-track-color: var(--md-switch-unselected-hover-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-hover-track-outline-color: var(--md-switch-unselected-hover-track-outline-color, var(--md-sys-color-outline, #79747e));--_unselected-icon-color: var(--md-switch-unselected-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-icon-size: var(--md-switch-unselected-icon-size, 16px);--_unselected-pressed-handle-color: var(--md-switch-unselected-pressed-handle-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-pressed-icon-color: var(--md-switch-unselected-pressed-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-pressed-state-layer-color: var(--md-switch-unselected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-state-layer-opacity: var(--md-switch-unselected-pressed-state-layer-opacity, 0.12);--_unselected-pressed-track-color: var(--md-switch-unselected-pressed-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-pressed-track-outline-color: var(--md-switch-unselected-pressed-track-outline-color, var(--md-sys-color-outline, #79747e));--_unselected-track-color: var(--md-switch-unselected-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_unselected-track-outline-color: var(--md-switch-unselected-track-outline-color, var(--md-sys-color-outline, #79747e));--_with-icon-handle-height: var(--md-switch-with-icon-handle-height, 24px);--_with-icon-handle-width: var(--md-switch-with-icon-handle-width, 24px);--_handle-shape-start-start: var( --md-switch-handle-shape-start-start, var(--_handle-shape) );--_handle-shape-start-end: var( --md-switch-handle-shape-start-end, var(--_handle-shape) );--_handle-shape-end-end: var( --md-switch-handle-shape-end-end, var(--_handle-shape) );--_handle-shape-end-start: var( --md-switch-handle-shape-end-start, var(--_handle-shape) );--_track-shape-start-start: var( --md-switch-track-shape-start-start, var(--_track-shape) );--_track-shape-start-end: var( --md-switch-track-shape-start-end, var(--_track-shape) );--_track-shape-end-end: var( --md-switch-track-shape-end-end, var(--_track-shape) );--_track-shape-end-start: var( --md-switch-track-shape-end-start, var(--_track-shape) );display:inline-flex;outline:none;vertical-align:top;-webkit-tap-highlight-color:rgba(0,0,0,0)}@media screen and (forced-colors: active){:host{--md-switch-disabled-selected-icon-color: GrayText;--md-switch-disabled-selected-track-color: GrayText;--md-switch-disabled-unselected-handle-color: GrayText;--md-switch-disabled-unselected-icon-color: Canvas;--md-switch-selected-focus-track-color: ButtonText;--md-switch-selected-hover-track-color: ButtonText;--md-switch-selected-icon-color: ButtonText;--md-switch-selected-pressed-track-color: ButtonText;--md-switch-selected-track-color: ButtonText;--md-switch-unselected-focus-handle-color: ButtonText;--md-switch-unselected-handle-color: ButtonText;--md-switch-unselected-hover-handle-color: ButtonText;--md-switch-unselected-icon-color: Canvas;--md-switch-unselected-pressed-handle-color: ButtonText}}md-focus-ring{--md-focus-ring-shape-start-start: var(--_track-shape-start-start);--md-focus-ring-shape-start-end: var(--_track-shape-start-end);--md-focus-ring-shape-end-end: var(--_track-shape-end-end);--md-focus-ring-shape-end-start: var(--_track-shape-end-start)}.md3-switch{align-items:center;background:none;border:none;cursor:pointer;display:inline-flex;flex-shrink:0;margin:0;outline:none;padding:0;position:relative;width:var(--_track-width);height:var(--_track-height);border-start-start-radius:var(--_track-shape-start-start);border-start-end-radius:var(--_track-shape-start-end);border-end-end-radius:var(--_track-shape-end-end);border-end-start-radius:var(--_track-shape-end-start)}.md3-switch__touch{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%, -50%)}.md3-switch:disabled{cursor:default;pointer-events:none}.md3-switch:disabled .md3-switch__track{background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0)}.md3-switch:disabled .md3-switch__track::before{background-clip:content-box}.md3-switch--selected:disabled .md3-switch__track{background-clip:border-box}.md3-switch__track{position:absolute;width:100%;height:100%;box-sizing:border-box;border-radius:inherit;display:flex;justify-content:center;align-items:center;transition:background-color 67ms linear;background-color:var(--_selected-track-color)}.md3-switch:disabled .md3-switch__track{transition:none}.md3-switch--selected:hover .md3-switch__track{background-color:var(--_selected-hover-track-color)}.md3-switch--selected:focus-visible .md3-switch__track{background-color:var(--_selected-focus-track-color)}.md3-switch--selected:active .md3-switch__track{background-color:var(--_selected-pressed-track-color)}.md3-switch--selected:disabled .md3-switch__track{background-color:var(--_disabled-selected-track-color)}.md3-switch__track::before{content:"";display:flex;position:absolute;height:100%;width:100%;border-radius:inherit;box-sizing:border-box;border-style:solid;transition-property:opacity,background-color;transition-timing-function:linear;transition-duration:67ms;border-width:var(--_track-outline-width);background-color:var(--_unselected-track-color);border-color:var(--_unselected-track-outline-color)}.md3-switch:disabled .md3-switch__track::before{transition:none}.md3-switch--selected .md3-switch__track::before{opacity:0}.md3-switch--unselected:hover .md3-switch__track::before{background-color:var(--_unselected-hover-track-color);border-color:var(--_unselected-hover-track-outline-color)}.md3-switch--unselected:focus-visible .md3-switch__track::before{background-color:var(--_unselected-focus-track-color);border-color:var(--_unselected-focus-track-outline-color)}.md3-switch--unselected:active .md3-switch__track::before{background-color:var(--_unselected-pressed-track-color);border-color:var(--_unselected-pressed-track-outline-color)}.md3-switch--unselected:disabled .md3-switch__track::before{background-color:var(--_disabled-unselected-track-color);border-color:var(--_disabled-unselected-track-outline-color)}.md3-switch__handle-container{position:relative;transition:margin 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);display:flex}.md3-switch--selected .md3-switch__handle-container{margin-inline-start:calc(var(--_track-width) - var(--_track-height))}.md3-switch--unselected .md3-switch__handle-container{margin-inline-end:calc(var(--_track-width) - var(--_track-height))}.md3-switch:disabled .md3-switch__handle-container{transition:none}.md3-switch__handle{border-start-start-radius:var(--_handle-shape-start-start);border-start-end-radius:var(--_handle-shape-start-end);border-end-end-radius:var(--_handle-shape-end-end);border-end-start-radius:var(--_handle-shape-end-start);height:var(--_unselected-handle-height);width:var(--_unselected-handle-width);background-color:var(--_selected-handle-color);transform-origin:center;transition-property:height,width,background-color;transition-duration:250ms,250ms,67ms;transition-timing-function:cubic-bezier(0.2, 0, 0, 1),cubic-bezier(0.2, 0, 0, 1),linear;z-index:0}.md3-switch__handle::before{content:"";display:flex;position:absolute;height:100%;width:100%;border-radius:inherit;box-sizing:border-box;transition:opacity 67ms linear}.md3-switch--selected .md3-switch__handle::before{opacity:0}.md3-switch:disabled .md3-switch__handle::before{transition:none}.md3-switch:disabled .md3-switch__handle{transition:none}.md3-switch--selected .md3-switch__handle,.md3-switch--unselected .md3-switch__handle.md3-switch__handle--big{height:var(--_selected-handle-height);width:var(--_selected-handle-width)}.md3-switch--selected:enabled:active .md3-switch__handle,.md3-switch--unselected:enabled:active .md3-switch__handle{height:var(--_pressed-handle-height);width:var(--_pressed-handle-width);transition-timing-function:linear;transition-duration:100ms}.md3-switch--selected:hover .md3-switch__handle{background-color:var(--_selected-hover-handle-color)}.md3-switch--selected:focus-visible .md3-switch__handle{background-color:var(--_selected-focus-handle-color)}.md3-switch--selected:active .md3-switch__handle{background-color:var(--_selected-pressed-handle-color)}.md3-switch--selected:disabled .md3-switch__handle{background-color:var(--_disabled-selected-handle-color)}.md3-switch__handle::before{background-color:var(--_unselected-handle-color)}.md3-switch--unselected:hover .md3-switch__handle::before{background-color:var(--_unselected-hover-handle-color)}.md3-switch--unselected:focus-visible .md3-switch__handle::before{background-color:var(--_unselected-focus-handle-color)}.md3-switch--unselected:active .md3-switch__handle::before{background-color:var(--_unselected-pressed-handle-color)}.md3-switch--unselected:disabled .md3-switch__handle::before{background-color:var(--_disabled-unselected-handle-color)}.md3-switch__ripple{position:absolute;display:inline-flex;top:50%;left:50%;transform:translate(-50%, -50%);height:var(--_state-layer-size);width:var(--_state-layer-size)}.md3-switch--selected .md3-switch__ripple{--md-ripple-hover-color:var(--_selected-hover-state-layer-color);--md-ripple-focus-color:var(--_selected-focus-state-layer-color);--md-ripple-pressed-color:var(--_selected-pressed-state-layer-color);--md-ripple-hover-opacity:var(--_selected-hover-state-layer-opacity);--md-ripple-focus-opacity:var(--_selected-focus-state-layer-opacity);--md-ripple-pressed-opacity:var(--_selected-pressed-state-layer-opacity)}.md3-switch--unselected .md3-switch__ripple{--md-ripple-hover-color:var(--_unselected-hover-state-layer-color);--md-ripple-focus-color:var(--_unselected-focus-state-layer-color);--md-ripple-pressed-color:var(--_unselected-pressed-state-layer-color);--md-ripple-hover-opacity:var(--_unselected-hover-state-layer-opacity);--md-ripple-focus-opacity:var(--_unselected-focus-state-layer-opacity);--md-ripple-pressed-opacity:var(--_unselected-pressed-state-layer-opacity)}.md3-switch__icons{position:relative;height:100%;width:100%}.md3-switch__icon{position:absolute;inset:0;margin:auto;transition:fill 67ms linear,opacity 33ms linear,transform 167ms cubic-bezier(0.2, 0, 0, 1);opacity:0}.md3-switch:disabled .md3-switch__icon{transition:none}.md3-switch--selected .md3-switch__icon--on,.md3-switch--unselected .md3-switch__icon--off{opacity:1}.md3-switch--unselected .md3-switch__handle:not(.md3-switch__handle--big) .md3-switch__icon--on{transform:rotate(-45deg)}.md3-switch--selected .md3-switch__icon{width:var(--_selected-icon-size);height:var(--_selected-icon-size);fill:var(--_selected-icon-color)}.md3-switch--unselected .md3-switch__icon{width:var(--_unselected-icon-size);height:var(--_unselected-icon-size);fill:var(--_unselected-icon-color)}.md3-switch--selected:disabled .md3-switch__icon{fill:var(--_disabled-selected-icon-color)}.md3-switch--unselected:disabled .md3-switch__icon{fill:var(--_disabled-unselected-icon-color)}/*# sourceMappingURL=switch-styles.css.map */
-`;
-//# sourceMappingURL=switch-styles.css.js.map