@utrecht/component-library-vue 2.0.0 → 2.2.0

package/dist/component-library-vue.mjs

@@ -1,4 +1,4 @@
-import { defineComponent as d, ref as k, openBlock as s, createElementBlock as r, normalizeClass as p, toDisplayString as b, createCommentVNode as U, createElementVNode as m, renderSlot as c, getCurrentInstance as g, resolveComponent as q, mergeProps as u, createVNode as S, withCtx as B, computed as C, createTextVNode as h, withDirectives as y, vModelCheckbox as F, vModelRadio as D, Fragment as H, renderList as T, vModelSelect as N, vModelText as L } from "vue";
+import { defineComponent as d, ref as k, openBlock as s, createElementBlock as r, normalizeClass as p, toDisplayString as b, createCommentVNode as U, createElementVNode as m, renderSlot as c, getCurrentInstance as g, resolveComponent as q, mergeProps as u, createVNode as S, withCtx as B, computed as x, createTextVNode as h, withDirectives as y, vModelCheckbox as F, vModelRadio as D, Fragment as H, renderList as N, vModelSelect as T, vModelText as L } from "vue";
 const I = d({
   name: "UtrechtAlertDialog",
   props: {
@@ -39,7 +39,7 @@ function P(e, t, n, a, o, l) {
     ])
   ], 2);
 }
-const ar = /* @__PURE__ */ i(I, [["render", P]]), M = d({
+const ir = /* @__PURE__ */ i(I, [["render", P]]), M = d({
   name: "UtrechtArticle"
 });
 const R = { class: "utrecht-article" };
@@ -48,28 +48,28 @@ function A(e, t, n, a, o, l) {
     c(e.$slots, "default")
   ]);
 }
-const or = /* @__PURE__ */ i(M, [["render", A]]), E = d({
+const lr = /* @__PURE__ */ i(M, [["render", A]]), E = d({
   name: "UtrechtBadgeCounter",
   props: {
     value: { type: [Number, String], required: !1, default: void 0 }
   }
 });
-const O = ["value"], j = {
+const O = ["value"], G = {
   key: 1,
   class: "utrecht-badge-counter"
 };
-function z(e, t, n, a, o, l) {
+function j(e, t, n, a, o, l) {
   return typeof e.value < "u" ? (s(), r("data", {
     key: 0,
     class: "utrecht-badge-counter",
     value: e.value ? String(e.value) : void 0
   }, [
     c(e.$slots, "default")
-  ], 8, O)) : (s(), r("span", j, [
+  ], 8, O)) : (s(), r("span", G, [
     c(e.$slots, "default")
   ]));
 }
-const cr = /* @__PURE__ */ i(E, [["render", z]]), G = d({
+const _r = /* @__PURE__ */ i(E, [["render", j]]), z = d({
   name: "UtrechtBadgeStatus",
   props: {
     status: { type: String, required: !1, default: void 0 }
@@ -82,7 +82,7 @@ function K(e, t, n, a, o, l) {
     c(e.$slots, "default")
   ], 2);
 }
-const dr = /* @__PURE__ */ i(G, [["render", K]]), J = d({
+const ur = /* @__PURE__ */ i(z, [["render", K]]), J = d({
   name: "UtrechtLink",
   props: {
     external: { type: Boolean, required: !1, default: !1 }
@@ -97,7 +97,7 @@ function Q(e, t, n, a, o, l) {
     c(e.$slots, "default")
   ], 10, W);
 }
-const X = /* @__PURE__ */ i(J, [["render", Q]]), x = ({
+const X = /* @__PURE__ */ i(J, [["render", Q]]), C = ({
   prop: e,
   type: t
 }) => ({
@@ -115,7 +115,7 @@ const X = /* @__PURE__ */ i(J, [["render", Q]]), x = ({
     rel: { type: String, required: !1, default: "" },
     index: { type: Number, required: !1, default: void 0 }
   },
-  methods: { ref: k, useMicrodataProp: Y, useMicrodataItem: x, getCurrentInstance: g }
+  methods: { ref: k, useMicrodataProp: Y, useMicrodataItem: C, getCurrentInstance: g }
 });
 const ee = ["content"];
 function te(e, t, n, a, o, l) {
@@ -140,7 +140,7 @@ function te(e, t, n, a, o, l) {
     }, 16, ["aria-current", "href", "rel"])
   ], 16);
 }
-const ir = /* @__PURE__ */ i(Z, [["render", te]]), se = d({
+const pr = /* @__PURE__ */ i(Z, [["render", te]]), se = d({
   name: "UtrechtHeading",
   props: {
     level: { type: Number, required: !0, default: 6 }
@@ -182,7 +182,7 @@ function ie(e, t, n, a, o, l) {
 }
 const le = /* @__PURE__ */ i(se, [["render", ie], ["__scopeId", "data-v-55458c65"]]);
 function $(e, t, n = "modelValue") {
-  return C({
+  return x({
     get: () => e.modelValue,
     set: (a) => t(`update:${n}`, a)
   });
@@ -206,7 +206,7 @@ const _e = d({
       headingId: this.$props.label ? String((e = g()) == null ? void 0 : e.uid) : void 0
     };
   },
-  methods: { useMicrodataItem: x, getCurrentInstance: g }
+  methods: { useMicrodataItem: C, getCurrentInstance: g }
 }), ue = ["aria-labelledby"];
 function pe(e, t, n, a, o, l) {
   const _ = q("UtrechtHeading");
@@ -230,7 +230,7 @@ function pe(e, t, n, a, o, l) {
     ], 16)
   ], 10, ue);
 }
-const lr = /* @__PURE__ */ i(_e, [["render", pe]]), $e = d({
+const $r = /* @__PURE__ */ i(_e, [["render", pe]]), $e = d({
   name: "UtrechtButton",
   props: {
     appearance: { type: String, required: !1, default: void 0 },
@@ -258,7 +258,7 @@ function he(e, t, n, a, o, l) {
     c(e.$slots, "default")
   ], 10, fe);
 }
-const _r = /* @__PURE__ */ i($e, [["render", he]]), me = d({
+const fr = /* @__PURE__ */ i($e, [["render", he]]), me = d({
   name: "UtrechtButtonGroup"
 });
 const ye = { class: "utrecht-button-group" };
@@ -267,7 +267,7 @@ function ve(e, t, n, a, o, l) {
     c(e.$slots, "default")
   ]);
 }
-const ur = /* @__PURE__ */ i(me, [["render", ve]]), ge = d({
+const hr = /* @__PURE__ */ i(me, [["render", ve]]), ge = d({
   name: "UtrechtCheckbox",
   props: {
     appearance: { type: String, required: !1, default: "custom" },
@@ -296,7 +296,7 @@ function Ue(e, t, n, a, o, l) {
     [F, e.value]
   ]);
 }
-const pr = /* @__PURE__ */ i(ge, [["render", Ue]]), ke = d({
+const mr = /* @__PURE__ */ i(ge, [["render", Ue]]), ke = d({
   name: "UtrechtCode"
 });
 const qe = { class: "utrecht-code" };
@@ -305,14 +305,14 @@ function Se(e, t, n, a, o, l) {
     c(e.$slots, "default")
   ]);
 }
-const $r = /* @__PURE__ */ i(ke, [["render", Se]]), Be = d({
+const yr = /* @__PURE__ */ i(ke, [["render", Se]]), Be = d({
   name: "UtrechtCodeBlock"
 });
-const Le = { class: "utrecht-code-block" }, xe = { class: "utrecht-code-block__content" };
-function Ce(e, t, n, a, o, l) {
+const Le = { class: "utrecht-code-block" }, Ce = { class: "utrecht-code-block__content" };
+function xe(e, t, n, a, o, l) {
   return s(), r("pre", Le, [
     h("      "),
-    m("code", xe, [
+    m("code", Ce, [
       h(`
           `),
       c(e.$slots, "default"),
@@ -323,7 +323,7 @@ function Ce(e, t, n, a, o, l) {
   `)
   ]);
 }
-const fr = /* @__PURE__ */ i(Be, [["render", Ce]]), Fe = d({
+const vr = /* @__PURE__ */ i(Be, [["render", xe]]), Fe = d({
   name: "UtrechtDataList",
   props: {
     appearance: { type: String, required: !1, default: "rows" }
@@ -336,15 +336,15 @@ function De(e, t, n, a, o, l) {
     c(e.$slots, "default")
   ], 2);
 }
-const hr = /* @__PURE__ */ i(Fe, [["render", De]]), He = d({
+const gr = /* @__PURE__ */ i(Fe, [["render", De]]), He = d({
   name: "UtrechtDataListActions"
-}), Te = { class: "utrecht-data-list__actions utrecht-data-list__actions--html-dd" };
-function Ne(e, t, n, a, o, l) {
-  return s(), r("dd", Te, [
+}), Ne = { class: "utrecht-data-list__actions utrecht-data-list__actions--html-dd" };
+function Te(e, t, n, a, o, l) {
+  return s(), r("dd", Ne, [
     c(e.$slots, "default")
   ]);
 }
-const mr = /* @__PURE__ */ i(He, [["render", Ne]]), Ie = d({
+const br = /* @__PURE__ */ i(He, [["render", Te]]), Ie = d({
   name: "UtrechtDataListItem"
 }), we = { class: "utrecht-data-list__item" };
 function Ve(e, t, n, a, o, l) {
@@ -352,7 +352,7 @@ function Ve(e, t, n, a, o, l) {
     c(e.$slots, "default")
   ]);
 }
-const yr = /* @__PURE__ */ i(Ie, [["render", Ve]]), Pe = d({
+const Ur = /* @__PURE__ */ i(Ie, [["render", Ve]]), Pe = d({
   name: "UtrechtDataListKey"
 }), Me = { class: "utrecht-data-list__item-key" };
 function Re(e, t, n, a, o, l) {
@@ -360,7 +360,7 @@ function Re(e, t, n, a, o, l) {
     c(e.$slots, "default")
   ]);
 }
-const vr = /* @__PURE__ */ i(Pe, [["render", Re]]), Ae = d({
+const kr = /* @__PURE__ */ i(Pe, [["render", Re]]), Ae = d({
   name: "UtrechtDataListValue",
   props: {
     value: { type: [Number, String], required: !1, default: "" },
@@ -374,7 +374,7 @@ const vr = /* @__PURE__ */ i(Pe, [["render", Re]]), Ae = d({
     };
   }
 }), Ee = ["translate"], Oe = ["aria-label"];
-function je(e, t, n, a, o, l) {
+function Ge(e, t, n, a, o, l) {
   return s(), r("dd", {
     class: p(["utrecht-data-list__item-value utrecht-data-list__item-value--html-dd", { "utrecht-data-list__item-value--multiline": e.multiline }]),
     translate: typeof e.notranslate == "boolean" ? e.notranslate ? "no" : "yes" : void 0
@@ -385,16 +385,16 @@ function je(e, t, n, a, o, l) {
     }, "-", 8, Oe)) : c(e.$slots, "default", { key: 1 })
   ], 10, Ee);
 }
-const gr = /* @__PURE__ */ i(Ae, [["render", je]]), ze = d({
+const qr = /* @__PURE__ */ i(Ae, [["render", Ge]]), je = d({
   name: "UtrechtDocument"
 });
-const Ge = { class: "utrecht-document" };
+const ze = { class: "utrecht-document" };
 function Ke(e, t, n, a, o, l) {
-  return s(), r("div", Ge, [
+  return s(), r("div", ze, [
     c(e.$slots, "default")
   ]);
 }
-const br = /* @__PURE__ */ i(ze, [["render", Ke]]), Je = d({
+const Sr = /* @__PURE__ */ i(je, [["render", Ke]]), Je = d({
   name: "UtrechtEmphasis"
 });
 function We(e, t, n, a, o, l) {
@@ -402,7 +402,7 @@ function We(e, t, n, a, o, l) {
     c(e.$slots, "default")
   ], 16);
 }
-const Ur = /* @__PURE__ */ i(Je, [["render", We]]), Qe = d({
+const Br = /* @__PURE__ */ i(Je, [["render", We]]), Qe = d({
   name: "UtrechtFigure"
 });
 function Xe(e, t, n, a, o, l) {
@@ -410,7 +410,7 @@ function Xe(e, t, n, a, o, l) {
     c(e.$slots, "default")
   ], 16);
 }
-const kr = /* @__PURE__ */ i(Qe, [["render", Xe]]), Ye = d({
+const Lr = /* @__PURE__ */ i(Qe, [["render", Xe]]), Ye = d({
   name: "UtrechtFigureCaption"
 });
 function Ze(e, t, n, a, o, l) {
@@ -418,7 +418,7 @@ function Ze(e, t, n, a, o, l) {
     c(e.$slots, "default")
   ], 16);
 }
-const qr = /* @__PURE__ */ i(Ye, [["render", Ze]]), et = d({
+const Cr = /* @__PURE__ */ i(Ye, [["render", Ze]]), et = d({
   name: "UtrechtFormField",
   props: {
     invalid: { type: Boolean, required: !1, default: !1 },
@@ -438,7 +438,7 @@ function tt(e, t, n, a, o, l) {
     c(e.$slots, "default")
   ], 2);
 }
-const Sr = /* @__PURE__ */ i(et, [["render", tt]]), st = d({
+const xr = /* @__PURE__ */ i(et, [["render", tt]]), st = d({
   name: "UtrechtFormFieldset",
   props: {
     describedby: {
@@ -501,7 +501,7 @@ function at(e, t, n, a, o, l) {
     ], 8, nt)
   ]);
 }
-const Br = /* @__PURE__ */ i(st, [["render", at]]), ot = d({
+const Fr = /* @__PURE__ */ i(st, [["render", at]]), ot = d({
   name: "UtrechtFormFieldsetLegend"
 }), ct = { class: "utrecht-form-fieldset__legend" };
 function dt(e, t, n, a, o, l) {
@@ -509,7 +509,7 @@ function dt(e, t, n, a, o, l) {
     c(e.$slots, "default")
   ]);
 }
-const Lr = /* @__PURE__ */ i(ot, [["render", dt]]), it = d({
+const Dr = /* @__PURE__ */ i(ot, [["render", dt]]), it = d({
   name: "UtrechtFormLabel",
   props: {
     checked: { type: Boolean, required: !1, default: !1 },
@@ -529,7 +529,7 @@ function lt(e, t, n, a, o, l) {
     c(e.$slots, "default")
   ], 2);
 }
-const xr = /* @__PURE__ */ i(it, [["render", lt]]), _t = d({
+const Hr = /* @__PURE__ */ i(it, [["render", lt]]), _t = d({
   name: "UtrechtHeading1"
 });
 const ut = { class: "utrecht-heading-1" };
@@ -538,7 +538,7 @@ function pt(e, t, n, a, o, l) {
     c(e.$slots, "default")
   ]);
 }
-const Cr = /* @__PURE__ */ i(_t, [["render", pt]]), $t = d({
+const Nr = /* @__PURE__ */ i(_t, [["render", pt]]), $t = d({
   name: "UtrechtHeading2"
 });
 const ft = { class: "utrecht-heading-2" };
@@ -547,7 +547,7 @@ function ht(e, t, n, a, o, l) {
     c(e.$slots, "default")
   ]);
 }
-const Fr = /* @__PURE__ */ i($t, [["render", ht]]), mt = d({
+const Tr = /* @__PURE__ */ i($t, [["render", ht]]), mt = d({
   name: "UtrechtHeading3"
 });
 const yt = { class: "utrecht-heading-3" };
@@ -556,7 +556,7 @@ function vt(e, t, n, a, o, l) {
     c(e.$slots, "default")
   ]);
 }
-const Dr = /* @__PURE__ */ i(mt, [["render", vt]]), gt = d({
+const Ir = /* @__PURE__ */ i(mt, [["render", vt]]), gt = d({
   name: "UtrechtHeading4"
 });
 const bt = { class: "utrecht-heading-4" };
@@ -565,7 +565,7 @@ function Ut(e, t, n, a, o, l) {
     c(e.$slots, "default")
   ]);
 }
-const Hr = /* @__PURE__ */ i(gt, [["render", Ut]]), kt = d({
+const wr = /* @__PURE__ */ i(gt, [["render", Ut]]), kt = d({
   name: "UtrechtHeading5"
 });
 const qt = { class: "utrecht-heading-5" };
@@ -574,16 +574,16 @@ function St(e, t, n, a, o, l) {
     c(e.$slots, "default")
   ]);
 }
-const Tr = /* @__PURE__ */ i(kt, [["render", St]]), Bt = d({
+const Vr = /* @__PURE__ */ i(kt, [["render", St]]), Bt = d({
   name: "UtrechtHeading6"
 });
 const Lt = { class: "utrecht-heading-6" };
-function xt(e, t, n, a, o, l) {
+function Ct(e, t, n, a, o, l) {
   return s(), r("h6", Lt, [
     c(e.$slots, "default")
   ]);
 }
-const Nr = /* @__PURE__ */ i(Bt, [["render", xt]]), Ct = d({
+const Pr = /* @__PURE__ */ i(Bt, [["render", Ct]]), xt = d({
   name: "UtrechtImage",
   props: {
     photo: {
@@ -603,7 +603,7 @@ function Dt(e, t, n, a, o, l) {
     width: (f = e.$attrs) == null ? void 0 : f.width
   }), null, 16, Ft);
 }
-const Ir = /* @__PURE__ */ i(Ct, [["render", Dt]]), Ht = d({
+const Mr = /* @__PURE__ */ i(xt, [["render", Dt]]), Ht = d({
   name: "UtrechtLinkSocial",
   props: {
     external: {
@@ -613,15 +613,15 @@ const Ir = /* @__PURE__ */ i(Ct, [["render", Dt]]), Ht = d({
     }
   }
 });
-const Tt = ["rel"];
-function Nt(e, t, n, a, o, l) {
+const Nt = ["rel"];
+function Tt(e, t, n, a, o, l) {
   return s(), r("a", u({ class: "utrecht-link-social" }, e.$attrs, {
     rel: e.external !== !1 ? "external noopener noreferrer" : void 0
   }), [
     c(e.$slots, "default")
-  ], 16, Tt);
+  ], 16, Nt);
 }
-const wr = /* @__PURE__ */ i(Ht, [["render", Nt]]), It = d({
+const Rr = /* @__PURE__ */ i(Ht, [["render", Tt]]), It = d({
   name: "UtrechtListSocial",
   props: {
     external: {
@@ -636,7 +636,7 @@ function wt(e, t, n, a, o, l) {
     c(e.$slots, "default")
   ], 16);
 }
-const Vr = /* @__PURE__ */ i(It, [["render", wt]]), Vt = d({
+const Ar = /* @__PURE__ */ i(It, [["render", wt]]), Vt = d({
   name: "UtrechtListSocialItem"
 });
 function Pt(e, t, n, a, o, l) {
@@ -644,7 +644,7 @@ function Pt(e, t, n, a, o, l) {
     c(e.$slots, "default")
   ], 16);
 }
-const Pr = /* @__PURE__ */ i(Vt, [["render", Pt]]), Mt = d({
+const Er = /* @__PURE__ */ i(Vt, [["render", Pt]]), Mt = d({
   name: "UtrechtOrderedList"
 });
 function Rt(e, t, n, a, o, l) {
@@ -652,7 +652,7 @@ function Rt(e, t, n, a, o, l) {
     c(e.$slots, "default")
   ], 16);
 }
-const Mr = /* @__PURE__ */ i(Mt, [["render", Rt]]), At = d({
+const Or = /* @__PURE__ */ i(Mt, [["render", Rt]]), At = d({
   name: "UtrechtOrderedListItem"
 });
 function Et(e, t, n, a, o, l) {
@@ -660,78 +660,99 @@ function Et(e, t, n, a, o, l) {
     c(e.$slots, "default")
   ], 16);
 }
-const Rr = /* @__PURE__ */ i(At, [["render", Et]]), Ot = d({
-  name: "UtrechtNumberData",
+const Gr = /* @__PURE__ */ i(At, [["render", Et]]), Ot = d({
+  name: "UtrechtNumberBadge",
   props: {
     value: { type: [Number, String], required: !1, default: void 0 }
   }
 });
-const jt = ["value"];
+const Gt = ["value"], jt = {
+  key: 1,
+  class: "utrecht-number-badge"
+};
 function zt(e, t, n, a, o, l) {
+  return typeof e.value < "u" ? (s(), r("data", {
+    key: 0,
+    class: "utrecht-number-badge",
+    value: e.value ? String(e.value) : void 0
+  }, [
+    c(e.$slots, "default")
+  ], 8, Gt)) : (s(), r("span", jt, [
+    c(e.$slots, "default")
+  ]));
+}
+const jr = /* @__PURE__ */ i(Ot, [["render", zt]]), Kt = d({
+  name: "UtrechtNumberData",
+  props: {
+    value: { type: [Number, String], required: !1, default: void 0 }
+  }
+});
+const Jt = ["value"];
+function Wt(e, t, n, a, o, l) {
   return s(), r("data", {
     value: typeof e.value == "string" || typeof e.value == "number" ? String(e.value) : void 0,
     class: "utrecht-number-data"
   }, [
     c(e.$slots, "default")
-  ], 8, jt);
+  ], 8, Jt);
 }
-const Ar = /* @__PURE__ */ i(Ot, [["render", zt]]), Gt = d({
+const zr = /* @__PURE__ */ i(Kt, [["render", Wt]]), Qt = d({
   name: "UtrechtPage"
 });
-const Kt = { class: "utrecht-page" };
-function Jt(e, t, n, a, o, l) {
-  return s(), r("div", Kt, [
+const Xt = { class: "utrecht-page" };
+function Yt(e, t, n, a, o, l) {
+  return s(), r("div", Xt, [
     c(e.$slots, "default")
   ]);
 }
-const Er = /* @__PURE__ */ i(Gt, [["render", Jt]]), Wt = d({
+const Kr = /* @__PURE__ */ i(Qt, [["render", Yt]]), Zt = d({
   name: "UtrechtPageContent"
 });
-const Qt = { class: "utrecht-page-content" };
-function Xt(e, t, n, a, o, l) {
-  return s(), r("div", Qt, [
+const es = { class: "utrecht-page-content" };
+function ts(e, t, n, a, o, l) {
+  return s(), r("div", es, [
     c(e.$slots, "default")
   ]);
 }
-const Or = /* @__PURE__ */ i(Wt, [["render", Xt]]), Yt = d({
+const Jr = /* @__PURE__ */ i(Zt, [["render", ts]]), ss = d({
   name: "UtrechtPageFooter"
 });
-const Zt = { class: "utrecht-page-footer" };
-function es(e, t, n, a, o, l) {
-  return s(), r("footer", Zt, [
+const rs = { class: "utrecht-page-footer" };
+function ns(e, t, n, a, o, l) {
+  return s(), r("footer", rs, [
     c(e.$slots, "default")
   ]);
 }
-const jr = /* @__PURE__ */ i(Yt, [["render", es]]), ts = d({
+const Wr = /* @__PURE__ */ i(ss, [["render", ns]]), as = d({
   name: "UtrechtPageHeader"
 });
-const ss = { class: "utrecht-page-header" };
-function rs(e, t, n, a, o, l) {
-  return s(), r("header", ss, [
+const os = { class: "utrecht-page-header" };
+function cs(e, t, n, a, o, l) {
+  return s(), r("header", os, [
     c(e.$slots, "default")
   ]);
 }
-const zr = /* @__PURE__ */ i(ts, [["render", rs]]), ns = d({
+const Qr = /* @__PURE__ */ i(as, [["render", cs]]), ds = d({
   name: "UtrechtParagraph",
   props: {
     lead: { type: Boolean, required: !1, default: !1 },
     small: { type: Boolean, required: !1, default: !1 }
   }
 });
-const as = {
+const is = {
   key: 0,
   class: "utrecht-paragraph__small"
 };
-function os(e, t, n, a, o, l) {
+function ls(e, t, n, a, o, l) {
   return s(), r("p", {
     class: p(["utrecht-paragraph", { "utrecht-paragraph--lead": e.lead, "utrecht-paragraph--small": e.small }])
   }, [
-    e.small ? (s(), r("small", as, [
+    e.small ? (s(), r("small", is, [
       c(e.$slots, "default")
     ])) : c(e.$slots, "default", { key: 1 })
   ], 2);
 }
-const Gr = /* @__PURE__ */ i(ns, [["render", os]]), cs = d({
+const Xr = /* @__PURE__ */ i(ds, [["render", ls]]), _s = d({
   name: "UtrechtRadioButton",
   props: {
     invalid: { type: Boolean, required: !1 },
@@ -743,18 +764,18 @@ const Gr = /* @__PURE__ */ i(ns, [["render", os]]), cs = d({
     };
   }
 });
-const ds = ["aria-invalid"];
-function is(e, t, n, a, o, l) {
+const us = ["aria-invalid"];
+function ps(e, t, n, a, o, l) {
   return y((s(), r("input", {
     "onUpdate:modelValue": t[0] || (t[0] = (_) => e.value = _),
     type: "radio",
     "aria-invalid": e.invalid || void 0,
     class: p(["utrecht-radio-button", "utrecht-radio-button--html-input", { "utrecht-radio-button--invalid": e.invalid }])
-  }, null, 10, ds)), [
+  }, null, 10, us)), [
     [D, e.value]
   ]);
 }
-const Kr = /* @__PURE__ */ i(cs, [["render", is]]), ls = d({
+const Yr = /* @__PURE__ */ i(_s, [["render", ps]]), $s = d({
   name: "UtrechtSelect",
   props: {
     invalid: { type: Boolean, required: !1 },
@@ -768,8 +789,8 @@ const Kr = /* @__PURE__ */ i(cs, [["render", is]]), ls = d({
     };
   }
 });
-const _s = ["aria-invalid", "readonly"], us = ["value", "disabled"];
-function ps(e, t, n, a, o, l) {
+const fs = ["aria-invalid", "readonly"], hs = ["value", "disabled"];
+function ms(e, t, n, a, o, l) {
   return y((s(), r("select", {
     "onUpdate:modelValue": t[0] || (t[0] = (_) => e.selected = _),
     "aria-invalid": e.invalid || void 0,
@@ -781,23 +802,23 @@ function ps(e, t, n, a, o, l) {
     ]),
     readonly: e.readonly
   }, [
-    e.options && e.options.length > 0 ? (s(!0), r(H, { key: 0 }, T(e.options, ({ value: _, label: v, disabled: f }) => (s(), r("option", {
+    e.options && e.options.length > 0 ? (s(!0), r(H, { key: 0 }, N(e.options, ({ value: _, label: v, disabled: f }) => (s(), r("option", {
       key: _,
       value: _,
       class: p([{ "utrecht-select__option--disabled": f }, "utrecht-select__option"]),
       disabled: f
-    }, b(v), 11, us))), 128)) : U("", !0)
-  ], 10, _s)), [
-    [N, e.selected]
+    }, b(v), 11, hs))), 128)) : U("", !0)
+  ], 10, fs)), [
+    [T, e.selected]
   ]);
 }
-const Jr = /* @__PURE__ */ i(ls, [["render", ps]]), $s = d({
+const Zr = /* @__PURE__ */ i($s, [["render", ms]]), ys = d({
   name: "UtrechtSeparator"
 });
-function fs(e, t, n, a, o, l) {
+function vs(e, t, n, a, o, l) {
   return s(), r("hr", u({ class: "utrecht-separator" }, e.$attrs), null, 16);
 }
-const Wr = /* @__PURE__ */ i($s, [["render", fs]]), hs = d({
+const en = /* @__PURE__ */ i(ys, [["render", vs]]), gs = d({
   name: "UtrechtSkipLink",
   props: {
     href: {
@@ -807,89 +828,89 @@ const Wr = /* @__PURE__ */ i($s, [["render", fs]]), hs = d({
     }
   }
 });
-const ms = ["href"];
-function ys(e, t, n, a, o, l) {
+const bs = ["href"];
+function Us(e, t, n, a, o, l) {
   return s(), r("a", u(e.$attrs, {
     href: e.$props.href,
     class: "utrecht-skip-link utrecht-skip-link--visible-on-focus"
   }), [
     c(e.$slots, "default")
-  ], 16, ms);
+  ], 16, bs);
 }
-const Qr = /* @__PURE__ */ i(hs, [["render", ys]]), vs = d({
+const tn = /* @__PURE__ */ i(gs, [["render", Us]]), ks = d({
   name: "UtrechtStrong"
 });
-function gs(e, t, n, a, o, l) {
+function qs(e, t, n, a, o, l) {
   return s(), r("strong", u(e.$attrs, { class: "utrecht-emphasis utrecht-emphasis--strong" }), [
     c(e.$slots, "default")
   ], 16);
 }
-const Xr = /* @__PURE__ */ i(vs, [["render", gs]]), bs = d({
+const sn = /* @__PURE__ */ i(ks, [["render", qs]]), Ss = d({
   name: "UtrechtTable"
 });
-const Us = { class: "utrecht-table" };
-function ks(e, t, n, a, o, l) {
-  return s(), r("table", Us, [
+const Bs = { class: "utrecht-table" };
+function Ls(e, t, n, a, o, l) {
+  return s(), r("table", Bs, [
     c(e.$slots, "default")
   ]);
 }
-const Yr = /* @__PURE__ */ i(bs, [["render", ks]]), qs = d({
+const rn = /* @__PURE__ */ i(Ss, [["render", Ls]]), Cs = d({
   name: "UtrechtTableBody"
-}), Ss = { class: "utrecht-table__body" };
-function Bs(e, t, n, a, o, l) {
-  return s(), r("tbody", Ss, [
+}), xs = { class: "utrecht-table__body" };
+function Fs(e, t, n, a, o, l) {
+  return s(), r("tbody", xs, [
     c(e.$slots, "default")
   ]);
 }
-const Zr = /* @__PURE__ */ i(qs, [["render", Bs]]), Ls = d({
+const nn = /* @__PURE__ */ i(Cs, [["render", Fs]]), Ds = d({
   name: "UtrechtTableCaption"
-}), xs = { class: "utrecht-table__caption" };
-function Cs(e, t, n, a, o, l) {
-  return s(), r("caption", xs, [
+}), Hs = { class: "utrecht-table__caption" };
+function Ns(e, t, n, a, o, l) {
+  return s(), r("caption", Hs, [
     c(e.$slots, "default")
   ]);
 }
-const en = /* @__PURE__ */ i(Ls, [["render", Cs]]), Fs = d({
+const an = /* @__PURE__ */ i(Ds, [["render", Ns]]), Ts = d({
   name: "UtrechtTableCell"
-}), Ds = { class: "utrecht-table__cell" };
-function Hs(e, t, n, a, o, l) {
-  return s(), r("td", Ds, [
+}), Is = { class: "utrecht-table__cell" };
+function ws(e, t, n, a, o, l) {
+  return s(), r("td", Is, [
     c(e.$slots, "default")
   ]);
 }
-const tn = /* @__PURE__ */ i(Fs, [["render", Hs]]), Ts = d({
+const on = /* @__PURE__ */ i(Ts, [["render", ws]]), Vs = d({
   name: "UtrechtTableFooter"
-}), Ns = { class: "utrecht-table__footer" };
-function Is(e, t, n, a, o, l) {
-  return s(), r("tfoot", Ns, [
+}), Ps = { class: "utrecht-table__footer" };
+function Ms(e, t, n, a, o, l) {
+  return s(), r("tfoot", Ps, [
     c(e.$slots, "default")
   ]);
 }
-const sn = /* @__PURE__ */ i(Ts, [["render", Is]]), ws = d({
+const cn = /* @__PURE__ */ i(Vs, [["render", Ms]]), Rs = d({
   name: "UtrechtTableHeader"
-}), Vs = { class: "utrecht-table__header" };
-function Ps(e, t, n, a, o, l) {
-  return s(), r("thead", Vs, [
+}), As = { class: "utrecht-table__header" };
+function Es(e, t, n, a, o, l) {
+  return s(), r("thead", As, [
     c(e.$slots, "default")
   ]);
 }
-const rn = /* @__PURE__ */ i(ws, [["render", Ps]]), Ms = d({
+const dn = /* @__PURE__ */ i(Rs, [["render", Es]]), Os = d({
   name: "UtrechtTableHeaderCell"
-}), Rs = { class: "utrecht-table__header-cell" };
-function As(e, t, n, a, o, l) {
-  return s(), r("th", Rs, [
+}), Gs = { class: "utrecht-table__header-cell" };
+function js(e, t, n, a, o, l) {
+  return s(), r("th", Gs, [
     c(e.$slots, "default")
   ]);
 }
-const nn = /* @__PURE__ */ i(Ms, [["render", As]]), Es = d({
+const ln = /* @__PURE__ */ i(Os, [["render", js]]), zs = d({
   name: "UtrechtTableRow"
-}), Os = { class: "utrecht-table__row" };
-function js(e, t, n, a, o, l) {
-  return s(), r("tr", Os, [
+}), Ks = { class: "utrecht-table__row" };
+function Js(e, t, n, a, o, l) {
+  return s(), r("tr", Ks, [
     c(e.$slots, "default")
   ]);
 }
-const an = /* @__PURE__ */ i(Es, [["render", js]]), zs = d({
+const _n = /* @__PURE__ */ i(zs, [["render", Js]]), Ws = d({
   name: "UtrechtTextarea",
   props: {
     dir: { type: String, required: !1, default: "auto" },
@@ -902,18 +923,18 @@ const an = /* @__PURE__ */ i(Es, [["render", js]]), zs = d({
     };
   }
 });
-const Gs = ["aria-invalid", "dir"];
-function Ks(e, t, n, a, o, l) {
+const Qs = ["aria-invalid", "dir"];
+function Xs(e, t, n, a, o, l) {
   return y((s(), r("textarea", {
     "onUpdate:modelValue": t[0] || (t[0] = (_) => e.value = _),
     "aria-invalid": e.invalid || void 0,
     class: p([{ "utrecht-textarea--invalid": e.invalid }, "utrecht-textarea", "utrecht-textarea--html-textarea"]),
     dir: e.dir
-  }, null, 10, Gs)), [
+  }, null, 10, Qs)), [
     [L, e.value]
   ]);
 }
-const on = /* @__PURE__ */ i(zs, [["render", Ks]]), Js = d({
+const un = /* @__PURE__ */ i(Ws, [["render", Xs]]), Ys = d({
   name: "UtrechtTextbox",
   props: {
     dir: { type: String, required: !1, default: "auto" },
@@ -926,107 +947,108 @@ const on = /* @__PURE__ */ i(zs, [["render", Ks]]), Js = d({
     };
   }
 });
-const Ws = ["aria-invalid", "dir"];
-function Qs(e, t, n, a, o, l) {
+const Zs = ["aria-invalid", "dir"];
+function er(e, t, n, a, o, l) {
   return y((s(), r("input", {
     "onUpdate:modelValue": t[0] || (t[0] = (_) => e.value = _),
     "aria-invalid": e.invalid || void 0,
     class: p([{ "utrecht-textbox--invalid": e.invalid }, "utrecht-textbox", "utrecht-textbox--html-input"]),
     dir: e.dir
-  }, null, 10, Ws)), [
+  }, null, 10, Zs)), [
     [L, e.value]
   ]);
 }
-const cn = /* @__PURE__ */ i(Js, [["render", Qs]]), Xs = d({
+const pn = /* @__PURE__ */ i(Ys, [["render", er]]), tr = d({
   name: "UtrechtUnorderedList"
 });
-function Ys(e, t, n, a, o, l) {
+function sr(e, t, n, a, o, l) {
   return s(), r("ul", u({ class: "utrecht-unordered-list" }, e.$attrs), [
     c(e.$slots, "default")
   ], 16);
 }
-const dn = /* @__PURE__ */ i(Xs, [["render", Ys]]), Zs = d({
+const $n = /* @__PURE__ */ i(tr, [["render", sr]]), rr = d({
   name: "UtrechtUnorderedListItem"
 });
-function er(e, t, n, a, o, l) {
+function nr(e, t, n, a, o, l) {
   return s(), r("li", u({ class: "utrecht-unordered-list__item" }, e.$attrs), [
     c(e.$slots, "default")
   ], 16);
 }
-const ln = /* @__PURE__ */ i(Zs, [["render", er]]), tr = d({
+const fn = /* @__PURE__ */ i(rr, [["render", nr]]), ar = d({
   name: "UtrechtURLData"
 });
-const sr = {
+const or = {
   translate: "no",
   class: "utrecht-url-data"
 };
-function rr(e, t, n, a, o, l) {
-  return s(), r("bdi", sr, [
+function cr(e, t, n, a, o, l) {
+  return s(), r("bdi", or, [
     c(e.$slots, "default")
   ]);
 }
-const _n = /* @__PURE__ */ i(tr, [["render", rr]]);
+const hn = /* @__PURE__ */ i(ar, [["render", cr]]);
 export {
-  ar as AlertDialog,
-  or as Article,
-  cr as BadgeCounter,
-  dr as BadgeStatus,
-  lr as BreadcrumbNav,
-  ir as BreadcrumbNavLink,
-  _r as Button,
-  ur as ButtonGroup,
-  pr as Checkbox,
-  $r as Code,
-  fr as CodeBlock,
-  hr as DataList,
-  mr as DataListActions,
-  yr as DataListItem,
-  vr as DataListKey,
-  gr as DataListValue,
-  br as Document,
-  Ur as Emphasis,
-  kr as Figure,
-  qr as FigureCaption,
-  Sr as FormField,
-  Br as FormFieldset,
-  Lr as FormFieldsetLegend,
-  xr as FormLabel,
+  ir as AlertDialog,
+  lr as Article,
+  _r as BadgeCounter,
+  ur as BadgeStatus,
+  $r as BreadcrumbNav,
+  pr as BreadcrumbNavLink,
+  fr as Button,
+  hr as ButtonGroup,
+  mr as Checkbox,
+  yr as Code,
+  vr as CodeBlock,
+  gr as DataList,
+  br as DataListActions,
+  Ur as DataListItem,
+  kr as DataListKey,
+  qr as DataListValue,
+  Sr as Document,
+  Br as Emphasis,
+  Lr as Figure,
+  Cr as FigureCaption,
+  xr as FormField,
+  Fr as FormFieldset,
+  Dr as FormFieldsetLegend,
+  Hr as FormLabel,
   le as Heading,
-  Cr as Heading1,
-  Fr as Heading2,
-  Dr as Heading3,
-  Hr as Heading4,
-  Tr as Heading5,
-  Nr as Heading6,
-  Ir as Image,
+  Nr as Heading1,
+  Tr as Heading2,
+  Ir as Heading3,
+  wr as Heading4,
+  Vr as Heading5,
+  Pr as Heading6,
+  Mr as Image,
   X as Link,
-  wr as LinkSocial,
-  Vr as ListSocial,
-  Pr as ListSocialItem,
-  Ar as NumberData,
-  Mr as OrderedList,
-  Rr as OrderedListItem,
-  Er as Page,
-  Or as PageContent,
-  jr as PageFooter,
-  zr as PageHeader,
-  Gr as Paragraph,
-  Kr as RadioButton,
-  Jr as Select,
-  Wr as Separator,
-  Qr as SkipLink,
-  Xr as Strong,
-  Yr as Table,
-  Zr as TableBody,
-  en as TableCaption,
-  tn as TableCell,
-  sn as TableFooter,
-  rn as TableHeader,
-  nn as TableHeaderCell,
-  an as TableRow,
-  on as Textarea,
-  cn as Textbox,
-  _n as URLData,
-  dn as UnorderedList,
-  ln as UnorderedListItem
+  Rr as LinkSocial,
+  Ar as ListSocial,
+  Er as ListSocialItem,
+  jr as NumberBadge,
+  zr as NumberData,
+  Or as OrderedList,
+  Gr as OrderedListItem,
+  Kr as Page,
+  Jr as PageContent,
+  Wr as PageFooter,
+  Qr as PageHeader,
+  Xr as Paragraph,
+  Yr as RadioButton,
+  Zr as Select,
+  en as Separator,
+  tn as SkipLink,
+  sn as Strong,
+  rn as Table,
+  nn as TableBody,
+  an as TableCaption,
+  on as TableCell,
+  cn as TableFooter,
+  dn as TableHeader,
+  ln as TableHeaderCell,
+  _n as TableRow,
+  un as Textarea,
+  pn as Textbox,
+  hn as URLData,
+  $n as UnorderedList,
+  fn as UnorderedListItem
 };