fix(material/list): tokenize active-indicator (#28586)

* fix(material/list): tokenize active-indicator

Add active state for MatNavList. Implement active state by implementing 2
tokens under mat prefix.

 - mat-list-active-indicator-color
 - mat-list-active-indicator-shape

Only affects list items that are anchor tags.

Does not intend to make visual changes to M2.

* !fixup fix(material/list): tokenize active-indicator

Author: zarend

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

@@ -110,7 +110,7 @@ <h2>Dense lists</h2>
     <h2>Nav lists</h2>
     <mat-nav-list>
       @for (link of links; track link) {
-        <a mat-list-item [href]="link.href" [activated]="isActivated(link.href)">
+        <a mat-list-item [href]="link.href" [activated]="isActivated(link)">
           {{ link.name }}
         </a>
       }
@@ -120,7 +120,7 @@ <h2>Nav lists</h2>
     }
     <mat-nav-list>
       @for (link of links; track link; let last = $last) {
-        <a mat-list-item [href]="link.href" [activated]="isActivated(link.href)">
+        <a mat-list-item [href]="link.href" [activated]="isActivated(link)">
           <mat-icon matListItemIcon>folder</mat-icon>
           <span matListItemTitle>{{ link.name }}</span>
         </a>

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

@@ -13,6 +13,11 @@ import {MatListModule, MatListOptionTogglePosition} from '@angular/material/list
 import {MatIconModule} from '@angular/material/icon';
 import {CommonModule} from '@angular/common';
 
+interface Link {
+  name: string;
+  href: string;
+}
+
 @Component({
   selector: 'list-demo',
   templateUrl: 'list-demo.html',
@@ -52,7 +57,7 @@ export class ListDemo {
     },
   ];
 
-  links: {name: string; href: string}[] = [
+  links: Link[] = [
     {name: 'Inbox', href: '/list#inbox'},
     {name: 'Outbox', href: '/list#outbox'},
     {name: 'Spam', href: '/list#spam'},
@@ -85,7 +90,7 @@ export class ListDemo {
     alert(msg);
   }
 
-  isActivated(href: string) {
-    return window.location.href === new URL(href, window.location.href).toString();
+  isActivated(link: Link) {
+    return `${window.location.pathname}${window.location.hash}` === link.href;
   }
 }

src/material-experimental/theming/_custom-tokens.scss

@@ -657,6 +657,17 @@
   ));
 }
 
+/// Generates custom tokens for the mat-list.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @return {Map} A set of custom tokens for the mat-list
+@function list($systems, $exclude-hardcoded) {
+  @return (
+    active-indicator-color: map.get($systems, md-sys-color, secondary-container),
+    active-indicator-shape: map.get($systems, md-sys-shape, corner-full),
+  );
+}
+
 /// Generates custom tokens for the mat-button.
 /// @param {Map} $systems The MDC system tokens
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values

src/material-experimental/theming/_m3-tokens.scss

@@ -836,6 +836,11 @@
       custom-tokens.filled-button($systems, $exclude-hardcoded),
       $token-slots
     ),
+    _namespace-tokens(
+      (mat, list),
+      custom-tokens.list($systems, $exclude-hardcoded),
+      $token-slots
+    ),
     _namespace-tokens(
       // Note: in M3 the "protected" button is called "elevated".
       (mat, protected-button),

src/material/core/tokens/m2/mat/_list.scss

@@ -7,7 +7,11 @@ $prefix: (mat, list);
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
 @function get-unthemable-tokens() {
-  @return ();
+  @return (
+    // active indicator themable with M3
+    active-indicator-color: transparent,
+    active-indicator-shape: 0,
+  );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.

src/material/list/list.scss

@@ -206,4 +206,12 @@ mat-action-list button {
     @include token-utils.create-token-slot(margin-inline-start, list-item-leading-icon-start-space);
     @include token-utils.create-token-slot(margin-inline-end, list-item-leading-icon-end-space);
   }
+
+  a.mdc-list-item.mdc-list-item--activated {
+    @include token-utils.create-token-slot(background-color, active-indicator-color);
+    // active-indicator-shape overrides list-item-container-shape
+    &.mdc-list-item {
+      @include token-utils.create-token-slot(border-radius, active-indicator-shape);
+    }
+  }
 }