refactor(material/chips): follow angular touch-target density pattern

Updates previous changes to Angular Components' Chip component to add a
touch-target element and modifies the previously implemented styles to
follow the density logic applied to touch-target theme/styles for checkbox
and button.

Fixes b/537441584

Author: essjay05

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

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

src/material/chips/_m2-chip.scss

@@ -6,6 +6,11 @@
 @function get-tokens($theme) {
   $system: m2-utils.get-system($theme);
   $density-scale: theming.clamp-density(map.get($system, density-scale), -2);
+  $touch-target-display: block;
+
+  @if $density-scale < 0 {
+    $touch-target-display: none;
+  }
 
   @return (
     base: (
@@ -43,7 +48,8 @@
       chip-container-height: map.get((
         0: 32px,
         -1: 28px,
-        -2: 24px), $density-scale)
+        -2: 24px), $density-scale),
+        chip-touch-target-display: $touch-target-display,
     ),
   );
 }

src/material/chips/_m3-chip.scss

@@ -77,5 +77,6 @@
 
   @return (
     chip-container-height: list.nth((32px, 28px, 24px), $index),
+    chip-touch-target-display: list.nth((block, none, none), $index),
   );
 }

src/material/chips/chip.scss

@@ -29,24 +29,14 @@ $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%);
+  display: token-utils.slot(chip-touch-target-display, $fallbacks);
   pointer-events: auto;
 }