Test: Caret for All Heading Levels

This tests that the CSS caret appears for all heading levels (h2, h3, h4, etc.) in VitePress sidebar items.

Depth 0 → h2 element

Level 0 Item (h2)

Child content here

Depth 1 → h3 element

Level 1 Item (h3)

Child content here

Depth 2 → h4 element

Level 2 Item (h4)

Child content here

Depth 3 → h5 element

Level 3 Item (h5)

Child content here

Depth 4 → h6 element

Level 4 Item (h6)

Child content here

Depth 5+ → p element

Level 5+ Item (p)

Child content here

Key Changes Made:

✅ Added z-index: 1 to ensure caret appears above other elements
✅ Added cursor: pointer to summary.item
✅ Added padding-right: 32px to all heading levels to make space for caret
✅ Added margin: 0 to reset default heading margins
✅ Caret should now appear consistently for h2, h3, h4, h5, h6, and p elements

VitePress Depth Logic:

const textTag = computed(() => {
  return !hasChildren.value
    ? 'p'                           // Simple links use p
    : props.depth + 2 === 7
      ? 'p'                         // Max depth uses p
      : `h${props.depth + 2}`       // Others use h2, h3, h4, h5, h6
})

Expected result: All items above should show a triangular caret on the right side that rotates when clicked.