update

Author: adolgachev

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

@@ -99,7 +99,8 @@
         -1: 36px,
         -2: 32px,
         -3: 28px,
-      ), $density-scale)
+      ), $density-scale),
+      slide-toggle-touch-target-display: if($density-scale < -1, none, block)
     ),
   );
 }

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

@@ -1,5 +1,7 @@
 @use 'sass:map';
+@use 'sass:list';
 @use '../core/tokens/m3-utils';
+@use '../core/theming/theming';
 @use '../core/tokens/m3';
 
 /// Generates custom tokens for the mat-slide-toggle.
@@ -115,6 +117,16 @@
       slide-toggle-label-text-tracking: map.get($system, body-medium-tracking),
       slide-toggle-label-text-weight: map.get($system, body-medium-weight),
     ),
-    density: (),
+     density: get-density-tokens(map.get($system, density-scale)),
+  );
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($scale) {
+  $scale: theming.clamp-density($scale, -3);
+  $index: ($scale * -1) + 1;
+
+  @return (
+    slide-toggle-touch-target-display: list.nth((block, block, none, none), $index),
   );
 }

src/material/slide-toggle/slide-toggle.html

@@ -20,7 +20,6 @@
     [attr.aria-disabled]="disabled && disabledInteractive ? 'true' : null"
     (click)="_handleClick()"
     #switch>
-    <!-- Render this element first so the input is on top. -->
     <div class="mat-mdc-slide-toggle-touch-target"></div>
     <span class="mdc-switch__track"></span>
     <span class="mdc-switch__handle-track">

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

@@ -551,7 +551,7 @@ $fallbacks: m3-slide-toggle.get-tokens();
   height: 48px;
   width: 100%;
   transform: translate(-50%, -50%);
-  //display: token-utils.slot(radio-touch-target-display, $fallbacks);
+  display: token-utils.slot(slide-toggle-touch-target-display, $fallbacks);
 
   [dir='rtl'] & {
     left: auto;