@material/web 0.1.0-alpha.0 → 0.1.0-alpha.2

package/switch/lib/_handle.scss

@@ -0,0 +1,122 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
+
+@use 'sass:map';
+
+@use '../../ripple/ripple';
+
+@mixin styles() {
+  .md3-switch__handle-container {
+    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__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(--_handle-height);
+    width: var(--_handle-width);
+    background-color: var(--_selected-handle-color);
+
+    // TODO(b/230484095): Use token instead of hard coded values
+    .md3-switch--selected &,
+    .md3-switch--unselected &.md3-switch__handle--big {
+      transform: scale(1.2);
+    }
+    .md3-switch--unselected & {
+      transform: scale(0.8);
+    }
+    .md3-switch--selected:enabled:active &,
+    .md3-switch--unselected:enabled:active & {
+      transform: scale(1.4);
+    }
+
+    .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 {
+    height: var(--_state-layer-size);
+    width: var(--_state-layer-size);
+
+    .md3-switch--selected & {
+      @include ripple.theme(
+        (
+          hover-state-layer-color: var(--_selected-hover-state-layer-color),
+          focus-state-layer-color: var(--_selected-focus-state-layer-color),
+          pressed-state-layer-color: var(--_selected-pressed-state-layer-color),
+          hover-state-layer-opacity: var(--_selected-hover-state-layer-opacity),
+          focus-state-layer-opacity: var(--_selected-focus-state-layer-opacity),
+          pressed-state-layer-opacity:
+            var(--_selected-pressed-state-layer-opacity),
+        )
+      );
+    }
+
+    .md3-switch--unselected & {
+      @include ripple.theme(
+        (
+          hover-state-layer-color: var(--_unselected-hover-state-layer-color),
+          focus-state-layer-color: var(--_unselected-focus-state-layer-color),
+          pressed-state-layer-color:
+            var(--_unselected-pressed-state-layer-color),
+          hover-state-layer-opacity:
+            var(--_unselected-hover-state-layer-opacity),
+          focus-state-layer-opacity:
+            var(--_unselected-focus-state-layer-opacity),
+          pressed-state-layer-opacity:
+            var(--_unselected-pressed-state-layer-opacity),
+        )
+      );
+    }
+  }
+}

package/switch/lib/_icon.scss

@@ -0,0 +1,33 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
+
+@use 'sass:map';
+
+@mixin styles() {
+  .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

@@ -8,71 +8,201 @@
 
 // PUBLIC PROPERTIES
 
-@use '@material/web/motion/animation';
-@use '@material/web/sass/touch-target';
+@use 'sass:map';
+@use '../../focus/focus-ring';
+@use '../../motion/animation';
+@use '../../sass/color';
+@use '../../sass/resolvers';
+@use '../../sass/shape';
+@use '../../sass/theme';
+@use '../../sass/touch-target';
+@use '../../sass/var';
+@use '../../tokens';
+
+@use './track';
+@use './handle';
+@use './icon';
 
 // TODO(b/230768994): update animation timing
 $animation-duration: 75ms;
 $icon-exit-duration: 0.4 * $animation-duration;
 $icon-enter-duration: $animation-duration - $icon-exit-duration;
 
-// PUBLIC API
+$_touch-target-size: 48px;
+
+$_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) {
+  $tokens: _warn-of-not-implemented($tokens);
+  $tokens: theme.validate-theme(tokens.md-comp-switch-values(), $tokens);
+  $tokens: _resolve-tokens($tokens);
+  $tokens: theme.create-theme-vars($tokens, switch);
+
+  @include theme.emit-theme-vars($tokens);
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-switch-values();
+  $tokens: _resolve-tokens($tokens);
+  $tokens: theme.create-theme-vars($tokens, switch);
 
-@mixin static-styles() {
   :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+
+    // 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;
     -webkit-tap-highlight-color: transparent;
   }
 
+  md-focus-ring {
+    // TODO(b/231741594): use `track-shape` once this is not deleted.
+    @include focus-ring.theme(
+      (
+        shape: (
+          var(--_track-shape-start-start),
+          var(--_track-shape-start-end),
+          var(--_track-shape-end-start),
+          var(--_track-shape-end-end),
+        ),
+      )
+    );
+  }
+
   .md3-switch {
-    @include _root;
+    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);
   }
 
   // Track
+  .md3-switch__handle,
+  .md3-switch__track {
+    &::before {
+      content: '';
+      display: flex;
+      position: absolute;
+      height: 100%;
+      width: 100%;
+      border-radius: inherit;
+      box-sizing: border-box;
+
+      transition-property: opacity;
+      transition-duration: #{$animation-duration};
+    }
+  }
+
   .md3-switch__track {
-    @include _track;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+
+    border-radius: inherit;
+
+    // Center content
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
     &::before {
-      @include _track-before;
+      border-style: solid;
 
       .md3-switch--selected & {
-        @include _track-selected-before;
+        // When selected, turn off ::before
+        opacity: 0;
       }
     }
   }
 
   // Handle container
   .md3-switch__handle-container {
-    @include _handle-container;
+    position: relative;
+    transition: animation.standard(margin, $animation-duration);
   }
 
   // Handle
   .md3-switch__handle {
-    @include _handle;
+    transform-origin: center;
+    transition: animation.standard(transform, $animation-duration);
 
     &::before {
-      @include _handle-before;
-
       .md3-switch--selected & {
-        @include _handle-selected-before;
+        // When selected, turn off ::before
+        opacity: 0;
       }
     }
   }
 
+  // Ripple
+  .md3-switch__ripple {
+    position: absolute;
+    display: inline-flex;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+
   // Icons
   .md3-switch__icons {
-    @include _icons;
+    position: relative;
+    height: 100%;
+    width: 100%;
   }
 
   .md3-switch__icon {
-    @include _icon;
-    @include _icon-hidden;
+    position: absolute;
+    inset: 0;
+    margin: auto;
+
+    transition-property: fill;
+    transition-duration: #{$animation-duration};
+    opacity: 0;
   }
 
   .md3-switch--selected .md3-switch__icon--on,
   .md3-switch--unselected .md3-switch__icon--off {
-    @include _icon-visible;
+    opacity: 1;
   }
 
   // Touch target
@@ -82,7 +212,8 @@ $icon-enter-duration: $animation-duration - $icon-exit-duration;
 
   // Disabled
   .md3-switch:disabled {
-    @include _disabled;
+    cursor: default;
+    pointer-events: none;
   }
 
   // Disabled - Track
@@ -100,111 +231,72 @@ $icon-enter-duration: $animation-duration - $icon-exit-duration;
     }
   }
 
-  .md3-switch__input {
-    @include _input;
-  }
-}
-
-// PRIVATE API
-
-@mixin _root() {
-  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;
-}
-
-@mixin _disabled() {
-  cursor: default;
-  pointer-events: none;
-}
-
-@mixin _track() {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-
-  border-radius: inherit;
-
-  // Center content
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-@mixin _track-before() {
-  @include _before-base();
-
-  border-style: solid;
-}
-
-// When selected, turn off ::before
-@mixin _track-selected-before() {
-  opacity: 0;
-}
-
-@mixin _handle-container() {
-  position: relative;
-  transition: animation.standard(margin, $animation-duration);
-}
-
-@mixin _handle() {
-  transform-origin: center;
-  transition: animation.standard(transform, $animation-duration);
-}
-
-@mixin _handle-before() {
-  @include _before-base();
+  @include track.styles();
+  @include handle.styles();
+  @include icon.styles();
 }
 
-@mixin _before-base() {
-  content: '';
-  display: flex;
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  border-radius: inherit;
-  box-sizing: border-box;
-
-  transition-property: opacity;
-  transition-duration: #{$animation-duration};
+@function _resolve-tokens($theme) {
+  $theme: shape.resolve-theme(
+    $theme,
+    map.get(resolvers.$material, shape),
+    track-shape,
+    handle-shape
+  );
+  $theme: _flatten-disable-colors($theme);
+  @return $theme;
 }
 
-// When selected, turn off ::before
-@mixin _handle-selected-before() {
-  opacity: 0;
+@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
+      )
+    )
+  );
 }
 
-@mixin _icons() {
-  position: relative;
-  height: 100%;
-  width: 100%;
-}
-
-@mixin _icon() {
-  position: absolute;
-  inset: 0;
-  margin: auto;
-
-  transition-property: fill;
-  transition-duration: #{$animation-duration};
-}
-
-@mixin _icon-hidden() {
-  opacity: 0;
-}
-
-@mixin _icon-visible() {
-  opacity: 1;
-}
-
-@mixin _input() {
-  display: none;
+@function _warn-of-not-implemented($theme) {
+  // TODO(b/230484095): remove this warning once these are implemented.
+  @if (
+    map.get($theme, selected-handle-height) or
+      map.get($theme, selected-handle-width) or
+      map.get($theme, unselected-handle-height) or
+      map.get($theme, unselected-handle-width) or
+      map.get($theme, pressed-handle-height) or
+      map.get($theme, pressed-handle-width)
+  ) {
+    @warn '`handle-height` and `handle-width` are not yet implemented. see b/230484095';
+  }
+  @return $theme;
 }

package/switch/lib/_track.scss

@@ -0,0 +1,57 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
+
+@use 'sass:map';
+
+@mixin styles() {
+  .md3-switch__track {
+    background-color: var(--_selected-track-color);
+
+    .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 {
+      border-width: var(--_track-outline-width);
+      background-color: var(--_unselected-track-color);
+      border-color: var(--_unselected-track-outline-color);
+
+      .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

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host{display:inline-flex;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.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}.md3-switch__track{position:relative;width:100%;height:100%;box-sizing:border-box;border-radius:inherit;display:flex;justify-content:center;align-items:center}.md3-switch__track::before{content:"";display:flex;position:absolute;height:100%;width:100%;border-radius:inherit;box-sizing:border-box;transition-property:opacity;transition-duration:75ms;border-style:solid}.md3-switch--selected .md3-switch__track::before{opacity:0}.md3-switch__handle-container{position:relative;transition:margin 75ms cubic-bezier(0.4, 0, 0.2, 1)}.md3-switch__handle{transform-origin:center;transition:transform 75ms cubic-bezier(0.4, 0, 0.2, 1)}.md3-switch__handle::before{content:"";display:flex;position:absolute;height:100%;width:100%;border-radius:inherit;box-sizing:border-box;transition-property:opacity;transition-duration:75ms}.md3-switch--selected .md3-switch__handle::before{opacity:0}.md3-switch__icons{position:relative;height:100%;width:100%}.md3-switch__icon{position:absolute;inset:0;margin:auto;transition-property:fill;transition-duration:75ms;opacity:0}.md3-switch--selected .md3-switch__icon--on,.md3-switch--unselected .md3-switch__icon--off{opacity:1}.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__input{display:none}:host{--md-focus-ring-ring-radius:var(--md-switch-track-shape-start-start, 9999px)}.md3-switch{width:var(--md-switch-track-width, 52px);height:var(--md-switch-track-height, 32px);border-start-start-radius:var(--md-switch-track-shape-start-start, 9999px);border-start-end-radius:var(--md-switch-track-shape-start-end, 9999px);border-end-end-radius:var(--md-switch-track-shape-end-end, 9999px);border-end-start-radius:var(--md-switch-track-shape-end-start, 9999px)}@media screen and (forced-colors: active){.md3-switch{--md-switch-disabled-selected-icon-color:GrayText;--md-switch-disabled-selected-icon-opacity:1;--md-switch-disabled-selected-track-color:GrayText;--md-switch-disabled-track-opacity:1;--md-switch-disabled-unselected-handle-color:GrayText;--md-switch-disabled-unselected-handle-opacity:1;--md-switch-disabled-unselected-icon-color:Canvas;--md-switch-disabled-unselected-icon-opacity:1;--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}}.md3-switch__track{background-color:var(--md-switch-selected-track-color, var(--md-sys-color-primary, #6750a4))}.md3-switch--selected:hover .md3-switch__track{background-color:var(--md-switch-selected-hover-track-color, var(--md-sys-color-primary, #6750a4))}.md3-switch--selected:focus-visible .md3-switch__track{background-color:var(--md-switch-selected-focus-track-color, var(--md-sys-color-primary, #6750a4))}.md3-switch--selected:active .md3-switch__track{background-color:var(--md-switch-selected-pressed-track-color, var(--md-sys-color-primary, #6750a4))}.md3-switch--selected:disabled .md3-switch__track{background-color:var(--md-switch-disabled-selected-track-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.12))}.md3-switch__track::before{border-width:var(--md-switch-track-outline-width, 2px);background-color:var(--md-switch-unselected-track-color, var(--md-sys-color-surface-variant, #e7e0ec));border-color:var(--md-switch-unselected-track-outline-color, var(--md-sys-color-outline, #79747e))}.md3-switch--unselected:hover .md3-switch__track::before{background-color:var(--md-switch-unselected-hover-track-color, var(--md-sys-color-surface-variant, #e7e0ec))}.md3-switch--unselected:focus-visible .md3-switch__track::before{background-color:var(--md-switch-unselected-focus-track-color, var(--md-sys-color-surface-variant, #e7e0ec))}.md3-switch--unselected:active .md3-switch__track::before{background-color:var(--md-switch-unselected-pressed-track-color, var(--md-sys-color-surface-variant, #e7e0ec))}.md3-switch--unselected:disabled .md3-switch__track::before{background-color:var(--md-switch-disabled-unselected-track-color, rgb(var(--md-sys-color-surface-variant-rgb, 231, 224, 236), 0.12))}.md3-switch--unselected:hover .md3-switch__track::before{border-color:var(--md-switch-unselected-hover-track-outline-color, var(--md-sys-color-outline, #79747e))}.md3-switch--unselected:focus-visible .md3-switch__track::before{border-color:var(--md-switch-unselected-focus-track-outline-color, var(--md-sys-color-outline, #79747e))}.md3-switch--unselected:active .md3-switch__track::before{border-color:var(--md-switch-unselected-pressed-track-outline-color, var(--md-sys-color-outline, #79747e))}.md3-switch--unselected:disabled .md3-switch__track::before{border-color:var(--md-switch-disabled-unselected-track-outline-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.12))}.md3-switch--selected .md3-switch__handle-container{margin-inline-start:calc(var(--md-switch-track-width, 52px) - var(--md-switch-track-height, 32px))}.md3-switch--unselected .md3-switch__handle-container{margin-inline-end:calc(var(--md-switch-track-width, 52px) - var(--md-switch-track-height, 32px))}.md3-switch__handle{border-start-start-radius:var(--md-switch-handle-shape-start-start, 9999px);border-start-end-radius:var(--md-switch-handle-shape-start-end, 9999px);border-end-end-radius:var(--md-switch-handle-shape-end-end, 9999px);border-end-start-radius:var(--md-switch-handle-shape-end-start, 9999px);height:var(--md-switch-handle-height, 20px);width:var(--md-switch-handle-width, 20px);background-color:var(--md-switch-selected-handle-color, var(--md-sys-color-on-primary, #fff))}.md3-switch--selected .md3-switch__handle,.md3-switch--unselected .md3-switch__handle.md3-switch__handle--big{transform:scale(1.2)}.md3-switch--unselected .md3-switch__handle{transform:scale(0.8)}.md3-switch--selected:enabled:active .md3-switch__handle,.md3-switch--unselected:enabled:active .md3-switch__handle{transform:scale(1.4)}.md3-switch--selected:hover .md3-switch__handle{background-color:var(--md-switch-selected-hover-handle-color, var(--md-sys-color-primary-container, #eaddff))}.md3-switch--selected:focus-visible .md3-switch__handle{background-color:var(--md-switch-selected-focus-handle-color, var(--md-sys-color-primary-container, #eaddff))}.md3-switch--selected:active .md3-switch__handle{background-color:var(--md-switch-selected-pressed-handle-color, var(--md-sys-color-primary-container, #eaddff))}.md3-switch--selected:disabled .md3-switch__handle{background-color:var(--md-switch-disabled-selected-handle-color, rgb(var(--md-sys-color-surface-rgb, 255, 251, 254), 1))}.md3-switch__handle::before{background-color:var(--md-switch-unselected-handle-color, var(--md-sys-color-outline, #79747e))}.md3-switch--unselected:hover .md3-switch__handle::before{background-color:var(--md-switch-unselected-hover-handle-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-switch--unselected:focus-visible .md3-switch__handle::before{background-color:var(--md-switch-unselected-focus-handle-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-switch--unselected:active .md3-switch__handle::before{background-color:var(--md-switch-unselected-pressed-handle-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-switch--unselected:disabled .md3-switch__handle::before{background-color:var(--md-switch-disabled-unselected-handle-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38))}.md3-switch--selected .md3-switch__icon{width:var(--md-switch-selected-icon-size, 16px);height:var(--md-switch-selected-icon-size, 16px)}.md3-switch--unselected .md3-switch__icon{width:var(--md-switch-unselected-icon-size, 16px);height:var(--md-switch-unselected-icon-size, 16px)}.md3-switch--selected .md3-switch__icon{fill:var(--md-switch-selected-icon-color, var(--md-sys-color-on-primary-container, #21005d))}.md3-switch--selected:disabled .md3-switch__icon{fill:var(--md-switch-disabled-selected-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38))}.md3-switch--unselected .md3-switch__icon{fill:var(--md-switch-unselected-icon-color, var(--md-sys-color-surface-variant, #e7e0ec))}.md3-switch--unselected:disabled .md3-switch__icon{fill:var(--md-switch-disabled-unselected-icon-color, rgb(var(--md-sys-color-surface-variant-rgb, 231, 224, 236), 0.38))}/*# sourceMappingURL=switch-styles.css.map */
+export const styles = css `:host{--_handle-shape-start-start: var(--md-switch-handle-shape-start-start, 9999px);--_handle-shape-start-end: var(--md-switch-handle-shape-start-end, 9999px);--_handle-shape-end-end: var(--md-switch-handle-shape-end-end, 9999px);--_handle-shape-end-start: var(--md-switch-handle-shape-end-start, 9999px);--_track-shape-start-start: var(--md-switch-track-shape-start-start, 9999px);--_track-shape-start-end: var(--md-switch-track-shape-start-end, 9999px);--_track-shape-end-end: var(--md-switch-track-shape-end-end, 9999px);--_track-shape-end-start: var(--md-switch-track-shape-end-start, 9999px);--_disabled-handle-elevation: var(--md-switch-disabled-handle-elevation, 0);--_disabled-handle-opacity: var(--md-switch-disabled-handle-opacity, 0.38);--_disabled-selected-handle-color: var(--md-switch-disabled-selected-handle-color, rgb(var(--md-sys-color-surface-rgb, 255, 251, 254), 1));--_disabled-selected-icon-color: var(--md-switch-disabled-selected-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38));--_disabled-selected-track-color: var(--md-switch-disabled-selected-track-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.12));--_disabled-unselected-handle-color: var(--md-switch-disabled-unselected-handle-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38));--_disabled-unselected-icon-color: var(--md-switch-disabled-unselected-icon-color, rgb(var(--md-sys-color-surface-variant-rgb, 231, 224, 236), 0.38));--_disabled-unselected-track-color: var(--md-switch-disabled-unselected-track-color, rgb(var(--md-sys-color-surface-variant-rgb, 231, 224, 236), 0.12));--_disabled-unselected-track-outline-color: var(--md-switch-disabled-unselected-track-outline-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.12));--_handle-elevation: var(--md-switch-handle-elevation, 1);--_handle-height: var(--md-switch-handle-height, 20px);--_handle-shadow-color: var(--md-switch-handle-shadow-color, var(--md-sys-color-shadow, #000));--_handle-width: var(--md-switch-handle-width, 20px);--_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-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-variant, #e7e0ec));--_unselected-focus-state-layer-color: var(--md-switch-unselected-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_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-variant, #e7e0ec));--_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-variant, #e7e0ec));--_unselected-hover-state-layer-color: var(--md-switch-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_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-variant, #e7e0ec));--_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-variant, #e7e0ec));--_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-variant, #e7e0ec));--_unselected-pressed-state-layer-color: var(--md-switch-unselected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_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-variant, #e7e0ec));--_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-variant, #e7e0ec));--_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);display:inline-flex;outline:none;-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-start);--md-focus-ring-shape-end-start:var(--_track-shape-end-end)}.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__handle::before,.md3-switch__track::before{content:"";display:flex;position:absolute;height:100%;width:100%;border-radius:inherit;box-sizing:border-box;transition-property:opacity;transition-duration:75ms}.md3-switch__track{position:relative;width:100%;height:100%;box-sizing:border-box;border-radius:inherit;display:flex;justify-content:center;align-items:center}.md3-switch__track::before{border-style:solid}.md3-switch--selected .md3-switch__track::before{opacity:0}.md3-switch__handle-container{position:relative;transition:margin 75ms cubic-bezier(0.4, 0, 0.2, 1)}.md3-switch__handle{transform-origin:center;transition:transform 75ms cubic-bezier(0.4, 0, 0.2, 1)}.md3-switch--selected .md3-switch__handle::before{opacity:0}.md3-switch__ripple{position:absolute;display:inline-flex;left:50%;top:50%;transform:translate(-50%, -50%)}.md3-switch__icons{position:relative;height:100%;width:100%}.md3-switch__icon{position:absolute;inset:0;margin:auto;transition-property:fill;transition-duration:75ms;opacity:0}.md3-switch--selected .md3-switch__icon--on,.md3-switch--unselected .md3-switch__icon--off{opacity:1}.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{background-color:var(--_selected-track-color)}.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{border-width:var(--_track-outline-width);background-color:var(--_unselected-track-color);border-color:var(--_unselected-track-outline-color)}.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{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__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(--_handle-height);width:var(--_handle-width);background-color:var(--_selected-handle-color)}.md3-switch--selected .md3-switch__handle,.md3-switch--unselected .md3-switch__handle.md3-switch__handle--big{transform:scale(1.2)}.md3-switch--unselected .md3-switch__handle{transform:scale(0.8)}.md3-switch--selected:enabled:active .md3-switch__handle,.md3-switch--unselected:enabled:active .md3-switch__handle{transform:scale(1.4)}.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{height:var(--_state-layer-size);width:var(--_state-layer-size)}.md3-switch--selected .md3-switch__ripple{--md-ripple-hover-state-layer-color:var(--_selected-hover-state-layer-color);--md-ripple-focus-state-layer-color:var(--_selected-focus-state-layer-color);--md-ripple-pressed-state-layer-color:var(--_selected-pressed-state-layer-color);--md-ripple-hover-state-layer-opacity:var(--_selected-hover-state-layer-opacity);--md-ripple-focus-state-layer-opacity:var(--_selected-focus-state-layer-opacity);--md-ripple-pressed-state-layer-opacity:var(--_selected-pressed-state-layer-opacity)}.md3-switch--unselected .md3-switch__ripple{--md-ripple-hover-state-layer-color:var(--_unselected-hover-state-layer-color);--md-ripple-focus-state-layer-color:var(--_unselected-focus-state-layer-color);--md-ripple-pressed-state-layer-color:var(--_unselected-pressed-state-layer-color);--md-ripple-hover-state-layer-opacity:var(--_unselected-hover-state-layer-opacity);--md-ripple-focus-state-layer-opacity:var(--_unselected-focus-state-layer-opacity);--md-ripple-pressed-state-layer-opacity:var(--_unselected-pressed-state-layer-opacity)}.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