sheer-ui 0.3.1 → 0.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sheer-ui",
-	"version": "0.3.1",
+	"version": "0.4.2",
 	"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/checkbox/components/checkbox-group.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { bindableWith, boxWith } from '../../../internal/tools/index.js';
+	import { 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';
@@ -22,17 +22,19 @@
 
 	const groupState = CheckboxGroupState.create({
 		id: boxWith(() => id),
-		ref: bindableWith(
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v),
 		),
 		disabled: boxWith(() => Boolean(disabled)),
 		required: boxWith(() => Boolean(required)),
 		readonly: boxWith(() => Boolean(readonly)),
-		value: bindableWith(
+		value: boxWith(
 			() => $state.snapshot(value),
-			(v) => (value = $state.snapshot(v)),
-			(v) => onValueChange(v),
+			(v) => {
+				value = $state.snapshot(v);
+				onValueChange(v);
+			},
 		),
 	});
 

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 { boxWith, 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,23 +30,27 @@
 	}: CheckboxRootProps = $props();
 
 	const rootState = CheckboxRootState.create({
-		checked: bindableWith(
+		checked: boxWith(
 			() => checked,
-			(v) => (checked = v),
-			(v) => onCheckedChange?.(v),
+			(v) => {
+				checked = v;
+				onCheckedChange?.(v);
+			},
 		),
 		disabled: boxWith(() => disabled ?? false),
 		required: boxWith(() => required),
 		value: boxWith(() => value),
 		id: boxWith(() => id),
-		ref: bindableWith(
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v),
 		),
-		indeterminate: bindableWith(
+		indeterminate: boxWith(
 			() => indeterminate,
-			(v) => (indeterminate = v),
-			(v) => onIndeterminateChange?.(v),
+			(v) => {
+				indeterminate = v;
+				onIndeterminateChange?.(v);
+			},
 		),
 		type: boxWith(() => type),
 		readonly: boxWith(() => Boolean(readonly)),

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/data-table/table-faceted-filter.svelte

@@ -74,7 +74,7 @@
 									selectedValues.add(option.value);
 								}
 								const filterValues = Array.from(selectedValues);
-								column?.setFilterValue(filterValues.length ? filterValues : undefined);
+								column.filterValue = filterValues.length ? filterValues : undefined;
 							}}>
 							<div
 								class={[
@@ -100,7 +100,7 @@
 				{#if selectedValues.size > 0}
 					<Command.Separator />
 					<Command.Group>
-						<Command.Item onSelect={() => column?.setFilterValue(undefined)} class="justify-center text-center">Clear filters</Command.Item>
+						<Command.Item onSelect={() => (column.filterValue = undefined)} class="justify-center text-center">Clear filters</Command.Item>
 					</Command.Group>
 				{/if}
 			</Command.List>

package/src/lib/components/data-table/table-toolbar.svelte

@@ -25,16 +25,16 @@
 	} = $props();
 
 	const isFiltered = $derived(table.columnFilters.length > 0);
+	const search = $derived(searchColumn === undefined ? undefined : table.column(searchColumn));
 </script>
 
 <div class="flex items-center justify-between">
-	{#if searchColumn}
+	{#if search}
 		<Input
 			{disabled}
 			placeholder={searchPlaceholder ?? 'Filter...'}
-			value={(table.column(searchColumn)?.filterValue as string) ?? ''}
-			oninput={(e) => table.column(searchColumn)?.setFilterValue(e.currentTarget.value)}
-			onchange={(e) => table.column(searchColumn)?.setFilterValue(e.currentTarget.value)}
+			value={(search.filterValue as string) ?? ''}
+			oninput={(e) => (search.filterValue = e.currentTarget.value)}
 			class="h-8 w-37.5 lg:w-62.5" />
 	{/if}
 	<div class="flex items-center space-x-2">
@@ -46,7 +46,7 @@
 		{/each}
 
 		{#if isFiltered}
-			<Button variant="ghost" {disabled} onclick={() => table.resetColumnFilters()} class="h-8! px-2! lg:px-3!">
+			<Button variant="ghost" {disabled} onclick={() => (table.columnFilters = [])} class="h-8! px-2! lg:px-3!">
 				Reset
 				<XIcon />
 			</Button>

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/menu/components/menu-checkbox-group.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { bindableWith, boxWith } from '../../../internal/tools/index.js';
+	import { boxWith } from '../../../internal/tools/index.js';
 	import { mergeProps } from '../../../internal/merge-props.js';
 	import type { MenuCheckboxGroupProps } from '../types.js';
 	import { MenuCheckboxGroupState } from '../menu.svelte.js';
@@ -18,10 +18,12 @@
 	}: MenuCheckboxGroupProps = $props();
 
 	const checkboxGroupState = MenuCheckboxGroupState.create({
-		value: bindableWith(
+		value: boxWith(
 			() => $state.snapshot(value),
-			(v) => (value = $state.snapshot(v)),
-			(v) => onValueChange(v),
+			(v) => {
+				value = $state.snapshot(v);
+				onValueChange(v);
+			},
 		),
 		ref: boxWith(
 			() => ref,

package/src/lib/components/menu/components/menu-checkbox-item.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { join } from 'overrule';
-	import { bindableWith, boxWith, repairBindable } from '../../../internal/tools/index.js';
+	import { boxWith, repairBindable } from '../../../internal/tools/index.js';
 	import { mergeProps } from '../../../internal/merge-props.js';
 	import type { MenuCheckboxItemProps } from '../types.js';
 	import { MenuCheckboxItemState } from '../menu.svelte.js';
@@ -26,10 +26,12 @@
 	}: MenuCheckboxItemProps = $props();
 
 	const checkboxItemState = MenuCheckboxItemState.create({
-		checked: bindableWith(
+		checked: boxWith(
 			() => checked,
-			(v) => (checked = v),
-			(v) => onCheckedChange(v),
+			(v) => {
+				checked = v;
+				onCheckedChange(v);
+			},
 		),
 		id: boxWith(() => id),
 		disabled: boxWith(() => disabled),
@@ -38,10 +40,12 @@
 			() => ref,
 			(v) => (ref = v),
 		),
-		indeterminate: bindableWith(
+		indeterminate: boxWith(
 			() => indeterminate,
-			(v) => (indeterminate = v),
-			(v) => onIndeterminateChange(v),
+			(v) => {
+				indeterminate = v;
+				onIndeterminateChange(v);
+			},
 		),
 		value: boxWith(() => value),
 	});

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

@@ -4,11 +4,11 @@ import {
 	getWindow,
 	type ReadableBoxedValues,
 	type WritableBoxedValues,
-	simpleBox,
 	boxWith,
 	type ReadableBox,
 } from '../../internal/tools/index.js';
 import { mergeProps } from '../../internal/merge-props.js';
+import type { Measurable } from '../../internal/floating-layer/index.js';
 import { createContext, onDestroy, tick, untrack } from 'svelte';
 import { SUB_OPEN_KEYS, getCheckedState, isMouseEvent } from './utils.js';
 import { focusFirst } from '../../internal/focus.js';
@@ -35,7 +35,7 @@ import type { Direction } from '../../internal/index.js';
 import { getTabbableFrom, isTabbable } from '../../internal/tabbable.js';
 import type { KeyboardEventHandler, PointerEventHandler, MouseEventHandler } from 'svelte/elements';
 import { Typeahead, textContentOf } from '../../internal/typeahead.svelte.js';
-import { RovingFocusGroup } from '../../internal/roving-focus-group.js';
+import { RovingFocusGroup } from '../../internal/roving-focus-group.svelte.js';
 import { useOpenChangeComplete } from '../../internal/animations-settled.svelte.js';
 import { joinGroup } from '../../internal/group-value.svelte.js';
 import { createEffectTimeout } from '../../internal/timeout-fn.svelte.js';
@@ -601,10 +601,10 @@ export class MenuContentState {
 			getWindow: () => this.domContext.getWindow(),
 		});
 		this.rovingFocusGroup = new RovingFocusGroup({
-			rootNode: boxWith(() => this.parentMenu.contentNode),
+			rootNode: () => this.parentMenu.contentNode,
 			candidateSelector: this.#candidateSelector,
-			loop: this.opts.loop,
-			orientation: boxWith(() => 'vertical'),
+			loop: () => this.opts.loop.current,
+			orientation: () => 'vertical',
 		});
 
 		$effect(() => {
@@ -1461,11 +1461,11 @@ export class ContextMenuTriggerState {
 	readonly opts: ContextMenuTriggerStateOpts;
 	readonly parentMenu: MenuMenuState;
 	readonly attachment: RefAttachment;
-	#point = $state({ x: 0, y: 0 });
-
-	virtualElement = simpleBox({
+	#point = $state.raw({ x: 0, y: 0 });
+	// One stable Measurable: readers that measure inside a derived track `#point` through it.
+	readonly virtualElement: Measurable = {
 		getBoundingClientRect: () => DOMRect.fromRect({ width: 0, height: 0, ...this.#point }),
-	});
+	};
 	#longPressTimer = createEffectTimeout((e: BitsPointerEvent) => this.#handleOpen(e), () => 700);
 
 	constructor(opts: ContextMenuTriggerStateOpts, parentMenu: MenuMenuState) {
@@ -1478,15 +1478,6 @@ export class ContextMenuTriggerState {
 		this.onpointercancel = this.onpointercancel.bind(this);
 		this.onpointerup = this.onpointerup.bind(this);
 
-		$effect(() => {
-			const point = this.#point;
-			untrack(() => {
-				this.virtualElement.current = {
-					getBoundingClientRect: () => DOMRect.fromRect({ width: 0, height: 0, ...point }),
-				};
-			});
-		});
-
 		$effect(() => {
 			const isDisabled = this.opts.disabled.current;
 			untrack(() => {

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

@@ -1,4 +1,4 @@
-import { type ReadableBox, boxWith, attachRef, type ReadableBoxedValues, type WritableBoxedValues } from '../../internal/tools/index.js';
+import { type ReadableBox, attachRef, type ReadableBoxedValues, type WritableBoxedValues } from '../../internal/tools/index.js';
 import type { InteractOutsideBehaviorType } from '../../internal/dismissible-layer/types.js';
 import type { Direction } from '../../internal/index.js';
 import { createBitsAttrs, boolToStr, boolToEmptyStrOrUndef, getDataOpenClosed } from '../../internal/attrs.js';
@@ -7,7 +7,7 @@ import type { OnChangeFn, RefAttachment, WithRefOpts } from '../../internal/type
 import { createContext, onMount, tick, untrack } from 'svelte';
 import type { FocusEventHandler, KeyboardEventHandler, PointerEventHandler } from 'svelte/elements';
 import { getFloatingContentCSSVars } from '../../internal/floating-layer/index.js';
-import { RovingFocusGroup } from '../../internal/roving-focus-group.js';
+import { RovingFocusGroup } from '../../internal/roving-focus-group.svelte.js';
 import { RovingFocusItem } from '../../internal/roving-focus-item.svelte.js';
 
 const menubarAttrs = createBitsAttrs({
@@ -45,10 +45,10 @@ export class MenubarRootState {
 		this.opts = opts;
 		this.attachment = attachRef(this.opts.ref);
 		this.rovingFocusGroup = new RovingFocusGroup({
-			rootNode: this.opts.ref,
+			rootNode: () => this.opts.ref.current,
 			candidateAttr: menubarAttrs.trigger,
-			loop: this.opts.loop,
-			orientation: boxWith(() => 'horizontal'),
+			loop: () => this.opts.loop.current,
+			orientation: () => 'horizontal',
 		});
 	}
 
@@ -203,7 +203,8 @@ export class MenubarTriggerState {
 		this.root = menu.root;
 		this.rovingItem = new RovingFocusItem({
 			group: this.root.rovingFocusGroup,
-			ref: this.opts.ref,
+			ref: () => this.opts.ref.current,
+			setRef: (v) => (this.opts.ref.current = v),
 			onRefChange: (v) => (this.menu.triggerNode = v),
 		});
 

package/src/lib/components/navigation-menu/components/navigation-menu-content.svelte

@@ -53,6 +53,6 @@
 	);
 </script>
 
-<Portal to={contentState.context.viewportRef.current || undefined} disabled={!contentState.context.viewportRef.current}>
+<Portal to={contentState.context.viewportRef || undefined} disabled={!contentState.context.viewportRef}>
 	<NavigationMenuContentImpl {...mergedProps} {children} {child} />
 </Portal>

package/src/lib/components/navigation-menu/components/navigation-menu-indicator.svelte

@@ -41,8 +41,8 @@
 	);
 </script>
 
-{#if indicatorState.context.indicatorTrackRef.current}
-	<Portal to={indicatorState.context.indicatorTrackRef.current}>
+{#if indicatorState.context.indicatorTrackRef}
+	<Portal to={indicatorState.context.indicatorTrackRef}>
 		<NavigationMenuIndicatorImpl {...mergedProps} {id} bind:ref {child}>
 			{#snippet children()}
 				{#if children}

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

@@ -74,7 +74,7 @@
 	<!-- focus proxy: visually hidden (the sr-only utility) but focusable, for nav-menu focus management -->
 	<span {...mergeProps(triggerState.focusProxyProps, mounted, { class: 'sr-only' })}></span>
 
-	{#if triggerState.context.viewportRef.current}
+	{#if triggerState.context.viewportRef}
 		<span aria-owns={triggerState.itemContext.contentId ?? undefined}></span>
 	{/if}
 {/if}