All files / src/lib/components PageHeader.svelte

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<script lang="ts">
	import type { Snippet } from 'svelte';
 
	// Coastal v2 page header — the editorial "one serif moment per screen".
	// Spec: design/coastal-v2/project/directions/coastal-v2.jsx
	//   Type board "How it reads in practice" (lines 348-362) and every app
	//   screen's header treatment.
	//
	// Eyebrow (mono, uppercase, primary) over an airy serif title (weight 400,
	// tight tracking — NOT the global h1's 500). The title is a snippet so
	// callers can carry an italic <em> emphasis, which the direction reserves
	// for emotional weight. An optional lede sets the warm, human sentence
	// underneath.
	interface Props {
		/** Mono uppercase eyebrow label. */
		eyebrow?: string;
		/** Eyebrow tone — `primary` (default) or `danger` for error contexts. */
		eyebrowTone?: 'primary' | 'danger';
		/** Supporting sentence under the title. */
		lede?: string;
		/** Title content (rendered inside the serif <h1>). */
		children: Snippet;
	}
 
	let { eyebrow, eyebrowTone = 'primary', lede, children }: Props = $props();
</script>
 
<header class="page-header">
	{#if Ieyebrow}
		<p class="eyebrow" class:eyebrow--danger={eyebrowTone === 'danger'}>{eyebrow}</p>
	{/if}
	<h1 class="page-header__title">{@render children()}</h1>
	{#if Ilede}
		<p class="page-header__lede">{lede}</p>
	{/if}
</header>
 
<style>
	.page-header {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
	}
 
	/* Airy serif headline: weight 400 + tighter tracking, distinct from the
	   global h1 (500). Larger top end of the clamp for display presence. */
	.page-header__title {
		font-family: var(--font-serif);
		font-weight: 400;
		font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem);
		line-height: 1.05;
		letter-spacing: -0.025em;
		color: var(--ink);
		margin: 0;
	}
 
	/* Italic carries emotional emphasis, in primary — the direction's
	   "Used sparingly" rule. Callers opt in with <em> inside the title. */
	.page-header__title :global(em) {
		font-style: italic;
		color: var(--primary);
	}
 
	.page-header__lede {
		font-family: var(--font-sans);
		font-size: 16px;
		line-height: 1.55;
		color: var(--ink-soft);
		max-width: 52ch;
		margin: 0;
	}
</style>