unordered list is numbered if nested inside ordered list

Background Information

Package Version(s):
ui-list 8.49.0

Browser:
Chrome 119.0.6045.159
Safari 17.1

OS:
macos 14.1.1

Device:
Macbook Pro

Component:
List

Describe the Bug

Unordered lists nested inside an ordered list are numbered following from the parent list

Steps To Reproduce

In a component using @instructure/ui-list, create a simple nested list:

<List as="ol">
  <List.Item>Ordered List Item with sub items
    <List as="ul">
      <List.Item>Sub Item</List.Item>
      <List.Item>Another Sub Item</List.Item>
    </List>
  </List.Item>
  <List.Item>Ordered List without sub item</List.Item>
</List>

This results in a list that appears as such:

1. Ordered List Item with sub items
    &bull; 2. Sub Item
    &bull; 3. Another Sub Item
4. Ordered List without sub item

Expected Behavior

Should see a list like

1. Ordered List Item with sub items
    &bull; Sub Item
    &bull; Another Sub Item
2. Ordered List without sub item

Additional Information

Current Workaround(s):
I've attempted to use emotion's css property to override the li::before rules from here:

instructure-ui/packages/ui-list/src/List/styles.ts

Lines 58 to 64 in 8420ece

    
           'li::before': { 
        
             fontWeight: componentTheme.orderedNumberFontWeight, 
        
             counterIncrement: 'ol-counter', 
        
             content: 'counters(ol-counter, ".") "."', 
        
             marginInlineEnd: componentTheme.orderedNumberMargin, 
        
             marginInlineStart: 0 
        
           }

But have not been successful. For the time being I'm stuck not using the <List> component and just using <ol> and <ul> tags in my component.

Are you willing to submit a PR to fix?

Yes, I'm willing to submit a PR
If there's an easy way to use emotion to get around this that I am missing I will happily do that rather than submit a PR, but I've so far not been successful. A simple PR that changes
https://github.com/instructure/instructure-ui/blob/master/packages/ui-list/src/List/styles.ts#L58 to use '> li::before' rather than just 'li::before' as the selector should do it.

Requested Priority:
Normal

Hey @hart0554!

We are glad to receive this finding from you, we will look into it and get back to you.

	'li::before': {
	fontWeight: componentTheme.orderedNumberFontWeight,
	counterIncrement: 'ol-counter',
	content: 'counters(ol-counter, ".") "."',
	marginInlineEnd: componentTheme.orderedNumberMargin,
	marginInlineStart: 0
	}