base-ui-vue 0.1.0 → 0.2.0

package/dist/index2.js

@@ -1,11 +1,17 @@
-import { EMPTY_OBJECT, mergeProps as mergeProps$1, useButton, useMergedRefs, useRenderElement } from "./button/Button.js";
+import { EMPTY_OBJECT, compositeRootContextKey, error, mergeProps as mergeProps$1, useButton, useFocusableWhenDisabled, useMergedRefs, useRenderElement } from "./button/Button.js";
 import { CollapsiblePanelDataAttributes, accordionItemContextKey, accordionStateAttributesMapping, collapsibleOpenStateMapping, triggerOpenStateMapping, useAccordionItemContext } from "./header/AccordionHeader.js";
-import { AnimationFrame, transitionStatusMapping, useAnimationFrame, useAnimationsFinished, useOpenChangeComplete, useTransitionStatus } from "./error/FieldError.js";
-import { DEFAULT_VALIDITY_STATE, fieldRootContextKey, fieldValidityMapping, getCombinedFieldValidityData, labelableContextKey, useBaseUiId, useFieldRootContext, useFormContext, useLabelableContext } from "./control/FieldControl.js";
-import { useDirection } from "./direction-provider/DirectionContext.js";
-import { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, END, HOME } from "./composite/composite.js";
+import { AnimationFrame, REASONS, createChangeEventDetails, createGenericEventDetails, fieldItemContextKey, transitionStatusMapping, useAnimationFrame, useAnimationsFinished, useAriaLabelledBy, useOpenChangeComplete, useTransitionStatus, visuallyHidden, visuallyHiddenInput } from "./checkbox/index.js";
+import { DEFAULT_VALIDITY_STATE, fieldRootContextKey, fieldValidityMapping, getCombinedFieldValidityData, labelableContextKey, useBaseUiId, useCheckboxGroupContext, useControllableState, useField, useFieldRootContext, useFormContext, useLabelableContext } from "./checkbox-group/CheckboxGroup.js";
+import { CompositeItem_default, compositeListContextKey, toolbarRootContextKey, useCompositeListItem, useToolbarGroupContext, useToolbarRootContext } from "./button/ToolbarButton.js";
+import { activeElement, clamp, contains, getMidpoint, getTarget, ownerDocument, roundValueToStep, sliderRootContextKey, sliderStateAttributesMapping, useDirection, useSliderRootContext, validateMinimumDistance } from "./control/SliderControl.js";
+import { ALL_KEYS, ARROW_DOWN as ARROW_DOWN$1, ARROW_KEYS, ARROW_LEFT as ARROW_LEFT$1, ARROW_RIGHT as ARROW_RIGHT$1, ARROW_UP as ARROW_UP$1, COMPOSITE_KEYS, END, HOME, HORIZONTAL_KEYS, HORIZONTAL_KEYS_WITH_EXTRA_KEYS, MODIFIER_KEYS, PAGE_DOWN, PAGE_UP, VERTICAL_KEYS, VERTICAL_KEYS_WITH_EXTRA_KEYS, isNativeInput, scrollIntoViewIfNeeded } from "./composite/composite.js";
 import { AvatarRootContextKey, avatarStateAttributesMapping, useTimeout } from "./fallback/AvatarFallback.js";
-import { computed, createBlock, createCommentVNode, defineComponent, getCurrentInstance, guardReactiveProps, inject, mergeProps, normalizeProps, onBeforeUnmount, onMounted, onUnmounted, openBlock, provide, readonly, ref, renderSlot, resolveDynamicComponent, shallowReadonly, shallowRef, toValue, unref, useAttrs, watch, watchEffect, withCtx } from "vue";
+import { useCSPContext } from "./csp-provider/CSPContext.js";
+import { useLabelableId } from "./control/FieldControl.js";
+import { ACTIVE_COMPOSITE_ITEM } from "./composite/constants.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, defineComponent, getCurrentInstance, guardReactiveProps, inject, mergeProps, normalizeClass, normalizeProps, normalizeStyle, onBeforeUnmount, onMounted, onUnmounted, openBlock, provide, reactive, readonly, ref, renderSlot, resolveDynamicComponent, shallowReadonly, shallowRef, toDisplayString, toValue, unref, useAttrs, watch, watchEffect, watchSyncEffect, withCtx } from "vue";
+import { isHTMLElement } from "@floating-ui/utils/dom";
+import { floor } from "@floating-ui/utils";
 
 //#region src/collapsible/root/CollapsibleRootContext.ts
 const collapsibleRootContextKey = Symbol("CollapsibleRootContext");
@@ -15,133 +21,6 @@ function useCollapsibleRootContext() {
 	return context;
 }
 
-//#endregion
-//#region src/utils/createBaseUIEventDetails.ts
-/**
-* Creates a Base UI event details object with the given reason and utilities
-* for preventing Base UI's internal event handling.
-*/
-function createChangeEventDetails(reason, event, trigger, customProperties) {
-	let canceled = false;
-	let propagationAllowed = false;
-	const custom = customProperties ?? EMPTY_OBJECT;
-	return {
-		reason,
-		event: event ?? new Event("base-ui"),
-		cancel() {
-			canceled = true;
-		},
-		allowPropagation() {
-			propagationAllowed = true;
-		},
-		get isCanceled() {
-			return canceled;
-		},
-		get isPropagationAllowed() {
-			return propagationAllowed;
-		},
-		trigger,
-		...custom
-	};
-}
-
-//#endregion
-//#region src/utils/reasons.ts
-const none = "none";
-const triggerPress = "trigger-press";
-const triggerHover = "trigger-hover";
-const triggerFocus = "trigger-focus";
-const outsidePress = "outside-press";
-const itemPress = "item-press";
-const closePress = "close-press";
-const linkPress = "link-press";
-const clearPress = "clear-press";
-const chipRemovePress = "chip-remove-press";
-const trackPress = "track-press";
-const incrementPress = "increment-press";
-const decrementPress = "decrement-press";
-const inputChange = "input-change";
-const inputClear = "input-clear";
-const inputBlur = "input-blur";
-const inputPaste = "input-paste";
-const inputPress = "input-press";
-const focusOut = "focus-out";
-const escapeKey = "escape-key";
-const closeWatcher = "close-watcher";
-const listNavigation = "list-navigation";
-const keyboard = "keyboard";
-const pointer = "pointer";
-const drag = "drag";
-const swipe = "swipe";
-const wheel = "wheel";
-const scrub = "scrub";
-const cancelOpen = "cancel-open";
-const siblingOpen = "sibling-open";
-const disabled = "disabled";
-const imperativeAction = "imperative-action";
-const windowResize = "window-resize";
-const REASONS = {
-	none,
-	triggerPress,
-	triggerHover,
-	triggerFocus,
-	outsidePress,
-	itemPress,
-	closePress,
-	linkPress,
-	clearPress,
-	chipRemovePress,
-	trackPress,
-	incrementPress,
-	decrementPress,
-	inputChange,
-	inputClear,
-	inputBlur,
-	inputPaste,
-	inputPress,
-	focusOut,
-	escapeKey,
-	closeWatcher,
-	listNavigation,
-	keyboard,
-	pointer,
-	drag,
-	swipe,
-	wheel,
-	scrub,
-	cancelOpen,
-	siblingOpen,
-	disabled,
-	imperativeAction,
-	windowResize
-};
-
-//#endregion
-//#region src/utils/useControllableState.ts
-/**
-* Manages controlled / uncontrolled state following the same semantics as
-* React's `useControlled` hook.
-*
-* - When `controlled()` returns a non-`undefined` value the component is
-*   considered **controlled** and the internal state is ignored.
-* - When `controlled()` returns `undefined` the component is **uncontrolled**
-*   and the internal ref drives the value.
-*/
-function useControllableState(params) {
-	const internalValue = ref(params.default);
-	const value = computed(() => {
-		const c = params.controlled();
-		return c !== void 0 ? c : internalValue.value;
-	});
-	function setValue(next) {
-		internalValue.value = next;
-	}
-	return {
-		value,
-		setValue
-	};
-}
-
 //#endregion
 //#region src/collapsible/root/useCollapsibleRoot.ts
 function useCollapsibleRoot(parameters) {
@@ -152,7 +31,9 @@ function useCollapsibleRoot(parameters) {
 	});
 	const { value: open, setValue: setOpen } = useControllableState({
 		controlled: () => isControlled.value ? openParam?.() : void 0,
-		default: defaultOpen
+		default: () => defaultOpen,
+		name: "CollapsibleRoot",
+		state: "open"
 	});
 	const { mounted, setMounted, transitionStatus } = useTransitionStatus(open, true, true);
 	const visible = ref(open.value);
@@ -237,83 +118,6 @@ function useCollapsibleRoot(parameters) {
 	};
 }
 
-//#endregion
-//#region src/composite/list/CompositeListContext.ts
-const compositeListContextKey = Symbol("CompositeListContext");
-function useCompositeListContext() {
-	return inject(compositeListContextKey);
-}
-
-//#endregion
-//#region src/composite/list/useCompositeListItem.ts
-let IndexGuessBehavior = /* @__PURE__ */ function(IndexGuessBehavior) {
-	IndexGuessBehavior[IndexGuessBehavior["None"] = 0] = "None";
-	IndexGuessBehavior[IndexGuessBehavior["GuessFromOrder"] = 1] = "GuessFromOrder";
-	return IndexGuessBehavior;
-}({});
-/**
-* Used to register a list item and its index (DOM position) in the `CompositeList`.
-*/
-function useCompositeListItem(params = {}) {
-	const externalIndex = computed(() => params.index?.());
-	const label = computed(() => params.label?.());
-	const metadata = computed(() => params.metadata?.());
-	const textRef = computed(() => params.textRef?.());
-	const indexGuessBehavior = computed(() => params.indexGuessBehavior?.());
-	const { register, unregister, subscribeMapChange, elementsRef, labelsRef, nextIndexRef } = useCompositeListContext();
-	const indexRef = ref(-1);
-	function initializeIndex() {
-		if (externalIndex.value != null) return externalIndex.value;
-		if (indexGuessBehavior.value === IndexGuessBehavior.GuessFromOrder) {
-			if (indexRef.value === -1) {
-				const newIndex = nextIndexRef.value;
-				nextIndexRef.value += 1;
-				indexRef.value = newIndex;
-			}
-			return indexRef.value;
-		}
-		return -1;
-	}
-	const internalIndex = ref(initializeIndex());
-	const index = computed(() => externalIndex.value ?? internalIndex.value);
-	const componentRef = ref(null);
-	function setRef(node) {
-		const el = node?.$el || node;
-		componentRef.value = el;
-		if (index.value !== -1 && el !== null) {
-			elementsRef.value[index.value] = el;
-			if (labelsRef) {
-				const isLabelDefined = label.value !== void 0;
-				labelsRef.value[index.value] = isLabelDefined ? label.value : textRef.value?.value?.textContent ?? el.textContent;
-			}
-		}
-	}
-	watchEffect((onCleanup) => {
-		if (externalIndex.value != null) return;
-		const node = componentRef.value;
-		if (node) {
-			register(node, metadata.value);
-			onCleanup(() => {
-				unregister(node);
-			});
-		}
-	}, { flush: "post" });
-	watchEffect((onCleanup) => {
-		if (externalIndex.value != null) return;
-		const unsubscribe = subscribeMapChange((map) => {
-			const i = componentRef.value ? map.get(componentRef.value)?.index : null;
-			if (i != null) internalIndex.value = i;
-		});
-		onCleanup(() => {
-			unsubscribe();
-		});
-	}, { flush: "post" });
-	return {
-		ref: setRef,
-		index
-	};
-}
-
 //#endregion
 //#region src/accordion/root/AccordionRootContext.ts
 const accordionRootContextKey = Symbol("AccordionRootContext");
@@ -446,6 +250,20 @@ var AccordionItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 //#region src/accordion/item/AccordionItem.vue
 var AccordionItem_default = AccordionItem_vue_vue_type_script_setup_true_lang_default;
 
+//#endregion
+//#region src/accordion/root/AccordionRootDataAttributes.ts
+let AccordionRootDataAttributes = /* @__PURE__ */ function(AccordionRootDataAttributes) {
+	/**
+	* Present when the accordion is disabled.
+	*/
+	AccordionRootDataAttributes["disabled"] = "data-disabled";
+	/**
+	* Indicates the orientation of the accordion.
+	*/
+	AccordionRootDataAttributes["orientation"] = "data-orientation";
+	return AccordionRootDataAttributes;
+}({});
+
 //#endregion
 //#region src/utils/warn.ts
 let set;
@@ -501,7 +319,7 @@ function useCollapsiblePanel(parameters) {
 			* transitions in order to set the value of width/height to `0px` momentarily.
 			* Setting both to `0px` will break layout.
 			*/
-			if (element.getAttribute("data-orientation") === "horizontal" || panelStyles.transitionProperty.includes("width")) transitionDimensionRef.value = "width";
+			if (element.getAttribute(AccordionRootDataAttributes.orientation) === "horizontal" || panelStyles.transitionProperty.includes("width")) transitionDimensionRef.value = "width";
 			else transitionDimensionRef.value = "height";
 		}
 		if (animationTypeRef.value !== "css-transition") return;
@@ -1092,7 +910,8 @@ var AccordionRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		const accordionItemRefs = _compositeRefs.elementsRef;
 		const { value: openValues, setValue: setOpenValues } = useControllableState({
 			controlled: () => isValueControlled.value ? props.value : void 0,
-			default: props.defaultValue ?? []
+			default: () => props.defaultValue ?? [],
+			name: "AccordionRoot"
 		});
 		function handleValueChange(newValue, nextOpen) {
 			const details = createChangeEventDetails(REASONS.none);
@@ -1162,6 +981,13 @@ var AccordionRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 //#region src/accordion/root/AccordionRoot.vue
 var AccordionRoot_default = AccordionRoot_vue_vue_type_script_setup_true_lang_default;
 
+//#endregion
+//#region src/floating-ui-vue/utils/constants.ts
+const ARROW_LEFT = "ArrowLeft";
+const ARROW_RIGHT = "ArrowRight";
+const ARROW_UP = "ArrowUp";
+const ARROW_DOWN = "ArrowDown";
+
 //#endregion
 //#region src/floating-ui-vue/utils/event.ts
 function stopEvent(event) {
@@ -1169,6 +995,245 @@ function stopEvent(event) {
 	event.stopPropagation();
 }
 
+//#endregion
+//#region src/floating-ui-vue/utils/composite.ts
+function isDifferentGridRow(index, cols, prevRow) {
+	return Math.floor(index / cols) !== prevRow;
+}
+function isIndexOutOfListBounds(listRef, index) {
+	return index < 0 || index >= listRef.value.length;
+}
+function getMinListIndex(listRef, disabledIndices) {
+	return findNonDisabledListIndex(listRef, { disabledIndices });
+}
+function getMaxListIndex(listRef, disabledIndices) {
+	return findNonDisabledListIndex(listRef, {
+		decrement: true,
+		startingIndex: listRef.value.length,
+		disabledIndices
+	});
+}
+function findNonDisabledListIndex(listRef, { startingIndex = -1, decrement = false, disabledIndices, amount = 1 } = {}) {
+	let index = startingIndex;
+	do
+		index += decrement ? -amount : amount;
+	while (index >= 0 && index <= listRef.value.length - 1 && isListIndexDisabled(listRef, index, disabledIndices));
+	return index;
+}
+function getGridNavigatedIndex(listRef, { event, orientation, loopFocus, rtl, cols, disabledIndices, minIndex, maxIndex, prevIndex, stopEvent: stop = false }) {
+	let nextIndex = prevIndex;
+	const rows = [];
+	const rowIndexMap = {};
+	let hasRoleRow = false;
+	{
+		let currentRowEl = null;
+		let currentRowIndex = -1;
+		listRef.value.forEach((el, idx) => {
+			if (el == null) return;
+			const rowEl = el.closest("[role=\"row\"]");
+			if (rowEl) hasRoleRow = true;
+			if (rowEl !== currentRowEl || currentRowIndex === -1) {
+				currentRowEl = rowEl;
+				currentRowIndex += 1;
+				rows[currentRowIndex] = [];
+			}
+			rows[currentRowIndex].push(idx);
+			rowIndexMap[idx] = currentRowIndex;
+		});
+	}
+	const hasDomRows = hasRoleRow && rows.length > 0 && rows.some((row) => row.length !== cols);
+	function navigateVertically(direction) {
+		if (!hasDomRows || prevIndex === -1) return;
+		const currentRow = rowIndexMap[prevIndex];
+		if (currentRow == null) return;
+		const colInRow = rows[currentRow].indexOf(prevIndex);
+		let nextRow = direction === "up" ? currentRow - 1 : currentRow + 1;
+		if (loopFocus) {
+			if (nextRow < 0) nextRow = rows.length - 1;
+			else if (nextRow >= rows.length) nextRow = 0;
+		}
+		const visited = /* @__PURE__ */ new Set();
+		const _listRef = listRef;
+		while (nextRow >= 0 && nextRow < rows.length && !visited.has(nextRow)) {
+			visited.add(nextRow);
+			const targetRow = rows[nextRow];
+			if (targetRow.length === 0) {
+				nextRow = direction === "up" ? nextRow - 1 : nextRow + 1;
+				continue;
+			}
+			const clampedCol = Math.min(colInRow, targetRow.length - 1);
+			for (let col = clampedCol; col >= 0; col -= 1) {
+				const candidate = targetRow[col];
+				if (!isListIndexDisabled(_listRef, candidate, disabledIndices)) return candidate;
+			}
+			nextRow = direction === "up" ? nextRow - 1 : nextRow + 1;
+			if (loopFocus) {
+				if (nextRow < 0) nextRow = rows.length - 1;
+				else if (nextRow >= rows.length) nextRow = 0;
+			}
+		}
+	}
+	const _listRef = listRef;
+	if (event.key === ARROW_UP) {
+		const domBasedCandidate = navigateVertically("up");
+		if (domBasedCandidate !== void 0) {
+			if (stop) stopEvent(event);
+			nextIndex = domBasedCandidate;
+		} else {
+			if (stop) stopEvent(event);
+			if (prevIndex === -1) nextIndex = maxIndex;
+			else {
+				nextIndex = findNonDisabledListIndex(_listRef, {
+					startingIndex: nextIndex,
+					amount: cols,
+					decrement: true,
+					disabledIndices
+				});
+				if (loopFocus && (prevIndex - cols < minIndex || nextIndex < 0)) {
+					const col = prevIndex % cols;
+					const maxCol = maxIndex % cols;
+					const offset = maxIndex - (maxCol - col);
+					if (maxCol === col) nextIndex = maxIndex;
+					else nextIndex = maxCol > col ? offset : offset - cols;
+				}
+			}
+			if (isIndexOutOfListBounds(listRef, nextIndex)) nextIndex = prevIndex;
+		}
+	}
+	if (event.key === ARROW_DOWN) {
+		const domBasedCandidate = navigateVertically("down");
+		if (domBasedCandidate !== void 0) {
+			if (stop) stopEvent(event);
+			nextIndex = domBasedCandidate;
+		} else {
+			if (stop) stopEvent(event);
+			if (prevIndex === -1) nextIndex = minIndex;
+			else {
+				nextIndex = findNonDisabledListIndex(_listRef, {
+					startingIndex: prevIndex,
+					amount: cols,
+					disabledIndices
+				});
+				if (loopFocus && prevIndex + cols > maxIndex) nextIndex = findNonDisabledListIndex(_listRef, {
+					startingIndex: prevIndex % cols - cols,
+					amount: cols,
+					disabledIndices
+				});
+			}
+			if (isIndexOutOfListBounds(listRef, nextIndex)) nextIndex = prevIndex;
+		}
+	}
+	if (orientation === "both") {
+		const prevRow = floor(prevIndex / cols);
+		if (event.key === (rtl ? ARROW_LEFT : ARROW_RIGHT)) {
+			if (stop) stopEvent(event);
+			if (prevIndex % cols !== cols - 1) {
+				nextIndex = findNonDisabledListIndex(_listRef, {
+					startingIndex: prevIndex,
+					disabledIndices
+				});
+				if (loopFocus && isDifferentGridRow(nextIndex, cols, prevRow)) nextIndex = findNonDisabledListIndex(_listRef, {
+					startingIndex: prevIndex - prevIndex % cols - 1,
+					disabledIndices
+				});
+			} else if (loopFocus) nextIndex = findNonDisabledListIndex(_listRef, {
+				startingIndex: prevIndex - prevIndex % cols - 1,
+				disabledIndices
+			});
+			if (isDifferentGridRow(nextIndex, cols, prevRow)) nextIndex = prevIndex;
+		}
+		if (event.key === (rtl ? ARROW_RIGHT : ARROW_LEFT)) {
+			if (stop) stopEvent(event);
+			if (prevIndex % cols !== 0) {
+				nextIndex = findNonDisabledListIndex(_listRef, {
+					startingIndex: prevIndex,
+					decrement: true,
+					disabledIndices
+				});
+				if (loopFocus && isDifferentGridRow(nextIndex, cols, prevRow)) nextIndex = findNonDisabledListIndex(_listRef, {
+					startingIndex: prevIndex + (cols - prevIndex % cols),
+					decrement: true,
+					disabledIndices
+				});
+			} else if (loopFocus) nextIndex = findNonDisabledListIndex(_listRef, {
+				startingIndex: prevIndex + (cols - prevIndex % cols),
+				decrement: true,
+				disabledIndices
+			});
+			if (isDifferentGridRow(nextIndex, cols, prevRow)) nextIndex = prevIndex;
+		}
+		const lastRow = floor(maxIndex / cols) === prevRow;
+		if (isIndexOutOfListBounds(listRef, nextIndex)) if (loopFocus && lastRow) nextIndex = event.key === (rtl ? ARROW_RIGHT : ARROW_LEFT) ? maxIndex : findNonDisabledListIndex(_listRef, {
+			startingIndex: prevIndex - prevIndex % cols - 1,
+			disabledIndices
+		});
+		else nextIndex = prevIndex;
+	}
+	return nextIndex;
+}
+/** For each cell index, gets the item index that occupies that cell */
+function createGridCellMap(sizes, cols, dense) {
+	const cellMap = [];
+	let startIndex = 0;
+	sizes.forEach(({ width, height }, index) => {
+		if (width > cols) {
+			if (process.env.NODE_ENV !== "production") throw new Error(`[Base UI Vue]: Invalid grid - item width at index ${index} is greater than grid columns`);
+		}
+		let itemPlaced = false;
+		if (dense) startIndex = 0;
+		while (!itemPlaced) {
+			const targetCells = [];
+			for (let i = 0; i < width; i += 1) for (let j = 0; j < height; j += 1) targetCells.push(startIndex + i + j * cols);
+			if (startIndex % cols + width <= cols && targetCells.every((cell) => cellMap[cell] == null)) {
+				targetCells.forEach((cell) => {
+					cellMap[cell] = index;
+				});
+				itemPlaced = true;
+			} else startIndex += 1;
+		}
+	});
+	return [...cellMap];
+}
+/** Gets cell index of an item's corner or -1 when index is -1. */
+function getGridCellIndexOfCorner(index, sizes, cellMap, cols, corner) {
+	if (index === -1) return -1;
+	const firstCellIndex = cellMap.indexOf(index);
+	const sizeItem = sizes[index];
+	switch (corner) {
+		case "tl": return firstCellIndex;
+		case "tr":
+			if (!sizeItem) return firstCellIndex;
+			return firstCellIndex + sizeItem.width - 1;
+		case "bl":
+			if (!sizeItem) return firstCellIndex;
+			return firstCellIndex + (sizeItem.height - 1) * cols;
+		case "br": return cellMap.lastIndexOf(index);
+		default: return -1;
+	}
+}
+/** Gets all cell indices that correspond to the specified indices */
+function getGridCellIndices(indices, cellMap) {
+	return cellMap.flatMap((index, cellIndex) => indices.includes(index) ? [cellIndex] : []);
+}
+function isListIndexDisabled(listRef, index, disabledIndices) {
+	if (typeof disabledIndices === "function") return disabledIndices(index);
+	if (disabledIndices) return disabledIndices.includes(index);
+	const element = listRef.value[index];
+	if (!element) return false;
+	return element.hasAttribute("disabled") || element.getAttribute("aria-disabled") === "true";
+}
+
+//#endregion
+//#region src/floating-ui-vue/utils/element.ts
+function matchesFocusVisible(element) {
+	if (!element) return true;
+	try {
+		return element.matches(":focus-visible");
+	} catch {
+		return true;
+	}
+}
+
 //#endregion
 //#region src/utils/isElementDisabled.ts
 function isElementDisabled(element) {
@@ -1237,10 +1302,10 @@ var AccordionTrigger_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 			itemCtx.setTriggerId(void 0);
 		});
 		const SUPPORTED_KEYS = new Set([
-			ARROW_DOWN,
-			ARROW_UP,
-			ARROW_RIGHT,
-			ARROW_LEFT,
+			ARROW_DOWN$1,
+			ARROW_UP$1,
+			ARROW_RIGHT$1,
+			ARROW_LEFT$1,
 			HOME,
 			END
 		]);
@@ -1275,17 +1340,17 @@ var AccordionTrigger_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 				else nextIndex = thisIndex - 1;
 			}
 			switch (event.key) {
-				case ARROW_DOWN:
+				case ARROW_DOWN$1:
 					if (!isHorizontal) toNext();
 					break;
-				case ARROW_UP:
+				case ARROW_UP$1:
 					if (!isHorizontal) toPrev();
 					break;
-				case ARROW_RIGHT:
+				case ARROW_RIGHT$1:
 					if (isHorizontal) if (isRtl) toPrev();
 					else toNext();
 					break;
-				case ARROW_LEFT:
+				case ARROW_LEFT$1:
 					if (isHorizontal) if (isRtl) toNext();
 					else toPrev();
 					break;
@@ -1759,12 +1824,21 @@ var LabelableProvider_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 	},
 	setup(__props) {
 		const props = __props;
-		const controlId = ref(props.controlId);
+		const defaultId = useBaseUiId();
+		const initialControlId = props.controlId === void 0 ? defaultId : props.controlId;
+		const controlId = ref(initialControlId);
 		const labelId = ref(props.labelId);
 		const messageIds = ref([]);
+		const registrations = /* @__PURE__ */ new Map();
 		const parent = useLabelableContext();
-		function setControlId(id) {
-			controlId.value = id;
+		function registerControlId(source, id) {
+			if (id === void 0) registrations.delete(source);
+			else registrations.set(source, id);
+			if (registrations.size === 0) {
+				controlId.value = initialControlId;
+				return;
+			}
+			controlId.value = registrations.values().next().value;
 		}
 		function setLabelId(id) {
 			labelId.value = id;
@@ -1778,7 +1852,7 @@ var LabelableProvider_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 		}
 		provide(labelableContextKey, {
 			controlId,
-			setControlId,
+			registerControlId,
 			labelId,
 			setLabelId,
 			messageIds,
@@ -1795,14 +1869,6 @@ var LabelableProvider_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 //#region src/labelable-provider/LabelableProvider.vue
 var LabelableProvider_default = LabelableProvider_vue_vue_type_script_setup_true_lang_default;
 
-//#endregion
-//#region src/field/item/FieldItemContext.ts
-const defaultContext = { disabled: ref(false) };
-const fieldItemContextKey = Symbol("FieldItemContext");
-function useFieldItemContext() {
-	return inject(fieldItemContextKey, defaultContext);
-}
-
 //#endregion
 //#region src/field/item/FieldItem.vue?vue&type=script&setup=true&lang.ts
 var FieldItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
@@ -1842,7 +1908,12 @@ var FieldItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 		const props = __props;
 		const attrs = useAttrs();
 		const { state, disabled: rootDisabled } = useFieldRootContext(false);
-		provide(fieldItemContextKey, { disabled: computed(() => rootDisabled.value || props.disabled) });
+		const disabled = computed(() => rootDisabled.value || props.disabled);
+		const checkboxGroupContext = useCheckboxGroupContext(true);
+		const parentId = computed(() => checkboxGroupContext?.parent.id);
+		const hasParentCheckbox = computed(() => checkboxGroupContext?.allValues.value !== void 0);
+		const controlId = computed(() => hasParentCheckbox.value ? parentId.value : void 0);
+		provide(fieldItemContextKey, { disabled });
 		const { tag, mergedProps, renderless } = useRenderElement({
 			componentProps: props,
 			state,
@@ -1851,7 +1922,7 @@ var FieldItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 			defaultTagName: "div"
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(LabelableProvider_default, null, {
+			return openBlock(), createBlock(LabelableProvider_default, { "control-id": controlId.value }, {
 				default: withCtx(() => [unref(renderless) ? renderSlot(_ctx.$slots, "default", {
 					key: 0,
 					props: unref(mergedProps),
@@ -1861,7 +1932,7 @@ var FieldItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 					_: 3
 				}, 16))]),
 				_: 3
-			});
+			}, 8, ["control-id"]);
 		};
 	}
 });
@@ -1870,6 +1941,69 @@ var FieldItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 //#region src/field/item/FieldItem.vue
 var FieldItem_default = FieldItem_vue_vue_type_script_setup_true_lang_default;
 
+//#endregion
+//#region src/utils/useRegisteredLabelId.ts
+function useRegisteredLabelId(idProp, setLabelId) {
+	const generatedId = useBaseUiId();
+	const id = computed(() => toValue(idProp) ?? generatedId);
+	watchSyncEffect((onCleanup) => {
+		setLabelId(id.value);
+		onCleanup(() => {
+			setLabelId(void 0);
+		});
+	});
+	return id;
+}
+
+//#endregion
+//#region src/labelable-provider/useLabel.ts
+function useLabel(params = {}) {
+	const { id: idProp, fallbackControlId, native, setLabelId: setLabelIdProp, focusControl: focusControlProp } = params;
+	const { controlId: contextControlId, setLabelId: setContextLabelId } = useLabelableContext();
+	const syncLabelId = (nextLabelId) => {
+		setContextLabelId(nextLabelId);
+		setLabelIdProp?.(nextLabelId);
+	};
+	const labelId = useRegisteredLabelId(idProp, syncLabelId);
+	const resolvedControlId = computed(() => contextControlId.value ?? toValue(fallbackControlId));
+	const isNative = computed(() => toValue(native) ?? false);
+	function defaultFocusControl(event, controlId) {
+		if (!controlId) return;
+		const controlElement = ownerDocument(event.currentTarget)?.getElementById(controlId);
+		if (isHTMLElement(controlElement)) focusElementWithVisible(controlElement);
+	}
+	function handleInteraction(event) {
+		if (getTarget(event)?.closest("button,input,select,textarea")) return;
+		if (!event.defaultPrevented && event.detail > 1) event.preventDefault();
+		if (isNative.value) return;
+		if (focusControlProp) {
+			focusControlProp(event, resolvedControlId.value);
+			return;
+		}
+		defaultFocusControl(event, resolvedControlId.value);
+	}
+	return {
+		labelId,
+		props: computed(() => {
+			if (isNative.value) return {
+				id: labelId.value,
+				for: resolvedControlId.value ?? void 0,
+				onMousedown: handleInteraction
+			};
+			return {
+				id: labelId.value,
+				onClick: handleInteraction,
+				onPointerdown(event) {
+					event.preventDefault();
+				}
+			};
+		})
+	};
+}
+function focusElementWithVisible(element) {
+	element.focus({ focusVisible: true });
+}
+
 //#endregion
 //#region src/field/label/FieldLabel.vue?vue&type=script&setup=true&lang.ts
 var FieldLabel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
@@ -1913,40 +2047,18 @@ var FieldLabel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		const props = __props;
 		const attrs = useAttrs();
 		const fieldRootContext = useFieldRootContext(false);
-		const { controlId, setLabelId, labelId: contextLabelId } = useLabelableContext();
-		const generatedLabelId = useBaseUiId(props.id);
-		const labelId = computed(() => props.id ?? contextLabelId.value ?? generatedLabelId);
-		watchEffect((onCleanup) => {
-			const id = labelId.value;
-			setLabelId(id);
-			onCleanup(() => setLabelId(void 0));
+		const { labelId } = useLabelableContext();
+		const label = useLabel({
+			id: computed(() => labelId.value ?? props.id),
+			native: computed(() => props.nativeLabel)
 		});
-		function handleInteraction(event) {
-			if (event.target?.closest("button,input,select,textarea")) return;
-			if (!event.defaultPrevented && event.detail > 1) event.preventDefault();
-			if (props.nativeLabel || !controlId.value) return;
-			const controlElement = document.getElementById(controlId.value);
-			if (controlElement) controlElement.focus();
-		}
 		const { tag, mergedProps, renderless } = useRenderElement({
 			componentProps: props,
 			state: fieldRootContext.state,
-			props: computed(() => {
-				if (props.nativeLabel) return {
-					...attrs,
-					id: labelId.value,
-					for: controlId.value ?? void 0,
-					onMousedown: handleInteraction
-				};
-				return {
-					...attrs,
-					id: labelId.value,
-					onClick: handleInteraction,
-					onPointerdown: (event) => {
-						event.preventDefault();
-					}
-				};
-			}),
+			props: computed(() => ({
+				...attrs,
+				...label.props.value
+			})),
 			stateAttributesMapping: fieldValidityMapping,
 			defaultTagName: "label"
 		});
@@ -2288,8 +2400,15 @@ var FieldRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 		const controlId = ref(void 0);
 		const labelId = ref(void 0);
 		const messageIds = ref([]);
-		function setControlId(id) {
-			controlId.value = id;
+		const controlIdRegistrations = /* @__PURE__ */ new Map();
+		function registerControlId(source, id) {
+			if (id === void 0) controlIdRegistrations.delete(source);
+			else controlIdRegistrations.set(source, id);
+			if (controlIdRegistrations.size === 0) {
+				controlId.value = void 0;
+				return;
+			}
+			controlId.value = controlIdRegistrations.values().next().value;
 		}
 		function setLabelId(id) {
 			labelId.value = id;
@@ -2303,7 +2422,7 @@ var FieldRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 		}
 		provide(labelableContextKey, {
 			controlId,
-			setControlId,
+			registerControlId,
 			labelId,
 			setLabelId,
 			messageIds,
@@ -2575,6 +2694,2982 @@ var FieldsetRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 //#region src/fieldset/root/FieldsetRoot.vue
 var FieldsetRoot_default = FieldsetRoot_vue_vue_type_script_setup_true_lang_default;
 
+//#endregion
+//#region src/separator/Separator.vue?vue&type=script&setup=true&lang.ts
+/**
+* A separator element accessible to screen readers.
+* Renders a `<div>` element.
+*
+* Documentation: [Base UI Vue Separator](https://baseui-vue.com/docs/components/separator)
+*/
+var Separator_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "Separator",
+	inheritAttrs: false,
+	__name: "Separator",
+	props: {
+		orientation: {
+			type: String,
+			required: false,
+			default: "horizontal"
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "div"
+		},
+		class: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		style: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const attrs = useAttrs();
+		const state = computed(() => ({ orientation: props.orientation }));
+		const { tag, mergedProps, renderless, ref: renderRef } = useRenderElement({
+			componentProps: props,
+			state,
+			props: computed(() => ({
+				...attrs,
+				"role": "separator",
+				"aria-orientation": props.orientation
+			})),
+			defaultTagName: "div"
+		});
+		return (_ctx, _cache) => {
+			return unref(renderless) ? renderSlot(_ctx.$slots, "default", {
+				key: 0,
+				ref: unref(renderRef),
+				props: unref(mergedProps),
+				state: state.value
+			}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), mergeProps({
+				key: 1,
+				ref: unref(renderRef)
+			}, unref(mergedProps)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", { state: state.value })]),
+				_: 3
+			}, 16));
+		};
+	}
+});
+
+//#endregion
+//#region src/separator/Separator.vue
+var Separator_default = Separator_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/separator/SeparatorDataAttributes.ts
+let SeparatorDataAttributes = /* @__PURE__ */ function(SeparatorDataAttributes) {
+	/**
+	* Indicates the orientation of the separator.
+	* @type {'horizontal' | 'vertical'}
+	*/
+	SeparatorDataAttributes["orientation"] = "data-orientation";
+	return SeparatorDataAttributes;
+}({});
+
+//#endregion
+//#region src/utils/valueToPercent.ts
+function valueToPercent(value, min, max) {
+	if (max === min) return 0;
+	return (value - min) * 100 / (max - min);
+}
+
+//#endregion
+//#region src/slider/indicator/SliderIndicator.vue?vue&type=script&setup=true&lang.ts
+/**
+* Visualizes the current value of the slider.
+* Renders a `<div>` element.
+*
+* Documentation: [Base UI Vue Slider](https://baseui-vue.com/docs/components/slider)
+*/
+var SliderIndicator_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "SliderIndicator",
+	inheritAttrs: false,
+	__name: "SliderIndicator",
+	props: {
+		as: {
+			type: null,
+			required: false,
+			default: "div"
+		},
+		class: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		style: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		function getInsetStyles(vertical, range, start, end, renderBeforeHydration, mounted) {
+			const visibility = start === void 0 || range && end === void 0 ? "hidden" : void 0;
+			const startEdge = vertical ? "bottom" : "insetInlineStart";
+			const mainSide = vertical ? "height" : "width";
+			const styles = {
+				visibility: renderBeforeHydration && !mounted ? "hidden" : visibility,
+				position: vertical ? "absolute" : "relative",
+				[vertical ? "width" : "height"]: "inherit"
+			};
+			styles["--start-position"] = `${start ?? 0}%`;
+			if (!range) {
+				styles[startEdge] = 0;
+				styles[mainSide] = "var(--start-position)";
+				return styles;
+			}
+			styles["--relative-size"] = `${(end ?? 0) - (start ?? 0)}%`;
+			styles[startEdge] = "var(--start-position)";
+			styles[mainSide] = "var(--relative-size)";
+			return styles;
+		}
+		function getCenteredStyles(vertical, range, start, end) {
+			const startEdge = vertical ? "bottom" : "insetInlineStart";
+			const mainSide = vertical ? "height" : "width";
+			const styles = {
+				position: vertical ? "absolute" : "relative",
+				[vertical ? "width" : "height"]: "inherit"
+			};
+			if (!range) {
+				styles[startEdge] = 0;
+				styles[mainSide] = `${start}%`;
+				return styles;
+			}
+			styles[startEdge] = `${start}%`;
+			styles[mainSide] = `${end - start}%`;
+			return styles;
+		}
+		const attrs = useAttrs();
+		const rootContext = useSliderRootContext();
+		const isMounted = ref(false);
+		onMounted(() => {
+			isMounted.value = true;
+		});
+		const vertical = computed(() => rootContext.orientation.value === "vertical");
+		const range = computed(() => rootContext.values.value.length > 1);
+		const style = computed(() => rootContext.inset.value ? getInsetStyles(vertical.value, range.value, rootContext.indicatorPosition.value[0], rootContext.indicatorPosition.value[1], rootContext.renderBeforeHydration.value, isMounted.value) : getCenteredStyles(vertical.value, range.value, valueToPercent(rootContext.values.value[0], rootContext.min.value, rootContext.max.value), valueToPercent(rootContext.values.value[rootContext.values.value.length - 1], rootContext.min.value, rootContext.max.value)));
+		const indicatorProps = computed(() => mergeProps$1(attrs, {
+			"data-base-ui-slider-indicator": rootContext.renderBeforeHydration.value ? "" : void 0,
+			"style": style.value,
+			"suppressHydrationWarning": rootContext.renderBeforeHydration.value || void 0
+		}));
+		const { tag, mergedProps, renderless, ref: renderRef } = useRenderElement({
+			componentProps: props,
+			state: rootContext.state,
+			props: indicatorProps,
+			defaultTagName: "div",
+			stateAttributesMapping: sliderStateAttributesMapping
+		});
+		return (_ctx, _cache) => {
+			return unref(renderless) ? renderSlot(_ctx.$slots, "default", {
+				key: 0,
+				ref: unref(renderRef),
+				props: unref(mergedProps),
+				state: unref(rootContext).state
+			}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), mergeProps({
+				key: 1,
+				ref: unref(renderRef)
+			}, unref(mergedProps)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16));
+		};
+	}
+});
+
+//#endregion
+//#region src/slider/indicator/SliderIndicator.vue
+var SliderIndicator_default = SliderIndicator_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/slider/indicator/SliderIndicatorDataAttributes.ts
+let SliderIndicatorDataAttributes = /* @__PURE__ */ function(SliderIndicatorDataAttributes) {
+	/**
+	* Present while the user is dragging.
+	*/
+	SliderIndicatorDataAttributes["dragging"] = "data-dragging";
+	/**
+	* Indicates the orientation of the slider.
+	* @type {'horizontal' | 'vertical'}
+	*/
+	SliderIndicatorDataAttributes["orientation"] = "data-orientation";
+	/**
+	* Present when the slider is disabled.
+	*/
+	SliderIndicatorDataAttributes["disabled"] = "data-disabled";
+	/**
+	* Present when the slider is in valid state (when wrapped in Field.Root).
+	*/
+	SliderIndicatorDataAttributes["valid"] = "data-valid";
+	/**
+	* Present when the slider is in invalid state (when wrapped in Field.Root).
+	*/
+	SliderIndicatorDataAttributes["invalid"] = "data-invalid";
+	/**
+	* Present when the slider has been touched (when wrapped in Field.Root).
+	*/
+	SliderIndicatorDataAttributes["touched"] = "data-touched";
+	/**
+	* Present when the slider's value has changed (when wrapped in Field.Root).
+	*/
+	SliderIndicatorDataAttributes["dirty"] = "data-dirty";
+	/**
+	* Present when the slider is focused (when wrapped in Field.Root).
+	*/
+	SliderIndicatorDataAttributes["focused"] = "data-focused";
+	return SliderIndicatorDataAttributes;
+}({});
+
+//#endregion
+//#region src/slider/label/SliderLabel.vue?vue&type=script&setup=true&lang.ts
+/**
+* An accessible label that is automatically associated with the slider thumbs.
+* Renders a `<div>` element.
+*
+* Documentation: [Base UI Vue Slider](https://baseui-vue.com/docs/components/slider)
+*/
+var SliderLabel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "SliderLabel",
+	inheritAttrs: false,
+	__name: "SliderLabel",
+	props: {
+		as: {
+			type: null,
+			required: false,
+			default: "div"
+		},
+		class: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		style: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const attrs = useAttrs();
+		const rootContext = useSliderRootContext();
+		const label = useLabel({
+			id: computed(() => rootContext.rootLabelId.value),
+			fallbackControlId: computed(() => rootContext.controlRef.value?.id),
+			setLabelId: rootContext.setLabelId,
+			focusControl(_event, controlId) {
+				if (controlId) {
+					const controlElement = rootContext.controlRef.value ? ownerDocument(rootContext.controlRef.value)?.getElementById(controlId) : null;
+					if (isHTMLElement(controlElement)) {
+						focusElementWithVisible(controlElement);
+						return;
+					}
+				}
+				const fallbackInputs = rootContext.controlRef.value?.querySelectorAll("input[type=\"range\"]");
+				const fallbackInput = fallbackInputs?.length === 1 ? fallbackInputs[0] : null;
+				if (isHTMLElement(fallbackInput)) focusElementWithVisible(fallbackInput);
+			}
+		});
+		const labelProps = computed(() => mergeProps$1(attrs, label.props.value));
+		const { tag, mergedProps, renderless, ref: renderRef } = useRenderElement({
+			componentProps: props,
+			state: rootContext.state,
+			props: labelProps,
+			defaultTagName: "div",
+			stateAttributesMapping: sliderStateAttributesMapping
+		});
+		return (_ctx, _cache) => {
+			return unref(renderless) ? renderSlot(_ctx.$slots, "default", {
+				key: 0,
+				ref: unref(renderRef),
+				props: unref(mergedProps),
+				state: unref(rootContext).state
+			}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), mergeProps({
+				key: 1,
+				ref: unref(renderRef)
+			}, unref(mergedProps)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16));
+		};
+	}
+});
+
+//#endregion
+//#region src/slider/label/SliderLabel.vue
+var SliderLabel_default = SliderLabel_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/utils/areArraysEqual.ts
+function areArraysEqual(array1, array2, itemComparer = (a, b) => a === b) {
+	return array1.length === array2.length && array1.every((value, index) => itemComparer(value, array2[index]));
+}
+
+//#endregion
+//#region src/utils/resolveAriaLabelledBy.ts
+function getDefaultLabelId(id) {
+	return id == null ? void 0 : `${id}-label`;
+}
+function resolveAriaLabelledBy(fieldLabelId, localLabelId) {
+	return fieldLabelId ?? localLabelId;
+}
+
+//#endregion
+//#region src/slider/utils/asc.ts
+function asc(a, b) {
+	return a - b;
+}
+
+//#endregion
+//#region src/slider/utils/replaceArrayItemAtIndex.ts
+function replaceArrayItemAtIndex(array, index, newValue) {
+	if (!Number.isInteger(index) || index < 0 || index >= array.length) throw new RangeError(`replaceArrayItemAtIndex index out of bounds: ${index}`);
+	const output = array.slice();
+	output[index] = newValue;
+	return output.sort(asc);
+}
+
+//#endregion
+//#region src/slider/utils/getSliderValue.ts
+function getSliderValue(valueInput, index, min, max, range, values) {
+	let newValue = valueInput;
+	newValue = clamp(newValue, min, max);
+	if (range) newValue = replaceArrayItemAtIndex(values, index, clamp(newValue, values[index - 1] ?? -Infinity, values[index + 1] ?? Infinity));
+	return newValue;
+}
+
+//#endregion
+//#region src/slider/root/SliderRoot.vue?vue&type=script&setup=true&lang.ts
+/**
+* Groups all parts of the slider.
+* Renders a `<div>` element.
+*
+* Documentation: [Base UI Vue Slider](https://baseui-vue.com/docs/components/slider)
+*/
+var SliderRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "SliderRoot",
+	inheritAttrs: false,
+	__name: "SliderRoot",
+	props: {
+		defaultValue: {
+			type: null,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		format: {
+			type: null,
+			required: false
+		},
+		locale: {
+			type: null,
+			required: false
+		},
+		max: {
+			type: Number,
+			required: false,
+			default: 100
+		},
+		min: {
+			type: Number,
+			required: false,
+			default: 0
+		},
+		minStepsBetweenValues: {
+			type: Number,
+			required: false,
+			default: 0
+		},
+		name: {
+			type: String,
+			required: false
+		},
+		form: {
+			type: String,
+			required: false
+		},
+		orientation: {
+			type: String,
+			required: false,
+			default: "horizontal"
+		},
+		step: {
+			type: Number,
+			required: false,
+			default: 1
+		},
+		largeStep: {
+			type: Number,
+			required: false,
+			default: 10
+		},
+		thumbAlignment: {
+			type: String,
+			required: false,
+			default: "center"
+		},
+		thumbCollisionBehavior: {
+			type: String,
+			required: false,
+			default: "push"
+		},
+		value: {
+			type: null,
+			required: false
+		},
+		id: {
+			type: String,
+			required: false
+		},
+		ariaLabelledby: {
+			type: String,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "div"
+		},
+		class: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		style: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	emits: ["valueChange", "valueCommitted"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const attrs = useAttrs();
+		const attrsObject = attrs;
+		const explicitAriaLabelledBy = computed(() => props.ariaLabelledby ?? attrs["aria-labelledby"]);
+		const id = useBaseUiId(props.id);
+		const idRef = computed(() => id);
+		const defaultLabelId = computed(() => getDefaultLabelId(id));
+		const { clearErrors } = useFormContext();
+		const { state: fieldState, disabled: fieldDisabled, name: fieldName, setTouched, setDirty, validation, validityData, shouldValidateOnChange } = useFieldRootContext();
+		const { labelId: fieldLabelId } = useLabelableContext();
+		const localLabelId = ref(void 0);
+		const ariaLabelledBy = computed(() => explicitAriaLabelledBy.value ?? resolveAriaLabelledBy(fieldLabelId.value, localLabelId.value));
+		const disabled = computed(() => fieldDisabled.value || props.disabled);
+		const name = computed(() => fieldName.value ?? props.name);
+		const controllableValue = useControllableState({
+			controlled: () => props.value,
+			default: () => props.defaultValue ?? props.min,
+			name: "Slider",
+			state: "value"
+		});
+		const valueUnwrapped = controllableValue.value;
+		const setValueUnwrapped = controllableValue.setValue;
+		const sliderRef = ref(null);
+		const controlRef = ref(null);
+		const thumbRefs = ref([]);
+		const pressedInputRef = ref(null);
+		const pressedThumbCenterOffsetRef = ref(null);
+		const pressedThumbIndexRef = ref(-1);
+		const pressedValuesRef = ref(null);
+		const lastChangedValueRef = ref(null);
+		const lastChangeReasonRef = ref(REASONS.none);
+		const formatOptionsRef = computed(() => props.format);
+		const active = ref(-1);
+		const lastUsedThumbIndex = ref(-1);
+		const dragging = ref(false);
+		const thumbMap = shallowRef(/* @__PURE__ */ new Map());
+		const indicatorPosition = ref([void 0, void 0]);
+		function setActive(value) {
+			active.value = value;
+			if (value !== -1) lastUsedThumbIndex.value = value;
+		}
+		function registerFieldControlRef(element) {
+			if (element) controlRef.value = element;
+		}
+		function setThumbMap(nextMap) {
+			thumbMap.value = nextMap;
+		}
+		const compositeListProps = {
+			elementsRef: thumbRefs,
+			onMapChange: setThumbMap
+		};
+		const range = computed(() => Array.isArray(valueUnwrapped.value));
+		const values = computed(() => {
+			if (!range.value) return [clamp(valueUnwrapped.value, props.min, props.max)];
+			return [...valueUnwrapped.value].sort(asc);
+		});
+		useField({
+			id: idRef,
+			commit: (value) => validation.commit(value),
+			value: computed(() => valueUnwrapped.value),
+			controlRef,
+			name,
+			getValue: () => valueUnwrapped.value
+		});
+		watch(() => valueUnwrapped.value, () => {
+			clearErrors(name.value);
+			if (shouldValidateOnChange()) validation.commit(valueUnwrapped.value);
+			else validation.commit(valueUnwrapped.value, true);
+			const initialValue = validityData.value.initialValue;
+			let isDirty;
+			if (Array.isArray(valueUnwrapped.value) && Array.isArray(initialValue)) isDirty = !areArraysEqual(valueUnwrapped.value, initialValue);
+			else isDirty = valueUnwrapped.value !== initialValue;
+			setDirty(isDirty);
+		});
+		function areValuesEqual(newValue, oldValue) {
+			if (typeof newValue === "number" && typeof oldValue === "number") return newValue === oldValue;
+			if (Array.isArray(newValue) && Array.isArray(oldValue)) return areArraysEqual(newValue, oldValue);
+			return false;
+		}
+		function setValue(newValue, details) {
+			if (Number.isNaN(newValue) || areValuesEqual(newValue, valueUnwrapped.value)) return;
+			const changeDetails = details ?? createChangeEventDetails(REASONS.none, void 0, void 0, { activeThumbIndex: -1 });
+			lastChangeReasonRef.value = changeDetails.reason;
+			const nativeEvent = changeDetails.event;
+			const clonedEvent = new (nativeEvent.constructor ?? Event)(nativeEvent.type, nativeEvent);
+			Object.defineProperty(clonedEvent, "target", {
+				writable: true,
+				value: {
+					value: newValue,
+					name: name.value
+				}
+			});
+			changeDetails.event = clonedEvent;
+			lastChangedValueRef.value = newValue;
+			emit("valueChange", newValue, changeDetails);
+			if (changeDetails.isCanceled) return;
+			setValueUnwrapped(newValue);
+		}
+		function getSliderChangeEventReason(event) {
+			return event instanceof KeyboardEvent ? REASONS.keyboard : REASONS.inputChange;
+		}
+		function handleInputChange(valueInput, index, event) {
+			const newValue = getSliderValue(valueInput, index, props.min, props.max, range.value, values.value);
+			if (validateMinimumDistance(newValue, props.step, props.minStepsBetweenValues)) {
+				const reason = getSliderChangeEventReason(event);
+				setValue(newValue, createChangeEventDetails(reason, event, void 0, { activeThumbIndex: index }));
+				setTouched(true);
+				emit("valueCommitted", lastChangedValueRef.value ?? newValue, createGenericEventDetails(reason, event));
+			}
+		}
+		if (process.env.NODE_ENV !== "production" && props.min >= props.max) warn("Slider `max` must be greater than `min`.");
+		watch(() => disabled.value, (nextDisabled) => {
+			const activeEl = sliderRef.value ? activeElement(ownerDocument(sliderRef.value)) : null;
+			if (nextDisabled && activeEl instanceof HTMLElement && contains(sliderRef.value, activeEl)) activeEl.blur();
+			if (nextDisabled && active.value !== -1) setActive(-1);
+		});
+		const state = computed(() => ({
+			...fieldState.value,
+			activeThumbIndex: active.value,
+			disabled: disabled.value,
+			dragging: dragging.value,
+			orientation: props.orientation,
+			max: props.max,
+			min: props.min,
+			minStepsBetweenValues: props.minStepsBetweenValues,
+			step: props.step,
+			values: values.value
+		}));
+		provide(sliderRootContextKey, {
+			active,
+			lastUsedThumbIndex,
+			controlRef,
+			dragging,
+			disabled,
+			validation,
+			formatOptionsRef,
+			handleInputChange,
+			indicatorPosition,
+			inset: computed(() => props.thumbAlignment !== "center"),
+			labelId: computed(() => ariaLabelledBy.value),
+			rootLabelId: defaultLabelId,
+			largeStep: computed(() => props.largeStep),
+			lastChangedValueRef,
+			lastChangeReasonRef,
+			locale: computed(() => props.locale),
+			max: computed(() => props.max),
+			min: computed(() => props.min),
+			minStepsBetweenValues: computed(() => props.minStepsBetweenValues),
+			form: computed(() => props.form),
+			name,
+			onValueCommitted(value, details) {
+				emit("valueCommitted", value, details);
+			},
+			orientation: computed(() => props.orientation),
+			pressedInputRef,
+			pressedThumbCenterOffsetRef,
+			pressedThumbIndexRef,
+			pressedValuesRef,
+			registerFieldControlRef,
+			renderBeforeHydration: computed(() => props.thumbAlignment === "edge"),
+			setActive,
+			setDragging(value) {
+				dragging.value = value;
+			},
+			setIndicatorPosition(updater) {
+				indicatorPosition.value = updater(indicatorPosition.value);
+			},
+			setLabelId(value) {
+				localLabelId.value = value;
+			},
+			setValue,
+			state,
+			step: computed(() => props.step),
+			thumbCollisionBehavior: computed(() => props.thumbCollisionBehavior),
+			thumbMap,
+			thumbRefs,
+			values
+		});
+		const rootProps = computed(() => mergeProps$1(attrsObject, validation.getValidationProps(), {
+			"aria-labelledby": ariaLabelledBy.value,
+			"id": id,
+			"role": "group"
+		}));
+		const { tag, mergedProps, renderless, ref: renderRef } = useRenderElement({
+			componentProps: props,
+			state,
+			ref: useMergedRefs(sliderRef),
+			props: rootProps,
+			defaultTagName: "div",
+			stateAttributesMapping: sliderStateAttributesMapping
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(CompositeList_default, normalizeProps(guardReactiveProps(compositeListProps)), {
+				default: withCtx(() => [unref(renderless) ? renderSlot(_ctx.$slots, "default", {
+					key: 0,
+					ref: unref(renderRef),
+					props: unref(mergedProps),
+					state: state.value
+				}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), mergeProps({
+					key: 1,
+					ref: unref(renderRef)
+				}, unref(mergedProps)), {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+					_: 3
+				}, 16))]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+
+//#endregion
+//#region src/slider/root/SliderRoot.vue
+var SliderRoot_default = SliderRoot_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/slider/root/SliderRootDataAttributes.ts
+let SliderRootDataAttributes = /* @__PURE__ */ function(SliderRootDataAttributes) {
+	/**
+	* Present while the user is dragging.
+	*/
+	SliderRootDataAttributes["dragging"] = "data-dragging";
+	/**
+	* Indicates the orientation of the slider.
+	* @type {'horizontal' | 'vertical'}
+	*/
+	SliderRootDataAttributes["orientation"] = "data-orientation";
+	/**
+	* Present when the slider is disabled.
+	*/
+	SliderRootDataAttributes["disabled"] = "data-disabled";
+	/**
+	* Present when the slider is in valid state (when wrapped in Field.Root).
+	*/
+	SliderRootDataAttributes["valid"] = "data-valid";
+	/**
+	* Present when the slider is in invalid state (when wrapped in Field.Root).
+	*/
+	SliderRootDataAttributes["invalid"] = "data-invalid";
+	/**
+	* Present when the slider has been touched (when wrapped in Field.Root).
+	*/
+	SliderRootDataAttributes["touched"] = "data-touched";
+	/**
+	* Present when the slider's value has changed (when wrapped in Field.Root).
+	*/
+	SliderRootDataAttributes["dirty"] = "data-dirty";
+	/**
+	* Present when the slider is focused (when wrapped in Field.Root).
+	*/
+	SliderRootDataAttributes["focused"] = "data-focused";
+	return SliderRootDataAttributes;
+}({});
+
+//#endregion
+//#region src/utils/formatNumber.ts
+function formatNumber(value, locale, options) {
+	return new Intl.NumberFormat(locale, options).format(value);
+}
+
+//#endregion
+//#region src/slider/thumb/prehydrationScript.min.ts
+const script = "(function prehydration() {\n  const firstThumb = document.currentScript?.parentElement\n  if (!firstThumb) {\n    return\n  }\n\n  const control = firstThumb.closest('[data-base-ui-slider-control]')\n  if (!control) {\n    return\n  }\n\n  const indicator = control.querySelector('[data-base-ui-slider-indicator]')\n  const controlRect = control.getBoundingClientRect()\n  const vertical = control.getAttribute('data-orientation') === 'vertical'\n  const side = vertical ? 'height' : 'width'\n  const inputElems = control.querySelectorAll('input[type=\"range\"]')\n  const range = inputElems.length > 1\n  const lastIndex = inputElems.length - 1\n\n  let startPosition = null\n  let relativeSize = null\n\n  for (let i = 0; i < inputElems.length; i += 1) {\n    const input = inputElems[i]\n\n    const value = Number.parseFloat(input.getAttribute('value') ?? '')\n\n    if (Number.isNaN(value)) {\n      return\n    }\n\n    const thumb = input.parentElement\n    if (!thumb) {\n      return\n    }\n\n    const max = Number.parseFloat(input.getAttribute('max') ?? '100')\n    const min = Number.parseFloat(input.getAttribute('min') ?? '0')\n\n    const thumbRect = thumb?.getBoundingClientRect()\n\n    const controlSize = controlRect[side] - thumbRect[side]\n    const thumbValuePercent = max === min ? 0 : ((value - min) * 100) / (max - min)\n    const thumbOffsetFromControlEdge\n      = thumbRect[side] / 2 + (controlSize * thumbValuePercent) / 100\n    const percent = (thumbOffsetFromControlEdge / controlRect[side]) * 100\n\n    if (Number.isFinite(percent)) {\n      thumb.style.setProperty(`--position`, `${percent}%`)\n      thumb.style.removeProperty('visibility')\n\n      if (indicator) {\n        if (i === 0) {\n          startPosition = percent\n          indicator.style.setProperty('--start-position', `${percent}%`)\n          if (!range) {\n            indicator.style.removeProperty('visibility')\n          }\n        }\n        else if (i === lastIndex) {\n          relativeSize = percent - (startPosition ?? 0)\n          indicator.style.setProperty('--end-position', `${percent}%`)\n          indicator.style.setProperty('--relative-size', `${relativeSize}%`)\n          indicator.style.removeProperty('visibility')\n        }\n      }\n    }\n  }\n})()";
+
+//#endregion
+//#region src/slider/thumb/SliderThumbDataAttributes.ts
+let SliderThumbDataAttributes = /* @__PURE__ */ function(SliderThumbDataAttributes) {
+	/**
+	* Indicates the index of the thumb in range sliders.
+	*/
+	SliderThumbDataAttributes["index"] = "data-index";
+	/**
+	* Present while the user is dragging.
+	*/
+	SliderThumbDataAttributes["dragging"] = "data-dragging";
+	/**
+	* Indicates the orientation of the slider.
+	* @type {'horizontal' | 'vertical'}
+	*/
+	SliderThumbDataAttributes["orientation"] = "data-orientation";
+	/**
+	* Present when the slider is disabled.
+	*/
+	SliderThumbDataAttributes["disabled"] = "data-disabled";
+	/**
+	* Present when the slider is in valid state (when wrapped in Field.Root).
+	*/
+	SliderThumbDataAttributes["valid"] = "data-valid";
+	/**
+	* Present when the slider is in invalid state (when wrapped in Field.Root).
+	*/
+	SliderThumbDataAttributes["invalid"] = "data-invalid";
+	/**
+	* Present when the slider has been touched (when wrapped in Field.Root).
+	*/
+	SliderThumbDataAttributes["touched"] = "data-touched";
+	/**
+	* Present when the slider's value has changed (when wrapped in Field.Root).
+	*/
+	SliderThumbDataAttributes["dirty"] = "data-dirty";
+	/**
+	* Present when the slider is focused (when wrapped in Field.Root).
+	*/
+	SliderThumbDataAttributes["focused"] = "data-focused";
+	return SliderThumbDataAttributes;
+}({});
+
+//#endregion
+//#region src/slider/thumb/SliderThumb.vue?vue&type=script&setup=true&lang.ts
+var SliderThumb_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "SliderThumb",
+	inheritAttrs: false,
+	__name: "SliderThumb",
+	props: {
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		getAriaLabel: {
+			type: [Function, null],
+			required: false
+		},
+		getAriaValueText: {
+			type: [Function, null],
+			required: false
+		},
+		index: {
+			type: Number,
+			required: false
+		},
+		inputRef: {
+			type: [
+				Function,
+				Object,
+				null
+			],
+			required: false
+		},
+		tabIndex: {
+			type: Number,
+			required: false
+		},
+		id: {
+			type: String,
+			required: false
+		},
+		ariaLabel: {
+			type: String,
+			required: false
+		},
+		ariaLabelledby: {
+			type: String,
+			required: false
+		},
+		ariaDescribedby: {
+			type: String,
+			required: false
+		},
+		style: {
+			type: [Object, Function],
+			required: false
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "div"
+		},
+		class: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const ALL_KEYS = new Set([
+			ARROW_UP$1,
+			ARROW_DOWN$1,
+			ARROW_LEFT$1,
+			ARROW_RIGHT$1,
+			HOME,
+			END,
+			PAGE_UP,
+			PAGE_DOWN
+		]);
+		function getDefaultAriaValueText(values, index, format, locale) {
+			if (index < 0) return;
+			if (values.length === 2) {
+				if (index === 0) return `${formatNumber(values[index], locale, format)} start range`;
+				return `${formatNumber(values[index], locale, format)} end range`;
+			}
+			return format ? formatNumber(values[index], locale, format) : void 0;
+		}
+		function getNewValue(thumbValue, step, direction, min, max) {
+			return direction === 1 ? Math.min(thumbValue + step, max) : Math.max(thumbValue - step, min);
+		}
+		const attrs = useAttrs();
+		const { nonce } = useCSPContext();
+		const direction = useDirection();
+		const rootContext = useSliderRootContext();
+		const { setTouched, setFocused, validationMode, validation } = useFieldRootContext();
+		const id = useBaseUiId(props.id);
+		const disabled = computed(() => props.disabled || rootContext.disabled.value);
+		const range = computed(() => rootContext.values.value.length > 1);
+		const vertical = computed(() => rootContext.orientation.value === "vertical");
+		const rtl = computed(() => direction.value === "rtl");
+		const thumbRef = ref(null);
+		const inputRef = ref(null);
+		const restoringFocusVisibleRef = ref(false);
+		const defaultInputId = useBaseUiId();
+		const labelableId = useLabelableId();
+		const inputId = computed(() => range.value ? defaultInputId : labelableId.value);
+		const { ref: listItemRef, index: compositeIndex } = useCompositeListItem({
+			metadata: () => ({ inputId }),
+			index: () => props.index
+		});
+		const index = computed(() => !range.value ? 0 : props.index ?? compositeIndex.value);
+		const last = computed(() => index.value === rootContext.values.value.length - 1);
+		const thumbValue = computed(() => rootContext.values.value[index.value]);
+		const thumbValuePercent = computed(() => valueToPercent(thumbValue.value, rootContext.min.value, rootContext.max.value));
+		const isMounted = ref(false);
+		const positionPercent = ref(void 0);
+		onMounted(() => {
+			isMounted.value = true;
+		});
+		const safeLastUsedThumbIndex = computed(() => rootContext.lastUsedThumbIndex.value >= 0 && rootContext.lastUsedThumbIndex.value < rootContext.values.value.length ? rootContext.lastUsedThumbIndex.value : -1);
+		function setIndicatorPositionForIndex(nextInsetPosition) {
+			rootContext.setIndicatorPosition((prevPosition) => {
+				const next = [...prevPosition];
+				if (index.value === 0) next[0] = nextInsetPosition;
+				else if (last.value) next[1] = nextInsetPosition;
+				return next;
+			});
+		}
+		function getInsetPosition() {
+			const control = rootContext.controlRef.value;
+			const thumb = thumbRef.value;
+			if (!control || !thumb) return;
+			const thumbRect = thumb.getBoundingClientRect();
+			const controlRect = control.getBoundingClientRect();
+			const side = vertical.value ? "height" : "width";
+			const controlSize = controlRect[side] - thumbRect[side];
+			const nextPositionPercent = (thumbRect[side] / 2 + controlSize * thumbValuePercent.value / 100) / controlRect[side] * 100;
+			const nextInsetPosition = Number.isFinite(nextPositionPercent) ? nextPositionPercent : void 0;
+			positionPercent.value = nextInsetPosition;
+			setIndicatorPositionForIndex(nextInsetPosition);
+		}
+		watch(() => [
+			rootContext.inset.value,
+			thumbValuePercent.value,
+			isMounted.value
+		], () => {
+			if (rootContext.inset.value) queueMicrotask(getInsetPosition);
+		}, { immediate: true });
+		watchEffect((onCleanup) => {
+			if (!rootContext.inset.value || typeof ResizeObserver !== "function") return;
+			const control = rootContext.controlRef.value;
+			const thumb = thumbRef.value;
+			if (!control || !thumb) return;
+			const observer = new ResizeObserver(getInsetPosition);
+			observer.observe(control);
+			observer.observe(thumb);
+			onCleanup(() => {
+				observer.disconnect();
+			});
+		});
+		const thumbStyle = computed(() => {
+			const startEdge = vertical.value ? "bottom" : "insetInlineStart";
+			const crossOffsetProperty = vertical.value ? "left" : "top";
+			let zIndex;
+			if (range.value) {
+				if (rootContext.active.value === index.value) zIndex = 2;
+				else if (safeLastUsedThumbIndex.value === index.value) zIndex = 1;
+			} else if (rootContext.active.value === index.value) zIndex = 1;
+			if (!rootContext.inset.value) {
+				if (!Number.isFinite(thumbValuePercent.value)) return visuallyHidden;
+				return {
+					position: "absolute",
+					[startEdge]: `${thumbValuePercent.value}%`,
+					[crossOffsetProperty]: "50%",
+					translate: `${(vertical.value || !rtl.value ? -1 : 1) * 50}% ${(vertical.value ? 1 : -1) * 50}%`,
+					zIndex
+				};
+			}
+			return {
+				"--position": `${positionPercent.value ?? 0}%`,
+				"visibility": rootContext.renderBeforeHydration.value && !isMounted.value || positionPercent.value === void 0 ? "hidden" : void 0,
+				"position": "absolute",
+				[startEdge]: "var(--position)",
+				[crossOffsetProperty]: "50%",
+				"translate": `${(vertical.value || !rtl.value ? -1 : 1) * 50}% ${(vertical.value ? 1 : -1) * 50}%`,
+				zIndex
+			};
+		});
+		const cssWritingMode = computed(() => {
+			if (rootContext.orientation.value === "vertical") return rtl.value ? "vertical-rl" : "vertical-lr";
+		});
+		const ariaLabel = computed(() => typeof props.getAriaLabel === "function" ? props.getAriaLabel(index.value) : props.ariaLabel);
+		function setInputRef(node) {
+			inputRef.value = node;
+			validation.setInputRef(node);
+			const forwardedInputRef = props.inputRef;
+			if (!forwardedInputRef) return;
+			if (typeof forwardedInputRef === "function") forwardedInputRef(node);
+			else forwardedInputRef.value = node;
+		}
+		function setInputVNodeRef(node) {
+			setInputRef(node instanceof HTMLInputElement ? node : null);
+		}
+		function handleBlur(event) {
+			if (restoringFocusVisibleRef.value) {
+				event.stopPropagation();
+				return;
+			}
+			if (!thumbRef.value) return;
+			rootContext.setActive(-1);
+			setTouched(true);
+			setFocused(false);
+			if (validationMode.value === "onBlur") validation.commit(getSliderValue(thumbValue.value, index.value, rootContext.min.value, rootContext.max.value, range.value, rootContext.values.value));
+		}
+		function handleKeydown(event) {
+			if (!ALL_KEYS.has(event.key)) return;
+			if (COMPOSITE_KEYS.has(event.key)) event.stopPropagation();
+			let newValue = null;
+			const roundedValue = roundValueToStep(thumbValue.value, rootContext.step.value, rootContext.min.value);
+			switch (event.key) {
+				case ARROW_UP$1:
+					newValue = getNewValue(roundedValue, event.shiftKey ? rootContext.largeStep.value : rootContext.step.value, 1, rootContext.min.value, rootContext.max.value);
+					break;
+				case ARROW_RIGHT$1:
+					newValue = getNewValue(roundedValue, event.shiftKey ? rootContext.largeStep.value : rootContext.step.value, rtl.value ? -1 : 1, rootContext.min.value, rootContext.max.value);
+					break;
+				case ARROW_DOWN$1:
+					newValue = getNewValue(roundedValue, event.shiftKey ? rootContext.largeStep.value : rootContext.step.value, -1, rootContext.min.value, rootContext.max.value);
+					break;
+				case ARROW_LEFT$1:
+					newValue = getNewValue(roundedValue, event.shiftKey ? rootContext.largeStep.value : rootContext.step.value, rtl.value ? 1 : -1, rootContext.min.value, rootContext.max.value);
+					break;
+				case PAGE_UP:
+					newValue = getNewValue(roundedValue, rootContext.largeStep.value, 1, rootContext.min.value, rootContext.max.value);
+					break;
+				case PAGE_DOWN:
+					newValue = getNewValue(roundedValue, rootContext.largeStep.value, -1, rootContext.min.value, rootContext.max.value);
+					break;
+				case END:
+					newValue = rootContext.max.value;
+					if (range.value) newValue = Number.isFinite(rootContext.values.value[index.value + 1]) ? rootContext.values.value[index.value + 1] - rootContext.step.value * rootContext.minStepsBetweenValues.value : rootContext.max.value;
+					break;
+				case HOME:
+					newValue = rootContext.min.value;
+					if (range.value) newValue = Number.isFinite(rootContext.values.value[index.value - 1]) ? rootContext.values.value[index.value - 1] + rootContext.step.value * rootContext.minStepsBetweenValues.value : rootContext.min.value;
+					break;
+				default: break;
+			}
+			if (newValue !== null) {
+				const input = event.currentTarget;
+				if (!matchesFocusVisible(input)) {
+					restoringFocusVisibleRef.value = true;
+					input.blur();
+					input.focus({
+						preventScroll: true,
+						focusVisible: true
+					});
+				}
+				rootContext.handleInputChange(newValue, index.value, event);
+				rootContext.onValueCommitted(rootContext.lastChangedValueRef.value ?? getSliderValue(newValue, index.value, rootContext.min.value, rootContext.max.value, range.value, rootContext.values.value), createGenericEventDetails(REASONS.keyboard, event));
+				event.preventDefault();
+			}
+		}
+		const inputStyle = computed(() => ({
+			...visuallyHidden,
+			width: "100%",
+			height: "100%",
+			writingMode: cssWritingMode.value
+		}));
+		const inputValidationProps = computed(() => validation.getInputValidationProps());
+		const forwardedInputAttrs = computed(() => {
+			const attrsObject = attrs;
+			return {
+				onBlur: attrsObject.onBlur,
+				onFocus: attrsObject.onFocus,
+				onKeydown: attrsObject.onKeydown
+			};
+		});
+		const thumbAttrs = computed(() => {
+			const { onBlur: _onBlur, onFocus: _onFocus, onKeydown: _onKeydown, ...rest } = attrs;
+			return rest;
+		});
+		const inputProps = computed(() => mergeProps$1(inputValidationProps.value, forwardedInputAttrs.value, {
+			"aria-label": ariaLabel.value,
+			"aria-labelledby": props.ariaLabelledby ?? (ariaLabel.value == null ? rootContext.labelId.value : void 0),
+			"aria-describedby": props.ariaDescribedby ?? inputValidationProps.value["aria-describedby"],
+			"aria-orientation": rootContext.orientation.value,
+			"aria-valuenow": thumbValue.value,
+			"aria-valuetext": typeof props.getAriaValueText === "function" ? props.getAriaValueText(formatNumber(thumbValue.value, rootContext.locale.value, rootContext.formatOptionsRef.value), thumbValue.value, index.value) : getDefaultAriaValueText(rootContext.values.value, index.value, rootContext.formatOptionsRef.value, rootContext.locale.value),
+			"disabled": disabled.value,
+			"form": rootContext.form.value,
+			"id": inputId.value,
+			"max": rootContext.max.value,
+			"min": rootContext.min.value,
+			"name": rootContext.name.value,
+			onChange(event) {
+				rootContext.handleInputChange(event.currentTarget.valueAsNumber, index.value, event);
+			},
+			onFocus(event) {
+				const isRestoringFocusVisible = restoringFocusVisibleRef.value;
+				restoringFocusVisibleRef.value = false;
+				rootContext.setActive(index.value);
+				setFocused(true);
+				if (isRestoringFocusVisible) event.stopPropagation();
+			},
+			"onBlur": handleBlur,
+			"onKeydown": handleKeydown,
+			"step": rootContext.step.value,
+			"style": inputStyle.value,
+			"tabIndex": props.tabIndex ?? void 0,
+			"type": "range",
+			"value": thumbValue.value ?? ""
+		}));
+		const mergedRef = useMergedRefs(listItemRef, thumbRef);
+		const thumbProps = computed(() => mergeProps$1(thumbAttrs.value, {
+			[SliderThumbDataAttributes.index]: index.value,
+			id,
+			onPointerdown(event) {
+				rootContext.pressedThumbIndexRef.value = index.value;
+				if (thumbRef.value != null) {
+					const axis = rootContext.orientation.value === "horizontal" ? "x" : "y";
+					const midpoint = getMidpoint(thumbRef.value);
+					const offset = (rootContext.orientation.value === "horizontal" ? event.clientX : event.clientY) - midpoint[axis];
+					rootContext.pressedThumbCenterOffsetRef.value = offset;
+				}
+				if (inputRef.value != null && rootContext.pressedInputRef.value !== inputRef.value) rootContext.pressedInputRef.value = inputRef.value;
+			},
+			style: thumbStyle.value,
+			suppressHydrationWarning: rootContext.renderBeforeHydration.value || void 0
+		}));
+		const { tag, mergedProps, renderless, ref: renderRef } = useRenderElement({
+			componentProps: props,
+			state: rootContext.state,
+			props: thumbProps,
+			defaultTagName: "div",
+			ref: mergedRef,
+			stateAttributesMapping: sliderStateAttributesMapping
+		});
+		watch(() => rootContext.active.value, () => {
+			if (disabled.value && rootContext.active.value === index.value) rootContext.setActive(-1);
+		});
+		return (_ctx, _cache) => {
+			return unref(renderless) ? renderSlot(_ctx.$slots, "default", {
+				key: 0,
+				ref: unref(renderRef),
+				props: unref(mergedProps),
+				state: unref(rootContext).state
+			}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), mergeProps({
+				key: 1,
+				ref: unref(renderRef)
+			}, unref(mergedProps)), {
+				default: withCtx(() => [
+					renderSlot(_ctx.$slots, "default"),
+					createElementVNode("input", mergeProps({ ref: setInputVNodeRef }, inputProps.value), null, 16),
+					createCommentVNode(" eslint-disable-next-line vue/require-component-is "),
+					unref(rootContext).inset.value && !isMounted.value && unref(rootContext).renderBeforeHydration.value && last.value ? (openBlock(), createBlock(resolveDynamicComponent("script"), {
+						key: 0,
+						nonce: unref(nonce),
+						"suppress-hydration-warning": true
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(unref(script)), 1)]),
+						_: 1
+					}, 8, ["nonce"])) : createCommentVNode("v-if", true)
+				]),
+				_: 3
+			}, 16));
+		};
+	}
+});
+
+//#endregion
+//#region src/slider/thumb/SliderThumb.vue
+var SliderThumb_default = SliderThumb_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/slider/track/SliderTrack.vue?vue&type=script&setup=true&lang.ts
+var SliderTrack_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "SliderTrack",
+	inheritAttrs: false,
+	__name: "SliderTrack",
+	props: {
+		as: {
+			type: null,
+			required: false,
+			default: "div"
+		},
+		class: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		style: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const attrs = useAttrs();
+		const rootContext = useSliderRootContext();
+		const trackProps = computed(() => mergeProps$1(attrs, { style: { position: "relative" } }));
+		const { tag, mergedProps, renderless, ref: renderRef } = useRenderElement({
+			componentProps: props,
+			state: rootContext.state,
+			props: trackProps,
+			defaultTagName: "div",
+			stateAttributesMapping: sliderStateAttributesMapping
+		});
+		return (_ctx, _cache) => {
+			return unref(renderless) ? renderSlot(_ctx.$slots, "default", {
+				key: 0,
+				ref: unref(renderRef),
+				props: unref(mergedProps),
+				state: unref(rootContext).state
+			}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), mergeProps({
+				key: 1,
+				ref: unref(renderRef)
+			}, unref(mergedProps)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16));
+		};
+	}
+});
+
+//#endregion
+//#region src/slider/track/SliderTrack.vue
+var SliderTrack_default = SliderTrack_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/slider/track/SliderTrackDataAttributes.ts
+let SliderTrackDataAttributes = /* @__PURE__ */ function(SliderTrackDataAttributes) {
+	SliderTrackDataAttributes["dragging"] = "data-dragging";
+	SliderTrackDataAttributes["orientation"] = "data-orientation";
+	SliderTrackDataAttributes["disabled"] = "data-disabled";
+	SliderTrackDataAttributes["valid"] = "data-valid";
+	SliderTrackDataAttributes["invalid"] = "data-invalid";
+	SliderTrackDataAttributes["touched"] = "data-touched";
+	SliderTrackDataAttributes["dirty"] = "data-dirty";
+	SliderTrackDataAttributes["focused"] = "data-focused";
+	return SliderTrackDataAttributes;
+}({});
+
+//#endregion
+//#region src/slider/value/SliderValue.vue?vue&type=script&setup=true&lang.ts
+/**
+* Displays the current value of the slider as text.
+* Renders an `<output>` element.
+*
+* Documentation: [Base UI Slider](https://baseui-vue.com/docs/components/slider)
+*/
+var SliderValue_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "SliderValue",
+	inheritAttrs: false,
+	__name: "SliderValue",
+	props: {
+		ariaLive: {
+			type: String,
+			required: false,
+			default: "off"
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "output"
+		},
+		class: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		style: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const attrs = useAttrs();
+		const rootContext = useSliderRootContext();
+		const outputFor = computed(() => {
+			let htmlFor = "";
+			for (const thumbMetadata of rootContext.thumbMap.value.values()) if (thumbMetadata?.inputId) htmlFor += `${thumbMetadata.inputId} `;
+			return htmlFor.trim() === "" ? void 0 : htmlFor.trim();
+		});
+		const formattedValues = computed(() => rootContext.values.value.map((value) => formatNumber(value, rootContext.locale.value, rootContext.formatOptionsRef.value)));
+		const defaultDisplayValue = computed(() => rootContext.values.value.map((value, index) => formattedValues.value[index] || String(value)).join(" – "));
+		const valueProps = computed(() => mergeProps$1(attrs, {
+			"aria-live": props.ariaLive,
+			"for": outputFor.value
+		}));
+		const { tag, mergedProps, renderless, ref: renderRef } = useRenderElement({
+			componentProps: props,
+			state: rootContext.state,
+			props: valueProps,
+			defaultTagName: "output",
+			stateAttributesMapping: sliderStateAttributesMapping
+		});
+		return (_ctx, _cache) => {
+			return unref(renderless) ? renderSlot(_ctx.$slots, "default", {
+				key: 0,
+				ref: unref(renderRef),
+				props: unref(mergedProps),
+				state: unref(rootContext).state,
+				formattedValues: formattedValues.value,
+				values: unref(rootContext).values.value
+			}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), mergeProps({
+				key: 1,
+				ref: unref(renderRef)
+			}, unref(mergedProps)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {
+					formattedValues: formattedValues.value,
+					values: unref(rootContext).values.value
+				}, () => [createTextVNode(toDisplayString(defaultDisplayValue.value), 1)])]),
+				_: 3
+			}, 16));
+		};
+	}
+});
+
+//#endregion
+//#region src/slider/value/SliderValue.vue
+var SliderValue_default = SliderValue_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/slider/value/SliderValueDataAttributes.ts
+let SliderValueDataAttributes = /* @__PURE__ */ function(SliderValueDataAttributes) {
+	/**
+	* Present while the user is dragging.
+	*/
+	SliderValueDataAttributes["dragging"] = "data-dragging";
+	/**
+	* Indicates the orientation of the slider.
+	* @type {'horizontal' | 'vertical'}
+	*/
+	SliderValueDataAttributes["orientation"] = "data-orientation";
+	/**
+	* Present when the slider is disabled.
+	*/
+	SliderValueDataAttributes["disabled"] = "data-disabled";
+	/**
+	* Present when the slider is in valid state (when wrapped in Field.Root).
+	*/
+	SliderValueDataAttributes["valid"] = "data-valid";
+	/**
+	* Present when the slider is in invalid state (when wrapped in Field.Root).
+	*/
+	SliderValueDataAttributes["invalid"] = "data-invalid";
+	/**
+	* Present when the slider has been touched (when wrapped in Field.Root).
+	*/
+	SliderValueDataAttributes["touched"] = "data-touched";
+	/**
+	* Present when the slider's value has changed (when wrapped in Field.Root).
+	*/
+	SliderValueDataAttributes["dirty"] = "data-dirty";
+	/**
+	* Present when the slider is focused (when wrapped in Field.Root).
+	*/
+	SliderValueDataAttributes["focused"] = "data-focused";
+	return SliderValueDataAttributes;
+}({});
+
+//#endregion
+//#region src/switch/root/SwitchRootDataAttributes.ts
+let SwitchRootDataAttributes = /* @__PURE__ */ function(SwitchRootDataAttributes) {
+	/**
+	* Present when the switch is checked.
+	*/
+	SwitchRootDataAttributes["checked"] = "data-checked";
+	/**
+	* Present when the switch is not checked.
+	*/
+	SwitchRootDataAttributes["unchecked"] = "data-unchecked";
+	/**
+	* Present when the switch is disabled.
+	*/
+	SwitchRootDataAttributes["disabled"] = "data-disabled";
+	/**
+	* Present when the switch is readonly.
+	*/
+	SwitchRootDataAttributes["readonly"] = "data-readonly";
+	/**
+	* Present when the switch is required.
+	*/
+	SwitchRootDataAttributes["required"] = "data-required";
+	/**
+	* Present when the switch is in valid state (when wrapped in FieldRoot).
+	*/
+	SwitchRootDataAttributes["valid"] = "data-valid";
+	/**
+	* Present when the switch is in invalid state (when wrapped in FieldRoot).
+	*/
+	SwitchRootDataAttributes["invalid"] = "data-invalid";
+	/**
+	* Present when the switch has been touched (when wrapped in FieldRoot).
+	*/
+	SwitchRootDataAttributes["touched"] = "data-touched";
+	/**
+	* Present when the switch's value has changed (when wrapped in FieldRoot).
+	*/
+	SwitchRootDataAttributes["dirty"] = "data-dirty";
+	/**
+	* Present when the switch is active (when wrapped in FieldRoot).
+	*/
+	SwitchRootDataAttributes["filled"] = "data-filled";
+	/**
+	* Present when the switch is focused (when wrapped in FieldRoot).
+	*/
+	SwitchRootDataAttributes["focused"] = "data-focused";
+	return SwitchRootDataAttributes;
+}({});
+
+//#endregion
+//#region src/switch/stateAttributesMapping.ts
+const CHECKED_ATTRS = { [SwitchRootDataAttributes.checked]: "" };
+const UNCHECKED_ATTRS = { [SwitchRootDataAttributes.unchecked]: "" };
+const stateAttributesMapping = {
+	...fieldValidityMapping,
+	checked(value) {
+		if (value) return CHECKED_ATTRS;
+		return UNCHECKED_ATTRS;
+	}
+};
+
+//#endregion
+//#region src/switch/root/SwitchRootContext.ts
+const switchRootContextKey = Symbol("SwitchRootContext");
+function useSwitchRootContext(optional = false) {
+	const context = inject(switchRootContextKey, void 0);
+	if (!context && !optional) throw new Error("Base UI Vue: SwitchRootContext is missing. Switch parts must be placed within <SwitchRoot>.");
+	return context;
+}
+
+//#endregion
+//#region src/switch/root/SwitchRoot.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = [
+	"form",
+	"name",
+	"value"
+];
+/**
+* Represents the switch itself.
+* Renders a `<span>` element and a hidden `<input>` beside.
+*
+* Documentation: [Base UI Vue Switch](https://baseui-vue.com/docs/components/switch)
+*/
+var SwitchRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "SwitchRoot",
+	inheritAttrs: false,
+	__name: "SwitchRoot",
+	props: {
+		id: {
+			type: String,
+			required: false
+		},
+		checked: {
+			type: Boolean,
+			required: false
+		},
+		defaultChecked: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		inputRef: {
+			type: [
+				Object,
+				Function,
+				null
+			],
+			required: false
+		},
+		name: {
+			type: String,
+			required: false
+		},
+		form: {
+			type: String,
+			required: false
+		},
+		readOnly: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		required: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		value: {
+			type: String,
+			required: false
+		},
+		uncheckedValue: {
+			type: String,
+			required: false
+		},
+		"aria-labelledby": {
+			type: String,
+			required: false
+		},
+		nativeButton: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "span"
+		},
+		class: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		style: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	emits: ["checkedChange"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const attrsObject = useAttrs();
+		const instance = getCurrentInstance();
+		const { clearErrors } = useFormContext();
+		const { disabled: fieldDisabled, name: fieldName, setDirty, setFilled, setFocused, setTouched, state: fieldState, validationMode, validityData, shouldValidateOnChange, validation } = useFieldRootContext();
+		const labelableContext = useLabelableContext();
+		const disabled = computed(() => fieldDisabled.value || props.disabled);
+		const name = computed(() => fieldName.value ?? props.name);
+		const rootElementId = useBaseUiId();
+		const controlId = useLabelableId({ id: () => props.id });
+		const inputId = computed(() => props.nativeButton ? void 0 : controlId.value);
+		const { value: checked, setValue: setCheckedState } = useControllableState({
+			controlled: () => instance?.vnode.props && Object.prototype.hasOwnProperty.call(instance.vnode.props, "checked") ? props.checked : void 0,
+			default: () => props.defaultChecked,
+			name: "Switch",
+			state: "checked"
+		});
+		const controlRef = ref(null);
+		const inputElementRef = ref(null);
+		const mergedInputRef = useMergedRefs(inputElementRef, props.inputRef);
+		useField({
+			id: computed(() => rootElementId),
+			commit: (value) => validation.commit(value),
+			value: checked,
+			controlRef,
+			name,
+			getValue: () => checked.value
+		});
+		const ariaLabelledBy = useAriaLabelledBy({
+			ariaLabelledBy: computed(() => props["aria-labelledby"]),
+			labelId: labelableContext.labelId,
+			labelSourceRef: inputElementRef,
+			enableFallback: !props.nativeButton,
+			labelSourceId: inputId
+		});
+		watchEffect(() => {
+			if (checked.value) setFilled(true);
+		});
+		watchEffect(() => {
+			if (!inputElementRef.value) return;
+			validation.setInputRef(inputElementRef.value);
+		});
+		watch(() => checked.value, (nextChecked) => {
+			clearErrors(name.value);
+			setFilled(nextChecked);
+			setDirty(nextChecked !== validityData.value.initialValue);
+			if (shouldValidateOnChange()) validation.commit(nextChecked);
+			else validation.commit(nextChecked, true);
+		}, { flush: "sync" });
+		const { getButtonProps, buttonRef } = useButton({
+			disabled,
+			native: computed(() => props.nativeButton)
+		});
+		function combineDescriptionProps(localProps, validationProps) {
+			const localDescribedBy = localProps["aria-describedby"];
+			const validationDescribedBy = validationProps["aria-describedby"];
+			const describedBy = Array.from(new Set([localDescribedBy, validationDescribedBy].filter(Boolean).flatMap((value) => String(value).split(/\s+/).filter(Boolean)))).join(" ") || void 0;
+			return {
+				...localProps,
+				...validationProps,
+				"aria-describedby": describedBy
+			};
+		}
+		function applyCheckedChange(nextChecked, event, onApplied) {
+			const details = createChangeEventDetails(REASONS.none, event);
+			emit("checkedChange", nextChecked, details);
+			if (details.isCanceled) return false;
+			onApplied?.();
+			setCheckedState(nextChecked);
+			return true;
+		}
+		function handleInputChange(event) {
+			const target = event.currentTarget;
+			if (props.readOnly || disabled.value) {
+				event.preventDefault();
+				event.stopPropagation();
+				target.checked = checked.value;
+				return;
+			}
+			if (!applyCheckedChange(target.checked, event)) target.checked = checked.value;
+		}
+		function handleRootClick(event) {
+			if (props.readOnly || disabled.value) return;
+			event.preventDefault();
+			const nextChecked = !checked.value;
+			applyCheckedChange(nextChecked, event, () => {
+				if (inputElementRef.value) inputElementRef.value.checked = nextChecked;
+			});
+		}
+		function handleFocus() {
+			if (!disabled.value) setFocused(true);
+		}
+		function handleBlur() {
+			if (disabled.value) return;
+			setTouched(true);
+			setFocused(false);
+			if (validationMode.value === "onBlur") validation.commit(checked.value);
+		}
+		const state = computed(() => ({
+			...fieldState.value,
+			checked: checked.value,
+			disabled: disabled.value,
+			readOnly: props.readOnly,
+			required: props.required
+		}));
+		provide(switchRootContextKey, state);
+		__expose({ element: controlRef });
+		const mergedRootRef = useMergedRefs(buttonRef, controlRef);
+		const buttonInteractionAttrs = computed(() => ({
+			onClick: attrsObject.onClick,
+			onKeydown: attrsObject.onKeydown,
+			onKeyup: attrsObject.onKeyup,
+			onMousedown: attrsObject.onMousedown,
+			onPointerdown: attrsObject.onPointerdown
+		}));
+		const passthroughAttrs = computed(() => {
+			const { onClick, onKeydown, onKeyup, onMousedown, onPointerdown, ...rest } = attrsObject;
+			return rest;
+		});
+		const { tag, mergedProps, renderless, ref: renderRef } = useRenderElement({
+			componentProps: props,
+			state,
+			props: computed(() => {
+				const localDescriptionProps = labelableContext.getDescriptionProps();
+				const validationProps = validation.getValidationProps();
+				return mergeProps$1(getButtonProps(mergeProps$1(buttonInteractionAttrs.value, { onClick: handleRootClick })), combineDescriptionProps(localDescriptionProps, validationProps), {
+					"id": props.nativeButton ? controlId.value : rootElementId,
+					"role": "switch",
+					"aria-checked": checked.value,
+					"aria-readonly": props.readOnly || void 0,
+					"aria-required": props.required || void 0,
+					"aria-labelledby": ariaLabelledBy.value,
+					"onFocus": handleFocus,
+					"onBlur": handleBlur
+				}, passthroughAttrs.value);
+			}),
+			stateAttributesMapping,
+			defaultTagName: "span",
+			ref: mergedRootRef
+		});
+		const inputProps = computed(() => {
+			const localDescriptionProps = labelableContext.getDescriptionProps();
+			const validationProps = validation.getInputValidationProps();
+			return mergeProps$1({
+				"checked": checked.value,
+				"disabled": disabled.value,
+				"form": props.form,
+				"id": props.nativeButton ? void 0 : inputId.value,
+				"name": name.value,
+				"required": props.required,
+				"type": "checkbox",
+				"aria-hidden": true,
+				"tabindex": -1,
+				"style": name.value ? visuallyHiddenInput : visuallyHidden,
+				"onChange": handleInputChange,
+				onFocus() {
+					controlRef.value?.focus();
+				}
+			}, props.value !== void 0 ? { value: props.value } : EMPTY_OBJECT, combineDescriptionProps(localDescriptionProps, validationProps));
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [
+				unref(renderless) ? renderSlot(_ctx.$slots, "default", {
+					key: 0,
+					ref: unref(renderRef),
+					props: unref(mergedProps),
+					state: state.value
+				}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), mergeProps({
+					key: 1,
+					ref: unref(renderRef)
+				}, unref(mergedProps)), {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "default", { state: state.value })]),
+					_: 3
+				}, 16)),
+				!unref(checked) && !disabled.value && name.value && __props.uncheckedValue !== void 0 ? (openBlock(), createElementBlock("input", {
+					key: 2,
+					type: "hidden",
+					form: __props.form,
+					name: name.value,
+					value: __props.uncheckedValue
+				}, null, 8, _hoisted_1)) : createCommentVNode("v-if", true),
+				createElementVNode("input", mergeProps({ ref: unref(mergedInputRef) }, inputProps.value), null, 16)
+			], 64);
+		};
+	}
+});
+
+//#endregion
+//#region src/switch/root/SwitchRoot.vue
+var SwitchRoot_default = SwitchRoot_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/switch/thumb/SwitchThumb.vue?vue&type=script&setup=true&lang.ts
+/**
+* The movable part of the switch that indicates whether the switch is on or off.
+* Renders a `<span>`.
+*
+* Documentation: [Base UI Vue Switch](https://baseui-vue.com/docs/components/switch)
+*/
+var SwitchThumb_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "SwitchThumb",
+	inheritAttrs: false,
+	__name: "SwitchThumb",
+	props: {
+		as: {
+			type: null,
+			required: false,
+			default: "span"
+		},
+		class: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		style: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const attrsObject = useAttrs();
+		const { state: fieldState } = useFieldRootContext();
+		const rootState = useSwitchRootContext();
+		const state = computed(() => ({
+			...fieldState.value,
+			...rootState.value
+		}));
+		const { tag, mergedProps, renderless, ref: renderRef } = useRenderElement({
+			componentProps: props,
+			state,
+			props: computed(() => attrsObject),
+			stateAttributesMapping,
+			defaultTagName: "span"
+		});
+		return (_ctx, _cache) => {
+			return unref(renderless) ? renderSlot(_ctx.$slots, "default", {
+				key: 0,
+				ref: unref(renderRef),
+				props: unref(mergedProps),
+				state: state.value
+			}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), mergeProps({
+				key: 1,
+				ref: unref(renderRef)
+			}, unref(mergedProps)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", { state: state.value })]),
+				_: 3
+			}, 16));
+		};
+	}
+});
+
+//#endregion
+//#region src/switch/thumb/SwitchThumb.vue
+var SwitchThumb_default = SwitchThumb_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/switch/thumb/SwitchThumbDataAttributes.ts
+let SwitchThumbDataAttributes = /* @__PURE__ */ function(SwitchThumbDataAttributes) {
+	/**
+	* Present when the switch is checked.
+	*/
+	SwitchThumbDataAttributes["checked"] = "data-checked";
+	/**
+	* Present when the switch is not checked.
+	*/
+	SwitchThumbDataAttributes["unchecked"] = "data-unchecked";
+	/**
+	* Present when the switch is disabled.
+	*/
+	SwitchThumbDataAttributes["disabled"] = "data-disabled";
+	/**
+	* Present when the switch is readonly.
+	*/
+	SwitchThumbDataAttributes["readonly"] = "data-readonly";
+	/**
+	* Present when the switch is required.
+	*/
+	SwitchThumbDataAttributes["required"] = "data-required";
+	/**
+	* Present when the switch is in valid state (when wrapped in FieldRoot).
+	*/
+	SwitchThumbDataAttributes["valid"] = "data-valid";
+	/**
+	* Present when the switch is in invalid state (when wrapped in FieldRoot).
+	*/
+	SwitchThumbDataAttributes["invalid"] = "data-invalid";
+	/**
+	* Present when the switch has been touched (when wrapped in FieldRoot).
+	*/
+	SwitchThumbDataAttributes["touched"] = "data-touched";
+	/**
+	* Present when the switch's value has changed (when wrapped in FieldRoot).
+	*/
+	SwitchThumbDataAttributes["dirty"] = "data-dirty";
+	/**
+	* Present when the switch is active (when wrapped in FieldRoot).
+	*/
+	SwitchThumbDataAttributes["filled"] = "data-filled";
+	/**
+	* Present when the switch is focused (when wrapped in FieldRoot).
+	*/
+	SwitchThumbDataAttributes["focused"] = "data-focused";
+	return SwitchThumbDataAttributes;
+}({});
+
+//#endregion
+//#region src/toggle-group/ToggleGroupContext.ts
+const toggleGroupContextKey = Symbol("ToggleGroupContext");
+function useToggleGroupContext(optional = false) {
+	const context = inject(toggleGroupContextKey, void 0);
+	if (context === void 0 && !optional) throw new Error("Base UI Vue: ToggleGroupContext is missing. ToggleGroup parts must be placed within <ToggleGroup>.");
+	return context;
+}
+
+//#endregion
+//#region src/toggle/Toggle.vue?vue&type=script&setup=true&lang.ts
+/**
+* A two-state button that can be on or off.
+* Renders a `<button>` element.
+*
+* Documentation: [Base UI Vue Toggle](https://baseui-vue.com/docs/components/toggle)
+*/
+var Toggle_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "Toggle",
+	inheritAttrs: false,
+	__name: "Toggle",
+	props: {
+		pressed: {
+			type: Boolean,
+			required: false
+		},
+		defaultPressed: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		value: {
+			type: null,
+			required: false
+		},
+		nativeButton: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "button"
+		},
+		class: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		style: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	emits: ["pressedChange"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const attrs = useAttrs();
+		const instance = getCurrentInstance();
+		const groupContext = useToggleGroupContext(true);
+		const generatedValue = useBaseUiId();
+		const toggleValue = computed(() => props.value || generatedValue);
+		const groupValue = computed(() => groupContext?.value.value ?? []);
+		const disabled = computed(() => props.disabled || (groupContext?.disabled.value ?? false));
+		if (process.env.NODE_ENV !== "production") watchEffect(() => {
+			if (groupContext && props.value === void 0 && groupContext.isValueInitialized.value) error("A `<Toggle>` component rendered in a `<ToggleGroup>` has no explicit `value` prop.", "This will cause issues between the Toggle Group and Toggle values.", "Provide the `<Toggle>` with a `value` prop matching the `<ToggleGroup>` values prop type.");
+		});
+		const hasPressedProp = computed(() => Boolean(instance?.vnode.props && Object.prototype.hasOwnProperty.call(instance.vnode.props, "pressed")));
+		const { value: pressed, setValue: setPressedState } = useControllableState({
+			controlled: () => {
+				if (groupContext) return toggleValue.value !== void 0 && groupValue.value.includes(toggleValue.value);
+				return hasPressedProp.value ? props.pressed : void 0;
+			},
+			default: () => props.defaultPressed,
+			name: "Toggle",
+			state: "pressed"
+		});
+		function emitPressedChange(nextPressed, eventDetails) {
+			if (toggleValue.value !== void 0) groupContext?.setGroupValue(toggleValue.value, nextPressed, eventDetails);
+			emit("pressedChange", nextPressed, eventDetails);
+		}
+		const { getButtonProps, buttonRef } = useButton({
+			disabled,
+			native: () => props.nativeButton ?? true
+		});
+		const state = computed(() => ({
+			disabled: disabled.value,
+			pressed: pressed.value
+		}));
+		const buttonAttrs = computed(() => {
+			const { form: _form, type: _type, ...rest } = attrs;
+			return rest;
+		});
+		function createToggleButtonProps() {
+			return mergeProps$1(getButtonProps(mergeProps$1(buttonAttrs.value, {
+				"aria-pressed": pressed.value,
+				onClick(event) {
+					const nextPressed = !pressed.value;
+					const details = createChangeEventDetails(REASONS.none, event);
+					emitPressedChange(nextPressed, details);
+					if (details.isCanceled) return;
+					setPressedState(nextPressed);
+				}
+			})), groupContext ? { "aria-disabled": disabled.value ? "true" : "false" } : void 0);
+		}
+		const { tag, mergedProps, renderless, ref: renderRef } = useRenderElement({
+			componentProps: props,
+			state,
+			props: computed(() => createToggleButtonProps()),
+			defaultTagName: "button",
+			ref: buttonRef
+		});
+		const itemRefs = [buttonRef];
+		return (_ctx, _cache) => {
+			return unref(groupContext) ? (openBlock(), createBlock(CompositeItem_default, {
+				key: 0,
+				as: __props.as,
+				class: normalizeClass(props.class),
+				style: normalizeStyle(props.style),
+				state: state.value,
+				refs: itemRefs,
+				props: [() => createToggleButtonProps()]
+			}, {
+				default: withCtx((slotProps) => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps)))]),
+				_: 3
+			}, 8, [
+				"as",
+				"class",
+				"style",
+				"state",
+				"props"
+			])) : unref(renderless) ? renderSlot(_ctx.$slots, "default", {
+				key: 1,
+				ref: unref(renderRef),
+				props: unref(mergedProps),
+				state: state.value
+			}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), mergeProps({
+				key: 2,
+				ref: unref(renderRef)
+			}, unref(mergedProps)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", { state: state.value })]),
+				_: 3
+			}, 16));
+		};
+	}
+});
+
+//#endregion
+//#region src/toggle/Toggle.vue
+var Toggle_default = Toggle_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/toggle/ToggleDataAttributes.ts
+let ToggleDataAttributes = /* @__PURE__ */ function(ToggleDataAttributes) {
+	/**
+	* Present when the toggle button is pressed.
+	*/
+	ToggleDataAttributes["pressed"] = "data-pressed";
+	return ToggleDataAttributes;
+}({});
+
+//#endregion
+//#region src/composite/root/useCompositeRoot.ts
+const EMPTY_ARRAY = [];
+function useCompositeRoot(params) {
+	const orientation = computed(() => params.orientation?.() ?? "both");
+	const cols = computed(() => params.cols?.() ?? 1);
+	const loopFocus = computed(() => params.loopFocus?.() ?? true);
+	const dense = computed(() => params.dense?.() ?? false);
+	const itemSizes = computed(() => params.itemSizes?.());
+	const enableHomeAndEndKeys = computed(() => params.enableHomeAndEndKeys?.() ?? false);
+	const stopEventPropagation = computed(() => params.stopEventPropagation?.() ?? false);
+	const disabledIndices = computed(() => params.disabledIndices?.() ?? EMPTY_ARRAY);
+	const modifierKeys = computed(() => params.modifierKeys?.() ?? EMPTY_ARRAY);
+	const externalHighlightedIndex = computed(() => params.highlightedIndex?.());
+	const externalSetHighlightedIndex = params.onHighlightedIndexChange;
+	const internalHighlightedIndex = ref(params.defaultHighlightedIndex?.() ?? 0);
+	const isGrid = computed(() => cols.value > 1);
+	const rootRef = ref(null);
+	const mergedRef = useMergedRefs(rootRef, params.rootRef);
+	const elementsRef = ref([]);
+	let hasSetDefaultIndex = false;
+	const highlightedIndex = computed(() => externalHighlightedIndex.value ?? internalHighlightedIndex.value);
+	function onHighlightedIndexChange(index, shouldScrollIntoView = false) {
+		if (externalHighlightedIndex.value !== void 0) {
+			if (externalSetHighlightedIndex) externalSetHighlightedIndex(index);
+		} else {
+			internalHighlightedIndex.value = index;
+			if (externalSetHighlightedIndex) externalSetHighlightedIndex(index);
+		}
+		if (shouldScrollIntoView) {
+			const newActiveItem = elementsRef.value[index];
+			scrollIntoViewIfNeeded(rootRef.value, newActiveItem, params.direction(), orientation.value);
+		}
+	}
+	function onMapChange(map) {
+		if (map.size === 0 || hasSetDefaultIndex) return;
+		hasSetDefaultIndex = true;
+		const sortedElements = Array.from(map.keys());
+		const activeItem = sortedElements.find((compositeElement) => compositeElement?.hasAttribute(ACTIVE_COMPOSITE_ITEM)) ?? null;
+		const activeIndex = activeItem ? sortedElements.indexOf(activeItem) : -1;
+		if (activeIndex !== -1) onHighlightedIndexChange(activeIndex);
+		scrollIntoViewIfNeeded(rootRef.value, activeItem, params.direction(), orientation.value);
+	}
+	function handleFocus(event) {
+		if (!rootRef.value || !isNativeInput(event.target)) return;
+		const target = event.target;
+		target.setSelectionRange(0, target.value.length ?? 0);
+	}
+	function handleKeydown(event) {
+		const RELEVANT_KEYS = enableHomeAndEndKeys.value ? ALL_KEYS : ARROW_KEYS;
+		if (!RELEVANT_KEYS.has(event.key)) return;
+		if (isModifierKeySet(event, modifierKeys.value)) return;
+		if (!rootRef.value) return;
+		const isRtl = params.direction() === "rtl";
+		const horizontalForwardKey = isRtl ? ARROW_LEFT$1 : ARROW_RIGHT$1;
+		const forwardKey = {
+			horizontal: horizontalForwardKey,
+			vertical: ARROW_DOWN$1,
+			both: horizontalForwardKey
+		}[orientation.value];
+		const horizontalBackwardKey = isRtl ? ARROW_RIGHT$1 : ARROW_LEFT$1;
+		const backwardKey = {
+			horizontal: horizontalBackwardKey,
+			vertical: ARROW_UP$1,
+			both: horizontalBackwardKey
+		}[orientation.value];
+		if (isNativeInput(event.target) && !isElementDisabled(event.target)) {
+			const target = event.target;
+			const selectionStart = target.selectionStart;
+			const selectionEnd = target.selectionEnd;
+			const textContent = target.value ?? "";
+			if (selectionStart == null || event.shiftKey || selectionStart !== selectionEnd) return;
+			if (event.key !== backwardKey && selectionStart < textContent.length) return;
+			if (event.key !== forwardKey && selectionStart > 0) return;
+		}
+		let nextIndex = highlightedIndex.value;
+		const minIndex = getMinListIndex(elementsRef, disabledIndices.value);
+		const maxIndex = getMaxListIndex(elementsRef, disabledIndices.value);
+		if (isGrid.value) {
+			const sizes = itemSizes.value || Array.from({ length: elementsRef.value.length }, () => ({
+				width: 1,
+				height: 1
+			}));
+			const cellMap = createGridCellMap(sizes, cols.value, dense.value);
+			const minGridIndex = cellMap.findIndex((index) => index != null && !isListIndexDisabled(elementsRef, index, disabledIndices.value));
+			const maxGridIndex = cellMap.reduce((foundIndex, index, cellIndex) => index != null && !isListIndexDisabled(elementsRef, index, disabledIndices.value) ? cellIndex : foundIndex, -1);
+			nextIndex = cellMap[getGridNavigatedIndex(elementsRef, {
+				event,
+				orientation: orientation.value,
+				loopFocus: loopFocus.value,
+				cols: cols.value,
+				disabledIndices: getGridCellIndices([...(disabledIndices.value.length > 0 ? disabledIndices.value : void 0) || elementsRef.value.map((_, index) => isListIndexDisabled(elementsRef, index) ? index : void 0), void 0], cellMap),
+				minIndex: minGridIndex,
+				maxIndex: maxGridIndex,
+				prevIndex: getGridCellIndexOfCorner(highlightedIndex.value > maxIndex ? minIndex : highlightedIndex.value, sizes, cellMap, cols.value, event.key === ARROW_DOWN$1 ? "bl" : event.key === ARROW_RIGHT$1 ? "tr" : "tl"),
+				rtl: isRtl
+			})];
+		}
+		const forwardKeys = {
+			horizontal: [horizontalForwardKey],
+			vertical: [ARROW_DOWN$1],
+			both: [horizontalForwardKey, ARROW_DOWN$1]
+		}[orientation.value];
+		const backwardKeys = {
+			horizontal: [horizontalBackwardKey],
+			vertical: [ARROW_UP$1],
+			both: [horizontalBackwardKey, ARROW_UP$1]
+		}[orientation.value];
+		const preventedKeys = isGrid.value ? RELEVANT_KEYS : {
+			horizontal: enableHomeAndEndKeys.value ? HORIZONTAL_KEYS_WITH_EXTRA_KEYS : HORIZONTAL_KEYS,
+			vertical: enableHomeAndEndKeys.value ? VERTICAL_KEYS_WITH_EXTRA_KEYS : VERTICAL_KEYS,
+			both: RELEVANT_KEYS
+		}[orientation.value];
+		if (enableHomeAndEndKeys.value) {
+			if (event.key === HOME) nextIndex = minIndex;
+			else if (event.key === END) nextIndex = maxIndex;
+		}
+		if (nextIndex === highlightedIndex.value && (forwardKeys.includes(event.key) || backwardKeys.includes(event.key))) if (loopFocus.value && nextIndex === maxIndex && forwardKeys.includes(event.key)) nextIndex = minIndex;
+		else if (loopFocus.value && nextIndex === minIndex && backwardKeys.includes(event.key)) nextIndex = maxIndex;
+		else nextIndex = findNonDisabledListIndex(elementsRef, {
+			startingIndex: nextIndex,
+			decrement: backwardKeys.includes(event.key),
+			disabledIndices: disabledIndices.value
+		});
+		if (nextIndex !== highlightedIndex.value && !isIndexOutOfListBounds(elementsRef, nextIndex)) {
+			if (stopEventPropagation.value) event.stopPropagation();
+			if (preventedKeys.has(event.key)) event.preventDefault();
+			onHighlightedIndexChange(nextIndex, true);
+			queueMicrotask(() => {
+				elementsRef.value[nextIndex]?.focus();
+			});
+		}
+	}
+	return {
+		getRootProps: (externalProps = {}) => ({
+			...externalProps,
+			"aria-orientation": orientation.value === "both" ? void 0 : orientation.value,
+			onFocus(event) {
+				externalProps.onFocus?.(event);
+				if (!event.defaultPrevented) handleFocus(event);
+			},
+			onKeydown(event) {
+				externalProps.onKeydown?.(event);
+				if (!event.defaultPrevented) handleKeydown(event);
+			}
+		}),
+		rootRef,
+		mergedRef,
+		highlightedIndex,
+		onHighlightedIndexChange,
+		elementsRef,
+		disabledIndices,
+		onMapChange,
+		relayKeyboardEvent: handleKeydown
+	};
+}
+function isModifierKeySet(event, ignoredModifierKeys) {
+	for (const key of MODIFIER_KEYS.values()) {
+		if (ignoredModifierKeys.includes(key)) continue;
+		if (event.getModifierState(key)) return true;
+	}
+	return false;
+}
+
+//#endregion
+//#region src/composite/root/CompositeRoot.vue?vue&type=script&setup=true&lang.ts
+var CompositeRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "BaseUICompositeRoot",
+	inheritAttrs: false,
+	__name: "CompositeRoot",
+	props: {
+		state: {
+			type: Object,
+			required: false
+		},
+		stateAttributesMapping: {
+			type: null,
+			required: false
+		},
+		orientation: {
+			type: String,
+			required: false,
+			default: "both"
+		},
+		cols: {
+			type: Number,
+			required: false,
+			default: 1
+		},
+		loopFocus: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		highlightedIndex: {
+			type: Number,
+			required: false
+		},
+		defaultHighlightedIndex: {
+			type: Number,
+			required: false
+		},
+		itemSizes: {
+			type: Array,
+			required: false
+		},
+		dense: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		enableHomeAndEndKeys: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		stopEventPropagation: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		disabledIndices: {
+			type: Array,
+			required: false
+		},
+		modifierKeys: {
+			type: Array,
+			required: false
+		},
+		highlightItemOnHover: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "div"
+		},
+		class: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		style: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	emits: ["update:highlightedIndex", "mapChange"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const attrs = useAttrs();
+		const direction = useDirection();
+		const root = useCompositeRoot({
+			orientation: () => props.orientation,
+			cols: () => props.cols,
+			loopFocus: () => props.loopFocus,
+			highlightedIndex: () => props.highlightedIndex,
+			defaultHighlightedIndex: () => props.defaultHighlightedIndex,
+			onHighlightedIndexChange: (index) => {
+				emit("update:highlightedIndex", index);
+			},
+			dense: () => props.dense,
+			itemSizes: () => props.itemSizes,
+			enableHomeAndEndKeys: () => props.enableHomeAndEndKeys,
+			stopEventPropagation: () => props.stopEventPropagation,
+			disabledIndices: () => props.disabledIndices,
+			modifierKeys: () => props.modifierKeys,
+			direction: () => direction.value
+		});
+		provide(compositeRootContextKey, reactive({
+			highlightedIndex: root.highlightedIndex,
+			onHighlightedIndexChange: root.onHighlightedIndexChange,
+			highlightItemOnHover: computed(() => props.highlightItemOnHover),
+			relayKeyboardEvent: root.relayKeyboardEvent
+		}));
+		const state = computed(() => props.state ?? {});
+		const { tag, mergedProps, renderless, ref: renderRef } = useRenderElement({
+			componentProps: props,
+			state,
+			props: computed(() => root.getRootProps(attrs)),
+			stateAttributesMapping: props.stateAttributesMapping,
+			defaultTagName: "div",
+			ref: root.mergedRef
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(CompositeList_default, {
+				"elements-ref": unref(root).elementsRef,
+				onMapChange: _cache[0] || (_cache[0] = (newMap) => {
+					emit("mapChange", newMap);
+					unref(root).onMapChange(newMap);
+				})
+			}, {
+				default: withCtx(() => [unref(renderless) ? renderSlot(_ctx.$slots, "default", {
+					key: 0,
+					ref: unref(renderRef),
+					props: unref(mergedProps),
+					state: state.value
+				}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), mergeProps({
+					key: 1,
+					ref: unref(renderRef)
+				}, unref(mergedProps)), {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "default", { state: state.value })]),
+					_: 3
+				}, 16))]),
+				_: 3
+			}, 8, ["elements-ref"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/composite/root/CompositeRoot.vue
+var CompositeRoot_default = CompositeRoot_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/toggle-group/ToggleGroupDataAttributes.ts
+let ToggleGroupDataAttributes = /* @__PURE__ */ function(ToggleGroupDataAttributes) {
+	/**
+	* Present when the toggle group is disabled.
+	*/
+	ToggleGroupDataAttributes["disabled"] = "data-disabled";
+	/**
+	* Indicates the orientation of the toggle group.
+	* @type {'horizontal' | 'vertical'}
+	*/
+	ToggleGroupDataAttributes["orientation"] = "data-orientation";
+	/**
+	* Present when the toggle group allows multiple buttons to be in the pressed state at the same time.
+	*/
+	ToggleGroupDataAttributes["multiple"] = "data-multiple";
+	return ToggleGroupDataAttributes;
+}({});
+
+//#endregion
+//#region src/toggle-group/ToggleGroup.vue?vue&type=script&setup=true&lang.ts
+/**
+* Provides a shared state to a series of toggle buttons.
+*
+* Documentation: [Base UI Vue Toggle Group](https://baseui-vue.com/docs/components/toggle-group)
+*/
+var ToggleGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "ToggleGroup",
+	inheritAttrs: false,
+	__name: "ToggleGroup",
+	props: {
+		value: {
+			type: Array,
+			required: false
+		},
+		defaultValue: {
+			type: Array,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		orientation: {
+			type: String,
+			required: false,
+			default: "horizontal"
+		},
+		loopFocus: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		multiple: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "div"
+		},
+		class: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		style: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	emits: ["valueChange"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const attrsObject = useAttrs();
+		const toolbarContext = useToolbarRootContext(true);
+		const disabled = computed(() => (toolbarContext?.disabled.value ?? false) || props.disabled);
+		const isValueInitialized = computed(() => props.value !== void 0 || props.defaultValue !== void 0);
+		const { value: groupValue, setValue: setValueState } = useControllableState({
+			controlled: () => props.value,
+			default: () => props.value === void 0 ? props.defaultValue ?? [] : [],
+			name: "ToggleGroup"
+		});
+		function setGroupValue(newValue, nextPressed, eventDetails) {
+			let newGroupValue;
+			if (props.multiple) {
+				newGroupValue = groupValue.value.slice();
+				if (nextPressed) newGroupValue.push(newValue);
+				else {
+					const valueIndex = groupValue.value.indexOf(newValue);
+					if (valueIndex >= 0) newGroupValue.splice(valueIndex, 1);
+				}
+			} else newGroupValue = nextPressed ? [newValue] : [];
+			emit("valueChange", newGroupValue, eventDetails);
+			if (eventDetails.isCanceled) return;
+			setValueState(newGroupValue);
+		}
+		provide(toggleGroupContextKey, {
+			disabled,
+			orientation: computed(() => props.orientation),
+			setGroupValue,
+			value: groupValue,
+			isValueInitialized
+		});
+		const state = computed(() => ({
+			disabled: disabled.value,
+			multiple: props.multiple,
+			orientation: props.orientation
+		}));
+		const stateAttributesMapping = { multiple(value) {
+			if (value) return { [ToggleGroupDataAttributes.multiple]: "" };
+			return null;
+		} };
+		const forwardedAttrs = computed(() => {
+			const { class: _class, style: _style, ...rest } = attrsObject;
+			return rest;
+		});
+		const { tag, mergedProps, renderless, ref: renderRef } = useRenderElement({
+			componentProps: props,
+			state,
+			props: computed(() => ({
+				"role": "group",
+				...forwardedAttrs.value,
+				"aria-orientation": props.orientation
+			})),
+			stateAttributesMapping,
+			defaultTagName: "div"
+		});
+		return (_ctx, _cache) => {
+			return unref(toolbarContext) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [unref(renderless) ? renderSlot(_ctx.$slots, "default", {
+				key: 0,
+				ref: unref(renderRef),
+				props: unref(mergedProps),
+				state: state.value
+			}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), mergeProps({
+				key: 1,
+				ref: unref(renderRef)
+			}, unref(mergedProps)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", { state: state.value })]),
+				_: 3
+			}, 16))], 64)) : (openBlock(), createBlock(CompositeRoot_default, mergeProps({
+				key: 1,
+				as: __props.as,
+				class: props.class,
+				style: props.style,
+				orientation: props.orientation,
+				state: state.value,
+				"state-attributes-mapping": stateAttributesMapping,
+				"loop-focus": props.loopFocus,
+				"enable-home-and-end-keys": true,
+				role: "group"
+			}, forwardedAttrs.value), createSlots({ _: 2 }, [unref(renderless) ? {
+				name: "default",
+				fn: withCtx(({ ref, props: compositeProps, state: compositeState }) => [renderSlot(_ctx.$slots, "default", {
+					ref,
+					props: compositeProps,
+					state: compositeState
+				})]),
+				key: "0"
+			} : {
+				name: "default",
+				fn: withCtx(({ state: compositeState }) => [renderSlot(_ctx.$slots, "default", { state: compositeState })]),
+				key: "1"
+			}]), 1040, [
+				"as",
+				"class",
+				"style",
+				"orientation",
+				"state",
+				"loop-focus"
+			]));
+		};
+	}
+});
+
+//#endregion
+//#region src/toggle-group/ToggleGroup.vue
+var ToggleGroup_default = ToggleGroup_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/toolbar/input/ToolbarInput.vue?vue&type=script&setup=true&lang.ts
+/**
+* A native input element that integrates with Toolbar keyboard navigation.
+* Renders an `<input>` element.
+*
+* Documentation: [Base UI Vue Toolbar](https://baseui-vue.com/docs/components/toolbar)
+*/
+var ToolbarInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "ToolbarInput",
+	inheritAttrs: false,
+	__name: "ToolbarInput",
+	props: {
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		focusableWhenDisabled: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		defaultValue: {
+			type: [String, Number],
+			required: false
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "input"
+		},
+		class: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		style: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const attrs = useAttrs();
+		const toolbarRootContext = useToolbarRootContext();
+		const toolbarGroupContext = useToolbarGroupContext(true);
+		const disabled = computed(() => toolbarRootContext.disabled.value || (toolbarGroupContext?.disabled.value ?? false) || props.disabled);
+		const { props: focusableWhenDisabledProps } = useFocusableWhenDisabled({
+			composite: true,
+			disabled,
+			focusableWhenDisabled: () => props.focusableWhenDisabled,
+			isNativeButton: false
+		});
+		const state = computed(() => ({
+			disabled: disabled.value,
+			orientation: toolbarRootContext.orientation.value,
+			focusable: props.focusableWhenDisabled
+		}));
+		const allowedKeysWhenDisabled = computed(() => toolbarRootContext.orientation.value === "vertical" ? new Set([ARROW_UP$1, ARROW_DOWN$1]) : new Set([ARROW_LEFT$1, ARROW_RIGHT$1]));
+		const defaultProps = computed(() => ({
+			onClick(event) {
+				if (disabled.value) event.preventDefault();
+			},
+			onKeydown(event) {
+				if (disabled.value && !allowedKeysWhenDisabled.value.has(event.key)) stopEvent(event);
+			},
+			onPointerdown(event) {
+				if (disabled.value) event.preventDefault();
+			}
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(CompositeItem_default, {
+				as: __props.as,
+				class: normalizeClass(props.class),
+				style: normalizeStyle(props.style),
+				metadata: { focusableWhenDisabled: __props.focusableWhenDisabled },
+				state: state.value,
+				props: [
+					defaultProps.value,
+					unref(attrs),
+					() => unref(focusableWhenDisabledProps)
+				]
+			}, null, 8, [
+				"as",
+				"class",
+				"style",
+				"metadata",
+				"state",
+				"props"
+			]);
+		};
+	}
+});
+
+//#endregion
+//#region src/toolbar/input/ToolbarInput.vue
+var ToolbarInput_default = ToolbarInput_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/toolbar/input/ToolbarInputDataAttributes.ts
+let ToolbarInputDataAttributes = /* @__PURE__ */ function(ToolbarInputDataAttributes) {
+	/**
+	* Present when the input is disabled.
+	*/
+	ToolbarInputDataAttributes["disabled"] = "data-disabled";
+	/**
+	* Indicates the orientation of the toolbar.
+	* @type {'horizontal' | 'vertical'}
+	*/
+	ToolbarInputDataAttributes["orientation"] = "data-orientation";
+	/**
+	* Present when the input remains focusable when disabled.
+	*/
+	ToolbarInputDataAttributes["focusable"] = "data-focusable";
+	return ToolbarInputDataAttributes;
+}({});
+
+//#endregion
+//#region src/toolbar/link/ToolbarLink.vue?vue&type=script&setup=true&lang.ts
+var ToolbarLink_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "ToolbarLink",
+	inheritAttrs: false,
+	__name: "ToolbarLink",
+	props: {
+		as: {
+			type: null,
+			required: false,
+			default: "a"
+		},
+		class: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		style: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const TOOLBAR_LINK_METADATA = { focusableWhenDisabled: true };
+		const attrs = useAttrs();
+		const toolbarRootContext = useToolbarRootContext();
+		const state = computed(() => ({ orientation: toolbarRootContext.orientation.value }));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(CompositeItem_default, {
+				as: __props.as,
+				class: normalizeClass(props.class),
+				style: normalizeStyle(props.style),
+				metadata: TOOLBAR_LINK_METADATA,
+				state: state.value,
+				props: [unref(attrs)]
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", { state: state.value })]),
+				_: 3
+			}, 8, [
+				"as",
+				"class",
+				"style",
+				"state",
+				"props"
+			]);
+		};
+	}
+});
+
+//#endregion
+//#region src/toolbar/link/ToolbarLink.vue
+var ToolbarLink_default = ToolbarLink_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/toolbar/link/ToolbarLinkDataAttributes.ts
+let ToolbarLinkDataAttributes = /* @__PURE__ */ function(ToolbarLinkDataAttributes) {
+	/**
+	* Indicates the orientation of the toolbar.
+	* @type {'horizontal' | 'vertical'}
+	*/
+	ToolbarLinkDataAttributes["orientation"] = "data-orientation";
+	return ToolbarLinkDataAttributes;
+}({});
+
+//#endregion
+//#region src/toolbar/root/ToolbarRoot.vue?vue&type=script&setup=true&lang.ts
+/**
+* A container for grouping a set of controls, such as buttons, toggle groups, or menus.
+* Renders a `<div>` element.
+*
+* Documentation: [Base UI Vue Toolbar](https://baseui-vue.com/docs/components/toolbar)
+*/
+var ToolbarRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "ToolbarRoot",
+	inheritAttrs: false,
+	__name: "ToolbarRoot",
+	props: {
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		orientation: {
+			type: String,
+			required: false,
+			default: "horizontal"
+		},
+		loopFocus: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "div"
+		},
+		class: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		style: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const attrs = useAttrs();
+		const direction = useDirection();
+		const itemMap = ref(/* @__PURE__ */ new Map());
+		const disabledIndices = computed(() => {
+			const output = [];
+			itemMap.value.forEach((itemMetadata, element) => {
+				if (itemMetadata?.index != null && !itemMetadata.focusableWhenDisabled && isElementDisabled(element)) output.push(itemMetadata.index);
+			});
+			return output;
+		});
+		const state = computed(() => ({
+			disabled: props.disabled,
+			orientation: props.orientation
+		}));
+		const root = useCompositeRoot({
+			orientation: () => props.orientation,
+			loopFocus: () => props.loopFocus,
+			direction: () => direction.value,
+			disabledIndices: () => disabledIndices.value
+		});
+		provide(toolbarRootContextKey, {
+			disabled: computed(() => props.disabled),
+			orientation: computed(() => props.orientation)
+		});
+		provide(compositeRootContextKey, reactive({
+			highlightedIndex: root.highlightedIndex,
+			onHighlightedIndexChange: root.onHighlightedIndexChange,
+			highlightItemOnHover: computed(() => false),
+			relayKeyboardEvent: root.relayKeyboardEvent
+		}));
+		const { tag, mergedProps, renderless, ref: renderRef } = useRenderElement({
+			componentProps: props,
+			state,
+			props: computed(() => ({
+				...root.getRootProps(attrs),
+				"role": "toolbar",
+				"aria-orientation": props.orientation
+			})),
+			defaultTagName: "div",
+			ref: root.mergedRef
+		});
+		function handleMapChange(newMap) {
+			const typedMap = newMap;
+			itemMap.value = typedMap;
+			root.onMapChange(typedMap);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(CompositeList_default, {
+				"elements-ref": unref(root).elementsRef,
+				onMapChange: handleMapChange
+			}, {
+				default: withCtx(() => [unref(renderless) ? renderSlot(_ctx.$slots, "default", {
+					key: 0,
+					ref: unref(renderRef),
+					props: unref(mergedProps),
+					state: state.value
+				}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), mergeProps({
+					key: 1,
+					ref: unref(renderRef)
+				}, unref(mergedProps)), {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "default", { state: state.value })]),
+					_: 3
+				}, 16))]),
+				_: 3
+			}, 8, ["elements-ref"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/toolbar/root/ToolbarRoot.vue
+var ToolbarRoot_default = ToolbarRoot_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/toolbar/root/ToolbarRootDataAttributes.ts
+let ToolbarRootDataAttributes = /* @__PURE__ */ function(ToolbarRootDataAttributes) {
+	/**
+	* Present when the toolbar is disabled.
+	*/
+	ToolbarRootDataAttributes["disabled"] = "data-disabled";
+	/**
+	* Indicates the orientation of the toolbar.
+	* @type {'horizontal' | 'vertical'}
+	*/
+	ToolbarRootDataAttributes["orientation"] = "data-orientation";
+	return ToolbarRootDataAttributes;
+}({});
+
+//#endregion
+//#region src/toolbar/separator/ToolbarSeparator.vue?vue&type=script&setup=true&lang.ts
+/**
+* A separator element accessible to screen readers.
+* Renders a `<div>` element.
+*
+* Documentation: [Base UI Vue Toolbar](https://baseui-vue.com/docs/components/toolbar)
+*/
+var ToolbarSeparator_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "ToolbarSeparator",
+	inheritAttrs: false,
+	__name: "ToolbarSeparator",
+	props: {
+		orientation: {
+			type: String,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false
+		},
+		class: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		style: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const attrs = useAttrs();
+		const toolbarRootContext = useToolbarRootContext();
+		const orientation = computed(() => props.orientation ?? (toolbarRootContext.orientation.value === "vertical" ? "horizontal" : "vertical"));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(Separator_default, mergeProps({
+				as: props.as,
+				class: props.class,
+				style: props.style,
+				orientation: orientation.value
+			}, unref(attrs)), {
+				default: withCtx((slotProps) => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps)))]),
+				_: 3
+			}, 16, [
+				"as",
+				"class",
+				"style",
+				"orientation"
+			]);
+		};
+	}
+});
+
+//#endregion
+//#region src/toolbar/separator/ToolbarSeparator.vue
+var ToolbarSeparator_default = ToolbarSeparator_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/toolbar/separator/ToolbarSeparatorDataAttributes.ts
+let ToolbarSeparatorDataAttributes = /* @__PURE__ */ function(ToolbarSeparatorDataAttributes) {
+	/**
+	* Indicates the orientation of the toolbar.
+	* @type {'horizontal' | 'vertical'}
+	*/
+	ToolbarSeparatorDataAttributes["orientation"] = "data-orientation";
+	return ToolbarSeparatorDataAttributes;
+}({});
+
 //#endregion
 //#region src/use-render/useRender.ts
 /**
@@ -2614,5 +5709,5 @@ const name = "base-ui-vue";
 const version = "0.0.0";
 
 //#endregion
-export { AccordionItem_default, AccordionPanel_default, AccordionRoot_default, AccordionTrigger_default, AvatarRoot_default, CollapsiblePanel_default, CollapsibleRoot_default, CollapsibleTrigger_default, FieldItem_default, FieldLabel_default, FieldRoot_default, FieldValidity_default, FieldsetLegend_default, FieldsetRoot_default, accordionRootContextKey, collapsibleRootContextKey, fieldItemContextKey, fieldsetRootContextKey, name, useAccordionRootContext, useCollapsibleRootContext, useFieldItemContext, useFieldsetRootContext, useRender, version };
+export { AccordionItem_default, AccordionPanel_default, AccordionRoot_default, AccordionTrigger_default, AvatarRoot_default, CollapsiblePanel_default, CollapsibleRoot_default, CollapsibleTrigger_default, FieldItem_default, FieldLabel_default, FieldRoot_default, FieldValidity_default, FieldsetLegend_default, FieldsetRoot_default, SeparatorDataAttributes, Separator_default, SliderIndicatorDataAttributes, SliderIndicator_default, SliderLabel_default, SliderRootDataAttributes, SliderRoot_default, SliderThumbDataAttributes, SliderThumb_default, SliderTrackDataAttributes, SliderTrack_default, SliderValueDataAttributes, SliderValue_default, SwitchRootDataAttributes, SwitchRoot_default, SwitchThumbDataAttributes, SwitchThumb_default, ToggleDataAttributes, ToggleGroupDataAttributes, ToggleGroup_default, Toggle_default, ToolbarInputDataAttributes, ToolbarInput_default, ToolbarLinkDataAttributes, ToolbarLink_default, ToolbarRootDataAttributes, ToolbarRoot_default, ToolbarSeparatorDataAttributes, ToolbarSeparator_default, accordionRootContextKey, collapsibleRootContextKey, fieldsetRootContextKey, name, switchRootContextKey, toggleGroupContextKey, useAccordionRootContext, useCollapsibleRootContext, useFieldsetRootContext, useRender, useSwitchRootContext, useToggleGroupContext, version };
 //# sourceMappingURL=index2.js.map