@bridge-ui/vue 0.0.8 → 0.0.9

package/dist/Components/Skeleton/composables/useSkeleton.js

@@ -19,11 +19,14 @@ function d(d, f) {
 	}), _ = n({
 		entry: g,
 		props: () => m.value.componentProps
-	}), v = r(() => c(o(l, g.value?.tokens?.rounded), h.value.rounded));
+	}), v = r(() => {
+		let e = o(l, g.value?.tokens?.rounded);
+		return c(e, h.value.rounded);
+	});
 	return {
 		merged: h,
 		rootBind: r(() => e({}, m.value.inheritedAttrs, a({
-			"block animate-pulse bg-gray-200 dark:bg-gray-700": !0,
+			"block animate-pulse bg-dark-200 dark:bg-dark-700": !0,
 			[v.value ?? ""]: !0,
 			[_.value.root ?? ""]: !0
 		})))

package/dist/Components/Slider/Slider.vue_vue_type_script_setup_true_lang.js

@@ -5,10 +5,10 @@ import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o
 import { resolveSliderBounds as S, resolveSliderDefaultValue as C } from "@bridge-ui/core";
 import { isUndefined as w } from "es-toolkit/compat";
 //#region src/Components/Slider/Slider.vue?vue&type=script&setup=true&lang.ts
-var T = /* @__PURE__ */ l({
+var T = /*@__PURE__*/ l({
 	inheritAttrs: !1,
 	__name: "Slider",
-	props: /* @__PURE__ */ d({
+	props: /*@__PURE__*/ d({
 		classes: {},
 		color: {},
 		customProps: {},
@@ -39,7 +39,7 @@ var T = /* @__PURE__ */ l({
 		modelValue: { default: void 0 },
 		modelModifiers: {}
 	}),
-	emits: /* @__PURE__ */ d(["change", "update:modelValue"], ["update:modelValue"]),
+	emits: /*@__PURE__*/ d(["change", "update:modelValue"], ["update:modelValue"]),
 	setup(l, { emit: d }) {
 		let T = d, E = l, D = b(l, "modelValue"), O = {
 			min: 0,
@@ -65,27 +65,27 @@ var T = /* @__PURE__ */ l({
 				D.value = e, A.value = e;
 			},
 			get: () => w(D.value) ? A.value : D.value
-		}), M = h([null, null]), { barBind: N, trackRef: P, baseField: F, trackBind: I, controlBind: L, getStopBind: R, thumbIndexes: z, tooltipProps: B, getThumbBind: V, resolvedStops: H, isTooltipOpen: U, readThumbValue: W, getStopLabelBind: G, getThumbKnobBind: K, showTooltip: q } = t(() => E, O, j, { onChange: (e) => {
+		}), M = h([null, null]), { barBind: N, trackRef: P, baseField: F, trackBind: I, controlBind: L, getStopBind: R, thumbIndexes: z, tooltipProps: B, getThumbBind: V, resolvedStops: H, isTooltipOpen: U, hasStopLabels: W, readThumbValue: G, stopLabelsBind: K, getStopLabelBind: q, getThumbKnobBind: J, showTooltip: Y } = t(() => E, O, j, { onChange: (e) => {
 			T("change", e);
 		} });
-		function J(e) {
+		function X(e) {
 			P.value = e instanceof HTMLDivElement ? e : e?.$el ?? null;
 		}
-		function Y(e, t) {
+		function Z(e, t) {
 			let n = t instanceof HTMLButtonElement ? t : t?.$el ?? null;
 			M.value[e] = n;
 		}
 		return (t, i) => (m(), a(e, { field: y(F) }, {
 			default: x(() => [c("div", p(u(y(L))), [
-				c("div", f({ ref: J }, y(I)), [
+				c("div", f({ ref: X }, y(I)), [
 					c("div", p(u(y(N))), null, 16),
 					(m(!0), s(r, null, g(y(H), (e) => (m(), s("div", f({ key: `stop-${e.value}` }, { ref_for: !0 }, y(R)(e)), null, 16))), 128)),
 					(m(!0), s(r, null, g(y(z), (e) => (m(), s("button", f({ key: e }, { ref_for: !0 }, y(V)(e), {
 						ref_for: !0,
-						ref: (t) => Y(e, t)
-					}), [_(t.$slots, "thumb", {}, () => [c("span", f({ ref_for: !0 }, y(K)(e)), null, 16)])], 16))), 128))
+						ref: (t) => Z(e, t)
+					}), [_(t.$slots, "thumb", {}, () => [c("span", f({ ref_for: !0 }, y(J)(e)), null, 16)])], 16))), 128))
 				], 16),
-				y(q) ? (m(!0), s(r, { key: 0 }, g(y(z), (e) => (m(), a(y(n), f({
+				y(Y) ? (m(!0), s(r, { key: 0 }, g(y(z), (e) => (m(), a(y(n), f({
 					arrow: "",
 					size: "sm",
 					"open-delay": 0,
@@ -94,16 +94,16 @@ var T = /* @__PURE__ */ l({
 					key: `tooltip-${e}`,
 					"anchor-el": M.value[e],
 					"model-value": y(U)(e),
-					content: String(y(W)(e))
+					content: String(y(G)(e))
 				}, { ref_for: !0 }, y(B)), null, 16, [
 					"anchor-el",
 					"model-value",
 					"content"
 				]))), 128)) : o("", !0),
-				(m(!0), s(r, null, g(y(H), (e) => (m(), s(r, { key: `label-${e.value}` }, [e.label ? (m(), s("div", f({
+				y(W) ? (m(), s("div", p(f({ key: 1 }, y(K))), [(m(!0), s(r, null, g(y(H), (e) => (m(), s(r, { key: `label-${e.value}` }, [e.label ? (m(), s("div", f({
 					key: 0,
 					ref_for: !0
-				}, y(G)(e)), v(e.label), 17)) : o("", !0)], 64))), 128))
+				}, y(q)(e)), v(e.label), 17)) : o("", !0)], 64))), 128))], 16)) : o("", !0)
 			], 16)]),
 			_: 3
 		}, 8, ["field"]));

package/dist/Components/Slider/composables/useSlider.d.ts

@@ -466,8 +466,11 @@ export declare function useSlider(props: MaybeRefOrGetter<SliderOwnProps>, libDe
     resolvedStops: import('vue').ComputedRef<SliderStop[]>;
     resolvedValue: import('vue').ComputedRef<number | SliderRangeValue>;
     isTooltipOpen: (thumbIndex: 0 | 1) => boolean;
-    getStopLabelBind: (stop: SliderStop) => import('@bridge-ui/core').MergePartBind<object, "class", Omit<import('vue').HTMLAttributes, "style">, {
+    hasStopLabels: import('vue').ComputedRef<boolean>;
+    stopLabelsBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
         "aria-hidden": boolean;
+    }>>;
+    getStopLabelBind: (stop: SliderStop) => import('@bridge-ui/core').MergePartBind<object, "class", Omit<import('vue').HTMLAttributes, "style">, {
         style: {
             insetInlineStart: string;
         };

package/dist/Components/Slider/composables/useSlider.js

@@ -4,9 +4,9 @@ import { baseFieldBridgeKeys as i, useBaseField as a } from "../../BaseField/com
 import { computed as o, ref as s, toValue as ee, useAttrs as te, watch as ne } from "vue";
 import { cn as c, getSliderBarGeometry as re, getSliderPointerClientX as l, isSliderStopCovered as ie, mergeBridgeUILayeredClasses as u, normalizeSliderStops as ae, percentFromSliderPointer as d, percentToValue as f, pickClosestSliderThumb as oe, resolveSliderBounds as se, snapSliderValue as p, sortSliderRangeValue as ce, splitComponentProps as le, stepSliderValue as m, valueToPercent as h, writeSliderRangeThumb as g } from "@bridge-ui/core";
 import { get as _, omit as v, pick as y } from "es-toolkit/compat";
-import { colorProps as ue, invalidatedProps as de, roundedProps as fe, sizeProps as b } from "@bridge-ui/core/Tokens/Slider";
+import { colorProps as ue, invalidatedProps as de, roundedProps as fe, sizeProps as pe } from "@bridge-ui/core/Tokens/Slider";
 //#region src/Components/Slider/composables/useSlider.ts
-var x = [
+var b = [
 	"max",
 	"min",
 	"step",
@@ -17,7 +17,7 @@ var x = [
 	"showStops",
 	"showTooltip",
 	"defaultValue"
-], pe = [...i, ...x];
+], x = [...i, ...b];
 function S(e, t, n) {
 	return n && Array.isArray(e) ? e[t] : Array.isArray(e) ? e[0] : e;
 }
@@ -27,82 +27,91 @@ function C(e, t, n, r) {
 		value: n
 	} : g(e, t, n);
 }
-function w(g, w, T, E = {}) {
-	let me = te(), he = e(), D = s(null), O = s(null), k = s(null), A = s(null), j = o(() => le({
-		bridgeKeys: pe,
+function w(g, w, T, me = {}) {
+	let he = te(), ge = e(), E = s(null), D = s(null), O = s(null), k = s(null), A = o(() => le({
+		bridgeKeys: x,
 		props: {
-			...me,
+			...he,
 			...ee(g)
 		}
-	})), M = a(o(() => y(j.value.componentProps, i)), {
+	})), _e = o(() => y(A.value.componentProps, i)), j = a(_e, {
 		error: !1,
 		hideErrorMessage: !1,
 		size: w.size ?? "md"
 	}, {
 		componentName: "Slider",
 		labelHtmlFor: (e) => `${e}-thumb-0`
-	}), { merged: N, entry: P } = n({
+	}), { merged: M, entry: N } = n({
 		libDefaults: w,
 		componentName: "Slider",
 		props: () => ({
-			...y(j.value.componentProps, x),
-			size: M.merged.value.size,
-			classes: j.value.componentProps.classes,
-			customProps: j.value.componentProps.customProps
+			...y(A.value.componentProps, b),
+			size: j.merged.value.size,
+			classes: A.value.componentProps.classes,
+			customProps: A.value.componentProps.customProps
 		})
-	}), F = o(() => N.value.customProps), I = r({
-		entry: P,
-		props: () => j.value.componentProps
-	}), L = o(() => se({
-		min: N.value.min,
-		max: N.value.max,
-		step: N.value.step
-	})), R = o(() => !!N.value.range), z = o(() => N.value.showTooltip !== !1), B = o(() => he?.global.value.direction === "rtl"), { controlId: V, isDisabled: H, isReadonly: U, invalidated: W, ariaDescribedBy: ge } = M, G = o(() => {
-		let e = T.value, t = L.value;
-		if (R.value) {
+	}), P = o(() => M.value.customProps), F = r({
+		entry: N,
+		props: () => A.value.componentProps
+	}), I = o(() => se({
+		min: M.value.min,
+		max: M.value.max,
+		step: M.value.step
+	})), L = o(() => !!M.value.range), R = o(() => M.value.showTooltip !== !1), z = o(() => ge?.global.value.direction === "rtl"), { controlId: B, isDisabled: V, isReadonly: H, invalidated: U, ariaDescribedBy: ve } = j, W = o(() => {
+		let e = T.value, t = I.value;
+		if (L.value) {
 			if (Array.isArray(e)) return ce(p(e[0], t.min, t.max, t.step), p(e[1], t.min, t.max, t.step));
 			let n = p(typeof e == "number" ? e : t.min, t.min, t.max, t.step);
 			return [n, n];
 		}
 		return p(Array.isArray(e) ? e[0] : typeof e == "number" ? e : t.min, t.min, t.max, t.step);
-	}), K = o(() => ae({
-		min: L.value.min,
-		max: L.value.max,
-		step: L.value.step,
-		stops: N.value.stops,
-		showStops: N.value.showStops
-	})), q = o(() => re({
-		range: R.value,
-		min: L.value.min,
-		max: L.value.max,
-		value: G.value
-	})), _e = o(() => _(u(ue, P.value?.tokens?.color), N.value.color ?? "primary")), J = o(() => u(de, P.value?.tokens?.invalidated, N.value.customProps?.invalidated)), Y = o(() => W.value ? J.value : _e.value), X = o(() => _(u(b, P.value?.tokens?.size), N.value.size ?? "md")), Z = o(() => _(u(fe, P.value?.tokens?.rounded), N.value.rounded ?? "full")), ve = o(() => K.value.some((e) => !!e.label)), Q = (e) => {
-		T.value = e, E.onChange?.(e);
-	}, ye = (e) => {
-		D.value &&= { thumbIndex: e }, O.value !== null && (O.value = e);
-	}, be = (e, t) => {
-		if (H.value || U.value) return;
-		let n = L.value, r = f(t, n.min, n.max, n.step), i = C(G.value, e, r, R.value);
-		i.thumbIndex !== e && ye(i.thumbIndex), Q(i.value);
-	}, $ = (e, t) => {
-		H.value || U.value || (e.preventDefault(), D.value = { thumbIndex: t }, O.value = t);
+	}), G = o(() => ae({
+		min: I.value.min,
+		max: I.value.max,
+		step: I.value.step,
+		stops: M.value.stops,
+		showStops: M.value.showStops
+	})), K = o(() => re({
+		range: L.value,
+		min: I.value.min,
+		max: I.value.max,
+		value: W.value
+	})), ye = o(() => {
+		let e = u(ue, N.value?.tokens?.color);
+		return _(e, M.value.color ?? "primary");
+	}), q = o(() => u(de, N.value?.tokens?.invalidated, M.value.customProps?.invalidated)), J = o(() => U.value ? q.value : ye.value), Y = o(() => {
+		let e = u(pe, N.value?.tokens?.size);
+		return _(e, M.value.size ?? "md");
+	}), X = o(() => {
+		let e = u(fe, N.value?.tokens?.rounded);
+		return _(e, M.value.rounded ?? "full");
+	}), be = o(() => G.value.some((e) => !!e.label)), Z = (e) => {
+		T.value = e, me.onChange?.(e);
 	}, xe = (e) => {
-		if (H.value || U.value || e.target.closest("[data-bridge-slider-thumb]")) return;
-		let t = A.value?.getBoundingClientRect();
+		E.value &&= { thumbIndex: e }, D.value !== null && (D.value = e);
+	}, Se = (e, t) => {
+		if (V.value || H.value) return;
+		let n = I.value, r = f(t, n.min, n.max, n.step), i = C(W.value, e, r, L.value);
+		i.thumbIndex !== e && xe(i.thumbIndex), Z(i.value);
+	}, Q = (e, t) => {
+		V.value || H.value || (e.preventDefault(), E.value = { thumbIndex: t }, D.value = t);
+	}, Ce = (e) => {
+		if (V.value || H.value || e.target.closest("[data-bridge-slider-thumb]")) return;
+		let t = k.value?.getBoundingClientRect();
 		if (!t) return;
 		let n = d({
 			rect: t,
-			isRtl: B.value,
+			isRtl: z.value,
 			clientX: l(e)
-		}), r = L.value, i = f(n, r.min, r.max, r.step), a = 0, o = G.value;
-		R.value && Array.isArray(o) && (a = oe(i, o[0], o[1]));
-		let s = C(o, a, i, R.value);
-		Q(s.value), $(e, s.thumbIndex);
-	}, Se = (e) => (t) => {
-		$(t, e);
-	}, Ce = (e) => (t) => {
-		if (H.value || U.value) return;
-		let n = L.value, r = S(G.value, e, R.value), i = null, a = B.value;
+		}), r = I.value, i = f(n, r.min, r.max, r.step), a = 0, o = W.value;
+		L.value && Array.isArray(o) && (a = oe(i, o[0], o[1]));
+		let s = C(o, a, i, L.value);
+		Z(s.value), Q(e, s.thumbIndex);
+	}, we = (e) => (t) => {
+		Q(t, e);
+	}, Te = (e) => (t) => {
+		if (V.value || H.value) return;
+		let n = I.value, r = S(W.value, e, L.value), i = null, a = z.value;
 		switch (t.key) {
 			case "ArrowRight":
 				i = m(r, a ? -1 : 1, n.min, n.max, n.step);
@@ -125,163 +134,159 @@ function w(g, w, T, E = {}) {
 			case "PageUp":
 				i = m(r, 1, n.min, n.max, n.step * 10);
 				break;
-			case "PageDown":
-				i = m(r, -1, n.min, n.max, n.step * 10);
-				break;
-			default: break;
+			case "PageDown": i = m(r, -1, n.min, n.max, n.step * 10);
 		}
 		if (i === null) return;
 		t.preventDefault();
-		let o = C(G.value, e, i, R.value);
-		Q(o.value), o.thumbIndex !== e && document.getElementById(`${V.value}-thumb-${o.thumbIndex}`)?.focus();
+		let o = C(W.value, e, i, L.value);
+		Z(o.value), o.thumbIndex !== e && document.getElementById(`${B.value}-thumb-${o.thumbIndex}`)?.focus();
 	};
-	ne(O, (e, t, n) => {
+	ne(D, (e, t, n) => {
 		if (e === null) return;
 		let r = (e) => {
-			let t = A.value?.getBoundingClientRect();
-			if (!t || D.value === null) return;
+			let t = k.value?.getBoundingClientRect();
+			if (!t || E.value === null) return;
 			let n = d({
 				rect: t,
-				isRtl: B.value,
+				isRtl: z.value,
 				clientX: l(e)
 			});
-			be(D.value.thumbIndex, n);
+			Se(E.value.thumbIndex, n);
 		}, i = () => {
-			D.value = null, O.value = null;
+			E.value = null, D.value = null;
 		};
 		window.addEventListener("pointermove", r), window.addEventListener("pointerup", i), window.addEventListener("pointercancel", i), n(() => {
 			window.removeEventListener("pointermove", r), window.removeEventListener("pointerup", i), window.removeEventListener("pointercancel", i);
 		});
 	});
-	let we = o(() => t({}, {}, c({
-		"relative w-full min-w-0 flex-1": !0,
-		"mb-6": ve.value
-	}))), Te = o(() => t({
-		...v(F.value?.track ?? {}, ["style"]),
-		onPointerdown: xe
+	let Ee = o(() => t({}, {}, c("relative w-full min-w-0 flex-1"))), $ = o(() => t({
+		...v(P.value?.track ?? {}, ["style"]),
+		onPointerdown: Ce
 	}, {}, c({
 		"relative w-full select-none touch-none": !0,
-		"cursor-pointer": !H.value && !U.value,
-		"cursor-not-allowed": H.value,
-		[X.value?.track ?? ""]: !0,
-		[Z.value ?? ""]: !0,
+		"cursor-pointer": !V.value && !H.value,
+		"cursor-not-allowed": V.value,
 		[Y.value?.track ?? ""]: !0,
-		[I.value.track ?? ""]: !0
-	})));
-	return {
-		bounds: L,
-		merged: N,
-		barBind: o(() => t(v(F.value?.bar ?? {}, ["style"]), {
+		[X.value ?? ""]: !0,
+		[J.value?.track ?? ""]: !0,
+		[F.value.track ?? ""]: !0
+	}))), De = o(() => t(v(P.value?.bar ?? {}, ["style"]), {
+		"aria-hidden": !0,
+		style: {
+			width: K.value.width,
+			insetInlineStart: K.value.start
+		}
+	}, c({
+		"absolute top-0 h-full": !0,
+		[X.value ?? ""]: !0,
+		[J.value?.bar ?? ""]: !0,
+		[F.value.bar ?? ""]: !0
+	}))), Oe = (e) => {
+		let n = S(W.value, e, L.value), r = h(n, I.value.min, I.value.max), i = D.value === e;
+		return t({
+			...v(P.value?.thumb ?? {}, ["style"]),
+			role: "slider",
+			type: "button",
+			"aria-valuenow": n,
+			"aria-valuemin": I.value.min,
+			"aria-valuemax": I.value.max,
+			tabIndex: V.value ? -1 : 0,
+			"data-bridge-slider-thumb": e,
+			disabled: V.value || void 0,
+			"aria-orientation": "horizontal",
+			"aria-describedby": ve.value,
+			onKeydown: Te(e),
+			id: `${B.value}-thumb-${e}`,
+			"aria-disabled": V.value || void 0,
+			"aria-readonly": H.value || void 0,
+			"aria-invalid": U.value || void 0,
+			onPointerdown: we(e),
+			style: { insetInlineStart: `${r}%` },
+			onFocus: () => {
+				O.value = e;
+			},
+			onPointerenter: () => {
+				O.value = e;
+			},
+			onBlur: () => {
+				D.value !== e && (O.value = O.value === e ? null : O.value);
+			},
+			onPointerleave: () => {
+				D.value !== e && (O.value = O.value === e ? null : O.value);
+			},
+			"aria-label": P.value?.thumb?.["aria-label"] ?? (L.value ? e === 0 ? "Minimum" : "Maximum" : j.merged.value.label || "Slider")
+		}, {}, c({
+			"group/thumb absolute z-10 flex -translate-x-1/2 items-center justify-center bg-transparent leading-none outline-none": !0,
+			"cursor-grab": !V.value && !H.value,
+			"cursor-grabbing": i,
+			"cursor-not-allowed": V.value,
+			[Y.value?.thumb ?? ""]: !0,
+			[F.value.thumb ?? ""]: !0
+		}));
+	}, ke = (e) => {
+		let n = D.value === e;
+		return t(P.value?.thumbKnob, { "aria-hidden": !0 }, c({
+			"block rounded-full border-2 shadow-sm transition-transform duration-100": !0,
+			"group-focus-visible/thumb:ring-2 group-focus-visible/thumb:ring-offset-2": !0,
+			"scale-120": n,
+			[J.value?.focus ?? ""]: !0,
+			[Y.value?.thumbKnob ?? ""]: !0,
+			[J.value?.thumb ?? ""]: !0,
+			[F.value.thumbKnob ?? ""]: !0
+		}));
+	}, Ae = (e) => {
+		let n = h(e.value, I.value.min, I.value.max), r = ie({
+			range: L.value,
+			min: I.value.min,
+			max: I.value.max,
+			stopValue: e.value,
+			value: W.value
+		});
+		return t(v(P.value?.stop ?? {}, ["style"]), {
 			"aria-hidden": !0,
 			style: {
-				width: q.value.width,
-				insetInlineStart: q.value.start
+				insetInlineStart: `${n}%`,
+				display: r ? "none" : void 0
 			}
 		}, c({
-			"absolute top-0 h-full": !0,
-			[Z.value ?? ""]: !0,
-			[Y.value?.bar ?? ""]: !0,
-			[I.value.bar ?? ""]: !0
-		}))),
-		isRange: R,
-		trackRef: A,
-		baseField: M,
-		trackBind: Te,
-		controlBind: we,
-		showTooltip: z,
-		getStopBind: (e) => {
-			let n = h(e.value, L.value.min, L.value.max), r = ie({
-				range: R.value,
-				min: L.value.min,
-				max: L.value.max,
-				stopValue: e.value,
-				value: G.value
-			});
-			return t(v(F.value?.stop ?? {}, ["style"]), {
-				"aria-hidden": !0,
-				style: {
-					insetInlineStart: `${n}%`,
-					display: r ? "none" : void 0
-				}
-			}, c({
-				"absolute top-1/2 h-2 w-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white dark:bg-gray-400": !0,
-				[I.value.stop ?? ""]: !0
-			}));
-		},
-		thumbIndexes: o(() => R.value ? [0, 1] : [0]),
-		getThumbBind: (e) => {
-			let n = S(G.value, e, R.value), r = h(n, L.value.min, L.value.max), i = O.value === e;
-			return t({
-				...v(F.value?.thumb ?? {}, ["style"]),
-				role: "slider",
-				type: "button",
-				"aria-valuenow": n,
-				"aria-valuemin": L.value.min,
-				"aria-valuemax": L.value.max,
-				tabIndex: H.value ? -1 : 0,
-				"data-bridge-slider-thumb": e,
-				disabled: H.value || void 0,
-				"aria-orientation": "horizontal",
-				"aria-describedby": ge.value,
-				onKeydown: Ce(e),
-				id: `${V.value}-thumb-${e}`,
-				"aria-disabled": H.value || void 0,
-				"aria-readonly": U.value || void 0,
-				"aria-invalid": W.value || void 0,
-				onPointerdown: Se(e),
-				style: { insetInlineStart: `${r}%` },
-				onFocus: () => {
-					k.value = e;
-				},
-				onPointerenter: () => {
-					k.value = e;
-				},
-				onBlur: () => {
-					O.value !== e && (k.value = k.value === e ? null : k.value);
-				},
-				onPointerleave: () => {
-					O.value !== e && (k.value = k.value === e ? null : k.value);
-				},
-				"aria-label": F.value?.thumb?.["aria-label"] ?? (R.value ? e === 0 ? "Minimum" : "Maximum" : M.merged.value.label || "Slider")
-			}, {}, c({
-				"absolute z-10 flex -translate-x-1/2 items-center justify-center bg-transparent leading-none outline-none": !0,
-				"cursor-grab": !H.value && !U.value,
-				"cursor-grabbing": i,
-				"cursor-not-allowed": H.value,
-				"focus-visible:ring-2 focus-visible:ring-offset-2": !0,
-				[Y.value?.focus ?? ""]: !0,
-				[X.value?.thumb ?? ""]: !0,
-				[I.value.thumb ?? ""]: !0
-			}));
-		},
-		resolvedStops: K,
-		resolvedValue: G,
-		isTooltipOpen: (e) => z.value && (O.value === e || k.value === e),
+			"absolute top-1/2 h-2 w-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white dark:bg-dark-400": !0,
+			[F.value.stop ?? ""]: !0
+		}));
+	}, je = o(() => t(P.value?.stopLabels, { "aria-hidden": !0 }, c({
+		"relative h-[1lh] w-full text-xs": !0,
+		[F.value.stopLabels ?? ""]: !0
+	})));
+	return {
+		bounds: I,
+		merged: M,
+		barBind: De,
+		isRange: L,
+		trackRef: k,
+		baseField: j,
+		trackBind: $,
+		controlBind: Ee,
+		showTooltip: R,
+		getStopBind: Ae,
+		thumbIndexes: o(() => L.value ? [0, 1] : [0]),
+		getThumbBind: Oe,
+		resolvedStops: G,
+		resolvedValue: W,
+		isTooltipOpen: (e) => R.value && (D.value === e || O.value === e),
+		hasStopLabels: be,
+		stopLabelsBind: je,
 		getStopLabelBind: (e) => {
-			let n = h(e.value, L.value.min, L.value.max);
-			return t(v(F.value?.stopLabel ?? {}, ["style"]), {
-				"aria-hidden": !0,
-				style: { insetInlineStart: `${n}%` }
-			}, c({
-				"absolute mt-5 -translate-x-1/2 text-xs whitespace-nowrap": !0,
-				"text-gray-700 dark:text-gray-400": !W.value,
-				[J.value.stopLabel ?? ""]: W.value,
-				[I.value.stopLabel ?? ""]: !0
-			}));
-		},
-		getThumbKnobBind: (e) => {
-			let n = O.value === e;
-			return t(F.value?.thumbKnob, { "aria-hidden": !0 }, c({
-				"block rounded-full border-2 shadow-sm transition-transform duration-100": !0,
-				"scale-120": n,
-				[X.value?.thumbKnob ?? ""]: !0,
-				[Y.value?.thumb ?? ""]: !0,
-				[I.value.thumbKnob ?? ""]: !0
+			let n = h(e.value, I.value.min, I.value.max);
+			return t(v(P.value?.stopLabel ?? {}, ["style"]), { style: { insetInlineStart: `${n}%` } }, c({
+				"absolute top-0 -translate-x-1/2 whitespace-nowrap": !0,
+				"text-dark-700 dark:text-dark-400": !U.value,
+				[q.value.stopLabel ?? ""]: U.value,
+				[F.value.stopLabel ?? ""]: !0
 			}));
 		},
-		tooltipProps: o(() => F.value?.tooltip),
-		readThumbValue: (e) => S(G.value, e, R.value)
+		getThumbKnobBind: ke,
+		tooltipProps: o(() => P.value?.tooltip),
+		readThumbValue: (e) => S(W.value, e, L.value)
 	};
 }
 //#endregion
-export { w as useSlider };
+export { x as sliderBridgeKeys, w as useSlider };

package/dist/Components/Slider/slider.types.d.ts

@@ -19,6 +19,10 @@ export interface SliderClasses extends BaseFieldClasses {
      * Classes for stop labels.
      */
     stopLabel?: string;
+    /**
+     * Classes for the row that holds the stop labels.
+     */
+    stopLabels?: string;
     /**
      * Classes for thumb hit-area wrappers.
      */
@@ -52,6 +56,10 @@ export interface SliderCustomProps extends Omit<BaseFieldCustomProps, "invalidat
      * Props forwarded to stop labels.
      */
     stopLabel?: HTMLAttributes;
+    /**
+     * Props forwarded to the row that holds the stop labels.
+     */
+    stopLabels?: HTMLAttributes;
     /**
      * Props forwarded to thumb hit-area buttons.
      */