From 2aefc5430decf93cb3ead70e6da0503ce52d401f Mon Sep 17 00:00:00 2001
From: Puru Vijay <47742487+PuruVJ@users.noreply.github.com>
Date: Thu, 16 Jan 2025 19:02:10 +0530
Subject: [PATCH] feat(elements): Expose ClassValue (#15035)

* Push

* Cleanup

* Add changeset

* Remove redundant string

* Update documentation/docs/03-template-syntax/18-class.md

Co-authored-by: Paolo Ricciuti <ricciutipaolo@gmail.com>

* Update documentation/docs/03-template-syntax/18-class.md

---------

Co-authored-by: Paolo Ricciuti <ricciutipaolo@gmail.com>
---
 .changeset/thirty-starfishes-shout.md             |  5 +++++
 documentation/docs/03-template-syntax/18-class.md | 12 ++++++++++++
 packages/svelte/elements.d.ts                     |  6 ++++--
 3 files changed, 21 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/thirty-starfishes-shout.md

diff --git a/.changeset/thirty-starfishes-shout.md b/.changeset/thirty-starfishes-shout.md
new file mode 100644
index 000000000000..3c577dcee18e
--- /dev/null
+++ b/.changeset/thirty-starfishes-shout.md
@@ -0,0 +1,5 @@
+---
+'svelte': minor
+---
+
+feat: Expose `ClassValue` from `svelte/elements`
diff --git a/documentation/docs/03-template-syntax/18-class.md b/documentation/docs/03-template-syntax/18-class.md
index 880a34e9ec53..1ea4a208dfdc 100644
--- a/documentation/docs/03-template-syntax/18-class.md
+++ b/documentation/docs/03-template-syntax/18-class.md
@@ -71,6 +71,18 @@ The user of this component has the same flexibility to use a mixture of objects,
 </Button>
 ```
 
+Svelte also exposes the `ClassValue` type, which is the type of value that the `class` attribute on elements accept. This is useful if you want to use a type-safe class name in component props:
+
+```svelte
+<script lang="ts">
+	import type { ClassValue } from 'svelte/elements';
+
+	const props: { class: ClassValue } = $props();
+</script>
+
+<div class={['original', props.class]}>...</div>
+```
+
 ## The `class:` directive
 
 Prior to Svelte 5.16, the `class:` directive was the most convenient way to set classes on elements conditionally.
diff --git a/packages/svelte/elements.d.ts b/packages/svelte/elements.d.ts
index 604403f0a261..96f15898008d 100644
--- a/packages/svelte/elements.d.ts
+++ b/packages/svelte/elements.d.ts
@@ -741,7 +741,7 @@ export interface HTMLAttributes<T extends EventTarget> extends AriaAttributes, D
 	accesskey?: string | undefined | null;
 	autocapitalize?: 'characters' | 'off' | 'on' | 'none' | 'sentences' | 'words' | undefined | null;
 	autofocus?: boolean | undefined | null;
-	class?: string | import('clsx').ClassArray | import('clsx').ClassDictionary | undefined | null;
+	class?: ClassValue | undefined | null;
 	contenteditable?: Booleanish | 'inherit' | 'plaintext-only' | undefined | null;
 	contextmenu?: string | undefined | null;
 	dir?: 'ltr' | 'rtl' | 'auto' | undefined | null;
@@ -1522,7 +1522,7 @@ export interface SvelteWindowAttributes extends HTMLAttributes<Window> {
 export interface SVGAttributes<T extends EventTarget> extends AriaAttributes, DOMAttributes<T> {
 	// Attributes which also defined in HTMLAttributes
 	className?: string | undefined | null;
-	class?: string | import('clsx').ClassArray | import('clsx').ClassDictionary | undefined | null;
+	class?: ClassValue | undefined | null;
 	color?: string | undefined | null;
 	height?: number | string | undefined | null;
 	id?: string | undefined | null;
@@ -2059,3 +2059,5 @@ export interface SvelteHTMLElements {
 
 	[name: string]: { [name: string]: any };
 }
+
+export type ClassValue = string | import('clsx').ClassArray | import('clsx').ClassDictionary;