@angular/material 20.0.2 → 20.1.0-next.0

package/form-field/testing/index.d.ts

@@ -1,10 +1,10 @@
-import { MatFormFieldControlHarness } from './control/index.js';
+import { M as MatFormFieldControlHarness } from '../../form-field-control-harness.d-BLvFBy6v.js';
 import { BaseHarnessFilters, ComponentHarness, ComponentHarnessConstructor, HarnessPredicate } from '@angular/cdk/testing';
-import { M as MatInputHarness } from '../../input-harness.d-8fkAAbu2.js';
+import { M as MatInputHarness } from '../../input-harness.d-DVI6ttzl.js';
 import { MatSelectHarness } from '../../select/testing/index.js';
-import { M as MatDatepickerInputHarness, g as MatDateRangeInputHarness } from '../../date-range-input-harness.d-CaEyN8dT.js';
-import '../../option-harness.d-IqsW95GR.js';
-import '../../core/testing/index.js';
+import { M as MatDatepickerInputHarness, g as MatDateRangeInputHarness } from '../../date-range-input-harness.d-CJ4r85Uf.js';
+import '@angular/material/form-field/testing/control';
+import '@angular/material/core/testing';
 
 /** A set of criteria that can be used to filter a list of `MatFormFieldHarness` instances. */
 interface FormFieldHarnessFilters extends BaseHarnessFilters {

package/form-field-control-harness.d-BLvFBy6v.d.ts

@@ -0,0 +1,18 @@
+import { ComponentHarness } from '@angular/cdk/testing';
+
+/**
+ * Base class for custom form-field control harnesses. Harnesses for
+ * custom controls with form-fields need to implement this interface.
+ */
+declare abstract class MatFormFieldControlHarness extends ComponentHarness {
+}
+/**
+ * Shared behavior for `MatFormFieldControlHarness` implementations
+ */
+declare abstract class MatFormFieldControlHarnessBase extends MatFormFieldControlHarness {
+    private readonly _floatingLabelSelector;
+    /** Gets the text content of the floating label, if it exists. */
+    getLabel(): Promise<string | null>;
+}
+
+export { MatFormFieldControlHarness as M, MatFormFieldControlHarnessBase as a };

package/grid-list/_m2-grid-list.scss

@@ -1,6 +1,4 @@
-@use '../core/tokens/m2-utils';
 @use '../core/theming/inspection';
-@use '../core/style/sass-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.
@@ -34,14 +32,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/icon/_m2-icon.scss

@@ -1,5 +1,3 @@
-@use '../core/tokens/m2-utils';
-@use '../core/style/sass-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.
@@ -29,14 +27,3 @@
     icon-color: $color,
   );
 }
-
-// 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/input/testing/index.d.ts

@@ -1,9 +1,10 @@
-export { I as InputHarnessFilters, M as MatInputHarness } from '../../input-harness.d-8fkAAbu2.js';
+export { I as InputHarnessFilters, M as MatInputHarness } from '../../input-harness.d-DVI6ttzl.js';
 import { BaseHarnessFilters, ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
-import { MatFormFieldControlHarness } from '../../form-field/testing/control/index.js';
+import { a as MatFormFieldControlHarnessBase } from '../../form-field-control-harness.d-BLvFBy6v.js';
+import { MatFormFieldControlHarnessFilters } from '@angular/material/form-field/testing/control';
 
 /** A set of criteria that can be used to filter a list of `MatNativeSelectHarness` instances. */
-interface NativeSelectHarnessFilters extends BaseHarnessFilters {
+interface NativeSelectHarnessFilters extends MatFormFieldControlHarnessFilters {
 }
 /** A set of criteria that can be used to filter a list of `MatNativeOptionHarness` instances. */
 interface NativeOptionHarnessFilters extends BaseHarnessFilters {
@@ -34,7 +35,7 @@ declare class MatNativeOptionHarness extends ComponentHarness {
 }
 
 /** Harness for interacting with a native `select` in tests. */
-declare class MatNativeSelectHarness extends MatFormFieldControlHarness {
+declare class MatNativeSelectHarness extends MatFormFieldControlHarnessBase {
     static hostSelector: string;
     /**
      * Gets a `HarnessPredicate` that can be used to search for a `MatNativeSelectHarness` that meets

package/{input-harness.d-8fkAAbu2.d.ts → input-harness.d-DVI6ttzl.d.ts}

@@ -1,8 +1,8 @@
-import { BaseHarnessFilters, HarnessPredicate } from '@angular/cdk/testing';
-import { MatFormFieldControlHarness } from './form-field/testing/control/index.js';
+import { HarnessPredicate } from '@angular/cdk/testing';
+import { MatFormFieldControlHarnessFilters, MatFormFieldControlHarnessBase } from '@angular/material/form-field/testing/control';
 
 /** A set of criteria that can be used to filter a list of `MatInputHarness` instances. */
-interface InputHarnessFilters extends BaseHarnessFilters {
+interface InputHarnessFilters extends MatFormFieldControlHarnessFilters {
     /** Filters based on the value of the input. */
     value?: string | RegExp;
     /** Filters based on the placeholder text of the input. */
@@ -10,7 +10,7 @@ interface InputHarnessFilters extends BaseHarnessFilters {
 }
 
 /** Harness for interacting with a standard Material inputs in tests. */
-declare class MatInputHarness extends MatFormFieldControlHarness {
+declare class MatInputHarness extends MatFormFieldControlHarnessBase {
     static hostSelector: string;
     /**
      * Gets a `HarnessPredicate` that can be used to search for a `MatInputHarness` that meets

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,30 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
+  $system: m2-utils.get-system($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));
+  $text-icon-on-background:
+      inspection.get-theme-color($theme, foreground, base, if($is-dark, 0.5, 0.38));
 
   @return (
-    list-list-item-label-text-color: $foreground-text,
-    list-list-item-supporting-text-color: $foreground-secondary-text,
+    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: $text-icon-on-background,
-    list-list-item-trailing-supporting-text-color: $foreground-hint-text,
+    list-list-item-trailing-supporting-text-color: map.get($system, on-surface-variant),
     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-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: $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-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: $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-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 +118,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,6 +1,4 @@
-@use '../core/tokens/m2-utils';
 @use '../core/theming/inspection';
-@use '../core/style/sass-utils';
 @use '../core/style/elevation';
 
 // Tokens that can't be configured through Angular Material's current theming API,
@@ -28,15 +26,14 @@
   $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);
 
   @return (
-    menu-item-label-text-color: $text-color,
-    menu-item-icon-color: $text-color,
+    menu-item-label-text-color: inspection.get-theme-color($theme, system, on-surface),
+    menu-item-icon-color: inspection.get-theme-color($theme, system, on-surface),
     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-container-color: inspection.get-theme-color($theme, system, surface),
+    menu-divider-color: inspection.get-theme-color($theme, system, outline),
   );
 }
 
@@ -55,14 +52,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.2",
+  "version": "20.1.0-next.0",
   "description": "Angular Material",
   "repository": {
     "type": "git",
@@ -353,11 +353,11 @@
     }
   },
   "peerDependencies": {
-    "@angular/cdk": "20.0.2",
-    "@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.0",
+    "@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,8 @@
 @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';
 
 // 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 +12,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: inspection.get-theme-color($theme, foreground, base, 0.12),
   );
 }
 
@@ -74,14 +73,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 {