fix: update component categories screenshots to M3

Author: amysorto

scenes/src/app/scenes/autocomplete/autocomplete-scene.html

@@ -6,10 +6,10 @@
            matInput
            [formControl]="myControl"
            [matAutocomplete]="auto">
-    <mat-autocomplete #auto="matAutocomplete">
-      <mat-option *ngFor="let option of options" [value]="option">
-        {{option}}
-      </mat-option>
+    <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
+      @for (option of options; track option) {
+        <mat-option [value]="option">{{option}}</mat-option>
+      }
     </mat-autocomplete>
   </mat-form-field>
 </form>

scenes/src/app/scenes/bottom-sheet/bottom-sheet-scene.html

@@ -1,10 +1,10 @@
 <mat-list>
   <mat-list-item>
-    <mat-icon>favorite</mat-icon>
-    Favorite
+    <mat-icon matListItemIcon>favorite</mat-icon>
+    <div matListItemTitle>Favorite</div>
   </mat-list-item>
   <mat-list-item>
-    <mat-icon>share</mat-icon>
-    Share
+    <mat-icon matListItemIcon>share</mat-icon>
+    <div matListItemTitle>Share</div>
   </mat-list-item>
 </mat-list>

scenes/src/app/scenes/bottom-sheet/bottom-sheet-scene.scss

@@ -1,12 +1,6 @@
 .mat-bottom-sheet-container {
   min-width: 0 !important;
   width: 250px;
-}
-
-.mat-icon {
-  margin-right: 24px;
-}
-
-.cdk-overlay-backdrop {
-  opacity: 0 !important;
+  border-top-left-radius: var(--mat-bottom-sheet-container-shape);
+  border-top-right-radius: var(--mat-bottom-sheet-container-shape);
 }

scenes/src/app/scenes/button-toggle/button-toggle-scene.html

@@ -1,11 +1,11 @@
-<mat-button-toggle-group class="scene-button-toggle" name="fontStyle" aria-label="Font Style">
-  <mat-button-toggle value="bold" class="scene-button-toggle-bold">
+<mat-button-toggle-group class="scene-button-toggle" aria-label="Font Style">
+  <mat-button-toggle value="bold">
     <mat-icon>format_align_left</mat-icon>
   </mat-button-toggle>
-  <mat-button-toggle value="italic" class="scene-button-toggle-italic">
+  <mat-button-toggle value="italic">
     <mat-icon>format_align_justify</mat-icon>
   </mat-button-toggle>
-  <mat-button-toggle value="underline" class="scene-button-toggle-underline" [checked]="true">
+  <mat-button-toggle value="underline" [checked]="true">
     <mat-icon>format_align_right</mat-icon>
   </mat-button-toggle>
 </mat-button-toggle-group>

scenes/src/app/scenes/button-toggle/button-toggle-scene.scss

@@ -0,0 +1,3 @@
+.scene-button-toggle {
+  --mat-standard-button-toggle-selected-state-text-color: var(--mat-icon-color);
+}

scenes/src/app/scenes/button-toggle/button-toggle-scene.ts

@@ -6,6 +6,7 @@ import {MatIconModule} from '@angular/material/icon';
   encapsulation: ViewEncapsulation.None,
   selector: 'app-button-toggle-scene',
   templateUrl: './button-toggle-scene.html',
+  styleUrls: ['./button-toggle-scene.scss'],
   standalone: true,
   imports: [MatButtonToggleModule, MatIconModule],
 })

scenes/src/app/scenes/card/card-scene.html

@@ -1,9 +1,11 @@
 <div class="scene-card">
   <mat-card appearance="outlined">
-    <mat-card-title class="docs-scene-card-title">
-    </mat-card-title>
+    <mat-card-header>
+      <div class="docs-scene-card-title"></div>
+    </mat-card-header>
 
-    <mat-card-content class="scene-content">
+    <mat-card-content>
+      <div class="scene-content"></div>
     </mat-card-content>
   </mat-card>
 </div>

scenes/src/app/scenes/card/card-scene.scss

@@ -4,14 +4,15 @@
 
 .scene-content {
   background: rgba(red, 0.3);
-  border-radius: 4px;
+  border-radius: 12px;
   height: 70px;
   width: 100%;
+  margin-top: 8px;
 }
 
 .docs-scene-card-title {
   background: rgba(red, 0.5);
-  border-radius: 4px;
+  border-radius: 12px;
   height: 30px;
   width: 70%;
 }

scenes/src/app/scenes/checkbox/checkbox-scene.html

@@ -1,5 +1,7 @@
 <div class="scene-checkboxes">
-  <mat-checkbox class="scene-checkbox-all" [indeterminate]="true">All</mat-checkbox>
+  <div>
+    <mat-checkbox class="scene-checkbox-all" [indeterminate]="true">All</mat-checkbox>
+  </div>
   <mat-checkbox [checked]="true">Draft</mat-checkbox>
   <mat-checkbox [checked]="true">In Progress</mat-checkbox>
   <mat-checkbox>Submitted</mat-checkbox>

scenes/src/app/scenes/checkbox/checkbox-scene.scss

@@ -1,17 +1,7 @@
 .scene-checkboxes {
-  width: 80px;
+  width: 120px;
 }
 
 .scene-checkbox-all {
   margin-left: -20px;
 }
-
-/* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
-.mat-checkbox-layout {
-  padding: 5px 0;
-}
-
-/* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
-.mat-checkbox-label {
-  font-size: 20px;
-}