From a4bfc96a0bdd1d3cbbfa141c95a73f928e5a948b Mon Sep 17 00:00:00 2001
From: vdegenne <vdegenne@gmail.com>
Date: Wed, 6 Dec 2023 16:57:51 +0100
Subject: [PATCH 1/6] chore(md-chip): filter chip trailing icon can now be
 customized

---
 chips/internal/_trailing-icon.scss |  6 +++++-
 chips/internal/trailing-icons.ts   | 10 ++++++----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/chips/internal/_trailing-icon.scss b/chips/internal/_trailing-icon.scss
index 233f61ab0b..660a7443bb 100644
--- a/chips/internal/_trailing-icon.scss
+++ b/chips/internal/_trailing-icon.scss
@@ -28,12 +28,16 @@
     padding-inline-end: 0;
   }
 
-  .trailing.icon {
+  .trailing.icon, [name="trailing-icon"]::slotted(*) {
     color: var(--_trailing-icon-color);
     height: var(--_icon-size);
     width: var(--_icon-size);
   }
 
+  [name="trailing-icon"]::slotted(md-icon) {
+     --md-icon-size: var(--_icon-size);
+  }
+
   :where(:hover) .trailing.icon {
     color: var(--_hover-trailing-icon-color);
   }
diff --git a/chips/internal/trailing-icons.ts b/chips/internal/trailing-icons.ts
index 234afe8518..7aee1e7496 100644
--- a/chips/internal/trailing-icons.ts
+++ b/chips/internal/trailing-icons.ts
@@ -34,10 +34,12 @@ export function renderRemoveButton({
       @focus=${focusListener}>
       <md-focus-ring part="trailing-focus-ring"></md-focus-ring>
       <md-ripple ?disabled=${disabled}></md-ripple>
-      <svg class="trailing icon" viewBox="0 96 960 960" aria-hidden="true">
-        <path
-          d="m249 849-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z" />
-      </svg>
+      <slot name="trailing-icon">
+        <svg class="trailing icon" viewBox="0 96 960 960" aria-hidden="true">
+          <path
+            d="m249 849-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z" />
+        </svg>
+      </slot>
       <span class="touch"></span>
     </button>
   `;

From 9ff29ac8fa1e1181d682d9272781cd721bd585be Mon Sep 17 00:00:00 2001
From: vdegenne <vdegenne@gmail.com>
Date: Wed, 6 Dec 2023 17:12:05 +0100
Subject: [PATCH 2/6] chore(md-chip): filter chip trailing icon can now be
 customized

---
 chips/internal/_trailing-icon.scss | 3 ++-
 chips/internal/trailing-icons.ts   | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/chips/internal/_trailing-icon.scss b/chips/internal/_trailing-icon.scss
index 660a7443bb..8ff3bdc52a 100644
--- a/chips/internal/_trailing-icon.scss
+++ b/chips/internal/_trailing-icon.scss
@@ -28,7 +28,7 @@
     padding-inline-end: 0;
   }
 
-  .trailing.icon, [name="trailing-icon"]::slotted(*) {
+  .trailing.icon {
     color: var(--_trailing-icon-color);
     height: var(--_icon-size);
     width: var(--_icon-size);
@@ -36,6 +36,7 @@
 
   [name="trailing-icon"]::slotted(md-icon) {
      --md-icon-size: var(--_icon-size);
+     color: inherit;
   }
 
   :where(:hover) .trailing.icon {
diff --git a/chips/internal/trailing-icons.ts b/chips/internal/trailing-icons.ts
index 7aee1e7496..2ffd24f3d4 100644
--- a/chips/internal/trailing-icons.ts
+++ b/chips/internal/trailing-icons.ts
@@ -34,8 +34,8 @@ export function renderRemoveButton({
       @focus=${focusListener}>
       <md-focus-ring part="trailing-focus-ring"></md-focus-ring>
       <md-ripple ?disabled=${disabled}></md-ripple>
-      <slot name="trailing-icon">
-        <svg class="trailing icon" viewBox="0 96 960 960" aria-hidden="true">
+      <slot name="trailing-icon" class="trailing icon">
+        <svg viewBox="0 96 960 960" aria-hidden="true">
           <path
             d="m249 849-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z" />
         </svg>

From b30d09e75b831e7d651ea9dc05707ec99fd93862 Mon Sep 17 00:00:00 2001
From: vdegenne <vdegenne@gmail.com>
Date: Wed, 6 Dec 2023 18:27:54 +0100
Subject: [PATCH 3/6] add hasSlottedTrailingIcon

---
 chips/internal/filter-chip.ts       | 6 +++---
 chips/internal/multi-action-chip.ts | 9 +++++++++
 chips/internal/trailing-icons.ts    | 6 +++---
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/chips/internal/filter-chip.ts b/chips/internal/filter-chip.ts
index 9d61254226..d24eea0569 100644
--- a/chips/internal/filter-chip.ts
+++ b/chips/internal/filter-chip.ts
@@ -22,7 +22,7 @@ import {renderRemoveButton} from './trailing-icons.js';
  */
 export class FilterChip extends MultiActionChip {
   @property({type: Boolean}) elevated = false;
-  @property({type: Boolean}) removable = false;
+  @property({type: Boolean, attribute: 'has-trailing'}) hasTrailing = false;
   @property({type: Boolean, reflect: true}) selected = false;
 
   protected get primaryId() {
@@ -39,7 +39,7 @@ export class FilterChip extends MultiActionChip {
       ...super.getContainerClasses(),
       elevated: this.elevated,
       selected: this.selected,
-      'has-trailing': this.removable,
+      'has-trailing': this.hasTrailing,
     };
   }
 
@@ -72,7 +72,7 @@ export class FilterChip extends MultiActionChip {
   }
 
   protected override renderTrailingAction(focusListener: EventListener) {
-    if (this.removable) {
+    if (this.hasTrailing) {
       return renderRemoveButton({
         focusListener,
         ariaLabel: this.ariaLabelRemove,
diff --git a/chips/internal/multi-action-chip.ts b/chips/internal/multi-action-chip.ts
index 21310c82db..6819d5ee06 100644
--- a/chips/internal/multi-action-chip.ts
+++ b/chips/internal/multi-action-chip.ts
@@ -42,6 +42,15 @@ export abstract class MultiActionChip extends Chip {
   protected abstract readonly primaryAction: HTMLElement | null;
   protected abstract readonly trailingAction: HTMLElement | null;
 
+  /**
+   * Getter used to determine if the user provided a trailing icon or not.
+   */
+  get hasSlottedTrailingIcon() {
+     const slot = this.shadowRoot.querySelector('slot[name="trailing-icon"]') as HTMLSlotElement;
+     // Default slot is not counted as one element.
+     return slot.assignedElements().length > 0;
+  }
+
   constructor() {
     super();
     this.handleTrailingActionFocus = this.handleTrailingActionFocus.bind(this);
diff --git a/chips/internal/trailing-icons.ts b/chips/internal/trailing-icons.ts
index 2ffd24f3d4..b8ceb99766 100644
--- a/chips/internal/trailing-icons.ts
+++ b/chips/internal/trailing-icons.ts
@@ -9,7 +9,7 @@ import '../../ripple/ripple.js';
 
 import {html, nothing} from 'lit';
 
-import {Chip} from './chip.js';
+import {MultiActionChip} from './multi-action-chip.js';
 
 interface RemoveButtonProperties {
   ariaLabel: string;
@@ -45,8 +45,8 @@ export function renderRemoveButton({
   `;
 }
 
-function handleRemoveClick(this: Chip, event: Event) {
-  if (this.disabled) {
+function handleRemoveClick(this: MultiActionChip, event: Event) {
+  if (this.disabled || this.hasSlottedTrailingIcon) {
     return;
   }
 

From 76883cd420a058dfa9c71c887605e890233ff53b Mon Sep 17 00:00:00 2001
From: vdegenne <vdegenne@gmail.com>
Date: Sat, 9 Dec 2023 11:39:31 +0100
Subject: [PATCH 4/6] feat(chip): trailing remove icon can now be customized

---
 chips/internal/_trailing-icon.scss  | 2 +-
 chips/internal/filter-chip.ts       | 4 ++--
 chips/internal/multi-action-chip.ts | 9 ---------
 chips/internal/trailing-icons.ts    | 4 ++--
 4 files changed, 5 insertions(+), 14 deletions(-)

diff --git a/chips/internal/_trailing-icon.scss b/chips/internal/_trailing-icon.scss
index 8b7a5c3629..316bf584d9 100644
--- a/chips/internal/_trailing-icon.scss
+++ b/chips/internal/_trailing-icon.scss
@@ -35,7 +35,7 @@
     width: var(--_icon-size);
   }
 
-  [name="trailing-icon"]::slotted(md-icon) {
+  [name="remove-trailing-icon"]::slotted(md-icon) {
      --md-icon-size: var(--_icon-size);
      color: inherit;
   }
diff --git a/chips/internal/filter-chip.ts b/chips/internal/filter-chip.ts
index daf37a149d..ef32cacf18 100644
--- a/chips/internal/filter-chip.ts
+++ b/chips/internal/filter-chip.ts
@@ -22,7 +22,7 @@ import {renderRemoveButton} from './trailing-icons.js';
  */
 export class FilterChip extends MultiActionChip {
   @property({type: Boolean}) elevated = false;
-  @property({type: Boolean, attribute: 'has-trailing'}) hasTrailing = false;
+  @property({type: Boolean}) removable = false;
   @property({type: Boolean, reflect: true}) selected = false;
 
   /**
@@ -84,7 +84,7 @@ export class FilterChip extends MultiActionChip {
   }
 
   protected override renderTrailingAction(focusListener: EventListener) {
-    if (this.hasTrailing) {
+    if (this.removable) {
       return renderRemoveButton({
         focusListener,
         ariaLabel: this.ariaLabelRemove,
diff --git a/chips/internal/multi-action-chip.ts b/chips/internal/multi-action-chip.ts
index 6819d5ee06..21310c82db 100644
--- a/chips/internal/multi-action-chip.ts
+++ b/chips/internal/multi-action-chip.ts
@@ -42,15 +42,6 @@ export abstract class MultiActionChip extends Chip {
   protected abstract readonly primaryAction: HTMLElement | null;
   protected abstract readonly trailingAction: HTMLElement | null;
 
-  /**
-   * Getter used to determine if the user provided a trailing icon or not.
-   */
-  get hasSlottedTrailingIcon() {
-     const slot = this.shadowRoot.querySelector('slot[name="trailing-icon"]') as HTMLSlotElement;
-     // Default slot is not counted as one element.
-     return slot.assignedElements().length > 0;
-  }
-
   constructor() {
     super();
     this.handleTrailingActionFocus = this.handleTrailingActionFocus.bind(this);
diff --git a/chips/internal/trailing-icons.ts b/chips/internal/trailing-icons.ts
index b8ceb99766..14dc5f174e 100644
--- a/chips/internal/trailing-icons.ts
+++ b/chips/internal/trailing-icons.ts
@@ -34,7 +34,7 @@ export function renderRemoveButton({
       @focus=${focusListener}>
       <md-focus-ring part="trailing-focus-ring"></md-focus-ring>
       <md-ripple ?disabled=${disabled}></md-ripple>
-      <slot name="trailing-icon" class="trailing icon">
+      <slot name="remove-trailing-icon" class="trailing icon">
         <svg viewBox="0 96 960 960" aria-hidden="true">
           <path
             d="m249 849-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z" />
@@ -46,7 +46,7 @@ export function renderRemoveButton({
 }
 
 function handleRemoveClick(this: MultiActionChip, event: Event) {
-  if (this.disabled || this.hasSlottedTrailingIcon) {
+  if (this.disabled) {
     return;
   }
 

From 49a6be141b1f4a28c27b0982e0123ede7825a19d Mon Sep 17 00:00:00 2001
From: vdegenne <vdegenne@gmail.com>
Date: Tue, 12 Dec 2023 09:45:52 +0100
Subject: [PATCH 5/6] feat(chip): trailing remove icon can now be customized

---
 chips/internal/_trailing-icon.scss |  5 -----
 chips/internal/chip.ts             |  1 +
 chips/internal/trailing-icons.ts   | 18 ++++++++++--------
 3 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/chips/internal/_trailing-icon.scss b/chips/internal/_trailing-icon.scss
index 316bf584d9..9bde3704a4 100644
--- a/chips/internal/_trailing-icon.scss
+++ b/chips/internal/_trailing-icon.scss
@@ -35,11 +35,6 @@
     width: var(--_icon-size);
   }
 
-  [name="remove-trailing-icon"]::slotted(md-icon) {
-     --md-icon-size: var(--_icon-size);
-     color: inherit;
-  }
-
   :where(:hover) .trailing.icon {
     color: var(--_hover-trailing-icon-color);
   }
diff --git a/chips/internal/chip.ts b/chips/internal/chip.ts
index ae71a92ada..9fe7c26f5f 100644
--- a/chips/internal/chip.ts
+++ b/chips/internal/chip.ts
@@ -87,6 +87,7 @@ export abstract class Chip extends LitElement {
       <div class="container ${classMap(this.getContainerClasses())}">
         ${this.renderContainerContent()}
       </div>
+      <slot></slot>
     `;
   }
 
diff --git a/chips/internal/trailing-icons.ts b/chips/internal/trailing-icons.ts
index 14dc5f174e..86741003aa 100644
--- a/chips/internal/trailing-icons.ts
+++ b/chips/internal/trailing-icons.ts
@@ -9,7 +9,7 @@ import '../../ripple/ripple.js';
 
 import {html, nothing} from 'lit';
 
-import {MultiActionChip} from './multi-action-chip.js';
+import {Chip} from './chip.js';
 
 interface RemoveButtonProperties {
   ariaLabel: string;
@@ -34,18 +34,20 @@ export function renderRemoveButton({
       @focus=${focusListener}>
       <md-focus-ring part="trailing-focus-ring"></md-focus-ring>
       <md-ripple ?disabled=${disabled}></md-ripple>
-      <slot name="remove-trailing-icon" class="trailing icon">
-        <svg viewBox="0 96 960 960" aria-hidden="true">
-          <path
-            d="m249 849-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z" />
-        </svg>
-      </slot>
+      <span class="trailing icon">
+        <slot name="remove-trailing-icon">
+          <svg viewBox="0 96 960 960" aria-hidden="true">
+            <path
+              d="m249 849-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z" />
+          </svg>
+        </slot>
+      </span>
       <span class="touch"></span>
     </button>
   `;
 }
 
-function handleRemoveClick(this: MultiActionChip, event: Event) {
+function handleRemoveClick(this: Chip, event: Event) {
   if (this.disabled) {
     return;
   }

From b44b90c82643be1d0ae9c24d2450081db13dc04d Mon Sep 17 00:00:00 2001
From: vdegenne <vdegenne@gmail.com>
Date: Tue, 12 Dec 2023 09:46:50 +0100
Subject: [PATCH 6/6] feat(chip): trailing remove icon can now be customized

---
 chips/internal/chip.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/chips/internal/chip.ts b/chips/internal/chip.ts
index 9fe7c26f5f..ae71a92ada 100644
--- a/chips/internal/chip.ts
+++ b/chips/internal/chip.ts
@@ -87,7 +87,6 @@ export abstract class Chip extends LitElement {
       <div class="container ${classMap(this.getContainerClasses())}">
         ${this.renderContainerContent()}
       </div>
-      <slot></slot>
     `;
   }