Page

import { ListItem, Page, VerticalList } from '@wearables-ui-toolkit/mrbd';

export function ActivityRoute() {
  return (
    <Page headerText="Activity" headerMetadata="Today">
      <VerticalList insetForHeader ariaLabel="Activity">
        <ListItem title="Morning brief" subtitle="Ready" onClick={openBrief} />
        <ListItem title="Team notes" subtitle="Updated" onClick={openNotes} />
      </VerticalList>
    </Page>
  );
}

<Page headerText="Settings" enableSystemBarInset={false}>
  <VerticalList insetForHeader ariaLabel="Settings">
    <ListItem title="Trail alerts" showSwitch checked={alerts} onCheckedChange={setAlerts} />
    <ListItem title="Weather alerts" showSwitch checked={weather} onCheckedChange={setWeather} />
  </VerticalList>
</Page>

import {
  HeaderAvatarSize,
  Page,
  StatusIndicatorType,
} from '@wearables-ui-toolkit/mrbd';

<Page
  headerText="Alex Chen"
  headerMetadata="Online"
  headerShowAvatar
  headerAvatarSrc={profileImageUrl}
  headerAvatarAlt="Alex Chen"
  headerAvatarSize={HeaderAvatarSize.LARGE}
  headerStatusIndicator={StatusIndicatorType.ACTIVE}
>
  <ProfileContent />
</Page>

<Page showHeader={false}>
  <ImmersiveContent />
</Page>

• HeaderAvatarSize: SMALL, LARGE. Exported from Header.
• StatusIndicatorType, AvatarShape, and PlaceholderStyle come from Avatar.
• IconSource is the shared icon contract; see Icons.

• Header visibility. The header renders whenever showHeader is true, independent of whether any header content is set. Clearing the text leaves an empty header in place; only showHeader={false} removes it.
• Stacking. The header and the content area are absolutely positioned siblings inside the page root. The content layer spans the full width and runs from its top inset down to the bottom edge; the header is an intrinsically sized box stacked above it, so scrolling content passes beneath the header rather than pushing it away. The header is centered horizontally and keeps a fixed offset from the top of the page.
• Leading slot precedence. The header shows one accessory at a time: the loader when headerIsLoading is set, otherwise the avatar when headerShowAvatar or any avatar image or content prop is set, otherwise headerIcon.
• Focus. The content area is marked as a focus section, so directional navigation resolves a neighbor inside the content before it looks outside it.
• System-bar inset.enableSystemBarInset moves only the content area; the header keeps its fixed safe offset in both modes. A child scroller using insetForHeader reserves the correct clearance either way, so you never add top padding to compensate.
• Clipping. The page root and the content area both clip their overflow, so a child cannot bleed past the route bounds. Anything that has to escape those bounds must be portaled out rather than absolutely positioned inside the content; see Floating portals.
• Sizing.Page fills the space it is given and never assumes a device size. It carries no material and paints no background of its own.
• Rendering. The component is memoized, so passing stable handler and object props keeps a busy route from re-rendering the whole page shell.

• The page root is a main landmark by default; override role if a route is genuinely something else.
• When the header is shown and has text or metadata, the page root’s accessible name is derived from them, joined with a comma, so assistive technology announces the route on arrival. Pass aria-label to override it. With no header, or with an empty header, the root has no accessible name.
• The header itself is a top-level heading with its own accessible name; see Header.
• Supply headerAvatarAlt whenever the header shows an avatar. The component falls back to a generic, unlocalized string.
• Nothing in the header is focusable, so a route needs at least one real focus target in its content.

• Use one Page as the root of an ordinary route.
• Set header content through the header* props.
• Keep both header text and metadata to at most two words; move detailed facts into the body. Omit metadata unless it adds high-value context.
• Give the route one scroll container per axis inside Page, and set insetForHeader on it.
• Pass headerIsLoading while the route’s data is in flight instead of swapping the header out for a spinner of your own.

• Configure the route header through Page. Rendering Header directly bypasses the page-owned placement and stacking.
• Avoid putting a Page inside a SubNavigationPager, or a SubNavigationPager inside a Page.
• Avoid nesting a Page inside another Page.
• Page is layout-only: it does not handle Back, invoke a router, or read or mutate browser history. Let the host or application router own system Back and its desktop Escape fallback. An in-app back control duplicates that path.
• Avoid adding manual top padding for the header, and avoid hardcoding a header height.
• Avoid setting both headerIcon and an avatar expecting both to show; only one accessory renders.