fix(web-components): fix anchor positioning for RTL

change/@fluentui-web-components-5dc79d55-e411-4ada-9707-2d868421f7c2.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix anchor positioning for rtl",
+  "packageName": "@fluentui/web-components",
+  "email": "machi@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/web-components/docs/web-components.api.md

@@ -3195,14 +3195,26 @@ export function listboxTemplate<T extends Listbox>(): ElementViewTemplate<T>;
 
 // @public
 export class Menu extends FASTElement {
+    // @internal
+    protected addMenuListListeners(): void;
+    // @internal
+    protected addTriggerListeners(): void;
     closeMenu: (event?: Event) => void;
     closeOnScroll?: boolean;
     closeOnScrollChanged(oldValue: boolean, newValue: boolean): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    // @internal
+    protected documentClickHandler: (e: any) => void;
     focusMenuList(): void;
     focusTrigger(): void;
     menuKeydownHandler(e: KeyboardEvent): boolean | void;
+    // @internal
+    protected _menuList?: HTMLElement;
+    // @internal (undocumented)
+    protected _menuListAbortController?: AbortController;
+    // @internal
+    protected _open: boolean;
     openMenu: (e?: Event) => void;
     openOnContext?: boolean;
     openOnContextChanged(oldValue: boolean, newValue: boolean): void;
@@ -3222,6 +3234,10 @@ export class Menu extends FASTElement {
     split?: boolean;
     toggleHandler: (e: Event) => void;
     toggleMenu: () => void;
+    // @internal
+    protected _trigger?: HTMLElement;
+    // @internal (undocumented)
+    protected _triggerAbortController?: AbortController;
     triggerKeydownHandler: (e: KeyboardEvent) => boolean | void;
 }
 

packages/web-components/src/listbox/listbox.styles.ts

@@ -43,8 +43,8 @@ export const styles = css`
       position: fixed;
       max-block-size: var(--listbox-max-height, calc(50vh - anchor-size(self-block)));
       min-inline-size: anchor-size(inline);
-      inset-block-start: anchor(end);
-      inset-inline-start: anchor(start);
+      inset-block-start: anchor(outside);
+      inset-inline-start: anchor(inside);
       position-try-fallbacks: flip-block, flip-inline, flip-inline flip-block;
     }
   }

packages/web-components/src/menu-item/menu-item.styles.ts

@@ -144,15 +144,20 @@ export const styles = css`
       position: relative;
     }
 
+    @position-try --inline-inside {
+      inset-inline-start: unset;
+      inset-inline-end: anchor(inside);
+    }
+
     ::slotted([popover]) {
       margin: 0;
       max-height: var(--menu-max-height, auto);
       position: fixed;
       position-anchor: --menu-trigger;
       inset: unset;
-      inset-block-start: anchor(start);
-      inset-inline-start: anchor(end);
-      position-try-fallbacks: flip-inline, block-start, block-end;
+      inset-block-start: anchor(inside);
+      inset-inline-start: anchor(outside);
+      position-try-fallbacks: --inline-inside, flip-block, flip-block --inline-inside;
       z-index: 1;
     }
 

packages/web-components/src/menu/menu.styles.ts

@@ -17,16 +17,16 @@ export const styles = css`
     max-height: var(--menu-max-height, auto);
     position-anchor: --menu-trigger;
     inset: unset;
-    inset-block-start: anchor(end);
-    inset-inline-start: anchor(start);
-    position-try-fallbacks: flip-block;
+    inset-block-start: anchor(outside);
+    inset-inline-start: anchor(self-start);
+    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
     position: fixed;
     z-index: 1;
   }
 
   :host([split]) ::slotted([popover]) {
-    inset-inline-start: auto;
-    inset-inline-end: anchor(end);
+    inset-inline-start: unset;
+    inset-inline-end: anchor(self-end);
   }
 
   ::slotted([popover]:not(:popover-open)) {

packages/web-components/src/menu/menu.ts

@@ -148,28 +148,28 @@ export class Menu extends FASTElement {
    * Defines whether the menu is open or not.
    * @internal
    */
-  private _open: boolean = false;
+  protected _open: boolean = false;
 
   /**
    * The trigger element of the menu.
    * @internal
    */
-  private _trigger?: HTMLElement;
+  protected _trigger?: HTMLElement;
   /**
    * The menu list element of the menu which has the popover behavior.
    * @internal
    */
-  private _menuList?: HTMLElement;
+  protected _menuList?: HTMLElement;
 
   /**
    * @internal
    */
-  private _triggerAbortController?: AbortController;
+  protected _triggerAbortController?: AbortController;
 
   /**
    * @internal
    */
-  private _menuListAbortController?: AbortController;
+  protected _menuListAbortController?: AbortController;
 
   /**
    * Called when the element is connected to the DOM.
@@ -356,7 +356,7 @@ export class Menu extends FASTElement {
    * Adds trigger-related event listeners.
    * @internal
    */
-  private addTriggerListeners(): void {
+  protected addTriggerListeners(): void {
     this._triggerAbortController = new AbortController();
     const { signal } = this._triggerAbortController;
 
@@ -376,7 +376,7 @@ export class Menu extends FASTElement {
    * Adds menu-list event listeners.
    * @internal
    */
-  private addMenuListListeners(): void {
+  protected addMenuListListeners(): void {
     this._menuListAbortController = new AbortController();
     const { signal } = this._menuListAbortController;
 
@@ -452,7 +452,7 @@ export class Menu extends FASTElement {
    * @internal
    * @param e - The event triggered on document click.
    */
-  private documentClickHandler = (e: any) => {
+  protected documentClickHandler = (e: any) => {
     if (!e.composedPath().some((el: any) => el === this._trigger || el === this._menuList)) {
       this.closeMenu();
     }