diff --git a/src/dev-app/chips/chips-demo.scss b/src/dev-app/chips/chips-demo.scss
index 022cad5fe239..575091eb6334 100644
--- a/src/dev-app/chips/chips-demo.scss
+++ b/src/dev-app/chips/chips-demo.scss
@@ -18,7 +18,7 @@
}
.mat-mdc-basic-chip {
- margin: auto 10px;
+ margin: 16px 10px;
}
mat-chip-grid input {
diff --git a/src/material/chips/_m2-chip.scss b/src/material/chips/_m2-chip.scss
index 2263debd5fda..e05262ff350e 100644
--- a/src/material/chips/_m2-chip.scss
+++ b/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,
),
);
}
diff --git a/src/material/chips/_m3-chip.scss b/src/material/chips/_m3-chip.scss
index 23cc387aa05a..9149fc3a0d30 100644
--- a/src/material/chips/_m3-chip.scss
+++ b/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),
);
}
diff --git a/src/material/chips/chip-option.html b/src/material/chips/chip-option.html
index a24ad97fd148..7d150b49e644 100644
--- a/src/material/chips/chip-option.html
+++ b/src/material/chips/chip-option.html
@@ -27,6 +27,7 @@
+
diff --git a/src/material/chips/chip-row.html b/src/material/chips/chip-row.html
index c1715e7e4344..55ed032a3186 100644
--- a/src/material/chips/chip-row.html
+++ b/src/material/chips/chip-row.html
@@ -31,6 +31,7 @@
+
@if (_hasTrailingIcon()) {
diff --git a/src/material/chips/chip-set.scss b/src/material/chips/chip-set.scss
index 3538a9daed9d..87d59ab63fe1 100644
--- a/src/material/chips/chip-set.scss
+++ b/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'] & {
diff --git a/src/material/chips/chip.html b/src/material/chips/chip.html
index be514ac35fc8..1d9eb6efd943 100644
--- a/src/material/chips/chip.html
+++ b/src/material/chips/chip.html
@@ -11,6 +11,7 @@
+
diff --git a/src/material/chips/chip.scss b/src/material/chips/chip.scss
index 6324868ef8f6..b5a316cb75dc 100644
--- a/src/material/chips/chip.scss
+++ b/src/material/chips/chip.scss
@@ -12,6 +12,7 @@ $_graphic-padding: 6px;
$_trailing-action-padding: 8px;
$_avatar-leading-padding: 4px;
$_avatar-trailing-padding: 8px;
+$_touch-target-size: 48px;
$fallbacks: m3-chip.get-tokens();
@@ -27,6 +28,17 @@ $fallbacks: m3-chip.get-tokens();
max-width: 100%;
}
+.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;
+}
+
.mdc-evolution-chip__cell,
.mdc-evolution-chip__action {
height: 100%;