From 2729cb747784662e6cc25613cbc22c77427b0388 Mon Sep 17 00:00:00 2001
From: Armagan Ersoz <broccolinisoup@github.com>
Date: Wed, 5 Jul 2023 13:00:38 +1000
Subject: [PATCH 1/4] ActionList semantics re-introduce

---
 src/ActionList/ActionList.docs.json           |  46 ++----
 .../ActionList.examples.stories.tsx           |  87 +++++-----
 .../ActionList.features.stories.tsx           |  69 ++++----
 src/ActionList/ActionList.stories.tsx         |  40 ++---
 src/ActionList/Description.tsx                |   1 -
 src/ActionList/Divider.tsx                    |   9 +-
 src/ActionList/Group.tsx                      |   8 +-
 src/ActionList/Heading.tsx                    |  85 ++++++++++
 src/ActionList/Item.tsx                       |  66 ++++++--
 src/ActionList/List.tsx                       |  45 ++++--
 src/ActionList/Selection.tsx                  |  14 +-
 src/ActionList/Visuals.tsx                    |   1 +
 src/ActionList/index.ts                       |   5 +
 src/ActionList/shared.ts                      |   9 ++
 src/ActionMenu.tsx                            | 138 ----------------
 .../ActionMenu.examples.stories.tsx           | 148 +++++++++---------
 .../ActionMenu.features.stories.tsx           |  42 ++---
 src/ActionMenu/ActionMenu.tsx                 |   2 +-
 .../__tests__/ActionMenu.test.tsx             |  12 +-
 .../__tests__/ActionMenu.types.test.tsx       |   2 +-
 src/NavList/NavList.stories.tsx               |  17 ++
 src/NavList/NavList.test.tsx                  |   2 +-
 src/NavList/NavList.tsx                       |  11 +-
 src/index.ts                                  |   1 +
 24 files changed, 442 insertions(+), 418 deletions(-)
 create mode 100644 src/ActionList/Heading.tsx
 delete mode 100644 src/ActionMenu.tsx
 rename src/{ => ActionMenu}/__tests__/ActionMenu.test.tsx (96%)
 rename src/{ => ActionMenu}/__tests__/ActionMenu.types.test.tsx (94%)

diff --git a/src/ActionList/ActionList.docs.json b/src/ActionList/ActionList.docs.json
index 392c6db523a..18610f7f622 100644
--- a/src/ActionList/ActionList.docs.json
+++ b/src/ActionList/ActionList.docs.json
@@ -7,7 +7,7 @@
   "props": [
     {
       "name": "children",
-      "type": "ActionList.Item[] | ActionList.LinkItem[] | ActionList.Group[]",
+      "type": "ActionList.Item[] | ActionList.LinkItem[] | ActionList.Divider[]",
       "defaultValue": "",
       "required": true,
       "description": ""
@@ -184,50 +184,36 @@
       ]
     },
     {
-      "name": "ActionList.Group",
+      "name": "ActionList.Heading",
       "props": [
         {
-          "name": "children",
-          "type": "ActionList.Item[] | ActionList.LinkItem[]",
-          "defaultValue": "",
-          "required": true,
+          "name": "variant",
+          "type": "'subtle' | 'filled'",
+          "defaultValue": "subtle",
           "description": ""
         },
         {
           "name": "title",
           "type": "string",
           "defaultValue": "",
-          "description": "Title of the group."
+          "required": true,
+          "description": ""
         },
         {
-          "name": "auxiliaryText",
+          "name": "subtitle",
           "type": "string",
           "defaultValue": "",
-          "description": "Secondary text that provides additional information about the group."
-        },
-        {
-          "name": "variant",
-          "type": "'filled' | 'subtle'",
-          "defaultValue": "'subtle'",
-          "description": "`inline` descriptions are positioned beside primary text. `block` descriptions are positioned below primary text."
-        },
-        {
-          "name": "selectionVariant",
-          "type": "'single' | 'multiple' | false",
-          "defaultValue": "",
-          "description": "Set `selectionVariant` at the group level."
-        },
-        {
-          "name": "role",
-          "type": "AriaRole",
-          "defaultValue": "",
-          "description": "ARIA role describing the function of the list inside the group. `listbox` and `menu` are a common values."
+          "required": false,
+          "description": ""
         },
         {
-          "name": "sx",
-          "type": "SystemStyleObject"
+          "name": "headingLevel",
+          "type": "'1' | '2' | '3' | '4' | '5' | '6'",
+          "defaultValue": "3",
+          "required": false,
+          "description": ""
         }
       ]
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/src/ActionList/ActionList.examples.stories.tsx b/src/ActionList/ActionList.examples.stories.tsx
index ef5c79a08aa..654e4dcf5ee 100644
--- a/src/ActionList/ActionList.examples.stories.tsx
+++ b/src/ActionList/ActionList.examples.stories.tsx
@@ -132,24 +132,25 @@ export function MixedSelection(): JSX.Element {
       <h1>List with mixed selection</h1>
 
       <p>
-        In this list, there is a ActionList.Group with single selection for picking one option, followed by a Item that
-        is an action. This pattern appears inside a menu for selection view options in Memex
+        In this list, there is a ActionList with single selection for picking one option, followed by another ActionList
+        with a single Item that is an action. This pattern appears inside a menu for selection view options in Memex.
       </p>
 
+      <ActionList selectionVariant="single" role="listbox">
+        <ActionList.Heading title="Group by" />
+        {options.map((option, index) => (
+          <ActionList.Item
+            key={index}
+            selected={index === selectedIndex}
+            onSelect={() => setSelectedIndex(index)}
+            role="option"
+          >
+            <ActionList.LeadingVisual>{option.icon}</ActionList.LeadingVisual>
+            {option.text}
+          </ActionList.Item>
+        ))}
+      </ActionList>
       <ActionList>
-        <ActionList.Group title="Group by" selectionVariant="single" role="listbox">
-          {options.map((option, index) => (
-            <ActionList.Item
-              key={index}
-              selected={index === selectedIndex}
-              onSelect={() => setSelectedIndex(index)}
-              role="option"
-            >
-              <ActionList.LeadingVisual>{option.icon}</ActionList.LeadingVisual>
-              {option.text}
-            </ActionList.Item>
-          ))}
-        </ActionList.Group>
         {typeof selectedIndex === 'number' && (
           <>
             <ActionList.Divider />
@@ -248,37 +249,31 @@ export function MemexSortable(): JSX.Element {
     // @ts-ignore react-dnd needs to be updated to support React 18
     <DndProvider backend={HTML5Backend}>
       <ActionList selectionVariant="multiple" role="menu">
-        <ActionList.Group title="Visible fields (can be reordered)">
-          {visibleOptions.map(option => (
-            <SortableItem
-              key={option.text}
-              role="menuitemcheckbox"
-              option={option}
-              onSelect={() => toggle(option.text)}
-              reorder={reorder}
-            />
-          ))}
-        </ActionList.Group>
-        <ActionList.Group
-          title="Hidden fields"
-          selectionVariant={
-            /** selectionVariant override on Group: disable selection if there are no options */
-            hiddenOptions.length ? 'multiple' : false
-          }
-        >
-          {hiddenOptions.map((option, index) => (
-            <ActionList.Item
-              key={index}
-              role="menuitemcheckbox"
-              selected={option.selected}
-              onSelect={() => toggle(option.text)}
-            >
-              <ActionList.LeadingVisual>{option.icon}</ActionList.LeadingVisual>
-              {option.text}
-            </ActionList.Item>
-          ))}
-          {hiddenOptions.length === 0 && <ActionList.Item disabled>No hidden fields</ActionList.Item>}
-        </ActionList.Group>
+        <ActionList.Heading title="Visible fields (can be reordered)" />
+        {visibleOptions.map(option => (
+          <SortableItem
+            key={option.text}
+            role="menuitemcheckbox"
+            option={option}
+            onSelect={() => toggle(option.text)}
+            reorder={reorder}
+          />
+        ))}
+      </ActionList>
+      <ActionList selectionVariant={hiddenOptions.length ? 'multiple' : undefined} role="menu">
+        <ActionList.Heading title="Hidden fields" />
+        {hiddenOptions.map((option, index) => (
+          <ActionList.Item
+            key={index}
+            role="menuitemcheckbox"
+            selected={option.selected}
+            onSelect={() => toggle(option.text)}
+          >
+            <ActionList.LeadingVisual>{option.icon}</ActionList.LeadingVisual>
+            {option.text}
+          </ActionList.Item>
+        ))}
+        {hiddenOptions.length === 0 && <ActionList.Item disabled>No hidden fields</ActionList.Item>}
       </ActionList>
     </DndProvider>
   )
diff --git a/src/ActionList/ActionList.features.stories.tsx b/src/ActionList/ActionList.features.stories.tsx
index a27e2181d3c..2888ad1108f 100644
--- a/src/ActionList/ActionList.features.stories.tsx
+++ b/src/ActionList/ActionList.features.stories.tsx
@@ -3,7 +3,6 @@ import {Meta} from '@storybook/react'
 import {ActionList} from '.'
 import {Item} from './Item'
 import {LinkItem} from './LinkItem'
-import {Group} from './Group'
 import {Divider} from './Divider'
 import {Description} from './Description'
 import Avatar from '../Avatar'
@@ -28,7 +27,7 @@ import {
 export default {
   title: 'Components/ActionList/Features',
   component: ActionList,
-  subcomponents: {Item, LinkItem, Group, Divider, Description},
+  subcomponents: {Item, LinkItem, Divider, Description},
 } as Meta<typeof ActionList>
 
 export const SimpleList = () => (
@@ -428,23 +427,22 @@ export const GroupWithSubtleTitle = () => {
 
   return (
     <ActionList selectionVariant="multiple" role="menu" showDividers aria-label="Reviewers">
-      <ActionList.Group title="Everyone">
-        {users.slice(2).map(user => (
-          <ActionList.Item
-            role="menuitemcheckbox"
-            key={user.login}
-            selected={Boolean(assignees.find(assignee => assignee.login === user.login))}
-            aria-checked={Boolean(assignees.find(assignee => assignee.login === user.login))}
-            onSelect={() => toggleAssignee(user)}
-          >
-            <ActionList.LeadingVisual>
-              <Avatar src={`https://github.com/${user.login}.png`} />
-            </ActionList.LeadingVisual>
-            {user.login}
-            <ActionList.Description>{user.name}</ActionList.Description>
-          </ActionList.Item>
-        ))}
-      </ActionList.Group>
+      <ActionList.Heading title="Everyone" />
+      {users.slice(2).map(user => (
+        <ActionList.Item
+          role="menuitemcheckbox"
+          key={user.login}
+          selected={Boolean(assignees.find(assignee => assignee.login === user.login))}
+          aria-checked={Boolean(assignees.find(assignee => assignee.login === user.login))}
+          onSelect={() => toggleAssignee(user)}
+        >
+          <ActionList.LeadingVisual>
+            <Avatar src={`https://github.com/${user.login}.png`} />
+          </ActionList.LeadingVisual>
+          {user.login}
+          <ActionList.Description>{user.name}</ActionList.Description>
+        </ActionList.Item>
+      ))}
     </ActionList>
   )
 }
@@ -461,23 +459,22 @@ export const GroupWithFilledTitle = () => {
 
   return (
     <ActionList selectionVariant="multiple" role="menu" showDividers aria-label="Reviewers">
-      <ActionList.Group title="Everyone" variant="filled">
-        {users.slice(2).map(user => (
-          <ActionList.Item
-            role="menuitemcheckbox"
-            key={user.login}
-            selected={Boolean(assignees.find(assignee => assignee.login === user.login))}
-            aria-checked={Boolean(assignees.find(assignee => assignee.login === user.login))}
-            onSelect={() => toggleAssignee(user)}
-          >
-            <ActionList.LeadingVisual>
-              <Avatar src={`https://github.com/${user.login}.png`} />
-            </ActionList.LeadingVisual>
-            {user.login}
-            <ActionList.Description>{user.name}</ActionList.Description>
-          </ActionList.Item>
-        ))}
-      </ActionList.Group>
+      <ActionList.Heading title="Everyone" variant="filled" />
+      {users.slice(2).map(user => (
+        <ActionList.Item
+          role="menuitemcheckbox"
+          key={user.login}
+          selected={Boolean(assignees.find(assignee => assignee.login === user.login))}
+          aria-checked={Boolean(assignees.find(assignee => assignee.login === user.login))}
+          onSelect={() => toggleAssignee(user)}
+        >
+          <ActionList.LeadingVisual>
+            <Avatar src={`https://github.com/${user.login}.png`} />
+          </ActionList.LeadingVisual>
+          {user.login}
+          <ActionList.Description>{user.name}</ActionList.Description>
+        </ActionList.Item>
+      ))}
     </ActionList>
   )
 }
diff --git a/src/ActionList/ActionList.stories.tsx b/src/ActionList/ActionList.stories.tsx
index de6f66ae6f5..982dc3c2b71 100644
--- a/src/ActionList/ActionList.stories.tsx
+++ b/src/ActionList/ActionList.stories.tsx
@@ -1,9 +1,9 @@
 import React from 'react'
 import {Story, Meta} from '@storybook/react'
-import {ActionList, ActionListProps, ActionListGroupProps} from '.'
+import {ActionList, ActionListProps} from '.'
 import {Item} from './Item'
 import {LinkItem} from './LinkItem'
-import {Group} from './Group'
+import {Heading, ActionListHeadingProps} from './Heading'
 import {Divider} from './Divider'
 import {Description} from './Description'
 import {TypographyIcon, VersionsIcon, SearchIcon, ArrowRightIcon, ArrowLeftIcon} from '@primer/octicons-react'
@@ -11,7 +11,7 @@ import {TypographyIcon, VersionsIcon, SearchIcon, ArrowRightIcon, ArrowLeftIcon}
 export default {
   title: 'Components/ActionList',
   component: ActionList,
-  subcomponents: {Item, LinkItem, Group, Divider, Description},
+  subcomponents: {Item, LinkItem, Heading, Divider, Description},
 } as Meta<typeof ActionList>
 
 export const Default = () => (
@@ -33,7 +33,7 @@ Playground.args = {
   showDividers: false,
   selectionVariant: undefined,
   variant: 'inset',
-  role: 'listbox',
+  role: 'list',
 }
 Playground.argTypes = {
   showDividers: {
@@ -242,34 +242,34 @@ LinkItemPlayground.argTypes = {
   },
 }
 
-export const GroupPlayground: Story<ActionListGroupProps> = args => (
+export const HeadingPlayground: Story<ActionListProps & ActionListHeadingProps> = args => (
   <ActionList>
-    <ActionList.Group {...args}>
-      <ActionList.Item>Item 1</ActionList.Item>
-      <ActionList.Item>Item 2</ActionList.Item>
-    </ActionList.Group>
+    <ActionList.Heading title={args.title} subtitle={args.subtitle} variant={args.variant} as={args.as} />
   </ActionList>
 )
-GroupPlayground.argTypes = {
+
+HeadingPlayground.args = {
+  title: 'Group title',
+}
+
+HeadingPlayground.argTypes = {
   variant: {
+    type: 'string',
     control: {
       type: 'radio',
     },
     options: ['subtle', 'filled'],
   },
-  role: {
-    type: 'string',
-  },
   title: {
     type: 'string',
   },
-  auxiliaryText: {
+  subtitle: {
     type: 'string',
   },
-}
-GroupPlayground.args = {
-  variant: 'subtle',
-  role: 'listbox',
-  title: 'Group title',
-  auxiliaryText: '',
+  as: {
+    control: {
+      type: 'radio',
+    },
+    options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+  },
 }
diff --git a/src/ActionList/Description.tsx b/src/ActionList/Description.tsx
index 4027ec22f58..011c1a800b8 100644
--- a/src/ActionList/Description.tsx
+++ b/src/ActionList/Description.tsx
@@ -44,7 +44,6 @@ export const Description: React.FC<React.PropsWithChildren<ActionListDescription
       sx={merge({...styles, color: disabled ? 'fg.disabled' : 'fg.muted'}, sx as SxProp)}
       title={props.children as string}
       inline={true}
-      maxWidth="100%"
     >
       {props.children}
     </Truncate>
diff --git a/src/ActionList/Divider.tsx b/src/ActionList/Divider.tsx
index 224140dc9ef..2647cc47422 100644
--- a/src/ActionList/Divider.tsx
+++ b/src/ActionList/Divider.tsx
@@ -4,15 +4,17 @@ import {get} from '../constants'
 import {Theme} from '../ThemeProvider'
 import {SxProp, merge} from '../sx'
 
-export type ActionListDividerProps = SxProp
+export type ActionListDividerProps = {
+  as?: React.ElementType
+} & SxProp
 
 /**
  * Visually separates `Item`s or `Group`s in an `ActionList`.
  */
-export const Divider: React.FC<React.PropsWithChildren<ActionListDividerProps>> = ({sx = {}}) => {
+export const Divider: React.FC<React.PropsWithChildren<ActionListDividerProps>> = ({sx = {}, as = 'li'}) => {
   return (
     <Box
-      as="li"
+      as={as}
       aria-hidden="true"
       sx={merge(
         {
@@ -24,6 +26,7 @@ export const Divider: React.FC<React.PropsWithChildren<ActionListDividerProps>>
         },
         sx as SxProp,
       )}
+      role="separator"
       data-component="ActionList.Divider"
     />
   )
diff --git a/src/ActionList/Group.tsx b/src/ActionList/Group.tsx
index f6332760c1f..246536286ae 100644
--- a/src/ActionList/Group.tsx
+++ b/src/ActionList/Group.tsx
@@ -35,6 +35,9 @@ export type ActionListGroupProps = {
 type ContextProps = Pick<ActionListGroupProps, 'selectionVariant'>
 export const GroupContext = React.createContext<ContextProps>({})
 
+/**
+ * @deprecated ActionList.Group is deprecated. Use ActionList with ActionList.Heading instead.
+ */
 export const Group: React.FC<React.PropsWithChildren<ActionListGroupProps>> = ({
   title,
   variant = 'subtle',
@@ -58,7 +61,6 @@ export const Group: React.FC<React.PropsWithChildren<ActionListGroupProps>> = ({
       }}
       {...props}
     >
-      {title && <Header title={title} variant={variant} auxiliaryText={auxiliaryText} labelId={labelId} />}
       <GroupContext.Provider value={{selectionVariant}}>
         <Box
           as="ul"
@@ -66,6 +68,7 @@ export const Group: React.FC<React.PropsWithChildren<ActionListGroupProps>> = ({
           aria-labelledby={title ? labelId : undefined}
           role={role || (listRole && 'group')}
         >
+          {title && <Header title={title} variant={variant} auxiliaryText={auxiliaryText} labelId={labelId} />}
           {props.children}
         </Box>
       </GroupContext.Provider>
@@ -91,6 +94,7 @@ const Header: React.FC<React.PropsWithChildren<HeaderProps>> = ({variant, title,
     fontSize: 0,
     fontWeight: 'bold',
     color: 'fg.muted',
+    listStyle: 'none',
     ...(variant === 'filled' && {
       backgroundColor: 'canvas.subtle',
       marginX: 0,
@@ -102,7 +106,7 @@ const Header: React.FC<React.PropsWithChildren<HeaderProps>> = ({variant, title,
   }
 
   return (
-    <Box sx={styles} role="presentation" aria-hidden="true" {...props}>
+    <Box as="li" sx={styles} role="presentation" aria-hidden="true" {...props}>
       <span id={labelId}>{title}</span>
       {auxiliaryText && <span>{auxiliaryText}</span>}
     </Box>
diff --git a/src/ActionList/Heading.tsx b/src/ActionList/Heading.tsx
new file mode 100644
index 00000000000..98f7ddac657
--- /dev/null
+++ b/src/ActionList/Heading.tsx
@@ -0,0 +1,85 @@
+import React from 'react'
+import {ListContext} from './List'
+import Box from '../Box'
+import {get} from '../constants'
+import {SxProp} from '../sx'
+import {merge} from 'lodash'
+import {useId} from '../hooks/useId'
+
+export type ActionListHeadingProps = {
+  variant?: 'subtle' | 'filled'
+  title: string
+  subtitle?: string
+  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+} & SxProp
+
+/**
+ * Displays the name and description of the ActionList.
+ *
+ * For visual presentation only. It's hidden from screen readers.
+ */
+export const Heading: React.FC<React.PropsWithChildren<ActionListHeadingProps>> = ({
+  variant,
+  title,
+  subtitle,
+  as = 'h3',
+  sx,
+  ...props
+}) => {
+  const {variant: listVariant, headingId: headingId} = React.useContext(ListContext)
+
+  const styles = {
+    paddingY: '6px',
+    paddingX: listVariant === 'full' ? 2 : 3,
+    fontSize: 0,
+    fontWeight: 'bold',
+    color: 'fg.muted',
+    listStyle: 'none',
+    ...(variant === 'filled' && {
+      backgroundColor: 'canvas.subtle',
+      marginX: 0,
+      marginBottom: 2,
+      borderTop: '1px solid',
+      borderBottom: '1px solid',
+      borderColor: 'neutral.muted',
+    }),
+  }
+
+  const id = useId(headingId)
+
+  const Title = (
+    <Box
+      as={as}
+      sx={{
+        color: get('colors.fg.muted'),
+        fontSize: get('fontSizes.0'),
+        fontWeight: get('fontWeights.bold'),
+        marginBottom: 0,
+        marginTop: 0,
+      }}
+      id={id}
+    >
+      {title}
+    </Box>
+  )
+
+  const Subtitle = (
+    <Box
+      as="span"
+      sx={{
+        color: get('colors.fg.muted'),
+        fontSize: get('fontSizes.0'),
+        fontWeight: get('fontWeights.normal'),
+      }}
+    >
+      {subtitle}
+    </Box>
+  )
+
+  return (
+    <Box as="div" sx={merge(styles, sx as SxProp)} {...props}>
+      {Title}
+      {subtitle && Subtitle}
+    </Box>
+  )
+}
diff --git a/src/ActionList/Item.tsx b/src/ActionList/Item.tsx
index 42e38b75cd3..c0b3eae74b8 100644
--- a/src/ActionList/Item.tsx
+++ b/src/ActionList/Item.tsx
@@ -9,11 +9,12 @@ import {defaultSxProp} from '../utils/defaultSxProp'
 import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import {ActionListContainerContext} from './ActionListContainerContext'
 import {Description} from './Description'
-import {GroupContext} from './Group'
-import {ActionListProps, ListContext} from './List'
+import {ListContext} from './List'
 import {Selection} from './Selection'
 import {ActionListItemProps, getVariantStyles, ItemContext, TEXT_ROW_HEIGHT} from './shared'
 import {LeadingVisual, TrailingVisual} from './Visuals'
+import {MenuContext} from '../ActionMenu/ActionMenu'
+import {GroupContext} from './Group'
 
 const LiBox = styled.li<SxProp>(sx)
 
@@ -29,6 +30,8 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
       id,
       role,
       _PrivateItemWrapper,
+      // @ts-ignore tabIndex is sometimes passed as a prop in dotcom.
+      tabIndex,
       ...props
     },
     forwardedRef,
@@ -38,10 +41,13 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
       trailingVisual: TrailingVisual,
       description: Description,
     })
+
     const {variant: listVariant, showDividers, selectionVariant: listSelectionVariant} = React.useContext(ListContext)
-    const {selectionVariant: groupSelectionVariant} = React.useContext(GroupContext)
     const {container, afterSelect, selectionAttribute} = React.useContext(ActionListContainerContext)
+    const menuContext = React.useContext(MenuContext)
+    const {selectionVariant: groupSelectionVariant} = React.useContext(GroupContext)
 
+    const selectionVariant = groupSelectionVariant ?? listSelectionVariant
     const onSelect = React.useCallback(
       (
         event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement>,
@@ -55,10 +61,6 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
       [onSelectUser],
     )
 
-    const selectionVariant: ActionListProps['selectionVariant'] = groupSelectionVariant
-      ? groupSelectionVariant
-      : listSelectionVariant
-
     /** Infer item role based on the container */
     let itemRole: ActionListItemProps['role']
     if (container === 'ActionMenu' || container === 'DropdownMenu') {
@@ -84,12 +86,22 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
       },
     }
 
+    const isTopLevelInteractive = () =>
+      _PrivateItemWrapper !== undefined ||
+      // @ts-ignore props.as may be defined, may not.
+      props.as === 'button' ||
+      // @ts-ignore props.as may be defined, may not.
+      props.as === 'a' ||
+      menuContext.anchorId !== undefined ||
+      role?.match(/menuitem/) ||
+      tabIndex !== undefined
+
     const styles = {
       position: 'relative',
       display: 'flex',
-      paddingX: 2,
+      paddingX: isTopLevelInteractive() ? 2 : 0,
       fontSize: 1,
-      paddingY: '6px', // custom value off the scale
+      paddingY: isTopLevelInteractive() ? '6px' : 0, // custom value off the scale
       lineHeight: TEXT_ROW_HEIGHT,
       minHeight: 5,
       marginX: listVariant === 'inset' ? 2 : 0,
@@ -145,6 +157,10 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
         borderTopWidth: showDividers ? `1px` : '0',
         borderColor: 'var(--divider-color, transparent)',
       },
+      'button[data-component="ActionList.Item--DividerContainer"]': {
+        textAlign: 'left',
+        padding: 0,
+      },
       // show between 2 items
       ':not(:first-of-type)': {'--divider-color': theme?.colors.actionListItem.inlineDivider},
       // hide divider after dividers & group header, with higher importance!
@@ -182,13 +198,13 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
     const inlineDescriptionId = useId(id && `${id}--inline-description`)
     const blockDescriptionId = useId(id && `${id}--block-description`)
 
-    const ItemWrapper = _PrivateItemWrapper || React.Fragment
+    const ItemWrapper = _PrivateItemWrapper || Box
 
     const menuItemProps = {
       onClick: clickHandler,
       onKeyPress: keyPressHandler,
       'aria-disabled': disabled ? true : undefined,
-      tabIndex: disabled ? undefined : 0,
+      tabIndex: disabled || !isTopLevelInteractive() ? undefined : 0,
       'aria-labelledby': `${labelId} ${
         slots.description && slots.description.props.variant !== 'block' ? inlineDescriptionId : ''
       }`,
@@ -199,17 +215,41 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
 
     const containerProps = _PrivateItemWrapper ? {role: role || itemRole ? 'none' : undefined} : menuItemProps
 
-    const wrapperProps = _PrivateItemWrapper ? menuItemProps : {}
+    const wrapperProps = _PrivateItemWrapper
+      ? menuItemProps
+      : {
+          sx: {
+            display: 'flex',
+            paddingX: isTopLevelInteractive() ? 0 : 2,
+            paddingY: isTopLevelInteractive() ? 0 : '6px', // custom value off the scale
+            flexGrow: 1,
+          },
+        }
 
     return (
       <ItemContext.Provider value={{variant, disabled, inlineDescriptionId, blockDescriptionId}}>
         <LiBox ref={forwardedRef} sx={merge<BetterSystemStyleObject>(styles, sxProp)} {...containerProps} {...props}>
+          {/* @ts-ignore onClick prop is only passed when _PrivateItemWrapper is set by ActionList.LinkItem. */}
           <ItemWrapper {...wrapperProps}>
             <Selection selected={selected} />
             {slots.leadingVisual}
             <Box
               data-component="ActionList.Item--DividerContainer"
-              sx={{display: 'flex', flexDirection: 'column', flexGrow: 1, minWidth: 0}}
+              sx={{
+                display: 'flex',
+                flexDirection: 'column',
+                flexGrow: 1,
+                minWidth: 0,
+                borderStyle: 'none',
+                backgroundColor: 'transparent',
+                cursor: 'inherit',
+                fontSize: 'inherit',
+                color: getVariantStyles(variant, disabled).color,
+                lineHeight: '20px',
+              }}
+              // @ts-ignore `as` prop may be passed to ActionList.Item, even if it isn't defined in ActionListItemProps.
+              // If this item is inside an ActionMenu, don't render an interactive button.
+              as={isTopLevelInteractive() ? 'div' : 'button'}
             >
               <ConditionalBox if={Boolean(slots.trailingVisual)} sx={{display: 'flex', flexGrow: 1}}>
                 <ConditionalBox
diff --git a/src/ActionList/List.tsx b/src/ActionList/List.tsx
index 29bc2f54953..f9a779c6f56 100644
--- a/src/ActionList/List.tsx
+++ b/src/ActionList/List.tsx
@@ -5,6 +5,10 @@ import sx, {SxProp, merge} from '../sx'
 import {AriaRole} from '../utils/types'
 import {ActionListContainerContext} from './ActionListContainerContext'
 import {defaultSxProp} from '../utils/defaultSxProp'
+import {Heading} from './Heading'
+import Box from '../Box'
+import {useSlots} from '../hooks/useSlots'
+import {useId} from '../hooks/useId'
 
 export type ActionListProps = React.PropsWithChildren<{
   /**
@@ -26,7 +30,10 @@ export type ActionListProps = React.PropsWithChildren<{
 }> &
   SxProp
 
-type ContextProps = Pick<ActionListProps, 'variant' | 'selectionVariant' | 'showDividers' | 'role'>
+type ContextProps = Pick<ActionListProps, 'variant' | 'selectionVariant' | 'showDividers' | 'role'> & {
+  headingId?: string
+}
+
 export const ListContext = React.createContext<ContextProps>({})
 
 const ListBox = styled.ul<SxProp>(sx)
@@ -36,10 +43,13 @@ export const List = React.forwardRef<HTMLUListElement, ActionListProps>(
     {variant = 'inset', selectionVariant, showDividers = false, role, sx: sxProp = defaultSxProp, ...props},
     forwardedRef,
   ): JSX.Element => {
-    const styles = {
+    const outerStyles = {
+      paddingY: variant === 'inset' ? 2 : 0,
+    }
+
+    const innerStyles = {
       margin: 0,
       paddingInlineStart: 0, // reset ul styles
-      paddingY: variant === 'inset' ? 2 : 0,
     }
 
     /** if list is inside a Menu, it will get a role from the Menu */
@@ -49,25 +59,34 @@ export const List = React.forwardRef<HTMLUListElement, ActionListProps>(
       selectionVariant: containerSelectionVariant, // TODO: Remove after DropdownMenu2 deprecation
     } = React.useContext(ActionListContainerContext)
 
+    const [slots, rest] = useSlots(props.children, {heading: Heading})
+
+    const headingId = useId()
+
     return (
-      <ListBox
-        sx={merge(styles, sxProp as SxProp)}
-        role={role || listRole}
-        aria-labelledby={listLabelledBy}
-        {...props}
-        ref={forwardedRef}
-      >
+      <Box sx={merge(outerStyles, sxProp as SxProp)}>
         <ListContext.Provider
           value={{
             variant,
             selectionVariant: selectionVariant || containerSelectionVariant,
-            showDividers,
+            // @ts-ignore showItemDividers may be passed by some components until next major.
+            showDividers: showDividers || !!props.showItemDividers,
             role: role || listRole,
+            headingId,
           }}
         >
-          {props.children}
+          {slots.heading}
+          <ListBox
+            sx={innerStyles}
+            role={role || listRole}
+            aria-labelledby={slots.heading ? headingId : listLabelledBy}
+            {...props}
+            ref={forwardedRef}
+          >
+            {rest}
+          </ListBox>
         </ListContext.Provider>
-      </ListBox>
+      </Box>
     )
   },
 ) as PolymorphicForwardRefComponent<'ul', ActionListProps>
diff --git a/src/ActionList/Selection.tsx b/src/ActionList/Selection.tsx
index b4a9b71b6e4..96ba447b2ef 100644
--- a/src/ActionList/Selection.tsx
+++ b/src/ActionList/Selection.tsx
@@ -1,28 +1,24 @@
 import React from 'react'
 import {CheckIcon} from '@primer/octicons-react'
-import {ListContext, ActionListProps} from './List'
-import {GroupContext, ActionListGroupProps} from './Group'
+import {ListContext} from './List'
 import {ActionListItemProps} from './shared'
 import {LeadingVisualContainer} from './Visuals'
+import {GroupContext} from './Group'
 
 type SelectionProps = Pick<ActionListItemProps, 'selected'>
 export const Selection: React.FC<React.PropsWithChildren<SelectionProps>> = ({selected}) => {
-  const {selectionVariant: listSelectionVariant} = React.useContext(ListContext)
   const {selectionVariant: groupSelectionVariant} = React.useContext(GroupContext)
+  const {selectionVariant: listSelectionVariant} = React.useContext(ListContext)
 
   /** selectionVariant in Group can override the selectionVariant in List root */
   /** fallback to selectionVariant from container menu if any (ActionMenu, SelectPanel ) */
-  let selectionVariant: ActionListProps['selectionVariant'] | ActionListGroupProps['selectionVariant']
-  if (typeof groupSelectionVariant !== 'undefined') selectionVariant = groupSelectionVariant
-  else selectionVariant = listSelectionVariant
+  const selectionVariant = groupSelectionVariant ?? listSelectionVariant
 
   if (!selectionVariant) {
     // if selectionVariant is not set on List, but Item is selected
     // fail loudly instead of silently ignoring
     if (selected) {
-      throw new Error(
-        'For Item to be selected, ActionList or ActionList.Group needs to have a selectionVariant defined',
-      )
+      throw new Error('For Item to be selected, ActionList needs to have a selectionVariant defined')
     } else {
       return null
     }
diff --git a/src/ActionList/Visuals.tsx b/src/ActionList/Visuals.tsx
index 4a290b20f3e..43570d0cd04 100644
--- a/src/ActionList/Visuals.tsx
+++ b/src/ActionList/Visuals.tsx
@@ -9,6 +9,7 @@ type VisualProps = SxProp & React.HTMLAttributes<HTMLSpanElement>
 export const LeadingVisualContainer: React.FC<React.PropsWithChildren<VisualProps>> = ({sx = {}, ...props}) => {
   return (
     <Box
+      data-component="ActionList.LeadingVisual"
       as="span"
       sx={merge(
         {
diff --git a/src/ActionList/index.ts b/src/ActionList/index.ts
index c87e5bc7f65..c5778587176 100644
--- a/src/ActionList/index.ts
+++ b/src/ActionList/index.ts
@@ -1,5 +1,6 @@
 import {List} from './List'
 import {Group} from './Group'
+import {Heading} from './Heading'
 import {Item} from './Item'
 import {LinkItem} from './LinkItem'
 import {Divider} from './Divider'
@@ -8,6 +9,7 @@ import {LeadingVisual, TrailingVisual} from './Visuals'
 
 export type {ActionListProps} from './List'
 export type {ActionListGroupProps} from './Group'
+export type {ActionListHeadingProps} from './Heading'
 export type {ActionListItemProps} from './shared'
 export type {ActionListLinkItemProps} from './LinkItem'
 export type {ActionListDividerProps} from './Divider'
@@ -21,6 +23,9 @@ export const ActionList = Object.assign(List, {
   /** Collects related `Items` in an `ActionList`. */
   Group,
 
+  /** Provides label for items in list`. */
+  Heading,
+
   /** An actionable or selectable `Item` */
   Item,
 
diff --git a/src/ActionList/shared.ts b/src/ActionList/shared.ts
index 10b79112915..fcb9e80bc59 100644
--- a/src/ActionList/shared.ts
+++ b/src/ActionList/shared.ts
@@ -1,6 +1,7 @@
 import React from 'react'
 import {SxProp} from '../sx'
 import {AriaRole} from '../utils/types'
+import createSlots from '../deprecated/utils/create-slots'
 
 export type ActionListItemProps = {
   /**
@@ -92,3 +93,11 @@ export const getVariantStyles = (
 }
 
 export const TEXT_ROW_HEIGHT = '20px' // custom value off the scale
+
+export const {Slots, Slot} = createSlots([
+  'Heading',
+  'LeadingVisual',
+  'InlineDescription',
+  'BlockDescription',
+  'TrailingVisual',
+])
diff --git a/src/ActionMenu.tsx b/src/ActionMenu.tsx
deleted file mode 100644
index f2494987c16..00000000000
--- a/src/ActionMenu.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-import React from 'react'
-import {TriangleDownIcon} from '@primer/octicons-react'
-import {AnchoredOverlay, AnchoredOverlayProps} from './AnchoredOverlay'
-import {OverlayProps} from './Overlay'
-import {useProvidedRefOrCreate, useProvidedStateOrCreate, useMenuKeyboardNavigation} from './hooks'
-import {Divider} from './ActionList/Divider'
-import {ActionListContainerContext} from './ActionList/ActionListContainerContext'
-import {Button, ButtonProps} from './Button'
-import {useId} from './hooks/useId'
-import {MandateProps} from './utils/types'
-import {ForwardRefComponent as PolymorphicForwardRefComponent} from './utils/polymorphic'
-
-export type MenuContextProps = Pick<
-  AnchoredOverlayProps,
-  'anchorRef' | 'renderAnchor' | 'open' | 'onOpen' | 'anchorId'
-> & {
-  onClose?: (gesture: 'anchor-click' | 'click-outside' | 'escape' | 'tab') => void
-}
-const MenuContext = React.createContext<MenuContextProps>({renderAnchor: null, open: false})
-
-export type ActionMenuProps = {
-  /**
-   * Recommended: `ActionMenu.Button` or `ActionMenu.Anchor` with `ActionMenu.Overlay`
-   */
-  children: React.ReactElement[] | React.ReactElement
-
-  /**
-   * If defined, will control the open/closed state of the overlay. Must be used in conjunction with `onOpenChange`.
-   */
-  open?: boolean
-
-  /**
-   * If defined, will control the open/closed state of the overlay. Must be used in conjunction with `open`.
-   */
-  onOpenChange?: (s: boolean) => void
-} & Pick<AnchoredOverlayProps, 'anchorRef'>
-
-const Menu: React.FC<React.PropsWithChildren<ActionMenuProps>> = ({
-  anchorRef: externalAnchorRef,
-  open,
-  onOpenChange,
-  children,
-}: ActionMenuProps) => {
-  const [combinedOpenState, setCombinedOpenState] = useProvidedStateOrCreate(open, onOpenChange, false)
-  const onOpen = React.useCallback(() => setCombinedOpenState(true), [setCombinedOpenState])
-  const onClose = React.useCallback(() => setCombinedOpenState(false), [setCombinedOpenState])
-
-  const anchorRef = useProvidedRefOrCreate(externalAnchorRef)
-  const anchorId = useId()
-  let renderAnchor: AnchoredOverlayProps['renderAnchor'] = null
-
-  // 🚨 Hack for good API!
-  // we strip out Anchor from children and pass it to AnchoredOverlay to render
-  // with additional props for accessibility
-  const contents = React.Children.map(children, child => {
-    if (child.type === MenuButton || child.type === Anchor) {
-      renderAnchor = anchorProps => React.cloneElement(child, anchorProps)
-      return null
-    }
-    return child
-  })
-
-  return (
-    <MenuContext.Provider value={{anchorRef, renderAnchor, anchorId, open: combinedOpenState, onOpen, onClose}}>
-      {contents}
-    </MenuContext.Provider>
-  )
-}
-
-export type ActionMenuAnchorProps = {children: React.ReactElement}
-const Anchor = React.forwardRef<HTMLElement, ActionMenuAnchorProps>(({children, ...anchorProps}, anchorRef) => {
-  return React.cloneElement(children, {...anchorProps, ref: anchorRef})
-})
-
-/** this component is syntactical sugar 🍭 */
-export type ActionMenuButtonProps = ButtonProps
-const MenuButton = React.forwardRef(({...props}, anchorRef) => {
-  return (
-    <Anchor ref={anchorRef}>
-      <Button type="button" trailingAction={TriangleDownIcon} {...props} />
-    </Anchor>
-  )
-}) as PolymorphicForwardRefComponent<'button', ActionMenuButtonProps>
-
-type MenuOverlayProps = Partial<OverlayProps> &
-  Pick<AnchoredOverlayProps, 'align'> & {
-    /**
-     * Recommended: `ActionList`
-     */
-    children: React.ReactNode
-  }
-const Overlay: React.FC<React.PropsWithChildren<MenuOverlayProps>> = ({
-  children,
-  align = 'start',
-  'aria-labelledby': ariaLabelledby,
-  ...overlayProps
-}) => {
-  // we typecast anchorRef as required instead of optional
-  // because we know that we're setting it in context in Menu
-  const {anchorRef, renderAnchor, anchorId, open, onOpen, onClose} = React.useContext(MenuContext) as MandateProps<
-    MenuContextProps,
-    'anchorRef'
-  >
-
-  const containerRef = React.useRef<HTMLDivElement>(null)
-  useMenuKeyboardNavigation(open, onClose, containerRef, anchorRef)
-
-  return (
-    <AnchoredOverlay
-      anchorRef={anchorRef}
-      renderAnchor={renderAnchor}
-      anchorId={anchorId}
-      open={open}
-      onOpen={onOpen}
-      onClose={onClose}
-      align={align}
-      overlayProps={overlayProps}
-      focusZoneSettings={{focusOutBehavior: 'wrap'}}
-    >
-      <div ref={containerRef}>
-        <ActionListContainerContext.Provider
-          value={{
-            container: 'ActionMenu',
-            listRole: 'menu',
-            listLabelledBy: ariaLabelledby || anchorId,
-            selectionAttribute: 'aria-checked', // Should this be here?
-            afterSelect: onClose,
-          }}
-        >
-          {children}
-        </ActionListContainerContext.Provider>
-      </div>
-    </AnchoredOverlay>
-  )
-}
-
-Menu.displayName = 'ActionMenu'
-export const ActionMenu = Object.assign(Menu, {Button: MenuButton, Anchor, Overlay, Divider})
diff --git a/src/ActionMenu/ActionMenu.examples.stories.tsx b/src/ActionMenu/ActionMenu.examples.stories.tsx
index 206f3c36abc..f7391545f4a 100644
--- a/src/ActionMenu/ActionMenu.examples.stories.tsx
+++ b/src/ActionMenu/ActionMenu.examples.stories.tsx
@@ -35,40 +35,40 @@ export const GroupsAndDescriptions = () => {
       </ActionMenu.Button>
       <ActionMenu.Overlay width="medium">
         <ActionList selectionVariant="single" showDividers>
-          <ActionList.Group title="Open">
-            {milestones
-              .filter(milestone => !milestone.name.includes('21'))
-              .map((milestone, index) => (
-                <ActionList.Item
-                  key={index}
-                  selected={milestone.name === selectedMilestone?.name}
-                  onSelect={() => setSelectedMilestone(milestone)}
-                >
-                  <ActionList.LeadingVisual>
-                    <MilestoneIcon />
-                  </ActionList.LeadingVisual>
-                  {milestone.name}
-                  <ActionList.Description variant="block">Due by {milestone.due}</ActionList.Description>
-                </ActionList.Item>
-              ))}
-          </ActionList.Group>
-          <ActionList.Group title="Closed">
-            {milestones
-              .filter(milestone => milestone.name.includes('21'))
-              .map((milestone, index) => (
-                <ActionList.Item
-                  key={index}
-                  selected={milestone.name === selectedMilestone?.name}
-                  onSelect={() => setSelectedMilestone(milestone)}
-                >
-                  <ActionList.LeadingVisual>
-                    <MilestoneIcon />
-                  </ActionList.LeadingVisual>
-                  {milestone.name}
-                  <ActionList.Description variant="block">Due by {milestone.due}</ActionList.Description>
-                </ActionList.Item>
-              ))}
-          </ActionList.Group>
+          <ActionList.Heading title="Open" />
+          {milestones
+            .filter(milestone => !milestone.name.includes('21'))
+            .map((milestone, index) => (
+              <ActionList.Item
+                key={index}
+                selected={milestone.name === selectedMilestone?.name}
+                onSelect={() => setSelectedMilestone(milestone)}
+              >
+                <ActionList.LeadingVisual>
+                  <MilestoneIcon />
+                </ActionList.LeadingVisual>
+                {milestone.name}
+                <ActionList.Description variant="block">Due by {milestone.due}</ActionList.Description>
+              </ActionList.Item>
+            ))}
+        </ActionList>
+        <ActionList sx={{paddingTop: 0}} selectionVariant="single">
+          <ActionList.Heading title="Closed" />
+          {milestones
+            .filter(milestone => milestone.name.includes('21'))
+            .map((milestone, index) => (
+              <ActionList.Item
+                key={index}
+                selected={milestone.name === selectedMilestone?.name}
+                onSelect={() => setSelectedMilestone(milestone)}
+              >
+                <ActionList.LeadingVisual>
+                  <MilestoneIcon />
+                </ActionList.LeadingVisual>
+                {milestone.name}
+                <ActionList.Description variant="block">Due by {milestone.due}</ActionList.Description>
+              </ActionList.Item>
+            ))}
         </ActionList>
       </ActionMenu.Overlay>
     </ActionMenu>
@@ -205,27 +205,25 @@ export const MixedSelection = () => {
         {selectedOption ? `Group by ${selectedOption.text}` : 'Group items by'}
       </ActionMenu.Button>
       <ActionMenu.Overlay width="medium">
+        <ActionList selectionVariant="single">
+          <ActionList.Heading title="Group by" />
+          {options.map((option, index) => (
+            <ActionList.Item key={index} selected={index === selectedIndex} onSelect={() => setSelectedIndex(index)}>
+              <ActionList.LeadingVisual>
+                <option.icon />
+              </ActionList.LeadingVisual>
+              {option.text}
+            </ActionList.Item>
+          ))}
+        </ActionList>
         <ActionList>
-          <ActionList.Group selectionVariant="single" title="Group by">
-            {options.map((option, index) => (
-              <ActionList.Item key={index} selected={index === selectedIndex} onSelect={() => setSelectedIndex(index)}>
-                <ActionList.LeadingVisual>
-                  <option.icon />
-                </ActionList.LeadingVisual>
-                {option.text}
-              </ActionList.Item>
-            ))}
-          </ActionList.Group>
           {typeof selectedIndex === 'number' && (
-            <ActionList.Group>
-              <ActionList.Divider />
-              <ActionList.Item onSelect={() => setSelectedIndex(null)}>
-                <ActionList.LeadingVisual>
-                  <XIcon />
-                </ActionList.LeadingVisual>
-                Clear Group by
-              </ActionList.Item>
-            </ActionList.Group>
+            <ActionList.Item onSelect={() => setSelectedIndex(null)}>
+              <ActionList.LeadingVisual>
+                <XIcon />
+              </ActionList.LeadingVisual>
+              Clear Group by
+            </ActionList.Item>
           )}
         </ActionList>
       </ActionMenu.Overlay>
@@ -244,29 +242,31 @@ export const MultipleSections = () => {
         <IconButton icon={KebabHorizontalIcon} aria-label="Open menu" />
       </ActionMenu.Anchor>
       <ActionMenu.Overlay width="small">
-        <ActionList>
-          <ActionList.Group title="Raw file content">
-            <ActionList.Item onSelect={() => alert('Workflows clicked')}>Download</ActionList.Item>
-            <ActionList.Divider />
-            <ActionList.Item onSelect={() => alert('Workflows clicked')}>Jump to line</ActionList.Item>
-            <ActionList.Item onSelect={() => alert('Workflows clicked')}>Find in file</ActionList.Item>
-            <ActionList.Divider />
-            <ActionList.Item onSelect={() => alert('Workflows clicked')}>Copy path</ActionList.Item>
-            <ActionList.Item onSelect={() => alert('Workflows clicked')}>Copy permalink</ActionList.Item>
-          </ActionList.Group>
+        <ActionList aria-busy="true">
+          <ActionList.Heading title="Raw file content" />
+          <ActionList.Item onSelect={() => alert('Workflows clicked')}>Download</ActionList.Item>
           <ActionList.Divider />
-          <ActionList.Group title="View options" selectionVariant="multiple">
-            {items.map((item, index) => (
-              <ActionList.Item
-                key={index}
-                selected={item.name === selectedMilestone?.name}
-                onSelect={() => setSelectedMilestone(item)}
-              >
-                {item.name}
-              </ActionList.Item>
-            ))}
-          </ActionList.Group>
+          <ActionList.Item onSelect={() => alert('Workflows clicked')}>Jump to line</ActionList.Item>
+          <ActionList.Item onSelect={() => alert('Workflows clicked')}>Find in file</ActionList.Item>
           <ActionList.Divider />
+          <ActionList.Item onSelect={() => alert('Workflows clicked')}>Copy path</ActionList.Item>
+          <ActionList.Item onSelect={() => alert('Workflows clicked')}>Copy permalink</ActionList.Item>
+        </ActionList>
+        <ActionList.Divider sx={{marginBottom: 0}} />
+        <ActionList selectionVariant="multiple">
+          <ActionList.Heading title="View options" />
+          {items.map((item, index) => (
+            <ActionList.Item
+              key={index}
+              selected={item.name === selectedMilestone?.name}
+              onSelect={() => setSelectedMilestone(item)}
+            >
+              {item.name}
+            </ActionList.Item>
+          ))}
+        </ActionList>
+        <ActionList.Divider sx={{marginBottom: 0}} />
+        <ActionList>
           <ActionList.Item onSelect={() => alert('Delete file')} variant="danger">
             Delete file
           </ActionList.Item>
diff --git a/src/ActionMenu/ActionMenu.features.stories.tsx b/src/ActionMenu/ActionMenu.features.stories.tsx
index 2e0eb571078..dd8283aded5 100644
--- a/src/ActionMenu/ActionMenu.features.stories.tsx
+++ b/src/ActionMenu/ActionMenu.features.stories.tsx
@@ -35,27 +35,27 @@ export const LinksAndActions = () => (
             <CopyIcon />
           </ActionList.LeadingVisual>
         </ActionList.Item>
-        <ActionList.Divider />
-        <ActionList.Group title="Github projects">
-          <ActionList.LinkItem href="/">
-            What&apos;s new
-            <ActionList.LeadingVisual>
-              <RocketIcon />
-            </ActionList.LeadingVisual>
-          </ActionList.LinkItem>
-          <ActionList.LinkItem href="/">
-            Give feedback
-            <ActionList.LeadingVisual>
-              <CommentIcon />
-            </ActionList.LeadingVisual>
-          </ActionList.LinkItem>
-          <ActionList.LinkItem href="/">
-            GitHub Docs
-            <ActionList.LeadingVisual>
-              <BookIcon />
-            </ActionList.LeadingVisual>
-          </ActionList.LinkItem>
-        </ActionList.Group>
+      </ActionList>
+      <ActionList>
+        <ActionList.Heading title="Github projects" />
+        <ActionList.LinkItem href="/">
+          What&apos;s new
+          <ActionList.LeadingVisual>
+            <RocketIcon />
+          </ActionList.LeadingVisual>
+        </ActionList.LinkItem>
+        <ActionList.LinkItem href="/">
+          Give feedback
+          <ActionList.LeadingVisual>
+            <CommentIcon />
+          </ActionList.LeadingVisual>
+        </ActionList.LinkItem>
+        <ActionList.LinkItem href="/">
+          GitHub Docs
+          <ActionList.LeadingVisual>
+            <BookIcon />
+          </ActionList.LeadingVisual>
+        </ActionList.LinkItem>
       </ActionList>
     </ActionMenu.Overlay>
   </ActionMenu>
diff --git a/src/ActionMenu/ActionMenu.tsx b/src/ActionMenu/ActionMenu.tsx
index 57495318a4a..c886551b9c0 100644
--- a/src/ActionMenu/ActionMenu.tsx
+++ b/src/ActionMenu/ActionMenu.tsx
@@ -16,7 +16,7 @@ export type MenuContextProps = Pick<
 > & {
   onClose?: (gesture: 'anchor-click' | 'click-outside' | 'escape' | 'tab') => void
 }
-const MenuContext = React.createContext<MenuContextProps>({renderAnchor: null, open: false})
+export const MenuContext = React.createContext<MenuContextProps>({renderAnchor: null, open: false})
 
 export type ActionMenuProps = {
   /**
diff --git a/src/__tests__/ActionMenu.test.tsx b/src/ActionMenu/__tests__/ActionMenu.test.tsx
similarity index 96%
rename from src/__tests__/ActionMenu.test.tsx
rename to src/ActionMenu/__tests__/ActionMenu.test.tsx
index bf33d15c491..fe1e72feb1c 100644
--- a/src/__tests__/ActionMenu.test.tsx
+++ b/src/ActionMenu/__tests__/ActionMenu.test.tsx
@@ -2,11 +2,12 @@ import {render as HTMLRender, waitFor} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import {axe, toHaveNoViolations} from 'jest-axe'
 import React from 'react'
-import theme from '../theme'
-import {ActionMenu, ActionList, BaseStyles, ThemeProvider, SSRProvider} from '..'
-import {behavesAsComponent, checkExports} from '../utils/testing'
-import {SingleSelect} from '../ActionMenu/ActionMenu.features.stories'
-import {MixedSelection} from '../ActionMenu/ActionMenu.examples.stories'
+import theme from '../../theme'
+import {ActionMenu, ActionList, BaseStyles, ThemeProvider, SSRProvider} from '../..'
+import {MenuContext} from '../ActionMenu'
+import {behavesAsComponent, checkExports} from '../../utils/testing'
+import {SingleSelect} from '../ActionMenu.features.stories'
+import {MixedSelection} from '../ActionMenu.examples.stories'
 expect.extend(toHaveNoViolations)
 
 function Example(): JSX.Element {
@@ -47,6 +48,7 @@ describe('ActionMenu', () => {
   checkExports('ActionMenu', {
     default: undefined,
     ActionMenu,
+    MenuContext,
   })
 
   it('should open Menu on MenuButton click', async () => {
diff --git a/src/__tests__/ActionMenu.types.test.tsx b/src/ActionMenu/__tests__/ActionMenu.types.test.tsx
similarity index 94%
rename from src/__tests__/ActionMenu.types.test.tsx
rename to src/ActionMenu/__tests__/ActionMenu.types.test.tsx
index 38e954a5754..967d0633a36 100644
--- a/src/__tests__/ActionMenu.types.test.tsx
+++ b/src/ActionMenu/__tests__/ActionMenu.types.test.tsx
@@ -1,4 +1,4 @@
-import {ActionMenu} from '..'
+import {ActionMenu} from '../..'
 import React from 'react'
 
 export function actionButtonWithoutProps() {
diff --git a/src/NavList/NavList.stories.tsx b/src/NavList/NavList.stories.tsx
index 91286257310..9af62a887ee 100644
--- a/src/NavList/NavList.stories.tsx
+++ b/src/NavList/NavList.stories.tsx
@@ -26,6 +26,23 @@ export const Simple: Story = () => (
   </PageLayout>
 )
 
+export const WithGroup: Story = () => (
+  <NavList>
+    <NavList.Group title="Group 1">
+      <NavList.Item href="#" aria-current="page">
+        Item 1
+      </NavList.Item>
+      <NavList.Item href="#">Item 2</NavList.Item>
+      <NavList.Item href="#">Item 3</NavList.Item>
+    </NavList.Group>
+    <NavList.Group title="Group 2">
+      <NavList.Item href="#">Item 4</NavList.Item>
+      <NavList.Item href="#">Item 5</NavList.Item>
+      <NavList.Item href="#">Item 6</NavList.Item>
+    </NavList.Group>
+  </NavList>
+)
+
 export const WithSubItems: Story = () => (
   <PageLayout>
     <PageLayout.Pane position="start">
diff --git a/src/NavList/NavList.test.tsx b/src/NavList/NavList.test.tsx
index ee4fa595285..46a6968b912 100644
--- a/src/NavList/NavList.test.tsx
+++ b/src/NavList/NavList.test.tsx
@@ -211,7 +211,7 @@ describe('NavList.Item with NavList.SubNav', () => {
       </ThemeProvider>,
     )
 
-    const button = getByRole('button')
+    const button = getByRole('button', {name: 'Item'})
 
     // Starts open
     expect(queryByRole('list', {name: 'Item'})).toBeVisible()
diff --git a/src/NavList/NavList.tsx b/src/NavList/NavList.tsx
index a90a849f64e..086ef324715 100644
--- a/src/NavList/NavList.tsx
+++ b/src/NavList/NavList.tsx
@@ -252,10 +252,13 @@ const Group: React.FC<NavListGroupProps> = ({title, children, sx: sxProp = defau
   return (
     <>
       {/* Hide divider if the group is the first item in the list */}
-      <ActionList.Divider sx={{'&:first-child': {display: 'none'}}} />
-      <ActionList.Group {...props} title={title} sx={sxProp}>
-        {children}
-      </ActionList.Group>
+      <ActionList.Divider sx={{'&:first-of-type': {display: 'none'}}} />
+      <Box as="li" sx={sxProp} {...props}>
+        {title && <ActionList.Heading title={title} />}
+        <Box as="ul" sx={{paddingInlineStart: 0}}>
+          {children}
+        </Box>
+      </Box>
     </>
   )
 }
diff --git a/src/index.ts b/src/index.ts
index 7e0c5596576..ce77575e8af 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -49,6 +49,7 @@ export type {RadioProps} from './Radio'
 export {ActionList} from './ActionList'
 export type {
   ActionListProps,
+  ActionListHeadingProps,
   ActionListGroupProps,
   ActionListItemProps,
   ActionListLinkItemProps,

From 57579cad0bc09271482044db927f447bb38998c3 Mon Sep 17 00:00:00 2001
From: broccolinisoup <broccolinisoup@users.noreply.github.com>
Date: Wed, 5 Jul 2023 03:04:34 +0000
Subject: [PATCH 2/4] Update generated/components.json

---
 generated/components.json | 44 +++++++++++++--------------------------
 1 file changed, 15 insertions(+), 29 deletions(-)

diff --git a/generated/components.json b/generated/components.json
index 62af5523183..7e8b2b2cea5 100644
--- a/generated/components.json
+++ b/generated/components.json
@@ -108,7 +108,7 @@
       "props": [
         {
           "name": "children",
-          "type": "ActionList.Item[] | ActionList.LinkItem[] | ActionList.Group[]",
+          "type": "ActionList.Item[] | ActionList.LinkItem[] | ActionList.Divider[]",
           "defaultValue": "",
           "required": true,
           "description": ""
@@ -285,48 +285,34 @@
           ]
         },
         {
-          "name": "ActionList.Group",
+          "name": "ActionList.Heading",
           "props": [
             {
-              "name": "children",
-              "type": "ActionList.Item[] | ActionList.LinkItem[]",
-              "defaultValue": "",
-              "required": true,
+              "name": "variant",
+              "type": "'subtle' | 'filled'",
+              "defaultValue": "subtle",
               "description": ""
             },
             {
               "name": "title",
               "type": "string",
               "defaultValue": "",
-              "description": "Title of the group."
+              "required": true,
+              "description": ""
             },
             {
-              "name": "auxiliaryText",
+              "name": "subtitle",
               "type": "string",
               "defaultValue": "",
-              "description": "Secondary text that provides additional information about the group."
-            },
-            {
-              "name": "variant",
-              "type": "'filled' | 'subtle'",
-              "defaultValue": "'subtle'",
-              "description": "`inline` descriptions are positioned beside primary text. `block` descriptions are positioned below primary text."
-            },
-            {
-              "name": "selectionVariant",
-              "type": "'single' | 'multiple' | false",
-              "defaultValue": "",
-              "description": "Set `selectionVariant` at the group level."
-            },
-            {
-              "name": "role",
-              "type": "AriaRole",
-              "defaultValue": "",
-              "description": "ARIA role describing the function of the list inside the group. `listbox` and `menu` are a common values."
+              "required": false,
+              "description": ""
             },
             {
-              "name": "sx",
-              "type": "SystemStyleObject"
+              "name": "headingLevel",
+              "type": "'1' | '2' | '3' | '4' | '5' | '6'",
+              "defaultValue": "3",
+              "required": false,
+              "description": ""
             }
           ]
         }

From 67afd632b8257a0cf3330059094e2989a18b4fb0 Mon Sep 17 00:00:00 2001
From: Armagan Ersoz <broccolinisoup@github.com>
Date: Wed, 5 Jul 2023 13:16:33 +1000
Subject: [PATCH 3/4] docs

---
 docs/content/ActionList.mdx |  17 +++---
 docs/content/ActionMenu.mdx | 101 +++++++++++++++++-------------------
 2 files changed, 58 insertions(+), 60 deletions(-)

diff --git a/docs/content/ActionList.mdx b/docs/content/ActionList.mdx
index e4518d0d151..724f3cb2c31 100644
--- a/docs/content/ActionList.mdx
+++ b/docs/content/ActionList.mdx
@@ -170,7 +170,7 @@ When you want to add links to the List instead of actions, use `ActionList.LinkI
 </ActionList>
 ```
 
-### With groups
+### With headings
 
 ```javascript live noinline
 const SelectFields = () => {
@@ -196,29 +196,30 @@ const SelectFields = () => {
   }
 
   return (
-    <ActionList selectionVariant="multiple">
-      <ActionList.Group title="Visible fields">
+    <>
+      <ActionList selectionVariant="multiple">
+        <ActionList.Heading title="Visible fields" />
         {visibleOptions.map(option => (
           <ActionList.Item key={option.text} selected={true} onSelect={() => toggle(option.text)}>
             {option.text}
           </ActionList.Item>
         ))}
-      </ActionList.Group>
-      <ActionList.Group
-        title="Hidden fields"
+      </ActionList>
+      <ActionList
         selectionVariant={
           /** selectionVariant override on Group: disable selection if there are no options */
           hiddenOptions.length ? 'multiple' : false
         }
       >
+        <ActionList.Heading title="Hidden fields" />
         {hiddenOptions.map((option, index) => (
           <ActionList.Item key={option.text} selected={false} onSelect={() => toggle(option.text)}>
             {option.text}
           </ActionList.Item>
         ))}
         {hiddenOptions.length === 0 && <ActionList.Item disabled>No hidden fields</ActionList.Item>}
-      </ActionList.Group>
-    </ActionList>
+      </ActionList>
+    </>
   )
 }
 
diff --git a/docs/content/ActionMenu.mdx b/docs/content/ActionMenu.mdx
index 26e4e9386b2..9a950ec9e65 100644
--- a/docs/content/ActionMenu.mdx
+++ b/docs/content/ActionMenu.mdx
@@ -110,7 +110,7 @@ You can choose to have a different _anchor_ for the Menu depending on the applic
 </ActionMenu>
 ```
 
-### With Groups
+### Divided into sections
 
 ```jsx live
 <ActionMenu>
@@ -118,57 +118,54 @@ You can choose to have a different _anchor_ for the Menu depending on the applic
 
   <ActionMenu.Overlay>
     <ActionList showDividers>
-      <ActionList.Group title="Live query">
-        <ActionList.Item>
-          <ActionList.LeadingVisual>
-            <SearchIcon />
-          </ActionList.LeadingVisual>
-          repo:github/memex,github/github
-        </ActionList.Item>
-      </ActionList.Group>
-      <ActionList.Divider />
-      <ActionList.Group title="Layout" variant="subtle">
-        <ActionList.Item>
-          <ActionList.LeadingVisual>
-            <NoteIcon />
-          </ActionList.LeadingVisual>
-          Table
-          <ActionList.Description variant="block">
-            Information-dense table optimized for operations across teams
-          </ActionList.Description>
-        </ActionList.Item>
-        <ActionList.Item role="listitem">
-          <ActionList.LeadingVisual>
-            <ProjectIcon />
-          </ActionList.LeadingVisual>
-          Board
-          <ActionList.Description variant="block">Kanban-style board focused on visual states</ActionList.Description>
-        </ActionList.Item>
-      </ActionList.Group>
-      <ActionList.Divider />
-      <ActionList.Group>
-        <ActionList.Item>
-          <ActionList.LeadingVisual>
-            <FilterIcon />
-          </ActionList.LeadingVisual>
-          Save sort and filters to current view
-        </ActionList.Item>
-        <ActionList.Item>
-          <ActionList.LeadingVisual>
-            <FilterIcon />
-          </ActionList.LeadingVisual>
-          Save sort and filters to new view
-        </ActionList.Item>
-      </ActionList.Group>
-      <ActionList.Divider />
-      <ActionList.Group>
-        <ActionList.Item>
-          <ActionList.LeadingVisual>
-            <GearIcon />
-          </ActionList.LeadingVisual>
-          View settings
-        </ActionList.Item>
-      </ActionList.Group>
+      <ActionList.Heading title="Live query" />
+      <ActionList.Item>
+        <ActionList.LeadingVisual>
+          <SearchIcon />
+        </ActionList.LeadingVisual>
+        repo:github/memex,github/github
+      </ActionList.Item>
+    </ActionList>
+    <ActionList showDividers>
+      <ActionList.Heading title="Layout" variant="subtle" />
+      <ActionList.Item>
+        <ActionList.LeadingVisual>
+          <NoteIcon />
+        </ActionList.LeadingVisual>
+        Table
+        <ActionList.Description variant="block">
+          Information-dense table optimized for operations across teams
+        </ActionList.Description>
+      </ActionList.Item>
+      <ActionList.Item role="listitem">
+        <ActionList.LeadingVisual>
+          <ProjectIcon />
+        </ActionList.LeadingVisual>
+        Board
+        <ActionList.Description variant="block">Kanban-style board focused on visual states</ActionList.Description>
+      </ActionList.Item>
+    </ActionList>
+    <ActionList showDividers>
+      <ActionList.Item>
+        <ActionList.LeadingVisual>
+          <FilterIcon />
+        </ActionList.LeadingVisual>
+        Save sort and filters to current view
+      </ActionList.Item>
+      <ActionList.Item>
+        <ActionList.LeadingVisual>
+          <FilterIcon />
+        </ActionList.LeadingVisual>
+        Save sort and filters to new view
+      </ActionList.Item>
+    </ActionList>
+    <ActionList>
+      <ActionList.Item>
+        <ActionList.LeadingVisual>
+          <GearIcon />
+        </ActionList.LeadingVisual>
+        View settings
+      </ActionList.Item>
     </ActionList>
   </ActionMenu.Overlay>
 </ActionMenu>

From 34c738b84bc95801274bbb1298cad2f80381a1b4 Mon Sep 17 00:00:00 2001
From: Armagan Ersoz <broccolinisoup@github.com>
Date: Wed, 5 Jul 2023 13:35:42 +1000
Subject: [PATCH 4/4] tests and snaps

---
 .../__snapshots__/ActionMenu.test.tsx.snap    |    0
 .../__snapshots__/NavList.test.tsx.snap       | 1110 +++++++++--------
 src/__tests__/ActionList.test.tsx             |    2 +-
 .../__snapshots__/ActionList.test.tsx.snap    |   15 +-
 4 files changed, 631 insertions(+), 496 deletions(-)
 rename src/{ => ActionMenu}/__tests__/__snapshots__/ActionMenu.test.tsx.snap (100%)

diff --git a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap b/src/ActionMenu/__tests__/__snapshots__/ActionMenu.test.tsx.snap
similarity index 100%
rename from src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
rename to src/ActionMenu/__tests__/__snapshots__/ActionMenu.test.tsx.snap
diff --git a/src/NavList/__snapshots__/NavList.test.tsx.snap b/src/NavList/__snapshots__/NavList.test.tsx.snap
index bb5474bed47..3fa5bca0e78 100644
--- a/src/NavList/__snapshots__/NavList.test.tsx.snap
+++ b/src/NavList/__snapshots__/NavList.test.tsx.snap
@@ -1,7 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`NavList renders a simple list 1`] = `
-.c4 {
+.c0 {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -14,9 +19,15 @@ exports[`NavList renders a simple list 1`] = `
   -ms-flex-positive: 1;
   flex-grow: 1;
   min-width: 0;
+  border-style: none;
+  background-color: transparent;
+  cursor: inherit;
+  font-size: inherit;
+  color: #1F2328;
+  line-height: 20px;
 }
 
-.c5 {
+.c6 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -24,14 +35,12 @@ exports[`NavList renders a simple list 1`] = `
   font-weight: 400;
 }
 
-.c0 {
+.c1 {
   margin: 0;
   padding-inline-start: 0;
-  padding-top: 8px;
-  padding-bottom: 8px;
 }
 
-.c2 {
+.c3 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -65,15 +74,15 @@ exports[`NavList renders a simple list 1`] = `
   background-color: rgba(208,215,222,0.24);
 }
 
-.c2[aria-disabled] {
+.c3[aria-disabled] {
   cursor: not-allowed;
 }
 
-.c2 [data-component="ActionList.Item--DividerContainer"] {
+.c3 [data-component="ActionList.Item--DividerContainer"] {
   position: relative;
 }
 
-.c2 [data-component="ActionList.Item--DividerContainer"]::before {
+.c3 [data-component="ActionList.Item--DividerContainer"]::before {
   content: " ";
   display: block;
   position: absolute;
@@ -84,27 +93,32 @@ exports[`NavList renders a simple list 1`] = `
   border-color: var(--divider-color,transparent);
 }
 
-.c2:not(:first-of-type) {
+.c3 button[data-component="ActionList.Item--DividerContainer"] {
+  text-align: left;
+  padding: 0;
+}
+
+.c3:not(:first-of-type) {
   --divider-color: rgba(208,215,222,0.48);
 }
 
-[data-component="ActionList.Divider"] + .c2 {
+[data-component="ActionList.Divider"] + .c3 {
   --divider-color: transparent !important;
 }
 
-.c2:hover:not([aria-disabled]),
-.c2:focus:not([aria-disabled]),
-.c2[data-focus-visible-added]:not([aria-disabled]) {
+.c3:hover:not([aria-disabled]),
+.c3:focus:not([aria-disabled]),
+.c3[data-focus-visible-added]:not([aria-disabled]) {
   --divider-color: transparent;
 }
 
-.c2:hover:not([aria-disabled]) + .c1,
-.c2:focus:not([aria-disabled]) + .c2,
-.c2[data-focus-visible-added] + li {
+.c3:hover:not([aria-disabled]) + .c2,
+.c3:focus:not([aria-disabled]) + .c3,
+.c3[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c2::after {
+.c3::after {
   position: absolute;
   top: calc(50% - 12px);
   left: -8px;
@@ -115,7 +129,7 @@ exports[`NavList renders a simple list 1`] = `
   border-radius: 6px;
 }
 
-.c6 {
+.c7 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -147,15 +161,15 @@ exports[`NavList renders a simple list 1`] = `
   margin-bottom: unset;
 }
 
-.c6[aria-disabled] {
+.c7[aria-disabled] {
   cursor: not-allowed;
 }
 
-.c6 [data-component="ActionList.Item--DividerContainer"] {
+.c7 [data-component="ActionList.Item--DividerContainer"] {
   position: relative;
 }
 
-.c6 [data-component="ActionList.Item--DividerContainer"]::before {
+.c7 [data-component="ActionList.Item--DividerContainer"]::before {
   content: " ";
   display: block;
   position: absolute;
@@ -166,27 +180,32 @@ exports[`NavList renders a simple list 1`] = `
   border-color: var(--divider-color,transparent);
 }
 
-.c6:not(:first-of-type) {
+.c7 button[data-component="ActionList.Item--DividerContainer"] {
+  text-align: left;
+  padding: 0;
+}
+
+.c7:not(:first-of-type) {
   --divider-color: rgba(208,215,222,0.48);
 }
 
-[data-component="ActionList.Divider"] + .c6 {
+[data-component="ActionList.Divider"] + .c7 {
   --divider-color: transparent !important;
 }
 
-.c6:hover:not([aria-disabled]),
-.c6:focus:not([aria-disabled]),
-.c6[data-focus-visible-added]:not([aria-disabled]) {
+.c7:hover:not([aria-disabled]),
+.c7:focus:not([aria-disabled]),
+.c7[data-focus-visible-added]:not([aria-disabled]) {
   --divider-color: transparent;
 }
 
-.c6:hover:not([aria-disabled]) + .c1,
-.c6:focus:not([aria-disabled]) + .c6,
-.c6[data-focus-visible-added] + li {
+.c7:hover:not([aria-disabled]) + .c2,
+.c7:focus:not([aria-disabled]) + .c7,
+.c7[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c3 {
+.c4 {
   color: #0969da;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -206,12 +225,12 @@ exports[`NavList renders a simple list 1`] = `
   color: inherit;
 }
 
-.c3:hover {
+.c4:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.c3:is(button) {
+.c4:is(button) {
   display: inline-block;
   padding: 0;
   font-size: inherit;
@@ -228,58 +247,58 @@ exports[`NavList renders a simple list 1`] = `
   appearance: none;
 }
 
-.c3:hover {
+.c4:hover {
   color: inherit;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c2:hover:not([aria-disabled]) {
+  .c3:hover:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.32);
     color: #1F2328;
   }
 
-  .c2:focus-visible,
-  .c2 > a:focus-visible {
+  .c3:focus-visible,
+  .c3 > a:focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px #0969da;
   }
 
-  .c2:active:not([aria-disabled]) {
+  .c3:active:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.48);
     color: #1F2328;
   }
 }
 
 @media (forced-colors:active) {
-  .c2:focus {
+  .c3:focus {
     outline: solid 1px transparent !important;
   }
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c6:hover:not([aria-disabled]) {
+  .c7:hover:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.32);
     color: #1F2328;
   }
 
-  .c6:focus-visible,
-  .c6 > a:focus-visible {
+  .c7:focus-visible,
+  .c7 > a:focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px #0969da;
   }
 
-  .c6:active:not([aria-disabled]) {
+  .c7:active:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.48);
     color: #1F2328;
   }
 }
 
 @media (forced-colors:active) {
-  .c6:focus {
+  .c7:focus {
     outline: solid 1px transparent !important;
   }
 }
@@ -288,83 +307,92 @@ exports[`NavList renders a simple list 1`] = `
   <nav
     class=""
   >
-    <ul
+    <div
       class="c0"
     >
-      <li
-        class="c1 c2"
+      <ul
+        class="c1"
       >
-        <a
-          aria-current="page"
-          aria-labelledby="react-aria-1 "
-          class="c3"
-          href="/"
-          tabindex="0"
+        <li
+          class="c2 c3"
         >
-          <div
+          <a
+            aria-current="page"
+            aria-labelledby="react-aria-2 "
             class="c4"
-            data-component="ActionList.Item--DividerContainer"
+            href="/"
+            tabindex="0"
           >
-            <span
+            <div
               class="c5"
-              id="react-aria-1"
+              data-component="ActionList.Item--DividerContainer"
             >
-              Home
-            </span>
-          </div>
-        </a>
-      </li>
-      <li
-        class="c1 c6"
-      >
-        <a
-          aria-labelledby="react-aria-4 "
-          class="c3"
-          href="/about"
-          tabindex="0"
+              <span
+                class="c6"
+                id="react-aria-2"
+              >
+                Home
+              </span>
+            </div>
+          </a>
+        </li>
+        <li
+          class="c2 c7"
         >
-          <div
+          <a
+            aria-labelledby="react-aria-5 "
             class="c4"
-            data-component="ActionList.Item--DividerContainer"
+            href="/about"
+            tabindex="0"
           >
-            <span
+            <div
               class="c5"
-              id="react-aria-4"
+              data-component="ActionList.Item--DividerContainer"
             >
-              About
-            </span>
-          </div>
-        </a>
-      </li>
-      <li
-        class="c1 c6"
-      >
-        <a
-          aria-labelledby="react-aria-7 "
-          class="c3"
-          href="/contact"
-          tabindex="0"
+              <span
+                class="c6"
+                id="react-aria-5"
+              >
+                About
+              </span>
+            </div>
+          </a>
+        </li>
+        <li
+          class="c2 c7"
         >
-          <div
+          <a
+            aria-labelledby="react-aria-8 "
             class="c4"
-            data-component="ActionList.Item--DividerContainer"
+            href="/contact"
+            tabindex="0"
           >
-            <span
+            <div
               class="c5"
-              id="react-aria-7"
+              data-component="ActionList.Item--DividerContainer"
             >
-              Contact
-            </span>
-          </div>
-        </a>
-      </li>
-    </ul>
+              <span
+                class="c6"
+                id="react-aria-8"
+              >
+                Contact
+              </span>
+            </div>
+          </a>
+        </li>
+      </ul>
+    </div>
   </nav>
 </div>
 `;
 
 exports[`NavList renders with groups 1`] = `
-.c8 {
+.c0 {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -377,9 +405,15 @@ exports[`NavList renders with groups 1`] = `
   -ms-flex-positive: 1;
   flex-grow: 1;
   min-width: 0;
+  border-style: none;
+  background-color: transparent;
+  cursor: inherit;
+  font-size: inherit;
+  color: #1F2328;
+  line-height: 20px;
 }
 
-.c9 {
+.c10 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -387,7 +421,7 @@ exports[`NavList renders with groups 1`] = `
   font-weight: 400;
 }
 
-.c1 {
+.c2 {
   height: 1px;
   background-color: rgba(208,215,222,0.48);
   margin-top: calc(8px - 1px);
@@ -395,18 +429,10 @@ exports[`NavList renders with groups 1`] = `
   list-style: none;
 }
 
-.c1:first-child {
+.c2:first-of-type {
   display: none;
 }
 
-.c2 {
-  list-style: none;
-}
-
-.c2:not(:first-child) {
-  margin-top: 8px;
-}
-
 .c3 {
   padding-top: 6px;
   padding-bottom: 6px;
@@ -415,20 +441,26 @@ exports[`NavList renders with groups 1`] = `
   font-size: 12px;
   font-weight: 600;
   color: #656d76;
+  list-style: none;
 }
 
 .c4 {
+  font-size: 12px;
+  font-weight: 600;
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
+.c5 {
   padding-inline-start: 0;
 }
 
-.c0 {
+.c1 {
   margin: 0;
   padding-inline-start: 0;
-  padding-top: 8px;
-  padding-bottom: 8px;
 }
 
-.c6 {
+.c7 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -462,15 +494,15 @@ exports[`NavList renders with groups 1`] = `
   background-color: rgba(208,215,222,0.24);
 }
 
-.c6[aria-disabled] {
+.c7[aria-disabled] {
   cursor: not-allowed;
 }
 
-.c6 [data-component="ActionList.Item--DividerContainer"] {
+.c7 [data-component="ActionList.Item--DividerContainer"] {
   position: relative;
 }
 
-.c6 [data-component="ActionList.Item--DividerContainer"]::before {
+.c7 [data-component="ActionList.Item--DividerContainer"]::before {
   content: " ";
   display: block;
   position: absolute;
@@ -481,27 +513,32 @@ exports[`NavList renders with groups 1`] = `
   border-color: var(--divider-color,transparent);
 }
 
-.c6:not(:first-of-type) {
+.c7 button[data-component="ActionList.Item--DividerContainer"] {
+  text-align: left;
+  padding: 0;
+}
+
+.c7:not(:first-of-type) {
   --divider-color: rgba(208,215,222,0.48);
 }
 
-[data-component="ActionList.Divider"] + .c6 {
+[data-component="ActionList.Divider"] + .c7 {
   --divider-color: transparent !important;
 }
 
-.c6:hover:not([aria-disabled]),
-.c6:focus:not([aria-disabled]),
-.c6[data-focus-visible-added]:not([aria-disabled]) {
+.c7:hover:not([aria-disabled]),
+.c7:focus:not([aria-disabled]),
+.c7[data-focus-visible-added]:not([aria-disabled]) {
   --divider-color: transparent;
 }
 
-.c6:hover:not([aria-disabled]) + .c5,
-.c6:focus:not([aria-disabled]) + .c6,
-.c6[data-focus-visible-added] + li {
+.c7:hover:not([aria-disabled]) + .c6,
+.c7:focus:not([aria-disabled]) + .c7,
+.c7[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c6::after {
+.c7::after {
   position: absolute;
   top: calc(50% - 12px);
   left: -8px;
@@ -512,7 +549,7 @@ exports[`NavList renders with groups 1`] = `
   border-radius: 6px;
 }
 
-.c10 {
+.c11 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -544,15 +581,15 @@ exports[`NavList renders with groups 1`] = `
   margin-bottom: unset;
 }
 
-.c10[aria-disabled] {
+.c11[aria-disabled] {
   cursor: not-allowed;
 }
 
-.c10 [data-component="ActionList.Item--DividerContainer"] {
+.c11 [data-component="ActionList.Item--DividerContainer"] {
   position: relative;
 }
 
-.c10 [data-component="ActionList.Item--DividerContainer"]::before {
+.c11 [data-component="ActionList.Item--DividerContainer"]::before {
   content: " ";
   display: block;
   position: absolute;
@@ -563,27 +600,32 @@ exports[`NavList renders with groups 1`] = `
   border-color: var(--divider-color,transparent);
 }
 
-.c10:not(:first-of-type) {
+.c11 button[data-component="ActionList.Item--DividerContainer"] {
+  text-align: left;
+  padding: 0;
+}
+
+.c11:not(:first-of-type) {
   --divider-color: rgba(208,215,222,0.48);
 }
 
-[data-component="ActionList.Divider"] + .c10 {
+[data-component="ActionList.Divider"] + .c11 {
   --divider-color: transparent !important;
 }
 
-.c10:hover:not([aria-disabled]),
-.c10:focus:not([aria-disabled]),
-.c10[data-focus-visible-added]:not([aria-disabled]) {
+.c11:hover:not([aria-disabled]),
+.c11:focus:not([aria-disabled]),
+.c11[data-focus-visible-added]:not([aria-disabled]) {
   --divider-color: transparent;
 }
 
-.c10:hover:not([aria-disabled]) + .c5,
-.c10:focus:not([aria-disabled]) + .c10,
-.c10[data-focus-visible-added] + li {
+.c11:hover:not([aria-disabled]) + .c6,
+.c11:focus:not([aria-disabled]) + .c11,
+.c11[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c7 {
+.c8 {
   color: #0969da;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -603,12 +645,12 @@ exports[`NavList renders with groups 1`] = `
   color: inherit;
 }
 
-.c7:hover {
+.c8:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.c7:is(button) {
+.c8:is(button) {
   display: inline-block;
   padding: 0;
   font-size: inherit;
@@ -625,58 +667,58 @@ exports[`NavList renders with groups 1`] = `
   appearance: none;
 }
 
-.c7:hover {
+.c8:hover {
   color: inherit;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c6:hover:not([aria-disabled]) {
+  .c7:hover:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.32);
     color: #1F2328;
   }
 
-  .c6:focus-visible,
-  .c6 > a:focus-visible {
+  .c7:focus-visible,
+  .c7 > a:focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px #0969da;
   }
 
-  .c6:active:not([aria-disabled]) {
+  .c7:active:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.48);
     color: #1F2328;
   }
 }
 
 @media (forced-colors:active) {
-  .c6:focus {
+  .c7:focus {
     outline: solid 1px transparent !important;
   }
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c10:hover:not([aria-disabled]) {
+  .c11:hover:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.32);
     color: #1F2328;
   }
 
-  .c10:focus-visible,
-  .c10 > a:focus-visible {
+  .c11:focus-visible,
+  .c11 > a:focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px #0969da;
   }
 
-  .c10:active:not([aria-disabled]) {
+  .c11:active:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.48);
     color: #1F2328;
   }
 }
 
 @media (forced-colors:active) {
-  .c10:focus {
+  .c11:focus {
     outline: solid 1px transparent !important;
   }
 }
@@ -685,111 +727,118 @@ exports[`NavList renders with groups 1`] = `
   <nav
     class=""
   >
-    <ul
+    <div
       class="c0"
     >
-      <li
-        aria-hidden="true"
+      <ul
         class="c1"
-        data-component="ActionList.Divider"
-      />
-      <li
-        class="c2"
       >
-        <div
+        <li
           aria-hidden="true"
-          class="c3"
-          role="presentation"
+          class="c2"
+          data-component="ActionList.Divider"
+          role="separator"
+        />
+        <li
+          class=""
         >
-          <span
-            id="react-aria-1"
+          <div
+            class="c3"
           >
-            Overview
-          </span>
-        </div>
-        <ul
-          aria-labelledby="react-aria-1"
-          class="c4"
-        >
-          <li
-            class="c5 c6"
+            <h3
+              class="c4"
+              id="react-aria-1"
+            >
+              Overview
+            </h3>
+          </div>
+          <ul
+            class="c5"
           >
-            <a
-              aria-current="page"
-              aria-labelledby="react-aria-2 "
-              class="c7"
-              href="/getting-started"
-              tabindex="0"
+            <li
+              class="c6 c7"
             >
-              <div
+              <a
+                aria-current="page"
+                aria-labelledby="react-aria-2 "
                 class="c8"
-                data-component="ActionList.Item--DividerContainer"
+                href="/getting-started"
+                tabindex="0"
               >
-                <span
+                <div
                   class="c9"
-                  id="react-aria-2"
+                  data-component="ActionList.Item--DividerContainer"
                 >
-                  Getting started
-                </span>
-              </div>
-            </a>
-          </li>
-        </ul>
-      </li>
-      <li
-        aria-hidden="true"
-        class="c1"
-        data-component="ActionList.Divider"
-      />
-      <li
-        class="c2"
-      >
-        <div
+                  <span
+                    class="c10"
+                    id="react-aria-2"
+                  >
+                    Getting started
+                  </span>
+                </div>
+              </a>
+            </li>
+          </ul>
+        </li>
+        <li
           aria-hidden="true"
-          class="c3"
-          role="presentation"
+          class="c2"
+          data-component="ActionList.Divider"
+          role="separator"
+        />
+        <li
+          class=""
         >
-          <span
-            id="react-aria-5"
+          <div
+            class="c3"
           >
-            Components
-          </span>
-        </div>
-        <ul
-          aria-labelledby="react-aria-5"
-          class="c4"
-        >
-          <li
-            class="c5 c10"
+            <h3
+              class="c4"
+              id="react-aria-1"
+            >
+              Components
+            </h3>
+          </div>
+          <ul
+            class="c5"
           >
-            <a
-              aria-labelledby="react-aria-6 "
-              class="c7"
-              href="/Avatar"
-              tabindex="0"
+            <li
+              class="c6 c11"
             >
-              <div
+              <a
+                aria-labelledby="react-aria-5 "
                 class="c8"
-                data-component="ActionList.Item--DividerContainer"
+                href="/Avatar"
+                tabindex="0"
               >
-                <span
+                <div
                   class="c9"
-                  id="react-aria-6"
+                  data-component="ActionList.Item--DividerContainer"
                 >
-                  Avatar
-                </span>
-              </div>
-            </a>
-          </li>
-        </ul>
-      </li>
-    </ul>
+                  <span
+                    class="c10"
+                    id="react-aria-5"
+                  >
+                    Avatar
+                  </span>
+                </div>
+              </a>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </div>
   </nav>
 </div>
 `;
 
 exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav contains the current item and is open 1`] = `
-.c4 {
+.c0 {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -802,9 +851,15 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   -ms-flex-positive: 1;
   flex-grow: 1;
   min-width: 0;
+  border-style: none;
+  background-color: transparent;
+  cursor: inherit;
+  font-size: inherit;
+  color: #1F2328;
+  line-height: 20px;
 }
 
-.c6 {
+.c8 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -812,7 +867,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   font-weight: 400;
 }
 
-.c1 {
+.c2 {
   list-style: none;
 }
 
@@ -821,19 +876,34 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 0;
+  padding-bottom: 0;
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
   flex-grow: 1;
 }
 
-.c9 {
+.c7 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c11 {
   padding: 0;
   margin: 0;
   display: block;
 }
 
-.c7 {
+.c9 {
   height: 20px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -843,20 +913,18 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   font-weight: initial;
 }
 
-.c8 {
+.c10 {
   -webkit-transform: rotate(180deg);
   -ms-transform: rotate(180deg);
   transform: rotate(180deg);
 }
 
-.c0 {
+.c1 {
   margin: 0;
   padding-inline-start: 0;
-  padding-top: 8px;
-  padding-bottom: 8px;
 }
 
-.c10 {
+.c12 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -890,15 +958,15 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   background-color: rgba(208,215,222,0.24);
 }
 
-.c10[aria-disabled] {
+.c12[aria-disabled] {
   cursor: not-allowed;
 }
 
-.c10 [data-component="ActionList.Item--DividerContainer"] {
+.c12 [data-component="ActionList.Item--DividerContainer"] {
   position: relative;
 }
 
-.c10 [data-component="ActionList.Item--DividerContainer"]::before {
+.c12 [data-component="ActionList.Item--DividerContainer"]::before {
   content: " ";
   display: block;
   position: absolute;
@@ -909,27 +977,32 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   border-color: var(--divider-color,transparent);
 }
 
-.c10:not(:first-of-type) {
+.c12 button[data-component="ActionList.Item--DividerContainer"] {
+  text-align: left;
+  padding: 0;
+}
+
+.c12:not(:first-of-type) {
   --divider-color: rgba(208,215,222,0.48);
 }
 
-[data-component="ActionList.Divider"] + .c10 {
+[data-component="ActionList.Divider"] + .c12 {
   --divider-color: transparent !important;
 }
 
-.c10:hover:not([aria-disabled]),
-.c10:focus:not([aria-disabled]),
-.c10[data-focus-visible-added]:not([aria-disabled]) {
+.c12:hover:not([aria-disabled]),
+.c12:focus:not([aria-disabled]),
+.c12[data-focus-visible-added]:not([aria-disabled]) {
   --divider-color: transparent;
 }
 
-.c10:hover:not([aria-disabled]) + .c2,
-.c10:focus:not([aria-disabled]) + .c10,
-.c10[data-focus-visible-added] + li {
+.c12:hover:not([aria-disabled]) + .c3,
+.c12:focus:not([aria-disabled]) + .c12,
+.c12[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c10::after {
+.c12::after {
   position: absolute;
   top: calc(50% - 12px);
   left: -8px;
@@ -940,49 +1013,49 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   border-radius: 6px;
 }
 
-.c12:hover:not([aria-disabled]) + .c2,
-.c12:focus:not([aria-disabled]) + .c12,
-.c12[data-focus-visible-added] + li {
-  --divider-color: transparent;
-}
-
-.c13:hover:not([aria-disabled]) + .c2,
-.c13:focus:not([aria-disabled]) + .c13,
-.c13[data-focus-visible-added] + li {
-  --divider-color: transparent;
-}
-
-.c14:hover:not([aria-disabled]) + .c2,
+.c14:hover:not([aria-disabled]) + .c3,
 .c14:focus:not([aria-disabled]) + .c14,
 .c14[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c15:hover:not([aria-disabled]) + .c2,
+.c15:hover:not([aria-disabled]) + .c3,
 .c15:focus:not([aria-disabled]) + .c15,
 .c15[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c16:hover:not([aria-disabled]) + .c2,
+.c16:hover:not([aria-disabled]) + .c3,
 .c16:focus:not([aria-disabled]) + .c16,
 .c16[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c17:hover:not([aria-disabled]) + .c2,
+.c17:hover:not([aria-disabled]) + .c3,
 .c17:focus:not([aria-disabled]) + .c17,
 .c17[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c18:hover:not([aria-disabled]) + .c2,
+.c18:hover:not([aria-disabled]) + .c3,
 .c18:focus:not([aria-disabled]) + .c18,
 .c18[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c3 {
+.c19:hover:not([aria-disabled]) + .c3,
+.c19:focus:not([aria-disabled]) + .c19,
+.c19[data-focus-visible-added] + li {
+  --divider-color: transparent;
+}
+
+.c20:hover:not([aria-disabled]) + .c3,
+.c20:focus:not([aria-disabled]) + .c20,
+.c20[data-focus-visible-added] + li {
+  --divider-color: transparent;
+}
+
+.c4 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1014,15 +1087,15 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   font-weight: 600;
 }
 
-.c3[aria-disabled] {
+.c4[aria-disabled] {
   cursor: not-allowed;
 }
 
-.c3 [data-component="ActionList.Item--DividerContainer"] {
+.c4 [data-component="ActionList.Item--DividerContainer"] {
   position: relative;
 }
 
-.c3 [data-component="ActionList.Item--DividerContainer"]::before {
+.c4 [data-component="ActionList.Item--DividerContainer"]::before {
   content: " ";
   display: block;
   position: absolute;
@@ -1033,33 +1106,38 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   border-color: var(--divider-color,transparent);
 }
 
-.c3:not(:first-of-type) {
+.c4 button[data-component="ActionList.Item--DividerContainer"] {
+  text-align: left;
+  padding: 0;
+}
+
+.c4:not(:first-of-type) {
   --divider-color: rgba(208,215,222,0.48);
 }
 
-[data-component="ActionList.Divider"] + .c3 {
+[data-component="ActionList.Divider"] + .c4 {
   --divider-color: transparent !important;
 }
 
-.c3:hover:not([aria-disabled]),
-.c3:focus:not([aria-disabled]),
-.c3[data-focus-visible-added]:not([aria-disabled]) {
+.c4:hover:not([aria-disabled]),
+.c4:focus:not([aria-disabled]),
+.c4[data-focus-visible-added]:not([aria-disabled]) {
   --divider-color: transparent;
 }
 
-.c3:hover:not([aria-disabled]) + .c2,
-.c3:focus:not([aria-disabled]) + .c3,
-.c3[data-focus-visible-added] + li {
+.c4:hover:not([aria-disabled]) + .c3,
+.c4:focus:not([aria-disabled]) + .c4,
+.c4[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c19:hover:not([aria-disabled]) + .c2,
-.c19:focus:not([aria-disabled]) + .c19,
-.c19[data-focus-visible-added] + li {
+.c21:hover:not([aria-disabled]) + .c3,
+.c21:focus:not([aria-disabled]) + .c21,
+.c21[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c11 {
+.c13 {
   color: #0969da;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -1081,12 +1159,12 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   font-weight: 400;
 }
 
-.c11:hover {
+.c13:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.c11:is(button) {
+.c13:is(button) {
   display: inline-block;
   padding: 0;
   font-size: inherit;
@@ -1103,58 +1181,58 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   appearance: none;
 }
 
-.c11:hover {
+.c13:hover {
   color: inherit;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c10:hover:not([aria-disabled]) {
+  .c12:hover:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.32);
     color: #1F2328;
   }
 
-  .c10:focus-visible,
-  .c10 > a:focus-visible {
+  .c12:focus-visible,
+  .c12 > a:focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px #0969da;
   }
 
-  .c10:active:not([aria-disabled]) {
+  .c12:active:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.48);
     color: #1F2328;
   }
 }
 
 @media (forced-colors:active) {
-  .c10:focus {
+  .c12:focus {
     outline: solid 1px transparent !important;
   }
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c3:hover:not([aria-disabled]) {
+  .c4:hover:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.32);
     color: #1F2328;
   }
 
-  .c3:focus-visible,
-  .c3 > a:focus-visible {
+  .c4:focus-visible,
+  .c4 > a:focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px #0969da;
   }
 
-  .c3:active:not([aria-disabled]) {
+  .c4:active:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.48);
     color: #1F2328;
   }
 }
 
 @media (forced-colors:active) {
-  .c3:focus {
+  .c4:focus {
     outline: solid 1px transparent !important;
   }
 }
@@ -1163,94 +1241,107 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   <nav
     class=""
   >
-    <ul
+    <div
       class="c0"
     >
-      <li
-        aria-labelledby="react-aria-1"
+      <ul
         class="c1"
       >
-        <button
-          aria-controls="react-aria-2"
-          aria-expanded="true"
-          aria-labelledby="react-aria-1 "
-          class="c2 c3"
-          tabindex="0"
+        <li
+          aria-labelledby="react-aria-2"
+          class="c2"
         >
-          <div
-            class="c4"
-            data-component="ActionList.Item--DividerContainer"
+          <button
+            aria-controls="react-aria-3"
+            aria-expanded="true"
+            aria-labelledby="react-aria-2 "
+            class="c3 c4"
+            tabindex="0"
           >
             <div
               class="c5"
             >
-              <span
+              <div
                 class="c6"
-                id="react-aria-1"
-              >
-                Item
-              </span>
-              <span
-                class="c7"
+                data-component="ActionList.Item--DividerContainer"
               >
-                <svg
-                  aria-hidden="true"
-                  class="c8"
-                  fill="currentColor"
-                  focusable="false"
-                  height="16"
-                  role="img"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                  viewBox="0 0 16 16"
-                  width="16"
+                <div
+                  class="c7"
                 >
-                  <path
-                    d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"
-                  />
-                </svg>
-              </span>
+                  <span
+                    class="c8"
+                    id="react-aria-2"
+                  >
+                    Item
+                  </span>
+                  <span
+                    class="c9"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="c10"
+                      fill="currentColor"
+                      focusable="false"
+                      height="16"
+                      role="img"
+                      style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                      viewBox="0 0 16 16"
+                      width="16"
+                    >
+                      <path
+                        d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"
+                      />
+                    </svg>
+                  </span>
+                </div>
+              </div>
             </div>
-          </div>
-        </button>
-        <div>
-          <ul
-            aria-labelledby="react-aria-1"
-            class="c9"
-            id="react-aria-2"
-          >
-            <li
-              class="c2 c10"
+          </button>
+          <div>
+            <ul
+              aria-labelledby="react-aria-2"
+              class="c11"
+              id="react-aria-3"
             >
-              <a
-                aria-current="page"
-                aria-labelledby="react-aria-3 "
-                class="c11"
-                href="#"
-                tabindex="0"
+              <li
+                class="c3 c12"
               >
-                <div
-                  class="c4"
-                  data-component="ActionList.Item--DividerContainer"
+                <a
+                  aria-current="page"
+                  aria-labelledby="react-aria-4 "
+                  class="c13"
+                  href="#"
+                  tabindex="0"
                 >
-                  <span
+                  <div
                     class="c6"
-                    id="react-aria-3"
+                    data-component="ActionList.Item--DividerContainer"
                   >
-                    Sub Item
-                  </span>
-                </div>
-              </a>
-            </li>
-          </ul>
-        </div>
-      </li>
-    </ul>
+                    <span
+                      class="c8"
+                      id="react-aria-4"
+                    >
+                      Sub Item
+                    </span>
+                  </div>
+                </a>
+              </li>
+            </ul>
+          </div>
+        </li>
+      </ul>
+    </div>
   </nav>
 </div>
 `;
 
 exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains the current item and is closed 1`] = `
-.c4 {
+.c0 {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1263,9 +1354,15 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   -ms-flex-positive: 1;
   flex-grow: 1;
   min-width: 0;
+  border-style: none;
+  background-color: transparent;
+  cursor: inherit;
+  font-size: inherit;
+  color: #1F2328;
+  line-height: 20px;
 }
 
-.c6 {
+.c8 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -1273,7 +1370,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   font-weight: 400;
 }
 
-.c1 {
+.c2 {
   list-style: none;
 }
 
@@ -1282,19 +1379,34 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 0;
+  padding-bottom: 0;
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
   flex-grow: 1;
 }
 
-.c9 {
+.c7 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c11 {
   padding: 0;
   margin: 0;
   display: none;
 }
 
-.c7 {
+.c9 {
   height: 20px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -1304,20 +1416,18 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   font-weight: initial;
 }
 
-.c8 {
+.c10 {
   -webkit-transform: rotate(0deg);
   -ms-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 
-.c0 {
+.c1 {
   margin: 0;
   padding-inline-start: 0;
-  padding-top: 8px;
-  padding-bottom: 8px;
 }
 
-.c10 {
+.c12 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1351,15 +1461,15 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   background-color: rgba(208,215,222,0.24);
 }
 
-.c10[aria-disabled] {
+.c12[aria-disabled] {
   cursor: not-allowed;
 }
 
-.c10 [data-component="ActionList.Item--DividerContainer"] {
+.c12 [data-component="ActionList.Item--DividerContainer"] {
   position: relative;
 }
 
-.c10 [data-component="ActionList.Item--DividerContainer"]::before {
+.c12 [data-component="ActionList.Item--DividerContainer"]::before {
   content: " ";
   display: block;
   position: absolute;
@@ -1370,27 +1480,32 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   border-color: var(--divider-color,transparent);
 }
 
-.c10:not(:first-of-type) {
+.c12 button[data-component="ActionList.Item--DividerContainer"] {
+  text-align: left;
+  padding: 0;
+}
+
+.c12:not(:first-of-type) {
   --divider-color: rgba(208,215,222,0.48);
 }
 
-[data-component="ActionList.Divider"] + .c10 {
+[data-component="ActionList.Divider"] + .c12 {
   --divider-color: transparent !important;
 }
 
-.c10:hover:not([aria-disabled]),
-.c10:focus:not([aria-disabled]),
-.c10[data-focus-visible-added]:not([aria-disabled]) {
+.c12:hover:not([aria-disabled]),
+.c12:focus:not([aria-disabled]),
+.c12[data-focus-visible-added]:not([aria-disabled]) {
   --divider-color: transparent;
 }
 
-.c10:hover:not([aria-disabled]) + .c2,
-.c10:focus:not([aria-disabled]) + .c10,
-.c10[data-focus-visible-added] + li {
+.c12:hover:not([aria-disabled]) + .c3,
+.c12:focus:not([aria-disabled]) + .c12,
+.c12[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c10::after {
+.c12::after {
   position: absolute;
   top: calc(50% - 12px);
   left: -8px;
@@ -1401,55 +1516,55 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   border-radius: 6px;
 }
 
-.c12:hover:not([aria-disabled]) + .c2,
-.c12:focus:not([aria-disabled]) + .c12,
-.c12[data-focus-visible-added] + li {
-  --divider-color: transparent;
-}
-
-.c13:hover:not([aria-disabled]) + .c2,
-.c13:focus:not([aria-disabled]) + .c13,
-.c13[data-focus-visible-added] + li {
-  --divider-color: transparent;
-}
-
-.c14:hover:not([aria-disabled]) + .c2,
+.c14:hover:not([aria-disabled]) + .c3,
 .c14:focus:not([aria-disabled]) + .c14,
 .c14[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c15:hover:not([aria-disabled]) + .c2,
+.c15:hover:not([aria-disabled]) + .c3,
 .c15:focus:not([aria-disabled]) + .c15,
 .c15[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c16:hover:not([aria-disabled]) + .c2,
+.c16:hover:not([aria-disabled]) + .c3,
 .c16:focus:not([aria-disabled]) + .c16,
 .c16[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c17:hover:not([aria-disabled]) + .c2,
+.c17:hover:not([aria-disabled]) + .c3,
 .c17:focus:not([aria-disabled]) + .c17,
 .c17[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c18:hover:not([aria-disabled]) + .c2,
+.c18:hover:not([aria-disabled]) + .c3,
 .c18:focus:not([aria-disabled]) + .c18,
 .c18[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c19:hover:not([aria-disabled]) + .c2,
+.c19:hover:not([aria-disabled]) + .c3,
 .c19:focus:not([aria-disabled]) + .c19,
 .c19[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c3 {
+.c20:hover:not([aria-disabled]) + .c3,
+.c20:focus:not([aria-disabled]) + .c20,
+.c20[data-focus-visible-added] + li {
+  --divider-color: transparent;
+}
+
+.c21:hover:not([aria-disabled]) + .c3,
+.c21:focus:not([aria-disabled]) + .c21,
+.c21[data-focus-visible-added] + li {
+  --divider-color: transparent;
+}
+
+.c4 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1482,15 +1597,15 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   background-color: rgba(208,215,222,0.24);
 }
 
-.c3[aria-disabled] {
+.c4[aria-disabled] {
   cursor: not-allowed;
 }
 
-.c3 [data-component="ActionList.Item--DividerContainer"] {
+.c4 [data-component="ActionList.Item--DividerContainer"] {
   position: relative;
 }
 
-.c3 [data-component="ActionList.Item--DividerContainer"]::before {
+.c4 [data-component="ActionList.Item--DividerContainer"]::before {
   content: " ";
   display: block;
   position: absolute;
@@ -1501,27 +1616,32 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   border-color: var(--divider-color,transparent);
 }
 
-.c3:not(:first-of-type) {
+.c4 button[data-component="ActionList.Item--DividerContainer"] {
+  text-align: left;
+  padding: 0;
+}
+
+.c4:not(:first-of-type) {
   --divider-color: rgba(208,215,222,0.48);
 }
 
-[data-component="ActionList.Divider"] + .c3 {
+[data-component="ActionList.Divider"] + .c4 {
   --divider-color: transparent !important;
 }
 
-.c3:hover:not([aria-disabled]),
-.c3:focus:not([aria-disabled]),
-.c3[data-focus-visible-added]:not([aria-disabled]) {
+.c4:hover:not([aria-disabled]),
+.c4:focus:not([aria-disabled]),
+.c4[data-focus-visible-added]:not([aria-disabled]) {
   --divider-color: transparent;
 }
 
-.c3:hover:not([aria-disabled]) + .c2,
-.c3:focus:not([aria-disabled]) + .c3,
-.c3[data-focus-visible-added] + li {
+.c4:hover:not([aria-disabled]) + .c3,
+.c4:focus:not([aria-disabled]) + .c4,
+.c4[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c3::after {
+.c4::after {
   position: absolute;
   top: calc(50% - 12px);
   left: -8px;
@@ -1532,7 +1652,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   border-radius: 6px;
 }
 
-.c11 {
+.c13 {
   color: #0969da;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -1554,12 +1674,12 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   font-weight: 400;
 }
 
-.c11:hover {
+.c13:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.c11:is(button) {
+.c13:is(button) {
   display: inline-block;
   padding: 0;
   font-size: inherit;
@@ -1576,58 +1696,58 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   appearance: none;
 }
 
-.c11:hover {
+.c13:hover {
   color: inherit;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c10:hover:not([aria-disabled]) {
+  .c12:hover:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.32);
     color: #1F2328;
   }
 
-  .c10:focus-visible,
-  .c10 > a:focus-visible {
+  .c12:focus-visible,
+  .c12 > a:focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px #0969da;
   }
 
-  .c10:active:not([aria-disabled]) {
+  .c12:active:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.48);
     color: #1F2328;
   }
 }
 
 @media (forced-colors:active) {
-  .c10:focus {
+  .c12:focus {
     outline: solid 1px transparent !important;
   }
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c3:hover:not([aria-disabled]) {
+  .c4:hover:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.32);
     color: #1F2328;
   }
 
-  .c3:focus-visible,
-  .c3 > a:focus-visible {
+  .c4:focus-visible,
+  .c4 > a:focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px #0969da;
   }
 
-  .c3:active:not([aria-disabled]) {
+  .c4:active:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.48);
     color: #1F2328;
   }
 }
 
 @media (forced-colors:active) {
-  .c3:focus {
+  .c4:focus {
     outline: solid 1px transparent !important;
   }
 }
@@ -1636,88 +1756,96 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   <nav
     class=""
   >
-    <ul
+    <div
       class="c0"
     >
-      <li
-        aria-labelledby="react-aria-1"
+      <ul
         class="c1"
       >
-        <button
-          aria-controls="react-aria-2"
-          aria-expanded="false"
-          aria-labelledby="react-aria-1 "
-          class="c2 c3"
-          tabindex="0"
+        <li
+          aria-labelledby="react-aria-2"
+          class="c2"
         >
-          <div
-            class="c4"
-            data-component="ActionList.Item--DividerContainer"
+          <button
+            aria-controls="react-aria-3"
+            aria-expanded="false"
+            aria-labelledby="react-aria-2 "
+            class="c3 c4"
+            tabindex="0"
           >
             <div
               class="c5"
             >
-              <span
+              <div
                 class="c6"
-                id="react-aria-1"
-              >
-                Item
-              </span>
-              <span
-                class="c7"
+                data-component="ActionList.Item--DividerContainer"
               >
-                <svg
-                  aria-hidden="true"
-                  class="c8"
-                  fill="currentColor"
-                  focusable="false"
-                  height="16"
-                  role="img"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                  viewBox="0 0 16 16"
-                  width="16"
+                <div
+                  class="c7"
                 >
-                  <path
-                    d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"
-                  />
-                </svg>
-              </span>
+                  <span
+                    class="c8"
+                    id="react-aria-2"
+                  >
+                    Item
+                  </span>
+                  <span
+                    class="c9"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="c10"
+                      fill="currentColor"
+                      focusable="false"
+                      height="16"
+                      role="img"
+                      style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                      viewBox="0 0 16 16"
+                      width="16"
+                    >
+                      <path
+                        d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"
+                      />
+                    </svg>
+                  </span>
+                </div>
+              </div>
             </div>
-          </div>
-        </button>
-        <div>
-          <ul
-            aria-labelledby="react-aria-1"
-            class="c9"
-            id="react-aria-2"
-          >
-            <li
-              class="c2 c10"
+          </button>
+          <div>
+            <ul
+              aria-labelledby="react-aria-2"
+              class="c11"
+              id="react-aria-3"
             >
-              <a
-                aria-current="page"
-                aria-labelledby="react-aria-3 "
-                class="c11"
-                href="#"
-                tabindex="0"
+              <li
+                class="c3 c12"
               >
-                <div
-                  class="c4"
-                  data-component="ActionList.Item--DividerContainer"
+                <a
+                  aria-current="page"
+                  aria-labelledby="react-aria-4 "
+                  class="c13"
+                  href="#"
+                  tabindex="0"
                 >
-                  <span
+                  <div
                     class="c6"
-                    id="react-aria-3"
+                    data-component="ActionList.Item--DividerContainer"
                   >
-                    Sub Item
-                  </span>
-                </div>
-              </a>
-            </li>
-          </ul>
-        </div>
-      </li>
-    </ul>
+                    <span
+                      class="c8"
+                      id="react-aria-4"
+                    >
+                      Sub Item
+                    </span>
+                  </div>
+                </a>
+              </li>
+            </ul>
+          </div>
+        </li>
+      </ul>
+    </div>
   </nav>
 </div>
 `;
diff --git a/src/__tests__/ActionList.test.tsx b/src/__tests__/ActionList.test.tsx
index 9e990e235ef..b2523d0ba20 100644
--- a/src/__tests__/ActionList.test.tsx
+++ b/src/__tests__/ActionList.test.tsx
@@ -135,7 +135,7 @@ describe('ActionList', () => {
           </ActionList.Item>
         </ActionList>,
       )
-    }).toThrow('For Item to be selected, ActionList or ActionList.Group needs to have a selectionVariant defined')
+    }).toThrow('For Item to be selected, ActionList needs to have a selectionVariant defined')
 
     mockError.mockRestore()
   })
diff --git a/src/__tests__/__snapshots__/ActionList.test.tsx.snap b/src/__tests__/__snapshots__/ActionList.test.tsx.snap
index 5bbbad35875..f8ed65dc46e 100644
--- a/src/__tests__/__snapshots__/ActionList.test.tsx.snap
+++ b/src/__tests__/__snapshots__/ActionList.test.tsx.snap
@@ -2,13 +2,20 @@
 
 exports[`ActionList renders consistently 1`] = `
 .c0 {
-  margin: 0;
-  padding-inline-start: 0;
   padding-top: 8px;
   padding-bottom: 8px;
 }
 
-<ul
+.c1 {
+  margin: 0;
+  padding-inline-start: 0;
+}
+
+<div
   className="c0"
-/>
+>
+  <ul
+    className="c1"
+  />
+</div>
 `;