AppShell — Loidolt Theme

import { AppShell } from '@loidolt/theme-svelte';

Example

TerrainCrater Lake

Main content sits in the middle row and takes the remaining height.

mainId is the target for a skip link; the default is main.
Safe areas: the header pads itself (Topbar), the rows below are inset from the side safe areas, and the last row takes the bottom one. Each edge reads --ldt-safe-top/-right/-bottom/-left before env(safe-area-inset-*).
tabBar renders bottom navigation such as TabBar after the footer, pinned to the bottom of the screen while the page scrolls.

Generated from the component source, so it cannot drift from the implementation.

AppShell props
Prop	Type	Default	Notes
`children` required	`Snippet`	`—`
`class`	`string`	`—`
`embedded`	`boolean`	`false`	Render the content row without a second `main` landmark inside an embedded preview.
`footer`	`Snippet`	`—`
`header`	`Snippet`	`—`	Complete banner/header content, such as `Topbar`; rendered without another landmark wrapper.
`mainId`	`string`	`'main'`	`id` of the content row (`<main>` unless embedded), for skip links or demo targeting.
`ref` bindable	`HTMLDivElement \| null`	`null`
`tabBar`	`Snippet`	`—`	Bottom navigation, such as `TabBar`, rendered last and pinned to the bottom of the screen while the page scrolls. It takes the bottom safe-area inset in place of the rows above.

Plus the attributes of HTMLAttributes<HTMLDivElement>, forwarded to the root element.