partial toolbar implementation

src/routes/+page.svelte

@@ -17,6 +17,9 @@
 	import TimezoneInput from '$lib/TimezoneInput.svelte';
 	import ToggleGroup from '$lib/ToggleGroup.svelte';
 	import ToggleSelect from '$lib/ToggleSelect.svelte';
+	import Toolbar, { toolbarItem } from '$lib/Toolbar.svelte';
+
+	import { BowlFood } from 'phosphor-svelte';
 
 	let dateInputValue = $state<Date | undefined>(undefined);
 	let checkboxValue = $state<CheckboxState>('indeterminate');
@@ -202,6 +205,26 @@
 	<ToggleSelect name="example-toggle-select">Toggle Me!</ToggleSelect>
 </div>
 
+<div class="component">
+	<p class="title">Toolbar</p>
+
+	<Toolbar
+		items={[
+			toolbarItem({
+				type: 'button',
+				title: 'Button Action',
+				render: {
+					type: 'component',
+					component: BowlFood,
+					props: {
+						size: '1.5em'
+					}
+				}
+			})
+		]}
+	/>
+</div>
+
 <Dialog
 	bind:open={dialogOpen}
 	title="Dialog Title"