@utrecht/component-library-vue 1.0.0-alpha.31 → 1.0.0-alpha.310

package/dist/component-library-vue.mjs

@@ -0,0 +1,1055 @@
+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 v, 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 H, Fragment as T, renderList as V, vModelSelect as D, vModelText as L } from "vue";
+const I = d({
+  name: "UtrechtAlertDialog",
+  props: {
+    icon: {
+      type: String,
+      default: null
+    },
+    type: {
+      type: String,
+      default: null
+    }
+  },
+  setup(e) {
+    return { dialogRef: k(null), props: e };
+  }
+});
+const i = (e, t) => {
+  const n = e.__vccOpts || e;
+  for (const [a, o] of t)
+    n[a] = o;
+  return n;
+}, N = {
+  key: 0,
+  class: "utrecht-alert-dialog__icon"
+}, w = { class: "utrecht-alert-dialog__message" };
+function P(e, t, n, a, o, l) {
+  return s(), r("dialog", {
+    ref: "dialogRef",
+    class: p(["utrecht-alert-dialog", {
+      "utrecht-alert-dialog--error": e.type === "error",
+      "utrecht-alert-dialog--info": e.type === "info",
+      "utrecht-alert-dialog--warning": e.type === "warning"
+    }])
+  }, [
+    e.icon ? (s(), r("div", N, b(e.icon), 1)) : U("", !0),
+    m("div", w, [
+      c(e.$slots, "default")
+    ])
+  ], 2);
+}
+const ar = /* @__PURE__ */ i(I, [["render", P]]), M = d({
+  name: "UtrechtArticle"
+});
+const R = { class: "utrecht-article" };
+function A(e, t, n, a, o, l) {
+  return s(), r("article", R, [
+    c(e.$slots, "default")
+  ]);
+}
+const or = /* @__PURE__ */ i(M, [["render", A]]), E = d({
+  name: "UtrechtBadgeCounter",
+  props: {
+    value: { type: [Number, String], required: !1, default: void 0 }
+  }
+});
+const O = ["value"], j = {
+  key: 1,
+  class: "utrecht-badge-counter"
+};
+function z(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, [
+    c(e.$slots, "default")
+  ]));
+}
+const cr = /* @__PURE__ */ i(E, [["render", z]]), G = d({
+  name: "UtrechtBadgeStatus",
+  props: {
+    status: { type: String, required: !1, default: void 0 }
+  }
+});
+function K(e, t, n, a, o, l) {
+  return s(), r("span", {
+    class: p([
+      { [`utrecht-badge-status--${e.status}`]: !0 },
+      "utrecht-badge-status"
+    ])
+  }, [
+    c(e.$slots, "default")
+  ], 2);
+}
+const dr = /* @__PURE__ */ i(G, [["render", K]]), J = d({
+  name: "UtrechtLink",
+  props: {
+    external: { type: Boolean, required: !1, default: !1 }
+  }
+});
+const W = ["rel"];
+function Q(e, t, n, a, o, l) {
+  return s(), r("a", {
+    class: p(["utrecht-link", { "utrecht-link--external": e.external }]),
+    rel: e.external ? "external noopener noreferrer" : void 0
+  }, [
+    c(e.$slots, "default")
+  ], 10, W);
+}
+const X = /* @__PURE__ */ i(J, [["render", Q]]), x = ({
+  prop: e,
+  type: t
+}) => ({
+  itemscope: !0,
+  itemtype: t,
+  itemprop: e
+}), Y = (e) => ({
+  itemprop: e
+}), Z = d({
+  name: "UtrechtBreadcrumbLink",
+  components: { UtrechtLink: X },
+  props: {
+    href: { type: String, required: !0 },
+    current: { type: Boolean, required: !1, default: !1 },
+    rel: { type: String, required: !1, default: "" },
+    index: { type: Number, required: !1, default: void 0 }
+  },
+  methods: { ref: k, useMicrodataProp: Y, useMicrodataItem: x, getCurrentInstance: v }
+});
+const ee = ["content"];
+function te(e, t, n, a, o, l) {
+  const _ = q("UtrechtLink");
+  return s(), r("li", u({ class: "utrecht-breadcrumb__item" }, e.useMicrodataItem({ type: "https://schema.org/ListItem", prop: "itemListElement" })), [
+    S(_, u({ ...e.useMicrodataProp("item") }, {
+      ref: e.ref,
+      class: "utrecht-breadcrumb__link",
+      "aria-current": e.current && "location",
+      href: e.href,
+      rel: e.rel
+    }), {
+      default: B(() => [
+        m("span", u({ class: "utrecht-breadcrumb__text" }, { ...e.useMicrodataProp("name") }), [
+          c(e.$slots, "default")
+        ], 16),
+        typeof e.index == "number" ? (s(), r("meta", u({ key: 0 }, { ...e.useMicrodataProp("position") }, {
+          content: String(e.index + 1)
+        }), null, 16, ee)) : U("", !0)
+      ]),
+      _: 3
+    }, 16, ["aria-current", "href", "rel"])
+  ], 16);
+}
+const ir = /* @__PURE__ */ i(Z, [["render", te]]), se = d({
+  name: "UtrechtHeading",
+  props: {
+    level: { type: Number, required: !0, default: 6 }
+  }
+});
+const re = {
+  key: 0,
+  class: "utrecht-heading-1"
+}, ne = {
+  key: 1,
+  class: "utrecht-heading-2"
+}, ae = {
+  key: 2,
+  class: "utrecht-heading-3"
+}, oe = {
+  key: 3,
+  class: "utrecht-heading-4"
+}, ce = {
+  key: 4,
+  class: "utrecht-heading-5"
+}, de = {
+  key: 5,
+  class: "utrecht-heading-6"
+};
+function ie(e, t, n, a, o, l) {
+  return e.level == 1 ? (s(), r("h1", re, [
+    c(e.$slots, "default", {}, void 0, !0)
+  ])) : e.level == 2 ? (s(), r("h2", ne, [
+    c(e.$slots, "default", {}, void 0, !0)
+  ])) : e.level == 3 ? (s(), r("h3", ae, [
+    c(e.$slots, "default", {}, void 0, !0)
+  ])) : e.level == 4 ? (s(), r("h4", oe, [
+    c(e.$slots, "default", {}, void 0, !0)
+  ])) : e.level == 5 ? (s(), r("h5", ce, [
+    c(e.$slots, "default", {}, void 0, !0)
+  ])) : (s(), r("h6", de, [
+    c(e.$slots, "default", {}, void 0, !0)
+  ]));
+}
+const le = /* @__PURE__ */ i(se, [["render", ie], ["__scopeId", "data-v-7324134c"]]);
+function $(e, t, n = "modelValue") {
+  return C({
+    get: () => e.modelValue,
+    set: (a) => t(`update:${n}`, a)
+  });
+}
+const _e = d({
+  name: "UtrechtBreadcrumbNav",
+  components: { UtrechtHeading: le },
+  props: {
+    appearance: { type: String, required: !1, default: "arrows" },
+    headingLevel: { type: Number, required: !1, default: 2 },
+    label: { type: String, required: !1, default: "" }
+  },
+  setup(e, { emit: t }) {
+    return {
+      value: $(e, t)
+    };
+  },
+  data() {
+    var e;
+    return {
+      headingId: this.$props.label ? String((e = v()) == null ? void 0 : e.uid) : void 0
+    };
+  },
+  methods: { useMicrodataItem: x, getCurrentInstance: v }
+}), ue = ["aria-labelledby"];
+function pe(e, t, n, a, o, l) {
+  const _ = q("UtrechtHeading");
+  return s(), r("nav", {
+    class: p([
+      "utrecht-breadcrumb",
+      { "utrecht-breadcrumb--arrows": e.appearance === "arrows" }
+    ]),
+    "aria-labelledby": e.headingId
+  }, [
+    S(_, {
+      id: e.headingId,
+      class: "utrecht-breadcrumb__heading",
+      level: e.headingLevel ?? 2,
+      "aria-hidden": "true"
+    }, {
+      default: B(() => [
+        h(b(e.label), 1)
+      ]),
+      _: 1
+    }, 8, ["id", "level"]),
+    m("ol", u({ class: "utrecht-breadcrumb__list" }, { ...e.useMicrodataItem({ type: "https://schema.org/BreadcrumbList" }) }), [
+      c(e.$slots, "default")
+    ], 16)
+  ], 10, ue);
+}
+const lr = /* @__PURE__ */ i(_e, [["render", pe]]), $e = d({
+  name: "UtrechtButton",
+  props: {
+    appearance: { type: String, required: !1, default: void 0 },
+    type: { type: String, required: !1, default: "button" },
+    busy: { type: Boolean, required: !1, default: !1 },
+    pressed: { type: Boolean, required: !1, default: void 0 }
+  }
+});
+const fe = ["aria-busy", "aria-pressed", "type"];
+function he(e, t, n, a, o, l) {
+  return s(), r("button", {
+    "aria-busy": e.busy || void 0,
+    "aria-pressed": e.pressed,
+    class: p([
+      "utrecht-button",
+      { "utrecht-button--busy": e.busy },
+      { "utrecht-button--pressed": e.pressed },
+      { "utrecht-button--primary-action": e.appearance === "primary-action-button" },
+      { "utrecht-button--secondary-action": e.appearance === "secondary-action-button" },
+      { "utrecht-button--submit": e.type === "submit" },
+      { "utrecht-button--subtle": e.appearance === "subtle-button" }
+    ]),
+    type: e.type
+  }, [
+    c(e.$slots, "default")
+  ], 10, fe);
+}
+const _r = /* @__PURE__ */ i($e, [["render", he]]), me = d({
+  name: "UtrechtButtonGroup"
+});
+const ye = { class: "utrecht-button-group" };
+function ge(e, t, n, a, o, l) {
+  return s(), r("div", ye, [
+    c(e.$slots, "default")
+  ]);
+}
+const ur = /* @__PURE__ */ i(me, [["render", ge]]), ve = d({
+  name: "UtrechtCheckbox",
+  props: {
+    appearance: { type: String, required: !1, default: "custom" },
+    invalid: { type: Boolean, required: !1 },
+    modelValue: { type: [String, Number, Boolean], required: !1, default: "" }
+  },
+  setup(e, { emit: t }) {
+    return {
+      value: $(e, t)
+    };
+  }
+});
+const be = ["aria-invalid"];
+function Ue(e, t, n, a, o, l) {
+  return y((s(), r("input", {
+    "onUpdate:modelValue": t[0] || (t[0] = (_) => e.value = _),
+    type: "checkbox",
+    "aria-invalid": e.invalid || void 0,
+    class: p([
+      "utrecht-checkbox",
+      "utrecht-checkbox--html-input",
+      { "utrecht-checkbox--invalid": e.invalid },
+      { "utrecht-checkbox--custom": e.appearance === "custom" }
+    ])
+  }, null, 10, be)), [
+    [F, e.value]
+  ]);
+}
+const pr = /* @__PURE__ */ i(ve, [["render", Ue]]), ke = d({
+  name: "UtrechtCode"
+});
+const qe = { class: "utrecht-code" };
+function Se(e, t, n, a, o, l) {
+  return s(), r("code", qe, [
+    c(e.$slots, "default")
+  ]);
+}
+const $r = /* @__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) {
+  return s(), r("pre", Le, [
+    h("      "),
+    m("code", xe, [
+      h(`
+          `),
+      c(e.$slots, "default"),
+      h(`
+      `)
+    ]),
+    h(`
+  `)
+  ]);
+}
+const fr = /* @__PURE__ */ i(Be, [["render", Ce]]), Fe = d({
+  name: "UtrechtDataList",
+  props: {
+    appearance: { type: String, required: !1, default: "rows" }
+  }
+});
+function He(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 hr = /* @__PURE__ */ i(Fe, [["render", He]]), Te = d({
+  name: "UtrechtDataListActions"
+}), Ve = { class: "utrecht-data-list__actions utrecht-data-list__actions--html-dd" };
+function De(e, t, n, a, o, l) {
+  return s(), r("dd", Ve, [
+    c(e.$slots, "default")
+  ]);
+}
+const mr = /* @__PURE__ */ i(Te, [["render", De]]), Ie = d({
+  name: "UtrechtDataListItem"
+}), Ne = { class: "utrecht-data-list__item" };
+function we(e, t, n, a, o, l) {
+  return s(), r("div", Ne, [
+    c(e.$slots, "default")
+  ]);
+}
+const yr = /* @__PURE__ */ i(Ie, [["render", we]]), Pe = d({
+  name: "UtrechtDataListKey"
+}), Me = { class: "utrecht-data-list__item-key" };
+function Re(e, t, n, a, o, l) {
+  return s(), r("dt", Me, [
+    c(e.$slots, "default")
+  ]);
+}
+const gr = /* @__PURE__ */ i(Pe, [["render", Re]]), Ae = d({
+  name: "UtrechtDataListValue",
+  props: {
+    value: { type: [Number, String], required: !1, default: "" },
+    emptyDescription: { type: String, required: !1, default: "" },
+    multiline: { type: Boolean, required: !1 },
+    notranslate: { type: Boolean, required: !1 }
+  },
+  data() {
+    return {
+      empty: this.$props.value === "" || this.$props.value === void 0
+    };
+  }
+}), Ee = ["translate"], Oe = ["aria-label"];
+function je(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
+  }, [
+    e.empty ? (s(), r("span", {
+      key: 0,
+      "aria-label": e.emptyDescription
+    }, "-", 8, Oe)) : c(e.$slots, "default", { key: 1 })
+  ], 10, Ee);
+}
+const vr = /* @__PURE__ */ i(Ae, [["render", je]]), ze = d({
+  name: "UtrechtDocument"
+});
+const Ge = { class: "utrecht-document" };
+function Ke(e, t, n, a, o, l) {
+  return s(), r("div", Ge, [
+    c(e.$slots, "default")
+  ]);
+}
+const br = /* @__PURE__ */ i(ze, [["render", Ke]]), Je = d({
+  name: "UtrechtEmphasis"
+});
+function We(e, t, n, a, o, l) {
+  return s(), r("em", u(e.$attrs, { class: "utrecht-emphasis utrecht-emphasis--stressed" }), [
+    c(e.$slots, "default")
+  ], 16);
+}
+const Ur = /* @__PURE__ */ i(Je, [["render", We]]), Qe = d({
+  name: "UtrechtFigure"
+});
+function Xe(e, t, n, a, o, l) {
+  return s(), r("figure", u(e.$attrs, { class: "utrecht-figure" }), [
+    c(e.$slots, "default")
+  ], 16);
+}
+const kr = /* @__PURE__ */ i(Qe, [["render", Xe]]), Ye = d({
+  name: "UtrechtFigureCaption"
+});
+function Ze(e, t, n, a, o, l) {
+  return s(), r("figcaption", u(e.$attrs, { class: "utrecht-figure__caption" }), [
+    c(e.$slots, "default")
+  ], 16);
+}
+const qr = /* @__PURE__ */ i(Ye, [["render", Ze]]), et = d({
+  name: "UtrechtFormField",
+  props: {
+    invalid: { type: Boolean, required: !1, default: !1 },
+    type: { type: String, required: !1, default: void 0 }
+  }
+});
+function tt(e, t, n, a, o, l) {
+  return s(), r("div", {
+    class: p([
+      "utrecht-form-field",
+      { "utrecht-form-field--invalid": e.invalid },
+      { "utrecht-form-field--checkbox": e.type === "checkbox" },
+      { "utrecht-form-field--radio": e.type === "radio" },
+      { "utrecht-form-field--text": !e.type || e.type === "text" }
+    ])
+  }, [
+    c(e.$slots, "default")
+  ], 2);
+}
+const Sr = /* @__PURE__ */ i(et, [["render", tt]]), st = d({
+  name: "UtrechtFormFieldset",
+  props: {
+    describedby: {
+      type: String,
+      required: !1,
+      default: void 0
+    },
+    disabled: {
+      type: Boolean,
+      required: !1,
+      default: !1
+    },
+    invalid: {
+      type: Boolean,
+      required: !1,
+      default: !1
+    },
+    label: {
+      type: String,
+      required: !1,
+      default: void 0
+    },
+    labelledby: {
+      type: String,
+      required: !1,
+      default: void 0
+    },
+    role: {
+      type: String,
+      required: !1,
+      default: null
+    },
+    name: {
+      type: String,
+      required: !1,
+      default: ""
+    },
+    form: {
+      type: String,
+      required: !1,
+      default: null
+    }
+  }
+});
+const rt = { class: "utrecht-form-fieldset" }, nt = ["aria-describedby", "aria-invalid", "aria-label", "aria-labelledby", "disabled", "form", "name", "role"];
+function at(e, t, n, a, o, l) {
+  return s(), r("div", rt, [
+    m("fieldset", {
+      "aria-describedby": e.describedby || void 0,
+      "aria-invalid": e.invalid || void 0,
+      "aria-label": e.label || void 0,
+      "aria-labelledby": e.labelledby || void 0,
+      class: "utrecht-form-fieldset__fieldset utrecht-form-fieldset__fieldset--html-fieldset",
+      disabled: e.disabled,
+      form: e.form || void 0,
+      name: e.name || void 0,
+      role: e.role || void 0
+    }, [
+      c(e.$slots, "default")
+    ], 8, nt)
+  ]);
+}
+const Br = /* @__PURE__ */ i(st, [["render", at]]), ot = d({
+  name: "UtrechtFormFieldsetLegend"
+}), ct = { class: "utrecht-form-fieldset__legend" };
+function dt(e, t, n, a, o, l) {
+  return s(), r("legend", ct, [
+    c(e.$slots, "default")
+  ]);
+}
+const Lr = /* @__PURE__ */ i(ot, [["render", dt]]), it = d({
+  name: "UtrechtFormLabel",
+  props: {
+    checked: { type: Boolean, required: !1, default: !1 },
+    disabled: { type: Boolean, required: !1, default: !1 },
+    type: { type: String, required: !1, default: void 0 }
+  }
+});
+function lt(e, t, n, a, o, l) {
+  return s(), r("label", {
+    class: p([
+      "utrecht-form-label",
+      { "utrecht-form-label--checked": e.checked },
+      { "utrecht-form-label--disabled": e.disabled },
+      { [`utrecht-form-label--${e.type}`]: e.type }
+    ])
+  }, [
+    c(e.$slots, "default")
+  ], 2);
+}
+const xr = /* @__PURE__ */ i(it, [["render", lt]]), _t = d({
+  name: "UtrechtHeading1"
+});
+const ut = { class: "utrecht-heading-1" };
+function pt(e, t, n, a, o, l) {
+  return s(), r("h1", ut, [
+    c(e.$slots, "default")
+  ]);
+}
+const Cr = /* @__PURE__ */ i(_t, [["render", pt]]), $t = d({
+  name: "UtrechtHeading2"
+});
+const ft = { class: "utrecht-heading-2" };
+function ht(e, t, n, a, o, l) {
+  return s(), r("h2", ft, [
+    c(e.$slots, "default")
+  ]);
+}
+const Fr = /* @__PURE__ */ i($t, [["render", ht]]), mt = d({
+  name: "UtrechtHeading3"
+});
+const yt = { class: "utrecht-heading-3" };
+function gt(e, t, n, a, o, l) {
+  return s(), r("h3", yt, [
+    c(e.$slots, "default")
+  ]);
+}
+const Hr = /* @__PURE__ */ i(mt, [["render", gt]]), vt = d({
+  name: "UtrechtHeading4"
+});
+const bt = { class: "utrecht-heading-4" };
+function Ut(e, t, n, a, o, l) {
+  return s(), r("h4", bt, [
+    c(e.$slots, "default")
+  ]);
+}
+const Tr = /* @__PURE__ */ i(vt, [["render", Ut]]), kt = d({
+  name: "UtrechtHeading5"
+});
+const qt = { class: "utrecht-heading-5" };
+function St(e, t, n, a, o, l) {
+  return s(), r("h5", qt, [
+    c(e.$slots, "default")
+  ]);
+}
+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) {
+  return s(), r("h6", Lt, [
+    c(e.$slots, "default")
+  ]);
+}
+const Dr = /* @__PURE__ */ i(Bt, [["render", xt]]), Ct = d({
+  name: "UtrechtImage",
+  props: {
+    photo: {
+      type: Boolean,
+      default: !1,
+      required: !1
+    }
+  }
+}), Ft = ["alt", "src", "height", "width"];
+function Ht(e, t, n, a, o, l) {
+  var _, g, f;
+  return s(), r("img", u({ class: "utrecht-img" }, e.$attrs, {
+    class: { "utrecht-img--photo": e.photo },
+    alt: (_ = e.$attrs) == null ? void 0 : _.alt,
+    src: e.$attrs.src,
+    height: (g = e.$attrs) == null ? void 0 : g.height,
+    width: (f = e.$attrs) == null ? void 0 : f.width
+  }), null, 16, Ft);
+}
+const Ir = /* @__PURE__ */ i(Ct, [["render", Ht]]), Tt = d({
+  name: "UtrechtLinkSocial",
+  props: {
+    external: {
+      type: Boolean,
+      default: !1,
+      required: !1
+    }
+  }
+});
+const Vt = ["rel"];
+function Dt(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, Vt);
+}
+const Nr = /* @__PURE__ */ i(Tt, [["render", Dt]]), It = d({
+  name: "UtrechtListSocial",
+  props: {
+    external: {
+      type: Boolean,
+      default: !1,
+      required: !1
+    }
+  }
+});
+function Nt(e, t, n, a, o, l) {
+  return s(), r("ul", u({ class: "utrecht-list-social" }, e.$attrs), [
+    c(e.$slots, "default")
+  ], 16);
+}
+const wr = /* @__PURE__ */ i(It, [["render", Nt]]), wt = d({
+  name: "UtrechtListSocialItem"
+});
+function Pt(e, t, n, a, o, l) {
+  return s(), r("li", u({ class: "utrecht-list-social__item" }, e.$attrs), [
+    c(e.$slots, "default")
+  ], 16);
+}
+const Pr = /* @__PURE__ */ i(wt, [["render", Pt]]), Mt = d({
+  name: "UtrechtOrderedList"
+});
+function Rt(e, t, n, a, o, l) {
+  return s(), r("ol", u({ class: "utrecht-ordered-list" }, e.$attrs), [
+    c(e.$slots, "default")
+  ], 16);
+}
+const Mr = /* @__PURE__ */ i(Mt, [["render", Rt]]), At = d({
+  name: "UtrechtOrderedListItem"
+});
+function Et(e, t, n, a, o, l) {
+  return s(), r("li", u({ class: "utrecht-ordered-list__item" }, e.$attrs), [
+    c(e.$slots, "default")
+  ], 16);
+}
+const Rr = /* @__PURE__ */ i(At, [["render", Et]]), Ot = d({
+  name: "UtrechtNumberValue",
+  props: {
+    value: { type: [Number, String], required: !1, default: void 0 }
+  }
+});
+const jt = ["value"];
+function zt(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-value-number"
+  }, [
+    c(e.$slots, "default")
+  ], 8, jt);
+}
+const Ar = /* @__PURE__ */ i(Ot, [["render", zt]]), Gt = d({
+  name: "UtrechtPage"
+});
+const Kt = { class: "utrecht-page" };
+function Jt(e, t, n, a, o, l) {
+  return s(), r("div", Kt, [
+    c(e.$slots, "default")
+  ]);
+}
+const Er = /* @__PURE__ */ i(Gt, [["render", Jt]]), Wt = d({
+  name: "UtrechtPageContent"
+});
+const Qt = { class: "utrecht-page-content" };
+function Xt(e, t, n, a, o, l) {
+  return s(), r("div", Qt, [
+    c(e.$slots, "default")
+  ]);
+}
+const Or = /* @__PURE__ */ i(Wt, [["render", Xt]]), Yt = d({
+  name: "UtrechtPageFooter"
+});
+const Zt = { class: "utrecht-page-footer" };
+function es(e, t, n, a, o, l) {
+  return s(), r("footer", Zt, [
+    c(e.$slots, "default")
+  ]);
+}
+const jr = /* @__PURE__ */ i(Yt, [["render", es]]), ts = d({
+  name: "UtrechtPageHeader"
+});
+const ss = { class: "utrecht-page-header" };
+function rs(e, t, n, a, o, l) {
+  return s(), r("header", ss, [
+    c(e.$slots, "default")
+  ]);
+}
+const zr = /* @__PURE__ */ i(ts, [["render", rs]]), ns = d({
+  name: "UtrechtParagraph",
+  props: {
+    lead: { type: Boolean, required: !1, default: !1 },
+    small: { type: Boolean, required: !1, default: !1 }
+  }
+});
+const as = {
+  key: 0,
+  class: "utrecht-paragraph__small"
+};
+function os(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, [
+      c(e.$slots, "default")
+    ])) : c(e.$slots, "default", { key: 1 })
+  ], 2);
+}
+const Gr = /* @__PURE__ */ i(ns, [["render", os]]), cs = d({
+  name: "UtrechtRadioButton",
+  props: {
+    invalid: { type: Boolean, required: !1 },
+    modelValue: { type: [String, Number, Boolean], required: !1, default: "" }
+  },
+  setup(e, { emit: t }) {
+    return {
+      value: $(e, t)
+    };
+  }
+});
+const ds = ["aria-invalid"];
+function is(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)), [
+    [H, e.value]
+  ]);
+}
+const Kr = /* @__PURE__ */ i(cs, [["render", is]]), ls = d({
+  name: "UtrechtSelect",
+  props: {
+    invalid: { type: Boolean, required: !1 },
+    readonly: { type: Boolean, required: !1 },
+    options: { type: [Array, Object], required: !0 },
+    modelValue: { type: [String, Number, Boolean], required: !1, default: "" }
+  },
+  setup(e, { emit: t }) {
+    return {
+      selected: $(e, t)
+    };
+  }
+});
+const _s = ["aria-invalid", "readonly"], us = ["value", "disabled"];
+function ps(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,
+    class: p([
+      { "utrecht-select--invalid": e.invalid },
+      { "utrecht-select--readonly": e.readonly },
+      "utrecht-select--html-select",
+      "utrecht-select"
+    ]),
+    readonly: e.readonly
+  }, [
+    e.options && e.options.length > 0 ? (s(!0), r(T, { key: 0 }, V(e.options, ({ value: _, label: g, disabled: f }) => (s(), r("option", {
+      key: _,
+      value: _,
+      class: p([
+        { "utrecht-select__option--disabled": f },
+        "utrecht-select__option"
+      ]),
+      disabled: f
+    }, b(g), 11, us))), 128)) : U("", !0)
+  ], 10, _s)), [
+    [D, e.selected]
+  ]);
+}
+const Jr = /* @__PURE__ */ i(ls, [["render", ps]]), $s = d({
+  name: "UtrechtSeparator"
+});
+function fs(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({
+  name: "UtrechtSkipLink",
+  props: {
+    href: {
+      type: String,
+      default: void 0,
+      required: !1
+    }
+  }
+});
+const ms = ["href"];
+function ys(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);
+}
+const Qr = /* @__PURE__ */ i(hs, [["render", ys]]), gs = d({
+  name: "UtrechtStrong"
+});
+function vs(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(gs, [["render", vs]]), bs = d({
+  name: "UtrechtTable"
+});
+const Us = { class: "utrecht-table" };
+function ks(e, t, n, a, o, l) {
+  return s(), r("table", Us, [
+    c(e.$slots, "default")
+  ]);
+}
+const Yr = /* @__PURE__ */ i(bs, [["render", ks]]), qs = d({
+  name: "UtrechtTableBody"
+}), Ss = { class: "utrecht-table__body" };
+function Bs(e, t, n, a, o, l) {
+  return s(), r("tbody", Ss, [
+    c(e.$slots, "default")
+  ]);
+}
+const Zr = /* @__PURE__ */ i(qs, [["render", Bs]]), Ls = d({
+  name: "UtrechtTableCaption"
+}), xs = { class: "utrecht-table__caption" };
+function Cs(e, t, n, a, o, l) {
+  return s(), r("caption", xs, [
+    c(e.$slots, "default")
+  ]);
+}
+const en = /* @__PURE__ */ i(Ls, [["render", Cs]]), Fs = d({
+  name: "UtrechtTableCell"
+}), Hs = { class: "utrecht-table__cell" };
+function Ts(e, t, n, a, o, l) {
+  return s(), r("td", Hs, [
+    c(e.$slots, "default")
+  ]);
+}
+const tn = /* @__PURE__ */ i(Fs, [["render", Ts]]), Vs = d({
+  name: "UtrechtTableFooter"
+}), Ds = { class: "utrecht-table__footer" };
+function Is(e, t, n, a, o, l) {
+  return s(), r("tfoot", Ds, [
+    c(e.$slots, "default")
+  ]);
+}
+const sn = /* @__PURE__ */ i(Vs, [["render", Is]]), Ns = d({
+  name: "UtrechtTableHeader"
+}), ws = { class: "utrecht-table__header" };
+function Ps(e, t, n, a, o, l) {
+  return s(), r("thead", ws, [
+    c(e.$slots, "default")
+  ]);
+}
+const rn = /* @__PURE__ */ i(Ns, [["render", Ps]]), Ms = d({
+  name: "UtrechtTableHeaderCell"
+}), Rs = { class: "utrecht-table__header-cell" };
+function As(e, t, n, a, o, l) {
+  return s(), r("th", Rs, [
+    c(e.$slots, "default")
+  ]);
+}
+const nn = /* @__PURE__ */ i(Ms, [["render", As]]), Es = d({
+  name: "UtrechtTableRow"
+}), Os = { class: "utrecht-table__row" };
+function js(e, t, n, a, o, l) {
+  return s(), r("tr", Os, [
+    c(e.$slots, "default")
+  ]);
+}
+const an = /* @__PURE__ */ i(Es, [["render", js]]), zs = d({
+  name: "UtrechtTextarea",
+  props: {
+    dir: { type: String, required: !1, default: "auto" },
+    invalid: { type: Boolean, required: !1 },
+    modelValue: { type: [String, Number, Boolean], require: !1, default: "" }
+  },
+  setup(e, { emit: t }) {
+    return {
+      value: $(e, t)
+    };
+  }
+});
+const Gs = ["aria-invalid", "dir"];
+function Ks(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)), [
+    [L, e.value]
+  ]);
+}
+const on = /* @__PURE__ */ i(zs, [["render", Ks]]), Js = d({
+  name: "UtrechtTextbox",
+  props: {
+    dir: { type: String, required: !1, default: "auto" },
+    invalid: { type: Boolean, required: !1 },
+    modelValue: { type: [String, Number, Boolean], require: !1, default: "" }
+  },
+  setup(e, { emit: t }) {
+    return {
+      value: $(e, t)
+    };
+  }
+});
+const Ws = ["aria-invalid", "dir"];
+function Qs(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)), [
+    [L, e.value]
+  ]);
+}
+const cn = /* @__PURE__ */ i(Js, [["render", Qs]]), Xs = d({
+  name: "UtrechtUnorderedList"
+});
+function Ys(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({
+  name: "UtrechtOrderedListItem"
+});
+function er(e, t, n, a, o, l) {
+  return s(), r("li", u({ class: "utrecht-ordered-list__item" }, e.$attrs), [
+    c(e.$slots, "default")
+  ], 16);
+}
+const ln = /* @__PURE__ */ i(Zs, [["render", er]]), tr = d({
+  name: "UtrechtURLValue"
+});
+const sr = {
+  translate: "no",
+  class: "utrecht-url"
+};
+function rr(e, t, n, a, o, l) {
+  return s(), r("bdi", sr, [
+    c(e.$slots, "default")
+  ]);
+}
+const _n = /* @__PURE__ */ i(tr, [["render", rr]]);
+export {
+  ar as AlertDialog,
+  or as Article,
+  cr as BadgeCounter,
+  dr as BadgeStatus,
+  ir as BreadcrumbLink,
+  lr as BreadcrumbNav,
+  _r as Button,
+  ur as ButtonGroup,
+  pr as Checkbox,
+  $r as Code,
+  fr as CodeBlock,
+  hr as DataList,
+  mr as DataListActions,
+  yr as DataListItem,
+  gr as DataListKey,
+  vr 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,
+  le as Heading,
+  Cr as Heading1,
+  Fr as Heading2,
+  Hr as Heading3,
+  Tr as Heading4,
+  Vr as Heading5,
+  Dr as Heading6,
+  Ir as Image,
+  X as Link,
+  Nr as LinkSocial,
+  wr as ListSocial,
+  Pr as ListSocialItem,
+  Ar as NumberValue,
+  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 URLValue,
+  dn as UnorderedList,
+  ln as UnorderedListItem
+};