diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Controlled-Menu-dark-colorblind-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Controlled-Menu-dark-colorblind-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..e7dec096a6b Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Controlled-Menu-dark-colorblind-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Controlled-Menu-dark-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Controlled-Menu-dark-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..bcc3268015b Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Controlled-Menu-dark-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Controlled-Menu-dark-dimmed-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Controlled-Menu-dark-dimmed-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..7b7716b6a5d Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Controlled-Menu-dark-dimmed-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Controlled-Menu-dark-high-contrast-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Controlled-Menu-dark-high-contrast-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..4dd5ac2dece Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Controlled-Menu-dark-high-contrast-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Controlled-Menu-dark-tritanopia-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Controlled-Menu-dark-tritanopia-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..bcc3268015b Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Controlled-Menu-dark-tritanopia-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Controlled-Menu-light-colorblind-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Controlled-Menu-light-colorblind-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..5d941e2d06a Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Controlled-Menu-light-colorblind-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Controlled-Menu-light-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Controlled-Menu-light-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..469fa95fda2 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Controlled-Menu-light-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Controlled-Menu-light-high-contrast-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Controlled-Menu-light-high-contrast-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..cd6b3456eaf Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Controlled-Menu-light-high-contrast-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Controlled-Menu-light-tritanopia-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Controlled-Menu-light-tritanopia-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..469fa95fda2 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Controlled-Menu-light-tritanopia-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Anchor-dark-colorblind-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Anchor-dark-colorblind-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..05b78100d7b Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Anchor-dark-colorblind-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Anchor-dark-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Anchor-dark-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..05b78100d7b Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Anchor-dark-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Anchor-dark-dimmed-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Anchor-dark-dimmed-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..ec75566e034 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Anchor-dark-dimmed-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Anchor-dark-high-contrast-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Anchor-dark-high-contrast-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..9570283a89c Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Anchor-dark-high-contrast-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Anchor-dark-tritanopia-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Anchor-dark-tritanopia-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..05b78100d7b Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Anchor-dark-tritanopia-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Anchor-light-colorblind-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Anchor-light-colorblind-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..7068569e02f Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Anchor-light-colorblind-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Anchor-light-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Anchor-light-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..7068569e02f Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Anchor-light-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Anchor-light-high-contrast-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Anchor-light-high-contrast-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..387c6bacde1 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Anchor-light-high-contrast-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Anchor-light-tritanopia-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Anchor-light-tritanopia-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..7068569e02f Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Anchor-light-tritanopia-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Overlay-Props-dark-colorblind-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Overlay-Props-dark-colorblind-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..b2fd0bf2938 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Overlay-Props-dark-colorblind-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Overlay-Props-dark-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Overlay-Props-dark-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..b2fd0bf2938 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Overlay-Props-dark-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Overlay-Props-dark-dimmed-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Overlay-Props-dark-dimmed-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..454c4d92e9b Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Overlay-Props-dark-dimmed-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Overlay-Props-dark-high-contrast-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Overlay-Props-dark-high-contrast-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..36b9f1392cf Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Overlay-Props-dark-high-contrast-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Overlay-Props-dark-tritanopia-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Overlay-Props-dark-tritanopia-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..b2fd0bf2938 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Overlay-Props-dark-tritanopia-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Overlay-Props-light-colorblind-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Overlay-Props-light-colorblind-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..677d614bd09 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Overlay-Props-light-colorblind-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Overlay-Props-light-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Overlay-Props-light-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..677d614bd09 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Overlay-Props-light-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Overlay-Props-light-high-contrast-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Overlay-Props-light-high-contrast-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..1ed2a9b4f71 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Overlay-Props-light-high-contrast-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Overlay-Props-light-tritanopia-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Overlay-Props-light-tritanopia-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..677d614bd09 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Overlay-Props-light-tritanopia-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Default-dark-colorblind-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Default-dark-colorblind-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..e1aeea3af07 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Default-dark-colorblind-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Default-dark-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Default-dark-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..e3d8b857927 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Default-dark-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Default-dark-dimmed-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Default-dark-dimmed-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..eeec4d67540 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Default-dark-dimmed-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Default-dark-high-contrast-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Default-dark-high-contrast-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..34a284d6a7c Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Default-dark-high-contrast-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Default-dark-tritanopia-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Default-dark-tritanopia-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..e3d8b857927 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Default-dark-tritanopia-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Default-light-colorblind-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Default-light-colorblind-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..58bacd7d70c Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Default-light-colorblind-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Default-light-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Default-light-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..cabc910a13f Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Default-light-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Default-light-high-contrast-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Default-light-high-contrast-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..7bf5d1a56a2 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Default-light-high-contrast-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Default-light-tritanopia-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Default-light-tritanopia-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..cabc910a13f Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Default-light-tritanopia-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-dark-colorblind-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-dark-colorblind-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..0c65aa7efdb Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-dark-colorblind-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-dark-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-dark-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..2e09b79f559 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-dark-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-dark-dimmed-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-dark-dimmed-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..6f5d4b4db0e Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-dark-dimmed-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-dark-high-contrast-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-dark-high-contrast-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..fab4eafebb6 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-dark-high-contrast-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-dark-tritanopia-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-dark-tritanopia-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..2e09b79f559 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-dark-tritanopia-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-light-colorblind-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-light-colorblind-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..4293750d366 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-light-colorblind-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-light-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-light-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..f95795ce765 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-light-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-light-high-contrast-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-light-high-contrast-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..122fa53166a Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-light-high-contrast-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-light-tritanopia-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-light-tritanopia-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..f95795ce765 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-light-tritanopia-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-colorblind-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-colorblind-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..b128e774b6c Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-colorblind-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..b128e774b6c Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-dimmed-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-dimmed-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..487a13da7b7 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-dimmed-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-high-contrast-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-high-contrast-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..219de49cde9 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-high-contrast-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-tritanopia-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-tritanopia-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..b128e774b6c Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-tritanopia-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-colorblind-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-colorblind-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..ef73f2c2c48 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-colorblind-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..ef73f2c2c48 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-high-contrast-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-high-contrast-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..3134556f2c3 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-high-contrast-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-tritanopia-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-tritanopia-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..ef73f2c2c48 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-tritanopia-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-colorblind-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-colorblind-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..2e79225e553 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-colorblind-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..2e79225e553 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-dimmed-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-dimmed-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..e2cbfb07d68 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-dimmed-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-high-contrast-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-high-contrast-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..e0fd0672bc2 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-high-contrast-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-tritanopia-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-tritanopia-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..2e79225e553 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-tritanopia-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-colorblind-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-colorblind-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..8da054895df Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-colorblind-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..8da054895df Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-high-contrast-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-high-contrast-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..b0c5295d641 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-high-contrast-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-tritanopia-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-tritanopia-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..8da054895df Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-tritanopia-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Links-And-Actions-dark-colorblind-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Links-And-Actions-dark-colorblind-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..a75f846d4e0 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Links-And-Actions-dark-colorblind-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Links-And-Actions-dark-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Links-And-Actions-dark-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..a75f846d4e0 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Links-And-Actions-dark-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Links-And-Actions-dark-dimmed-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Links-And-Actions-dark-dimmed-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..dba4291084b Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Links-And-Actions-dark-dimmed-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Links-And-Actions-dark-high-contrast-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Links-And-Actions-dark-high-contrast-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..742200dd811 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Links-And-Actions-dark-high-contrast-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Links-And-Actions-dark-tritanopia-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Links-And-Actions-dark-tritanopia-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..a75f846d4e0 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Links-And-Actions-dark-tritanopia-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Links-And-Actions-light-colorblind-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Links-And-Actions-light-colorblind-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..0c1106d3769 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Links-And-Actions-light-colorblind-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Links-And-Actions-light-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Links-And-Actions-light-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..0c1106d3769 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Links-And-Actions-light-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Links-And-Actions-light-high-contrast-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Links-And-Actions-light-high-contrast-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..bf28e589259 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Links-And-Actions-light-high-contrast-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Links-And-Actions-light-tritanopia-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Links-And-Actions-light-tritanopia-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..0c1106d3769 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Links-And-Actions-light-tritanopia-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-colorblind-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-colorblind-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..316dfae5d02 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-colorblind-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..316dfae5d02 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-dimmed-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-dimmed-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..840b245216b Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-dimmed-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-high-contrast-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-high-contrast-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..0f616f734a2 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-high-contrast-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-tritanopia-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-tritanopia-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..316dfae5d02 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-tritanopia-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-colorblind-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-colorblind-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..70612be138b Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-colorblind-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..70612be138b Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-high-contrast-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-high-contrast-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..d782a4bb5c0 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-high-contrast-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-tritanopia-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-tritanopia-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..70612be138b Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-tritanopia-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multi-Select-dark-colorblind-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multi-Select-dark-colorblind-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..bbf26fc86d3 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multi-Select-dark-colorblind-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multi-Select-dark-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multi-Select-dark-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..bbf26fc86d3 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multi-Select-dark-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multi-Select-dark-dimmed-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multi-Select-dark-dimmed-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..dd33f469a4e Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multi-Select-dark-dimmed-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multi-Select-dark-high-contrast-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multi-Select-dark-high-contrast-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..ba4e4bf67ff Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multi-Select-dark-high-contrast-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multi-Select-dark-tritanopia-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multi-Select-dark-tritanopia-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..0643ee889c2 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multi-Select-dark-tritanopia-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multi-Select-light-colorblind-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multi-Select-light-colorblind-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..d3785c43301 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multi-Select-light-colorblind-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multi-Select-light-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multi-Select-light-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..d3785c43301 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multi-Select-light-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multi-Select-light-high-contrast-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multi-Select-light-high-contrast-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..1a6a488a268 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multi-Select-light-high-contrast-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multi-Select-light-tritanopia-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multi-Select-light-tritanopia-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..d3785c43301 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multi-Select-light-tritanopia-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-dark-colorblind-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-dark-colorblind-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..103c86393c3 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-dark-colorblind-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-dark-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-dark-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..103c86393c3 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-dark-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-dark-dimmed-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-dark-dimmed-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..b736af97889 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-dark-dimmed-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-dark-high-contrast-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-dark-high-contrast-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..f2493fd075a Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-dark-high-contrast-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-dark-tritanopia-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-dark-tritanopia-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..103c86393c3 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-dark-tritanopia-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-light-colorblind-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-light-colorblind-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..cf304f48d95 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-light-colorblind-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-light-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-light-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..cf304f48d95 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-light-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-light-high-contrast-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-light-high-contrast-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..df85d2dd74c Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-light-high-contrast-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-light-tritanopia-css-anchor-positioning-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-light-tritanopia-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..cf304f48d95 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-light-tritanopia-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Anchor-Alignment-light-css-anchor-positioning-linux.png b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Anchor-Alignment-light-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..a1d1eb327c3 Binary files /dev/null and b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Anchor-Alignment-light-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Anchor-Alignment-light-linux.png b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Anchor-Alignment-light-linux.png new file mode 100644 index 00000000000..a1d1eb327c3 Binary files /dev/null and b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Anchor-Alignment-light-linux.png differ diff --git a/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Anchor-Position-Grid-light-css-anchor-positioning-linux.png b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Anchor-Position-Grid-light-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..7ca823934ce Binary files /dev/null and b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Anchor-Position-Grid-light-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Anchor-Position-Grid-light-linux.png b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Anchor-Position-Grid-light-linux.png new file mode 100644 index 00000000000..7ca823934ce Binary files /dev/null and b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Anchor-Position-Grid-light-linux.png differ diff --git a/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Anchor-Side-light-css-anchor-positioning-linux.png b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Anchor-Side-light-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..a85fe13075d Binary files /dev/null and b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Anchor-Side-light-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Anchor-Side-light-linux.png b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Anchor-Side-light-linux.png new file mode 100644 index 00000000000..7a6a7d07fb4 Binary files /dev/null and b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Anchor-Side-light-linux.png differ diff --git a/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Custom-Anchor-Id-light-css-anchor-positioning-linux.png b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Custom-Anchor-Id-light-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..12eb1d7a568 Binary files /dev/null and b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Custom-Anchor-Id-light-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Custom-Anchor-Id-light-linux.png b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Custom-Anchor-Id-light-linux.png new file mode 100644 index 00000000000..7aac8ae2a9d Binary files /dev/null and b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Custom-Anchor-Id-light-linux.png differ diff --git a/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Default-light-css-anchor-positioning-linux.png b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Default-light-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..635748989f8 Binary files /dev/null and b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Default-light-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Default-light-linux.png b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Default-light-linux.png new file mode 100644 index 00000000000..635748989f8 Binary files /dev/null and b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Default-light-linux.png differ diff --git a/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Focus-Trap-Overrides-light-css-anchor-positioning-linux.png b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Focus-Trap-Overrides-light-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..d192d12e1b2 Binary files /dev/null and b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Focus-Trap-Overrides-light-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Focus-Trap-Overrides-light-linux.png b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Focus-Trap-Overrides-light-linux.png new file mode 100644 index 00000000000..d192d12e1b2 Binary files /dev/null and b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Focus-Trap-Overrides-light-linux.png differ diff --git a/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Focus-Zone-Overrides-light-css-anchor-positioning-linux.png b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Focus-Zone-Overrides-light-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..7c4ec793e14 Binary files /dev/null and b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Focus-Zone-Overrides-light-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Focus-Zone-Overrides-light-linux.png b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Focus-Zone-Overrides-light-linux.png new file mode 100644 index 00000000000..7c4ec793e14 Binary files /dev/null and b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Focus-Zone-Overrides-light-linux.png differ diff --git a/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Fullscreen-Variant-light-css-anchor-positioning-linux.png b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Fullscreen-Variant-light-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..d8905c4e284 Binary files /dev/null and b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Fullscreen-Variant-light-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Fullscreen-Variant-light-linux.png b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Fullscreen-Variant-light-linux.png new file mode 100644 index 00000000000..d8905c4e284 Binary files /dev/null and b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Fullscreen-Variant-light-linux.png differ diff --git a/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Height-light-css-anchor-positioning-linux.png b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Height-light-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..a071f9a22b9 Binary files /dev/null and b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Height-light-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Height-light-linux.png b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Height-light-linux.png new file mode 100644 index 00000000000..eadd68578a3 Binary files /dev/null and b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Height-light-linux.png differ diff --git a/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Offset-Alignment-From-Anchor-light-css-anchor-positioning-linux.png b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Offset-Alignment-From-Anchor-light-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..9fd40da8ea8 Binary files /dev/null and b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Offset-Alignment-From-Anchor-light-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Offset-Alignment-From-Anchor-light-linux.png b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Offset-Alignment-From-Anchor-light-linux.png new file mode 100644 index 00000000000..7b4ccbf5966 Binary files /dev/null and b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Offset-Alignment-From-Anchor-light-linux.png differ diff --git a/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Offset-Position-From-Anchor-light-css-anchor-positioning-linux.png b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Offset-Position-From-Anchor-light-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..cd1446b4fb2 Binary files /dev/null and b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Offset-Position-From-Anchor-light-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Offset-Position-From-Anchor-light-linux.png b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Offset-Position-From-Anchor-light-linux.png new file mode 100644 index 00000000000..1a79879c3e6 Binary files /dev/null and b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Offset-Position-From-Anchor-light-linux.png differ diff --git a/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Overlay-Props-Overrides-light-css-anchor-positioning-linux.png b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Overlay-Props-Overrides-light-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..1d43f3d6ab4 Binary files /dev/null and b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Overlay-Props-Overrides-light-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Overlay-Props-Overrides-light-linux.png b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Overlay-Props-Overrides-light-linux.png new file mode 100644 index 00000000000..1d43f3d6ab4 Binary files /dev/null and b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Overlay-Props-Overrides-light-linux.png differ diff --git a/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Portal-Inside-Scrolling-Element-light-css-anchor-positioning-linux.png b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Portal-Inside-Scrolling-Element-light-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..480cadb25cc Binary files /dev/null and b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Portal-Inside-Scrolling-Element-light-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Portal-Inside-Scrolling-Element-light-linux.png b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Portal-Inside-Scrolling-Element-light-linux.png new file mode 100644 index 00000000000..480cadb25cc Binary files /dev/null and b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Portal-Inside-Scrolling-Element-light-linux.png differ diff --git a/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Reposition-After-Content-Grows-Within-Dialog-light-css-anchor-positioning-linux.png b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Reposition-After-Content-Grows-Within-Dialog-light-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..39c221784a0 Binary files /dev/null and b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Reposition-After-Content-Grows-Within-Dialog-light-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Reposition-After-Content-Grows-Within-Dialog-light-linux.png b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Reposition-After-Content-Grows-Within-Dialog-light-linux.png new file mode 100644 index 00000000000..42f48965cf3 Binary files /dev/null and b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Reposition-After-Content-Grows-Within-Dialog-light-linux.png differ diff --git a/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Reposition-After-Content-Grows-light-css-anchor-positioning-linux.png b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Reposition-After-Content-Grows-light-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..18a1d63e856 Binary files /dev/null and b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Reposition-After-Content-Grows-light-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Reposition-After-Content-Grows-light-linux.png b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Reposition-After-Content-Grows-light-linux.png new file mode 100644 index 00000000000..18a1d63e856 Binary files /dev/null and b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Reposition-After-Content-Grows-light-linux.png differ diff --git a/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Scroll-With-Anchor-light-css-anchor-positioning-linux.png b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Scroll-With-Anchor-light-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..6b80e1f6afe Binary files /dev/null and b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Scroll-With-Anchor-light-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Scroll-With-Anchor-light-linux.png b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Scroll-With-Anchor-light-linux.png new file mode 100644 index 00000000000..6b80e1f6afe Binary files /dev/null and b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Scroll-With-Anchor-light-linux.png differ diff --git a/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Width-light-css-anchor-positioning-linux.png b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Width-light-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..f407bffc82d Binary files /dev/null and b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Width-light-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Width-light-linux.png b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Width-light-linux.png new file mode 100644 index 00000000000..f1cd6a9df7e Binary files /dev/null and b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Width-light-linux.png differ diff --git a/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Within-Sticky-Element-light-css-anchor-positioning-linux.png b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Within-Sticky-Element-light-css-anchor-positioning-linux.png new file mode 100644 index 00000000000..78c6e27986b Binary files /dev/null and b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Within-Sticky-Element-light-css-anchor-positioning-linux.png differ diff --git a/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Within-Sticky-Element-light-linux.png b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Within-Sticky-Element-light-linux.png new file mode 100644 index 00000000000..78c6e27986b Binary files /dev/null and b/.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Within-Sticky-Element-light-linux.png differ diff --git a/e2e/components/ActionList.test.ts b/e2e/components/ActionList.test.ts index 310ee81d2e8..d24cdcf57df 100644 --- a/e2e/components/ActionList.test.ts +++ b/e2e/components/ActionList.test.ts @@ -179,8 +179,10 @@ test.describe('ActionList', () => { const inlineItem = page.getByRole('button', {name: /Inline Description/}).first() await inlineItem.focus() - // Tooltip uses popover attribute; wait for it to become visible - await expect(page.locator('[popover]:popover-open')).toBeVisible() + // Tooltip uses popover attribute; wait for it to become visible and finish animating + const tooltip = page.locator('[popover]:popover-open') + await expect(tooltip).toBeVisible() + await tooltip.evaluate(el => el.getAnimations().map(a => a.finish())) await expect(page).toHaveScreenshot(`ActionList.Truncated Inline Tooltip.${theme}.png`) }) @@ -196,7 +198,10 @@ test.describe('ActionList', () => { const complexItem = page.getByRole('button', {name: /Description with truncation and complex children/}) await complexItem.focus() - await expect(page.locator('[popover]:popover-open')).toBeVisible() + // Wait for tooltip to become visible and finish animating + const tooltip = page.locator('[popover]:popover-open') + await expect(tooltip).toBeVisible() + await tooltip.evaluate(el => el.getAnimations().map(a => a.finish())) await expect(page).toHaveScreenshot(`ActionList.Truncated Complex Tooltip.${theme}.png`) }) } diff --git a/e2e/components/ActionMenu.test.ts b/e2e/components/ActionMenu.test.ts index ba8b94f2f22..3027a835331 100644 --- a/e2e/components/ActionMenu.test.ts +++ b/e2e/components/ActionMenu.test.ts @@ -59,32 +59,42 @@ const stories: Array<{ }, ] as const +const featureFlagVariants = [ + {flagEnabled: false, suffix: ''}, + {flagEnabled: true, suffix: '.css-anchor-positioning'}, +] as const + test.describe('ActionMenu', () => { for (const story of stories) { test.describe(story.title, () => { for (const theme of themes) { test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: story.id, - globals: { - colorScheme: theme, - }, - }) + for (const {flagEnabled, suffix} of featureFlagVariants) { + test(`default @vrt${suffix}`, async ({page}) => { + await visit(page, { + id: story.id, + globals: { + colorScheme: theme, + featureFlags: { + primer_react_css_anchor_positioning: flagEnabled, + }, + }, + }) - const buttonName = story.buttonName ?? 'Open menu' + const buttonName = story.buttonName ?? 'Open menu' - // Default state - // Open state + // Default state + // Open state - if (!story.skipOpen) { - await page.locator('button', {hasText: buttonName}).waitFor() - await page.getByRole('button', {name: buttonName}).click() - } - expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( - `ActionMenu.${story.title}.${theme}.png`, - ) - }) + if (!story.skipOpen) { + await page.locator('button', {hasText: buttonName}).waitFor() + await page.getByRole('button', {name: buttonName}).click() + } + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `ActionMenu.${story.title}.${theme}${suffix}.png`, + ) + }) + } }) } }) diff --git a/e2e/components/AnchoredOverlay.test.ts b/e2e/components/AnchoredOverlay.test.ts new file mode 100644 index 00000000000..3cff067da0c --- /dev/null +++ b/e2e/components/AnchoredOverlay.test.ts @@ -0,0 +1,173 @@ +import {test, expect} from '@playwright/test' +import {visit} from '../test-helpers/storybook' +import {viewports} from '../test-helpers/viewports' +import {waitForImages} from '../test-helpers/waitForImages' + +const stories: Array<{ + title: string + id: string + viewport?: keyof typeof viewports + waitForText?: string + buttonName?: string + openDialog?: boolean + openNestedDialog?: boolean +}> = [ + // Default + { + title: 'Default', + id: 'components-anchoredoverlay--default', + }, + // Features + { + title: 'Portal Inside Scrolling Element', + id: 'components-anchoredoverlay-features--portal-inside-scrolling-element', + }, + { + title: 'Custom Anchor Id', + id: 'components-anchoredoverlay-features--custom-anchor-id', + }, + { + title: 'Height', + id: 'components-anchoredoverlay-features--height', + }, + { + title: 'Width', + id: 'components-anchoredoverlay-features--width', + }, + { + title: 'Anchor Alignment', + id: 'components-anchoredoverlay-features--anchor-alignment', + }, + { + title: 'Anchor Side', + id: 'components-anchoredoverlay-features--anchor-side', + }, + { + title: 'Offset Position From Anchor', + id: 'components-anchoredoverlay-features--offset-position-from-anchor', + }, + { + title: 'Offset Alignment From Anchor', + id: 'components-anchoredoverlay-features--offset-alignment-from-anchor', + }, + { + title: 'Focus Trap Overrides', + id: 'components-anchoredoverlay-features--focus-trap-overrides', + }, + { + title: 'Focus Zone Overrides', + id: 'components-anchoredoverlay-features--focus-zone-overrides', + }, + { + title: 'Overlay Props Overrides', + id: 'components-anchoredoverlay-features--overlay-props-overrides', + }, + { + title: 'Fullscreen Variant', + id: 'components-anchoredoverlay-features--fullscreen-variant', + viewport: 'primer.breakpoint.xs', + buttonName: 'Open Fullscreen on Narrow', + }, + { + title: 'Anchor Position Grid', + id: 'components-anchoredoverlay-features--anchor-position-grid', + buttonName: 'Anchor', + }, + { + title: 'Scroll With Anchor', + id: 'components-anchoredoverlay-features--scroll-with-anchor', + buttonName: 'Open Overlay', + }, + // { + // title: 'Within Dialog', + // id: 'components-anchoredoverlay-features--within-dialog', + // buttonName: 'Open Overlay', + // openDialog: true, + // }, + // { + // title: 'Within Nested Dialog', + // id: 'components-anchoredoverlay-features--within-nested-dialog', + // buttonName: 'Open Overlay', + // openDialog: true, + // openNestedDialog: true, + // }, + // { + // title: 'Within Dialog Overflowing', + // id: 'components-anchoredoverlay-features--within-dialog-overflowing', + // buttonName: 'Open Overlay', + // openDialog: true, + // }, + { + title: 'Within Sticky Element', + id: 'components-anchoredoverlay-features--within-sticky-element', + buttonName: 'Open Overlay', + }, + // Dev + { + title: 'Reposition After Content Grows', + id: 'components-anchoredoverlay-dev--reposition-after-content-grows', + waitForText: 'content with 300px height', + }, + { + title: 'Reposition After Content Grows Within Dialog', + id: 'components-anchoredoverlay-dev--reposition-after-content-grows-within-dialog', + waitForText: 'content with 300px height', + }, +] as const + +const theme = 'light' + +test.describe('AnchoredOverlay', () => { + for (const story of stories) { + test.describe(story.title, () => { + for (const withCSSAnchorPositioning of [false, true]) { + const namePostfix = withCSSAnchorPositioning ? '.css-anchor-positioning' : '' + + test(`default @vrt${namePostfix ? ` ${namePostfix}` : ''}`, async ({page}) => { + await visit(page, { + id: story.id, + globals: { + colorScheme: theme, + ...(withCSSAnchorPositioning && { + featureFlags: { + primer_react_css_anchor_positioning: true, + }, + }), + }, + }) + + if (story.viewport) { + await page.setViewportSize({ + width: viewports[story.viewport], + height: 667, + }) + } + + // Open dialog if needed + if (story.openDialog) { + await page.getByRole('button', {name: 'Open Dialog'}).click() + } + + // Open nested dialog if needed + if (story.openNestedDialog) { + await page.getByRole('button', {name: 'Open Inner Dialog'}).click() + } + + // Open the overlay + const buttonName = story.buttonName ?? 'Button' + await page.locator('button', {hasText: buttonName}).first().waitFor() + const overlayButton = page.getByRole('button', {name: buttonName}).first() + await overlayButton.click() + + // for the dev stories, we intentionally change the content after the overlay is open to test that it repositions correctly + if (story.waitForText) await page.getByText(story.waitForText).waitFor() + await waitForImages(page) + + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `AnchoredOverlay.${story.title}.${theme}${namePostfix}.png`, + ) + }) + } + }) + } +}) diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.module.css b/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.module.css index 8f1eb2584c2..e7c9c1ebe64 100644 --- a/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.module.css +++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.module.css @@ -62,3 +62,95 @@ .Icon { color: var(--fgColor-muted); } + +.CenteredTrigger { + display: flex; + align-items: center; + justify-content: center; + min-height: 300vh; + /* stylelint-disable-next-line primer/responsive-widths -- intentionally large for scroll testing */ + min-width: 300vw; +} + +.AnchorGridContainer { + overflow: auto; + height: 100vh; + width: 100vw; +} + +.AnchorGrid { + display: flex; + align-items: center; + justify-content: center; + min-height: 200vh; + /* stylelint-disable-next-line primer/responsive-widths -- intentionally large for grid layout testing */ + min-width: 200vw; +} + +.AnchorGridCell { + display: flex; + align-items: center; + justify-content: center; + /* stylelint-disable-next-line primer/colors -- fallback value for borderColor-default */ + border: var(--borderWidth-thin) solid var(--borderColor-default, #d1d9e0); + padding: var(--base-size-16); + position: relative; + height: 200px; +} + +.AnchorGridLabel { + font-size: var(--text-body-size-small); + line-height: var(--text-body-lineHeight-small); + color: var(--fgColor-muted); + position: absolute; + top: var(--base-size-8); + left: var(--base-size-8); +} + +.AnchorGridInner { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr; + width: 50%; + height: 50%; +} + +.ScrollContainer { + height: 400px; + overflow: auto; + /* stylelint-disable-next-line primer/colors -- fallback value for borderColor-default */ + border: var(--borderWidth-thin) solid var(--borderColor-default, #d1d9e0); + border-radius: var(--borderRadius-medium); + position: relative; +} + +.ScrollContent { + height: 1200px; + display: flex; + align-items: center; + justify-content: center; + padding: var(--base-size-16); +} + +.StickyHeader { + position: sticky; + top: 0; + z-index: 10; + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--base-size-8) var(--base-size-16); + background-color: var(--bgColor-default); + /* stylelint-disable-next-line primer/colors -- fallback value for borderColor-default */ + border-bottom: var(--borderWidth-thin) solid var(--borderColor-default, #d1d9e0); +} + +.StickyScrollArea { + height: 1200px; + padding: var(--base-size-16); +} + +.DialogBody { + padding: var(--base-size-16); + height: 2000px; +} diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx b/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx index 033b6b656b5..d7602f5c616 100644 --- a/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx +++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx @@ -1,7 +1,8 @@ +import type React from 'react' import {useEffect, useRef, useState, type JSX} from 'react' import type {Args, Meta} from '@storybook/react-vite' import {FocusKeys} from '@primer/behaviors' -import {Avatar, Link} from '..' +import {Avatar, Dialog, Link, Text} from '..' import {AnchoredOverlay} from '../AnchoredOverlay' import Heading from '../Heading' import Octicon from '../Octicon' @@ -385,3 +386,205 @@ export const FullscreenVariant = () => { ) } + +export const CenteredOnPage = () => { + const [open, setOpen] = useState(false) + + return ( +
+ setOpen(true)} + onClose={() => setOpen(false)} + renderAnchor={props => } + overlayProps={{ + role: 'dialog', + 'aria-modal': true, + 'aria-label': 'Centered Overlay Demo', + }} + focusZoneSettings={{disabled: true}} + preventOverflow={false} + > +
{hoverCard}
+ +
+ ) +} + +const gridPositions = [ + {row: 'start', col: 'start'}, + {row: 'start', col: 'center'}, + {row: 'start', col: 'end'}, + {row: 'center', col: 'start'}, + {row: 'center', col: 'center'}, + {row: 'center', col: 'end'}, + {row: 'end', col: 'start'}, + {row: 'end', col: 'center'}, + {row: 'end', col: 'end'}, +] + +export const AnchorPositionGrid = () => { + const [openCell, setOpenCell] = useState(null) + + return ( +
+
+
+ {gridPositions.map(({row, col}) => { + const key = `${row}-${col}` + const isCenter = row === 'center' && col === 'center' + + return ( +
+ + {row} / {col} + + {isCenter ? ( + setOpenCell(key)} + onClose={() => setOpenCell(null)} + renderAnchor={props => } + overlayProps={{ + role: 'dialog', + 'aria-modal': true, + 'aria-label': 'Anchor Position Grid Demo', + }} + focusZoneSettings={{disabled: true}} + preventOverflow={false} + > +
{hoverCard}
+ + ) : null} +
+ ) + })} +
+
+
+ ) +} + +const AnchorPositionOverlay = ({ + children, + label = 'CSS Anchor Position Demo', +}: { + children?: React.ReactNode + label?: string +}) => { + const [open, setOpen] = useState(false) + + return ( + setOpen(true)} + onClose={() => setOpen(false)} + renderAnchor={props => } + overlayProps={{ + role: 'dialog', + 'aria-modal': true, + 'aria-label': label, + }} + focusZoneSettings={{disabled: true}} + preventOverflow={false} + > +
{children ?? hoverCard}
+ + ) +} + +export const ScrollWithAnchor = () => { + return ( +
+
+ +
+
+ ) +} + +export const WithinDialog = () => { + const [isDialogOpen, setIsDialogOpen] = useState(false) + + return ( +
+ + {isDialogOpen && ( + setIsDialogOpen(false)} width="large"> +
+ + The overlay below uses CSS anchor positioning within a dialog. + + +
+ + )} +
+ ) +} + +export const WithinNestedDialog = () => { + const [isOuterOpen, setIsOuterOpen] = useState(false) + const [isInnerOpen, setIsInnerOpen] = useState(false) + + return ( +
+ + {isOuterOpen && ( + setIsOuterOpen(false)} width="large"> +
+ + This is the outer dialog. Open the inner dialog to test nested anchor positioning. + + + {isInnerOpen && ( + setIsInnerOpen(false)} width="medium"> +
+ + The overlay below uses CSS anchor positioning inside a nested dialog. + + +
+ + )} +
+ + )} +
+ ) +} + +export const WithinDialogOverflowing = () => { + const [isDialogOpen, setIsDialogOpen] = useState(false) + + return ( +
+ + {isDialogOpen && ( + setIsDialogOpen(false)} width="small"> +
+ + The anchor is positioned near the edge. The overlay should flip via position-try-fallbacks when it would + overflow the viewport. + + +
+ + )} +
+ ) +} + +export const WithinStickyElement = () => { + return ( +
+
+ Sticky Header + +
+
+ Scroll down to test that the overlay stays anchored to the button in the sticky header. +
+
+ ) +}