ropav 0.0.8 → 0.0.10

package/dist/slider.js

@@ -1,46 +1,11 @@
 import './slider.css';
 import { t as bem } from "./bem.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, defineVaporComponent, delegateEvents, next, on, renderEffect, setAttr, setClass, setClassName, setInsertionState, setProp, setStyle, setText, setValue, template, toDisplayString, txt, unref } from "vue";
-//#region src/components/slider/types.ts
-var sliderColors = [
-	"primary",
-	"secondary",
-	"success",
-	"warning",
-	"danger",
-	"info",
-	"neutral"
-];
-var sliderSizes = [
-	"xs",
-	"sm",
-	"md",
-	"lg",
-	"xl"
-];
-var sliderOrientations = ["horizontal", "vertical"];
-//#endregion
-//#region src/components/slider/useSlider.ts
-var sliderColorNames = new Set(sliderColors);
-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, setAttr, setClass, setClassName, setInsertionState, setProp, setStyle, setText, setValue, 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;
@@ -55,37 +20,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) {
-	if (!color) return void 0;
-	return sliderColorNames.has(color) ? `var(--rp-color-${color})` : color;
+function setSliderStyleValue(style, property, value) {
+	if (value) style[property] = value;
 }
-function isSliderPresetColor(color) {
-	return Boolean(color && sliderColorNames.has(color));
+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 getSliderCustomColorValue(color) {
-	if (!color || isSliderPresetColor(color)) return void 0;
-	return color;
+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 setSliderStyleValue(style, property, value) {
-	if (value) style[property] = value;
+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 getSliderMarkStyle(percent, color) {
-	const style = { "--_rp-slider-mark-position": `${percent}%` };
-	const colorValue = getSliderMarkColorValue(color);
-	for (const property of sliderMarkColorProperties) setSliderStyleValue(style, property, colorValue);
+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 normalizeSliderMark(mark) {
-	return typeof mark === "number" ? { value: mark } : mark;
-}
-function normalizeSliderMarks(marks, min, max, valuePercent) {
+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 [];
@@ -95,47 +71,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-custom-color", getSliderCustomColorValue(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;
 }
@@ -152,6 +92,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));
@@ -160,7 +119,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);
@@ -168,6 +135,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");
@@ -179,15 +152,12 @@ function useSlider(props, emitUpdate) {
 	const tooltipArrow = computed(() => tooltipOptions.value.arrow ?? false);
 	const tooltipContent = computed(() => String(formattedValue.value));
 	const rootClass = computed(() => bem("rp-slider", {
-		[`color-${props.color}`]: isSliderPresetColor(props.color),
 		[`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
 	}));
 	const trackStyle = computed(() => getSliderTrackStyle(props, valuePercent.value));
 	function onInput(e) {
@@ -195,15 +165,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),
@@ -226,23 +245,26 @@ 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 = template("<span data-v-c9655b1d class=rp-slider__label>");
-var t1 = template("<span data-v-c9655b1d class=rp-slider__value aria-hidden=true>");
-var t2 = template("<span data-v-c9655b1d class=rp-slider__header>");
-var t3 = template("<span data-v-c9655b1d class=rp-slider__mark-label> ");
-var t4 = template("<span data-v-c9655b1d><span data-v-c9655b1d class=rp-slider__mark-dot></span>");
-var t5 = template("<span data-v-c9655b1d class=rp-slider__marks aria-hidden=true>");
-var t6 = template("<span data-v-c9655b1d class=rp-slider__thumb aria-hidden=true><span data-v-c9655b1d class=rp-slider__thumb-content>");
-var t7 = 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-b852f835 class=rp-slider__label>");
+var t1$2 = template("<span data-v-b852f835 class=rp-slider__value aria-hidden=true>");
+var t2$2 = template("<span data-v-b852f835 class=rp-slider__header>");
+var t3$2 = template("<span data-v-b852f835 class=rp-slider__mark-label> ");
+var t4$2 = template("<span data-v-b852f835><span data-v-b852f835 class=rp-slider__mark-dot></span>");
+var t5$1 = template("<span data-v-b852f835 class=rp-slider__marks aria-hidden=true>");
+var t6$1 = template("<span data-v-b852f835 class=rp-slider__thumb aria-hidden=true><span data-v-b852f835 class=rp-slider__thumb-content>");
+var t7$1 = template("<span data-v-b852f835 class=rp-slider__tooltip-anchor aria-hidden=true>", 2);
+var t8$1 = template("<label data-v-b852f835><span data-v-b852f835 class=rp-slider__track><span data-v-b852f835 class=rp-slider__bar aria-hidden=true></span><input data-v-b852f835 class=rp-slider__native type=range>", 1);
+delegateEvents("input", "pointerdown", "focusin", "focusout", "keydown");
 //#endregion
 //#region src/components/slider/slider.vue
 var slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -273,18 +295,6 @@ 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: {},
@@ -294,10 +304,10 @@ var slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 	setup(__props, { 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 { 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 n31 = t8$1();
 		const n30 = child(n31, 1);
 		const n11 = next(child(n30), 1);
 		renderEffect(() => {
@@ -307,17 +317,17 @@ var slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		});
 		setInsertionState(n31, 0, 0);
 		createIf(() => $slots.default || $slots.value, () => {
-			const n10 = t2();
+			const n10 = t2$2();
 			setInsertionState(n10, null, 0);
 			createIf(() => $slots.default, () => {
-				const n5 = t0();
+				const n5 = t0$2();
 				setInsertionState(n5, null, 0);
 				createSlot("default", null, null, 1);
 				return n5;
 			});
 			setInsertionState(n10, null, 1);
 			createIf(() => $slots.value, () => {
-				const n9 = t1();
+				const n9 = t1$2();
 				setInsertionState(n9, null, 0);
 				createSlot("value", {
 					value: () => unref(normalizedValue),
@@ -331,7 +341,6 @@ var slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		n11.$evtinput = createInvoker((e) => unref(onInput)(e));
 		renderEffect(() => {
 			const _control = unref(control);
-			const _control_required = _control.required;
 			setProp(n11, "id", _control.id);
 			setProp(n11, "name", __props.name);
 			setValue(n11, unref(normalizedValue));
@@ -340,21 +349,18 @@ var slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			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));
 		});
 		setInsertionState(n30, null, 2);
 		createIf(() => unref(markItems).length, () => {
-			const n20 = t5();
+			const n20 = t5$1();
 			setInsertionState(n20, null, 0);
 			createFor(() => unref(markItems), (_for_item0) => {
-				const n19 = t4();
+				const n19 = t4$2();
 				renderEffect(() => {
 					const _mark = _for_item0.value;
 					setClassName(n19, _mark.filled ? 1 : 0, " rp-slider__mark--filled", "rp-slider__mark");
@@ -362,7 +368,7 @@ var slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 				});
 				setInsertionState(n19, null, 1);
 				createIf(() => _for_item0.value.hasLabel, () => {
-					const n18 = t3();
+					const n18 = t3$2();
 					const x18 = txt(n18);
 					renderEffect(() => setText(x18, toDisplayString(_for_item0.value.label)));
 					return n18;
@@ -373,7 +379,7 @@ var slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		});
 		setInsertionState(n30, null, 3);
 		createIf(() => $slots.thumb, () => {
-			const n25 = t6();
+			const n25 = t6$1();
 			setInsertionState(child(n25), null, 0);
 			createSlot("thumb", {
 				value: () => unref(normalizedValue),
@@ -396,16 +402,1112 @@ var slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 				arrow: () => unref(tooltipArrow),
 				decorative: ""
 			}, () => {
-				return t7();
+				return t7$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.$evtpointerdown = createInvoker((e) => unref(onTooltipPointerDown)(e));
+		on(n30, "mouseenter", (e) => unref(onTooltipMouseEnter)(e));
+		on(n30, "mouseleave", (e) => unref(onTooltipMouseLeave)(e));
+		n30.$evtfocusin = createInvoker((e) => unref(onTooltipFocusIn)(e));
+		n30.$evtfocusout = createInvoker((e) => unref(onTooltipFocusOut)(e));
 		n30.$evtkeydown = createInvoker((e) => unref(onTooltipKeydown)(e));
 		return n31;
 	}
-}), [["__scopeId", "data-v-c9655b1d"]]);
+}), [["__scopeId", "data-v-b852f835"]]);
+//#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-d17966e5 class=rp-range-slider__tooltip-merged-value> </span>");
+var t1$1 = template("<span data-v-d17966e5 class=rp-range-slider__tooltip-merged-value> ");
+var t2$1 = template("<span data-v-d17966e5 class=rp-range-slider__tooltip-merged-separator>–</span>", 2);
+var t3$1 = template(" ");
+var t4$1 = template("<span data-v-d17966e5 aria-hidden=true><span data-v-d17966e5><span data-v-d17966e5 class=rp-range-slider__tooltip-anchor></span><span data-v-d17966e5 class=rp-tooltip__content aria-hidden=true> </span></span><span data-v-d17966e5><span data-v-d17966e5 class=rp-range-slider__tooltip-anchor></span><span data-v-d17966e5 class=rp-tooltip__content aria-hidden=true> </span></span><span data-v-d17966e5><span data-v-d17966e5 class=rp-range-slider__tooltip-anchor></span><span data-v-d17966e5 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: {}
+	},
+	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 _tooltipRootClass = tooltipRootClass.value;
+			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,
+				"rp-range-slider__tooltip",
+				"rp-range-slider__tooltip--lower"
+			]);
+			setProp(n0, "id", _resolvedIds[0]);
+			setStyle(n0, _contentStyle);
+			setText(x0, toDisplayString(_content[0]));
+			setClass(n3, [
+				_tooltipRootClass,
+				"rp-range-slider__tooltip",
+				"rp-range-slider__tooltip--upper"
+			]);
+			setProp(n2, "id", _resolvedIds[1]);
+			setStyle(n2, _contentStyle);
+			setText(x2, toDisplayString(_content[1]));
+			setClass(n15, [
+				_tooltipRootClass,
+				"rp-range-slider__tooltip",
+				"rp-range-slider__tooltip--merged"
+			]);
+			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-d17966e5"]]);
+//#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
+function roundSliderNumber(value) {
+	return Number(value.toFixed(10));
+}
+function clamp(value, min, max) {
+	return Math.min(max, Math.max(min, value));
+}
+function getStepValueAtOrAbove(value, min, step) {
+	if (step === "any") return value;
+	return roundSliderNumber(min + Math.ceil((value - min) / step - 1e-10) * step);
+}
+function getStepValueAtOrBelow(value, min, step) {
+	if (step === "any") return value;
+	return roundSliderNumber(min + Math.floor((value - min) / step + 1e-10) * step);
+}
+function isSliderStepAligned(min, max, step) {
+	const stepCount = (max - min) / step;
+	return Math.abs(stepCount - Math.round(stepCount)) <= 1e-10;
+}
+function normalizeRangeSliderMinRange(minRange, min, max) {
+	const bounds = normalizeSliderBounds(min, max);
+	const domain = bounds.max - bounds.min;
+	return Math.min(domain, Number.isFinite(minRange) && minRange > 0 ? minRange : 0);
+}
+function normalizeRangeSliderValue(value, min, max, step, minRange = 0) {
+	const bounds = normalizeSliderBounds(min, max);
+	const safeStep = normalizeSliderStep(step);
+	const safeMinRange = normalizeRangeSliderMinRange(minRange, bounds.min, bounds.max);
+	const first = normalizeSliderValue(Array.isArray(value) ? Number(value[0]) : NaN, bounds.min, bounds.max, safeStep);
+	const second = normalizeSliderValue(Array.isArray(value) ? Number(value[1]) : NaN, bounds.min, bounds.max, safeStep);
+	const lower = Math.min(first, second);
+	const upper = Math.max(first, second);
+	if (upper - lower >= safeMinRange) return [lower, upper];
+	if (safeMinRange >= bounds.max - bounds.min) return [bounds.min, bounds.max];
+	const expandedUpper = getStepValueAtOrAbove(lower + safeMinRange, bounds.min, safeStep);
+	if (expandedUpper <= bounds.max) return [lower, expandedUpper];
+	const expandedLower = getStepValueAtOrBelow(bounds.max - safeMinRange, bounds.min, safeStep);
+	return [Math.max(bounds.min, expandedLower), bounds.max];
+}
+function getClosestRangeSliderThumb(value, range, activeThumb) {
+	const [lower, upper] = range;
+	if (value < lower) return "lower";
+	if (value > upper) return "upper";
+	const lowerDistance = Math.abs(value - lower);
+	const upperDistance = Math.abs(value - upper);
+	if (lowerDistance < upperDistance) return "lower";
+	if (upperDistance < lowerDistance) return "upper";
+	return activeThumb ?? "upper";
+}
+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-range-slider-thumb-size",
+		border: "--_rp-range-slider-thumb-border-style",
+		padding: "--_rp-range-slider-thumb-padding",
+		borderColor: "--_rp-range-slider-thumb-border"
+	});
+	return style;
+}
+function getFormattedRangeSliderValue(value, formatter) {
+	return [getFormattedSliderValue(value[0], formatter), getFormattedSliderValue(value[1], formatter)];
+}
+function getRangeSliderAriaValueText(value, ariaValueText, formatter) {
+	const endpointValues = Array.isArray(ariaValueText) ? ariaValueText : [ariaValueText, ariaValueText];
+	return [getSliderAriaValueText(value[0], endpointValues[0], formatter), getSliderAriaValueText(value[1], endpointValues[1], formatter)];
+}
+function getThumbIndex(thumb) {
+	return thumb === "lower" ? 0 : 1;
+}
+function getOppositeThumb(thumb) {
+	return thumb === "lower" ? "upper" : "lower";
+}
+function getThumbFromTarget(target) {
+	const thumb = target?.closest?.("[data-range-slider-thumb]")?.getAttribute("data-range-slider-thumb");
+	return thumb === "lower" || thumb === "upper" ? thumb : void 0;
+}
+function getThumbInput(track, thumb) {
+	return track.querySelector(`.rp-range-slider__native--${thumb}, input[data-range-slider-thumb="${thumb}"]`);
+}
+function focusThumb(track, thumb) {
+	getThumbInput(track, thumb)?.focus({ preventScroll: true });
+}
+function useRangeSlider(props, emitUpdate) {
+	const control = useControlState(props);
+	const activeThumb = ref();
+	const bounds = computed(() => normalizeSliderBounds(props.min, props.max));
+	const valueStep = computed(() => normalizeSliderStep(props.step));
+	const nativeStep = computed(() => {
+		const step = valueStep.value;
+		if (step === "any") return step;
+		return isSliderStepAligned(bounds.value.min, bounds.value.max, step) ? step : "any";
+	});
+	const hasManualNativeKeyboard = computed(() => valueStep.value !== "any" && nativeStep.value === "any");
+	const normalizedMinRange = computed(() => normalizeRangeSliderMinRange(props.minRange, bounds.value.min, bounds.value.max));
+	const normalizedValue = computed(() => normalizeRangeSliderValue(props.modelValue, bounds.value.min, bounds.value.max, valueStep.value, normalizedMinRange.value));
+	const valuePercent = computed(() => [getSliderValuePercent(normalizedValue.value[0], bounds.value.min, bounds.value.max), getSliderValuePercent(normalizedValue.value[1], bounds.value.min, bounds.value.max)]);
+	const formattedValue = computed(() => getFormattedRangeSliderValue(normalizedValue.value, props.formatValue));
+	const ariaLabels = computed(() => props.ariaLabel ?? ["Minimum", "Maximum"]);
+	const ariaValueText = computed(() => getRangeSliderAriaValueText(normalizedValue.value, props.ariaValueText, props.formatValue));
+	const nativeNames = computed(() => Array.isArray(props.name) ? props.name : [props.name, props.name]);
+	const nativeIds = computed(() => [control.id, control.id ? `${control.id}-upper` : void 0]);
+	const nativeMin = computed(() => {
+		if (normalizedMinRange.value === 0) return [bounds.value.min, bounds.value.min];
+		return [bounds.value.min, clamp(getStepValueAtOrAbove(normalizedValue.value[0] + normalizedMinRange.value, bounds.value.min, valueStep.value), bounds.value.min, bounds.value.max)];
+	});
+	const nativeMax = computed(() => {
+		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(() => 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(() => getSliderTooltipOptions(props.tooltip));
+	const tooltipMode = computed(() => getSliderTooltipMode(props.tooltip));
+	const tooltipOpenDelay = computed(() => tooltipOptions.value.openDelay ?? 0);
+	const tooltipState = useRangeSliderTooltipState({
+		mode: tooltipMode,
+		openDelay: tooltipOpenDelay,
+		disabled: () => control.disabled,
+		setActiveThumb: (thumb) => {
+			activeThumb.value = thumb;
+		}
+	});
+	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;
+		return baseId ? [`${baseId}-lower`, `${baseId}-upper`] : [void 0, void 0];
+	});
+	const mergedTooltipId = computed(() => {
+		const baseId = tooltipOptions.value.id;
+		return baseId ? `${baseId}-merged` : void 0;
+	});
+	const tooltipColor = computed(() => tooltipOptions.value.color);
+	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(() => {
+		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
+	}));
+	function getThumbUpdate(thumb, value, anchorValue = normalizedValue.value[getThumbIndex(getOppositeThumb(thumb))]) {
+		const safeValue = normalizeSliderValue(value, bounds.value.min, bounds.value.max, valueStep.value);
+		if (normalizedMinRange.value > 0) {
+			const nextValue = [...normalizedValue.value];
+			nextValue[getThumbIndex(thumb)] = thumb === "lower" ? Math.min(safeValue, nativeMax.value[0]) : Math.max(safeValue, nativeMin.value[1]);
+			return {
+				thumb,
+				value: nextValue
+			};
+		}
+		if (safeValue < anchorValue) return {
+			thumb: "lower",
+			value: [safeValue, anchorValue]
+		};
+		if (safeValue > anchorValue) return {
+			thumb: "upper",
+			value: [anchorValue, safeValue]
+		};
+		return {
+			thumb,
+			value: [safeValue, safeValue]
+		};
+	}
+	function updateThumb(thumb, value, anchorValue) {
+		if (control.disabled) return thumb;
+		const update = getThumbUpdate(thumb, value, anchorValue);
+		activeThumb.value = update.thumb;
+		emitUpdate(update.value);
+		return update.thumb;
+	}
+	function onInput(thumb, event) {
+		const input = event.target;
+		transferFocusedThumb(input, thumb, updateThumb(thumb, input.valueAsNumber));
+	}
+	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;
+		tooltipState.transferInteraction(thumb, nextThumb, "focus");
+		nextInput.focus({ preventScroll: true });
+	}
+	function onTooltipKeydown(thumb, event) {
+		if (tooltipState.onKeydown(thumb, event)) return;
+		if (!hasManualNativeKeyboard.value || valueStep.value === "any") return;
+		const index = getThumbIndex(thumb);
+		const currentValue = normalizedValue.value[index];
+		const pageStep = valueStep.value * 10;
+		let nextValue;
+		switch (event.key) {
+			case "ArrowRight":
+			case "ArrowUp":
+				nextValue = currentValue + valueStep.value;
+				break;
+			case "ArrowLeft":
+			case "ArrowDown":
+				nextValue = currentValue - valueStep.value;
+				break;
+			case "PageUp":
+				nextValue = currentValue + pageStep;
+				break;
+			case "PageDown":
+				nextValue = currentValue - pageStep;
+				break;
+			case "Home":
+				nextValue = nativeMin.value[index];
+				break;
+			case "End":
+				nextValue = nativeMax.value[index];
+				break;
+		}
+		if (nextValue == null) return;
+		event.preventDefault();
+		const nextThumb = updateThumb(thumb, nextValue);
+		transferFocusedThumb(event.target, thumb, nextThumb);
+	}
+	function getPointerGeometry(track) {
+		const vertical = props.orientation === "vertical";
+		const thumbsRect = track.querySelector(".rp-range-slider__thumbs")?.getBoundingClientRect();
+		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;
+		return {
+			length,
+			start: vertical ? rect.bottom : rect.left,
+			vertical
+		};
+	}
+	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);
+	}
+	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")
+	});
+	return {
+		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: tooltipState.onFocus,
+		onTooltipBlur: tooltipState.onBlur,
+		onTooltipTrackMouseEnter: tooltipState.onTrackMouseEnter,
+		onTooltipTrackMouseLeave: tooltipState.onTrackMouseLeave,
+		onTooltipKeydown
+	};
+}
+//#endregion
+//#region src/components/slider/range-slider.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<span data-v-8dd81f55 class=rp-range-slider__label>");
+var t1 = template("<span data-v-8dd81f55 class=rp-range-slider__value aria-hidden=true>");
+var t2 = template("<span data-v-8dd81f55 class=rp-range-slider__header>");
+var t3 = template("<input data-v-8dd81f55 type=range>");
+var t4 = template("<span data-v-8dd81f55 class=rp-range-slider__mark-label> ");
+var t5 = template("<span data-v-8dd81f55><span data-v-8dd81f55 class=rp-range-slider__mark-dot></span>");
+var t6 = template("<span data-v-8dd81f55 class=rp-range-slider__marks aria-hidden=true>");
+var t7 = template("<span data-v-8dd81f55><span data-v-8dd81f55 class=rp-range-slider__thumb-content>");
+var t8 = template("<div data-v-8dd81f55 role=group><span data-v-8dd81f55 class=rp-range-slider__track><span data-v-8dd81f55 class=rp-range-slider__bar aria-hidden=true></span><!><span data-v-8dd81f55 class=rp-range-slider__thumbs aria-hidden=true>", 1);
+delegateEvents("input", "keydown", "pointerdown");
+//#endregion
+//#region src/components/slider/range-slider.vue
+var range_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+	name: "RpRangeSlider",
+	__name: "range-slider",
+	props: {
+		modelValue: {},
+		minRange: { default: 0 },
+		name: {},
+		ariaLabel: { default: () => ["Minimum", "Maximum"] },
+		ariaValueText: {},
+		id: {},
+		min: { default: 0 },
+		max: { default: 100 },
+		step: { default: 1 },
+		marks: { default: () => [] },
+		thumbStyle: {},
+		tooltip: {
+			type: [
+				Boolean,
+				String,
+				Object
+			],
+			default: "hover"
+		},
+		formatValue: {},
+		color: {},
+		size: {},
+		orientation: { default: "horizontal" },
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		describedby: {},
+		labelledby: {}
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit, slots: $slots }) {
+		const props = __props;
+		const emit = __emit;
+		const slots = useSlots();
+		const generatedId = useId();
+		const tooltipsOverlapping = ref(false);
+		const rangeSliderThumbs = ["lower", "upper"];
+		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, tooltipArrow, tooltipContent, mergedTooltipContent, onInput, onTrackPointerDown, onTooltipFocus, onTooltipBlur, onTooltipTrackMouseEnter, onTooltipTrackMouseLeave, onTooltipKeydown } = useRangeSlider(props, (value) => {
+			emit("update:modelValue", value);
+		});
+		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 n34 = t8();
+		const n33 = child(n34, 1);
+		const n32 = next(child(n33), 1);
+		const n31 = next(n32, 3);
+		renderEffect(() => {
+			const _control = unref(control);
+			setClass(n34, [unref(rootClass), {
+				"rp-range-slider--custom-thumb": $slots.thumb,
+				"rp-range-slider--tooltips-overlapping": tooltipsOverlapping.value
+			}]);
+			setAttr(n34, "data-active-thumb", unref(activeThumb));
+			setAttr(n34, "data-disabled", _control.disabled || void 0);
+			setStyle(n34, unref(trackStyle));
+			setAttr(n34, "aria-labelledby", groupLabelledby.value);
+			setAttr(n34, "aria-describedby", _control.ariaDescribedby);
+		});
+		setInsertionState(n34, 0, 0);
+		createIf(() => $slots.default || $slots.value, () => {
+			const n10 = t2();
+			setInsertionState(n10, null, 0);
+			createIf(() => $slots.default, () => {
+				const n5 = t0();
+				renderEffect(() => setProp(n5, "id", labelId.value));
+				setInsertionState(n5, null, 0);
+				createSlot("default", null, null, 1);
+				return n5;
+			});
+			setInsertionState(n10, null, 1);
+			createIf(() => $slots.value, () => {
+				const n9 = t1();
+				setInsertionState(n9, null, 0);
+				createSlot("value", {
+					value: () => unref(normalizedValue),
+					formattedValue: () => unref(formattedValue),
+					percent: () => unref(valuePercent)
+				}, null, 1);
+				return n9;
+			});
+			return n10;
+		});
+		setInsertionState(n33, n32, 1);
+		createFor(() => rangeSliderThumbs, (_for_item0, _for_key0) => {
+			const n13 = t3();
+			n13.$evtinput = createInvoker(($event) => unref(onInput)(_for_item0.value, $event));
+			on(n13, "focus", () => unref(onTooltipFocus)(_for_item0.value));
+			on(n13, "blur", () => unref(onTooltipBlur)(_for_item0.value));
+			n13.$evtkeydown = createInvoker(($event) => unref(onTooltipKeydown)(_for_item0.value, $event));
+			let _index, _control;
+			renderEffect(() => {
+				_index = _for_key0.value;
+				_control = unref(control);
+				setProp(n13, "id", unref(nativeIds)[_index]);
+				setProp(n13, "name", unref(nativeNames)[_index]);
+				setValue(n13, unref(normalizedValue)[_index]);
+				setProp(n13, "min", unref(nativeMin)[_index]);
+				setProp(n13, "max", unref(nativeMax)[_index]);
+				setProp(n13, "step", unref(nativeStep));
+				setProp(n13, "orient", __props.orientation === "vertical" ? "vertical" : void 0);
+				setProp(n13, "disabled", _control.disabled || void 0);
+				setAttr(n13, "aria-label", unref(ariaLabels)[_index]);
+				setAttr(n13, "aria-describedby", _control.ariaDescribedby);
+				setAttr(n13, "aria-orientation", __props.orientation === "vertical" ? "vertical" : void 0);
+				setAttr(n13, "aria-valuetext", unref(ariaValueText)[_index]);
+			});
+			setClass(n13, ["rp-range-slider__native", `rp-range-slider__native--${_for_item0.value}`]);
+			return n13;
+		}, (thumb, index) => thumb, 8);
+		setInsertionState(n33, n32, 2);
+		createIf(() => unref(markItems).length, () => {
+			const n22 = t6();
+			setInsertionState(n22, null, 0);
+			createFor(() => unref(markItems), (_for_item0) => {
+				const n21 = t5();
+				renderEffect(() => {
+					const _mark = _for_item0.value;
+					setClassName(n21, _mark.filled ? 1 : 0, " rp-range-slider__mark--filled", "rp-range-slider__mark");
+					setStyle(n21, _mark.style);
+				});
+				setInsertionState(n21, null, 1);
+				createIf(() => _for_item0.value.hasLabel, () => {
+					const n20 = t4();
+					const x20 = txt(n20);
+					renderEffect(() => setText(x20, toDisplayString(_for_item0.value.label)));
+					return n20;
+				});
+				return n21;
+			}, (mark) => mark.key, 9);
+			return n22;
+		});
+		setInsertionState(n31, null, 0);
+		createFor(() => rangeSliderThumbs, (_for_item0, _for_key0) => {
+			const n27 = t7();
+			const n26 = child(n27);
+			renderEffect(() => setAttr(n27, "data-range-slider-thumb", _for_item0.value));
+			setInsertionState(n26, 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);
+			setClass(n27, ["rp-range-slider__thumb", `rp-range-slider__thumb--${_for_item0.value}`]);
+			return n27;
+		}, (thumb, index) => thumb, 8);
+		setInsertionState(n31, null, 1);
+		createIf(() => unref(tooltipVisible), () => {
+			const _on_update_overlapping = ($event) => tooltipsOverlapping.value = $event;
+			return createComponent(range_slider_tooltip_default, {
+				arrow: () => unref(tooltipArrow),
+				color: () => unref(tooltipColor),
+				content: () => unref(tooltipContent),
+				ids: () => unref(tooltipIds),
+				"merged-content": () => unref(mergedTooltipContent),
+				"merged-id": () => unref(mergedTooltipId),
+				offset: () => unref(tooltipOffset),
+				open: () => unref(tooltipOpen),
+				orientation: () => __props.orientation,
+				placement: () => unref(tooltipPlacement),
+				"value-percent": () => unref(valuePercent),
+				"onUpdate:overlapping": () => _on_update_overlapping
+			});
+		});
+		n33.$evtpointerdown = createInvoker((e) => unref(onTrackPointerDown)(e));
+		on(n33, "mouseenter", (e) => unref(onTooltipTrackMouseEnter)(e));
+		on(n33, "mouseleave", (e) => unref(onTooltipTrackMouseLeave)(e));
+		return n34;
+	}
+}), [["__scopeId", "data-v-8dd81f55"]]);
+//#endregion
+//#region src/components/slider/types.ts
+var sliderColors = componentColors;
+var sliderSizes = [
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl"
+];
+var sliderOrientations = ["horizontal", "vertical"];
 //#endregion
-export { sliderSizes as i, sliderColors as n, sliderOrientations as r, slider_default as t };
+export { slider_default as a, range_slider_default as i, sliderOrientations as n, sliderSizes as r, sliderColors as t };