From c215fac81874c007be8c299bb91d244b8b3a81ec Mon Sep 17 00:00:00 2001
From: Bryan Cunningham <bcunningham@bitwarden.com>
Date: Mon, 2 Jun 2025 12:05:30 -0400
Subject: [PATCH] [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
---
 .../src/async-actions/in-forms.stories.ts      | 10 +++++-----
 .../src/async-actions/standalone.stories.ts    |  2 +-
 .../src/banner/banner.component.html           |  2 +-
 .../src/breadcrumbs/breadcrumb.component.html  |  2 +-
 libs/components/src/button/button.stories.ts   | 18 +++++++++---------
 .../src/callout/callout.component.html         |  2 +-
 .../src/checkbox/checkbox.component.ts         |  2 +-
 .../src/checkbox/checkbox.stories.ts           |  8 ++++----
 .../src/chip-select/chip-select.component.html |  4 ++--
 .../src/dialog/dialog/dialog.stories.ts        |  4 ++--
 .../src/drawer/drawer-header.component.ts      |  2 +-
 .../form-control/form-control.component.html   |  2 +-
 .../src/form-control/form-control.component.ts |  2 +-
 .../src/form-field/form-field.component.html   | 16 ++++++++--------
 .../src/layout/layout.component.html           |  2 +-
 libs/components/src/link/link.stories.ts       |  6 +++---
 .../multi-select/multi-select.component.html   |  6 +++---
 .../src/navigation/nav-group.component.html    |  2 +-
 .../src/navigation/nav-item.component.html     |  4 ++--
 .../src/navigation/nav-item.stories.ts         |  4 ++--
 .../src/popover/popover.component.html         |  2 +-
 libs/components/src/popover/popover.stories.ts |  6 +++---
 .../src/progress/progress.component.html       |  2 +-
 .../src/radio-button/radio-input.component.ts  |  2 +-
 .../src/search/search.component.html           |  2 +-
 .../src/select/select.component.html           |  2 +-
 .../components/kitchen-sink-form.component.ts  |  2 +-
 .../components/src/table/sortable.component.ts |  2 +-
 .../src/tabs/shared/tab-header.component.ts    |  2 +-
 .../tabs/tab-nav-bar/tab-link.component.html   |  2 +-
 libs/components/src/tabs/tabs.stories.ts       |  4 ++--
 libs/components/src/toast/toast.component.html |  2 +-
 .../src/toggle-group/toggle.component.ts       |  4 ++--
 33 files changed, 67 insertions(+), 67 deletions(-)

diff --git a/libs/components/src/async-actions/in-forms.stories.ts b/libs/components/src/async-actions/in-forms.stories.ts
index b45f750084..857a23227f 100644
--- a/libs/components/src/async-actions/in-forms.stories.ts
+++ b/libs/components/src/async-actions/in-forms.stories.ts
@@ -30,11 +30,11 @@ const template = `
       <button type="button" bitSuffix bitIconButton="bwi-refresh" bitFormButton [bitAction]="refresh"></button>
     </bit-form-field>
 
-    <button class="tw-mr-2" type="submit" buttonType="primary" bitButton bitFormButton>Submit</button>
-    <button class="tw-mr-2" type="button" buttonType="secondary" bitButton bitFormButton>Cancel</button>
-    <button class="tw-mr-2" type="button" buttonType="danger" bitButton bitFormButton [bitAction]="delete">Delete</button>
-    <button class="tw-mr-2" type="button" buttonType="secondary" bitButton bitFormButton [disabled]="true">Disabled</button>
-    <button class="tw-mr-2" type="button" buttonType="secondary" bitIconButton="bwi-star" bitFormButton [bitAction]="delete">Delete</button>
+    <button class="tw-me-2" type="submit" buttonType="primary" bitButton bitFormButton>Submit</button>
+    <button class="tw-me-2" type="button" buttonType="secondary" bitButton bitFormButton>Cancel</button>
+    <button class="tw-me-2" type="button" buttonType="danger" bitButton bitFormButton [bitAction]="delete">Delete</button>
+    <button class="tw-me-2" type="button" buttonType="secondary" bitButton bitFormButton [disabled]="true">Disabled</button>
+    <button class="tw-me-2" type="button" buttonType="secondary" bitIconButton="bwi-star" bitFormButton [bitAction]="delete">Delete</button>
   </form>`;
 
 @Component({
diff --git a/libs/components/src/async-actions/standalone.stories.ts b/libs/components/src/async-actions/standalone.stories.ts
index 52b85b8856..d6f7f978bd 100644
--- a/libs/components/src/async-actions/standalone.stories.ts
+++ b/libs/components/src/async-actions/standalone.stories.ts
@@ -12,7 +12,7 @@ import { IconButtonModule } from "../icon-button";
 import { BitActionDirective } from "./bit-action.directive";
 
 const template = /*html*/ `
-  <button bitButton buttonType="primary" [bitAction]="action" class="tw-mr-2">
+  <button bitButton buttonType="primary" [bitAction]="action" class="tw-me-2">
     Perform action {{ statusEmoji }}
   </button>
   <button bitIconButton="bwi-trash" buttonType="danger" [bitAction]="action"></button>`;
diff --git a/libs/components/src/banner/banner.component.html b/libs/components/src/banner/banner.component.html
index 1a9d58d342..6f271d587b 100644
--- a/libs/components/src/banner/banner.component.html
+++ b/libs/components/src/banner/banner.component.html
@@ -1,5 +1,5 @@
 <div
-  class="tw-flex tw-items-center tw-gap-2 tw-p-2 tw-pl-4 tw-text-main tw-border-transparent tw-bg-clip-padding tw-border-solid tw-border-b tw-border-0"
+  class="tw-flex tw-items-center tw-gap-2 tw-p-2 tw-ps-4 tw-text-main tw-border-transparent tw-bg-clip-padding tw-border-solid tw-border-b tw-border-0"
   [ngClass]="bannerClass"
   [attr.role]="useAlertRole ? 'status' : null"
   [attr.aria-live]="useAlertRole ? 'polite' : null"
diff --git a/libs/components/src/breadcrumbs/breadcrumb.component.html b/libs/components/src/breadcrumbs/breadcrumb.component.html
index bb4dc7cdff..28a9313449 100644
--- a/libs/components/src/breadcrumbs/breadcrumb.component.html
+++ b/libs/components/src/breadcrumbs/breadcrumb.component.html
@@ -1,6 +1,6 @@
 <ng-template>
   @if (icon) {
-    <i class="bwi {{ icon }} !tw-mr-2" aria-hidden="true"></i>
+    <i class="bwi {{ icon }} !tw-me-2" aria-hidden="true"></i>
   }
   <ng-content></ng-content>
 </ng-template>
diff --git a/libs/components/src/button/button.stories.ts b/libs/components/src/button/button.stories.ts
index d0a4354f37..29a9e367fc 100644
--- a/libs/components/src/button/button.stories.ts
+++ b/libs/components/src/button/button.stories.ts
@@ -88,13 +88,13 @@ export const DisabledWithAttribute: Story = {
     props: args,
     template: `
       @if (disabled) {
-        <button bitButton disabled [loading]="loading" [block]="block" buttonType="primary" class="tw-mr-2">Primary</button>
-        <button bitButton disabled [loading]="loading" [block]="block" buttonType="secondary" class="tw-mr-2">Secondary</button>
-        <button bitButton disabled [loading]="loading" [block]="block" buttonType="danger" class="tw-mr-2">Danger</button>
+        <button bitButton disabled [loading]="loading" [block]="block" buttonType="primary" class="tw-me-2">Primary</button>
+        <button bitButton disabled [loading]="loading" [block]="block" buttonType="secondary" class="tw-me-2">Secondary</button>
+        <button bitButton disabled [loading]="loading" [block]="block" buttonType="danger" class="tw-me-2">Danger</button>
       } @else {
-        <button bitButton [loading]="loading" [block]="block" buttonType="primary" class="tw-mr-2">Primary</button>
-        <button bitButton [loading]="loading" [block]="block" buttonType="secondary" class="tw-mr-2">Secondary</button>
-        <button bitButton [loading]="loading" [block]="block" buttonType="danger" class="tw-mr-2">Danger</button>
+        <button bitButton [loading]="loading" [block]="block" buttonType="primary" class="tw-me-2">Primary</button>
+        <button bitButton [loading]="loading" [block]="block" buttonType="secondary" class="tw-me-2">Secondary</button>
+        <button bitButton [loading]="loading" [block]="block" buttonType="danger" class="tw-me-2">Danger</button>
       }
     `,
   }),
@@ -110,10 +110,10 @@ export const Block: Story = {
     template: `
       <span class="tw-flex">
         <button bitButton [buttonType]="buttonType" [block]="block">[block]="true" Button</button>
-        <a bitButton [buttonType]="buttonType" [block]="block" href="#" class="tw-ml-2">[block]="true" Link</a>
+        <a bitButton [buttonType]="buttonType" [block]="block" href="#" class="tw-ms-2">[block]="true" Link</a>
 
-        <button bitButton [buttonType]="buttonType" block class="tw-ml-2">block Button</button>
-        <a bitButton [buttonType]="buttonType" block href="#" class="tw-ml-2">block Link</a>
+        <button bitButton [buttonType]="buttonType" block class="tw-ms-2">block Button</button>
+        <a bitButton [buttonType]="buttonType" block href="#" class="tw-ms-2">block Link</a>
       </span>
     `,
   }),
diff --git a/libs/components/src/callout/callout.component.html b/libs/components/src/callout/callout.component.html
index 4e7b5f2a0c..509d14188c 100644
--- a/libs/components/src/callout/callout.component.html
+++ b/libs/components/src/callout/callout.component.html
@@ -1,5 +1,5 @@
 <aside
-  class="tw-mb-4 tw-box-border tw-rounded-lg tw-border tw-border-l-4 tw-border-solid tw-bg-background tw-pl-3 tw-pr-2 tw-py-2 tw-leading-5 tw-text-main"
+  class="tw-mb-4 tw-box-border tw-rounded-lg tw-border tw-border-l-4 tw-border-solid tw-bg-background tw-ps-3 tw-pe-2 tw-py-2 tw-leading-5 tw-text-main"
   [ngClass]="calloutClass"
   [attr.aria-labelledby]="titleId"
 >
diff --git a/libs/components/src/checkbox/checkbox.component.ts b/libs/components/src/checkbox/checkbox.component.ts
index 0ce6f1889b..05993ee4e7 100644
--- a/libs/components/src/checkbox/checkbox.component.ts
+++ b/libs/components/src/checkbox/checkbox.component.ts
@@ -27,7 +27,7 @@ export class CheckboxComponent implements BitFormControlAbstraction {
     "tw-border-secondary-500",
     "tw-h-[1.12rem]",
     "tw-w-[1.12rem]",
-    "tw-mr-1.5",
+    "tw-me-1.5",
     "tw-flex-none", // Flexbox fix for bit-form-control
 
     "before:tw-content-['']",
diff --git a/libs/components/src/checkbox/checkbox.stories.ts b/libs/components/src/checkbox/checkbox.stories.ts
index 9a59897e00..123c6704ff 100644
--- a/libs/components/src/checkbox/checkbox.stories.ts
+++ b/libs/components/src/checkbox/checkbox.stories.ts
@@ -197,15 +197,15 @@ export const Custom: Story = {
       <div class="tw-flex tw-flex-col tw-w-32">
         <label class="tw-text-main tw-flex tw-bg-secondary-300 tw-p-2">
           A-Z
-          <input class="tw-ml-auto focus-visible:tw-ring-offset-secondary-300" type="checkbox" bitCheckbox />
+          <input class="tw-ms-auto focus-visible:tw-ring-offset-secondary-300" type="checkbox" bitCheckbox />
         </label>
         <label class="tw-text-main tw-flex tw-bg-secondary-300 tw-p-2">
           a-z
-          <input class="tw-ml-auto focus-visible:tw-ring-offset-secondary-300" type="checkbox" bitCheckbox />
+          <input class="tw-ms-auto focus-visible:tw-ring-offset-secondary-300" type="checkbox" bitCheckbox />
         </label>
         <label class="tw-text-main tw-flex tw-bg-secondary-300 tw-p-2">
           0-9
-          <input class="tw-ml-auto focus-visible:tw-ring-offset-secondary-300" type="checkbox" bitCheckbox />
+          <input class="tw-ms-auto focus-visible:tw-ring-offset-secondary-300" type="checkbox" bitCheckbox />
         </label>
       </div>
     `,
@@ -232,7 +232,7 @@ export const InTableRow: Story = {
                 type="checkbox"
                 bitCheckbox
                 id="checkAll"
-                class="tw-mr-2"
+                class="tw-me-2"
               />
               <label for="checkAll" class="tw-mb-0">
                 All
diff --git a/libs/components/src/chip-select/chip-select.component.html b/libs/components/src/chip-select/chip-select.component.html
index ff561ef840..78321afa9b 100644
--- a/libs/components/src/chip-select/chip-select.component.html
+++ b/libs/components/src/chip-select/chip-select.component.html
@@ -14,7 +14,7 @@
   <!-- Primary button -->
   <button
     type="button"
-    class="tw-inline-flex tw-gap-1.5 tw-items-center tw-justify-between tw-bg-transparent hover:tw-bg-transparent tw-border-none tw-outline-none tw-w-full tw-py-1 tw-pl-3 last:tw-pr-3 [&:not(:last-child)]:tw-pr-0 tw-truncate tw-text-[color:inherit] tw-text-[length:inherit]"
+    class="tw-inline-flex tw-gap-1.5 tw-items-center tw-justify-between tw-bg-transparent hover:tw-bg-transparent tw-border-none tw-outline-none tw-w-full tw-py-1 tw-ps-3 last:tw-pe-3 [&:not(:last-child)]:tw-pe-0 tw-truncate tw-text-[color:inherit] tw-text-[length:inherit]"
     data-fvw-target
     [ngClass]="{
       'tw-cursor-not-allowed': disabled,
@@ -45,7 +45,7 @@
       type="button"
       [attr.aria-label]="'removeItem' | i18n: label"
       [disabled]="disabled"
-      class="tw-bg-transparent hover:tw-bg-transparent tw-outline-none tw-rounded-full tw-py-0.5 tw-px-1 tw-mr-1 tw-text-[color:inherit] tw-text-[length:inherit] tw-border-solid tw-border tw-border-transparent hover:tw-border-text-contrast hover:disabled:tw-border-transparent tw-flex tw-items-center tw-justify-center focus-visible:tw-ring-2 tw-ring-text-contrast focus-visible:hover:tw-border-transparent"
+      class="tw-bg-transparent hover:tw-bg-transparent tw-outline-none tw-rounded-full tw-py-0.5 tw-px-1 tw-me-1 tw-text-[color:inherit] tw-text-[length:inherit] tw-border-solid tw-border tw-border-transparent hover:tw-border-text-contrast hover:disabled:tw-border-transparent tw-flex tw-items-center tw-justify-center focus-visible:tw-ring-2 tw-ring-text-contrast focus-visible:hover:tw-border-transparent"
       [ngClass]="{
         'tw-cursor-not-allowed': disabled,
       }"
diff --git a/libs/components/src/dialog/dialog/dialog.stories.ts b/libs/components/src/dialog/dialog/dialog.stories.ts
index 03a88458f5..bb8b2450de 100644
--- a/libs/components/src/dialog/dialog/dialog.stories.ts
+++ b/libs/components/src/dialog/dialog/dialog.stories.ts
@@ -89,7 +89,7 @@ export const Default: Story = {
           <button bitButton buttonType="secondary" [disabled]="loading">Cancel</button>
           <button
             [disabled]="loading"
-            class="tw-ml-auto"
+            class="tw-ms-auto"
             bitIconButton="bwi-trash"
             buttonType="danger"
             size="default"
@@ -252,7 +252,7 @@ export const WithCards: Story = {
           <button bitButton buttonType="secondary" [disabled]="loading">Cancel</button>
           <button
             [disabled]="loading"
-            class="tw-ml-auto"
+            class="tw-ms-auto"
             bitIconButton="bwi-trash"
             buttonType="danger"
             size="default"
diff --git a/libs/components/src/drawer/drawer-header.component.ts b/libs/components/src/drawer/drawer-header.component.ts
index de112a448c..c78a902020 100644
--- a/libs/components/src/drawer/drawer-header.component.ts
+++ b/libs/components/src/drawer/drawer-header.component.ts
@@ -18,7 +18,7 @@ import { DrawerCloseDirective } from "./drawer-close.directive";
   imports: [CommonModule, DrawerCloseDirective, TypographyModule, IconButtonModule, I18nPipe],
   templateUrl: "drawer-header.component.html",
   host: {
-    class: "tw-block tw-pl-4 tw-pr-2 tw-py-2",
+    class: "tw-block tw-ps-4 tw-pe-2 tw-py-2",
   },
 })
 export class DrawerHeaderComponent {
diff --git a/libs/components/src/form-control/form-control.component.html b/libs/components/src/form-control/form-control.component.html
index cc9c3dabbb..735e375a29 100644
--- a/libs/components/src/form-control/form-control.component.html
+++ b/libs/components/src/form-control/form-control.component.html
@@ -21,7 +21,7 @@
   </span>
 </label>
 @if (hasError) {
-  <div class="tw-mt-1 tw-text-danger tw-text-xs tw-ml-0.5">
+  <div class="tw-mt-1 tw-text-danger tw-text-xs tw-ms-0.5">
     <i class="bwi bwi-error"></i> {{ displayError }}
   </div>
 }
diff --git a/libs/components/src/form-control/form-control.component.ts b/libs/components/src/form-control/form-control.component.ts
index 690c00a9dc..c59536e241 100644
--- a/libs/components/src/form-control/form-control.component.ts
+++ b/libs/components/src/form-control/form-control.component.ts
@@ -40,7 +40,7 @@ export class FormControlComponent {
 
   @HostBinding("class") get classes() {
     return []
-      .concat(this.inline ? ["tw-inline-block", "tw-mr-4"] : ["tw-block"])
+      .concat(this.inline ? ["tw-inline-block", "tw-me-4"] : ["tw-block"])
       .concat(this.disableMargin ? [] : ["tw-mb-4"]);
   }
 
diff --git a/libs/components/src/form-field/form-field.component.html b/libs/components/src/form-field/form-field.component.html
index 02d7c37cad..c4fd018b3b 100644
--- a/libs/components/src/form-field/form-field.component.html
+++ b/libs/components/src/form-field/form-field.component.html
@@ -20,7 +20,7 @@
     <div class="tw-absolute tw-size-full tw-top-0 tw-pointer-events-none tw-z-20">
       <div class="tw-size-full tw-flex">
         <div
-          class="tw-min-w-3 tw-border-r-0 group-focus-within/bit-form-field:tw-border-r-0 !tw-rounded-l-lg"
+          class="tw-min-w-3 tw-border-r-0 group-focus-within/bit-form-field:tw-border-r-0 !tw-rounded-s-lg"
           [ngClass]="inputBorderClasses"
         ></div>
         <div
@@ -40,7 +40,7 @@
           </label>
         </div>
         <div
-          class="tw-min-w-3 tw-grow tw-border-l-0 group-focus-within/bit-form-field:tw-border-l-0 !tw-rounded-r-lg"
+          class="tw-min-w-3 tw-grow tw-border-l-0 group-focus-within/bit-form-field:tw-border-l-0 !tw-rounded-e-lg"
           [ngClass]="inputBorderClasses"
         ></div>
       </div>
@@ -50,7 +50,7 @@
     >
       <div
         #prefixContainer
-        class="tw-flex tw-items-center tw-gap-1 tw-pl-3 tw-py-2"
+        class="tw-flex tw-items-center tw-gap-1 tw-ps-3 tw-py-2"
         [hidden]="!prefixHasChildren()"
       >
         <ng-container *ngTemplateOutlet="prefixContent"></ng-container>
@@ -59,15 +59,15 @@
         class="tw-w-full tw-relative tw-py-2 has-[bit-select]:tw-p-0 has-[bit-multi-select]:tw-p-0 has-[input:read-only:not([hidden])]:tw-bg-secondary-100 has-[textarea:read-only:not([hidden])]:tw-bg-secondary-100"
         data-default-content
         [ngClass]="[
-          prefixHasChildren() ? '' : 'tw-rounded-l-lg tw-pl-3',
-          suffixHasChildren() ? '' : 'tw-rounded-r-lg tw-pr-3',
+          prefixHasChildren() ? '' : 'tw-rounded-s-lg tw-ps-3',
+          suffixHasChildren() ? '' : 'tw-rounded-e-lg tw-pe-3',
         ]"
       >
         <ng-container *ngTemplateOutlet="defaultContent"></ng-container>
       </div>
       <div
         #suffixContainer
-        class="tw-flex tw-items-center tw-gap-1 tw-pr-3 tw-py-2"
+        class="tw-flex tw-items-center tw-gap-1 tw-pe-3 tw-py-2"
         [hidden]="!suffixHasChildren()"
       >
         <ng-container *ngTemplateOutlet="suffixContent"></ng-container>
@@ -92,7 +92,7 @@
       <div
         #prefixContainer
         [hidden]="!prefixHasChildren()"
-        class="tw-flex tw-items-center tw-gap-1 tw-pl-1"
+        class="tw-flex tw-items-center tw-gap-1 tw-ps-1"
       >
         <ng-container *ngTemplateOutlet="prefixContent"></ng-container>
       </div>
@@ -105,7 +105,7 @@
       <div
         #suffixContainer
         [hidden]="!suffixHasChildren()"
-        class="tw-flex tw-items-center tw-gap-1 tw-pr-1"
+        class="tw-flex tw-items-center tw-gap-1 tw-pe-1"
       >
         <ng-container *ngTemplateOutlet="suffixContent"></ng-container>
       </div>
diff --git a/libs/components/src/layout/layout.component.html b/libs/components/src/layout/layout.component.html
index 33b8de8157..f4b0a09db1 100644
--- a/libs/components/src/layout/layout.component.html
+++ b/libs/components/src/layout/layout.component.html
@@ -18,7 +18,7 @@
   <main
     [id]="mainContentId"
     tabindex="-1"
-    class="tw-overflow-auto tw-min-w-0 tw-flex-1 tw-bg-background tw-p-6 md:tw-ml-0 tw-ml-16"
+    class="tw-overflow-auto tw-min-w-0 tw-flex-1 tw-bg-background tw-p-6 md:tw-ms-0 tw-ms-16"
   >
     <ng-content></ng-content>
 
diff --git a/libs/components/src/link/link.stories.ts b/libs/components/src/link/link.stories.ts
index edf2cb14cd..6a0be5499d 100644
--- a/libs/components/src/link/link.stories.ts
+++ b/libs/components/src/link/link.stories.ts
@@ -147,10 +147,10 @@ export const Disabled: Story = {
   render: (args) => ({
     props: args,
     template: /*html*/ `
-      <button bitLink disabled linkType="primary" class="tw-mr-2">Primary</button>
-      <button bitLink disabled linkType="secondary" class="tw-mr-2">Secondary</button>
+      <button bitLink disabled linkType="primary" class="tw-me-2">Primary</button>
+      <button bitLink disabled linkType="secondary" class="tw-me-2">Secondary</button>
       <div class="tw-bg-primary-600 tw-p-2 tw-inline-block">
-        <button bitLink disabled linkType="contrast" class="tw-mr-2">Contrast</button>
+        <button bitLink disabled linkType="contrast">Contrast</button>
       </div>
     `,
   }),
diff --git a/libs/components/src/multi-select/multi-select.component.html b/libs/components/src/multi-select/multi-select.component.html
index e157871e17..0b46ef2662 100644
--- a/libs/components/src/multi-select/multi-select.component.html
+++ b/libs/components/src/multi-select/multi-select.component.html
@@ -20,14 +20,14 @@
   appendTo="body"
 >
   <ng-template ng-loadingspinner-tmp>
-    <i class="bwi bwi-spinner bwi-spin tw-mr-1" [title]="loadingText" aria-hidden="true"></i>
+    <i class="bwi bwi-spinner bwi-spin tw-me-1" [title]="loadingText" aria-hidden="true"></i>
   </ng-template>
   <ng-template ng-label-tmp let-item="item" let-clear="clear">
     <button
       type="button"
       bitBadge
       variant="primary"
-      class="tw-mr-1 disabled:tw-border-0 tw-flex tw-gap-1.5 tw-items-center"
+      class="tw-me-1 disabled:tw-border-0 tw-flex tw-gap-1.5 tw-items-center"
       [disabled]="disabled"
       (click)="clear(item)"
     >
@@ -47,7 +47,7 @@
           <i class="bwi bwi-fw bwi-check" aria-hidden="true"></i>
         }
       </div>
-      <div class="tw-mr-2 tw-flex-initial">
+      <div class="tw-me-2 tw-flex-initial">
         @if (item.icon != null) {
           <i class="bwi bwi-fw {{ item.icon }}" aria-hidden="true"></i>
         }
diff --git a/libs/components/src/navigation/nav-group.component.html b/libs/components/src/navigation/nav-group.component.html
index 9752fe56eb..cbb270ad07 100644
--- a/libs/components/src/navigation/nav-group.component.html
+++ b/libs/components/src/navigation/nav-group.component.html
@@ -15,7 +15,7 @@
     <ng-template #button>
       <button
         type="button"
-        class="tw-ml-auto"
+        class="tw-ms-auto"
         [bitIconButton]="
           open ? 'bwi-angle-up' : variant === 'tree' ? 'bwi-angle-right' : 'bwi-angle-down'
         "
diff --git a/libs/components/src/navigation/nav-item.component.html b/libs/components/src/navigation/nav-item.component.html
index 595ddf5a99..f86f7e2c6d 100644
--- a/libs/components/src/navigation/nav-item.component.html
+++ b/libs/components/src/navigation/nav-item.component.html
@@ -52,7 +52,7 @@
           class="tw-truncate"
           [ngClass]="[
             variant === 'tree' ? 'tw-py-1' : 'tw-py-2',
-            data.open ? 'tw-pr-4' : 'tw-text-center',
+            data.open ? 'tw-pe-4' : 'tw-text-center',
           ]"
         >
           <i
@@ -103,7 +103,7 @@
 
       <div
         *ngIf="data.open"
-        class="tw-flex -tw-ml-3 tw-pr-4 tw-gap-1 [&>*:focus-visible::before]:!tw-ring-text-alt2 [&>*:hover]:!tw-border-text-alt2 [&>*]:tw-text-alt2 empty:tw-hidden"
+        class="tw-flex -tw-ms-3 tw-pe-4 tw-gap-1 [&>*:focus-visible::before]:!tw-ring-text-alt2 [&>*:hover]:!tw-border-text-alt2 [&>*]:tw-text-alt2 empty:tw-hidden"
         [ngClass]="[variant === 'tree' ? 'tw-py-1' : 'tw-py-2']"
       >
         <ng-content select="[slot=end]"></ng-content>
diff --git a/libs/components/src/navigation/nav-item.stories.ts b/libs/components/src/navigation/nav-item.stories.ts
index 7d24090f06..09642fd2b1 100644
--- a/libs/components/src/navigation/nav-item.stories.ts
+++ b/libs/components/src/navigation/nav-item.stories.ts
@@ -83,7 +83,7 @@ export const WithChildButtons: Story = {
       <bit-nav-item text="Hello World" [route]="['']" icon="bwi-collection-shared">
         <button
           slot="end"
-          class="tw-ml-auto"
+          class="tw-ms-auto"
           [bitIconButton]="'bwi-pencil-square'"
           [buttonType]="'light'"
           size="small"
@@ -91,7 +91,7 @@ export const WithChildButtons: Story = {
         ></button>
         <button
           slot="end"
-          class="tw-ml-auto"
+          class="tw-ms-auto"
           [bitIconButton]="'bwi-check'"
           [buttonType]="'light'"
           size="small"
diff --git a/libs/components/src/popover/popover.component.html b/libs/components/src/popover/popover.component.html
index cb0681822d..05db9112b8 100644
--- a/libs/components/src/popover/popover.component.html
+++ b/libs/components/src/popover/popover.component.html
@@ -4,7 +4,7 @@
       <div
         class="tw-relative tw-z-20 tw-w-72 tw-break-words tw-bg-background tw-pb-4 tw-pt-2 tw-text-main"
       >
-        <div class="tw-mb-1 tw-mr-2 tw-flex tw-items-start tw-justify-between tw-gap-4 tw-pl-4">
+        <div class="tw-mb-1 tw-me-2 tw-flex tw-items-start tw-justify-between tw-gap-4 tw-ps-4">
           <h2 bitTypography="h5" class="tw-mt-1 tw-font-semibold">
             {{ title }}
           </h2>
diff --git a/libs/components/src/popover/popover.stories.ts b/libs/components/src/popover/popover.stories.ts
index 8e276afa0c..ee387d69e5 100644
--- a/libs/components/src/popover/popover.stories.ts
+++ b/libs/components/src/popover/popover.stories.ts
@@ -62,7 +62,7 @@ type Story = StoryObj<PopoverTriggerForDirective>;
 const popoverContent = `
   <bit-popover [title]="'Example Title'" #myPopover>
     <div>Lorem ipsum dolor <a href="#">adipisicing elit</a>.</div>
-    <ul class="tw-mt-2 tw-mb-0 tw-pl-4">
+    <ul class="tw-mt-2 tw-mb-0 tw-ps-4">
       <li>Dolor sit amet consectetur</li>
       <li>Esse labore veniam tempora</li>
       <li>Adipisicing elit ipsum <a href="#">iustolaborum</a></li>
@@ -96,7 +96,7 @@ export const Open: Story = {
     template: `
       <bit-popover [title]="'Example Title'" #myPopover="popoverComponent">
         <div>Lorem ipsum dolor <a href="#">adipisicing elit</a>.</div>
-        <ul class="tw-mt-2 tw-mb-0 tw-pl-4">
+        <ul class="tw-mt-2 tw-mb-0 tw-ps-4">
           <li>Dolor sit amet consectetur</li>
           <li>Esse labore veniam tempora</li>
           <li>Adipisicing elit ipsum <a href="#">iustolaborum</a></li>
@@ -118,7 +118,7 @@ export const OpenLongTitle: Story = {
     template: `
       <bit-popover [title]="'Example Title that is really long it wraps 2 lines'" #myPopover="popoverComponent">
         <div>Lorem ipsum dolor <a href="#">adipisicing elit</a>.</div>
-        <ul class="tw-mt-2 tw-mb-0 tw-pl-4">
+        <ul class="tw-mt-2 tw-mb-0 tw-ps-4">
           <li>Dolor sit amet consectetur</li>
           <li>Esse labore veniam tempora</li>
           <li>Adipisicing elit ipsum <a href="#">iustolaborum</a></li>
diff --git a/libs/components/src/progress/progress.component.html b/libs/components/src/progress/progress.component.html
index 30b68d9d64..21b047f732 100644
--- a/libs/components/src/progress/progress.component.html
+++ b/libs/components/src/progress/progress.component.html
@@ -11,7 +11,7 @@
       <div class="tw-flex tw-h-full tw-flex-wrap tw-items-center tw-overflow-hidden">
         <!-- If text is too long to fit, wrap it below to hide -->
         <div class="tw-h-full">&nbsp;</div>
-        <div class="tw-pr-1">{{ textContent }}</div>
+        <div class="tw-pe-1">{{ textContent }}</div>
       </div>
     }
   </div>
diff --git a/libs/components/src/radio-button/radio-input.component.ts b/libs/components/src/radio-button/radio-input.component.ts
index 4a9f5dede6..5473f70394 100644
--- a/libs/components/src/radio-button/radio-input.component.ts
+++ b/libs/components/src/radio-button/radio-input.component.ts
@@ -30,7 +30,7 @@ export class RadioInputComponent implements BitFormControlAbstraction {
     "tw-border-secondary-600",
     "tw-w-[1.12rem]",
     "tw-h-[1.12rem]",
-    "tw-mr-1.5",
+    "tw-me-1.5",
     "tw-flex-none", // Flexbox fix for bit-form-control
 
     "hover:tw-border-2",
diff --git a/libs/components/src/search/search.component.html b/libs/components/src/search/search.component.html
index 5bb25425e5..759e25c07d 100644
--- a/libs/components/src/search/search.component.html
+++ b/libs/components/src/search/search.component.html
@@ -13,7 +13,7 @@
     [type]="inputType"
     [id]="id"
     [placeholder]="placeholder ?? ('search' | i18n)"
-    class="tw-pl-9"
+    class="tw-ps-9"
     [ngModel]="searchText"
     (ngModelChange)="onChange($event)"
     (blur)="onTouch()"
diff --git a/libs/components/src/select/select.component.html b/libs/components/src/select/select.component.html
index dcca7ae195..84de9827b9 100644
--- a/libs/components/src/select/select.component.html
+++ b/libs/components/src/select/select.component.html
@@ -12,7 +12,7 @@
 >
   <ng-template ng-option-tmp let-item="item">
     <div class="tw-flex" [title]="item.label">
-      <div class="tw-mr-2 tw-flex-initial">
+      <div class="tw-me-2 tw-flex-initial">
         @if (item.icon != null) {
           <i class="bwi bwi-fw {{ item.icon }}" aria-hidden="true"></i>
         }
diff --git a/libs/components/src/stories/kitchen-sink/components/kitchen-sink-form.component.ts b/libs/components/src/stories/kitchen-sink/components/kitchen-sink-form.component.ts
index 5fc01d37d5..babc4365c8 100644
--- a/libs/components/src/stories/kitchen-sink/components/kitchen-sink-form.component.ts
+++ b/libs/components/src/stories/kitchen-sink/components/kitchen-sink-form.component.ts
@@ -117,7 +117,7 @@ import { KitchenSinkSharedModule } from "../kitchen-sink-shared.module";
 
       <bit-popover [title]="'Password help'" #myPopover>
         <div>A strong password has the following:</div>
-        <ul class="tw-mt-2 tw-mb-0 tw-pl-4">
+        <ul class="tw-mt-2 tw-mb-0 tw-ps-4">
           <li>Letters</li>
           <li>Numbers</li>
           <li>Special characters</li>
diff --git a/libs/components/src/table/sortable.component.ts b/libs/components/src/table/sortable.component.ts
index bdfb87ac52..1d2a2c07d6 100644
--- a/libs/components/src/table/sortable.component.ts
+++ b/libs/components/src/table/sortable.component.ts
@@ -17,7 +17,7 @@ import { TableComponent } from "./table.component";
       (click)="setActive()"
     >
       <ng-content></ng-content>
-      <i class="bwi tw-ml-2" [ngClass]="icon"></i>
+      <i class="bwi tw-ms-2" [ngClass]="icon"></i>
     </button>
   `,
   standalone: true,
diff --git a/libs/components/src/tabs/shared/tab-header.component.ts b/libs/components/src/tabs/shared/tab-header.component.ts
index c45bafb3d5..077ee2b8aa 100644
--- a/libs/components/src/tabs/shared/tab-header.component.ts
+++ b/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,
diff --git a/libs/components/src/tabs/tab-nav-bar/tab-link.component.html b/libs/components/src/tabs/tab-nav-bar/tab-link.component.html
index 0b5a653d96..f1265c3de5 100644
--- a/libs/components/src/tabs/tab-nav-bar/tab-link.component.html
+++ b/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>
diff --git a/libs/components/src/tabs/tabs.stories.ts b/libs/components/src/tabs/tabs.stories.ts
index 250a744306..5879dd2a14 100644
--- a/libs/components/src/tabs/tabs.stories.ts
+++ b/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>
diff --git a/libs/components/src/toast/toast.component.html b/libs/components/src/toast/toast.component.html
index bdbc967418..8ebf677828 100644
--- a/libs/components/src/toast/toast.component.html
+++ b/libs/components/src/toast/toast.component.html
@@ -19,7 +19,7 @@
     </div>
     <!-- Overriding hover and focus-visible colors for a11y against colored background -->
     <button
-      class="tw-ml-auto hover:tw-border-text-main focus-visible:before:tw-ring-text-main"
+      class="tw-ms-auto hover:tw-border-text-main focus-visible:before:tw-ring-text-main"
       bitIconButton="bwi-close"
       buttonType="main"
       type="button"
diff --git a/libs/components/src/toggle-group/toggle.component.ts b/libs/components/src/toggle-group/toggle.component.ts
index bb48b7e103..a9e32beb4a 100644
--- a/libs/components/src/toggle-group/toggle.component.ts
+++ b/libs/components/src/toggle-group/toggle.component.ts
@@ -72,8 +72,8 @@ export class ToggleComponent<TValue> implements AfterContentChecked, AfterViewIn
       "hover:tw-bg-primary-100",
 
       "group-first-of-type/toggle:tw-border-l",
-      "group-first-of-type/toggle:tw-rounded-l-full",
-      "group-last-of-type/toggle:tw-rounded-r-full",
+      "group-first-of-type/toggle:tw-rounded-s-full",
+      "group-last-of-type/toggle:tw-rounded-e-full",
 
       "peer-focus-visible/toggle-input:tw-outline-none",
       "peer-focus-visible/toggle-input:tw-ring",