From c72c30b747dc630e83e467aced3bbf53c19f7138 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Tue, 24 Sep 2024 21:42:34 -0400
Subject: [PATCH] data-collapsed and data-expanded pane data attr

---
 packages/paneforge/src/lib/paneforge.svelte.ts              | 4 ++++
 sites/docs/src/lib/components/demos/collapsible-demo.svelte | 5 +++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/paneforge/src/lib/paneforge.svelte.ts b/packages/paneforge/src/lib/paneforge.svelte.ts
index 024e31a..b38ec2b 100644
--- a/packages/paneforge/src/lib/paneforge.svelte.ts
+++ b/packages/paneforge/src/lib/paneforge.svelte.ts
@@ -825,12 +825,16 @@ class PaneState {
 		});
 	}
 
+	#isCollapsed = $derived.by(() => this.#group.isPaneCollapsed(this.#paneData));
+
 	props = $derived.by(() => ({
 		id: this.#id.current,
 		style: this.#group.getPaneStyle(this.#paneData, this.#defaultSize.current),
 		"data-pane": "",
 		"data-pane-id": this.#id.current,
 		"data-pane-group-id": this.#group.id.current,
+		"data-collapsed": this.#isCollapsed ? "" : undefined,
+		"data-expanded": this.#isCollapsed ? undefined : "",
 	}));
 }
 
diff --git a/sites/docs/src/lib/components/demos/collapsible-demo.svelte b/sites/docs/src/lib/components/demos/collapsible-demo.svelte
index 9d8d7c4..950ff95 100644
--- a/sites/docs/src/lib/components/demos/collapsible-demo.svelte
+++ b/sites/docs/src/lib/components/demos/collapsible-demo.svelte
@@ -11,7 +11,7 @@
 	{#if collapsed}
 		<Button
 			variant="outline"
-			on:click={() => {
+			onclick={() => {
 				paneOne?.expand();
 			}}
 		>
@@ -20,7 +20,7 @@
 	{:else}
 		<Button
 			variant="outline"
-			on:click={() => {
+			onclick={() => {
 				paneOne?.collapse();
 			}}
 		>
@@ -36,6 +36,7 @@
 		minSize={15}
 		onCollapse={() => (collapsed = true)}
 		onExpand={() => (collapsed = false)}
+		bind:this={paneOne}
 	>
 		<div class="bg-muted flex h-[400px] items-center justify-center rounded-lg p-6">
 			<span class="font-semibold">One</span>