From a1bc125521256a455ec9da1c670fcf4cdf13c539 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Wed, 3 Dec 2025 18:29:57 -0800
Subject: [PATCH] add element-ghost button variant for sidebar header

---
 src/lib/components/ui/Button.svelte    | 60 +++++++++++++++++++++++---
 src/lib/components/ui/PaneStack.svelte |  9 +---
 2 files changed, 55 insertions(+), 14 deletions(-)

diff --git a/src/lib/components/ui/Button.svelte b/src/lib/components/ui/Button.svelte
index 1c99e4c1..b82570d1 100644
--- a/src/lib/components/ui/Button.svelte
+++ b/src/lib/components/ui/Button.svelte
@@ -12,6 +12,7 @@
 			| 'primary'
 			| 'secondary'
 			| 'ghost'
+			| 'element-ghost'
 			| 'text'
 			| 'destructive'
 			| 'notice'
@@ -472,8 +473,55 @@
 		}
 	}
 
+	// Element ghost variant - transparent bg with element text color, light element bg on hover
+	:global([data-button-root].element-ghost) {
+		background-color: transparent;
+	}
+
+	:global([data-button-root].element-ghost.wind) {
+		color: var(--wind-button-bg);
+		&:hover:not(:disabled) {
+			background-color: var(--wind-nav-selected-bg);
+		}
+	}
+
+	:global([data-button-root].element-ghost.fire) {
+		color: var(--fire-button-bg);
+		&:hover:not(:disabled) {
+			background-color: var(--fire-nav-selected-bg);
+		}
+	}
+
+	:global([data-button-root].element-ghost.water) {
+		color: var(--water-button-bg);
+		&:hover:not(:disabled) {
+			background-color: var(--water-nav-selected-bg);
+		}
+	}
+
+	:global([data-button-root].element-ghost.earth) {
+		color: var(--earth-button-bg);
+		&:hover:not(:disabled) {
+			background-color: var(--earth-nav-selected-bg);
+		}
+	}
+
+	:global([data-button-root].element-ghost.dark) {
+		color: var(--dark-button-bg);
+		&:hover:not(:disabled) {
+			background-color: var(--dark-nav-selected-bg);
+		}
+	}
+
+	:global([data-button-root].element-ghost.light) {
+		color: var(--light-button-bg);
+		&:hover:not(:disabled) {
+			background-color: var(--light-nav-selected-bg);
+		}
+	}
+
 	// Keep non-styled element classes for backward compatibility
-	:global([data-button-root].wind:not(.element-styled)) {
+	:global([data-button-root].wind:not(.element-styled):not(.element-ghost)) {
 		background: var(--wind-bg);
 		color: var(--wind-text-contrast);
 
@@ -483,7 +531,7 @@
 		}
 	}
 
-	:global([data-button-root].fire:not(.element-styled)) {
+	:global([data-button-root].fire:not(.element-styled):not(.element-ghost)) {
 		background: var(--fire-bg);
 		color: var(--fire-text-contrast);
 
@@ -493,7 +541,7 @@
 		}
 	}
 
-	:global([data-button-root].water:not(.element-styled)) {
+	:global([data-button-root].water:not(.element-styled):not(.element-ghost)) {
 		background: var(--water-bg);
 		color: var(--water-text-contrast);
 
@@ -503,7 +551,7 @@
 		}
 	}
 
-	:global([data-button-root].earth:not(.element-styled)) {
+	:global([data-button-root].earth:not(.element-styled):not(.element-ghost)) {
 		background: var(--earth-bg);
 		color: var(--earth-text-contrast);
 
@@ -513,7 +561,7 @@
 		}
 	}
 
-	:global([data-button-root].dark:not(.element-styled)) {
+	:global([data-button-root].dark:not(.element-styled):not(.element-ghost)) {
 		background: var(--dark-bg);
 		color: var(--dark-text-contrast);
 
@@ -523,7 +571,7 @@
 		}
 	}
 
-	:global([data-button-root].light:not(.element-styled)) {
+	:global([data-button-root].light:not(.element-styled):not(.element-ghost)) {
 		background: var(--light-bg);
 		color: var(--light-text-contrast);
 
diff --git a/src/lib/components/ui/PaneStack.svelte b/src/lib/components/ui/PaneStack.svelte
index 2aa49b27..31b48df9 100644
--- a/src/lib/components/ui/PaneStack.svelte
+++ b/src/lib/components/ui/PaneStack.svelte
@@ -101,10 +101,9 @@
 				{#snippet rightAccessory()}
 					{#if pane.action}
 						<Button
-							variant="ghost"
+							variant={pane.action.element ? 'element-ghost' : 'ghost'}
 							size="small"
 							element={pane.action.element}
-							elementStyle={!!pane.action.element}
 							onclick={pane.action.handler}
 							disabled={pane.action.disabled}
 						>
@@ -287,12 +286,6 @@
 		}
 	}
 
-	// Overflow trigger - reset any default styles from bits-ui
-	:global(.overflow-trigger) {
-		all: unset;
-		display: flex;
-	}
-
 	// Overflow menu styles
 	:global(.overflow-menu) {
 		background: var(--menu-bg, white);