fix(web-components): update switch to use margin for checked state to…

… support RTL (microsoft#29505)

* use margin for switch checked transition to support RTL

* change files

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"
+}

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};