sheer-ui 0.4.0 → 0.4.2

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-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(

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

@@ -1,16 +1,10 @@
 import { createContext } from 'svelte';
-import { type ReadableBox, type ReadableBoxedValues, type WritableBox, attachRef } from '../../internal/tools/index.js';
+import { attachRef } from '../../internal/tools/index.js';
 import { createBitsAttrs, boolToEmptyStrOrUndef } from '../../internal/attrs.js';
 import type { Orientation } from '../../internal/index.js';
-import type { RefAttachment, WithRefOpts } from '../../internal/types.js';
-import { RovingFocusGroup } from '../../internal/roving-focus-group.js';
-import {
-	type SelectionGroup,
-	type SelectionItemOpts,
-	type SelectionType,
-	SelectionItemState,
-	SelectionValue,
-} from '../../internal/selection.svelte.js';
+import type { RefAttachment } from '../../internal/types.js';
+import { RovingFocusGroup } from '../../internal/roving-focus-group.svelte.js';
+import { type SelectionGroup, type SelectionItemOpts, SelectionItemState, SelectionValue } from '../../internal/selection.svelte.js';
 
 export const toggleGroupAttrs = createBitsAttrs({
 	component: 'toggle-group',
@@ -19,17 +13,15 @@ export const toggleGroupAttrs = createBitsAttrs({
 
 const [getToggleGroupRoot, setToggleGroupRoot] = createContext<ToggleGroupRootState>();
 
-interface ToggleGroupRootStateOpts
-	extends
-		WithRefOpts,
-		ReadableBoxedValues<{
-			disabled: boolean;
-			rovingFocus: boolean;
-			loop: boolean;
-			orientation: Orientation;
-		}> {
-	type: SelectionType;
-	value: WritableBox<string | string[]>;
+/** The root component's props as accessors over its `$props()`; `ref` writes back to its bindable. */
+interface ToggleGroupRootStateOpts {
+	readonly id: string;
+	readonly disabled: boolean;
+	readonly rovingFocus: boolean;
+	readonly loop: boolean;
+	readonly orientation: Orientation;
+	ref: HTMLElement | null;
+	selection: SelectionValue;
 }
 
 export class ToggleGroupRootState implements SelectionGroup {
@@ -38,36 +30,42 @@ export class ToggleGroupRootState implements SelectionGroup {
 	}
 	readonly opts: ToggleGroupRootStateOpts;
 	readonly selection: SelectionValue;
-	readonly disabled: ReadableBox<boolean>;
-	readonly orientation: ReadableBox<Orientation>;
-	readonly rovingFocus: ReadableBox<boolean>;
 	readonly rovingFocusGroup: RovingFocusGroup;
 	readonly selectionTakesTabStop = true;
 	readonly attachment: RefAttachment;
 
 	constructor(opts: ToggleGroupRootStateOpts) {
 		this.opts = opts;
-		this.selection = new SelectionValue(opts.type, opts.value);
-		this.disabled = opts.disabled;
-		this.orientation = opts.orientation;
-		this.rovingFocus = opts.rovingFocus;
-		this.attachment = attachRef(opts.ref);
+		this.selection = opts.selection;
+		this.attachment = attachRef<HTMLElement>((v) => (opts.ref = v));
 		this.rovingFocusGroup = new RovingFocusGroup({
 			candidateAttr: toggleGroupAttrs.item,
-			rootNode: opts.ref,
-			loop: opts.loop,
-			orientation: opts.orientation,
+			rootNode: () => opts.ref,
+			loop: () => opts.loop,
+			orientation: () => opts.orientation,
 		});
 	}
 
+	get disabled() {
+		return this.opts.disabled;
+	}
+
+	get orientation() {
+		return this.opts.orientation;
+	}
+
+	get rovingFocus() {
+		return this.opts.rovingFocus;
+	}
+
 	readonly props = $derived.by(
 		() =>
 			({
-				id: this.opts.id.current,
+				id: this.opts.id,
 				[toggleGroupAttrs.root]: '',
 				role: 'group',
-				'data-orientation': this.opts.orientation.current,
-				'data-disabled': boolToEmptyStrOrUndef(this.opts.disabled.current),
+				'data-orientation': this.opts.orientation,
+				'data-disabled': boolToEmptyStrOrUndef(this.opts.disabled),
 				...this.attachment,
 			}) as const,
 	);

package/src/lib/components/toolbar/components/toolbar-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 { ToolbarGroupItemProps } from '../types.js';
 	import { createToolbarGroupItem } from '../toolbar.svelte.js';
@@ -25,13 +24,21 @@
 	} = $props();
 
 	const groupItemState = createToolbarGroupItem({
-		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/toolbar/components/toolbar-group.svelte

@@ -1,7 +1,6 @@
 <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 { ToolbarGroupProps } from '../types.js';
 	import { ToolbarGroupState } from '../toolbar.svelte.js';
@@ -21,10 +20,10 @@
 		...restProps
 	}: ToolbarGroupProps = $props();
 
-	// 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,
 		() => {
@@ -33,10 +32,20 @@
 	);
 
 	const groupState = ToolbarGroupState.create({
-		id: boxWith(() => id),
-		disabled: boxWith(() => disabled),
-		type: valueType,
-		value: boxWith(
+		get id() {
+			return id;
+		},
+		get disabled() {
+			return disabled;
+		},
+		get ref() {
+			return ref;
+		},
+		set ref(v) {
+			ref = v;
+		},
+		selection: new SelectionValue(
+			valueType,
 			() => value ?? emptySelection(valueType),
 			(v) => {
 				value = v;
@@ -44,10 +53,6 @@
 				onValueChange(v as any);
 			},
 		),
-		ref: boxWith(
-			() => ref,
-			(v) => (ref = v),
-		),
 	});
 
 	const mergedProps = $derived(mergeProps({ 'data-slot': 'toolbar-group', class: 'flex items-center gap-1' }, restProps, groupState.props));