@material/web 0.1.0-alpha.0

package/switch/lib/_switch-theme.scss

@@ -0,0 +1,232 @@
+//
+// Copyright 2021 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 '@material/web/focus/lib/focus-ring-theme';
+@use '@material/web/sass/color';
+@use '@material/web/sass/resolvers';
+@use '@material/web/sass/shape';
+@use '@material/web/sass/theme';
+@use '@material/web/sass/var';
+@use '@material/web/tokens';
+
+@use './switch-track-theme';
+@use './switch-handle-theme';
+@use './switch-icon-theme';
+
+$_default-deps: (
+  md-sys-color: tokens.md-sys-color-values-light-dynamic(),
+  md-sys-elevation: tokens.md-sys-elevation-values(),
+  md-sys-shape: tokens.md-sys-shape-values(),
+  md-sys-state: tokens.md-sys-state-values(),
+);
+
+@function values($deps: $_default-deps, $exclude-hardcoded-values: false) {
+  $values: tokens.md-comp-switch-values($deps, $exclude-hardcoded-values);
+
+  // Add missing tokens.
+  $values: map.merge(
+    $values,
+    (
+      // TODO(b/230013081): remove this once the missing token is added.
+      unselected-track-outline-color: map.get($deps, md-sys-color, outline)
+    )
+  );
+
+  // Mark opacity tokens as not hardcoded
+  @if $exclude-hardcoded-values {
+    // If opacity value is null (e.g. for dark theme map, only the color
+    // changes, so the opacity value is null), use the default opacity value.
+    // Otherwise, the color is not flattened, meaning that the color would
+    // be applied without any opacity, which is incorrect.
+    $fullValues: tokens.md-comp-switch-values($deps);
+    $values: map.merge(
+      $values,
+      (
+        disabled-selected-handle-opacity:
+          map.get($fullValues, disabled-selected-handle-opacity),
+        disabled-unselected-handle-opacity:
+          map.get($fullValues, disabled-unselected-handle-opacity),
+        disabled-track-opacity: map.get($fullValues, disabled-track-opacity),
+        disabled-selected-icon-opacity:
+          map.get($fullValues, disabled-selected-icon-opacity),
+        disabled-unselected-icon-opacity:
+          map.get($fullValues, disabled-unselected-icon-opacity),
+      )
+    );
+  }
+
+  @return $values;
+}
+
+// PRIVATE PROPERTIES
+
+$_touch-target-size: 48px;
+
+$_selected: '.md3-switch--selected';
+$_unselected: '.md3-switch--unselected';
+
+// PUBLIC PROPERTIES
+
+$light-theme: values();
+$dark-theme: values(
+  (
+    md-sys-color: tokens.md-sys-color-values-dark-dynamic(),
+  ),
+  $exclude-hardcoded-values: true
+);
+
+$_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,
+);
+
+@function _resolve-theme($theme, $resolvers) {
+  $theme: shape.resolve-theme(
+    $theme,
+    map.get($resolvers, shape),
+    track-shape,
+    handle-shape
+  );
+  $theme: _flatten-disable-colors($theme);
+  @return $theme;
+}
+
+@function _warn-of-not-implemented($theme) {
+  // TODO(b/230484095): remove this warning once these are implemented.
+  @if (
+    map.has-key($theme, selected-handle-height) or
+      map.has-key($theme, selected-handle-width) or
+      map.has-key($theme, unselected-handle-height) or
+      map.has-key($theme, unselected-handle-width) or
+      map.has-key($theme, pressed-handle-height) or
+      map.has-key($theme, pressed-handle-width)
+  ) {
+    @warn '`handle-height` and `handle-width` are not yet implemented. see b/230484095';
+  }
+  @return $theme;
+}
+
+@mixin theme($theme, $resolvers: resolvers.$material) {
+  $theme: _warn-of-not-implemented($theme);
+  $theme: theme.validate-theme($light-theme, $theme);
+  $theme: _resolve-theme($theme, $resolvers);
+  $theme: theme.create-theme-vars($theme, switch);
+
+  @include theme.emit-theme-vars($theme);
+}
+
+@mixin theme-styles($theme, $resolvers: resolvers.$material) {
+  $theme: _warn-of-not-implemented($theme);
+  $theme: theme.validate-theme-styles($light-theme, $theme);
+  $theme: _resolve-theme($theme, $resolvers);
+  $theme: theme.create-theme-vars($theme, switch);
+
+  :host {
+    @include _focus-ring($theme);
+  }
+
+  .md3-switch {
+    @include _root($theme);
+  }
+
+  @include switch-track-theme.theme-styles($theme);
+
+  @include switch-handle-theme.theme-styles($theme);
+
+  @include switch-icon-theme.theme-styles($theme);
+}
+
+// PRIVATE API
+
+@mixin _root($theme) {
+  width: map.get($theme, track-width);
+  height: map.get($theme, track-height);
+
+  // Track shape
+  border-start-start-radius: map.get($theme, track-shape-start-start);
+  border-start-end-radius: map.get($theme, track-shape-start-end);
+  border-end-end-radius: map.get($theme, track-shape-end-end);
+  border-end-start-radius: map.get($theme, track-shape-end-start);
+
+  @include _forced-colors-mode-theme;
+}
+
+@mixin _focus-ring($theme) {
+  // TODO(b/231741594): use `track-shape` once this is not deleted.
+  $track-shape: map.get($theme, track-shape-start-start);
+
+  @include focus-ring-theme.theme(
+    (
+      ring-radius: $track-shape,
+    )
+  );
+}
+
+@mixin _forced-colors-mode-theme {
+  // TODO(b/230630968): create a foced-colors-mode mixin
+  @media screen and (forced-colors: active) {
+    @include theme($_forced-colors-theme);
+  }
+}
+
+@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/_switch-track-theme.scss

@@ -0,0 +1,117 @@
+//
+// 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';
+
+$_selected: '.md3-switch--selected';
+$_unselected: '.md3-switch--unselected';
+
+@mixin theme-styles($theme) {
+  .md3-switch__track {
+    @include _track-selected($theme);
+    &::before {
+      @include _track-unselected($theme);
+    }
+  }
+}
+
+@mixin _track-selected($theme) {
+  @include _track-selected-color(
+    (
+      default: map.get($theme, selected-track-color),
+      disabled: map.get($theme, disabled-selected-track-color),
+      focus: map.get($theme, selected-focus-track-color),
+      hover: map.get($theme, selected-hover-track-color),
+      pressed: map.get($theme, selected-pressed-track-color),
+    )
+  );
+}
+
+@mixin _track-selected-color($colors) {
+  background-color: map.get($colors, default);
+
+  #{$_selected}:hover & {
+    background-color: map.get($colors, hover);
+  }
+
+  #{$_selected}:focus-visible & {
+    background-color: map.get($colors, focus);
+  }
+
+  #{$_selected}:active & {
+    background-color: map.get($colors, pressed);
+  }
+
+  #{$_selected}:disabled & {
+    background-color: map.get($colors, disabled);
+  }
+}
+
+@mixin _track-unselected($theme) {
+  border-width: map.get($theme, track-outline-width);
+
+  @include _track-unselected-color(
+    (
+      default: map.get($theme, unselected-track-color),
+      disabled: map.get($theme, disabled-unselected-track-color),
+      focus: map.get($theme, unselected-focus-track-color),
+      hover: map.get($theme, unselected-hover-track-color),
+      pressed: map.get($theme, unselected-pressed-track-color),
+    )
+  );
+
+  @include _track-outline-color(
+    (
+      default: map.get($theme, unselected-track-outline-color),
+      disabled: map.get($theme, disabled-unselected-track-outline-color),
+      focus: map.get($theme, unselected-focus-track-outline-color),
+      hover: map.get($theme, unselected-hover-track-outline-color),
+      pressed: map.get($theme, unselected-pressed-track-outline-color),
+    )
+  );
+}
+
+@mixin _track-unselected-color($colors) {
+  background-color: map.get($colors, default);
+
+  #{$_unselected}:hover & {
+    background-color: map.get($colors, hover);
+  }
+
+  #{$_unselected}:focus-visible & {
+    background-color: map.get($colors, focus);
+  }
+
+  #{$_unselected}:active & {
+    background-color: map.get($colors, pressed);
+  }
+
+  #{$_unselected}:disabled & {
+    background-color: map.get($colors, disabled);
+  }
+}
+
+@mixin _track-outline-color($colors) {
+  border-color: map.get($colors, default);
+
+  #{$_unselected}:hover & {
+    border-color: map.get($colors, hover);
+  }
+
+  #{$_unselected}:focus-visible & {
+    border-color: map.get($colors, focus);
+  }
+
+  #{$_unselected}:active & {
+    border-color: map.get($colors, pressed);
+  }
+
+  #{$_unselected}:disabled & {
+    border-color: map.get($colors, disabled);
+  }
+}

package/switch/lib/_switch.scss

@@ -0,0 +1,210 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
+
+// PUBLIC PROPERTIES
+
+@use '@material/web/motion/animation';
+@use '@material/web/sass/touch-target';
+
+// 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
+
+@mixin static-styles() {
+  :host {
+    display: inline-flex;
+    outline: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .md3-switch {
+    @include _root;
+  }
+
+  // Track
+  .md3-switch__track {
+    @include _track;
+
+    &::before {
+      @include _track-before;
+
+      .md3-switch--selected & {
+        @include _track-selected-before;
+      }
+    }
+  }
+
+  // Handle container
+  .md3-switch__handle-container {
+    @include _handle-container;
+  }
+
+  // Handle
+  .md3-switch__handle {
+    @include _handle;
+
+    &::before {
+      @include _handle-before;
+
+      .md3-switch--selected & {
+        @include _handle-selected-before;
+      }
+    }
+  }
+
+  // Icons
+  .md3-switch__icons {
+    @include _icons;
+  }
+
+  .md3-switch__icon {
+    @include _icon;
+    @include _icon-hidden;
+  }
+
+  .md3-switch--selected .md3-switch__icon--on,
+  .md3-switch--unselected .md3-switch__icon--off {
+    @include _icon-visible;
+  }
+
+  // Touch target
+  .md3-switch__touch {
+    @include touch-target.touch-target();
+  }
+
+  // Disabled
+  .md3-switch:disabled {
+    @include _disabled;
+  }
+
+  // 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;
+    }
+  }
+
+  .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();
+}
+
+@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};
+}
+
+// When selected, turn off ::before
+@mixin _handle-selected-before() {
+  opacity: 0;
+}
+
+@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;
+}

package/switch/lib/switch-styles.css.d.ts

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

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

@@ -0,0 +1,9 @@
+/**
+  * @license
+  * Copyright 2022 Google LLC
+  * SPDX-License-Identifier: Apache-2.0
+  */
+import { css } from 'lit';
+export const styles = css `:host{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 */
+`;
+//# sourceMappingURL=switch-styles.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch-styles.css.js","sourceRoot":"","sources":["switch-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{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 */\n`;\n "]}

package/switch/lib/switch-styles.scss

@@ -0,0 +1,11 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@use './switch';
+@use './switch-theme';
+
+@include switch.static-styles();
+
+@include switch-theme.theme-styles(switch-theme.$light-theme);

package/switch/lib/switch.d.ts

@@ -0,0 +1,59 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import '@material/web/focus/focus-ring.js';
+import { ActionElement, EndPressConfig } from '@material/web/actionelement/action-element.js';
+import { getFormValue } from '@material/web/controller/form-controller.js';
+import { TemplateResult } from 'lit';
+import { ClassInfo } from 'lit/directives/class-map.js';
+/** @soyCompatible */
+export declare class Switch extends ActionElement {
+    static shadowRootOptions: ShadowRootInit;
+    disabled: boolean;
+    processing: boolean;
+    selected: boolean;
+    icons: boolean;
+    showOnlySelectedIcon: boolean;
+    ariaLabel: string;
+    /** @soyPrefixAttribute */
+    ariaLabelledBy: string;
+    protected showFocusRing: boolean;
+    get form(): HTMLFormElement;
+    name: string;
+    value: string;
+    [getFormValue](): string;
+    constructor();
+    click(): void;
+    /** @soyTemplate */
+    protected render(): TemplateResult;
+    /** @soyTemplate */
+    protected getRenderClasses(): ClassInfo;
+    /** @soyTemplate */
+    protected renderFocusRing(): TemplateResult;
+    /** @soyTemplate */
+    protected renderHandle(): TemplateResult;
+    /** @soyTemplate */
+    private renderIcons;
+    /**
+     * https://fonts.google.com/icons?selected=Material%20Symbols%20Outlined%3Acheck%3AFILL%400%3Bwght%40500%3BGRAD%400%3Bopsz%4024
+     *
+     * @soyTemplate
+     */
+    protected renderOnIcon(): TemplateResult;
+    /**
+     * https://fonts.google.com/icons?selected=Material%20Symbols%20Outlined%3Aclose%3AFILL%400%3Bwght%40500%3BGRAD%400%3Bopsz%4024
+     *
+     * @soyTemplate
+     */
+    protected renderOffIcon(): TemplateResult;
+    /** @soyTemplate */
+    private renderTouchTarget;
+    /** @soyTemplate */
+    private shouldShowIcons;
+    endPress({ cancelled }: EndPressConfig): void;
+    protected handleFocus(): void;
+    protected handleBlur(): void;
+    handlePointerDown(event: PointerEvent): void;
+}