fix(material/core): rename corner extra-small to xs (#32101)

* fix(material/core): rename corner extra-small to xs

* fix(material/core): update devapp

Author: andrewseguin

src/dev-app/system-classes-demo/system-classes-demo.html

@@ -115,9 +115,7 @@ <h3> Label </h3>
 <section>
   <h2>Shape</h2>
   <div class="demo-section-container demo-grid">
-    <div class="mat-border mat-corner-extra-sm demo-box mat-bg-primary-container">
-      mat-corner-extra-sm
-    </div>
+    <div class="mat-border mat-corner-xs demo-box mat-bg-primary-container">mat-corner-xs</div>
     <div class="mat-border mat-corner-sm demo-box mat-bg-primary-container">mat-corner-sm</div>
     <div class="mat-border mat-corner-md demo-box mat-bg-primary-container">mat-corner-md</div>
     <div class="mat-border mat-corner-lg demo-box mat-bg-primary-container">mat-corner-lg</div>

src/material/core/tokens/_classes.scss

@@ -306,7 +306,7 @@
 
   // Sets the border radius to extra small. Use for components that need a small amount of rounding,
   // such as a chip. In Angular Material, this is used for the shape of a snackbar and a tooltip.
-  .mat-corner-extra-sm {
+  .mat-corner-xs {
     border-radius: var(--mat-sys-corner-extra-small);
   }