base-ui-vue 0.2.0 → 0.3.0

package/dist/index2.js

@@ -7,7 +7,8 @@ import { activeElement, clamp, contains, getMidpoint, getTarget, ownerDocument,
 import { ALL_KEYS, ARROW_DOWN as ARROW_DOWN$1, ARROW_KEYS, ARROW_LEFT as ARROW_LEFT$1, ARROW_RIGHT as ARROW_RIGHT$1, ARROW_UP as ARROW_UP$1, COMPOSITE_KEYS, END, HOME, HORIZONTAL_KEYS, HORIZONTAL_KEYS_WITH_EXTRA_KEYS, MODIFIER_KEYS, PAGE_DOWN, PAGE_UP, VERTICAL_KEYS, VERTICAL_KEYS_WITH_EXTRA_KEYS, isNativeInput, scrollIntoViewIfNeeded } from "./composite/composite.js";
 import { AvatarRootContextKey, avatarStateAttributesMapping, useTimeout } from "./fallback/AvatarFallback.js";
 import { useCSPContext } from "./csp-provider/CSPContext.js";
-import { useLabelableId } from "./control/FieldControl.js";
+import { FieldControl_default, useLabelableId } from "./control/FieldControl.js";
+import { scrollAreaRootContextKey, scrollAreaStateAttributesMapping, scrollAreaViewportContextKey, useScrollAreaRootContext } from "./content/ScrollAreaContent.js";
 import { ACTIVE_COMPOSITE_ITEM } from "./composite/constants.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, defineComponent, getCurrentInstance, guardReactiveProps, inject, mergeProps, normalizeClass, normalizeProps, normalizeStyle, onBeforeUnmount, onMounted, onUnmounted, openBlock, provide, reactive, readonly, ref, renderSlot, resolveDynamicComponent, shallowReadonly, shallowRef, toDisplayString, toValue, unref, useAttrs, watch, watchEffect, watchSyncEffect, withCtx } from "vue";
 import { isHTMLElement } from "@floating-ui/utils/dom";
@@ -2695,27 +2696,82 @@ var FieldsetRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 var FieldsetRoot_default = FieldsetRoot_vue_vue_type_script_setup_true_lang_default;
 
 //#endregion
-//#region src/separator/Separator.vue?vue&type=script&setup=true&lang.ts
+//#region src/input/Input.vue?vue&type=script&setup=true&lang.ts
 /**
-* A separator element accessible to screen readers.
-* Renders a `<div>` element.
+* A native input element that automatically works with
+* [Field](https://baseui-vue.com/docs/components/field).
+* Renders an `<input>` element.
 *
-* Documentation: [Base UI Vue Separator](https://baseui-vue.com/docs/components/separator)
+* Documentation: [Base UI Vue Input](https://baseui-vue.com/docs/components/input)
 */
-var Separator_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
-	name: "Separator",
+var Input_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "BaseUIInput",
 	inheritAttrs: false,
-	__name: "Separator",
+	__name: "Input",
 	props: {
-		orientation: {
+		id: {
 			type: String,
-			required: false,
-			default: "horizontal"
+			required: false
+		},
+		name: {
+			type: String,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		value: {
+			type: String,
+			required: false
+		},
+		defaultValue: {
+			type: String,
+			required: false
+		},
+		autofocus: {
+			type: Boolean,
+			required: false
+		},
+		type: {
+			type: String,
+			required: false
+		},
+		required: {
+			type: Boolean,
+			required: false
+		},
+		pattern: {
+			type: String,
+			required: false
+		},
+		minlength: {
+			type: Number,
+			required: false
+		},
+		maxlength: {
+			type: Number,
+			required: false
+		},
+		min: {
+			type: [String, Number],
+			required: false
+		},
+		max: {
+			type: [String, Number],
+			required: false
+		},
+		step: {
+			type: [String, Number],
+			required: false
+		},
+		placeholder: {
+			type: String,
+			required: false
 		},
 		as: {
 			type: null,
-			required: false,
-			default: "div"
+			required: false
 		},
 		class: {
 			type: Function,
@@ -2735,50 +2791,59 @@ var Separator_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 			skipCheck: true
 		}
 	},
+	emits: ["valueChange"],
 	setup(__props) {
 		const props = __props;
 		const attrs = useAttrs();
-		const state = computed(() => ({ orientation: props.orientation }));
-		const { tag, mergedProps, renderless, ref: renderRef } = useRenderElement({
-			componentProps: props,
-			state,
-			props: computed(() => ({
-				...attrs,
-				"role": "separator",
-				"aria-orientation": props.orientation
-			})),
-			defaultTagName: "div"
-		});
 		return (_ctx, _cache) => {
-			return unref(renderless) ? renderSlot(_ctx.$slots, "default", {
-				key: 0,
-				ref: unref(renderRef),
-				props: unref(mergedProps),
-				state: state.value
-			}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), mergeProps({
-				key: 1,
-				ref: unref(renderRef)
-			}, unref(mergedProps)), {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default", { state: state.value })]),
-				_: 3
-			}, 16));
+			return openBlock(), createBlock(FieldControl_default, mergeProps({
+				...props,
+				...unref(attrs)
+			}, { onValueChange: _cache[0] || (_cache[0] = (v, e) => _ctx.$emit("valueChange", v, e)) }), createSlots({ _: 2 }, [_ctx.$slots.default ? {
+				name: "default",
+				fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps)))]),
+				key: "0"
+			} : void 0]), 1040);
 		};
 	}
 });
 
 //#endregion
-//#region src/separator/Separator.vue
-var Separator_default = Separator_vue_vue_type_script_setup_true_lang_default;
+//#region src/input/Input.vue
+var Input_default = Input_vue_vue_type_script_setup_true_lang_default;
 
 //#endregion
-//#region src/separator/SeparatorDataAttributes.ts
-let SeparatorDataAttributes = /* @__PURE__ */ function(SeparatorDataAttributes) {
+//#region src/input/InputDataAttributes.ts
+let InputDataAttributes = /* @__PURE__ */ function(InputDataAttributes) {
 	/**
-	* Indicates the orientation of the separator.
-	* @type {'horizontal' | 'vertical'}
+	* Present when the input is disabled.
 	*/
-	SeparatorDataAttributes["orientation"] = "data-orientation";
-	return SeparatorDataAttributes;
+	InputDataAttributes["disabled"] = "data-disabled";
+	/**
+	* Present when the input is in a valid state (when wrapped in FieldRoot).
+	*/
+	InputDataAttributes["valid"] = "data-valid";
+	/**
+	* Present when the input is in an invalid state (when wrapped in FieldRoot).
+	*/
+	InputDataAttributes["invalid"] = "data-invalid";
+	/**
+	* Present when the input has been touched (when wrapped in FieldRoot).
+	*/
+	InputDataAttributes["touched"] = "data-touched";
+	/**
+	* Present when the input's value has changed (when wrapped in FieldRoot).
+	*/
+	InputDataAttributes["dirty"] = "data-dirty";
+	/**
+	* Present when the input is filled (when wrapped in FieldRoot).
+	*/
+	InputDataAttributes["filled"] = "data-filled";
+	/**
+	* Present when the input is focused (when wrapped in FieldRoot).
+	*/
+	InputDataAttributes["focused"] = "data-focused";
+	return InputDataAttributes;
 }({});
 
 //#endregion
@@ -2789,17 +2854,26 @@ function valueToPercent(value, min, max) {
 }
 
 //#endregion
-//#region src/slider/indicator/SliderIndicator.vue?vue&type=script&setup=true&lang.ts
+//#region src/meter/root/MeterRootContext.ts
+const meterRootContextKey = Symbol("MeterRootContext");
+function useMeterRootContext(optional = false) {
+	const context = inject(meterRootContextKey, void 0);
+	if (!context && !optional) throw new Error("Base UI Vue: MeterRootContext is missing. Meter parts must be placed within <MeterRoot>.");
+	return context;
+}
+
+//#endregion
+//#region src/meter/indicator/MeterIndicator.vue?vue&type=script&setup=true&lang.ts
 /**
-* Visualizes the current value of the slider.
+* Visualizes the position of the value along the range.
 * Renders a `<div>` element.
 *
-* Documentation: [Base UI Vue Slider](https://baseui-vue.com/docs/components/slider)
+* Documentation: [Base UI Vue Meter](https://baseui-vue.com/docs/components/meter)
 */
-var SliderIndicator_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
-	name: "SliderIndicator",
+var MeterIndicator_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "MeterIndicator",
 	inheritAttrs: false,
-	__name: "SliderIndicator",
+	__name: "MeterIndicator",
 	props: {
 		as: {
 			type: null,
@@ -2826,74 +2900,27 @@ var SliderIndicator_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 	},
 	setup(__props) {
 		const props = __props;
-		function getInsetStyles(vertical, range, start, end, renderBeforeHydration, mounted) {
-			const visibility = start === void 0 || range && end === void 0 ? "hidden" : void 0;
-			const startEdge = vertical ? "bottom" : "insetInlineStart";
-			const mainSide = vertical ? "height" : "width";
-			const styles = {
-				visibility: renderBeforeHydration && !mounted ? "hidden" : visibility,
-				position: vertical ? "absolute" : "relative",
-				[vertical ? "width" : "height"]: "inherit"
-			};
-			styles["--start-position"] = `${start ?? 0}%`;
-			if (!range) {
-				styles[startEdge] = 0;
-				styles[mainSide] = "var(--start-position)";
-				return styles;
-			}
-			styles["--relative-size"] = `${(end ?? 0) - (start ?? 0)}%`;
-			styles[startEdge] = "var(--start-position)";
-			styles[mainSide] = "var(--relative-size)";
-			return styles;
-		}
-		function getCenteredStyles(vertical, range, start, end) {
-			const startEdge = vertical ? "bottom" : "insetInlineStart";
-			const mainSide = vertical ? "height" : "width";
-			const styles = {
-				position: vertical ? "absolute" : "relative",
-				[vertical ? "width" : "height"]: "inherit"
-			};
-			if (!range) {
-				styles[startEdge] = 0;
-				styles[mainSide] = `${start}%`;
-				return styles;
-			}
-			styles[startEdge] = `${start}%`;
-			styles[mainSide] = `${end - start}%`;
-			return styles;
-		}
 		const attrs = useAttrs();
-		const rootContext = useSliderRootContext();
-		const isMounted = ref(false);
-		onMounted(() => {
-			isMounted.value = true;
-		});
-		const vertical = computed(() => rootContext.orientation.value === "vertical");
-		const range = computed(() => rootContext.values.value.length > 1);
-		const style = computed(() => rootContext.inset.value ? getInsetStyles(vertical.value, range.value, rootContext.indicatorPosition.value[0], rootContext.indicatorPosition.value[1], rootContext.renderBeforeHydration.value, isMounted.value) : getCenteredStyles(vertical.value, range.value, valueToPercent(rootContext.values.value[0], rootContext.min.value, rootContext.max.value), valueToPercent(rootContext.values.value[rootContext.values.value.length - 1], rootContext.min.value, rootContext.max.value)));
-		const indicatorProps = computed(() => mergeProps$1(attrs, {
-			"data-base-ui-slider-indicator": rootContext.renderBeforeHydration.value ? "" : void 0,
-			"style": style.value,
-			"suppressHydrationWarning": rootContext.renderBeforeHydration.value || void 0
-		}));
-		const { tag, mergedProps, renderless, ref: renderRef } = useRenderElement({
+		const rootContext = useMeterRootContext();
+		const percentageWidth = computed(() => valueToPercent(rootContext.value.value, rootContext.min.value, rootContext.max.value));
+		const state = computed(() => ({}));
+		const { tag, mergedProps, renderless } = useRenderElement({
 			componentProps: props,
-			state: rootContext.state,
-			props: indicatorProps,
-			defaultTagName: "div",
-			stateAttributesMapping: sliderStateAttributesMapping
+			state,
+			props: computed(() => mergeProps$1({ style: {
+				insetInlineStart: 0,
+				height: "inherit",
+				width: `${percentageWidth.value}%`
+			} }, attrs)),
+			defaultTagName: "div"
 		});
 		return (_ctx, _cache) => {
 			return unref(renderless) ? renderSlot(_ctx.$slots, "default", {
 				key: 0,
-				ref: unref(renderRef),
 				props: unref(mergedProps),
-				state: unref(rootContext).state
-			}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), mergeProps({
-				key: 1,
-				ref: unref(renderRef)
-			}, unref(mergedProps)), {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				state: state.value
+			}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), normalizeProps(mergeProps({ key: 1 }, unref(mergedProps))), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", { state: state.value })]),
 				_: 3
 			}, 16));
 		};
@@ -2901,65 +2928,30 @@ var SliderIndicator_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 });
 
 //#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;
-}({});
+//#region src/meter/indicator/MeterIndicator.vue
+var MeterIndicator_default = MeterIndicator_vue_vue_type_script_setup_true_lang_default;
 
 //#endregion
-//#region src/slider/label/SliderLabel.vue?vue&type=script&setup=true&lang.ts
+//#region src/meter/label/MeterLabel.vue?vue&type=script&setup=true&lang.ts
 /**
-* An accessible label that is automatically associated with the slider thumbs.
-* Renders a `<div>` element.
+* An accessible label for the meter.
+* Renders a `<span>` element.
 *
-* Documentation: [Base UI Vue Slider](https://baseui-vue.com/docs/components/slider)
+* Documentation: [Base UI Vue Meter](https://baseui-vue.com/docs/components/meter)
 */
-var SliderLabel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
-	name: "SliderLabel",
+var MeterLabel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "MeterLabel",
 	inheritAttrs: false,
-	__name: "SliderLabel",
+	__name: "MeterLabel",
 	props: {
+		id: {
+			type: String,
+			required: false
+		},
 		as: {
 			type: null,
 			required: false,
-			default: "div"
+			default: "span"
 		},
 		class: {
 			type: Function,
@@ -2982,43 +2974,26 @@ var SliderLabel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 	setup(__props) {
 		const props = __props;
 		const attrs = useAttrs();
-		const rootContext = useSliderRootContext();
-		const label = useLabel({
-			id: computed(() => rootContext.rootLabelId.value),
-			fallbackControlId: computed(() => rootContext.controlRef.value?.id),
-			setLabelId: rootContext.setLabelId,
-			focusControl(_event, controlId) {
-				if (controlId) {
-					const controlElement = rootContext.controlRef.value ? ownerDocument(rootContext.controlRef.value)?.getElementById(controlId) : null;
-					if (isHTMLElement(controlElement)) {
-						focusElementWithVisible(controlElement);
-						return;
-					}
-				}
-				const fallbackInputs = rootContext.controlRef.value?.querySelectorAll("input[type=\"range\"]");
-				const fallbackInput = fallbackInputs?.length === 1 ? fallbackInputs[0] : null;
-				if (isHTMLElement(fallbackInput)) focusElementWithVisible(fallbackInput);
-			}
-		});
-		const labelProps = computed(() => mergeProps$1(attrs, label.props.value));
-		const { tag, mergedProps, renderless, ref: renderRef } = useRenderElement({
+		const { setLabelId } = useMeterRootContext();
+		const id = useRegisteredLabelId(() => props.id, setLabelId);
+		const state = computed(() => ({}));
+		const { tag, mergedProps, renderless } = useRenderElement({
 			componentProps: props,
-			state: rootContext.state,
-			props: labelProps,
-			defaultTagName: "div",
-			stateAttributesMapping: sliderStateAttributesMapping
+			state,
+			props: computed(() => ({
+				...attrs,
+				id: id.value,
+				role: "presentation"
+			})),
+			defaultTagName: "span"
 		});
 		return (_ctx, _cache) => {
 			return unref(renderless) ? renderSlot(_ctx.$slots, "default", {
 				key: 0,
-				ref: unref(renderRef),
 				props: unref(mergedProps),
-				state: unref(rootContext).state
-			}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), mergeProps({
-				key: 1,
-				ref: unref(renderRef)
-			}, unref(mergedProps)), {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				state: state.value
+			}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), normalizeProps(mergeProps({ key: 1 }, unref(mergedProps))), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", { state: state.value })]),
 				_: 3
 			}, 16));
 		};
@@ -3026,74 +3001,54 @@ var SliderLabel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 });
 
 //#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;
-}
+//#region src/meter/label/MeterLabel.vue
+var MeterLabel_default = MeterLabel_vue_vue_type_script_setup_true_lang_default;
 
 //#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);
+//#region src/utils/formatNumber.ts
+function formatNumber(value, locale, options) {
+	return new Intl.NumberFormat(locale, options).format(value);
 }
-
-//#endregion
-//#region src/slider/utils/getSliderValue.ts
-function getSliderValue(valueInput, index, min, max, range, values) {
-	let newValue = valueInput;
-	newValue = clamp(newValue, min, max);
-	if (range) newValue = replaceArrayItemAtIndex(values, index, clamp(newValue, values[index - 1] ?? -Infinity, values[index + 1] ?? Infinity));
-	return newValue;
+/**
+* Formats a numeric value for display inside Base UI Vue components.
+*
+* When no `format` is provided, the value is interpreted as a percentage
+* in the 0-100 range (matching React's Base UI semantics for
+* `<Meter.Root>` / `<Progress.Root>`).
+*
+* Returns an empty string when the value is `null`.
+*/
+function formatNumberValue(value, locale, format) {
+	if (value == null) return "";
+	if (!format) return formatNumber(value / 100, locale, { style: "percent" });
+	return formatNumber(value, locale, format);
 }
 
 //#endregion
-//#region src/slider/root/SliderRoot.vue?vue&type=script&setup=true&lang.ts
+//#region src/meter/root/MeterRoot.vue?vue&type=script&setup=true&lang.ts
 /**
-* Groups all parts of the slider.
+* Groups all parts of the meter and provides the value for screen readers.
 * Renders a `<div>` element.
 *
-* Documentation: [Base UI Vue Slider](https://baseui-vue.com/docs/components/slider)
+* Documentation: [Base UI Vue Meter](https://baseui-vue.com/docs/components/meter)
 */
-var SliderRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
-	name: "SliderRoot",
+var MeterRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "MeterRoot",
 	inheritAttrs: false,
-	__name: "SliderRoot",
+	__name: "MeterRoot",
 	props: {
-		defaultValue: {
-			type: null,
+		ariaValuetext: {
+			type: String,
 			required: false
 		},
-		disabled: {
-			type: Boolean,
-			required: false,
-			default: false
-		},
 		format: {
 			type: null,
 			required: false
 		},
+		getAriaValueText: {
+			type: Function,
+			required: false
+		},
 		locale: {
 			type: null,
 			required: false
@@ -3108,60 +3063,173 @@ var SliderRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 			required: false,
 			default: 0
 		},
-		minStepsBetweenValues: {
+		value: {
 			type: Number,
-			required: false,
-			default: 0
-		},
-		name: {
-			type: String,
-			required: false
-		},
-		form: {
-			type: String,
-			required: false
+			required: true
 		},
-		orientation: {
-			type: String,
+		as: {
+			type: null,
 			required: false,
-			default: "horizontal"
+			default: "div"
 		},
-		step: {
-			type: Number,
+		class: {
+			type: Function,
 			required: false,
-			default: 1
+			skipCheck: true
 		},
-		largeStep: {
-			type: Number,
+		style: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
 			required: false,
-			default: 10
-		},
-		thumbAlignment: {
-			type: String,
+			skipCheck: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const attrs = useAttrs();
+		const labelId = ref(void 0);
+		const formattedValue = computed(() => formatNumberValue(props.value, props.locale, props.format));
+		const ariaValueText = computed(() => {
+			if (props.ariaValuetext !== void 0) return props.ariaValuetext;
+			if (props.getAriaValueText) return props.getAriaValueText(formattedValue.value, props.value);
+			if (props.format) return formattedValue.value;
+			return `${props.value}%`;
+		});
+		provide(meterRootContextKey, {
+			formattedValue,
+			max: computed(() => props.max),
+			min: computed(() => props.min),
+			value: computed(() => props.value),
+			setLabelId(id) {
+				labelId.value = id;
+			}
+		});
+		const state = computed(() => ({}));
+		const { tag, mergedProps, renderless } = useRenderElement({
+			componentProps: props,
+			state,
+			props: computed(() => ({
+				"role": "meter",
+				"aria-labelledby": labelId.value,
+				"aria-valuemax": props.max,
+				"aria-valuemin": props.min,
+				"aria-valuenow": props.value,
+				"aria-valuetext": ariaValueText.value,
+				...attrs
+			})),
+			defaultTagName: "div"
+		});
+		const visuallyHiddenStyle = visuallyHidden;
+		return (_ctx, _cache) => {
+			return unref(renderless) ? renderSlot(_ctx.$slots, "default", {
+				key: 0,
+				props: unref(mergedProps),
+				state: state.value
+			}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), normalizeProps(mergeProps({ key: 1 }, unref(mergedProps))), {
+				default: withCtx(() => [
+					renderSlot(_ctx.$slots, "default", { state: state.value }),
+					createCommentVNode(" Force NVDA to read the label https://github.com/mui/base-ui/issues/4184 "),
+					createElementVNode("span", {
+						role: "presentation",
+						style: normalizeStyle(unref(visuallyHiddenStyle))
+					}, "x", 4)
+				]),
+				_: 3
+			}, 16));
+		};
+	}
+});
+
+//#endregion
+//#region src/meter/root/MeterRoot.vue
+var MeterRoot_default = MeterRoot_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/meter/track/MeterTrack.vue?vue&type=script&setup=true&lang.ts
+/**
+* Contains the meter indicator and represents the entire range of the meter.
+* Renders a `<div>` element.
+*
+* Documentation: [Base UI Vue Meter](https://baseui-vue.com/docs/components/meter)
+*/
+var MeterTrack_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "MeterTrack",
+	inheritAttrs: false,
+	__name: "MeterTrack",
+	props: {
+		as: {
+			type: null,
 			required: false,
-			default: "center"
+			default: "div"
 		},
-		thumbCollisionBehavior: {
-			type: String,
+		class: {
+			type: Function,
 			required: false,
-			default: "push"
-		},
-		value: {
-			type: null,
-			required: false
-		},
-		id: {
-			type: String,
-			required: false
-		},
-		ariaLabelledby: {
-			type: String,
-			required: false
+			skipCheck: true
 		},
+		style: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const attrs = useAttrs();
+		const state = computed(() => ({}));
+		const { tag, mergedProps, renderless } = useRenderElement({
+			componentProps: props,
+			state,
+			props: computed(() => ({ ...attrs })),
+			defaultTagName: "div"
+		});
+		return (_ctx, _cache) => {
+			return unref(renderless) ? renderSlot(_ctx.$slots, "default", {
+				key: 0,
+				props: unref(mergedProps),
+				state: state.value
+			}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), normalizeProps(mergeProps({ key: 1 }, unref(mergedProps))), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", { state: state.value })]),
+				_: 3
+			}, 16));
+		};
+	}
+});
+
+//#endregion
+//#region src/meter/track/MeterTrack.vue
+var MeterTrack_default = MeterTrack_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/meter/value/MeterValue.vue?vue&type=script&setup=true&lang.ts
+/**
+* A text element displaying the current value.
+* Renders a `<span>` element.
+*
+* Documentation: [Base UI Vue Meter](https://baseui-vue.com/docs/components/meter)
+*/
+var MeterValue_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "MeterValue",
+	inheritAttrs: false,
+	__name: "MeterValue",
+	props: {
 		as: {
 			type: null,
 			required: false,
-			default: "div"
+			default: "span"
 		},
 		class: {
 			type: Function,
@@ -3181,371 +3249,275 @@ var SliderRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 			skipCheck: true
 		}
 	},
-	emits: ["valueChange", "valueCommitted"],
-	setup(__props, { emit: __emit }) {
+	setup(__props) {
 		const props = __props;
-		const emit = __emit;
 		const attrs = useAttrs();
-		const attrsObject = attrs;
-		const explicitAriaLabelledBy = computed(() => props.ariaLabelledby ?? attrs["aria-labelledby"]);
-		const id = useBaseUiId(props.id);
-		const idRef = computed(() => id);
-		const defaultLabelId = computed(() => getDefaultLabelId(id));
-		const { clearErrors } = useFormContext();
-		const { state: fieldState, disabled: fieldDisabled, name: fieldName, setTouched, setDirty, validation, validityData, shouldValidateOnChange } = useFieldRootContext();
-		const { labelId: fieldLabelId } = useLabelableContext();
-		const localLabelId = ref(void 0);
-		const ariaLabelledBy = computed(() => explicitAriaLabelledBy.value ?? resolveAriaLabelledBy(fieldLabelId.value, localLabelId.value));
-		const disabled = computed(() => fieldDisabled.value || props.disabled);
-		const name = computed(() => fieldName.value ?? props.name);
-		const controllableValue = useControllableState({
-			controlled: () => props.value,
-			default: () => props.defaultValue ?? props.min,
-			name: "Slider",
-			state: "value"
-		});
-		const valueUnwrapped = controllableValue.value;
-		const setValueUnwrapped = controllableValue.setValue;
-		const sliderRef = ref(null);
-		const controlRef = ref(null);
-		const thumbRefs = ref([]);
-		const pressedInputRef = ref(null);
-		const pressedThumbCenterOffsetRef = ref(null);
-		const pressedThumbIndexRef = ref(-1);
-		const pressedValuesRef = ref(null);
-		const lastChangedValueRef = ref(null);
-		const lastChangeReasonRef = ref(REASONS.none);
-		const formatOptionsRef = computed(() => props.format);
-		const active = ref(-1);
-		const lastUsedThumbIndex = ref(-1);
-		const dragging = ref(false);
-		const thumbMap = shallowRef(/* @__PURE__ */ new Map());
-		const indicatorPosition = ref([void 0, void 0]);
-		function setActive(value) {
-			active.value = value;
-			if (value !== -1) lastUsedThumbIndex.value = value;
-		}
-		function registerFieldControlRef(element) {
-			if (element) controlRef.value = element;
-		}
-		function setThumbMap(nextMap) {
-			thumbMap.value = nextMap;
-		}
-		const compositeListProps = {
-			elementsRef: thumbRefs,
-			onMapChange: setThumbMap
-		};
-		const range = computed(() => Array.isArray(valueUnwrapped.value));
-		const values = computed(() => {
-			if (!range.value) return [clamp(valueUnwrapped.value, props.min, props.max)];
-			return [...valueUnwrapped.value].sort(asc);
-		});
-		useField({
-			id: idRef,
-			commit: (value) => validation.commit(value),
-			value: computed(() => valueUnwrapped.value),
-			controlRef,
-			name,
-			getValue: () => valueUnwrapped.value
-		});
-		watch(() => valueUnwrapped.value, () => {
-			clearErrors(name.value);
-			if (shouldValidateOnChange()) validation.commit(valueUnwrapped.value);
-			else validation.commit(valueUnwrapped.value, true);
-			const initialValue = validityData.value.initialValue;
-			let isDirty;
-			if (Array.isArray(valueUnwrapped.value) && Array.isArray(initialValue)) isDirty = !areArraysEqual(valueUnwrapped.value, initialValue);
-			else isDirty = valueUnwrapped.value !== initialValue;
-			setDirty(isDirty);
-		});
-		function areValuesEqual(newValue, oldValue) {
-			if (typeof newValue === "number" && typeof oldValue === "number") return newValue === oldValue;
-			if (Array.isArray(newValue) && Array.isArray(oldValue)) return areArraysEqual(newValue, oldValue);
-			return false;
-		}
-		function setValue(newValue, details) {
-			if (Number.isNaN(newValue) || areValuesEqual(newValue, valueUnwrapped.value)) return;
-			const changeDetails = details ?? createChangeEventDetails(REASONS.none, void 0, void 0, { activeThumbIndex: -1 });
-			lastChangeReasonRef.value = changeDetails.reason;
-			const nativeEvent = changeDetails.event;
-			const clonedEvent = new (nativeEvent.constructor ?? Event)(nativeEvent.type, nativeEvent);
-			Object.defineProperty(clonedEvent, "target", {
-				writable: true,
-				value: {
-					value: newValue,
-					name: name.value
-				}
-			});
-			changeDetails.event = clonedEvent;
-			lastChangedValueRef.value = newValue;
-			emit("valueChange", newValue, changeDetails);
-			if (changeDetails.isCanceled) return;
-			setValueUnwrapped(newValue);
-		}
-		function getSliderChangeEventReason(event) {
-			return event instanceof KeyboardEvent ? REASONS.keyboard : REASONS.inputChange;
-		}
-		function handleInputChange(valueInput, index, event) {
-			const newValue = getSliderValue(valueInput, index, props.min, props.max, range.value, values.value);
-			if (validateMinimumDistance(newValue, props.step, props.minStepsBetweenValues)) {
-				const reason = getSliderChangeEventReason(event);
-				setValue(newValue, createChangeEventDetails(reason, event, void 0, { activeThumbIndex: index }));
-				setTouched(true);
-				emit("valueCommitted", lastChangedValueRef.value ?? newValue, createGenericEventDetails(reason, event));
-			}
-		}
-		if (process.env.NODE_ENV !== "production" && props.min >= props.max) warn("Slider `max` must be greater than `min`.");
-		watch(() => disabled.value, (nextDisabled) => {
-			const activeEl = sliderRef.value ? activeElement(ownerDocument(sliderRef.value)) : null;
-			if (nextDisabled && activeEl instanceof HTMLElement && contains(sliderRef.value, activeEl)) activeEl.blur();
-			if (nextDisabled && active.value !== -1) setActive(-1);
-		});
-		const state = computed(() => ({
-			...fieldState.value,
-			activeThumbIndex: active.value,
-			disabled: disabled.value,
-			dragging: dragging.value,
-			orientation: props.orientation,
-			max: props.max,
-			min: props.min,
-			minStepsBetweenValues: props.minStepsBetweenValues,
-			step: props.step,
-			values: values.value
-		}));
-		provide(sliderRootContextKey, {
-			active,
-			lastUsedThumbIndex,
-			controlRef,
-			dragging,
-			disabled,
-			validation,
-			formatOptionsRef,
-			handleInputChange,
-			indicatorPosition,
-			inset: computed(() => props.thumbAlignment !== "center"),
-			labelId: computed(() => ariaLabelledBy.value),
-			rootLabelId: defaultLabelId,
-			largeStep: computed(() => props.largeStep),
-			lastChangedValueRef,
-			lastChangeReasonRef,
-			locale: computed(() => props.locale),
-			max: computed(() => props.max),
-			min: computed(() => props.min),
-			minStepsBetweenValues: computed(() => props.minStepsBetweenValues),
-			form: computed(() => props.form),
-			name,
-			onValueCommitted(value, details) {
-				emit("valueCommitted", value, details);
-			},
-			orientation: computed(() => props.orientation),
-			pressedInputRef,
-			pressedThumbCenterOffsetRef,
-			pressedThumbIndexRef,
-			pressedValuesRef,
-			registerFieldControlRef,
-			renderBeforeHydration: computed(() => props.thumbAlignment === "edge"),
-			setActive,
-			setDragging(value) {
-				dragging.value = value;
-			},
-			setIndicatorPosition(updater) {
-				indicatorPosition.value = updater(indicatorPosition.value);
-			},
-			setLabelId(value) {
-				localLabelId.value = value;
-			},
-			setValue,
-			state,
-			step: computed(() => props.step),
-			thumbCollisionBehavior: computed(() => props.thumbCollisionBehavior),
-			thumbMap,
-			thumbRefs,
-			values
+		const { value, formattedValue } = useMeterRootContext();
+		const state = computed(() => ({}));
+		const defaultDisplay = computed(() => {
+			if (formattedValue.value) return formattedValue.value;
+			return value.value != null ? String(value.value) : "";
 		});
-		const rootProps = computed(() => mergeProps$1(attrsObject, validation.getValidationProps(), {
-			"aria-labelledby": ariaLabelledBy.value,
-			"id": id,
-			"role": "group"
-		}));
-		const { tag, mergedProps, renderless, ref: renderRef } = useRenderElement({
+		const { tag, mergedProps, renderless } = useRenderElement({
 			componentProps: props,
 			state,
-			ref: useMergedRefs(sliderRef),
-			props: rootProps,
-			defaultTagName: "div",
-			stateAttributesMapping: sliderStateAttributesMapping
+			props: computed(() => ({
+				"aria-hidden": true,
+				...attrs
+			})),
+			defaultTagName: "span"
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(CompositeList_default, normalizeProps(guardReactiveProps(compositeListProps)), {
-				default: withCtx(() => [unref(renderless) ? renderSlot(_ctx.$slots, "default", {
-					key: 0,
-					ref: unref(renderRef),
-					props: unref(mergedProps),
-					state: state.value
-				}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), mergeProps({
-					key: 1,
-					ref: unref(renderRef)
-				}, unref(mergedProps)), {
-					default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-					_: 3
-				}, 16))]),
+			return unref(renderless) ? renderSlot(_ctx.$slots, "default", {
+				key: 0,
+				props: unref(mergedProps),
+				state: state.value,
+				formattedValue: unref(formattedValue),
+				value: unref(value)
+			}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), normalizeProps(mergeProps({ key: 1 }, unref(mergedProps))), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {
+					formattedValue: unref(formattedValue),
+					value: unref(value)
+				}, () => [createTextVNode(toDisplayString(defaultDisplay.value), 1)])]),
 				_: 3
-			}, 16);
+			}, 16));
 		};
 	}
 });
 
 //#endregion
-//#region src/slider/root/SliderRoot.vue
-var SliderRoot_default = SliderRoot_vue_vue_type_script_setup_true_lang_default;
+//#region src/meter/value/MeterValue.vue
+var MeterValue_default = MeterValue_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";
+//#region src/progress/root/ProgressRootContext.ts
+const progressRootContextKey = Symbol("ProgressRootContext");
+function useProgressRootContext(optional = false) {
+	const context = inject(progressRootContextKey, void 0);
+	if (!context && !optional) throw new Error("Base UI Vue: ProgressRootContext is missing. Progress parts must be placed within <ProgressRoot>.");
+	return context;
+}
+
+//#endregion
+//#region src/progress/root/ProgressRootDataAttributes.ts
+let ProgressRootDataAttributes = /* @__PURE__ */ function(ProgressRootDataAttributes) {
 	/**
-	* Present when the slider has been touched (when wrapped in Field.Root).
+	* Present when the progress has completed.
 	*/
-	SliderRootDataAttributes["touched"] = "data-touched";
+	ProgressRootDataAttributes["complete"] = "data-complete";
 	/**
-	* Present when the slider's value has changed (when wrapped in Field.Root).
+	* Present when the progress is in indeterminate state.
 	*/
-	SliderRootDataAttributes["dirty"] = "data-dirty";
+	ProgressRootDataAttributes["indeterminate"] = "data-indeterminate";
 	/**
-	* Present when the slider is focused (when wrapped in Field.Root).
+	* Present while the progress is progressing.
 	*/
-	SliderRootDataAttributes["focused"] = "data-focused";
-	return SliderRootDataAttributes;
+	ProgressRootDataAttributes["progressing"] = "data-progressing";
+	return ProgressRootDataAttributes;
 }({});
 
 //#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})()";
+//#region src/progress/root/stateAttributesMapping.ts
+const progressStateAttributesMapping = { status(value) {
+	if (value === "progressing") return { [ProgressRootDataAttributes.progressing]: "" };
+	if (value === "complete") return { [ProgressRootDataAttributes.complete]: "" };
+	if (value === "indeterminate") return { [ProgressRootDataAttributes.indeterminate]: "" };
+	return null;
+} };
 
 //#endregion
-//#region src/slider/thumb/SliderThumbDataAttributes.ts
-let SliderThumbDataAttributes = /* @__PURE__ */ function(SliderThumbDataAttributes) {
-	/**
-	* Indicates the index of the thumb in range sliders.
-	*/
-	SliderThumbDataAttributes["index"] = "data-index";
-	/**
-	* Present while the user is dragging.
-	*/
-	SliderThumbDataAttributes["dragging"] = "data-dragging";
-	/**
-	* Indicates the orientation of the slider.
-	* @type {'horizontal' | 'vertical'}
-	*/
-	SliderThumbDataAttributes["orientation"] = "data-orientation";
-	/**
-	* Present when the slider is disabled.
-	*/
-	SliderThumbDataAttributes["disabled"] = "data-disabled";
-	/**
-	* Present when the slider is in valid state (when wrapped in Field.Root).
-	*/
-	SliderThumbDataAttributes["valid"] = "data-valid";
-	/**
-	* Present when the slider is in invalid state (when wrapped in Field.Root).
-	*/
-	SliderThumbDataAttributes["invalid"] = "data-invalid";
-	/**
-	* Present when the slider has been touched (when wrapped in Field.Root).
-	*/
-	SliderThumbDataAttributes["touched"] = "data-touched";
-	/**
-	* Present when the slider's value has changed (when wrapped in Field.Root).
-	*/
-	SliderThumbDataAttributes["dirty"] = "data-dirty";
-	/**
-	* Present when the slider is focused (when wrapped in Field.Root).
-	*/
-	SliderThumbDataAttributes["focused"] = "data-focused";
-	return SliderThumbDataAttributes;
-}({});
-
-//#endregion
-//#region src/slider/thumb/SliderThumb.vue?vue&type=script&setup=true&lang.ts
-var SliderThumb_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
-	name: "SliderThumb",
+//#region src/progress/indicator/ProgressIndicator.vue?vue&type=script&setup=true&lang.ts
+/**
+* Visualizes the completion status of the task.
+* Renders a `<div>` element.
+*
+* Documentation: [Base UI Vue Progress](https://baseui-vue.com/docs/components/progress)
+*/
+var ProgressIndicator_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "ProgressIndicator",
 	inheritAttrs: false,
-	__name: "SliderThumb",
+	__name: "ProgressIndicator",
 	props: {
-		disabled: {
-			type: Boolean,
+		as: {
+			type: null,
 			required: false,
-			default: false
+			default: "div"
 		},
-		getAriaLabel: {
-			type: [Function, null],
-			required: false
+		class: {
+			type: Function,
+			required: false,
+			skipCheck: true
 		},
-		getAriaValueText: {
-			type: [Function, null],
+		style: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const attrs = useAttrs();
+		const { value, min, max, state } = useProgressRootContext();
+		const percentage = computed(() => {
+			const v = value.value;
+			if (v == null || !Number.isFinite(v)) return null;
+			return valueToPercent(v, min.value, max.value);
+		});
+		const indicatorStyles = computed(() => {
+			if (percentage.value == null) return {};
+			return {
+				insetInlineStart: 0,
+				height: "inherit",
+				width: `${percentage.value}%`
+			};
+		});
+		const { tag, mergedProps, renderless } = useRenderElement({
+			componentProps: props,
+			state,
+			props: computed(() => mergeProps$1({ style: indicatorStyles.value }, attrs)),
+			defaultTagName: "div",
+			stateAttributesMapping: progressStateAttributesMapping
+		});
+		return (_ctx, _cache) => {
+			return unref(renderless) ? renderSlot(_ctx.$slots, "default", {
+				key: 0,
+				props: unref(mergedProps),
+				state: unref(state)
+			}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), normalizeProps(mergeProps({ key: 1 }, unref(mergedProps))), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", { state: unref(state) })]),
+				_: 3
+			}, 16));
+		};
+	}
+});
+
+//#endregion
+//#region src/progress/indicator/ProgressIndicator.vue
+var ProgressIndicator_default = ProgressIndicator_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/progress/label/ProgressLabel.vue?vue&type=script&setup=true&lang.ts
+/**
+* An accessible label for the progress bar.
+* Renders a `<span>` element.
+*
+* Documentation: [Base UI Vue Progress](https://baseui-vue.com/docs/components/progress)
+*/
+var ProgressLabel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "ProgressLabel",
+	inheritAttrs: false,
+	__name: "ProgressLabel",
+	props: {
+		id: {
+			type: String,
 			required: false
 		},
-		index: {
-			type: Number,
-			required: false
+		as: {
+			type: null,
+			required: false,
+			default: "span"
 		},
-		inputRef: {
+		class: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		style: {
 			type: [
-				Function,
+				Boolean,
+				null,
+				String,
 				Object,
-				null
+				Array,
+				Function
 			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const attrs = useAttrs();
+		const { setLabelId, state } = useProgressRootContext();
+		const id = useRegisteredLabelId(() => props.id, setLabelId);
+		const { tag, mergedProps, renderless } = useRenderElement({
+			componentProps: props,
+			state,
+			props: computed(() => ({
+				...attrs,
+				id: id.value,
+				role: "presentation"
+			})),
+			defaultTagName: "span",
+			stateAttributesMapping: progressStateAttributesMapping
+		});
+		return (_ctx, _cache) => {
+			return unref(renderless) ? renderSlot(_ctx.$slots, "default", {
+				key: 0,
+				props: unref(mergedProps),
+				state: unref(state)
+			}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), normalizeProps(mergeProps({ key: 1 }, unref(mergedProps))), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", { state: unref(state) })]),
+				_: 3
+			}, 16));
+		};
+	}
+});
+
+//#endregion
+//#region src/progress/label/ProgressLabel.vue
+var ProgressLabel_default = ProgressLabel_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/progress/root/ProgressRoot.vue?vue&type=script&setup=true&lang.ts
+/**
+* Groups all parts of the progress bar and provides the task completion
+* status to screen readers.
+* Renders a `<div>` element.
+*
+* Documentation: [Base UI Vue Progress](https://baseui-vue.com/docs/components/progress)
+*/
+var ProgressRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "ProgressRoot",
+	inheritAttrs: false,
+	__name: "ProgressRoot",
+	props: {
+		ariaValuetext: {
+			type: String,
 			required: false
 		},
-		tabIndex: {
-			type: Number,
+		format: {
+			type: null,
 			required: false
 		},
-		id: {
-			type: String,
+		getAriaValueText: {
+			type: Function,
 			required: false
 		},
-		ariaLabel: {
-			type: String,
+		locale: {
+			type: null,
 			required: false
 		},
-		ariaLabelledby: {
-			type: String,
-			required: false
+		max: {
+			type: Number,
+			required: false,
+			default: 100
 		},
-		ariaDescribedby: {
-			type: String,
-			required: false
+		min: {
+			type: Number,
+			required: false,
+			default: 0
 		},
-		style: {
-			type: [Object, Function],
-			required: false
+		value: {
+			type: [Number, null],
+			required: true
 		},
 		as: {
 			type: null,
@@ -3556,67 +3528,1139 @@ var SliderThumb_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 			type: Function,
 			required: false,
 			skipCheck: true
+		},
+		style: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
 		}
 	},
 	setup(__props) {
 		const props = __props;
-		const ALL_KEYS = new Set([
-			ARROW_UP$1,
-			ARROW_DOWN$1,
-			ARROW_LEFT$1,
-			ARROW_RIGHT$1,
-			HOME,
-			END,
-			PAGE_UP,
-			PAGE_DOWN
-		]);
-		function getDefaultAriaValueText(values, index, format, locale) {
-			if (index < 0) return;
-			if (values.length === 2) {
-				if (index === 0) return `${formatNumber(values[index], locale, format)} start range`;
-				return `${formatNumber(values[index], locale, format)} end range`;
-			}
-			return format ? formatNumber(values[index], locale, format) : void 0;
-		}
-		function getNewValue(thumbValue, step, direction, min, max) {
-			return direction === 1 ? Math.min(thumbValue + step, max) : Math.max(thumbValue - step, min);
+		function getDefaultAriaValueText(formattedValue, value) {
+			if (value == null) return "indeterminate progress";
+			return formattedValue || `${value}%`;
 		}
 		const attrs = useAttrs();
-		const { nonce } = useCSPContext();
-		const direction = useDirection();
-		const rootContext = useSliderRootContext();
-		const { setTouched, setFocused, validationMode, validation } = useFieldRootContext();
-		const id = useBaseUiId(props.id);
-		const disabled = computed(() => props.disabled || rootContext.disabled.value);
-		const range = computed(() => rootContext.values.value.length > 1);
-		const vertical = computed(() => rootContext.orientation.value === "vertical");
-		const rtl = computed(() => direction.value === "rtl");
-		const thumbRef = ref(null);
-		const inputRef = ref(null);
-		const restoringFocusVisibleRef = ref(false);
-		const defaultInputId = useBaseUiId();
-		const labelableId = useLabelableId();
-		const inputId = computed(() => range.value ? defaultInputId : labelableId.value);
-		const { ref: listItemRef, index: compositeIndex } = useCompositeListItem({
-			metadata: () => ({ inputId }),
-			index: () => props.index
+		const labelId = ref(void 0);
+		const status = computed(() => {
+			if (props.value == null || !Number.isFinite(props.value)) return "indeterminate";
+			return props.value === props.max ? "complete" : "progressing";
 		});
-		const index = computed(() => !range.value ? 0 : props.index ?? compositeIndex.value);
-		const last = computed(() => index.value === rootContext.values.value.length - 1);
-		const thumbValue = computed(() => rootContext.values.value[index.value]);
-		const thumbValuePercent = computed(() => valueToPercent(thumbValue.value, rootContext.min.value, rootContext.max.value));
-		const isMounted = ref(false);
-		const positionPercent = ref(void 0);
-		onMounted(() => {
-			isMounted.value = true;
+		const formattedValue = computed(() => formatNumberValue(props.value, props.locale, props.format));
+		const ariaValueText = computed(() => {
+			if (props.ariaValuetext !== void 0) return props.ariaValuetext;
+			const formatted = props.value == null ? null : formattedValue.value;
+			if (props.getAriaValueText) return props.getAriaValueText(formatted, props.value);
+			return getDefaultAriaValueText(formatted, props.value);
 		});
-		const safeLastUsedThumbIndex = computed(() => rootContext.lastUsedThumbIndex.value >= 0 && rootContext.lastUsedThumbIndex.value < rootContext.values.value.length ? rootContext.lastUsedThumbIndex.value : -1);
-		function setIndicatorPositionForIndex(nextInsetPosition) {
-			rootContext.setIndicatorPosition((prevPosition) => {
-				const next = [...prevPosition];
-				if (index.value === 0) next[0] = nextInsetPosition;
-				else if (last.value) next[1] = nextInsetPosition;
-				return next;
+		const state = computed(() => ({ status: status.value }));
+		provide(progressRootContextKey, {
+			formattedValue,
+			max: computed(() => props.max),
+			min: computed(() => props.min),
+			value: computed(() => props.value),
+			status,
+			state,
+			setLabelId(id) {
+				labelId.value = id;
+			}
+		});
+		const { tag, mergedProps, renderless } = useRenderElement({
+			componentProps: props,
+			state,
+			props: computed(() => ({
+				"role": "progressbar",
+				"aria-labelledby": labelId.value,
+				"aria-valuemax": props.max,
+				"aria-valuemin": props.min,
+				"aria-valuenow": props.value ?? void 0,
+				"aria-valuetext": ariaValueText.value,
+				...attrs
+			})),
+			defaultTagName: "div",
+			stateAttributesMapping: progressStateAttributesMapping
+		});
+		const visuallyHiddenStyle = visuallyHidden;
+		return (_ctx, _cache) => {
+			return unref(renderless) ? renderSlot(_ctx.$slots, "default", {
+				key: 0,
+				props: unref(mergedProps),
+				state: state.value
+			}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), normalizeProps(mergeProps({ key: 1 }, unref(mergedProps))), {
+				default: withCtx(() => [
+					renderSlot(_ctx.$slots, "default", { state: state.value }),
+					createCommentVNode(" Force NVDA to read the label https://github.com/mui/base-ui/issues/4184 "),
+					createElementVNode("span", {
+						role: "presentation",
+						style: normalizeStyle(unref(visuallyHiddenStyle))
+					}, "x", 4)
+				]),
+				_: 3
+			}, 16));
+		};
+	}
+});
+
+//#endregion
+//#region src/progress/root/ProgressRoot.vue
+var ProgressRoot_default = ProgressRoot_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/progress/track/ProgressTrack.vue?vue&type=script&setup=true&lang.ts
+/**
+* Contains the progress bar indicator.
+* Renders a `<div>` element.
+*
+* Documentation: [Base UI Vue Progress](https://baseui-vue.com/docs/components/progress)
+*/
+var ProgressTrack_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "ProgressTrack",
+	inheritAttrs: false,
+	__name: "ProgressTrack",
+	props: {
+		as: {
+			type: null,
+			required: false,
+			default: "div"
+		},
+		class: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		style: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const attrs = useAttrs();
+		const { state } = useProgressRootContext();
+		const { tag, mergedProps, renderless } = useRenderElement({
+			componentProps: props,
+			state,
+			props: attrs,
+			defaultTagName: "div",
+			stateAttributesMapping: progressStateAttributesMapping
+		});
+		return (_ctx, _cache) => {
+			return unref(renderless) ? renderSlot(_ctx.$slots, "default", {
+				key: 0,
+				props: unref(mergedProps),
+				state: unref(state)
+			}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), normalizeProps(mergeProps({ key: 1 }, unref(mergedProps))), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", { state: unref(state) })]),
+				_: 3
+			}, 16));
+		};
+	}
+});
+
+//#endregion
+//#region src/progress/track/ProgressTrack.vue
+var ProgressTrack_default = ProgressTrack_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/progress/value/ProgressValue.vue?vue&type=script&setup=true&lang.ts
+/**
+* A text label displaying the current value.
+* Renders a `<span>` element.
+*
+* Documentation: [Base UI Vue Progress](https://baseui-vue.com/docs/components/progress)
+*/
+var ProgressValue_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "ProgressValue",
+	inheritAttrs: false,
+	__name: "ProgressValue",
+	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 attrs = useAttrs();
+		const { value, formattedValue, state } = useProgressRootContext();
+		const slotFormattedValue = computed(() => value.value == null ? "indeterminate" : formattedValue.value);
+		const defaultDisplay = computed(() => value.value == null ? "" : formattedValue.value);
+		const { tag, mergedProps, renderless } = useRenderElement({
+			componentProps: props,
+			state,
+			props: computed(() => ({
+				"aria-hidden": true,
+				...attrs
+			})),
+			defaultTagName: "span",
+			stateAttributesMapping: progressStateAttributesMapping
+		});
+		return (_ctx, _cache) => {
+			return unref(renderless) ? renderSlot(_ctx.$slots, "default", {
+				key: 0,
+				props: unref(mergedProps),
+				state: unref(state),
+				formattedValue: slotFormattedValue.value,
+				value: unref(value)
+			}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), normalizeProps(mergeProps({ key: 1 }, unref(mergedProps))), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {
+					formattedValue: slotFormattedValue.value,
+					value: unref(value)
+				}, () => [createTextVNode(toDisplayString(defaultDisplay.value), 1)])]),
+				_: 3
+			}, 16));
+		};
+	}
+});
+
+//#endregion
+//#region src/progress/value/ProgressValue.vue
+var ProgressValue_default = ProgressValue_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/separator/Separator.vue?vue&type=script&setup=true&lang.ts
+/**
+* A separator element accessible to screen readers.
+* Renders a `<div>` element.
+*
+* Documentation: [Base UI Vue Separator](https://baseui-vue.com/docs/components/separator)
+*/
+var Separator_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "Separator",
+	inheritAttrs: false,
+	__name: "Separator",
+	props: {
+		orientation: {
+			type: String,
+			required: false,
+			default: "horizontal"
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "div"
+		},
+		class: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		style: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const attrs = useAttrs();
+		const state = computed(() => ({ orientation: props.orientation }));
+		const { tag, mergedProps, renderless, ref: renderRef } = useRenderElement({
+			componentProps: props,
+			state,
+			props: computed(() => ({
+				...attrs,
+				"role": "separator",
+				"aria-orientation": props.orientation
+			})),
+			defaultTagName: "div"
+		});
+		return (_ctx, _cache) => {
+			return unref(renderless) ? renderSlot(_ctx.$slots, "default", {
+				key: 0,
+				ref: unref(renderRef),
+				props: unref(mergedProps),
+				state: state.value
+			}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), mergeProps({
+				key: 1,
+				ref: unref(renderRef)
+			}, unref(mergedProps)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", { state: state.value })]),
+				_: 3
+			}, 16));
+		};
+	}
+});
+
+//#endregion
+//#region src/separator/Separator.vue
+var Separator_default = Separator_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/separator/SeparatorDataAttributes.ts
+let SeparatorDataAttributes = /* @__PURE__ */ function(SeparatorDataAttributes) {
+	/**
+	* Indicates the orientation of the separator.
+	* @type {'horizontal' | 'vertical'}
+	*/
+	SeparatorDataAttributes["orientation"] = "data-orientation";
+	return SeparatorDataAttributes;
+}({});
+
+//#endregion
+//#region src/slider/indicator/SliderIndicator.vue?vue&type=script&setup=true&lang.ts
+/**
+* Visualizes the current value of the slider.
+* Renders a `<div>` element.
+*
+* Documentation: [Base UI Vue Slider](https://baseui-vue.com/docs/components/slider)
+*/
+var SliderIndicator_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "SliderIndicator",
+	inheritAttrs: false,
+	__name: "SliderIndicator",
+	props: {
+		as: {
+			type: null,
+			required: false,
+			default: "div"
+		},
+		class: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		style: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		function getInsetStyles(vertical, range, start, end, renderBeforeHydration, mounted) {
+			const visibility = start === void 0 || range && end === void 0 ? "hidden" : void 0;
+			const startEdge = vertical ? "bottom" : "insetInlineStart";
+			const mainSide = vertical ? "height" : "width";
+			const styles = {
+				visibility: renderBeforeHydration && !mounted ? "hidden" : visibility,
+				position: vertical ? "absolute" : "relative",
+				[vertical ? "width" : "height"]: "inherit"
+			};
+			styles["--start-position"] = `${start ?? 0}%`;
+			if (!range) {
+				styles[startEdge] = 0;
+				styles[mainSide] = "var(--start-position)";
+				return styles;
+			}
+			styles["--relative-size"] = `${(end ?? 0) - (start ?? 0)}%`;
+			styles[startEdge] = "var(--start-position)";
+			styles[mainSide] = "var(--relative-size)";
+			return styles;
+		}
+		function getCenteredStyles(vertical, range, start, end) {
+			const startEdge = vertical ? "bottom" : "insetInlineStart";
+			const mainSide = vertical ? "height" : "width";
+			const styles = {
+				position: vertical ? "absolute" : "relative",
+				[vertical ? "width" : "height"]: "inherit"
+			};
+			if (!range) {
+				styles[startEdge] = 0;
+				styles[mainSide] = `${start}%`;
+				return styles;
+			}
+			styles[startEdge] = `${start}%`;
+			styles[mainSide] = `${end - start}%`;
+			return styles;
+		}
+		const attrs = useAttrs();
+		const rootContext = useSliderRootContext();
+		const isMounted = ref(false);
+		onMounted(() => {
+			isMounted.value = true;
+		});
+		const vertical = computed(() => rootContext.orientation.value === "vertical");
+		const range = computed(() => rootContext.values.value.length > 1);
+		const style = computed(() => rootContext.inset.value ? getInsetStyles(vertical.value, range.value, rootContext.indicatorPosition.value[0], rootContext.indicatorPosition.value[1], rootContext.renderBeforeHydration.value, isMounted.value) : getCenteredStyles(vertical.value, range.value, valueToPercent(rootContext.values.value[0], rootContext.min.value, rootContext.max.value), valueToPercent(rootContext.values.value[rootContext.values.value.length - 1], rootContext.min.value, rootContext.max.value)));
+		const indicatorProps = computed(() => mergeProps$1(attrs, {
+			"data-base-ui-slider-indicator": rootContext.renderBeforeHydration.value ? "" : void 0,
+			"style": style.value,
+			"suppressHydrationWarning": rootContext.renderBeforeHydration.value || void 0
+		}));
+		const { tag, mergedProps, renderless, ref: renderRef } = useRenderElement({
+			componentProps: props,
+			state: rootContext.state,
+			props: indicatorProps,
+			defaultTagName: "div",
+			stateAttributesMapping: sliderStateAttributesMapping
+		});
+		return (_ctx, _cache) => {
+			return unref(renderless) ? renderSlot(_ctx.$slots, "default", {
+				key: 0,
+				ref: unref(renderRef),
+				props: unref(mergedProps),
+				state: unref(rootContext).state
+			}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), mergeProps({
+				key: 1,
+				ref: unref(renderRef)
+			}, unref(mergedProps)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16));
+		};
+	}
+});
+
+//#endregion
+//#region src/slider/indicator/SliderIndicator.vue
+var SliderIndicator_default = SliderIndicator_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/slider/indicator/SliderIndicatorDataAttributes.ts
+let SliderIndicatorDataAttributes = /* @__PURE__ */ function(SliderIndicatorDataAttributes) {
+	/**
+	* Present while the user is dragging.
+	*/
+	SliderIndicatorDataAttributes["dragging"] = "data-dragging";
+	/**
+	* Indicates the orientation of the slider.
+	* @type {'horizontal' | 'vertical'}
+	*/
+	SliderIndicatorDataAttributes["orientation"] = "data-orientation";
+	/**
+	* Present when the slider is disabled.
+	*/
+	SliderIndicatorDataAttributes["disabled"] = "data-disabled";
+	/**
+	* Present when the slider is in valid state (when wrapped in Field.Root).
+	*/
+	SliderIndicatorDataAttributes["valid"] = "data-valid";
+	/**
+	* Present when the slider is in invalid state (when wrapped in Field.Root).
+	*/
+	SliderIndicatorDataAttributes["invalid"] = "data-invalid";
+	/**
+	* Present when the slider has been touched (when wrapped in Field.Root).
+	*/
+	SliderIndicatorDataAttributes["touched"] = "data-touched";
+	/**
+	* Present when the slider's value has changed (when wrapped in Field.Root).
+	*/
+	SliderIndicatorDataAttributes["dirty"] = "data-dirty";
+	/**
+	* Present when the slider is focused (when wrapped in Field.Root).
+	*/
+	SliderIndicatorDataAttributes["focused"] = "data-focused";
+	return SliderIndicatorDataAttributes;
+}({});
+
+//#endregion
+//#region src/slider/label/SliderLabel.vue?vue&type=script&setup=true&lang.ts
+/**
+* An accessible label that is automatically associated with the slider thumbs.
+* Renders a `<div>` element.
+*
+* Documentation: [Base UI Vue Slider](https://baseui-vue.com/docs/components/slider)
+*/
+var SliderLabel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "SliderLabel",
+	inheritAttrs: false,
+	__name: "SliderLabel",
+	props: {
+		as: {
+			type: null,
+			required: false,
+			default: "div"
+		},
+		class: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		style: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const attrs = useAttrs();
+		const rootContext = useSliderRootContext();
+		const label = useLabel({
+			id: computed(() => rootContext.rootLabelId.value),
+			fallbackControlId: computed(() => rootContext.controlRef.value?.id),
+			setLabelId: rootContext.setLabelId,
+			focusControl(_event, controlId) {
+				if (controlId) {
+					const controlElement = rootContext.controlRef.value ? ownerDocument(rootContext.controlRef.value)?.getElementById(controlId) : null;
+					if (isHTMLElement(controlElement)) {
+						focusElementWithVisible(controlElement);
+						return;
+					}
+				}
+				const fallbackInputs = rootContext.controlRef.value?.querySelectorAll("input[type=\"range\"]");
+				const fallbackInput = fallbackInputs?.length === 1 ? fallbackInputs[0] : null;
+				if (isHTMLElement(fallbackInput)) focusElementWithVisible(fallbackInput);
+			}
+		});
+		const labelProps = computed(() => mergeProps$1(attrs, label.props.value));
+		const { tag, mergedProps, renderless, ref: renderRef } = useRenderElement({
+			componentProps: props,
+			state: rootContext.state,
+			props: labelProps,
+			defaultTagName: "div",
+			stateAttributesMapping: sliderStateAttributesMapping
+		});
+		return (_ctx, _cache) => {
+			return unref(renderless) ? renderSlot(_ctx.$slots, "default", {
+				key: 0,
+				ref: unref(renderRef),
+				props: unref(mergedProps),
+				state: unref(rootContext).state
+			}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), mergeProps({
+				key: 1,
+				ref: unref(renderRef)
+			}, unref(mergedProps)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16));
+		};
+	}
+});
+
+//#endregion
+//#region src/slider/label/SliderLabel.vue
+var SliderLabel_default = SliderLabel_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/utils/areArraysEqual.ts
+function areArraysEqual(array1, array2, itemComparer = (a, b) => a === b) {
+	return array1.length === array2.length && array1.every((value, index) => itemComparer(value, array2[index]));
+}
+
+//#endregion
+//#region src/utils/resolveAriaLabelledBy.ts
+function getDefaultLabelId(id) {
+	return id == null ? void 0 : `${id}-label`;
+}
+function resolveAriaLabelledBy(fieldLabelId, localLabelId) {
+	return fieldLabelId ?? localLabelId;
+}
+
+//#endregion
+//#region src/slider/utils/asc.ts
+function asc(a, b) {
+	return a - b;
+}
+
+//#endregion
+//#region src/slider/utils/replaceArrayItemAtIndex.ts
+function replaceArrayItemAtIndex(array, index, newValue) {
+	if (!Number.isInteger(index) || index < 0 || index >= array.length) throw new RangeError(`replaceArrayItemAtIndex index out of bounds: ${index}`);
+	const output = array.slice();
+	output[index] = newValue;
+	return output.sort(asc);
+}
+
+//#endregion
+//#region src/slider/utils/getSliderValue.ts
+function getSliderValue(valueInput, index, min, max, range, values) {
+	let newValue = valueInput;
+	newValue = clamp(newValue, min, max);
+	if (range) newValue = replaceArrayItemAtIndex(values, index, clamp(newValue, values[index - 1] ?? -Infinity, values[index + 1] ?? Infinity));
+	return newValue;
+}
+
+//#endregion
+//#region src/slider/root/SliderRoot.vue?vue&type=script&setup=true&lang.ts
+/**
+* Groups all parts of the slider.
+* Renders a `<div>` element.
+*
+* Documentation: [Base UI Vue Slider](https://baseui-vue.com/docs/components/slider)
+*/
+var SliderRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "SliderRoot",
+	inheritAttrs: false,
+	__name: "SliderRoot",
+	props: {
+		defaultValue: {
+			type: null,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		format: {
+			type: null,
+			required: false
+		},
+		locale: {
+			type: null,
+			required: false
+		},
+		max: {
+			type: Number,
+			required: false,
+			default: 100
+		},
+		min: {
+			type: Number,
+			required: false,
+			default: 0
+		},
+		minStepsBetweenValues: {
+			type: Number,
+			required: false,
+			default: 0
+		},
+		name: {
+			type: String,
+			required: false
+		},
+		form: {
+			type: String,
+			required: false
+		},
+		orientation: {
+			type: String,
+			required: false,
+			default: "horizontal"
+		},
+		step: {
+			type: Number,
+			required: false,
+			default: 1
+		},
+		largeStep: {
+			type: Number,
+			required: false,
+			default: 10
+		},
+		thumbAlignment: {
+			type: String,
+			required: false,
+			default: "center"
+		},
+		thumbCollisionBehavior: {
+			type: String,
+			required: false,
+			default: "push"
+		},
+		value: {
+			type: null,
+			required: false
+		},
+		id: {
+			type: String,
+			required: false
+		},
+		ariaLabelledby: {
+			type: String,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "div"
+		},
+		class: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		style: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	emits: ["valueChange", "valueCommitted"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const attrs = useAttrs();
+		const attrsObject = attrs;
+		const explicitAriaLabelledBy = computed(() => props.ariaLabelledby ?? attrs["aria-labelledby"]);
+		const id = useBaseUiId(props.id);
+		const idRef = computed(() => id);
+		const defaultLabelId = computed(() => getDefaultLabelId(id));
+		const { clearErrors } = useFormContext();
+		const { state: fieldState, disabled: fieldDisabled, name: fieldName, setTouched, setDirty, validation, validityData, shouldValidateOnChange } = useFieldRootContext();
+		const { labelId: fieldLabelId } = useLabelableContext();
+		const localLabelId = ref(void 0);
+		const ariaLabelledBy = computed(() => explicitAriaLabelledBy.value ?? resolveAriaLabelledBy(fieldLabelId.value, localLabelId.value));
+		const disabled = computed(() => fieldDisabled.value || props.disabled);
+		const name = computed(() => fieldName.value ?? props.name);
+		const controllableValue = useControllableState({
+			controlled: () => props.value,
+			default: () => props.defaultValue ?? props.min,
+			name: "Slider",
+			state: "value"
+		});
+		const valueUnwrapped = controllableValue.value;
+		const setValueUnwrapped = controllableValue.setValue;
+		const sliderRef = ref(null);
+		const controlRef = ref(null);
+		const thumbRefs = ref([]);
+		const pressedInputRef = ref(null);
+		const pressedThumbCenterOffsetRef = ref(null);
+		const pressedThumbIndexRef = ref(-1);
+		const pressedValuesRef = ref(null);
+		const lastChangedValueRef = ref(null);
+		const lastChangeReasonRef = ref(REASONS.none);
+		const formatOptionsRef = computed(() => props.format);
+		const active = ref(-1);
+		const lastUsedThumbIndex = ref(-1);
+		const dragging = ref(false);
+		const thumbMap = shallowRef(/* @__PURE__ */ new Map());
+		const indicatorPosition = ref([void 0, void 0]);
+		function setActive(value) {
+			active.value = value;
+			if (value !== -1) lastUsedThumbIndex.value = value;
+		}
+		function registerFieldControlRef(element) {
+			if (element) controlRef.value = element;
+		}
+		function setThumbMap(nextMap) {
+			thumbMap.value = nextMap;
+		}
+		const compositeListProps = {
+			elementsRef: thumbRefs,
+			onMapChange: setThumbMap
+		};
+		const range = computed(() => Array.isArray(valueUnwrapped.value));
+		const values = computed(() => {
+			if (!range.value) return [clamp(valueUnwrapped.value, props.min, props.max)];
+			return [...valueUnwrapped.value].sort(asc);
+		});
+		useField({
+			id: idRef,
+			commit: (value) => validation.commit(value),
+			value: computed(() => valueUnwrapped.value),
+			controlRef,
+			name,
+			getValue: () => valueUnwrapped.value
+		});
+		watch(() => valueUnwrapped.value, () => {
+			clearErrors(name.value);
+			if (shouldValidateOnChange()) validation.commit(valueUnwrapped.value);
+			else validation.commit(valueUnwrapped.value, true);
+			const initialValue = validityData.value.initialValue;
+			let isDirty;
+			if (Array.isArray(valueUnwrapped.value) && Array.isArray(initialValue)) isDirty = !areArraysEqual(valueUnwrapped.value, initialValue);
+			else isDirty = valueUnwrapped.value !== initialValue;
+			setDirty(isDirty);
+		});
+		function areValuesEqual(newValue, oldValue) {
+			if (typeof newValue === "number" && typeof oldValue === "number") return newValue === oldValue;
+			if (Array.isArray(newValue) && Array.isArray(oldValue)) return areArraysEqual(newValue, oldValue);
+			return false;
+		}
+		function setValue(newValue, details) {
+			if (Number.isNaN(newValue) || areValuesEqual(newValue, valueUnwrapped.value)) return;
+			const changeDetails = details ?? createChangeEventDetails(REASONS.none, void 0, void 0, { activeThumbIndex: -1 });
+			lastChangeReasonRef.value = changeDetails.reason;
+			const nativeEvent = changeDetails.event;
+			const clonedEvent = new (nativeEvent.constructor ?? Event)(nativeEvent.type, nativeEvent);
+			Object.defineProperty(clonedEvent, "target", {
+				writable: true,
+				value: {
+					value: newValue,
+					name: name.value
+				}
+			});
+			changeDetails.event = clonedEvent;
+			lastChangedValueRef.value = newValue;
+			emit("valueChange", newValue, changeDetails);
+			if (changeDetails.isCanceled) return;
+			setValueUnwrapped(newValue);
+		}
+		function getSliderChangeEventReason(event) {
+			return event instanceof KeyboardEvent ? REASONS.keyboard : REASONS.inputChange;
+		}
+		function handleInputChange(valueInput, index, event) {
+			const newValue = getSliderValue(valueInput, index, props.min, props.max, range.value, values.value);
+			if (validateMinimumDistance(newValue, props.step, props.minStepsBetweenValues)) {
+				const reason = getSliderChangeEventReason(event);
+				setValue(newValue, createChangeEventDetails(reason, event, void 0, { activeThumbIndex: index }));
+				setTouched(true);
+				emit("valueCommitted", lastChangedValueRef.value ?? newValue, createGenericEventDetails(reason, event));
+			}
+		}
+		if (process.env.NODE_ENV !== "production" && props.min >= props.max) warn("Slider `max` must be greater than `min`.");
+		watch(() => disabled.value, (nextDisabled) => {
+			const activeEl = sliderRef.value ? activeElement(ownerDocument(sliderRef.value)) : null;
+			if (nextDisabled && activeEl instanceof HTMLElement && contains(sliderRef.value, activeEl)) activeEl.blur();
+			if (nextDisabled && active.value !== -1) setActive(-1);
+		});
+		const state = computed(() => ({
+			...fieldState.value,
+			activeThumbIndex: active.value,
+			disabled: disabled.value,
+			dragging: dragging.value,
+			orientation: props.orientation,
+			max: props.max,
+			min: props.min,
+			minStepsBetweenValues: props.minStepsBetweenValues,
+			step: props.step,
+			values: values.value
+		}));
+		provide(sliderRootContextKey, {
+			active,
+			lastUsedThumbIndex,
+			controlRef,
+			dragging,
+			disabled,
+			validation,
+			formatOptionsRef,
+			handleInputChange,
+			indicatorPosition,
+			inset: computed(() => props.thumbAlignment !== "center"),
+			labelId: computed(() => ariaLabelledBy.value),
+			rootLabelId: defaultLabelId,
+			largeStep: computed(() => props.largeStep),
+			lastChangedValueRef,
+			lastChangeReasonRef,
+			locale: computed(() => props.locale),
+			max: computed(() => props.max),
+			min: computed(() => props.min),
+			minStepsBetweenValues: computed(() => props.minStepsBetweenValues),
+			form: computed(() => props.form),
+			name,
+			onValueCommitted(value, details) {
+				emit("valueCommitted", value, details);
+			},
+			orientation: computed(() => props.orientation),
+			pressedInputRef,
+			pressedThumbCenterOffsetRef,
+			pressedThumbIndexRef,
+			pressedValuesRef,
+			registerFieldControlRef,
+			renderBeforeHydration: computed(() => props.thumbAlignment === "edge"),
+			setActive,
+			setDragging(value) {
+				dragging.value = value;
+			},
+			setIndicatorPosition(updater) {
+				indicatorPosition.value = updater(indicatorPosition.value);
+			},
+			setLabelId(value) {
+				localLabelId.value = value;
+			},
+			setValue,
+			state,
+			step: computed(() => props.step),
+			thumbCollisionBehavior: computed(() => props.thumbCollisionBehavior),
+			thumbMap,
+			thumbRefs,
+			values
+		});
+		const rootProps = computed(() => mergeProps$1(attrsObject, validation.getValidationProps(), {
+			"aria-labelledby": ariaLabelledBy.value,
+			"id": id,
+			"role": "group"
+		}));
+		const { tag, mergedProps, renderless, ref: renderRef } = useRenderElement({
+			componentProps: props,
+			state,
+			ref: useMergedRefs(sliderRef),
+			props: rootProps,
+			defaultTagName: "div",
+			stateAttributesMapping: sliderStateAttributesMapping
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(CompositeList_default, normalizeProps(guardReactiveProps(compositeListProps)), {
+				default: withCtx(() => [unref(renderless) ? renderSlot(_ctx.$slots, "default", {
+					key: 0,
+					ref: unref(renderRef),
+					props: unref(mergedProps),
+					state: state.value
+				}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), mergeProps({
+					key: 1,
+					ref: unref(renderRef)
+				}, unref(mergedProps)), {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+					_: 3
+				}, 16))]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+
+//#endregion
+//#region src/slider/root/SliderRoot.vue
+var SliderRoot_default = SliderRoot_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/slider/root/SliderRootDataAttributes.ts
+let SliderRootDataAttributes = /* @__PURE__ */ function(SliderRootDataAttributes) {
+	/**
+	* Present while the user is dragging.
+	*/
+	SliderRootDataAttributes["dragging"] = "data-dragging";
+	/**
+	* Indicates the orientation of the slider.
+	* @type {'horizontal' | 'vertical'}
+	*/
+	SliderRootDataAttributes["orientation"] = "data-orientation";
+	/**
+	* Present when the slider is disabled.
+	*/
+	SliderRootDataAttributes["disabled"] = "data-disabled";
+	/**
+	* Present when the slider is in valid state (when wrapped in Field.Root).
+	*/
+	SliderRootDataAttributes["valid"] = "data-valid";
+	/**
+	* Present when the slider is in invalid state (when wrapped in Field.Root).
+	*/
+	SliderRootDataAttributes["invalid"] = "data-invalid";
+	/**
+	* Present when the slider has been touched (when wrapped in Field.Root).
+	*/
+	SliderRootDataAttributes["touched"] = "data-touched";
+	/**
+	* Present when the slider's value has changed (when wrapped in Field.Root).
+	*/
+	SliderRootDataAttributes["dirty"] = "data-dirty";
+	/**
+	* Present when the slider is focused (when wrapped in Field.Root).
+	*/
+	SliderRootDataAttributes["focused"] = "data-focused";
+	return SliderRootDataAttributes;
+}({});
+
+//#endregion
+//#region src/slider/thumb/prehydrationScript.min.ts
+const script = "(function prehydration() {\n  const firstThumb = document.currentScript?.parentElement\n  if (!firstThumb) {\n    return\n  }\n\n  const control = firstThumb.closest('[data-base-ui-slider-control]')\n  if (!control) {\n    return\n  }\n\n  const indicator = control.querySelector('[data-base-ui-slider-indicator]')\n  const controlRect = control.getBoundingClientRect()\n  const vertical = control.getAttribute('data-orientation') === 'vertical'\n  const side = vertical ? 'height' : 'width'\n  const inputElems = control.querySelectorAll('input[type=\"range\"]')\n  const range = inputElems.length > 1\n  const lastIndex = inputElems.length - 1\n\n  let startPosition = null\n  let relativeSize = null\n\n  for (let i = 0; i < inputElems.length; i += 1) {\n    const input = inputElems[i]\n\n    const value = Number.parseFloat(input.getAttribute('value') ?? '')\n\n    if (Number.isNaN(value)) {\n      return\n    }\n\n    const thumb = input.parentElement\n    if (!thumb) {\n      return\n    }\n\n    const max = Number.parseFloat(input.getAttribute('max') ?? '100')\n    const min = Number.parseFloat(input.getAttribute('min') ?? '0')\n\n    const thumbRect = thumb?.getBoundingClientRect()\n\n    const controlSize = controlRect[side] - thumbRect[side]\n    const thumbValuePercent = max === min ? 0 : ((value - min) * 100) / (max - min)\n    const thumbOffsetFromControlEdge\n      = thumbRect[side] / 2 + (controlSize * thumbValuePercent) / 100\n    const percent = (thumbOffsetFromControlEdge / controlRect[side]) * 100\n\n    if (Number.isFinite(percent)) {\n      thumb.style.setProperty(`--position`, `${percent}%`)\n      thumb.style.removeProperty('visibility')\n\n      if (indicator) {\n        if (i === 0) {\n          startPosition = percent\n          indicator.style.setProperty('--start-position', `${percent}%`)\n          if (!range) {\n            indicator.style.removeProperty('visibility')\n          }\n        }\n        else if (i === lastIndex) {\n          relativeSize = percent - (startPosition ?? 0)\n          indicator.style.setProperty('--end-position', `${percent}%`)\n          indicator.style.setProperty('--relative-size', `${relativeSize}%`)\n          indicator.style.removeProperty('visibility')\n        }\n      }\n    }\n  }\n})()";
+
+//#endregion
+//#region src/slider/thumb/SliderThumbDataAttributes.ts
+let SliderThumbDataAttributes = /* @__PURE__ */ function(SliderThumbDataAttributes) {
+	/**
+	* Indicates the index of the thumb in range sliders.
+	*/
+	SliderThumbDataAttributes["index"] = "data-index";
+	/**
+	* Present while the user is dragging.
+	*/
+	SliderThumbDataAttributes["dragging"] = "data-dragging";
+	/**
+	* Indicates the orientation of the slider.
+	* @type {'horizontal' | 'vertical'}
+	*/
+	SliderThumbDataAttributes["orientation"] = "data-orientation";
+	/**
+	* Present when the slider is disabled.
+	*/
+	SliderThumbDataAttributes["disabled"] = "data-disabled";
+	/**
+	* Present when the slider is in valid state (when wrapped in Field.Root).
+	*/
+	SliderThumbDataAttributes["valid"] = "data-valid";
+	/**
+	* Present when the slider is in invalid state (when wrapped in Field.Root).
+	*/
+	SliderThumbDataAttributes["invalid"] = "data-invalid";
+	/**
+	* Present when the slider has been touched (when wrapped in Field.Root).
+	*/
+	SliderThumbDataAttributes["touched"] = "data-touched";
+	/**
+	* Present when the slider's value has changed (when wrapped in Field.Root).
+	*/
+	SliderThumbDataAttributes["dirty"] = "data-dirty";
+	/**
+	* Present when the slider is focused (when wrapped in Field.Root).
+	*/
+	SliderThumbDataAttributes["focused"] = "data-focused";
+	return SliderThumbDataAttributes;
+}({});
+
+//#endregion
+//#region src/slider/thumb/SliderThumb.vue?vue&type=script&setup=true&lang.ts
+var SliderThumb_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "SliderThumb",
+	inheritAttrs: false,
+	__name: "SliderThumb",
+	props: {
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		getAriaLabel: {
+			type: [Function, null],
+			required: false
+		},
+		getAriaValueText: {
+			type: [Function, null],
+			required: false
+		},
+		index: {
+			type: Number,
+			required: false
+		},
+		inputRef: {
+			type: [
+				Function,
+				Object,
+				null
+			],
+			required: false
+		},
+		tabIndex: {
+			type: Number,
+			required: false
+		},
+		id: {
+			type: String,
+			required: false
+		},
+		ariaLabel: {
+			type: String,
+			required: false
+		},
+		ariaLabelledby: {
+			type: String,
+			required: false
+		},
+		ariaDescribedby: {
+			type: String,
+			required: false
+		},
+		style: {
+			type: [Object, Function],
+			required: false
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "div"
+		},
+		class: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const ALL_KEYS = new Set([
+			ARROW_UP$1,
+			ARROW_DOWN$1,
+			ARROW_LEFT$1,
+			ARROW_RIGHT$1,
+			HOME,
+			END,
+			PAGE_UP,
+			PAGE_DOWN
+		]);
+		function getDefaultAriaValueText(values, index, format, locale) {
+			if (index < 0) return;
+			if (values.length === 2) {
+				if (index === 0) return `${formatNumber(values[index], locale, format)} start range`;
+				return `${formatNumber(values[index], locale, format)} end range`;
+			}
+			return format ? formatNumber(values[index], locale, format) : void 0;
+		}
+		function getNewValue(thumbValue, step, direction, min, max) {
+			return direction === 1 ? Math.min(thumbValue + step, max) : Math.max(thumbValue - step, min);
+		}
+		const attrs = useAttrs();
+		const { nonce } = useCSPContext();
+		const direction = useDirection();
+		const rootContext = useSliderRootContext();
+		const { setTouched, setFocused, validationMode, validation } = useFieldRootContext();
+		const id = useBaseUiId(props.id);
+		const disabled = computed(() => props.disabled || rootContext.disabled.value);
+		const range = computed(() => rootContext.values.value.length > 1);
+		const vertical = computed(() => rootContext.orientation.value === "vertical");
+		const rtl = computed(() => direction.value === "rtl");
+		const thumbRef = ref(null);
+		const inputRef = ref(null);
+		const restoringFocusVisibleRef = ref(false);
+		const defaultInputId = useBaseUiId();
+		const labelableId = useLabelableId();
+		const inputId = computed(() => range.value ? defaultInputId : labelableId.value);
+		const { ref: listItemRef, index: compositeIndex } = useCompositeListItem({
+			metadata: () => ({ inputId }),
+			index: () => props.index
+		});
+		const index = computed(() => !range.value ? 0 : props.index ?? compositeIndex.value);
+		const last = computed(() => index.value === rootContext.values.value.length - 1);
+		const thumbValue = computed(() => rootContext.values.value[index.value]);
+		const thumbValuePercent = computed(() => valueToPercent(thumbValue.value, rootContext.min.value, rootContext.max.value));
+		const isMounted = ref(false);
+		const positionPercent = ref(void 0);
+		onMounted(() => {
+			isMounted.value = true;
+		});
+		const safeLastUsedThumbIndex = computed(() => rootContext.lastUsedThumbIndex.value >= 0 && rootContext.lastUsedThumbIndex.value < rootContext.values.value.length ? rootContext.lastUsedThumbIndex.value : -1);
+		function setIndicatorPositionForIndex(nextInsetPosition) {
+			rootContext.setIndicatorPosition((prevPosition) => {
+				const next = [...prevPosition];
+				if (index.value === 0) next[0] = nextInsetPosition;
+				else if (last.value) next[1] = nextInsetPosition;
+				return next;
 			});
 		}
 		function getInsetPosition() {
@@ -3754,128 +4798,476 @@ var SliderThumb_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 				event.preventDefault();
 			}
 		}
-		const inputStyle = computed(() => ({
-			...visuallyHidden,
-			width: "100%",
-			height: "100%",
-			writingMode: cssWritingMode.value
-		}));
-		const inputValidationProps = computed(() => validation.getInputValidationProps());
-		const forwardedInputAttrs = computed(() => {
-			const attrsObject = attrs;
-			return {
-				onBlur: attrsObject.onBlur,
-				onFocus: attrsObject.onFocus,
-				onKeydown: attrsObject.onKeydown
-			};
-		});
-		const thumbAttrs = computed(() => {
-			const { onBlur: _onBlur, onFocus: _onFocus, onKeydown: _onKeydown, ...rest } = attrs;
-			return rest;
+		const inputStyle = computed(() => ({
+			...visuallyHidden,
+			width: "100%",
+			height: "100%",
+			writingMode: cssWritingMode.value
+		}));
+		const inputValidationProps = computed(() => validation.getInputValidationProps());
+		const forwardedInputAttrs = computed(() => {
+			const attrsObject = attrs;
+			return {
+				onBlur: attrsObject.onBlur,
+				onFocus: attrsObject.onFocus,
+				onKeydown: attrsObject.onKeydown
+			};
+		});
+		const thumbAttrs = computed(() => {
+			const { onBlur: _onBlur, onFocus: _onFocus, onKeydown: _onKeydown, ...rest } = attrs;
+			return rest;
+		});
+		const inputProps = computed(() => mergeProps$1(inputValidationProps.value, forwardedInputAttrs.value, {
+			"aria-label": ariaLabel.value,
+			"aria-labelledby": props.ariaLabelledby ?? (ariaLabel.value == null ? rootContext.labelId.value : void 0),
+			"aria-describedby": props.ariaDescribedby ?? inputValidationProps.value["aria-describedby"],
+			"aria-orientation": rootContext.orientation.value,
+			"aria-valuenow": thumbValue.value,
+			"aria-valuetext": typeof props.getAriaValueText === "function" ? props.getAriaValueText(formatNumber(thumbValue.value, rootContext.locale.value, rootContext.formatOptionsRef.value), thumbValue.value, index.value) : getDefaultAriaValueText(rootContext.values.value, index.value, rootContext.formatOptionsRef.value, rootContext.locale.value),
+			"disabled": disabled.value,
+			"form": rootContext.form.value,
+			"id": inputId.value,
+			"max": rootContext.max.value,
+			"min": rootContext.min.value,
+			"name": rootContext.name.value,
+			onChange(event) {
+				rootContext.handleInputChange(event.currentTarget.valueAsNumber, index.value, event);
+			},
+			onFocus(event) {
+				const isRestoringFocusVisible = restoringFocusVisibleRef.value;
+				restoringFocusVisibleRef.value = false;
+				rootContext.setActive(index.value);
+				setFocused(true);
+				if (isRestoringFocusVisible) event.stopPropagation();
+			},
+			"onBlur": handleBlur,
+			"onKeydown": handleKeydown,
+			"step": rootContext.step.value,
+			"style": inputStyle.value,
+			"tabIndex": props.tabIndex ?? void 0,
+			"type": "range",
+			"value": thumbValue.value ?? ""
+		}));
+		const mergedRef = useMergedRefs(listItemRef, thumbRef);
+		const thumbProps = computed(() => mergeProps$1(thumbAttrs.value, {
+			[SliderThumbDataAttributes.index]: index.value,
+			id,
+			onPointerdown(event) {
+				rootContext.pressedThumbIndexRef.value = index.value;
+				if (thumbRef.value != null) {
+					const axis = rootContext.orientation.value === "horizontal" ? "x" : "y";
+					const midpoint = getMidpoint(thumbRef.value);
+					const offset = (rootContext.orientation.value === "horizontal" ? event.clientX : event.clientY) - midpoint[axis];
+					rootContext.pressedThumbCenterOffsetRef.value = offset;
+				}
+				if (inputRef.value != null && rootContext.pressedInputRef.value !== inputRef.value) rootContext.pressedInputRef.value = inputRef.value;
+			},
+			style: thumbStyle.value,
+			suppressHydrationWarning: rootContext.renderBeforeHydration.value || void 0
+		}));
+		const { tag, mergedProps, renderless, ref: renderRef } = useRenderElement({
+			componentProps: props,
+			state: rootContext.state,
+			props: thumbProps,
+			defaultTagName: "div",
+			ref: mergedRef,
+			stateAttributesMapping: sliderStateAttributesMapping
+		});
+		watch(() => rootContext.active.value, () => {
+			if (disabled.value && rootContext.active.value === index.value) rootContext.setActive(-1);
+		});
+		return (_ctx, _cache) => {
+			return unref(renderless) ? renderSlot(_ctx.$slots, "default", {
+				key: 0,
+				ref: unref(renderRef),
+				props: unref(mergedProps),
+				state: unref(rootContext).state
+			}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), mergeProps({
+				key: 1,
+				ref: unref(renderRef)
+			}, unref(mergedProps)), {
+				default: withCtx(() => [
+					renderSlot(_ctx.$slots, "default"),
+					createElementVNode("input", mergeProps({ ref: setInputVNodeRef }, inputProps.value), null, 16),
+					createCommentVNode(" eslint-disable-next-line vue/require-component-is "),
+					unref(rootContext).inset.value && !isMounted.value && unref(rootContext).renderBeforeHydration.value && last.value ? (openBlock(), createBlock(resolveDynamicComponent("script"), {
+						key: 0,
+						nonce: unref(nonce),
+						"suppress-hydration-warning": true
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(unref(script)), 1)]),
+						_: 1
+					}, 8, ["nonce"])) : createCommentVNode("v-if", true)
+				]),
+				_: 3
+			}, 16));
+		};
+	}
+});
+
+//#endregion
+//#region src/slider/thumb/SliderThumb.vue
+var SliderThumb_default = SliderThumb_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/slider/track/SliderTrack.vue?vue&type=script&setup=true&lang.ts
+var SliderTrack_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "SliderTrack",
+	inheritAttrs: false,
+	__name: "SliderTrack",
+	props: {
+		as: {
+			type: null,
+			required: false,
+			default: "div"
+		},
+		class: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		style: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const attrs = useAttrs();
+		const rootContext = useSliderRootContext();
+		const trackProps = computed(() => mergeProps$1(attrs, { style: { position: "relative" } }));
+		const { tag, mergedProps, renderless, ref: renderRef } = useRenderElement({
+			componentProps: props,
+			state: rootContext.state,
+			props: trackProps,
+			defaultTagName: "div",
+			stateAttributesMapping: sliderStateAttributesMapping
+		});
+		return (_ctx, _cache) => {
+			return unref(renderless) ? renderSlot(_ctx.$slots, "default", {
+				key: 0,
+				ref: unref(renderRef),
+				props: unref(mergedProps),
+				state: unref(rootContext).state
+			}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), mergeProps({
+				key: 1,
+				ref: unref(renderRef)
+			}, unref(mergedProps)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16));
+		};
+	}
+});
+
+//#endregion
+//#region src/slider/track/SliderTrack.vue
+var SliderTrack_default = SliderTrack_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/slider/track/SliderTrackDataAttributes.ts
+let SliderTrackDataAttributes = /* @__PURE__ */ function(SliderTrackDataAttributes) {
+	SliderTrackDataAttributes["dragging"] = "data-dragging";
+	SliderTrackDataAttributes["orientation"] = "data-orientation";
+	SliderTrackDataAttributes["disabled"] = "data-disabled";
+	SliderTrackDataAttributes["valid"] = "data-valid";
+	SliderTrackDataAttributes["invalid"] = "data-invalid";
+	SliderTrackDataAttributes["touched"] = "data-touched";
+	SliderTrackDataAttributes["dirty"] = "data-dirty";
+	SliderTrackDataAttributes["focused"] = "data-focused";
+	return SliderTrackDataAttributes;
+}({});
+
+//#endregion
+//#region src/slider/value/SliderValue.vue?vue&type=script&setup=true&lang.ts
+/**
+* Displays the current value of the slider as text.
+* Renders an `<output>` element.
+*
+* Documentation: [Base UI Slider](https://baseui-vue.com/docs/components/slider)
+*/
+var SliderValue_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "SliderValue",
+	inheritAttrs: false,
+	__name: "SliderValue",
+	props: {
+		ariaLive: {
+			type: String,
+			required: false,
+			default: "off"
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "output"
+		},
+		class: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		style: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const attrs = useAttrs();
+		const rootContext = useSliderRootContext();
+		const outputFor = computed(() => {
+			let htmlFor = "";
+			for (const thumbMetadata of rootContext.thumbMap.value.values()) if (thumbMetadata?.inputId) htmlFor += `${thumbMetadata.inputId} `;
+			return htmlFor.trim() === "" ? void 0 : htmlFor.trim();
 		});
-		const inputProps = computed(() => mergeProps$1(inputValidationProps.value, forwardedInputAttrs.value, {
-			"aria-label": ariaLabel.value,
-			"aria-labelledby": props.ariaLabelledby ?? (ariaLabel.value == null ? rootContext.labelId.value : void 0),
-			"aria-describedby": props.ariaDescribedby ?? inputValidationProps.value["aria-describedby"],
-			"aria-orientation": rootContext.orientation.value,
-			"aria-valuenow": thumbValue.value,
-			"aria-valuetext": typeof props.getAriaValueText === "function" ? props.getAriaValueText(formatNumber(thumbValue.value, rootContext.locale.value, rootContext.formatOptionsRef.value), thumbValue.value, index.value) : getDefaultAriaValueText(rootContext.values.value, index.value, rootContext.formatOptionsRef.value, rootContext.locale.value),
-			"disabled": disabled.value,
-			"form": rootContext.form.value,
-			"id": inputId.value,
-			"max": rootContext.max.value,
-			"min": rootContext.min.value,
-			"name": rootContext.name.value,
-			onChange(event) {
-				rootContext.handleInputChange(event.currentTarget.valueAsNumber, index.value, event);
-			},
-			onFocus(event) {
-				const isRestoringFocusVisible = restoringFocusVisibleRef.value;
-				restoringFocusVisibleRef.value = false;
-				rootContext.setActive(index.value);
-				setFocused(true);
-				if (isRestoringFocusVisible) event.stopPropagation();
-			},
-			"onBlur": handleBlur,
-			"onKeydown": handleKeydown,
-			"step": rootContext.step.value,
-			"style": inputStyle.value,
-			"tabIndex": props.tabIndex ?? void 0,
-			"type": "range",
-			"value": thumbValue.value ?? ""
-		}));
-		const mergedRef = useMergedRefs(listItemRef, thumbRef);
-		const thumbProps = computed(() => mergeProps$1(thumbAttrs.value, {
-			[SliderThumbDataAttributes.index]: index.value,
-			id,
-			onPointerdown(event) {
-				rootContext.pressedThumbIndexRef.value = index.value;
-				if (thumbRef.value != null) {
-					const axis = rootContext.orientation.value === "horizontal" ? "x" : "y";
-					const midpoint = getMidpoint(thumbRef.value);
-					const offset = (rootContext.orientation.value === "horizontal" ? event.clientX : event.clientY) - midpoint[axis];
-					rootContext.pressedThumbCenterOffsetRef.value = offset;
-				}
-				if (inputRef.value != null && rootContext.pressedInputRef.value !== inputRef.value) rootContext.pressedInputRef.value = inputRef.value;
-			},
-			style: thumbStyle.value,
-			suppressHydrationWarning: rootContext.renderBeforeHydration.value || void 0
+		const formattedValues = computed(() => rootContext.values.value.map((value) => formatNumber(value, rootContext.locale.value, rootContext.formatOptionsRef.value)));
+		const defaultDisplayValue = computed(() => rootContext.values.value.map((value, index) => formattedValues.value[index] || String(value)).join(" – "));
+		const valueProps = computed(() => mergeProps$1(attrs, {
+			"aria-live": props.ariaLive,
+			"for": outputFor.value
 		}));
 		const { tag, mergedProps, renderless, ref: renderRef } = useRenderElement({
 			componentProps: props,
 			state: rootContext.state,
-			props: thumbProps,
-			defaultTagName: "div",
-			ref: mergedRef,
+			props: valueProps,
+			defaultTagName: "output",
 			stateAttributesMapping: sliderStateAttributesMapping
 		});
-		watch(() => rootContext.active.value, () => {
-			if (disabled.value && rootContext.active.value === index.value) rootContext.setActive(-1);
-		});
 		return (_ctx, _cache) => {
 			return unref(renderless) ? renderSlot(_ctx.$slots, "default", {
 				key: 0,
 				ref: unref(renderRef),
 				props: unref(mergedProps),
-				state: unref(rootContext).state
+				state: unref(rootContext).state,
+				formattedValues: formattedValues.value,
+				values: unref(rootContext).values.value
 			}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), mergeProps({
 				key: 1,
 				ref: unref(renderRef)
 			}, unref(mergedProps)), {
-				default: withCtx(() => [
-					renderSlot(_ctx.$slots, "default"),
-					createElementVNode("input", mergeProps({ ref: setInputVNodeRef }, inputProps.value), null, 16),
-					createCommentVNode(" eslint-disable-next-line vue/require-component-is "),
-					unref(rootContext).inset.value && !isMounted.value && unref(rootContext).renderBeforeHydration.value && last.value ? (openBlock(), createBlock(resolveDynamicComponent("script"), {
-						key: 0,
-						nonce: unref(nonce),
-						"suppress-hydration-warning": true
-					}, {
-						default: withCtx(() => [createTextVNode(toDisplayString(unref(script)), 1)]),
-						_: 1
-					}, 8, ["nonce"])) : createCommentVNode("v-if", true)
-				]),
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {
+					formattedValues: formattedValues.value,
+					values: unref(rootContext).values.value
+				}, () => [createTextVNode(toDisplayString(defaultDisplayValue.value), 1)])]),
 				_: 3
 			}, 16));
 		};
 	}
-});
+});
+
+//#endregion
+//#region src/slider/value/SliderValue.vue
+var SliderValue_default = SliderValue_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/slider/value/SliderValueDataAttributes.ts
+let SliderValueDataAttributes = /* @__PURE__ */ function(SliderValueDataAttributes) {
+	/**
+	* Present while the user is dragging.
+	*/
+	SliderValueDataAttributes["dragging"] = "data-dragging";
+	/**
+	* Indicates the orientation of the slider.
+	* @type {'horizontal' | 'vertical'}
+	*/
+	SliderValueDataAttributes["orientation"] = "data-orientation";
+	/**
+	* Present when the slider is disabled.
+	*/
+	SliderValueDataAttributes["disabled"] = "data-disabled";
+	/**
+	* Present when the slider is in valid state (when wrapped in Field.Root).
+	*/
+	SliderValueDataAttributes["valid"] = "data-valid";
+	/**
+	* Present when the slider is in invalid state (when wrapped in Field.Root).
+	*/
+	SliderValueDataAttributes["invalid"] = "data-invalid";
+	/**
+	* Present when the slider has been touched (when wrapped in Field.Root).
+	*/
+	SliderValueDataAttributes["touched"] = "data-touched";
+	/**
+	* Present when the slider's value has changed (when wrapped in Field.Root).
+	*/
+	SliderValueDataAttributes["dirty"] = "data-dirty";
+	/**
+	* Present when the slider is focused (when wrapped in Field.Root).
+	*/
+	SliderValueDataAttributes["focused"] = "data-focused";
+	return SliderValueDataAttributes;
+}({});
+
+//#endregion
+//#region src/switch/root/SwitchRootDataAttributes.ts
+let SwitchRootDataAttributes = /* @__PURE__ */ function(SwitchRootDataAttributes) {
+	/**
+	* Present when the switch is checked.
+	*/
+	SwitchRootDataAttributes["checked"] = "data-checked";
+	/**
+	* Present when the switch is not checked.
+	*/
+	SwitchRootDataAttributes["unchecked"] = "data-unchecked";
+	/**
+	* Present when the switch is disabled.
+	*/
+	SwitchRootDataAttributes["disabled"] = "data-disabled";
+	/**
+	* Present when the switch is readonly.
+	*/
+	SwitchRootDataAttributes["readonly"] = "data-readonly";
+	/**
+	* Present when the switch is required.
+	*/
+	SwitchRootDataAttributes["required"] = "data-required";
+	/**
+	* Present when the switch is in valid state (when wrapped in FieldRoot).
+	*/
+	SwitchRootDataAttributes["valid"] = "data-valid";
+	/**
+	* Present when the switch is in invalid state (when wrapped in FieldRoot).
+	*/
+	SwitchRootDataAttributes["invalid"] = "data-invalid";
+	/**
+	* Present when the switch has been touched (when wrapped in FieldRoot).
+	*/
+	SwitchRootDataAttributes["touched"] = "data-touched";
+	/**
+	* Present when the switch's value has changed (when wrapped in FieldRoot).
+	*/
+	SwitchRootDataAttributes["dirty"] = "data-dirty";
+	/**
+	* Present when the switch is active (when wrapped in FieldRoot).
+	*/
+	SwitchRootDataAttributes["filled"] = "data-filled";
+	/**
+	* Present when the switch is focused (when wrapped in FieldRoot).
+	*/
+	SwitchRootDataAttributes["focused"] = "data-focused";
+	return SwitchRootDataAttributes;
+}({});
+
+//#endregion
+//#region src/switch/stateAttributesMapping.ts
+const CHECKED_ATTRS = { [SwitchRootDataAttributes.checked]: "" };
+const UNCHECKED_ATTRS = { [SwitchRootDataAttributes.unchecked]: "" };
+const stateAttributesMapping = {
+	...fieldValidityMapping,
+	checked(value) {
+		if (value) return CHECKED_ATTRS;
+		return UNCHECKED_ATTRS;
+	}
+};
 
 //#endregion
-//#region src/slider/thumb/SliderThumb.vue
-var SliderThumb_default = SliderThumb_vue_vue_type_script_setup_true_lang_default;
+//#region src/switch/root/SwitchRootContext.ts
+const switchRootContextKey = Symbol("SwitchRootContext");
+function useSwitchRootContext(optional = false) {
+	const context = inject(switchRootContextKey, void 0);
+	if (!context && !optional) throw new Error("Base UI Vue: SwitchRootContext is missing. Switch parts must be placed within <SwitchRoot>.");
+	return context;
+}
 
 //#endregion
-//#region src/slider/track/SliderTrack.vue?vue&type=script&setup=true&lang.ts
-var SliderTrack_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
-	name: "SliderTrack",
+//#region src/switch/root/SwitchRoot.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = [
+	"form",
+	"name",
+	"value"
+];
+/**
+* Represents the switch itself.
+* Renders a `<span>` element and a hidden `<input>` beside.
+*
+* Documentation: [Base UI Vue Switch](https://baseui-vue.com/docs/components/switch)
+*/
+var SwitchRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "SwitchRoot",
 	inheritAttrs: false,
-	__name: "SliderTrack",
+	__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: "div"
+			default: "span"
 		},
 		class: {
 			type: Function,
@@ -3895,75 +5287,217 @@ var SliderTrack_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 			skipCheck: true
 		}
 	},
-	setup(__props) {
+	emits: ["checkedChange"],
+	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
-		const attrs = useAttrs();
-		const rootContext = useSliderRootContext();
-		const trackProps = computed(() => mergeProps$1(attrs, { style: { position: "relative" } }));
+		const emit = __emit;
+		const attrsObject = useAttrs();
+		const instance = getCurrentInstance();
+		const { clearErrors } = useFormContext();
+		const { disabled: fieldDisabled, name: fieldName, setDirty, setFilled, setFocused, setTouched, state: fieldState, validationMode, validityData, shouldValidateOnChange, validation } = useFieldRootContext();
+		const labelableContext = useLabelableContext();
+		const disabled = computed(() => fieldDisabled.value || props.disabled);
+		const name = computed(() => fieldName.value ?? props.name);
+		const rootElementId = useBaseUiId();
+		const controlId = useLabelableId({ id: () => props.id });
+		const inputId = computed(() => props.nativeButton ? void 0 : controlId.value);
+		const { value: checked, setValue: setCheckedState } = useControllableState({
+			controlled: () => instance?.vnode.props && Object.prototype.hasOwnProperty.call(instance.vnode.props, "checked") ? props.checked : void 0,
+			default: () => props.defaultChecked,
+			name: "Switch",
+			state: "checked"
+		});
+		const controlRef = ref(null);
+		const inputElementRef = ref(null);
+		const mergedInputRef = useMergedRefs(inputElementRef, props.inputRef);
+		useField({
+			id: computed(() => rootElementId),
+			commit: (value) => validation.commit(value),
+			value: checked,
+			controlRef,
+			name,
+			getValue: () => checked.value
+		});
+		const ariaLabelledBy = useAriaLabelledBy({
+			ariaLabelledBy: computed(() => props["aria-labelledby"]),
+			labelId: labelableContext.labelId,
+			labelSourceRef: inputElementRef,
+			enableFallback: !props.nativeButton,
+			labelSourceId: inputId
+		});
+		watchEffect(() => {
+			if (checked.value) setFilled(true);
+		});
+		watchEffect(() => {
+			if (!inputElementRef.value) return;
+			validation.setInputRef(inputElementRef.value);
+		});
+		watch(() => checked.value, (nextChecked) => {
+			clearErrors(name.value);
+			setFilled(nextChecked);
+			setDirty(nextChecked !== validityData.value.initialValue);
+			if (shouldValidateOnChange()) validation.commit(nextChecked);
+			else validation.commit(nextChecked, true);
+		}, { flush: "sync" });
+		const { getButtonProps, buttonRef } = useButton({
+			disabled,
+			native: computed(() => props.nativeButton)
+		});
+		function combineDescriptionProps(localProps, validationProps) {
+			const localDescribedBy = localProps["aria-describedby"];
+			const validationDescribedBy = validationProps["aria-describedby"];
+			const describedBy = Array.from(new Set([localDescribedBy, validationDescribedBy].filter(Boolean).flatMap((value) => String(value).split(/\s+/).filter(Boolean)))).join(" ") || void 0;
+			return {
+				...localProps,
+				...validationProps,
+				"aria-describedby": describedBy
+			};
+		}
+		function applyCheckedChange(nextChecked, event, onApplied) {
+			const details = createChangeEventDetails(REASONS.none, event);
+			emit("checkedChange", nextChecked, details);
+			if (details.isCanceled) return false;
+			onApplied?.();
+			setCheckedState(nextChecked);
+			return true;
+		}
+		function handleInputChange(event) {
+			const target = event.currentTarget;
+			if (props.readOnly || disabled.value) {
+				event.preventDefault();
+				event.stopPropagation();
+				target.checked = checked.value;
+				return;
+			}
+			if (!applyCheckedChange(target.checked, event)) target.checked = checked.value;
+		}
+		function handleRootClick(event) {
+			if (props.readOnly || disabled.value) return;
+			event.preventDefault();
+			const nextChecked = !checked.value;
+			applyCheckedChange(nextChecked, event, () => {
+				if (inputElementRef.value) inputElementRef.value.checked = nextChecked;
+			});
+		}
+		function handleFocus() {
+			if (!disabled.value) setFocused(true);
+		}
+		function handleBlur() {
+			if (disabled.value) return;
+			setTouched(true);
+			setFocused(false);
+			if (validationMode.value === "onBlur") validation.commit(checked.value);
+		}
+		const state = computed(() => ({
+			...fieldState.value,
+			checked: checked.value,
+			disabled: disabled.value,
+			readOnly: props.readOnly,
+			required: props.required
+		}));
+		provide(switchRootContextKey, state);
+		__expose({ element: controlRef });
+		const mergedRootRef = useMergedRefs(buttonRef, controlRef);
+		const buttonInteractionAttrs = computed(() => ({
+			onClick: attrsObject.onClick,
+			onKeydown: attrsObject.onKeydown,
+			onKeyup: attrsObject.onKeyup,
+			onMousedown: attrsObject.onMousedown,
+			onPointerdown: attrsObject.onPointerdown
+		}));
+		const passthroughAttrs = computed(() => {
+			const { onClick, onKeydown, onKeyup, onMousedown, onPointerdown, ...rest } = attrsObject;
+			return rest;
+		});
 		const { tag, mergedProps, renderless, ref: renderRef } = useRenderElement({
 			componentProps: props,
-			state: rootContext.state,
-			props: trackProps,
-			defaultTagName: "div",
-			stateAttributesMapping: sliderStateAttributesMapping
+			state,
+			props: computed(() => {
+				const localDescriptionProps = labelableContext.getDescriptionProps();
+				const validationProps = validation.getValidationProps();
+				return mergeProps$1(getButtonProps(mergeProps$1(buttonInteractionAttrs.value, { onClick: handleRootClick })), combineDescriptionProps(localDescriptionProps, validationProps), {
+					"id": props.nativeButton ? controlId.value : rootElementId,
+					"role": "switch",
+					"aria-checked": checked.value,
+					"aria-readonly": props.readOnly || void 0,
+					"aria-required": props.required || void 0,
+					"aria-labelledby": ariaLabelledBy.value,
+					"onFocus": handleFocus,
+					"onBlur": handleBlur
+				}, passthroughAttrs.value);
+			}),
+			stateAttributesMapping,
+			defaultTagName: "span",
+			ref: mergedRootRef
+		});
+		const inputProps = computed(() => {
+			const localDescriptionProps = labelableContext.getDescriptionProps();
+			const validationProps = validation.getInputValidationProps();
+			return mergeProps$1({
+				"checked": checked.value,
+				"disabled": disabled.value,
+				"form": props.form,
+				"id": props.nativeButton ? void 0 : inputId.value,
+				"name": name.value,
+				"required": props.required,
+				"type": "checkbox",
+				"aria-hidden": true,
+				"tabindex": -1,
+				"style": name.value ? visuallyHiddenInput : visuallyHidden,
+				"onChange": handleInputChange,
+				onFocus() {
+					controlRef.value?.focus();
+				}
+			}, props.value !== void 0 ? { value: props.value } : EMPTY_OBJECT, combineDescriptionProps(localDescriptionProps, validationProps));
 		});
 		return (_ctx, _cache) => {
-			return unref(renderless) ? renderSlot(_ctx.$slots, "default", {
-				key: 0,
-				ref: unref(renderRef),
-				props: unref(mergedProps),
-				state: unref(rootContext).state
-			}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), mergeProps({
-				key: 1,
-				ref: unref(renderRef)
-			}, unref(mergedProps)), {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-				_: 3
-			}, 16));
+			return openBlock(), createElementBlock(Fragment, null, [
+				unref(renderless) ? renderSlot(_ctx.$slots, "default", {
+					key: 0,
+					ref: unref(renderRef),
+					props: unref(mergedProps),
+					state: state.value
+				}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), mergeProps({
+					key: 1,
+					ref: unref(renderRef)
+				}, unref(mergedProps)), {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "default", { state: state.value })]),
+					_: 3
+				}, 16)),
+				!unref(checked) && !disabled.value && name.value && __props.uncheckedValue !== void 0 ? (openBlock(), createElementBlock("input", {
+					key: 2,
+					type: "hidden",
+					form: __props.form,
+					name: name.value,
+					value: __props.uncheckedValue
+				}, null, 8, _hoisted_1)) : createCommentVNode("v-if", true),
+				createElementVNode("input", mergeProps({ ref: unref(mergedInputRef) }, inputProps.value), null, 16)
+			], 64);
 		};
 	}
 });
 
 //#endregion
-//#region src/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;
-}({});
+//#region src/switch/root/SwitchRoot.vue
+var SwitchRoot_default = SwitchRoot_vue_vue_type_script_setup_true_lang_default;
 
 //#endregion
-//#region src/slider/value/SliderValue.vue?vue&type=script&setup=true&lang.ts
+//#region src/switch/thumb/SwitchThumb.vue?vue&type=script&setup=true&lang.ts
 /**
-* Displays the current value of the slider as text.
-* Renders an `<output>` element.
+* The movable part of the switch that indicates whether the switch is on or off.
+* Renders a `<span>`.
 *
-* Documentation: [Base UI Slider](https://baseui-vue.com/docs/components/slider)
+* Documentation: [Base UI Vue Switch](https://baseui-vue.com/docs/components/switch)
 */
-var SliderValue_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
-	name: "SliderValue",
+var SwitchThumb_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "SwitchThumb",
 	inheritAttrs: false,
-	__name: "SliderValue",
+	__name: "SwitchThumb",
 	props: {
-		ariaLive: {
-			type: String,
-			required: false,
-			default: "off"
-		},
 		as: {
 			type: null,
 			required: false,
-			default: "output"
+			default: "span"
 		},
 		class: {
 			type: Function,
@@ -3985,42 +5519,31 @@ var SliderValue_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 	},
 	setup(__props) {
 		const props = __props;
-		const attrs = useAttrs();
-		const rootContext = useSliderRootContext();
-		const outputFor = computed(() => {
-			let htmlFor = "";
-			for (const thumbMetadata of rootContext.thumbMap.value.values()) if (thumbMetadata?.inputId) htmlFor += `${thumbMetadata.inputId} `;
-			return htmlFor.trim() === "" ? void 0 : htmlFor.trim();
-		});
-		const formattedValues = computed(() => rootContext.values.value.map((value) => formatNumber(value, rootContext.locale.value, rootContext.formatOptionsRef.value)));
-		const defaultDisplayValue = computed(() => rootContext.values.value.map((value, index) => formattedValues.value[index] || String(value)).join(" – "));
-		const valueProps = computed(() => mergeProps$1(attrs, {
-			"aria-live": props.ariaLive,
-			"for": outputFor.value
+		const attrsObject = useAttrs();
+		const { state: fieldState } = useFieldRootContext();
+		const rootState = useSwitchRootContext();
+		const state = computed(() => ({
+			...fieldState.value,
+			...rootState.value
 		}));
 		const { tag, mergedProps, renderless, ref: renderRef } = useRenderElement({
 			componentProps: props,
-			state: rootContext.state,
-			props: valueProps,
-			defaultTagName: "output",
-			stateAttributesMapping: sliderStateAttributesMapping
+			state,
+			props: computed(() => attrsObject),
+			stateAttributesMapping,
+			defaultTagName: "span"
 		});
 		return (_ctx, _cache) => {
 			return unref(renderless) ? renderSlot(_ctx.$slots, "default", {
 				key: 0,
 				ref: unref(renderRef),
 				props: unref(mergedProps),
-				state: unref(rootContext).state,
-				formattedValues: formattedValues.value,
-				values: unref(rootContext).values.value
+				state: state.value
 			}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), mergeProps({
 				key: 1,
 				ref: unref(renderRef)
 			}, unref(mergedProps)), {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {
-					formattedValues: formattedValues.value,
-					values: unref(rootContext).values.value
-				}, () => [createTextVNode(toDisplayString(defaultDisplayValue.value), 1)])]),
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", { state: state.value })]),
 				_: 3
 			}, 16));
 		};
@@ -4028,194 +5551,440 @@ var SliderValue_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 });
 
 //#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;
-}({});
+//#region src/switch/thumb/SwitchThumb.vue
+var SwitchThumb_default = SwitchThumb_vue_vue_type_script_setup_true_lang_default;
 
 //#endregion
-//#region src/switch/root/SwitchRootDataAttributes.ts
-let SwitchRootDataAttributes = /* @__PURE__ */ function(SwitchRootDataAttributes) {
+//#region src/switch/thumb/SwitchThumbDataAttributes.ts
+let SwitchThumbDataAttributes = /* @__PURE__ */ function(SwitchThumbDataAttributes) {
 	/**
 	* Present when the switch is checked.
 	*/
-	SwitchRootDataAttributes["checked"] = "data-checked";
+	SwitchThumbDataAttributes["checked"] = "data-checked";
 	/**
 	* Present when the switch is not checked.
 	*/
-	SwitchRootDataAttributes["unchecked"] = "data-unchecked";
+	SwitchThumbDataAttributes["unchecked"] = "data-unchecked";
 	/**
 	* Present when the switch is disabled.
 	*/
-	SwitchRootDataAttributes["disabled"] = "data-disabled";
+	SwitchThumbDataAttributes["disabled"] = "data-disabled";
 	/**
 	* Present when the switch is readonly.
 	*/
-	SwitchRootDataAttributes["readonly"] = "data-readonly";
+	SwitchThumbDataAttributes["readonly"] = "data-readonly";
 	/**
 	* Present when the switch is required.
 	*/
-	SwitchRootDataAttributes["required"] = "data-required";
+	SwitchThumbDataAttributes["required"] = "data-required";
 	/**
 	* Present when the switch is in valid state (when wrapped in FieldRoot).
 	*/
-	SwitchRootDataAttributes["valid"] = "data-valid";
+	SwitchThumbDataAttributes["valid"] = "data-valid";
 	/**
 	* Present when the switch is in invalid state (when wrapped in FieldRoot).
 	*/
-	SwitchRootDataAttributes["invalid"] = "data-invalid";
+	SwitchThumbDataAttributes["invalid"] = "data-invalid";
 	/**
 	* Present when the switch has been touched (when wrapped in FieldRoot).
 	*/
-	SwitchRootDataAttributes["touched"] = "data-touched";
+	SwitchThumbDataAttributes["touched"] = "data-touched";
 	/**
 	* Present when the switch's value has changed (when wrapped in FieldRoot).
 	*/
-	SwitchRootDataAttributes["dirty"] = "data-dirty";
+	SwitchThumbDataAttributes["dirty"] = "data-dirty";
 	/**
 	* Present when the switch is active (when wrapped in FieldRoot).
 	*/
-	SwitchRootDataAttributes["filled"] = "data-filled";
+	SwitchThumbDataAttributes["filled"] = "data-filled";
 	/**
 	* Present when the switch is focused (when wrapped in FieldRoot).
 	*/
-	SwitchRootDataAttributes["focused"] = "data-focused";
-	return SwitchRootDataAttributes;
+	SwitchThumbDataAttributes["focused"] = "data-focused";
+	return SwitchThumbDataAttributes;
+}({});
+
+//#endregion
+//#region src/utils/styles.ts
+const DISABLE_SCROLLBAR_CLASS_NAME = "base-ui-disable-scrollbar";
+const STYLE_ELEMENT_ID = `style-${DISABLE_SCROLLBAR_CLASS_NAME}`;
+const styleDisableScrollbar = {
+	className: DISABLE_SCROLLBAR_CLASS_NAME,
+	inject(nonce, disableStyleElements) {
+		if (disableStyleElements) return;
+		if (typeof document === "undefined") return;
+		if (document.getElementById(STYLE_ELEMENT_ID)) return;
+		const style = document.createElement("style");
+		style.id = STYLE_ELEMENT_ID;
+		if (nonce) style.nonce = nonce;
+		style.textContent = `.${DISABLE_SCROLLBAR_CLASS_NAME}{scrollbar-width:none}.${DISABLE_SCROLLBAR_CLASS_NAME}::-webkit-scrollbar{display:none}`;
+		document.head.appendChild(style);
+	}
+};
+
+//#endregion
+//#region src/scroll-area/constants.ts
+const SCROLL_TIMEOUT = 500;
+const MIN_THUMB_SIZE = 16;
+
+//#endregion
+//#region src/scroll-area/scrollbar/ScrollAreaScrollbarDataAttributes.ts
+let ScrollAreaScrollbarDataAttributes = /* @__PURE__ */ function(ScrollAreaScrollbarDataAttributes) {
+	ScrollAreaScrollbarDataAttributes["orientation"] = "data-orientation";
+	ScrollAreaScrollbarDataAttributes["hovering"] = "data-hovering";
+	ScrollAreaScrollbarDataAttributes["scrolling"] = "data-scrolling";
+	ScrollAreaScrollbarDataAttributes["hasOverflowX"] = "data-has-overflow-x";
+	ScrollAreaScrollbarDataAttributes["hasOverflowY"] = "data-has-overflow-y";
+	ScrollAreaScrollbarDataAttributes["overflowXStart"] = "data-overflow-x-start";
+	ScrollAreaScrollbarDataAttributes["overflowXEnd"] = "data-overflow-x-end";
+	ScrollAreaScrollbarDataAttributes["overflowYStart"] = "data-overflow-y-start";
+	ScrollAreaScrollbarDataAttributes["overflowYEnd"] = "data-overflow-y-end";
+	return ScrollAreaScrollbarDataAttributes;
+}({});
+
+//#endregion
+//#region src/scroll-area/utils/getOffset.ts
+function getOffset(element, prop, axis) {
+	if (!element) return 0;
+	const styles = getComputedStyle(element);
+	const propAxis = axis === "x" ? "Inline" : "Block";
+	const start = getStyleNumber(styles, `${prop}${propAxis}Start`);
+	const end = getStyleNumber(styles, `${prop}${propAxis}End`);
+	if (axis === "x" && prop === "margin" && styles.direction === "rtl" && isSafari()) return start * 2;
+	return start + end;
+}
+function getStyleNumber(styles, prop) {
+	return Number.parseFloat(styles[prop]) || 0;
+}
+function isSafari() {
+	if (typeof navigator === "undefined") return false;
+	return /AppleWebKit/.test(navigator.userAgent) && !/Chrome|Chromium|Edg\//.test(navigator.userAgent);
+}
+
+//#endregion
+//#region src/scroll-area/root/ScrollAreaRootCssVars.ts
+let ScrollAreaRootCssVars = /* @__PURE__ */ function(ScrollAreaRootCssVars) {
+	ScrollAreaRootCssVars["scrollAreaCornerHeight"] = "--scroll-area-corner-height";
+	ScrollAreaRootCssVars["scrollAreaCornerWidth"] = "--scroll-area-corner-width";
+	return ScrollAreaRootCssVars;
 }({});
 
 //#endregion
-//#region src/switch/stateAttributesMapping.ts
-const CHECKED_ATTRS = { [SwitchRootDataAttributes.checked]: "" };
-const UNCHECKED_ATTRS = { [SwitchRootDataAttributes.unchecked]: "" };
-const stateAttributesMapping = {
-	...fieldValidityMapping,
-	checked(value) {
-		if (value) return CHECKED_ATTRS;
-		return UNCHECKED_ATTRS;
-	}
-};
+//#region src/scroll-area/root/ScrollAreaRoot.vue?vue&type=script&setup=true&lang.ts
+var ScrollAreaRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "ScrollAreaRoot",
+	inheritAttrs: false,
+	__name: "ScrollAreaRoot",
+	props: {
+		overflowEdgeThreshold: {
+			type: [Number, Object],
+			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
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const DEFAULT_SIZE = {
+			width: 0,
+			height: 0
+		};
+		const DEFAULT_OVERFLOW_EDGES = {
+			xStart: false,
+			xEnd: false,
+			yStart: false,
+			yEnd: false
+		};
+		const DEFAULT_HIDDEN_STATE = {
+			x: true,
+			y: true,
+			corner: true
+		};
+		const DEFAULT_COORDS = {
+			x: 0,
+			y: 0
+		};
+		const attrs = useAttrs();
+		const overflowEdgeThreshold = computed(() => normalizeOverflowEdgeThreshold(props.overflowEdgeThreshold));
+		const rootId = useBaseUiId();
+		const { nonce, disableStyleElements } = useCSPContext();
+		const hovering = ref(false);
+		const scrollingX = ref(false);
+		const scrollingY = ref(false);
+		const touchModality = ref(false);
+		const hasMeasuredScrollbar = ref(false);
+		const cornerSize = ref({ ...DEFAULT_SIZE });
+		const thumbSize = ref({ ...DEFAULT_SIZE });
+		const overflowEdges = ref({ ...DEFAULT_OVERFLOW_EDGES });
+		const hiddenState = ref({ ...DEFAULT_HIDDEN_STATE });
+		const rootRef = shallowRef(null);
+		const viewportRef = shallowRef(null);
+		const scrollbarYRef = shallowRef(null);
+		const scrollbarXRef = shallowRef(null);
+		const thumbYRef = shallowRef(null);
+		const thumbXRef = shallowRef(null);
+		const cornerRef = shallowRef(null);
+		let scrollYTimeoutId;
+		let scrollXTimeoutId;
+		const thumbDragging = { current: false };
+		const startY = { current: 0 };
+		const startX = { current: 0 };
+		const startScrollTop = { current: 0 };
+		const startScrollLeft = { current: 0 };
+		const currentOrientation = { current: "vertical" };
+		const scrollPosition = { current: { ...DEFAULT_COORDS } };
+		function handleScroll(pos) {
+			const offsetX = pos.x - scrollPosition.current.x;
+			const offsetY = pos.y - scrollPosition.current.y;
+			scrollPosition.current = pos;
+			if (offsetY !== 0) {
+				scrollingY.value = true;
+				clearTimeout(scrollYTimeoutId);
+				scrollYTimeoutId = setTimeout(() => {
+					scrollingY.value = false;
+				}, SCROLL_TIMEOUT);
+			}
+			if (offsetX !== 0) {
+				scrollingX.value = true;
+				clearTimeout(scrollXTimeoutId);
+				scrollXTimeoutId = setTimeout(() => {
+					scrollingX.value = false;
+				}, SCROLL_TIMEOUT);
+			}
+		}
+		function handlePointerDown(event) {
+			if (event.button !== 0) return;
+			thumbDragging.current = true;
+			startY.current = event.clientY;
+			startX.current = event.clientX;
+			currentOrientation.current = event.currentTarget.getAttribute(ScrollAreaScrollbarDataAttributes.orientation);
+			if (viewportRef.value) {
+				startScrollTop.current = viewportRef.value.scrollTop;
+				startScrollLeft.current = viewportRef.value.scrollLeft;
+			}
+			if (thumbYRef.value && currentOrientation.current === "vertical") thumbYRef.value.setPointerCapture(event.pointerId);
+			if (thumbXRef.value && currentOrientation.current === "horizontal") thumbXRef.value.setPointerCapture(event.pointerId);
+		}
+		function handlePointerMove(event) {
+			if (!thumbDragging.current) return;
+			const deltaY = event.clientY - startY.current;
+			const deltaX = event.clientX - startX.current;
+			if (viewportRef.value) {
+				const scrollableContentHeight = viewportRef.value.scrollHeight;
+				const viewportHeight = viewportRef.value.clientHeight;
+				const scrollableContentWidth = viewportRef.value.scrollWidth;
+				const viewportWidth = viewportRef.value.clientWidth;
+				if (thumbYRef.value && scrollbarYRef.value && currentOrientation.current === "vertical") {
+					const scrollbarYOffset = getOffset(scrollbarYRef.value, "padding", "y");
+					const thumbYOffset = getOffset(thumbYRef.value, "margin", "y");
+					const thumbHeight = thumbYRef.value.offsetHeight;
+					const scrollRatioY = deltaY / (scrollbarYRef.value.offsetHeight - thumbHeight - scrollbarYOffset - thumbYOffset);
+					viewportRef.value.scrollTop = startScrollTop.current + scrollRatioY * (scrollableContentHeight - viewportHeight);
+					event.preventDefault();
+					scrollingY.value = true;
+					clearTimeout(scrollYTimeoutId);
+					scrollYTimeoutId = setTimeout(() => {
+						scrollingY.value = false;
+					}, SCROLL_TIMEOUT);
+				}
+				if (thumbXRef.value && scrollbarXRef.value && currentOrientation.current === "horizontal") {
+					const scrollbarXOffset = getOffset(scrollbarXRef.value, "padding", "x");
+					const thumbXOffset = getOffset(thumbXRef.value, "margin", "x");
+					const thumbWidth = thumbXRef.value.offsetWidth;
+					const scrollRatioX = deltaX / (scrollbarXRef.value.offsetWidth - thumbWidth - scrollbarXOffset - thumbXOffset);
+					viewportRef.value.scrollLeft = startScrollLeft.current + scrollRatioX * (scrollableContentWidth - viewportWidth);
+					event.preventDefault();
+					scrollingX.value = true;
+					clearTimeout(scrollXTimeoutId);
+					scrollXTimeoutId = setTimeout(() => {
+						scrollingX.value = false;
+					}, SCROLL_TIMEOUT);
+				}
+			}
+		}
+		function handlePointerUp(event) {
+			thumbDragging.current = false;
+			if (thumbYRef.value && currentOrientation.current === "vertical") thumbYRef.value.releasePointerCapture(event.pointerId);
+			if (thumbXRef.value && currentOrientation.current === "horizontal") thumbXRef.value.releasePointerCapture(event.pointerId);
+		}
+		function handleTouchModalityChange(event) {
+			touchModality.value = event.pointerType === "touch";
+		}
+		function handlePointerEnterOrMove(event) {
+			handleTouchModalityChange(event);
+			if (event.pointerType !== "touch") hovering.value = contains(rootRef.value, event.target);
+		}
+		const state = computed(() => ({
+			scrolling: scrollingX.value || scrollingY.value,
+			hasOverflowX: !hiddenState.value.x,
+			hasOverflowY: !hiddenState.value.y,
+			overflowXStart: overflowEdges.value.xStart,
+			overflowXEnd: overflowEdges.value.xEnd,
+			overflowYStart: overflowEdges.value.yStart,
+			overflowYEnd: overflowEdges.value.yEnd,
+			cornerHidden: hiddenState.value.corner
+		}));
+		const { tag, mergedProps, renderless, ref: renderRef } = useRenderElement({
+			componentProps: props,
+			state,
+			props: computed(() => mergeProps$1(attrs, {
+				role: "presentation",
+				onPointerenter: handlePointerEnterOrMove,
+				onPointermove: handlePointerEnterOrMove,
+				onPointerdown: handleTouchModalityChange,
+				onPointerleave: () => {
+					hovering.value = false;
+				},
+				style: {
+					position: "relative",
+					[ScrollAreaRootCssVars.scrollAreaCornerHeight]: `${cornerSize.value.height}px`,
+					[ScrollAreaRootCssVars.scrollAreaCornerWidth]: `${cornerSize.value.width}px`
+				}
+			})),
+			stateAttributesMapping: scrollAreaStateAttributesMapping,
+			defaultTagName: "div",
+			ref: rootRef
+		});
+		onMounted(() => {
+			styleDisableScrollbar.inject(nonce.value, disableStyleElements.value);
+		});
+		provide(scrollAreaRootContextKey, {
+			cornerSize,
+			setCornerSize: (size) => {
+				cornerSize.value = size;
+			},
+			thumbSize,
+			setThumbSize: (size) => {
+				thumbSize.value = size;
+			},
+			hasMeasuredScrollbar,
+			setHasMeasuredScrollbar: (value) => {
+				hasMeasuredScrollbar.value = value;
+			},
+			touchModality,
+			hovering,
+			setHovering: (value) => {
+				hovering.value = value;
+			},
+			scrollingX,
+			setScrollingX: (value) => {
+				scrollingX.value = value;
+			},
+			scrollingY,
+			setScrollingY: (value) => {
+				scrollingY.value = value;
+			},
+			viewportRef,
+			rootRef,
+			scrollbarYRef,
+			scrollbarXRef,
+			thumbYRef,
+			thumbXRef,
+			cornerRef,
+			handlePointerDown,
+			handlePointerMove,
+			handlePointerUp,
+			handleScroll,
+			rootId,
+			hiddenState,
+			setHiddenState: (s) => {
+				hiddenState.value = s;
+			},
+			overflowEdges,
+			setOverflowEdges: (e) => {
+				overflowEdges.value = e;
+			},
+			viewportState: state,
+			overflowEdgeThreshold
+		});
+		function normalizeOverflowEdgeThreshold(threshold) {
+			if (typeof threshold === "number") {
+				const value = Math.max(0, threshold);
+				return {
+					xStart: value,
+					xEnd: value,
+					yStart: value,
+					yEnd: value
+				};
+			}
+			return {
+				xStart: Math.max(0, threshold?.xStart || 0),
+				xEnd: Math.max(0, threshold?.xEnd || 0),
+				yStart: Math.max(0, threshold?.yStart || 0),
+				yEnd: Math.max(0, threshold?.yEnd || 0)
+			};
+		}
+		return (_ctx, _cache) => {
+			return unref(renderless) ? renderSlot(_ctx.$slots, "default", {
+				key: 0,
+				ref: unref(renderRef),
+				props: unref(mergedProps),
+				state: state.value
+			}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), mergeProps({
+				key: 1,
+				ref: unref(renderRef)
+			}, unref(mergedProps)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16));
+		};
+	}
+});
+
+//#endregion
+//#region src/scroll-area/root/ScrollAreaRoot.vue
+var ScrollAreaRoot_default = ScrollAreaRoot_vue_vue_type_script_setup_true_lang_default;
 
 //#endregion
-//#region src/switch/root/SwitchRootContext.ts
-const switchRootContextKey = Symbol("SwitchRootContext");
-function useSwitchRootContext(optional = false) {
-	const context = inject(switchRootContextKey, void 0);
-	if (!context && !optional) throw new Error("Base UI Vue: SwitchRootContext is missing. Switch parts must be placed within <SwitchRoot>.");
+//#region src/scroll-area/scrollbar/ScrollAreaScrollbarContext.ts
+const scrollAreaScrollbarContextKey = Symbol("ScrollAreaScrollbarContext");
+function useScrollAreaScrollbarContext() {
+	const context = inject(scrollAreaScrollbarContextKey);
+	if (context === void 0) throw new Error("Base UI: ScrollAreaScrollbarContext is missing. ScrollArea.Thumb must be placed within <ScrollAreaScrollbar>.");
 	return context;
 }
 
 //#endregion
-//#region src/switch/root/SwitchRoot.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1 = [
-	"form",
-	"name",
-	"value"
-];
-/**
-* Represents the switch itself.
-* Renders a `<span>` element and a hidden `<input>` beside.
-*
-* Documentation: [Base UI Vue Switch](https://baseui-vue.com/docs/components/switch)
-*/
-var SwitchRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
-	name: "SwitchRoot",
+//#region src/scroll-area/scrollbar/ScrollAreaScrollbarCssVars.ts
+let ScrollAreaScrollbarCssVars = /* @__PURE__ */ function(ScrollAreaScrollbarCssVars) {
+	ScrollAreaScrollbarCssVars["scrollAreaThumbHeight"] = "--scroll-area-thumb-height";
+	ScrollAreaScrollbarCssVars["scrollAreaThumbWidth"] = "--scroll-area-thumb-width";
+	return ScrollAreaScrollbarCssVars;
+}({});
+
+//#endregion
+//#region src/scroll-area/scrollbar/ScrollAreaScrollbar.vue?vue&type=script&setup=true&lang.ts
+var ScrollAreaScrollbar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "ScrollAreaScrollbar",
 	inheritAttrs: false,
-	__name: "SwitchRoot",
+	__name: "ScrollAreaScrollbar",
 	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: {
+		orientation: {
 			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
+			default: "vertical"
 		},
-		nativeButton: {
+		keepMounted: {
 			type: Boolean,
 			required: false,
 			default: false
@@ -4223,7 +5992,7 @@ var SwitchRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		as: {
 			type: null,
 			required: false,
-			default: "span"
+			default: "div"
 		},
 		class: {
 			type: Function,
@@ -4243,217 +6012,292 @@ var SwitchRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 			skipCheck: true
 		}
 	},
-	emits: ["checkedChange"],
-	setup(__props, { expose: __expose, emit: __emit }) {
+	setup(__props) {
 		const props = __props;
-		const emit = __emit;
-		const attrsObject = useAttrs();
-		const instance = getCurrentInstance();
-		const { clearErrors } = useFormContext();
-		const { disabled: fieldDisabled, name: fieldName, setDirty, setFilled, setFocused, setTouched, state: fieldState, validationMode, validityData, shouldValidateOnChange, validation } = useFieldRootContext();
-		const labelableContext = useLabelableContext();
-		const disabled = computed(() => fieldDisabled.value || props.disabled);
-		const name = computed(() => fieldName.value ?? props.name);
-		const rootElementId = useBaseUiId();
-		const controlId = useLabelableId({ id: () => props.id });
-		const inputId = computed(() => props.nativeButton ? void 0 : controlId.value);
-		const { value: checked, setValue: setCheckedState } = useControllableState({
-			controlled: () => instance?.vnode.props && Object.prototype.hasOwnProperty.call(instance.vnode.props, "checked") ? props.checked : void 0,
-			default: () => props.defaultChecked,
-			name: "Switch",
-			state: "checked"
-		});
-		const controlRef = ref(null);
-		const inputElementRef = ref(null);
-		const mergedInputRef = useMergedRefs(inputElementRef, props.inputRef);
-		useField({
-			id: computed(() => rootElementId),
-			commit: (value) => validation.commit(value),
-			value: checked,
-			controlRef,
-			name,
-			getValue: () => checked.value
-		});
-		const ariaLabelledBy = useAriaLabelledBy({
-			ariaLabelledBy: computed(() => props["aria-labelledby"]),
-			labelId: labelableContext.labelId,
-			labelSourceRef: inputElementRef,
-			enableFallback: !props.nativeButton,
-			labelSourceId: inputId
-		});
-		watchEffect(() => {
-			if (checked.value) setFilled(true);
-		});
-		watchEffect(() => {
-			if (!inputElementRef.value) return;
-			validation.setInputRef(inputElementRef.value);
+		const attrs = useAttrs();
+		const { hovering, scrollingX, scrollingY, hiddenState, overflowEdges, scrollbarYRef, scrollbarXRef, viewportRef, thumbYRef, thumbXRef, handlePointerDown, handlePointerUp, rootId, thumbSize, hasMeasuredScrollbar } = useScrollAreaRootContext();
+		const direction = useDirection();
+		let wheelCleanup;
+		const scrollbarElementRef = shallowRef(null);
+		watch([scrollbarElementRef, () => props.orientation], ([element, orientation], [previousElement, previousOrientation]) => {
+			if (previousElement) {
+				const previousRef = previousOrientation === "vertical" ? scrollbarYRef : scrollbarXRef;
+				if (previousRef.value === previousElement) previousRef.value = null;
+			}
+			if (!element) return;
+			const nextRef = orientation === "vertical" ? scrollbarYRef : scrollbarXRef;
+			nextRef.value = element;
 		});
-		watch(() => checked.value, (nextChecked) => {
-			clearErrors(name.value);
-			setFilled(nextChecked);
-			setDirty(nextChecked !== validityData.value.initialValue);
-			if (shouldValidateOnChange()) validation.commit(nextChecked);
-			else validation.commit(nextChecked, true);
-		}, { flush: "sync" });
-		const { getButtonProps, buttonRef } = useButton({
-			disabled,
-			native: computed(() => props.nativeButton)
+		watch([
+			scrollbarElementRef,
+			viewportRef,
+			() => props.orientation
+		], () => {
+			wheelCleanup?.();
+			wheelCleanup = setupWheelHandler();
+		}, { flush: "post" });
+		onBeforeUnmount(() => {
+			wheelCleanup?.();
 		});
-		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 setupWheelHandler() {
+			const viewportEl = viewportRef.value;
+			const scrollbarEl = scrollbarElementRef.value;
+			if (!scrollbarEl) return void 0;
+			function handleWheel(event) {
+				if (!viewportEl || !scrollbarEl || event.ctrlKey) return;
+				if (props.orientation === "vertical") {
+					if (viewportEl.scrollTop === 0 && event.deltaY < 0) return;
+					if (viewportEl.scrollTop === viewportEl.scrollHeight - viewportEl.clientHeight && event.deltaY > 0) return;
+					event.preventDefault();
+					viewportEl.scrollTop += event.deltaY;
+				} else {
+					if (viewportEl.scrollLeft === 0 && event.deltaX < 0) return;
+					if (viewportEl.scrollLeft === viewportEl.scrollWidth - viewportEl.clientWidth && event.deltaX > 0) return;
+					event.preventDefault();
+					viewportEl.scrollLeft += event.deltaX;
+				}
+			}
+			scrollbarEl.addEventListener("wheel", handleWheel, { passive: false });
+			return () => scrollbarEl.removeEventListener("wheel", handleWheel);
 		}
-		function applyCheckedChange(nextChecked, event, onApplied) {
-			const details = createChangeEventDetails(REASONS.none, event);
-			emit("checkedChange", nextChecked, details);
-			if (details.isCanceled) return false;
-			onApplied?.();
-			setCheckedState(nextChecked);
-			return true;
+		function setScrollbarElement(element) {
+			scrollbarElementRef.value = element;
+		}
+		const state = computed(() => ({
+			hovering: hovering.value,
+			scrolling: props.orientation === "horizontal" ? scrollingX.value : scrollingY.value,
+			orientation: props.orientation,
+			hasOverflowX: !hiddenState.value.x,
+			hasOverflowY: !hiddenState.value.y,
+			overflowXStart: overflowEdges.value.xStart,
+			overflowXEnd: overflowEdges.value.xEnd,
+			overflowYStart: overflowEdges.value.yStart,
+			overflowYEnd: overflowEdges.value.yEnd,
+			cornerHidden: hiddenState.value.corner
+		}));
+		const hideTrackUntilMeasured = computed(() => !hasMeasuredScrollbar.value && !props.keepMounted);
+		function onPointerDown(event) {
+			if (event.button !== 0) return;
+			const target = getTarget(event);
+			const thumb = props.orientation === "vertical" ? thumbYRef.value : thumbXRef.value;
+			if (thumb && contains(thumb, target)) return;
+			if (!viewportRef.value) return;
+			if (thumbYRef.value && scrollbarYRef.value && props.orientation === "vertical") {
+				const thumbYOffset = getOffset(thumbYRef.value, "margin", "y");
+				const scrollbarYOffset = getOffset(scrollbarYRef.value, "padding", "y");
+				const thumbHeight = thumbYRef.value.offsetHeight;
+				const trackRectY = scrollbarYRef.value.getBoundingClientRect();
+				const clickY = event.clientY - trackRectY.top - thumbHeight / 2 - scrollbarYOffset + thumbYOffset / 2;
+				const scrollableContentHeight = viewportRef.value.scrollHeight;
+				const viewportHeight = viewportRef.value.clientHeight;
+				const scrollRatioY = clickY / (scrollbarYRef.value.offsetHeight - thumbHeight - scrollbarYOffset - thumbYOffset);
+				viewportRef.value.scrollTop = scrollRatioY * (scrollableContentHeight - viewportHeight);
+			}
+			if (thumbXRef.value && scrollbarXRef.value && props.orientation === "horizontal") {
+				const thumbXOffset = getOffset(thumbXRef.value, "margin", "x");
+				const scrollbarXOffset = getOffset(scrollbarXRef.value, "padding", "x");
+				const thumbWidth = thumbXRef.value.offsetWidth;
+				const trackRectX = scrollbarXRef.value.getBoundingClientRect();
+				const clickX = event.clientX - trackRectX.left - thumbWidth / 2 - scrollbarXOffset + thumbXOffset / 2;
+				const scrollableContentWidth = viewportRef.value.scrollWidth;
+				const viewportWidth = viewportRef.value.clientWidth;
+				const scrollRatioX = clickX / (scrollbarXRef.value.offsetWidth - thumbWidth - scrollbarXOffset - thumbXOffset);
+				let newScrollLeft;
+				if (direction.value === "rtl") {
+					newScrollLeft = (1 - scrollRatioX) * (scrollableContentWidth - viewportWidth);
+					if (viewportRef.value.scrollLeft <= 0) newScrollLeft = -newScrollLeft;
+				} else newScrollLeft = scrollRatioX * (scrollableContentWidth - viewportWidth);
+				viewportRef.value.scrollLeft = newScrollLeft;
+			}
+			handlePointerDown(event);
+		}
+		const { tag, mergedProps, renderless, ref: renderRef } = useRenderElement({
+			componentProps: props,
+			state,
+			props: computed(() => mergeProps$1(attrs, {
+				...rootId ? { "data-id": `${rootId}-scrollbar` } : {},
+				onPointerdown: onPointerDown,
+				onPointerup: handlePointerUp,
+				style: {
+					position: "absolute",
+					touchAction: "none",
+					WebkitUserSelect: "none",
+					userSelect: "none",
+					visibility: hideTrackUntilMeasured.value ? "hidden" : void 0,
+					...props.orientation === "vertical" && {
+						top: 0,
+						bottom: `var(${ScrollAreaRootCssVars.scrollAreaCornerHeight})`,
+						insetInlineEnd: 0,
+						[ScrollAreaScrollbarCssVars.scrollAreaThumbHeight]: `${thumbSize.value.height}px`
+					},
+					...props.orientation === "horizontal" && {
+						insetInlineStart: 0,
+						insetInlineEnd: `var(${ScrollAreaRootCssVars.scrollAreaCornerWidth})`,
+						bottom: 0,
+						[ScrollAreaScrollbarCssVars.scrollAreaThumbWidth]: `${thumbSize.value.width}px`
+					}
+				}
+			})),
+			stateAttributesMapping: scrollAreaStateAttributesMapping,
+			defaultTagName: "div",
+			ref: setScrollbarElement
+		});
+		const isHidden = computed(() => props.orientation === "vertical" ? hiddenState.value.y : hiddenState.value.x);
+		const shouldRender = computed(() => props.keepMounted || !isHidden.value);
+		provide(scrollAreaScrollbarContextKey, { orientation: computed(() => props.orientation) });
+		return (_ctx, _cache) => {
+			return shouldRender.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [unref(renderless) ? renderSlot(_ctx.$slots, "default", {
+				key: 0,
+				ref: unref(renderRef),
+				props: unref(mergedProps),
+				state: state.value
+			}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), mergeProps({
+				key: 1,
+				ref: unref(renderRef)
+			}, unref(mergedProps)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16))], 64)) : createCommentVNode("v-if", true);
+		};
+	}
+});
+
+//#endregion
+//#region src/scroll-area/scrollbar/ScrollAreaScrollbar.vue
+var ScrollAreaScrollbar_default = ScrollAreaScrollbar_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/scroll-area/thumb/ScrollAreaThumb.vue?vue&type=script&setup=true&lang.ts
+var ScrollAreaThumb_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "ScrollAreaThumb",
+	inheritAttrs: false,
+	__name: "ScrollAreaThumb",
+	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
 		}
-		function handleInputChange(event) {
-			const target = event.currentTarget;
-			if (props.readOnly || disabled.value) {
-				event.preventDefault();
-				event.stopPropagation();
-				target.checked = checked.value;
-				return;
+	},
+	setup(__props) {
+		const props = __props;
+		const attrs = useAttrs();
+		const { thumbYRef, thumbXRef, handlePointerDown, handlePointerMove, handlePointerUp, setScrollingX, setScrollingY, hasMeasuredScrollbar } = useScrollAreaRootContext();
+		const { orientation } = useScrollAreaScrollbarContext();
+		const thumbElementRef = shallowRef(null);
+		watch([thumbElementRef, orientation], ([element, currentOrientation], [previousElement, previousOrientation]) => {
+			if (previousElement) {
+				const previousRef = previousOrientation === "vertical" ? thumbYRef : thumbXRef;
+				if (previousRef.value === previousElement) previousRef.value = null;
 			}
-			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);
+			if (!element) return;
+			const nextRef = currentOrientation === "vertical" ? thumbYRef : thumbXRef;
+			nextRef.value = element;
+		});
+		const state = computed(() => ({ orientation: orientation.value }));
+		function onPointerUp(event) {
+			if (orientation.value === "vertical") setScrollingY(false);
+			if (orientation.value === "horizontal") setScrollingX(false);
+			handlePointerUp(event);
 		}
-		function handleBlur() {
-			if (disabled.value) return;
-			setTouched(true);
-			setFocused(false);
-			if (validationMode.value === "onBlur") validation.commit(checked.value);
+		function setThumbElement(element) {
+			thumbElementRef.value = element;
 		}
-		const state = computed(() => ({
-			...fieldState.value,
-			checked: checked.value,
-			disabled: disabled.value,
-			readOnly: props.readOnly,
-			required: props.required
-		}));
-		provide(switchRootContextKey, state);
-		__expose({ element: controlRef });
-		const mergedRootRef = useMergedRefs(buttonRef, controlRef);
-		const buttonInteractionAttrs = computed(() => ({
-			onClick: attrsObject.onClick,
-			onKeydown: attrsObject.onKeydown,
-			onKeyup: attrsObject.onKeyup,
-			onMousedown: attrsObject.onMousedown,
-			onPointerdown: attrsObject.onPointerdown
-		}));
-		const passthroughAttrs = computed(() => {
-			const { onClick, onKeydown, onKeyup, onMousedown, onPointerdown, ...rest } = attrsObject;
-			return rest;
-		});
 		const { tag, mergedProps, renderless, ref: renderRef } = useRenderElement({
 			componentProps: props,
 			state,
-			props: computed(() => {
-				const localDescriptionProps = labelableContext.getDescriptionProps();
-				const validationProps = validation.getValidationProps();
-				return mergeProps$1(getButtonProps(mergeProps$1(buttonInteractionAttrs.value, { onClick: handleRootClick })), combineDescriptionProps(localDescriptionProps, validationProps), {
-					"id": props.nativeButton ? controlId.value : rootElementId,
-					"role": "switch",
-					"aria-checked": checked.value,
-					"aria-readonly": props.readOnly || void 0,
-					"aria-required": props.required || void 0,
-					"aria-labelledby": ariaLabelledBy.value,
-					"onFocus": handleFocus,
-					"onBlur": handleBlur
-				}, passthroughAttrs.value);
-			}),
-			stateAttributesMapping,
-			defaultTagName: "span",
-			ref: mergedRootRef
-		});
-		const inputProps = computed(() => {
-			const localDescriptionProps = labelableContext.getDescriptionProps();
-			const validationProps = validation.getInputValidationProps();
-			return mergeProps$1({
-				"checked": checked.value,
-				"disabled": disabled.value,
-				"form": props.form,
-				"id": props.nativeButton ? void 0 : inputId.value,
-				"name": name.value,
-				"required": props.required,
-				"type": "checkbox",
-				"aria-hidden": true,
-				"tabindex": -1,
-				"style": name.value ? visuallyHiddenInput : visuallyHidden,
-				"onChange": handleInputChange,
-				onFocus() {
-					controlRef.value?.focus();
+			props: computed(() => mergeProps$1(attrs, {
+				onPointerdown: handlePointerDown,
+				onPointermove: handlePointerMove,
+				onPointerup: onPointerUp,
+				style: {
+					visibility: hasMeasuredScrollbar.value ? void 0 : "hidden",
+					...orientation.value === "vertical" && { height: `var(${ScrollAreaScrollbarCssVars.scrollAreaThumbHeight})` },
+					...orientation.value === "horizontal" && { width: `var(${ScrollAreaScrollbarCssVars.scrollAreaThumbWidth})` }
 				}
-			}, props.value !== void 0 ? { value: props.value } : EMPTY_OBJECT, combineDescriptionProps(localDescriptionProps, validationProps));
+			})),
+			defaultTagName: "div",
+			ref: setThumbElement
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock(Fragment, null, [
-				unref(renderless) ? renderSlot(_ctx.$slots, "default", {
-					key: 0,
-					ref: unref(renderRef),
-					props: unref(mergedProps),
-					state: state.value
-				}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), mergeProps({
-					key: 1,
-					ref: unref(renderRef)
-				}, unref(mergedProps)), {
-					default: withCtx(() => [renderSlot(_ctx.$slots, "default", { state: state.value })]),
-					_: 3
-				}, 16)),
-				!unref(checked) && !disabled.value && name.value && __props.uncheckedValue !== void 0 ? (openBlock(), createElementBlock("input", {
-					key: 2,
-					type: "hidden",
-					form: __props.form,
-					name: name.value,
-					value: __props.uncheckedValue
-				}, null, 8, _hoisted_1)) : createCommentVNode("v-if", true),
-				createElementVNode("input", mergeProps({ ref: unref(mergedInputRef) }, inputProps.value), null, 16)
-			], 64);
+			return unref(renderless) ? renderSlot(_ctx.$slots, "default", {
+				key: 0,
+				ref: unref(renderRef),
+				props: unref(mergedProps),
+				state: state.value
+			}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), mergeProps({
+				key: 1,
+				ref: unref(renderRef)
+			}, unref(mergedProps)), null, 16));
 		};
 	}
 });
 
 //#endregion
-//#region src/switch/root/SwitchRoot.vue
-var SwitchRoot_default = SwitchRoot_vue_vue_type_script_setup_true_lang_default;
+//#region src/scroll-area/thumb/ScrollAreaThumb.vue
+var ScrollAreaThumb_default = ScrollAreaThumb_vue_vue_type_script_setup_true_lang_default;
 
 //#endregion
-//#region src/switch/thumb/SwitchThumb.vue?vue&type=script&setup=true&lang.ts
-/**
-* The movable part of the switch that indicates whether the switch is on or off.
-* Renders a `<span>`.
-*
-* Documentation: [Base UI Vue Switch](https://baseui-vue.com/docs/components/switch)
-*/
-var SwitchThumb_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
-	name: "SwitchThumb",
+//#region src/scroll-area/thumb/ScrollAreaThumbDataAttributes.ts
+let ScrollAreaThumbDataAttributes = /* @__PURE__ */ function(ScrollAreaThumbDataAttributes) {
+	ScrollAreaThumbDataAttributes["orientation"] = "data-orientation";
+	return ScrollAreaThumbDataAttributes;
+}({});
+
+//#endregion
+//#region src/utils/scrollEdges.ts
+const SCROLL_EDGE_TOLERANCE_PX = 1;
+function normalizeScrollOffset(value, max) {
+	if (max <= 0) return 0;
+	const clamped = clamp(value, 0, max);
+	const startDistance = clamped;
+	const endDistance = max - clamped;
+	const withinStartTolerance = startDistance <= SCROLL_EDGE_TOLERANCE_PX;
+	const withinEndTolerance = endDistance <= SCROLL_EDGE_TOLERANCE_PX;
+	if (withinStartTolerance && withinEndTolerance) return startDistance <= endDistance ? 0 : max;
+	if (withinStartTolerance) return 0;
+	if (withinEndTolerance) return max;
+	return clamped;
+}
+
+//#endregion
+//#region src/scroll-area/viewport/ScrollAreaViewportCssVars.ts
+let ScrollAreaViewportCssVars = /* @__PURE__ */ function(ScrollAreaViewportCssVars) {
+	ScrollAreaViewportCssVars["scrollAreaOverflowXStart"] = "--scroll-area-overflow-x-start";
+	ScrollAreaViewportCssVars["scrollAreaOverflowXEnd"] = "--scroll-area-overflow-x-end";
+	ScrollAreaViewportCssVars["scrollAreaOverflowYStart"] = "--scroll-area-overflow-y-start";
+	ScrollAreaViewportCssVars["scrollAreaOverflowYEnd"] = "--scroll-area-overflow-y-end";
+	return ScrollAreaViewportCssVars;
+}({});
+
+//#endregion
+//#region src/scroll-area/viewport/ScrollAreaViewport.vue?vue&type=script&setup=true&lang.ts
+var ScrollAreaViewport_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "ScrollAreaViewport",
 	inheritAttrs: false,
-	__name: "SwitchThumb",
+	__name: "ScrollAreaViewport",
 	props: {
 		as: {
 			type: null,
 			required: false,
-			default: "span"
+			default: "div"
 		},
 		class: {
 			type: Function,
@@ -4475,31 +6319,248 @@ var SwitchThumb_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 	},
 	setup(__props) {
 		const props = __props;
-		const attrsObject = useAttrs();
-		const { state: fieldState } = useFieldRootContext();
-		const rootState = useSwitchRootContext();
-		const state = computed(() => ({
-			...fieldState.value,
-			...rootState.value
+		const attrs = useAttrs();
+		const { viewportRef, scrollbarYRef, scrollbarXRef, thumbYRef, thumbXRef, cornerRef, cornerSize, setCornerSize, setThumbSize, rootId, setHiddenState, hiddenState, setHasMeasuredScrollbar, handleScroll, setHovering, setOverflowEdges, overflowEdges, overflowEdgeThreshold, scrollingX, scrollingY } = useScrollAreaRootContext();
+		const direction = useDirection();
+		let programmaticScroll = true;
+		const lastMeasuredViewportMetrics = [
+			NaN,
+			NaN,
+			NaN,
+			NaN
+		];
+		let scrollEndTimeoutId;
+		let waitForAnimationsTimeoutId;
+		let resizeObserver;
+		let scrollAreaOverflowVarsRegistered = false;
+		function removeCSSVariableInheritance() {
+			if (scrollAreaOverflowVarsRegistered) return;
+			if (typeof navigator !== "undefined" && /AppleWebKit/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent)) return;
+			if (typeof CSS !== "undefined" && "registerProperty" in CSS) {
+				const vars = [
+					ScrollAreaViewportCssVars.scrollAreaOverflowXStart,
+					ScrollAreaViewportCssVars.scrollAreaOverflowXEnd,
+					ScrollAreaViewportCssVars.scrollAreaOverflowYStart,
+					ScrollAreaViewportCssVars.scrollAreaOverflowYEnd
+				];
+				for (const name of vars) try {
+					CSS.registerProperty({
+						name,
+						syntax: "<length>",
+						inherits: false,
+						initialValue: "0px"
+					});
+				} catch {}
+			}
+			scrollAreaOverflowVarsRegistered = true;
+		}
+		function computeThumbPosition() {
+			const viewportEl = viewportRef.value;
+			const scrollbarYEl = scrollbarYRef.value;
+			const scrollbarXEl = scrollbarXRef.value;
+			const thumbYEl = thumbYRef.value;
+			const thumbXEl = thumbXRef.value;
+			const cornerEl = cornerRef.value;
+			if (!viewportEl) return;
+			const scrollableContentHeight = viewportEl.scrollHeight;
+			const scrollableContentWidth = viewportEl.scrollWidth;
+			const viewportHeight = viewportEl.clientHeight;
+			const viewportWidth = viewportEl.clientWidth;
+			const scrollTop = viewportEl.scrollTop;
+			const scrollLeft = viewportEl.scrollLeft;
+			const isFirstMeasurement = Number.isNaN(lastMeasuredViewportMetrics[0]);
+			lastMeasuredViewportMetrics[0] = viewportHeight;
+			lastMeasuredViewportMetrics[1] = scrollableContentHeight;
+			lastMeasuredViewportMetrics[2] = viewportWidth;
+			lastMeasuredViewportMetrics[3] = scrollableContentWidth;
+			if (isFirstMeasurement) setHasMeasuredScrollbar(true);
+			if (scrollableContentHeight === 0 || scrollableContentWidth === 0) return;
+			const nextHiddenState = getHiddenState(viewportEl);
+			const scrollbarYHidden = nextHiddenState.y;
+			const scrollbarXHidden = nextHiddenState.x;
+			const ratioX = viewportWidth / scrollableContentWidth;
+			const ratioY = viewportHeight / scrollableContentHeight;
+			const maxScrollLeft = Math.max(0, scrollableContentWidth - viewportWidth);
+			const maxScrollTop = Math.max(0, scrollableContentHeight - viewportHeight);
+			let scrollLeftFromStart = 0;
+			let scrollLeftFromEnd = 0;
+			if (!scrollbarXHidden) {
+				let rawScrollLeftFromStart = 0;
+				if (direction.value === "rtl") rawScrollLeftFromStart = scrollLeft < 0 ? -scrollLeft : maxScrollLeft - scrollLeft;
+				else rawScrollLeftFromStart = scrollLeft;
+				rawScrollLeftFromStart = clamp(rawScrollLeftFromStart, 0, maxScrollLeft);
+				scrollLeftFromStart = normalizeScrollOffset(rawScrollLeftFromStart, maxScrollLeft);
+				scrollLeftFromEnd = maxScrollLeft - scrollLeftFromStart;
+			}
+			const rawScrollTopFromStart = !scrollbarYHidden ? clamp(scrollTop, 0, maxScrollTop) : 0;
+			const scrollTopFromStart = !scrollbarYHidden ? normalizeScrollOffset(rawScrollTopFromStart, maxScrollTop) : 0;
+			const scrollTopFromEnd = !scrollbarYHidden ? maxScrollTop - scrollTopFromStart : 0;
+			const nextWidth = scrollbarXHidden ? 0 : viewportWidth;
+			const nextHeight = scrollbarYHidden ? 0 : viewportHeight;
+			let nextCornerWidth = 0;
+			let nextCornerHeight = 0;
+			if (!scrollbarXHidden && !scrollbarYHidden) {
+				nextCornerWidth = scrollbarYEl?.offsetWidth || 0;
+				nextCornerHeight = scrollbarXEl?.offsetHeight || 0;
+			}
+			const cornerNotYetSized = cornerSize.value.width === 0 && cornerSize.value.height === 0;
+			const cornerWidthOffset = cornerNotYetSized ? nextCornerWidth : 0;
+			const cornerHeightOffset = cornerNotYetSized ? nextCornerHeight : 0;
+			const scrollbarXOffset = getOffset(scrollbarXEl, "padding", "x");
+			const scrollbarYOffset = getOffset(scrollbarYEl, "padding", "y");
+			const thumbXOffset = getOffset(thumbXEl, "margin", "x");
+			const thumbYOffset = getOffset(thumbYEl, "margin", "y");
+			const idealNextWidth = nextWidth - scrollbarXOffset - thumbXOffset;
+			const idealNextHeight = nextHeight - scrollbarYOffset - thumbYOffset;
+			const maxNextWidth = scrollbarXEl ? Math.min(scrollbarXEl.offsetWidth - cornerWidthOffset, idealNextWidth) : idealNextWidth;
+			const maxNextHeight = scrollbarYEl ? Math.min(scrollbarYEl.offsetHeight - cornerHeightOffset, idealNextHeight) : idealNextHeight;
+			const clampedNextWidth = Math.max(MIN_THUMB_SIZE, maxNextWidth * ratioX);
+			const clampedNextHeight = Math.max(MIN_THUMB_SIZE, maxNextHeight * ratioY);
+			setThumbSize({
+				width: clampedNextWidth,
+				height: clampedNextHeight
+			});
+			if (scrollbarYEl && thumbYEl) {
+				const maxThumbOffsetY = scrollbarYEl.offsetHeight - clampedNextHeight - scrollbarYOffset - thumbYOffset;
+				const scrollRangeY = scrollableContentHeight - viewportHeight;
+				const scrollRatioY = scrollRangeY === 0 ? 0 : scrollTop / scrollRangeY;
+				const thumbOffsetY = Math.min(maxThumbOffsetY, Math.max(0, scrollRatioY * maxThumbOffsetY));
+				thumbYEl.style.transform = `translate3d(0,${thumbOffsetY}px,0)`;
+			}
+			if (scrollbarXEl && thumbXEl) {
+				const maxThumbOffsetX = scrollbarXEl.offsetWidth - clampedNextWidth - scrollbarXOffset - thumbXOffset;
+				const scrollRangeX = scrollableContentWidth - viewportWidth;
+				const scrollRatioX = scrollRangeX === 0 ? 0 : scrollLeftFromStart / scrollRangeX;
+				const thumbOffsetX = direction.value === "rtl" ? -clamp(scrollRatioX * maxThumbOffsetX, 0, maxThumbOffsetX) : clamp(scrollRatioX * maxThumbOffsetX, 0, maxThumbOffsetX);
+				thumbXEl.style.transform = `translate3d(${thumbOffsetX}px,0,0)`;
+			}
+			const overflowMetricsPx = [
+				[ScrollAreaViewportCssVars.scrollAreaOverflowXStart, scrollLeftFromStart],
+				[ScrollAreaViewportCssVars.scrollAreaOverflowXEnd, scrollLeftFromEnd],
+				[ScrollAreaViewportCssVars.scrollAreaOverflowYStart, scrollTopFromStart],
+				[ScrollAreaViewportCssVars.scrollAreaOverflowYEnd, scrollTopFromEnd]
+			];
+			for (const [cssVar, value] of overflowMetricsPx) viewportEl.style.setProperty(cssVar, `${value}px`);
+			if (cornerEl) if (scrollbarXHidden || scrollbarYHidden) setCornerSize({
+				width: 0,
+				height: 0
+			});
+			else setCornerSize({
+				width: nextCornerWidth,
+				height: nextCornerHeight
+			});
+			setHiddenState(mergeHiddenState(hiddenState.value, nextHiddenState));
+			const threshold = overflowEdgeThreshold.value;
+			const nextOverflowEdges = {
+				xStart: !scrollbarXHidden && scrollLeftFromStart > threshold.xStart,
+				xEnd: !scrollbarXHidden && scrollLeftFromEnd > threshold.xEnd,
+				yStart: !scrollbarYHidden && scrollTopFromStart > threshold.yStart,
+				yEnd: !scrollbarYHidden && scrollTopFromEnd > threshold.yEnd
+			};
+			const prev = overflowEdges.value;
+			if (prev.xStart !== nextOverflowEdges.xStart || prev.xEnd !== nextOverflowEdges.xEnd || prev.yStart !== nextOverflowEdges.yStart || prev.yEnd !== nextOverflowEdges.yEnd) setOverflowEdges(nextOverflowEdges);
+		}
+		function handleUserInteraction() {
+			programmaticScroll = false;
+		}
+		function onScroll() {
+			if (!viewportRef.value) return;
+			computeThumbPosition();
+			if (!programmaticScroll) handleScroll({
+				x: viewportRef.value.scrollLeft,
+				y: viewportRef.value.scrollTop
+			});
+			clearTimeout(scrollEndTimeoutId);
+			scrollEndTimeoutId = setTimeout(() => {
+				programmaticScroll = true;
+			}, 100);
+		}
+		const viewportState = computed(() => ({
+			scrolling: scrollingX.value || scrollingY.value,
+			hasOverflowX: !hiddenState.value.x,
+			hasOverflowY: !hiddenState.value.y,
+			overflowXStart: overflowEdges.value.xStart,
+			overflowXEnd: overflowEdges.value.xEnd,
+			overflowYStart: overflowEdges.value.yStart,
+			overflowYEnd: overflowEdges.value.yEnd,
+			cornerHidden: hiddenState.value.corner
 		}));
 		const { tag, mergedProps, renderless, ref: renderRef } = useRenderElement({
 			componentProps: props,
-			state,
-			props: computed(() => attrsObject),
-			stateAttributesMapping,
-			defaultTagName: "span"
+			state: viewportState,
+			props: computed(() => mergeProps$1(attrs, {
+				role: "presentation",
+				...rootId ? { "data-id": `${rootId}-viewport` } : {},
+				tabindex: hiddenState.value.x && hiddenState.value.y ? -1 : 0,
+				class: styleDisableScrollbar.className,
+				style: { overflow: "scroll" },
+				onScroll,
+				onWheel: handleUserInteraction,
+				onTouchmove: handleUserInteraction,
+				onPointermove: handleUserInteraction,
+				onPointerenter: handleUserInteraction,
+				onKeydown: handleUserInteraction
+			})),
+			stateAttributesMapping: scrollAreaStateAttributesMapping,
+			defaultTagName: "div",
+			ref: viewportRef
 		});
+		onMounted(() => {
+			removeCSSVariableInheritance();
+			if (viewportRef.value?.matches(":hover")) setHovering(true);
+			queueMicrotask(computeThumbPosition);
+			const viewport = viewportRef.value;
+			if (typeof ResizeObserver !== "undefined" && viewport) {
+				let hasInitialized = false;
+				resizeObserver = new ResizeObserver(() => {
+					if (!hasInitialized) {
+						hasInitialized = true;
+						if (lastMeasuredViewportMetrics[0] === viewport.clientHeight && lastMeasuredViewportMetrics[1] === viewport.scrollHeight && lastMeasuredViewportMetrics[2] === viewport.clientWidth && lastMeasuredViewportMetrics[3] === viewport.scrollWidth) return;
+					}
+					computeThumbPosition();
+				});
+				resizeObserver.observe(viewport);
+				waitForAnimationsTimeoutId = setTimeout(() => {
+					const animations = viewport.getAnimations({ subtree: true });
+					if (animations.length === 0) return;
+					Promise.allSettled(animations.map((a) => a.finished)).then(computeThumbPosition);
+				}, 0);
+			}
+		});
+		watch([hiddenState, direction], () => {
+			queueMicrotask(computeThumbPosition);
+		});
+		watch(overflowEdgeThreshold, computeThumbPosition);
+		onBeforeUnmount(() => {
+			resizeObserver?.disconnect();
+			clearTimeout(scrollEndTimeoutId);
+			clearTimeout(waitForAnimationsTimeoutId);
+		});
+		provide(scrollAreaViewportContextKey, { computeThumbPosition });
+		function getHiddenState(viewport) {
+			const y = viewport.clientHeight >= viewport.scrollHeight;
+			const x = viewport.clientWidth >= viewport.scrollWidth;
+			return {
+				y,
+				x,
+				corner: y || x
+			};
+		}
+		function mergeHiddenState(prevState, nextState) {
+			if (prevState.y === nextState.y && prevState.x === nextState.x && prevState.corner === nextState.corner) return prevState;
+			return nextState;
+		}
 		return (_ctx, _cache) => {
 			return unref(renderless) ? renderSlot(_ctx.$slots, "default", {
 				key: 0,
 				ref: unref(renderRef),
 				props: unref(mergedProps),
-				state: state.value
+				state: viewportState.value
 			}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), mergeProps({
 				key: 1,
 				ref: unref(renderRef)
 			}, unref(mergedProps)), {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default", { state: state.value })]),
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 				_: 3
 			}, 16));
 		};
@@ -4507,57 +6568,20 @@ var SwitchThumb_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 });
 
 //#endregion
-//#region src/switch/thumb/SwitchThumb.vue
-var SwitchThumb_default = SwitchThumb_vue_vue_type_script_setup_true_lang_default;
+//#region src/scroll-area/viewport/ScrollAreaViewport.vue
+var ScrollAreaViewport_default = ScrollAreaViewport_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;
+//#region src/scroll-area/viewport/ScrollAreaViewportDataAttributes.ts
+let ScrollAreaViewportDataAttributes = /* @__PURE__ */ function(ScrollAreaViewportDataAttributes) {
+	ScrollAreaViewportDataAttributes["scrolling"] = "data-scrolling";
+	ScrollAreaViewportDataAttributes["hasOverflowX"] = "data-has-overflow-x";
+	ScrollAreaViewportDataAttributes["hasOverflowY"] = "data-has-overflow-y";
+	ScrollAreaViewportDataAttributes["overflowXStart"] = "data-overflow-x-start";
+	ScrollAreaViewportDataAttributes["overflowXEnd"] = "data-overflow-x-end";
+	ScrollAreaViewportDataAttributes["overflowYStart"] = "data-overflow-y-start";
+	ScrollAreaViewportDataAttributes["overflowYEnd"] = "data-overflow-y-end";
+	return ScrollAreaViewportDataAttributes;
 }({});
 
 //#endregion
@@ -5709,5 +7733,5 @@ const name = "base-ui-vue";
 const version = "0.0.0";
 
 //#endregion
-export { AccordionItem_default, AccordionPanel_default, AccordionRoot_default, AccordionTrigger_default, AvatarRoot_default, CollapsiblePanel_default, CollapsibleRoot_default, CollapsibleTrigger_default, FieldItem_default, FieldLabel_default, FieldRoot_default, FieldValidity_default, FieldsetLegend_default, FieldsetRoot_default, SeparatorDataAttributes, Separator_default, SliderIndicatorDataAttributes, SliderIndicator_default, SliderLabel_default, SliderRootDataAttributes, SliderRoot_default, SliderThumbDataAttributes, SliderThumb_default, SliderTrackDataAttributes, SliderTrack_default, SliderValueDataAttributes, SliderValue_default, SwitchRootDataAttributes, SwitchRoot_default, SwitchThumbDataAttributes, SwitchThumb_default, ToggleDataAttributes, ToggleGroupDataAttributes, ToggleGroup_default, Toggle_default, ToolbarInputDataAttributes, ToolbarInput_default, ToolbarLinkDataAttributes, ToolbarLink_default, ToolbarRootDataAttributes, ToolbarRoot_default, ToolbarSeparatorDataAttributes, ToolbarSeparator_default, accordionRootContextKey, collapsibleRootContextKey, fieldsetRootContextKey, name, switchRootContextKey, toggleGroupContextKey, useAccordionRootContext, useCollapsibleRootContext, useFieldsetRootContext, useRender, useSwitchRootContext, useToggleGroupContext, version };
+export { AccordionItem_default, AccordionPanel_default, AccordionRoot_default, AccordionTrigger_default, AvatarRoot_default, CollapsiblePanel_default, CollapsibleRoot_default, CollapsibleTrigger_default, FieldItem_default, FieldLabel_default, FieldRoot_default, FieldValidity_default, FieldsetLegend_default, FieldsetRoot_default, InputDataAttributes, Input_default, MeterIndicator_default, MeterLabel_default, MeterRoot_default, MeterTrack_default, MeterValue_default, ProgressIndicator_default, ProgressLabel_default, ProgressRootDataAttributes, ProgressRoot_default, ProgressTrack_default, ProgressValue_default, ScrollAreaRootCssVars, ScrollAreaRoot_default, ScrollAreaScrollbarCssVars, ScrollAreaScrollbarDataAttributes, ScrollAreaScrollbar_default, ScrollAreaThumbDataAttributes, ScrollAreaThumb_default, ScrollAreaViewportCssVars, ScrollAreaViewportDataAttributes, ScrollAreaViewport_default, SeparatorDataAttributes, Separator_default, SliderIndicatorDataAttributes, SliderIndicator_default, SliderLabel_default, SliderRootDataAttributes, SliderRoot_default, SliderThumbDataAttributes, SliderThumb_default, SliderTrackDataAttributes, SliderTrack_default, SliderValueDataAttributes, SliderValue_default, SwitchRootDataAttributes, SwitchRoot_default, SwitchThumbDataAttributes, SwitchThumb_default, ToggleDataAttributes, ToggleGroupDataAttributes, ToggleGroup_default, Toggle_default, ToolbarInputDataAttributes, ToolbarInput_default, ToolbarLinkDataAttributes, ToolbarLink_default, ToolbarRootDataAttributes, ToolbarRoot_default, ToolbarSeparatorDataAttributes, ToolbarSeparator_default, accordionRootContextKey, collapsibleRootContextKey, fieldsetRootContextKey, meterRootContextKey, name, progressRootContextKey, progressStateAttributesMapping, switchRootContextKey, toggleGroupContextKey, useAccordionRootContext, useCollapsibleRootContext, useFieldsetRootContext, useMeterRootContext, useProgressRootContext, useRender, useSwitchRootContext, useToggleGroupContext, version };
 //# sourceMappingURL=index2.js.map