Add test examples.

.cspell.json

@@ -1,4 +1,5 @@
 {
   "$schema": "https://raw.githubusercontent.com/streetsidesoftware/cspell/main/cspell.schema.json",
-  "import": "@kitschpatrol/cspell-config"
+  "import": "@kitschpatrol/cspell-config",
+  "words": ["0b5vr"]
 }

src/examples/tests/TestGridLayoutPane.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { Checkbox, Pane, Slider } from '$lib';
+	let colors = 0.95;
+	let darkMode = true;
+	let numbers = true;
+	let oneMore = true;
+</script>
+
+<Pane position="inline" theme={{ bladeValueWidth: '244px' }} width={337}>
+	<Slider bind:value={colors} min={0} max={1} label="Colors" />
+	<Checkbox bind:value={darkMode} label="Dark Mode" />
+	<Checkbox bind:value={numbers} label="Numbers" />
+	<Checkbox bind:value={oneMore} label="One More" />
+</Pane>
+
+<style>
+	:global(div.tp-rotv_c) {
+		display: flex;
+		flex-wrap: wrap;
+	}
+
+	:global(div.tp-lblv) {
+		flex-grow: 1;
+	}
+
+	:global(.tp-lblv:has(.tp-ckbv)) {
+		flex-direction: row-reverse;
+		flex-grow: 0;
+	}
+
+	:global(.tp-lblv_v:has(.tp-ckbv)) {
+		width: fit-content;
+	}
+</style>

src/examples/tests/TestInvisibleFolder.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { Checkbox, Folder, Pane } from '$lib';
+	let expanded = true;
+	let darkMode = true;
+	let numbers = true;
+</script>
+
+<Pane title="" userExpandable={false}>
+	<Checkbox bind:value={expanded} label="Expanded" />
+	<Folder {expanded}>
+		<Checkbox bind:value={darkMode} label="Dark Mode" />
+		<Checkbox bind:value={numbers} label="Numbers" />
+	</Folder>
+</Pane>