From f0d80f6b301dea42ef5b1d9ef2c8883b5a4fdfe9 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <64506580+huntabyte@users.noreply.github.com>
Date: Wed, 17 Jan 2024 18:38:27 -0800
Subject: [PATCH] feat: `data-placeholder` attribute for `Select.Value` (#284)

* feat: placeholder data attr

* update docs

* add changeset
---
 .changeset/quick-pandas-explain.md                 | 5 +++++
 src/content/api-reference/select.ts                | 5 +++++
 src/lib/bits/select/components/select-value.svelte | 7 ++++++-
 3 files changed, 16 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/quick-pandas-explain.md

diff --git a/.changeset/quick-pandas-explain.md b/.changeset/quick-pandas-explain.md
new file mode 100644
index 000000000..c637df564
--- /dev/null
+++ b/.changeset/quick-pandas-explain.md
@@ -0,0 +1,5 @@
+---
+"bits-ui": minor
+---
+
+feat: adds `data-placeholder` attribute to `Select.Value` when no value is selected / when the placeholder is being displayed
diff --git a/src/content/api-reference/select.ts b/src/content/api-reference/select.ts
index 93f596f3f..1a5a974dd 100644
--- a/src/content/api-reference/select.ts
+++ b/src/content/api-reference/select.ts
@@ -214,6 +214,11 @@ export const value: APISchema = {
 		{
 			name: "select-value",
 			description: "Present on the value element."
+		},
+		{
+			name: "placeholder",
+			description:
+				"Present when the placeholder is being displayed (there isn't a value selected). You can use this to style the placeholder differently than the selected value."
 		}
 	]
 };
diff --git a/src/lib/bits/select/components/select-value.svelte b/src/lib/bits/select/components/select-value.svelte
index 319cbd26c..c4311b899 100644
--- a/src/lib/bits/select/components/select-value.svelte
+++ b/src/lib/bits/select/components/select-value.svelte
@@ -20,7 +20,12 @@
 {#if asChild}
 	<slot {label} {attrs} />
 {:else}
-	<span bind:this={el} {...$$restProps} {...attrs}>
+	<span
+		bind:this={el}
+		{...$$restProps}
+		{...attrs}
+		data-placeholder={!label ? "" : undefined}
+	>
 		{label ? label : placeholder}
 	</span>
 {/if}