use Checkbox component in database edit pages with element theming

src/lib/components/ui/DetailItem.svelte

@@ -4,6 +4,7 @@
 	import type { Snippet } from 'svelte'
 	import Input from './Input.svelte'
 	import Select from './Select.svelte'
+	import Checkbox from './checkbox/Checkbox.svelte'
 
 	interface SelectOption {
 		value: string | number
@@ -18,7 +19,8 @@
 		editable = false,
 		type = 'text',
 		options,
-		placeholder
+		placeholder,
+		element
 	}: {
 		label: string
 		value?: string | number | boolean | null | undefined
@@ -27,6 +29,7 @@
 		type?: 'text' | 'number' | 'select' | 'checkbox'
 		options?: SelectOption[]
 		placeholder?: string
+		element?: 'wind' | 'fire' | 'water' | 'earth' | 'dark' | 'light'
 	} = $props()
 
 	// For checkbox type, convert value to boolean
@@ -46,10 +49,7 @@
 			{#if type === 'select' && options}
 				<Select bind:value={value as string | number | undefined} {options} {placeholder} size="medium" contained />
 			{:else if type === 'checkbox'}
-				<label class="checkbox-wrapper">
+				<Checkbox bind:checked={checkboxValue} contained {element} />
-					<input type="checkbox" bind:checked={checkboxValue} class="checkbox" />
-					<span class="checkbox-label">{checkboxValue ? 'Yes' : 'No'}</span>
-				</label>
 			{:else if type === 'number'}
 				<Input
 					bind:value
@@ -131,22 +131,5 @@
 			}
 		}
 
-		.checkbox-wrapper {
-			display: flex;
-			align-items: center;
-			gap: spacing.$unit;
-			cursor: pointer;
-
-			.checkbox {
-				width: spacing.$unit-2x;
-				height: spacing.$unit-2x;
-				cursor: pointer;
-			}
-
-			.checkbox-label {
-				color: var(--text-primary);
-				user-select: none;
-			}
-		}
 	}
 </style>

src/lib/components/ui/checkbox/Checkbox.svelte

@@ -164,6 +164,37 @@
 		--cb-checked-fg: white;
 	}
 
+	// Element colors when bound (higher specificity to override .checkbox.bound)
+	:global(.checkbox.bound.wind[data-state='checked']),
+	:global(.checkbox.bound.wind[data-state='indeterminate']),
+	:global(.checkbox.bound.fire[data-state='checked']),
+	:global(.checkbox.bound.fire[data-state='indeterminate']),
+	:global(.checkbox.bound.water[data-state='checked']),
+	:global(.checkbox.bound.water[data-state='indeterminate']),
+	:global(.checkbox.bound.earth[data-state='checked']),
+	:global(.checkbox.bound.earth[data-state='indeterminate']),
+	:global(.checkbox.bound.dark[data-state='checked']),
+	:global(.checkbox.bound.dark[data-state='indeterminate']),
+	:global(.checkbox.bound.light[data-state='checked']),
+	:global(.checkbox.bound.light[data-state='indeterminate']) {
+		background-color: var(--cb-checked-bg);
+	}
+
+	:global(.checkbox.bound.wind[data-state='checked']:hover:not(:disabled)),
+	:global(.checkbox.bound.wind[data-state='indeterminate']:hover:not(:disabled)),
+	:global(.checkbox.bound.fire[data-state='checked']:hover:not(:disabled)),
+	:global(.checkbox.bound.fire[data-state='indeterminate']:hover:not(:disabled)),
+	:global(.checkbox.bound.water[data-state='checked']:hover:not(:disabled)),
+	:global(.checkbox.bound.water[data-state='indeterminate']:hover:not(:disabled)),
+	:global(.checkbox.bound.earth[data-state='checked']:hover:not(:disabled)),
+	:global(.checkbox.bound.earth[data-state='indeterminate']:hover:not(:disabled)),
+	:global(.checkbox.bound.dark[data-state='checked']:hover:not(:disabled)),
+	:global(.checkbox.bound.dark[data-state='indeterminate']:hover:not(:disabled)),
+	:global(.checkbox.bound.light[data-state='checked']:hover:not(:disabled)),
+	:global(.checkbox.bound.light[data-state='indeterminate']:hover:not(:disabled)) {
+		background-color: var(--cb-checked-bg-hover);
+	}
+
 	// Size variations
 	:global(.checkbox.small) {
 		--cb-icon-size: #{calc($unit * 1.5)};

src/routes/database/characters/[id]/+page.svelte

@@ -212,6 +212,13 @@
 
 	const uncapLevel = $derived(getCharacterMaxUncapLevel({ special, uncap: { flb, ulb, transcendence } }))
 	const transcendenceStage = $derived(transcendence ? 5 : 0)
+
+	// Get element name for checkbox theming
+	const elementName = $derived.by(() => {
+		const el = editMode ? editData.element : character?.element
+		const label = getElementLabel(el)
+		return label !== '—' && label !== 'Null' ? label.toLowerCase() as 'wind' | 'fire' | 'water' | 'earth' | 'dark' | 'light' : undefined
+	})
 </script>
 
 <div>
@@ -278,19 +285,21 @@
 				{/if}
 
 				{#if editMode}
-					<DetailItem label="FLB" bind:value={editData.flb} editable={true} type="checkbox" />
+					<DetailItem label="FLB" bind:value={editData.flb} editable={true} type="checkbox" element={elementName} />
-					<DetailItem label="ULB" bind:value={editData.ulb} editable={true} type="checkbox" />
+					<DetailItem label="ULB" bind:value={editData.ulb} editable={true} type="checkbox" element={elementName} />
 					<DetailItem
 						label="Transcendence"
 						bind:value={editData.transcendence}
 						editable={true}
 						type="checkbox"
+						element={elementName}
 					/>
 					<DetailItem
 						label="Special"
 						bind:value={editData.special}
 						editable={true}
 						type="checkbox"
+						element={elementName}
 					/>
 				{/if}