fix(material/list): spike on supporting list item with switch

src/dev-app/list/BUILD.bazel

@@ -13,6 +13,7 @@ ng_module(
         "//src/material/button",
         "//src/material/icon",
         "//src/material/list",
+        "//src/material/slide-toggle",
     ],
 )
 

src/dev-app/list/list-demo.html

@@ -2,6 +2,7 @@
 <h1>mat-list demo</h1>
 
 <button mat-raised-button (click)="thirdLine = !thirdLine">Show third line</button>
+<button mat-raised-button (click)="showSwitch = !showSwitch">Show switch</button>
 <button mat-raised-button (click)="showBoxes = !showBoxes">Show item boxes</button>
 
 <div class="demo-list" [class.demo-show-boxes]="showBoxes">
@@ -12,7 +13,10 @@ <h2>Normal lists</h2>
     <mat-list>
       <div mat-subheader>Items</div>
       @for (item of items; track item) {
-        <mat-list-item>{{item}}</mat-list-item>
+        <mat-list-item>
+          {{item}}
+          <mat-slide-toggle matListItemSwitch *ngIf="showSwitch"></mat-slide-toggle>
+        </mat-list-item>
       }
     </mat-list>
 
@@ -24,6 +28,7 @@ <h2>Normal lists</h2>
             <div matListItemLine>extra line</div>
           }
           <div matListItemLine>{{contact.headline}}</div>
+          <mat-slide-toggle matListItemSwitch *ngIf="showSwitch"></mat-slide-toggle>
         </mat-list-item>
       }
     </mat-list>

src/dev-app/list/list-demo.ts

@@ -12,13 +12,21 @@ import {MatButtonModule} from '@angular/material/button';
 import {MatListModule, MatListOptionTogglePosition} from '@angular/material/list';
 import {MatIconModule} from '@angular/material/icon';
 import {CommonModule} from '@angular/common';
+import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 
 @Component({
   selector: 'list-demo',
   templateUrl: 'list-demo.html',
   styleUrls: ['list-demo.css'],
   standalone: true,
-  imports: [CommonModule, FormsModule, MatButtonModule, MatIconModule, MatListModule],
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatButtonModule,
+    MatIconModule,
+    MatListModule,
+    MatSlideToggleModule,
+  ],
 })
 export class ListDemo {
   items: string[] = ['Pepper', 'Salt', 'Paprika'];
@@ -60,6 +68,7 @@ export class ListDemo {
   ];
 
   thirdLine = false;
+  showSwitch = false;
   showBoxes = false;
   infoClicked = false;
   selectionListDisabled = false;

src/material/list/list-item-sections.ts

@@ -52,6 +52,21 @@ export class MatListItemLine {
 })
 export class MatListItemMeta {}
 
+/**
+ * Directive matching an optional switch for list items.
+ *
+ * List items can reserve space at the end of an item to display a control,
+ * button or additional text content.
+ */
+@Directive({
+  selector: 'mat-slide-toggle[matListItemMeta]',
+  host: {
+    'class': 'mat-mdc-list-item-switch mdc-list-item__end',
+  },
+  standalone: true,
+})
+export class MatListItemSwitch {}
+
 /**
  * @docs-private
  *

src/material/list/list-item.html

@@ -10,6 +10,7 @@
 </span>
 
 <ng-content select="[matListItemMeta]"></ng-content>
+<ng-content select="[matListItemSwitch]"></ng-content>
 
 <ng-content select="mat-divider"></ng-content>
 

src/material/list/list-module.ts

@@ -20,6 +20,7 @@ import {
   MatListItemMeta,
   MatListItemAvatar,
   MatListItemIcon,
+  MatListItemSwitch,
 } from './list-item-sections';
 import {MatNavList} from './nav-list';
 import {MatSelectionList} from './selection-list';
@@ -44,6 +45,7 @@ import {ObserversModule} from '@angular/cdk/observers';
     MatListItemLine,
     MatListItemTitle,
     MatListItemMeta,
+    MatListItemSwitch,
   ],
   exports: [
     MatList,

src/material/list/list.ts

@@ -24,7 +24,12 @@ import {
 } from '@angular/core';
 import {MAT_RIPPLE_GLOBAL_OPTIONS, RippleGlobalOptions} from '@angular/material/core';
 import {MatListBase, MatListItemBase} from './list-base';
-import {MatListItemLine, MatListItemMeta, MatListItemTitle} from './list-item-sections';
+import {
+  MatListItemLine,
+  MatListItemMeta,
+  MatListItemSwitch,
+  MatListItemTitle,
+} from './list-item-sections';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {CdkObserveContent} from '@angular/cdk/observers';
 
@@ -59,6 +64,7 @@ export class MatList extends MatListBase {}
     '[class.mdc-list-item--with-leading-avatar]': '_avatars.length !== 0',
     '[class.mdc-list-item--with-leading-icon]': '_icons.length !== 0',
     '[class.mdc-list-item--with-trailing-meta]': '_meta.length !== 0',
+    '[class.mdc-list-item--with-trailing-switch]': '_switch.length !== 0',
     '[class._mat-animation-noopable]': '_noopAnimations',
     '[attr.aria-current]': '_getAriaCurrent()',
   },
@@ -72,6 +78,7 @@ export class MatListItem extends MatListItemBase {
   @ContentChildren(MatListItemLine, {descendants: true}) _lines: QueryList<MatListItemLine>;
   @ContentChildren(MatListItemTitle, {descendants: true}) _titles: QueryList<MatListItemTitle>;
   @ContentChildren(MatListItemMeta, {descendants: true}) _meta: QueryList<MatListItemMeta>;
+  @ContentChildren(MatListItemSwitch, {descendants: true}) _switch: QueryList<MatListItemSwitch>;
   @ViewChild('unscopedContent') _unscopedContent: ElementRef<HTMLSpanElement>;
   @ViewChild('text') _itemText: ElementRef<HTMLElement>;