AppShell

AppShell is the foundational wrapper component for your application. It provides accessibility features like skip links and integrates the toast notification system.

Import​

<script>
  import { AppShell } from '@classic-homes/theme-svelte';
</script>

Basic Usage​

<AppShell>
  <main>Your application content</main>
</AppShell>

Props​

Prop	Type	Default	Description
skipToId	string	'main-content'	Target ID for skip link
skipToText	string	'Skip to main content'	Skip link text
toastPosition	'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center'	'bottom-right'	Toast container position
children	Snippet	required	Main content
showToastContainer	boolean	true	Render the built-in ToastContainer (disable when the app mounts its own)

Features​

AppShell provides:

1. Skip Link - Accessibility feature allowing keyboard users to bypass navigation
2. Toast Container - Integrated notification system positioning
3. Base Styling - Consistent background and text colors from design tokens

Skip Link Configuration​

Customize the skip link for your layout:

<AppShell skipToId="content" skipToText="Skip to content">
  <nav>Navigation</nav>
  <main id="content">Main content</main>
</AppShell>

Toast Positioning​

Configure where toast notifications appear:

<AppShell toastPosition="top-right">
  <main>Content</main>
</AppShell>

Error Handling​

AppShell does not include built-in error boundaries to give you full control over error handling. Implement error handling at your application's root level:

<script>
  import { AppShell } from '@classic-homes/theme-svelte';

  let error = $state(null);

  function handleError(e) {
    error = e.error;
  }
</script>

<svelte:window on:error={handleError} />

{#if error}
  <div class="error-boundary">
    <h1>Something went wrong</h1>
    <button onclick={() => (error = null)}>Try again</button>
  </div>
{:else}
  <AppShell>
    <main>Your app content</main>
  </AppShell>
{/if}

Usage with Layout Components​

AppShell is typically used internally by higher-level layout components:

<!-- DashboardLayout, PublicLayout, AuthLayout, and ErrorLayout
     all compose AppShell internally -->
<DashboardLayout navigation={nav}>
  <p>Dashboard content</p>
</DashboardLayout>

For custom layouts, wrap your content with AppShell:

<AppShell>
  <header>Custom header</header>
  <main id="main-content">
    <slot />
  </main>
  <footer>Custom footer</footer>
</AppShell>

Accessibility​

• Skip link is visually hidden but focusable
• Skip link becomes visible on focus
• Proper focus management for keyboard navigation
• Semantic structure support

Related Components​

• DashboardLayout - Dashboard layout using AppShell
• PublicLayout - Public pages layout using AppShell
• Toast - Notification system