fix(material/slide-toggle): fix m3 width, height, and margin

src/material-experimental/theming/_custom-tokens.scss

@@ -1057,7 +1057,22 @@
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
 /// @return {Map} A set of custom tokens for the mat-slide-toggle
 @function switch($systems, $exclude-hardcoded) {
-  @return ((), ());
+  @return ((
+    unselected-handle-width: 16px,
+    unselected-handle-height: 16px,
+    selected-handle-width: 24px,
+    selected-handle-height: 24px,
+    with-icon-handle-width: 24px,
+    with-icon-handle-height: 24px,
+    pressed-handle-width: 28px,
+    pressed-handle-height: 28px,
+    selected-handle-margin-left: 24px,
+    selected-with-icon-handle-margin-left: 24px,
+    selected-pressed-handle-margin-left: 22px,
+    unselected-handle-margin-left: 8px,
+    unselected-with-icon-handle-margin-left: 4px,
+    unselected-pressed-handle-margin-left: 2px,
+  ), ());
 }
 
 /// Generates custom tokens for the mat-snack-bar.

src/material/core/tokens/m2/mat/_switch.scss

@@ -1,5 +1,4 @@
 @use '../../token-utils';
-@use '../../../theming/inspection';
 @use '../../../style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -8,7 +7,23 @@ $prefix: (mat, switch);
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
 @function get-unthemable-tokens() {
-  @return ();
+  @return (
+    unselected-handle-width: 20px,
+    unselected-handle-height: 20px,
+    selected-handle-width: 20px,
+    selected-handle-height: 20px,
+    pressed-handle-width: 20px,
+    pressed-handle-height: 20px,
+    with-icon-handle-width: 20px,
+    with-icon-handle-height: 20px,
+
+    selected-handle-margin-left: 0,
+    selected-with-icon-handle-margin-left: 0,
+    selected-pressed-handle-margin-left: 0,
+    unselected-handle-margin-left: 0,
+    unselected-with-icon-handle-margin-left: 0,
+    unselected-pressed-handle-margin-left: 0,
+  );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.

src/material/slide-toggle/slide-toggle.scss

@@ -5,7 +5,9 @@
 @use '@material/ripple' as mdc-ripple;
 @use '../core/style/layout-common';
 @use '@material/theme/custom-properties' as mdc-custom-properties;
+@use '../core/tokens/m2/mat/switch' as m2-mat-switch;
 @use '../core/tokens/m2/mdc/switch' as m2-mdc-switch;
+@use '../core/tokens/token-utils';
 
 @include mdc-custom-properties.configure($emit-fallback-values: false, $emit-fallback-vars: false) {
   $mdc-switch-token-slots: m2-mdc-switch.get-token-slots();
@@ -115,3 +117,67 @@
     cursor: pointer;
   }
 }
+
+// Used for M3 animations. Does not affect the M2 slide-toggle
+// because the width and height are static, and the margin is unused.
+.mdc-switch__handle {
+  transition:
+    width 75ms cubic-bezier(0.4, 0, 0.2, 1),
+    height 75ms cubic-bezier(0.4, 0, 0.2, 1),
+    margin 75ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@include token-utils.use-tokens(m2-mat-switch.$prefix, m2-mat-switch.get-token-slots()) {
+  .mat-mdc-slide-toggle {
+    .mdc-switch--unselected .mdc-switch__handle {
+      @include token-utils.create-token-slot(width, unselected-handle-width);
+      @include token-utils.create-token-slot(height, unselected-handle-height);
+    }
+
+    .mdc-switch--selected .mdc-switch__handle {
+      @include token-utils.create-token-slot(width, selected-handle-width);
+      @include token-utils.create-token-slot(height, selected-handle-height);
+    }
+
+    .mdc-switch__handle:has(.mdc-switch__icons) {
+      @include token-utils.create-token-slot(width, with-icon-handle-width);
+      @include token-utils.create-token-slot(height, with-icon-handle-height);
+    }
+
+    &:active .mdc-switch:not(.mdc-switch--disabled) .mdc-switch__handle {
+      @include token-utils.create-token-slot(width, pressed-handle-width);
+      @include token-utils.create-token-slot(height, pressed-handle-height);
+    }
+  }
+}
+
+@include token-utils.use-tokens(m2-mat-switch.$prefix, m2-mat-switch.get-token-slots()) {
+  .mat-mdc-slide-toggle {
+    .mdc-switch--selected .mdc-switch__handle {
+      @include token-utils.create-token-slot(margin-left, selected-handle-margin-left);
+
+      &:has(.mdc-switch__icons) {
+        @include token-utils.create-token-slot(margin-left, selected-with-icon-handle-margin-left);
+      }
+    }
+
+    .mdc-switch--unselected .mdc-switch__handle {
+      @include token-utils.create-token-slot(margin-left, unselected-handle-margin-left);
+
+      &:has(.mdc-switch__icons) {
+        @include token-utils.create-token-slot(
+          margin-left,
+          unselected-with-icon-handle-margin-left,
+        );
+      }
+    }
+
+    &:active .mdc-switch--selected:not(.mdc-switch--disabled) .mdc-switch__handle {
+      @include token-utils.create-token-slot(margin-left, selected-pressed-handle-margin-left);
+    }
+
+    &:active .mdc-switch--unselected:not(.mdc-switch--disabled) .mdc-switch__handle {
+      @include token-utils.create-token-slot(margin-left, unselected-pressed-handle-margin-left);
+    }
+  }
+}