fix(ui5-card): exploratory testing issues (#3881)

Author: kskondov

packages/main/src/CardHeader.hbs

@@ -1,5 +1,6 @@
 <div
 	class="{{classes}}"
+	dir="{{effectiveDir}}"
 	@click="{{_headerClick}}"
 	@keydown="{{_headerKeydown}}"
 	@keyup="{{_headerKeyup}}"

packages/main/src/themes/CardHeader.css

@@ -105,21 +105,21 @@
 	max-width: 100%;
 }
 
-[dir="rtl"] .ui5-card-header .ui5-card-header-avatar {
+[dir="rtl"].ui5-card-header .ui5-card-header-avatar {
 	margin-left: .75rem;
 	margin-right: 0;
 }
 
-[dir="rtl"] .ui5-card-header .ui5-card-header-status {
+[dir="rtl"].ui5-card-header .ui5-card-header-status {
 	padding-right: 1rem;
 	padding-left: 0rem;
 	margin-right: auto;
 }
 
-[dir="rtl"] .ui5-card-header .ui5-card-header-text .ui5-card-header-title {
+[dir="rtl"].ui5-card-header .ui5-card-header-text .ui5-card-header-title {
 	text-align: right;
 }
 
-[dir="rtl"] .ui5-card-header .ui5-card-header-text .ui5-card-header-subtitle {
+[dir="rtl"].ui5-card-header .ui5-card-header-text .ui5-card-header-subtitle {
 	text-align: right;
 }

packages/main/test/samples/Card.sample.html

@@ -72,9 +72,9 @@ <h3>Card with List</h3>
 	<div class="snippet card-container">
 		<ui5-card class="medium">
 			<ui5-card-header slot="header" title-text="Team Space" subtitle-text="Direct Reports" status="3 of 10">
+				<ui5-icon name="group" slot="avatar"></ui5-icon>
+				<ui5-button design="Emphasized" slot="action">View All</ui5-button>
 			</ui5-card-header>
-			<ui5-icon name="group" slot="avatar"></ui5-icon>
-			<ui5-button design="Emphasized" slot="action">View All</ui5-button>
 
 			<div class="card-content">
 				<ui5-list separators="None" class="card-content-child" style="width: 100%">
@@ -112,8 +112,8 @@ <h3>Card with List</h3>
 <ui5-card class="medium">
 	<ui5-card-header slot="header" title-text="Team Space" subtitle-text="Direct Reports" status="3 of 10">
 				<ui5-icon name="group" slot="avatar"></ui5-icon>
+				<ui5-button design="Emphasized" slot="action">View All</ui5-button>
 	</ui5-card-header>
-	<ui5-button design="Emphasized" slot="action">View All</ui5-button>
 	<div class="card-content">
 		<ui5-list separators="None" class="card-content-child" style="width: 100%">
 			<ui5-li image="../../../assets/images/avatars/man_avatar_1.png" description="User Researcher">Alain Chevalier</ui5-li>