diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Default_Truncation.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Default_Truncation.png
new file mode 100644
index 00000000000..6cdf2399d84
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Default_Truncation.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Groups.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Groups.png
index 4915bdc6b10..d377b78bd49 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Groups.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Groups.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Nested_Options_Groups.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Nested_Options_Groups.png
index 4915bdc6b10..d377b78bd49 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Nested_Options_Groups.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Nested_Options_Groups.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Row_Height_Auto.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Row_Height_Auto.png
index 826c23a6c6a..67dc4d683ed 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Row_Height_Auto.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Row_Height_Auto.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_truncationProps.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_truncationProps.png
new file mode 100644
index 00000000000..2a2686feb86
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_truncationProps.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Playground.png
index 11d37891ec7..44483f4cc09 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableListItem_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableListItem_Playground.png
index 1c90a145436..d86ebb98ee1 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableListItem_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableListItem_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableListItem_singleSelection.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableListItem_singleSelection.png
index d9fef23d474..555172e5c30 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableListItem_singleSelection.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableListItem_singleSelection.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableListItem_textWrap_truncate.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableListItem_textWrap_truncate.png
new file mode 100644
index 00000000000..f391a7f707b
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableListItem_textWrap_truncate.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableListItem_textWrap_wrap.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableListItem_textWrap_wrap.png
new file mode 100644
index 00000000000..0fdf930cf26
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableListItem_textWrap_wrap.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Custom_Content_List_Items.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Custom_Content_List_Items.png
index ae4ea8b68a8..99a33540f75 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Custom_Content_List_Items.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Custom_Content_List_Items.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Groups.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Groups.png
index e4a998affc8..86e6146111a 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Groups.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Groups.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Multi_Selection.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Multi_Selection.png
index 47f6c425f50..a7643478c8f 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Multi_Selection.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Multi_Selection.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Playground.png
index 006a5b5aa9d..b3f00e9f82c 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Scrollable_With_Virtualization.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Scrollable_With_Virtualization.png
index ced2e37815f..6f76ebb49ce 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Scrollable_With_Virtualization.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Scrollable_With_Virtualization.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Scrollable_Without_Virtualization.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Scrollable_Without_Virtualization.png
index b4736de7364..75551a2621a 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Scrollable_Without_Virtualization.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Scrollable_Without_Virtualization.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_With_Search.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_With_Search.png
index f73371527e2..8093d015eb7 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_With_Search.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_With_Search.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_With_Search_And_Groups.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_With_Search_And_Groups.png
index 52b3d852921..1f5dfe1ab2d 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_With_Search_And_Groups.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_With_Search_And_Groups.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_With_Tooltip.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_With_Tooltip.png
index 11d37891ec7..44483f4cc09 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_With_Tooltip.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_With_Tooltip.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_With_Truncation.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_With_Truncation.png
new file mode 100644
index 00000000000..26cce14656f
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_With_Truncation.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Without_Virtualization.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Without_Virtualization.png
new file mode 100644
index 00000000000..44483f4cc09
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Without_Virtualization.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Internal_EuiListItemLayout_Kitchen_Sink.png b/packages/eui/.loki/reference/chrome_desktop_Internal_EuiListItemLayout_Kitchen_Sink.png
new file mode 100644
index 00000000000..6605746d6a5
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Internal_EuiListItemLayout_Kitchen_Sink.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Internal_EuiListItemLayout_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Internal_EuiListItemLayout_Playground.png
new file mode 100644
index 00000000000..9ec5f20bb6b
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Internal_EuiListItemLayout_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Internal_EuiListItemLayout_Role.png b/packages/eui/.loki/reference/chrome_desktop_Internal_EuiListItemLayout_Role.png
new file mode 100644
index 00000000000..9ec5f20bb6b
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Internal_EuiListItemLayout_Role.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Internal_EuiListItemLayout_extraAction.png b/packages/eui/.loki/reference/chrome_desktop_Internal_EuiListItemLayout_extraAction.png
new file mode 100644
index 00000000000..1e9a26cb743
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Internal_EuiListItemLayout_extraAction.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Internal_EuiListItemLayout_extraAction_tooltipProps.png b/packages/eui/.loki/reference/chrome_desktop_Internal_EuiListItemLayout_extraAction_tooltipProps.png
new file mode 100644
index 00000000000..534cc856fd5
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Internal_EuiListItemLayout_extraAction_tooltipProps.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Internal_EuiListItemLayout_textWrap_truncate.png b/packages/eui/.loki/reference/chrome_desktop_Internal_EuiListItemLayout_textWrap_truncate.png
new file mode 100644
index 00000000000..086eedf125b
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Internal_EuiListItemLayout_textWrap_truncate.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Internal_EuiListItemLayout_textWrap_wrap.png b/packages/eui/.loki/reference/chrome_desktop_Internal_EuiListItemLayout_textWrap_wrap.png
new file mode 100644
index 00000000000..c6b034a2a58
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Internal_EuiListItemLayout_textWrap_wrap.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Internal_EuiListItemLayout_tooltipProps.png b/packages/eui/.loki/reference/chrome_desktop_Internal_EuiListItemLayout_tooltipProps.png
new file mode 100644
index 00000000000..322b124ed14
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Internal_EuiListItemLayout_tooltipProps.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Dark_Theme_With_Sitewide_Search.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Dark_Theme_With_Sitewide_Search.png
index 6910b023837..c0e2c18c9a8 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Dark_Theme_With_Sitewide_Search.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Dark_Theme_With_Sitewide_Search.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Templates_EuiSelectableTemplateSitewide_Scrollable.png b/packages/eui/.loki/reference/chrome_desktop_Templates_EuiSelectableTemplateSitewide_Scrollable.png
index adb5bb2a066..9ce64b59afd 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Templates_EuiSelectableTemplateSitewide_Scrollable.png and b/packages/eui/.loki/reference/chrome_desktop_Templates_EuiSelectableTemplateSitewide_Scrollable.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Templates_EuiSelectableTemplateSitewide_VRT.png b/packages/eui/.loki/reference/chrome_desktop_Templates_EuiSelectableTemplateSitewide_VRT.png
index 92fe9ede1fc..1a763b6e7c7 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Templates_EuiSelectableTemplateSitewide_VRT.png and b/packages/eui/.loki/reference/chrome_desktop_Templates_EuiSelectableTemplateSitewide_VRT.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Default_Truncation.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Default_Truncation.png
new file mode 100644
index 00000000000..5adf0404fa8
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Default_Truncation.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Groups.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Groups.png
index eedc4ab901d..db481d493ac 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Groups.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Groups.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Nested_Options_Groups.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Nested_Options_Groups.png
index eedc4ab901d..db481d493ac 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Nested_Options_Groups.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Nested_Options_Groups.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Row_Height_Auto.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Row_Height_Auto.png
index add12b40504..4a9b4c84377 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Row_Height_Auto.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Row_Height_Auto.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_truncationProps.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_truncationProps.png
new file mode 100644
index 00000000000..4caa3897b44
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_truncationProps.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Playground.png
index 4dd21184300..68fb17cd0b8 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableListItem_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableListItem_Playground.png
index e4da023a69b..ac87dbd1765 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableListItem_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableListItem_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableListItem_singleSelection.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableListItem_singleSelection.png
index 4f4a74a8b13..11bec1866e8 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableListItem_singleSelection.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableListItem_singleSelection.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableListItem_textWrap_truncate.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableListItem_textWrap_truncate.png
new file mode 100644
index 00000000000..2837304ae59
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableListItem_textWrap_truncate.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableListItem_textWrap_wrap.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableListItem_textWrap_wrap.png
new file mode 100644
index 00000000000..b0ad0ea0b41
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableListItem_textWrap_wrap.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Custom_Content_List_Items.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Custom_Content_List_Items.png
index 21e9931119d..779833ad5b2 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Custom_Content_List_Items.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Custom_Content_List_Items.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Groups.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Groups.png
index 8722f0eaecc..ba8051c8f8f 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Groups.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Groups.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Multi_Selection.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Multi_Selection.png
index 68ce376a4b8..0804fdf58ae 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Multi_Selection.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Multi_Selection.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Playground.png
index eacbddf3632..85fab93578b 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Scrollable_With_Virtualization.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Scrollable_With_Virtualization.png
index 70f45068f8b..b4e8f7341a9 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Scrollable_With_Virtualization.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Scrollable_With_Virtualization.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Scrollable_Without_Virtualization.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Scrollable_Without_Virtualization.png
index eb98856f9c7..fa2f3f51947 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Scrollable_Without_Virtualization.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Scrollable_Without_Virtualization.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_With_Search.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_With_Search.png
index 9c522702a44..7e67ddb67d8 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_With_Search.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_With_Search.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_With_Search_And_Groups.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_With_Search_And_Groups.png
index 9225da72abe..5a92b81c88c 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_With_Search_And_Groups.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_With_Search_And_Groups.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_With_Tooltip.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_With_Tooltip.png
index 4dd21184300..68fb17cd0b8 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_With_Tooltip.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_With_Tooltip.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_With_Truncation.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_With_Truncation.png
new file mode 100644
index 00000000000..6e41b019742
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_With_Truncation.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Without_Virtualization.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Without_Virtualization.png
new file mode 100644
index 00000000000..68fb17cd0b8
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Without_Virtualization.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Internal_EuiListItemLayout_Kitchen_Sink.png b/packages/eui/.loki/reference/chrome_mobile_Internal_EuiListItemLayout_Kitchen_Sink.png
new file mode 100644
index 00000000000..caa53f7f4b4
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Internal_EuiListItemLayout_Kitchen_Sink.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Internal_EuiListItemLayout_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Internal_EuiListItemLayout_Playground.png
new file mode 100644
index 00000000000..a19971bb375
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Internal_EuiListItemLayout_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Internal_EuiListItemLayout_Role.png b/packages/eui/.loki/reference/chrome_mobile_Internal_EuiListItemLayout_Role.png
new file mode 100644
index 00000000000..a19971bb375
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Internal_EuiListItemLayout_Role.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Internal_EuiListItemLayout_extraAction.png b/packages/eui/.loki/reference/chrome_mobile_Internal_EuiListItemLayout_extraAction.png
new file mode 100644
index 00000000000..8ad02653591
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Internal_EuiListItemLayout_extraAction.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Internal_EuiListItemLayout_extraAction_tooltipProps.png b/packages/eui/.loki/reference/chrome_mobile_Internal_EuiListItemLayout_extraAction_tooltipProps.png
new file mode 100644
index 00000000000..decdd6a1bbc
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Internal_EuiListItemLayout_extraAction_tooltipProps.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Internal_EuiListItemLayout_textWrap_truncate.png b/packages/eui/.loki/reference/chrome_mobile_Internal_EuiListItemLayout_textWrap_truncate.png
new file mode 100644
index 00000000000..244a774abdb
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Internal_EuiListItemLayout_textWrap_truncate.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Internal_EuiListItemLayout_textWrap_wrap.png b/packages/eui/.loki/reference/chrome_mobile_Internal_EuiListItemLayout_textWrap_wrap.png
new file mode 100644
index 00000000000..0435a1e5c30
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Internal_EuiListItemLayout_textWrap_wrap.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Internal_EuiListItemLayout_tooltipProps.png b/packages/eui/.loki/reference/chrome_mobile_Internal_EuiListItemLayout_tooltipProps.png
new file mode 100644
index 00000000000..495eb06868e
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Internal_EuiListItemLayout_tooltipProps.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Dark_Theme_With_Sitewide_Search.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Dark_Theme_With_Sitewide_Search.png
index e0ee96a1ca0..dd05b3a8fca 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Dark_Theme_With_Sitewide_Search.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Dark_Theme_With_Sitewide_Search.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Templates_EuiSelectableTemplateSitewide_Scrollable.png b/packages/eui/.loki/reference/chrome_mobile_Templates_EuiSelectableTemplateSitewide_Scrollable.png
index f6160e9c33b..e91d688b268 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Templates_EuiSelectableTemplateSitewide_Scrollable.png and b/packages/eui/.loki/reference/chrome_mobile_Templates_EuiSelectableTemplateSitewide_Scrollable.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Templates_EuiSelectableTemplateSitewide_VRT.png b/packages/eui/.loki/reference/chrome_mobile_Templates_EuiSelectableTemplateSitewide_VRT.png
index 3b89a6a8513..759868a9b76 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Templates_EuiSelectableTemplateSitewide_VRT.png and b/packages/eui/.loki/reference/chrome_mobile_Templates_EuiSelectableTemplateSitewide_VRT.png differ
diff --git a/packages/eui/changelogs/upcoming/9532.md b/packages/eui/changelogs/upcoming/9532.md
new file mode 100644
index 00000000000..2c1e1de8363
--- /dev/null
+++ b/packages/eui/changelogs/upcoming/9532.md
@@ -0,0 +1,2 @@
+- Updated `EuiSelectableListItem` to use the shared `EuiListItemLayout` component to align layout and styles between list components
+- Updated `EuiSelectableTemplateSitewide` option text spacing from `4px` to `2px`
\ No newline at end of file
diff --git a/packages/eui/changelogs/upcoming/9538.md b/packages/eui/changelogs/upcoming/9538.md
new file mode 100644
index 00000000000..b9f1dd641e8
--- /dev/null
+++ b/packages/eui/changelogs/upcoming/9538.md
@@ -0,0 +1,6 @@
+- Updated `EuiComboBox`'s listbox and list item styles by using `EuiListItemLayout`
+- Updated the rendered output element of `EuiComboBoxOptionsList`'s list items from `button` to `li`
+- Updated `EuiComboBox` to exclude disabled options from list navigation (aligning with native `<select>` behavior)
+- Updated `EuiComboBoxOptionsList` to use `VariableSizeList` instead of `FixedSizeList` from `react-window`
+- Added opt-in `onFocusBadge` prop on `EuiComboBox` and `EuiComboBoxOptionsList`. By default the "Enter" badge is not shown anymore.
+- Updated `EuiComboBoxOptionsList`'s list item `id` to use a stable array index to ensure `aria-activedescendant` isn't stale.
\ No newline at end of file
diff --git a/packages/eui/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap b/packages/eui/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
index e6b6b06d936..a470076b9cb 100644
--- a/packages/eui/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
+++ b/packages/eui/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
@@ -139,7 +139,7 @@ exports[`EuiComboBox renders the options list dropdown 1`] = `
       <div
         aria-live="off"
         aria-modal="true"
-        class="euiPanel euiPanel--plain euiPopover__panel emotion-euiPanel-grow-m-plain-euiPopover__panel-light-isOpen-isAttached-bottom"
+        class="euiPanel euiPanel--plain euiPanel--paddingSmall euiPopover__panel emotion-euiPanel-grow-m-s-plain-euiPopover__panel-light-isOpen-isAttached-bottom"
         data-popover-open="true"
         data-popover-panel="true"
         id="euiPopover_generated-id_panelId"
@@ -163,276 +163,204 @@ exports[`EuiComboBox renders the options list dropdown 1`] = `
                 class="euiComboBoxOptionsList__virtualization emotion-euiComboBoxOptionList__virtualization"
                 style="position: relative; height: 200px; width: 0px; overflow: auto; will-change: transform; direction: ltr;"
               >
-                <div
+                <ul
                   aria-label="Choose from the following options"
+                  aria-multiselectable="true"
                   id="generated-id_listbox"
                   role="listbox"
                   style="height: 290px; width: 100%;"
                   tabindex="0"
                 >
-                  <button
+                  <li
                     aria-posinset="1"
                     aria-selected="false"
                     aria-setsize="10"
-                    class="euiFilterSelectItem emotion-euiFilterSelectItem"
+                    class="euiListItemLayout euiComboBoxOption emotion-euiListItemLayout-isInteractive"
                     data-test-subj="titanOption"
                     id="generated-id__option-0"
                     role="option"
                     style="position: absolute; left: 0px; top: 0px; height: 29px; width: 100%;"
                     title="Titan"
-                    type="button"
                   >
                     <span
-                      class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
+                      class="euiListItemLayout__content euiComboBoxOption__content emotion-euiListItemLayout__content"
                     >
                       <span
-                        class="euiFlexItem euiFilterSelectItem__content eui-textTruncate emotion-euiFlexItem-grow-1"
+                        class="euiListItemLayout__text emotion-euiListItemLayout__text-truncate"
                       >
-                        <span
-                          class="euiComboBoxOption__contentWrapper"
-                        >
-                          <span
-                            class="euiComboBoxOption__content eui-textTruncate"
-                          >
-                            Titan
-                          </span>
-                        </span>
+                        Titan
                       </span>
                     </span>
-                  </button>
-                  <button
+                  </li>
+                  <li
                     aria-posinset="2"
                     aria-selected="false"
                     aria-setsize="10"
-                    class="euiFilterSelectItem emotion-euiFilterSelectItem"
+                    class="euiListItemLayout euiComboBoxOption emotion-euiListItemLayout-isInteractive"
+                    data-test-subj="euiListItemLayout"
                     id="generated-id__option-1"
                     role="option"
                     style="position: absolute; left: 0px; top: 29px; height: 29px; width: 100%;"
                     title="Enceladus"
-                    type="button"
                   >
                     <span
-                      class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
+                      class="euiListItemLayout__content euiComboBoxOption__content emotion-euiListItemLayout__content"
                     >
                       <span
-                        class="euiFlexItem euiFilterSelectItem__content eui-textTruncate emotion-euiFlexItem-grow-1"
+                        class="euiListItemLayout__text emotion-euiListItemLayout__text-truncate"
                       >
-                        <span
-                          class="euiComboBoxOption__contentWrapper"
-                        >
-                          <span
-                            class="euiComboBoxOption__content eui-textTruncate"
-                          >
-                            Enceladus
-                          </span>
-                        </span>
+                        Enceladus
                       </span>
                     </span>
-                  </button>
-                  <button
+                  </li>
+                  <li
                     aria-posinset="3"
                     aria-selected="false"
                     aria-setsize="10"
-                    class="euiFilterSelectItem emotion-euiFilterSelectItem"
+                    class="euiListItemLayout euiComboBoxOption emotion-euiListItemLayout-isInteractive"
+                    data-test-subj="euiListItemLayout"
                     id="generated-id__option-2"
                     role="option"
                     style="position: absolute; left: 0px; top: 58px; height: 29px; width: 100%;"
                     title="Mimas"
-                    type="button"
                   >
                     <span
-                      class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
+                      class="euiListItemLayout__content euiComboBoxOption__content emotion-euiListItemLayout__content"
                     >
                       <span
-                        class="euiFlexItem euiFilterSelectItem__content eui-textTruncate emotion-euiFlexItem-grow-1"
+                        class="euiListItemLayout__text emotion-euiListItemLayout__text-truncate"
                       >
-                        <span
-                          class="euiComboBoxOption__contentWrapper"
-                        >
-                          <span
-                            class="euiComboBoxOption__content eui-textTruncate"
-                          >
-                            Mimas
-                          </span>
-                        </span>
+                        Mimas
                       </span>
                     </span>
-                  </button>
-                  <button
+                  </li>
+                  <li
                     aria-posinset="4"
                     aria-selected="false"
                     aria-setsize="10"
-                    class="euiFilterSelectItem emotion-euiFilterSelectItem"
+                    class="euiListItemLayout euiComboBoxOption emotion-euiListItemLayout-isInteractive"
+                    data-test-subj="euiListItemLayout"
                     id="generated-id__option-3"
                     role="option"
                     style="position: absolute; left: 0px; top: 87px; height: 29px; width: 100%;"
                     title="Dione"
-                    type="button"
                   >
                     <span
-                      class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
+                      class="euiListItemLayout__content euiComboBoxOption__content emotion-euiListItemLayout__content"
                     >
                       <span
-                        class="euiFlexItem euiFilterSelectItem__content eui-textTruncate emotion-euiFlexItem-grow-1"
+                        class="euiListItemLayout__text emotion-euiListItemLayout__text-truncate"
                       >
-                        <span
-                          class="euiComboBoxOption__contentWrapper"
-                        >
-                          <span
-                            class="euiComboBoxOption__content eui-textTruncate"
-                          >
-                            Dione
-                          </span>
-                        </span>
+                        Dione
                       </span>
                     </span>
-                  </button>
-                  <button
+                  </li>
+                  <li
                     aria-posinset="5"
                     aria-selected="false"
                     aria-setsize="10"
-                    class="euiFilterSelectItem emotion-euiFilterSelectItem"
+                    class="euiListItemLayout euiComboBoxOption emotion-euiListItemLayout-isInteractive"
+                    data-test-subj="euiListItemLayout"
                     id="generated-id__option-4"
                     role="option"
                     style="position: absolute; left: 0px; top: 116px; height: 29px; width: 100%;"
                     title="Iapetus"
-                    type="button"
                   >
                     <span
-                      class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
+                      class="euiListItemLayout__content euiComboBoxOption__content emotion-euiListItemLayout__content"
                     >
                       <span
-                        class="euiFlexItem euiFilterSelectItem__content eui-textTruncate emotion-euiFlexItem-grow-1"
+                        class="euiListItemLayout__text emotion-euiListItemLayout__text-truncate"
                       >
-                        <span
-                          class="euiComboBoxOption__contentWrapper"
-                        >
-                          <span
-                            class="euiComboBoxOption__content eui-textTruncate"
-                          >
-                            Iapetus
-                          </span>
-                        </span>
+                        Iapetus
                       </span>
                     </span>
-                  </button>
-                  <button
+                  </li>
+                  <li
                     aria-posinset="6"
                     aria-selected="false"
                     aria-setsize="10"
-                    class="euiFilterSelectItem emotion-euiFilterSelectItem"
+                    class="euiListItemLayout euiComboBoxOption emotion-euiListItemLayout-isInteractive"
+                    data-test-subj="euiListItemLayout"
                     id="generated-id__option-5"
                     role="option"
                     style="position: absolute; left: 0px; top: 145px; height: 29px; width: 100%;"
                     title="Phoebe"
-                    type="button"
                   >
                     <span
-                      class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
+                      class="euiListItemLayout__content euiComboBoxOption__content emotion-euiListItemLayout__content"
                     >
                       <span
-                        class="euiFlexItem euiFilterSelectItem__content eui-textTruncate emotion-euiFlexItem-grow-1"
+                        class="euiListItemLayout__text emotion-euiListItemLayout__text-truncate"
                       >
-                        <span
-                          class="euiComboBoxOption__contentWrapper"
-                        >
-                          <span
-                            class="euiComboBoxOption__content eui-textTruncate"
-                          >
-                            Phoebe
-                          </span>
-                        </span>
+                        Phoebe
                       </span>
                     </span>
-                  </button>
-                  <button
+                  </li>
+                  <li
                     aria-posinset="7"
                     aria-selected="false"
                     aria-setsize="10"
-                    class="euiFilterSelectItem emotion-euiFilterSelectItem"
+                    class="euiListItemLayout euiComboBoxOption emotion-euiListItemLayout-isInteractive"
+                    data-test-subj="euiListItemLayout"
                     id="generated-id__option-6"
                     role="option"
                     style="position: absolute; left: 0px; top: 174px; height: 29px; width: 100%;"
                     title="Rhea"
-                    type="button"
                   >
                     <span
-                      class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
+                      class="euiListItemLayout__content euiComboBoxOption__content emotion-euiListItemLayout__content"
                     >
                       <span
-                        class="euiFlexItem euiFilterSelectItem__content eui-textTruncate emotion-euiFlexItem-grow-1"
+                        class="euiListItemLayout__text emotion-euiListItemLayout__text-truncate"
                       >
-                        <span
-                          class="euiComboBoxOption__contentWrapper"
-                        >
-                          <span
-                            class="euiComboBoxOption__content eui-textTruncate"
-                          >
-                            Rhea
-                          </span>
-                        </span>
+                        Rhea
                       </span>
                     </span>
-                  </button>
-                  <button
+                  </li>
+                  <li
                     aria-posinset="8"
                     aria-selected="false"
                     aria-setsize="10"
-                    class="euiFilterSelectItem emotion-euiFilterSelectItem"
+                    class="euiListItemLayout euiComboBoxOption emotion-euiListItemLayout-isInteractive"
+                    data-test-subj="euiListItemLayout"
                     id="generated-id__option-7"
                     role="option"
                     style="position: absolute; left: 0px; top: 203px; height: 29px; width: 100%;"
                     title="Pandora is one of Saturn's moons, named for a Titaness of Greek mythology"
-                    type="button"
                   >
                     <span
-                      class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
+                      class="euiListItemLayout__content euiComboBoxOption__content emotion-euiListItemLayout__content"
                     >
                       <span
-                        class="euiFlexItem euiFilterSelectItem__content eui-textTruncate emotion-euiFlexItem-grow-1"
+                        class="euiListItemLayout__text emotion-euiListItemLayout__text-truncate"
                       >
-                        <span
-                          class="euiComboBoxOption__contentWrapper"
-                        >
-                          <span
-                            class="euiComboBoxOption__content eui-textTruncate"
-                          >
-                            Pandora is one of Saturn's moons, named for a Titaness of Greek mythology
-                          </span>
-                        </span>
+                        Pandora is one of Saturn's moons, named for a Titaness of Greek mythology
                       </span>
                     </span>
-                  </button>
-                  <button
+                  </li>
+                  <li
                     aria-posinset="9"
                     aria-selected="false"
                     aria-setsize="10"
-                    class="euiFilterSelectItem emotion-euiFilterSelectItem"
+                    class="euiListItemLayout euiComboBoxOption emotion-euiListItemLayout-isInteractive"
+                    data-test-subj="euiListItemLayout"
                     id="generated-id__option-8"
                     role="option"
                     style="position: absolute; left: 0px; top: 232px; height: 29px; width: 100%;"
                     title="Tethys"
-                    type="button"
                   >
                     <span
-                      class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
+                      class="euiListItemLayout__content euiComboBoxOption__content emotion-euiListItemLayout__content"
                     >
                       <span
-                        class="euiFlexItem euiFilterSelectItem__content eui-textTruncate emotion-euiFlexItem-grow-1"
+                        class="euiListItemLayout__text emotion-euiListItemLayout__text-truncate"
                       >
-                        <span
-                          class="euiComboBoxOption__contentWrapper"
-                        >
-                          <span
-                            class="euiComboBoxOption__content eui-textTruncate"
-                          >
-                            Tethys
-                          </span>
-                        </span>
+                        Tethys
                       </span>
                     </span>
-                  </button>
-                </div>
+                  </li>
+                </ul>
               </div>
             </div>
           </div>
diff --git a/packages/eui/src/components/combo_box/combo_box.a11y.tsx b/packages/eui/src/components/combo_box/combo_box.a11y.tsx
index 20e01a77f3e..b69485c400f 100644
--- a/packages/eui/src/components/combo_box/combo_box.a11y.tsx
+++ b/packages/eui/src/components/combo_box/combo_box.a11y.tsx
@@ -105,7 +105,7 @@ describe('EuiComboBox', () => {
       it('has zero violations when the combobox is expanded', () => {
         cy.realMount(<ComboBox rowHeight={rowHeight} />);
         cy.get('input[data-test-subj="comboBoxSearchInput"]').realClick();
-        cy.get('button[data-test-subj="titanOption"]').should('exist');
+        cy.get('[data-test-subj="titanOption"]').should('exist');
         cy.checkAxe();
       });
 
@@ -115,7 +115,7 @@ describe('EuiComboBox', () => {
         cy.get('input[data-test-subj="comboBoxSearchInput"]').should(
           'have.focus'
         );
-        cy.get('button[data-test-subj="titanOption"]').should('exist');
+        cy.get('[data-test-subj="titanOption"]').should('exist');
         cy.repeatRealPress('ArrowDown');
         cy.realPress('Enter');
         cy.repeatRealPress('ArrowDown');
@@ -150,7 +150,7 @@ describe('EuiComboBox', () => {
         cy.get('input[data-test-subj="comboBoxSearchInput"]').should(
           'have.focus'
         );
-        cy.get('button[data-test-subj="titanOption"]').should('exist');
+        cy.get('[data-test-subj="titanOption"]').should('exist');
         cy.realPress('ArrowDown');
         cy.realPress('ArrowDown');
         cy.realPress('ArrowDown');
@@ -164,7 +164,7 @@ describe('EuiComboBox', () => {
 
         cy.get('input[data-test-subj="comboBoxSearchInput"]')
           .invoke('attr', 'aria-activedescendant')
-          .should('include', 'option-3');
+          .should('include', 'option-4');
       });
 
       it('sets the correct aria-activedescendant id with custom option ids', () => {
@@ -206,7 +206,7 @@ describe('EuiComboBox', () => {
         cy.get('input[data-test-subj="comboBoxSearchInput"]').should(
           'have.focus'
         );
-        cy.get('button[data-test-subj="titanOption"]').should('exist');
+        cy.get('[data-test-subj="titanOption"]').should('exist');
         cy.realPress('ArrowDown');
         cy.realPress('ArrowDown');
         cy.realPress('ArrowDown');
diff --git a/packages/eui/src/components/combo_box/combo_box.spec.tsx b/packages/eui/src/components/combo_box/combo_box.spec.tsx
index be968013406..12cbdf8fc7b 100644
--- a/packages/eui/src/components/combo_box/combo_box.spec.tsx
+++ b/packages/eui/src/components/combo_box/combo_box.spec.tsx
@@ -81,13 +81,10 @@ describe('EuiComboBox', () => {
           ]}
         />
       );
-
       cy.get(
         '[data-test-subj=combobox] [data-test-subj=comboBoxSearchInput]'
       ).realClick();
-
       cy.get('span').contains('Item 2').realClick();
-
       cy.focused().should('have.attr', 'data-test-subj', 'comboBoxSearchInput');
     });
   });
@@ -314,7 +311,7 @@ describe('EuiComboBox', () => {
       cy.get('.euiTextTruncate').should('exist');
       cy.get('[data-test-subj="truncatedText"]').should(
         'have.text',
-        'Lorem ipsum …iscing elit.'
+        'Lorem ipsum…iscing elit.'
       );
     });
 
@@ -334,7 +331,7 @@ describe('EuiComboBox', () => {
       cy.get('[data-test-subj="comboBoxInput"]').realClick();
       cy.get('[data-test-subj="truncatedText"]').should(
         'have.text',
-        'Lorem…tur adipiscing elit.'
+        'Lorem…ur adipiscing elit.'
       );
     });
 
@@ -345,7 +342,7 @@ describe('EuiComboBox', () => {
         cy.realType('sit');
         cy.get('[data-test-subj="truncatedText"]').should(
           'have.text',
-          '…sum dolor sit amet, co…'
+          '…um dolor sit amet, co…'
         );
       });
 
@@ -365,7 +362,7 @@ describe('EuiComboBox', () => {
         cy.realType('eli');
         cy.get('[data-test-subj="truncatedText"]').should(
           'have.text',
-          '…nsectetur adipiscing elit.'
+          '…sectetur adipiscing elit.'
         );
       });
 
@@ -373,7 +370,7 @@ describe('EuiComboBox', () => {
         cy.realMount(<EuiComboBox {...sharedProps} />);
         cy.get('[data-test-subj="comboBoxInput"]').realClick();
         cy.realType('Lorem ipsum dolor sit amet');
-        cy.get('.euiMark').should('have.text', '…rem ipsum dolor sit am…');
+        cy.get('.euiMark').should('have.text', '…em ipsum dolor sit a…');
       });
     });
   });
@@ -461,7 +458,7 @@ describe('EuiComboBox', () => {
           cy.get('[data-test-subj="comboBoxInput"]').click();
 
           cy.get('[data-test-subj="comboBoxOptionsList"]')
-            .find('button')
+            .find('[role="option"]')
             .first()
             .click();
           cy.get('[data-test-subj="comboBoxOptionsList"]').should('not.exist');
@@ -483,7 +480,7 @@ describe('EuiComboBox', () => {
           cy.get('[data-test-subj="comboBoxSearchInput"]').click();
 
           cy.get('[data-test-subj="comboBoxOptionsList"]')
-            .find('button')
+            .find('[role="option"]')
             .first()
             .click();
           cy.get('[data-test-subj="comboBoxOptionsList"]').should('not.exist');
diff --git a/packages/eui/src/components/combo_box/combo_box.stories.tsx b/packages/eui/src/components/combo_box/combo_box.stories.tsx
index f8b14dc7c67..2ff2c657601 100644
--- a/packages/eui/src/components/combo_box/combo_box.stories.tsx
+++ b/packages/eui/src/components/combo_box/combo_box.stories.tsx
@@ -69,6 +69,8 @@ const meta: Meta<EuiComboBoxProps<{}>> = {
     compressed: false,
     fullWidth: false,
     onCreateOption: undefined, // Override Storybook's default callback
+    onFocusBadge: false,
+    'aria-label': 'Select an item',
   },
 };
 enableFunctionToggleControls(meta, ['onChange', 'onCreateOption']);
@@ -180,7 +182,7 @@ export const WithTooltip: Story = {
       toolTipContent: 'This is a tooltip!',
       toolTipProps: {
         position: 'left' as const,
-        ['data-test-subj']: 'tooltip',
+        ['data-test-subj']: `tooltip-${idx}`,
       },
       value: idx,
     })),
@@ -283,10 +285,57 @@ export const NestedOptionsGroups: Story = {
   render: (args) => <StatefulComboBox {...args} />,
 };
 
+export const CustomTruncation: Story = {
+  name: 'truncationProps',
+  parameters: {
+    controls: {
+      include: ['options', 'truncationProps'],
+    },
+    loki: {
+      chromeSelector: LOKI_SELECTORS.portal,
+    },
+  },
+  args: {
+    options: [
+      options[0],
+      { label: 'Item 2 with a long label that should truncation by default' },
+      {
+        label: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+        truncationProps: { truncation: 'start', truncationOffset: 5 },
+      },
+      ...options.slice(3, options.length),
+    ],
+    style: { width: 200 },
+    truncationProps: {
+      truncation: 'middle',
+    },
+    autoFocus: true,
+  },
+  render: (args) => <StatefulComboBox {...args} />,
+};
+
 /**
  * VRT only
  */
 
+export const DefaultTruncation: Story = {
+  tags: ['vrt-only'],
+  parameters: {
+    loki: {
+      chromeSelector: LOKI_SELECTORS.portal,
+    },
+  },
+  args: {
+    options: [
+      options[0],
+      { label: 'Item 2 with a long label that should truncation by default' },
+      ...options.slice(2, options.length),
+    ],
+    autoFocus: true,
+  },
+  render: (args) => <StatefulComboBox {...args} />,
+};
+
 export const IconsAndManyOptionsSelected: Story = {
   tags: ['vrt-only'],
   args: {
diff --git a/packages/eui/src/components/combo_box/combo_box.test.tsx b/packages/eui/src/components/combo_box/combo_box.test.tsx
index ac8031bc4f2..e3d377f0c6b 100644
--- a/packages/eui/src/components/combo_box/combo_box.test.tsx
+++ b/packages/eui/src/components/combo_box/combo_box.test.tsx
@@ -231,6 +231,9 @@ describe('EuiComboBox', () => {
             toolTipContent: 'I am a tooltip!',
             toolTipProps: {
               'data-test-subj': 'optionToolTip',
+              anchorProps: {
+                'data-test-subj': 'optionToolTipAnchor',
+              },
             },
           },
           {
@@ -245,7 +248,7 @@ describe('EuiComboBox', () => {
 
         await showEuiComboBoxOptions();
 
-        fireEvent.mouseOver(getByTestSubject('titanOption'));
+        fireEvent.mouseOver(getByTestSubject('optionToolTipAnchor'));
         await waitForEuiToolTipVisible();
 
         expect(getByTestSubject('optionToolTip')).toBeInTheDocument();
@@ -436,9 +439,8 @@ describe('EuiComboBox', () => {
       );
       await showEuiComboBoxOptions();
 
-      const dropdownOptions = baseElement.querySelectorAll(
-        '.euiFilterSelectItem'
-      );
+      const dropdownOptions =
+        baseElement.querySelectorAll('.euiComboBoxOption');
       expect(
         dropdownOptions[0]!.querySelector('[data-euiicon-type="check"]')
       ).toBeFalsy();
@@ -447,6 +449,23 @@ describe('EuiComboBox', () => {
       ).toBeTruthy();
     });
 
+    it('it renders a badge when onFocusBadge is `true`', async () => {
+      const { getByTestSubject, getAllByRole } = render(
+        <EuiComboBox options={options} onFocusBadge />
+      );
+
+      await showEuiComboBoxOptions();
+
+      // Navigate to an option (2 arrow downs: -1 -> 0 -> 1, so focused option is index 1)
+      const input = getByTestSubject('comboBoxSearchInput');
+      fireEvent.keyDown(input, { key: keys.ARROW_DOWN });
+
+      const focusedOption = getAllByRole('option')[0];
+      expect(
+        focusedOption.querySelector('.euiComboBoxOption__enterBadge')
+      ).toBeInTheDocument();
+    });
+
     describe('behavior', () => {
       describe('hitting "Enter"', () => {
         describe('when the search input matches a value', () => {
diff --git a/packages/eui/src/components/combo_box/combo_box.tsx b/packages/eui/src/components/combo_box/combo_box.tsx
index 463f5c31487..771227d4afc 100644
--- a/packages/eui/src/components/combo_box/combo_box.tsx
+++ b/packages/eui/src/components/combo_box/combo_box.tsx
@@ -40,7 +40,6 @@ import {
   EuiComboBoxInputProps,
   EuiComboBoxInput,
 } from './combo_box_input/combo_box_input';
-import { EuiComboBoxOptionsListProps } from './combo_box_options_list/combo_box_options_list';
 import {
   OptionHandler,
   RefInstance,
@@ -48,7 +47,10 @@ import {
   EuiComboBoxSingleSelectionShape,
   EuiComboBoxOptionMatcher,
 } from './types';
-import { EuiComboBoxOptionsList } from './combo_box_options_list';
+import {
+  EuiComboBoxOptionsList,
+  type EuiComboBoxOptionsListProps,
+} from './combo_box_options_list';
 import { euiComboBoxStyles as styles } from './combo_box.styles';
 
 type DrillProps<T> = Pick<
@@ -58,6 +60,7 @@ type DrillProps<T> = Pick<
   | 'options'
   | 'renderOption'
   | 'selectedOptions'
+  | 'onFocusBadge'
 >;
 
 export interface _EuiComboBoxProps<T>
@@ -169,7 +172,7 @@ export interface _EuiComboBoxProps<T>
   'aria-labelledby'?: string;
   /**
    * By default, EuiComboBox will truncate option labels at the end of
-   * the string. You can use pass in a custom truncation configuration that
+   * the string. You can pass in a custom truncation configuration that
    * accepts any [EuiTextTruncate](/#/utilities/text-truncation) prop,
    * except for `text` and `children`.
    *
@@ -213,7 +216,7 @@ interface EuiComboBoxState<T> {
   hasFocus: boolean;
   isListOpen: boolean;
   matchingOptions: Array<EuiComboBoxOptionOption<T>>;
-  listOptionRefs: Array<HTMLButtonElement | null>;
+  listOptionRefs: Array<HTMLLIElement | null>;
   searchValue: string;
 }
 
@@ -274,7 +277,11 @@ export class EuiComboBox<T> extends Component<
     this.listRefInstance = ref;
   };
 
-  setListOptionRefs = (node: HTMLButtonElement | null, index: number) => {
+  setListOptionRefs = (node: HTMLLIElement | null, index: number) => {
+    const current = this.state.listOptionRefs[index];
+    // Skip updating if the ref is null (on cleanup) or didn't change
+    if (node === null || node === current) return;
+
     this.setState(({ listOptionRefs }) => {
       const _listOptionRefs = listOptionRefs;
       _listOptionRefs[index] = node;
@@ -296,43 +303,48 @@ export class EuiComboBox<T> extends Component<
     this.setState({ isListOpen: false });
   };
 
-  incrementActiveOptionIndex = (amount: number) => {
-    // If there are no options available, do nothing.
-    if (!this.state.matchingOptions.length) {
-      return;
-    }
+  findNextSelectableOptionIndex = (
+    options: Array<EuiComboBoxOptionOption<T>>,
+    startIndex: number,
+    direction: 1 | -1 = 1
+  ): number => {
+    if (!options.length) return -1;
 
-    this.setState(({ activeOptionIndex, matchingOptions }) => {
-      let nextActiveOptionIndex;
-
-      if (activeOptionIndex < 0) {
-        // If this is the beginning of the user's keyboard navigation of the menu, then we'll focus
-        // either the first or last item.
-        nextActiveOptionIndex = amount < 0 ? matchingOptions.length - 1 : 0;
-      } else {
-        nextActiveOptionIndex = activeOptionIndex + amount;
-
-        if (nextActiveOptionIndex < 0) {
-          nextActiveOptionIndex = matchingOptions.length - 1;
-        } else if (nextActiveOptionIndex === matchingOptions.length) {
-          nextActiveOptionIndex = 0;
-        }
-      }
+    let index = startIndex;
 
-      // Group titles are included in option list but are not selectable
-      // Skip group title options
-      const direction = amount > 0 ? 1 : -1;
-      while (matchingOptions[nextActiveOptionIndex].isGroupLabelOption) {
-        nextActiveOptionIndex = nextActiveOptionIndex + direction;
+    for (let count = 0; count < options.length; count++) {
+      const option = options[index];
 
-        if (nextActiveOptionIndex < 0) {
-          nextActiveOptionIndex = matchingOptions.length - 1;
-        } else if (nextActiveOptionIndex === matchingOptions.length) {
-          nextActiveOptionIndex = 0;
-        }
+      if (!option.isGroupLabelOption && !option.disabled) {
+        return index;
       }
 
-      return { activeOptionIndex: nextActiveOptionIndex };
+      index = (index + direction + options.length) % options.length;
+    }
+
+    return -1; // the remaining options can't be selected (group labels or disabled)
+  };
+
+  incrementActiveOptionIndex = (amount: number) => {
+    if (!this.state.matchingOptions.length) return;
+    this.setState(({ activeOptionIndex, matchingOptions }) => {
+      const direction = amount > 0 ? 1 : -1;
+      const startIndex =
+        activeOptionIndex < 0
+          ? // Inintial interaction: jump to first or last item
+            amount < 0
+            ? matchingOptions.length - 1
+            : 0
+          : // Advance by amount, wrapping around
+            (activeOptionIndex + amount + matchingOptions.length) %
+            matchingOptions.length;
+      return {
+        activeOptionIndex: this.findNextSelectableOptionIndex(
+          matchingOptions,
+          startIndex,
+          direction
+        ),
+      };
     });
   };
 
@@ -515,6 +527,7 @@ export class EuiComboBox<T> extends Component<
       // firefox doesn't support calling .focus() during a blur event
       // https://bugzilla.mozilla.org/show_bug.cgi?id=53579
       requestAnimationFrame(() => {
+        console.log('return focus');
         this.searchInputRefInstance?.focus();
       });
     }
@@ -601,6 +614,8 @@ export class EuiComboBox<T> extends Component<
       selectedOptions,
       singleSelection: singleSelectionProp,
     } = this.props;
+    const { matchingOptions, listOptionRefs } = this.state;
+
     const singleSelection = Boolean(singleSelectionProp);
     const changeOptions = singleSelection
       ? [addedOption]
@@ -609,19 +624,33 @@ export class EuiComboBox<T> extends Component<
     onChange?.(changeOptions);
 
     this.clearSearchValue();
-    this.clearActiveOption();
-
-    if (!isContainerBlur) {
-      this.searchInputRefInstance?.focus();
-    }
 
     if (singleSelection) {
+      // List closes after single selection; return focus to the input
+      this.clearActiveOption();
+
+      if (!isContainerBlur) {
+        this.searchInputRefInstance?.focus();
+      }
+
       requestAnimationFrame(() => this.closeList());
+    } else if (isContainerBlur) {
+      // User tabbed away. `onContainerBlur` will close the list. We're only cleaning up state
+      this.clearActiveOption();
     } else {
-      this.setState(({ listOptionRefs, matchingOptions }) => ({
+      const currentIndex = matchingOptions.indexOf(addedOption);
+      const nextOptions = matchingOptions.filter(
+        (option) => option !== addedOption
+      );
+
+      this.setState({
         listOptionRefs: listOptionRefs.slice(0, matchingOptions.length - 1),
-        activeOptionIndex: matchingOptions.indexOf(addedOption),
-      }));
+        activeOptionIndex: this.findNextSelectableOptionIndex(
+          nextOptions,
+          Math.min(currentIndex, nextOptions.length - 1)
+          // direction defaults to 1 (forward)
+        ),
+      });
     }
   };
 
@@ -765,6 +794,7 @@ export class EuiComboBox<T> extends Component<
       delimiter,
       append,
       autoFocus,
+      onFocusBadge,
       truncationProps,
       inputPopoverProps,
       optionMatcher,
@@ -843,6 +873,7 @@ export class EuiComboBox<T> extends Component<
               getSelectedOptionForSearchValue={getSelectedOptionForSearchValue}
               listboxAriaLabel={listboxAriaLabel}
               truncationProps={truncationProps}
+              onFocusBadge={onFocusBadge}
             />
           )}
         </EuiI18n>
@@ -877,7 +908,7 @@ export class EuiComboBox<T> extends Component<
             >
               <EuiInputPopover
                 fullWidth={fullWidth}
-                panelPaddingSize="none"
+                panelPaddingSize="s"
                 disableFocusTrap={true}
                 closeOnScroll={true}
                 {...inputPopoverProps}
@@ -895,7 +926,13 @@ export class EuiComboBox<T> extends Component<
                         ? this.state.listOptionRefs[
                             this.state.activeOptionIndex
                           ]?.id ??
-                          this.rootId(`_option-${this.state.activeOptionIndex}`)
+                          // uses the original `options` array to ensure a stable `id`, otherwise `aria-activedescendant`
+                          // loses focus on selecting an option (due to actively removing it from the list)
+                          this.rootId(
+                            `_option-${this.props.options.indexOf(
+                              matchingOptions[activeOptionIndex]
+                            )}`
+                          )
                         : undefined
                     }
                     fullWidth={fullWidth}
diff --git a/packages/eui/src/components/combo_box/combo_box_options_list/combo_box_options_list.styles.ts b/packages/eui/src/components/combo_box/combo_box_options_list/combo_box_options_list.styles.ts
index 43b2aa36ec1..7f46e1e2ac5 100644
--- a/packages/eui/src/components/combo_box/combo_box_options_list/combo_box_options_list.styles.ts
+++ b/packages/eui/src/components/combo_box/combo_box_options_list/combo_box_options_list.styles.ts
@@ -11,11 +11,10 @@ import { css } from '@emotion/react';
 import { UseEuiTheme } from '../../../services';
 import {
   logicalCSS,
-  mathWithUnits,
   euiScrollBarStyles,
   euiTextBreakWord,
+  euiYScrollWithShadows,
 } from '../../../global_styling';
-import { euiTitle } from '../../title/title.styles';
 
 export const LIST_MAX_HEIGHT = 200;
 
@@ -61,22 +60,12 @@ export const euiComboBoxOptionListStyles = (euiThemeContext: UseEuiTheme) => {
       .euiComboBoxOption__enterBadge {
         ${logicalCSS('margin-left', euiTheme.size.xs)}
       }
-
-      .euiComboBoxTitle {
-        display: flex;
-        ${logicalCSS('padding-horizontal', euiTheme.size.s)}
-        /* Force each title to be the same height as an option, so that the virtualized scroll logic works */
-        ${logicalCSS(
-          'padding-top',
-          mathWithUnits(euiTheme.size.s, (x) => x + 1)
-        )}
-        ${logicalCSS('padding-bottom', euiTheme.size.xs)}
-        ${euiTitle(euiThemeContext, 'xxxs')}
-      }
     `,
     /* eslint-disable local/css-logical-properties */
     hasRowHeightAuto: css`
-      overflow-y: auto;
+      ${euiYScrollWithShadows(euiThemeContext, {
+        hasAnimatedOverflowShadow: true,
+      })}
 
       .euiComboBoxOption__contentWrapper {
         align-items: flex-start;
@@ -87,7 +76,9 @@ export const euiComboBoxOptionListStyles = (euiThemeContext: UseEuiTheme) => {
     /* eslint-enable local/css-logical-properties */
 
     euiComboBoxOptionList__virtualization: css`
-      ${euiScrollBarStyles(euiThemeContext)}
+      ${euiYScrollWithShadows(euiThemeContext, {
+        hasAnimatedOverflowShadow: true,
+      })}
     `,
 
     euiComboBoxOptionsList__empty: css`
diff --git a/packages/eui/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx b/packages/eui/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx
index b040ceb0802..199b0e03c87 100644
--- a/packages/eui/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx
+++ b/packages/eui/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx
@@ -6,13 +6,20 @@
  * Side Public License, v 1.
  */
 
-import React, { Component, ContextType, ReactNode, RefCallback } from 'react';
+import React, {
+  Component,
+  ContextType,
+  ReactNode,
+  RefCallback,
+  RefObject,
+  createRef,
+} from 'react';
 import classNames from 'classnames';
 import {
-  FixedSizeList,
-  FixedSizeListProps,
   ListProps,
   ListChildComponentProps,
+  VariableSizeList,
+  VariableSizeListProps,
 } from 'react-window';
 
 import {
@@ -26,13 +33,13 @@ import { EuiMark } from '../../mark';
 import { EuiText } from '../../text';
 import { EuiLoadingSpinner } from '../../loading';
 import { EuiI18n } from '../../i18n';
-import {
-  EuiFilterSelectItem,
-  FilterChecked,
-} from '../../filter_group/filter_select_item';
+import { FilterChecked } from '../../filter_group/filter_select_item';
+import { euiSelectableListGroupLabelStyles } from '../../selectable/selectable_list/selectable_list.styles';
+import { getListItemSize } from '../../selectable/selectable_list/utils/get_list_item_size';
 import { EuiBadge } from '../../badge';
 import { EuiTextTruncate } from '../../text_truncate';
 import { EuiInputPopoverWidthContext } from '../../popover/input_popover';
+import { EuiListItemLayout } from '../../list_item_layout';
 
 import type { _EuiComboBoxProps } from '../combo_box';
 import {
@@ -40,8 +47,6 @@ import {
   EuiComboBoxSingleSelectionShape,
   OptionHandler,
 } from '../types';
-import { EuiComboBoxOptionAppendPrepend } from '../utils';
-import { EuiComboBoxTitle } from './combo_box_title';
 import {
   euiComboBoxOptionListStyles,
   LIST_MAX_HEIGHT,
@@ -65,7 +70,7 @@ export type EuiComboBoxOptionsListProps<T> = CommonProps & {
   isCaseSensitive?: boolean;
   isLoading?: boolean;
   listRef: RefCallback<HTMLDivElement>;
-  setListOptionRefs: (ref: HTMLButtonElement | null, index: number) => void;
+  setListOptionRefs: (ref: HTMLLIElement | null, index: number) => void;
   matchingOptions: Array<EuiComboBoxOptionOption<T>>;
   onCloseList: (event: Event) => void;
   onCreateOption?: (
@@ -92,6 +97,7 @@ export type EuiComboBoxOptionsListProps<T> = CommonProps & {
   singleSelection?: boolean | EuiComboBoxSingleSelectionShape;
   delimiter?: string;
   truncationProps?: _EuiComboBoxProps<T>['truncationProps'];
+  onFocusBadge?: boolean;
 };
 
 const hitEnterBadge = (
@@ -106,7 +112,9 @@ const hitEnterBadge = (
 export class EuiComboBoxOptionsList<T> extends Component<
   EuiComboBoxOptionsListProps<T>
 > {
-  listRef: FixedSizeList | null = null;
+  listRef: VariableSizeList | null = null;
+  listBoxRef: RefObject<HTMLUListElement> = createRef();
+  optionRefs: Record<number, HTMLLIElement | null> = {};
 
   static contextType = EuiInputPopoverWidthContext;
   declare context: ContextType<typeof EuiInputPopoverWidthContext>;
@@ -118,28 +126,41 @@ export class EuiComboBoxOptionsList<T> extends Component<
   };
 
   componentDidUpdate(prevProps: EuiComboBoxOptionsListProps<T>) {
+    const { activeOptionIndex, rowHeight } = this.props;
+
     if (
       this.listRef &&
-      typeof this.props.activeOptionIndex !== 'undefined' &&
-      this.props.activeOptionIndex !== prevProps.activeOptionIndex &&
-      this.props.rowHeight !== 'auto'
+      typeof activeOptionIndex !== 'undefined' &&
+      activeOptionIndex !== prevProps.activeOptionIndex &&
+      rowHeight !== 'auto'
     ) {
-      this.listRef.scrollToItem(this.props.activeOptionIndex, 'auto');
+      // NOTE: The 'auto' setting results in the item being scrolled to the top/end edge;
+      // We could consider changing it to 'center' to keep items further way from the listbox edges.
+      this.listRef.scrollToItem(activeOptionIndex, 'auto');
+    } else if (rowHeight === 'auto') {
+      this.optionRefs[activeOptionIndex ?? 0]?.scrollIntoView?.({
+        block: 'nearest',
+      });
     }
   }
 
-  setListRef = (ref: FixedSizeList | null) => {
+  setListRef = (ref: VariableSizeList | null) => {
     this.listRef = ref;
   };
 
-  ListInnerElement: FixedSizeListProps['innerElementType'] = ({
+  setOptionRef = (ref: HTMLLIElement | null, index: number) => {
+    this.optionRefs[index] = ref;
+    this.props.setListOptionRefs?.(ref, index);
+  };
+
+  ListInnerElement: VariableSizeListProps['innerElementType'] = ({
     children,
     ...rest
   }) => {
     return (
-      <div {...rest} {...this.getListInnerElementProps()}>
+      <ul {...rest} {...this.getListInnerElementProps()}>
         {children}
-      </div>
+      </ul>
     );
   };
 
@@ -153,9 +174,12 @@ export class EuiComboBoxOptionsList<T> extends Component<
       prepend,
       append,
       truncationProps: _truncationProps,
+      toolTipContent,
+      toolTipProps,
       ...rest
     } = option;
     const {
+      options,
       singleSelection,
       selectedOptions,
       onOptionClick,
@@ -164,7 +188,7 @@ export class EuiComboBoxOptionsList<T> extends Component<
       searchValue,
       rootId,
       matchingOptions,
-      setListOptionRefs,
+      onFocusBadge,
       rowHeight,
     } = this.props;
 
@@ -178,13 +202,25 @@ export class EuiComboBoxOptionsList<T> extends Component<
 
     if (isGroupLabelOption) {
       return (
-        <div key={key ?? label} style={style}>
-          <EuiComboBoxTitle>
-            {prepend}
-            {label}
-            {append}
-          </EuiComboBoxTitle>
-        </div>
+        <RenderWithEuiStylesMemoizer>
+          {(stylesMemoizer) => {
+            const styles = stylesMemoizer(euiSelectableListGroupLabelStyles);
+
+            return (
+              <li
+                key={key ?? label}
+                style={style}
+                role="presentation"
+                className="euiComboBoxTitle"
+                css={styles.groupLabel}
+              >
+                {prepend}
+                {label}
+                {append}
+              </li>
+            );
+          }}
+        </RenderWithEuiStylesMemoizer>
       );
     }
 
@@ -201,55 +237,67 @@ export class EuiComboBoxOptionsList<T> extends Component<
     const optionIsFocused = activeOptionIndex === index;
     const optionIsDisabled =
       option.hasOwnProperty('disabled') && option.disabled === true;
+    const hasOnFocusBadge =
+      onFocusBadge && optionIsFocused && !optionIsDisabled;
 
     return (
-      <EuiFilterSelectItem
-        style={style}
+      <EuiListItemLayout
+        component="li"
+        role="option"
+        // uses `aria-selected` over `aria-checked` for multi-selection as the selected options are removed from the list
+        selectionMode="selected"
+        className="euiComboBoxOption"
+        ref={(node: HTMLLIElement | null) => this.setOptionRef(node, index)}
+        // uses the original `options` array for the index to ensure a stable `id`, otherwise `aria-activedescendant`
+        // loses focus on selecting an option (due to actively removing it from the list)
+        id={rootId(`_option-${options.indexOf(option)}`)}
         key={option.key ?? option.label}
+        title={label}
+        prepend={option.prepend}
+        append={
+          hasOnFocusBadge ? (
+            <>
+              {option.append}
+              {hitEnterBadge}
+            </>
+          ) : (
+            option.append
+          )
+        }
+        checked={checked}
+        isFocused={optionIsFocused}
+        isSelected={!optionIsDisabled && checked !== undefined}
+        isDisabled={optionIsDisabled}
+        isSingleSelection={!!singleSelection}
+        showIndicator={!!singleSelection}
+        textWrap={rowHeight !== 'auto' ? 'truncate' : 'wrap'}
+        tooltipProps={
+          toolTipContent
+            ? {
+                ...toolTipProps,
+                content: toolTipContent,
+              }
+            : undefined
+        }
+        style={style}
+        aria-setsize={matchingOptions.length}
+        aria-posinset={optionIndex + 1}
+        contentProps={{
+          className: 'euiComboBoxOption__content',
+        }}
         onClick={() => {
           if (onOptionClick) {
             onOptionClick(option);
           }
         }}
-        isFocused={optionIsFocused}
-        checked={checked}
-        showIcons={singleSelection ? true : false}
-        truncateContent={rowHeight !== 'auto'}
-        id={rootId(`_option-${index}`)}
-        title={label}
-        aria-setsize={matchingOptions.length}
-        aria-posinset={optionIndex + 1}
-        forwardRef={(ref) => setListOptionRefs(ref, index)}
         {...rest}
       >
-        <span className="euiComboBoxOption__contentWrapper">
-          <EuiComboBoxOptionAppendPrepend
-            option={option}
-            classNamePrefix="euiComboBoxOption"
-            marginSize="s"
-          >
-            {/* Note for possible future refactor: `eui-textTruncate` here
-            is redundant beacuse it's already applied in EuiFilterSelectItem */}
-            <span
-              className={classNames(
-                'euiComboBoxOption__content',
-                rowHeight !== 'auto' && 'eui-textTruncate'
-              )}
-            >
-              {renderOption
-                ? renderOption(
-                    option,
-                    searchValue,
-                    'euiComboBoxOption__renderOption'
-                  )
-                : rowHeight === 'auto'
-                ? this.renderVariableHeightOption(label)
-                : this.renderTruncatedOption(label, truncationProps)}
-            </span>
-          </EuiComboBoxOptionAppendPrepend>
-          {optionIsFocused && !optionIsDisabled ? hitEnterBadge : null}
-        </span>
-      </EuiFilterSelectItem>
+        {renderOption
+          ? renderOption(option, searchValue, 'euiComboBoxOption__renderOption')
+          : rowHeight === 'auto'
+          ? this.renderVariableHeightOption(label)
+          : this.renderTruncatedOption(label, truncationProps)}
+      </EuiListItemLayout>
     );
   };
 
@@ -258,6 +306,8 @@ export class EuiComboBoxOptionsList<T> extends Component<
       'aria-label': this.props.listboxAriaLabel,
       id: this.props.rootId('listbox'),
       role: 'listbox',
+      'aria-multiselectable':
+        this.props.singleSelection === false ? true : undefined,
       tabIndex: 0,
     };
   };
@@ -341,6 +391,13 @@ export class EuiComboBoxOptionsList<T> extends Component<
     );
   };
 
+  getItemSize = (index: number): number => {
+    const { rowHeight } = this.props as { rowHeight: number };
+    const option = this.props.matchingOptions[index];
+
+    return getListItemSize(index, rowHeight, !!option?.isGroupLabelOption);
+  };
+
   render() {
     const {
       'data-test-subj': dataTestSubj,
@@ -367,6 +424,7 @@ export class EuiComboBoxOptionsList<T> extends Component<
       selectedOptions,
       singleSelection,
       delimiter,
+      onFocusBadge,
       truncationProps,
       listboxAriaLabel,
       setListOptionRefs,
@@ -504,6 +562,11 @@ export class EuiComboBoxOptionsList<T> extends Component<
       boundedHeight = height > LIST_MAX_HEIGHT ? LIST_MAX_HEIGHT : height;
     }
 
+    /* We need to consider the panel padding (2 * 8px) but should only subtract it if
+    the panel width has already been set. */
+    const listWidth =
+      this.context && this.context > 0 ? this.context - 16 : this.context;
+
     return (
       <RenderWithEuiStylesMemoizer>
         {(stylesMemoizer) => {
@@ -528,31 +591,33 @@ export class EuiComboBoxOptionsList<T> extends Component<
                   {emptyStateContent}
                 </EuiText>
               ) : rowHeight === 'auto' ? (
-                <div {...this.getListInnerElementProps()}>
+                <ul ref={this.listBoxRef} {...this.getListInnerElementProps()}>
                   {matchingOptions.map((_, index) => (
                     <this.ListRow
                       data={matchingOptions}
                       index={index}
-                      key={index} // same as FixedSizeList's default
+                      key={index} // same as VariableSizeList's default
                       style={{}}
                     />
                   ))}
-                </div>
+                </ul>
               ) : (
-                <FixedSizeList
+                <VariableSizeList
                   css={styles.euiComboBoxOptionList__virtualization}
                   className="euiComboBoxOptionsList__virtualization"
                   height={boundedHeight}
                   onScroll={onScroll}
                   itemCount={matchingOptions.length}
-                  itemSize={rowHeight}
+                  itemSize={this.getItemSize}
                   itemData={matchingOptions}
+                  // Prevents scrollbar jump before VariableSizeList populates the cached size
+                  estimatedItemSize={rowHeight}
                   ref={this.setListRef}
                   innerElementType={this.ListInnerElement}
-                  width={this.context}
+                  width={listWidth}
                 >
                   {this.ListRow}
-                </FixedSizeList>
+                </VariableSizeList>
               )}
             </div>
           );
diff --git a/packages/eui/src/components/filter_group/filter_group.a11y.tsx b/packages/eui/src/components/filter_group/filter_group.a11y.tsx
index c006e038d63..41c82864b15 100644
--- a/packages/eui/src/components/filter_group/filter_group.a11y.tsx
+++ b/packages/eui/src/components/filter_group/filter_group.a11y.tsx
@@ -253,20 +253,26 @@ describe('EuiFilterGroup multiselect example', () => {
       cy.realPress('Tab');
       cy.repeatRealPress('ArrowDown', 4);
       cy.realPress('Enter');
-      cy.get('li[aria-selected="true"]')
-        .find('span.euiSelectableListItem__text')
-        .should(
-          'have.text',
-          'Dmitri Shostakovich. Checked option. To exclude this option, press Enter.'
-        );
+      cy.get('input[role="combobox"]').then(($input) => {
+        const activeOptionId = $input.attr('aria-activedescendant');
+        cy.get(`li[id="${activeOptionId}"]`)
+          .find('span.euiSelectableListItem__text')
+          .should(
+            'have.text',
+            'Dmitri Shostakovich. Checked option. To exclude this option, press Enter.'
+          );
+      });
       cy.realPress('ArrowDown');
       cy.repeatRealPress('Enter');
-      cy.get('li[aria-selected="true"]')
-        .find('span.euiSelectableListItem__text')
-        .should(
-          'have.text',
-          'Felix Mendelssohn-Bartholdy. Excluded option. To uncheck this option, press Enter.'
-        );
+      cy.get('input[role="combobox"]').then(($input) => {
+        const activeOptionId = $input.attr('aria-activedescendant');
+        cy.get(`li[id="${activeOptionId}"]`)
+          .find('span.euiSelectableListItem__text')
+          .should(
+            'have.text',
+            'Felix Mendelssohn-Bartholdy. Excluded option. To uncheck this option, press Enter.'
+          );
+      });
       cy.checkAxe();
     });
 
diff --git a/packages/eui/src/components/list_item_layout/__snapshots__/_list_item_layout.test.tsx.snap b/packages/eui/src/components/list_item_layout/__snapshots__/_list_item_layout.test.tsx.snap
new file mode 100644
index 00000000000..bdab5dc5f6a
--- /dev/null
+++ b/packages/eui/src/components/list_item_layout/__snapshots__/_list_item_layout.test.tsx.snap
@@ -0,0 +1,89 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiListItemLayout is rendered as anchor element 1`] = `
+<a
+  class="euiListItemLayout emotion-euiListItemLayout-isInteractive"
+  data-test-subj="euiListItemLayout"
+>
+  <span
+    class="euiListItemLayout__content emotion-euiListItemLayout__content"
+  >
+    <span
+      class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+      color="text"
+      data-euiicon-type="empty"
+    />
+    <span
+      class="euiListItemLayout__text emotion-euiListItemLayout__text-truncate"
+    >
+      Option
+    </span>
+  </span>
+</a>
+`;
+
+exports[`EuiListItemLayout is rendered as button element 1`] = `
+<button
+  class="euiListItemLayout emotion-euiListItemLayout-isInteractive"
+  data-test-subj="euiListItemLayout"
+>
+  <span
+    class="euiListItemLayout__content emotion-euiListItemLayout__content"
+  >
+    <span
+      class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+      color="text"
+      data-euiicon-type="empty"
+    />
+    <span
+      class="euiListItemLayout__text emotion-euiListItemLayout__text-truncate"
+    >
+      Option
+    </span>
+  </span>
+</button>
+`;
+
+exports[`EuiListItemLayout is rendered as div element 1`] = `
+<div
+  class="euiListItemLayout emotion-euiListItemLayout-isInteractive"
+  data-test-subj="euiListItemLayout"
+>
+  <span
+    class="euiListItemLayout__content emotion-euiListItemLayout__content"
+  >
+    <span
+      class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+      color="text"
+      data-euiicon-type="empty"
+    />
+    <span
+      class="euiListItemLayout__text emotion-euiListItemLayout__text-truncate"
+    >
+      Option
+    </span>
+  </span>
+</div>
+`;
+
+exports[`EuiListItemLayout is rendered as li element 1`] = `
+<li
+  class="euiListItemLayout emotion-euiListItemLayout-isInteractive"
+  data-test-subj="euiListItemLayout"
+>
+  <span
+    class="euiListItemLayout__content emotion-euiListItemLayout__content"
+  >
+    <span
+      class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+      color="text"
+      data-euiicon-type="empty"
+    />
+    <span
+      class="euiListItemLayout__text emotion-euiListItemLayout__text-truncate"
+    >
+      Option
+    </span>
+  </span>
+</li>
+`;
diff --git a/packages/eui/src/components/list_item_layout/_list_item_layout.stories.tsx b/packages/eui/src/components/list_item_layout/_list_item_layout.stories.tsx
new file mode 100644
index 00000000000..049c5a0bc30
--- /dev/null
+++ b/packages/eui/src/components/list_item_layout/_list_item_layout.stories.tsx
@@ -0,0 +1,466 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { cloneElement, isValidElement } from 'react';
+import { css } from '@emotion/react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { LOKI_SELECTORS } from '../../../.storybook/loki';
+
+import { EuiFlexGroup, EuiFlexItem } from '../flex';
+import { EuiIcon } from '../icon';
+import { EuiBadge } from '../badge';
+import { EuiButtonIcon } from '../button';
+import { EuiText } from '../text';
+import { EuiCode } from '../code';
+import { EuiSpacer } from '../spacer';
+import {
+  EuiListItemLayout,
+  type EuiListItemLayoutProps,
+  type EuiListItemLayoutAsLi,
+  type EuiListItemLayoutAsDiv,
+  type EuiListItemLayoutAsButton,
+  type EuiListItemLayoutAsAnchor,
+} from './_list_item_layout';
+
+type EuiListItemLayoutStoryProps = EuiListItemLayoutProps & {
+  checkedSingle: 'on' | undefined;
+};
+
+/* Story HOC to pass the correct `checked` control value to the component, since we're
+conditionally switching between `checked` and `checkedSingle` to advocate expected usage */
+const StoryRender = ({
+  checkedSingle,
+  checked,
+  isSingleSelection,
+  ...args
+}: EuiListItemLayoutStoryProps) => {
+  return (
+    <EuiListItemLayout
+      {...(args as EuiListItemLayoutProps)}
+      isSingleSelection={isSingleSelection}
+      checked={isSingleSelection ? checkedSingle : checked}
+    />
+  );
+};
+
+const meta: Meta<EuiListItemLayoutProps> = {
+  title: 'Internal/EuiListItemLayout',
+  component: EuiListItemLayout,
+  parameters: {
+    loki: {
+      chromeSelector: LOKI_SELECTORS.portal,
+    },
+  },
+  argTypes: {
+    component: {
+      control: 'radio',
+      options: ['li', 'div', 'button', 'a'],
+    },
+    checked: {
+      control: 'radio',
+      options: ['on', 'off', 'mixed', undefined],
+      if: { arg: 'isSingleSelection', truthy: false }, // show for multi selection only
+    },
+    // @ts-expect-error - custom variant of `checked` control that isn't a standalone prop
+    checkedSingle: {
+      name: 'checked',
+      control: 'radio',
+      options: ['on', undefined],
+      if: { arg: 'isSingleSelection' }, // show for single selection only
+    },
+    prepend: {
+      control: 'radio',
+      options: ['icon', 'text', undefined],
+      mapping: {
+        icon: <EuiIcon type="info" />,
+        text: '(Prepend)',
+        undefined: undefined,
+      },
+    },
+    append: {
+      control: 'radio',
+      options: ['text', 'badge', undefined],
+      mapping: {
+        badge: <EuiBadge color="hollow">Badge</EuiBadge>,
+        text: '(Append)',
+        undefined: undefined,
+      },
+    },
+    extraAction: {
+      control: 'radio',
+      options: ['action', undefined],
+      mapping: {
+        action: (
+          <EuiButtonIcon
+            iconType="arrowRight"
+            color="text"
+            aria-label="Extra action"
+          />
+        ),
+        undefined: undefined,
+      },
+    },
+    href: {
+      control: 'text',
+    },
+    target: {
+      control: 'text',
+    },
+    rel: {
+      control: 'text',
+    },
+    role: {
+      control: 'text',
+    },
+  },
+  args: {
+    component: 'li',
+    checked: undefined,
+    prepend: undefined,
+    append: undefined,
+    isDisabled: false,
+    isFocused: false,
+    isSelected: false,
+    isSingleSelection: false,
+    href: undefined,
+    target: undefined,
+    rel: undefined,
+    showIndicator: true,
+  },
+  render: (args) => <StoryRender {...(args as EuiListItemLayoutStoryProps)} />,
+};
+
+export default meta;
+type Story = StoryObj<EuiListItemLayoutProps>;
+
+export const Playground: Story = {
+  // TODO: uncomment after review
+  // tags: ['vrt-only'],
+  args: {
+    children: 'List item',
+  },
+  render: function Render(args) {
+    const { isDisabled, extraAction, ...rest } = args as EuiListItemLayoutProps;
+
+    // mimic implementation handling of synchronized disabled state
+    const _extraAction =
+      extraAction != null && isValidElement(extraAction)
+        ? cloneElement(extraAction, {
+            ...extraAction.props,
+            disabled: isDisabled,
+          })
+        : extraAction;
+
+    return (
+      <StoryRender
+        {...(rest as EuiListItemLayoutStoryProps)}
+        extraAction={_extraAction}
+      />
+    );
+  },
+};
+
+export const Role: Story = {
+  // TODO: uncomment after review
+  // tags: ['vrt-only'],
+  parameters: {
+    controls: {
+      include: ['component', 'role', 'checked', 'isSelected', 'children'],
+    },
+  },
+  args: {
+    children: 'List item',
+    role: 'menuitemcheckbox',
+  },
+};
+
+export const ExtraAction: Story = {
+  // TODO: uncomment after review
+  // tags: ['vrt-only'],
+  name: 'extraAction',
+  parameters: {
+    controls: {
+      include: ['component', 'extraAction', 'children'],
+    },
+  },
+  args: {
+    children: 'List item',
+    extraAction: 'action',
+  },
+};
+
+export const TooltipProps: Story = {
+  // TODO: uncomment after review
+  // tags: ['vrt-only'],
+  name: 'tooltipProps',
+  parameters: {
+    controls: {
+      include: ['component', 'tooltipProps', 'isFocused', 'children'],
+    },
+  },
+  args: {
+    children: 'List item',
+    component: 'button',
+    isFocused: true,
+    tooltipProps: {
+      title: 'Tooltip',
+      content: 'Tooltip content',
+      delay: 'none',
+      position: 'bottom',
+    },
+  },
+};
+
+export const ExtraActionAndTooltipProps: Story = {
+  // TODO: uncomment after review
+  // tags: ['vrt-only'],
+  name: 'extraAction & tooltipProps',
+  parameters: {
+    controls: {
+      include: [
+        'component',
+        'tooltipProps',
+        'extraAction',
+        'isFocused',
+        'children',
+      ],
+    },
+  },
+  args: {
+    children: 'List item',
+    component: 'button',
+    isFocused: true,
+    extraAction: 'action',
+    tooltipProps: {
+      title: 'Tooltip',
+      content: 'Tooltip content',
+      delay: 'none',
+      position: 'bottom',
+    },
+  },
+};
+
+export const Truncation: Story = {
+  // TODO: uncomment after review
+  // tags: ['vrt-only'],
+  name: 'textWrap: truncate',
+  parameters: {
+    controls: {
+      include: ['component', 'textWrap', 'children'],
+    },
+  },
+  args: {
+    children: 'List item with long label that should be truncated',
+    textWrap: 'truncate',
+  },
+  render: (args) => (
+    <div
+      css={css`
+        inline-size: 250px;
+      `}
+    >
+      <StoryRender {...(args as EuiListItemLayoutStoryProps)} />
+    </div>
+  ),
+};
+
+export const TextWrap: Story = {
+  // TODO: uncomment after review
+  // tags: ['vrt-only'],
+  name: 'textWrap: wrap',
+  parameters: {
+    controls: {
+      include: ['component', 'textWrap', 'children'],
+    },
+  },
+  args: {
+    children: 'List item with long label that should break into a new line',
+    textWrap: 'wrap',
+  },
+  render: (args) => (
+    <div
+      css={css`
+        inline-size: 250px;
+      `}
+    >
+      <StoryRender {...(args as EuiListItemLayoutStoryProps)} />
+    </div>
+  ),
+};
+
+export const KitchenSink: Story = {
+  // TODO: uncomment after review
+  // tags: ['vrt-only'],
+  parameters: {
+    controls: {
+      include: ['isDisabled', 'isFocused', 'isSelected', 'children'],
+    },
+  },
+  args: {
+    component: 'li',
+    children: 'List item',
+  },
+  render: function Render(args) {
+    return (
+      <>
+        <EuiFlexGroup direction="row" gutterSize="m">
+          <EuiFlexItem>
+            {renderKitchenSink({
+              ...args,
+              component: 'li',
+            } as EuiListItemLayoutAsLi)}
+          </EuiFlexItem>
+
+          <EuiFlexItem>
+            {renderKitchenSink({
+              ...args,
+              component: 'div',
+            } as EuiListItemLayoutAsDiv)}
+          </EuiFlexItem>
+        </EuiFlexGroup>
+
+        <EuiSpacer size="xl" />
+
+        <EuiFlexGroup direction="row" gutterSize="m">
+          <EuiFlexItem>
+            {renderKitchenSink({
+              ...args,
+              component: 'button',
+            } as EuiListItemLayoutAsButton)}
+          </EuiFlexItem>
+
+          <EuiFlexItem>
+            {renderKitchenSink({
+              ...args,
+              component: 'a',
+              href: '#',
+            } as EuiListItemLayoutAsAnchor)}
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </>
+    );
+  },
+};
+
+const renderKitchenSink = (args: EuiListItemLayoutProps) => {
+  const { children, component, isDisabled } = args;
+
+  const _prepend = <EuiIcon type="info" />;
+  const _append = <EuiBadge color="hollow">Badge</EuiBadge>;
+  const _extraAction = (
+    <EuiButtonIcon
+      iconType="arrowRight"
+      color="text"
+      isDisabled={isDisabled}
+      aria-label="Button icon label"
+    />
+  );
+
+  return (
+    <>
+      <EuiText size="s">
+        <EuiCode>component="{component}"</EuiCode>
+      </EuiText>
+      <EuiSpacer size="m" />
+
+      <EuiFlexGroup component="ul" direction="column" gutterSize="none">
+        <EuiListItemLayout {...args}>
+          {children} <small>(default)</small>
+        </EuiListItemLayout>
+        <EuiListItemLayout {...args} prepend={_prepend}>
+          {children} <small>(prepend)</small>
+        </EuiListItemLayout>
+
+        <EuiListItemLayout {...args} checked="on">
+          {children} <small>(checked=on)</small>
+        </EuiListItemLayout>
+        <EuiListItemLayout {...args}>
+          {children} <small>(checked=undefined)</small>
+        </EuiListItemLayout>
+        <EuiListItemLayout {...args} checked="mixed">
+          {children} <small>(checked=mixed)</small>
+        </EuiListItemLayout>
+        <EuiListItemLayout {...args} checked="off">
+          {children} <small>(checked=off)</small>
+        </EuiListItemLayout>
+
+        <EuiListItemLayout {...args} isSingleSelection checked="on">
+          {children} <small>(isSingleSelection & checked=on)</small>
+        </EuiListItemLayout>
+        <EuiListItemLayout {...args} isSingleSelection>
+          {children} <small>(isSingleSelection & checked=undefined)</small>
+        </EuiListItemLayout>
+
+        <EuiListItemLayout {...args} append={_append}>
+          {children} <small>(append)</small>
+        </EuiListItemLayout>
+        <EuiListItemLayout
+          {...args}
+          append={_append}
+          extraAction={_extraAction}
+        >
+          {children} <small>(append & extraAction)</small>
+        </EuiListItemLayout>
+        <EuiListItemLayout
+          {...args}
+          checked="on"
+          prepend={_prepend}
+          append={_append}
+          extraAction={_extraAction}
+        >
+          {children}{' '}
+          <small>(checked=on & prepend & append & extraAction)</small>
+        </EuiListItemLayout>
+
+        <EuiListItemLayout
+          {...args}
+          tooltipProps={{
+            content: 'Tooltip content',
+            delay: 'regular',
+            position: 'bottom',
+          }}
+        >
+          {children} <small>(tooltipProps)</small>
+        </EuiListItemLayout>
+        <EuiListItemLayout
+          {...args}
+          wrapperComponent="li"
+          tooltipProps={{
+            content: 'Tooltip content',
+            delay: 'regular',
+            position: 'bottom',
+          }}
+        >
+          {children} <small>(wrapperComponent & tooltipProps)</small>
+        </EuiListItemLayout>
+
+        <EuiListItemLayout {...args} isFocused>
+          {children} <small>(isFocused=true)</small>
+        </EuiListItemLayout>
+
+        <EuiListItemLayout {...args} checked="on" isSelected>
+          {children}{' '}
+          <small>
+            (checked=on & isSingleSelection=false & isSelected=true)
+          </small>
+        </EuiListItemLayout>
+        <EuiListItemLayout {...args} checked="on" isSingleSelection isSelected>
+          {children}{' '}
+          <small>(checked=on & isSingleSelection & isSelected=true)</small>
+        </EuiListItemLayout>
+
+        <EuiListItemLayout {...args} showIndicator={false}>
+          {children} <small>(showIndicator=false)</small>
+        </EuiListItemLayout>
+        <EuiListItemLayout {...args} isSelected showIndicator={false}>
+          {children} <small>(showIndicator=false & isSelected=true)</small>
+        </EuiListItemLayout>
+      </EuiFlexGroup>
+    </>
+  );
+};
diff --git a/packages/eui/src/components/list_item_layout/_list_item_layout.styles.ts b/packages/eui/src/components/list_item_layout/_list_item_layout.styles.ts
new file mode 100644
index 00000000000..74c2b159413
--- /dev/null
+++ b/packages/eui/src/components/list_item_layout/_list_item_layout.styles.ts
@@ -0,0 +1,203 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { UseEuiTheme, mathWithUnits } from '@elastic/eui-theme-common';
+
+import {
+  euiFontSize,
+  euiTextTruncate,
+  highContrastModeStyles,
+  logicalCSS,
+} from '../../global_styling';
+
+export const euiListItemVariables = ({ euiTheme }: UseEuiTheme) => {
+  const spacing = {
+    horizontal: euiTheme.size.s,
+    vertical: euiTheme.size.xs,
+  };
+
+  const textPadding = {
+    horizontal: euiTheme.size.xs,
+    vertical: mathWithUnits(
+      [spacing.vertical, euiTheme.size.xxs],
+      (x, y) => x + y
+    ),
+  };
+
+  return {
+    spacing,
+    textPadding,
+  };
+};
+
+const listItemCommonStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+
+  return `
+    display: inline-flex; /* Necessary to make sure it doesn't force the whole popover to be too wide */
+    align-items: center;
+    ${logicalCSS('width', '100%')}
+    border-radius: ${euiTheme.border.radius.small};
+    line-height: ${euiFontSize(euiThemeContext, 's').lineHeight};
+    font-size: ${euiFontSize(euiThemeContext, 's').fontSize};
+    color: ${euiTheme.colors.textParagraph};
+    cursor: pointer;
+    overflow: hidden;
+  `;
+};
+
+export const euiListItemLayoutStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+
+  const { spacing, textPadding } = euiListItemVariables(euiThemeContext);
+
+  // uses `aria-disabled` only as not all variants can have a native `:disabled` state
+  const notDisabledSelector = `&:not([aria-disabled="true"])`;
+  const sharedFlexStyles = `
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+  `;
+  const highlightedStyles = `
+    ${notDisabledSelector} {
+      background-color: ${euiTheme.colors.backgroundBaseInteractiveHover};
+
+      ${highContrastModeStyles(euiThemeContext, {
+        preferred: `
+          text-decoration: underline;
+        `,
+      })}
+    }
+  `;
+
+  return {
+    euiListItemLayout: css`
+      ${listItemCommonStyles(euiThemeContext)}
+      ${logicalCSS('padding-horizontal', spacing.horizontal)}
+    `,
+    euiListItemLayout__action: css`
+      display: flex;
+      flex-grow: 1;
+      ${logicalCSS('width', '100%')}
+      color: inherit;
+      overflow: hidden;
+    `,
+    euiListItemLayout__content: css`
+      ${logicalCSS('width', '100%')}
+      display: flex;
+      align-items: center;
+      gap: ${spacing.horizontal};
+    `,
+    euiListItemLayout__text: css`
+      flex-grow: 1; /* Pushes appended content to the far right */
+      ${logicalCSS('padding-vertical', textPadding.vertical)}
+      ${euiFontSize(euiThemeContext, 's')}
+      text-align: start;
+
+      /* Apply expected text spacing for flat children for user convenience.
+      Requires manual handling if nested */
+      > * + * {
+        ${logicalCSS('margin-top', euiTheme.size.xxs)}
+      }
+    `,
+    textWrap: {
+      truncate: css(euiTextTruncate()),
+      wrap: css``,
+    },
+
+    // Sizes
+    xs: css`
+      ${euiFontSize(euiThemeContext, 'xs')}
+      letter-spacing: 0;
+      ${logicalCSS('min-height', euiTheme.size.l)}
+    `,
+    s: css`
+      ${euiFontSize(euiThemeContext, 's')}
+      letter-spacing: 0;
+      ${logicalCSS('min-height', euiTheme.size.xl)}
+    `,
+    m: css`
+      ${euiFontSize(euiThemeContext, 'm')}
+      ${logicalCSS('min-height', euiTheme.size.xl)}
+    `,
+    l: css`
+      ${euiFontSize(euiThemeContext, 'l')}
+      ${logicalCSS('min-height', euiTheme.size.xxl)}
+    `,
+
+    euiListItemLayout__prepend: css`
+      ${sharedFlexStyles}
+      gap: ${spacing.horizontal};
+    `,
+    euiListItemLayout__append: css`
+      ${sharedFlexStyles}
+      gap: ${spacing.horizontal};
+    `,
+    euiListItemLayout__icon: css`
+      ${sharedFlexStyles}
+    `,
+    isInteractive: css`
+      &:hover {
+        ${highlightedStyles}
+      }
+    `,
+    isDisabled: css`
+      color: ${euiTheme.colors.textDisabled};
+      cursor: not-allowed;
+      background-color: transparent;
+    `,
+    isFocused: css`
+      ${highlightedStyles}
+    `,
+    isSelected: css`
+      color: ${euiTheme.colors.textPrimary};
+      background-color: ${euiTheme.colors.backgroundBaseInteractiveSelect};
+
+      ${notDisabledSelector} {
+        &:hover {
+          background-color: ${euiTheme.colors
+            .backgroundBaseInteractiveSelectHover};
+        }
+      }
+
+      .euiIcon {
+        color: inherit;
+      }
+
+      .euiListItemLayout__prepend,
+      .euiListItemLayout__append {
+        .euiIcon {
+          color: ${euiTheme.colors.textPrimary};
+        }
+      }
+    `,
+    isSelectedFocused: css`
+      ${notDisabledSelector} {
+        background-color: ${euiTheme.colors
+          .backgroundBaseInteractiveSelectHover};
+      }
+    `,
+  };
+};
+
+export const euiListItemLayoutWrapperStyles = (
+  euiThemeContext: UseEuiTheme
+) => {
+  const { spacing } = euiListItemVariables(euiThemeContext);
+
+  return {
+    euiListItemLayout__wrapper: css`
+      ${listItemCommonStyles(euiThemeContext)}
+      list-style: none;
+    `,
+    hasExtraAction: css`
+      ${logicalCSS('padding-right', spacing.horizontal)}
+    `,
+  };
+};
diff --git a/packages/eui/src/components/list_item_layout/_list_item_layout.test.tsx b/packages/eui/src/components/list_item_layout/_list_item_layout.test.tsx
new file mode 100644
index 00000000000..7f0c2f52794
--- /dev/null
+++ b/packages/eui/src/components/list_item_layout/_list_item_layout.test.tsx
@@ -0,0 +1,1514 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, either the Elastic License 2.0 or the
+ * Server Side Public License, v 1.
+ */
+
+import React from 'react';
+import {
+  render,
+  waitForEuiToolTipHidden,
+  waitForEuiToolTipVisible,
+} from '../../test/rtl';
+import { requiredProps } from '../../test/required_props';
+import { shouldRenderCustomStyles } from '../../test/internal';
+import { EuiListItemLayout } from './_list_item_layout';
+import { fireEvent } from '@testing-library/react';
+import { EuiButtonIcon } from '../button';
+
+const NON_INTERACTRIVE_ELEMENTS = ['li', 'div'] as const;
+const INTERACTIVE_ELEMENTS = [
+  ['button', { component: 'button' }],
+  ['a', { component: 'a', href: '#' }],
+] as const;
+
+describe('EuiListItemLayout', () => {
+  shouldRenderCustomStyles(
+    <EuiListItemLayout component="li" {...requiredProps}>
+      Option
+    </EuiListItemLayout>
+  );
+
+  shouldRenderCustomStyles(
+    <EuiListItemLayout component="button" {...requiredProps}>
+      Option
+    </EuiListItemLayout>
+  );
+
+  shouldRenderCustomStyles(
+    <EuiListItemLayout
+      component="button"
+      wrapperComponent="li"
+      {...requiredProps}
+    >
+      Option
+    </EuiListItemLayout>,
+    {
+      childProps: ['wrapperProps'],
+    }
+  );
+
+  test('is rendered as li element', () => {
+    const { container } = render(
+      <EuiListItemLayout component="li">Option</EuiListItemLayout>
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('is rendered as button element', () => {
+    const { container } = render(
+      <EuiListItemLayout component="button">Option</EuiListItemLayout>
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('is rendered as anchor element', () => {
+    const { container } = render(
+      <EuiListItemLayout component="a">Option</EuiListItemLayout>
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('is rendered as div element', () => {
+    const { container } = render(
+      <EuiListItemLayout component="div">Option</EuiListItemLayout>
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  describe('props', () => {
+    describe('component', () => {
+      NON_INTERACTRIVE_ELEMENTS.forEach((name) => {
+        describe(`${name}`, () => {
+          it(`renders as ${name} element`, () => {
+            const { getByTestSubject } = render(
+              <EuiListItemLayout component={name}>Option</EuiListItemLayout>
+            );
+
+            const element = getByTestSubject('euiListItemLayout');
+
+            expect(element).toBeInTheDocument();
+            expect(element.tagName).toBe(name.toUpperCase());
+          });
+        });
+      });
+
+      INTERACTIVE_ELEMENTS.forEach(([name, props]) => {
+        describe(`${name}`, () => {
+          it(`renders as ${name} element`, () => {
+            const { getByTestSubject } = render(
+              <EuiListItemLayout {...props}>Option</EuiListItemLayout>
+            );
+
+            const element = getByTestSubject('euiListItemLayout');
+
+            expect(element).toBeInTheDocument();
+            expect(element.tagName).toBe(name.toUpperCase());
+          });
+        });
+      });
+
+      describe('multi-selection (`isSingleSelection=false`)', () => {
+        NON_INTERACTRIVE_ELEMENTS.forEach((name) => {
+          describe(`${name}`, () => {
+            it('renders `aria-checked="true"` for a checkable role', () => {
+              const { getByTestSubject } = render(
+                <EuiListItemLayout
+                  component={name}
+                  role="option"
+                  checked="on"
+                  isSelected
+                  isSingleSelection={false}
+                >
+                  Option
+                </EuiListItemLayout>
+              );
+
+              const element = getByTestSubject('euiListItemLayout');
+              expect(element).toHaveAttribute('aria-checked', 'true');
+              expect(element).not.toHaveAttribute('aria-selected');
+              expect(element).not.toHaveAttribute('aria-current');
+            });
+
+            it('renders `aria-checked="false"` for a checkable role', () => {
+              const { getByTestSubject } = render(
+                <EuiListItemLayout
+                  component={name}
+                  role="option"
+                  checked={undefined}
+                  isSelected={false}
+                  isSingleSelection={false}
+                >
+                  Option
+                </EuiListItemLayout>
+              );
+
+              const element = getByTestSubject('euiListItemLayout');
+              expect(element).toHaveAttribute('aria-checked', 'false');
+              expect(element).not.toHaveAttribute('aria-selected');
+              expect(element).not.toHaveAttribute('aria-current');
+            });
+
+            it('renders `aria-selected="true"` for a non-checkable, selectable role', () => {
+              const { getByTestSubject } = render(
+                <EuiListItemLayout
+                  component={name}
+                  role="tab"
+                  checked="on"
+                  isSelected
+                  isSingleSelection={false}
+                >
+                  Option
+                </EuiListItemLayout>
+              );
+
+              const element = getByTestSubject('euiListItemLayout');
+              expect(element).toHaveAttribute('aria-selected', 'true');
+              expect(element).not.toHaveAttribute('aria-checked');
+              expect(element).not.toHaveAttribute('aria-current');
+            });
+
+            it('renders `aria-selected="false"` for a non-checkable, selectable role', () => {
+              const { getByTestSubject } = render(
+                <EuiListItemLayout
+                  component={name}
+                  role="tab"
+                  checked={undefined}
+                  isSelected={false}
+                  isSingleSelection={false}
+                >
+                  Option
+                </EuiListItemLayout>
+              );
+
+              const element = getByTestSubject('euiListItemLayout');
+              expect(element).toHaveAttribute('aria-selected', 'false');
+              expect(element).not.toHaveAttribute('aria-checked');
+              expect(element).not.toHaveAttribute('aria-current');
+            });
+
+            it('renders `aria-current="true"` for a non-checkable, non-selectable role', () => {
+              const { getByTestSubject } = render(
+                <EuiListItemLayout
+                  component={name}
+                  role="presentation"
+                  checked="on"
+                  isSelected
+                  isSingleSelection={false}
+                >
+                  Option
+                </EuiListItemLayout>
+              );
+
+              const element = getByTestSubject('euiListItemLayout');
+              expect(element).toHaveAttribute('aria-current', 'true');
+              expect(element).not.toHaveAttribute('aria-checked');
+              expect(element).not.toHaveAttribute('aria-selected');
+            });
+
+            it('renders `aria-current=undefined` for a non-checkable, non-selectable role', () => {
+              const { getByTestSubject } = render(
+                <EuiListItemLayout
+                  component={name}
+                  role="presentation"
+                  checked={undefined}
+                  isSelected={false}
+                  isSingleSelection={false}
+                >
+                  Option
+                </EuiListItemLayout>
+              );
+
+              const element = getByTestSubject('euiListItemLayout');
+              expect(element).not.toHaveAttribute('aria-current');
+              expect(element).not.toHaveAttribute('aria-checked');
+              expect(element).not.toHaveAttribute('aria-selected');
+            });
+
+            describe('with `role="option"`', () => {
+              it('renders `aria-checked` when `isSingleSelection=false`', () => {
+                const { getByTestSubject } = render(
+                  <EuiListItemLayout
+                    component={name}
+                    role="option"
+                    isSingleSelection={false}
+                    checked="on"
+                    isSelected={true}
+                  >
+                    Option
+                  </EuiListItemLayout>
+                );
+
+                const element = getByTestSubject('euiListItemLayout');
+                expect(element).toHaveAttribute('aria-checked', 'true');
+                expect(element).not.toHaveAttribute('aria-selected');
+              });
+
+              it('renders `aria-selected` when `isSingleSelection=true`', () => {
+                const { getByTestSubject } = render(
+                  <EuiListItemLayout
+                    component={name}
+                    role="option"
+                    isSingleSelection
+                    checked="on"
+                    isSelected={true}
+                  >
+                    Option
+                  </EuiListItemLayout>
+                );
+
+                const element = getByTestSubject('euiListItemLayout');
+                expect(element).toHaveAttribute('aria-selected', 'true');
+                expect(element).not.toHaveAttribute('aria-checked');
+              });
+            });
+          });
+        });
+
+        INTERACTIVE_ELEMENTS.forEach(([name, props]) => {
+          describe(`${name}`, () => {
+            it('applies `aria-current="true"`', () => {
+              const { getByTestSubject } = render(
+                <EuiListItemLayout
+                  {...props}
+                  checked="on"
+                  isSelected
+                  isSingleSelection={false}
+                >
+                  Option
+                </EuiListItemLayout>
+              );
+
+              const element = getByTestSubject('euiListItemLayout');
+              expect(element).toHaveAttribute('aria-current', 'true');
+              expect(element).not.toHaveAttribute('aria-checked');
+              expect(element).not.toHaveAttribute('aria-selected');
+            });
+
+            it('applies custom `aria-selected`', () => {
+              const { getByTestSubject } = render(
+                <EuiListItemLayout
+                  {...props}
+                  aria-selected="true"
+                  checked="on"
+                  isSelected
+                  isSingleSelection={false}
+                >
+                  Option
+                </EuiListItemLayout>
+              );
+
+              const element = getByTestSubject('euiListItemLayout');
+              expect(element).toHaveAttribute('aria-selected', 'true');
+              expect(element).not.toHaveAttribute('aria-checked');
+              expect(element).not.toHaveAttribute('aria-current');
+            });
+          });
+        });
+      });
+
+      describe('single-selection (`isSingleSelection=true`)', () => {
+        NON_INTERACTRIVE_ELEMENTS.forEach((name) => {
+          describe(`${name}`, () => {
+            it('renders `aria-checked="true"` for a natively checkable role', () => {
+              const { getByTestSubject } = render(
+                <EuiListItemLayout
+                  component={name}
+                  role="menuitemcheckbox"
+                  checked="on"
+                  isSelected
+                  isSingleSelection
+                >
+                  Option
+                </EuiListItemLayout>
+              );
+
+              const element = getByTestSubject('euiListItemLayout');
+              expect(element).toHaveAttribute('aria-checked', 'true');
+              expect(element).not.toHaveAttribute('aria-selected');
+              expect(element).not.toHaveAttribute('aria-current');
+            });
+
+            it('renders `aria-checked="false"` for a natively checkable role', () => {
+              const { getByTestSubject } = render(
+                <EuiListItemLayout
+                  component={name}
+                  role="menuitemcheckbox"
+                  checked={undefined}
+                  isSelected={false}
+                  isSingleSelection
+                >
+                  Option
+                </EuiListItemLayout>
+              );
+
+              const element = getByTestSubject('euiListItemLayout');
+              expect(element).toHaveAttribute('aria-checked', 'false');
+              expect(element).not.toHaveAttribute('aria-selected');
+              expect(element).not.toHaveAttribute('aria-current');
+            });
+
+            it('renders `aria-selected="true"` for a checkable, selectable role', () => {
+              const { getByTestSubject } = render(
+                <EuiListItemLayout
+                  component={name}
+                  role="option"
+                  checked="on"
+                  isSelected
+                  isSingleSelection
+                >
+                  Option
+                </EuiListItemLayout>
+              );
+
+              const element = getByTestSubject('euiListItemLayout');
+              expect(element).toHaveAttribute('aria-selected', 'true');
+              expect(element).not.toHaveAttribute('aria-checked');
+              expect(element).not.toHaveAttribute('aria-current');
+            });
+
+            it('renders `aria-selected="false"` for a checkable, selectable role', () => {
+              const { getByTestSubject } = render(
+                <EuiListItemLayout
+                  component={name}
+                  role="option"
+                  checked={undefined}
+                  isSelected={false}
+                  isSingleSelection
+                >
+                  Option
+                </EuiListItemLayout>
+              );
+
+              const element = getByTestSubject('euiListItemLayout');
+              expect(element).toHaveAttribute('aria-selected', 'false');
+              expect(element).not.toHaveAttribute('aria-checked');
+              expect(element).not.toHaveAttribute('aria-current');
+            });
+
+            it('renders `aria-current="true"` for a non-checkable, non-selectable role', () => {
+              const { getByTestSubject } = render(
+                <EuiListItemLayout
+                  component={name}
+                  role="presentation"
+                  checked="on"
+                  isSelected
+                  isSingleSelection
+                >
+                  Option
+                </EuiListItemLayout>
+              );
+
+              const element = getByTestSubject('euiListItemLayout');
+              expect(element).toHaveAttribute('aria-current', 'true');
+              expect(element).not.toHaveAttribute('aria-checked');
+              expect(element).not.toHaveAttribute('aria-selected');
+            });
+
+            it('renders `aria-current=undefined` for a non-checkable, non-selectable role', () => {
+              const { getByTestSubject } = render(
+                <EuiListItemLayout
+                  component={name}
+                  role="presentation"
+                  checked={undefined}
+                  isSelected={false}
+                  isSingleSelection
+                >
+                  Option
+                </EuiListItemLayout>
+              );
+
+              const element = getByTestSubject('euiListItemLayout');
+              expect(element).not.toHaveAttribute('aria-current');
+              expect(element).not.toHaveAttribute('aria-checked');
+              expect(element).not.toHaveAttribute('aria-selected');
+            });
+          });
+        });
+
+        INTERACTIVE_ELEMENTS.forEach(([name, props]) => {
+          describe(`${name}`, () => {
+            it('applies `aria-current="true"`', () => {
+              const { getByTestSubject } = render(
+                <EuiListItemLayout
+                  {...props}
+                  checked="on"
+                  isSelected
+                  isSingleSelection
+                >
+                  Option
+                </EuiListItemLayout>
+              );
+
+              const element = getByTestSubject('euiListItemLayout');
+              expect(element).toHaveAttribute('aria-current', 'true');
+              expect(element).not.toHaveAttribute('aria-checked');
+              expect(element).not.toHaveAttribute('aria-selected');
+            });
+
+            it('applies custom `aria-selected`', () => {
+              const { getByTestSubject } = render(
+                <EuiListItemLayout
+                  {...props}
+                  aria-selected="true"
+                  checked="on"
+                  isSelected
+                  isSingleSelection
+                >
+                  Option
+                </EuiListItemLayout>
+              );
+
+              const element = getByTestSubject('euiListItemLayout');
+              expect(element).toHaveAttribute('aria-selected', 'true');
+              expect(element).not.toHaveAttribute('aria-checked');
+              expect(element).not.toHaveAttribute('aria-current');
+            });
+          });
+        });
+      });
+    });
+
+    describe('href, target, rel', () => {
+      it('passes anchor props to the element when `component=a`', () => {
+        const { getByTestSubject } = render(
+          <EuiListItemLayout
+            component="a"
+            href="#"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Option
+          </EuiListItemLayout>
+        );
+
+        const element = getByTestSubject('euiListItemLayout');
+        expect(element).toHaveAttribute('href', '#');
+        expect(element).toHaveAttribute('target', '_blank');
+        expect(element).toHaveAttribute('rel', 'noopener noreferrer');
+      });
+
+      it('does not passes anchor props to the element when it is not `component=a`', () => {
+        const { getByTestSubject } = render(
+          // @ts-expect-error - testing invalid props
+          <EuiListItemLayout
+            component="button"
+            href="#"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Option
+          </EuiListItemLayout>
+        );
+
+        const element = getByTestSubject('euiListItemLayout');
+        expect(element).not.toHaveAttribute('href', '#');
+        expect(element).not.toHaveAttribute('target', '_blank');
+        expect(element).not.toHaveAttribute('rel', 'noopener noreferrer');
+      });
+    });
+
+    describe('role', () => {
+      it('applies a role attribute', () => {
+        const { getByTestSubject } = render(
+          <EuiListItemLayout component="li" role="menuitemcheckbox">
+            Option
+          </EuiListItemLayout>
+        );
+
+        const element = getByTestSubject('euiListItemLayout');
+        expect(element).toHaveAttribute('role', 'menuitemcheckbox');
+      });
+    });
+
+    describe('isDisabled', () => {
+      it('applies a visual disabled state', () => {
+        const { getByTestSubject } = render(
+          <EuiListItemLayout component="li" isDisabled>
+            Option
+          </EuiListItemLayout>
+        );
+
+        const element = getByTestSubject('euiListItemLayout');
+        const classes = Array.from(element.classList) as string[];
+        expect(classes.some((clx) => clx.includes('isDisabled'))).toBe(true);
+      });
+
+      it('applies a semantic disabled state when `component=li`', () => {
+        const { getByTestSubject } = render(
+          <EuiListItemLayout component="li" isDisabled>
+            Option
+          </EuiListItemLayout>
+        );
+
+        const element = getByTestSubject('euiListItemLayout');
+        expect(element).toHaveAttribute('aria-disabled', 'true');
+        expect(element).not.toHaveAttribute('disabled');
+      });
+
+      it('applies a semantic disabled state when `component=button`', () => {
+        const { getByTestSubject } = render(
+          <EuiListItemLayout component="button" isDisabled>
+            Option
+          </EuiListItemLayout>
+        );
+
+        const element = getByTestSubject('euiListItemLayout');
+        expect(element).toHaveAttribute('disabled');
+      });
+
+      it('renders a disabled `button` when `component=a`', () => {
+        const { getByTestSubject } = render(
+          <EuiListItemLayout component="a" isDisabled>
+            Option
+          </EuiListItemLayout>
+        );
+
+        const element = getByTestSubject('euiListItemLayout');
+        expect(element.tagName).toBe('BUTTON');
+      });
+    });
+
+    describe('checked', () => {
+      it('applies a checked state for multi-selection items when `checked="on"`', () => {
+        const { getByTestSubject } = render(
+          <EuiListItemLayout
+            component="li"
+            role="option"
+            checked="on"
+            isSingleSelection={false}
+          >
+            Option
+          </EuiListItemLayout>
+        );
+
+        const element = getByTestSubject('euiListItemLayout');
+        const checkbox = element.querySelector('.EuiCheckboxControl');
+
+        expect(element).toHaveAttribute('aria-checked', 'true');
+        expect(checkbox).toBeInTheDocument();
+        expect(
+          element.querySelector('[data-euiicon-type="check"]')
+        ).toBeInTheDocument();
+      });
+
+      it('applies an unchecked state for multi-selection items when `checked=undefined`', () => {
+        const { getByTestSubject } = render(
+          <EuiListItemLayout
+            component="li"
+            role="option"
+            checked={undefined}
+            isSingleSelection={false}
+          >
+            Option
+          </EuiListItemLayout>
+        );
+
+        const element = getByTestSubject('euiListItemLayout');
+        const checkbox = element.querySelector('.EuiCheckboxControl');
+
+        expect(element).toHaveAttribute('aria-checked', 'false');
+        expect(checkbox).toBeInTheDocument();
+        expect(
+          element.querySelector('[data-euiicon-type="empty"]')
+        ).toBeInTheDocument();
+      });
+
+      it('applies an exclusion state for multi-selection items when checked="off"', () => {
+        const { getByTestSubject } = render(
+          <EuiListItemLayout
+            component="li"
+            role="option"
+            checked="off"
+            isSingleSelection={false}
+          >
+            Option
+          </EuiListItemLayout>
+        );
+
+        const element = getByTestSubject('euiListItemLayout');
+        const checkbox = element.querySelector('.EuiCheckboxControl');
+
+        expect(element).toHaveAttribute('aria-checked', 'true');
+        expect(checkbox).toBeInTheDocument();
+        expect(
+          element.querySelector('[data-euiicon-type="cross"]')
+        ).toBeInTheDocument();
+      });
+
+      it('applies an indeterminate state for multi-selection items when checked="mixed"', () => {
+        const { getByTestSubject } = render(
+          <EuiListItemLayout
+            component="li"
+            role="option"
+            checked="mixed"
+            isSingleSelection={false}
+          >
+            Option
+          </EuiListItemLayout>
+        );
+
+        const element = getByTestSubject('euiListItemLayout');
+        const checkbox = element.querySelector('.EuiCheckboxControl');
+
+        expect(element).toHaveAttribute('aria-checked', 'mixed');
+        expect(checkbox).toBeInTheDocument();
+        expect(
+          element.querySelector('[data-euiicon-type="stopFill"]')
+        ).toBeInTheDocument();
+      });
+
+      it('applies an indeterminate state for a supported custom `role`', () => {
+        const { getByTestSubject } = render(
+          <EuiListItemLayout
+            component="li"
+            role="checkbox"
+            checked="mixed"
+            isSingleSelection={false}
+          >
+            Option
+          </EuiListItemLayout>
+        );
+
+        const element = getByTestSubject('euiListItemLayout');
+        expect(element).toHaveAttribute('aria-checked', 'mixed');
+      });
+
+      it('applies does not apply an indeterminate state for a non supported custom `role`', () => {
+        const { getByTestSubject } = render(
+          <EuiListItemLayout
+            component="li"
+            role="radio"
+            checked="mixed"
+            isSingleSelection={false}
+          >
+            Option
+          </EuiListItemLayout>
+        );
+
+        const element = getByTestSubject('euiListItemLayout');
+        expect(element).toHaveAttribute('aria-checked', 'false');
+      });
+    });
+
+    describe('isSelected', () => {
+      it('applies a selected state when `isSingleSelection=true`', () => {
+        const { getByTestSubject } = render(
+          <EuiListItemLayout
+            component="li"
+            role="option"
+            isSelected
+            isSingleSelection
+          >
+            Option
+          </EuiListItemLayout>
+        );
+
+        const element = getByTestSubject('euiListItemLayout');
+        const classes = Array.from(element.classList) as string[];
+
+        expect(element).toHaveAttribute('aria-selected', 'true');
+        expect(classes.some((clx) => clx.includes('isSelected'))).toBe(true);
+      });
+
+      it('applies `aria-current` when `component=button`', () => {
+        const { getByTestSubject } = render(
+          <EuiListItemLayout component="button" isSelected>
+            Option
+          </EuiListItemLayout>
+        );
+
+        const element = getByTestSubject('euiListItemLayout');
+
+        expect(element).toHaveAttribute('aria-current', 'true');
+      });
+
+      it('applies `aria-current` when `component=a`', () => {
+        const { getByTestSubject } = render(
+          <EuiListItemLayout component="button" isSelected>
+            Option
+          </EuiListItemLayout>
+        );
+
+        const element = getByTestSubject('euiListItemLayout');
+
+        expect(element).toHaveAttribute('aria-current', 'true');
+      });
+
+      it('applies `aria-current` when `component=li` without selectable role', () => {
+        const { getByTestSubject } = render(
+          <EuiListItemLayout component="li" isSelected>
+            Option
+          </EuiListItemLayout>
+        );
+
+        const element = getByTestSubject('euiListItemLayout');
+
+        expect(element).toHaveAttribute('aria-current', 'true');
+      });
+
+      it('applies `aria-current` when `component=div` without selectable role', () => {
+        const { getByTestSubject } = render(
+          <EuiListItemLayout component="div" isSelected>
+            Option
+          </EuiListItemLayout>
+        );
+
+        const element = getByTestSubject('euiListItemLayout');
+
+        expect(element).toHaveAttribute('aria-current', 'true');
+      });
+    });
+
+    describe('isFocused', () => {
+      it('applies a pseudofocus state', () => {
+        const { getByTestSubject } = render(
+          <EuiListItemLayout component="li" isFocused>
+            Option
+          </EuiListItemLayout>
+        );
+
+        const element = getByTestSubject('euiListItemLayout');
+        const classes = Array.from(element.classList) as string[];
+
+        expect(classes.some((clx) => clx.includes('isFocused'))).toBe(true);
+      });
+    });
+
+    describe('selectionMode', () => {
+      it('overrides the default selection mode when `isSingleSelection=true`', () => {
+        const { getByTestSubject } = render(
+          <EuiListItemLayout
+            component="li"
+            role="option"
+            checked="on"
+            isSingleSelection
+            selectionMode="checked"
+          >
+            Option
+          </EuiListItemLayout>
+        );
+
+        const element = getByTestSubject('euiListItemLayout');
+        expect(element).toHaveAttribute('aria-checked', 'true');
+        expect(element).not.toHaveAttribute('aria-selected');
+      });
+
+      it('overrides the default selection mode when `isSingleSelection=false`', () => {
+        const { getByTestSubject } = render(
+          <EuiListItemLayout
+            component="li"
+            role="option"
+            isSelected
+            isSingleSelection={false}
+            selectionMode="selected"
+          >
+            Option
+          </EuiListItemLayout>
+        );
+
+        const element = getByTestSubject('euiListItemLayout');
+        expect(element).toHaveAttribute('aria-selected', 'true');
+        expect(element).not.toHaveAttribute('aria-checked');
+      });
+    });
+
+    describe('showIndicator', () => {
+      it('hides the indicator element when `showIndicator=false`for single selection', () => {
+        const { getByTestSubject } = render(
+          <EuiListItemLayout component="li" showIndicator={false}>
+            Option
+          </EuiListItemLayout>
+        );
+
+        const element = getByTestSubject('euiListItemLayout');
+        expect(
+          element.querySelector('.euiListItemLayout__icon')
+        ).not.toBeInTheDocument();
+      });
+
+      it('hides the indicator element when `showIndicator=false` for multi selection', () => {
+        const { getByTestSubject } = render(
+          <EuiListItemLayout
+            component="li"
+            isSingleSelection={false}
+            showIndicator={false}
+          >
+            Option
+          </EuiListItemLayout>
+        );
+
+        const element = getByTestSubject('euiListItemLayout');
+        expect(
+          element.querySelector('.euiListItemLayout__checkbox')
+        ).not.toBeInTheDocument();
+      });
+    });
+
+    describe('textWrap', () => {
+      it('applies truncation styles when `textWrap="truncate"`', () => {
+        const label = 'A longer option label that should be truncated';
+
+        const { getByText } = render(
+          <EuiListItemLayout component="li" textWrap="truncate">
+            {label}
+          </EuiListItemLayout>
+        );
+
+        const text = getByText(label);
+        const classes = Array.from(text.classList) as string[];
+        expect(classes.some((clx) => clx.includes('text-truncate'))).toBe(true);
+
+        expect(text).toHaveStyleRule('text-overflow', 'ellipsis!important');
+        expect(text).toHaveStyleRule('white-space', 'nowrap!important');
+      });
+
+      it('does not add truncation styles when `textWrap="wrap"`', () => {
+        const label = 'A longer option label that should not be truncated';
+
+        const { getByText } = render(
+          <EuiListItemLayout component="li" textWrap="wrap">
+            {label}
+          </EuiListItemLayout>
+        );
+
+        const text = getByText(label);
+        const classes = Array.from(text.classList) as string[];
+        expect(classes.some((clx) => clx.includes('text-wrap'))).toBe(true);
+
+        expect(text).not.toHaveStyleRule('text-overflow', 'ellipsis');
+        expect(text).not.toHaveStyleRule('white-space', 'nowrap');
+      });
+    });
+
+    describe('prepend', () => {
+      it('renders prepended content', () => {
+        const { getByText } = render(
+          <EuiListItemLayout component="li" prepend={<span>Prepend</span>}>
+            Option
+          </EuiListItemLayout>
+        );
+
+        expect(getByText('Prepend')).toBeInTheDocument();
+      });
+    });
+
+    describe('append', () => {
+      it('renders appended content', () => {
+        const { getByText } = render(
+          <EuiListItemLayout component="li" append={<span>Append</span>}>
+            Option
+          </EuiListItemLayout>
+        );
+
+        expect(getByText('Append')).toBeInTheDocument();
+      });
+    });
+
+    describe('wrapperComponent', () => {
+      it('renders a wrapping `div` element when component="button"', () => {
+        const { getByTestSubject } = render(
+          <EuiListItemLayout component="button" wrapperComponent="div">
+            Option
+          </EuiListItemLayout>
+        );
+
+        expect(getByTestSubject('euiListItemLayout').tagName).toBe('BUTTON');
+        expect(getByTestSubject('euiListItemLayout-wrapper').tagName).toBe(
+          'DIV'
+        );
+      });
+
+      it('renders a wrapping `div` element when component="a"', () => {
+        const { getByTestSubject } = render(
+          <EuiListItemLayout component="a" wrapperComponent="div">
+            Option
+          </EuiListItemLayout>
+        );
+
+        expect(getByTestSubject('euiListItemLayout').tagName).toBe('A');
+        expect(getByTestSubject('euiListItemLayout-wrapper').tagName).toBe(
+          'DIV'
+        );
+      });
+
+      it('does not have any effect on the element when component="li"', () => {
+        const { getByTestSubject, container } = render(
+          <EuiListItemLayout component="li" wrapperComponent="div">
+            Option
+          </EuiListItemLayout>
+        );
+
+        const element = getByTestSubject('euiListItemLayout');
+        expect(element.tagName).toBe('LI');
+        expect(container.firstChild).toBe(element);
+      });
+
+      it('does not have any effect on the element when component="div"', () => {
+        const { getByTestSubject, container } = render(
+          <EuiListItemLayout component="div" wrapperComponent="li">
+            Option
+          </EuiListItemLayout>
+        );
+
+        const element = getByTestSubject('euiListItemLayout');
+        expect(element.tagName).toBe('DIV');
+        expect(container.firstChild).toBe(element);
+      });
+    });
+
+    describe('extraAction', () => {
+      it('renders a wrapping `li` element and a sibling extra action to the main element when component="button"', () => {
+        const { getByTestSubject } = render(
+          <EuiListItemLayout
+            component="button"
+            extraAction={
+              <EuiButtonIcon
+                iconType="ellipsis"
+                aria-label="Extra action"
+                data-test-subj="extra-action"
+              />
+            }
+          >
+            Option
+          </EuiListItemLayout>
+        );
+
+        const wrapper = getByTestSubject('euiListItemLayout-wrapper');
+        const element = getByTestSubject('euiListItemLayout');
+        const extraAction = getByTestSubject('extra-action');
+
+        expect(element.tagName).toBe('BUTTON');
+        expect(wrapper.tagName).toBe('LI');
+        expect(element).not.toContainElement(extraAction);
+        expect(wrapper.childNodes[0]).toBe(element);
+        expect(wrapper.childNodes[1]).toBe(extraAction);
+      });
+
+      it('renders a wrapping `li` and a sibling extra action to the main element when component="a"', () => {
+        const { getByTestSubject } = render(
+          <EuiListItemLayout
+            component="a"
+            extraAction={
+              <EuiButtonIcon
+                iconType="ellipsis"
+                aria-label="Extra action"
+                data-test-subj="extra-action"
+              />
+            }
+          >
+            Option
+          </EuiListItemLayout>
+        );
+
+        const wrapper = getByTestSubject('euiListItemLayout-wrapper');
+        const element = getByTestSubject('euiListItemLayout');
+        const extraAction = getByTestSubject('extra-action');
+
+        expect(element.tagName).toBe('A');
+        expect(wrapper.tagName).toBe('LI');
+        expect(element).not.toContainElement(extraAction);
+        expect(wrapper.childNodes[0]).toBe(element);
+        expect(wrapper.childNodes[1]).toBe(extraAction);
+      });
+
+      it('does not render a wrapping `li` element when component="li"', () => {
+        const { getByTestSubject, container } = render(
+          <EuiListItemLayout
+            component="li"
+            extraAction={
+              <EuiButtonIcon
+                iconType="ellipsis"
+                aria-label="Extra action"
+                data-test-subj="extra-action"
+              />
+            }
+          >
+            Option
+          </EuiListItemLayout>
+        );
+
+        const element = getByTestSubject('euiListItemLayout');
+        const extraAction = getByTestSubject('extra-action');
+
+        expect(element.tagName).toBe('LI');
+        expect(container.firstChild).toBe(element);
+        expect(element).toContainElement(extraAction);
+      });
+
+      it('does not render a wrapping `li` element when component="div"', () => {
+        const { getByTestSubject, container } = render(
+          <EuiListItemLayout
+            component="div"
+            extraAction={
+              <EuiButtonIcon
+                iconType="ellipsis"
+                aria-label="Extra action"
+                data-test-subj="extra-action"
+              />
+            }
+          >
+            Option
+          </EuiListItemLayout>
+        );
+
+        const element = getByTestSubject('euiListItemLayout');
+        const extraAction = getByTestSubject('extra-action');
+
+        expect(element.tagName).toBe('DIV');
+        expect(container.firstChild).toBe(element);
+        expect(element).toContainElement(extraAction);
+      });
+
+      it('renders a wrapping `div` element and a sibling extra action to the main element when `wrapperComponent="div"`', () => {
+        const { getByTestSubject } = render(
+          <EuiListItemLayout
+            component="button"
+            wrapperComponent="div"
+            extraAction={
+              <EuiButtonIcon
+                iconType="ellipsis"
+                aria-label="Extra action"
+                data-test-subj="extra-action"
+              />
+            }
+          >
+            Option
+          </EuiListItemLayout>
+        );
+
+        const wrapper = getByTestSubject('euiListItemLayout-wrapper');
+        const element = getByTestSubject('euiListItemLayout');
+        const extraAction = getByTestSubject('extra-action');
+
+        expect(element.tagName).toBe('BUTTON');
+        expect(wrapper.tagName).toBe('DIV');
+        expect(element).not.toContainElement(extraAction);
+        expect(wrapper.childNodes[0]).toBe(element);
+        expect(wrapper.childNodes[1]).toBe(extraAction);
+      });
+    });
+
+    describe('wrapperProps', () => {
+      it('passes `wrapperProps` to the wrapper element when `wrapperComponent` is defined', () => {
+        const { getByTestSubject } = render(
+          <EuiListItemLayout
+            component="button"
+            wrapperComponent="li"
+            wrapperProps={{
+              className: 'item-wrapper',
+              'data-test-subj': 'item-wrapper',
+            }}
+          >
+            Option
+          </EuiListItemLayout>
+        );
+
+        const wrapper = getByTestSubject('item-wrapper');
+
+        expect(wrapper).toBeInTheDocument();
+        expect(wrapper).toHaveClass('item-wrapper');
+        expect(wrapper.firstChild).toBe(getByTestSubject('euiListItemLayout'));
+      });
+
+      it('passes `wrapperProps` to the wrapper element when `extraAction` is passed', () => {
+        const { getByTestSubject } = render(
+          <EuiListItemLayout
+            component="button"
+            extraAction={
+              <EuiButtonIcon iconType="ellipsis" aria-label="Extra action" />
+            }
+            wrapperProps={{
+              className: 'item-wrapper',
+              'data-test-subj': 'item-wrapper',
+            }}
+          >
+            Option
+          </EuiListItemLayout>
+        );
+
+        const wrapper = getByTestSubject('item-wrapper');
+
+        expect(wrapper).toBeInTheDocument();
+        expect(wrapper).toHaveClass('item-wrapper');
+        expect(wrapper.firstChild).toBe(getByTestSubject('euiListItemLayout'));
+      });
+
+      it('does not apply `wrapperProps` when `wrapperComponent` is not defined', () => {
+        const { container } = render(
+          <EuiListItemLayout
+            component="li"
+            wrapperProps={{
+              className: 'item-wrapper',
+              'data-test-subj': 'item-wrapper',
+            }}
+          >
+            Option
+          </EuiListItemLayout>
+        );
+
+        expect(
+          container.querySelector('.item-wrapper')
+        ).not.toBeInTheDocument();
+      });
+
+      it('does not apply `wrapperProps` when `wrapperComponent="div"` and `component="li"`', () => {
+        const { container } = render(
+          <EuiListItemLayout
+            component="li"
+            wrapperComponent="div"
+            wrapperProps={{
+              className: 'item-wrapper',
+              'data-test-subj': 'item-wrapper',
+            }}
+          >
+            Option
+          </EuiListItemLayout>
+        );
+
+        expect(
+          container.querySelector('.item-wrapper')
+        ).not.toBeInTheDocument();
+      });
+
+      it('does not apply `wrapperProps` when `wrapperComponent="li"` and `component="div"`', () => {
+        const { container } = render(
+          <EuiListItemLayout
+            component="li"
+            wrapperComponent="div"
+            wrapperProps={{
+              className: 'item-wrapper',
+              'data-test-subj': 'item-wrapper',
+            }}
+          >
+            Option
+          </EuiListItemLayout>
+        );
+
+        expect(
+          container.querySelector('.item-wrapper')
+        ).not.toBeInTheDocument();
+      });
+    });
+
+    describe('contentProps', () => {
+      it('passes `contentProps` to the content element', () => {
+        const { getByTestSubject } = render(
+          <EuiListItemLayout
+            component="li"
+            contentProps={{
+              className: 'item-content',
+              'data-test-subj': 'item-content',
+            }}
+          >
+            Option
+          </EuiListItemLayout>
+        );
+
+        const content = getByTestSubject('item-content');
+
+        expect(content).toBeInTheDocument();
+        expect(content).toHaveClass('item-content');
+      });
+    });
+
+    describe('textProps', () => {
+      it('passes `textProps` to the text element', () => {
+        const { getByTestSubject } = render(
+          <EuiListItemLayout
+            component="li"
+            textProps={{
+              className: 'item-text',
+              'data-test-subj': 'item-text',
+            }}
+          >
+            Option
+          </EuiListItemLayout>
+        );
+
+        const text = getByTestSubject('item-text');
+
+        expect(text).toBeInTheDocument();
+        expect(text).toHaveClass('item-text');
+      });
+    });
+
+    describe('prependProps', () => {
+      it('passes `prependProps` to the prepended element', () => {
+        const { getByTestSubject } = render(
+          <EuiListItemLayout
+            component="li"
+            prepend={<span>Prepend</span>}
+            prependProps={{
+              className: 'item-prepend',
+              'data-test-subj': 'item-prepend',
+            }}
+          >
+            Option
+          </EuiListItemLayout>
+        );
+
+        const prepend = getByTestSubject('item-prepend');
+
+        expect(prepend).toBeInTheDocument();
+        expect(prepend).toHaveClass('item-prepend');
+        expect(prepend.firstChild).toHaveTextContent('Prepend');
+      });
+    });
+
+    describe('appendProps', () => {
+      it('passes `appendProps` to the appended element', () => {
+        const { getByTestSubject } = render(
+          <EuiListItemLayout
+            component="li"
+            append={<span>Append</span>}
+            appendProps={{
+              className: 'item-append',
+              'data-test-subj': 'item-append',
+            }}
+          >
+            Option
+          </EuiListItemLayout>
+        );
+
+        const append = getByTestSubject('item-append');
+
+        expect(append).toBeInTheDocument();
+        expect(append).toHaveClass('item-append');
+        expect(append.firstChild).toHaveTextContent('Append');
+      });
+    });
+
+    describe('tooltipProps', () => {
+      NON_INTERACTRIVE_ELEMENTS.forEach((name) => {
+        it(`renders a tooltip and passes 'tooltipProps' when component=${name}`, async () => {
+          const { baseElement, getByTestSubject } = render(
+            <EuiListItemLayout
+              component={name as 'li' | 'div'}
+              tooltipProps={{
+                title: 'Tooltip',
+                content: 'Tooltip content',
+                delay: 'regular',
+                position: 'bottom',
+                'data-test-subj': 'item-tooltip',
+              }}
+            >
+              Option
+            </EuiListItemLayout>
+          );
+
+          const tooltipAnchor = baseElement.querySelector('.euiToolTipAnchor');
+
+          expect(tooltipAnchor).toBeInTheDocument();
+
+          fireEvent.mouseOver(tooltipAnchor!);
+          await waitForEuiToolTipVisible();
+
+          expect(getByTestSubject('item-tooltip')).toBeInTheDocument();
+        });
+      });
+
+      INTERACTIVE_ELEMENTS.forEach(([name]) => {
+        it(`renders a tooltip and passes 'tooltipProps' when component=${name}`, async () => {
+          const { baseElement, getByTestSubject } = render(
+            <EuiListItemLayout
+              component={name as 'button' | 'a'}
+              tooltipProps={{
+                title: 'Tooltip',
+                content: 'Tooltip content',
+                delay: 'regular',
+                position: 'bottom',
+                'data-test-subj': 'item-tooltip',
+              }}
+            >
+              Option
+            </EuiListItemLayout>
+          );
+
+          const element = getByTestSubject('euiListItemLayout');
+          const tooltipAnchor = baseElement.querySelector('.euiToolTipAnchor');
+
+          expect(tooltipAnchor).toBeInTheDocument();
+
+          fireEvent.focus(element);
+          await waitForEuiToolTipVisible();
+
+          expect(getByTestSubject('item-tooltip')).toBeInTheDocument();
+        });
+      });
+
+      it('shows a tooltip when `isFocused=true` and a non interactive element is rendered', async () => {
+        const { getByTestSubject } = render(
+          <EuiListItemLayout
+            component="li"
+            isFocused
+            tooltipProps={{
+              title: 'Tooltip',
+              content: 'Tooltip content',
+              delay: 'regular',
+              position: 'bottom',
+              'data-test-subj': 'item-tooltip',
+            }}
+          >
+            Option
+          </EuiListItemLayout>
+        );
+
+        await waitForEuiToolTipVisible();
+
+        expect(getByTestSubject('item-tooltip')).toBeInTheDocument();
+      });
+
+      it('shows a tooltip when `isFocused=true` and an interactive element is rendered', async () => {
+        const { getByTestSubject } = render(
+          <EuiListItemLayout
+            component="button"
+            isFocused
+            tooltipProps={{
+              title: 'Tooltip',
+              content: 'Tooltip content',
+              delay: 'regular',
+              position: 'bottom',
+              'data-test-subj': 'item-tooltip',
+            }}
+          >
+            Option
+          </EuiListItemLayout>
+        );
+
+        await waitForEuiToolTipVisible();
+
+        expect(getByTestSubject('item-tooltip')).toBeInTheDocument();
+      });
+
+      it('does not show a tooltip when `isFocused=false`', () => {
+        render(
+          <EuiListItemLayout
+            component="button"
+            isFocused={false}
+            tooltipProps={{
+              title: 'Tooltip',
+              content: 'Tooltip content',
+              delay: 'regular',
+              position: 'bottom',
+              'data-test-subj': 'item-tooltip',
+            }}
+          >
+            Option
+          </EuiListItemLayout>
+        );
+
+        expect(
+          document.querySelector('.euiToolTipPopover')
+        ).not.toBeInTheDocument();
+        expect(
+          document.querySelector('[data-test-subj="item-tooltip"]')
+        ).not.toBeInTheDocument();
+      });
+
+      it('does not show a tooltip when `isDisabled=true` and `isFocused=true`', async () => {
+        render(
+          <EuiListItemLayout
+            component="button"
+            isFocused
+            isDisabled
+            tooltipProps={{
+              title: 'Tooltip',
+              content: 'Tooltip content',
+              delay: 'regular',
+              position: 'bottom',
+              'data-test-subj': 'item-tooltip',
+            }}
+          >
+            Option
+          </EuiListItemLayout>
+        );
+
+        expect(
+          document.querySelector('.euiToolTipPopover')
+        ).not.toBeInTheDocument();
+        expect(
+          document.querySelector('[data-test-subj="item-tooltip"]')
+        ).not.toBeInTheDocument();
+      });
+
+      it('hides a visible tooltip when `isFocused` is updated to `false`', async () => {
+        const { getByTestSubject, rerender } = render(
+          <EuiListItemLayout
+            component="button"
+            isFocused
+            tooltipProps={{
+              title: 'Tooltip',
+              content: 'Tooltip content',
+              delay: 'regular',
+              position: 'bottom',
+              'data-test-subj': 'item-tooltip',
+            }}
+          >
+            Option
+          </EuiListItemLayout>
+        );
+
+        await waitForEuiToolTipVisible();
+
+        expect(getByTestSubject('item-tooltip')).toBeInTheDocument();
+
+        rerender(
+          <EuiListItemLayout
+            component="button"
+            isFocused={false}
+            tooltipProps={{
+              title: 'Tooltip',
+              content: 'Tooltip content',
+              delay: 'regular',
+              position: 'bottom',
+              'data-test-subj': 'item-tooltip',
+            }}
+          >
+            Option
+          </EuiListItemLayout>
+        );
+
+        await waitForEuiToolTipHidden();
+      });
+    });
+
+    describe('data-test-subj', () => {
+      it('applies custom `data-test-subj`', async () => {
+        const { getByTestSubject } = render(
+          <EuiListItemLayout component="li" data-test-subj="custom-selector">
+            Option
+          </EuiListItemLayout>
+        );
+
+        const element = getByTestSubject('custom-selector');
+
+        expect(element).toBeInTheDocument();
+      });
+
+      it('applies custom `data-test-subj` to the wrapper if `wrapperComponent` is defined', async () => {
+        const { getByTestSubject } = render(
+          <EuiListItemLayout
+            component="button"
+            wrapperComponent="li"
+            data-test-subj="custom-selector"
+          >
+            Option
+          </EuiListItemLayout>
+        );
+
+        const wrapper = getByTestSubject('custom-selector-wrapper');
+        const element = getByTestSubject('custom-selector');
+
+        expect(wrapper).toBeInTheDocument();
+        expect(element).toBeInTheDocument();
+      });
+    });
+  });
+});
diff --git a/packages/eui/src/components/list_item_layout/_list_item_layout.tsx b/packages/eui/src/components/list_item_layout/_list_item_layout.tsx
new file mode 100644
index 00000000000..ebcc2442de4
--- /dev/null
+++ b/packages/eui/src/components/list_item_layout/_list_item_layout.tsx
@@ -0,0 +1,604 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, {
+  AnchorHTMLAttributes,
+  ButtonHTMLAttributes,
+  HTMLAttributes,
+  ReactNode,
+  forwardRef,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+// @ts-ignore module doesn't export `createElement`
+import { createElement } from '@emotion/react';
+import classNames from 'classnames';
+
+import { useEuiMemoizedStyles } from '../../services';
+import { CommonProps, ExclusiveUnion } from '../common';
+import {
+  euiListItemLayoutStyles,
+  euiListItemLayoutWrapperStyles,
+} from './_list_item_layout.styles';
+import { EuiToolTip, EuiToolTipProps } from '../tool_tip';
+import { EuiCheckboxControl } from '../form';
+import { EuiIcon, IconColor, IconType } from '../icon';
+
+export const OPTION_CHECKED_STATES = ['on', 'off', 'mixed', undefined] as const;
+export type EuiListItemLayoutCheckedType =
+  (typeof OPTION_CHECKED_STATES)[number];
+
+const NATIVELY_CHECKABLE_ROLES = [
+  'checkbox',
+  'menuitemcheckbox',
+  'radio',
+  'menuitemradio',
+  'switch',
+];
+const ROLES_THAT_CAN_BE_MIXED = ['option', 'checkbox', 'menuitemcheckbox'];
+const ROLES_THAT_CAN_USE_ARIA_CHECKED = [
+  'option',
+  ...NATIVELY_CHECKABLE_ROLES,
+] as const;
+const ROLES_THAT_CAN_USE_ARIA_SELECTED = [
+  'tab',
+  'gridcell',
+  'option',
+  'row',
+  'treeitem',
+];
+
+export type EuiListItemLayoutSharedProps = CommonProps & {
+  children?: ReactNode;
+  /**
+   * Slot for prepended content (icons)
+   */
+  prepend?: ReactNode;
+  /**
+   * Slot for additional appended content (e.g. badges)
+   * Use extraAction instead for interactive elements.
+   */
+  append?: ReactNode;
+  /**
+   * Slot for additional interactive appended content (extra actions)
+   */
+  extraAction?: ReactNode;
+  /**
+   * Set to manually define the wrapping element for navigational items (`component=button/a`).
+   * This has no effect when `component=li/div`.
+   * @default 'li'
+   */
+  wrapperComponent?: 'li' | 'div';
+  /**
+   * Props applied to the wrapper.
+   * Applies only if `warpperComponent` is defined or `extraAction` is passed.
+   */
+  wrapperProps?: CommonProps;
+  /**
+   * Props applied to the content wrapper element.
+   */
+  contentProps?: CommonProps;
+  /**
+   * Props applied to the label text element.
+   */
+  textProps?: CommonProps;
+  prependProps?: CommonProps;
+  appendProps?: CommonProps;
+  tooltipProps?: Omit<EuiToolTipProps, 'children'>;
+  /**
+   * Controls the item checked indicator and applies a semantic `aria-checked` attribute.
+   * Ensure to pass an appropriate `role` for the item that supports semantic
+   * `checked` state. For no/other role(s) `checked` only controls the visual checked indicator.
+   *
+   * When using `singleSelection=true` it's expected to only use the values `on` or `undefined`
+   * to toggle between checked and not checked.
+   */
+  checked?: EuiListItemLayoutCheckedType;
+  /**
+   * Controls the item selection state within a list (not the checked indicator).
+   * It applies an `aria-selected` or `aria-current` attributes depending on `component` and `role`.
+   * It adds a visual selected style when `isSingleSelection=true` or `showIndicator=false`.
+   */
+  isSelected?: boolean;
+  /**
+   * Highlights the item as currently navigated item within a listbox.
+   * The item is not acutally focused, it will only be styled as active.
+   */
+  isFocused?: boolean;
+  isDisabled?: boolean;
+  /**
+   * Toggles between multi-selection (renders checkbox indicators) and
+   * single-selection (renders icon indicators).
+   * @default false
+   */
+  isSingleSelection?: boolean;
+  /**
+   * Manually overrides the selection type (checkbox vs selection).
+   * This controls whether `aria-checked` or `aria-selected` attributes are set.
+   *
+   * By default when unset, it's handled internally based on `isSingleSelection`
+   * and applies `aria-checked` to multi-selection and `aria-selected` to single-selection.
+   *
+   * Use only when you need to manually adjust this, e.g. for a single-selection
+   * multi-state checkbox item (supports exclusion or indeterminate).
+   */
+  selectionMode?: 'checked' | 'selected';
+  /**
+   * Controls the visibility of the indicator.
+   * @default true
+   */
+  showIndicator?: boolean;
+  /**
+   * Native `role` attribute.
+   * If you pass a custom role make sure to align `selectionMode` where needed as well.
+   * Set it to `checked` when the role natively supports checked states and to `selected` otherwise.
+   */
+  role?: HTMLAttributes<HTMLElement>['role'];
+
+  /**
+   * How to handle long text within the item.
+   * @default 'truncate'
+   */
+  textWrap?: 'truncate' | 'wrap';
+};
+
+export type EuiListItemLayoutAsLi = {
+  component: 'li';
+} & EuiListItemLayoutSharedProps &
+  Omit<HTMLAttributes<HTMLLIElement>, 'role'>;
+export type EuiListItemLayoutAsDiv = {
+  component: 'div';
+} & EuiListItemLayoutSharedProps &
+  Omit<HTMLAttributes<HTMLDivElement>, 'role'>;
+export type EuiListItemLayoutAsButton = {
+  component: 'button';
+} & EuiListItemLayoutSharedProps &
+  Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'disabled' | 'role'>;
+export type EuiListItemLayoutAsAnchor = {
+  component: 'a';
+} & EuiListItemLayoutSharedProps &
+  Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'role'>;
+
+// Ensure an exclusive union of either li, div, button, or anchor
+export type EuiListItemLayoutProps = ExclusiveUnion<
+  EuiListItemLayoutAsLi,
+  ExclusiveUnion<
+    ExclusiveUnion<EuiListItemLayoutAsButton, EuiListItemLayoutAsAnchor>,
+    EuiListItemLayoutAsDiv
+  >
+>;
+
+/**
+ * This is an EUI internal-only layout component that is used to share layout and
+ * styles between selection and navigational list components.
+ */
+export const EuiListItemLayout = forwardRef<
+  HTMLElement,
+  EuiListItemLayoutProps
+>(
+  (
+    {
+      children: _children,
+      component: _component = 'li',
+      wrapperComponent,
+      className,
+      css,
+      role,
+      prepend: _prepend,
+      append: _append,
+      extraAction,
+      wrapperProps: _wrapperProps,
+      contentProps: _contentProps,
+      prependProps: _prependProps,
+      appendProps: _appendProps,
+      textProps: _textProps,
+      tooltipProps: _tooltipProps,
+      checked,
+      isDisabled,
+      isFocused,
+      isSelected,
+      isSingleSelection = true,
+      selectionMode: _selectionMode,
+      showIndicator = true,
+      textWrap = 'truncate',
+      'aria-describedby': _ariaDescribedBy,
+      'aria-selected': _ariaSelected,
+      'aria-checked': _ariaChecked,
+      'data-test-subj': dataTestSubj = 'euiListItemLayout',
+      ...props
+    },
+    ref
+  ) => {
+    const [tooltipRef, setTooltipRef] = useState<EuiToolTip | null>(null); // Needs to be state and not a ref to trigger useEffect
+    const [ariaDescribedBy, setAriaDescribedBy] = useState(_ariaDescribedBy);
+
+    const { href, target, rel, ...rest } =
+      props as AnchorHTMLAttributes<HTMLAnchorElement>;
+
+    const component = _component === 'a' && isDisabled ? 'button' : _component;
+    const hasToolTip = !!_tooltipProps && !isDisabled;
+
+    const isNonInteractiveComponent = ['li', 'div'].includes(component);
+    const isInteractiveComponent =
+      ['button', 'a'].includes(component) ||
+      ['button', 'link'].includes(role ?? '');
+    /* Multi-action: component is interactive (button/a) and has an additional action passed via `extraAction`,
+    which requires to not nest interactive elements. The wrapper is the outermost styled container and owns
+    hover/focus/selected styles.
+    Single-action: component (li/div) is the outermost element and owns all styles. */
+    const isMultiAction = extraAction != null && isInteractiveComponent;
+    const WrapperComponent = isMultiAction
+      ? wrapperComponent ?? 'li'
+      : isInteractiveComponent
+      ? wrapperComponent
+      : undefined;
+    const hasWrapper = WrapperComponent != null;
+
+    // aria-checked is intended to be used with role="checkbox" but
+    // the MDN documentation lists it as a possibility for role="option".
+    // See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked
+    // and https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/option_role
+    const ariaChecked = useMemo(() => {
+      if (!role) return undefined;
+      if (!ROLES_THAT_CAN_USE_ARIA_CHECKED.includes(role)) return undefined;
+
+      switch (checked) {
+        case 'on':
+        case 'off':
+          return true;
+        case 'mixed':
+          if (ROLES_THAT_CAN_BE_MIXED.includes(role)) {
+            return 'mixed';
+          } else {
+            return false;
+          }
+        default:
+          return false;
+      }
+    }, [role, checked]);
+
+    const defaultSelectionMode = useMemo((): 'checked' | 'selected' => {
+      if (!isSingleSelection) {
+        return 'checked';
+      }
+
+      if (role && NATIVELY_CHECKABLE_ROLES.includes(role)) {
+        return 'checked';
+      }
+
+      return 'selected';
+    }, [isSingleSelection, role]);
+
+    const selectionMode = _selectionMode ?? defaultSelectionMode;
+    const hasAriaChecked =
+      (selectionMode === 'checked' ? ariaChecked : undefined) !== undefined;
+    const hasAriaSelected = ROLES_THAT_CAN_USE_ARIA_SELECTED.includes(
+      role ?? ''
+    );
+    const hasCustomAriaSelected = _ariaSelected != null;
+
+    /* Styles */
+
+    const wrapperClasses = classNames(
+      'euiListItemLayout__wrapper',
+      _wrapperProps?.className
+    );
+    const classes = classNames('euiListItemLayout', className);
+    const wrapperStyles = useEuiMemoizedStyles(euiListItemLayoutWrapperStyles);
+    const styles = useEuiMemoizedStyles(euiListItemLayoutStyles);
+
+    const interactiveStyles = [
+      styles.isInteractive,
+      isFocused && styles.isFocused,
+      (isSingleSelection || !showIndicator) && isSelected && styles.isSelected,
+      (isSingleSelection || !showIndicator) &&
+        isSelected &&
+        isFocused &&
+        styles.isSelectedFocused,
+    ];
+
+    const wrapperCssStyles = [
+      wrapperStyles.euiListItemLayout__wrapper,
+      extraAction && wrapperStyles.hasExtraAction,
+      !isDisabled && hasWrapper && interactiveStyles,
+      hasWrapper && css,
+      isDisabled && hasWrapper && styles.isDisabled,
+    ];
+    const cssStyles = [
+      styles.euiListItemLayout,
+      hasWrapper && styles.euiListItemLayout__action,
+      !isDisabled && !hasWrapper && interactiveStyles,
+      !hasWrapper && css,
+      isDisabled && styles.isDisabled,
+    ];
+
+    // Manually trigger the tooltip on keyboard focus
+    useEffect(() => {
+      if (!tooltipRef || isFocused == null) return;
+
+      if (isFocused) {
+        tooltipRef.showToolTip();
+      } else {
+        tooltipRef.hideToolTip();
+      }
+    }, [isFocused, tooltipRef]);
+
+    /* Props */
+
+    // Manually set the `aria-describedby` id on the wrapper
+    useEffect(() => {
+      if (tooltipRef) {
+        const tooltipId = tooltipRef.state.id;
+        setAriaDescribedBy(classNames(tooltipId, _ariaDescribedBy));
+      }
+    }, [tooltipRef, _ariaDescribedBy]);
+
+    const contentProps = useMemo(
+      () => ({
+        ..._contentProps,
+        css: [styles.euiListItemLayout__content, _contentProps?.css],
+        className: classNames(
+          'euiListItemLayout__content',
+          _contentProps?.className
+        ),
+      }),
+      [_contentProps, styles]
+    );
+
+    const textProps = useMemo(
+      () => ({
+        ..._textProps,
+        css: [
+          styles.euiListItemLayout__text,
+          styles.textWrap[textWrap],
+          _textProps?.css,
+        ],
+        className: classNames('euiListItemLayout__text', _textProps?.className),
+      }),
+      [_textProps, textWrap, styles]
+    );
+
+    /**
+     * ARIA selection attribute appliance:
+     * - multi-selection + checkable role -> `aria-checked`
+     * - multi-selection + non-checkable, selectable role -> `aria-selected`
+     * - multi-selection + non-checkable, non-selectable role -> `aria-current`
+     * - single-selection + checkable role -> `aria-checked`
+     * - single-selection + non-checkable, selectable role -> `aria-selected`
+     * - single-selection + non-checkable, non-selectable role -> `aria-current`
+     */
+
+    // added to selection list items only (`component=li/div`)
+    const selectionProps =
+      isNonInteractiveComponent && !isInteractiveComponent
+        ? {
+            role,
+            'aria-checked': hasAriaChecked ? ariaChecked : undefined,
+            'aria-selected':
+              !hasAriaChecked && hasAriaSelected ? isSelected : undefined,
+            'aria-current':
+              !hasAriaChecked && !hasAriaSelected && isSelected
+                ? 'true'
+                : undefined,
+          }
+        : {};
+
+    // added to navigational list items only (`component=button/a`)
+    const navigationalProps = isInteractiveComponent
+      ? {
+          'aria-current':
+            !hasCustomAriaSelected && isSelected ? 'true' : undefined, // indicates currently active navigation item
+          /* allow manual `aria-selected` overrides; By default a list of navigational elements likely uses `aria-current` but using
+          a button with appropriate `role` within a selection list could still be valid, though weird (e.g. custom EuiSuperSelect) */
+          'aria-selected': hasCustomAriaSelected ? isSelected : undefined, // indicates current selected item
+        }
+      : {};
+
+    const linkProps =
+      ['a'].includes(component) && !isDisabled
+        ? {
+            href,
+            target,
+            rel,
+          }
+        : {};
+
+    const disabledProps = isDisabled
+      ? {
+          disabled: component === 'button' ? isDisabled : undefined,
+          'aria-disabled': component !== 'button' ? isDisabled : undefined,
+        }
+      : {};
+
+    const wrapperProps = {
+      'data-test-subj': `${dataTestSubj}-wrapper`,
+      ..._wrapperProps,
+      className: wrapperClasses,
+      css: [wrapperCssStyles, _wrapperProps?.css],
+    };
+
+    const hasInternalTooltip = isNonInteractiveComponent && hasToolTip;
+    const elementProps = {
+      ref,
+      role,
+      className: classes,
+      css: cssStyles,
+      ...selectionProps,
+      ...navigationalProps,
+      ...linkProps,
+      ...disabledProps,
+      ['aria-describedby']: hasInternalTooltip
+        ? ariaDescribedBy
+        : _ariaDescribedBy,
+      'data-test-subj': dataTestSubj,
+      ...rest,
+    };
+
+    /* Render nodes */
+
+    const indicator = useMemo(() => {
+      if (showIndicator) {
+        if (!isSingleSelection) {
+          return (
+            <EuiCheckboxControl
+              className="euiListItemLayout__checkbox"
+              checked={checked === 'on'}
+              disabled={isDisabled}
+              indeterminate={checked === 'mixed'}
+              excluded={checked === 'off'}
+            />
+          );
+        }
+
+        const { icon, color } = resolveIconAndColor(
+          checked,
+          isSelected,
+          isDisabled
+        );
+
+        return (
+          <EuiIcon
+            css={styles.euiListItemLayout__icon}
+            className="euiListItemLayout__icon"
+            color={color}
+            type={icon}
+          />
+        );
+      }
+    }, [
+      checked,
+      isSingleSelection,
+      showIndicator,
+      isSelected,
+      isDisabled,
+      styles,
+    ]);
+
+    const prepend = useMemo(() => {
+      if (_prepend) {
+        const prependProps = {
+          ..._prependProps,
+          css: [styles.euiListItemLayout__prepend, _prependProps?.css],
+          className: classNames(
+            'euiListItemLayout__prepend',
+            _prependProps?.className
+          ),
+        };
+
+        return <span {...prependProps}>{_prepend}</span>;
+      }
+    }, [_prepend, _prependProps, styles]);
+
+    const append = useMemo(() => {
+      if (_append) {
+        const appendProps = {
+          ..._appendProps,
+          css: [styles.euiListItemLayout__append, _appendProps?.css],
+          className: classNames(
+            'euiListItemLayout__append',
+            _appendProps?.className
+          ),
+        };
+
+        return <span {...appendProps}>{_append}</span>;
+      }
+    }, [_append, _appendProps, styles]);
+
+    const innerContent = (
+      <span {...contentProps}>
+        {indicator}
+        {prepend}
+        <span {...textProps}>{_children}</span>
+        {append}
+        {!isMultiAction && extraAction}
+      </span>
+    );
+    /* for non interactive elements, specifically semantic li we need to
+    ensure that the li is the outer element to be a valid child of a wrapping ul */
+    const content = hasInternalTooltip ? (
+      <EuiToolTip
+        ref={setTooltipRef}
+        content={_tooltipProps?.content}
+        anchorClassName="eui-fullWidth"
+        {..._tooltipProps}
+      >
+        {innerContent}
+      </EuiToolTip>
+    ) : (
+      innerContent
+    );
+
+    /* Uses `createElement` to side step having to speficy element types. Since this is an
+    internal-only component and we're speficying separate types for each element, we can safely
+    assume the right props are passed at this point.
+    It uses the import from @emotion/react to ensure the `css` props works as in JSX. */
+    const innerElement = createElement(component, elementProps, content);
+    const element =
+      !isNonInteractiveComponent && hasToolTip ? (
+        <EuiToolTip
+          ref={setTooltipRef}
+          content={_tooltipProps?.content}
+          anchorClassName="eui-fullWidth"
+          {..._tooltipProps}
+        >
+          {innerElement}
+        </EuiToolTip>
+      ) : (
+        innerElement
+      );
+
+    return WrapperComponent ? (
+      <WrapperComponent {...wrapperProps}>
+        {element}
+        {isMultiAction && extraAction}
+      </WrapperComponent>
+    ) : (
+      element
+    );
+  }
+);
+
+EuiListItemLayout.displayName = 'EuiListItemLayout';
+
+/* Internal helpers */
+
+function resolveIconAndColor(
+  checked: EuiListItemLayoutCheckedType,
+  isSelected?: boolean,
+  isDisabled?: boolean
+): {
+  icon: IconType;
+  isSelected?: boolean;
+  isDisabled?: boolean;
+  color?: IconColor;
+} {
+  switch (checked) {
+    case 'on':
+      return {
+        icon: 'check',
+        color: isDisabled ? 'subdued' : isSelected ? 'primary' : 'text',
+      };
+    case 'off':
+      return {
+        icon: 'cross',
+        color: isDisabled ? 'subdued' : isSelected ? 'primary' : 'text',
+      };
+    case 'mixed':
+      return {
+        icon: 'minus',
+        color: isDisabled ? 'subdued' : isSelected ? 'primary' : 'text',
+      };
+    case undefined:
+    default:
+      return {
+        icon: 'empty',
+        color: isDisabled ? 'subdued' : 'text',
+      };
+  }
+}
diff --git a/packages/eui/src/components/list_item_layout/index.ts b/packages/eui/src/components/list_item_layout/index.ts
new file mode 100644
index 00000000000..9425413eb1a
--- /dev/null
+++ b/packages/eui/src/components/list_item_layout/index.ts
@@ -0,0 +1,16 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export { EuiListItemLayout } from './_list_item_layout';
+export type {
+  EuiListItemLayoutProps,
+  EuiListItemLayoutAsLi,
+  EuiListItemLayoutAsDiv,
+  EuiListItemLayoutAsButton,
+  EuiListItemLayoutAsAnchor,
+} from './_list_item_layout';
diff --git a/packages/eui/src/components/search_bar/filters/field_value_selection_filter.spec.tsx b/packages/eui/src/components/search_bar/filters/field_value_selection_filter.spec.tsx
index 7f1f3464bea..6df7b85eb90 100644
--- a/packages/eui/src/components/search_bar/filters/field_value_selection_filter.spec.tsx
+++ b/packages/eui/src/components/search_bar/filters/field_value_selection_filter.spec.tsx
@@ -194,45 +194,45 @@ describe('FieldValueSelectionFilter', () => {
       cy.get('button').click();
 
       cy.get('li[role="option"][title="feature"]')
-        .should('have.attr', 'aria-checked', 'false')
+        .should('have.attr', 'aria-selected', 'false')
         .click();
       cy.get('.euiNotificationBadge').should('have.text', '1');
       cy.get('li[role="option"][title="feature"]').should(
         'have.attr',
-        'aria-checked',
+        'aria-selected',
         'true'
       );
 
       // Multiselect false should close the popover, so we need to re-open it
       cy.get('button').click();
       cy.get('li[role="option"][title="Bug"]')
-        .should('have.attr', 'aria-checked', 'false')
+        .should('have.attr', 'aria-selected', 'false')
         .click();
       // Filter count should have remained at 1
       cy.get('.euiNotificationBadge').should('have.text', '1');
       cy.get('li[role="option"][title="Bug"]').should(
         'have.attr',
-        'aria-checked',
+        'aria-selected',
         'true'
       );
       // 'featured' should now be unchecked
       cy.get('li[role="option"][title="feature"]').should(
         'have.attr',
-        'aria-checked',
+        'aria-selected',
         'false'
       );
     });
   });
 
   describe('auto-close testing', () => {
-    const selectFilter = () => {
+    const selectFilter = (state: 'checked' | 'selected' = 'checked') => {
       // Open popover
       cy.get('button').click();
       cy.get('.euiPopover__panel').should('exist');
 
       // Select filter option
       cy.get('li[role="option"][title="feature"]')
-        .should('have.attr', 'aria-checked', 'false')
+        .should('have.attr', `aria-${state}`, 'false')
         .click();
     };
 
@@ -244,7 +244,7 @@ describe('FieldValueSelectionFilter', () => {
             multiSelect={true}
           />
         );
-        selectFilter();
+        selectFilter('checked');
         cy.get('.euiPopover__panel').should('exist');
       });
 
@@ -255,7 +255,7 @@ describe('FieldValueSelectionFilter', () => {
             multiSelect={false}
           />
         );
-        selectFilter();
+        selectFilter('selected');
         cy.get('.euiPopover__panel').should('not.exist');
       });
     });
@@ -268,7 +268,7 @@ describe('FieldValueSelectionFilter', () => {
             multiSelect={true}
           />
         );
-        selectFilter();
+        selectFilter('checked');
         cy.get('.euiPopover__panel').should('exist');
       });
 
@@ -279,7 +279,7 @@ describe('FieldValueSelectionFilter', () => {
             multiSelect={false}
           />
         );
-        selectFilter();
+        selectFilter('selected');
         cy.get('.euiPopover__panel').should('exist');
       });
     });
@@ -292,7 +292,7 @@ describe('FieldValueSelectionFilter', () => {
             multiSelect={true}
           />
         );
-        selectFilter();
+        selectFilter('checked');
         cy.get('.euiPopover__panel').should('not.exist');
       });
 
@@ -304,7 +304,7 @@ describe('FieldValueSelectionFilter', () => {
           />
         );
 
-        selectFilter();
+        selectFilter('selected');
         cy.get('.euiPopover__panel').should('not.exist');
       });
     });
@@ -323,8 +323,10 @@ describe('FieldValueSelectionFilter', () => {
       getOptions()
         .first()
         .should('have.attr', 'title', 'Bug')
-        .should('have.attr', 'aria-checked', 'true')
-        .should('have.attr', 'aria-selected', 'true');
+        .should('have.attr', 'aria-checked', 'true');
+      cy.get('ul[role="listbox"]')
+        .should('have.attr', 'aria-activedescendant')
+        .should('include', 'option-0');
     });
 
     it('does not sort selected options to the top when set to false', () => {
@@ -336,8 +338,10 @@ describe('FieldValueSelectionFilter', () => {
       getOptions()
         .last()
         .should('have.attr', 'title', 'Bug')
-        .should('have.attr', 'aria-checked', 'true')
-        .should('have.attr', 'aria-selected', 'true');
+        .should('have.attr', 'aria-checked', 'true');
+      cy.get('ul[role="listbox"]')
+        .should('have.attr', 'aria-activedescendant')
+        .should('include', 'option-2');
     });
   });
 
diff --git a/packages/eui/src/components/selectable/__snapshots__/selectable.test.tsx.snap b/packages/eui/src/components/selectable/__snapshots__/selectable.test.tsx.snap
index 16541437f80..e80c18e8d0b 100644
--- a/packages/eui/src/components/selectable/__snapshots__/selectable.test.tsx.snap
+++ b/packages/eui/src/components/selectable/__snapshots__/selectable.test.tsx.snap
@@ -26,19 +26,19 @@ exports[`EuiSelectable custom options with data 1`] = `
           <li
             aria-checked="false"
             aria-posinset="1"
-            aria-selected="false"
             aria-setsize="3"
-            class="euiSelectableListItem emotion-euiSelectableListItem"
+            class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+            data-test-subj="euiListItemLayout"
             id="generated-id_listbox_option-0"
             role="option"
             style="position: absolute; left: 0px; top: 0px; height: 32px; width: 100%;"
             title="Titan"
           >
             <span
-              class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+              class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
             >
               <span
-                class="EuiCheckboxControl euiSelectableListItem__checkbox emotion-EuiCheckboxControl-unselected"
+                class="EuiCheckboxControl euiListItemLayout__checkbox emotion-EuiCheckboxControl-unselected"
               >
                 <span
                   class="emotion-euiCheckbox__icon-check"
@@ -47,7 +47,7 @@ exports[`EuiSelectable custom options with data 1`] = `
                 />
               </span>
               <span
-                class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+                class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
               >
                 <span>
                   VI
@@ -60,19 +60,19 @@ exports[`EuiSelectable custom options with data 1`] = `
           <li
             aria-checked="false"
             aria-posinset="2"
-            aria-selected="false"
             aria-setsize="3"
-            class="euiSelectableListItem emotion-euiSelectableListItem"
+            class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+            data-test-subj="euiListItemLayout"
             id="generated-id_listbox_option-1"
             role="option"
             style="position: absolute; left: 0px; top: 32px; height: 32px; width: 100%;"
             title="Enceladus"
           >
             <span
-              class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+              class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
             >
               <span
-                class="EuiCheckboxControl euiSelectableListItem__checkbox emotion-EuiCheckboxControl-unselected"
+                class="EuiCheckboxControl euiListItemLayout__checkbox emotion-EuiCheckboxControl-unselected"
               >
                 <span
                   class="emotion-euiCheckbox__icon-check"
@@ -81,7 +81,7 @@ exports[`EuiSelectable custom options with data 1`] = `
                 />
               </span>
               <span
-                class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+                class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
               >
                 <span>
                   II
@@ -94,19 +94,19 @@ exports[`EuiSelectable custom options with data 1`] = `
           <li
             aria-checked="false"
             aria-posinset="3"
-            aria-selected="false"
             aria-setsize="3"
-            class="euiSelectableListItem emotion-euiSelectableListItem"
+            class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+            data-test-subj="euiListItemLayout"
             id="generated-id_listbox_option-2"
             role="option"
             style="position: absolute; left: 0px; top: 64px; height: 32px; width: 100%;"
             title="Pandora is one of Saturn's moons, named for a Titaness of Greek mythology"
           >
             <span
-              class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+              class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
             >
               <span
-                class="EuiCheckboxControl euiSelectableListItem__checkbox emotion-EuiCheckboxControl-unselected"
+                class="EuiCheckboxControl euiListItemLayout__checkbox emotion-EuiCheckboxControl-unselected"
               >
                 <span
                   class="emotion-euiCheckbox__icon-check"
@@ -115,7 +115,7 @@ exports[`EuiSelectable custom options with data 1`] = `
                 />
               </span>
               <span
-                class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+                class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
               >
                 <span>
                   XVII
@@ -174,9 +174,8 @@ exports[`EuiSelectable errorMessage prop does not render the message when not de
           <li
             aria-checked="false"
             aria-posinset="1"
-            aria-selected="false"
             aria-setsize="3"
-            class="euiSelectableListItem emotion-euiSelectableListItem"
+            class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
             data-test-subj="titanOption"
             id="generated-id_listbox_option-0"
             role="option"
@@ -184,10 +183,10 @@ exports[`EuiSelectable errorMessage prop does not render the message when not de
             title="Titan"
           >
             <span
-              class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+              class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
             >
               <span
-                class="EuiCheckboxControl euiSelectableListItem__checkbox emotion-EuiCheckboxControl-unselected"
+                class="EuiCheckboxControl euiListItemLayout__checkbox emotion-EuiCheckboxControl-unselected"
               >
                 <span
                   class="emotion-euiCheckbox__icon-check"
@@ -196,7 +195,7 @@ exports[`EuiSelectable errorMessage prop does not render the message when not de
                 />
               </span>
               <span
-                class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+                class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
               >
                 Titan
               </span>
@@ -205,19 +204,19 @@ exports[`EuiSelectable errorMessage prop does not render the message when not de
           <li
             aria-checked="false"
             aria-posinset="2"
-            aria-selected="false"
             aria-setsize="3"
-            class="euiSelectableListItem emotion-euiSelectableListItem"
+            class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+            data-test-subj="euiListItemLayout"
             id="generated-id_listbox_option-1"
             role="option"
             style="position: absolute; left: 0px; top: 32px; height: 32px; width: 100%;"
             title="Enceladus"
           >
             <span
-              class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+              class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
             >
               <span
-                class="EuiCheckboxControl euiSelectableListItem__checkbox emotion-EuiCheckboxControl-unselected"
+                class="EuiCheckboxControl euiListItemLayout__checkbox emotion-EuiCheckboxControl-unselected"
               >
                 <span
                   class="emotion-euiCheckbox__icon-check"
@@ -226,7 +225,7 @@ exports[`EuiSelectable errorMessage prop does not render the message when not de
                 />
               </span>
               <span
-                class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+                class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
               >
                 Enceladus
               </span>
@@ -235,19 +234,19 @@ exports[`EuiSelectable errorMessage prop does not render the message when not de
           <li
             aria-checked="false"
             aria-posinset="3"
-            aria-selected="false"
             aria-setsize="3"
-            class="euiSelectableListItem emotion-euiSelectableListItem"
+            class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+            data-test-subj="euiListItemLayout"
             id="generated-id_listbox_option-2"
             role="option"
             style="position: absolute; left: 0px; top: 64px; height: 32px; width: 100%;"
             title="Pandora is one of Saturn's moons, named for a Titaness of Greek mythology"
           >
             <span
-              class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+              class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
             >
               <span
-                class="EuiCheckboxControl euiSelectableListItem__checkbox emotion-EuiCheckboxControl-unselected"
+                class="EuiCheckboxControl euiListItemLayout__checkbox emotion-EuiCheckboxControl-unselected"
               >
                 <span
                   class="emotion-euiCheckbox__icon-check"
@@ -256,7 +255,7 @@ exports[`EuiSelectable errorMessage prop does not render the message when not de
                 />
               </span>
               <span
-                class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+                class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
               >
                 Pandora is one of Saturn's moons, named for a Titaness of Greek mythology
               </span>
diff --git a/packages/eui/src/components/selectable/selectable.spec.tsx b/packages/eui/src/components/selectable/selectable.spec.tsx
index 24d53515e9a..4fe7b12ea6b 100644
--- a/packages/eui/src/components/selectable/selectable.spec.tsx
+++ b/packages/eui/src/components/selectable/selectable.spec.tsx
@@ -62,9 +62,9 @@ describe('EuiSelectable', () => {
         .realPress('{downarrow}')
         .realPress('{downarrow}')
         .then(() => {
-          cy.get('li[role=option]')
-            .eq(1)
-            .should('have.attr', 'aria-selected', 'true');
+          cy.get('input')
+            .should('have.attr', 'aria-activedescendant')
+            .and('include', 'option-1');
         });
 
       // Focus remains on the second option
@@ -75,9 +75,9 @@ describe('EuiSelectable', () => {
         .realPress('Meta')
         .realPress('Shift')
         .then(() => {
-          cy.get('li[role=option]')
-            .eq(1)
-            .should('have.attr', 'aria-selected', 'true');
+          cy.get('input')
+            .should('have.attr', 'aria-activedescendant')
+            .and('include', 'option-1');
         });
 
       // Filter the list
@@ -346,7 +346,7 @@ describe('EuiSelectable', () => {
         );
         cy.get('[data-test-subj="truncatedText"]').should(
           'have.text',
-          'Lorem ip…ing elit.'
+          'Lorem ips…ing elit.'
         );
       });
 
diff --git a/packages/eui/src/components/selectable/selectable.stories.tsx b/packages/eui/src/components/selectable/selectable.stories.tsx
index 17d051e6a34..3c67e39f478 100644
--- a/packages/eui/src/components/selectable/selectable.stories.tsx
+++ b/packages/eui/src/components/selectable/selectable.stories.tsx
@@ -86,6 +86,7 @@ const meta: Meta<EuiSelectableProps> = {
     searchable: false,
     singleSelection: false,
     isPreFiltered: false,
+    allowExclusions: false,
   },
 };
 hideStorybookControls(meta, ['aria-label']);
@@ -93,6 +94,8 @@ hideStorybookControls(meta, ['aria-label']);
 export default meta;
 type Story = StoryObj<EuiSelectableProps>;
 
+enableFunctionToggleControls(meta, ['onChange', 'onActiveOptionChange']);
+
 export const Playground: Story = {
   args: {
     options,
@@ -107,7 +110,6 @@ export const Playground: Story = {
   },
   render: ({ ...args }: EuiSelectableProps) => <StatefulSelectable {...args} />,
 };
-enableFunctionToggleControls(Playground, ['onChange', 'onActiveOptionChange']);
 
 export const WithSearch: Story = {
   args: {
@@ -164,9 +166,56 @@ export const WithSearchAndGroups: Story = {
   render: ({ ...args }: EuiSelectableProps) => <StatefulSelectable {...args} />,
 };
 
+export const WithoutVirtualization: Story = {
+  args: {
+    ...Playground.args,
+    listProps: {
+      isVirtualized: false,
+    },
+    // same height as virtualized variant to support direct comparison
+    height: 208,
+  },
+  render: ({ ...args }: EuiSelectableProps) => <StatefulSelectable {...args} />,
+};
+
+export const WithTruncation: Story = {
+  tags: ['vrt-only'],
+  args: {
+    ...Playground.args,
+    options: [
+      {
+        label:
+          'Titan Titan Titan Titan Titan Titan Titan Titan Titan Titan Titan', // CSS truncation
+      },
+      {
+        label:
+          'Mimas Mimas Mimas Mimas Mimas Mimas Mimas Mimas Mimas Mimas Mimas',
+        truncationProps: { truncation: 'end' }, // EuiTextTruncate truncation
+      },
+      {
+        label:
+          'Dione Dione Dione Dione Dione Dione Dione Dione Dione Dione Dione',
+        truncationProps: { truncation: 'start' },
+      },
+      {
+        label:
+          'Iapetus Iapetus Iapetus Iapetus Iapetus Iapetus Iapetus Iapetus',
+        truncationProps: { truncation: 'startEnd' },
+      },
+      {
+        label: 'Phoebe Phoebe Phoebe Phoebe Phoebe Phoebe Phoebe Phoebe Phoebe',
+        truncationProps: { truncation: 'middle' },
+      },
+    ],
+    style: { width: 250 },
+  },
+  render: ({ ...args }: EuiSelectableProps) => <StatefulSelectable {...args} />,
+};
+
 const StatefulSelectable = ({
   options,
   onChange,
+  onActiveOptionChange,
   ...rest
 }: EuiSelectableProps) => {
   const [selectableOptions, setOptions] = useState(options);
diff --git a/packages/eui/src/components/selectable/selectable_list/__snapshots__/selectable_list.test.tsx.snap b/packages/eui/src/components/selectable/selectable_list/__snapshots__/selectable_list.test.tsx.snap
index 1ca1d81788a..600b638b80c 100644
--- a/packages/eui/src/components/selectable/selectable_list/__snapshots__/selectable_list.test.tsx.snap
+++ b/packages/eui/src/components/selectable/selectable_list/__snapshots__/selectable_list.test.tsx.snap
@@ -17,138 +17,143 @@ exports[`EuiSelectableListItem group labels handles updating aria attrs correctl
       tabindex="0"
     >
       <li
-        class="euiSelectableList__groupLabel emotion-euiSelectableList__groupLabel"
+        class="euiSelectableList__groupLabel css-qwp38o-groupLabel"
         role="presentation"
       >
         Moons
       </li>
       <li
-        aria-checked="false"
         aria-posinset="1"
         aria-selected="false"
         aria-setsize="5"
-        class="euiSelectableListItem emotion-euiSelectableListItem"
+        class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+        data-test-subj="euiListItemLayout"
         id="option_1"
         role="option"
         title="Titan"
       >
         <span
-          class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+          class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
         >
           <span
-            class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+            class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+            color="text"
             data-euiicon-type="empty"
           />
           <span
-            class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+            class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
           >
             Titan
           </span>
         </span>
       </li>
       <li
-        aria-checked="false"
         aria-posinset="2"
         aria-selected="false"
         aria-setsize="5"
-        class="euiSelectableListItem emotion-euiSelectableListItem"
+        class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+        data-test-subj="euiListItemLayout"
         id="option_2"
         role="option"
         title="Io"
       >
         <span
-          class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+          class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
         >
           <span
-            class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+            class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+            color="text"
             data-euiicon-type="empty"
           />
           <span
-            class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+            class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
           >
             Io
           </span>
         </span>
       </li>
       <li
-        class="euiSelectableList__groupLabel emotion-euiSelectableList__groupLabel"
+        class="euiSelectableList__groupLabel css-qwp38o-groupLabel"
         role="presentation"
       >
         Planets
       </li>
       <li
-        aria-checked="false"
         aria-posinset="3"
         aria-selected="false"
         aria-setsize="5"
-        class="euiSelectableListItem emotion-euiSelectableListItem"
+        class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+        data-test-subj="euiListItemLayout"
         id="option_4"
         role="option"
         title="Mercury"
       >
         <span
-          class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+          class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
         >
           <span
-            class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+            class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+            color="text"
             data-euiicon-type="empty"
           />
           <span
-            class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+            class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
           >
             Mercury
           </span>
         </span>
       </li>
       <li
-        aria-checked="false"
         aria-posinset="4"
         aria-selected="false"
         aria-setsize="5"
-        class="euiSelectableListItem emotion-euiSelectableListItem"
+        class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+        data-test-subj="euiListItemLayout"
         id="option_5"
         role="option"
         title="Mars"
       >
         <span
-          class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+          class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
         >
           <span
-            class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+            class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+            color="text"
             data-euiicon-type="empty"
           />
           <span
-            class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+            class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
           >
             Mars
           </span>
         </span>
       </li>
       <li
-        class="euiSelectableList__groupLabel emotion-euiSelectableList__groupLabel"
+        class="euiSelectableList__groupLabel css-qwp38o-groupLabel"
         role="presentation"
       >
         Suns
       </li>
       <li
-        aria-checked="false"
         aria-posinset="5"
         aria-selected="false"
         aria-setsize="5"
-        class="euiSelectableListItem emotion-euiSelectableListItem"
+        class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+        data-test-subj="euiListItemLayout"
         id="option_7"
         role="option"
         title="Sol"
       >
         <span
-          class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+          class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
         >
           <span
-            class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+            class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+            color="text"
             data-euiicon-type="empty"
           />
           <span
-            class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+            class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
           >
             Sol
           </span>
@@ -181,146 +186,151 @@ exports[`EuiSelectableListItem group labels renders with correct aria-setsize an
         tabindex="0"
       >
         <li
-          aria-checked="false"
           aria-posinset="1"
           aria-selected="false"
           aria-setsize="5"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_0"
           role="option"
           style="position: absolute; left: 0px; top: 0px; height: 32px; width: 100%;"
           title="Spaaaace"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Spaaaace
             </span>
           </span>
         </li>
         <li
-          class="euiSelectableList__groupLabel emotion-euiSelectableList__groupLabel"
+          class="euiSelectableList__groupLabel css-qwp38o-groupLabel"
           role="presentation"
           style="position: absolute; left: 0px; top: 32px; height: 48px; width: 100%;"
         >
           Moons
         </li>
         <li
-          aria-checked="false"
           aria-posinset="2"
           aria-selected="false"
           aria-setsize="5"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_2"
           role="option"
           style="position: absolute; left: 0px; top: 80px; height: 32px; width: 100%;"
           title="Titan"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Titan
             </span>
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="3"
           aria-selected="false"
           aria-setsize="5"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_3"
           role="option"
           style="position: absolute; left: 0px; top: 112px; height: 32px; width: 100%;"
           title="Io"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Io
             </span>
           </span>
         </li>
         <li
-          class="euiSelectableList__groupLabel emotion-euiSelectableList__groupLabel"
+          class="euiSelectableList__groupLabel css-qwp38o-groupLabel"
           role="presentation"
           style="position: absolute; left: 0px; top: 144px; height: 48px; width: 100%;"
         >
           Planets
         </li>
         <li
-          aria-checked="false"
           aria-posinset="4"
           aria-selected="false"
           aria-setsize="5"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_5"
           role="option"
           style="position: absolute; left: 0px; top: 192px; height: 32px; width: 100%;"
           title="Mercury"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Mercury
             </span>
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="5"
           aria-selected="false"
           aria-setsize="5"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_6"
           role="option"
           style="position: absolute; left: 0px; top: 224px; height: 32px; width: 100%;"
           title="Mars"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Mars
             </span>
           </span>
         </li>
         <li
-          class="euiSelectableList__groupLabel emotion-euiSelectableList__groupLabel"
+          class="euiSelectableList__groupLabel css-qwp38o-groupLabel"
           role="presentation"
           style="position: absolute; left: 0px; top: 256px; height: 48px; width: 100%;"
         >
@@ -354,11 +364,10 @@ exports[`EuiSelectableListItem is rendered 1`] = `
         tabindex="0"
       >
         <li
-          aria-checked="false"
           aria-posinset="1"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
           data-test-subj="titanOption"
           id="option_0"
           role="option"
@@ -366,139 +375,145 @@ exports[`EuiSelectableListItem is rendered 1`] = `
           title="Titan"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Titan
             </span>
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="2"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_1"
           role="option"
           style="position: absolute; left: 0px; top: 32px; height: 32px; width: 100%;"
           title="Enceladus"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Enceladus
             </span>
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="3"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_2"
           role="option"
           style="position: absolute; left: 0px; top: 64px; height: 32px; width: 100%;"
           title="Mimas"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Mimas
             </span>
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="4"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_3"
           role="option"
           style="position: absolute; left: 0px; top: 96px; height: 32px; width: 100%;"
           title="Pandora is one of Saturn's moons, named for a Titaness of Greek mythology"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Pandora is one of Saturn's moons, named for a Titaness of Greek mythology
             </span>
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="5"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_4"
           role="option"
           style="position: absolute; left: 0px; top: 128px; height: 32px; width: 100%;"
           title="Tethys"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Tethys
             </span>
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="6"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_5"
           role="option"
           style="position: absolute; left: 0px; top: 160px; height: 32px; width: 100%;"
           title="Hyperion"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Hyperion
             </span>
@@ -532,11 +547,10 @@ exports[`EuiSelectableListItem props activeOptionIndex 1`] = `
         tabindex="0"
       >
         <li
-          aria-checked="false"
           aria-posinset="1"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
           data-test-subj="titanOption"
           id="option_0"
           role="option"
@@ -544,139 +558,145 @@ exports[`EuiSelectableListItem props activeOptionIndex 1`] = `
           title="Titan"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Titan
             </span>
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="2"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_1"
           role="option"
           style="position: absolute; left: 0px; top: 32px; height: 32px; width: 100%;"
           title="Enceladus"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Enceladus
             </span>
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="3"
-          aria-selected="true"
+          aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem euiSelectableListItem-isFocused emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem euiSelectableListItem-isFocused emotion-euiListItemLayout-isInteractive-isFocused"
+          data-test-subj="euiListItemLayout"
           id="option_2"
           role="option"
           style="position: absolute; left: 0px; top: 64px; height: 32px; width: 100%;"
           title="Mimas"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Mimas
             </span>
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="4"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_3"
           role="option"
           style="position: absolute; left: 0px; top: 96px; height: 32px; width: 100%;"
           title="Pandora is one of Saturn's moons, named for a Titaness of Greek mythology"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Pandora is one of Saturn's moons, named for a Titaness of Greek mythology
             </span>
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="5"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_4"
           role="option"
           style="position: absolute; left: 0px; top: 128px; height: 32px; width: 100%;"
           title="Tethys"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Tethys
             </span>
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="6"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_5"
           role="option"
           style="position: absolute; left: 0px; top: 160px; height: 32px; width: 100%;"
           title="Hyperion"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Hyperion
             </span>
@@ -712,9 +732,8 @@ exports[`EuiSelectableListItem props allowExclusions 1`] = `
         <li
           aria-checked="false"
           aria-posinset="1"
-          aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
           data-test-subj="titanOption"
           id="option_0"
           role="option"
@@ -722,14 +741,15 @@ exports[`EuiSelectableListItem props allowExclusions 1`] = `
           title="Titan"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Titan
               <div
@@ -744,23 +764,24 @@ exports[`EuiSelectableListItem props allowExclusions 1`] = `
         <li
           aria-checked="false"
           aria-posinset="2"
-          aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_1"
           role="option"
           style="position: absolute; left: 0px; top: 32px; height: 32px; width: 100%;"
           title="Enceladus"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Enceladus
               <div
@@ -775,23 +796,24 @@ exports[`EuiSelectableListItem props allowExclusions 1`] = `
         <li
           aria-checked="false"
           aria-posinset="3"
-          aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_2"
           role="option"
           style="position: absolute; left: 0px; top: 64px; height: 32px; width: 100%;"
           title="Mimas"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Mimas
               <div
@@ -806,23 +828,24 @@ exports[`EuiSelectableListItem props allowExclusions 1`] = `
         <li
           aria-checked="false"
           aria-posinset="4"
-          aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_3"
           role="option"
           style="position: absolute; left: 0px; top: 96px; height: 32px; width: 100%;"
           title="Pandora is one of Saturn's moons, named for a Titaness of Greek mythology"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Pandora is one of Saturn's moons, named for a Titaness of Greek mythology
               <div
@@ -837,23 +860,24 @@ exports[`EuiSelectableListItem props allowExclusions 1`] = `
         <li
           aria-checked="false"
           aria-posinset="5"
-          aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_4"
           role="option"
           style="position: absolute; left: 0px; top: 128px; height: 32px; width: 100%;"
           title="Tethys"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Tethys
               <div
@@ -868,23 +892,24 @@ exports[`EuiSelectableListItem props allowExclusions 1`] = `
         <li
           aria-checked="false"
           aria-posinset="6"
-          aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_5"
           role="option"
           style="position: absolute; left: 0px; top: 160px; height: 32px; width: 100%;"
           title="Hyperion"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Hyperion
               <div
@@ -924,11 +949,10 @@ exports[`EuiSelectableListItem props bordered 1`] = `
         tabindex="0"
       >
         <li
-          aria-checked="false"
           aria-posinset="1"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
           data-test-subj="titanOption"
           id="option_0"
           role="option"
@@ -936,139 +960,145 @@ exports[`EuiSelectableListItem props bordered 1`] = `
           title="Titan"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Titan
             </span>
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="2"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_1"
           role="option"
           style="position: absolute; left: 0px; top: 32px; height: 32px; width: 100%;"
           title="Enceladus"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Enceladus
             </span>
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="3"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_2"
           role="option"
           style="position: absolute; left: 0px; top: 64px; height: 32px; width: 100%;"
           title="Mimas"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Mimas
             </span>
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="4"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_3"
           role="option"
           style="position: absolute; left: 0px; top: 96px; height: 32px; width: 100%;"
           title="Pandora is one of Saturn's moons, named for a Titaness of Greek mythology"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Pandora is one of Saturn's moons, named for a Titaness of Greek mythology
             </span>
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="5"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_4"
           role="option"
           style="position: absolute; left: 0px; top: 128px; height: 32px; width: 100%;"
           title="Tethys"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Tethys
             </span>
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="6"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_5"
           role="option"
           style="position: absolute; left: 0px; top: 160px; height: 32px; width: 100%;"
           title="Hyperion"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Hyperion
             </span>
@@ -1102,11 +1132,10 @@ exports[`EuiSelectableListItem props height is forced 1`] = `
         tabindex="0"
       >
         <li
-          aria-checked="false"
           aria-posinset="1"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
           data-test-subj="titanOption"
           id="option_0"
           role="option"
@@ -1114,139 +1143,145 @@ exports[`EuiSelectableListItem props height is forced 1`] = `
           title="Titan"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Titan
             </span>
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="2"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_1"
           role="option"
           style="position: absolute; left: 0px; top: 32px; height: 32px; width: 100%;"
           title="Enceladus"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Enceladus
             </span>
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="3"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_2"
           role="option"
           style="position: absolute; left: 0px; top: 64px; height: 32px; width: 100%;"
           title="Mimas"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Mimas
             </span>
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="4"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_3"
           role="option"
           style="position: absolute; left: 0px; top: 96px; height: 32px; width: 100%;"
           title="Pandora is one of Saturn's moons, named for a Titaness of Greek mythology"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Pandora is one of Saturn's moons, named for a Titaness of Greek mythology
             </span>
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="5"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_4"
           role="option"
           style="position: absolute; left: 0px; top: 128px; height: 32px; width: 100%;"
           title="Tethys"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Tethys
             </span>
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="6"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_5"
           role="option"
           style="position: absolute; left: 0px; top: 160px; height: 32px; width: 100%;"
           title="Hyperion"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Hyperion
             </span>
@@ -1280,11 +1315,10 @@ exports[`EuiSelectableListItem props height is full 1`] = `
         tabindex="0"
       >
         <li
-          aria-checked="false"
           aria-posinset="1"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
           data-test-subj="titanOption"
           id="option_0"
           role="option"
@@ -1292,139 +1326,145 @@ exports[`EuiSelectableListItem props height is full 1`] = `
           title="Titan"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Titan
             </span>
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="2"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_1"
           role="option"
           style="position: absolute; left: 0px; top: 32px; height: 32px; width: 100%;"
           title="Enceladus"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Enceladus
             </span>
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="3"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_2"
           role="option"
           style="position: absolute; left: 0px; top: 64px; height: 32px; width: 100%;"
           title="Mimas"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Mimas
             </span>
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="4"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_3"
           role="option"
           style="position: absolute; left: 0px; top: 96px; height: 32px; width: 100%;"
           title="Pandora is one of Saturn's moons, named for a Titaness of Greek mythology"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Pandora is one of Saturn's moons, named for a Titaness of Greek mythology
             </span>
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="5"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_4"
           role="option"
           style="position: absolute; left: 0px; top: 128px; height: 32px; width: 100%;"
           title="Tethys"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Tethys
             </span>
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="6"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_5"
           role="option"
           style="position: absolute; left: 0px; top: 160px; height: 32px; width: 100%;"
           title="Hyperion"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Hyperion
             </span>
@@ -1453,145 +1493,150 @@ exports[`EuiSelectableListItem props isVirtualized={false} renders 1`] = `
       tabindex="0"
     >
       <li
-        aria-checked="false"
         aria-posinset="1"
         aria-selected="false"
         aria-setsize="6"
-        class="euiSelectableListItem emotion-euiSelectableListItem"
+        class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
         data-test-subj="titanOption"
         id="option_0"
         role="option"
         title="Titan"
       >
         <span
-          class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+          class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
         >
           <span
-            class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+            class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+            color="text"
             data-euiicon-type="empty"
           />
           <span
-            class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+            class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
           >
             Titan
           </span>
         </span>
       </li>
       <li
-        aria-checked="false"
         aria-posinset="2"
         aria-selected="false"
         aria-setsize="6"
-        class="euiSelectableListItem emotion-euiSelectableListItem"
+        class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+        data-test-subj="euiListItemLayout"
         id="option_1"
         role="option"
         title="Enceladus"
       >
         <span
-          class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+          class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
         >
           <span
-            class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+            class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+            color="text"
             data-euiicon-type="empty"
           />
           <span
-            class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+            class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
           >
             Enceladus
           </span>
         </span>
       </li>
       <li
-        aria-checked="false"
         aria-posinset="3"
         aria-selected="false"
         aria-setsize="6"
-        class="euiSelectableListItem emotion-euiSelectableListItem"
+        class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+        data-test-subj="euiListItemLayout"
         id="option_2"
         role="option"
         title="Mimas"
       >
         <span
-          class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+          class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
         >
           <span
-            class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+            class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+            color="text"
             data-euiicon-type="empty"
           />
           <span
-            class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+            class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
           >
             Mimas
           </span>
         </span>
       </li>
       <li
-        aria-checked="false"
         aria-posinset="4"
         aria-selected="false"
         aria-setsize="6"
-        class="euiSelectableListItem emotion-euiSelectableListItem"
+        class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+        data-test-subj="euiListItemLayout"
         id="option_3"
         role="option"
         title="Pandora is one of Saturn's moons, named for a Titaness of Greek mythology"
       >
         <span
-          class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+          class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
         >
           <span
-            class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+            class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+            color="text"
             data-euiicon-type="empty"
           />
           <span
-            class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+            class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
           >
             Pandora is one of Saturn's moons, named for a Titaness of Greek mythology
           </span>
         </span>
       </li>
       <li
-        aria-checked="false"
         aria-posinset="5"
         aria-selected="false"
         aria-setsize="6"
-        class="euiSelectableListItem emotion-euiSelectableListItem"
+        class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+        data-test-subj="euiListItemLayout"
         id="option_4"
         role="option"
         title="Tethys"
       >
         <span
-          class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+          class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
         >
           <span
-            class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+            class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+            color="text"
             data-euiicon-type="empty"
           />
           <span
-            class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+            class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
           >
             Tethys
           </span>
         </span>
       </li>
       <li
-        aria-checked="false"
         aria-posinset="6"
         aria-selected="false"
         aria-setsize="6"
-        class="euiSelectableListItem emotion-euiSelectableListItem"
+        class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+        data-test-subj="euiListItemLayout"
         id="option_5"
         role="option"
         title="Hyperion"
       >
         <span
-          class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+          class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
         >
           <span
-            class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+            class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+            color="text"
             data-euiicon-type="empty"
           />
           <span
-            class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+            class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
           >
             Hyperion
           </span>
@@ -1624,11 +1669,10 @@ exports[`EuiSelectableListItem props renderOption 1`] = `
         tabindex="0"
       >
         <li
-          aria-checked="false"
           aria-posinset="1"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
           data-test-subj="titanOption"
           id="option_0"
           role="option"
@@ -1636,14 +1680,15 @@ exports[`EuiSelectableListItem props renderOption 1`] = `
           title="Titan"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               <span>
                  =&gt; 
@@ -1653,25 +1698,26 @@ exports[`EuiSelectableListItem props renderOption 1`] = `
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="2"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_1"
           role="option"
           style="position: absolute; left: 0px; top: 32px; height: 32px; width: 100%;"
           title="Enceladus"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               <span>
                  =&gt; 
@@ -1681,25 +1727,26 @@ exports[`EuiSelectableListItem props renderOption 1`] = `
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="3"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_2"
           role="option"
           style="position: absolute; left: 0px; top: 64px; height: 32px; width: 100%;"
           title="Mimas"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               <span>
                  =&gt; 
@@ -1709,25 +1756,26 @@ exports[`EuiSelectableListItem props renderOption 1`] = `
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="4"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_3"
           role="option"
           style="position: absolute; left: 0px; top: 96px; height: 32px; width: 100%;"
           title="Pandora is one of Saturn's moons, named for a Titaness of Greek mythology"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               <span>
                  =&gt; 
@@ -1737,25 +1785,26 @@ exports[`EuiSelectableListItem props renderOption 1`] = `
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="5"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_4"
           role="option"
           style="position: absolute; left: 0px; top: 128px; height: 32px; width: 100%;"
           title="Tethys"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               <span>
                  =&gt; 
@@ -1765,25 +1814,26 @@ exports[`EuiSelectableListItem props renderOption 1`] = `
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="6"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_5"
           role="option"
           style="position: absolute; left: 0px; top: 160px; height: 32px; width: 100%;"
           title="Hyperion"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               <span>
                  =&gt; 
@@ -1820,11 +1870,10 @@ exports[`EuiSelectableListItem props rowHeight 1`] = `
         tabindex="0"
       >
         <li
-          aria-checked="false"
           aria-posinset="1"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
           data-test-subj="titanOption"
           id="option_0"
           role="option"
@@ -1832,139 +1881,145 @@ exports[`EuiSelectableListItem props rowHeight 1`] = `
           title="Titan"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Titan
             </span>
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="2"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_1"
           role="option"
           style="position: absolute; left: 0px; top: 20px; height: 20px; width: 100%;"
           title="Enceladus"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Enceladus
             </span>
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="3"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_2"
           role="option"
           style="position: absolute; left: 0px; top: 40px; height: 20px; width: 100%;"
           title="Mimas"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Mimas
             </span>
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="4"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_3"
           role="option"
           style="position: absolute; left: 0px; top: 60px; height: 20px; width: 100%;"
           title="Pandora is one of Saturn's moons, named for a Titaness of Greek mythology"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Pandora is one of Saturn's moons, named for a Titaness of Greek mythology
             </span>
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="5"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_4"
           role="option"
           style="position: absolute; left: 0px; top: 80px; height: 20px; width: 100%;"
           title="Tethys"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Tethys
             </span>
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="6"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_5"
           role="option"
           style="position: absolute; left: 0px; top: 100px; height: 20px; width: 100%;"
           title="Hyperion"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Hyperion
             </span>
@@ -1996,11 +2051,10 @@ exports[`EuiSelectableListItem props searchable enables correct screen reader in
         style="height: 192px; width: 100%;"
       >
         <li
-          aria-checked="false"
           aria-posinset="1"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
           data-test-subj="titanOption"
           id="option_0"
           role="option"
@@ -2008,14 +2062,15 @@ exports[`EuiSelectableListItem props searchable enables correct screen reader in
           title="Titan"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Titan
               <div
@@ -2028,25 +2083,26 @@ exports[`EuiSelectableListItem props searchable enables correct screen reader in
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="2"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_1"
           role="option"
           style="position: absolute; left: 0px; top: 32px; height: 32px; width: 100%;"
           title="Enceladus"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Enceladus
               <div
@@ -2059,25 +2115,26 @@ exports[`EuiSelectableListItem props searchable enables correct screen reader in
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="3"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_2"
           role="option"
           style="position: absolute; left: 0px; top: 64px; height: 32px; width: 100%;"
           title="Mimas"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Mimas
               <div
@@ -2090,25 +2147,26 @@ exports[`EuiSelectableListItem props searchable enables correct screen reader in
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="4"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_3"
           role="option"
           style="position: absolute; left: 0px; top: 96px; height: 32px; width: 100%;"
           title="Pandora is one of Saturn's moons, named for a Titaness of Greek mythology"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Pandora is one of Saturn's moons, named for a Titaness of Greek mythology
               <div
@@ -2121,25 +2179,26 @@ exports[`EuiSelectableListItem props searchable enables correct screen reader in
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="5"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_4"
           role="option"
           style="position: absolute; left: 0px; top: 128px; height: 32px; width: 100%;"
           title="Tethys"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Tethys
               <div
@@ -2152,25 +2211,26 @@ exports[`EuiSelectableListItem props searchable enables correct screen reader in
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="6"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_5"
           role="option"
           style="position: absolute; left: 0px; top: 160px; height: 32px; width: 100%;"
           title="Hyperion"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Hyperion
               <div
@@ -2210,11 +2270,10 @@ exports[`EuiSelectableListItem props showIcons can be turned off 1`] = `
         tabindex="0"
       >
         <li
-          aria-checked="false"
           aria-posinset="1"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
           data-test-subj="titanOption"
           id="option_0"
           role="option"
@@ -2222,115 +2281,115 @@ exports[`EuiSelectableListItem props showIcons can be turned off 1`] = `
           title="Titan"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Titan
             </span>
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="2"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_1"
           role="option"
           style="position: absolute; left: 0px; top: 32px; height: 32px; width: 100%;"
           title="Enceladus"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Enceladus
             </span>
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="3"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_2"
           role="option"
           style="position: absolute; left: 0px; top: 64px; height: 32px; width: 100%;"
           title="Mimas"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Mimas
             </span>
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="4"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_3"
           role="option"
           style="position: absolute; left: 0px; top: 96px; height: 32px; width: 100%;"
           title="Pandora is one of Saturn's moons, named for a Titaness of Greek mythology"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Pandora is one of Saturn's moons, named for a Titaness of Greek mythology
             </span>
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="5"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_4"
           role="option"
           style="position: absolute; left: 0px; top: 128px; height: 32px; width: 100%;"
           title="Tethys"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Tethys
             </span>
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="6"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_5"
           role="option"
           style="position: absolute; left: 0px; top: 160px; height: 32px; width: 100%;"
           title="Hyperion"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Hyperion
             </span>
@@ -2363,11 +2422,10 @@ exports[`EuiSelectableListItem props singleSelection can be forced so that at le
         tabindex="0"
       >
         <li
-          aria-checked="false"
           aria-posinset="1"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
           data-test-subj="titanOption"
           id="option_0"
           role="option"
@@ -2375,139 +2433,145 @@ exports[`EuiSelectableListItem props singleSelection can be forced so that at le
           title="Titan"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Titan
             </span>
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="2"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_1"
           role="option"
           style="position: absolute; left: 0px; top: 32px; height: 32px; width: 100%;"
           title="Enceladus"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Enceladus
             </span>
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="3"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_2"
           role="option"
           style="position: absolute; left: 0px; top: 64px; height: 32px; width: 100%;"
           title="Mimas"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Mimas
             </span>
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="4"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_3"
           role="option"
           style="position: absolute; left: 0px; top: 96px; height: 32px; width: 100%;"
           title="Pandora is one of Saturn's moons, named for a Titaness of Greek mythology"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Pandora is one of Saturn's moons, named for a Titaness of Greek mythology
             </span>
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="5"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_4"
           role="option"
           style="position: absolute; left: 0px; top: 128px; height: 32px; width: 100%;"
           title="Tethys"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Tethys
             </span>
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="6"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_5"
           role="option"
           style="position: absolute; left: 0px; top: 160px; height: 32px; width: 100%;"
           title="Hyperion"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Hyperion
             </span>
@@ -2540,11 +2604,10 @@ exports[`EuiSelectableListItem props singleSelection can be turned on 1`] = `
         tabindex="0"
       >
         <li
-          aria-checked="false"
           aria-posinset="1"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
           data-test-subj="titanOption"
           id="option_0"
           role="option"
@@ -2552,139 +2615,145 @@ exports[`EuiSelectableListItem props singleSelection can be turned on 1`] = `
           title="Titan"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Titan
             </span>
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="2"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_1"
           role="option"
           style="position: absolute; left: 0px; top: 32px; height: 32px; width: 100%;"
           title="Enceladus"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Enceladus
             </span>
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="3"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_2"
           role="option"
           style="position: absolute; left: 0px; top: 64px; height: 32px; width: 100%;"
           title="Mimas"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Mimas
             </span>
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="4"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_3"
           role="option"
           style="position: absolute; left: 0px; top: 96px; height: 32px; width: 100%;"
           title="Pandora is one of Saturn's moons, named for a Titaness of Greek mythology"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Pandora is one of Saturn's moons, named for a Titaness of Greek mythology
             </span>
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="5"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_4"
           role="option"
           style="position: absolute; left: 0px; top: 128px; height: 32px; width: 100%;"
           title="Tethys"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Tethys
             </span>
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="6"
           aria-selected="false"
           aria-setsize="6"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_5"
           role="option"
           style="position: absolute; left: 0px; top: 160px; height: 32px; width: 100%;"
           title="Hyperion"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Hyperion
             </span>
@@ -2718,100 +2787,104 @@ exports[`EuiSelectableListItem props visibleOptions 1`] = `
         tabindex="0"
       >
         <li
-          aria-checked="false"
           aria-posinset="1"
           aria-selected="false"
           aria-setsize="4"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_0"
           role="option"
           style="position: absolute; left: 0px; top: 0px; height: 32px; width: 100%;"
           title="Mimas"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Mimas
             </span>
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="2"
           aria-selected="false"
           aria-setsize="4"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_1"
           role="option"
           style="position: absolute; left: 0px; top: 32px; height: 32px; width: 100%;"
           title="Pandora is one of Saturn's moons, named for a Titaness of Greek mythology"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Pandora is one of Saturn's moons, named for a Titaness of Greek mythology
             </span>
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="3"
           aria-selected="false"
           aria-setsize="4"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_2"
           role="option"
           style="position: absolute; left: 0px; top: 64px; height: 32px; width: 100%;"
           title="Tethys"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Tethys
             </span>
           </span>
         </li>
         <li
-          aria-checked="false"
           aria-posinset="4"
           aria-selected="false"
           aria-setsize="4"
-          class="euiSelectableListItem emotion-euiSelectableListItem"
+          class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+          data-test-subj="euiListItemLayout"
           id="option_3"
           role="option"
           style="position: absolute; left: 0px; top: 96px; height: 32px; width: 100%;"
           title="Hyperion"
         >
           <span
-            class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+            class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+              class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+              color="text"
               data-euiicon-type="empty"
             />
             <span
-              class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+              class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
             >
               Hyperion
             </span>
diff --git a/packages/eui/src/components/selectable/selectable_list/__snapshots__/selectable_list_item.test.tsx.snap b/packages/eui/src/components/selectable/selectable_list/__snapshots__/selectable_list_item.test.tsx.snap
index 9cf7f496a7a..cbb95e2c427 100644
--- a/packages/eui/src/components/selectable/selectable_list/__snapshots__/selectable_list_item.test.tsx.snap
+++ b/packages/eui/src/components/selectable/selectable_list/__snapshots__/selectable_list_item.test.tsx.snap
@@ -2,21 +2,22 @@
 
 exports[`EuiSelectableListItem is rendered 1`] = `
 <li
-  aria-checked="false"
   aria-label="aria-label"
-  class="euiSelectableListItem testClass1 testClass2 emotion-euiSelectableListItem-euiTestCss"
+  aria-selected="false"
+  class="euiListItemLayout euiSelectableListItem testClass1 testClass2 emotion-euiListItemLayout-isInteractive-euiTestCss"
   data-test-subj="test subject string"
   role="option"
 >
   <span
-    class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+    class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
   >
     <span
-      class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+      class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+      color="text"
       data-euiicon-type="empty"
     />
     <span
-      class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+      class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
     />
   </span>
 </li>
@@ -24,25 +25,26 @@ exports[`EuiSelectableListItem is rendered 1`] = `
 
 exports[`EuiSelectableListItem props append 1`] = `
 <li
-  aria-checked="false"
-  class="euiSelectableListItem emotion-euiSelectableListItem"
+  aria-selected="false"
+  class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+  data-test-subj="euiListItemLayout"
   role="option"
 >
   <span
-    class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+    class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
   >
     <span
-      class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+      class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+      color="text"
       data-euiicon-type="empty"
     />
     <span
-      class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+      class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
     />
     <span
-      class="euiSelectableListItem__append emotion-euiSelectableListItem__append"
+      class="euiListItemLayout__append euiSelectableListItem__append emotion-euiListItemLayout__append"
     >
       <span />
-       
     </span>
   </span>
 </li>
@@ -51,19 +53,20 @@ exports[`EuiSelectableListItem props append 1`] = `
 exports[`EuiSelectableListItem props checked & allowExclusions mixed 1`] = `
 <li
   aria-checked="mixed"
-  class="euiSelectableListItem emotion-euiSelectableListItem-singleSelection"
+  class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive-isSelected"
+  data-test-subj="euiListItemLayout"
   role="option"
 >
   <span
-    class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+    class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
   >
     <span
-      class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+      class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
       color="primary"
       data-euiicon-type="minus"
     />
     <span
-      class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+      class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
     >
       <div
         class="emotion-euiScreenReaderOnly"
@@ -83,19 +86,20 @@ exports[`EuiSelectableListItem props checked & allowExclusions mixed 1`] = `
 exports[`EuiSelectableListItem props checked & allowExclusions off 1`] = `
 <li
   aria-checked="true"
-  class="euiSelectableListItem emotion-euiSelectableListItem-singleSelection"
+  class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive-isSelected"
+  data-test-subj="euiListItemLayout"
   role="option"
 >
   <span
-    class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+    class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
   >
     <span
-      class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+      class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
       color="primary"
       data-euiicon-type="cross"
     />
     <span
-      class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+      class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
     >
       <div
         class="emotion-euiScreenReaderOnly"
@@ -113,19 +117,20 @@ exports[`EuiSelectableListItem props checked & allowExclusions off 1`] = `
 exports[`EuiSelectableListItem props checked & allowExclusions on 1`] = `
 <li
   aria-checked="true"
-  class="euiSelectableListItem emotion-euiSelectableListItem-singleSelection"
+  class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive-isSelected"
+  data-test-subj="euiListItemLayout"
   role="option"
 >
   <span
-    class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+    class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
   >
     <span
-      class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+      class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
       color="primary"
       data-euiicon-type="check"
     />
     <span
-      class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+      class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
     >
       <div
         class="emotion-euiScreenReaderOnly"
@@ -143,18 +148,20 @@ exports[`EuiSelectableListItem props checked & allowExclusions on 1`] = `
 exports[`EuiSelectableListItem props checked & allowExclusions undefined 1`] = `
 <li
   aria-checked="false"
-  class="euiSelectableListItem emotion-euiSelectableListItem"
+  class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+  data-test-subj="euiListItemLayout"
   role="option"
 >
   <span
-    class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+    class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
   >
     <span
-      class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+      class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+      color="text"
       data-euiicon-type="empty"
     />
     <span
-      class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+      class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
     >
       <div
         class="emotion-euiScreenReaderOnly"
@@ -169,20 +176,21 @@ exports[`EuiSelectableListItem props checked & allowExclusions undefined 1`] = `
 
 exports[`EuiSelectableListItem props checked & searchable on 1`] = `
 <li
-  aria-checked="true"
-  class="euiSelectableListItem emotion-euiSelectableListItem-singleSelection"
+  aria-selected="true"
+  class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive-isSelected"
+  data-test-subj="euiListItemLayout"
   role="option"
 >
   <span
-    class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+    class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
   >
     <span
-      class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+      class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
       color="primary"
       data-euiicon-type="check"
     />
     <span
-      class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+      class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
     >
       <div
         class="emotion-euiScreenReaderOnly"
@@ -199,19 +207,21 @@ exports[`EuiSelectableListItem props checked & searchable on 1`] = `
 
 exports[`EuiSelectableListItem props checked & searchable undefined 1`] = `
 <li
-  aria-checked="false"
-  class="euiSelectableListItem emotion-euiSelectableListItem"
+  aria-selected="false"
+  class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+  data-test-subj="euiListItemLayout"
   role="option"
 >
   <span
-    class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+    class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
   >
     <span
-      class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+      class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+      color="text"
       data-euiicon-type="empty"
     />
     <span
-      class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+      class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
     >
       <div
         class="emotion-euiScreenReaderOnly"
@@ -227,19 +237,20 @@ exports[`EuiSelectableListItem props checked & searchable undefined 1`] = `
 exports[`EuiSelectableListItem props checked mixed 1`] = `
 <li
   aria-checked="mixed"
-  class="euiSelectableListItem emotion-euiSelectableListItem-singleSelection"
+  class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive-isSelected"
+  data-test-subj="euiListItemLayout"
   role="option"
 >
   <span
-    class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+    class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
   >
     <span
-      class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+      class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
       color="primary"
       data-euiicon-type="minus"
     />
     <span
-      class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+      class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
     >
       <div
         class="emotion-euiScreenReaderOnly"
@@ -258,20 +269,21 @@ exports[`EuiSelectableListItem props checked mixed 1`] = `
 
 exports[`EuiSelectableListItem props checked on 1`] = `
 <li
-  aria-checked="true"
-  class="euiSelectableListItem emotion-euiSelectableListItem-singleSelection"
+  aria-selected="true"
+  class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive-isSelected"
+  data-test-subj="euiListItemLayout"
   role="option"
 >
   <span
-    class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+    class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
   >
     <span
-      class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+      class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
       color="primary"
       data-euiicon-type="check"
     />
     <span
-      class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+      class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
     >
       <div
         class="emotion-euiScreenReaderOnly"
@@ -286,19 +298,21 @@ exports[`EuiSelectableListItem props checked on 1`] = `
 
 exports[`EuiSelectableListItem props checked undefined 1`] = `
 <li
-  aria-checked="false"
-  class="euiSelectableListItem emotion-euiSelectableListItem"
+  aria-selected="false"
+  class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+  data-test-subj="euiListItemLayout"
   role="option"
 >
   <span
-    class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+    class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
   >
     <span
-      class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+      class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+      color="text"
       data-euiicon-type="empty"
     />
     <span
-      class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+      class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
     />
   </span>
 </li>
@@ -306,21 +320,22 @@ exports[`EuiSelectableListItem props checked undefined 1`] = `
 
 exports[`EuiSelectableListItem props disabled 1`] = `
 <li
-  aria-checked="false"
   aria-disabled="true"
   aria-selected="false"
-  class="euiSelectableListItem emotion-euiSelectableListItem"
+  class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isDisabled"
+  data-test-subj="euiListItemLayout"
   role="option"
 >
   <span
-    class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+    class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
   >
     <span
-      class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+      class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+      color="subdued"
       data-euiicon-type="empty"
     />
     <span
-      class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+      class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
     />
   </span>
 </li>
@@ -328,20 +343,21 @@ exports[`EuiSelectableListItem props disabled 1`] = `
 
 exports[`EuiSelectableListItem props isFocused 1`] = `
 <li
-  aria-checked="false"
-  aria-selected="true"
-  class="euiSelectableListItem euiSelectableListItem-isFocused emotion-euiSelectableListItem"
+  aria-selected="false"
+  class="euiListItemLayout euiSelectableListItem euiSelectableListItem-isFocused emotion-euiListItemLayout-isInteractive-isFocused"
+  data-test-subj="euiListItemLayout"
   role="option"
 >
   <span
-    class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+    class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
   >
     <span
-      class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+      class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+      color="text"
       data-euiicon-type="empty"
     />
     <span
-      class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+      class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
     />
   </span>
 </li>
@@ -349,19 +365,21 @@ exports[`EuiSelectableListItem props isFocused 1`] = `
 
 exports[`EuiSelectableListItem props onFocusBadge can be custom 1`] = `
 <li
-  aria-checked="false"
-  class="euiSelectableListItem emotion-euiSelectableListItem"
+  aria-selected="false"
+  class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+  data-test-subj="euiListItemLayout"
   role="option"
 >
   <span
-    class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+    class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
   >
     <span
-      class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+      class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+      color="text"
       data-euiicon-type="empty"
     />
     <span
-      class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+      class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
     />
   </span>
 </li>
@@ -369,19 +387,21 @@ exports[`EuiSelectableListItem props onFocusBadge can be custom 1`] = `
 
 exports[`EuiSelectableListItem props onFocusBadge can be true 1`] = `
 <li
-  aria-checked="false"
-  class="euiSelectableListItem emotion-euiSelectableListItem"
+  aria-selected="false"
+  class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+  data-test-subj="euiListItemLayout"
   role="option"
 >
   <span
-    class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+    class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
   >
     <span
-      class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+      class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+      color="text"
       data-euiicon-type="empty"
     />
     <span
-      class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+      class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
     />
   </span>
 </li>
@@ -389,24 +409,26 @@ exports[`EuiSelectableListItem props onFocusBadge can be true 1`] = `
 
 exports[`EuiSelectableListItem props prepend 1`] = `
 <li
-  aria-checked="false"
-  class="euiSelectableListItem emotion-euiSelectableListItem"
+  aria-selected="false"
+  class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+  data-test-subj="euiListItemLayout"
   role="option"
 >
   <span
-    class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+    class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
   >
     <span
-      class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+      class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+      color="text"
       data-euiicon-type="empty"
     />
     <span
-      class="euiSelectableListItem__prepend emotion-euiSelectableListItem__prepend"
+      class="euiListItemLayout__prepend euiSelectableListItem__prepend emotion-euiListItemLayout__prepend"
     >
       <span />
     </span>
     <span
-      class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+      class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
     />
   </span>
 </li>
@@ -414,15 +436,16 @@ exports[`EuiSelectableListItem props prepend 1`] = `
 
 exports[`EuiSelectableListItem props showIcons can be turned off 1`] = `
 <li
-  aria-checked="false"
-  class="euiSelectableListItem emotion-euiSelectableListItem"
+  aria-selected="false"
+  class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+  data-test-subj="euiListItemLayout"
   role="option"
 >
   <span
-    class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+    class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
   >
     <span
-      class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+      class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
     />
   </span>
 </li>
@@ -430,19 +453,21 @@ exports[`EuiSelectableListItem props showIcons can be turned off 1`] = `
 
 exports[`EuiSelectableListItem props textWrap can be "wrap" 1`] = `
 <li
-  aria-checked="false"
-  class="euiSelectableListItem emotion-euiSelectableListItem"
+  aria-selected="false"
+  class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+  data-test-subj="euiListItemLayout"
   role="option"
 >
   <span
-    class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+    class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
   >
     <span
-      class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+      class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+      color="text"
       data-euiicon-type="empty"
     />
     <span
-      class="euiSelectableListItem__text emotion-euiSelectableListItem__text-wrap"
+      class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-wrap"
     />
   </span>
 </li>
@@ -454,9 +479,10 @@ exports[`EuiSelectableListItem props tooltip behavior on mouseover 1`] = `
 >
   <div>
     <li
-      aria-checked="false"
       aria-describedby="generated-id"
-      class="euiSelectableListItem emotion-euiSelectableListItem"
+      aria-selected="false"
+      class="euiListItemLayout euiSelectableListItem emotion-euiListItemLayout-isInteractive"
+      data-test-subj="euiListItemLayout"
       role="option"
     >
       <span
@@ -465,14 +491,15 @@ exports[`EuiSelectableListItem props tooltip behavior on mouseover 1`] = `
       >
         <span
           aria-describedby="generated-id"
-          class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+          class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
         >
           <span
-            class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+            class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+            color="text"
             data-euiicon-type="empty"
           />
           <span
-            class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+            class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
           >
             Item content
           </span>
@@ -515,10 +542,10 @@ exports[`EuiSelectableListItem props tooltip behavior when isFocused 1`] = `
 >
   <div>
     <li
-      aria-checked="false"
       aria-describedby="generated-id"
-      aria-selected="true"
-      class="euiSelectableListItem euiSelectableListItem-isFocused emotion-euiSelectableListItem"
+      aria-selected="false"
+      class="euiListItemLayout euiSelectableListItem euiSelectableListItem-isFocused emotion-euiListItemLayout-isInteractive-isFocused"
+      data-test-subj="euiListItemLayout"
       role="option"
     >
       <span
@@ -527,14 +554,15 @@ exports[`EuiSelectableListItem props tooltip behavior when isFocused 1`] = `
       >
         <span
           aria-describedby="generated-id"
-          class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
+          class="euiListItemLayout__content euiSelectableListItem__content emotion-euiListItemLayout__content"
         >
           <span
-            class="euiSelectableListItem__icon emotion-euiSelectableListItem__icon"
+            class="euiListItemLayout__icon emotion-euiListItemLayout__icon"
+            color="text"
             data-euiicon-type="empty"
           />
           <span
-            class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
+            class="euiListItemLayout__text euiSelectableListItem__text emotion-euiListItemLayout__text-truncate"
           >
             Item content
           </span>
diff --git a/packages/eui/src/components/selectable/selectable_list/selectable_list.stories.tsx b/packages/eui/src/components/selectable/selectable_list/selectable_list.stories.tsx
index 08130f7c7c2..6e44a434afa 100644
--- a/packages/eui/src/components/selectable/selectable_list/selectable_list.stories.tsx
+++ b/packages/eui/src/components/selectable/selectable_list/selectable_list.stories.tsx
@@ -20,7 +20,6 @@ import { EuiFlexGroup, EuiFlexItem } from '../../flex';
 import { EuiIcon } from '../../icon';
 import { EuiText } from '../../text';
 import { EuiBadge } from '../../badge';
-import { EuiButtonIcon } from '../../button';
 import { EuiSelectableOption } from '../selectable_option';
 
 import { EuiSelectableList, EuiSelectableListProps } from './selectable_list';
@@ -69,6 +68,9 @@ const meta: Meta<EuiSelectableListProps<{}>> = {
     height: { control: 'number' },
     isPreFiltered: { control: 'boolean' },
     singleSelection: { control: 'boolean' },
+    allowExclusions: {
+      if: { arg: 'singleSelection', truthy: false }, // show for multi selection only
+    },
   },
   args: {
     textWrap: 'truncate',
@@ -190,12 +192,7 @@ type OptionAsRendered = Omit<EuiSelectableOption<MoonOptionData>, 'data'> &
 
 const sharedOptionProps = {
   prepend: <EuiIcon type="info" />,
-  append: (
-    <>
-      <EuiBadge color="hollow">Badge</EuiBadge>
-      <EuiButtonIcon color="text" iconType="arrowRight" />
-    </>
-  ),
+  append: <EuiBadge color="hollow">Badge</EuiBadge>,
 };
 
 const optionsWithCustomData: Array<EuiSelectableOption<MoonOptionData>> = [
@@ -267,7 +264,7 @@ const customListItemRenderOption = (
 export const CustomContentListItems: Story = {
   parameters: {
     controls: {
-      include: ['allowExclusions', 'showIcons'],
+      include: ['showIcons'],
     },
     codeSnippet: {
       skip: true,
diff --git a/packages/eui/src/components/selectable/selectable_list/selectable_list.styles.ts b/packages/eui/src/components/selectable/selectable_list/selectable_list.styles.ts
index ea841ec302a..15416927dd3 100644
--- a/packages/eui/src/components/selectable/selectable_list/selectable_list.styles.ts
+++ b/packages/eui/src/components/selectable/selectable_list/selectable_list.styles.ts
@@ -19,14 +19,10 @@ import {
   logicalCSS,
 } from '../../../global_styling';
 import { euiTitle } from '../../title/title.styles';
-import { euiSelectableListItemVariables } from './selectable_list_item.styles';
+import { euiListItemVariables } from '../../list_item_layout/_list_item_layout.styles';
 
 export const euiSelectableListStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
-  const itemVars = euiSelectableListItemVariables(euiThemeContext);
-
-  const spacingVertical = euiTheme.size.s;
-  const borderColor = euiTheme.components.selectableListItemBorderColor;
 
   return {
     euiSelectableList: css`
@@ -53,14 +49,26 @@ export const euiSelectableListStyles = (euiThemeContext: UseEuiTheme) => {
         outline: none; /* Focus outline handled by parent .euiSelectableList */
       }
     `,
+  };
+};
 
-    euiSelectableList__groupLabel: css`
+export const euiSelectableListGroupLabelStyles = (
+  euiThemeContext: UseEuiTheme
+) => {
+  const { euiTheme } = euiThemeContext;
+
+  const itemVars = euiListItemVariables(euiThemeContext);
+  const spacingVertical = euiTheme.size.s;
+  const borderColor = euiTheme.components.selectableListItemBorderColor;
+
+  return {
+    groupLabel: css`
       ${euiTitle(euiThemeContext, 'xxxs')}
       position: relative;
       display: flex;
       align-items: center;
-      gap: ${itemVars.spacingHorizontal};
-      ${logicalCSS('padding-horizontal', itemVars.spacingHorizontal)}
+      gap: ${itemVars.spacing.horizontal};
+      ${logicalCSS('padding-horizontal', itemVars.textPadding.horizontal)}
       ${logicalCSS('padding-vertical', spacingVertical)}
 
       &:not(:first-child) {
diff --git a/packages/eui/src/components/selectable/selectable_list/selectable_list.test.tsx b/packages/eui/src/components/selectable/selectable_list/selectable_list.test.tsx
index b61ba46ea45..c27caea2a1e 100644
--- a/packages/eui/src/components/selectable/selectable_list/selectable_list.test.tsx
+++ b/packages/eui/src/components/selectable/selectable_list/selectable_list.test.tsx
@@ -377,7 +377,7 @@ describe('EuiSelectableListItem', () => {
 
         expect(
           container.querySelectorAll(
-            '[class*="euiSelectableListItem__text-truncate"]'
+            '[class*="euiListItemLayout__text-truncate"]'
           )
         ).toHaveLength(1);
       });
@@ -392,7 +392,7 @@ describe('EuiSelectableListItem', () => {
         );
 
         expect(
-          container.querySelector('.euiSelectableListItem__text')!.className
+          container.querySelector('.euiListItemLayout__text')!.className
         ).toContain('truncate');
       });
     });
diff --git a/packages/eui/src/components/selectable/selectable_list/selectable_list.tsx b/packages/eui/src/components/selectable/selectable_list/selectable_list.tsx
index 1812e3a1ebd..605ce0d910e 100644
--- a/packages/eui/src/components/selectable/selectable_list/selectable_list.tsx
+++ b/packages/eui/src/components/selectable/selectable_list/selectable_list.tsx
@@ -41,7 +41,11 @@ import {
   EuiSelectableListItem,
   EuiSelectableListItemProps,
 } from './selectable_list_item';
-import { euiSelectableListStyles } from './selectable_list.styles';
+import {
+  euiSelectableListGroupLabelStyles,
+  euiSelectableListStyles,
+} from './selectable_list.styles';
+import { getListItemSize } from './utils/get_list_item_size';
 
 interface ListChildComponentProps<T>
   extends Omit<ReactWindowListChildComponentProps, 'style'> {
@@ -77,7 +81,7 @@ export type EuiSelectableOptionsListProps = CommonProps &
      */
     activeOptionIndex?: number;
     /**
-     * Show the check/cross selection indicator icons
+     * Show the check/cross selection indicators
      */
     showIcons?: boolean;
     singleSelection?: 'always' | boolean;
@@ -319,6 +323,8 @@ export class EuiSelectableList<T> extends Component<
 
       if (typeof activeOptionIndex !== 'undefined') {
         if (isVirtualized) {
+          // NOTE: Maybe we might want to consider changing scroll position to
+          // 'center' to not have items stick to the edges of the list
           this.listRef?.scrollToItem(activeOptionIndex, 'auto');
         } else {
           const activeOptionId = makeOptionId(activeOptionIndex);
@@ -380,10 +386,8 @@ export class EuiSelectableList<T> extends Component<
   getItemSize = (index: number): number => {
     const { rowHeight } = this.props as { rowHeight: number };
     const option = this.state.optionArray[index];
-    if (option?.isGroupLabel && index > 0) {
-      return rowHeight + 16; // 16px = the additional 2 * 8px padding of the divider line
-    }
-    return rowHeight;
+
+    return getListItemSize(index, rowHeight, !!option?.isGroupLabel);
   };
 
   ListRow = memo(({ data, index, style }: ListChildComponentProps<T>) => {
@@ -423,11 +427,12 @@ export class EuiSelectableList<T> extends Component<
       return (
         <RenderWithEuiStylesMemoizer>
           {(stylesMemoizer) => {
-            const styles = stylesMemoizer(euiSelectableListStyles);
+            const styles = stylesMemoizer(euiSelectableListGroupLabelStyles);
+
             return (
               <li
                 role="presentation"
-                css={styles.euiSelectableList__groupLabel}
+                css={styles.groupLabel}
                 className="euiSelectableList__groupLabel"
                 style={style}
                 {...(optionRest as HTMLAttributes<HTMLLIElement>)}
diff --git a/packages/eui/src/components/selectable/selectable_list/selectable_list_item.stories.tsx b/packages/eui/src/components/selectable/selectable_list/selectable_list_item.stories.tsx
index dfa20a7478b..589401ef3ee 100644
--- a/packages/eui/src/components/selectable/selectable_list/selectable_list_item.stories.tsx
+++ b/packages/eui/src/components/selectable/selectable_list/selectable_list_item.stories.tsx
@@ -7,6 +7,7 @@
  */
 
 import React from 'react';
+import { css } from '@emotion/react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { EuiIcon } from '../../icon';
@@ -19,6 +20,29 @@ import {
   EuiSelectableListItemProps,
 } from './selectable_list_item';
 
+type EuiSelectableListItemStoryProps = EuiSelectableListItemProps & {
+  checkedSingle: 'on' | undefined;
+};
+
+/* Story HOC to pass the correct `checked` control value to the component, since we're
+conditionally switching between `checked` and `checkedSingle` to advocate expected usage */
+const StoryRender = ({
+  checkedSingle,
+  checked,
+  singleSelection,
+  ...args
+}: EuiSelectableListItemStoryProps & {
+  checkedSingle: any;
+}) => {
+  return (
+    <EuiSelectableListItem
+      {...(args as EuiSelectableListItemProps)}
+      singleSelection={singleSelection}
+      checked={singleSelection !== false ? checkedSingle : checked}
+    />
+  );
+};
+
 const meta: Meta<EuiSelectableListItemProps> = {
   title: 'Forms/EuiSelectable/Subcomponents/EuiSelectableListItem',
   component: EuiSelectableListItem,
@@ -26,6 +50,14 @@ const meta: Meta<EuiSelectableListItemProps> = {
     checked: {
       control: 'radio',
       options: [undefined, ...OPTION_CHECKED_STATES],
+      if: { arg: 'singleSelection', truthy: false }, // show for multi selection only
+    },
+    // @ts-expect-error - custom variant of `checked` control that isn't a standalone prop
+    checkedSingle: {
+      name: 'checked',
+      control: 'radio',
+      options: ['on', undefined],
+      if: { arg: 'singleSelection' }, // show for single selection only
     },
     append: {
       control: 'boolean',
@@ -43,6 +75,9 @@ const meta: Meta<EuiSelectableListItemProps> = {
         false: undefined,
       },
     },
+    allowExclusions: {
+      if: { arg: 'singleSelection', truthy: false }, // show for multi selection only
+    },
   },
   args: {
     showIcons: true,
@@ -57,6 +92,9 @@ const meta: Meta<EuiSelectableListItemProps> = {
     prepend: false,
     singleSelection: true,
   },
+  render: (args) => (
+    <StoryRender {...(args as EuiSelectableListItemStoryProps)} />
+  ),
 };
 
 export default meta;
@@ -78,22 +116,74 @@ export const SingleSelection: Story = {
   args: {
     children: 'Selectable list item',
     showIcons: true,
-    checked: 'on',
+    // @ts-expect-error - custom storybook-only variant of `checked` control
+    checkedSingle: 'on',
     prepend: <EuiIcon type="info" />,
     append: <EuiBadge color="hollow">Badge</EuiBadge>,
   },
-  render: function Render(args: EuiSelectableListItemProps) {
+  render: function Render(args) {
+    const { checkedSingle, checked, ...rest } =
+      args as EuiSelectableListItemStoryProps;
+
     return (
       <EuiFlexGroup direction="column" gutterSize="l">
         <div>
           <EuiCode>singleSelection=true/always</EuiCode>
         </div>
-        <EuiSelectableListItem {...args} singleSelection />
+        <EuiSelectableListItem
+          {...rest}
+          checked={checkedSingle}
+          singleSelection
+        />
         <div>
           <EuiCode>singleSelection=false</EuiCode>
         </div>
-        <EuiSelectableListItem {...args} singleSelection={false} />
+        <EuiSelectableListItem
+          {...rest}
+          checked={checkedSingle}
+          singleSelection={false}
+        />
       </EuiFlexGroup>
     );
   },
 };
+
+export const Truncate: Story = {
+  tags: ['vrt-only'],
+  name: 'textWrap: truncate',
+  args: {
+    children: 'Selectable list item with long label that should be truncated',
+    textWrap: 'truncate',
+  },
+  render: function Render(args: EuiSelectableListItemProps) {
+    return (
+      <div
+        css={css`
+          inline-size: 250px;
+        `}
+      >
+        <EuiSelectableListItem {...args} />
+      </div>
+    );
+  },
+};
+
+export const TextWrap: Story = {
+  tags: ['vrt-only'],
+  name: 'textWrap: wrap',
+  args: {
+    children: 'Selectable list item with long label that should be wrapped',
+    textWrap: 'wrap',
+  },
+  render: function Render(args: EuiSelectableListItemProps) {
+    return (
+      <div
+        css={css`
+          inline-size: 250px;
+        `}
+      >
+        <EuiSelectableListItem {...args} />
+      </div>
+    );
+  },
+};
diff --git a/packages/eui/src/components/selectable/selectable_list/selectable_list_item.styles.ts b/packages/eui/src/components/selectable/selectable_list/selectable_list_item.styles.ts
deleted file mode 100644
index d759d37a8e5..00000000000
--- a/packages/eui/src/components/selectable/selectable_list/selectable_list_item.styles.ts
+++ /dev/null
@@ -1,134 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import { css } from '@emotion/react';
-
-import { UseEuiTheme } from '../../../services';
-import {
-  euiFontSize,
-  euiTextTruncate,
-  highContrastModeStyles,
-  logicalCSS,
-  logicalShorthandCSS,
-  mathWithUnits,
-} from '../../../global_styling';
-
-export const euiSelectableListItemVariables = ({ euiTheme }: UseEuiTheme) => {
-  return {
-    spacingHorizontal: euiTheme.size.s,
-    spacingVertical: euiTheme.size.xs,
-  };
-};
-
-export const euiSelectableListItemStyles = (euiThemeContext: UseEuiTheme) => {
-  const { euiTheme } = euiThemeContext;
-  const { spacingHorizontal, spacingVertical } =
-    euiSelectableListItemVariables(euiThemeContext);
-
-  const textPadding = {
-    horizontal: euiTheme.size.xs,
-    vertical: mathWithUnits(
-      [spacingVertical, euiTheme.size.xxs],
-      (x, y) => x + y
-    ),
-  };
-
-  const sharedFlexStyles = `
-    display: flex;
-    align-items: center;
-    flex-shrink: 0;
-  `;
-
-  return {
-    euiSelectableListItem: css`
-      display: inline-flex; /* Necessary to make sure it doesn't force the whole popover to be too wide */
-      ${logicalCSS('width', '100%')}
-      border-radius: ${euiTheme.border.radius.small};
-      min-block-size: ${euiTheme.size.xl};
-      ${logicalShorthandCSS('padding', `0 ${spacingHorizontal}`)}
-      line-height: ${euiFontSize(euiThemeContext, 's').lineHeight};
-      font-size: ${euiFontSize(euiThemeContext, 's').fontSize};
-      text-align: start;
-      cursor: pointer;
-      overflow: hidden;
-
-      &[aria-disabled='true'] {
-        color: ${euiTheme.colors.textDisabled};
-        cursor: not-allowed;
-      }
-
-      &:not([aria-disabled='true']) {
-        &:hover,
-        &.euiSelectableListItem-isFocused {
-          background-color: ${euiTheme.colors.backgroundBaseInteractiveHover};
-
-          ${highContrastModeStyles(euiThemeContext, {
-            preferred: `
-              text-decoration: underline;
-            `,
-          })}
-        }
-      }
-    `,
-    singleSelection: css`
-      color: ${euiTheme.colors.textPrimary};
-      background-color: ${euiTheme.colors.backgroundBaseInteractiveSelect};
-
-      &:not([aria-disabled='true']) {
-        &:hover,
-        &.euiSelectableListItem-isFocused {
-          background-color: ${euiTheme.colors
-            .backgroundBaseInteractiveSelectHover};
-        }
-
-        .euiSelectableListItem__prepend,
-        .euiSelectableListItem__append {
-          .euiIcon {
-            color: ${euiTheme.colors.textPrimary};
-          }
-        }
-      }
-    `,
-
-    // Child elements
-    euiSelectableListItem__content: css`
-      ${logicalCSS('width', '100%')}
-      display: flex;
-      align-items: center;
-      gap: ${spacingHorizontal};
-    `,
-
-    euiSelectableListItem__text: css`
-      flex-grow: 1; /* Pushes appended content to the far right */
-      ${logicalCSS('padding-horizontal', textPadding.horizontal)}
-      ${logicalCSS('padding-vertical', textPadding.vertical)}
-
-      /* Apply expected text spacing for flat children for user convenience.
-      Requires manual handling if nested */
-      > * + * {
-        ${logicalCSS('margin-top', euiTheme.size.xxs)}
-      }
-    `,
-    textWrap: {
-      truncate: css(euiTextTruncate()),
-      wrap: css``,
-    },
-
-    euiSelectableListItem__prepend: css`
-      ${sharedFlexStyles}
-      gap: ${spacingHorizontal};
-    `,
-    euiSelectableListItem__append: css`
-      ${sharedFlexStyles}
-      gap: ${spacingHorizontal};
-    `,
-    euiSelectableListItem__icon: css`
-      ${sharedFlexStyles}
-    `,
-  };
-};
diff --git a/packages/eui/src/components/selectable/selectable_list/selectable_list_item.test.tsx b/packages/eui/src/components/selectable/selectable_list/selectable_list_item.test.tsx
index 61a02657970..af1b7f08b04 100644
--- a/packages/eui/src/components/selectable/selectable_list/selectable_list_item.test.tsx
+++ b/packages/eui/src/components/selectable/selectable_list/selectable_list_item.test.tsx
@@ -70,7 +70,7 @@ describe('EuiSelectableListItem', () => {
         );
 
         expect(
-          container.querySelector('.euiSelectableListItem__checkbox')
+          container.querySelector('.euiListItemLayout__checkbox')
         ).toBeInTheDocument();
         expect(
           container.querySelector('[data-euiicon-type="check"]')
@@ -83,7 +83,7 @@ describe('EuiSelectableListItem', () => {
         );
 
         expect(
-          container.querySelector('.euiSelectableListItem__icon')
+          container.querySelector('.euiListItemLayout__icon')
         ).toBeInTheDocument();
         expect(
           container.querySelector('[data-euiicon-type="check"]')
diff --git a/packages/eui/src/components/selectable/selectable_list/selectable_list_item.tsx b/packages/eui/src/components/selectable/selectable_list/selectable_list_item.tsx
index 0ed12884651..6618a40599b 100644
--- a/packages/eui/src/components/selectable/selectable_list/selectable_list_item.tsx
+++ b/packages/eui/src/components/selectable/selectable_list/selectable_list_item.tsx
@@ -7,50 +7,21 @@
  */
 
 import classNames from 'classnames';
-import React, {
-  FunctionComponent,
-  LiHTMLAttributes,
-  ReactElement,
-  useState,
-  useEffect,
-  useMemo,
-} from 'react';
+import React, { FunctionComponent, LiHTMLAttributes, useMemo } from 'react';
 
-import { useEuiMemoizedStyles } from '../../../services';
 import { CommonProps } from '../../common';
 import { EuiI18n } from '../../i18n';
-import { EuiIcon, IconColor, IconType } from '../../icon';
 import { EuiScreenReaderOnly } from '../../accessibility';
 import { EuiBadge, EuiBadgeProps } from '../../badge';
-import { EuiToolTip } from '../../tool_tip';
-import { EuiCheckboxControl } from '../../form/checkbox';
+import {
+  EuiListItemLayout,
+  EuiListItemLayoutAsLi,
+} from '../../list_item_layout/_list_item_layout';
 
 import type {
   EuiSelectableOption,
   EuiSelectableOptionCheckedType,
 } from '../selectable_option';
-import { euiSelectableListItemStyles } from './selectable_list_item.styles';
-
-function resolveIconAndColor(
-  checked: EuiSelectableOptionCheckedType,
-  singleSelection?: boolean
-): {
-  icon: IconType;
-  singleSelection?: boolean;
-  color?: IconColor;
-} {
-  switch (checked) {
-    case 'on':
-      return { icon: 'check', color: singleSelection ? 'primary' : 'text' };
-    case 'off':
-      return { icon: 'cross', color: singleSelection ? 'primary' : 'text' };
-    case 'mixed':
-      return { icon: 'minus', color: singleSelection ? 'primary' : 'text' };
-    case undefined:
-    default:
-      return { icon: 'empty' };
-  }
-}
 
 export type EuiSelectableListItemProps = LiHTMLAttributes<HTMLLIElement> &
   CommonProps & {
@@ -121,10 +92,8 @@ export const EuiSelectableListItem: FunctionComponent<
   onFocusBadge = false,
   role = 'option',
   searchable,
-  textWrap = 'truncate',
   toolTipContent,
   toolTipProps,
-  'aria-describedby': _ariaDescribedBy,
   ...rest
 }) => {
   const classes = classNames(
@@ -133,55 +102,6 @@ export const EuiSelectableListItem: FunctionComponent<
     className
   );
 
-  const styles = useEuiMemoizedStyles(euiSelectableListItemStyles);
-  const cssStyles = [
-    styles.euiSelectableListItem,
-    checked != null && singleSelection && styles.singleSelection,
-  ];
-  const textStyles = [
-    styles.euiSelectableListItem__text,
-    styles.textWrap[textWrap],
-  ];
-
-  const optionIcon = useMemo(() => {
-    if (showIcons) {
-      if (!singleSelection) {
-        return (
-          <EuiCheckboxControl
-            className="euiSelectableListItem__checkbox"
-            checked={checked === 'on'}
-            indeterminate={checked === 'mixed'}
-            excluded={checked === 'off'}
-          />
-        );
-      }
-
-      const { icon, color } = resolveIconAndColor(checked, singleSelection);
-
-      return (
-        <EuiIcon
-          css={styles.euiSelectableListItem__icon}
-          className="euiSelectableListItem__icon"
-          color={color}
-          type={icon}
-        />
-      );
-    }
-  }, [showIcons, checked, singleSelection, styles]);
-
-  const prependNode = useMemo(() => {
-    if (prepend) {
-      return (
-        <span
-          css={styles.euiSelectableListItem__prepend}
-          className="euiSelectableListItem__prepend"
-        >
-          {prepend}
-        </span>
-      );
-    }
-  }, [prepend, styles]);
-
   const onFocusBadgeNode = useMemo(() => {
     const defaultOnFocusBadgeProps: EuiBadgeProps = {
       'aria-hidden': true,
@@ -213,20 +133,6 @@ export const EuiSelectableListItem: FunctionComponent<
       );
     }
   }, [onFocusBadge]);
-  const showOnFocusBadge = !!(isFocused && !disabled && onFocusBadgeNode);
-
-  const appendNode = useMemo(() => {
-    if (append || showOnFocusBadge) {
-      return (
-        <span
-          css={styles.euiSelectableListItem__append}
-          className="euiSelectableListItem__append"
-        >
-          {append} {showOnFocusBadge ? onFocusBadgeNode : null}
-        </span>
-      );
-    }
-  }, [append, showOnFocusBadge, onFocusBadgeNode, styles]);
 
   const screenReaderText = useMemo(() => {
     let state: React.ReactNode;
@@ -342,97 +248,56 @@ export const EuiSelectableListItem: FunctionComponent<
     ) : null;
   }, [checked, searchable, allowExclusions]);
 
-  // aria-checked is intended to be used with role="checkbox" but
-  // the MDN documentation lists it as a possibility for role="option".
-  // See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked
-  // and https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/option_role
-  const ariaChecked = useMemo(() => {
-    const rolesThatCanBeMixed = ['option', 'checkbox', 'menuitemcheckbox'];
-    const rolesThatCanBeChecked = [
-      ...rolesThatCanBeMixed,
-      'radio',
-      'menuitemradio',
-      'switch',
-    ];
-    if (!rolesThatCanBeChecked.includes(role)) return undefined;
-
-    switch (checked) {
-      case 'on':
-      case 'off':
-        return true;
-      case 'mixed':
-        if (rolesThatCanBeMixed.includes(role)) {
-          return 'mixed';
-        } else {
-          return false;
-        }
-      default:
-        return false;
-    }
-  }, [role, checked]);
-
   const hasToolTip = !!toolTipContent && !disabled;
-  const [tooltipRef, setTooltipRef] = useState<EuiToolTip | null>(null); // Needs to be state and not a ref to trigger useEffect
-  const [ariaDescribedBy, setAriaDescribedBy] = useState(_ariaDescribedBy);
-
-  // Manually trigger the tooltip on keyboard focus
-  useEffect(() => {
-    if (!tooltipRef) return;
-
-    if (isFocused) {
-      tooltipRef.showToolTip();
-    } else {
-      tooltipRef.hideToolTip();
-    }
-  }, [isFocused, tooltipRef]);
-
-  // Manually set the `aria-describedby` id on the <li> wrapper
-  useEffect(() => {
-    if (tooltipRef) {
-      const tooltipId = tooltipRef.state.id;
-      setAriaDescribedBy(classNames(tooltipId, _ariaDescribedBy));
-    }
-  }, [tooltipRef, _ariaDescribedBy]);
+  const showOnFocusBadge = !!(isFocused && !disabled && onFocusBadgeNode);
 
-  const content: ReactElement = (
-    <span
-      css={styles.euiSelectableListItem__content}
-      className="euiSelectableListItem__content"
-    >
-      {optionIcon}
-      {prependNode}
-      <span css={textStyles} className="euiSelectableListItem__text">
-        {children}
-        {screenReaderText}
-      </span>
-      {appendNode}
-    </span>
-  );
+  const listItemLayoutProps: Omit<EuiListItemLayoutAsLi, 'children'> = {
+    component: 'li',
+    role,
+    className: classes,
+    checked: checked,
+    isDisabled: disabled,
+    isFocused: !disabled && isFocused,
+    isSelected: checked !== undefined,
+    isSingleSelection: singleSelection,
+    selectionMode:
+      allowExclusions || checked === 'mixed' ? 'checked' : undefined,
+    showIndicator: showIcons,
+    prepend: prepend,
+    prependProps: {
+      className: 'euiSelectableListItem__prepend',
+    },
+    append: (append || showOnFocusBadge) && (
+      <>
+        {append}
+        {showOnFocusBadge ? onFocusBadgeNode : null}
+      </>
+    ),
+    appendProps: {
+      className: 'euiSelectableListItem__append',
+    },
+    contentProps: {
+      className: 'euiSelectableListItem__content',
+    },
+    textProps: {
+      className: 'euiSelectableListItem__text',
+    },
+    tooltipProps: hasToolTip
+      ? {
+          content: toolTipContent,
+          anchorClassName: 'eui-fullWidth',
+          position: 'left',
+          delay: 'regular',
+          ...toolTipProps,
+        }
+      : undefined,
+    ...rest,
+  };
 
   return (
-    <li
-      role={role}
-      aria-disabled={disabled}
-      aria-checked={ariaChecked} // Whether the item is "checked"
-      aria-selected={!disabled && isFocused} // Whether the item has keyboard focus per W3 spec
-      css={cssStyles}
-      className={classes}
-      {...rest}
-      aria-describedby={ariaDescribedBy}
-    >
-      {hasToolTip ? (
-        <EuiToolTip
-          ref={setTooltipRef}
-          content={toolTipContent}
-          anchorClassName="eui-fullWidth"
-          position="left"
-          {...toolTipProps}
-        >
-          {content}
-        </EuiToolTip>
-      ) : (
-        content
-      )}
-    </li>
+    <EuiListItemLayout {...listItemLayoutProps}>
+      {children}
+      {screenReaderText}
+    </EuiListItemLayout>
   );
 };
diff --git a/packages/eui/src/components/selectable/selectable_list/utils/get_list_item_size.ts b/packages/eui/src/components/selectable/selectable_list/utils/get_list_item_size.ts
new file mode 100644
index 00000000000..5a4d6e1b796
--- /dev/null
+++ b/packages/eui/src/components/selectable/selectable_list/utils/get_list_item_size.ts
@@ -0,0 +1,21 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+/**
+ * Util to calculate (virtualized) selection list item size
+ */
+export const getListItemSize = (
+  index: number,
+  rowHeight: number,
+  isGroupLabel: boolean
+): number => {
+  if (isGroupLabel && index > 0) {
+    return rowHeight + 16; // 16px = the additional 2 * 8px padding of the divider line
+  }
+  return rowHeight;
+};
diff --git a/packages/eui/src/components/selectable/selectable_templates/selectable_template_sitewide.styles.ts b/packages/eui/src/components/selectable/selectable_templates/selectable_template_sitewide.styles.ts
index 23e02ac9266..f91cd6eeb5e 100644
--- a/packages/eui/src/components/selectable/selectable_templates/selectable_template_sitewide.styles.ts
+++ b/packages/eui/src/components/selectable/selectable_templates/selectable_template_sitewide.styles.ts
@@ -30,7 +30,6 @@ export const euiSelectableTemplateSitewideStyles = (
 
     euiSelectableTemplateSitewide__optionMetasList: css`
       display: block;
-      ${logicalCSS('margin-top', euiTheme.size.xs)}
       ${euiFontSize(euiThemeContext, 'xs')}
       color: ${euiTheme.colors.textSubdued};
     `,
diff --git a/packages/eui/src/global_styling/mixins/_helpers.ts b/packages/eui/src/global_styling/mixins/_helpers.ts
index e5111ca6e3f..d385caf1e6c 100644
--- a/packages/eui/src/global_styling/mixins/_helpers.ts
+++ b/packages/eui/src/global_styling/mixins/_helpers.ts
@@ -142,9 +142,9 @@ export const euiOverflowShadowStyles = (
   // We only support vertical scrolling as horizontal scrolling has increased complexity on element dimensions.
   if (hasAnimatedOverflowShadow && direction === 'y') {
     const featureFlag = 'animation-timeline: scroll()';
-    const gradientStartColor = `var(--euiSelectableListOverflowColor, ${colors.backgroundBasePlain})`;
+    const gradientStartColor = `var(--euiOverflowShadowColor, ${colors.backgroundBasePlain})`;
     const gradientEndColor = 'transparent';
-    const gradientSize = size.l;
+    const gradientSize = size.base;
     const gradientScrollRange = size.m;
 
     const commonPseudoElementStyles = `