ropav 0.0.9 → 0.0.11

package/dist/slider.js

@@ -1,27 +1,12 @@
 import './slider.css';
 import { t as bem } from "./bem.js";
+import { n as useStylesApi, t as presence } from "./styles-api.js";
 import { n as getComponentColorValue, t as componentColors } from "./componentColors.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { t as useControlState } from "./useControlState.js";
-import { n as useDelayedOpen, t as tooltip_default } from "./tooltip.js";
-import { child, computed, createComponent, createFor, createIf, createInvoker, createSlot, createTemplateRefSetter, defineVaporComponent, delegateEvents, next, nextTick, on, onBeforeUnmount, onMounted, onUpdated, ref, renderEffect, setAttr, setClass, setClassName, setInsertionState, setProp, setStyle, setText, setValue, template, toDisplayString, txt, unref, useId, useSlots, watch } from "vue";
-//#region src/components/slider/useSlider.ts
-var sliderMarkColorProperties = [
-	"--_rp-slider-mark-color",
-	"--_rp-slider-mark-label-color",
-	"--_rp-slider-mark-filled-label-color",
-	"--_rp-slider-mark-ring-color"
-];
-function normalizeSliderValue(value, min, max, step) {
-	const bounds = normalizeSliderBounds(min, max);
-	const safeStep = normalizeSliderStep(step);
-	const safeValue = Number.isFinite(value) ? value : bounds.min;
-	const clamped = Math.min(bounds.max, Math.max(bounds.min, safeValue));
-	if (safeStep === "any") return clamped;
-	const steps = Math.round((clamped - bounds.min) / safeStep);
-	const snapped = bounds.min + steps * safeStep;
-	return Math.min(bounds.max, Math.max(bounds.min, Number(snapped.toFixed(10))));
-}
+import { i as useDelayedOpen, n as resolveTooltipColorStyleWithContrast, r as resolveTooltipOffsetStyle, t as tooltip_default } from "./tooltip.js";
+import { applyVShow, child, computed, createComponent, createFor, createIf, createInvoker, createSlot, createTemplateRefSetter, defineVaporComponent, delegateEvents, next, on, onBeforeUnmount, onMounted, ref, renderEffect, setClass, setDynamicProps, setInsertionState, setProp, setStyle, setText, template, toDisplayString, toRef, txt, unref, useId, useSlots, watch } from "vue";
+//#region src/components/slider/sliderCore.ts
 function normalizeSliderBounds(min, max) {
 	const safeMin = Number.isFinite(min) ? min : 0;
 	const safeMax = Number.isFinite(max) ? max : safeMin;
@@ -36,32 +21,48 @@ function normalizeSliderBounds(min, max) {
 function normalizeSliderStep(step) {
 	return step === "any" || Number.isFinite(step) && step > 0 ? step : "any";
 }
+function normalizeSliderValue(value, min, max, step) {
+	const bounds = normalizeSliderBounds(min, max);
+	const safeStep = normalizeSliderStep(step);
+	const safeValue = Number.isFinite(value) ? value : bounds.min;
+	const clamped = Math.min(bounds.max, Math.max(bounds.min, safeValue));
+	if (safeStep === "any") return clamped;
+	const steps = Math.round((clamped - bounds.min) / safeStep);
+	const snapped = bounds.min + steps * safeStep;
+	return Math.min(bounds.max, Math.max(bounds.min, Number(snapped.toFixed(10))));
+}
 function getSliderValuePercent(value, min, max) {
 	if (max <= min) return 0;
 	const percent = (value - min) / (max - min) * 100;
 	return Math.min(100, Math.max(0, percent));
 }
-function getSliderMarkColorValue(color) {
-	return getComponentColorValue(color);
-}
-function getSliderColorValue(color) {
-	return getComponentColorValue(color);
-}
 function setSliderStyleValue(style, property, value) {
 	if (value) style[property] = value;
 }
-function getSliderMarkStyle(percent, color) {
-	const style = { "--_rp-slider-mark-position": `${percent}%` };
-	const colorValue = getSliderMarkColorValue(color);
-	for (const property of sliderMarkColorProperties) setSliderStyleValue(style, property, colorValue);
-	return style;
+function getSliderLengthValue(value) {
+	if (value == null || value === "") return void 0;
+	if (typeof value === "number") return Number.isFinite(value) ? `${value}px` : void 0;
+	return value;
+}
+function getSliderBorderValue(value, borderColorProperty) {
+	if (value == null || value === "") return void 0;
+	if (typeof value === "number") return Number.isFinite(value) ? `${value}px solid var(${borderColorProperty})` : void 0;
+	return value;
 }
-function normalizeSliderMark(mark) {
-	return typeof mark === "number" ? { value: mark } : mark;
+function applySliderThumbStyle(style, thumbStyle, properties) {
+	setSliderStyleValue(style, properties.size, getSliderLengthValue(thumbStyle?.size));
+	setSliderStyleValue(style, properties.border, getSliderBorderValue(thumbStyle?.border, properties.borderColor));
+	setSliderStyleValue(style, properties.padding, getSliderLengthValue(thumbStyle?.padding));
 }
-function normalizeSliderMarks(marks, min, max, valuePercent) {
+function getSliderMarkStyle(percent, color, properties) {
+	const style = { [properties.position]: `${percent}%` };
+	const colorValue = getComponentColorValue(color);
+	for (const property of properties.colors) setSliderStyleValue(style, property, colorValue);
+	return style;
+}
+function createSliderMarkItems(marks, min, max, isFilled, properties) {
 	return (marks ?? []).flatMap((markInput, index) => {
-		const mark = normalizeSliderMark(markInput);
+		const mark = typeof markInput === "number" ? { value: markInput } : markInput;
 		if (mark.hidden) return [];
 		const value = Number(mark.value);
 		if (!Number.isFinite(value)) return [];
@@ -71,47 +72,11 @@ function normalizeSliderMarks(marks, min, max, valuePercent) {
 			value,
 			label: mark.label,
 			hasLabel: mark.label != null,
-			filled: percent <= valuePercent,
-			style: getSliderMarkStyle(percent, mark.color)
+			filled: isFilled(value, percent),
+			style: getSliderMarkStyle(percent, mark.color, properties)
 		};
 	});
 }
-function getSliderLengthValue(value) {
-	if (value == null || value === "") return void 0;
-	if (typeof value === "number") return Number.isFinite(value) ? `${value}px` : void 0;
-	return value;
-}
-function getSliderBorderValue(value) {
-	if (value == null || value === "") return void 0;
-	if (typeof value === "number") return Number.isFinite(value) ? `${value}px solid var(--_rp-slider-thumb-border)` : void 0;
-	return value;
-}
-var sliderThumbStyleProps = [
-	[
-		"--_rp-slider-thumb-size",
-		"size",
-		getSliderLengthValue
-	],
-	[
-		"--_rp-slider-thumb-border-style",
-		"border",
-		getSliderBorderValue
-	],
-	[
-		"--_rp-slider-thumb-padding",
-		"padding",
-		getSliderLengthValue
-	]
-];
-function getSliderTrackStyle(props, valuePercent) {
-	const style = {
-		"--_rp-slider-percent": `${valuePercent}%`,
-		"--_rp-slider-ratio": `${valuePercent / 100}`
-	};
-	setSliderStyleValue(style, "--_rp-slider-color", getSliderColorValue(props.color));
-	for (const [property, propName, getValue] of sliderThumbStyleProps) setSliderStyleValue(style, property, getValue(props.thumbStyle?.[propName]));
-	return style;
-}
 function getFormattedSliderValue(value, formatter) {
 	return formatter ? formatter(value) : value;
 }
@@ -128,6 +93,25 @@ function getSliderTooltipMode(tooltip) {
 	if (typeof tooltip === "object") return tooltip.mode ?? "hover";
 	return tooltip;
 }
+//#endregion
+//#region src/components/slider/useSlider.ts
+function getSliderColorValue(color) {
+	return getComponentColorValue(color);
+}
+function getSliderTrackStyle(props, valuePercent) {
+	const style = {
+		"--_rp-slider-percent": `${valuePercent}%`,
+		"--_rp-slider-ratio": `${valuePercent / 100}`
+	};
+	setSliderStyleValue(style, "--_rp-slider-color", getSliderColorValue(props.color));
+	applySliderThumbStyle(style, props.thumbStyle, {
+		size: "--rp-slider-thumb-size",
+		border: "--_rp-slider-thumb-border-style",
+		padding: "--rp-slider-thumb-padding",
+		borderColor: "--_rp-slider-thumb-border"
+	});
+	return style;
+}
 function useSlider(props, emitUpdate) {
 	const control = useControlState(props);
 	const bounds = computed(() => normalizeSliderBounds(props.min, props.max));
@@ -136,7 +120,15 @@ function useSlider(props, emitUpdate) {
 	const valuePercent = computed(() => getSliderValuePercent(normalizedValue.value, bounds.value.min, bounds.value.max));
 	const formattedValue = computed(() => getFormattedSliderValue(normalizedValue.value, props.formatValue));
 	const ariaValueText = computed(() => getSliderAriaValueText(normalizedValue.value, props.ariaValueText, props.formatValue));
-	const markItems = computed(() => normalizeSliderMarks(props.marks, bounds.value.min, bounds.value.max, valuePercent.value));
+	const markItems = computed(() => createSliderMarkItems(props.marks, bounds.value.min, bounds.value.max, (_value, percent) => percent <= valuePercent.value, {
+		position: "--_rp-slider-mark-position",
+		colors: [
+			"--_rp-slider-mark-color",
+			"--_rp-slider-mark-label-color",
+			"--_rp-slider-mark-filled-label-color",
+			"--_rp-slider-mark-ring-color"
+		]
+	}));
 	const tooltipOptions = computed(() => getSliderTooltipOptions(props.tooltip));
 	const tooltipMode = computed(() => getSliderTooltipMode(props.tooltip));
 	const tooltipOpenDelay = computed(() => tooltipOptions.value.openDelay ?? 0);
@@ -144,6 +136,12 @@ function useSlider(props, emitUpdate) {
 		openDelay: () => tooltipOpenDelay.value,
 		disabled: () => tooltipMode.value !== "hover" || control.disabled
 	});
+	const trackHovered = ref(false);
+	const focusWithin = ref(false);
+	const dragging = ref(false);
+	let dismissed = false;
+	let dragView = null;
+	let dragPointerId;
 	const hasMarkLabels = computed(() => markItems.value.some((mark) => mark.hasLabel));
 	const tooltipVisible = computed(() => tooltipMode.value !== false);
 	const tooltipAlwaysVisible = computed(() => tooltipMode.value === "always");
@@ -160,9 +158,7 @@ function useSlider(props, emitUpdate) {
 		marked: markItems.value.length > 0,
 		"marks-with-labels": hasMarkLabels.value,
 		"tooltip-always-visible": tooltipAlwaysVisible.value,
-		disabled: control.disabled,
-		invalid: control.invalid,
-		valid: control.valid && !control.invalid
+		disabled: control.disabled
 	}));
 	const trackStyle = computed(() => getSliderTrackStyle(props, valuePercent.value));
 	function onInput(e) {
@@ -170,15 +166,64 @@ function useSlider(props, emitUpdate) {
 		const input = e.target;
 		emitUpdate(normalizeSliderValue(input.valueAsNumber, bounds.value.min, bounds.value.max, nativeStep.value));
 	}
-	function openTooltip() {
-		if (tooltipMode.value === "hover" && !control.disabled) openDelayedTooltip();
+	function hasTooltipInteraction() {
+		return trackHovered.value || focusWithin.value || dragging.value;
 	}
-	function closeTooltip() {
+	function syncTooltip() {
+		if (tooltipMode.value === "hover" && !control.disabled && hasTooltipInteraction() && !dismissed) {
+			openDelayedTooltip();
+			return;
+		}
 		closeDelayedTooltip();
 	}
+	function onTooltipMouseEnter() {
+		trackHovered.value = true;
+		dismissed = false;
+		syncTooltip();
+	}
+	function onTooltipMouseLeave() {
+		trackHovered.value = false;
+		syncTooltip();
+	}
+	function onTooltipFocusIn() {
+		focusWithin.value = true;
+		dismissed = false;
+		syncTooltip();
+	}
+	function onTooltipFocusOut() {
+		focusWithin.value = false;
+		syncTooltip();
+	}
+	function removeDragListeners() {
+		dragView?.removeEventListener("pointerup", onTooltipPointerEnd);
+		dragView?.removeEventListener("pointercancel", onTooltipPointerEnd);
+		dragView = null;
+		dragPointerId = void 0;
+	}
+	function onTooltipPointerEnd(event) {
+		if (dragPointerId !== void 0 && event.pointerId !== dragPointerId) return;
+		dragging.value = false;
+		removeDragListeners();
+		syncTooltip();
+	}
+	function onTooltipPointerDown(event) {
+		if (control.disabled || event.button !== 0 || event.isPrimary === false) return;
+		removeDragListeners();
+		dismissed = false;
+		dragging.value = true;
+		dragPointerId = Number.isFinite(event.pointerId) ? event.pointerId : void 0;
+		dragView = event.currentTarget?.ownerDocument.defaultView ?? null;
+		dragView?.addEventListener("pointerup", onTooltipPointerEnd);
+		dragView?.addEventListener("pointercancel", onTooltipPointerEnd);
+		syncTooltip();
+	}
 	function onTooltipKeydown(event) {
-		if (event.key === "Escape") closeTooltip();
+		if (event.key === "Escape") {
+			dismissed = true;
+			closeDelayedTooltip();
+		}
 	}
+	onBeforeUnmount(removeDragListeners);
 	return {
 		control,
 		nativeMin: computed(() => bounds.value.min),
@@ -201,27 +246,30 @@ function useSlider(props, emitUpdate) {
 		tooltipArrow,
 		tooltipContent,
 		onInput,
-		openTooltip,
-		closeTooltip,
+		onTooltipPointerDown,
+		onTooltipMouseEnter,
+		onTooltipMouseLeave,
+		onTooltipFocusIn,
+		onTooltipFocusOut,
 		onTooltipKeydown
 	};
 }
 //#endregion
 //#region src/components/slider/slider.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0$1 = template("<span data-v-c9655b1d class=rp-slider__label>");
-var t1$1 = template("<span data-v-c9655b1d class=rp-slider__value aria-hidden=true>");
-var t2$1 = template("<span data-v-c9655b1d class=rp-slider__header>");
-var t3$1 = template("<span data-v-c9655b1d class=rp-slider__mark-label> ");
-var t4$1 = template("<span data-v-c9655b1d><span data-v-c9655b1d class=rp-slider__mark-dot></span>");
-var t5$1 = template("<span data-v-c9655b1d class=rp-slider__marks aria-hidden=true>");
-var t6$1 = template("<span data-v-c9655b1d class=rp-slider__thumb aria-hidden=true><span data-v-c9655b1d class=rp-slider__thumb-content>");
-var t7$1 = template("<span data-v-c9655b1d class=rp-slider__tooltip-anchor aria-hidden=true>", 2);
-var t8 = template("<label data-v-c9655b1d><span data-v-c9655b1d class=rp-slider__track><span data-v-c9655b1d class=rp-slider__bar aria-hidden=true></span><input data-v-c9655b1d class=rp-slider__native type=range>", 1);
-delegateEvents("input", "focusin", "focusout", "keydown");
+var t0$2 = template("<span data-v-cf8192a8>");
+var t1$2 = template("<span data-v-cf8192a8 class=rp-slider__header>");
+var t2$2 = template("<span data-v-cf8192a8> ");
+var t3$2 = template("<span data-v-cf8192a8><span data-v-cf8192a8 class=rp-slider__mark-dot></span>");
+var t4$2 = template("<span data-v-cf8192a8 class=rp-slider__marks aria-hidden=true>");
+var t5$1 = template("<span data-v-cf8192a8><span data-v-cf8192a8 class=rp-slider__thumb-content>");
+var t6$1 = template("<span data-v-cf8192a8 class=rp-slider__tooltip-anchor aria-hidden=true>", 2);
+var t7$1 = template("<label data-v-cf8192a8><span data-v-cf8192a8><span data-v-cf8192a8></span><input data-v-cf8192a8>", 1);
+delegateEvents("pointerdown", "focusin", "focusout", "keydown");
 //#endregion
 //#region src/components/slider/slider.vue
 var slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
 	name: "RpSlider",
+	inheritAttrs: false,
 	__name: "slider",
 	props: {
 		id: {},
@@ -248,51 +296,75 @@ var slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			type: Boolean,
 			default: void 0
 		},
-		required: {
-			type: Boolean,
-			default: void 0
-		},
-		invalid: {
-			type: Boolean,
-			default: void 0
-		},
-		valid: {
-			type: Boolean,
-			default: void 0
-		},
 		ariaLabel: {},
 		ariaValueText: {},
 		describedby: {},
-		labelledby: {}
+		labelledby: {},
+		inputAttrs: {},
+		classNames: {},
+		styles: {}
 	},
 	emits: ["update:modelValue"],
-	setup(__props, { emit: __emit, slots: $slots }) {
+	setup(__props, { expose: __expose, emit: __emit, slots: $slots }) {
 		const props = __props;
 		const emit = __emit;
-		const { control, nativeMin, nativeMax, nativeStep, rootClass, normalizedValue, valuePercent, formattedValue, ariaValueText, markItems, trackStyle, tooltipVisible, tooltipOpen, tooltipPlacement, tooltipId, tooltipColor, tooltipOffset, tooltipOpenDelay, tooltipArrow, tooltipContent, onInput, openTooltip, closeTooltip, onTooltipKeydown } = useSlider(props, (value) => {
+		const inputRef = ref(null);
+		const slots = useSlots();
+		const { control, nativeMin, nativeMax, nativeStep, rootClass, normalizedValue, valuePercent, formattedValue, ariaValueText, markItems, trackStyle, tooltipVisible, tooltipOpen, tooltipPlacement, tooltipId, tooltipColor, tooltipOffset, tooltipOpenDelay, tooltipArrow, tooltipContent, onInput, onTooltipPointerDown, onTooltipMouseEnter, onTooltipMouseLeave, onTooltipFocusIn, onTooltipFocusOut, onTooltipKeydown } = useSlider(props, (value) => {
 			emit("update:modelValue", value);
 		});
-		const n31 = t8();
-		const n30 = child(n31, 1);
-		const n11 = next(child(n30), 1);
-		renderEffect(() => {
-			setClass(n31, [unref(rootClass), { "rp-slider--custom-thumb": $slots.thumb }]);
-			setAttr(n31, "data-disabled", unref(control).disabled || void 0);
-			setStyle(n31, unref(trackStyle));
+		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
+		const rootAttrs = computed(() => getRootAttrs({
+			class: [rootClass.value, { "rp-slider--custom-thumb": Boolean(slots.thumb) }],
+			style: trackStyle.value,
+			"data-disabled": presence(control.disabled),
+			"data-orientation": props.orientation
+		}));
+		const tooltipClassNames = computed(() => ({ root: ["rp-slider__tooltip", props.classNames?.tooltip] }));
+		const tooltipStyles = computed(() => ({ root: props.styles?.tooltip }));
+		const nativeInputAttrs = computed(() => {
+			const { class: compatibilityClass, style: compatibilityStyle, onInput: compatibilityOnInput, ...attrs } = props.inputAttrs ?? {};
+			return {
+				...attrs,
+				...getPartAttrs("input", {
+					class: "rp-slider__native",
+					compatibilityClass,
+					compatibilityStyle
+				}),
+				onInput(event) {
+					onInput(event);
+					compatibilityOnInput?.(event);
+				}
+			};
 		});
-		setInsertionState(n31, 0, 0);
+		function focus(options) {
+			inputRef.value?.focus(options);
+		}
+		__expose({
+			nativeElement: inputRef,
+			focus
+		});
+		const _setTemplateRef = createTemplateRefSetter();
+		const n32 = t7$1();
+		const n31 = child(n32, 1);
+		const n11 = child(n31);
+		const n12 = next(n11, 1);
+		renderEffect(() => setDynamicProps(n32, [rootAttrs.value]));
+		setInsertionState(n32, 0, 0);
 		createIf(() => $slots.default || $slots.value, () => {
-			const n10 = t2$1();
+			const n10 = t1$2();
 			setInsertionState(n10, null, 0);
 			createIf(() => $slots.default, () => {
-				const n5 = t0$1();
+				const n5 = t0$2();
+				renderEffect(() => setDynamicProps(n5, [unref(getPartAttrs)("label", { class: "rp-slider__label" })]));
 				setInsertionState(n5, null, 0);
 				createSlot("default", null, null, 1);
 				return n5;
 			});
 			setInsertionState(n10, null, 1);
 			createIf(() => $slots.value, () => {
-				const n9 = t1$1();
+				const n9 = t0$2();
+				renderEffect(() => setDynamicProps(n9, [unref(getPartAttrs)("value", { class: "rp-slider__value" }), { "aria-hidden": "true" }]));
 				setInsertionState(n9, null, 0);
 				createSlot("value", {
 					value: () => unref(normalizedValue),
@@ -303,65 +375,76 @@ var slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			});
 			return n10;
 		});
-		n11.$evtinput = createInvoker((e) => unref(onInput)(e));
+		_setTemplateRef(n12, inputRef, null, "inputRef");
 		renderEffect(() => {
+			const _getPartAttrs = unref(getPartAttrs);
 			const _control = unref(control);
-			const _control_required = _control.required;
-			setProp(n11, "id", _control.id);
-			setProp(n11, "name", __props.name);
-			setValue(n11, unref(normalizedValue));
-			setProp(n11, "min", unref(nativeMin));
-			setProp(n11, "max", unref(nativeMax));
-			setProp(n11, "step", unref(nativeStep));
-			setProp(n11, "orient", __props.orientation === "vertical" ? "vertical" : void 0);
-			setProp(n11, "disabled", _control.disabled || void 0);
-			setProp(n11, "required", _control_required || void 0);
-			setAttr(n11, "aria-label", __props.ariaLabel || void 0);
-			setAttr(n11, "aria-labelledby", _control.ariaLabelledby);
-			setAttr(n11, "aria-describedby", _control.ariaDescribedby);
-			setAttr(n11, "aria-orientation", __props.orientation === "vertical" ? "vertical" : void 0);
-			setAttr(n11, "aria-invalid", _control.invalid || void 0);
-			setAttr(n11, "aria-required", _control_required || void 0);
-			setAttr(n11, "aria-valuetext", unref(ariaValueText));
+			setDynamicProps(n31, [_getPartAttrs("track", { class: "rp-slider__track" })]);
+			setDynamicProps(n11, [_getPartAttrs("range", { class: "rp-slider__bar" }), { "aria-hidden": "true" }]);
+			setDynamicProps(n12, [nativeInputAttrs.value, {
+				id: _control.id,
+				name: __props.name,
+				type: "range",
+				value: unref(normalizedValue),
+				min: unref(nativeMin),
+				max: unref(nativeMax),
+				step: unref(nativeStep),
+				orient: __props.orientation === "vertical" ? "vertical" : void 0,
+				disabled: _control.disabled || void 0,
+				"aria-label": __props.ariaLabel || void 0,
+				"aria-labelledby": _control.ariaLabelledby,
+				"aria-describedby": _control.ariaDescribedby,
+				"aria-orientation": __props.orientation === "vertical" ? "vertical" : void 0,
+				"aria-valuetext": unref(ariaValueText),
+				"data-disabled": unref(presence)(_control.disabled)
+			}]);
 		});
-		setInsertionState(n30, null, 2);
+		setInsertionState(n31, null, 2);
 		createIf(() => unref(markItems).length, () => {
-			const n20 = t5$1();
-			setInsertionState(n20, null, 0);
+			const n21 = t4$2();
+			setInsertionState(n21, null, 0);
 			createFor(() => unref(markItems), (_for_item0) => {
-				const n19 = t4$1();
+				const n20 = t3$2();
 				renderEffect(() => {
 					const _mark = _for_item0.value;
-					setClassName(n19, _mark.filled ? 1 : 0, " rp-slider__mark--filled", "rp-slider__mark");
-					setStyle(n19, _mark.style);
+					setDynamicProps(n20, [unref(getPartAttrs)("mark", {
+						class: ["rp-slider__mark", { "rp-slider__mark--filled": _mark.filled }],
+						style: _mark.style
+					}), { "data-filled": unref(presence)(_mark.filled) }]);
 				});
-				setInsertionState(n19, null, 1);
+				setInsertionState(n20, null, 1);
 				createIf(() => _for_item0.value.hasLabel, () => {
-					const n18 = t3$1();
-					const x18 = txt(n18);
-					renderEffect(() => setText(x18, toDisplayString(_for_item0.value.label)));
-					return n18;
+					const n19 = t2$2();
+					const x19 = txt(n19);
+					renderEffect(() => {
+						setDynamicProps(n19, [unref(getPartAttrs)("markLabel", { class: "rp-slider__mark-label" })]);
+						setText(x19, toDisplayString(_for_item0.value.label));
+					});
+					return n19;
 				});
-				return n19;
+				return n20;
 			}, (mark) => mark.key, 9);
-			return n20;
+			return n21;
 		});
-		setInsertionState(n30, null, 3);
+		setInsertionState(n31, null, 3);
 		createIf(() => $slots.thumb, () => {
-			const n25 = t6$1();
-			setInsertionState(child(n25), null, 0);
+			const n26 = t5$1();
+			const n25 = child(n26);
+			renderEffect(() => setDynamicProps(n26, [unref(getPartAttrs)("thumb", { class: "rp-slider__thumb" }), { "aria-hidden": "true" }]));
+			setInsertionState(n25, null, 0);
 			createSlot("thumb", {
 				value: () => unref(normalizedValue),
 				formattedValue: () => unref(formattedValue),
 				percent: () => unref(valuePercent)
 			}, null, 1);
-			return n25;
+			return n26;
 		});
-		setInsertionState(n30, null, 4);
+		setInsertionState(n31, null, 4);
 		createIf(() => unref(tooltipVisible), () => {
 			return createComponent(tooltip_default, {
 				id: () => unref(tooltipId),
-				class: "rp-slider__tooltip",
+				"class-names": () => tooltipClassNames.value,
+				styles: () => tooltipStyles.value,
 				content: () => unref(tooltipContent),
 				placement: () => unref(tooltipPlacement),
 				color: () => unref(tooltipColor),
@@ -371,25 +454,614 @@ var slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 				arrow: () => unref(tooltipArrow),
 				decorative: ""
 			}, () => {
-				return t7$1();
+				return t6$1();
 			});
 		});
-		on(n30, "mouseenter", (e) => unref(openTooltip)(e));
-		on(n30, "mouseleave", (e) => unref(closeTooltip)(e));
-		n30.$evtfocusin = createInvoker((e) => unref(openTooltip)(e));
-		n30.$evtfocusout = createInvoker((e) => unref(closeTooltip)(e));
-		n30.$evtkeydown = createInvoker((e) => unref(onTooltipKeydown)(e));
-		return n31;
+		n31.$evtpointerdown = createInvoker((e) => unref(onTooltipPointerDown)(e));
+		on(n31, "mouseenter", (e) => unref(onTooltipMouseEnter)(e));
+		on(n31, "mouseleave", (e) => unref(onTooltipMouseLeave)(e));
+		n31.$evtfocusin = createInvoker((e) => unref(onTooltipFocusIn)(e));
+		n31.$evtfocusout = createInvoker((e) => unref(onTooltipFocusOut)(e));
+		n31.$evtkeydown = createInvoker((e) => unref(onTooltipKeydown)(e));
+		return n32;
 	}
-}), [["__scopeId", "data-v-c9655b1d"]]);
+}), [["__scopeId", "data-v-cf8192a8"]]);
+//#endregion
+//#region src/components/slider/useRangeSliderTooltipCollision.ts
+var TOOLTIP_COLLISION_GAP = 4;
+function getAxisSize(size, orientation) {
+	return orientation === "horizontal" ? size.width : size.height;
+}
+function getTooltipInterval(anchor, size, orientation, placement) {
+	const axisSize = getAxisSize(size, orientation);
+	if (orientation === "horizontal" ? placement === "top" || placement === "bottom" : placement === "left" || placement === "right") return {
+		start: anchor - axisSize / 2,
+		end: anchor + axisSize / 2
+	};
+	return (orientation === "horizontal" ? placement === "left" : placement === "top") ? {
+		start: anchor - axisSize,
+		end: anchor
+	} : {
+		start: anchor,
+		end: anchor + axisSize
+	};
+}
+function areTooltipIntervalsOverlapping(lower, upper, gap) {
+	return lower.start < upper.end + gap && lower.end + gap > upper.start;
+}
+function areRangeSliderTooltipLayoutsOverlapping({ gap = TOOLTIP_COLLISION_GAP, lowerPercent, lowerSize, orientation, placement, trackLength, upperPercent, upperSize }) {
+	if (trackLength <= 0 || lowerSize.width <= 0 || lowerSize.height <= 0 || upperSize.width <= 0 || upperSize.height <= 0) return false;
+	const getAnchor = (percent) => {
+		const ratio = percent / 100;
+		return orientation === "vertical" ? trackLength * (1 - ratio) : trackLength * ratio;
+	};
+	return areTooltipIntervalsOverlapping(getTooltipInterval(getAnchor(lowerPercent), lowerSize, orientation, placement), getTooltipInterval(getAnchor(upperPercent), upperSize, orientation, placement), gap);
+}
+function getObservedSize(entry) {
+	const borderBoxSize = Array.isArray(entry.borderBoxSize) ? entry.borderBoxSize[0] : entry.borderBoxSize;
+	if (borderBoxSize) return {
+		width: borderBoxSize.inlineSize,
+		height: borderBoxSize.blockSize
+	};
+	return {
+		width: entry.contentRect.width,
+		height: entry.contentRect.height
+	};
+}
+function getElementSize(element) {
+	const rect = element.getBoundingClientRect();
+	return {
+		width: rect.width,
+		height: rect.height
+	};
+}
+function useRangeSliderTooltipCollision({ enabled, lower, orientation, placement, root, sizeDependencies = [], upper, valuePercent }) {
+	const tooltipsOverlapping = ref(false);
+	const rootSize = ref({
+		width: 0,
+		height: 0
+	});
+	const lowerSize = ref({
+		width: 0,
+		height: 0
+	});
+	const upperSize = ref({
+		width: 0,
+		height: 0
+	});
+	let resizeObserver;
+	let frameWindow;
+	let frameId;
+	let destroyed = false;
+	function setOverlapping(value) {
+		if (tooltipsOverlapping.value !== value) tooltipsOverlapping.value = value;
+	}
+	function updateCollision() {
+		if (!enabled.value) {
+			setOverlapping(false);
+			return;
+		}
+		const trackLength = orientation.value === "horizontal" ? rootSize.value.width : rootSize.value.height;
+		setOverlapping(areRangeSliderTooltipLayoutsOverlapping({
+			gap: TOOLTIP_COLLISION_GAP,
+			lowerPercent: valuePercent.value[0],
+			lowerSize: lowerSize.value,
+			orientation: orientation.value,
+			placement: placement.value,
+			trackLength,
+			upperPercent: valuePercent.value[1],
+			upperSize: upperSize.value
+		}));
+	}
+	function measureSizes() {
+		if (destroyed) return;
+		rootSize.value = root.value ? getElementSize(root.value) : {
+			width: 0,
+			height: 0
+		};
+		lowerSize.value = lower.value ? getElementSize(lower.value) : {
+			width: 0,
+			height: 0
+		};
+		upperSize.value = upper.value ? getElementSize(upper.value) : {
+			width: 0,
+			height: 0
+		};
+		updateCollision();
+	}
+	function scheduleMeasure() {
+		if (destroyed || frameId != null) return;
+		const view = root.value?.ownerDocument.defaultView;
+		if (!view?.requestAnimationFrame) {
+			measureSizes();
+			return;
+		}
+		frameWindow = view;
+		frameId = view.requestAnimationFrame(() => {
+			frameId = void 0;
+			frameWindow = void 0;
+			measureSizes();
+		});
+	}
+	function refreshObservedElements() {
+		if (!resizeObserver) return;
+		resizeObserver.disconnect();
+		for (const element of [
+			root.value,
+			lower.value,
+			upper.value
+		]) if (element) resizeObserver.observe(element);
+	}
+	function onResize(entries) {
+		for (const entry of entries) {
+			const size = getObservedSize(entry);
+			if (entry.target === root.value) rootSize.value = size;
+			else if (entry.target === lower.value) lowerSize.value = size;
+			else if (entry.target === upper.value) upperSize.value = size;
+		}
+		updateCollision();
+	}
+	function onWindowResize() {
+		scheduleMeasure();
+	}
+	onMounted(() => {
+		const view = root.value?.ownerDocument.defaultView;
+		if (view?.ResizeObserver) resizeObserver = new view.ResizeObserver(onResize);
+		view?.addEventListener("resize", onWindowResize);
+		refreshObservedElements();
+		if (!resizeObserver) scheduleMeasure();
+	});
+	watch([
+		root,
+		lower,
+		upper
+	], () => {
+		refreshObservedElements();
+		if (!resizeObserver) scheduleMeasure();
+	}, { flush: "post" });
+	watch([
+		valuePercent,
+		orientation,
+		placement,
+		enabled
+	], updateCollision, { flush: "sync" });
+	watch(sizeDependencies, () => {
+		if (!resizeObserver) scheduleMeasure();
+	}, { flush: "post" });
+	const arrowAlongTrackAxis = computed(() => orientation.value === "horizontal" ? placement.value === "top" || placement.value === "bottom" : placement.value === "left" || placement.value === "right");
+	const trackAxisLength = computed(() => orientation.value === "horizontal" ? rootSize.value.width : rootSize.value.height);
+	const thumbDistance = computed(() => {
+		const [lowerPercent, upperPercent] = valuePercent.value;
+		return Math.abs(upperPercent - lowerPercent) / 100 * trackAxisLength.value;
+	});
+	const mergedArrowOffset = computed(() => {
+		if (trackAxisLength.value <= 0 || !arrowAlongTrackAxis.value) return 0;
+		return thumbDistance.value * .5;
+	});
+	const mergedMinSize = computed(() => {
+		if (!tooltipsOverlapping.value || trackAxisLength.value <= 0 || !arrowAlongTrackAxis.value) return 0;
+		const maxEndpoint = Math.max(getAxisSize(lowerSize.value, orientation.value), getAxisSize(upperSize.value, orientation.value));
+		return thumbDistance.value + maxEndpoint;
+	});
+	onBeforeUnmount(() => {
+		destroyed = true;
+		(root.value?.ownerDocument.defaultView)?.removeEventListener("resize", onWindowResize);
+		resizeObserver?.disconnect();
+		if (frameId != null) frameWindow?.cancelAnimationFrame(frameId);
+	});
+	return {
+		tooltipsOverlapping,
+		mergedArrowOffset,
+		mergedMinSize
+	};
+}
+//#endregion
+//#region src/components/slider/range-slider-tooltip.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0$1 = template("<span data-v-ce70c540 class=rp-range-slider__tooltip-merged-value> </span>");
+var t1$1 = template("<span data-v-ce70c540 class=rp-range-slider__tooltip-merged-value> ");
+var t2$1 = template("<span data-v-ce70c540 class=rp-range-slider__tooltip-merged-separator>–</span>", 2);
+var t3$1 = template(" ");
+var t4$1 = template("<span data-v-ce70c540 aria-hidden=true><span data-v-ce70c540 data-thumb=lower><span data-v-ce70c540 class=rp-range-slider__tooltip-anchor></span><span data-v-ce70c540 class=rp-tooltip__content aria-hidden=true> </span></span><span data-v-ce70c540 data-thumb=upper><span data-v-ce70c540 class=rp-range-slider__tooltip-anchor></span><span data-v-ce70c540 class=rp-tooltip__content aria-hidden=true> </span></span><span data-v-ce70c540 data-thumb=merged><span data-v-ce70c540 class=rp-range-slider__tooltip-anchor></span><span data-v-ce70c540 class=rp-tooltip__content aria-hidden=true>", 1);
+//#endregion
+//#region src/components/slider/range-slider-tooltip.vue
+var range_slider_tooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+	name: "RpRangeSliderTooltip",
+	__name: "range-slider-tooltip",
+	props: {
+		arrow: {
+			type: Boolean,
+			default: false
+		},
+		color: { default: void 0 },
+		content: {},
+		ids: {},
+		mergedContent: {},
+		mergedId: { default: void 0 },
+		offset: { default: void 0 },
+		open: { type: Boolean },
+		orientation: {},
+		placement: {},
+		valuePercent: {},
+		tooltipClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		tooltipStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	emits: ["update:overlapping"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const generatedId = useId();
+		const tooltipLayerRef = ref(null);
+		const lowerContentRef = ref(null);
+		const upperContentRef = ref(null);
+		const resolvedIds = computed(() => [props.ids[0] ?? `${generatedId}-lower-tooltip`, props.ids[1] ?? `${generatedId}-upper-tooltip`]);
+		const resolvedMergedId = computed(() => props.mergedId ?? `${generatedId}-merged-tooltip`);
+		const tooltipRootClass = computed(() => bem("rp-tooltip", {
+			[`placement-${props.placement}`]: true,
+			arrow: props.arrow,
+			open: props.open
+		}));
+		const contentStyle = computed(() => ({
+			...resolveTooltipOffsetStyle(props.offset),
+			...resolveTooltipColorStyleWithContrast(props.color, void 0)
+		}));
+		const { tooltipsOverlapping, mergedArrowOffset, mergedMinSize } = useRangeSliderTooltipCollision({
+			enabled: toRef(props, "open"),
+			lower: lowerContentRef,
+			orientation: toRef(props, "orientation"),
+			placement: toRef(props, "placement"),
+			root: tooltipLayerRef,
+			sizeDependencies: [() => props.content],
+			upper: upperContentRef,
+			valuePercent: toRef(props, "valuePercent")
+		});
+		const layerStyle = computed(() => ({
+			"--_rp-range-slider-tooltip-merged-arrow-offset": `${mergedArrowOffset.value}px`,
+			"--_rp-range-slider-tooltip-merged-min-size": `${mergedMinSize.value}px`
+		}));
+		watch(tooltipsOverlapping, (overlapping) => {
+			emit("update:overlapping", overlapping);
+		}, { immediate: true });
+		onBeforeUnmount(() => {
+			emit("update:overlapping", false);
+		});
+		const _setTemplateRef = createTemplateRefSetter();
+		const n16 = t4$1();
+		const n1 = child(n16);
+		const n0 = next(child(n1), 1);
+		const n3 = next(n1, 1);
+		const n2 = next(child(n3), 1);
+		const n15 = next(n3, 2);
+		const n14 = next(child(n15), 1);
+		const x0 = txt(n0);
+		applyVShow(n0, () => __props.open);
+		_setTemplateRef(n0, lowerContentRef, null, "lowerContentRef");
+		const x2 = txt(n2);
+		applyVShow(n2, () => __props.open);
+		_setTemplateRef(n2, upperContentRef, null, "upperContentRef");
+		renderEffect(() => {
+			const _tooltipStyle = __props.tooltipStyle;
+			const _resolvedIds = resolvedIds.value;
+			const _contentStyle = contentStyle.value;
+			const _content = __props.content;
+			setClass(n16, [
+				"rp-range-slider__tooltips",
+				`rp-range-slider__tooltips--placement-${__props.placement}`,
+				{
+					"rp-range-slider__tooltips--overlapping": unref(tooltipsOverlapping),
+					"rp-range-slider__tooltips--vertical": __props.orientation === "vertical"
+				}
+			]);
+			setStyle(n16, layerStyle.value);
+			setClass(n1, [
+				tooltipRootClass.value,
+				"rp-range-slider__tooltip",
+				"rp-range-slider__tooltip--lower",
+				__props.tooltipClass
+			]);
+			setStyle(n1, _tooltipStyle);
+			setProp(n0, "id", _resolvedIds[0]);
+			setStyle(n0, _contentStyle);
+			setText(x0, toDisplayString(_content[0]));
+			setClass(n3, [
+				tooltipRootClass.value,
+				"rp-range-slider__tooltip",
+				"rp-range-slider__tooltip--upper",
+				__props.tooltipClass
+			]);
+			setStyle(n3, _tooltipStyle);
+			setProp(n2, "id", _resolvedIds[1]);
+			setStyle(n2, _contentStyle);
+			setText(x2, toDisplayString(_content[1]));
+			setClass(n15, [
+				tooltipRootClass.value,
+				"rp-range-slider__tooltip",
+				"rp-range-slider__tooltip--merged",
+				__props.tooltipClass
+			]);
+			setStyle(n15, _tooltipStyle);
+			setProp(n14, "id", resolvedMergedId.value);
+			setStyle(n14, _contentStyle);
+		});
+		setInsertionState(n14, null, 0);
+		createIf(() => __props.orientation === "vertical" && __props.content[0] !== __props.content[1], () => {
+			const n6 = t0$1();
+			const n7 = t1$1();
+			const x6 = txt(n6);
+			const x7 = txt(n7);
+			renderEffect(() => {
+				const _content = __props.content;
+				setText(x6, toDisplayString(_content[1]));
+				setText(x7, toDisplayString(_content[0]));
+			});
+			return [n6, n7];
+		}, () => createIf(() => __props.content[0] !== __props.content[1], () => {
+			const n9 = t0$1();
+			const n10 = t2$1();
+			const n11 = t1$1();
+			const x9 = txt(n9);
+			const x11 = txt(n11);
+			renderEffect(() => {
+				const _content = __props.content;
+				setText(x9, toDisplayString(_content[0]));
+				setText(x11, toDisplayString(_content[1]));
+			});
+			return [
+				n9,
+				n10,
+				n11
+			];
+		}, () => {
+			const n13 = t3$1();
+			renderEffect(() => setText(n13, toDisplayString(__props.mergedContent)));
+			return n13;
+		}, 518), 262);
+		applyVShow(n14, () => __props.open);
+		_setTemplateRef(n16, tooltipLayerRef, null, "tooltipLayerRef");
+		return n16;
+	}
+}), [["__scopeId", "data-v-ce70c540"]]);
+//#endregion
+//#region src/components/slider/useRangeSliderPointer.ts
+function useRangeSliderPointer(options) {
+	let session;
+	let frameWindow = null;
+	let frameId;
+	let pendingPointerEvent;
+	let geometryDirty = false;
+	function cancelScheduledFrame() {
+		if (frameId !== void 0) frameWindow?.cancelAnimationFrame(frameId);
+		frameWindow = null;
+		frameId = void 0;
+	}
+	function refreshGeometry() {
+		const currentSession = session;
+		if (!currentSession) return false;
+		if (!geometryDirty) return true;
+		const geometry = options.getPointerGeometry(currentSession.track);
+		if (geometry === void 0) return false;
+		geometryDirty = false;
+		currentSession.geometry = geometry;
+		return true;
+	}
+	function applyScheduledUpdate() {
+		if (!refreshGeometry()) return;
+		const event = pendingPointerEvent;
+		pendingPointerEvent = void 0;
+		if (event && isCurrentPointer(event)) updateFromPointer(event);
+	}
+	function flushScheduledUpdate() {
+		cancelScheduledFrame();
+		applyScheduledUpdate();
+	}
+	function onAnimationFrame() {
+		frameWindow = null;
+		frameId = void 0;
+		applyScheduledUpdate();
+	}
+	function scheduleUpdate() {
+		const view = session?.view;
+		if (!view?.requestAnimationFrame) {
+			flushScheduledUpdate();
+			return;
+		}
+		if (frameId !== void 0) return;
+		frameWindow = view;
+		frameId = view.requestAnimationFrame(onAnimationFrame);
+	}
+	function onGeometryChange() {
+		if (!session) return;
+		geometryDirty = true;
+		scheduleUpdate();
+	}
+	function stopDragging() {
+		const stoppedSession = session;
+		if (!stoppedSession) return;
+		stoppedSession.view?.removeEventListener("pointermove", onPointerMove);
+		stoppedSession.view?.removeEventListener("pointerup", onPointerEnd);
+		stoppedSession.view?.removeEventListener("pointercancel", onPointerEnd);
+		stoppedSession.view?.removeEventListener("resize", onGeometryChange);
+		stoppedSession.view?.removeEventListener("scroll", onGeometryChange, true);
+		cancelScheduledFrame();
+		pendingPointerEvent = void 0;
+		geometryDirty = false;
+		session = void 0;
+		options.endDrag(stoppedSession.thumb);
+	}
+	function switchDraggingThumb(nextThumb) {
+		const currentSession = session;
+		if (!currentSession || currentSession.thumb === nextThumb) return;
+		const previousThumb = currentSession.thumb;
+		currentSession.thumb = nextThumb;
+		options.transferDrag(previousThumb, nextThumb);
+		options.setActiveThumb(nextThumb);
+		options.transferFocusedThumb(currentSession.track, previousThumb, nextThumb);
+	}
+	function updateFromPointer(event) {
+		const currentSession = session;
+		if (!currentSession) return;
+		const value = options.getPointerValue(event, currentSession.geometry);
+		if (value == null) return;
+		switchDraggingThumb(options.updateThumb(currentSession.thumb, value, currentSession.anchorValue));
+	}
+	function isCurrentPointer(event) {
+		return session?.pointerId === void 0 || event.pointerId === session.pointerId;
+	}
+	function onPointerMove(event) {
+		if (!isCurrentPointer(event)) return;
+		if (!session) return;
+		pendingPointerEvent = event;
+		scheduleUpdate();
+	}
+	function onPointerEnd(event) {
+		if (!isCurrentPointer(event)) return;
+		if (event.type === "pointerup") flushScheduledUpdate();
+		stopDragging();
+	}
+	function onTrackPointerDown(event) {
+		if (options.disabled() || event.button !== 0 || event.isPrimary === false) return;
+		const track = event.currentTarget;
+		if (!track) return;
+		const geometry = options.getPointerGeometry(track);
+		if (geometry === void 0) return;
+		const pointerValue = options.getPointerValue(event, geometry);
+		if (pointerValue == null) return;
+		const thumb = options.getThumb(event, pointerValue);
+		event.preventDefault();
+		stopDragging();
+		options.setActiveThumb(thumb);
+		options.focusThumb(track, thumb);
+		session = {
+			view: track.ownerDocument.defaultView,
+			track,
+			geometry,
+			thumb,
+			anchorValue: options.getAnchorValue(thumb),
+			pointerId: Number.isFinite(event.pointerId) ? event.pointerId : void 0
+		};
+		options.startDrag(thumb);
+		switchDraggingThumb(options.updateThumb(thumb, pointerValue, session.anchorValue));
+		const view = session?.view;
+		view?.addEventListener("pointermove", onPointerMove);
+		view?.addEventListener("pointerup", onPointerEnd);
+		view?.addEventListener("pointercancel", onPointerEnd);
+		view?.addEventListener("resize", onGeometryChange);
+		view?.addEventListener("scroll", onGeometryChange, true);
+	}
+	onBeforeUnmount(stopDragging);
+	return { onTrackPointerDown };
+}
+//#endregion
+//#region src/components/slider/useRangeSliderTooltipState.ts
+function useRangeSliderTooltipState(options) {
+	const delayedTooltip = useDelayedOpen({
+		openDelay: () => options.openDelay.value,
+		disabled: () => options.mode.value !== "hover" || options.disabled()
+	});
+	const interactionReasons = ref({
+		lower: {
+			focus: false,
+			drag: false
+		},
+		upper: {
+			focus: false,
+			drag: false
+		}
+	});
+	const trackHovered = ref(false);
+	const dismissed = ref(false);
+	function hasThumbInteraction(thumb) {
+		const reasons = interactionReasons.value[thumb];
+		return reasons.focus || reasons.drag;
+	}
+	function hasAnyInteraction() {
+		return trackHovered.value || hasThumbInteraction("lower") || hasThumbInteraction("upper");
+	}
+	function sync() {
+		if (options.mode.value === "hover" && !options.disabled() && hasAnyInteraction() && !dismissed.value) {
+			delayedTooltip.open();
+			return;
+		}
+		delayedTooltip.closeImmediate();
+	}
+	function startInteraction(thumb, reason) {
+		options.setActiveThumb(thumb);
+		const wasActive = hasAnyInteraction();
+		const wasDismissed = dismissed.value;
+		interactionReasons.value[thumb][reason] = true;
+		dismissed.value = false;
+		if (!wasActive || wasDismissed) sync();
+	}
+	function endInteraction(thumb, reason) {
+		interactionReasons.value[thumb][reason] = false;
+		if (!hasAnyInteraction()) sync();
+	}
+	function transferInteraction(from, to, reason) {
+		if (!interactionReasons.value[from][reason]) return;
+		interactionReasons.value[from][reason] = false;
+		interactionReasons.value[to][reason] = true;
+	}
+	function onFocus(thumb) {
+		startInteraction(thumb, "focus");
+	}
+	function onBlur(thumb) {
+		endInteraction(thumb, "focus");
+	}
+	function onTrackMouseEnter() {
+		const wasActive = hasAnyInteraction();
+		const wasDismissed = dismissed.value;
+		trackHovered.value = true;
+		dismissed.value = false;
+		if (!wasActive || wasDismissed) sync();
+	}
+	function onTrackMouseLeave() {
+		trackHovered.value = false;
+		if (!hasAnyInteraction()) sync();
+	}
+	function onKeydown(thumb, event) {
+		options.setActiveThumb(thumb);
+		if (event.key === "Escape") {
+			dismissed.value = true;
+			delayedTooltip.closeImmediate();
+			return true;
+		}
+		if (dismissed.value) {
+			dismissed.value = false;
+			sync();
+		}
+		return false;
+	}
+	const visible = computed(() => options.mode.value !== false);
+	const alwaysVisible = computed(() => options.mode.value === "always");
+	const open = computed(() => alwaysVisible.value || options.mode.value === "hover" && delayedTooltip.isOpen.value && hasAnyInteraction() && !dismissed.value && !options.disabled());
+	watch([options.mode, options.disabled], sync);
+	return {
+		visible,
+		alwaysVisible,
+		open,
+		startInteraction,
+		endInteraction,
+		transferInteraction,
+		onFocus,
+		onBlur,
+		onTrackMouseEnter,
+		onTrackMouseLeave,
+		onKeydown
+	};
+}
 //#endregion
 //#region src/components/slider/useRangeSlider.ts
-var rangeSliderMarkColorProperties = [
-	"--_rp-range-slider-mark-color",
-	"--_rp-range-slider-mark-label-color",
-	"--_rp-range-slider-mark-filled-label-color",
-	"--_rp-range-slider-mark-ring-color"
-];
 function roundSliderNumber(value) {
 	return Number(value.toFixed(10));
 }
@@ -438,94 +1110,30 @@ function getClosestRangeSliderThumb(value, range, activeThumb) {
 	if (upperDistance < lowerDistance) return "upper";
 	return activeThumb ?? "upper";
 }
-function setRangeSliderStyleValue(style, property, value) {
-	if (value) style[property] = value;
-}
-function getRangeSliderLengthValue(value) {
-	if (value == null || value === "") return void 0;
-	if (typeof value === "number") return Number.isFinite(value) ? `${value}px` : void 0;
-	return value;
-}
-function getRangeSliderBorderValue(value) {
-	if (value == null || value === "") return void 0;
-	if (typeof value === "number") return Number.isFinite(value) ? `${value}px solid var(--_rp-range-slider-thumb-border)` : void 0;
-	return value;
-}
-var rangeSliderThumbStyleProps = [
-	[
-		"--_rp-range-slider-thumb-size",
-		"size",
-		getRangeSliderLengthValue
-	],
-	[
-		"--_rp-range-slider-thumb-border-style",
-		"border",
-		getRangeSliderBorderValue
-	],
-	[
-		"--_rp-range-slider-thumb-padding",
-		"padding",
-		getRangeSliderLengthValue
-	]
-];
-function getRangeSliderTrackStyle(props, valuePercent) {
-	const [lowerPercent, upperPercent] = valuePercent;
-	const style = {
-		"--_rp-range-slider-lower-percent": `${lowerPercent}%`,
-		"--_rp-range-slider-upper-percent": `${upperPercent}%`,
-		"--_rp-range-slider-lower-ratio": `${lowerPercent / 100}`,
-		"--_rp-range-slider-upper-ratio": `${upperPercent / 100}`,
-		"--_rp-range-slider-tooltip-merged-percent": `${(lowerPercent + upperPercent) / 2}%`
-	};
-	setRangeSliderStyleValue(style, "--_rp-range-slider-color", getComponentColorValue(props.color));
-	for (const [property, propName, getValue] of rangeSliderThumbStyleProps) setRangeSliderStyleValue(style, property, getValue(props.thumbStyle?.[propName]));
-	return style;
-}
-function getRangeSliderMarkStyle(percent, color) {
-	const style = { "--_rp-range-slider-mark-position": `${percent}%` };
-	const colorValue = getComponentColorValue(color);
-	for (const property of rangeSliderMarkColorProperties) setRangeSliderStyleValue(style, property, colorValue);
-	return style;
-}
-function normalizeRangeSliderMark(mark) {
-	return typeof mark === "number" ? { value: mark } : mark;
-}
-function normalizeRangeSliderMarks(marks, min, max, value) {
-	return (marks ?? []).flatMap((markInput, index) => {
-		const mark = normalizeRangeSliderMark(markInput);
-		if (mark.hidden) return [];
-		const markValue = Number(mark.value);
-		if (!Number.isFinite(markValue)) return [];
-		const percent = getSliderValuePercent(markValue, min, max);
-		return {
-			key: `${markValue}-${index}`,
-			value: markValue,
-			label: mark.label,
-			hasLabel: mark.label != null,
-			filled: markValue >= value[0] && markValue <= value[1],
-			style: getRangeSliderMarkStyle(percent, mark.color)
-		};
+function getRangeSliderTrackStyle(props, valuePercent) {
+	const [lowerPercent, upperPercent] = valuePercent;
+	const style = {
+		"--_rp-range-slider-lower-percent": `${lowerPercent}%`,
+		"--_rp-range-slider-upper-percent": `${upperPercent}%`,
+		"--_rp-range-slider-lower-ratio": `${lowerPercent / 100}`,
+		"--_rp-range-slider-upper-ratio": `${upperPercent / 100}`,
+		"--_rp-range-slider-tooltip-merged-percent": `${(lowerPercent + upperPercent) / 2}%`
+	};
+	setSliderStyleValue(style, "--_rp-range-slider-color", getComponentColorValue(props.color));
+	applySliderThumbStyle(style, props.thumbStyle, {
+		size: "--rp-slider-thumb-size",
+		border: "--_rp-range-slider-thumb-border-style",
+		padding: "--rp-slider-thumb-padding",
+		borderColor: "--_rp-range-slider-thumb-border"
 	});
+	return style;
 }
 function getFormattedRangeSliderValue(value, formatter) {
-	return formatter ? [formatter(value[0]), formatter(value[1])] : value;
-}
-function getRangeSliderEndpointValueText(value, ariaValueText, formatter) {
-	if (typeof ariaValueText === "function") return String(ariaValueText(value));
-	if (ariaValueText != null && ariaValueText !== "") return String(ariaValueText);
-	if (formatter) return String(formatter(value));
+	return [getFormattedSliderValue(value[0], formatter), getFormattedSliderValue(value[1], formatter)];
 }
 function getRangeSliderAriaValueText(value, ariaValueText, formatter) {
 	const endpointValues = Array.isArray(ariaValueText) ? ariaValueText : [ariaValueText, ariaValueText];
-	return [getRangeSliderEndpointValueText(value[0], endpointValues[0], formatter), getRangeSliderEndpointValueText(value[1], endpointValues[1], formatter)];
-}
-function getRangeSliderTooltipOptions(tooltip) {
-	return typeof tooltip === "object" ? tooltip : {};
-}
-function getRangeSliderTooltipMode(tooltip) {
-	if (tooltip === false) return false;
-	if (typeof tooltip === "object") return tooltip.mode ?? "hover";
-	return tooltip;
+	return [getSliderAriaValueText(value[0], endpointValues[0], formatter), getSliderAriaValueText(value[1], endpointValues[1], formatter)];
 }
 function getThumbIndex(thumb) {
 	return thumb === "lower" ? 0 : 1;
@@ -570,31 +1178,31 @@ function useRangeSlider(props, emitUpdate) {
 		if (normalizedMinRange.value === 0) return [bounds.value.max, bounds.value.max];
 		return [clamp(getStepValueAtOrBelow(normalizedValue.value[1] - normalizedMinRange.value, bounds.value.min, valueStep.value), bounds.value.min, bounds.value.max), bounds.value.max];
 	});
-	const markItems = computed(() => normalizeRangeSliderMarks(props.marks, bounds.value.min, bounds.value.max, normalizedValue.value));
+	const markItems = computed(() => createSliderMarkItems(props.marks, bounds.value.min, bounds.value.max, (value) => value >= normalizedValue.value[0] && value <= normalizedValue.value[1], {
+		position: "--_rp-range-slider-mark-position",
+		colors: [
+			"--_rp-range-slider-mark-color",
+			"--_rp-range-slider-mark-label-color",
+			"--_rp-range-slider-mark-filled-label-color",
+			"--_rp-range-slider-mark-ring-color"
+		]
+	}));
 	const hasMarkLabels = computed(() => markItems.value.some((mark) => mark.hasLabel));
 	const trackStyle = computed(() => getRangeSliderTrackStyle(props, valuePercent.value));
-	const tooltipOptions = computed(() => getRangeSliderTooltipOptions(props.tooltip));
-	const tooltipMode = computed(() => getRangeSliderTooltipMode(props.tooltip));
+	const tooltipOptions = computed(() => getSliderTooltipOptions(props.tooltip));
+	const tooltipMode = computed(() => getSliderTooltipMode(props.tooltip));
 	const tooltipOpenDelay = computed(() => tooltipOptions.value.openDelay ?? 0);
-	const delayedTooltip = useDelayedOpen({
-		openDelay: () => tooltipOpenDelay.value,
-		disabled: () => tooltipMode.value !== "hover" || control.disabled
-	});
-	const tooltipInteractionReasons = ref({
-		lower: {
-			focus: false,
-			drag: false
-		},
-		upper: {
-			focus: false,
-			drag: false
+	const tooltipState = useRangeSliderTooltipState({
+		mode: tooltipMode,
+		openDelay: tooltipOpenDelay,
+		disabled: () => control.disabled,
+		setActiveThumb: (thumb) => {
+			activeThumb.value = thumb;
 		}
 	});
-	const tooltipTrackHovered = ref(false);
-	const tooltipDismissed = ref(false);
-	const tooltipVisible = computed(() => tooltipMode.value !== false);
-	const tooltipAlwaysVisible = computed(() => tooltipMode.value === "always");
-	const tooltipOpen = computed(() => tooltipAlwaysVisible.value || tooltipMode.value === "hover" && delayedTooltip.isOpen.value && hasAnyTooltipInteractionReason() && !tooltipDismissed.value && !control.disabled);
+	const tooltipVisible = tooltipState.visible;
+	const tooltipAlwaysVisible = tooltipState.alwaysVisible;
+	const tooltipOpen = tooltipState.open;
 	const tooltipPlacement = computed(() => tooltipOptions.value.placement ?? (props.orientation === "vertical" ? "left" : "top"));
 	const tooltipIds = computed(() => {
 		const baseId = tooltipOptions.value.id;
@@ -608,16 +1216,17 @@ function useRangeSlider(props, emitUpdate) {
 	const tooltipOffset = computed(() => tooltipOptions.value.offset);
 	const tooltipArrow = computed(() => tooltipOptions.value.arrow ?? false);
 	const tooltipContent = computed(() => [String(formattedValue.value[0]), String(formattedValue.value[1])]);
-	const mergedTooltipContent = computed(() => `${tooltipContent.value[0]}–${tooltipContent.value[1]}`);
+	const mergedTooltipContent = computed(() => {
+		const [lower, upper] = tooltipContent.value;
+		return lower === upper ? lower : `${lower}–${upper}`;
+	});
 	const rootClass = computed(() => bem("rp-range-slider", {
 		[`size-${props.size}`]: Boolean(props.size),
 		vertical: props.orientation === "vertical",
 		marked: markItems.value.length > 0,
 		"marks-with-labels": hasMarkLabels.value,
 		"tooltip-always-visible": tooltipAlwaysVisible.value,
-		disabled: control.disabled,
-		invalid: control.invalid,
-		valid: control.valid && !control.invalid
+		disabled: control.disabled
 	}));
 	function getThumbUpdate(thumb, value, anchorValue = normalizedValue.value[getThumbIndex(getOppositeThumb(thumb))]) {
 		const safeValue = normalizeSliderValue(value, bounds.value.min, bounds.value.max, valueStep.value);
@@ -653,101 +1262,17 @@ function useRangeSlider(props, emitUpdate) {
 		const input = event.target;
 		transferFocusedThumb(input, thumb, updateThumb(thumb, input.valueAsNumber));
 	}
-	function hasThumbTooltipInteractionReason(thumb) {
-		const reasons = tooltipInteractionReasons.value[thumb];
-		return reasons.focus || reasons.drag;
-	}
-	function hasAnyTooltipInteractionReason() {
-		return tooltipTrackHovered.value || hasThumbTooltipInteractionReason("lower") || hasThumbTooltipInteractionReason("upper");
-	}
-	function syncTooltip() {
-		if (tooltipMode.value === "hover" && !control.disabled && hasAnyTooltipInteractionReason() && !tooltipDismissed.value) {
-			delayedTooltip.open();
-			return;
-		}
-		delayedTooltip.closeImmediate();
-	}
-	function startTooltipInteraction(thumb, reason) {
-		activeThumb.value = thumb;
-		const wasActive = hasAnyTooltipInteractionReason();
-		const wasDismissed = tooltipDismissed.value;
-		tooltipInteractionReasons.value[thumb][reason] = true;
-		tooltipDismissed.value = false;
-		if (!wasActive || wasDismissed) syncTooltip();
-	}
-	function endTooltipInteraction(thumb, reason) {
-		tooltipInteractionReasons.value[thumb][reason] = false;
-		if (!hasAnyTooltipInteractionReason()) syncTooltip();
-	}
 	function transferFocusedThumb(input, thumb, nextThumb) {
 		if (thumb === nextThumb || input.ownerDocument.activeElement !== input) return;
 		const track = input.closest(".rp-range-slider__track");
 		if (!track) return;
 		const nextInput = getThumbInput(track, nextThumb);
 		if (!nextInput) return;
-		const currentReasons = tooltipInteractionReasons.value[thumb];
-		if (currentReasons.focus) {
-			currentReasons.focus = false;
-			tooltipInteractionReasons.value[nextThumb].focus = true;
-		}
+		tooltipState.transferInteraction(thumb, nextThumb, "focus");
 		nextInput.focus({ preventScroll: true });
 	}
-	function resetTooltipInteractionReasons(thumb) {
-		const reasons = tooltipInteractionReasons.value[thumb];
-		reasons.focus = false;
-		reasons.drag = false;
-	}
-	function clearTooltipInteractions(thumb) {
-		resetTooltipInteractionReasons(thumb);
-		syncTooltip();
-	}
-	function resumeDismissedTooltip(thumb) {
-		activeThumb.value = thumb;
-		if (!tooltipDismissed.value) return;
-		tooltipDismissed.value = false;
-		syncTooltip();
-	}
-	function dismissTooltip() {
-		tooltipDismissed.value = true;
-		delayedTooltip.closeImmediate();
-	}
-	function onTooltipFocus(thumb) {
-		startTooltipInteraction(thumb, "focus");
-	}
-	function onTooltipBlur(thumb) {
-		endTooltipInteraction(thumb, "focus");
-	}
-	function onTooltipTrackMouseEnter() {
-		const wasActive = hasAnyTooltipInteractionReason();
-		const wasDismissed = tooltipDismissed.value;
-		tooltipTrackHovered.value = true;
-		tooltipDismissed.value = false;
-		if (!wasActive || wasDismissed) syncTooltip();
-	}
-	function onTooltipTrackMouseLeave() {
-		tooltipTrackHovered.value = false;
-		if (!hasAnyTooltipInteractionReason()) syncTooltip();
-	}
-	function openTooltip(thumb) {
-		startTooltipInteraction(thumb, "focus");
-	}
-	function closeTooltip(thumb) {
-		if (thumb) {
-			clearTooltipInteractions(thumb);
-			return;
-		}
-		resetTooltipInteractionReasons("lower");
-		resetTooltipInteractionReasons("upper");
-		tooltipTrackHovered.value = false;
-		syncTooltip();
-	}
 	function onTooltipKeydown(thumb, event) {
-		activeThumb.value = thumb;
-		if (event.key === "Escape") {
-			dismissTooltip();
-			return;
-		}
-		resumeDismissedTooltip(thumb);
+		if (tooltipState.onKeydown(thumb, event)) return;
 		if (!hasManualNativeKeyboard.value || valueStep.value === "any") return;
 		const index = getThumbIndex(thumb);
 		const currentValue = normalizedValue.value[index];
@@ -780,88 +1305,42 @@ function useRangeSlider(props, emitUpdate) {
 		const nextThumb = updateThumb(thumb, nextValue);
 		transferFocusedThumb(event.target, thumb, nextThumb);
 	}
-	function getValueFromPointer(event, track) {
+	function getPointerGeometry(track) {
 		const vertical = props.orientation === "vertical";
-		const trackRect = track.getBoundingClientRect();
 		const thumbsRect = track.querySelector(".rp-range-slider__thumbs")?.getBoundingClientRect();
-		const rect = thumbsRect && (vertical ? thumbsRect.height > 0 : thumbsRect.width > 0) ? thumbsRect : trackRect;
+		const rect = thumbsRect && (vertical ? thumbsRect.height > 0 : thumbsRect.width > 0) ? thumbsRect : track.getBoundingClientRect();
 		const length = vertical ? rect.height : rect.width;
 		if (length <= 0) return void 0;
-		const ratio = clamp((vertical ? rect.bottom - event.clientY : event.clientX - rect.left) / length, 0, 1);
-		return bounds.value.min + ratio * (bounds.value.max - bounds.value.min);
-	}
-	let dragWindow = null;
-	let dragTrack = null;
-	let dragThumb = null;
-	let dragAnchorValue = null;
-	let dragPointerId;
-	function stopDragging() {
-		const stoppedThumb = dragThumb;
-		if (dragWindow) {
-			dragWindow.removeEventListener("pointermove", onPointerMove);
-			dragWindow.removeEventListener("pointerup", onPointerEnd);
-			dragWindow.removeEventListener("pointercancel", onPointerEnd);
-		}
-		dragWindow = null;
-		dragTrack = null;
-		dragThumb = null;
-		dragAnchorValue = null;
-		dragPointerId = void 0;
-		if (stoppedThumb) endTooltipInteraction(stoppedThumb, "drag");
-	}
-	function switchDraggingThumb(track, nextThumb) {
-		const previousThumb = dragThumb;
-		if (!previousThumb || previousThumb === nextThumb) return;
-		tooltipInteractionReasons.value[previousThumb].drag = false;
-		tooltipInteractionReasons.value[nextThumb].drag = true;
-		dragThumb = nextThumb;
-		activeThumb.value = nextThumb;
-		const previousInput = getThumbInput(track, previousThumb);
-		if (previousInput) transferFocusedThumb(previousInput, previousThumb, nextThumb);
-	}
-	function updateFromPointer(event, track) {
-		const value = getValueFromPointer(event, track);
-		if (value == null || !dragThumb) return;
-		switchDraggingThumb(track, updateThumb(dragThumb, value, dragAnchorValue ?? normalizedValue.value[getThumbIndex(getOppositeThumb(dragThumb))]));
-	}
-	function onPointerMove(event) {
-		if (dragPointerId !== void 0 && event.pointerId !== dragPointerId) return;
-		if (!dragTrack || !dragThumb) {
-			stopDragging();
-			return;
-		}
-		updateFromPointer(event, dragTrack);
-	}
-	function onPointerEnd(event) {
-		if (dragPointerId !== void 0 && event.pointerId !== dragPointerId) return;
-		stopDragging();
+		return {
+			length,
+			start: vertical ? rect.bottom : rect.left,
+			vertical
+		};
 	}
-	function onTrackPointerDown(event) {
-		if (control.disabled || event.button !== 0 || event.isPrimary === false) return;
-		const track = event.currentTarget;
-		if (!track) return;
-		const pointerValue = getValueFromPointer(event, track);
-		if (pointerValue == null) return;
-		const thumb = getThumbFromTarget(event.target) ?? getClosestRangeSliderThumb(pointerValue, normalizedValue.value, activeThumb.value);
-		event.preventDefault();
-		stopDragging();
-		activeThumb.value = thumb;
-		focusThumb(track, thumb);
-		dragTrack = track;
-		dragThumb = thumb;
-		dragAnchorValue = normalizedValue.value[getThumbIndex(getOppositeThumb(thumb))];
-		dragPointerId = Number.isFinite(event.pointerId) ? event.pointerId : void 0;
-		dragWindow = track.ownerDocument.defaultView;
-		startTooltipInteraction(thumb, "drag");
-		updateFromPointer(event, track);
-		dragWindow?.addEventListener("pointermove", onPointerMove);
-		dragWindow?.addEventListener("pointerup", onPointerEnd);
-		dragWindow?.addEventListener("pointercancel", onPointerEnd);
+	function getValueFromPointer(event, geometry) {
+		const pointerPosition = geometry.vertical ? event.clientY : event.clientX;
+		const ratio = clamp((geometry.vertical ? geometry.start - pointerPosition : pointerPosition - geometry.start) / geometry.length, 0, 1);
+		return bounds.value.min + ratio * (bounds.value.max - bounds.value.min);
 	}
-	watch([tooltipMode, () => control.disabled], () => {
-		syncTooltip();
+	const { onTrackPointerDown } = useRangeSliderPointer({
+		disabled: () => control.disabled,
+		getPointerGeometry,
+		getPointerValue: getValueFromPointer,
+		getThumb: (event, value) => getThumbFromTarget(event.target) ?? getClosestRangeSliderThumb(value, normalizedValue.value, activeThumb.value),
+		getAnchorValue: (thumb) => normalizedValue.value[getThumbIndex(getOppositeThumb(thumb))],
+		setActiveThumb: (thumb) => {
+			activeThumb.value = thumb;
+		},
+		focusThumb,
+		updateThumb,
+		transferFocusedThumb: (track, from, to) => {
+			const input = getThumbInput(track, from);
+			if (input) transferFocusedThumb(input, from, to);
+		},
+		startDrag: (thumb) => tooltipState.startInteraction(thumb, "drag"),
+		endDrag: (thumb) => tooltipState.endInteraction(thumb, "drag"),
+		transferDrag: (from, to) => tooltipState.transferInteraction(from, to, "drag")
 	});
-	onBeforeUnmount(stopDragging);
 	return {
 		control,
 		nativeMin,
@@ -891,326 +1370,29 @@ function useRangeSlider(props, emitUpdate) {
 		mergedTooltipContent,
 		onInput,
 		onTrackPointerDown,
-		onTooltipFocus,
-		onTooltipBlur,
-		onTooltipTrackMouseEnter,
-		onTooltipTrackMouseLeave,
-		openTooltip,
-		closeTooltip,
+		onTooltipFocus: tooltipState.onFocus,
+		onTooltipBlur: tooltipState.onBlur,
+		onTooltipTrackMouseEnter: tooltipState.onTrackMouseEnter,
+		onTooltipTrackMouseLeave: tooltipState.onTrackMouseLeave,
 		onTooltipKeydown
 	};
 }
 //#endregion
-//#region src/components/slider/useRangeSliderTooltipCollision.ts
-var TOOLTIP_COLLISION_GAP = 4;
-var TOOLTIP_COLLISION_RELEASE_GAP = 8;
-var TOOLTIP_CONTENT_SELECTOR$1 = ".rp-tooltip__content";
-function areRangeSliderTooltipRectsOverlapping(lower, upper, gap = TOOLTIP_COLLISION_GAP) {
-	if (lower.width <= 0 || lower.height <= 0 || upper.width <= 0 || upper.height <= 0) return false;
-	return lower.left < upper.right + gap && lower.right + gap > upper.left && lower.top < upper.bottom + gap && lower.bottom + gap > upper.top;
-}
-function useRangeSliderTooltipCollision(root) {
-	const tooltipsOverlapping = ref(false);
-	const observedElements = /* @__PURE__ */ new Set();
-	let resizeObserver;
-	let frameWindow;
-	let frameId;
-	let microtaskQueued = false;
-	let destroyed = false;
-	function setOverlapping(value) {
-		if (tooltipsOverlapping.value !== value) tooltipsOverlapping.value = value;
-	}
-	function getTooltipContents(el) {
-		return [el.querySelector(`.rp-range-slider__tooltip--lower ${TOOLTIP_CONTENT_SELECTOR$1}`), el.querySelector(`.rp-range-slider__tooltip--upper ${TOOLTIP_CONTENT_SELECTOR$1}`)];
-	}
-	function measure() {
-		if (destroyed) return;
-		const el = root.value;
-		if (!el) {
-			setOverlapping(false);
-			return;
-		}
-		const [lower, upper] = getTooltipContents(el);
-		if (!lower || !upper) {
-			setOverlapping(false);
-			return;
-		}
-		const view = el.ownerDocument.defaultView;
-		if (!view || view.getComputedStyle(lower).display === "none" || view.getComputedStyle(upper).display === "none") {
-			setOverlapping(false);
-			return;
-		}
-		setOverlapping(areRangeSliderTooltipRectsOverlapping(lower.getBoundingClientRect(), upper.getBoundingClientRect(), tooltipsOverlapping.value ? TOOLTIP_COLLISION_RELEASE_GAP : TOOLTIP_COLLISION_GAP));
-	}
-	function scheduleMeasure() {
-		if (destroyed || frameId != null || microtaskQueued) return;
-		const view = root.value?.ownerDocument.defaultView;
-		if (view?.requestAnimationFrame) {
-			frameWindow = view;
-			frameId = view.requestAnimationFrame(() => {
-				frameId = void 0;
-				frameWindow = void 0;
-				measure();
-			});
-			return;
-		}
-		microtaskQueued = true;
-		queueMicrotask(() => {
-			microtaskQueued = false;
-			measure();
-		});
-	}
-	function refreshObservedElements() {
-		if (!resizeObserver) return;
-		const el = root.value;
-		const nextElements = /* @__PURE__ */ new Set();
-		if (el) {
-			nextElements.add(el);
-			for (const tooltip of getTooltipContents(el)) if (tooltip) nextElements.add(tooltip);
-		}
-		for (const observed of observedElements) if (!nextElements.has(observed)) resizeObserver.unobserve(observed);
-		for (const next of nextElements) if (!observedElements.has(next)) resizeObserver.observe(next);
-		observedElements.clear();
-		for (const next of nextElements) observedElements.add(next);
-	}
-	function onWindowResize() {
-		scheduleMeasure();
-	}
-	onMounted(() => {
-		const view = root.value?.ownerDocument.defaultView;
-		if (view?.ResizeObserver) resizeObserver = new view.ResizeObserver(scheduleMeasure);
-		view?.addEventListener("resize", onWindowResize);
-		refreshObservedElements();
-		scheduleMeasure();
-	});
-	onUpdated(() => {
-		refreshObservedElements();
-		scheduleMeasure();
-	});
-	onBeforeUnmount(() => {
-		destroyed = true;
-		(root.value?.ownerDocument.defaultView)?.removeEventListener("resize", onWindowResize);
-		resizeObserver?.disconnect();
-		observedElements.clear();
-		if (frameId != null) frameWindow?.cancelAnimationFrame(frameId);
-	});
-	return { tooltipsOverlapping };
-}
-//#endregion
-//#region src/components/slider/useRangeSliderTooltipTransition.ts
-var DEFAULT_TRANSITION_DURATION = 150;
-var DEFAULT_TRANSITION_EASING = "ease";
-var TOOLTIP_CONTENT_SELECTOR = ".rp-tooltip__content";
-var TRANSITION_EASING_PATTERN = /(?:cubic-bezier|linear|steps)\([^)]*\)|\b(?:ease-in-out|ease-in|ease-out|ease|linear|step-end|step-start)\b/;
-function getTooltip(root, kind) {
-	return root.querySelector(`.rp-range-slider__tooltip--${kind}`);
-}
-function getTooltipCenter(tooltip) {
-	const content = tooltip.querySelector(TOOLTIP_CONTENT_SELECTOR);
-	if (!content) return;
-	const rect = content.getBoundingClientRect();
-	if (rect.width <= 0 || rect.height <= 0) return;
-	return {
-		x: rect.left + rect.width / 2,
-		y: rect.top + rect.height / 2
-	};
-}
-function getTooltipSnapshot(tooltip) {
-	const center = getTooltipCenter(tooltip);
-	if (!center) return;
-	const opacity = Number.parseFloat(tooltip.ownerDocument.defaultView.getComputedStyle(tooltip).opacity);
-	return {
-		center,
-		opacity: Number.isFinite(opacity) ? opacity : 0
-	};
-}
-function getCarrierKind(root) {
-	return root.dataset.activeThumb === "lower" ? "upper" : "lower";
-}
-function getTransitionOptions(root) {
-	const transition = root.ownerDocument.defaultView.getComputedStyle(root).getPropertyValue("--rp-transition-fast").trim();
-	const durationMatch = transition.match(/([\d.]+)(ms|s)/);
-	if (!durationMatch) return {
-		duration: DEFAULT_TRANSITION_DURATION,
-		easing: DEFAULT_TRANSITION_EASING
-	};
-	const durationValue = Number.parseFloat(durationMatch[1]);
-	return {
-		duration: durationMatch[2] === "s" ? durationValue * 1e3 : durationValue,
-		easing: transition.match(TRANSITION_EASING_PATTERN)?.[0] ?? DEFAULT_TRANSITION_EASING
-	};
-}
-function prefersReducedMotion(root) {
-	return root.ownerDocument.defaultView?.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
-}
-function getTranslate(from, base) {
-	return `translate3d(${from.x - base.x}px, ${from.y - base.y}px, 0)`;
-}
-function useRangeSliderTooltipTransition(root, tooltipsOverlapping, value, activeThumb) {
-	const animations = /* @__PURE__ */ new Set();
-	let inferredCarrier;
-	let frozenMergedContent;
-	let frozenMergedTooltip;
-	let heldSplitOpacity = [];
-	let transitionId = 0;
-	watch(activeThumb, () => {
-		inferredCarrier = void 0;
-	}, { flush: "sync" });
-	watch(value, (next, previous) => {
-		const lowerMoved = next[0] !== previous[0];
-		if (lowerMoved !== (next[1] !== previous[1])) inferredCarrier = lowerMoved ? "upper" : "lower";
-		else inferredCarrier = void 0;
-	}, { flush: "sync" });
-	function clearFrozenMergedPosition() {
-		if (frozenMergedTooltip) {
-			frozenMergedTooltip.style.removeProperty("left");
-			frozenMergedTooltip.style.removeProperty("top");
-		}
-		if (frozenMergedContent) {
-			const { element, height, width } = frozenMergedContent;
-			if (width) element.style.width = width;
-			else element.style.removeProperty("width");
-			if (height) element.style.height = height;
-			else element.style.removeProperty("height");
-		}
-		frozenMergedTooltip = void 0;
-		frozenMergedContent = void 0;
-	}
-	function freezeMergedPosition(merged) {
-		const style = merged.ownerDocument.defaultView.getComputedStyle(merged);
-		const content = merged.querySelector(TOOLTIP_CONTENT_SELECTOR);
-		merged.style.left = style.left;
-		merged.style.top = style.top;
-		frozenMergedTooltip = merged;
-		if (content) {
-			const rect = content.getBoundingClientRect();
-			frozenMergedContent = {
-				element: content,
-				height: content.style.height,
-				width: content.style.width
-			};
-			content.style.width = `${rect.width}px`;
-			content.style.height = `${rect.height}px`;
-		}
-	}
-	function clearHeldSplitOpacity() {
-		for (const { element, opacity } of heldSplitOpacity) if (opacity) element.style.opacity = opacity;
-		else element.style.removeProperty("opacity");
-		heldSplitOpacity = [];
-	}
-	function holdSplitOpacity(merged, endpoints) {
-		heldSplitOpacity = [merged, ...endpoints].map((element) => ({
-			element,
-			opacity: element.style.opacity
-		}));
-		merged.style.opacity = "1";
-		for (const endpoint of endpoints) endpoint.style.opacity = "0";
-	}
-	function cancelAnimations() {
-		for (const animation of animations) animation.cancel();
-		animations.clear();
-	}
-	function animate(element, keyframes, options, onComplete) {
-		let animation;
-		try {
-			animation = element.animate(keyframes, options);
-		} catch {
-			try {
-				animation = element.animate(keyframes, {
-					duration: DEFAULT_TRANSITION_DURATION,
-					easing: DEFAULT_TRANSITION_EASING
-				});
-			} catch {
-				onComplete?.();
-				return;
-			}
-		}
-		animations.add(animation);
-		let completed = false;
-		const removeAnimation = () => {
-			if (completed) return;
-			completed = true;
-			animations.delete(animation);
-			onComplete?.();
-		};
-		animation.addEventListener("cancel", removeAnimation, { once: true });
-		animation.addEventListener("finish", removeAnimation, { once: true });
-	}
-	watch(tooltipsOverlapping, async (overlapping) => {
-		const el = root.value;
-		if (!el) return;
-		const lower = getTooltip(el, "lower");
-		const upper = getTooltip(el, "upper");
-		const merged = getTooltip(el, "merged");
-		const carrier = getTooltip(el, inferredCarrier ?? getCarrierKind(el));
-		inferredCarrier = void 0;
-		if (!lower || !upper || !merged || !carrier) return;
-		const snapshots = /* @__PURE__ */ new Map();
-		for (const tooltip of [
-			lower,
-			upper,
-			merged
-		]) {
-			const snapshot = getTooltipSnapshot(tooltip);
-			if (snapshot) snapshots.set(tooltip, snapshot);
-		}
-		const carrierSnapshot = snapshots.get(carrier);
-		const mergedSnapshot = snapshots.get(merged);
-		const currentTransitionId = ++transitionId;
-		await nextTick();
-		if (currentTransitionId !== transitionId || root.value !== el) return;
-		cancelAnimations();
-		clearFrozenMergedPosition();
-		clearHeldSplitOpacity();
-		if (typeof merged.animate !== "function" || prefersReducedMotion(el)) return;
-		const { duration, easing } = getTransitionOptions(el);
-		if (duration <= 0) return;
-		if (!overlapping) {
-			freezeMergedPosition(merged);
-			holdSplitOpacity(merged, [lower, upper]);
-		}
-		const mergedBaseCenter = getTooltipCenter(merged);
-		const carrierCenter = getTooltipCenter(carrier);
-		if (!mergedBaseCenter || !carrierCenter) {
-			clearFrozenMergedPosition();
-			clearHeldSplitOpacity();
-			return;
-		}
-		const options = {
-			duration,
-			easing
-		};
-		const releaseFrozenPosition = overlapping ? void 0 : () => {
-			if (currentTransitionId !== transitionId) return;
-			clearFrozenMergedPosition();
-			clearHeldSplitOpacity();
-		};
-		const mergedStartCenter = mergedSnapshot && mergedSnapshot.opacity > 0 ? mergedSnapshot.center : carrierSnapshot?.center ?? carrierCenter;
-		const mergedEndCenter = overlapping ? mergedBaseCenter : carrierCenter;
-		animate(merged, [{ transform: getTranslate(mergedStartCenter, mergedBaseCenter) }, { transform: getTranslate(mergedEndCenter, mergedBaseCenter) }], options, releaseFrozenPosition);
-	}, { flush: "pre" });
-	onBeforeUnmount(() => {
-		transitionId += 1;
-		cancelAnimations();
-		clearFrozenMergedPosition();
-		clearHeldSplitOpacity();
-	});
-}
-//#endregion
 //#region src/components/slider/range-slider.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<span data-v-3fdd312a class=rp-range-slider__label>");
-var t1 = template("<span data-v-3fdd312a class=rp-range-slider__value aria-hidden=true>");
-var t2 = template("<span data-v-3fdd312a class=rp-range-slider__header>");
-var t3 = template("<span data-v-3fdd312a class=rp-range-slider__mark-label> ");
-var t4 = template("<span data-v-3fdd312a><span data-v-3fdd312a class=rp-range-slider__mark-dot></span>");
-var t5 = template("<span data-v-3fdd312a class=rp-range-slider__marks aria-hidden=true>");
-var t6 = template("<span data-v-3fdd312a class=rp-range-slider__tooltip-anchor>", 2);
-var t7 = template("<div data-v-3fdd312a role=group><span data-v-3fdd312a class=rp-range-slider__track><span data-v-3fdd312a class=rp-range-slider__bar aria-hidden=true></span><input data-v-3fdd312a class=\"rp-range-slider__native rp-range-slider__native--lower\"type=range><input data-v-3fdd312a class=\"rp-range-slider__native rp-range-slider__native--upper\"type=range><!><span data-v-3fdd312a class=rp-range-slider__thumbs aria-hidden=true><span data-v-3fdd312a class=\"rp-range-slider__thumb rp-range-slider__thumb--lower\"data-range-slider-thumb=lower><span data-v-3fdd312a class=rp-range-slider__thumb-content></span></span><span data-v-3fdd312a class=\"rp-range-slider__thumb rp-range-slider__thumb--upper\"data-range-slider-thumb=upper><span data-v-3fdd312a class=rp-range-slider__thumb-content>", 1);
-delegateEvents("input", "keydown", "pointerdown");
+var t0 = template("<span data-v-c82ae6e8>");
+var t1 = template("<span data-v-c82ae6e8 class=rp-range-slider__header>");
+var t2 = template("<input data-v-c82ae6e8>");
+var t3 = template("<span data-v-c82ae6e8> ");
+var t4 = template("<span data-v-c82ae6e8><span data-v-c82ae6e8 class=rp-range-slider__mark-dot></span>");
+var t5 = template("<span data-v-c82ae6e8 class=rp-range-slider__marks aria-hidden=true>");
+var t6 = template("<span data-v-c82ae6e8><span data-v-c82ae6e8 class=rp-range-slider__thumb-content>");
+var t7 = template("<div data-v-c82ae6e8><span data-v-c82ae6e8><span data-v-c82ae6e8></span><!><span data-v-c82ae6e8 class=rp-range-slider__thumbs aria-hidden=true>", 1);
+delegateEvents("pointerdown");
 //#endregion
 //#region src/components/slider/range-slider.vue
 var range_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
 	name: "RpRangeSlider",
+	inheritAttrs: false,
 	__name: "range-slider",
 	props: {
 		modelValue: {},
@@ -1218,6 +1400,7 @@ var range_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		name: {},
 		ariaLabel: { default: () => ["Minimum", "Maximum"] },
 		ariaValueText: {},
+		inputAttrs: {},
 		id: {},
 		min: { default: 0 },
 		max: { default: 100 },
@@ -1240,77 +1423,108 @@ var range_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			type: Boolean,
 			default: void 0
 		},
-		required: {
-			type: Boolean,
-			default: void 0
-		},
-		invalid: {
-			type: Boolean,
-			default: void 0
-		},
-		valid: {
-			type: Boolean,
-			default: void 0
-		},
 		describedby: {},
-		labelledby: {}
+		labelledby: {},
+		classNames: {},
+		styles: {}
 	},
 	emits: ["update:modelValue"],
-	setup(__props, { emit: __emit, slots: $slots }) {
+	setup(__props, { expose: __expose, emit: __emit, slots: $slots }) {
 		const props = __props;
 		const emit = __emit;
 		const slots = useSlots();
 		const generatedId = useId();
-		const rangeSliderRef = ref(null);
+		const tooltipsOverlapping = ref(false);
+		const rangeSliderThumbs = ["lower", "upper"];
+		const lowerInputRef = ref(null);
+		const upperInputRef = ref(null);
 		const labelId = computed(() => `${props.id ?? generatedId}-label`);
-		const { control, nativeMin, nativeMax, nativeStep, nativeNames, nativeIds, rootClass, normalizedValue, valuePercent, formattedValue, ariaLabels, ariaValueText, markItems, trackStyle, activeThumb, tooltipVisible, tooltipOpen, tooltipPlacement, tooltipIds, mergedTooltipId, tooltipColor, tooltipOffset, tooltipOpenDelay, tooltipArrow, tooltipContent, mergedTooltipContent, onInput, onTrackPointerDown, onTooltipFocus, onTooltipBlur, onTooltipTrackMouseEnter, onTooltipTrackMouseLeave, onTooltipKeydown } = useRangeSlider(props, (value) => {
+		const { control, nativeMin, nativeMax, nativeStep, nativeNames, nativeIds, rootClass, normalizedValue, valuePercent, formattedValue, ariaLabels, ariaValueText, markItems, trackStyle, activeThumb, tooltipVisible, tooltipOpen, tooltipPlacement, tooltipIds, mergedTooltipId, tooltipColor, tooltipOffset, tooltipArrow, tooltipContent, mergedTooltipContent, onInput, onTrackPointerDown, onTooltipFocus, onTooltipBlur, onTooltipTrackMouseEnter, onTooltipTrackMouseLeave, onTooltipKeydown } = useRangeSlider(props, (value) => {
 			emit("update:modelValue", value);
 		});
-		const { tooltipsOverlapping } = useRangeSliderTooltipCollision(rangeSliderRef);
-		useRangeSliderTooltipTransition(rangeSliderRef, tooltipsOverlapping, normalizedValue, activeThumb);
+		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
+		const rootAttrs = computed(() => getRootAttrs({
+			class: [rootClass.value, {
+				"rp-range-slider--custom-thumb": Boolean(slots.thumb),
+				"rp-range-slider--tooltips-overlapping": tooltipsOverlapping.value
+			}],
+			style: trackStyle.value,
+			role: "group",
+			"data-active-thumb": activeThumb.value || void 0,
+			"data-disabled": presence(control.disabled),
+			"data-orientation": props.orientation,
+			"aria-labelledby": groupLabelledby.value,
+			"aria-describedby": control.ariaDescribedby
+		}));
+		const inputAttrsByThumb = computed(() => {
+			if (Array.isArray(props.inputAttrs)) return props.inputAttrs;
+			return [props.inputAttrs, props.inputAttrs];
+		});
+		const nativeInputAttrs = computed(() => rangeSliderThumbs.map((thumb, index) => {
+			const { class: compatibilityClass, style: compatibilityStyle, onInput: compatibilityOnInput, onFocus: compatibilityOnFocus, onBlur: compatibilityOnBlur, onKeydown: compatibilityOnKeydown, ...attrs } = inputAttrsByThumb.value[index] ?? {};
+			return Object.assign({}, attrs, {
+				...getPartAttrs("input", {
+					class: ["rp-range-slider__native", `rp-range-slider__native--${thumb}`],
+					compatibilityClass,
+					compatibilityStyle
+				}),
+				onInput(event) {
+					onInput(thumb, event);
+					compatibilityOnInput?.(event);
+				},
+				onFocus(event) {
+					onTooltipFocus(thumb);
+					compatibilityOnFocus?.(event);
+				},
+				onBlur(event) {
+					onTooltipBlur(thumb);
+					compatibilityOnBlur?.(event);
+				},
+				onKeydown(event) {
+					onTooltipKeydown(thumb, event);
+					compatibilityOnKeydown?.(event);
+				}
+			});
+		}));
+		const nativeElements = computed(() => [lowerInputRef.value, upperInputRef.value]);
+		function setInputRef(index, element) {
+			const input = element instanceof HTMLInputElement ? element : null;
+			if (index === 0) lowerInputRef.value = input;
+			else upperInputRef.value = input;
+		}
+		function focus(options) {
+			lowerInputRef.value?.focus(options);
+		}
 		const groupLabelledby = computed(() => {
 			const values = [control.ariaLabelledby, slots.default ? labelId.value : void 0].flatMap((value) => value?.split(/\s+/) ?? []).filter(Boolean);
 			return values.length ? Array.from(new Set(values)).join(" ") : void 0;
 		});
-		const _setTemplateRef = createTemplateRefSetter();
-		const n43 = t7();
-		const n42 = child(n43, 1);
-		const n11 = next(child(n42), 1);
-		const n12 = next(n11, 2);
-		const n41 = next(n12, 3);
-		const n40 = next(n41, 4);
-		const n28 = child(n40);
-		const n23 = child(n28);
-		const n35 = next(n28, 1);
-		const n30 = child(n35);
-		renderEffect(() => {
-			const _control = unref(control);
-			setClass(n43, [unref(rootClass), {
-				"rp-range-slider--custom-thumb": $slots.thumb,
-				"rp-range-slider--tooltips-overlapping": unref(tooltipsOverlapping)
-			}]);
-			setAttr(n43, "data-active-thumb", unref(activeThumb));
-			setAttr(n43, "data-disabled", _control.disabled || void 0);
-			setStyle(n43, unref(trackStyle));
-			setAttr(n43, "aria-labelledby", groupLabelledby.value);
-			setAttr(n43, "aria-describedby", _control.ariaDescribedby);
-			setAttr(n43, "aria-invalid", _control.invalid || void 0);
-			setAttr(n43, "aria-required", _control.required || void 0);
+		__expose({
+			nativeElements,
+			focus
 		});
-		setInsertionState(n43, 0, 0);
+		const _setTemplateRef = createTemplateRefSetter();
+		const n35 = t7();
+		const n34 = child(n35, 1);
+		const n11 = child(n34);
+		const n33 = next(n11, 1);
+		const n32 = next(n33, 3);
+		renderEffect(() => setDynamicProps(n35, [rootAttrs.value]));
+		setInsertionState(n35, 0, 0);
 		createIf(() => $slots.default || $slots.value, () => {
-			const n10 = t2();
+			const n10 = t1();
 			setInsertionState(n10, null, 0);
 			createIf(() => $slots.default, () => {
 				const n5 = t0();
-				renderEffect(() => setProp(n5, "id", labelId.value));
+				renderEffect(() => setDynamicProps(n5, [{ id: labelId.value }, unref(getPartAttrs)("label", { class: "rp-range-slider__label" })]));
 				setInsertionState(n5, null, 0);
 				createSlot("default", null, null, 1);
 				return n5;
 			});
 			setInsertionState(n10, null, 1);
 			createIf(() => $slots.value, () => {
-				const n9 = t1();
+				const n9 = t0();
+				renderEffect(() => setDynamicProps(n9, [unref(getPartAttrs)("value", { class: "rp-range-slider__value" }), { "aria-hidden": "true" }]));
 				setInsertionState(n9, null, 0);
 				createSlot("value", {
 					value: () => unref(normalizedValue),
@@ -1321,157 +1535,138 @@ var range_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			});
 			return n10;
 		});
-		n11.$evtinput = createInvoker(($event) => unref(onInput)("lower", $event));
-		on(n11, "focus", () => unref(onTooltipFocus)("lower"));
-		on(n11, "blur", () => unref(onTooltipBlur)("lower"));
-		n11.$evtkeydown = createInvoker(($event) => unref(onTooltipKeydown)("lower", $event));
-		n12.$evtinput = createInvoker(($event) => unref(onInput)("upper", $event));
-		on(n12, "focus", () => unref(onTooltipFocus)("upper"));
-		on(n12, "blur", () => unref(onTooltipBlur)("upper"));
-		n12.$evtkeydown = createInvoker(($event) => unref(onTooltipKeydown)("upper", $event));
 		renderEffect(() => {
-			const _nativeIds = unref(nativeIds);
-			const _nativeNames = unref(nativeNames);
-			const _normalizedValue = unref(normalizedValue);
-			const _nativeMin = unref(nativeMin);
-			const _nativeMax = unref(nativeMax);
-			const _nativeStep = unref(nativeStep);
-			const _control = unref(control);
-			const _ariaLabels = unref(ariaLabels);
-			const _ariaValueText = unref(ariaValueText);
-			const _control_disabled = _control.disabled;
-			const _control_required = _control.required;
-			const _control_ariaDescribedby = _control.ariaDescribedby;
-			const _control_invalid = _control.invalid;
-			setProp(n11, "id", _nativeIds[0]);
-			setProp(n11, "name", _nativeNames[0]);
-			setValue(n11, _normalizedValue[0]);
-			setProp(n11, "min", _nativeMin[0]);
-			setProp(n11, "max", _nativeMax[0]);
-			setProp(n11, "step", _nativeStep);
-			setProp(n11, "orient", __props.orientation === "vertical" ? "vertical" : void 0);
-			setProp(n11, "disabled", _control_disabled || void 0);
-			setProp(n11, "required", _control_required || void 0);
-			setAttr(n11, "aria-label", _ariaLabels[0]);
-			setAttr(n11, "aria-describedby", _control_ariaDescribedby);
-			setAttr(n11, "aria-orientation", __props.orientation === "vertical" ? "vertical" : void 0);
-			setAttr(n11, "aria-invalid", _control_invalid || void 0);
-			setAttr(n11, "aria-required", _control_required || void 0);
-			setAttr(n11, "aria-valuetext", _ariaValueText[0]);
-			setProp(n12, "id", _nativeIds[1]);
-			setProp(n12, "name", _nativeNames[1]);
-			setValue(n12, _normalizedValue[1]);
-			setProp(n12, "min", _nativeMin[1]);
-			setProp(n12, "max", _nativeMax[1]);
-			setProp(n12, "step", _nativeStep);
-			setProp(n12, "orient", __props.orientation === "vertical" ? "vertical" : void 0);
-			setProp(n12, "disabled", _control_disabled || void 0);
-			setProp(n12, "required", _control_required || void 0);
-			setAttr(n12, "aria-label", _ariaLabels[1]);
-			setAttr(n12, "aria-describedby", _control_ariaDescribedby);
-			setAttr(n12, "aria-orientation", __props.orientation === "vertical" ? "vertical" : void 0);
-			setAttr(n12, "aria-invalid", _control_invalid || void 0);
-			setAttr(n12, "aria-required", _control_required || void 0);
-			setAttr(n12, "aria-valuetext", _ariaValueText[1]);
+			const _getPartAttrs = unref(getPartAttrs);
+			setDynamicProps(n34, [_getPartAttrs("track", { class: "rp-range-slider__track" })]);
+			setDynamicProps(n11, [_getPartAttrs("range", { class: "rp-range-slider__bar" }), { "aria-hidden": "true" }]);
 		});
-		setInsertionState(n42, n41, 3);
+		setInsertionState(n34, n33, 1);
+		createFor(() => rangeSliderThumbs, (_for_item0, _for_key0) => {
+			const n14 = t2();
+			renderEffect(() => {
+				const _index = _for_key0.value;
+				const _control = unref(control);
+				setDynamicProps(n14, [nativeInputAttrs.value[_index], {
+					id: unref(nativeIds)[_index],
+					name: unref(nativeNames)[_index],
+					type: "range",
+					value: unref(normalizedValue)[_index],
+					min: unref(nativeMin)[_index],
+					max: unref(nativeMax)[_index],
+					step: unref(nativeStep),
+					orient: __props.orientation === "vertical" ? "vertical" : void 0,
+					disabled: _control.disabled || void 0,
+					"aria-label": unref(ariaLabels)[_index],
+					"aria-describedby": _control.ariaDescribedby,
+					"aria-orientation": __props.orientation === "vertical" ? "vertical" : void 0,
+					"aria-valuetext": unref(ariaValueText)[_index],
+					"data-thumb": _for_item0.value,
+					"data-disabled": unref(presence)(_control.disabled)
+				}]);
+				_setTemplateRef(n14, (element) => setInputRef(_index, element), true);
+			});
+			return n14;
+		}, (thumb, index) => thumb, 8);
+		setInsertionState(n34, n33, 2);
 		createIf(() => unref(markItems).length, () => {
-			const n21 = t5();
-			setInsertionState(n21, null, 0);
+			const n23 = t5();
+			setInsertionState(n23, null, 0);
 			createFor(() => unref(markItems), (_for_item0) => {
-				const n20 = t4();
+				const n22 = t4();
 				renderEffect(() => {
 					const _mark = _for_item0.value;
-					setClassName(n20, _mark.filled ? 1 : 0, " rp-range-slider__mark--filled", "rp-range-slider__mark");
-					setStyle(n20, _mark.style);
+					setDynamicProps(n22, [unref(getPartAttrs)("mark", {
+						class: ["rp-range-slider__mark", { "rp-range-slider__mark--filled": _mark.filled }],
+						style: _mark.style
+					}), { "data-filled": unref(presence)(_mark.filled) }]);
 				});
-				setInsertionState(n20, null, 1);
+				setInsertionState(n22, null, 1);
 				createIf(() => _for_item0.value.hasLabel, () => {
-					const n19 = t3();
-					const x19 = txt(n19);
-					renderEffect(() => setText(x19, toDisplayString(_for_item0.value.label)));
-					return n19;
+					const n21 = t3();
+					const x21 = txt(n21);
+					renderEffect(() => {
+						setDynamicProps(n21, [unref(getPartAttrs)("markLabel", { class: "rp-range-slider__mark-label" })]);
+						setText(x21, toDisplayString(_for_item0.value.label));
+					});
+					return n21;
 				});
-				return n20;
+				return n22;
 			}, (mark) => mark.key, 9);
-			return n21;
+			return n23;
 		});
-		setInsertionState(n23, null, 0);
-		createSlot("thumb", {
-			thumb: "lower",
-			index: "0",
-			value: () => unref(normalizedValue)[0],
-			formattedValue: () => unref(formattedValue)[0],
-			percent: () => unref(valuePercent)[0]
-		}, null, 1);
-		setInsertionState(n28, null, 1);
-		createIf(() => unref(tooltipVisible), () => {
-			return createComponent(tooltip_default, {
-				id: () => unref(tooltipIds)[0],
-				class: "rp-range-slider__tooltip rp-range-slider__tooltip--lower",
-				content: () => unref(tooltipContent)[0],
-				placement: () => unref(tooltipPlacement),
-				color: () => unref(tooltipColor),
-				offset: () => unref(tooltipOffset),
-				open: () => unref(tooltipOpen),
-				"open-delay": () => unref(tooltipOpenDelay),
-				arrow: () => unref(tooltipArrow),
-				decorative: ""
-			}, () => {
-				return t6();
+		setInsertionState(n32, null, 0);
+		createFor(() => rangeSliderThumbs, (_for_item0, _for_key0) => {
+			const n28 = t6();
+			const n27 = child(n28);
+			renderEffect(() => {
+				const _thumb = _for_item0.value;
+				setDynamicProps(n28, [unref(getPartAttrs)("thumb", { class: ["rp-range-slider__thumb", `rp-range-slider__thumb--${_thumb}`] }), {
+					"data-range-slider-thumb": _thumb,
+					"data-thumb": _thumb
+				}]);
 			});
-		});
-		setInsertionState(n30, null, 0);
-		createSlot("thumb", {
-			thumb: "upper",
-			index: "1",
-			value: () => unref(normalizedValue)[1],
-			formattedValue: () => unref(formattedValue)[1],
-			percent: () => unref(valuePercent)[1]
-		}, null, 1);
-		setInsertionState(n35, null, 1);
+			setInsertionState(n27, null, 0);
+			createSlot("thumb", {
+				thumb: () => _for_item0.value,
+				index: () => _for_key0.value,
+				value: () => unref(normalizedValue)[_for_key0.value],
+				formattedValue: () => unref(formattedValue)[_for_key0.value],
+				percent: () => unref(valuePercent)[_for_key0.value]
+			}, null, 1);
+			return n28;
+		}, (thumb, index) => thumb, 8);
+		setInsertionState(n32, null, 1);
 		createIf(() => unref(tooltipVisible), () => {
-			return createComponent(tooltip_default, {
-				id: () => unref(tooltipIds)[1],
-				class: "rp-range-slider__tooltip rp-range-slider__tooltip--upper",
-				content: () => unref(tooltipContent)[1],
-				placement: () => unref(tooltipPlacement),
-				color: () => unref(tooltipColor),
-				offset: () => unref(tooltipOffset),
-				open: () => unref(tooltipOpen),
-				"open-delay": () => unref(tooltipOpenDelay),
+			const _on_update_overlapping = ($event) => tooltipsOverlapping.value = $event;
+			return createComponent(range_slider_tooltip_default, {
 				arrow: () => unref(tooltipArrow),
-				decorative: ""
-			}, () => {
-				return t6();
-			});
-		});
-		setInsertionState(n40, null, 2);
-		createIf(() => unref(tooltipVisible), () => {
-			return createComponent(tooltip_default, {
-				id: () => unref(mergedTooltipId),
-				class: "rp-range-slider__tooltip rp-range-slider__tooltip--merged",
-				content: () => unref(mergedTooltipContent),
-				placement: () => unref(tooltipPlacement),
 				color: () => unref(tooltipColor),
+				content: () => unref(tooltipContent),
+				ids: () => unref(tooltipIds),
+				"merged-content": () => unref(mergedTooltipContent),
+				"merged-id": () => unref(mergedTooltipId),
 				offset: () => unref(tooltipOffset),
 				open: () => unref(tooltipOpen),
-				"open-delay": () => unref(tooltipOpenDelay),
-				arrow: () => unref(tooltipArrow),
-				decorative: ""
-			}, () => {
-				return t6();
+				orientation: () => __props.orientation,
+				placement: () => unref(tooltipPlacement),
+				"value-percent": () => unref(valuePercent),
+				"tooltip-class": () => __props.classNames?.tooltip,
+				"tooltip-style": () => __props.styles?.tooltip,
+				"onUpdate:overlapping": () => _on_update_overlapping
 			});
 		});
-		n42.$evtpointerdown = createInvoker((e) => unref(onTrackPointerDown)(e));
-		on(n42, "mouseenter", (e) => unref(onTooltipTrackMouseEnter)(e));
-		on(n42, "mouseleave", (e) => unref(onTooltipTrackMouseLeave)(e));
-		_setTemplateRef(n43, rangeSliderRef, null, "rangeSliderRef");
-		return n43;
+		n34.$evtpointerdown = createInvoker((e) => unref(onTrackPointerDown)(e));
+		on(n34, "mouseenter", (e) => unref(onTooltipTrackMouseEnter)(e));
+		on(n34, "mouseleave", (e) => unref(onTooltipTrackMouseLeave)(e));
+		return n35;
 	}
-}), [["__scopeId", "data-v-3fdd312a"]]);
+}), [["__scopeId", "data-v-c82ae6e8"]]);
 //#endregion
 //#region src/components/slider/types.ts
+var sliderParts = [
+	"root",
+	"label",
+	"value",
+	"track",
+	"range",
+	"input",
+	"thumb",
+	"mark",
+	"markLabel",
+	"tooltip"
+];
+var rangeSliderParts = [
+	"root",
+	"label",
+	"value",
+	"track",
+	"range",
+	"input",
+	"thumb",
+	"mark",
+	"markLabel",
+	"tooltip"
+];
 var sliderColors = componentColors;
 var sliderSizes = [
 	"xs",
@@ -1482,4 +1677,4 @@ var sliderSizes = [
 ];
 var sliderOrientations = ["horizontal", "vertical"];
 //#endregion
-export { slider_default as a, range_slider_default as i, sliderOrientations as n, sliderSizes as r, sliderColors as t };
+export { sliderSizes as a, sliderParts as i, sliderColors as n, range_slider_default as o, sliderOrientations as r, slider_default as s, rangeSliderParts as t };