fix(tab-bar): update to match MD design and remove transforms (#16348)

Updates the tab-bar to match the MD bottom navigation spec: https://material.io/design/components/bottom-navigation.html#specs

Changes proposed in this pull request:
- moved flex properties to host, inherit in child anchor element
  - this allows the user to customize the tab-button flex properties & fixes #16231
- increased letter spacing
- removed transforms / transitions on active tab
- decreased badge size, add badge styling when empty for MD
- fix badge positioning on both iOS and MD
- updates e2e tests, adds a preview test for tab-bar
- updates documentation surrounding tabs

fixes #16231
fixes ionic-team/ionic-docs#175
fixes ionic-team/ionic-docs#163

core/src/components/tabs/readme.md

@@ -22,7 +22,7 @@ In order to do so, an `ion-tab-bar` should be provided as a direct child of `ion
 
     <ion-tab-button tab="settings">
       <ion-label>Settings</ion-label>
-      <ion-icon name="gear"></ion-icon>
+      <ion-icon name="settings"></ion-icon>
     </ion-tab-button>
 
   </ion-tab-bar>

core/src/components/tabs/usage/angular.md

@@ -39,5 +39,6 @@
       <ion-label>About</ion-label>
     </ion-tab-button>
   </ion-tab-bar>
+
 </ion-tabs>
 ```

core/src/components/tabs/usage/javascript.md

@@ -1,13 +1,21 @@
 ```html
 <ion-tabs>
+
   <ion-tab tab="tab-schedule">
     <ion-nav></ion-nav>
   </ion-tab>
+
   <ion-tab tab="tab-speaker">
     <ion-nav></ion-nav>
   </ion-tab>
-  <ion-tab tab="tab-map" component="page-map"></ion-tab>
-  <ion-tab tab="tab-about" component="page-about"></ion-tab>
+
+  <ion-tab tab="tab-map" component="page-map">
+    <ion-nav></ion-nav>
+  </ion-tab>
+
+  <ion-tab tab="tab-about" component="page-about">
+    <ion-nav></ion-nav>
+  </ion-tab>
 
   <ion-tab-bar slot="bottom">
     <ion-tab-button tab="tab-schedule">
@@ -15,18 +23,22 @@
       <ion-label>Schedule</ion-label>
       <ion-badge>6</ion-badge>
     </ion-tab-button>
+
     <ion-tab-button tab="tab-speaker">
       <ion-icon name="contacts"></ion-icon>
       <ion-label>Speakers</ion-label>
     </ion-tab-button>
+
     <ion-tab-button tab="tab-map">
       <ion-icon name="map"></ion-icon>
       <ion-label>Map</ion-label>
     </ion-tab-button>
+
     <ion-tab-button tab="tab-about">
       <ion-icon name="information-circle"></ion-icon>
       <ion-label>About</ion-label>
     </ion-tab-button>
   </ion-tab-bar>
+
 </ion-tabs>
 ```