@angular/material 15.0.0-next.4 → 15.0.0-rc.0

package/_index.scss

@@ -15,7 +15,7 @@
   font-size, line-height, font-weight, letter-spacing, font-family, font-shorthand;
 
 // Private/Internal
-@forward './core/density/private/all-density' as private-* show private-all-component-densities;
+@forward './core/density/private/all-density' show all-component-densities;
 @forward './legacy-core/density/private/all-density' as private-* show
   private-all-legacy-component-densities;
 @forward './core/theming/theming' show private-check-duplicate-theme-styles,
@@ -78,18 +78,20 @@
   autocomplete-color, autocomplete-typography, autocomplete-density;
 @forward './legacy-autocomplete/autocomplete-theme' as legacy-autocomplete-* show
   legacy-autocomplete-theme, legacy-autocomplete-color, legacy-autocomplete-typography;
-@forward './badge/badge-theme' as badge-* show badge-theme, badge-color, badge-typography;
+@forward './badge/badge-theme' as badge-* show badge-theme, badge-color, badge-typography,
+  badge-density;
 @forward './bottom-sheet/bottom-sheet-theme' as bottom-sheet-* show bottom-sheet-theme,
-  bottom-sheet-color, bottom-sheet-typography;
+  bottom-sheet-color, bottom-sheet-typography, bottom-sheet-density;
 @forward './legacy-button/button-theme' as legacy-button-* show legacy-button-theme,
   legacy-button-color, legacy-button-typography;
-@forward './button/button-theme' as button-* show button-theme, button-color, button-typography;
+@forward './button/button-theme' as button-* show button-theme, button-color, button-typography,
+  button-density;
 @forward './button/fab-theme' as fab-* show fab-color, fab-typography,
   fab-density, fab-theme;
 @forward './button/icon-button-theme' as icon-button-* show icon-button-color,
   icon-button-typography, icon-button-density, icon-button-theme;
 @forward './button-toggle/button-toggle-theme' as button-toggle-* show button-toggle-theme,
-  button-toggle-color, button-toggle-typography;
+  button-toggle-color, button-toggle-typography, button-toggle-density;
 @forward './card/card-theme' as card-* show card-theme, card-color, card-typography, card-density;
 @forward './legacy-card/card-theme' as legacy-card-* show legacy-card-theme, legacy-card-color,
   legacy-card-typography;
@@ -102,35 +104,35 @@
 @forward './chips/chips-theme' as chips-* show chips-theme, chips-color, chips-typography,
   chips-density;
 @forward './datepicker/datepicker-theme' as datepicker-* show datepicker-theme, datepicker-color,
-  datepicker-typography, datepicker-date-range-colors;
+  datepicker-typography, datepicker-date-range-colors, datepicker-density;
 @forward './legacy-dialog/dialog-theme' as legacy-dialog-* show legacy-dialog-theme,
   legacy-dialog-color, legacy-dialog-typography;
 @forward './dialog/dialog-theme' as dialog-* show dialog-theme, dialog-color, dialog-typography,
   dialog-density;
 @forward './dialog/dialog-legacy-padding' as dialog-* show dialog-legacy-padding;
 @forward './divider/divider-theme' as divider-* show divider-theme, divider-color,
-  divider-typography;
+  divider-typography, divider-density;
 @forward './expansion/expansion-theme' as expansion-* show expansion-theme, expansion-color,
-  expansion-typography;
+  expansion-typography, expansion-density;
 @forward './form-field/form-field-theme' as form-field-* show form-field-theme,
   form-field-color, form-field-typography, form-field-density;
 @forward './legacy-form-field/form-field-theme' as legacy-form-field-* show legacy-form-field-theme,
   legacy-form-field-color, legacy-form-field-typography;
 @forward './grid-list/grid-list-theme' as grid-list-* show grid-list-theme, grid-list-color,
-  grid-list-typography;
-@forward './icon/icon-theme' as icon-* show icon-theme, icon-color, icon-typography;
+  grid-list-typography, grid-list-density;
+@forward './icon/icon-theme' as icon-* show icon-theme, icon-color, icon-typography, icon-density;
 @forward './legacy-input/input-theme' as legacy-input-* show legacy-input-theme, legacy-input-color,
   legacy-input-typography;
 @forward './input/input-theme' as input-* show input-theme, input-color, input-typography,
   input-density;
-@forward './list/list-theme' as list-* show list-theme, list-color, list-typography;
+@forward './list/list-theme' as list-* show list-theme, list-color, list-typography, list-density;
 @forward './legacy-list/list-theme' as legacy-list-* show legacy-list-theme, legacy-list-color,
   legacy-list-typography;
-@forward './menu/menu-theme' as menu-* show menu-theme, menu-color, menu-typography;
+@forward './menu/menu-theme' as menu-* show menu-theme, menu-color, menu-typography, menu-density;
 @forward './legacy-menu/menu-theme' as legacy-menu-* show legacy-menu-theme, legacy-menu-color,
   legacy-menu-typography;
 @forward './paginator/paginator-theme' as paginator-* show paginator-theme, paginator-color,
-  paginator-typography;
+  paginator-typography, paginator-density;
 @forward './legacy-paginator/paginator-theme' as legacy-paginator-* show legacy-paginator-theme,
   legacy-paginator-color, legacy-paginator-typography;
 @forward './legacy-progress-bar/progress-bar-theme' as legacy-progress-bar-* show
@@ -138,7 +140,8 @@
 @forward './progress-bar/progress-bar-theme' as progress-bar-* show
   progress-bar-theme, progress-bar-color, progress-bar-typography, progress-bar-density;
 @forward './progress-spinner/progress-spinner-theme' as progress-spinner-* show
-  progress-spinner-theme, progress-spinner-color, progress-spinner-typography;
+  progress-spinner-theme, progress-spinner-color, progress-spinner-typography,
+  progress-spinner-density;
 @forward './legacy-progress-spinner/progress-spinner-theme' as legacy-progress-spinner-* show
   legacy-progress-spinner-theme, legacy-progress-spinner-color, legacy-progress-spinner-typography;
 @forward './radio/radio-theme' as radio-* show radio-theme, radio-color, radio-typography,
@@ -150,21 +153,22 @@
 @forward './legacy-select/select-theme' as legacy-select-* show legacy-select-theme,
   legacy-select-color, legacy-select-typography;
 @forward './sidenav/sidenav-theme' as sidenav-* show sidenav-theme, sidenav-color,
-  sidenav-typography;
+  sidenav-typography, sidenav-density;
 @forward './legacy-slide-toggle/slide-toggle-theme' as legacy-slide-toggle-* show
   legacy-slide-toggle-theme, legacy-slide-toggle-color, legacy-slide-toggle-typography;
 @forward './slide-toggle/slide-toggle-theme' as slide-toggle-* show
   slide-toggle-theme, slide-toggle-color, slide-toggle-typography, slide-toggle-density;
 @forward './legacy-slider/slider-theme' as legacy-slider-* show legacy-slider-theme,
   legacy-slider-color, legacy-slider-typography;
-@forward './slider/slider-theme' as slider-* show slider-theme, slider-color, slider-typography;
+@forward './slider/slider-theme' as slider-* show slider-theme, slider-color, slider-typography,
+  slider-density;
 @forward './snack-bar/snack-bar-theme' as snack-bar-* show snack-bar-theme, snack-bar-color,
   snack-bar-typography, snack-bar-density;
 @forward './legacy-snack-bar/snack-bar-theme' as legacy-snack-bar-* show legacy-snack-bar-theme,
   legacy-snack-bar-color, legacy-snack-bar-typography;
-@forward './sort/sort-theme' as sort-* show sort-theme, sort-color, sort-typography;
+@forward './sort/sort-theme' as sort-* show sort-theme, sort-color, sort-typography, sort-density;
 @forward './stepper/stepper-theme' as stepper-* show stepper-theme, stepper-color,
-  stepper-typography;
+  stepper-typography, stepper-density;
 @forward './table/table-theme' as table-* show table-theme, table-color, table-typography,
   table-density;
 @forward './legacy-table/table-theme' as legacy-table-* show legacy-table-theme, legacy-table-color,
@@ -173,12 +177,12 @@
 @forward './legacy-tabs/tabs-theme' as legacy-tabs-* show legacy-tabs-theme, legacy-tabs-color,
 legacy-tabs-typography;
 @forward './toolbar/toolbar-theme' as toolbar-* show toolbar-theme, toolbar-color,
-  toolbar-typography;
+  toolbar-typography, toolbar-density;
 @forward './legacy-tooltip/tooltip-theme' as legacy-tooltip-* show legacy-tooltip-theme,
   legacy-tooltip-color, legacy-tooltip-typography;
 @forward './tooltip/tooltip-theme' as tooltip-* show tooltip-theme, tooltip-color,
   tooltip-typography, tooltip-density;
-@forward './tree/tree-theme' as tree-* show tree-theme, tree-color, tree-typography;
+@forward './tree/tree-theme' as tree-* show tree-theme, tree-color, tree-typography, tree-density;
 
 // MDC Helpers
 @forward './core/mdc-helpers/mdc-helpers' as private-* show private-using-mdc-theme,

package/badge/_badge-legacy-index.scss

@@ -1,3 +1,3 @@
 @forward 'badge-theme' hide $default-size, $font-size, $font-weight, $large-size, $small-size,
-color, theme, typography;
+color, theme, typography, density;
 @forward 'badge-theme' as mat-badge-* hide mat-badge-density, mat-badge-size;

package/badge/_badge-theme.import.scss

@@ -2,7 +2,7 @@
 @forward '../core/typography/typography-utils.import';
 @forward '../../cdk/a11y/index.import';
 @forward 'badge-theme' hide $default-size, $font-size, $font-weight, $large-size, $small-size,
-color, theme, typography;
+color, theme, typography, density;
 @forward 'badge-theme' as mat-badge-* hide mat-badge-density, mat-badge-size;
 
 @import '../core/theming/palette';

package/badge/_badge-theme.scss

@@ -229,7 +229,7 @@ $_badge-structure-emitted: false !default;
   }
 }
 
-@mixin _density($config-or-theme) {}
+@mixin density($config-or-theme) {}
 
 @mixin theme($theme-or-color-config) {
   $theme: theming.private-legacy-get-theme($theme-or-color-config);
@@ -254,7 +254,7 @@ $_badge-structure-emitted: false !default;
       @include color($color);
     }
     @if $density != null {
-      @include _density($density);
+      @include density($density);
     }
     @if $typography != null {
       @include typography($typography);

package/bottom-sheet/_bottom-sheet-legacy-index.scss

@@ -1,2 +1,2 @@
-@forward 'bottom-sheet-theme' hide color, theme, typography;
+@forward 'bottom-sheet-theme' hide color, theme, typography, density;
 @forward 'bottom-sheet-theme' as mat-bottom-sheet-* hide mat-bottom-sheet-density;

package/bottom-sheet/_bottom-sheet-theme.import.scss

@@ -1,7 +1,7 @@
 @forward '../core/style/private.import';
 @forward '../core/theming/theming.import';
 @forward '../core/typography/typography-utils.import';
-@forward 'bottom-sheet-theme' hide color, theme, typography;
+@forward 'bottom-sheet-theme' hide color, theme, typography, density;
 @forward 'bottom-sheet-theme' as mat-bottom-sheet-* hide mat-bottom-sheet-density;
 
 @import '../core/style/private';

package/bottom-sheet/_bottom-sheet-theme.scss

@@ -24,7 +24,7 @@
   }
 }
 
-@mixin _density($config-or-theme) {}
+@mixin density($config-or-theme) {}
 
 @mixin theme($theme-or-color-config) {
   $theme: theming.private-legacy-get-theme($theme-or-color-config);
@@ -37,7 +37,7 @@
       @include color($color);
     }
     @if $density != null {
-      @include _density($density);
+      @include density($density);
     }
     @if $typography != null {
       @include typography($typography);

package/button/testing/index.d.ts

@@ -7,8 +7,13 @@ import { HarnessPredicate } from '@angular/cdk/testing';
 export declare interface ButtonHarnessFilters extends BaseHarnessFilters {
     /** Only find instances whose text matches the given value. */
     text?: string | RegExp;
+    /** Only find instances with a variant. */
+    variant?: ButtonVariant;
 }
 
+/** Possible button appearances. */
+export declare type ButtonVariant = 'basic' | 'raised' | 'flat' | 'icon' | 'stroked' | 'fab' | 'mini-fab';
+
 /** Harness for interacting with a MDC-based mat-button in tests. */
 export declare class MatButtonHarness extends ContentContainerComponentHarness {
     static hostSelector: string;
@@ -17,6 +22,7 @@ export declare class MatButtonHarness extends ContentContainerComponentHarness {
      * @param options Options for narrowing the search:
      *   - `selector` finds a button whose host element matches the given selector.
      *   - `text` finds a button with specific text content.
+     *   - `variant` finds buttons matching a specific variant.
      * @return a `HarnessPredicate` configured with the given options.
      */
     static with<T extends MatButtonHarness>(this: ComponentHarnessConstructor<T>, options?: ButtonHarnessFilters): HarnessPredicate<T>;
@@ -40,6 +46,8 @@ export declare class MatButtonHarness extends ContentContainerComponentHarness {
     blur(): Promise<void>;
     /** Whether the button is focused. */
     isFocused(): Promise<boolean>;
+    /** Gets the variant of the button. */
+    getVariant(): Promise<ButtonVariant>;
 }
 
 export { }

package/chips/index.d.ts

@@ -258,6 +258,18 @@ declare class MatChipAction extends _MatChipActionMixinBase implements HasTabInd
     get disabled(): boolean;
     set disabled(value: BooleanInput);
     private _disabled;
+    /**
+     * Private API to allow focusing this chip when it is disabled.
+     */
+    private _allowFocusWhenDisabled;
+    /**
+     * Determine the value of the disabled attribute for this chip action.
+     */
+    protected _getDisabledAttribute(): string | null;
+    /**
+     * Determine the value of the tabindex attribute for this chip action.
+     */
+    protected _getTabindex(): string | null;
     constructor(_elementRef: ElementRef<HTMLElement>, _parentChip: {
         _handlePrimaryActionInteraction(): void;
         remove(): void;
@@ -267,7 +279,7 @@ declare class MatChipAction extends _MatChipActionMixinBase implements HasTabInd
     _handleClick(event: MouseEvent): void;
     _handleKeydown(event: KeyboardEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipAction, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatChipAction, "[matChipAction]", never, { "disabled": "disabled"; "tabIndex": "tabIndex"; "isInteractive": "isInteractive"; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatChipAction, "[matChipAction]", never, { "disabled": "disabled"; "tabIndex": "tabIndex"; "isInteractive": "isInteractive"; "_allowFocusWhenDisabled": "_allowFocusWhenDisabled"; }, {}, never, never, false, never>;
 }
 
 declare abstract class _MatChipActionBase {
@@ -276,10 +288,7 @@ declare abstract class _MatChipActionBase {
 
 declare const _MatChipActionMixinBase: _Constructor<HasTabIndex> & _AbstractConstructor<HasTabIndex> & typeof _MatChipActionBase;
 
-/**
- * Directive to add CSS classes to chip leading icon.
- * @docs-private
- */
+/** Avatar image within a chip. */
 export declare class MatChipAvatar {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipAvatar, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatChipAvatar, "mat-chip-avatar, [matChipAvatar]", never, {}, {}, never, never, false, never>;
@@ -689,6 +698,11 @@ export declare class MatChipListbox extends MatChipSet implements AfterContentIn
     private _syncListboxProperties;
     /** Returns the first selected chip in this listbox, or undefined if no chips are selected. */
     private _getFirstSelectedChip;
+    /**
+     * Determines if key manager should avoid putting a given chip action in the tab index. Skip
+     * non-interactive actions since the user can't do anything with them.
+     */
+    protected _skipPredicate(action: MatChipAction): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipListbox, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatChipListbox, "mat-chip-listbox", never, { "tabIndex": "tabIndex"; "multiple": "multiple"; "ariaOrientation": "aria-orientation"; "selectable": "selectable"; "compareWith": "compareWith"; "required": "required"; "value": "value"; }, { "change": "change"; }, ["_chips"], ["*"], false, never>;
 }
@@ -717,8 +731,10 @@ declare const _MatChipMixinBase: _Constructor<HasTabIndex> & _AbstractConstructo
 };
 
 /**
- * An extension of the MatChip component that supports chip selection.
- * Used with MatChipListbox.
+ * An extension of the MatChip component that supports chip selection. Used with MatChipListbox.
+ *
+ * Unlike other chips, the user can focus on disabled chip options inside a MatChipListbox. The
+ * user cannot click disabled chips.
  */
 export declare class MatChipOption extends MatChip implements OnInit {
     /** Whether the chip list is selectable. */
@@ -739,7 +755,19 @@ export declare class MatChipOption extends MatChip implements OnInit {
     get selected(): boolean;
     set selected(value: BooleanInput);
     private _selected;
-    /** The ARIA selected applied to the chip. */
+    /**
+     * The ARIA selected applied to the chip. Conforms to WAI ARIA best practices for listbox
+     * interaction patterns.
+     *
+     * From [WAI ARIA Listbox authoring practices guide](
+     * https://www.w3.org/WAI/ARIA/apg/patterns/listbox/):
+     *  "If any options are selected, each selected option has either aria-selected or aria-checked
+     *  set to true. All options that are selectable but not selected have either aria-selected or
+     *  aria-checked set to false."
+     *
+     * Set `aria-selected="false"` on not-selected listbox options that are selectable to fix
+     * VoiceOver reading every option as "selected" (#25736).
+     */
     get ariaSelected(): string | null;
     /** The unstyled chip selector for this component. */
     protected basicChipAttrName: string;
@@ -914,6 +942,11 @@ export declare class MatChipSet extends _MatChipSetMixinBase implements AfterVie
     protected _originatesFromChip(event: Event): boolean;
     /** Sets up the chip set's focus management logic. */
     private _setUpFocusManagement;
+    /**
+     * Determines if key manager should avoid putting a given chip action in the tab index. Skip
+     * non-interactive and disabled actions since the user can't do anything with them.
+     */
+    protected _skipPredicate(action: MatChipAction): boolean;
     /** Listens to changes in the chip set and syncs up the state of the individual chips. */
     private _trackChipSetChanges;
     /** Starts tracking the destroyed chips in order to capture the focused one. */
@@ -961,10 +994,7 @@ export declare interface MatChipTextControl {
     setDescribedByIds(ids: string[]): void;
 }
 
-/**
- * Directive to add CSS classes to and configure attributes for chip trailing icon.
- * @docs-private
- */
+/** Non-interactive trailing icon in a chip. */
 export declare class MatChipTrailingIcon extends MatChipAction {
     /**
      * MDC considers all trailing actions as a remove icon,

package/core/mdc-helpers/_mdc-helpers.scss

@@ -84,15 +84,17 @@ $mat-typography-mdc-level-mappings: (
 }
 
 // Converts an MDC typography level config to an Angular Material one.
-@function typography-config-level-from-mdc($mdc-level) {
+@function typography-config-level-from-mdc($mdc-level, $overrides: ()) {
   $mdc-level-config: map.get(mdc-typography.$styles, $mdc-level);
 
   @return typography.define-typography-level(
-      map.get($mdc-level-config, font-size),
-      map.get($mdc-level-config, line-height),
-      map.get($mdc-level-config, font-weight),
-      map.get($mdc-level-config, font-family),
-      map.get($mdc-level-config, letter-spacing));
+    $font-size: map.get($overrides, font-size) or map.get($mdc-level-config, font-size),
+    $font-family: map.get($overrides, font-family) or map.get($mdc-level-config, font-family),
+    $line-height: map.get($overrides, line-height) or map.get($mdc-level-config, line-height),
+    $font-weight: map.get($overrides, font-weight) or map.get($mdc-level-config, font-weight),
+    $letter-spacing:
+      map.get($overrides, letter-spacing) or map.get($mdc-level-config, letter-spacing)
+  );
 }
 
 // Configures MDC's global variables to reflect the given theme, applies the given styles,

package/core/typography/_all-typography.scss

@@ -1,7 +1,6 @@
 @use 'sass:map';
 @use 'sass:math';
 @use 'sass:meta';
-@use '@material/typography' as mdc-typography;
 @use './typography';
 @use '../../autocomplete/autocomplete-theme';
 @use '../../badge/badge-theme';
@@ -88,49 +87,52 @@
 @function define-typography-config(
   // TODO(mmalerba): rename this function to define-typography-config,
   //  and create a predefined px based config for people that need it.
-  $font-family: mdc-typography.$font-family,
-  $headline-1:  _rem-to-px(mdc-helpers.typography-config-level-from-mdc(headline1)),
-  $headline-2:  _rem-to-px(mdc-helpers.typography-config-level-from-mdc(headline2)),
-  $headline-3:  _rem-to-px(mdc-helpers.typography-config-level-from-mdc(headline3)),
-  $headline-4:  _rem-to-px(mdc-helpers.typography-config-level-from-mdc(headline4)),
-  $headline-5:  _rem-to-px(mdc-helpers.typography-config-level-from-mdc(headline5)),
-  $headline-6:  _rem-to-px(mdc-helpers.typography-config-level-from-mdc(headline6)),
-  $subtitle-1:  _rem-to-px(mdc-helpers.typography-config-level-from-mdc(subtitle1)),
-  $subtitle-2:  _rem-to-px(mdc-helpers.typography-config-level-from-mdc(subtitle2)),
-  $body-1:      _rem-to-px(mdc-helpers.typography-config-level-from-mdc(body1)),
-  $body-2:      _rem-to-px(mdc-helpers.typography-config-level-from-mdc(body2)),
-  $caption:     _rem-to-px(mdc-helpers.typography-config-level-from-mdc(caption)),
-  $button:      _rem-to-px(mdc-helpers.typography-config-level-from-mdc(button)),
-  $overline:    _rem-to-px(mdc-helpers.typography-config-level-from-mdc(overline)),
+  $font-family: null,
+  $headline-1: null,
+  $headline-2: null,
+  $headline-3: null,
+  $headline-4: null,
+  $headline-5: null,
+  $headline-6: null,
+  $subtitle-1: null,
+  $subtitle-2: null,
+  $body-1: null,
+  $body-2: null,
+  $caption: null,
+  $button: null,
+  $overline: null,
 ) {
   // Declare an initial map with all of the levels.
-  $config: (
-      headline-1: $headline-1,
-      headline-2: $headline-2,
-      headline-3: $headline-3,
-      headline-4: $headline-4,
-      headline-5: $headline-5,
-      headline-6: $headline-6,
-      subtitle-1: $subtitle-1,
-      subtitle-2: $subtitle-2,
-      body-1:     $body-1,
-      body-2:     $body-2,
-      caption:    $caption,
-      button:     $button,
-      overline:   $overline,
-  );
+  $overrides: if($font-family, (font-family: $font-family), ());
 
-  // Loop through the levels and set the `font-family` of the ones that don't have one to the base.
-  // Note that Sass can't modify maps in place, which means that we need to merge and re-assign.
-  @each $key, $level in $config {
-    @if map.get($level, font-family) == null {
-      $new-level: map.merge($level, (font-family: $font-family));
-      $config: map.merge($config, ($key: $new-level));
-    }
-  }
-
-  // Add the base font family to the config.
-  @return map.merge($config, (font-family: $font-family));
+  @return (
+    headline-1: $headline-1 or _rem-to-px(
+      mdc-helpers.typography-config-level-from-mdc(headline1, $overrides)),
+    headline-2: $headline-2 or _rem-to-px(
+      mdc-helpers.typography-config-level-from-mdc(headline2, $overrides)),
+    headline-3: $headline-3 or _rem-to-px(
+      mdc-helpers.typography-config-level-from-mdc(headline3, $overrides)),
+    headline-4: $headline-4 or _rem-to-px(
+      mdc-helpers.typography-config-level-from-mdc(headline4, $overrides)),
+    headline-5: $headline-5 or _rem-to-px(
+      mdc-helpers.typography-config-level-from-mdc(headline5, $overrides)),
+    headline-6: $headline-6 or _rem-to-px(
+      mdc-helpers.typography-config-level-from-mdc(headline6, $overrides)),
+    subtitle-1: $subtitle-1 or _rem-to-px(
+      mdc-helpers.typography-config-level-from-mdc(subtitle1, $overrides)),
+    subtitle-2: $subtitle-2 or _rem-to-px(
+      mdc-helpers.typography-config-level-from-mdc(subtitle2, $overrides)),
+    body-1: $body-1 or _rem-to-px(
+      mdc-helpers.typography-config-level-from-mdc(body1, $overrides)),
+    body-2: $body-2 or _rem-to-px(
+      mdc-helpers.typography-config-level-from-mdc(body2, $overrides)),
+    caption: $caption or _rem-to-px(
+      mdc-helpers.typography-config-level-from-mdc(caption, $overrides)),
+    button: $button or _rem-to-px(
+      mdc-helpers.typography-config-level-from-mdc(button, $overrides)),
+    overline: $overline or _rem-to-px(
+      mdc-helpers.typography-config-level-from-mdc(overline, $overrides)),
+  );
 }
 
 /// Generates an Angular Material typography config based on values from the official Material
@@ -158,49 +160,39 @@
 @function define-rem-typography-config(
   // TODO(mmalerba): rename this function to define-typography-config,
   //  and create a predefined px based config for people that need it.
-  $font-family: mdc-typography.$font-family,
-  $headline-1:  mdc-helpers.typography-config-level-from-mdc(headline1),
-  $headline-2:  mdc-helpers.typography-config-level-from-mdc(headline2),
-  $headline-3:  mdc-helpers.typography-config-level-from-mdc(headline3),
-  $headline-4:  mdc-helpers.typography-config-level-from-mdc(headline4),
-  $headline-5:  mdc-helpers.typography-config-level-from-mdc(headline5),
-  $headline-6:  mdc-helpers.typography-config-level-from-mdc(headline6),
-  $subtitle-1:  mdc-helpers.typography-config-level-from-mdc(subtitle1),
-  $subtitle-2:  mdc-helpers.typography-config-level-from-mdc(subtitle2),
-  $body-1:      mdc-helpers.typography-config-level-from-mdc(body1),
-  $body-2:      mdc-helpers.typography-config-level-from-mdc(body2),
-  $caption:     mdc-helpers.typography-config-level-from-mdc(caption),
-  $button:      mdc-helpers.typography-config-level-from-mdc(button),
-  $overline:    mdc-helpers.typography-config-level-from-mdc(overline),
+  $font-family: null,
+  $headline-1: null,
+  $headline-2: null,
+  $headline-3: null,
+  $headline-4: null,
+  $headline-5: null,
+  $headline-6: null,
+  $subtitle-1: null,
+  $subtitle-2: null,
+  $body-1: null,
+  $body-2: null,
+  $caption: null,
+  $button: null,
+  $overline: null,
 ) {
   // Declare an initial map with all of the levels.
-  $config: (
-      headline-1: $headline-1,
-      headline-2: $headline-2,
-      headline-3: $headline-3,
-      headline-4: $headline-4,
-      headline-5: $headline-5,
-      headline-6: $headline-6,
-      subtitle-1: $subtitle-1,
-      subtitle-2: $subtitle-2,
-      body-1:     $body-1,
-      body-2:     $body-2,
-      caption:    $caption,
-      button:     $button,
-      overline:   $overline,
-  );
+  $overrides: if($font-family, (font-family: $font-family), ());
 
-  // Loop through the levels and set the `font-family` of the ones that don't have one to the base.
-  // Note that Sass can't modify maps in place, which means that we need to merge and re-assign.
-  @each $key, $level in $config {
-    @if map.get($level, font-family) == null {
-      $new-level: map.merge($level, (font-family: $font-family));
-      $config: map.merge($config, ($key: $new-level));
-    }
-  }
-
-  // Add the base font family to the config.
-  @return map.merge($config, (font-family: $font-family));
+  @return (
+    headline-1: $headline-1 or mdc-helpers.typography-config-level-from-mdc(headline1, $overrides),
+    headline-2: $headline-2 or mdc-helpers.typography-config-level-from-mdc(headline2, $overrides),
+    headline-3: $headline-3 or mdc-helpers.typography-config-level-from-mdc(headline3, $overrides),
+    headline-4: $headline-4 or mdc-helpers.typography-config-level-from-mdc(headline4, $overrides),
+    headline-5: $headline-5 or mdc-helpers.typography-config-level-from-mdc(headline5, $overrides),
+    headline-6: $headline-6 or mdc-helpers.typography-config-level-from-mdc(headline6, $overrides),
+    subtitle-1: $subtitle-1 or mdc-helpers.typography-config-level-from-mdc(subtitle1, $overrides),
+    subtitle-2: $subtitle-2 or mdc-helpers.typography-config-level-from-mdc(subtitle2, $overrides),
+    body-1: $body-1 or mdc-helpers.typography-config-level-from-mdc(body1, $overrides),
+    body-2: $body-2 or mdc-helpers.typography-config-level-from-mdc(body2, $overrides),
+    caption: $caption or mdc-helpers.typography-config-level-from-mdc(caption, $overrides),
+    button: $button or mdc-helpers.typography-config-level-from-mdc(button, $overrides),
+    overline: $overline or mdc-helpers.typography-config-level-from-mdc(overline, $overrides),
+  );
 }
 
 @mixin private-all-unmigrated-component-typographies($config) {

package/datepicker/_datepicker-legacy-index.scss

@@ -1,6 +1,6 @@
 @forward 'datepicker-theme' hide $calendar-body-font-size, $calendar-weekday-table-font-size,
 $range-fade-amount, $selected-fade-amount, $selected-today-box-shadow-width, $today-fade-amount,
-color, date-range-colors, theme, typography;
+color, date-range-colors, theme, typography, density;
 @forward 'datepicker-theme' as mat-* hide $mat-range-fade-amount, $mat-selected-fade-amount,
 $mat-selected-today-box-shadow-width, $mat-today-fade-amount, mat-color, mat-density, mat-theme,
 mat-typography, mat-unselected-cell;

package/datepicker/_datepicker-theme.import.scss

@@ -3,7 +3,7 @@
 @forward '../core/typography/typography-utils.import';
 @forward 'datepicker-theme' hide $calendar-body-font-size, $calendar-weekday-table-font-size,
 $range-fade-amount, $selected-fade-amount, $selected-today-box-shadow-width, $today-fade-amount,
-color, date-range-colors, theme, typography;
+color, date-range-colors, theme, typography, density;
 @forward 'datepicker-theme' as mat-* hide $mat-range-fade-amount, $mat-selected-fade-amount,
 $mat-selected-today-box-shadow-width, $mat-today-fade-amount, mat-color, mat-density, mat-theme,
 mat-typography, mat-unselected-cell;

package/datepicker/_datepicker-theme.scss

@@ -252,7 +252,9 @@ $calendar-weekday-table-font-size: 11px !default;
   }
 }
 
-@mixin _density($config-or-theme) {
+@mixin density($config-or-theme) {
+  $density-scale: theming.get-density-config($config-or-theme);
+
   // Regardless of the user-passed density, we want the calendar previous/next buttons to remain at
   // density -2
   .mat-calendar-controls {
@@ -271,7 +273,7 @@ $calendar-weekday-table-font-size: 11px !default;
       @include color($color);
     }
     @if $density != null {
-      @include _density($density);
+      @include density($density);
     }
     @if $typography != null {
       @include typography($typography);

package/datepicker/index.d.ts

@@ -3,6 +3,7 @@ import { AbstractControl } from '@angular/forms';
 import { AfterContentInit } from '@angular/core';
 import { AfterViewChecked } from '@angular/core';
 import { AfterViewInit } from '@angular/core';
+import { AnimationEvent as AnimationEvent_2 } from '@angular/animations';
 import { AnimationTriggerMetadata } from '@angular/animations';
 import { BooleanInput } from '@angular/cdk/coercion';
 import { CanColor } from '@angular/material/core';
@@ -836,6 +837,8 @@ export declare class MatDatepickerContent<S, D = ExtractDateTypeFromSelection<S>
     _animationState: 'enter-dropdown' | 'enter-dialog' | 'void';
     /** Emits when an animation has finished. */
     readonly _animationDone: Subject<void>;
+    /** Whether there is an in-progress animation. */
+    _isAnimating: boolean;
     /** Text for the close button. */
     _closeButtonText: string;
     /** Whether the close button currently has focus. */
@@ -850,6 +853,7 @@ export declare class MatDatepickerContent<S, D = ExtractDateTypeFromSelection<S>
     ngOnDestroy(): void;
     _handleUserSelection(event: MatCalendarUserEvent<D | null>): void;
     _startExitAnimation(): void;
+    _handleAnimationEvent(event: AnimationEvent_2): void;
     _getSelected(): D | DateRange<D> | null;
     /** Applies the current pending selection to the global model. */
     _applyPendingSelection(): void;
@@ -1080,9 +1084,17 @@ export declare class MatDatepickerIntl {
     switchToMonthViewLabel: string;
     /** A label for the 'switch to year view' button (used by screen readers). */
     switchToMultiYearViewLabel: string;
-    /** A label for the first date of a range of dates (used by screen readers). */
+    /**
+     * A label for the first date of a range of dates (used by screen readers).
+     * @deprecated Provide your own internationalization string.
+     * @breaking-change 17.0.0
+     */
     startDateLabel: string;
-    /** A label for the last date of a range of dates (used by screen readers). */
+    /**
+     * A label for the last date of a range of dates (used by screen readers).
+     * @deprecated Provide your own internationalization string.
+     * @breaking-change 17.0.0
+     */
     endDateLabel: string;
     /** Formats a range of years (used for visuals). */
     formatYearRange(start: string, end: string): string;

package/divider/_divider-legacy-index.scss

@@ -1,3 +1,3 @@
-@forward 'divider-theme' hide color, theme, typography;
+@forward 'divider-theme' hide color, theme, typography, density;
 @forward 'divider-theme' as mat-divider-* hide mat-divider-density;
 @forward 'divider-offset' as mat-*;