entasis 0.11.0 → 0.12.0

package/dist/components/Form/Checkbox/Checkbox.svelte

@@ -3,6 +3,8 @@
 	import Field from '../Field/Field.svelte';
 	import { createFieldState } from '../Field/field.state.svelte.js';
 	import CheckboxLine from '../CheckboxesInput/CheckboxLine.svelte';
+	import { continueFormFromChoice } from '../CheckboxesInput/choiceEnter.js';
+	import FieldHiddenInputs from '../Field/FieldHiddenInputs.svelte';
 	import { useCheckboxesInputTheme } from '../CheckboxesInput/checkboxesInput.theme.js';
 	import type { CheckboxProps } from './checkbox.props.js';
 
@@ -16,6 +18,8 @@
 		indeterminate = false,
 		theme,
 		disabled,
+		readOnly,
+		messages,
 		name,
 		onValidate,
 		visible,
@@ -24,6 +28,8 @@
 		description,
 		labelPosition,
 		size = 'normal',
+		inputAttrs,
+		inputValue = 'true',
 		...rest
 	}: CheckboxProps = $props();
 	if (value === undefined) value = untrack(() => defaultValue);
@@ -59,6 +65,12 @@
 		set disabled(v: boolean | undefined) {
 			disabled = v;
 		},
+		get readOnly() {
+			return readOnly;
+		},
+		get messages() {
+			return messages;
+		},
 		get required() {
 			return required;
 		},
@@ -107,13 +119,13 @@
 	{...rest}
 >
 	<CheckboxLine
+		attrs={inputAttrs}
 		bind:ref={field.node}
 		id={field.id}
-		name={field.name}
-		inputValue="true"
 		checked={!!field.value}
 		{indeterminate}
 		disabled={field.disabled}
+		readOnly={field.readOnly}
 		{mode}
 		{size}
 		label={labelPosition ? undefined : label}
@@ -122,5 +134,8 @@
 		onCheckedChange={setChecked}
 		onFocus={() => (field.focused = true)}
 		onBlur={() => (field.focused = false)}
+		onEnter={(event) => continueFormFromChoice(event, field)}
 	/>
+	<!-- Beside the button, not inside it: a button may not contain interactive content. -->
+	<FieldHiddenInputs {field} checked={!!field.value} value={inputValue} />
 </Field>

package/dist/components/Form/Checkbox/checkbox.mcp.d.ts

@@ -1 +1 @@
-export declare const checkboxDescription = "\n# Checkbox\n\nImport from `entasis/checkbox`.\n\nCheckbox is a boolean Form control. value is bindable, defaultValue initializes an uncontrolled value, and onValueChange reports changes. required, disabled, errors, label, and fieldAttrs use the shared Field contract. indeterminate controls the mixed presentation. Checkbox shares the CheckboxesInput theme owner.\n";
+export declare const checkboxDescription = "\n# Checkbox\n\nImport from `entasis/checkbox`.\n\nCheckbox is a boolean Form control. value is bindable, defaultValue initializes an uncontrolled value, and onValueChange reports changes. required, disabled, readOnly, errors, messages, label, and fieldAttrs use the shared Field contract. indeterminate controls the mixed presentation. Checkbox shares the CheckboxesInput theme owner.\n\nA required checkbox must be checked; left unchecked it shows the catalog message asking to check it, which messages.required overrides. The checkbox control carries aria-required. A read-only checkbox stays focusable, carries aria-readonly, and ignores clicks and keys.\n\ninputValue is the value a native `<form>` submits under name while the checkbox is checked (default 'true'); an unchecked checkbox, or one without a name, submits nothing. The hidden input sits beside the button, never inside it, and carries required so a native submit is blocked until the box is checked.\n\nEnter does not toggle the checkbox. Like a native checkbox it continues the form: inside an entasis Form it validates the field and moves focus to the next one (the last field submits), and inside a plain `<form>` it clicks the form's default submit button. Space toggles. A mixed (indeterminate) checkbox toggles to the opposite of the boolean it holds.\n\nThe label names the checkbox (aria-labelledby) and the description describes it (aria-describedby), so the description is not part of the accessible name.\n\ninputAttrs takes native attributes for the checkbox button (FieldButtonAttributes), such as aria-label, title, data-* and event handlers; an aria-label there names the checkbox instead of its label, and a handler that calls preventDefault() cancels the toggle.\n";

package/dist/components/Form/Checkbox/checkbox.mcp.js

@@ -3,5 +3,15 @@ export const checkboxDescription = `
 
 Import from \`entasis/checkbox\`.
 
-Checkbox is a boolean Form control. value is bindable, defaultValue initializes an uncontrolled value, and onValueChange reports changes. required, disabled, errors, label, and fieldAttrs use the shared Field contract. indeterminate controls the mixed presentation. Checkbox shares the CheckboxesInput theme owner.
+Checkbox is a boolean Form control. value is bindable, defaultValue initializes an uncontrolled value, and onValueChange reports changes. required, disabled, readOnly, errors, messages, label, and fieldAttrs use the shared Field contract. indeterminate controls the mixed presentation. Checkbox shares the CheckboxesInput theme owner.
+
+A required checkbox must be checked; left unchecked it shows the catalog message asking to check it, which messages.required overrides. The checkbox control carries aria-required. A read-only checkbox stays focusable, carries aria-readonly, and ignores clicks and keys.
+
+inputValue is the value a native \`<form>\` submits under name while the checkbox is checked (default 'true'); an unchecked checkbox, or one without a name, submits nothing. The hidden input sits beside the button, never inside it, and carries required so a native submit is blocked until the box is checked.
+
+Enter does not toggle the checkbox. Like a native checkbox it continues the form: inside an entasis Form it validates the field and moves focus to the next one (the last field submits), and inside a plain \`<form>\` it clicks the form's default submit button. Space toggles. A mixed (indeterminate) checkbox toggles to the opposite of the boolean it holds.
+
+The label names the checkbox (aria-labelledby) and the description describes it (aria-describedby), so the description is not part of the accessible name.
+
+inputAttrs takes native attributes for the checkbox button (FieldButtonAttributes), such as aria-label, title, data-* and event handlers; an aria-label there names the checkbox instead of its label, and a handler that calls preventDefault() cancels the toggle.
 `;

package/dist/components/Form/Checkbox/checkbox.props.d.ts

@@ -1,4 +1,4 @@
-import type { InputProps } from '../Field/field.js';
+import type { FieldButtonAttributes, InputProps } from '../Field/field.js';
 import type { CheckboxMode } from '../CheckboxesInput/checkboxesInput.props.js';
 import type { CheckboxesInputThemeProps } from '../CheckboxesInput/checkboxesInput.theme.js';
 export type CheckboxProps = InputProps<'checkbox'> & {
@@ -9,6 +9,17 @@ export type CheckboxProps = InputProps<'checkbox'> & {
     mode?: CheckboxMode | 'control';
     /** Shows a mixed state without changing the boolean field value. */
     indeterminate?: boolean;
+    /**
+     * Value a native `<form>` submits with the checkbox's `name` while it is checked; an unchecked
+     * checkbox, or one without a `name`, submits nothing, like a native checkbox. Defaults to
+     * `'true'`.
+     */
+    inputValue?: string;
+    /**
+     * Native attributes for the checkbox control, such as `aria-label`, `title` or `data-*`. An
+     * `aria-label` names the checkbox instead of its label.
+     */
+    inputAttrs?: FieldButtonAttributes;
     /** Theme overrides for the checkbox row and field parts. */
     theme?: CheckboxesInputThemeProps & InputProps<'checkbox'>['theme'];
 };

package/dist/components/Form/CheckboxesInput/CheckboxLine.svelte

@@ -2,21 +2,20 @@
 	import { checkIcon } from '../../Icons/check.js';
 	import { minusIcon } from '../../Icons/minus.js';
 	import Slot from '../../Slot/Slot.svelte';
-	import type { Attachment } from 'svelte/attachments';
 	import type { Slot as SlotContent } from '../../Slot/slot.js';
 	import type { CheckboxMode } from './checkboxesInput.props.js';
 	import type { useCheckboxesInputTheme } from './checkboxesInput.theme.js';
 	import type { Sizes } from '../../../types/theme.js';
+	import type { FieldButtonAttributes } from '../Field/field.js';
 
 	type CheckboxLineClasses = ReturnType<typeof useCheckboxesInputTheme>;
 
 	let {
 		id,
-		name,
-		inputValue = 'on',
 		checked = false,
 		indeterminate = false,
 		disabled = false,
+		readOnly = false,
 		mode = 'normal',
 		size = 'normal',
 		label,
@@ -25,14 +24,16 @@
 		ref = $bindable(null),
 		onCheckedChange,
 		onFocus,
-		onBlur
+		onBlur,
+		onEnter,
+		attrs,
+		controls
 	}: {
 		id: string;
-		name?: string;
-		inputValue?: string;
 		checked?: boolean;
 		indeterminate?: boolean;
 		disabled?: boolean;
+		readOnly?: boolean;
 		mode?: CheckboxMode | 'control';
 		size?: Sizes;
 		label?: SlotContent;
@@ -42,51 +43,79 @@
 		onCheckedChange: (checked: boolean) => void;
 		onFocus?: () => void;
 		onBlur?: () => void;
+		/** A plain Enter key press, after the consumer's own `onkeydown`; Enter never toggles. */
+		onEnter?: (event: KeyboardEvent & { currentTarget: HTMLButtonElement }) => void;
+		/** Ids of the elements this row controls (a select-all row lists its options). */
+		controls?: string;
+		/** Native attributes from the owner's `inputAttrs`; its handlers run before the built-in ones. */
+		attrs?: FieldButtonAttributes;
 	} = $props();
 
+	// A mixed checkbox is not checked yet, so its next state is the opposite of the boolean it
+	// holds: a mixed row that already holds `true` turns off instead of doing nothing.
 	const toggle = () => {
 		if (disabled) return;
-		onCheckedChange(indeterminate || !checked);
+		onCheckedChange(!checked);
 	};
 
 	// `control` is the compact, label-less checkbox: a string name is spoken rather than painted,
 	// so the row keeps its accessible name without growing visible text.
 	const hiddenLabel = $derived(mode === 'control' && typeof label === 'string' ? label : undefined);
 
-	const syncIndeterminate: Attachment<HTMLInputElement> = (element) => {
-		$effect(() => {
-			element.indeterminate = indeterminate;
-		});
-	};
+	// The painted label names the row and the description describes it, so the description does
+	// not become part of the accessible name. An `aria-label` from `inputAttrs` names the row
+	// instead of the label; an `aria-labelledby` there wins over both.
+	// Not `${id}-label` and `${id}-description`: those are Field's own ids, which Field manages.
+	const labelId = $derived(`${id}-item-label`);
+	const descriptionId = $derived(`${id}-item-description`);
+	const labelledBy = $derived(
+		attrs?.['aria-labelledby'] ??
+			(label && !hiddenLabel && !attrs?.['aria-label'] ? labelId : undefined)
+	);
+	// Only spread when there is something to say. An `aria-describedby={undefined}` in the
+	// template would make Svelte own the attribute and remove what Field wrote for the helper,
+	// the description and the errors on the next attribute update (the first toggle).
+	const describedBy = $derived(
+		[attrs?.['aria-describedby'], description ? descriptionId : undefined]
+			.filter(Boolean)
+			.join(' ') || undefined
+	);
+	const describedByAttrs = $derived(describedBy ? { 'aria-describedby': describedBy } : {});
 </script>
 
 <button
+	{...attrs}
 	bind:this={ref}
 	{id}
 	type="button"
 	role="checkbox"
-	aria-label={hiddenLabel}
+	aria-label={hiddenLabel ?? attrs?.['aria-label']}
+	aria-labelledby={labelledBy}
+	{...describedByAttrs}
+	aria-controls={controls}
 	aria-checked={indeterminate ? 'mixed' : checked}
+	aria-readonly={readOnly || undefined}
 	{disabled}
+	data-readonly={readOnly ? '' : undefined}
 	data-state={indeterminate ? 'mixed' : checked ? 'checked' : 'unchecked'}
-	onclick={toggle}
-	onfocus={onFocus}
-	onblur={onBlur}
-	class={classes.checkboxesInputItem({ mode, checked, disabled, size })}
+	onclick={(event) => {
+		attrs?.onclick?.(event);
+		if (!event.defaultPrevented) toggle();
+	}}
+	onfocus={(event) => {
+		attrs?.onfocus?.(event);
+		onFocus?.();
+	}}
+	onblur={(event) => {
+		attrs?.onblur?.(event);
+		onBlur?.();
+	}}
+	onkeydown={(event) => {
+		attrs?.onkeydown?.(event);
+		if (!event.defaultPrevented) onEnter?.(event);
+	}}
+	class={classes.checkboxesInputItem({ mode, checked, disabled, size, readOnly })}
 >
-	<input
-		hidden
-		onchange={toggle}
-		style="transform: scale(0); opacity: 0; pointer-events: none; margin: -1px; position: absolute;"
-		type="checkbox"
-		{checked}
-		{@attach syncIndeterminate}
-		{name}
-		id={`${id}-input`}
-		value={inputValue}
-		{disabled}
-	/>
-
 	<div
 		class={classes.checkboxesInputItemTrack({
 			mode,
@@ -112,7 +141,15 @@
 	</div>
 
 	{#if !hiddenLabel}
-		<Slot render={label} class={classes.checkboxesInputItemLabel({ size })} />
+		<Slot
+			render={label}
+			attrs={{ id: labelId }}
+			class={classes.checkboxesInputItemLabel({ size })}
+		/>
 	{/if}
-	<Slot render={description} class={classes.checkboxesInputItemDescription({ mode, checked })} />
+	<Slot
+		render={description}
+		attrs={{ id: descriptionId }}
+		class={classes.checkboxesInputItemDescription({ mode, checked })}
+	/>
 </button>

package/dist/components/Form/CheckboxesInput/CheckboxLine.svelte.d.ts

@@ -2,14 +2,14 @@ import type { Slot as SlotContent } from '../../Slot/slot.js';
 import type { CheckboxMode } from './checkboxesInput.props.js';
 import type { useCheckboxesInputTheme } from './checkboxesInput.theme.js';
 import type { Sizes } from '../../../types/theme.js';
+import type { FieldButtonAttributes } from '../Field/field.js';
 type CheckboxLineClasses = ReturnType<typeof useCheckboxesInputTheme>;
 type $$ComponentProps = {
     id: string;
-    name?: string;
-    inputValue?: string;
     checked?: boolean;
     indeterminate?: boolean;
     disabled?: boolean;
+    readOnly?: boolean;
     mode?: CheckboxMode | 'control';
     size?: Sizes;
     label?: SlotContent;
@@ -19,6 +19,14 @@ type $$ComponentProps = {
     onCheckedChange: (checked: boolean) => void;
     onFocus?: () => void;
     onBlur?: () => void;
+    /** A plain Enter key press, after the consumer's own `onkeydown`; Enter never toggles. */
+    onEnter?: (event: KeyboardEvent & {
+        currentTarget: HTMLButtonElement;
+    }) => void;
+    /** Ids of the elements this row controls (a select-all row lists its options). */
+    controls?: string;
+    /** Native attributes from the owner's `inputAttrs`; its handlers run before the built-in ones. */
+    attrs?: FieldButtonAttributes;
 };
 declare const CheckboxLine: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type CheckboxLine = ReturnType<typeof CheckboxLine>;

package/dist/components/Form/CheckboxesInput/CheckboxesInput.svelte

@@ -1,14 +1,16 @@
-<script lang="ts" generics="Option extends CheckboxOption">
+<script lang="ts" generics="Option extends CheckboxOption, Value extends string = Option['value']">
 	import { untrack } from 'svelte';
 	import Field from '../Field/Field.svelte';
 	import { createFieldState } from '../Field/field.state.svelte.js';
 	import type { CheckboxOption, CheckboxesInputProps } from './checkboxesInput.props.js';
 	import { useCheckboxesInputTheme } from './checkboxesInput.theme.js';
-	import Slot from '../../Slot/Slot.svelte';
-	import { checkIcon } from '../../Icons/check.js';
+	import CheckboxLine from './CheckboxLine.svelte';
+	import { continueFormFromChoice } from './choiceEnter.js';
+	import FieldHiddenInputs from '../Field/FieldHiddenInputs.svelte';
+	import { useI18n } from '../../../i18n/context.svelte.js';
 
 	let {
-		defaultValue = [],
+		defaultValue = [] as Value[],
 		value = $bindable(),
 		errors = $bindable([]),
 		focused = $bindable(false),
@@ -17,15 +19,19 @@
 		mode = 'normal',
 		theme,
 		disabled,
+		readOnly,
+		messages,
 		name,
 		onValidate,
 		visible,
 		onValueChange,
 		label,
 		size = 'normal',
+		selectAll = false,
+		selectAllLabel,
 		...rest
-	}: CheckboxesInputProps<Option> = $props();
-	if (value === undefined) value = untrack(() => defaultValue);
+	}: CheckboxesInputProps<Option, Value> = $props();
+	if (value === undefined) value = untrack(() => defaultValue) as Value[];
 
 	const id = $props.id();
 
@@ -35,7 +41,7 @@
 			return value;
 		},
 		set value(v) {
-			value = v;
+			value = v as Value[];
 		},
 		get errors() {
 			return errors;
@@ -49,13 +55,19 @@
 		set focused(v: boolean) {
 			focused = v;
 		},
-		onValueChange: (v) => onValueChange?.(v ?? []),
+		onValueChange: (v) => onValueChange?.((v ?? []) as Value[]),
 		get disabled() {
 			return disabled;
 		},
 		set disabled(v: boolean | undefined) {
 			disabled = v;
 		},
+		get readOnly() {
+			return readOnly;
+		},
+		get messages() {
+			return messages;
+		},
 		get required() {
 			return required;
 		},
@@ -80,6 +92,72 @@
 	});
 
 	const componentTheme = $derived(useCheckboxesInputTheme(theme));
+	const t = $derived(useI18n());
+
+	// Option ids come from field.id, unique per instance, and the index, always a valid id
+	// token: name + value collides across instances that share a name and breaks on spaces.
+	const optionId = (index: number) => `${field.id}-option-${index}`;
+	const isOptionDisabled = (option: CheckboxOption) => Boolean(field.disabled || option.disabled);
+	type Item = Option & CheckboxOption<Value>;
+	const selectedValues = $derived(field.value ?? []);
+
+	const setOption = (option: Item, checked: boolean) => {
+		if (isOptionDisabled(option)) return;
+		const current = field.value ?? [];
+		if (current.includes(option.value) === checked) return;
+		field.value = checked
+			? [...current, option.value]
+			: current.filter((entry) => entry !== option.value);
+	};
+
+	// What a native <form> submits. A disabled option is left out, as a disabled native checkbox
+	// is, while the field's own value keeps it (a disabled but selected option stays selected).
+	const submittedValues = $derived(
+		items
+			.filter((option) => selectedValues.includes(option.value) && !isOptionDisabled(option))
+			.map((option) => option.value)
+	);
+
+	// Select all: the parent row acts on the enabled options only; disabled ones keep their state.
+	const enabledOptions = $derived(items.filter((option) => !isOptionDisabled(option)));
+	const enabledSelectedCount = $derived(
+		enabledOptions.filter((option) => selectedValues.includes(option.value)).length
+	);
+	const allSelected = $derived(
+		enabledOptions.length > 0 && enabledSelectedCount === enabledOptions.length
+	);
+	const someSelected = $derived(enabledSelectedCount > 0 && !allSelected);
+
+	// The selection the user had when the row first took it to "all", so the cycle can give it back.
+	// `produced` is the value the row left behind: any other edit since ends the cycle.
+	let cycle: { snapshot: string[]; produced: string } | null = null;
+	const keyOf = (values: readonly string[]) => JSON.stringify([...values].sort());
+
+	const cycleSelectAll = () => {
+		if (field.disabled || enabledOptions.length === 0) return;
+		const current = field.value ?? [];
+		if (cycle && keyOf(current) !== cycle.produced) cycle = null;
+		const enabled = new Set<string>(enabledOptions.map((option) => option.value));
+		const kept = (option: Item) => !enabled.has(option.value) && current.includes(option.value);
+		const build = (include: (option: Item) => boolean) =>
+			items.filter((option) => kept(option) || (enabled.has(option.value) && include(option)));
+		let next: Item[];
+		if (someSelected) {
+			next = build(() => true);
+			cycle = { snapshot: current.filter((value) => enabled.has(value)), produced: '' };
+		} else if (allSelected) {
+			next = build(() => false);
+		} else if (cycle) {
+			const snapshot = cycle.snapshot;
+			next = build((option) => snapshot.includes(option.value));
+			cycle = null;
+		} else {
+			next = build(() => true);
+		}
+		const nextValue = next.map((option) => option.value);
+		if (cycle) cycle.produced = keyOf(nextValue);
+		field.value = nextValue;
+	};
 </script>
 
 <!-- Create own field wrapper (when used standalone) -->
@@ -102,71 +180,42 @@
 	}}
 	{...rest}
 >
-	{#each items as option (option.value)}
-		{@const checked = field.value?.includes(option.value)}
-		{@const optionId = `${field.name}-${option.value}`}
-		{@const optionDisabled = Boolean(field.disabled || option.disabled)}
-		<button
-			type="button"
-			role="checkbox"
-			aria-checked={checked}
-			disabled={optionDisabled}
-			onclick={() => {
-				if (optionDisabled) return;
-				if (checked) {
-					field.value = field.value?.filter((v) => v !== option.value);
-				} else {
-					field.value = [...(field.value || []), option.value];
-				}
-			}}
-			class={componentTheme.checkboxesInputItem({ mode, checked, disabled: optionDisabled, size })}
-		>
-			<input
-				hidden
-				onchange={() => {
-					if (optionDisabled) return;
-					if (checked) {
-						field.value = field.value?.filter((v) => v !== option.value);
-					} else {
-						field.value = [...(field.value || []), option.value];
-					}
-				}}
-				style="transform: scale(0); opacity: 0; pointer-events: none; margin: -1px; position: absolute;"
-				type="checkbox"
-				{checked}
-				name={field.name}
-				id={optionId}
-				value={option.value}
-				disabled={optionDisabled}
-			/>
-
-			<!-- Checkbox Button Track -->
-			<div
-				class={componentTheme.checkboxesInputItemTrack({
-					mode,
-					checked,
-					disabled: optionDisabled,
-					size
-				})}
-			></div>
-
-			<!-- Checkbox Button Thumb -->
-			<div
-				class={componentTheme.checkboxesInputItemThumb({
-					checked,
-					mode,
-					disabled: optionDisabled,
-					size
-				})}
-			>
-				{@render checkIcon({ size: 40 })}
-			</div>
-
-			<!-- Label -->
-			<Slot render={option.label} class={componentTheme.checkboxesInputItemLabel({ size })} />
-
-			<!-- Description -->
-			<Slot render={option.description} class={componentTheme.checkboxesInputItemDescription()} />
-		</button>
+	{#if selectAll}
+		<CheckboxLine
+			id={`${field.id}-select-all`}
+			checked={allSelected}
+			indeterminate={someSelected}
+			disabled={field.disabled || enabledOptions.length === 0}
+			readOnly={field.readOnly}
+			{mode}
+			{size}
+			label={selectAllLabel ?? t.selectAll}
+			classes={componentTheme}
+			controls={items.map((_, index) => optionId(index)).join(' ')}
+			onCheckedChange={cycleSelectAll}
+			onEnter={(event) => continueFormFromChoice(event, field)}
+		/>
+	{/if}
+	{#each items as option, index (option.value)}
+		<CheckboxLine
+			id={optionId(index)}
+			checked={selectedValues.includes(option.value)}
+			disabled={isOptionDisabled(option)}
+			readOnly={field.readOnly}
+			{mode}
+			{size}
+			label={option.label}
+			description={option.description}
+			classes={componentTheme}
+			onCheckedChange={(checked) => setOption(option, checked)}
+			onEnter={(event) => continueFormFromChoice(event, field)}
+		/>
 	{/each}
+	<!-- One input per submitted value, beside the options (a button may not contain inputs). A
+	     required group blocks a native submit while its value is empty. -->
+	<FieldHiddenInputs
+		{field}
+		value={submittedValues}
+		required={field.required && selectedValues.length === 0}
+	/>
 </Field>

package/dist/components/Form/CheckboxesInput/CheckboxesInput.svelte.d.ts

@@ -1,25 +1,25 @@
 import type { CheckboxOption, CheckboxesInputProps } from './checkboxesInput.props.js';
-declare function $$render<Option extends CheckboxOption>(): {
-    props: CheckboxesInputProps<Option>;
+declare function $$render<Option extends CheckboxOption, Value extends string = Option['value']>(): {
+    props: CheckboxesInputProps<Option, Value>;
     exports: {};
     bindings: "value" | "errors" | "focused";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<Option extends CheckboxOption> {
-    props(): ReturnType<typeof $$render<Option>>['props'];
-    events(): ReturnType<typeof $$render<Option>>['events'];
-    slots(): ReturnType<typeof $$render<Option>>['slots'];
+declare class __sveltets_Render<Option extends CheckboxOption, Value extends string = Option['value']> {
+    props(): ReturnType<typeof $$render<Option, Value>>['props'];
+    events(): ReturnType<typeof $$render<Option, Value>>['events'];
+    slots(): ReturnType<typeof $$render<Option, Value>>['slots'];
     bindings(): "value" | "errors" | "focused";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <Option extends CheckboxOption>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Option>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Option>['props']>, ReturnType<__sveltets_Render<Option>['events']>, ReturnType<__sveltets_Render<Option>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<Option>['bindings']>;
-    } & ReturnType<__sveltets_Render<Option>['exports']>;
-    <Option extends CheckboxOption>(internal: unknown, props: ReturnType<__sveltets_Render<Option>['props']> & {}): ReturnType<__sveltets_Render<Option>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+    new <Option extends CheckboxOption, Value extends string = Option['value']>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Option, Value>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Option, Value>['props']>, ReturnType<__sveltets_Render<Option, Value>['events']>, ReturnType<__sveltets_Render<Option, Value>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Option, Value>['bindings']>;
+    } & ReturnType<__sveltets_Render<Option, Value>['exports']>;
+    <Option extends CheckboxOption, Value extends string = Option['value']>(internal: unknown, props: ReturnType<__sveltets_Render<Option, Value>['props']> & {}): ReturnType<__sveltets_Render<Option, Value>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 declare const CheckboxesInput: $$IsomorphicComponent;
-type CheckboxesInput<Option extends CheckboxOption> = InstanceType<typeof CheckboxesInput<Option>>;
+type CheckboxesInput<Option extends CheckboxOption, Value extends string = Option['value']> = InstanceType<typeof CheckboxesInput<Option, Value>>;
 export default CheckboxesInput;