Checkbox group

<script lang="ts">
	// data-slean="checkbox-group" registers the behavior with @svelte-lean/vite.
	import '@svelte-lean/styles/checkbox.css';
	import '@svelte-lean/styles/checkbox-group.css';

	const all = ['mentions', 'replies', 'digest'];
	let notify = $state(['mentions']);
</script>

<fieldset data-slean="checkbox-group">
	<legend>Notifications</legend>
	<label>
		<!-- Server-render the state of the all box; indeterminate is a property Svelte sets. -->
		<input
			type="checkbox"
			data-slean="checkbox"
			data-slean-part="all"
			checked={notify.length === all.length}
			indeterminate={notify.length > 0 && notify.length < all.length}
		/>
		All notifications
	</label>
	<label>
		<input type="checkbox" name="notify" value="mentions" data-slean="checkbox" bind:group={notify} />
		Mentions
	</label>
	<label>
		<input type="checkbox" name="notify" value="replies" data-slean="checkbox" bind:group={notify} />
		Replies
	</label>
	<label>
		<input type="checkbox" name="notify" value="digest" data-slean="checkbox" bind:group={notify} />
		Weekly digest
	</label>
</fieldset>
<p>Value: {notify.join(', ') || 'none'}</p>

<script lang="ts">
	import '@svelte-lean/styles/checkbox.css';
	import '@svelte-lean/styles/checkbox-group.css';
</script>

<!-- A nested group is a member of the outer one through its own all box. -->
<fieldset data-slean="checkbox-group">
	<legend>Permissions</legend>
	<label><input type="checkbox" data-slean="checkbox" data-slean-part="all" /> Everything</label>
	<label><input type="checkbox" name="perm" value="read" data-slean="checkbox" /> Read</label>
	<fieldset data-slean="checkbox-group">
		<legend>Write</legend>
		<label>
			<input type="checkbox" data-slean="checkbox" data-slean-part="all" /> All writes
		</label>
		<label><input type="checkbox" name="perm" value="edit" data-slean="checkbox" /> Edit</label>
		<label><input type="checkbox" name="perm" value="delete" data-slean="checkbox" /> Delete</label>
	</fieldset>
</fieldset>

<script lang="ts">
	import '@svelte-lean/styles/checkbox.css';
	import '@svelte-lean/styles/checkbox-group.css';
</script>

<!-- A disabled member keeps its state: the all box skips it and leaves it out of its own. -->
<fieldset data-slean="checkbox-group" data-slean-orientation="horizontal">
	<legend>Exports</legend>
	<label><input type="checkbox" data-slean="checkbox" data-slean-part="all" /> All formats</label>
	<label><input type="checkbox" name="format" value="csv" data-slean="checkbox" /> CSV</label>
	<label><input type="checkbox" name="format" value="xlsx" data-slean="checkbox" /> Excel</label>
	<label>
		<input type="checkbox" name="format" value="pdf" data-slean="checkbox" disabled />
		PDF (upgrade)
	</label>
</fieldset>