Merge branch 'angular:main' into slide-toggle

adolgachev · web-flow · commit 5eae231bb345 · 2025-12-10T15:00:23.000-08:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,37 @@
+<a name="21.1.0-next.2"></a>
+# 21.1.0-next.2 "plastic-monkey" (2025-12-10)
+### cdk
+| Commit | Type | Description |
+| -- | -- | -- |
+| [439d1f92a8](https://github.com/angular/components/commit/439d1f92a81246dc77be1e19c0296a1740511fc6) | feat | **table:** add virtual scrolling support |
+| [67f213a351](https://github.com/angular/components/commit/67f213a3510b09e0a3fec3054052f49d0c02be00) | fix | **a11y:** add `@angular/platform-browser` to peer dependencies ([#32471](https://github.com/angular/components/pull/32471)) |
+| [789274f423](https://github.com/angular/components/commit/789274f423581235e97948c708d0bb2d42e60b11) | fix | **menu:** allow user to pass selector for transform origin ([#32462](https://github.com/angular/components/pull/32462)) |
+| [52720a3688](https://github.com/angular/components/commit/52720a368855b1fd2baaab8263341060a77a7173) | fix | **overlay:** error when attempting to attach disposed overlay ([#32489](https://github.com/angular/components/pull/32489)) |
+### material
+| Commit | Type | Description |
+| -- | -- | -- |
+| [ed7e1dab2f](https://github.com/angular/components/commit/ed7e1dab2f3bc4acc849169bd65d5c44c219242f) | fix | **core:** default secondary color for focus indicator ([#32491](https://github.com/angular/components/pull/32491)) |
+| [29a8a2fddc](https://github.com/angular/components/commit/29a8a2fddcc67ac82fbc9c6d744959945f5ae139) | fix | **datepicker:** value reset when invalid value is entered using signal forms ([#32485](https://github.com/angular/components/pull/32485)) |
+| [1fab386620](https://github.com/angular/components/commit/1fab386620dd0541d928c3272c403d52f1192d41) | fix | **table:** fixed layout not working ([#32494](https://github.com/angular/components/pull/32494)) |
+
+<!-- CHANGELOG SPLIT MARKER -->
+
+<a name="21.0.3"></a>
+# 21.0.3 "plastic-moose" (2025-12-10)
+### cdk
+| Commit | Type | Description |
+| -- | -- | -- |
+| [fd2213c5e7](https://github.com/angular/components/commit/fd2213c5e742697da4d7f68d8e4040f6eaeadfff) | fix | **menu:** allow user to pass selector for transform origin ([#32462](https://github.com/angular/components/pull/32462)) |
+| [09ec44973f](https://github.com/angular/components/commit/09ec44973f8993b2a131aff30a0d68a45067f1ea) | fix | **overlay:** error when attempting to attach disposed overlay ([#32489](https://github.com/angular/components/pull/32489)) |
+### material
+| Commit | Type | Description |
+| -- | -- | -- |
+| [151322f3b3](https://github.com/angular/components/commit/151322f3b3dd96e66f923dc4b0b4f81226ee44e6) | fix | **core:** default secondary color for focus indicator ([#32491](https://github.com/angular/components/pull/32491)) |
+| [b1287cf9a6](https://github.com/angular/components/commit/b1287cf9a64a0663ac6a5ce3222a695cd502b8bc) | fix | **datepicker:** value reset when invalid value is entered using signal forms ([#32485](https://github.com/angular/components/pull/32485)) |
+| [f4af3981b6](https://github.com/angular/components/commit/f4af3981b64bfca7cfe4ea1413c40446731ff3fe) | fix | **table:** fixed layout not working ([#32494](https://github.com/angular/components/pull/32494)) |
+
+<!-- CHANGELOG SPLIT MARKER -->
+
 <a name="21.1.0-next.1"></a>
 # 21.1.0-next.1 "babingtonite-blinds" (2025-12-03)
 ### aria
diff --git a/package.json b/package.json
@@ -53,7 +53,7 @@
     "ci-docs-monitor-test": "node --no-warnings=ExperimentalWarning --loader ts-node/esm/transpile-only scripts/docs-deploy/monitoring/ci-test.mts",
     "prepare": "husky"
   },
-  "version": "21.1.0-next.1",
+  "version": "21.1.0-next.2",
   "dependencies": {
     "@angular-devkit/core": "catalog:",
     "@angular-devkit/schematics": "catalog:",
diff --git a/src/material/button/_button-base.scss b/src/material/button/_button-base.scss
@@ -56,7 +56,7 @@
     }
   }
 
-  &:focus > .mat-focus-indicator::before {
+  &:focus-visible > .mat-focus-indicator::before {
     content: '';
 
     @if ($focus-indicator-inherits-shape) {
diff --git a/src/material/checkbox/checkbox.scss b/src/material/checkbox/checkbox.scss
@@ -105,6 +105,6 @@ $fallbacks: m3-checkbox.get-tokens();
 
 // For checkboxes render the focus indicator when we know
 // the hidden input is focused (slightly different for each control).
-.mdc-checkbox__native-control:focus ~ .mat-focus-indicator::before {
+.mdc-checkbox__native-control:focus-visible ~ .mat-focus-indicator::before {
   content: '';
 }
diff --git a/src/material/chips/chip.scss b/src/material/chips/chip.scss
@@ -737,7 +737,7 @@ $fallbacks: m3-chip.get-tokens();
 
 // The chip has multiple focus targets so we have to put the indicator on
 // a separate element, rather than on the focusable element itself.
-.mat-mdc-chip-action:focus .mat-focus-indicator::before {
+.mat-mdc-chip-action:focus-visible .mat-focus-indicator::before {
   content: '';
 }
 
diff --git a/src/material/core/focus-indicators/_private.scss b/src/material/core/focus-indicators/_private.scss
@@ -28,7 +28,7 @@ $default-border-radius: 4px;
 
     // By default, render the focus indicator when the focus indicator host element takes focus.
     // Defining a pseudo element's content will cause it to render.
-    &:focus::before {
+    &:focus-visible::before {
       content: '';
     }
   }
diff --git a/src/material/datepicker/calendar.scss b/src/material/datepicker/calendar.scss
@@ -132,7 +132,7 @@ $fallbacks: m3-datepicker.get-tokens();
 
 // For calendar cells, render the focus indicator when the parent cell is
 // focused.
-.mat-calendar-body-cell:focus .mat-focus-indicator::before {
+.mat-calendar-body-cell:focus-visible .mat-focus-indicator::before {
   content: '';
 }
 
diff --git a/src/material/form-field/_mdc-text-field-structure.scss b/src/material/form-field/_mdc-text-field-structure.scss
@@ -369,6 +369,8 @@ $fallbacks: m3-form-field.get-tokens();
     box-sizing: border-box;
     height: 100%;
     pointer-events: none;
+    // Reset border coming from something like Tailwind (see #32511).
+    border: none;
     border-top: 1px solid;
     border-bottom: 1px solid;
 
diff --git a/src/material/list/list.scss b/src/material/list/list.scss
@@ -131,7 +131,7 @@ a.mdc-list-item--activated {
 
   // For list items, render the focus indicator when the parent
   // listem item is focused.
-  &:focus > .mat-focus-indicator::before {
+  &:focus-visible > .mat-focus-indicator::before {
     content: '';
   }
 }
diff --git a/src/material/schematics/ng-add/index.spec.ts b/src/material/schematics/ng-add/index.spec.ts
@@ -4,7 +4,6 @@ import {SchematicTestRunner} from '@angular-devkit/schematics/testing';
 import {
   getProjectFromWorkspace,
   getProjectIndexFiles,
-  getProjectStyleFile,
   getProjectTargetOptions,
 } from '@angular/cdk/schematics';
 import {createTestApp, createTestLibrary, getFileContent} from '../../../cdk/schematics/testing';
@@ -87,7 +86,7 @@ describe('ng-add schematic', () => {
     const workspace = await readWorkspace(tree);
     const project = getProjectFromWorkspace(workspace, baseOptions.project);
 
-    expectProjectStyleFile(project, 'projects/material/src/custom-theme.scss');
+    expectProjectStyleFile(project, 'projects/material/src/material-theme.scss');
   });
 
   it('should support adding a custom theme', async () => {
@@ -121,12 +120,12 @@ describe('ng-add schematic', () => {
     );
     const workspace = await readWorkspace(tree);
     const project = getProjectFromWorkspace(workspace, baseOptions.project);
-    const expectedStylesPath = normalize(`/${project.root}/src/custom-theme.scss`);
+    const expectedStylesPath = normalize(`/${project.root}/src/material-theme.scss`);
 
     expect(tree.files)
       .withContext('Expected a custom theme file to be created')
       .toContain(expectedStylesPath);
-    expectProjectStyleFile(project, 'projects/material/src/custom-theme.scss');
+    expectProjectStyleFile(project, 'projects/material/src/material-theme.scss');
   });
 
   it('should add font links', async () => {
@@ -160,20 +159,6 @@ describe('ng-add schematic', () => {
     });
   });
 
-  it('should add material app styles', async () => {
-    const tree = await runner.runSchematic('ng-add-setup-project', baseOptions, appTree);
-    const workspace = await readWorkspace(tree);
-    const project = getProjectFromWorkspace(workspace, baseOptions.project);
-
-    const defaultStylesPath = getProjectStyleFile(project)!;
-    const htmlContent = tree.read(defaultStylesPath)!.toString();
-
-    expect(htmlContent).toContain('html, body { height: 100%; }');
-    expect(htmlContent).toContain(
-      'body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }',
-    );
-  });
-
   describe('custom project builders', () => {
     /** Overwrites a target builder for the workspace in the given tree */
     function overwriteTargetBuilder(tree: Tree, targetName: 'build' | 'test', newBuilder: string) {
@@ -223,15 +208,15 @@ describe('ng-add schematic', () => {
 
   describe('theme files', () => {
     it('should not overwrite existing custom theme files', async () => {
-      appTree.create('/projects/material/custom-theme.scss', 'custom-theme');
+      appTree.create('/projects/material/material-theme.scss', 'material-theme');
       const tree = await runner.runSchematic(
         'ng-add-setup-project',
         {...baseOptions, theme: 'azure-blue'},
         appTree,
       );
-      expect(tree.readContent('/projects/material/custom-theme.scss'))
+      expect(tree.readContent('/projects/material/material-theme.scss'))
         .withContext('Expected the old custom theme content to be unchanged.')
-        .toBe('custom-theme');
+        .toBe('material-theme');
     });
   });
 
@@ -277,7 +262,7 @@ describe('ng-add schematic', () => {
       const workspace = await readWorkspace(tree);
       const project = getProjectFromWorkspace(workspace, baseOptions.project);
 
-      expectProjectStyleFile(project, 'projects/material/src/custom-theme.scss');
+      expectProjectStyleFile(project, 'projects/material/src/material-theme.scss');
     });
   });
 
@@ -323,7 +308,7 @@ describe('ng-add schematic', () => {
       const workspace = await readWorkspace(tree);
       const project = getProjectFromWorkspace(workspace, baseOptions.project);
 
-      expectProjectStyleFile(project, 'projects/material/src/custom-theme.scss');
+      expectProjectStyleFile(project, 'projects/material/src/material-theme.scss');
     });
   });
 
@@ -360,7 +345,7 @@ describe('ng-add schematic', () => {
       const workspace = await readWorkspace(tree);
       const project = getProjectFromWorkspace(workspace, baseOptions.project);
 
-      expectProjectStyleFile(project, 'projects/material/src/custom-theme.scss');
+      expectProjectStyleFile(project, 'projects/material/src/material-theme.scss');
     });
   });
 });
diff --git a/src/material/schematics/ng-add/setup-project.ts b/src/material/schematics/ng-add/setup-project.ts
@@ -7,7 +7,7 @@
  */
 
 import {chain, Rule, SchematicContext, Tree} from '@angular-devkit/schematics';
-import {getProjectFromWorkspace, getProjectStyleFile} from '@angular/cdk/schematics';
+import {getProjectFromWorkspace} from '@angular/cdk/schematics';
 import {readWorkspace} from '@schematics/angular/utility';
 import {ProjectType} from '@schematics/angular/utility/workspace-models';
 import {addFontsToIndex} from './fonts/material-fonts';
@@ -25,11 +25,7 @@ export default function (options: Schema): Rule {
     const project = getProjectFromWorkspace(workspace, options.project);
 
     if (project.extensions['projectType'] === ProjectType.Application) {
-      return chain([
-        addThemeToAppStyles(options),
-        addFontsToIndex(options),
-        addMaterialAppStyles(options),
-      ]);
+      return chain([addThemeToAppStyles(options), addFontsToIndex(options)]);
     }
     context.logger.warn(
       'Angular Material has been set up in your workspace. There is no additional setup ' +
@@ -40,48 +36,3 @@ export default function (options: Schema): Rule {
     return;
   };
 }
-
-/**
- * Adds custom Material styles to the project style file. The custom CSS sets up the Roboto font
- * and reset the default browser body margin.
- */
-function addMaterialAppStyles(options: Schema) {
-  return async (host: Tree, context: SchematicContext) => {
-    const workspace = await readWorkspace(host);
-    const project = getProjectFromWorkspace(workspace, options.project);
-    const styleFilePath = getProjectStyleFile(project);
-    const logger = context.logger;
-
-    if (!styleFilePath) {
-      logger.error(`Could not find the default style file for this project.`);
-      logger.info(`Consider manually adding the Roboto font to your CSS.`);
-      logger.info(`More information at https://fonts.google.com/specimen/Roboto`);
-      return;
-    }
-
-    const buffer = host.read(styleFilePath);
-
-    if (!buffer) {
-      logger.error(
-        `Could not read the default style file within the project ` + `(${styleFilePath})`,
-      );
-      logger.info(`Please consider manually setting up the Roboto font.`);
-      return;
-    }
-
-    const htmlContent = buffer.toString();
-    const insertion =
-      '\n' +
-      `html, body { height: 100%; }\n` +
-      `body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }\n`;
-
-    if (htmlContent.includes(insertion)) {
-      return;
-    }
-
-    const recorder = host.beginUpdate(styleFilePath);
-
-    recorder.insertLeft(htmlContent.length, insertion);
-    host.commitUpdate(recorder);
-  };
-}
diff --git a/src/material/schematics/ng-add/theming/create-theme.ts b/src/material/schematics/ng-add/theming/create-theme.ts
@@ -6,9 +6,9 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-/** Create custom theme for the given application configuration. */
-export function createCustomTheme(userPaletteChoice: string): string {
-  const colorPalettes = new Map<string, {primary: string; tertiary: string}>([
+/** Create theme for the given application configuration. */
+export function createTheme(userPaletteChoice: string): string {
+  const colorPalettes = new Map([
     ['azure-blue', {primary: 'azure', tertiary: 'blue'}],
     ['rose-red', {primary: 'rose', tertiary: 'red'}],
     ['magenta-violet', {primary: 'magenta', tertiary: 'violet'}],
@@ -23,6 +23,7 @@ export function createCustomTheme(userPaletteChoice: string): string {
 @use '@angular/material' as mat;
 
 html {
+  height: 100%;
   @include mat.theme((
     color: (
       primary: mat.$${colorPalettes.get(userPaletteChoice)!.primary}-palette,
@@ -48,6 +49,7 @@ body {
 
   // Reset the user agent margin.
   margin: 0;
+  height: 100%;
 }
 `;
 }
diff --git a/src/material/schematics/ng-add/theming/theming.ts b/src/material/schematics/ng-add/theming/theming.ts
@@ -19,13 +19,13 @@ import {InsertChange} from '@schematics/angular/utility/change';
 import {ProjectDefinition, readWorkspace, updateWorkspace} from '@schematics/angular/utility';
 import {join} from 'path';
 import {Schema} from '../schema';
-import {createCustomTheme} from './create-custom-theme';
+import {createTheme} from './create-theme';
 
 /** Path segment that can be found in paths that refer to a prebuilt theme. */
 const prebuiltThemePathSegment = '@angular/material/prebuilt-themes';
 
 /** Default file name of the custom theme that can be generated. */
-const defaultCustomThemeFilename = 'custom-theme.scss';
+const defaultThemeFilename = 'material-theme.scss';
 
 /** Add pre-built styles to the main project style file. */
 export function addThemeToAppStyles(options: Schema): Rule {
@@ -40,15 +40,15 @@ export function addThemeToAppStyles(options: Schema): Rule {
       palettes = 'azure-blue';
     }
 
-    return insertCustomTheme(palettes, options.project, host, context.logger);
+    return insertTheme(palettes, options.project, host, context.logger);
   };
 }
 
 /**
- * Insert an Angular Material theme to project style file. If no valid style file could be found, a new
- * Scss file for the custom theme will be created.
+ * Insert an Angular Material theme to project style file. If no valid style file could be found,
+ * a new Sass file for the theme will be created.
  */
-async function insertCustomTheme(
+async function insertTheme(
   palettes: string,
   projectName: string,
   host: Tree,
@@ -57,7 +57,7 @@ async function insertCustomTheme(
   const workspace = await readWorkspace(host);
   const project = getProjectFromWorkspace(workspace, projectName);
   const stylesPath = getProjectStyleFile(project, 'scss');
-  const themeContent = createCustomTheme(palettes);
+  const themeContent = createTheme(palettes);
 
   if (!stylesPath) {
     if (!project.sourceRoot) {
@@ -69,16 +69,16 @@ async function insertCustomTheme(
 
     // Normalize the path through the devkit utilities because we want to avoid having
     // unnecessary path segments and windows backslash delimiters.
-    const customThemePath = normalize(join(project.sourceRoot, defaultCustomThemeFilename));
+    const themePath = normalize(join(project.sourceRoot, defaultThemeFilename));
 
-    if (host.exists(customThemePath)) {
-      logger.warn(`Cannot create a custom Angular Material theme because
-          ${customThemePath} already exists. Skipping theme generation.`);
+    if (host.exists(themePath)) {
+      logger.warn(`Cannot create an Angular Material theme because
+          ${themePath} already exists. Skipping theme generation.`);
       return noop();
     }
 
-    host.create(customThemePath, themeContent);
-    return addThemeStyleToTarget(projectName, 'build', customThemePath, logger);
+    host.create(themePath, themeContent);
+    return addThemeStyleToTarget(projectName, 'build', themePath, logger);
   }
 
   const insertion = new InsertChange(stylesPath, 0, themeContent);
@@ -122,10 +122,10 @@ function addThemeStyleToTarget(
         // theme file. If a custom theme is set up, we are not able to safely replace the custom
         // theme because these files can contain custom styles, while prebuilt themes are
         // always packaged and considered replaceable.
-        if (stylePath.includes(defaultCustomThemeFilename)) {
+        if (stylePath.includes(defaultThemeFilename)) {
           logger.error(
             `Could not add the selected theme to the CLI project ` +
-              `configuration because there is already a custom theme file referenced.`,
+              `configuration because there is already a theme file referenced.`,
           );
           logger.info(`Please manually add the following style file to your configuration:`);
           logger.info(`    ${assetPath}`);
diff --git a/src/material/stepper/step-header.scss b/src/material/stepper/step-header.scss
@@ -16,7 +16,7 @@ $fallbacks: m3-stepper.get-tokens();
 
   // Stepper headers have the focus indicator as a descendant,
   // because `::before` is used for other styling.
-  &:focus .mat-focus-indicator::before {
+  &:focus-visible .mat-focus-indicator::before {
     content: '';
   }
 

Original file line number	Diff line number	Diff line change
`@@ -56,7 +56,7 @@`
`56`	`56`	`}`
`57`	`57`	`}`
`58`	`58`
`59`		`- &:focus > .mat-focus-indicator::before {`
	`59`	`+ &:focus-visible > .mat-focus-indicator::before {`
`60`	`60`	`content: '';`
`61`	`61`
`62`	`62`	`@if ($focus-indicator-inherits-shape) {`
Original file line number	Diff line number	Diff line change
`@@ -105,6 +105,6 @@ $fallbacks: m3-checkbox.get-tokens();`
`105`	`105`
`106`	`106`	`// For checkboxes render the focus indicator when we know`
`107`	`107`	`// the hidden input is focused (slightly different for each control).`
`108`		`-.mdc-checkbox__native-control:focus ~ .mat-focus-indicator::before {`
	`108`	`+.mdc-checkbox__native-control:focus-visible ~ .mat-focus-indicator::before {`
`109`	`109`	`content: '';`
`110`	`110`	`}`
Original file line number	Diff line number	Diff line change
`@@ -737,7 +737,7 @@ $fallbacks: m3-chip.get-tokens();`
`737`	`737`
`738`	`738`	`// The chip has multiple focus targets so we have to put the indicator on`
`739`	`739`	`// a separate element, rather than on the focusable element itself.`
`740`		`-.mat-mdc-chip-action:focus .mat-focus-indicator::before {`
	`740`	`+.mat-mdc-chip-action:focus-visible .mat-focus-indicator::before {`
`741`	`741`	`content: '';`
`742`	`742`	`}`
`743`	`743`
Original file line number	Diff line number	Diff line change
`@@ -28,7 +28,7 @@ $default-border-radius: 4px;`
`28`	`28`
`29`	`29`	`// By default, render the focus indicator when the focus indicator host element takes focus.`
`30`	`30`	`// Defining a pseudo element's content will cause it to render.`
`31`		`- &:focus::before {`
	`31`	`+ &:focus-visible::before {`
`32`	`32`	`content: '';`
`33`	`33`	`}`
`34`	`34`	`}`
Original file line number	Diff line number	Diff line change
`@@ -132,7 +132,7 @@ $fallbacks: m3-datepicker.get-tokens();`
`132`	`132`
`133`	`133`	`// For calendar cells, render the focus indicator when the parent cell is`
`134`	`134`	`// focused.`
`135`		`-.mat-calendar-body-cell:focus .mat-focus-indicator::before {`
	`135`	`+.mat-calendar-body-cell:focus-visible .mat-focus-indicator::before {`
`136`	`136`	`content: '';`
`137`	`137`	`}`
`138`	`138`
Original file line number	Diff line number	Diff line change
`@@ -131,7 +131,7 @@ a.mdc-list-item--activated {`
`131`	`131`
`132`	`132`	`// For list items, render the focus indicator when the parent`
`133`	`133`	`// listem item is focused.`
`134`		`- &:focus > .mat-focus-indicator::before {`
	`134`	`+ &:focus-visible > .mat-focus-indicator::before {`
`135`	`135`	`content: '';`
`136`	`136`	`}`
`137`	`137`	`}`