@material/web 1.0.0 → 1.0.1

package/switch/internal/_icon.scss

@@ -14,79 +14,102 @@ $_md-sys-motion: tokens.md-sys-motion-values();
 $_easing-standard: map.get($_md-sys-motion, 'easing-standard');
 
 @mixin styles() {
-  .icons {
-    position: relative;
-    height: 100%;
-    width: 100%;
+  @layer styles {
+    .icons {
+      position: relative;
+      height: 100%;
+      width: 100%;
+    }
+
+    .icon {
+      position: absolute;
+      inset: 0;
+      margin: auto;
+
+      transition: fill 67ms linear, opacity 33ms linear,
+        transform 167ms $_easing-standard;
+      opacity: 0;
+    }
+
+    .disabled .icon {
+      transition: none;
+    }
+
+    .selected .icon--on,
+    .unselected .icon--off {
+      opacity: 1;
+    }
+
+    // rotate selected icon into view when there is no unselected icon
+    .unselected .handle:not(.with-icon) .icon--on {
+      transform: rotate(-45deg);
+    }
+
+    .icon--off {
+      width: var(--_icon-size);
+      height: var(--_icon-size);
+      fill: var(--_icon-color);
+    }
+
+    .unselected:hover .icon--off {
+      fill: var(--_hover-icon-color);
+    }
+
+    .unselected:focus-within .icon--off {
+      fill: var(--_focus-icon-color);
+    }
+
+    .unselected:active .icon--off {
+      fill: var(--_pressed-icon-color);
+    }
+
+    .unselected.disabled .icon--off {
+      fill: var(--_disabled-icon-color);
+      opacity: var(--_disabled-icon-opacity);
+    }
+
+    .icon--on {
+      width: var(--_selected-icon-size);
+      height: var(--_selected-icon-size);
+      fill: var(--_selected-icon-color);
+    }
+
+    .selected:hover .icon--on {
+      fill: var(--_selected-hover-icon-color);
+    }
+
+    .selected:focus-within .icon--on {
+      fill: var(--_selected-focus-icon-color);
+    }
+
+    .selected:active .icon--on {
+      fill: var(--_selected-pressed-icon-color);
+    }
+
+    .selected.disabled .icon--on {
+      fill: var(--_disabled-selected-icon-color);
+      opacity: var(--_disabled-selected-icon-opacity);
+    }
   }
 
-  .icon {
-    position: absolute;
-    inset: 0;
-    margin: auto;
-
-    transition: fill 67ms linear, opacity 33ms linear,
-      transform 167ms $_easing-standard;
-    opacity: 0;
-  }
-
-  .disabled .icon {
-    transition: none;
-  }
-
-  .selected .icon--on,
-  .unselected .icon--off {
-    opacity: 1;
-  }
-
-  // rotate selected icon into view when there is no unselected icon
-  .unselected .handle:not(.with-icon) .icon--on {
-    transform: rotate(-45deg);
-  }
-
-  .icon--off {
-    width: var(--_icon-size);
-    height: var(--_icon-size);
-    fill: var(--_icon-color);
-  }
-
-  .unselected:hover .icon--off {
-    fill: var(--_hover-icon-color);
-  }
-
-  .unselected:focus-within .icon--off {
-    fill: var(--_focus-icon-color);
-  }
-
-  .unselected:active .icon--off {
-    fill: var(--_pressed-icon-color);
-  }
-
-  .unselected.disabled .icon--off {
-    fill: var(--_disabled-icon-color);
-    opacity: var(--_disabled-icon-opacity);
-  }
-
-  .icon--on {
-    width: var(--_selected-icon-size);
-    height: var(--_selected-icon-size);
-    fill: var(--_selected-icon-color);
-  }
-
-  .selected:hover .icon--on {
-    fill: var(--_selected-hover-icon-color);
-  }
-
-  .selected:focus-within .icon--on {
-    fill: var(--_selected-focus-icon-color);
-  }
-
-  .selected:active .icon--on {
-    fill: var(--_selected-pressed-icon-color);
-  }
-
-  .selected.disabled .icon--on {
-    fill: var(--_disabled-selected-icon-color);
-    opacity: var(--_disabled-selected-icon-opacity);
+  @layer hcm {
+    @media (forced-colors: active) {
+      .icon--off {
+        fill: Canvas;
+      }
+
+      .icon--on {
+        fill: ButtonText;
+      }
+
+      .disabled.unselected .icon--off,
+      .disabled.selected .icon--on {
+        opacity: 1;
+      }
+
+      .disabled .icon--on {
+        fill: GrayText;
+      }
+    }
   }
 }

package/switch/internal/_switch.scss

@@ -44,108 +44,103 @@
 @mixin styles() {
   $tokens: tokens.md-comp-switch-values();
 
-  :host {
-    @each $token, $value in $tokens {
-      --_#{$token}: var(--md-switch-#{$token}, #{$value});
+  @layer styles, hcm;
+  @layer styles {
+    :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)
+      );
+
+      display: inline-flex;
+      outline: none;
+      vertical-align: top;
+      -webkit-tap-highlight-color: transparent;
+      cursor: pointer;
     }
 
-    // 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)
-    );
-
-    display: inline-flex;
-    outline: none;
-    vertical-align: top;
-    -webkit-tap-highlight-color: transparent;
-  }
-
-  :host([touch-target='wrapper']) {
-    margin: max(0px, (48px - var(--_track-height)) / 2) 0px;
-  }
-
-  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),
-      )
-    );
-  }
-
-  .switch {
-    align-items: center;
-    display: inline-flex;
-    flex-shrink: 0; // Stop from collapsing in flex containers
-    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);
-  }
+    :host([disabled]) {
+      cursor: default;
+    }
 
-  // Input is also touch target
-  input {
-    appearance: none;
-    height: 48px;
-    outline: none;
-    margin: 0;
-    position: absolute;
-    width: 100%;
-    z-index: 1;
-  }
+    :host([touch-target='wrapper']) {
+      margin: max(0px, (48px - var(--_track-height)) / 2) 0px;
+    }
 
-  :host([touch-target='none']) input {
-    display: none;
-  }
+    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),
+        )
+      );
+    }
 
-  // Disabled - Track
-  .disabled .track {
-    background-color: transparent;
-    border-color: transparent;
-  }
+    .switch {
+      align-items: center;
+      display: inline-flex;
+      flex-shrink: 0; // Stop from collapsing in flex containers
+      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);
+    }
 
-  .disabled .track::before {
-    background-clip: content-box;
-  }
+    // Input is also touch target
+    input {
+      appearance: none;
+      height: 48px;
+      outline: none;
+      margin: 0;
+      position: absolute;
+      width: 100%;
+      z-index: 1;
+      cursor: inherit;
+    }
 
-  .selected.disabled .track {
-    background-clip: border-box;
+    :host([touch-target='none']) input {
+      display: none;
+    }
   }
 
   @include track.styles();

package/switch/internal/_track.scss

@@ -8,84 +8,117 @@
 // go/keep-sorted end
 
 @mixin styles() {
-  .track {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
-
-    border-radius: inherit;
-
-    // Center content
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  @layer styles {
+    .track {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+
+      border-radius: inherit;
+
+      // Center content
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    // Separate node for background/outline colors to support opacity changes.
+    .track::before {
+      content: '';
+      display: flex;
+      position: absolute;
+      height: 100%;
+      width: 100%;
+      border-radius: inherit;
+      box-sizing: border-box;
+      transition-property: opacity, background-color;
+      transition-timing-function: linear;
+      transition-duration: 67ms;
+    }
+
+    .disabled .track {
+      background-color: transparent;
+      border-color: transparent;
+    }
+
+    .disabled .track::before,
+    .disabled .track::after {
+      transition: none;
+      opacity: var(--_disabled-track-opacity);
+    }
+
+    .disabled .track::before {
+      background-clip: content-box;
+    }
+
+    .selected .track::before {
+      background-color: var(--_selected-track-color);
+    }
+
+    .selected:hover .track::before {
+      background-color: var(--_selected-hover-track-color);
+    }
+
+    .selected:focus-within .track::before {
+      background-color: var(--_selected-focus-track-color);
+    }
+
+    .selected:active .track::before {
+      background-color: var(--_selected-pressed-track-color);
+    }
+
+    .selected.disabled .track {
+      background-clip: border-box;
+    }
+
+    .selected.disabled .track::before {
+      background-color: var(--_disabled-selected-track-color);
+    }
+
+    .unselected .track::before {
+      background-color: var(--_track-color);
+      border-color: var(--_track-outline-color);
+      border-style: solid;
+      border-width: var(--_track-outline-width);
+    }
+
+    .unselected:hover .track::before {
+      background-color: var(--_hover-track-color);
+      border-color: var(--_hover-track-outline-color);
+    }
+
+    .unselected:focus-visible .track::before {
+      background-color: var(--_focus-track-color);
+      border-color: var(--_focus-track-outline-color);
+    }
+
+    .unselected:active .track::before {
+      background-color: var(--_pressed-track-color);
+      border-color: var(--_pressed-track-outline-color);
+    }
+
+    .unselected.disabled .track::before {
+      background-color: var(--_disabled-track-color);
+      border-color: var(--_disabled-track-outline-color);
+    }
   }
 
-  // Separate node for background/outline colors to support opacity changes.
-  .track::before {
-    content: '';
-    display: flex;
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    border-radius: inherit;
-    box-sizing: border-box;
-    transition-property: opacity, background-color;
-    transition-timing-function: linear;
-    transition-duration: 67ms;
-  }
-
-  .disabled .track::before,
-  .disabled .track::after {
-    transition: none;
-    opacity: var(--_disabled-track-opacity);
-  }
-
-  .selected .track::before {
-    background-color: var(--_selected-track-color);
-  }
-
-  .selected:hover .track::before {
-    background-color: var(--_selected-hover-track-color);
-  }
-
-  .selected:focus-within .track::before {
-    background-color: var(--_selected-focus-track-color);
-  }
-
-  .selected:active .track::before {
-    background-color: var(--_selected-pressed-track-color);
-  }
-
-  .selected.disabled .track::before {
-    background-color: var(--_disabled-selected-track-color);
-  }
-
-  .unselected .track::before {
-    background-color: var(--_track-color);
-    border-color: var(--_track-outline-color);
-    border-style: solid;
-    border-width: var(--_track-outline-width);
-  }
-
-  .unselected:hover .track::before {
-    background-color: var(--_hover-track-color);
-    border-color: var(--_hover-track-outline-color);
-  }
-
-  .unselected:focus-visible .track::before {
-    background-color: var(--_focus-track-color);
-    border-color: var(--_focus-track-outline-color);
-  }
-
-  .unselected:active .track::before {
-    background-color: var(--_pressed-track-color);
-    border-color: var(--_pressed-track-outline-color);
-  }
-
-  .unselected.disabled .track::before {
-    background-color: var(--_disabled-track-color);
-    border-color: var(--_disabled-track-outline-color);
+  @layer hcm {
+    @media (forced-colors: active) {
+      .selected .track::before {
+        background: ButtonText;
+        border-color: ButtonText;
+      }
+
+      .disabled .track::before {
+        border-color: GrayText;
+        opacity: 1;
+      }
+
+      .disabled.selected .track::before {
+        background: GrayText;
+      }
+    }
   }
 }

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

@@ -4,6 +4,6 @@
   * 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, var(--md-sys-color-surface, #fef7ff));--_disabled-selected-handle-opacity: var(--md-switch-disabled-selected-handle-opacity, 1);--_disabled-selected-icon-color: var(--md-switch-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-icon-opacity: var(--md-switch-disabled-selected-icon-opacity, 0.38);--_disabled-selected-track-color: var(--md-switch-disabled-selected-track-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-track-opacity: var(--md-switch-disabled-track-opacity, 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-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);--_with-icon-handle-height: var(--md-switch-with-icon-handle-height, 24px);--_with-icon-handle-width: var(--md-switch-with-icon-handle-width, 24px);--_disabled-handle-color: var(--md-switch-disabled-handle-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-handle-opacity: var(--md-switch-disabled-handle-opacity, 0.38);--_disabled-icon-color: var(--md-switch-disabled-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_disabled-icon-opacity: var(--md-switch-disabled-icon-opacity, 0.38);--_disabled-track-color: var(--md-switch-disabled-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_disabled-track-outline-color: var(--md-switch-disabled-track-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_focus-handle-color: var(--md-switch-focus-handle-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-icon-color: var(--md-switch-focus-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_focus-track-color: var(--md-switch-focus-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_focus-track-outline-color: var(--md-switch-focus-track-outline-color, var(--md-sys-color-outline, #79747e));--_handle-color: var(--md-switch-handle-color, var(--md-sys-color-outline, #79747e));--_handle-height: var(--md-switch-handle-height, 16px);--_handle-width: var(--md-switch-handle-width, 16px);--_hover-handle-color: var(--md-switch-hover-handle-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-icon-color: var(--md-switch-hover-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_hover-state-layer-color: var(--md-switch-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-switch-hover-state-layer-opacity, 0.08);--_hover-track-color: var(--md-switch-hover-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_hover-track-outline-color: var(--md-switch-hover-track-outline-color, var(--md-sys-color-outline, #79747e));--_icon-color: var(--md-switch-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_icon-size: var(--md-switch-icon-size, 16px);--_pressed-handle-color: var(--md-switch-pressed-handle-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-icon-color: var(--md-switch-pressed-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_pressed-state-layer-color: var(--md-switch-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-opacity: var(--md-switch-pressed-state-layer-opacity, 0.12);--_pressed-track-color: var(--md-switch-pressed-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_pressed-track-outline-color: var(--md-switch-pressed-track-outline-color, var(--md-sys-color-outline, #79747e));--_track-color: var(--md-switch-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_track-outline-color: var(--md-switch-track-outline-color, var(--md-sys-color-outline, #79747e));--_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)}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_track-height))/2) 0px}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)}.switch{align-items:center;display:inline-flex;flex-shrink: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)}input{appearance:none;height:48px;outline:none;margin:0;position:absolute;width:100%;z-index:1}:host([touch-target=none]) input{display:none}.disabled .track{background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0)}.disabled .track::before{background-clip:content-box}.selected.disabled .track{background-clip:border-box}.track{position:absolute;width:100%;height:100%;box-sizing:border-box;border-radius:inherit;display:flex;justify-content:center;align-items:center}.track::before{content:"";display:flex;position:absolute;height:100%;width:100%;border-radius:inherit;box-sizing:border-box;transition-property:opacity,background-color;transition-timing-function:linear;transition-duration:67ms}.disabled .track::before,.disabled .track::after{transition:none;opacity:var(--_disabled-track-opacity)}.selected .track::before{background-color:var(--_selected-track-color)}.selected:hover .track::before{background-color:var(--_selected-hover-track-color)}.selected:focus-within .track::before{background-color:var(--_selected-focus-track-color)}.selected:active .track::before{background-color:var(--_selected-pressed-track-color)}.selected.disabled .track::before{background-color:var(--_disabled-selected-track-color)}.unselected .track::before{background-color:var(--_track-color);border-color:var(--_track-outline-color);border-style:solid;border-width:var(--_track-outline-width)}.unselected:hover .track::before{background-color:var(--_hover-track-color);border-color:var(--_hover-track-outline-color)}.unselected:focus-visible .track::before{background-color:var(--_focus-track-color);border-color:var(--_focus-track-outline-color)}.unselected:active .track::before{background-color:var(--_pressed-track-color);border-color:var(--_pressed-track-outline-color)}.unselected.disabled .track::before{background-color:var(--_disabled-track-color);border-color:var(--_disabled-track-outline-color)}.handle-container{display:flex;place-content:center;place-items:center;position:relative;transition:margin 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275)}.selected .handle-container{margin-inline-start:calc(var(--_track-width) - var(--_track-height))}.unselected .handle-container{margin-inline-end:calc(var(--_track-width) - var(--_track-height))}.disabled .handle-container{transition:none}.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);transform-origin:center;transition-property:height,width;transition-duration:250ms,250ms;transition-timing-function:cubic-bezier(0.2, 0, 0, 1),cubic-bezier(0.2, 0, 0, 1);z-index:0}.handle::before{content:"";display:flex;inset:0;position:absolute;border-radius:inherit;box-sizing:border-box;transition:background-color 67ms linear}.disabled .handle,.disabled .handle::before{transition:none}.selected .handle{height:var(--_selected-handle-height);width:var(--_selected-handle-width)}.handle.with-icon{height:var(--_with-icon-handle-height);width:var(--_with-icon-handle-width)}.selected:not(.disabled):active .handle,.unselected:not(.disabled):active .handle{height:var(--_pressed-handle-height);width:var(--_pressed-handle-width);transition-timing-function:linear;transition-duration:100ms}.selected .handle::before{background-color:var(--_selected-handle-color)}.selected:hover .handle::before{background-color:var(--_selected-hover-handle-color)}.selected:focus-within .handle::before{background-color:var(--_selected-focus-handle-color)}.selected:active .handle::before{background-color:var(--_selected-pressed-handle-color)}.selected.disabled .handle::before{background-color:var(--_disabled-selected-handle-color);opacity:var(--_disabled-selected-handle-opacity)}.unselected .handle::before{background-color:var(--_handle-color)}.unselected:hover .handle::before{background-color:var(--_hover-handle-color)}.unselected:focus-within .handle::before{background-color:var(--_focus-handle-color)}.unselected:active .handle::before{background-color:var(--_pressed-handle-color)}.unselected.disabled .handle::before{background-color:var(--_disabled-handle-color);opacity:var(--_disabled-handle-opacity)}md-ripple{border-radius:var(--_state-layer-shape);height:var(--_state-layer-size);inset:unset;width:var(--_state-layer-size)}.selected md-ripple{--md-ripple-hover-color: var(--_selected-hover-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-pressed-opacity: var(--_selected-pressed-state-layer-opacity)}.unselected md-ripple{--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}.icons{position:relative;height:100%;width:100%}.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}.disabled .icon{transition:none}.selected .icon--on,.unselected .icon--off{opacity:1}.unselected .handle:not(.with-icon) .icon--on{transform:rotate(-45deg)}.icon--off{width:var(--_icon-size);height:var(--_icon-size);fill:var(--_icon-color)}.unselected:hover .icon--off{fill:var(--_hover-icon-color)}.unselected:focus-within .icon--off{fill:var(--_focus-icon-color)}.unselected:active .icon--off{fill:var(--_pressed-icon-color)}.unselected.disabled .icon--off{fill:var(--_disabled-icon-color);opacity:var(--_disabled-icon-opacity)}.icon--on{width:var(--_selected-icon-size);height:var(--_selected-icon-size);fill:var(--_selected-icon-color)}.selected:hover .icon--on{fill:var(--_selected-hover-icon-color)}.selected:focus-within .icon--on{fill:var(--_selected-focus-icon-color)}.selected:active .icon--on{fill:var(--_selected-pressed-icon-color)}.selected.disabled .icon--on{fill:var(--_disabled-selected-icon-color);opacity:var(--_disabled-selected-icon-opacity)}/*# sourceMappingURL=switch-styles.css.map */
+export const styles = css `@layer styles, hcm;@layer styles{:host{--_disabled-selected-handle-color: var(--md-switch-disabled-selected-handle-color, var(--md-sys-color-surface, #fef7ff));--_disabled-selected-handle-opacity: var(--md-switch-disabled-selected-handle-opacity, 1);--_disabled-selected-icon-color: var(--md-switch-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-icon-opacity: var(--md-switch-disabled-selected-icon-opacity, 0.38);--_disabled-selected-track-color: var(--md-switch-disabled-selected-track-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-track-opacity: var(--md-switch-disabled-track-opacity, 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-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);--_with-icon-handle-height: var(--md-switch-with-icon-handle-height, 24px);--_with-icon-handle-width: var(--md-switch-with-icon-handle-width, 24px);--_disabled-handle-color: var(--md-switch-disabled-handle-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-handle-opacity: var(--md-switch-disabled-handle-opacity, 0.38);--_disabled-icon-color: var(--md-switch-disabled-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_disabled-icon-opacity: var(--md-switch-disabled-icon-opacity, 0.38);--_disabled-track-color: var(--md-switch-disabled-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_disabled-track-outline-color: var(--md-switch-disabled-track-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_focus-handle-color: var(--md-switch-focus-handle-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-icon-color: var(--md-switch-focus-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_focus-track-color: var(--md-switch-focus-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_focus-track-outline-color: var(--md-switch-focus-track-outline-color, var(--md-sys-color-outline, #79747e));--_handle-color: var(--md-switch-handle-color, var(--md-sys-color-outline, #79747e));--_handle-height: var(--md-switch-handle-height, 16px);--_handle-width: var(--md-switch-handle-width, 16px);--_hover-handle-color: var(--md-switch-hover-handle-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-icon-color: var(--md-switch-hover-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_hover-state-layer-color: var(--md-switch-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-switch-hover-state-layer-opacity, 0.08);--_hover-track-color: var(--md-switch-hover-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_hover-track-outline-color: var(--md-switch-hover-track-outline-color, var(--md-sys-color-outline, #79747e));--_icon-color: var(--md-switch-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_icon-size: var(--md-switch-icon-size, 16px);--_pressed-handle-color: var(--md-switch-pressed-handle-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-icon-color: var(--md-switch-pressed-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_pressed-state-layer-color: var(--md-switch-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-opacity: var(--md-switch-pressed-state-layer-opacity, 0.12);--_pressed-track-color: var(--md-switch-pressed-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_pressed-track-outline-color: var(--md-switch-pressed-track-outline-color, var(--md-sys-color-outline, #79747e));--_track-color: var(--md-switch-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_track-outline-color: var(--md-switch-track-outline-color, var(--md-sys-color-outline, #79747e));--_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);cursor:pointer}:host([disabled]){cursor:default}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_track-height))/2) 0px}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)}.switch{align-items:center;display:inline-flex;flex-shrink: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)}input{appearance:none;height:48px;outline:none;margin:0;position:absolute;width:100%;z-index:1;cursor:inherit}:host([touch-target=none]) input{display:none}}@layer styles{.track{position:absolute;width:100%;height:100%;box-sizing:border-box;border-radius:inherit;display:flex;justify-content:center;align-items:center}.track::before{content:"";display:flex;position:absolute;height:100%;width:100%;border-radius:inherit;box-sizing:border-box;transition-property:opacity,background-color;transition-timing-function:linear;transition-duration:67ms}.disabled .track{background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0)}.disabled .track::before,.disabled .track::after{transition:none;opacity:var(--_disabled-track-opacity)}.disabled .track::before{background-clip:content-box}.selected .track::before{background-color:var(--_selected-track-color)}.selected:hover .track::before{background-color:var(--_selected-hover-track-color)}.selected:focus-within .track::before{background-color:var(--_selected-focus-track-color)}.selected:active .track::before{background-color:var(--_selected-pressed-track-color)}.selected.disabled .track{background-clip:border-box}.selected.disabled .track::before{background-color:var(--_disabled-selected-track-color)}.unselected .track::before{background-color:var(--_track-color);border-color:var(--_track-outline-color);border-style:solid;border-width:var(--_track-outline-width)}.unselected:hover .track::before{background-color:var(--_hover-track-color);border-color:var(--_hover-track-outline-color)}.unselected:focus-visible .track::before{background-color:var(--_focus-track-color);border-color:var(--_focus-track-outline-color)}.unselected:active .track::before{background-color:var(--_pressed-track-color);border-color:var(--_pressed-track-outline-color)}.unselected.disabled .track::before{background-color:var(--_disabled-track-color);border-color:var(--_disabled-track-outline-color)}}@layer hcm{@media(forced-colors: active){.selected .track::before{background:ButtonText;border-color:ButtonText}.disabled .track::before{border-color:GrayText;opacity:1}.disabled.selected .track::before{background:GrayText}}}@layer styles{.handle-container{display:flex;place-content:center;place-items:center;position:relative;transition:margin 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275)}.selected .handle-container{margin-inline-start:calc(var(--_track-width) - var(--_track-height))}.unselected .handle-container{margin-inline-end:calc(var(--_track-width) - var(--_track-height))}.disabled .handle-container{transition:none}.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);transform-origin:center;transition-property:height,width;transition-duration:250ms,250ms;transition-timing-function:cubic-bezier(0.2, 0, 0, 1),cubic-bezier(0.2, 0, 0, 1);z-index:0}.handle::before{content:"";display:flex;inset:0;position:absolute;border-radius:inherit;box-sizing:border-box;transition:background-color 67ms linear}.disabled .handle,.disabled .handle::before{transition:none}.selected .handle{height:var(--_selected-handle-height);width:var(--_selected-handle-width)}.handle.with-icon{height:var(--_with-icon-handle-height);width:var(--_with-icon-handle-width)}.selected:not(.disabled):active .handle,.unselected:not(.disabled):active .handle{height:var(--_pressed-handle-height);width:var(--_pressed-handle-width);transition-timing-function:linear;transition-duration:100ms}.selected .handle::before{background-color:var(--_selected-handle-color)}.selected:hover .handle::before{background-color:var(--_selected-hover-handle-color)}.selected:focus-within .handle::before{background-color:var(--_selected-focus-handle-color)}.selected:active .handle::before{background-color:var(--_selected-pressed-handle-color)}.selected.disabled .handle::before{background-color:var(--_disabled-selected-handle-color);opacity:var(--_disabled-selected-handle-opacity)}.unselected .handle::before{background-color:var(--_handle-color)}.unselected:hover .handle::before{background-color:var(--_hover-handle-color)}.unselected:focus-within .handle::before{background-color:var(--_focus-handle-color)}.unselected:active .handle::before{background-color:var(--_pressed-handle-color)}.unselected.disabled .handle::before{background-color:var(--_disabled-handle-color);opacity:var(--_disabled-handle-opacity)}md-ripple{border-radius:var(--_state-layer-shape);height:var(--_state-layer-size);inset:unset;width:var(--_state-layer-size)}.selected md-ripple{--md-ripple-hover-color: var(--_selected-hover-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-pressed-opacity: var(--_selected-pressed-state-layer-opacity)}.unselected md-ripple{--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}}@layer hcm{@media(forced-colors: active){.unselected .handle::before{background:ButtonText}.disabled .handle::before{opacity:1}.disabled.unselected .handle::before{background:GrayText}}}@layer styles{.icons{position:relative;height:100%;width:100%}.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}.disabled .icon{transition:none}.selected .icon--on,.unselected .icon--off{opacity:1}.unselected .handle:not(.with-icon) .icon--on{transform:rotate(-45deg)}.icon--off{width:var(--_icon-size);height:var(--_icon-size);fill:var(--_icon-color)}.unselected:hover .icon--off{fill:var(--_hover-icon-color)}.unselected:focus-within .icon--off{fill:var(--_focus-icon-color)}.unselected:active .icon--off{fill:var(--_pressed-icon-color)}.unselected.disabled .icon--off{fill:var(--_disabled-icon-color);opacity:var(--_disabled-icon-opacity)}.icon--on{width:var(--_selected-icon-size);height:var(--_selected-icon-size);fill:var(--_selected-icon-color)}.selected:hover .icon--on{fill:var(--_selected-hover-icon-color)}.selected:focus-within .icon--on{fill:var(--_selected-focus-icon-color)}.selected:active .icon--on{fill:var(--_selected-pressed-icon-color)}.selected.disabled .icon--on{fill:var(--_disabled-selected-icon-color);opacity:var(--_disabled-selected-icon-opacity)}}@layer hcm{@media(forced-colors: active){.icon--off{fill:Canvas}.icon--on{fill:ButtonText}.disabled.unselected .icon--off,.disabled.selected .icon--on{opacity:1}.disabled .icon--on{fill:GrayText}}}/*# sourceMappingURL=switch-styles.css.map */
 `;
 //# sourceMappingURL=switch-styles.css.js.map