@utrecht/component-library-vue 1.0.0-alpha.3 → 1.0.0-alpha.32

package/README.md

@@ -0,0 +1,89 @@
+<!-- @license CC0-1.0 -->
+
+# Component library for Vue apps
+
+The `@utrecht/component-library-vue` package contains Vue implementations of various components. You can use this package in Vue apps, both client side and server side, to render the right HTML elements with the Utrecht design system class names.
+
+The CSS components that implement the Utrecht design system class names are published in a separate npm package, so don't forget to install and include `@utrecht/component-library-css` too for the styling of the white-label components, as well as a package with design tokens for your theme.
+
+## Stability of the components
+
+The Vue components are released as _alpha_ version, which means the components are still work in progress and it is likely that some APIs will between releases.
+
+Make sure you specify the exact version as dependency, so you can schedule to upgrade to the latest version when you have time to test for regression bugs.
+
+## Vue Component or Vue Web Component?
+
+We currently have two packages with Vue components, and you might wonder which to choose. Our Web Components are still experimental and since the Shadow DOM prevents you from simply extending the CSS implementation, you wouldn't be able to easily tweak it to your needs. Therefore we suggest using the Vue components when they are available.
+
+In the future this advice might change since some components could be released exclusively as Web Component while others will remain available as CSS component with Vue wrapper only.
+
+## Getting started
+
+```shell
+npm install --save-dev --save-exact @utrecht/component-library-vue
+```
+
+With this package available, you can render any component from the library in your page. For example:
+
+```vue
+<script setup lang="ts">
+import { Document, Heading1 } from "@utrecht/component-library-vue";
+</script>
+
+<template>
+  <!-- Class name to apply the design tokens from the theme -->
+  <Document class="utrecht-theme">
+    <Heading1>Page styled with NL Design System</Heading1>
+  </Document>
+</template>
+
+<!--Package with Utrecht design tokens for the white-label components
+Substitute with your another theme for other organisations. -->
+<style src="@utrecht/design-tokens/dist/index.css"></style>
+
+<style src="@utrecht/component-library-vue/dist/style.css"></style>
+```
+
+## Components overview
+
+We make components for Vue available when needed in a project. Not every component is available yet, and we welcome you to discuss contributions.
+
+Currently the following components are available:
+
+```js
+import {
+  Article,
+  BadgeStatus,
+  Button,
+  ButtonGroup,
+  Checkbox,
+  Document,
+  FormField,
+  FormFieldset,
+  FormFieldsetLegend,
+  FormLabel,
+  Heading,
+  Heading1,
+  Heading2,
+  Heading3,
+  Heading4,
+  Heading5,
+  Heading6,
+  Link,
+  Paragraph,
+  Page,
+  PageContent,
+  PageFooter,
+  PageHeader,
+  RadioButton,
+  Select,
+  SelectOption,
+  Textbox,
+  Textarea,
+} from "@utrecht/component-library-vue";
+```
+
+## Contributing
+
+When a project needs a component from the design system that already exists as CSS component with an HTML example, they will create a Vue component for it internally. Projects that have new Vue components can let the design system team know and create a pull request to include it in this component library. No

package/dist/UtrechtBadgeStatus.vue.d.ts

@@ -0,0 +1,12 @@
+declare const _sfc_main: import("vue").DefineComponent<{
+    status: {
+        type: StringConstructor;
+        required: false;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    status: {
+        type: StringConstructor;
+        required: false;
+    };
+}>>, {}>;
+export default _sfc_main;

package/dist/UtrechtButton.vue.d.ts

@@ -0,0 +1,39 @@
+declare const _sfc_main: import("vue").DefineComponent<{
+    appearance: {
+        type: StringConstructor;
+        required: false;
+    };
+    busy: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    type: {
+        type: StringConstructor;
+        required: false;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    appearance: {
+        type: StringConstructor;
+        required: false;
+    };
+    busy: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    type: {
+        type: StringConstructor;
+        required: false;
+    };
+}>>, {
+    busy: boolean;
+    disabled: boolean;
+}>;
+export default _sfc_main;

package/dist/UtrechtCheckbox.vue.d.ts

@@ -0,0 +1,67 @@
+declare const _sfc_main: import("vue").DefineComponent<{
+    checked: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    invalid: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    modelValue: {
+        type: StringConstructor;
+        required: false;
+    };
+    required: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    value: {
+        type: StringConstructor;
+        required: false;
+    };
+}, {
+    isSet: (arg: any) => arg is Set<any>;
+    isChecked: <T = any>(modelValue: T, value: T) => boolean;
+    checkValue: <T_1 = any>(modelValue: T_1 | T_1[] | Set<T_1>, value: T_1) => T_1 | T_1[] | Set<T_1>;
+    uncheckValue: <T_2 = any>(modelValue: T_2, value: T_2) => string | T_2[] | Set<T_2>;
+}, unknown, {}, {
+    $_handleInputEvent(_evt: InputEvent): void;
+    $_isChecked(): any;
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    checked: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    invalid: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    modelValue: {
+        type: StringConstructor;
+        required: false;
+    };
+    required: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    value: {
+        type: StringConstructor;
+        required: false;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    required: boolean;
+    disabled: boolean;
+    checked: boolean;
+    invalid: boolean;
+}>;
+export default _sfc_main;

package/dist/UtrechtFormLabel.vue.d.ts

@@ -0,0 +1,31 @@
+declare const _sfc_main: import("vue").DefineComponent<{
+    checked: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    type: {
+        type: StringConstructor;
+        required: false;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    checked: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    type: {
+        type: StringConstructor;
+        required: false;
+    };
+}>>, {
+    disabled: boolean;
+    checked: boolean;
+}>;
+export default _sfc_main;

package/dist/UtrechtHeading.vue.d.ts

@@ -0,0 +1,12 @@
+declare const _sfc_main: import("vue").DefineComponent<{
+    level: {
+        type: NumberConstructor;
+        required: true;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    level: {
+        type: NumberConstructor;
+        required: true;
+    };
+}>>, {}>;
+export default _sfc_main;

package/dist/UtrechtLink.vue.d.ts

@@ -0,0 +1,14 @@
+declare const _sfc_main: import("vue").DefineComponent<{
+    external: {
+        type: BooleanConstructor;
+        required: false;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    external: {
+        type: BooleanConstructor;
+        required: false;
+    };
+}>>, {
+    external: boolean;
+}>;
+export default _sfc_main;

package/dist/UtrechtParagraph.vue.d.ts

@@ -0,0 +1,14 @@
+declare const _sfc_main: import("vue").DefineComponent<{
+    lead: {
+        type: BooleanConstructor;
+        required: false;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    lead: {
+        type: BooleanConstructor;
+        required: false;
+    };
+}>>, {
+    lead: boolean;
+}>;
+export default _sfc_main;

package/dist/UtrechtRadioButton.vue.d.ts

@@ -0,0 +1,64 @@
+declare const _sfc_main: import("vue").DefineComponent<{
+    checked: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    invalid: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    modelValue: {
+        type: StringConstructor;
+        required: false;
+    };
+    required: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    value: {
+        type: StringConstructor;
+        required: false;
+    };
+}, {
+    isChecked: <T = any>(modelValue: T, value: T) => boolean;
+}, unknown, {}, {
+    $_handleInputEvent(evtTarget: HTMLInputElement): void;
+    $_isChecked(): any;
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    checked: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    invalid: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    modelValue: {
+        type: StringConstructor;
+        required: false;
+    };
+    required: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    value: {
+        type: StringConstructor;
+        required: false;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    required: boolean;
+    disabled: boolean;
+    checked: boolean;
+    invalid: boolean;
+}>;
+export default _sfc_main;

package/dist/UtrechtSelect.vue.d.ts

@@ -0,0 +1,51 @@
+declare const _sfc_main: import("vue").DefineComponent<{
+    disabled: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    invalid: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    modelValue: {
+        type: StringConstructor;
+        required: false;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    required: {
+        type: BooleanConstructor;
+        required: false;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    disabled: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    invalid: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    modelValue: {
+        type: StringConstructor;
+        required: false;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    required: {
+        type: BooleanConstructor;
+        required: false;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    required: boolean;
+    disabled: boolean;
+    invalid: boolean;
+    readonly: boolean;
+}>;
+export default _sfc_main;

package/dist/UtrechtSelectOption.vue.d.ts

@@ -0,0 +1,14 @@
+declare const _sfc_main: import("vue").DefineComponent<{
+    disabled: {
+        type: BooleanConstructor;
+        required: false;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    disabled: {
+        type: BooleanConstructor;
+        required: false;
+    };
+}>>, {
+    disabled: boolean;
+}>;
+export default _sfc_main;

package/dist/UtrechtTextarea.vue.d.ts

@@ -0,0 +1,59 @@
+declare const _sfc_main: import("vue").DefineComponent<{
+    disabled: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    invalid: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    modelValue: {
+        type: StringConstructor;
+        required: false;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    required: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    type: {
+        type: StringConstructor;
+        required: false;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    disabled: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    invalid: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    modelValue: {
+        type: StringConstructor;
+        required: false;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    required: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    type: {
+        type: StringConstructor;
+        required: false;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    required: boolean;
+    disabled: boolean;
+    invalid: boolean;
+    readonly: boolean;
+}>;
+export default _sfc_main;

package/dist/UtrechtTextbox.vue.d.ts

@@ -0,0 +1,59 @@
+declare const _sfc_main: import("vue").DefineComponent<{
+    disabled: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    invalid: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    modelValue: {
+        type: StringConstructor;
+        required: false;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    required: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    type: {
+        type: StringConstructor;
+        required: false;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    disabled: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    invalid: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    modelValue: {
+        type: StringConstructor;
+        required: false;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    required: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    type: {
+        type: StringConstructor;
+        required: false;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    required: boolean;
+    disabled: boolean;
+    invalid: boolean;
+    readonly: boolean;
+}>;
+export default _sfc_main;

package/dist/component-library-vue.es.js

@@ -26,16 +26,17 @@ var _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _sfc_main$q = {};
-const _hoisted_1$m = { class: "utrecht-article" };
+const _sfc_main$r = {};
+const _hoisted_1$n = { class: "utrecht-article" };
 function _sfc_render$f(_ctx, _cache) {
-  return openBlock(), createElementBlock("article", _hoisted_1$m, [
+  return openBlock(), createElementBlock("article", _hoisted_1$n, [
     renderSlot(_ctx.$slots, "default")
   ]);
 }
-var UtrechtArticle = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["render", _sfc_render$f]]);
+var UtrechtArticle = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["render", _sfc_render$f]]);
 var index_scss_vue_type_style_index_0_src_70491734_lang = "";
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
+  __name: "UtrechtBadgeStatus",
   props: {
     status: null
   },
@@ -51,9 +52,10 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var index_scss_vue_type_style_index_0_src_46e8842a_lang = "";
-const _hoisted_1$l = ["aria-busy", "disabled"];
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
+var index_scss_vue_type_style_index_0_src_527c33ba_lang = "";
+const _hoisted_1$m = ["aria-busy", "disabled", "type"];
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
+  __name: "UtrechtButton",
   props: {
     appearance: null,
     busy: { type: Boolean },
@@ -72,22 +74,23 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
           "utrecht-button--subtle": __props.appearance === "subtle-button"
         }]),
         "aria-busy": __props.busy || void 0,
-        disabled: __props.disabled
+        disabled: __props.disabled,
+        type: __props.type || "button"
       }, [
         renderSlot(_ctx.$slots, "default")
-      ], 10, _hoisted_1$l);
+      ], 10, _hoisted_1$m);
     };
   }
 });
 var index_scss_vue_type_style_index_0_src_2303b246_lang = "";
-const _sfc_main$n = {};
-const _hoisted_1$k = { class: "utrecht-button-group" };
+const _sfc_main$o = {};
+const _hoisted_1$l = { class: "utrecht-button-group" };
 function _sfc_render$e(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$k, [
+  return openBlock(), createElementBlock("div", _hoisted_1$l, [
     renderSlot(_ctx.$slots, "default")
   ]);
 }
-var UtrechtButtonGroup = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", _sfc_render$e]]);
+var UtrechtButtonGroup = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render$e]]);
 function looseCompareArrays(a, b) {
   if (a.length !== b.length)
     return false;
@@ -105,6 +108,11 @@ function looseEqual(a, b) {
   if (aValidType || bValidType) {
     return aValidType && bValidType ? a.getTime() === b.getTime() : false;
   }
+  aValidType = isSymbol(a);
+  bValidType = isSymbol(b);
+  if (aValidType || bValidType) {
+    return a === b;
+  }
   aValidType = isArray(a);
   bValidType = isArray(b);
   if (aValidType || bValidType) {
@@ -132,10 +140,13 @@ function looseEqual(a, b) {
   return String(a) === String(b);
 }
 const isArray = Array.isArray;
-const isDate = (val) => val instanceof Date;
+const isDate = (val) => toTypeString(val) === "[object Date]";
+const isSymbol = (val) => typeof val === "symbol";
 const isObject = (val) => val !== null && typeof val === "object";
+const objectToString = Object.prototype.toString;
+const toTypeString = (value) => objectToString.call(value);
 var index_scss_vue_type_style_index_0_src_a26e3682_lang = "";
-const _hoisted_1$j = ["aria-invalid", "checked", "disabled", "required", "value"];
+const _hoisted_1$k = ["aria-invalid", "checked", "disabled", "required", "value"];
 const isSet = (arg) => arg instanceof Set;
 const isChecked$1 = (modelValue, value) => {
   if (Array.isArray(modelValue)) {
@@ -178,7 +189,8 @@ const __default__$1 = {
     }
   }
 };
-const _sfc_main$m = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$1), {
+const _sfc_main$n = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$1), {
+  __name: "UtrechtCheckbox",
   props: {
     checked: { type: Boolean },
     disabled: { type: Boolean },
@@ -204,48 +216,49 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
         required: __props.required,
         value: __props.value,
         onInput: _cache[0] || (_cache[0] = ($event) => _ctx.$_handleInputEvent($event))
-      }, null, 42, _hoisted_1$j);
+      }, null, 42, _hoisted_1$k);
     };
   }
 }));
 var index_scss_vue_type_style_index_0_src_377dc625_lang = "";
-const _sfc_main$l = {};
-const _hoisted_1$i = { class: "utrecht-document" };
+const _sfc_main$m = {};
+const _hoisted_1$j = { class: "utrecht-document" };
 function _sfc_render$d(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$i, [
+  return openBlock(), createElementBlock("div", _hoisted_1$j, [
     renderSlot(_ctx.$slots, "default")
   ]);
 }
-var UtrechtDocument = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$d]]);
+var UtrechtDocument = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", _sfc_render$d]]);
 var index_scss_vue_type_style_index_0_src_0334bbae_lang = "";
-const _sfc_main$k = {};
-const _hoisted_1$h = { class: "utrecht-form-field" };
+const _sfc_main$l = {};
+const _hoisted_1$i = { class: "utrecht-form-field" };
 function _sfc_render$c(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$h, [
+  return openBlock(), createElementBlock("div", _hoisted_1$i, [
     renderSlot(_ctx.$slots, "default")
   ]);
 }
-var UtrechtFormField = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$c]]);
+var UtrechtFormField = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$c]]);
 var index_scss_vue_type_style_index_0_src_7d9b1ad2_lang = "";
-const _sfc_main$j = {};
-const _hoisted_1$g = { class: "utrecht-form-fieldset" };
+const _sfc_main$k = {};
+const _hoisted_1$h = { class: "utrecht-form-fieldset" };
 function _sfc_render$b(_ctx, _cache) {
-  return openBlock(), createElementBlock("fieldset", _hoisted_1$g, [
+  return openBlock(), createElementBlock("fieldset", _hoisted_1$h, [
     renderSlot(_ctx.$slots, "default")
   ]);
 }
-var UtrechtFormFieldset = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$b]]);
+var UtrechtFormFieldset = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$b]]);
 var index_scss_vue_type_style_index_0_src_557ef4dc_lang = "";
-const _sfc_main$i = {};
-const _hoisted_1$f = { class: "utrecht-form-fieldset__legend" };
+const _sfc_main$j = {};
+const _hoisted_1$g = { class: "utrecht-form-fieldset__legend" };
 function _sfc_render$a(_ctx, _cache) {
-  return openBlock(), createElementBlock("legend", _hoisted_1$f, [
+  return openBlock(), createElementBlock("legend", _hoisted_1$g, [
     renderSlot(_ctx.$slots, "default")
   ]);
 }
-var UtrechtFormFieldsetLegend = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$a]]);
+var UtrechtFormFieldsetLegend = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$a]]);
 var index_scss_vue_type_style_index_0_src_e35723f4_lang = "";
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
+  __name: "UtrechtFormLabel",
   props: {
     checked: { type: Boolean },
     disabled: { type: Boolean },
@@ -266,6 +279,60 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     };
   }
 });
+var index_scss_vue_type_style_index_0_src_0797b6fe_scoped_true_lang = "";
+var index_scss_vue_type_style_index_1_src_0797b6fe_scoped_true_lang = "";
+var index_scss_vue_type_style_index_2_src_0797b6fe_scoped_true_lang = "";
+var index_scss_vue_type_style_index_3_src_0797b6fe_scoped_true_lang = "";
+var index_scss_vue_type_style_index_4_src_0797b6fe_scoped_true_lang = "";
+var index_scss_vue_type_style_index_5_src_0797b6fe_scoped_true_lang = "";
+const _hoisted_1$f = {
+  key: 0,
+  class: "utrecht-heading-1"
+};
+const _hoisted_2 = {
+  key: 1,
+  class: "utrecht-heading-2"
+};
+const _hoisted_3 = {
+  key: 2,
+  class: "utrecht-heading-3"
+};
+const _hoisted_4 = {
+  key: 3,
+  class: "utrecht-heading-4"
+};
+const _hoisted_5 = {
+  key: 4,
+  class: "utrecht-heading-5"
+};
+const _hoisted_6 = {
+  key: 5,
+  class: "utrecht-heading-6"
+};
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
+  __name: "UtrechtHeading",
+  props: {
+    level: null
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return __props.level == 1 ? (openBlock(), createElementBlock("h1", _hoisted_1$f, [
+        renderSlot(_ctx.$slots, "default", {}, void 0, true)
+      ])) : __props.level == 2 ? (openBlock(), createElementBlock("h2", _hoisted_2, [
+        renderSlot(_ctx.$slots, "default", {}, void 0, true)
+      ])) : __props.level == 3 ? (openBlock(), createElementBlock("h3", _hoisted_3, [
+        renderSlot(_ctx.$slots, "default", {}, void 0, true)
+      ])) : __props.level == 4 ? (openBlock(), createElementBlock("h4", _hoisted_4, [
+        renderSlot(_ctx.$slots, "default", {}, void 0, true)
+      ])) : __props.level == 5 ? (openBlock(), createElementBlock("h5", _hoisted_5, [
+        renderSlot(_ctx.$slots, "default", {}, void 0, true)
+      ])) : (openBlock(), createElementBlock("h6", _hoisted_6, [
+        renderSlot(_ctx.$slots, "default", {}, void 0, true)
+      ]));
+    };
+  }
+});
+var UtrechtHeading = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-0797b6fe"]]);
 var index_scss_vue_type_style_index_0_src_75371619_lang = "";
 const _sfc_main$g = {};
 const _hoisted_1$e = { class: "utrecht-heading-1" };
@@ -322,6 +389,7 @@ function _sfc_render$4(_ctx, _cache) {
 var UtrechtHeading6 = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$4]]);
 var index_scss_vue_type_style_index_0_src_57003daf_lang = "";
 const _sfc_main$a = /* @__PURE__ */ defineComponent({
+  __name: "UtrechtLink",
   props: {
     external: { type: Boolean }
   },
@@ -375,6 +443,7 @@ function _sfc_render(_ctx, _cache) {
 var UtrechtPageHeader = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render]]);
 var index_scss_vue_type_style_index_0_src_aebee898_lang = "";
 const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  __name: "UtrechtParagraph",
   props: {
     lead: { type: Boolean }
   },
@@ -404,6 +473,7 @@ const __default__ = {
   }
 };
 const _sfc_main$4 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__), {
+  __name: "UtrechtRadioButton",
   props: {
     checked: { type: Boolean },
     disabled: { type: Boolean },
@@ -436,6 +506,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
 var index_scss_vue_type_style_index_0_src_5b35235f_lang = "";
 const _hoisted_1$3 = ["aria-invalid", "disabled", "readonly", "required", "value"];
 const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "UtrechtSelect",
   props: {
     disabled: { type: Boolean },
     invalid: { type: Boolean },
@@ -468,6 +539,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
 var index_scss_vue_type_style_index_0_src_3505c666_lang = "";
 const _hoisted_1$2 = ["disabled"];
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "UtrechtSelectOption",
   props: {
     disabled: { type: Boolean }
   },
@@ -487,6 +559,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
 var index_scss_vue_type_style_index_0_src_5758ba1d_lang = "";
 const _hoisted_1$1 = ["aria-invalid", "disabled", "readonly", "required", "value"];
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "UtrechtTextarea",
   props: {
     disabled: { type: Boolean },
     invalid: { type: Boolean },
@@ -518,6 +591,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
 var index_scss_vue_type_style_index_0_src_ea555f8a_lang = "";
 const _hoisted_1 = ["aria-invalid", "disabled", "readonly", "required", "value"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "UtrechtTextbox",
   props: {
     disabled: { type: Boolean },
     invalid: { type: Boolean },
@@ -546,4 +620,4 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-export { UtrechtArticle as Article, _sfc_main$p as BadgeStatus, _sfc_main$o as Button, UtrechtButtonGroup as ButtonGroup, _sfc_main$m as Checkbox, UtrechtDocument as Document, UtrechtFormField as FormField, UtrechtFormFieldset as FormFieldset, UtrechtFormFieldsetLegend as FormFieldsetLegend, _sfc_main$h as FormLabel, UtrechtHeading1 as Heading1, UtrechtHeading2 as Heading2, UtrechtHeading3 as Heading3, UtrechtHeading4 as Heading4, UtrechtHeading5 as Heading5, UtrechtHeading6 as Heading6, _sfc_main$a as Link, UtrechtPage as Page, UtrechtPageContent as PageContent, UtrechtPageFooter as PageFooter, UtrechtPageHeader as PageHeader, _sfc_main$5 as Paragraph, _sfc_main$4 as RadioButton, _sfc_main$3 as Select, _sfc_main$2 as SelectOption, _sfc_main$1 as Textarea, _sfc_main as Textbox };
+export { UtrechtArticle as Article, _sfc_main$q as BadgeStatus, _sfc_main$p as Button, UtrechtButtonGroup as ButtonGroup, _sfc_main$n as Checkbox, UtrechtDocument as Document, UtrechtFormField as FormField, UtrechtFormFieldset as FormFieldset, UtrechtFormFieldsetLegend as FormFieldsetLegend, _sfc_main$i as FormLabel, UtrechtHeading as Heading, UtrechtHeading1 as Heading1, UtrechtHeading2 as Heading2, UtrechtHeading3 as Heading3, UtrechtHeading4 as Heading4, UtrechtHeading5 as Heading5, UtrechtHeading6 as Heading6, _sfc_main$a as Link, UtrechtPage as Page, UtrechtPageContent as PageContent, UtrechtPageFooter as PageFooter, UtrechtPageHeader as PageHeader, _sfc_main$5 as Paragraph, _sfc_main$4 as RadioButton, _sfc_main$3 as Select, _sfc_main$2 as SelectOption, _sfc_main$1 as Textarea, _sfc_main as Textbox };

package/dist/component-library-vue.umd.js

@@ -1 +1 @@
-var at=Object.defineProperty,rt=Object.defineProperties;var lt=Object.getOwnPropertyDescriptors;var B=Object.getOwnPropertySymbols;var ct=Object.prototype.hasOwnProperty,st=Object.prototype.propertyIsEnumerable;var g=(r,t,s)=>t in r?at(r,t,{enumerable:!0,configurable:!0,writable:!0,value:s}):r[t]=s,_=(r,t)=>{for(var s in t||(t={}))ct.call(t,s)&&g(r,s,t[s]);if(B)for(var s of B(t))st.call(t,s)&&g(r,s,t[s]);return r},u=(r,t)=>rt(r,lt(t));(function(r,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(r=typeof globalThis!="undefined"?globalThis:r||self,t(r["component-library-vue"]={},r.Vue))})(this,function(r,t){"use strict";var s="",c=(e,n)=>{const a=e.__vccOpts||e;for(const[l,o]of n)a[l]=o;return a};const p={},x={class:"utrecht-article"};function v(e,n){return t.openBlock(),t.createElementBlock("article",x,[t.renderSlot(e.$slots,"default")])}var C=c(p,[["render",v]]),dt="";const S=t.defineComponent({props:{status:null},setup(e){return(n,a)=>(t.openBlock(),t.createElementBlock("span",{class:t.normalizeClass(["utrecht-badge-status",{["utrecht-badge--"+e.status]:!0}])},[t.renderSlot(n.$slots,"default")],2))}});var it="";const q=["aria-busy","disabled"],E=t.defineComponent({props:{appearance:null,busy:{type:Boolean},disabled:{type:Boolean},type:null},setup(e){return(n,a)=>(t.openBlock(),t.createElementBlock("button",{class:t.normalizeClass(["utrecht-button",{"utrecht-button--busy":e.busy,"utrecht-button--disabled":e.disabled,"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"}]),"aria-busy":e.busy||void 0,disabled:e.disabled},[t.renderSlot(n.$slots,"default")],10,q))}});var ot="";const V={},H={class:"utrecht-button-group"};function U(e,n){return t.openBlock(),t.createElementBlock("div",H,[t.renderSlot(e.$slots,"default")])}var F=c(V,[["render",U]]);function A(e,n){if(e.length!==n.length)return!1;let a=!0;for(let l=0;a&&l<e.length;l++)a=d(e[l],n[l]);return a}function d(e,n){if(e===n)return!0;let a=f(e),l=f(n);if(a||l)return a&&l?e.getTime()===n.getTime():!1;if(a=h(e),l=h(n),a||l)return a&&l?A(e,n):!1;if(a=y(e),l=y(n),a||l){if(!a||!l)return!1;const o=Object.keys(e).length,nt=Object.keys(n).length;if(o!==nt)return!1;for(const i in e){const $=e.hasOwnProperty(i),k=n.hasOwnProperty(i);if($&&!k||!$&&k||!d(e[i],n[i]))return!1}}return String(e)===String(n)}const h=Array.isArray,f=e=>e instanceof Date,y=e=>e!==null&&typeof e=="object";var _t="";const P=["aria-invalid","checked","disabled","required","value"],m=e=>e instanceof Set,b=(e,n)=>Array.isArray(e)?e.includes(n):e instanceof Set?e.has(n):d(e,n),z=(e,n)=>Array.isArray(e)?[...e,n]:m(e)?new Set(e).add(n):n,I=(e,n)=>{if(Array.isArray(e))return e.filter(a=>a!==n);if(m(e)){const a=new Set(e);return a.delete(n),a}else return""},T={methods:{$_handleInputEvent(e){const{value:n,modelValue:a}=this,l=b(a,n)?I(a,n):z(a,n);this.$emit("update:modelValue",l)},$_isChecked(){return b(this.modelValue,this.value)}}},j=t.defineComponent(u(_({},T),{props:{checked:{type:Boolean},disabled:{type:Boolean},invalid:{type:Boolean},modelValue:null,required:{type:Boolean},value:null},emits:["update:modelValue"],setup(e){return(n,a)=>(t.openBlock(),t.createElementBlock("input",{type:"checkbox",class:t.normalizeClass(["utrecht-checkbox",{"utrecht-checkbox--checked":e.checked||n.$_isChecked(),"utrecht-checkbox--disabled":e.disabled,"utrecht-checkbox--invalid":e.invalid,"utrecht-checkbox--required":e.required}]),"aria-invalid":e.invalid||void 0,checked:typeof e.checked=="boolean"?e.checked:n.$_isChecked(),disabled:e.disabled,required:e.required,value:e.value,onInput:a[0]||(a[0]=l=>n.$_handleInputEvent(l))},null,42,P))}}));var ut="";const O={},w={class:"utrecht-document"};function D(e,n){return t.openBlock(),t.createElementBlock("div",w,[t.renderSlot(e.$slots,"default")])}var K=c(O,[["render",D]]),ht="";const L={},G={class:"utrecht-form-field"};function M(e,n){return t.openBlock(),t.createElementBlock("div",G,[t.renderSlot(e.$slots,"default")])}var R=c(L,[["render",M]]),ft="";const J={},N={class:"utrecht-form-fieldset"};function Q(e,n){return t.openBlock(),t.createElementBlock("fieldset",N,[t.renderSlot(e.$slots,"default")])}var W=c(J,[["render",Q]]),yt="";const X={},Y={class:"utrecht-form-fieldset__legend"};function Z(e,n){return t.openBlock(),t.createElementBlock("legend",Y,[t.renderSlot(e.$slots,"default")])}var ee=c(X,[["render",Z]]),mt="";const te=t.defineComponent({props:{checked:{type:Boolean},disabled:{type:Boolean},type:null},setup(e){return(n,a)=>(t.openBlock(),t.createElementBlock("label",{class:t.normalizeClass(["utrecht-form-label",{"utrecht-form-label--checked":e.checked,"utrecht-form-label--disabled":e.disabled,"utrecht-form-label--radio":e.type==="radio","utrecht-form-label--checkbox":e.type==="checkbox"}])},[t.renderSlot(n.$slots,"default")],2))}});var bt="";const ne={},ae={class:"utrecht-heading-1"};function re(e,n){return t.openBlock(),t.createElementBlock("h1",ae,[t.renderSlot(e.$slots,"default")])}var le=c(ne,[["render",re]]),$t="";const ce={},se={class:"utrecht-heading-2"};function de(e,n){return t.openBlock(),t.createElementBlock("h2",se,[t.renderSlot(e.$slots,"default")])}var ie=c(ce,[["render",de]]),kt="";const oe={},_e={class:"utrecht-heading-3"};function ue(e,n){return t.openBlock(),t.createElementBlock("h3",_e,[t.renderSlot(e.$slots,"default")])}var he=c(oe,[["render",ue]]),Bt="";const fe={},ye={class:"utrecht-heading-4"};function me(e,n){return t.openBlock(),t.createElementBlock("h4",ye,[t.renderSlot(e.$slots,"default")])}var be=c(fe,[["render",me]]),gt="";const $e={},ke={class:"utrecht-heading-5"};function Be(e,n){return t.openBlock(),t.createElementBlock("h5",ke,[t.renderSlot(e.$slots,"default")])}var ge=c($e,[["render",Be]]),pt="";const pe={},xe={class:"utrecht-heading-6"};function ve(e,n){return t.openBlock(),t.createElementBlock("h6",xe,[t.renderSlot(e.$slots,"default")])}var Ce=c(pe,[["render",ve]]),xt="";const Se=t.defineComponent({props:{external:{type:Boolean}},setup(e){return(n,a)=>(t.openBlock(),t.createElementBlock("a",{class:t.normalizeClass(["utrecht-link",{"utrecht-link--external":e.external}])},[t.renderSlot(n.$slots,"default")],2))}});var vt="";const qe={},Ee={class:"utrecht-page"};function Ve(e,n){return t.openBlock(),t.createElementBlock("div",Ee,[t.renderSlot(e.$slots,"default")])}var He=c(qe,[["render",Ve]]),Ct="";const Ue={},Fe={class:"utrecht-page-content"};function Ae(e,n){return t.openBlock(),t.createElementBlock("div",Fe,[t.renderSlot(e.$slots,"default")])}var Pe=c(Ue,[["render",Ae]]),St="";const ze={},Ie={class:"utrecht-page-footer"};function Te(e,n){return t.openBlock(),t.createElementBlock("footer",Ie,[t.renderSlot(e.$slots,"default")])}var je=c(ze,[["render",Te]]),qt="";const Oe={},we={class:"utrecht-page-header"};function De(e,n){return t.openBlock(),t.createElementBlock("header",we,[t.renderSlot(e.$slots,"default")])}var Ke=c(Oe,[["render",De]]),Et="";const Le=t.defineComponent({props:{lead:{type:Boolean}},setup(e){return(n,a)=>(t.openBlock(),t.createElementBlock("p",{class:t.normalizeClass(["utrecht-paragraph",{"utrecht-paragraph--lead":e.lead}])},[t.renderSlot(n.$slots,"default")],2))}});var Vt="";const Ge=["aria-invalid","checked","disabled","required","value"],Me=(e,n)=>d(e,n),Re={methods:{$_handleInputEvent(e){e.checked&&this.$emit("update:modelValue",this.value)},$_isChecked(){return typeof this.modelValue!="undefined"?Me(this.modelValue,this.value):this.checked}}},Je=t.defineComponent(u(_({},Re),{props:{checked:{type:Boolean},disabled:{type:Boolean},invalid:{type:Boolean},modelValue:null,required:{type:Boolean},value:null},emits:["update:modelValue"],setup(e){return(n,a)=>(t.openBlock(),t.createElementBlock("input",{type:"radio",class:t.normalizeClass(["utrecht-radio-button",{"utrecht-radio-button--checked":e.checked,"utrecht-radio-button--disabled":e.disabled,"utrecht-radio-button--invalid":e.invalid,"utrecht-radio-button--required":e.required}]),"aria-invalid":e.invalid||void 0,checked:n.$_isChecked(),disabled:e.disabled,required:e.required,value:e.value,onInput:a[0]||(a[0]=l=>n.$_handleInputEvent(l.target))},null,42,Ge))}}));var Ht="";const Ne=["aria-invalid","disabled","readonly","required","value"],Qe=t.defineComponent({props:{disabled:{type:Boolean},invalid:{type:Boolean},modelValue:null,readonly:{type:Boolean},required:{type:Boolean}},emits:["update:modelValue"],setup(e){return(n,a)=>(t.openBlock(),t.createElementBlock("select",{class:t.normalizeClass(["utrecht-select",{"utrecht-select--disabled":e.disabled,"utrecht-select--invalid":e.invalid,"utrecht-select--required":e.required,"utrecht-select--readonly":e.readonly}]),"aria-invalid":e.invalid||void 0,disabled:e.disabled,readonly:e.readonly,required:e.required,value:e.modelValue,onInput:a[0]||(a[0]=l=>n.$emit("update:modelValue",l.target.value))},[t.renderSlot(n.$slots,"default")],42,Ne))}});var Ut="";const We=["disabled"],Xe=t.defineComponent({props:{disabled:{type:Boolean}},setup(e){return(n,a)=>(t.openBlock(),t.createElementBlock("option",{class:t.normalizeClass(["utrecht-select__option",{"utrecht-select__option--disabled":e.disabled}]),disabled:e.disabled},[t.renderSlot(n.$slots,"default")],10,We))}});var Ft="";const Ye=["aria-invalid","disabled","readonly","required","value"],Ze=t.defineComponent({props:{disabled:{type:Boolean},invalid:{type:Boolean},modelValue:null,readonly:{type:Boolean},required:{type:Boolean},type:null},emits:["update:modelValue"],setup(e){return(n,a)=>(t.openBlock(),t.createElementBlock("textarea",{class:t.normalizeClass(["utrecht-textarea",{"utrecht-textarea--disabled":e.disabled,"utrecht-textarea--invalid":e.invalid,"utrecht-textarea--required":e.required,"utrecht-textarea--readonly":e.readonly}]),"aria-invalid":e.invalid||void 0,disabled:e.disabled,readonly:e.readonly,required:e.required,value:e.modelValue,onInput:a[0]||(a[0]=l=>n.$emit("update:modelValue",l.target.value))},null,42,Ye))}});var At="";const et=["aria-invalid","disabled","readonly","required","value"],tt=t.defineComponent({props:{disabled:{type:Boolean},invalid:{type:Boolean},modelValue:null,readonly:{type:Boolean},required:{type:Boolean},type:null},emits:["update:modelValue"],setup(e){return(n,a)=>(t.openBlock(),t.createElementBlock("input",{class:t.normalizeClass(["utrecht-textbox",{"utrecht-textbox--disabled":e.disabled,"utrecht-textbox--invalid":e.invalid,"utrecht-textbox--required":e.required,"utrecht-textbox--readonly":e.readonly}]),"aria-invalid":e.invalid||void 0,disabled:e.disabled,readonly:e.readonly,required:e.required,value:e.modelValue,onInput:a[0]||(a[0]=l=>n.$emit("update:modelValue",l.target.value))},null,42,et))}});r.Article=C,r.BadgeStatus=S,r.Button=E,r.ButtonGroup=F,r.Checkbox=j,r.Document=K,r.FormField=R,r.FormFieldset=W,r.FormFieldsetLegend=ee,r.FormLabel=te,r.Heading1=le,r.Heading2=ie,r.Heading3=he,r.Heading4=be,r.Heading5=ge,r.Heading6=Ce,r.Link=Se,r.Page=He,r.PageContent=Pe,r.PageFooter=je,r.PageHeader=Ke,r.Paragraph=Le,r.RadioButton=Je,r.Select=Qe,r.SelectOption=Xe,r.Textarea=Ze,r.Textbox=tt,Object.defineProperties(r,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+var ht=Object.defineProperty,ft=Object.defineProperties;var yt=Object.getOwnPropertyDescriptors;var B=Object.getOwnPropertySymbols;var mt=Object.prototype.hasOwnProperty,bt=Object.prototype.propertyIsEnumerable;var p=(r,t,s)=>t in r?ht(r,t,{enumerable:!0,configurable:!0,writable:!0,value:s}):r[t]=s,_=(r,t)=>{for(var s in t||(t={}))mt.call(t,s)&&p(r,s,t[s]);if(B)for(var s of B(t))bt.call(t,s)&&p(r,s,t[s]);return r},u=(r,t)=>ft(r,yt(t));(function(r,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(r=typeof globalThis!="undefined"?globalThis:r||self,t(r["component-library-vue"]={},r.Vue))})(this,function(r,t){"use strict";var s="",c=(e,n)=>{const a=e.__vccOpts||e;for(const[l,i]of n)a[l]=i;return a};const x={},v={class:"utrecht-article"};function S(e,n){return t.openBlock(),t.createElementBlock("article",v,[t.renderSlot(e.$slots,"default")])}var E=c(x,[["render",S]]),kt="";const C=t.defineComponent({__name:"UtrechtBadgeStatus",props:{status:null},setup(e){return(n,a)=>(t.openBlock(),t.createElementBlock("span",{class:t.normalizeClass(["utrecht-badge-status",{["utrecht-badge--"+e.status]:!0}])},[t.renderSlot(n.$slots,"default")],2))}});var $t="";const q=["aria-busy","disabled","type"],U=t.defineComponent({__name:"UtrechtButton",props:{appearance:null,busy:{type:Boolean},disabled:{type:Boolean},type:null},setup(e){return(n,a)=>(t.openBlock(),t.createElementBlock("button",{class:t.normalizeClass(["utrecht-button",{"utrecht-button--busy":e.busy,"utrecht-button--disabled":e.disabled,"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"}]),"aria-busy":e.busy||void 0,disabled:e.disabled,type:e.type||"button"},[t.renderSlot(n.$slots,"default")],10,q))}});var gt="";const H={},V={class:"utrecht-button-group"};function F(e,n){return t.openBlock(),t.createElementBlock("div",V,[t.renderSlot(e.$slots,"default")])}var P=c(H,[["render",F]]);function T(e,n){if(e.length!==n.length)return!1;let a=!0;for(let l=0;a&&l<e.length;l++)a=d(e[l],n[l]);return a}function d(e,n){if(e===n)return!0;let a=f(e),l=f(n);if(a||l)return a&&l?e.getTime()===n.getTime():!1;if(a=y(e),l=y(n),a||l)return e===n;if(a=h(e),l=h(n),a||l)return a&&l?T(e,n):!1;if(a=m(e),l=m(n),a||l){if(!a||!l)return!1;const i=Object.keys(e).length,ut=Object.keys(n).length;if(i!==ut)return!1;for(const o in e){const $=e.hasOwnProperty(o),g=n.hasOwnProperty(o);if($&&!g||!$&&g||!d(e[o],n[o]))return!1}}return String(e)===String(n)}const h=Array.isArray,f=e=>j(e)==="[object Date]",y=e=>typeof e=="symbol",m=e=>e!==null&&typeof e=="object",A=Object.prototype.toString,j=e=>A.call(e);var Bt="";const z=["aria-invalid","checked","disabled","required","value"],b=e=>e instanceof Set,k=(e,n)=>Array.isArray(e)?e.includes(n):e instanceof Set?e.has(n):d(e,n),I=(e,n)=>Array.isArray(e)?[...e,n]:b(e)?new Set(e).add(n):n,O=(e,n)=>{if(Array.isArray(e))return e.filter(a=>a!==n);if(b(e)){const a=new Set(e);return a.delete(n),a}else return""},L={methods:{$_handleInputEvent(e){const{value:n,modelValue:a}=this,l=k(a,n)?O(a,n):I(a,n);this.$emit("update:modelValue",l)},$_isChecked(){return k(this.modelValue,this.value)}}},w=t.defineComponent(u(_({},L),{__name:"UtrechtCheckbox",props:{checked:{type:Boolean},disabled:{type:Boolean},invalid:{type:Boolean},modelValue:null,required:{type:Boolean},value:null},emits:["update:modelValue"],setup(e){return(n,a)=>(t.openBlock(),t.createElementBlock("input",{type:"checkbox",class:t.normalizeClass(["utrecht-checkbox",{"utrecht-checkbox--checked":e.checked||n.$_isChecked(),"utrecht-checkbox--disabled":e.disabled,"utrecht-checkbox--invalid":e.invalid,"utrecht-checkbox--required":e.required}]),"aria-invalid":e.invalid||void 0,checked:typeof e.checked=="boolean"?e.checked:n.$_isChecked(),disabled:e.disabled,required:e.required,value:e.value,onInput:a[0]||(a[0]=l=>n.$_handleInputEvent(l))},null,42,z))}}));var pt="";const D={},K={class:"utrecht-document"};function G(e,n){return t.openBlock(),t.createElementBlock("div",K,[t.renderSlot(e.$slots,"default")])}var M=c(D,[["render",G]]),xt="";const R={},J={class:"utrecht-form-field"};function N(e,n){return t.openBlock(),t.createElementBlock("div",J,[t.renderSlot(e.$slots,"default")])}var Q=c(R,[["render",N]]),vt="";const W={},X={class:"utrecht-form-fieldset"};function Y(e,n){return t.openBlock(),t.createElementBlock("fieldset",X,[t.renderSlot(e.$slots,"default")])}var Z=c(W,[["render",Y]]),St="";const ee={},te={class:"utrecht-form-fieldset__legend"};function ne(e,n){return t.openBlock(),t.createElementBlock("legend",te,[t.renderSlot(e.$slots,"default")])}var ae=c(ee,[["render",ne]]),Et="";const re=t.defineComponent({__name:"UtrechtFormLabel",props:{checked:{type:Boolean},disabled:{type:Boolean},type:null},setup(e){return(n,a)=>(t.openBlock(),t.createElementBlock("label",{class:t.normalizeClass(["utrecht-form-label",{"utrecht-form-label--checked":e.checked,"utrecht-form-label--disabled":e.disabled,"utrecht-form-label--radio":e.type==="radio","utrecht-form-label--checkbox":e.type==="checkbox"}])},[t.renderSlot(n.$slots,"default")],2))}});var Ct="",qt="",Ut="",Ht="",Vt="",Ft="";const le={key:0,class:"utrecht-heading-1"},ce={key:1,class:"utrecht-heading-2"},se={key:2,class:"utrecht-heading-3"},de={key:3,class:"utrecht-heading-4"},oe={key:4,class:"utrecht-heading-5"},ie={key:5,class:"utrecht-heading-6"};var _e=c(t.defineComponent({__name:"UtrechtHeading",props:{level:null},setup(e){return(n,a)=>e.level==1?(t.openBlock(),t.createElementBlock("h1",le,[t.renderSlot(n.$slots,"default",{},void 0,!0)])):e.level==2?(t.openBlock(),t.createElementBlock("h2",ce,[t.renderSlot(n.$slots,"default",{},void 0,!0)])):e.level==3?(t.openBlock(),t.createElementBlock("h3",se,[t.renderSlot(n.$slots,"default",{},void 0,!0)])):e.level==4?(t.openBlock(),t.createElementBlock("h4",de,[t.renderSlot(n.$slots,"default",{},void 0,!0)])):e.level==5?(t.openBlock(),t.createElementBlock("h5",oe,[t.renderSlot(n.$slots,"default",{},void 0,!0)])):(t.openBlock(),t.createElementBlock("h6",ie,[t.renderSlot(n.$slots,"default",{},void 0,!0)]))}}),[["__scopeId","data-v-0797b6fe"]]),Tt="";const ue={},he={class:"utrecht-heading-1"};function fe(e,n){return t.openBlock(),t.createElementBlock("h1",he,[t.renderSlot(e.$slots,"default")])}var ye=c(ue,[["render",fe]]),At="";const me={},be={class:"utrecht-heading-2"};function ke(e,n){return t.openBlock(),t.createElementBlock("h2",be,[t.renderSlot(e.$slots,"default")])}var $e=c(me,[["render",ke]]),jt="";const ge={},Be={class:"utrecht-heading-3"};function pe(e,n){return t.openBlock(),t.createElementBlock("h3",Be,[t.renderSlot(e.$slots,"default")])}var xe=c(ge,[["render",pe]]),zt="";const ve={},Se={class:"utrecht-heading-4"};function Ee(e,n){return t.openBlock(),t.createElementBlock("h4",Se,[t.renderSlot(e.$slots,"default")])}var Ce=c(ve,[["render",Ee]]),It="";const qe={},Ue={class:"utrecht-heading-5"};function He(e,n){return t.openBlock(),t.createElementBlock("h5",Ue,[t.renderSlot(e.$slots,"default")])}var Ve=c(qe,[["render",He]]),Ot="";const Fe={},Pe={class:"utrecht-heading-6"};function Te(e,n){return t.openBlock(),t.createElementBlock("h6",Pe,[t.renderSlot(e.$slots,"default")])}var Ae=c(Fe,[["render",Te]]),Lt="";const je=t.defineComponent({__name:"UtrechtLink",props:{external:{type:Boolean}},setup(e){return(n,a)=>(t.openBlock(),t.createElementBlock("a",{class:t.normalizeClass(["utrecht-link",{"utrecht-link--external":e.external}])},[t.renderSlot(n.$slots,"default")],2))}});var wt="";const ze={},Ie={class:"utrecht-page"};function Oe(e,n){return t.openBlock(),t.createElementBlock("div",Ie,[t.renderSlot(e.$slots,"default")])}var Le=c(ze,[["render",Oe]]),Dt="";const we={},De={class:"utrecht-page-content"};function Ke(e,n){return t.openBlock(),t.createElementBlock("div",De,[t.renderSlot(e.$slots,"default")])}var Ge=c(we,[["render",Ke]]),Kt="";const Me={},Re={class:"utrecht-page-footer"};function Je(e,n){return t.openBlock(),t.createElementBlock("footer",Re,[t.renderSlot(e.$slots,"default")])}var Ne=c(Me,[["render",Je]]),Gt="";const Qe={},We={class:"utrecht-page-header"};function Xe(e,n){return t.openBlock(),t.createElementBlock("header",We,[t.renderSlot(e.$slots,"default")])}var Ye=c(Qe,[["render",Xe]]),Mt="";const Ze=t.defineComponent({__name:"UtrechtParagraph",props:{lead:{type:Boolean}},setup(e){return(n,a)=>(t.openBlock(),t.createElementBlock("p",{class:t.normalizeClass(["utrecht-paragraph",{"utrecht-paragraph--lead":e.lead}])},[t.renderSlot(n.$slots,"default")],2))}});var Rt="";const et=["aria-invalid","checked","disabled","required","value"],tt=(e,n)=>d(e,n),nt={methods:{$_handleInputEvent(e){e.checked&&this.$emit("update:modelValue",this.value)},$_isChecked(){return typeof this.modelValue!="undefined"?tt(this.modelValue,this.value):this.checked}}},at=t.defineComponent(u(_({},nt),{__name:"UtrechtRadioButton",props:{checked:{type:Boolean},disabled:{type:Boolean},invalid:{type:Boolean},modelValue:null,required:{type:Boolean},value:null},emits:["update:modelValue"],setup(e){return(n,a)=>(t.openBlock(),t.createElementBlock("input",{type:"radio",class:t.normalizeClass(["utrecht-radio-button",{"utrecht-radio-button--checked":e.checked,"utrecht-radio-button--disabled":e.disabled,"utrecht-radio-button--invalid":e.invalid,"utrecht-radio-button--required":e.required}]),"aria-invalid":e.invalid||void 0,checked:n.$_isChecked(),disabled:e.disabled,required:e.required,value:e.value,onInput:a[0]||(a[0]=l=>n.$_handleInputEvent(l.target))},null,42,et))}}));var Jt="";const rt=["aria-invalid","disabled","readonly","required","value"],lt=t.defineComponent({__name:"UtrechtSelect",props:{disabled:{type:Boolean},invalid:{type:Boolean},modelValue:null,readonly:{type:Boolean},required:{type:Boolean}},emits:["update:modelValue"],setup(e){return(n,a)=>(t.openBlock(),t.createElementBlock("select",{class:t.normalizeClass(["utrecht-select",{"utrecht-select--disabled":e.disabled,"utrecht-select--invalid":e.invalid,"utrecht-select--required":e.required,"utrecht-select--readonly":e.readonly}]),"aria-invalid":e.invalid||void 0,disabled:e.disabled,readonly:e.readonly,required:e.required,value:e.modelValue,onInput:a[0]||(a[0]=l=>n.$emit("update:modelValue",l.target.value))},[t.renderSlot(n.$slots,"default")],42,rt))}});var Nt="";const ct=["disabled"],st=t.defineComponent({__name:"UtrechtSelectOption",props:{disabled:{type:Boolean}},setup(e){return(n,a)=>(t.openBlock(),t.createElementBlock("option",{class:t.normalizeClass(["utrecht-select__option",{"utrecht-select__option--disabled":e.disabled}]),disabled:e.disabled},[t.renderSlot(n.$slots,"default")],10,ct))}});var Qt="";const dt=["aria-invalid","disabled","readonly","required","value"],ot=t.defineComponent({__name:"UtrechtTextarea",props:{disabled:{type:Boolean},invalid:{type:Boolean},modelValue:null,readonly:{type:Boolean},required:{type:Boolean},type:null},emits:["update:modelValue"],setup(e){return(n,a)=>(t.openBlock(),t.createElementBlock("textarea",{class:t.normalizeClass(["utrecht-textarea",{"utrecht-textarea--disabled":e.disabled,"utrecht-textarea--invalid":e.invalid,"utrecht-textarea--required":e.required,"utrecht-textarea--readonly":e.readonly}]),"aria-invalid":e.invalid||void 0,disabled:e.disabled,readonly:e.readonly,required:e.required,value:e.modelValue,onInput:a[0]||(a[0]=l=>n.$emit("update:modelValue",l.target.value))},null,42,dt))}});var Wt="";const it=["aria-invalid","disabled","readonly","required","value"],_t=t.defineComponent({__name:"UtrechtTextbox",props:{disabled:{type:Boolean},invalid:{type:Boolean},modelValue:null,readonly:{type:Boolean},required:{type:Boolean},type:null},emits:["update:modelValue"],setup(e){return(n,a)=>(t.openBlock(),t.createElementBlock("input",{class:t.normalizeClass(["utrecht-textbox",{"utrecht-textbox--disabled":e.disabled,"utrecht-textbox--invalid":e.invalid,"utrecht-textbox--required":e.required,"utrecht-textbox--readonly":e.readonly}]),"aria-invalid":e.invalid||void 0,disabled:e.disabled,readonly:e.readonly,required:e.required,value:e.modelValue,onInput:a[0]||(a[0]=l=>n.$emit("update:modelValue",l.target.value))},null,42,it))}});r.Article=E,r.BadgeStatus=C,r.Button=U,r.ButtonGroup=P,r.Checkbox=w,r.Document=M,r.FormField=Q,r.FormFieldset=Z,r.FormFieldsetLegend=ae,r.FormLabel=re,r.Heading=_e,r.Heading1=ye,r.Heading2=$e,r.Heading3=xe,r.Heading4=Ce,r.Heading5=Ve,r.Heading6=Ae,r.Link=je,r.Page=Le,r.PageContent=Ge,r.PageFooter=Ne,r.PageHeader=Ye,r.Paragraph=Ze,r.RadioButton=at,r.Select=lt,r.SelectOption=st,r.Textarea=ot,r.Textbox=_t,Object.defineProperties(r,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/index.d.ts

@@ -0,0 +1,29 @@
+import Article from './UtrechtArticle.vue';
+import BadgeStatus from './UtrechtBadgeStatus.vue';
+import Button from './UtrechtButton.vue';
+import ButtonGroup from './UtrechtButtonGroup.vue';
+import Checkbox from './UtrechtCheckbox.vue';
+import Document from './UtrechtDocument.vue';
+import FormField from './UtrechtFormField.vue';
+import FormFieldset from './UtrechtFormFieldset.vue';
+import FormFieldsetLegend from './UtrechtFormFieldsetLegend.vue';
+import FormLabel from './UtrechtFormLabel.vue';
+import Heading from './UtrechtHeading.vue';
+import Heading1 from './UtrechtHeading1.vue';
+import Heading2 from './UtrechtHeading2.vue';
+import Heading3 from './UtrechtHeading3.vue';
+import Heading4 from './UtrechtHeading4.vue';
+import Heading5 from './UtrechtHeading5.vue';
+import Heading6 from './UtrechtHeading6.vue';
+import Link from './UtrechtLink.vue';
+import Page from './UtrechtPage.vue';
+import PageContent from './UtrechtPageContent.vue';
+import PageFooter from './UtrechtPageFooter.vue';
+import PageHeader from './UtrechtPageHeader.vue';
+import Paragraph from './UtrechtParagraph.vue';
+import RadioButton from './UtrechtRadioButton.vue';
+import Select from './UtrechtSelect.vue';
+import SelectOption from './UtrechtSelectOption.vue';
+import Textarea from './UtrechtTextarea.vue';
+import Textbox from './UtrechtTextbox.vue';
+export { Article, BadgeStatus, Button, ButtonGroup, Checkbox, Document, FormField, FormFieldset, FormFieldsetLegend, FormLabel, Heading, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, Link, Paragraph, Page, PageContent, PageFooter, PageHeader, RadioButton, Select, SelectOption, Textbox, Textarea, };

package/dist/style.css

@@ -1,7 +1,4 @@
-.utrecht-article{max-inline-size:var(--utrecht-article-max-inline-size)}/**
-* @license EUPL-1.2
-* Copyright (c) 2021 Robbert Broersma
-*/.utrecht-badge-status{background-color:var(--utrecht-badge-background-color, hsl(0deg, 0%, 0%));border-radius:var(--utrecht-badge-border-radius, .5ch);color:var(--utrecht-badge-color, hsl(0deg, 0%, 100%));display:inline-block;font-family:var(--utrecht-document-font-family, sans-serif);font-size:var(--utrecht-badge-font-size, inherit);font-style:var(--utrecht-badge-font-style, normal);font-weight:var(--utrecht-badge-font-weight, bold);line-height:var(--utrecht-badge-line-height);padding-block-end:var(--utrecht-badge-padding-block, .5ex);padding-block-start:var(--utrecht-badge-padding-block, .5ex);padding-inline-end:var(--utrecht-badge-padding-inline, .5ch);padding-inline-start:var(--utrecht-badge-padding-inline, .5ch);text-decoration:none;letter-spacing:var(--utrecht-badge-status-letter-spacing, inherit);text-transform:var(--utrecht-badge-status-text-transform, inherit)}.utrecht-badge-status--danger{background-color:var(--utrecht-feedback-danger-fill-background-color, hsl(0deg, 100%, 50%));color:var(--utrecht-feedback-danger-fill-color, white)}.utrecht-badge-status--warning{background-color:var(--utrecht-feedback-warning-fill-background-color, hsl(39deg, 100%, 50%));color:var(--utrecht-feedback-warning-fill-color, white)}.utrecht-badge-status--safe{background-color:var(--utrecht-feedback-safe-fill-background-color, hsl(120deg, 100%, 25%));color:var(--utrecht-feedback-safe-fill-color, white)}.utrecht-badge-status--neutral{background-color:var(--utrecht-feedback-neutral-fill-background-color, black);color:var(--utrecht-feedback-neutral-fill-color, white)}.utrecht-badge-status--valid{background-color:var(--utrecht-feedback-valid-fill-background-color, var(--utrecht-feedback-safe-fill-background-color, hsl(0deg, 100%, 50%)));color:var(--utrecht-feedback-valid-fill-color, var(--utrecht-feedback-safe-fill-color, white))}.utrecht-badge-status--invalid{background-color:var(--utrecht-feedback-invalid-fill-background-color, var(--utrecht-feedback-danger-fill-background-color, hsl(39deg, 100%, 50%)));color:var(--utrecht-feedback-invalid-fill-color, var(--utrecht-feedback-danger-fill-color, white))}.utrecht-badge-status--error{background-color:var(--utrecht-feedback-error-fill-background-color, var(--utrecht-feedback-danger-fill-background-color, hsl(39deg, 100%, 50%)));color:var(--utrecht-feedback-error-fill-color, var(--utrecht-feedback-danger-fill-color, white))}.utrecht-badge-status--success{background-color:var(--utrecht-feedback-success-fill-background-color, var(--utrecht-feedback-safe-fill-background-color, hsl(39deg, 100%, 50%)));color:var(--utrecht-feedback-success-fill-color, var(--utrecht-feedback-safe-fill-color, white))}.utrecht-badge-status--active{background-color:var(--utrecht-feedback-active-fill-background-color, var(--utrecht-feedback-safe-fill-background-color, hsl(39deg, 100%, 50%)));color:var(--utrecht-feedback-active-fill-color, var(--utrecht-feedback-safe-fill-color, white))}.utrecht-badge-status--inactive{background-color:var(--utrecht-feedback-inactive-fill-background-color, var(--utrecht-feedback-danger-fill-background-color, hsl(39deg, 100%, 50%)));color:var(--utrecht-feedback-inactive-fill-color, var(--utrecht-feedback-danger-fill-color, white))}/**
+.utrecht-article{max-inline-size:var(--utrecht-article-max-inline-size)}.utrecht-badge-status{background-color:var(--utrecht-badge-background-color, hsl(0deg, 0%, 0%));border-radius:var(--utrecht-badge-border-radius, .5ch);color:var(--utrecht-badge-color, hsl(0deg, 0%, 100%));display:inline-block;font-family:var(--utrecht-document-font-family, sans-serif);font-size:var(--utrecht-badge-font-size, inherit);font-style:var(--utrecht-badge-font-style, normal);font-weight:var(--utrecht-badge-font-weight, bold);line-height:var(--utrecht-badge-line-height);padding-block-end:var(--utrecht-badge-padding-block, .5ex);padding-block-start:var(--utrecht-badge-padding-block, .5ex);padding-inline-end:var(--utrecht-badge-padding-inline, .5ch);padding-inline-start:var(--utrecht-badge-padding-inline, .5ch);text-decoration:none;letter-spacing:var(--utrecht-badge-status-letter-spacing, inherit);text-transform:var(--utrecht-badge-status-text-transform, inherit)}.utrecht-badge-status--danger{background-color:var(--utrecht-feedback-danger-fill-background-color, hsl(0deg, 100%, 50%));color:var(--utrecht-feedback-danger-fill-color, white)}.utrecht-badge-status--warning{background-color:var(--utrecht-feedback-warning-fill-background-color, hsl(39deg, 100%, 50%));color:var(--utrecht-feedback-warning-fill-color, white)}.utrecht-badge-status--safe{background-color:var(--utrecht-feedback-safe-fill-background-color, hsl(120deg, 100%, 25%));color:var(--utrecht-feedback-safe-fill-color, white)}.utrecht-badge-status--neutral{background-color:var(--utrecht-feedback-neutral-fill-background-color, black);color:var(--utrecht-feedback-neutral-fill-color, white)}.utrecht-badge-status--valid{background-color:var(--utrecht-feedback-valid-fill-background-color, var(--utrecht-feedback-safe-fill-background-color, hsl(0deg, 100%, 50%)));color:var(--utrecht-feedback-valid-fill-color, var(--utrecht-feedback-safe-fill-color, white))}.utrecht-badge-status--invalid{background-color:var(--utrecht-feedback-invalid-fill-background-color, var(--utrecht-feedback-danger-fill-background-color, hsl(39deg, 100%, 50%)));color:var(--utrecht-feedback-invalid-fill-color, var(--utrecht-feedback-danger-fill-color, white))}.utrecht-badge-status--error{background-color:var(--utrecht-feedback-error-fill-background-color, var(--utrecht-feedback-danger-fill-background-color, hsl(39deg, 100%, 50%)));color:var(--utrecht-feedback-error-fill-color, var(--utrecht-feedback-danger-fill-color, white))}.utrecht-badge-status--success{background-color:var(--utrecht-feedback-success-fill-background-color, var(--utrecht-feedback-safe-fill-background-color, hsl(39deg, 100%, 50%)));color:var(--utrecht-feedback-success-fill-color, var(--utrecht-feedback-safe-fill-color, white))}.utrecht-badge-status--active{background-color:var(--utrecht-feedback-active-fill-background-color, var(--utrecht-feedback-safe-fill-background-color, hsl(39deg, 100%, 50%)));color:var(--utrecht-feedback-active-fill-color, var(--utrecht-feedback-safe-fill-color, white))}.utrecht-badge-status--inactive{background-color:var(--utrecht-feedback-inactive-fill-background-color, var(--utrecht-feedback-danger-fill-background-color, hsl(39deg, 100%, 50%)));color:var(--utrecht-feedback-inactive-fill-color, var(--utrecht-feedback-danger-fill-color, white))}/**
 * @license EUPL-1.2
 * Copyright (c) 2021 The Knights Who Say NIH! B.V.
 * Copyright (c) 2021 Gemeente Utrecht
@@ -18,7 +15,20 @@
  */.utrecht-button-group,.utrecht-button-group--distanced{background-color:var(--utrecht-button-group-background-color);display:flex;gap:var(--utrecht-button-group-inline-gap, 1em);min-block-size:var(--utrecht-button-block-size);padding-block-end:var(--utrecht-button-group-padding-block-end);padding-block-start:var(--utrecht-button-group-padding-block-start)}.utrecht-button-group__button-link--horizontal,.utrecht-button-group--horizontal .utrecht-button-link,.utrecht-button-group:not(.utrecht-button-group--vertical) .utrecht-button-link{--utrecht-button-padding-inline-end: 0;--utrecht-button-padding-inline-start: 0}.utrecht-button-group--vertical{flex-direction:column;gap:var(--utrecht-button-group-block-gap, 1em)}.utrecht-checkbox{margin-block-end:0;margin-block-start:0;margin-inline-end:0;margin-inline-start:0}.utrecht-checkbox--disabled{cursor:var(--utrecht-action-disabled-cursor)}.utrecht-checkbox--focus-visible{box-shadow:0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:var(--utrecht-focus-outline-offset, 0);outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-checkbox--html-input:disabled{cursor:var(--utrecht-action-disabled-cursor)}.utrecht-checkbox--html-input:focus{box-shadow:0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:var(--utrecht-focus-outline-offset, 0);outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-checkbox--html-input:focus:not(:focus-visible){box-shadow:none;outline-style:none}.utrecht-document{color:var(--utrecht-document-color, inherit);font-family:var(--utrecht-document-font-family, inherit);font-size:var(--utrecht-document-font-size, inherit);font-weight:var(--utrecht-document-font-weight, inherit);line-height:var(--utrecht-document-line-height, inherit);text-rendering:optimizeLegibility}.utrecht-document :lang(ar){letter-spacing:0!important}.utrecht-document--surface{background-color:var(--utrecht-document-background-color, inherit)}.utrecht-form-field{font-family:var(--utrecht-document-font-family, inherit);max-inline-size:var(--utrecht-form-field-max-inline-size)}.utrecht-form-field--distanced{margin-block-end:var(--utrecht-form-field-margin-block-end, var(--utrecht-paragraph-margin-block-end));margin-block-start:var(--utrecht-form-field-margin-block-start, var(--utrecht-paragraph-margin-block-start))}.utrecht-form-fieldset--html-fieldset{border:0;margin-inline-end:0;margin-inline-start:0;min-width:0;padding-block-end:0;padding-block-start:.01em;padding-inline-end:0;padding-inline-start:0}.utrecht-form-fieldset__legend--html-legend{padding-inline-end:0;padding-inline-start:0}.utrecht-form-fieldset--distanced{margin-block-end:var(--utrecht-form-fieldset-margin-block-end, 0);margin-block-start:var(--utrecht-form-fieldset-margin-block-start, 0)}.utrecht-form-fieldset__legend{color:var(--utrecht-form-fieldset-legend-color, var(--utrecht-document-color, inherit));font-family:var(--utrecht-form-fieldset-legend-font-family, var(--utrecht-document-font-family));font-size:var(--utrecht-form-fieldset-legend-font-size);font-weight:var(--utrecht-form-fieldset-legend-font-weight);line-height:var(--utrecht-form-fieldset-legend-line-height);page-break-after:avoid;page-break-inside:avoid;text-transform:var(--utrecht-form-fieldset-legend-text-transform)}.utrecht-form-fieldset__legend--distanced{margin-block-end:var(--utrecht-form-fieldset-legend-margin-block-end);margin-block-start:var(--utrecht-form-fieldset-legend-margin-block-start)}/**
 * @license EUPL-1.2
 * Copyright (c) 2021 Robbert Broersma
-*/.utrecht-form-label{color:var(--utrecht-form-label-color);font-size:var(--utrecht-form-label-font-size);font-weight:var(--utrecht-form-label-font-weight)}.utrecht-form-label--checkbox{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));font-weight:var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--checked{font-weight:var(--utrecht-form-label-checked-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--disabled{cursor:var(--utrecht-action-disabled-cursor);font-weight:var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color))}.utrecht-form-label--radio{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));font-weight:var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-heading-1{page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-1-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-1-font-size);font-weight:var(--utrecht-heading-1-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-1-letter-spacing);line-height:var(--utrecht-heading-1-line-height);margin-block-end:0;margin-block-start:0;text-transform:var(--utrecht-heading-1-text-transform, inherit)}.utrecht-heading-1--distanced{margin-block-end:var(--utrecht-heading-1-margin-block-end);margin-block-start:var(--utrecht-heading-1-margin-block-start)}.utrecht-heading-2{page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-2-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-2-font-size);font-weight:var(--utrecht-heading-2-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-2-letter-spacing);line-height:var(--utrecht-heading-2-line-height);margin-block-end:0;margin-block-start:0;text-transform:var(--utrecht-heading-2-text-transform, inherit)}.utrecht-heading-2--distanced{margin-block-end:var(--utrecht-heading-2-margin-block-end);margin-block-start:var(--utrecht-heading-2-margin-block-start)}.utrecht-heading-3{page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-3-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-3-font-size);font-weight:var(--utrecht-heading-3-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-3-letter-spacing);line-height:var(--utrecht-heading-3-line-height);margin-block-end:0;margin-block-start:0;text-transform:var(--utrecht-heading-3-text-transform, inherit)}.utrecht-heading-3--distanced{margin-block-end:var(--utrecht-heading-3-margin-block-end);margin-block-start:var(--utrecht-heading-3-margin-block-start)}.utrecht-heading-4{page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-4-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-4-font-size);font-weight:var(--utrecht-heading-4-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-4-letter-spacing);line-height:var(--utrecht-heading-4-line-height);margin-block-end:0;margin-block-start:0;text-transform:var(--utrecht-heading-4-text-transform, inherit)}.utrecht-heading-4--distanced{margin-block-end:var(--utrecht-heading-4-margin-block-end);margin-block-start:var(--utrecht-heading-4-margin-block-start)}.utrecht-heading-5{page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-5-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-5-font-size);font-weight:var(--utrecht-heading-5-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-5-letter-spacing);line-height:var(--utrecht-heading-5-line-height);margin-block-end:0;margin-block-start:0;text-transform:var(--utrecht-heading-5-text-transform, inherit)}.utrecht-heading-5--distanced{margin-block-end:var(--utrecht-heading-5-margin-block-end);margin-block-start:var(--utrecht-heading-5-margin-block-start)}/**
+*/.utrecht-form-label{color:var(--utrecht-form-label-color);font-size:var(--utrecht-form-label-font-size);font-weight:var(--utrecht-form-label-font-weight)}.utrecht-form-label--checkbox{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));font-weight:var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--checked{font-weight:var(--utrecht-form-label-checked-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--disabled{cursor:var(--utrecht-action-disabled-cursor);font-weight:var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color))}.utrecht-form-label--radio{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));font-weight:var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-heading-1[data-v-0797b6fe]{page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-1-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-1-font-size);font-weight:var(--utrecht-heading-1-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-1-letter-spacing);line-height:var(--utrecht-heading-1-line-height);margin-block-end:0;margin-block-start:0;text-transform:var(--utrecht-heading-1-text-transform, inherit)}.utrecht-heading-1--distanced[data-v-0797b6fe]{margin-block-end:var(--utrecht-heading-1-margin-block-end);margin-block-start:var(--utrecht-heading-1-margin-block-start)}/**
+* @license EUPL-1.2
+* Copyright (c) 2021 Gemeente Utrecht
+* Copyright (c) 2021 Robbert Broersma
+* Copyright (c) 2021 The Knights Who Say NIH! B.V.
+*//**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
+ *//**
+ * @license EUPL-1.2
+ * Copyright (c) 2021-2022 Frameless B.V.
+ */.utrecht-heading-2[data-v-0797b6fe]{page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-2-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-2-font-size);font-weight:var(--utrecht-heading-2-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-2-letter-spacing);line-height:var(--utrecht-heading-2-line-height);margin-block-end:0;margin-block-start:0;text-transform:var(--utrecht-heading-2-text-transform, inherit)}.utrecht-heading-2--distanced[data-v-0797b6fe]{margin-block-end:var(--utrecht-heading-2-margin-block-end);margin-block-start:var(--utrecht-heading-2-margin-block-start)}.utrecht-heading-3[data-v-0797b6fe]{page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-3-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-3-font-size);font-weight:var(--utrecht-heading-3-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-3-letter-spacing);line-height:var(--utrecht-heading-3-line-height);margin-block-end:0;margin-block-start:0;text-transform:var(--utrecht-heading-3-text-transform, inherit)}.utrecht-heading-3--distanced[data-v-0797b6fe]{margin-block-end:var(--utrecht-heading-3-margin-block-end);margin-block-start:var(--utrecht-heading-3-margin-block-start)}.utrecht-heading-4[data-v-0797b6fe]{page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-4-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-4-font-size);font-weight:var(--utrecht-heading-4-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-4-letter-spacing);line-height:var(--utrecht-heading-4-line-height);margin-block-end:0;margin-block-start:0;text-transform:var(--utrecht-heading-4-text-transform, inherit)}.utrecht-heading-4--distanced[data-v-0797b6fe]{margin-block-end:var(--utrecht-heading-4-margin-block-end);margin-block-start:var(--utrecht-heading-4-margin-block-start)}.utrecht-heading-5[data-v-0797b6fe]{page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-5-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-5-font-size);font-weight:var(--utrecht-heading-5-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-5-letter-spacing);line-height:var(--utrecht-heading-5-line-height);margin-block-end:0;margin-block-start:0;text-transform:var(--utrecht-heading-5-text-transform, inherit)}.utrecht-heading-5--distanced[data-v-0797b6fe]{margin-block-end:var(--utrecht-heading-5-margin-block-end);margin-block-start:var(--utrecht-heading-5-margin-block-start)}.utrecht-heading-6[data-v-0797b6fe]{page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-6-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-6-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-6-font-size);font-weight:var(--utrecht-heading-6-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-6-letter-spacing);line-height:var(--utrecht-heading-6-line-height);margin-block-end:0;margin-block-start:0;text-transform:var(--utrecht-heading-6-text-transform, inherit)}.utrecht-heading-6--distanced[data-v-0797b6fe]{margin-block-end:var(--utrecht-heading-6-margin-block-end);margin-block-start:var(--utrecht-heading-6-margin-block-start)}.utrecht-heading-1{page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-1-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-1-font-size);font-weight:var(--utrecht-heading-1-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-1-letter-spacing);line-height:var(--utrecht-heading-1-line-height);margin-block-end:0;margin-block-start:0;text-transform:var(--utrecht-heading-1-text-transform, inherit)}.utrecht-heading-1--distanced{margin-block-end:var(--utrecht-heading-1-margin-block-end);margin-block-start:var(--utrecht-heading-1-margin-block-start)}.utrecht-heading-2{page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-2-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-2-font-size);font-weight:var(--utrecht-heading-2-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-2-letter-spacing);line-height:var(--utrecht-heading-2-line-height);margin-block-end:0;margin-block-start:0;text-transform:var(--utrecht-heading-2-text-transform, inherit)}.utrecht-heading-2--distanced{margin-block-end:var(--utrecht-heading-2-margin-block-end);margin-block-start:var(--utrecht-heading-2-margin-block-start)}.utrecht-heading-3{page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-3-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-3-font-size);font-weight:var(--utrecht-heading-3-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-3-letter-spacing);line-height:var(--utrecht-heading-3-line-height);margin-block-end:0;margin-block-start:0;text-transform:var(--utrecht-heading-3-text-transform, inherit)}.utrecht-heading-3--distanced{margin-block-end:var(--utrecht-heading-3-margin-block-end);margin-block-start:var(--utrecht-heading-3-margin-block-start)}.utrecht-heading-4{page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-4-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-4-font-size);font-weight:var(--utrecht-heading-4-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-4-letter-spacing);line-height:var(--utrecht-heading-4-line-height);margin-block-end:0;margin-block-start:0;text-transform:var(--utrecht-heading-4-text-transform, inherit)}.utrecht-heading-4--distanced{margin-block-end:var(--utrecht-heading-4-margin-block-end);margin-block-start:var(--utrecht-heading-4-margin-block-start)}.utrecht-heading-5{page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-5-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-5-font-size);font-weight:var(--utrecht-heading-5-font-weight, var(--utrecht-heading-font-weight, bold));letter-spacing:var(--utrecht-heading-5-letter-spacing);line-height:var(--utrecht-heading-5-line-height);margin-block-end:0;margin-block-start:0;text-transform:var(--utrecht-heading-5-text-transform, inherit)}.utrecht-heading-5--distanced{margin-block-end:var(--utrecht-heading-5-margin-block-end);margin-block-start:var(--utrecht-heading-5-margin-block-start)}/**
 * @license EUPL-1.2
 * Copyright (c) 2021 Gemeente Utrecht
 * Copyright (c) 2021 Robbert Broersma

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-alpha.3",
+  "version": "1.0.0-alpha.32",
   "author": "Community for NL Design System",
   "description": "Vue.js components for the Municipality of Utrecht based on the NL Design System architecture",
   "license": "EUPL-1.2",
@@ -21,46 +21,45 @@
   },
   "sideEffects": false,
   "scripts": {
+    "clean": "rimraf dist",
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
     "lint": "npm-run-all lint:**",
-    "lint:ts": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
+    "lint:ts": "vue-tsc --noEmit -p tsconfig.lib.json --composite false",
+    "lint:ts-jest": "vue-tsc --noEmit -p tsconfig.jest.json --composite false",
     "preview": "vite preview --port 5050",
-    "test:unit": "vitest --environment jsdom",
-    "test:e2e": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress open'",
-    "test:e2e:ci": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress run'"
+    "test": "jest"
   },
   "main": "./dist/component-library-vue.umd.js",
   "module": "./dist/component-library-vue.es.js",
+  "types": "./dist/index.d.ts",
   "files": [
-    "dist/"
+    "dist/*"
   ],
   "devDependencies": {
-    "@rollup/plugin-typescript": "8.3.2",
     "@rushstack/eslint-patch": "1.1.0",
+    "@testing-library/vue": "6.4.2",
+    "@types/jest": "27.5.1",
     "@types/jsdom": "16.2.14",
     "@types/node": "16.11.27",
-    "@utrecht/components": "1.0.0-alpha.187",
+    "@utrecht/components": "1.0.0-alpha.216",
     "@vitejs/plugin-vue": "2.3.1",
-    "@vue/eslint-config-prettier": "7.0.0",
-    "@vue/eslint-config-typescript": "10.0.0",
-    "@vue/test-utils": "2.0.0-rc.20",
     "@vue/tsconfig": "0.1.3",
-    "cypress": "9.5.4",
-    "eslint": "8.5.0",
-    "eslint-plugin-cypress": "2.12.1",
-    "eslint-plugin-vue": "8.2.0",
+    "@vue/vue3-jest": "28.0.1",
+    "jest": "28.1.0",
+    "jest-environment-jsdom": "28.1.0",
     "jsdom": "19.0.0",
     "npm-run-all": "4.1.5",
     "prettier": "2.5.1",
+    "rimraf": "3.0.2",
     "sass": "1.52.1",
-    "start-server-and-test": "1.14.0",
+    "ts-jest": "28.0.5",
     "typescript": "4.6.4",
     "vite": "2.9.5",
-    "vitest": "0.9.3",
-    "vue": "3.2.33",
+    "vite-plugin-dts": "1.2.0",
+    "vue": "3.2.37",
     "vue-router": "4.0.14",
     "vue-tsc": "0.34.7"
   },
-  "gitHead": "7db7706b2701d52d6841a2f352eda46ca5dea880"
+  "gitHead": "eb3319bef3be2bce365d509e9c4ac7c8fb662e14"
 }