layoutstexulinot agent-emittableapp
LayoutHost
layout-host
Resolves a layout id, applies width fallbacks, and keeps one stable screen outlet.
Live examples
Sidebar host
Sidebar host
Loading demo…
Props
| Name | Kind | Required | Default | Description |
|---|---|---|---|---|
layout | enum (sidebar, rail, top-nav, dual-sidebar, master-detail, dashboard-grid, docs, blog, editorial, marketing, mobile-tabs, mobile-drawer, wizard, auth-split, custom) | yes | — | Layout catalog id |
children | slot | yes | — | Screen content |
nav | object | no | — | NavModel for chrome links |
path | string | no | — | Current hash path |
options | object | no | — | Flat data-only layout knobs |
storageKey | string | no | — | Scope for persisted UI flags |
aside | slot | no | — | Optional context panel |
dir | enum (ltr, rtl) | no | — | Document direction |
loadingLabel | string | no | "Loading layout" | — |
class | string | no | — | — |
Keyboard
| Key | Action |
|---|---|
— | See accessibility notes for keyboard behavior. |
Accessibility
- Loading state is named for assistive tech
- Screen outlet stays stable across layout switches
Evidence for layout-host
Latest committed gates for layout-host (as of 2026-10-23). Static snapshot — not live CI.
Behavior
n/ano behavior scenario
No dedicated behavior scenario for this catalog id (a styled or display surface, covered by its unit and axe tests).
Size (gzip)
texuli/layout-host · budget 12.0 KiB
Budget from texuli.budgets.json; re-measure with `pnpm size --filter <entry>`.
Axe
documented
tests/e2e/site-component-pages.spec.tsdocs/quality (a11y-*)
Site component pages axe gate; package-level a11y docs under docs/quality when present.
Browsers
chromiumwebkitmobile
Playwright projects: Desktop Chrome, Desktop Safari, Pixel 7. Firefox is a known gap on this host.
When to use
Use when
- Apps that switch between shared layouts without remounting the screen
Don’t use when
Prefer another component
- A single fixed page frame with no layout catalog