component: description

src/lib/assets/icons/index.ts

@@ -41,6 +41,7 @@ import GitBranch from './git-branch.svg?component';
 import Globe from './globe.svg?component';
 import GridSquare from './grid-square.svg?component';
 import Inbox from './inbox.svg?component';
+import InformationFillSmall from './information-fill-small.svg?component';
 import Information from './information.svg?component';
 import Key from './key.svg?component';
 import Link from './link.svg?component';
@@ -122,6 +123,7 @@ export const Icons = {
 	Globe,
 	GridSquare,
 	Inbox,
+	InformationFillSmall,
 	Information,
 	Key,
 	Link,

src/lib/components/ui/description/description.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { Icons } from '$lib/assets/icons';
+	import * as Tooltip from '$lib/components/ui/tooltip';
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = HTMLAttributes<HTMLDListElement> & {
+		tooltip: string;
+		content: string;
+	};
+
+	let {
+		title,
+		tooltip,
+		content,
+		class: class_name = undefined,
+		children,
+		...rest
+	}: Props = $props();
+</script>
+
+<dl class={cn('grid gap-2', class_name)} {...rest}>
+	<dt
+		class="inline-flex min-h-[14px] items-center gap-0.5 whitespace-nowrap text-sm capitalize leading-[14px] text-gray-900"
+	>
+		{title}
+		<Tooltip.Provider delayDuration={150}>
+			<Tooltip.Root>
+				<Tooltip.Trigger class="cursor-auto">
+					<Icons.InformationFillSmall />
+				</Tooltip.Trigger>
+				<Tooltip.Portal>
+					<Tooltip.Content>
+						<p>{tooltip}</p>
+					</Tooltip.Content>
+				</Tooltip.Portal>
+			</Tooltip.Root>
+		</Tooltip.Provider>
+	</dt>
+	<dd class="text-sm font-medium leading-4 text-gray-1000">{content}</dd>
+</dl>

src/lib/components/ui/description/index.ts

@@ -0,0 +1 @@
+export { default as Description } from './description.svelte';

src/lib/config/sitemap.ts

@@ -101,8 +101,7 @@ export const aside_items: Aside = {
 		},
 		{
 			title: 'Description',
-			href: '/description',
-			status: 'soon'
+			href: '/description'
 		},
 		{
 			title: 'Drawer',

src/routes/description/+page.svelte

@@ -1 +1,14 @@
-<h1>description</h1>
+<script lang="ts">
+	import Demo from '$lib/components/shared/demo.svelte';
+	import PageWrapper from '$lib/components/shared/page-wrapper.svelte';
+	import Default from './default.svelte';
+	import default_code from './default.svelte?raw';
+
+	let { data } = $props();
+</script>
+
+<PageWrapper title={data.title} description={data.description}>
+	<Demo id="default" code={default_code}>
+		<Default />
+	</Demo>
+</PageWrapper>

src/routes/description/+page.ts

@@ -0,0 +1,22 @@
+import type { MetaTagsProps } from 'svelte-meta-tags';
+
+export function load() {
+	const title = 'Description';
+	const description =
+		'Displays a brief heading and subheading to communicate any additional information or context a user needs to continue.';
+
+	const pageMetaTags = Object.freeze({
+		title,
+		description,
+		openGraph: {
+			title,
+			description
+		}
+	}) satisfies MetaTagsProps;
+
+	return {
+		pageMetaTags,
+		title,
+		description
+	};
+}

src/routes/description/default.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { Description } from '$lib/components/ui/description';
+</script>
+
+<Description
+	title="Section Title"
+	content="Data about this section."
+	tooltip="Additional context about what this section refers to."
+/>