base-ui-vue 0.2.0 → 0.4.0

package/dist/index2.js

@@ -2,14 +2,16 @@ import { EMPTY_OBJECT, compositeRootContextKey, error, mergeProps as mergeProps$
 import { CollapsiblePanelDataAttributes, accordionItemContextKey, accordionStateAttributesMapping, collapsibleOpenStateMapping, triggerOpenStateMapping, useAccordionItemContext } from "./header/AccordionHeader.js";
 import { AnimationFrame, REASONS, createChangeEventDetails, createGenericEventDetails, fieldItemContextKey, transitionStatusMapping, useAnimationFrame, useAnimationsFinished, useAriaLabelledBy, useOpenChangeComplete, useTransitionStatus, visuallyHidden, visuallyHiddenInput } from "./checkbox/index.js";
 import { DEFAULT_VALIDITY_STATE, fieldRootContextKey, fieldValidityMapping, getCombinedFieldValidityData, labelableContextKey, useBaseUiId, useCheckboxGroupContext, useControllableState, useField, useFieldRootContext, useFormContext, useLabelableContext } from "./checkbox-group/CheckboxGroup.js";
-import { CompositeItem_default, compositeListContextKey, toolbarRootContextKey, useCompositeListItem, useToolbarGroupContext, useToolbarRootContext } from "./button/ToolbarButton.js";
-import { activeElement, clamp, contains, getMidpoint, getTarget, ownerDocument, roundValueToStep, sliderRootContextKey, sliderStateAttributesMapping, useDirection, useSliderRootContext, validateMinimumDistance } from "./control/SliderControl.js";
+import { CompositeItem_default, IndexGuessBehavior, compositeListContextKey, toolbarRootContextKey, useCompositeListItem, useToolbarGroupContext, useToolbarRootContext } from "./button/ToolbarButton.js";
+import { activeElement, clamp, contains, getMidpoint, getTarget, ownerDocument, ownerWindow, roundValueToStep, sliderRootContextKey, sliderStateAttributesMapping, useDirection, useSliderRootContext, validateMinimumDistance } from "./control/SliderControl.js";
 import { ALL_KEYS, ARROW_DOWN as ARROW_DOWN$1, ARROW_KEYS, ARROW_LEFT as ARROW_LEFT$1, ARROW_RIGHT as ARROW_RIGHT$1, ARROW_UP as ARROW_UP$1, COMPOSITE_KEYS, END, HOME, HORIZONTAL_KEYS, HORIZONTAL_KEYS_WITH_EXTRA_KEYS, MODIFIER_KEYS, PAGE_DOWN, PAGE_UP, VERTICAL_KEYS, VERTICAL_KEYS_WITH_EXTRA_KEYS, isNativeInput, scrollIntoViewIfNeeded } from "./composite/composite.js";
-import { AvatarRootContextKey, avatarStateAttributesMapping, useTimeout } from "./fallback/AvatarFallback.js";
+import { ANY_MINUS_DETECT_RE, ANY_MINUS_RE, ANY_PLUS_DETECT_RE, ANY_PLUS_RE, ARABIC_DETECT_RE, BASE_NON_NUMERIC_SYMBOLS, DEFAULT_STEP, FULLWIDTH_DETECT_RE, HAN_DETECT_RE, MINUS_SIGNS_WITH_ASCII, PERCENTAGES, PERMILLE, PERSIAN_DETECT_RE, PLUS_SIGNS_WITH_ASCII, SPACE_SEPARATOR_RE, formatNumber, formatNumberMaxPrecision, formatNumberValue, getFormatter, getNumberLocaleDetails, numberFieldRootContextKey, parseNumber, stateAttributesMapping as stateAttributesMapping$1, useNumberFieldRootContext, useTimeout } from "./decrement/NumberFieldDecrement.js";
+import { AvatarRootContextKey, avatarStateAttributesMapping } 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 { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, defineComponent, getCurrentInstance, guardReactiveProps, inject, mergeProps, normalizeClass, normalizeProps, normalizeStyle, onBeforeUnmount, onMounted, onUnmounted, openBlock, provide, reactive, readonly, ref, renderSlot, resolveDynamicComponent, shallowReadonly, shallowRef, toDisplayString, toValue, unref, useAttrs, watch, watchEffect, watchSyncEffect, withCtx } from "vue";
 import { isHTMLElement } from "@floating-ui/utils/dom";
 import { floor } from "@floating-ui/utils";
 
@@ -822,7 +824,7 @@ var CompositeList_default = CompositeList_vue_vue_type_script_setup_true_lang_de
 
 //#endregion
 //#region src/accordion/root/stateAttributesMapping.ts
-const rootStateAttributesMapping = { value: () => null };
+const rootStateAttributesMapping$1 = { value: () => null };
 
 //#endregion
 //#region src/accordion/root/AccordionRoot.vue?vue&type=script&setup=true&lang.ts
@@ -958,7 +960,7 @@ var AccordionRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 				dir: direction.value,
 				role: "region"
 			})),
-			stateAttributesMapping: rootStateAttributesMapping,
+			stateAttributesMapping: rootStateAttributesMapping$1,
 			defaultTagName: "div"
 		});
 		return (_ctx, _cache) => {
@@ -2695,27 +2697,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 +2792,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 +2855,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 +2901,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 +2929,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,17 +2975,3801 @@ 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 { setLabelId } = useMeterRootContext();
+		const id = useRegisteredLabelId(() => props.id, setLabelId);
+		const state = computed(() => ({}));
+		const { tag, mergedProps, renderless } = useRenderElement({
+			componentProps: props,
+			state,
+			props: computed(() => ({
+				...attrs,
+				id: id.value,
+				role: "presentation"
+			})),
+			defaultTagName: "span"
+		});
+		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/label/MeterLabel.vue
+var MeterLabel_default = MeterLabel_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/meter/root/MeterRoot.vue?vue&type=script&setup=true&lang.ts
+/**
+* Groups all parts of the meter and provides the value for screen readers.
+* Renders a `<div>` element.
+*
+* Documentation: [Base UI Vue Meter](https://baseui-vue.com/docs/components/meter)
+*/
+var MeterRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "MeterRoot",
+	inheritAttrs: false,
+	__name: "MeterRoot",
+	props: {
+		ariaValuetext: {
+			type: String,
+			required: false
+		},
+		format: {
+			type: null,
+			required: false
+		},
+		getAriaValueText: {
+			type: Function,
+			required: false
+		},
+		locale: {
+			type: null,
+			required: false
+		},
+		max: {
+			type: Number,
+			required: false,
+			default: 100
+		},
+		min: {
+			type: Number,
+			required: false,
+			default: 0
+		},
+		value: {
+			type: Number,
+			required: true
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "div"
+		},
+		class: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		style: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const attrs = useAttrs();
+		const 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: "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(() => ({}));
+		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: "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 } = useMeterRootContext();
+		const state = computed(() => ({}));
+		const defaultDisplay = computed(() => {
+			if (formattedValue.value) return formattedValue.value;
+			return value.value != null ? String(value.value) : "";
+		});
+		const { tag, mergedProps, renderless } = useRenderElement({
+			componentProps: props,
+			state,
+			props: computed(() => ({
+				"aria-hidden": true,
+				...attrs
+			})),
+			defaultTagName: "span"
+		});
+		return (_ctx, _cache) => {
+			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));
+		};
+	}
+});
+
+//#endregion
+//#region src/meter/value/MeterValue.vue
+var MeterValue_default = MeterValue_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/utils/useValueChanged.ts
+/**
+* Runs `onChange` whenever the watched value changes, passing the previous value.
+*
+* Mirrors the React `useValueChanged` helper: the callback fires after the DOM has
+* been updated (`flush: 'post'`), which makes it safe to read or move focus inside it.
+*/
+function useValueChanged(source, onChange) {
+	watch(source, (_newValue, previousValue) => {
+		onChange(previousValue);
+	}, { flush: "post" });
+}
+
+//#endregion
+//#region src/number-field/utils/validate.ts
+const STEP_EPSILON_FACTOR = 1e-10;
+const DEFAULT_DIGITS = 3;
+function hasNumberFormatRoundingOptions(format) {
+	return format?.maximumFractionDigits != null || format?.minimumFractionDigits != null || format?.maximumSignificantDigits != null || format?.minimumSignificantDigits != null || format?.roundingIncrement != null || format?.roundingMode != null || format?.roundingPriority != null;
+}
+function removeFloatingPointErrors(value, format) {
+	if (!Number.isFinite(value)) return value;
+	if (!hasNumberFormatRoundingOptions(format)) return Number(value.toFixed(DEFAULT_DIGITS));
+	const formatter = getFormatter("en-US", {
+		...format,
+		signDisplay: "auto",
+		currencySign: "standard",
+		notation: format.notation === "compact" ? "standard" : format.notation,
+		useGrouping: false
+	});
+	const roundedText = formatter.format(value);
+	const roundedValue = parseNumber(roundedText, "en-US", format);
+	if (roundedValue === null) return value;
+	return formatter.format(roundedValue) === roundedText ? roundedValue : value;
+}
+function snapToStep(value, base, step, mode = "directional") {
+	const stepSize = Math.abs(step);
+	const direction = Math.sign(step);
+	const tolerance = stepSize * STEP_EPSILON_FACTOR * direction;
+	const rawSteps = value - base + tolerance;
+	if (mode === "nearest") return base + Math.round(rawSteps / step) * step;
+	return base + (direction > 0 ? Math.floor(rawSteps / stepSize) : Math.ceil(rawSteps / stepSize)) * stepSize;
+}
+function toValidatedNumber(value, { step, minWithDefault, maxWithDefault, minWithZeroDefault, format, snapOnStep, small, clamp: shouldClamp }) {
+	if (value === null) return value;
+	let nextValue = value;
+	if (step != null && snapOnStep && step !== 0) {
+		const base = small || minWithDefault === Number.MIN_SAFE_INTEGER ? minWithZeroDefault : minWithDefault;
+		nextValue = snapToStep(nextValue, base, step, small ? "nearest" : "directional");
+	}
+	if (shouldClamp) nextValue = clamp(nextValue, minWithDefault, maxWithDefault);
+	const roundedValue = removeFloatingPointErrors(nextValue, format);
+	return shouldClamp ? clamp(roundedValue, minWithDefault, maxWithDefault) : roundedValue;
+}
+
+//#endregion
+//#region src/number-field/input/NumberFieldInput.vue?vue&type=script&setup=true&lang.ts
+var NumberFieldInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "NumberFieldInput",
+	inheritAttrs: false,
+	__name: "NumberFieldInput",
+	props: {
+		as: {
+			type: null,
+			required: false
+		},
+		class: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		style: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const attrsObject = useAttrs();
+		const NAVIGATE_KEYS = new Set([
+			"Backspace",
+			"Delete",
+			"ArrowLeft",
+			"ArrowRight",
+			"Tab",
+			"Enter",
+			"Escape"
+		]);
+		const { allowInputSyncRef, disabled, formatOptionsRef, getAllowedNonNumericKeys, getStepAmount, id, incrementValue, inputMode, inputValue, max, min, name, readOnly, required, setValue, state, setInputValue, locale, inputRef, value, onValueCommitted, lastChangedValueRef, hasPendingCommitRef, valueRef } = useNumberFieldRootContext();
+		const { clearErrors } = useFormContext();
+		const { validationMode, setTouched, setFocused, invalid, shouldValidateOnChange, validation } = useFieldRootContext();
+		const { labelId } = useLabelableContext();
+		let hasTouchedInput = false;
+		let blockRevalidation = false;
+		function setInputRef(el) {
+			inputRef.value = el;
+		}
+		useValueChanged(value, () => {
+			clearErrors(name.value);
+			if (blockRevalidation && !shouldValidateOnChange()) {
+				blockRevalidation = false;
+				return;
+			}
+			validation.commit(value.value, true);
+		});
+		function onFocus(event) {
+			if (event.defaultPrevented || readOnly.value || disabled.value) return;
+			setFocused(true);
+			if (hasTouchedInput) return;
+			hasTouchedInput = true;
+			const target = event.currentTarget;
+			const length = target.value.length;
+			target.setSelectionRange(length, length);
+		}
+		function onBlur(event) {
+			if (event.defaultPrevented || readOnly.value || disabled.value) return;
+			setTouched(true);
+			setFocused(false);
+			const hadManualInput = !allowInputSyncRef.value;
+			const hadPendingProgrammaticChange = hasPendingCommitRef.value;
+			allowInputSyncRef.value = true;
+			if (inputValue.value.trim() === "") {
+				setValue(null, createChangeEventDetails(REASONS.inputClear, event));
+				if (validationMode.value === "onBlur") validation.commit(null);
+				onValueCommitted(null, createGenericEventDetails(REASONS.inputClear, event));
+				return;
+			}
+			const formatOptions = formatOptionsRef.value;
+			const parsedValue = parseNumber(inputValue.value, locale.value, formatOptions);
+			if (parsedValue === null) return;
+			const hasRoundingOptions = hasNumberFormatRoundingOptions(formatOptions);
+			const committed = hasRoundingOptions ? removeFloatingPointErrors(parsedValue, formatOptions) : parsedValue;
+			const nextEventDetails = createGenericEventDetails(REASONS.inputBlur, event);
+			const shouldUpdateValue = value.value !== committed;
+			const shouldCommit = hadManualInput || shouldUpdateValue || hadPendingProgrammaticChange;
+			let committedValue = committed;
+			if (shouldUpdateValue) {
+				const changeDetails = createChangeEventDetails(REASONS.inputBlur, event);
+				blockRevalidation = true;
+				setValue(committed, changeDetails);
+				if (changeDetails.isCanceled) {
+					blockRevalidation = false;
+					return;
+				}
+				committedValue = lastChangedValueRef.value ?? committed;
+			}
+			if (validationMode.value === "onBlur") validation.commit(committedValue);
+			if (shouldCommit) onValueCommitted(committedValue, nextEventDetails);
+			const canonicalText = formatNumber(committedValue, locale.value, formatOptions);
+			if (!(!hasRoundingOptions && parsedValue === value.value && inputValue.value === formatNumberMaxPrecision(parsedValue, locale.value, formatOptions)) && inputValue.value !== canonicalText) setInputValue(canonicalText);
+		}
+		function onInput(event) {
+			if (event.defaultPrevented) return;
+			allowInputSyncRef.value = false;
+			const targetValue = event.currentTarget.value;
+			if (targetValue.trim() === "") {
+				setInputValue(targetValue);
+				setValue(null, createChangeEventDetails(REASONS.inputClear, event));
+				return;
+			}
+			const allowedNonNumericKeys = getAllowedNonNumericKeys();
+			if (!Array.from(targetValue).every((ch) => {
+				const isAsciiDigit = ch >= "0" && ch <= "9";
+				const isArabicNumeral = ARABIC_DETECT_RE.test(ch);
+				const isHanNumeral = HAN_DETECT_RE.test(ch);
+				const isPersianNumeral = PERSIAN_DETECT_RE.test(ch);
+				const isFullwidthNumeral = FULLWIDTH_DETECT_RE.test(ch);
+				const isMinus = ANY_MINUS_DETECT_RE.test(ch);
+				return isAsciiDigit || isArabicNumeral || isHanNumeral || isPersianNumeral || isFullwidthNumeral || isMinus || allowedNonNumericKeys.has(ch);
+			})) return;
+			const parsedValue = parseNumber(targetValue, locale.value, formatOptionsRef.value);
+			setInputValue(targetValue);
+			if (parsedValue !== null) setValue(parsedValue, createChangeEventDetails(REASONS.inputChange, event));
+		}
+		function onKeydown(event) {
+			if (event.defaultPrevented || readOnly.value || disabled.value) return;
+			allowInputSyncRef.value = true;
+			const allowedNonNumericKeys = getAllowedNonNumericKeys();
+			let isAllowedNonNumericKey = allowedNonNumericKeys.has(event.key);
+			const { decimal, currency, percentSign } = getNumberLocaleDetails(locale.value, formatOptionsRef.value);
+			const target = event.currentTarget;
+			const selectionStart = target.selectionStart;
+			const selectionEnd = target.selectionEnd;
+			const isAllSelected = selectionStart === 0 && selectionEnd === inputValue.value.length;
+			const selectionContainsIndex = (index) => selectionStart != null && selectionEnd != null && index >= selectionStart && index < selectionEnd;
+			if (ANY_MINUS_DETECT_RE.test(event.key) && Array.from(allowedNonNumericKeys).some((k) => ANY_MINUS_DETECT_RE.test(k || ""))) {
+				const existingIndex = inputValue.value.search(ANY_MINUS_RE);
+				const isReplacingExisting = existingIndex != null && existingIndex !== -1 && selectionContainsIndex(existingIndex);
+				isAllowedNonNumericKey = !(ANY_MINUS_DETECT_RE.test(inputValue.value) || ANY_PLUS_DETECT_RE.test(inputValue.value)) || isAllSelected || isReplacingExisting;
+			}
+			if (ANY_PLUS_DETECT_RE.test(event.key) && Array.from(allowedNonNumericKeys).some((k) => ANY_PLUS_DETECT_RE.test(k || ""))) {
+				const existingIndex = inputValue.value.search(ANY_PLUS_RE);
+				const isReplacingExisting = existingIndex != null && existingIndex !== -1 && selectionContainsIndex(existingIndex);
+				isAllowedNonNumericKey = !(ANY_MINUS_DETECT_RE.test(inputValue.value) || ANY_PLUS_DETECT_RE.test(inputValue.value)) || isAllSelected || isReplacingExisting;
+			}
+			[
+				decimal,
+				currency,
+				percentSign
+			].forEach((symbol) => {
+				if (event.key === symbol && symbol) {
+					const isSymbolHighlighted = selectionContainsIndex(inputValue.value.indexOf(symbol));
+					isAllowedNonNumericKey = !inputValue.value.includes(symbol) || isAllSelected || isSymbolHighlighted;
+				}
+			});
+			const isAsciiDigit = event.key >= "0" && event.key <= "9";
+			const isArabicNumeral = ARABIC_DETECT_RE.test(event.key);
+			const isHanNumeral = HAN_DETECT_RE.test(event.key);
+			const isPersianNumeral = PERSIAN_DETECT_RE.test(event.key);
+			const isFullwidthNumeral = FULLWIDTH_DETECT_RE.test(event.key);
+			const isNavigateKey = NAVIGATE_KEYS.has(event.key);
+			const isStepKey = event.key === "ArrowUp" || event.key === "ArrowDown";
+			if (event.which === 229 || event.altKey && !isStepKey || event.ctrlKey || event.metaKey || isAllowedNonNumericKey || isAsciiDigit || isArabicNumeral || isFullwidthNumeral || isHanNumeral || isPersianNumeral || isNavigateKey) return;
+			const parsedValue = parseNumber(inputValue.value, locale.value, formatOptionsRef.value);
+			const amount = getStepAmount(event) ?? DEFAULT_STEP;
+			stopEvent(event);
+			const commitDetails = createGenericEventDetails(REASONS.keyboard, event);
+			if (event.key === "ArrowUp") {
+				incrementValue(amount, {
+					direction: 1,
+					currentValue: parsedValue,
+					event,
+					reason: REASONS.keyboard
+				});
+				onValueCommitted(lastChangedValueRef.value ?? valueRef.value, commitDetails);
+			} else if (event.key === "ArrowDown") {
+				incrementValue(amount, {
+					direction: -1,
+					currentValue: parsedValue,
+					event,
+					reason: REASONS.keyboard
+				});
+				onValueCommitted(lastChangedValueRef.value ?? valueRef.value, commitDetails);
+			} else if (event.key === "Home" && min.value != null) {
+				setValue(min.value, createChangeEventDetails(REASONS.keyboard, event));
+				onValueCommitted(lastChangedValueRef.value ?? valueRef.value, commitDetails);
+			} else if (event.key === "End" && max.value != null) {
+				setValue(max.value, createChangeEventDetails(REASONS.keyboard, event));
+				onValueCommitted(lastChangedValueRef.value ?? valueRef.value, commitDetails);
+			}
+		}
+		function onPaste(event) {
+			if (event.defaultPrevented || readOnly.value || disabled.value) return;
+			let pastedData = "";
+			try {
+				pastedData = event.clipboardData?.getData("text/plain") ?? "";
+			} catch {
+				if (process.env.NODE_ENV !== "production") warn("<NumberFieldInput> could not read clipboard text during paste handling.");
+				return;
+			}
+			event.preventDefault();
+			const parsedValue = parseNumber(pastedData, locale.value, formatOptionsRef.value);
+			if (parsedValue !== null) {
+				allowInputSyncRef.value = false;
+				setValue(parsedValue, createChangeEventDetails(REASONS.inputPaste, event));
+				setInputValue(pastedData);
+			}
+		}
+		const { tag, mergedProps, renderless, ref: renderRef } = useRenderElement({
+			componentProps: props,
+			state,
+			props: computed(() => mergeProps$1(attrsObject, validation.getValidationProps(), {
+				"id": id.value,
+				"required": required.value,
+				"disabled": disabled.value,
+				"readonly": readOnly.value,
+				"inputmode": inputMode.value,
+				"value": inputValue.value,
+				"type": "text",
+				"autocomplete": "off",
+				"autocorrect": "off",
+				"spellcheck": "false",
+				"aria-roledescription": "Number field",
+				"aria-invalid": !disabled.value && invalid.value ? true : void 0,
+				"aria-labelledby": labelId.value,
+				"onFocus": onFocus,
+				"onBlur": onBlur,
+				"onInput": onInput,
+				"onKeydown": onKeydown,
+				"onPaste": onPaste
+			})),
+			stateAttributesMapping: stateAttributesMapping$1,
+			defaultTagName: "input",
+			ref: setInputRef
+		});
+		return (_ctx, _cache) => {
+			return unref(renderless) ? renderSlot(_ctx.$slots, "default", {
+				key: 0,
+				ref: unref(renderRef),
+				props: unref(mergedProps),
+				state: unref(state)
+			}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), mergeProps({
+				key: 1,
+				ref: unref(renderRef)
+			}, unref(mergedProps)), null, 16));
+		};
+	}
+});
+
+//#endregion
+//#region src/number-field/input/NumberFieldInput.vue
+var NumberFieldInput_default = NumberFieldInput_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/utils/detectBrowser.ts
+const ua = typeof navigator !== "undefined" ? navigator.userAgent : "";
+const platform = typeof navigator !== "undefined" ? navigator.platform : "";
+const maxTouchPoints = typeof navigator !== "undefined" ? navigator.maxTouchPoints : 0;
+const isWebKit = typeof CSS !== "undefined" && typeof CSS.supports === "function" ? CSS.supports("-webkit-backdrop-filter:none") && !/chrome|android/i.test(ua) : /\b(?:iphone|ipad|ipod)\b/i.test(ua);
+const isFirefox = /firefox/i.test(ua);
+const isIOS = /\b(?:iphone|ipad|ipod)\b/i.test(ua) || platform === "MacIntel" && maxTouchPoints > 1;
+
+//#endregion
+//#region src/number-field/root/NumberFieldRoot.vue?vue&type=script&setup=true&lang.ts
+var NumberFieldRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "NumberFieldRoot",
+	inheritAttrs: false,
+	__name: "NumberFieldRoot",
+	props: {
+		id: {
+			type: String,
+			required: false
+		},
+		min: {
+			type: Number,
+			required: false
+		},
+		max: {
+			type: Number,
+			required: false
+		},
+		allowOutOfRange: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		smallStep: {
+			type: Number,
+			required: false,
+			default: .1
+		},
+		step: {
+			type: [Number, String],
+			required: false,
+			default: 1
+		},
+		largeStep: {
+			type: Number,
+			required: false,
+			default: 10
+		},
+		required: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		readOnly: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		name: {
+			type: String,
+			required: false
+		},
+		form: {
+			type: String,
+			required: false
+		},
+		value: {
+			type: [Number, null],
+			required: false
+		},
+		defaultValue: {
+			type: Number,
+			required: false
+		},
+		allowWheelScrub: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		snapOnStep: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		format: {
+			type: null,
+			required: false
+		},
+		locale: {
+			type: null,
+			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 attrsObject = useAttrs();
+		const { setDirty, validityData, disabled: fieldDisabled, setFilled, invalid, name: fieldName, state: fieldState, validation } = useFieldRootContext();
+		const { clearErrors } = useFormContext();
+		const disabled = computed(() => fieldDisabled.value || props.disabled);
+		const readOnly = computed(() => props.readOnly);
+		const required = computed(() => props.required);
+		const nameProp = computed(() => props.name);
+		const name = computed(() => fieldName.value ?? props.name);
+		const step = computed(() => props.step === "any" ? 1 : props.step);
+		const smallStep = computed(() => props.smallStep);
+		const largeStep = computed(() => props.largeStep);
+		const locale = computed(() => props.locale);
+		const format = computed(() => props.format);
+		const min = computed(() => props.min);
+		const max = computed(() => props.max);
+		const minWithDefault = computed(() => props.min ?? Number.MIN_SAFE_INTEGER);
+		const maxWithDefault = computed(() => props.max ?? Number.MAX_SAFE_INTEGER);
+		const minWithZeroDefault = computed(() => props.min ?? 0);
+		const formatStyle = computed(() => props.format?.style);
+		const isScrubbingRef = ref(false);
+		function setIsScrubbing(value) {
+			isScrubbingRef.value = value;
+		}
+		const inputRef = ref(null);
+		const validationInputRef = ref(null);
+		const id = useLabelableId({ id: computed(() => props.id) });
+		const { value: valueUnwrapped, setValue: setValueUnwrapped } = useControllableState({
+			controlled: () => props.value,
+			default: () => props.defaultValue ?? null,
+			name: "NumberField",
+			state: "value"
+		});
+		const value = computed(() => valueUnwrapped.value ?? null);
+		const valueRef = ref(value.value);
+		watch(value, (next) => {
+			valueRef.value = next;
+		}, { flush: "post" });
+		const formatOptionsRef = format;
+		const hasPendingCommitRef = ref(false);
+		const allowInputSyncRef = ref(true);
+		const lastChangedValueRef = ref(null);
+		function onValueCommitted(nextValue, eventDetails) {
+			hasPendingCommitRef.value = false;
+			emit("valueCommitted", nextValue, eventDetails);
+		}
+		function getControlledInputValue(nextValue) {
+			return hasNumberFormatRoundingOptions(format.value) ? formatNumber(nextValue, locale.value, format.value) : formatNumberMaxPrecision(nextValue, locale.value, format.value);
+		}
+		const inputValue = ref(props.value !== void 0 ? getControlledInputValue(value.value) : formatNumber(value.value, locale.value, format.value));
+		function setInputValue(next) {
+			inputValue.value = next;
+		}
+		const inputMode = ref("numeric");
+		watchEffect(() => {
+			setFilled(value.value !== null);
+		});
+		watchEffect(() => {
+			validation.setInputRef(validationInputRef.value);
+		});
+		useField({
+			enabled: computed(() => !disabled.value),
+			id,
+			name,
+			commit: (v) => validation.commit(v),
+			value,
+			getValue: () => value.value,
+			controlRef: inputRef
+		});
+		function getAllowedNonNumericKeys() {
+			const { decimal, group, currency, literal } = getNumberLocaleDetails(locale.value, format.value);
+			const keys = /* @__PURE__ */ new Set();
+			BASE_NON_NUMERIC_SYMBOLS.forEach((symbol) => keys.add(symbol));
+			if (decimal) keys.add(decimal);
+			if (group) {
+				keys.add(group);
+				if (SPACE_SEPARATOR_RE.test(group)) keys.add(" ");
+			}
+			const allowPercentSymbols = formatStyle.value === "percent" || formatStyle.value === "unit" && format.value?.unit === "percent";
+			const allowPermilleSymbols = formatStyle.value === "percent" || formatStyle.value === "unit" && format.value?.unit === "permille";
+			if (allowPercentSymbols) PERCENTAGES.forEach((key) => keys.add(key));
+			if (allowPermilleSymbols) PERMILLE.forEach((key) => keys.add(key));
+			if (formatStyle.value === "currency" && currency) keys.add(currency);
+			if (literal) {
+				Array.from(literal).forEach((char) => keys.add(char));
+				if (SPACE_SEPARATOR_RE.test(literal)) keys.add(" ");
+			}
+			PLUS_SIGNS_WITH_ASCII.forEach((key) => keys.add(key));
+			if (minWithDefault.value < 0) MINUS_SIGNS_WITH_ASCII.forEach((key) => keys.add(key));
+			return keys;
+		}
+		function getStepAmount(event) {
+			if (event?.altKey) return smallStep.value;
+			if (event?.shiftKey) return largeStep.value;
+			return step.value;
+		}
+		function setValue(unvalidatedValue, details) {
+			const eventWithOptionalKeyState = details.event;
+			const dir = details.direction;
+			const reason = details.reason;
+			const shouldClampValue = !props.allowOutOfRange || !(reason === REASONS.inputChange || reason === REASONS.inputBlur || reason === REASONS.inputPaste || reason === REASONS.inputClear || reason === REASONS.none);
+			const validatedValue = toValidatedNumber(unvalidatedValue, {
+				step: dir ? getStepAmount(eventWithOptionalKeyState) * dir : void 0,
+				format: formatOptionsRef.value,
+				minWithDefault: minWithDefault.value,
+				maxWithDefault: maxWithDefault.value,
+				minWithZeroDefault: minWithZeroDefault.value,
+				snapOnStep: props.snapOnStep,
+				small: eventWithOptionalKeyState?.altKey ?? false,
+				clamp: shouldClampValue
+			});
+			const isInputReason = details.reason === REASONS.inputChange || details.reason === REASONS.inputClear || details.reason === REASONS.inputBlur || details.reason === REASONS.inputPaste || details.reason === REASONS.none;
+			const shouldFireChange = validatedValue !== value.value || isInputReason && (unvalidatedValue !== value.value || allowInputSyncRef.value === false);
+			if (shouldFireChange) {
+				emit("valueChange", validatedValue, details);
+				if (details.isCanceled) return shouldFireChange;
+				setValueUnwrapped(validatedValue);
+				setDirty(validatedValue !== validityData.value.initialValue);
+				hasPendingCommitRef.value = true;
+			}
+			lastChangedValueRef.value = validatedValue;
+			if (allowInputSyncRef.value) setInputValue(props.value !== void 0 ? getControlledInputValue(value.value) : formatNumber(validatedValue, locale.value, format.value));
+			return shouldFireChange;
+		}
+		function incrementValue(amount, { direction, currentValue, event, reason }) {
+			const prevValue = currentValue == null ? valueRef.value : currentValue;
+			return setValue(typeof prevValue === "number" ? prevValue + amount * direction : Math.max(0, props.min ?? 0), createChangeEventDetails(reason, event, void 0, { direction }));
+		}
+		watch([
+			value,
+			locale,
+			format
+		], () => {
+			if (!allowInputSyncRef.value) return;
+			const nextInputValue = props.value !== void 0 ? getControlledInputValue(value.value) : formatNumber(value.value, locale.value, format.value);
+			if (nextInputValue !== inputValue.value) setInputValue(nextInputValue);
+		}, { flush: "post" });
+		watchEffect(() => {
+			if (!isIOS) return;
+			let computedInputMode = "text";
+			if (minWithDefault.value >= 0) computedInputMode = "decimal";
+			inputMode.value = computedInputMode;
+		});
+		watchEffect((onCleanup) => {
+			const element = inputRef.value;
+			if (disabled.value || readOnly.value || !props.allowWheelScrub || !element) return;
+			function handleWheel(event) {
+				if (event.ctrlKey || activeElement(ownerDocument(inputRef.value)) !== inputRef.value) return;
+				event.preventDefault();
+				allowInputSyncRef.value = true;
+				incrementValue(getStepAmount(event) ?? DEFAULT_STEP, {
+					direction: event.deltaY > 0 ? -1 : 1,
+					event,
+					reason: "wheel"
+				});
+			}
+			element.addEventListener("wheel", handleWheel, { passive: false });
+			onCleanup(() => {
+				element.removeEventListener("wheel", handleWheel);
+			});
+		});
+		const state = computed(() => ({
+			...fieldState.value,
+			disabled: disabled.value,
+			readOnly: readOnly.value,
+			required: required.value,
+			value: value.value,
+			inputValue: inputValue.value,
+			scrubbing: isScrubbingRef.value
+		}));
+		provide(numberFieldRootContextKey, {
+			inputRef,
+			inputValue,
+			value,
+			minWithDefault,
+			maxWithDefault,
+			disabled,
+			readOnly,
+			id,
+			setValue,
+			incrementValue,
+			getStepAmount,
+			allowInputSyncRef,
+			formatOptionsRef,
+			valueRef,
+			lastChangedValueRef,
+			hasPendingCommitRef,
+			name,
+			nameProp,
+			required,
+			invalid,
+			inputMode,
+			getAllowedNonNumericKeys,
+			min,
+			max,
+			setInputValue,
+			locale,
+			isScrubbing: isScrubbingRef,
+			setIsScrubbing,
+			state,
+			onValueCommitted
+		});
+		const { tag: rootTag, mergedProps: rootMergedProps, renderless: rootRenderless, ref: rootRenderRef } = useRenderElement({
+			componentProps: props,
+			state,
+			props: attrsObject,
+			stateAttributesMapping: stateAttributesMapping$1,
+			defaultTagName: "div",
+			ref: ref(null)
+		});
+		const hiddenInputProps = computed(() => ({
+			...validation.getValidationProps(),
+			"type": "number",
+			"form": props.form,
+			"name": name.value,
+			"value": value.value ?? "",
+			"min": props.min,
+			"max": props.max,
+			"step": props.step,
+			"disabled": disabled.value,
+			"required": required.value,
+			"aria-hidden": true,
+			"tabindex": -1,
+			"style": name.value ? visuallyHiddenInput : visuallyHidden
+		}));
+		function handleHiddenFocus() {
+			inputRef.value?.focus();
+		}
+		function handleHiddenInput(event) {
+			const target = event.currentTarget;
+			if (event.defaultPrevented || disabled.value || readOnly.value) return;
+			const nextValue = target.valueAsNumber;
+			const parsedValue = Number.isNaN(nextValue) ? null : nextValue;
+			const details = createChangeEventDetails(REASONS.none, event);
+			setDirty(parsedValue !== validityData.value.initialValue);
+			setValue(parsedValue, details);
+			clearErrors(name.value);
+			validation.commit(parsedValue, true);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [!unref(rootRenderless) ? (openBlock(), createBlock(resolveDynamicComponent(unref(rootTag)), mergeProps({
+				key: 0,
+				ref: unref(rootRenderRef)
+			}, unref(rootMergedProps)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", { state: state.value })]),
+				_: 3
+			}, 16)) : renderSlot(_ctx.$slots, "default", {
+				key: 1,
+				ref: unref(rootRenderRef),
+				props: unref(rootMergedProps),
+				state: state.value
+			}), createElementVNode("input", mergeProps({
+				ref_key: "validationInputRef",
+				ref: validationInputRef
+			}, hiddenInputProps.value, {
+				suppresshydrationwarning: "",
+				onInput: handleHiddenInput,
+				onFocus: handleHiddenFocus
+			}), null, 16)], 64);
+		};
+	}
+});
+
+//#endregion
+//#region src/number-field/root/NumberFieldRoot.vue
+var NumberFieldRoot_default = NumberFieldRoot_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/number-field/scrub-area/NumberFieldScrubAreaContext.ts
+const numberFieldScrubAreaContextKey = Symbol("NumberFieldScrubAreaContext");
+function useNumberFieldScrubAreaContext() {
+	const context = inject(numberFieldScrubAreaContextKey, void 0);
+	if (context === void 0) throw new Error("Base UI Vue: NumberFieldScrubAreaContext is missing. NumberFieldScrubArea parts must be placed within <NumberFieldScrubArea>.");
+	return context;
+}
+
+//#endregion
+//#region src/number-field/scrub-area-cursor/NumberFieldScrubAreaCursor.vue?vue&type=script&setup=true&lang.ts
+var NumberFieldScrubAreaCursor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "NumberFieldScrubAreaCursor",
+	inheritAttrs: false,
+	__name: "NumberFieldScrubAreaCursor",
+	props: {
+		as: {
+			type: null,
+			required: false
+		},
+		class: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		style: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const attrsObject = useAttrs();
+		const { state } = useNumberFieldRootContext();
+		const { isScrubbing, isTouchInput, isPointerLockDenied, scrubAreaCursorRef } = useNumberFieldScrubAreaContext();
+		const shouldRender = computed(() => isScrubbing.value && !isWebKit && !isTouchInput.value && !isPointerLockDenied.value);
+		function setCursorRef(el) {
+			scrubAreaCursorRef.value = el;
+		}
+		const { tag, mergedProps, renderless, ref: renderRef } = useRenderElement({
+			componentProps: props,
+			state,
+			props: computed(() => mergeProps$1({
+				role: "presentation",
+				style: {
+					position: "fixed",
+					top: 0,
+					left: 0,
+					pointerEvents: "none"
+				}
+			}, attrsObject)),
+			stateAttributesMapping: stateAttributesMapping$1,
+			defaultTagName: "span",
+			ref: setCursorRef
+		});
+		return (_ctx, _cache) => {
+			return shouldRender.value ? (openBlock(), createBlock(Teleport, {
+				key: 0,
+				to: "body"
+			}, [unref(renderless) ? renderSlot(_ctx.$slots, "default", {
+				key: 0,
+				ref: unref(renderRef),
+				props: unref(mergedProps),
+				state: unref(state)
+			}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), mergeProps({
+				key: 1,
+				ref: unref(renderRef)
+			}, unref(mergedProps)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", { state: unref(state) })]),
+				_: 3
+			}, 16))])) : createCommentVNode("v-if", true);
+		};
+	}
+});
+
+//#endregion
+//#region src/number-field/scrub-area-cursor/NumberFieldScrubAreaCursor.vue
+var NumberFieldScrubAreaCursor_default = NumberFieldScrubAreaCursor_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/number-field/utils/getViewportRect.ts
+function getViewportRect(teleportDistance, scrubAreaEl) {
+	const win = ownerWindow(scrubAreaEl);
+	const rect = scrubAreaEl.getBoundingClientRect();
+	if (rect && teleportDistance != null) return {
+		x: rect.left - teleportDistance / 2,
+		y: rect.top - teleportDistance / 2,
+		width: rect.right + teleportDistance / 2,
+		height: rect.bottom + teleportDistance / 2
+	};
+	const vV = win.visualViewport;
+	if (vV) return {
+		x: vV.offsetLeft,
+		y: vV.offsetTop,
+		width: vV.offsetLeft + vV.width,
+		height: vV.offsetTop + vV.height
+	};
+	return {
+		x: 0,
+		y: 0,
+		width: win.document.documentElement.clientWidth,
+		height: win.document.documentElement.clientHeight
+	};
+}
+
+//#endregion
+//#region src/number-field/utils/subscribeToVisualViewportResize.ts
+function subscribeToVisualViewportResize(element, visualScaleRef) {
+	const vV = ownerWindow(element).visualViewport;
+	if (!vV) return () => {};
+	function handleVisualResize() {
+		if (vV) visualScaleRef.value = vV.scale;
+	}
+	handleVisualResize();
+	vV.addEventListener("resize", handleVisualResize);
+	return () => {
+		vV.removeEventListener("resize", handleVisualResize);
+	};
+}
+
+//#endregion
+//#region src/number-field/scrub-area/NumberFieldScrubArea.vue?vue&type=script&setup=true&lang.ts
+var NumberFieldScrubArea_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "NumberFieldScrubArea",
+	inheritAttrs: false,
+	__name: "NumberFieldScrubArea",
+	props: {
+		direction: {
+			type: String,
+			required: false,
+			default: "horizontal"
+		},
+		pixelSensitivity: {
+			type: Number,
+			required: false,
+			default: 2
+		},
+		teleportDistance: {
+			type: Number,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "span"
+		},
+		class: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		style: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const attrsObject = useAttrs();
+		const { state, setIsScrubbing: setRootScrubbing, disabled, readOnly, inputRef, incrementValue, allowInputSyncRef, getStepAmount, onValueCommitted, lastChangedValueRef, valueRef } = useNumberFieldRootContext();
+		const direction = computed(() => props.direction);
+		const pixelSensitivity = computed(() => props.pixelSensitivity);
+		const teleportDistance = computed(() => props.teleportDistance);
+		const scrubAreaRef = ref(null);
+		const scrubAreaCursorRef = ref(null);
+		let isScrubbingInternal = false;
+		let didMove = false;
+		let pointerDownTarget = null;
+		let virtualCursorCoords = {
+			x: 0,
+			y: 0
+		};
+		const visualScaleRef = ref(1);
+		const exitPointerLockTimeout = useTimeout();
+		const isTouchInput = ref(false);
+		const isPointerLockDenied = ref(false);
+		const isScrubbing = ref(false);
+		watch(isScrubbing, (scrubbing, _prev, onCleanup) => {
+			if (!scrubbing || !scrubAreaCursorRef.value) return;
+			onCleanup(subscribeToVisualViewportResize(scrubAreaCursorRef.value, visualScaleRef));
+		}, { flush: "post" });
+		function updateCursorTransform(x, y) {
+			if (scrubAreaCursorRef.value) scrubAreaCursorRef.value.style.transform = `translate3d(${x}px,${y}px,0) scale(${1 / visualScaleRef.value})`;
+		}
+		function onScrub({ movementX, movementY }) {
+			const virtualCursor = scrubAreaCursorRef.value;
+			const scrubAreaEl = scrubAreaRef.value;
+			if (!virtualCursor || !scrubAreaEl) return;
+			const rect = getViewportRect(teleportDistance.value, scrubAreaEl);
+			const coords = virtualCursorCoords;
+			const newCoords = {
+				x: Math.round(coords.x + movementX),
+				y: Math.round(coords.y + movementY)
+			};
+			const cursorWidth = virtualCursor.offsetWidth;
+			const cursorHeight = virtualCursor.offsetHeight;
+			if (newCoords.x + cursorWidth / 2 < rect.x) newCoords.x = rect.width - cursorWidth / 2;
+			else if (newCoords.x + cursorWidth / 2 > rect.width) newCoords.x = rect.x - cursorWidth / 2;
+			if (newCoords.y + cursorHeight / 2 < rect.y) newCoords.y = rect.height - cursorHeight / 2;
+			else if (newCoords.y + cursorHeight / 2 > rect.height) newCoords.y = rect.y - cursorHeight / 2;
+			virtualCursorCoords = newCoords;
+			updateCursorTransform(newCoords.x, newCoords.y);
+		}
+		function onScrubbingChange(scrubbingValue, { clientX, clientY }) {
+			isScrubbing.value = scrubbingValue;
+			setRootScrubbing(scrubbingValue);
+			const virtualCursor = scrubAreaCursorRef.value;
+			if (!virtualCursor || !scrubbingValue) return;
+			const initialCoords = {
+				x: clientX - virtualCursor.offsetWidth / 2,
+				y: clientY - virtualCursor.offsetHeight / 2
+			};
+			virtualCursorCoords = initialCoords;
+			updateCursorTransform(initialCoords.x, initialCoords.y);
+		}
+		watch([
+			isScrubbing,
+			disabled,
+			readOnly
+		], (_value, _prev, onCleanup) => {
+			if (!inputRef.value || disabled.value || readOnly.value || !isScrubbing.value) return;
+			let cumulativeDelta = 0;
+			function handleScrubPointerUp(event) {
+				function handler() {
+					try {
+						ownerDocument(scrubAreaRef.value)?.exitPointerLock();
+					} catch {} finally {
+						isScrubbingInternal = false;
+						onScrubbingChange(false, event);
+						onValueCommitted(lastChangedValueRef.value ?? valueRef.value, createGenericEventDetails(REASONS.scrub, event));
+						const target = pointerDownTarget;
+						const input = inputRef.value;
+						if (!didMove && target != null && input) target.dispatchEvent(new (ownerWindow(input)).MouseEvent("click", {
+							bubbles: true,
+							cancelable: true
+						}));
+						didMove = false;
+						pointerDownTarget = null;
+					}
+				}
+				if (isFirefox) exitPointerLockTimeout.start(20, handler);
+				else handler();
+			}
+			function handleScrubPointerMove(event) {
+				if (!isScrubbingInternal) return;
+				event.preventDefault();
+				onScrub(event);
+				const { movementX, movementY } = event;
+				cumulativeDelta += direction.value === "vertical" ? movementY : movementX;
+				if (Math.abs(cumulativeDelta) >= pixelSensitivity.value) {
+					cumulativeDelta = 0;
+					didMove = true;
+					const rawAmount = (direction.value === "vertical" ? -movementY : movementX) * (getStepAmount(event) ?? DEFAULT_STEP);
+					if (rawAmount !== 0) {
+						allowInputSyncRef.value = true;
+						incrementValue(Math.abs(rawAmount), {
+							direction: rawAmount >= 0 ? 1 : -1,
+							event,
+							reason: REASONS.scrub
+						});
+					}
+				}
+			}
+			const win = ownerWindow(inputRef.value);
+			win.addEventListener("pointerup", handleScrubPointerUp, true);
+			win.addEventListener("pointermove", handleScrubPointerMove, true);
+			onCleanup(() => {
+				exitPointerLockTimeout.clear();
+				win.removeEventListener("pointerup", handleScrubPointerUp, true);
+				win.removeEventListener("pointermove", handleScrubPointerMove, true);
+			});
+		}, { flush: "post" });
+		onMounted(() => {
+			const element = scrubAreaRef.value;
+			if (!element || disabled.value || readOnly.value) return;
+			function handleTouchStart(event) {
+				if (event.touches.length === 1) event.preventDefault();
+			}
+			element.addEventListener("touchstart", handleTouchStart, { passive: false });
+		});
+		async function onPointerdown(event) {
+			const isMainButton = !event.button || event.button === 0;
+			if (event.defaultPrevented || readOnly.value || !isMainButton || disabled.value) return;
+			const isTouch = event.pointerType === "touch";
+			isTouchInput.value = isTouch;
+			if (event.pointerType === "mouse") {
+				event.preventDefault();
+				inputRef.value?.focus();
+			}
+			isScrubbingInternal = true;
+			didMove = false;
+			pointerDownTarget = getTarget(event);
+			onScrubbingChange(true, event);
+			if (!isTouch && !isWebKit) try {
+				await ownerDocument(scrubAreaRef.value)?.body.requestPointerLock();
+				isPointerLockDenied.value = false;
+			} catch {
+				isPointerLockDenied.value = true;
+			} finally {
+				if (isScrubbingInternal) onScrubbingChange(true, event);
+			}
+		}
+		const defaultProps = computed(() => ({
+			role: "presentation",
+			style: {
+				touchAction: "none",
+				WebkitUserSelect: "none",
+				userSelect: "none"
+			},
+			onPointerdown
+		}));
+		const scrubAreaProps = computed(() => mergeProps$1(defaultProps.value, attrsObject));
+		provide(numberFieldScrubAreaContextKey, {
+			isScrubbing,
+			isTouchInput,
+			isPointerLockDenied,
+			scrubAreaCursorRef,
+			scrubAreaRef,
+			direction,
+			pixelSensitivity,
+			teleportDistance
+		});
+		const { tag, mergedProps, renderless, ref: renderRef } = useRenderElement({
+			componentProps: props,
+			state,
+			props: scrubAreaProps,
+			stateAttributesMapping: stateAttributesMapping$1,
+			defaultTagName: "span",
+			ref: scrubAreaRef
+		});
+		return (_ctx, _cache) => {
+			return unref(renderless) ? renderSlot(_ctx.$slots, "default", {
+				key: 0,
+				ref: unref(renderRef),
+				props: unref(mergedProps),
+				state: unref(state)
+			}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), mergeProps({
+				key: 1,
+				ref: unref(renderRef)
+			}, unref(mergedProps)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", { state: unref(state) })]),
+				_: 3
+			}, 16));
+		};
+	}
+});
+
+//#endregion
+//#region src/number-field/scrub-area/NumberFieldScrubArea.vue
+var NumberFieldScrubArea_default = NumberFieldScrubArea_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/otp-field/root/OtpFieldRootContext.ts
+const otpFieldRootContextKey = Symbol("OtpFieldRootContext");
+function useOtpFieldRootContext() {
+	const context = inject(otpFieldRootContextKey, void 0);
+	if (context === void 0) throw new Error("Base UI Vue: OtpFieldRootContext is missing. OtpField parts must be placed within <OtpFieldRoot>.");
+	return context;
+}
+function getOtpFieldInputState(state, value, index) {
+	return {
+		...state,
+		value,
+		index,
+		filled: value !== ""
+	};
+}
+
+//#endregion
+//#region src/otp-field/utils/otp.ts
+const OTP_VALIDATION_CONFIG = {
+	numeric: {
+		slotPattern: "\\d{1}",
+		getRootPattern: (length) => `\\d{${length}}`,
+		regexp: /\D/g,
+		inputMode: "numeric"
+	},
+	alpha: {
+		slotPattern: "[a-z]{1}",
+		getRootPattern: (length) => `[a-z]{${length}}`,
+		regexp: /[^a-z]/gi,
+		inputMode: "text"
+	},
+	alphanumeric: {
+		slotPattern: "[a-z0-9]{1}",
+		getRootPattern: (length) => `[a-z0-9]{${length}}`,
+		regexp: /[^a-z0-9]/gi,
+		inputMode: "text"
+	}
+};
+function getOTPValidationConfig(validationType) {
+	if (validationType === "none") return null;
+	return OTP_VALIDATION_CONFIG[validationType];
+}
+function stripOTPWhitespace(value) {
+	return (value ?? "").replace(/\s/g, "");
+}
+function applyOTPValidation(value, validation) {
+	return validation ? value.replace(validation.regexp, "") : value;
+}
+/**
+* Normalizes user-entered OTP text by stripping whitespace, applying validation and custom
+* normalization, and clamping the final value to the configured slot count.
+*/
+function normalizeOTPValueWithDetails(value, length, validationType, normalizeValue) {
+	const strippedValue = stripOTPWhitespace(value);
+	const validation = getOTPValidationConfig(validationType);
+	let normalizedValue = applyOTPValidation(strippedValue, validation);
+	let didRejectCharacters = strippedValue.length > normalizedValue.length;
+	if (normalizeValue) {
+		const customNormalizedValue = normalizeValue(normalizedValue);
+		didRejectCharacters ||= normalizedValue.length > customNormalizedValue.length;
+		normalizedValue = applyOTPValidation(customNormalizedValue, validation);
+		didRejectCharacters ||= customNormalizedValue.length > normalizedValue.length;
+	}
+	const maxLength = length < 0 ? 0 : length;
+	const normalizedCharacters = Array.from(normalizedValue);
+	return [normalizedCharacters.slice(0, maxLength).join(""), didRejectCharacters || normalizedCharacters.length > maxLength];
+}
+function normalizeOTPValue(value, length, validationType, normalizeValue) {
+	return normalizeOTPValueWithDetails(value, length, validationType, normalizeValue)[0];
+}
+function getOTPCharacters(value) {
+	return Array.from(value ?? "");
+}
+function getOTPValueLength(value) {
+	return getOTPCharacters(value).length;
+}
+function getOTPCharacter(value, index) {
+	return getOTPCharacters(value)[index] ?? "";
+}
+/**
+* Replaces characters starting at the provided slot index, then re-normalizes the final OTP value
+* so paste and multi-character edits stay contiguous and length-bounded.
+*/
+function replaceOTPValue(currentValue, index, nextValue, length, validationType, normalizeValue) {
+	const normalizedValue = normalizeOTPValue(nextValue, length, validationType, normalizeValue);
+	const characters = getOTPCharacters(currentValue);
+	const replacementLength = getOTPValueLength(normalizedValue);
+	return normalizeOTPValue(`${characters.slice(0, index).join("")}${normalizedValue}${characters.slice(index + replacementLength).join("")}`, length, validationType, normalizeValue);
+}
+function removeOTPCharacter(currentValue, index) {
+	const characters = getOTPCharacters(currentValue);
+	if (index < 0 || index >= characters.length) return currentValue;
+	characters.splice(index, 1);
+	return characters.join("");
+}
+
+//#endregion
+//#region src/otp-field/utils/stateAttributesMapping.ts
+const rootStateAttributesMapping = {
+	value: () => null,
+	length: () => null,
+	...fieldValidityMapping
+};
+const inputStateAttributesMapping = {
+	value: () => null,
+	index: () => null,
+	...fieldValidityMapping
+};
+
+//#endregion
+//#region src/otp-field/input/OtpFieldInput.vue?vue&type=script&setup=true&lang.ts
+var OtpFieldInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "OtpFieldInput",
+	inheritAttrs: false,
+	__name: "OtpFieldInput",
+	props: {
+		as: {
+			type: null,
+			required: false
+		},
+		class: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		style: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const attrs = useAttrs();
+		const attrsObject = attrs;
+		const { activeIndex, autoComplete, disabled, form, focusInput, queueFocusInput, getInputId, handleInputBlur, handleInputFocus, inputMode, inputAriaLabelledBy, invalid, length, mask, pattern, reportValueInvalid, readOnly, required, normalizeValue, setValue, state, validationType, value } = useOtpFieldRootContext();
+		const { ref: listItemRef, index } = useCompositeListItem({ indexGuessBehavior: () => IndexGuessBehavior.GuessFromOrder });
+		const inputRef = ref(null);
+		const direction = useDirection();
+		const slotValue = computed(() => getOTPCharacter(value.value, index.value));
+		const inputState = computed(() => getOtpFieldInputState(state.value, slotValue.value, index.value));
+		const externalAriaLabel = computed(() => attrs["aria-label"]);
+		const externalAriaLabelledBy = computed(() => attrs["aria-labelledby"]);
+		const inheritedLabel = computed(() => externalAriaLabelledBy.value ?? inputAriaLabelledBy.value);
+		const ariaLabel = computed(() => index.value === 0 ? void 0 : externalAriaLabel.value);
+		function setInputRef(el) {
+			listItemRef(el);
+			inputRef.value = el;
+		}
+		function onMousedown(event) {
+			if (event.defaultPrevented || disabled.value) return;
+			event.preventDefault();
+			focusInput(index.value);
+		}
+		function onFocus(event) {
+			if (event.defaultPrevented || disabled.value) return;
+			handleInputFocus(index.value, event);
+		}
+		function onBlur(event) {
+			if (event.defaultPrevented) return;
+			handleInputBlur(event);
+		}
+		function onInput(event) {
+			const target = event.target;
+			if (event.defaultPrevented || disabled.value || readOnly.value) return;
+			const rawValue = target.value;
+			const [nextDigits, didRejectCharacters] = normalizeOTPValueWithDetails(rawValue, length.value, validationType.value, normalizeValue.value);
+			if (didRejectCharacters) reportValueInvalid(rawValue, createGenericEventDetails(REASONS.inputChange, event));
+			if (nextDigits === "") {
+				if (rawValue === "") setValue(removeOTPCharacter(value.value, index.value), createChangeEventDetails(REASONS.inputClear, event));
+				target.value = slotValue.value;
+				if (slotValue.value !== "") target.select();
+				return;
+			}
+			const committedValue = setValue(replaceOTPValue(value.value, index.value, nextDigits, length.value, validationType.value, normalizeValue.value), createChangeEventDetails(REASONS.inputChange, event));
+			if (committedValue != null) queueFocusInput(Math.min(index.value + getOTPValueLength(nextDigits), length.value - 1), committedValue);
+		}
+		function onKeydown(event) {
+			if (event.defaultPrevented || disabled.value) return;
+			const firstIndex = 0;
+			const lastIndex = Math.max(length.value - 1, firstIndex);
+			const endTargetIndex = Math.min(getOTPValueLength(value.value), lastIndex);
+			const hasBoundaryModifier = (event.ctrlKey || event.metaKey) && !event.altKey;
+			const isRtl = direction.value === "rtl";
+			const previousKey = isRtl ? "ArrowRight" : "ArrowLeft";
+			const nextKey = isRtl ? "ArrowLeft" : "ArrowRight";
+			if (event.key === previousKey) {
+				stopEvent(event);
+				focusInput(hasBoundaryModifier ? firstIndex : Math.max(firstIndex, index.value - 1));
+				return;
+			}
+			if (event.key === nextKey) {
+				stopEvent(event);
+				focusInput(hasBoundaryModifier ? endTargetIndex : Math.min(lastIndex, index.value + 1));
+				return;
+			}
+			if (event.key === "Home" || event.key === "ArrowUp") {
+				stopEvent(event);
+				focusInput(firstIndex);
+				return;
+			}
+			if (event.key === "End" || event.key === "ArrowDown") {
+				stopEvent(event);
+				focusInput(endTargetIndex);
+				return;
+			}
+			if (readOnly.value) return;
+			function setKeyboardValue(nextValue, targetIndex) {
+				const committedValue = setValue(nextValue, createChangeEventDetails(REASONS.keyboard, event));
+				if (committedValue != null) queueFocusInput(targetIndex, committedValue);
+			}
+			if (event.key === "Backspace" && hasBoundaryModifier) {
+				stopEvent(event);
+				setKeyboardValue("", firstIndex);
+				return;
+			}
+			if (event.key === "Delete") {
+				stopEvent(event);
+				setKeyboardValue(removeOTPCharacter(value.value, index.value), index.value);
+				return;
+			}
+			const target = event.currentTarget;
+			const inputValue = target.value;
+			const fullSelection = target.selectionStart === 0 && target.selectionEnd === inputValue.length;
+			if (getOTPValueLength(event.key) === 1 && fullSelection && slotValue.value === event.key) {
+				stopEvent(event);
+				if (index.value < length.value - 1) focusInput(index.value + 1);
+				return;
+			}
+			if (event.key === "Backspace") {
+				stopEvent(event);
+				const targetIndex = Math.max(firstIndex, index.value - 1);
+				const deleteIndex = slotValue.value === "" ? targetIndex : index.value;
+				setKeyboardValue(removeOTPCharacter(value.value, deleteIndex), targetIndex);
+			}
+		}
+		function onPaste(event) {
+			if (event.defaultPrevented || disabled.value || readOnly.value) return;
+			let rawValue = "";
+			try {
+				rawValue = event.clipboardData?.getData("text/plain") ?? "";
+			} catch {
+				return;
+			}
+			event.preventDefault();
+			const [nextDigits, didRejectCharacters] = normalizeOTPValueWithDetails(rawValue, length.value, validationType.value, normalizeValue.value);
+			if (didRejectCharacters) reportValueInvalid(rawValue, createGenericEventDetails(REASONS.inputPaste, event));
+			if (nextDigits === "") return;
+			const committedValue = setValue(replaceOTPValue(value.value, index.value, nextDigits, length.value, validationType.value, normalizeValue.value), createChangeEventDetails(REASONS.inputPaste, event));
+			if (committedValue != null) queueFocusInput(Math.min(index.value + getOTPValueLength(nextDigits), length.value - 1), committedValue);
+		}
+		const { tag, mergedProps, renderless, ref: renderRef } = useRenderElement({
+			componentProps: props,
+			state: inputState,
+			props: computed(() => mergeProps$1(attrsObject, {
+				"id": getInputId(index.value),
+				"value": slotValue.value,
+				"type": attrsObject.type ?? (mask.value ? "password" : "text"),
+				"inputmode": inputMode.value,
+				"autocomplete": index.value === 0 ? autoComplete.value : "off",
+				"autocorrect": "off",
+				"spellcheck": "false",
+				"enterkeyhint": index.value === length.value - 1 ? "done" : "next",
+				"maxlength": index.value === 0 ? length.value : void 0,
+				"tabindex": activeIndex.value === index.value ? 0 : -1,
+				"disabled": disabled.value,
+				"form": form.value,
+				"pattern": pattern.value,
+				"readonly": readOnly.value,
+				"required": required.value,
+				"aria-labelledby": ariaLabel.value == null ? inheritedLabel.value : void 0,
+				"aria-invalid": !disabled.value && invalid.value ? true : void 0,
+				"aria-label": ariaLabel.value,
+				"onMousedown": onMousedown,
+				"onFocus": onFocus,
+				"onBlur": onBlur,
+				"onInput": onInput,
+				"onKeydown": onKeydown,
+				"onPaste": onPaste
+			})),
+			stateAttributesMapping: inputStateAttributesMapping,
+			defaultTagName: "input",
+			ref: setInputRef
+		});
+		return (_ctx, _cache) => {
+			return unref(renderless) ? renderSlot(_ctx.$slots, "default", {
+				key: 0,
+				ref: unref(renderRef),
+				props: unref(mergedProps),
+				state: inputState.value
+			}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), mergeProps({
+				key: 1,
+				ref: unref(renderRef)
+			}, unref(mergedProps)), null, 16));
+		};
+	}
+});
+
+//#endregion
+//#region src/otp-field/input/OtpFieldInput.vue
+var OtpFieldInput_default = OtpFieldInput_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/otp-field/root/OtpFieldRoot.vue?vue&type=script&setup=true&lang.ts
+var OtpFieldRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "OtpFieldRoot",
+	inheritAttrs: false,
+	__name: "OtpFieldRoot",
+	props: {
+		id: {
+			type: String,
+			required: false
+		},
+		autoComplete: {
+			type: String,
+			required: false,
+			default: "one-time-code"
+		},
+		form: {
+			type: String,
+			required: false
+		},
+		length: {
+			type: Number,
+			required: true
+		},
+		autoSubmit: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		mask: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		inputMode: {
+			type: String,
+			required: false
+		},
+		validationType: {
+			type: String,
+			required: false,
+			default: "numeric"
+		},
+		normalizeValue: {
+			type: Function,
+			required: false
+		},
+		required: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		readOnly: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		name: {
+			type: String,
+			required: false
+		},
+		value: {
+			type: String,
+			required: false
+		},
+		defaultValue: {
+			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",
+		"valueInvalid",
+		"valueComplete"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const attrs = useAttrs();
+		const attrsObject = attrs;
+		const { setDirty, validityData, disabled: fieldDisabled, setFilled, invalid, name: fieldName, state: fieldState, validation, validationMode, setFocused, setTouched } = useFieldRootContext();
+		const { clearErrors } = useFormContext();
+		const { getDescriptionProps, labelId } = useLabelableContext();
+		const length = computed(() => props.length);
+		const validationType = computed(() => props.validationType);
+		const normalizeValueProp = computed(() => props.normalizeValue);
+		const disabled = computed(() => fieldDisabled.value || props.disabled);
+		const readOnly = computed(() => props.readOnly);
+		const required = computed(() => props.required);
+		const mask = computed(() => props.mask);
+		const autoComplete = computed(() => props.autoComplete);
+		const formProp = computed(() => props.form);
+		const name = computed(() => fieldName.value ?? props.name);
+		const { value: valueUnwrapped, setValue: setValueUnwrapped } = useControllableState({
+			controlled: () => props.value,
+			default: () => props.defaultValue ?? "",
+			name: "OtpField",
+			state: "value"
+		});
+		const value = computed(() => normalizeOTPValue(valueUnwrapped.value, length.value, validationType.value, normalizeValueProp.value));
+		const valueLength = computed(() => getOTPValueLength(value.value));
+		const filled = computed(() => value.value !== "");
+		const rootRef = ref(null);
+		const inputRefsHolder = { elementsRef: ref([]) };
+		const inputRefs = inputRefsHolder.elementsRef;
+		const validationInputRef = ref(null);
+		const firstInputRef = { get value() {
+			return inputRefs.value[0] ?? null;
+		} };
+		let pendingFocus = null;
+		let pendingCompleteValue = null;
+		const inputCount = ref(0);
+		const focusedIndex = ref(Math.min(valueLength.value, length.value - 1));
+		const focused = ref(false);
+		const id = useLabelableId({ id: computed(() => props.id) });
+		const ariaLabelledByAttr = computed(() => attrs["aria-labelledby"]);
+		const ariaLabelledBy = useAriaLabelledBy({
+			ariaLabelledBy: ariaLabelledByAttr,
+			labelId,
+			labelSourceRef: firstInputRef,
+			enableFallback: true,
+			labelSourceId: () => id.value ?? void 0
+		});
+		const inputAriaLabelledBy = computed(() => ariaLabelledByAttr.value == null ? ariaLabelledBy.value : void 0);
+		const ariaDescribedBy = computed(() => mergeAriaIds(attrs["aria-describedby"], getDescriptionProps()["aria-describedby"]));
+		const validationConfig = computed(() => getOTPValidationConfig(validationType.value));
+		const pattern = computed(() => validationConfig.value?.slotPattern);
+		const hiddenInputPattern = computed(() => validationConfig.value?.getRootPattern(length.value));
+		const inputMode = computed(() => props.inputMode ?? validationConfig.value?.inputMode);
+		const hasValidLength = computed(() => Number.isInteger(length.value) && length.value > 0);
+		const activeIndex = computed(() => focused.value ? Math.min(focusedIndex.value, Math.max(length.value - 1, 0)) : Math.min(valueLength.value, length.value - 1));
+		watchEffect(() => {
+			setFilled(filled.value);
+		});
+		watchEffect(() => {
+			validation.setInputRef(validationInputRef.value);
+		});
+		useField({
+			enabled: computed(() => !disabled.value),
+			id,
+			name,
+			commit: (v) => validation.commit(v),
+			value,
+			getValue: () => value.value,
+			controlRef: firstInputRef
+		});
+		function focusInput(index) {
+			const targetIndex = Math.min(Math.max(index, 0), Math.max(inputRefs.value.length - 1, 0));
+			const target = inputRefs.value[targetIndex];
+			target?.focus();
+			target?.select();
+		}
+		function queueFocusInput(index, nextValue) {
+			pendingFocus = {
+				index,
+				value: nextValue
+			};
+		}
+		function requestSubmit() {
+			let formElement = validationInputRef.value?.form ?? inputRefs.value[0]?.form ?? null;
+			if (formProp.value) {
+				const associatedElement = ownerDocument(rootRef.value)?.getElementById(formProp.value);
+				if (associatedElement?.tagName === "FORM") formElement = associatedElement;
+			}
+			if (formElement && typeof formElement.requestSubmit === "function") formElement.requestSubmit();
+		}
+		function completeValue(completedValue, eventDetails) {
+			emit("valueComplete", completedValue, eventDetails);
+			if (props.autoSubmit) requestSubmit();
+		}
+		function getCompleteEventDetails(details) {
+			if (details.reason === REASONS.inputChange || details.reason === REASONS.inputPaste) return createGenericEventDetails(details.reason, details.event);
+			return null;
+		}
+		function setValue(nextValue, details) {
+			const currentValue = value.value;
+			const normalizedValue = normalizeOTPValue(nextValue, length.value, validationType.value, normalizeValueProp.value);
+			const normalizedValueLength = getOTPValueLength(normalizedValue);
+			const completeEventDetails = normalizedValueLength === length.value && (getOTPValueLength(currentValue) !== length.value || details.reason === REASONS.inputPaste) ? getCompleteEventDetails(details) : null;
+			if (normalizedValue === currentValue) {
+				if (completeEventDetails != null) completeValue(normalizedValue, completeEventDetails);
+				return null;
+			}
+			emit("valueChange", normalizedValue, details);
+			if (details.isCanceled) return null;
+			setValueUnwrapped(normalizedValue);
+			if (completeEventDetails != null) pendingCompleteValue = {
+				value: normalizedValue,
+				eventDetails: completeEventDetails
+			};
+			else if (normalizedValueLength !== length.value) pendingCompleteValue = null;
+			return normalizedValue;
+		}
+		function reportValueInvalid(invalidValue, details) {
+			emit("valueInvalid", invalidValue, details);
+		}
+		function handleInputFocus(index, event) {
+			if (index > valueLength.value) {
+				focusInput(Math.min(valueLength.value, length.value - 1));
+				return;
+			}
+			focusedIndex.value = index;
+			focused.value = true;
+			setFocused(true);
+			event.currentTarget.select();
+		}
+		function handleInputBlur(event) {
+			if (contains(rootRef.value, event.relatedTarget)) return;
+			setTouched(true);
+			focused.value = false;
+			setFocused(false);
+			if (validationMode.value === "onBlur") validation.commit(value.value);
+		}
+		function getInputId(index) {
+			if (id.value == null) return;
+			return index === 0 ? id.value : `${id.value}-${index + 1}`;
+		}
+		useValueChanged(value, () => {
+			clearErrors(name.value);
+			setDirty(value.value !== validityData.value.initialValue);
+			validation.commit(value.value, true);
+			if (pendingCompleteValue != null) {
+				const pending = pendingCompleteValue;
+				pendingCompleteValue = null;
+				if (pending.value === value.value) completeValue(value.value, pending.eventDetails);
+			}
+			if (pendingFocus != null) {
+				const pending = pendingFocus;
+				pendingFocus = null;
+				if (pending.value === value.value) focusInput(pending.index);
+			}
+		});
+		const state = computed(() => ({
+			...fieldState.value,
+			complete: valueLength.value === length.value,
+			disabled: disabled.value,
+			filled: filled.value,
+			focused: focused.value,
+			length: length.value,
+			readOnly: readOnly.value,
+			required: required.value,
+			value: value.value
+		}));
+		provide(otpFieldRootContextKey, {
+			activeIndex,
+			autoComplete,
+			disabled,
+			form: formProp,
+			focusInput,
+			queueFocusInput,
+			getInputId,
+			handleInputBlur,
+			handleInputFocus,
+			inputMode,
+			inputAriaLabelledBy,
+			invalid,
+			length,
+			mask,
+			pattern,
+			reportValueInvalid,
+			readOnly,
+			required,
+			normalizeValue: normalizeValueProp,
+			setValue,
+			state,
+			validationType,
+			value
+		});
+		const { tag, mergedProps, renderless, ref: renderRef } = useRenderElement({
+			componentProps: props,
+			state,
+			props: computed(() => mergeProps$1(attrsObject, {
+				"role": "group",
+				"aria-describedby": ariaDescribedBy.value,
+				"aria-labelledby": ariaLabelledBy.value
+			})),
+			stateAttributesMapping: rootStateAttributesMapping,
+			defaultTagName: "div",
+			ref: rootRef
+		});
+		const hiddenInputProps = computed(() => ({
+			...validation.getValidationProps(),
+			"type": "text",
+			"id": id.value && name.value == null ? `${id.value}-hidden-input` : void 0,
+			"form": formProp.value,
+			"name": name.value,
+			"value": value.value,
+			"autocomplete": autoComplete.value,
+			"inputmode": inputMode.value,
+			"minlength": length.value,
+			"maxlength": length.value,
+			"pattern": hiddenInputPattern.value,
+			"disabled": disabled.value,
+			"readonly": readOnly.value,
+			"required": required.value,
+			"aria-hidden": true,
+			"tabindex": -1,
+			"style": name.value ? visuallyHiddenInput : visuallyHidden
+		}));
+		function handleHiddenFocus() {
+			focusInput(0);
+		}
+		function handleHiddenInput(event) {
+			const target = event.target;
+			if (event.defaultPrevented || disabled.value || readOnly.value) return;
+			const rawValue = target.value;
+			const [normalizedValue, didRejectCharacters] = normalizeOTPValueWithDetails(rawValue, length.value, validationType.value, normalizeValueProp.value);
+			if (didRejectCharacters) reportValueInvalid(rawValue, createGenericEventDetails(REASONS.inputChange, event));
+			const committedValue = setValue(normalizedValue, createChangeEventDetails(REASONS.inputChange, event));
+			if (committedValue != null && committedValue !== "") queueFocusInput(getOTPValueLength(committedValue) - 1, committedValue);
+		}
+		function mergeAriaIds(...values) {
+			const ids = values.flatMap((v) => v?.split(/\s+/).filter(Boolean) ?? []);
+			return ids.length > 0 ? Array.from(new Set(ids)).join(" ") : void 0;
+		}
+		if (process.env.NODE_ENV !== "production") watchEffect(() => {
+			const len = length.value;
+			if (!Number.isInteger(len) || len <= 0) {
+				warn(`<OtpFieldRoot> \`length\` must be a positive integer. Received \`length={${String(len)}}\`.`);
+				return;
+			}
+			if (inputCount.value !== 0 && inputCount.value !== len) warn(`<OtpFieldRoot> \`length\` must match the number of rendered <OtpFieldInput /> parts. Received \`length={${len}}\` but rendered ${inputCount.value} input${inputCount.value === 1 ? "" : "s"}.`);
+		});
+		function handleMapChange(map) {
+			inputCount.value = map.size;
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(CompositeList_default, {
+				"elements-ref": inputRefsHolder.elementsRef,
+				"on-map-change": handleMapChange
+			}, {
+				default: withCtx(() => [unref(renderless) ? renderSlot(_ctx.$slots, "default", {
+					key: 0,
+					ref: unref(renderRef),
+					props: unref(mergedProps),
+					state: state.value
+				}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), mergeProps({
+					key: 1,
+					ref: unref(renderRef)
+				}, unref(mergedProps)), {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "default", { state: state.value })]),
+					_: 3
+				}, 16)), hasValidLength.value ? (openBlock(), createElementBlock("input", mergeProps({
+					key: 2,
+					ref_key: "validationInputRef",
+					ref: validationInputRef
+				}, hiddenInputProps.value, {
+					onInput: handleHiddenInput,
+					onFocus: handleHiddenFocus
+				}), null, 16)) : createCommentVNode("v-if", true)]),
+				_: 3
+			}, 8, ["elements-ref"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/otp-field/root/OtpFieldRoot.vue
+var OtpFieldRoot_default = OtpFieldRoot_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#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 progress has completed.
+	*/
+	ProgressRootDataAttributes["complete"] = "data-complete";
+	/**
+	* Present when the progress is in indeterminate state.
+	*/
+	ProgressRootDataAttributes["indeterminate"] = "data-indeterminate";
+	/**
+	* Present while the progress is progressing.
+	*/
+	ProgressRootDataAttributes["progressing"] = "data-progressing";
+	return ProgressRootDataAttributes;
+}({});
+
+//#endregion
+//#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/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: "ProgressIndicator",
+	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 { 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
+		},
+		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 { 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
+		},
+		format: {
+			type: null,
+			required: false
+		},
+		getAriaValueText: {
+			type: Function,
+			required: false
+		},
+		locale: {
+			type: null,
+			required: false
+		},
+		max: {
+			type: Number,
+			required: false,
+			default: 100
+		},
+		min: {
+			type: Number,
+			required: false,
+			default: 0
+		},
+		value: {
+			type: [Number, null],
+			required: true
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "div"
+		},
+		class: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		style: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		function getDefaultAriaValueText(formattedValue, value) {
+			if (value == null) return "indeterminate progress";
+			return formattedValue || `${value}%`;
+		}
+		const attrs = useAttrs();
+		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 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 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/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/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/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/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: "ScrollAreaScrollbar",
+	props: {
+		orientation: {
+			type: String,
+			required: false,
+			default: "vertical"
+		},
+		keepMounted: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "div"
+		},
+		class: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		style: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		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([
+			scrollbarElementRef,
+			viewportRef,
+			() => props.orientation
+		], () => {
+			wheelCleanup?.();
+			wheelCleanup = setupWheelHandler();
+		}, { flush: "post" });
+		onBeforeUnmount(() => {
+			wheelCleanup?.();
+		});
+		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 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
+		}
+	},
+	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 (!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 setThumbElement(element) {
+			thumbElementRef.value = element;
+		}
+		const { tag, mergedProps, renderless, ref: renderRef } = useRenderElement({
+			componentProps: props,
+			state,
+			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})` }
+				}
+			})),
+			defaultTagName: "div",
+			ref: setThumbElement
+		});
+		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)), null, 16));
+		};
+	}
+});
+
+//#endregion
+//#region src/scroll-area/thumb/ScrollAreaThumb.vue
+var ScrollAreaThumb_default = ScrollAreaThumb_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#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: "ScrollAreaViewport",
+	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 { 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: 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: viewportState.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/viewport/ScrollAreaViewport.vue
+var ScrollAreaViewport_default = ScrollAreaViewport_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#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
+//#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\"]");
@@ -3438,12 +7215,6 @@ let SliderRootDataAttributes = /* @__PURE__ */ function(SliderRootDataAttributes
 	return SliderRootDataAttributes;
 }({});
 
-//#endregion
-//#region src/utils/formatNumber.ts
-function formatNumber(value, locale, options) {
-	return new Intl.NumberFormat(locale, options).format(value);
-}
-
 //#endregion
 //#region src/slider/thumb/prehydrationScript.min.ts
 const script = "(function prehydration() {\n  const firstThumb = document.currentScript?.parentElement\n  if (!firstThumb) {\n    return\n  }\n\n  const control = firstThumb.closest('[data-base-ui-slider-control]')\n  if (!control) {\n    return\n  }\n\n  const indicator = control.querySelector('[data-base-ui-slider-indicator]')\n  const controlRect = control.getBoundingClientRect()\n  const vertical = control.getAttribute('data-orientation') === 'vertical'\n  const side = vertical ? 'height' : 'width'\n  const inputElems = control.querySelectorAll('input[type=\"range\"]')\n  const range = inputElems.length > 1\n  const lastIndex = inputElems.length - 1\n\n  let startPosition = null\n  let relativeSize = null\n\n  for (let i = 0; i < inputElems.length; i += 1) {\n    const input = inputElems[i]\n\n    const value = Number.parseFloat(input.getAttribute('value') ?? '')\n\n    if (Number.isNaN(value)) {\n      return\n    }\n\n    const thumb = input.parentElement\n    if (!thumb) {\n      return\n    }\n\n    const max = Number.parseFloat(input.getAttribute('max') ?? '100')\n    const min = Number.parseFloat(input.getAttribute('min') ?? '0')\n\n    const thumbRect = thumb?.getBoundingClientRect()\n\n    const controlSize = controlRect[side] - thumbRect[side]\n    const thumbValuePercent = max === min ? 0 : ((value - min) * 100) / (max - min)\n    const thumbOffsetFromControlEdge\n      = thumbRect[side] / 2 + (controlSize * thumbValuePercent) / 100\n    const percent = (thumbOffsetFromControlEdge / controlRect[side]) * 100\n\n    if (Number.isFinite(percent)) {\n      thumb.style.setProperty(`--position`, `${percent}%`)\n      thumb.style.removeProperty('visibility')\n\n      if (indicator) {\n        if (i === 0) {\n          startPosition = percent\n          indicator.style.setProperty('--start-position', `${percent}%`)\n          if (!range) {\n            indicator.style.removeProperty('visibility')\n          }\n        }\n        else if (i === lastIndex) {\n          relativeSize = percent - (startPosition ?? 0)\n          indicator.style.setProperty('--end-position', `${percent}%`)\n          indicator.style.setProperty('--relative-size', `${relativeSize}%`)\n          indicator.style.removeProperty('visibility')\n        }\n      }\n    }\n  }\n})()";
@@ -5709,5 +9480,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, NumberFieldInput_default, NumberFieldRoot_default, NumberFieldScrubAreaCursor_default, NumberFieldScrubArea_default, OtpFieldInput_default, OtpFieldRoot_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, getOtpFieldInputState, meterRootContextKey, name, numberFieldScrubAreaContextKey, otpFieldRootContextKey, progressRootContextKey, progressStateAttributesMapping, switchRootContextKey, toggleGroupContextKey, useAccordionRootContext, useCollapsibleRootContext, useFieldsetRootContext, useMeterRootContext, useNumberFieldScrubAreaContext, useOtpFieldRootContext, useProgressRootContext, useRender, useSwitchRootContext, useToggleGroupContext, version };
 //# sourceMappingURL=index2.js.map