Usage

Use ListPage for any screen that lists records: invoices, accounts, quotes. It is a blueprint: it composes kit pieces and keeps no state of its own, so the screen owns the filters, the rows and which page is showing. Pass the kit Toolbar as toolbar and the list itself as children. How the records are laid out is the Toolbar's own view menu: Table View is a kit Table that runs to the bottom of the page, the Pagination at its foot. The page is the only thing that scrolls: the Toolbar holds at the top under the compact PageHeader bar, the Table's column names hold under the Toolbar, and the page name with anything between it and the list — a summary, a notice — scrolls away behind the trail. Under that band is the scroll shadow: a lift that reaches both page edges while the bar and the table keep the page's side padding, drawn only once the band has pinned, and the column names give up their own line while it is. The pattern measures the bar and the names and says how far down they stop in --table-stick-top, so it keeps up when the filter bar opens. Give that PageHeader sticky, from the shell's onPageHeaderStick, and shadow false, since the band below carries the lift, List View a kit ListView with selection multiple (its ticks feed the same bulk bar), Card View a grid of kit Cards. The screen swaps children to match. pagination takes a kit Pagination, flush under the rows so it reads as the table's own footer, and it goes whenever something else is standing in for them. bulk is the bar of actions for the rows that are ticked; it takes the toolbar's place while something is selected, so the two are never both there. state swaps what stands in for the rows: loading draws kit Skeleton lines in their shape, empty shows what you pass as empty (a kit EmptyState), and error shows the error as a kit Callout. It goes inside the AppShell page, under the PageHeader, so it adds no page padding of its own. See contracts/listpage.json for the full contract.