Semantic

// Wrap any child as a named HTML5 landmark role.
// The role prop maps: .header → <header role="banner">,
// .nav → <nav role="navigation">, .main → <main role="main">,
// .aside → <aside role="complementary">,
// .footer → <footer role="contentinfo">,
// .article → <article>, .section → <section>.
// ariaLabel feeds aria-label for AT disambiguation when
// multiple landmarks of the same role exist on the page.

katagami.semantic(role: .main, ariaLabel: "Dashboard content") {
  VStack(spacing: 24) {
    Heading("Portfolio Overview", level: .h1)
    ModuleGrid()
  }
}

katagami.semantic(role: .nav, ariaLabel: "Primary navigation") {
  HStack(spacing: 0) {
    navLinks
  }
}