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

package/schematics/ng-generate/mdc-migration/schema.json

@@ -8,7 +8,6 @@
       "type": "string",
       "format": "path",
       "description": "Workspace-relative path to a directory which will be migrated.",
-      "alias": "d",
       "x-prompt": "Limit the migration to a specific directory? (Enter the relative path such as 'src/app/shared' or leave blank for all directories)"
     },
     "components": {

package/schematics/ng-generate/navigation/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template

@@ -15,10 +15,10 @@ import { map, shareReplay } from 'rxjs/operators';
     <%= indentTextContent(resolvedFiles.template, 4) %>
   `,<% } else { %>
   templateUrl: './<%= dasherize(name) %>.component.html',<% } if(inlineStyle) { %>
-  styles: [`
+  styles: `
     <%= indentTextContent(resolvedFiles.stylesheet, 4) %>
-  `]<% } else { %>
-  styleUrls: ['./<%= dasherize(name) %>.component.<%= style %>']<% } %><% if(!!viewEncapsulation) { %>,
+  `<% } else { %>
+  styleUrl: './<%= dasherize(name) %>.component.<%= style %>'<% } %><% if(!!viewEncapsulation) { %>,
   encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>,
   changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %><% if(standalone) { %>,
   standalone: true,

package/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template

@@ -10,10 +10,10 @@ import { <%= classify(name) %>DataSource, <%= classify(name) %>Item } from './<%
     <%= indentTextContent(resolvedFiles.template, 4) %>
   `,<% } else { %>
   templateUrl: './<%= dasherize(name) %>.component.html',<% } if(inlineStyle) { %>
-  styles: [`
+  styles: `
     <%= indentTextContent(resolvedFiles.stylesheet, 4) %>
-  `]<% } else { %>
-  styleUrls: ['./<%= dasherize(name) %>.component.<%= style %>']<% } %><% if(!!viewEncapsulation) { %>,
+  `<% } else { %>
+  styleUrl: './<%= dasherize(name) %>.component.<%= style %>'<% } %><% if(!!viewEncapsulation) { %>,
   encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>,
   changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %><% if(standalone) { %>,
   standalone: true,

package/schematics/ng-generate/tree/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template

@@ -29,10 +29,10 @@ export interface FlatTreeNode {
     <%= indentTextContent(resolvedFiles.template, 4) %>
   `,<% } else { %>
   templateUrl: './<%= dasherize(name) %>.component.html',<% } if (inlineStyle) { %>
-  styles: [`
+  styles: `
     <%= indentTextContent(resolvedFiles.stylesheet, 4) %>
-  `]<% } else { %>
-  styleUrls: ['./<%= dasherize(name) %>.component.<%= style %>']<% } %><% if(!!viewEncapsulation) { %>,
+  `<% } else { %>
+  styleUrl: './<%= dasherize(name) %>.component.<%= style %>'<% } %><% if(!!viewEncapsulation) { %>,
   encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>,
   changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %><% if(standalone) { %>,
   standalone: true,

package/slide-toggle/_slide-toggle-theme.scss

@@ -3,12 +3,9 @@
 @use '@material/form-field/form-field-theme' as mdc-form-field-theme;
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
-@use '../core/mdc-helpers/mdc-helpers';
 @use '../core/typography/typography';
 @use '../core/tokens/m2/mdc/form-field' as tokens-mdc-form-field;
 @use '../core/tokens/m2/mdc/switch' as tokens-mdc-switch;
-@use '../core/tokens/m2/mat/slide-toggle' as tokens-mat-slide-toggle;
-@use '../core/tokens/token-utils';
 
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
@@ -29,27 +26,25 @@
     $is-dark: inspection.get-theme-type($theme) == dark;
     $mdc-switch-color-tokens: tokens-mdc-switch.get-color-tokens($theme);
 
-    @include mdc-helpers.using-mdc-theme($theme) {
-      // Add values for MDC slide toggles tokens
-      .mat-mdc-slide-toggle {
-        @include mdc-switch-theme.theme($mdc-switch-color-tokens);
-        @include mdc-form-field-theme.theme(tokens-mdc-form-field.get-color-tokens($theme));
+    // Add values for MDC slide toggles tokens
+    .mat-mdc-slide-toggle {
+      @include mdc-switch-theme.theme($mdc-switch-color-tokens);
+      @include mdc-form-field-theme.theme(tokens-mdc-form-field.get-color-tokens($theme));
 
-        // MDC should set the disabled color on the label, but doesn't, so we do it here instead.
-        .mdc-switch--disabled + label {
-          color: inspection.get-theme-color($theme, foreground, disabled-text);
-        }
+      // MDC should set the disabled color on the label, but doesn't, so we do it here instead.
+      .mdc-switch--disabled + label {
+        color: inspection.get-theme-color($theme, foreground, disabled-text);
+      }
 
-        // Change the color palette related tokens to accent or warn if applicable
-        &.mat-accent {
-          @include mdc-switch-theme.theme(
-              tokens-mdc-switch.private-get-color-palette-color-tokens($theme, accent));
-        }
+      // Change the color palette related tokens to accent or warn if applicable
+      &.mat-accent {
+        @include mdc-switch-theme.theme(
+            tokens-mdc-switch.private-get-color-palette-color-tokens($theme, accent));
+      }
 
-        &.mat-warn {
-          @include mdc-switch-theme.theme(
-              tokens-mdc-switch.private-get-color-palette-color-tokens($theme, warn));
-        }
+      &.mat-warn {
+        @include mdc-switch-theme.theme(
+            tokens-mdc-switch.private-get-color-palette-color-tokens($theme, warn));
       }
     }
   }
@@ -61,16 +56,11 @@
   }
   @else {
     $mdc-switch-typography-tokens: tokens-mdc-switch.get-typography-tokens($theme);
-    $mat-slide-toggle-typography-tokens: tokens-mat-slide-toggle.get-typography-tokens($theme);
 
     // Add values for MDC slide toggle tokens
     .mat-mdc-slide-toggle {
       @include mdc-switch-theme.theme($mdc-switch-typography-tokens);
       @include mdc-form-field-theme.theme(tokens-mdc-form-field.get-typography-tokens($theme));
-      @include token-utils.create-token-values(
-          tokens-mat-slide-toggle.$prefix,
-          $mat-slide-toggle-typography-tokens
-      );
     }
   }
 }
@@ -111,7 +101,5 @@
 @mixin _theme-from-tokens($tokens) {
   @if ($tokens != ()) {
     @include mdc-switch-theme.theme(map.get($tokens, tokens-mdc-switch.$prefix));
-    @include token-utils.create-token-values(
-        tokens-mat-slide-toggle.$prefix, map.get($tokens, tokens-mat-slide-toggle.$prefix));
   }
 }

package/slide-toggle/index.d.ts

@@ -138,11 +138,11 @@ export declare class MatSlideToggle implements OnDestroy, AfterContentInit, OnCh
     _handleClick(): void;
     _getAriaLabelledBy(): string | null;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSlideToggle, [null, null, null, { attribute: "tabindex"; }, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatSlideToggle, "mat-slide-toggle", ["matSlideToggle"], { "disabled": { "alias": "disabled"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "color": { "alias": "color"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; }; "required": { "alias": "required"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "hideIcon": { "alias": "hideIcon"; "required": false; }; }, { "change": "change"; "toggleChange": "toggleChange"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatSlideToggle, "mat-slide-toggle", ["matSlideToggle"], { "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; }; "required": { "alias": "required"; "required": false; }; "color": { "alias": "color"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "hideIcon": { "alias": "hideIcon"; "required": false; }; }, { "change": "change"; "toggleChange": "toggleChange"; }, never, ["*"], true, never>;
+    static ngAcceptInputType_required: unknown;
     static ngAcceptInputType_disabled: unknown;
     static ngAcceptInputType_disableRipple: unknown;
     static ngAcceptInputType_tabIndex: unknown;
-    static ngAcceptInputType_required: unknown;
     static ngAcceptInputType_checked: unknown;
     static ngAcceptInputType_hideIcon: unknown;
 }

package/slider/_slider-theme.scss

@@ -15,6 +15,8 @@
   @else {
     // Add default values for tokens not related to color, typography, or density.
     @include sass-utils.current-selector-or-root() {
+      $mat-tokens: tokens-mat-slider.get-unthemable-tokens();
+      @include token-utils.create-token-values(tokens-mat-slider.$prefix, $mat-tokens);
       @include mdc-slider-theme.theme(tokens-mdc-slider.get-unthemable-tokens());
     }
   }
@@ -38,22 +40,27 @@
   // Add values for MDC slider tokens.
   @include sass-utils.current-selector-or-root() {
     @include mdc-slider-theme.theme($mdc-color-tokens);
-    @include _slider-ripple-color($theme, primary);
     @include token-utils.create-token-values(
       tokens-mat-slider.$prefix,
       $mat-slider-color-tokens
     );
 
     .mat-accent {
+      @include token-utils.create-token-values(
+        tokens-mat-slider.$prefix,
+        tokens-mat-slider.private-get-color-palette-color-tokens($theme, accent),
+      );
       @include mdc-slider-theme.theme(
         tokens-mdc-slider.private-get-color-palette-color-tokens($theme, accent));
-      @include _slider-ripple-color($theme, accent);
     }
 
       .mat-warn {
+        @include token-utils.create-token-values(
+          tokens-mat-slider.$prefix,
+          tokens-mat-slider.private-get-color-palette-color-tokens($theme, warn),
+        );
         @include mdc-slider-theme.theme(
             tokens-mdc-slider.private-get-color-palette-color-tokens($theme, warn));
-        @include _slider-ripple-color($theme, warn);
       }
     }
   }
@@ -103,15 +110,6 @@
   }
 }
 
-// Generated MDC ripple color tokens are not being calculated so needs to be set
-@mixin _slider-ripple-color($theme, $palette-name) {
-  $color: inspection.get-theme-color($theme, $palette-name);
-
-  --mat-mdc-slider-ripple-color: #{$color};
-  --mat-mdc-slider-hover-ripple-color: #{rgba($color, 0.05)};
-  --mat-mdc-slider-focus-ripple-color: #{rgba($color, 0.2)};
-}
-
 @mixin _theme-from-tokens($tokens) {
   @if ($tokens != ()) {
     @include mdc-slider-theme.theme(map.get($tokens, tokens-mdc-slider.$prefix));

package/slider/index.d.ts

@@ -139,7 +139,6 @@ export declare class MatSlider implements AfterViewInit, OnDestroy, _MatSlider {
     /** The radius of the native slider's knob. AFAIK there is no way to avoid hardcoding this. */
     _knobRadius: number;
     _inputPadding: number;
-    _inputOffset: number;
     ngAfterViewInit(): void;
     private _initUINonRange;
     private _initUIRange;
@@ -243,17 +242,6 @@ declare interface _MatSlider {
      * thumb ripple extends past the end of the slider track clickable.
      */
     _inputPadding: number;
-    /**
-     * The offset represents left most translateX of the slider knob. Inversely,
-     * (slider width - offset) = the right most translateX of the slider knob.
-     *
-     * Note:
-     *    * The native slider knob differs from the visual slider. It's knob cannot slide past
-     *      the end of the track AT ALL.
-     *    * The visual slider knob CAN slide past the end of the track slightly. It's knob can slide
-     *      past the end of the track such that it's center lines up with the end of the track.
-     */
-    _inputOffset: number;
     /** The radius of the visual slider's ripple. */
     _rippleRadius: number;
     /** The global configuration for `matRipple` instances. */
@@ -343,6 +331,7 @@ export declare class MatSliderRangeThumb extends MatSliderThumb implements _MatS
      * @docs-private
      */
     writeValue(value: any): void;
+    _setValue(value: string): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSliderRangeThumb, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatSliderRangeThumb, "input[matSliderStartThumb], input[matSliderEndThumb]", ["matSliderRangeThumb"], {}, {}, never, never, true, never>;
 }
@@ -378,6 +367,11 @@ export declare class MatSliderThumb implements _MatSliderThumb, OnDestroy, Contr
     protected _slider: _MatSlider;
     get value(): number;
     set value(value: number);
+    /**
+     * Handles programmatic value setting. This has been split out to
+     * allow the range thumb to override it and add additional necessary logic.
+     */
+    protected _setValue(value: string): void;
     /** Event emitted when the `value` is changed. */
     readonly valueChange: EventEmitter<number>;
     /** Event emitted when the slider thumb starts being dragged. */
@@ -417,6 +411,8 @@ export declare class MatSliderThumb implements _MatSliderThumb, OnDestroy, Contr
     _valuetext: string;
     /** The radius of a native html slider's knob. */
     _knobRadius: number;
+    /** The distance in px from the start of the slider track to the first tick mark. */
+    _tickMarkOffset: number;
     /** Whether user's cursor is currently in a mouse down state on the input. */
     _isActive: boolean;
     /** Whether the input is currently focused (either by tab or after clicking). */
@@ -626,6 +622,7 @@ export declare class MatSliderVisualThumb implements _MatSliderVisualThumb, Afte
     _isValueIndicatorVisible: boolean;
     /** The host native HTML input element. */
     _hostElement: HTMLElement;
+    private _platform;
     constructor(_cdr: ChangeDetectorRef, _ngZone: NgZone, _elementRef: ElementRef<HTMLElement>, _slider: _MatSlider);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;

package/snack-bar/index.d.ts

@@ -256,8 +256,8 @@ export declare class MatSnackBarContainer extends BasePortalOutlet implements On
     /** Makes sure the exit callbacks have been invoked when the element is destroyed. */
     ngOnDestroy(): void;
     /**
-     * Waits for the zone to settle before removing the element. Helps prevent
-     * errors where we end up removing an element which is in the middle of an animation.
+     * Removes the element in a microtask. Helps prevent errors where we end up
+     * removing an element which is in the middle of an animation.
      */
     private _completeExit;
     /**

package/stepper/index.d.ts

@@ -198,12 +198,14 @@ export declare class MatStepper extends CdkStepper implements AfterContentInit {
     get animationDuration(): string;
     set animationDuration(value: string);
     private _animationDuration;
+    /** Whether the stepper is rendering on the server. */
+    protected _isServer: boolean;
     constructor(dir: Directionality, changeDetectorRef: ChangeDetectorRef, elementRef: ElementRef<HTMLElement>);
     ngAfterContentInit(): void;
     _stepIsNavigable(index: number, step: MatStep): boolean;
     _getAnimationDuration(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatStepper, [{ optional: true; }, null, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatStepper, "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", ["matStepper", "matVerticalStepper", "matHorizontalStepper"], { "selectedIndex": { "alias": "selectedIndex"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "color": { "alias": "color"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "headerPosition": { "alias": "headerPosition"; "required": false; }; "animationDuration": { "alias": "animationDuration"; "required": false; }; }, { "animationDone": "animationDone"; }, ["_steps", "_icons"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatStepper, "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", ["matStepper", "matVerticalStepper", "matHorizontalStepper"], { "disableRipple": { "alias": "disableRipple"; "required": false; }; "color": { "alias": "color"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "headerPosition": { "alias": "headerPosition"; "required": false; }; "animationDuration": { "alias": "animationDuration"; "required": false; }; }, { "animationDone": "animationDone"; }, ["_steps", "_icons"], ["*"], true, never>;
 }
 
 /**
@@ -263,13 +265,13 @@ export declare class MatStepperModule {
 /** Button that moves to the next step in a stepper workflow. */
 export declare class MatStepperNext extends CdkStepperNext {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatStepperNext, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatStepperNext, "button[matStepperNext]", never, { "type": { "alias": "type"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatStepperNext, "button[matStepperNext]", never, {}, {}, never, never, true, never>;
 }
 
 /** Button that moves to the previous step in a stepper workflow. */
 export declare class MatStepperPrevious extends CdkStepperPrevious {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatStepperPrevious, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatStepperPrevious, "button[matStepperPrevious]", never, { "type": { "alias": "type"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatStepperPrevious, "button[matStepperPrevious]", never, {}, {}, never, never, true, never>;
 }
 
 export { StepperOrientation }

package/table/index.d.ts

@@ -21,7 +21,6 @@ import * as i1 from '@angular/material/core';
 import * as i2 from '@angular/cdk/table';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
-import { OnInit } from '@angular/core';
 import { Subscription } from 'rxjs';
 
 declare namespace i3 {
@@ -187,14 +186,13 @@ export declare class MatRowDef<T> extends CdkRowDef<T> {
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatRowDef<any>, "[matRowDef]", never, { "columns": { "alias": "matRowDefColumns"; "required": false; }; "when": { "alias": "matRowDefWhen"; "required": false; }; }, {}, never, never, true, never>;
 }
 
-export declare class MatTable<T> extends CdkTable<T> implements OnInit {
+export declare class MatTable<T> extends CdkTable<T> {
     /** Overrides the sticky CSS class set by the `CdkTable`. */
     protected stickyCssClass: string;
     /** Overrides the need to add position: sticky on every sticky cell element in `CdkTable`. */
     protected needsPositionStickyOnElement: boolean;
-    ngOnInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatTable<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatTable<any>, "mat-table, table[mat-table]", ["matTable"], {}, {}, never, ["caption", "colgroup, col"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatTable<any>, "mat-table, table[mat-table]", ["matTable"], {}, {}, never, ["caption", "colgroup, col", "*"], true, never>;
 }
 
 /**

package/tabs/_tabs-common.scss

@@ -338,11 +338,30 @@ $mat-tab-animation-duration: 500ms !default;
 }
 
 // Structural styles for the element that wraps the paginated container's content.
-@mixin paginated-tab-header-container {
+// Include a selector for an inverted header if the header may be optionally positioned on the
+// bottom of the content.
+@mixin paginated-tab-header-container($inverted-header-selector: null) {
   display: flex;
   flex-grow: 1;
   overflow: hidden;
   z-index: 1;
+  @include token-utils.use-tokens(
+    tokens-mat-tab-header.$prefix,
+    tokens-mat-tab-header.get-token-slots()
+  ) {
+    border-bottom-style: solid;
+    @include token-utils.create-token-slot(border-bottom-width, divider-height);
+    @include token-utils.create-token-slot(border-bottom-color, divider-color);
+
+    @if ($inverted-header-selector) {
+      #{$inverted-header-selector} & {
+        border-bottom: none;
+        border-top-style: solid;
+        @include token-utils.create-token-slot(border-top-width, divider-height);
+        @include token-utils.create-token-slot(border-top-color, divider-color);
+      }
+    }
+  }
 }
 
 @mixin paginated-tab-header-with-background($header-selector, $tab-selector) {

package/tabs/index.d.ts

@@ -133,7 +133,7 @@ export declare class MatInkBar {
  */
 declare interface MatInkBarItem extends OnInit, OnDestroy {
     elementRef: ElementRef<HTMLElement>;
-    activateInkBar(previousIndicatorClientRect?: ClientRect): void;
+    activateInkBar(previousIndicatorClientRect?: DOMRect): void;
     deactivateInkBar(): void;
     fitInkBarToContent: boolean;
 }
@@ -203,7 +203,7 @@ export declare abstract class MatPaginatedTabHeader implements AfterContentCheck
     disablePagination: boolean;
     /** The index of the active tab. */
     get selectedIndex(): number;
-    set selectedIndex(v: unknown);
+    set selectedIndex(v: number);
     private _selectedIndex;
     /** Event emitted when the option is selected. */
     readonly selectFocusedIndex: EventEmitter<number>;
@@ -318,8 +318,9 @@ export declare abstract class MatPaginatedTabHeader implements AfterContentCheck
      */
     private _scrollTo;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatPaginatedTabHeader, [null, null, null, { optional: true; }, null, null, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatPaginatedTabHeader, never, never, { "disablePagination": { "alias": "disablePagination"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatPaginatedTabHeader, never, never, { "disablePagination": { "alias": "disablePagination"; "required": false; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; }; }, { "selectFocusedIndex": "selectFocusedIndex"; "indexFocused": "indexFocused"; }, never, never, false, never>;
     static ngAcceptInputType_disablePagination: unknown;
+    static ngAcceptInputType_selectedIndex: unknown;
 }
 
 /** Item inside a paginated tab header. */
@@ -580,7 +581,11 @@ export declare class MatTabGroup implements AfterContentInit, AfterContentChecke
      * like iframes and videos from reloading next time it comes back into the view.
      */
     preserveContent: boolean;
-    /** Background color of the tab group. */
+    /**
+     * Background color of the tab group.
+     * @deprecated The background color should be customized through Sass theming APIs.
+     * @breaking-change 20.0.0 Remove this input
+     */
     get backgroundColor(): ThemePalette;
     set backgroundColor(value: ThemePalette);
     private _backgroundColor;
@@ -593,6 +598,8 @@ export declare class MatTabGroup implements AfterContentInit, AfterContentChecke
     /** Event emitted when the tab selection has changed. */
     readonly selectedTabChange: EventEmitter<MatTabChangeEvent>;
     private _groupId;
+    /** Whether the tab group is rendered on the server. */
+    protected _isServer: boolean;
     constructor(_elementRef: ElementRef, _changeDetectorRef: ChangeDetectorRef, defaultConfig?: MatTabsConfig, _animationMode?: string | undefined);
     /**
      * After the content is checked, this component knows what tabs have been defined
@@ -649,7 +656,7 @@ export declare class MatTabGroup implements AfterContentInit, AfterContentChecke
     /** Callback for when the focused state of a tab has changed. */
     _tabFocusChanged(focusOrigin: FocusOrigin, index: number): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatTabGroup, [null, null, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatTabGroup, "mat-tab-group", ["matTabGroup"], { "color": { "alias": "color"; "required": false; }; "fitInkBarToContent": { "alias": "fitInkBarToContent"; "required": false; }; "stretchTabs": { "alias": "mat-stretch-tabs"; "required": false; }; "dynamicHeight": { "alias": "dynamicHeight"; "required": false; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; }; "headerPosition": { "alias": "headerPosition"; "required": false; }; "animationDuration": { "alias": "animationDuration"; "required": false; }; "contentTabIndex": { "alias": "contentTabIndex"; "required": false; }; "disablePagination": { "alias": "disablePagination"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "preserveContent": { "alias": "preserveContent"; "required": false; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; }; }, { "selectedIndexChange": "selectedIndexChange"; "focusChange": "focusChange"; "animationDone": "animationDone"; "selectedTabChange": "selectedTabChange"; }, ["_allTabs"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatTabGroup, "mat-tab-group", ["matTabGroup"], { "color": { "alias": "color"; "required": false; }; "fitInkBarToContent": { "alias": "fitInkBarToContent"; "required": false; }; "stretchTabs": { "alias": "mat-stretch-tabs"; "required": false; }; "dynamicHeight": { "alias": "dynamicHeight"; "required": false; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; }; "headerPosition": { "alias": "headerPosition"; "required": false; }; "animationDuration": { "alias": "animationDuration"; "required": false; }; "contentTabIndex": { "alias": "contentTabIndex"; "required": false; }; "disablePagination": { "alias": "disablePagination"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "preserveContent": { "alias": "preserveContent"; "required": false; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; }; }, { "selectedIndexChange": "selectedIndexChange"; "focusChange": "focusChange"; "animationDone": "animationDone"; "selectedTabChange": "selectedTabChange"; }, ["_allTabs"], ["*"], true, never>;
     static ngAcceptInputType_fitInkBarToContent: unknown;
     static ngAcceptInputType_stretchTabs: unknown;
     static ngAcceptInputType_dynamicHeight: unknown;
@@ -688,7 +695,7 @@ export declare class MatTabHeader extends MatPaginatedTabHeader implements After
     ngAfterContentInit(): void;
     protected _itemSelected(event: KeyboardEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatTabHeader, [null, null, null, { optional: true; }, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatTabHeader, "mat-tab-header", never, { "selectedIndex": { "alias": "selectedIndex"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; }, { "selectFocusedIndex": "selectFocusedIndex"; "indexFocused": "indexFocused"; }, ["_items"], ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatTabHeader, "mat-tab-header", never, { "disableRipple": { "alias": "disableRipple"; "required": false; }; }, {}, ["_items"], ["*"], true, never>;
     static ngAcceptInputType_disableRipple: unknown;
 }
 
@@ -774,7 +781,7 @@ export declare class MatTabLink extends _MatTabLinkMixinBase implements AfterVie
     _getRole(): string | null;
     _getTabIndex(): number;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatTabLink, [null, null, { optional: true; }, { attribute: "tabindex"; }, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatTabLink, "[mat-tab-link], [matTabLink]", ["matTabLink"], { "active": { "alias": "active"; "required": false; }; "id": { "alias": "id"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatTabLink, "[mat-tab-link], [matTabLink]", ["matTabLink"], { "active": { "alias": "active"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "id": { "alias": "id"; "required": false; }; }, {}, never, ["*"], true, never>;
     static ngAcceptInputType_active: unknown;
     static ngAcceptInputType_disabled: unknown;
     static ngAcceptInputType_disableRipple: unknown;

package/form-field/_form-field-density.scss

@@ -1,118 +0,0 @@
-@use 'sass:map';
-@use 'sass:math';
-@use '@material/density' as mdc-density;
-@use '@material/textfield' as mdc-textfield;
-@use '../core/theming/inspection';
-
-@use './form-field-sizing';
-
-// Mixin that sets the vertical spacing for the infix container of filled form fields.
-// We need to apply spacing to the infix container because we removed the input padding
-// provided by MDC in order to support arbitrary form-field controls.
-@mixin _infix-vertical-spacing-filled($with-label-padding, $no-label-padding) {
-  .mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mat-mdc-form-field-infix {
-    padding-top: map.get($with-label-padding, top);
-    padding-bottom: map.get($with-label-padding, bottom);
-  }
-
-  .mdc-text-field--no-label:not(.mdc-text-field--outlined):not(.mdc-text-field--textarea)
-  .mat-mdc-form-field-infix {
-    padding-top: map.get($no-label-padding, top);
-    padding-bottom: map.get($no-label-padding, bottom);
-  }
-}
-
-// Mixin that sets the vertical spacing for the infix container of outlined form fields.
-// We need to apply spacing to the infix container because we removed the input padding
-// provided by MDC in order to support arbitrary form-field controls.
-@mixin _infix-vertical-spacing-outlined($padding) {
-  .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix {
-    padding-top: map.get($padding, top);
-    padding-bottom: map.get($padding, bottom);
-  }
-}
-
-// Mixin that includes the density styles for form fields. MDC provides their own density
-// styles for MDC text-field which we cannot use. MDC relies on input elements to stretch
-// vertically when the height is reduced as per density scale. This doesn't work for our
-// form field since we support custom form field controls without a fixed height. Instead, we
-// provide spacing that makes arbitrary controls align as specified in the Material Design
-// specification. In order to support density, we need to adjust the vertical spacing to be
-// based on the density scale.
-@mixin private-form-field-density($theme) {
-  // Height of the form field that is based on the current density scale.
-  $height: mdc-density.prop-value(
-    $density-config: mdc-textfield.$density-config,
-    $density-scale: inspection.get-theme-density($theme),
-    $property-name: height,
-  );
-
-  // Whether floating labels for filled form fields should be hidden. MDC hides the label in
-  // their density styles when the height decreases too much. We match their density styles.
-  $hide-filled-floating-label: $height < mdc-textfield.$minimum-height-for-filled-label;
-  // We computed the desired height of the form-field using the density configuration. The
-  // spec only describes vertical spacing/alignment in non-dense mode. This means that we
-  // cannot update the spacing to explicit numbers based on the density scale. Instead, we
-  // determine the height reduction and equally subtract it from the default `top` and `bottom`
-  // padding that is provided by the Material Design specification.
-  $vertical-deduction: math.div(mdc-textfield.$height - $height, 2);
-  // Map that describes the padding for form-fields with label.
-  $with-label-padding: (
-    top: form-field-sizing.$mat-form-field-with-label-input-padding-top - $vertical-deduction,
-    bottom: form-field-sizing.$mat-form-field-with-label-input-padding-bottom - $vertical-deduction,
-  );
-  // Map that describes the padding for form-fields without label.
-  $no-label-padding: (
-    top: form-field-sizing.$mat-form-field-no-label-padding-top - $vertical-deduction,
-    bottom: form-field-sizing.$mat-form-field-no-label-padding-bottom - $vertical-deduction,
-  );
-
-  // We add a minimum height to the infix container in order to ensure that custom controls have
-  // the same default vertical space as text-field inputs (with respect to the vertical padding).
-  .mat-mdc-form-field-infix {
-    min-height: $height;
-  }
-
-  // By default, MDC aligns the label using percentage. This will be overwritten based
-  // on whether a textarea is used. This is not possible in our implementation of the
-  // form-field because we do not know what type of form-field control is set up. Hence
-  // we always use a fixed position for the label. This does not have any implications.
-  .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
-    top: math.div($height, 2);
-  }
-
-  // For the outline appearance, we re-create the active floating label transform. This is
-  // necessary because the transform for docked floating labels can be updated to account for
-  // the width of prefix container.
-  .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded
-  .mdc-floating-label--float-above {
-    --mat-mdc-form-field-label-transform: translateY(
-            -#{mdc-textfield.get-outlined-label-position-y($height)})
-            scale(var(--mat-mdc-form-field-floating-label-scale, 0.75));
-    transform: var(--mat-mdc-form-field-label-transform);
-  }
-
-  // Add vertical spacing to the infix to ensure that outlined form fields have their controls
-  // aligned as if there is no label. This is done similarly in MDC and is specified in the
-  // Material Design specification. Outline form fields position the control as if there is no
-  // label. This is because the label overflows the form-field and doesn't need space at the top.
-  @include _infix-vertical-spacing-outlined($no-label-padding);
-
-  // MDC hides labels for filled form fields when the form field height decreases. We match
-  // this behavior in our custom density styles.
-  @if $hide-filled-floating-label {
-    // Update the spacing for filled form fields to account for the hidden floating label.
-    @include _infix-vertical-spacing-filled(
-          $no-label-padding, $no-label-padding);
-    .mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mat-mdc-floating-label {
-        display: none;
-    }
-  }
-  @else {
-    // By default, filled form fields align their controls differently based on whether there
-    // is a label or not. MDC does this too, but we cannot rely on their styles as we support
-    // arbitrary form field controls and MDC only applies their spacing to the `<input>` elements.
-    @include _infix-vertical-spacing-filled(
-          $with-label-padding, $no-label-padding);
-  }
-}

package/form-field/_form-field-sizing.scss

@@ -1,40 +0,0 @@
-// Top spacing of the form-field outline. MDC does not have a variable for this
-// and just hard-codes it into their styles.
-$mat-form-field-outline-top-spacing: 12px;
-
-// Infix stretches to fit the container, but naturally wants to be this wide. We set
-// this in order to have a consistent natural size for the various types of controls
-// that can go in a form field.
-$mat-form-field-default-infix-width: 180px !default;
-
-// Minimum amount of space between start and end hints in the subscript. MDC does not
-// have built-in support for hints.
-$mat-form-field-hint-min-space: 1em !default;
-
-// Vertical spacing of the text-field if there is no label. MDC hard-codes the spacing
-// into their styles, but their spacing variables would not work for our form-field
-// structure anyway. This is because MDC's input elements are larger than the text, and
-// their padding variables are calculated with respect to the vertical empty space of the
-// inputs. We take the explicit numbers provided by the Material Design specification.
-// https://material.io/components/text-fields/#specs
-
-// Vertical spacing of the text-field if there is a label. MDC hard-codes the spacing into
-// their styles, but their spacing variables would not work for our form-field structure anyway.
-// This is because MDC's alignment depends on the input element to expand to full infix height.
-// We allow for arbitrary form controls and support dynamic height, so we manage the control
-// infix alignment through padding on the infix that works for any control. We manually measure
-// spacing as provided by the Material Design specification. The outlined dimensions in the
-// spec section do not match with the text fields shown in the overview or the ones implemented
-// by MDC. Note that we need to account for the input box offset. See above for more context.
-$mat-form-field-with-label-input-padding-top: 24px;
-$mat-form-field-with-label-input-padding-bottom: 8px;
-
-// Vertical spacing of the text-field if there is no label. We manually measure the
-// spacing in the specs. See comment above for padding for text fields with label. The
-// same reasoning applies to the padding for text fields without label.
-$mat-form-field-no-label-padding-bottom: 16px;
-$mat-form-field-no-label-padding-top: 16px;
-
-// The amount of padding between the icon prefix/suffix and the infix.
-// This assumes that the icon will be a 24px square with 12px padding.
-$mat-form-field-icon-prefix-infix-padding: 4px;