sheer-ui 0.4.0 → 0.4.3

package/src/lib/components/tabs/components/tabs-list.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { boxWith } from '../../../internal/tools/index.js';
 	import { mergeProps } from '../../../internal/merge-props.js';
 	import type { TabsListProps } from '../types.js';
 	import { TabsListState } from '../tabs.svelte.js';
@@ -10,11 +9,15 @@
 	let { child, children, id = createId(uid), ref = $bindable(null), ...restProps }: TabsListProps = $props();
 
 	const listState = TabsListState.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/tabs/components/tabs-trigger.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { boxWith } from '../../../internal/tools/index.js';
 	import { mergeProps } from '../../../internal/merge-props.js';
 	import type { TabsTriggerProps } from '../types.js';
 	import { TabsTriggerState } from '../tabs.svelte.js';
@@ -19,13 +18,21 @@
 	}: TabsTriggerProps = $props();
 
 	const triggerState = TabsTriggerState.create({
-		id: boxWith(() => id),
-		disabled: boxWith(() => disabled ?? false),
-		value: boxWith(() => value),
-		ref: boxWith(
-			() => ref,
-			(v) => (ref = v),
-		),
+		get id() {
+			return id;
+		},
+		get disabled() {
+			return disabled ?? false;
+		},
+		get value() {
+			return value;
+		},
+		get ref() {
+			return ref;
+		},
+		set ref(v) {
+			ref = v;
+		},
 	});
 
 	const mergedProps = $derived(

package/src/lib/components/tabs/components/tabs.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { boxWith } from '../../../internal/tools/index.js';
 	import { mergeProps } from '../../../internal/merge-props.js';
 	import type { TabsRootProps } from '../types.js';
 	import { TabsRootState } from '../tabs.svelte.js';
@@ -22,22 +21,34 @@
 	}: TabsRootProps = $props();
 
 	const rootState = TabsRootState.create({
-		id: boxWith(() => id),
-		value: boxWith(
-			() => value,
-			(v) => {
-				value = v;
-				onValueChange(v);
-			},
-		),
-		orientation: boxWith(() => orientation),
-		loop: boxWith(() => loop),
-		activationMode: boxWith(() => activationMode),
-		disabled: boxWith(() => disabled),
-		ref: boxWith(
-			() => ref,
-			(v) => (ref = v),
-		),
+		get id() {
+			return id;
+		},
+		get value() {
+			return value;
+		},
+		set value(v) {
+			value = v;
+			onValueChange(v);
+		},
+		get orientation() {
+			return orientation;
+		},
+		get loop() {
+			return loop;
+		},
+		get activationMode() {
+			return activationMode;
+		},
+		get disabled() {
+			return disabled;
+		},
+		get ref() {
+			return ref;
+		},
+		set ref(v) {
+			ref = v;
+		},
 	});
 
 	const mergedProps = $derived(mergeProps({ 'data-slot': 'tabs', class: 'flex flex-col gap-2' }, restProps, rootState.props));

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

@@ -1,12 +1,12 @@
 import { createContext, untrack } from 'svelte';
 import { SvelteMap } from 'svelte/reactivity';
-import { attachRef, type ReadableBoxedValues, type WritableBoxedValues } from '../../internal/tools/index.js';
+import { attachRef } from '../../internal/tools/index.js';
 import type { TabsActivationMode } from './types.js';
 import { createBitsAttrs, boolToStr, boolToEmptyStrOrUndef, boolToTrueOrUndef } from '../../internal/attrs.js';
 import { kbd } from '../../internal/kbd.js';
-import type { BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, RefAttachment, WithRefOpts } from '../../internal/types.js';
+import type { BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, RefAttachment, RefOpts } from '../../internal/types.js';
 import type { Orientation } from '../../internal/index.js';
-import { RovingFocusGroup } from '../../internal/roving-focus-group.js';
+import { RovingFocusGroup } from '../../internal/roving-focus-group.svelte.js';
 
 const tabsAttrs = createBitsAttrs({
 	component: 'tabs',
@@ -15,18 +15,13 @@ const tabsAttrs = createBitsAttrs({
 
 const [getTabsRoot, setTabsRoot] = createContext<TabsRootState>();
 
-interface TabsRootStateOpts
-	extends
-		WithRefOpts,
-		ReadableBoxedValues<{
-			orientation: Orientation;
-			loop: boolean;
-			activationMode: TabsActivationMode;
-			disabled: boolean;
-		}>,
-		WritableBoxedValues<{
-			value: string;
-		}> {}
+interface TabsRootStateOpts extends RefOpts {
+	readonly orientation: Orientation;
+	readonly loop: boolean;
+	readonly activationMode: TabsActivationMode;
+	readonly disabled: boolean;
+	value: string;
+}
 
 export class TabsRootState {
 	static create(opts: TabsRootStateOpts) {
@@ -43,12 +38,12 @@ export class TabsRootState {
 
 	constructor(opts: TabsRootStateOpts) {
 		this.opts = opts;
-		this.attachment = attachRef(opts.ref);
+		this.attachment = attachRef<HTMLElement>((v) => (opts.ref = v));
 		this.rovingFocusGroup = new RovingFocusGroup({
 			candidateAttr: tabsAttrs.trigger,
-			rootNode: this.opts.ref,
-			loop: this.opts.loop,
-			orientation: this.opts.orientation,
+			rootNode: () => opts.ref,
+			loop: () => opts.loop,
+			orientation: () => opts.orientation,
 		});
 	}
 
@@ -72,22 +67,18 @@ export class TabsRootState {
 		};
 	}
 
-	setValue(v: string) {
-		this.opts.value.current = v;
-	}
-
 	readonly props = $derived.by(
 		() =>
 			({
-				id: this.opts.id.current,
-				'data-orientation': this.opts.orientation.current,
+				id: this.opts.id,
+				'data-orientation': this.opts.orientation,
 				[tabsAttrs.root]: '',
 				...this.attachment,
 			}) as const,
 	);
 }
 
-interface TabsListStateOpts extends WithRefOpts {}
+interface TabsListStateOpts extends RefOpts {}
 
 export class TabsListState {
 	static create(opts: TabsListStateOpts) {
@@ -96,35 +87,31 @@ export class TabsListState {
 	readonly opts: TabsListStateOpts;
 	readonly root: TabsRootState;
 	readonly attachment: RefAttachment;
-	readonly #isDisabled = $derived.by(() => this.root.opts.disabled.current);
 
 	constructor(opts: TabsListStateOpts, root: TabsRootState) {
 		this.opts = opts;
 		this.root = root;
-		this.attachment = attachRef(opts.ref);
+		this.attachment = attachRef<HTMLElement>((v) => (opts.ref = v));
 	}
 
 	readonly props = $derived.by(
 		() =>
 			({
-				id: this.opts.id.current,
+				id: this.opts.id,
 				role: 'tablist',
-				'aria-orientation': this.root.opts.orientation.current,
-				'data-orientation': this.root.opts.orientation.current,
+				'aria-orientation': this.root.opts.orientation,
+				'data-orientation': this.root.opts.orientation,
 				[tabsAttrs.list]: '',
-				'data-disabled': boolToEmptyStrOrUndef(this.#isDisabled),
+				'data-disabled': boolToEmptyStrOrUndef(this.root.opts.disabled),
 				...this.attachment,
 			}) as const,
 	);
 }
 
-interface TabsTriggerStateOpts
-	extends
-		WithRefOpts,
-		ReadableBoxedValues<{
-			value: string;
-			disabled: boolean;
-		}> {}
+interface TabsTriggerStateOpts extends RefOpts {
+	readonly value: string;
+	readonly disabled: boolean;
+}
 
 export class TabsTriggerState {
 	static create(opts: TabsTriggerStateOpts) {
@@ -133,18 +120,18 @@ export class TabsTriggerState {
 	readonly opts: TabsTriggerStateOpts;
 	readonly root: TabsRootState;
 	readonly attachment: RefAttachment;
-	readonly #isActive = $derived.by(() => this.root.opts.value.current === this.opts.value.current);
-	readonly #tabIndex = $derived.by(() => (this.#isActive || !this.root.opts.value.current ? 0 : -1));
-	readonly #isDisabled = $derived.by(() => this.opts.disabled.current || this.root.opts.disabled.current);
-	readonly #ariaControls = $derived.by(() => this.root.valueToContentId.get(this.opts.value.current));
+	readonly #isActive = $derived.by(() => this.root.opts.value === this.opts.value);
+	readonly #tabIndex = $derived.by(() => (this.#isActive || !this.root.opts.value ? 0 : -1));
+	readonly #isDisabled = $derived.by(() => this.opts.disabled || this.root.opts.disabled);
+	readonly #ariaControls = $derived.by(() => this.root.valueToContentId.get(this.opts.value));
 
 	constructor(opts: TabsTriggerStateOpts, root: TabsRootState) {
 		this.opts = opts;
 		this.root = root;
-		this.attachment = attachRef(opts.ref);
+		this.attachment = attachRef<HTMLElement>((v) => (opts.ref = v));
 		$effect(() => {
-			const id = this.opts.id.current;
-			const value = this.opts.value.current;
+			const id = this.opts.id;
+			const value = this.opts.value;
 			return untrack(() => {
 				return this.root.registerTrigger(id, value);
 			});
@@ -156,12 +143,12 @@ export class TabsTriggerState {
 	}
 
 	#activate() {
-		if (this.root.opts.value.current === this.opts.value.current) return;
-		this.root.setValue(this.opts.value.current);
+		if (this.root.opts.value === this.opts.value) return;
+		this.root.opts.value = this.opts.value;
 	}
 
 	onfocus(_: BitsFocusEvent) {
-		if (this.root.opts.activationMode.current !== 'automatic' || this.#isDisabled) return;
+		if (this.root.opts.activationMode !== 'automatic' || this.#isDisabled) return;
 		this.#activate();
 	}
 
@@ -177,17 +164,17 @@ export class TabsTriggerState {
 			this.#activate();
 			return;
 		}
-		this.root.rovingFocusGroup.handleKeydown(this.opts.ref.current, e);
+		this.root.rovingFocusGroup.handleKeydown(this.opts.ref, e);
 	}
 
 	readonly props = $derived.by(
 		() =>
 			({
-				id: this.opts.id.current,
+				id: this.opts.id,
 				role: 'tab',
 				'data-state': getTabDataState(this.#isActive),
-				'data-value': this.opts.value.current,
-				'data-orientation': this.root.opts.orientation.current,
+				'data-value': this.opts.value,
+				'data-orientation': this.root.opts.orientation,
 				'data-disabled': boolToEmptyStrOrUndef(this.#isDisabled),
 				'aria-selected': boolToStr(this.#isActive),
 				'aria-controls': this.#ariaControls,
@@ -203,12 +190,9 @@ export class TabsTriggerState {
 	);
 }
 
-interface TabsContentStateOpts
-	extends
-		WithRefOpts,
-		ReadableBoxedValues<{
-			value: string;
-		}> {}
+interface TabsContentStateOpts extends RefOpts {
+	readonly value: string;
+}
 
 export class TabsContentState {
 	static create(opts: TabsContentStateOpts) {
@@ -217,16 +201,16 @@ export class TabsContentState {
 	readonly opts: TabsContentStateOpts;
 	readonly root: TabsRootState;
 	readonly attachment: RefAttachment;
-	readonly #isActive = $derived.by(() => this.root.opts.value.current === this.opts.value.current);
-	readonly #ariaLabelledBy = $derived.by(() => this.root.valueToTriggerId.get(this.opts.value.current));
+	readonly #isActive = $derived.by(() => this.root.opts.value === this.opts.value);
+	readonly #ariaLabelledBy = $derived.by(() => this.root.valueToTriggerId.get(this.opts.value));
 
 	constructor(opts: TabsContentStateOpts, root: TabsRootState) {
 		this.opts = opts;
 		this.root = root;
-		this.attachment = attachRef(opts.ref);
+		this.attachment = attachRef<HTMLElement>((v) => (opts.ref = v));
 		$effect(() => {
-			const id = this.opts.id.current;
-			const value = this.opts.value.current;
+			const id = this.opts.id;
+			const value = this.opts.value;
 			return untrack(() => {
 				return this.root.registerContent(id, value);
 			});
@@ -236,14 +220,14 @@ export class TabsContentState {
 	readonly props = $derived.by(
 		() =>
 			({
-				id: this.opts.id.current,
+				id: this.opts.id,
 				role: 'tabpanel',
 				hidden: boolToTrueOrUndef(!this.#isActive),
 				tabindex: 0,
-				'data-value': this.opts.value.current,
+				'data-value': this.opts.value,
 				'data-state': getTabDataState(this.#isActive),
 				'aria-labelledby': this.#ariaLabelledBy,
-				'data-orientation': this.root.opts.orientation.current,
+				'data-orientation': this.root.opts.orientation,
 				[tabsAttrs.content]: '',
 				...this.attachment,
 			}) as const,

package/src/lib/components/time-field/time-field.svelte.ts

@@ -6,7 +6,7 @@ import {
 	DOMContext,
 	type ReadableBoxedValues,
 	type WritableBoxedValues,
-	simpleBox,
+	boxWith,
 } from '../../internal/tools/index.js';
 import { createContext, onMount, untrack } from 'svelte';
 import type { BitsFocusEvent, BitsInputEvent, BitsKeyboardEvent, BitsMouseEvent, RefAttachment, WithRefOpts } from '../../internal/types.js';
@@ -196,7 +196,7 @@ export class TimeFieldRootState<T extends TimeValue = Time> {
 		 */
 		this.value = props.value;
 		this.placeholder = rangeRoot ? rangeRoot.opts.placeholder : props.placeholder;
-		this.validate = rangeRoot ? simpleBox(undefined) : props.validate;
+		this.validate = rangeRoot ? boxWith(() => undefined) : props.validate;
 		this.minValue = rangeRoot ? rangeRoot.opts.minValue : props.minValue;
 		this.maxValue = rangeRoot ? rangeRoot.opts.maxValue : props.maxValue;
 		this.disabled = rangeRoot ? rangeRoot.opts.disabled : props.disabled;

package/src/lib/components/toggle/components/toggle.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { boxWith } from '../../../internal/tools/index.js';
 	import { mergeProps } from '../../../internal/merge-props.js';
 	import type { ToggleRootProps } from '../types.js';
 	import { ToggleRootState } from '../toggle.svelte.js';
@@ -26,19 +25,25 @@
 	} = $props();
 
 	const toggleState = ToggleRootState.create({
-		pressed: boxWith(
-			() => pressed,
-			(v) => {
-				pressed = v;
-				onPressedChange(v);
-			},
-		),
-		disabled: boxWith(() => disabled ?? false),
-		id: boxWith(() => id),
-		ref: boxWith(
-			() => ref,
-			(v) => (ref = v),
-		),
+		get pressed() {
+			return pressed;
+		},
+		set pressed(v) {
+			pressed = v;
+			onPressedChange(v);
+		},
+		get disabled() {
+			return disabled ?? false;
+		},
+		get id() {
+			return id;
+		},
+		get ref() {
+			return ref;
+		},
+		set ref(v) {
+			ref = v;
+		},
 	});
 
 	const mergedProps = $derived(

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

@@ -1,21 +1,16 @@
-import { attachRef, type ReadableBoxedValues, type WritableBoxedValues } from '../../internal/tools/index.js';
+import { attachRef } from '../../internal/tools/index.js';
 import { createBitsAttrs, boolToStr, boolToEmptyStrOrUndef, boolToTrueOrUndef } from '../../internal/attrs.js';
-import type { BitsMouseEvent, RefAttachment, WithRefOpts } from '../../internal/types.js';
+import type { BitsMouseEvent, RefAttachment, RefOpts } from '../../internal/types.js';
 
 export const toggleAttrs = createBitsAttrs({
 	component: 'toggle',
 	parts: ['root'],
 });
 
-interface ToggleRootStateOpts
-	extends
-		WithRefOpts,
-		ReadableBoxedValues<{
-			disabled: boolean;
-		}>,
-		WritableBoxedValues<{
-			pressed: boolean;
-		}> {}
+interface ToggleRootStateOpts extends RefOpts {
+	readonly disabled: boolean;
+	pressed: boolean;
+}
 
 export class ToggleRootState {
 	static create(opts: ToggleRootStateOpts) {
@@ -26,28 +21,28 @@ export class ToggleRootState {
 
 	constructor(opts: ToggleRootStateOpts) {
 		this.opts = opts;
-		this.attachment = attachRef(this.opts.ref);
+		this.attachment = attachRef<HTMLElement>((v) => (opts.ref = v));
 		this.onclick = this.onclick.bind(this);
 	}
 
 	onclick(_: BitsMouseEvent) {
-		if (this.opts.disabled.current) return;
-		this.opts.pressed.current = !this.opts.pressed.current;
+		if (this.opts.disabled) return;
+		this.opts.pressed = !this.opts.pressed;
 	}
 
 	readonly snippetProps = $derived.by(() => ({
-		pressed: this.opts.pressed.current,
+		pressed: this.opts.pressed,
 	}));
 
 	readonly props = $derived.by(
 		() =>
 			({
 				[toggleAttrs.root]: '',
-				id: this.opts.id.current,
-				'data-disabled': boolToEmptyStrOrUndef(this.opts.disabled.current),
-				'aria-pressed': boolToStr(this.opts.pressed.current),
-				'data-state': getToggleDataState(this.opts.pressed.current),
-				disabled: boolToTrueOrUndef(this.opts.disabled.current),
+				id: this.opts.id,
+				'data-disabled': boolToEmptyStrOrUndef(this.opts.disabled),
+				'aria-pressed': boolToStr(this.opts.pressed),
+				'data-state': getToggleDataState(this.opts.pressed),
+				disabled: boolToTrueOrUndef(this.opts.disabled),
 				onclick: this.onclick,
 				...this.attachment,
 			}) as const,

package/src/lib/components/toggle-group/components/toggle-group-item.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { boxWith } from '../../../internal/tools/index.js';
 	import { mergeProps } from '../../../internal/merge-props.js';
 	import type { ToggleGroupItemProps } from '../types.js';
 	import { createToggleGroupItem } from '../toggle-group.svelte.js';
@@ -28,13 +27,21 @@
 	const ctx = getToggleGroupCtx();
 
 	const itemState = createToggleGroupItem({
-		id: boxWith(() => id),
-		value: boxWith(() => value),
-		disabled: boxWith(() => disabled ?? false),
-		ref: boxWith(
-			() => ref,
-			(v) => (ref = v),
-		),
+		get id() {
+			return id;
+		},
+		get value() {
+			return value;
+		},
+		get disabled() {
+			return disabled ?? false;
+		},
+		get ref() {
+			return ref;
+		},
+		set ref(v) {
+			ref = v;
+		},
 	});
 
 	const mergedProps = $derived(

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

@@ -14,8 +14,8 @@
 
 <script lang="ts">
 	import { untrack } from 'svelte';
-	import { boxWith, repairBindable } from '../../../internal/tools/index.js';
-	import { emptySelection } from '../../../internal/selection.svelte.js';
+	import { repairBindable } from '../../../internal/tools/index.js';
+	import { SelectionValue, emptySelection } from '../../../internal/selection.svelte.js';
 	import { mergeProps } from '../../../internal/merge-props.js';
 	import type { ToggleGroupRootProps } from '../types.js';
 	import { ToggleGroupRootState } from '../toggle-group.svelte.js';
@@ -44,10 +44,10 @@
 	// Context for toggle group items (values are stable, no reactivity needed)
 	setToggleGroupCtx(untrack(() => ({ variant, size, spacing })));
 
-	// Mode is construction-static: the selection stays single or multiple for the group's life.
-	const valueType = untrack(() => type);
+	// Mode is fixed at mount: `value` keeps the shape it was declared with.
+	// svelte-ignore state_referenced_locally
+	const valueType = type;
 
-	// The group owns a mode-specific controlled value.
 	repairBindable(
 		() => value,
 		() => {
@@ -56,8 +56,29 @@
 	);
 
 	const rootState = ToggleGroupRootState.create({
-		id: boxWith(() => id),
-		value: boxWith(
+		get id() {
+			return id;
+		},
+		get disabled() {
+			return disabled;
+		},
+		get loop() {
+			return loop;
+		},
+		get orientation() {
+			return orientation;
+		},
+		get rovingFocus() {
+			return rovingFocus;
+		},
+		get ref() {
+			return ref;
+		},
+		set ref(v) {
+			ref = v;
+		},
+		selection: new SelectionValue(
+			valueType,
 			() => value ?? emptySelection(valueType),
 			(v) => {
 				value = v;
@@ -65,15 +86,6 @@
 				onValueChange(v as any);
 			},
 		),
-		disabled: boxWith(() => disabled),
-		loop: boxWith(() => loop),
-		orientation: boxWith(() => orientation),
-		rovingFocus: boxWith(() => rovingFocus),
-		type: valueType,
-		ref: boxWith(
-			() => ref,
-			(v) => (ref = v),
-		),
 	});
 
 	const mergedProps = $derived(