BankaiPage

The per-route content host — the box at the top of every route file. It sits inside the document's <main> and hosts a route's content; it is not a landmark of its own.

Usage

<!-- every route file starts with BankaiPage -->
<template>
<BankaiPage>
<BankaiContainer>… route content …</BankaiContainer>
</BankaiPage>
</template>
The nesting is App › Layout › Page › Container: BankaiLayout (or a standalone BankaiMain) emits the <main>, BankaiPage hosts the route inside it, and BankaiContainer sets the content width.

Fills the content region

Its one house default is a min-block-size fill so a short route still occupies the full content region and pushes a footer to the bottom. The fill is 100% of the containing block, not a 100dvh viewport unit — a viewport height would break embedded or side-by-side panes where the box is a fraction of the window (it fills whatever space the parent gives it). Every theme rule is zero-specificity (:where()), so a plain declaration or utility class overrides it without !important.
A short route still fills the height above.

Not a landmark, no black magic

BankaiPage renders a plain <div> — it is deliberately not a landmark and never renders its own <main> (Layout's default slot already emits the sole one). It also does no implicit child-rewriting: there is no auto heading-level context, so a BankaiHeading's tag is always explicit via its level. It lands thin today; per-route scroll and route-transition concerns arrive once there is routing to dogfood.

Props

This component has no props.

Emits

This component emits no events.

Slots

SlotDescription
defaultThe route's content — typically a BankaiContainer (or several, at different widths) and the page body.

Exposes

This component exposes nothing on its instance.

Theming

Every token is a :root custom property applied through zero-specificity :where() rules, so a single plain declaration overrides one — no selector, no !important. Set it globally on :root or locally on any ancestor.

TokenDefaultPurpose
--bankai-page-min-block-size100%Minimum height so a short route still fills the content region.