fix(tabs): get the tabbar layout working with shadow DOM (#15113)

- gets the `tabbarLayout` property working
- update badge position based on tabs layout
- fix the transforms for icon/text and icon size

fixes #14611

core/src/components/tab-button/tab-button.tsx

@@ -75,7 +75,7 @@ export class TabButton {
         { icon && <ion-icon class="tab-button-icon" icon={icon} lazy={false}></ion-icon> }
         { label && <span class="tab-button-text">{label}</span> }
         { badge && <ion-badge class="tab-badge" color={badgeColor}>{badge}</ion-badge> }
-        { mode === 'md' && <ion-ripple-effect tapClick={true}/> }
+        { mode === 'md' && <ion-ripple-effect tapClick={true}></ion-ripple-effect> }
       </a>
     ];
   }