Unexpected table structure

[codevogel]

I'm wondering if I'm doing something wrong here. The output of rehype-toc seems to be structured in a weird way.

Using rehype-toc, given the input .svx file:

# First Header

Hello world!

## Second Header

This is some text.

### Third header

Hey friends! 👋

```ts
function greet(name: string) {
	console.log(`Hey ${name}! 👋`)
}

I get the output:

<nav class="toc">
    <ol class="toc-level toc-level-1">
        <li class="toc-item toc-item-h1">
            <a class="toc-link toc-link-h1" href="#first-header">First Header</a>
            <ol class="toc-level toc-level-2">
                <li class="toc-item toc-item-h2">
                    <a class="toc-link toc-link-h2" href="#second-header">Second Header</a>
                    <ol class="toc-level toc-level-3">
                        <li class="toc-item toc-item-h3">
                            <a class="toc-link toc-link-h3" href="#third-header">Third header</a>
                        </li>
                    </ol>
                </li>
            </ol>
        </li>
    </ol>
</nav>

To me, this html looks weird. Why does the output contain nested lists?
If, for example, I wanted to apply a border to a li, I could target it with .toc li or .toc toc-item, and set a border.
But because each li includes the other levels (for some reason I don't understand?), the border would extend all the way down, causing unexpected effects:

.toc-item {
	@apply border-2  border-black/20;
}

yields:

Similar issues occur when you try to make ol a list-decimal:

.toc ol {
        @apply list-decimal
}

yields

As each ol just contains one item!

A structure like this would make more sense to me:

<nav class="toc">
    <ol>
        <li class="toc-item toc-item-h1">
            <a class="toc-link toc-link-h1" href="#first-header">First Header</a>
        </li>
	<li class="toc-item toc-item-h2">
		<a class="toc-link toc-link-h2" href="#second-header">Second Header</a>
	</li>
	<li class="toc-item toc-item-h3">
		<a class="toc-link toc-link-h3" href="#third-header">Third header</a>
	</li>
    </ol>
</nav>

As you could target each level with the nth child selector.

Have I done something weird with my config to cause this behaviour? Or is this expected behaviour? And if so, what is the reasoning to not just use the intrinsic capabilities of lists?

[codevogel]

Taking a better look at the example this seems to be expected behaviour as each div represents a level, and then each h1, h2... etc is added as an li.

My .svx file is rendered to

div
   h1
   h2
   h3

Which should output the contents as I expect them, as li's in one singular ol.

So I think the issue instead is that somewhere along the line, rehype gets lost and adds all my headers as nested lists instead of combining my headers into one singular list. This might have something to do with the way mdsvex processes my .svx, where I use the plugins rehypePlugins: [rehypeSlug, rehypeToc]

[codevogel]

Never mind.
I'm just being silly.

I was expecting the headers to be same-leveled, but of course I should have used

# First Header

Hello world!

# Second Header

This is some text.

# Third header

Hey friends! 👋

instead if I wanted it to behave like that...