add tabpanels

src/lib/components/content.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { pane as navStore, type Pane } from '$lib/stores/nav';
+
+  export let pane: Pane;
+</script>
+
+<div id={`pane-${pane}`} hidden={pane !== $navStore} role="tabpanel"><slot /></div>

src/lib/components/nav-item.svelte

@@ -15,8 +15,8 @@
 </script>
 
 <li
-  aria-controls="nav-tree"
+  aria-controls={`pane-${$pane}`}
-  aria-selected={$pane === destination}
+  aria-selected={destination === $pane}
   role="tab"
   tabindex="0"
   on:click={navigate}

src/routes/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Content from '$lib/components/content.svelte';
   import Headline from '$lib/components/headline.svelte';
   import NavItem from '$lib/components/nav-item.svelte';
   import NavTree from '$lib/components/nav-tree.svelte';
@@ -15,3 +16,21 @@
     <NavItem destination="preview">preview</NavItem>
   </NavTree>
 </header>
+<main>
+  <Content pane="content">
+    <p>content</p>
+  </Content>
+  <Content pane="style">
+    <p>style</p>
+  </Content>
+  <Content pane="preview">
+    <p>preview</p>
+  </Content>
+</main>
+
+<style lang="less">
+  p {
+    margin: 0;
+    padding: @padding-md;
+  }
+</style>