From dc1a16026edcdd63496a01b35e7c1d9d078bfbdd Mon Sep 17 00:00:00 2001
From: "Thomas G. Lopes" <26071571+TGlide@users.noreply.github.com>
Date: Sat, 13 Apr 2024 17:04:32 +0100
Subject: [PATCH] doc changes

---
 sites/docs/content/functions/use-active-element.md | 14 ++++----------
 .../lib/components/demos/use-active-element.svelte |  4 +---
 .../src/lib/components/demos/use-debounce.svelte   |  3 ++-
 3 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/sites/docs/content/functions/use-active-element.md b/sites/docs/content/functions/use-active-element.md
index 0c986d0c..4a7949f1 100644
--- a/sites/docs/content/functions/use-active-element.md
+++ b/sites/docs/content/functions/use-active-element.md
@@ -20,14 +20,8 @@ import { UseActiveElementDemo } from '$lib/components/demos';
 	const activeElement = useActiveElement();
 </script>
 
-<div class="rounded-md bg-card p-8">
-	<p>
-		Currently active element:
-		<span class="font-bold">
-			{activeElement.value !== null
-				? activeElement.value.localName
-				: "No active element found"}
-		</span>
-	</p>
-</div>
+<p>
+	Currently active element: 
+	{activeElement.value?.localName ?? 'No active element found'}
+</p>
 ```
diff --git a/sites/docs/src/lib/components/demos/use-active-element.svelte b/sites/docs/src/lib/components/demos/use-active-element.svelte
index 469cf300..3953d1d0 100644
--- a/sites/docs/src/lib/components/demos/use-active-element.svelte
+++ b/sites/docs/src/lib/components/demos/use-active-element.svelte
@@ -8,9 +8,7 @@
 	<p>
 		Currently active element:
 		<span class="font-bold">
-			{activeElement.value !== null
-				? activeElement.value.localName
-				: "No active element found"}
+			{activeElement.value?.localName ?? "No active element found"}
 		</span>
 	</p>
 </div>
diff --git a/sites/docs/src/lib/components/demos/use-debounce.svelte b/sites/docs/src/lib/components/demos/use-debounce.svelte
index 17df660c..2781ef55 100644
--- a/sites/docs/src/lib/components/demos/use-debounce.svelte
+++ b/sites/docs/src/lib/components/demos/use-debounce.svelte
@@ -23,7 +23,8 @@
 
 <div class="rounded-md bg-card p-8">
 	<button
-		class="relative z-20 inline-flex items-center justify-center rounded-md border bg-brand/50 px-3 py-1.5 text-sm font-medium transition-all hover:bg-brand/25 focus:outline-none"
+		class="relative z-20 inline-flex items-center justify-center rounded-md border bg-brand/50
+		px-3 py-1.5 text-sm font-medium transition-all hover:bg-brand/25 focus:outline-none active:bg-brand/15"
 		onclick={ding}>DING DING DING</button
 	>
 	<p>{logged || "Press the button!"}</p>