All files / src/lib/components Field.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
74
75
76
77
78
79
80
81
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<script lang="ts">
	import type { Snippet } from 'svelte';
 
	interface Props {
		/** Label text rendered for the wrapped input. */
		label: string;
		/** Optional helper text shown beneath the input. */
		hint?: string;
		/** The input/select/textarea element(s) — kept native so getByLabel and selectors work. */
		children: Snippet;
	}
 
	let { label, hint, children }: Props = $props();
</script>
 
<div class="field">
	<label class="field__label">
		<span class="field__label-text">{label}</span>
		{@render children()}
	</label>
	{#if Ihint}
		<p class="field__hint">{hint}</p>
	{/if}
</div>
 
<style>
	.field {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
		font-family: var(--font-sans);
	}
 
	.field__label {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
	}
 
	.field__label-text {
		font-size: 14px;
		font-weight: 500;
		color: var(--ink);
	}
 
	.field__hint {
		font-size: 13px;
		color: var(--ink-muted);
		margin: 0;
	}
 
	/*
	 * Style the native input/select/textarea via descendant selectors so
	 * the consumer's `<input type="email">`, `<select>`, etc. are still the
	 * real focusable element (Playwright `input[type="email"]` and
	 * `getByLabel(...)` selectors must continue to resolve).
	 *
	 * Focus-visible styling lives in app.css (consolidated rule for
	 * input/select/textarea); we don't redeclare it here.
	 */
	.field :global(input),
	.field :global(select),
	.field :global(textarea) {
		width: 100%;
		padding: 10px 12px;
		background: var(--surface);
		color: var(--ink);
		border: 1px solid var(--line);
		border-radius: var(--radius-sm);
		font-family: inherit;
		font-size: 15px;
		line-height: 1.4;
		min-height: 44px;
	}
 
	.field :global(textarea) {
		min-height: 96px;
		resize: vertical;
	}
</style>