fix(material/chips): update chips minimum touch target to 48px

Updates Angular Components' Chips component so that chips use a
touch-target span similar to buttons to ensure that chips meet
the minimum touch-target size of 48x48 for accessibility
standards.

Fixes b/537441584

Author: essjay05

src/dev-app/chips/chips-demo.scss

@@ -18,7 +18,7 @@
   }
 
   .mat-mdc-basic-chip {
-    margin: auto 10px;
+    margin: 8px 10px;
   }
 
   mat-chip-grid input {

src/material/chips/chip-option.html

@@ -27,6 +27,7 @@
       <ng-content></ng-content>
       <span class="mat-mdc-chip-primary-focus-indicator mat-focus-indicator"></span>
     </span>
+    <span class="mat-mdc-chip-touch-target"></span>
   </button>
 </span>
 

src/material/chips/chip-row.html

@@ -31,6 +31,7 @@
 
     <span class="mat-mdc-chip-primary-focus-indicator mat-focus-indicator" aria-hidden="true"></span>
   </span>
+  <span class="mat-mdc-chip-touch-target"></span>
 </span>
 
 @if (_hasTrailingIcon()) {

src/material/chips/chip-set.scss

@@ -16,7 +16,7 @@
   }
 
   .mdc-evolution-chip {
-    margin: 4px 0 4px 8px;
+    margin: 8px 0 8px 8px;
   }
 
   [dir='rtl'] & {

src/material/chips/chip.html

@@ -11,6 +11,7 @@
       <ng-content></ng-content>
       <span class="mat-mdc-chip-primary-focus-indicator mat-focus-indicator"></span>
     </span>
+    <span class="mat-mdc-chip-touch-target"></span>
   </span>
 </span>
 

src/material/chips/chip.scss

@@ -12,6 +12,8 @@ $_graphic-padding: 6px;
 $_trailing-action-padding: 8px;
 $_avatar-leading-padding: 4px;
 $_avatar-trailing-padding: 8px;
+$_touch-target-size: 48px;
+$_touch-target-vertical-padding: 8px;
 
 $fallbacks: m3-chip.get-tokens();
 
@@ -27,6 +29,27 @@ $fallbacks: m3-chip.get-tokens();
   max-width: 100%;
 }
 
+.mat-mdc-standard-chip,
+.mat-mdc-basic-chip,
+.mat-mdc-evolution-chip {
+  /* Ensures basic/unstyled chips also have a 32px min-height baseline */
+  min-height: 32px;
+
+  /* 8px top and bottom margin for 48px touch target separation */
+  margin-top: $_touch-target-vertical-padding;
+  margin-bottom: $_touch-target-vertical-padding;
+}
+
+.mat-mdc-chip-touch-target {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: $_touch-target-size;
+  transform: translateY(-50%);
+  pointer-events: auto;
+}
+
 .mdc-evolution-chip__cell,
 .mdc-evolution-chip__action {
   height: 100%;