migrate on:click to onclick for svelte 5

src/lib/components/job/JobItem.svelte

@@ -22,7 +22,7 @@
 <button
 	class="job-item"
 	class:selected
-	on:click={onClick}
+	onclick={onClick}
 	aria-pressed={selected}
 	aria-label="{job.name.en} - {selected ? 'Currently selected' : 'Click to select'}"
 >

src/lib/components/job/JobSection.svelte

@@ -69,7 +69,7 @@
 		{/if}
 
 		{#if canEdit && job}
-			<button class="change-job-button" on:click={onSelectJob} aria-label="Change job">
+			<button class="change-job-button" onclick={onSelectJob} aria-label="Change job">
 				<Icon name="arrow-left" size={16} />
 			</button>
 		{/if}
@@ -80,7 +80,7 @@
 		{#if job}
 			<div class="job-header">
 				{#if canEdit}
-					<button class="job-name clickable" on:click={onSelectJob}>
+					<button class="job-name clickable" onclick={onSelectJob}>
 						<div class="job-name-row">
 							<img src={jobIconUrl} alt="{job.name.en} icon" class="job-icon" />
 							<h3>{job.name.en}</h3>
@@ -140,8 +140,8 @@
 						class:editable={canEdit}
 						role={canEdit ? 'button' : undefined}
 						tabindex={canEdit ? 0 : undefined}
-						on:click={() => canEdit && onSelectAccessory?.()}
+						onclick={() => canEdit && onSelectAccessory?.()}
-						on:keydown={(e) => {
+						onkeydown={(e) => {
 							if (canEdit && onSelectAccessory && (e.key === 'Enter' || e.key === ' ')) {
 								e.preventDefault()
 								onSelectAccessory()

src/lib/components/job/JobSkillItem.svelte

@@ -29,7 +29,7 @@
 <button
 	class="skill-item {getSkillColorClass(skill)}"
 	class:current={variant === 'current'}
-	on:click={onClick}
+	onclick={onClick}
 	{disabled}
 	aria-label="{skill.name.en} - {getSkillCategoryName(skill)} skill"
 >
@@ -43,7 +43,7 @@
 	</div>
 
 	{#if variant === 'current' && onRemove}
-		<button class="remove-button" on:click|stopPropagation={onRemove} aria-label="Remove skill">
+		<button class="remove-button" onclick={(e) => { e.stopPropagation(); onRemove?.(); }} aria-label="Remove skill">
 			Remove
 		</button>
 	{/if}

src/lib/components/job/JobSkillSlot.svelte

@@ -54,7 +54,7 @@
 			class="skill-slot editable"
 			class:empty={!isFilled}
 			style:--category-color={categoryColor}
-			on:click={handleClick}
+			onclick={handleClick}
 			type="button"
 		>
 			{@render SlotBody({ locked: false })}

src/lib/components/job/JobTierSelector.svelte

@@ -30,7 +30,7 @@
 			<button
 				class="tier-button"
 				class:selected={selectedTiers.has(tier.value)}
-				on:click={() => handleTierClick(tier.value)}
+				onclick={() => handleTierClick(tier.value)}
 				type="button"
 			>
 				{tier.shortLabel}
@@ -42,7 +42,7 @@
 			<button
 				class="tier-button"
 				class:selected={selectedTiers.has(tier.value)}
-				on:click={() => handleTierClick(tier.value)}
+				onclick={() => handleTierClick(tier.value)}
 				type="button"
 			>
 				{tier.shortLabel}

src/routes/(app)/test/images/+page.svelte

@@ -224,10 +224,10 @@
 				<img
 					src={imageUrl}
 					alt="Test image"
-					on:error={(e) => {
+					onerror={(e) => {
 						e.currentTarget.classList.add('error')
 					}}
-					on:load={(e) => {
+					onload={(e) => {
 						e.currentTarget.classList.remove('error')
 					}}
 				/>