@nexxtmove/ui 1.48.0 → 1.49.0

package/dist/components/molecules/Tabs/Tabs.vue.d.ts

@@ -1,11 +1,23 @@
 import { NexxtIconName } from '../../atoms/Icon/Icon.vue';
 export interface NexxtTabItem {
+    /** Visible text, the `v-model` value and the key; in icon-only mode the tab's accessible name. */
     label: string;
+    /** Icon shown before the label, or on its own in icon-only mode. */
     icon?: NexxtIconName;
+    /** Show only the icon for this tab. Overrides the tabs-wide `iconOnly` either way. */
+    iconOnly?: boolean;
 }
 interface NexxtTabs {
+    /** The tabs, as plain labels or `{ label, icon, iconOnly }` objects. */
     tabs: (string | NexxtTabItem)[];
+    /** Accessible name of the tablist. */
     tablistLabel?: string;
+    /**
+     * Show only the icon of every tab, as a near-square button. The label stays the `v-model`
+     * value and the accessible name, in a visually hidden span. A tab without an `icon` keeps its
+     * visible label.
+     */
+    iconOnly?: boolean;
 }
 type __VLS_Props = NexxtTabs;
 declare const selected: import('vue').ModelRef<string, string, string, string>;

package/dist/index.js

@@ -9641,12 +9641,13 @@ var bf = { render: yf }, xf = { class: "flex items-center justify-end self-stret
 	"tabindex",
 	"onClick",
 	"onKeydown"
-], Hf = /* @__PURE__ */ p({
+], Hf = { class: "sr-only" }, Uf = /* @__PURE__ */ p({
 	name: "NexxtTabs",
 	__name: "Tabs",
 	props: /*@__PURE__*/ v({
 		tabs: {},
-		tablistLabel: {}
+		tablistLabel: {},
+		iconOnly: { type: Boolean }
 	}, {
 		modelValue: {
 			type: String,
@@ -9656,29 +9657,43 @@ var bf = { render: yf }, xf = { class: "flex items-center justify-end self-stret
 	}),
 	emits: ["update:modelValue"],
 	setup(t) {
-		let n = t, r = z(t, "modelValue"), l = B("containerRef"), u = A([]), f = A({
+		let n = t, r = z(t, "modelValue"), l = B("containerRef"), u = A([]), p = A({
 			width: "0px",
 			transform: "translateX(0px)"
-		}), p = A("inset(0 100% 0 0 round 9999px)"), m = A(!1), h = i(() => n.tabs.map((e) => typeof e == "string" ? { label: e } : e)), g = async () => {
+		}), m = A("inset(0 100% 0 0 round 9999px)"), h = A(!1), g = i(() => n.tabs.map((e) => typeof e == "string" ? { label: e } : e)), _ = (e) => e.iconOnly ?? n.iconOnly ?? !1, v = i(() => g.value.map((e) => {
+			let t = !!e.icon && _(e);
+			return {
+				...e,
+				compact: t,
+				text: t ? "" : e.label,
+				spacing: t ? "px-3" : "gap-2 px-4"
+			};
+		})), y = async () => {
 			await b();
-			let e = h.value.findIndex((e) => e.label === r.value), t = u.value[e];
+			let e = g.value.findIndex((e) => e.label === r.value), t = u.value[e];
 			if (!t || !l.value) return;
-			let n = t.offsetLeft, i = t.offsetWidth, a = l.value.offsetWidth - n - i;
-			f.value = {
-				width: `${i}px`,
-				transform: `translateX(${n}px)`
-			}, p.value = `inset(0 ${a}px 0 ${n}px round 9999px)`;
-		}, _ = (e, t) => {
+			let n = l.value, i = n.getBoundingClientRect(), a = t.getBoundingClientRect(), o = parseFloat(getComputedStyle(n).width), s = o > 0 && i.width > 0 ? i.width / o : 1, c = (a.left - i.left) / s, d = a.width / s, f = i.width / s - c - d;
+			p.value = {
+				width: `${d}px`,
+				transform: `translateX(${c}px)`
+			}, m.value = `inset(0 ${f}px 0 ${c}px round 9999px)`;
+		}, S = (e, t) => {
 			let n;
-			if (e.key === "ArrowRight") n = (t + 1) % h.value.length;
-			else if (e.key === "ArrowLeft") n = (t - 1 + h.value.length) % h.value.length;
+			if (e.key === "ArrowRight") n = (t + 1) % g.value.length;
+			else if (e.key === "ArrowLeft") n = (t - 1 + g.value.length) % g.value.length;
 			else if (e.key === "Home") n = 0;
-			else if (e.key === "End") n = h.value.length - 1;
+			else if (e.key === "End") n = g.value.length - 1;
 			else return;
-			e.preventDefault(), r.value = h.value[n].label, u.value[n]?.focus();
+			e.preventDefault(), r.value = g.value[n].label, u.value[n]?.focus();
 		};
-		return W(r, async () => await g()), W(h, async () => await g()), T(async () => {
-			await document.fonts.ready, await g(), await b(), l.value?.offsetWidth, m.value = !0;
+		return W(r, async () => await y()), W(v, async () => await y()), process.env.NODE_ENV !== "production" && G(() => {
+			let e = g.value.filter((e) => !e.icon && _(e));
+			if (e.length) {
+				let t = e.map((e) => `"${e.label}"`).join(", ");
+				console.warn(`[NexxtTabs] icon-only tab without an \`icon\` shows its label: ${t}.`);
+			}
+		}), T(async () => {
+			await document.fonts.ready, await y(), await b(), l.value?.offsetWidth, h.value = !0;
 		}), (n, i) => (D(), s("div", {
 			ref_key: "containerRef",
 			ref: l,
@@ -9688,44 +9703,49 @@ var bf = { render: yf }, xf = { class: "flex items-center justify-end self-stret
 		}, [
 			c("div", {
 				"aria-hidden": "true",
-				class: x(["absolute inset-y-1 left-0 rounded-full bg-cornflower-blue-500", m.value ? "transition-all duration-500 ease-[cubic-bezier(0.34,1.2,0.64,1)]" : ""]),
-				style: C(f.value)
+				class: x(["absolute inset-y-1 left-0 rounded-full bg-cornflower-blue-500", h.value ? "transition-all duration-500 ease-[cubic-bezier(0.34,1.2,0.64,1)]" : ""]),
+				style: C(p.value)
 			}, null, 6),
-			(D(!0), s(e, null, j(h.value, (e, t) => (D(), s("button", {
-				key: e.label,
+			(D(!0), s(e, null, j(v.value, (t, n) => (D(), s("button", {
+				key: t.label,
 				ref_for: !0,
-				ref: (e) => u.value[t] = e,
+				ref: (e) => u.value[n] = e,
 				role: "tab",
-				"aria-selected": r.value === e.label,
-				tabindex: r.value === e.label ? 0 : -1,
-				class: x(["relative z-10 inline-flex h-9 cursor-pointer items-center gap-2 rounded-full px-4 small-normal", [
-					r.value === e.label ? "text-transparent" : "text-gray-950",
-					m.value ? "transition-colors duration-0" : "",
-					r.value === e.label ? "delay-500" : "delay-0"
+				"aria-selected": r.value === t.label,
+				tabindex: r.value === t.label ? 0 : -1,
+				class: x(["relative z-10 inline-flex h-9 cursor-pointer items-center rounded-full small-normal", [
+					t.spacing,
+					r.value === t.label ? "text-transparent" : "text-gray-950",
+					h.value ? "transition-colors duration-0" : "",
+					r.value === t.label ? "delay-500" : "delay-0"
 				]]),
-				onClick: (t) => r.value = e.label,
-				onKeydown: (e) => _(e, t)
-			}, [e.icon ? (D(), a(Q, {
-				key: 0,
-				name: e.icon,
+				onClick: (e) => r.value = t.label,
+				onKeydown: (e) => S(e, n)
+			}, [t.compact && t.icon ? (D(), s(e, { key: 0 }, [f(Q, {
+				name: t.icon,
 				"aria-hidden": "true",
 				class: "body-normal"
-			}, null, 8, ["name"])) : o("", !0), d(" " + P(e.label), 1)], 42, Vf))), 128)),
+			}, null, 8, ["name"]), c("span", Hf, P(t.label), 1)], 64)) : t.icon ? (D(), a(Q, {
+				key: 1,
+				name: t.icon,
+				"aria-hidden": "true",
+				class: "body-normal"
+			}, null, 8, ["name"])) : o("", !0), d(" " + P(t.text), 1)], 42, Vf))), 128)),
 			c("div", {
 				"aria-hidden": "true",
-				class: x(["pointer-events-none absolute inset-0 z-20 flex p-1", m.value ? "transition-[clip-path] duration-300 ease-[cubic-bezier(0.34,1.2,0.64,1)]" : ""]),
-				style: C({ clipPath: p.value })
-			}, [(D(!0), s(e, null, j(h.value, (e) => (D(), s("span", {
+				class: x(["pointer-events-none absolute inset-0 z-20 flex p-1", h.value ? "transition-[clip-path] duration-300 ease-[cubic-bezier(0.34,1.2,0.64,1)]" : ""]),
+				style: C({ clipPath: m.value })
+			}, [(D(!0), s(e, null, j(v.value, (e) => (D(), s("span", {
 				key: e.label,
-				class: "flex h-9 items-center gap-2 rounded-full px-4 small-normal text-white"
+				class: x(["flex h-9 items-center rounded-full small-normal text-white", e.spacing])
 			}, [e.icon ? (D(), a(Q, {
 				key: 0,
 				name: e.icon,
 				class: "body-normal"
-			}, null, 8, ["name"])) : o("", !0), d(" " + P(e.label), 1)]))), 128))], 6)
+			}, null, 8, ["name"])) : o("", !0), d(" " + P(e.text), 1)], 2))), 128))], 6)
 		], 8, Bf));
 	}
-}), Uf = { class: "flex flex-col items-center" }, Wf = { class: "relative w-full overflow-hidden" }, Gf = ["aria-labelledby"], Kf = /* @__PURE__ */ p({
+}), Wf = { class: "flex flex-col items-center" }, Gf = { class: "relative w-full overflow-hidden" }, Kf = ["aria-labelledby"], qf = /* @__PURE__ */ p({
 	name: "NexxtTabbedContent",
 	__name: "TabbedContent",
 	props: /*@__PURE__*/ v({
@@ -9750,7 +9770,7 @@ var bf = { render: yf }, xf = { class: "flex items-center justify-end self-stret
 			enterFromClass: a.value === "forward" ? "-translate-x-10 opacity-0" : "translate-x-10 opacity-0",
 			leaveToClass: a.value === "forward" ? "translate-x-10 opacity-0" : "-translate-x-10 opacity-0"
 		} : { mode: "out-in" });
-		return (t, i) => (D(), s("div", Uf, [f(Hf, {
+		return (t, i) => (D(), s("div", Wf, [f(Uf, {
 			tabs: e.tabs,
 			modelValue: r.value,
 			"onUpdate:modelValue": i[0] ||= (e) => r.value = e,
@@ -9760,49 +9780,49 @@ var bf = { render: yf }, xf = { class: "flex items-center justify-end self-stret
 			"tabs",
 			"modelValue",
 			"tablist-label"
-		]), c("div", Wf, [f(n, S(h(d.value)), {
+		]), c("div", Gf, [f(n, S(h(d.value)), {
 			default: K(() => [(D(), s("div", {
 				key: r.value,
 				role: "tabpanel",
 				"aria-labelledby": u(r.value),
 				class: "w-full"
-			}, [M(t.$slots, l(r.value))], 8, Gf))]),
+			}, [M(t.$slots, l(r.value))], 8, Kf))]),
 			_: 3
 		}, 16)])]));
 	}
-}), qf = { class: "flex flex-col gap-3" }, Jf = ["aria-colcount", "aria-rowcount"], Yf = { class: "sticky top-0 z-10 mb-0.5" }, Xf = { key: 0 }, Zf = {
+}), Jf = { class: "flex flex-col gap-3" }, Yf = ["aria-colcount", "aria-rowcount"], Xf = { class: "sticky top-0 z-10 mb-0.5" }, Zf = { key: 0 }, Qf = {
 	key: 0,
 	class: "flex items-center justify-center px-2 py-3",
 	role: "columnheader",
 	"aria-colindex": "1"
-}, Qf = [
+}, $f = [
 	"aria-colindex",
 	"aria-sort",
 	"tabindex",
 	"onClick",
 	"onKeydown"
-], $f = {
+], ep = {
 	role: "rowgroup",
 	class: "relative"
-}, ep = [
+}, tp = [
 	"aria-rowindex",
 	"aria-selected",
 	"onClick",
 	"onKeydown"
-], tp = {
+], np = {
 	key: 0,
 	class: "flex items-center justify-center px-2 py-4",
 	role: "gridcell",
 	"aria-colindex": 1
-}, np = ["aria-colindex"], rp = {
+}, rp = ["aria-colindex"], ip = {
 	key: 0,
 	class: "px-4 py-8 text-center text-sm text-slate-400",
 	role: "row"
-}, ip = {
+}, ap = {
 	key: 0,
 	"data-testid": "loading-overlay",
 	class: "absolute inset-0 flex items-center justify-center rounded-md bg-white/40 backdrop-blur-sm"
-}, ap = /* @__PURE__ */ p({
+}, op = /* @__PURE__ */ p({
 	name: "NexxtTable",
 	__name: "Table",
 	props: /*@__PURE__*/ v({
@@ -9852,17 +9872,17 @@ var bf = { render: yf }, xf = { class: "flex items-center justify-end self-stret
 		}, N = (e, t) => e[t], ee = (e) => `cell-${e}`, F = (e, t) => {
 			e.key === "ArrowDown" ? (e.preventDefault(), _.value?.[Math.min(t + 1, u.rows.length - 1)]?.focus()) : e.key === "ArrowUp" && (e.preventDefault(), _.value?.[Math.max(t - 1, 0)]?.focus());
 		};
-		return (r, i) => (D(), s("div", qf, [c("div", {
+		return (r, i) => (D(), s("div", Jf, [c("div", {
 			role: "grid",
 			"aria-colcount": t.columns.length + +!!t.selectable,
 			"aria-rowcount": t.rows.length + 1,
 			class: "min-w-full"
-		}, [c("div", Yf, [r.$slots.toolbar ? (D(), s("div", Xf, [M(r.$slots, "toolbar")])) : o("", !0), c("div", {
+		}, [c("div", Xf, [r.$slots.toolbar ? (D(), s("div", Zf, [M(r.$slots, "toolbar")])) : o("", !0), c("div", {
 			class: "grid rounded-md bg-gray-50",
 			style: C({ gridTemplateColumns: E.value }),
 			role: "row",
 			"aria-rowindex": "1"
-		}, [t.selectable ? (D(), s("div", Zf, [t.selectionMode === "multiple" ? (D(), a(Xa, {
+		}, [t.selectable ? (D(), s("div", Qf, [t.selectionMode === "multiple" ? (D(), a(Xa, {
 			key: 0,
 			"model-value": v.value,
 			indeterminate: y.value,
@@ -9881,7 +9901,7 @@ var bf = { render: yf }, xf = { class: "flex items-center justify-end self-stret
 			key: 0,
 			name: h.value === e.key ? g.value === "asc" ? "angle-down" : "angle-up" : "angles-up-down",
 			class: x(["shrink-0 text-xs", h.value === e.key ? "text-cornflower-blue-600" : "text-slate-400"])
-		}, null, 8, ["name", "class"])) : o("", !0)], 42, Qf))), 128))], 4)]), c("div", $f, [
+		}, null, 8, ["name", "class"])) : o("", !0)], 42, $f))), 128))], 4)]), c("div", ep, [
 			(D(!0), s(e, null, j(t.rows, (n, i) => (D(), s("div", {
 				key: i,
 				ref_for: !0,
@@ -9900,7 +9920,7 @@ var bf = { render: yf }, xf = { class: "flex items-center justify-end self-stret
 				tabindex: "0",
 				onClick: (e) => k(e, i),
 				onKeydown: (e) => F(e, i)
-			}, [t.selectable ? (D(), s("div", tp, [f(Xa, {
+			}, [t.selectable ? (D(), s("div", np, [f(Xa, {
 				"model-value": b(n),
 				"aria-label": `Select row ${i + 1}`,
 				"onUpdate:modelValue": (e) => w(n)
@@ -9916,45 +9936,45 @@ var bf = { render: yf }, xf = { class: "flex items-center justify-end self-stret
 			}, [M(r.$slots, ee(e.key), {
 				row: n,
 				value: N(n, e.key)
-			}, () => [d(P(N(n, e.key)), 1)])], 8, np))), 128))], 46, ep))), 128)),
-			t.rows.length ? o("", !0) : (D(), s("div", rp, [M(r.$slots, "empty", {}, () => [i[0] ||= d("Geen data beschikbaar", -1)])])),
+			}, () => [d(P(N(n, e.key)), 1)])], 8, rp))), 128))], 46, tp))), 128)),
+			t.rows.length ? o("", !0) : (D(), s("div", ip, [M(r.$slots, "empty", {}, () => [i[0] ||= d("Geen data beschikbaar", -1)])])),
 			f(n, {
 				"enter-active-class": "transition-opacity duration-200",
 				"leave-active-class": "transition-opacity duration-200",
 				"enter-from-class": "opacity-0",
 				"leave-to-class": "opacity-0"
 			}, {
-				default: K(() => [t.loading ? (D(), s("div", ip, [M(r.$slots, "loading", {}, () => [f(Q, {
+				default: K(() => [t.loading ? (D(), s("div", ap, [M(r.$slots, "loading", {}, () => [f(Q, {
 					name: "spinner-third",
 					class: "fa-spin text-3xl text-purple-500"
 				})])])) : o("", !0)]),
 				_: 3
 			})
-		])], 8, Jf)]));
+		])], 8, Yf)]));
 	}
-}), op = { class: "block h-38 w-full" }, sp = ["src"], cp = {
+}), sp = { class: "block h-38 w-full" }, cp = ["src"], lp = {
 	key: 1,
 	class: "flex h-38 w-full items-center justify-center rounded-t-xl bg-gray-100"
-}, lp = { class: "rounded-b-xl px-8 pt-3.5 pb-4" }, up = { class: "truncate heading-4 text-gray-900" }, dp = {
+}, up = { class: "rounded-b-xl px-8 pt-3.5 pb-4" }, dp = { class: "truncate heading-4 text-gray-900" }, fp = {
 	key: 0,
 	class: "truncate body-normal text-gray-700"
-}, fp = {
+}, pp = {
 	key: 1,
 	class: "mt-3 flex flex-wrap gap-2"
-}, pp = { class: "sr-only" }, mp = { class: "small-normal text-gray-700" }, hp = [
+}, mp = { class: "sr-only" }, hp = { class: "small-normal text-gray-700" }, gp = [
 	"aria-label",
 	"aria-pressed",
 	"disabled"
-], gp = {
+], _p = {
 	key: 1,
 	class: "absolute top-4 right-4 z-20"
-}, _p = {
+}, vp = {
 	key: 2,
 	class: "pointer-events-none absolute inset-0 z-10 flex flex-col items-center justify-center gap-3 rounded-xl bg-white/60 opacity-0 backdrop-blur-xs transition-opacity duration-200 ease-out *:pointer-events-auto group-focus-within:opacity-100 group-hover:opacity-100 pointer-coarse:inset-x-0 pointer-coarse:top-0 pointer-coarse:bottom-auto pointer-coarse:h-38 pointer-coarse:justify-end pointer-coarse:bg-transparent pointer-coarse:p-4 pointer-coarse:opacity-100 pointer-coarse:backdrop-blur-none"
-}, vp = {
+}, yp = {
 	key: 3,
 	class: "absolute -top-2 -right-2 z-30 flex size-6 items-center justify-center rounded-full bg-cornflower-blue-500 text-white shadow-sm"
-}, yp = /* @__PURE__ */ p({
+}, bp = /* @__PURE__ */ p({
 	name: "NexxtTemplateCard",
 	__name: "TemplateCard",
 	props: {
@@ -10019,24 +10039,24 @@ var bf = { render: yf }, xf = { class: "flex items-center justify-end self-stret
 				t.selectable && "pointer-events-none",
 				t.selectable && t.disabled && "opacity-50",
 				n.$slots.overlay && !(t.selectable && t.disabled) && "group-focus-within:opacity-40 group-hover:opacity-40 pointer-coarse:opacity-100!"
-			]]) }, [c("picture", op, [t.image ? (D(), s("img", {
+			]]) }, [c("picture", sp, [t.image ? (D(), s("img", {
 				key: 0,
 				src: t.image,
 				alt: "",
 				loading: "lazy",
 				class: "h-38 w-full rounded-t-xl object-cover"
-			}, null, 8, sp)) : (D(), s("div", cp, [f(Q, {
+			}, null, 8, cp)) : (D(), s("div", lp, [f(Q, {
 				name: "image",
 				class: "text-4xl text-gray-400"
-			})]))]), c("div", lp, [
-				c("h3", up, P(t.title), 1),
-				t.subtitle ? (D(), s("p", dp, P(t.subtitle), 1)) : o("", !0),
-				t.contentFeatures.length ? (D(), s("ul", fp, [(D(!0), s(e, null, j(t.contentFeatures, (e) => (D(), s("li", { key: e }, [f(Pt, null, {
-					tooltip: K(() => [c("span", mp, P(d.value[e]), 1)]),
+			})]))]), c("div", up, [
+				c("h3", dp, P(t.title), 1),
+				t.subtitle ? (D(), s("p", fp, P(t.subtitle), 1)) : o("", !0),
+				t.contentFeatures.length ? (D(), s("ul", pp, [(D(!0), s(e, null, j(t.contentFeatures, (e) => (D(), s("li", { key: e }, [f(Pt, null, {
+					tooltip: K(() => [c("span", hp, P(d.value[e]), 1)]),
 					default: K(() => [c("div", {
 						class: x([[r[e].backgroundColor, r[e].textColor], "pointer-events-auto flex size-8 items-center justify-center rounded-full"]),
 						onClick: p
-					}, [f(Q, { name: r[e].icon }, null, 8, ["name"]), c("span", pp, P(d.value[e]), 1)], 2)]),
+					}, [f(Q, { name: r[e].icon }, null, 8, ["name"]), c("span", mp, P(d.value[e]), 1)], 2)]),
 					_: 2
 				}, 1024)]))), 128))])) : o("", !0)
 			])], 2),
@@ -10048,23 +10068,23 @@ var bf = { render: yf }, xf = { class: "flex items-center justify-end self-stret
 				disabled: t.disabled || void 0,
 				class: "absolute inset-0 cursor-pointer rounded-xl focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-cornflower-blue-500 disabled:cursor-not-allowed",
 				onClick: p
-			}, null, 8, hp)) : o("", !0),
-			n.$slots.actions ? (D(), s("div", gp, [M(n.$slots, "actions", { selected: t.selected })])) : o("", !0),
-			n.$slots.overlay && !(t.selectable && t.disabled) ? (D(), s("div", _p, [M(n.$slots, "overlay", { selected: t.selected })])) : o("", !0),
-			t.selectable && t.selected && t.checkmark ? (D(), s("span", vp, [f(Q, {
+			}, null, 8, gp)) : o("", !0),
+			n.$slots.actions ? (D(), s("div", _p, [M(n.$slots, "actions", { selected: t.selected })])) : o("", !0),
+			n.$slots.overlay && !(t.selectable && t.disabled) ? (D(), s("div", vp, [M(n.$slots, "overlay", { selected: t.selected })])) : o("", !0),
+			t.selectable && t.selected && t.checkmark ? (D(), s("span", yp, [f(Q, {
 				name: "check",
 				type: "solid",
 				class: "text-xs"
 			})])) : o("", !0)
 		], 2));
 	}
-}), bp = {
+}), xp = {
 	key: 0,
 	class: "text-brick-500"
-}, xp = ["rows", "placeholder"], Sp = {
+}, Sp = ["rows", "placeholder"], Cp = {
 	key: 1,
 	class: "small-normal text-brick-400"
-}, Cp = /* @__PURE__ */ p({
+}, wp = /* @__PURE__ */ p({
 	name: "NexxtTextarea",
 	inheritAttrs: !1,
 	__name: "Textarea",
@@ -10120,7 +10140,7 @@ var bf = { render: yf }, xf = { class: "flex items-center justify-end self-stret
 				key: 0,
 				class: "justify-start small-normal text-gray-700",
 				for: n
-			}, [d(P(e.label) + " ", 1), e.required ? (D(), s("span", bp, "*")) : o("", !0)])) : o("", !0),
+			}, [d(P(e.label) + " ", 1), e.required ? (D(), s("span", xp, "*")) : o("", !0)])) : o("", !0),
 			re(c("textarea", y({
 				id: n,
 				ref_key: "textareaEl",
@@ -10131,21 +10151,21 @@ var bf = { render: yf }, xf = { class: "flex items-center justify-end self-stret
 				placeholder: e.placeholder,
 				class: ["min-h-10 w-full rounded-lg border px-3 py-2 small-normal text-gray-900 transition-colors outline-none placeholder:text-gray-400 focus:border-cornflower-blue-500", [e.error ? "border-brick-400" : "border-gray-200", e.autosize || e.resize === "none" ? "resize-none" : "resize-y"]],
 				onInput: p
-			}), null, 16, xp), [[U, r.value]]),
-			e.error && e.errorMessage ? (D(), s("p", Sp, P(e.errorMessage), 1)) : o("", !0)
+			}), null, 16, Sp), [[U, r.value]]),
+			e.error && e.errorMessage ? (D(), s("p", Cp, P(e.errorMessage), 1)) : o("", !0)
 		], 6));
 	}
-}), wp = [
+}), Tp = [
 	"data-event-source",
 	"data-event-date",
 	"date-event-type"
-], Tp = { class: "heading-3" }, Ep = ["href"], Dp = { class: "truncate group-hover:underline" }, Op = {
+], Ep = { class: "heading-3" }, Dp = ["href"], Op = { class: "truncate group-hover:underline" }, kp = {
 	key: 1,
 	class: "mt-1 text-sm text-gray-500"
-}, kp = {
+}, Ap = {
 	key: 2,
 	class: "mt-1 text-sm text-gray-500"
-}, Ap = /* @__PURE__ */ p({
+}, jp = /* @__PURE__ */ p({
 	name: "NexxtTimelineEvent",
 	__name: "TimelineEvent",
 	props: {
@@ -10187,20 +10207,20 @@ var bf = { render: yf }, xf = { class: "flex items-center justify-end self-stret
 			name: n.value.icon,
 			class: "flex size-6 text-xl text-white"
 		}, null, 8, ["name"])], 2), c("div", { class: x(["flex w-full flex-col gap-2 rounded-xl border border-gray-200 p-8", { "max-w-lg": e.splitView }]) }, [
-			c("span", Tp, P(n.value.label), 1),
+			c("span", Ep, P(n.value.label), 1),
 			e.event.url ? (D(), s("a", {
 				key: 0,
 				href: e.event.url,
 				target: "_blank",
 				class: "group mt-1 flex justify-between gap-2 text-sm text-cornflower-blue-500 hover:text-cornflower-blue-600"
-			}, [c("span", Dp, P(e.event.description || e.event.url), 1), f(Q, {
+			}, [c("span", Op, P(e.event.description || e.event.url), 1), f(Q, {
 				name: "external-link",
 				class: "ml-1 size-4 text-gray-950"
-			})], 8, Ep)) : e.event.description ? (D(), s("span", Op, P(e.event.description), 1)) : o("", !0),
-			e.event.request_reason ? (D(), s("span", kp, " Reden: " + P(e.event.request_reason), 1)) : o("", !0)
-		], 2)], 2)], 10, wp));
+			})], 8, Dp)) : e.event.description ? (D(), s("span", kp, P(e.event.description), 1)) : o("", !0),
+			e.event.request_reason ? (D(), s("span", Ap, " Reden: " + P(e.event.request_reason), 1)) : o("", !0)
+		], 2)], 2)], 10, Tp));
 	}
-}), jp = { class: "relative z-10" }, Mp = { class: "flex items-center justify-between px-4 py-2" }, Np = { class: "flex gap-1" }, Pp = { class: "text-sm" }, Fp = { class: "flex gap-1" }, Ip = { class: "text-sm" }, Lp = /* @__PURE__ */ p({
+}), Mp = { class: "relative z-10" }, Np = { class: "flex items-center justify-between px-4 py-2" }, Pp = { class: "flex gap-1" }, Fp = { class: "text-sm" }, Ip = { class: "flex gap-1" }, Lp = { class: "text-sm" }, Rp = /* @__PURE__ */ p({
 	name: "NexxtTimelineLanes",
 	__name: "TimelineLanes",
 	props: {
@@ -10210,15 +10230,15 @@ var bf = { render: yf }, xf = { class: "flex items-center justify-end self-stret
 		rightTooltip: { default: "Vanuit relatie" }
 	},
 	setup(e) {
-		return (t, n) => (D(), s("div", jp, [c("div", Mp, [c("span", Np, [d(P(e.leftLabel) + " ", 1), e.leftTooltip ? (D(), a(Pt, { key: 0 }, {
-			tooltip: K(() => [c("span", Pp, P(e.leftTooltip), 1)]),
+		return (t, n) => (D(), s("div", Mp, [c("div", Np, [c("span", Pp, [d(P(e.leftLabel) + " ", 1), e.leftTooltip ? (D(), a(Pt, { key: 0 }, {
+			tooltip: K(() => [c("span", Fp, P(e.leftTooltip), 1)]),
 			default: K(() => [f(Q, {
 				name: "circle-info",
 				class: "size-4 text-xs text-gray-600"
 			})]),
 			_: 1
-		})) : o("", !0)]), c("span", Fp, [d(P(e.rightLabel) + " ", 1), e.rightTooltip ? (D(), a(Pt, { key: 0 }, {
-			tooltip: K(() => [c("span", Ip, P(e.rightTooltip), 1)]),
+		})) : o("", !0)]), c("span", Ip, [d(P(e.rightLabel) + " ", 1), e.rightTooltip ? (D(), a(Pt, { key: 0 }, {
+			tooltip: K(() => [c("span", Lp, P(e.rightTooltip), 1)]),
 			default: K(() => [f(Q, {
 				name: "circle-info",
 				class: "size-4 text-xs text-gray-600"
@@ -10226,10 +10246,10 @@ var bf = { render: yf }, xf = { class: "flex items-center justify-end self-stret
 			_: 1
 		})) : o("", !0)])])]));
 	}
-}), Rp = ["data-phase"], zp = { class: "text-sm font-semibold tracking-wider uppercase" }, Bp = { class: "mt-2 font-medium text-xs text-gray-500" }, Vp = {
+}), zp = ["data-phase"], Bp = { class: "text-sm font-semibold tracking-wider uppercase" }, Vp = { class: "mt-2 font-medium text-xs text-gray-500" }, Hp = {
 	key: 1,
 	class: "h-1"
-}, Hp = /* @__PURE__ */ p({
+}, Up = /* @__PURE__ */ p({
 	name: "NexxtTimelinePhaseblock",
 	__name: "TimelinePhaseblock",
 	props: {
@@ -10265,13 +10285,13 @@ var bf = { render: yf }, xf = { class: "flex items-center justify-end self-stret
 			class: "relative z-10 flex flex-col gap-16",
 			"data-phase": t.phase.phase.value
 		}, [
-			t.index === 0 && t.isSplitView ? (D(), a(Lp, { key: 0 })) : o("", !0),
+			t.index === 0 && t.isSplitView ? (D(), a(Rp, { key: 0 })) : o("", !0),
 			c("div", { class: x(["absolute bottom-0 left-5 w-0 border-l", [I(Ct)[t.phase.phase.value].color, t.index === 0 && t.isSplitView ? "top-10" : "top-0"]]) }, null, 2),
 			t.isSplitView ? (D(), s("div", {
 				key: 1,
 				class: x(["absolute right-5 bottom-0 w-0 border-l", [I(Ct)[t.phase.phase.value].color, t.index === 0 ? "top-10" : "top-0"]])
 			}, null, 2)) : o("", !0),
-			(D(!0), s(e, null, j(t.phase.events, (e) => (D(), a(Ap, {
+			(D(!0), s(e, null, j(t.phase.events, (e) => (D(), a(jp, {
 				key: e.id,
 				event: e,
 				"split-view": t.isSplitView
@@ -10280,26 +10300,26 @@ var bf = { render: yf }, xf = { class: "flex items-center justify-end self-stret
 				key: 2,
 				class: x(["relative flex flex-col items-center pt-8 pb-24 text-center", { "pl-16": !t.isSplitView }])
 			}, [
-				c("div", { class: x(["flex items-center gap-2 rounded-full px-12 py-4", [I(Ct)[t.phase.phase.value].bgColor, I(Ct)[t.phase.phase.value].textColor]]) }, [c("span", zp, P(I(Ct)[t.phase.phase.value].label), 1), d() ? (D(), a(Q, {
+				c("div", { class: x(["flex items-center gap-2 rounded-full px-12 py-4", [I(Ct)[t.phase.phase.value].bgColor, I(Ct)[t.phase.phase.value].textColor]]) }, [c("span", Bp, P(I(Ct)[t.phase.phase.value].label), 1), d() ? (D(), a(Q, {
 					key: 0,
 					name: d() === "up" ? "arrow-up" : "arrow-down",
 					class: "size-4 text-white"
 				}, null, 8, ["name"])) : o("", !0)], 2),
-				c("span", Bp, P(u()), 1),
+				c("span", Vp, P(u()), 1),
 				t.isSplitView ? (D(), s("div", {
 					key: 0,
 					class: x(["mt-4 h-px w-[75%]", I(Ct)[t.phase.phase.value].bgColor])
 				}, null, 2)) : o("", !0),
-				t.isLast ? o("", !0) : (D(), s("div", Vp)),
+				t.isLast ? o("", !0) : (D(), s("div", Hp)),
 				c("div", { class: x(["absolute inset-y-0 left-5 w-px bg-linear-to-b", r.value]) }, null, 2),
 				t.isSplitView ? (D(), s("div", {
 					key: 2,
 					class: x(["absolute inset-y-0 right-5 w-px bg-linear-to-b", r.value])
 				}, null, 2)) : o("", !0)
 			], 2))
-		], 8, Rp));
+		], 8, zp));
 	}
-}), Up = { class: "relative z-10 flex flex-col gap-16" }, Wp = /* @__PURE__ */ p({
+}), Wp = { class: "relative z-10 flex flex-col gap-16" }, Gp = /* @__PURE__ */ p({
 	name: "NexxtTimelineTrack",
 	__name: "TimelineTrack",
 	props: {
@@ -10320,8 +10340,8 @@ var bf = { render: yf }, xf = { class: "flex items-center justify-end self-stret
 	},
 	setup(t) {
 		let n = t, r = i(() => n.splitView && n.showLanes);
-		return (n, i) => (D(), s("div", Up, [
-			r.value ? (D(), a(Lp, {
+		return (n, i) => (D(), s("div", Wp, [
+			r.value ? (D(), a(Rp, {
 				key: 0,
 				"left-label": t.leftLabel,
 				"right-label": t.rightLabel,
@@ -10338,24 +10358,24 @@ var bf = { render: yf }, xf = { class: "flex items-center justify-end self-stret
 				key: 1,
 				class: x(["absolute right-5 bottom-0 w-0 border-l", [t.color, r.value ? "top-10" : "top-0"]])
 			}, null, 2)) : o("", !0),
-			M(n.$slots, "default", {}, () => [(D(!0), s(e, null, j(t.events, (e) => (D(), a(Ap, {
+			M(n.$slots, "default", {}, () => [(D(!0), s(e, null, j(t.events, (e) => (D(), a(jp, {
 				key: e.id,
 				event: e,
 				"split-view": t.splitView
 			}, null, 8, ["event", "split-view"]))), 128))])
 		]));
 	}
-}), Gp = ["role", "aria-live"], Kp = { class: "flex min-w-0 flex-1 flex-col gap-0.5 pt-0.5" }, qp = {
+}), Kp = ["role", "aria-live"], qp = { class: "flex min-w-0 flex-1 flex-col gap-0.5 pt-0.5" }, Jp = {
 	key: 1,
 	class: "body-normal"
-}, Jp = ["aria-label"], Yp = {
+}, Yp = ["aria-label"], Xp = {
 	key: 0,
 	class: "absolute inset-0 -rotate-90 text-gray-400",
 	viewBox: "0 0 24 24",
 	width: "32",
 	height: "32",
 	"aria-hidden": "true"
-}, Xp = 56.55, Zp = /*#__PURE__*/ ii(/* @__PURE__ */ p({
+}, Zp = 56.55, Qp = /*#__PURE__*/ ii(/* @__PURE__ */ p({
 	name: "NexxtToast",
 	__name: "Toast",
 	props: {
@@ -10370,7 +10390,7 @@ var bf = { render: yf }, xf = { class: "flex items-center justify-end self-stret
 	},
 	emits: ["dismiss"],
 	setup(e, { emit: t }) {
-		R((e) => ({ fa0d20de: Xp }));
+		R((e) => ({ fa0d20de: Zp }));
 		let n = {
 			info: {
 				icon: "info",
@@ -10423,12 +10443,12 @@ var bf = { render: yf }, xf = { class: "flex items-center justify-end self-stret
 				name: u.value.icon,
 				class: "text-xl"
 			}, null, 8, ["name"])], 2),
-			c("div", Kp, [
+			c("div", qp, [
 				e.title ? (D(), s("p", {
 					key: 0,
 					class: x(["heading-4", u.value.titleColor])
 				}, P(e.title), 3)) : o("", !0),
-				e.message ? (D(), s("p", qp, P(e.message), 1)) : o("", !0),
+				e.message ? (D(), s("p", Jp, P(e.message), 1)) : o("", !0),
 				M(t.$slots, "default", {}, void 0, !0)
 			]),
 			e.dismissible ? (D(), s("button", {
@@ -10437,7 +10457,7 @@ var bf = { render: yf }, xf = { class: "flex items-center justify-end self-stret
 				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) => a("dismiss")
-			}, [e.autoClose ? (D(), s("svg", Yp, [c("circle", {
+			}, [e.autoClose ? (D(), s("svg", Xp, [c("circle", {
 				cx: "12",
 				cy: "12",
 				r: "9",
@@ -10445,7 +10465,7 @@ var bf = { render: yf }, xf = { class: "flex items-center justify-end self-stret
 				stroke: "currentColor",
 				"stroke-width": "1.2",
 				"stroke-linecap": "round",
-				"stroke-dasharray": Xp,
+				"stroke-dasharray": Zp,
 				class: "timer-circle",
 				style: C({
 					animationDuration: `${e.autoClose}ms`,
@@ -10454,10 +10474,10 @@ var bf = { render: yf }, xf = { class: "flex items-center justify-end self-stret
 			}, null, 4)])) : o("", !0), f(Q, {
 				name: "xmark",
 				class: "text-sm"
-			})], 8, Jp)) : o("", !0)
-		], 42, Gp));
+			})], 8, Yp)) : o("", !0)
+		], 42, Kp));
 	}
-}), [["__scopeId", "data-v-7e3c5bda"]]), Qp = /* @__PURE__ */ p({
+}), [["__scopeId", "data-v-7e3c5bda"]]), $p = /* @__PURE__ */ p({
 	name: "NexxtToaster",
 	__name: "Toaster",
 	props: {
@@ -10490,7 +10510,7 @@ var bf = { render: yf }, xf = { class: "flex items-center justify-end self-stret
 			default: K(() => [(D(!0), s(e, null, j(n.toasts, (e) => (D(), s("div", {
 				key: e.id,
 				class: "pointer-events-auto"
-			}, [f(Zp, y({ ref_for: !0 }, e, { onDismiss: (t) => o("dismiss", e.id) }), null, 16, ["onDismiss"])]))), 128))]),
+			}, [f(Qp, y({ ref_for: !0 }, e, { onDismiss: (t) => o("dismiss", e.id) }), null, 16, ["onDismiss"])]))), 128))]),
 			_: 1
 		}, 8, [
 			"class",
@@ -10498,7 +10518,7 @@ var bf = { render: yf }, xf = { class: "flex items-center justify-end self-stret
 			"leave-to-class"
 		])], 2)]));
 	}
-}), $p = (e, t) => e.id === t || !!e.children?.some((e) => $p(e, t)), em = ({ slots: e, ghost: t }, n) => {
+}), em = (e, t) => e.id === t || !!e.children?.some((e) => em(e, t)), tm = ({ slots: e, ghost: t }, n) => {
 	if (t && n >= t.top && n < t.bottom) return { kind: "keep" };
 	let r = t && n >= t.bottom ? n - (t.bottom - t.top) : n, i = e.at(-1);
 	if (i && r >= i.bottom) return {
@@ -10514,8 +10534,8 @@ var bf = { render: yf }, xf = { class: "flex items-center justify-end self-stret
 		id: a.id,
 		ratio: Math.min(1, Math.max(0, o))
 	};
-}, tm = (e, t, n) => {
-	if ($p(n, e.node.id)) return null;
+}, nm = (e, t, n) => {
+	if (em(n, e.node.id)) return null;
 	if (e.canHaveChildren && t > .3 && t < .7) return {
 		rowId: e.node.id,
 		parentId: e.node.id,
@@ -10529,7 +10549,7 @@ var bf = { render: yf }, xf = { class: "flex items-center justify-end self-stret
 		index: e.position - 1 + +!!r,
 		marker: r ? "after" : "before"
 	};
-}, nm = (e, t) => e.parentId === t.parentId && (e.index === t.position - 1 || e.index === t.position), rm = (e, t) => e === t || !!e && !!t && e.parentId === t.parentId && e.index === t.index, im = (e, t, n) => {
+}, rm = (e, t) => e.parentId === t.parentId && (e.index === t.position - 1 || e.index === t.position), im = (e, t) => e === t || !!e && !!t && e.parentId === t.parentId && e.index === t.index, am = (e, t, n) => {
 	if (!n) return null;
 	let r = n.parentId === null ? -1 : e.findIndex((e) => e.node.id === n.parentId), i = e[r];
 	if (n.parentId !== null && !i || i?.expandable && !i.expanded) return null;
@@ -10547,15 +10567,15 @@ var bf = { render: yf }, xf = { class: "flex items-center justify-end self-stret
 		at: s,
 		depth: a
 	};
-}, am = ["aria-label"], om = {
+}, om = ["aria-label"], sm = {
 	key: 0,
 	"aria-hidden": "true",
 	class: "mb-1.5",
 	"data-tree-ghost": ""
-}, sm = {
+}, cm = {
 	"data-tree-ghost-content": "",
 	class: "flex min-w-0 items-center gap-1.5"
-}, cm = { class: "truncate" }, lm = [
+}, lm = { class: "truncate" }, um = [
 	"aria-level",
 	"aria-posinset",
 	"aria-setsize",
@@ -10570,10 +10590,10 @@ var bf = { render: yf }, xf = { class: "flex items-center justify-end self-stret
 	"onFocus",
 	"onPointerdown",
 	"onDragstart"
-], um = ["onClick"], dm = {
+], dm = ["onClick"], fm = {
 	key: 1,
 	class: "size-5 shrink-0"
-}, fm = ["id"], pm = ["inert"], mm = 8, hm = "bg-cornflower-blue-50 outline-1 -outline-offset-1 outline-cornflower-blue-600 outline-dashed", gm = "transform 200ms var(--ease-in-out-strong), opacity 80ms linear 120ms", _m = "opacity 80ms linear 120ms", vm = /* @__PURE__ */ p({
+}, pm = ["id"], mm = ["inert"], hm = 8, gm = "bg-cornflower-blue-50 outline-1 -outline-offset-1 outline-cornflower-blue-600 outline-dashed", _m = "transform 200ms var(--ease-in-out-strong), opacity 80ms linear 120ms", vm = "opacity 80ms linear 120ms", ym = /* @__PURE__ */ p({
 	name: "NexxtTree",
 	__name: "Tree",
 	props: /*@__PURE__*/ v({
@@ -10608,7 +10628,7 @@ var bf = { render: yf }, xf = { class: "flex items-center justify-end self-stret
 			};
 			return t(u.nodes, 0, null), e;
 		}), y = A(null), S = A(null), E = A(null), O = A(null), k = !1, M = i(() => v.value.find((e) => e.node.id === y.value)), N = (e) => {
-			rm(E.value, e) || (E.value = e);
+			im(E.value, e) || (E.value = e);
 		}, ee = (e) => e.classList.contains("absolute"), F = () => {
 			let e = g.value?.querySelector("[data-tree-id]")?.parentElement, t = Array.from(e?.children ?? []).filter((e) => e instanceof HTMLElement && !ee(e)), n = [], r = null;
 			return t.forEach((e, i) => {
@@ -10640,16 +10660,16 @@ var bf = { render: yf }, xf = { class: "flex items-center justify-end self-stret
 				N(null);
 				return;
 			}
-			let r = em(F(), t - g.value.getBoundingClientRect().top);
+			let r = tm(F(), t - g.value.getBoundingClientRect().top);
 			if (r.kind === "keep") return;
-			let i = v.value.find((e) => e.node.id === r.id), a = i ? tm(i, r.ratio, n.node) : null;
-			N(a && !nm(a, n) && R(n, a) ? a : null);
+			let i = v.value.find((e) => e.node.id === r.id), a = i ? nm(i, r.ratio, n.node) : null;
+			N(a && !rm(a, n) && R(n, a) ? a : null);
 		}, R = (e, t) => u.canDrop?.({
 			id: e.node.id,
 			parentId: t.parentId,
 			index: t.index
 		}) ?? !0, V = i(() => {
-			let e = M.value, t = e ? im(v.value, u.nodes, E.value) : null;
+			let e = M.value, t = e ? am(v.value, u.nodes, E.value) : null;
 			return e && t ? {
 				...t,
 				node: e.node
@@ -10688,7 +10708,7 @@ var bf = { render: yf }, xf = { class: "flex items-center justify-end self-stret
 				n ? "text-cornflower-blue-600" : "text-gray-800",
 				!n && !S.value && "hover:bg-gray-100",
 				re.value.has(t) && "opacity-40",
-				H.value === t && hm
+				H.value === t && gm
 			];
 		}, ie = null, Y = (e) => {
 			g.value?.contains(e.target) || N(null);
@@ -10817,12 +10837,12 @@ var bf = { render: yf }, xf = { class: "flex items-center justify-end self-stret
 			if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
 			let n = Ne(t);
 			if (n) {
-				n.style.transition = "none", n.style.opacity = "0", n.getBoundingClientRect(), n.style.transition = _m, n.style.opacity = "";
+				n.style.transition = "none", n.style.opacity = "0", n.getBoundingClientRect(), n.style.transition = vm, n.style.opacity = "";
 				return;
 			}
 			Me.add(t.dataset.treeId);
 			let r = Oe(v.value.find((e) => e.node.id === t.dataset.treeId)?.parentId), i = r ? t.offsetTop - (r.offsetTop + r.offsetHeight) : 0;
-			t.style.transition = "none", t.style.transform = `translateY(${-i}px)`, t.style.opacity = "0", t.style.pointerEvents = "none", t.getBoundingClientRect(), t.style.transition = gm, t.style.transform = "", t.style.opacity = "";
+			t.style.transition = "none", t.style.transform = `translateY(${-i}px)`, t.style.opacity = "0", t.style.pointerEvents = "none", t.getBoundingClientRect(), t.style.transition = _m, t.style.transform = "", t.style.opacity = "";
 		}, Fe = null, Ie = (e) => {
 			let t = e, n = Ne(t);
 			if (n) {
@@ -10922,17 +10942,17 @@ var bf = { render: yf }, xf = { class: "flex items-center justify-end self-stret
 			onAfterEnter: Ie,
 			onEnterCancelled: Ie
 		}, {
-			default: K(() => [(D(!0), s(e, null, j(G.value, (t) => (D(), s(e, { key: t.key }, [t.ghost ? (D(), s("div", om, [c("div", {
+			default: K(() => [(D(!0), s(e, null, j(G.value, (t) => (D(), s(e, { key: t.key }, [t.ghost ? (D(), s("div", sm, [c("div", {
 				class: "flex rounded-md bg-cornflower-blue-50 py-1 pr-2 pl-1 small-normal text-gray-700 outline-1 -outline-offset-1 outline-cornflower-blue-600 transition-[margin-left] duration-200 ease-in-out-strong outline-dashed motion-reduce:transition-none",
-				style: C({ marginLeft: `${t.depth * mm}px` })
-			}, [c("span", sm, [
+				style: C({ marginLeft: `${t.depth * hm}px` })
+			}, [c("span", cm, [
 				i[3] ||= c("span", { class: "size-5 shrink-0" }, null, -1),
 				t.node.icon ? (D(), a(Q, {
 					key: 0,
 					name: t.node.icon,
 					class: "shrink-0"
 				}, null, 8, ["name"])) : o("", !0),
-				c("span", cm, P(t.node.label), 1)
+				c("span", lm, P(t.node.label), 1)
 			])], 4)])) : (D(), s("div", {
 				key: 1,
 				role: "treeitem",
@@ -10947,7 +10967,7 @@ var bf = { render: yf }, xf = { class: "flex items-center justify-end self-stret
 				"data-tree-drop": H.value === t.row.node.id ? "inside" : void 0,
 				draggable: t.row.draggable,
 				class: x(["group mb-1.5 flex items-center gap-1.5 overflow-x-clip rounded-md py-1 pr-2 small-normal transition-[color,background-color,outline-color,opacity] duration-150 select-none focus-visible:outline-2 focus-visible:outline-cornflower-blue-500 motion-reduce:transition-none", q(t.row)]),
-				style: C({ paddingLeft: `${t.row.depth * mm + 4}px` }),
+				style: C({ paddingLeft: `${t.row.depth * hm + 4}px` }),
 				onClick: (e) => Se(t.row.node.id),
 				onFocus: (e) => _.value = t.row.node.id,
 				onPointerdown: (e) => fe(e, t.row),
@@ -10965,7 +10985,7 @@ var bf = { render: yf }, xf = { class: "flex items-center justify-end self-stret
 				}, [f(Q, {
 					name: "chevron-down",
 					class: x(["extra-small-normal transition-transform duration-150 ease-out motion-reduce:transition-none", !t.row.expanded && "-rotate-90"])
-				}, null, 8, ["class"])], 42, um)) : (D(), s("span", dm)),
+				}, null, 8, ["class"])], 42, dm)) : (D(), s("span", fm)),
 				t.row.node.icon ? (D(), a(Q, {
 					key: 2,
 					name: t.row.node.icon,
@@ -10975,7 +10995,7 @@ var bf = { render: yf }, xf = { class: "flex items-center justify-end self-stret
 					id: Be(t.row.node.id),
 					"data-tree-label": "",
 					class: "min-w-0 flex-1 truncate"
-				}, P(t.row.node.label), 9, fm),
+				}, P(t.row.node.label), 9, pm),
 				d["node-actions"] ? (D(), s("div", {
 					key: 3,
 					"data-tree-actions": "",
@@ -10989,31 +11009,31 @@ var bf = { render: yf }, xf = { class: "flex items-center justify-end self-stret
 				}, [f(Ve, {
 					node: t.row.node,
 					tabindex: Re(t.row.node.id)
-				}, null, 8, ["node", "tabindex"])], 2)], 42, pm)) : o("", !0)
-			], 46, lm))], 64))), 128))]),
+				}, null, 8, ["node", "tabindex"])], 2)], 42, mm)) : o("", !0)
+			], 46, um))], 64))), 128))]),
 			_: 1
-		})], 40, am));
+		})], 40, om));
 	}
-}), ym = [
+}), bm = [
 	"src",
 	"loop",
 	"aria-label"
-], bm = {
+], xm = {
 	key: 0,
 	role: "alert",
 	class: "absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-lg bg-gray-900 text-white"
-}, xm = { class: "heading-4" }, Sm = { class: "max-w-xs truncate extra-small-normal text-white/50" }, Cm = {
+}, Sm = { class: "heading-4" }, Cm = { class: "max-w-xs truncate extra-small-normal text-white/50" }, wm = {
 	key: 0,
 	class: "pointer-events-none absolute inset-0 flex items-center justify-center"
-}, wm = {
+}, Tm = {
 	class: "flex size-16 items-center justify-center rounded-full bg-black/50 text-white",
 	"aria-hidden": "true"
-}, Tm = [
+}, Em = [
 	"aria-label",
 	"aria-valuemax",
 	"aria-valuenow",
 	"aria-valuetext"
-], Em = { class: "flex items-center gap-2" }, Dm = ["aria-label"], Om = { class: "extra-small-normal text-white/70 tabular-nums" }, km = ["aria-label"], Am = ["aria-label"], jm = /* @__PURE__ */ p({
+], Dm = { class: "flex items-center gap-2" }, Om = ["aria-label"], km = { class: "extra-small-normal text-white/70 tabular-nums" }, Am = ["aria-label"], jm = ["aria-label"], Mm = /* @__PURE__ */ p({
 	__name: "VideoPlayer",
 	props: {
 		src: {},
@@ -11094,15 +11114,15 @@ var bf = { render: yf }, xf = { class: "flex items-center justify-end self-stret
 				"aria-label": a.value.video,
 				onError: r[0] ||= (e) => S.value = !0,
 				onClick: r[1] ||= (t) => e.showControls === !1 ? void 0 : N()
-			}, null, 42, ym),
-			S.value ? (D(), s("div", bm, [
+			}, null, 42, bm),
+			S.value ? (D(), s("div", xm, [
 				f(Q, {
 					name: "circle-exclamation",
 					class: "text-3xl text-red-400",
 					"aria-hidden": "true"
 				}),
-				c("p", xm, P(a.value.error), 1),
-				c("p", Sm, P(e.src), 1)
+				c("p", Sm, P(a.value.error), 1),
+				c("p", Cm, P(e.src), 1)
 			])) : o("", !0),
 			f(n, {
 				"enter-active-class": "transition-opacity duration-100 ease-out",
@@ -11110,7 +11130,7 @@ var bf = { render: yf }, xf = { class: "flex items-center justify-end self-stret
 				"enter-from-class": "opacity-0",
 				"leave-to-class": "opacity-0"
 			}, {
-				default: K(() => [e.showControls !== !1 && w.value && !S.value ? (D(), s("div", Cm, [c("div", wm, [f(Q, {
+				default: K(() => [e.showControls !== !1 && w.value && !S.value ? (D(), s("div", wm, [c("div", Tm, [f(Q, {
 					name: w.value,
 					class: "text-2xl"
 				}, null, 8, ["name"])])])) : o("", !0)]),
@@ -11153,7 +11173,7 @@ var bf = { render: yf }, xf = { class: "flex items-center justify-end self-stret
 					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: C({ left: `${te.value}%` })
 				}, null, 4)
-			], 40, Tm), c("div", Em, [
+			], 40, Em), c("div", Dm, [
 				c("button", {
 					type: "button",
 					"aria-label": I(u) ? a.value.pause : a.value.play,
@@ -11163,8 +11183,8 @@ var bf = { render: yf }, xf = { class: "flex items-center justify-end self-stret
 					name: I(u) ? "pause" : "play",
 					class: "text-sm",
 					"aria-hidden": "true"
-				}, null, 8, ["name"])], 8, Dm),
-				c("span", Om, P(M(z.value)) + " / " + P(M(I(m))), 1),
+				}, null, 8, ["name"])], 8, Om),
+				c("span", km, P(M(z.value)) + " / " + P(M(I(m))), 1),
 				r[7] ||= c("div", { class: "flex-1" }, null, -1),
 				c("button", {
 					type: "button",
@@ -11175,7 +11195,7 @@ var bf = { render: yf }, xf = { class: "flex items-center justify-end self-stret
 					name: I(h) ? "volume-xmark" : "volume-high",
 					class: "text-sm",
 					"aria-hidden": "true"
-				}, null, 8, ["name"])], 8, km),
+				}, null, 8, ["name"])], 8, Am),
 				c("button", {
 					type: "button",
 					"aria-label": I(_) ? a.value.exitFullscreen : a.value.enterFullscreen,
@@ -11185,10 +11205,10 @@ var bf = { render: yf }, xf = { class: "flex items-center justify-end self-stret
 					name: I(_) ? "compress" : "expand",
 					class: "text-sm",
 					"aria-hidden": "true"
-				}, null, 8, ["name"])], 8, Am)
+				}, null, 8, ["name"])], 8, jm)
 			])], 4)) : o("", !0)
 		], 32));
 	}
 });
 //#endregion
-export { Ut as EDITOR_ALIGN_ITEMS_OPTIONS, Kt as EDITOR_BACKGROUND_SIZE_OPTIONS, Pn as EDITOR_BORDER_STEPS, ea as EDITOR_DASH_PATTERN_LIMITS, ji as EDITOR_DIMENSION_LIMITS, Yt as EDITOR_FLEX_DIRECTION_OPTIONS, vr as EDITOR_FONT_SIZE_STEPS, an as EDITOR_GAP_STEPS, qn as EDITOR_HEADING_TYPE_OPTIONS, sr as EDITOR_JUSTIFY_CONTENT_OPTIONS, Nr as EDITOR_LETTER_SPACING_STEPS, Tr as EDITOR_LINE_HEIGHT_STEPS, Ji as EDITOR_LINE_MIN_THICKNESS, Ki as EDITOR_LINE_STYLE_OPTIONS, qi as EDITOR_LINE_THICKNESS_STEPS, fr as EDITOR_MAX_WIDTH_STEPS, di as EDITOR_PADDING_STEPS, Qn as EDITOR_RADIUS_STEPS, tr as EDITOR_SHADOW_OPTIONS, Ri as EDITOR_SIZE_OPTIONS, ir as EDITOR_TEXT_ALIGN_OPTIONS, Er as EDITOR_TEXT_LINE_HEIGHT_RATIOS, St as EVENT_CONFIG_MAP, ia as NexxtAnimatedNumber, oa as NexxtAnnouncement, da as NexxtAvatar, pa as NexxtButton, Ga as NexxtCalendar, Ja as NexxtCard, Xa as NexxtCheckbox, Za as NexxtChip, An as NexxtColorPicker, wo as NexxtCombobox, Co as NexxtComboboxPanel, Ao as NexxtContactInfoCard, Uo as NexxtCountrySelect, qo as NexxtCustomerJourneyTile, Jo as NexxtDatePicker, ns as NexxtDoughnutChart, ss as NexxtDropdownButton, Gt as NexxtEditorAlignItems, Jt as NexxtEditorBackgroundSize, Ln as NexxtEditorBorder, vs as NexxtEditorColor, ra as NexxtEditorDashPattern, Fi as NexxtEditorDimensionField, Zt as NexxtEditorFlexDirection, Sr as NexxtEditorFontSize, sn as NexxtEditorGap, Yn as NexxtEditorHeadingType, lr as NexxtEditorJustifyContent, Rr as NexxtEditorLetterSpacing, Ar as NexxtEditorLineHeight, Zi as NexxtEditorLineStyle, mr as NexxtEditorMaxWidth, wi as NexxtEditorPadding, er as NexxtEditorRadius, $ as NexxtEditorSettingsBlock, ws as NexxtEditorSettingsGroup, rr as NexxtEditorShadow, Bi as NexxtEditorSize, Ds as NexxtEditorSizeLimit, or as NexxtEditorTextAlign, As as NexxtEnergyLabel, pn as NexxtFloatingPanel, Fc as NexxtFontPicker, zc as NexxtHeader, Q as NexxtIcon, zl as NexxtIconPicker, Vl as NexxtInfoBlock, io as NexxtInputField, Yl as NexxtInputSelect, Zl as NexxtLoader, tu as NexxtModal, ru as NexxtModalFooter, Nu as NexxtPageCard, Ru as NexxtPageContainer, Ou as NexxtPageMockup, Bu as NexxtPageTypeTile, Vu as NexxtPagination, zs as NexxtPickerGroup, Zs as NexxtPickerItem, sc as NexxtPickerList, pc as NexxtPickerPanel, qs as NexxtPickerPreview, Ku as NexxtPlaceholderInput, Xu as NexxtPresenceIndicator, cd as NexxtProgressBar, yd as NexxtPropertyCard, md as NexxtPropertyListing, Fd as NexxtReferenceCard, Kn as NexxtSelect, Rd as NexxtSelectableOption, Wd as NexxtSidebarMenuItem, Ms as NexxtSkeleton, Jd as NexxtSkeletonPropertyCard, tn as NexxtSlider, Zd as NexxtSocialIcons, tf as NexxtSocialMediaCustomTemplate, df as NexxtSocialMediaTemplate, Tf as NexxtSocialMediaType, Rf as NexxtSource, ca as NexxtSquircle, zf as NexxtStepperHeader, kt as NexxtSwitch, Kf as NexxtTabbedContent, ap as NexxtTable, Hf as NexxtTabs, yp as NexxtTemplateCard, Cp as NexxtTextarea, Ap as NexxtTimelineEvent, Lp as NexxtTimelineLanes, Hp as NexxtTimelinePhaseblock, Wp as NexxtTimelineTrack, Zp as NexxtToast, Qp as NexxtToaster, Ht as NexxtToggleGroup, Pt as NexxtTooltip, vm as NexxtTree, jm as NexxtVideoPlayer, Ct as PHASE_MAP, Ff as SOURCE_MAP, zr as iconLabelFromName, Hr as iconSearchIndex, Gr as iconStyleFor, Wr as searchIcons, Vr as sortIconsByLabel };
+export { Ut as EDITOR_ALIGN_ITEMS_OPTIONS, Kt as EDITOR_BACKGROUND_SIZE_OPTIONS, Pn as EDITOR_BORDER_STEPS, ea as EDITOR_DASH_PATTERN_LIMITS, ji as EDITOR_DIMENSION_LIMITS, Yt as EDITOR_FLEX_DIRECTION_OPTIONS, vr as EDITOR_FONT_SIZE_STEPS, an as EDITOR_GAP_STEPS, qn as EDITOR_HEADING_TYPE_OPTIONS, sr as EDITOR_JUSTIFY_CONTENT_OPTIONS, Nr as EDITOR_LETTER_SPACING_STEPS, Tr as EDITOR_LINE_HEIGHT_STEPS, Ji as EDITOR_LINE_MIN_THICKNESS, Ki as EDITOR_LINE_STYLE_OPTIONS, qi as EDITOR_LINE_THICKNESS_STEPS, fr as EDITOR_MAX_WIDTH_STEPS, di as EDITOR_PADDING_STEPS, Qn as EDITOR_RADIUS_STEPS, tr as EDITOR_SHADOW_OPTIONS, Ri as EDITOR_SIZE_OPTIONS, ir as EDITOR_TEXT_ALIGN_OPTIONS, Er as EDITOR_TEXT_LINE_HEIGHT_RATIOS, St as EVENT_CONFIG_MAP, ia as NexxtAnimatedNumber, oa as NexxtAnnouncement, da as NexxtAvatar, pa as NexxtButton, Ga as NexxtCalendar, Ja as NexxtCard, Xa as NexxtCheckbox, Za as NexxtChip, An as NexxtColorPicker, wo as NexxtCombobox, Co as NexxtComboboxPanel, Ao as NexxtContactInfoCard, Uo as NexxtCountrySelect, qo as NexxtCustomerJourneyTile, Jo as NexxtDatePicker, ns as NexxtDoughnutChart, ss as NexxtDropdownButton, Gt as NexxtEditorAlignItems, Jt as NexxtEditorBackgroundSize, Ln as NexxtEditorBorder, vs as NexxtEditorColor, ra as NexxtEditorDashPattern, Fi as NexxtEditorDimensionField, Zt as NexxtEditorFlexDirection, Sr as NexxtEditorFontSize, sn as NexxtEditorGap, Yn as NexxtEditorHeadingType, lr as NexxtEditorJustifyContent, Rr as NexxtEditorLetterSpacing, Ar as NexxtEditorLineHeight, Zi as NexxtEditorLineStyle, mr as NexxtEditorMaxWidth, wi as NexxtEditorPadding, er as NexxtEditorRadius, $ as NexxtEditorSettingsBlock, ws as NexxtEditorSettingsGroup, rr as NexxtEditorShadow, Bi as NexxtEditorSize, Ds as NexxtEditorSizeLimit, or as NexxtEditorTextAlign, As as NexxtEnergyLabel, pn as NexxtFloatingPanel, Fc as NexxtFontPicker, zc as NexxtHeader, Q as NexxtIcon, zl as NexxtIconPicker, Vl as NexxtInfoBlock, io as NexxtInputField, Yl as NexxtInputSelect, Zl as NexxtLoader, tu as NexxtModal, ru as NexxtModalFooter, Nu as NexxtPageCard, Ru as NexxtPageContainer, Ou as NexxtPageMockup, Bu as NexxtPageTypeTile, Vu as NexxtPagination, zs as NexxtPickerGroup, Zs as NexxtPickerItem, sc as NexxtPickerList, pc as NexxtPickerPanel, qs as NexxtPickerPreview, Ku as NexxtPlaceholderInput, Xu as NexxtPresenceIndicator, cd as NexxtProgressBar, yd as NexxtPropertyCard, md as NexxtPropertyListing, Fd as NexxtReferenceCard, Kn as NexxtSelect, Rd as NexxtSelectableOption, Wd as NexxtSidebarMenuItem, Ms as NexxtSkeleton, Jd as NexxtSkeletonPropertyCard, tn as NexxtSlider, Zd as NexxtSocialIcons, tf as NexxtSocialMediaCustomTemplate, df as NexxtSocialMediaTemplate, Tf as NexxtSocialMediaType, Rf as NexxtSource, ca as NexxtSquircle, zf as NexxtStepperHeader, kt as NexxtSwitch, qf as NexxtTabbedContent, op as NexxtTable, Uf as NexxtTabs, bp as NexxtTemplateCard, wp as NexxtTextarea, jp as NexxtTimelineEvent, Rp as NexxtTimelineLanes, Up as NexxtTimelinePhaseblock, Gp as NexxtTimelineTrack, Qp as NexxtToast, $p as NexxtToaster, Ht as NexxtToggleGroup, Pt as NexxtTooltip, ym as NexxtTree, Mm as NexxtVideoPlayer, Ct as PHASE_MAP, Ff as SOURCE_MAP, zr as iconLabelFromName, Hr as iconSearchIndex, Gr as iconStyleFor, Wr as searchIcons, Vr as sortIconsByLabel };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "1.48.0",
+  "version": "1.49.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/src/components/molecules/Tabs/Tabs.vue

@@ -1,15 +1,27 @@
 <script lang="ts" setup>
-import { computed, ref, useTemplateRef, watch, onMounted, nextTick } from 'vue'
+import { computed, ref, useTemplateRef, watch, watchEffect, onMounted, nextTick } from 'vue'
 import Icon, { type NexxtIconName } from '../../atoms/Icon/Icon.vue'
 
 export interface NexxtTabItem {
+  /** Visible text, the `v-model` value and the key; in icon-only mode the tab's accessible name. */
   label: string
+  /** Icon shown before the label, or on its own in icon-only mode. */
   icon?: NexxtIconName
+  /** Show only the icon for this tab. Overrides the tabs-wide `iconOnly` either way. */
+  iconOnly?: boolean
 }
 
 interface NexxtTabs {
+  /** The tabs, as plain labels or `{ label, icon, iconOnly }` objects. */
   tabs: (string | NexxtTabItem)[]
+  /** Accessible name of the tablist. */
   tablistLabel?: string
+  /**
+   * Show only the icon of every tab, as a near-square button. The label stays the `v-model`
+   * value and the accessible name, in a visually hidden span. A tab without an `icon` keeps its
+   * visible label.
+   */
+  iconOnly?: boolean
 }
 
 defineOptions({
@@ -31,15 +43,47 @@ const items = computed<NexxtTabItem[]>(() =>
   props.tabs.map((tab) => (typeof tab === 'string' ? { label: tab } : tab)),
 )
 
+const wantsIconOnly = (item: NexxtTabItem) => item.iconOnly ?? props.iconOnly ?? false
+
+interface TabView extends NexxtTabItem {
+  compact: boolean
+  /** The visible label; empty in icon-only mode, where it moves to a visually hidden span. */
+  text: string
+  spacing: string
+}
+
+// icon-only needs an icon to show; without one the tab falls back to its visible label. The
+// labelled tab keeps `text` as the same bare text node it always was, so its markup is unchanged
+const views = computed<TabView[]>(() =>
+  items.value.map((item) => {
+    const compact = Boolean(item.icon) && wantsIconOnly(item)
+    return {
+      ...item,
+      compact,
+      text: compact ? '' : item.label,
+      spacing: compact ? 'px-3' : 'gap-2 px-4',
+    }
+  }),
+)
+
 const updateSlider = async () => {
   await nextTick()
   const index = items.value.findIndex((item) => item.label === selected.value)
   const button = buttonRefs.value[index]
   if (!button || !containerRef.value) return
 
-  const left = button.offsetLeft
-  const width = button.offsetWidth
-  const right = containerRef.value.offsetWidth - left - width
+  // offsetLeft/offsetWidth round to whole pixels while label and icon widths are fractional, which
+  // left the pill up to half a pixel off its tab. The rects are exact but include any ancestor
+  // transform (a modal scaling in), so they are divided back to layout pixels
+  const container = containerRef.value
+  const box = container.getBoundingClientRect()
+  const target = button.getBoundingClientRect()
+  const layoutWidth = parseFloat(getComputedStyle(container).width)
+  const scale = layoutWidth > 0 && box.width > 0 ? box.width / layoutWidth : 1
+
+  const left = (target.left - box.left) / scale
+  const width = target.width / scale
+  const right = box.width / scale - left - width
 
   sliderStyle.value = {
     width: `${width}px`,
@@ -64,8 +108,21 @@ const onKeydown = (event: KeyboardEvent, index: number) => {
 
 watch(selected, async () => await updateSlider())
 
-// the overlay copy must stay the same width as the button, so re-measure when the tabs change
-watch(items, async () => await updateSlider())
+// the overlay copy must stay the same width as the button, so re-measure whenever a tab's width
+// can change: new tabs, or a switch between icon-only and labelled
+watch(views, async () => await updateSlider())
+
+// `process.env.NODE_ENV` stays in the library build, so the consumer's bundler decides whether
+// this runs (as in NexxtIconPicker)
+if (process.env.NODE_ENV !== 'production') {
+  watchEffect(() => {
+    const missing = items.value.filter((item) => !item.icon && wantsIconOnly(item))
+    if (missing.length) {
+      const labels = missing.map((item) => `"${item.label}"`).join(', ')
+      console.warn(`[NexxtTabs] icon-only tab without an \`icon\` shows its label: ${labels}.`)
+    }
+  })
+}
 
 onMounted(async () => {
   await document.fonts.ready
@@ -94,14 +151,15 @@ onMounted(async () => {
 
     <!-- dark text buttons -->
     <button
-      v-for="(item, index) in items"
+      v-for="(item, index) in views"
       :key="item.label"
       :ref="(el) => (buttonRefs[index] = el as HTMLButtonElement)"
       role="tab"
       :aria-selected="selected === item.label"
       :tabindex="selected === item.label ? 0 : -1"
-      class="relative z-10 inline-flex h-9 cursor-pointer items-center gap-2 rounded-full px-4 small-normal"
+      class="relative z-10 inline-flex h-9 cursor-pointer items-center rounded-full small-normal"
       :class="[
+        item.spacing,
         // the dark label is what the pill wipe reveals, so it only drops out once the pill
         // has arrived — otherwise its anti-aliased edges halo around the white copy
         selected === item.label ? 'text-transparent' : 'text-gray-950',
@@ -111,8 +169,12 @@ onMounted(async () => {
       @click="selected = item.label"
       @keydown="onKeydown($event, index)"
     >
-      <Icon v-if="item.icon" :name="item.icon" aria-hidden="true" class="body-normal" />
-      {{ item.label }}
+      <template v-if="item.compact && item.icon">
+        <Icon :name="item.icon" aria-hidden="true" class="body-normal" />
+        <span class="sr-only">{{ item.label }}</span>
+      </template>
+      <Icon v-else-if="item.icon" :name="item.icon" aria-hidden="true" class="body-normal" />
+      {{ item.text }}
     </button>
 
     <!-- white text overlay, clipped to slider bounds; must mirror the buttons exactly -->
@@ -125,12 +187,13 @@ onMounted(async () => {
       :style="{ clipPath }"
     >
       <span
-        v-for="item in items"
+        v-for="item in views"
         :key="item.label"
-        class="flex h-9 items-center gap-2 rounded-full px-4 small-normal text-white"
+        class="flex h-9 items-center rounded-full small-normal text-white"
+        :class="item.spacing"
       >
         <Icon v-if="item.icon" :name="item.icon" class="body-normal" />
-        {{ item.label }}
+        {{ item.text }}
       </span>
     </div>
   </div>