update

Author: Rich-Harris

apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/02-each-block-bindings/+assets/app-a/src/lib/App.svelte

@@ -24,7 +24,7 @@
 
 	<ul class="todos">
 		{#each todos as todo}
-			<li class:done={todo.done}>
+			<li class={{ done: todo.done }}>
 				<input
 					type="checkbox"
 					checked={todo.done}

apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/02-each-block-bindings/+assets/app-b/src/lib/App.svelte

@@ -24,7 +24,7 @@
 
 	<ul class="todos">
 		{#each todos as todo}
-			<li class:done={todo.done}>
+			<li class={{ done: todo.done }}>
 				<input
 					type="checkbox"
 					bind:checked={todo.done}

apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/02-each-block-bindings/index.md

@@ -7,7 +7,7 @@ You can bind to properties inside an `each` block.
 ```svelte
 /// file: App.svelte
 {#each todos as todo}
-	<li class:done={todo.done}>
+	<li class={{ done: todo.done }}>
 		<input
 			type="checkbox"
 			+++bind:+++checked={todo.done}

apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/+assets/app-a/src/lib/TodoList.svelte

@@ -5,7 +5,7 @@
 <ul class="todos">
 	{#each todos as todo (todo)}
 		<li
-			class:done={todo.done}
+			class={{ done: todo.done }}
 		>
 			<label>
 				<input type="checkbox" bind:checked={todo.done}/>

apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/+assets/app-b/src/lib/TodoList.svelte

@@ -7,7 +7,7 @@
 <ul class="todos">
 	{#each todos as todo (todo)}
 		<li
-			class:done={todo.done}
+			class={{ done: todo.done }}
 			in:receive={{ key: todo.id }}
 			out:send={{ key: todo.id }}
 		>

apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/index.md

@@ -24,7 +24,7 @@ Then, add them to the `<li>` element, using the `todo.id` property as a key to m
 ```svelte
 /// file: TodoList.svelte
 <li
-	class:done={todo.done}
+	class={{ done: todo.done }}
 	+++in:receive={{ key: todo.id }}+++
 	+++out:send={{ key: todo.id }}+++
 >

apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/02-animations/+assets/app-b/src/lib/TodoList.svelte

@@ -8,7 +8,7 @@
 <ul class="todos">
 	{#each todos as todo (todo)}
 		<li
-			class:done={todo.done}
+			class={{ done: todo.done }}
 			in:receive={{ key: todo.id }}
 			out:send={{ key: todo.id }}
 			animate:flip={{ duration: 200 }}

apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/02-animations/index.md

@@ -23,7 +23,7 @@ Then add it to the `<li>` elements:
 ```svelte
 /// file: TodoList.svelte
 <li
-	class:done={todo.done}
+	class={{ done: todo.done }}
 	in:receive={{ key: todo.id }}
 	out:send={{ key: todo.id }}
 	+++animate:flip+++
@@ -35,7 +35,7 @@ The movement is a little slow in this case, so we can add a `duration` parameter
 ```svelte
 /// file: TodoList.svelte
 <li
-	class:done={todo.done}
+	class={{ done: todo.done }}
 	in:receive={{ key: todo.id }}
 	out:send={{ key: todo.id }}
 	animate:flip+++={{ duration: 200 }}+++