Make outline optional

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@selenite/commons",
-	"version": "0.24.1",
+	"version": "0.24.2",
 	"repository": "github:ShaitanLyss/selenite-commons",
 	"license": "MIT",
 	"keywords": [

src/lib/components/MatchHighlighter.svelte

@@ -5,15 +5,16 @@
 		content?: string;
 		ref?: string;
 		caseInsensitive?: boolean;
+		outline?: boolean;
 	}
 
-	let { content = '', ref = '', caseInsensitive = true }: Props = $props();
+	let { content = '', ref = '', caseInsensitive = true,outline = false }: Props = $props();
 	const parts = $derived(matchingParts(content, ref, { caseInsensitive }));
 </script>
 
 {#each parts as { match, part }}
 	{#if match}
-		<mark class="bg-accent text-accent-content outline-accent outline">{part}</mark>
+		<mark class="bg-accent text-accent-content" class:outline={outline} class:outline-accent={outline}>{part}</mark>
 	{:else}
 		{part}
 	{/if}

src/routes/match-highlight/+page.svelte

@@ -31,5 +31,5 @@ Trust was the first thing we lost that day"
 	onkeydown={(e) => e.key === 'Escape' && refInput?.blur()} />
 
 {#each content.split('\n') as line}
-	<p class="italic text-lg"><MatchHighlighter content={line} {ref} /></p>
+	<p class="italic text-lg"><MatchHighlighter content={line} {ref} outline={true}/></p>
 {/each}