Using ::: inside tab

[PeppeL-G]

I'm new to the ::: syntax, but I tried to use it inside tabs (nested usage):

# Tabs test

:::: tabs

::: tab Aaaaaa

Aaaaaaa...

::: tip Aaaa...
Aaaa....
:::

Aa....

:::

::: tab Bbbbbbb

Bbbbb...

:::

::::

And it does not work the way I intended. The result is (note the screwed up sections at the bottom):

<div class="tabs-component">
  <ul role="tablist" class="tabs-component-tabs">
    <li role="presentation" class="tabs-component-tab is-active"><a aria-controls="#aaaaaa" href="#aaaaaa" role="tab"
        class="tabs-component-tab-a" aria-selected="true">Aaaaaa</a></li>
    <li role="presentation" class="tabs-component-tab"><a aria-controls="#bbbbbbb" href="#bbbbbbb" role="tab"
        class="tabs-component-tab-a">Bbbbbbb</a></li>
  </ul>
  <div class="tabs-component-panels">
    <section id="aaaaaa" role="tabpanel" class="tabs-component-panel" style="">
      <p>Aaaaaaa...</p>
      <div class="tip custom-block">
        <p class="custom-block-title">Aaaa...</p>
        <p>Aaaa....</p>
      </div>
    </section>
    <p>Aa....</p>
    <p>:::</p>
    <section id="bbbbbbb" role="tabpanel" class="tabs-component-panel" style="display: none;" aria-hidden="true">
      <p>Bbbbb...</p>
    </section>
  </div>
</div>

Is what I'm trying to do impossible, or am I using the wrong syntax?

[PeppeL-G]

Ah, I thinks I get it now. You can use whichever number of : you want, but the inner ones needs to be fewer than the surrounding ones. So in my case I can use:

# Tabs test

::::: tabs

:::: tab Aaaaaa

Aaaaaaa...

::: tip Aaaa...
Aaaa....
:::

Aa....

::::

:::: tab Bbbbbbb

Bbbbb...

::::

:::::

Can someone confirm this? And if possible also suggest a link to where I can learn more about this syntax (have tried to search for it without any luck).

EDIT

But an example on Vuepress suggests differently :/

EDIT 2

Seems like this confirms what I first wrote, but it must be better described somewhere?