[CL-703] Use logical css properties in CL components (#14951)

* update usage of margin-right with margin-inline-end

* update usage of margin-left with margin-inline-start

* update usage of paddiing-right with padding-inline-end

* update usage of paddiing-left with padding-inline-start

* update usage of radius to use logical properties

libs/components/src/tabs/shared/tab-header.component.ts

@@ -7,7 +7,7 @@ import { Component } from "@angular/core";
   selector: "bit-tab-header",
   host: {
     class:
-      "tw-h-16 tw-pl-4 tw-bg-background-alt tw-flex tw-items-end tw-border-0 tw-border-b tw-border-solid tw-border-secondary-300",
+      "tw-h-16 tw-ps-4 tw-bg-background-alt tw-flex tw-items-end tw-border-0 tw-border-b tw-border-solid tw-border-secondary-300",
   },
   template: `<ng-content></ng-content>`,
   standalone: true,

libs/components/src/tabs/tab-nav-bar/tab-link.component.html

@@ -14,7 +14,7 @@
   <div class="group-hover/tab:tw-underline">
     <ng-content></ng-content>
   </div>
-  <div class="tw-font-normal tw-ml-2 empty:tw-ml-0">
+  <div class="tw-font-normal tw-ms-2 empty:tw-ms-0">
     <ng-content select="[slot=end]"></ng-content>
   </div>
 </a>

libs/components/src/tabs/tabs.stories.ts

@@ -90,7 +90,7 @@ export const ContentTabs: Story = {
         <bit-tab label="Second Tab">Second Tab Content</bit-tab>
         <bit-tab>
           <ng-template bitTabLabel>
-            <i class="bwi bwi-search tw-pr-1"></i> Template Label
+            <i class="bwi bwi-search tw-pe-1"></i> Template Label
           </ng-template>
           Template Label Content
         </bit-tab>
@@ -112,7 +112,7 @@ export const NavigationTabs: Story = {
         <bit-tab-link [route]="['item-3']">Item 3</bit-tab-link>
         <bit-tab-link [route]="['item-with-child-counter']">
           Item With Counter
-          <div slot="end" class="tw-pl-2 tw-text-muted">
+          <div slot="end" class="tw-ps-2 tw-text-muted">
             42
           </div>
         </bit-tab-link>