From a391abd1603d08e636e0cd6b9fd6b5003bbcbb80 Mon Sep 17 00:00:00 2001
From: Chris Holt <chhol@microsoft.com>
Date: Thu, 12 Oct 2023 10:40:42 -0700
Subject: [PATCH] fix(web-components): update switch to use margin for checked
 state to support RTL (#29505)

* use margin for switch checked transition to support RTL

* change files
---
 ...eb-components-f70c1f20-47e3-4e76-9cb0-53fef171209f.json | 7 +++++++
 packages/web-components/src/switch/switch.styles.ts        | 5 +++--
 2 files changed, 10 insertions(+), 2 deletions(-)
 create mode 100644 change/@fluentui-web-components-f70c1f20-47e3-4e76-9cb0-53fef171209f.json

diff --git a/change/@fluentui-web-components-f70c1f20-47e3-4e76-9cb0-53fef171209f.json b/change/@fluentui-web-components-f70c1f20-47e3-4e76-9cb0-53fef171209f.json
new file mode 100644
index 00000000000000..fe0cfd89136702
--- /dev/null
+++ b/change/@fluentui-web-components-f70c1f20-47e3-4e76-9cb0-53fef171209f.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: update switch to use margin instead of transform for the checked state to support RTL",
+  "packageName": "@fluentui/web-components",
+  "email": "chhol@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/src/switch/switch.styles.ts b/packages/web-components/src/switch/switch.styles.ts
index 81aa986c93ca5c..bb0f14dc84a4f1 100644
--- a/packages/web-components/src/switch/switch.styles.ts
+++ b/packages/web-components/src/switch/switch.styles.ts
@@ -118,14 +118,15 @@ export const styles = css`
     height: 14px;
     width: 14px;
     border-radius: 50%;
+    margin-inline-start: 0;
     background-color: ${colorNeutralForeground3};
     transition-duration: ${durationNormal};
     transition-timing-function: ${curveEasyEase};
-    transition-property: transform;
+    transition-property: margin-inline-start;
   }
   :host([aria-checked='true']) .checked-indicator {
     background-color: ${colorNeutralForegroundInverted};
-    transform: translateX(20px);
+    margin-inline-start: calc(100% - 14px);
   }
   :host([aria-checked='true']:hover) .checked-indicator {
     background: ${colorNeutralForegroundInvertedHover};