@nexxtmove/ui 1.43.0 → 1.44.0

package/dist/components/editor/atoms/EditorDimensionField/EditorDimensionField.vue.d.ts

@@ -58,7 +58,12 @@ export interface NexxtEditorDimensionFieldProps {
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import('vue').DefineComponent<NexxtEditorDimensionFieldProps & {
-    /** The dimension, or `null` for none. */
+    /**
+     * The dimension, or `null` for none. A `null` from outside -- another element
+     * selected, an undo -- resets the unit to the first of `units`; a field the
+     * user emptied keeps the unit picked in it. A value from outside brings its
+     * own unit.
+     */
     modelValue?: EditorDimensionValue | null;
 }, {
     /**
@@ -71,7 +76,12 @@ declare const __VLS_export: import('vue').DefineComponent<NexxtEditorDimensionFi
     "update:modelValue": (value: EditorDimensionValue | null) => any;
     commit: () => any;
 }, string, import('vue').PublicProps, Readonly<NexxtEditorDimensionFieldProps & {
-    /** The dimension, or `null` for none. */
+    /**
+     * The dimension, or `null` for none. A `null` from outside -- another element
+     * selected, an undo -- resets the unit to the first of `units`; a field the
+     * user emptied keeps the unit picked in it. A value from outside brings its
+     * own unit.
+     */
     modelValue?: EditorDimensionValue | null;
 }> & Readonly<{
     "onUpdate:modelValue"?: ((value: EditorDimensionValue | null) => any) | undefined;

package/dist/components/editor/molecules/EditorMaxWidth/EditorMaxWidth.vue.d.ts

@@ -54,6 +54,12 @@ export interface EditorMaxWidthMessages {
      */
     unit?: string;
 }
+/**
+ * Sets a width on Tailwind's `max-w-*` steps, stored as the class.
+ *
+ * @deprecated Use `NexxtEditorSizeLimit`: a free maximum in px or % that can
+ * be none.
+ */
 export interface NexxtEditorMaxWidthProps {
     /**
      * Header text of the settings block. Defaults to the Dutch

package/dist/components/editor/molecules/EditorSize/EditorSize.vue.d.ts

@@ -16,7 +16,9 @@ export interface EditorSizeValue {
     mode: EditorSizeMode;
     /**
      * The fixed dimension. Kept when another mode is picked, so switching back
-     * to `'fixed'` restores it; it only applies while `mode` is `'fixed'`.
+     * to `'fixed'` restores it; it only applies while `mode` is `'fixed'`. The
+     * app always fills it with the measured size of the element, so picking
+     * `'fixed'` starts from that size.
      */
     fixed?: EditorDimensionValue;
 }
@@ -76,9 +78,10 @@ declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import('vue').DefineComponent<NexxtEditorSizeProps & {
     /**
-     * The size. Picking `'fixed'` without a `fixed` dimension leaves the field
-     * empty until a value is entered; seed `fixed` -- with the measured size, say
-     * -- to start from there instead.
+     * The size. Fill `fixed` with the measured size of the element, as the app
+     * always does. Without it, picking `'fixed'` writes `{ mode: 'fixed' }` and
+     * commits straight away, leaving a fixed mode without a size until a value is
+     * typed; with the measured size, that state does not come up.
      */
     modelValue: EditorSizeValue;
 }, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
@@ -86,9 +89,10 @@ declare const __VLS_export: import('vue').DefineComponent<NexxtEditorSizeProps &
     commit: () => any;
 }, string, import('vue').PublicProps, Readonly<NexxtEditorSizeProps & {
     /**
-     * The size. Picking `'fixed'` without a `fixed` dimension leaves the field
-     * empty until a value is entered; seed `fixed` -- with the measured size, say
-     * -- to start from there instead.
+     * The size. Fill `fixed` with the measured size of the element, as the app
+     * always does. Without it, picking `'fixed'` writes `{ mode: 'fixed' }` and
+     * commits straight away, leaving a fixed mode without a size until a value is
+     * typed; with the measured size, that state does not come up.
      */
     modelValue: EditorSizeValue;
 }> & Readonly<{

package/dist/components/editor/molecules/EditorSizeLimit/EditorSizeLimit.vue.d.ts

@@ -1,6 +1,11 @@
 import { EditorDimensionValue, EditorDimensionFieldMessages, EditorDimensionUnit } from '../../atoms/EditorDimensionField/EditorDimensionField.vue';
 /** Overridable copy of the field. Every key is optional. */
 export type EditorSizeLimitMessages = EditorDimensionFieldMessages;
+/**
+ * A free minimum or maximum of an element's size, in px or %, that can be
+ * none. Replaces the deprecated `NexxtEditorMaxWidth`, which offers only
+ * Tailwind's `max-w-*` steps.
+ */
 export interface NexxtEditorSizeLimitProps {
     /** Visible label above the field, and its accessible name, as in `'Maximale breedte'`. */
     label: string;

package/dist/index.js

@@ -1,4 +1,4 @@
-import { Fragment as e, Teleport as t, Transition as n, TransitionGroup as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createSlots as l, createStaticVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, getCurrentInstance as m, guardReactiveProps as h, h as g, mergeModels as _, mergeProps as v, nextTick as y, normalizeClass as b, normalizeProps as x, normalizeStyle as S, onBeforeUnmount as C, onMounted as w, onUnmounted as T, openBlock as E, readonly as D, ref as O, renderList as k, renderSlot as A, resolveDynamicComponent as j, toDisplayString as M, toHandlers as N, unref as P, useAttrs as F, useCssVars as I, useId as L, useModel as R, useSlots as ee, useTemplateRef as z, vModelCheckbox as B, vModelDynamic as V, vModelText as te, watch as H, watchEffect as U, withCtx as W, withDirectives as G, withKeys as K, withModifiers as q } from "vue";
+import { Fragment as e, Teleport as t, Transition as n, TransitionGroup as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createSlots as l, createStaticVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, getCurrentInstance as m, guardReactiveProps as h, h as g, mergeModels as _, mergeProps as v, nextTick as y, normalizeClass as b, normalizeProps as x, normalizeStyle as S, onBeforeUnmount as C, onMounted as w, onUnmounted as T, openBlock as E, readonly as D, ref as O, renderList as k, renderSlot as A, resolveDynamicComponent as j, toDisplayString as M, toHandlers as N, unref as P, useAttrs as F, useCssVars as ee, useId as I, useModel as L, useSlots as R, useTemplateRef as z, vModelCheckbox as B, vModelDynamic as V, vModelText as te, watch as H, watchEffect as U, withCtx as W, withDirectives as G, withKeys as K, withModifiers as q } from "vue";
 import { createReusableTemplate as ne, useElementSize as re, useEventListener as ie, useFullscreen as ae, useMediaControls as J, useMounted as oe, usePreferredReducedMotion as se, useResizeObserver as ce } from "@vueuse/core";
 import { ColorAreaArea as Y, ColorAreaRoot as le, ColorAreaThumb as ue, ColorFieldInput as X, ColorFieldRoot as de, ColorSliderRoot as fe, ColorSliderThumb as pe, ColorSliderTrack as me, ColorSwatch as he, DialogClose as ge, DialogContent as _e, DialogDescription as ve, DialogOverlay as ye, DialogPortal as be, DialogRoot as xe, DialogTitle as Se, PaginationEllipsis as Ce, PaginationFirst as we, PaginationLast as Te, PaginationList as Ee, PaginationListItem as De, PaginationNext as Oe, PaginationPrev as ke, PaginationRoot as Ae, SliderRange as je, SliderRoot as Me, SliderThumb as Ne, SliderTrack as Pe, TooltipContent as Fe, TooltipPortal as Ie, TooltipProvider as Le, TooltipRoot as Re, TooltipTrigger as ze, colorToString as Be, normalizeColor as Ve, setChannelValue as He } from "reka-ui";
 import { autoUpdate as Ue, flip as We, offset as Ge, shift as Ke, size as qe, useFloating as Je } from "@floating-ui/vue";
@@ -332,7 +332,7 @@ var xt = { funda: { render: bt } }, Q = /* @__PURE__ */ p({
 	}),
 	emits: ["update:modelValue"],
 	setup(e) {
-		let t = R(e, "modelValue"), n = {
+		let t = L(e, "modelValue"), n = {
 			blue: "border-cornflower-blue-500 bg-cornflower-blue-500",
 			green: "border-green-400 bg-green-400"
 		}, r = {
@@ -405,7 +405,7 @@ var xt = { funda: { render: bt } }, Q = /* @__PURE__ */ p({
 	}),
 	emits: ["update:modelValue"],
 	setup(e) {
-		let t = R(e, "modelValue"), n = i(() => !e.switchable || t.value), r = i(() => !n.value || void 0);
+		let t = L(e, "modelValue"), n = i(() => !e.switchable || t.value), r = i(() => !n.value || void 0);
 		return (i, l) => (E(), s("div", wt, [c("div", Tt, [e.switchable ? (E(), a(Ct, {
 			key: 0,
 			modelValue: t.value,
@@ -510,7 +510,7 @@ var xt = { funda: { render: bt } }, Q = /* @__PURE__ */ p({
 	}),
 	emits: ["update:modelValue"],
 	setup(t) {
-		let n = t, r = R(t, "modelValue"), i = z("containerRef"), l = O([]), u = O({
+		let n = t, r = L(t, "modelValue"), i = z("containerRef"), l = O([]), u = O({
 			width: "0px",
 			transform: "translateX(0px)"
 		}), f = O("inset(0 100% 0 0 round 8px)"), p = O(!1), m = async () => {
@@ -599,7 +599,7 @@ var xt = { funda: { render: bt } }, Q = /* @__PURE__ */ p({
 	}),
 	emits: ["update:modelValue"],
 	setup(e) {
-		let t = R(e, "modelValue"), n = i(() => ({
+		let t = L(e, "modelValue"), n = i(() => ({
 			...Bt,
 			...e.messages
 		})), r = {
@@ -646,7 +646,7 @@ var xt = { funda: { render: bt } }, Q = /* @__PURE__ */ p({
 	}),
 	emits: ["update:modelValue"],
 	setup(e) {
-		let t = R(e, "modelValue"), n = i(() => ({
+		let t = L(e, "modelValue"), n = i(() => ({
 			...Ut,
 			...e.messages
 		})), r = {
@@ -687,7 +687,7 @@ var xt = { funda: { render: bt } }, Q = /* @__PURE__ */ p({
 	}),
 	emits: ["update:modelValue"],
 	setup(e) {
-		let t = R(e, "modelValue"), n = i(() => ({
+		let t = L(e, "modelValue"), n = i(() => ({
 			...Kt,
 			...e.messages
 		})), r = {
@@ -748,7 +748,7 @@ var xt = { funda: { render: bt } }, Q = /* @__PURE__ */ p({
 	}),
 	emits: ["update:modelValue"],
 	setup(t) {
-		let n = R(t, "modelValue"), r = {
+		let n = L(t, "modelValue"), r = {
 			blue: "bg-cornflower-blue-500",
 			green: "bg-green-400"
 		}, l = {
@@ -882,7 +882,7 @@ var xt = { funda: { render: bt } }, Q = /* @__PURE__ */ p({
 	}),
 	emits: ["update:modelValue"],
 	setup(e) {
-		let t = R(e, "modelValue"), n = i(() => ({
+		let t = L(e, "modelValue"), n = i(() => ({
 			...tn,
 			...e.messages
 		})), r = en.length - 1, o = i(() => Math.max(0, en.findIndex(({ token: e }) => `gap-${e}` === t.value))), s = i({
@@ -945,7 +945,7 @@ var xt = { funda: { render: bt } }, Q = /* @__PURE__ */ p({
 			onFocus: (e) => t("enter", e)
 		}) : [];
 		m.props = ["edge", "active"], m.emits = ["enter"];
-		let h = r, _ = u, x = O(!1), C = O(!1), k = O(!1), j = z("triggerRef"), M = z("floatingRef"), N = O(!1), F = O(null), I = se(), L = i(() => I.value === "reduce"), R = i(() => d[h.surface === "raised" ? "raised" : "default"]), ee = i(() => h.fitHeight ? F.value : null), B = i(() => N.value && x.value), V = i(() => [
+		let h = r, _ = u, x = O(!1), C = O(!1), k = O(!1), j = z("triggerRef"), M = z("floatingRef"), N = O(!1), F = O(null), ee = se(), I = i(() => ee.value === "reduce"), L = i(() => d[h.surface === "raised" ? "raised" : "default"]), R = i(() => h.fitHeight ? F.value : null), B = i(() => N.value && x.value), V = i(() => [
 			Ge(h.offsetDistance),
 			We(),
 			Ke({ padding: 8 }),
@@ -1061,22 +1061,22 @@ var xt = { funda: { render: bt } }, Q = /* @__PURE__ */ p({
 					active: N.value,
 					onEnter: ue
 				}, null, 8, ["active"]),
-				f(n, v({ css: !L.value }, fe.value, { onAfterLeave: i[0] ||= (e) => C.value = !1 }), {
+				f(n, v({ css: !I.value }, fe.value, { onAfterLeave: i[0] ||= (e) => C.value = !1 }), {
 					default: W(() => [x.value && k.value ? (E(), s("div", rn, [r.surface ? (E(), s("div", {
 						key: 0,
-						class: b(R.value)
+						class: b(L.value)
 					}, [A(t.$slots, "content", {
 						isOpen: x.value,
 						close: q,
 						toggle: ne,
-						availableHeight: ee.value,
+						availableHeight: R.value,
 						teleported: N.value
 					})], 2)) : A(t.$slots, "content", {
 						key: 1,
 						isOpen: x.value,
 						close: q,
 						toggle: ne,
-						availableHeight: ee.value,
+						availableHeight: R.value,
 						teleported: N.value
 					})])) : o("", !0)]),
 					_: 3
@@ -1149,7 +1149,7 @@ var xt = { funda: { render: bt } }, Q = /* @__PURE__ */ p({
 	}),
 	emits: ["update:modelValue"],
 	setup(t) {
-		let r = "color-picker-" + Math.random().toString(36).slice(2, 10), l = t, u = R(t, "modelValue"), p = (e) => e.alpha < 1 ? He(e, "alpha", 100) : e, m = (e) => {
+		let r = "color-picker-" + Math.random().toString(36).slice(2, 10), l = t, u = L(t, "modelValue"), p = (e) => e.alpha < 1 ? He(e, "alpha", 100) : e, m = (e) => {
 			let t = Ve(e);
 			return l.showAlpha ? t : p(t);
 		}, h = (e) => {
@@ -1171,14 +1171,14 @@ var xt = { funda: { render: bt } }, Q = /* @__PURE__ */ p({
 		}, F = (e) => {
 			let t = l.showAlpha ? e : p(e);
 			y.value = t, u.value = v(t, _.value);
-		}, I = (e) => {
+		}, ee = (e) => {
 			let t = e.target.value;
 			try {
 				y.value = h(t), u.value = v(y.value, _.value), x.value = "";
 			} catch (e) {
 				x.value = e instanceof Error ? e.message : "Ongeldige kleur";
 			}
-		}, L = (e, t) => {
+		}, I = (e, t) => {
 			let n = Number(e.target.value);
 			if (isNaN(n)) {
 				C.value[t] = "Ongeldige waarde";
@@ -1302,7 +1302,7 @@ var xt = { funda: { render: bt } }, Q = /* @__PURE__ */ p({
 						default: W(() => [c("div", { class: b(["flex h-10 items-center overflow-hidden rounded-lg px-3 ring transition-colors ease-out focus-within:ring-cornflower-blue-500", x.value ? "ring-brick-400" : "ring-gray-200"]) }, [f(P(X), {
 							class: "w-full bg-transparent small-normal-mono text-gray-900 placeholder-gray-400 focus:outline-none",
 							placeholder: "#000000",
-							onInput: I
+							onInput: ee
 						})], 2), x.value ? (E(), s("p", vn, M(x.value), 1)) : o("", !0)]),
 						_: 1
 					}, 8, ["model-value"])) : _.value === "hsl" ? (E(), s("div", yn, [
@@ -1316,7 +1316,7 @@ var xt = { funda: { render: bt } }, Q = /* @__PURE__ */ p({
 							default: W(() => [c("div", { class: b(["flex h-10 items-center overflow-hidden rounded-lg px-3 ring transition-colors ease-out focus-within:ring-cornflower-blue-500", C.value.hue ? "ring-brick-400" : "ring-gray-200"]) }, [f(P(X), {
 								class: "w-full bg-transparent small-normal-mono text-gray-900 placeholder-gray-400 focus:outline-none",
 								placeholder: "H",
-								onInput: l[2] ||= (e) => L(e, "hue")
+								onInput: l[2] ||= (e) => I(e, "hue")
 							})], 2)]),
 							_: 1
 						}, 8, ["model-value"]),
@@ -1330,7 +1330,7 @@ var xt = { funda: { render: bt } }, Q = /* @__PURE__ */ p({
 							default: W(() => [c("div", { class: b(["flex h-10 items-center overflow-hidden rounded-lg px-3 ring transition-colors ease-out focus-within:ring-cornflower-blue-500", C.value.saturation ? "ring-brick-400" : "ring-gray-200"]) }, [f(P(X), {
 								class: "w-full bg-transparent small-normal-mono text-gray-900 placeholder-gray-400 focus:outline-none",
 								placeholder: "S",
-								onInput: l[3] ||= (e) => L(e, "saturation")
+								onInput: l[3] ||= (e) => I(e, "saturation")
 							})], 2)]),
 							_: 1
 						}, 8, ["model-value"]),
@@ -1344,7 +1344,7 @@ var xt = { funda: { render: bt } }, Q = /* @__PURE__ */ p({
 							default: W(() => [c("div", { class: b(["flex h-10 items-center overflow-hidden rounded-lg px-3 ring transition-colors ease-out focus-within:ring-cornflower-blue-500", C.value.lightness ? "ring-brick-400" : "ring-gray-200"]) }, [f(P(X), {
 								class: "w-full bg-transparent small-normal-mono text-gray-900 placeholder-gray-400 focus:outline-none",
 								placeholder: "L",
-								onInput: l[4] ||= (e) => L(e, "lightness")
+								onInput: l[4] ||= (e) => I(e, "lightness")
 							})], 2)]),
 							_: 1
 						}, 8, ["model-value"])
@@ -1359,7 +1359,7 @@ var xt = { funda: { render: bt } }, Q = /* @__PURE__ */ p({
 							default: W(() => [c("div", { class: b(["flex h-10 items-center overflow-hidden rounded-lg px-3 ring transition-colors ease-out focus-within:ring-cornflower-blue-500", C.value.red ? "ring-brick-400" : "ring-gray-200"]) }, [f(P(X), {
 								class: "w-full bg-transparent small-normal-mono text-gray-900 placeholder-gray-400 focus:outline-none",
 								placeholder: "R",
-								onInput: l[5] ||= (e) => L(e, "red")
+								onInput: l[5] ||= (e) => I(e, "red")
 							})], 2)]),
 							_: 1
 						}, 8, ["model-value"]),
@@ -1373,7 +1373,7 @@ var xt = { funda: { render: bt } }, Q = /* @__PURE__ */ p({
 							default: W(() => [c("div", { class: b(["flex h-10 items-center overflow-hidden rounded-lg px-3 ring transition-colors ease-out focus-within:ring-cornflower-blue-500", C.value.green ? "ring-brick-400" : "ring-gray-200"]) }, [f(P(X), {
 								class: "w-full bg-transparent small-normal-mono text-gray-900 placeholder-gray-400 focus:outline-none",
 								placeholder: "G",
-								onInput: l[6] ||= (e) => L(e, "green")
+								onInput: l[6] ||= (e) => I(e, "green")
 							})], 2)]),
 							_: 1
 						}, 8, ["model-value"]),
@@ -1387,7 +1387,7 @@ var xt = { funda: { render: bt } }, Q = /* @__PURE__ */ p({
 							default: W(() => [c("div", { class: b(["flex h-10 items-center overflow-hidden rounded-lg px-3 ring transition-colors ease-out focus-within:ring-cornflower-blue-500", C.value.blue ? "ring-brick-400" : "ring-gray-200"]) }, [f(P(X), {
 								class: "w-full bg-transparent small-normal-mono text-gray-900 placeholder-gray-400 focus:outline-none",
 								placeholder: "B",
-								onInput: l[7] ||= (e) => L(e, "blue")
+								onInput: l[7] ||= (e) => I(e, "blue")
 							})], 2)]),
 							_: 1
 						}, 8, ["model-value"])
@@ -1462,7 +1462,7 @@ var xt = { funda: { render: bt } }, Q = /* @__PURE__ */ p({
 	}),
 	emits: ["update:modelValue", "update:enabled"],
 	setup(e) {
-		let t = R(e, "modelValue"), n = R(e, "enabled"), r = i(() => ({
+		let t = L(e, "modelValue"), n = L(e, "enabled"), r = i(() => ({
 			...jn,
 			...e.messages
 		})), o = An.length - 1, s = i(() => t.value.split(/\s+/).filter(Boolean)), l = i(() => {
@@ -1557,7 +1557,7 @@ var xt = { funda: { render: bt } }, Q = /* @__PURE__ */ p({
 	}),
 	emits: ["update:modelValue"],
 	setup(t) {
-		let r = (e) => typeof e == "string" ? e : e.label, l = (e) => typeof e == "string" ? e : e.value, u = (e) => typeof e == "string" ? void 0 : e.icon, p = "select-" + Math.random().toString(36).slice(2, 10), m = `${p}-listbox`, h = (e) => `${p}-option-${e}`, g = t, _ = R(t, "modelValue"), v = z("panel"), y = O(-1), x = i(() => {
+		let r = (e) => typeof e == "string" ? e : e.label, l = (e) => typeof e == "string" ? e : e.value, u = (e) => typeof e == "string" ? void 0 : e.icon, p = "select-" + Math.random().toString(36).slice(2, 10), m = `${p}-listbox`, h = (e) => `${p}-option-${e}`, g = t, _ = L(t, "modelValue"), v = z("panel"), y = O(-1), x = i(() => {
 			if (_.value === null || _.value === void 0) return null;
 			let e = g.options.find((e) => l(e) === _.value);
 			return e ? r(e) : null;
@@ -1726,7 +1726,7 @@ var xt = { funda: { render: bt } }, Q = /* @__PURE__ */ p({
 	}),
 	emits: ["update:modelValue"],
 	setup(e) {
-		let t = R(e, "modelValue"), n = i(() => ({
+		let t = L(e, "modelValue"), n = i(() => ({
 			...Wn,
 			...e.messages
 		})), r = i(() => Un.map(({ token: e, level: t }) => {
@@ -1814,7 +1814,7 @@ var xt = { funda: { render: bt } }, Q = /* @__PURE__ */ p({
 	}),
 	emits: ["update:modelValue"],
 	setup(e) {
-		let t = R(e, "modelValue"), n = i(() => ({
+		let t = L(e, "modelValue"), n = i(() => ({
 			...Yn,
 			...e.messages
 		})), r = Jn.length - 1, o = i(() => Math.max(0, Jn.findIndex(({ token: e }) => `rounded-${e}` === t.value))), s = i({
@@ -1865,7 +1865,7 @@ var xt = { funda: { render: bt } }, Q = /* @__PURE__ */ p({
 	}),
 	emits: ["update:modelValue"],
 	setup(e) {
-		let t = R(e, "modelValue"), n = i(() => ({
+		let t = L(e, "modelValue"), n = i(() => ({
 			...Qn,
 			...e.messages
 		})), r = {
@@ -1914,7 +1914,7 @@ var xt = { funda: { render: bt } }, Q = /* @__PURE__ */ p({
 	}),
 	emits: ["update:modelValue"],
 	setup(e) {
-		let t = R(e, "modelValue"), n = i(() => ({
+		let t = L(e, "modelValue"), n = i(() => ({
 			...tr,
 			...e.messages
 		})), r = {
@@ -2003,7 +2003,7 @@ var xt = { funda: { render: bt } }, Q = /* @__PURE__ */ p({
 	}),
 	emits: ["update:modelValue", "update:enabled"],
 	setup(e) {
-		let t = R(e, "modelValue"), n = R(e, "enabled"), r = i(() => ({
+		let t = L(e, "modelValue"), n = L(e, "enabled"), r = i(() => ({
 			...or,
 			...e.messages
 		})), o = ar.length - 1, s = i(() => Math.max(0, ar.findIndex(({ token: e }) => `max-w-${e}` === t.value))), l = i({
@@ -2103,7 +2103,7 @@ var xt = { funda: { render: bt } }, Q = /* @__PURE__ */ p({
 	}),
 	emits: /*@__PURE__*/ _(["pointerup", "reset"], ["update:modelValue"]),
 	setup(e, { emit: t }) {
-		let n = t, r = R(e, "modelValue"), o = i(() => ({
+		let n = t, r = L(e, "modelValue"), o = i(() => ({
 			...mr,
 			...e.messages
 		})), s = z("root"), l = dr.length - 1, u = (e) => dr.findIndex((t) => t.token === e), d = i(() => {
@@ -2259,7 +2259,7 @@ var xt = { funda: { render: bt } }, Q = /* @__PURE__ */ p({
 	}),
 	emits: /*@__PURE__*/ _(["pointerup"], ["update:modelValue"]),
 	setup(e, { emit: t }) {
-		let n = t, r = R(e, "modelValue"), o = i(() => ({
+		let n = t, r = L(e, "modelValue"), o = i(() => ({
 			...Sr,
 			...e.messages
 		})), s = vr.length - 1, l = (e) => vr.findIndex((t) => t.token === e), u = (e) => dr.find((t) => t.token === e), d = i(() => u(e.fontSize) ?? u(br)), p = i(() => Math.max(0, l(r.value)));
@@ -2353,7 +2353,7 @@ var xt = { funda: { render: bt } }, Q = /* @__PURE__ */ p({
 	}),
 	emits: /*@__PURE__*/ _(["pointerup"], ["update:modelValue"]),
 	setup(e, { emit: t }) {
-		let n = t, r = R(e, "modelValue"), o = i(() => ({
+		let n = t, r = L(e, "modelValue"), o = i(() => ({
 			...kr,
 			...e.messages
 		})), s = Er.length - 1, l = (e) => Er.findIndex((t) => t.token === e), u = (e) => dr.find((t) => t.token === e), d = i(() => (u(e.fontSize) ?? u(Dr)).px), p = i(() => {
@@ -2705,7 +2705,7 @@ var xt = { funda: { render: bt } }, Q = /* @__PURE__ */ p({
 	}),
 	emits: ["update:modelValue"],
 	setup(t) {
-		let n = R(t, "modelValue"), r = i(() => ({
+		let n = L(t, "modelValue"), r = i(() => ({
 			...ei,
 			...t.messages
 		})), o = O(ri(n.value));
@@ -2851,105 +2851,105 @@ var xt = { funda: { render: bt } }, Q = /* @__PURE__ */ p({
 	}),
 	emits: /*@__PURE__*/ _(["commit"], ["update:modelValue"]),
 	setup(t, { expose: n, emit: r }) {
-		let a = r, o = R(t, "modelValue"), l = i(() => ({
+		let a = r, o = L(t, "modelValue"), l = i(() => ({
 			...hi,
 			...t.messages
-		})), u = O(o.value?.unit ?? t.units[0]);
-		H(() => o.value?.unit, (e) => {
-			e && (u.value = e);
+		})), u = O(o.value?.unit ?? t.units[0]), d = !1;
+		H(() => o.value, (e) => {
+			e ? u.value = e.unit : d || (u.value = t.units[0]), d = !1;
 		});
-		let d = (e) => l.value[gi[e]], p = (e) => ({
+		let p = (e) => l.value[gi[e]], m = (e) => ({
 			min: t.min?.[e] ?? mi[e].min,
 			max: t.max?.[e] ?? mi[e].max
-		}), m = i(() => p(u.value)), h = (e, t) => {
-			let n = p(t);
+		}), h = i(() => m(u.value)), g = (e, t) => {
+			let n = m(t);
 			return Math.min(Math.max(Math.round(e), n.min), n.max);
-		}, g = () => o.value === null ? "" : String(o.value.value), _ = z("input"), v = () => _.value?.validity.badInput === !0, b = () => {
-			x.value = g(), _.value && (_.value.value = x.value);
-		}, x = O(g()), S = O();
+		}, _ = () => o.value === null ? "" : String(o.value.value), v = z("input"), b = () => v.value?.validity.badInput === !0, x = () => {
+			S.value = _(), v.value && (v.value.value = S.value);
+		}, S = O(_()), C = O();
 		H(() => o.value?.value ?? null, () => {
-			x.value = g();
+			S.value = _();
 		});
-		let C = !1, w = (e) => {
+		let w = !1, T = (e) => {
 			let t = o.value;
-			return !(e === null ? t === null : e.value === t?.value && e.unit === t.unit) && (o.value = e, !0);
-		}, T = () => {
-			C = !1, a("commit");
+			return !(e === null ? t === null : e.value === t?.value && e.unit === t.unit) && (d = e === null, o.value = e, !0);
 		}, D = () => {
-			_.value?.focus(), _.value?.select();
+			w = !1, a("commit");
+		}, A = () => {
+			v.value?.focus(), v.value?.select();
 		};
 		n({ focus: (e) => {
-			_.value?.focus(e), _.value?.select();
+			v.value?.focus(e), v.value?.select();
 		} });
-		let A = (e) => {
-			e.pointerType === "mouse" && (e.target.closest("select") || document.activeElement !== _.value && (e.preventDefault(), D()));
-		}, j = async () => {
-			let e = x.value.trim(), n = v(), r = !1;
-			n || (e === "" ? t.optional && (r = w(null)) : _i.test(e) && (r = w({
-				value: h(Number(e), u.value),
+		let j = (e) => {
+			e.pointerType === "mouse" && (e.target.closest("select") || document.activeElement !== v.value && (e.preventDefault(), A()));
+		}, N = async () => {
+			let e = S.value.trim(), n = b(), r = !1;
+			n || (e === "" ? t.optional && (r = T(null)) : _i.test(e) && (r = T({
+				value: g(Number(e), u.value),
 				unit: u.value
-			}))), (r || C) && T(), await y(), b(), !(!_i.test(e) || o.value === null || Number(e) === o.value.value) && (S.value = void 0, await y(), S.value = o.value.value > Number(e) ? "up" : "down");
-		}, N = async (e, t) => {
-			let n = o.value, r = n === null ? p(u.value).min : h(n.value + e * t, n.unit);
-			w({
+			}))), (r || w) && D(), await y(), x(), !(!_i.test(e) || o.value === null || Number(e) === o.value.value) && (C.value = void 0, await y(), C.value = o.value.value > Number(e) ? "up" : "down");
+		}, P = async (e, t) => {
+			let n = o.value, r = n === null ? m(u.value).min : g(n.value + e * t, n.unit);
+			T({
 				value: r,
 				unit: n?.unit ?? u.value
-			}) && (C = !0), await y(), x.value = g();
-		}, P = async (e) => {
-			if (e.key === "Enter") return e.preventDefault(), await j(), D();
-			if (e.key === "Escape") return x.value === g() && !v() ? void 0 : (e.stopPropagation(), b(), D());
-			if (e.key === "ArrowUp" || e.key === "ArrowDown") return e.preventDefault(), N(e.key === "ArrowUp" ? 1 : -1, e.shiftKey ? 10 : 1);
-		}, F = (e) => {
-			(e.key === "ArrowUp" || e.key === "ArrowDown") && C && T();
-		}, I = O(!1), L = !1, ee = () => {
-			I.value = !0, L = !0, setTimeout(() => L = !1);
-		}, B = () => {
-			I.value = L;
-		}, V = (e) => {
+			}) && (w = !0), await y(), S.value = _();
+		}, F = async (e) => {
+			if (e.key === "Enter") return e.preventDefault(), await N(), A();
+			if (e.key === "Escape") return S.value === _() && !b() ? void 0 : (e.stopPropagation(), x(), A());
+			if (e.key === "ArrowUp" || e.key === "ArrowDown") return e.preventDefault(), P(e.key === "ArrowUp" ? 1 : -1, e.shiftKey ? 10 : 1);
+		}, ee = (e) => {
+			(e.key === "ArrowUp" || e.key === "ArrowDown") && w && D();
+		}, I = O(!1), R = !1, B = () => {
+			I.value = !0, R = !0, setTimeout(() => R = !1);
+		}, V = () => {
+			I.value = R;
+		}, te = (e) => {
 			let t = e.target.value;
-			u.value = t, o.value !== null && w({
-				value: h(o.value.value, t),
+			u.value = t, o.value !== null && T({
+				value: g(o.value.value, t),
 				unit: t
-			}) && T();
+			}) && D();
 		};
 		return (n, r) => (E(), s("div", {
 			class: "flex cursor-text items-center gap-1 overflow-hidden rounded-lg px-3 whitespace-nowrap ring ring-gray-200 transition-colors duration-150 ease-out focus-within:ring-cornflower-blue-500 hover:not-focus-within:ring-gray-300 motion-reduce:transition-none",
-			onPointerdown: A
+			onPointerdown: j
 		}, [c("input", {
 			ref: "input",
 			type: "number",
 			inputmode: "numeric",
 			step: "1",
-			min: m.value.min,
-			max: m.value.max,
+			min: h.value.min,
+			max: h.value.max,
 			autocomplete: "off",
 			placeholder: t.optional ? l.value.placeholder : void 0,
-			"aria-label": `${t.label} (${d(u.value)})`,
-			value: x.value,
-			"data-snap": S.value,
+			"aria-label": `${t.label} (${p(u.value)})`,
+			value: S.value,
+			"data-snap": C.value,
 			class: "h-10 min-w-0 flex-1 [appearance:textfield] bg-transparent small-normal text-gray-900 tabular-nums placeholder-gray-700 focus:outline-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
-			onInput: r[0] ||= (e) => x.value = e.target.value,
-			onFocus: D,
-			onBlur: j,
-			onKeydown: P,
-			onKeyup: F,
-			onAnimationend: r[1] ||= (e) => S.value = void 0
+			onInput: r[0] ||= (e) => S.value = e.target.value,
+			onFocus: A,
+			onBlur: N,
+			onKeydown: F,
+			onKeyup: ee,
+			onAnimationend: r[1] ||= (e) => C.value = void 0
 		}, null, 40, ci), t.units.length > 1 ? (E(), s("span", li, [c("select", {
 			value: u.value,
 			"aria-label": l.value.unit,
 			"data-pointer": I.value || void 0,
 			class: "cursor-pointer appearance-none rounded-sm bg-transparent pr-4 pl-1 small-normal text-gray-700 hover:text-gray-900 focus:outline-none focus-visible:not-data-pointer:bg-gray-100 focus-visible:not-data-pointer:text-gray-900",
-			onPointerdown: ee,
-			onFocus: B,
+			onPointerdown: B,
+			onFocus: V,
 			onKeydown: r[2] ||= (e) => I.value = !1,
 			onBlur: r[3] ||= (e) => I.value = !1,
-			onChange: V
+			onChange: te
 		}, [(E(!0), s(e, null, k(t.units, (e) => (E(), s("option", {
 			key: e,
 			value: e
-		}, M(d(e)), 9, di))), 128))], 40, ui), c("span", fi, [f(Q, { name: "chevron-down" })])])) : (E(), s("span", pi, M(d(u.value)), 1))], 32));
+		}, M(p(e)), 9, di))), 128))], 40, ui), c("span", fi, [f(Q, { name: "chevron-down" })])])) : (E(), s("span", pi, M(p(u.value)), 1))], 32));
 	}
-}), [["__scopeId", "data-v-17eb933b"]]), yi = ["inert"], bi = { class: "px-1 pt-2 pb-1" }, xi = [
+}), [["__scopeId", "data-v-15feed8b"]]), yi = ["inert"], bi = { class: "px-1 pt-2 pb-1" }, xi = [
 	{ token: "auto" },
 	{ token: "fill" },
 	{ token: "fixed" }
@@ -2976,7 +2976,7 @@ var xt = { funda: { render: bt } }, Q = /* @__PURE__ */ p({
 	}),
 	emits: /*@__PURE__*/ _(["commit"], ["update:modelValue"]),
 	setup(e, { emit: t }) {
-		let n = t, r = R(e, "modelValue"), o = i(() => ({
+		let n = t, r = L(e, "modelValue"), o = i(() => ({
 			...Si,
 			...e.messages
 		})), s = z("field"), l = (t) => e.messages?.[`${t}AriaLabel`] ?? `${e.label} ${o.value[t].toLocaleLowerCase()}`, u = i(() => xi.filter(({ token: t }) => !e.modes || e.modes.includes(t)).map(({ token: e }) => ({
@@ -3661,7 +3661,7 @@ var xt = { funda: { render: bt } }, Q = /* @__PURE__ */ p({
 	}),
 	emits: /*@__PURE__*/ _(["select"], ["update:modelValue"]),
 	setup(e, { emit: t }) {
-		let r = R(e, "modelValue"), l = t, u = O(r.value ? Z(new Date(r.value), e.timezone) : Z(/* @__PURE__ */ new Date(), e.timezone)), d = O("days"), p = O(null), m = O("fade");
+		let r = L(e, "modelValue"), l = t, u = O(r.value ? Z(new Date(r.value), e.timezone) : Z(/* @__PURE__ */ new Date(), e.timezone)), d = O("days"), p = O(null), m = O("fade");
 		H(r, (t) => {
 			t && (u.value = Z(new Date(t), e.timezone));
 		});
@@ -3830,7 +3830,7 @@ var xt = { funda: { render: bt } }, Q = /* @__PURE__ */ p({
 	}),
 	emits: ["update:modelValue"],
 	setup(e) {
-		let t = R(e, "modelValue"), n = z("inputRef");
+		let t = L(e, "modelValue"), n = z("inputRef");
 		return U(() => {
 			n.value && (n.value.indeterminate = e.indeterminate ?? !1);
 		}), (r, i) => (E(), s("label", { class: b(["inline-flex cursor-pointer", e.disabled ? "cursor-not-allowed opacity-50" : ""]) }, [G(c("input", v(r.$attrs, {
@@ -3994,7 +3994,7 @@ var xt = { funda: { render: bt } }, Q = /* @__PURE__ */ p({
 		})), u = i(() => {
 			let e = { ...a };
 			return delete e.class, delete e.style, e;
-		}), p = R(e, "modelValue"), h = z("inputEl");
+		}), p = L(e, "modelValue"), h = z("inputEl");
 		t({
 			focus: () => h.value?.focus(),
 			inputEl: h
@@ -4155,7 +4155,7 @@ var xt = { funda: { render: bt } }, Q = /* @__PURE__ */ p({
 	}),
 	emits: /*@__PURE__*/ _(["select"], ["update:modelValue"]),
 	setup(t, { expose: l, emit: u }) {
-		let p = t, { icon: m = "tag", placeholder: h = "Zoeken...", floating: g = !0 } = p, _ = u, v = R(t, "modelValue"), y = z("inputFieldRef"), b = z("wrapperRef"), x = O(""), S = O(!1), C = i(() => !p.singleSelect && p.showChips), D = (e) => {
+		let p = t, { icon: m = "tag", placeholder: h = "Zoeken...", floating: g = !0 } = p, _ = u, v = L(t, "modelValue"), y = z("inputFieldRef"), b = z("wrapperRef"), x = O(""), S = O(!1), C = i(() => !p.singleSelect && p.showChips), D = (e) => {
 			b.value && !b.value.contains(e.target) && (S.value = !1);
 		}, A = (e) => {
 			e.key === "Escape" && (S.value = !1);
@@ -4165,17 +4165,17 @@ var xt = { funda: { render: bt } }, Q = /* @__PURE__ */ p({
 		}), T(() => {
 			document.removeEventListener("mousedown", D), document.removeEventListener("keydown", A);
 		});
-		let j = (e) => typeof e == "string" ? e : e.label, N = (e) => typeof e == "string" ? e : e.value, F = (e) => typeof e == "object" && "options" in e, I = L(), ee = i(() => {
+		let j = (e) => typeof e == "string" ? e : e.label, N = (e) => typeof e == "string" ? e : e.value, F = (e) => typeof e == "object" && "options" in e, ee = I(), R = i(() => {
 			let e = p.options, t = e.filter(F);
 			return t.length === 0 ? [{
-				id: I,
+				id: ee,
 				options: e.filter((e) => !F(e))
 			}] : t.map((e, t) => ({
-				id: `${I}-group-${t}`,
+				id: `${ee}-group-${t}`,
 				label: e.label,
 				options: e.options
 			}));
-		}), B = i(() => ee.value.flatMap((e) => e.options)), V = i(() => v.value.map((e) => {
+		}), B = i(() => R.value.flatMap((e) => e.options)), V = i(() => v.value.map((e) => {
 			let t = B.value.find((t) => N(t) === e);
 			return {
 				value: e,
@@ -4184,7 +4184,7 @@ var xt = { funda: { render: bt } }, Q = /* @__PURE__ */ p({
 			};
 		})), te = i(() => {
 			let e = x.value.toLowerCase();
-			return ee.value.map((t) => ({
+			return R.value.map((t) => ({
 				...t,
 				options: t.options.filter((e) => p.singleSelect || !v.value.includes(N(e))).filter((t) => j(t).toLowerCase().includes(e))
 			})).filter((e) => e.options.length > 0);
@@ -4413,7 +4413,7 @@ var xt = { funda: { render: bt } }, Q = /* @__PURE__ */ p({
 	}),
 	emits: ["update:modelValue"],
 	setup(e) {
-		let t = e, { variant: n = "secondary", placement: r = "right", icon: o = "tag", placeholder: s = "Zoeken...", matchWidth: l = !1, fullWidth: u = !1, singleSelect: p = !1 } = t, m = R(e, "modelValue"), h = O(null), g = i(() => r === "right" ? "bottom-end" : "bottom-start"), _ = i(() => !p && t.showChips), v = async () => {
+		let t = e, { variant: n = "secondary", placement: r = "right", icon: o = "tag", placeholder: s = "Zoeken...", matchWidth: l = !1, fullWidth: u = !1, singleSelect: p = !1 } = t, m = L(e, "modelValue"), h = O(null), g = i(() => r === "right" ? "bottom-end" : "bottom-start"), _ = i(() => !p && t.showChips), v = async () => {
 			await y(), h.value?.focus();
 		};
 		return (e, r) => (E(), a(ln, {
@@ -5282,7 +5282,7 @@ var co = /* @__PURE__ */ p({
 	}),
 	emits: ["update:modelValue"],
 	setup(t) {
-		let r = "country-select-" + Math.random().toString(36).slice(2, 10), l = t, u = R(t, "modelValue"), p = O(""), m = O(null), h = i(() => Xa.find((e) => e.name === u.value) ?? null), g = i(() => {
+		let r = "country-select-" + Math.random().toString(36).slice(2, 10), l = t, u = L(t, "modelValue"), p = O(""), m = O(null), h = i(() => Xa.find((e) => e.name === u.value) ?? null), g = i(() => {
 			let e = l.pinnedCountries.map((e) => Xa.find((t) => t.code === e)).filter((e) => e !== void 0), t = new Set(l.pinnedCountries), n = Xa.filter((e) => !t.has(e.code)).sort((e, t) => e.name.localeCompare(t.name, "nl"));
 			return [...e, ...n];
 		}), _ = i(() => {
@@ -5462,7 +5462,7 @@ var co = /* @__PURE__ */ p({
 	}),
 	emits: ["update:modelValue"],
 	setup(e) {
-		let t = R(e, "modelValue"), n = e, r = /* @__PURE__ */ new Set([
+		let t = L(e, "modelValue"), n = e, r = /* @__PURE__ */ new Set([
 			"placeholder",
 			"anchor",
 			"autoClose"
@@ -5721,7 +5721,7 @@ var co = /* @__PURE__ */ p({
 	}),
 	emits: ["update:modelValue", "update:enabled"],
 	setup(t) {
-		let n = R(t, "modelValue"), r = R(t, "enabled"), o = i(() => ({
+		let n = L(t, "modelValue"), r = L(t, "enabled"), o = i(() => ({
 			...Po,
 			...t.messages
 		})), u = (e) => e.startsWith("#"), d = i(() => {
@@ -5807,7 +5807,7 @@ var co = /* @__PURE__ */ p({
 	}),
 	emits: /*@__PURE__*/ _(["commit"], ["update:modelValue"]),
 	setup(e, { emit: t }) {
-		let n = t, r = R(e, "modelValue");
+		let n = t, r = L(e, "modelValue");
 		return (t, i) => (E(), s("label", zo, [c("span", Bo, M(e.label), 1), f(vi, {
 			modelValue: r.value,
 			"onUpdate:modelValue": i[0] ||= (e) => r.value = e,
@@ -5888,7 +5888,7 @@ var co = /* @__PURE__ */ p({
 	}),
 	emits: ["update:open"],
 	setup(e) {
-		let t = R(e, "open"), r = L(), a = se(), l = i(() => a.value === "reduce"), u = {
+		let t = L(e, "open"), r = I(), a = se(), l = i(() => a.value === "reduce"), u = {
 			base: "flex h-7 items-center gap-1.5 rounded-lg px-2 extra-small-semibold tracking-wide text-gray-700 uppercase select-none",
 			collapsible: "cursor-pointer hover:bg-gray-50",
 			static: "cursor-default"
@@ -6083,9 +6083,9 @@ var co = /* @__PURE__ */ p({
 		"clear"
 	], ["update:highlighted"]),
 	setup(t, { expose: r, emit: u }) {
-		let p = t, m = R(t, "highlighted"), h = u, g = ee(), _ = `${L()}-listbox`, x = (e) => `${_}-opt-${encodeURIComponent(e)}`, S = z("listbox"), w = se(), T = i(() => w.value === "reduce"), D = (e) => e.normalize("NFD").replace(/\p{M}/gu, "").toLocaleLowerCase(), j = i(() => p.search.trim()), N = i(() => D(j.value)), P = i(() => N.value !== ""), F = (e) => !P.value || D(e.label).includes(N.value) || !!e.keywords?.some((e) => D(e).includes(N.value)), I = i(() => p.items.filter(F)), B = i(() => new Set(p.groups.map((e) => e.id))), V = i(() => I.value.filter((e) => !e.group || !B.value.has(e.group))), te = O({}), U = (e) => te.value[e.id] ?? e.defaultOpen ?? !0, G = i(() => p.collapsible && !P.value), K = i(() => p.groups.map((e) => ({
+		let p = t, m = L(t, "highlighted"), h = u, g = R(), _ = `${I()}-listbox`, x = (e) => `${_}-opt-${encodeURIComponent(e)}`, S = z("listbox"), w = se(), T = i(() => w.value === "reduce"), D = (e) => e.normalize("NFD").replace(/\p{M}/gu, "").toLocaleLowerCase(), j = i(() => p.search.trim()), N = i(() => D(j.value)), P = i(() => N.value !== ""), F = (e) => !P.value || D(e.label).includes(N.value) || !!e.keywords?.some((e) => D(e).includes(N.value)), ee = i(() => p.items.filter(F)), B = i(() => new Set(p.groups.map((e) => e.id))), V = i(() => ee.value.filter((e) => !e.group || !B.value.has(e.group))), te = O({}), U = (e) => te.value[e.id] ?? e.defaultOpen ?? !0, G = i(() => p.collapsible && !P.value), K = i(() => p.groups.map((e) => ({
 			group: e,
-			items: I.value.filter((t) => t.group === e.id),
+			items: ee.value.filter((t) => t.group === e.id),
 			open: !G.value || U(e)
 		})).filter((e) => e.items.length > 0)), q = i(() => [...V.value, ...K.value.flatMap((e) => e.open ? e.items : [])]), ne = i(() => V.value.length > 0 || K.value.length > 0), re = i(() => P.value && q.value.length === 0 && !p.busy), ie = (e) => e === null ? null : q.value.find((t) => t.id === e) ?? null, ae = i(() => (q.value.find((e) => !e.disabled) ?? q.value[0])?.id ?? null), J = i(() => ie(m.value) ? m.value : ae.value), oe = i(() => J.value === null ? void 0 : x(J.value)), ce = "other", Y = (e, t) => {
 			t !== "fold" && (X = null), e !== J.value && (ce = t, m.value = e);
@@ -6394,7 +6394,7 @@ var co = /* @__PURE__ */ p({
 		"close"
 	], ["update:highlighted", "update:search"]),
 	setup(e, { expose: t, emit: n }) {
-		let r = e, a = R(e, "highlighted"), u = R(e, "search"), d = n, p = z("inputField"), m = z("list"), g = z("row"), _ = (e) => typeof e == "number" ? `${e}px` : e, v = i(() => {
+		let r = e, a = L(e, "highlighted"), u = L(e, "search"), d = n, p = z("inputField"), m = z("list"), g = z("row"), _ = (e) => typeof e == "number" ? `${e}px` : e, v = i(() => {
 			let e = `min(${_(r.height)}, calc(100dvh - 5rem))`;
 			return {
 				width: _(r.width),
@@ -6651,10 +6651,10 @@ var co = /* @__PURE__ */ p({
 		"retry"
 	], ["update:modelValue"]),
 	setup(t, { emit: n }) {
-		let r = R(t, "modelValue"), u = n, p = i(() => ({
+		let r = L(t, "modelValue"), u = n, p = i(() => ({
 			...Rs,
 			...t.messages
-		})), m = L(), h = `${m}-trigger`, g = `${m}-label`, _ = `${m}-value`, v = z("root"), y = z("trigger"), x = z("floating"), C = z("panelRoot"), w = O(null), T = O(""), D = i(() => r.value || null), A = i(() => D.value ? Bs(D.value) : t.inherit ? zs : null), j = i(() => {
+		})), m = I(), h = `${m}-trigger`, g = `${m}-label`, _ = `${m}-value`, v = z("root"), y = z("trigger"), x = z("floating"), C = z("panelRoot"), w = O(null), T = O(""), D = i(() => r.value || null), A = i(() => D.value ? Bs(D.value) : t.inherit ? zs : null), j = i(() => {
 			if (D.value) return {
 				primary: D.value,
 				family: D.value,
@@ -6673,7 +6673,7 @@ var co = /* @__PURE__ */ p({
 				primary: t.placeholder,
 				placeholder: !0
 			};
-		}), N = i(() => [j.value.primary, j.value.detail].filter(Boolean).join(Ks)), F = i(() => t.label ? `${g} ${_}` : void 0), I = i(() => !t.label && t.ariaLabel ? `${t.ariaLabel}, ${N.value}` : void 0), ee = i(() => {
+		}), N = i(() => [j.value.primary, j.value.detail].filter(Boolean).join(Ks)), F = i(() => t.label ? `${g} ${_}` : void 0), ee = i(() => !t.label && t.ariaLabel ? `${t.ariaLabel}, ${N.value}` : void 0), R = i(() => {
 			let e = /* @__PURE__ */ new Set();
 			return t.fonts.filter(({ family: t }) => !e.has(t) && (e.add(t), !0));
 		}), B = (e, t) => [e === A.value ? p.value.current : void 0, t].filter(Boolean).join(". ") || void 0, V = i(() => {
@@ -6693,7 +6693,7 @@ var co = /* @__PURE__ */ p({
 				});
 			}
 			let n = D.value;
-			if (n && !ee.value.some(({ family: e }) => e === n)) {
+			if (n && !R.value.some(({ family: e }) => e === n)) {
 				let t = Bs(n);
 				e.push({
 					item: {
@@ -6705,7 +6705,7 @@ var co = /* @__PURE__ */ p({
 					value: n
 				});
 			}
-			for (let { family: t, source: n } of ee.value) {
+			for (let { family: t, source: n } of R.value) {
 				let r = Bs(t);
 				e.push({
 					item: {
@@ -6725,7 +6725,7 @@ var co = /* @__PURE__ */ p({
 		}, {
 			id: Hs,
 			label: p.value.groupGoogle
-		}]), q = i(() => t.catalogueStatus === "loading"), ne = i(() => t.catalogueStatus === "error"), ie = i(() => q.value && !ee.value.some(({ source: e }) => e === "google"));
+		}]), q = i(() => t.catalogueStatus === "loading"), ne = i(() => t.catalogueStatus === "error"), ie = i(() => q.value && !R.value.some(({ source: e }) => e === "google"));
 		process.env.NODE_ENV !== "production" && U(() => {
 			!t.label && !t.ariaLabel && console.warn("[NexxtFontPicker] Pass `label` or `ariaLabel`: the trigger has no name.");
 		});
@@ -6792,7 +6792,7 @@ var co = /* @__PURE__ */ p({
 				type: "button",
 				"aria-haspopup": "listbox",
 				"aria-expanded": e,
-				"aria-label": I.value,
+				"aria-label": ee.value,
 				"aria-labelledby": F.value,
 				disabled: t.disabled,
 				class: b(he.value),
@@ -7023,7 +7023,7 @@ var co = /* @__PURE__ */ p({
 		})), h = i(() => {
 			let e = { ...p };
 			return delete e.class, delete e.style, e;
-		}), g = t, _ = (e) => typeof e == "string" ? e : e.label, y = (e) => typeof e == "string" ? e : e.value, x = R(t, "input"), C = R(t, "select"), w = i(() => {
+		}), g = t, _ = (e) => typeof e == "string" ? e : e.label, y = (e) => typeof e == "string" ? e : e.value, x = L(t, "input"), C = L(t, "select"), w = i(() => {
 			if (C.value === null || C.value === void 0) return null;
 			let e = g.options.find((e) => y(e) === C.value);
 			return e ? _(e) : null;
@@ -7137,7 +7137,7 @@ var co = /* @__PURE__ */ p({
 	}),
 	emits: ["update:modelValue"],
 	setup(e) {
-		let t = R(e, "modelValue"), r = i(() => e.description?.trim() || void 0), l = async (n) => {
+		let t = L(e, "modelValue"), r = i(() => e.description?.trim() || void 0), l = async (n) => {
 			if (n) {
 				t.value = !0;
 				return;
@@ -7482,7 +7482,7 @@ var Vc = { render: Bc }, Hc = /* @__PURE__ */ p({
 	}),
 	emits: ["update:page"],
 	setup(t) {
-		let n = R(t, "page");
+		let n = L(t, "page");
 		return (r, i) => (E(), a(P(Ae), {
 			total: t.total,
 			"items-per-page": t.itemsPerPage,
@@ -7579,7 +7579,7 @@ var Vc = { render: Bc }, Hc = /* @__PURE__ */ p({
 	}),
 	emits: ["update:modelValue"],
 	setup(t) {
-		let n = R(t, "modelValue"), r = i(() => t.messages?.insert ?? "Placeholder invoegen"), l = i(() => t.placeholders.length > 1), u = z("field"), p = (e, t) => {
+		let n = L(t, "modelValue"), r = i(() => t.messages?.insert ?? "Placeholder invoegen"), l = i(() => t.placeholders.length > 1), u = z("field"), p = (e, t) => {
 			let r = u.value?.inputEl ?? null, i = `{{${e}}}`, a = r?.selectionStart ?? n.value.length, o = r?.selectionEnd ?? a;
 			n.value = n.value.slice(0, a) + i + n.value.slice(o), t(), y(() => {
 				r?.focus(), r?.setSelectionRange(a + i.length, a + i.length);
@@ -7878,7 +7878,7 @@ var Vc = { render: Bc }, Hc = /* @__PURE__ */ p({
 		}, n = i(() => ({
 			...t,
 			...e.messages
-		})), r = R(e, "modelValue"), a = (e) => {
+		})), r = L(e, "modelValue"), a = (e) => {
 			let t = String(e ?? "").trim();
 			return t ? t.startsWith("-") ? t : `-${t}` : "";
 		}, l = i(() => `${e.reference.streetName} ${e.reference.houseNumber}${a(e.reference.houseNumberExt)}`), u = i(() => `${e.reference.postalCode} ${e.reference.city}`), p = i(() => e.reference.energyLabel ?? null), m = i(() => {
@@ -8460,7 +8460,7 @@ var Nu = { render: Mu }, Pu = { class: "flex items-center justify-end self-stret
 	}),
 	emits: ["update:modelValue"],
 	setup(t) {
-		let n = t, r = R(t, "modelValue"), l = z("containerRef"), u = O([]), f = O({
+		let n = t, r = L(t, "modelValue"), l = z("containerRef"), u = O([]), f = O({
 			width: "0px",
 			transform: "translateX(0px)"
 		}), p = O("inset(0 100% 0 0 round 9999px)"), m = O(!1), h = i(() => n.tabs.map((e) => typeof e == "string" ? { label: e } : e)), g = async () => {
@@ -8542,7 +8542,7 @@ var Nu = { render: Mu }, Pu = { class: "flex items-center justify-end self-stret
 	}),
 	emits: ["update:modelValue"],
 	setup(e) {
-		let t = e, r = R(e, "modelValue"), a = O("forward"), o = i(() => t.tabs.map((e) => typeof e == "string" ? e : e.label));
+		let t = e, r = L(e, "modelValue"), a = O("forward"), o = i(() => t.tabs.map((e) => typeof e == "string" ? e : e.label));
 		H(o, (e) => {
 			!r.value && e.length > 0 && (r.value = e[0]);
 		}, { immediate: !0 }), H(r, (e, t) => {
@@ -8637,7 +8637,7 @@ var Nu = { render: Mu }, Pu = { class: "flex items-center justify-end self-stret
 			"select",
 			"textarea",
 			"label"
-		], u = t, p = r, m = R(t, "modelValue"), h = R(t, "sortKey"), g = R(t, "sortDirection"), _ = z("rowRefs"), v = i(() => u.rows.length > 0 && m.value.length === u.rows.length), y = i(() => m.value.length > 0 && m.value.length < u.rows.length), x = (e) => m.value.includes(e), C = () => {
+		], u = t, p = r, m = L(t, "modelValue"), h = L(t, "sortKey"), g = L(t, "sortDirection"), _ = z("rowRefs"), v = i(() => u.rows.length > 0 && m.value.length === u.rows.length), y = i(() => m.value.length > 0 && m.value.length < u.rows.length), x = (e) => m.value.includes(e), C = () => {
 			u.selectionMode !== "single" && (m.value = v.value ? [] : [...u.rows]);
 		}, w = (e) => {
 			if (u.selectionMode === "single") {
@@ -8653,7 +8653,7 @@ var Nu = { render: Mu }, Pu = { class: "flex items-center justify-end self-stret
 			if (!u.selectable || !x(u.rows[e])) return "";
 			let t = e > 0 && x(u.rows[e - 1]), n = e < u.rows.length - 1 && x(u.rows[e + 1]);
 			return !t && !n ? "rounded-md" : t ? n ? "" : "rounded-b-md" : "rounded-t-md";
-		}, P = (e, t) => e[t], F = (e) => `cell-${e}`, I = (e, t) => {
+		}, P = (e, t) => e[t], F = (e) => `cell-${e}`, ee = (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) => (E(), s("div", od, [c("div", {
@@ -8703,7 +8703,7 @@ var Nu = { render: Mu }, Pu = { class: "flex items-center justify-end self-stret
 				"aria-selected": t.selectable ? x(n) : void 0,
 				tabindex: "0",
 				onClick: (e) => j(e, i),
-				onKeydown: (e) => I(e, i)
+				onKeydown: (e) => ee(e, i)
 			}, [t.selectable ? (E(), s("div", md, [f(ga, {
 				"model-value": x(n),
 				"aria-label": `Select row ${i + 1}`,
@@ -8897,7 +8897,7 @@ var Nu = { render: Mu }, Pu = { class: "flex items-center justify-end self-stret
 	}),
 	emits: ["update:modelValue"],
 	setup(e, { expose: t }) {
-		let n = "textarea-" + Math.random().toString(36).slice(2, 10), r = R(e, "modelValue"), a = F(), l = i(() => ({
+		let n = "textarea-" + Math.random().toString(36).slice(2, 10), r = L(e, "modelValue"), a = F(), l = i(() => ({
 			class: a.class,
 			style: a.style
 		})), u = i(() => {
@@ -9174,7 +9174,7 @@ var Nu = { render: Mu }, Pu = { class: "flex items-center justify-end self-stret
 	},
 	emits: ["dismiss"],
 	setup(e, { emit: t }) {
-		I((e) => ({ fa0d20de: uf }));
+		ee((e) => ({ fa0d20de: uf }));
 		let n = {
 			info: {
 				icon: "info",
@@ -9393,7 +9393,7 @@ var Nu = { render: Mu }, Pu = { class: "flex items-center justify-end self-stret
 	}),
 	emits: /*@__PURE__*/ _(["move"], ["update:selected", "update:collapsed"]),
 	setup(t, { expose: n, emit: l }) {
-		let u = t, d = ee(), p = l, m = R(t, "selected"), h = R(t, "collapsed"), g = z("root"), _ = O(null), v = i(() => {
+		let u = t, d = R(), p = l, m = L(t, "selected"), h = L(t, "collapsed"), g = z("root"), _ = O(null), v = i(() => {
 			let e = [], t = (n, r, i) => {
 				n.forEach((a, o) => {
 					let s = !!a.children?.length, c = a.canHaveChildren ?? !!a.children, l = s && !h.value.includes(a.id);
@@ -9413,7 +9413,7 @@ var Nu = { render: Mu }, Pu = { class: "flex items-center justify-end self-stret
 			return t(u.nodes, 0, null), e;
 		}), x = O(null), T = O(null), D = O(null), A = O(null), j = !1, N = i(() => v.value.find((e) => e.node.id === x.value)), P = (e) => {
 			_f(D.value, e) || (D.value = e);
-		}, F = (e) => e.classList.contains("absolute"), I = () => {
+		}, F = (e) => e.classList.contains("absolute"), ee = () => {
 			let e = g.value?.querySelector("[data-tree-id]")?.parentElement, t = Array.from(e?.children ?? []).filter((e) => e instanceof HTMLElement && !F(e)), n = [], r = null;
 			return t.forEach((e, i) => {
 				let a = e.offsetTop, o = t[i + 1], s = parseFloat(getComputedStyle(e).marginBottom) || 0, c = o ? o.offsetTop : a + e.offsetHeight + s;
@@ -9444,7 +9444,7 @@ var Nu = { render: Mu }, Pu = { class: "flex items-center justify-end self-stret
 				P(null);
 				return;
 			}
-			let r = mf(I(), t - g.value.getBoundingClientRect().top);
+			let r = mf(ee(), t - g.value.getBoundingClientRect().top);
 			if (r.kind === "keep") return;
 			let i = v.value.find((e) => e.node.id === r.id), a = i ? hf(i, r.ratio, n.node) : null;
 			P(a && !gf(a, n) && te(n, a) ? a : null);
@@ -9637,7 +9637,7 @@ var Nu = { render: Mu }, Pu = { class: "flex items-center justify-end self-stret
 		}, Le = i(() => {
 			let e = v.value.map((e) => e.node.id);
 			return _.value && e.includes(_.value) ? _.value : m.value && e.includes(m.value) ? m.value : e[0] ?? null;
-		}), Re = (e) => e === Le.value ? 0 : -1, ze = L(), Be = (e) => `${ze}-label-${encodeURIComponent(e)}`, Ve = (e) => d["node-actions"]?.(e), He = (e) => {
+		}), Re = (e) => e === Le.value ? 0 : -1, ze = I(), Be = (e) => `${ze}-label-${encodeURIComponent(e)}`, Ve = (e) => d["node-actions"]?.(e), He = (e) => {
 			h.value = h.value.includes(e) ? h.value.filter((t) => t !== e) : [...h.value, e];
 		}, Ue = (e) => {
 			He(e), g.value?.contains(document.activeElement) && We(e);
@@ -9847,33 +9847,33 @@ var Nu = { render: Mu }, Pu = { class: "flex items-center justify-end self-stret
 			return t > 0 ? `${t}:${String(n).padStart(2, "0")}:${String(r).padStart(2, "0")}` : `${n}:${String(r).padStart(2, "0")}`;
 		}, F = () => {
 			u.value = !u.value, k(u.value ? "play" : "pause");
-		}, I = () => {
+		}, ee = () => {
 			h.value = !h.value;
-		}, L = z("scrubberRef"), R = O(null), ee = !1, B = i(() => R.value === null ? m.value ? p.value / m.value * 100 : 0 : R.value * 100), V = i(() => R.value === null ? p.value : R.value * (m.value || 0));
+		}, I = z("scrubberRef"), L = O(null), R = !1, B = i(() => L.value === null ? m.value ? p.value / m.value * 100 : 0 : L.value * 100), V = i(() => L.value === null ? p.value : L.value * (m.value || 0));
 		H(g, (e) => {
-			!e && ee && (ee = !1, R.value = null);
+			!e && R && (R = !1, L.value = null);
 		});
 		let te = (e) => {
-			if (!L.value) return 0;
-			let t = L.value.getBoundingClientRect(), n = "touches" in e ? e.touches[0]?.clientX ?? 0 : e.clientX;
+			if (!I.value) return 0;
+			let t = I.value.getBoundingClientRect(), n = "touches" in e ? e.touches[0]?.clientX ?? 0 : e.clientX;
 			return Math.max(0, Math.min(1, (n - t.left) / t.width));
 		}, U = (e) => {
-			R.value = te(e);
+			L.value = te(e);
 		}, G = (e) => {
 			if (!m.value) return;
 			let t = Math.max(0, Math.min(m.value, p.value + e));
-			ee = !0, p.value = t;
+			R = !0, p.value = t;
 		}, K = (e) => {
 			e.key === "ArrowLeft" ? (e.preventDefault(), G(-5)) : e.key === "ArrowRight" ? (e.preventDefault(), G(5)) : e.key === "Home" ? (e.preventDefault(), G(-Infinity)) : e.key === "End" && (e.preventDefault(), G(Infinity));
 		}, ne = () => {
-			R.value !== null && m.value ? (ee = !0, p.value = R.value * m.value) : R.value = null;
+			L.value !== null && m.value ? (R = !0, p.value = L.value * m.value) : L.value = null;
 		};
 		return ie(document, "mousemove", (e) => {
-			R.value !== null && (R.value = te(e));
+			L.value !== null && (L.value = te(e));
 		}), ie(document, "mouseup", () => {
-			R.value !== null && ne();
+			L.value !== null && ne();
 		}), ie(document, "touchend", () => {
-			R.value !== null && ne();
+			L.value !== null && ne();
 		}), w(() => {
 			r.autoplay && (u.value = !0), r.muted && (h.value = !0);
 		}), t({
@@ -9921,7 +9921,7 @@ var Nu = { render: Mu }, Pu = { class: "flex items-center justify-end self-stret
 				style: S({ transform: x.value ? "translateY(0)" : "translateY(100%)" })
 			}, [c("div", {
 				ref_key: "scrubberRef",
-				ref: L,
+				ref: I,
 				role: "slider",
 				"aria-label": a.value.seek,
 				"aria-valuemin": 0,
@@ -9934,10 +9934,10 @@ var Nu = { render: Mu }, Pu = { class: "flex items-center justify-end self-stret
 				onTouchstart: q(U, ["prevent"]),
 				onKeydown: K,
 				onTouchmove: r[2] ||= q((e) => {
-					R.value !== null && (R.value = te(e));
+					L.value !== null && (L.value = te(e));
 				}, ["prevent"]),
 				onTouchend: r[3] ||= () => {
-					R.value !== null && ne();
+					L.value !== null && ne();
 				}
 			}, [
 				c("div", {
@@ -9969,7 +9969,7 @@ var Nu = { render: Mu }, Pu = { class: "flex items-center justify-end self-stret
 					type: "button",
 					"aria-label": P(h) ? a.value.unmute : a.value.mute,
 					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
+					onClick: ee
 				}, [f(Q, {
 					name: P(h) ? "volume-xmark" : "volume-high",
 					class: "text-sm",

package/dist/ui.css

@@ -1,2 +1,2 @@
-input[data-snap][data-v-5d3904ac]{animation:snap-in-5d3904ac .18s var(--ease-out-strong)}input[data-snap=up][data-v-5d3904ac]{--snap-from:2px}input[data-snap=down][data-v-5d3904ac]{--snap-from:-2px}@keyframes snap-in-5d3904ac{0%{opacity:0;transform:translateY(var(--snap-from))}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){input[data-snap][data-v-5d3904ac]{animation:1ms snap-hold-5d3904ac}@keyframes snap-hold-5d3904ac{0%,to{opacity:1}}}input[data-snap][data-v-17eb933b]{animation:snap-in-17eb933b .18s var(--ease-out-strong)}input[data-snap=up][data-v-17eb933b]{--snap-from:2px}input[data-snap=down][data-v-17eb933b]{--snap-from:-2px}@keyframes snap-in-17eb933b{0%{opacity:0;transform:translateY(var(--snap-from))}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){input[data-snap][data-v-17eb933b]{animation:1ms snap-hold-17eb933b}@keyframes snap-hold-17eb933b{0%,to{opacity:1}}}rect[data-v-0a5d9b21]{animation-duration:4s;animation-timing-function:cubic-bezier(.77,0,.175,1);animation-iteration-count:infinite}rect[data-v-0a5d9b21]:first-child{animation-name:load-1-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(2){animation-name:load-2-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(3){animation-name:load-3-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(4){animation-name:load-4-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(5){animation-name:load-5-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(6){animation-name:load-6-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(7){animation-name:load-7-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(8){animation-name:load-8-0a5d9b21}@media (prefers-reduced-motion:reduce){rect[data-v-0a5d9b21]{animation:none}svg[data-v-0a5d9b21]{animation:2.5s ease-in-out infinite pulse-0a5d9b21}}@keyframes pulse-0a5d9b21{0%,to{opacity:1}50%{opacity:.65}}@keyframes load-1-0a5d9b21{0%,80%{transform:translate(0)}5%,20%,60%,75%{transform:translate(-25px,25px)}30%,50%{transform:translate(-75px,75px)}}@keyframes load-2-0a5d9b21{5%,75%{transform:translate(0%)}10%,20%,60%,70%{transform:translate(50px)}30%,50%{transform:translateY(50px)}}@keyframes load-3-0a5d9b21{10%,70%{transform:translate(0%)}15%,65%{transform:translateY(-50px)}20%,60%{fill:var(--color-sapphire-500);transform:translateY(-50px)}30%,50%{fill:var(--color-purple-500);transform:translate(-50px)}}@keyframes load-4-0a5d9b21{20%,60%{transform:translate(0%)}30%,50%{transform:translate(50px,-50px)}}@keyframes load-5-0a5d9b21{0%,80%{transform:translate(0%)}5%,20%,60%,75%{transform:translateY(50px)}30%,50%{transform:translate(50px)}}@keyframes load-6-0a5d9b21{5%,75%{transform:translate(0%)}10%,20%,60%,70%{transform:translate(-50px)}30%,50%{transform:translateY(-50px)}}@keyframes load-7-0a5d9b21{10%,70%{transform:translate(0%)}15%,20%,60%,65%{transform:translate(50px)}30%,50%{transform:translate(100px,-50px)}}@keyframes load-8-0a5d9b21{15%,65%{transform:translate(0%)}20%,60%{transform:translateY(-50px)}30%,50%{transform:translate(50px,-100px)}}.timer-circle[data-v-7e3c5bda]{stroke-dashoffset:0;animation:linear forwards toast-timer-7e3c5bda}@keyframes toast-timer-7e3c5bda{to{stroke-dashoffset:var(--fa0d20de)}}
+input[data-snap][data-v-5d3904ac]{animation:snap-in-5d3904ac .18s var(--ease-out-strong)}input[data-snap=up][data-v-5d3904ac]{--snap-from:2px}input[data-snap=down][data-v-5d3904ac]{--snap-from:-2px}@keyframes snap-in-5d3904ac{0%{opacity:0;transform:translateY(var(--snap-from))}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){input[data-snap][data-v-5d3904ac]{animation:1ms snap-hold-5d3904ac}@keyframes snap-hold-5d3904ac{0%,to{opacity:1}}}input[data-snap][data-v-15feed8b]{animation:snap-in-15feed8b .18s var(--ease-out-strong)}input[data-snap=up][data-v-15feed8b]{--snap-from:2px}input[data-snap=down][data-v-15feed8b]{--snap-from:-2px}@keyframes snap-in-15feed8b{0%{opacity:0;transform:translateY(var(--snap-from))}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){input[data-snap][data-v-15feed8b]{animation:1ms snap-hold-15feed8b}@keyframes snap-hold-15feed8b{0%,to{opacity:1}}}rect[data-v-0a5d9b21]{animation-duration:4s;animation-timing-function:cubic-bezier(.77,0,.175,1);animation-iteration-count:infinite}rect[data-v-0a5d9b21]:first-child{animation-name:load-1-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(2){animation-name:load-2-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(3){animation-name:load-3-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(4){animation-name:load-4-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(5){animation-name:load-5-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(6){animation-name:load-6-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(7){animation-name:load-7-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(8){animation-name:load-8-0a5d9b21}@media (prefers-reduced-motion:reduce){rect[data-v-0a5d9b21]{animation:none}svg[data-v-0a5d9b21]{animation:2.5s ease-in-out infinite pulse-0a5d9b21}}@keyframes pulse-0a5d9b21{0%,to{opacity:1}50%{opacity:.65}}@keyframes load-1-0a5d9b21{0%,80%{transform:translate(0)}5%,20%,60%,75%{transform:translate(-25px,25px)}30%,50%{transform:translate(-75px,75px)}}@keyframes load-2-0a5d9b21{5%,75%{transform:translate(0%)}10%,20%,60%,70%{transform:translate(50px)}30%,50%{transform:translateY(50px)}}@keyframes load-3-0a5d9b21{10%,70%{transform:translate(0%)}15%,65%{transform:translateY(-50px)}20%,60%{fill:var(--color-sapphire-500);transform:translateY(-50px)}30%,50%{fill:var(--color-purple-500);transform:translate(-50px)}}@keyframes load-4-0a5d9b21{20%,60%{transform:translate(0%)}30%,50%{transform:translate(50px,-50px)}}@keyframes load-5-0a5d9b21{0%,80%{transform:translate(0%)}5%,20%,60%,75%{transform:translateY(50px)}30%,50%{transform:translate(50px)}}@keyframes load-6-0a5d9b21{5%,75%{transform:translate(0%)}10%,20%,60%,70%{transform:translate(-50px)}30%,50%{transform:translateY(-50px)}}@keyframes load-7-0a5d9b21{10%,70%{transform:translate(0%)}15%,20%,60%,65%{transform:translate(50px)}30%,50%{transform:translate(100px,-50px)}}@keyframes load-8-0a5d9b21{15%,65%{transform:translate(0%)}20%,60%{transform:translateY(-50px)}30%,50%{transform:translate(50px,-100px)}}.timer-circle[data-v-7e3c5bda]{stroke-dashoffset:0;animation:linear forwards toast-timer-7e3c5bda}@keyframes toast-timer-7e3c5bda{to{stroke-dashoffset:var(--fa0d20de)}}
 /*$vite$:1*/

package/package.json

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

package/src/components/editor/atoms/EditorDimensionField/EditorDimensionField.vue

@@ -97,7 +97,12 @@ const emit = defineEmits<{
   commit: []
 }>()
 
-/** The dimension, or `null` for none. */
+/**
+ * The dimension, or `null` for none. A `null` from outside -- another element
+ * selected, an undo -- resets the unit to the first of `units`; a field the
+ * user emptied keeps the unit picked in it. A value from outside brings its
+ * own unit.
+ */
 const model = defineModel<EditorDimensionValue | null>({ default: null })
 
 const copy = computed(() => ({ ...DEFAULT_MESSAGES, ...messages }))
@@ -109,10 +114,20 @@ const copy = computed(() => ({ ...DEFAULT_MESSAGES, ...messages }))
  */
 const unit = ref<EditorDimensionUnit>(model.value?.unit ?? units[0])
 
+/**
+ * Set while the field's own `null` is on its way through the model. Without
+ * it, the user emptying the field could not be told apart from a `null` from
+ * outside, and only the latter resets the unit.
+ */
+let emptiedHere = false
+
 watch(
-  () => model.value?.unit,
+  () => model.value,
   (next) => {
-    if (next) unit.value = next
+    if (next) unit.value = next.unit
+    else if (!emptiedHere) unit.value = units[0]
+
+    emptiedHere = false
   },
 )
 
@@ -183,6 +198,7 @@ const write = (next: EditorDimensionValue | null) => {
   )
     return false
 
+  emptiedHere = next === null
   model.value = next
   return true
 }

package/src/components/editor/molecules/EditorMaxWidth/EditorMaxWidth.vue

@@ -37,6 +37,12 @@ export interface EditorMaxWidthMessages {
   unit?: string
 }
 
+/**
+ * Sets a width on Tailwind's `max-w-*` steps, stored as the class.
+ *
+ * @deprecated Use `NexxtEditorSizeLimit`: a free maximum in px or % that can
+ * be none.
+ */
 export interface NexxtEditorMaxWidthProps {
   /**
    * Header text of the settings block. Defaults to the Dutch

package/src/components/editor/molecules/EditorSize/EditorSize.vue

@@ -21,7 +21,9 @@ export interface EditorSizeValue {
   mode: EditorSizeMode
   /**
    * The fixed dimension. Kept when another mode is picked, so switching back
-   * to `'fixed'` restores it; it only applies while `mode` is `'fixed'`.
+   * to `'fixed'` restores it; it only applies while `mode` is `'fixed'`. The
+   * app always fills it with the measured size of the element, so picking
+   * `'fixed'` starts from that size.
    */
   fixed?: EditorDimensionValue
 }
@@ -119,9 +121,10 @@ const emit = defineEmits<{
 }>()
 
 /**
- * The size. Picking `'fixed'` without a `fixed` dimension leaves the field
- * empty until a value is entered; seed `fixed` -- with the measured size, say
- * -- to start from there instead.
+ * The size. Fill `fixed` with the measured size of the element, as the app
+ * always does. Without it, picking `'fixed'` writes `{ mode: 'fixed' }` and
+ * commits straight away, leaving a fixed mode without a size until a value is
+ * typed; with the measured size, that state does not come up.
  */
 const model = defineModel<EditorSizeValue>({ required: true })
 

package/src/components/editor/molecules/EditorSizeLimit/EditorSizeLimit.vue

@@ -7,6 +7,11 @@ import type {
 /** Overridable copy of the field. Every key is optional. */
 export type EditorSizeLimitMessages = EditorDimensionFieldMessages
 
+/**
+ * A free minimum or maximum of an element's size, in px or %, that can be
+ * none. Replaces the deprecated `NexxtEditorMaxWidth`, which offers only
+ * Tailwind's `max-w-*` steps.
+ */
 export interface NexxtEditorSizeLimitProps {
   /** Visible label above the field, and its accessible name, as in `'Maximale breedte'`. */
   label: string