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

Author: adolgachev

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

@@ -20,6 +20,8 @@
     [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">
       <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(radio-touch-target-display, $fallbacks);
+
+  [dir='rtl'] & {
+    left: auto;
+    right: 50%;
+    transform: translate(50%, -50%);
+  }
+}