@angular/material 17.1.0-next.2 → 17.1.0-rc.0

package/LICENSE

@@ -1,6 +1,6 @@
 The MIT License
 
-Copyright (c) 2023 Google LLC.
+Copyright (c) 2024 Google LLC.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/_index.scss

@@ -143,12 +143,12 @@
   tree-base;
 
 // MDC Helpers
-@forward './core/mdc-helpers/mdc-helpers' as private-* show private-using-mdc-theme,
-  private-using-mdc-typography, private-disable-mdc-fallback-declarations,
-  private-typography-config-level-from-mdc, private-if-touch-targets-unsupported,
-  $private-mdc-base-styles-query, $private-mdc-base-styles-without-animation-query,
-  $private-mdc-theme-styles-query, $private-mdc-typography-styles-query;
+@forward './core/mdc-helpers/mdc-helpers' as private-* show
+  private-disable-mdc-fallback-declarations, private-typography-config-level-from-mdc,
+  private-if-touch-targets-unsupported, $private-mdc-base-styles-query,
+  $private-mdc-base-styles-without-animation-query, $private-mdc-theme-styles-query,
+  $private-mdc-typography-styles-query;
 
 // New theming APIs:
 @forward './core/theming/inspection' show get-theme-version, get-theme-type, get-theme-color,
-  get-theme-typography, get-theme-density, theme-has;
+  get-theme-typography, get-theme-density, theme-has, theme-remove;

package/bottom-sheet/index.d.ts

@@ -2,7 +2,6 @@ import { AnimationEvent as AnimationEvent_2 } from '@angular/animations';
 import { AnimationTriggerMetadata } from '@angular/animations';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { CdkDialogContainer } from '@angular/cdk/dialog';
-import { ChangeDetectorRef } from '@angular/core';
 import { ComponentRef } from '@angular/core';
 import { ComponentType } from '@angular/cdk/portal';
 import { DialogConfig } from '@angular/cdk/dialog';
@@ -133,7 +132,6 @@ export declare class MatBottomSheetConfig<D = any> {
  * @docs-private
  */
 export declare class MatBottomSheetContainer extends CdkDialogContainer implements OnDestroy {
-    private _changeDetectorRef;
     private _breakpointSubscription;
     /** The state of the bottom sheet animations. */
     _animationState: 'void' | 'visible' | 'hidden';
@@ -141,7 +139,7 @@ export declare class MatBottomSheetContainer extends CdkDialogContainer implemen
     _animationStateChanged: EventEmitter<AnimationEvent_2>;
     /** Whether the component has been destroyed. */
     private _destroyed;
-    constructor(elementRef: ElementRef, focusTrapFactory: FocusTrapFactory, document: any, config: DialogConfig, checker: InteractivityChecker, ngZone: NgZone, overlayRef: OverlayRef, breakpointObserver: BreakpointObserver, _changeDetectorRef: ChangeDetectorRef, focusMonitor?: FocusMonitor);
+    constructor(elementRef: ElementRef, focusTrapFactory: FocusTrapFactory, document: any, config: DialogConfig, checker: InteractivityChecker, ngZone: NgZone, overlayRef: OverlayRef, breakpointObserver: BreakpointObserver, focusMonitor?: FocusMonitor);
     /** Begin animation of bottom sheet entrance into view. */
     enter(): void;
     /** Begin animation of the bottom sheet exiting from view. */
@@ -151,7 +149,7 @@ export declare class MatBottomSheetContainer extends CdkDialogContainer implemen
     _onAnimationStart(event: AnimationEvent_2): void;
     protected _captureInitialFocus(): void;
     private _toggleClass;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatBottomSheetContainer, [null, null, { optional: true; }, null, null, null, null, null, null, null]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatBottomSheetContainer, [null, null, { optional: true; }, null, null, null, null, null, null]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatBottomSheetContainer, "mat-bottom-sheet-container", never, {}, {}, never, never, true, never>;
 }
 

package/button/_button-base.scss

@@ -68,12 +68,17 @@
       @include token-utils.create-token-slot(background-color, state-layer-color);
     }
 
+    &.mat-mdc-button-disabled .mat-mdc-button-persistent-ripple::before {
+      @include token-utils.create-token-slot(background-color, disabled-state-layer-color);
+    }
+
     &:hover .mat-mdc-button-persistent-ripple::before {
       @include token-utils.create-token-slot(opacity, hover-state-layer-opacity);
     }
 
     &.cdk-program-focused,
-    &.cdk-keyboard-focused {
+    &.cdk-keyboard-focused,
+    &.mat-mdc-button-disabled-interactive:focus {
       .mat-mdc-button-persistent-ripple::before {
         @include token-utils.create-token-slot(opacity, focus-state-layer-opacity);
       }
@@ -91,11 +96,18 @@
 // and note that having pointer-events may have unintended side-effects, e.g. allowing the user
 // to click the target underneath the button.
 @mixin mat-private-button-disabled() {
-  &[disabled] {
+  // `[disabled]` shouldn't be necessary, but we keep it to maintain
+  // compatibility with apps setting it through host bindings.
+  &[disabled],
+  &.mat-mdc-button-disabled {
     cursor: default;
     pointer-events: none;
     @content;
   }
+
+  &.mat-mdc-button-disabled-interactive {
+    pointer-events: auto;
+  }
 }
 
 // Hides the touch target on lower densities.
@@ -107,6 +119,12 @@
   }
 }
 
+// Adds an elevation shadow to a button.
+@mixin mat-private-button-elevation($token-name) {
+  // MDC outputs a variable that is the same as the token name, but suffixed with `-shadow`.
+  box-shadow: var(#{token-utils.get-token-variable($token-name) + '-shadow'});
+}
+
 @mixin mat-private-button-touch-target($is-square) {
   // Element used to ensure that the button has a touch target that meets the required minimum.
   // Note that we use this, instead of MDC's built-in `mdc-button--touch` class, because the MDC

package/button/_button-theme.scss

@@ -1,12 +1,10 @@
-@use '@material/button/button' as mdc-button;
+@use 'sass:map';
 @use '@material/button/button-text-theme' as mdc-button-text-theme;
 @use '@material/button/button-filled-theme' as mdc-button-filled-theme;
 @use '@material/button/button-protected-theme' as mdc-button-protected-theme;
 @use '@material/button/button-outlined-theme' as mdc-button-outlined-theme;
-@use '@material/elevation/elevation-theme' as mdc-elevation-theme;
 
 @use './button-base';
-@use '../core/mdc-helpers/mdc-helpers';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/tokens/token-utils';
@@ -19,7 +17,7 @@
 @use '../core/tokens/m2/mat/protected-button' as tokens-mat-protected-button;
 @use '../core/tokens/m2/mdc/text-button' as tokens-mdc-text-button;
 @use '../core/tokens/m2/mat/text-button' as tokens-mat-text-button;
-
+@use '../core/style/sass-utils';
 
 @mixin _text-button-variant($theme, $palette) {
   $mdc-tokens: if($palette,
@@ -81,141 +79,177 @@
   @include token-utils.create-token-values(tokens-mat-outlined-button.$prefix, $mat-tokens);
 }
 
-@mixin base($theme) {
-  // TODO(mmalerba): Move button base tokens here
+@mixin _theme-from-tokens($tokens) {
+  @if ($tokens != ()) {
+    @include mdc-button-text-theme.theme(map.get($tokens, tokens-mdc-text-button.$prefix));
+    @include mdc-button-protected-theme.theme(
+      map.get($tokens, tokens-mdc-protected-button.$prefix));
+    @include mdc-button-filled-theme.theme(map.get($tokens, tokens-mdc-filled-button.$prefix));
+    @include mdc-button-outlined-theme.theme(map.get($tokens, tokens-mdc-outlined-button.$prefix));
+
+    @include token-utils.create-token-values(
+      tokens-mat-text-button.$prefix, map.get($tokens, tokens-mat-text-button.$prefix));
+    @include token-utils.create-token-values(
+      tokens-mat-protected-button.$prefix, map.get($tokens, tokens-mat-protected-button.$prefix));
+    @include token-utils.create-token-values(
+      tokens-mat-filled-button.$prefix, map.get($tokens, tokens-mat-filled-button.$prefix));
+    @include token-utils.create-token-values(
+      tokens-mat-outlined-button.$prefix, map.get($tokens, tokens-mat-outlined-button.$prefix));
+  }
 }
 
-@mixin color($theme) {
-  .mat-mdc-button {
-    @include _text-button-variant($theme, null);
-
-    &.mat-primary {
-      @include _text-button-variant($theme, primary);
-    }
-
-    &.mat-accent {
-      @include _text-button-variant($theme, accent);
-    }
-
-    &.mat-warn {
-      @include _text-button-variant($theme, warn);
-    }
+@mixin base($theme) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include theme-from-tokens(inspection.get-theme-tokens($theme, base));
   }
-
-  .mat-mdc-unelevated-button {
-    @include _filled-button-variant($theme, null);
-
-    &.mat-primary {
-      @include _filled-button-variant($theme, primary);
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include mdc-button-text-theme.theme(
+        tokens-mdc-text-button.get-unthemable-tokens());
+      @include mdc-button-filled-theme.theme(
+        tokens-mdc-filled-button.get-unthemable-tokens());
+      @include mdc-button-protected-theme.theme(
+        tokens-mdc-protected-button.get-unthemable-tokens());
+      @include mdc-button-outlined-theme.theme(
+        tokens-mdc-outlined-button.get-unthemable-tokens());
     }
+  }
+}
 
-    &.mat-accent {
-      @include _filled-button-variant($theme, accent);
+@mixin color($theme) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+  }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include _text-button-variant($theme, null);
+      @include _filled-button-variant($theme, null);
+      @include _protected-button-variant($theme, null);
+      @include _outlined-button-variant($theme, null);
     }
 
-    &.mat-warn {
-      @include _filled-button-variant($theme, warn);
-    }
-  }
+    .mat-mdc-button {
+      &.mat-primary {
+        @include _text-button-variant($theme, primary);
+      }
 
-  .mat-mdc-raised-button {
-    @include _protected-button-variant($theme, null);
+      &.mat-accent {
+        @include _text-button-variant($theme, accent);
+      }
 
-    &.mat-primary {
-      @include _protected-button-variant($theme, primary);
+      &.mat-warn {
+        @include _text-button-variant($theme, warn);
+      }
     }
 
-    &.mat-accent {
-      @include _protected-button-variant($theme, accent);
-    }
+    .mat-mdc-unelevated-button {
+      &.mat-primary {
+        @include _filled-button-variant($theme, primary);
+      }
+
+      &.mat-accent {
+        @include _filled-button-variant($theme, accent);
+      }
 
-    &.mat-warn {
-      @include _protected-button-variant($theme, warn);
+      &.mat-warn {
+        @include _filled-button-variant($theme, warn);
+      }
     }
 
-    // TODO(wagnermaciel): Remove this workaround when b/301126527 is resolved
-    @include mdc-helpers.disable-mdc-fallback-declarations {
-      @include mdc-elevation-theme.elevation(2);
+    .mat-mdc-raised-button {
+      &.mat-primary {
+        @include _protected-button-variant($theme, primary);
+      }
 
-      &:hover, &:focus {
-        @include mdc-elevation-theme.elevation(4);
+      &.mat-accent {
+        @include _protected-button-variant($theme, accent);
       }
 
-      &:active, &:focus:active {
-        @include mdc-elevation-theme.elevation(8);
+      &.mat-warn {
+        @include _protected-button-variant($theme, warn);
       }
     }
-  }
 
-  .mat-mdc-outlined-button {
-    @include _outlined-button-variant($theme, null);
-
-    &.mat-primary {
-      @include _outlined-button-variant($theme, primary);
-    }
+    .mat-mdc-outlined-button {
+      &.mat-primary {
+        @include _outlined-button-variant($theme, primary);
+      }
 
-    &.mat-accent {
-      @include _outlined-button-variant($theme, accent);
-    }
+      &.mat-accent {
+        @include _outlined-button-variant($theme, accent);
+      }
 
-    &.mat-warn {
-      @include _outlined-button-variant($theme, warn);
+      &.mat-warn {
+        @include _outlined-button-variant($theme, warn);
+      }
     }
   }
 }
 
 @mixin typography($theme) {
-  @include mdc-helpers.using-mdc-typography($theme) {
-    @include mdc-button.without-ripple($query: mdc-helpers.$mdc-typography-styles-query);
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   }
-
-  .mat-mdc-button,
-  .mat-mdc-raised-button,
-  .mat-mdc-outlined-button,
-  .mat-mdc-unelevated-button {
-    line-height: inherit;
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      $text-typography-tokens: tokens-mdc-text-button.get-typography-tokens($theme);
+      $filled-typography-tokens: tokens-mdc-filled-button.get-typography-tokens($theme);
+      $outlined-typography-tokens: tokens-mdc-outlined-button.get-typography-tokens($theme);
+      $protected-typography-tokens: tokens-mdc-protected-button.get-typography-tokens($theme);
+
+      @include mdc-button-text-theme.theme($text-typography-tokens);
+      @include mdc-button-filled-theme.theme($filled-typography-tokens);
+      @include mdc-button-outlined-theme.theme($outlined-typography-tokens);
+      @include mdc-button-protected-theme.theme($protected-typography-tokens);
+    }
   }
 }
 
 @mixin density($theme) {
-  $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
-
-  .mat-mdc-button {
-    $density-tokens: tokens-mdc-text-button.get-density-tokens($theme);
-    @include mdc-button-text-theme.theme($density-tokens);
-    @include button-base.mat-private-button-touch-target-density($density-scale);
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
   }
+  @else {
+    $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
 
-  .mat-mdc-raised-button {
-    $density-tokens: tokens-mdc-protected-button.get-density-tokens($theme);
-    @include mdc-button-protected-theme.theme($density-tokens);
-    @include button-base.mat-private-button-touch-target-density($density-scale);
-  }
+    @include sass-utils.current-selector-or-root() {
+      $text-density-tokens: tokens-mdc-text-button.get-density-tokens($theme);
+      $filled-density-tokens: tokens-mdc-filled-button.get-density-tokens($theme);
+      $outlined-density-tokens: tokens-mdc-outlined-button.get-density-tokens($theme);
+      $protected-density-tokens: tokens-mdc-protected-button.get-density-tokens($theme);
 
-  .mat-mdc-unelevated-button {
-    $density-tokens: tokens-mdc-filled-button.get-density-tokens($theme);
-    @include mdc-button-filled-theme.theme($density-tokens);
-    @include button-base.mat-private-button-touch-target-density($density-scale);
-  }
+      @include mdc-button-text-theme.theme($text-density-tokens);
+      @include mdc-button-filled-theme.theme($filled-density-tokens);
+      @include mdc-button-outlined-theme.theme($outlined-density-tokens);
+      @include mdc-button-protected-theme.theme($protected-density-tokens);
+    }
 
-  .mat-mdc-outlined-button {
-    $density-tokens: tokens-mdc-outlined-button.get-density-tokens($theme);
-    @include mdc-button-outlined-theme.theme($density-tokens);
-    @include button-base.mat-private-button-touch-target-density($density-scale);
+    .mat-mdc-button,
+    .mat-mdc-raised-button,
+    .mat-mdc-unelevated-button,
+    .mat-mdc-outlined-button {
+      // TODO: tokenize the touch target visibility.
+      @include button-base.mat-private-button-touch-target-density($density-scale);
+    }
   }
 }
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-button') {
-    @include base($theme);
-    @if inspection.theme-has($theme, color) {
-      @include color($theme);
-    }
-    @if inspection.theme-has($theme, density) {
-      @include density($theme);
+    @if inspection.get-theme-version($theme) == 1 {
+      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
     }
-    @if inspection.theme-has($theme, typography) {
-      @include typography($theme);
+    @else {
+      @include base($theme);
+      @if inspection.theme-has($theme, color) {
+        @include color($theme);
+      }
+      @if inspection.theme-has($theme, density) {
+        @include density($theme);
+      }
+      @if inspection.theme-has($theme, typography) {
+        @include typography($theme);
+      }
     }
   }
 }

package/button/_fab-theme.scss

@@ -1,8 +1,6 @@
 @use 'sass:map';
-@use '@material/fab/fab' as mdc-fab;
 @use '@material/fab/fab-theme' as mdc-fab-theme;
 @use '@material/fab/extended-fab-theme' as mdc-extended-fab-theme;
-@use '../core/mdc-helpers/mdc-helpers';
 @use '../core/style/sass-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
@@ -49,6 +47,7 @@
   @else {
     @include sass-utils.current-selector-or-root() {
       @include _fab-variant($theme, null);
+      @include mdc-extended-fab-theme.theme(tokens-mdc-extended-fab.get-color-tokens($theme));
 
       .mat-mdc-fab,
       .mat-mdc-mini-fab {
@@ -73,13 +72,8 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   }
   @else {
-    @include mdc-helpers.using-mdc-typography($theme) {
-      @include mdc-fab.without-ripple($query: mdc-helpers.$mdc-typography-styles-query);
-    }
-
-    $typography-tokens: tokens-mdc-extended-fab.get-typography-tokens($theme);
     @include sass-utils.current-selector-or-root() {
-      @include mdc-extended-fab-theme.theme($typography-tokens);
+      @include mdc-extended-fab-theme.theme(tokens-mdc-extended-fab.get-typography-tokens($theme));
     }
   }
 }

package/button/_icon-button-theme.scss

@@ -43,19 +43,21 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
   }
   @else {
-    .mat-mdc-icon-button {
+    @include sass-utils.current-selector-or-root() {
       @include _icon-button-variant($theme, null);
 
-      &.mat-primary {
-        @include _icon-button-variant($theme, primary);
-      }
+      .mat-mdc-icon-button {
+        &.mat-primary {
+          @include _icon-button-variant($theme, primary);
+        }
 
-      &.mat-accent {
-        @include _icon-button-variant($theme, accent);
-      }
+        &.mat-accent {
+          @include _icon-button-variant($theme, accent);
+        }
 
-      &.mat-warn {
-        @include _icon-button-variant($theme, warn);
+        &.mat-warn {
+          @include _icon-button-variant($theme, warn);
+        }
       }
     }
   }

package/button/index.d.ts

@@ -38,6 +38,9 @@ declare namespace i4 {
     }
 }
 
+/** Injection token that can be used to provide the default options the button component. */
+export declare const MAT_BUTTON_CONFIG: InjectionToken<MatButtonConfig>;
+
 /** Injection token to be used to override the default options for FAB. */
 export declare const MAT_FAB_DEFAULT_OPTIONS: InjectionToken<MatFabDefaultOptions>;
 
@@ -69,6 +72,7 @@ declare class MatAnchorBase extends MatButtonBase implements OnInit, OnDestroy {
     ngOnInit(): void;
     ngOnDestroy(): void;
     _haltDisabledEvents: (event: Event) => void;
+    protected _getAriaDisabled(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatAnchorBase, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatAnchorBase, never, never, { "tabIndex": { "alias": "tabIndex"; "required": false; }; }, {}, never, never, false, never>;
     static ngAcceptInputType_tabIndex: unknown;
@@ -116,19 +120,44 @@ declare class MatButtonBase implements AfterViewInit, OnDestroy {
     get disableRipple(): boolean;
     set disableRipple(value: any);
     private _disableRipple;
+    /** Whether the button is disabled. */
     get disabled(): boolean;
     set disabled(value: any);
     private _disabled;
+    /** `aria-disabled` value of the button. */
+    ariaDisabled: boolean | undefined;
+    /**
+     * Natively disabled buttons prevent focus and any pointer events from reaching the button.
+     * In some scenarios this might not be desirable, because it can prevent users from finding out
+     * why the button is disabled (e.g. via tooltip).
+     *
+     * Enabling this input will change the button so that it is styled to be disabled and will be
+     * marked as `aria-disabled`, but it will allow the button to receive events and focus.
+     *
+     * Note that by enabling this, you need to set the `tabindex` yourself if the button isn't
+     * meant to be tabbable and you have to prevent the button action (e.g. form submissions).
+     */
+    disabledInteractive: boolean;
     constructor(_elementRef: ElementRef, _platform: Platform, _ngZone: NgZone, _animationMode?: string | undefined);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     /** Focuses the button. */
-    focus(_origin?: FocusOrigin, options?: FocusOptions): void;
+    focus(origin?: FocusOrigin, options?: FocusOptions): void;
+    protected _getAriaDisabled(): boolean | null;
+    protected _getDisabledAttribute(): true | null;
     private _updateRippleDisabled;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatButtonBase, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatButtonBase, never, never, { "color": { "alias": "color"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatButtonBase, never, never, { "color": { "alias": "color"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "ariaDisabled": { "alias": "aria-disabled"; "required": false; }; "disabledInteractive": { "alias": "disabledInteractive"; "required": false; }; }, {}, never, never, false, never>;
     static ngAcceptInputType_disableRipple: unknown;
     static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_ariaDisabled: unknown;
+    static ngAcceptInputType_disabledInteractive: unknown;
+}
+
+/** Object that can be used to configure the default options for the button component. */
+export declare interface MatButtonConfig {
+    /** Whether disabled buttons should be interactive. */
+    disabledInteractive?: boolean;
 }
 
 export declare class MatButtonModule {

package/core/_core-theme.scss

@@ -6,7 +6,10 @@
 @use './option/optgroup-theme';
 @use './selection/pseudo-checkbox/pseudo-checkbox-theme';
 @use './style/elevation';
+@use './style/sass-utils';
 @use './typography/typography';
+@use './tokens/token-utils';
+@use './tokens/m2/mat/app' as tokens-mat-app;
 
 @mixin base($theme) {
   @include ripple-theme.base($theme);
@@ -21,13 +24,9 @@
   @include option-theme.color($theme);
   @include optgroup-theme.color($theme);
   @include pseudo-checkbox-theme.color($theme);
-
-  // Wrapper element that provides the theme background when the user's content isn't
-  // inside of a `mat-sidenav-container`. Note that we need to exclude the ampersand
-  // selector in case the mixin is included at the top level.
-  .mat-app-background#{if(&, ', &.mat-app-background', '')} {
-    background-color: inspection.get-theme-color($theme, background, background);
-    color: inspection.get-theme-color($theme, foreground, text);
+  @include sass-utils.current-selector-or-root() {
+    @include token-utils.create-token-values(tokens-mat-app.$prefix,
+      tokens-mat-app.get-color-tokens($theme));
   }
 
   // Provides external CSS classes for each elevation value. Each CSS class is formatted as

package/core/_core.scss

@@ -1,8 +1,9 @@
 @use '@angular/cdk';
-
-// Core styles that can be used to apply material design treatments to any element.
+@use './tokens/m2/mat/app' as tokens-mat-app;
+@use './tokens/token-utils';
 @use './ripple/ripple';
 @use './focus-indicators/private';
+@use './mdc-helpers/mdc-helpers';
 
 // Mixin that renders all of the core styles that are not theme-dependent.
 @mixin core() {
@@ -13,4 +14,18 @@
   @include cdk.text-field-autofill();
   @include private.structural-styling('mat');
   @include private.structural-styling('mat-mdc');
+
+  // Wrapper element that provides the theme background when the
+  // user's content isn't inside of a `mat-sidenav-container`.
+  @at-root {
+    .mat-app-background {
+      @include mdc-helpers.disable-mdc-fallback-declarations {
+        @include token-utils.use-tokens(tokens-mat-app.$prefix, tokens-mat-app.get-token-slots()) {
+          // Note: we need to emit fallback values here to avoid errors in internal builds.
+          @include token-utils.create-token-slot(background-color, background-color, transparent);
+          @include token-utils.create-token-slot(color, text-color, inherit);
+        }
+      }
+    }
+  }
 }

package/core/index.d.ts

@@ -17,6 +17,7 @@ import { Observable } from 'rxjs';
 import { OnDestroy } from '@angular/core';
 import { OnInit } from '@angular/core';
 import { Platform } from '@angular/cdk/platform';
+import { Provider } from '@angular/core';
 import { QueryList } from '@angular/core';
 import { Subject } from 'rxjs';
 import { Version } from '@angular/core';
@@ -549,7 +550,7 @@ export declare class MatLineModule {
 
 export declare class MatNativeDateModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatNativeDateModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatNativeDateModule, never, [typeof NativeDateModule], never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatNativeDateModule, never, never, never>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MatNativeDateModule>;
 }
 
@@ -815,6 +816,8 @@ export declare class MatRipple implements OnInit, OnDestroy, RippleTarget {
  *
  * This service allows us to avoid eagerly creating & attaching MatRipples.
  * It works by creating & attaching a ripple only when a component is first interacted with.
+ *
+ * @docs-private
  */
 export declare class MatRippleLoader implements OnDestroy {
     private _document;
@@ -822,6 +825,7 @@ export declare class MatRippleLoader implements OnDestroy {
     private _globalRippleOptions;
     private _platform;
     private _ngZone;
+    private _hosts;
     constructor();
     ngOnDestroy(): void;
     /**
@@ -842,8 +846,9 @@ export declare class MatRippleLoader implements OnDestroy {
     /** Handles creating and attaching component internals when a component it is initially interacted with. */
     private _onInteraction;
     /** Creates a MatRipple and appends it to the given element. */
-    createRipple(host: HTMLElement): MatRipple | undefined;
-    attachRipple(host: Element, ripple: MatRipple): void;
+    private _createRipple;
+    attachRipple(host: HTMLElement, ripple: MatRipple): void;
+    destroyRipple(host: HTMLElement): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatRippleLoader, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<MatRippleLoader>;
 }
@@ -948,6 +953,8 @@ export declare class NativeDateModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<NativeDateModule>;
 }
 
+export declare function provideNativeDateAdapter(formats?: MatDateFormats): Provider[];
+
 /**
  * Interface that describes the configuration for the animation of a ripple.
  * There are two animation phases with different durations for the ripples.