From a329ed3edcca0c1443014b7f333f58f14a8ae738 Mon Sep 17 00:00:00 2001
From: Chris Holt <chhol@microsoft.com>
Date: Wed, 17 May 2023 16:57:51 -0700
Subject: [PATCH] fix listbox-option selected indicator position in rtl

---
 ...eb-components-acd8f52d-86c3-4eae-aaf9-51b26fd25288.json | 7 +++++++
 .../src/listbox-option/listbox-option.styles.ts            | 6 ++++++
 2 files changed, 13 insertions(+)
 create mode 100644 change/@fluentui-web-components-acd8f52d-86c3-4eae-aaf9-51b26fd25288.json

diff --git a/change/@fluentui-web-components-acd8f52d-86c3-4eae-aaf9-51b26fd25288.json b/change/@fluentui-web-components-acd8f52d-86c3-4eae-aaf9-51b26fd25288.json
new file mode 100644
index 0000000000000..6617db9fc1ac2
--- /dev/null
+++ b/change/@fluentui-web-components-acd8f52d-86c3-4eae-aaf9-51b26fd25288.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix listbox-option selected indicator position in RTL instances",
+  "packageName": "@fluentui/web-components",
+  "email": "chhol@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/src/listbox-option/listbox-option.styles.ts b/packages/web-components/src/listbox-option/listbox-option.styles.ts
index cf03f9a2a0c44..80d20b6d4a33c 100644
--- a/packages/web-components/src/listbox-option/listbox-option.styles.ts
+++ b/packages/web-components/src/listbox-option/listbox-option.styles.ts
@@ -27,6 +27,7 @@ import {
 } from '../design-tokens';
 import { typeRampBase } from '../styles/patterns/type-ramp';
 import { focusTreatmentBase } from '../styles/focus';
+import { DirectionalStyleSheetBehavior } from '../styles/direction';
 
 export const optionStyles: (
   context: ElementDefinitionContext,
@@ -131,6 +132,11 @@ export const optionStyles: (
       margin-inline-end: 1ch;
     }
   `.withBehaviors(
+    new DirectionalStyleSheetBehavior(null, css`
+      :host::before {
+        right: calc((${focusStrokeWidth} - ${strokeWidth}) * 1px);
+      }
+    `),
     forcedColorsStylesheetBehavior(
       css`
         :host {