jjj 0.2.1

A modal interface for Jujutsu.
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

---
import Icon from '../user-components/Icon.astro';

interface Props {
	label: string;
	value: string;
	icon: Parameters<typeof Icon>[0]['name'];
	width?: string;
	options: Array<{
		label: string;
		value: string;
		selected: boolean;
	}>;
}

/**
 * The `autocomplete="off"` attribute is used to prevent the browser from automatically selecting a
 * value for this input, e.g. based on the user's previous selections, as this could lead to
 * incorrect values being selected for example when the user switches between languages and uses
 * the back button.
 * Note that this attribute is only useful when a value is not restored at a later stage, e.g. the
 * bfcache that ignores this attribute when restoring the value.
 */
---

<label style={`--sl-select-width: ${Astro.props.width}`}>
	<span class="sr-only">{Astro.props.label}</span>
	<Icon name={Astro.props.icon} class="icon label-icon" />
	<select value={Astro.props.value} autocomplete="off">
		{
			Astro.props.options.map(({ value, selected, label }) => (
				<option value={value} selected={selected} set:html={label} />
			))
		}
	</select>
	<Icon name="down-caret" class="icon caret" />
</label>

<style>
	label {
		--sl-label-icon-size: 0.875rem;
		--sl-caret-size: 1.25rem;
		--sl-inline-padding: 0.5rem;
		position: relative;
		display: flex;
		align-items: center;
		gap: 0.25rem;
		color: var(--sl-color-gray-1);
	}

	label:hover {
		color: var(--sl-color-gray-2);
	}

	.icon {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		pointer-events: none;
	}

	.label-icon {
		font-size: var(--sl-label-icon-size);
		inset-inline-start: 0;
	}

	.caret {
		font-size: var(--sl-caret-size);
		inset-inline-end: 0;
	}

	select {
		border: 0;
		padding-block: 0.625rem;
		padding-inline: calc(var(--sl-label-icon-size) + var(--sl-inline-padding) + 0.25rem)
			calc(var(--sl-caret-size) + var(--sl-inline-padding) + 0.25rem);
		margin-inline: calc(var(--sl-inline-padding) * -1);
		width: calc(var(--sl-select-width) + var(--sl-inline-padding) * 2);
		background-color: transparent;
		text-overflow: ellipsis;
		color: inherit;
		cursor: pointer;
		appearance: none;
	}

	option {
		background-color: var(--sl-color-bg-nav);
		color: var(--sl-color-gray-1);
	}

	@media (min-width: 50rem) {
		select {
			font-size: var(--sl-text-sm);
		}
	}
</style>