Header

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

export function ProfileRoute() {
  return (
    <Page
      headerText="Profile"
      headerMetadata="Online"
      headerShowAvatar
      headerAvatarSrc={profileImageUrl}
      headerAvatarAlt="Alex Chen"
      headerAvatarSize={HeaderAvatarSize.LARGE}
    >
      <ProfileContent />
    </Page>
  );
}

<Page headerText="Messages" headerIsLoading={isSyncing}>
  <MessageList />
</Page>

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

<Page headerText="Alerts" headerIcon={bellIcon}>
  <AlertList />
</Page>;

<Page
  headerText="Alex Chen"
  headerShowAvatar
  headerAvatarSrc={profileImageUrl}
  headerAvatarAlt="Alex Chen"
  headerStatusIndicator={StatusIndicatorType.ACTIVE}
>
  <ProfileContent />
</Page>;

• Declarative accessory swaps. Change showAvatar, avatarSrc, icon, isLoading, or avatarSize and the component animates between accessory states itself — the outgoing accessory scales and fades out, the incoming one scales and fades in, and the header animates the width change that follows. There is nothing imperative to call. When the user prefers reduced motion the width change is skipped and the header snaps to its new size.
• One leading slot. The icon, the avatar, and the loading indicator share a single slot with a fixed precedence: the loader when isLoading is set, otherwise the avatar when showAvatar or any avatar image or content prop is set, otherwise icon. Passing an icon alongside avatar content silently shows the avatar.
• Content anatomy. The text, metadata, and accessory are laid out with the emphasized chip anatomy, so they keep the same rhythm as a Chip.
• Intrinsic sizing. The header wraps its content and never exceeds the width it is given. Preserve that intrinsic sizing rather than forcing a width or height.
• Text overflow.maxLines caps the text: at the default of one line the text never wraps and is clipped by the header bounds, and higher values clamp to that many lines. The cap is a safety net, not extra room for a long title.
• Material. The header root itself paints nothing. The chip anatomy inside supplies the surface background and its rounded shape, and that shape takes a larger corner radius when the avatar is rendered at HeaderAvatarSize.LARGE.
• Rendering. The component is memoized, so a route that keeps its header props stable will not re-render the header as content changes.

• The root reports role="heading" at level 1, so assistive technology can jump to the route identity. The level is fixed and cannot be changed through props.
• Its accessible name is composed from the text and the metadata, joined with a comma. Passing aria-label replaces that composed pair.
• When showAvatar is explicitly set and statusIndicator is present, the indicator’s description is appended to the accessible name — including when you supplied your own aria-label. Write labels that read correctly with that suffix. An avatar that is only inferred from avatarSrc or the other avatar content props still renders, but its status is not appended, so set showAvatar when the status has to be announced.
• The name is omitted entirely when there is no text, no metadata, no aria-label, and no announced status.
• Supply avatarAlt whenever an avatar is shown. Header adds no default of its own, so an omitted value falls through to the avatar’s built-in English fallback label.
• The header supplies no interactive semantics. There is nothing to focus, so it can never be the only reachable element on a route.

• Configure the header through Page so page layout remains coordinated.
• Keep both text and metadata to at most two words.
• Treat metadata as an optional qualifier and include it only when it adds high-value context.
• Supply avatarAlt whenever an avatar is shown.
• Use isLoading for in-flight route data instead of swapping in a separate spinner.

• Use ContainerHeader for a content section; Header is reserved for the page-level route identity.
• Keep metadata to one useful qualifier instead of joining multiple facts with separators.
• Shorten the title rather than using maxLines as overflow space.
• Keep the header non-interactive. Wrapping it in a focusable element gives a heading ambiguous click semantics.
• Choose icon or avatar content; when both are passed, the avatar wins.
• Header internals are not a supported customization surface. Use ContainerHeader or Chip for a different heading treatment.