From c54d90587bd155c54ffad658229c7bedfb8c3b7f Mon Sep 17 00:00:00 2001
From: Zacky Ma <machi@microsoft.com>
Date: Mon, 6 Jul 2026 11:53:53 -0700
Subject: [PATCH] fix(web-components): selected indicator position in vertical
 tablist (#36371)

---
 ...nts-8703b661-0019-4ee5-8fb9-bf2a52fa6454.json |  7 +++++++
 .../web-components/src/tablist/tablist.styles.ts | 16 +++++++++-------
 2 files changed, 16 insertions(+), 7 deletions(-)
 create mode 100644 change/@fluentui-web-components-8703b661-0019-4ee5-8fb9-bf2a52fa6454.json

diff --git a/change/@fluentui-web-components-8703b661-0019-4ee5-8fb9-bf2a52fa6454.json b/change/@fluentui-web-components-8703b661-0019-4ee5-8fb9-bf2a52fa6454.json
new file mode 100644
index 0000000000000..2dfe062b29065
--- /dev/null
+++ b/change/@fluentui-web-components-8703b661-0019-4ee5-8fb9-bf2a52fa6454.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: selected indocator position in vertical tablist",
+  "packageName": "@fluentui/web-components",
+  "email": "machi@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/src/tablist/tablist.styles.ts b/packages/web-components/src/tablist/tablist.styles.ts
index fb4b6a0e56e49..77e217db58600 100644
--- a/packages/web-components/src/tablist/tablist.styles.ts
+++ b/packages/web-components/src/tablist/tablist.styles.ts
@@ -188,7 +188,7 @@ export const styles = css`
    * TODO: Remove '(text-size-adjust: auto)' after this bug is fixed:
    * https://bugs.webkit.org/show_bug.cgi?id=298646
    * Also remove the same trick from tab.styles.ts.
-   * Using '@supports (text-size-adjust: auto)' here to exclude Safari 26 from
+   * Using '@supports (text-size-adjust: auto)' here to exclude Safari 26.0 from
    * using CSS Anchor Positioning here because it crashes.
    */
   @supports (anchor-name: --a) and (text-size-adjust: auto) {
@@ -200,7 +200,8 @@ export const styles = css`
       background-color: ${colorCompoundBrandStroke};
       content: '';
       inline-size: 100%;
-      inset: auto auto anchor(end) anchor(center);
+      inset-block: auto anchor(end);
+      inset-inline: anchor(center) auto;
       position: fixed;
       position-anchor: --tab;
       transform: translateX(-50%);
@@ -215,8 +216,13 @@ export const styles = css`
       height: ${strokeWidthThicker};
     }
 
+    :host(:dir(rtl))::after {
+      transform: translateX(50%);
+    }
+
     :host([orientation='vertical'])::after {
-      inset: anchor(center) anchor(end) auto 0;
+      inset-block: anchor(center) auto;
+      inset-inline: anchor(start) auto;
       transform: translateY(-50%);
       transition-property: inset-block, height;
 
@@ -225,10 +231,6 @@ export const styles = css`
       height: calc(anchor-size() - var(--tabIndicatorInsetBlock) * 2);
     }
 
-    :host(:dir(rtl)[orientation='vertical'])::after {
-      inset: anchor(center) anchor(start) auto 0;
-    }
-
     :host([disabled])::after {
       background-color: ${colorNeutralForegroundDisabled};
     }