svelte-docsmith 0.2.0 → 0.4.0

package/dist/theme.css

@@ -80,6 +80,31 @@
 	--shadow-2xl: var(--shadow-2xl);
 }
 
+/* A slim, rounded, theme-aware scrollbar — sits inset on transparent track so
+ * it reads as part of the surface, not a browser chrome. Used by scrolling
+ * overlays (the search palette, popovers) where the native bar looks heavy. */
+@utility scrollbar-slim {
+	scrollbar-width: thin;
+	scrollbar-color: color-mix(in oklab, var(--border) 85%, transparent) transparent;
+
+	&::-webkit-scrollbar {
+		width: 10px;
+		height: 10px;
+	}
+	&::-webkit-scrollbar-track {
+		background: transparent;
+	}
+	&::-webkit-scrollbar-thumb {
+		border-radius: 9999px;
+		border: 3px solid transparent;
+		background-clip: padding-box;
+		background-color: color-mix(in oklab, var(--border) 85%, transparent);
+	}
+	&::-webkit-scrollbar-thumb:hover {
+		background-color: var(--muted-foreground);
+	}
+}
+
 @layer base {
 	:root {
 		--background: oklch(0.9383 0.0042 236.4993);

package/dist/types.d.ts

@@ -5,9 +5,3 @@ import type { Snippet } from 'svelte';
 export type WithChildren<T> = T & {
     children: Snippet;
 };
-/**
- * Adds an optional `children` snippet to a props type.
- */
-export type WithChildrenOptional<T> = T & {
-    children?: Snippet;
-};

package/dist/ui/badge.svelte

@@ -19,12 +19,15 @@
 	const {
 		variant = 'default',
 		href,
+		external = false,
 		children
 	}: {
 		/** Visual intent. Default: `default`. */
 		variant?: BadgeVariant;
 		/** Turns the badge into a link. */
 		href?: string;
+		/** For a linked badge, open in a new tab with `rel="noopener"`. */
+		external?: boolean;
 		children: Snippet;
 	} = $props();
 
@@ -49,6 +52,12 @@
 	};
 </script>
 
-<ShadcnBadge variant={base[variant]} {href} class={extra[variant]}>
+<ShadcnBadge
+	variant={base[variant]}
+	{href}
+	target={external ? '_blank' : undefined}
+	rel={external ? 'noopener noreferrer' : undefined}
+	class={extra[variant]}
+>
 	{@render children()}
 </ShadcnBadge>

package/dist/ui/badge.svelte.d.ts

@@ -5,6 +5,8 @@ type $$ComponentProps = {
     variant?: BadgeVariant;
     /** Turns the badge into a link. */
     href?: string;
+    /** For a linked badge, open in a new tab with `rel="noopener"`. */
+    external?: boolean;
     children: Snippet;
 };
 declare const Badge: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/ui/callout.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-	export type CalloutType = 'note' | 'tip' | 'warning' | 'danger';
+	export type CalloutVariant = 'note' | 'tip' | 'warning' | 'danger';
 </script>
 
 <script lang="ts">
@@ -11,32 +11,32 @@
 	import type { Snippet } from 'svelte';
 
 	const {
-		type = 'note',
+		variant = 'note',
 		title,
 		children
 	}: {
 		/** Visual intent. Default: `note`. */
-		type?: CalloutType;
-		/** Optional heading; defaults to the capitalized type. */
+		variant?: CalloutVariant;
+		/** Optional heading; defaults to the capitalized variant. */
 		title?: string;
 		children: Snippet;
 	} = $props();
 
-	const variants: Record<CalloutType, { icon: Component; label: string; klass: string }> = {
+	const variants: Record<CalloutVariant, { icon: Component; label: string; klass: string }> = {
 		note: { icon: Info, label: 'Note', klass: 'callout-note' },
 		tip: { icon: Lightbulb, label: 'Tip', klass: 'callout-tip' },
 		warning: { icon: TriangleAlert, label: 'Warning', klass: 'callout-warning' },
 		danger: { icon: CircleAlert, label: 'Danger', klass: 'callout-danger' }
 	};
 
-	const variant = $derived(variants[type]);
-	const Icon = $derived(variant.icon);
+	const resolved = $derived(variants[variant]);
+	const Icon = $derived(resolved.icon);
 </script>
 
-<div role="note" class="not-prose callout {variant.klass}">
+<div role="note" class="not-prose callout {resolved.klass}">
 	<Icon class="callout-icon" size={18} aria-hidden="true" />
 	<div class="callout-body">
-		<p class="callout-title">{title ?? variant.label}</p>
+		<p class="callout-title">{title ?? resolved.label}</p>
 		<div class="callout-content">{@render children()}</div>
 	</div>
 </div>

package/dist/ui/callout.svelte.d.ts

@@ -1,10 +1,10 @@
-export type CalloutType = 'note' | 'tip' | 'warning' | 'danger';
+export type CalloutVariant = 'note' | 'tip' | 'warning' | 'danger';
 import type { Component } from 'svelte';
 import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     /** Visual intent. Default: `note`. */
-    type?: CalloutType;
-    /** Optional heading; defaults to the capitalized type. */
+    variant?: CalloutVariant;
+    /** Optional heading; defaults to the capitalized variant. */
     title?: string;
     children: Snippet;
 };

package/dist/ui/layouts/docs-header.svelte

@@ -3,6 +3,7 @@
 	import { Button } from '../shadcn/button/index.js';
 	import { Separator } from '../shadcn/separator/index.js';
 	import GithubIcon from '../icons/github.svelte';
+	import SearchTrigger from '../search-trigger.svelte';
 	import ThemeToggle from '../theme-toggle.svelte';
 	import type { DocsmithConfig } from '../../config.js';
 	import BookOpenText from '@lucide/svelte/icons/book-open-text';
@@ -11,20 +12,13 @@
 	const {
 		config,
 		logo,
-		actions,
-		standalone = false
+		actions
 	}: {
 		config: DocsmithConfig;
 		/** Custom logo mark; defaults to a book icon in a primary-tinted chip. */
 		logo?: Snippet;
 		/** Extra header controls, rendered before the theme toggle. */
 		actions?: Snippet;
-		/**
-		 * Show at every breakpoint (for pages without the docs mobile header, e.g.
-		 * a landing page). Default: desktop-only, since the docs shell pairs this
-		 * with a separate mobile header.
-		 */
-		standalone?: boolean;
 	} = $props();
 
 	let isScrolled = $state(false);
@@ -33,9 +27,7 @@
 <svelte:window onscroll={() => (isScrolled = window.scrollY > 50)} />
 
 <header
-	class="sticky top-0 z-40 w-full transition-all duration-200 {standalone
-		? 'block'
-		: 'hidden lg:block'} {isScrolled
+	class="sticky top-0 z-40 hidden w-full transition-all duration-200 lg:block {isScrolled
 		? 'bg-background/60 supports-backdrop-filter:bg-background/60 border-border/40 border-b backdrop-blur-xl'
 		: 'border-transparent bg-transparent'}"
 >
@@ -82,6 +74,8 @@
 				</div>
 			{/if}
 
+			<SearchTrigger />
+
 			<Separator orientation="vertical" class="bg-border/40 mx-1 min-h-0 h-6" />
 
 			<div class="flex items-center gap-0.5">

package/dist/ui/layouts/docs-header.svelte.d.ts

@@ -6,12 +6,6 @@ type $$ComponentProps = {
     logo?: Snippet;
     /** Extra header controls, rendered before the theme toggle. */
     actions?: Snippet;
-    /**
-     * Show at every breakpoint (for pages without the docs mobile header, e.g.
-     * a landing page). Default: desktop-only, since the docs shell pairs this
-     * with a separate mobile header.
-     */
-    standalone?: boolean;
 };
 declare const DocsHeader: import("svelte").Component<$$ComponentProps, {}, "">;
 type DocsHeader = ReturnType<typeof DocsHeader>;

package/dist/ui/layouts/docs-mobile-header.svelte

@@ -8,33 +8,39 @@
 	import { Button } from '../shadcn/button/index.js';
 	import * as Popover from '../shadcn/popover/index.js';
 	import { ScrollArea } from '../shadcn/scroll-area/index.js';
+	import { Separator } from '../shadcn/separator/index.js';
 	import * as Sheet from '../shadcn/sheet/index.js';
+	import { useSearch } from '../../search/context.svelte.js';
 	import BookOpenText from '@lucide/svelte/icons/book-open-text';
 	import Menu from '@lucide/svelte/icons/menu';
 	import PanelRight from '@lucide/svelte/icons/panel-right';
+	import SearchIcon from '@lucide/svelte/icons/search';
 	import type { Snippet } from 'svelte';
 
 	const {
 		config,
-		nav,
-		title,
-		tocItems,
+		nav = [],
+		title = config.title,
+		tocItems = [],
 		tocActiveId = null,
 		logo,
 		actions
 	}: {
 		config: DocsmithConfig;
-		nav: NavGroup[];
-		/** Title of the current page, shown between the menu and controls. */
-		title: string;
+		/** Sidebar groups; omit on non-doc pages (the landing/`page` layout). */
+		nav?: NavGroup[];
+		/** Title shown between the menu and controls. Defaults to the site title. */
+		title?: string;
 		/** In-page TOC entries; the TOC popover is hidden when empty. */
-		tocItems: TocItem[];
+		tocItems?: TocItem[];
 		/** Id of the heading currently in view. */
 		tocActiveId?: string | null;
 		logo?: Snippet;
 		actions?: Snippet;
 	} = $props();
 
+	const search = useSearch();
+
 	let isMenuOpen = $state(false);
 	let isTocOpen = $state(false);
 
@@ -72,7 +78,26 @@
 					</a>
 				</div>
 				<ScrollArea class="my-4 h-[calc(100vh-8rem)] pb-10 pl-2">
-					<DocsSidebar {nav} class="static block h-auto w-full" />
+					{#if config.nav?.length}
+						<nav class="flex flex-col gap-0.5 px-5 pb-1">
+							{#each config.nav as link (link.href)}
+								<a
+									href={link.href}
+									target={link.external ? '_blank' : undefined}
+									rel={link.external ? 'noopener noreferrer' : undefined}
+									class="text-muted-foreground hover:text-foreground rounded-md py-1.5 text-sm font-medium transition-colors"
+								>
+									{link.label}
+								</a>
+							{/each}
+						</nav>
+						{#if nav.length}
+							<Separator class="bg-border/60 mx-5 my-2" />
+						{/if}
+					{/if}
+					{#if nav.length}
+						<DocsSidebar {nav} class="static block h-auto w-full" />
+					{/if}
 				</ScrollArea>
 			</Sheet.Content>
 		</Sheet.Root>
@@ -84,6 +109,13 @@
 				{@render actions()}
 			{/if}
 
+			{#if search}
+				<Button variant="ghost" size="icon" class="size-8" onclick={() => (search.open = true)}>
+					<SearchIcon class="size-4" />
+					<span class="sr-only">Search documentation</span>
+				</Button>
+			{/if}
+
 			<ThemeToggle />
 
 			{#if tocItems.length > 0}

package/dist/ui/layouts/docs-mobile-header.svelte.d.ts

@@ -3,11 +3,12 @@ import type { TocItem } from '../../toc/index.js';
 import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     config: DocsmithConfig;
-    nav: NavGroup[];
-    /** Title of the current page, shown between the menu and controls. */
-    title: string;
+    /** Sidebar groups; omit on non-doc pages (the landing/`page` layout). */
+    nav?: NavGroup[];
+    /** Title shown between the menu and controls. Defaults to the site title. */
+    title?: string;
     /** In-page TOC entries; the TOC popover is hidden when empty. */
-    tocItems: TocItem[];
+    tocItems?: TocItem[];
     /** Id of the heading currently in view. */
     tocActiveId?: string | null;
     logo?: Snippet;

package/dist/ui/layouts/docs-shell.svelte

@@ -1,8 +1,15 @@
 <script lang="ts">
 	import { page } from '$app/state';
 	import { afterNavigate } from '$app/navigation';
-	import { navFromContent, type DocsContentItem, type DocsmithConfig } from '../../config.js';
+	import {
+		navFromContent,
+		type DocsContentItem,
+		type DocsmithConfig,
+		type SearchDoc
+	} from '../../config.js';
 	import { createToc } from '../../toc/index.js';
+	import { createSearchState } from '../../search/context.svelte.js';
+	import Search from '../search.svelte';
 	import BackgroundPattern from '../background-pattern.svelte';
 	import ThemeProvider from '../theme-provider.svelte';
 	import DocsHeader from './docs-header.svelte';
@@ -11,6 +18,7 @@
 	import DocsSidebar from './docs-sidebar.svelte';
 	import PrevNextNav from './prev-next-nav.svelte';
 	import Breadcrumbs, { type Crumb } from './breadcrumbs.svelte';
+	import SeoHead from './seo-head.svelte';
 	import TableOfContents from '../table-of-contents.svelte';
 	import type { Snippet } from 'svelte';
 
@@ -21,12 +29,26 @@
 		logo,
 		actions,
 		footer,
+		search,
+		seo,
 		pattern = false,
 		layout = 'docs'
 	}: {
 		config: DocsmithConfig;
 		content?: DocsContentItem[];
 		children: Snippet;
+		/**
+		 * Override the head tags for this page. Doc pages get their `<title>` and
+		 * description from frontmatter automatically; use this on non-doc pages
+		 * (the landing page, custom routes) or to override.
+		 */
+		seo?: { title?: string; description?: string };
+		/**
+		 * Enable the ⌘K search palette by lazily providing the generated index,
+		 * e.g. `search={() => import('svelte-docsmith/search').then((m) => m.docs)}`.
+		 * Omit to hide search. The index is fetched only when search first opens.
+		 */
+		search?: () => Promise<SearchDoc[]>;
 		/** Custom logo mark for the header and mobile menu. */
 		logo?: Snippet;
 		/** Extra header controls (desktop and mobile), before the theme toggle. */
@@ -44,8 +66,18 @@
 		layout?: 'docs' | 'page';
 	} = $props();
 
+	// Publish search state on context so the header triggers and the single
+	// dialog share one open-state; only when the consumer wired an index. The
+	// `search` loader is static for the shell's lifetime, so reading it once at
+	// init is intentional.
+	// svelte-ignore state_referenced_locally
+	if (search) createSearchState();
+
 	const nav = $derived(navFromContent(content));
 
+	// The content entry for the current route drives the SEO title/description.
+	const currentEntry = $derived(content.find((item) => item.path === page.url.pathname));
+
 	// Ordered flat page list drives the prev/next links.
 	const flatNav = $derived(nav.flatMap((group) => group.items));
 	const pageIndex = $derived(flatNav.findIndex((item) => item.url === page.url.pathname));
@@ -81,28 +113,40 @@
 	const tocItems = $derived(toc.items.length ? toc.items : pageToc);
 </script>
 
+<SeoHead
+	{config}
+	title={seo?.title ?? currentEntry?.title}
+	description={seo?.description ?? currentEntry?.description}
+/>
+
 <div class="relative isolate flex min-h-screen flex-col">
 	<!-- Owns light/dark for the whole app — consumers never wire mode-watcher. -->
 	<ThemeProvider />
 
+	{#if search}
+		<Search load={search} />
+	{/if}
+
 	{#if pattern}
 		<BackgroundPattern />
 	{/if}
 
+	<!-- One header system everywhere: DocsHeader on desktop, DocsMobileHeader
+	     below lg. The `page` layout just omits the sidebar nav and in-page TOC. -->
+	<DocsHeader {config} {logo} {actions} />
+
 	{#if layout === 'page'}
-		<DocsHeader {config} {logo} {actions} standalone />
+		<DocsMobileHeader {config} {logo} {actions} />
 
 		<main class="flex-1">
 			{@render children()}
 		</main>
 	{:else}
-		<DocsHeader {config} {logo} {actions} />
-
 		<DocsMobileHeader
 			{config}
 			{nav}
 			title={currentTitle}
-			tocItems={toc.items}
+			{tocItems}
 			tocActiveId={toc.activeId}
 			{logo}
 			{actions}

package/dist/ui/layouts/docs-shell.svelte.d.ts

@@ -1,9 +1,24 @@
-import { type DocsContentItem, type DocsmithConfig } from '../../config.js';
+import { type DocsContentItem, type DocsmithConfig, type SearchDoc } from '../../config.js';
 import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     config: DocsmithConfig;
     content?: DocsContentItem[];
     children: Snippet;
+    /**
+     * Override the head tags for this page. Doc pages get their `<title>` and
+     * description from frontmatter automatically; use this on non-doc pages
+     * (the landing page, custom routes) or to override.
+     */
+    seo?: {
+        title?: string;
+        description?: string;
+    };
+    /**
+     * Enable the ⌘K search palette by lazily providing the generated index,
+     * e.g. `search={() => import('svelte-docsmith/search').then((m) => m.docs)}`.
+     * Omit to hide search. The index is fetched only when search first opens.
+     */
+    search?: () => Promise<SearchDoc[]>;
     /** Custom logo mark for the header and mobile menu. */
     logo?: Snippet;
     /** Extra header controls (desktop and mobile), before the theme toggle. */

package/dist/ui/layouts/error-page.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import type { DocsContentItem, DocsmithConfig, SearchDoc } from '../../config.js';
+	import DocsShell from './docs-shell.svelte';
+	import ArrowLeft from '@lucide/svelte/icons/arrow-left';
+	import type { Snippet } from 'svelte';
+
+	const {
+		config,
+		content = [],
+		search,
+		status,
+		title,
+		message,
+		home = '/',
+		homeLabel = 'Back to home',
+		pattern = true,
+		children
+	}: {
+		config: DocsmithConfig;
+		/** Content index, so the error page keeps the same header/footer as the site. */
+		content?: DocsContentItem[];
+		/** Enable the ⌘K search palette on the error page (same loader as DocsShell). */
+		search?: () => Promise<SearchDoc[]>;
+		/** HTTP status; defaults to the current `page.status`. */
+		status?: number;
+		/** Heading; defaults to a message keyed off the status. */
+		title?: string;
+		/** Body line; defaults to the error message, or a status-appropriate default. */
+		message?: string;
+		/** Where the primary action links. Default: the site root. */
+		home?: string;
+		homeLabel?: string;
+		/** Render the decorative page background. Default: `true`. */
+		pattern?: boolean;
+		/** Extra content below the action (e.g. a search prompt or links). */
+		children?: Snippet;
+	} = $props();
+
+	const resolvedStatus = $derived(status ?? page.status);
+	const isNotFound = $derived(resolvedStatus === 404);
+	const resolvedTitle = $derived(title ?? (isNotFound ? 'Page not found' : 'Something went wrong'));
+	const resolvedMessage = $derived(
+		message ??
+			page.error?.message ??
+			(isNotFound
+				? "The page you're looking for doesn't exist or has moved."
+				: 'An unexpected error occurred. Please try again.')
+	);
+</script>
+
+<DocsShell {config} {content} {search} {pattern} layout="page" seo={{ title: resolvedTitle }}>
+	<section
+		class="mx-auto flex min-h-[60vh] max-w-2xl flex-col items-center justify-center px-4 py-20 text-center md:px-6"
+	>
+		<p class="text-primary font-mono text-sm font-semibold tracking-widest tabular-nums">
+			{resolvedStatus}
+		</p>
+		<h1 class="mt-4 text-4xl font-semibold tracking-tight text-balance sm:text-5xl">
+			{resolvedTitle}
+		</h1>
+		<p class="text-muted-foreground mt-4 text-lg leading-relaxed text-pretty">
+			{resolvedMessage}
+		</p>
+
+		<div class="mt-8 flex flex-wrap items-center justify-center gap-3">
+			<a
+				href={home}
+				class="group bg-primary text-primary-foreground inline-flex h-11 items-center gap-2 rounded-lg px-6 font-medium shadow-sm transition-all hover:bg-primary/90 hover:shadow-md"
+			>
+				<ArrowLeft class="size-4 transition-transform group-hover:-translate-x-0.5" />
+				{homeLabel}
+			</a>
+		</div>
+
+		{#if children}
+			<div class="mt-8">
+				{@render children()}
+			</div>
+		{/if}
+	</section>
+</DocsShell>

package/dist/ui/layouts/error-page.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { DocsContentItem, DocsmithConfig, SearchDoc } from '../../config.js';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    config: DocsmithConfig;
+    /** Content index, so the error page keeps the same header/footer as the site. */
+    content?: DocsContentItem[];
+    /** Enable the ⌘K search palette on the error page (same loader as DocsShell). */
+    search?: () => Promise<SearchDoc[]>;
+    /** HTTP status; defaults to the current `page.status`. */
+    status?: number;
+    /** Heading; defaults to a message keyed off the status. */
+    title?: string;
+    /** Body line; defaults to the error message, or a status-appropriate default. */
+    message?: string;
+    /** Where the primary action links. Default: the site root. */
+    home?: string;
+    homeLabel?: string;
+    /** Render the decorative page background. Default: `true`. */
+    pattern?: boolean;
+    /** Extra content below the action (e.g. a search prompt or links). */
+    children?: Snippet;
+};
+declare const ErrorPage: import("svelte").Component<$$ComponentProps, {}, "">;
+type ErrorPage = ReturnType<typeof ErrorPage>;
+export default ErrorPage;

package/dist/ui/layouts/seo-head.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import type { DocsmithConfig } from '../../config.js';
+
+	const {
+		config,
+		title,
+		description
+	}: {
+		config: DocsmithConfig;
+		/** The page's own title (frontmatter or override); omit for the site root. */
+		title?: string;
+		/** The page's own description; falls back to `config.description`. */
+		description?: string;
+	} = $props();
+
+	// "Page · Site", or just the site title when they would duplicate (the home page).
+	const fullTitle = $derived(
+		title && title !== config.title ? `${title} · ${config.title}` : config.title
+	);
+	const ogTitle = $derived(title ?? config.title);
+	const metaDescription = $derived(description ?? config.description);
+
+	const origin = $derived(config.url?.replace(/\/$/, ''));
+	// Absolute URLs need a configured origin; otherwise canonical/og:url are omitted.
+	const canonical = $derived(origin ? origin + page.url.pathname : undefined);
+	const image = $derived.by(() => {
+		const src = config.ogImage;
+		if (!src) return undefined;
+		if (/^https?:\/\//.test(src)) return src;
+		return origin ? origin + '/' + src.replace(/^\//, '') : src;
+	});
+</script>
+
+<svelte:head>
+	<title>{fullTitle}</title>
+	{#if metaDescription}
+		<meta name="description" content={metaDescription} />
+	{/if}
+	{#if canonical}
+		<link rel="canonical" href={canonical} />
+	{/if}
+
+	<meta property="og:title" content={ogTitle} />
+	{#if metaDescription}
+		<meta property="og:description" content={metaDescription} />
+	{/if}
+	<meta property="og:type" content="website" />
+	<meta property="og:site_name" content={config.title} />
+	{#if canonical}
+		<meta property="og:url" content={canonical} />
+	{/if}
+	{#if image}
+		<meta property="og:image" content={image} />
+	{/if}
+
+	<meta name="twitter:card" content={image ? 'summary_large_image' : 'summary'} />
+	<meta name="twitter:title" content={ogTitle} />
+	{#if metaDescription}
+		<meta name="twitter:description" content={metaDescription} />
+	{/if}
+	{#if image}
+		<meta name="twitter:image" content={image} />
+	{/if}
+</svelte:head>

package/dist/ui/layouts/seo-head.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { DocsmithConfig } from '../../config.js';
+type $$ComponentProps = {
+    config: DocsmithConfig;
+    /** The page's own title (frontmatter or override); omit for the site root. */
+    title?: string;
+    /** The page's own description; falls back to `config.description`. */
+    description?: string;
+};
+declare const SeoHead: import("svelte").Component<$$ComponentProps, {}, "">;
+type SeoHead = ReturnType<typeof SeoHead>;
+export default SeoHead;

package/dist/ui/markdown/h2.svelte

@@ -5,9 +5,13 @@
 	const { children, ...attrs }: HeadingProps = $props();
 </script>
 
-<h2 {...attrs} class="flex gap-2 items-center group">
+<h2 {...attrs} class="group flex items-center gap-2">
 	{@render children()}
-	<a href="#{attrs.id}" class="opacity-0 group-hover:opacity-100 transition-opacity">
-		<Link class="size-5 text-primary" />
+	<a
+		href="#{attrs.id}"
+		aria-label="Link to this section"
+		class="opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100"
+	>
+		<Link class="text-primary size-5" />
 	</a>
 </h2>