@proyecto-viviana/solid-stately 0.6.0-rc.0 → 0.6.0-rc.2

package/dist/index.js

@@ -145,7 +145,19 @@
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */
+/*
+* Copyright 2023 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
 // Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/menu/useMenuTriggerState.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/menu/useSubmenuTriggerState.ts
 /*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -683,6 +695,13 @@ function isAccessor(value) {
 	return typeof value === "function";
 }
 /**
+* Resolve a props bag once. Later reads call the accessor directly, so a
+* function-valued field such as `getKey` is never treated as the bag.
+*/
+function propsAccessor(props) {
+	return typeof props === "function" ? props : () => props;
+}
+/**
 * Headless state is written from factory setup and from public setters that
 * tests (and some call sites) invoke inside `createRoot` / a component body.
 * Solid 2 throws on those writes unless the signal opts into `ownedWrite`.
@@ -737,12 +756,19 @@ function useContextOptional(context) {
 //#endregion
 //#region src/toggle/createToggleState.ts
 /**
+* Toggle state for Solid Stately
+*
+* Provides state management for toggle components like checkboxes and switches.
+*
+* This is a 1:1 port of @react-stately/toggle's useToggleState.
+*/
+/**
 * Provides state management for toggle components like checkboxes and switches.
 */
 function createToggleState(props = {}) {
 	const getProps = () => access(props);
-	const initialProps = getProps();
-	const initialSelected = initialProps.isSelected ?? initialProps.defaultSelected ?? false;
+	const initialDefaultSelected = untrack(() => getProps().defaultSelected);
+	const initialSelected = untrack(() => getProps().isSelected) ?? initialDefaultSelected ?? false;
 	const [internalSelected, setInternalSelected] = createInternalSignal(initialSelected);
 	const isControlled = () => getProps().isSelected !== void 0;
 	const isSelected = () => {
@@ -762,13 +788,21 @@ function createToggleState(props = {}) {
 	}
 	return {
 		isSelected,
-		defaultSelected: initialProps.defaultSelected ?? initialSelected,
+		defaultSelected: initialDefaultSelected ?? initialSelected,
 		setSelected,
 		toggle
 	};
 }
 //#endregion
 //#region src/toggle/createToggleGroupState.ts
+/**
+* Toggle group state for Solid Stately
+*
+* Provides state management for groups of toggle buttons with
+* single or multiple selection.
+*
+* This is a port of @react-stately/toggle's useToggleGroupState.
+*/
 function toKeySet(keys) {
 	return new Set(keys ? Array.from(keys) : []);
 }
@@ -777,7 +811,7 @@ function toKeySet(keys) {
 */
 function createToggleGroupState(props = {}) {
 	const getProps = () => access(props);
-	const [internalSelectedKeys, setInternalSelectedKeys] = createInternalSignal(toKeySet(getProps().defaultSelectedKeys));
+	const [internalSelectedKeys, setInternalSelectedKeys] = createInternalSignal(toKeySet(untrack(() => getProps().defaultSelectedKeys)));
 	const isControlled = () => getProps().selectedKeys !== void 0;
 	const selectedKeys = () => isControlled() ? toKeySet(getProps().selectedKeys) : internalSelectedKeys();
 	function setSelectedKeys(keys) {
@@ -862,13 +896,23 @@ function createAutocompleteState(props = {}) {
 //#endregion
 //#region src/textfield/createTextFieldState.ts
 /**
+* TextField state for Solid Stately
+*
+* Provides state management for text input components.
+*
+* This is a port of @react-stately/utils's useControlledState pattern
+* as used by @react-aria/textfield.
+*/
+/**
 * Provides state management for text input components.
 * Supports both controlled and uncontrolled modes.
 */
 function createTextFieldState(props = {}) {
 	const getProps = () => access(props);
-	const initialProps = getProps();
-	const [internalValue, setInternalValue] = createInternalSignal(initialProps.value ?? initialProps.defaultValue ?? "");
+	const [internalValue, setInternalValue] = createInternalSignal(untrack(() => {
+		const initialProps = getProps();
+		return initialProps.value ?? initialProps.defaultValue ?? "";
+	}));
 	const isControlled = () => getProps().value !== void 0;
 	const value = () => {
 		const p = getProps();
@@ -886,6 +930,42 @@ function createTextFieldState(props = {}) {
 }
 //#endregion
 //#region src/tokenfield/TokenFieldValue.ts
+/** Represents a text selection in a TokenField. */
+var SelectedRange = class {
+	/** The anchor position. */
+	anchor;
+	/** The current (i.e. caret) position. */
+	current;
+	/**
+	* Creates a new selection range. If only a single position is provided, the selection is
+	* collapsed.
+	*/
+	constructor(anchor, current = anchor) {
+		this.anchor = anchor;
+		this.current = current;
+	}
+	/** Whether the selection is collapsed to a single caret position. */
+	get isCollapsed() {
+		return this.anchor.index === this.current.index && this.anchor.offset === this.current.offset;
+	}
+	/** The side of the selection closest to the start of the value. */
+	get start() {
+		return compare(this.anchor, this.current) < 0 ? this.anchor : this.current;
+	}
+	/** The side of the selection closest to the end of the value. */
+	get end() {
+		return compare(this.anchor, this.current) < 0 ? this.current : this.anchor;
+	}
+	/** Returns whether this selection is equal to another. */
+	isEqual(other) {
+		if (this === other) return true;
+		return this.anchor.index === other.anchor.index && this.anchor.offset === other.anchor.offset && this.current.index === other.current.index && this.current.offset === other.current.offset;
+	}
+};
+function compare(a, b) {
+	if (a.index === b.index) return a.offset - b.offset;
+	return a.index - b.index;
+}
 var Direction = /* @__PURE__ */ function(Direction) {
 	Direction[Direction["Forward"] = 1] = "Forward";
 	Direction[Direction["Backward"] = -1] = "Backward";
@@ -896,38 +976,43 @@ var Direction = /* @__PURE__ */ function(Direction) {
 */
 var TokenFieldValue = class {
 	static Direction = Direction;
+	static SelectedRange = SelectedRange;
 	/** The text and token segments in the list. */
 	segments;
-	/** The caret position. */
-	caretPosition = {
-		index: 0,
-		offset: 0
-	};
+	/** The selected range. */
+	selectedRange;
 	previous = null;
 	next = null;
 	isCoalescing = true;
 	/** Create a new list with the given segments. */
 	constructor(tokens, options) {
 		this.segments = tokens;
-		this.caretPosition = options?.caretPosition ?? {
+		this.selectedRange = options?.selectedRange ?? new SelectedRange({
 			index: 0,
 			offset: 0
-		};
+		});
+	}
+	get caretPosition() {
+		return this.selectedRange.current;
 	}
 	createFieldValue(segments) {
 		const Constructor = this.constructor;
 		return new Constructor(segments);
 	}
-	/** Create a new list with the caret position set to the given position. */
-	withCaretPosition(caretPosition) {
-		if (this.caretPosition.index === caretPosition.index && this.caretPosition.offset === caretPosition.offset) return this;
+	/** Create a new list with the selected range set to the given range. */
+	withSelectedRange(selectedRange) {
+		if (this.selectedRange.isEqual(selectedRange)) return this;
 		let result = this.createFieldValue(this.segments);
-		result.caretPosition = caretPosition;
+		result.selectedRange = selectedRange;
 		result.previous = this.previous;
 		result.next = this.next;
 		result.isCoalescing = this.isCoalescing;
 		return result;
 	}
+	/** Create a new list with the caret position set to the given position. */
+	withCaretPosition(position) {
+		return this.withSelectedRange(new SelectedRange(position));
+	}
 	splitSegment(segment, offset) {
 		if (!segment) {
 			let empty = this.createTextSegment("");
@@ -983,14 +1068,14 @@ var TokenFieldValue = class {
 		if (endSplit) appendSegments(newSegments, [endSplit]);
 		appendSegments(newSegments, this.segments.slice(end.index + 1));
 		let segments = this.createFieldValue(newSegments);
-		segments.caretPosition = caret;
+		segments.selectedRange = new SelectedRange(caret);
 		segments.isCoalescing = coalesce;
 		if (this.isCoalescing && coalesce && this.previous) {
 			segments.previous = this.previous;
 			segments.previous.next = segments;
 		} else {
 			segments.previous = this;
-			this.caretPosition = end;
+			this.selectedRange = new SelectedRange(start, end);
 			this.next = segments;
 		}
 		return segments;
@@ -1060,15 +1145,14 @@ var TokenFieldValue = class {
 	delete(position, segmenter, direction, coalesce = true) {
 		let boundary = this.findBoundaryWithSegmenter(position, segmenter, direction);
 		if (boundary) return this.replaceRange(direction === -1 ? boundary : position, direction === -1 ? position : boundary, "", coalesce);
-		this.caretPosition = position;
-		return this;
+		return this.withSelectedRange(new SelectedRange(position));
 	}
 	/** Delete text to the next or previous line break. */
 	deleteLine(position, direction, coalesce = true) {
 		if (this.segments.length === 0) return this;
 		let boundary = this.findLineBoundary(position, direction);
 		if (boundary) return this.replaceRange(direction === -1 ? boundary : position, direction === -1 ? position : boundary, "", coalesce);
-		return this;
+		return this.withSelectedRange(new SelectedRange(position));
 	}
 	/** Create a new list containing a subset of the segments. */
 	slice(start, end) {
@@ -1213,6 +1297,10 @@ const DEFAULT_VALIDATION_RESULT = {
 };
 /** Context for server-side validation errors. */
 const FormValidationContext = createContext({});
+const validationErrorsSource = Symbol.for("proyecto-viviana.validationErrorsSource");
+function validationErrorsIdentity(errors) {
+	return errors[validationErrorsSource] ?? errors;
+}
 /** Private prop key for passing validation state to children. */
 const privateValidationStateProp = "__formValidationState" + Date.now();
 function asArray(v) {
@@ -1282,10 +1370,10 @@ function createFormValidationState(props) {
 		if (name) return Array.isArray(name) ? name.flatMap((n) => asArray(serverErrors[n])) : asArray(serverErrors[name]);
 		return [];
 	});
-	const [lastServerErrors, setLastServerErrors] = createInternalSignal(serverErrors);
+	const [lastServerErrors, setLastServerErrors] = createInternalSignal(validationErrorsIdentity(serverErrors));
 	const [isServerErrorCleared, setServerErrorCleared] = createInternalSignal(false);
 	createEffect(() => ({
-		errors: serverErrors,
+		errors: validationErrorsIdentity(serverErrors),
 		last: lastServerErrors()
 	}), ({ errors, last }) => {
 		if (errors !== last) {
@@ -1316,7 +1404,7 @@ function createFormValidationState(props) {
 			return controlledError() || serverError() || clientError() || builtinValidation() || currentValidity();
 		}),
 		updateValidation(value) {
-			if (validationBehavior() === "aria" && !isEqualValidation(currentValidity(), value)) setCurrentValidity(value);
+			if (untrack(validationBehavior) === "aria" && !isEqualValidation(untrack(currentValidity), value)) setCurrentValidity(value);
 			else nextValidation = value;
 		},
 		resetValidation() {
@@ -1433,6 +1521,12 @@ function createCheckboxGroupState(props = {}) {
 		const snapshot = liveValue();
 		if (snapshot.includes(removeVal)) setValue(snapshot.filter((v) => v !== removeVal));
 	}
+	const invalidValues = /* @__PURE__ */ new Map();
+	function setInvalid(itemValue, result) {
+		if (result.isInvalid) invalidValues.set(itemValue, result);
+		else invalidValues.delete(itemValue);
+		validation.updateValidation(mergeValidation(...invalidValues.values()));
+	}
 	function toggleValue(toggleVal) {
 		const p = getProps();
 		if (p.isReadOnly || p.isDisabled) return;
@@ -1458,6 +1552,7 @@ function createCheckboxGroupState(props = {}) {
 		addValue,
 		removeValue,
 		toggleValue,
+		setInvalid,
 		realtimeValidation: validation.realtimeValidation,
 		displayValidation: validation.displayValidation,
 		updateValidation: validation.updateValidation,
@@ -1494,9 +1589,14 @@ function createIsSSR() {
 *
 * @param defaultId - Optional default ID to use instead of generating one.
 */
+let fallbackIdCounter = 0;
 function createId(defaultId) {
-	const uniqueId = createUniqueId();
 	if (defaultId) return defaultId;
+	let uniqueId;
+	try {
+		uniqueId = createUniqueId();
+	} catch {}
+	if (!uniqueId) uniqueId = `nh-${++fallbackIdCounter}`;
 	return `solid-stately-${uniqueId}`;
 }
 /**
@@ -1578,7 +1678,7 @@ function createRadioGroupState(props = {}) {
 	const state = {
 		name,
 		selectedValue,
-		defaultSelectedValue: initialProps.defaultValue ?? null,
+		defaultSelectedValue: initialProps.value !== void 0 ? initialProps.value : initialProps.defaultValue ?? null,
 		setSelectedValue,
 		lastFocusedValue,
 		setLastFocusedValue,
@@ -1831,7 +1931,7 @@ function getAncestors(collection, node) {
 * Creates selection state for a collection.
 */
 function createSelectionState(props = {}) {
-	const getProps = () => access(props);
+	const getProps = propsAccessor(props);
 	const [internalBehavior, setInternalBehavior] = createInternalSignal("toggle");
 	const [internalSelectedKeys, setInternalSelectedKeys] = createInternalSignal(getInitialSelection$2(getProps().defaultSelectedKeys));
 	const [anchorKey, setAnchorKey] = createInternalSignal(null);
@@ -2031,7 +2131,7 @@ function convertSelection(selection, defaultValue) {
 * Manages raw state for multiple selection and focus in a collection.
 */
 function createMultipleSelectionState(props = {}) {
-	const getProps = () => access(props);
+	const getProps = propsAccessor(props);
 	const [isFocused, setIsFocused] = createInternalSignal(false);
 	const [focusedKey, setFocusedKeySignal] = createInternalSignal(null);
 	const [childFocusStrategy, setChildFocusStrategy] = createInternalSignal(null);
@@ -2403,7 +2503,7 @@ var SelectionManager = class SelectionManager {
 	}
 	isDisabled(key) {
 		const item = this.collection.getItem(key);
-		return this.state.disabledBehavior === "all" && (this.state.disabledKeys.has(key) || !!item?.props?.isDisabled) && item?.props?.disabledBehavior !== "selection";
+		return this.state.disabledBehavior === "all" && (this.state.disabledKeys.has(key) || !!item?.props?.isDisabled || item?.isDisabled === true) && item?.props?.disabledBehavior !== "selection";
 	}
 	isLink(key) {
 		return !!this.collection.getItem(key)?.props?.href;
@@ -2445,7 +2545,7 @@ var SelectionManager = class SelectionManager {
 * Creates state for a list component with selection.
 */
 function createListState(props) {
-	const getProps = () => access(props);
+	const getProps = propsAccessor(props);
 	const collection = createMemo(() => {
 		const p = getProps();
 		return new ListCollection((p.items ?? []).map((item, index) => {
@@ -2606,7 +2706,7 @@ function createFilteredListState(state, filterFn) {
 * Creates state for a single-select list component.
 */
 function createSingleSelectListState(props) {
-	const getProps = () => access(props);
+	const getProps = propsAccessor(props);
 	const listState = createListState({
 		get items() {
 			return getProps().items;
@@ -2631,7 +2731,7 @@ function createSingleSelectListState(props) {
 		allowDuplicateSelectionEvents: true,
 		get selectedKeys() {
 			const key = getProps().selectedKey;
-			return key != null ? [key] : [];
+			return key !== void 0 ? key != null ? [key] : [] : void 0;
 		},
 		get defaultSelectedKeys() {
 			const key = getProps().defaultSelectedKey;
@@ -2671,6 +2771,8 @@ function createSingleSelectListState(props) {
 *
 * createMenuTriggerState is ported from
 * packages/react-stately/src/menu/useMenuTriggerState.ts.
+* createSubmenuTriggerState is ported from
+* packages/react-stately/src/menu/useSubmenuTriggerState.ts.
 * createMenuState is a local composition of the separately attributed list state.
 */
 /**
@@ -2678,7 +2780,7 @@ function createSingleSelectListState(props) {
 * Menus are single-select lists that support actions.
 */
 function createMenuState(props) {
-	const getProps = () => access(props);
+	const getProps = propsAccessor(props);
 	const listState = createListState({
 		get items() {
 			return getProps().items;
@@ -2733,11 +2835,29 @@ function createMenuState(props) {
 }
 /**
 * Creates state for a menu trigger. Mirrors `@react-stately/menu` `useMenuTriggerState`:
-* overlay open state plus the focus strategy passed through to `createMenu`.
+* overlay open state, the focus strategy passed through to `createMenu`, and the
+* expanded submenu stack.
 */
 function createMenuTriggerState(props = {}) {
 	const overlay = createOverlayTriggerState(props);
 	const [focusStrategy, setFocusStrategy] = createInternalSignal(null);
+	const [expandedKeysStack, setExpandedKeysStack] = createInternalSignal([]);
+	const openSubmenu = (triggerKey, level) => {
+		setExpandedKeysStack((oldStack) => {
+			if (level > oldStack.length) return oldStack;
+			return [...oldStack.slice(0, level), triggerKey];
+		});
+	};
+	const closeSubmenu = (triggerKey, level) => {
+		setExpandedKeysStack((oldStack) => {
+			if (oldStack[level] !== triggerKey) return oldStack;
+			return oldStack.slice(0, level);
+		});
+	};
+	const close = () => {
+		setExpandedKeysStack([]);
+		overlay.close();
+	};
 	return {
 		...overlay,
 		focusStrategy,
@@ -2749,7 +2869,46 @@ function createMenuTriggerState(props = {}) {
 		toggle(strategy = null) {
 			setFocusStrategy(strategy);
 			overlay.toggle();
-		}
+		},
+		close,
+		expandedKeysStack,
+		openSubmenu,
+		closeSubmenu
+	};
+}
+/**
+* Creates state for a submenu trigger. Mirrors `@react-stately/menu`
+* `useSubmenuTriggerState`: open state is the root stack entry at this level.
+*/
+function createSubmenuTriggerState(props, state) {
+	const getProps = propsAccessor(props);
+	const submenuLevel = state.expandedKeysStack().length;
+	const [focusStrategy, setFocusStrategy] = createInternalSignal(null);
+	const isOpen = () => state.expandedKeysStack()[submenuLevel] === getProps().triggerKey;
+	const open = (strategy) => {
+		setFocusStrategy(strategy ?? null);
+		state.openSubmenu(getProps().triggerKey, submenuLevel);
+	};
+	const close = () => {
+		setFocusStrategy(null);
+		state.closeSubmenu(getProps().triggerKey, submenuLevel);
+	};
+	const toggle = (strategy) => {
+		setFocusStrategy(strategy ?? null);
+		if (isOpen()) close();
+		else open(strategy);
+	};
+	return {
+		focusStrategy,
+		isOpen,
+		open,
+		close,
+		closeAll: () => state.close(),
+		submenuLevel,
+		setOpen() {},
+		toggle,
+		point: null,
+		setPoint() {}
 	};
 }
 //#endregion
@@ -2773,18 +2932,22 @@ const dayOfWeekNames$1 = [
 * Provides state management for a calendar component.
 */
 function createCalendarState(props = {}) {
+	const getProps = propsAccessor(props);
 	const timeZone = getLocalTimeZone$1();
-	const locale = createMemo(() => access(props.locale) ?? "en-US");
-	const minValueState = createMemo(() => access(props.minValue) ?? null);
-	const maxValueState = createMemo(() => access(props.maxValue) ?? null);
-	const selectionMode = createMemo(() => access(props.selectionMode) ?? "single");
+	const locale = createMemo(() => access(getProps().locale) ?? "en-US");
+	const minValueState = createMemo(() => access(getProps().minValue) ?? null);
+	const maxValueState = createMemo(() => access(getProps().maxValue) ?? null);
+	const selectionMode = createMemo(() => access(getProps().selectionMode) ?? "single");
 	const resolvedOptions = createMemo(() => new DateFormatter$1(locale()).resolvedOptions());
-	const calendar = createMemo(() => (props.createCalendar ?? createCalendar$1)(resolvedOptions().calendar));
-	const visibleMonths = createMemo(() => Math.max(1, Number(access(props.visibleMonths) ?? 1)));
-	const firstDayOfWeekName = () => props.firstDayOfWeek == null ? void 0 : dayOfWeekNames$1[props.firstDayOfWeek];
+	const calendar = createMemo(() => (getProps().createCalendar ?? createCalendar$1)(resolvedOptions().calendar));
+	const visibleMonths = createMemo(() => Math.max(1, Number(access(getProps().visibleMonths) ?? 1)));
+	const firstDayOfWeekName = () => {
+		const firstDayOfWeek = getProps().firstDayOfWeek;
+		return firstDayOfWeek == null ? void 0 : dayOfWeekNames$1[firstDayOfWeek];
+	};
 	const toDisplayCalendarDate = (date) => toCalendar$1(toCalendarDate$3(date), calendar());
 	const selectionAlignmentOffset = () => {
-		switch (props.selectionAlignment) {
+		switch (getProps().selectionAlignment) {
 			case "start": return 0;
 			case "end": return Math.max(visibleMonths() - 1, 0);
 			default: {
@@ -2794,9 +2957,26 @@ function createCalendarState(props = {}) {
 			}
 		}
 	};
+	const rawAlignStart = (date) => startOfMonth$1(date);
+	const rawAlignEnd = (date, months) => startOfMonth$1(date).subtract({ months: Math.max(months - 1, 0) });
+	const constrainVisibleRangeStart = (date, aligned, months) => {
+		const minValue = access(getProps().minValue);
+		const maxValue = access(getProps().maxValue);
+		let constrained = aligned;
+		if (minValue && date.compare(toDisplayCalendarDate(minValue)) >= 0) {
+			const minStart = rawAlignStart(toDisplayCalendarDate(minValue));
+			if (minStart.compare(constrained) > 0) constrained = minStart;
+		}
+		if (maxValue && date.compare(toDisplayCalendarDate(maxValue)) <= 0) {
+			const maxStart = rawAlignEnd(toDisplayCalendarDate(maxValue), months);
+			if (maxStart.compare(constrained) < 0) constrained = maxStart;
+		}
+		return constrained;
+	};
 	const alignVisibleRangeStart = (date) => {
 		const offset = selectionAlignmentOffset();
-		return startOfMonth$1(offset > 0 ? date.subtract({ months: offset }) : date);
+		const aligned = rawAlignStart(offset > 0 ? date.subtract({ months: offset }) : date);
+		return constrainVisibleRangeStart(date, aligned, visibleMonths());
 	};
 	const visibleRangeEnd = (start) => {
 		let end = endOfMonth$1(start);
@@ -2804,32 +2984,37 @@ function createCalendarState(props = {}) {
 		return end;
 	};
 	const constrainDate = (date) => {
-		const minValue = access(props.minValue);
-		const maxValue = access(props.maxValue);
+		const minValue = access(getProps().minValue);
+		const maxValue = access(getProps().maxValue);
 		let constrained = date;
 		if (minValue && constrained.compare(toDisplayCalendarDate(minValue)) < 0) constrained = toDisplayCalendarDate(minValue);
 		if (maxValue && constrained.compare(toDisplayCalendarDate(maxValue)) > 0) constrained = toDisplayCalendarDate(maxValue);
 		return constrained;
 	};
 	const getInitialFocusedDate = () => {
-		const controlledFocused = access(props.focusedValue);
+		const controlledFocused = access(getProps().focusedValue);
 		if (controlledFocused) return toDisplayCalendarDate(controlledFocused);
-		if (props.defaultFocusedValue) return toDisplayCalendarDate(props.defaultFocusedValue);
-		const controlledValue = access(props.value);
-		const controlledFirst = Array.isArray(controlledValue) ? controlledValue[0] : controlledValue;
-		if (controlledFirst) return toDisplayCalendarDate(controlledFirst);
-		const defaultFirst = Array.isArray(props.defaultValue) ? props.defaultValue[0] : props.defaultValue;
-		if (defaultFirst) return toDisplayCalendarDate(defaultFirst);
+		const defaultFocusedValue = getProps().defaultFocusedValue;
+		if (defaultFocusedValue) return toDisplayCalendarDate(defaultFocusedValue);
+		const controlledValue = access(getProps().value);
+		if (controlledValue !== void 0) {
+			const controlledFirst = Array.isArray(controlledValue) ? controlledValue[0] : controlledValue;
+			if (controlledFirst) return toDisplayCalendarDate(controlledFirst);
+		} else {
+			const defaultValue = getProps().defaultValue;
+			const defaultFirst = Array.isArray(defaultValue) ? defaultValue[0] : defaultValue;
+			if (defaultFirst) return toDisplayCalendarDate(defaultFirst);
+		}
 		return toCalendar$1(today$1(timeZone), calendar());
 	};
 	const initialFocusedDate = constrainDate(getInitialFocusedDate());
-	const [internalValue, setInternalValue] = createInternalSignal(props.defaultValue ?? null);
+	const [internalValue, setInternalValue] = createInternalSignal(getProps().defaultValue ?? null);
 	const [focusedDate, setFocusedDateInternal] = createInternalSignal(initialFocusedDate);
 	const [visibleRangeStart, setVisibleRangeStart] = createInternalSignal(alignVisibleRangeStart(initialFocusedDate));
-	const [isFocused, setFocused] = createInternalSignal(props.autoFocus ?? false);
+	const [isFocused, setFocused] = createInternalSignal(getProps().autoFocus ?? false);
 	const [isPaginating, setIsPaginating] = createInternalSignal(false);
 	const sourceValue = createMemo(() => {
-		const controlled = access(props.value);
+		const controlled = access(getProps().value);
 		return controlled !== void 0 ? controlled : internalValue();
 	});
 	const value = createMemo(() => {
@@ -2837,10 +3022,23 @@ function createCalendarState(props = {}) {
 		if (Array.isArray(currentValue)) return currentValue.map((v) => toDisplayCalendarDate(v));
 		return currentValue ? toDisplayCalendarDate(currentValue) : null;
 	});
-	const isDisabled = createMemo(() => access(props.isDisabled) ?? false);
-	const isReadOnly = createMemo(() => access(props.isReadOnly) ?? false);
-	const validationState = createMemo(() => access(props.validationState));
-	const isValueInvalid = createMemo(() => validationState() === "invalid");
+	const isDisabled = createMemo(() => access(getProps().isDisabled) ?? false);
+	const isReadOnly = createMemo(() => access(getProps().isReadOnly) ?? false);
+	const validationState = createMemo(() => access(getProps().validationState));
+	const isInvalidSelection = createMemo(() => {
+		const current = value();
+		if (current == null) return false;
+		const dates = Array.isArray(current) ? current : [current];
+		const min = access(getProps().minValue);
+		const max = access(getProps().maxValue);
+		const minCal = min != null ? toDisplayCalendarDate(min) : null;
+		const maxCal = max != null ? toDisplayCalendarDate(max) : null;
+		return dates.some((date) => {
+			const cal = toDisplayCalendarDate(date);
+			return Boolean(getProps().isDateUnavailable?.(cal)) || minCal != null && cal.compare(minCal) < 0 || maxCal != null && cal.compare(maxCal) > 0;
+		});
+	});
+	const isValueInvalid = createMemo(() => Boolean(access(getProps().isInvalid)) || validationState() === "invalid" || isInvalidSelection());
 	const visibleRange = () => {
 		const start = visibleRangeStart();
 		return {
@@ -2849,11 +3047,11 @@ function createCalendarState(props = {}) {
 		};
 	};
 	const syncVisibleRangeForFocusedDate = (nextFocusedDate, range, months) => {
-		if (nextFocusedDate.compare(range.start) < 0) setVisibleRangeStart(startOfMonth$1(nextFocusedDate.subtract({ months: months - 1 })));
-		else if (nextFocusedDate.compare(range.end) > 0) setVisibleRangeStart(startOfMonth$1(nextFocusedDate));
+		if (nextFocusedDate.compare(range.start) < 0) setVisibleRangeStart(constrainVisibleRangeStart(nextFocusedDate, rawAlignEnd(nextFocusedDate, months), months));
+		else if (nextFocusedDate.compare(range.end) > 0) setVisibleRangeStart(constrainVisibleRangeStart(nextFocusedDate, rawAlignStart(nextFocusedDate), months));
 	};
 	createEffect(() => {
-		const controlledFocused = access(props.focusedValue);
+		const controlledFocused = access(getProps().focusedValue);
 		if (!controlledFocused) return null;
 		return {
 			nextFocusedDate: constrainDate(toDisplayCalendarDate(controlledFocused)),
@@ -2868,7 +3066,7 @@ function createCalendarState(props = {}) {
 		syncVisibleRangeForFocusedDate(nextFocusedDate, range, months);
 	});
 	createEffect(() => {
-		if (access(props.focusedValue)) return null;
+		if (access(getProps().focusedValue)) return null;
 		const currentFocusedDate = focusedDate();
 		const nextFocusedDate = constrainDate(currentFocusedDate);
 		if (nextFocusedDate.compare(currentFocusedDate) === 0 && isEqualCalendar(nextFocusedDate.calendar, currentFocusedDate.calendar)) return null;
@@ -2882,7 +3080,7 @@ function createCalendarState(props = {}) {
 		if (!data) return;
 		syncVisibleRangeForFocusedDate(data.nextFocusedDate, data.range, data.months);
 		setFocusedDateInternal(data.nextFocusedDate);
-		props.onFocusChange?.(data.nextFocusedDate);
+		getProps().onFocusChange?.(data.nextFocusedDate);
 	});
 	createEffect(() => {
 		const currentFocusedDate = focusedDate();
@@ -2919,11 +3117,11 @@ function createCalendarState(props = {}) {
 	});
 	const normalizeValue = (newValue) => {
 		const constrained = constrainDate(newValue);
-		const minBound = access(props.minValue);
-		const prev = previousAvailableDate$1(constrained, minBound != null ? toDisplayCalendarDate(minBound) : minDate$1(constrained, visibleRange().start) ?? constrained, props.isDateUnavailable);
+		const minBound = access(getProps().minValue);
+		const prev = previousAvailableDate$1(constrained, minBound != null ? toDisplayCalendarDate(minBound) : minDate$1(constrained, visibleRange().start) ?? constrained, getProps().isDateUnavailable);
 		if (!prev) return null;
 		const oldValue = sourceValue();
-		return convertValue$3(prev, Array.isArray(oldValue) ? oldValue[0] ?? null : oldValue);
+		return convertValue$5(prev, Array.isArray(oldValue) ? oldValue[0] ?? null : oldValue);
 	};
 	const setValue = (newValue) => {
 		if (isDisabled() || isReadOnly()) return;
@@ -2936,15 +3134,15 @@ function createCalendarState(props = {}) {
 			if (!localValue) return;
 			nextValue = localValue;
 		}
-		if (access(props.value) === void 0) setInternalValue(() => nextValue);
-		if (!Object.is(oldValue, nextValue) && props.onChange) props.onChange(nextValue);
+		if (access(getProps().value) === void 0) setInternalValue(() => nextValue);
+		if (!Object.is(oldValue, nextValue)) getProps().onChange?.(nextValue);
 	};
 	const setFocusedDate = (date) => {
 		const constrained = constrainDate(date);
 		if (Object.is(constrained, focusedDate())) return;
 		syncVisibleRangeForFocusedDate(constrained, visibleRange(), visibleMonths());
 		setFocusedDateInternal(constrained);
-		props.onFocusChange?.(constrained);
+		getProps().onFocusChange?.(constrained);
 	};
 	const isSelected = (date) => {
 		const v = value();
@@ -2957,13 +3155,13 @@ function createCalendarState(props = {}) {
 		return isFocused() && isSameDay$1(toDisplayCalendarDate(date), focusedDate());
 	};
 	const isCellUnavailable = (date) => {
-		return props.isDateUnavailable?.(date) ?? false;
+		return getProps().isDateUnavailable?.(date) ?? false;
 	};
 	const isCellDisabled = (date) => {
 		if (isDisabled()) return true;
-		if (props.isDateDisabled?.(date)) return true;
-		const minValue = access(props.minValue);
-		const maxValue = access(props.maxValue);
+		if (getProps().isDateDisabled?.(date)) return true;
+		const minValue = access(getProps().minValue);
+		const maxValue = access(getProps().maxValue);
 		const calDate = toDisplayCalendarDate(date);
 		const range = visibleRange();
 		if (calDate.compare(toDisplayCalendarDate(range.start)) < 0) return true;
@@ -3000,20 +3198,24 @@ function createCalendarState(props = {}) {
 	};
 	const focusPreviousPage = () => {
 		setIsPaginating(true);
-		const pageMonths = props.pageBehavior === "single" ? 1 : visibleMonths();
-		const nextFocusedDate = constrainDate(focusedDate().subtract({ months: pageMonths }));
+		const pageMonths = getProps().pageBehavior === "single" ? 1 : visibleMonths();
+		const currentFocused = focusedDate();
+		const nextFocusedDate = constrainDate(currentFocused.subtract({ months: pageMonths }));
+		const slidStart = startOfMonth$1(visibleRangeStart().subtract({ months: pageMonths }));
 		setFocusedDateInternal(nextFocusedDate);
-		setVisibleRangeStart(startOfMonth$1(visibleRangeStart().subtract({ months: pageMonths })));
-		props.onFocusChange?.(nextFocusedDate);
+		setVisibleRangeStart(constrainVisibleRangeStart(currentFocused, slidStart, pageMonths));
+		getProps().onFocusChange?.(nextFocusedDate);
 		setIsPaginating(false);
 	};
 	const focusNextPage = () => {
 		setIsPaginating(true);
-		const pageMonths = props.pageBehavior === "single" ? 1 : visibleMonths();
-		const nextFocusedDate = constrainDate(focusedDate().add({ months: pageMonths }));
+		const pageMonths = getProps().pageBehavior === "single" ? 1 : visibleMonths();
+		const currentFocused = focusedDate();
+		const nextFocusedDate = constrainDate(currentFocused.add({ months: pageMonths }));
+		const slidStart = startOfMonth$1(visibleRangeStart().add({ months: pageMonths }));
 		setFocusedDateInternal(nextFocusedDate);
-		setVisibleRangeStart(startOfMonth$1(visibleRangeStart().add({ months: pageMonths })));
-		props.onFocusChange?.(nextFocusedDate);
+		setVisibleRangeStart(constrainVisibleRangeStart(currentFocused, slidStart, pageMonths));
+		getProps().onFocusChange?.(nextFocusedDate);
 		setIsPaginating(false);
 	};
 	const focusPreviousSection = () => {
@@ -3048,7 +3250,7 @@ function createCalendarState(props = {}) {
 	const selectDate = (date) => {
 		if (isReadOnly() || isDisabled()) return;
 		if (selectionMode() === "multiple") {
-			const current = access(props.value) !== void 0 ? value() : readNow(internalValue);
+			const current = access(getProps().value) !== void 0 ? value() : readNow(internalValue);
 			const base = Array.isArray(current) ? current.map((v) => toDisplayCalendarDate(v)) : current != null ? [toDisplayCalendarDate(current)] : [];
 			const target = toDisplayCalendarDate(date);
 			const index = base.findIndex((d) => isSameDay$1(d, target));
@@ -3128,7 +3330,7 @@ function createCalendarState(props = {}) {
 function toCalendarDate$3(date) {
 	return toCalendarDate$1(date);
 }
-function convertValue$3(newValue, oldValue) {
+function convertValue$5(newValue, oldValue) {
 	const localValue = toCalendar$1(newValue, oldValue?.calendar ?? new GregorianCalendar$1());
 	if (oldValue && "hour" in oldValue) return oldValue.set(localValue);
 	return localValue;
@@ -4175,7 +4377,7 @@ function createDateFieldState(props = {}) {
 		if (access(props.value) === void 0) setInternalValue(() => v);
 		props.onChange?.(v);
 	};
-	const calendarValue = createMemo(() => convertValue$2(rawValue(), calendar()) ?? null);
+	const calendarValue = createMemo(() => convertValue$4(rawValue(), calendar()) ?? null);
 	const initialValue = untrack(calendarValue);
 	const [displayValue, setDisplayValue] = createInternalSignal(untrack(() => new IncompleteDate(calendar(), hourCycle(), untrack(calendarValue))));
 	let lastValue = untrack(calendarValue);
@@ -4477,13 +4679,13 @@ function getFormatOptions(fieldOptions, options) {
 	if (options.showEra && startIdx === 0) opts.era = "short";
 	return opts;
 }
-function convertValue$2(value, calendar) {
+function convertValue$4(value, calendar) {
 	if (value === null) return null;
 	if (!value) return void 0;
 	return toCalendar$1(value, calendar);
 }
 function createPlaceholderDate(placeholderValue, granularity, calendar, timeZone) {
-	if (placeholderValue) return convertValue$2(placeholderValue, calendar);
+	if (placeholderValue) return convertValue$4(placeholderValue, calendar);
 	const date = toCalendar$1(now$1(timeZone ?? getLocalTimeZone$1()).set({
 		hour: 0,
 		minute: 0,
@@ -4601,8 +4803,8 @@ function createRangeCalendarState(props = {}) {
 		return end;
 	};
 	const rawAlignStart = (date) => startOfMonth$1(date);
-	const rawAlignEnd = (date) => startOfMonth$1(date).subtract({ months: Math.max(visibleMonths() - 1, 0) });
-	const constrainVisibleRangeStart = (date, aligned) => {
+	const rawAlignEnd = (date, months = visibleMonths()) => startOfMonth$1(date).subtract({ months: Math.max(months - 1, 0) });
+	const constrainVisibleRangeStart = (date, aligned, months = visibleMonths()) => {
 		const minValue = access(props.minValue);
 		const maxValue = access(props.maxValue);
 		let constrained = aligned;
@@ -4611,7 +4813,7 @@ function createRangeCalendarState(props = {}) {
 			if (minStart.compare(constrained) > 0) constrained = minStart;
 		}
 		if (maxValue && date.compare(toDisplayCalendarDate(maxValue)) <= 0) {
-			const maxStart = rawAlignEnd(toDisplayCalendarDate(maxValue));
+			const maxStart = rawAlignEnd(toDisplayCalendarDate(maxValue), months);
 			if (maxStart.compare(constrained) < 0) constrained = maxStart;
 		}
 		return constrained;
@@ -4624,7 +4826,8 @@ function createRangeCalendarState(props = {}) {
 		return constrainVisibleRangeStart(date, rawAlignStart(date).subtract({ months: offset }));
 	};
 	const defaultSelectionAlignment = () => {
-		const currentValue = access(props.value) ?? props.defaultValue;
+		const controlled = access(props.value);
+		const currentValue = controlled !== void 0 ? controlled : props.defaultValue;
 		if (!currentValue?.start || !currentValue?.end) return "center";
 		const start = alignCenter(toDisplayCalendarDate(currentValue.start));
 		const end = visibleRangeEndFromStart(start);
@@ -4642,8 +4845,9 @@ function createRangeCalendarState(props = {}) {
 		if (controlledFocused) return toDisplayCalendarDate(controlledFocused);
 		if (props.defaultFocusedValue) return toDisplayCalendarDate(props.defaultFocusedValue);
 		const controlledValue = access(props.value);
-		if (controlledValue?.start) return toDisplayCalendarDate(controlledValue.start);
-		if (props.defaultValue?.start) return toDisplayCalendarDate(props.defaultValue.start);
+		if (controlledValue !== void 0) {
+			if (controlledValue?.start) return toDisplayCalendarDate(controlledValue.start);
+		} else if (props.defaultValue?.start) return toDisplayCalendarDate(props.defaultValue.start);
 		return toCalendar$1(today$1(timeZone), calendar());
 	};
 	const [internalValue, setInternalValue] = createInternalSignal(props.defaultValue ?? null);
@@ -4677,7 +4881,7 @@ function createRangeCalendarState(props = {}) {
 		const maxCal = max != null ? toDisplayCalendarDate(max) : null;
 		return isDateOutsideRange(toDisplayCalendarDate(v.start), minCal, maxCal) || isDateOutsideRange(toDisplayCalendarDate(v.end), minCal, maxCal);
 	});
-	const isValueInvalid = createMemo(() => validationState() === "invalid" || isInvalidSelection());
+	const isValueInvalid = createMemo(() => Boolean(access(props.isInvalid)) || validationState() === "invalid" || isInvalidSelection());
 	const highlightedRange = createMemo(() => {
 		const anchor = anchorDate();
 		if (!anchor) {
@@ -4778,8 +4982,8 @@ function createRangeCalendarState(props = {}) {
 		if (isDisabled() || isReadOnly()) return;
 		const oldValue = sourceValue();
 		const nextValue = newValue ? {
-			start: convertValue$1(constrainDate(toDisplayCalendarDate(newValue.start)), oldValue?.start),
-			end: convertValue$1(constrainDate(toDisplayCalendarDate(newValue.end)), oldValue?.end)
+			start: convertValue$3(constrainDate(toDisplayCalendarDate(newValue.start)), oldValue?.start),
+			end: convertValue$3(constrainDate(toDisplayCalendarDate(newValue.end)), oldValue?.end)
 		} : null;
 		if (access(props.value) === void 0) setInternalValue(() => nextValue);
 		if (!Object.is(oldValue, nextValue) && props.onChange) props.onChange(nextValue);
@@ -4844,16 +5048,20 @@ function createRangeCalendarState(props = {}) {
 	};
 	const focusPreviousPage = () => {
 		const pageMonths = access(props.pageBehavior) === "single" ? 1 : visibleMonths();
-		const nextFocusedDate = constrainDate(focusedDate().subtract({ months: pageMonths }));
+		const currentFocused = focusedDate();
+		const nextFocusedDate = constrainDate(currentFocused.subtract({ months: pageMonths }));
+		const slidStart = startOfMonth$1(visibleRangeStart().subtract({ months: pageMonths }));
 		setFocusedDateInternal(nextFocusedDate);
-		setVisibleRangeStart(startOfMonth$1(visibleRangeStart().subtract({ months: pageMonths })));
+		setVisibleRangeStart(constrainVisibleRangeStart(currentFocused, slidStart, pageMonths));
 		props.onFocusChange?.(nextFocusedDate);
 	};
 	const focusNextPage = () => {
 		const pageMonths = access(props.pageBehavior) === "single" ? 1 : visibleMonths();
-		const nextFocusedDate = constrainDate(focusedDate().add({ months: pageMonths }));
+		const currentFocused = focusedDate();
+		const nextFocusedDate = constrainDate(currentFocused.add({ months: pageMonths }));
+		const slidStart = startOfMonth$1(visibleRangeStart().add({ months: pageMonths }));
 		setFocusedDateInternal(nextFocusedDate);
-		setVisibleRangeStart(startOfMonth$1(visibleRangeStart().add({ months: pageMonths })));
+		setVisibleRangeStart(constrainVisibleRangeStart(currentFocused, slidStart, pageMonths));
 		props.onFocusChange?.(nextFocusedDate);
 	};
 	const focusPreviousSection = () => {
@@ -4936,7 +5144,14 @@ function createRangeCalendarState(props = {}) {
 		return week;
 	};
 	const focusNearestAvailableDate = (anchor) => {
-		const isDateInvalid = (candidate) => isInvalid(candidate) || isDateOutsideAllowedRange(candidate);
+		const passedRange = getAvailableRange(anchor);
+		const isDateInvalid = (candidate) => {
+			if (isDateOutsideAllowedRange(candidate)) return true;
+			const calDate = toDisplayCalendarDate(candidate);
+			if (passedRange?.start && calDate.compare(passedRange.start) < 0) return true;
+			if (passedRange?.end && calDate.compare(passedRange.end) > 0) return true;
+			return false;
+		};
 		let nextDay = anchor.add({ days: 1 });
 		if (isDateInvalid(nextDay)) nextDay = anchor.subtract({ days: 1 });
 		if (!isDateInvalid(nextDay)) {
@@ -5058,7 +5273,7 @@ function createRangeCalendarState(props = {}) {
 function toCalendarDate$2(date) {
 	return toCalendarDate$1(date);
 }
-function convertValue$1(newValue, oldValue) {
+function convertValue$3(newValue, oldValue) {
 	const localValue = toCalendar$1(newValue, oldValue?.calendar ?? new GregorianCalendar$1());
 	if (oldValue && "hour" in oldValue) return oldValue.set(localValue);
 	return localValue;
@@ -5122,7 +5337,7 @@ function nextUnavailableDate(anchorDate, isDateUnavailable, visibleMonths, dir)
 * that already carry a date (`CalendarDateTime`/`ZonedDateTime`) pass through.
 * Mirrors `@react-stately/datepicker`'s `convertValue`.
 */
-function convertValue(value, date = today$1(getLocalTimeZone$1())) {
+function convertValue$2(value, date = today$1(getLocalTimeZone$1())) {
 	if (!value) return null;
 	if ("day" in value) return value;
 	return toCalendarDateTime$1(date, value);
@@ -5146,20 +5361,20 @@ function createTimeFieldState(props = {}) {
 	const placeholderDate = createMemo(() => {
 		const current = v();
 		const zone = (current && "timeZone" in current ? current.timeZone : void 0) || defaultValueTimeZone;
-		if (zone && placeholderValue) return toZoned$1(convertValue(placeholderValue), zone);
-		return convertValue(placeholderValue);
+		if (zone && placeholderValue) return toZoned$1(convertValue$2(placeholderValue), zone);
+		return convertValue$2(placeholderValue);
 	});
-	const minDate = createMemo(() => convertValue(access(props.minValue), day()) ?? void 0);
-	const maxDate = createMemo(() => convertValue(access(props.maxValue), day()) ?? void 0);
+	const minDate = createMemo(() => convertValue$2(access(props.minValue), day()) ?? void 0);
+	const maxDate = createMemo(() => convertValue$2(access(props.maxValue), day()) ?? void 0);
 	const timeValue = createMemo(() => {
 		const current = value();
 		return current && "day" in current ? toTime$1(current) : current;
 	});
 	const dateTime = createMemo(() => {
 		const current = value();
-		return current == null ? null : convertValue(current);
+		return current == null ? null : convertValue$2(current);
 	});
-	const defaultDateTime = props.defaultValue == null ? null : convertValue(props.defaultValue);
+	const defaultDateTime = props.defaultValue == null ? null : convertValue$2(props.defaultValue);
 	const onChange = (newValue) => {
 		const converted = day() || defaultValueTimeZone ? newValue : newValue && toTime$1(newValue);
 		if (access(props.value) === void 0) setInternalValue(() => converted);
@@ -5274,16 +5489,16 @@ function createDatePickerState(props = {}) {
 	const isReadOnly = createMemo(() => access(props.isReadOnly) ?? false);
 	const validationState = createMemo(() => access(props.validationState));
 	const isOpen = () => access(props.isOpen) ?? readNow(internalOpen);
-	const dateValue = createMemo(() => {
-		const v = value();
-		if (!v) return null;
-		return toCalendarDate$1(v);
-	});
-	const timeValue = createMemo(() => {
-		const v = value();
-		if (!v || !("hour" in v)) return null;
-		return v;
-	});
+	const dateValue = () => {
+		const committed = value();
+		if (committed) return committed;
+		return selectedDate();
+	};
+	const timeValue = () => {
+		const committed = value();
+		if (committed && "hour" in committed) return committed;
+		return selectedTime();
+	};
 	const getPlaceholderTime = () => {
 		const placeholder = props.placeholderValue;
 		if (placeholder && "hour" in placeholder) return placeholder;
@@ -5409,12 +5624,17 @@ function createDatePickerState(props = {}) {
 * State management for select components.
 * Based on @react-stately/select useSelectState.
 */
+function convertValue$1(value) {
+	if (value === void 0) return void 0;
+	if (value === null || typeof value === "string" || typeof value === "number") return value == null ? [] : [value];
+	return value;
+}
 /**
 * Creates state for a select component.
 * Combines list state with overlay trigger state for dropdown behavior.
 */
 function createSelectState(props) {
-	const getProps = () => access(props);
+	const getProps = propsAccessor(props);
 	const selectionMode = () => getProps().selectionMode ?? "single";
 	const overlayState = createOverlayTriggerState({
 		get isOpen() {
@@ -5427,61 +5647,85 @@ function createSelectState(props) {
 			return getProps().onOpenChange;
 		}
 	});
-	const isControlledSingle = () => getProps().selectedKey !== void 0;
-	const isControlledMultiple = () => getProps().selectedKeys !== void 0;
-	const [internalSelectedKey, setInternalSelectedKey] = createInternalSignal(getProps().defaultSelectedKey ?? null);
-	const [internalSelectedKeys, setInternalSelectedKeys] = createInternalSignal(getProps().defaultSelectedKeys === "all" ? "all" : new Set(getProps().defaultSelectedKeys ?? []));
-	const selectedKey = () => {
-		if (selectionMode() === "multiple") {
-			const keys = selectedKeys();
-			if (keys === "all") return null;
-			return keys.size > 0 ? Array.from(keys)[0] : null;
-		}
-		return isControlledSingle() ? getProps().selectedKey ?? null : internalSelectedKey();
+	const resolvedDefault = untrack(() => {
+		const current = getProps();
+		if (current.defaultValue !== void 0) return current.defaultValue;
+		return (current.selectionMode ?? "single") === "single" ? current.defaultSelectedKey ?? null : [];
+	});
+	const controlledProp = () => {
+		const current = getProps();
+		if (current.value !== void 0) return current.value;
+		if (selectionMode() === "single" && current.selectedKey !== void 0) return current.selectedKey ?? null;
 	};
-	const setSelectedKey = (key) => {
-		if (selectionMode() === "multiple") {
-			if (key == null) {
-				if (!isControlledMultiple()) setInternalSelectedKeys(/* @__PURE__ */ new Set());
-				getProps().onSelectionChangeKeys?.(/* @__PURE__ */ new Set());
-				getProps().onSelectionChange?.(null);
-			} else {
-				const next = /* @__PURE__ */ new Set([key]);
-				if (!isControlledMultiple()) setInternalSelectedKeys(next);
-				getProps().onSelectionChangeKeys?.(next);
+	const [internalValue, setInternalValue] = createInternalSignal(resolvedDefault);
+	const readControlled = () => {
+		const controlled = controlledProp();
+		return controlled === void 0 ? void 0 : controlled;
+	};
+	let valueRef = untrack(() => {
+		const controlled = readControlled();
+		return controlled !== void 0 ? controlled : internalValue();
+	});
+	let wroteThisTurn = false;
+	const syncValueRef = () => {
+		if (wroteThisTurn) return;
+		const controlled = readControlled();
+		valueRef = controlled !== void 0 ? controlled : untrack(internalValue);
+	};
+	const displayValue = () => {
+		const controlled = readControlled();
+		const raw = controlled !== void 0 ? controlled : internalValue();
+		if (selectionMode() === "single" && raw !== null && typeof raw !== "string" && typeof raw !== "number") return raw[0] ?? null;
+		return raw;
+	};
+	const setValue = (next) => {
+		syncValueRef();
+		if (selectionMode() === "single") {
+			const key = typeof next === "string" || typeof next === "number" ? next : next === null ? null : next[0] ?? null;
+			if (!Object.is(valueRef, key)) {
+				valueRef = key;
+				wroteThisTurn = true;
+				queueMicrotask(() => {
+					wroteThisTurn = false;
+				});
+				if (controlledProp() === void 0) setInternalValue(key);
+				getProps().onChange?.(key);
 				getProps().onSelectionChange?.(key);
 			}
 			return;
 		}
-		if (!isControlledSingle()) setInternalSelectedKey(key);
-		getProps().onSelectionChange?.(key);
-		getProps().onSelectionChangeKeys?.(key != null ? /* @__PURE__ */ new Set([key]) : /* @__PURE__ */ new Set());
-	};
-	const selectedKeys = createMemo(() => {
-		if (selectionMode() === "multiple") {
-			if (isControlledMultiple()) {
-				const keys = getProps().selectedKeys;
-				return keys === "all" ? "all" : new Set(keys ?? []);
-			}
-			return internalSelectedKeys();
+		const keys = typeof next === "string" || typeof next === "number" ? [next] : next === null ? [] : next;
+		if (!Object.is(valueRef, keys)) {
+			valueRef = keys;
+			wroteThisTurn = true;
+			queueMicrotask(() => {
+				wroteThisTurn = false;
+			});
+			if (controlledProp() === void 0) setInternalValue(keys);
+			getProps().onChange?.([...keys]);
 		}
-		const key = selectedKey();
-		return key != null ? /* @__PURE__ */ new Set([key]) : /* @__PURE__ */ new Set();
-	});
+	};
 	const setSelectedKeys = (keys) => {
-		const next = new Set(keys);
 		if (selectionMode() === "multiple") {
-			if (!isControlledMultiple()) setInternalSelectedKeys(next);
-			getProps().onSelectionChangeKeys?.(next);
-			getProps().onSelectionChange?.(next.size > 0 ? Array.from(next)[0] : null);
+			setValue([...keys]);
 			return;
 		}
-		const key = next.size > 0 ? Array.from(next)[0] : null;
-		setSelectedKey(key);
+		let key = null;
+		for (const item of keys) {
+			key = item;
+			break;
+		}
+		setValue(key);
 	};
+	const initialDisplay = untrack(displayValue);
+	const stateDefaultValue = resolvedDefault ?? initialDisplay;
+	const defaultSelectedKey = untrack(() => getProps().defaultSelectedKey) ?? (untrack(() => getProps().selectionMode) === "single" ? initialDisplay : null);
+	const shouldCloseOnSelect = () => getProps().shouldCloseOnSelect ?? selectionMode() === "single";
 	const validation = createFormValidationState({
 		get value() {
-			return selectionMode() === "multiple" ? selectedKeys() : selectedKey();
+			const display = displayValue();
+			if (display !== null && typeof display !== "string" && typeof display !== "number" && display.length === 0) return null;
+			return display;
 		},
 		get isInvalid() {
 			return getProps().isInvalid;
@@ -5523,41 +5767,34 @@ function createSelectState(props) {
 		},
 		allowDuplicateSelectionEvents: true,
 		get selectedKeys() {
-			const keys = selectedKeys();
-			if (keys === "all") return "all";
-			return keys;
+			return convertValue$1(displayValue()) ?? [];
 		},
 		onSelectionChange(keys) {
-			if (selectionMode() === "multiple") {
-				if (!isControlledMultiple()) setInternalSelectedKeys(keys);
-				getProps().onSelectionChangeKeys?.(keys);
-				if (keys !== "all") getProps().onSelectionChange?.(keys.size > 0 ? Array.from(keys)[0] : null);
-				validation.commitValidation();
-				return;
-			}
 			if (keys === "all") return;
-			const key = keys.size > 0 ? Array.from(keys)[0] : null;
-			setSelectedKey(key);
-			overlayState.close();
+			if (selectionMode() === "single") setValue(keys.values().next().value ?? null);
+			else setValue([...keys]);
+			if (shouldCloseOnSelect()) overlayState.close();
 			validation.commitValidation();
 		}
 	});
+	const [focusStrategy, setFocusStrategy] = createInternalSignal(null);
 	const [isFocused, setFocused] = createInternalSignal(false);
+	const selectedKey = () => listState.selectionManager.firstSelectedKey;
+	const selectedKeys = () => new Set(convertValue$1(displayValue()) ?? []);
 	const selectedItem = createMemo(() => {
 		const key = selectedKey();
 		if (key == null) return null;
 		return listState.collection().getItem(key);
 	});
 	const selectedItems = createMemo(() => {
-		const keys = selectedKeys();
-		if (keys === "all") return Array.from(listState.collection());
 		const items = [];
-		for (const key of keys) {
+		for (const key of listState.selectionManager.selectedKeys) {
 			const item = listState.collection().getItem(key);
 			if (item) items.push(item);
 		}
 		return items;
 	});
+	const canOpenMenu = () => listState.collection().size !== 0 || getProps().allowsEmptyCollection === true;
 	return {
 		realtimeValidation: validation.realtimeValidation,
 		displayValidation: validation.displayValidation,
@@ -5571,15 +5808,29 @@ function createSelectState(props) {
 		isFocused,
 		setFocused,
 		isOpen: overlayState.isOpen,
-		open: overlayState.open,
+		open(strategy = null) {
+			if (!canOpenMenu()) return;
+			setFocusStrategy(strategy);
+			overlayState.open();
+		},
 		close: overlayState.close,
-		toggle: overlayState.toggle,
+		toggle(strategy = null) {
+			if (!canOpenMenu()) return;
+			setFocusStrategy(strategy);
+			overlayState.toggle();
+		},
+		focusStrategy,
 		selectionMode,
+		shouldCloseOnSelect,
+		value: () => displayValue(),
+		defaultValue: stateDefaultValue,
+		setValue,
 		selectedKey,
+		defaultSelectedKey,
+		setSelectedKey: setValue,
 		selectedKeys,
 		selectedItem,
 		selectedItems,
-		setSelectedKey,
 		setSelectedKeys,
 		isKeyDisabled: (key) => listState.isDisabled(key),
 		get isDisabled() {
@@ -5599,6 +5850,7 @@ function createSelectState(props) {
 * ComboBox combines a text input with a dropdown list, allowing users to
 * either type to filter options or select from a list.
 */
+const EMPTY_COMBOBOX_KEYS = [];
 /**
 * Default filter function that does case-insensitive "contains" matching.
 */
@@ -5610,26 +5862,28 @@ const defaultContainsFilter = (textValue, inputValue) => {
 * Combines list state with input value management and filtering.
 */
 function createComboBoxState(props) {
-	const getProps = () => access(props);
+	const getProps = propsAccessor(props);
 	const menuTrigger = () => getProps().menuTrigger ?? "input";
 	const allowsEmptyCollection = () => getProps().allowsEmptyCollection ?? false;
 	const allowsCustomValue = () => getProps().allowsCustomValue ?? false;
 	const shouldCloseOnBlur = () => getProps().shouldCloseOnBlur ?? true;
-	const isMultiple = () => getProps().selectionMode === "multiple";
+	const isMultiple = () => (getProps().selectionMode ?? "single") === "multiple";
 	const [focusStrategy, setFocusStrategy] = createInternalSignal(null);
 	const [showAllItems, setShowAllItems] = createInternalSignal(false);
 	let menuOpenTrigger = "focus";
-	const isMultiSelectionControlled = () => getProps().selectedKeys !== void 0;
-	const [internalSelectedKeys, setInternalSelectedKeys] = createInternalSignal(new Set(getProps().defaultSelectedKeys ?? []));
-	const selectedKeys = () => {
-		return isMultiSelectionControlled() ? new Set(getProps().selectedKeys ?? []) : internalSelectedKeys();
-	};
-	const setSelectedKeys = (keys) => {
-		if (!isMultiSelectionControlled()) setInternalSelectedKeys(new Set(keys));
-		getProps().onSelectionChangeMultiple?.(keys);
-	};
-	const isSelectionControlled = () => getProps().selectedKey !== void 0;
-	const [internalSelectedKey, setInternalSelectedKey] = createInternalSignal(getProps().defaultSelectedKey ?? null);
+	const controlledPropValue = () => {
+		const propsNow = getProps();
+		if (propsNow.value !== void 0) return propsNow.value;
+		if (!isMultiple() && propsNow.selectedKey !== void 0) return propsNow.selectedKey;
+	};
+	const isValueControlled = () => controlledPropValue() !== void 0;
+	const initialStoredValue = () => {
+		const propsNow = getProps();
+		if (propsNow.defaultValue !== void 0) return propsNow.defaultValue;
+		if ((propsNow.selectionMode ?? "single") === "multiple") return [];
+		return propsNow.defaultSelectedKey ?? null;
+	};
+	const [internalValue, setInternalValue] = createInternalSignal(initialStoredValue());
 	const isInputControlled = () => getProps().inputValue !== void 0;
 	const [internalInputValue, setInternalInputValue] = createInternalSignal(getProps().defaultInputValue ?? "");
 	let inputInitialized = false;
@@ -5641,13 +5895,77 @@ function createComboBoxState(props) {
 		getProps().onInputChange?.(value);
 	};
 	const [lastValue, setLastValue] = createInternalSignal(inputValue());
+	const storedValue = () => {
+		const controlled = controlledPropValue();
+		return controlled !== void 0 ? controlled : internalValue();
+	};
+	const displayValue = () => {
+		const current = storedValue();
+		if (!isMultiple()) return isKeyList(current) ? current[0] ?? null : current;
+		if (isKeyList(current)) return current;
+		if (current == null) return EMPTY_COMBOBOX_KEYS;
+		return [current];
+	};
 	const selectedKey = () => {
-		return isSelectionControlled() ? getProps().selectedKey ?? null : internalSelectedKey();
+		if (isMultiple()) return null;
+		const current = displayValue();
+		return isKeyList(current) ? current[0] ?? null : current;
 	};
-	const setSelectedKey = (key) => {
-		if (!isSelectionControlled()) setInternalSelectedKey(key);
-		getProps().onSelectionChange?.(key);
+	const selectedKeys = () => {
+		const current = displayValue();
+		if (isKeyList(current)) return new Set(current);
+		return current == null ? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set([current]);
+	};
+	const setValue = (next) => {
+		if (!isMultiple()) {
+			const key = typeof next === "string" || typeof next === "number" ? next : next === null ? null : next[0] ?? null;
+			const previous = untrack(selectedKey);
+			if (!isValueControlled()) setInternalValue(key);
+			getProps().onChange?.(key);
+			if (key !== previous) getProps().onSelectionChange?.(key);
+			return;
+		}
+		const keys = typeof next === "string" || typeof next === "number" ? [next] : next === null ? [] : [...next];
+		if (!isValueControlled()) setInternalValue(keys);
+		getProps().onChange?.([...keys]);
 	};
+	const setSelectedKey = (key) => {
+		setValue(key);
+	};
+	const defaultValue = (() => {
+		const propsNow = getProps();
+		return (propsNow.defaultValue !== void 0 ? propsNow.defaultValue : isMultiple() ? EMPTY_COMBOBOX_KEYS : propsNow.defaultSelectedKey ?? null) ?? untrack(displayValue);
+	})();
+	const defaultSelectedKey = getProps().defaultSelectedKey ?? (isMultiple() ? null : untrack(displayValue));
+	const validationValue = createMemo(() => {
+		const dVal = displayValue();
+		if (isKeyList(dVal) && dVal.length === 0) return null;
+		return {
+			inputValue: inputValue(),
+			value: isKeyList(dVal) ? [...dVal] : dVal,
+			selectedKey: selectedKey()
+		};
+	});
+	const validation = createFormValidationState({
+		get value() {
+			return validationValue();
+		},
+		get isInvalid() {
+			return getProps().isInvalid;
+		},
+		get validationState() {
+			return getProps().validationState;
+		},
+		get validate() {
+			return getProps().validate;
+		},
+		get name() {
+			return getProps().name;
+		},
+		get validationBehavior() {
+			return getProps().validationBehavior ?? "native";
+		}
+	});
 	let listState;
 	const overlayState = createOverlayTriggerState({
 		get isOpen() {
@@ -5681,26 +5999,27 @@ function createComboBoxState(props) {
 		get selectionMode() {
 			return isMultiple() ? "multiple" : "single";
 		},
-		disallowEmptySelection: false,
+		get disallowEmptySelection() {
+			return !isMultiple();
+		},
+		allowDuplicateSelectionEvents: true,
 		get selectedKeys() {
-			if (isMultiple()) return Array.from(selectedKeys());
-			const key = selectedKey();
-			return key != null ? [key] : [];
+			return convertValue(displayValue());
 		},
 		onSelectionChange(keys) {
 			if (keys === "all") return;
 			if (isMultiple()) {
-				const newKeys = new Set(keys);
-				setSelectedKeys(newKeys);
+				setValue([...keys]);
 				return;
 			}
 			const key = keys.size > 0 ? Array.from(keys)[0] : null;
 			if (key === selectedKey()) {
+				getProps().onSelectionChange?.(key);
 				resetInputValue();
 				closeMenu();
 				return;
 			}
-			setSelectedKey(key);
+			setValue(key);
 		}
 	});
 	const originalCollection = listState.collection;
@@ -5729,18 +6048,21 @@ function createComboBoxState(props) {
 		return items;
 	});
 	if (!inputInitialized && !isInputControlled()) {
-		const defaultKey = getProps().defaultSelectedKey;
-		if (defaultKey != null && !getProps().defaultInputValue) {
-			const item = originalCollection().getItem(defaultKey);
-			if (item) {
-				setInternalInputValue(item.textValue);
-				setLastValue(item.textValue);
+		if (getProps().defaultInputValue == null && !isMultiple()) {
+			const key = selectedKey();
+			if (key != null) {
+				const item = originalCollection().getItem(key);
+				if (item) {
+					setInternalInputValue(item.textValue);
+					setLastValue(item.textValue);
+				}
 			}
 		}
 		inputInitialized = true;
 	}
 	const resetInputValue = () => {
-		const textValue = selectedItem()?.textValue ?? "";
+		const key = selectedKey();
+		const textValue = key != null ? originalCollection().getItem(key)?.textValue ?? "" : "";
 		setLastValue(textValue);
 		setInputValue(textValue);
 	};
@@ -5779,14 +6101,25 @@ function createComboBoxState(props) {
 		overlayState.toggle();
 	};
 	const commitCustomValue = () => {
-		setSelectedKey(null);
+		if (isMultiple()) {
+			setLastValue(inputValue());
+			closeMenu();
+			return;
+		}
+		setValue(null);
 		closeMenu();
 	};
-	const commitSelection = () => {
-		if (isSelectionControlled() && isInputControlled()) {
-			getProps().onSelectionChange?.(selectedKey());
-			const item = selectedItem();
-			setLastValue(item?.textValue ?? "");
+	const commitSelection = (shouldForceSelectionChange = false) => {
+		if (isValueControlled() && isInputControlled()) {
+			const key = selectedKey();
+			const itemText = key != null ? originalCollection().getItem(key)?.textValue ?? "" : "";
+			if (shouldForceSelectionChange || isMultiple() || inputValue() !== itemText) {
+				getProps().onSelectionChange?.(key);
+				const current = displayValue();
+				const changeValue = isKeyList(current) ? [...current] : current;
+				getProps().onChange?.(changeValue);
+			}
+			setLastValue(itemText);
 			closeMenu();
 		} else {
 			resetInputValue();
@@ -5802,12 +6135,9 @@ function createComboBoxState(props) {
 	};
 	const commit = () => {
 		const focusedKey = listState.focusedKey();
-		if (isMultiple()) {
-			if (overlayState.isOpen() && focusedKey != null) select(focusedKey);
-			return;
-		}
 		if (overlayState.isOpen() && focusedKey != null) {
-			if (selectedKey() === focusedKey) commitSelection();
+			if (!isMultiple() && selectedKey() === focusedKey) commitSelection(true);
+			else if (isMultiple()) select(focusedKey);
 			else listState.selectionManager.select(focusedKey);
 		} else commitValue();
 	};
@@ -5816,10 +6146,24 @@ function createComboBoxState(props) {
 		else commitSelection();
 	};
 	const [isFocused, setIsFocused] = createInternalSignal(false);
+	let valueOnFocus = [untrack(inputValue), untrack(displayValue)];
+	const hasMoved = (a, b) => {
+		if (a === b) return false;
+		if (Array.isArray(a) && Array.isArray(b)) {
+			if (a.length !== b.length) return true;
+			for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return true;
+			return false;
+		}
+		return true;
+	};
 	const setFocused = (focused) => {
 		if (focused) {
+			valueOnFocus = [inputValue(), displayValue()];
 			if (menuTrigger() === "focus" && !getProps().isReadOnly) open(null, "focus");
-		} else if (shouldCloseOnBlur()) commitValue();
+		} else {
+			if (shouldCloseOnBlur()) commitValue();
+			if (inputValue() !== valueOnFocus[0] || hasMoved(displayValue(), valueOnFocus[1])) validation.commitValidation();
+		}
 		setIsFocused(focused);
 	};
 	let lastDisplayValue = untrack(selectedKey);
@@ -5834,15 +6178,16 @@ function createComboBoxState(props) {
 		trigger: menuTrigger(),
 		showingAll: showAllItems(),
 		inputControlled: isInputControlled(),
-		selectionControlled: isSelectionControlled()
-	}), ({ input, filtered, isOpen, last, focused, key, allowsEmpty, trigger, showingAll, inputControlled, selectionControlled }) => {
+		selectionControlled: isValueControlled(),
+		multiple: isMultiple()
+	}), ({ input, filtered, isOpen, last, focused, key, allowsEmpty, trigger, showingAll, inputControlled, selectionControlled, multiple }) => {
 		if (focused && (filtered.size > 0 || allowsEmpty) && !isOpen && input !== last && trigger !== "manual") open(null, "input");
 		if (!showingAll && !allowsEmpty && isOpen && filtered.size === 0) closeMenu();
 		if (key != null && key !== lastDisplayValue) closeMenu();
 		if (input !== last) {
 			listState.setFocusedKey(null);
 			setShowAllItems(false);
-			if (input === "" && (!inputControlled || !selectionControlled)) setSelectedKey(null);
+			if (!multiple && input === "" && (!inputControlled || !selectionControlled)) setValue(null);
 			setLastValue(input);
 		}
 		lastDisplayValue = key;
@@ -5854,7 +6199,7 @@ function createComboBoxState(props) {
 			key,
 			textValue: (key != null ? originalCollection().getItem(key) : null)?.textValue ?? "",
 			inputControlled: isInputControlled(),
-			selectionControlled: isSelectionControlled()
+			selectionControlled: isValueControlled()
 		};
 	}, (data) => {
 		if (!data) return;
@@ -5871,34 +6216,39 @@ function createComboBoxState(props) {
 			const current = new Set(selectedKeys());
 			if (current.has(key)) current.delete(key);
 			else current.add(key);
-			setSelectedKeys(current);
+			setValue([...current]);
 		} else {
-			setSelectedKey(key);
+			setValue(key);
 			closeMenu();
 		}
 	};
+	const setSelectedKeys = (keys) => {
+		setValue([...keys]);
+	};
 	const removeSelectedKey = (key) => {
-		if (isMultiple()) {
-			const current = new Set(selectedKeys());
-			current.delete(key);
-			setSelectedKeys(current);
-		}
+		if (!isMultiple()) return;
+		setValue([...selectedKeys()].filter((selected) => selected !== key));
 	};
 	const selectionMode = () => getProps().selectionMode ?? "single";
-	const isSelected = (key) => {
-		if (isMultiple()) return selectedKeys().has(key);
-		return selectedKey() === key;
-	};
+	const isSelected = (key) => selectedKeys().has(key);
 	return {
+		realtimeValidation: validation.realtimeValidation,
+		displayValidation: validation.displayValidation,
+		updateValidation: validation.updateValidation,
+		resetValidation: validation.resetValidation,
+		commitValidation: validation.commitValidation,
 		collection: displayedCollection,
 		isOpen: overlayState.isOpen,
 		open,
 		close: commitValue,
 		toggle,
 		selectedKey,
-		defaultSelectedKey: getProps().defaultSelectedKey ?? null,
+		defaultSelectedKey,
 		selectedItem,
 		setSelectedKey,
+		value: () => displayValue(),
+		defaultValue,
+		setValue,
 		selectedKeys,
 		setSelectedKeys,
 		selectedItems,
@@ -5929,6 +6279,14 @@ function createComboBoxState(props) {
 		}
 	};
 }
+function isKeyList(value) {
+	return value !== null && typeof value !== "string" && typeof value !== "number";
+}
+function convertValue(value) {
+	if (value == null) return [];
+	if (typeof value === "string" || typeof value === "number") return [value];
+	return value;
+}
 /**
 * Filter a collection based on input value.
 * RAC `useComboBoxState.ts:644-672` copies nodes into a new `ListCollection`,
@@ -5969,7 +6327,7 @@ function filterCollection(collection, inputValue, filter) {
 * Creates state for a tab list component.
 */
 function createTabListState(props) {
-	const getProps = () => access(props);
+	const getProps = propsAccessor(props);
 	const collection = createMemo(() => {
 		const p = getProps();
 		return new ListCollection((p.items ?? []).map((item, index) => {
@@ -6041,32 +6399,13 @@ function createTabListState(props) {
 		setChildFocusStrategy(childStrategy ?? null);
 	};
 	let lastSelectedKey = selectedKey();
-	let selectedToFocusedFrame = null;
-	const copySelectedToFocusedKey = () => {
-		selectedToFocusedFrame = null;
-		const sel = selectedKey();
-		if (sel !== null && focusedKey() === null || !isFocused() && sel !== lastSelectedKey) setFocusedKey(sel);
-		lastSelectedKey = sel;
-	};
 	createEffect(() => ({
 		sel: selectedKey(),
 		foc: focusedKey(),
 		focused: isFocused()
 	}), ({ sel, foc, focused }) => {
-		if (sel !== null && foc === null) {
-			setFocusedKey(sel);
-			lastSelectedKey = sel;
-			return;
-		}
-		if (!focused && sel !== lastSelectedKey) {
-			if (selectedToFocusedFrame != null) return;
-			selectedToFocusedFrame = requestAnimationFrame(copySelectedToFocusedKey);
-		}
-	});
-	onCleanup(() => {
-		if (selectedToFocusedFrame == null) return;
-		cancelAnimationFrame(selectedToFocusedFrame);
-		selectedToFocusedFrame = null;
+		if (sel !== null && foc === null || !focused && sel !== lastSelectedKey) setFocusedKey(sel);
+		lastSelectedKey = sel;
 	});
 	createEffect(() => {
 		const p = getProps();
@@ -6131,12 +6470,38 @@ function clamp$2(value, min, max) {
 	return result;
 }
 /**
-* Snaps a value to the nearest step.
+* Rounds to the decimal precision implied by a step, including exponential steps.
 */
-function snapToStep$1(value, step, min) {
-	const base = min ?? 0;
-	const diff = value - base;
-	return handleDecimalOperation("+", base, Math.round(diff / step) * step);
+function roundToStepPrecision(value, step) {
+	let roundedValue = value;
+	let precision = 0;
+	const stepString = step.toString();
+	const eIndex = stepString.toLowerCase().indexOf("e-");
+	if (eIndex > 0) precision = Math.abs(Math.floor(Math.log10(Math.abs(step)))) + eIndex;
+	else {
+		const pointIndex = stepString.indexOf(".");
+		if (pointIndex >= 0) precision = stepString.length - pointIndex;
+	}
+	if (precision > 0) {
+		const pow = Math.pow(10, precision);
+		roundedValue = Math.round(roundedValue * pow) / pow;
+	}
+	return roundedValue;
+}
+/**
+* Snaps to the nearest step, then to the last in-range step when that exceeds max.
+* A negative halfway rounds away from the step base.
+*/
+function snapValueToStep(value, min, max, step) {
+	const minNumber = Number(min);
+	const maxNumber = Number(max);
+	const remainder = (value - (isNaN(minNumber) ? 0 : minNumber)) % step;
+	let snappedValue = roundToStepPrecision(Math.abs(remainder) * 2 >= step ? value + Math.sign(remainder) * (step - Math.abs(remainder)) : value - remainder, step);
+	if (!isNaN(minNumber)) {
+		if (snappedValue < minNumber) snappedValue = minNumber;
+		else if (!isNaN(maxNumber) && snappedValue > maxNumber) snappedValue = minNumber + Math.floor(roundToStepPrecision((maxNumber - minNumber) / step, step)) * step;
+	} else if (!isNaN(maxNumber) && snappedValue > maxNumber) snappedValue = Math.floor(roundToStepPrecision(maxNumber / step, step)) * step;
+	return roundToStepPrecision(snappedValue, step);
 }
 function isValidStep(step) {
 	return step != null && !isNaN(step) && step > 0;
@@ -6180,7 +6545,7 @@ function createNumberFieldState(props) {
 	const applyConstraints = (value) => {
 		const p = getProps();
 		if (isNaN(value)) return NaN;
-		if (hasCustomStep()) return clamp$2(snapToStep$1(value, step(), p.minValue), p.minValue, p.maxValue);
+		if (hasCustomStep()) return snapValueToStep(value, p.minValue, p.maxValue, step());
 		return clamp$2(value, p.minValue, p.maxValue);
 	};
 	let initialNumberValue = NaN;
@@ -6262,11 +6627,11 @@ function createNumberFieldState(props) {
 		syncControlledValue();
 		setInputValueInternal(value);
 	};
-	const commit = () => {
+	const commit = (override) => {
 		ensureInitialized();
 		const p = getProps();
-		const input = readNow(inputValue);
-		if (input === "" || input === "-") {
+		const input = override === void 0 ? readNow(inputValue) : override;
+		if (input === "") {
 			setNumberValue(NaN);
 			setInputValueInternal(p.value === void 0 ? "" : formatNumber(readNow(actualNumberValue)));
 			p.onChange?.(NaN);
@@ -6282,7 +6647,7 @@ function createNumberFieldState(props) {
 		parsed = constrainForCommit(parsed);
 		parsed = numberParser().parse(formatNumber(parsed));
 		setNumberValue(parsed);
-		setInputValueInternal(formatNumber(parsed));
+		setInputValueInternal(formatNumber(p.value === void 0 ? parsed : previous));
 		p.onChange?.(parsed);
 		if (parsed !== previous) validation.commitValidation();
 	};
@@ -6293,7 +6658,7 @@ function createNumberFieldState(props) {
 		const current = parsedInputValue();
 		if (isNaN(current)) return true;
 		if (p.maxValue == null) return true;
-		return snapToStep$1(current, step(), p.minValue) > current || handleDecimalOperation("+", current, step()) <= p.maxValue;
+		return snapValueToStep(current, p.minValue, p.maxValue, step()) > current || handleDecimalOperation("+", current, step()) <= p.maxValue;
 	});
 	const canDecrement = createMemo(() => {
 		ensureInitialized();
@@ -6302,15 +6667,20 @@ function createNumberFieldState(props) {
 		const current = parsedInputValue();
 		if (isNaN(current)) return true;
 		if (p.minValue == null) return true;
-		return snapToStep$1(current, step(), p.minValue) < current || handleDecimalOperation("-", current, step()) >= p.minValue;
+		return snapValueToStep(current, p.minValue, p.maxValue, step()) < current || handleDecimalOperation("-", current, step()) >= p.minValue;
 	});
 	const safeNextStep = (operation, minOrMaxValue = 0) => {
 		const p = getProps();
 		const parsed = parsedInputValue();
-		if (isNaN(parsed)) return clamp$2(snapToStep$1(isNaN(minOrMaxValue) ? 0 : minOrMaxValue, step(), p.minValue), p.minValue, p.maxValue);
-		const snapped = snapToStep$1(parsed, step(), p.minValue);
-		if (operation === "+" && snapped > parsed || operation === "-" && snapped < parsed) return clamp$2(snapped, p.minValue, p.maxValue);
-		return clamp$2(snapToStep$1(handleDecimalOperation(operation, parsed, step()), step(), p.minValue), p.minValue, p.maxValue);
+		if (isNaN(parsed)) return snapValueToStep(isNaN(minOrMaxValue) ? 0 : minOrMaxValue, p.minValue, p.maxValue, step());
+		const snapped = snapValueToStep(parsed, p.minValue, p.maxValue, step());
+		if (operation === "+" && snapped > parsed || operation === "-" && snapped < parsed) return snapped;
+		return snapValueToStep(handleDecimalOperation(operation, parsed, step()), p.minValue, p.maxValue, step());
+	};
+	const commitSteppedNumber = (next, refreshWhenUnchanged) => {
+		const committed = readNow(actualNumberValue);
+		setNumberValue(next);
+		if (getProps().value === void 0 || refreshWhenUnchanged && next === committed) setInputValueInternal(formatNumber(next));
 	};
 	const increment = () => {
 		ensureInitialized();
@@ -6318,8 +6688,7 @@ function createNumberFieldState(props) {
 		const p = getProps();
 		if (p.isDisabled || p.isReadOnly) return;
 		const current = safeNextStep("+", p.minValue);
-		setNumberValue(current);
-		setInputValueInternal(formatNumber(current));
+		commitSteppedNumber(current, true);
 		p.onChange?.(current);
 		validation.commitValidation();
 	};
@@ -6329,8 +6698,7 @@ function createNumberFieldState(props) {
 		const p = getProps();
 		if (p.isDisabled || p.isReadOnly) return;
 		const current = safeNextStep("-", p.maxValue);
-		setNumberValue(current);
-		setInputValueInternal(formatNumber(current));
+		commitSteppedNumber(current, true);
 		p.onChange?.(current);
 		validation.commitValidation();
 	};
@@ -6340,9 +6708,8 @@ function createNumberFieldState(props) {
 		const p = getProps();
 		if (p.isDisabled || p.isReadOnly) return;
 		if (p.maxValue == null) return;
-		const snapped = snapToStep$1(p.maxValue, step(), p.minValue);
-		setNumberValue(snapped);
-		setInputValueInternal(formatNumber(snapped));
+		const snapped = snapValueToStep(p.maxValue, p.minValue, p.maxValue, step());
+		commitSteppedNumber(snapped, false);
 		p.onChange?.(snapped);
 		validation.commitValidation();
 	};
@@ -6352,15 +6719,13 @@ function createNumberFieldState(props) {
 		const p = getProps();
 		if (p.isDisabled || p.isReadOnly) return;
 		if (p.minValue == null) return;
-		setNumberValue(p.minValue);
-		setInputValueInternal(formatNumber(p.minValue));
+		commitSteppedNumber(p.minValue, false);
 		p.onChange?.(p.minValue);
 		validation.commitValidation();
 	};
 	const setNumberValuePublic = (value) => {
 		ensureInitialized();
-		setNumberValue(value);
-		setInputValueInternal(formatNumber(value));
+		commitSteppedNumber(value, false);
 		getProps().onChange?.(value);
 	};
 	return {
@@ -6375,7 +6740,7 @@ function createNumberFieldState(props) {
 			return inputValue;
 		},
 		get numberValue() {
-			return actualNumberValue;
+			return parsedInputValue;
 		},
 		canIncrement,
 		canDecrement,
@@ -6448,75 +6813,144 @@ function snapToStep(value, min, max, step) {
 	const decimalPlaces = (step.toString().split(".")[1] || "").length;
 	return clamp$1(parseFloat(snapped.toFixed(decimalPlaces)), min, max);
 }
-/**
-* Provides state management for a slider component.
-*/
 function createSliderState(props) {
 	const getProps = () => access(props);
 	const initialProps = getProps();
-	const initialMinValue = initialProps.minValue ?? DEFAULT_MIN;
-	const initialMaxValue = initialProps.maxValue ?? DEFAULT_MAX;
-	const initialStep = initialProps.step ?? DEFAULT_STEP;
-	const minValue = createMemo(() => getProps().minValue ?? DEFAULT_MIN);
-	const maxValue = createMemo(() => getProps().maxValue ?? DEFAULT_MAX);
-	const step = createMemo(() => getProps().step ?? DEFAULT_STEP);
+	const arrayMode = Array.isArray(initialProps.value) || Array.isArray(initialProps.defaultValue);
+	const initialArray = Array.isArray(initialProps.value) ? initialProps.value : initialProps.defaultValue;
+	const initialCount = Array.isArray(initialArray) ? initialArray.length : 1;
+	const finite = (value, fallback) => typeof value === "number" && Number.isFinite(value) ? value : fallback;
+	const minValue = createMemo(() => arrayMode ? finite(getProps().minValue, DEFAULT_MIN) : getProps().minValue ?? DEFAULT_MIN);
+	const step = createMemo(() => {
+		const next = arrayMode ? finite(getProps().step, DEFAULT_STEP) : getProps().step ?? DEFAULT_STEP;
+		return arrayMode && next <= 0 ? DEFAULT_STEP : next;
+	});
+	const maxValue = createMemo(() => {
+		const next = arrayMode ? finite(getProps().maxValue, DEFAULT_MAX) : getProps().maxValue ?? DEFAULT_MAX;
+		return arrayMode && next <= minValue() ? minValue() + step() : next;
+	});
 	const orientation = createMemo(() => getProps().orientation ?? "horizontal");
 	const isDisabled = createMemo(() => getProps().isDisabled ?? false);
 	const pageStep = createMemo(() => Math.max(step(), snapToStep((maxValue() - minValue()) / 10, 0, maxValue() - minValue(), step())));
 	const isControlled = () => getProps().value !== void 0;
-	const [internalValue, setInternalValue] = createInternalSignal(snapToStep(initialProps.defaultValue ?? initialMinValue, initialMinValue, initialMaxValue, initialStep));
-	const [isDragging, setIsDragging] = createInternalSignal(false);
-	const [isFocused, setIsFocused] = createInternalSignal(false);
-	const value = createMemo(() => {
-		const p = getProps();
-		return snapToStep(isControlled() ? p.value ?? minValue() : internalValue(), minValue(), maxValue(), step());
-	});
-	const getValuePercent = createMemo(() => {
-		return (value() - minValue()) / (maxValue() - minValue());
-	});
-	const getFormattedValue = createMemo(() => {
-		const p = getProps();
-		return new Intl.NumberFormat(p.locale, p.formatOptions).format(value());
-	});
-	const setValue = (newValue) => {
-		if (isDisabled()) return;
+	const fallbackValues = () => Array.from({ length: initialCount }, (_, index) => index === 0 ? minValue() : maxValue());
+	const normalize = (raw) => {
+		const snapped = (raw === void 0 ? fallbackValues() : typeof raw === "number" ? [raw] : raw).map((item, index) => snapToStep(arrayMode ? finite(item, index === 0 ? minValue() : maxValue()) : item, minValue(), maxValue(), step()));
+		return arrayMode ? snapped.sort((a, b) => a - b) : snapped;
+	};
+	const [internalValues, setInternalValues] = createInternalSignal(normalize(initialProps.defaultValue));
+	const values = () => normalize(isControlled() ? getProps().value : internalValues());
+	const initialValues = [...values()];
+	const initialDefaultValues = normalize(initialProps.defaultValue ?? initialValues);
+	const defaultValues = () => normalize(arrayMode ? getProps().defaultValue : initialDefaultValues);
+	if (arrayMode) {
+		const resetSnapshot = () => isControlled() ? void 0 : {
+			defaults: normalize(getProps().defaultValue),
+			min: minValue(),
+			max: maxValue(),
+			step: step()
+		};
+		let previousReset = resetSnapshot();
+		createEffect(resetSnapshot, (next) => {
+			const previous = previousReset;
+			previousReset = next;
+			if (next && (!previous || next.min !== previous.min || next.max !== previous.max || next.step !== previous.step || next.defaults.length !== previous.defaults.length || next.defaults.some((value, index) => value !== previous.defaults[index]))) setInternalValues(next.defaults);
+		});
+	}
+	const [draggings, setDraggings] = createInternalSignal(initialValues.map(() => false));
+	const [focusedThumb, setFocusedThumbValue] = createInternalSignal(void 0);
+	const isDragging = () => draggings().some(Boolean);
+	let pendingValues = [...initialValues];
+	let hasPendingUpdate = false;
+	let nonDraggingRenderedSnapshot;
+	const validIndex = (index) => Number.isInteger(index) && index >= 0 && index < values().length;
+	const getThumbValue = (index) => values()[index];
+	const getThumbMinValue = (index) => index === 0 ? minValue() : values()[index - 1];
+	const getThumbMaxValue = (index) => index === values().length - 1 ? maxValue() : values()[index + 1];
+	const emit = (kind, next) => {
 		const p = getProps();
-		const snappedValue = snapToStep(newValue, minValue(), maxValue(), step());
-		if (!isControlled()) setInternalValue(snappedValue);
-		p.onChange?.(snappedValue);
-	};
-	const setValuePercent = (percent) => {
-		const newValue = clamp$1(percent, 0, 1) * (maxValue() - minValue()) + minValue();
-		setValue(newValue);
-	};
-	const setDragging = (dragging) => {
-		const wasDragging = isDragging();
-		setIsDragging(dragging);
-		if (wasDragging && !dragging) getProps().onChangeEnd?.(value());
-	};
-	const increment = (stepMultiplier = 1) => {
-		if (isDisabled()) return;
-		setValue(value() + step() * stepMultiplier);
-	};
-	const decrement = (stepMultiplier = 1) => {
-		if (isDisabled()) return;
-		setValue(value() - step() * stepMultiplier);
-	};
-	const setFocused = (focused) => {
-		setIsFocused(focused);
-	};
+		if (arrayMode) p[kind]?.([...next]);
+		else p[kind]?.(next[0]);
+	};
+	const setThumbValue = (index, nextValue) => {
+		if (isDisabled() || !validIndex(index)) return;
+		const rendered = values();
+		const retainNonDraggingProposal = arrayMode && isControlled() && nonDraggingRenderedSnapshot !== void 0 && rendered.length === nonDraggingRenderedSnapshot.length && rendered.every((item, i) => item === nonDraggingRenderedSnapshot[i]);
+		const base = normalize(isDragging() || retainNonDraggingProposal ? pendingValues : rendered);
+		const lower = index === 0 ? minValue() : base[index - 1];
+		const upper = index === base.length - 1 ? maxValue() : base[index + 1];
+		const snapped = clamp$1(snapToStep(nextValue, minValue(), maxValue(), step()), lower, upper);
+		const next = [...base];
+		next[index] = snapped;
+		pendingValues = next;
+		hasPendingUpdate = true;
+		nonDraggingRenderedSnapshot = !isDragging() && arrayMode && isControlled() ? [...rendered] : void 0;
+		const changed = next.some((item, i) => item !== rendered[i]);
+		if (!isControlled() && (!arrayMode || changed)) setInternalValues(next);
+		if (!arrayMode || changed) emit("onChange", next);
+	};
+	const setThumbPercent = (index, percent) => setThumbValue(index, clamp$1(percent, 0, 1) * (maxValue() - minValue()) + minValue());
+	const getThumbPercent = (index) => (getThumbValue(index) - minValue()) / (maxValue() - minValue());
+	const isThumbDragging = (index) => draggings()[index] ?? false;
+	const setThumbDragging = (index, dragging) => {
+		if (dragging && (!validIndex(index) || arrayMode && isDisabled())) return;
+		const wasDragging = isThumbDragging(index);
+		if (wasDragging === dragging) return;
+		if (dragging && !isDragging()) {
+			pendingValues = [...values()];
+			hasPendingUpdate = false;
+			nonDraggingRenderedSnapshot = void 0;
+		}
+		const next = [...draggings()];
+		next[index] = dragging;
+		setDraggings(next);
+		if (wasDragging && !isDragging()) emit("onChangeEnd", normalize(hasPendingUpdate ? pendingValues : values()));
+	};
+	const setFocusedThumb = (index) => {
+		if (index === void 0 || validIndex(index)) setFocusedThumbValue(index);
+	};
+	const incrementThumb = (index, stepSize = 1) => setThumbValue(index, getThumbValue(index) + Math.max(stepSize, step()));
+	const decrementThumb = (index, stepSize = 1) => setThumbValue(index, getThumbValue(index) - Math.max(stepSize, step()));
+	const formatter = createMemo(() => new Intl.NumberFormat(getProps().locale, getProps().formatOptions));
+	function getFormattedValue(value = values()) {
+		const items = typeof value === "number" ? [value] : value;
+		if (items.length === 0) return "";
+		if (items.length === 1) return formatter().format(items[0]);
+		if (items.length === 2) return formatter().formatRange(items[0], items[1]);
+		return new Intl.ListFormat(formatter().resolvedOptions().locale, { type: "unit" }).format(items.map((item) => formatter().format(item)));
+	}
+	const value = () => getThumbValue(0) ?? minValue();
+	const setValue = (next) => setThumbValue(0, next);
 	return {
+		values,
+		defaultValues,
+		getThumbValue,
+		setThumbValue,
+		setThumbPercent,
+		getThumbPercent,
+		getThumbMinValue,
+		getThumbMaxValue,
+		getThumbValueLabel: (index) => getFormattedValue(getThumbValue(index)),
+		isThumbDragging,
+		setThumbDragging,
+		focusedThumb,
+		setFocusedThumb,
+		incrementThumb,
+		decrementThumb,
 		value,
 		setValue,
-		setValuePercent,
-		getValuePercent,
+		setValuePercent: (percent) => setThumbPercent(0, percent),
+		getValuePercent: () => getThumbPercent(0),
 		getFormattedValue,
 		isDragging,
-		setDragging,
-		isFocused,
-		setFocused,
-		increment,
-		decrement,
+		setDragging: (dragging) => setThumbDragging(0, dragging),
+		isFocused: () => focusedThumb() !== void 0,
+		setFocused: (focused) => {
+			if (focused) setFocusedThumb(0);
+			else if (focusedThumb() === 0) setFocusedThumb(void 0);
+		},
+		increment: (multiplier = 1) => setValue(value() + step() * multiplier),
+		decrement: (multiplier = 1) => setValue(value() - step() * multiplier),
 		get minValue() {
 			return minValue();
 		},
@@ -6991,7 +7425,7 @@ function createDisclosureGroupState(props = {}) {
 * Handles row selection, focus management, and keyboard navigation state.
 */
 function createGridState(options) {
-	const getOptions = () => options();
+	const getOptions = propsAccessor(options);
 	const disabledKeys = createMemo(() => {
 		const keys = getOptions().disabledKeys;
 		return keys ? new Set(keys) : /* @__PURE__ */ new Set();
@@ -7014,15 +7448,18 @@ function createGridState(options) {
 	const disallowEmptySelection = createMemo(() => getOptions().disallowEmptySelection ?? false);
 	const disabledBehavior = createMemo(() => getOptions().disabledBehavior ?? "all");
 	const focusMode = createMemo(() => getOptions().focusMode ?? "row");
+	let lastSelectionBehavior = selectionBehaviorProp();
 	createEffect(selectionBehaviorProp, (behavior) => {
-		setSelectionBehaviorState(behavior);
+		if (behavior !== lastSelectionBehavior) {
+			setSelectionBehaviorState(behavior);
+			lastSelectionBehavior = behavior;
+		}
 	});
 	createEffect(() => ({
 		prop: selectionBehaviorProp(),
-		state: selectionBehaviorState(),
 		keys: selectedKeys()
-	}), ({ prop, state, keys }) => {
-		if (prop === "replace" && state === "toggle" && keys !== "all" && keys.size === 0) setSelectionBehaviorState("replace");
+	}), ({ prop, keys }) => {
+		if (prop === "replace" && selectionBehaviorState() === "toggle" && keys !== "all" && keys.size === 0) setSelectionBehaviorState("replace");
 	});
 	const setFocusedKey = (key, strategy = "first") => {
 		const collection = getOptions().collection;
@@ -7279,7 +7716,7 @@ const OPPOSITE_SORT_DIRECTION = {
 * Extends grid state with sorting and table-specific features.
 */
 function createTableState(options) {
-	const getOptions = () => options();
+	const getOptions = propsAccessor(options);
 	const gridState = createGridState(() => ({
 		collection: getOptions().collection,
 		disabledKeys: getOptions().disabledKeys,
@@ -7321,7 +7758,7 @@ function createTableState(options) {
 			return gridState.disabledBehavior;
 		},
 		get isKeyboardNavigationDisabled() {
-			return gridState.isKeyboardNavigationDisabled;
+			return getOptions().collection.size === 0 || gridState.isKeyboardNavigationDisabled;
 		},
 		get focusedKey() {
 			return gridState.focusedKey;
@@ -7759,7 +8196,7 @@ function createTableCollection(options) {
 * expanded rows in addition to the selection, sort and focus handled by the table state.
 */
 function createTreeGridState(options) {
-	const getOptions = () => options();
+	const getOptions = propsAccessor(options);
 	const [internalExpandedKeys, setInternalExpandedKeys] = createInternalSignal(getInitialExpanded(getOptions().UNSTABLE_defaultExpandedKeys));
 	const expandedKeys = () => {
 		const controlled = getOptions().UNSTABLE_expandedKeys;
@@ -7902,13 +8339,28 @@ function parseColumnDef(col, tableWidth) {
 		maxWidth
 	};
 }
+function applyFractionalRemainder(widths, columns, originalWidth) {
+	if (!(originalWidth - Math.floor(originalWidth) > 0) || columns.length === 0) return;
+	const lastKey = columns[columns.length - 1].key;
+	if (widths.has(lastKey)) {
+		const tableFractionalWidth = originalWidth.toString().split(".")[1];
+		if (tableFractionalWidth) {
+			const columnWidth = Math.floor(widths.get(lastKey)).toString();
+			widths.set(lastKey, Number(columnWidth + "." + tableFractionalWidth));
+		}
+	}
+}
 /**
 * Distribute `tableWidth` among columns:
-*  1. Fixed-width columns get their declared width (clamped to min/max).
-*  2. Remaining space is distributed among fractional columns proportionally.
+*  1. Floor tableWidth to integer before column sizing, matching upstream TableUtils.calculateColumnSizes.
+*  2. Fixed-width columns get their declared width (clamped to min/max).
+*  3. Remaining space is distributed among fractional columns proportionally with cascading rounding.
+*  4. Leftover sub-pixel width is added to the last column so widths sum exactly to tableWidth.
 */
 function distributeWidths(columns, tableWidth) {
-	const parsed = columns.map((c) => parseColumnDef(c, tableWidth));
+	const originalWidth = tableWidth;
+	const availableWidth = Math.max(0, Math.floor(tableWidth));
+	const parsed = columns.map((c) => parseColumnDef(c, availableWidth));
 	let usedSpace = 0;
 	let totalFr = 0;
 	for (const p of parsed) if (p.fr > 0) totalFr += p.fr;
@@ -7916,16 +8368,22 @@ function distributeWidths(columns, tableWidth) {
 		const w = Math.max(p.minWidth, Math.min(p.maxWidth, p.fixedPx));
 		usedSpace += w;
 	}
-	const remainingSpace = Math.max(0, tableWidth - usedSpace);
+	const remainingSpace = Math.max(0, availableWidth - usedSpace);
 	const perFr = totalFr > 0 ? remainingSpace / totalFr : 0;
 	const widths = /* @__PURE__ */ new Map();
+	let fpTotal = 0;
+	let intTotal = 0;
 	for (const p of parsed) {
-		let w;
-		if (p.fr > 0) w = p.fr * perFr;
-		else w = p.fixedPx;
-		w = Math.max(p.minWidth, Math.min(p.maxWidth, w));
-		widths.set(p.key, Math.round(w));
-	}
+		let targetSize;
+		if (p.fr > 0) targetSize = p.fr * perFr;
+		else targetSize = p.fixedPx;
+		targetSize = Math.max(p.minWidth, Math.min(p.maxWidth, targetSize));
+		const rounded = Math.round(targetSize + fpTotal) - intTotal;
+		fpTotal += targetSize;
+		intTotal += rounded;
+		widths.set(p.key, rounded);
+	}
+	applyFractionalRemainder(widths, columns, originalWidth);
 	return widths;
 }
 /**
@@ -7946,6 +8404,7 @@ function createTableColumnResizeState(props) {
 		if (over.size === 0) return base;
 		const merged = new Map(base);
 		for (const [key, width] of over) if (merged.has(key)) merged.set(key, width);
+		applyFractionalRemainder(merged, getProps().columns, getProps().tableWidth);
 		return merged;
 	});
 	const minWidthMap = createMemo(() => {
@@ -7976,13 +8435,14 @@ function createTableColumnResizeState(props) {
 	const updateResizedColumns = (key, width) => {
 		const minW = getColumnMinWidth(key);
 		const maxW = getColumnMaxWidth(key);
-		const clampedWidth = Math.round(Math.max(minW, Math.min(maxW, width)));
+		const clampedWidth = Math.max(minW, Math.min(maxW, Math.floor(width)));
 		const newOverrides = new Map(overrides());
 		newOverrides.set(key, clampedWidth);
 		setOverrides(newOverrides);
 		const base = initialWidths();
 		const merged = new Map(base);
 		for (const [k, w] of newOverrides) if (merged.has(k)) merged.set(k, w);
+		applyFractionalRemainder(merged, getProps().columns, getProps().tableWidth);
 		return merged;
 	};
 	return {
@@ -8009,7 +8469,7 @@ function createTableColumnResizeState(props) {
 * Handles expansion, selection, focus management, and keyboard navigation state.
 */
 function createTreeState(options) {
-	const getOptions = () => options();
+	const getOptions = propsAccessor(options);
 	const disabledKeys = createMemo(() => {
 		const keys = getOptions().disabledKeys;
 		return keys ? new Set(keys) : /* @__PURE__ */ new Set();
@@ -8040,15 +8500,18 @@ function createTreeState(options) {
 	const selectionBehavior = createMemo(() => selectionBehaviorState());
 	const disallowEmptySelection = createMemo(() => getOptions().disallowEmptySelection ?? false);
 	const disabledBehavior = createMemo(() => getOptions().disabledBehavior ?? "all");
+	let lastSelectionBehavior = selectionBehaviorProp();
 	createEffect(selectionBehaviorProp, (behavior) => {
-		setSelectionBehaviorState(behavior);
+		if (behavior !== lastSelectionBehavior) {
+			setSelectionBehaviorState(behavior);
+			lastSelectionBehavior = behavior;
+		}
 	});
 	createEffect(() => ({
 		prop: selectionBehaviorProp(),
-		state: selectionBehaviorState(),
 		keys: selectedKeys()
-	}), ({ prop, state, keys }) => {
-		if (prop === "replace" && state === "toggle" && keys !== "all" && keys.size === 0) setSelectionBehaviorState("replace");
+	}), ({ prop, keys }) => {
+		if (prop === "replace" && selectionBehaviorState() === "toggle" && keys !== "all" && keys.size === 0) setSelectionBehaviorState("replace");
 	});
 	const setFocusedKey = (key, strategy = "first") => {
 		setFocusedKeyInternal(key);
@@ -10558,6 +11021,14 @@ function createColorSliderState(options) {
 		const init = initValue();
 		if (init) setInternalValue(init);
 	}
+	const initialOptions = getOptions();
+	const resetColor = (color) => {
+		const normalized = normalizeColor(color);
+		return initialOptions.colorSpace ? normalized.toFormat(initialOptions.colorSpace) : normalized;
+	};
+	const initialDefault = initialOptions.defaultValue ? resetColor(initialOptions.defaultValue) : void 0;
+	const firstColor = initialOptions.value !== void 0 ? resetColor(initialOptions.value) : void 0;
+	const defaultThumbValue = (initialDefault ?? firstColor ?? resetColor("#ff0000")).getChannelValue(initialOptions.channel);
 	const value = createMemo(() => {
 		const opts = getOptions();
 		if (opts.value !== void 0) return normalizeValue(opts.value);
@@ -10631,7 +11102,9 @@ function createColorSliderState(options) {
 	};
 	const getDisplayColor = () => {
 		const v = value();
-		if (channel() === "hue") return normalizeColor(`hsl(${v.getChannelValue("hue")}, 100%, 50%)`);
+		const current = channel();
+		if (current === "hue") return normalizeColor(`hsl(${v.getChannelValue("hue")}, 100%, 50%)`);
+		if (current === "alpha") return v;
 		return v.withChannelValue("alpha", 1);
 	};
 	const getThumbValueLabel = () => {
@@ -10668,6 +11141,7 @@ function createColorSliderState(options) {
 		get isDisabled() {
 			return isDisabled();
 		},
+		defaultThumbValue,
 		getThumbValue,
 		getThumbMinValue,
 		getThumbMaxValue,
@@ -10698,6 +11172,9 @@ function createColorAreaState(options) {
 		return colorSpace ? color.toFormat(colorSpace) : color;
 	};
 	const [internalValue, setInternalValue] = createInternalSignal(null);
+	const firstOptions = getOptions();
+	const controlledInitial = firstOptions.value !== void 0 ? normalizeValue(firstOptions.value) : void 0;
+	const initialValue = normalizeValue(firstOptions.defaultValue ?? "#ff0000");
 	const [isDragging, setIsDragging] = createInternalSignal(false);
 	const initValue = () => {
 		const opts = getOptions();
@@ -10745,6 +11222,9 @@ function createColorAreaState(options) {
 	};
 	const getXValue = () => value().getChannelValue(xChannel());
 	const getYValue = () => value().getChannelValue(yChannel());
+	const setValue = (newValue) => {
+		updateValue(normalizeValue(newValue));
+	};
 	const setXValue = (newValue) => {
 		const range = xRange();
 		const clamped = Math.max(range.minValue, Math.min(range.maxValue, newValue));
@@ -10813,6 +11293,9 @@ function createColorAreaState(options) {
 		get value() {
 			return value();
 		},
+		get defaultValue() {
+			return controlledInitial ?? initialValue;
+		},
 		get xChannel() {
 			return xChannel();
 		},
@@ -10844,6 +11327,7 @@ function createColorAreaState(options) {
 		getYValue,
 		setXValue,
 		setYValue,
+		setValue,
 		setColorFromPoint,
 		getThumbPosition,
 		incrementX,
@@ -10870,7 +11354,9 @@ function createColorWheelState(options) {
 		const value = normalizeColor(color);
 		return value.toFormat(value.getColorSpace() === "hsb" ? "hsb" : "hsl");
 	};
-	const initialValue = normalizeWheelValue(getOptions().defaultValue ?? defaultColor);
+	const firstOptions = getOptions();
+	const controlledInitial = firstOptions.value !== void 0 ? normalizeWheelValue(firstOptions.value) : void 0;
+	const initialValue = normalizeWheelValue(firstOptions.defaultValue ?? defaultColor);
 	const [internalValue, setInternalValue] = createInternalSignal(initialValue);
 	const [isDragging, setIsDragging] = createInternalSignal(false);
 	let valueRef = initialValue;
@@ -10912,9 +11398,7 @@ function createColorWheelState(options) {
 	const radToDeg = (rad) => rad * 180 / Math.PI;
 	const degToRad = (deg) => deg * Math.PI / 180;
 	const cartesianToAngle = (x, y, radius) => {
-		const clampedX = Math.max(-radius, Math.min(radius, x));
-		const clampedY = Math.max(-radius, Math.min(radius, y));
-		return mod(radToDeg(Math.atan2(clampedY, clampedX)), 360);
+		return mod(radToDeg(Math.atan2(y / radius, x / radius)), 360);
 	};
 	const angleToCartesian = (angle, radius) => ({
 		x: radius * Math.cos(degToRad(angle)),
@@ -10973,7 +11457,7 @@ function createColorWheelState(options) {
 			return value();
 		},
 		get defaultValue() {
-			return initialValue;
+			return controlledInitial ?? initialValue;
 		},
 		get isDragging() {
 			return isDragging();
@@ -11075,9 +11559,13 @@ function createColorFieldState(options) {
 	const getOptions = () => options();
 	const initialOptions = getOptions();
 	const initialValue = getDefaultValue(initialOptions);
+	const initialDefault = initialOptions.defaultValue !== void 0 ? normalizeNullableColor(initialOptions.defaultValue) : void 0;
+	const firstColor = initialOptions.value !== void 0 ? normalizeNullableColor(initialOptions.value) : void 0;
+	const defaultColorValue = initialDefault ?? firstColor ?? null;
 	const [internalValue, setInternalValue] = createInternalSignal(initialValue);
 	const [inputValue, setInputValueInternal] = createInternalSignal(formatColorValue(initialValue, initialOptions.channel, initialOptions.colorSpace, initialOptions.colorFormat, initialOptions.locale ?? "en-US"));
 	const [invalidInput, setInvalidInput] = createInternalSignal(false);
+	let isChannelInputEdited = false;
 	const channel = createMemo(() => getOptions().channel);
 	const colorSpace = createMemo(() => getOptions().colorSpace);
 	const locale = createMemo(() => getOptions().locale ?? "en-US");
@@ -11093,6 +11581,7 @@ function createColorFieldState(options) {
 	const isInvalid = createMemo(() => (getOptions().isInvalid ?? false) || invalidInput());
 	const formatCurrentValue = (color = value()) => formatColorValue(color, channel(), colorSpace(), getOptions().colorFormat, locale());
 	createEffect(() => formatCurrentValue(), (formatted) => {
+		isChannelInputEdited = false;
 		setInputValueInternal(formatted);
 		setInvalidInput(false);
 	});
@@ -11100,56 +11589,69 @@ function createColorFieldState(options) {
 		const opts = getOptions();
 		if (opts.value === void 0) setInternalValue(newColor);
 		opts.onChange?.(newColor);
+		isChannelInputEdited = false;
 		setInputValueInternal(formatCurrentValue(newColor));
 		setInvalidInput(false);
 	};
 	const setInputValue = (text) => {
+		isChannelInputEdited = true;
 		setInputValueInternal(text);
 		setInvalidInput(false);
 	};
 	const setColorValue = (newColor) => {
 		updateValue(newColor);
 	};
+	const currentValue = () => {
+		const opts = getOptions();
+		return opts.value !== void 0 ? normalizeNullableColor(opts.value) : readNow(internalValue);
+	};
 	const commit = () => {
 		const text = readNow(inputValue).trim();
 		const opts = getOptions();
 		const chan = channel();
+		const current = currentValue();
 		if (!text) {
-			updateValue(null);
-			return;
-		}
-		if (chan) {
-			const displayColor = colorValue();
+			if (current !== null) updateValue(null);
+		} else if (chan) {
+			const displayColor = getDisplayColor(current, colorSpace());
 			const rawValue = parseChannelValue(text, displayColor, chan);
-			if (rawValue == null) {
-				setInputValueInternal(formatCurrentValue());
-				setInvalidInput(false);
-				return;
+			if (isChannelInputEdited && rawValue !== null) {
+				const next = displayColor.withChannelValue(chan, rawValue);
+				if (current === null || next.getChannelValue(chan) !== displayColor.getChannelValue(chan)) updateValue(next);
 			}
-			updateValue(displayColor.withChannelValue(chan, rawValue));
-			return;
-		}
+		} else try {
+			const next = parseHexValue(text, opts.colorFormat);
+			if (current === null || next.toHexInt() !== current.toHexInt() || opts.colorFormat === "hexa" && next.getChannelValue("alpha") !== current.getChannelValue("alpha")) updateValue(next);
+		} catch {}
+		isChannelInputEdited = false;
+		setInputValueInternal(formatCurrentValue(currentValue()));
+		setInvalidInput(false);
+	};
+	const incrementHex = (amount) => {
+		const text = readNow(inputValue);
+		let parsed = null;
 		try {
-			updateValue(parseHexValue(text, opts.colorFormat));
+			parsed = parseColor(text.startsWith("#") ? text : `#${text}`);
 		} catch {
-			setInputValueInternal(formatCurrentValue());
-			setInvalidInput(false);
+			parsed = null;
 		}
-	};
-	const incrementHex = (amount) => {
-		const currentColor = value();
-		if (!currentColor) return;
-		const newColor = hexIntToColor(currentColor.toFormat("rgb").toHexInt() + amount);
-		updateValue(getOptions().colorFormat ? newColor.toFormat(getOptions().colorFormat) : newColor);
+		const nextColor = hexIntToColor((parsed ?? hexIntToColor(0)).toFormat("rgb").toHexInt() + amount);
+		const current = value();
+		if (current && current.toFormat("rgb").toHexInt() === nextColor.toHexInt()) return;
+		const format = getOptions().colorFormat;
+		updateValue(format ? nextColor.toFormat(format) : nextColor);
 	};
 	const updateChannel = (amount) => {
 		const chan = channel();
 		if (!chan) return;
-		const displayColor = colorValue();
+		const current = currentValue();
+		const displayColor = getDisplayColor(current, colorSpace());
 		const range = displayColor.getChannelRange(chan);
-		const currentValue = displayColor.getChannelValue(chan);
-		const nextValue = amount === "min" ? range.minValue : amount === "max" ? range.maxValue : Math.min(range.maxValue, Math.max(range.minValue, currentValue + amount));
-		updateValue(displayColor.withChannelValue(chan, nextValue));
+		const currentChannel = displayColor.getChannelValue(chan);
+		const nextValue = amount === "min" ? range.minValue : amount === "max" ? range.maxValue : Math.min(range.maxValue, Math.max(range.minValue, currentChannel + amount));
+		const next = displayColor.withChannelValue(chan, nextValue);
+		if (current !== null && next.getChannelValue(chan) === currentChannel) return;
+		updateValue(next);
 	};
 	const increment = () => {
 		const chan = channel();
@@ -11195,6 +11697,7 @@ function createColorFieldState(options) {
 		get colorValue() {
 			return colorValue();
 		},
+		defaultColorValue,
 		get inputValue() {
 			return inputValue();
 		},
@@ -11572,6 +12075,9 @@ function createDraggableCollectionState(props) {
 			if (p.isSelected) return p.isSelected(key);
 			const selected = selectedKeySet(p.selectedKeys, p.collection);
 			return selected === "all" ? true : selected.has(key);
+		},
+		get collection() {
+			return getProps().collection;
 		}
 	};
 }
@@ -11781,7 +12287,10 @@ function createDroppableCollectionState(props) {
 		drop,
 		getDropOperation,
 		shouldAcceptItemDrop,
-		isDropTargetFor
+		isDropTargetFor,
+		get collection() {
+			return getProps().collection;
+		}
 	};
 }
 /**
@@ -11910,8 +12419,11 @@ function createListData(options) {
 		},
 		insertBefore(key, ...values) {
 			setState((s) => {
-				const index = s.items.findIndex((item) => getKey(item) === key);
-				if (index === -1) return s;
+				let index = s.items.findIndex((item) => getKey(item) === key);
+				if (index === -1) {
+					if (s.items.length === 0) index = 0;
+					else return s;
+				}
 				return insertItems(s, index, ...values);
 			});
 		},
@@ -12238,6 +12750,8 @@ function createTreeData(options) {
 			});
 		},
 		remove(...keys) {
+			if (keys.length === 0) return;
+			let nextMap;
 			setTreeState((state) => {
 				let { items, nodeMap } = state;
 				let newMap = new Map(nodeMap);
@@ -12247,15 +12761,16 @@ function createTreeData(options) {
 					newItems = result.items;
 					newMap = result.nodeMap;
 				}
+				nextMap = newMap;
 				return {
 					items: newItems,
 					nodeMap: newMap
 				};
 			});
 			setSelectedKeys((sel) => {
-				if (sel === "all") return sel;
+				if (sel === "all" || !nextMap) return sel;
 				const newSel = new Set(sel);
-				for (const key of keys) newSel.delete(key);
+				for (const key of sel) if (!nextMap.has(key)) newSel.delete(key);
 				return newSel;
 			});
 		},
@@ -12611,8 +13126,11 @@ function createAsyncList(options) {
 		},
 		insertBefore(key, ...values) {
 			setState((s) => {
-				const index = s.items.findIndex((item) => getKey(item) === key);
-				if (index === -1) return s;
+				let index = s.items.findIndex((item) => getKey(item) === key);
+				if (index === -1) {
+					if (s.items.length === 0) index = 0;
+					else return s;
+				}
 				return {
 					...s,
 					items: [
@@ -12625,8 +13143,11 @@ function createAsyncList(options) {
 		},
 		insertAfter(key, ...values) {
 			setState((s) => {
-				const index = s.items.findIndex((item) => getKey(item) === key);
-				if (index === -1) return s;
+				let index = s.items.findIndex((item) => getKey(item) === key);
+				if (index === -1) {
+					if (s.items.length === 0) index = 0;
+					else return s;
+				}
 				return {
 					...s,
 					items: [
@@ -12659,6 +13180,7 @@ function createAsyncList(options) {
 					for (const key of keys) newSelection.delete(key);
 					selectedKeys = newSelection;
 				}
+				if (s.cursor == null && items.length === 0) selectedKeys = /* @__PURE__ */ new Set();
 				return {
 					...s,
 					items,
@@ -12759,100 +13281,144 @@ function getColorChannels(colorSpace) {
 * Creates state for a step list component.
 */
 function createStepListState(props) {
-	const items = () => props.items;
-	const indexMap = createMemo(() => {
-		const map = /* @__PURE__ */ new Map();
-		const currentItems = items();
-		for (let i = 0; i < currentItems.length; i++) map.set(currentItems[i].key, i);
-		return map;
-	});
-	const disabledKeysSet = createMemo(() => new Set(props.disabledKeys ?? []));
-	const isDisabled = () => props.isDisabled ?? false;
+	const isListDisabled = () => props.isDisabled ?? false;
 	const isReadOnly = () => props.isReadOnly ?? false;
+	const items = () => props.items ?? [];
 	const [lastCompletedStepInternal, setLastCompletedStepInternal] = createInternalSignal(props.defaultLastCompletedStep ?? null);
 	const lastCompletedStep = () => {
 		if (props.lastCompletedStep !== void 0) return props.lastCompletedStep;
 		return lastCompletedStepInternal();
 	};
+	const isCompleted = (step) => {
+		if (step == null) return false;
+		const completed = lastCompletedStep();
+		if (completed == null) return false;
+		const { indexMap } = keyMaps();
+		const stepIdx = indexMap.get(step);
+		const completedIdx = indexMap.get(completed);
+		if (stepIdx === void 0 || completedIdx === void 0) return false;
+		return stepIdx <= completedIdx;
+	};
+	const isSelectable = (step) => {
+		if (isListDisabled() || singleSelectListState.disabledKeys().has(step) || isReadOnly()) return false;
+		if (isCompleted(step)) return true;
+		const { keysLinkedList } = keyMaps();
+		const prevStep = keysLinkedList.get(step);
+		return prevStep !== void 0 && isCompleted(prevStep) || step === singleSelectListState.collection().getFirstKey();
+	};
+	const findInitialSelectedKey = () => {
+		if (props.defaultSelectedKey !== void 0) return props.defaultSelectedKey;
+		const currentItems = props.items ?? [];
+		const disabled = new Set(props.disabledKeys ?? []);
+		for (const item of currentItems) if (!disabled.has(item.key)) return item.key;
+		return currentItems[0]?.key;
+	};
+	const singleSelectListState = createSingleSelectListState({
+		get items() {
+			return props.items ?? [];
+		},
+		getKey(item) {
+			return item.key;
+		},
+		getTextValue(item) {
+			return item.label ?? item.textValue ?? (item.key != null ? String(item.key) : "");
+		},
+		get disabledKeys() {
+			return props.disabledKeys;
+		},
+		get selectedKey() {
+			return props.selectedKey;
+		},
+		get defaultSelectedKey() {
+			return findInitialSelectedKey();
+		},
+		onSelectionChange(key) {
+			if (key != null) props.onSelectionChange?.(key);
+		}
+	});
+	const keyMaps = createMemo(() => {
+		const coll = singleSelectListState.collection();
+		const indexMap = /* @__PURE__ */ new Map();
+		const keysLinkedList = /* @__PURE__ */ new Map();
+		let i = 0;
+		let prev;
+		for (const item of coll) {
+			indexMap.set(item.key, i);
+			keysLinkedList.set(item.key, prev?.key);
+			prev = item;
+			i++;
+		}
+		return {
+			indexMap,
+			keysLinkedList
+		};
+	});
 	const setLastCompletedStep = (key) => {
-		const currentIndex = indexMap().get(key);
-		const prevIndex = lastCompletedStep() !== null ? indexMap().get(lastCompletedStep()) : -1;
+		if (key == null) {
+			if (props.lastCompletedStep === void 0) setLastCompletedStepInternal(null);
+			props.onLastCompletedStepChange?.(null);
+			return;
+		}
+		const { indexMap } = keyMaps();
+		const currentIndex = indexMap.get(key);
+		const completed = lastCompletedStep();
+		const prevIndex = completed !== null ? indexMap.get(completed) : -1;
 		if (currentIndex !== void 0 && (prevIndex === void 0 || currentIndex > (prevIndex ?? -1))) {
 			if (props.lastCompletedStep === void 0) setLastCompletedStepInternal(key);
 			props.onLastCompletedStepChange?.(key);
 		}
 	};
-	const isCompleted = (key) => {
-		const completed = lastCompletedStep();
-		if (completed === null) return false;
-		const keyIndex = indexMap().get(key);
-		const completedIndex = indexMap().get(completed);
-		if (keyIndex === void 0 || completedIndex === void 0) return false;
-		return keyIndex <= completedIndex;
-	};
-	const isStepDisabled = (key) => {
-		if (isDisabled()) return true;
-		return disabledKeysSet().has(key);
-	};
-	const isSelectable = (key) => {
-		if (isDisabled() || isReadOnly() || isStepDisabled(key)) return false;
-		if (isCompleted(key)) return true;
-		const keyIndex = indexMap().get(key);
-		if (keyIndex === 0) return true;
-		const currentItems = items();
-		if (keyIndex !== void 0 && keyIndex > 0) {
-			const prevKey = currentItems[keyIndex - 1].key;
-			if (isCompleted(prevKey)) return true;
-		}
-		return false;
-	};
-	const findDefaultSelectedKey = () => {
-		const currentItems = items();
-		for (const item of currentItems) if (!isCompleted(item.key) && !isStepDisabled(item.key)) return item.key;
-		for (const item of currentItems) if (!isStepDisabled(item.key)) return item.key;
-		return currentItems.length > 0 ? currentItems[0].key : null;
-	};
-	const [selectedKeyInternal, setSelectedKeyInternal] = createInternalSignal(props.defaultSelectedKey ?? findDefaultSelectedKey());
-	const selectedKey = () => {
-		if (props.selectedKey !== void 0) return props.selectedKey;
-		return selectedKeyInternal();
-	};
-	const setSelectedKey = (key) => {
-		if (isReadOnly() || isDisabled()) return;
-		if (!isSelectable(key)) return;
-		const currentSelected = selectedKey();
-		if (currentSelected !== null) {
-			const currentIndex = indexMap().get(currentSelected);
-			const newIndex = indexMap().get(key);
-			if (currentIndex !== void 0 && newIndex !== void 0 && newIndex > currentIndex && !isCompleted(currentSelected)) setLastCompletedStep(currentSelected);
-		}
-		if (props.selectedKey === void 0) setSelectedKeyInternal(key);
-		props.onSelectionChange?.(key);
-	};
 	createEffect(() => {
-		const selKey = selectedKey();
+		const selKey = singleSelectListState.selectedKey();
 		if (selKey === null) return null;
-		const selIdx = indexMap().get(selKey);
+		const { indexMap, keysLinkedList } = keyMaps();
+		const selIdx = indexMap.get(selKey);
 		if (selIdx === void 0 || selIdx <= 0) return null;
 		const completed = lastCompletedStep();
-		if (selIdx <= (completed !== null ? indexMap().get(completed) ?? -1 : -1) + 1) return null;
-		return items()[selIdx - 1]?.key;
+		if (selIdx <= (completed !== null ? indexMap.get(completed) ?? -1 : -1) + 1) return null;
+		return keysLinkedList.get(selKey) ?? null;
 	}, (prevKey) => {
-		if (prevKey !== void 0 && prevKey !== null) setLastCompletedStep(prevKey);
+		if (prevKey != null) setLastCompletedStep(prevKey);
+	});
+	createEffect(() => singleSelectListState.selectedKey(), (selKey) => {
+		if (singleSelectListState.focusedKey() == null && selKey != null) singleSelectListState.setFocusedKey(selKey);
+	});
+	const setSelectedKey = (key) => {
+		if (isListDisabled() || isReadOnly()) return;
+		if (!isSelectable(key)) return;
+		const { keysLinkedList } = keyMaps();
+		const prevKey = keysLinkedList.get(key);
+		if (prevKey && !isCompleted(prevKey)) setLastCompletedStep(prevKey);
+		singleSelectListState.setSelectedKey(key);
+	};
+	singleSelectListState.selectionManager.canSelectItem = (key) => isSelectable(key);
+	const origReplaceSelection = singleSelectListState.selectionManager.replaceSelection.bind(singleSelectListState.selectionManager);
+	singleSelectListState.selectionManager.replaceSelection = (key) => {
+		if (isListDisabled() || isReadOnly()) return;
+		if (!isSelectable(key)) return;
+		const { keysLinkedList } = keyMaps();
+		const prevKey = keysLinkedList.get(key);
+		if (prevKey && !isCompleted(prevKey)) setLastCompletedStep(prevKey);
+		origReplaceSelection(key);
+	};
+	const isDisabledFn = ((key) => {
+		if (key === void 0) return isListDisabled();
+		return !isSelectable(key);
 	});
 	return {
-		selectedKey,
+		...singleSelectListState,
+		selectedKey: singleSelectListState.selectedKey,
 		lastCompletedStep,
 		items,
 		setSelectedKey,
 		setLastCompletedStep,
 		isCompleted,
 		isSelectable,
-		isDisabled,
+		isDisabled: isDisabledFn,
 		isReadOnly
 	};
 }
 //#endregion
-export { CalendarDateClass, CalendarDateTimeClass, DEFAULT_VALIDATION_RESULT, DIRECTORY_DRAG_TYPE, DateFormatter, FormValidationContext, GregorianCalendar, ListCollection, SelectionManager, TableCollection, TimeClass, Timer, ToastQueue, TokenFieldValue, TreeCollection, VALID_VALIDITY_STATE, ZonedDateTimeClass, access, canUseDOM, createAsyncList, createAutocompleteState, createCalendar, createCalendarState, createCheckboxGroupState, createColorAreaState, createColorFieldState, createColorSliderState, createColorWheelState, createComboBoxState, createDateFieldState, createDateFieldState as useDateFieldState, createDatePickerState, createDatePickerState as useDatePickerState, createDisclosureGroupState, createDisclosureState, createDragState, createDraggableCollectionState, createDropState, createDroppableCollectionState, createFilteredListState, createFormValidationState, createGridState, createHSBColor, createHSLColor, createId, createIsSSR, createListCollection, createListData, createListState, createMenuState, createMenuTriggerState, createMenuTriggerState as useMenuTriggerState, createNumberFieldState, createOverlayTriggerState, createRGBColor, createRadioGroupState, createRangeCalendarState, createRangeCalendarState as useDateRangePickerState, createSearchFieldState, createSelectState, createSelectionState, createSelectionState as useMultipleSelectionState, createSingleSelectListState, createSliderState, createStepListState, createTabListState, createTableCollection, createTableColumnResizeState, createTableState, createTextFieldState, createTimeFieldState, createTimeFieldState as useTimeFieldState, createToastQueue, createToastState, createToggleGroupState, createToggleState, createTokenFieldState, createTooltipTriggerState, createTreeCollection, createTreeData, createTreeGridState, createTreeState, defaultContainsFilter, endOfMonth, endOfWeek, endOfYear, getColorChannels, getDayOfWeek, getItemCount, getKeysForDrag, getLocalTimeZone, getWeeksInMonth, isAccessor, isSameDay, isSameMonth, isSameYear, isServer, isToday, isWeekend, maxDate, mergeValidation, minDate, normalizeColor, now, parseAbsolute, parseAbsoluteToLocal, parseColor, parseDate, parseDateTime, parseTime, parseZonedDateTime, privateValidationStateProp, radioGroupSyncVersion, resetTooltipState, startOfMonth, startOfWeek, startOfYear, toCalendar, toCalendarDate, toCalendarDateTime, toTime, toZoned, today };
+export { CalendarDateClass, CalendarDateTimeClass, DEFAULT_VALIDATION_RESULT, DIRECTORY_DRAG_TYPE, DateFormatter, FormValidationContext, GregorianCalendar, ListCollection, SelectionManager, TableCollection, TimeClass, Timer, ToastQueue, TokenFieldValue, TreeCollection, VALID_VALIDITY_STATE, ZonedDateTimeClass, access, canUseDOM, createAsyncList, createAutocompleteState, createCalendar, createCalendarState, createCheckboxGroupState, createColorAreaState, createColorFieldState, createColorSliderState, createColorWheelState, createComboBoxState, createDateFieldState, createDateFieldState as useDateFieldState, createDatePickerState, createDatePickerState as useDatePickerState, createDisclosureGroupState, createDisclosureState, createDragState, createDraggableCollectionState, createDropState, createDroppableCollectionState, createFilteredListState, createFormValidationState, createGridState, createHSBColor, createHSLColor, createId, createIsSSR, createListCollection, createListData, createListState, createMenuState, createMenuTriggerState, createMenuTriggerState as useMenuTriggerState, createNumberFieldState, createOverlayTriggerState, createRGBColor, createRadioGroupState, createRangeCalendarState, createRangeCalendarState as useDateRangePickerState, createSearchFieldState, createSelectState, createSelectionState, createSelectionState as useMultipleSelectionState, createSingleSelectListState, createSliderState, createStepListState, createSubmenuTriggerState, createSubmenuTriggerState as useSubmenuTriggerState, createTabListState, createTableCollection, createTableColumnResizeState, createTableState, createTextFieldState, createTimeFieldState, createTimeFieldState as useTimeFieldState, createToastQueue, createToastState, createToggleGroupState, createToggleState, createTokenFieldState, createTooltipTriggerState, createTreeCollection, createTreeData, createTreeGridState, createTreeState, defaultContainsFilter, endOfMonth, endOfWeek, endOfYear, getColorChannels, getDayOfWeek, getItemCount, getKeysForDrag, getLocalTimeZone, getWeeksInMonth, isAccessor, isSameDay, isSameMonth, isSameYear, isServer, isToday, isWeekend, maxDate, mergeValidation, minDate, normalizeColor, now, parseAbsolute, parseAbsoluteToLocal, parseColor, parseDate, parseDateTime, parseTime, parseZonedDateTime, privateValidationStateProp, radioGroupSyncVersion, resetTooltipState, startOfMonth, startOfWeek, startOfYear, toCalendar, toCalendarDate, toCalendarDateTime, toTime, toZoned, today };
 
 //# sourceMappingURL=index.js.map