@utrecht/component-library-vue 2.2.0 → 2.3.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 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";
+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 H, vModelRadio as F, Fragment as D, 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 ir = /* @__PURE__ */ i(I, [["render", P]]), M = d({
+const ur = /* @__PURE__ */ i(I, [["render", P]]), M = d({
   name: "UtrechtArticle"
 });
 const R = { class: "utrecht-article" };
@@ -48,7 +48,7 @@ function A(e, t, n, a, o, l) {
     c(e.$slots, "default")
   ]);
 }
-const lr = /* @__PURE__ */ i(M, [["render", A]]), E = d({
+const pr = /* @__PURE__ */ i(M, [["render", A]]), E = d({
   name: "UtrechtBadgeCounter",
   props: {
     value: { type: [Number, String], required: !1, default: void 0 }
@@ -69,7 +69,7 @@ function j(e, t, n, a, o, l) {
     c(e.$slots, "default")
   ]));
 }
-const _r = /* @__PURE__ */ i(E, [["render", j]]), z = 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 ur = /* @__PURE__ */ i(z, [["render", K]]), J = d({
+const fr = /* @__PURE__ */ i(z, [["render", K]]), J = d({
   name: "UtrechtLink",
   props: {
     external: { type: Boolean, required: !1, default: !1 }
@@ -140,7 +140,7 @@ function te(e, t, n, a, o, l) {
     }, 16, ["aria-current", "href", "rel"])
   ], 16);
 }
-const pr = /* @__PURE__ */ i(Z, [["render", te]]), se = d({
+const hr = /* @__PURE__ */ i(Z, [["render", te]]), se = d({
   name: "UtrechtHeading",
   props: {
     level: { type: Number, required: !0, default: 6 }
@@ -230,7 +230,7 @@ function pe(e, t, n, a, o, l) {
     ], 16)
   ], 10, ue);
 }
-const $r = /* @__PURE__ */ i(_e, [["render", pe]]), $e = d({
+const mr = /* @__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 fr = /* @__PURE__ */ i($e, [["render", he]]), me = d({
+const yr = /* @__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 hr = /* @__PURE__ */ i(me, [["render", ve]]), ge = d({
+const vr = /* @__PURE__ */ i(me, [["render", ve]]), ge = d({
   name: "UtrechtCheckbox",
   props: {
     appearance: { type: String, required: !1, default: "custom" },
@@ -293,10 +293,10 @@ function Ue(e, t, n, a, o, l) {
       { "utrecht-checkbox--custom": e.appearance === "custom" }
     ])
   }, null, 10, be)), [
-    [F, e.value]
+    [H, e.value]
   ]);
 }
-const mr = /* @__PURE__ */ i(ge, [["render", Ue]]), ke = d({
+const gr = /* @__PURE__ */ i(ge, [["render", Ue]]), ke = d({
   name: "UtrechtCode"
 });
 const qe = { class: "utrecht-code" };
@@ -305,7 +305,7 @@ function Se(e, t, n, a, o, l) {
     c(e.$slots, "default")
   ]);
 }
-const yr = /* @__PURE__ */ i(ke, [["render", Se]]), Be = d({
+const br = /* @__PURE__ */ i(ke, [["render", Se]]), Be = d({
   name: "UtrechtCodeBlock"
 });
 const Le = { class: "utrecht-code-block" }, Ce = { class: "utrecht-code-block__content" };
@@ -323,20 +323,20 @@ function xe(e, t, n, a, o, l) {
   `)
   ]);
 }
-const vr = /* @__PURE__ */ i(Be, [["render", xe]]), Fe = d({
+const Ur = /* @__PURE__ */ i(Be, [["render", xe]]), He = d({
   name: "UtrechtDataList",
   props: {
     appearance: { type: String, required: !1, default: "rows" }
   }
 });
-function De(e, t, n, a, o, l) {
+function Fe(e, t, n, a, o, l) {
   return s(), r("dl", {
     class: p([{ "utrecht-data-list--rows": e.appearance === "rows" }, "utrecht-data-list utrecht-data-list--html-dl"])
   }, [
     c(e.$slots, "default")
   ], 2);
 }
-const gr = /* @__PURE__ */ i(Fe, [["render", De]]), He = d({
+const kr = /* @__PURE__ */ i(He, [["render", Fe]]), De = d({
   name: "UtrechtDataListActions"
 }), Ne = { class: "utrecht-data-list__actions utrecht-data-list__actions--html-dd" };
 function Te(e, t, n, a, o, l) {
@@ -344,7 +344,7 @@ function Te(e, t, n, a, o, l) {
     c(e.$slots, "default")
   ]);
 }
-const br = /* @__PURE__ */ i(He, [["render", Te]]), Ie = d({
+const qr = /* @__PURE__ */ i(De, [["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 Ur = /* @__PURE__ */ i(Ie, [["render", Ve]]), Pe = d({
+const Sr = /* @__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 kr = /* @__PURE__ */ i(Pe, [["render", Re]]), Ae = d({
+const Br = /* @__PURE__ */ i(Pe, [["render", Re]]), Ae = d({
   name: "UtrechtDataListValue",
   props: {
     value: { type: [Number, String], required: !1, default: "" },
@@ -385,7 +385,7 @@ function Ge(e, t, n, a, o, l) {
     }, "-", 8, Oe)) : c(e.$slots, "default", { key: 1 })
   ], 10, Ee);
 }
-const qr = /* @__PURE__ */ i(Ae, [["render", Ge]]), je = d({
+const Lr = /* @__PURE__ */ i(Ae, [["render", Ge]]), je = d({
   name: "UtrechtDocument"
 });
 const ze = { class: "utrecht-document" };
@@ -394,7 +394,7 @@ function Ke(e, t, n, a, o, l) {
     c(e.$slots, "default")
   ]);
 }
-const Sr = /* @__PURE__ */ i(je, [["render", Ke]]), Je = d({
+const Cr = /* @__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 Br = /* @__PURE__ */ i(Je, [["render", We]]), Qe = d({
+const xr = /* @__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 Lr = /* @__PURE__ */ i(Qe, [["render", Xe]]), Ye = d({
+const Hr = /* @__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 Cr = /* @__PURE__ */ i(Ye, [["render", Ze]]), et = d({
+const Fr = /* @__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 xr = /* @__PURE__ */ i(et, [["render", tt]]), st = d({
+const Dr = /* @__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 Fr = /* @__PURE__ */ i(st, [["render", at]]), ot = d({
+const Nr = /* @__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 Dr = /* @__PURE__ */ i(ot, [["render", dt]]), it = d({
+const Tr = /* @__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 Hr = /* @__PURE__ */ i(it, [["render", lt]]), _t = d({
+const Ir = /* @__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 Nr = /* @__PURE__ */ i(_t, [["render", pt]]), $t = d({
+const wr = /* @__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 Tr = /* @__PURE__ */ i($t, [["render", ht]]), mt = d({
+const Vr = /* @__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 Ir = /* @__PURE__ */ i(mt, [["render", vt]]), gt = d({
+const Pr = /* @__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 wr = /* @__PURE__ */ i(gt, [["render", Ut]]), kt = d({
+const Mr = /* @__PURE__ */ i(gt, [["render", Ut]]), kt = d({
   name: "UtrechtHeading5"
 });
 const qt = { class: "utrecht-heading-5" };
@@ -574,7 +574,7 @@ function St(e, t, n, a, o, l) {
     c(e.$slots, "default")
   ]);
 }
-const Vr = /* @__PURE__ */ i(kt, [["render", St]]), Bt = d({
+const Rr = /* @__PURE__ */ i(kt, [["render", St]]), Bt = d({
   name: "UtrechtHeading6"
 });
 const Lt = { class: "utrecht-heading-6" };
@@ -583,7 +583,16 @@ function Ct(e, t, n, a, o, l) {
     c(e.$slots, "default")
   ]);
 }
-const Pr = /* @__PURE__ */ i(Bt, [["render", Ct]]), xt = d({
+const Ar = /* @__PURE__ */ i(Bt, [["render", Ct]]), xt = d({
+  name: "UtrechtHtmlContent"
+});
+const Ht = { class: "utrecht-html" };
+function Ft(e, t, n, a, o, l) {
+  return s(), r("div", Ht, [
+    c(e.$slots, "default")
+  ]);
+}
+const Er = /* @__PURE__ */ i(xt, [["render", Ft]]), Dt = d({
   name: "UtrechtImage",
   props: {
     photo: {
@@ -592,8 +601,8 @@ const Pr = /* @__PURE__ */ i(Bt, [["render", Ct]]), xt = d({
       required: !1
     }
   }
-}), Ft = ["alt", "src", "height", "width"];
-function Dt(e, t, n, a, o, l) {
+}), Nt = ["alt", "src", "height", "width"];
+function Tt(e, t, n, a, o, l) {
   var _, v, f;
   return s(), r("img", u({ class: "utrecht-img" }, e.$attrs, {
     class: { "utrecht-img--photo": e.photo },
@@ -601,9 +610,9 @@ function Dt(e, t, n, a, o, l) {
     src: e.$attrs.src,
     height: (v = e.$attrs) == null ? void 0 : v.height,
     width: (f = e.$attrs) == null ? void 0 : f.width
-  }), null, 16, Ft);
+  }), null, 16, Nt);
 }
-const Mr = /* @__PURE__ */ i(xt, [["render", Dt]]), Ht = d({
+const Or = /* @__PURE__ */ i(Dt, [["render", Tt]]), It = d({
   name: "UtrechtLinkSocial",
   props: {
     external: {
@@ -613,15 +622,15 @@ const Mr = /* @__PURE__ */ i(xt, [["render", Dt]]), Ht = d({
     }
   }
 });
-const Nt = ["rel"];
-function Tt(e, t, n, a, o, l) {
+const wt = ["rel"];
+function Vt(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, Nt);
+  ], 16, wt);
 }
-const Rr = /* @__PURE__ */ i(Ht, [["render", Tt]]), It = d({
+const Gr = /* @__PURE__ */ i(It, [["render", Vt]]), Pt = d({
   name: "UtrechtListSocial",
   props: {
     external: {
@@ -631,128 +640,128 @@ const Rr = /* @__PURE__ */ i(Ht, [["render", Tt]]), It = d({
     }
   }
 });
-function wt(e, t, n, a, o, l) {
+function Mt(e, t, n, a, o, l) {
   return s(), r("ul", u({ class: "utrecht-list-social" }, e.$attrs), [
     c(e.$slots, "default")
   ], 16);
 }
-const Ar = /* @__PURE__ */ i(It, [["render", wt]]), Vt = d({
+const jr = /* @__PURE__ */ i(Pt, [["render", Mt]]), Rt = d({
   name: "UtrechtListSocialItem"
 });
-function Pt(e, t, n, a, o, l) {
+function At(e, t, n, a, o, l) {
   return s(), r("li", u({ class: "utrecht-list-social__item" }, e.$attrs), [
     c(e.$slots, "default")
   ], 16);
 }
-const Er = /* @__PURE__ */ i(Vt, [["render", Pt]]), Mt = d({
+const zr = /* @__PURE__ */ i(Rt, [["render", At]]), Et = d({
   name: "UtrechtOrderedList"
 });
-function Rt(e, t, n, a, o, l) {
+function Ot(e, t, n, a, o, l) {
   return s(), r("ol", u({ class: "utrecht-ordered-list" }, e.$attrs), [
     c(e.$slots, "default")
   ], 16);
 }
-const Or = /* @__PURE__ */ i(Mt, [["render", Rt]]), At = d({
+const Kr = /* @__PURE__ */ i(Et, [["render", Ot]]), Gt = d({
   name: "UtrechtOrderedListItem"
 });
-function Et(e, t, n, a, o, l) {
+function jt(e, t, n, a, o, l) {
   return s(), r("li", u({ class: "utrecht-ordered-list__item" }, e.$attrs), [
     c(e.$slots, "default")
   ], 16);
 }
-const Gr = /* @__PURE__ */ i(At, [["render", Et]]), Ot = d({
+const Jr = /* @__PURE__ */ i(Gt, [["render", jt]]), zt = d({
   name: "UtrechtNumberBadge",
   props: {
     value: { type: [Number, String], required: !1, default: void 0 }
   }
 });
-const Gt = ["value"], jt = {
+const Kt = ["value"], Jt = {
   key: 1,
   class: "utrecht-number-badge"
 };
-function zt(e, t, n, a, o, l) {
+function Wt(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, [
+  ], 8, Kt)) : (s(), r("span", Jt, [
     c(e.$slots, "default")
   ]));
 }
-const jr = /* @__PURE__ */ i(Ot, [["render", zt]]), Kt = d({
+const Wr = /* @__PURE__ */ i(zt, [["render", Wt]]), Qt = d({
   name: "UtrechtNumberData",
   props: {
     value: { type: [Number, String], required: !1, default: void 0 }
   }
 });
-const Jt = ["value"];
-function Wt(e, t, n, a, o, l) {
+const Xt = ["value"];
+function Yt(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, Xt);
 }
-const zr = /* @__PURE__ */ i(Kt, [["render", Wt]]), Qt = d({
+const Qr = /* @__PURE__ */ i(Qt, [["render", Yt]]), Zt = d({
   name: "UtrechtPage"
 });
-const Xt = { class: "utrecht-page" };
-function Yt(e, t, n, a, o, l) {
-  return s(), r("div", Xt, [
+const es = { class: "utrecht-page" };
+function ts(e, t, n, a, o, l) {
+  return s(), r("div", es, [
     c(e.$slots, "default")
   ]);
 }
-const Kr = /* @__PURE__ */ i(Qt, [["render", Yt]]), Zt = d({
+const Xr = /* @__PURE__ */ i(Zt, [["render", ts]]), ss = d({
   name: "UtrechtPageContent"
 });
-const es = { class: "utrecht-page-content" };
-function ts(e, t, n, a, o, l) {
-  return s(), r("div", es, [
+const rs = { class: "utrecht-page-content" };
+function ns(e, t, n, a, o, l) {
+  return s(), r("div", rs, [
     c(e.$slots, "default")
   ]);
 }
-const Jr = /* @__PURE__ */ i(Zt, [["render", ts]]), ss = d({
+const Yr = /* @__PURE__ */ i(ss, [["render", ns]]), as = d({
   name: "UtrechtPageFooter"
 });
-const rs = { class: "utrecht-page-footer" };
-function ns(e, t, n, a, o, l) {
-  return s(), r("footer", rs, [
+const os = { class: "utrecht-page-footer" };
+function cs(e, t, n, a, o, l) {
+  return s(), r("footer", os, [
     c(e.$slots, "default")
   ]);
 }
-const Wr = /* @__PURE__ */ i(ss, [["render", ns]]), as = d({
+const Zr = /* @__PURE__ */ i(as, [["render", cs]]), ds = d({
   name: "UtrechtPageHeader"
 });
-const os = { class: "utrecht-page-header" };
-function cs(e, t, n, a, o, l) {
-  return s(), r("header", os, [
+const is = { class: "utrecht-page-header" };
+function ls(e, t, n, a, o, l) {
+  return s(), r("header", is, [
     c(e.$slots, "default")
   ]);
 }
-const Qr = /* @__PURE__ */ i(as, [["render", cs]]), ds = d({
+const en = /* @__PURE__ */ i(ds, [["render", ls]]), _s = d({
   name: "UtrechtParagraph",
   props: {
     lead: { type: Boolean, required: !1, default: !1 },
     small: { type: Boolean, required: !1, default: !1 }
   }
 });
-const is = {
+const us = {
   key: 0,
   class: "utrecht-paragraph__small"
 };
-function ls(e, t, n, a, o, l) {
+function ps(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", is, [
+    e.small ? (s(), r("small", us, [
       c(e.$slots, "default")
     ])) : c(e.$slots, "default", { key: 1 })
   ], 2);
 }
-const Xr = /* @__PURE__ */ i(ds, [["render", ls]]), _s = d({
+const tn = /* @__PURE__ */ i(_s, [["render", ps]]), $s = d({
   name: "UtrechtRadioButton",
   props: {
     invalid: { type: Boolean, required: !1 },
@@ -764,18 +773,18 @@ const Xr = /* @__PURE__ */ i(ds, [["render", ls]]), _s = d({
     };
   }
 });
-const us = ["aria-invalid"];
-function ps(e, t, n, a, o, l) {
+const fs = ["aria-invalid"];
+function hs(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, us)), [
-    [D, e.value]
+  }, null, 10, fs)), [
+    [F, e.value]
   ]);
 }
-const Yr = /* @__PURE__ */ i(_s, [["render", ps]]), $s = d({
+const sn = /* @__PURE__ */ i($s, [["render", hs]]), ms = d({
   name: "UtrechtSelect",
   props: {
     invalid: { type: Boolean, required: !1 },
@@ -789,8 +798,8 @@ const Yr = /* @__PURE__ */ i(_s, [["render", ps]]), $s = d({
     };
   }
 });
-const fs = ["aria-invalid", "readonly"], hs = ["value", "disabled"];
-function ms(e, t, n, a, o, l) {
+const ys = ["aria-invalid", "readonly"], vs = ["value", "disabled"];
+function gs(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,
@@ -802,23 +811,23 @@ function ms(e, t, n, a, o, l) {
     ]),
     readonly: e.readonly
   }, [
-    e.options && e.options.length > 0 ? (s(!0), r(H, { key: 0 }, N(e.options, ({ value: _, label: v, disabled: f }) => (s(), r("option", {
+    e.options && e.options.length > 0 ? (s(!0), r(D, { 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, hs))), 128)) : U("", !0)
-  ], 10, fs)), [
+    }, b(v), 11, vs))), 128)) : U("", !0)
+  ], 10, ys)), [
     [T, e.selected]
   ]);
 }
-const Zr = /* @__PURE__ */ i($s, [["render", ms]]), ys = d({
+const rn = /* @__PURE__ */ i(ms, [["render", gs]]), bs = d({
   name: "UtrechtSeparator"
 });
-function vs(e, t, n, a, o, l) {
+function Us(e, t, n, a, o, l) {
   return s(), r("hr", u({ class: "utrecht-separator" }, e.$attrs), null, 16);
 }
-const en = /* @__PURE__ */ i(ys, [["render", vs]]), gs = d({
+const nn = /* @__PURE__ */ i(bs, [["render", Us]]), ks = d({
   name: "UtrechtSkipLink",
   props: {
     href: {
@@ -828,89 +837,89 @@ const en = /* @__PURE__ */ i(ys, [["render", vs]]), gs = d({
     }
   }
 });
-const bs = ["href"];
-function Us(e, t, n, a, o, l) {
+const qs = ["href"];
+function Ss(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, bs);
+  ], 16, qs);
 }
-const tn = /* @__PURE__ */ i(gs, [["render", Us]]), ks = d({
+const an = /* @__PURE__ */ i(ks, [["render", Ss]]), Bs = d({
   name: "UtrechtStrong"
 });
-function qs(e, t, n, a, o, l) {
+function Ls(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 sn = /* @__PURE__ */ i(ks, [["render", qs]]), Ss = d({
+const on = /* @__PURE__ */ i(Bs, [["render", Ls]]), Cs = d({
   name: "UtrechtTable"
 });
-const Bs = { class: "utrecht-table" };
-function Ls(e, t, n, a, o, l) {
-  return s(), r("table", Bs, [
+const xs = { class: "utrecht-table" };
+function Hs(e, t, n, a, o, l) {
+  return s(), r("table", xs, [
     c(e.$slots, "default")
   ]);
 }
-const rn = /* @__PURE__ */ i(Ss, [["render", Ls]]), Cs = d({
+const cn = /* @__PURE__ */ i(Cs, [["render", Hs]]), Fs = d({
   name: "UtrechtTableBody"
-}), xs = { class: "utrecht-table__body" };
-function Fs(e, t, n, a, o, l) {
-  return s(), r("tbody", xs, [
+}), Ds = { class: "utrecht-table__body" };
+function Ns(e, t, n, a, o, l) {
+  return s(), r("tbody", Ds, [
     c(e.$slots, "default")
   ]);
 }
-const nn = /* @__PURE__ */ i(Cs, [["render", Fs]]), Ds = d({
+const dn = /* @__PURE__ */ i(Fs, [["render", Ns]]), Ts = d({
   name: "UtrechtTableCaption"
-}), Hs = { class: "utrecht-table__caption" };
-function Ns(e, t, n, a, o, l) {
-  return s(), r("caption", Hs, [
+}), Is = { class: "utrecht-table__caption" };
+function ws(e, t, n, a, o, l) {
+  return s(), r("caption", Is, [
     c(e.$slots, "default")
   ]);
 }
-const an = /* @__PURE__ */ i(Ds, [["render", Ns]]), Ts = d({
+const ln = /* @__PURE__ */ i(Ts, [["render", ws]]), Vs = d({
   name: "UtrechtTableCell"
-}), Is = { class: "utrecht-table__cell" };
-function ws(e, t, n, a, o, l) {
-  return s(), r("td", Is, [
+}), Ps = { class: "utrecht-table__cell" };
+function Ms(e, t, n, a, o, l) {
+  return s(), r("td", Ps, [
     c(e.$slots, "default")
   ]);
 }
-const on = /* @__PURE__ */ i(Ts, [["render", ws]]), Vs = d({
+const _n = /* @__PURE__ */ i(Vs, [["render", Ms]]), Rs = d({
   name: "UtrechtTableFooter"
-}), Ps = { class: "utrecht-table__footer" };
-function Ms(e, t, n, a, o, l) {
-  return s(), r("tfoot", Ps, [
+}), As = { class: "utrecht-table__footer" };
+function Es(e, t, n, a, o, l) {
+  return s(), r("tfoot", As, [
     c(e.$slots, "default")
   ]);
 }
-const cn = /* @__PURE__ */ i(Vs, [["render", Ms]]), Rs = d({
+const un = /* @__PURE__ */ i(Rs, [["render", Es]]), Os = d({
   name: "UtrechtTableHeader"
-}), As = { class: "utrecht-table__header" };
-function Es(e, t, n, a, o, l) {
-  return s(), r("thead", As, [
+}), Gs = { class: "utrecht-table__header" };
+function js(e, t, n, a, o, l) {
+  return s(), r("thead", Gs, [
     c(e.$slots, "default")
   ]);
 }
-const dn = /* @__PURE__ */ i(Rs, [["render", Es]]), Os = d({
+const pn = /* @__PURE__ */ i(Os, [["render", js]]), zs = d({
   name: "UtrechtTableHeaderCell"
-}), Gs = { class: "utrecht-table__header-cell" };
-function js(e, t, n, a, o, l) {
-  return s(), r("th", Gs, [
+}), Ks = { class: "utrecht-table__header-cell" };
+function Js(e, t, n, a, o, l) {
+  return s(), r("th", Ks, [
     c(e.$slots, "default")
   ]);
 }
-const ln = /* @__PURE__ */ i(Os, [["render", js]]), zs = d({
+const $n = /* @__PURE__ */ i(zs, [["render", Js]]), Ws = d({
   name: "UtrechtTableRow"
-}), Ks = { class: "utrecht-table__row" };
-function Js(e, t, n, a, o, l) {
-  return s(), r("tr", Ks, [
+}), Qs = { class: "utrecht-table__row" };
+function Xs(e, t, n, a, o, l) {
+  return s(), r("tr", Qs, [
     c(e.$slots, "default")
   ]);
 }
-const _n = /* @__PURE__ */ i(zs, [["render", Js]]), Ws = d({
+const fn = /* @__PURE__ */ i(Ws, [["render", Xs]]), Ys = d({
   name: "UtrechtTextarea",
   props: {
     dir: { type: String, required: !1, default: "auto" },
@@ -923,18 +932,18 @@ const _n = /* @__PURE__ */ i(zs, [["render", Js]]), Ws = d({
     };
   }
 });
-const Qs = ["aria-invalid", "dir"];
-function Xs(e, t, n, a, o, l) {
+const Zs = ["aria-invalid", "dir"];
+function er(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, Qs)), [
+  }, null, 10, Zs)), [
     [L, e.value]
   ]);
 }
-const un = /* @__PURE__ */ i(Ws, [["render", Xs]]), Ys = d({
+const hn = /* @__PURE__ */ i(Ys, [["render", er]]), tr = d({
   name: "UtrechtTextbox",
   props: {
     dir: { type: String, required: !1, default: "auto" },
@@ -947,108 +956,109 @@ const un = /* @__PURE__ */ i(Ws, [["render", Xs]]), Ys = d({
     };
   }
 });
-const Zs = ["aria-invalid", "dir"];
-function er(e, t, n, a, o, l) {
+const sr = ["aria-invalid", "dir"];
+function rr(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, Zs)), [
+  }, null, 10, sr)), [
     [L, e.value]
   ]);
 }
-const pn = /* @__PURE__ */ i(Ys, [["render", er]]), tr = d({
+const mn = /* @__PURE__ */ i(tr, [["render", rr]]), nr = d({
   name: "UtrechtUnorderedList"
 });
-function sr(e, t, n, a, o, l) {
+function ar(e, t, n, a, o, l) {
   return s(), r("ul", u({ class: "utrecht-unordered-list" }, e.$attrs), [
     c(e.$slots, "default")
   ], 16);
 }
-const $n = /* @__PURE__ */ i(tr, [["render", sr]]), rr = d({
+const yn = /* @__PURE__ */ i(nr, [["render", ar]]), or = d({
   name: "UtrechtUnorderedListItem"
 });
-function nr(e, t, n, a, o, l) {
+function cr(e, t, n, a, o, l) {
   return s(), r("li", u({ class: "utrecht-unordered-list__item" }, e.$attrs), [
     c(e.$slots, "default")
   ], 16);
 }
-const fn = /* @__PURE__ */ i(rr, [["render", nr]]), ar = d({
+const vn = /* @__PURE__ */ i(or, [["render", cr]]), dr = d({
   name: "UtrechtURLData"
 });
-const or = {
+const ir = {
   translate: "no",
   class: "utrecht-url-data"
 };
-function cr(e, t, n, a, o, l) {
-  return s(), r("bdi", or, [
+function lr(e, t, n, a, o, l) {
+  return s(), r("bdi", ir, [
     c(e.$slots, "default")
   ]);
 }
-const hn = /* @__PURE__ */ i(ar, [["render", cr]]);
+const gn = /* @__PURE__ */ i(dr, [["render", lr]]);
 export {
-  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,
+  ur as AlertDialog,
+  pr as Article,
+  $r as BadgeCounter,
+  fr as BadgeStatus,
+  mr as BreadcrumbNav,
+  hr as BreadcrumbNavLink,
+  yr as Button,
+  vr as ButtonGroup,
+  gr as Checkbox,
+  br as Code,
+  Ur as CodeBlock,
+  kr as DataList,
+  qr as DataListActions,
+  Sr as DataListItem,
+  Br as DataListKey,
+  Lr as DataListValue,
+  Cr as Document,
+  xr as Emphasis,
+  Hr as Figure,
+  Fr as FigureCaption,
+  Dr as FormField,
+  Nr as FormFieldset,
+  Tr as FormFieldsetLegend,
+  Ir as FormLabel,
   le as Heading,
-  Nr as Heading1,
-  Tr as Heading2,
-  Ir as Heading3,
-  wr as Heading4,
-  Vr as Heading5,
-  Pr as Heading6,
-  Mr as Image,
+  wr as Heading1,
+  Vr as Heading2,
+  Pr as Heading3,
+  Mr as Heading4,
+  Rr as Heading5,
+  Ar as Heading6,
+  Er as HtmlContent,
+  Or as Image,
   X as Link,
-  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
+  Gr as LinkSocial,
+  jr as ListSocial,
+  zr as ListSocialItem,
+  Wr as NumberBadge,
+  Qr as NumberData,
+  Kr as OrderedList,
+  Jr as OrderedListItem,
+  Xr as Page,
+  Yr as PageContent,
+  Zr as PageFooter,
+  en as PageHeader,
+  tn as Paragraph,
+  sn as RadioButton,
+  rn as Select,
+  nn as Separator,
+  an as SkipLink,
+  on as Strong,
+  cn as Table,
+  dn as TableBody,
+  ln as TableCaption,
+  _n as TableCell,
+  un as TableFooter,
+  pn as TableHeader,
+  $n as TableHeaderCell,
+  fn as TableRow,
+  hn as Textarea,
+  mn as Textbox,
+  gn as URLData,
+  yn as UnorderedList,
+  vn as UnorderedListItem
 };