@material3-electricmonk/widgets

Compositions of @material3-electricmonk/components that own multi-part behaviour: focus trapping, roving focus, landmark roles, the responsive shell.

npm i @material3-electricmonk/widgets

import { AppShell, AppBar, NavigationRail, useSizeClass } from '@material3-electricmonk/widgets';

// No `size` prop — the shell measures the window and counts docked panels,
// because the breakpoint ladder shifts as panels dock.
<AppShell navigation={<NavigationRail>{destinations}</NavigationRail>}
          appBar={<AppBar title="Inbox" />}>
  {content}
</AppShell>

See design/LAYOUT.md in the source repository for the layout model.