ropav 0.0.10 → 0.0.11

package/dist/slider.js

@@ -1,10 +1,11 @@
 import './slider.css';
 import { t as bem } from "./bem.js";
+import { n as useStylesApi, t as presence } from "./styles-api.js";
 import { n as getComponentColorValue, t as componentColors } from "./componentColors.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { t as useControlState } from "./useControlState.js";
 import { 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";
+import { applyVShow, child, computed, createComponent, createFor, createIf, createInvoker, createSlot, createTemplateRefSetter, defineVaporComponent, delegateEvents, next, on, onBeforeUnmount, onMounted, ref, renderEffect, setClass, setDynamicProps, setInsertionState, setProp, setStyle, setText, template, toDisplayString, toRef, txt, unref, useId, useSlots, watch } from "vue";
 //#region src/components/slider/sliderCore.ts
 function normalizeSliderBounds(min, max) {
 	const safeMin = Number.isFinite(min) ? min : 0;
@@ -104,9 +105,9 @@ function getSliderTrackStyle(props, valuePercent) {
 	};
 	setSliderStyleValue(style, "--_rp-slider-color", getSliderColorValue(props.color));
 	applySliderThumbStyle(style, props.thumbStyle, {
-		size: "--_rp-slider-thumb-size",
+		size: "--rp-slider-thumb-size",
 		border: "--_rp-slider-thumb-border-style",
-		padding: "--_rp-slider-thumb-padding",
+		padding: "--rp-slider-thumb-padding",
 		borderColor: "--_rp-slider-thumb-border"
 	});
 	return style;
@@ -255,20 +256,20 @@ function useSlider(props, emitUpdate) {
 }
 //#endregion
 //#region src/components/slider/slider.vue?vue&type=script&setup=true&vapor=true&lang.ts
-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");
+var t0$2 = template("<span data-v-cf8192a8>");
+var t1$2 = template("<span data-v-cf8192a8 class=rp-slider__header>");
+var t2$2 = template("<span data-v-cf8192a8> ");
+var t3$2 = template("<span data-v-cf8192a8><span data-v-cf8192a8 class=rp-slider__mark-dot></span>");
+var t4$2 = template("<span data-v-cf8192a8 class=rp-slider__marks aria-hidden=true>");
+var t5$1 = template("<span data-v-cf8192a8><span data-v-cf8192a8 class=rp-slider__thumb-content>");
+var t6$1 = template("<span data-v-cf8192a8 class=rp-slider__tooltip-anchor aria-hidden=true>", 2);
+var t7$1 = template("<label data-v-cf8192a8><span data-v-cf8192a8><span data-v-cf8192a8></span><input data-v-cf8192a8>", 1);
+delegateEvents("pointerdown", "focusin", "focusout", "keydown");
 //#endregion
 //#region src/components/slider/slider.vue
 var slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
 	name: "RpSlider",
+	inheritAttrs: false,
 	__name: "slider",
 	props: {
 		id: {},
@@ -298,36 +299,72 @@ var slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		ariaLabel: {},
 		ariaValueText: {},
 		describedby: {},
-		labelledby: {}
+		labelledby: {},
+		inputAttrs: {},
+		classNames: {},
+		styles: {}
 	},
 	emits: ["update:modelValue"],
-	setup(__props, { emit: __emit, slots: $slots }) {
+	setup(__props, { expose: __expose, emit: __emit, slots: $slots }) {
 		const props = __props;
 		const emit = __emit;
+		const inputRef = ref(null);
+		const slots = useSlots();
 		const { control, nativeMin, nativeMax, nativeStep, rootClass, normalizedValue, valuePercent, formattedValue, ariaValueText, markItems, trackStyle, tooltipVisible, tooltipOpen, tooltipPlacement, tooltipId, tooltipColor, tooltipOffset, tooltipOpenDelay, tooltipArrow, tooltipContent, onInput, onTooltipPointerDown, onTooltipMouseEnter, onTooltipMouseLeave, onTooltipFocusIn, onTooltipFocusOut, onTooltipKeydown } = useSlider(props, (value) => {
 			emit("update:modelValue", value);
 		});
-		const n31 = t8$1();
-		const n30 = child(n31, 1);
-		const n11 = next(child(n30), 1);
-		renderEffect(() => {
-			setClass(n31, [unref(rootClass), { "rp-slider--custom-thumb": $slots.thumb }]);
-			setAttr(n31, "data-disabled", unref(control).disabled || void 0);
-			setStyle(n31, unref(trackStyle));
+		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
+		const rootAttrs = computed(() => getRootAttrs({
+			class: [rootClass.value, { "rp-slider--custom-thumb": Boolean(slots.thumb) }],
+			style: trackStyle.value,
+			"data-disabled": presence(control.disabled),
+			"data-orientation": props.orientation
+		}));
+		const tooltipClassNames = computed(() => ({ root: ["rp-slider__tooltip", props.classNames?.tooltip] }));
+		const tooltipStyles = computed(() => ({ root: props.styles?.tooltip }));
+		const nativeInputAttrs = computed(() => {
+			const { class: compatibilityClass, style: compatibilityStyle, onInput: compatibilityOnInput, ...attrs } = props.inputAttrs ?? {};
+			return {
+				...attrs,
+				...getPartAttrs("input", {
+					class: "rp-slider__native",
+					compatibilityClass,
+					compatibilityStyle
+				}),
+				onInput(event) {
+					onInput(event);
+					compatibilityOnInput?.(event);
+				}
+			};
+		});
+		function focus(options) {
+			inputRef.value?.focus(options);
+		}
+		__expose({
+			nativeElement: inputRef,
+			focus
 		});
-		setInsertionState(n31, 0, 0);
+		const _setTemplateRef = createTemplateRefSetter();
+		const n32 = t7$1();
+		const n31 = child(n32, 1);
+		const n11 = child(n31);
+		const n12 = next(n11, 1);
+		renderEffect(() => setDynamicProps(n32, [rootAttrs.value]));
+		setInsertionState(n32, 0, 0);
 		createIf(() => $slots.default || $slots.value, () => {
-			const n10 = t2$2();
+			const n10 = t1$2();
 			setInsertionState(n10, null, 0);
 			createIf(() => $slots.default, () => {
 				const n5 = t0$2();
+				renderEffect(() => setDynamicProps(n5, [unref(getPartAttrs)("label", { class: "rp-slider__label" })]));
 				setInsertionState(n5, null, 0);
 				createSlot("default", null, null, 1);
 				return n5;
 			});
 			setInsertionState(n10, null, 1);
 			createIf(() => $slots.value, () => {
-				const n9 = t1$2();
+				const n9 = t0$2();
+				renderEffect(() => setDynamicProps(n9, [unref(getPartAttrs)("value", { class: "rp-slider__value" }), { "aria-hidden": "true" }]));
 				setInsertionState(n9, null, 0);
 				createSlot("value", {
 					value: () => unref(normalizedValue),
@@ -338,61 +375,76 @@ var slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			});
 			return n10;
 		});
-		n11.$evtinput = createInvoker((e) => unref(onInput)(e));
+		_setTemplateRef(n12, inputRef, null, "inputRef");
 		renderEffect(() => {
+			const _getPartAttrs = unref(getPartAttrs);
 			const _control = unref(control);
-			setProp(n11, "id", _control.id);
-			setProp(n11, "name", __props.name);
-			setValue(n11, unref(normalizedValue));
-			setProp(n11, "min", unref(nativeMin));
-			setProp(n11, "max", unref(nativeMax));
-			setProp(n11, "step", unref(nativeStep));
-			setProp(n11, "orient", __props.orientation === "vertical" ? "vertical" : void 0);
-			setProp(n11, "disabled", _control.disabled || void 0);
-			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-valuetext", unref(ariaValueText));
+			setDynamicProps(n31, [_getPartAttrs("track", { class: "rp-slider__track" })]);
+			setDynamicProps(n11, [_getPartAttrs("range", { class: "rp-slider__bar" }), { "aria-hidden": "true" }]);
+			setDynamicProps(n12, [nativeInputAttrs.value, {
+				id: _control.id,
+				name: __props.name,
+				type: "range",
+				value: unref(normalizedValue),
+				min: unref(nativeMin),
+				max: unref(nativeMax),
+				step: unref(nativeStep),
+				orient: __props.orientation === "vertical" ? "vertical" : void 0,
+				disabled: _control.disabled || void 0,
+				"aria-label": __props.ariaLabel || void 0,
+				"aria-labelledby": _control.ariaLabelledby,
+				"aria-describedby": _control.ariaDescribedby,
+				"aria-orientation": __props.orientation === "vertical" ? "vertical" : void 0,
+				"aria-valuetext": unref(ariaValueText),
+				"data-disabled": unref(presence)(_control.disabled)
+			}]);
 		});
-		setInsertionState(n30, null, 2);
+		setInsertionState(n31, null, 2);
 		createIf(() => unref(markItems).length, () => {
-			const n20 = t5$1();
-			setInsertionState(n20, null, 0);
+			const n21 = t4$2();
+			setInsertionState(n21, null, 0);
 			createFor(() => unref(markItems), (_for_item0) => {
-				const n19 = t4$2();
+				const n20 = t3$2();
 				renderEffect(() => {
 					const _mark = _for_item0.value;
-					setClassName(n19, _mark.filled ? 1 : 0, " rp-slider__mark--filled", "rp-slider__mark");
-					setStyle(n19, _mark.style);
+					setDynamicProps(n20, [unref(getPartAttrs)("mark", {
+						class: ["rp-slider__mark", { "rp-slider__mark--filled": _mark.filled }],
+						style: _mark.style
+					}), { "data-filled": unref(presence)(_mark.filled) }]);
 				});
-				setInsertionState(n19, null, 1);
+				setInsertionState(n20, null, 1);
 				createIf(() => _for_item0.value.hasLabel, () => {
-					const n18 = t3$2();
-					const x18 = txt(n18);
-					renderEffect(() => setText(x18, toDisplayString(_for_item0.value.label)));
-					return n18;
+					const n19 = t2$2();
+					const x19 = txt(n19);
+					renderEffect(() => {
+						setDynamicProps(n19, [unref(getPartAttrs)("markLabel", { class: "rp-slider__mark-label" })]);
+						setText(x19, toDisplayString(_for_item0.value.label));
+					});
+					return n19;
 				});
-				return n19;
+				return n20;
 			}, (mark) => mark.key, 9);
-			return n20;
+			return n21;
 		});
-		setInsertionState(n30, null, 3);
+		setInsertionState(n31, null, 3);
 		createIf(() => $slots.thumb, () => {
-			const n25 = t6$1();
-			setInsertionState(child(n25), null, 0);
+			const n26 = t5$1();
+			const n25 = child(n26);
+			renderEffect(() => setDynamicProps(n26, [unref(getPartAttrs)("thumb", { class: "rp-slider__thumb" }), { "aria-hidden": "true" }]));
+			setInsertionState(n25, null, 0);
 			createSlot("thumb", {
 				value: () => unref(normalizedValue),
 				formattedValue: () => unref(formattedValue),
 				percent: () => unref(valuePercent)
 			}, null, 1);
-			return n25;
+			return n26;
 		});
-		setInsertionState(n30, null, 4);
+		setInsertionState(n31, null, 4);
 		createIf(() => unref(tooltipVisible), () => {
 			return createComponent(tooltip_default, {
 				id: () => unref(tooltipId),
-				class: "rp-slider__tooltip",
+				"class-names": () => tooltipClassNames.value,
+				styles: () => tooltipStyles.value,
 				content: () => unref(tooltipContent),
 				placement: () => unref(tooltipPlacement),
 				color: () => unref(tooltipColor),
@@ -402,18 +454,18 @@ var slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 				arrow: () => unref(tooltipArrow),
 				decorative: ""
 			}, () => {
-				return t7$1();
+				return t6$1();
 			});
 		});
-		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;
+		n31.$evtpointerdown = createInvoker((e) => unref(onTooltipPointerDown)(e));
+		on(n31, "mouseenter", (e) => unref(onTooltipMouseEnter)(e));
+		on(n31, "mouseleave", (e) => unref(onTooltipMouseLeave)(e));
+		n31.$evtfocusin = createInvoker((e) => unref(onTooltipFocusIn)(e));
+		n31.$evtfocusout = createInvoker((e) => unref(onTooltipFocusOut)(e));
+		n31.$evtkeydown = createInvoker((e) => unref(onTooltipKeydown)(e));
+		return n32;
 	}
-}), [["__scopeId", "data-v-b852f835"]]);
+}), [["__scopeId", "data-v-cf8192a8"]]);
 //#endregion
 //#region src/components/slider/useRangeSliderTooltipCollision.ts
 var TOOLTIP_COLLISION_GAP = 4;
@@ -605,11 +657,11 @@ function useRangeSliderTooltipCollision({ enabled, lower, orientation, placement
 }
 //#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 t0$1 = template("<span data-v-ce70c540 class=rp-range-slider__tooltip-merged-value> </span>");
+var t1$1 = template("<span data-v-ce70c540 class=rp-range-slider__tooltip-merged-value> ");
+var t2$1 = template("<span data-v-ce70c540 class=rp-range-slider__tooltip-merged-separator>–</span>", 2);
 var t3$1 = template(" ");
-var t4$1 = template("<span data-v-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);
+var t4$1 = template("<span data-v-ce70c540 aria-hidden=true><span data-v-ce70c540 data-thumb=lower><span data-v-ce70c540 class=rp-range-slider__tooltip-anchor></span><span data-v-ce70c540 class=rp-tooltip__content aria-hidden=true> </span></span><span data-v-ce70c540 data-thumb=upper><span data-v-ce70c540 class=rp-range-slider__tooltip-anchor></span><span data-v-ce70c540 class=rp-tooltip__content aria-hidden=true> </span></span><span data-v-ce70c540 data-thumb=merged><span data-v-ce70c540 class=rp-range-slider__tooltip-anchor></span><span data-v-ce70c540 class=rp-tooltip__content aria-hidden=true>", 1);
 //#endregion
 //#region src/components/slider/range-slider-tooltip.vue
 var range_slider_tooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -629,7 +681,21 @@ var range_slider_tooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_defau
 		open: { type: Boolean },
 		orientation: {},
 		placement: {},
-		valuePercent: {}
+		valuePercent: {},
+		tooltipClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		tooltipStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
 	},
 	emits: ["update:overlapping"],
 	setup(__props, { emit: __emit }) {
@@ -685,7 +751,7 @@ var range_slider_tooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_defau
 		applyVShow(n2, () => __props.open);
 		_setTemplateRef(n2, upperContentRef, null, "upperContentRef");
 		renderEffect(() => {
-			const _tooltipRootClass = tooltipRootClass.value;
+			const _tooltipStyle = __props.tooltipStyle;
 			const _resolvedIds = resolvedIds.value;
 			const _contentStyle = contentStyle.value;
 			const _content = __props.content;
@@ -699,26 +765,32 @@ var range_slider_tooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_defau
 			]);
 			setStyle(n16, layerStyle.value);
 			setClass(n1, [
-				_tooltipRootClass,
+				tooltipRootClass.value,
 				"rp-range-slider__tooltip",
-				"rp-range-slider__tooltip--lower"
+				"rp-range-slider__tooltip--lower",
+				__props.tooltipClass
 			]);
+			setStyle(n1, _tooltipStyle);
 			setProp(n0, "id", _resolvedIds[0]);
 			setStyle(n0, _contentStyle);
 			setText(x0, toDisplayString(_content[0]));
 			setClass(n3, [
-				_tooltipRootClass,
+				tooltipRootClass.value,
 				"rp-range-slider__tooltip",
-				"rp-range-slider__tooltip--upper"
+				"rp-range-slider__tooltip--upper",
+				__props.tooltipClass
 			]);
+			setStyle(n3, _tooltipStyle);
 			setProp(n2, "id", _resolvedIds[1]);
 			setStyle(n2, _contentStyle);
 			setText(x2, toDisplayString(_content[1]));
 			setClass(n15, [
-				_tooltipRootClass,
+				tooltipRootClass.value,
 				"rp-range-slider__tooltip",
-				"rp-range-slider__tooltip--merged"
+				"rp-range-slider__tooltip--merged",
+				__props.tooltipClass
 			]);
+			setStyle(n15, _tooltipStyle);
 			setProp(n14, "id", resolvedMergedId.value);
 			setStyle(n14, _contentStyle);
 		});
@@ -759,7 +831,7 @@ var range_slider_tooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_defau
 		_setTemplateRef(n16, tooltipLayerRef, null, "tooltipLayerRef");
 		return n16;
 	}
-}), [["__scopeId", "data-v-d17966e5"]]);
+}), [["__scopeId", "data-v-ce70c540"]]);
 //#endregion
 //#region src/components/slider/useRangeSliderPointer.ts
 function useRangeSliderPointer(options) {
@@ -1049,9 +1121,9 @@ function getRangeSliderTrackStyle(props, valuePercent) {
 	};
 	setSliderStyleValue(style, "--_rp-range-slider-color", getComponentColorValue(props.color));
 	applySliderThumbStyle(style, props.thumbStyle, {
-		size: "--_rp-range-slider-thumb-size",
+		size: "--rp-slider-thumb-size",
 		border: "--_rp-range-slider-thumb-border-style",
-		padding: "--_rp-range-slider-thumb-padding",
+		padding: "--rp-slider-thumb-padding",
 		borderColor: "--_rp-range-slider-thumb-border"
 	});
 	return style;
@@ -1307,20 +1379,20 @@ function useRangeSlider(props, emitUpdate) {
 }
 //#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");
+var t0 = template("<span data-v-c82ae6e8>");
+var t1 = template("<span data-v-c82ae6e8 class=rp-range-slider__header>");
+var t2 = template("<input data-v-c82ae6e8>");
+var t3 = template("<span data-v-c82ae6e8> ");
+var t4 = template("<span data-v-c82ae6e8><span data-v-c82ae6e8 class=rp-range-slider__mark-dot></span>");
+var t5 = template("<span data-v-c82ae6e8 class=rp-range-slider__marks aria-hidden=true>");
+var t6 = template("<span data-v-c82ae6e8><span data-v-c82ae6e8 class=rp-range-slider__thumb-content>");
+var t7 = template("<div data-v-c82ae6e8><span data-v-c82ae6e8><span data-v-c82ae6e8></span><!><span data-v-c82ae6e8 class=rp-range-slider__thumbs aria-hidden=true>", 1);
+delegateEvents("pointerdown");
 //#endregion
 //#region src/components/slider/range-slider.vue
 var range_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
 	name: "RpRangeSlider",
+	inheritAttrs: false,
 	__name: "range-slider",
 	props: {
 		modelValue: {},
@@ -1328,6 +1400,7 @@ var range_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		name: {},
 		ariaLabel: { default: () => ["Minimum", "Maximum"] },
 		ariaValueText: {},
+		inputAttrs: {},
 		id: {},
 		min: { default: 0 },
 		max: { default: 100 },
@@ -1351,54 +1424,107 @@ var range_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			default: void 0
 		},
 		describedby: {},
-		labelledby: {}
+		labelledby: {},
+		classNames: {},
+		styles: {}
 	},
 	emits: ["update:modelValue"],
-	setup(__props, { emit: __emit, slots: $slots }) {
+	setup(__props, { expose: __expose, emit: __emit, slots: $slots }) {
 		const props = __props;
 		const emit = __emit;
 		const slots = useSlots();
 		const generatedId = useId();
 		const tooltipsOverlapping = ref(false);
 		const rangeSliderThumbs = ["lower", "upper"];
+		const lowerInputRef = ref(null);
+		const upperInputRef = ref(null);
 		const labelId = computed(() => `${props.id ?? generatedId}-label`);
 		const { control, nativeMin, nativeMax, nativeStep, nativeNames, nativeIds, rootClass, normalizedValue, valuePercent, formattedValue, ariaLabels, ariaValueText, markItems, trackStyle, activeThumb, tooltipVisible, tooltipOpen, tooltipPlacement, tooltipIds, mergedTooltipId, tooltipColor, tooltipOffset, tooltipArrow, tooltipContent, mergedTooltipContent, onInput, onTrackPointerDown, onTooltipFocus, onTooltipBlur, onTooltipTrackMouseEnter, onTooltipTrackMouseLeave, onTooltipKeydown } = useRangeSlider(props, (value) => {
 			emit("update:modelValue", value);
 		});
+		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
+		const rootAttrs = computed(() => getRootAttrs({
+			class: [rootClass.value, {
+				"rp-range-slider--custom-thumb": Boolean(slots.thumb),
+				"rp-range-slider--tooltips-overlapping": tooltipsOverlapping.value
+			}],
+			style: trackStyle.value,
+			role: "group",
+			"data-active-thumb": activeThumb.value || void 0,
+			"data-disabled": presence(control.disabled),
+			"data-orientation": props.orientation,
+			"aria-labelledby": groupLabelledby.value,
+			"aria-describedby": control.ariaDescribedby
+		}));
+		const inputAttrsByThumb = computed(() => {
+			if (Array.isArray(props.inputAttrs)) return props.inputAttrs;
+			return [props.inputAttrs, props.inputAttrs];
+		});
+		const nativeInputAttrs = computed(() => rangeSliderThumbs.map((thumb, index) => {
+			const { class: compatibilityClass, style: compatibilityStyle, onInput: compatibilityOnInput, onFocus: compatibilityOnFocus, onBlur: compatibilityOnBlur, onKeydown: compatibilityOnKeydown, ...attrs } = inputAttrsByThumb.value[index] ?? {};
+			return Object.assign({}, attrs, {
+				...getPartAttrs("input", {
+					class: ["rp-range-slider__native", `rp-range-slider__native--${thumb}`],
+					compatibilityClass,
+					compatibilityStyle
+				}),
+				onInput(event) {
+					onInput(thumb, event);
+					compatibilityOnInput?.(event);
+				},
+				onFocus(event) {
+					onTooltipFocus(thumb);
+					compatibilityOnFocus?.(event);
+				},
+				onBlur(event) {
+					onTooltipBlur(thumb);
+					compatibilityOnBlur?.(event);
+				},
+				onKeydown(event) {
+					onTooltipKeydown(thumb, event);
+					compatibilityOnKeydown?.(event);
+				}
+			});
+		}));
+		const nativeElements = computed(() => [lowerInputRef.value, upperInputRef.value]);
+		function setInputRef(index, element) {
+			const input = element instanceof HTMLInputElement ? element : null;
+			if (index === 0) lowerInputRef.value = input;
+			else upperInputRef.value = input;
+		}
+		function focus(options) {
+			lowerInputRef.value?.focus(options);
+		}
 		const groupLabelledby = computed(() => {
 			const values = [control.ariaLabelledby, slots.default ? labelId.value : void 0].flatMap((value) => value?.split(/\s+/) ?? []).filter(Boolean);
 			return values.length ? Array.from(new Set(values)).join(" ") : void 0;
 		});
-		const 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);
+		__expose({
+			nativeElements,
+			focus
 		});
-		setInsertionState(n34, 0, 0);
+		const _setTemplateRef = createTemplateRefSetter();
+		const n35 = t7();
+		const n34 = child(n35, 1);
+		const n11 = child(n34);
+		const n33 = next(n11, 1);
+		const n32 = next(n33, 3);
+		renderEffect(() => setDynamicProps(n35, [rootAttrs.value]));
+		setInsertionState(n35, 0, 0);
 		createIf(() => $slots.default || $slots.value, () => {
-			const n10 = t2();
+			const n10 = t1();
 			setInsertionState(n10, null, 0);
 			createIf(() => $slots.default, () => {
 				const n5 = t0();
-				renderEffect(() => setProp(n5, "id", labelId.value));
+				renderEffect(() => setDynamicProps(n5, [{ id: labelId.value }, unref(getPartAttrs)("label", { class: "rp-range-slider__label" })]));
 				setInsertionState(n5, null, 0);
 				createSlot("default", null, null, 1);
 				return n5;
 			});
 			setInsertionState(n10, null, 1);
 			createIf(() => $slots.value, () => {
-				const n9 = t1();
+				const n9 = t0();
+				renderEffect(() => setDynamicProps(n9, [unref(getPartAttrs)("value", { class: "rp-range-slider__value" }), { "aria-hidden": "true" }]));
 				setInsertionState(n9, null, 0);
 				createSlot("value", {
 					value: () => unref(normalizedValue),
@@ -1409,61 +1535,77 @@ var range_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			});
 			return n10;
 		});
-		setInsertionState(n33, n32, 1);
+		renderEffect(() => {
+			const _getPartAttrs = unref(getPartAttrs);
+			setDynamicProps(n34, [_getPartAttrs("track", { class: "rp-range-slider__track" })]);
+			setDynamicProps(n11, [_getPartAttrs("range", { class: "rp-range-slider__bar" }), { "aria-hidden": "true" }]);
+		});
+		setInsertionState(n34, n33, 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;
+			const n14 = t2();
 			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]);
+				const _index = _for_key0.value;
+				const _control = unref(control);
+				setDynamicProps(n14, [nativeInputAttrs.value[_index], {
+					id: unref(nativeIds)[_index],
+					name: unref(nativeNames)[_index],
+					type: "range",
+					value: unref(normalizedValue)[_index],
+					min: unref(nativeMin)[_index],
+					max: unref(nativeMax)[_index],
+					step: unref(nativeStep),
+					orient: __props.orientation === "vertical" ? "vertical" : void 0,
+					disabled: _control.disabled || void 0,
+					"aria-label": unref(ariaLabels)[_index],
+					"aria-describedby": _control.ariaDescribedby,
+					"aria-orientation": __props.orientation === "vertical" ? "vertical" : void 0,
+					"aria-valuetext": unref(ariaValueText)[_index],
+					"data-thumb": _for_item0.value,
+					"data-disabled": unref(presence)(_control.disabled)
+				}]);
+				_setTemplateRef(n14, (element) => setInputRef(_index, element), true);
 			});
-			setClass(n13, ["rp-range-slider__native", `rp-range-slider__native--${_for_item0.value}`]);
-			return n13;
+			return n14;
 		}, (thumb, index) => thumb, 8);
-		setInsertionState(n33, n32, 2);
+		setInsertionState(n34, n33, 2);
 		createIf(() => unref(markItems).length, () => {
-			const n22 = t6();
-			setInsertionState(n22, null, 0);
+			const n23 = t5();
+			setInsertionState(n23, null, 0);
 			createFor(() => unref(markItems), (_for_item0) => {
-				const n21 = t5();
+				const n22 = t4();
 				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);
+					setDynamicProps(n22, [unref(getPartAttrs)("mark", {
+						class: ["rp-range-slider__mark", { "rp-range-slider__mark--filled": _mark.filled }],
+						style: _mark.style
+					}), { "data-filled": unref(presence)(_mark.filled) }]);
 				});
-				setInsertionState(n21, null, 1);
+				setInsertionState(n22, null, 1);
 				createIf(() => _for_item0.value.hasLabel, () => {
-					const n20 = t4();
-					const x20 = txt(n20);
-					renderEffect(() => setText(x20, toDisplayString(_for_item0.value.label)));
-					return n20;
+					const n21 = t3();
+					const x21 = txt(n21);
+					renderEffect(() => {
+						setDynamicProps(n21, [unref(getPartAttrs)("markLabel", { class: "rp-range-slider__mark-label" })]);
+						setText(x21, toDisplayString(_for_item0.value.label));
+					});
+					return n21;
 				});
-				return n21;
+				return n22;
 			}, (mark) => mark.key, 9);
-			return n22;
+			return n23;
 		});
-		setInsertionState(n31, null, 0);
+		setInsertionState(n32, 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);
+			const n28 = t6();
+			const n27 = child(n28);
+			renderEffect(() => {
+				const _thumb = _for_item0.value;
+				setDynamicProps(n28, [unref(getPartAttrs)("thumb", { class: ["rp-range-slider__thumb", `rp-range-slider__thumb--${_thumb}`] }), {
+					"data-range-slider-thumb": _thumb,
+					"data-thumb": _thumb
+				}]);
+			});
+			setInsertionState(n27, null, 0);
 			createSlot("thumb", {
 				thumb: () => _for_item0.value,
 				index: () => _for_key0.value,
@@ -1471,10 +1613,9 @@ var range_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				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;
+			return n28;
 		}, (thumb, index) => thumb, 8);
-		setInsertionState(n31, null, 1);
+		setInsertionState(n32, null, 1);
 		createIf(() => unref(tooltipVisible), () => {
 			const _on_update_overlapping = ($event) => tooltipsOverlapping.value = $event;
 			return createComponent(range_slider_tooltip_default, {
@@ -1489,17 +1630,43 @@ var range_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				orientation: () => __props.orientation,
 				placement: () => unref(tooltipPlacement),
 				"value-percent": () => unref(valuePercent),
+				"tooltip-class": () => __props.classNames?.tooltip,
+				"tooltip-style": () => __props.styles?.tooltip,
 				"onUpdate:overlapping": () => _on_update_overlapping
 			});
 		});
-		n33.$evtpointerdown = createInvoker((e) => unref(onTrackPointerDown)(e));
-		on(n33, "mouseenter", (e) => unref(onTooltipTrackMouseEnter)(e));
-		on(n33, "mouseleave", (e) => unref(onTooltipTrackMouseLeave)(e));
-		return n34;
+		n34.$evtpointerdown = createInvoker((e) => unref(onTrackPointerDown)(e));
+		on(n34, "mouseenter", (e) => unref(onTooltipTrackMouseEnter)(e));
+		on(n34, "mouseleave", (e) => unref(onTooltipTrackMouseLeave)(e));
+		return n35;
 	}
-}), [["__scopeId", "data-v-8dd81f55"]]);
+}), [["__scopeId", "data-v-c82ae6e8"]]);
 //#endregion
 //#region src/components/slider/types.ts
+var sliderParts = [
+	"root",
+	"label",
+	"value",
+	"track",
+	"range",
+	"input",
+	"thumb",
+	"mark",
+	"markLabel",
+	"tooltip"
+];
+var rangeSliderParts = [
+	"root",
+	"label",
+	"value",
+	"track",
+	"range",
+	"input",
+	"thumb",
+	"mark",
+	"markLabel",
+	"tooltip"
+];
 var sliderColors = componentColors;
 var sliderSizes = [
 	"xs",
@@ -1510,4 +1677,4 @@ var sliderSizes = [
 ];
 var sliderOrientations = ["horizontal", "vertical"];
 //#endregion
-export { slider_default as a, range_slider_default as i, sliderOrientations as n, sliderSizes as r, sliderColors as t };
+export { sliderSizes as a, sliderParts as i, sliderColors as n, range_slider_default as o, sliderOrientations as r, slider_default as s, rangeSliderParts as t };