{# @description The page wrapper. #}
{# @prop fill:boolean | description:"Mark the page as wanting the shell's height instead of its content's height." #}
{# @prop gap:number | default:6 | description:"Gap between the page's children." #}
{# @prop class:text | description:"Extra classes appended to the page's root element." #}
{# @slot The page's title, content and other regions. — The page's children. #}
<c-vars fill gap="6" class />
{% comment %}
  `mvp-page-fill` is what the shell keys off (mvp/tailwind/base.css) since
  this renders inside the content block, long after the shell around it.
  `fill` also drops `mb-16`, already overflow at that height.
{% endcomment %}
<div class="flex flex-col gap-{{ gap }} {% if fill %}mvp-page-fill h-full{% else %}mb-16 mx-auto{% endif %} {{ class }}"
     {{ attrs }}>
  {{ slot }}
</div>