diff --git a/src/Highlighter.php b/src/Highlighter.php
index da7b85c..aacf3dd 100644
--- a/src/Highlighter.php
+++ b/src/Highlighter.php
@@ -27,6 +27,7 @@
 use Tempest\Highlight\Languages\Python\PythonLanguage;
 use Tempest\Highlight\Languages\Scss\ScssLanguage;
 use Tempest\Highlight\Languages\Sql\SqlLanguage;
+use Tempest\Highlight\Languages\Svelte\SvelteLanguage;
 use Tempest\Highlight\Languages\Terminal\TerminalLanguage;
 use Tempest\Highlight\Languages\Terraform\TerraformLanguage;
 use Tempest\Highlight\Languages\Text\TextLanguage;
@@ -86,7 +87,8 @@ public function __construct(
             ->addLanguage(new YamlLanguage())
             ->addLanguage(new DotEnvLanguage())
             ->addLanguage(new IniLanguage())
-            ->addLanguage(new TwigLanguage());
+            ->addLanguage(new TwigLanguage())
+            ->addLanguage(new SvelteLanguage());
 
         $this->parseTokens = new ParseTokens();
         $this->groupTokens = new GroupTokens();
diff --git a/src/Languages/JavaScript/Patterns/JsMethodPattern.php b/src/Languages/JavaScript/Patterns/JsMethodPattern.php
index b035af2..3a048c4 100644
--- a/src/Languages/JavaScript/Patterns/JsMethodPattern.php
+++ b/src/Languages/JavaScript/Patterns/JsMethodPattern.php
@@ -10,13 +10,15 @@
 use Tempest\Highlight\Tokens\TokenTypeEnum;
 
 #[PatternTest(input: 'calcArea() {', output: 'calcArea')]
+#[PatternTest(input: 'calc_area() {', output: 'calc_area')]
+#[PatternTest(input: '$init() {', output: '$init')]
 final readonly class JsMethodPattern implements Pattern
 {
     use IsPattern;
 
     public function getPattern(): string
     {
-        return '(?<match>[\w]+)\(';
+        return '(?<match>[\w\$]+)\(';
     }
 
     public function getTokenType(): TokenTypeEnum
diff --git a/src/Languages/Svelte/Injections/SvelteBlockExpressionInjection.php b/src/Languages/Svelte/Injections/SvelteBlockExpressionInjection.php
new file mode 100644
index 0000000..77ab516
--- /dev/null
+++ b/src/Languages/Svelte/Injections/SvelteBlockExpressionInjection.php
@@ -0,0 +1,24 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Tempest\Highlight\Languages\Svelte\Injections;
+
+use Tempest\Highlight\Highlighter;
+use Tempest\Highlight\Injection;
+use Tempest\Highlight\IsInjection;
+
+final class SvelteBlockExpressionInjection implements Injection
+{
+    use IsInjection;
+
+    public function getPattern(): string
+    {
+        return '\{[#@:\/](?:[a-z]+)\b\s*(?<match>(?:[^{}]++|\{(?&match)\})*+)\}';
+    }
+
+    public function parseContent(string $content, Highlighter $highlighter): string
+    {
+        return $highlighter->parse($content, 'typescript');
+    }
+}
diff --git a/src/Languages/Svelte/Injections/SvelteExpressionInjection.php b/src/Languages/Svelte/Injections/SvelteExpressionInjection.php
new file mode 100644
index 0000000..be60d58
--- /dev/null
+++ b/src/Languages/Svelte/Injections/SvelteExpressionInjection.php
@@ -0,0 +1,29 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Tempest\Highlight\Languages\Svelte\Injections;
+
+use Tempest\Highlight\Highlighter;
+use Tempest\Highlight\Injection;
+use Tempest\Highlight\IsInjection;
+use Tempest\Highlight\PatternTest;
+
+#[PatternTest(input: '{role}', output: 'role')]
+#[PatternTest(input: '{role.id}', output: 'role.id')]
+#[PatternTest(input: 'onclick={() => count++}', output: '() => count++')]
+#[PatternTest(input: 'onclick={() => { updateTab() }}', output: '() => { updateTab() }')]
+final class SvelteExpressionInjection implements Injection
+{
+    use IsInjection;
+
+    public function getPattern(): string
+    {
+        return '\{(?<match>[^#@:\/{}](?:[^{}]++|\{(?&match)\})*+)\}';
+    }
+
+    public function parseContent(string $content, Highlighter $highlighter): string
+    {
+        return $highlighter->parse($content, 'typescript');
+    }
+}
diff --git a/src/Languages/Svelte/Injections/SvelteTypeScriptInjection.php b/src/Languages/Svelte/Injections/SvelteTypeScriptInjection.php
new file mode 100644
index 0000000..c62ecf8
--- /dev/null
+++ b/src/Languages/Svelte/Injections/SvelteTypeScriptInjection.php
@@ -0,0 +1,24 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Tempest\Highlight\Languages\Svelte\Injections;
+
+use Tempest\Highlight\Highlighter;
+use Tempest\Highlight\Injection;
+use Tempest\Highlight\IsInjection;
+
+final class SvelteTypeScriptInjection implements Injection
+{
+    use IsInjection;
+
+    public function getPattern(): string
+    {
+        return '<script\s+lang="ts">(?<match>[\s\S]*?)<\/script>';
+    }
+
+    public function parseContent(string $content, Highlighter $highlighter): string
+    {
+        return $highlighter->parse($content, 'typescript');
+    }
+}
diff --git a/src/Languages/Svelte/Patterns/SvelteBlockKeywordPattern.php b/src/Languages/Svelte/Patterns/SvelteBlockKeywordPattern.php
new file mode 100644
index 0000000..95b9da0
--- /dev/null
+++ b/src/Languages/Svelte/Patterns/SvelteBlockKeywordPattern.php
@@ -0,0 +1,24 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Tempest\Highlight\Languages\Svelte\Patterns;
+
+use Tempest\Highlight\IsPattern;
+use Tempest\Highlight\Pattern;
+use Tempest\Highlight\Tokens\TokenTypeEnum;
+
+final readonly class SvelteBlockKeywordPattern implements Pattern
+{
+    use IsPattern;
+
+    public function getPattern(): string
+    {
+        return '\{(?<match>[#@:\/]\w+)\b';
+    }
+
+    public function getTokenType(): TokenTypeEnum
+    {
+        return TokenTypeEnum::KEYWORD;
+    }
+}
diff --git a/src/Languages/Svelte/Patterns/SvelteDirectiveArgumentPattern.php b/src/Languages/Svelte/Patterns/SvelteDirectiveArgumentPattern.php
new file mode 100644
index 0000000..e26c4dc
--- /dev/null
+++ b/src/Languages/Svelte/Patterns/SvelteDirectiveArgumentPattern.php
@@ -0,0 +1,24 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Tempest\Highlight\Languages\Svelte\Patterns;
+
+use Tempest\Highlight\IsPattern;
+use Tempest\Highlight\Pattern;
+use Tempest\Highlight\Tokens\TokenTypeEnum;
+
+final readonly class SvelteDirectiveArgumentPattern implements Pattern
+{
+    use IsPattern;
+
+    public function getPattern(): string
+    {
+        return '\s(?:bind|use|transition|in|out|animate|on|class|style):(?<match>[\w-]+)';
+    }
+
+    public function getTokenType(): TokenTypeEnum
+    {
+        return TokenTypeEnum::PROPERTY;
+    }
+}
diff --git a/src/Languages/Svelte/Patterns/SvelteDirectivePattern.php b/src/Languages/Svelte/Patterns/SvelteDirectivePattern.php
new file mode 100644
index 0000000..4c33b76
--- /dev/null
+++ b/src/Languages/Svelte/Patterns/SvelteDirectivePattern.php
@@ -0,0 +1,24 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Tempest\Highlight\Languages\Svelte\Patterns;
+
+use Tempest\Highlight\IsPattern;
+use Tempest\Highlight\Pattern;
+use Tempest\Highlight\Tokens\TokenTypeEnum;
+
+final readonly class SvelteDirectivePattern implements Pattern
+{
+    use IsPattern;
+
+    public function getPattern(): string
+    {
+        return '(?<=\s)(?<match>(?:bind|use|transition|in|out|animate|on|class|style)):';
+    }
+
+    public function getTokenType(): TokenTypeEnum
+    {
+        return TokenTypeEnum::PROPERTY;
+    }
+}
diff --git a/src/Languages/Svelte/SvelteLanguage.php b/src/Languages/Svelte/SvelteLanguage.php
new file mode 100644
index 0000000..79354ec
--- /dev/null
+++ b/src/Languages/Svelte/SvelteLanguage.php
@@ -0,0 +1,46 @@
+<?php
+
+
+declare(strict_types=1);
+
+namespace Tempest\Highlight\Languages\Svelte;
+
+use Override;
+use Tempest\Highlight\Languages\Html\HtmlLanguage;
+use Tempest\Highlight\Languages\Svelte\Injections\SvelteBlockExpressionInjection;
+use Tempest\Highlight\Languages\Svelte\Injections\SvelteExpressionInjection;
+use Tempest\Highlight\Languages\Svelte\Injections\SvelteTypeScriptInjection;
+use Tempest\Highlight\Languages\Svelte\Patterns\SvelteBlockKeywordPattern;
+use Tempest\Highlight\Languages\Svelte\Patterns\SvelteDirectiveArgumentPattern;
+use Tempest\Highlight\Languages\Svelte\Patterns\SvelteDirectivePattern;
+
+class SvelteLanguage extends HtmlLanguage
+{
+    #[Override]
+    public function getName(): string
+    {
+        return 'svelte';
+    }
+
+    #[Override]
+    public function getInjections(): array
+    {
+        return [
+            ...parent::getInjections(),
+            new SvelteTypeScriptInjection(),
+            new SvelteExpressionInjection(),
+            new SvelteBlockExpressionInjection(),
+        ];
+    }
+
+    #[Override]
+    public function getPatterns(): array
+    {
+        return [
+            ...parent::getPatterns(),
+            new SvelteBlockKeywordPattern(),
+            new SvelteDirectivePattern(),
+            new SvelteDirectiveArgumentPattern(),
+        ];
+    }
+}
diff --git a/src/Languages/TypeScript/Patterns/TsMethodPattern.php b/src/Languages/TypeScript/Patterns/TsMethodPattern.php
new file mode 100644
index 0000000..206fd4c
--- /dev/null
+++ b/src/Languages/TypeScript/Patterns/TsMethodPattern.php
@@ -0,0 +1,28 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Tempest\Highlight\Languages\TypeScript\Patterns;
+
+use Tempest\Highlight\IsPattern;
+use Tempest\Highlight\Pattern;
+use Tempest\Highlight\PatternTest;
+use Tempest\Highlight\Tokens\TokenTypeEnum;
+
+#[PatternTest(input: 'createList<Todo[]>(initial)', output: 'createList')]
+#[PatternTest(input: "getRole<'user' | 'admin'>(initial)", output: 'getRole')]
+#[PatternTest(input: 'getRole<"user" | "admin">(initial)', output: 'getRole')]
+final readonly class TsMethodPattern implements Pattern
+{
+    use IsPattern;
+
+    public function getPattern(): string
+    {
+        return '(?<match>[\w\$]+)<[A-Z\'"][\w\s,\.\[\]\'"|]*>\(';
+    }
+
+    public function getTokenType(): TokenTypeEnum
+    {
+        return TokenTypeEnum::PROPERTY;
+    }
+}
diff --git a/src/Languages/TypeScript/TypeScriptLanguage.php b/src/Languages/TypeScript/TypeScriptLanguage.php
index 566c1b5..477059c 100644
--- a/src/Languages/TypeScript/TypeScriptLanguage.php
+++ b/src/Languages/TypeScript/TypeScriptLanguage.php
@@ -10,6 +10,7 @@
 use Tempest\Highlight\Languages\TypeScript\Patterns\TsBuiltInTypePattern;
 use Tempest\Highlight\Languages\TypeScript\Patterns\TsDecoratorPattern;
 use Tempest\Highlight\Languages\TypeScript\Patterns\TsGenericPattern;
+use Tempest\Highlight\Languages\TypeScript\Patterns\TsMethodPattern;
 use Tempest\Highlight\Languages\TypeScript\Patterns\TsTypeAnnotationPattern;
 
 class TypeScriptLanguage extends JavaScriptLanguage
@@ -41,6 +42,7 @@ public function getPatterns(): array
             new TsTypeAnnotationPattern(),
             new TsDecoratorPattern(),
             new TsGenericPattern(),
+            new TsMethodPattern(),
         ];
     }
 }
diff --git a/tests/Bench/Fixtures/svelte.txt b/tests/Bench/Fixtures/svelte.txt
new file mode 100644
index 0000000..e4bd449
--- /dev/null
+++ b/tests/Bench/Fixtures/svelte.txt
@@ -0,0 +1,93 @@
+<!-- A Svelte 5 counter-and-list component -->
+<script lang="ts">
+	type Todo = { id: number; text: string; done: boolean };
+
+	let { initial = [], onchange }: { initial?: Todo[]; onchange?: (t: Todo[]) => void } = $props();
+
+	let draft = $state('');
+	let todos = $state<Todo[]>(initial);
+	let filter = $state<'all' | 'active' | 'done'>('all');
+
+	let count = $state(0);
+	let doubled = $derived(count * 2);
+
+	let visible = $derived.by(() => {
+		switch (filter) {
+			case 'active': return todos.filter((t) => !t.done);
+			case 'done':   return todos.filter((t) => t.done);
+			default:       return todos;
+		}
+	});
+
+	let remaining = $derived(todos.filter((t) => !t.done).length);
+
+	$effect(() => {
+		onchange?.(todos);
+	});
+
+	$inspect(remaining).with((type, value) => {
+		console.log(type, value);
+	});
+
+	function add() {
+		if (!draft.trim()) return;
+		todos.push({ id: Date.now(), text: draft, done: false });
+		draft = '';
+	}
+</script>
+
+<button onclick={() => count++}>
+	{doubled}
+</button>
+
+<form onsubmit={(e) => { e.preventDefault(); add(); }}>
+	<input bind:value={draft} placeholder="What needs doing?" />
+	<button type="submit">Add</button>
+</form>
+
+<select bind:value={filter}>
+	<option value="all">All</option>
+	<option value="active">Active</option>
+	<option value="done">Done</option>
+</select>
+
+<ul>
+	{#each visible as todo (todo.id)}
+		<li class:done={todo.done}>
+			<input type="checkbox" bind:checked={todo.done} />
+			{todo.text}
+		</li>
+	{:else}
+		<li>Nothing here.</li>
+	{/each}
+</ul>
+
+{#if filter === 'all'}
+	<p>Showing everything.</p>
+{:else if filter === 'active'}
+	<p>Showing active todos.</p>
+{:else if filter === 'done'}
+	<p>Showing completed todos.</p>
+{:else}
+	<p>Unknown filter.</p>
+{/if}
+
+<!-- nested-brace expressions inside block tags -->
+
+{#each entries as { key, value }}
+	<dt>{key}</dt>
+	<dd>{value}</dd>
+{/each}
+
+{#each todos.filter((t) => ({ ...t, label: t.text.trim() })) as todo (todo.id)}
+	<li>{todo.label}</li>
+{/each}
+
+{#each Object.entries({ a: 1, b: 2, c: 3 }) as [key, value]}
+	<p>{key} = {value}</p>
+{/each}
+
+{#if items.some((x) => x.meta?.tags?.includes('urgent'))}
+	{@const summary = { count: items.length, urgent: true }}
+	<p>{summary.count} urgent items</p>
+{/if}
diff --git a/tests/Bench/HighlighterBench.php b/tests/Bench/HighlighterBench.php
index 5ca7162..d242f0f 100644
--- a/tests/Bench/HighlighterBench.php
+++ b/tests/Bench/HighlighterBench.php
@@ -37,6 +37,7 @@ final class HighlighterBench
         'python' => 'python.txt',
         'scss' => 'scss.txt',
         'sql' => 'sql.txt',
+        'svelte' => 'svelte.txt',
         'terminal' => 'terminal.txt',
         'terraform' => 'terraform.txt',
         'typescript' => 'typescript.txt',
diff --git a/tests/Languages/Svelte/SvelteLanguageTest.php b/tests/Languages/Svelte/SvelteLanguageTest.php
new file mode 100644
index 0000000..b4346f0
--- /dev/null
+++ b/tests/Languages/Svelte/SvelteLanguageTest.php
@@ -0,0 +1,301 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Tempest\Highlight\Tests\Languages\Svelte;
+
+use PHPUnit\Framework\Attributes\DataProvider;
+use PHPUnit\Framework\TestCase;
+use Tempest\Highlight\Highlighter;
+
+class SvelteLanguageTest extends TestCase
+{
+    #[DataProvider('provide_highlight_cases')]
+    public function test_highlight(string $content, string $expected): void
+    {
+        $highlighter = new Highlighter();
+
+        $this->assertSame(
+            $expected,
+            $highlighter->parse($content, 'svelte'),
+        );
+    }
+
+    public static function provide_highlight_cases(): iterable
+    {
+        return [
+            [
+                <<<'TXT'
+                <script lang="ts">
+                    let count: number = 0;
+                    const increment = (): void => count++;
+                </script>
+
+                <button on:click={increment}>
+                    Clicked {count} times
+                </button>
+                TXT,
+                <<<'TXT'
+                &lt;<span class="hl-keyword">script</span> <span class="hl-property">lang</span>=&quot;ts&quot;&gt;
+                    <span class="hl-keyword">let</span> <span class="hl-property">count</span>: <span class="hl-type">number</span> = 0;
+                    <span class="hl-keyword">const</span> increment = (): <span class="hl-keyword">void</span> =&gt; count++;
+                &lt;/<span class="hl-keyword">script</span>&gt;
+
+                &lt;<span class="hl-keyword">button</span> <span class="hl-property">on</span>:<span class="hl-property">click</span>={increment}&gt;
+                    Clicked {count} times
+                &lt;/<span class="hl-keyword">button</span>&gt;
+                TXT
+            ],
+            [
+                <<<'TXT'
+                <!-- a counter component -->
+                <script lang="ts">
+                    let name: string = "world";
+                </script>
+
+                <h1>Hello {name}!</h1>
+
+                <style>
+                    h1 { color: red; }
+                </style>
+                TXT,
+                <<<'TXT'
+                <span class="hl-comment">&lt;!-- a counter component --&gt;</span>
+                &lt;<span class="hl-keyword">script</span> <span class="hl-property">lang</span>=&quot;ts&quot;&gt;
+                    <span class="hl-keyword">let</span> <span class="hl-property">name</span>: <span class="hl-type">string</span> = <span class="hl-value">&quot;world&quot;</span>;
+                &lt;/<span class="hl-keyword">script</span>&gt;
+
+                &lt;<span class="hl-keyword">h1</span>&gt;Hello {name}!&lt;/<span class="hl-keyword">h1</span>&gt;
+
+                &lt;<span class="hl-keyword">style</span>&gt;<span class="hl-keyword">
+                    h1 </span>{ <span class="hl-property">color</span>: red; }
+                &lt;/<span class="hl-keyword">style</span>&gt;
+                TXT
+            ],
+            [
+                '<input type="text" bind:value={name} placeholder="enter name" />',
+                '&lt;<span class="hl-keyword">input</span> <span class="hl-property">type</span>=&quot;text&quot; <span class="hl-property">bind</span>:<span class="hl-property">value</span>={name} <span class="hl-property">placeholder</span>=&quot;enter name&quot; /&gt;',
+            ],
+            [
+                <<<'TXT'
+                {#if count > 5}
+                    <p>big</p>
+                {:else if count > 0}
+                    <p>small</p>
+                {:else}
+                    <p>zero</p>
+                {/if}
+                TXT,
+                <<<'TXT'
+                {<span class="hl-keyword">#if</span> count &gt; 5}
+                    &lt;<span class="hl-keyword">p</span>&gt;big&lt;/<span class="hl-keyword">p</span>&gt;
+                {<span class="hl-keyword">:else</span> <span class="hl-keyword">if</span> count &gt; 0}
+                    &lt;<span class="hl-keyword">p</span>&gt;small&lt;/<span class="hl-keyword">p</span>&gt;
+                {<span class="hl-keyword">:else</span>}
+                    &lt;<span class="hl-keyword">p</span>&gt;zero&lt;/<span class="hl-keyword">p</span>&gt;
+                {<span class="hl-keyword">/if</span>}
+                TXT,
+            ],
+            [
+                <<<'TXT'
+                <ul>
+                {#each items as item, i}
+                    <li>{i}: {item.name}</li>
+                {/each}
+                </ul>
+                TXT,
+                <<<'TXT'
+                &lt;<span class="hl-keyword">ul</span>&gt;
+                {<span class="hl-keyword">#each</span> items <span class="hl-keyword">as</span> item, i}
+                    &lt;<span class="hl-keyword">li</span>&gt;{i}: {item.<span class="hl-property">name</span>}&lt;/<span class="hl-keyword">li</span>&gt;
+                {<span class="hl-keyword">/each</span>}
+                &lt;/<span class="hl-keyword">ul</span>&gt;
+                TXT,
+            ],
+            [
+                <<<'TXT'
+                {@const total = a + b}
+                <p>{@html rawContent}</p>
+                TXT,
+                <<<'TXT'
+                {<span class="hl-keyword">@const</span> <span class="hl-property">total</span> = a + b}
+                &lt;<span class="hl-keyword">p</span>&gt;{<span class="hl-keyword">@html</span> rawContent}&lt;/<span class="hl-keyword">p</span>&gt;
+                TXT,
+            ],
+            [
+                '<p>Length: {items.length}</p>',
+                '&lt;<span class="hl-keyword">p</span>&gt;Length: {items.<span class="hl-property">length</span>}&lt;/<span class="hl-keyword">p</span>&gt;',
+            ],
+            [
+                '<form onsubmit={(e) => { e.preventDefault(); add(); }}>',
+                '&lt;<span class="hl-keyword">form</span> onsubmit={(e) =&gt; { e.<span class="hl-property">preventDefault</span>(); <span class="hl-property">add</span>(); }}&gt;',
+            ],
+            [
+                <<<'TXT'
+                {#each entries as { key, value }}
+                    <dt>{key}</dt>
+                {/each}
+                TXT,
+                <<<'TXT'
+                {<span class="hl-keyword">#each</span> entries <span class="hl-keyword">as</span> { key, value }}
+                    &lt;<span class="hl-keyword">dt</span>&gt;{key}&lt;/<span class="hl-keyword">dt</span>&gt;
+                {<span class="hl-keyword">/each</span>}
+                TXT,
+            ],
+            [
+                <<<'TXT'
+                {#each todos.filter((t) => ({ ...t, label: t.text })) as todo (todo.id)}
+                    <li>{todo.label}</li>
+                {/each}
+                TXT,
+                <<<'TXT'
+                {<span class="hl-keyword">#each</span> todos.<span class="hl-property">filter</span>((t) =&gt; ({ ...<span class="hl-property">t</span>, <span class="hl-property">label</span>: t.<span class="hl-property">text</span> })) <span class="hl-keyword">as</span> todo (todo.<span class="hl-property">id</span>)}
+                    &lt;<span class="hl-keyword">li</span>&gt;{todo.<span class="hl-property">label</span>}&lt;/<span class="hl-keyword">li</span>&gt;
+                {<span class="hl-keyword">/each</span>}
+                TXT,
+            ],
+            [
+                <<<'TXT'
+                {#if items.some((x) => x.meta?.tags?.includes('urgent'))}
+                    <p>urgent</p>
+                {/if}
+                TXT,
+                <<<'TXT'
+                {<span class="hl-keyword">#if</span> items.<span class="hl-property">some</span>((x) =&gt; x.<span class="hl-property">meta</span>?.<span class="hl-property">tags</span>?.<span class="hl-property">includes</span>(<span class="hl-value">'urgent'</span>))}
+                    &lt;<span class="hl-keyword">p</span>&gt;urgent&lt;/<span class="hl-keyword">p</span>&gt;
+                {<span class="hl-keyword">/if</span>}
+                TXT,
+            ],
+            [
+                '{@const summary = { count: items.length, urgent: true }}',
+                '{<span class="hl-keyword">@const</span> summary = { <span class="hl-property">count</span>: items.<span class="hl-property">length</span>, <span class="hl-property">urgent</span>: <span class="hl-keyword">true</span> }}',
+            ],
+            [
+                <<<'TXT'
+                {#each Object.entries({ a: 1, b: 2 }) as [key, value]}
+                    <p>{key} = {value}</p>
+                {/each}
+                TXT,
+                <<<'TXT'
+                {<span class="hl-keyword">#each</span> <span class="hl-type">Object</span>.<span class="hl-property">entries</span>({ <span class="hl-property">a</span>: 1, <span class="hl-property">b</span>: 2 }) <span class="hl-keyword">as</span> [key, value]}
+                    &lt;<span class="hl-keyword">p</span>&gt;{key} = {value}&lt;/<span class="hl-keyword">p</span>&gt;
+                {<span class="hl-keyword">/each</span>}
+                TXT,
+            ],
+            [
+                <<<'TXT'
+                {#await promise}
+                    <p>waiting</p>
+                {:then value}
+                    <p>{value}</p>
+                {:catch error}
+                    <p>{error.message}</p>
+                {/await}
+                TXT,
+                <<<'TXT'
+                {<span class="hl-keyword">#await</span> promise}
+                    &lt;<span class="hl-keyword">p</span>&gt;waiting&lt;/<span class="hl-keyword">p</span>&gt;
+                {<span class="hl-keyword">:then</span> value}
+                    &lt;<span class="hl-keyword">p</span>&gt;{value}&lt;/<span class="hl-keyword">p</span>&gt;
+                {<span class="hl-keyword">:catch</span> error}
+                    &lt;<span class="hl-keyword">p</span>&gt;{error.<span class="hl-property">message</span>}&lt;/<span class="hl-keyword">p</span>&gt;
+                {<span class="hl-keyword">/await</span>}
+                TXT,
+            ],
+            [
+                <<<'TXT'
+                {#key id}
+                    <div>content</div>
+                {/key}
+                TXT,
+                <<<'TXT'
+                {<span class="hl-keyword">#key</span> id}
+                    &lt;<span class="hl-keyword">div</span>&gt;content&lt;/<span class="hl-keyword">div</span>&gt;
+                {<span class="hl-keyword">/key</span>}
+                TXT,
+            ],
+            [
+                <<<'TXT'
+                {#snippet greet(name)}
+                    <p>Hello {name}</p>
+                {/snippet}
+                {@render greet('world')}
+                TXT,
+                <<<'TXT'
+                {<span class="hl-keyword">#snippet</span> <span class="hl-property">greet</span>(name)}
+                    &lt;<span class="hl-keyword">p</span>&gt;Hello {name}&lt;/<span class="hl-keyword">p</span>&gt;
+                {<span class="hl-keyword">/snippet</span>}
+                {<span class="hl-keyword">@render</span> <span class="hl-property">greet</span>(<span class="hl-value">'world'</span>)}
+                TXT,
+            ],
+            [
+                '{@debug user, count}',
+                '{<span class="hl-keyword">@debug</span> user, count}',
+            ],
+            [
+                '<input class:active={isActive} bind:value={text} on:input={handle} />',
+                '&lt;<span class="hl-keyword">input</span> <span class="hl-property">class</span>:<span class="hl-property">active</span>={isActive} <span class="hl-property">bind</span>:<span class="hl-property">value</span>={text} <span class="hl-property">on</span>:<span class="hl-property">input</span>={handle} /&gt;',
+            ],
+            [
+                '<Modal {title} {onclose} />',
+                '&lt;<span class="hl-keyword">Modal</span> {title} {onclose} /&gt;',
+            ],
+            [
+                <<<'TXT'
+                <script lang="ts">
+                    let count = $state(0);
+                    let doubled = $derived(count * 2);
+                </script>
+                TXT,
+                <<<'TXT'
+                &lt;<span class="hl-keyword">script</span> <span class="hl-property">lang</span>=&quot;ts&quot;&gt;
+                    <span class="hl-keyword">let</span> count = <span class="hl-property">$state</span>(0);
+                    <span class="hl-keyword">let</span> doubled = <span class="hl-property">$derived</span>(count * 2);
+                &lt;/<span class="hl-keyword">script</span>&gt;
+                TXT,
+            ],
+            [
+                <<<'TXT'
+                {#if x === 1}
+                    <p>one</p>
+                {:else if x === 2}
+                    <p>two</p>
+                {:else if x === 3}
+                    <p>three</p>
+                {:else}
+                    <p>other</p>
+                {/if}
+                TXT,
+                <<<'TXT'
+                {<span class="hl-keyword">#if</span> x === 1}
+                    &lt;<span class="hl-keyword">p</span>&gt;one&lt;/<span class="hl-keyword">p</span>&gt;
+                {<span class="hl-keyword">:else</span> <span class="hl-keyword">if</span> x === 2}
+                    &lt;<span class="hl-keyword">p</span>&gt;two&lt;/<span class="hl-keyword">p</span>&gt;
+                {<span class="hl-keyword">:else</span> <span class="hl-keyword">if</span> x === 3}
+                    &lt;<span class="hl-keyword">p</span>&gt;three&lt;/<span class="hl-keyword">p</span>&gt;
+                {<span class="hl-keyword">:else</span>}
+                    &lt;<span class="hl-keyword">p</span>&gt;other&lt;/<span class="hl-keyword">p</span>&gt;
+                {<span class="hl-keyword">/if</span>}
+                TXT,
+            ],
+            [
+                <<<'TXT'
+                {#each groups as group}
+                    <h2>{group.name}</h2>
+                    {#each group.items as item}
+                        <p>{item}</p>
+                    {/each}
+                {/each}
+                TXT,
+                <<<'TXT'
+                {<span class="hl-keyword">#each</span> groups <span class="hl-keyword">as</span> group}
+                    &lt;<span class="hl-keyword">h2</span>&gt;{group.<span class="hl-property">name</span>}&lt;/<span class="hl-keyword">h2</span>&gt;
+                    {<span class="hl-keyword">#each</span> group.<span class="hl-property">items</span> <span class="hl-keyword">as</span> item}
+                        &lt;<span class="hl-keyword">p</span>&gt;{item}&lt;/<span class="hl-keyword">p</span>&gt;
+                    {<span class="hl-keyword">/each</span>}
+                {<span class="hl-keyword">/each</span>}
+                TXT,
+            ],
+        ];
+    }
+}
diff --git a/tests/Languages/TypeScript/TypeScriptLanguageTest.php b/tests/Languages/TypeScript/TypeScriptLanguageTest.php
index 76916ac..46c8503 100644
--- a/tests/Languages/TypeScript/TypeScriptLanguageTest.php
+++ b/tests/Languages/TypeScript/TypeScriptLanguageTest.php
@@ -65,7 +65,15 @@ interface User {
             ],
             [
                 'function identity<T>(v: T): T {}',
-                '<span class="hl-keyword">function</span> identity<span class="hl-generic">&lt;T&gt;</span>(<span class="hl-property">v</span>: <span class="hl-type">T</span>): <span class="hl-type">T</span> {}',
+                '<span class="hl-keyword">function</span> <span class="hl-property">identity</span><span class="hl-generic">&lt;T&gt;</span>(<span class="hl-property">v</span>: <span class="hl-type">T</span>): <span class="hl-type">T</span> {}',
+            ],
+            [
+                "function getRole<'user' | 'admin'>() {}",
+                "<span class=\"hl-keyword\">function</span> <span class=\"hl-property\">getRole</span><span class=\"hl-generic\">&lt;<span class=\"hl-value\">'user'</span> | <span class=\"hl-value\">'admin'</span>&gt;</span>() {}",
+            ],
+            [
+                'function getRole<user" | "admin">() {}',
+                '<span class="hl-keyword">function</span> getRole&lt;user<span class="hl-value">&quot; | &quot;</span>admin&quot;&gt;() {}',
             ],
             [
                 'class Service<K, V extends Base> {}',
diff --git a/tests/targets/svelte.md b/tests/targets/svelte.md
new file mode 100644
index 0000000..4ffc85d
--- /dev/null
+++ b/tests/targets/svelte.md
@@ -0,0 +1,94 @@
+```svelte
+<script lang="ts">
+	type Todo = { id: number; text: string; done: boolean };
+
+	let { initial = [], onchange }: { initial?: Todo[]; onchange?: (t: Todo[]) => void } = $props();
+
+	let draft = $state('');
+	let todos = $state<Todo[]>(initial);
+	let filter = $state<'all' | 'active' | 'done'>('all');
+	
+	let count = $state(0);
+	let doubled = $derived(count * 2);
+
+	let visible = $derived.by(() => {
+		switch (filter) {
+			case 'active': return todos.filter((t) => !t.done);
+			case 'done':   return todos.filter((t) => t.done);
+			default:       return todos;
+		}
+	});
+	
+	let remaining = $derived(todos.filter((t) => !t.done).length);
+
+	$effect(() => {
+		onchange?.(todos);
+	});
+
+	$inspect(remaining).with((type, value) => {
+		console.log(type, value);
+	});
+
+	function add() {
+		if (!draft.trim()) return;
+		todos.push({ id: Date.now(), text: draft, done: false });
+		draft = '';
+	}
+</script>
+
+<button onclick={() => count++}>
+	{doubled}
+</button>
+
+<form onsubmit={(e) => { e.preventDefault(); add(); }}>
+	<input bind:value={draft} placeholder="What needs doing?" />
+	<button type="submit">Add</button>
+</form>
+
+<select bind:value={filter}>
+	<option value="all">All</option>
+	<option value="active">Active</option>
+	<option value="done">Done</option>
+</select>
+
+<ul>
+	{#each visible as todo (todo.id)}
+		<li class:done={todo.done}>
+			<input type="checkbox" bind:checked={todo.done} />
+			{todo.text}
+		</li>
+	{:else}
+		<li>Nothing here.</li>
+	{/each}
+</ul>
+
+{#if filter === 'all'}
+	<p>Showing everything.</p>
+{:else if filter === 'active'}
+	<p>Showing active todos.</p>
+{:else if filter === 'done'}
+	<p>Showing completed todos.</p>
+{:else}
+	<p>Unknown filter.</p>
+{/if}
+
+<!-- nested-brace expressions inside block tags -->
+
+{#each entries as { key, value }}
+	<dt>{key}</dt>
+	<dd>{value}</dd>
+{/each}
+
+{#each todos.filter((t) => ({ ...t, label: t.text.trim() })) as todo (todo.id)}
+	<li>{todo.label}</li>
+{/each}
+
+{#each Object.entries({ a: 1, b: 2, c: 3 }) as [key, value]}
+	<p>{key} = {value}</p>
+{/each}
+
+{#if items.some((x) => x.meta?.tags?.includes('urgent'))}
+	{@const summary = { count: items.length, urgent: true }}
+	<p>{summary.count} urgent items</p>
+{/if}
+```