Merge branch 'main' into feat/event-listener

packages/runed/src/lib/functions/useActiveElement/useActiveElement.svelte.ts

@@ -1,5 +1,13 @@
 import { isBrowser } from "$lib/internal/utils/browser.js";
 
+
+/**
+ * Returns a reactive value that is equal to `document.activeElement`.
+ * It automatically listens for changes, keeping the reference up to date.
+ *
+ * @export
+ * @returns {{ value: Readonly<Element | null> }}
+ */
 export function useActiveElement(): { value: Readonly<Element | null> } {
 	const activeElement = $state({ value: isBrowser() ? document.activeElement : null });
 

packages/runed/src/lib/functions/useDebounce/useDebounce.svelte.ts

@@ -12,10 +12,6 @@ import type { FunctionArgs, ValueOrGetter } from "$lib/internal/types.js";
  * The second parameter is the time to wait before calling the original callback.
  * Alternatively, it can also be a getter function that returns the time to wait.
  *
- * @export
- * @template {FunctionArgs} Callback
- * @param {Callback} callback
- * @param {number} wait
  */
 export function useDebounce<Callback extends FunctionArgs>(
 	callback: Callback,

packages/runed/src/lib/functions/useElementSize/useElementSize.svelte.ts

@@ -9,20 +9,31 @@ type Options = {
 	box?: "content-box" | "border-box";
 };
 
+
+/**
+ * Returns a reactive value holding the size of `node`.
+ *
+ * @export
+ * @param {ValueOrGetter<HTMLElement | undefined>} node
+ * @param {Options} [options={
+ * 		box: "border-box",
+ * 	}]
+ * @returns {*}
+ */
 export function useElementSize(
-	_node: ValueOrGetter<HTMLElement | undefined>,
+	node: ValueOrGetter<HTMLElement | undefined>,
 	options: Options = {
 		box: "border-box",
 	}
 ) {
-	const node = boxed(_node);
+	const $node = boxed(node);
 	const size = $state({
 		width: options.initialSize?.width ?? 0,
 		height: options.initialSize?.height ?? 0,
 	});
 
 	$effect(() => {
-		if (!node.value) return;
+		if (!$node.value) return;
 
 		const observer = new ResizeObserver((entries) => {
 			for (const entry of entries) {
@@ -33,7 +44,7 @@ export function useElementSize(
 				size.height = boxSizeArr.reduce((acc, size) => Math.max(acc, size.blockSize), 0);
 			}
 		});
-		observer.observe(node.value);
+		observer.observe($node.value);
 
 		return () => {
 			observer.disconnect();

sites/docs/content/functions/use-active-element.md

@@ -18,16 +18,10 @@ import { UseActiveElementDemo } from '$lib/components/demos';
 	import { useActiveElement } from "runed";
 
 	const activeElement = useActiveElement();
-	const text = $derived(
-		`Currently active element: ${
-			activeElement.value !== nulla
-				? activeElement.value.localName
-				: "No active element found"
-		}`a
-	);
 </script>
 
-<div class="rounded-md bg-card p-8">
-	<p>{text}</p>
-</div>
+<p>
+	Currently active element: 
+	{activeElement.value?.localName ?? 'No active element found'}
+</p>
 ```

sites/docs/package.json

@@ -41,7 +41,7 @@
 		"clsx": "^2.1.0",
 		"concurrently": "^8.2.2",
 		"contentlayer": "^0.3.4",
-		"mdsx": "^0.0.3",
+		"mdsx": "^0.0.5",
 		"phosphor-svelte": "^1.4.2",
 		"postcss": "^8.4.35",
 		"postcss-load-config": "^5.0.3",
@@ -67,8 +67,8 @@
 		"@melt-ui/svelte": "^0.74.0",
 		"bits-ui": "^0.18.1",
 		"mode-watcher": "^0.2.1",
-		"runed": "workspace:^",
 		"rehype-slug": "^6.0.0",
+		"runed": "workspace:^",
 		"svelte-sonner": "^0.3.17",
 		"vaul-svelte": "^0.2.3"
 	}

sites/docs/src/lib/components/demos/use-active-element.svelte

@@ -2,13 +2,13 @@
 	import { useActiveElement } from "runed";
 
 	const activeElement = useActiveElement();
-	const text = $derived(
-		`Currently active element: ${
-			activeElement.value !== null ? activeElement.value.localName : "No active element found"
-		}`
-	);
 </script>
 
 <div class="rounded-md bg-card p-8">
-	<p>{text}</p>
+	<p>
+		Currently active element:
+		<span class="font-bold">
+			{activeElement.value?.localName ?? "No active element found"}
+		</span>
+	</p>
 </div>

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>

sites/docs/src/lib/components/layout/navbar/navbar-logo.svelte

@@ -1,9 +1,15 @@
+<script lang="ts">
+	import RunedLight from "$lib/components/logos/runed-light.svelte";
+	import RunedDark from "$lib/components/logos/runed-dark.svelte";
+</script>
+
 <div class="flex items-center gap-1.5 lg:flex-1">
 	<a
 		href="/"
 		class="flex flex-shrink-0 items-end gap-1.5 text-xl font-bold text-gray-900 dark:text-white"
 	>
-		<p>Runed</p>
-		<span class="sr-only"> Current Page Here </span>
+		<RunedLight class="block h-7 w-auto dark:hidden" />
+		<RunedDark class="hidden h-7 w-auto dark:block" />
+		<span class="sr-only"> Home </span>
 	</a>
 </div>