oops

documentation/blog/2023-02-21-streaming-snapshots-sveltekit.md

@@ -147,7 +147,7 @@ For example, here is how you would capture and restore the value of a textarea:
 
 <form method="POST">
 	<label for="comment">Comment</label>
-	<textarea id="comment" bind:value comment} />
+	<textarea id="comment" bind:value={comment} />
 	<button>Post comment</button>
 </form>
 ```

documentation/docs/98-reference/.generated/compile-errors.md

@@ -424,12 +424,6 @@ Imports of `svelte/internal/*` are forbidden. It contains private runtime code w
 The arguments keyword cannot be used within the template or at the top level of a component
 ```
 
-### invalid_bind_directive
-
-```
-Bind directive getter/setter values (`bind:thing={ getter, setter }`) must be two JavaScript expressions separated by a single comma and enclosed in curly braces
-```
-
 ### js_parse_error
 
 ```

documentation/examples/05-bindings/00-text-inputs/App.svelte

@@ -2,5 +2,5 @@
 	let name = '';
 </script>
 
-<input bind:value name} placeholder="enter your name" />
+<input bind:value={name} placeholder="enter your name" />
 <p>Hello {name || 'stranger'}!</p>

documentation/examples/05-bindings/01-numeric-inputs/App.svelte

@@ -4,13 +4,13 @@
 </script>
 
 <label>
-	<input type="number" bind:value a} min="0" max="10" />
-	<input type="range" bind:value a} min="0" max="10" />
+	<input type="number" bind:value={a} min="0" max="10" />
+	<input type="range" bind:value={a} min="0" max="10" />
 </label>
 
 <label>
-	<input type="number" bind:value b} min="0" max="10" />
-	<input type="range" bind:value b} min="0" max="10" />
+	<input type="number" bind:value={b} min="0" max="10" />
+	<input type="range" bind:value={b} min="0" max="10" />
 </label>
 
 <p>{a} + {b} = {a + b}</p>

documentation/examples/05-bindings/02-checkbox-inputs/App.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked yes} />
+	<input type="checkbox" bind:checked={yes} />
 	Yes! Send me regular email spam
 </label>
 

documentation/examples/05-bindings/03-group-inputs/App.svelte

@@ -13,17 +13,17 @@
 <h2>Size</h2>
 
 <label>
-	<input type="radio" bind:group scoops} value={1} />
+	<input type="radio" bind:group={scoops} value={1} />
 	One scoop
 </label>
 
 <label>
-	<input type="radio" bind:group scoops} value={2} />
+	<input type="radio" bind:group={scoops} value={2} />
 	Two scoops
 </label>
 
 <label>
-	<input type="radio" bind:group scoops} value={3} />
+	<input type="radio" bind:group={scoops} value={3} />
 	Three scoops
 </label>
 
@@ -31,7 +31,7 @@
 
 {#each menu as flavour}
 	<label>
-		<input type="checkbox" bind:group flavours} value={flavour} />
+		<input type="checkbox" bind:group={flavours} value={flavour} />
 		{flavour}
 	</label>
 {/each}

documentation/examples/05-bindings/04-textarea-inputs/App.svelte

@@ -3,7 +3,7 @@
 	let text = `Some words are *italic*, some are **bold**`;
 </script>
 
-<textarea bind:value text} />
+<textarea bind:value={text} />
 
 {@html marked(text)}
 

documentation/examples/05-bindings/06-select-bindings/App.svelte

@@ -17,7 +17,7 @@
 <h2>Insecurity questions</h2>
 
 <form on:submit|preventDefault={handleSubmit}>
-	<select bind:value selected} on:change={() => (answer = '')}>
+	<select bind:value={selected} on:change={() => (answer = '')}>
 		{#each questions as question}
 			<option value={question}>
 				{question.text}
@@ -25,7 +25,7 @@
 		{/each}
 	</select>
 
-	<input bind:value answer} />
+	<input bind:value={answer} />
 
 	<button disabled={!answer} type="submit"> Submit </button>
 </form>

documentation/examples/05-bindings/07-multiple-select-bindings/App.svelte

@@ -13,23 +13,23 @@
 <h2>Size</h2>
 
 <label>
-	<input type="radio" bind:group scoops} value={1} />
+	<input type="radio" bind:group={scoops} value={1} />
 	One scoop
 </label>
 
 <label>
-	<input type="radio" bind:group scoops} value={2} />
+	<input type="radio" bind:group={scoops} value={2} />
 	Two scoops
 </label>
 
 <label>
-	<input type="radio" bind:group scoops} value={3} />
+	<input type="radio" bind:group={scoops} value={3} />
 	Three scoops
 </label>
 
 <h2>Flavours</h2>
 
-<select multiple bind:value flavours}>
+<select multiple bind:value={flavours}>
 	{#each menu as flavour}
 		<option value={flavour}>
 			{flavour}

documentation/examples/05-bindings/08-each-block-bindings/App.svelte

@@ -20,9 +20,9 @@
 
 {#each todos as todo}
 	<div>
-		<input type="checkbox" bind:checked todo.done} />
+		<input type="checkbox" bind:checked={todo.done} />
 
-		<input placeholder="What needs to be done?" bind:value todo.text} disabled={todo.done} />
+		<input placeholder="What needs to be done?" bind:value={todo.text} disabled={todo.done} />
 	</div>
 {/each}
 

documentation/examples/05-bindings/09-media-elements/App.svelte

@@ -60,8 +60,7 @@
 		on:touchmove|preventDefault={handleMove}
 		on:mousedown={handleMousedown}
 		on:mouseup={handleMouseup}
-		bind:currentTime
-		time}
+		bind:currentTime={time}
 		bind:duration
 		bind:paused
 	>

documentation/examples/05-bindings/10-dimensions/App.svelte

@@ -5,12 +5,12 @@
 	let text = 'edit me';
 </script>
 
-<input type="range" bind:value size} />
-<input bind:value text} />
+<input type="range" bind:value={size} />
+<input bind:value={text} />
 
 <p>size: {w}px x {h}px</p>
 
-<div bind:clientWidth w} bind:clientHeight h}>
+<div bind:clientWidth={w} bind:clientHeight={h}>
 	<span style="font-size: {size}px">{text}</span>
 </div>
 

documentation/examples/05-bindings/11-bind-this/App.svelte

@@ -38,7 +38,7 @@
 	});
 </script>
 
-<canvas bind:this canvas} width={32} height={32} />
+<canvas bind:this={canvas} width={32} height={32} />
 
 <style>
 	canvas {

documentation/examples/05-bindings/12-component-bindings/App.svelte

@@ -11,7 +11,7 @@
 
 <h1 class:pin>{view}</h1>
 
-<Keypad bind:value pin} on:submit={handleSubmit} />
+<Keypad bind:value={pin} on:submit={handleSubmit} />
 
 <style>
 	h1 {

documentation/examples/06-lifecycle/02-update/App.svelte

@@ -60,7 +60,7 @@
 <div class="chat">
 	<h1>Eliza</h1>
 
-	<div class="scrollable" bind:this div}>
+	<div class="scrollable" bind:this={div}>
 		{#each comments as comment}
 			<article class={comment.author}>
 				<span>{comment.text}</span>

documentation/examples/08-motion/01-spring/App.svelte

@@ -15,12 +15,12 @@
 <div style="position: absolute; right: 1em;">
 	<label>
 		<h3>stiffness ({coords.stiffness})</h3>
-		<input bind:value coords.stiffness} type="range" min="0" max="1" step="0.01" />
+		<input bind:value={coords.stiffness} type="range" min="0" max="1" step="0.01" />
 	</label>
 
 	<label>
 		<h3>damping ({coords.damping})</h3>
-		<input bind:value coords.damping} type="range" min="0" max="1" step="0.01" />
+		<input bind:value={coords.damping} type="range" min="0" max="1" step="0.01" />
 	</label>
 </div>
 

documentation/examples/09-transitions/00-transition/App.svelte

@@ -4,7 +4,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked visible} />
+	<input type="checkbox" bind:checked={visible} />
 	visible
 </label>
 

documentation/examples/09-transitions/01-adding-parameters-to-transitions/App.svelte

@@ -4,7 +4,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked visible} />
+	<input type="checkbox" bind:checked={visible} />
 	visible
 </label>
 

documentation/examples/09-transitions/02-in-and-out/App.svelte

@@ -4,7 +4,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked visible} />
+	<input type="checkbox" bind:checked={visible} />
 	visible
 </label>
 

documentation/examples/09-transitions/03-custom-css-transitions/App.svelte

@@ -23,7 +23,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked visible} />
+	<input type="checkbox" bind:checked={visible} />
 	visible
 </label>
 

documentation/examples/09-transitions/04-custom-js-transitions/App.svelte

@@ -22,7 +22,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked visible} />
+	<input type="checkbox" bind:checked={visible} />
 	visible
 </label>
 

documentation/examples/09-transitions/05-transition-events/App.svelte

@@ -8,7 +8,7 @@
 <p>status: {status}</p>
 
 <label>
-	<input type="checkbox" bind:checked visible} />
+	<input type="checkbox" bind:checked={visible} />
 	visible
 </label>
 

documentation/examples/10-animations/00-animate/App.svelte

@@ -57,7 +57,7 @@
 		<h2>todo</h2>
 		{#each todos.filter((t) => !t.done) as todo (todo.id)}
 			<label in:receive={{ key: todo.id }} out:send={{ key: todo.id }} animate:flip>
-				<input type="checkbox" bind:checked todo.done} />
+				<input type="checkbox" bind:checked={todo.done} />
 				{todo.description}
 				<button on:click={() => remove(todo)}>x</button>
 			</label>
@@ -68,7 +68,7 @@
 		<h2>done</h2>
 		{#each todos.filter((t) => t.done) as todo (todo.id)}
 			<label in:receive={{ key: todo.id }} out:send={{ key: todo.id }} animate:flip>
-				<input type="checkbox" bind:checked todo.done} />
+				<input type="checkbox" bind:checked={todo.done} />
 				{todo.description}
 				<button on:click={() => remove(todo)}>x</button>
 			</label>

documentation/examples/11-easing/00-easing/App.svelte

@@ -37,7 +37,7 @@
 	$: current && runAnimations();
 </script>
 
-<div bind:offsetWidth width} class="easing-vis">
+<div bind:offsetWidth={width} class="easing-vis">
 	<svg viewBox="0 0 1400 1802">
 		<g class="canvas">
 			<Grid x={$time} y={$value} />

documentation/examples/11-easing/00-easing/Controls.svelte

@@ -18,7 +18,7 @@
 	<div class="easing-types">
 		<h3>Ease</h3>
 		{#if mobile}
-			<select bind:value current_ease}>
+			<select bind:value={current_ease}>
 				{#each [...eases] as [name]}
 					<option value={name} class:selected={name === current_ease}>
 						{name}
@@ -36,7 +36,7 @@
 		{/if}
 		<h3>Type</h3>
 		{#if mobile}
-			<select bind:value current_type}>
+			<select bind:value={current_type}>
 				{#each types as [name, type]}
 					<option value={type}>
 						{name}
@@ -56,7 +56,7 @@
 	<h4>Duration</h4>
 	<div class="duration">
 		<span>
-			<input type="number" bind:value duration} min="0" step="100" />
+			<input type="number" bind:value={duration} min="0" step="100" />
 			<button class="number" on:click={() => (duration -= 100)}>-</button>
 			<button class="number" on:click={() => (duration += 100)}>+</button>
 		</span>

documentation/examples/12-svg/02-bar-chart/App.svelte

@@ -35,7 +35,7 @@
 
 <h2>US birthrate by year</h2>
 
-<div class="chart" bind:clientWidth width} bind:clientHeight height}>
+<div class="chart" bind:clientWidth={width} bind:clientHeight={height}>
 	<svg>
 		<!-- y axis -->
 		<g class="axis y-axis">

documentation/examples/12-svg/03-area-chart/App.svelte

@@ -29,7 +29,7 @@
 
 <h2>Arctic sea ice minimum</h2>
 
-<div class="chart" bind:clientWidth width} bind:clientHeight height}>
+<div class="chart" bind:clientWidth={width} bind:clientHeight={height}>
 	<svg>
 		<!-- y axis -->
 		<g class="axis y-axis" transform="translate(0, {padding.top})">

documentation/examples/12-svg/04-scatterplot/Scatterplot.svelte

@@ -31,7 +31,7 @@
 
 <svelte:window on:resize={resize} />
 
-<svg bind:this svg}>
+<svg bind:this={svg}>
 	<!-- y axis -->
 	<g class="axis y-axis">
 		{#each yTicks as tick}

documentation/examples/12-svg/05-svg-transitions/App.svelte

@@ -27,7 +27,7 @@
 {/if}
 
 <label>
-	<input type="checkbox" bind:checked visible} />
+	<input type="checkbox" bind:checked={visible} />
 	toggle me
 </label>
 

documentation/examples/13-actions/01-adding-parameters-to-actions/App.svelte

@@ -6,7 +6,7 @@
 </script>
 
 <label>
-	<input type="range" bind:value duration} max={2000} step={100} />
+	<input type="range" bind:value={duration} max={2000} step={100} />
 	{duration}ms
 </label>
 

documentation/examples/14-classes/01-class-shorthand/App.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked big} />
+	<input type="checkbox" bind:checked={big} />
 	big
 </label>
 

documentation/examples/15-composition/05-modal/Modal.svelte

@@ -7,7 +7,11 @@
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
-<dialog bind:this dialog} on:close={() => (showModal = false)} on:click|self={() => dialog.close()}>
+<dialog
+	bind:this={dialog}
+	on:close={() => (showModal = false)}
+	on:click|self={() => dialog.close()}
+>
 	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<div on:click|stopPropagation>
 		<slot name="header" />

documentation/examples/16-context/00-context-api/Map.svelte

@@ -31,7 +31,7 @@
 	<link rel="stylesheet" href="https://unpkg.com/mapbox-gl/dist/mapbox-gl.css" on:load={load} />
 </svelte:head>
 
-<div bind:this container}>
+<div bind:this={container}>
 	{#if map}
 		<slot />
 	{/if}

documentation/examples/17-special-elements/01-svelte-component/App.svelte

@@ -12,7 +12,7 @@
 	let selected = options[0];
 </script>
 
-<select bind:value selected}>
+<select bind:value={selected}>
 	{#each options as option}
 		<option value={option}>{option.color}</option>
 	{/each}

documentation/examples/17-special-elements/02-svelte-element/App.svelte

@@ -3,7 +3,7 @@
 	let selected = options[0];
 </script>
 
-<select bind:value selected}>
+<select bind:value={selected}>
 	{#each options as option}
 		<option value={option}>{option}</option>
 	{/each}

documentation/examples/17-special-elements/04-svelte-window-bindings/App.svelte

@@ -4,7 +4,7 @@
 	let y;
 </script>
 
-<svelte:window bind:scrollY y} />
+<svelte:window bind:scrollY={y} />
 
 <a class="parallax-container" href="https://www.firewatchgame.com">
 	{#each layers as layer}

documentation/examples/18-module-context/01-module-exports/AudioPlayer.svelte

@@ -35,7 +35,7 @@
 	<h2>{title}</h2>
 	<p><strong>{composer}</strong> / performed by {performer}</p>
 
-	<audio bind:this audio} bind:paused on:play={stopOthers} controls {src} />
+	<audio bind:this={audio} bind:paused on:play={stopOthers} controls {src} />
 </article>
 
 <style>

documentation/examples/19-debugging/00-debug/App.svelte

@@ -5,8 +5,8 @@
 	};
 </script>
 
-<input bind:value user.firstname} />
-<input bind:value user.lastname} />
+<input bind:value={user.firstname} />
+<input bind:value={user.lastname} />
 
 {@debug user}
 

documentation/examples/20-7guis/01-7guis-counter/App.svelte

@@ -3,5 +3,5 @@
 	let count = 0;
 </script>
 
-<input type="number" bind:value count} />
+<input type="number" bind:value={count} />
 <button on:click={() => (count += 1)}>count</button>

documentation/examples/20-7guis/03-7guis-flight-booker/App.svelte

@@ -37,13 +37,13 @@
 	}
 </script>
 
-<select bind:value isReturn}>
+<select bind:value={isReturn}>
 	<option value={false}>one-way flight</option>
 	<option value={true}>return flight</option>
 </select>
 
-<input type="date" bind:value start} />
-<input type="date" bind:value end} disabled={!isReturn} />
+<input type="date" bind:value={start} />
+<input type="date" bind:value={end} disabled={!isReturn} />
 
 <button on:click={bookFlight} disabled={isReturn && startDate >= endDate}>book</button>
 

documentation/examples/20-7guis/04-7guis-timer/App.svelte

@@ -31,7 +31,7 @@
 
 <label>
 	duration:
-	<input type="range" bind:value duration} min="1" max="20000" />
+	<input type="range" bind:value={duration} min="1" max="20000" />
 </label>
 
 <button on:click={() => (elapsed = 0)}>reset</button>

documentation/examples/20-7guis/05-7guis-crud/App.svelte

@@ -50,16 +50,16 @@
 	}
 </script>
 
-<input placeholder="filter prefix" bind:value prefix} />
+<input placeholder="filter prefix" bind:value={prefix} />
 
-<select bind:value i} size={5}>
+<select bind:value={i} size={5}>
 	{#each filteredPeople as person, i}
 		<option value={i}>{person.last}, {person.first}</option>
 	{/each}
 </select>
 
-<label><input bind:value first} placeholder="first" /></label>
-<label><input bind:value last} placeholder="last" /></label>
+<label><input bind:value={first} placeholder="first" /></label>
+<label><input bind:value={last} placeholder="last" /></label>
 
 <div class="buttons">
 	<button on:click={create} disabled={!first || !last}>create</button>

documentation/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte

@@ -15,7 +15,7 @@
 
 <!-- the text will flash red whenever
 		the `todo` object changes -->
-<button bind:this btn} on:click>
+<button bind:this={btn} on:click>
 	{todo.done ? '👍' : ''}
 	{todo.text}
 </button>

documentation/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte

@@ -13,7 +13,7 @@
 
 <!-- the text will flash red whenever
 		the `todo` object changes -->
-<button bind:this btn} on:click>
+<button bind:this={btn} on:click>
 	{todo.done ? '👍' : ''}
 	{todo.text}
 </button>

documentation/examples/99-embeds/20190420-blog-write-less-code/App.svelte

@@ -3,7 +3,7 @@
 	let b = 2;
 </script>
 
-<input type="number" bind:value a} />
-<input type="number" bind:value b} />
+<input type="number" bind:value={a} />
+<input type="number" bind:value={b} />
 
 <p>{a} + {b} = {a + b}</p>

documentation/tutorial/06-bindings/01-text-inputs/app-b/App.svelte

@@ -2,6 +2,6 @@
 	let name = 'world';
 </script>
 
-<input bind:value name} />
+<input bind:value={name} />
 
 <h1>Hello {name}!</h1>

documentation/tutorial/06-bindings/01-text-inputs/text.md

@@ -9,7 +9,7 @@ Sometimes it's useful to break that rule. Take the case of the `<input>` element
 Instead, we can use the `bind:value` directive:
 
 ```svelte
-<input bind:value name} />
+<input bind:value={name} />
 ```
 
 This means that not only will changes to the value of `name` update the input value, but changes to the input value will update `name`.

documentation/tutorial/06-bindings/02-numeric-inputs/app-b/App.svelte

@@ -4,13 +4,13 @@
 </script>
 
 <label>
-	<input type="number" bind:value a} min="0" max="10" />
-	<input type="range" bind:value a} min="0" max="10" />
+	<input type="number" bind:value={a} min="0" max="10" />
+	<input type="range" bind:value={a} min="0" max="10" />
 </label>
 
 <label>
-	<input type="number" bind:value b} min="0" max="10" />
-	<input type="range" bind:value b} min="0" max="10" />
+	<input type="number" bind:value={b} min="0" max="10" />
+	<input type="range" bind:value={b} min="0" max="10" />
 </label>
 
 <p>{a} + {b} = {a + b}</p>

documentation/tutorial/06-bindings/02-numeric-inputs/text.md

@@ -7,6 +7,6 @@ In the DOM, everything is a string. That's unhelpful when you're dealing with nu
 With `bind:value`, Svelte takes care of it for you:
 
 ```svelte
-<input type="number" bind:value a} min="0" max="10" />
-<input type="range" bind:value a} min="0" max="10" />
+<input type="number" bind:value={a} min="0" max="10" />
+<input type="range" bind:value={a} min="0" max="10" />
 ```

documentation/tutorial/06-bindings/03-checkbox-inputs/app-b/App.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked yes} />
+	<input type="checkbox" bind:checked={yes} />
 	Yes! Send me regular email spam
 </label>
 

documentation/tutorial/06-bindings/03-checkbox-inputs/text.md

@@ -5,5 +5,5 @@ title: Checkbox inputs
 Checkboxes are used for toggling between states. Instead of binding to `input.value`, we bind to `input.checked`:
 
 ```svelte
-<input type="checkbox" bind:checked yes} />
+<input type="checkbox" bind:checked={yes} />
 ```

documentation/tutorial/06-bindings/04-group-inputs/app-b/App.svelte

@@ -13,17 +13,17 @@
 <h2>Size</h2>
 
 <label>
-	<input type="radio" bind:group scoops} name="scoops" value={1} />
+	<input type="radio" bind:group={scoops} name="scoops" value={1} />
 	One scoop
 </label>
 
 <label>
-	<input type="radio" bind:group scoops} name="scoops" value={2} />
+	<input type="radio" bind:group={scoops} name="scoops" value={2} />
 	Two scoops
 </label>
 
 <label>
-	<input type="radio" bind:group scoops} name="scoops" value={3} />
+	<input type="radio" bind:group={scoops} name="scoops" value={3} />
 	Three scoops
 </label>
 
@@ -31,7 +31,7 @@
 
 {#each menu as flavour}
 	<label>
-		<input type="checkbox" bind:group flavours} name="flavours" value={flavour} />
+		<input type="checkbox" bind:group={flavours} name="flavours" value={flavour} />
 		{flavour}
 	</label>
 {/each}

documentation/tutorial/06-bindings/04-group-inputs/text.md

@@ -7,7 +7,7 @@ If you have multiple inputs relating to the same value, you can use `bind:group`
 Add `bind:group` to each input:
 
 ```svelte
-<input type="radio" bind:group scoops} name="scoops" value={1} />
+<input type="radio" bind:group={scoops} name="scoops" value={1} />
 ```
 
 In this case, we could make the code simpler by moving the checkbox inputs into an `each` block. First, add a `menu` variable to the `<script>` block...
@@ -23,7 +23,7 @@ let menu = ['Cookies and cream', 'Mint choc chip', 'Raspberry ripple'];
 
 {#each menu as flavour}
 	<label>
-		<input type="checkbox" bind:group flavours} name="flavours" value={flavour} />
+		<input type="checkbox" bind:group={flavours} name="flavours" value={flavour} />
 		{flavour}
 	</label>
 {/each}

documentation/tutorial/06-bindings/06-select-bindings/app-a/App.svelte

@@ -25,7 +25,7 @@
 		{/each}
 	</select>
 
-	<input bind:value answer} />
+	<input bind:value={answer} />
 
 	<button disabled={!answer} type="submit"> Submit </button>
 </form>

documentation/tutorial/06-bindings/06-select-bindings/app-b/App.svelte

@@ -17,7 +17,7 @@
 <h2>Insecurity questions</h2>
 
 <form on:submit|preventDefault={handleSubmit}>
-	<select bind:value selected} on:change={() => (answer = '')}>
+	<select bind:value={selected} on:change={() => (answer = '')}>
 		{#each questions as question}
 			<option value={question}>
 				{question.text}
@@ -25,7 +25,7 @@
 		{/each}
 	</select>
 
-	<input bind:value answer} />
+	<input bind:value={answer} />
 
 	<button disabled={!answer} type="submit"> Submit </button>
 </form>

documentation/tutorial/06-bindings/07-multiple-select-bindings/app-a/App.svelte

@@ -13,17 +13,17 @@
 <h2>Size</h2>
 
 <label>
-	<input type="radio" bind:group scoops} value={1} />
+	<input type="radio" bind:group={scoops} value={1} />
 	One scoop
 </label>
 
 <label>
-	<input type="radio" bind:group scoops} value={2} />
+	<input type="radio" bind:group={scoops} value={2} />
 	Two scoops
 </label>
 
 <label>
-	<input type="radio" bind:group scoops} value={3} />
+	<input type="radio" bind:group={scoops} value={3} />
 	Three scoops
 </label>
 
@@ -31,7 +31,7 @@
 
 {#each menu as flavour}
 	<label>
-		<input type="checkbox" bind:group flavours} value={flavour} />
+		<input type="checkbox" bind:group={flavours} value={flavour} />
 		{flavour}
 	</label>
 {/each}

documentation/tutorial/06-bindings/07-multiple-select-bindings/app-b/App.svelte

@@ -13,23 +13,23 @@
 <h2>Size</h2>
 
 <label>
-	<input type="radio" bind:group scoops} value={1} />
+	<input type="radio" bind:group={scoops} value={1} />
 	One scoop
 </label>
 
 <label>
-	<input type="radio" bind:group scoops} value={2} />
+	<input type="radio" bind:group={scoops} value={2} />
 	Two scoops
 </label>
 
 <label>
-	<input type="radio" bind:group scoops} value={3} />
+	<input type="radio" bind:group={scoops} value={3} />
 	Three scoops
 </label>
 
 <h2>Flavours</h2>
 
-<select multiple bind:value flavours}>
+<select multiple bind:value={flavours}>
 	{#each menu as flavour}
 		<option value={flavour}>
 			{flavour}

documentation/tutorial/06-bindings/07-multiple-select-bindings/text.md

@@ -9,7 +9,7 @@ Returning to our [earlier ice cream example](/tutorial/group-inputs), we can rep
 ```svelte
 <h2>Flavours</h2>
 
-<select multiple bind:value flavours}>
+<select multiple bind:value={flavours}>
 	{#each menu as flavour}
 		<option value={flavour}>
 			{flavour}

documentation/tutorial/06-bindings/08-contenteditable-bindings/app-b/App.svelte

@@ -2,7 +2,7 @@
 	let html = '<p>Write some text!</p>';
 </script>
 
-<div contenteditable="true" bind:innerHTML html} />
+<div contenteditable="true" bind:innerHTML={html} />
 
 <pre>{html}</pre>
 

documentation/tutorial/06-bindings/08-contenteditable-bindings/text.md

@@ -11,5 +11,5 @@ Elements with the `contenteditable` attribute support the following bindings:
 There are slight differences between each of these, read more about them [here](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent#Differences_from_innerText).
 
 ```svelte
-<div contenteditable="true" bind:innerHTML html} />
+<div contenteditable="true" bind:innerHTML={html} />
 ```

documentation/tutorial/06-bindings/09-each-block-bindings/app-b/App.svelte

@@ -20,9 +20,9 @@
 
 {#each todos as todo}
 	<div class:done={todo.done}>
-		<input type="checkbox" bind:checked todo.done} />
+		<input type="checkbox" bind:checked={todo.done} />
 
-		<input placeholder="What needs to be done?" bind:value todo.text} />
+		<input placeholder="What needs to be done?" bind:value={todo.text} />
 	</div>
 {/each}
 

documentation/tutorial/06-bindings/09-each-block-bindings/text.md

@@ -7,9 +7,9 @@ You can even bind to properties inside an `each` block.
 ```svelte
 {#each todos as todo}
 	<div class:done={todo.done}>
-		<input type="checkbox" bind:checked todo.done} />
+		<input type="checkbox" bind:checked={todo.done} />
 
-		<input placeholder="What needs to be done?" bind:value todo.text} />
+		<input placeholder="What needs to be done?" bind:value={todo.text} />
 	</div>
 {/each}
 ```

documentation/tutorial/06-bindings/10-media-elements/app-b/App.svelte

@@ -60,8 +60,7 @@
 		on:touchmove|preventDefault={handleMove}
 		on:mousedown={handleMousedown}
 		on:mouseup={handleMouseup}
-		bind:currentTime
-		time}
+		bind:currentTime={time}
 		bind:duration
 		bind:paused
 	>

documentation/tutorial/06-bindings/10-media-elements/text.md

@@ -14,8 +14,7 @@ On line 62, add `currentTime={time}`, `duration` and `paused` bindings:
 	on:touchmove|preventDefault={handleMove}
 	on:mousedown={handleMousedown}
 	on:mouseup={handleMouseup}
-	bind:currentTime
-	time}
+	bind:currentTime={time}
 	bind:duration
 	bind:paused
 >

documentation/tutorial/06-bindings/11-dimensions/app-a/App.svelte

@@ -5,8 +5,8 @@
 	let text = 'edit me';
 </script>
 
-<input type="range" bind:value size} />
-<input bind:value text} />
+<input type="range" bind:value={size} />
+<input bind:value={text} />
 
 <p>size: {w}px x {h}px</p>
 

documentation/tutorial/06-bindings/11-dimensions/app-b/App.svelte

@@ -5,12 +5,12 @@
 	let text = 'edit me';
 </script>
 
-<input type="range" bind:value size} />
-<input bind:value text} />
+<input type="range" bind:value={size} />
+<input bind:value={text} />
 
 <p>size: {w}px x {h}px</p>
 
-<div bind:clientWidth w} bind:clientHeight h}>
+<div bind:clientWidth={w} bind:clientHeight={h}>
 	<span style="font-size: {size}px">{text}</span>
 </div>
 

documentation/tutorial/06-bindings/11-dimensions/text.md

@@ -5,7 +5,7 @@ title: Dimensions
 Every block-level element has `clientWidth`, `clientHeight`, `offsetWidth` and `offsetHeight` bindings:
 
 ```svelte
-<div bind:clientWidth w} bind:clientHeight h}>
+<div bind:clientWidth={w} bind:clientHeight={h}>
 	<span style="font-size: {size}px">{text}</span>
 </div>
 ```

documentation/tutorial/06-bindings/12-bind-this/app-b/App.svelte

@@ -36,7 +36,7 @@
 	});
 </script>
 
-<canvas bind:this canvas} width={32} height={32} />
+<canvas bind:this={canvas} width={32} height={32} />
 
 <style>
 	canvas {

documentation/tutorial/06-bindings/12-bind-this/text.md

@@ -5,7 +5,7 @@ title: This
 The readonly `this` binding applies to every element (and component) and allows you to obtain a reference to rendered elements. For example, we can get a reference to a `<canvas>` element:
 
 ```svelte
-<canvas bind:this canvas} width={32} height={32} />
+<canvas bind:this={canvas} width={32} height={32} />
 ```
 
 Note that the value of `canvas` will be `undefined` until the component has mounted, so we put the logic inside the `onMount` [lifecycle function](/tutorial/onmount).

documentation/tutorial/06-bindings/13-component-bindings/app-b/App.svelte

@@ -11,4 +11,4 @@
 
 <h1 style="color: {pin ? '#333' : '#ccc'}">{view}</h1>
 
-<Keypad bind:value pin} on:submit={handleSubmit} />
+<Keypad bind:value={pin} on:submit={handleSubmit} />

documentation/tutorial/06-bindings/13-component-bindings/text.md

@@ -5,7 +5,7 @@ title: Component bindings
 Just as you can bind to properties of DOM elements, you can bind to component props. For example, we can bind to the `value` prop of this `<Keypad>` component as though it were a form element:
 
 ```svelte
-<Keypad bind:value pin} on:submit={handleSubmit} />
+<Keypad bind:value={pin} on:submit={handleSubmit} />
 ```
 
 Now, when the user interacts with the keypad, the value of `pin` in the parent component is immediately updated.

documentation/tutorial/06-bindings/14-component-this/app-a/InputField.svelte

@@ -6,4 +6,4 @@
 	}
 </script>
 
-<input bind:this input} />
+<input bind:this={input} />

documentation/tutorial/06-bindings/14-component-this/app-b/App.svelte

@@ -4,6 +4,6 @@
 	let field;
 </script>
 
-<InputField bind:this field} />
+<InputField bind:this={field} />
 
 <button on:click={() => field.focus()}>Focus field</button>

documentation/tutorial/06-bindings/14-component-this/app-b/InputField.svelte

@@ -6,4 +6,4 @@
 	}
 </script>
 
-<input bind:this input} />
+<input bind:this={input} />

documentation/tutorial/06-bindings/14-component-this/text.md

@@ -9,7 +9,7 @@ Just as you can bind to DOM elements, you can bind to component instances themse
 	let field;
 </script>
 
-<InputField bind:this field} />
+<InputField bind:this={field} />
 ```
 
 Now we can programmatically interact with this component using `field`.

documentation/tutorial/07-lifecycle/03-update/app-a/App.svelte

@@ -60,7 +60,7 @@
 <div class="chat">
 	<h1>Eliza</h1>
 
-	<div class="scrollable" bind:this div}>
+	<div class="scrollable" bind:this={div}>
 		{#each comments as comment}
 			<article class={comment.author}>
 				<span>{comment.text}</span>

documentation/tutorial/07-lifecycle/03-update/app-b/App.svelte

@@ -60,7 +60,7 @@
 <div class="chat">
 	<h1>Eliza</h1>
 
-	<div class="scrollable" bind:this div}>
+	<div class="scrollable" bind:this={div}>
 		{#each comments as comment}
 			<article class={comment.author}>
 				<span>{comment.text}</span>

documentation/tutorial/08-stores/06-store-bindings/app-b/App.svelte

@@ -3,6 +3,6 @@
 </script>
 
 <h1>{$greeting}</h1>
-<input bind:value $name} />
+<input bind:value={$name} />
 
 <button on:click={() => ($name += '!')}> Add exclamation mark! </button>

documentation/tutorial/08-stores/06-store-bindings/text.md

@@ -7,7 +7,7 @@ If a store is writable — i.e. it has a `set` method — you can bind to its va
 In this example we have a writable store `name` and a derived store `greeting`. Update the `<input>` element:
 
 ```svelte
-<input bind:value $name} />
+<input bind:value={$name} />
 ```
 
 Changing the input value will now update `name` and all its dependents.

documentation/tutorial/09-motion/02-spring/app-a/App.svelte

@@ -8,12 +8,12 @@
 <div style="position: absolute; right: 1em;">
 	<label>
 		<h3>stiffness ({coords.stiffness})</h3>
-		<input bind:value coords.stiffness} type="range" min="0" max="1" step="0.01" />
+		<input bind:value={coords.stiffness} type="range" min="0" max="1" step="0.01" />
 	</label>
 
 	<label>
 		<h3>damping ({coords.damping})</h3>
-		<input bind:value coords.damping} type="range" min="0" max="1" step="0.01" />
+		<input bind:value={coords.damping} type="range" min="0" max="1" step="0.01" />
 	</label>
 </div>
 

documentation/tutorial/09-motion/02-spring/app-b/App.svelte

@@ -15,12 +15,12 @@
 <div style="position: absolute; right: 1em;">
 	<label>
 		<h3>stiffness ({coords.stiffness})</h3>
-		<input bind:value coords.stiffness} type="range" min="0" max="1" step="0.01" />
+		<input bind:value={coords.stiffness} type="range" min="0" max="1" step="0.01" />
 	</label>
 
 	<label>
 		<h3>damping ({coords.damping})</h3>
-		<input bind:value coords.damping} type="range" min="0" max="1" step="0.01" />
+		<input bind:value={coords.damping} type="range" min="0" max="1" step="0.01" />
 	</label>
 </div>
 

documentation/tutorial/10-transitions/01-transition/app-a/App.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked visible} />
+	<input type="checkbox" bind:checked={visible} />
 	visible
 </label>
 

documentation/tutorial/10-transitions/01-transition/app-b/App.svelte

@@ -4,7 +4,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked visible} />
+	<input type="checkbox" bind:checked={visible} />
 	visible
 </label>
 

documentation/tutorial/10-transitions/02-adding-parameters-to-transitions/app-a/App.svelte

@@ -4,7 +4,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked visible} />
+	<input type="checkbox" bind:checked={visible} />
 	visible
 </label>
 

documentation/tutorial/10-transitions/02-adding-parameters-to-transitions/app-b/App.svelte

@@ -4,7 +4,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked visible} />
+	<input type="checkbox" bind:checked={visible} />
 	visible
 </label>
 

documentation/tutorial/10-transitions/03-in-and-out/app-a/App.svelte

@@ -4,7 +4,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked visible} />
+	<input type="checkbox" bind:checked={visible} />
 	visible
 </label>
 

documentation/tutorial/10-transitions/03-in-and-out/app-b/App.svelte

@@ -4,7 +4,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked visible} />
+	<input type="checkbox" bind:checked={visible} />
 	visible
 </label>
 

documentation/tutorial/10-transitions/04-custom-css-transitions/app-a/App.svelte

@@ -12,7 +12,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked visible} />
+	<input type="checkbox" bind:checked={visible} />
 	visible
 </label>
 

documentation/tutorial/10-transitions/04-custom-css-transitions/app-b/App.svelte

@@ -23,7 +23,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked visible} />
+	<input type="checkbox" bind:checked={visible} />
 	visible
 </label>
 

documentation/tutorial/10-transitions/05-custom-js-transitions/app-a/App.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked visible} />
+	<input type="checkbox" bind:checked={visible} />
 	visible
 </label>
 

documentation/tutorial/10-transitions/05-custom-js-transitions/app-b/App.svelte

@@ -22,7 +22,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked visible} />
+	<input type="checkbox" bind:checked={visible} />
 	visible
 </label>
 

documentation/tutorial/10-transitions/06-transition-events/app-a/App.svelte

@@ -8,7 +8,7 @@
 <p>status: {status}</p>
 
 <label>
-	<input type="checkbox" bind:checked visible} />
+	<input type="checkbox" bind:checked={visible} />
 	visible
 </label>
 

documentation/tutorial/10-transitions/06-transition-events/app-b/App.svelte

@@ -8,7 +8,7 @@
 <p>status: {status}</p>
 
 <label>
-	<input type="checkbox" bind:checked visible} />
+	<input type="checkbox" bind:checked={visible} />
 	visible
 </label>
 

documentation/tutorial/10-transitions/07-global-transitions/app-a/App.svelte

@@ -7,12 +7,12 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked showItems} />
+	<input type="checkbox" bind:checked={showItems} />
 	show list
 </label>
 
 <label>
-	<input type="range" bind:value i} max="10" />
+	<input type="range" bind:value={i} max="10" />
 </label>
 
 {#if showItems}

documentation/tutorial/10-transitions/07-global-transitions/app-b/App.svelte

@@ -7,12 +7,12 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked showItems} />
+	<input type="checkbox" bind:checked={showItems} />
 	show list
 </label>
 
 <label>
-	<input type="range" bind:value i} max="10" />
+	<input type="range" bind:value={i} max="10" />
 </label>
 
 {#if showItems}

documentation/tutorial/12-actions/02-adding-parameters-to-actions/app-a/App.svelte

@@ -6,7 +6,7 @@
 </script>
 
 <label>
-	<input type="range" bind:value duration} max={2000} step={100} />
+	<input type="range" bind:value={duration} max={2000} step={100} />
 	{duration}ms
 </label>
 

documentation/tutorial/12-actions/02-adding-parameters-to-actions/app-b/App.svelte

@@ -6,7 +6,7 @@
 </script>
 
 <label>
-	<input type="range" bind:value duration} max={2000} step={100} />
+	<input type="range" bind:value={duration} max={2000} step={100} />
 	{duration}ms
 </label>
 

documentation/tutorial/13-advanced-styling/02-class-shorthand/app-a/App.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked big} />
+	<input type="checkbox" bind:checked={big} />
 	big
 </label>
 

documentation/tutorial/13-advanced-styling/02-class-shorthand/app-b/App.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked big} />
+	<input type="checkbox" bind:checked={big} />
 	big
 </label>
 

documentation/tutorial/13-advanced-styling/03-inline-styles/app-a/App.svelte

@@ -3,7 +3,7 @@
 	$: color = bgOpacity < 0.6 ? '#000' : '#fff';
 </script>
 
-<input type="range" min="0" max="1" step="0.1" bind:value bgOpacity} />
+<input type="range" min="0" max="1" step="0.1" bind:value={bgOpacity} />
 
 <p>This is a paragraph.</p>