From ae047ea63c5a87af385ec810061f037390ba7482 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Mon, 6 Jul 2026 09:54:06 +0200
Subject: [PATCH] docs: use proper shadow classes in examples

Updates the various examples so they use the new `mat-shadow-*` classes.

Fixes #33459.
---
 .../default-enabled-column-resize-flex-example.html           | 2 +-
 .../default-enabled-column-resize-example.html                | 2 +-
 .../opt-in-column-resize/opt-in-column-resize-example.html    | 2 +-
 .../core/elevation-overview/elevation-overview-example.html   | 4 +---
 .../core/ripple-overview/ripple-overview-example.html         | 2 +-
 .../material/table/table-basic/table-basic-example.html       | 2 +-
 .../table-column-styling/table-column-styling-example.html    | 2 +-
 .../table/table-drag-drop/table-drag-drop-example.html        | 2 +-
 .../table-dynamic-array-data-example.html                     | 2 +-
 .../table-dynamic-columns/table-dynamic-columns-example.html  | 2 +-
 .../table-dynamic-observable-data-example.html                | 2 +-
 .../table-expandable-rows/table-expandable-rows-example.html  | 2 +-
 .../table/table-filtering/table-filtering-example.html        | 2 +-
 .../table/table-flex-basic/table-flex-basic-example.html      | 4 ++--
 .../table-flex-large-row/table-flex-large-row-example.html    | 4 ++--
 .../table/table-footer-row/table-footer-row-example.html      | 2 +-
 .../table-generated-columns-example.html                      | 2 +-
 .../material/table/table-http/table-http-example.html         | 2 +-
 .../table-multiple-header-footer-example.html                 | 2 +-
 .../table-multiple-row-template-example.html                  | 2 +-
 .../material/table/table-overview/table-overview-example.html | 2 +-
 .../table/table-pagination/table-pagination-example.html      | 2 +-
 .../table/table-recycle-rows/table-recycle-rows-example.html  | 2 +-
 .../table/table-row-binding/table-row-binding-example.html    | 2 +-
 .../table/table-row-context/table-row-context-example.html    | 2 +-
 .../table/table-selection/table-selection-example.html        | 2 +-
 .../material/table/table-sorting/table-sorting-example.html   | 2 +-
 .../table-sticky-columns/table-sticky-columns-example.html    | 2 +-
 .../table-sticky-complex-flex-example.html                    | 2 +-
 .../table-sticky-complex/table-sticky-complex-example.html    | 2 +-
 .../table-sticky-footer/table-sticky-footer-example.html      | 2 +-
 .../table-sticky-header/table-sticky-header-example.html      | 2 +-
 .../table-text-column-advanced-example.html                   | 2 +-
 .../table/table-text-column/table-text-column-example.html    | 2 +-
 .../table/table-with-ripples/table-with-ripples-example.html  | 2 +-
 .../material/table/table-wrapped/wrapper-table.html           | 2 +-
 .../tab-group-dynamic-height-example.html                     | 4 ++--
 .../tabs/tab-group-stretched/tab-group-stretched-example.html | 2 +-
 38 files changed, 41 insertions(+), 43 deletions(-)

diff --git a/src/components-examples/material-experimental/column-resize/default-enabled-column-resize-flex/default-enabled-column-resize-flex-example.html b/src/components-examples/material-experimental/column-resize/default-enabled-column-resize-flex/default-enabled-column-resize-flex-example.html
index 7e4768f218f2..92d3b4cdf4c2 100644
--- a/src/components-examples/material-experimental/column-resize/default-enabled-column-resize-flex/default-enabled-column-resize-flex-example.html
+++ b/src/components-examples/material-experimental/column-resize/default-enabled-column-resize-flex/default-enabled-column-resize-flex-example.html
@@ -1,4 +1,4 @@
-<mat-table [dataSource]="dataSource" class="mat-elevation-z8 example-table">
+<mat-table [dataSource]="dataSource" class="mat-shadow-2 example-table">
   <!-- Position Column -->
   <ng-container matColumnDef="position" sticky>
     <mat-header-cell *matHeaderCellDef [matResizableMaxWidthPx]="100"> No. </mat-header-cell>
diff --git a/src/components-examples/material-experimental/column-resize/default-enabled-column-resize/default-enabled-column-resize-example.html b/src/components-examples/material-experimental/column-resize/default-enabled-column-resize/default-enabled-column-resize-example.html
index ca64fbb09959..456b2260ad8a 100644
--- a/src/components-examples/material-experimental/column-resize/default-enabled-column-resize/default-enabled-column-resize-example.html
+++ b/src/components-examples/material-experimental/column-resize/default-enabled-column-resize/default-enabled-column-resize-example.html
@@ -1,4 +1,4 @@
-<table mat-table [dataSource]="dataSource" class="mat-elevation-z8 example-table">
+<table mat-table [dataSource]="dataSource" class="mat-shadow-2 example-table">
   <!-- Position Column -->
   <ng-container matColumnDef="position" sticky>
     <th mat-header-cell *matHeaderCellDef [matResizableMaxWidthPx]="100"> No. </th>
diff --git a/src/components-examples/material-experimental/column-resize/opt-in-column-resize/opt-in-column-resize-example.html b/src/components-examples/material-experimental/column-resize/opt-in-column-resize/opt-in-column-resize-example.html
index 3761945f42c5..078d26ece015 100644
--- a/src/components-examples/material-experimental/column-resize/opt-in-column-resize/opt-in-column-resize-example.html
+++ b/src/components-examples/material-experimental/column-resize/opt-in-column-resize/opt-in-column-resize-example.html
@@ -1,4 +1,4 @@
-<table mat-table columnResize [dataSource]="dataSource" class="mat-elevation-z8 example-table">
+<table mat-table columnResize [dataSource]="dataSource" class="mat-shadow-2 example-table">
   <!-- Position Column -->
   <ng-container matColumnDef="position" sticky>
     <th mat-header-cell *matHeaderCellDef resizable [matResizableMaxWidthPx]="100"> No. </th>
diff --git a/src/components-examples/material/core/elevation-overview/elevation-overview-example.html b/src/components-examples/material/core/elevation-overview/elevation-overview-example.html
index 5292940f126e..b85ef062f3b4 100644
--- a/src/components-examples/material/core/elevation-overview/elevation-overview-example.html
+++ b/src/components-examples/material/core/elevation-overview/elevation-overview-example.html
@@ -1,6 +1,4 @@
-<div class="example-container"
-    [class.mat-elevation-z2]="!isActive"
-    [class.mat-elevation-z8]="isActive">
+<div class="example-container" [class.mat-shadow-1]="!isActive" [class.mat-shadow-4]="isActive">
   Example
 </div>
 
diff --git a/src/components-examples/material/core/ripple-overview/ripple-overview-example.html b/src/components-examples/material/core/ripple-overview/ripple-overview-example.html
index 7c42bd23f8ef..fe0752724d3e 100644
--- a/src/components-examples/material/core/ripple-overview/ripple-overview-example.html
+++ b/src/components-examples/material/core/ripple-overview/ripple-overview-example.html
@@ -12,7 +12,7 @@
 </mat-form-field>
 
 
-<div class="example-ripple-container mat-elevation-z4"
+<div class="example-ripple-container mat-shadow-2"
      matRipple
      [matRippleCentered]="centered"
      [matRippleDisabled]="disabled"
diff --git a/src/components-examples/material/table/table-basic/table-basic-example.html b/src/components-examples/material/table/table-basic/table-basic-example.html
index 054cb0c6ae41..30054f2ddc2e 100644
--- a/src/components-examples/material/table/table-basic/table-basic-example.html
+++ b/src/components-examples/material/table/table-basic/table-basic-example.html
@@ -1,4 +1,4 @@
-<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+<table mat-table [dataSource]="dataSource" class="mat-shadow-2">
 
   <!--- Note that these columns can be defined in any order.
         The actual rendered columns are set as a property on the row definition" -->
diff --git a/src/components-examples/material/table/table-column-styling/table-column-styling-example.html b/src/components-examples/material/table/table-column-styling/table-column-styling-example.html
index db278dd04306..7facd6ae856f 100644
--- a/src/components-examples/material/table/table-column-styling/table-column-styling-example.html
+++ b/src/components-examples/material/table/table-column-styling/table-column-styling-example.html
@@ -1,4 +1,4 @@
-<table mat-table [dataSource]="dataSource" class="mat-elevation-z8 demo-table">
+<table mat-table [dataSource]="dataSource" class="mat-shadow-2 demo-table">
   <!-- Position Column -->
   <ng-container matColumnDef="demo-position">
     <th mat-header-cell *matHeaderCellDef> No. </th>
diff --git a/src/components-examples/material/table/table-drag-drop/table-drag-drop-example.html b/src/components-examples/material/table/table-drag-drop/table-drag-drop-example.html
index a1d5dbfce35c..1c95dbdef749 100644
--- a/src/components-examples/material/table/table-drag-drop/table-drag-drop-example.html
+++ b/src/components-examples/material/table/table-drag-drop/table-drag-drop-example.html
@@ -1,4 +1,4 @@
-<mat-table #table [dataSource]="dataSource" class="mat-elevation-z8" cdkDropList (cdkDropListDropped)="drop($event)"
+<mat-table #table [dataSource]="dataSource" class="mat-shadow-2" cdkDropList (cdkDropListDropped)="drop($event)"
   cdkDropListData="dataSource">
   <!-- Position Column -->
   <ng-container matColumnDef="position" sticky>
diff --git a/src/components-examples/material/table/table-dynamic-array-data/table-dynamic-array-data-example.html b/src/components-examples/material/table/table-dynamic-array-data/table-dynamic-array-data-example.html
index d3613b45a00c..7290d49bff50 100644
--- a/src/components-examples/material/table/table-dynamic-array-data/table-dynamic-array-data-example.html
+++ b/src/components-examples/material/table/table-dynamic-array-data/table-dynamic-array-data-example.html
@@ -11,7 +11,7 @@
   </button>
 </div>
 
-<table mat-table [dataSource]="dataSource" class="mat-elevation-z8 demo-table">
+<table mat-table [dataSource]="dataSource" class="mat-shadow-2 demo-table">
   <!-- Position Column -->
   <ng-container matColumnDef="position">
     <th mat-header-cell *matHeaderCellDef>No.</th>
diff --git a/src/components-examples/material/table/table-dynamic-columns/table-dynamic-columns-example.html b/src/components-examples/material/table/table-dynamic-columns/table-dynamic-columns-example.html
index 0e35b1e1a2fc..cce67f29186c 100644
--- a/src/components-examples/material/table/table-dynamic-columns/table-dynamic-columns-example.html
+++ b/src/components-examples/material/table/table-dynamic-columns/table-dynamic-columns-example.html
@@ -2,7 +2,7 @@
 <button matButton="elevated" (click)="removeColumn()"> Remove column </button>
 <button matButton="elevated" (click)="shuffle()"> Shuffle </button>
 
-<table mat-table [dataSource]="data" class="mat-elevation-z8">
+<table mat-table [dataSource]="data" class="mat-shadow-2">
   @for (column of displayedColumns; track column) {
     <ng-container [matColumnDef]="column">
       <th mat-header-cell *matHeaderCellDef> {{column}} </th>
diff --git a/src/components-examples/material/table/table-dynamic-observable-data/table-dynamic-observable-data-example.html b/src/components-examples/material/table/table-dynamic-observable-data/table-dynamic-observable-data-example.html
index 6570b63bcb3b..5e06c0ff71f5 100644
--- a/src/components-examples/material/table/table-dynamic-observable-data/table-dynamic-observable-data-example.html
+++ b/src/components-examples/material/table/table-dynamic-observable-data/table-dynamic-observable-data-example.html
@@ -11,7 +11,7 @@
   </button>
 </div>
 
-<table mat-table [dataSource]="dataSource" class="mat-elevation-z8 demo-table">
+<table mat-table [dataSource]="dataSource" class="mat-shadow-2 demo-table">
   <!-- Position Column -->
   <ng-container matColumnDef="position">
     <th mat-header-cell *matHeaderCellDef>No.</th>
diff --git a/src/components-examples/material/table/table-expandable-rows/table-expandable-rows-example.html b/src/components-examples/material/table/table-expandable-rows/table-expandable-rows-example.html
index fb9c012b99d2..b55ecb342b77 100644
--- a/src/components-examples/material/table/table-expandable-rows/table-expandable-rows-example.html
+++ b/src/components-examples/material/table/table-expandable-rows/table-expandable-rows-example.html
@@ -1,6 +1,6 @@
 <table mat-table
        [dataSource]="dataSource" multiTemplateDataRows
-       class="mat-elevation-z8">
+       class="mat-shadow-2">
   @for (column of columnsToDisplay; track column) {
     <ng-container matColumnDef="{{column}}">
       <th mat-header-cell *matHeaderCellDef>{{column}}</th>
diff --git a/src/components-examples/material/table/table-filtering/table-filtering-example.html b/src/components-examples/material/table/table-filtering/table-filtering-example.html
index 288e7e4306d9..2175404ec23e 100644
--- a/src/components-examples/material/table/table-filtering/table-filtering-example.html
+++ b/src/components-examples/material/table/table-filtering/table-filtering-example.html
@@ -3,7 +3,7 @@
   <input matInput (keyup)="applyFilter($event)" placeholder="Ex. ium" #input>
 </mat-form-field>
 
-<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+<table mat-table [dataSource]="dataSource" class="mat-shadow-2">
 
   <!-- Position Column -->
   <ng-container matColumnDef="position">
diff --git a/src/components-examples/material/table/table-flex-basic/table-flex-basic-example.html b/src/components-examples/material/table/table-flex-basic/table-flex-basic-example.html
index 09bb2c212897..03c53bd6b9ca 100644
--- a/src/components-examples/material/table/table-flex-basic/table-flex-basic-example.html
+++ b/src/components-examples/material/table/table-flex-basic/table-flex-basic-example.html
@@ -1,4 +1,4 @@
-<mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+<mat-table [dataSource]="dataSource" class="mat-shadow-2">
   <!-- Position Column -->
   <ng-container matColumnDef="position">
     <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
@@ -25,4 +25,4 @@
 
   <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
   <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
-</mat-table>
\ No newline at end of file
+</mat-table>
diff --git a/src/components-examples/material/table/table-flex-large-row/table-flex-large-row-example.html b/src/components-examples/material/table/table-flex-large-row/table-flex-large-row-example.html
index 09bb2c212897..03c53bd6b9ca 100644
--- a/src/components-examples/material/table/table-flex-large-row/table-flex-large-row-example.html
+++ b/src/components-examples/material/table/table-flex-large-row/table-flex-large-row-example.html
@@ -1,4 +1,4 @@
-<mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+<mat-table [dataSource]="dataSource" class="mat-shadow-2">
   <!-- Position Column -->
   <ng-container matColumnDef="position">
     <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
@@ -25,4 +25,4 @@
 
   <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
   <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
-</mat-table>
\ No newline at end of file
+</mat-table>
diff --git a/src/components-examples/material/table/table-footer-row/table-footer-row-example.html b/src/components-examples/material/table/table-footer-row/table-footer-row-example.html
index c5faed4ef69d..d6a194de99d9 100644
--- a/src/components-examples/material/table/table-footer-row/table-footer-row-example.html
+++ b/src/components-examples/material/table/table-footer-row/table-footer-row-example.html
@@ -1,4 +1,4 @@
-<table mat-table [dataSource]="transactions" class="mat-elevation-z8">
+<table mat-table [dataSource]="transactions" class="mat-shadow-2">
   <!-- Item Column -->
   <ng-container matColumnDef="item">
     <th mat-header-cell *matHeaderCellDef> Item </th>
diff --git a/src/components-examples/material/table/table-generated-columns/table-generated-columns-example.html b/src/components-examples/material/table/table-generated-columns/table-generated-columns-example.html
index 110b906e2b9f..46775a4c34f8 100644
--- a/src/components-examples/material/table/table-generated-columns/table-generated-columns-example.html
+++ b/src/components-examples/material/table/table-generated-columns/table-generated-columns-example.html
@@ -1,4 +1,4 @@
-<table mat-table [dataSource]="dataSource" class="mat-elevation-z8 demo-table">
+<table mat-table [dataSource]="dataSource" class="mat-shadow-2 demo-table">
   @for (column of columns; track column) {
     <ng-container [matColumnDef]="column.columnDef">
       <th mat-header-cell *matHeaderCellDef>
diff --git a/src/components-examples/material/table/table-http/table-http-example.html b/src/components-examples/material/table/table-http/table-http-example.html
index a30712cafa22..a5793c0ae76f 100644
--- a/src/components-examples/material/table/table-http/table-http-example.html
+++ b/src/components-examples/material/table/table-http/table-http-example.html
@@ -1,4 +1,4 @@
-<div class="example-container mat-elevation-z8">
+<div class="example-container mat-shadow-2">
   @if (isLoadingResults || isRateLimitReached) {
     <div class="example-loading-shade">
       @if (isLoadingResults) {
diff --git a/src/components-examples/material/table/table-multiple-header-footer/table-multiple-header-footer-example.html b/src/components-examples/material/table/table-multiple-header-footer/table-multiple-header-footer-example.html
index 04b5b162bbb2..5ddae0bbf606 100644
--- a/src/components-examples/material/table/table-multiple-header-footer/table-multiple-header-footer-example.html
+++ b/src/components-examples/material/table/table-multiple-header-footer/table-multiple-header-footer-example.html
@@ -1,4 +1,4 @@
-<table mat-table [dataSource]="transactions" class="mat-elevation-z8">
+<table mat-table [dataSource]="transactions" class="mat-shadow-2">
   <!-- Item Column -->
   <ng-container matColumnDef="item">
     <th mat-header-cell *matHeaderCellDef> Item </th>
diff --git a/src/components-examples/material/table/table-multiple-row-template/table-multiple-row-template-example.html b/src/components-examples/material/table/table-multiple-row-template/table-multiple-row-template-example.html
index 2b158e7d8b14..51003e97f681 100644
--- a/src/components-examples/material/table/table-multiple-row-template/table-multiple-row-template-example.html
+++ b/src/components-examples/material/table/table-multiple-row-template/table-multiple-row-template-example.html
@@ -1,4 +1,4 @@
-<div class="mat-elevation-z8">
+<div class="mat-shadow-2">
   <table mat-table [dataSource]="dataSource" multiTemplateDataRows>
     <!-- Position Column -->
     <ng-container matColumnDef="position">
diff --git a/src/components-examples/material/table/table-overview/table-overview-example.html b/src/components-examples/material/table/table-overview/table-overview-example.html
index 540d30a08cdf..3dd4dc8ae8bd 100644
--- a/src/components-examples/material/table/table-overview/table-overview-example.html
+++ b/src/components-examples/material/table/table-overview/table-overview-example.html
@@ -3,7 +3,7 @@
   <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Mia" #input>
 </mat-form-field>
 
-<div class="mat-elevation-z8">
+<div class="mat-shadow-2">
   <table mat-table [dataSource]="dataSource" matSort>
 
     <!-- ID Column -->
diff --git a/src/components-examples/material/table/table-pagination/table-pagination-example.html b/src/components-examples/material/table/table-pagination/table-pagination-example.html
index ec67d8f72ee1..09d83a8a4356 100644
--- a/src/components-examples/material/table/table-pagination/table-pagination-example.html
+++ b/src/components-examples/material/table/table-pagination/table-pagination-example.html
@@ -1,4 +1,4 @@
-<div class="mat-elevation-z8">
+<div class="mat-shadow-2">
   <table mat-table [dataSource]="dataSource">
 
     <!-- Position Column -->
diff --git a/src/components-examples/material/table/table-recycle-rows/table-recycle-rows-example.html b/src/components-examples/material/table/table-recycle-rows/table-recycle-rows-example.html
index d35381653f3a..e44c0e609d80 100644
--- a/src/components-examples/material/table/table-recycle-rows/table-recycle-rows-example.html
+++ b/src/components-examples/material/table/table-recycle-rows/table-recycle-rows-example.html
@@ -1,4 +1,4 @@
-<table class="example-table mat-elevation-z8" mat-table recycleRows [dataSource]="dataSource">
+<table class="example-table mat-shadow-2" mat-table recycleRows [dataSource]="dataSource">
   <!-- Position Column -->
   <ng-container matColumnDef="position">
     <th mat-header-cell *matHeaderCellDef> No. </th>
diff --git a/src/components-examples/material/table/table-row-binding/table-row-binding-example.html b/src/components-examples/material/table/table-row-binding/table-row-binding-example.html
index 26e24ab03718..3e166d3f2b8d 100644
--- a/src/components-examples/material/table/table-row-binding/table-row-binding-example.html
+++ b/src/components-examples/material/table/table-row-binding/table-row-binding-example.html
@@ -1,4 +1,4 @@
-<table mat-table [dataSource]="dataSource" class="mat-elevation-z8 demo-table">
+<table mat-table [dataSource]="dataSource" class="mat-shadow-2 demo-table">
   <!-- Position Column -->
   <ng-container matColumnDef="position">
     <th mat-header-cell *matHeaderCellDef>No.</th>
diff --git a/src/components-examples/material/table/table-row-context/table-row-context-example.html b/src/components-examples/material/table/table-row-context/table-row-context-example.html
index 970f6fa5fb87..7c9706566b82 100644
--- a/src/components-examples/material/table/table-row-context/table-row-context-example.html
+++ b/src/components-examples/material/table/table-row-context/table-row-context-example.html
@@ -1,4 +1,4 @@
-<table mat-table [dataSource]="data" class="mat-elevation-z8">
+<table mat-table [dataSource]="data" class="mat-shadow-2">
   <!-- Implicit Column -->
   <ng-container matColumnDef="$implicit">
     <th mat-header-cell *matHeaderCellDef> $implicit </th>
diff --git a/src/components-examples/material/table/table-selection/table-selection-example.html b/src/components-examples/material/table/table-selection/table-selection-example.html
index 1a7b2d3e3867..ab988d2a485a 100644
--- a/src/components-examples/material/table/table-selection/table-selection-example.html
+++ b/src/components-examples/material/table/table-selection/table-selection-example.html
@@ -1,4 +1,4 @@
-<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+<table mat-table [dataSource]="dataSource" class="mat-shadow-2">
 
   <!-- Checkbox Column -->
   <ng-container matColumnDef="select">
diff --git a/src/components-examples/material/table/table-sorting/table-sorting-example.html b/src/components-examples/material/table/table-sorting/table-sorting-example.html
index 76edcae012cb..07c3e514723c 100644
--- a/src/components-examples/material/table/table-sorting/table-sorting-example.html
+++ b/src/components-examples/material/table/table-sorting/table-sorting-example.html
@@ -1,5 +1,5 @@
 <table mat-table [dataSource]="dataSource" matSort (matSortChange)="announceSortChange($event)"
-       class="mat-elevation-z8">
+       class="mat-shadow-2">
 
   <!-- Position Column -->
   <ng-container matColumnDef="position">
diff --git a/src/components-examples/material/table/table-sticky-columns/table-sticky-columns-example.html b/src/components-examples/material/table/table-sticky-columns/table-sticky-columns-example.html
index 904579979451..84501e12e346 100644
--- a/src/components-examples/material/table/table-sticky-columns/table-sticky-columns-example.html
+++ b/src/components-examples/material/table/table-sticky-columns/table-sticky-columns-example.html
@@ -1,4 +1,4 @@
-<section class="example-container mat-elevation-z8" tabindex="0">
+<section class="example-container mat-shadow-2" tabindex="0">
   <table mat-table [dataSource]="dataSource">
 
     <!-- Name Column -->
diff --git a/src/components-examples/material/table/table-sticky-complex-flex/table-sticky-complex-flex-example.html b/src/components-examples/material/table/table-sticky-complex-flex/table-sticky-complex-flex-example.html
index b6f9c0befe8f..19da35c58c00 100644
--- a/src/components-examples/material/table/table-sticky-complex-flex/table-sticky-complex-flex-example.html
+++ b/src/components-examples/material/table/table-sticky-complex-flex/table-sticky-complex-flex-example.html
@@ -35,7 +35,7 @@
   </mat-button-toggle-group>
 </div>
 
-<section class="example-container mat-elevation-z8" tabindex="0">
+<section class="example-container mat-shadow-2" tabindex="0">
   @for (table of tables; track table) {
     <mat-table [dataSource]="dataSource">
       <ng-container matColumnDef="position" [sticky]="isSticky(stickyColumns, 'position')">
diff --git a/src/components-examples/material/table/table-sticky-complex/table-sticky-complex-example.html b/src/components-examples/material/table/table-sticky-complex/table-sticky-complex-example.html
index abe0614ab890..97d663f0f68c 100644
--- a/src/components-examples/material/table/table-sticky-complex/table-sticky-complex-example.html
+++ b/src/components-examples/material/table/table-sticky-complex/table-sticky-complex-example.html
@@ -35,7 +35,7 @@
   </mat-button-toggle-group>
 </div>
 
-<section class="example-container mat-elevation-z8" tabindex="0">
+<section class="example-container mat-shadow-2" tabindex="0">
   @for (table of tables; track table) {
     <table mat-table [dataSource]="dataSource">
       <ng-container matColumnDef="position" [sticky]="isSticky(stickyColumns, 'position')">
diff --git a/src/components-examples/material/table/table-sticky-footer/table-sticky-footer-example.html b/src/components-examples/material/table/table-sticky-footer/table-sticky-footer-example.html
index 48de652e8b71..c244d683a91f 100644
--- a/src/components-examples/material/table/table-sticky-footer/table-sticky-footer-example.html
+++ b/src/components-examples/material/table/table-sticky-footer/table-sticky-footer-example.html
@@ -1,4 +1,4 @@
-<section class="example-container mat-elevation-z8" tabindex="0">
+<section class="example-container mat-shadow-2" tabindex="0">
   <table mat-table [dataSource]="transactions">
     <!-- Item Column -->
     <ng-container matColumnDef="item">
diff --git a/src/components-examples/material/table/table-sticky-header/table-sticky-header-example.html b/src/components-examples/material/table/table-sticky-header/table-sticky-header-example.html
index 633706d39229..e8979e61dbf3 100644
--- a/src/components-examples/material/table/table-sticky-header/table-sticky-header-example.html
+++ b/src/components-examples/material/table/table-sticky-header/table-sticky-header-example.html
@@ -1,4 +1,4 @@
-<section class="example-container mat-elevation-z8" tabindex="0">
+<section class="example-container mat-shadow-2" tabindex="0">
   <table mat-table [dataSource]="dataSource">
 
     <!-- Position Column -->
diff --git a/src/components-examples/material/table/table-text-column-advanced/table-text-column-advanced-example.html b/src/components-examples/material/table/table-text-column-advanced/table-text-column-advanced-example.html
index a609db477db1..86633d16458b 100644
--- a/src/components-examples/material/table/table-text-column-advanced/table-text-column-advanced-example.html
+++ b/src/components-examples/material/table/table-text-column-advanced/table-text-column-advanced-example.html
@@ -1,4 +1,4 @@
-<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+<table mat-table [dataSource]="dataSource" class="mat-shadow-2">
   <mat-text-column name="position" [headerText]="headerText"></mat-text-column>
 
   <!-- Change the header text. -->
diff --git a/src/components-examples/material/table/table-text-column/table-text-column-example.html b/src/components-examples/material/table/table-text-column/table-text-column-example.html
index 427692975ad0..1bdebc60b4c1 100644
--- a/src/components-examples/material/table/table-text-column/table-text-column-example.html
+++ b/src/components-examples/material/table/table-text-column/table-text-column-example.html
@@ -1,4 +1,4 @@
-<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+<table mat-table [dataSource]="dataSource" class="mat-shadow-2">
   <mat-text-column name="position"></mat-text-column>
   <mat-text-column name="name"></mat-text-column>
   <mat-text-column name="weight"></mat-text-column>
diff --git a/src/components-examples/material/table/table-with-ripples/table-with-ripples-example.html b/src/components-examples/material/table/table-with-ripples/table-with-ripples-example.html
index 0a2704e8a7b2..f0c0f055176a 100644
--- a/src/components-examples/material/table/table-with-ripples/table-with-ripples-example.html
+++ b/src/components-examples/material/table/table-with-ripples/table-with-ripples-example.html
@@ -1,4 +1,4 @@
-<mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+<mat-table [dataSource]="dataSource" class="mat-shadow-2">
   <ng-container matColumnDef="name">
     <mat-header-cell mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
     <mat-cell mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
diff --git a/src/components-examples/material/table/table-wrapped/wrapper-table.html b/src/components-examples/material/table/table-wrapped/wrapper-table.html
index ed1477b2b513..132ddba1ad51 100644
--- a/src/components-examples/material/table/table-wrapped/wrapper-table.html
+++ b/src/components-examples/material/table/table-wrapped/wrapper-table.html
@@ -1,4 +1,4 @@
-<table mat-table [dataSource]="dataSource()" class="mat-elevation-z8">
+<table mat-table [dataSource]="dataSource()" class="mat-shadow-2">
   <ng-content></ng-content>
 
   <!-- Position Column -->
diff --git a/src/components-examples/material/tabs/tab-group-dynamic-height/tab-group-dynamic-height-example.html b/src/components-examples/material/tabs/tab-group-dynamic-height/tab-group-dynamic-height-example.html
index 312652076aa0..7d63537d84af 100644
--- a/src/components-examples/material/tabs/tab-group-dynamic-height/tab-group-dynamic-height-example.html
+++ b/src/components-examples/material/tabs/tab-group-dynamic-height/tab-group-dynamic-height-example.html
@@ -2,12 +2,12 @@
 <mat-tab-group dynamicHeight>
 <!-- #enddocregion dynamic-height -->
   <mat-tab label="Short tab">
-    <div class="example-small-box mat-elevation-z4">
+    <div class="example-small-box mat-shadow-2">
       Small content
     </div>
   </mat-tab>
   <mat-tab label="Long tab">
-    <div class="example-large-box mat-elevation-z4">
+    <div class="example-large-box mat-shadow-2">
       Large content
     </div>
   </mat-tab>
diff --git a/src/components-examples/material/tabs/tab-group-stretched/tab-group-stretched-example.html b/src/components-examples/material/tabs/tab-group-stretched/tab-group-stretched-example.html
index 048ae2c47d42..b06b5aea3c77 100644
--- a/src/components-examples/material/tabs/tab-group-stretched/tab-group-stretched-example.html
+++ b/src/components-examples/material/tabs/tab-group-stretched/tab-group-stretched-example.html
@@ -1,4 +1,4 @@
-<mat-tab-group mat-stretch-tabs class="example-stretched-tabs mat-elevation-z4">
+<mat-tab-group mat-stretch-tabs class="example-stretched-tabs mat-shadow-2">
   <mat-tab label="First"> Content 1 </mat-tab>
   <mat-tab label="Second"> Content 2 </mat-tab>
   <mat-tab label="Third"> Content 3 </mat-tab>