@angular/material-experimental 14.0.0-next.0 → 14.0.0-next.11

package/mdc-progress-bar/_progress-bar-theme.scss

@@ -1,8 +1,9 @@
+@use '@angular/material' as mat;
 @use '@material/theme/theme-color' as mdc-theme-color;
 @use '@material/linear-progress' as mdc-linear-progress;
 @use 'sass:color';
+
 @use '../mdc-helpers/mdc-helpers';
-@use '../../material/core/theming/theming';
 
 @mixin _palette-styles($color) {
   // TODO(crisbeto): the buffer color should come from somewhere in MDC, however at the time of
@@ -16,7 +17,7 @@
 }
 
 @mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
+  $config: mat.get-color-config($config-or-theme);
   @include mdc-helpers.mat-using-mdc-theme($config) {
     .mat-mdc-progress-bar {
       @include _palette-styles(primary);
@@ -37,11 +38,11 @@
 @mixin density($config-or-theme) {}
 
 @mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
-  @include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-progress-bar') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
+  $theme: mat.private-legacy-get-theme($theme-or-color-config);
+  @include mat.private-check-duplicate-theme-styles($theme, 'mat-mdc-progress-bar') {
+    $color: mat.get-color-config($theme);
+    $density: mat.get-density-config($theme);
+    $typography: mat.get-typography-config($theme);
 
     @if $color != null {
       @include color($color);

package/mdc-progress-spinner/_progress-spinner-theme.scss

@@ -1,13 +1,14 @@
+@use '@angular/material' as mat;
 @use '@material/circular-progress' as mdc-circular-progress;
+
 @use '../mdc-helpers/mdc-helpers';
-@use '../../material/core/theming/theming';
 
 @mixin _palette-styles($color) {
   @include mdc-circular-progress.color($color, $query: mdc-helpers.$mat-theme-styles-query);
 }
 
 @mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
+  $config: mat.get-color-config($config-or-theme);
   @include mdc-helpers.mat-using-mdc-theme($config) {
     .mat-mdc-progress-spinner {
       @include _palette-styles(primary);
@@ -28,11 +29,11 @@
 @mixin density($config-or-theme) {}
 
 @mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
-  @include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-progress-spinner') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
+  $theme: mat.private-legacy-get-theme($theme-or-color-config);
+  @include mat.private-check-duplicate-theme-styles($theme, 'mat-mdc-progress-spinner') {
+    $color: mat.get-color-config($theme);
+    $density: mat.get-density-config($theme);
+    $typography: mat.get-typography-config($theme);
 
     @if $color != null {
       @include color($color);

package/mdc-radio/_radio-theme.scss

@@ -1,11 +1,10 @@
 @use 'sass:map';
+@use '@angular/material' as mat;
 @use '@material/theme/theme-color' as mdc-theme-color;
 @use '@material/radio/radio-theme' as mdc-radio-theme;
 @use '@material/radio/radio' as mdc-radio;
 @use '@material/form-field' as mdc-form-field;
 @use '../mdc-helpers/mdc-helpers';
-@use '../../material/core/typography/typography';
-@use '../../material/core/theming/theming';
 
 @mixin _color-palette($color-palette) {
   @include mdc-radio-theme.theme((
@@ -15,15 +14,14 @@
     selected-pressed-icon-color: $color-palette,
   ));
 
-  // TODO(crisbeto): this should be included by MDC's `theme-styles`, but it isn't currently.
-  @include mdc-radio-theme.focus-indicator-color($color-palette);
+  --mat-mdc-radio-checked-ripple-color: #{$color-palette};
 }
 
 @mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-  $primary: theming.get-color-from-palette(map.get($config, primary));
-  $accent: theming.get-color-from-palette(map.get($config, accent));
-  $warn: theming.get-color-from-palette(map.get($config, warn));
+  $config: mat.get-color-config($config-or-theme);
+  $primary: mat.get-color-from-palette(map.get($config, primary));
+  $accent: mat.get-color-from-palette(map.get($config, accent));
+  $warn: mat.get-color-from-palette(map.get($config, warn));
 
   @include mdc-helpers.mat-using-mdc-theme($config) {
     $on-surface: rgba(mdc-theme-color.$on-surface, 0.54);
@@ -41,6 +39,8 @@
         unselected-pressed-icon-color: $on-surface,
       ));
 
+      --mat-mdc-radio-ripple-color: #{mdc-theme-color.prop-value(on-surface)};
+
       &.mat-primary {
         @include _color-palette($primary);
       }
@@ -57,8 +57,8 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2018-config(
-      theming.get-typography-config($config-or-theme));
+  $config: mat.private-typography-to-2018-config(
+      mat.get-typography-config($config-or-theme));
   @include mdc-helpers.mat-using-mdc-typography($config) {
     @include mdc-radio.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
     @include mdc-form-field.core-styles($query: mdc-helpers.$mat-typography-styles-query);
@@ -66,7 +66,7 @@
 }
 
 @mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
+  $density-scale: mat.get-density-config($config-or-theme);
   .mat-mdc-radio-button .mdc-radio {
     @include mdc-radio-theme.density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
   }
@@ -79,11 +79,11 @@
 }
 
 @mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
-  @include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-radio') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
+  $theme: mat.private-legacy-get-theme($theme-or-color-config);
+  @include mat.private-check-duplicate-theme-styles($theme, 'mat-mdc-radio') {
+    $color: mat.get-color-config($theme);
+    $density: mat.get-density-config($theme);
+    $typography: mat.get-typography-config($theme);
 
     @if $color != null {
       @include color($color);

package/mdc-select/_select-theme.scss

@@ -1,10 +1,10 @@
+@use '@angular/material' as mat;
 @use '@material/theme/theme-color' as mdc-theme-color;
 @use '@material/menu-surface' as mdc-menu-surface;
 @use '@material/list/evolution-mixins' as mdc-list;
 @use '@material/typography' as mdc-typography;
+
 @use '../mdc-helpers/mdc-helpers';
-@use '../../material/core/typography/typography';
-@use '../../material/core/theming/theming';
 
 // Gets the color to use for some text that is highlighted while a select has focus.
 @function _get-mdc-focused-text-color($palette) {
@@ -12,7 +12,7 @@
 }
 
 @mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
+  $config: mat.get-color-config($config-or-theme);
 
   @include mdc-helpers.mat-using-mdc-theme($config) {
     $disabled-color: rgba(mdc-theme-color.prop-value(on-surface), 0.38);
@@ -62,8 +62,8 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2018-config(
-      theming.get-typography-config($config-or-theme));
+  $config: mat.private-typography-to-2018-config(
+      mat.get-typography-config($config-or-theme));
   @include mdc-helpers.mat-using-mdc-typography($config) {
     @include mdc-menu-surface.core-styles(mdc-helpers.$mat-typography-styles-query);
 
@@ -71,7 +71,7 @@
       @include mdc-list.list-base(mdc-helpers.$mat-typography-styles-query);
     }
 
-    .mat-mdc-select-value {
+    .mat-mdc-select {
       @include mdc-typography.typography(body1, $query: mdc-helpers.$mat-typography-styles-query);
     }
   }
@@ -80,11 +80,11 @@
 @mixin density($config-or-theme) {}
 
 @mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
-  @include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-select') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
+  $theme: mat.private-legacy-get-theme($theme-or-color-config);
+  @include mat.private-check-duplicate-theme-styles($theme, 'mat-mdc-select') {
+    $color: mat.get-color-config($theme);
+    $density: mat.get-density-config($theme);
+    $typography: mat.get-typography-config($theme);
 
     @if $color != null {
       @include color($color);

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

@@ -1,12 +1,11 @@
 @use 'sass:map';
 @use 'sass:color';
+@use '@angular/material' as mat;
 @use '@material/switch/switch-theme' as mdc-switch-theme;
 @use '@material/theme/color-palette' as mdc-color-palette;
 @use '@material/form-field' as mdc-form-field;
+
 @use '../mdc-helpers/mdc-helpers';
-@use '../../material/core/typography/typography';
-@use '../../material/core/theming/theming';
-@use '../../material/core/theming/palette';
 
 // Generates all color mapping for the properties that only change based on the theme.
 @function _get-theme-base-map($is-dark) {
@@ -70,10 +69,10 @@
 }
 
 @mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-  $primary: theming.get-color-from-palette(map.get($config, primary));
-  $accent: theming.get-color-from-palette(map.get($config, accent));
-  $warn: theming.get-color-from-palette(map.get($config, warn));
+  $config: mat.get-color-config($config-or-theme);
+  $primary: mat.get-color-from-palette(map.get($config, primary));
+  $accent: mat.get-color-from-palette(map.get($config, accent));
+  $warn: mat.get-color-from-palette(map.get($config, warn));
   $is-dark: map.get($config, is-dark);
 
   @include mdc-helpers.mat-using-mdc-theme($config) {
@@ -99,27 +98,27 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2018-config(
-      theming.get-typography-config($config-or-theme));
+  $config: mat.private-typography-to-2018-config(
+      mat.get-typography-config($config-or-theme));
   @include mdc-helpers.mat-using-mdc-typography($config) {
     @include mdc-form-field.core-styles($query: mdc-helpers.$mat-typography-styles-query);
   }
 }
 
 @mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
+  $density-scale: mat.get-density-config($config-or-theme);
   .mat-mdc-slide-toggle {
     @include mdc-switch-theme.theme(mdc-switch-theme.density($density-scale));
   }
 }
 
 @mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
+  $theme: mat.private-legacy-get-theme($theme-or-color-config);
 
-  @include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-slide-toggle') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
+  @include mat.private-check-duplicate-theme-styles($theme, 'mat-mdc-slide-toggle') {
+    $color: mat.get-color-config($theme);
+    $density: mat.get-density-config($theme);
+    $typography: mat.get-typography-config($theme);
 
     @if $color != null {
       @include color($color);

package/mdc-slider/_slider-theme.scss

@@ -1,15 +1,14 @@
 @use 'sass:map';
 
+@use '@angular/material' as mat;
 @use '@material/slider/slider' as mdc-slider;
 @use '@material/slider/slider-theme';
 @use '@material/theme/variables' as theme-variables;
+
 @use '../mdc-helpers/mdc-helpers';
-@use '../../material/core/typography/typography';
-@use '../../material/core/ripple/ripple-theme';
-@use '../../material/core/theming/theming';
 
 @mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
+  $config: mat.get-color-config($config-or-theme);
   @include mdc-helpers.mat-using-mdc-theme($config) {
     @include mdc-slider.without-ripple($query: mdc-helpers.$mat-theme-styles-query);
 
@@ -47,8 +46,8 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2018-config(
-      theming.get-typography-config($config-or-theme));
+  $config: mat.private-typography-to-2018-config(
+      mat.get-typography-config($config-or-theme));
   @include mdc-helpers.mat-using-mdc-typography($config) {
     @include mdc-slider.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
   }
@@ -57,11 +56,11 @@
 @mixin density($config-or-theme) {}
 
 @mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
-  @include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-slider') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
+  $theme: mat.private-legacy-get-theme($theme-or-color-config);
+  @include mat.private-check-duplicate-theme-styles($theme, 'mat-mdc-slider') {
+    $color: mat.get-color-config($theme);
+    $density: mat.get-density-config($theme);
+    $typography: mat.get-typography-config($theme);
 
     @if $color != null {
       @include color($color);
@@ -112,7 +111,7 @@
     $query: mdc-helpers.$mat-theme-styles-query
   );
   $ripple-color: map.get(theme-variables.$property-values, $color);
-  @include ripple-theme.color((
+  @include mat.ripple-color((
     foreground: (
       base: $ripple-color
     ),

package/mdc-slider/slider.d.ts

@@ -296,6 +296,10 @@ export declare class MatSlider extends _MatSliderMixinBase implements AfterViewI
     private _SUPPORTS_POINTER_EVENTS;
     /** Subscription to changes to the directionality (LTR / RTL) context for the application. */
     private _dirChangeSubscription;
+    /** Observer used to monitor size changes in the slider. */
+    private _resizeObserver;
+    /** Timeout used to debounce resize listeners. */
+    private _resizeTimer;
     constructor(_ngZone: NgZone, _cdr: ChangeDetectorRef, elementRef: ElementRef<HTMLElement>, _platform: Platform, _globalChangeAndInputListener: GlobalChangeAndInputListener<'input' | 'change'>, document: any, _dir: Directionality, _globalRippleOptions?: RippleGlobalOptions | undefined, animationMode?: string);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
@@ -361,6 +365,8 @@ export declare class MatSlider extends _MatSliderMixinBase implements AfterViewI
     _getTickMarkClass(tickMark: TickMark): string;
     /** Whether the slider thumb ripples should be disabled. */
     _isRippleDisabled(): boolean;
+    /** Starts observing and updating the slider if the host changes its size. */
+    private _observeHostResize;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSlider, [null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatSlider, "mat-slider", ["matSlider"], { "color": "color"; "disableRipple": "disableRipple"; "disabled": "disabled"; "discrete": "discrete"; "showTickMarks": "showTickMarks"; "min": "min"; "max": "max"; "step": "step"; "displayWith": "displayWith"; }, {}, ["_inputs"], ["*"]>;
 }

package/mdc-snack-bar/_snack-bar-theme.scss

@@ -1,13 +1,13 @@
+@use '@angular/material' as mat;
 @use '@material/theme/theme-color' as mdc-theme-color;
 @use '@material/snackbar' as mdc-snackbar;
 @use 'sass:color';
 @use 'sass:map';
+
 @use '../mdc-helpers/mdc-helpers';
-@use '../../material/core/typography/typography';
-@use '../../material/core/theming/theming';
 
 @mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
+  $config: mat.get-color-config($config-or-theme);
 
   $orig-fill-color: mdc-snackbar.$fill-color;
   $orig-label-ink-color: mdc-snackbar.$label-ink-color;
@@ -41,7 +41,7 @@
   .mat-mdc-simple-snack-bar .mat-mdc-snack-bar-actions .mdc-snackbar__action.mdc-snackbar__action {
     $is-dark-theme: map.get($config, is-dark);
     $accent: map.get($config, accent);
-    color: if($is-dark-theme, inherit, theming.get-color-from-palette($accent, text));
+    color: if($is-dark-theme, inherit, mat.get-color-from-palette($accent, text));
 
     .mat-ripple-element {
       background-color: currentColor;
@@ -51,8 +51,8 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2018-config(
-      theming.get-typography-config($config-or-theme));
+  $config: mat.private-typography-to-2018-config(
+      mat.get-typography-config($config-or-theme));
   @include mdc-helpers.mat-using-mdc-typography($config) {
     @include mdc-snackbar.core-styles($query: mdc-helpers.$mat-typography-styles-query);
   }
@@ -61,11 +61,11 @@
 @mixin density($config-or-theme) {}
 
 @mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
-  @include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-snack-bar') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
+  $theme: mat.private-legacy-get-theme($theme-or-color-config);
+  @include mat.private-check-duplicate-theme-styles($theme, 'mat-mdc-snack-bar') {
+    $color: mat.get-color-config($theme);
+    $density: mat.get-density-config($theme);
+    $typography: mat.get-typography-config($theme);
 
     @if $color != null {
       @include color($color);

package/mdc-table/_table-theme.scss

@@ -1,13 +1,13 @@
 @use 'sass:map';
+@use '@angular/material' as mat;
 @use '@material/theme/theme-color' as mdc-theme-color;
 @use '@material/data-table/data-table' as mdc-data-table;
 @use '@material/data-table' as mdc-data-table-theme;
+
 @use '../mdc-helpers/mdc-helpers';
-@use '../../material/core/typography/typography';
-@use '../../material/core/theming/theming';
 
 @mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
+  $config: mat.get-color-config($config-or-theme);
   // Save original values of MDC global variables. We need to save these so we can restore the
   // variables to their original values and prevent unintended side effects from using this mixin.
   $orig-selected-row-fill-color: mdc-data-table-theme.$selected-row-fill-color;
@@ -15,8 +15,6 @@
   $orig-row-hover-fill-color: mdc-data-table-theme.$row-hover-fill-color;
   $orig-header-row-text-color: mdc-data-table-theme.$header-row-text-color;
   $orig-row-text-color: mdc-data-table-theme.$row-text-color;
-  $orig-sort-icon-color: mdc-data-table-theme.$sort-icon-color;
-  $orig-sort-icon-active-color: mdc-data-table-theme.$sort-icon-active-color;
   $orig-stroke-color: mdc-data-table-theme.$stroke-color;
 
   @include mdc-helpers.mat-using-mdc-theme($config) {
@@ -25,12 +23,9 @@
     mdc-data-table-theme.$row-hover-fill-color: rgba(mdc-theme-color.prop-value(on-surface), 0.04);
     mdc-data-table-theme.$header-row-text-color: rgba(mdc-theme-color.prop-value(on-surface), 0.87);
     mdc-data-table-theme.$row-text-color: rgba(mdc-theme-color.prop-value(on-surface), 0.87);
-    mdc-data-table-theme.$sort-icon-color: rgba(mdc-theme-color.prop-value(on-surface), 0.6);
-    mdc-data-table-theme.$sort-icon-active-color:
-        rgba(mdc-theme-color.prop-value(on-surface), 0.87);
     mdc-data-table-theme.$stroke-color: rgba(mdc-theme-color.prop-value(on-surface), 0.12);
 
-    @include mdc-data-table.core-styles($query: mdc-helpers.$mat-theme-styles-query);
+    @include mdc-data-table.table-styles($query: mdc-helpers.$mat-theme-styles-query);
   }
 
   // Restore original values of MDC global variables.
@@ -39,26 +34,24 @@
   mdc-data-table-theme.$row-hover-fill-color: $orig-row-hover-fill-color;
   mdc-data-table-theme.$header-row-text-color: $orig-header-row-text-color;
   mdc-data-table-theme.$row-text-color: $orig-row-text-color;
-  mdc-data-table-theme.$sort-icon-color: $orig-sort-icon-color;
-  mdc-data-table-theme.$sort-icon-active-color: $orig-sort-icon-active-color;
   mdc-data-table-theme.$stroke-color: $orig-stroke-color;
 
   .mat-mdc-table {
     $background: map.get($config, background);
-    background: theming.get-color-from-palette($background, 'card');
+    background: mat.get-color-from-palette($background, 'card');
   }
 }
 
 @mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2018-config(
-      theming.get-typography-config($config-or-theme));
+  $config: mat.private-typography-to-2018-config(
+      mat.get-typography-config($config-or-theme));
   @include mdc-helpers.mat-using-mdc-typography($config) {
-    @include mdc-data-table.core-styles($query: mdc-helpers.$mat-typography-styles-query);
+    @include mdc-data-table.table-styles($query: mdc-helpers.$mat-typography-styles-query);
   }
 }
 
 @mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
+  $density-scale: mat.get-density-config($config-or-theme);
   .mat-mdc-table {
     @include mdc-data-table-theme.density($density-scale,
       $query: mdc-helpers.$mat-base-styles-query);
@@ -66,11 +59,11 @@
 }
 
 @mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
-  @include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-table') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
+  $theme: mat.private-legacy-get-theme($theme-or-color-config);
+  @include mat.private-check-duplicate-theme-styles($theme, 'mat-mdc-table') {
+    $color: mat.get-color-config($theme);
+    $density: mat.get-density-config($theme);
+    $typography: mat.get-typography-config($theme);
 
     @if $color != null {
       @include color($color);

package/mdc-tabs/_tabs-common.scss

@@ -1,9 +1,10 @@
+@use '@angular/cdk';
+@use '@angular/material' as mat;
 @use '@material/ripple' as mdc-ripple;
 @use '@material/tab' as mdc-tab;
 @use '@material/tab-indicator' as mdc-tab-indicator;
 @use 'sass:map';
-@use '../../material/core/style/vendor-prefixes';
-@use '../../cdk/a11y';
+
 @use '../mdc-helpers/mdc-helpers';
 
 $mat-tab-animation-duration: 500ms !default;
@@ -71,7 +72,7 @@ $mat-tab-animation-duration: 500ms !default;
 
     // The usual focus indication is color-based so it won't show up in
     // high contrast mode. Add an outline which is a bit more visible.
-    @include a11y.high-contrast {
+    @include cdk.high-contrast {
       $outline-width: 2px;
       outline: dotted $outline-width;
       outline-offset: -$outline-width; // Not supported on IE, but looks better everywhere else.
@@ -94,7 +95,7 @@ $mat-tab-animation-duration: 500ms !default;
   }
 
   .mat-mdc-tab-header-pagination {
-    @include vendor-prefixes.user-select(none);
+    @include mat.private-user-select(none);
     position: relative;
     display: none;
     justify-content: center;
@@ -104,6 +105,15 @@ $mat-tab-animation-duration: 500ms !default;
     z-index: 2;
     -webkit-tap-highlight-color: transparent;
     touch-action: none;
+    box-sizing: content-box;
+    background: none;
+    border: none;
+    outline: 0;
+    padding: 0;
+
+    &::-moz-focus-inner {
+      border: 0;
+    }
 
     .mat-ripple-element {
       opacity: map.get(mdc-ripple.$dark-ink-opacities, press);

package/mdc-tabs/_tabs-theme.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use '@angular/material' as mat;
 @use '@material/theme/theme-color' as mdc-theme-color;
 @use '@material/theme/theme' as mdc-theme;
 @use '@material/tab-indicator' as mdc-tab-indicator;
@@ -6,15 +7,14 @@
 @use '@material/tab' as mdc-tab;
 @use '@material/tab/mixins' as mdc-tab-mixins;
 @use '@material/tab-bar' as mdc-tab-bar;
+
 @use '../mdc-helpers/mdc-helpers';
-@use '../../material/core/typography/typography';
-@use '../../material/core/theming/theming';
 
 @mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-  $primary: theming.get-color-from-palette(map.get($config, primary));
-  $accent: theming.get-color-from-palette(map.get($config, accent));
-  $warn: theming.get-color-from-palette(map.get($config, warn));
+  $config: mat.get-color-config($config-or-theme);
+  $primary: mat.get-color-from-palette(map.get($config, primary));
+  $accent: mat.get-color-from-palette(map.get($config, accent));
+  $warn: mat.get-color-from-palette(map.get($config, warn));
 
   @include mdc-helpers.mat-using-mdc-theme($config) {
     .mat-mdc-tab, .mat-mdc-tab-link {
@@ -110,8 +110,8 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2018-config(
-      theming.get-typography-config($config-or-theme));
+  $config: mat.private-typography-to-2018-config(
+      mat.get-typography-config($config-or-theme));
   @include mdc-helpers.mat-using-mdc-typography($config) {
     @include mdc-tab.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
     @include mdc-tab-indicator.core-styles($query: mdc-helpers.$mat-typography-styles-query);
@@ -119,18 +119,18 @@
 }
 
 @mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
+  $density-scale: mat.get-density-config($config-or-theme);
   .mat-mdc-tab-header {
     @include mdc-tab-bar.density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
   }
 }
 
 @mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
-  @include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-tabs') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
+  $theme: mat.private-legacy-get-theme($theme-or-color-config);
+  @include mat.private-check-duplicate-theme-styles($theme, 'mat-mdc-tabs') {
+    $color: mat.get-color-config($theme);
+    $density: mat.get-density-config($theme);
+    $typography: mat.get-typography-config($theme);
 
     @if $color != null {
       @include color($color);

package/mdc-tabs/ink-bar.d.ts

@@ -47,7 +47,7 @@ export declare class MatInkBarFoundation {
     /** Removes the ink bar from the current item. */
     deactivate(): void;
     /** Gets the ClientRect of the ink bar. */
-    computeContentClientRect(): ClientRect;
+    computeContentClientRect(): DOMRect;
     /** Initializes the foundation. */
     init(): void;
     /** Destroys the foundation. */

package/mdc-tabs/tab-group.d.ts

@@ -24,7 +24,11 @@ export declare class MatTabGroup extends _MatTabGroupBase {
     get fitInkBarToContent(): boolean;
     set fitInkBarToContent(v: BooleanInput);
     private _fitInkBarToContent;
+    /** Whether tabs should be stretched to fill the header. */
+    get stretchTabs(): boolean;
+    set stretchTabs(v: BooleanInput);
+    private _stretchTabs;
     constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, defaultConfig?: MatTabsConfig, animationMode?: string);
     static ɵfac: i0.ɵɵFactoryDeclaration<MatTabGroup, [null, null, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatTabGroup, "mat-tab-group", ["matTabGroup"], { "color": "color"; "disableRipple": "disableRipple"; "fitInkBarToContent": "fitInkBarToContent"; }, {}, ["_allTabs"], never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatTabGroup, "mat-tab-group", ["matTabGroup"], { "color": "color"; "disableRipple": "disableRipple"; "fitInkBarToContent": "fitInkBarToContent"; "stretchTabs": "mat-stretch-tabs"; }, {}, ["_allTabs"], never>;
 }