checkbox: support disabled state

src/lib/Checkbox.svelte

@@ -12,6 +12,7 @@
 	interface Props {
 		name?: string;
 		required?: boolean;
+		disabled?: boolean;
 		value?: MaybeGetter<CheckboxState>;
 		color?: 'default' | 'contrast';
 		class?: ClassValue | null | undefined;
@@ -22,6 +23,7 @@
 	let {
 		name,
 		required = false,
+		disabled = false,
 		value = $bindable(),
 		color = 'contrast',
 		class: classValue,
@@ -58,12 +60,14 @@
 	<button
 		type="button"
 		{id}
+		{disabled}
 		class={[
 			'text-sui-text flex size-7 shrink-0 appearance-none items-center',
-			'justify-center rounded-lg shadow transition-all hover:opacity-75',
+			'justify-center rounded-lg shadow transition-all',
 			color === 'default' && 'bg-white',
 			color === 'contrast' && 'border-text/40 border bg-white',
-			!valid && 'border border-red-500'
+			!valid && 'border border-red-500',
+			disabled ? 'cursor-not-allowed opacity-50' : 'hover:opacity-75'
 		]}
 		onclick={() => {
 			const resolved = resolveGetter(value);