#App Shell

The App Shell establishes persistent task context beside an open product canvas. It can own a bounded preview or the full visual viewport.

npm install @a3s-lab/ui@0.4.0

<div class="app-shell" data-navigation="expanded">
  <aside data-app-navigation>...</aside>
  <main data-app-main>
    <header class="workspace-header">
      <button type="button" data-app-navigation-trigger>Toggle navigation</button>
    </header>
    <div data-app-content>...</div>
  </main>
</div>

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

#Usage

<div class="app-shell" data-navigation="expanded">
  <aside data-app-navigation>...</aside>
  <main data-app-main>
    <header class="workspace-header">
      <button type="button" data-app-navigation-trigger>Toggle navigation</button>
    </header>
    <div data-app-content>...</div>
  </main>
</div>

#Parameters

#JavaScript API

Import @a3s-lab/ui/all, or import @a3s-lab/ui/runtime before @a3s-lab/ui/app-shell. The controller exposes expandNavigation(), collapseNavigation(), hideNavigation(), openNavigation(), closeNavigation(), toggleNavigation(), and refresh() on the shell root. It dispatches a3s:app-navigation-change with { navigation, mobileOpen, mode, source } after a transition. Optional data-app-navigation-open-label, data-app-navigation-close-label, data-app-navigation-expand-label, and data-app-navigation-collapse-label values override the localized trigger labels.

#States and variants

The shell has expanded, collapsed, hidden, full-viewport, and mobile-open states. Below 768px the navigation becomes a contained overlay. The controller marks the closed navigation inert and aria-hidden="true", opens it above the local backdrop, moves focus to its first control, and closes it on Escape, backdrop activation, or destination selection. Navigation and main content own separate scroll regions. A host may persist data-navigation and coordinate it with routing; call refresh() after programmatic state changes when immediate synchronization is required.

#Accessibility

Use landmark elements (aside, nav, main, header) and name each navigation region. The controller keeps aria-expanded, the trigger label, inert, and aria-hidden synchronized and restores trigger focus after dismissing the compact drawer. Keep navigation DOM-adjacent to the shell so the contained backdrop cannot cover unrelated page content.