@nexxtmove/ui 1.12.0 → 1.13.0

package/dist/index.js

@@ -396,7 +396,7 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 			class: "relative block shrink-0 overflow-hidden",
 			style: x(o.value)
 		}, [c("svg", {
-			class: "absolute h-0 w-0 overflow-hidden",
+			class: "absolute size-0 overflow-hidden",
 			"aria-hidden": "true",
 			focusable: "false",
 			width: "0",
@@ -445,11 +445,11 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 			key: 0,
 			size: t.size
 		}, {
-			default: B(() => [c("div", { class: y(["flex h-full w-full items-center justify-center bg-cornflower-blue-50 font-semibold text-cornflower-blue-500", [f[t.size]]]) }, [o.value ? (w(), s("img", {
+			default: B(() => [c("div", { class: y(["flex size-full items-center justify-center bg-cornflower-blue-50 font-semibold text-cornflower-blue-500", [f[t.size]]]) }, [o.value ? (w(), s("img", {
 				key: 0,
 				src: t.src,
 				alt: t.name,
-				class: "h-full w-full object-cover",
+				class: "size-full object-cover",
 				onError: i[0] ||= (e) => r.value = !0
 			}, null, 40, _t)) : (w(), s(e, { key: 1 }, [d(k(l.value), 1)], 64))], 2)]),
 			_: 1
@@ -464,7 +464,7 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 			key: 0,
 			src: t.src,
 			alt: t.name,
-			class: "h-full w-full object-cover",
+			class: "size-full object-cover",
 			onError: i[1] ||= (e) => r.value = !0
 		}, null, 40, vt)) : (w(), s(e, { key: 1 }, [d(k(l.value), 1)], 64))], 2));
 	}
@@ -495,16 +495,24 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 		}
 	},
 	setup(e) {
-		return (t, r) => (w(), s("button", {
+		let t = {
+			primary: "button-primary",
+			secondary: "button-secondary",
+			success: "button-success",
+			danger: "button-danger",
+			warning: "button-warning",
+			link: "button-link"
+		};
+		return (r, i) => (w(), s("button", {
 			type: e.buttonType,
 			disabled: e.disabled,
 			class: y([
 				"button relative flex h-10 cursor-pointer items-center overflow-hidden transition-colors duration-200 focus-visible:outline-3 disabled:cursor-not-allowed",
 				e.fullWidth ? "w-full justify-start" : "justify-center",
 				e.rounded ? "rounded-full" : "rounded-lg",
-				`button-${e.variant}`,
-				t.$slots.default ?? "w-10",
-				!t.$slots.default && e.icon ? "aspect-square px-0" : "",
+				t[e.variant],
+				r.$slots.default ?? "w-10",
+				!r.$slots.default && e.icon ? "aspect-square px-0" : "",
 				e.loading ? "pointer-events-none" : ""
 			]),
 			"data-variant": e.variant
@@ -517,7 +525,7 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 					"opacity-0": e.loading
 				}])
 			}, null, 8, ["name", "class"])) : o("", !0),
-			t.$slots.default ? (w(), s("span", {
+			r.$slots.default ? (w(), s("span", {
 				key: 1,
 				class: y([
 					"inline-block transition-all duration-200",
@@ -526,7 +534,7 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 					e.variant === "link" ? "body-link underline-offset-1" : "body-normal",
 					e.variant === "link" && !e.loading && !e.disabled ? "hover:underline-offset-2" : ""
 				])
-			}, [D(t.$slots, "default")], 2)) : o("", !0),
+			}, [D(r.$slots, "default")], 2)) : o("", !0),
 			f(n, {
 				"enter-active-class": "transition-opacity duration-200",
 				"enter-from-class": "opacity-0",
@@ -549,7 +557,7 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 	}
 }), St = { class: "mb-4 flex items-center justify-between" }, Ct = ["disabled"], wt = {
 	key: 2,
-	class: "h-7 w-7"
+	class: "size-7"
 }, Tt = {
 	class: "flex items-center gap-1 font-normal text-sm text-cornflower-blue-600",
 	role: "status",
@@ -562,7 +570,7 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 	class: "relative h-5 overflow-hidden"
 }, Ot = { key: 2 }, kt = ["disabled"], At = {
 	key: 4,
-	class: "h-7 w-7"
+	class: "size-7"
 }, jt = /* @__PURE__ */ p({
 	__name: "_CalendarHeader",
 	props: {
@@ -595,7 +603,7 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 				key: 0,
 				type: "button",
 				disabled: !e.canGoPrev,
-				class: "flex h-7 w-7 cursor-pointer items-center justify-center rounded-full bg-gray-200 text-gray-950 transition-colors hover:bg-gray-300 disabled:cursor-not-allowed disabled:bg-transparent disabled:opacity-30",
+				class: "flex size-7 cursor-pointer items-center justify-center rounded-full bg-gray-200 text-gray-950 transition-colors hover:bg-gray-300 disabled:cursor-not-allowed disabled:bg-transparent disabled:opacity-30",
 				onClick: r[0] ||= (e) => a("prev"),
 				"aria-label": "Vorige maand"
 			}, [f(Q, {
@@ -604,7 +612,7 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 			})], 8, Ct)) : e.pickerView === "years" ? (w(), s("button", {
 				key: 1,
 				type: "button",
-				class: "flex h-7 w-7 cursor-pointer items-center justify-center rounded-full bg-gray-200 text-gray-950 transition-colors hover:bg-gray-300",
+				class: "flex size-7 cursor-pointer items-center justify-center rounded-full bg-gray-200 text-gray-950 transition-colors hover:bg-gray-300",
 				onClick: r[1] ||= (e) => a("closePicker"),
 				"aria-label": "Terug naar maanden"
 			}, [f(Q, {
@@ -616,7 +624,7 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 					default: B(() => [e.monthYearPicker ? (w(), s("button", {
 						key: `button-${l.value}`,
 						type: "button",
-						class: "block cursor-pointer rounded px-0.5 leading-5 whitespace-nowrap outline-none hover:text-cornflower-blue-700",
+						class: "block cursor-pointer rounded-sm px-0.5 leading-5 whitespace-nowrap outline-none hover:text-cornflower-blue-700",
 						onClick: r[2] ||= (e) => a("openMonthPicker")
 					}, k(l.value), 1)) : (w(), s("span", {
 						key: l.value,
@@ -628,7 +636,7 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 					default: B(() => [e.monthYearPicker ? (w(), s("button", {
 						key: `button-${u.value}`,
 						type: "button",
-						class: "block cursor-pointer rounded px-0.5 leading-5 whitespace-nowrap outline-none hover:text-cornflower-blue-700",
+						class: "block cursor-pointer rounded-sm px-0.5 leading-5 whitespace-nowrap outline-none hover:text-cornflower-blue-700",
 						onClick: r[3] ||= (e) => a("openYearPicker")
 					}, k(u.value), 1)) : (w(), s("span", {
 						key: u.value,
@@ -642,7 +650,7 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 				key: 3,
 				type: "button",
 				disabled: !e.canGoNext,
-				class: "flex h-7 w-7 cursor-pointer items-center justify-center rounded-full bg-gray-200 text-gray-950 transition-colors hover:bg-gray-300 disabled:cursor-not-allowed disabled:bg-transparent disabled:opacity-30",
+				class: "flex size-7 cursor-pointer items-center justify-center rounded-full bg-gray-200 text-gray-950 transition-colors hover:bg-gray-300 disabled:cursor-not-allowed disabled:bg-transparent disabled:opacity-30",
 				onClick: r[4] ||= (e) => a("next"),
 				"aria-label": "Volgende maand"
 			}, [f(Q, {
@@ -742,7 +750,7 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 			"aria-label": A(J)(e, "d MMMM yyyy", { locale: t.locale }),
 			tabindex: A(se)(e, t.viewDate) ? 0 : -1,
 			class: y([
-				"relative flex h-8 w-8 items-center justify-center rounded-xl text-xs transition-colors duration-150 outline-none focus:ring-2 focus:ring-cornflower-blue-500 focus:ring-offset-1",
+				"relative flex size-8 items-center justify-center rounded-xl text-xs transition-colors duration-150 outline-none focus:ring-2 focus:ring-cornflower-blue-500 focus:ring-offset-1",
 				A(se)(e, t.viewDate) ? "text-gray-900" : "text-gray-300",
 				f(e) ? "bg-cornflower-blue-500 font-medium text-white!" : "",
 				d(e) && !f(e) ? "font-medium text-cornflower-blue-500! ring-1 ring-cornflower-blue-500" : "",
@@ -754,7 +762,7 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 			onKeydown: (e) => g(e, r * 7 + n)
 		}, [c("span", Lt, k(A(J)(e, "d")), 1), p(e) ? (w(), s("span", {
 			key: 0,
-			class: y(["absolute bottom-1 left-1/2 h-1 w-1 -translate-x-1/2 rounded-full", f(e) ? "bg-white" : "bg-cornflower-blue-500"])
+			class: y(["absolute bottom-1 left-1/2 size-1 -translate-x-1/2 rounded-full", f(e) ? "bg-white" : "bg-cornflower-blue-500"])
 		}, null, 2)) : o("", !0)], 42, It)], 8, Ft))), 128))]))), 128))]));
 	}
 }), zt = {
@@ -878,13 +886,13 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 			c("div", qt, [
 				c("button", {
 					type: "button",
-					class: "flex h-8 w-8 items-center justify-center rounded-full text-gray-400 transition-colors hover:bg-gray-100 hover:text-cornflower-blue-500",
+					class: "flex size-8 items-center justify-center rounded-full text-gray-400 transition-colors hover:bg-gray-100 hover:text-cornflower-blue-500",
 					onClick: u
 				}, [f(Q, { name: "chevron-up" })]),
 				c("span", Jt, k(l(a.value)), 1),
 				c("button", {
 					type: "button",
-					class: "flex h-8 w-8 items-center justify-center rounded-full text-gray-400 transition-colors hover:bg-gray-100 hover:text-cornflower-blue-500",
+					class: "flex size-8 items-center justify-center rounded-full text-gray-400 transition-colors hover:bg-gray-100 hover:text-cornflower-blue-500",
 					onClick: d
 				}, [f(Q, { name: "chevron-down" })])
 			]),
@@ -892,13 +900,13 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 			c("div", Yt, [
 				c("button", {
 					type: "button",
-					class: "flex h-8 w-8 items-center justify-center rounded-full text-gray-400 transition-colors hover:bg-gray-100 hover:text-cornflower-blue-500",
+					class: "flex size-8 items-center justify-center rounded-full text-gray-400 transition-colors hover:bg-gray-100 hover:text-cornflower-blue-500",
 					onClick: p
 				}, [f(Q, { name: "chevron-up" })]),
 				c("span", Xt, k(l(o.value)), 1),
 				c("button", {
 					type: "button",
-					class: "flex h-8 w-8 items-center justify-center rounded-full text-gray-400 transition-colors hover:bg-gray-100 hover:text-cornflower-blue-500",
+					class: "flex size-8 items-center justify-center rounded-full text-gray-400 transition-colors hover:bg-gray-100 hover:text-cornflower-blue-500",
 					onClick: m
 				}, [f(Q, { name: "chevron-down" })])
 			])
@@ -1082,7 +1090,7 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 			key: 0,
 			src: e.image,
 			alt: e.imageAlt ?? "Card afbeelding",
-			class: "block h-40 max-h-40 min-h-40 w-full rounded-tl-lg rounded-tr-lg object-cover"
+			class: "block h-40 max-h-40 min-h-40 w-full rounded-t-lg object-cover"
 		}, null, 8, tn)) : o("", !0)]) : o("", !0), c("div", { class: y(["card-content box-border flex w-full flex-col gap-2 rounded-b-lg border border-gray-200 px-4 py-2", { "rounded-t-lg border-t": !e.image && !t.$slots.image }]) }, [D(t.$slots, "default")], 2)]));
 	}
 }), rn = ["disabled"], an = /* @__PURE__ */ p({
@@ -1110,7 +1118,7 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 		}), null, 16, rn), [[F, t.value]]), c("span", {
 			"aria-hidden": "true",
 			class: y([
-				"flex h-5 w-5 shrink-0 items-center justify-center rounded border transition-colors duration-200",
+				"flex size-5 shrink-0 items-center justify-center rounded-sm border transition-colors duration-200",
 				"peer-focus-visible:ring-2 peer-focus-visible:ring-cornflower-blue-400 peer-focus-visible:ring-offset-2",
 				t.value || e.indeterminate ? "border-cornflower-blue-600 text-cornflower-blue-600" : "border-gray-300 text-transparent"
 			])
@@ -1437,7 +1445,7 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 					f(A(Ce), {
 						color: g.value,
 						"aria-label": v.value ? `Geselecteerde kleur: ${v.value}` : "Geen kleur geselecteerd",
-						class: "h-5 w-5 shrink-0 rounded shadow-[inset_0_0_0_1px_rgba(0,0,0,0.1)]",
+						class: "size-5 shrink-0 rounded-sm shadow-[inset_0_0_0_1px_rgba(0,0,0,0.1)]",
 						style: { backgroundColor: "var(--reka-color-swatch-color)" }
 					}, null, 8, ["color", "aria-label"]),
 					c("span", { class: y(["flex-1 text-left text-sm", v.value ? "text-gray-900" : "text-gray-400"]) }, k(v.value || e.placeholder), 3),
@@ -1459,7 +1467,7 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 							class: "relative h-40 w-full cursor-crosshair outline-none",
 							style: x(e)
 						}, {
-							default: B(() => [f(A(ve), { class: "block h-4 w-4 cursor-grab rounded-full border-2 border-white shadow focus:outline-none active:cursor-grabbing" })]),
+							default: B(() => [f(A(ve), { class: "block size-4 cursor-grab rounded-full border-2 border-white shadow-sm focus:outline-none active:cursor-grabbing" })]),
 							_: 1
 						}, 8, ["style"])])]),
 						_: 1
@@ -1471,7 +1479,7 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 						class: "relative flex h-5 w-full touch-none items-center select-none",
 						"onUpdate:color": C
 					}, {
-						default: B(() => [f(A(Se), { class: "relative h-3 flex-1 overflow-hidden rounded-full" }), f(A(xe), { class: "block h-5 w-5 cursor-grab rounded-full border-2 border-white bg-white shadow focus:ring-2 focus:ring-cornflower-blue-500 focus:outline-none active:cursor-grabbing" })]),
+						default: B(() => [f(A(Se), { class: "relative h-3 flex-1 overflow-hidden rounded-full" }), f(A(xe), { class: "block size-5 cursor-grab rounded-full border-2 border-white bg-white shadow-sm focus:ring-2 focus:ring-cornflower-blue-500 focus:outline-none active:cursor-grabbing" })]),
 						_: 1
 					}, 8, ["model-value"]),
 					e.showAlpha ? (w(), s("div", fn, [i[8] ||= c("div", {
@@ -1484,10 +1492,10 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 						"model-value": u.value,
 						channel: "alpha",
 						"color-space": "hsl",
-						class: "relative z-10 flex h-full w-full touch-none items-center select-none",
+						class: "relative z-10 flex size-full touch-none items-center select-none",
 						"onUpdate:color": C
 					}, {
-						default: B(() => [f(A(Se), { class: "relative h-3 flex-1 overflow-hidden rounded-full" }), f(A(xe), { class: "block h-5 w-5 cursor-grab rounded-full border-2 border-white bg-white shadow focus:ring-2 focus:ring-cornflower-blue-500 focus:outline-none active:cursor-grabbing" })]),
+						default: B(() => [f(A(Se), { class: "relative h-3 flex-1 overflow-hidden rounded-full" }), f(A(xe), { class: "block size-5 cursor-grab rounded-full border-2 border-white bg-white shadow-sm focus:ring-2 focus:ring-cornflower-blue-500 focus:outline-none active:cursor-grabbing" })]),
 						_: 1
 					}, 8, ["model-value"])])) : o("", !0),
 					c("div", pn, [c("div", mn, [c("span", hn, k(_.value.toUpperCase()), 1), e.formats.length > 1 ? (w(), s("div", gn, [c("button", {
@@ -1515,7 +1523,7 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 						"onUpdate:color": C
 					}, {
 						default: B(() => [c("div", { class: y(["flex h-10 items-center overflow-hidden rounded-lg px-3 ring transition-colors ease-out focus-within:ring-cornflower-blue-500", p.value ? "ring-brick-400" : "ring-gray-200"]) }, [f(A(X), {
-							class: "w-full bg-transparent font-mono text-sm text-gray-900 placeholder-gray-400 focus:outline-none",
+							class: "w-full bg-transparent small-normal-mono text-gray-900 placeholder-gray-400 focus:outline-none",
 							placeholder: "#000000",
 							onInput: E
 						})], 2), p.value ? (w(), s("p", _n, k(p.value), 1)) : o("", !0)]),
@@ -1529,7 +1537,7 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 							"onUpdate:color": C
 						}, {
 							default: B(() => [c("div", { class: y(["flex h-10 items-center overflow-hidden rounded-lg px-3 ring transition-colors ease-out focus-within:ring-cornflower-blue-500", h.value.hue ? "ring-brick-400" : "ring-gray-200"]) }, [f(A(X), {
-								class: "w-full bg-transparent font-mono text-sm text-gray-900 placeholder-gray-400 focus:outline-none",
+								class: "w-full bg-transparent small-normal-mono text-gray-900 placeholder-gray-400 focus:outline-none",
 								placeholder: "H",
 								onInput: i[2] ||= (e) => D(e, "hue")
 							})], 2)]),
@@ -1543,7 +1551,7 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 							"onUpdate:color": C
 						}, {
 							default: B(() => [c("div", { class: y(["flex h-10 items-center overflow-hidden rounded-lg px-3 ring transition-colors ease-out focus-within:ring-cornflower-blue-500", h.value.saturation ? "ring-brick-400" : "ring-gray-200"]) }, [f(A(X), {
-								class: "w-full bg-transparent font-mono text-sm text-gray-900 placeholder-gray-400 focus:outline-none",
+								class: "w-full bg-transparent small-normal-mono text-gray-900 placeholder-gray-400 focus:outline-none",
 								placeholder: "S",
 								onInput: i[3] ||= (e) => D(e, "saturation")
 							})], 2)]),
@@ -1557,7 +1565,7 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 							"onUpdate:color": C
 						}, {
 							default: B(() => [c("div", { class: y(["flex h-10 items-center overflow-hidden rounded-lg px-3 ring transition-colors ease-out focus-within:ring-cornflower-blue-500", h.value.lightness ? "ring-brick-400" : "ring-gray-200"]) }, [f(A(X), {
-								class: "w-full bg-transparent font-mono text-sm text-gray-900 placeholder-gray-400 focus:outline-none",
+								class: "w-full bg-transparent small-normal-mono text-gray-900 placeholder-gray-400 focus:outline-none",
 								placeholder: "L",
 								onInput: i[4] ||= (e) => D(e, "lightness")
 							})], 2)]),
@@ -1572,7 +1580,7 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 							"onUpdate:color": C
 						}, {
 							default: B(() => [c("div", { class: y(["flex h-10 items-center overflow-hidden rounded-lg px-3 ring transition-colors ease-out focus-within:ring-cornflower-blue-500", h.value.red ? "ring-brick-400" : "ring-gray-200"]) }, [f(A(X), {
-								class: "w-full bg-transparent font-mono text-sm text-gray-900 placeholder-gray-400 focus:outline-none",
+								class: "w-full bg-transparent small-normal-mono text-gray-900 placeholder-gray-400 focus:outline-none",
 								placeholder: "R",
 								onInput: i[5] ||= (e) => D(e, "red")
 							})], 2)]),
@@ -1586,7 +1594,7 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 							"onUpdate:color": C
 						}, {
 							default: B(() => [c("div", { class: y(["flex h-10 items-center overflow-hidden rounded-lg px-3 ring transition-colors ease-out focus-within:ring-cornflower-blue-500", h.value.green ? "ring-brick-400" : "ring-gray-200"]) }, [f(A(X), {
-								class: "w-full bg-transparent font-mono text-sm text-gray-900 placeholder-gray-400 focus:outline-none",
+								class: "w-full bg-transparent small-normal-mono text-gray-900 placeholder-gray-400 focus:outline-none",
 								placeholder: "G",
 								onInput: i[6] ||= (e) => D(e, "green")
 							})], 2)]),
@@ -1600,7 +1608,7 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 							"onUpdate:color": C
 						}, {
 							default: B(() => [c("div", { class: y(["flex h-10 items-center overflow-hidden rounded-lg px-3 ring transition-colors ease-out focus-within:ring-cornflower-blue-500", h.value.blue ? "ring-brick-400" : "ring-gray-200"]) }, [f(A(X), {
-								class: "w-full bg-transparent font-mono text-sm text-gray-900 placeholder-gray-400 focus:outline-none",
+								class: "w-full bg-transparent small-normal-mono text-gray-900 placeholder-gray-400 focus:outline-none",
 								placeholder: "B",
 								onInput: i[7] ||= (e) => D(e, "blue")
 							})], 2)]),
@@ -1694,7 +1702,7 @@ var ft = { funda: { render: dt } }, Q = /* @__PURE__ */ p({
 					id: r,
 					"onUpdate:modelValue": i[0] ||= (e) => p.value = e,
 					placeholder: e.placeholder
-				}, u.value, { class: ["bg-transparant h-10 w-full min-w-60 text-sm text-gray-900 placeholder-gray-400 focus:outline-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", {
+				}, u.value, { class: ["h-10 w-full min-w-60 bg-transparent text-sm text-gray-900 placeholder-gray-400 focus:outline-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", {
 					"pl-3": !e.leftIcon,
 					"pr-3": !e.rightIcon
 				}] }), null, 16, wn), [[I, p.value]]),
@@ -3018,7 +3026,7 @@ var cr = /* @__PURE__ */ p({
 		}, {
 			default: B(() => [r.value ? (w(), s("div", {
 				key: 0,
-				class: y(["flex min-h-10 w-14 items-center justify-center overflow-hidden rounded-tl-md rounded-bl-md", p.value])
+				class: y(["flex min-h-10 w-14 items-center justify-center overflow-hidden rounded-l-md", p.value])
 			}, [f(Q, {
 				name: r.value,
 				class: "text-2xl",
@@ -3137,7 +3145,7 @@ var cr = /* @__PURE__ */ p({
 	"height"
 ], yr = {
 	xmlns: "http://www.w3.org/1999/xhtml",
-	class: "flex h-full w-full items-center justify-center"
+	class: "flex size-full items-center justify-center"
 }, br = { class: "heading-1" }, xr = /* @__PURE__ */ p({
 	name: "NexxtDoughnutChart",
 	__name: "DoughnutChart",
@@ -3251,7 +3259,7 @@ var cr = /* @__PURE__ */ p({
 				class: y(["h-7 w-px rounded-sm", t.variant === "primary" ? "bg-white" : "bg-gray-200"]),
 				"aria-hidden": "true"
 			}, null, 2)], 64)), c("button", {
-				class: y(["w-10 shrink-0 cursor-pointer transition-colors duration-200", [C.value, t.iconOnly ? "p-2" : "px-2 py-2"]]),
+				class: y(["w-10 shrink-0 cursor-pointer transition-colors duration-200", [C.value, (t.iconOnly, "p-2")]]),
 				"aria-haspopup": "menu",
 				"aria-expanded": n,
 				"aria-label": r.value,
@@ -3306,7 +3314,7 @@ var cr = /* @__PURE__ */ p({
 		return (e, t) => (w(), s("span", {
 			role: "img",
 			"aria-label": `Energielabel ${n.value}`,
-			class: "relative isolate mr-3 inline-flex h-6 items-center justify-center rounded-l px-2 extra-small-semibold text-white after:absolute after:top-1/2 after:left-full after:size-4.25 after:-translate-x-1/2 after:-translate-y-1/2 after:rotate-45 after:rounded-tr after:bg-(--energy-label-color) after:content-['']",
+			class: "relative isolate mr-3 inline-flex h-6 items-center justify-center rounded-l px-2 extra-small-semibold text-white after:absolute after:top-1/2 after:left-full after:size-4.25 after:-translate-1/2 after:rotate-45 after:rounded-tr after:bg-(--energy-label-color) after:content-['']",
 			style: x({
 				backgroundColor: r.value,
 				"--energy-label-color": r.value
@@ -3498,7 +3506,7 @@ var cr = /* @__PURE__ */ p({
 				id: A(l),
 				"onUpdate:modelValue": i[0] ||= (e) => S.value = e,
 				placeholder: t.placeholder
-			}, h.value, { class: "bg-transparant h-10 w-full min-w-40 px-3 text-sm text-gray-900 placeholder-gray-400 focus:outline-none" }), null, 16, Vr), [[I, S.value]])], 2),
+			}, h.value, { class: "h-10 w-full min-w-40 bg-transparent px-3 text-sm text-gray-900 placeholder-gray-400 focus:outline-none" }), null, 16, Vr), [[I, S.value]])], 2),
 			f(n, {
 				"enter-active-class": "transition-all duration-200 ease-out",
 				"enter-from-class": "opacity-0 -translate-y-1",
@@ -3622,13 +3630,13 @@ var cr = /* @__PURE__ */ p({
 								D(i.$slots, "header")
 							]), e.showClose ? (w(), a(A(we), {
 								key: 0,
-								class: "ml-4 shrink-0 cursor-pointer rounded p-1 focus-visible:outline-2"
+								class: "ml-4 shrink-0 cursor-pointer rounded-sm p-1 focus-visible:outline-2"
 							}, {
 								default: B(() => [f(Q, { name: "xmark" })]),
 								_: 1
 							})) : o("", !0)])) : e.showClose ? (w(), a(A(we), {
 								key: 1,
-								class: "absolute top-3 right-3 cursor-pointer rounded p-1 focus-visible:outline-2"
+								class: "absolute top-3 right-3 cursor-pointer rounded-sm p-1 focus-visible:outline-2"
 							}, {
 								default: B(() => [f(Q, { name: "xmark" })]),
 								_: 1
@@ -3765,14 +3773,14 @@ var cr = /* @__PURE__ */ p({
 				default: B(({ items: n }) => [
 					n.some((e) => e.type === "ellipsis") ? (w(), a(A(Me), {
 						key: 0,
-						class: "flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-transparent transition hover:bg-cornflower-blue-50 disabled:cursor-not-allowed disabled:opacity-50",
+						class: "flex size-8 cursor-pointer items-center justify-center rounded-lg bg-transparent transition hover:bg-cornflower-blue-50 disabled:cursor-not-allowed disabled:opacity-50",
 						disabled: t.disabled
 					}, {
 						default: B(() => [f(Q, { name: "angles-left" })]),
 						_: 1
 					}, 8, ["disabled"])) : o("", !0),
 					f(A(Le), {
-						class: "mr-4 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-transparent transition hover:bg-cornflower-blue-50 disabled:cursor-not-allowed disabled:opacity-50",
+						class: "mr-4 flex size-8 cursor-pointer items-center justify-center rounded-lg bg-transparent transition hover:bg-cornflower-blue-50 disabled:cursor-not-allowed disabled:opacity-50",
 						disabled: t.disabled
 					}, {
 						default: B(() => [f(Q, { name: "chevron-left" })]),
@@ -3789,13 +3797,13 @@ var cr = /* @__PURE__ */ p({
 					}, 1032, ["value", "disabled"])) : (w(), a(A(je), {
 						key: n.type,
 						index: r,
-						class: "flex h-8 w-8 items-center justify-center"
+						class: "flex size-8 items-center justify-center"
 					}, {
 						default: B(() => [...i[1] ||= [d(" … ", -1)]]),
 						_: 1
 					}, 8, ["index"]))], 64))), 256)),
 					f(A(Ie), {
-						class: "ml-4 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-transparent transition hover:bg-cornflower-blue-50 disabled:cursor-not-allowed disabled:opacity-50",
+						class: "ml-4 flex size-8 cursor-pointer items-center justify-center rounded-lg bg-transparent transition hover:bg-cornflower-blue-50 disabled:cursor-not-allowed disabled:opacity-50",
 						disabled: t.disabled
 					}, {
 						default: B(() => [f(Q, { name: "chevron-right" })]),
@@ -3803,7 +3811,7 @@ var cr = /* @__PURE__ */ p({
 					}, 8, ["disabled"]),
 					n.some((e) => e.type === "ellipsis") ? (w(), a(A(Ne), {
 						key: 1,
-						class: "flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-transparent transition hover:bg-cornflower-blue-50 disabled:cursor-not-allowed disabled:opacity-50",
+						class: "flex size-8 cursor-pointer items-center justify-center rounded-lg bg-transparent transition hover:bg-cornflower-blue-50 disabled:cursor-not-allowed disabled:opacity-50",
 						disabled: t.disabled
 					}, {
 						default: B(() => [f(Q, { name: "angles-right" })]),
@@ -3821,9 +3829,9 @@ var cr = /* @__PURE__ */ p({
 			"show-edges"
 		]));
 	}
-}), ii = ["aria-label"], ai = { class: "relative flex h-1.5 w-1.5" }, oi = {
+}), ii = ["aria-label"], ai = { class: "relative flex size-1.5" }, oi = {
 	key: 0,
-	class: "absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75"
+	class: "absolute inline-flex size-full animate-ping rounded-full bg-green-400 opacity-75"
 }, si = /* @__PURE__ */ p({
 	name: "NexxtPresenceIndicator",
 	__name: "PresenceIndicator",
@@ -3836,7 +3844,7 @@ var cr = /* @__PURE__ */ p({
 			class: y(["inline-flex h-6 items-center gap-1.5 rounded-sm px-2.5 extra-small-semibold", e.online ? "bg-green-100 text-green-600" : "bg-gray-100 text-gray-700"]),
 			"aria-label": e.online ? "Online" : "Offline",
 			role: "status"
-		}, [c("span", ai, [e.online ? (w(), s("span", oi)) : o("", !0), c("i", { class: y(["relative block h-1.5 w-1.5 rounded-full", e.online ? "bg-green-500" : "bg-gray-700"]) }, null, 2)]), d(" " + k(e.online ? "Actief" : "Inactief"), 1)], 10, ii));
+		}, [c("span", ai, [e.online ? (w(), s("span", oi)) : o("", !0), c("i", { class: y(["relative block size-1.5 rounded-full", e.online ? "bg-green-500" : "bg-gray-700"]) }, null, 2)]), d(" " + k(e.online ? "Actief" : "Inactief"), 1)], 10, ii));
 	}
 }), ci = { class: "@container" }, li = { class: "flex flex-col @md:gap-2" }, ui = { class: "flex items-center justify-between gap-2" }, di = [
 	"aria-label",
@@ -3962,7 +3970,7 @@ var cr = /* @__PURE__ */ p({
 	class: "shrink-0 body-normal text-gray-950"
 }, wi = {
 	key: 0,
-	class: "wrap-break-words w-full body-normal text-gray-950"
+	class: "w-full body-normal wrap-break-word text-gray-950"
 }, Ti = /* @__PURE__ */ p({
 	__name: "PropertyListing",
 	props: {
@@ -3977,7 +3985,7 @@ var cr = /* @__PURE__ */ p({
 			c("div", { class: y(["min-w-0 truncate text-gray-950", e.price ? "body-normal" : "body-semibold"]) }, k(e.city), 3)
 		]), e.text ? (w(), s("div", wi, k(e.text), 1)) : o("", !0)]));
 	}
-}), Ei = new URL("assets/property_placeholder-CxdNZf4X.jpg", import.meta.url).href, Di = { class: "relative isolate h-40 w-full overflow-hidden rounded-tl-lg rounded-tr-lg" }, Oi = ["src"], ki = { class: "absolute inset-0 flex items-center justify-center rounded-tl-lg rounded-tr-lg bg-white/20 backdrop-blur-sm" }, Ai = /* @__PURE__ */ p({
+}), Ei = new URL("assets/property_placeholder-CxdNZf4X.jpg", import.meta.url).href, Di = { class: "relative isolate h-40 w-full overflow-hidden rounded-t-lg" }, Oi = ["src"], ki = { class: "absolute inset-0 flex items-center justify-center rounded-t-lg bg-white/20 backdrop-blur-sm" }, Ai = /* @__PURE__ */ p({
 	name: "NexxtPropertyCard",
 	__name: "PropertyCard",
 	props: {
@@ -4008,10 +4016,10 @@ var cr = /* @__PURE__ */ p({
 				src: A(Ei),
 				alt: "Woning placeholder",
 				loading: "lazy",
-				class: "h-full w-full object-cover"
+				class: "size-full object-cover"
 			}, null, 8, Oi), c("div", ki, [f(Q, {
 				name: "house",
-				class: "text-6xl text-white drop-shadow"
+				class: "text-6xl text-white drop-shadow-sm"
 			})])])]),
 			key: "0"
 		}]), 1032, ["image", "image-alt"]));
@@ -4278,7 +4286,7 @@ var cr = /* @__PURE__ */ p({
 	}
 }), ta = ["disabled", "aria-pressed"], na = {
 	key: 0,
-	class: "absolute -top-2 -right-2 flex h-6 w-6 items-center justify-center rounded-full bg-cornflower-blue-500 text-white shadow"
+	class: "absolute -top-2 -right-2 flex size-6 items-center justify-center rounded-full bg-cornflower-blue-500 text-white shadow-sm"
 }, ra = /* @__PURE__ */ p({
 	name: "NexxtSelectableOption",
 	__name: "SelectableOption",
@@ -4361,7 +4369,7 @@ var cr = /* @__PURE__ */ p({
 			e.notificationCount ? (w(), s("span", ca, ", " + k(e.notificationCount) + " notifications", 1)) : o("", !0)
 		], 10, ia));
 	}
-}), ua = { class: "animate-pulse rounded bg-gray-200" }, da = /* @__PURE__ */ p({
+}), ua = { class: "animate-pulse rounded-sm bg-gray-200" }, da = /* @__PURE__ */ p({
 	name: "NexxtSkeleton",
 	__name: "Skeleton",
 	setup(e) {
@@ -4376,9 +4384,9 @@ var cr = /* @__PURE__ */ p({
 			class: "inline-flex w-80 flex-col items-start justify-start rounded-t-lg bg-white",
 			role: "status",
 			"aria-label": e.ariaLabel
-		}, [f(da, { class: "h-40 w-full rounded-tl-lg rounded-tr-lg rounded-b-none" }), c("div", pa, [c("div", ma, [
+		}, [f(da, { class: "h-40 w-full rounded-t-lg rounded-b-none" }), c("div", pa, [c("div", ma, [
 			f(da, { class: "h-4 w-24" }),
-			f(da, { class: "h-4 w-4" }),
+			f(da, { class: "size-4" }),
 			f(da, { class: "h-4 w-28" })
 		]), f(da, { class: "h-4 w-36" })])], 8, fa));
 	}
@@ -4525,7 +4533,7 @@ var cr = /* @__PURE__ */ p({
 		}, o = i(() => r.filter((e) => n[e.name]));
 		return (t, n) => (w(), s("ul", ba, [(w(!0), s(e, null, E(o.value, (e) => (w(), s("li", {
 			key: e.name,
-			class: y(["inline-flex h-5 w-5 items-center justify-center rounded-full outline-1 outline-white", a[e.name]]),
+			class: y(["inline-flex size-5 items-center justify-center rounded-full outline-1 outline-white", a[e.name]]),
 			"aria-label": e.label
 		}, [f(Q, {
 			name: e.icon,
@@ -4557,7 +4565,7 @@ var cr = /* @__PURE__ */ p({
 			muted: "",
 			playsinline: "",
 			loop: n.value,
-			class: "h-full w-full object-cover",
+			class: "size-full object-cover",
 			poster: Ca,
 			onEndedOnce: r
 		}, null, 40, Ta)], 32));
@@ -4565,7 +4573,7 @@ var cr = /* @__PURE__ */ p({
 }), Da = ["aria-pressed"], Oa = {
 	key: 0,
 	class: "col-start-1 row-span-2 row-start-1"
-}, ka = ["srcset"], Aa = ["src"], ja = ["muted"], Ma = ["src", "type"], Na = { class: "heading-4" }, Pa = { class: "extra-small" }, Fa = /* @__PURE__ */ p({
+}, ka = ["srcset"], Aa = ["src"], ja = ["muted"], Ma = ["src", "type"], Na = { class: "heading-4" }, Pa = { class: "extra-small-normal" }, Fa = /* @__PURE__ */ p({
 	name: "NexxtSocialMediaTemplate",
 	__name: "SocialMediaTemplate",
 	props: {
@@ -4610,14 +4618,14 @@ var cr = /* @__PURE__ */ p({
 			e.mediaType === "image" ? (w(), s("picture", Oa, [c("source", { srcset: e.media }, null, 8, ka), c("img", {
 				src: e.media,
 				alt: "Media content",
-				class: "h-full w-full object-cover object-center"
+				class: "size-full object-cover object-center"
 			}, null, 8, Aa)])) : (w(), s("video", {
 				key: 1,
 				ref_key: "videoRef",
 				ref: r,
 				muted: e.muted,
 				loop: "true",
-				class: "col-start-1 row-span-2 row-start-1 h-full w-full object-cover"
+				class: "col-start-1 row-span-2 row-start-1 size-full object-cover"
 			}, [c("source", {
 				src: e.media,
 				type: a.value
@@ -4626,7 +4634,7 @@ var cr = /* @__PURE__ */ p({
 				name: "check",
 				class: "ml-auto block shrink-0 text-3xl text-white"
 			})], 2)], 2),
-			c("div", { class: y(["goup-hover:opacity-0 z-20 col-start-1 row-start-2 flex items-center px-5 pt-2.5 pb-3.5 text-white transition-all duration-300 ease-out group-hover:translate-y-full", e.variant === "video" ? "bg-purple-500" : "bg-social-media-template-info-bg"]) }, [c("div", null, [c("div", Na, k(e.name), 1), c("div", Pa, k(e.type), 1)]), f(Q, {
+			c("div", { class: y(["z-20 col-start-1 row-start-2 flex items-center px-5 pt-2.5 pb-3.5 text-white transition-all duration-300 ease-out group-hover:translate-y-full group-hover:opacity-0", e.variant === "video" ? "bg-purple-500" : "bg-social-media-template-info-bg"]) }, [c("div", null, [c("div", Na, k(e.name), 1), c("div", Pa, k(e.type), 1)]), f(Q, {
 				name: e.variant === "post" ? "image" : e.variant === "video" ? "play-circle" : "images",
 				class: "mb-1 ml-auto block shrink-0 self-end text-lg"
 			}, null, 8, ["name"])], 2)
@@ -5201,7 +5209,7 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 				"onUpdate:modelValue"
 			])])) : o("", !0), (w(!0), s(e, null, E(t.columns, (e, i) => (w(), s("div", {
 				key: e.key,
-				class: "flex items-center truncate px-4 py-4 extra-small-normal text-slate-700",
+				class: "flex items-center truncate p-4 extra-small-normal text-slate-700",
 				role: "gridcell",
 				"aria-colindex": i + (t.selectable ? 2 : 1)
 			}, [D(r.$slots, L(e.key), {
@@ -5284,7 +5292,7 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 }, Vo = {
 	key: 1,
 	class: "mt-3 flex flex-wrap gap-2"
-}, Ho = { class: "body-small text-gray-700" }, Uo = /* @__PURE__ */ p({
+}, Ho = { class: "small-normal text-gray-700" }, Uo = /* @__PURE__ */ p({
 	name: "NexxtTemplateCard",
 	__name: "TemplateCard",
 	props: {
@@ -5469,9 +5477,9 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 			"data-event-date": e.event.happened_at,
 			"date-event-type": e.event.type,
 			class: y(["relative z-20 flex flex-wrap items-center gap-x-6 gap-y-2", { "justify-end": l.value }])
-		}, [c("div", { class: y(["w-full px-24 extra-small-normal text-gray-600", { "text-right": l.value }]) }, k(a.value), 3), c("div", { class: y(["flex w-full shrink-0 items-center gap-6", { "flex-row-reverse": l.value }]) }, [c("div", { class: y(["flex h-10 w-10 shrink-0 items-center justify-center rounded-full", [n.value.color]]) }, [f(Q, {
+		}, [c("div", { class: y(["w-full px-24 extra-small-normal text-gray-600", { "text-right": l.value }]) }, k(a.value), 3), c("div", { class: y(["flex w-full shrink-0 items-center gap-6", { "flex-row-reverse": l.value }]) }, [c("div", { class: y(["flex size-10 shrink-0 items-center justify-center rounded-full", [n.value.color]]) }, [f(Q, {
 			name: n.value.icon,
-			class: "flex h-6 w-6 text-xl text-white"
+			class: "flex size-6 text-xl text-white"
 		}, null, 8, ["name"])], 2), c("div", { class: y(["flex w-full flex-col gap-2 rounded-xl border border-gray-200 p-8", { "max-w-lg": e.splitView }]) }, [
 			c("span", Yo, k(n.value.label), 1),
 			e.event.url ? (w(), s("a", {
@@ -5481,7 +5489,7 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 				class: "group mt-1 flex justify-between gap-2 text-sm text-cornflower-blue-500 hover:text-cornflower-blue-600"
 			}, [c("span", Zo, k(e.event.description || e.event.url), 1), f(Q, {
 				name: "external-link",
-				class: "ml-1 h-4 w-4 text-gray-950"
+				class: "ml-1 size-4 text-gray-950"
 			})], 8, Xo)) : e.event.description ? (w(), s("span", Qo, k(e.event.description), 1)) : o("", !0),
 			e.event.request_reason ? (w(), s("span", $o, " Reden: " + k(e.event.request_reason), 1)) : o("", !0)
 		], 2)], 2)], 10, Jo));
@@ -5500,14 +5508,14 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 			tooltip: B(() => [c("span", is, k(e.leftTooltip), 1)]),
 			default: B(() => [f(Q, {
 				name: "circle-info",
-				class: "h-4 w-4 text-xs text-gray-600"
+				class: "size-4 text-xs text-gray-600"
 			})]),
 			_: 1
 		})) : o("", !0)]), c("span", as, [d(k(e.rightLabel) + " ", 1), e.rightTooltip ? (w(), a(No, { key: 0 }, {
 			tooltip: B(() => [c("span", os, k(e.rightTooltip), 1)]),
 			default: B(() => [f(Q, {
 				name: "circle-info",
-				class: "h-4 w-4 text-xs text-gray-600"
+				class: "size-4 text-xs text-gray-600"
 			})]),
 			_: 1
 		})) : o("", !0)])])]));
@@ -5569,7 +5577,7 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 				c("div", { class: y(["flex items-center gap-2 rounded-full px-12 py-4", [A(Z)[t.phase.phase.value].bgColor, A(Z)[t.phase.phase.value].textColor]]) }, [c("span", ls, k(A(Z)[t.phase.phase.value].label), 1), d() ? (w(), a(Q, {
 					key: 0,
 					name: d() === "up" ? "arrow-up" : "arrow-down",
-					class: "h-4 w-4 text-white"
+					class: "size-4 text-white"
 				}, null, 8, ["name"])) : o("", !0)], 2),
 				c("span", us, k(u()), 1),
 				t.isSplitView ? (w(), s("div", {
@@ -5577,10 +5585,10 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 					class: y(["mt-4 h-px w-[75%]", A(Z)[t.phase.phase.value].bgColor])
 				}, null, 2)) : o("", !0),
 				t.isLast ? o("", !0) : (w(), s("div", ds)),
-				c("div", { class: y(["absolute top-0 bottom-0 left-5 w-px bg-linear-to-b", r.value]) }, null, 2),
+				c("div", { class: y(["absolute inset-y-0 left-5 w-px bg-linear-to-b", r.value]) }, null, 2),
 				t.isSplitView ? (w(), s("div", {
 					key: 2,
-					class: y(["absolute top-0 right-5 bottom-0 w-px bg-linear-to-b", r.value])
+					class: y(["absolute inset-y-0 right-5 w-px bg-linear-to-b", r.value])
 				}, null, 2)) : o("", !0)
 			], 2))
 		], 8, cs));
@@ -5656,7 +5664,7 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 	},
 	emits: ["dismiss"],
 	setup(e, { emit: t }) {
-		M((e) => ({ b622135e: bs }));
+		M((e) => ({ fa0d20de: bs }));
 		let n = {
 			info: {
 				icon: "info",
@@ -5678,36 +5686,41 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 				iconBg: "bg-brick-500",
 				titleColor: "text-brick-600"
 			}
-		}, r = t, a = T(!1), l = i(() => n[e.variant]), u = null, d = e.autoClose, p = 0, m = (e) => {
-			p = Date.now(), u = setTimeout(() => r("dismiss"), e);
-		}, h = () => {
-			u && (clearTimeout(u), u = null, d -= Date.now() - p, a.value = !0);
+		}, r = {
+			info: "toast-info",
+			success: "toast-success",
+			warning: "toast-warning",
+			error: "toast-error"
+		}, a = t, l = T(!1), u = i(() => n[e.variant]), d = null, p = e.autoClose, m = 0, h = (e) => {
+			m = Date.now(), d = setTimeout(() => a("dismiss"), e);
 		}, g = () => {
-			d <= 0 || (a.value = !1, m(d));
+			d && (clearTimeout(d), d = null, p -= Date.now() - m, l.value = !0);
+		}, _ = () => {
+			p <= 0 || (l.value = !1, h(p));
 		};
 		return S(() => {
-			e.autoClose > 0 && m(e.autoClose);
+			e.autoClose > 0 && h(e.autoClose);
 		}), C(() => {
-			u && clearTimeout(u);
+			d && clearTimeout(d);
 		}), (t, n) => (w(), s("div", {
 			role: e.variant === "error" ? "alert" : "status",
 			"aria-live": e.variant === "error" ? "assertive" : "polite",
 			"aria-atomic": "true",
-			class: y(["toast flex w-100 gap-4 rounded-xl bg-white shadow-md", `toast-${e.variant}`]),
-			onMouseenter: n[1] ||= (t) => e.autoClose ? h() : void 0,
-			onMouseleave: n[2] ||= (t) => e.autoClose ? g() : void 0
+			class: y(["toast flex w-100 gap-4 rounded-xl bg-white shadow-md", r[e.variant]]),
+			onMouseenter: n[1] ||= (t) => e.autoClose ? g() : void 0,
+			onMouseleave: n[2] ||= (t) => e.autoClose ? _() : void 0
 		}, [
 			c("div", {
 				"aria-hidden": "true",
-				class: y(["flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-white", l.value.iconBg])
+				class: y(["flex size-8 shrink-0 items-center justify-center rounded-full text-white", u.value.iconBg])
 			}, [f(Q, {
-				name: l.value.icon,
+				name: u.value.icon,
 				class: "text-xl"
 			}, null, 8, ["name"])], 2),
 			c("div", gs, [
 				e.title ? (w(), s("p", {
 					key: 0,
-					class: y(["heading-4", l.value.titleColor])
+					class: y(["heading-4", u.value.titleColor])
 				}, k(e.title), 3)) : o("", !0),
 				e.message ? (w(), s("p", _s, k(e.message), 1)) : o("", !0),
 				D(t.$slots, "default", {}, void 0, !0)
@@ -5715,9 +5728,9 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 			e.dismissible ? (w(), s("button", {
 				key: 0,
 				type: "button",
-				class: "relative flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center focus:outline-none",
+				class: "relative flex size-8 shrink-0 cursor-pointer items-center justify-center focus:outline-none",
 				"aria-label": e.autoClose ? `Sluiten (verdwijnt automatisch na ${e.autoClose / 1e3} seconden)` : "Sluiten",
-				onClick: n[0] ||= (e) => r("dismiss")
+				onClick: n[0] ||= (e) => a("dismiss")
 			}, [e.autoClose ? (w(), s("svg", ys, [c("circle", {
 				cx: "12",
 				cy: "12",
@@ -5730,7 +5743,7 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 				class: "timer-circle",
 				style: x({
 					animationDuration: `${e.autoClose}ms`,
-					animationPlayState: a.value ? "paused" : "running"
+					animationPlayState: l.value ? "paused" : "running"
 				})
 			}, null, 4)])) : o("", !0), f(Q, {
 				name: "xmark",
@@ -5738,7 +5751,7 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 			})], 8, vs)) : o("", !0)
 		], 42, hs));
 	}
-}), [["__scopeId", "data-v-d13bb383"]]), Ss = /* @__PURE__ */ p({
+}), [["__scopeId", "data-v-7e3c5bda"]]), Ss = /* @__PURE__ */ p({
 	name: "NexxtToaster",
 	__name: "Toaster",
 	props: {
@@ -5884,7 +5897,7 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 	key: 0,
 	class: "pointer-events-none absolute inset-0 flex items-center justify-center"
 }, Is = {
-	class: "flex h-16 w-16 items-center justify-center rounded-full bg-black/50 text-white",
+	class: "flex size-16 items-center justify-center rounded-full bg-black/50 text-white",
 	"aria-hidden": "true"
 }, Ls = [
 	"aria-label",
@@ -6028,14 +6041,14 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 					style: x({ width: `${ee.value}%` })
 				}, null, 4),
 				c("div", {
-					class: "absolute top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-sapphire-100 opacity-0 shadow transition-opacity group-hover/player:opacity-100",
+					class: "absolute top-1/2 size-3 -translate-1/2 rounded-full bg-sapphire-100 opacity-0 shadow-sm transition-opacity group-hover/player:opacity-100",
 					style: x({ left: `${ee.value}%` })
 				}, null, 4)
 			], 40, Ls), c("div", Rs, [
 				c("button", {
 					type: "button",
 					"aria-label": A(u) ? a.value.pause : a.value.play,
-					class: "flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-white transition hover:bg-white/10 hover:text-cornflower-blue-400",
+					class: "flex size-8 cursor-pointer items-center justify-center rounded-full text-white transition hover:bg-white/10 hover:text-cornflower-blue-400",
 					onClick: I
 				}, [f(Q, {
 					name: A(u) ? "pause" : "play",
@@ -6047,7 +6060,7 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 				c("button", {
 					type: "button",
 					"aria-label": A(h) ? a.value.unmute : a.value.mute,
-					class: "flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-white transition hover:bg-white/10 hover:text-cornflower-blue-400",
+					class: "flex size-8 cursor-pointer items-center justify-center rounded-full text-white transition hover:bg-white/10 hover:text-cornflower-blue-400",
 					onClick: L
 				}, [f(Q, {
 					name: A(h) ? "volume-xmark" : "volume-high",
@@ -6057,7 +6070,7 @@ var Wa = { render: Ua }, Ga = { class: "flex items-center justify-end self-stret
 				c("button", {
 					type: "button",
 					"aria-label": A(_) ? a.value.exitFullscreen : a.value.enterFullscreen,
-					class: "flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-white transition hover:bg-white/10 hover:text-cornflower-blue-400",
+					class: "flex size-8 cursor-pointer items-center justify-center rounded-full text-white transition hover:bg-white/10 hover:text-cornflower-blue-400",
 					onClick: r[4] ||= (...e) => A(v) && A(v)(...e)
 				}, [f(Q, {
 					name: A(_) ? "compress" : "expand",