@youcan/celeste 0.6.102 → 0.7.1

package/dist/es/chunks/slider.js

@@ -1,13 +1,753 @@
-import { Ft as rg, I as Se, It as sg, Ot as og, wt as lg } from "./dist.js";
 import { t as clsx } from "./clsx.js";
+import { t as clamp } from "./clamp.js";
+import { t as createContext } from "./createContext.js";
+import { a as useMounted, s as useVModel } from "./dist.js";
+import { t as Primitive } from "./Primitive.js";
+import { t as useDirection } from "./useDirection.js";
+import { t as useFormControl } from "./useFormControl.js";
+import { t as useForwardExpose } from "./useForwardExpose.js";
+import { t as useForwardPropsEmits } from "./useForwardPropsEmits.js";
+import { t as useSize } from "./useSize.js";
+import { t as useCollection } from "./Collection.js";
+import { t as VisuallyHiddenInput_default } from "./VisuallyHiddenInput.js";
 import { useDelegatedProps } from "../use-delegated-props.js";
-import { Fragment, createBlock, createElementBlock, createVNode, defineComponent, mergeProps, openBlock, renderList, unref, withCtx } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, mergeProps, normalizeStyle, onMounted, onUnmounted, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toRaw, toRefs, unref, withCtx } from "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 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__ */ 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__ */ 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 } = toRefs(props);
+		const { forwardRef, currentElement: sliderElement } = useForwardExpose();
+		const rootContext = injectSliderRootContext();
+		const offsetPosition = ref();
+		const rectRef = ref();
+		const isSlidingFromLeft = 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: computed(() => isSlidingFromLeft.value ? "left" : "right"),
+			endEdge: computed(() => isSlidingFromLeft.value ? "right" : "left"),
+			direction: computed(() => isSlidingFromLeft.value ? 1 : -1),
+			size: "width"
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(SliderImpl_default, {
+				ref: unref(forwardRef),
+				dir: unref(dir),
+				"data-orientation": "horizontal",
+				style: normalizeStyle({ ["--reka-slider-thumb-transform"]: !isSlidingFromLeft.value && 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, 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: withCtx(() => [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__ */ 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 } = toRefs(props);
+		const rootContext = injectSliderRootContext();
+		const { forwardRef, currentElement: sliderElement } = useForwardExpose();
+		const offsetPosition = ref();
+		const rectRef = ref();
+		const isSlidingFromBottom = 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: computed(() => isSlidingFromBottom.value ? "bottom" : "top"),
+			endEdge: computed(() => isSlidingFromBottom.value ? "top" : "bottom"),
+			direction: computed(() => isSlidingFromBottom.value ? 1 : -1),
+			size: "height"
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(SliderImpl_default, {
+				ref: unref(forwardRef),
+				"data-orientation": "vertical",
+				style: normalizeStyle({ ["--reka-slider-thumb-transform"]: !isSlidingFromBottom.value && 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, 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: withCtx(() => [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__ */ createContext("SliderRoot");
+var SliderRoot_default = /* @__PURE__ */ 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 } = toRefs(props);
+		const dir = useDirection(propDir);
+		const { forwardRef, currentElement } = useForwardExpose();
+		const isFormControl = useFormControl(currentElement);
+		const { CollectionSlot } = useCollection({ isProvider: true });
+		const modelValue = useVModel(props, "modelValue", emits, {
+			defaultValue: props.defaultValue,
+			passive: props.modelValue === void 0
+		});
+		const currentModelValue = computed(() => Array.isArray(modelValue.value) ? [...modelValue.value] : []);
+		const valueIndexToChangeRef = ref(0);
+		const valuesBeforeSlideStartRef = 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", toRaw(currentModelValue.value));
+		}
+		function updateValues(value, atIndex, { commit } = { commit: false }) {
+			const decimalCount = getDecimalCount(step.value);
+			const nextValue = 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 = ref([]);
+		provideSliderRootContext({
+			modelValue,
+			currentModelValue,
+			valueIndexToChangeRef,
+			thumbElements,
+			orientation,
+			min,
+			max,
+			disabled,
+			thumbAlignment
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(CollectionSlot), null, {
+				default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(unref(orientation) === "horizontal" ? SliderHorizontal_default : SliderVertical_default), mergeProps(_ctx.$attrs, {
+					ref: unref(forwardRef),
+					"as-child": _ctx.asChild,
+					as: _ctx.as,
+					min: unref(min),
+					max: unref(max),
+					dir: unref(dir),
+					inverted: _ctx.inverted,
+					"aria-disabled": unref(disabled),
+					"data-disabled": unref(disabled) ? "" : void 0,
+					onPointerdown: _cache[0] || (_cache[0] = () => {
+						if (!unref(disabled)) valuesBeforeSlideStartRef.value = currentModelValue.value;
+					}),
+					onSlideStart: _cache[1] || (_cache[1] = ($event) => !unref(disabled) && handleSlideStart($event)),
+					onSlideMove: _cache[2] || (_cache[2] = ($event) => !unref(disabled) && handleSlideMove($event)),
+					onSlideEnd: _cache[3] || (_cache[3] = ($event) => !unref(disabled) && handleSlideEnd()),
+					onHomeKeyDown: _cache[4] || (_cache[4] = ($event) => !unref(disabled) && updateValues(unref(min), 0, { commit: true })),
+					onEndKeyDown: _cache[5] || (_cache[5] = ($event) => !unref(disabled) && updateValues(unref(max), currentModelValue.value.length - 1, { commit: true })),
+					onStepKeyDown: _cache[6] || (_cache[6] = (event, direction) => {
+						if (!unref(disabled)) {
+							const multiplier = unref(PAGE_KEYS).includes(event.key) || event.shiftKey && unref(ARROW_KEYS).includes(event.key) ? 10 : 1;
+							const atIndex = valueIndexToChangeRef.value;
+							const value = currentModelValue.value[atIndex];
+							updateValues(value + unref(step) * multiplier * direction, atIndex, { commit: true });
+						}
+					})
+				}), {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "default", { modelValue: unref(modelValue) }), unref(isFormControl) && _ctx.name ? (openBlock(), createBlock(unref(VisuallyHiddenInput_default), {
+						key: 0,
+						type: "number",
+						value: unref(modelValue),
+						name: _ctx.name,
+						required: _ctx.required,
+						disabled: unref(disabled),
+						step: unref(step)
+					}, null, 8, [
+						"value",
+						"name",
+						"required",
+						"disabled",
+						"step"
+					])) : 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__ */ 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 openBlock(), createBlock(unref(Primitive), 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 (unref(PAGE_KEYS).concat(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 (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: withCtx(() => [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__ */ defineComponent({
+	__name: "SliderRange",
+	props: {
+		asChild: {
+			type: Boolean,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "span"
+		}
+	},
+	setup(__props) {
+		const rootContext = injectSliderRootContext();
+		const orientation = injectSliderOrientationContext();
+		useForwardExpose();
+		const percentages = computed(() => rootContext.currentModelValue.value.map((value) => convertValueToPercentage(value, rootContext.min.value, rootContext.max.value)));
+		const offsetStart = computed(() => rootContext.currentModelValue.value.length > 1 ? Math.min(...percentages.value) : 0);
+		const offsetEnd = computed(() => 100 - Math.max(...percentages.value, 0));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Primitive), {
+				"data-disabled": unref(rootContext).disabled.value ? "" : void 0,
+				"data-orientation": unref(rootContext).orientation.value,
+				"as-child": _ctx.asChild,
+				as: _ctx.as,
+				style: normalizeStyle({
+					[unref(orientation).startEdge.value]: `${offsetStart.value}%`,
+					[unref(orientation).endEdge.value]: `${offsetEnd.value}%`
+				})
+			}, {
+				default: withCtx(() => [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__ */ 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 } = useForwardExpose();
+		const { CollectionItem } = useCollection();
+		const value = computed(() => rootContext.modelValue?.value?.[props.index]);
+		const percent = computed(() => value.value === void 0 ? 0 : convertValueToPercentage(value.value, rootContext.min.value ?? 0, rootContext.max.value ?? 100));
+		const label = computed(() => getLabel(props.index, rootContext.modelValue?.value?.length ?? 0));
+		const size = useSize(thumbElement);
+		const orientationSize = computed(() => size[orientation.size].value);
+		const thumbInBoundsOffset = computed(() => {
+			if (rootContext.thumbAlignment.value === "overflow" || !orientationSize.value) return 0;
+			else return getThumbInBoundsOffset(orientationSize.value, percent.value, orientation.direction.value);
+		});
+		const isMounted = useMounted();
+		onMounted(() => {
+			rootContext.thumbElements.value.push(thumbElement.value);
+		});
+		onUnmounted(() => {
+			const i = rootContext.thumbElements.value.findIndex((i$1) => i$1 === thumbElement.value) ?? -1;
+			rootContext.thumbElements.value.splice(i, 1);
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(CollectionItem), null, {
+				default: withCtx(() => [createVNode(unref(Primitive), mergeProps(_ctx.$attrs, {
+					ref: unref(forwardRef),
+					role: "slider",
+					tabindex: unref(rootContext).disabled.value ? void 0 : 0,
+					"aria-label": _ctx.$attrs["aria-label"] || label.value,
+					"data-disabled": unref(rootContext).disabled.value ? "" : void 0,
+					"data-orientation": unref(rootContext).orientation.value,
+					"aria-valuenow": value.value,
+					"aria-valuemin": unref(rootContext).min.value,
+					"aria-valuemax": unref(rootContext).max.value,
+					"aria-orientation": unref(rootContext).orientation.value,
+					"as-child": _ctx.asChild,
+					as: _ctx.as,
+					style: {
+						transform: "var(--reka-slider-thumb-transform)",
+						position: "absolute",
+						[unref(orientation).startEdge.value]: `calc(${percent.value}% + ${thumbInBoundsOffset.value}px)`,
+						display: !unref(isMounted) && value.value === void 0 ? "none" : void 0
+					},
+					onFocus: _cache[0] || (_cache[0] = () => {
+						unref(rootContext).valueIndexToChangeRef.value = _ctx.index;
+					})
+				}), {
+					default: withCtx(() => [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__ */ defineComponent({
+	__name: "SliderThumb",
+	props: {
+		asChild: {
+			type: Boolean,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "span"
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const { getItems } = useCollection();
+		const { forwardRef, currentElement: thumbElement } = useForwardExpose();
+		const index = computed(() => thumbElement.value ? getItems(true).findIndex((i) => i.ref === thumbElement.value) : -1);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(SliderThumbImpl_default, mergeProps({ ref: unref(forwardRef) }, props, { index: index.value }), {
+				default: withCtx(() => [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__ */ defineComponent({
+	__name: "SliderTrack",
+	props: {
+		asChild: {
+			type: Boolean,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "span"
+		}
+	},
+	setup(__props) {
+		const rootContext = injectSliderRootContext();
+		useForwardExpose();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Primitive), {
+				"as-child": _ctx.asChild,
+				as: _ctx.as,
+				"data-disabled": unref(rootContext).disabled.value ? "" : void 0,
+				"data-orientation": unref(rootContext).orientation.value
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, [
+				"as-child",
+				"as",
+				"data-disabled",
+				"data-orientation"
+			]);
+		};
+	}
+});
 //#endregion
 //#region src/components/slider/slider.vue
 var slider_default = /* @__PURE__ */ defineComponent({
 	__name: "slider",
 	props: {
-		name: {},
 		defaultValue: {},
 		modelValue: {},
 		disabled: { type: Boolean },
@@ -17,22 +757,25 @@ var slider_default = /* @__PURE__ */ 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 = Se(useDelegatedProps(props, "class"), emits);
+		const forwarded = useForwardPropsEmits(useDelegatedProps(props, "class"), emits);
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(og), mergeProps(unref(forwarded), { class: unref(clsx)("celeste-slider", props.class) }), {
-				default: withCtx(() => [createVNode(unref(sg), { class: "celeste-slider-track" }, {
-					default: withCtx(() => [createVNode(unref(rg), { class: "celeste-slider-range" })]),
+			return openBlock(), createBlock(unref(SliderRoot_default), mergeProps(unref(forwarded), { class: unref(clsx)("celeste-slider", props.class) }), {
+				default: withCtx(() => [createVNode(unref(SliderTrack_default), { class: "celeste-slider-track" }, {
+					default: withCtx(() => [createVNode(unref(SliderRange_default), { class: "celeste-slider-range" })]),
 					_: 1
 				}), (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.modelValue, (_, key) => {
-					return openBlock(), createBlock(unref(lg), {
+					return openBlock(), createBlock(unref(SliderThumb_default), {
 						key,
 						class: "celeste-slider-thumb"
 					});