All files / src/lib/components CheckToggle.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<script lang="ts">
	import Icon from './Icon.svelte';
	import type { HTMLButtonAttributes } from 'svelte/elements';
 
	interface Props extends HTMLButtonAttributes {
		pressed: boolean;
		/** Required — surfaced as both aria-label and tooltip (icon-only control). */
		label: string;
	}
 
	let { pressed, label, class: className, ...rest }: Props = $props();
</script>
 
<button
	{...rest}
	class="check-toggle {className ?? ''}"
	class:check-toggle--checked={pressed}
	aria-pressed={pressed}
	aria-label={label}
	title={label}
>
	<span class="check-toggle__box">
		{#if Ipressed}<Icon name="check" size={16} />{/if}
	</span>
</button>
 
<style>
	.check-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: var(--space-1);
		background: transparent;
		border: none;
		cursor: pointer;
	}
 
	.check-toggle__box {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 24px;
		height: 24px;
		border: 2px solid var(--line);
		border-radius: var(--radius-sm);
		background: var(--surface);
		color: #fff;
		transition:
			background-color 0.12s ease,
			border-color 0.12s ease;
	}
 
	.check-toggle--checked .check-toggle__box {
		background: var(--success);
		border-color: var(--success);
	}
 
	.check-toggle:hover .check-toggle__box {
		border-color: var(--success);
	}
</style>