partial toolbar: basic writable store approach

src/routes/+page.svelte

@@ -17,13 +17,23 @@
 	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';
+	import { Toolbar, type ToolbarToggleState } from '$lib/Toolbar.svelte';
+	import {
+		ArrowUUpLeft,
+		ArrowUUpRight,
+		TextB,
+		TextItalic,
+		TextStrikethrough,
+		TextUnderline
+	} from 'phosphor-svelte';
 
 	let dateInputValue = $state<Date | undefined>(undefined);
 	let checkboxValue = $state<CheckboxState>('indeterminate');
 	let dialogOpen = $state(false);
+
+	const toolbar = new Toolbar();
+	const fontGroup = toolbar.group('font');
+	const { state: boldState, ...boldToggle } = toolbar.toggle({ group: 'font' });
 </script>
 
 <title>sui</title>
@@ -208,21 +218,59 @@
 <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 class="my-2">
+		<p>Bold is enabled: {$boldState}</p>
+	</div>
+
+	<div
+		class="border-sui-text flex w-full min-w-max items-center gap-4 border-b
+		bg-white px-3 py-3 text-neutral-700 shadow-xs"
+	>
+		<div class="flex items-center gap-1">
+			<button type="button" class="item" title="Undo" aria-label="undo">
+				<ArrowUUpLeft size="1.25em" />
+			</button>
+			<button type="button" class="item" title="Redo" aria-label="redo">
+				<ArrowUUpRight size="1.25em" />
+			</button>
+		</div>
+		<div class="bg-sui-text/50 w-[1px] self-stretch"></div>
+		<div class="flex items-center gap-1" {...fontGroup}>
+			<button
+				class="item"
+				title="Toggle Bold"
+				aria-label="bold"
+				{...boldToggle}
+				use:boldToggle.bindDataState
+			>
+				<TextB size="1.25em" />
+			</button>
+			<button
+				class="item"
+				title="Toggle Italic"
+				aria-label="italic"
+				{...toolbar.toggle({ group: 'font' })}
+			>
+				<TextItalic size="1.25em" />
+			</button>
+			<button
+				class="item"
+				title="Toggle Underline"
+				aria-label="underline"
+				{...toolbar.toggle({ group: 'font' })}
+			>
+				<TextUnderline size="1.25em" />
+			</button>
+			<button
+				class="item"
+				title="Toggle Strikethrough"
+				aria-label="strikethrough"
+				{...toolbar.toggle({ group: 'font' })}
+			>
+				<TextStrikethrough size="1.25em" />
+			</button>
+		</div>
+	</div>
 </div>
 
 <Dialog
@@ -247,4 +295,29 @@
 	.component {
 		@apply mb-6 rounded-lg border p-4;
 	}
+
+	.item {
+		@apply flex items-center;
+		padding: theme('spacing.1');
+		border-radius: theme('borderRadius.md');
+
+		&:hover {
+			background-color: theme('colors.sui-secondary.100');
+		}
+
+		&[data-state='on'] {
+			background-color: theme('colors.sui-secondary.200');
+			color: theme('colors.sui-accent.900');
+		}
+
+		/* &:focus {
+			@apply ring-accent-400 ring-2;
+		} */
+	}
+
+	.separator {
+		width: 1px;
+		background-color: theme('colors.neutral.300');
+		align-self: stretch;
+	}
 </style>