@angular/material 20.0.4 → 20.1.0-next.1

package/list/_list-theme.scss

@@ -37,25 +37,30 @@
     .mat-accent {
       .mdc-list-item__start,
       .mdc-list-item__end {
-        @include token-utils.create-token-values-mixed(m2-radio.get-color-tokens($theme, accent));
+        @include token-utils.create-token-values-mixed(
+            m2-radio.get-color-tokens($theme, secondary));
       }
     }
 
     .mat-warn {
       .mdc-list-item__start,
       .mdc-list-item__end {
-        @include token-utils.create-token-values-mixed(m2-radio.get-color-tokens($theme, warn));
+        @include token-utils.create-token-values-mixed(
+            m2-radio.get-color-tokens($theme, error));
       }
     }
 
     .mat-mdc-list-option {
-      @include token-utils.create-token-values-mixed(m2-checkbox.get-color-tokens($theme, primary));
+      @include token-utils.create-token-values-mixed(
+          m2-checkbox.get-color-tokens($theme, primary));
     }
     .mat-mdc-list-option.mat-accent {
-      @include token-utils.create-token-values-mixed(m2-checkbox.get-color-tokens($theme, accent));
+      @include token-utils.create-token-values-mixed(
+          m2-checkbox.get-color-tokens($theme, secondary));
     }
     .mat-mdc-list-option.mat-warn {
-      @include token-utils.create-token-values-mixed(m2-checkbox.get-color-tokens($theme, warn));
+      @include token-utils.create-token-values-mixed(
+          m2-checkbox.get-color-tokens($theme, error));
     }
 
     // There is no token for activated color on nav list.

package/list/_m2-list.scss

@@ -1,7 +1,6 @@
-@use '../core/tokens/m2-utils';
-@use '../core/style/sass-utils';
 @use '../core/theming/inspection';
 @use 'sass:map';
+@use '../core/tokens/m2-utils';
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
@@ -27,32 +26,26 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
-  $is-dark: inspection.get-theme-type($theme) == dark;
-  $foreground-base: inspection.get-theme-color($theme, foreground, base);
-  $foreground-text: inspection.get-theme-color($theme, foreground, text);
-  $foreground-secondary-text: inspection.get-theme-color($theme, foreground, secondary-text);
-  $foreground-hint-text: inspection.get-theme-color($theme, foreground, hint-text);
-  $text-icon-on-background: sass-utils.safe-color-change(
-      $foreground-base, $alpha: if($is-dark, 0.5, 0.38));
+  $system: m2-utils.get-system($theme);
 
   @return (
-    list-list-item-label-text-color: $foreground-text,
-    list-list-item-supporting-text-color: $foreground-secondary-text,
-    list-list-item-leading-icon-color: $text-icon-on-background,
-    list-list-item-trailing-supporting-text-color: $foreground-hint-text,
-    list-list-item-trailing-icon-color: $text-icon-on-background,
-    list-list-item-selected-trailing-icon-color: $text-icon-on-background,
-    list-list-item-disabled-label-text-color: $foreground-base,
-    list-list-item-disabled-leading-icon-color: $foreground-base,
-    list-list-item-disabled-trailing-icon-color: $foreground-base,
-    list-list-item-hover-label-text-color: $foreground-text,
-    list-list-item-hover-leading-icon-color: $text-icon-on-background,
-    list-list-item-hover-state-layer-color: $foreground-base,
-    list-list-item-hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
-    list-list-item-hover-trailing-icon-color: $text-icon-on-background,
-    list-list-item-focus-label-text-color: $foreground-text,
-    list-list-item-focus-state-layer-color: $foreground-base,
-    list-list-item-focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
+    list-list-item-label-text-color: map.get($system, on-surface),
+    list-list-item-supporting-text-color: map.get($system, on-surface-variant),
+    list-list-item-leading-icon-color: map.get($system, on-surface-variant),
+    list-list-item-trailing-supporting-text-color: map.get($system, on-surface-variant),
+    list-list-item-trailing-icon-color: map.get($system, on-surface-variant),
+    list-list-item-selected-trailing-icon-color: map.get($system, on-surface-variant),
+    list-list-item-disabled-label-text-color: map.get($system, on-surface),
+    list-list-item-disabled-leading-icon-color: map.get($system, on-surface),
+    list-list-item-disabled-trailing-icon-color: map.get($system, on-surface),
+    list-list-item-hover-label-text-color: map.get($system, on-surface),
+    list-list-item-hover-leading-icon-color: map.get($system, on-surface-variant),
+    list-list-item-hover-state-layer-color: map.get($system, on-surface),
+    list-list-item-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
+    list-list-item-hover-trailing-icon-color: map.get($system, on-surface-variant),
+    list-list-item-focus-label-text-color: map.get($system, on-surface),
+    list-list-item-focus-state-layer-color: map.get($system, on-surface),
+    list-list-item-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
   );
 }
 
@@ -121,14 +114,3 @@
     ), $scale),
   );
 }
-
-// Combines the tokens generated by the above functions into a single map with placeholder values.
-// This is used to create token slots.
-@function get-token-slots() {
-  @return sass-utils.deep-merge-all(
-      get-unthemable-tokens(),
-      get-color-tokens(m2-utils.$placeholder-color-config),
-      get-typography-tokens(m2-utils.$placeholder-typography-config),
-      get-density-tokens(m2-utils.$placeholder-density-config)
-  );
-}

package/menu/_m2-menu.scss

@@ -1,7 +1,8 @@
-@use '../core/tokens/m2-utils';
 @use '../core/theming/inspection';
-@use '../core/style/sass-utils';
 @use '../core/style/elevation';
+@use 'sass:map';
+@use '../core/tokens/m2-utils';
+@use '../core/tokens/m3-utils';
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
@@ -25,18 +26,17 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
-  $is-dark: inspection.get-theme-type($theme) == dark;
-  $active-state-layer-color: inspection.get-theme-color($theme, foreground, base,
-    if($is-dark, 0.08, 0.04));
-  $text-color: inspection.get-theme-color($theme, foreground, text);
+  $system: m2-utils.get-system($theme);
 
   @return (
-    menu-item-label-text-color: $text-color,
-    menu-item-icon-color: $text-color,
-    menu-item-hover-state-layer-color: $active-state-layer-color,
-    menu-item-focus-state-layer-color: $active-state-layer-color,
-    menu-container-color: inspection.get-theme-color($theme, background, card),
-    menu-divider-color: inspection.get-theme-color($theme, foreground, divider),
+    menu-item-label-text-color: map.get($system, on-surface),
+    menu-item-icon-color: map.get($system, on-surface),
+    menu-item-hover-state-layer-color: m3-utils.color-with-opacity(
+        map.get($system, on-surface), map.get($system, hover-state-layer-opacity)),
+    menu-item-focus-state-layer-color: m3-utils.color-with-opacity(
+        map.get($system, on-surface), map.get($system, focus-state-layer-opacity)),
+    menu-container-color: map.get($system, surface),
+    menu-divider-color: map.get($system, outline),
   );
 }
 
@@ -55,14 +55,3 @@
 @function get-density-tokens($theme) {
   @return ();
 }
-
-// Combines the tokens generated by the above functions into a single map with placeholder values.
-// This is used to create token slots.
-@function get-token-slots() {
-  @return sass-utils.deep-merge-all(
-      get-unthemable-tokens(),
-      get-color-tokens(m2-utils.$placeholder-color-config),
-      get-typography-tokens(m2-utils.$placeholder-typography-config),
-      get-density-tokens(m2-utils.$placeholder-density-config)
-  );
-}

package/menu/index.d.ts

@@ -404,6 +404,8 @@ declare class MatMenuTrigger implements AfterContentInit, OnDestroy {
     toggleMenu(): void;
     /** Opens the menu. */
     openMenu(): void;
+    /** Internal method to open menu providing option to auto focus on first item. */
+    private _openMenu;
     /** Closes the menu. */
     closeMenu(): void;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/material",
-  "version": "20.0.4",
+  "version": "20.1.0-next.1",
   "description": "Angular Material",
   "repository": {
     "type": "git",
@@ -353,11 +353,11 @@
     }
   },
   "peerDependencies": {
-    "@angular/cdk": "20.0.4",
-    "@angular/core": "^20.0.0 || ^21.0.0",
-    "@angular/common": "^20.0.0 || ^21.0.0",
-    "@angular/forms": "^20.0.0 || ^21.0.0",
-    "@angular/platform-browser": "^20.0.0 || ^21.0.0",
+    "@angular/cdk": "20.1.0-next.1",
+    "@angular/core": "^20.0.0-0 || ^20.1.0-0 || ^20.2.0-0 || ^20.3.0-0 || ^21.0.0-0",
+    "@angular/common": "^20.0.0-0 || ^20.1.0-0 || ^20.2.0-0 || ^20.3.0-0 || ^21.0.0-0",
+    "@angular/forms": "^20.0.0-0 || ^20.1.0-0 || ^20.2.0-0 || ^20.3.0-0 || ^21.0.0-0",
+    "@angular/platform-browser": "^20.0.0-0 || ^20.1.0-0 || ^20.2.0-0 || ^20.3.0-0 || ^21.0.0-0",
     "rxjs": "^6.5.3 || ^7.4.0"
   },
   "dependencies": {

package/paginator/_m2-paginator.scss

@@ -1,9 +1,9 @@
 @use 'sass:math';
 @use 'sass:map';
-@use '../core/tokens/m2-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
-@use '../core/style/sass-utils';
+@use '../core/tokens/m2-utils';
+@use '../core/tokens/m3-utils';
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
@@ -13,13 +13,13 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
-  $foreground-base: inspection.get-theme-color($theme, foreground, base);
+  $system: m2-utils.get-system($theme);
 
   @return (
-    paginator-container-text-color: sass-utils.safe-color-change($foreground-base, $alpha: 0.87),
-    paginator-container-background-color: inspection.get-theme-color($theme, background, card),
-    paginator-enabled-icon-color: sass-utils.safe-color-change($foreground-base, $alpha: 0.54),
-    paginator-disabled-icon-color: sass-utils.safe-color-change($foreground-base, $alpha: 0.12),
+    paginator-container-text-color: map.get($system, on-surface),
+    paginator-container-background-color: map.get($system, surface),
+    paginator-enabled-icon-color: map.get($system, on-surface-variant),
+    paginator-disabled-icon-color: m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
   );
 }
 
@@ -74,14 +74,3 @@
     paginator-touch-target-display: if($density-scale < -2, none, block),
   );
 }
-
-// Combines the tokens generated by the above functions into a single map with placeholder values.
-// This is used to create token slots.
-@function get-token-slots() {
-  @return sass-utils.deep-merge-all(
-      get-unthemable-tokens(),
-      get-color-tokens(m2-utils.$placeholder-color-config),
-      get-typography-tokens(m2-utils.$placeholder-typography-config),
-      get-density-tokens(m2-utils.$placeholder-density-config)
-  );
-}

package/paginator/testing/index.d.ts

@@ -1,9 +1,8 @@
 import * as _angular_cdk_testing from '@angular/cdk/testing';
 import { BaseHarnessFilters, ComponentHarness, ComponentHarnessConstructor, HarnessPredicate } from '@angular/cdk/testing';
 import { MatSelectHarness } from '../../select/testing/index.js';
-import '../../option-harness.d-IqsW95GR.js';
-import '../../core/testing/index.js';
-import '../../form-field/testing/control/index.js';
+import '@angular/material/core/testing';
+import '@angular/material/form-field/testing/control';
 
 /** A set of criteria that can be used to filter a list of `MatPaginatorHarness` instances. */
 interface PaginatorHarnessFilters extends BaseHarnessFilters {