[Stepper] Add completed to global pseudo-classes

docs/src/pages/customization/how-to-customize/how-to-customize.md

@@ -108,12 +108,13 @@ You can rely on the following [global class names](/styles/advanced/#with-materi
 | :------------ | :------------------ |
 | active        | `.Mui-active`       |
 | checked       | `.Mui-checked`      |
+| completed     | `.Mui-completed`    |
 | disabled      | `.Mui-disabled`     |
 | error         | `.Mui-error`        |
-| focused       | `.Mui-focused`      |
+| expanded      | `.Mui-expanded`     |
 | focus visible | `.Mui-focusVisible` |
+| focused       | `.Mui-focused`      |
 | required      | `.Mui-required`     |
-| expanded      | `.Mui-expanded`     |
 | selected      | `.Mui-selected`     |
 
 > ⚠️ Never style these pseudo-class class names directly:

packages/material-ui-unstyled/src/generateUtilityClass/generateUtilityClass.ts

@@ -1,12 +1,13 @@
 const globalPseudoClassesMapping: Record<string, string> = {
   active: 'Mui-active',
   checked: 'Mui-checked',
+  completed: 'Mui-completed',
   disabled: 'Mui-disabled',
   error: 'Mui-error',
+  expanded: 'Mui-expanded',
   focused: 'Mui-focused',
   focusVisible: 'Mui-focusVisible',
   required: 'Mui-required',
-  expanded: 'Mui-expanded',
   selected: 'Mui-selected',
 };
 

packages/material-ui/src/styles/createTheme.js

@@ -40,12 +40,13 @@ function createTheme(options = {}, ...args) {
     const pseudoClasses = [
       'active',
       'checked',
+      'completed',
       'disabled',
       'error',
+      'expanded',
       'focused',
       'focusVisible',
       'required',
-      'expanded',
       'selected',
     ];