From 4010913b4930d8a175c99545545246a8581b1967 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Wed, 13 Nov 2024 11:04:48 +0100
Subject: [PATCH 01/15] tests

---
 .../samples/form-default-value/_config.js     | 245 ++++++++++++++++++
 .../samples/form-default-value/main.svelte    | 224 ++++++++++++++++
 2 files changed, 469 insertions(+)
 create mode 100644 packages/svelte/tests/runtime-runes/samples/form-default-value/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/form-default-value/main.svelte

diff --git a/packages/svelte/tests/runtime-runes/samples/form-default-value/_config.js b/packages/svelte/tests/runtime-runes/samples/form-default-value/_config.js
new file mode 100644
index 000000000000..5f18836e7377
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/form-default-value/_config.js
@@ -0,0 +1,245 @@
+import { test } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+	async test({ assert, target }) {
+		/**
+		 * @param {NodeListOf<any>} inputs
+		 * @param {string} field
+		 * @param {any | any[]} value
+		 */
+		function check_inputs(inputs, field, value) {
+			for (let i = 0; i < inputs.length; i++) {
+				assert.equal(inputs[i][field], Array.isArray(value) ? value[i] : value, `field ${i}`);
+			}
+		}
+
+		/**
+		 * @param {any} input
+		 * @param {string} field
+		 * @param {any} value
+		 */
+		function set_input(input, field, value) {
+			input[field] = value;
+			input.dispatchEvent(new Event('input', { bubbles: true }));
+		}
+
+		/**
+		 * @param {HTMLOptionElement} option
+		 */
+		function select_option(option) {
+			option.selected = true;
+			option.dispatchEvent(new Event('change', { bubbles: true }));
+		}
+
+		const after_reset = [];
+
+		const reset = /** @type {HTMLInputElement} */ (target.querySelector('input[type=reset]'));
+		const [
+			test1,
+			test2,
+			test3,
+			test4,
+			test5,
+			test6,
+			test7,
+			test8,
+			test9,
+			test10,
+			test11,
+			test12,
+			test13
+		] = target.querySelectorAll('div');
+		const [test14, test15, test16, test17] = target.querySelectorAll('select');
+
+		{
+			/** @type {NodeListOf<HTMLInputElement | HTMLTextAreaElement>} */
+			const inputs = test1.querySelectorAll('input, textarea');
+			check_inputs(inputs, 'value', 'x');
+
+			for (const input of inputs) {
+				set_input(input, 'value', 'foo');
+			}
+			flushSync();
+			check_inputs(inputs, 'value', 'foo');
+
+			after_reset.push(() => check_inputs(inputs, 'value', 'x'));
+		}
+
+		{
+			/** @type {NodeListOf<HTMLInputElement | HTMLTextAreaElement>} */
+			const inputs = test2.querySelectorAll('input, textarea');
+			check_inputs(inputs, 'value', 'y');
+
+			for (const input of inputs) {
+				set_input(input, 'value', 'foo');
+			}
+			flushSync();
+			check_inputs(inputs, 'value', 'foo');
+
+			after_reset.push(() => check_inputs(inputs, 'value', 'x'));
+		}
+
+		{
+			/** @type {NodeListOf<HTMLInputElement>} */
+			const inputs = test3.querySelectorAll('input');
+			check_inputs(inputs, 'checked', true);
+
+			for (const input of inputs) {
+				set_input(input, 'checked', false);
+			}
+			flushSync();
+			check_inputs(inputs, 'checked', false);
+
+			after_reset.push(() => check_inputs(inputs, 'checked', true));
+		}
+
+		{
+			/** @type {NodeListOf<HTMLInputElement>} */
+			const inputs = test4.querySelectorAll('input');
+			check_inputs(inputs, 'checked', false);
+
+			after_reset.push(() => check_inputs(inputs, 'checked', true));
+		}
+
+		{
+			/** @type {NodeListOf<HTMLInputElement>} */
+			const inputs = test5.querySelectorAll('input');
+			check_inputs(inputs, 'checked', true);
+
+			after_reset.push(() => check_inputs(inputs, 'checked', false));
+		}
+
+		{
+			/** @type {NodeListOf<HTMLInputElement>} */
+			const inputs = test5.querySelectorAll('input');
+			check_inputs(inputs, 'checked', true);
+
+			after_reset.push(() => check_inputs(inputs, 'checked', false));
+		}
+
+		{
+			/** @type {NodeListOf<HTMLInputElement>} */
+			const inputs = test6.querySelectorAll('input');
+			check_inputs(inputs, 'checked', [false, true, false]);
+
+			set_input(inputs[0], 'checked', true);
+			flushSync();
+			check_inputs(inputs, 'checked', [true, false, false]);
+
+			after_reset.push(() => check_inputs(inputs, 'checked', [false, true, false]));
+		}
+
+		{
+			/** @type {NodeListOf<HTMLInputElement>} */
+			const inputs = test7.querySelectorAll('input');
+			check_inputs(inputs, 'checked', [false, true, false]);
+
+			set_input(inputs[0], 'checked', true);
+			flushSync();
+			check_inputs(inputs, 'checked', [true, false, false]);
+
+			after_reset.push(() => check_inputs(inputs, 'checked', [false, true, false]));
+		}
+
+		{
+			/** @type {NodeListOf<HTMLInputElement>} */
+			const inputs = test8.querySelectorAll('input');
+			check_inputs(inputs, 'checked', [true, false, false]);
+
+			set_input(inputs[3], 'checked', true);
+			flushSync();
+			check_inputs(inputs, 'checked', [false, false, true]);
+
+			after_reset.push(() => check_inputs(inputs, 'checked', [false, true, false]));
+		}
+
+		{
+			/** @type {NodeListOf<HTMLInputElement>} */
+			const inputs = test9.querySelectorAll('input');
+			check_inputs(inputs, 'checked', [true, false, false]);
+
+			set_input(inputs[3], 'checked', true);
+			flushSync();
+			check_inputs(inputs, 'checked', [false, false, true]);
+
+			after_reset.push(() => check_inputs(inputs, 'checked', [false, true, false]));
+		}
+
+		{
+			/** @type {NodeListOf<HTMLInputElement>} */
+			const inputs = test12.querySelectorAll('input');
+			check_inputs(inputs, 'checked', [true, false, false]);
+
+			set_input(inputs[3], 'checked', true);
+			flushSync();
+			check_inputs(inputs, 'checked', [true, false, true]);
+
+			after_reset.push(() => check_inputs(inputs, 'checked', [false, true, false]));
+		}
+
+		{
+			/** @type {NodeListOf<HTMLInputElement>} */
+			const inputs = test13.querySelectorAll('input');
+			check_inputs(inputs, 'checked', [true, false, false]);
+
+			set_input(inputs[3], 'checked', true);
+			flushSync();
+			check_inputs(inputs, 'checked', [true, false, true]);
+
+			after_reset.push(() => check_inputs(inputs, 'checked', [false, true, false]));
+		}
+
+		{
+			/** @type {NodeListOf<HTMLOptionElement>} */
+			const options = test14.querySelectorAll('option');
+			check_inputs(options, 'selected', [false, true, false]);
+
+			select_option(options[3]);
+			flushSync();
+			check_inputs(options, 'selected', [false, false, true]);
+
+			after_reset.push(() => check_inputs(options, 'selected', [false, true, false]));
+		}
+
+		{
+			/** @type {NodeListOf<HTMLOptionElement>} */
+			const options = test15.querySelectorAll('option');
+			check_inputs(options, 'selected', [false, true, false]);
+
+			select_option(options[3]);
+			flushSync();
+			check_inputs(options, 'selected', [false, false, true]);
+
+			after_reset.push(() => check_inputs(options, 'selected', [false, true, false]));
+		}
+
+		{
+			/** @type {NodeListOf<HTMLOptionElement>} */
+			const options = test16.querySelectorAll('option');
+			check_inputs(options, 'selected', [false, false, true]);
+
+			select_option(options[0]);
+			flushSync();
+			check_inputs(options, 'selected', [true, false, false]);
+
+			after_reset.push(() => check_inputs(options, 'selected', [false, true, false]));
+		}
+
+		{
+			/** @type {NodeListOf<HTMLOptionElement>} */
+			const options = test17.querySelectorAll('option');
+			check_inputs(options, 'selected', [false, false, true]);
+
+			select_option(options[0]);
+			flushSync();
+			check_inputs(options, 'selected', [true, false, false]);
+
+			after_reset.push(() => check_inputs(options, 'selected', [false, true, false]));
+		}
+
+		reset.click();
+		flushSync();
+		after_reset.forEach((fn) => fn());
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/form-default-value/main.svelte b/packages/svelte/tests/runtime-runes/samples/form-default-value/main.svelte
new file mode 100644
index 000000000000..c27bd53796c2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/form-default-value/main.svelte
@@ -0,0 +1,224 @@
+<script>
+	let value1 = $state();
+	let value2 = $state();
+	let value3 = $state();
+	let value4 = $state();
+	let value5 = $state();
+	let value6 = $state();
+	let value7 = $state();
+	let value8 = $state();
+	let value9 = $state('y');
+	let value10 = $state('y');
+	let value11 = $state('y');
+	let value12 = $state('y');
+	let value13 = $state('y');
+	let value14 = $state('y');
+	let value15 = $state('y');
+	let value16 = $state('y');
+
+	let checked1 = $state();
+	let checked2 = $state();
+	let checked3 = $state();
+	let checked4 = $state();
+	let checked5 = $state(false);
+	let checked6 = $state(false);
+	let checked7 = $state(false);
+	let checked8 = $state(false);
+	let checked9 = $state(true);
+	let checked10 = $state(true);
+
+	let group1 = $state();
+	let group2 = $state();
+	let group3 = $state('a');
+	let group4 = $state('a');
+	let group5 = $state();
+	let group6 = $state();
+	let group7 = $state(['a']);
+	let group8 = $state(['a']);
+
+	let selected1 = $state();
+	let selected2 = $state();
+	let selected3 = $state('c');
+	let selected4 = $state('c');
+	let selected5 = $state();
+	let selected6 = $state();
+	let selected7 = $state(['c']);
+	let selected8 = $state(['c']);
+
+	let defaultValue = $state('x');
+	let defaultChecked = $state(true);
+</script>
+
+<form>
+	<p>Input/Textarea value</p>
+	<!-- defaultValue=x, value=undefined -->
+	<div class="test-1">
+		<input {defaultValue} bind:value={value1} />
+		<input {defaultValue} value={value2} />
+		<input defaultValue="x" bind:value={value3} />
+		<input defaultValue="x" value={value4} />
+		<textarea {defaultValue} value={value5}></textarea>
+		<textarea {defaultValue} bind:value={value6}></textarea>
+		<textarea defaultValue="x" value={value7}></textarea>
+		<textarea defaultValue="x" bind:value={value8}></textarea>
+	</div>
+
+	<!-- defaultValue=x, value=y -->
+	<div class="test-2">
+		<input {defaultValue} bind:value={value9} />
+		<input {defaultValue} value={value10} />
+		<input defaultValue="x" value={value11} />
+		<input defaultValue="x" bind:value={value12} />
+		<textarea {defaultValue} value={value13}></textarea>
+		<textarea {defaultValue} bind:value={value14}></textarea>
+		<textarea defaultValue="x" value={value15}></textarea>
+		<textarea defaultValue="x" bind:value={value16}></textarea>
+	</div>
+
+	<p>Input checked</p>
+	<!-- defaultChecked=true, checked=undefined -->
+	<div class="test-3">
+		<input type="checkbox" {defaultChecked} checked={checked1} />
+		<input type="checkbox" {defaultChecked} bind:checked={checked2} />
+		<input type="checkbox" defaultChecked checked={checked3} />
+		<input type="checkbox" defaultChecked bind:checked={checked4} />
+	</div>
+
+	<!-- defaultChecked=true, checked=false -->
+	<div class="test-4">
+		<input type="checkbox" {defaultChecked} checked={checked5} />
+		<input type="checkbox" {defaultChecked} bind:checked={checked6} />
+		<input type="checkbox" defaultChecked checked={checked7} />
+		<input type="checkbox" defaultChecked bind:checked={checked8} />
+	</div>
+
+	<!-- defaultChecked=false, checked=true -->
+	<div class="test-5">
+		<input type="checkbox" defaultChecked={false} checked={checked9} />
+		<input type="checkbox" defaultChecked={false} bind:checked={checked10} />
+	</div>
+
+	<p>Input group (radio)</p>
+	<!-- group with static checked, group=undefined -->
+	<div class="test-6">
+		<input type="radio" value="a" bind:group={group1} />
+		<input type="radio" value="b" bind:group={group1} checked />
+		<input type="radio" value="c" bind:group={group1} />
+	</div>
+
+	<!-- group with dynamic checked, group=undefined -->
+	<div class="test-7">
+		<input type="radio" value="a" bind:group={group2} />
+		<input type="radio" value="b" bind:group={group2} checked={defaultChecked} />
+		<input type="radio" value="c" bind:group={group2} />
+	</div>
+
+	<!-- group with static checked, group=something else than default -->
+	<div class="test-8">
+		<input type="radio" value="a" bind:group={group3} />
+		<input type="radio" value="b" bind:group={group3} checked />
+		<input type="radio" value="c" bind:group={group3} />
+	</div>
+
+	<!-- group with dynamic checked, group=something else than default -->
+	<div class="test-9">
+		<input type="radio" value="a" bind:group={group4} />
+		<input type="radio" value="b" bind:group={group4} checked={defaultChecked} />
+		<input type="radio" value="c" bind:group={group4} />
+	</div>
+
+	<p>Input group (checkbox)</p>
+    <!-- TODO, right now we say "group is undefined -> checked takes precedence";
+         that does not work with checkbox groups currently because it requires an empty array.
+         What to do? -->
+	<!-- group with static checked, group=undefined -->
+	<div class="test-10">
+		<!-- <input type="checkbox" value="a" bind:group={group5} />
+		<input type="checkbox" value="b" bind:group={group5} checked />
+		<input type="checkbox" value="c" bind:group={group5} /> -->
+	</div>
+
+	<!-- group with dynamic checked, group=undefined -->
+	<div class="test-11">
+		<!-- <input type="checkbox" value="a" bind:group={group6} />
+		<input type="checkbox" value="b" bind:group={group6} checked={defaultChecked} />
+		<input type="checkbox" value="c" bind:group={group6} /> -->
+	</div>
+
+	<!-- group with static checked, group=something else than default -->
+	<div class="test-12">
+		<input type="checkbox" value="a" bind:group={group7} />
+		<input type="checkbox" value="b" bind:group={group7} checked />
+		<input type="checkbox" value="c" bind:group={group7} />
+	</div>
+
+	<!-- group with dynamic checked, group=something else than default -->
+	<div class="test-13">
+		<input type="checkbox" value="a" bind:group={group8} />
+		<input type="checkbox" value="b" bind:group={group8} checked={defaultChecked} />
+		<input type="checkbox" value="c" bind:group={group8} />
+	</div>
+
+	<p>Select (single)</p>
+	<!-- select with static checked, value=undefined-->
+	<select bind:value={selected1}>
+		<option value="a">A</option>
+		<option value="b" selected>B</option>
+		<option value="c">C</option>
+	</select>
+
+	<!-- select with dynamic checked, value=undefined-->
+	<select bind:value={selected2}>
+		<option value="a">A</option>
+		<option value="b" selected={defaultChecked}>B</option>
+		<option value="c">C</option>
+	</select>
+
+	<!-- select with static checked, value=something else than default-->
+	<select bind:value={selected3}>
+		<option value="a">A</option>
+		<option value="b" selected>B</option>
+		<option value="c">C</option>
+	</select>
+
+	<!-- select with dynamic checked, value=something else than default-->
+	<select bind:value={selected4}>
+		<option value="a">A</option>
+		<option value="b" selected={defaultChecked}>B</option>
+		<option value="c">C</option>
+	</select>
+
+	<p>Select (multiple)</p>
+    <!-- TODO, right now we say "value is undefined -> selected takes precedence";
+         that does not work with multiple currently because it requires an empty array.
+         What to do? -->
+	<!-- select with static checked, value=undefined-->
+	<!-- <select multiple bind:value={selected5}>
+		<option value="a">A</option>
+		<option value="b" selected>B</option>
+		<option value="c">C</option>
+	</select> -->
+
+	<!-- select with dynamic checked, value=undefined-->
+	<!-- <select multiple bind:value={selected6}>
+		<option value="a">A</option>
+		<option value="b" selected={defaultChecked}>B</option>
+		<option value="c">C</option>
+	</select> -->
+
+	<!-- select with static checked, value=something else than default-->
+	<select multiple bind:value={selected7}>
+		<option value="a">A</option>
+		<option value="b" selected>B</option>
+		<option value="c">C</option>
+	</select>
+
+	<!-- select with dynamic checked, value=something else than default-->
+	<select multiple bind:value={selected8}>
+		<option value="a">A</option>
+		<option value="b" selected={defaultChecked}>B</option>
+		<option value="c">C</option>
+	</select>
+
+	<input type="reset" value="Reset" />
+</form>

From 6d0b3240fb9141e7f7ab527af283b2a5d0dac5da Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Wed, 13 Nov 2024 11:04:53 +0100
Subject: [PATCH 02/15] typings

---
 packages/svelte/elements.d.ts | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/svelte/elements.d.ts b/packages/svelte/elements.d.ts
index 8746b29e250a..75c13284897b 100644
--- a/packages/svelte/elements.d.ts
+++ b/packages/svelte/elements.d.ts
@@ -1085,6 +1085,11 @@ export interface HTMLInputAttributes extends HTMLAttributes<HTMLInputElement> {
 	step?: number | string | undefined | null;
 	type?: HTMLInputTypeAttribute | undefined | null;
 	value?: any;
+	// needs both casing variants because language tools does lowercase names of non-shorthand attributes
+	defaultValue?: any;
+	defaultvalue?: any;
+	defaultChecked?: any;
+	defaultchecked?: any;
 	width?: number | string | undefined | null;
 	webkitdirectory?: boolean | undefined | null;
 
@@ -1366,6 +1371,9 @@ export interface HTMLTextareaAttributes extends HTMLAttributes<HTMLTextAreaEleme
 	required?: boolean | undefined | null;
 	rows?: number | undefined | null;
 	value?: string | string[] | number | undefined | null;
+	// needs both casing variants because language tools does lowercase names of non-shorthand attributes
+	defaultValue?: string | string[] | number | undefined | null;
+	defaultvalue?: string | string[] | number | undefined | null;
 	wrap?: 'hard' | 'soft' | undefined | null;
 
 	'on:change'?: ChangeEventHandler<HTMLTextAreaElement> | undefined | null;

From b44f949189368562133812c02e1256ef9d5dcf1b Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Wed, 13 Nov 2024 11:14:02 +0100
Subject: [PATCH 03/15] implement for defaultValue/defaultChecked on inputs

---
 .../2-analyze/visitors/RegularElement.js      |  6 +--
 .../client/visitors/RegularElement.js         | 40 +++++++++++--------
 .../client/visitors/shared/fragment.js        |  3 +-
 .../server/visitors/shared/element.js         |  3 +-
 .../client/dom/elements/bindings/input.js     | 30 +++++++++-----
 packages/svelte/src/utils.js                  | 19 ++++++++-
 6 files changed, 67 insertions(+), 34 deletions(-)

diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
index 60bd1dd0c5c7..d5964f9ae12a 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
@@ -1,6 +1,6 @@
 /** @import { AST } from '#compiler' */
 /** @import { Context } from '../types' */
-import { is_mathml, is_svg, is_void } from '../../../../utils.js';
+import { cannot_be_set_statically, is_mathml, is_svg, is_void } from '../../../../utils.js';
 import {
 	is_tag_valid_with_ancestor,
 	is_tag_valid_with_parent
@@ -77,9 +77,7 @@ export function RegularElement(node, context) {
 
 	if (
 		node.attributes.some(
-			(attribute) =>
-				attribute.type === 'Attribute' &&
-				(attribute.name === 'autofocus' || attribute.name === 'muted')
+			(attribute) => attribute.type === 'Attribute' && cannot_be_set_statically(attribute.name)
 		)
 	) {
 		mark_subtree_dynamic(context.path);
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
index 4d3cebcee6fe..f48e33ef5245 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
@@ -4,6 +4,7 @@
 /** @import { ComponentClientTransformState, ComponentContext } from '../types' */
 /** @import { Scope } from '../../../scope' */
 import {
+	cannot_be_set_statically,
 	is_boolean_attribute,
 	is_dom_property,
 	is_load_error_element,
@@ -181,20 +182,28 @@ export function RegularElement(node, context) {
 		}
 	}
 
-	if (
-		node.name === 'input' &&
-		(has_spread ||
-			bindings.has('value') ||
-			bindings.has('checked') ||
-			bindings.has('group') ||
-			attributes.some(
-				(attribute) =>
-					attribute.type === 'Attribute' &&
-					(attribute.name === 'value' || attribute.name === 'checked') &&
-					!is_text_attribute(attribute)
-			))
-	) {
-		context.state.init.push(b.stmt(b.call('$.remove_input_defaults', context.state.node)));
+	if (node.name === 'input') {
+		const has_value_attribute = attributes.some(
+			(attribute) =>
+				attribute.type === 'Attribute' &&
+				(attribute.name === 'value' || attribute.name === 'checked') &&
+				!is_text_attribute(attribute)
+		);
+		const has_default_value_attribute = attributes.some(
+			(attribute) =>
+				attribute.type === 'Attribute' &&
+				(attribute.name === 'defaultValue' || attribute.name === 'defaultChecked')
+		);
+		if (
+			!has_default_value_attribute &&
+			(has_spread ||
+				bindings.has('value') ||
+				bindings.has('checked') ||
+				bindings.has('group') ||
+				(!bindings.has('group') && has_value_attribute))
+		) {
+			context.state.init.push(b.stmt(b.call('$.remove_input_defaults', context.state.node)));
+		}
 	}
 
 	if (node.name === 'textarea') {
@@ -272,8 +281,7 @@ export function RegularElement(node, context) {
 
 			if (
 				!is_custom_element &&
-				attribute.name !== 'autofocus' &&
-				attribute.name !== 'muted' &&
+				!cannot_be_set_statically(attribute.name) &&
 				(attribute.value === true || is_text_attribute(attribute))
 			) {
 				const name = get_attribute_name(node, attribute);
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
index 3b009fb5b589..dbaa11ff4459 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
@@ -1,6 +1,7 @@
 /** @import { Expression } from 'estree' */
 /** @import { AST, SvelteNode } from '#compiler' */
 /** @import { ComponentContext } from '../../types' */
+import { cannot_be_set_statically } from '../../../../../../utils.js';
 import { is_event_attribute, is_text_attribute } from '../../../../../utils/ast.js';
 import * as b from '../../../../../utils/builders.js';
 import { is_inlinable_expression } from '../../utils.js';
@@ -141,7 +142,7 @@ function is_static_element(node, state) {
 			return false;
 		}
 
-		if (attribute.name === 'autofocus' || attribute.name === 'muted') {
+		if (cannot_be_set_statically(attribute.name)) {
 			return false;
 		}
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
index c386c4f7c05e..4a1c7e287bd5 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
@@ -82,7 +82,8 @@ export function build_element_attributes(node, context) {
 				) {
 					events_to_capture.add(attribute.name);
 				}
-			} else {
+				// the defaultValue/defaultChecked properties don't exist as attributes
+			} else if (attribute.name !== 'defaultValue' && attribute.name !== 'defaultChecked') {
 				if (attribute.name === 'class') {
 					class_index = attributes.length;
 				} else if (attribute.name === 'style') {
diff --git a/packages/svelte/src/internal/client/dom/elements/bindings/input.js b/packages/svelte/src/internal/client/dom/elements/bindings/input.js
index e528d1699e48..b37cd704b63b 100644
--- a/packages/svelte/src/internal/client/dom/elements/bindings/input.js
+++ b/packages/svelte/src/internal/client/dom/elements/bindings/input.js
@@ -1,6 +1,6 @@
 import { DEV } from 'esm-env';
 import { render_effect, teardown } from '../../../reactivity/effects.js';
-import { listen_to_event_and_reset_event, without_reactive_context } from './shared.js';
+import { listen_to_event_and_reset_event } from './shared.js';
 import * as e from '../../../errors.js';
 import { is } from '../../../proxy.js';
 import { queue_micro_task } from '../../task.js';
@@ -34,6 +34,17 @@ export function bind_value(input, get, set = get) {
 		}
 	});
 
+	if (
+		// If we are hydrating and the value has since changed,
+		// then use the update value from the input instead.
+		(hydrating && input.defaultValue !== input.value) ||
+		// If defaultValue is set, then value == defaultValue
+		// TODO Svelte 6: remove input.value check and set to empty string?
+		(get() == null && input.value)
+	) {
+		set(input.value);
+	}
+
 	render_effect(() => {
 		if (DEV && input.type === 'checkbox') {
 			// TODO should this happen in prod too?
@@ -42,13 +53,6 @@ export function bind_value(input, get, set = get) {
 
 		var value = get();
 
-		// If we are hydrating and the value has since changed, then use the update value
-		// from the input instead.
-		if (hydrating && input.defaultValue !== input.value) {
-			set(input.value);
-			return;
-		}
-
 		if (is_numberlike_input(input) && value === to_number(input.value)) {
 			// handles 0 vs 00 case (see https://github.com/sveltejs/svelte/issues/9959)
 			return;
@@ -180,8 +184,14 @@ export function bind_checked(input, get, set = get) {
 		set(value);
 	});
 
-	if (get() == undefined) {
-		set(false);
+	if (
+		// If we are hydrating and the value has since changed,
+		// then use the update value from the input instead.
+		(hydrating && input.defaultChecked !== input.checked) ||
+		// If defaultChecked is set, then checked == defaultChecked
+		get() == null
+	) {
+		set(input.checked);
 	}
 
 	render_effect(() => {
diff --git a/packages/svelte/src/utils.js b/packages/svelte/src/utils.js
index 60ec364e6fdd..987dea465e24 100644
--- a/packages/svelte/src/utils.js
+++ b/packages/svelte/src/utils.js
@@ -192,7 +192,9 @@ const ATTRIBUTE_ALIASES = {
 	ismap: 'isMap',
 	nomodule: 'noModule',
 	playsinline: 'playsInline',
-	readonly: 'readOnly'
+	readonly: 'readOnly',
+	defaultvalue: 'defaultValue',
+	defaultchecked: 'defaultChecked'
 };
 
 /**
@@ -212,7 +214,9 @@ const DOM_PROPERTIES = [
 	'readOnly',
 	'value',
 	'inert',
-	'volume'
+	'volume',
+	'defaultValue',
+	'defaultChecked'
 ];
 
 /**
@@ -222,6 +226,17 @@ export function is_dom_property(name) {
 	return DOM_PROPERTIES.includes(name);
 }
 
+const NON_STATIC_PROPERTIES = ['autofocus', 'muted', 'defaultValue', 'defaultChecked'];
+
+/**
+ * Returns `true` if the given attribute cannot be set through the template
+ * string, i.e. needs some kind of JavaScript handling to work.
+ * @param {string} name
+ */
+export function cannot_be_set_statically(name) {
+	return NON_STATIC_PROPERTIES.includes(name);
+}
+
 /**
  * Subset of delegated events which should be passive by default.
  * These two are already passive via browser defaults on window, document and body.

From bc43171e85ed762fff8a6c8cdd84fdf7138b2903 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Wed, 13 Nov 2024 11:14:17 +0100
Subject: [PATCH 04/15] docs (draft)

---
 .../docs/03-template-syntax/11-bind.md        | 54 ++++++++++++++++++-
 1 file changed, 52 insertions(+), 2 deletions(-)

diff --git a/documentation/docs/03-template-syntax/11-bind.md b/documentation/docs/03-template-syntax/11-bind.md
index 7dd03a6b04d7..d1fcfa2ce047 100644
--- a/documentation/docs/03-template-syntax/11-bind.md
+++ b/documentation/docs/03-template-syntax/11-bind.md
@@ -53,6 +53,19 @@ In the case of a numeric input (`type="number"` or `type="range"`), the value wi
 
 If the input is empty or invalid (in the case of `type="number"`), the value is `undefined`.
 
+You can give the input a default value by setting the `defaultValue` property. This way, when the input is part of a form and its `form.reset()` method is invoked, it will revert to that value instead of the empty string. Note that for the initial render the value of the binding takes precedence if it's not `null` or `undefined`.
+
+```svelte
+<script>
+	let value = $state('');
+</script>
+
+<form>
+	<input bind:value defaultValue="x">
+	<input type="reset" value="Reset">
+</form>
+```
+
 ## `<input bind:checked>`
 
 Checkbox and radio inputs can be bound with `bind:checked`:
@@ -64,16 +77,29 @@ Checkbox and radio inputs can be bound with `bind:checked`:
 </label>
 ```
 
+You can give the input a default value by setting the `defaultChecked` property. This way, when the input is part of a form and its `form.reset()` method is invoked, it will revert to that value instead of `false`. Note that for the initial render the value of the binding takes precedence if it's not `null` or `undefined`.
+
+```svelte
+<script>
+	let checked = $state(true);
+</script>
+
+<form>
+	<input type="checkbox" bind:checked defaultChecked={true}>
+	<input type="reset" value="Reset">
+</form>
+```
+
 ## `<input bind:group>`
 
 Inputs that work together can use `bind:group`.
 
 ```svelte
 <script>
-	let tortilla = 'Plain';
+	let tortilla = $state('Plain');
 
 	/** @type {Array<string>} */
-	let fillings = [];
+	let fillings = $state([]);
 </script>
 
 <!-- grouped radio inputs are mutually exclusive -->
@@ -88,6 +114,20 @@ Inputs that work together can use `bind:group`.
 <input type="checkbox" bind:group={fillings} value="Guac (extra)" />
 ```
 
+You can give the group a default value by setting the `checked` property on the elements that should be selected initially. This way, when the input is part of a form and its `form.reset()` method is invoked, it will revert to that value instead of the empty string (for radio groups) or the empty array (for checkbox groups). Note that for the initial render the value of the binding takes precedence if it's not `null` or `undefined`.
+
+```svelte
+<script>
+	let tortilla = $state('Plain');
+</script>
+
+<form>
+	<input type="radio" bind:group={tortilla} value="Plain" checked />
+	<input type="radio" bind:group={tortilla} value="Whole wheat" />
+	<input type="reset" value="Reset">
+</form>
+```
+
 > [!NOTE] `bind:group` only works if the inputs are in the same Svelte component.
 
 ## `<input bind:files>`
@@ -146,6 +186,16 @@ When the value of an `<option>` matches its text content, the attribute can be o
 </select>
 ```
 
+You can give the select a default value by setting the `selected` property on the elements that should be selected initially. This way, when the select is part of a form and its `form.reset()` method is invoked, it will revert to that value instead of the empty string (for single-value selects) or the empty array (for mult-value selects). Note that for the initial render the value of the binding takes precedence if it's not `null` or `undefined`.
+
+```svelte
+<select bind:value={selected}>
+	<option value={a}>a</option>
+	<option value={b} selected>b</option>
+	<option value={c}>c</option>
+</select>
+```
+
 ## `<audio>`
 
 `<audio>` elements have their own set of bindings — five two-way ones...

From 3eebc3aa0a147b45ef5bab3222ed8a7964afa615 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Sun, 24 Nov 2024 12:19:56 +0100
Subject: [PATCH 05/15] selected

---
 .../3-transform/client/visitors/RegularElement.js |  2 ++
 .../internal/client/dom/elements/attributes.js    | 15 +++++++++++++++
 packages/svelte/src/internal/client/index.js      |  3 ++-
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
index 9201a0ace1a1..56f7b6d6f0cd 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
@@ -563,6 +563,8 @@ function build_element_attribute_update_assignment(element, node_id, attribute,
 		update = b.stmt(b.call('$.set_value', node_id, value));
 	} else if (name === 'checked') {
 		update = b.stmt(b.call('$.set_checked', node_id, value));
+	} else if (name === 'selected') {
+		update = b.stmt(b.call('$.set_selected', node_id, value));
 	} else if (is_dom_property(name)) {
 		update = b.stmt(b.assignment('=', b.member(node_id, name), value));
 	} else {
diff --git a/packages/svelte/src/internal/client/dom/elements/attributes.js b/packages/svelte/src/internal/client/dom/elements/attributes.js
index d927af543ff2..9fa78ecf7668 100644
--- a/packages/svelte/src/internal/client/dom/elements/attributes.js
+++ b/packages/svelte/src/internal/client/dom/elements/attributes.js
@@ -84,6 +84,21 @@ export function set_checked(element, checked) {
 	element.checked = checked;
 }
 
+/**
+ * Sets the `selected` attribute on an `option` element.
+ * Not set through the property because that doesn't reflect to the DOM,
+ * which means it wouldn't be taken into account when a form is reset.
+ * @param {HTMLOptionElement} element
+ * @param {boolean} selected
+ */
+export function set_selected(element, selected) {
+	if (selected) {
+		element.setAttribute('selected', '');
+	} else {
+		element.removeAttribute('selected');
+	}
+}
+
 /**
  * @param {Element} element
  * @param {string} attribute
diff --git a/packages/svelte/src/internal/client/index.js b/packages/svelte/src/internal/client/index.js
index 6fd749b42cfa..51518fef5c53 100644
--- a/packages/svelte/src/internal/client/index.js
+++ b/packages/svelte/src/internal/client/index.js
@@ -33,7 +33,8 @@ export {
 	set_xlink_attribute,
 	handle_lazy_img,
 	set_value,
-	set_checked
+	set_checked,
+	set_selected
 } from './dom/elements/attributes.js';
 export { set_class, set_svg_class, set_mathml_class, toggle_class } from './dom/elements/class.js';
 export { apply, event, delegate, replay_events } from './dom/elements/events.js';

From 0d860231dc612cda2160a2446337ee2a6aaffb57 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Mon, 25 Nov 2024 10:21:37 +0100
Subject: [PATCH 06/15] fix test

---
 .../samples/form-default-value/_config.js     | 102 ++----------------
 .../samples/form-default-value/main.svelte    |  99 ++---------------
 2 files changed, 16 insertions(+), 185 deletions(-)

diff --git a/packages/svelte/tests/runtime-runes/samples/form-default-value/_config.js b/packages/svelte/tests/runtime-runes/samples/form-default-value/_config.js
index 5f18836e7377..622ed4c92b3b 100644
--- a/packages/svelte/tests/runtime-runes/samples/form-default-value/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/form-default-value/_config.js
@@ -35,22 +35,8 @@ export default test({
 		const after_reset = [];
 
 		const reset = /** @type {HTMLInputElement} */ (target.querySelector('input[type=reset]'));
-		const [
-			test1,
-			test2,
-			test3,
-			test4,
-			test5,
-			test6,
-			test7,
-			test8,
-			test9,
-			test10,
-			test11,
-			test12,
-			test13
-		] = target.querySelectorAll('div');
-		const [test14, test15, test16, test17] = target.querySelectorAll('select');
+		const [test1, test2, test3, test4, test5] = target.querySelectorAll('div');
+		const [test6, test7, test8, test9] = target.querySelectorAll('select');
 
 		{
 			/** @type {NodeListOf<HTMLInputElement | HTMLTextAreaElement>} */
@@ -118,84 +104,12 @@ export default test({
 			after_reset.push(() => check_inputs(inputs, 'checked', false));
 		}
 
-		{
-			/** @type {NodeListOf<HTMLInputElement>} */
-			const inputs = test6.querySelectorAll('input');
-			check_inputs(inputs, 'checked', [false, true, false]);
-
-			set_input(inputs[0], 'checked', true);
-			flushSync();
-			check_inputs(inputs, 'checked', [true, false, false]);
-
-			after_reset.push(() => check_inputs(inputs, 'checked', [false, true, false]));
-		}
-
-		{
-			/** @type {NodeListOf<HTMLInputElement>} */
-			const inputs = test7.querySelectorAll('input');
-			check_inputs(inputs, 'checked', [false, true, false]);
-
-			set_input(inputs[0], 'checked', true);
-			flushSync();
-			check_inputs(inputs, 'checked', [true, false, false]);
-
-			after_reset.push(() => check_inputs(inputs, 'checked', [false, true, false]));
-		}
-
-		{
-			/** @type {NodeListOf<HTMLInputElement>} */
-			const inputs = test8.querySelectorAll('input');
-			check_inputs(inputs, 'checked', [true, false, false]);
-
-			set_input(inputs[3], 'checked', true);
-			flushSync();
-			check_inputs(inputs, 'checked', [false, false, true]);
-
-			after_reset.push(() => check_inputs(inputs, 'checked', [false, true, false]));
-		}
-
-		{
-			/** @type {NodeListOf<HTMLInputElement>} */
-			const inputs = test9.querySelectorAll('input');
-			check_inputs(inputs, 'checked', [true, false, false]);
-
-			set_input(inputs[3], 'checked', true);
-			flushSync();
-			check_inputs(inputs, 'checked', [false, false, true]);
-
-			after_reset.push(() => check_inputs(inputs, 'checked', [false, true, false]));
-		}
-
-		{
-			/** @type {NodeListOf<HTMLInputElement>} */
-			const inputs = test12.querySelectorAll('input');
-			check_inputs(inputs, 'checked', [true, false, false]);
-
-			set_input(inputs[3], 'checked', true);
-			flushSync();
-			check_inputs(inputs, 'checked', [true, false, true]);
-
-			after_reset.push(() => check_inputs(inputs, 'checked', [false, true, false]));
-		}
-
-		{
-			/** @type {NodeListOf<HTMLInputElement>} */
-			const inputs = test13.querySelectorAll('input');
-			check_inputs(inputs, 'checked', [true, false, false]);
-
-			set_input(inputs[3], 'checked', true);
-			flushSync();
-			check_inputs(inputs, 'checked', [true, false, true]);
-
-			after_reset.push(() => check_inputs(inputs, 'checked', [false, true, false]));
-		}
-
 		{
 			/** @type {NodeListOf<HTMLOptionElement>} */
-			const options = test14.querySelectorAll('option');
+			const options = test6.querySelectorAll('option');
 			check_inputs(options, 'selected', [false, true, false]);
 
-			select_option(options[3]);
+			select_option(options[2]);
 			flushSync();
 			check_inputs(options, 'selected', [false, false, true]);
 
@@ -204,10 +118,10 @@ export default test({
 
 		{
 			/** @type {NodeListOf<HTMLOptionElement>} */
-			const options = test15.querySelectorAll('option');
+			const options = test7.querySelectorAll('option');
 			check_inputs(options, 'selected', [false, true, false]);
 
-			select_option(options[3]);
+			select_option(options[2]);
 			flushSync();
 			check_inputs(options, 'selected', [false, false, true]);
 
@@ -216,7 +130,7 @@ export default test({
 
 		{
 			/** @type {NodeListOf<HTMLOptionElement>} */
-			const options = test16.querySelectorAll('option');
+			const options = test8.querySelectorAll('option');
 			check_inputs(options, 'selected', [false, false, true]);
 
 			select_option(options[0]);
@@ -228,7 +142,7 @@ export default test({
 
 		{
 			/** @type {NodeListOf<HTMLOptionElement>} */
-			const options = test17.querySelectorAll('option');
+			const options = test9.querySelectorAll('option');
 			check_inputs(options, 'selected', [false, false, true]);
 
 			select_option(options[0]);
diff --git a/packages/svelte/tests/runtime-runes/samples/form-default-value/main.svelte b/packages/svelte/tests/runtime-runes/samples/form-default-value/main.svelte
index c27bd53796c2..661bdb61825d 100644
--- a/packages/svelte/tests/runtime-runes/samples/form-default-value/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/form-default-value/main.svelte
@@ -26,24 +26,14 @@
 	let checked8 = $state(false);
 	let checked9 = $state(true);
 	let checked10 = $state(true);
-
-	let group1 = $state();
-	let group2 = $state();
-	let group3 = $state('a');
-	let group4 = $state('a');
-	let group5 = $state();
-	let group6 = $state();
-	let group7 = $state(['a']);
-	let group8 = $state(['a']);
+ 
 
 	let selected1 = $state();
 	let selected2 = $state();
 	let selected3 = $state('c');
 	let selected4 = $state('c');
-	let selected5 = $state();
-	let selected6 = $state();
-	let selected7 = $state(['c']);
-	let selected8 = $state(['c']);
+	let selected5 = $state(['c']);
+	let selected6 = $state(['c']);
 
 	let defaultValue = $state('x');
 	let defaultChecked = $state(true);
@@ -98,66 +88,7 @@
 		<input type="checkbox" defaultChecked={false} bind:checked={checked10} />
 	</div>
 
-	<p>Input group (radio)</p>
-	<!-- group with static checked, group=undefined -->
-	<div class="test-6">
-		<input type="radio" value="a" bind:group={group1} />
-		<input type="radio" value="b" bind:group={group1} checked />
-		<input type="radio" value="c" bind:group={group1} />
-	</div>
-
-	<!-- group with dynamic checked, group=undefined -->
-	<div class="test-7">
-		<input type="radio" value="a" bind:group={group2} />
-		<input type="radio" value="b" bind:group={group2} checked={defaultChecked} />
-		<input type="radio" value="c" bind:group={group2} />
-	</div>
-
-	<!-- group with static checked, group=something else than default -->
-	<div class="test-8">
-		<input type="radio" value="a" bind:group={group3} />
-		<input type="radio" value="b" bind:group={group3} checked />
-		<input type="radio" value="c" bind:group={group3} />
-	</div>
-
-	<!-- group with dynamic checked, group=something else than default -->
-	<div class="test-9">
-		<input type="radio" value="a" bind:group={group4} />
-		<input type="radio" value="b" bind:group={group4} checked={defaultChecked} />
-		<input type="radio" value="c" bind:group={group4} />
-	</div>
-
-	<p>Input group (checkbox)</p>
-    <!-- TODO, right now we say "group is undefined -> checked takes precedence";
-         that does not work with checkbox groups currently because it requires an empty array.
-         What to do? -->
-	<!-- group with static checked, group=undefined -->
-	<div class="test-10">
-		<!-- <input type="checkbox" value="a" bind:group={group5} />
-		<input type="checkbox" value="b" bind:group={group5} checked />
-		<input type="checkbox" value="c" bind:group={group5} /> -->
-	</div>
-
-	<!-- group with dynamic checked, group=undefined -->
-	<div class="test-11">
-		<!-- <input type="checkbox" value="a" bind:group={group6} />
-		<input type="checkbox" value="b" bind:group={group6} checked={defaultChecked} />
-		<input type="checkbox" value="c" bind:group={group6} /> -->
-	</div>
-
-	<!-- group with static checked, group=something else than default -->
-	<div class="test-12">
-		<input type="checkbox" value="a" bind:group={group7} />
-		<input type="checkbox" value="b" bind:group={group7} checked />
-		<input type="checkbox" value="c" bind:group={group7} />
-	</div>
-
-	<!-- group with dynamic checked, group=something else than default -->
-	<div class="test-13">
-		<input type="checkbox" value="a" bind:group={group8} />
-		<input type="checkbox" value="b" bind:group={group8} checked={defaultChecked} />
-		<input type="checkbox" value="c" bind:group={group8} />
-	</div>
+	<!-- no support for bind:group; too complex + we may deprecate it in favor of bind:checked={get,set} -->
 
 	<p>Select (single)</p>
 	<!-- select with static checked, value=undefined-->
@@ -189,32 +120,18 @@
 	</select>
 
 	<p>Select (multiple)</p>
-    <!-- TODO, right now we say "value is undefined -> selected takes precedence";
-         that does not work with multiple currently because it requires an empty array.
-         What to do? -->
-	<!-- select with static checked, value=undefined-->
-	<!-- <select multiple bind:value={selected5}>
-		<option value="a">A</option>
-		<option value="b" selected>B</option>
-		<option value="c">C</option>
-	</select> -->
-
-	<!-- select with dynamic checked, value=undefined-->
-	<!-- <select multiple bind:value={selected6}>
-		<option value="a">A</option>
-		<option value="b" selected={defaultChecked}>B</option>
-		<option value="c">C</option>
-	</select> -->
+    <!-- There's no possibility to have the selected attribute influence a multi select initially,
+	     because we require the value to be an array -->
 
 	<!-- select with static checked, value=something else than default-->
-	<select multiple bind:value={selected7}>
+	<select multiple bind:value={selected5}>
 		<option value="a">A</option>
 		<option value="b" selected>B</option>
 		<option value="c">C</option>
 	</select>
 
 	<!-- select with dynamic checked, value=something else than default-->
-	<select multiple bind:value={selected8}>
+	<select multiple bind:value={selected6}>
 		<option value="a">A</option>
 		<option value="b" selected={defaultChecked}>B</option>
 		<option value="c">C</option>

From 657ab78b56eb6eda83fafaacf59aa08144abbde3 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Mon, 25 Nov 2024 10:22:06 +0100
Subject: [PATCH 07/15] remove

---
 documentation/docs/03-template-syntax/11-bind.md | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/documentation/docs/03-template-syntax/11-bind.md b/documentation/docs/03-template-syntax/11-bind.md
index d1fcfa2ce047..9715a28f4b72 100644
--- a/documentation/docs/03-template-syntax/11-bind.md
+++ b/documentation/docs/03-template-syntax/11-bind.md
@@ -114,20 +114,6 @@ Inputs that work together can use `bind:group`.
 <input type="checkbox" bind:group={fillings} value="Guac (extra)" />
 ```
 
-You can give the group a default value by setting the `checked` property on the elements that should be selected initially. This way, when the input is part of a form and its `form.reset()` method is invoked, it will revert to that value instead of the empty string (for radio groups) or the empty array (for checkbox groups). Note that for the initial render the value of the binding takes precedence if it's not `null` or `undefined`.
-
-```svelte
-<script>
-	let tortilla = $state('Plain');
-</script>
-
-<form>
-	<input type="radio" bind:group={tortilla} value="Plain" checked />
-	<input type="radio" bind:group={tortilla} value="Whole wheat" />
-	<input type="reset" value="Reset">
-</form>
-```
-
 > [!NOTE] `bind:group` only works if the inputs are in the same Svelte component.
 
 ## `<input bind:files>`

From b22d3205c94d603c2f22030254e46329df48ec17 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Mon, 25 Nov 2024 10:23:52 +0100
Subject: [PATCH 08/15] tweak

---
 documentation/docs/03-template-syntax/11-bind.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/documentation/docs/03-template-syntax/11-bind.md b/documentation/docs/03-template-syntax/11-bind.md
index 9715a28f4b72..88cb78768e7a 100644
--- a/documentation/docs/03-template-syntax/11-bind.md
+++ b/documentation/docs/03-template-syntax/11-bind.md
@@ -172,7 +172,7 @@ When the value of an `<option>` matches its text content, the attribute can be o
 </select>
 ```
 
-You can give the select a default value by setting the `selected` property on the elements that should be selected initially. This way, when the select is part of a form and its `form.reset()` method is invoked, it will revert to that value instead of the empty string (for single-value selects) or the empty array (for mult-value selects). Note that for the initial render the value of the binding takes precedence if it's not `null` or `undefined`.
+You can give the select a default value by setting the `selected` property on the elements that should be selected initially. This way, when the select is part of a form and its `form.reset()` method is invoked, it will revert to that value instead of the empty string (for single-value selects) or the empty array (for multi-value selects). Note that for the initial render the value of the binding takes precedence if it's not `undefined`.
 
 ```svelte
 <select bind:value={selected}>

From 228a5ac5453583ca9215fa4fce062eda4d4db023 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Mon, 25 Nov 2024 10:24:36 +0100
Subject: [PATCH 09/15] changeset

---
 .changeset/tidy-zebras-begin.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/tidy-zebras-begin.md

diff --git a/.changeset/tidy-zebras-begin.md b/.changeset/tidy-zebras-begin.md
new file mode 100644
index 000000000000..cefbf2acfde1
--- /dev/null
+++ b/.changeset/tidy-zebras-begin.md
@@ -0,0 +1,5 @@
+---
+'svelte': minor
+---
+
+feat: support `defaultValue/defaultChecked` for inputs

From 618638f793720eb192aea35221af3800b488a4d1 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Mon, 25 Nov 2024 18:00:53 +0100
Subject: [PATCH 10/15] untrack reads, they could be inside an effect

---
 .../src/internal/client/dom/elements/bindings/input.js      | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/svelte/src/internal/client/dom/elements/bindings/input.js b/packages/svelte/src/internal/client/dom/elements/bindings/input.js
index 11fb6b3cc0a5..d408220ebd0b 100644
--- a/packages/svelte/src/internal/client/dom/elements/bindings/input.js
+++ b/packages/svelte/src/internal/client/dom/elements/bindings/input.js
@@ -5,7 +5,7 @@ import * as e from '../../../errors.js';
 import { is } from '../../../proxy.js';
 import { queue_micro_task } from '../../task.js';
 import { hydrating } from '../../hydration.js';
-import { is_runes } from '../../../runtime.js';
+import { is_runes, untrack } from '../../../runtime.js';
 
 /**
  * @param {HTMLInputElement} input
@@ -40,7 +40,7 @@ export function bind_value(input, get, set = get) {
 		(hydrating && input.defaultValue !== input.value) ||
 		// If defaultValue is set, then value == defaultValue
 		// TODO Svelte 6: remove input.value check and set to empty string?
-		(get() == null && input.value)
+		(untrack(get) == null && input.value)
 	) {
 		set(is_numberlike_input(input) ? to_number(input.value) : input.value);
 	}
@@ -189,7 +189,7 @@ export function bind_checked(input, get, set = get) {
 		// then use the update value from the input instead.
 		(hydrating && input.defaultChecked !== input.checked) ||
 		// If defaultChecked is set, then checked == defaultChecked
-		get() == null
+		untrack(get) == null
 	) {
 		set(input.checked);
 	}

From a39707a9ec6eedc6d81764d93da9bf7fec93b93d Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Mon, 2 Dec 2024 10:29:04 +0100
Subject: [PATCH 11/15] Apply suggestions from code review

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 documentation/docs/03-template-syntax/11-bind.md      | 11 +++++++----
 .../phases/2-analyze/visitors/RegularElement.js       |  2 +-
 .../internal/client/dom/elements/bindings/input.js    |  2 +-
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/documentation/docs/03-template-syntax/11-bind.md b/documentation/docs/03-template-syntax/11-bind.md
index 88cb78768e7a..975135f82441 100644
--- a/documentation/docs/03-template-syntax/11-bind.md
+++ b/documentation/docs/03-template-syntax/11-bind.md
@@ -53,7 +53,7 @@ In the case of a numeric input (`type="number"` or `type="range"`), the value wi
 
 If the input is empty or invalid (in the case of `type="number"`), the value is `undefined`.
 
-You can give the input a default value by setting the `defaultValue` property. This way, when the input is part of a form and its `form.reset()` method is invoked, it will revert to that value instead of the empty string. Note that for the initial render the value of the binding takes precedence if it's not `null` or `undefined`.
+If an `<input>` has a `defaultValue` and is part of a form, it will revert to that value instead of the empty string when the form is reset. Note that for the initial render the value of the binding takes precedence unless it is `null` or `undefined`.
 
 ```svelte
 <script>
@@ -61,11 +61,14 @@ You can give the input a default value by setting the `defaultValue` property. T
 </script>
 
 <form>
-	<input bind:value defaultValue="x">
+	<input bind:value defaultValue="not the empty string">
 	<input type="reset" value="Reset">
 </form>
 ```
 
+> [!NOTE]
+> Use reset buttons sparingly, and ensure that users won't accidentally click them while trying to submit the form.
+
 ## `<input bind:checked>`
 
 Checkbox and radio inputs can be bound with `bind:checked`:
@@ -77,7 +80,7 @@ Checkbox and radio inputs can be bound with `bind:checked`:
 </label>
 ```
 
-You can give the input a default value by setting the `defaultChecked` property. This way, when the input is part of a form and its `form.reset()` method is invoked, it will revert to that value instead of `false`. Note that for the initial render the value of the binding takes precedence if it's not `null` or `undefined`.
+If an `<input>` has a `defaultChecked` attribute and is part of a form, it will revert to that value instead of `false` when the form is reset. Note that for the initial render the value of the binding takes precedence unless it is `null` or `undefined`.
 
 ```svelte
 <script>
@@ -172,7 +175,7 @@ When the value of an `<option>` matches its text content, the attribute can be o
 </select>
 ```
 
-You can give the select a default value by setting the `selected` property on the elements that should be selected initially. This way, when the select is part of a form and its `form.reset()` method is invoked, it will revert to that value instead of the empty string (for single-value selects) or the empty array (for multi-value selects). Note that for the initial render the value of the binding takes precedence if it's not `undefined`.
+You can give the `<select>` a default value by adding a `selected` attribute to the`<option>` (or options, in the case of `<select multiple>`) that should be initially selected. If the `<select>` is part of a form, it will revert to that selection when the form is reset. Note that for the initial render the value of the binding takes precedence if it's not `undefined`.
 
 ```svelte
 <select bind:value={selected}>
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
index 0d316a1d028f..fa6ca0f6e970 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
@@ -1,6 +1,6 @@
 /** @import { AST } from '#compiler' */
 /** @import { Context } from '../types' */
-import { cannot_be_set_statically, is_mathml, is_svg, is_void } from '../../../../utils.js';
+import { is_mathml, is_svg, is_void } from '../../../../utils.js';
 import {
 	is_tag_valid_with_ancestor,
 	is_tag_valid_with_parent
diff --git a/packages/svelte/src/internal/client/dom/elements/bindings/input.js b/packages/svelte/src/internal/client/dom/elements/bindings/input.js
index d408220ebd0b..9377de7dce42 100644
--- a/packages/svelte/src/internal/client/dom/elements/bindings/input.js
+++ b/packages/svelte/src/internal/client/dom/elements/bindings/input.js
@@ -36,7 +36,7 @@ export function bind_value(input, get, set = get) {
 
 	if (
 		// If we are hydrating and the value has since changed,
-		// then use the update value from the input instead.
+		// then use the updated value from the input instead.
 		(hydrating && input.defaultValue !== input.value) ||
 		// If defaultValue is set, then value == defaultValue
 		// TODO Svelte 6: remove input.value check and set to empty string?

From 6ea04255594eb2d9d1f3173af112090b3dcb99bc Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Mon, 2 Dec 2024 17:27:51 +0100
Subject: [PATCH 12/15] handle select reset case

---
 .../svelte/src/internal/client/dom/elements/attributes.js   | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/svelte/src/internal/client/dom/elements/attributes.js b/packages/svelte/src/internal/client/dom/elements/attributes.js
index 9fa78ecf7668..dfb3266d88a4 100644
--- a/packages/svelte/src/internal/client/dom/elements/attributes.js
+++ b/packages/svelte/src/internal/client/dom/elements/attributes.js
@@ -93,7 +93,11 @@ export function set_checked(element, checked) {
  */
 export function set_selected(element, selected) {
 	if (selected) {
-		element.setAttribute('selected', '');
+		// The selected option could've changed via user selection, and
+		// setting the value without this check would set it back.
+		if (!element.hasAttribute('selected')) {
+			element.setAttribute('selected', '');
+		}
 	} else {
 		element.removeAttribute('selected');
 	}

From 57d57e3a8b22466daeb46a908eb382d470aa5bb2 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Mon, 2 Dec 2024 17:28:46 +0100
Subject: [PATCH 13/15] handle reset case specifically: use different
 props/queries in that case

---
 .../internal/client/dom/elements/bindings/input.js  | 13 +++++++------
 .../internal/client/dom/elements/bindings/select.js |  7 ++++---
 .../internal/client/dom/elements/bindings/shared.js |  8 ++++----
 3 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/packages/svelte/src/internal/client/dom/elements/bindings/input.js b/packages/svelte/src/internal/client/dom/elements/bindings/input.js
index 9377de7dce42..810dcb08629d 100644
--- a/packages/svelte/src/internal/client/dom/elements/bindings/input.js
+++ b/packages/svelte/src/internal/client/dom/elements/bindings/input.js
@@ -16,20 +16,21 @@ import { is_runes, untrack } from '../../../runtime.js';
 export function bind_value(input, get, set = get) {
 	var runes = is_runes();
 
-	listen_to_event_and_reset_event(input, 'input', () => {
+	listen_to_event_and_reset_event(input, 'input', (is_reset) => {
 		if (DEV && input.type === 'checkbox') {
 			// TODO should this happen in prod too?
 			e.bind_invalid_checkbox_value();
 		}
 
-		/** @type {unknown} */
-		var value = is_numberlike_input(input) ? to_number(input.value) : input.value;
+		/** @type {any} */
+		var value = is_reset ? input.defaultValue : input.value;
+		value = is_numberlike_input(input) ? to_number(value) : value;
 		set(value);
 
 		// In runes mode, respect any validation in accessors (doesn't apply in legacy mode,
 		// because we use mutable state which ensures the render effect always runs)
 		if (runes && value !== (value = get())) {
-			// @ts-expect-error the value is coerced on assignment
+			// the value is coerced on assignment
 			input.value = value ?? '';
 		}
 	});
@@ -179,8 +180,8 @@ export function bind_group(inputs, group_index, input, get, set = get) {
  * @returns {void}
  */
 export function bind_checked(input, get, set = get) {
-	listen_to_event_and_reset_event(input, 'change', () => {
-		var value = input.checked;
+	listen_to_event_and_reset_event(input, 'change', (is_reset) => {
+		var value = is_reset ? input.defaultChecked : input.checked;
 		set(value);
 	});
 
diff --git a/packages/svelte/src/internal/client/dom/elements/bindings/select.js b/packages/svelte/src/internal/client/dom/elements/bindings/select.js
index 4d3dbff81249..c994a33319b6 100644
--- a/packages/svelte/src/internal/client/dom/elements/bindings/select.js
+++ b/packages/svelte/src/internal/client/dom/elements/bindings/select.js
@@ -80,15 +80,16 @@ export function init_select(select, get_value) {
 export function bind_select_value(select, get, set = get) {
 	var mounting = true;
 
-	listen_to_event_and_reset_event(select, 'change', () => {
+	listen_to_event_and_reset_event(select, 'change', (is_reset) => {
+		var query = is_reset ? '[selected]' : ':checked';
 		/** @type {unknown} */
 		var value;
 
 		if (select.multiple) {
-			value = [].map.call(select.querySelectorAll(':checked'), get_option_value);
+			value = [].map.call(select.querySelectorAll(query), get_option_value);
 		} else {
 			/** @type {HTMLOptionElement | null} */
-			var selected_option = select.querySelector(':checked');
+			var selected_option = select.querySelector(query);
 			value = selected_option && get_option_value(selected_option);
 		}
 
diff --git a/packages/svelte/src/internal/client/dom/elements/bindings/shared.js b/packages/svelte/src/internal/client/dom/elements/bindings/shared.js
index 832b7f45e5d2..aa083776a5bc 100644
--- a/packages/svelte/src/internal/client/dom/elements/bindings/shared.js
+++ b/packages/svelte/src/internal/client/dom/elements/bindings/shared.js
@@ -53,8 +53,8 @@ export function without_reactive_context(fn) {
  * to notify all bindings when the form is reset
  * @param {HTMLElement} element
  * @param {string} event
- * @param {() => void} handler
- * @param {() => void} [on_reset]
+ * @param {(is_reset?: true) => void} handler
+ * @param {(is_reset?: true) => void} [on_reset]
  */
 export function listen_to_event_and_reset_event(element, event, handler, on_reset = handler) {
 	element.addEventListener(event, () => without_reactive_context(handler));
@@ -65,11 +65,11 @@ export function listen_to_event_and_reset_event(element, event, handler, on_rese
 		// @ts-expect-error
 		element.__on_r = () => {
 			prev();
-			on_reset();
+			on_reset(true);
 		};
 	} else {
 		// @ts-expect-error
-		element.__on_r = on_reset;
+		element.__on_r = () => on_reset(true);
 	}
 
 	add_form_reset_listener();

From aa07c1f441b438a91f90b90e9b535f58435101c0 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Mon, 2 Dec 2024 17:28:54 +0100
Subject: [PATCH 14/15] enhance test

---
 .../samples/form-default-value/_config.js     | 86 +++++++++++++++----
 .../samples/form-default-value/main.svelte    | 15 ++++
 2 files changed, 83 insertions(+), 18 deletions(-)

diff --git a/packages/svelte/tests/runtime-runes/samples/form-default-value/_config.js b/packages/svelte/tests/runtime-runes/samples/form-default-value/_config.js
index 622ed4c92b3b..7c31b9982519 100644
--- a/packages/svelte/tests/runtime-runes/samples/form-default-value/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/form-default-value/_config.js
@@ -21,7 +21,9 @@ export default test({
 		 */
 		function set_input(input, field, value) {
 			input[field] = value;
-			input.dispatchEvent(new Event('input', { bubbles: true }));
+			input.dispatchEvent(
+				new Event(typeof value === 'boolean' ? 'change' : 'input', { bubbles: true })
+			);
 		}
 
 		/**
@@ -37,122 +39,170 @@ export default test({
 		const reset = /** @type {HTMLInputElement} */ (target.querySelector('input[type=reset]'));
 		const [test1, test2, test3, test4, test5] = target.querySelectorAll('div');
 		const [test6, test7, test8, test9] = target.querySelectorAll('select');
+		const [
+			test1_span,
+			test2_span,
+			test3_span,
+			test4_span,
+			test5_span,
+			test6_span,
+			test7_span,
+			test8_span,
+			test9_span
+		] = target.querySelectorAll('span');
 
 		{
 			/** @type {NodeListOf<HTMLInputElement | HTMLTextAreaElement>} */
 			const inputs = test1.querySelectorAll('input, textarea');
 			check_inputs(inputs, 'value', 'x');
+			assert.htmlEqual(test1_span.innerHTML, 'x x x x');
 
 			for (const input of inputs) {
 				set_input(input, 'value', 'foo');
 			}
 			flushSync();
 			check_inputs(inputs, 'value', 'foo');
+			assert.htmlEqual(test1_span.innerHTML, 'foo foo foo foo');
 
-			after_reset.push(() => check_inputs(inputs, 'value', 'x'));
+			after_reset.push(() => {
+				console.log('-------------');
+				check_inputs(inputs, 'value', 'x');
+				assert.htmlEqual(test1_span.innerHTML, 'x x x x');
+			});
 		}
 
 		{
 			/** @type {NodeListOf<HTMLInputElement | HTMLTextAreaElement>} */
 			const inputs = test2.querySelectorAll('input, textarea');
 			check_inputs(inputs, 'value', 'y');
+			assert.htmlEqual(test2_span.innerHTML, 'y y y y');
 
 			for (const input of inputs) {
 				set_input(input, 'value', 'foo');
 			}
 			flushSync();
 			check_inputs(inputs, 'value', 'foo');
+			assert.htmlEqual(test2_span.innerHTML, 'foo foo foo foo');
 
-			after_reset.push(() => check_inputs(inputs, 'value', 'x'));
+			after_reset.push(() => {
+				check_inputs(inputs, 'value', 'x');
+				assert.htmlEqual(test2_span.innerHTML, 'x x x x');
+			});
 		}
 
 		{
 			/** @type {NodeListOf<HTMLInputElement>} */
 			const inputs = test3.querySelectorAll('input');
 			check_inputs(inputs, 'checked', true);
+			assert.htmlEqual(test3_span.innerHTML, 'true true');
 
 			for (const input of inputs) {
 				set_input(input, 'checked', false);
 			}
 			flushSync();
 			check_inputs(inputs, 'checked', false);
+			assert.htmlEqual(test3_span.innerHTML, 'false false');
 
-			after_reset.push(() => check_inputs(inputs, 'checked', true));
+			after_reset.push(() => {
+				check_inputs(inputs, 'checked', true);
+				assert.htmlEqual(test3_span.innerHTML, 'true true');
+			});
 		}
 
 		{
 			/** @type {NodeListOf<HTMLInputElement>} */
 			const inputs = test4.querySelectorAll('input');
 			check_inputs(inputs, 'checked', false);
+			assert.htmlEqual(test4_span.innerHTML, 'false false');
 
-			after_reset.push(() => check_inputs(inputs, 'checked', true));
+			after_reset.push(() => {
+				check_inputs(inputs, 'checked', true);
+				assert.htmlEqual(test4_span.innerHTML, 'true true');
+			});
 		}
 
 		{
 			/** @type {NodeListOf<HTMLInputElement>} */
 			const inputs = test5.querySelectorAll('input');
 			check_inputs(inputs, 'checked', true);
+			assert.htmlEqual(test5_span.innerHTML, 'true');
 
-			after_reset.push(() => check_inputs(inputs, 'checked', false));
-		}
-
-		{
-			/** @type {NodeListOf<HTMLInputElement>} */
-			const inputs = test5.querySelectorAll('input');
-			check_inputs(inputs, 'checked', true);
-
-			after_reset.push(() => check_inputs(inputs, 'checked', false));
+			after_reset.push(() => {
+				check_inputs(inputs, 'checked', false);
+				assert.htmlEqual(test5_span.innerHTML, 'false');
+			});
 		}
 
 		{
 			/** @type {NodeListOf<HTMLOptionElement>} */
 			const options = test6.querySelectorAll('option');
 			check_inputs(options, 'selected', [false, true, false]);
+			assert.htmlEqual(test6_span.innerHTML, 'b');
 
 			select_option(options[2]);
 			flushSync();
 			check_inputs(options, 'selected', [false, false, true]);
+			assert.htmlEqual(test6_span.innerHTML, 'c');
 
-			after_reset.push(() => check_inputs(options, 'selected', [false, true, false]));
+			after_reset.push(() => {
+				check_inputs(options, 'selected', [false, true, false]);
+				assert.htmlEqual(test6_span.innerHTML, 'b');
+			});
 		}
 
 		{
 			/** @type {NodeListOf<HTMLOptionElement>} */
 			const options = test7.querySelectorAll('option');
 			check_inputs(options, 'selected', [false, true, false]);
+			assert.htmlEqual(test7_span.innerHTML, 'b');
 
 			select_option(options[2]);
 			flushSync();
 			check_inputs(options, 'selected', [false, false, true]);
+			assert.htmlEqual(test7_span.innerHTML, 'c');
 
-			after_reset.push(() => check_inputs(options, 'selected', [false, true, false]));
+			after_reset.push(() => {
+				check_inputs(options, 'selected', [false, true, false]);
+				assert.htmlEqual(test7_span.innerHTML, 'b');
+			});
 		}
 
 		{
 			/** @type {NodeListOf<HTMLOptionElement>} */
 			const options = test8.querySelectorAll('option');
 			check_inputs(options, 'selected', [false, false, true]);
+			assert.htmlEqual(test8_span.innerHTML, 'c');
 
 			select_option(options[0]);
 			flushSync();
 			check_inputs(options, 'selected', [true, false, false]);
+			assert.htmlEqual(test8_span.innerHTML, 'a');
 
-			after_reset.push(() => check_inputs(options, 'selected', [false, true, false]));
+			after_reset.push(() => {
+				check_inputs(options, 'selected', [false, true, false]);
+				assert.htmlEqual(test8_span.innerHTML, 'b');
+			});
 		}
 
 		{
 			/** @type {NodeListOf<HTMLOptionElement>} */
 			const options = test9.querySelectorAll('option');
 			check_inputs(options, 'selected', [false, false, true]);
+			assert.htmlEqual(test9_span.innerHTML, 'c');
 
 			select_option(options[0]);
 			flushSync();
 			check_inputs(options, 'selected', [true, false, false]);
+			assert.htmlEqual(test9_span.innerHTML, 'a');
 
-			after_reset.push(() => check_inputs(options, 'selected', [false, true, false]));
+			after_reset.push(() => {
+				check_inputs(options, 'selected', [false, true, false]);
+				assert.htmlEqual(test9_span.innerHTML, 'b');
+			});
 		}
 
 		reset.click();
+		await Promise.resolve();
 		flushSync();
 		after_reset.forEach((fn) => fn());
 	}
diff --git a/packages/svelte/tests/runtime-runes/samples/form-default-value/main.svelte b/packages/svelte/tests/runtime-runes/samples/form-default-value/main.svelte
index 661bdb61825d..d2b864e7ec37 100644
--- a/packages/svelte/tests/runtime-runes/samples/form-default-value/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/form-default-value/main.svelte
@@ -139,3 +139,18 @@
 
 	<input type="reset" value="Reset" />
 </form>
+
+<p>
+	Bound values:
+	<span class="test-1">{value1} {value3} {value6} {value8}</span>
+	<span class="test-2">{value9} {value12} {value14} {value16}</span>
+	<span class="test-3">{checked2} {checked4}</span>
+	<span class="test-4">{checked6} {checked8}</span>
+	<span class="test-5">{checked10}</span>
+	<span class="test-6">{selected1}</span>
+	<span class="test-7">{selected2}</span>
+	<span class="test-8">{selected3}</span>
+	<span class="test-9">{selected4}</span>
+	<span class="test-10">{selected5}</span>
+	<span class="test-11">{selected6}</span>
+</p>

From d4e836b8ce656f1b873f6d19ca9e2fbc1ccaa1bc Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Mon, 2 Dec 2024 17:37:48 +0100
Subject: [PATCH 15/15] fix

---
 .../src/internal/client/dom/elements/bindings/select.js      | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/svelte/src/internal/client/dom/elements/bindings/select.js b/packages/svelte/src/internal/client/dom/elements/bindings/select.js
index c994a33319b6..32cd160de21e 100644
--- a/packages/svelte/src/internal/client/dom/elements/bindings/select.js
+++ b/packages/svelte/src/internal/client/dom/elements/bindings/select.js
@@ -89,7 +89,10 @@ export function bind_select_value(select, get, set = get) {
 			value = [].map.call(select.querySelectorAll(query), get_option_value);
 		} else {
 			/** @type {HTMLOptionElement | null} */
-			var selected_option = select.querySelector(query);
+			var selected_option =
+				select.querySelector(query) ??
+				// will fall back to first non-disabled option if no option is selected
+				select.querySelector('option:not([disabled])');
 			value = selected_option && get_option_value(selected_option);
 		}