@pixelium/web-vue 0.0.3-beta → 0.0.4

package/dist/pixelium-vue.js

@@ -730,7 +730,7 @@ function toLinear(e) {
 function rgbaToOklch(e, t, n, r = 255) {
 	let i = e / 255, a = t / 255, o = n / 255, s = toLinear(i), c = toLinear(a), l = toLinear(o), u = s * .41239079926595934 + c * .357584339383878 + l * .1804807884018343, p = s * .21263900587151027 + c * .715168678767756 + l * .07219231536073371, g = s * .01933081871559182 + c * .11919477979462598 + l * .9505321522496607, b = .819022437996703 * u + .3619062600528904 * p - .1288737815209879 * g, x = .0329836539323885 * u + .9292868615863434 * p + .0361446663506424 * g, C = .0481771893596242 * u + .2642395317527308 * p + .6335478284694309 * g;
 	b = Math.cbrt(b), x = Math.cbrt(x), C = Math.cbrt(C);
-	let w = .210454268309314 * b + .7936177747023054 * x - .0040720430116193 * C, T = 1.9779985324311684 * b - 2.42859224204858 * x + .450593709617411 * C, wo = .0259040424655478 * b + .7827717124575296 * x - .8086757549230774 * C, D = Math.sqrt(T * T + wo * wo), k = Math.atan2(wo, T) * 180 / Math.PI;
+	let w = .210454268309314 * b + .7936177747023054 * x - .0040720430116193 * C, T = 1.9779985324311684 * b - 2.42859224204858 * x + .450593709617411 * C, Co = .0259040424655478 * b + .7827717124575296 * x - .8086757549230774 * C, D = Math.sqrt(T * T + Co * Co), k = Math.atan2(Co, T) * 180 / Math.PI;
 	return k < 0 && (k += 360), {
 		l: w,
 		c: D,
@@ -744,11 +744,11 @@ function toGamma(e) {
 function oklchToRgba(e, t, n, r = 255) {
 	let i = n * Math.PI / 180, a = t * Math.cos(i), o = t * Math.sin(i), s = e + .3963377773761749 * a + .2158037573099136 * o, c = e - .1055613458156586 * a - .0638541728258133 * o, l = e - .0894841775298119 * a - 1.2914855480194092 * o;
 	s = s * s * s, c = c * c * c, l = l * l * l;
-	let u = 1.2268798758459243 * s - .5578149944602171 * c + .2813910456659647 * l, p = -.0405757452148008 * s + 1.112286803280317 * c - .0717110580655164 * l, g = -.0763729366746601 * s - .4214933324022432 * c + 1.5869240198367816 * l, b = 3.2409699419045226 * u - 1.537383177570094 * p - .4986107602930034 * g, x = -.9692436362808796 * u + 1.8759675015077202 * p + .04155505740717559 * g, C = .05563007969699366 * u - .20397695888897652 * p + 1.0569715142428786 * g, w = toGamma(b), T = toGamma(x), wo = toGamma(C);
+	let u = 1.2268798758459243 * s - .5578149944602171 * c + .2813910456659647 * l, p = -.0405757452148008 * s + 1.112286803280317 * c - .0717110580655164 * l, g = -.0763729366746601 * s - .4214933324022432 * c + 1.5869240198367816 * l, b = 3.2409699419045226 * u - 1.537383177570094 * p - .4986107602930034 * g, x = -.9692436362808796 * u + 1.8759675015077202 * p + .04155505740717559 * g, C = .05563007969699366 * u - .20397695888897652 * p + 1.0569715142428786 * g, w = toGamma(b), T = toGamma(x), Co = toGamma(C);
 	return {
 		r: Math.round(w * 255),
 		g: Math.round(T * 255),
-		b: Math.round(wo * 255),
+		b: Math.round(Co * 255),
 		a: r
 	};
 }
@@ -843,20 +843,20 @@ function getGradientColor(e, t, n = "primary", r, i, a) {
 	return r ? e ? r[0] : a ? r[6] : i && !t ? r[3] : r[4] : n === "info" ? e ? getGlobalThemeColor("neutral", 2) : a ? getGlobalThemeColor("neutral", 5) : i && !t ? getGlobalThemeColor("neutral", 4) : getGlobalThemeColor("neutral", 3) : e ? getGlobalThemeColor(n, 1) : a ? getGlobalThemeColor(n, 7) : i && !t ? getGlobalThemeColor(n, 4) : getGlobalThemeColor(n, 5);
 }
 const drawGradient = (e, t, n, r, i, a, o, s, c, l = "primary", u, p, g, b, x, C) => {
-	let w = calcWhenLeaveBaseline(o, i[2]), T = calcWhenLeaveBaseline(o, i[3]), wo = calcWhenLeaveBaseline(o, i[1]), D = calcWhenLeaveBaseline(o, i[0]), k = +!(p && !g), j = +!p || +(p && b);
+	let w = calcWhenLeaveBaseline(o, i[2]), T = calcWhenLeaveBaseline(o, i[3]), Co = calcWhenLeaveBaseline(o, i[1]), D = calcWhenLeaveBaseline(o, i[0]), k = +!(p && !g), j = +!p || +(p && b);
 	if (!C || s) {
 		let g = getGradientColor(s, c, l, u, x, C);
 		if (!g) return;
 		e.fillStyle = rgbaColor2string(g), i[1] > o && (drawCircle(e, r[1][0] - o, r[1][1], i[1], a[1][0], a[1][1], o), e.globalCompositeOperation = "destination-out", e.fillRect(r[1][0] - o, 0, D, o), e.globalCompositeOperation = "source-over"), i[2] > o && (drawCircle(e, r[2][0] - o, r[2][1], i[2], a[2][0], a[2][1], o), e.globalCompositeOperation = "destination-out", e.fillRect(r[2][0] - o, n - o, T, o), e.globalCompositeOperation = "source-over");
 		let M = r[2][0] - r[3][0] + T * k + w * j - 1 * !j;
 		M > 0 && e.fillRect(r[3][0] - T * k, n - o * 2, M, o);
-		let To = r[2][1] + o - r[1][1] + wo + w;
-		To > 0 && e.fillRect(t - o * 2 - (b ? 0 : +p * o * 1), r[1][1] - wo, o, To);
+		let wo = r[2][1] + o - r[1][1] + Co + w;
+		wo > 0 && e.fillRect(t - o * 2 - (b ? 0 : +p * o * 1), r[1][1] - Co, o, wo);
 	} else {
 		let t = getGradientColor(s, c, l, u, x, C);
 		if (!t) return;
-		e.fillStyle = rgbaColor2string(t), i[0] > o && (drawCircle(e, r[0][0] + o, r[0][1], i[0], a[0][0], a[0][1], o), e.globalCompositeOperation = "destination-out", e.fillRect(r[0][0] + o, 0, wo, o), e.globalCompositeOperation = "source-over"), i[3] > o && (drawCircle(e, r[3][0] + o, r[3][1], i[3], a[3][0], a[3][1], o), e.globalCompositeOperation = "destination-out", e.fillRect(r[3][0] + o, n - o, w, o), e.globalCompositeOperation = "source-over");
-		let p = r[1][0] + o - r[0][0] + wo * +j + D * k - 1 * !j;
+		e.fillStyle = rgbaColor2string(t), i[0] > o && (drawCircle(e, r[0][0] + o, r[0][1], i[0], a[0][0], a[0][1], o), e.globalCompositeOperation = "destination-out", e.fillRect(r[0][0] + o, 0, Co, o), e.globalCompositeOperation = "source-over"), i[3] > o && (drawCircle(e, r[3][0] + o, r[3][1], i[3], a[3][0], a[3][1], o), e.globalCompositeOperation = "destination-out", e.fillRect(r[3][0] + o, n - o, w, o), e.globalCompositeOperation = "source-over");
+		let p = r[1][0] + o - r[0][0] + Co * +j + D * k - 1 * !j;
 		p > 0 && e.fillRect(r[0][0] - D * k, o, p, o);
 		let g = o + r[3][1] - r[0][1] + T + D;
 		g > 0 && e.fillRect(o, r[0][1] - D, o, g);
@@ -883,7 +883,7 @@ const useDarkMode = () => {
 	function n(t) {
 		e.value = t.matches;
 	}
-	if (inBrowser()) {
+	if (inBrowser() && !inVitest()) {
 		let e = window.matchMedia("(prefers-color-scheme: dark)");
 		n(e), e.addEventListener("change", n), onBeforeUnmount(() => {
 			e.removeEventListener("change", n);
@@ -897,7 +897,7 @@ const useDarkMode = () => {
 			}), t.value = e ? !0 : n ? !1 : void 0;
 		}
 	};
-	return inBrowser() && (onMounted(() => {
+	return inBrowser() && !inVitest() && (onMounted(() => {
 		let e = observerMap$1.get(document.documentElement) || new MutationObserver(runCallbacks(document.documentElement));
 		observerMap$1.set(document.documentElement, e), e.observe(document.documentElement, {
 			attributes: !0,
@@ -941,7 +941,7 @@ function mitt_default(e) {
 	};
 }
 const EventBus = mitt_default(), BUTTON_GROUP_UPDATE = "px-button-group-update", GRID_UPDATE = "px-grid-update", GLOBAL_CSS_VAR_CHANGE = "px-global-css-var-change", INPUT_GROUP_UPDATE = "px-input-group-update", useWatchGlobalCssVal = (e) => {
-	if (!inBrowser()) return;
+	if (!inBrowser() || inVitest()) return;
 	let t = () => {
 		e();
 	};
@@ -992,7 +992,7 @@ function useTransitionEnd(e, t) {
 		e.value && e.value.removeEventListener("transitionend", t);
 	});
 }
-var _hoisted_1$20 = [
+var _hoisted_1$19 = [
 	"disabled",
 	"type",
 	"autofocus"
@@ -1030,7 +1030,7 @@ var _hoisted_1$20 = [
 			ref(0),
 			ref(!1),
 			ref(!1)
-		], T = inject(BUTTON_GROUP_PROVIDE), k = inject(INPUT_GROUP_PROVIDE), N = inject(FORM_PROVIDE), P = inject(FORM_ITEM_PROVIDE), I = createProvideComputed("borderRadius", [
+		], T = inject(BUTTON_GROUP_PROVIDE, void 0), k = inject(INPUT_GROUP_PROVIDE, void 0), N = inject(FORM_PROVIDE, void 0), P = inject(FORM_ITEM_PROVIDE, void 0), I = createProvideComputed("borderRadius", [
 			u.value && T,
 			p.value && k,
 			r
@@ -1045,38 +1045,38 @@ var _hoisted_1$20 = [
 			u.value && T,
 			p.value && k,
 			r
-		], "nullish", (e) => e || "rect"), ko = createProvideComputed("theme", [u.value && T, r], "nullish", (e) => e || "primary"), H = createProvideComputed("disabled", [
+		], "nullish", (e) => e || "rect"), Oo = createProvideComputed("theme", [u.value && T, r], "nullish", (e) => e || "primary"), H = createProvideComputed("disabled", [
 			u.value && T,
 			p.value && k,
 			P,
 			N,
 			r
-		], (e, t, n) => e || t || "readonly" in n && n.readonly.value), U = createProvideComputed("loading", [u.value && T, r], "or"), W = useSlots(), K = ref(!1), q = ref(!1), No = (e) => {
+		], (e, t, n) => e || t || "readonly" in n && n.readonly.value), U = createProvideComputed("loading", [u.value && T, r], "or"), W = useSlots(), K = ref(!1), q = ref(!1), Mo = (e) => {
 			K.value = e;
-		}, Po = (e) => {
+		}, No = (e) => {
 			q.value = e;
-		}, Fo = useDarkMode(), Io = shallowRef(null), Lo = shallowRef(null), Ro = useId();
+		}, Po = useDarkMode(), Fo = shallowRef(null), Io = shallowRef(null), Lo = useId();
 		onMounted(() => {
 			nextTick(() => {
-				Bo(), u.value && (T == null || T.collectChildrenInfo({
-					id: Ro,
+				zo(), u.value && (T == null || T.collectChildrenInfo({
+					id: Lo,
 					variant: L.value,
 					index: g.value
 				})), p.value && (k == null || k.collectChildrenInfo({
-					id: Ro,
+					id: Lo,
 					variant: L.value,
 					index: g.value
 				}));
 			});
 		}), onBeforeUnmount(() => {
-			u.value && (T == null || T.removeChildrenInfo(Ro)), p.value && (k == null || k.removeChildrenInfo(Ro));
+			u.value && (T == null || T.removeChildrenInfo(Lo)), p.value && (k == null || k.removeChildrenInfo(Lo));
 		}), watch([L, g], () => {
 			u.value && (T == null || T.collectChildrenInfo({
-				id: Ro,
+				id: Lo,
 				variant: L.value,
 				index: g.value
 			})), p.value && (k == null || k.collectChildrenInfo({
-				id: Ro,
+				id: Lo,
 				variant: L.value,
 				index: g.value
 			}));
@@ -1089,34 +1089,34 @@ var _hoisted_1$20 = [
 		}), Y = computed(() => {
 			if (!r.color) return null;
 			let e = parseColor(r.color);
-			return e ? generatePalette(e.r, e.g, e.b, e.a, Fo.value) : null;
-		}), zo = computed(() => getTextColorWithPalette$1(Y.value, L.value, !!H.value, !!U.value, K.value, q.value));
+			return e ? generatePalette(e.r, e.g, e.b, e.a, Po.value) : null;
+		}), Ro = computed(() => getTextColorWithPalette$1(Y.value, L.value, !!H.value, !!U.value, K.value, q.value));
 		watch([
 			I,
 			V,
 			H,
 			U,
 			L,
-			ko,
+			Oo,
 			Y,
 			K,
 			q,
-			Fo,
+			Po,
 			J
 		], () => {
-			Bo();
+			zo();
 		}), watch([x, w], () => {
-			Bo();
+			zo();
 		});
-		let Bo = () => {
-			let e = canvasPreprocess(Lo, Io);
+		let zo = () => {
+			let e = canvasPreprocess(Io, Fo);
 			if (!e) return;
-			let t = calcPixelSize(), { ctx: n, width: r, height: i, canvas: a } = e, o = getBorderRadius(a, t, I.value, V.value || "rect", z.value || "medium", u.value || p.value, x.value, w.value), s = getBorderColor$2(!!H.value, !!U.value, L.value || "primary", ko.value || "primary", Y.value, K.value, q.value), c = calcBorderCornerCenter(o, r, i, t), l = BORDER_CORNER_RAD_RANGE;
-			(!L.value || L.value === "primary") && drawGradient(n, r, i, c, o, l, t, !!H.value, !!U.value, ko.value, Y.value, u.value || p.value, x.value, w.value, K.value, q.value), s && drawBorder$13(n, r, i, c, o, l, s, t, L.value || "primary", u.value || p.value, x.value, w.value, J.value);
-			let g = getBackgroundColor$2(!!H.value, !!U.value, L.value || "primary", ko.value || "primary", Y.value, K.value, q.value);
+			let t = calcPixelSize(), { ctx: n, width: r, height: i, canvas: a } = e, o = getBorderRadius(a, t, I.value, V.value || "rect", z.value || "medium", u.value || p.value, x.value, w.value), s = getBorderColor$2(!!H.value, !!U.value, L.value || "primary", Oo.value || "primary", Y.value, K.value, q.value), c = calcBorderCornerCenter(o, r, i, t), l = BORDER_CORNER_RAD_RANGE;
+			(!L.value || L.value === "primary") && drawGradient(n, r, i, c, o, l, t, !!H.value, !!U.value, Oo.value, Y.value, u.value || p.value, x.value, w.value, K.value, q.value), s && drawBorder$13(n, r, i, c, o, l, s, t, L.value || "primary", u.value || p.value, x.value, w.value, J.value);
+			let g = getBackgroundColor$2(!!H.value, !!U.value, L.value || "primary", Oo.value || "primary", Y.value, K.value, q.value);
 			g && floodFill(n, Math.round(r / 2), Math.round(i / 2), g);
 		};
-		return useResizeObserver(Lo, Bo), useWatchGlobalCssVal(Bo), useTransitionEnd(Lo, Bo), (e, t) => (openBlock(), createElementBlock("button", {
+		return useResizeObserver(Io, zo), useWatchGlobalCssVal(zo), useTransitionEnd(Io, zo), (e, t) => (openBlock(), createElementBlock("button", {
 			disabled: unref(H) || unref(U),
 			class: normalizeClass(["pixelium px-button", {
 				"px-button__block": !(u.value || p.value) && !!r.block,
@@ -1129,21 +1129,21 @@ var _hoisted_1$20 = [
 				"px-button__disabled": unref(H),
 				"px-button__custom": Y.value,
 				"px-button__inner": u.value || p.value,
-				[`px-button__${unref(ko) || "primary"}`]: !0
+				[`px-button__${unref(Oo) || "primary"}`]: !0
 			}]),
-			style: normalizeStyle({ color: zo.value }),
+			style: normalizeStyle({ color: Ro.value }),
 			ref_key: "buttonRef",
-			ref: Lo,
-			onMouseenter: t[0] || (t[0] = (e) => No(!0)),
-			onMouseleave: t[1] || (t[1] = (e) => No(!1)),
-			onMousedown: t[2] || (t[2] = (e) => Po(!0)),
-			onMouseup: t[3] || (t[3] = (e) => Po(!1)),
+			ref: Io,
+			onMouseenter: t[0] || (t[0] = (e) => Mo(!0)),
+			onMouseleave: t[1] || (t[1] = (e) => Mo(!1)),
+			onMousedown: t[2] || (t[2] = (e) => No(!0)),
+			onMouseup: t[3] || (t[3] = (e) => No(!1)),
 			type: r.nativeType,
 			autofocus: r.autofocus
 		}, [
 			createElementVNode("canvas", {
 				ref_key: "canvasRef",
-				ref: Io,
+				ref: Fo,
 				class: "px-button-canvas"
 			}, null, 512),
 			unref(W).icon || unref(U) ? (openBlock(), createElementBlock("div", {
@@ -1152,12 +1152,12 @@ var _hoisted_1$20 = [
 			}, [unref(U) ? (openBlock(), createBlock(unref(spinner_third_solid_default), {
 				key: 0,
 				class: "px-button-icon px-animation__loading",
-				style: normalizeStyle({ fill: zo.value })
+				style: normalizeStyle({ fill: Ro.value })
 			}, null, 8, ["style"])) : renderSlot(e.$slots, "icon", { key: 1 })], 2)) : createCommentVNode("", !0),
 			renderSlot(e.$slots, "default")
-		], 46, _hoisted_1$20));
+		], 46, _hoisted_1$19));
 	}
-}), _hoisted_1$19 = { class: "pixelium px-button-group" }, button_group_default = /* @__PURE__ */ defineComponent({
+}), _hoisted_1$18 = { class: "pixelium px-button-group" }, button_group_default = /* @__PURE__ */ defineComponent({
 	name: "ButtonGroup",
 	__name: "index",
 	props: {
@@ -1173,7 +1173,7 @@ var _hoisted_1$20 = [
 		theme: null
 	},
 	setup(e) {
-		let t = e, n = inject(FORM_PROVIDE), r = inject(FORM_ITEM_PROVIDE), i = createProvideComputed("size", () => [
+		let t = e, n = inject(FORM_PROVIDE, void 0), r = inject(FORM_ITEM_PROVIDE, void 0), i = createProvideComputed("size", () => [
 			t.size && t,
 			r,
 			n,
@@ -1195,9 +1195,9 @@ var _hoisted_1$20 = [
 			removeChildrenInfo: (e) => {
 				o.value = o.value.filter((t) => t.id != e);
 			}
-		}), emitParentUpdate(BUTTON_GROUP_UPDATE), (e, t) => (openBlock(), createElementBlock("div", _hoisted_1$19, [renderSlot(e.$slots, "default")]));
+		}), emitParentUpdate(BUTTON_GROUP_UPDATE), (e, t) => (openBlock(), createElementBlock("div", _hoisted_1$18, [renderSlot(e.$slots, "default")]));
 	}
-}), _hoisted_1$18 = ["href", "target"], link_default = /* @__PURE__ */ defineComponent({
+}), _hoisted_1$17 = ["href", "target"], link_default = /* @__PURE__ */ defineComponent({
 	name: "Link",
 	__name: "index",
 	props: {
@@ -1244,7 +1244,7 @@ var _hoisted_1$20 = [
 			key: 0,
 			class: "px-link-icon px-animation__loading",
 			style: normalizeStyle({ fill: x.value })
-		}, null, 8, ["style"])) : renderSlot(e.$slots, "icon", { key: 1 })], 2)) : createCommentVNode("", !0), renderSlot(e.$slots, "default")], 46, _hoisted_1$18));
+		}, null, 8, ["style"])) : renderSlot(e.$slots, "icon", { key: 1 })], 2)) : createCommentVNode("", !0), renderSlot(e.$slots, "default")], 46, _hoisted_1$17));
 	}
 }), info_circle_solid_default = /* @__PURE__ */ defineComponent({
 	props: {
@@ -1368,7 +1368,7 @@ var _hoisted_1$20 = [
 		}
 		let w = n, T = () => {
 			w("close", i.id), x();
-		}, wo = shallowRef(null), D = shallowRef(null), k = (e) => {
+		}, Co = shallowRef(null), D = shallowRef(null), k = (e) => {
 			if (!e) return "normal";
 			switch (e) {
 				case "info": return "primary";
@@ -1382,7 +1382,7 @@ var _hoisted_1$20 = [
 		}), P = computed(() => N.value ? rgbaColor2string(N.value[5]) : void 0), I = computed(() => {
 			if (N.value) return s.value ? rgbaColor2string(N.value[6]) : o.value ? rgbaColor2string(N.value[4]) : rgbaColor2string(N.value[5]);
 		});
-		function Eo(e = "normal", t) {
+		function To(e = "normal", t) {
 			if (t) return t[5];
 			{
 				let t = k(e);
@@ -1392,9 +1392,9 @@ var _hoisted_1$20 = [
 		let L = (e, t, n, r, i) => {
 			e.fillStyle = rgbaColor2string(r), e.fillRect(i, 0, t - 2 * i, i), e.fillRect(t - i, i, i, n - 2 * i), e.fillRect(i, n - i, t - 2 * i, i), e.fillRect(0, i, i, n - 2 * i), e.fillStyle = getGlobalThemeColorString("neutral", 1), e.fillRect(i, i, t - 2 * i, n - 2 * i);
 		}, z = () => {
-			let e = canvasPreprocess(D, wo);
+			let e = canvasPreprocess(D, Co);
 			if (!e) return;
-			let { ctx: t, width: n, height: r } = e, a = calcPixelSize(), o = Eo(i.type, N.value);
+			let { ctx: t, width: n, height: r } = e, a = calcPixelSize(), o = To(i.type, N.value);
 			o && L(t, n, r, o, a);
 		};
 		return useResizeObserver(D, z), useWatchGlobalCssVal(z), useTransitionEnd(D, z), watch([
@@ -1448,7 +1448,7 @@ var _hoisted_1$20 = [
 				onClick: C
 			}, null)]),
 			createVNode("canvas", {
-				ref: (e) => wo.value = e,
+				ref: (e) => Co.value = e,
 				class: "px-message-canvas"
 			}, null)
 		])] });
@@ -1624,7 +1624,7 @@ var MessageManager = class {
 	unmount() {
 		if (this.container) {
 			let e = this.container;
-			render(this.messageBox, e), nextTick(() => {
+			render(null, e), nextTick(() => {
 				e.remove(), this.container = null;
 			});
 		}
@@ -1683,7 +1683,7 @@ const useScreenWidth = () => {
 		window.removeEventListener("resize", t);
 	})), [n, e];
 };
-var _hoisted_1$17 = { class: "pixelium px-row" }, row_default = /* @__PURE__ */ defineComponent({
+var _hoisted_1$16 = { class: "pixelium px-row" }, row_default = /* @__PURE__ */ defineComponent({
 	name: "Row",
 	__name: "index",
 	props: {
@@ -1714,7 +1714,7 @@ var _hoisted_1$17 = { class: "pixelium px-row" }, row_default = /* @__PURE__ */
 				y: 0
 			}, e);
 		});
-		return provide("px-row-provide", r), (e, n) => (openBlock(), createElementBlock("div", _hoisted_1$17, [createElementVNode("div", {
+		return provide("px-row-provide", r), (e, n) => (openBlock(), createElementBlock("div", _hoisted_1$16, [createElementVNode("div", {
 			class: normalizeClass(["px-row-inner", {
 				[`px-row__justify-${t.justify}`]: !0,
 				[`px-row__align-${t.align}`]: !0,
@@ -1737,7 +1737,7 @@ var _hoisted_1$17 = { class: "pixelium px-row" }, row_default = /* @__PURE__ */
 	},
 	setup(e) {
 		var t;
-		let n = e, [r] = useScreenWidth(), i = computed(() => A(n.offset) ? n.offset : n.offset[r.value] || 0), o = computed(() => A(n.span) ? n.span : n.span[r.value] || 24), s = getCurrentInstance(), l = ref((s == null || (t = s.parent) == null ? void 0 : t.type.name) === "Row").value && inject("px-row-provide") || ref({
+		let n = e, [r] = useScreenWidth(), i = computed(() => A(n.offset) ? n.offset : n.offset[r.value] || 0), o = computed(() => A(n.span) ? n.span : n.span[r.value] || 24), s = getCurrentInstance(), l = ref((s == null || (t = s.parent) == null ? void 0 : t.type.name) === "Row").value && inject("px-row-provide", void 0) || ref({
 			x: 0,
 			y: 0
 		});
@@ -1909,7 +1909,7 @@ var space_default = /* @__PURE__ */ defineComponent({
 	},
 	setup(e) {
 		var t;
-		let n = getCurrentInstance(), r = ref((n == null || (t = n.parent) == null ? void 0 : t.type.name) === "Grid").value ? inject(GRID_PROVIDE) : void 0, i = e, o = useId(), [s] = useIndexOfChildren(GRID_UPDATE), [l] = useScreenWidth(), u = computed(() => A(i.offset) ? i.offset : i.offset[l.value] || 0), p = computed(() => i.span === void 0 ? (r == null ? void 0 : r.column.value) || 24 : A(i.span) ? i.span : i.span[l.value] || 24);
+		let n = getCurrentInstance(), r = ref((n == null || (t = n.parent) == null ? void 0 : t.type.name) === "Grid").value ? inject(GRID_PROVIDE, void 0) : void 0, i = e, o = useId(), [s] = useIndexOfChildren(GRID_UPDATE), [l] = useScreenWidth(), u = computed(() => A(i.offset) ? i.offset : i.offset[l.value] || 0), p = computed(() => i.span === void 0 ? (r == null ? void 0 : r.column.value) || 24 : A(i.span) ? i.span : i.span[l.value] || 24);
 		onMounted(() => {
 			r == null || r.itemsStat.value.push({
 				id: o,
@@ -1965,11 +1965,16 @@ var space_default = /* @__PURE__ */ defineComponent({
 			[`px-container__${n.direction}`]: !!n.direction
 		}]) }, [renderSlot(e.$slots, "default")], 2));
 	}
-}), _hoisted_1$16 = { class: "pixelium px-main" }, main_default = /* @__PURE__ */ defineComponent({
+}), main_default = /* @__PURE__ */ defineComponent({
 	name: "Main",
 	__name: "index",
+	props: { soft: {
+		type: Boolean,
+		default: !1
+	} },
 	setup(e) {
-		return (e, t) => (openBlock(), createElementBlock("main", _hoisted_1$16, [renderSlot(e.$slots, "default")]));
+		let t = e;
+		return (e, n) => (openBlock(), createElementBlock("main", { class: normalizeClass(["pixelium px-main", { "px-main__soft": t.soft }]) }, [renderSlot(e.$slots, "default")], 2));
 	}
 }), aside_default = /* @__PURE__ */ defineComponent({
 	name: "Aside",
@@ -1988,7 +1993,7 @@ var space_default = /* @__PURE__ */ defineComponent({
 	},
 	setup(e) {
 		var t;
-		let n = getCurrentInstance(), r = ref((n == null || (t = n.parent) == null ? void 0 : t.type.name) === "Container").value ? inject(CONTAINER_PROVIDE) : void 0;
+		let n = getCurrentInstance(), r = ref((n == null || (t = n.parent) == null ? void 0 : t.type.name) === "Container").value ? inject(CONTAINER_PROVIDE, void 0) : void 0;
 		onMounted(() => {
 			r && (r.value += 1);
 		}), onBeforeUnmount(() => {
@@ -2336,13 +2341,13 @@ var _hoisted_1$15 = {
 		var r;
 		let i = e, u = n, [g, x, w] = useComposition({ afterComposition: (e) => {
 			nextTick(() => {
-				Ro(e);
+				Lo(e);
 			});
 		} }), T = getCurrentInstance(), k = ref((T == null || (r = T.parent) == null ? void 0 : r.type.name) === "InputGroup"), [j, M, N] = k.value ? useIndexOfChildren(INPUT_GROUP_UPDATE) : [
 			ref(0),
 			ref(!1),
 			ref(!1)
-		], P = inject(INPUT_GROUP_PROVIDE), I = inject(FORM_ITEM_PROVIDE), L = createProvideComputed("borderRadius", () => [k.value && P, i]), z = createProvideComputed("size", () => [
+		], P = inject(INPUT_GROUP_PROVIDE, void 0), I = inject(FORM_ITEM_PROVIDE, void 0), L = createProvideComputed("borderRadius", () => [k.value && P, i]), z = createProvideComputed("size", () => [
 			k.value && P,
 			i.size && i,
 			I,
@@ -2363,7 +2368,7 @@ var _hoisted_1$15 = {
 		}), [K, q] = useControlledMode("modelValue", i, u, {
 			defaultField: "defaultValue",
 			transform: (e) => e || ""
-		}), No = shallowRef(null), Po = shallowRef(null), Fo = shallowRef(null), Lo = computed(() => i.countGraphemes ? i.countGraphemes(K.value) : K.value.length), Ro = async (e) => {
+		}), Mo = shallowRef(null), No = shallowRef(null), Po = shallowRef(null), Io = computed(() => i.countGraphemes ? i.countGraphemes(K.value) : K.value.length), Lo = async (e) => {
 			let t = e.target.value;
 			K.value = t, !g.value && (u("input", t, e), i.maxLength && (i.countGraphemes && i.sliceGraphemes ? (await nextTick(), t = i.sliceGraphemes(K.value, i.maxLength)) : t = K.value.slice(0, i.maxLength)), q(t), I == null || I.inputHandler());
 		}, J = async () => {
@@ -2371,33 +2376,33 @@ var _hoisted_1$15 = {
 		}, Y = (e) => {
 			let t = e.target;
 			u("change", t.value, e), I == null || I.changeHandler();
-		}, zo = ref(!1), Bo = (e) => {
-			zo.value = !1, u("blur", e), I == null || I.blurHandler();
-		}, Ho = (e) => {
-			zo.value = !0, u("focus", e);
+		}, Ro = ref(!1), zo = (e) => {
+			Ro.value = !1, u("blur", e), I == null || I.blurHandler();
+		}, Vo = (e) => {
+			Ro.value = !0, u("focus", e);
 		}, X = () => {
 			var e;
-			(e = Fo.value) == null || e.focus();
-		}, $ = ref(!1), Uo = () => {
+			(e = Po.value) == null || e.focus();
+		}, $ = ref(!1), Ho = () => {
 			$.value = !0;
-		}, Wo = () => {
+		}, Uo = () => {
 			$.value = !1;
-		}, Go = computed(() => i.clearable && !H.value && !U.value), Ko = ref(!1), qo = () => {
-			Ko.value = !Ko.value;
-		}, Jo = computed(() => i.nativeType ? i.nativeType : i.password ? Ko.value ? "text" : "password" : "text"), Yo = useSlots();
+		}, Wo = computed(() => i.clearable && !H.value && !U.value), Go = ref(!1), Ko = () => {
+			Go.value = !Go.value;
+		}, qo = computed(() => i.nativeType ? i.nativeType : i.password ? Go.value ? "text" : "password" : "text"), Jo = useSlots();
 		t({
 			focus: () => {
 				var e;
-				(e = Fo.value) == null || e.focus();
+				(e = Po.value) == null || e.focus();
 			},
 			blur: () => {
 				var e;
-				(e = Fo.value) == null || e.blur();
+				(e = Po.value) == null || e.blur();
 			},
 			clear: () => J(),
 			select: () => {
 				var e;
-				(e = Fo.value) == null || e.select();
+				(e = Po.value) == null || e.select();
 			}
 		}), watch([
 			M,
@@ -2407,28 +2412,28 @@ var _hoisted_1$15 = {
 			z,
 			U,
 			H,
-			() => Yo,
+			() => Jo,
 			useDarkMode(),
-			zo,
+			Ro,
 			$,
 			W,
 			G
 		], () => {
-			Xo();
+			Yo();
 		});
-		let Xo = () => {
-			let e = canvasPreprocess(No, Po);
+		let Yo = () => {
+			let e = canvasPreprocess(Mo, No);
 			if (!e) return;
-			let { ctx: t, width: n, height: r, canvas: i } = e, a = calcPixelSize(), o = getBorderRadius(i, a, L.value, V.value, z.value || "medium", k.value, M.value, N.value), s = W.value === "normal" ? ($.value || zo.value) && !H.value && !U.value ? getGlobalThemeColor("primary", 6) : getGlobalThemeColor("neutral", 10) : getGlobalThemeColor(W.value === "error" ? "danger" : W.value, 6), c = calcBorderCornerCenter(o, n, r, a);
+			let { ctx: t, width: n, height: r, canvas: i } = e, a = calcPixelSize(), o = getBorderRadius(i, a, L.value, V.value, z.value || "medium", k.value, M.value, N.value), s = W.value === "normal" ? ($.value || Ro.value) && !H.value && !U.value ? getGlobalThemeColor("primary", 6) : getGlobalThemeColor("neutral", 10) : getGlobalThemeColor(W.value === "error" ? "danger" : W.value, 6), c = calcBorderCornerCenter(o, n, r, a);
 			s && drawBorder$12(t, n, r, c, o, BORDER_CORNER_RAD_RANGE, s, a, k.value, M.value, N.value, G.value);
 			let l = H.value ? getGlobalThemeColor("neutral", 6) : getGlobalThemeColor("neutral", 1);
 			l && floodFill(t, Math.round(n / 2), Math.round(r / 2), l);
 		};
 		return onMounted(() => {
 			nextTick(() => {
-				Xo();
+				Yo();
 			});
-		}), useResizeObserver(No, Xo), useWatchGlobalCssVal(Xo), useTransitionEnd(No, Xo), (t, n) => (openBlock(), createElementBlock("div", {
+		}), useResizeObserver(Mo, Yo), useWatchGlobalCssVal(Yo), useTransitionEnd(Mo, Yo), (t, n) => (openBlock(), createElementBlock("div", {
 			class: normalizeClass(["pixelium px-input", {
 				[`px-input__${unref(z)}`]: !!unref(z),
 				[`px-input__${unref(V)}`]: !!unref(V),
@@ -2436,53 +2441,53 @@ var _hoisted_1$15 = {
 				"px-input__disabled": !!unref(H)
 			}]),
 			ref_key: "wrapperRef",
-			ref: No,
+			ref: Mo,
 			onClick: X,
-			onMouseenter: Uo,
-			onMouseleave: Wo,
-			onFocusout: Bo,
-			onFocusin: Ho
+			onMouseenter: Ho,
+			onMouseleave: Uo,
+			onFocusout: zo,
+			onFocusin: Vo
 		}, [
-			unref(Yo).prefix ? (openBlock(), createElementBlock("div", _hoisted_1$15, [renderSlot(t.$slots, "prefix")])) : createCommentVNode("", !0),
+			unref(Jo).prefix ? (openBlock(), createElementBlock("div", _hoisted_1$15, [renderSlot(t.$slots, "prefix")])) : createCommentVNode("", !0),
 			createElementVNode("input", {
 				class: "px-input-inner",
 				value: unref(K),
 				ref_key: "inputRef",
-				ref: Fo,
+				ref: Po,
 				placeholder: i.placeholder,
 				disabled: unref(H) || unref(U),
 				autofocus: e.autofocus,
-				type: Jo.value,
-				onInput: withModifiers(Ro, ["stop"]),
+				type: qo.value,
+				onInput: withModifiers(Lo, ["stop"]),
 				onChange: withModifiers(Y, ["stop"]),
 				onCompositionstart: n[0] || (n[0] = (...e) => unref(x) && unref(x)(...e)),
 				onCompositionend: n[1] || (n[1] = (...e) => unref(w) && unref(w)(...e))
 			}, null, 40, _hoisted_2$8),
-			Go.value ? (openBlock(), createElementBlock("div", _hoisted_3$8, [$.value && unref(K) ? (openBlock(), createBlock(unref(times_circle_solid_default), {
+			Wo.value ? (openBlock(), createElementBlock("div", _hoisted_3$8, [$.value && unref(K) ? (openBlock(), createBlock(unref(times_circle_solid_default), {
 				key: 0,
 				class: "px-input-icon",
 				onClick: J
 			})) : (openBlock(), createElementBlock("div", _hoisted_4$6))])) : createCommentVNode("", !0),
-			i.password ? (openBlock(), createElementBlock("div", _hoisted_5$5, [Ko.value ? (openBlock(), createBlock(unref(eye_cross_default), {
+			i.password ? (openBlock(), createElementBlock("div", _hoisted_5$5, [Go.value ? (openBlock(), createBlock(unref(eye_cross_default), {
 				key: 1,
 				class: "px-input-icon",
-				onClick: qo
+				onClick: Ko
 			})) : (openBlock(), createBlock(unref(eye_default), {
 				key: 0,
 				class: "px-input-icon",
-				onClick: qo
+				onClick: Ko
 			}))])) : createCommentVNode("", !0),
 			i.showCount ? (openBlock(), createElementBlock("div", _hoisted_6$3, [renderSlot(t.$slots, "count", {
 				value: unref(K),
-				count: Lo.value,
+				count: Io.value,
 				maxLength: i.maxLength
-			}, () => [createElementVNode("span", null, toDisplayString(Lo.value) + toDisplayString(unref(E)(i.maxLength) ? "" : " / " + i.maxLength), 1)])])) : createCommentVNode("", !0),
+			}, () => [createElementVNode("span", null, toDisplayString(Io.value) + toDisplayString(unref(E)(i.maxLength) ? "" : " / " + i.maxLength), 1)])])) : createCommentVNode("", !0),
 			i.loading ? (openBlock(), createElementBlock("div", _hoisted_7$2, [createVNode(unref(spinner_third_solid_default), { class: "px-input-icon px-animation__loading" })])) : createCommentVNode("", !0),
-			unref(Yo).suffix ? (openBlock(), createElementBlock("div", _hoisted_8$2, [renderSlot(t.$slots, "suffix")])) : createCommentVNode("", !0),
+			unref(Jo).suffix ? (openBlock(), createElementBlock("div", _hoisted_8$2, [renderSlot(t.$slots, "suffix")])) : createCommentVNode("", !0),
 			createElementVNode("canvas", {
 				class: "px-input-canvas",
 				ref_key: "canvasRef",
-				ref: Po
+				ref: No
 			}, null, 512)
 		], 34));
 	}
@@ -2612,7 +2617,7 @@ var minus_default = /* @__PURE__ */ defineComponent({
 			ref(0),
 			ref(!1),
 			ref(!1)
-		], j = inject(INPUT_GROUP_PROVIDE), M = inject(FORM_ITEM_PROVIDE), N = createProvideComputed("borderRadius", [x.value && j, i]), P = createProvideComputed("size", () => [
+		], j = inject(INPUT_GROUP_PROVIDE, void 0), M = inject(FORM_ITEM_PROVIDE, void 0), N = createProvideComputed("borderRadius", [x.value && j, i]), P = createProvideComputed("size", () => [
 			x.value && j,
 			i.size && i,
 			M,
@@ -2625,7 +2630,7 @@ var minus_default = /* @__PURE__ */ defineComponent({
 			x.value && j,
 			M,
 			i
-		], "or"), V = createProvideComputed("status", [M, i]), ko = computed(() => {
+		], "or"), V = createProvideComputed("status", [M, i]), Oo = computed(() => {
 			if (w.value >= 0) {
 				var e;
 				return x.value ? (j == null || (e = j.childrenInfo.value.find((e) => e.index === w.value + 1)) == null ? void 0 : e.variant) === "text" : !1;
@@ -2638,7 +2643,7 @@ var minus_default = /* @__PURE__ */ defineComponent({
 				r < t && (r = Math.ceil(e / i.step) * i.step), r > n && (r = Math.floor(e / i.step) * i.step), e = r;
 			}
 			return e;
-		}, W = (e) => i.format ? i.format(e) : F(e) || E(e) ? "" : A(i.precision) ? e.toFixed(ke(Math.round(i.precision), 0, 100)) : e + "", G = (e) => i.allowInput ? i.allowInput(e) : e.length ? H.test(e) : !0, K = (e) => i.parse ? i.parse(e) : e.length ? parseFloat(e) : 0, [q, No] = useControlledMode("modelValue", i, u, {
+		}, W = (e) => i.format ? i.format(e) : F(e) || E(e) ? "" : A(i.precision) ? e.toFixed(ke(Math.round(i.precision), 0, 100)) : e + "", G = (e) => i.allowInput ? i.allowInput(e) : e.length ? H.test(e) : !0, K = (e) => i.parse ? i.parse(e) : e.length ? parseFloat(e) : 0, [q, Mo] = useControlledMode("modelValue", i, u, {
 			defaultField: "defaultValue",
 			transform: (e) => {
 				if (!E(e)) {
@@ -2647,74 +2652,74 @@ var minus_default = /* @__PURE__ */ defineComponent({
 				}
 				return e;
 			}
-		}), Po = ref(W(q.value)), [Fo, Lo, Ro] = useComposition({ afterComposition: (e) => {
+		}), No = ref(W(q.value)), [Po, Io, Lo] = useComposition({ afterComposition: (e) => {
 			nextTick(() => {
 				$(e);
 			});
-		} }), J = shallowRef(null), Y = shallowRef(null), zo = shallowRef(null), Bo = shallowRef(null), Ho = shallowRef(null), X = (e) => {
-			Po.value = e;
+		} }), J = shallowRef(null), Y = shallowRef(null), Ro = shallowRef(null), zo = shallowRef(null), Vo = shallowRef(null), X = (e) => {
+			No.value = e;
 		};
 		watch(q, (e) => {
-			Go.value || X(W(e));
+			Wo.value || X(W(e));
 		});
 		let $ = async (e) => {
 			let t = e.target.value;
-			if (Fo.value) return;
+			if (Po.value) return;
 			if (!G(t)) {
-				zo.value && (zo.value.value = Po.value);
+				Ro.value && (Ro.value.value = No.value);
 				return;
 			}
-			Po.value = t;
+			No.value = t;
 			let n = U(K(t));
-			u("input", n, e), await No(n);
-		}, Uo = async () => {
+			u("input", n, e), await Mo(n);
+		}, Ho = async () => {
 			let e = U(0);
-			await No(e), X(W(q.value)), u("change", e), u("clear", e), M == null || M.changeHandler();
-		}, Wo = (e) => {
+			await Mo(e), X(W(q.value)), u("change", e), u("clear", e), M == null || M.changeHandler();
+		}, Uo = (e) => {
 			let t = e.target, n = K(t.value);
 			X(W(q.value)), u("change", n, e), M == null || M.changeHandler();
-		}, Go = ref(!1), Ko = (e) => {
-			X(W(q.value)), Go.value = !1, u("blur", e), M == null || M.blurHandler();
-		}, qo = (e) => {
-			Go.value = !0, u("focus", e);
-		}, Jo = computed(() => i.clearable && !L.value && !z.value), Yo = useSlots();
+		}, Wo = ref(!1), Go = (e) => {
+			X(W(q.value)), Wo.value = !1, u("blur", e), M == null || M.blurHandler();
+		}, Ko = (e) => {
+			Wo.value = !0, u("focus", e);
+		}, qo = computed(() => i.clearable && !L.value && !z.value), Jo = useSlots();
 		t({
 			focus: () => {
 				var e;
-				(e = zo.value) == null || e.focus();
+				(e = Ro.value) == null || e.focus();
 			},
 			blur: () => {
 				var e;
-				(e = zo.value) == null || e.blur();
+				(e = Ro.value) == null || e.blur();
 			},
-			clear: () => Uo(),
+			clear: () => Ho(),
 			select: () => {
 				var e;
-				(e = zo.value) == null || e.select();
+				(e = Ro.value) == null || e.select();
 			}
 		});
-		let Zo = computed(() => z.value || L.value || !E(q.value) && q.value >= i.max), Qo = computed(() => z.value || L.value || !E(q.value) && q.value <= i.min), $o = async () => {
-			if (Zo.value) return;
+		let Xo = computed(() => z.value || L.value || !E(q.value) && q.value >= i.max), Zo = computed(() => z.value || L.value || !E(q.value) && q.value <= i.min), Qo = async () => {
+			if (Xo.value) return;
 			let e = q.value;
 			E(e) && (e = U(0));
 			let t = U(e + i.step);
-			await No(t), u("change", t), X(W(q.value)), M == null || M.changeHandler();
-		}, es = async () => {
-			if (Qo.value) return;
+			await Mo(t), u("change", t), X(W(q.value)), M == null || M.changeHandler();
+		}, $o = async () => {
+			if (Zo.value) return;
 			let e = q.value;
 			E(e) && (e = U(0));
 			let t = U(e - i.step);
-			await No(t), u("change", t), X(W(q.value)), M == null || M.changeHandler();
-		}, rs = computed(() => i.buttonPlacement === "both" || i.buttonPlacement === "both-reverse" || i.buttonPlacement === "end" || i.buttonPlacement === "end-reverse"), as = computed(() => i.buttonPlacement === "both-reverse" || i.buttonPlacement === "end" || i.buttonPlacement === "end-reverse"), os = computed(() => i.buttonPlacement === "both" || i.buttonPlacement === "end" || i.buttonPlacement === "end-reverse"), ss = computed(() => i.buttonPlacement === "both" || i.buttonPlacement === "both-reverse" || i.buttonPlacement === "start" || i.buttonPlacement === "start-reverse"), cs = computed(() => i.buttonPlacement === "both" || i.buttonPlacement === "start" || i.buttonPlacement === "start-reverse"), ls = computed(() => i.buttonPlacement === "both-reverse" || i.buttonPlacement === "start" || i.buttonPlacement === "start-reverse"), us = (e) => {
+			await Mo(t), u("change", t), X(W(q.value)), M == null || M.changeHandler();
+		}, ns = computed(() => i.buttonPlacement === "both" || i.buttonPlacement === "both-reverse" || i.buttonPlacement === "end" || i.buttonPlacement === "end-reverse"), is = computed(() => i.buttonPlacement === "both-reverse" || i.buttonPlacement === "end" || i.buttonPlacement === "end-reverse"), as = computed(() => i.buttonPlacement === "both" || i.buttonPlacement === "end" || i.buttonPlacement === "end-reverse"), os = computed(() => i.buttonPlacement === "both" || i.buttonPlacement === "both-reverse" || i.buttonPlacement === "start" || i.buttonPlacement === "start-reverse"), ss = computed(() => i.buttonPlacement === "both" || i.buttonPlacement === "start" || i.buttonPlacement === "start-reverse"), cs = computed(() => i.buttonPlacement === "both-reverse" || i.buttonPlacement === "start" || i.buttonPlacement === "start-reverse"), ls = (e) => {
 			e.detail > 1 && e.preventDefault();
-		}, ds = (e) => {
+		}, us = (e) => {
 			var t, n;
-			let r = e.target, i = Bo.value.$el, a = Ho.value.$el;
-			(t = zo.value) != null && t.contains(r) || a != null && a.contains(r) || i != null && i.contains(r) || (n = zo.value) == null || n.focus();
-		}, ps = ref(!1), ms = () => {
-			ps.value = !0;
-		}, hs = () => {
-			ps.value = !1;
+			let r = e.target, i = zo.value.$el, a = Vo.value.$el;
+			(t = Ro.value) != null && t.contains(r) || a != null && a.contains(r) || i != null && i.contains(r) || (n = Ro.value) == null || n.focus();
+		}, fs = ref(!1), ps = () => {
+			fs.value = !0;
+		}, ms = () => {
+			fs.value = !1;
 		};
 		watch([
 			V,
@@ -2723,31 +2728,31 @@ var minus_default = /* @__PURE__ */ defineComponent({
 			P,
 			z,
 			L,
-			() => Yo,
+			() => Jo,
 			T,
 			k,
 			useDarkMode(),
-			ps,
-			Go,
-			ko
+			fs,
+			Wo,
+			Oo
 		], () => {
 			setTimeout(() => {
-				gs();
+				hs();
 			});
 		});
-		let gs = () => {
+		let hs = () => {
 			let e = canvasPreprocess(J, Y);
 			if (!e) return;
-			let { ctx: t, width: n, height: r, canvas: i } = e, a = calcPixelSize(), o = getBorderRadius(i, a, N.value, I.value, P.value || "medium", x.value, T.value, k.value), s = V.value === "normal" ? (ps.value || Go.value) && !L.value && !z.value ? getGlobalThemeColor("primary", 6) : getGlobalThemeColor("neutral", 10) : getGlobalThemeColor(V.value === "error" ? "danger" : V.value, 6), c = calcBorderCornerCenter(o, n, r, a);
-			s && drawBorder$11(t, n, r, c, o, BORDER_CORNER_RAD_RANGE, s, a, x.value, T.value, k.value, ko.value);
+			let { ctx: t, width: n, height: r, canvas: i } = e, a = calcPixelSize(), o = getBorderRadius(i, a, N.value, I.value, P.value || "medium", x.value, T.value, k.value), s = V.value === "normal" ? (fs.value || Wo.value) && !L.value && !z.value ? getGlobalThemeColor("primary", 6) : getGlobalThemeColor("neutral", 10) : getGlobalThemeColor(V.value === "error" ? "danger" : V.value, 6), c = calcBorderCornerCenter(o, n, r, a);
+			s && drawBorder$11(t, n, r, c, o, BORDER_CORNER_RAD_RANGE, s, a, x.value, T.value, k.value, Oo.value);
 			let l = L.value ? getGlobalThemeColor("neutral", 6) : getGlobalThemeColor("neutral", 1);
 			l && floodFill(t, Math.round(n / 2), Math.round(r / 2), l);
 		};
 		return onMounted(() => {
 			nextTick(() => {
-				gs();
+				hs();
 			});
-		}), useResizeObserver(J, gs), useWatchGlobalCssVal(gs), useTransitionEnd(J, gs), (t, n) => (openBlock(), createElementBlock("div", {
+		}), useResizeObserver(J, hs), useWatchGlobalCssVal(hs), useTransitionEnd(J, hs), (t, n) => (openBlock(), createElementBlock("div", {
 			class: normalizeClass(["pixelium px-input-number", {
 				[`px-input-number__${unref(P)}`]: !!unref(P),
 				[`px-input-number__${unref(I)}`]: !!unref(I),
@@ -2756,73 +2761,73 @@ var minus_default = /* @__PURE__ */ defineComponent({
 			}]),
 			ref_key: "wrapperRef",
 			ref: J,
-			onClick: ds,
-			onMouseenter: ms,
-			onMouseleave: hs,
-			onFocusout: Ko,
-			onFocusin: qo
+			onClick: us,
+			onMouseenter: ps,
+			onMouseleave: ms,
+			onFocusout: Go,
+			onFocusin: Ko
 		}, [
-			unref(Yo).prefix ? (openBlock(), createElementBlock("div", _hoisted_1$14, [renderSlot(t.$slots, "prefix")])) : createCommentVNode("", !0),
-			ss.value ? (openBlock(), createElementBlock("div", {
+			unref(Jo).prefix ? (openBlock(), createElementBlock("div", _hoisted_1$14, [renderSlot(t.$slots, "prefix")])) : createCommentVNode("", !0),
+			os.value ? (openBlock(), createElementBlock("div", {
 				key: 1,
 				class: normalizeClass(["px-input-number-setting-prefix-wrapper", i.buttonPlacement === "start-reverse" && "px-input-number-setting-prefix-wrapper__reverse"])
-			}, [cs.value ? (openBlock(), createBlock(unref(plus_default), {
+			}, [ss.value ? (openBlock(), createBlock(unref(plus_default), {
 				key: 0,
+				class: normalizeClass(["px-input-number-icon", Xo.value && "px-input-number-icon__disabled"]),
+				onClick: Qo,
+				onMousedown: ls,
+				tabindex: unref(L) || unref(z) || Xo.value ? -1 : 0,
+				ref_key: "plusRef",
+				ref: zo
+			}, null, 8, ["tabindex", "class"])) : createCommentVNode("", !0), cs.value ? (openBlock(), createBlock(unref(minus_default), {
+				key: 1,
 				class: normalizeClass(["px-input-number-icon", Zo.value && "px-input-number-icon__disabled"]),
 				onClick: $o,
-				onMousedown: us,
+				onMousedown: ls,
 				tabindex: unref(L) || unref(z) || Zo.value ? -1 : 0,
-				ref_key: "plusRef",
-				ref: Bo
-			}, null, 8, ["tabindex", "class"])) : createCommentVNode("", !0), ls.value ? (openBlock(), createBlock(unref(minus_default), {
-				key: 1,
-				class: normalizeClass(["px-input-number-icon", Qo.value && "px-input-number-icon__disabled"]),
-				onClick: es,
-				onMousedown: us,
-				tabindex: unref(L) || unref(z) || Qo.value ? -1 : 0,
 				ref_key: "minusRef",
-				ref: Ho
+				ref: Vo
 			}, null, 8, ["tabindex", "class"])) : createCommentVNode("", !0)], 2)) : createCommentVNode("", !0),
 			createElementVNode("input", {
 				class: "px-input-number-inner",
-				value: Po.value,
+				value: No.value,
 				ref_key: "inputRef",
-				ref: zo,
+				ref: Ro,
 				placeholder: i.placeholder,
 				disabled: unref(L) || unref(z),
 				autofocus: e.autofocus,
 				onInput: withModifiers($, ["stop"]),
-				onChange: withModifiers(Wo, ["stop"]),
-				onCompositionstart: n[0] || (n[0] = (...e) => unref(Lo) && unref(Lo)(...e)),
-				onCompositionend: n[1] || (n[1] = (...e) => unref(Ro) && unref(Ro)(...e))
+				onChange: withModifiers(Uo, ["stop"]),
+				onCompositionstart: n[0] || (n[0] = (...e) => unref(Io) && unref(Io)(...e)),
+				onCompositionend: n[1] || (n[1] = (...e) => unref(Lo) && unref(Lo)(...e))
 			}, null, 40, _hoisted_2$7),
-			Jo.value ? (openBlock(), createElementBlock("div", _hoisted_3$7, [ps.value && Po.value ? (openBlock(), createBlock(unref(times_circle_solid_default), {
+			qo.value ? (openBlock(), createElementBlock("div", _hoisted_3$7, [fs.value && No.value ? (openBlock(), createBlock(unref(times_circle_solid_default), {
 				key: 0,
 				class: "px-input-number-icon",
-				onClick: Uo
+				onClick: Ho
 			})) : (openBlock(), createElementBlock("div", _hoisted_4$5))])) : createCommentVNode("", !0),
-			rs.value ? (openBlock(), createElementBlock("div", {
+			ns.value ? (openBlock(), createElementBlock("div", {
 				key: 3,
 				class: normalizeClass(["px-input-number-setting-suffix-wrapper", i.buttonPlacement === "end-reverse" && "px-input-number-setting-suffix-wrapper__reverse"])
-			}, [as.value ? (openBlock(), createBlock(unref(plus_default), {
+			}, [is.value ? (openBlock(), createBlock(unref(plus_default), {
 				key: 0,
+				class: normalizeClass(["px-input-number-icon", Xo.value && "px-input-number-icon__disabled"]),
+				onClick: Qo,
+				onMousedown: ls,
+				tabindex: unref(L) || unref(z) || Xo.value ? -1 : 0,
+				ref_key: "plusRef",
+				ref: zo
+			}, null, 8, ["tabindex", "class"])) : createCommentVNode("", !0), as.value ? (openBlock(), createBlock(unref(minus_default), {
+				key: 1,
 				class: normalizeClass(["px-input-number-icon", Zo.value && "px-input-number-icon__disabled"]),
 				onClick: $o,
-				onMousedown: us,
+				onMousedown: ls,
 				tabindex: unref(L) || unref(z) || Zo.value ? -1 : 0,
-				ref_key: "plusRef",
-				ref: Bo
-			}, null, 8, ["tabindex", "class"])) : createCommentVNode("", !0), os.value ? (openBlock(), createBlock(unref(minus_default), {
-				key: 1,
-				class: normalizeClass(["px-input-number-icon", Qo.value && "px-input-number-icon__disabled"]),
-				onClick: es,
-				onMousedown: us,
-				tabindex: unref(L) || unref(z) || Qo.value ? -1 : 0,
 				ref_key: "minusRef",
-				ref: Ho
+				ref: Vo
 			}, null, 8, ["tabindex", "class"])) : createCommentVNode("", !0)], 2)) : createCommentVNode("", !0),
 			i.loading ? (openBlock(), createElementBlock("div", _hoisted_5$4, [createVNode(unref(spinner_third_solid_default), { class: "px-input-number-icon px-animation__loading" })])) : createCommentVNode("", !0),
-			unref(Yo).suffix ? (openBlock(), createElementBlock("div", _hoisted_6$2, [renderSlot(t.$slots, "suffix")])) : createCommentVNode("", !0),
+			unref(Jo).suffix ? (openBlock(), createElementBlock("div", _hoisted_6$2, [renderSlot(t.$slots, "suffix")])) : createCommentVNode("", !0),
 			createElementVNode("canvas", {
 				class: "px-input-number-canvas",
 				ref_key: "canvasRef",
@@ -2968,7 +2973,7 @@ var _hoisted_1$13 = [
 		"focus"
 	],
 	setup(e, { expose: t, emit: n }) {
-		let r = e, i = inject(FORM_ITEM_PROVIDE), o = n, [u, g, b] = useComposition({ afterComposition: (e) => {
+		let r = e, i = inject(FORM_ITEM_PROVIDE, void 0), o = n, [u, g, b] = useComposition({ afterComposition: (e) => {
 			nextTick(() => {
 				G(e);
 			});
@@ -2984,25 +2989,25 @@ var _hoisted_1$13 = [
 			x.value = t, !u.value && (r.maxLength && (r.countGraphemes && r.sliceGraphemes ? (await nextTick(), t = r.sliceGraphemes(t, r.maxLength)) : t = t.slice(0, r.maxLength)), x.value = t, o("input", t, e), w(t), i == null || i.inputHandler());
 		}, K = async () => {
 			await w(""), o("change", ""), o("clear", ""), i == null || i.changeHandler();
-		}, jo = (e) => {
+		}, Ao = (e) => {
 			let t = e.target;
 			U(), o("change", t.value, e), i == null || i.changeHandler();
-		}, q = ref(!1), No = () => {
+		}, q = ref(!1), Mo = () => {
 			r.autoResize && L.value && z.value && (L.value.style.height = z.value + "px");
 		};
 		watch(z, () => {
-			No();
+			Mo();
 		});
-		let Po = (e) => {
-			No(), q.value = !1, o("blur", e), i == null || i.blurHandler();
-		}, Fo = (e) => {
-			No(), q.value = !0, o("focus", e);
-		}, Lo = computed(() => r.clearable && q.value && !T.value && !k.value && !!x.value), Ro = () => {
+		let No = (e) => {
+			Mo(), q.value = !1, o("blur", e), i == null || i.blurHandler();
+		}, Po = (e) => {
+			Mo(), q.value = !0, o("focus", e);
+		}, Io = computed(() => r.clearable && q.value && !T.value && !k.value && !!x.value), Lo = () => {
 			var e;
 			(e = L.value) == null || e.focus();
 		}, J = ref(!1), Y = () => {
 			J.value = !0;
-		}, zo = () => {
+		}, Ro = () => {
 			J.value = !1;
 		};
 		t({
@@ -3029,22 +3034,22 @@ var _hoisted_1$13 = [
 			N
 		], () => {
 			setTimeout(() => {
-				Ho();
+				Vo();
 			});
 		});
-		let Bo = () => {
+		let zo = () => {
 			let e = canvasPreprocess(P, I);
 			if (!e) return;
 			let { ctx: t, width: n, height: r } = e, i = calcPixelSize(), a = N.value === "normal" ? (J.value || q.value) && !T.value && !k.value ? getGlobalThemeColor("primary", 6) : getGlobalThemeColor("neutral", 10) : getGlobalThemeColor(N.value === "error" ? "danger" : N.value, 6), o = T.value ? getGlobalThemeColor("neutral", 6) : getGlobalThemeColor("neutral", 1);
 			a && o && draw(t, n, r, a, o, i);
-		}, Ho = Ue(Bo, 0, { maxWait: 50 });
+		}, Vo = Ue(zo, 0, { maxWait: 50 });
 		return onMounted(() => {
 			nextTick(() => {
-				Bo();
+				zo();
 			}), setTimeout(() => {
-				No();
+				Mo();
 			});
-		}), useResizeObserver(P, Ho), useWatchGlobalCssVal(Ho), useTransitionEnd(P, Bo), (t, n) => (openBlock(), createElementBlock("div", {
+		}), useResizeObserver(P, Vo), useWatchGlobalCssVal(Vo), useTransitionEnd(P, zo), (t, n) => (openBlock(), createElementBlock("div", {
 			class: normalizeClass(["pixelium px-textarea", {
 				[`px-textarea__${unref(M)}`]: !!unref(M),
 				"px-textarea__disabled": !!unref(T),
@@ -3052,11 +3057,11 @@ var _hoisted_1$13 = [
 			}]),
 			ref_key: "wrapperRef",
 			ref: P,
-			onClick: Ro,
+			onClick: Lo,
 			onMouseenter: Y,
-			onMouseleave: zo,
-			onFocusout: Po,
-			onFocusin: Fo
+			onMouseleave: Ro,
+			onFocusout: No,
+			onFocusin: Po
 		}, [
 			createElementVNode("textarea", {
 				class: "px-textarea-inner",
@@ -3072,12 +3077,12 @@ var _hoisted_1$13 = [
 					maxHeight: unref(H) ? unref(H) + "px" : void 0
 				}),
 				onInput: withModifiers(G, ["stop"]),
-				onChange: withModifiers(jo, ["stop"]),
+				onChange: withModifiers(Ao, ["stop"]),
 				onCompositionstart: n[0] || (n[0] = (...e) => unref(g) && unref(g)(...e)),
 				onCompositionend: n[1] || (n[1] = (...e) => unref(b) && unref(b)(...e))
 			}, null, 44, _hoisted_1$13),
 			createElementVNode("div", _hoisted_2$6, [
-				Lo.value ? (openBlock(), createElementBlock("div", _hoisted_3$6, [createVNode(unref(times_circle_solid_default), {
+				Io.value ? (openBlock(), createElementBlock("div", _hoisted_3$6, [createVNode(unref(times_circle_solid_default), {
 					class: "px-textarea-icon",
 					onClick: K
 				})])) : createCommentVNode("", !0),
@@ -3270,7 +3275,7 @@ var times_default = /* @__PURE__ */ defineComponent({
 		}
 	},
 	setup(e) {
-		let t = e, n = inject(FORM_PROVIDE), r = inject(FORM_ITEM_PROVIDE), i = createProvideComputed("disabled", [
+		let t = e, n = inject(FORM_PROVIDE, void 0), r = inject(FORM_ITEM_PROVIDE, void 0), i = createProvideComputed("disabled", [
 			r,
 			n,
 			t
@@ -3331,7 +3336,7 @@ var input_group_label_default = /* @__PURE__ */ defineComponent({
 			ref(0),
 			ref(!1),
 			ref(!1)
-		], p = inject(INPUT_GROUP_PROVIDE), g = inject(FORM_ITEM_PROVIDE), x = createProvideComputed("borderRadius", [i.value && p, n]), w = createProvideComputed("size", () => [
+		], p = inject(INPUT_GROUP_PROVIDE, void 0), g = inject(FORM_ITEM_PROVIDE, void 0), x = createProvideComputed("borderRadius", [i.value && p, n]), w = createProvideComputed("size", () => [
 			i.value && p,
 			n.size && n,
 			g,
@@ -3539,7 +3544,7 @@ var popup_wrapper_default = /* @__PURE__ */ defineComponent({
 				let r = getComputedStyle(e), i = r.boxSizing, a = t.boxSizing, o = parseFloat(r.paddingLeft) + parseFloat(r.paddingRight), s = parseFloat(t.paddingLeft) + parseFloat(t.paddingRight), c = parseFloat(r.borderLeftWidth) + parseFloat(r.borderRightWidth), l = parseFloat(r.width);
 				i === "border-box" ? a === "border-box" ? P.value = l : P.value = l - s - n : a === "border-box" ? P.value = l + o + c : P.value = l - s - n + o + c, await nextTick();
 			} else P.value = void 0;
-			let o = calcPixelSize(), l = Math.max(i.borderRadius || o, o), u = Math.max(0, l - calcWhenLeaveBaseline(o, l) + o) + o, { x: p, y: T, middlewareData: j, placement: To } = await computePosition(e, c.value, {
+			let o = calcPixelSize(), l = Math.max(i.borderRadius || o, o), u = Math.max(0, l - calcWhenLeaveBaseline(o, l) + o) + o, { x: p, y: T, middlewareData: j, placement: wo } = await computePosition(e, c.value, {
 				placement: i.placement,
 				middleware: [
 					offset(i.offset),
@@ -3556,7 +3561,7 @@ var popup_wrapper_default = /* @__PURE__ */ defineComponent({
 				top: `${T}px`
 			};
 			let { x: N, y: I } = j.arrow ?? {};
-			k.value = To.split("-")[0], C.value = {
+			k.value = wo.split("-")[0], C.value = {
 				left: N ? `${N + r}px` : void 0,
 				top: I ? `${I + a}px` : void 0
 			}, w.value = N ? N + r : void 0, D.value = I ? I + a : void 0, nextTick(() => {
@@ -3591,7 +3596,7 @@ var popup_wrapper_default = /* @__PURE__ */ defineComponent({
 		let K = useDarkMode();
 		onMounted(() => {
 			nextTick(() => {
-				jo(), V(!!i.visible);
+				Ao(), V(!!i.visible);
 			});
 		}), watch([
 			K,
@@ -3603,18 +3608,18 @@ var popup_wrapper_default = /* @__PURE__ */ defineComponent({
 			() => i.variant,
 			() => i.arrow
 		], () => {
-			jo();
+			Ao();
 		});
-		let jo = () => {
+		let Ao = () => {
 			if (!k.value) return;
 			let e = canvasPreprocess(c, b);
 			if (!e) return;
 			let { ctx: t, width: n, height: r } = e, a = calcPixelSize(), o = fillArr(Math.max(i.borderRadius || a, a), 4), s = i.arrow ? a * 2 : 0, l = k.value === "left" || k.value === "right" ? s : 0, u = k.value === "top" || k.value === "bottom" ? s : 0, p = getBorderColor(i.variant), g = calcBorderCornerCenter(o, n, r, a, l, u), x = BORDER_CORNER_RAD_RANGE, C = k.value === "bottom" ? s : 0, T = k.value === "right" ? s : 0;
 			p && drawBorder$8(t, n, r, g, o, x, p, a, l, u, C, T);
-			let wo = getBackgroundColor(i.variant);
-			wo && floodFill(t, Math.round((n - l) / 2 + T), Math.round((r - u) / 2 + C), wo), i.arrow && p && wo && drawArrow(t, n, r, p, wo, a, k.value, N.value, w.value || 0, D.value || 0);
+			let Co = getBackgroundColor(i.variant);
+			Co && floodFill(t, Math.round((n - l) / 2 + T), Math.round((r - u) / 2 + C), Co), i.arrow && p && Co && drawArrow(t, n, r, p, Co, a, k.value, N.value, w.value || 0, D.value || 0);
 		};
-		return useResizeObserver(c, z), useWatchGlobalCssVal(z), useTransitionEnd(c, jo), (e, t) => (openBlock(), createBlock(popup_wrapper_default, {
+		return useResizeObserver(c, z), useWatchGlobalCssVal(z), useTransitionEnd(c, Ao), (e, t) => (openBlock(), createBlock(popup_wrapper_default, {
 			root: i.root,
 			zIndex: i.zIndex,
 			visible: i.visible,
@@ -3917,7 +3922,7 @@ var popup_default = /* @__PURE__ */ defineComponent({
 			C(), b.value = w(e), await D(b.value), g("open", t);
 		}
 		async function D(e, t = !1) {
-			e && (Eo == null || Eo.observe(e)), o.value && !t ? (g("update:visible", !0), await nextTick(() => {}), c.value = !!i.visible) : c.value = !0;
+			e && (To == null || To.observe(e)), o.value && !t ? (g("update:visible", !0), await nextTick(() => {}), c.value = !!i.visible) : c.value = !0;
 		}
 		async function k(e) {
 			if (e.type === "mouseup" || e.type === "touchend") {
@@ -3934,14 +3939,14 @@ var popup_default = /* @__PURE__ */ defineComponent({
 		}, M = ref(!1), N = (e) => {
 			i.trigger !== "click" && (M.value || k(e));
 		}, P = () => {
-			inBrowser() && !b.value && u.value && u.value.firstVNode && (Eo == null || Eo.disconnect(), b.value = w(u.value.firstVNode), b.value instanceof HTMLElement && (Eo == null || Eo.observe(b.value)));
+			inBrowser() && !b.value && u.value && u.value.firstVNode && (To == null || To.disconnect(), b.value = w(u.value.firstVNode), b.value instanceof HTMLElement && (To == null || To.observe(b.value)));
 		}, I = (e) => {
 			e ? (P(), b.value && D(b.value, !0)) : c.value = !1;
 		};
 		watch(() => i.visible, () => {
 			I(!!i.visible);
 		});
-		let Eo = inBrowser() ? new ResizeObserver(() => {
+		let To = inBrowser() ? new ResizeObserver(() => {
 			L();
 		}) : null;
 		onMounted(() => {
@@ -3959,9 +3964,9 @@ var popup_default = /* @__PURE__ */ defineComponent({
 			triggerContent: l,
 			updateRenderState: L
 		});
-		let z = useSlots(), V = (e) => inBrowser() ? b.value instanceof HTMLElement : !1, Do = qe(() => {
+		let z = useSlots(), V = (e) => inBrowser() ? b.value instanceof HTMLElement : !1, Eo = qe(() => {
 			L();
-		}, 20), ko = () => {
+		}, 20), Oo = () => {
 			M.value = !0;
 		}, H = () => {
 			M.value = !1;
@@ -3973,8 +3978,8 @@ var popup_default = /* @__PURE__ */ defineComponent({
 				disabled: i.disabled,
 				onClose: k,
 				onOpen: T,
-				onDrag: Do,
-				onDragStart: ko,
+				onDrag: Eo,
+				onDragStart: Oo,
 				onDragEnd: H,
 				ref: (e) => u.value = e
 			}, { default: () => {
@@ -4147,13 +4152,13 @@ var popup_default = /* @__PURE__ */ defineComponent({
 		var i;
 		let g = t, x = r, [w, j, M] = useComposition({ afterComposition: (e) => {
 			nextTick(() => {
-				Wo(e);
+				Uo(e);
 			});
 		} }), N = getCurrentInstance(), P = ref((N == null || (i = N.parent) == null ? void 0 : i.type.name) === "InputGroup"), [I, L, z] = P.value ? useIndexOfChildren(INPUT_GROUP_UPDATE) : [
 			ref(0),
 			ref(!1),
 			ref(!1)
-		], H = inject(INPUT_GROUP_PROVIDE), U = inject(FORM_ITEM_PROVIDE), W = createProvideComputed("borderRadius", [P.value && H, g]), G = createProvideComputed("size", () => [
+		], H = inject(INPUT_GROUP_PROVIDE, void 0), U = inject(FORM_ITEM_PROVIDE, void 0), W = createProvideComputed("borderRadius", [P.value && H, g]), G = createProvideComputed("size", () => [
 			P.value && H,
 			g.size && g,
 			U,
@@ -4162,62 +4167,62 @@ var popup_default = /* @__PURE__ */ defineComponent({
 			P.value && H,
 			U,
 			g
-		], "or"), Po = createProvideComputed("readonly", [
+		], "or"), No = createProvideComputed("readonly", [
 			P.value && H,
 			U,
 			g
-		], "or"), Lo = createProvideComputed("status", [U, g]), Ro = computed(() => {
+		], "or"), Io = createProvideComputed("status", [U, g]), Lo = computed(() => {
 			if (I.value >= 0) {
 				var e;
 				return P.value ? (H == null || (e = H.childrenInfo.value.find((e) => e.index === I.value + 1)) == null ? void 0 : e.variant) === "text" : !1;
 			} else return !1;
-		}), J = computed(() => G.value === "small" ? "small" : "medium"), [Y, zo] = useControlledMode("modelValue", g, x, {
+		}), J = computed(() => G.value === "small" ? "small" : "medium"), [Y, Ro] = useControlledMode("modelValue", g, x, {
 			defaultField: "defaultValue",
 			transform: (e) => S(e) ? [...e] : []
-		}), [Bo, Ho] = useControlledMode("inputValue", g, x, {
+		}), [zo, Vo] = useControlledMode("inputValue", g, x, {
 			defaultField: "defaultInputValue",
 			transform: (e) => e || ""
-		}), X = shallowRef(null), $ = shallowRef(null), Uo = shallowRef(null), Wo = async (e) => {
+		}), X = shallowRef(null), $ = shallowRef(null), Ho = shallowRef(null), Uo = async (e) => {
 			let t = e.target.value;
-			Bo.value = t, !w.value && (x("input", t, e), Ho(t));
-		}, Go = async () => {
+			zo.value = t, !w.value && (x("input", t, e), Vo(t));
+		}, Wo = async () => {
 			let e = [];
-			await zo(e), await Ho(""), x("clear", e), x("change", e), x("inputChange", ""), U == null || U.changeHandler();
-		}, Ko = async (e, t) => {
+			await Ro(e), await Vo(""), x("clear", e), x("change", e), x("inputChange", ""), U == null || U.changeHandler();
+		}, Go = async (e, t) => {
 			let n = Y.value ? [...Y.value] : [], r = n.splice(e, 1);
-			await zo(n), x("tagClose", r[0], e, t), x("change", n), U == null || U.changeHandler();
-		}, qo = (e) => {
+			await Ro(n), x("tagClose", r[0], e, t), x("change", n), U == null || U.changeHandler();
+		}, Ko = (e) => {
 			let t = e.target;
 			x("inputChange", t.value, e);
-		}, Jo = ref(!1), Yo = async (e) => {
-			Jo.value = !1, await Ho(""), x("inputChange", ""), x("blur", e), U == null || U.blurHandler();
-		}, Zo = (e) => {
-			Jo.value = !0, x("focus", e);
-		}, Qo = async (e) => {
-			let t = (Bo.value || "").trim();
+		}, qo = ref(!1), Jo = async (e) => {
+			qo.value = !1, await Vo(""), x("inputChange", ""), x("blur", e), U == null || U.blurHandler();
+		}, Xo = (e) => {
+			qo.value = !0, x("focus", e);
+		}, Zo = async (e) => {
+			let t = (zo.value || "").trim();
 			if (!t || g.maxLength && Y.value && Y.value.length >= g.maxLength) return;
 			let n = Y.value ? [...Y.value] : [];
-			n.push(t), await zo(n), await Ho(""), x("tagAdd", t, e), x("change", n), x("inputChange", ""), U == null || U.changeHandler();
-		}, es = () => {
+			n.push(t), await Ro(n), await Vo(""), x("tagAdd", t, e), x("change", n), x("inputChange", ""), U == null || U.changeHandler();
+		}, $o = () => {
 			var e;
-			(e = Uo.value) == null || e.focus();
-		}, ts = ref(!1), ns = () => {
-			ts.value = !0;
-		}, rs = () => {
-			ts.value = !1;
-		}, is = computed(() => g.clearable && !q.value && !Po.value), as = computed(() => !q.value && !Po.value), os = useSlots();
+			(e = Ho.value) == null || e.focus();
+		}, es = ref(!1), ts = () => {
+			es.value = !0;
+		}, ns = () => {
+			es.value = !1;
+		}, rs = computed(() => g.clearable && !q.value && !No.value), is = computed(() => !q.value && !No.value), as = useSlots();
 		n({
 			focus: () => {
 				var e;
-				(e = Uo.value) == null || e.focus();
+				(e = Ho.value) == null || e.focus();
 			},
 			blur: () => {
 				var e;
-				(e = Uo.value) == null || e.blur();
+				(e = Ho.value) == null || e.blur();
 			},
-			clear: () => Go()
+			clear: () => Wo()
 		});
-		let ss = computed(() => !!g.collapseTags && A(g.maxDisplayTags) && g.maxDisplayTags >= 0), cs = computed(() => Y.value ? ss.value ? Y.value.slice(0, g.maxDisplayTags) : Y.value : []), ls = computed(() => Y.value && ss.value ? Y.value.slice(g.maxDisplayTags) : []), us = computed(() => {
+		let os = computed(() => !!g.collapseTags && A(g.maxDisplayTags) && g.maxDisplayTags >= 0), ss = computed(() => Y.value ? os.value ? Y.value.slice(0, g.maxDisplayTags) : Y.value : []), cs = computed(() => Y.value && os.value ? Y.value.slice(g.maxDisplayTags) : []), ls = computed(() => {
 			var e;
 			return {
 				...g.popoverProps,
@@ -4233,32 +4238,32 @@ var popup_default = /* @__PURE__ */ defineComponent({
 			W,
 			K,
 			G,
-			Po,
+			No,
 			q,
-			() => os,
+			() => as,
 			useDarkMode(),
-			Jo,
-			ts,
-			Lo,
-			Ro
+			qo,
+			es,
+			Io,
+			Lo
 		], () => {
 			setTimeout(() => {
-				ds();
+				us();
 			});
 		});
-		let ds = () => {
+		let us = () => {
 			let e = canvasPreprocess(X, $);
 			if (!e) return;
-			let { ctx: t, width: n, height: r, canvas: i } = e, a = calcPixelSize(), o = getBorderRadius(i, a, W.value, K.value, G.value || "medium", P.value, L.value, z.value), s = Lo.value === "normal" ? (ts.value || Jo.value) && !q.value && !Po.value ? getGlobalThemeColor("primary", 6) : getGlobalThemeColor("neutral", 10) : getGlobalThemeColor(Lo.value === "error" ? "danger" : Lo.value, 6), c = calcBorderCornerCenter(o, n, r, a);
-			s && drawBorder$7(t, n, r, c, o, BORDER_CORNER_RAD_RANGE, s, a, P.value, L.value, z.value, Ro.value);
+			let { ctx: t, width: n, height: r, canvas: i } = e, a = calcPixelSize(), o = getBorderRadius(i, a, W.value, K.value, G.value || "medium", P.value, L.value, z.value), s = Io.value === "normal" ? (es.value || qo.value) && !q.value && !No.value ? getGlobalThemeColor("primary", 6) : getGlobalThemeColor("neutral", 10) : getGlobalThemeColor(Io.value === "error" ? "danger" : Io.value, 6), c = calcBorderCornerCenter(o, n, r, a);
+			s && drawBorder$7(t, n, r, c, o, BORDER_CORNER_RAD_RANGE, s, a, P.value, L.value, z.value, Lo.value);
 			let l = q.value ? getGlobalThemeColor("neutral", 6) : getGlobalThemeColor("neutral", 1);
 			l && floodFill(t, Math.round(n / 2), Math.round(r / 2), l);
 		};
 		return onMounted(() => {
 			nextTick(() => {
-				ds();
+				us();
 			});
-		}), useResizeObserver(X, ds), useWatchGlobalCssVal(ds), useTransitionEnd(X, ds), (n, r) => {
+		}), useResizeObserver(X, us), useWatchGlobalCssVal(us), useTransitionEnd(X, us), (n, r) => {
 			var i;
 			return openBlock(), createElementBlock("div", {
 				class: normalizeClass(["pixelium px-input-tag", {
@@ -4269,23 +4274,23 @@ var popup_default = /* @__PURE__ */ defineComponent({
 				}]),
 				ref_key: "wrapperRef",
 				ref: X,
-				onClick: es,
-				onMouseenter: ns,
-				onMouseleave: rs,
-				onFocusout: Yo,
-				onFocusin: Zo
+				onClick: $o,
+				onMouseenter: ts,
+				onMouseleave: ns,
+				onFocusout: Jo,
+				onFocusin: Xo
 			}, [
-				unref(os).prefix ? (openBlock(), createElementBlock("div", _hoisted_1$10, [renderSlot(n.$slots, "prefix")])) : createCommentVNode("", !0),
+				unref(as).prefix ? (openBlock(), createElementBlock("div", _hoisted_1$10, [renderSlot(n.$slots, "prefix")])) : createCommentVNode("", !0),
 				createElementVNode("div", _hoisted_2$5, [
-					(openBlock(!0), createElementBlock(Fragment, null, renderList(cs.value, (e, t) => (openBlock(), createBlock(tag_default, mergeProps({
+					(openBlock(!0), createElementBlock(Fragment, null, renderList(ss.value, (e, t) => (openBlock(), createBlock(tag_default, mergeProps({
 						key: t,
 						size: J.value,
 						variant: g.tagVariant,
 						theme: g.tagTheme,
-						closable: as.value,
+						closable: is.value,
 						disabled: unref(q),
 						color: g.tagColor
-					}, { ref_for: !0 }, g.tagProps, { onClose: (e) => Ko(t, e) }), {
+					}, { ref_for: !0 }, g.tagProps, { onClose: (e) => Go(t, e) }), {
 						default: withCtx(() => [renderSlot(n.$slots, "tag", {
 							tag: e,
 							index: t
@@ -4300,16 +4305,16 @@ var popup_default = /* @__PURE__ */ defineComponent({
 						"color",
 						"onClose"
 					]))), 128)),
-					ls.value.length && ss.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [g.collapseTagsPopover ? (openBlock(), createBlock(popover_default, normalizeProps(mergeProps({ key: 1 }, us.value)), {
-						content: withCtx(() => [createElementVNode("div", _hoisted_3$5, [(openBlock(!0), createElementBlock(Fragment, null, renderList(ls.value, (e, t) => (openBlock(), createBlock(tag_default, mergeProps({
+					cs.value.length && os.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [g.collapseTagsPopover ? (openBlock(), createBlock(popover_default, normalizeProps(mergeProps({ key: 1 }, ls.value)), {
+						content: withCtx(() => [createElementVNode("div", _hoisted_3$5, [(openBlock(!0), createElementBlock(Fragment, null, renderList(cs.value, (e, t) => (openBlock(), createBlock(tag_default, mergeProps({
 							key: t,
 							size: J.value,
 							variant: g.tagVariant,
 							theme: g.tagTheme,
-							closable: as.value,
+							closable: is.value,
 							disabled: unref(q),
 							color: g.tagColor
-						}, { ref_for: !0 }, g.tagProps, { onClose: (e) => Ko(t + Math.floor(g.maxDisplayTags), e) }), {
+						}, { ref_for: !0 }, g.tagProps, { onClose: (e) => Go(t + Math.floor(g.maxDisplayTags), e) }), {
 							default: withCtx(() => [renderSlot(n.$slots, "tag", {
 								tag: e,
 								index: t + Math.floor(g.maxDisplayTags)
@@ -4332,9 +4337,9 @@ var popup_default = /* @__PURE__ */ defineComponent({
 							color: g.tagColor
 						}, g.tagProps), {
 							default: withCtx(() => [renderSlot(n.$slots, "tag", {
-								tag: `+${ls.value.length}`,
+								tag: `+${cs.value.length}`,
 								index: -1
-							}, () => [createTextVNode("+" + toDisplayString(ls.value.length), 1)])]),
+							}, () => [createTextVNode("+" + toDisplayString(cs.value.length), 1)])]),
 							_: 3
 						}, 16, [
 							"size",
@@ -4353,9 +4358,9 @@ var popup_default = /* @__PURE__ */ defineComponent({
 						color: g.tagColor
 					}, g.tagProps), {
 						default: withCtx(() => [renderSlot(n.$slots, "tag", {
-							tag: `+${ls.value.length}`,
+							tag: `+${cs.value.length}`,
 							index: -1
-						}, () => [createTextVNode("+" + toDisplayString(ls.value.length), 1)])]),
+						}, () => [createTextVNode("+" + toDisplayString(cs.value.length), 1)])]),
 						_: 3
 					}, 16, [
 						"size",
@@ -4366,26 +4371,26 @@ var popup_default = /* @__PURE__ */ defineComponent({
 					]))], 64)) : createCommentVNode("", !0),
 					createElementVNode("input", {
 						class: "px-input-tag-inner",
-						value: unref(Bo),
+						value: unref(zo),
 						ref_key: "inputRef",
-						ref: Uo,
+						ref: Ho,
 						placeholder: unref(Y) && unref(Y).length ? "" : g.placeholder,
-						disabled: unref(q) || unref(Po),
+						disabled: unref(q) || unref(No),
 						autofocus: t.autofocus,
-						onInput: withModifiers(Wo, ["stop"]),
-						onChange: withModifiers(qo, ["stop"]),
+						onInput: withModifiers(Uo, ["stop"]),
+						onChange: withModifiers(Ko, ["stop"]),
 						onCompositionstart: r[0] || (r[0] = (...e) => unref(j) && unref(j)(...e)),
 						onCompositionend: r[1] || (r[1] = (...e) => unref(M) && unref(M)(...e)),
-						onKeydown: withKeys(Qo, ["enter"])
+						onKeydown: withKeys(Zo, ["enter"])
 					}, null, 40, _hoisted_4$3)
 				]),
-				is.value ? (openBlock(), createElementBlock("div", _hoisted_5$2, [ts.value && (i = unref(Y)) != null && i.length ? (openBlock(), createBlock(unref(times_circle_solid_default), {
+				rs.value ? (openBlock(), createElementBlock("div", _hoisted_5$2, [es.value && (i = unref(Y)) != null && i.length ? (openBlock(), createBlock(unref(times_circle_solid_default), {
 					key: 0,
 					class: "px-input-tag-icon",
-					onClick: Go
+					onClick: Wo
 				})) : (openBlock(), createElementBlock("div", _hoisted_6$1))])) : createCommentVNode("", !0),
 				g.loading ? (openBlock(), createElementBlock("div", _hoisted_7$1, [createVNode(unref(spinner_third_solid_default), { class: "px-input-tag-icon px-animation__loading" })])) : createCommentVNode("", !0),
-				unref(os).suffix ? (openBlock(), createElementBlock("div", _hoisted_8$1, [renderSlot(n.$slots, "suffix")])) : createCommentVNode("", !0),
+				unref(as).suffix ? (openBlock(), createElementBlock("div", _hoisted_8$1, [renderSlot(n.$slots, "suffix")])) : createCommentVNode("", !0),
 				createElementVNode("canvas", {
 					class: "px-input-tag-canvas",
 					ref_key: "canvasRef",
@@ -4620,7 +4625,7 @@ var MIN_CHUNK_SIZE = 1e3, virtual_list_default = /* @__PURE__ */ defineComponent
 		], () => {
 			I.value = P();
 		});
-		let Eo = computed(() => {
+		let To = computed(() => {
 			let { start: e } = I.value;
 			return M(e - 1);
 		}), L = () => {
@@ -4681,7 +4686,7 @@ var MIN_CHUNK_SIZE = 1e3, virtual_list_default = /* @__PURE__ */ defineComponent
 			}, null), createVNode("div", {
 				ref: o,
 				class: "px-virtual-list-item",
-				style: { transform: `translateY(${Eo.value}px)` }
+				style: { transform: `translateY(${To.value}px)` }
 			}, [s.map((n, r) => {
 				let i = t + r, a = n.key ?? i, o = n.render, s;
 				if (y(o)) s = createVNode("div", null, [o]);
@@ -4834,12 +4839,12 @@ var MIN_CHUNK_SIZE = 1e3, virtual_list_default = /* @__PURE__ */ defineComponent
 			ref(0),
 			ref(!1),
 			ref(!1)
-		], M = inject(INPUT_GROUP_PROVIDE), N = inject(FORM_ITEM_PROVIDE), P = createProvideComputed("borderRadius", [T.value && M, s]), I = createProvideComputed("size", () => [
+		], M = inject(INPUT_GROUP_PROVIDE, void 0), N = inject(FORM_ITEM_PROVIDE, void 0), P = createProvideComputed("borderRadius", [T.value && M, s]), I = createProvideComputed("size", () => [
 			T.value && M,
 			s.size && s,
 			N,
 			s
-		], "nullish", (e) => e || "medium"), Eo = createProvideComputed("shape", [T.value && M, s], "nullish", (e) => e || "rect"), L = createProvideComputed("disabled", [
+		], "nullish", (e) => e || "medium"), To = createProvideComputed("shape", [T.value && M, s], "nullish", (e) => e || "rect"), L = createProvideComputed("disabled", [
 			N,
 			T.value && M,
 			s
@@ -4847,45 +4852,45 @@ var MIN_CHUNK_SIZE = 1e3, virtual_list_default = /* @__PURE__ */ defineComponent
 			N,
 			T.value && M,
 			s
-		], "or"), V = createProvideComputed("status", [N, s]), Do = computed(() => {
+		], "or"), V = createProvideComputed("status", [N, s]), Eo = computed(() => {
 			if (D.value >= 0) {
 				var e;
 				return T.value ? (M == null || (e = M.childrenInfo.value.find((e) => e.index === D.value + 1)) == null ? void 0 : e.variant) === "text" : !1;
 			} else return !1;
-		}), [ko, H] = useControlledMode("modelValue", s, c, {
+		}), [Oo, H] = useControlledMode("modelValue", s, c, {
 			defaultField: "defaultValue",
 			transform: (e) => e || ""
-		}), U = shallowRef(null), Ao = shallowRef(null), G = shallowRef(null), K = async () => {
+		}), U = shallowRef(null), ko = shallowRef(null), G = shallowRef(null), K = async () => {
 			if (await nextTick(), s.shouldShowPopover) {
-				Uo.value = !!s.shouldShowPopover(ko.value || "", $.value);
+				Ho.value = !!s.shouldShowPopover(Oo.value || "", $.value);
 				return;
 			}
-			ko.value && (!s.showPopoverEmpty && $.value.length || s.showPopoverEmpty) ? Uo.value = !0 : Uo.value = !1;
+			Oo.value && (!s.showPopoverEmpty && $.value.length || s.showPopoverEmpty) ? Ho.value = !0 : Ho.value = !1;
 		}, q = async (e) => {
 			e.stopPropagation();
 			let t = e.target.value;
-			ko.value = t, !l.value && (c("input", t, e), N == null || N.inputHandler(), await H(t), K());
-		}, No = async () => {
+			Oo.value = t, !l.value && (c("input", t, e), N == null || N.inputHandler(), await H(t), K());
+		}, Mo = async () => {
 			await H(""), c("change", ""), c("clear", ""), N == null || N.changeHandler();
-		}, Po = (e) => {
+		}, No = (e) => {
 			e.stopPropagation();
 			let t = e.target;
 			c("change", t.value, e), N == null || N.changeHandler();
-		}, Fo = ref(!1), Io = (e) => {
-			e.stopPropagation(), c("blur", e), Fo.value = !1, N == null || N.blurHandler();
-		}, Lo = (e) => {
-			e.stopPropagation(), c("focus", e), Fo.value = !0;
-		}, Ro = () => {
+		}, Po = ref(!1), Fo = (e) => {
+			e.stopPropagation(), c("blur", e), Po.value = !1, N == null || N.blurHandler();
+		}, Io = (e) => {
+			e.stopPropagation(), c("focus", e), Po.value = !0;
+		}, Lo = () => {
 			var e;
 			(e = G.value) == null || e.focus();
 		}, J = ref(!1), Y = () => {
 			J.value = !0;
-		}, zo = () => {
+		}, Ro = () => {
 			J.value = !1;
-		}, Bo = computed(() => s.clearable && !L.value && !z.value), Ho = async (e, t, n) => {
-			let r = s.append ? ko.value + e : e;
-			await H(r), Uo.value = !1, c("select", r, t, n), c("change", r, n), N == null || N.changeHandler();
-		}, X = useSlots(), $ = computed(() => s.filter ? s.filter(ko.value || "", s.options || []) : !ko.value || !ko.value.trim() ? [] : defaultFilter(ko.value, s.options || []));
+		}, zo = computed(() => s.clearable && !L.value && !z.value), Vo = async (e, t, n) => {
+			let r = s.append ? Oo.value + e : e;
+			await H(r), Ho.value = !1, c("select", r, t, n), c("change", r, n), N == null || N.changeHandler();
+		}, X = useSlots(), $ = computed(() => s.filter ? s.filter(Oo.value || "", s.options || []) : !Oo.value || !Oo.value.trim() ? [] : defaultFilter(Oo.value, s.options || []));
 		n({
 			focus: () => {
 				var e;
@@ -4895,70 +4900,70 @@ var MIN_CHUNK_SIZE = 1e3, virtual_list_default = /* @__PURE__ */ defineComponent
 				var e;
 				(e = G.value) == null || e.blur();
 			},
-			clear: () => No(),
+			clear: () => Mo(),
 			select: () => {
 				var e;
 				(e = G.value) == null || e.select();
 			},
 			[GET_ELEMENT_RENDERED]: () => U.value
 		});
-		let Uo = ref(!1), Wo = (e) => {
-			e || (Uo.value = e);
+		let Ho = ref(!1), Uo = (e) => {
+			e || (Ho.value = e);
 		};
 		watch([
 			k,
 			j,
 			P,
-			Eo,
+			To,
 			I,
 			L,
 			() => X,
 			useDarkMode(),
-			Fo,
+			Po,
 			J,
 			z,
 			V,
-			Do
+			Eo
 		], () => {
 			setTimeout(() => {
-				Go();
+				Wo();
 			});
 		});
-		let Go = () => {
-			let e = canvasPreprocess(U, Ao);
+		let Wo = () => {
+			let e = canvasPreprocess(U, ko);
 			if (!e) return;
-			let { ctx: t, width: n, height: r, canvas: i } = e, a = calcPixelSize(), o = getBorderRadius(i, a, P.value, Eo.value || "rect", I.value || "medium", T.value, k.value, j.value), s = V.value === "normal" ? (J.value || Fo.value) && !L.value && !z.value ? getGlobalThemeColor("primary", 6) : getGlobalThemeColor("neutral", 10) : getGlobalThemeColor(V.value === "error" ? "danger" : V.value, 6), c = calcBorderCornerCenter(o, n, r, a);
-			s && drawBorder$6(t, n, r, c, o, BORDER_CORNER_RAD_RANGE, s, a, T.value, k.value, j.value, Do.value);
+			let { ctx: t, width: n, height: r, canvas: i } = e, a = calcPixelSize(), o = getBorderRadius(i, a, P.value, To.value || "rect", I.value || "medium", T.value, k.value, j.value), s = V.value === "normal" ? (J.value || Po.value) && !L.value && !z.value ? getGlobalThemeColor("primary", 6) : getGlobalThemeColor("neutral", 10) : getGlobalThemeColor(V.value === "error" ? "danger" : V.value, 6), c = calcBorderCornerCenter(o, n, r, a);
+			s && drawBorder$6(t, n, r, c, o, BORDER_CORNER_RAD_RANGE, s, a, T.value, k.value, j.value, Eo.value);
 			let l = L.value ? getGlobalThemeColor("neutral", 6) : getGlobalThemeColor("neutral", 1);
 			l && floodFill(t, Math.round(n / 2), Math.round(r / 2), l);
 		};
 		return onMounted(() => {
 			nextTick(() => {
-				Go();
+				Wo();
 			});
-		}), useResizeObserver(U, Go), useWatchGlobalCssVal(Go), useTransitionEnd(U, Go), () => {
+		}), useResizeObserver(U, Wo), useWatchGlobalCssVal(Wo), useTransitionEnd(U, Wo), () => {
 			let t = createVNode(Fragment, null, [
 				X.prefix && createVNode("div", { class: "px-auto-complete-prefix-wrapper" }, [X.prefix()]),
 				createVNode("input", {
 					ref: G,
 					class: "px-auto-complete-inner",
-					value: ko.value,
+					value: Oo.value,
 					placeholder: s.placeholder,
 					disabled: L.value || z.value,
 					autofocus: s.autofocus,
 					onInput: q,
-					onChange: Po,
+					onChange: No,
 					onCompositionstart: u,
 					onCompositionend: g
 				}, null),
-				Bo.value && createVNode("div", { class: "px-auto-complete-close-wrapper" }, [J.value && ko.value ? createVNode(times_circle_solid_default, {
+				zo.value && createVNode("div", { class: "px-auto-complete-close-wrapper" }, [J.value && Oo.value ? createVNode(times_circle_solid_default, {
 					class: "px-auto-complete-icon",
-					onClick: No
+					onClick: Mo
 				}, null) : createVNode("div", { class: "px-auto-complete-icon-placeholder" }, null)]),
 				s.loading && createVNode("div", { class: "px-auto-complete-loading-wrapper" }, [createVNode(spinner_third_solid_default, { class: "px-auto-complete-icon px-animation__loading" }, null)]),
 				X.suffix && createVNode("div", { class: "px-auto-complete-suffix-wrapper" }, [X.suffix()]),
 				createVNode("canvas", {
-					ref: Ao,
+					ref: ko,
 					class: "px-auto-complete-canvas"
 				}, null)
 			]), n = {}, r = w == null ? void 0 : w.vnode.scopeId, i = w == null ? void 0 : w.vnode.scopeId;
@@ -4969,8 +4974,8 @@ var MIN_CHUNK_SIZE = 1e3, virtual_list_default = /* @__PURE__ */ defineComponent
 				offset: 0,
 				"width-equal": !0,
 				arrow: !1,
-				visible: Uo.value,
-				"onUpdate:visible": Wo,
+				visible: Ho.value,
+				"onUpdate:visible": Uo,
 				trigger: "click",
 				contentStyle: { padding: `${a}px` },
 				destroyOnHide: s.optionsDestroyOnHide
@@ -4980,21 +4985,21 @@ var MIN_CHUNK_SIZE = 1e3, virtual_list_default = /* @__PURE__ */ defineComponent
 					class: [
 						"pixelium px-auto-complete",
 						I.value && `px-auto-complete__${I.value}`,
-						Eo.value && `px-auto-complete__${Eo.value}`,
+						To.value && `px-auto-complete__${To.value}`,
 						{ "px-auto-complete__inner": T.value },
 						{ "px-auto-complete__disabled": L.value }
 					],
-					onClick: Ro,
+					onClick: Lo,
 					onMouseenter: Y,
-					onMouseleave: zo,
-					onFocusout: Io,
-					onFocusin: Lo,
+					onMouseleave: Ro,
+					onFocusout: Fo,
+					onFocusin: Io,
 					...n,
 					...o
 				}, [t]),
 				content: () => $.value.length ? createVNode(option_list_default, {
 					options: $.value,
-					onSelect: Ho,
+					onSelect: Vo,
 					virtualScroll: s.virtualScroll,
 					virtualListProps: s.virtualListProps
 				}, {
@@ -5225,7 +5230,7 @@ var ANIMATION_DURATION$2 = 250, select_default = /* @__PURE__ */ defineComponent
 			ref(0),
 			ref(!1),
 			ref(!1)
-		], N = inject(INPUT_GROUP_PROVIDE), P = inject(FORM_ITEM_PROVIDE), I = createProvideComputed("borderRadius", [D.value && N, s]), Eo = createProvideComputed("size", () => [
+		], N = inject(INPUT_GROUP_PROVIDE, void 0), P = inject(FORM_ITEM_PROVIDE, void 0), I = createProvideComputed("borderRadius", [D.value && N, s]), To = createProvideComputed("size", () => [
 			D.value && N,
 			s.size && s,
 			P,
@@ -5238,18 +5243,18 @@ var ANIMATION_DURATION$2 = 250, select_default = /* @__PURE__ */ defineComponent
 			D.value && N,
 			P,
 			s
-		], "or"), Do = createProvideComputed("status", [P, s]), ko = computed(() => {
+		], "or"), Eo = createProvideComputed("status", [P, s]), Oo = computed(() => {
 			if (k.value >= 0) {
 				var e;
 				return D.value ? (N == null || (e = N.childrenInfo.value.find((e) => e.index === k.value + 1)) == null ? void 0 : e.variant) === "text" : !1;
 			} else return !1;
-		}), H = (e) => $n(e) || en(e) || s.multiple && S(e) && e.length === 0, [U, Ao] = useControlledMode("modelValue", s, c, {
+		}), H = (e) => $n(e) || en(e) || s.multiple && S(e) && e.length === 0, [U, ko] = useControlledMode("modelValue", s, c, {
 			defaultField: "defaultValue",
 			transform: (e) => s.multiple ? E(e) ? void 0 : S(e) ? [...e] : [e] : e
 		}), [G, K] = useControlledMode("inputValue", s, c, {
 			defaultField: "defaultInputValue",
 			transform: (e) => e || ""
-		}), No = computed(() => {
+		}), Mo = computed(() => {
 			if (!s.multiple || !s.options.length || H(U.value)) return [];
 			let e = /* @__PURE__ */ new Map();
 			return s.options.forEach((t) => {
@@ -5259,79 +5264,79 @@ var ANIMATION_DURATION$2 = 250, select_default = /* @__PURE__ */ defineComponent
 				});
 				else e.set(t.value, t.label);
 			}), U.value.map((t) => e.has(t) ? e.get(t) : String(t));
-		}), Fo = computed(() => {
+		}), Po = computed(() => {
 			if (s.multiple || !s.options.length || H(U.value)) return "";
 			let e = String(U.value);
 			return s.options.some((t) => y(t) ? U.value === t : "type" in t && t.type === "group" ? t.children.some((t) => y(t) ? U.value === t : t.value === U.value ? (e = t.label, !0) : !1) : t.value === U.value ? (e = t.label, !0) : !1), e;
-		}), Io = shallowRef(null), Lo = shallowRef(null), Ro = shallowRef(null), J = shallowRef(null), Y = shallowRef(null), zo = shallowRef(null);
+		}), Fo = shallowRef(null), Io = shallowRef(null), Lo = shallowRef(null), J = shallowRef(null), Y = shallowRef(null), Ro = shallowRef(null);
 		watch(() => s.multiple, (e, t) => {
-			Ao(e && !t ? [U.value] : U.value[0] || null);
+			ko(e && !t ? [U.value] : U.value[0] || null);
 		});
-		let Bo = async () => {
+		let zo = async () => {
 			if (await nextTick(), s.shouldShowPopover) {
-				ps.value = !!s.shouldShowPopover(G.value || "", fs.value);
+				fs.value = !!s.shouldShowPopover(G.value || "", ds.value);
 				return;
 			}
-			ps.value = !0;
-		}, Ho = async () => {
-			ps.value = !1;
+			fs.value = !0;
+		}, Vo = async () => {
+			fs.value = !1;
 		}, X = async (e) => {
 			e.stopPropagation();
 			let t = e.target.value;
-			G.value = t, !l.value && (c("input", t, e), K(t), await c("update:inputValue", t), Bo());
+			G.value = t, !l.value && (c("input", t, e), K(t), await c("update:inputValue", t), zo());
 		}, $ = async () => {
 			await new Promise((e) => setTimeout(e));
 			let e = s.multiple ? [] : null;
-			await K(""), await Ao(e), c("change", e), c("clear", e), c("inputChange", ""), P == null || P.changeHandler();
-		}, Wo = (e) => {
+			await K(""), await ko(e), c("change", e), c("clear", e), c("inputChange", ""), P == null || P.changeHandler();
+		}, Uo = (e) => {
 			e.stopPropagation();
 			let t = e.target;
 			c("inputChange", t.value, e);
-		}, [Go, Ko] = useCancelableDelay(), Jo = ref(!1), Qo = async (e) => {
-			z.value || V.value || (Ko(), Jo.value = !0, nextTick(() => {
+		}, [Wo, Go] = useCancelableDelay(), qo = ref(!1), Zo = async (e) => {
+			z.value || V.value || (Go(), qo.value = !0, nextTick(() => {
 				if (J.value && s.filterable) {
 					if (J.value.focus(), s.multiple) return;
-					K(H(U.value) ? G.value || "" : Fo.value);
+					K(H(U.value) ? G.value || "" : Po.value);
 				}
-			}), Bo(), c("focus", e));
-		}, es = async (e) => {
+			}), zo(), c("focus", e));
+		}, $o = async (e) => {
 			var t;
 			if (z.value || V.value) return;
 			let n = e.target;
 			if (n instanceof HTMLElement || n instanceof SVGElement) {
 				var r;
-				if ((r = zo.value) != null && r.$el.contains(n)) return;
+				if ((r = Ro.value) != null && r.$el.contains(n)) return;
 			}
-			(t = Lo.value) == null || t.focus();
-		}, ts = async () => {
+			(t = Io.value) == null || t.focus();
+		}, es = async () => {
 			var e, t;
-			let n = await Go();
-			return n && (Jo.value = !1, Ho(), (e = J.value) == null || e.blur(), (t = Lo.value) == null || t.blur(), setTimeout(async () => {
+			let n = await Wo();
+			return n && (qo.value = !1, Vo(), (e = J.value) == null || e.blur(), (t = Io.value) == null || t.blur(), setTimeout(async () => {
 				await K(""), c("inputChange", "");
 			}, ANIMATION_DURATION$2), n);
-		}, ns = async (e) => {
-			await ts() && (c("blur", e), P == null || P.blurHandler());
-		}, rs = (e) => {
+		}, ts = async (e) => {
+			await es() && (c("blur", e), P == null || P.blurHandler());
+		}, ns = (e) => {
 			var t, n;
 			let r = e.relatedTarget;
-			r && !((t = Y.value) == null || (t = t.triggerContent) == null || (t = t.content) == null) && t.contains(r) || r && (n = Io.value) != null && n.contains(r) || ns(e);
-		}, as = ref(!1), os = () => {
-			as.value = !0;
-		}, ss = () => {
-			as.value = !1;
-		}, cs = computed(() => s.clearable && !z.value && !V.value), ls = (e) => {
+			r && !((t = Y.value) == null || (t = t.triggerContent) == null || (t = t.content) == null) && t.contains(r) || r && (n = Fo.value) != null && n.contains(r) || ts(e);
+		}, is = ref(!1), as = () => {
+			is.value = !0;
+		}, os = () => {
+			is.value = !1;
+		}, ss = computed(() => s.clearable && !z.value && !V.value), cs = (e) => {
 			if (s.multiple) if (S(U.value)) {
 				let t = [...U.value], n = t.findIndex((t) => t === e);
 				return n === -1 ? t.push(e) : t.splice(n, 1), t;
 			} else return [e];
 			else return e;
-		}, us = async (e, t, n) => {
+		}, ls = async (e, t, n) => {
 			await new Promise((e) => setTimeout(e));
-			let r = ls(e);
-			await Ao(r), s.multiple || (Jo.value = !1, Ho(), c("select", r, t, n), c("change", r), P == null || P.changeHandler(), setTimeout(async () => {
+			let r = cs(e);
+			await ko(r), s.multiple || (qo.value = !1, Vo(), c("select", r, t, n), c("change", r), P == null || P.changeHandler(), setTimeout(async () => {
 				await K("");
 			}, ANIMATION_DURATION$2));
-		}, ds = useSlots(), fs = computed(() => {
+		}, us = useSlots(), ds = computed(() => {
 			let e = s.options || [];
 			if (!s.filterable) return e;
 			let t = [];
@@ -5351,51 +5356,51 @@ var ANIMATION_DURATION$2 = 250, select_default = /* @__PURE__ */ defineComponent
 		n({
 			focus: () => {
 				var e;
-				z.value || V.value || (e = Lo.value) == null || e.focus();
+				z.value || V.value || (e = Io.value) == null || e.focus();
 			},
 			blur: () => {
-				ts();
+				es();
 			},
 			clear: () => $(),
-			[GET_ELEMENT_RENDERED]: () => Io.value
+			[GET_ELEMENT_RENDERED]: () => Fo.value
 		});
-		let ps = ref(!1), ms = (e) => {
-			e || (ps.value = e);
-		}, hs = computed(() => H(U.value) && (!s.multiple && !Fo.value || s.multiple)), gs = computed(() => Eo.value === "small" ? "small" : "medium"), _s = computed(() => !z.value && !V.value), vs = async (e, t) => {
+		let fs = ref(!1), ps = (e) => {
+			e || (fs.value = e);
+		}, ms = computed(() => H(U.value) && (!s.multiple && !Po.value || s.multiple)), hs = computed(() => To.value === "small" ? "small" : "medium"), gs = computed(() => !z.value && !V.value), _s = async (e, t) => {
 			let n = [...U.value], r = n.findIndex((t) => t === e);
-			r !== -1 && (n.splice(r, 1), await Ao(n), c("tagClose", e, t), c("change", n), P == null || P.changeHandler());
-		}, ys = computed(() => !!s.collapseTags && A(s.maxDisplayTags) && s.maxDisplayTags >= 0), bs = computed(() => !s.multiple || !s.options.length || E(U.value) ? [] : ys.value ? U.value.slice(0, s.maxDisplayTags) : U.value), xs = computed(() => !s.multiple || !s.options.length || E(U.value) ? [] : ys.value ? U.value.slice(s.maxDisplayTags) : []);
+			r !== -1 && (n.splice(r, 1), await ko(n), c("tagClose", e, t), c("change", n), P == null || P.changeHandler());
+		}, vs = computed(() => !!s.collapseTags && A(s.maxDisplayTags) && s.maxDisplayTags >= 0), ys = computed(() => !s.multiple || !s.options.length || E(U.value) ? [] : vs.value ? U.value.slice(0, s.maxDisplayTags) : U.value), bs = computed(() => !s.multiple || !s.options.length || E(U.value) ? [] : vs.value ? U.value.slice(s.maxDisplayTags) : []);
 		watch([
 			j,
 			M,
 			I,
 			L,
-			Eo,
+			To,
 			V,
 			z,
-			() => ds,
+			() => us,
 			useDarkMode(),
-			Jo,
-			as,
-			Do,
-			ko
+			qo,
+			is,
+			Eo,
+			Oo
 		], () => {
-			Ss();
+			xs();
 		});
-		let Ss = () => {
-			let e = canvasPreprocess(Io, Ro);
+		let xs = () => {
+			let e = canvasPreprocess(Fo, Lo);
 			if (!e) return;
-			let { ctx: t, width: n, height: r, canvas: i } = e, a = calcPixelSize(), o = getBorderRadius(i, a, I.value, L.value, Eo.value || "medium", D.value, j.value, M.value), s = Do.value === "normal" ? (as.value || Jo.value) && !z.value && !V.value ? getGlobalThemeColor("primary", 6) : getGlobalThemeColor("neutral", 10) : getGlobalThemeColor(Do.value === "error" ? "danger" : Do.value, 6), c = calcBorderCornerCenter(o, n, r, a);
-			s && drawBorder$5(t, n, r, c, o, BORDER_CORNER_RAD_RANGE, s, a, D.value, j.value, M.value, ko.value);
+			let { ctx: t, width: n, height: r, canvas: i } = e, a = calcPixelSize(), o = getBorderRadius(i, a, I.value, L.value, To.value || "medium", D.value, j.value, M.value), s = Eo.value === "normal" ? (is.value || qo.value) && !z.value && !V.value ? getGlobalThemeColor("primary", 6) : getGlobalThemeColor("neutral", 10) : getGlobalThemeColor(Eo.value === "error" ? "danger" : Eo.value, 6), c = calcBorderCornerCenter(o, n, r, a);
+			s && drawBorder$5(t, n, r, c, o, BORDER_CORNER_RAD_RANGE, s, a, D.value, j.value, M.value, Oo.value);
 			let l = z.value ? getGlobalThemeColor("neutral", 6) : getGlobalThemeColor("neutral", 1);
 			l && floodFill(t, Math.round(n / 2), Math.round(r / 2), l);
 		};
 		onMounted(() => {
 			nextTick(() => {
-				Ss();
+				xs();
 			});
-		}), useResizeObserver(Io, Ss), useWatchGlobalCssVal(Ss), useTransitionEnd(Io, Ss);
-		let Cs = computed(() => {
+		}), useResizeObserver(Fo, xs), useWatchGlobalCssVal(xs), useTransitionEnd(Fo, xs);
+		let Ss = computed(() => {
 			var e;
 			return {
 				...s.popoverProps,
@@ -5407,72 +5412,72 @@ var ANIMATION_DURATION$2 = 250, select_default = /* @__PURE__ */ defineComponent
 		});
 		return () => {
 			let t = createVNode(Fragment, null, [
-				ds.prefix && createVNode("div", { class: "px-select-prefix-wrapper" }, [ds.prefix()]),
+				us.prefix && createVNode("div", { class: "px-select-prefix-wrapper" }, [us.prefix()]),
 				createVNode("div", {
 					class: "px-select-content",
-					ref: Lo,
+					ref: Io,
 					tabindex: z.value || V.value ? -1 : 0
 				}, [
-					s.multiple && bs.value.map((e, t) => createVNode(tag_default, mergeProps({
+					s.multiple && ys.value.map((e, t) => createVNode(tag_default, mergeProps({
 						key: e,
-						size: gs.value,
+						size: hs.value,
 						variant: s.tagVariant,
 						theme: s.tagTheme,
-						closable: _s.value,
+						closable: gs.value,
 						disabled: z.value,
 						color: s.tagColor
-					}, s.tagProps, { onClose: (t) => vs(e, t) }), { default: () => ds.tag ? ds.tag({
+					}, s.tagProps, { onClose: (t) => _s(e, t) }), { default: () => us.tag ? us.tag({
 						value: e,
-						label: No.value[t],
+						label: Mo.value[t],
 						index: t,
 						disabled: z.value,
 						readonly: V.value
-					}) : No.value[t] })),
-					s.multiple && !!xs.value.length && ys.value && createVNode(Fragment, null, [s.collapseTagsPopover ? createVNode(popover_default, Cs.value, {
+					}) : Mo.value[t] })),
+					s.multiple && !!bs.value.length && vs.value && createVNode(Fragment, null, [s.collapseTagsPopover ? createVNode(popover_default, Ss.value, {
 						default: () => createVNode(tag_default, mergeProps({
-							size: gs.value,
+							size: hs.value,
 							variant: s.tagVariant,
 							theme: s.tagTheme,
 							disabled: z.value,
 							color: s.tagColor
-						}, s.tagProps), { default: () => ds.tag ? ds.tag({
+						}, s.tagProps), { default: () => us.tag ? us.tag({
 							value: null,
-							label: `+${xs.value.length}`,
+							label: `+${bs.value.length}`,
 							index: -1,
 							disabled: z.value,
 							readonly: V.value
-						}) : `+${xs.value.length}` }),
-						content: () => createVNode("div", { class: "px-input-tag-content" }, [xs.value.map((e, t) => createVNode(tag_default, mergeProps({
+						}) : `+${bs.value.length}` }),
+						content: () => createVNode("div", { class: "px-input-tag-content" }, [bs.value.map((e, t) => createVNode(tag_default, mergeProps({
 							key: e,
-							size: gs.value,
+							size: hs.value,
 							variant: s.tagVariant,
 							theme: s.tagTheme,
 							disabled: z.value,
 							color: s.tagColor,
-							closable: _s.value
-						}, s.tagProps, { onClose: (t) => vs(e, t) }), { default: () => {
+							closable: gs.value
+						}, s.tagProps, { onClose: (t) => _s(e, t) }), { default: () => {
 							let n = t + Math.floor(s.maxDisplayTags);
-							return ds.tag ? ds.tag({
+							return us.tag ? us.tag({
 								value: e,
-								label: No.value[n],
+								label: Mo.value[n],
 								index: n,
 								disabled: z.value,
 								readonly: V.value
-							}) : No.value[n];
+							}) : Mo.value[n];
 						} }))])
 					}) : createVNode(tag_default, mergeProps({
-						size: gs.value,
+						size: hs.value,
 						variant: s.tagVariant,
 						theme: s.tagTheme,
 						disabled: z.value,
 						color: s.tagColor
-					}, s.tagProps), { default: () => ds.tag ? ds.tag({
+					}, s.tagProps), { default: () => us.tag ? us.tag({
 						value: null,
-						label: `+${xs.value.length}`,
+						label: `+${bs.value.length}`,
 						index: -1,
 						disabled: z.value,
 						readonly: V.value
-					}) : `+${xs.value.length}` })]),
+					}) : `+${bs.value.length}` })]),
 					withDirectives(createVNode("input", {
 						tabindex: -1,
 						ref: J,
@@ -5480,33 +5485,33 @@ var ANIMATION_DURATION$2 = 250, select_default = /* @__PURE__ */ defineComponent
 						value: G.value,
 						disabled: z.value || V.value,
 						onInput: X,
-						onChange: Wo,
+						onChange: Uo,
 						onCompositionstart: u,
 						onCompositionend: g,
-						placeholder: hs.value ? s.placeholder : ""
-					}, null), [[vShow, s.filterable && Jo.value]]),
-					withDirectives(createVNode("div", { class: { "px-select-placeholder": !0 } }, [s.placeholder]), [[vShow, hs.value && (!s.filterable || !Jo.value)]]),
+						placeholder: ms.value ? s.placeholder : ""
+					}, null), [[vShow, s.filterable && qo.value]]),
+					withDirectives(createVNode("div", { class: { "px-select-placeholder": !0 } }, [s.placeholder]), [[vShow, ms.value && (!s.filterable || !qo.value)]]),
 					!s.multiple && withDirectives(createVNode("div", { class: {
 						"px-select-label": !0,
 						"px-select-label__disabled": z.value
-					} }, [ds.label ? ds.label({
-						label: Fo.value,
+					} }, [us.label ? us.label({
+						label: Po.value,
 						value: U.value,
 						disabled: z.value,
 						readonly: V.value
-					}) : Fo.value]), [[vShow, !hs.value && (!s.filterable || !Jo.value)]])
+					}) : Po.value]), [[vShow, !ms.value && (!s.filterable || !qo.value)]])
 				]),
-				cs.value && createVNode("div", { class: "px-select-close-wrapper" }, [as.value && !H(U.value) ? createVNode(times_circle_solid_default, {
+				ss.value && createVNode("div", { class: "px-select-close-wrapper" }, [is.value && !H(U.value) ? createVNode(times_circle_solid_default, {
 					class: "px-select-icon",
 					onClick: $,
 					ref: (e) => {
-						zo.value = e;
+						Ro.value = e;
 					}
 				}, null) : createVNode("div", { class: "px-select-icon-placeholder" }, null)]),
 				s.loading && createVNode("div", { class: "px-select-loading-wrapper" }, [createVNode(spinner_third_solid_default, { class: "px-select-icon px-animation__loading" }, null)]),
-				ds.suffix && createVNode("div", { class: "px-select-suffix-wrapper" }, [ds.suffix()]),
+				us.suffix && createVNode("div", { class: "px-select-suffix-wrapper" }, [us.suffix()]),
 				createVNode("canvas", {
-					ref: Ro,
+					ref: Lo,
 					class: "px-select-canvas"
 				}, null)
 			]), n = {}, r = w == null ? void 0 : w.vnode.scopeId, i = w == null ? void 0 : w.vnode.scopeId;
@@ -5517,38 +5522,38 @@ var ANIMATION_DURATION$2 = 250, select_default = /* @__PURE__ */ defineComponent
 				offset: 0,
 				"width-equal": !0,
 				arrow: !1,
-				visible: ps.value,
-				"onUpdate:visible": ms,
+				visible: fs.value,
+				"onUpdate:visible": ps,
 				trigger: "click",
 				contentStyle: { padding: `${a}px` },
 				ref: Y,
 				destroyOnHide: s.optionsDestroyOnHide
 			}, {
 				default: () => h("div", mergeProps({
-					ref: Io,
+					ref: Fo,
 					class: [
 						"pixelium px-select",
-						Eo.value && `px-select__${Eo.value}`,
+						To.value && `px-select__${To.value}`,
 						L.value && `px-select__${L.value}`,
 						{ "px-select__inner": D.value },
 						{ "px-select__disabled": z.value }
 					],
-					onFocusin: Qo,
-					onFocusout: rs,
-					onClick: es,
-					onMouseenter: os,
-					onMouseleave: ss,
+					onFocusin: Zo,
+					onFocusout: ns,
+					onClick: $o,
+					onMouseenter: as,
+					onMouseleave: os,
 					...n
 				}, o), [t]),
-				content: () => fs.value.length ? createVNode(option_list_default, {
-					options: fs.value,
-					onSelect: us,
+				content: () => ds.value.length ? createVNode(option_list_default, {
+					options: ds.value,
+					onSelect: ls,
 					activeValues: s.multiple ? U.value : [U.value],
 					virtualScroll: s.virtualScroll,
 					virtualListProps: s.virtualListProps
 				}, {
-					"group-label": ({ option: e }) => ds["group-label"] ? ds["group-label"]({ option: e }) : e.label,
-					option: ({ option: e }) => ds.option ? ds.option({ option: e }) : y(e) ? e : e.label
+					"group-label": ({ option: e }) => us["group-label"] ? us["group-label"]({ option: e }) : e.label,
+					option: ({ option: e }) => us.option ? us.option({ option: e }) : y(e) ? e : e.label
 				}) : createVNode("div", { class: "px-select-empty" }, [createVNode(empty_default, null, null)])
 			});
 		};
@@ -5708,7 +5713,7 @@ var _hoisted_1$7 = [
 				a.value = i.src, u.value = i.srcset;
 			}
 		});
-		let wo = (e) => {
+		let Co = (e) => {
 			C.value && (b.value = !0, g.value = !1, w("load", C.value, e));
 		}, k = (e) => {
 			g.value = !0, b.value = !1, C.value && w("error", C.value, e);
@@ -5717,7 +5722,7 @@ var _hoisted_1$7 = [
 			height: 0,
 			top: 0,
 			left: 0
-		}), To = (e) => {
+		}), wo = (e) => {
 			!(b.value && i.previewable) || !C.value || (M.value = calculateZoomedSize(C.value), x.value = !0, w("preview", e));
 		};
 		useWindowResizeListener(() => {
@@ -5735,7 +5740,7 @@ var _hoisted_1$7 = [
 				[`px-image__${i.objectFit}`]: !!i.objectFit,
 				"px-image-previewable": b.value && i.previewable
 			}]),
-			onClick: To
+			onClick: wo
 		}, [
 			createElementVNode("img", {
 				src: a.value,
@@ -5752,7 +5757,7 @@ var _hoisted_1$7 = [
 				class: "px-image-img",
 				ref_key: "imgRef",
 				ref: C,
-				onLoad: wo,
+				onLoad: Co,
 				onError: k
 			}, null, 44, _hoisted_1$7),
 			unref(n).placeholder || unref(n).error ? (openBlock(), createElementBlock("div", _hoisted_2$3, [!b.value && !g.value ? renderSlot(t.$slots, "placeholder", { key: 0 }) : createCommentVNode("", !0), g.value ? renderSlot(t.$slots, "error", { key: 1 }) : createCommentVNode("", !0)])) : createCommentVNode("", !0),
@@ -5988,7 +5993,7 @@ var avatar_default = /* @__PURE__ */ defineComponent({
 		contentProps: { default: void 0 }
 	},
 	setup(e, { expose: t }) {
-		let n = e, r = inject(FORM_PROVIDE);
+		let n = e, r = inject(FORM_PROVIDE, void 0);
 		r || throwError("FormItem must be used inside Form.");
 		let i = createProvideComputed("disabled", [r, n], "or"), g = createProvideComputed("readonly", [r, n], "or"), b = useId(), x = useSlots(), w = [
 			"model",
@@ -6007,12 +6012,12 @@ var avatar_default = /* @__PURE__ */ defineComponent({
 			r.removeLabelWidth(b);
 		});
 		let N = null, I = async () => {
-			n.field && (on(r.model.value, n.field, N), await nextTick(), Mo());
+			n.field && (on(r.model.value, n.field, N), await nextTick(), jo());
 		}, z = () => ({
 			field: n.field,
-			validate: Fo,
+			validate: Po,
 			reset: I,
-			clearValidation: Mo
+			clearValidation: jo
 		});
 		onMounted(() => {
 			n.field && (r.registerField(z()), N = f(r.model.value, n.field));
@@ -6026,17 +6031,17 @@ var avatar_default = /* @__PURE__ */ defineComponent({
 			let t = n.rule || ((e = r.rules.value) == null ? void 0 : e[n.field]);
 			return t ? (S(t) || (t = [t]), t.some((e) => e.required)) : !1;
 		}), H = async () => {
-			n.field && (await nextTick(), Fo("input"));
+			n.field && (await nextTick(), Po("input"));
 		}, U = async () => {
-			n.field && (await nextTick(), Fo("blur"));
+			n.field && (await nextTick(), Po("blur"));
 		}, W = async () => {
-			n.field && (await nextTick(), Fo("change"));
+			n.field && (await nextTick(), Po("change"));
 		}, K = (e) => ({
 			message: (e == null ? void 0 : e.message) || "",
 			level: e != null && e.message && (e == null ? void 0 : e.level) || "normal"
-		}), q = ref(K()), Mo = () => {
+		}), q = ref(K()), jo = () => {
 			q.value = K();
-		}, Po = computed(() => q.value.level);
+		}, No = computed(() => q.value.level);
 		provide(FORM_ITEM_PROVIDE, {
 			size: r.size,
 			disabled: i,
@@ -6044,9 +6049,9 @@ var avatar_default = /* @__PURE__ */ defineComponent({
 			changeHandler: W,
 			blurHandler: U,
 			inputHandler: H,
-			status: Po
+			status: No
 		});
-		let Fo = async (e) => {
+		let Po = async (e) => {
 			var t;
 			if (!n.field) return q.value = K(), q.value;
 			let i = n.rule || ((t = r.rules.value) == null ? void 0 : t[n.field]);
@@ -6121,7 +6126,7 @@ var avatar_default = /* @__PURE__ */ defineComponent({
 			}
 			return q.value = K(), q.value;
 		};
-		return t({ validate: Fo }), (t, n) => (openBlock(), createBlock(row_default, mergeProps({
+		return t({ validate: Po }), (t, n) => (openBlock(), createBlock(row_default, mergeProps({
 			class: "px-form-item",
 			gutter: {
 				x: 16,
@@ -6325,7 +6330,7 @@ var _hoisted_1$5 = {
 			transform(e) {
 				return !!e;
 			}
-		}), M = inject(FORM_ITEM_PROVIDE), N = createProvideComputed("disabled", [M, n], "or"), P = createProvideComputed("readonly", [M, n], "or"), I = createProvideComputed("size", () => [
+		}), M = inject(FORM_ITEM_PROVIDE, void 0), N = createProvideComputed("disabled", [M, n], "or"), P = createProvideComputed("readonly", [M, n], "or"), I = createProvideComputed("size", () => [
 			n.size && n,
 			M,
 			n
@@ -6342,7 +6347,7 @@ var _hoisted_1$5 = {
 		};
 		onMounted(() => {
 			nextTick(() => {
-				Ro(), q();
+				Lo(), q();
 			});
 		});
 		let G = () => {
@@ -6350,9 +6355,9 @@ var _hoisted_1$5 = {
 		}, K = ref([0, 0]), q = () => {
 			if (K.value[0] === 0 || K.value[1] === 0) return 0;
 			let e = calcPixelSize(), t = K.value[1] + 2 * e - 8;
-			No.value = 2 + (K.value[0] - t - 4 / 2 - 2) * L.value;
-		}, No = ref(0), Po = () => inBrowser() ? L.value > MID_PROGRESS ? n.activeColor ? parseColor(n.activeColor) : N.value ? getGlobalThemeColor("primary", 2) : getGlobalThemeColor("primary", 6) : n.inactiveColor ? parseColor(n.inactiveColor) : N.value ? getGlobalThemeColor("neutral", 6) : getGlobalThemeColor("neutral", 8) : TRANSPARENT_RGBA_COLOR_OBJECT, Fo = computed(() => {
-			let e = Po();
+			Mo.value = 2 + (K.value[0] - t - 4 / 2 - 2) * L.value;
+		}, Mo = ref(0), No = () => inBrowser() ? L.value > MID_PROGRESS ? n.activeColor ? parseColor(n.activeColor) : N.value ? getGlobalThemeColor("primary", 2) : getGlobalThemeColor("primary", 6) : n.inactiveColor ? parseColor(n.inactiveColor) : N.value ? getGlobalThemeColor("neutral", 6) : getGlobalThemeColor("neutral", 8) : TRANSPARENT_RGBA_COLOR_OBJECT, Po = computed(() => {
+			let e = No();
 			return e ? rgbaColor2string(e) : void 0;
 		});
 		watch([
@@ -6369,11 +6374,11 @@ var _hoisted_1$5 = {
 			N,
 			() => n.activeColor,
 			() => n.inactiveColor,
-			No
+			Mo
 		], () => {
-			Ro();
+			Lo();
 		});
-		let Lo = () => {
+		let Io = () => {
 			let e = canvasPreprocess(x, b);
 			if (!e) return;
 			let { ctx: t, width: r, height: i } = e, a = Math.min(r, i), o = calcPixelSize(), s = getGlobalThemeColor("neutral", 1);
@@ -6381,13 +6386,13 @@ var _hoisted_1$5 = {
 			t.fillStyle = rgbaColor2string(s);
 			let c = Math.round(a / 2 - o / 2);
 			n.shape === "round" ? drawSmoothCircle(t, c, c, c, 0, Math.PI * 2, o) : t.fillRect(0, 0, a, a), floodFill(t, Math.round(c + 1), Math.round(c + 1), s);
-		}, Ro = () => {
+		}, Lo = () => {
 			let e = canvasPreprocess(w, g);
 			if (!e) return;
-			let { ctx: t, width: r, height: i, canvas: a } = e, o = calcPixelSize(), s = getBorderRadius(a, o, void 0, n.shape, "medium", !1, !1, !1), c = Po(), l = calcBorderCornerCenter(s, r, i, o);
-			c && (drawBorder$3(t, r, i, l, s, BORDER_CORNER_RAD_RANGE, c, o, 0, 0, I.value === "small" && n.shape === "round"), floodFill(t, Math.round(r / 2), Math.round(i / 2), c)), Lo();
+			let { ctx: t, width: r, height: i, canvas: a } = e, o = calcPixelSize(), s = getBorderRadius(a, o, void 0, n.shape, "medium", !1, !1, !1), c = No(), l = calcBorderCornerCenter(s, r, i, o);
+			c && (drawBorder$3(t, r, i, l, s, BORDER_CORNER_RAD_RANGE, c, o, 0, 0, I.value === "small" && n.shape === "round"), floodFill(t, Math.round(r / 2), Math.round(i / 2), c)), Io();
 		}, J = () => {
-			Ro(), G();
+			Lo(), G();
 		};
 		return useResizeObserver(w, J), useWatchGlobalCssVal(J), useTransitionEnd(w, J), (e, t) => (openBlock(), createElementBlock("label", {
 			class: normalizeClass(["pixelium px-switch", {
@@ -6420,9 +6425,9 @@ var _hoisted_1$5 = {
 					ref_key: "switchButtonRef",
 					ref: x,
 					style: normalizeStyle({
-						left: `${No.value}px`,
-						fill: Fo.value,
-						color: Fo.value
+						left: `${Mo.value}px`,
+						fill: Po.value,
+						color: Po.value
 					})
 				}, [n.loading ? (openBlock(), createBlock(unref(spinner_third_solid_default), {
 					key: 0,
@@ -6638,7 +6643,7 @@ var _hoisted_1$4 = ["tabindex"], _hoisted_2 = ["tabindex", "onClick"], _hoisted_
 		"blur"
 	],
 	setup(t, { emit: n }) {
-		let r = t, i = n, p = inject(FORM_ITEM_PROVIDE), g = createProvideComputed("disabled", [p, r], "or"), b = createProvideComputed("readonly", [p, r], "or"), [x, w] = useControlledMode("modelValue", r, i, {
+		let r = t, i = n, p = inject(FORM_ITEM_PROVIDE, void 0), g = createProvideComputed("disabled", [p, r], "or"), b = createProvideComputed("readonly", [p, r], "or"), [x, w] = useControlledMode("modelValue", r, i, {
 			defaultField: "defaultValue",
 			transform: (e) => transformModelValue(e, r, i)
 		}), k = shallowRef(null), M = shallowRef(null), N = shallowRef(null), I = shallowRef(null), L = shallowRef(null), z = shallowRef(null), H = shallowRef(null), U = shallowRef(null), W = computed(() => Math.max(r.max - r.min, 0)), G = ref({
@@ -6647,8 +6652,8 @@ var _hoisted_1$4 = ["tabindex"], _hoisted_2 = ["tabindex", "onClick"], _hoisted_
 		}), K = ref({
 			width: 0,
 			height: 0
-		}), jo = () => {
-			let e = is.value;
+		}), Ao = () => {
+			let e = rs.value;
 			if (!e) return;
 			let t = e.getBoundingClientRect();
 			G.value = {
@@ -6663,11 +6668,11 @@ var _hoisted_1$4 = ["tabindex"], _hoisted_2 = ["tabindex", "onClick"], _hoisted_
 				width: t.width,
 				height: t.height
 			};
-		}, Po = computed(() => r.range ? A(x.value) ? 0 : W.value > 0 ? (x.value[0] - r.min) / W.value : 0 : 0), Fo = computed(() => W.value === 0 ? 0 : A(x.value) ? (x.value - r.min) / W.value : (x.value[1] - r.min) / W.value), Lo = ref(0), Ro = ref(0), J = ref(0), Y = async () => {
-			if (await nextTick(), !r.range) Lo.value = calcThumbLeft(x.value, G.value, K.value, W.value, r);
+		}, No = computed(() => r.range ? A(x.value) ? 0 : W.value > 0 ? (x.value[0] - r.min) / W.value : 0 : 0), Po = computed(() => W.value === 0 ? 0 : A(x.value) ? (x.value - r.min) / W.value : (x.value[1] - r.min) / W.value), Io = ref(0), Lo = ref(0), J = ref(0), Y = async () => {
+			if (await nextTick(), !r.range) Io.value = calcThumbLeft(x.value, G.value, K.value, W.value, r);
 			else {
 				let e = x.value;
-				Ro.value = calcThumbLeft(e[0], G.value, K.value, W.value, r), J.value = calcThumbLeft(e[1], G.value, K.value, W.value, r);
+				Lo.value = calcThumbLeft(e[0], G.value, K.value, W.value, r), J.value = calcThumbLeft(e[1], G.value, K.value, W.value, r);
 			}
 		};
 		watch([
@@ -6681,20 +6686,20 @@ var _hoisted_1$4 = ["tabindex"], _hoisted_2 = ["tabindex", "onClick"], _hoisted_
 		], () => {
 			Y();
 		}, { deep: !0 }), watch(() => r.range, (e, t) => {
-			w(e && !t ? [Vo(r.min), Vo(x.value)] : Vo(x.value[1]));
+			w(e && !t ? [Bo(r.min), Bo(x.value)] : Bo(x.value[1]));
 		});
-		let zo = computed(() => r.range && S(x.value) ? Math.min(Po.value, Fo.value) : 0), Bo = computed(() => Math.abs(Fo.value - Po.value));
-		function Vo(e) {
+		let Ro = computed(() => r.range && S(x.value) ? Math.min(No.value, Po.value) : 0), zo = computed(() => Math.abs(Po.value - No.value));
+		function Bo(e) {
 			return clampValue(e, r);
 		}
-		let Ho = ref(!1), X = ref(null);
+		let Vo = ref(!1), X = ref(null);
 		function $(e, t) {
-			g.value || b.value || (e.preventDefault(), Ho.value = !0, r.range && t && (X.value = t), document.addEventListener("mousemove", Uo), document.addEventListener("mouseup", qo), document.addEventListener("touchmove", Uo), document.addEventListener("touchend", qo), Go(e), i("dragStart", e));
+			g.value || b.value || (e.preventDefault(), Vo.value = !0, r.range && t && (X.value = t), document.addEventListener("mousemove", Ho), document.addEventListener("mouseup", Ko), document.addEventListener("touchmove", Ho), document.addEventListener("touchend", Ko), Wo(e), i("dragStart", e));
 		}
-		let Uo = (e) => {
-			Ko(e);
-		}, Wo = (e, t) => {
-			let n = X.value, i = is.value, a;
+		let Ho = (e) => {
+			Go(e);
+		}, Uo = (e, t) => {
+			let n = X.value, i = rs.value, a;
 			if (!t) a = r.range ? X.value === "start" ? M.value : X.value === "end" ? N.value : null : k.value;
 			else if (!r.range) a = k.value;
 			else {
@@ -6706,26 +6711,26 @@ var _hoisted_1$4 = ["tabindex"], _hoisted_2 = ["tabindex", "onClick"], _hoisted_
 				thumbEl: a,
 				targetType: n
 			};
-		}, Go = async (e, t = !1, n = void 0) => {
-			if (!Ho.value && !t) return;
-			let { sliderEl: i, thumbEl: a, targetType: o } = Wo(e, t);
+		}, Wo = async (e, t = !1, n = void 0) => {
+			if (!Vo.value && !t) return;
+			let { sliderEl: i, thumbEl: a, targetType: o } = Uo(e, t);
 			if (!i || !a) return;
 			let s = n;
 			if (en(s) && (s = calcValueFromEvent(e, i, a, W.value, r)), r.range) {
 				let e;
-				if (S(x.value) ? o === "start" ? e = [s, x.value[1]] : o === "end" && (e = [x.value[0], s]) : o === "start" ? e = [s, Vo(r.min)] : o === "end" && (e = [Vo(r.min), s]), !e) return;
+				if (S(x.value) ? o === "start" ? e = [s, x.value[1]] : o === "end" && (e = [x.value[0], s]) : o === "start" ? e = [s, Bo(r.min)] : o === "end" && (e = [Bo(r.min), s]), !e) return;
 				await w(e);
 			} else await w(s);
 			let c = calcThumbLeft(s, G.value, K.value, W.value, r);
-			r.range ? o === "start" ? Ro.value = c : o === "end" && (J.value = c) : Lo.value = c;
-		}, Ko = qe(Go, 20);
-		function qo(e) {
-			Ho.value && (Ho.value = !1, X.value = null, i("change", Rn(x.value)), p == null || p.changeHandler()), document.removeEventListener("mousemove", Uo), document.removeEventListener("mouseup", qo), document.removeEventListener("touchmove", Uo), document.removeEventListener("touchend", qo), i("dragEnd", e);
+			r.range ? o === "start" ? Lo.value = c : o === "end" && (J.value = c) : Io.value = c;
+		}, Go = qe(Wo, 20);
+		function Ko(e) {
+			Vo.value && (Vo.value = !1, X.value = null, i("change", Rn(x.value)), p == null || p.changeHandler()), document.removeEventListener("mousemove", Ho), document.removeEventListener("mouseup", Ko), document.removeEventListener("touchmove", Ho), document.removeEventListener("touchend", Ko), i("dragEnd", e);
 		}
 		onUnmounted(() => {
-			document.removeEventListener("mousemove", Uo), document.removeEventListener("mouseup", qo), document.removeEventListener("touchmove", Uo), document.removeEventListener("touchend", qo);
+			document.removeEventListener("mousemove", Ho), document.removeEventListener("mouseup", Ko), document.removeEventListener("touchmove", Ho), document.removeEventListener("touchend", Ko);
 		});
-		let Jo = ref([]);
+		let qo = ref([]);
 		watch([
 			() => r.marks,
 			() => r.max,
@@ -6736,55 +6741,55 @@ var _hoisted_1$4 = ["tabindex"], _hoisted_2 = ["tabindex", "onClick"], _hoisted_
 			G
 		], () => {
 			nextTick(() => {
-				Jo.value = updateMarkPoints(G.value, W.value, r);
+				qo.value = updateMarkPoints(G.value, W.value, r);
 			});
 		}, { deep: !0 });
-		let Yo = async (e, t) => {
-			g.value || b.value || (await Go(e, !0, t), A(t) && i("markSelect", t, e), i("change", Rn(x.value)), p == null || p.changeHandler());
-		}, Qo = (e) => {
+		let Jo = async (e, t) => {
+			g.value || b.value || (await Wo(e, !0, t), A(t) && i("markSelect", t, e), i("change", Rn(x.value)), p == null || p.changeHandler());
+		}, Zo = (e) => {
 			if (g.value || b.value) return;
 			let t = e.target;
-			I.value && I.value.contains(t) || k.value && k.value.contains(t) || M.value && M.value.contains(t) || N.value && N.value.contains(t) || t !== is.value && is.value && is.value.focus();
+			I.value && I.value.contains(t) || k.value && k.value.contains(t) || M.value && M.value.contains(t) || N.value && N.value.contains(t) || t !== rs.value && rs.value && rs.value.focus();
+		}, $o = (e) => {
+			e.target !== rs.value && i("focus", e);
 		}, es = (e) => {
-			e.target !== is.value && i("focus", e);
-		}, ts = (e) => {
-			e.target !== is.value && (i("blur", e), p == null || p.blurHandler());
-		}, ns = useDarkMode(), rs = shallowRef(null), is = shallowRef(null);
+			e.target !== rs.value && (i("blur", e), p == null || p.blurHandler());
+		}, ts = useDarkMode(), ns = shallowRef(null), rs = shallowRef(null);
 		onMounted(() => {
 			nextTick(() => {
-				as(), jo(), q(), Y(), Jo.value = updateMarkPoints(G.value, W.value, r);
+				is(), Ao(), q(), Y(), qo.value = updateMarkPoints(G.value, W.value, r);
 			});
 		}), watch([
 			g,
-			ns,
+			ts,
+			Ro,
 			zo,
-			Bo,
 			() => r.range,
+			Io,
 			Lo,
-			Ro,
 			J,
-			Jo,
+			qo,
 			x,
 			() => r.direction,
 			() => r.reverse
 		], () => {
 			nextTick(() => {
-				as();
+				is();
 			});
 		}, { deep: !0 });
-		let as = () => {
-			let e = calcPixelSize(), t = canvasPreprocess(is, rs, r.direction === "vertical" ? e : 0, r.direction === "vertical" ? 0 : e);
+		let is = () => {
+			let e = calcPixelSize(), t = canvasPreprocess(rs, ns, r.direction === "vertical" ? e : 0, r.direction === "vertical" ? 0 : e);
 			if (!t) return;
 			let { ctx: n, width: i, height: a } = t, o = getGlobalThemeColor("neutral", 10), s = calcBorderCornerCenter(fillArr(e, 4), i, a, e);
 			o && drawBorder$2(n, i, a, s, o, e);
 			let c = g.value ? getGlobalThemeColor("primary", 2) : getGlobalThemeColor("primary", 6), l = g.value ? getGlobalThemeColor("neutral", 6) : getGlobalThemeColor("neutral", 1);
-			c && l && drawRange(n, i, a, zo.value, Bo.value, c, l, e, r.direction, r.reverse);
+			c && l && drawRange(n, i, a, Ro.value, zo.value, c, l, e, r.direction, r.reverse);
 			let u = BORDER_CORNER_RAD_RANGE, p = g.value ? getGlobalThemeColor("neutral", 6) : getGlobalThemeColor("neutral", 1);
-			p && o && drawThumb(k, L, M, z, N, H, r.range, u, e, p, o), Jo.value.length && drawMark(is, U, u, x.value, r.direction, r.reverse, r.disabled, Jo.value, e);
-		}, os = () => {
-			as(), jo(), q();
+			p && o && drawThumb(k, L, M, z, N, H, r.range, u, e, p, o), qo.value.length && drawMark(rs, U, u, x.value, r.direction, r.reverse, r.disabled, qo.value, e);
+		}, as = () => {
+			is(), Ao(), q();
 		};
-		return useResizeObserver(is, os), useWatchGlobalCssVal(os), useTransitionEnd(is, os), (t, n) => {
+		return useResizeObserver(rs, as), useWatchGlobalCssVal(as), useTransitionEnd(rs, as), (t, n) => {
 			var i;
 			return openBlock(), createElementBlock("div", {
 				class: normalizeClass(["pixelium px-slider", {
@@ -6795,19 +6800,19 @@ var _hoisted_1$4 = ["tabindex"], _hoisted_2 = ["tabindex", "onClick"], _hoisted_
 					"px-slider__reverse": !!r.reverse
 				}]),
 				ref_key: "sliderRef",
-				ref: is,
-				onClick: [withModifiers(Yo, ["self"]), Qo],
+				ref: rs,
+				onClick: [withModifiers(Jo, ["self"]), Zo],
 				tabindex: unref(g) || unref(b) ? -1 : 0,
-				onFocusin: es,
-				onFocusout: ts
+				onFocusin: $o,
+				onFocusout: es
 			}, [
 				createElementVNode("div", {
 					class: "px-slider-mark-wrapper",
 					ref_key: "markWrapperRef",
 					ref: I
-				}, [Jo.value.length ? (openBlock(!0), createElementBlock(Fragment, { key: 0 }, renderList(Jo.value, (n) => (openBlock(), createElementBlock(Fragment, { key: n.value }, [createElementVNode("div", {
+				}, [qo.value.length ? (openBlock(!0), createElementBlock(Fragment, { key: 0 }, renderList(qo.value, (n) => (openBlock(), createElementBlock(Fragment, { key: n.value }, [createElementVNode("div", {
 					tabindex: unref(g) || unref(b) ? -1 : 0,
-					onClick: (e) => Yo(e, n.value),
+					onClick: (e) => Jo(e, n.value),
 					class: "px-slider-mark",
 					style: normalizeStyle(unref(getMarkStyle)(n.markLeft, r.direction, r.reverse))
 				}, [renderSlot(t.$slots, "mark", {
@@ -6815,7 +6820,7 @@ var _hoisted_1$4 = ["tabindex"], _hoisted_2 = ["tabindex", "onClick"], _hoisted_
 					label: n.label
 				}, () => [createTextVNode(toDisplayString(n.label), 1)])], 12, _hoisted_2), createElementVNode("div", {
 					tabindex: unref(g) || unref(b) ? -1 : 0,
-					onClick: (e) => Yo(e, n.value),
+					onClick: (e) => Jo(e, n.value),
 					class: "px-slider-dot",
 					style: normalizeStyle(unref(getDotStyle)(n.left, r.direction, r.reverse))
 				}, null, 12, _hoisted_3)], 64))), 128)) : createCommentVNode("", !0)], 512),
@@ -6828,8 +6833,8 @@ var _hoisted_1$4 = ["tabindex"], _hoisted_2 = ["tabindex", "onClick"], _hoisted_
 					default: withCtx(() => [createElementVNode("div", {
 						class: "px-slider-thumb",
 						style: normalizeStyle({
-							left: r.direction === "horizontal" ? Lo.value + "px" : void 0,
-							bottom: r.direction === "horizontal" ? void 0 : Lo.value + "px"
+							left: r.direction === "horizontal" ? Io.value + "px" : void 0,
+							bottom: r.direction === "horizontal" ? void 0 : Io.value + "px"
 						}),
 						onMousedown: $,
 						onTouchstartPassive: $,
@@ -6847,8 +6852,8 @@ var _hoisted_1$4 = ["tabindex"], _hoisted_2 = ["tabindex", "onClick"], _hoisted_
 					key: 1,
 					class: "px-slider-thumb",
 					style: normalizeStyle({
-						left: r.direction === "horizontal" ? Lo.value + "px" : void 0,
-						bottom: r.direction === "horizontal" ? void 0 : Lo.value + "px"
+						left: r.direction === "horizontal" ? Io.value + "px" : void 0,
+						bottom: r.direction === "horizontal" ? void 0 : Io.value + "px"
 					}),
 					onMousedown: $,
 					onTouchstartPassive: $,
@@ -6869,8 +6874,8 @@ var _hoisted_1$4 = ["tabindex"], _hoisted_2 = ["tabindex", "onClick"], _hoisted_
 					default: withCtx(() => [createElementVNode("div", {
 						class: "px-slider-thumb px-slider-thumb-start",
 						style: normalizeStyle({
-							left: r.direction === "horizontal" ? Ro.value + "px" : void 0,
-							bottom: r.direction === "horizontal" ? void 0 : Ro.value + "px"
+							left: r.direction === "horizontal" ? Lo.value + "px" : void 0,
+							bottom: r.direction === "horizontal" ? void 0 : Lo.value + "px"
 						}),
 						onMousedown: n[0] || (n[0] = (e) => $(e, "start")),
 						onTouchstartPassive: n[1] || (n[1] = (e) => $(e, "start")),
@@ -6887,8 +6892,8 @@ var _hoisted_1$4 = ["tabindex"], _hoisted_2 = ["tabindex", "onClick"], _hoisted_
 					key: 1,
 					class: "px-slider-thumb px-slider-thumb-start",
 					style: normalizeStyle({
-						left: r.direction === "horizontal" ? Ro.value + "px" : void 0,
-						bottom: r.direction === "horizontal" ? void 0 : Ro.value + "px"
+						left: r.direction === "horizontal" ? Lo.value + "px" : void 0,
+						bottom: r.direction === "horizontal" ? void 0 : Lo.value + "px"
 					}),
 					onMousedown: n[2] || (n[2] = (e) => $(e, "start")),
 					onTouchstartPassive: n[3] || (n[3] = (e) => $(e, "start")),
@@ -6941,7 +6946,7 @@ var _hoisted_1$4 = ["tabindex"], _hoisted_2 = ["tabindex", "onClick"], _hoisted_
 				}, null, 512)], 44, _hoisted_12))], 64)) : createCommentVNode("", !0),
 				createElementVNode("canvas", {
 					ref_key: "canvasRef",
-					ref: rs,
+					ref: ns,
 					class: "px-slider-canvas"
 				}, null, 512),
 				createElementVNode("canvas", {
@@ -7013,7 +7018,7 @@ var _hoisted_1$3 = [
 		let n = ref(null), r = ref(null), i = e, a = t, [o, s] = useControlledMode("modelValue", i, a, {
 			defaultField: "defaultValue",
 			transform: (e) => !!e
-		}), p = inject(FORM_ITEM_PROVIDE, void 0), g = inject(RADIO_GROUP_PROVIDE), b = createProvideComputed("size", () => [
+		}), p = inject(FORM_ITEM_PROVIDE, void 0), g = inject(RADIO_GROUP_PROVIDE, void 0), b = createProvideComputed("size", () => [
 			g,
 			i.size && i,
 			p,
@@ -7046,18 +7051,18 @@ var _hoisted_1$3 = [
 		}, z = async (e) => {
 			let t = e.target.checked;
 			o.value = t, a("input", t, e), await s(t), p == null || p.inputHandler();
-		}, V = useDarkMode(), Oo = calcPixelSize(), H = () => {
+		}, V = useDarkMode(), Do = calcPixelSize(), H = () => {
 			let e = canvasPreprocess(n, r);
 			if (!e) return;
 			let { ctx: t, width: i, height: a, canvas: s } = e;
 			t.clearRect(0, 0, i, a);
 			let c = getGlobalThemeColorString("neutral", 1), l = o.value ? x.value ? getGlobalThemeColorString("primary", 2) : k.value && !w.value ? getGlobalThemeColorString("primary", 5) : getGlobalThemeColorString("primary", 6) : x.value ? getGlobalThemeColorString("neutral", 8) : k.value && !w.value ? getGlobalThemeColorString("primary", 5) : getGlobalThemeColorString("neutral", 10);
-			if (T.value === "retro") o.value ? drawPixelTriangle(t, i, a, l, Oo) : drawMaskedPixelTriangle(t, i, a, l, Oo);
+			if (T.value === "retro") o.value ? drawPixelTriangle(t, i, a, l, Do) : drawMaskedPixelTriangle(t, i, a, l, Do);
 			else {
-				let e = getBorderRadius(s, Oo, void 0, "round", void 0, !1, !1, !1);
-				drawBorder$1(t, i, a, calcBorderCornerCenter(e, i, a, Oo), e, BORDER_CORNER_RAD_RANGE, l, Oo);
-				let n = Math.min(i, a), r = Math.ceil(n / 2 - Oo / 2) + 1;
-				c && floodFill(t, r, r, parseColor(c)), o.value && drawRadioCircleMark(t, n, l, Oo);
+				let e = getBorderRadius(s, Do, void 0, "round", void 0, !1, !1, !1);
+				drawBorder$1(t, i, a, calcBorderCornerCenter(e, i, a, Do), e, BORDER_CORNER_RAD_RANGE, l, Do);
+				let n = Math.min(i, a), r = Math.ceil(n / 2 - Do / 2) + 1;
+				c && floodFill(t, r, r, parseColor(c)), o.value && drawRadioCircleMark(t, n, l, Do);
 			}
 		};
 		return onMounted(() => {
@@ -7126,7 +7131,7 @@ var _hoisted_1$3 = [
 	},
 	emits: ["update:modelValue", "change"],
 	setup(t, { emit: n }) {
-		let r = t, i = n, a = inject(FORM_ITEM_PROVIDE), p = createProvideComputed("disabled", [a, r], "or"), g = createProvideComputed("readonly", [a, r], "or"), [b, x] = useControlledMode("modelValue", r, i, {
+		let r = t, i = n, a = inject(FORM_ITEM_PROVIDE, void 0), p = createProvideComputed("disabled", [a, r], "or"), g = createProvideComputed("readonly", [a, r], "or"), [b, x] = useControlledMode("modelValue", r, i, {
 			transform: (e) => e,
 			defaultField: "defaultValue"
 		}), w = createProvideComputed("size", () => [
@@ -7238,7 +7243,7 @@ var check_solid_default = /* @__PURE__ */ defineComponent({
 		let n = e, r = t, [i, a] = useControlledMode("modelValue", n, r, {
 			defaultField: "defaultValue",
 			transform: (e) => !!e
-		}), p = inject(FORM_ITEM_PROVIDE), g = inject(CHECKBOX_GROUP_PROVIDE), b = createProvideComputed("size", () => [
+		}), p = inject(FORM_ITEM_PROVIDE, void 0), g = inject(CHECKBOX_GROUP_PROVIDE, void 0), b = createProvideComputed("size", () => [
 			g,
 			n.size && n,
 			p,
@@ -7359,7 +7364,7 @@ var check_solid_default = /* @__PURE__ */ defineComponent({
 		let r = t, i = n, [a, p] = useControlledMode("modelValue", r, i, {
 			transform: (e) => e || [],
 			defaultField: "defaultValue"
-		}), g = inject(FORM_ITEM_PROVIDE), b = createProvideComputed("disabled", [g, r], "or"), x = createProvideComputed("readonly", [g, r], "or"), w = (e) => y(e) ? e : e.key ?? e.value, T = createProvideComputed("size", () => [
+		}), g = inject(FORM_ITEM_PROVIDE, void 0), b = createProvideComputed("disabled", [g, r], "or"), x = createProvideComputed("readonly", [g, r], "or"), w = (e) => y(e) ? e : e.key ?? e.value, T = createProvideComputed("size", () => [
 			r.size && r,
 			g,
 			r