fix(material/slide-toggle): add larger touch target (#31486)

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,6 +20,7 @@
     [attr.aria-disabled]="disabled && disabledInteractive ? 'true' : null"
     (click)="_handleClick()"
     #switch>
+    <div class="mat-mdc-slide-toggle-touch-target"></div>
     <span class="mdc-switch__track"></span>
     <span class="mdc-switch__handle-track">
       <span class="mdc-switch__handle">

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

@@ -542,3 +542,20 @@ $fallbacks: m3-slide-toggle.get-tokens();
     color: token-utils.slot(slide-toggle-disabled-label-text-color, $fallbacks);
   }
 }
+
+// Element used to provide a larger tap target for users on touch devices.
+.mat-mdc-slide-toggle-touch-target {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  height: 48px;
+  width: 100%;
+  transform: translate(-50%, -50%);
+  display: token-utils.slot(slide-toggle-touch-target-display, $fallbacks);
+
+  [dir='rtl'] & {
+    left: auto;
+    right: 50%;
+    transform: translate(50%, -50%);
+  }
+}