docs: update primary docs

Author: J-Sek

packages/docs/src/examples/elevation/prop-dynamic.vue

@@ -4,7 +4,7 @@
     <v-hover v-slot="{ isHovering, props }">
       <v-card
         v-bind="props"
-        :elevation="isHovering ? 24 : 6"
+        :elevation="isHovering ? 5 : 1"
         class="mx-auto pa-6"
       >
         Prop based elevation
@@ -17,7 +17,7 @@
     <v-hover v-slot="{ isHovering, props }">
       <div
         v-bind="props"
-        :class="`elevation-${isHovering ? 24 : 6}`"
+        :class="`elevation-${isHovering ? 5 : 1}`"
         class="mx-auto pa-6"
       >
         Class based elevation

packages/docs/src/examples/elevation/usage.vue

@@ -2,7 +2,7 @@
   <v-container>
     <v-row justify="center">
       <v-col
-        v-for="(_, n) in 25"
+        v-for="(_, n) in 6"
         :key="n"
         cols="auto"
       >

packages/docs/src/pages/en/getting-started/elevation-migration.md

@@ -28,25 +28,12 @@ Vuetify 4 introduces Material Design 3 (MD3) elevation shadows, which differ sig
 - Simplified, more distinct elevation steps
 - Better alignment with MD3 design principles
 
-## MD3 Elevation Levels
-
-| Level | Usage                            |
-| ----- | -------------------------------- |
-| 0     | No shadow - flat surfaces        |
-| 1     | Low emphasis - cards at rest     |
-| 2     | Cards, contained buttons         |
-| 3     | FABs, Snackbars                  |
-| 4     | Navigation drawer, Bottom sheet  |
-| 5     | Dialogs                          |
-
-In MD3, elevation changes are commonly used to indicate interactive states. For example, a card at rest might use `elevation-1`, rising to `elevation-2` on hover and `elevation-3` when pressed or dragged.
-
 ### Adapt CSS classes
 
 Update your elevation classes to use the new 0-5 scale.
 
 | MD2 (old)           | MD3 (new)            |
-| ------------------- | -------------------- |
+|---------------------|----------------------|
 | `elevation-0`       | `elevation-0` (0dp)  |
 | `elevation-{1-3}`   | `elevation-1` (1dp)  |
 | `elevation-{4-6}`   | `elevation-2` (3dp)  |

packages/docs/src/pages/en/styles/elevation.md

@@ -13,37 +13,20 @@ features:
 
 # Elevation
 
-The elevation helpers control the relative depth between surfaces along the **z-axis**.
+The elevation helpers control the relative depth between surfaces along the **z-axis**. Following Material Design 3 guidelines, Vuetify uses 6 elevation levels (0-5). Elevation values are measured in **dp** (density-independent pixels), a unit that ensures consistent sizing across different screen densities.
 
 <PageFeatures />
 
-| Class | Properties |
-| - | - |
-| **elevation-0** | elevation: 0px; |
-| **elevation-1** | elevation: 1px; |
-| **elevation-2** | elevation: 2px; |
-| **elevation-3** | elevation: 3px; |
-| **elevation-4** | elevation: 4px; |
-| **elevation-5** | elevation: 5px; |
-| **elevation-6** | elevation: 6px; |
-| **elevation-7** | elevation: 7px; |
-| **elevation-8** | elevation: 8px; |
-| **elevation-9** | elevation: 9px; |
-| **elevation-10** | elevation: 10px; |
-| **elevation-11** | elevation: 11px; |
-| **elevation-12** | elevation: 12px; |
-| **elevation-13** | elevation: 13px; |
-| **elevation-14** | elevation: 14px; |
-| **elevation-15** | elevation: 15px; |
-| **elevation-16** | elevation: 16px; |
-| **elevation-17** | elevation: 17px; |
-| **elevation-18** | elevation: 18px; |
-| **elevation-19** | elevation: 19px; |
-| **elevation-20** | elevation: 20px; |
-| **elevation-21** | elevation: 21px; |
-| **elevation-22** | elevation: 22px; |
-| **elevation-23** | elevation: 23px; |
-| **elevation-24** | elevation: 24px; { style="max-height: 420px;" fixed-header }|
+| Class           | Level (dp) | Usage                                 |
+|-----------------|------------|---------------------------------------|
+| **elevation-0** | 0dp        | No shadow - flat surfaces             |
+| **elevation-1** | 1dp        | Cards, buttons (elevated)             |
+| **elevation-2** | 3dp        | Menus, rich tooltip, floating app bar |
+| **elevation-3** | 6dp        | Dialogs, snackbars, FABs              |
+| **elevation-4** | 8dp        | Dragged elements                      |
+| **elevation-5** | 12dp       |                                       |
+
+In MD3, elevation changes are commonly used to indicate interactive states. For example, a card at rest might use `elevation-1`, rising to `elevation-2` on hover and `elevation-3` when pressed or dragged.
 
 <PromotedEntry />