fix: update component categories screenshots to M3

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;
-}

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

@@ -4,7 +4,6 @@ <h2>Amenities</h2>
   <mat-chip-option selected="true">Washer/Dryer</mat-chip-option>
   <mat-chip-option>Dogs ok</mat-chip-option>
   <mat-chip-option selected="true">Cats ok</mat-chip-option>
-  <mat-chip-option>Kitchen</mat-chip-option>
   <mat-chip-option>Fireplace</mat-chip-option>
   <mat-chip-option>Wheelchair accessible</mat-chip-option>
   <mat-chip-option>Elevator</mat-chip-option>

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

@@ -3,7 +3,3 @@
   margin-top: -30px;
   width: 380px;
 }
-
-div.scene-chips-wrapper .mat-mdc-chip.mat-mdc-standard-chip {
-  background-color: pink;
-}

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

@@ -1,2 +1,9 @@
-<mat-calendar class="scene-datepicker-left"></mat-calendar>
-<mat-calendar class="scene-datepicker-right"></mat-calendar>
+<div class="calendar-wrapper">
+  <mat-calendar
+    class="calendar"
+    [minDate]="minDate"
+    [maxDate]="maxDate"
+    [selected]="selectedDate"
+  >
+  </mat-calendar>
+</div>

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

@@ -1,15 +1,13 @@
-.scene-datepicker-left {
-  top: -220px;
-  left: -240px;
-}
-
-.scene-datepicker-right {
-  top: -80px;
+.calendar {
+  margin-top: 140px;
   background: rgba(white, 0.8);
 }
 
-mat-calendar {
-  position: absolute;
-  border: 1px solid;
-  border-radius: 4px;
+.calendar-wrapper {
+  display: flex;
+
+  mat-calendar {
+    width: 300px;
+    border-radius: 16px;
+  }
 }

scenes/src/app/scenes/datepicker/datepicker-scene.ts

@@ -10,4 +10,8 @@ import {MatDatepickerModule} from '@angular/material/datepicker';
   standalone: true,
   imports: [MatDatepickerModule]
 })
-export class DatepickerScene {}
+export class DatepickerScene {
+  minDate = new Date(2024, 3, 2);
+  selectedDate = new Date(2024, 3, 3);
+  maxDate = new Date(2024, 3, 5);
+}

scenes/src/app/scenes/dialog/dialog-scene.ts

@@ -14,9 +14,7 @@ export class DialogScene {
   }
 
   openDialog() {
-    this.dialog.open(DialogSceneExampleDialog, {
-      hasBackdrop: false
-    });
+    this.dialog.open(DialogSceneExampleDialog);
   }
 }
 

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

@@ -1,7 +1,16 @@
 <mat-list>
-  <mat-list-item><mat-icon>account_circle</mat-icon>Contact 1</mat-list-item>
+  <mat-list-item>
+    <mat-icon matListItemIcon>account_circle</mat-icon>
+    <div matListItemTitle>Contact 1</div>
+  </mat-list-item>
   <mat-divider></mat-divider>
-  <mat-list-item><mat-icon>account_circle</mat-icon>Contact 2</mat-list-item>
+  <mat-list-item>
+    <mat-icon matListItemIcon>account_circle</mat-icon>
+    <div matListItemTitle>Contact 2</div>
+  </mat-list-item>
   <mat-divider></mat-divider>
-  <mat-list-item><mat-icon>account_circle</mat-icon>Contact 3</mat-list-item>
+  <mat-list-item>
+    <mat-icon matListItemIcon>account_circle</mat-icon>
+    <div matListItemTitle>Contact 3</div>
+  </mat-list-item>
 </mat-list>

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

@@ -1,7 +1,3 @@
 mat-divider {
   width: 180px;
 }
-
-app-divider-scene .mat-icon {
-  margin-right: 8px;
-}

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

@@ -8,3 +8,7 @@ mat-panel-description,
 .docs-expansion-scene-content mat-icon {
   margin-right: 5px;
 }
+
+mat-accordion mat-expansion-panel {
+  width: 300px;
+}

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

@@ -1,13 +1,13 @@
 <mat-list>
   <div mat-subheader>Folders</div>
   <mat-list-item>
-    <mat-icon mat-list-icon>folder</mat-icon>
-    <div mat-line>Photos</div>
-    <div mat-line>Jun 8, 2020</div>
+    <mat-icon matListItemIcon>folder</mat-icon>
+    <div matListItemTitle>Photos</div>
+    <div matListItemLine>February 14, 2024</div>
   </mat-list-item>
   <mat-list-item>
-    <mat-icon mat-list-icon>folder</mat-icon>
-    <div mat-line>Recipes</div>
-    <div mat-line>Jul 2, 2020</div>
+    <mat-icon matListItemIcon>folder</mat-icon>
+    <div matListItemTitle>Recipes</div>
+    <div matListItemLine>May 22, 2024</div>
   </mat-list-item>
 </mat-list>

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

@@ -1,4 +1,4 @@
 .scene-paginator.mat-mdc-paginator {
-  margin-right: 80px;
+  margin-right: 70px;
   background: transparent;
 }

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

@@ -1,8 +1,5 @@
 .scene-radio-group {
   display: flex;
   flex-direction: column;
-}
-
-.scene-radio-button {
-  margin: 8px;
+  padding-right: 8px;
 }

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

@@ -1,10 +1,22 @@
-<mat-drawer-container class="docs-sidenav-container">
-  <mat-drawer class="docs-sidenav-drawer mat-elevation-z6" mode="side" opened>
+<mat-sidenav-container class="docs-sidenav-container">
+  <mat-sidenav class="docs-sidenav" mode="side" opened>
     <mat-list role="list">
-      <mat-list-item role="listitem"><mat-icon>inbox</mat-icon>Inbox</mat-list-item>
-      <mat-list-item role="listitem"><mat-icon>star</mat-icon>Starred</mat-list-item>
-      <mat-list-item role="listitem"><mat-icon>watch_later</mat-icon>Snoozed</mat-list-item>
-      <mat-list-item role="listitem"><mat-icon>send</mat-icon>Sent</mat-list-item>
+      <mat-list-item role="listitem">
+        <mat-icon matListItemIcon>inbox</mat-icon>
+        <div matListItemTitle>Inbox</div>
+      </mat-list-item>
+      <mat-list-item role="listitem">
+        <mat-icon matListItemIcon>star</mat-icon>
+        <div matListItemTitle>Starred</div>
+      </mat-list-item>
+      <mat-list-item role="listitem">
+        <mat-icon matListItemIcon>watch_later</mat-icon>
+        <div matListItemTitle>Snoozed</div>
+      </mat-list-item>
+      <mat-list-item role="listitem">
+        <mat-icon matListItemIcon>send</mat-icon>
+        <div matListItemTitle>Sent</div>
+      </mat-list-item>
     </mat-list>
-  </mat-drawer>
-</mat-drawer-container>
+  </mat-sidenav>
+</mat-sidenav-container>

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

@@ -1,13 +1,6 @@
 .docs-sidenav-container {
+  height: 210px;
   width: 360px;
-  height: 200px;
-}
-
-.docs-sidenav-drawer {
-  padding-right: 50px;
-  border-right: none;
-
-  mat-icon {
-    margin-right: 10px;
-  }
+  --mat-sidenav-container-width: 200px;
+  --mat-sidenav-container-background-color: #f9f0f9;
 }

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

@@ -1,14 +1,9 @@
-<div class="scene-slide-toggle scene-slide-toggle-notifications">
-  <mat-icon>notifications_off</mat-icon>
-  NOTIFICATIONS  <mat-slide-toggle></mat-slide-toggle>
+<div class="scene-slide-toggle">
+  <mat-slide-toggle>Notifications</mat-slide-toggle>
 </div>
-
-<div class="scene-slide-toggle scene-slide-toggle-dark">
-  <mat-icon>nights_stay</mat-icon>
-  DARK MODE  <mat-slide-toggle checked="true"></mat-slide-toggle>
+<div class="scene-slide-toggle">
+  <mat-slide-toggle checked="true">Dark Mode</mat-slide-toggle>
 </div>
-
-<div class="scene-slide-toggle scene-slide-toggle-dark">
-  <mat-icon>wifi_off</mat-icon>
-  WiFi  <mat-slide-toggle></mat-slide-toggle>
+<div class="scene-slide-toggle">
+  <mat-slide-toggle>WiFi</mat-slide-toggle>
 </div>

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

@@ -1,15 +1,4 @@
 .scene-slide-toggle {
   margin: 15px;
-  width: 250px;
   display: flex;
 }
-
-/* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */
-mat-slide-toggle {
-  margin-left: auto;
-}
-
-mat-icon {
-  vertical-align: middle;
-  padding-right: 5px;
-}

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

@@ -1,20 +1,12 @@
-<div class="scene-sliders">
-<div>
+<div class="slider-row">
   <mat-icon>volume_up</mat-icon>
-  <mat-slider
-    thumbLabel="true"
-    value="65"
-    min="1"
-    max="100"
-    #volume></mat-slider>
+  <mat-slider min="0" max="100" discrete>
+    <input value="65" matSliderThumb>
+  </mat-slider>
 </div>
-
-<div>
+<div class="slider-row">
   <mat-icon>brightness_low</mat-icon>
-  <mat-slider
-    thumbLabel
-    value="40"
-    min="1"
-    max="100"></mat-slider>
-</div>
+  <mat-slider min="0" max="100" discrete>
+    <input value="40" matSliderThumb>
+  </mat-slider>
 </div>