@youcan/celeste 0.6.102 → 0.7.1

package/dist/cjs/chunks/slider.cjs

@@ -1,13 +1,754 @@
-const require_dist = require("./dist.cjs");
+require("./chunk.cjs");
 const require_clsx = require("./clsx.cjs");
+const require_clamp = require("./clamp.cjs");
+const require_createContext = require("./createContext.cjs");
+const require_dist = require("./dist.cjs");
+const require_Primitive = require("./Primitive.cjs");
+const require_useDirection = require("./useDirection.cjs");
+const require_useFormControl = require("./useFormControl.cjs");
+const require_useForwardExpose = require("./useForwardExpose.cjs");
+const require_useForwardPropsEmits = require("./useForwardPropsEmits.cjs");
+const require_useSize = require("./useSize.cjs");
+const require_Collection = require("./Collection.cjs");
+const require_VisuallyHiddenInput = require("./VisuallyHiddenInput.cjs");
 const require_use_delegated_props = require("../use-delegated-props.cjs");
 let vue = require("vue");
+//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.13_typescript@6.0.3_/node_modules/reka-ui/dist/Slider/utils.js
+function getNextSortedValues(prevValues = [], nextValue, atIndex) {
+	const nextValues = [...prevValues];
+	nextValues[atIndex] = nextValue;
+	return nextValues.sort((a, b) => a - b);
+}
+function convertValueToPercentage(value, min, max) {
+	return require_clamp.clamp(100 / (max - min) * (value - min), 0, 100);
+}
+/**
+* Returns a label for each thumb when there are two or more thumbs
+*/
+function getLabel(index, totalValues) {
+	if (totalValues > 2) return `Value ${index + 1} of ${totalValues}`;
+	else if (totalValues === 2) return ["Minimum", "Maximum"][index];
+	else return void 0;
+}
+/**
+* Given a `values` array and a `nextValue`, determine which value in
+* the array is closest to `nextValue` and return its index.
+*
+* @example
+* // returns 1
+* getClosestValueIndex([10, 30], 25);
+*/
+function getClosestValueIndex(values, nextValue) {
+	if (values.length === 1) return 0;
+	const distances = values.map((value) => Math.abs(value - nextValue));
+	const closestDistance = Math.min(...distances);
+	return distances.indexOf(closestDistance);
+}
+/**
+* Offsets the thumb centre point while sliding to ensure it remains
+* within the bounds of the slider when reaching the edges
+*/
+function getThumbInBoundsOffset(width, left, direction) {
+	const halfWidth = width / 2;
+	return (halfWidth - linearScale([0, 50], [0, halfWidth])(left) * direction) * direction;
+}
+/**
+* Gets an array of steps between each value.
+*
+* @example
+* // returns [1, 9]
+* getStepsBetweenValues([10, 11, 20]);
+*/
+function getStepsBetweenValues(values) {
+	return values.slice(0, -1).map((value, index) => values[index + 1] - value);
+}
+/**
+* Verifies the minimum steps between all values is greater than or equal
+* to the expected minimum steps.
+*
+* @example
+* // returns false
+* hasMinStepsBetweenValues([1,2,3], 2);
+*
+* @example
+* // returns true
+* hasMinStepsBetweenValues([1,2,3], 1);
+*/
+function hasMinStepsBetweenValues(values, minStepsBetweenValues) {
+	if (minStepsBetweenValues > 0) {
+		const stepsBetweenValues = getStepsBetweenValues(values);
+		return Math.min(...stepsBetweenValues) >= minStepsBetweenValues;
+	}
+	return true;
+}
+function linearScale(input, output) {
+	return (value) => {
+		if (input[0] === input[1] || output[0] === output[1]) return output[0];
+		const ratio = (output[1] - output[0]) / (input[1] - input[0]);
+		return output[0] + ratio * (value - input[0]);
+	};
+}
+function getDecimalCount(value) {
+	return (String(value).split(".")[1] || "").length;
+}
+function roundValue(value, decimalCount) {
+	const rounder = 10 ** decimalCount;
+	return Math.round(value * rounder) / rounder;
+}
+var PAGE_KEYS = ["PageUp", "PageDown"];
+var ARROW_KEYS = [
+	"ArrowUp",
+	"ArrowDown",
+	"ArrowLeft",
+	"ArrowRight"
+];
+var BACK_KEYS = {
+	"from-left": [
+		"Home",
+		"PageDown",
+		"ArrowDown",
+		"ArrowLeft"
+	],
+	"from-right": [
+		"Home",
+		"PageDown",
+		"ArrowDown",
+		"ArrowRight"
+	],
+	"from-bottom": [
+		"Home",
+		"PageDown",
+		"ArrowDown",
+		"ArrowLeft"
+	],
+	"from-top": [
+		"Home",
+		"PageUp",
+		"ArrowUp",
+		"ArrowLeft"
+	]
+};
+var [injectSliderOrientationContext, provideSliderOrientationContext] = /* @__PURE__ */ require_createContext.createContext(["SliderVertical", "SliderHorizontal"]);
+//#endregion
+//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.13_typescript@6.0.3_/node_modules/reka-ui/dist/Slider/SliderHorizontal.js
+var SliderHorizontal_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "SliderHorizontal",
+	props: {
+		dir: {
+			type: String,
+			required: false
+		},
+		min: {
+			type: Number,
+			required: true
+		},
+		max: {
+			type: Number,
+			required: true
+		},
+		inverted: {
+			type: Boolean,
+			required: true
+		}
+	},
+	emits: [
+		"slideEnd",
+		"slideStart",
+		"slideMove",
+		"homeKeyDown",
+		"endKeyDown",
+		"stepKeyDown"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emits = __emit;
+		const { max, min, dir, inverted } = (0, vue.toRefs)(props);
+		const { forwardRef, currentElement: sliderElement } = require_useForwardExpose.useForwardExpose();
+		const rootContext = injectSliderRootContext();
+		const offsetPosition = (0, vue.ref)();
+		const rectRef = (0, vue.ref)();
+		const isSlidingFromLeft = (0, vue.computed)(() => dir?.value !== "rtl" && !inverted.value || dir?.value !== "ltr" && inverted.value);
+		function getValueFromPointerEvent(event, slideStart) {
+			const rect = rectRef.value || sliderElement.value.getBoundingClientRect();
+			const thumb = [...rootContext.thumbElements.value][rootContext.valueIndexToChangeRef.value];
+			const thumbWidth = rootContext.thumbAlignment.value === "contain" ? thumb.clientWidth : 0;
+			if (!offsetPosition.value && !slideStart && rootContext.thumbAlignment.value === "contain") offsetPosition.value = event.clientX - thumb.getBoundingClientRect().left;
+			const value = linearScale([0, rect.width - thumbWidth], isSlidingFromLeft.value ? [min.value, max.value] : [max.value, min.value]);
+			rectRef.value = rect;
+			return value(slideStart ? event.clientX - rect.left - thumbWidth / 2 : event.clientX - rect.left - (offsetPosition.value ?? 0));
+		}
+		provideSliderOrientationContext({
+			startEdge: (0, vue.computed)(() => isSlidingFromLeft.value ? "left" : "right"),
+			endEdge: (0, vue.computed)(() => isSlidingFromLeft.value ? "right" : "left"),
+			direction: (0, vue.computed)(() => isSlidingFromLeft.value ? 1 : -1),
+			size: "width"
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)(SliderImpl_default, {
+				ref: (0, vue.unref)(forwardRef),
+				dir: (0, vue.unref)(dir),
+				"data-orientation": "horizontal",
+				style: (0, vue.normalizeStyle)({ ["--reka-slider-thumb-transform"]: !isSlidingFromLeft.value && (0, vue.unref)(rootContext).thumbAlignment.value === "overflow" ? "translateX(50%)" : "translateX(-50%)" }),
+				onSlideStart: _cache[0] || (_cache[0] = (event) => {
+					emits("slideStart", getValueFromPointerEvent(event, true));
+				}),
+				onSlideMove: _cache[1] || (_cache[1] = (event) => {
+					emits("slideMove", getValueFromPointerEvent(event));
+				}),
+				onSlideEnd: _cache[2] || (_cache[2] = () => {
+					rectRef.value = void 0;
+					offsetPosition.value = void 0;
+					emits("slideEnd");
+				}),
+				onStepKeyDown: _cache[3] || (_cache[3] = (event) => {
+					const slideDirection = isSlidingFromLeft.value ? "from-left" : "from-right";
+					emits("stepKeyDown", event, (0, vue.unref)(BACK_KEYS)[slideDirection].includes(event.key) ? -1 : 1);
+				}),
+				onEndKeyDown: _cache[4] || (_cache[4] = ($event) => emits("endKeyDown", $event)),
+				onHomeKeyDown: _cache[5] || (_cache[5] = ($event) => emits("homeKeyDown", $event))
+			}, {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, ["dir", "style"]);
+		};
+	}
+});
+//#endregion
+//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.13_typescript@6.0.3_/node_modules/reka-ui/dist/Slider/SliderVertical.js
+var SliderVertical_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "SliderVertical",
+	props: {
+		min: {
+			type: Number,
+			required: true
+		},
+		max: {
+			type: Number,
+			required: true
+		},
+		inverted: {
+			type: Boolean,
+			required: true
+		}
+	},
+	emits: [
+		"slideEnd",
+		"slideStart",
+		"slideMove",
+		"homeKeyDown",
+		"endKeyDown",
+		"stepKeyDown"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emits = __emit;
+		const { max, min, inverted } = (0, vue.toRefs)(props);
+		const rootContext = injectSliderRootContext();
+		const { forwardRef, currentElement: sliderElement } = require_useForwardExpose.useForwardExpose();
+		const offsetPosition = (0, vue.ref)();
+		const rectRef = (0, vue.ref)();
+		const isSlidingFromBottom = (0, vue.computed)(() => !inverted.value);
+		function getValueFromPointerEvent(event, slideStart) {
+			const rect = rectRef.value || sliderElement.value.getBoundingClientRect();
+			const thumb = [...rootContext.thumbElements.value][rootContext.valueIndexToChangeRef.value];
+			const thumbHeight = rootContext.thumbAlignment.value === "contain" ? thumb.clientHeight : 0;
+			if (!offsetPosition.value && !slideStart && rootContext.thumbAlignment.value === "contain") offsetPosition.value = event.clientY - thumb.getBoundingClientRect().top;
+			const value = linearScale([0, rect.height - thumbHeight], isSlidingFromBottom.value ? [max.value, min.value] : [min.value, max.value]);
+			const position = slideStart ? event.clientY - rect.top - thumbHeight / 2 : event.clientY - rect.top - (offsetPosition.value ?? 0);
+			rectRef.value = rect;
+			return value(position);
+		}
+		provideSliderOrientationContext({
+			startEdge: (0, vue.computed)(() => isSlidingFromBottom.value ? "bottom" : "top"),
+			endEdge: (0, vue.computed)(() => isSlidingFromBottom.value ? "top" : "bottom"),
+			direction: (0, vue.computed)(() => isSlidingFromBottom.value ? 1 : -1),
+			size: "height"
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)(SliderImpl_default, {
+				ref: (0, vue.unref)(forwardRef),
+				"data-orientation": "vertical",
+				style: (0, vue.normalizeStyle)({ ["--reka-slider-thumb-transform"]: !isSlidingFromBottom.value && (0, vue.unref)(rootContext).thumbAlignment.value === "overflow" ? "translateY(-50%)" : "translateY(50%)" }),
+				onSlideStart: _cache[0] || (_cache[0] = (event) => {
+					emits("slideStart", getValueFromPointerEvent(event, true));
+				}),
+				onSlideMove: _cache[1] || (_cache[1] = (event) => {
+					emits("slideMove", getValueFromPointerEvent(event));
+				}),
+				onSlideEnd: _cache[2] || (_cache[2] = () => {
+					rectRef.value = void 0;
+					offsetPosition.value = void 0;
+					emits("slideEnd");
+				}),
+				onStepKeyDown: _cache[3] || (_cache[3] = (event) => {
+					const slideDirection = isSlidingFromBottom.value ? "from-bottom" : "from-top";
+					emits("stepKeyDown", event, (0, vue.unref)(BACK_KEYS)[slideDirection].includes(event.key) ? -1 : 1);
+				}),
+				onEndKeyDown: _cache[4] || (_cache[4] = ($event) => emits("endKeyDown", $event)),
+				onHomeKeyDown: _cache[5] || (_cache[5] = ($event) => emits("homeKeyDown", $event))
+			}, {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, ["style"]);
+		};
+	}
+});
+//#endregion
+//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.13_typescript@6.0.3_/node_modules/reka-ui/dist/Slider/SliderRoot.js
+var [injectSliderRootContext, provideSliderRootContext] = /* @__PURE__ */ require_createContext.createContext("SliderRoot");
+var SliderRoot_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	inheritAttrs: false,
+	__name: "SliderRoot",
+	props: {
+		defaultValue: {
+			type: Array,
+			required: false,
+			default: () => [0]
+		},
+		modelValue: {
+			type: [Array, null],
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		orientation: {
+			type: String,
+			required: false,
+			default: "horizontal"
+		},
+		dir: {
+			type: String,
+			required: false
+		},
+		inverted: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		min: {
+			type: Number,
+			required: false,
+			default: 0
+		},
+		max: {
+			type: Number,
+			required: false,
+			default: 100
+		},
+		step: {
+			type: Number,
+			required: false,
+			default: 1
+		},
+		minStepsBetweenThumbs: {
+			type: Number,
+			required: false,
+			default: 0
+		},
+		thumbAlignment: {
+			type: String,
+			required: false,
+			default: "contain"
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "span"
+		},
+		name: {
+			type: String,
+			required: false
+		},
+		required: {
+			type: Boolean,
+			required: false
+		}
+	},
+	emits: ["update:modelValue", "valueCommit"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emits = __emit;
+		const { min, max, step, minStepsBetweenThumbs, orientation, disabled, thumbAlignment, dir: propDir } = (0, vue.toRefs)(props);
+		const dir = require_useDirection.useDirection(propDir);
+		const { forwardRef, currentElement } = require_useForwardExpose.useForwardExpose();
+		const isFormControl = require_useFormControl.useFormControl(currentElement);
+		const { CollectionSlot } = require_Collection.useCollection({ isProvider: true });
+		const modelValue = require_dist.useVModel(props, "modelValue", emits, {
+			defaultValue: props.defaultValue,
+			passive: props.modelValue === void 0
+		});
+		const currentModelValue = (0, vue.computed)(() => Array.isArray(modelValue.value) ? [...modelValue.value] : []);
+		const valueIndexToChangeRef = (0, vue.ref)(0);
+		const valuesBeforeSlideStartRef = (0, vue.ref)(currentModelValue.value);
+		function handleSlideStart(value) {
+			updateValues(value, getClosestValueIndex(currentModelValue.value, value));
+		}
+		function handleSlideMove(value) {
+			updateValues(value, valueIndexToChangeRef.value);
+		}
+		function handleSlideEnd() {
+			const prevValue = valuesBeforeSlideStartRef.value[valueIndexToChangeRef.value];
+			if (currentModelValue.value[valueIndexToChangeRef.value] !== prevValue) emits("valueCommit", (0, vue.toRaw)(currentModelValue.value));
+		}
+		function updateValues(value, atIndex, { commit } = { commit: false }) {
+			const decimalCount = getDecimalCount(step.value);
+			const nextValue = require_clamp.clamp(roundValue(Math.round((value - min.value) / step.value) * step.value + min.value, decimalCount), min.value, max.value);
+			const nextValues = getNextSortedValues(currentModelValue.value, nextValue, atIndex);
+			if (hasMinStepsBetweenValues(nextValues, minStepsBetweenThumbs.value * step.value)) {
+				valueIndexToChangeRef.value = nextValues.indexOf(nextValue);
+				const hasChanged = String(nextValues) !== String(modelValue.value);
+				if (hasChanged && commit) emits("valueCommit", nextValues);
+				if (hasChanged) {
+					thumbElements.value[valueIndexToChangeRef.value]?.focus();
+					modelValue.value = nextValues;
+				}
+			}
+		}
+		const thumbElements = (0, vue.ref)([]);
+		provideSliderRootContext({
+			modelValue,
+			currentModelValue,
+			valueIndexToChangeRef,
+			thumbElements,
+			orientation,
+			min,
+			max,
+			disabled,
+			thumbAlignment
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(CollectionSlot), null, {
+				default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)((0, vue.unref)(orientation) === "horizontal" ? SliderHorizontal_default : SliderVertical_default), (0, vue.mergeProps)(_ctx.$attrs, {
+					ref: (0, vue.unref)(forwardRef),
+					"as-child": _ctx.asChild,
+					as: _ctx.as,
+					min: (0, vue.unref)(min),
+					max: (0, vue.unref)(max),
+					dir: (0, vue.unref)(dir),
+					inverted: _ctx.inverted,
+					"aria-disabled": (0, vue.unref)(disabled),
+					"data-disabled": (0, vue.unref)(disabled) ? "" : void 0,
+					onPointerdown: _cache[0] || (_cache[0] = () => {
+						if (!(0, vue.unref)(disabled)) valuesBeforeSlideStartRef.value = currentModelValue.value;
+					}),
+					onSlideStart: _cache[1] || (_cache[1] = ($event) => !(0, vue.unref)(disabled) && handleSlideStart($event)),
+					onSlideMove: _cache[2] || (_cache[2] = ($event) => !(0, vue.unref)(disabled) && handleSlideMove($event)),
+					onSlideEnd: _cache[3] || (_cache[3] = ($event) => !(0, vue.unref)(disabled) && handleSlideEnd()),
+					onHomeKeyDown: _cache[4] || (_cache[4] = ($event) => !(0, vue.unref)(disabled) && updateValues((0, vue.unref)(min), 0, { commit: true })),
+					onEndKeyDown: _cache[5] || (_cache[5] = ($event) => !(0, vue.unref)(disabled) && updateValues((0, vue.unref)(max), currentModelValue.value.length - 1, { commit: true })),
+					onStepKeyDown: _cache[6] || (_cache[6] = (event, direction) => {
+						if (!(0, vue.unref)(disabled)) {
+							const multiplier = (0, vue.unref)(PAGE_KEYS).includes(event.key) || event.shiftKey && (0, vue.unref)(ARROW_KEYS).includes(event.key) ? 10 : 1;
+							const atIndex = valueIndexToChangeRef.value;
+							const value = currentModelValue.value[atIndex];
+							updateValues(value + (0, vue.unref)(step) * multiplier * direction, atIndex, { commit: true });
+						}
+					})
+				}), {
+					default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", { modelValue: (0, vue.unref)(modelValue) }), (0, vue.unref)(isFormControl) && _ctx.name ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_VisuallyHiddenInput.VisuallyHiddenInput_default), {
+						key: 0,
+						type: "number",
+						value: (0, vue.unref)(modelValue),
+						name: _ctx.name,
+						required: _ctx.required,
+						disabled: (0, vue.unref)(disabled),
+						step: (0, vue.unref)(step)
+					}, null, 8, [
+						"value",
+						"name",
+						"required",
+						"disabled",
+						"step"
+					])) : (0, vue.createCommentVNode)("v-if", true)]),
+					_: 3
+				}, 16, [
+					"as-child",
+					"as",
+					"min",
+					"max",
+					"dir",
+					"inverted",
+					"aria-disabled",
+					"data-disabled"
+				]))]),
+				_: 3
+			});
+		};
+	}
+});
+//#endregion
+//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.13_typescript@6.0.3_/node_modules/reka-ui/dist/Slider/SliderImpl.js
+var SliderImpl_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "SliderImpl",
+	props: {
+		asChild: {
+			type: Boolean,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "span"
+		}
+	},
+	emits: [
+		"slideStart",
+		"slideMove",
+		"slideEnd",
+		"homeKeyDown",
+		"endKeyDown",
+		"stepKeyDown"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emits = __emit;
+		const rootContext = injectSliderRootContext();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_Primitive.Primitive), (0, vue.mergeProps)({ "data-slider-impl": "" }, props, {
+				onKeydown: _cache[0] || (_cache[0] = (event) => {
+					if (event.key === "Home") {
+						emits("homeKeyDown", event);
+						event.preventDefault();
+					} else if (event.key === "End") {
+						emits("endKeyDown", event);
+						event.preventDefault();
+					} else if ((0, vue.unref)(PAGE_KEYS).concat((0, vue.unref)(ARROW_KEYS)).includes(event.key)) {
+						emits("stepKeyDown", event);
+						event.preventDefault();
+					}
+				}),
+				onPointerdown: _cache[1] || (_cache[1] = (event) => {
+					const target = event.target;
+					target.setPointerCapture(event.pointerId);
+					event.preventDefault();
+					if ((0, vue.unref)(rootContext).thumbElements.value.includes(target)) target.focus();
+					else emits("slideStart", event);
+				}),
+				onPointermove: _cache[2] || (_cache[2] = (event) => {
+					if (event.target.hasPointerCapture(event.pointerId)) emits("slideMove", event);
+				}),
+				onPointerup: _cache[3] || (_cache[3] = (event) => {
+					const target = event.target;
+					if (target.hasPointerCapture(event.pointerId)) {
+						target.releasePointerCapture(event.pointerId);
+						emits("slideEnd", event);
+					}
+				})
+			}), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+//#endregion
+//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.13_typescript@6.0.3_/node_modules/reka-ui/dist/Slider/SliderRange.js
+var SliderRange_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "SliderRange",
+	props: {
+		asChild: {
+			type: Boolean,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "span"
+		}
+	},
+	setup(__props) {
+		const rootContext = injectSliderRootContext();
+		const orientation = injectSliderOrientationContext();
+		require_useForwardExpose.useForwardExpose();
+		const percentages = (0, vue.computed)(() => rootContext.currentModelValue.value.map((value) => convertValueToPercentage(value, rootContext.min.value, rootContext.max.value)));
+		const offsetStart = (0, vue.computed)(() => rootContext.currentModelValue.value.length > 1 ? Math.min(...percentages.value) : 0);
+		const offsetEnd = (0, vue.computed)(() => 100 - Math.max(...percentages.value, 0));
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_Primitive.Primitive), {
+				"data-disabled": (0, vue.unref)(rootContext).disabled.value ? "" : void 0,
+				"data-orientation": (0, vue.unref)(rootContext).orientation.value,
+				"as-child": _ctx.asChild,
+				as: _ctx.as,
+				style: (0, vue.normalizeStyle)({
+					[(0, vue.unref)(orientation).startEdge.value]: `${offsetStart.value}%`,
+					[(0, vue.unref)(orientation).endEdge.value]: `${offsetEnd.value}%`
+				})
+			}, {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, [
+				"data-disabled",
+				"data-orientation",
+				"as-child",
+				"as",
+				"style"
+			]);
+		};
+	}
+});
+//#endregion
+//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.13_typescript@6.0.3_/node_modules/reka-ui/dist/Slider/SliderThumbImpl.js
+var SliderThumbImpl_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	inheritAttrs: false,
+	__name: "SliderThumbImpl",
+	props: {
+		index: {
+			type: Number,
+			required: true
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const rootContext = injectSliderRootContext();
+		const orientation = injectSliderOrientationContext();
+		const { forwardRef, currentElement: thumbElement } = require_useForwardExpose.useForwardExpose();
+		const { CollectionItem } = require_Collection.useCollection();
+		const value = (0, vue.computed)(() => rootContext.modelValue?.value?.[props.index]);
+		const percent = (0, vue.computed)(() => value.value === void 0 ? 0 : convertValueToPercentage(value.value, rootContext.min.value ?? 0, rootContext.max.value ?? 100));
+		const label = (0, vue.computed)(() => getLabel(props.index, rootContext.modelValue?.value?.length ?? 0));
+		const size = require_useSize.useSize(thumbElement);
+		const orientationSize = (0, vue.computed)(() => size[orientation.size].value);
+		const thumbInBoundsOffset = (0, vue.computed)(() => {
+			if (rootContext.thumbAlignment.value === "overflow" || !orientationSize.value) return 0;
+			else return getThumbInBoundsOffset(orientationSize.value, percent.value, orientation.direction.value);
+		});
+		const isMounted = require_dist.useMounted();
+		(0, vue.onMounted)(() => {
+			rootContext.thumbElements.value.push(thumbElement.value);
+		});
+		(0, vue.onUnmounted)(() => {
+			const i = rootContext.thumbElements.value.findIndex((i$1) => i$1 === thumbElement.value) ?? -1;
+			rootContext.thumbElements.value.splice(i, 1);
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(CollectionItem), null, {
+				default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(require_Primitive.Primitive), (0, vue.mergeProps)(_ctx.$attrs, {
+					ref: (0, vue.unref)(forwardRef),
+					role: "slider",
+					tabindex: (0, vue.unref)(rootContext).disabled.value ? void 0 : 0,
+					"aria-label": _ctx.$attrs["aria-label"] || label.value,
+					"data-disabled": (0, vue.unref)(rootContext).disabled.value ? "" : void 0,
+					"data-orientation": (0, vue.unref)(rootContext).orientation.value,
+					"aria-valuenow": value.value,
+					"aria-valuemin": (0, vue.unref)(rootContext).min.value,
+					"aria-valuemax": (0, vue.unref)(rootContext).max.value,
+					"aria-orientation": (0, vue.unref)(rootContext).orientation.value,
+					"as-child": _ctx.asChild,
+					as: _ctx.as,
+					style: {
+						transform: "var(--reka-slider-thumb-transform)",
+						position: "absolute",
+						[(0, vue.unref)(orientation).startEdge.value]: `calc(${percent.value}% + ${thumbInBoundsOffset.value}px)`,
+						display: !(0, vue.unref)(isMounted) && value.value === void 0 ? "none" : void 0
+					},
+					onFocus: _cache[0] || (_cache[0] = () => {
+						(0, vue.unref)(rootContext).valueIndexToChangeRef.value = _ctx.index;
+					})
+				}), {
+					default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+					_: 3
+				}, 16, [
+					"tabindex",
+					"aria-label",
+					"data-disabled",
+					"data-orientation",
+					"aria-valuenow",
+					"aria-valuemin",
+					"aria-valuemax",
+					"aria-orientation",
+					"as-child",
+					"as",
+					"style"
+				])]),
+				_: 3
+			});
+		};
+	}
+});
+//#endregion
+//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.13_typescript@6.0.3_/node_modules/reka-ui/dist/Slider/SliderThumb.js
+var SliderThumb_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "SliderThumb",
+	props: {
+		asChild: {
+			type: Boolean,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "span"
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const { getItems } = require_Collection.useCollection();
+		const { forwardRef, currentElement: thumbElement } = require_useForwardExpose.useForwardExpose();
+		const index = (0, vue.computed)(() => thumbElement.value ? getItems(true).findIndex((i) => i.ref === thumbElement.value) : -1);
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)(SliderThumbImpl_default, (0, vue.mergeProps)({ ref: (0, vue.unref)(forwardRef) }, props, { index: index.value }), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["index"]);
+		};
+	}
+});
+//#endregion
+//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.13_typescript@6.0.3_/node_modules/reka-ui/dist/Slider/SliderTrack.js
+var SliderTrack_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "SliderTrack",
+	props: {
+		asChild: {
+			type: Boolean,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "span"
+		}
+	},
+	setup(__props) {
+		const rootContext = injectSliderRootContext();
+		require_useForwardExpose.useForwardExpose();
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_Primitive.Primitive), {
+				"as-child": _ctx.asChild,
+				as: _ctx.as,
+				"data-disabled": (0, vue.unref)(rootContext).disabled.value ? "" : void 0,
+				"data-orientation": (0, vue.unref)(rootContext).orientation.value
+			}, {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, [
+				"as-child",
+				"as",
+				"data-disabled",
+				"data-orientation"
+			]);
+		};
+	}
+});
 //#endregion
 //#region src/components/slider/slider.vue
 var slider_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "slider",
 	props: {
-		name: {},
 		defaultValue: {},
 		modelValue: {},
 		disabled: { type: Boolean },
@@ -17,22 +758,25 @@ var slider_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		max: {},
 		step: {},
 		minStepsBetweenThumbs: {},
+		thumbAlignment: {},
 		asChild: { type: Boolean },
 		as: {},
+		name: {},
+		required: { type: Boolean },
 		class: {}
 	},
 	emits: ["update:modelValue", "valueCommit"],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emits = __emit;
-		const forwarded = require_dist.Se(require_use_delegated_props.useDelegatedProps(props, "class"), emits);
+		const forwarded = require_useForwardPropsEmits.useForwardPropsEmits(require_use_delegated_props.useDelegatedProps(props, "class"), emits);
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_dist.og), (0, vue.mergeProps)((0, vue.unref)(forwarded), { class: (0, vue.unref)(require_clsx.clsx)("celeste-slider", props.class) }), {
-				default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(require_dist.sg), { class: "celeste-slider-track" }, {
-					default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(require_dist.rg), { class: "celeste-slider-range" })]),
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(SliderRoot_default), (0, vue.mergeProps)((0, vue.unref)(forwarded), { class: (0, vue.unref)(require_clsx.clsx)("celeste-slider", props.class) }), {
+				default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(SliderTrack_default), { class: "celeste-slider-track" }, {
+					default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(SliderRange_default), { class: "celeste-slider-range" })]),
 					_: 1
 				}), ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(_ctx.modelValue, (_, key) => {
-					return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_dist.lg), {
+					return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(SliderThumb_default), {
 						key,
 						class: "celeste-slider-thumb"
 					});