merge main

.changeset/great-toes-behave.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: correct types for `ontoggle` on <details> elements

.changeset/silent-rings-yell.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: don't reset status of uninitialized deriveds

documentation/docs/03-template-syntax/17-style.md

@@ -42,3 +42,9 @@ even over `!important` properties:
 <div style:color="red" style="color: blue">This will be red</div>
 <div style:color="red" style="color: blue !important">This will still be red</div>
 ```
+
+You can set CSS custom properties:
+
+```svelte
+<div style:--columns={columns}>...</div>
+```

packages/svelte/elements.d.ts

@@ -952,9 +952,9 @@ export interface HTMLDetailsAttributes extends HTMLAttributes<HTMLDetailsElement
 
 	'bind:open'?: boolean | undefined | null;
 
-	'on:toggle'?: EventHandler<Event, HTMLDetailsElement> | undefined | null;
-	ontoggle?: EventHandler<Event, HTMLDetailsElement> | undefined | null;
-	ontogglecapture?: EventHandler<Event, HTMLDetailsElement> | undefined | null;
+	'on:toggle'?: ToggleEventHandler<HTMLDetailsElement> | undefined | null;
+	ontoggle?: ToggleEventHandler<HTMLDetailsElement> | undefined | null;
+	ontogglecapture?: ToggleEventHandler<HTMLDetailsElement> | undefined | null;
 }
 
 export interface HTMLDelAttributes extends HTMLAttributes<HTMLModElement> {

packages/svelte/tests/runtime-runes/samples/async-fork-if-derived/_config.js

@@ -0,0 +1,20 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [, toggle] = target.querySelectorAll('button');
+
+		toggle?.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, `<button>0</button> <button>toggle</button> 0`);
+
+		toggle?.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, `<button>0</button> <button>toggle</button>`);
+
+		toggle?.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, `<button>0</button> <button>toggle</button> 0`);
+	}
+});

packages/svelte/tests/runtime-runes/samples/async-fork-if-derived/main.svelte

@@ -0,0 +1,13 @@
+<script>
+	import { fork } from 'svelte';
+	let show = $state(false);
+	let count = $state(0);
+	let d_count = $derived(count);
+</script>
+
+<button onclick={() => count += 1}>{count}</button> <!-- just here so count is compiled as a source -->
+<button onclick={() => fork(() => show = !show).commit()}>toggle</button>
+
+{#if show}
+	{d_count}
+{/if}

packages/svelte/tests/runtime-runes/samples/async-if-after-await-in-script/_config.js

@@ -6,11 +6,13 @@ export default test({
 
 	ssrHtml: '<p>yep</p>',
 
-	async test({ assert, target, variant }) {
+	async test({ assert, target, variant, warnings }) {
 		if (variant === 'dom') {
 			await tick();
 		}
 
 		assert.htmlEqual(target.innerHTML, '<p>yep</p>');
+
+		assert.deepEqual(warnings, []); // TODO not quite sure why this isn't populated yet
 	}
 });

packages/svelte/tests/runtime-runes/samples/await-html-hydration/_config.js

@@ -3,5 +3,7 @@ import { test } from '../../test';
 export default test({
 	skip_no_async: true,
 	mode: ['hydrate'],
-	async test() {}
+	async test({ assert, warnings }) {
+		assert.deepEqual(warnings, []); // TODO not quite sure why this isn't populated yet
+	}
 });