diff --git a/.changeset/sour-cooks-dress.md b/.changeset/sour-cooks-dress.md
new file mode 100644
index 00000000000..e5dcb643226
--- /dev/null
+++ b/.changeset/sour-cooks-dress.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+SelectPanel: Update SelectPanel to use modern ActionList behind a feature flag `primer_react_select_panel_with_modern_action_list`
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-dark-colorblind-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-dark-colorblind-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..2ba34a0ccb3
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-dark-colorblind-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-dark-dimmed-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-dark-dimmed-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..b40fa0c97cf
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-dark-dimmed-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-dark-high-contrast-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-dark-high-contrast-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..410eae5378e
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-dark-high-contrast-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-dark-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-dark-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..2ba34a0ccb3
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-dark-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-dark-tritanopia-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-dark-tritanopia-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..2ba34a0ccb3
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-dark-tritanopia-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-light-colorblind-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-light-colorblind-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..b1064331250
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-light-colorblind-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-light-high-contrast-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-light-high-contrast-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..845b61ba941
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-light-high-contrast-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-light-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-light-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..b1064331250
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-light-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-light-tritanopia-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-light-tritanopia-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..b1064331250
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Above-Tall-Body-light-tritanopia-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-colorblind-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-colorblind-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..6bab4fb23dc
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-colorblind-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-dimmed-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-dimmed-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..b2e5c476252
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-dimmed-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-high-contrast-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-high-contrast-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..4db094bf4c0
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-high-contrast-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..6bab4fb23dc
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-tritanopia-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-tritanopia-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..6bab4fb23dc
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-tritanopia-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-light-colorblind-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-light-colorblind-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..732d18f5ba4
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-light-colorblind-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-light-high-contrast-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-light-high-contrast-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..25817585a80
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-light-high-contrast-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-light-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-light-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..732d18f5ba4
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-light-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-light-tritanopia-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-light-tritanopia-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..732d18f5ba4
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-light-tritanopia-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-dark-colorblind-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-dark-colorblind-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..8c3d13469d1
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-dark-colorblind-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-dark-dimmed-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-dark-dimmed-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..da2077b11a9
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-dark-dimmed-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-dark-high-contrast-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-dark-high-contrast-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..fa932532a0e
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-dark-high-contrast-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-dark-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-dark-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..8c3d13469d1
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-dark-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-dark-tritanopia-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-dark-tritanopia-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..8c3d13469d1
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-dark-tritanopia-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-light-colorblind-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-light-colorblind-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..04b2d75b6d0
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-light-colorblind-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-light-high-contrast-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-light-high-contrast-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..f412927ebfd
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-light-high-contrast-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-light-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-light-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..04b2d75b6d0
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-light-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-light-tritanopia-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-light-tritanopia-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..04b2d75b6d0
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-light-tritanopia-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Overflowing-Items-dark-colorblind-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Overflowing-Items-dark-colorblind-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..d4e05643bb9
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Overflowing-Items-dark-colorblind-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Overflowing-Items-dark-dimmed-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Overflowing-Items-dark-dimmed-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..c69e10f5274
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Overflowing-Items-dark-dimmed-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Overflowing-Items-dark-high-contrast-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Overflowing-Items-dark-high-contrast-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..5c619b82051
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Overflowing-Items-dark-high-contrast-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Overflowing-Items-dark-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Overflowing-Items-dark-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..d4e05643bb9
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Overflowing-Items-dark-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Overflowing-Items-dark-tritanopia-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Overflowing-Items-dark-tritanopia-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..d4e05643bb9
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Overflowing-Items-dark-tritanopia-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Overflowing-Items-light-colorblind-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Overflowing-Items-light-colorblind-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..81c046f815b
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Overflowing-Items-light-colorblind-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Overflowing-Items-light-high-contrast-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Overflowing-Items-light-high-contrast-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..cb7bacf96ad
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Overflowing-Items-light-high-contrast-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Overflowing-Items-light-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Overflowing-Items-light-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..81c046f815b
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Overflowing-Items-light-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Overflowing-Items-light-tritanopia-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Overflowing-Items-light-tritanopia-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..81c046f815b
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Overflowing-Items-light-tritanopia-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-After-Fetch-dark-colorblind-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-After-Fetch-dark-colorblind-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..f745c6b6750
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-After-Fetch-dark-colorblind-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-After-Fetch-dark-dimmed-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-After-Fetch-dark-dimmed-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..dd9ed5215ba
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-After-Fetch-dark-dimmed-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-After-Fetch-dark-high-contrast-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-After-Fetch-dark-high-contrast-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..80159d482d4
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-After-Fetch-dark-high-contrast-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-After-Fetch-dark-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-After-Fetch-dark-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..f745c6b6750
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-After-Fetch-dark-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-After-Fetch-dark-tritanopia-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-After-Fetch-dark-tritanopia-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..f745c6b6750
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-After-Fetch-dark-tritanopia-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-After-Fetch-light-colorblind-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-After-Fetch-light-colorblind-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..07a2a90e169
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-After-Fetch-light-colorblind-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-After-Fetch-light-high-contrast-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-After-Fetch-light-high-contrast-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..1d69edbed3b
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-After-Fetch-light-high-contrast-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-After-Fetch-light-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-After-Fetch-light-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..07a2a90e169
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-After-Fetch-light-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-After-Fetch-light-tritanopia-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-After-Fetch-light-tritanopia-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..07a2a90e169
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-After-Fetch-light-tritanopia-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-dark-colorblind-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-dark-colorblind-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..e95d5c9657a
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-dark-colorblind-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-dark-dimmed-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-dark-dimmed-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..af8c42ce212
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-dark-dimmed-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-dark-high-contrast-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-dark-high-contrast-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..3ac4204d6e4
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-dark-high-contrast-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-dark-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-dark-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..e95d5c9657a
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-dark-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-dark-tritanopia-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-dark-tritanopia-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..e95d5c9657a
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-dark-tritanopia-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-light-colorblind-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-light-colorblind-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..8cff07a8436
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-light-colorblind-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-light-high-contrast-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-light-high-contrast-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..41ab0cc5e97
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-light-high-contrast-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-light-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-light-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..8cff07a8436
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-light-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-light-tritanopia-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-light-tritanopia-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..8cff07a8436
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Initial-with-Underflowing-Items-light-tritanopia-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variantions-and-Scroll-dark-colorblind-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variantions-and-Scroll-dark-colorblind-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..f12cd5056ea
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variantions-and-Scroll-dark-colorblind-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variantions-and-Scroll-dark-dimmed-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variantions-and-Scroll-dark-dimmed-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..66e518072ac
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variantions-and-Scroll-dark-dimmed-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variantions-and-Scroll-dark-high-contrast-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variantions-and-Scroll-dark-high-contrast-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..c27e28b78b9
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variantions-and-Scroll-dark-high-contrast-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variantions-and-Scroll-dark-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variantions-and-Scroll-dark-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..f12cd5056ea
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variantions-and-Scroll-dark-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variantions-and-Scroll-dark-tritanopia-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variantions-and-Scroll-dark-tritanopia-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..f12cd5056ea
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variantions-and-Scroll-dark-tritanopia-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variantions-and-Scroll-light-colorblind-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variantions-and-Scroll-light-colorblind-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..e7359bb0a4b
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variantions-and-Scroll-light-colorblind-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variantions-and-Scroll-light-high-contrast-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variantions-and-Scroll-light-high-contrast-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..ecfeaf37f8d
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variantions-and-Scroll-light-high-contrast-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variantions-and-Scroll-light-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variantions-and-Scroll-light-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..e7359bb0a4b
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variantions-and-Scroll-light-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variantions-and-Scroll-light-tritanopia-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variantions-and-Scroll-light-tritanopia-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..e7359bb0a4b
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Height-Variantions-and-Scroll-light-tritanopia-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-dark-colorblind-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-dark-colorblind-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..d4e05643bb9
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-dark-colorblind-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-dark-dimmed-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-dark-dimmed-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..c69e10f5274
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-dark-dimmed-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-dark-high-contrast-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-dark-high-contrast-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..5c619b82051
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-dark-high-contrast-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-dark-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-dark-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..d4e05643bb9
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-dark-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-dark-tritanopia-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-dark-tritanopia-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..d4e05643bb9
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-dark-tritanopia-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-light-colorblind-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-light-colorblind-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..81c046f815b
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-light-colorblind-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-light-high-contrast-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-light-high-contrast-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..cb7bacf96ad
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-light-high-contrast-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-light-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-light-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..81c046f815b
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-light-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-light-tritanopia-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-light-tritanopia-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..81c046f815b
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-light-tritanopia-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-dark-colorblind-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-dark-colorblind-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..b468069129d
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-dark-colorblind-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-dark-dimmed-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-dark-dimmed-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..750e52b8a1f
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-dark-dimmed-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-dark-high-contrast-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-dark-high-contrast-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..0a012c0a80d
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-dark-high-contrast-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-dark-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-dark-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..b468069129d
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-dark-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-dark-tritanopia-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-dark-tritanopia-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..b468069129d
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-dark-tritanopia-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-light-colorblind-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-light-colorblind-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..28d87f83935
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-light-colorblind-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-light-high-contrast-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-light-high-contrast-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..4dc028462f5
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-light-high-contrast-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-light-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-light-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..28d87f83935
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-light-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-light-tritanopia-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-light-tritanopia-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..28d87f83935
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Footer-light-tritanopia-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Groups-dark-colorblind-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Groups-dark-colorblind-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..803261d52f8
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Groups-dark-colorblind-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Groups-dark-dimmed-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Groups-dark-dimmed-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..5169e4696c1
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Groups-dark-dimmed-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Groups-dark-high-contrast-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Groups-dark-high-contrast-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..45ca07a94fe
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Groups-dark-high-contrast-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Groups-dark-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Groups-dark-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..803261d52f8
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Groups-dark-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Groups-dark-tritanopia-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Groups-dark-tritanopia-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..803261d52f8
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Groups-dark-tritanopia-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Groups-light-colorblind-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Groups-light-colorblind-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..3f410fa3492
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Groups-light-colorblind-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Groups-light-high-contrast-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Groups-light-high-contrast-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..8bb4356b45f
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Groups-light-high-contrast-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Groups-light-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Groups-light-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..3f410fa3492
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Groups-light-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Groups-light-tritanopia-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Groups-light-tritanopia-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..3f410fa3492
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Groups-light-tritanopia-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Item-Dividers-dark-colorblind-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Item-Dividers-dark-colorblind-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..05339bb6c5d
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Item-Dividers-dark-colorblind-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Item-Dividers-dark-dimmed-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Item-Dividers-dark-dimmed-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..463c47001ee
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Item-Dividers-dark-dimmed-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Item-Dividers-dark-high-contrast-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Item-Dividers-dark-high-contrast-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..e69dc6fd293
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Item-Dividers-dark-high-contrast-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Item-Dividers-dark-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Item-Dividers-dark-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..05339bb6c5d
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Item-Dividers-dark-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Item-Dividers-dark-tritanopia-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Item-Dividers-dark-tritanopia-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..05339bb6c5d
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Item-Dividers-dark-tritanopia-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Item-Dividers-light-colorblind-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Item-Dividers-light-colorblind-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..c5e8b1f576a
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Item-Dividers-light-colorblind-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Item-Dividers-light-high-contrast-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Item-Dividers-light-high-contrast-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..889ef739045
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Item-Dividers-light-high-contrast-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Item-Dividers-light-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Item-Dividers-light-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..c5e8b1f576a
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Item-Dividers-light-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Item-Dividers-light-tritanopia-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Item-Dividers-light-tritanopia-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..c5e8b1f576a
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Item-Dividers-light-tritanopia-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-Select-dark-colorblind-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-Select-dark-colorblind-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..0e836262a33
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-Select-dark-colorblind-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-Select-dark-dimmed-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-Select-dark-dimmed-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..17107ff321b
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-Select-dark-dimmed-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-Select-dark-high-contrast-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-Select-dark-high-contrast-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..9b6c4ea716c
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-Select-dark-high-contrast-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-Select-dark-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-Select-dark-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..0e836262a33
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-Select-dark-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-Select-dark-tritanopia-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-Select-dark-tritanopia-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..0e836262a33
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-Select-dark-tritanopia-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-Select-light-colorblind-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-Select-light-colorblind-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..e4fd9be2a55
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-Select-light-colorblind-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-Select-light-high-contrast-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-Select-light-high-contrast-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..fb52dfba609
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-Select-light-high-contrast-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-Select-light-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-Select-light-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..e4fd9be2a55
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-Select-light-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-Select-light-tritanopia-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-Select-light-tritanopia-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..e4fd9be2a55
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-Select-light-tritanopia-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-for-Search-Input-dark-colorblind-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-for-Search-Input-dark-colorblind-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..8b026fc8267
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-for-Search-Input-dark-colorblind-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-for-Search-Input-dark-dimmed-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-for-Search-Input-dark-dimmed-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..ec14e5173b3
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-for-Search-Input-dark-dimmed-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-for-Search-Input-dark-high-contrast-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-for-Search-Input-dark-high-contrast-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..64b3b33d98d
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-for-Search-Input-dark-high-contrast-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-for-Search-Input-dark-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-for-Search-Input-dark-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..8b026fc8267
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-for-Search-Input-dark-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-for-Search-Input-dark-tritanopia-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-for-Search-Input-dark-tritanopia-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..8b026fc8267
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-for-Search-Input-dark-tritanopia-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-for-Search-Input-light-colorblind-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-for-Search-Input-light-colorblind-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..1a28d121de6
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-for-Search-Input-light-colorblind-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-for-Search-Input-light-high-contrast-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-for-Search-Input-light-high-contrast-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..ad704b64404
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-for-Search-Input-light-high-contrast-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-for-Search-Input-light-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-for-Search-Input-light-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..1a28d121de6
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-for-Search-Input-light-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-for-Search-Input-light-tritanopia-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-for-Search-Input-light-tritanopia-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..1a28d121de6
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Placeholder-for-Search-Input-light-tritanopia-modern-action-list--true-linux.png differ
diff --git a/e2e/components/SelectPanel.test.ts b/e2e/components/SelectPanel.test.ts
index 88d2e69c111..e4f61864b17 100644
--- a/e2e/components/SelectPanel.test.ts
+++ b/e2e/components/SelectPanel.test.ts
@@ -5,6 +5,7 @@ import {matrix} from '../test-helpers/matrix'
 
 const scenarios = matrix({
   theme: themes,
+  modernActionList: [false, true],
   story: [
     {id: 'components-selectpanel--default', name: 'Default'},
     {id: 'components-selectpanel-features--single-select', name: 'Single Select'},
@@ -38,21 +39,23 @@ test.describe('SelectPanel', () => {
   for (const scenario of scenarios) {
     const name = scenario.story.name
     const theme = scenario.theme
+    const flag = scenario.modernActionList ? `.modern-action-list--${scenario.modernActionList}` : ''
 
     const globals = {
       colorScheme: scenario.theme,
+      featureFlags: {primer_react_select_panel_with_modern_action_list: scenario.modernActionList},
     }
 
-    test(`${name} @vrt ${theme}`, async ({page}) => {
+    test(`${name} @vrt ${theme} ${flag}`, async ({page}) => {
       await visit(page, {id: scenario.story.id, globals})
 
       // Open select panel
       await page.keyboard.press('Tab')
       await page.keyboard.press('Enter')
-      expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`SelectPanel.${name}.${theme}.png`)
+      expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`SelectPanel.${name}.${theme}${flag}.png`)
     })
 
-    test(`${name} axe @aat ${theme}`, async ({page}) => {
+    test(`${name} axe @aat ${theme} ${flag}`, async ({page}) => {
       await visit(page, {id: scenario.story.id, globals})
       await expect(page).toHaveNoViolations()
     })
diff --git a/packages/react/src/ActionList/Item.tsx b/packages/react/src/ActionList/Item.tsx
index a8884739d99..8e3da1de68a 100644
--- a/packages/react/src/ActionList/Item.tsx
+++ b/packages/react/src/ActionList/Item.tsx
@@ -229,7 +229,11 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
       '&:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + &, &[data-focus-visible-added] + li': {
         '--divider-color': 'transparent',
       },
-      ...(active ? activeStyles : {}),
+
+      /** Active styles */
+      ...(active ? activeStyles : {}), // NavList
+      '&[data-is-active-descendant]': activeStyles, // SelectPanel
+
       ...(!buttonSemantics ? hoverStyles : {}),
     }
 
diff --git a/packages/react/src/FeatureFlags/DefaultFeatureFlags.ts b/packages/react/src/FeatureFlags/DefaultFeatureFlags.ts
index 328c106bc17..3ab756ea60f 100644
--- a/packages/react/src/FeatureFlags/DefaultFeatureFlags.ts
+++ b/packages/react/src/FeatureFlags/DefaultFeatureFlags.ts
@@ -5,4 +5,5 @@ export const DefaultFeatureFlags = FeatureFlagScope.create({
   primer_react_css_modules_staff: false,
   primer_react_css_modules_ga: false,
   primer_react_action_list_item_as_button: false,
+  primer_react_select_panel_with_modern_action_list: false,
 })
diff --git a/packages/react/src/FilteredActionList/FilteredActionListEntry.tsx b/packages/react/src/FilteredActionList/FilteredActionListEntry.tsx
new file mode 100644
index 00000000000..450608c6b0a
--- /dev/null
+++ b/packages/react/src/FilteredActionList/FilteredActionListEntry.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import type {FilteredActionListProps} from './FilteredActionListWithDeprecatedActionList'
+import {FilteredActionList as WithDeprecatedActionList} from './FilteredActionListWithDeprecatedActionList'
+import {FilteredActionList as WithStableActionList} from './FilteredActionListWithModernActionList'
+import {useFeatureFlag} from '../FeatureFlags'
+
+export function FilteredActionList(props: FilteredActionListProps): JSX.Element {
+  const enabled = useFeatureFlag('primer_react_select_panel_with_modern_action_list')
+
+  if (enabled) return <WithStableActionList {...props} />
+  else return <WithDeprecatedActionList {...props} />
+}
+
+FilteredActionList.displayName = 'FilteredActionList'
+
+export type {FilteredActionListProps}
diff --git a/packages/react/src/FilteredActionList/FilteredActionList.tsx b/packages/react/src/FilteredActionList/FilteredActionListWithDeprecatedActionList.tsx
similarity index 100%
rename from packages/react/src/FilteredActionList/FilteredActionList.tsx
rename to packages/react/src/FilteredActionList/FilteredActionListWithDeprecatedActionList.tsx
diff --git a/packages/react/src/FilteredActionList/FilteredActionListWithModernActionList.tsx b/packages/react/src/FilteredActionList/FilteredActionListWithModernActionList.tsx
new file mode 100644
index 00000000000..0d99b359275
--- /dev/null
+++ b/packages/react/src/FilteredActionList/FilteredActionListWithModernActionList.tsx
@@ -0,0 +1,233 @@
+import type {ScrollIntoViewOptions} from '@primer/behaviors'
+import {scrollIntoView} from '@primer/behaviors'
+import type {KeyboardEventHandler} from 'react'
+import React, {useCallback, useEffect, useRef} from 'react'
+import styled from 'styled-components'
+import Box from '../Box'
+import Spinner from '../Spinner'
+import type {TextInputProps} from '../TextInput'
+import TextInput from '../TextInput'
+import {get} from '../constants'
+import {ActionList} from '../ActionList'
+import type {GroupedListProps, ListPropsBase, ItemInput} from '../SelectPanel/types'
+import {useFocusZone} from '../hooks/useFocusZone'
+import {useId} from '../hooks/useId'
+import {useProvidedRefOrCreate} from '../hooks/useProvidedRefOrCreate'
+import {useProvidedStateOrCreate} from '../hooks/useProvidedStateOrCreate'
+import useScrollFlash from '../hooks/useScrollFlash'
+import {VisuallyHidden} from '../internal/components/VisuallyHidden'
+import type {SxProp} from '../sx'
+
+import {isValidElementType} from 'react-is'
+import type {RenderItemFn} from '../deprecated/ActionList/List'
+
+const menuScrollMargins: ScrollIntoViewOptions = {startMargin: 0, endMargin: 8}
+
+export interface FilteredActionListProps
+  extends Partial<Omit<GroupedListProps, keyof ListPropsBase>>,
+    ListPropsBase,
+    SxProp {
+  loading?: boolean
+  placeholderText?: string
+  filterValue?: string
+  onFilterChange: (value: string, e: React.ChangeEvent<HTMLInputElement>) => void
+  textInputProps?: Partial<Omit<TextInputProps, 'onChange'>>
+  inputRef?: React.RefObject<HTMLInputElement>
+}
+
+const StyledHeader = styled.div`
+  box-shadow: 0 1px 0 ${get('colors.border.default')};
+  z-index: 1;
+`
+
+export function FilteredActionList({
+  loading = false,
+  placeholderText,
+  filterValue: externalFilterValue,
+  onFilterChange,
+  items,
+  textInputProps,
+  inputRef: providedInputRef,
+  sx,
+  groupMetadata,
+  showItemDividers,
+  ...listProps
+}: FilteredActionListProps): JSX.Element {
+  const [filterValue, setInternalFilterValue] = useProvidedStateOrCreate(externalFilterValue, undefined, '')
+  const onInputChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = e.target.value
+      onFilterChange(value, e)
+      setInternalFilterValue(value)
+    },
+    [onFilterChange, setInternalFilterValue],
+  )
+
+  const scrollContainerRef = useRef<HTMLDivElement>(null)
+  const listContainerRef = useRef<HTMLUListElement>(null)
+  const inputRef = useProvidedRefOrCreate<HTMLInputElement>(providedInputRef)
+  const activeDescendantRef = useRef<HTMLElement>()
+  const listId = useId()
+  const inputDescriptionTextId = useId()
+  const onInputKeyPress: KeyboardEventHandler = useCallback(
+    event => {
+      if (event.key === 'Enter' && activeDescendantRef.current) {
+        event.preventDefault()
+        event.nativeEvent.stopImmediatePropagation()
+
+        // Forward Enter key press to active descendant so that item gets activated
+        const activeDescendantEvent = new KeyboardEvent(event.type, event.nativeEvent)
+        activeDescendantRef.current.dispatchEvent(activeDescendantEvent)
+      }
+    },
+    [activeDescendantRef],
+  )
+
+  useFocusZone(
+    {
+      containerRef: listContainerRef,
+      focusOutBehavior: 'wrap',
+      focusableElementFilter: element => {
+        return !(element instanceof HTMLInputElement)
+      },
+      activeDescendantFocus: inputRef,
+      onActiveDescendantChanged: (current, previous, directlyActivated) => {
+        activeDescendantRef.current = current
+
+        if (current && scrollContainerRef.current && directlyActivated) {
+          scrollIntoView(current, scrollContainerRef.current, menuScrollMargins)
+        }
+      },
+    },
+    [
+      // List ref isn't set while loading.  Need to re-bind focus zone when it changes
+      loading,
+    ],
+  )
+
+  useEffect(() => {
+    // if items changed, we want to instantly move active descendant into view
+    if (activeDescendantRef.current && scrollContainerRef.current) {
+      scrollIntoView(activeDescendantRef.current, scrollContainerRef.current, {...menuScrollMargins, behavior: 'auto'})
+    }
+  }, [items])
+
+  useScrollFlash(scrollContainerRef)
+
+  function getItemListForEachGroup(groupId: string) {
+    const itemsInGroup = []
+    for (const item of items) {
+      // Look up the group associated with the current item.
+      if (item.groupId === groupId) {
+        itemsInGroup.push(item)
+      }
+    }
+    return itemsInGroup
+  }
+
+  return (
+    <Box display="flex" flexDirection="column" overflow="hidden" sx={sx}>
+      <StyledHeader>
+        <TextInput
+          ref={inputRef}
+          block
+          width="auto"
+          color="fg.default"
+          value={filterValue}
+          onChange={onInputChange}
+          onKeyPress={onInputKeyPress}
+          placeholder={placeholderText}
+          aria-label={placeholderText}
+          aria-controls={listId}
+          aria-describedby={inputDescriptionTextId}
+          {...textInputProps}
+        />
+      </StyledHeader>
+      <VisuallyHidden id={inputDescriptionTextId}>Items will be filtered as you type</VisuallyHidden>
+      <Box ref={scrollContainerRef} overflow="auto">
+        {loading ? (
+          <Box width="100%" display="flex" flexDirection="row" justifyContent="center" pt={6} pb={7}>
+            <Spinner />
+          </Box>
+        ) : (
+          <ActionList ref={listContainerRef} showDividers={showItemDividers} {...listProps} role="listbox" id={listId}>
+            {groupMetadata?.length
+              ? groupMetadata.map((group, index) => {
+                  return (
+                    <ActionList.Group key={index}>
+                      <ActionList.GroupHeading variant={group.header?.variant ? group.header.variant : undefined}>
+                        {group.header?.title ? group.header.title : `Group ${group.groupId}`}
+                      </ActionList.GroupHeading>
+                      {getItemListForEachGroup(group.groupId).map((item, index) => {
+                        return <MappedActionListItem key={index} {...item} renderItem={listProps.renderItem} />
+                      })}
+                    </ActionList.Group>
+                  )
+                })
+              : items.map((item, index) => {
+                  return <MappedActionListItem key={index} {...item} renderItem={listProps.renderItem} />
+                })}
+          </ActionList>
+        )}
+      </Box>
+    </Box>
+  )
+}
+
+function MappedActionListItem(item: ItemInput & {renderItem?: RenderItemFn}) {
+  // keep backward compatibility for renderItem
+  // escape hatch for custom Item rendering
+  if (typeof item.renderItem === 'function') return item.renderItem(item)
+
+  const {
+    id,
+    description,
+    descriptionVariant,
+    text,
+    trailingVisual: TrailingVisual,
+    leadingVisual: LeadingVisual,
+    trailingText,
+    trailingIcon: TrailingIcon,
+    onAction,
+    children,
+    ...rest
+  } = item
+
+  return (
+    <ActionList.Item
+      role="option"
+      // @ts-ignore - for now
+      onSelect={(e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => {
+        if (typeof onAction === 'function')
+          onAction(item, e as React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>)
+      }}
+      data-id={id}
+      {...rest}
+    >
+      {LeadingVisual ? (
+        <ActionList.LeadingVisual>
+          <LeadingVisual />
+        </ActionList.LeadingVisual>
+      ) : null}
+      {children}
+      {text}
+      {description ? <ActionList.Description variant={descriptionVariant}>{description}</ActionList.Description> : null}
+      {TrailingVisual ? (
+        <ActionList.TrailingVisual>
+          {typeof TrailingVisual !== 'string' && isValidElementType(TrailingVisual) ? (
+            <TrailingVisual />
+          ) : (
+            TrailingVisual
+          )}
+        </ActionList.TrailingVisual>
+      ) : TrailingIcon || trailingText ? (
+        <ActionList.TrailingVisual>
+          {trailingText}
+          {TrailingIcon && <TrailingIcon />}
+        </ActionList.TrailingVisual>
+      ) : null}
+    </ActionList.Item>
+  )
+}
+
+FilteredActionList.displayName = 'FilteredActionList'
diff --git a/packages/react/src/FilteredActionList/index.ts b/packages/react/src/FilteredActionList/index.ts
index 3f8176fe71c..e65c2704c87 100644
--- a/packages/react/src/FilteredActionList/index.ts
+++ b/packages/react/src/FilteredActionList/index.ts
@@ -1,2 +1,2 @@
-export {FilteredActionList} from './FilteredActionList'
-export type {FilteredActionListProps} from './FilteredActionList'
+export {FilteredActionList} from './FilteredActionListEntry'
+export type {FilteredActionListProps} from './FilteredActionListEntry'
diff --git a/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap b/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap
index 0444eca4c9b..76ad7525713 100644
--- a/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap
+++ b/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap
@@ -135,6 +135,22 @@ exports[`NavList renders a simple list 1`] = `
   border-radius: 6px;
 }
 
+.c2[data-is-active-descendant] {
+  font-weight: 600;
+  background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
+}
+
+.c2[data-is-active-descendant]::after {
+  position: absolute;
+  top: calc(50% - 12px);
+  left: -8px;
+  width: 4px;
+  height: 24px;
+  content: "";
+  background-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  border-radius: 6px;
+}
+
 .c7 {
   position: relative;
   display: -webkit-box;
@@ -216,6 +232,22 @@ exports[`NavList renders a simple list 1`] = `
   --divider-color: transparent;
 }
 
+.c7[data-is-active-descendant] {
+  font-weight: 600;
+  background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
+}
+
+.c7[data-is-active-descendant]::after {
+  position: absolute;
+  top: calc(50% - 12px);
+  left: -8px;
+  width: 4px;
+  height: 24px;
+  content: "";
+  background-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  border-radius: 6px;
+}
+
 .c4 {
   color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   -webkit-text-decoration: none;
@@ -593,6 +625,22 @@ exports[`NavList renders with groups 1`] = `
   border-radius: 6px;
 }
 
+.c6[data-is-active-descendant] {
+  font-weight: 600;
+  background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
+}
+
+.c6[data-is-active-descendant]::after {
+  position: absolute;
+  top: calc(50% - 12px);
+  left: -8px;
+  width: 4px;
+  height: 24px;
+  content: "";
+  background-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  border-radius: 6px;
+}
+
 .c11 {
   position: relative;
   display: -webkit-box;
@@ -674,6 +722,22 @@ exports[`NavList renders with groups 1`] = `
   --divider-color: transparent;
 }
 
+.c11[data-is-active-descendant] {
+  font-weight: 600;
+  background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
+}
+
+.c11[data-is-active-descendant]::after {
+  position: absolute;
+  top: calc(50% - 12px);
+  left: -8px;
+  width: 4px;
+  height: 24px;
+  content: "";
+  background-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  border-radius: 6px;
+}
+
 .c8 {
   color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   -webkit-text-decoration: none;
@@ -1070,6 +1134,22 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   border-radius: 6px;
 }
 
+.c11[data-is-active-descendant] {
+  font-weight: 600;
+  background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
+}
+
+.c11[data-is-active-descendant]::after {
+  position: absolute;
+  top: calc(50% - 12px);
+  left: -8px;
+  width: 4px;
+  height: 24px;
+  content: "";
+  background-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  border-radius: 6px;
+}
+
 .c4 {
   position: relative;
   display: -webkit-box;
@@ -1151,6 +1231,22 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   --divider-color: transparent;
 }
 
+.c4[data-is-active-descendant] {
+  font-weight: 600;
+  background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
+}
+
+.c4[data-is-active-descendant]::after {
+  position: absolute;
+  top: calc(50% - 12px);
+  left: -8px;
+  width: 4px;
+  height: 24px;
+  content: "";
+  background-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  border-radius: 6px;
+}
+
 .c13 {
   color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   -webkit-text-decoration: none;
@@ -1541,6 +1637,22 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   border-radius: 6px;
 }
 
+.c11[data-is-active-descendant] {
+  font-weight: 600;
+  background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
+}
+
+.c11[data-is-active-descendant]::after {
+  position: absolute;
+  top: calc(50% - 12px);
+  left: -8px;
+  width: 4px;
+  height: 24px;
+  content: "";
+  background-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  border-radius: 6px;
+}
+
 [data-component="ActionList.Divider"] + .c3 {
   --divider-color: transparent !important;
 }
@@ -1643,6 +1755,22 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   border-radius: 6px;
 }
 
+.c4[data-is-active-descendant] {
+  font-weight: 600;
+  background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
+}
+
+.c4[data-is-active-descendant]::after {
+  position: absolute;
+  top: calc(50% - 12px);
+  left: -8px;
+  width: 4px;
+  height: 24px;
+  content: "";
+  background-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  border-radius: 6px;
+}
+
 .c13 {
   color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
   -webkit-text-decoration: none;
diff --git a/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx
index 3dd388f5a77..248432e0f9a 100644
--- a/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx
@@ -6,6 +6,7 @@ import type {ItemInput} from '../deprecated/ActionList/List'
 import {SelectPanel} from './SelectPanel'
 import type {OverlayProps} from '../Overlay'
 import {TriangleDownIcon} from '@primer/octicons-react'
+import {ActionList} from '../deprecated/ActionList'
 
 const meta = {
   title: 'Components/SelectPanel/Examples',
@@ -242,3 +243,69 @@ export const HeightVariantionsAndScroll = () => {
     </>
   )
 }
+
+const longItems = [
+  {text: 'src/SelectPanel/SelectPanel.tsx', id: 3},
+  {text: 'src/SelectPanel/SelectPanel.stories.tsx', id: 4},
+  {text: 'src/SelectPanel/SelectPanel.features.stories.tsx', id: 5},
+  {text: 'src/SelectPanel/SelectPanel.examples.stories.tsx', id: 6},
+]
+
+export const CustomItemRenderer = () => {
+  const items = longItems
+  const [selected, setSelected] = React.useState<ItemInput[]>([items[0], items[1]])
+  const [filter, setFilter] = React.useState('')
+  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()))
+  const [open, setOpen] = useState(false)
+
+  return (
+    <>
+      <h1>Long string with truncation (not reviewed for accessibility)</h1>
+      <SelectPanel
+        title="Select files"
+        renderAnchor={({'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
+          <Button
+            trailingAction={TriangleDownIcon}
+            aria-labelledby={` ${ariaLabelledBy}`}
+            {...anchorProps}
+            aria-haspopup="dialog"
+          >
+            Select files
+          </Button>
+        )}
+        open={open}
+        onOpenChange={setOpen}
+        items={filteredItems}
+        selected={selected}
+        onSelectedChange={setSelected}
+        onFilterChange={setFilter}
+        overlayProps={{width: 'medium'}}
+        renderItem={item => (
+          <ActionList.Item
+            {...item}
+            text={undefined}
+            sx={{
+              mx: 2,
+              '&[data-is-active-descendant="activated-directly"]': {
+                backgroundColor: 'transparent',
+                outline: '2px solid var(--focus-outlineColor, var(--color-accent-emphasis))',
+                outlineOffset: '-2px',
+              },
+            }}
+          >
+            {' '}
+            <Box
+              sx={{
+                overflow: 'hidden',
+                whiteSpace: 'nowrap',
+                textOverflow: 'ellipsis',
+              }}
+            >
+              {item.text}
+            </Box>
+          </ActionList.Item>
+        )}
+      />
+    </>
+  )
+}
diff --git a/packages/react/src/SelectPanel/SelectPanel.test.tsx b/packages/react/src/SelectPanel/SelectPanel.test.tsx
index 636cd390973..9d6cec1f9cb 100644
--- a/packages/react/src/SelectPanel/SelectPanel.test.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.test.tsx
@@ -4,6 +4,13 @@ import {SelectPanel, type SelectPanelProps} from '../SelectPanel'
 import type {ItemInput, GroupedListProps} from '../deprecated/ActionList/List'
 import {userEvent} from '@testing-library/user-event'
 import ThemeProvider from '../ThemeProvider'
+import {FeatureFlags} from '../FeatureFlags'
+
+const renderWithFlag = (children: React.ReactNode, flag: boolean) => {
+  return render(
+    <FeatureFlags flags={{primer_react_select_panel_with_modern_action_list: flag}}>{children}</FeatureFlags>,
+  )
+}
 
 const items: SelectPanelProps['items'] = [
   {
@@ -51,445 +58,456 @@ function BasicSelectPanel() {
 
 global.Element.prototype.scrollTo = jest.fn()
 
-describe('SelectPanel', () => {
-  it('should render an anchor to open the select panel using `placeholder`', () => {
-    render(<BasicSelectPanel />)
-
-    expect(screen.getByText('Select items')).toBeInTheDocument()
-
-    const trigger = screen.getByRole('button', {
-      name: 'Select items',
-    })
-    expect(trigger).toHaveAttribute('aria-haspopup', 'true')
-    expect(trigger).toHaveAttribute('aria-expanded', 'false')
-  })
-
-  it('should open the select panel when activating the trigger', async () => {
-    const user = userEvent.setup()
-
-    render(<BasicSelectPanel />)
-
-    await user.click(screen.getByText('Select items'))
-
-    // Verify that the button has `aria-expanded="true"` after opening
-    const trigger = screen.getByRole('button', {
-      name: 'Select items',
-    })
-    expect(trigger).toHaveAttribute('aria-expanded', 'true')
-
-    // Verify that the input and listbox are visible
-    expect(screen.getByLabelText('Filter items')).toBeVisible()
-    expect(screen.getByRole('listbox')).toBeVisible()
-
-    expect(screen.getByLabelText('Filter items')).toHaveFocus()
-  })
-
-  it('should close the select panel when pressing Escape', async () => {
-    const user = userEvent.setup()
-
-    render(<BasicSelectPanel />)
-
-    await user.click(screen.getByText('Select items'))
-    await user.keyboard('{Escape}')
-
-    expect(screen.getByRole('button', {name: 'Select items'})).toHaveFocus()
-    expect(screen.getByRole('button', {name: 'Select items'})).toHaveAttribute('aria-expanded', 'false')
-  })
-
-  it('should close the select panel when clicking outside of the select panel', async () => {
-    const user = userEvent.setup()
-
-    render(
-      <>
-        <button type="button">outer button</button>
-        <BasicSelectPanel />
-      </>,
-    )
-
-    await user.click(screen.getByText('Select items'))
-    await user.click(screen.getByText('outer button'))
-
-    expect(screen.getByRole('button', {name: 'Select items'})).toHaveAttribute('aria-expanded', 'false')
-  })
-
-  it('should open a dialog that is labelled by `title` and described by `subtitle`', async () => {
-    const user = userEvent.setup()
-
-    render(<BasicSelectPanel />)
-
-    await user.click(screen.getByText('Select items'))
-
-    expect(
-      screen.getByRole('dialog', {
-        name: 'test title',
-        description: 'test subtitle',
-      }),
-    ).toBeInTheDocument()
-  })
-
-  it('should call `onOpenChange` when opening and closing the dialog', async () => {
-    const onOpenChange = jest.fn()
-
-    function SelectPanelOpenChange() {
-      const [selected, setSelected] = React.useState<SelectPanelProps['items']>([])
-      const [filter, setFilter] = React.useState('')
-      const [open, setOpen] = React.useState(false)
-
-      const onSelectedChange = (selected: SelectPanelProps['items']) => {
-        setSelected(selected)
-      }
-
-      return (
-        <ThemeProvider>
-          <button type="button">Outside of select panel</button>
-          <SelectPanel
-            title="test title"
-            subtitle="test subtitle"
-            items={items}
-            placeholder="Select items"
-            placeholderText="Filter items"
-            selected={selected}
-            onSelectedChange={onSelectedChange}
-            filterValue={filter}
-            onFilterChange={value => {
-              setFilter(value)
-            }}
-            open={open}
-            onOpenChange={(...args) => {
-              onOpenChange(...args)
-              setOpen(args[0])
-            }}
-          />
-        </ThemeProvider>
-      )
-    }
-
-    const user = userEvent.setup()
-
-    render(<SelectPanelOpenChange />)
-
-    // Open by click
-    await user.click(screen.getByText('Select items'))
-    expect(onOpenChange).toHaveBeenLastCalledWith(true, 'anchor-click')
-
-    // Close by click on anchor
-    await user.click(screen.getByText('Select items'))
-    expect(onOpenChange).toHaveBeenLastCalledWith(false, 'anchor-click')
-
-    // Open by button activation
-    await user.type(screen.getByText('Select items'), '{Space}')
-    expect(onOpenChange).toHaveBeenLastCalledWith(true, 'anchor-click')
-
-    // Close by Escape key
-    await user.keyboard('{Escape}')
-    expect(onOpenChange).toHaveBeenLastCalledWith(false, 'escape')
-
-    // Close by click outside
-    await user.click(screen.getByText('Select items'))
-    await user.click(screen.getByText('Outside of select panel'))
-    expect(onOpenChange).toHaveBeenLastCalledWith(false, 'click-outside')
-  })
-
-  describe('selection', () => {
-    it('should select an active option when activated', async () => {
-      const user = userEvent.setup()
-
-      render(<BasicSelectPanel />)
-
-      await user.click(screen.getByText('Select items'))
-
-      await user.type(document.activeElement!, '{Enter}')
-      expect(
-        screen.getByRole('option', {
-          name: 'item one',
-        }),
-      ).toHaveAttribute('aria-selected', 'true')
-
-      await user.type(document.activeElement!, '{Enter}')
-      expect(
-        screen.getByRole('option', {
-          name: 'item one',
-        }),
-      ).toHaveAttribute('aria-selected', 'false')
-
-      await user.click(screen.getByText('item one'))
-      expect(
-        screen.getByRole('option', {
-          name: 'item one',
-        }),
-      ).toHaveAttribute('aria-selected', 'true')
-
-      await user.click(screen.getByRole('option', {name: 'item one'}))
-      expect(
-        screen.getByRole('option', {
-          name: 'item one',
-        }),
-      ).toHaveAttribute('aria-selected', 'false')
-    })
-
-    it('should support navigating through items with ArrowUp and ArrowDown', async () => {
-      const user = userEvent.setup()
-
-      render(<BasicSelectPanel />)
-
-      await user.click(screen.getByText('Select items'))
-
-      // First item by default should be the active element
-      expect(document.activeElement!).toHaveAttribute(
-        'aria-activedescendant',
-        screen.getByRole('option', {name: 'item one'}).id,
-      )
-
-      await user.type(document.activeElement!, '{ArrowDown}')
-      expect(document.activeElement!).toHaveAttribute(
-        'aria-activedescendant',
-        screen.getByRole('option', {name: 'item two'}).id,
-      )
-
-      await user.type(document.activeElement!, '{ArrowDown}')
-      expect(document.activeElement!).toHaveAttribute(
-        'aria-activedescendant',
-        screen.getByRole('option', {name: 'item three'}).id,
-      )
-
-      // At end of list, should wrap to the beginning
-      await user.type(document.activeElement!, '{ArrowDown}')
-      expect(document.activeElement!).toHaveAttribute(
-        'aria-activedescendant',
-        screen.getByRole('option', {name: 'item one'}).id,
-      )
-
-      // At beginning of list, ArrowUp should wrap to the end
-      await user.type(document.activeElement!, '{ArrowUp}')
-      expect(document.activeElement!).toHaveAttribute(
-        'aria-activedescendant',
-        screen.getByRole('option', {name: 'item three'}).id,
-      )
-
-      await user.type(document.activeElement!, '{ArrowUp}')
-      expect(document.activeElement!).toHaveAttribute(
-        'aria-activedescendant',
-        screen.getByRole('option', {name: 'item two'}).id,
-      )
-
-      await user.type(document.activeElement!, '{ArrowUp}')
-      expect(document.activeElement!).toHaveAttribute(
-        'aria-activedescendant',
-        screen.getByRole('option', {name: 'item one'}).id,
-      )
-    })
-  })
-
-  describe('filtering', () => {
-    function FilterableSelectPanel() {
-      const [selected, setSelected] = React.useState<SelectPanelProps['items']>([])
-      const [filter, setFilter] = React.useState('')
-      const [open, setOpen] = React.useState(false)
-
-      const onSelectedChange = (selected: SelectPanelProps['items']) => {
-        setSelected(selected)
+for (const useModernActionList of [false, true]) {
+  describe('SelectPanel', () => {
+    describe(`primer_react_select_panel_with_modern_action_list: ${useModernActionList}`, () => {
+      it('should render an anchor to open the select panel using `placeholder`', () => {
+        renderWithFlag(<BasicSelectPanel />, useModernActionList)
+
+        expect(screen.getByText('Select items')).toBeInTheDocument()
+
+        const trigger = screen.getByRole('button', {
+          name: 'Select items',
+        })
+        expect(trigger).toHaveAttribute('aria-haspopup', 'true')
+        expect(trigger).toHaveAttribute('aria-expanded', 'false')
+      })
+
+      it('should open the select panel when activating the trigger', async () => {
+        const user = userEvent.setup()
+
+        renderWithFlag(<BasicSelectPanel />, useModernActionList)
+
+        await user.click(screen.getByText('Select items'))
+
+        // Verify that the button has `aria-expanded="true"` after opening
+        const trigger = screen.getByRole('button', {
+          name: 'Select items',
+        })
+        expect(trigger).toHaveAttribute('aria-expanded', 'true')
+
+        // Verify that the input and listbox are visible
+        expect(screen.getByLabelText('Filter items')).toBeVisible()
+        expect(screen.getByRole('listbox')).toBeVisible()
+
+        expect(screen.getByLabelText('Filter items')).toHaveFocus()
+      })
+
+      it('should close the select panel when pressing Escape', async () => {
+        const user = userEvent.setup()
+
+        renderWithFlag(<BasicSelectPanel />, useModernActionList)
+
+        await user.click(screen.getByText('Select items'))
+        await user.keyboard('{Escape}')
+
+        expect(screen.getByRole('button', {name: 'Select items'})).toHaveFocus()
+        expect(screen.getByRole('button', {name: 'Select items'})).toHaveAttribute('aria-expanded', 'false')
+      })
+
+      it('should close the select panel when clicking outside of the select panel', async () => {
+        const user = userEvent.setup()
+
+        renderWithFlag(
+          <>
+            <button type="button">outer button</button>
+            <BasicSelectPanel />
+          </>,
+          useModernActionList,
+        )
+
+        await user.click(screen.getByText('Select items'))
+        await user.click(screen.getByText('outer button'))
+
+        expect(screen.getByRole('button', {name: 'Select items'})).toHaveAttribute('aria-expanded', 'false')
+      })
+
+      it('should open a dialog that is labelled by `title` and described by `subtitle`', async () => {
+        const user = userEvent.setup()
+
+        renderWithFlag(<BasicSelectPanel />, useModernActionList)
+
+        await user.click(screen.getByText('Select items'))
+
+        expect(
+          screen.getByRole('dialog', {
+            name: 'test title',
+            description: 'test subtitle',
+          }),
+        ).toBeInTheDocument()
+      })
+
+      it('should call `onOpenChange` when opening and closing the dialog', async () => {
+        const onOpenChange = jest.fn()
+
+        function SelectPanelOpenChange() {
+          const [selected, setSelected] = React.useState<SelectPanelProps['items']>([])
+          const [filter, setFilter] = React.useState('')
+          const [open, setOpen] = React.useState(false)
+
+          const onSelectedChange = (selected: SelectPanelProps['items']) => {
+            setSelected(selected)
+          }
+
+          return (
+            <ThemeProvider>
+              <button type="button">Outside of select panel</button>
+              <SelectPanel
+                title="test title"
+                subtitle="test subtitle"
+                items={items}
+                placeholder="Select items"
+                placeholderText="Filter items"
+                selected={selected}
+                onSelectedChange={onSelectedChange}
+                filterValue={filter}
+                onFilterChange={value => {
+                  setFilter(value)
+                }}
+                open={open}
+                onOpenChange={(...args) => {
+                  onOpenChange(...args)
+                  setOpen(args[0])
+                }}
+              />
+            </ThemeProvider>
+          )
+        }
+
+        const user = userEvent.setup()
+
+        renderWithFlag(<SelectPanelOpenChange />, useModernActionList)
+
+        // Open by click
+        await user.click(screen.getByText('Select items'))
+        expect(onOpenChange).toHaveBeenLastCalledWith(true, 'anchor-click')
+
+        // Close by click on anchor
+        await user.click(screen.getByText('Select items'))
+        expect(onOpenChange).toHaveBeenLastCalledWith(false, 'anchor-click')
+
+        // Open by button activation
+        await user.type(screen.getByText('Select items'), '{Space}')
+        expect(onOpenChange).toHaveBeenLastCalledWith(true, 'anchor-click')
+
+        // Close by Escape key
+        await user.keyboard('{Escape}')
+        expect(onOpenChange).toHaveBeenLastCalledWith(false, 'escape')
+
+        // Close by click outside
+        await user.click(screen.getByText('Select items'))
+        await user.click(screen.getByText('Outside of select panel'))
+        expect(onOpenChange).toHaveBeenLastCalledWith(false, 'click-outside')
+      })
+
+      describe('selection', () => {
+        it('should select an active option when activated', async () => {
+          const user = userEvent.setup()
+
+          renderWithFlag(<BasicSelectPanel />, useModernActionList)
+
+          await user.click(screen.getByText('Select items'))
+
+          await user.type(document.activeElement!, '{Enter}')
+          expect(
+            screen.getByRole('option', {
+              name: 'item one',
+            }),
+          ).toHaveAttribute('aria-selected', 'true')
+
+          await user.type(document.activeElement!, '{Enter}')
+          expect(
+            screen.getByRole('option', {
+              name: 'item one',
+            }),
+          ).toHaveAttribute('aria-selected', 'false')
+
+          await user.click(screen.getByText('item one'))
+          expect(
+            screen.getByRole('option', {
+              name: 'item one',
+            }),
+          ).toHaveAttribute('aria-selected', 'true')
+
+          await user.click(screen.getByRole('option', {name: 'item one'}))
+          expect(
+            screen.getByRole('option', {
+              name: 'item one',
+            }),
+          ).toHaveAttribute('aria-selected', 'false')
+        })
+
+        it('should support navigating through items with ArrowUp and ArrowDown', async () => {
+          const user = userEvent.setup()
+
+          renderWithFlag(<BasicSelectPanel />, useModernActionList)
+
+          await user.click(screen.getByText('Select items'))
+
+          // First item by default should be the active element
+          expect(document.activeElement!).toHaveAttribute(
+            'aria-activedescendant',
+            screen.getByRole('option', {name: 'item one'}).id,
+          )
+
+          await user.type(document.activeElement!, '{ArrowDown}')
+          expect(document.activeElement!).toHaveAttribute(
+            'aria-activedescendant',
+            screen.getByRole('option', {name: 'item two'}).id,
+          )
+
+          await user.type(document.activeElement!, '{ArrowDown}')
+          expect(document.activeElement!).toHaveAttribute(
+            'aria-activedescendant',
+            screen.getByRole('option', {name: 'item three'}).id,
+          )
+
+          // At end of list, should wrap to the beginning
+          await user.type(document.activeElement!, '{ArrowDown}')
+          expect(document.activeElement!).toHaveAttribute(
+            'aria-activedescendant',
+            screen.getByRole('option', {name: 'item one'}).id,
+          )
+
+          // At beginning of list, ArrowUp should wrap to the end
+          await user.type(document.activeElement!, '{ArrowUp}')
+          expect(document.activeElement!).toHaveAttribute(
+            'aria-activedescendant',
+            screen.getByRole('option', {name: 'item three'}).id,
+          )
+
+          await user.type(document.activeElement!, '{ArrowUp}')
+          expect(document.activeElement!).toHaveAttribute(
+            'aria-activedescendant',
+            screen.getByRole('option', {name: 'item two'}).id,
+          )
+
+          await user.type(document.activeElement!, '{ArrowUp}')
+          expect(document.activeElement!).toHaveAttribute(
+            'aria-activedescendant',
+            screen.getByRole('option', {name: 'item one'}).id,
+          )
+        })
+      })
+
+      describe('filtering', () => {
+        function FilterableSelectPanel() {
+          const [selected, setSelected] = React.useState<SelectPanelProps['items']>([])
+          const [filter, setFilter] = React.useState('')
+          const [open, setOpen] = React.useState(false)
+
+          const onSelectedChange = (selected: SelectPanelProps['items']) => {
+            setSelected(selected)
+          }
+
+          return (
+            <ThemeProvider>
+              <SelectPanel
+                title="test title"
+                subtitle="test subtitle"
+                items={items.filter(item => item.text?.includes(filter))}
+                placeholder="Select items"
+                placeholderText="Filter items"
+                selected={selected}
+                onSelectedChange={onSelectedChange}
+                filterValue={filter}
+                onFilterChange={value => {
+                  setFilter(value)
+                }}
+                open={open}
+                onOpenChange={isOpen => {
+                  setOpen(isOpen)
+                }}
+              />
+            </ThemeProvider>
+          )
+        }
+
+        it('should filter the list of items when the user types into the input', async () => {
+          const user = userEvent.setup()
+
+          renderWithFlag(<FilterableSelectPanel />, useModernActionList)
+
+          await user.click(screen.getByText('Select items'))
+
+          expect(screen.getAllByRole('option')).toHaveLength(3)
+
+          await user.type(document.activeElement!, 'two')
+          expect(screen.getAllByRole('option')).toHaveLength(1)
+        })
+
+        it.todo('should announce the number of results')
+
+        it.todo('should announce when no results are available')
+      })
+
+      describe('with footer', () => {
+        function SelectPanelWithFooter() {
+          const [selected, setSelected] = React.useState<SelectPanelProps['items']>([])
+          const [filter, setFilter] = React.useState('')
+          const [open, setOpen] = React.useState(false)
+
+          const onSelectedChange = (selected: SelectPanelProps['items']) => {
+            setSelected(selected)
+          }
+
+          return (
+            <ThemeProvider>
+              <SelectPanel
+                title="test title"
+                subtitle="test subtitle"
+                footer={<div>test footer</div>}
+                items={items}
+                placeholder="Select items"
+                placeholderText="Filter items"
+                selected={selected}
+                onSelectedChange={onSelectedChange}
+                filterValue={filter}
+                onFilterChange={value => {
+                  setFilter(value)
+                }}
+                open={open}
+                onOpenChange={isOpen => {
+                  setOpen(isOpen)
+                }}
+              />
+            </ThemeProvider>
+          )
+        }
+
+        it('should render the provided `footer` at the bottom of the dialog', async () => {
+          const user = userEvent.setup()
+
+          renderWithFlag(<SelectPanelWithFooter />, useModernActionList)
+
+          await user.click(screen.getByText('Select items'))
+          expect(screen.getByText('test footer')).toBeVisible()
+        })
+      })
+
+      const listOfItems: Array<ItemInput> = [
+        {
+          id: '1',
+          key: 1,
+          text: 'Item 1',
+          groupId: '1',
+        },
+        {
+          id: '2',
+          key: 2,
+          text: 'Item 2',
+          groupId: '1',
+        },
+        {
+          id: '3',
+          key: 3,
+          text: 'Item 3',
+          groupId: '2',
+        },
+        {
+          id: '4',
+          key: 4,
+          text: 'Item 4',
+          groupId: '3',
+        },
+      ]
+
+      const groupMetadata: GroupedListProps['groupMetadata'] = [
+        {groupId: '1', header: {title: 'Group title 1'}},
+        {groupId: '2', header: {title: 'Group title 2'}},
+        {groupId: '3', header: {title: 'Group title 3'}},
+      ]
+
+      function SelectPanelWithGroups() {
+        const [selectedItems, setSelectedItems] = React.useState<SelectPanelProps['items']>([])
+        const [open, setOpen] = React.useState(false)
+        const [filter, setFilter] = React.useState('')
+
+        const onSelectedChange = (selections: ItemInput[]) => {
+          setSelectedItems(selections)
+        }
+
+        return (
+          <ThemeProvider>
+            <SelectPanel
+              title="test title"
+              subtitle="test subtitle"
+              groupMetadata={groupMetadata}
+              placeholderText="Filter items"
+              placeholder="Select items"
+              items={listOfItems}
+              selected={selectedItems}
+              onSelectedChange={onSelectedChange}
+              open={open}
+              onOpenChange={isOpen => {
+                setOpen(isOpen)
+              }}
+              filterValue={filter}
+              onFilterChange={value => {
+                setFilter(value)
+              }}
+            />
+          </ThemeProvider>
+        )
       }
 
-      return (
-        <ThemeProvider>
-          <SelectPanel
-            title="test title"
-            subtitle="test subtitle"
-            items={items.filter(item => item.text?.includes(filter))}
-            placeholder="Select items"
-            placeholderText="Filter items"
-            selected={selected}
-            onSelectedChange={onSelectedChange}
-            filterValue={filter}
-            onFilterChange={value => {
-              setFilter(value)
-            }}
-            open={open}
-            onOpenChange={isOpen => {
-              setOpen(isOpen)
-            }}
-          />
-        </ThemeProvider>
-      )
-    }
-
-    it('should filter the list of items when the user types into the input', async () => {
-      const user = userEvent.setup()
-
-      render(<FilterableSelectPanel />)
-
-      await user.click(screen.getByText('Select items'))
-
-      expect(screen.getAllByRole('option')).toHaveLength(3)
-
-      await user.type(document.activeElement!, 'two')
-      expect(screen.getAllByRole('option')).toHaveLength(1)
+      describe('with groups', () => {
+        it('should render groups with items', async () => {
+          const user = userEvent.setup()
+
+          renderWithFlag(<SelectPanelWithGroups />, useModernActionList)
+
+          await user.click(screen.getByText('Select items'))
+          const listbox = screen.getByRole('listbox')
+          expect(listbox).toBeVisible()
+          expect(listbox).toHaveAttribute('aria-multiselectable', 'true')
+
+          // listbox should has 3 groups and each have heading
+          if (useModernActionList) {
+            const groups = screen.getAllByRole('group')
+            expect(groups).toHaveLength(3)
+            expect(groups[0]).toHaveAttribute('aria-label', 'Group title 1')
+            expect(groups[1]).toHaveAttribute('aria-label', 'Group title 2')
+            expect(groups[2]).toHaveAttribute('aria-label', 'Group title 3')
+          } else {
+            const headings = screen.getAllByRole('heading')
+            expect(headings[1]).toHaveTextContent('Group title 1')
+            expect(headings[2]).toHaveTextContent('Group title 2')
+            expect(headings[3]).toHaveTextContent('Group title 3')
+          }
+
+          expect(screen.getAllByRole('option')).toHaveLength(4)
+        })
+        it('should select items within groups', async () => {
+          const user = userEvent.setup()
+
+          renderWithFlag(<SelectPanelWithGroups />, useModernActionList)
+
+          await user.click(screen.getByText('Select items'))
+
+          // Select the first item
+          await user.click(screen.getByRole('option', {name: 'Item 1'}))
+          expect(
+            screen.getByRole('option', {
+              name: 'Item 1',
+            }),
+          ).toHaveAttribute('aria-selected', 'true')
+
+          await user.click(screen.getByRole('option', {name: 'Item 3'}))
+          expect(
+            screen.getByRole('option', {
+              name: 'Item 3',
+            }),
+          ).toHaveAttribute('aria-selected', 'true')
+
+          await user.click(screen.getByRole('option', {name: 'Item 4'}))
+          expect(
+            screen.getByRole('option', {
+              name: 'Item 4',
+            }),
+          ).toHaveAttribute('aria-selected', 'true')
+        })
+      })
     })
-
-    it.todo('should announce the number of results')
-
-    it.todo('should announce when no results are available')
   })
-
-  describe('with footer', () => {
-    function SelectPanelWithFooter() {
-      const [selected, setSelected] = React.useState<SelectPanelProps['items']>([])
-      const [filter, setFilter] = React.useState('')
-      const [open, setOpen] = React.useState(false)
-
-      const onSelectedChange = (selected: SelectPanelProps['items']) => {
-        setSelected(selected)
-      }
-
-      return (
-        <ThemeProvider>
-          <SelectPanel
-            title="test title"
-            subtitle="test subtitle"
-            footer={<div>test footer</div>}
-            items={items}
-            placeholder="Select items"
-            placeholderText="Filter items"
-            selected={selected}
-            onSelectedChange={onSelectedChange}
-            filterValue={filter}
-            onFilterChange={value => {
-              setFilter(value)
-            }}
-            open={open}
-            onOpenChange={isOpen => {
-              setOpen(isOpen)
-            }}
-          />
-        </ThemeProvider>
-      )
-    }
-
-    it('should render the provided `footer` at the bottom of the dialog', async () => {
-      const user = userEvent.setup()
-
-      render(<SelectPanelWithFooter />)
-
-      await user.click(screen.getByText('Select items'))
-      expect(screen.getByText('test footer')).toBeVisible()
-    })
-  })
-
-  const listOfItems: Array<ItemInput> = [
-    {
-      id: '1',
-      key: 1,
-      text: 'Item 1',
-      groupId: '1',
-    },
-    {
-      id: '2',
-      key: 2,
-      text: 'Item 2',
-      groupId: '1',
-    },
-    {
-      id: '3',
-      key: 3,
-      text: 'Item 3',
-      groupId: '2',
-    },
-    {
-      id: '4',
-      key: 4,
-      text: 'Item 4',
-      groupId: '3',
-    },
-  ]
-
-  const groupMetadata: GroupedListProps['groupMetadata'] = [
-    {groupId: '1', header: {title: 'Group title 1'}},
-    {groupId: '2', header: {title: 'Group title 2'}},
-    {groupId: '3', header: {title: 'Group title 3'}},
-  ]
-
-  function SelectPanelWithGroups() {
-    const [selectedItems, setSelectedItems] = React.useState<SelectPanelProps['items']>([])
-    const [open, setOpen] = React.useState(false)
-    const [filter, setFilter] = React.useState('')
-
-    const onSelectedChange = (selections: ItemInput[]) => {
-      setSelectedItems(selections)
-    }
-
-    return (
-      <ThemeProvider>
-        <SelectPanel
-          title="test title"
-          subtitle="test subtitle"
-          groupMetadata={groupMetadata}
-          placeholderText="Filter items"
-          placeholder="Select items"
-          items={listOfItems}
-          selected={selectedItems}
-          onSelectedChange={onSelectedChange}
-          open={open}
-          onOpenChange={isOpen => {
-            setOpen(isOpen)
-          }}
-          filterValue={filter}
-          onFilterChange={value => {
-            setFilter(value)
-          }}
-        />
-      </ThemeProvider>
-    )
-  }
-
-  describe('with groups', () => {
-    it('should render groups with items', async () => {
-      const user = userEvent.setup()
-
-      render(<SelectPanelWithGroups />)
-
-      await user.click(screen.getByText('Select items'))
-      const listbox = screen.getByRole('listbox')
-      expect(listbox).toBeVisible()
-      expect(listbox).toHaveAttribute('aria-multiselectable', 'true')
-
-      // listbox should has 3 gorups and each have heading
-      const headings = screen.getAllByRole('heading')
-
-      // The first heading is the h1 and it is the title of the dialog
-      expect(headings[1]).toHaveTextContent('Group title 1')
-      expect(headings[2]).toHaveTextContent('Group title 2')
-      expect(headings[3]).toHaveTextContent('Group title 3')
-
-      expect(screen.getAllByRole('option')).toHaveLength(4)
-    })
-    it('should select items within groups', async () => {
-      const user = userEvent.setup()
-
-      render(<SelectPanelWithGroups />)
-
-      await user.click(screen.getByText('Select items'))
-
-      // Select the first item
-      await user.click(screen.getByRole('option', {name: 'Item 1'}))
-      expect(
-        screen.getByRole('option', {
-          name: 'Item 1',
-        }),
-      ).toHaveAttribute('aria-selected', 'true')
-
-      await user.click(screen.getByRole('option', {name: 'Item 3'}))
-      expect(
-        screen.getByRole('option', {
-          name: 'Item 3',
-        }),
-      ).toHaveAttribute('aria-selected', 'true')
-
-      await user.click(screen.getByRole('option', {name: 'Item 4'}))
-      expect(
-        screen.getByRole('option', {
-          name: 'Item 4',
-        }),
-      ).toHaveAttribute('aria-selected', 'true')
-    })
-  })
-})
+}
diff --git a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
index 9f40a07fbc8..5317c8136b8 100644
--- a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
@@ -787,6 +787,22 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   --divider-color: transparent;
 }
 
+.c3[data-is-active-descendant] {
+  font-weight: 600;
+  background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
+}
+
+.c3[data-is-active-descendant]::after {
+  position: absolute;
+  top: calc(50% - 12px);
+  left: -8px;
+  width: 4px;
+  height: 24px;
+  content: "";
+  background-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  border-radius: 6px;
+}
+
 [data-component="ActionList.Divider"] + .c2 {
   --divider-color: transparent !important;
 }
@@ -1563,6 +1579,22 @@ exports[`snapshots renders a multiselect input 1`] = `
   --divider-color: transparent;
 }
 
+.c3[data-is-active-descendant] {
+  font-weight: 600;
+  background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
+}
+
+.c3[data-is-active-descendant]::after {
+  position: absolute;
+  top: calc(50% - 12px);
+  left: -8px;
+  width: 4px;
+  height: 24px;
+  content: "";
+  background-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  border-radius: 6px;
+}
+
 @media (forced-colors:active) {
   .c3:focus,
   .c3:focus-visible,
@@ -2311,6 +2343,22 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   --divider-color: transparent;
 }
 
+.c3[data-is-active-descendant] {
+  font-weight: 600;
+  background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
+}
+
+.c3[data-is-active-descendant]::after {
+  position: absolute;
+  top: calc(50% - 12px);
+  left: -8px;
+  width: 4px;
+  height: 24px;
+  content: "";
+  background-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  border-radius: 6px;
+}
+
 .c8 {
   position: relative;
   display: -webkit-box;
@@ -2392,6 +2440,22 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   --divider-color: transparent;
 }
 
+.c8[data-is-active-descendant] {
+  font-weight: 600;
+  background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
+}
+
+.c8[data-is-active-descendant]::after {
+  position: absolute;
+  top: calc(50% - 12px);
+  left: -8px;
+  width: 4px;
+  height: 24px;
+  content: "";
+  background-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  border-radius: 6px;
+}
+
 @media (forced-colors:active) {
   .c3:focus,
   .c3:focus-visible,
@@ -3085,6 +3149,22 @@ exports[`snapshots renders a single select input 1`] = `
   --divider-color: transparent;
 }
 
+.c3[data-is-active-descendant] {
+  font-weight: 600;
+  background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
+}
+
+.c3[data-is-active-descendant]::after {
+  position: absolute;
+  top: calc(50% - 12px);
+  left: -8px;
+  width: 4px;
+  height: 24px;
+  content: "";
+  background-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  border-radius: 6px;
+}
+
 @media (forced-colors:active) {
   .c3:focus,
   .c3:focus-visible,
@@ -3555,6 +3635,22 @@ exports[`snapshots renders with a custom text input component 1`] = `
   --divider-color: transparent;
 }
 
+.c3[data-is-active-descendant] {
+  font-weight: 600;
+  background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
+}
+
+.c3[data-is-active-descendant]::after {
+  position: absolute;
+  top: calc(50% - 12px);
+  left: -8px;
+  width: 4px;
+  height: 24px;
+  content: "";
+  background-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  border-radius: 6px;
+}
+
 @media (forced-colors:active) {
   .c3:focus,
   .c3:focus-visible,
diff --git a/packages/react/src/deprecated/ActionList/List.tsx b/packages/react/src/deprecated/ActionList/List.tsx
index f472fb33af2..d873ea97bb1 100644
--- a/packages/react/src/deprecated/ActionList/List.tsx
+++ b/packages/react/src/deprecated/ActionList/List.tsx
@@ -12,7 +12,7 @@ import type {SystemCssProperties} from '@styled-system/css'
 import {hasActiveDescendantAttribute} from '@primer/behaviors'
 import type {Merge} from '../../utils/types/Merge'
 
-type RenderItemFn = (props: ItemProps) => React.ReactElement
+export type RenderItemFn = (props: ItemProps) => React.ReactElement
 
 export type ItemInput =
   | Merge<React.ComponentPropsWithoutRef<'div'>, ItemProps>