fix css references to make suitable for import

src/lib/Combobox.svelte

@@ -462,7 +462,7 @@
 {/snippet}
 
 <style lang="postcss">
-	@reference "../app.css";
+	@reference "./styles/theme.css";
 
 	.picker {
 		--outer-gap: 0.5rem;

src/lib/Dateinput.svelte

@@ -311,7 +311,7 @@
 {/snippet}
 
 <style lang="postcss">
-	@reference "$lib/styles/theme.css";
+	@reference "./styles/theme.css";
 
 	.date-input {
 		@apply ring-accent dark:ring-accent/50 h-6 min-w-[1ch] outline-0 transition-all focus:ring-2;

src/lib/Spinner.svelte

@@ -1,8 +1,16 @@
 <script lang="ts">
-	let { size }: { size: string } = $props();
+	import type { ClassValue } from 'svelte/elements';
+
+	interface Props {
+		size: string;
+		class?: ClassValue;
+		color?: string;
+	}
+
+	let { size, class: classValue, color = '#fff' }: Props = $props();
 </script>
 
-<div class="lds-ring" style="--size: {size}">
+<div class={['lds-ring border-white', classValue]} style="--size: {size};--color: {color}">
 	<div></div>
 	<div></div>
 	<div></div>

src/lib/StateMachine.svelte

@@ -435,7 +435,7 @@
 </div>
 
 <style lang="postcss">
-	@reference "../app.css";
+	@reference "./styles/theme.css";
 
 	:global(.circle-initial) {
 		transition: opacity 1s;

src/lib/TimeInput.svelte

@@ -363,7 +363,7 @@
 </div>
 
 <style lang="postcss">
-	@reference "../app.css";
+	@reference "./styles/theme.css";
 
 	:global(.time-input) {
 		@apply h-16 w-24 text-center text-xl;

src/lib/styles/theme.css

@@ -5,6 +5,8 @@
 @plugin '@tailwindcss/container-queries';
 @plugin 'tailwindcss-animate';
 
+@custom-variant dark (&:where(.dark, .dark *));
+
 @theme {
 	/* Fonts - easily overrideable */
 	--font-*: initial;