fix(material/menu): prevent menu styles from leaking to other components

The menu theme was including the MDC list styles directly at the root of the theme which caused to leak into other components like `mat-list`.

The mixins will be removed in #27377, however currently the screenshot tests of a lot of internal targets assume that the leaky styles will be there which breaks the presubmit of #27377.

These changes introduce a *temporary* wrapper class around the mixins so that the incorrect screenshots can be approved before trying to land #27377.

Author: crisbeto

src/material/menu/_menu-theme.scss

@@ -13,7 +13,10 @@
   $config: theming.get-color-config($config-or-theme);
   @include mdc-helpers.using-mdc-theme($config) {
     @include mdc-menu-surface.core-styles(mdc-helpers.$mdc-theme-styles-query);
-    @include mdc-list.without-ripple(mdc-helpers.$mdc-theme-styles-query);
+
+    .mat-mdc-menu-panel-wrapper {
+      @include mdc-list.without-ripple(mdc-helpers.$mdc-theme-styles-query);
+    }
 
     // MDC doesn't appear to have disabled styling for menu
     // items so we have to grey them out ourselves.

src/material/menu/menu-trigger.ts

@@ -96,6 +96,7 @@ export abstract class _MatMenuTriggerBase implements AfterContentInit, OnDestroy
   private _menuCloseSubscription = Subscription.EMPTY;
   private _scrollStrategy: () => ScrollStrategy;
   private _changeDetectorRef = inject(ChangeDetectorRef);
+  protected _panelClass: string | null;
 
   /**
    * We're specifically looking for a `MatMenu` here since the generic `MatMenuPanel`
@@ -329,6 +330,10 @@ export abstract class _MatMenuTriggerBase implements AfterContentInit, OnDestroy
     this._closingActionsSubscription = this._menuClosingActions().subscribe(() => this.closeMenu());
     this._initMenu(menu);
 
+    if (this._panelClass) {
+      overlayRef.overlayElement.classList.add(this._panelClass);
+    }
+
     if (menu instanceof _MatMenuBase) {
       menu._startAnimation();
       menu._directDescendantItems.changes.pipe(takeUntil(menu.close)).subscribe(() => {
@@ -686,4 +691,6 @@ export abstract class _MatMenuTriggerBase implements AfterContentInit, OnDestroy
   },
   exportAs: 'matMenuTrigger',
 })
-export class MatMenuTrigger extends _MatMenuTriggerBase {}
+export class MatMenuTrigger extends _MatMenuTriggerBase {
+  protected override _panelClass = 'mat-mdc-menu-panel-wrapper';
+}

src/material/menu/menu.scss

@@ -9,7 +9,9 @@
 
 
 @include mdc-helpers.disable-mdc-fallback-declarations {
-  @include mdc-menu-surface.core-styles($query: structure);
+  .mat-mdc-menu-panel-wrapper {
+    @include mdc-menu-surface.core-styles($query: structure);
+  }
 }
 
 // Prevent rendering mat-menu as it can affect the flex layout.

tools/public_api_guard/material/menu.md

@@ -274,6 +274,8 @@ export interface MatMenuPanel<T = any> {
 
 // @public
 export class MatMenuTrigger extends _MatMenuTriggerBase {
+    // (undocumented)
+    protected _panelClass: string;
     // (undocumented)
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatMenuTrigger, "[mat-menu-trigger-for], [matMenuTriggerFor]", ["matMenuTrigger"], {}, {}, never, never, false, never>;
     // (undocumented)
@@ -313,6 +315,8 @@ export abstract class _MatMenuTriggerBase implements AfterContentInit, OnDestroy
     // (undocumented)
     _openedBy: Exclude<FocusOrigin, 'program' | null> | undefined;
     openMenu(): void;
+    // (undocumented)
+    protected _panelClass: string | null;
     restoreFocus: boolean;
     toggleMenu(): void;
     triggersSubmenu(): boolean;