diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-dark-colorblind-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-dark-colorblind-linux.png
new file mode 100644
index 00000000000..3f081e1e965
Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-dark-dimmed-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-dark-dimmed-linux.png
new file mode 100644
index 00000000000..c7c8d797e8c
Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-dark-high-contrast-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..a0b26cf772a
Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-dark-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-dark-linux.png
new file mode 100644
index 00000000000..218d565a443
Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-dark-linux.png differ
diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-dark-tritanopia-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..1ed96a5fab2
Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-light-colorblind-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-light-colorblind-linux.png
new file mode 100644
index 00000000000..5919db86605
Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-light-high-contrast-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-light-high-contrast-linux.png
new file mode 100644
index 00000000000..c43a3346028
Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-light-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-light-linux.png
new file mode 100644
index 00000000000..245847c230a
Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-light-linux.png differ
diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-light-tritanopia-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-light-tritanopia-linux.png
new file mode 100644
index 00000000000..245847c230a
Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Css-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-dark-colorblind-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-dark-colorblind-linux.png
new file mode 100644
index 00000000000..6c5ba201253
Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-dark-dimmed-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-dark-dimmed-linux.png
new file mode 100644
index 00000000000..c01fc484d46
Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-dark-high-contrast-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..9ad15252c45
Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-dark-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-dark-linux.png
new file mode 100644
index 00000000000..c1c1bbbdcaf
Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-dark-linux.png differ
diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-dark-tritanopia-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..e1ba26b3432
Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-light-colorblind-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-light-colorblind-linux.png
new file mode 100644
index 00000000000..6b349f6f99e
Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-light-high-contrast-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-light-high-contrast-linux.png
new file mode 100644
index 00000000000..8140104a3c9
Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-light-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-light-linux.png
new file mode 100644
index 00000000000..1eb037b7505
Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-light-linux.png differ
diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-light-tritanopia-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-light-tritanopia-linux.png
new file mode 100644
index 00000000000..0d7c0aa0cb6
Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-And-Css-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-dark-colorblind-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-dark-colorblind-linux.png
new file mode 100644
index 00000000000..6b3922f91bc
Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-dark-dimmed-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-dark-dimmed-linux.png
new file mode 100644
index 00000000000..c01fc484d46
Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-dark-high-contrast-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..9ad15252c45
Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-dark-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-dark-linux.png
new file mode 100644
index 00000000000..c1c1bbbdcaf
Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-dark-linux.png differ
diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-dark-tritanopia-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..e1ba26b3432
Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-light-colorblind-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-light-colorblind-linux.png
new file mode 100644
index 00000000000..6b349f6f99e
Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-light-high-contrast-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-light-high-contrast-linux.png
new file mode 100644
index 00000000000..d70dfcce26a
Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-light-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-light-linux.png
new file mode 100644
index 00000000000..1eb037b7505
Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-light-linux.png differ
diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-light-tritanopia-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-light-tritanopia-linux.png
new file mode 100644
index 00000000000..0d7c0aa0cb6
Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Dev-With-Sx-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-colorblind-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-colorblind-linux.png
index af77e086c12..83e9d05a3b7 100644
Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-colorblind-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-dimmed-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-dimmed-linux.png
index d57ef3dc739..c86494d036d 100644
Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-dimmed-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-high-contrast-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-high-contrast-linux.png
index 9cbefc6f1ed..d613a25e861 100644
Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-high-contrast-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-linux.png
index 37fd1431f1f..83e9d05a3b7 100644
Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-linux.png differ
diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-tritanopia-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-tritanopia-linux.png
index af77e086c12..83e9d05a3b7 100644
Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-tritanopia-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-colorblind-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-colorblind-linux.png
index 56db03d54c1..a0ddc93abf8 100644
Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-colorblind-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-high-contrast-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-high-contrast-linux.png
index ca414be29c8..a2b7381d156 100644
Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-high-contrast-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-linux.png
index d6342f1e6d7..a0ddc93abf8 100644
Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-linux.png differ
diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-tritanopia-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-tritanopia-linux.png
index 56db03d54c1..a0ddc93abf8 100644
Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-tritanopia-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Loading-Items-light-tritanopia-linux.png differ
diff --git a/e2e/components/ActionMenu.test.ts b/e2e/components/ActionMenu.test.ts
index 17da8466c54..3c1cd045247 100644
--- a/e2e/components/ActionMenu.test.ts
+++ b/e2e/components/ActionMenu.test.ts
@@ -2,324 +2,109 @@ import {test, expect} from '@playwright/test'
 import {visit} from '../test-helpers/storybook'
 import {themes} from '../test-helpers/themes'
 
-test.describe('ActionMenu', () => {
-  test.describe('Default', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-actionmenu--default',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          // Open state
-          await page.getByRole('button', {name: 'Open menu'}).click()
-          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`ActionMenu.Default.${theme}.png`)
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-actionmenu--default',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await page.getByRole('button', {name: 'Open menu'}).click()
-          await expect(page).toHaveNoViolations()
-        })
-      })
-    }
-  })
-
-  test.describe('Inactive Items', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-actionmenu-features--inactive-items',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Open state
-          await page.locator('button', {hasText: 'Open menu'}).waitFor()
-          await page.getByRole('button', {name: 'Open menu'}).click()
-          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
-            `ActionMenu.Inactive Items.${theme}.png`,
-          )
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-actionmenu-features--inactive-items',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          // Open menu
-          await page.locator('button', {hasText: 'Open menu'}).waitFor()
-          await page.getByRole('button', {name: 'Open menu'}).click()
-          await expect(page).toHaveNoViolations()
-        })
-      })
-    }
-  })
-
-  test.describe('Links And Actions', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-actionmenu-features--links-and-actions',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Open state
-          await page.getByRole('button', {name: 'Open menu'}).click()
-          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
-            `ActionMenu.Links And Actions.${theme}.png`,
-          )
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-actionmenu-features--links-and-actions',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          // Open Menu
-          await page.getByRole('button', {name: 'Open menu'}).click()
-          await expect(page).toHaveNoViolations()
-        })
-      })
-    }
-  })
-
-  test.describe('Loading Items', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-actionmenu-features--loading-items',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Open menu
-          await page.locator('button', {hasText: 'Open menu'}).waitFor()
-          await page.getByRole('button', {name: 'Open menu'}).click()
-          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot()
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-actionmenu-features--loading-items',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations()
-        })
-      })
-    }
-  })
-
-  test.describe('Multi Select', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-actionmenu-features--multi-select',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Open state
-          await page.getByRole('button', {name: 'Display'}).click()
-          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
-            `ActionMenu.Multi Select.${theme}.png`,
-          )
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-actionmenu-features--multi-select',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Open state
-          await page.getByRole('button', {name: 'Display'}).click()
-          await expect(page).toHaveNoViolations()
-        })
-      })
-    }
-  })
-
-  test.describe('Single Select', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-actionmenu-features--single-select',
-            globals: {
-              colorScheme: theme,
-            },
-          })
+const stories: Array<{
+  title: string
+  id: string
+  buttonName?: string
+  skipOpen?: boolean
+}> = [
+  {
+    title: 'Default',
+    id: 'components-actionmenu--default',
+  },
+  {
+    title: 'Inactive Items',
+    id: 'components-actionmenu-features--inactive-items',
+  },
+  {
+    title: 'Links And Actions',
+    id: 'components-actionmenu-features--links-and-actions',
+  },
+  {
+    title: 'Loading Items',
+    id: 'components-actionmenu-features--loading-items',
+  },
+  {
+    title: 'Multi Select',
+    buttonName: 'Display',
+    id: 'components-actionmenu-features--multi-select',
+  },
+  {
+    title: 'Single Select',
+    buttonName: 'Options: fast Forward',
+    id: 'components-actionmenu-features--single-select',
+  },
+  {
+    title: 'Controlled Menu',
+    id: 'components-actionmenu-examples--controlled-menu',
+  },
+  {
+    title: 'Custom Anchor',
+    skipOpen: true,
+    id: 'components-actionmenu-examples--custom-anchor',
+  },
+  {
+    title: 'Custom Overlay Props',
+    skipOpen: true,
+    id: 'components-actionmenu-examples--custom-overlay-props',
+  },
+  {
+    title: 'Groups And Descriptions',
+    skipOpen: true,
+    id: 'components-actionmenu-examples--groups-and-descriptions',
+  },
+  {
+    title: 'Dev: With Css',
+    id: 'components-actionmenu-dev--with-css',
+  },
+  {
+    title: 'Dev: With Sx',
+    id: 'components-actionmenu-dev--with-sx',
+  },
+  {
+    title: 'Dev: With Sx And Css',
+    id: 'components-actionmenu-dev--with-sx-and-css',
+  },
+] as const
 
-          // Open state
-          await page.getByRole('button', {name: 'Options: fast Forward'}).click()
-          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
-            `ActionMenu.Single Select.${theme}.png`,
-          )
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-actionmenu-features--single-select',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Open state
-          await page.getByRole('button', {name: 'Options: fast Forward'}).click()
-          await expect(page).toHaveNoViolations()
-        })
-      })
-    }
-  })
-
-  test.describe('Controlled Menu', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-actionmenu-examples--controlled-menu',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          await page.getByRole('button', {name: 'Open Menu'}).click()
-          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
-            `ActionMenu.Controlled Menu.${theme}.png`,
-          )
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-actionmenu-examples--controlled-menu',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Open state
-          await page.getByRole('button', {name: 'Open Menu'}).click()
-          await expect(page).toHaveNoViolations()
-        })
-      })
-    }
-  })
-
-  test.describe('Custom Anchor', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-actionmenu-examples--custom-anchor',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
-            `ActionMenu.Custom Anchor.${theme}.png`,
-          )
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-actionmenu-examples--custom-anchor',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations()
-        })
-      })
-    }
-  })
-
-  test.describe('Custom Overlay Props', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-actionmenu-examples--custom-overlay-props',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
-            `ActionMenu.Custom Overlay Props.${theme}.png`,
-          )
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-actionmenu-examples--custom-overlay-props',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations()
-        })
-      })
-    }
-  })
-
-  test.describe('Groups And Descriptions', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-actionmenu-examples--groups-and-descriptions',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Open state
-          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
-            `ActionMenu.Groups And Descriptions.${theme}.png`,
-          )
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-actionmenu-examples--groups-and-descriptions',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Open state
-          await expect(page).toHaveNoViolations()
-        })
-      })
-    }
-  })
+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,
+              },
+            })
+
+            const buttonName = story.buttonName ?? 'Open menu'
+
+            // 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`,
+            )
+          })
+
+          test('axe @aat', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+            })
+            await expect(page).toHaveNoViolations()
+          })
+        })
+      }
+    })
+  }
 })
diff --git a/packages/react/src/ActionMenu/ActionMenu.dev.stories.tsx b/packages/react/src/ActionMenu/ActionMenu.dev.stories.tsx
new file mode 100644
index 00000000000..bf4a8e654e6
--- /dev/null
+++ b/packages/react/src/ActionMenu/ActionMenu.dev.stories.tsx
@@ -0,0 +1,122 @@
+import React from 'react'
+import type {Meta} from '@storybook/react'
+import type {ComponentProps} from '../utils/types'
+import {ActionMenu} from './ActionMenu'
+import {ActionList} from '../ActionList'
+import {FeatureFlags} from '../FeatureFlags'
+
+export default {
+  title: 'Components/ActionMenu/Dev',
+  component: ActionMenu,
+} as Meta<ComponentProps<typeof ActionMenu>>
+
+export const WithCss = () => (
+  <FeatureFlags
+    flags={{
+      primer_react_css_modules_team: true,
+      primer_react_css_modules_staff: true,
+      primer_react_css_modules_ga: true,
+    }}
+  >
+    <ActionMenu>
+      <ActionMenu.Button className="testCustomClassnameColor">Open menu</ActionMenu.Button>
+      <ActionMenu.Overlay width="medium" className="testCustomClassnameBorder">
+        <ActionList>
+          <ActionList.Item onSelect={() => alert('Copy link clicked')}>
+            Copy link
+            <ActionList.TrailingVisual>⌘C</ActionList.TrailingVisual>
+          </ActionList.Item>
+          <ActionList.Item onSelect={() => alert('Quote reply clicked')}>
+            Quote reply
+            <ActionList.TrailingVisual>⌘Q</ActionList.TrailingVisual>
+          </ActionList.Item>
+          <ActionList.Item onSelect={() => alert('Edit comment clicked')}>
+            Edit comment
+            <ActionList.TrailingVisual>⌘E</ActionList.TrailingVisual>
+          </ActionList.Item>
+          <ActionList.Divider />
+          <ActionList.Item variant="danger" onSelect={() => alert('Delete file clicked')}>
+            Delete file
+            <ActionList.TrailingVisual>⌘D</ActionList.TrailingVisual>
+          </ActionList.Item>
+        </ActionList>
+      </ActionMenu.Overlay>
+    </ActionMenu>
+  </FeatureFlags>
+)
+
+export const WithSx = () => (
+  <FeatureFlags
+    flags={{
+      primer_react_css_modules_team: true,
+      primer_react_css_modules_staff: true,
+      primer_react_css_modules_ga: true,
+    }}
+  >
+    <ActionMenu>
+      <ActionMenu.Button sx={{color: 'success.emphasis'}}>Open menu</ActionMenu.Button>
+      <ActionMenu.Overlay width="medium" sx={{border: '1px solid', borderColor: 'success.emphasis'}}>
+        <ActionList>
+          <ActionList.Item onSelect={() => alert('Copy link clicked')}>
+            Copy link
+            <ActionList.TrailingVisual>⌘C</ActionList.TrailingVisual>
+          </ActionList.Item>
+          <ActionList.Item onSelect={() => alert('Quote reply clicked')}>
+            Quote reply
+            <ActionList.TrailingVisual>⌘Q</ActionList.TrailingVisual>
+          </ActionList.Item>
+          <ActionList.Item onSelect={() => alert('Edit comment clicked')}>
+            Edit comment
+            <ActionList.TrailingVisual>⌘E</ActionList.TrailingVisual>
+          </ActionList.Item>
+          <ActionList.Divider />
+          <ActionList.Item variant="danger" onSelect={() => alert('Delete file clicked')}>
+            Delete file
+            <ActionList.TrailingVisual>⌘D</ActionList.TrailingVisual>
+          </ActionList.Item>
+        </ActionList>
+      </ActionMenu.Overlay>
+    </ActionMenu>
+  </FeatureFlags>
+)
+
+export const WithSxAndCSS = () => (
+  <FeatureFlags
+    flags={{
+      primer_react_css_modules_team: true,
+      primer_react_css_modules_staff: true,
+      primer_react_css_modules_ga: true,
+    }}
+  >
+    <ActionMenu>
+      <ActionMenu.Button sx={{color: 'success.emphasis'}} className="testCustomClassnameColor">
+        Open menu
+      </ActionMenu.Button>
+      <ActionMenu.Overlay
+        width="medium"
+        className="testCustomClassnameBorder"
+        sx={{border: '1px solid', borderColor: 'success.emphasis'}}
+      >
+        <ActionList>
+          <ActionList.Item onSelect={() => alert('Copy link clicked')}>
+            Copy link
+            <ActionList.TrailingVisual>⌘C</ActionList.TrailingVisual>
+          </ActionList.Item>
+          <ActionList.Item onSelect={() => alert('Quote reply clicked')}>
+            Quote reply
+            <ActionList.TrailingVisual>⌘Q</ActionList.TrailingVisual>
+          </ActionList.Item>
+          <ActionList.Item onSelect={() => alert('Edit comment clicked')}>
+            Edit comment
+            <ActionList.TrailingVisual>⌘E</ActionList.TrailingVisual>
+          </ActionList.Item>
+          <ActionList.Divider />
+          <ActionList.Item variant="danger" onSelect={() => alert('Delete file clicked')}>
+            Delete file
+            <ActionList.TrailingVisual>⌘D</ActionList.TrailingVisual>
+          </ActionList.Item>
+        </ActionList>
+      </ActionMenu.Overlay>
+    </ActionMenu>
+  </FeatureFlags>
+)
diff --git a/packages/react/src/__tests__/ActionMenu.test.tsx b/packages/react/src/__tests__/ActionMenu.test.tsx
index 8c8d372e403..29b4e165dea 100644
--- a/packages/react/src/__tests__/ActionMenu.test.tsx
+++ b/packages/react/src/__tests__/ActionMenu.test.tsx
@@ -641,6 +641,64 @@ describe('ActionMenu', () => {
 
       expect(baseAnchor).not.toHaveAttribute('aria-expanded', 'true')
     })
+
+    it('supports className prop on ActionMenu.Anchor', async () => {
+      const component = HTMLRender(
+        <ThemeProvider theme={theme}>
+          <BaseStyles>
+            <ActionMenu>
+              <ActionMenu.Anchor className="test-class">
+                <Button>Toggle Menu</Button>
+              </ActionMenu.Anchor>
+              <ActionMenu.Overlay>
+                <ActionList>
+                  <ActionList.Item>New file</ActionList.Item>
+                  <ActionList.Divider />
+                  <ActionList.Item>Copy link</ActionList.Item>
+                  <ActionList.Item>Edit file</ActionList.Item>
+                  <ActionList.Item variant="danger" onSelect={event => event.preventDefault()}>
+                    Delete file
+                  </ActionList.Item>
+                  <ActionList.LinkItem href="//github.com" title="anchor" aria-keyshortcuts="s">
+                    Github
+                  </ActionList.LinkItem>
+                </ActionList>
+              </ActionMenu.Overlay>
+            </ActionMenu>
+          </BaseStyles>
+        </ThemeProvider>,
+      )
+      const anchor = component.getByRole('button', {name: 'Toggle Menu'})
+      expect(anchor).toHaveClass('test-class')
+    })
+
+    it('supports className prop on ActionMenu.Button', async () => {
+      const component = HTMLRender(
+        <ThemeProvider theme={theme}>
+          <BaseStyles>
+            <ActionMenu>
+              <ActionMenu.Button className="test-class">Toggle Menu</ActionMenu.Button>
+              <ActionMenu.Overlay>
+                <ActionList>
+                  <ActionList.Item>New file</ActionList.Item>
+                  <ActionList.Divider />
+                  <ActionList.Item>Copy link</ActionList.Item>
+                  <ActionList.Item>Edit file</ActionList.Item>
+                  <ActionList.Item variant="danger" onSelect={event => event.preventDefault()}>
+                    Delete file
+                  </ActionList.Item>
+                  <ActionList.LinkItem href="//github.com" title="anchor" aria-keyshortcuts="s">
+                    Github
+                  </ActionList.LinkItem>
+                </ActionList>
+              </ActionMenu.Overlay>
+            </ActionMenu>
+          </BaseStyles>
+        </ThemeProvider>,
+      )
+      const button = component.getByRole('button', {name: 'Toggle Menu'})
+      expect(button).toHaveClass('test-class')
+    })
   })
 
   describe('calls event handlers on trigger', () => {