fix(material/chips): remove visible overflow for labels (#31679)

Author: adolgachev

src/material/chips/chip.scss

@@ -566,15 +566,6 @@ $fallbacks: m3-chip.get-tokens();
 .mat-mdc-standard-chip {
   -webkit-tap-highlight-color: transparent;
 
-  // MDC sets `overflow: hidden` on these elements in order to truncate the text. This is
-  // unnecessary since our chips don't truncate their text and it makes it difficult to style
-  // the strong focus indicators so we need to override it.
-  .mdc-evolution-chip__cell--primary,
-  .mdc-evolution-chip__action--primary,
-  .mat-mdc-chip-action-label {
-    overflow: visible;
-  }
-
   // MDC sizes and positions this element using `width`, `height` and `padding`.
   // This usually works, but it's common for apps to add `box-sizing: border-box`
   // to all elements on the page which can cause the graphic to be clipped.

src/material/core/focus-indicators/_private.scss

@@ -86,6 +86,10 @@ $default-border-radius: 4px;
   $config: map.merge($default-config, $config);
 
   @include _customize-focus-indicators($config);
+
+  // Strong focus indicators currently need chip labels to have overflow visible.
+  // TODO(b/446709063) revisit the structure to find a way to remove this dependency.
+  @include _chip-label-overflow-visible();
 }
 
 @mixin strong-focus-indicators-color($theme-or-color) {
@@ -108,3 +112,15 @@ $default-border-radius: 4px;
     }
   }
 }
+
+@mixin _chip-label-overflow-visible {
+  .mat-mdc-standard-chip {
+    // MDC sets `overflow: hidden` on these elements in order to truncate the text. This conflicts
+    // with how we structure and style the strong focus indicators so we need to override it.
+    .mdc-evolution-chip__cell--primary,
+    .mdc-evolution-chip__action--primary,
+    .mat-mdc-chip-action-label {
+      overflow: visible;
+    }
+  }
+}