@angular/material 18.2.1 → 19.0.0-next.1

package/_index.scss

@@ -18,7 +18,7 @@
 @forward './core/typography/typography' show typography-hierarchy;
 @forward './core/typography/typography-utils' show font-shorthand;
 @forward './core/tokens/m2' show m2-tokens-from-theme;
-@forward './core/tokens/m3-tokens' show system-level-colors,
+@forward './core/tokens/m3-system' show system-level-colors,
     system-level-typography, system-level-elevation, system-level-shape,
     system-level-motion, system-level-state;
 

package/button/_button-base.scss

@@ -141,8 +141,6 @@
   @include token-utils.use-tokens($prefix, $slots) {
     $icon-spacing: token-utils.get-token-variable(icon-spacing, true);
     $icon-offset: token-utils.get-token-variable(icon-offset, true);
-    $horizontal-padding: token-utils.get-token-variable(horizontal-padding, true);
-    padding: 0 $horizontal-padding;
 
     @if ($has-with-icon-padding) {
       $with-icon-horizontal-padding:

package/checkbox/_checkbox-common.scss

@@ -175,10 +175,10 @@ $_fallback-size: 40px;
       // Always apply the color since the element becomes `opacity: 0`
       // when unchecked. This makes the animation look better.
       @include token-utils.create-token-slot(color, selected-checkmark-color);
+    }
 
-      @include cdk.high-contrast(active, off) {
-        color: CanvasText;
-      }
+    @include cdk.high-contrast(active, off) {
+      color: CanvasText;
     }
   }
 
@@ -214,15 +214,15 @@ $_fallback-size: 40px;
     transition: opacity $_transition-duration $_exit-curve,
                 transform $_transition-duration $_exit-curve;
 
-    @include cdk.high-contrast(active, off) {
-      margin: 0 1px;
-    }
-
     @include token-utils.use-tokens($prefix, $slots) {
       // Always apply the color since the element becomes `opacity: 0`
       // when unchecked. This makes the animation look better.
       @include token-utils.create-token-slot(border-color, selected-checkmark-color);
     }
+
+    @include cdk.high-contrast(active, off) {
+      margin: 0 1px;
+    }
   }
 
   @include token-utils.use-tokens($prefix, $slots) {

package/core/_core.scss

@@ -7,6 +7,14 @@
 
 // Mixin that renders all of the core styles that are not theme-dependent.
 @mixin core() {
+  // TODO: Move ripple styles to be dynamically loaded instead of in core.
+  // This variable is used as a fallback for the ripple element's
+  // background color. However, if it isn't defined anywhere, then MSS
+  // complains in its verification stage.
+  html {
+    --mat-app-on-surface: initial;
+  }
+
   @include ripple.ripple();
   @include cdk.a11y-visually-hidden();
   @include cdk.overlay();

package/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss

@@ -56,16 +56,17 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
   }
   @else {
-    .mat-primary {
-      @include _palette-styles($theme, primary);
-    }
-
     // Default to the accent color. Note that the pseudo checkboxes are meant to inherit the
     // theme from their parent, rather than implementing their own theming, which is why we
     // don't attach to the `mat-*` classes. Also note that this needs to be below `.mat-primary`
     // in order to allow for the color to be overwritten if the checkbox is inside a parent that
     // has `mat-accent` and is placed inside another parent that has `mat-primary`.
     @include _palette-styles($theme, accent);
+
+    .mat-primary {
+      @include _palette-styles($theme, primary);
+    }
+
     .mat-accent {
       @include _palette-styles($theme, accent);
     }

package/core/style/_list-common.scss

@@ -33,14 +33,14 @@
 
 // This mixin provides base styles for the wrapper around mat-line elements in a list.
 @mixin wrapper-base() {
-  @include normalize-text();
-
   display: flex;
   flex-direction: column;
   flex: auto;
   box-sizing: border-box;
   overflow: hidden;
 
+  @include normalize-text();
+
   // Must remove wrapper when lines are empty or it takes up horizontal
   // space and pushes other elements to the right.
   &:empty {

package/core/tokens/_m3-system.scss

@@ -0,0 +1,155 @@
+@use '../style/elevation';
+@use '../style/sass-utils';
+@use './m3-tokens';
+@use './m3/definitions';
+@use 'sass:map';
+
+// Prefix used for component token fallback variables, e.g.
+// `color: var(--mdc-text-button-label-text-color, var(--mat-app-primary));`
+$_system-fallback-prefix: mat-app;
+
+// Default system level prefix to use when directly calling the `system-level-*` mixins
+$_system-level-prefix: sys;
+
+// Emits CSS variables for Material's system level values. Uses the
+// namespace prefix in $_system-fallback-prefix.
+// e.g. --mat-app-surface: #E5E5E5
+@mixin theme($theme, $overrides: ()) {
+  @include system-level-colors($theme, $overrides, $_system-fallback-prefix);
+  @include system-level-typography($theme, $overrides, $_system-fallback-prefix);
+  @include system-level-elevation($theme, $overrides, $_system-fallback-prefix);
+  @include system-level-shape($theme, $overrides, $_system-fallback-prefix);
+  @include system-level-motion($theme, $overrides, $_system-fallback-prefix);
+  @include system-level-state($theme, $overrides, $_system-fallback-prefix);
+}
+
+@mixin system-level-colors($theme, $overrides: (), $prefix: null) {
+  $palettes: map.get($theme, _mat-theming-internals-do-not-access, palettes);
+  $base-palettes: (
+    neutral: map.get($palettes, neutral),
+    neutral-variant: map.get($palettes, neutral-variant),
+    secondary: map.get($palettes, secondary),
+    error: map.get($palettes, error),
+  );
+
+  $type: map.get($theme, _mat-theming-internals-do-not-access, theme-type);
+  $primary: map.merge(map.get($palettes, primary), $base-palettes);
+  $tertiary: map.merge(map.get($palettes, tertiary), $base-palettes);
+  $error: map.get($palettes, error);
+
+  @if (not $prefix) {
+    $prefix: map.get($theme, _mat-theming-internals-do-not-access,
+        color-system-variables-prefix) or $_system-level-prefix;
+  }
+
+  $ref: (
+    md-ref-palette: m3-tokens.generate-ref-palette-tokens($primary, $tertiary, $error)
+  );
+
+  $sys-colors: if($type == dark,
+    definitions.md-sys-color-values-dark($ref),
+    definitions.md-sys-color-values-light($ref));
+
+  & {
+    @each $name, $value in $sys-colors {
+      --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
+    }
+  }
+}
+
+@mixin system-level-typography($theme, $overrides: (), $prefix: null) {
+  $font-definition: map.get($theme, _mat-theming-internals-do-not-access, font-definition);
+  $brand: map.get($font-definition, brand);
+  $plain: map.get($font-definition, plain);
+  $bold: map.get($font-definition, bold);
+  $medium: map.get($font-definition, medium);
+  $regular: map.get($font-definition, regular);
+  $ref: (md-ref-typeface:
+      m3-tokens.generate-ref-typeface-tokens($brand, $plain, $bold, $medium, $regular)
+  );
+
+  @if (not $prefix) {
+    $prefix: map.get($theme, _mat-theming-internals-do-not-access,
+        typography-system-variables-prefix) or $_system-level-prefix;
+  }
+
+  & {
+    @each $name, $value in definitions.md-sys-typescale-values($ref) {
+      --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
+    }
+  }
+}
+
+@mixin system-level-elevation($theme, $overrides: (), $prefix: $_system-level-prefix) {
+  $shadow-color: map.get(
+      $theme, _mat-theming-internals-do-not-access, color-tokens, (mdc, theme), shadow);
+
+  @for $level from 0 through 24 {
+    $value: elevation.get-box-shadow($level, $shadow-color);
+    --#{$prefix}-elevation-shadow-level-#{$level}: #{$value};
+  }
+
+  @each $name, $value in definitions.md-sys-elevation-values() {
+    $level: map.get($overrides, $name) or $value;
+    $value: elevation.get-box-shadow($level, $shadow-color);
+    --#{$prefix}-#{$name}: #{$value};
+  }
+}
+
+@mixin system-level-shape($theme, $overrides: (), $prefix: $_system-level-prefix) {
+  & {
+    @each $name, $value in definitions.md-sys-shape-values() {
+      --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
+    }
+  }
+}
+
+@mixin system-level-state($theme, $overrides: (), $prefix: $_system-level-prefix) {
+  & {
+    @each $name, $value in definitions.md-sys-state-values() {
+      --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
+    }
+  }
+}
+
+@mixin system-level-motion($theme, $overrides: (), $prefix: $_system-level-prefix) {
+  & {
+    @each $name, $value in definitions.md-sys-motion-values() {
+      --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
+    }
+  }
+}
+
+// Return a new map where the values are the same as the provided map's
+// keys, prefixed with "--mat-app-". For example:
+// (key1: '', key2: '') --> (key1: --mat-app-key1, key2: --mat-app-key2)
+@function _create-system-app-vars-map($map) {
+  $new-map: ();
+  @each $key, $value in $map {
+    $new-map: map.set($new-map, $key, --#{$_system-fallback-prefix}-#{$key});
+  }
+  @return $new-map;
+}
+
+// Create a components tokens map where values are based on
+// system fallback variables referencing Material's system keys.
+// Includes density token fallbacks where density is 0.
+@function create-system-fallbacks() {
+  $app-vars: (
+    'md-sys-color':
+        _create-system-app-vars-map(definitions.md-sys-color-values-light()),
+    'md-sys-typescale':
+        _create-system-app-vars-map(definitions.md-sys-typescale-values()),
+    'md-sys-elevation':
+        _create-system-app-vars-map(definitions.md-sys-elevation-values()),
+    'md-sys-state':
+        _create-system-app-vars-map(definitions.md-sys-state-values()),
+    'md-sys-shape':
+        _create-system-app-vars-map(definitions.md-sys-shape-values()),
+  );
+
+  @return sass-utils.deep-merge-all(
+      m3-tokens.generate-tokens($app-vars, true, true),
+      m3-tokens.generate-density-tokens(0)
+  );
+}

package/core/tokens/_m3-tokens.scss

@@ -4,17 +4,9 @@
 @use './m3';
 @use './m3/definitions' as m3-token-definitions;
 @use '../tokens/m2' as m2-tokens;
-@use '../style/elevation';
 @use './density';
 @use './format-tokens';
 
-// Default system level prefix to use when directly calling the `system-level-*` mixins
-$_system-level-prefix: sys;
-
-// Prefix used for component token fallback variables, e.g.
-// `color: var(--mdc-text-button-label-text-color, var(--mat-app-primary));`
-$_system-fallback-prefix: mat-app;
-
 /// Generates tokens for the given palette with the given prefix.
 /// @param {Map} $palette The palette to generate tokens for
 /// @param {String} $prefix The key prefix used to name the tokens
@@ -35,7 +27,7 @@ $_system-fallback-prefix: mat-app;
 /// @param {Map} $tertiary The tertiary palette
 /// @param {Map} $error The error palette
 /// @return {Map} A set of `md-ref-palette` tokens
-@function _generate-ref-palette-tokens($primary, $tertiary, $error) {
+@function generate-ref-palette-tokens($primary, $tertiary, $error) {
   @return sass-utils.merge-all(
       (black: #000, white: #fff),
       _generate-palette-tokens($primary, primary),
@@ -55,7 +47,7 @@ $_system-fallback-prefix: mat-app;
 /// @param {String} $medium The font-weight to use for medium text
 /// @param {String} $regular The font-weight to use for regular text
 /// @return {Map} A set of `md-ref-typeface` tokens
-@function _generate-ref-typeface-tokens($brand, $plain, $bold, $medium, $regular) {
+@function generate-ref-typeface-tokens($brand, $plain, $bold, $medium, $regular) {
   @return (
     brand: $brand,
     plain: $plain,
@@ -96,7 +88,7 @@ $_cached-token-slots: null;
 /// @param {Boolean} $include-non-systemized Whether to include non-systemized tokens
 /// @param {Boolean} $include-density Whether to include density tokens
 /// @return {Map} A map of namespaced tokens
-@function _generate-tokens($systems, $include-non-systemized: false, $include-density: false) {
+@function generate-tokens($systems, $include-non-systemized: false, $include-density: false) {
   $systems: map.merge((
     md-sys-color: (),
     md-sys-elevation: (),
@@ -135,105 +127,6 @@ $_cached-token-slots: null;
   @return $result;
 }
 
-// Return a new map where the values are the same as the provided map's
-// keys, prefixed with "--mat-app-". For example:
-// (key1: '', key2: '') --> (key1: --mat-app-key1, key2: --mat-app-key2)
-@function _create-system-app-vars-map($map) {
-  $new-map: ();
-  @each $key, $value in $map {
-    $new-map: map.set($new-map, $key, --#{$_system-fallback-prefix}-#{$key});
-  }
-  @return $new-map;
-}
-
-// Create a components tokens map where values are based on
-// system fallback variables referencing Material's system keys.
-// Includes density token fallbacks where density is 0.
-@function create-system-fallbacks() {
-  $app-vars: (
-    'md-sys-color':
-        _create-system-app-vars-map(m3-token-definitions.md-sys-color-values-light()),
-    'md-sys-typescale':
-        _create-system-app-vars-map(m3-token-definitions.md-sys-typescale-values()),
-    'md-sys-elevation':
-        _create-system-app-vars-map(m3-token-definitions.md-sys-elevation-values()),
-    'md-sys-state':
-        _create-system-app-vars-map(m3-token-definitions.md-sys-state-values()),
-    'md-sys-shape':
-        _create-system-app-vars-map(m3-token-definitions.md-sys-shape-values()),
-  );
-
-  @return sass-utils.deep-merge-all(
-    _generate-tokens($app-vars, true, true),
-    generate-density-tokens(0)
-  );
-}
-
-// Emits CSS variables for Material's system level values. Uses the
-// namespace prefix in $_system-fallback-prefix.
-// e.g. --mat-app-surface: #E5E5E5
-@mixin theme($theme, $overrides: ()) {
-  @include system-level-colors($theme, $overrides, $_system-fallback-prefix);
-  @include system-level-typography($theme, $overrides, $_system-fallback-prefix);
-  @include system-level-elevation($theme, $overrides, $_system-fallback-prefix);
-  @include system-level-shape($theme, $overrides, $_system-fallback-prefix);
-  @include system-level-motion($theme, $overrides, $_system-fallback-prefix);
-  @include system-level-state($theme, $overrides, $_system-fallback-prefix);
-}
-
-@mixin system-level-colors($theme, $overrides: (), $prefix: null) {
-  $palettes: map.get($theme, _mat-theming-internals-do-not-access, palettes);
-  $base-palettes: (
-    neutral: map.get($palettes, neutral),
-    neutral-variant: map.get($palettes, neutral-variant),
-    secondary: map.get($palettes, secondary),
-    error: map.get($palettes, error),
-  );
-
-  $type: map.get($theme, _mat-theming-internals-do-not-access, theme-type);
-  $primary: map.merge(map.get($palettes, primary), $base-palettes);
-  $tertiary: map.merge(map.get($palettes, tertiary), $base-palettes);
-  $error: map.get($palettes, error);
-
-  @if (not $prefix) {
-    $prefix: map.get($theme, _mat-theming-internals-do-not-access,
-        color-system-variables-prefix) or $_system-level-prefix;
-  }
-
-  $ref: (
-    md-ref-palette: _generate-ref-palette-tokens($primary, $tertiary, $error)
-  );
-
-  $sys-colors: if($type == dark,
-    m3-token-definitions.md-sys-color-values-dark($ref),
-    m3-token-definitions.md-sys-color-values-light($ref));
-
-  @each $name, $value in $sys-colors {
-    --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
-  }
-}
-
-@mixin system-level-typography($theme, $overrides: (), $prefix: null) {
-  $font-definition: map.get($theme, _mat-theming-internals-do-not-access, font-definition);
-  $brand: map.get($font-definition, brand);
-  $plain: map.get($font-definition, plain);
-  $bold: map.get($font-definition, bold);
-  $medium: map.get($font-definition, medium);
-  $regular: map.get($font-definition, regular);
-  $ref: (
-    md-ref-typeface: _generate-ref-typeface-tokens($brand, $plain, $bold, $medium, $regular)
-  );
-
-  @if (not $prefix) {
-    $prefix: map.get($theme, _mat-theming-internals-do-not-access,
-        typography-system-variables-prefix) or $_system-level-prefix;
-  }
-
-  @each $name, $value in m3-token-definitions.md-sys-typescale-values($ref) {
-    --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
-  }
-}
-
 @function create-map($keys, $prefix) {
   $result: ();
   @each $key in $keys {
@@ -242,40 +135,6 @@ $_cached-token-slots: null;
   @return $result;
 }
 
-@mixin system-level-elevation($theme, $overrides: (), $prefix: $_system-level-prefix) {
-  $shadow-color: map.get(
-      $theme, _mat-theming-internals-do-not-access, color-tokens, (mdc, theme), shadow);
-
-  @for $level from 0 through 24 {
-    $value: elevation.get-box-shadow($level, $shadow-color);
-    --#{$prefix}-elevation-shadow-level-#{$level}: #{$value};
-  }
-
-  @each $name, $value in m3-token-definitions.md-sys-elevation-values() {
-    $level: map.get($overrides, $name) or $value;
-    $value: elevation.get-box-shadow($level, $shadow-color);
-    --#{$prefix}-#{$name}: #{$value};
-  }
-}
-
-@mixin system-level-shape($theme, $overrides: (), $prefix: $_system-level-prefix) {
-  @each $name, $value in m3-token-definitions.md-sys-shape-values() {
-    --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
-  }
-}
-
-@mixin system-level-state($theme, $overrides: (), $prefix: $_system-level-prefix) {
-  @each $name, $value in m3-token-definitions.md-sys-state-values() {
-    --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
-  }
-}
-
-@mixin system-level-motion($theme, $overrides: (), $prefix: $_system-level-prefix) {
-  @each $name, $value in m3-token-definitions.md-sys-motion-values() {
-    --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
-  }
-}
-
 @function _get-sys-color($type, $ref, $prefix) {
   $mdc-sys-color: if($type == dark,
     m3-token-definitions.md-sys-color-values-dark($ref),
@@ -451,12 +310,12 @@ $_cached-token-slots: null;
 /// @return {Map} A map of namespaced color tokens
 @function generate-color-tokens($type, $primary, $tertiary, $error, $system-variables-prefix) {
   $ref: (
-    md-ref-palette: _generate-ref-palette-tokens($primary, $tertiary, $error)
+    md-ref-palette: generate-ref-palette-tokens($primary, $tertiary, $error)
   );
 
   $sys-color: _get-sys-color($type, $ref, $system-variables-prefix);
 
-  @return _generate-tokens(map.merge($ref, (
+  @return generate-tokens(map.merge($ref, (
     md-sys-color: $sys-color,
     // Because the elevation values are always combined with color values to create the box shadow,
     // elevation needs to be part of the color dimension.
@@ -480,10 +339,10 @@ $_cached-token-slots: null;
 @function generate-typography-tokens($brand, $plain, $bold, $medium, $regular,
 $system-variables-prefix) {
   $ref: (
-    md-ref-typeface: _generate-ref-typeface-tokens($brand, $plain, $bold, $medium, $regular)
+    md-ref-typeface: generate-ref-typeface-tokens($brand, $plain, $bold, $medium, $regular)
   );
   $sys-typeface: _get-sys-typeface($ref, $system-variables-prefix);
-  @return _generate-tokens((
+  @return generate-tokens((
     md-sys-typescale: $sys-typeface
   ));
 }
@@ -500,7 +359,7 @@ $system-variables-prefix) {
 /// @return {Map} A map of namespaced tokens not related to color, typography, or density
 @function generate-base-tokens() {
   // TODO(mmalerba): Exclude density tokens once implemented.
-  @return _generate-tokens((
+  @return generate-tokens((
     md-sys-motion: m3-token-definitions.md-sys-motion-values(),
     md-sys-shape: m3-token-definitions.md-sys-shape-values(),
   ), $include-non-systemized: true);

package/core/tokens/_token-utils.scss

@@ -1,13 +1,13 @@
+@use '../style/elevation';
+@use '../style/sass-utils';
+@use './m3-system';
 @use 'sass:list';
 @use 'sass:map';
 @use 'sass:string';
-@use '../style/elevation';
-@use '../style/sass-utils';
-@use './m3-tokens';
 
 $_tokens: null;
 $_component-prefix: null;
-$_system-fallbacks: m3-tokens.create-system-fallbacks();
+$_system-fallbacks: m3-system.create-system-fallbacks();
 
 // Sets the token prefix and map to use when creating token slots.
 @mixin use-tokens($prefix, $tokens) {
@@ -113,19 +113,20 @@ $_system-fallbacks: m3-tokens.create-system-fallbacks();
     @return _create-var($sys-fallback, $fallback);
   }
 
-  // TODO(mat-app-theme): Return the system-level fallback.
-  // Changing this will affect clients that do not properly call theme mixins since the tokens
-  // will be undefined and now default to M3 system values, causing a number of screenshot failures.
-  // @return $sys-fallback;
-  @return $fallback;
+  @return $sys-fallback;
 }
 
 // Outputs a map of tokens under a specific prefix.
 @mixin create-token-values($prefix, $tokens) {
   @if $tokens != null {
-    @each $key, $value in $tokens {
-      @if $value != null {
-        #{_create-var-name($prefix, $key)}: #{$value};
+    // TODO: The `&` adds to the file size of theme, but it's necessary for compatibility
+    // with https://sass-lang.com/documentation/breaking-changes/mixed-decls/. We should
+    // figure out a better way to do this or move all the concrete styles out of the theme.
+    & {
+      @each $key, $value in $tokens {
+        @if $value != null {
+          #{_create-var-name($prefix, $key)}: #{$value};
+        }
       }
     }
   }

package/dialog/index.d.ts

@@ -335,7 +335,7 @@ export declare class MatDialogConfig<D = any> {
 }
 
 export declare class MatDialogContainer extends CdkDialogContainer<MatDialogConfig> implements OnDestroy {
-    private _animationMode?;
+    private _animationMode;
     /** Emits when an animation state changes. */
     _animationStateChanged: EventEmitter<LegacyDialogAnimationEvent>;
     /** Whether animations are enabled. */
@@ -350,7 +350,7 @@ export declare class MatDialogContainer extends CdkDialogContainer<MatDialogConf
     private _exitAnimationDuration;
     /** Current timer for dialog animations. */
     private _animationTimer;
-    constructor(elementRef: ElementRef, focusTrapFactory: FocusTrapFactory, _document: any, dialogConfig: MatDialogConfig, interactivityChecker: InteractivityChecker, ngZone: NgZone, overlayRef: OverlayRef, _animationMode?: string | undefined, focusMonitor?: FocusMonitor);
+    constructor(elementRef: ElementRef, focusTrapFactory: FocusTrapFactory, _document: any, dialogConfig: MatDialogConfig, interactivityChecker: InteractivityChecker, ngZone: NgZone, overlayRef: OverlayRef, _unusedAnimationMode?: string, focusMonitor?: FocusMonitor);
     protected _contentAttached(): void;
     /** Starts the dialog open animation if enabled. */
     private _startOpenAnimation;