sheer-ui 0.4.0 → 0.4.3

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sheer-ui",
-	"version": "0.4.0",
+	"version": "0.4.3",
 	"description": "Svelte 5 UI component library with Tailwind CSS",
 	"license": "MIT",
 	"repository": {

package/src/lib/components/accordion/components/accordion-item.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { join } from 'overrule';
 	import { createSettleRunner } from '../../../internal/animations-settled.svelte.js';
-	import { useAccordion } from '../accordion.svelte.js';
+	import { useAccordion } from './accordion.svelte';
 	import type { AccordionItemProps } from '../types.js';
 
 	let { value, disabled = false, class: className, ref = $bindable(null), children, ...restProps }: AccordionItemProps = $props();
@@ -46,12 +46,12 @@
 		const summary = (e.target as HTMLElement).closest('summary');
 		if (!summary || summary.closest('details') !== e.currentTarget) return;
 		e.preventDefault();
-		accordion.report(value, !open);
+		accordion.value = accordion.with(value, !open);
 	}}
 	ontoggle={(e) => {
 		// Native toggles that bypass the click path (find-in-page, hash reveal).
 		if (e.currentTarget.open === rendered) return;
-		accordion.report(value, e.currentTarget.open);
+		accordion.value = accordion.with(value, e.currentTarget.open);
 	}}
 	bind:this={ref}>
 	{@render children?.()}

package/src/lib/components/accordion/components/accordion.svelte

@@ -1,21 +1,37 @@
+<script lang="ts" module>
+	import { createContext } from 'svelte';
+	import { SelectionValue, emptySelection } from '../../../internal/selection.svelte.js';
+
+	export const [useAccordion, setAccordion] = createContext<SelectionValue>();
+</script>
+
 <script lang="ts">
-	import { AccordionState, setAccordion } from '../accordion.svelte.js';
+	import { repairBindable } from '../../../internal/tools/index.js';
 	import type { AccordionRootProps } from '../types.js';
 
-	let {
-		type = 'single',
-		value = $bindable(type === 'single' ? '' : []),
-		ref = $bindable(null),
-		children,
-		...restProps
-	}: AccordionRootProps = $props();
+	let { type = 'single', value = $bindable(), ref = $bindable(null), children, ...restProps }: AccordionRootProps = $props();
+
+	// Mode is fixed at mount, like the selection groups: `value` keeps the shape it was declared with.
+	// svelte-ignore state_referenced_locally
+	const valueType = type;
+
+	repairBindable(
+		() => value,
+		() => {
+			if (value === undefined) value = emptySelection(valueType);
+		},
+	);
 
+	// Each item is a `<details>`; this holds the open set (bindable `value`) and single-type
+	// exclusivity — not the native `name` attribute, which would unrender a force-closed sibling
+	// before its closing transition can play. Items intercept summary clicks and report intent
+	// here; the grid-track animation lives in ui.css.
 	setAccordion(
-		new AccordionState({
-			type: () => type,
-			value: () => value ?? (type === 'single' ? '' : []),
-			setValue: (v) => (value = v),
-		}),
+		new SelectionValue(
+			valueType,
+			() => value ?? emptySelection(valueType),
+			(v) => (value = v),
+		),
 	);
 </script>
 

package/src/lib/components/accordion/types.ts

@@ -1,10 +1,10 @@
 import type { HTMLAttributes, SvelteHTMLElements } from 'svelte/elements';
 import type { WithElementRef } from '../../internal/utils.js';
-import type { AccordionType } from './accordion.svelte.js';
+import type { SelectionType } from '../../internal/selection.svelte.js';
 
 export type AccordionRootProps = WithElementRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
-	/** 'single' groups the items' `<details>` by name so the browser enforces one-open. */
-	type?: AccordionType;
+	/** 'single' keeps one item open: opening an item closes the open one. Fixed at mount. */
+	type?: SelectionType;
 	/** The open item value(s) — string for single, string[] for multiple. Bindable. */
 	value?: string | string[];
 };

package/src/lib/components/avatar/avatar.svelte.ts

@@ -1,8 +1,8 @@
 import { createContext, untrack } from 'svelte';
-import { DOMContext, type ReadableBox, type WritableBox, attachRef, type ReadableBoxedValues } from '../../internal/tools/index.js';
+import { DOMContext, attachRef } from '../../internal/tools/index.js';
 import type { HTMLImgAttributes } from 'svelte/elements';
 import type { AvatarImageLoadingStatus } from './types.js';
-import type { RefAttachment, WithRefOpts } from '../../internal/types.js';
+import type { RefAttachment, RefOpts } from '../../internal/types.js';
 import { createBitsAttrs } from '../../internal/attrs.js';
 
 const avatarAttrs = createBitsAttrs({
@@ -14,9 +14,9 @@ type CrossOrigin = HTMLImgAttributes['crossorigin'];
 type ReferrerPolicy = HTMLImgAttributes['referrerpolicy'];
 type AvatarImageSrc = string | null | undefined;
 
-interface AvatarRootStateOpts extends WithRefOpts {
-	delayMs: ReadableBox<number>;
-	loadingStatus: WritableBox<AvatarImageLoadingStatus>;
+interface AvatarRootStateOpts extends RefOpts {
+	readonly delayMs: number;
+	loadingStatus: AvatarImageLoadingStatus;
 }
 
 const [getAvatarRoot, setAvatarRoot] = createContext<AvatarRootState>();
@@ -32,13 +32,13 @@ export class AvatarRootState {
 
 	constructor(opts: AvatarRootStateOpts) {
 		this.opts = opts;
-		this.domContext = new DOMContext(this.opts.ref);
+		this.domContext = new DOMContext(() => opts.ref);
 		this.loadImage = this.loadImage.bind(this);
-		this.attachment = attachRef(this.opts.ref);
+		this.attachment = attachRef<HTMLElement>((v) => (opts.ref = v));
 	}
 
 	loadImage(src: string, crossorigin?: CrossOrigin, referrerPolicy?: ReferrerPolicy) {
-		if (this.opts.loadingStatus.current === 'loaded') return;
+		if (this.opts.loadingStatus === 'loaded') return;
 		let imageTimerId: number;
 		const image = new Image();
 
@@ -46,14 +46,14 @@ export class AvatarRootState {
 		if (crossorigin !== undefined) image.crossOrigin = crossorigin;
 		if (referrerPolicy) image.referrerPolicy = referrerPolicy;
 
-		this.opts.loadingStatus.current = 'loading';
+		this.opts.loadingStatus = 'loading';
 		image.onload = () => {
 			imageTimerId = this.domContext.setTimeout(() => {
-				this.opts.loadingStatus.current = 'loaded';
-			}, this.opts.delayMs.current);
+				this.opts.loadingStatus = 'loaded';
+			}, this.opts.delayMs);
 		};
 		image.onerror = () => {
-			this.opts.loadingStatus.current = 'error';
+			this.opts.loadingStatus = 'error';
 		};
 		return () => {
 			if (!imageTimerId) return;
@@ -64,22 +64,19 @@ export class AvatarRootState {
 	props = $derived.by(
 		() =>
 			({
-				id: this.opts.id.current,
+				id: this.opts.id,
 				[avatarAttrs.root]: '',
-				'data-status': this.opts.loadingStatus.current,
+				'data-status': this.opts.loadingStatus,
 				...this.attachment,
 			}) as const,
 	);
 }
 
-interface AvatarImageStateOpts
-	extends
-		WithRefOpts,
-		ReadableBoxedValues<{
-			src: AvatarImageSrc;
-			crossOrigin: CrossOrigin;
-			referrerPolicy: ReferrerPolicy;
-		}> {}
+interface AvatarImageStateOpts extends RefOpts {
+	readonly src: AvatarImageSrc;
+	readonly crossOrigin: CrossOrigin;
+	readonly referrerPolicy: ReferrerPolicy;
+}
 
 export class AvatarImageState {
 	static create(opts: AvatarImageStateOpts) {
@@ -92,17 +89,17 @@ export class AvatarImageState {
 	constructor(opts: AvatarImageStateOpts, root: AvatarRootState) {
 		this.opts = opts;
 		this.root = root;
-		this.attachment = attachRef(this.opts.ref);
+		this.attachment = attachRef<HTMLElement>((v) => (opts.ref = v));
 
 		$effect.pre(() => {
-			const src = this.opts.src.current;
-			const crossOrigin = this.opts.crossOrigin.current;
+			const src = this.opts.src;
+			const crossOrigin = this.opts.crossOrigin;
 			untrack(() => {
 				if (!src) {
-					this.root.opts.loadingStatus.current = 'error';
+					this.root.opts.loadingStatus = 'error';
 					return;
 				}
-				this.root.loadImage(src, crossOrigin, this.opts.referrerPolicy.current);
+				this.root.loadImage(src, crossOrigin, this.opts.referrerPolicy);
 			});
 		});
 	}
@@ -110,21 +107,21 @@ export class AvatarImageState {
 	readonly props = $derived.by(
 		() =>
 			({
-				id: this.opts.id.current,
+				id: this.opts.id,
 				style: {
-					display: this.root.opts.loadingStatus.current === 'loaded' ? 'block' : 'none',
+					display: this.root.opts.loadingStatus === 'loaded' ? 'block' : 'none',
 				},
-				'data-status': this.root.opts.loadingStatus.current,
+				'data-status': this.root.opts.loadingStatus,
 				[avatarAttrs.image]: '',
-				src: this.opts.src.current,
-				crossorigin: this.opts.crossOrigin.current,
-				referrerpolicy: this.opts.referrerPolicy.current,
+				src: this.opts.src,
+				crossorigin: this.opts.crossOrigin,
+				referrerpolicy: this.opts.referrerPolicy,
 				...this.attachment,
 			}) as const,
 	);
 }
 
-interface AvatarFallbackStateOpts extends WithRefOpts {}
+interface AvatarFallbackStateOpts extends RefOpts {}
 export class AvatarFallbackState {
 	static create(opts: AvatarFallbackStateOpts) {
 		return new AvatarFallbackState(opts, getAvatarRoot());
@@ -137,16 +134,16 @@ export class AvatarFallbackState {
 	constructor(opts: AvatarFallbackStateOpts, root: AvatarRootState) {
 		this.opts = opts;
 		this.root = root;
-		this.attachment = attachRef(this.opts.ref);
+		this.attachment = attachRef<HTMLElement>((v) => (opts.ref = v));
 	}
 
-	readonly style = $derived.by(() => (this.root.opts.loadingStatus.current === 'loaded' ? { display: 'none' } : undefined));
+	readonly style = $derived.by(() => (this.root.opts.loadingStatus === 'loaded' ? { display: 'none' } : undefined));
 
 	readonly props = $derived.by(
 		() =>
 			({
 				style: this.style,
-				'data-status': this.root.opts.loadingStatus.current,
+				'data-status': this.root.opts.loadingStatus,
 				[avatarAttrs.fallback]: '',
 				...this.attachment,
 			}) as const,

package/src/lib/components/avatar/components/avatar-fallback.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { boxWith } from '../../../internal/tools/index.js';
 	import { mergeProps } from '../../../internal/merge-props.js';
 	import type { AvatarFallbackProps } from '../types.js';
 	import { AvatarFallbackState } from '../avatar.svelte.js';
@@ -10,11 +9,15 @@
 	let { children, child, id = createId(uid), ref = $bindable(null), ...restProps }: AvatarFallbackProps = $props();
 
 	const fallbackState = AvatarFallbackState.create({
-		id: boxWith(() => id),
-		ref: boxWith(
-			() => ref,
-			(v) => (ref = v),
-		),
+		get id() {
+			return id;
+		},
+		get ref() {
+			return ref;
+		},
+		set ref(v) {
+			ref = v;
+		},
 	});
 
 	const mergedProps = $derived(

package/src/lib/components/avatar/components/avatar-image.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { boxWith } from '../../../internal/tools/index.js';
 	import { mergeProps } from '../../../internal/merge-props.js';
 	import type { AvatarImageProps } from '../types.js';
 	import { AvatarImageState } from '../avatar.svelte.js';
@@ -18,14 +17,24 @@
 	}: AvatarImageProps = $props();
 
 	const imageState = AvatarImageState.create({
-		src: boxWith(() => src),
-		id: boxWith(() => id),
-		ref: boxWith(
-			() => ref,
-			(v) => (ref = v),
-		),
-		crossOrigin: boxWith(() => crossorigin),
-		referrerPolicy: boxWith(() => referrerpolicy),
+		get src() {
+			return src;
+		},
+		get id() {
+			return id;
+		},
+		get crossOrigin() {
+			return crossorigin;
+		},
+		get referrerPolicy() {
+			return referrerpolicy;
+		},
+		get ref() {
+			return ref;
+		},
+		set ref(v) {
+			ref = v;
+		},
 	});
 
 	const mergedProps = $derived(

package/src/lib/components/avatar/components/avatar.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { boxWith } from '../../../internal/tools/index.js';
 	import { mergeProps } from '../../../internal/merge-props.js';
 	import type { AvatarRootProps } from '../types.js';
 	import { AvatarRootState } from '../avatar.svelte.js';
@@ -19,21 +18,26 @@
 	}: AvatarRootProps = $props();
 
 	const rootState = AvatarRootState.create({
-		delayMs: boxWith(() => delayMs),
-		loadingStatus: boxWith(
-			() => loadingStatus,
-			(v) => {
-				if (loadingStatus !== v) {
-					loadingStatus = v;
-					onLoadingStatusChange?.(v);
-				}
-			},
-		),
-		id: boxWith(() => id),
-		ref: boxWith(
-			() => ref,
-			(v) => (ref = v),
-		),
+		get delayMs() {
+			return delayMs;
+		},
+		get loadingStatus() {
+			return loadingStatus;
+		},
+		set loadingStatus(v) {
+			if (loadingStatus === v) return;
+			loadingStatus = v;
+			onLoadingStatusChange?.(v);
+		},
+		get id() {
+			return id;
+		},
+		get ref() {
+			return ref;
+		},
+		set ref(v) {
+			ref = v;
+		},
 	});
 
 	const mergedProps = $derived(

package/src/lib/components/checkbox/checkbox.svelte.ts

@@ -1,8 +1,8 @@
 import { createContext } from 'svelte';
 import { joinGroup } from '../../internal/group-value.svelte.js';
-import { attachRef, type ReadableBoxedValues, type WritableBoxedValues } from '../../internal/tools/index.js';
+import { attachRef } from '../../internal/tools/index.js';
 import type { HTMLButtonAttributes } from 'svelte/elements';
-import type { BitsKeyboardEvent, BitsMouseEvent, RefAttachment, WithRefOpts } from '../../internal/types.js';
+import type { BitsKeyboardEvent, BitsMouseEvent, RefAttachment, RefOpts } from '../../internal/types.js';
 import { boolToStr, createBitsAttrs, getAriaChecked, boolToEmptyStrOrUndef } from '../../internal/attrs.js';
 import { kbd } from '../../internal/kbd.js';
 
@@ -11,17 +11,12 @@ const checkboxAttrs = createBitsAttrs({
 	parts: ['root', 'group', 'group-label', 'input'],
 });
 
-interface CheckboxGroupStateOpts
-	extends
-		WithRefOpts,
-		ReadableBoxedValues<{
-			disabled: boolean;
-			required: boolean;
-			readonly: boolean;
-		}>,
-		WritableBoxedValues<{
-			value: string[];
-		}> {}
+interface CheckboxGroupStateOpts extends RefOpts {
+	readonly disabled: boolean;
+	readonly required: boolean;
+	readonly readonly: boolean;
+	value: string[];
+}
 
 const [getCheckboxGroup, setCheckboxGroup, hasCheckboxGroup] = createContext<CheckboxGroupState>();
 
@@ -33,27 +28,27 @@ export class CheckboxGroupState {
 	readonly opts: CheckboxGroupStateOpts;
 	readonly attachment: RefAttachment;
 	labelState = $state<CheckboxGroupLabelState | null>(null);
-	readonly labelId = $derived.by(() => this.labelState?.opts.id.current);
+	readonly labelId = $derived.by(() => this.labelState?.opts.id);
 
 	constructor(opts: CheckboxGroupStateOpts) {
 		this.opts = opts;
-		this.attachment = attachRef(this.opts.ref);
+		this.attachment = attachRef<HTMLElement>((v) => (opts.ref = v));
 	}
 
 	readonly props = $derived.by(
 		() =>
 			({
-				id: this.opts.id.current,
+				id: this.opts.id,
 				role: 'group',
 				'aria-labelledby': this.labelId,
-				'data-disabled': boolToEmptyStrOrUndef(this.opts.disabled.current),
+				'data-disabled': boolToEmptyStrOrUndef(this.opts.disabled),
 				[checkboxAttrs.group]: '',
 				...this.attachment,
 			}) as const,
 	);
 }
 
-interface CheckboxGroupLabelStateOpts extends WithRefOpts {}
+interface CheckboxGroupLabelStateOpts extends RefOpts {}
 
 export class CheckboxGroupLabelState {
 	static create(opts: CheckboxGroupLabelStateOpts) {
@@ -68,14 +63,14 @@ export class CheckboxGroupLabelState {
 		this.opts = opts;
 		this.group = group;
 		this.group.labelState = this;
-		this.attachment = attachRef(this.opts.ref);
+		this.attachment = attachRef<HTMLElement>((v) => (opts.ref = v));
 	}
 
 	readonly props = $derived.by(
 		() =>
 			({
-				id: this.opts.id.current,
-				'data-disabled': boolToEmptyStrOrUndef(this.group.opts.disabled.current),
+				id: this.opts.id,
+				'data-disabled': boolToEmptyStrOrUndef(this.group.opts.disabled),
 				[checkboxAttrs['group-label']]: '',
 				...this.attachment,
 			}) as const,
@@ -84,20 +79,15 @@ export class CheckboxGroupLabelState {
 
 const [, setCheckboxRoot] = createContext<CheckboxRootState>();
 
-interface CheckboxRootStateOpts
-	extends
-		WithRefOpts,
-		ReadableBoxedValues<{
-			disabled: boolean;
-			required: boolean;
-			readonly: boolean;
-			value: string | undefined;
-			type: HTMLButtonAttributes['type'];
-		}>,
-		WritableBoxedValues<{
-			checked: boolean;
-			indeterminate: boolean;
-		}> {}
+interface CheckboxRootStateOpts extends RefOpts {
+	readonly disabled: boolean;
+	readonly required: boolean;
+	readonly readonly: boolean;
+	readonly value: string | undefined;
+	readonly type: HTMLButtonAttributes['type'];
+	checked: boolean;
+	indeterminate: boolean;
+}
 
 export class CheckboxRootState {
 	static create(opts: CheckboxRootStateOpts) {
@@ -109,33 +99,33 @@ export class CheckboxRootState {
 	readonly group: CheckboxGroupState | null;
 	readonly groupChecked: () => boolean | undefined;
 	readonly trueRequired = $derived.by(() => {
-		if (this.group && this.group.opts.required.current) return true;
-		return this.opts.required.current;
+		if (this.group && this.group.opts.required) return true;
+		return this.opts.required;
 	});
 	readonly trueDisabled = $derived.by(() => {
-		if (this.group && this.group.opts.disabled.current) return true;
-		return this.opts.disabled.current;
+		if (this.group && this.group.opts.disabled) return true;
+		return this.opts.disabled;
 	});
 	readonly trueReadonly = $derived.by(() => {
-		if (this.group && this.group.opts.readonly.current) return true;
-		return this.opts.readonly.current;
+		if (this.group && this.group.opts.readonly) return true;
+		return this.opts.readonly;
 	});
 	readonly attachment: RefAttachment;
 
 	constructor(opts: CheckboxRootStateOpts, group: CheckboxGroupState | null) {
 		this.opts = opts;
 		this.group = group;
-		this.attachment = attachRef(this.opts.ref);
+		this.attachment = attachRef<HTMLElement>((v) => (opts.ref = v));
 		this.onkeydown = this.onkeydown.bind(this);
 		this.onclick = this.onclick.bind(this);
-		this.groupChecked = joinGroup(group, opts);
+		this.groupChecked = joinGroup(group?.opts ?? null, opts);
 	}
 
 	onkeydown(e: BitsKeyboardEvent) {
 		if (this.trueDisabled || this.trueReadonly) return;
 		if (e.key === kbd.ENTER) {
 			e.preventDefault();
-			if (this.opts.type.current === 'submit') {
+			if (this.opts.type === 'submit') {
 				const form = e.currentTarget.closest('form');
 				form?.requestSubmit();
 			}
@@ -148,17 +138,17 @@ export class CheckboxRootState {
 	}
 
 	#toggle() {
-		if (this.opts.indeterminate.current) {
-			this.opts.indeterminate.current = false;
-			this.opts.checked.current = true;
+		if (this.opts.indeterminate) {
+			this.opts.indeterminate = false;
+			this.opts.checked = true;
 		} else {
-			this.opts.checked.current = !this.opts.checked.current;
+			this.opts.checked = !this.opts.checked;
 		}
 	}
 
 	onclick(e: BitsMouseEvent) {
 		if (this.trueDisabled || this.trueReadonly) return;
-		if (this.opts.type.current === 'submit') {
+		if (this.opts.type === 'submit') {
 			this.#toggle();
 			return;
 		}
@@ -167,23 +157,23 @@ export class CheckboxRootState {
 	}
 
 	readonly snippetProps = $derived.by(() => ({
-		checked: this.opts.checked.current,
-		indeterminate: this.opts.indeterminate.current,
+		checked: this.opts.checked,
+		indeterminate: this.opts.indeterminate,
 	}));
 
 	readonly props = $derived.by(
 		() =>
 			({
-				id: this.opts.id.current,
+				id: this.opts.id,
 				role: 'checkbox',
-				type: this.opts.type.current,
+				type: this.opts.type,
 				disabled: this.trueDisabled,
-				'aria-checked': getAriaChecked(this.opts.checked.current, this.opts.indeterminate.current),
+				'aria-checked': getAriaChecked(this.opts.checked, this.opts.indeterminate),
 				'aria-required': boolToStr(this.trueRequired),
 				'aria-readonly': boolToStr(this.trueReadonly),
 				'data-disabled': boolToEmptyStrOrUndef(this.trueDisabled),
 				'data-readonly': boolToEmptyStrOrUndef(this.trueReadonly),
-				'data-state': getCheckboxDataState(this.opts.checked.current, this.opts.indeterminate.current),
+				'data-state': getCheckboxDataState(this.opts.checked, this.opts.indeterminate),
 				[checkboxAttrs.root]: '',
 				//
 				onclick: this.onclick,

package/src/lib/components/checkbox/components/checkbox-group-label.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { boxWith } from '../../../internal/tools/index.js';
 	import { mergeProps } from '../../../internal/merge-props.js';
 	import type { CheckboxGroupLabelProps } from '../types.js';
 	import { CheckboxGroupLabelState } from '../checkbox.svelte.js';
@@ -10,11 +9,15 @@
 	let { ref = $bindable(null), id = createId(uid), child, children, ...restProps }: CheckboxGroupLabelProps = $props();
 
 	const labelState = CheckboxGroupLabelState.create({
-		id: boxWith(() => id),
-		ref: boxWith(
-			() => ref,
-			(v) => (ref = v),
-		),
+		get id() {
+			return id;
+		},
+		get ref() {
+			return ref;
+		},
+		set ref(v) {
+			ref = v;
+		},
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, labelState.props));

package/src/lib/components/checkbox/components/checkbox-group.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { bindableWith, boxWith } from '../../../internal/tools/index.js';
 	import { mergeProps } from '../../../internal/merge-props.js';
 	import type { CheckboxGroupProps } from '../types.js';
 	import { CheckboxGroupState } from '../checkbox.svelte.js';
@@ -21,19 +20,31 @@
 	}: CheckboxGroupProps = $props();
 
 	const groupState = CheckboxGroupState.create({
-		id: boxWith(() => id),
-		ref: bindableWith(
-			() => ref,
-			(v) => (ref = v),
-		),
-		disabled: boxWith(() => Boolean(disabled)),
-		required: boxWith(() => Boolean(required)),
-		readonly: boxWith(() => Boolean(readonly)),
-		value: bindableWith(
-			() => $state.snapshot(value),
-			(v) => (value = $state.snapshot(v)),
-			(v) => onValueChange(v),
-		),
+		get id() {
+			return id;
+		},
+		get disabled() {
+			return Boolean(disabled);
+		},
+		get required() {
+			return Boolean(required);
+		},
+		get readonly() {
+			return Boolean(readonly);
+		},
+		get value() {
+			return $state.snapshot(value);
+		},
+		set value(v) {
+			value = $state.snapshot(v);
+			onValueChange(v);
+		},
+		get ref() {
+			return ref;
+		},
+		set ref(v) {
+			ref = v;
+		},
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, groupState.props));