base-ui-vue 0.1.0 → 0.2.0

package/dist/index2.cjs

@@ -1,11 +1,17 @@
 const require_button_Button = require('./button/Button.cjs');
 const require_header_AccordionHeader = require('./header/AccordionHeader.cjs');
-const require_error_FieldError = require('./error/FieldError.cjs');
-const require_control_FieldControl = require('./control/FieldControl.cjs');
-const require_direction_provider_DirectionContext = require('./direction-provider/DirectionContext.cjs');
+const require_checkbox_index = require('./checkbox/index.cjs');
+const require_checkbox_group_CheckboxGroup = require('./checkbox-group/CheckboxGroup.cjs');
+const require_button_ToolbarButton = require('./button/ToolbarButton.cjs');
+const require_control_SliderControl = require('./control/SliderControl.cjs');
 const require_composite_composite = require('./composite/composite.cjs');
 const require_fallback_AvatarFallback = require('./fallback/AvatarFallback.cjs');
+const require_csp_provider_CSPContext = require('./csp-provider/CSPContext.cjs');
+const require_control_FieldControl = require('./control/FieldControl.cjs');
+const require_composite_constants = require('./composite/constants.cjs');
 let vue = require("vue");
+let _floating_ui_utils_dom = require("@floating-ui/utils/dom");
+let _floating_ui_utils = require("@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 ?? require_button_Button.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 = (0, vue.ref)(params.default);
-	const value = (0, vue.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) {
@@ -150,15 +29,17 @@ function useCollapsibleRoot(parameters) {
 		if (parameters.isOpenControlled) return parameters.isOpenControlled();
 		return openParam?.() !== void 0;
 	});
-	const { value: open, setValue: setOpen } = useControllableState({
+	const { value: open, setValue: setOpen } = require_checkbox_group_CheckboxGroup.useControllableState({
 		controlled: () => isControlled.value ? openParam?.() : void 0,
-		default: defaultOpen
+		default: () => defaultOpen,
+		name: "CollapsibleRoot",
+		state: "open"
 	});
-	const { mounted, setMounted, transitionStatus } = require_error_FieldError.useTransitionStatus(open, true, true);
+	const { mounted, setMounted, transitionStatus } = require_checkbox_index.useTransitionStatus(open, true, true);
 	const visible = (0, vue.ref)(open.value);
 	const height = (0, vue.ref)(void 0);
 	const width = (0, vue.ref)(void 0);
-	const defaultPanelId = require_control_FieldControl.useBaseUiId();
+	const defaultPanelId = require_checkbox_group_CheckboxGroup.useBaseUiId();
 	const panelIdState = (0, vue.ref)(void 0);
 	const panelId = (0, vue.computed)(() => panelIdState.value ?? defaultPanelId);
 	const hiddenUntilFound = (0, vue.ref)(false);
@@ -167,12 +48,12 @@ function useCollapsibleRoot(parameters) {
 	const animationTypeRef = (0, vue.ref)(null);
 	const transitionDimensionRef = (0, vue.ref)(null);
 	const panelRef = (0, vue.ref)(null);
-	const runOnceAnimationsFinish = require_error_FieldError.useAnimationsFinished(panelRef, false);
+	const runOnceAnimationsFinish = require_checkbox_index.useAnimationsFinished(panelRef, false);
 	const disabled = (0, vue.computed)(() => disabledGetter());
 	function handleTrigger(event) {
 		if (disabled.value) return;
 		const nextOpen = !open.value;
-		const eventDetails = createChangeEventDetails(REASONS.triggerPress, event);
+		const eventDetails = require_checkbox_index.createChangeEventDetails(require_checkbox_index.REASONS.triggerPress, event);
 		onOpenChange(nextOpen, eventDetails);
 		if (eventDetails.isCanceled) return;
 		const panel = panelRef.value;
@@ -237,83 +118,6 @@ function useCollapsibleRoot(parameters) {
 	};
 }
 
-//#endregion
-//#region src/composite/list/CompositeListContext.ts
-const compositeListContextKey = Symbol("CompositeListContext");
-function useCompositeListContext() {
-	return (0, vue.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 = (0, vue.computed)(() => params.index?.());
-	const label = (0, vue.computed)(() => params.label?.());
-	const metadata = (0, vue.computed)(() => params.metadata?.());
-	const textRef = (0, vue.computed)(() => params.textRef?.());
-	const indexGuessBehavior = (0, vue.computed)(() => params.indexGuessBehavior?.());
-	const { register, unregister, subscribeMapChange, elementsRef, labelsRef, nextIndexRef } = useCompositeListContext();
-	const indexRef = (0, vue.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 = (0, vue.ref)(initializeIndex());
-	const index = (0, vue.computed)(() => externalIndex.value ?? internalIndex.value);
-	const componentRef = (0, vue.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;
-			}
-		}
-	}
-	(0, vue.watchEffect)((onCleanup) => {
-		if (externalIndex.value != null) return;
-		const node = componentRef.value;
-		if (node) {
-			register(node, metadata.value);
-			onCleanup(() => {
-				unregister(node);
-			});
-		}
-	}, { flush: "post" });
-	(0, vue.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");
@@ -368,8 +172,8 @@ var AccordionItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		const emit = __emit;
 		const attrs = (0, vue.useAttrs)();
 		const rootCtx = useAccordionRootContext();
-		const { ref: listItemRef, index } = useCompositeListItem();
-		const fallbackValue = require_control_FieldControl.useBaseUiId();
+		const { ref: listItemRef, index } = require_button_ToolbarButton.useCompositeListItem();
+		const fallbackValue = require_checkbox_group_CheckboxGroup.useBaseUiId();
 		const itemValue = (0, vue.computed)(() => props.value ?? fallbackValue);
 		const disabled = (0, vue.computed)(() => props.disabled || rootCtx.disabled.value);
 		const isOpen = (0, vue.computed)(() => {
@@ -401,7 +205,7 @@ var AccordionItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 			disabled: disabled.value,
 			open: isOpen.value
 		}));
-		const triggerId = (0, vue.ref)(require_control_FieldControl.useBaseUiId());
+		const triggerId = (0, vue.ref)(require_checkbox_group_CheckboxGroup.useBaseUiId());
 		function setTriggerId(id) {
 			triggerId.value = id;
 		}
@@ -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;
@@ -468,7 +286,7 @@ function useCollapsiblePanel(parameters) {
 	const latestAnimationNameRef = (0, vue.ref)(null);
 	const shouldCancelInitialOpenAnimationRef = (0, vue.ref)(open.value);
 	const shouldCancelInitialOpenTransitionRef = (0, vue.ref)(open.value);
-	const endingStyleFrame = require_error_FieldError.useAnimationFrame();
+	const endingStyleFrame = require_checkbox_index.useAnimationFrame();
 	/**
 	* When opening, the `hidden` attribute is removed immediately.
 	* When closing, the `hidden` attribute is set after any exit animations runs.
@@ -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;
@@ -514,9 +332,9 @@ function useCollapsiblePanel(parameters) {
 		}
 		let frame = -1;
 		let nextFrame = -1;
-		frame = require_error_FieldError.AnimationFrame.request(() => {
+		frame = require_checkbox_index.AnimationFrame.request(() => {
 			shouldCancelInitialOpenTransitionRef.value = false;
-			nextFrame = require_error_FieldError.AnimationFrame.request(() => {
+			nextFrame = require_checkbox_index.AnimationFrame.request(() => {
 				/**
 				* This is slightly faster than another RAF and is the earliest
 				* opportunity to remove the temporary `transition-duration: 0s` that
@@ -529,8 +347,8 @@ function useCollapsiblePanel(parameters) {
 			});
 		});
 		return () => {
-			require_error_FieldError.AnimationFrame.cancel(frame);
-			require_error_FieldError.AnimationFrame.cancel(nextFrame);
+			require_checkbox_index.AnimationFrame.cancel(frame);
+			require_checkbox_index.AnimationFrame.cancel(nextFrame);
 		};
 	}
 	const mergedRef = require_button_Button.useMergedRefs(externalRef ?? null, panelRef, handlePanelRef);
@@ -564,14 +382,14 @@ function useCollapsiblePanel(parameters) {
 				height: panel.scrollHeight,
 				width: panel.scrollWidth
 			});
-			const resizeFrame = require_error_FieldError.AnimationFrame.request(() => {
+			const resizeFrame = require_checkbox_index.AnimationFrame.request(() => {
 				Object.entries(originalLayoutStyles).forEach(([key, value]) => {
 					if (value === "") panel.style.removeProperty(key);
 					else panel.style.setProperty(key, value);
 				});
 			});
 			return () => {
-				require_error_FieldError.AnimationFrame.cancel(resizeFrame);
+				require_checkbox_index.AnimationFrame.cancel(resizeFrame);
 			};
 		} else {
 			if (panel.scrollHeight === 0 && panel.scrollWidth === 0) return;
@@ -641,10 +459,10 @@ function useCollapsiblePanel(parameters) {
 		}
 	}, { flush: "post" });
 	(0, vue.onMounted)(() => {
-		const frame = require_error_FieldError.AnimationFrame.request(() => {
+		const frame = require_checkbox_index.AnimationFrame.request(() => {
 			shouldCancelInitialOpenAnimationRef.value = false;
 		});
-		return () => require_error_FieldError.AnimationFrame.cancel(frame);
+		return () => require_checkbox_index.AnimationFrame.cancel(frame);
 	});
 	(0, vue.watch)([open, () => hiddenUntilFound], ([isOpen]) => {
 		if (!hiddenUntilFound) return;
@@ -657,17 +475,17 @@ function useCollapsiblePanel(parameters) {
 				width: panel.scrollWidth
 			});
 			let nextFrame = -1;
-			const frame = require_error_FieldError.AnimationFrame.request(() => {
+			const frame = require_checkbox_index.AnimationFrame.request(() => {
 				isBeforeMatchRef.value = false;
-				nextFrame = require_error_FieldError.AnimationFrame.request(() => {
+				nextFrame = require_checkbox_index.AnimationFrame.request(() => {
 					setTimeout(() => {
 						panel.style.removeProperty("transition-duration");
 					});
 				});
 			});
 			return () => {
-				require_error_FieldError.AnimationFrame.cancel(frame);
-				require_error_FieldError.AnimationFrame.cancel(nextFrame);
+				require_checkbox_index.AnimationFrame.cancel(frame);
+				require_checkbox_index.AnimationFrame.cancel(nextFrame);
 			};
 		}
 	}, { flush: "sync" });
@@ -694,7 +512,7 @@ function useCollapsiblePanel(parameters) {
 		function handleBeforeMatch(event) {
 			isBeforeMatchRef.value = true;
 			setOpen(true);
-			onOpenChange(true, createChangeEventDetails(REASONS.none, event));
+			onOpenChange(true, require_checkbox_index.createChangeEventDetails(require_checkbox_index.REASONS.none, event));
 		}
 		panel.addEventListener("beforematch", handleBeforeMatch);
 		beforeMatchCleanup = () => {
@@ -793,7 +611,7 @@ var AccordionPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		});
 		(0, vue.watch)(hiddenUntilFound, (val) => collapsibleCtx.setHiddenUntilFound(val), { immediate: true });
 		(0, vue.watch)(keepMounted, (val) => collapsibleCtx.setKeepMounted(val), { immediate: true });
-		require_error_FieldError.useOpenChangeComplete({
+		require_checkbox_index.useOpenChangeComplete({
 			open: (0, vue.computed)(() => collapsibleCtx.open.value && collapsibleCtx.transitionStatus.value === "idle"),
 			ref: collapsibleCtx.panelRef,
 			onComplete() {
@@ -984,7 +802,7 @@ var CompositeList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 				listeners.value.delete(fn);
 			};
 		}
-		(0, vue.provide)(compositeListContextKey, {
+		(0, vue.provide)(require_button_ToolbarButton.compositeListContextKey, {
 			register,
 			unregister,
 			subscribeMapChange,
@@ -1079,7 +897,7 @@ var AccordionRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		const props = __props;
 		const emit = __emit;
 		const attrs = (0, vue.useAttrs)();
-		const direction = require_direction_provider_DirectionContext.useDirection();
+		const direction = require_control_SliderControl.useDirection();
 		const instance = (0, vue.getCurrentInstance)();
 		if (process.env.NODE_ENV !== "production") (0, vue.watchEffect)(() => {
 			if (props.hiddenUntilFound && props.keepMounted === false) warn("The `:keepMounted=\"false\"` prop on a AccordionRoot will be ignored when using `hiddenUntilFound` since it requires Panels to remain mounted when closed.");
@@ -1090,12 +908,13 @@ var AccordionRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		});
 		const _compositeRefs = { elementsRef: (0, vue.ref)([]) };
 		const accordionItemRefs = _compositeRefs.elementsRef;
-		const { value: openValues, setValue: setOpenValues } = useControllableState({
+		const { value: openValues, setValue: setOpenValues } = require_checkbox_group_CheckboxGroup.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);
+			const details = require_checkbox_index.createChangeEventDetails(require_checkbox_index.REASONS.none);
 			if (!props.multiple) {
 				const nextValue = openValues.value[0] === newValue ? [] : [newValue];
 				emit("valueChange", nextValue, details);
@@ -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 = (0, _floating_ui_utils.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 = (0, _floating_ui_utils.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) {
@@ -1410,7 +1475,7 @@ var AvatarRoot_default = AvatarRoot_vue_vue_type_script_setup_true_lang_default;
 //#region src/collapsible/root/stateAttributesMapping.ts
 const collapsibleStateAttributesMapping = {
 	...require_header_AccordionHeader.collapsibleOpenStateMapping,
-	...require_error_FieldError.transitionStatusMapping
+	...require_checkbox_index.transitionStatusMapping
 };
 
 //#endregion
@@ -1506,7 +1571,7 @@ var CollapsiblePanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 			visible: ctx.visible,
 			width: ctx.width
 		});
-		require_error_FieldError.useOpenChangeComplete({
+		require_checkbox_index.useOpenChangeComplete({
 			open: (0, vue.computed)(() => ctx.open.value && ctx.transitionStatus.value === "idle"),
 			ref: ctx.panelRef,
 			onComplete() {
@@ -1698,7 +1763,7 @@ var CollapsibleTrigger_vue_vue_type_script_setup_true_lang_default = /* @__PURE_
 		const props = __props;
 		const triggerStateAttributesMapping = {
 			...require_header_AccordionHeader.triggerOpenStateMapping,
-			...require_error_FieldError.transitionStatusMapping
+			...require_checkbox_index.transitionStatusMapping
 		};
 		const attrs = (0, vue.useAttrs)();
 		const ctx = useCollapsibleRootContext();
@@ -1759,12 +1824,21 @@ var LabelableProvider_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 	},
 	setup(__props) {
 		const props = __props;
-		const controlId = (0, vue.ref)(props.controlId);
+		const defaultId = require_checkbox_group_CheckboxGroup.useBaseUiId();
+		const initialControlId = props.controlId === void 0 ? defaultId : props.controlId;
+		const controlId = (0, vue.ref)(initialControlId);
 		const labelId = (0, vue.ref)(props.labelId);
 		const messageIds = (0, vue.ref)([]);
-		const parent = require_control_FieldControl.useLabelableContext();
-		function setControlId(id) {
-			controlId.value = id;
+		const registrations = /* @__PURE__ */ new Map();
+		const parent = require_checkbox_group_CheckboxGroup.useLabelableContext();
+		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;
@@ -1776,9 +1850,9 @@ var LabelableProvider_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 			const describedBy = parent.messageIds.value.concat(messageIds.value).join(" ") || void 0;
 			return { "aria-describedby": describedBy };
 		}
-		(0, vue.provide)(require_control_FieldControl.labelableContextKey, {
+		(0, vue.provide)(require_checkbox_group_CheckboxGroup.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: (0, vue.ref)(false) };
-const fieldItemContextKey = Symbol("FieldItemContext");
-function useFieldItemContext() {
-	return (0, vue.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__ */ (0, vue.defineComponent)({
@@ -1841,17 +1907,22 @@ var FieldItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0,
 	setup(__props) {
 		const props = __props;
 		const attrs = (0, vue.useAttrs)();
-		const { state, disabled: rootDisabled } = require_control_FieldControl.useFieldRootContext(false);
-		(0, vue.provide)(fieldItemContextKey, { disabled: (0, vue.computed)(() => rootDisabled.value || props.disabled) });
+		const { state, disabled: rootDisabled } = require_checkbox_group_CheckboxGroup.useFieldRootContext(false);
+		const disabled = (0, vue.computed)(() => rootDisabled.value || props.disabled);
+		const checkboxGroupContext = require_checkbox_group_CheckboxGroup.useCheckboxGroupContext(true);
+		const parentId = (0, vue.computed)(() => checkboxGroupContext?.parent.id);
+		const hasParentCheckbox = (0, vue.computed)(() => checkboxGroupContext?.allValues.value !== void 0);
+		const controlId = (0, vue.computed)(() => hasParentCheckbox.value ? parentId.value : void 0);
+		(0, vue.provide)(require_checkbox_index.fieldItemContextKey, { disabled });
 		const { tag, mergedProps, renderless } = require_button_Button.useRenderElement({
 			componentProps: props,
 			state,
 			props: (0, vue.computed)(() => ({ ...attrs })),
-			stateAttributesMapping: require_control_FieldControl.fieldValidityMapping,
+			stateAttributesMapping: require_checkbox_group_CheckboxGroup.fieldValidityMapping,
 			defaultTagName: "div"
 		});
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createBlock)(LabelableProvider_default, null, {
+			return (0, vue.openBlock)(), (0, vue.createBlock)(LabelableProvider_default, { "control-id": controlId.value }, {
 				default: (0, vue.withCtx)(() => [(0, vue.unref)(renderless) ? (0, vue.renderSlot)(_ctx.$slots, "default", {
 					key: 0,
 					props: (0, vue.unref)(mergedProps),
@@ -1861,7 +1932,7 @@ var FieldItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0,
 					_: 3
 				}, 16))]),
 				_: 3
-			});
+			}, 8, ["control-id"]);
 		};
 	}
 });
@@ -1870,6 +1941,69 @@ var FieldItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0,
 //#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 = require_checkbox_group_CheckboxGroup.useBaseUiId();
+	const id = (0, vue.computed)(() => (0, vue.toValue)(idProp) ?? generatedId);
+	(0, vue.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 } = require_checkbox_group_CheckboxGroup.useLabelableContext();
+	const syncLabelId = (nextLabelId) => {
+		setContextLabelId(nextLabelId);
+		setLabelIdProp?.(nextLabelId);
+	};
+	const labelId = useRegisteredLabelId(idProp, syncLabelId);
+	const resolvedControlId = (0, vue.computed)(() => contextControlId.value ?? (0, vue.toValue)(fallbackControlId));
+	const isNative = (0, vue.computed)(() => (0, vue.toValue)(native) ?? false);
+	function defaultFocusControl(event, controlId) {
+		if (!controlId) return;
+		const controlElement = require_control_SliderControl.ownerDocument(event.currentTarget)?.getElementById(controlId);
+		if ((0, _floating_ui_utils_dom.isHTMLElement)(controlElement)) focusElementWithVisible(controlElement);
+	}
+	function handleInteraction(event) {
+		if (require_control_SliderControl.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: (0, vue.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__ */ (0, vue.defineComponent)({
@@ -1912,42 +2046,20 @@ var FieldLabel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0,
 	setup(__props) {
 		const props = __props;
 		const attrs = (0, vue.useAttrs)();
-		const fieldRootContext = require_control_FieldControl.useFieldRootContext(false);
-		const { controlId, setLabelId, labelId: contextLabelId } = require_control_FieldControl.useLabelableContext();
-		const generatedLabelId = require_control_FieldControl.useBaseUiId(props.id);
-		const labelId = (0, vue.computed)(() => props.id ?? contextLabelId.value ?? generatedLabelId);
-		(0, vue.watchEffect)((onCleanup) => {
-			const id = labelId.value;
-			setLabelId(id);
-			onCleanup(() => setLabelId(void 0));
+		const fieldRootContext = require_checkbox_group_CheckboxGroup.useFieldRootContext(false);
+		const { labelId } = require_checkbox_group_CheckboxGroup.useLabelableContext();
+		const label = useLabel({
+			id: (0, vue.computed)(() => labelId.value ?? props.id),
+			native: (0, vue.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 } = require_button_Button.useRenderElement({
 			componentProps: props,
 			state: fieldRootContext.state,
-			props: (0, vue.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();
-					}
-				};
-			}),
-			stateAttributesMapping: require_control_FieldControl.fieldValidityMapping,
+			props: (0, vue.computed)(() => ({
+				...attrs,
+				...label.props.value
+			})),
+			stateAttributesMapping: require_checkbox_group_CheckboxGroup.fieldValidityMapping,
 			defaultTagName: "label"
 		});
 		return (_ctx, _cache) => {
@@ -2024,7 +2136,7 @@ function useFieldRootState(params) {
 
 //#endregion
 //#region src/field/root/useFieldValidation.ts
-const validityKeys = Object.keys(require_control_FieldControl.DEFAULT_VALIDITY_STATE);
+const validityKeys = Object.keys(require_checkbox_group_CheckboxGroup.DEFAULT_VALIDITY_STATE);
 function isOnlyValueMissing(state) {
 	if (!state || state.valid || !state.valueMissing) return false;
 	for (const key of validityKeys) {
@@ -2034,7 +2146,7 @@ function isOnlyValueMissing(state) {
 	return true;
 }
 function useFieldValidation(params) {
-	const { formRef, clearErrors } = require_control_FieldControl.useFormContext();
+	const { formRef, clearErrors } = require_checkbox_group_CheckboxGroup.useFormContext();
 	const { controlId, getDescriptionProps, setValidityData, validate, validityData, validationDebounceTime, invalid, markedDirtyRef, state, name, shouldValidateOnChange } = params;
 	const timeout = require_fallback_AvatarFallback.useTimeout();
 	const inputRef = (0, vue.shallowRef)(null);
@@ -2051,7 +2163,7 @@ function useFieldValidation(params) {
 				const nextValidityData = {
 					value,
 					state: {
-						...require_control_FieldControl.DEFAULT_VALIDITY_STATE,
+						...require_checkbox_group_CheckboxGroup.DEFAULT_VALIDITY_STATE,
 						valid: true
 					},
 					error: "",
@@ -2064,7 +2176,7 @@ function useFieldValidation(params) {
 					const currentFieldData = formRef.value.fields.get(cId);
 					if (currentFieldData) formRef.value.fields.set(cId, {
 						...currentFieldData,
-						validityData: require_control_FieldControl.getCombinedFieldValidityData(nextValidityData, false)
+						validityData: require_checkbox_group_CheckboxGroup.getCombinedFieldValidityData(nextValidityData, false)
 					});
 				}
 				setValidityData(nextValidityData);
@@ -2140,7 +2252,7 @@ function useFieldValidation(params) {
 			const currentFieldData = formRef.value.fields.get(cId);
 			if (currentFieldData) formRef.value.fields.set(cId, {
 				...currentFieldData,
-				validityData: require_control_FieldControl.getCombinedFieldValidityData(nextValidityData, invalid.value)
+				validityData: require_checkbox_group_CheckboxGroup.getCombinedFieldValidityData(nextValidityData, invalid.value)
 			});
 		}
 		setValidityData(nextValidityData);
@@ -2190,7 +2302,7 @@ function useFieldValidation(params) {
 function useFieldValidity(params) {
 	const { invalid } = params;
 	const validityData = (0, vue.ref)({
-		state: { ...require_control_FieldControl.DEFAULT_VALIDITY_STATE },
+		state: { ...require_checkbox_group_CheckboxGroup.DEFAULT_VALIDITY_STATE },
 		error: "",
 		errors: [],
 		value: null,
@@ -2276,7 +2388,7 @@ var FieldRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0,
 	setup(__props, { expose: __expose }) {
 		const props = __props;
 		const attrs = (0, vue.useAttrs)();
-		const { validationMode: formValidationMode, submitAttempted } = require_control_FieldControl.useFormContext();
+		const { validationMode: formValidationMode, submitAttempted } = require_checkbox_group_CheckboxGroup.useFormContext();
 		const fieldsetContext = useFieldsetRootContext(true);
 		const disabledFieldset = (0, vue.computed)(() => fieldsetContext?.disabled.value ?? false);
 		const disabled = (0, vue.computed)(() => disabledFieldset.value || props.disabled);
@@ -2284,12 +2396,19 @@ var FieldRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0,
 		const validationModeRef = (0, vue.computed)(() => props.validationMode ?? formValidationMode.value);
 		const validationDebounceTimeRef = (0, vue.computed)(() => props.validationDebounceTime);
 		const validateFn = (0, vue.computed)(() => props.validate ?? (() => null));
-		const parentLabelable = require_control_FieldControl.useLabelableContext();
+		const parentLabelable = require_checkbox_group_CheckboxGroup.useLabelableContext();
 		const controlId = (0, vue.ref)(void 0);
 		const labelId = (0, vue.ref)(void 0);
 		const messageIds = (0, vue.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;
@@ -2301,16 +2420,16 @@ var FieldRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0,
 			const describedBy = parentLabelable.messageIds.value.concat(messageIds.value).join(" ") || void 0;
 			return { "aria-describedby": describedBy };
 		}
-		(0, vue.provide)(require_control_FieldControl.labelableContextKey, {
+		(0, vue.provide)(require_checkbox_group_CheckboxGroup.labelableContextKey, {
 			controlId,
-			setControlId,
+			registerControlId,
 			labelId,
 			setLabelId,
 			messageIds,
 			setMessageIds,
 			getDescriptionProps
 		});
-		const { errors: formErrors } = require_control_FieldControl.useFormContext();
+		const { errors: formErrors } = require_checkbox_group_CheckboxGroup.useFormContext();
 		const hasFormError = (0, vue.computed)(() => {
 			const n = props.name;
 			return !!n && Object.hasOwn(formErrors.value, n) && formErrors.value[n] !== void 0;
@@ -2342,7 +2461,7 @@ var FieldRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0,
 			name: nameRef,
 			shouldValidateOnChange: () => shouldValidateOnChange.value
 		});
-		(0, vue.provide)(require_control_FieldControl.fieldRootContextKey, {
+		(0, vue.provide)(require_checkbox_group_CheckboxGroup.fieldRootContextKey, {
 			invalid,
 			name: nameRef,
 			validityData: (0, vue.shallowReadonly)(validityData),
@@ -2374,7 +2493,7 @@ var FieldRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0,
 			componentProps: props,
 			state,
 			props: (0, vue.computed)(() => ({ ...attrs })),
-			stateAttributesMapping: require_control_FieldControl.fieldValidityMapping,
+			stateAttributesMapping: require_checkbox_group_CheckboxGroup.fieldValidityMapping,
 			defaultTagName: "div"
 		});
 		return (_ctx, _cache) => {
@@ -2400,9 +2519,9 @@ var FieldValidity_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 	name: "FieldValidity",
 	__name: "FieldValidity",
 	setup(__props) {
-		const { validityData, invalid } = require_control_FieldControl.useFieldRootContext(false);
-		const combinedFieldValidityData = (0, vue.computed)(() => require_control_FieldControl.getCombinedFieldValidityData(validityData.value, invalid.value));
-		const { transitionStatus } = require_error_FieldError.useTransitionStatus((0, vue.computed)(() => combinedFieldValidityData.value.state.valid === false));
+		const { validityData, invalid } = require_checkbox_group_CheckboxGroup.useFieldRootContext(false);
+		const combinedFieldValidityData = (0, vue.computed)(() => require_checkbox_group_CheckboxGroup.getCombinedFieldValidityData(validityData.value, invalid.value));
+		const { transitionStatus } = require_checkbox_index.useTransitionStatus((0, vue.computed)(() => combinedFieldValidityData.value.state.valid === false));
 		const fieldValidityState = (0, vue.computed)(() => ({
 			...combinedFieldValidityData.value,
 			validity: combinedFieldValidityData.value.state,
@@ -2462,7 +2581,7 @@ var FieldsetLegend_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		const props = __props;
 		const attrs = (0, vue.useAttrs)();
 		const { disabled, legendId, setLegendId } = useFieldsetRootContext();
-		const id = require_control_FieldControl.useBaseUiId(props.id);
+		const id = require_checkbox_group_CheckboxGroup.useBaseUiId(props.id);
 		setLegendId(id);
 		(0, vue.onBeforeUnmount)(() => {
 			if (legendId.value === id) setLegendId(void 0);
@@ -2576,61 +2695,3037 @@ var FieldsetRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (
 var FieldsetRoot_default = FieldsetRoot_vue_vue_type_script_setup_true_lang_default;
 
 //#endregion
-//#region src/use-render/useRender.ts
+//#region src/separator/Separator.vue?vue&type=script&setup=true&lang.ts
 /**
-* Renders a Base UI element.
-*
-* The public composable that collects `attrs` internally via `useAttrs()`,
-* merges them with explicit props, and delegates to `useRenderElement`.
-* Returns a readonly state and supports renderless mode via the `Slot` sentinel.
+* A separator element accessible to screen readers.
+* Renders a `<div>` element.
 *
-* @public
+* Documentation: [Base UI Vue Separator](https://baseui-vue.com/docs/components/separator)
 */
-function useRender(params) {
-	const attrs = (0, vue.useAttrs)();
-	const state = (0, vue.computed)(() => {
-		return (0, vue.readonly)((0, vue.toValue)(params.state) ?? require_button_Button.EMPTY_OBJECT);
-	});
-	const mergedComponentProps = require_button_Button.useRenderElement({
-		componentProps: params,
-		state,
-		props: (0, vue.computed)(() => require_button_Button.mergeProps(attrs, (0, vue.toValue)(params.props))),
-		stateAttributesMapping: params.stateAttributesMapping,
-		defaultTagName: params.defaultTagName,
-		ref: params.ref
-	});
-	return {
-		tag: mergedComponentProps.tag,
-		renderProps: mergedComponentProps.mergedProps,
-		renderless: mergedComponentProps.renderless,
-		state,
-		ref: mergedComponentProps.ref
-	};
-}
+var Separator_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.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 = (0, vue.useAttrs)();
+		const state = (0, vue.computed)(() => ({ orientation: props.orientation }));
+		const { tag, mergedProps, renderless, ref: renderRef } = require_button_Button.useRenderElement({
+			componentProps: props,
+			state,
+			props: (0, vue.computed)(() => ({
+				...attrs,
+				"role": "separator",
+				"aria-orientation": props.orientation
+			})),
+			defaultTagName: "div"
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.unref)(renderless) ? (0, vue.renderSlot)(_ctx.$slots, "default", {
+				key: 0,
+				ref: (0, vue.unref)(renderRef),
+				props: (0, vue.unref)(mergedProps),
+				state: state.value
+			}) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)((0, vue.unref)(tag)), (0, vue.mergeProps)({
+				key: 1,
+				ref: (0, vue.unref)(renderRef)
+			}, (0, vue.unref)(mergedProps)), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", { state: state.value })]),
+				_: 3
+			}, 16));
+		};
+	}
+});
 
 //#endregion
-//#region src/index.ts
-const name = "base-ui-vue";
-const version = "0.0.0";
+//#region src/separator/Separator.vue
+var Separator_default = Separator_vue_vue_type_script_setup_true_lang_default;
 
 //#endregion
-Object.defineProperty(exports, 'AccordionItem_default', {
-  enumerable: true,
-  get: function () {
-    return AccordionItem_default;
-  }
-});
-Object.defineProperty(exports, 'AccordionPanel_default', {
-  enumerable: true,
-  get: function () {
-    return AccordionPanel_default;
-  }
-});
-Object.defineProperty(exports, 'AccordionRoot_default', {
-  enumerable: true,
-  get: function () {
-    return AccordionRoot_default;
-  }
+//#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__ */ (0, vue.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 = (0, vue.useAttrs)();
+		const rootContext = require_control_SliderControl.useSliderRootContext();
+		const isMounted = (0, vue.ref)(false);
+		(0, vue.onMounted)(() => {
+			isMounted.value = true;
+		});
+		const vertical = (0, vue.computed)(() => rootContext.orientation.value === "vertical");
+		const range = (0, vue.computed)(() => rootContext.values.value.length > 1);
+		const style = (0, vue.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 = (0, vue.computed)(() => require_button_Button.mergeProps(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 } = require_button_Button.useRenderElement({
+			componentProps: props,
+			state: rootContext.state,
+			props: indicatorProps,
+			defaultTagName: "div",
+			stateAttributesMapping: require_control_SliderControl.sliderStateAttributesMapping
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.unref)(renderless) ? (0, vue.renderSlot)(_ctx.$slots, "default", {
+				key: 0,
+				ref: (0, vue.unref)(renderRef),
+				props: (0, vue.unref)(mergedProps),
+				state: (0, vue.unref)(rootContext).state
+			}) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)((0, vue.unref)(tag)), (0, vue.mergeProps)({
+				key: 1,
+				ref: (0, vue.unref)(renderRef)
+			}, (0, vue.unref)(mergedProps)), {
+				default: (0, vue.withCtx)(() => [(0, vue.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__ */ (0, vue.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 = (0, vue.useAttrs)();
+		const rootContext = require_control_SliderControl.useSliderRootContext();
+		const label = useLabel({
+			id: (0, vue.computed)(() => rootContext.rootLabelId.value),
+			fallbackControlId: (0, vue.computed)(() => rootContext.controlRef.value?.id),
+			setLabelId: rootContext.setLabelId,
+			focusControl(_event, controlId) {
+				if (controlId) {
+					const controlElement = rootContext.controlRef.value ? require_control_SliderControl.ownerDocument(rootContext.controlRef.value)?.getElementById(controlId) : null;
+					if ((0, _floating_ui_utils_dom.isHTMLElement)(controlElement)) {
+						focusElementWithVisible(controlElement);
+						return;
+					}
+				}
+				const fallbackInputs = rootContext.controlRef.value?.querySelectorAll("input[type=\"range\"]");
+				const fallbackInput = fallbackInputs?.length === 1 ? fallbackInputs[0] : null;
+				if ((0, _floating_ui_utils_dom.isHTMLElement)(fallbackInput)) focusElementWithVisible(fallbackInput);
+			}
+		});
+		const labelProps = (0, vue.computed)(() => require_button_Button.mergeProps(attrs, label.props.value));
+		const { tag, mergedProps, renderless, ref: renderRef } = require_button_Button.useRenderElement({
+			componentProps: props,
+			state: rootContext.state,
+			props: labelProps,
+			defaultTagName: "div",
+			stateAttributesMapping: require_control_SliderControl.sliderStateAttributesMapping
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.unref)(renderless) ? (0, vue.renderSlot)(_ctx.$slots, "default", {
+				key: 0,
+				ref: (0, vue.unref)(renderRef),
+				props: (0, vue.unref)(mergedProps),
+				state: (0, vue.unref)(rootContext).state
+			}) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)((0, vue.unref)(tag)), (0, vue.mergeProps)({
+				key: 1,
+				ref: (0, vue.unref)(renderRef)
+			}, (0, vue.unref)(mergedProps)), {
+				default: (0, vue.withCtx)(() => [(0, vue.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 = require_control_SliderControl.clamp(newValue, min, max);
+	if (range) newValue = replaceArrayItemAtIndex(values, index, require_control_SliderControl.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__ */ (0, vue.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 = (0, vue.useAttrs)();
+		const attrsObject = attrs;
+		const explicitAriaLabelledBy = (0, vue.computed)(() => props.ariaLabelledby ?? attrs["aria-labelledby"]);
+		const id = require_checkbox_group_CheckboxGroup.useBaseUiId(props.id);
+		const idRef = (0, vue.computed)(() => id);
+		const defaultLabelId = (0, vue.computed)(() => getDefaultLabelId(id));
+		const { clearErrors } = require_checkbox_group_CheckboxGroup.useFormContext();
+		const { state: fieldState, disabled: fieldDisabled, name: fieldName, setTouched, setDirty, validation, validityData, shouldValidateOnChange } = require_checkbox_group_CheckboxGroup.useFieldRootContext();
+		const { labelId: fieldLabelId } = require_checkbox_group_CheckboxGroup.useLabelableContext();
+		const localLabelId = (0, vue.ref)(void 0);
+		const ariaLabelledBy = (0, vue.computed)(() => explicitAriaLabelledBy.value ?? resolveAriaLabelledBy(fieldLabelId.value, localLabelId.value));
+		const disabled = (0, vue.computed)(() => fieldDisabled.value || props.disabled);
+		const name = (0, vue.computed)(() => fieldName.value ?? props.name);
+		const controllableValue = require_checkbox_group_CheckboxGroup.useControllableState({
+			controlled: () => props.value,
+			default: () => props.defaultValue ?? props.min,
+			name: "Slider",
+			state: "value"
+		});
+		const valueUnwrapped = controllableValue.value;
+		const setValueUnwrapped = controllableValue.setValue;
+		const sliderRef = (0, vue.ref)(null);
+		const controlRef = (0, vue.ref)(null);
+		const thumbRefs = (0, vue.ref)([]);
+		const pressedInputRef = (0, vue.ref)(null);
+		const pressedThumbCenterOffsetRef = (0, vue.ref)(null);
+		const pressedThumbIndexRef = (0, vue.ref)(-1);
+		const pressedValuesRef = (0, vue.ref)(null);
+		const lastChangedValueRef = (0, vue.ref)(null);
+		const lastChangeReasonRef = (0, vue.ref)(require_checkbox_index.REASONS.none);
+		const formatOptionsRef = (0, vue.computed)(() => props.format);
+		const active = (0, vue.ref)(-1);
+		const lastUsedThumbIndex = (0, vue.ref)(-1);
+		const dragging = (0, vue.ref)(false);
+		const thumbMap = (0, vue.shallowRef)(/* @__PURE__ */ new Map());
+		const indicatorPosition = (0, vue.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 = (0, vue.computed)(() => Array.isArray(valueUnwrapped.value));
+		const values = (0, vue.computed)(() => {
+			if (!range.value) return [require_control_SliderControl.clamp(valueUnwrapped.value, props.min, props.max)];
+			return [...valueUnwrapped.value].sort(asc);
+		});
+		require_checkbox_group_CheckboxGroup.useField({
+			id: idRef,
+			commit: (value) => validation.commit(value),
+			value: (0, vue.computed)(() => valueUnwrapped.value),
+			controlRef,
+			name,
+			getValue: () => valueUnwrapped.value
+		});
+		(0, vue.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 ?? require_checkbox_index.createChangeEventDetails(require_checkbox_index.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 ? require_checkbox_index.REASONS.keyboard : require_checkbox_index.REASONS.inputChange;
+		}
+		function handleInputChange(valueInput, index, event) {
+			const newValue = getSliderValue(valueInput, index, props.min, props.max, range.value, values.value);
+			if (require_control_SliderControl.validateMinimumDistance(newValue, props.step, props.minStepsBetweenValues)) {
+				const reason = getSliderChangeEventReason(event);
+				setValue(newValue, require_checkbox_index.createChangeEventDetails(reason, event, void 0, { activeThumbIndex: index }));
+				setTouched(true);
+				emit("valueCommitted", lastChangedValueRef.value ?? newValue, require_checkbox_index.createGenericEventDetails(reason, event));
+			}
+		}
+		if (process.env.NODE_ENV !== "production" && props.min >= props.max) warn("Slider `max` must be greater than `min`.");
+		(0, vue.watch)(() => disabled.value, (nextDisabled) => {
+			const activeEl = sliderRef.value ? require_control_SliderControl.activeElement(require_control_SliderControl.ownerDocument(sliderRef.value)) : null;
+			if (nextDisabled && activeEl instanceof HTMLElement && require_control_SliderControl.contains(sliderRef.value, activeEl)) activeEl.blur();
+			if (nextDisabled && active.value !== -1) setActive(-1);
+		});
+		const state = (0, vue.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
+		}));
+		(0, vue.provide)(require_control_SliderControl.sliderRootContextKey, {
+			active,
+			lastUsedThumbIndex,
+			controlRef,
+			dragging,
+			disabled,
+			validation,
+			formatOptionsRef,
+			handleInputChange,
+			indicatorPosition,
+			inset: (0, vue.computed)(() => props.thumbAlignment !== "center"),
+			labelId: (0, vue.computed)(() => ariaLabelledBy.value),
+			rootLabelId: defaultLabelId,
+			largeStep: (0, vue.computed)(() => props.largeStep),
+			lastChangedValueRef,
+			lastChangeReasonRef,
+			locale: (0, vue.computed)(() => props.locale),
+			max: (0, vue.computed)(() => props.max),
+			min: (0, vue.computed)(() => props.min),
+			minStepsBetweenValues: (0, vue.computed)(() => props.minStepsBetweenValues),
+			form: (0, vue.computed)(() => props.form),
+			name,
+			onValueCommitted(value, details) {
+				emit("valueCommitted", value, details);
+			},
+			orientation: (0, vue.computed)(() => props.orientation),
+			pressedInputRef,
+			pressedThumbCenterOffsetRef,
+			pressedThumbIndexRef,
+			pressedValuesRef,
+			registerFieldControlRef,
+			renderBeforeHydration: (0, vue.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: (0, vue.computed)(() => props.step),
+			thumbCollisionBehavior: (0, vue.computed)(() => props.thumbCollisionBehavior),
+			thumbMap,
+			thumbRefs,
+			values
+		});
+		const rootProps = (0, vue.computed)(() => require_button_Button.mergeProps(attrsObject, validation.getValidationProps(), {
+			"aria-labelledby": ariaLabelledBy.value,
+			"id": id,
+			"role": "group"
+		}));
+		const { tag, mergedProps, renderless, ref: renderRef } = require_button_Button.useRenderElement({
+			componentProps: props,
+			state,
+			ref: require_button_Button.useMergedRefs(sliderRef),
+			props: rootProps,
+			defaultTagName: "div",
+			stateAttributesMapping: require_control_SliderControl.sliderStateAttributesMapping
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)(CompositeList_default, (0, vue.normalizeProps)((0, vue.guardReactiveProps)(compositeListProps)), {
+				default: (0, vue.withCtx)(() => [(0, vue.unref)(renderless) ? (0, vue.renderSlot)(_ctx.$slots, "default", {
+					key: 0,
+					ref: (0, vue.unref)(renderRef),
+					props: (0, vue.unref)(mergedProps),
+					state: state.value
+				}) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)((0, vue.unref)(tag)), (0, vue.mergeProps)({
+					key: 1,
+					ref: (0, vue.unref)(renderRef)
+				}, (0, vue.unref)(mergedProps)), {
+					default: (0, vue.withCtx)(() => [(0, vue.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__ */ (0, vue.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([
+			require_composite_composite.ARROW_UP,
+			require_composite_composite.ARROW_DOWN,
+			require_composite_composite.ARROW_LEFT,
+			require_composite_composite.ARROW_RIGHT,
+			require_composite_composite.HOME,
+			require_composite_composite.END,
+			require_composite_composite.PAGE_UP,
+			require_composite_composite.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 = (0, vue.useAttrs)();
+		const { nonce } = require_csp_provider_CSPContext.useCSPContext();
+		const direction = require_control_SliderControl.useDirection();
+		const rootContext = require_control_SliderControl.useSliderRootContext();
+		const { setTouched, setFocused, validationMode, validation } = require_checkbox_group_CheckboxGroup.useFieldRootContext();
+		const id = require_checkbox_group_CheckboxGroup.useBaseUiId(props.id);
+		const disabled = (0, vue.computed)(() => props.disabled || rootContext.disabled.value);
+		const range = (0, vue.computed)(() => rootContext.values.value.length > 1);
+		const vertical = (0, vue.computed)(() => rootContext.orientation.value === "vertical");
+		const rtl = (0, vue.computed)(() => direction.value === "rtl");
+		const thumbRef = (0, vue.ref)(null);
+		const inputRef = (0, vue.ref)(null);
+		const restoringFocusVisibleRef = (0, vue.ref)(false);
+		const defaultInputId = require_checkbox_group_CheckboxGroup.useBaseUiId();
+		const labelableId = require_control_FieldControl.useLabelableId();
+		const inputId = (0, vue.computed)(() => range.value ? defaultInputId : labelableId.value);
+		const { ref: listItemRef, index: compositeIndex } = require_button_ToolbarButton.useCompositeListItem({
+			metadata: () => ({ inputId }),
+			index: () => props.index
+		});
+		const index = (0, vue.computed)(() => !range.value ? 0 : props.index ?? compositeIndex.value);
+		const last = (0, vue.computed)(() => index.value === rootContext.values.value.length - 1);
+		const thumbValue = (0, vue.computed)(() => rootContext.values.value[index.value]);
+		const thumbValuePercent = (0, vue.computed)(() => valueToPercent(thumbValue.value, rootContext.min.value, rootContext.max.value));
+		const isMounted = (0, vue.ref)(false);
+		const positionPercent = (0, vue.ref)(void 0);
+		(0, vue.onMounted)(() => {
+			isMounted.value = true;
+		});
+		const safeLastUsedThumbIndex = (0, vue.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);
+		}
+		(0, vue.watch)(() => [
+			rootContext.inset.value,
+			thumbValuePercent.value,
+			isMounted.value
+		], () => {
+			if (rootContext.inset.value) queueMicrotask(getInsetPosition);
+		}, { immediate: true });
+		(0, vue.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 = (0, vue.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 require_checkbox_index.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 = (0, vue.computed)(() => {
+			if (rootContext.orientation.value === "vertical") return rtl.value ? "vertical-rl" : "vertical-lr";
+		});
+		const ariaLabel = (0, vue.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 (require_composite_composite.COMPOSITE_KEYS.has(event.key)) event.stopPropagation();
+			let newValue = null;
+			const roundedValue = require_control_SliderControl.roundValueToStep(thumbValue.value, rootContext.step.value, rootContext.min.value);
+			switch (event.key) {
+				case require_composite_composite.ARROW_UP:
+					newValue = getNewValue(roundedValue, event.shiftKey ? rootContext.largeStep.value : rootContext.step.value, 1, rootContext.min.value, rootContext.max.value);
+					break;
+				case require_composite_composite.ARROW_RIGHT:
+					newValue = getNewValue(roundedValue, event.shiftKey ? rootContext.largeStep.value : rootContext.step.value, rtl.value ? -1 : 1, rootContext.min.value, rootContext.max.value);
+					break;
+				case require_composite_composite.ARROW_DOWN:
+					newValue = getNewValue(roundedValue, event.shiftKey ? rootContext.largeStep.value : rootContext.step.value, -1, rootContext.min.value, rootContext.max.value);
+					break;
+				case require_composite_composite.ARROW_LEFT:
+					newValue = getNewValue(roundedValue, event.shiftKey ? rootContext.largeStep.value : rootContext.step.value, rtl.value ? 1 : -1, rootContext.min.value, rootContext.max.value);
+					break;
+				case require_composite_composite.PAGE_UP:
+					newValue = getNewValue(roundedValue, rootContext.largeStep.value, 1, rootContext.min.value, rootContext.max.value);
+					break;
+				case require_composite_composite.PAGE_DOWN:
+					newValue = getNewValue(roundedValue, rootContext.largeStep.value, -1, rootContext.min.value, rootContext.max.value);
+					break;
+				case require_composite_composite.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 require_composite_composite.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), require_checkbox_index.createGenericEventDetails(require_checkbox_index.REASONS.keyboard, event));
+				event.preventDefault();
+			}
+		}
+		const inputStyle = (0, vue.computed)(() => ({
+			...require_checkbox_index.visuallyHidden,
+			width: "100%",
+			height: "100%",
+			writingMode: cssWritingMode.value
+		}));
+		const inputValidationProps = (0, vue.computed)(() => validation.getInputValidationProps());
+		const forwardedInputAttrs = (0, vue.computed)(() => {
+			const attrsObject = attrs;
+			return {
+				onBlur: attrsObject.onBlur,
+				onFocus: attrsObject.onFocus,
+				onKeydown: attrsObject.onKeydown
+			};
+		});
+		const thumbAttrs = (0, vue.computed)(() => {
+			const { onBlur: _onBlur, onFocus: _onFocus, onKeydown: _onKeydown, ...rest } = attrs;
+			return rest;
+		});
+		const inputProps = (0, vue.computed)(() => require_button_Button.mergeProps(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 = require_button_Button.useMergedRefs(listItemRef, thumbRef);
+		const thumbProps = (0, vue.computed)(() => require_button_Button.mergeProps(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 = require_control_SliderControl.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 } = require_button_Button.useRenderElement({
+			componentProps: props,
+			state: rootContext.state,
+			props: thumbProps,
+			defaultTagName: "div",
+			ref: mergedRef,
+			stateAttributesMapping: require_control_SliderControl.sliderStateAttributesMapping
+		});
+		(0, vue.watch)(() => rootContext.active.value, () => {
+			if (disabled.value && rootContext.active.value === index.value) rootContext.setActive(-1);
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.unref)(renderless) ? (0, vue.renderSlot)(_ctx.$slots, "default", {
+				key: 0,
+				ref: (0, vue.unref)(renderRef),
+				props: (0, vue.unref)(mergedProps),
+				state: (0, vue.unref)(rootContext).state
+			}) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)((0, vue.unref)(tag)), (0, vue.mergeProps)({
+				key: 1,
+				ref: (0, vue.unref)(renderRef)
+			}, (0, vue.unref)(mergedProps)), {
+				default: (0, vue.withCtx)(() => [
+					(0, vue.renderSlot)(_ctx.$slots, "default"),
+					(0, vue.createElementVNode)("input", (0, vue.mergeProps)({ ref: setInputVNodeRef }, inputProps.value), null, 16),
+					(0, vue.createCommentVNode)(" eslint-disable-next-line vue/require-component-is "),
+					(0, vue.unref)(rootContext).inset.value && !isMounted.value && (0, vue.unref)(rootContext).renderBeforeHydration.value && last.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)("script"), {
+						key: 0,
+						nonce: (0, vue.unref)(nonce),
+						"suppress-hydration-warning": true
+					}, {
+						default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(script)), 1)]),
+						_: 1
+					}, 8, ["nonce"])) : (0, vue.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__ */ (0, vue.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 = (0, vue.useAttrs)();
+		const rootContext = require_control_SliderControl.useSliderRootContext();
+		const trackProps = (0, vue.computed)(() => require_button_Button.mergeProps(attrs, { style: { position: "relative" } }));
+		const { tag, mergedProps, renderless, ref: renderRef } = require_button_Button.useRenderElement({
+			componentProps: props,
+			state: rootContext.state,
+			props: trackProps,
+			defaultTagName: "div",
+			stateAttributesMapping: require_control_SliderControl.sliderStateAttributesMapping
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.unref)(renderless) ? (0, vue.renderSlot)(_ctx.$slots, "default", {
+				key: 0,
+				ref: (0, vue.unref)(renderRef),
+				props: (0, vue.unref)(mergedProps),
+				state: (0, vue.unref)(rootContext).state
+			}) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)((0, vue.unref)(tag)), (0, vue.mergeProps)({
+				key: 1,
+				ref: (0, vue.unref)(renderRef)
+			}, (0, vue.unref)(mergedProps)), {
+				default: (0, vue.withCtx)(() => [(0, vue.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__ */ (0, vue.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 = (0, vue.useAttrs)();
+		const rootContext = require_control_SliderControl.useSliderRootContext();
+		const outputFor = (0, vue.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 = (0, vue.computed)(() => rootContext.values.value.map((value) => formatNumber(value, rootContext.locale.value, rootContext.formatOptionsRef.value)));
+		const defaultDisplayValue = (0, vue.computed)(() => rootContext.values.value.map((value, index) => formattedValues.value[index] || String(value)).join(" – "));
+		const valueProps = (0, vue.computed)(() => require_button_Button.mergeProps(attrs, {
+			"aria-live": props.ariaLive,
+			"for": outputFor.value
+		}));
+		const { tag, mergedProps, renderless, ref: renderRef } = require_button_Button.useRenderElement({
+			componentProps: props,
+			state: rootContext.state,
+			props: valueProps,
+			defaultTagName: "output",
+			stateAttributesMapping: require_control_SliderControl.sliderStateAttributesMapping
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.unref)(renderless) ? (0, vue.renderSlot)(_ctx.$slots, "default", {
+				key: 0,
+				ref: (0, vue.unref)(renderRef),
+				props: (0, vue.unref)(mergedProps),
+				state: (0, vue.unref)(rootContext).state,
+				formattedValues: formattedValues.value,
+				values: (0, vue.unref)(rootContext).values.value
+			}) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)((0, vue.unref)(tag)), (0, vue.mergeProps)({
+				key: 1,
+				ref: (0, vue.unref)(renderRef)
+			}, (0, vue.unref)(mergedProps)), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", {
+					formattedValues: formattedValues.value,
+					values: (0, vue.unref)(rootContext).values.value
+				}, () => [(0, vue.createTextVNode)((0, vue.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 = {
+	...require_checkbox_group_CheckboxGroup.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 = (0, vue.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__ */ (0, vue.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 = (0, vue.useAttrs)();
+		const instance = (0, vue.getCurrentInstance)();
+		const { clearErrors } = require_checkbox_group_CheckboxGroup.useFormContext();
+		const { disabled: fieldDisabled, name: fieldName, setDirty, setFilled, setFocused, setTouched, state: fieldState, validationMode, validityData, shouldValidateOnChange, validation } = require_checkbox_group_CheckboxGroup.useFieldRootContext();
+		const labelableContext = require_checkbox_group_CheckboxGroup.useLabelableContext();
+		const disabled = (0, vue.computed)(() => fieldDisabled.value || props.disabled);
+		const name = (0, vue.computed)(() => fieldName.value ?? props.name);
+		const rootElementId = require_checkbox_group_CheckboxGroup.useBaseUiId();
+		const controlId = require_control_FieldControl.useLabelableId({ id: () => props.id });
+		const inputId = (0, vue.computed)(() => props.nativeButton ? void 0 : controlId.value);
+		const { value: checked, setValue: setCheckedState } = require_checkbox_group_CheckboxGroup.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 = (0, vue.ref)(null);
+		const inputElementRef = (0, vue.ref)(null);
+		const mergedInputRef = require_button_Button.useMergedRefs(inputElementRef, props.inputRef);
+		require_checkbox_group_CheckboxGroup.useField({
+			id: (0, vue.computed)(() => rootElementId),
+			commit: (value) => validation.commit(value),
+			value: checked,
+			controlRef,
+			name,
+			getValue: () => checked.value
+		});
+		const ariaLabelledBy = require_checkbox_index.useAriaLabelledBy({
+			ariaLabelledBy: (0, vue.computed)(() => props["aria-labelledby"]),
+			labelId: labelableContext.labelId,
+			labelSourceRef: inputElementRef,
+			enableFallback: !props.nativeButton,
+			labelSourceId: inputId
+		});
+		(0, vue.watchEffect)(() => {
+			if (checked.value) setFilled(true);
+		});
+		(0, vue.watchEffect)(() => {
+			if (!inputElementRef.value) return;
+			validation.setInputRef(inputElementRef.value);
+		});
+		(0, vue.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 } = require_button_Button.useButton({
+			disabled,
+			native: (0, vue.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 = require_checkbox_index.createChangeEventDetails(require_checkbox_index.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 = (0, vue.computed)(() => ({
+			...fieldState.value,
+			checked: checked.value,
+			disabled: disabled.value,
+			readOnly: props.readOnly,
+			required: props.required
+		}));
+		(0, vue.provide)(switchRootContextKey, state);
+		__expose({ element: controlRef });
+		const mergedRootRef = require_button_Button.useMergedRefs(buttonRef, controlRef);
+		const buttonInteractionAttrs = (0, vue.computed)(() => ({
+			onClick: attrsObject.onClick,
+			onKeydown: attrsObject.onKeydown,
+			onKeyup: attrsObject.onKeyup,
+			onMousedown: attrsObject.onMousedown,
+			onPointerdown: attrsObject.onPointerdown
+		}));
+		const passthroughAttrs = (0, vue.computed)(() => {
+			const { onClick, onKeydown, onKeyup, onMousedown, onPointerdown, ...rest } = attrsObject;
+			return rest;
+		});
+		const { tag, mergedProps, renderless, ref: renderRef } = require_button_Button.useRenderElement({
+			componentProps: props,
+			state,
+			props: (0, vue.computed)(() => {
+				const localDescriptionProps = labelableContext.getDescriptionProps();
+				const validationProps = validation.getValidationProps();
+				return require_button_Button.mergeProps(getButtonProps(require_button_Button.mergeProps(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 = (0, vue.computed)(() => {
+			const localDescriptionProps = labelableContext.getDescriptionProps();
+			const validationProps = validation.getInputValidationProps();
+			return require_button_Button.mergeProps({
+				"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 ? require_checkbox_index.visuallyHiddenInput : require_checkbox_index.visuallyHidden,
+				"onChange": handleInputChange,
+				onFocus() {
+					controlRef.value?.focus();
+				}
+			}, props.value !== void 0 ? { value: props.value } : require_button_Button.EMPTY_OBJECT, combineDescriptionProps(localDescriptionProps, validationProps));
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, null, [
+				(0, vue.unref)(renderless) ? (0, vue.renderSlot)(_ctx.$slots, "default", {
+					key: 0,
+					ref: (0, vue.unref)(renderRef),
+					props: (0, vue.unref)(mergedProps),
+					state: state.value
+				}) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)((0, vue.unref)(tag)), (0, vue.mergeProps)({
+					key: 1,
+					ref: (0, vue.unref)(renderRef)
+				}, (0, vue.unref)(mergedProps)), {
+					default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", { state: state.value })]),
+					_: 3
+				}, 16)),
+				!(0, vue.unref)(checked) && !disabled.value && name.value && __props.uncheckedValue !== void 0 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("input", {
+					key: 2,
+					type: "hidden",
+					form: __props.form,
+					name: name.value,
+					value: __props.uncheckedValue
+				}, null, 8, _hoisted_1)) : (0, vue.createCommentVNode)("v-if", true),
+				(0, vue.createElementVNode)("input", (0, vue.mergeProps)({ ref: (0, vue.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__ */ (0, vue.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 = (0, vue.useAttrs)();
+		const { state: fieldState } = require_checkbox_group_CheckboxGroup.useFieldRootContext();
+		const rootState = useSwitchRootContext();
+		const state = (0, vue.computed)(() => ({
+			...fieldState.value,
+			...rootState.value
+		}));
+		const { tag, mergedProps, renderless, ref: renderRef } = require_button_Button.useRenderElement({
+			componentProps: props,
+			state,
+			props: (0, vue.computed)(() => attrsObject),
+			stateAttributesMapping,
+			defaultTagName: "span"
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.unref)(renderless) ? (0, vue.renderSlot)(_ctx.$slots, "default", {
+				key: 0,
+				ref: (0, vue.unref)(renderRef),
+				props: (0, vue.unref)(mergedProps),
+				state: state.value
+			}) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)((0, vue.unref)(tag)), (0, vue.mergeProps)({
+				key: 1,
+				ref: (0, vue.unref)(renderRef)
+			}, (0, vue.unref)(mergedProps)), {
+				default: (0, vue.withCtx)(() => [(0, vue.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 = (0, vue.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__ */ (0, vue.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 = (0, vue.useAttrs)();
+		const instance = (0, vue.getCurrentInstance)();
+		const groupContext = useToggleGroupContext(true);
+		const generatedValue = require_checkbox_group_CheckboxGroup.useBaseUiId();
+		const toggleValue = (0, vue.computed)(() => props.value || generatedValue);
+		const groupValue = (0, vue.computed)(() => groupContext?.value.value ?? []);
+		const disabled = (0, vue.computed)(() => props.disabled || (groupContext?.disabled.value ?? false));
+		if (process.env.NODE_ENV !== "production") (0, vue.watchEffect)(() => {
+			if (groupContext && props.value === void 0 && groupContext.isValueInitialized.value) require_button_Button.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 = (0, vue.computed)(() => Boolean(instance?.vnode.props && Object.prototype.hasOwnProperty.call(instance.vnode.props, "pressed")));
+		const { value: pressed, setValue: setPressedState } = require_checkbox_group_CheckboxGroup.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 } = require_button_Button.useButton({
+			disabled,
+			native: () => props.nativeButton ?? true
+		});
+		const state = (0, vue.computed)(() => ({
+			disabled: disabled.value,
+			pressed: pressed.value
+		}));
+		const buttonAttrs = (0, vue.computed)(() => {
+			const { form: _form, type: _type, ...rest } = attrs;
+			return rest;
+		});
+		function createToggleButtonProps() {
+			return require_button_Button.mergeProps(getButtonProps(require_button_Button.mergeProps(buttonAttrs.value, {
+				"aria-pressed": pressed.value,
+				onClick(event) {
+					const nextPressed = !pressed.value;
+					const details = require_checkbox_index.createChangeEventDetails(require_checkbox_index.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 } = require_button_Button.useRenderElement({
+			componentProps: props,
+			state,
+			props: (0, vue.computed)(() => createToggleButtonProps()),
+			defaultTagName: "button",
+			ref: buttonRef
+		});
+		const itemRefs = [buttonRef];
+		return (_ctx, _cache) => {
+			return (0, vue.unref)(groupContext) ? ((0, vue.openBlock)(), (0, vue.createBlock)(require_button_ToolbarButton.CompositeItem_default, {
+				key: 0,
+				as: __props.as,
+				class: (0, vue.normalizeClass)(props.class),
+				style: (0, vue.normalizeStyle)(props.style),
+				state: state.value,
+				refs: itemRefs,
+				props: [() => createToggleButtonProps()]
+			}, {
+				default: (0, vue.withCtx)((slotProps) => [(0, vue.renderSlot)(_ctx.$slots, "default", (0, vue.normalizeProps)((0, vue.guardReactiveProps)(slotProps)))]),
+				_: 3
+			}, 8, [
+				"as",
+				"class",
+				"style",
+				"state",
+				"props"
+			])) : (0, vue.unref)(renderless) ? (0, vue.renderSlot)(_ctx.$slots, "default", {
+				key: 1,
+				ref: (0, vue.unref)(renderRef),
+				props: (0, vue.unref)(mergedProps),
+				state: state.value
+			}) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)((0, vue.unref)(tag)), (0, vue.mergeProps)({
+				key: 2,
+				ref: (0, vue.unref)(renderRef)
+			}, (0, vue.unref)(mergedProps)), {
+				default: (0, vue.withCtx)(() => [(0, vue.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 = (0, vue.computed)(() => params.orientation?.() ?? "both");
+	const cols = (0, vue.computed)(() => params.cols?.() ?? 1);
+	const loopFocus = (0, vue.computed)(() => params.loopFocus?.() ?? true);
+	const dense = (0, vue.computed)(() => params.dense?.() ?? false);
+	const itemSizes = (0, vue.computed)(() => params.itemSizes?.());
+	const enableHomeAndEndKeys = (0, vue.computed)(() => params.enableHomeAndEndKeys?.() ?? false);
+	const stopEventPropagation = (0, vue.computed)(() => params.stopEventPropagation?.() ?? false);
+	const disabledIndices = (0, vue.computed)(() => params.disabledIndices?.() ?? EMPTY_ARRAY);
+	const modifierKeys = (0, vue.computed)(() => params.modifierKeys?.() ?? EMPTY_ARRAY);
+	const externalHighlightedIndex = (0, vue.computed)(() => params.highlightedIndex?.());
+	const externalSetHighlightedIndex = params.onHighlightedIndexChange;
+	const internalHighlightedIndex = (0, vue.ref)(params.defaultHighlightedIndex?.() ?? 0);
+	const isGrid = (0, vue.computed)(() => cols.value > 1);
+	const rootRef = (0, vue.ref)(null);
+	const mergedRef = require_button_Button.useMergedRefs(rootRef, params.rootRef);
+	const elementsRef = (0, vue.ref)([]);
+	let hasSetDefaultIndex = false;
+	const highlightedIndex = (0, vue.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];
+			require_composite_composite.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(require_composite_constants.ACTIVE_COMPOSITE_ITEM)) ?? null;
+		const activeIndex = activeItem ? sortedElements.indexOf(activeItem) : -1;
+		if (activeIndex !== -1) onHighlightedIndexChange(activeIndex);
+		require_composite_composite.scrollIntoViewIfNeeded(rootRef.value, activeItem, params.direction(), orientation.value);
+	}
+	function handleFocus(event) {
+		if (!rootRef.value || !require_composite_composite.isNativeInput(event.target)) return;
+		const target = event.target;
+		target.setSelectionRange(0, target.value.length ?? 0);
+	}
+	function handleKeydown(event) {
+		const RELEVANT_KEYS = enableHomeAndEndKeys.value ? require_composite_composite.ALL_KEYS : require_composite_composite.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 ? require_composite_composite.ARROW_LEFT : require_composite_composite.ARROW_RIGHT;
+		const forwardKey = {
+			horizontal: horizontalForwardKey,
+			vertical: require_composite_composite.ARROW_DOWN,
+			both: horizontalForwardKey
+		}[orientation.value];
+		const horizontalBackwardKey = isRtl ? require_composite_composite.ARROW_RIGHT : require_composite_composite.ARROW_LEFT;
+		const backwardKey = {
+			horizontal: horizontalBackwardKey,
+			vertical: require_composite_composite.ARROW_UP,
+			both: horizontalBackwardKey
+		}[orientation.value];
+		if (require_composite_composite.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 === require_composite_composite.ARROW_DOWN ? "bl" : event.key === require_composite_composite.ARROW_RIGHT ? "tr" : "tl"),
+				rtl: isRtl
+			})];
+		}
+		const forwardKeys = {
+			horizontal: [horizontalForwardKey],
+			vertical: [require_composite_composite.ARROW_DOWN],
+			both: [horizontalForwardKey, require_composite_composite.ARROW_DOWN]
+		}[orientation.value];
+		const backwardKeys = {
+			horizontal: [horizontalBackwardKey],
+			vertical: [require_composite_composite.ARROW_UP],
+			both: [horizontalBackwardKey, require_composite_composite.ARROW_UP]
+		}[orientation.value];
+		const preventedKeys = isGrid.value ? RELEVANT_KEYS : {
+			horizontal: enableHomeAndEndKeys.value ? require_composite_composite.HORIZONTAL_KEYS_WITH_EXTRA_KEYS : require_composite_composite.HORIZONTAL_KEYS,
+			vertical: enableHomeAndEndKeys.value ? require_composite_composite.VERTICAL_KEYS_WITH_EXTRA_KEYS : require_composite_composite.VERTICAL_KEYS,
+			both: RELEVANT_KEYS
+		}[orientation.value];
+		if (enableHomeAndEndKeys.value) {
+			if (event.key === require_composite_composite.HOME) nextIndex = minIndex;
+			else if (event.key === require_composite_composite.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 require_composite_composite.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__ */ (0, vue.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 = (0, vue.useAttrs)();
+		const direction = require_control_SliderControl.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
+		});
+		(0, vue.provide)(require_button_Button.compositeRootContextKey, (0, vue.reactive)({
+			highlightedIndex: root.highlightedIndex,
+			onHighlightedIndexChange: root.onHighlightedIndexChange,
+			highlightItemOnHover: (0, vue.computed)(() => props.highlightItemOnHover),
+			relayKeyboardEvent: root.relayKeyboardEvent
+		}));
+		const state = (0, vue.computed)(() => props.state ?? {});
+		const { tag, mergedProps, renderless, ref: renderRef } = require_button_Button.useRenderElement({
+			componentProps: props,
+			state,
+			props: (0, vue.computed)(() => root.getRootProps(attrs)),
+			stateAttributesMapping: props.stateAttributesMapping,
+			defaultTagName: "div",
+			ref: root.mergedRef
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)(CompositeList_default, {
+				"elements-ref": (0, vue.unref)(root).elementsRef,
+				onMapChange: _cache[0] || (_cache[0] = (newMap) => {
+					emit("mapChange", newMap);
+					(0, vue.unref)(root).onMapChange(newMap);
+				})
+			}, {
+				default: (0, vue.withCtx)(() => [(0, vue.unref)(renderless) ? (0, vue.renderSlot)(_ctx.$slots, "default", {
+					key: 0,
+					ref: (0, vue.unref)(renderRef),
+					props: (0, vue.unref)(mergedProps),
+					state: state.value
+				}) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)((0, vue.unref)(tag)), (0, vue.mergeProps)({
+					key: 1,
+					ref: (0, vue.unref)(renderRef)
+				}, (0, vue.unref)(mergedProps)), {
+					default: (0, vue.withCtx)(() => [(0, vue.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__ */ (0, vue.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 = (0, vue.useAttrs)();
+		const toolbarContext = require_button_ToolbarButton.useToolbarRootContext(true);
+		const disabled = (0, vue.computed)(() => (toolbarContext?.disabled.value ?? false) || props.disabled);
+		const isValueInitialized = (0, vue.computed)(() => props.value !== void 0 || props.defaultValue !== void 0);
+		const { value: groupValue, setValue: setValueState } = require_checkbox_group_CheckboxGroup.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);
+		}
+		(0, vue.provide)(toggleGroupContextKey, {
+			disabled,
+			orientation: (0, vue.computed)(() => props.orientation),
+			setGroupValue,
+			value: groupValue,
+			isValueInitialized
+		});
+		const state = (0, vue.computed)(() => ({
+			disabled: disabled.value,
+			multiple: props.multiple,
+			orientation: props.orientation
+		}));
+		const stateAttributesMapping = { multiple(value) {
+			if (value) return { [ToggleGroupDataAttributes.multiple]: "" };
+			return null;
+		} };
+		const forwardedAttrs = (0, vue.computed)(() => {
+			const { class: _class, style: _style, ...rest } = attrsObject;
+			return rest;
+		});
+		const { tag, mergedProps, renderless, ref: renderRef } = require_button_Button.useRenderElement({
+			componentProps: props,
+			state,
+			props: (0, vue.computed)(() => ({
+				"role": "group",
+				...forwardedAttrs.value,
+				"aria-orientation": props.orientation
+			})),
+			stateAttributesMapping,
+			defaultTagName: "div"
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.unref)(toolbarContext) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [(0, vue.unref)(renderless) ? (0, vue.renderSlot)(_ctx.$slots, "default", {
+				key: 0,
+				ref: (0, vue.unref)(renderRef),
+				props: (0, vue.unref)(mergedProps),
+				state: state.value
+			}) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)((0, vue.unref)(tag)), (0, vue.mergeProps)({
+				key: 1,
+				ref: (0, vue.unref)(renderRef)
+			}, (0, vue.unref)(mergedProps)), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", { state: state.value })]),
+				_: 3
+			}, 16))], 64)) : ((0, vue.openBlock)(), (0, vue.createBlock)(CompositeRoot_default, (0, vue.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), (0, vue.createSlots)({ _: 2 }, [(0, vue.unref)(renderless) ? {
+				name: "default",
+				fn: (0, vue.withCtx)(({ ref, props: compositeProps, state: compositeState }) => [(0, vue.renderSlot)(_ctx.$slots, "default", {
+					ref,
+					props: compositeProps,
+					state: compositeState
+				})]),
+				key: "0"
+			} : {
+				name: "default",
+				fn: (0, vue.withCtx)(({ state: compositeState }) => [(0, vue.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__ */ (0, vue.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 = (0, vue.useAttrs)();
+		const toolbarRootContext = require_button_ToolbarButton.useToolbarRootContext();
+		const toolbarGroupContext = require_button_ToolbarButton.useToolbarGroupContext(true);
+		const disabled = (0, vue.computed)(() => toolbarRootContext.disabled.value || (toolbarGroupContext?.disabled.value ?? false) || props.disabled);
+		const { props: focusableWhenDisabledProps } = require_button_Button.useFocusableWhenDisabled({
+			composite: true,
+			disabled,
+			focusableWhenDisabled: () => props.focusableWhenDisabled,
+			isNativeButton: false
+		});
+		const state = (0, vue.computed)(() => ({
+			disabled: disabled.value,
+			orientation: toolbarRootContext.orientation.value,
+			focusable: props.focusableWhenDisabled
+		}));
+		const allowedKeysWhenDisabled = (0, vue.computed)(() => toolbarRootContext.orientation.value === "vertical" ? new Set([require_composite_composite.ARROW_UP, require_composite_composite.ARROW_DOWN]) : new Set([require_composite_composite.ARROW_LEFT, require_composite_composite.ARROW_RIGHT]));
+		const defaultProps = (0, vue.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 (0, vue.openBlock)(), (0, vue.createBlock)(require_button_ToolbarButton.CompositeItem_default, {
+				as: __props.as,
+				class: (0, vue.normalizeClass)(props.class),
+				style: (0, vue.normalizeStyle)(props.style),
+				metadata: { focusableWhenDisabled: __props.focusableWhenDisabled },
+				state: state.value,
+				props: [
+					defaultProps.value,
+					(0, vue.unref)(attrs),
+					() => (0, vue.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__ */ (0, vue.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 = (0, vue.useAttrs)();
+		const toolbarRootContext = require_button_ToolbarButton.useToolbarRootContext();
+		const state = (0, vue.computed)(() => ({ orientation: toolbarRootContext.orientation.value }));
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)(require_button_ToolbarButton.CompositeItem_default, {
+				as: __props.as,
+				class: (0, vue.normalizeClass)(props.class),
+				style: (0, vue.normalizeStyle)(props.style),
+				metadata: TOOLBAR_LINK_METADATA,
+				state: state.value,
+				props: [(0, vue.unref)(attrs)]
+			}, {
+				default: (0, vue.withCtx)(() => [(0, vue.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__ */ (0, vue.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 = (0, vue.useAttrs)();
+		const direction = require_control_SliderControl.useDirection();
+		const itemMap = (0, vue.ref)(/* @__PURE__ */ new Map());
+		const disabledIndices = (0, vue.computed)(() => {
+			const output = [];
+			itemMap.value.forEach((itemMetadata, element) => {
+				if (itemMetadata?.index != null && !itemMetadata.focusableWhenDisabled && isElementDisabled(element)) output.push(itemMetadata.index);
+			});
+			return output;
+		});
+		const state = (0, vue.computed)(() => ({
+			disabled: props.disabled,
+			orientation: props.orientation
+		}));
+		const root = useCompositeRoot({
+			orientation: () => props.orientation,
+			loopFocus: () => props.loopFocus,
+			direction: () => direction.value,
+			disabledIndices: () => disabledIndices.value
+		});
+		(0, vue.provide)(require_button_ToolbarButton.toolbarRootContextKey, {
+			disabled: (0, vue.computed)(() => props.disabled),
+			orientation: (0, vue.computed)(() => props.orientation)
+		});
+		(0, vue.provide)(require_button_Button.compositeRootContextKey, (0, vue.reactive)({
+			highlightedIndex: root.highlightedIndex,
+			onHighlightedIndexChange: root.onHighlightedIndexChange,
+			highlightItemOnHover: (0, vue.computed)(() => false),
+			relayKeyboardEvent: root.relayKeyboardEvent
+		}));
+		const { tag, mergedProps, renderless, ref: renderRef } = require_button_Button.useRenderElement({
+			componentProps: props,
+			state,
+			props: (0, vue.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 (0, vue.openBlock)(), (0, vue.createBlock)(CompositeList_default, {
+				"elements-ref": (0, vue.unref)(root).elementsRef,
+				onMapChange: handleMapChange
+			}, {
+				default: (0, vue.withCtx)(() => [(0, vue.unref)(renderless) ? (0, vue.renderSlot)(_ctx.$slots, "default", {
+					key: 0,
+					ref: (0, vue.unref)(renderRef),
+					props: (0, vue.unref)(mergedProps),
+					state: state.value
+				}) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)((0, vue.unref)(tag)), (0, vue.mergeProps)({
+					key: 1,
+					ref: (0, vue.unref)(renderRef)
+				}, (0, vue.unref)(mergedProps)), {
+					default: (0, vue.withCtx)(() => [(0, vue.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__ */ (0, vue.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 = (0, vue.useAttrs)();
+		const toolbarRootContext = require_button_ToolbarButton.useToolbarRootContext();
+		const orientation = (0, vue.computed)(() => props.orientation ?? (toolbarRootContext.orientation.value === "vertical" ? "horizontal" : "vertical"));
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)(Separator_default, (0, vue.mergeProps)({
+				as: props.as,
+				class: props.class,
+				style: props.style,
+				orientation: orientation.value
+			}, (0, vue.unref)(attrs)), {
+				default: (0, vue.withCtx)((slotProps) => [(0, vue.renderSlot)(_ctx.$slots, "default", (0, vue.normalizeProps)((0, vue.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
+/**
+* Renders a Base UI element.
+*
+* The public composable that collects `attrs` internally via `useAttrs()`,
+* merges them with explicit props, and delegates to `useRenderElement`.
+* Returns a readonly state and supports renderless mode via the `Slot` sentinel.
+*
+* @public
+*/
+function useRender(params) {
+	const attrs = (0, vue.useAttrs)();
+	const state = (0, vue.computed)(() => {
+		return (0, vue.readonly)((0, vue.toValue)(params.state) ?? require_button_Button.EMPTY_OBJECT);
+	});
+	const mergedComponentProps = require_button_Button.useRenderElement({
+		componentProps: params,
+		state,
+		props: (0, vue.computed)(() => require_button_Button.mergeProps(attrs, (0, vue.toValue)(params.props))),
+		stateAttributesMapping: params.stateAttributesMapping,
+		defaultTagName: params.defaultTagName,
+		ref: params.ref
+	});
+	return {
+		tag: mergedComponentProps.tag,
+		renderProps: mergedComponentProps.mergedProps,
+		renderless: mergedComponentProps.renderless,
+		state,
+		ref: mergedComponentProps.ref
+	};
+}
+
+//#endregion
+//#region src/index.ts
+const name = "base-ui-vue";
+const version = "0.0.0";
+
+//#endregion
+Object.defineProperty(exports, 'AccordionItem_default', {
+  enumerable: true,
+  get: function () {
+    return AccordionItem_default;
+  }
+});
+Object.defineProperty(exports, 'AccordionPanel_default', {
+  enumerable: true,
+  get: function () {
+    return AccordionPanel_default;
+  }
+});
+Object.defineProperty(exports, 'AccordionRoot_default', {
+  enumerable: true,
+  get: function () {
+    return AccordionRoot_default;
+  }
 });
 Object.defineProperty(exports, 'AccordionTrigger_default', {
   enumerable: true,
@@ -2698,22 +5793,190 @@ Object.defineProperty(exports, 'FieldsetRoot_default', {
     return FieldsetRoot_default;
   }
 });
-Object.defineProperty(exports, 'accordionRootContextKey', {
+Object.defineProperty(exports, 'SeparatorDataAttributes', {
   enumerable: true,
   get: function () {
-    return accordionRootContextKey;
+    return SeparatorDataAttributes;
   }
 });
-Object.defineProperty(exports, 'collapsibleRootContextKey', {
+Object.defineProperty(exports, 'Separator_default', {
   enumerable: true,
   get: function () {
-    return collapsibleRootContextKey;
+    return Separator_default;
+  }
+});
+Object.defineProperty(exports, 'SliderIndicatorDataAttributes', {
+  enumerable: true,
+  get: function () {
+    return SliderIndicatorDataAttributes;
+  }
+});
+Object.defineProperty(exports, 'SliderIndicator_default', {
+  enumerable: true,
+  get: function () {
+    return SliderIndicator_default;
   }
 });
-Object.defineProperty(exports, 'fieldItemContextKey', {
+Object.defineProperty(exports, 'SliderLabel_default', {
   enumerable: true,
   get: function () {
-    return fieldItemContextKey;
+    return SliderLabel_default;
+  }
+});
+Object.defineProperty(exports, 'SliderRootDataAttributes', {
+  enumerable: true,
+  get: function () {
+    return SliderRootDataAttributes;
+  }
+});
+Object.defineProperty(exports, 'SliderRoot_default', {
+  enumerable: true,
+  get: function () {
+    return SliderRoot_default;
+  }
+});
+Object.defineProperty(exports, 'SliderThumbDataAttributes', {
+  enumerable: true,
+  get: function () {
+    return SliderThumbDataAttributes;
+  }
+});
+Object.defineProperty(exports, 'SliderThumb_default', {
+  enumerable: true,
+  get: function () {
+    return SliderThumb_default;
+  }
+});
+Object.defineProperty(exports, 'SliderTrackDataAttributes', {
+  enumerable: true,
+  get: function () {
+    return SliderTrackDataAttributes;
+  }
+});
+Object.defineProperty(exports, 'SliderTrack_default', {
+  enumerable: true,
+  get: function () {
+    return SliderTrack_default;
+  }
+});
+Object.defineProperty(exports, 'SliderValueDataAttributes', {
+  enumerable: true,
+  get: function () {
+    return SliderValueDataAttributes;
+  }
+});
+Object.defineProperty(exports, 'SliderValue_default', {
+  enumerable: true,
+  get: function () {
+    return SliderValue_default;
+  }
+});
+Object.defineProperty(exports, 'SwitchRootDataAttributes', {
+  enumerable: true,
+  get: function () {
+    return SwitchRootDataAttributes;
+  }
+});
+Object.defineProperty(exports, 'SwitchRoot_default', {
+  enumerable: true,
+  get: function () {
+    return SwitchRoot_default;
+  }
+});
+Object.defineProperty(exports, 'SwitchThumbDataAttributes', {
+  enumerable: true,
+  get: function () {
+    return SwitchThumbDataAttributes;
+  }
+});
+Object.defineProperty(exports, 'SwitchThumb_default', {
+  enumerable: true,
+  get: function () {
+    return SwitchThumb_default;
+  }
+});
+Object.defineProperty(exports, 'ToggleDataAttributes', {
+  enumerable: true,
+  get: function () {
+    return ToggleDataAttributes;
+  }
+});
+Object.defineProperty(exports, 'ToggleGroupDataAttributes', {
+  enumerable: true,
+  get: function () {
+    return ToggleGroupDataAttributes;
+  }
+});
+Object.defineProperty(exports, 'ToggleGroup_default', {
+  enumerable: true,
+  get: function () {
+    return ToggleGroup_default;
+  }
+});
+Object.defineProperty(exports, 'Toggle_default', {
+  enumerable: true,
+  get: function () {
+    return Toggle_default;
+  }
+});
+Object.defineProperty(exports, 'ToolbarInputDataAttributes', {
+  enumerable: true,
+  get: function () {
+    return ToolbarInputDataAttributes;
+  }
+});
+Object.defineProperty(exports, 'ToolbarInput_default', {
+  enumerable: true,
+  get: function () {
+    return ToolbarInput_default;
+  }
+});
+Object.defineProperty(exports, 'ToolbarLinkDataAttributes', {
+  enumerable: true,
+  get: function () {
+    return ToolbarLinkDataAttributes;
+  }
+});
+Object.defineProperty(exports, 'ToolbarLink_default', {
+  enumerable: true,
+  get: function () {
+    return ToolbarLink_default;
+  }
+});
+Object.defineProperty(exports, 'ToolbarRootDataAttributes', {
+  enumerable: true,
+  get: function () {
+    return ToolbarRootDataAttributes;
+  }
+});
+Object.defineProperty(exports, 'ToolbarRoot_default', {
+  enumerable: true,
+  get: function () {
+    return ToolbarRoot_default;
+  }
+});
+Object.defineProperty(exports, 'ToolbarSeparatorDataAttributes', {
+  enumerable: true,
+  get: function () {
+    return ToolbarSeparatorDataAttributes;
+  }
+});
+Object.defineProperty(exports, 'ToolbarSeparator_default', {
+  enumerable: true,
+  get: function () {
+    return ToolbarSeparator_default;
+  }
+});
+Object.defineProperty(exports, 'accordionRootContextKey', {
+  enumerable: true,
+  get: function () {
+    return accordionRootContextKey;
+  }
+});
+Object.defineProperty(exports, 'collapsibleRootContextKey', {
+  enumerable: true,
+  get: function () {
+    return collapsibleRootContextKey;
   }
 });
 Object.defineProperty(exports, 'fieldsetRootContextKey', {
@@ -2728,22 +5991,28 @@ Object.defineProperty(exports, 'name', {
     return name;
   }
 });
-Object.defineProperty(exports, 'useAccordionRootContext', {
+Object.defineProperty(exports, 'switchRootContextKey', {
   enumerable: true,
   get: function () {
-    return useAccordionRootContext;
+    return switchRootContextKey;
   }
 });
-Object.defineProperty(exports, 'useCollapsibleRootContext', {
+Object.defineProperty(exports, 'toggleGroupContextKey', {
   enumerable: true,
   get: function () {
-    return useCollapsibleRootContext;
+    return toggleGroupContextKey;
   }
 });
-Object.defineProperty(exports, 'useFieldItemContext', {
+Object.defineProperty(exports, 'useAccordionRootContext', {
+  enumerable: true,
+  get: function () {
+    return useAccordionRootContext;
+  }
+});
+Object.defineProperty(exports, 'useCollapsibleRootContext', {
   enumerable: true,
   get: function () {
-    return useFieldItemContext;
+    return useCollapsibleRootContext;
   }
 });
 Object.defineProperty(exports, 'useFieldsetRootContext', {
@@ -2758,6 +6027,18 @@ Object.defineProperty(exports, 'useRender', {
     return useRender;
   }
 });
+Object.defineProperty(exports, 'useSwitchRootContext', {
+  enumerable: true,
+  get: function () {
+    return useSwitchRootContext;
+  }
+});
+Object.defineProperty(exports, 'useToggleGroupContext', {
+  enumerable: true,
+  get: function () {
+    return useToggleGroupContext;
+  }
+});
 Object.defineProperty(exports, 'version', {
   enumerable: true,
   get: function () {