From c582b5d3b559283619384dd78b77526ce1d6f722 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 20 Feb 2025 16:47:52 -0500
Subject: [PATCH 1/8] chore: simplify flush_sync (#15346)

---
 packages/svelte/src/internal/client/runtime.js | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
index 8a9ca9065b47..8c98f948f3f0 100644
--- a/packages/svelte/src/internal/client/runtime.js
+++ b/packages/svelte/src/internal/client/runtime.js
@@ -858,11 +858,8 @@ export function flush_sync(fn) {
 	try {
 		infinite_loop_guard();
 
-		/** @type {Effect[]} */
-		const root_effects = [];
-
 		scheduler_mode = FLUSH_SYNC;
-		queued_root_effects = root_effects;
+		queued_root_effects = [];
 		is_micro_task_queued = false;
 
 		flush_queued_root_effects(previous_queued_root_effects);
@@ -870,7 +867,7 @@ export function flush_sync(fn) {
 		var result = fn?.();
 
 		flush_tasks();
-		if (queued_root_effects.length > 0 || root_effects.length > 0) {
+		if (queued_root_effects.length > 0) {
 			flush_sync();
 		}
 

From ac215d9b23d091b14caa1f47951997dc6acfb841 Mon Sep 17 00:00:00 2001
From: realguse <me@realguse.com>
Date: Fri, 21 Feb 2025 18:43:32 +0100
Subject: [PATCH 2/8] docs: rephrase copyright holder (#15333)

---
 LICENSE.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/LICENSE.md b/LICENSE.md
index abbace7bfe03..f872adf738de 100644
--- a/LICENSE.md
+++ b/LICENSE.md
@@ -1,4 +1,4 @@
-Copyright (c) 2016-2025 [these people](https://github.com/sveltejs/svelte/graphs/contributors)
+Copyright (c) 2016-2025 [Svelte Contributors](https://github.com/sveltejs/svelte/graphs/contributors)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

From 60b22c0b5fc17bf0062d08ad16dc2ba60af12971 Mon Sep 17 00:00:00 2001
From: realguse <me@realguse.com>
Date: Fri, 21 Feb 2025 18:44:23 +0100
Subject: [PATCH 3/8] docs: update casing (#15321)

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 7d2f718da75c..7ea71647521a 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 	</picture>
 </a>
 
-[![license](https://img.shields.io/npm/l/svelte.svg)](LICENSE.md) [![Chat](https://img.shields.io/discord/457912077277855764?label=chat&logo=discord)](https://svelte.dev/chat)
+[![License](https://img.shields.io/npm/l/svelte.svg)](LICENSE.md) [![Chat](https://img.shields.io/discord/457912077277855764?label=chat&logo=discord)](https://svelte.dev/chat)
 
 ## What is Svelte?
 

From 1e1aea4063eda9363db38f00ce7feb8bd3954323 Mon Sep 17 00:00:00 2001
From: adiGuba <frederic.martini@gmail.com>
Date: Fri, 21 Feb 2025 19:24:19 +0100
Subject: [PATCH 4/8] chore: remove unnecessary `?? ''` on some expressions
 (#15287)

* no `?? ''` on some expressions

* changeset

* delete operator returns boolean

* inverted conditions are a lil confusing

* no need for else after return

* simplify condition

* may as well add special handling for undefined while we're here

* use normal string literal when there are no values

* omit assignment when there is no text content

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/serious-glasses-kiss.md            |  5 ++
 .../client/visitors/RegularElement.js         | 17 +++---
 .../client/visitors/shared/utils.js           | 57 +++++++++++--------
 3 files changed, 46 insertions(+), 33 deletions(-)
 create mode 100644 .changeset/serious-glasses-kiss.md

diff --git a/.changeset/serious-glasses-kiss.md b/.changeset/serious-glasses-kiss.md
new file mode 100644
index 000000000000..29a6fafeae41
--- /dev/null
+++ b/.changeset/serious-glasses-kiss.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+chore: remove unnecessary `?? ''` on some expressions
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 018bdacc5ecd..d4502210bdfd 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
@@ -364,15 +364,14 @@ export function RegularElement(node, context) {
 		trimmed.some((node) => node.type === 'ExpressionTag');
 
 	if (use_text_content) {
-		child_state.init.push(
-			b.stmt(
-				b.assignment(
-					'=',
-					b.member(context.state.node, 'textContent'),
-					build_template_chunk(trimmed, context.visit, child_state).value
-				)
-			)
-		);
+		const { value } = build_template_chunk(trimmed, context.visit, child_state);
+		const empty_string = value.type === 'Literal' && value.value === '';
+
+		if (!empty_string) {
+			child_state.init.push(
+				b.stmt(b.assignment('=', b.member(context.state.node, 'textContent'), value))
+			);
+		}
 	} else {
 		/** @type {Expression} */
 		let arg = context.state.node;
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
index ca5094f455c6..c25ef3ab50e3 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
@@ -101,11 +101,15 @@ export function build_template_chunk(
 
 		if (node.type === 'Text') {
 			quasi.value.cooked += node.data;
-		} else if (node.type === 'ExpressionTag' && node.expression.type === 'Literal') {
+		} else if (node.expression.type === 'Literal') {
 			if (node.expression.value != null) {
 				quasi.value.cooked += node.expression.value + '';
 			}
-		} else {
+		} else if (
+			node.expression.type !== 'Identifier' ||
+			node.expression.name !== 'undefined' ||
+			state.scope.get('undefined')
+		) {
 			let value = memoize(
 				/** @type {Expression} */ (visit(node.expression, state)),
 				node.metadata.expression
@@ -117,31 +121,33 @@ export function build_template_chunk(
 				// If we have a single expression, then pass that in directly to possibly avoid doing
 				// extra work in the template_effect (instead we do the work in set_text).
 				return { value, has_state };
-			} else {
-				// add `?? ''` where necessary (TODO optimise more cases)
-				if (
-					value.type === 'LogicalExpression' &&
-					value.right.type === 'Literal' &&
-					(value.operator === '??' || value.operator === '||')
-				) {
-					// `foo ?? null` -=> `foo ?? ''`
-					// otherwise leave the expression untouched
-					if (value.right.value === null) {
-						value = { ...value, right: b.literal('') };
-					}
-				} else if (
-					state.analysis.props_id &&
-					value.type === 'Identifier' &&
-					value.name === state.analysis.props_id.name
-				) {
-					// do nothing ($props.id() is never null/undefined)
-				} else {
-					value = b.logical('??', value, b.literal(''));
+			}
+
+			if (
+				value.type === 'LogicalExpression' &&
+				value.right.type === 'Literal' &&
+				(value.operator === '??' || value.operator === '||')
+			) {
+				// `foo ?? null` -=> `foo ?? ''`
+				// otherwise leave the expression untouched
+				if (value.right.value === null) {
+					value = { ...value, right: b.literal('') };
 				}
+			}
+
+			const is_defined =
+				value.type === 'BinaryExpression' ||
+				(value.type === 'UnaryExpression' && value.operator !== 'void') ||
+				(value.type === 'LogicalExpression' && value.right.type === 'Literal') ||
+				(value.type === 'Identifier' && value.name === state.analysis.props_id?.name);
 
-				expressions.push(value);
+			if (!is_defined) {
+				// add `?? ''` where necessary (TODO optimise more cases)
+				value = b.logical('??', value, b.literal(''));
 			}
 
+			expressions.push(value);
+
 			quasi = b.quasi('', i + 1 === values.length);
 			quasis.push(quasi);
 		}
@@ -151,7 +157,10 @@ export function build_template_chunk(
 		quasi.value.raw = sanitize_template_string(/** @type {string} */ (quasi.value.cooked));
 	}
 
-	const value = b.template(quasis, expressions);
+	const value =
+		expressions.length > 0
+			? b.template(quasis, expressions)
+			: b.literal(/** @type {string} */ (quasi.value.cooked));
 
 	return { value, has_state };
 }

From 3c4a8d425b8192dc11ea2af256d531c51c37ba5d Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 21 Feb 2025 14:40:46 -0500
Subject: [PATCH 5/8] chore: make Binding a class (#15359)

* chore: make Binding a class

* reorder

* regenerate
---
 packages/svelte/src/compiler/phases/scope.js  | 82 ++++++++++++++----
 packages/svelte/src/compiler/types/index.d.ts | 85 ++++---------------
 packages/svelte/types/index.d.ts              |  2 +-
 3 files changed, 83 insertions(+), 86 deletions(-)

diff --git a/packages/svelte/src/compiler/phases/scope.js b/packages/svelte/src/compiler/phases/scope.js
index 51e9eb088dc9..41e1c78c057b 100644
--- a/packages/svelte/src/compiler/phases/scope.js
+++ b/packages/svelte/src/compiler/phases/scope.js
@@ -1,6 +1,6 @@
 /** @import { ClassDeclaration, Expression, FunctionDeclaration, Identifier, ImportDeclaration, MemberExpression, Node, Pattern, VariableDeclarator } from 'estree' */
 /** @import { Context, Visitor } from 'zimmerframe' */
-/** @import { AST, Binding, DeclarationKind } from '#compiler' */
+/** @import { AST, BindingKind, DeclarationKind } from '#compiler' */
 import is_reference from 'is-reference';
 import { walk } from 'zimmerframe';
 import { create_expression_metadata } from './nodes.js';
@@ -16,6 +16,69 @@ import { is_reserved, is_rune } from '../../utils.js';
 import { determine_slot } from '../utils/slot.js';
 import { validate_identifier_name } from './2-analyze/visitors/shared/utils.js';
 
+export class Binding {
+	/** @type {Scope} */
+	scope;
+
+	/** @type {Identifier} */
+	node;
+
+	/** @type {BindingKind} */
+	kind;
+
+	/** @type {DeclarationKind} */
+	declaration_kind;
+
+	/**
+	 * What the value was initialized with.
+	 * For destructured props such as `let { foo = 'bar' } = $props()` this is `'bar'` and not `$props()`
+	 * @type {null | Expression | FunctionDeclaration | ClassDeclaration | ImportDeclaration | AST.EachBlock | AST.SnippetBlock}
+	 */
+	initial;
+
+	/** @type {Array<{ node: Identifier; path: AST.SvelteNode[] }>} */
+	references = [];
+
+	/**
+	 * For `legacy_reactive`: its reactive dependencies
+	 * @type {Binding[]}
+	 */
+	legacy_dependencies = [];
+
+	/**
+	 * Legacy props: the `class` in `{ export klass as class}`. $props(): The `class` in { class: klass } = $props()
+	 * @type {string | null}
+	 */
+	prop_alias = null;
+
+	/**
+	 * Additional metadata, varies per binding type
+	 * @type {null | { inside_rest?: boolean }}
+	 */
+	metadata = null;
+
+	is_called = false;
+	mutated = false;
+	reassigned = false;
+	updated = false;
+
+	/**
+	 *
+	 * @param {Scope} scope
+	 * @param {Identifier} node
+	 * @param {BindingKind} kind
+	 * @param {DeclarationKind} declaration_kind
+	 * @param {Binding['initial']} initial
+	 */
+	constructor(scope, node, kind, declaration_kind, initial) {
+		this.scope = scope;
+		this.node = node;
+		this.initial = initial;
+		this.kind = kind;
+		this.declaration_kind = declaration_kind;
+	}
+}
+
 export class Scope {
 	/** @type {ScopeRoot} */
 	root;
@@ -100,22 +163,7 @@ export class Scope {
 			e.declaration_duplicate(node, node.name);
 		}
 
-		/** @type {Binding} */
-		const binding = {
-			node,
-			references: [],
-			legacy_dependencies: [],
-			initial,
-			reassigned: false,
-			mutated: false,
-			updated: false,
-			scope: this,
-			kind,
-			declaration_kind,
-			is_called: false,
-			prop_alias: null,
-			metadata: null
-		};
+		const binding = new Binding(this, node, kind, declaration_kind, initial);
 
 		validate_identifier_name(binding, this.function_depth);
 
diff --git a/packages/svelte/src/compiler/types/index.d.ts b/packages/svelte/src/compiler/types/index.d.ts
index b80b717e426c..eec41bad9d25 100644
--- a/packages/svelte/src/compiler/types/index.d.ts
+++ b/packages/svelte/src/compiler/types/index.d.ts
@@ -1,12 +1,5 @@
-import type {
-	ClassDeclaration,
-	Expression,
-	FunctionDeclaration,
-	Identifier,
-	ImportDeclaration
-} from 'estree';
 import type { SourceMap } from 'magic-string';
-import type { Scope } from '../phases/scope.js';
+import type { Binding } from '../phases/scope.js';
 import type { AST, Namespace } from './template.js';
 import type { ICompileDiagnostic } from '../utils/compile_diagnostic.js';
 
@@ -241,6 +234,20 @@ export type ValidatedCompileOptions = ValidatedModuleCompileOptions &
 		hmr: CompileOptions['hmr'];
 	};
 
+export type BindingKind =
+	| 'normal' // A variable that is not in any way special
+	| 'prop' // A normal prop (possibly reassigned or mutated)
+	| 'bindable_prop' // A prop one can `bind:` to (possibly reassigned or mutated)
+	| 'rest_prop' // A rest prop
+	| 'raw_state' // A state variable
+	| 'state' // A deeply reactive state variable
+	| 'derived' // A derived variable
+	| 'each' // An each block parameter
+	| 'snippet' // A snippet parameter
+	| 'store_sub' // A $store value
+	| 'legacy_reactive' // A `$:` declaration
+	| 'template'; // A binding declared in the template, e.g. in an `await` block or `const` tag
+
 export type DeclarationKind =
 	| 'var'
 	| 'let'
@@ -251,66 +258,6 @@ export type DeclarationKind =
 	| 'rest_param'
 	| 'synthetic';
 
-export interface Binding {
-	node: Identifier;
-	/**
-	 * - `normal`: A variable that is not in any way special
-	 * - `prop`: A normal prop (possibly reassigned or mutated)
-	 * - `bindable_prop`: A prop one can `bind:` to (possibly reassigned or mutated)
-	 * - `rest_prop`: A rest prop
-	 * - `state`: A state variable
-	 * - `derived`: A derived variable
-	 * - `each`: An each block parameter
-	 * - `snippet`: A snippet parameter
-	 * - `store_sub`: A $store value
-	 * - `legacy_reactive`: A `$:` declaration
-	 * - `template`: A binding declared in the template, e.g. in an `await` block or `const` tag
-	 */
-	kind:
-		| 'normal'
-		| 'prop'
-		| 'bindable_prop'
-		| 'rest_prop'
-		| 'state'
-		| 'raw_state'
-		| 'derived'
-		| 'each'
-		| 'snippet'
-		| 'store_sub'
-		| 'legacy_reactive'
-		| 'template'
-		| 'snippet';
-	declaration_kind: DeclarationKind;
-	/**
-	 * What the value was initialized with.
-	 * For destructured props such as `let { foo = 'bar' } = $props()` this is `'bar'` and not `$props()`
-	 */
-	initial:
-		| null
-		| Expression
-		| FunctionDeclaration
-		| ClassDeclaration
-		| ImportDeclaration
-		| AST.EachBlock
-		| AST.SnippetBlock;
-	is_called: boolean;
-	references: { node: Identifier; path: AST.SvelteNode[] }[];
-	mutated: boolean;
-	reassigned: boolean;
-	/** `true` if mutated _or_ reassigned */
-	updated: boolean;
-	scope: Scope;
-	/** For `legacy_reactive`: its reactive dependencies */
-	legacy_dependencies: Binding[];
-	/** Legacy props: the `class` in `{ export klass as class}`. $props(): The `class` in { class: klass } = $props() */
-	prop_alias: string | null;
-	/** Additional metadata, varies per binding type */
-	metadata: {
-		/** `true` if is (inside) a rest parameter */
-		inside_rest?: boolean;
-	} | null;
-}
-
 export interface ExpressionMetadata {
 	/** All the bindings that are referenced inside this expression */
 	dependencies: Set<Binding>;
@@ -322,5 +269,7 @@ export interface ExpressionMetadata {
 
 export * from './template.js';
 
+export { Binding, Scope } from '../phases/scope.js';
+
 // TODO this chain is a bit weird
 export { ReactiveStatement } from '../phases/types.js';
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index 77d78477ee93..b9ab8a522ccb 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -622,8 +622,8 @@ declare module 'svelte/animate' {
 }
 
 declare module 'svelte/compiler' {
-	import type { Expression, Identifier, ArrayExpression, ArrowFunctionExpression, VariableDeclaration, VariableDeclarator, MemberExpression, Node, ObjectExpression, Pattern, Program, ChainExpression, SimpleCallExpression, SequenceExpression } from 'estree';
 	import type { SourceMap } from 'magic-string';
+	import type { ArrayExpression, ArrowFunctionExpression, VariableDeclaration, VariableDeclarator, Expression, Identifier, MemberExpression, Node, ObjectExpression, Pattern, Program, ChainExpression, SimpleCallExpression, SequenceExpression } from 'estree';
 	import type { Location } from 'locate-character';
 	/**
 	 * `compile` converts your `.svelte` source code into a JavaScript module that exports a component

From 5a946e7905314f13ed51fb3d37872160c81ab996 Mon Sep 17 00:00:00 2001
From: Alexis <michel.alexis@outlook.com>
Date: Mon, 24 Feb 2025 13:29:35 +0100
Subject: [PATCH 6/8] fix: Allow @const inside #key (#15377)

---
 .changeset/healthy-guests-itch.md                            | 5 +++++
 .../src/compiler/phases/2-analyze/visitors/ConstTag.js       | 1 +
 .../validator/samples/const-tag-inside-key-block/errors.json | 1 +
 .../samples/const-tag-inside-key-block/input.svelte          | 3 +++
 4 files changed, 10 insertions(+)
 create mode 100644 .changeset/healthy-guests-itch.md
 create mode 100644 packages/svelte/tests/validator/samples/const-tag-inside-key-block/errors.json
 create mode 100644 packages/svelte/tests/validator/samples/const-tag-inside-key-block/input.svelte

diff --git a/.changeset/healthy-guests-itch.md b/.changeset/healthy-guests-itch.md
new file mode 100644
index 000000000000..24b33f761d62
--- /dev/null
+++ b/.changeset/healthy-guests-itch.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+Allow `@const` inside `#key`
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/ConstTag.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/ConstTag.js
index 3f5e0473c5fd..f723f8447cd2 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/ConstTag.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/ConstTag.js
@@ -25,6 +25,7 @@ export function ConstTag(node, context) {
 			grand_parent?.type !== 'AwaitBlock' &&
 			grand_parent?.type !== 'SnippetBlock' &&
 			grand_parent?.type !== 'SvelteBoundary' &&
+			grand_parent?.type !== 'KeyBlock' &&
 			((grand_parent?.type !== 'RegularElement' && grand_parent?.type !== 'SvelteElement') ||
 				!grand_parent.attributes.some((a) => a.type === 'Attribute' && a.name === 'slot')))
 	) {
diff --git a/packages/svelte/tests/validator/samples/const-tag-inside-key-block/errors.json b/packages/svelte/tests/validator/samples/const-tag-inside-key-block/errors.json
new file mode 100644
index 000000000000..fe51488c7066
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/const-tag-inside-key-block/errors.json
@@ -0,0 +1 @@
+[]
diff --git a/packages/svelte/tests/validator/samples/const-tag-inside-key-block/input.svelte b/packages/svelte/tests/validator/samples/const-tag-inside-key-block/input.svelte
new file mode 100644
index 000000000000..008072bc4756
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/const-tag-inside-key-block/input.svelte
@@ -0,0 +1,3 @@
+{#key 'key'}
+	{@const foo = 'bar'}
+{/key}

From d4360af7517b6c7e980cafbd2c36dfcd55085da9 Mon Sep 17 00:00:00 2001
From: adiGuba <frederic.martini@gmail.com>
Date: Mon, 24 Feb 2025 13:46:23 +0100
Subject: [PATCH 7/8] chore: rewrite set_class() to handle directives (#15352)

* set_class with class: directives

* update expected result (remove leading space)

* fix

* optimize literals

* add test

* add test for mutations on hydration

* clean observer

* Update packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js

unused

Co-authored-by: Rich Harris <hello@rich-harris.dev>

* Update packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js

unused for now

Co-authored-by: Rich Harris <hello@rich-harris.dev>

* Update packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js

unused for now

Co-authored-by: Rich Harris <hello@rich-harris.dev>

* Update packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js

nit

Co-authored-by: Rich Harris <hello@rich-harris.dev>

* Update packages/svelte/src/internal/client/dom/elements/attributes.js

nit

Co-authored-by: Rich Harris <hello@rich-harris.dev>

* Update packages/svelte/src/internal/shared/attributes.js

rename clazz to value :D

Co-authored-by: Rich Harris <hello@rich-harris.dev>

* remove unused + fix JSDoc

* drive-by fix

* minor style tweaks

* tweak test

* this is faster

* tweak

* tweak

* this is faster

* typo

* tweak

* changeset

---------

Co-authored-by: Rich Harris <hello@rich-harris.dev>
Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/stale-plums-drop.md                |   5 +
 .../src/compiler/phases/2-analyze/index.js    |  84 ++++------
 .../client/visitors/RegularElement.js         |  95 ++++++++----
 .../client/visitors/SvelteElement.js          |  41 +++--
 .../client/visitors/shared/element.js         | 144 ++++++++++++-----
 .../server/visitors/shared/element.js         | 123 +++++++++------
 .../client/dom/elements/attributes.js         |  19 ++-
 .../src/internal/client/dom/elements/class.js | 139 ++++-------------
 .../src/internal/client/dom/operations.js     |   2 +-
 packages/svelte/src/internal/client/index.js  |   6 +-
 packages/svelte/src/internal/server/index.js  |  22 +--
 .../svelte/src/internal/shared/attributes.js  |  42 +++++
 .../undefined-with-scope/expected.html        |   2 +-
 .../_config.js                                |  10 +-
 .../_config.js                                |   8 +-
 .../class-directive-mutations/_config.js      |  43 ++++++
 .../class-directive-mutations/main.svelte     |  47 ++++++
 .../samples/class-directive/_config.js        | 145 ++++++++++++++++++
 .../samples/class-directive/main.svelte       |  40 +++++
 19 files changed, 688 insertions(+), 329 deletions(-)
 create mode 100644 .changeset/stale-plums-drop.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/class-directive-mutations/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/class-directive-mutations/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/class-directive/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/class-directive/main.svelte

diff --git a/.changeset/stale-plums-drop.md b/.changeset/stale-plums-drop.md
new file mode 100644
index 000000000000..d39268eb729b
--- /dev/null
+++ b/.changeset/stale-plums-drop.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: correctly override class attributes with class directives
diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js
index 93c438c8529f..ca9297279ee2 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/index.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/index.js
@@ -767,66 +767,40 @@ export function analyze_component(root, source, options) {
 		if (!should_ignore_unused) {
 			warn_unused(analysis.css.ast);
 		}
+	}
 
-		outer: for (const node of analysis.elements) {
-			if (node.metadata.scoped) {
-				// Dynamic elements in dom mode always use spread for attributes and therefore shouldn't have a class attribute added to them
-				// TODO this happens during the analysis phase, which shouldn't know anything about client vs server
-				if (node.type === 'SvelteElement' && options.generate === 'client') continue;
-
-				/** @type {AST.Attribute | undefined} */
-				let class_attribute = undefined;
-
-				for (const attribute of node.attributes) {
-					if (attribute.type === 'SpreadAttribute') {
-						// The spread method appends the hash to the end of the class attribute on its own
-						continue outer;
-					}
+	for (const node of analysis.elements) {
+		if (node.metadata.scoped && is_custom_element_node(node)) {
+			mark_subtree_dynamic(node.metadata.path);
+		}
 
-					if (attribute.type !== 'Attribute') continue;
-					if (attribute.name.toLowerCase() !== 'class') continue;
-					// The dynamic class method appends the hash to the end of the class attribute on its own
-					if (attribute.metadata.needs_clsx) continue outer;
+		let has_class = false;
+		let has_spread = false;
+		let has_class_directive = false;
 
-					class_attribute = attribute;
-				}
+		for (const attribute of node.attributes) {
+			// The spread method appends the hash to the end of the class attribute on its own
+			if (attribute.type === 'SpreadAttribute') {
+				has_spread = true;
+				break;
+			}
+			has_class_directive ||= attribute.type === 'ClassDirective';
+			has_class ||= attribute.type === 'Attribute' && attribute.name.toLowerCase() === 'class';
+		}
 
-				if (class_attribute && class_attribute.value !== true) {
-					if (is_text_attribute(class_attribute)) {
-						class_attribute.value[0].data += ` ${analysis.css.hash}`;
-					} else {
-						/** @type {AST.Text} */
-						const css_text = {
-							type: 'Text',
-							data: ` ${analysis.css.hash}`,
-							raw: ` ${analysis.css.hash}`,
-							start: -1,
-							end: -1
-						};
-
-						if (Array.isArray(class_attribute.value)) {
-							class_attribute.value.push(css_text);
-						} else {
-							class_attribute.value = [class_attribute.value, css_text];
-						}
-					}
-				} else {
-					node.attributes.push(
-						create_attribute('class', -1, -1, [
-							{
-								type: 'Text',
-								data: analysis.css.hash,
-								raw: analysis.css.hash,
-								start: -1,
-								end: -1
-							}
-						])
-					);
-					if (is_custom_element_node(node) && node.attributes.length === 1) {
-						mark_subtree_dynamic(node.metadata.path);
+		// We need an empty class to generate the set_class() or class="" correctly
+		if (!has_spread && !has_class && (node.metadata.scoped || has_class_directive)) {
+			node.attributes.push(
+				create_attribute('class', -1, -1, [
+					{
+						type: 'Text',
+						data: '',
+						raw: '',
+						start: -1,
+						end: -1
 					}
-				}
-			}
+				])
+			);
 		}
 	}
 
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 d4502210bdfd..434b49caa1e6 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
@@ -1,4 +1,4 @@
-/** @import { Expression, ExpressionStatement, Identifier, MemberExpression, Statement } from 'estree' */
+/** @import { Expression, ExpressionStatement, Identifier, MemberExpression, ObjectExpression, Statement } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { SourceLocation } from '#shared' */
 /** @import { ComponentClientTransformState, ComponentContext } from '../types' */
@@ -20,9 +20,9 @@ import { build_getter } from '../utils.js';
 import {
 	get_attribute_name,
 	build_attribute_value,
-	build_class_directives,
 	build_style_directives,
-	build_set_attributes
+	build_set_attributes,
+	build_set_class
 } from './shared/element.js';
 import { process_children } from './shared/fragment.js';
 import {
@@ -223,13 +223,13 @@ export function RegularElement(node, context) {
 
 		build_set_attributes(
 			attributes,
+			class_directives,
 			context,
 			node,
 			node_id,
 			attributes_id,
 			(node.metadata.svg || node.metadata.mathml || is_custom_element_node(node)) && b.true,
-			is_custom_element_node(node) && b.true,
-			context.state
+			is_custom_element_node(node) && b.true
 		);
 
 		// If value binding exists, that one takes care of calling $.init_select
@@ -270,13 +270,22 @@ export function RegularElement(node, context) {
 				continue;
 			}
 
+			const name = get_attribute_name(node, attribute);
 			if (
 				!is_custom_element &&
 				!cannot_be_set_statically(attribute.name) &&
-				(attribute.value === true || is_text_attribute(attribute))
+				(attribute.value === true || is_text_attribute(attribute)) &&
+				(name !== 'class' || class_directives.length === 0)
 			) {
-				const name = get_attribute_name(node, attribute);
-				const value = is_text_attribute(attribute) ? attribute.value[0].data : true;
+				let value = is_text_attribute(attribute) ? attribute.value[0].data : true;
+
+				if (name === 'class' && node.metadata.scoped && context.state.analysis.css.hash) {
+					if (value === true || value === '') {
+						value = context.state.analysis.css.hash;
+					} else {
+						value += ' ' + context.state.analysis.css.hash;
+					}
+				}
 
 				if (name !== 'class' || value) {
 					context.state.template.push(
@@ -290,15 +299,22 @@ export function RegularElement(node, context) {
 				continue;
 			}
 
-			const is = is_custom_element
-				? build_custom_element_attribute_update_assignment(node_id, attribute, context)
-				: build_element_attribute_update_assignment(node, node_id, attribute, attributes, context);
+			const is =
+				is_custom_element && name !== 'class'
+					? build_custom_element_attribute_update_assignment(node_id, attribute, context)
+					: build_element_attribute_update_assignment(
+							node,
+							node_id,
+							attribute,
+							attributes,
+							class_directives,
+							context
+						);
 			if (is) is_attributes_reactive = true;
 		}
 	}
 
-	// class/style directives must be applied last since they could override class/style attributes
-	build_class_directives(class_directives, node_id, context, is_attributes_reactive);
+	// style directives must be applied last since they could override class/style attributes
 	build_style_directives(style_directives, node_id, context, is_attributes_reactive);
 
 	if (
@@ -491,6 +507,27 @@ function setup_select_synchronization(value_binding, context) {
 	);
 }
 
+/**
+ * @param {AST.ClassDirective[]} class_directives
+ * @param {ComponentContext} context
+ * @return {ObjectExpression}
+ */
+export function build_class_directives_object(class_directives, context) {
+	let properties = [];
+
+	for (const d of class_directives) {
+		let expression = /** @type Expression */ (context.visit(d.expression));
+
+		if (d.metadata.expression.has_call) {
+			expression = get_expression_id(context.state, expression);
+		}
+
+		properties.push(b.init(d.name, expression));
+	}
+
+	return b.object(properties);
+}
+
 /**
  * Serializes an assignment to an element property by adding relevant statements to either only
  * the init or the the init and update arrays, depending on whether or not the value is dynamic.
@@ -517,6 +554,7 @@ function setup_select_synchronization(value_binding, context) {
  * @param {Identifier} node_id
  * @param {AST.Attribute} attribute
  * @param {Array<AST.Attribute | AST.SpreadAttribute>} attributes
+ * @param {AST.ClassDirective[]} class_directives
  * @param {ComponentContext} context
  * @returns {boolean}
  */
@@ -525,6 +563,7 @@ function build_element_attribute_update_assignment(
 	node_id,
 	attribute,
 	attributes,
+	class_directives,
 	context
 ) {
 	const state = context.state;
@@ -563,19 +602,15 @@ function build_element_attribute_update_assignment(
 	let update;
 
 	if (name === 'class') {
-		if (attribute.metadata.needs_clsx) {
-			value = b.call('$.clsx', value);
-		}
-
-		update = b.stmt(
-			b.call(
-				is_svg ? '$.set_svg_class' : is_mathml ? '$.set_mathml_class' : '$.set_class',
-				node_id,
-				value,
-				attribute.metadata.needs_clsx && context.state.analysis.css.hash
-					? b.literal(context.state.analysis.css.hash)
-					: undefined
-			)
+		return build_set_class(
+			element,
+			node_id,
+			attribute,
+			value,
+			has_state,
+			class_directives,
+			context,
+			!is_svg && !is_mathml
 		);
 	} else if (name === 'value') {
 		update = b.stmt(b.call('$.set_value', node_id, value));
@@ -639,14 +674,6 @@ function build_custom_element_attribute_update_assignment(node_id, attribute, co
 	const name = attribute.name; // don't lowercase, as we set the element's property, which might be case sensitive
 	let { value, has_state } = build_attribute_value(attribute.value, context);
 
-	// We assume that noone's going to redefine the semantics of the class attribute on custom elements, i.e. it's still used for CSS classes
-	if (name === 'class' && attribute.metadata.needs_clsx) {
-		if (context.state.analysis.css.hash) {
-			value = b.array([value, b.literal(context.state.analysis.css.hash)]);
-		}
-		value = b.call('$.clsx', value);
-	}
-
 	const update = b.stmt(b.call('$.set_custom_element_data', node_id, b.literal(name), value));
 
 	if (has_state) {
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js
index e27528365518..7149f8d0e4af 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js
@@ -7,11 +7,11 @@ import * as b from '../../../../utils/builders.js';
 import { determine_namespace_for_children } from '../../utils.js';
 import {
 	build_attribute_value,
-	build_class_directives,
 	build_set_attributes,
+	build_set_class,
 	build_style_directives
 } from './shared/element.js';
-import { build_render_statement } from './shared/utils.js';
+import { build_render_statement, get_expression_id } from './shared/utils.js';
 
 /**
  * @param {AST.SvelteElement} node
@@ -80,31 +80,46 @@ export function SvelteElement(node, context) {
 	// Then do attributes
 	let is_attributes_reactive = false;
 
-	if (attributes.length === 0) {
-		if (context.state.analysis.css.hash) {
-			inner_context.state.init.push(
-				b.stmt(b.call('$.set_class', element_id, b.literal(context.state.analysis.css.hash)))
-			);
-		}
-	} else {
+	if (
+		attributes.length === 1 &&
+		attributes[0].type === 'Attribute' &&
+		attributes[0].name.toLowerCase() === 'class'
+	) {
+		// special case when there only a class attribute
+		let { value, has_state } = build_attribute_value(
+			attributes[0].value,
+			context,
+			(value, metadata) => (metadata.has_call ? get_expression_id(context.state, value) : value)
+		);
+
+		is_attributes_reactive = build_set_class(
+			node,
+			element_id,
+			attributes[0],
+			value,
+			has_state,
+			class_directives,
+			inner_context,
+			false
+		);
+	} else if (attributes.length) {
 		const attributes_id = b.id(context.state.scope.generate('attributes'));
 
 		// Always use spread because we don't know whether the element is a custom element or not,
 		// therefore we need to do the "how to set an attribute" logic at runtime.
 		is_attributes_reactive = build_set_attributes(
 			attributes,
+			class_directives,
 			inner_context,
 			node,
 			element_id,
 			attributes_id,
 			b.binary('===', b.member(element_id, 'namespaceURI'), b.id('$.NAMESPACE_SVG')),
-			b.call(b.member(b.member(element_id, 'nodeName'), 'includes'), b.literal('-')),
-			context.state
+			b.call(b.member(b.member(element_id, 'nodeName'), 'includes'), b.literal('-'))
 		);
 	}
 
-	// class/style directives must be applied last since they could override class/style attributes
-	build_class_directives(class_directives, element_id, inner_context, is_attributes_reactive);
+	// style directives must be applied last since they could override class/style attributes
 	build_style_directives(style_directives, element_id, inner_context, is_attributes_reactive);
 
 	const get_tag = b.thunk(/** @type {Expression} */ (context.visit(node.tag)));
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js
index abffad0ff7a4..fc5fd2cc4c53 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js
@@ -1,32 +1,34 @@
 /** @import { Expression, Identifier, ObjectExpression } from 'estree' */
 /** @import { AST, ExpressionMetadata } from '#compiler' */
 /** @import { ComponentClientTransformState, ComponentContext } from '../../types' */
+import { escape_html } from '../../../../../../escaping.js';
 import { normalize_attribute } from '../../../../../../utils.js';
 import { is_ignored } from '../../../../../state.js';
 import { is_event_attribute } from '../../../../../utils/ast.js';
 import * as b from '../../../../../utils/builders.js';
 import { build_getter } from '../../utils.js';
+import { build_class_directives_object } from '../RegularElement.js';
 import { build_template_chunk, get_expression_id } from './utils.js';
 
 /**
  * @param {Array<AST.Attribute | AST.SpreadAttribute>} attributes
+ * @param {AST.ClassDirective[]} class_directives
  * @param {ComponentContext} context
  * @param {AST.RegularElement | AST.SvelteElement} element
  * @param {Identifier} element_id
  * @param {Identifier} attributes_id
  * @param {false | Expression} preserve_attribute_case
  * @param {false | Expression} is_custom_element
- * @param {ComponentClientTransformState} state
  */
 export function build_set_attributes(
 	attributes,
+	class_directives,
 	context,
 	element,
 	element_id,
 	attributes_id,
 	preserve_attribute_case,
-	is_custom_element,
-	state
+	is_custom_element
 ) {
 	let is_dynamic = false;
 
@@ -68,6 +70,19 @@ export function build_set_attributes(
 		}
 	}
 
+	if (class_directives.length) {
+		values.push(
+			b.prop(
+				'init',
+				b.array([b.id('$.CLASS')]),
+				build_class_directives_object(class_directives, context)
+			)
+		);
+
+		is_dynamic ||=
+			class_directives.find((directive) => directive.metadata.expression.has_state) !== null;
+	}
+
 	const call = b.call(
 		'$.set_attributes',
 		element_id,
@@ -134,39 +149,6 @@ export function build_style_directives(
 	}
 }
 
-/**
- * Serializes each class directive into something like `$.class_toogle(element, class_name, value)`
- * and adds it either to init or update, depending on whether or not the value or the attributes are dynamic.
- * @param {AST.ClassDirective[]} class_directives
- * @param {Identifier} element_id
- * @param {ComponentContext} context
- * @param {boolean} is_attributes_reactive
- */
-export function build_class_directives(
-	class_directives,
-	element_id,
-	context,
-	is_attributes_reactive
-) {
-	const state = context.state;
-	for (const directive of class_directives) {
-		const { has_state, has_call } = directive.metadata.expression;
-		let value = /** @type {Expression} */ (context.visit(directive.expression));
-
-		if (has_call) {
-			value = get_expression_id(state, value);
-		}
-
-		const update = b.stmt(b.call('$.toggle_class', element_id, b.literal(directive.name), value));
-
-		if (is_attributes_reactive || has_state) {
-			state.update.push(update);
-		} else {
-			state.init.push(update);
-		}
-	}
-}
-
 /**
  * @param {AST.Attribute['value']} value
  * @param {ComponentContext} context
@@ -207,3 +189,93 @@ export function get_attribute_name(element, attribute) {
 
 	return attribute.name;
 }
+
+/**
+ * @param {AST.RegularElement | AST.SvelteElement} element
+ * @param {Identifier} node_id
+ * @param {AST.Attribute | null} attribute
+ * @param {Expression} value
+ * @param {boolean} has_state
+ * @param {AST.ClassDirective[]} class_directives
+ * @param {ComponentContext} context
+ * @param {boolean} is_html
+ * @returns {boolean}
+ */
+export function build_set_class(
+	element,
+	node_id,
+	attribute,
+	value,
+	has_state,
+	class_directives,
+	context,
+	is_html
+) {
+	if (attribute && attribute.metadata.needs_clsx) {
+		value = b.call('$.clsx', value);
+	}
+
+	/** @type {Identifier | undefined} */
+	let previous_id;
+
+	/** @type {ObjectExpression | Identifier | undefined} */
+	let prev;
+
+	/** @type {ObjectExpression | undefined} */
+	let next;
+
+	if (class_directives.length) {
+		next = build_class_directives_object(class_directives, context);
+		has_state ||= class_directives.some((d) => d.metadata.expression.has_state);
+
+		if (has_state) {
+			previous_id = b.id(context.state.scope.generate('classes'));
+			context.state.init.push(b.declaration('let', [b.declarator(previous_id)]));
+			prev = previous_id;
+		} else {
+			prev = b.object([]);
+		}
+	}
+
+	/** @type {Expression | undefined} */
+	let css_hash;
+
+	if (element.metadata.scoped && context.state.analysis.css.hash) {
+		if (value.type === 'Literal' && (value.value === '' || value.value === null)) {
+			value = b.literal(context.state.analysis.css.hash);
+		} else if (value.type === 'Literal' && typeof value.value === 'string') {
+			value = b.literal(escape_html(value.value, true) + ' ' + context.state.analysis.css.hash);
+		} else {
+			css_hash = b.literal(context.state.analysis.css.hash);
+		}
+	}
+
+	if (!css_hash && next) {
+		css_hash = b.null;
+	}
+
+	/** @type {Expression} */
+	let set_class = b.call(
+		'$.set_class',
+		node_id,
+		is_html ? b.literal(1) : b.literal(0),
+		value,
+		css_hash,
+		prev,
+		next
+	);
+
+	if (previous_id) {
+		set_class = b.assignment('=', previous_id, set_class);
+	}
+
+	const update = b.stmt(set_class);
+
+	if (has_state) {
+		context.state.update.push(update);
+		return true;
+	}
+
+	context.state.init.push(update);
+	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 d0d800d3cbc5..57101af4b823 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
@@ -1,4 +1,4 @@
-/** @import { Expression, Literal } from 'estree' */
+/** @import { Expression, Literal, ObjectExpression } from 'estree' */
 /** @import { AST, Namespace } from '#compiler' */
 /** @import { ComponentContext, ComponentServerTransformState } from '../../types.js' */
 import {
@@ -24,6 +24,7 @@ import {
 	is_content_editable_binding,
 	is_load_error_element
 } from '../../../../../../utils.js';
+import { escape_html } from '../../../../../../escaping.js';
 
 const WHITESPACE_INSENSITIVE_ATTRIBUTES = ['class', 'style'];
 
@@ -86,23 +87,15 @@ export function build_element_attributes(node, context) {
 			} else if (attribute.name !== 'defaultValue' && attribute.name !== 'defaultChecked') {
 				if (attribute.name === 'class') {
 					class_index = attributes.length;
-
 					if (attribute.metadata.needs_clsx) {
-						const clsx_value = b.call(
-							'$.clsx',
-							/** @type {AST.ExpressionTag} */ (attribute.value).expression
-						);
 						attributes.push({
 							...attribute,
 							value: {
 								.../** @type {AST.ExpressionTag} */ (attribute.value),
-								expression: context.state.analysis.css.hash
-									? b.binary(
-											'+',
-											b.binary('+', clsx_value, b.literal(' ')),
-											b.literal(context.state.analysis.css.hash)
-										)
-									: clsx_value
+								expression: b.call(
+									'$.clsx',
+									/** @type {AST.ExpressionTag} */ (attribute.value).expression
+								)
 							}
 						});
 					} else {
@@ -219,8 +212,9 @@ export function build_element_attributes(node, context) {
 		}
 	}
 
-	if (class_directives.length > 0 && !has_spread) {
-		const class_attribute = build_class_directives(
+	if ((node.metadata.scoped || class_directives.length) && !has_spread) {
+		const class_attribute = build_to_class(
+			node.metadata.scoped ? context.state.analysis.css.hash : null,
 			class_directives,
 			/** @type {AST.Attribute | null} */ (attributes[class_index] ?? null)
 		);
@@ -274,9 +268,14 @@ export function build_element_attributes(node, context) {
 				WHITESPACE_INSENSITIVE_ATTRIBUTES.includes(name)
 			);
 
-			context.state.template.push(
-				b.call('$.attr', b.literal(name), value, is_boolean_attribute(name) && b.true)
-			);
+			// pre-escape and inline literal attributes :
+			if (value.type === 'Literal' && typeof value.value === 'string') {
+				context.state.template.push(b.literal(` ${name}="${escape_html(value.value, true)}"`));
+			} else {
+				context.state.template.push(
+					b.call('$.attr', b.literal(name), value, is_boolean_attribute(name) && b.true)
+				);
+			}
 		}
 	}
 
@@ -322,7 +321,7 @@ function build_element_spread_attributes(
 	let styles;
 	let flags = 0;
 
-	if (class_directives.length > 0 || context.state.analysis.css.hash) {
+	if (class_directives.length) {
 		const properties = class_directives.map((directive) =>
 			b.init(
 				directive.name,
@@ -331,11 +330,6 @@ function build_element_spread_attributes(
 					: /** @type {Expression} */ (context.visit(directive.expression))
 			)
 		);
-
-		if (context.state.analysis.css.hash) {
-			properties.unshift(b.init(context.state.analysis.css.hash, b.literal(true)));
-		}
-
 		classes = b.object(properties);
 	}
 
@@ -374,55 +368,82 @@ function build_element_spread_attributes(
 		})
 	);
 
-	const args = [object, classes, styles, flags ? b.literal(flags) : undefined];
+	const css_hash = context.state.analysis.css.hash
+		? b.literal(context.state.analysis.css.hash)
+		: b.null;
+
+	const args = [object, css_hash, classes, styles, flags ? b.literal(flags) : undefined];
 	context.state.template.push(b.call('$.spread_attributes', ...args));
 }
 
 /**
  *
+ * @param {string | null} hash
  * @param {AST.ClassDirective[]} class_directives
  * @param {AST.Attribute | null} class_attribute
  * @returns
  */
-function build_class_directives(class_directives, class_attribute) {
-	const expressions = class_directives.map((directive) =>
-		b.conditional(directive.expression, b.literal(directive.name), b.literal(''))
-	);
-
+function build_to_class(hash, class_directives, class_attribute) {
 	if (class_attribute === null) {
 		class_attribute = create_attribute('class', -1, -1, []);
 	}
 
-	const chunks = get_attribute_chunks(class_attribute.value);
-	const last = chunks.at(-1);
-
-	if (last?.type === 'Text') {
-		last.data += ' ';
-		last.raw += ' ';
-	} else if (last) {
-		chunks.push({
-			type: 'Text',
-			start: -1,
-			end: -1,
-			data: ' ',
-			raw: ' '
-		});
+	/** @type {ObjectExpression | undefined} */
+	let classes;
+
+	if (class_directives.length) {
+		classes = b.object(
+			class_directives.map((directive) =>
+				b.prop('init', b.literal(directive.name), directive.expression)
+			)
+		);
+	}
+
+	/** @type {Expression} */
+	let class_name;
+
+	if (class_attribute.value === true) {
+		class_name = b.literal('');
+	} else if (Array.isArray(class_attribute.value)) {
+		if (class_attribute.value.length === 0) {
+			class_name = b.null;
+		} else {
+			class_name = class_attribute.value
+				.map((val) => (val.type === 'Text' ? b.literal(val.data) : val.expression))
+				.reduce((left, right) => b.binary('+', left, right));
+		}
+	} else {
+		class_name = class_attribute.value.expression;
 	}
 
-	chunks.push({
+	/** @type {Expression} */
+	let expression;
+
+	if (
+		hash &&
+		!classes &&
+		class_name.type === 'Literal' &&
+		(class_name.value === null || class_name.value === '' || typeof class_name.value === 'string')
+	) {
+		if (class_name.value === null || class_name.value === '') {
+			expression = b.literal(hash);
+		} else {
+			expression = b.literal(escape_html(class_name.value, true) + ' ' + hash);
+		}
+	} else {
+		expression = b.call('$.to_class', class_name, b.literal(hash), classes);
+	}
+
+	class_attribute.value = {
 		type: 'ExpressionTag',
 		start: -1,
 		end: -1,
-		expression: b.call(
-			b.member(b.call(b.member(b.array(expressions), 'filter'), b.id('Boolean')), b.id('join')),
-			b.literal(' ')
-		),
+		expression: expression,
 		metadata: {
 			expression: create_expression_metadata()
 		}
-	});
+	};
 
-	class_attribute.value = chunks;
 	return class_attribute;
 }
 
diff --git a/packages/svelte/src/internal/client/dom/elements/attributes.js b/packages/svelte/src/internal/client/dom/elements/attributes.js
index 2dba2d797a4a..151024e85c2e 100644
--- a/packages/svelte/src/internal/client/dom/elements/attributes.js
+++ b/packages/svelte/src/internal/client/dom/elements/attributes.js
@@ -14,6 +14,10 @@ import {
 	set_active_reaction
 } from '../../runtime.js';
 import { clsx } from '../../../shared/attributes.js';
+import { set_class } from './class.js';
+
+export const CLASS = Symbol('class');
+export const STYLE = Symbol('style');
 
 /**
  * The value/checked attribute in the template actually corresponds to the defaultValue property, so we need
@@ -254,8 +258,8 @@ export function set_custom_element_data(node, prop, value) {
 /**
  * Spreads attributes onto a DOM element, taking into account the currently set attributes
  * @param {Element & ElementCSSInlineStyle} element
- * @param {Record<string, any> | undefined} prev
- * @param {Record<string, any>} next New attributes - this function mutates this object
+ * @param {Record<string | symbol, any> | undefined} prev
+ * @param {Record<string | symbol, any>} next New attributes - this function mutates this object
  * @param {string} [css_hash]
  * @param {boolean} [preserve_attribute_case]
  * @param {boolean} [is_custom_element]
@@ -289,10 +293,8 @@ export function set_attributes(
 
 	if (next.class) {
 		next.class = clsx(next.class);
-	}
-
-	if (css_hash !== undefined) {
-		next.class = next.class ? next.class + ' ' + css_hash : css_hash;
+	} else if (css_hash || next[CLASS]) {
+		next.class = null; /* force call to set_class() */
 	}
 
 	var setters = get_setters(element);
@@ -325,7 +327,7 @@ export function set_attributes(
 		}
 
 		var prev_value = current[key];
-		if (value === prev_value) continue;
+		if (value === prev_value && key !== 'class') continue;
 
 		current[key] = value;
 
@@ -375,6 +377,9 @@ export function set_attributes(
 				// @ts-ignore
 				element[`__${event_name}`] = undefined;
 			}
+		} else if (key === 'class') {
+			var is_html = element.namespaceURI === 'http://www.w3.org/1999/xhtml';
+			set_class(element, is_html, value, css_hash, prev?.[CLASS], next[CLASS]);
 		} else if (key === 'style' && value != null) {
 			element.style.cssText = value + '';
 		} else if (key === 'autofocus') {
diff --git a/packages/svelte/src/internal/client/dom/elements/class.js b/packages/svelte/src/internal/client/dom/elements/class.js
index 62ffb6d14b5c..3308709a247f 100644
--- a/packages/svelte/src/internal/client/dom/elements/class.js
+++ b/packages/svelte/src/internal/client/dom/elements/class.js
@@ -1,120 +1,49 @@
+import { to_class } from '../../../shared/attributes.js';
 import { hydrating } from '../hydration.js';
 
 /**
- * @param {SVGElement} dom
- * @param {string} value
- * @param {string} [hash]
- * @returns {void}
- */
-export function set_svg_class(dom, value, hash) {
-	// @ts-expect-error need to add __className to patched prototype
-	var prev_class_name = dom.__className;
-	var next_class_name = to_class(value, hash);
-
-	if (hydrating && dom.getAttribute('class') === next_class_name) {
-		// In case of hydration don't reset the class as it's already correct.
-		// @ts-expect-error need to add __className to patched prototype
-		dom.__className = next_class_name;
-	} else if (
-		prev_class_name !== next_class_name ||
-		(hydrating && dom.getAttribute('class') !== next_class_name)
-	) {
-		if (next_class_name === '') {
-			dom.removeAttribute('class');
-		} else {
-			dom.setAttribute('class', next_class_name);
-		}
-
-		// @ts-expect-error need to add __className to patched prototype
-		dom.__className = next_class_name;
-	}
-}
-
-/**
- * @param {MathMLElement} dom
- * @param {string} value
+ * @param {Element} dom
+ * @param {boolean | number} is_html
+ * @param {string | null} value
  * @param {string} [hash]
- * @returns {void}
+ * @param {Record<string, boolean>} [prev_classes]
+ * @param {Record<string, boolean>} [next_classes]
+ * @returns {Record<string, boolean> | undefined}
  */
-export function set_mathml_class(dom, value, hash) {
+export function set_class(dom, is_html, value, hash, prev_classes, next_classes) {
 	// @ts-expect-error need to add __className to patched prototype
-	var prev_class_name = dom.__className;
-	var next_class_name = to_class(value, hash);
-
-	if (hydrating && dom.getAttribute('class') === next_class_name) {
-		// In case of hydration don't reset the class as it's already correct.
-		// @ts-expect-error need to add __className to patched prototype
-		dom.__className = next_class_name;
-	} else if (
-		prev_class_name !== next_class_name ||
-		(hydrating && dom.getAttribute('class') !== next_class_name)
-	) {
-		if (next_class_name === '') {
-			dom.removeAttribute('class');
-		} else {
-			dom.setAttribute('class', next_class_name);
+	var prev = dom.__className;
+
+	if (hydrating || prev !== value) {
+		var next_class_name = to_class(value, hash, next_classes);
+
+		if (!hydrating || next_class_name !== dom.getAttribute('class')) {
+			// Removing the attribute when the value is only an empty string causes
+			// performance issues vs simply making the className an empty string. So
+			// we should only remove the class if the the value is nullish
+			// and there no hash/directives :
+			if (next_class_name == null) {
+				dom.removeAttribute('class');
+			} else if (is_html) {
+				dom.className = next_class_name;
+			} else {
+				dom.setAttribute('class', next_class_name);
+			}
 		}
 
 		// @ts-expect-error need to add __className to patched prototype
-		dom.__className = next_class_name;
-	}
-}
+		dom.__className = value;
+	} else if (next_classes) {
+		prev_classes ??= {};
 
-/**
- * @param {HTMLElement} dom
- * @param {string} value
- * @param {string} [hash]
- * @returns {void}
- */
-export function set_class(dom, value, hash) {
-	// @ts-expect-error need to add __className to patched prototype
-	var prev_class_name = dom.__className;
-	var next_class_name = to_class(value, hash);
+		for (var key in next_classes) {
+			var is_present = !!next_classes[key];
 
-	if (hydrating && dom.className === next_class_name) {
-		// In case of hydration don't reset the class as it's already correct.
-		// @ts-expect-error need to add __className to patched prototype
-		dom.__className = next_class_name;
-	} else if (
-		prev_class_name !== next_class_name ||
-		(hydrating && dom.className !== next_class_name)
-	) {
-		// Removing the attribute when the value is only an empty string causes
-		// peformance issues vs simply making the className an empty string. So
-		// we should only remove the class if the the value is nullish.
-		if (value == null && !hash) {
-			dom.removeAttribute('class');
-		} else {
-			dom.className = next_class_name;
+			if (is_present !== !!prev_classes[key]) {
+				dom.classList.toggle(key, is_present);
+			}
 		}
-
-		// @ts-expect-error need to add __className to patched prototype
-		dom.__className = next_class_name;
 	}
-}
 
-/**
- * @template V
- * @param {V} value
- * @param {string} [hash]
- * @returns {string | V}
- */
-function to_class(value, hash) {
-	return (value == null ? '' : value) + (hash ? ' ' + hash : '');
-}
-
-/**
- * @param {Element} dom
- * @param {string} class_name
- * @param {boolean} value
- * @returns {void}
- */
-export function toggle_class(dom, class_name, value) {
-	if (value) {
-		if (dom.classList.contains(class_name)) return;
-		dom.classList.add(class_name);
-	} else {
-		if (!dom.classList.contains(class_name)) return;
-		dom.classList.remove(class_name);
-	}
+	return next_classes;
 }
diff --git a/packages/svelte/src/internal/client/dom/operations.js b/packages/svelte/src/internal/client/dom/operations.js
index 83565d17ae68..f6ac92456e78 100644
--- a/packages/svelte/src/internal/client/dom/operations.js
+++ b/packages/svelte/src/internal/client/dom/operations.js
@@ -44,7 +44,7 @@ export function init_operations() {
 	// @ts-expect-error
 	element_prototype.__click = undefined;
 	// @ts-expect-error
-	element_prototype.__className = '';
+	element_prototype.__className = undefined;
 	// @ts-expect-error
 	element_prototype.__attributes = null;
 	// @ts-expect-error
diff --git a/packages/svelte/src/internal/client/index.js b/packages/svelte/src/internal/client/index.js
index d78f6d452e84..431ac8cf2492 100644
--- a/packages/svelte/src/internal/client/index.js
+++ b/packages/svelte/src/internal/client/index.js
@@ -39,9 +39,11 @@ export {
 	set_checked,
 	set_selected,
 	set_default_checked,
-	set_default_value
+	set_default_value,
+	CLASS,
+	STYLE
 } from './dom/elements/attributes.js';
-export { set_class, set_svg_class, set_mathml_class, toggle_class } from './dom/elements/class.js';
+export { set_class } from './dom/elements/class.js';
 export { apply, event, delegate, replay_events } from './dom/elements/events.js';
 export { autofocus, remove_textarea_child } from './dom/elements/misc.js';
 export { set_style } from './dom/elements/style.js';
diff --git a/packages/svelte/src/internal/server/index.js b/packages/svelte/src/internal/server/index.js
index e8ffeed2fef5..160a1faa653e 100644
--- a/packages/svelte/src/internal/server/index.js
+++ b/packages/svelte/src/internal/server/index.js
@@ -2,7 +2,7 @@
 /** @import { Component, Payload, RenderOutput } from '#server' */
 /** @import { Store } from '#shared' */
 export { FILENAME, HMR } from '../../constants.js';
-import { attr, clsx } from '../shared/attributes.js';
+import { attr, clsx, to_class } from '../shared/attributes.js';
 import { is_promise, noop } from '../shared/utils.js';
 import { subscribe_to_store } from '../../store/utils.js';
 import {
@@ -10,7 +10,6 @@ import {
 	ELEMENT_PRESERVE_ATTRIBUTE_CASE,
 	ELEMENT_IS_NAMESPACED
 } from '../../constants.js';
-
 import { escape_html } from '../../escaping.js';
 import { DEV } from 'esm-env';
 import { current_component, pop, push } from './context.js';
@@ -198,12 +197,13 @@ export function css_props(payload, is_html, props, component, dynamic = false) {
 
 /**
  * @param {Record<string, unknown>} attrs
- * @param {Record<string, string>} [classes]
+ * @param {string | null} css_hash
+ * @param {Record<string, boolean>} [classes]
  * @param {Record<string, string>} [styles]
  * @param {number} [flags]
  * @returns {string}
  */
-export function spread_attributes(attrs, classes, styles, flags = 0) {
+export function spread_attributes(attrs, css_hash, classes, styles, flags = 0) {
 	if (styles) {
 		attrs.style = attrs.style
 			? style_object_to_string(merge_styles(/** @type {string} */ (attrs.style), styles))
@@ -214,16 +214,8 @@ export function spread_attributes(attrs, classes, styles, flags = 0) {
 		attrs.class = clsx(attrs.class);
 	}
 
-	if (classes) {
-		const classlist = attrs.class ? [attrs.class] : [];
-
-		for (const key in classes) {
-			if (classes[key]) {
-				classlist.push(key);
-			}
-		}
-
-		attrs.class = classlist.join(' ');
+	if (css_hash || classes) {
+		attrs.class = to_class(attrs.class, css_hash, classes);
 	}
 
 	let attr_str = '';
@@ -552,7 +544,7 @@ export function props_id(payload) {
 	return uid;
 }
 
-export { attr, clsx };
+export { attr, clsx, to_class };
 
 export { html } from './blocks/html.js';
 
diff --git a/packages/svelte/src/internal/shared/attributes.js b/packages/svelte/src/internal/shared/attributes.js
index a561501bf4f6..89cc17e51b9d 100644
--- a/packages/svelte/src/internal/shared/attributes.js
+++ b/packages/svelte/src/internal/shared/attributes.js
@@ -40,3 +40,45 @@ export function clsx(value) {
 		return value ?? '';
 	}
 }
+
+const whitespace = [...' \t\n\r\f\u00a0\u000b\ufeff'];
+
+/**
+ * @param {any} value
+ * @param {string | null} [hash]
+ * @param {Record<string, boolean>} [directives]
+ * @returns {string | null}
+ */
+export function to_class(value, hash, directives) {
+	var classname = value == null ? '' : '' + value;
+
+	if (hash) {
+		classname = classname ? classname + ' ' + hash : hash;
+	}
+
+	if (directives) {
+		for (var key in directives) {
+			if (directives[key]) {
+				classname = classname ? classname + ' ' + key : key;
+			} else if (classname.length) {
+				var len = key.length;
+				var a = 0;
+
+				while ((a = classname.indexOf(key, a)) >= 0) {
+					var b = a + len;
+
+					if (
+						(a === 0 || whitespace.includes(classname[a - 1])) &&
+						(b === classname.length || whitespace.includes(classname[b]))
+					) {
+						classname = (a === 0 ? '' : classname.substring(0, a)) + classname.substring(b + 1);
+					} else {
+						a = b;
+					}
+				}
+			}
+		}
+	}
+
+	return classname === '' ? null : classname;
+}
diff --git a/packages/svelte/tests/css/samples/undefined-with-scope/expected.html b/packages/svelte/tests/css/samples/undefined-with-scope/expected.html
index ddb9429bc891..5eecaa9bb256 100644
--- a/packages/svelte/tests/css/samples/undefined-with-scope/expected.html
+++ b/packages/svelte/tests/css/samples/undefined-with-scope/expected.html
@@ -1 +1 @@
-<p class=" svelte-xyz">Foo</p>
\ No newline at end of file
+<p class="svelte-xyz">Foo</p>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-legacy/samples/attribute-null-classname-with-style/_config.js b/packages/svelte/tests/runtime-legacy/samples/attribute-null-classname-with-style/_config.js
index c8710f9038b9..cbd0456e1335 100644
--- a/packages/svelte/tests/runtime-legacy/samples/attribute-null-classname-with-style/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/attribute-null-classname-with-style/_config.js
@@ -1,17 +1,17 @@
 import { ok, test } from '../../test';
 
 export default test({
-	html: '<div class=" svelte-x1o6ra"></div>',
+	html: '<div class="svelte-x1o6ra"></div>',
 
 	test({ assert, component, target }) {
 		const div = target.querySelector('div');
 		ok(div);
 
 		component.testName = null;
-		assert.equal(div.className, ' svelte-x1o6ra');
+		assert.equal(div.className, 'svelte-x1o6ra');
 
 		component.testName = undefined;
-		assert.equal(div.className, ' svelte-x1o6ra');
+		assert.equal(div.className, 'svelte-x1o6ra');
 
 		component.testName = undefined + '';
 		assert.equal(div.className, 'undefined svelte-x1o6ra');
@@ -32,10 +32,10 @@ export default test({
 		assert.equal(div.className, 'true svelte-x1o6ra');
 
 		component.testName = {};
-		assert.equal(div.className, ' svelte-x1o6ra');
+		assert.equal(div.className, 'svelte-x1o6ra');
 
 		component.testName = '';
-		assert.equal(div.className, ' svelte-x1o6ra');
+		assert.equal(div.className, 'svelte-x1o6ra');
 
 		component.testName = 'testClassName';
 		assert.equal(div.className, 'testClassName svelte-x1o6ra');
diff --git a/packages/svelte/tests/runtime-legacy/samples/attribute-null-func-classname-with-style/_config.js b/packages/svelte/tests/runtime-legacy/samples/attribute-null-func-classname-with-style/_config.js
index 8d0f411b8fd2..081fceecf279 100644
--- a/packages/svelte/tests/runtime-legacy/samples/attribute-null-func-classname-with-style/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/attribute-null-func-classname-with-style/_config.js
@@ -16,10 +16,10 @@ export default test({
 		assert.equal(div.className, 'testClassName svelte-x1o6ra');
 
 		component.testName = null;
-		assert.equal(div.className, ' svelte-x1o6ra');
+		assert.equal(div.className, 'svelte-x1o6ra');
 
 		component.testName = undefined;
-		assert.equal(div.className, ' svelte-x1o6ra');
+		assert.equal(div.className, 'svelte-x1o6ra');
 
 		component.testName = undefined + '';
 		assert.equal(div.className, 'undefined svelte-x1o6ra');
@@ -40,9 +40,9 @@ export default test({
 		assert.equal(div.className, 'true svelte-x1o6ra');
 
 		component.testName = {};
-		assert.equal(div.className, ' svelte-x1o6ra');
+		assert.equal(div.className, 'svelte-x1o6ra');
 
 		component.testName = '';
-		assert.equal(div.className, ' svelte-x1o6ra');
+		assert.equal(div.className, 'svelte-x1o6ra');
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/class-directive-mutations/_config.js b/packages/svelte/tests/runtime-runes/samples/class-directive-mutations/_config.js
new file mode 100644
index 000000000000..dd1bc6ac1a79
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-directive-mutations/_config.js
@@ -0,0 +1,43 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+// This test counts mutations on hydration
+// set_class() should not mutate class on hydration, except if mismatch
+export default test({
+	mode: ['server', 'hydrate'],
+
+	server_props: {
+		browser: false
+	},
+
+	props: {
+		browser: true
+	},
+
+	html: `
+		<main id="main" class="browser">
+			<div class="custom svelte-1cjqok6 foo bar"></div>
+			<span class="svelte-1cjqok6 foo bar"></span>
+			<b class="custom foo bar"></b>
+			<i class="foo bar"></i>
+		</main>
+	`,
+
+	ssrHtml: `
+		<main id="main">
+			<div class="custom svelte-1cjqok6 foo bar"></div>
+			<span class="svelte-1cjqok6 foo bar"></span>
+			<b class="custom foo bar"></b>
+			<i class="foo bar"></i>
+		</main>
+	`,
+
+	async test({ assert, component, instance }) {
+		flushSync();
+		assert.deepEqual(instance.get_and_clear_mutations(), ['MAIN']);
+
+		component.foo = false;
+		flushSync();
+		assert.deepEqual(instance.get_and_clear_mutations(), ['DIV', 'SPAN', 'B', 'I']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/class-directive-mutations/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-directive-mutations/main.svelte
new file mode 100644
index 000000000000..825362dcaf82
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-directive-mutations/main.svelte
@@ -0,0 +1,47 @@
+<script>
+	let {
+		classname = 'custom',
+		foo = true,
+		bar = true,
+		browser
+	} = $props();
+
+	let mutations = [];
+	let observer;
+
+	if (browser) {
+		observer = new MutationObserver(update_mutation_records);
+		observer.observe(document.querySelector('#main'), { attributes: true, subtree: true });
+
+		$effect(() => {
+			return () => observer.disconnect();
+		});
+	}
+
+	function update_mutation_records(results) {
+		for (const r of results) {
+			mutations.push(r.target.nodeName);
+		}
+	}
+
+	export function get_and_clear_mutations() {
+		update_mutation_records(observer.takeRecords());
+		const result = mutations;
+		mutations = [];
+		return result;
+	}
+</script>
+
+<main id="main" class:browser>
+	<div class={classname} class:foo class:bar></div>
+	<span class:foo class:bar></span>
+	<b class={classname} class:foo class:bar></b>
+	<i class:foo class:bar></i>
+</main>
+
+<style>
+	div,
+	span {
+		color: red;
+	}
+</style>
diff --git a/packages/svelte/tests/runtime-runes/samples/class-directive/_config.js b/packages/svelte/tests/runtime-runes/samples/class-directive/_config.js
new file mode 100644
index 000000000000..2756b40493e2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-directive/_config.js
@@ -0,0 +1,145 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `
+	<div class="svelte-tza1s0"></div>
+	<span></span>
+	<div class="svelte-tza1s0"><span class="svelte-tza1s0"></span></div>
+
+	<div class="foo svelte-tza1s0"></div>
+	<span class="foo"></span>
+	<div class="svelte-tza1s0"><span class="foo svelte-tza1s0"></span></div>
+
+
+	<div class="foo svelte-tza1s0 bar"></div>
+	<span class="foo bar"></span>
+	<div class="svelte-tza1s0"><span class="foo svelte-tza1s0 bar"></span></div>
+
+	<div class="svelte-tza1s0"></div>
+	<span></span>
+	<div class="svelte-tza1s0"><span class="svelte-tza1s0"></span></div>
+
+	<div class="svelte-tza1s0 bar"></div>
+	<span class="bar"></span>
+	<div class="svelte-tza1s0"><span class="svelte-tza1s0 bar"></span></div>
+
+	<div class="football svelte-tza1s0 bar"></div>
+	<span class="football bar"></span>
+	<div class="svelte-tza1s0"><span class="football svelte-tza1s0 bar"></span></div>
+
+	<div class="svelte-tza1s0 bar not-foo"></div>
+	<span class="bar not-foo"></span>
+	<div class="svelte-tza1s0"><span class="svelte-tza1s0 bar not-foo"></span></div>
+
+	`,
+	test({ assert, target, component }) {
+		component.foo = true;
+		flushSync();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<div class="svelte-tza1s0"></div>
+			<span></span>
+			<div class="svelte-tza1s0"><span class="svelte-tza1s0"></span></div>
+
+			<div class="foo svelte-tza1s0"></div>
+			<span class="foo"></span>
+			<div class="svelte-tza1s0"><span class="foo svelte-tza1s0"></span></div>
+
+			<div class="foo svelte-tza1s0 bar"></div>
+			<span class="foo bar"></span>
+			<div class="svelte-tza1s0"><span class="foo svelte-tza1s0 bar"></span></div>
+
+			<div class="svelte-tza1s0 foo"></div>
+			<span class="foo"></span>
+			<div class="svelte-tza1s0"><span class="svelte-tza1s0 foo"></span></div>
+
+			<div class="svelte-tza1s0 bar foo"></div>
+			<span class="bar foo"></span>
+			<div class="svelte-tza1s0"><span class="svelte-tza1s0 bar foo"></span></div>
+
+			<div class="football svelte-tza1s0 bar foo"></div>
+			<span class="football bar foo"></span>
+			<div class="svelte-tza1s0"><span class="football svelte-tza1s0 bar foo"></span></div>
+
+			<div class="svelte-tza1s0 bar foo"></div>
+			<span class="bar foo"></span>
+			<div class="svelte-tza1s0"><span class="svelte-tza1s0 bar foo"></span></div>
+			`
+		);
+
+		component.bar = false;
+		flushSync();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<div class="svelte-tza1s0"></div>
+			<span></span>
+			<div class="svelte-tza1s0"><span class="svelte-tza1s0"></span></div>
+
+			<div class="foo svelte-tza1s0"></div>
+			<span class="foo"></span>
+			<div class="svelte-tza1s0"><span class="foo svelte-tza1s0"></span></div>
+
+			<div class="foo svelte-tza1s0"></div>
+			<span class="foo"></span>
+			<div class="svelte-tza1s0"><span class="foo svelte-tza1s0"></span></div>
+
+			<div class="svelte-tza1s0 foo"></div>
+			<span class="foo"></span>
+			<div class="svelte-tza1s0"><span class="svelte-tza1s0 foo"></span></div>
+
+			<div class="svelte-tza1s0 foo"></div>
+			<span class="foo"></span>
+			<div class="svelte-tza1s0"><span class="svelte-tza1s0 foo"></span></div>
+
+			<div class="football svelte-tza1s0 foo"></div>
+			<span class="football foo"></span>
+			<div class="svelte-tza1s0"><span class="football svelte-tza1s0 foo"></span></div>
+
+			<div class="svelte-tza1s0 foo"></div>
+			<span class="foo"></span>
+			<div class="svelte-tza1s0"><span class="svelte-tza1s0 foo"></span></div>
+			`
+		);
+
+		component.foo = false;
+		flushSync();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<div class="svelte-tza1s0"></div>
+			<span></span>
+			<div class="svelte-tza1s0"><span class="svelte-tza1s0"></span></div>
+
+			<div class="foo svelte-tza1s0"></div>
+			<span class="foo"></span>
+			<div class="svelte-tza1s0"><span class="foo svelte-tza1s0"></span></div>
+
+			<div class="foo svelte-tza1s0"></div>
+			<span class="foo"></span>
+			<div class="svelte-tza1s0"><span class="foo svelte-tza1s0"></span></div>
+
+			<div class="svelte-tza1s0"></div>
+			<span class=""></span>
+			<div class="svelte-tza1s0"><span class="svelte-tza1s0"></span></div>
+
+			<div class="svelte-tza1s0"></div>
+			<span class=""></span>
+			<div class="svelte-tza1s0"><span class="svelte-tza1s0"></span></div>
+
+			<div class="football svelte-tza1s0"></div>
+			<span class="football"></span>
+			<div class="svelte-tza1s0"><span class="football svelte-tza1s0"></span></div>
+
+			<div class="svelte-tza1s0 not-foo"></div>
+			<span class="not-foo"></span>
+			<div class="svelte-tza1s0"><span class="svelte-tza1s0 not-foo"></span></div>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/class-directive/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-directive/main.svelte
new file mode 100644
index 000000000000..966c07a78e8d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-directive/main.svelte
@@ -0,0 +1,40 @@
+<script>
+	let { foo = false, bar = true } = $props();
+</script>
+
+<div></div>
+<span></span>
+<div><span></span></div>
+
+<div class="foo"></div>
+<span class="foo"></span>
+<div><span class="foo"></span></div>
+
+<div class="foo" class:bar></div>
+<span class="foo" class:bar></span>
+<div><span class="foo" class:bar></span></div>
+
+<div class="foo" class:foo></div>
+<span class="foo" class:foo></span>
+<div><span class="foo" class:foo></span></div>
+
+<div class="foo" class:bar class:foo></div>
+<span class="foo" class:bar class:foo></span>
+<div><span class="foo" class:bar class:foo></span></div>
+
+<div class="football" class:bar class:foo></div>
+<span class="football" class:bar class:foo></span>
+<div><span class="football" class:bar class:foo></span></div>
+
+<div class="foo" class:bar class:foo class:not-foo={!foo}></div>
+<span class="foo" class:bar class:foo class:not-foo={!foo}></span>
+<div><span class="foo" class:bar class:foo class:not-foo={!foo}></span></div>
+
+<style>
+	div {
+		color: red;
+	}
+	div > span {
+		font-weight: bold;
+	}
+</style>

From 220c2418d167f0af732521d5ed34abf6d873760f Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 24 Feb 2025 07:52:46 -0500
Subject: [PATCH 8/8] Version Packages (#15358)

* Version Packages

* tweak

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/healthy-guests-itch.md  |  5 -----
 .changeset/serious-glasses-kiss.md |  5 -----
 .changeset/stale-plums-drop.md     |  5 -----
 packages/svelte/CHANGELOG.md       | 10 ++++++++++
 packages/svelte/package.json       |  2 +-
 packages/svelte/src/version.js     |  2 +-
 6 files changed, 12 insertions(+), 17 deletions(-)
 delete mode 100644 .changeset/healthy-guests-itch.md
 delete mode 100644 .changeset/serious-glasses-kiss.md
 delete mode 100644 .changeset/stale-plums-drop.md

diff --git a/.changeset/healthy-guests-itch.md b/.changeset/healthy-guests-itch.md
deleted file mode 100644
index 24b33f761d62..000000000000
--- a/.changeset/healthy-guests-itch.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-Allow `@const` inside `#key`
diff --git a/.changeset/serious-glasses-kiss.md b/.changeset/serious-glasses-kiss.md
deleted file mode 100644
index 29a6fafeae41..000000000000
--- a/.changeset/serious-glasses-kiss.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-chore: remove unnecessary `?? ''` on some expressions
diff --git a/.changeset/stale-plums-drop.md b/.changeset/stale-plums-drop.md
deleted file mode 100644
index d39268eb729b..000000000000
--- a/.changeset/stale-plums-drop.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: correctly override class attributes with class directives
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index ab190e1cc2af..5ebb088924b2 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,15 @@
 # svelte
 
+## 5.20.3
+
+### Patch Changes
+
+- fix: allow `@const` inside `#key` ([#15377](https://github.com/sveltejs/svelte/pull/15377))
+
+- fix: remove unnecessary `?? ''` on some expressions ([#15287](https://github.com/sveltejs/svelte/pull/15287))
+
+- fix: correctly override class attributes with class directives ([#15352](https://github.com/sveltejs/svelte/pull/15352))
+
 ## 5.20.2
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 579660f9d771..5f16c5433012 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.20.2",
+  "version": "5.20.3",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 0803fae7363f..12468d227d1a 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -4,5 +4,5 @@
  * The current version, as set in package.json.
  * @type {string}
  */
-export const VERSION = '5.20.2';
+export const VERSION = '5.20.3';
 export const PUBLIC_VERSION = '5';

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://github.com/sveltejs/svelte/compare/svelte@5.20.2...svelte@5.20.3.patch" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://github.com/sveltejs/svelte/compare/svelte@5.20.2...svelte@5.20.3.patch" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://github.com/sveltejs/svelte/compare/svelte@5.20.2...svelte@5.20.3.patch" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://github.com/sveltejs/svelte/compare/svelte@5.20.2...svelte@5.20.3.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>