sheer-ui 0.4.0 → 0.4.3

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

@@ -2,7 +2,7 @@
 	// Checkbox (button): controlled / headless. A <button role=checkbox> for table
 	// select-all, JS-owned state, and Checkbox.Group. It does NOT submit in a form;
 	// use `CheckboxNative` (name/value) for form fields.
-	import { bindableWith, boxWith, repairBindable } from '../../../internal/tools/index.js';
+	import { repairBindable } from '../../../internal/tools/index.js';
 	import { mergeProps } from '../../../internal/merge-props.js';
 	import type { CheckboxRootProps } from '../types.js';
 	import { CheckboxRootState } from '../checkbox.svelte.js';
@@ -30,26 +30,44 @@
 	}: CheckboxRootProps = $props();
 
 	const rootState = CheckboxRootState.create({
-		checked: bindableWith(
-			() => checked,
-			(v) => (checked = v),
-			(v) => onCheckedChange?.(v),
-		),
-		disabled: boxWith(() => disabled ?? false),
-		required: boxWith(() => required),
-		value: boxWith(() => value),
-		id: boxWith(() => id),
-		ref: bindableWith(
-			() => ref,
-			(v) => (ref = v),
-		),
-		indeterminate: bindableWith(
-			() => indeterminate,
-			(v) => (indeterminate = v),
-			(v) => onIndeterminateChange?.(v),
-		),
-		type: boxWith(() => type),
-		readonly: boxWith(() => Boolean(readonly)),
+		get checked() {
+			return checked;
+		},
+		set checked(v) {
+			checked = v;
+			onCheckedChange?.(v);
+		},
+		get indeterminate() {
+			return indeterminate;
+		},
+		set indeterminate(v) {
+			indeterminate = v;
+			onIndeterminateChange?.(v);
+		},
+		get disabled() {
+			return disabled ?? false;
+		},
+		get required() {
+			return required;
+		},
+		get readonly() {
+			return Boolean(readonly);
+		},
+		get value() {
+			return value;
+		},
+		get type() {
+			return type;
+		},
+		get id() {
+			return id;
+		},
+		get ref() {
+			return ref;
+		},
+		set ref(v) {
+			ref = v;
+		},
 	});
 
 	repairBindable(rootState.groupChecked, () => (checked = rootState.groupChecked() ?? checked));

package/src/lib/components/combobox/components/combobox.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { untrack } from 'svelte';
 	import { type WritableBox, boxWith, repairBindable } from '../../../internal/tools/index.js';
 	import { OpenCell } from '../../../internal/open-cell.svelte.js';
 	import type { ComboboxRootProps } from '../types.js';
@@ -41,7 +40,8 @@
 	const cell = givenCell ?? new OpenCell(() => open);
 
 	const rootState = SelectRootState.create({
-		type: untrack(() => type),
+		// svelte-ignore state_referenced_locally
+		type,
 		value: boxWith(
 			() => value!,
 			(v) => {

package/src/lib/components/combobox/select/components/select.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { untrack } from 'svelte';
 	import FloatingLayer from '../../../../internal/floating-layer/components/floating-layer.svelte';
 	import { type WritableBox, boxWith, repairBindable } from '../../../../internal/tools/index.js';
 	import { OpenCell } from '../../../../internal/open-cell.svelte.js';
@@ -46,7 +45,8 @@
 	const select = givenCell ?? new OpenCell(() => open);
 
 	const rootState = SelectRootState.create({
-		type: untrack(() => type),
+		// svelte-ignore state_referenced_locally
+		type,
 		value: boxWith(
 			() => value!,
 			(v) => {

package/src/lib/components/context-menu/components/context-menu-trigger.svelte

@@ -34,7 +34,7 @@
 		),
 	);
 
-	setFloatingAnchor(triggerState.virtualElement);
+	setFloatingAnchor(() => triggerState.virtualElement);
 </script>
 
 {#if child}

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

@@ -8,7 +8,6 @@ import {
 	DOMContext,
 	type ReadableBoxedValues,
 	type WritableBoxedValues,
-	simpleBox,
 } from '../../internal/tools/index.js';
 import { createContext, onMount, untrack } from 'svelte';
 import type { DateRangeFieldRootState } from '../date-range-field/date-range-field.svelte.js';
@@ -193,7 +192,7 @@ export class DateFieldRootState {
 	states = initSegmentStates();
 	dayPeriodNode = $state<HTMLElement | null>(null);
 	rangeRoot: DateRangeFieldRootState | undefined = undefined;
-	#nameSource: ReadableBox<string> = simpleBox('');
+	#nameSource: ReadableBox<string> = boxWith(() => '');
 	get name() {
 		return this.#nameSource.current;
 	}
@@ -209,7 +208,7 @@ export class DateFieldRootState {
 		 */
 		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/dialog/components/dialog-close.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { boxWith } from '../../../internal/tools/index.js';
 	import { mergeProps } from '../../../internal/merge-props.js';
 	import { DialogCloseState } from '../dialog.svelte.js';
 	import type { DialogCloseProps } from '../types.js';
@@ -10,13 +9,19 @@
 	let { children, child, id = createId(uid), ref = $bindable(null), disabled = false, ...restProps }: DialogCloseProps = $props();
 
 	const closeState = DialogCloseState.create({
-		variant: boxWith(() => 'close'),
-		id: boxWith(() => id),
-		ref: boxWith(
-			() => ref,
-			(v) => (ref = v),
-		),
-		disabled: boxWith(() => Boolean(disabled)),
+		variant: 'close',
+		get id() {
+			return id;
+		},
+		get ref() {
+			return ref;
+		},
+		set ref(v) {
+			ref = v;
+		},
+		get disabled() {
+			return Boolean(disabled);
+		},
 	});
 
 	const mergedProps = $derived(mergeProps({ 'data-slot': 'dialog-close' }, restProps, closeState.props));

package/src/lib/components/dialog/components/dialog-content-headless.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { boxWith } from '../../../internal/tools/index.js';
 	import { mergeProps } from '../../../internal/merge-props.js';
 	import { DialogContentState } from '../dialog.svelte.js';
 	import type { DialogContentProps } from '../types.js';
@@ -35,17 +34,21 @@
 	}: DialogContentProps = $props();
 
 	const contentState = DialogContentState.create({
-		id: boxWith(() => id),
-		ref: boxWith(
-			() => ref,
-			(v) => (ref = v),
-		),
+		get id() {
+			return id;
+		},
+		get ref() {
+			return ref;
+		},
+		set ref(v) {
+			ref = v;
+		},
 	});
 
 	// Closed state, on this element only (DialogContentState.props is shared with the native
 	// modal surface). The scroll lock's body styles land a tick after opening, after vaul's
 	// open effect has snapshotted them, as they did when the mount gate flipped a flush later.
-	const mergedProps = $derived(mergeProps(restProps, contentState.props, { style: contentState.root.cell.open ? {} : { visibility: 'hidden' } }));
+	const mergedProps = $derived(mergeProps(restProps, contentState.props, { style: contentState.root.opts.open ? {} : { visibility: 'hidden' } }));
 
 	const escapeAttachment = escapeKeydownAttachment({
 		escapeKeydownBehavior: () => restProps.escapeKeydownBehavior ?? 'close',
@@ -54,7 +57,7 @@
 			if (e.defaultPrevented) return;
 			contentState.root.handleClose();
 		},
-		enabled: () => contentState.root.cell.open,
+		enabled: () => contentState.root.opts.open,
 	});
 
 	// Dialog content historically dropped the dismissible focus-capture props (its default-slot
@@ -68,12 +71,12 @@
 			contentState.root.handleClose();
 		},
 		onFocusOutside: () => restProps.onFocusOutside,
-		enabled: () => contentState.root.cell.open,
+		enabled: () => contentState.root.opts.open,
 	});
 
 	// Flags the open surface for the CSS text-selection guard in ui.css.
 	const textSelectionGuard = $derived(
-		contentState.root.cell.open && (restProps.preventOverflowTextSelection ?? true) ? { 'data-text-selection-guard': '' } : {},
+		contentState.root.opts.open && (restProps.preventOverflowTextSelection ?? true) ? { 'data-text-selection-guard': '' } : {},
 	);
 
 	// Spans `present` (open through the settled exit), the window element lifecycle used to
@@ -84,7 +87,7 @@
 	});
 
 	const focusScope = createFocusScopeProps({
-		enabled: () => contentState.root.cell.open,
+		enabled: () => contentState.root.opts.open,
 		trap: () => trapFocus,
 		loop: () => true,
 		onCloseAutoFocus: () => onCloseAutoFocus,

package/src/lib/components/dialog/components/dialog-description.svelte

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

package/src/lib/components/dialog/components/dialog-overlay.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { boxWith } from '../../../internal/tools/index.js';
 	import { mergeProps } from '../../../internal/merge-props.js';
 	import { DialogOverlayState } from '../dialog.svelte.js';
 	import type { DialogOverlayProps } from '../types.js';
@@ -10,16 +9,20 @@
 	let { id = createId(uid), child, children, ref = $bindable(null), ...restProps }: DialogOverlayProps = $props();
 
 	const overlayState = DialogOverlayState.create({
-		id: boxWith(() => id),
-		ref: boxWith(
-			() => ref,
-			(v) => (ref = v),
-		),
+		get id() {
+			return id;
+		},
+		get ref() {
+			return ref;
+		},
+		set ref(v) {
+			ref = v;
+		},
 	});
 
 	// Always mounted; closed is visibility:hidden here, and the adapter's exit (the drawer's fadeOut
 	// keyframe, the sheet's overlay-surface transition) holds it visible while it plays.
-	const mergedProps = $derived(mergeProps(restProps, overlayState.props, { style: overlayState.root.cell.open ? {} : { visibility: 'hidden' } }));
+	const mergedProps = $derived(mergeProps(restProps, overlayState.props, { style: overlayState.root.opts.open ? {} : { visibility: 'hidden' } }));
 </script>
 
 {#if child}

package/src/lib/components/dialog/components/dialog-title.svelte

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

package/src/lib/components/dialog/components/dialog-trigger.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { boxWith } from '../../../internal/tools/index.js';
 	import { mergeProps } from '../../../internal/merge-props.js';
 	import { DialogTriggerState } from '../dialog.svelte.js';
 	import type { DialogTriggerProps } from '../types.js';
@@ -10,12 +9,18 @@
 	let { id = createId(uid), ref = $bindable(null), children, child, disabled = false, ...restProps }: DialogTriggerProps = $props();
 
 	const triggerState = DialogTriggerState.create({
-		id: boxWith(() => id),
-		ref: boxWith(
-			() => ref,
-			(v) => (ref = v),
-		),
-		disabled: boxWith(() => Boolean(disabled)),
+		get id() {
+			return id;
+		},
+		get ref() {
+			return ref;
+		},
+		set ref(v) {
+			ref = v;
+		},
+		get disabled() {
+			return Boolean(disabled);
+		},
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, triggerState.props));

package/src/lib/components/dialog/components/dialog.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { boxWith } from '../../../internal/tools/index.js';
 	import { DialogRootState, DialogState } from '../dialog.svelte.js';
 	import type { DialogRootProps } from '../types.js';
 
@@ -12,9 +11,16 @@
 	// svelte-ignore state_referenced_locally
 	const dialog = state ?? new DialogState(() => open);
 	DialogRootState.create({
-		variant: boxWith(() => 'dialog'),
-		cell: dialog,
-		onOpenChangeComplete: boxWith(() => onOpenChangeComplete),
+		variant: 'dialog',
+		get open() {
+			return dialog.open;
+		},
+		set open(v) {
+			dialog.open = v;
+		},
+		get onOpenChangeComplete() {
+			return onOpenChangeComplete;
+		},
 	});
 </script>
 

package/src/lib/components/dialog/components/modal-surface.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import type { HTMLDialogAttributes } from 'svelte/elements';
-	import { boxWith } from '../../../internal/tools/index.js';
 	import { mergeProps } from '../../../internal/merge-props.js';
 	import { DialogContentState } from '../dialog.svelte.js';
 	import type { DialogContentProps, DialogPortalProps } from '../types.js';
@@ -84,11 +83,15 @@
 	} = $props();
 
 	const contentState = DialogContentState.create({
-		id: boxWith(() => id),
-		ref: boxWith(
-			() => ref,
-			(v) => (ref = v),
-		),
+		get id() {
+			return id;
+		},
+		get ref() {
+			return ref;
+		},
+		set ref(v) {
+			ref = v;
+		},
 	});
 
 	// Bridge the shared root `open` to the native top-layer API and mirror native dismissal back
@@ -99,7 +102,7 @@
 	// `contentNode` (set by DialogContentState) and fires it once the <dialog>'s animations
 	// settle (useOpenChangeComplete) — a listener here would double-fire it.
 	const controllerAttachment = nativeDialogControllerAttachment({
-		open: () => contentState.root.cell.open,
+		open: () => contentState.root.opts.open,
 		onClose: () => contentState.root.handleClose(),
 		// the controller takes this as a plain, non-reactive value — fixed per adapter at mount
 		// svelte-ignore state_referenced_locally
@@ -113,7 +116,7 @@
 
 	// The <dialog> persists across open/close, so the lock gates on the cell's open, not element lifecycle.
 	const scrollLock = scrollLockAttachment({
-		enabled: () => contentState.root.cell.open && preventScroll,
+		enabled: () => contentState.root.opts.open && preventScroll,
 		restoreScrollDelay: () => restoreScrollDelay,
 	});