@angular/material 20.0.0-next.1 → 20.0.0-next.10

package/{core/tokens/m2/mat/_datepicker.scss → datepicker/_m2-datepicker.scss}

@@ -1,10 +1,10 @@
 @use 'sass:color';
 @use 'sass:meta';
 @use 'sass:math';
-@use '../../token-definition';
-@use '../../../theming/inspection';
-@use '../../../style/elevation';
-@use '../../../style/sass-utils';
+@use '../core/tokens/m2-utils';
+@use '../core/theming/inspection';
+@use '../core/style/elevation';
+@use '../core/style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, datepicker);
@@ -175,8 +175,8 @@ $private-default-overlap-color: #a8dab5;
 @function get-token-slots() {
   @return sass-utils.deep-merge-all(
       get-unthemable-tokens(),
-      get-color-tokens(token-definition.$placeholder-color-config),
-      get-typography-tokens(token-definition.$placeholder-typography-config),
-      get-density-tokens(token-definition.$placeholder-density-config)
+      get-color-tokens(m2-utils.$placeholder-color-config),
+      get-typography-tokens(m2-utils.$placeholder-typography-config),
+      get-density-tokens(m2-utils.$placeholder-density-config)
   );
 }

package/{core/tokens/m3/mat/_datepicker.scss → datepicker/_m3-datepicker.scss}

@@ -1,7 +1,7 @@
 @use 'sass:map';
-@use '../../../style/elevation';
-@use '../../../style/sass-utils';
-@use '../../token-definition';
+@use '../core/style/elevation';
+@use '../core/style/sass-utils';
+@use '../core/tokens/m3-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, datepicker);
@@ -12,7 +12,7 @@ $prefix: (mat, datepicker);
 /// @param {Map} $token-slots Possible token slots
 /// @return {Map} A set of custom tokens for the mat-datepicker
 @function get-tokens($systems, $exclude-hardcoded, $token-slots) {
-  $tokens: ((
+  $tokens: (
     calendar-date-in-range-state-background-color:
       map.get($systems, md-sys-color, primary-container),
     calendar-date-in-comparison-range-state-background-color:
@@ -42,7 +42,7 @@ $prefix: (mat, datepicker);
     calendar-period-button-text-color: map.get($systems, md-sys-color, on-surface-variant),
     calendar-period-button-icon-color: map.get($systems, md-sys-color, on-surface-variant),
     calendar-navigation-button-icon-color: map.get($systems, md-sys-color, on-surface-variant),
-    calendar-header-divider-color: token-definition.hardcode(transparent, $exclude-hardcoded),
+    calendar-header-divider-color: m3-utils.hardcode(transparent, $exclude-hardcoded),
     calendar-header-text-color: map.get($systems, md-sys-color, on-surface-variant),
     calendar-date-today-outline-color: map.get($systems, md-sys-color, primary),
     calendar-date-today-disabled-state-outline-color: sass-utils.safe-color-change(
@@ -50,7 +50,7 @@ $prefix: (mat, datepicker);
       $alpha: 0.38
     ),
     calendar-date-text-color: map.get($systems, md-sys-color, on-surface),
-    calendar-date-outline-color: token-definition.hardcode(transparent, $exclude-hardcoded),
+    calendar-date-outline-color: m3-utils.hardcode(transparent, $exclude-hardcoded),
     calendar-date-disabled-state-text-color: sass-utils.safe-color-change(
       map.get($systems, md-sys-color, on-surface),
       $alpha: 0.38
@@ -68,9 +68,9 @@ $prefix: (mat, datepicker);
     calendar-container-background-color: map.get($systems, md-sys-color, surface-container-high),
     calendar-container-text-color: map.get($systems, md-sys-color, on-surface),
     calendar-container-elevation-shadow:
-        token-definition.hardcode(elevation.get-box-shadow(0), $exclude-hardcoded),
+        m3-utils.hardcode(elevation.get-box-shadow(0), $exclude-hardcoded),
     calendar-container-touch-elevation-shadow:
-      token-definition.hardcode(elevation.get-box-shadow(0), $exclude-hardcoded),
+      m3-utils.hardcode(elevation.get-box-shadow(0), $exclude-hardcoded),
     calendar-container-shape: map.get($systems, md-sys-shape, corner-large),
     calendar-container-touch-shape: map.get($systems, md-sys-shape, corner-extra-large),
     calendar-text-font: map.get($systems, md-sys-typescale, body-medium-font),
@@ -81,7 +81,9 @@ $prefix: (mat, datepicker);
     calendar-period-button-text-weight: map.get($systems, md-sys-typescale, title-small-weight),
     calendar-header-text-size: map.get($systems, md-sys-typescale, title-small-size),
     calendar-header-text-weight: map.get($systems, md-sys-typescale, title-small-weight),
-  ), (
+  );
+
+  $variant-tokens: (
     // Color variants:
     primary: (), // Default, no overrides needed.
     secondary: (
@@ -117,7 +119,7 @@ $prefix: (mat, datepicker);
       calendar-date-today-outline-color: map.get($systems, md-sys-color, error),
       calendar-date-preview-state-outline-color: map.get($systems, md-sys-color, error),
     )
-  ));
+  );
 
-  @return token-definition.namespace-tokens($prefix, $tokens, $token-slots);
+  @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots);
 }

package/datepicker/index.d.ts

@@ -1,26 +1,25 @@
 import * as i0 from '@angular/core';
 import { OnChanges, OnDestroy, AfterViewChecked, EventEmitter, SimpleChanges, FactoryProvider, AfterContentInit, ChangeDetectorRef, AfterViewInit, ElementRef, InjectionToken, OnInit, DoCheck, TemplateRef } from '@angular/core';
-import { b as MatButton, m as MatButtonModule } from '../module.d-18a67f56.js';
+import { MatButton, MatButtonModule } from '../button/index.js';
 import * as i2 from '@angular/cdk/overlay';
-import { ScrollStrategy, Overlay } from '@angular/cdk/overlay';
+import { ScrollStrategy } from '@angular/cdk/overlay';
 import * as i1 from '@angular/cdk/a11y';
 import { FocusOrigin } from '@angular/cdk/a11y';
 import * as i3 from '@angular/cdk/portal';
 import { ComponentType, Portal, TemplatePortal } from '@angular/cdk/portal';
-import { M as MatCommonModule } from '../common-module.d-0e6515ae.js';
+import { M as MatCommonModule } from '../common-module.d-C8xzHJDr.js';
 import { Observable, Subject } from 'rxjs';
-import { D as DateAdapter$1 } from '../date-adapter.d-c6835d41.js';
-import { DateAdapter } from '@angular/material/core';
-import { T as ThemePalette } from '../palette.d-ec4a617c.js';
+import { D as DateAdapter } from '../date-adapter.d-CtKXIxk0.js';
+import { T as ThemePalette } from '../palette.d-BSSFKjO6.js';
 import { ControlValueAccessor, Validator, ValidatorFn, AbstractControl, ValidationErrors, NgForm, FormGroupDirective, NgControl } from '@angular/forms';
-import { M as MatFormFieldControl } from '../form-field-control.d-eb86711c.js';
+import { M as MatFormFieldControl } from '../form-field-control.d-DvB4ZVlf.js';
 import { Directionality } from '@angular/cdk/bidi';
-import { E as ErrorStateMatcher } from '../error-options.d-448d9046.js';
+import { E as ErrorStateMatcher } from '../error-options.d-CGdTZUYk.js';
 import * as i5 from '@angular/cdk/scrolling';
-import '../index.d-0536b706.js';
-import '../ripple.d-2fb57d04.js';
+import '../ripple-loader.d-9me-KFSi.js';
+import '../index.d-C5neTPvr.js';
+import '../ripple.d-BT30YVLB.js';
 import '@angular/cdk/platform';
-import '../ripple-loader.d-8aac2988.js';
 
 /** Extra CSS classes that can be associated with a calendar cell. */
 type MatCalendarCellCssClasses = string | string[] | Set<string> | {
@@ -379,7 +378,7 @@ declare const MAT_RANGE_DATE_SELECTION_MODEL_PROVIDER: FactoryProvider;
 declare class MatMonthView<D> implements AfterContentInit, OnChanges, OnDestroy {
     readonly _changeDetectorRef: ChangeDetectorRef;
     private _dateFormats;
-    _dateAdapter: DateAdapter$1<D, any>;
+    _dateAdapter: DateAdapter<D, any>;
     private _dir;
     private _rangeStrategy;
     private _rerenderSubscription;
@@ -534,7 +533,7 @@ declare const yearsPerRow = 4;
  */
 declare class MatMultiYearView<D> implements AfterContentInit, OnDestroy {
     private _changeDetectorRef;
-    _dateAdapter: DateAdapter$1<D, any>;
+    _dateAdapter: DateAdapter<D, any>;
     private _dir;
     private _rerenderSubscription;
     /** Flag used to filter out space/enter keyup events that originated outside of the view. */
@@ -624,7 +623,7 @@ declare class MatMultiYearView<D> implements AfterContentInit, OnDestroy {
 declare class MatYearView<D> implements AfterContentInit, OnDestroy {
     readonly _changeDetectorRef: ChangeDetectorRef;
     private _dateFormats;
-    _dateAdapter: DateAdapter$1<D, any>;
+    _dateAdapter: DateAdapter<D, any>;
     private _dir;
     private _rerenderSubscription;
     /** Flag used to filter out space/enter keyup events that originated outside of the view. */
@@ -916,7 +915,7 @@ type DateFilterFn<D> = (date: D | null) => boolean;
 /** Base class for datepicker inputs. */
 declare abstract class MatDatepickerInputBase<S, D = ExtractDateTypeFromSelection<S>> implements ControlValueAccessor, AfterViewInit, OnChanges, OnDestroy, Validator {
     protected _elementRef: ElementRef<HTMLInputElement>;
-    _dateAdapter: DateAdapter$1<D, any>;
+    _dateAdapter: DateAdapter<D, any>;
     private _dateFormats;
     /** Whether the component has been initialized. */
     private _isInitialized;
@@ -1019,7 +1018,7 @@ declare const MAT_DATEPICKER_SCROLL_STRATEGY: InjectionToken<() => ScrollStrateg
  * @deprecated No longer used, will be removed.
  * @breaking-change 21.0.0
  */
-declare function MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY(overlay: Overlay): () => ScrollStrategy;
+declare function MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY(_overlay: unknown): () => ScrollStrategy;
 /** Possible positions for the datepicker dropdown along the X axis. */
 type DatepickerDropdownPositionX = 'start' | 'end';
 /** Possible positions for the datepicker dropdown along the Y axis. */
@@ -1031,7 +1030,7 @@ type DatepickerDropdownPositionY = 'above' | 'below';
  */
 declare const MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER: {
     provide: InjectionToken<() => ScrollStrategy>;
-    deps: (typeof Overlay)[];
+    deps: any[];
     useFactory: typeof MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY;
 };
 /**
@@ -1151,11 +1150,12 @@ interface MatDatepickerPanel<C extends MatDatepickerControl<D>, S, D = ExtractDa
 }
 /** Base class for a datepicker. */
 declare abstract class MatDatepickerBase<C extends MatDatepickerControl<D>, S, D = ExtractDateTypeFromSelection<S>> implements MatDatepickerPanel<C, S, D>, OnDestroy, OnChanges {
-    private _overlay;
+    private _injector;
     private _viewContainerRef;
     private _dateAdapter;
     private _dir;
     private _model;
+    private _animationsDisabled;
     private _scrollStrategy;
     private _inputStateChanges;
     private _document;
@@ -1245,7 +1245,6 @@ declare abstract class MatDatepickerBase<C extends MatDatepickerControl<D>, S, D
     datepickerInput: C;
     /** Emits when the datepicker's state changes. */
     readonly stateChanges: Subject<void>;
-    private _injector;
     private readonly _changeDetectorRef;
     constructor(...args: unknown[]);
     ngOnChanges(changes: SimpleChanges): void;
@@ -1637,6 +1636,11 @@ declare class MatDateRangeInput<D> implements MatFormFieldControl<DateRange<D>>,
      */
     readonly disableAutomaticLabeling = true;
     constructor(...args: unknown[]);
+    /**
+     * Implemented as part of MatFormFieldControl.
+     * @docs-private
+     */
+    get describedByIds(): string[];
     /**
      * Implemented as a part of `MatFormFieldControl`.
      * @docs-private
@@ -1780,4 +1784,5 @@ declare const matDatepickerAnimations: {
     readonly fadeInCalendar: any;
 };
 
-export { type DateFilterFn, DateRange, type DateSelectionModelChange, type DatepickerDropdownPositionX, type DatepickerDropdownPositionY, DefaultMatCalendarRangeStrategy, type ExtractDateTypeFromSelection, MAT_DATEPICKER_SCROLL_STRATEGY, MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY, MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER, MAT_DATEPICKER_VALIDATORS, MAT_DATEPICKER_VALUE_ACCESSOR, MAT_DATE_RANGE_SELECTION_STRATEGY, MAT_RANGE_DATE_SELECTION_MODEL_FACTORY, MAT_RANGE_DATE_SELECTION_MODEL_PROVIDER, MAT_SINGLE_DATE_SELECTION_MODEL_FACTORY, MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER, MatCalendar, MatCalendarBody, MatCalendarCell, type MatCalendarCellClassFunction, type MatCalendarCellCssClasses, MatCalendarHeader, type MatCalendarUserEvent, type MatCalendarView, MatDateRangeInput, MatDateRangePicker, type MatDateRangeSelectionStrategy, MatDateSelectionModel, MatDatepicker, MatDatepickerActions, MatDatepickerApply, MatDatepickerCancel, MatDatepickerContent, type MatDatepickerControl, MatDatepickerInput, MatDatepickerInputEvent, MatDatepickerIntl, MatDatepickerModule, type MatDatepickerPanel, MatDatepickerToggle, MatDatepickerToggleIcon, MatEndDate, MatMonthView, MatMultiYearView, MatRangeDateSelectionModel, MatSingleDateSelectionModel, MatStartDate, MatYearView, matDatepickerAnimations, yearsPerPage, yearsPerRow };
+export { DateRange, DefaultMatCalendarRangeStrategy, MAT_DATEPICKER_SCROLL_STRATEGY, MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY, MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER, MAT_DATEPICKER_VALIDATORS, MAT_DATEPICKER_VALUE_ACCESSOR, MAT_DATE_RANGE_SELECTION_STRATEGY, MAT_RANGE_DATE_SELECTION_MODEL_FACTORY, MAT_RANGE_DATE_SELECTION_MODEL_PROVIDER, MAT_SINGLE_DATE_SELECTION_MODEL_FACTORY, MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER, MatCalendar, MatCalendarBody, MatCalendarCell, MatCalendarHeader, MatDateRangeInput, MatDateRangePicker, MatDateSelectionModel, MatDatepicker, MatDatepickerActions, MatDatepickerApply, MatDatepickerCancel, MatDatepickerContent, MatDatepickerInput, MatDatepickerInputEvent, MatDatepickerIntl, MatDatepickerModule, MatDatepickerToggle, MatDatepickerToggleIcon, MatEndDate, MatMonthView, MatMultiYearView, MatRangeDateSelectionModel, MatSingleDateSelectionModel, MatStartDate, MatYearView, matDatepickerAnimations, yearsPerPage, yearsPerRow };
+export type { DateFilterFn, DateSelectionModelChange, DatepickerDropdownPositionX, DatepickerDropdownPositionY, ExtractDateTypeFromSelection, MatCalendarCellClassFunction, MatCalendarCellCssClasses, MatCalendarUserEvent, MatCalendarView, MatDateRangeSelectionStrategy, MatDatepickerControl, MatDatepickerPanel };

package/datepicker/testing/index.d.ts

@@ -1,7 +1,7 @@
-import { D as DatepickerTriggerHarnessBase, a as DatepickerToggleHarnessFilters } from '../../date-range-input-harness.d-549a9f7e.js';
-export { c as CalendarCellHarnessFilters, C as CalendarHarnessFilters, h as CalendarView, d as DateRangeInputHarnessFilters, b as DatepickerInputHarnessFilters, a as DatepickerToggleHarnessFilters, j as MatCalendarCellHarness, i as MatCalendarHarness, g as MatDateRangeInputHarness, M as MatDatepickerInputHarness, f as MatEndDateHarness, e as MatStartDateHarness } from '../../date-range-input-harness.d-549a9f7e.js';
+import { D as DatepickerTriggerHarnessBase, a as DatepickerToggleHarnessFilters } from '../../date-range-input-harness.d-CaEyN8dT.js';
+export { c as CalendarCellHarnessFilters, C as CalendarHarnessFilters, h as CalendarView, d as DateRangeInputHarnessFilters, b as DatepickerInputHarnessFilters, j as MatCalendarCellHarness, i as MatCalendarHarness, g as MatDateRangeInputHarness, M as MatDatepickerInputHarness, f as MatEndDateHarness, e as MatStartDateHarness } from '../../date-range-input-harness.d-CaEyN8dT.js';
 import { HarnessPredicate } from '@angular/cdk/testing';
-import '../../form-field-control-harness.d-2d91f25a.js';
+import '../../form-field/testing/control/index.js';
 
 /** Harness for interacting with a standard Material datepicker toggle in tests. */
 declare class MatDatepickerToggleHarness extends DatepickerTriggerHarnessBase {
@@ -22,4 +22,4 @@ declare class MatDatepickerToggleHarness extends DatepickerTriggerHarnessBase {
     protected _openCalendar(): Promise<void>;
 }
 
-export { MatDatepickerToggleHarness };
+export { DatepickerToggleHarnessFilters, MatDatepickerToggleHarness };

package/dialog/_dialog-theme.scss

@@ -1,7 +1,6 @@
 @use 'sass:map';
 @use '../core/style/sass-utils';
-@use '../core/tokens/m2/mdc/dialog' as tokens-mdc-dialog;
-@use '../core/tokens/m2/mat/dialog' as tokens-mat-dialog;
+@use './m2-dialog';
 @use '../core/tokens/token-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
@@ -14,14 +13,8 @@
   } @else {
     // Add default values for tokens not related to color, typography, or density.
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
-        tokens-mdc-dialog.$prefix,
-        tokens-mdc-dialog.get-unthemable-tokens()
-      );
-      @include token-utils.create-token-values(
-        tokens-mat-dialog.$prefix,
-        tokens-mat-dialog.get-unthemable-tokens()
-      );
+      @include token-utils.create-token-values-mixed(
+        m2-dialog.$prefix, m2-dialog.get-unthemable-tokens());
     }
   }
 }
@@ -31,14 +24,8 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
-        tokens-mdc-dialog.$prefix,
-        tokens-mdc-dialog.get-color-tokens($theme)
-      );
-      @include token-utils.create-token-values(
-        tokens-mat-dialog.$prefix,
-        tokens-mat-dialog.get-color-tokens($theme)
-      );
+      @include token-utils.create-token-values-mixed(
+        m2-dialog.$prefix, m2-dialog.get-color-tokens($theme));
     }
   }
 }
@@ -48,21 +35,15 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
-        tokens-mdc-dialog.$prefix,
-        tokens-mdc-dialog.get-typography-tokens($theme)
-      );
-      @include token-utils.create-token-values(
-        tokens-mat-dialog.$prefix,
-        tokens-mat-dialog.get-typography-tokens($theme)
-      );
+      @include token-utils.create-token-values-mixed(
+        m2-dialog.$prefix, m2-dialog.get-typography-tokens($theme));
     }
   }
 }
 
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+    // There are no M3 density tokens for this component
   } @else {
   }
 }
@@ -71,12 +52,8 @@
 @function _define-overrides() {
   @return (
     (
-      namespace: tokens-mdc-dialog.$prefix,
-      tokens: tokens-mdc-dialog.get-token-slots(),
-    ),
-    (
-      namespace: tokens-mat-dialog.$prefix,
-      tokens: tokens-mat-dialog.get-token-slots(),
+      namespace: m2-dialog.$prefix,
+      tokens: m2-dialog.get-token-slots(),
     ),
   );
 }
@@ -110,12 +87,8 @@
   );
   @if ($tokens != ()) {
     @include token-utils.create-token-values(
-      tokens-mdc-dialog.$prefix,
-      map.get($tokens, tokens-mdc-dialog.$prefix)
-    );
-    @include token-utils.create-token-values(
-      tokens-mat-dialog.$prefix,
-      map.get($tokens, tokens-mat-dialog.$prefix)
+      m2-dialog.$prefix,
+      map.get($tokens, m2-dialog.$prefix)
     );
   }
 }

package/{core/tokens/m2/mdc/_dialog.scss → dialog/_m2-dialog.scss}

@@ -1,52 +1,28 @@
-@use '../../../theming/inspection';
-@use '../../../style/sass-utils';
-@use '../../token-definition';
+@use '../core/tokens/m2-utils';
+@use '../core/style/elevation';
+@use '../core/style/sass-utils';
+@use '../core/theming/inspection';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, dialog);
+$prefix: (mat, dialog);
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
-//
-// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`.
-// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in
-// our CSS.
 @function get-unthemable-tokens() {
   @return (
-    // Border radius of the container.
     container-shape: 4px,
-    // =============================================================================================
-    // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
-    // =============================================================================================
-    container-elevation: null,
-    container-shadow-color: null,
-    with-divider-divider-height: null,
-    with-divider-divider-color: null,
-    with-icon-icon-size: null,
-    with-icon-icon-color: null,
-    action-label-text-font: null,
-    action-label-text-line-height: null,
-    action-label-text-size: null,
-    action-label-text-weight: null,
-    action-label-text-tracking: null,
-    action-label-text-color: null,
-    action-hover-state-layer-color: null,
-    action-hover-state-layer-opacity: null,
-    action-hover-label-text-color: null,
-    action-focus-state-layer-color: null,
-    action-focus-state-layer-opacity: null,
-    action-focus-label-text-color: null,
-    action-pressed-state-layer-color: null,
-    action-pressed-state-layer-opacity: null,
-    action-pressed-label-text-color: null,
-    headline-color: null,
-    headline-font: null,
-    headline-line-height: null,
-    headline-size: null,
-    headline-tracking: null,
-    headline-weight: null,
-    z-index: null,
-    container-surface-tint-layer-color: null,
+    container-elevation-shadow: elevation.get-box-shadow(24),
+    container-max-width: 80vw,
+    container-small-max-width: 80vw,
+    container-min-width: 0,
+    actions-alignment: start,
+    actions-padding: 8px,
+    content-padding: 20px 24px,
+    with-actions-content-padding: 20px 24px,
+
+    // Note: the CSS class is `title` while the M2 tokens call it `subhead`.
+    // M3 calls it `headline` which is what we're aligning with.
+    headline-padding: 0 24px 9px,
   );
 }
 
@@ -56,17 +32,14 @@ $prefix: (mdc, dialog);
 
   // Ideally we would derive all values directly from the theme, but it causes a lot of regressions
   // internally. For now we fall back to the old hardcoded behavior only for internal apps.
-  $text-base: if(token-definition.$private-is-internal-build,
+  $text-base: if(m2-utils.$private-is-internal-build,
     if($is-dark, #fff, #000),
     inspection.get-theme-color($theme, foreground, text, 1)
   );
 
   @return (
-    // Background color of the container.
     container-color: inspection.get-theme-color($theme, background, dialog),
-    // Color of the dialog header.
     subhead-color: sass-utils.safe-color-change($text-base, $alpha: 0.87),
-    // Color of the dialog body text.
     supporting-text-color: sass-utils.safe-color-change($text-base, $alpha: 0.6),
   );
 }
@@ -74,13 +47,11 @@ $prefix: (mdc, dialog);
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
   @return (
-    // Typography of the dialog header.
     subhead-font: inspection.get-theme-typography($theme, headline-6, font-family),
     subhead-line-height: inspection.get-theme-typography($theme, headline-6, line-height),
     subhead-size: inspection.get-theme-typography($theme, headline-6, font-size),
     subhead-weight: inspection.get-theme-typography($theme, headline-6, font-weight),
     subhead-tracking: inspection.get-theme-typography($theme, headline-6, letter-spacing),
-    // Typography of the dialog body text.
     supporting-text-font: inspection.get-theme-typography($theme, body-1, font-family),
     supporting-text-line-height: inspection.get-theme-typography($theme, body-1, line-height),
     supporting-text-size: inspection.get-theme-typography($theme, body-1, font-size),
@@ -99,8 +70,8 @@ $prefix: (mdc, dialog);
 @function get-token-slots() {
   @return sass-utils.deep-merge-all(
       get-unthemable-tokens(),
-      get-color-tokens(token-definition.$placeholder-color-config),
-      get-typography-tokens(token-definition.$placeholder-typography-config),
-      get-density-tokens(token-definition.$placeholder-density-config)
+      get-color-tokens(m2-utils.$placeholder-color-config),
+      get-typography-tokens(m2-utils.$placeholder-typography-config),
+      get-density-tokens(m2-utils.$placeholder-density-config)
   );
 }

package/dialog/_m3-dialog.scss

@@ -0,0 +1,47 @@
+@use '../core/tokens/m3-utils';
+@use 'sass:map';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, dialog);
+
+/// Generates custom tokens for the dialog.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @param {Map} $token-slots Possible token slots
+/// @return {Map} A set of custom tokens for the dialog
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  // headline-padding:
+  // The vertical padding values are a bit weird, because MDC uses a `::before` pseudo
+  // element to size the title which in turn means that we can't set a specific padding
+  // and get the exact same space out of it. These values were determined through
+  // trial and error so that the first line of text is 24px from the top and the bottom
+  // of the text is 16px from the content under it.
+  $tokens: (
+    actions-alignment: m3-utils.hardcode(flex-end, $exclude-hardcoded),
+    actions-padding: m3-utils.hardcode(16px 24px, $exclude-hardcoded),
+    container-color: map.get($systems, md-sys-color, surface),
+    container-elevation-shadow: m3-utils.hardcode(none, $exclude-hardcoded),
+    container-max-width: m3-utils.hardcode(560px, $exclude-hardcoded),
+    container-min-width: m3-utils.hardcode(280px, $exclude-hardcoded),
+    container-shape: map.get($systems, md-sys-shape, corner-extra-large),
+    container-small-max-width:
+    m3-utils.hardcode(calc(100vw - 32px), $exclude-hardcoded),
+    content-padding: m3-utils.hardcode(20px 24px, $exclude-hardcoded),
+    headline-padding: m3-utils.hardcode(6px 24px 13px, $exclude-hardcoded),
+    subhead-color: map.get($systems, md-sys-color, on-surface),
+    subhead-font: map.get($systems, md-sys-typescale, headline-small-font),
+    subhead-line-height: map.get($systems, md-sys-typescale, headline-small-line-height),
+    subhead-size: map.get($systems, md-sys-typescale, headline-small-size),
+    subhead-tracking: map.get($systems, md-sys-typescale, headline-small-tracking),
+    subhead-weight: map.get($systems, md-sys-typescale, headline-small-weight),
+    supporting-text-color: map.get($systems, md-sys-color, on-surface-variant),
+    supporting-text-font: map.get($systems, md-sys-typescale, body-medium-font),
+    supporting-text-line-height: map.get($systems, md-sys-typescale, body-medium-line-height),
+    supporting-text-size: map.get($systems, md-sys-typescale, body-medium-size),
+    supporting-text-tracking: map.get($systems, md-sys-typescale, body-medium-tracking),
+    supporting-text-weight: map.get($systems, md-sys-typescale, body-medium-weight),
+    with-actions-content-padding: m3-utils.hardcode(20px 24px 0, $exclude-hardcoded),
+  );
+
+  @return m3-utils.namespace($prefix, $tokens, $token-slots);
+}

package/dialog/index.d.ts

@@ -1,12 +1,12 @@
-import { M as MatDialogRef, a as MatDialogContainer } from '../dialog.d-57867441.js';
-export { A as AutoFocusTarget, f as DialogPosition, D as DialogRole, b as MAT_DIALOG_DATA, c as MAT_DIALOG_DEFAULT_OPTIONS, d as MAT_DIALOG_SCROLL_STRATEGY, e as MatDialog, g as MatDialogConfig, a as MatDialogContainer, M as MatDialogRef, h as MatDialogState, _ as _closeDialogVia } from '../dialog.d-57867441.js';
+import { M as MatDialogRef, a as MatDialogContainer } from '../dialog.d-DsYAn2Gk.js';
+export { A as AutoFocusTarget, f as DialogPosition, D as DialogRole, b as MAT_DIALOG_DATA, c as MAT_DIALOG_DEFAULT_OPTIONS, d as MAT_DIALOG_SCROLL_STRATEGY, e as MatDialog, g as MatDialogConfig, h as MatDialogState, _ as _closeDialogVia } from '../dialog.d-DsYAn2Gk.js';
 import * as i0 from '@angular/core';
 import { OnInit, OnChanges, SimpleChanges, OnDestroy } from '@angular/core';
 import * as i5 from '@angular/cdk/scrolling';
 import * as i1 from '@angular/cdk/dialog';
 import * as i2 from '@angular/cdk/overlay';
 import * as i3 from '@angular/cdk/portal';
-import { M as MatCommonModule } from '../common-module.d-0e6515ae.js';
+import { M as MatCommonModule } from '../common-module.d-C8xzHJDr.js';
 import '@angular/cdk/bidi';
 import '@angular/cdk/a11y';
 import 'rxjs';
@@ -104,4 +104,4 @@ declare const matDialogAnimations: {
     readonly dialogContainer: any;
 };
 
-export { MatDialogActions, MatDialogClose, MatDialogContent, MatDialogModule, MatDialogTitle, _defaultParams, matDialogAnimations };
+export { MatDialogActions, MatDialogClose, MatDialogContainer, MatDialogContent, MatDialogModule, MatDialogRef, MatDialogTitle, _defaultParams, matDialogAnimations };

package/dialog/testing/index.d.ts

@@ -1,12 +1,12 @@
 import * as _angular_cdk_testing from '@angular/cdk/testing';
 import { BaseHarnessFilters, ContentContainerComponentHarness, ComponentHarnessConstructor, HarnessPredicate } from '@angular/cdk/testing';
-import { D as DialogRole, e as MatDialog, g as MatDialogConfig, M as MatDialogRef } from '../../dialog.d-57867441.js';
+import { D as DialogRole, e as MatDialog, g as MatDialogConfig, M as MatDialogRef } from '../../dialog.d-DsYAn2Gk.js';
 import { ComponentType } from '@angular/cdk/overlay';
 import { OnDestroy } from '@angular/core';
 import '@angular/cdk/bidi';
+import '@angular/cdk/dialog';
 import '@angular/cdk/a11y';
 import 'rxjs';
-import '@angular/cdk/dialog';
 import '@angular/cdk/portal';
 
 /** A set of criteria that can be used to filter a list of `MatDialogHarness` instances. */
@@ -79,4 +79,5 @@ declare class MatTestDialogOpener<T = unknown, R = unknown> implements OnDestroy
 declare class MatTestDialogOpenerModule {
 }
 
-export { type DialogHarnessFilters, MatDialogHarness, MatDialogSection, MatTestDialogOpener, MatTestDialogOpenerModule };
+export { MatDialogHarness, MatDialogSection, MatTestDialogOpener, MatTestDialogOpenerModule };
+export type { DialogHarnessFilters };

package/{dialog.d-57867441.d.ts → dialog.d-DsYAn2Gk.d.ts}

@@ -2,9 +2,9 @@ import { ScrollStrategy, ComponentType } from '@angular/cdk/overlay';
 import * as i0 from '@angular/core';
 import { ViewContainerRef, Injector, OnDestroy, EventEmitter, ComponentRef, InjectionToken, TemplateRef } from '@angular/core';
 import { Direction } from '@angular/cdk/bidi';
+import { DialogConfig, CdkDialogContainer, DialogRef, Dialog } from '@angular/cdk/dialog';
 import { FocusOrigin } from '@angular/cdk/a11y';
 import { Observable, Subject } from 'rxjs';
-import { CdkDialogContainer, DialogRef, Dialog } from '@angular/cdk/dialog';
 import { ComponentPortal } from '@angular/cdk/portal';
 
 /** Options for where to set focus to automatically on dialog open */
@@ -50,6 +50,8 @@ declare class MatDialogConfig<D = any> {
     backdropClass?: string | string[];
     /** Whether the user can use escape or clicking on the backdrop to close the modal. */
     disableClose?: boolean;
+    /** Function used to determine whether the dialog is allowed to close. */
+    closePredicate?: <Result = unknown, Component = unknown, Config extends DialogConfig = MatDialogConfig>(result: Result | undefined, config: Config, componentInstance: Component | null) => boolean;
     /** Width of the dialog. */
     width?: string;
     /** Height of the dialog. */
@@ -121,7 +123,6 @@ interface LegacyDialogAnimationEvent {
     totalTime: number;
 }
 declare class MatDialogContainer extends CdkDialogContainer<MatDialogConfig> implements OnDestroy {
-    private _animationMode;
     /** Emits when an animation state changes. */
     _animationStateChanged: EventEmitter<LegacyDialogAnimationEvent>;
     /** Whether animations are enabled. */
@@ -188,6 +189,7 @@ declare enum MatDialogState {
  */
 declare class MatDialogRef<T, R = any> {
     private _ref;
+    private _config;
     _containerInstance: MatDialogContainer;
     /** The instance of component opened into the dialog. */
     componentInstance: T;
@@ -212,7 +214,7 @@ declare class MatDialogRef<T, R = any> {
     private _state;
     /** Interaction that caused the dialog to close. */
     private _closeInteractionType;
-    constructor(_ref: DialogRef<R, T>, config: MatDialogConfig, _containerInstance: MatDialogContainer);
+    constructor(_ref: DialogRef<R, T>, _config: MatDialogConfig, _containerInstance: MatDialogContainer);
     /**
      * Close the dialog.
      * @param dialogResult Optional result to return to the dialog opener.
@@ -278,12 +280,13 @@ declare const MAT_DIALOG_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
  * Service to open Material Design modal dialogs.
  */
 declare class MatDialog implements OnDestroy {
-    private _overlay;
     private _defaultOptions;
     private _scrollStrategy;
     private _parentDialog;
     private _idGenerator;
+    private _injector;
     protected _dialog: Dialog;
+    private _animationsDisabled;
     private readonly _openDialogsAtThisLevel;
     private readonly _afterAllClosedAtThisLevel;
     private readonly _afterOpenedAtThisLevel;
@@ -332,4 +335,5 @@ declare class MatDialog implements OnDestroy {
     static ɵprov: i0.ɵɵInjectableDeclaration<MatDialog>;
 }
 
-export { type AutoFocusTarget as A, type DialogRole as D, MatDialogRef as M, _closeDialogVia as _, MatDialogContainer as a, MAT_DIALOG_DATA as b, MAT_DIALOG_DEFAULT_OPTIONS as c, MAT_DIALOG_SCROLL_STRATEGY as d, MatDialog as e, type DialogPosition as f, MatDialogConfig as g, MatDialogState as h };
+export { MatDialogRef as M, _closeDialogVia as _, MatDialogContainer as a, MAT_DIALOG_DATA as b, MAT_DIALOG_DEFAULT_OPTIONS as c, MAT_DIALOG_SCROLL_STRATEGY as d, MatDialog as e, MatDialogConfig as g, MatDialogState as h };
+export type { AutoFocusTarget as A, DialogRole as D, DialogPosition as f };