Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Hi Angular Material team!
I would like to highlight that the bottom sheet implementation and Material 3 specification seems to have diverged.

There is a specification for sizes and responsive behaviour of bottom sheet mentioned here: https://m3.material.io/components/bottom-sheets/specs

Right now, the workaround is to modify some CSS manually. Unfortunately, the required values are not exposed via --mat-sys CSS variables, so the workaround ends up using internal CSS classes selectors. In some cases, it might require using !import if styles are not wrapper in some parent CSS class - which is considered an anti-pattern.

Here is a version with bottom sheet styles overwrites to match Material 3 specification:
https://stackblitz.com/edit/3dhv1nhh?file=src%2Fstyles.css

Please let me know if you need any help with this in case the bug or story gets picked up — happy to support!

Reproduction

StackBlitz link (from official material.angular.io page): https://stackblitz.com/run?file=src%2Fexample%2Fbottom-sheet-overview-example.ts&startScript=start
Steps to reproduce:

1. Open side sheet on mobile, tablet and desktop breakpoints

Expected Behavior

• bottom sheet implementation is aligned with Material 3 specification
• with responsive width of bottom sheet, mat-bottom-sheet-container-medium, mat-bottom-sheet-container-large and mat-bottom-sheet-container-xlarge are no longer needed.

Actual Behavior

• bottom sheet does not comply with Material 3 specification

Environment

• Angular: 20.2.0
• CDK/Material: 20.2.0
• Browser(s): Chrome (and any other)
• Operating System (e.g. Windows, macOS, Ubuntu): macOS 26 (and any other)