@utrecht/web-component-library-stencil 1.0.0-alpha.4 → 1.0.0-alpha.400

package/dist/components/utrecht-checkbox.js

@@ -0,0 +1,51 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { c as clsx } from './clsx.m.js';
+
+const indexCss = ".utrecht-checkbox{margin-block-end:0;margin-block-start:0;margin-inline-end:0;margin-inline-start:0;cursor:var(--utrecht-action-activate-cursor, revert)}.utrecht-checkbox--disabled{cursor:var(--utrecht-action-disabled-cursor, revert)}.utrecht-checkbox--focus-visible{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0)\n    var(--utrecht-focus-inverse-outline-color, transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color, revert);outline-offset:var(--utrecht-focus-outline-offset, revert);outline-style:var(--utrecht-focus-outline-style, revert);outline-width:var(--utrecht-focus-outline-width, revert)}.utrecht-checkbox--html-input:disabled{cursor:var(--utrecht-action-disabled-cursor, revert)}.utrecht-checkbox--html-input:focus{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0)\n    var(--utrecht-focus-inverse-outline-color, transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color, revert);outline-offset:var(--utrecht-focus-outline-offset, revert);outline-style:var(--utrecht-focus-outline-style, revert);outline-width:var(--utrecht-focus-outline-width, revert)}.utrecht-checkbox--html-input:focus:not(:focus-visible){box-shadow:none;outline-style:revert}:host{display:block}:host([hidden]){display:none !important}";
+
+const Checkbox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.utrechtBlur = createEvent(this, "utrechtBlur", 7);
+    this.utrechtChange = createEvent(this, "utrechtChange", 7);
+    this.utrechtFocus = createEvent(this, "utrechtFocus", 7);
+    this.utrechtInput = createEvent(this, "utrechtInput", 7);
+    this.disabled = false;
+    this.readOnly = false;
+    this.checked = false;
+    this.value = '';
+  }
+  render() {
+    const { checked, disabled, value } = this;
+    return (h("input", { class: clsx('utrecht-checkbox'), type: "checkbox", checked: checked, disabled: disabled, value: value, onBlur: (evt) => this.utrechtBlur.emit(evt), onChange: (evt) => this.utrechtChange.emit(evt), onFocus: (evt) => this.utrechtFocus.emit(evt), onInput: (evt) => {
+        this.checked = evt.target.checked;
+        this.utrechtInput.emit(evt);
+      } }));
+  }
+  static get style() { return indexCss; }
+}, [1, "utrecht-checkbox", {
+    "disabled": [516],
+    "readOnly": [516, "readonly"],
+    "checked": [4],
+    "value": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["utrecht-checkbox"];
+  components.forEach(tagName => { switch (tagName) {
+    case "utrecht-checkbox":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Checkbox);
+      }
+      break;
+  } });
+}
+
+const UtrechtCheckbox = Checkbox;
+const defineCustomElement = defineCustomElement$1;
+
+export { UtrechtCheckbox, defineCustomElement };

package/dist/components/utrecht-contact-card-template.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UtrechtContactCardTemplate extends Components.UtrechtContactCardTemplate, HTMLElement {}
+export const UtrechtContactCardTemplate: {
+  prototype: UtrechtContactCardTemplate;
+  new (): UtrechtContactCardTemplate;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/utrecht-contact-card-template.js

@@ -0,0 +1,51 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$4 } from './index.stencil3.js';
+import { d as defineCustomElement$3 } from './index.stencil4.js';
+import { d as defineCustomElement$2 } from './index.stencil5.js';
+
+const indexCss = ".utrecht-link{--utrecht-icon-size:var(--utrecht-link-icon-size, 1em);color:var(--utrecht-link-color, blue);text-decoration:var(--utrecht-link-text-decoration, underline);text-decoration-skip-ink:all;text-decoration-thickness:max(var(--utrecht-link-text-decoration-thickness), 1px);text-underline-offset:var(--utrecht-link-text-underline-offset)}.utrecht-link--icon-left{background-image:var(--utrecht-link-icon-left-background-image, none);background-position:0 0.25em;background-repeat:no-repeat;color:var(--utrecht-link-color, blue);font-weight:var(--utrecht-typography-weight-scale-bold-font-weight);padding-inline-start:var(--utrecht-space-block-md);text-decoration:none}.utrecht-link:visited,.utrecht-link--visited{color:var(--utrecht-link-visited-color, var(--utrecht-link-color))}.utrecht-link:link:hover,.utrecht-link--hover{color:var(--utrecht-link-hover-color, var(--utrecht-link-color));text-decoration:var(--utrecht-link-hover-text-decoration, var(--utrecht-link-text-decoration, underline));text-decoration-skip:none;text-decoration-skip-ink:none;text-decoration-thickness:max(var(--utrecht-link-hover-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px)}.utrecht-link:link:active,.utrecht-link--active{color:var(--utrecht-link-active-color, var(--utrecht-link-color))}.utrecht-link--focus{background-color:var(--utrecht-link-focus-background-color, transparent);color:var(--utrecht-link-focus-color, var(--utrecht-link-color));text-decoration:var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));text-decoration-skip:none;text-decoration-skip-ink:none;text-decoration-thickness:max(var(--utrecht-link-focus-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px)}.utrecht-link--focus-visible{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0)\n    var(--utrecht-focus-inverse-outline-color, transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color, revert);outline-offset:var(--utrecht-focus-outline-offset, revert);outline-style:var(--utrecht-focus-outline-style, revert);outline-width:var(--utrecht-focus-outline-width, revert)}.utrecht-link:focus{background-color:var(--utrecht-link-focus-background-color, transparent);color:var(--utrecht-link-focus-color, var(--utrecht-link-color));text-decoration:var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));text-decoration-skip:none;text-decoration-skip-ink:none;text-decoration-thickness:max(var(--utrecht-link-focus-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0)\n    var(--utrecht-focus-inverse-outline-color, transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color, revert);outline-offset:var(--utrecht-focus-outline-offset, revert);outline-style:var(--utrecht-focus-outline-style, revert);outline-width:var(--utrecht-focus-outline-width, revert)}.utrecht-link:focus:not(:focus-visible){box-shadow:none;outline-style:revert}.utrecht-link--telephone{white-space:nowrap}.utrecht-link--box-content{color:unset;display:inline-block;text-decoration:unset;text-decoration-skip-ink:unset;text-decoration-thickness:unset;text-underline-offset:unset}.utrecht-link--placeholder{color:var(--utrecht-link-placeholder-color, var(--utrecht-link-color));cursor:var(--utrecht-action-disabled-cursor);text-decoration:none}.utrecht-contact-card{--utrecht-document-color:currentColor;--utrecht-heading-color:currentColor;--utrecht-link-color:currentColor;--utrecht-link-focus-color:currentColor;--utrecht-link-hover-color:currentColor;--utrecht-link-active-color:currentColor;--utrecht-link-visited-color:currentColor;--utrecht-heading-2-text-transform:uppercase;--utrecht-heading-2-font-size:var(--utrecht-typography-scale-md-font-size);--utrecht-contact-card-background-color:hsl(207 60% 91%);--utrecht-contact-card-background-color-2:hsl(207 60% 96%);background-color:#dae9f6;background-image:linear-gradient(45deg, var(--utrecht-contact-card-background-color), var(--utrecht-contact-card-background-color) 50%, var(--utrecht-contact-card-background-color-2) 50%, var(--utrecht-contact-card-background-color-2));background-position-x:66%;background-size:200%;color:var(--utrecht-color-black);padding-block-end:var(--utrecht-space-block-xl);padding-block-start:var(--utrecht-space-block-xl);padding-inline-end:var(--utrecht-space-inline-xl);padding-inline-start:var(--utrecht-space-inline-xl)}.utrecht-contact-card__content{display:flex;flex-direction:row}.utrecht-contact-card__section{margin-block-start:var(--utrecht-space-row-lg);width:100%}.utrecht-contact-card__telephone{--utrecht-paragraph-font-size:var(--utrecht-typography-scale-2xl-font-size)}";
+
+const ContactCardTemplate = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h("div", { class: "utrecht-contact-card" }, h("utrecht-heading-2", null, "Hulp en contact"), h("div", { class: "utrecht-contact-card__content" }, h("div", { class: "utrecht-contact-card__section" }, h("utrecht-heading-3", null, "Telefoon"), h("utrecht-paragraph", { class: "utrecht-contact-card__telephone" }, h("a", { href: "tel:14-030", class: "utrecht-link utrecht-link--telephone", title: "Telefoonnummer van gemeente Utrecht" }, "14 030")), h("utrecht-paragraph", null, "Maandag t/m vrijdag 8.30 \u2013 17.30 uur")), h("div", { class: "utrecht-contact-card__section" }, h("utrecht-heading-3", null, "E-mail"), h("utrecht-paragraph", null, h("a", { class: "utrecht-link", href: "https://www.utrecht.nl/reactieformulier", title: "Algemeen reactieformulier van de gemeente Utrecht" }, "reactieformulier"))))));
+  }
+  static get style() { return indexCss; }
+}, [1, "utrecht-contact-card-template"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["utrecht-contact-card-template", "utrecht-heading-2", "utrecht-heading-3", "utrecht-paragraph"];
+  components.forEach(tagName => { switch (tagName) {
+    case "utrecht-contact-card-template":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ContactCardTemplate);
+      }
+      break;
+    case "utrecht-heading-2":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "utrecht-heading-3":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "utrecht-paragraph":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const UtrechtContactCardTemplate = ContactCardTemplate;
+const defineCustomElement = defineCustomElement$1;
+
+export { UtrechtContactCardTemplate, defineCustomElement };

package/dist/components/utrecht-custom-checkbox.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UtrechtCustomCheckbox extends Components.UtrechtCustomCheckbox, HTMLElement {}
+export const UtrechtCustomCheckbox: {
+  prototype: UtrechtCustomCheckbox;
+  new (): UtrechtCustomCheckbox;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/utrecht-custom-checkbox.js

@@ -0,0 +1,41 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { c as clsx } from './clsx.m.js';
+
+const indexCss = ".utrecht-checkbox--custom,.utrecht-custom-checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-position:center;background-repeat:no-repeat;background-size:contain;border-color:var(--utrecht-custom-checkbox-border-color);border-style:solid;border-width:var(--utrecht-custom-checkbox-border-width);cursor:var(--utrecht-action-activate-cursor, revert);height:var(--utrecht-custom-checkbox-size);margin-block-start:var(--utrecht-custom-checkbox-margin-block-start);-webkit-print-color-adjust:exact;print-color-adjust:exact;vertical-align:top;width:var(--utrecht-custom-checkbox-size)}.utrecht-checkbox--custom.utrecht-checkbox--checked,.utrecht-custom-checkbox--checked{background-color:var(--utrecht-custom-checkbox-checked-background-color, var(--utrecht-custom-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-custom-checkbox-checked-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-checked-border-width, var(--utrecht-custom-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--disabled,.utrecht-custom-checkbox--disabled{border-color:var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-disabled-border-width, var(--utrecht-custom-checkbox-border-width));cursor:var(--utrecht-action-disabled-cursor)}.utrecht-checkbox--custom.utrecht-checkbox--disabled:checked,.utrecht-custom-checkbox--disabled:checked{background-color:var(--utrecht-custom-checkbox-disabled-background-color, var(--utrecht-custom-checkbox-background-color));border-color:var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color))}.utrecht-checkbox--custom.utrecht-checkbox--disabled:active,.utrecht-custom-checkbox--disabled:active{border-color:var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color))}.utrecht-checkbox--custom.utrecht-checkbox--indeterminate,.utrecht-custom-checkbox--indeterminate{background-color:var(--utrecht-custom-checkbox-indeterminate-background-color, var(--utrecht-custom-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e\");border-color:var(--utrecht-custom-checkbox-indeterminate-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-indeterminate-border-width, var(--utrecht-custom-checkbox-border-width));color:var(--utrecht-custom-checkbox-indeterminate-color, var(--utrecht-custom-checkbox-color))}.utrecht-checkbox--custom.utrecht-checkbox--invalid,.utrecht-custom-checkbox--invalid{border-color:var(--utrecht-custom-checkbox-invalid-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-invalid-border-width, var(--utrecht-custom-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--active,.utrecht-custom-checkbox--active{background-color:var(--utrecht-custom-checkbox-active-background-color, var(--utrecht-custom-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-custom-checkbox-active-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-active-border-width, var(--utrecht-custom-checkbox-border-width));color:var(--utrecht-custom-checkbox-active-color, var(--utrecht-custom-checkbox-color))}.utrecht-checkbox--custom.utrecht-checkbox--hover,.utrecht-custom-checkbox--hover{background-color:var(--utrecht-custom-checkbox-hover-background-color, var(--utrecht-custom-checkbox-background-color));border-color:var(--utrecht-custom-checkbox-hover-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-hover-border-width, var(--utrecht-custom-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--focus,.utrecht-custom-checkbox--focus{background-color:var(--utrecht-custom-checkbox-focus-background-color, var(--utrecht-custom-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-custom-checkbox-focus-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-focus-border-width, var(--utrecht-custom-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--focus-visible,.utrecht-custom-checkbox--focus-visible{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0)\n    var(--utrecht-focus-inverse-outline-color, transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color, revert);outline-offset:var(--utrecht-focus-outline-offset, revert);outline-style:var(--utrecht-focus-outline-style, revert);outline-width:var(--utrecht-focus-outline-width, revert)}.utrecht-checkbox--custom.utrecht-checkbox--html-input:disabled,.utrecht-custom-checkbox--html-input:disabled{border-color:var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-disabled-border-width, var(--utrecht-custom-checkbox-border-width));cursor:var(--utrecht-action-disabled-cursor)}.utrecht-checkbox--custom.utrecht-checkbox--html-input:disabled:checked,.utrecht-custom-checkbox--html-input:disabled:checked{background-color:var(--utrecht-custom-checkbox-disabled-background-color, var(--utrecht-custom-checkbox-background-color));border-color:var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color))}.utrecht-checkbox--custom.utrecht-checkbox--html-input:disabled:active,.utrecht-custom-checkbox--html-input:disabled:active{border-color:var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color))}.utrecht-checkbox--custom.utrecht-checkbox--html-input:hover,.utrecht-custom-checkbox--html-input:hover{background-color:var(--utrecht-custom-checkbox-hover-background-color, var(--utrecht-custom-checkbox-background-color));border-color:var(--utrecht-custom-checkbox-hover-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-hover-border-width, var(--utrecht-custom-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--html-input:focus,.utrecht-custom-checkbox--html-input:focus{background-color:var(--utrecht-custom-checkbox-focus-background-color, var(--utrecht-custom-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-custom-checkbox-focus-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-focus-border-width, var(--utrecht-custom-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--html-input:focus-visible,.utrecht-custom-checkbox--html-input:focus-visible{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0)\n    var(--utrecht-focus-inverse-outline-color, transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color, revert);outline-offset:var(--utrecht-focus-outline-offset, revert);outline-style:var(--utrecht-focus-outline-style, revert);outline-width:var(--utrecht-focus-outline-width, revert)}.utrecht-checkbox--custom.utrecht-checkbox--html-input:invalid,.utrecht-checkbox--custom.utrecht-checkbox--html-input[aria-invalid=true],.utrecht-custom-checkbox--html-input:invalid,.utrecht-custom-checkbox--html-input[aria-invalid=true]{border-color:var(--utrecht-custom-checkbox-invalid-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-invalid-border-width, var(--utrecht-custom-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--html-input:active,.utrecht-custom-checkbox--html-input:active{background-color:var(--utrecht-custom-checkbox-active-background-color, var(--utrecht-custom-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-custom-checkbox-active-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-active-border-width, var(--utrecht-custom-checkbox-border-width));color:var(--utrecht-custom-checkbox-active-color, var(--utrecht-custom-checkbox-color))}.utrecht-checkbox--custom.utrecht-checkbox--html-input:checked,.utrecht-custom-checkbox--html-input:checked{background-color:var(--utrecht-custom-checkbox-checked-background-color, var(--utrecht-custom-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-custom-checkbox-checked-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-checked-border-width, var(--utrecht-custom-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--html-input:indeterminate,.utrecht-custom-checkbox--html-input:indeterminate{background-color:var(--utrecht-custom-checkbox-indeterminate-background-color, var(--utrecht-custom-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e\");border-color:var(--utrecht-custom-checkbox-indeterminate-border-color, var(--utrecht-custom-checkbox-border-color));border-width:var(--utrecht-custom-checkbox-indeterminate-border-width, var(--utrecht-custom-checkbox-border-width));color:var(--utrecht-custom-checkbox-indeterminate-color, var(--utrecht-custom-checkbox-color))}:host{display:block}:host([hidden]){display:none !important}";
+
+const CustomCheckbox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    const { checked, required, disabled, indeterminate, invalid } = this;
+    return (h("input", { "aria-invalid": invalid ? 'true' : null, class: clsx('utrecht-custom-checkbox', 'utrecht-custom-checkbox--html-input', invalid && 'utrecht-custom-checkbox__box--invalid'), type: "checkbox", checked: checked, required: required, indeterminate: indeterminate, disabled: disabled }));
+  }
+  static get style() { return indexCss; }
+}, [1, "utrecht-custom-checkbox", {
+    "disabled": [4],
+    "checked": [4],
+    "indeterminate": [4],
+    "invalid": [4],
+    "required": [4]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["utrecht-custom-checkbox"];
+  components.forEach(tagName => { switch (tagName) {
+    case "utrecht-custom-checkbox":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CustomCheckbox);
+      }
+      break;
+  } });
+}
+
+const UtrechtCustomCheckbox = CustomCheckbox;
+const defineCustomElement = defineCustomElement$1;
+
+export { UtrechtCustomCheckbox, defineCustomElement };

package/dist/components/utrecht-digid-button.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UtrechtDigidButton extends Components.UtrechtDigidButton, HTMLElement {}
+export const UtrechtDigidButton: {
+  prototype: UtrechtDigidButton;
+  new (): UtrechtDigidButton;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/utrecht-digid-button.js

@@ -0,0 +1,41 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './index.stencil2.js';
+
+const indexCss = ".utrecht-digid-button{--utrecht-button-min-block-size:var(--utrecht-digid-button-block-size, 50px);--utrecht-logo-max-block-size:var(--utrecht-digid-button-block-size, 50px);--utrecht-logo-max-inline-size:var(--utrecht-digid-button-block-size, 50px);block-size:var(--utrecht-digid-button-block-size, 50px);display:inline-flex;gap:var(--utrecht-space-inline-sm)}:host{display:block}:host([hidden]){display:none !important}";
+
+const DigidButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h("div", { class: "utrecht-digid-button" }, h("utrecht-digid-logo", { class: "utrecht-digid-button__logo" }), h("slot", null)));
+  }
+  static get style() { return indexCss; }
+}, [1, "utrecht-digid-button", {
+    "type": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["utrecht-digid-button", "utrecht-digid-logo"];
+  components.forEach(tagName => { switch (tagName) {
+    case "utrecht-digid-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DigidButton);
+      }
+      break;
+    case "utrecht-digid-logo":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const UtrechtDigidButton = DigidButton;
+const defineCustomElement = defineCustomElement$1;
+
+export { UtrechtDigidButton, defineCustomElement };

package/dist/components/utrecht-digid-logo.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UtrechtDigidLogo extends Components.UtrechtDigidLogo, HTMLElement {}
+export const UtrechtDigidLogo: {
+  prototype: UtrechtDigidLogo;
+  new (): UtrechtDigidLogo;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/utrecht-digid-logo.js

@@ -0,0 +1,6 @@
+import { D as DigidLogo, d as defineCustomElement$1 } from './index.stencil2.js';
+
+const UtrechtDigidLogo = DigidLogo;
+const defineCustomElement = defineCustomElement$1;
+
+export { UtrechtDigidLogo, defineCustomElement };

package/dist/components/utrecht-document.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UtrechtDocument extends Components.UtrechtDocument, HTMLElement {}
+export const UtrechtDocument: {
+  prototype: UtrechtDocument;
+  new (): UtrechtDocument;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/utrecht-document.js

@@ -0,0 +1,33 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const indexCss = ".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)}:host{display:block}:host([hidden]){display:none !important}";
+
+const Document = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h("div", { class: "utrecht-document" }, h("slot", null)));
+  }
+  static get style() { return indexCss; }
+}, [1, "utrecht-document"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["utrecht-document"];
+  components.forEach(tagName => { switch (tagName) {
+    case "utrecht-document":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Document);
+      }
+      break;
+  } });
+}
+
+const UtrechtDocument = Document;
+const defineCustomElement = defineCustomElement$1;
+
+export { UtrechtDocument, defineCustomElement };

package/dist/components/utrecht-eherkenning-logo.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UtrechtEherkenningLogo extends Components.UtrechtEherkenningLogo, HTMLElement {}
+export const UtrechtEherkenningLogo: {
+  prototype: UtrechtEherkenningLogo;
+  new (): UtrechtEherkenningLogo;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/utrecht-eherkenning-logo.js

@@ -0,0 +1,33 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const indexCss = ":host{display:inline}:host([hidden]){display:none !important}svg{height:100%;max-height:var(--utrecht-digid-logo-max-block-size, var(--utrecht-logo-max-block-size, 50px));max-width:var(--utrecht-digid-logo-max-inline-size, var(--utrecht-logo-max-inline-size, 50px));width:100%}";
+
+const EherkenningLogo = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", viewBox: "-1 0 81 80" }, h("title", null, "Eherkenning"), h("rect", { fill: "#E0E0E0", width: "80", height: "80" }), h("path", { "fill-rule": "evenodd", fill: "#00328C", d: "M37.363,23.178c0,2.027,0,4.055,0,6.08c-4.257,0-9.55,0-14.208,0  c-1.662,0-3.648-0.207-4.799,0.193c-1.041,0.359-1.796,1.169-2.176,2.111c-0.439,1.084-0.32,2.8-0.32,4.414c0,3.425,0,6.055,0,9.475  c0,1.531-0.159,3.325,0.191,4.479c0.316,1.042,1.316,2.194,2.561,2.496c1.318,0.319,3.094,0.064,4.672,0.064  c4.599,0,9.521,0,14.08,0c0,2.025,0,4.053,0,6.08c-6.402-0.083-12.492,0.112-18.176,0c-4.937-0.099-8.966-3.966-9.344-8.833  c-0.226-2.883,0-5.901,0-8.769c0-2.971-0.19-5.932,0-8.767c0.328-4.896,4.208-8.676,8.959-9.024c3.002-0.222,6.129,0,9.28,0  C31.145,23.178,34.26,23.178,37.363,23.178z" }), h("path", { "fill-rule": "evenodd", fill: "#FF0079", d: "M42.867,23.178c1.962,0,3.926,0,5.888,0c0,4.864,0,9.729,0,14.592  c-1.984,0-3.969,0-5.952,0c0-4.801,0-9.6,0-14.399C42.797,23.279,42.792,23.188,42.867,23.178z" }), h("path", { "fill-rule": "evenodd", fill: "#FF0079", d: "M64.434,23.178c1.941,0,3.883,0,5.824,0c0,11.798,0,23.595,0,35.393  c-1.962,0-3.926,0-5.888,0c0-4.992,0-9.984,0-14.977c-5.077,0-10.155,0-15.232,0c0.824-1.95,1.651-3.896,2.56-5.76  c4.203,0,8.405,0,12.608,0c0.15-4.693,0.021-9.664,0.064-14.464C64.365,23.279,64.36,23.188,64.434,23.178z" }), h("path", { "fill-rule": "evenodd", fill: "#00328C", d: "M19.89,37.77c5.376,0,10.752,0,16.129,0c-0.772,2.022-1.748,3.843-2.56,5.824  c-4.544,0-9.088,0-13.633,0c0-1.877,0-3.755,0-5.633C19.821,37.87,19.816,37.781,19.89,37.77z" }), h("path", { "fill-rule": "evenodd", fill: "#FF0079", d: "M42.93,43.594c1.941,0,3.883,0,5.824,0c0,4.992,0,9.984,0,14.977  c-1.984,0-3.969,0-5.952,0c0-4.93,0-9.856,0-14.783C42.8,43.678,42.851,43.62,42.93,43.594z" })));
+  }
+  static get style() { return indexCss; }
+}, [1, "utrecht-eherkenning-logo"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["utrecht-eherkenning-logo"];
+  components.forEach(tagName => { switch (tagName) {
+    case "utrecht-eherkenning-logo":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, EherkenningLogo);
+      }
+      break;
+  } });
+}
+
+const UtrechtEherkenningLogo = EherkenningLogo;
+const defineCustomElement = defineCustomElement$1;
+
+export { UtrechtEherkenningLogo, defineCustomElement };

package/dist/components/utrecht-eidas-logo.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UtrechtEidasLogo extends Components.UtrechtEidasLogo, HTMLElement {}
+export const UtrechtEidasLogo: {
+  prototype: UtrechtEidasLogo;
+  new (): UtrechtEidasLogo;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/utrecht-eidas-logo.js

@@ -0,0 +1,33 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const indexCss = ":host{display:inline}:host([hidden]){display:none !important}svg{height:100%;max-height:var(--utrecht-digid-logo-max-block-size, var(--utrecht-logo-max-block-size, 50px));max-width:var(--utrecht-digid-logo-max-inline-size, var(--utrecht-logo-max-inline-size, 50px));width:100%}";
+
+const EidasLogo = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h("svg", { viewBox: "0 0 21 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M21 17.3383C21 18.2955 20.2291 19.0664 19.272 19.0664H1.72805C0.770872 19.0664 0 18.2955 0 17.3383V1.72805C0 0.770879 0.777296 0 1.72805 0H19.272C20.2291 0 21 0.777303 21 1.72805V17.3383Z", fill: "#2C4375" }), h("path", { d: "M7.88867 19.0984V15.9057C7.88867 14.5952 8.94862 13.5353 10.2591 13.5353H17.0493C18.3598 13.5353 19.4197 14.6017 19.4197 15.9057V19.0984", fill: "white" }), h("path", { d: "M9.38546 9.78369C9.55891 9.19911 9.83513 8.72373 10.2141 8.34472C10.5932 7.97213 11.075 7.69589 11.6724 7.51602C12.2698 7.33615 12.9765 7.24622 13.8051 7.24622C14.4989 7.24622 15.1028 7.32973 15.6231 7.49675C16.1435 7.66377 16.5932 7.92716 16.985 8.2869C17.4411 8.71089 17.7495 9.20553 17.9101 9.76442C18.0707 10.3233 18.1542 11.0299 18.1542 11.8651V17.0428C18.1542 17.486 18.0514 17.8201 17.8523 18.0385C17.6467 18.2569 17.3833 18.3661 17.0557 18.3661C16.7281 18.3661 16.4647 18.2569 16.272 18.0385C16.0792 17.8201 15.9765 17.4925 15.9765 17.0428V11.7173C15.9765 10.7987 15.803 10.1113 15.4497 9.66163C15.0964 9.21196 14.4989 8.98069 13.6445 8.98069C13.0278 8.98069 12.5525 9.0899 12.2056 9.31474C11.8651 9.53958 11.6274 9.84793 11.4925 10.2526C11.3576 10.6574 11.2934 11.1584 11.2934 11.7559V17.0428C11.2934 17.4796 11.197 17.8137 10.9979 18.0321C10.7987 18.2505 10.5353 18.3597 10.1949 18.3597C9.87367 18.3597 9.6103 18.2505 9.41758 18.0321C9.21844 17.8137 9.12207 17.4796 9.12207 17.0428V11.8779C9.12207 11.0621 9.21201 10.3683 9.38546 9.78369Z", fill: "white" }), h("path", { d: "M13.169 0.648804L13.683 2.0942L15.3275 2.08778L13.9913 2.98071L14.5052 4.41968L13.169 3.52675L11.8457 4.41968L12.3532 2.98071L11.0234 2.08778L12.668 2.0942L13.169 0.648804Z", fill: "#F2CD23" }), h("path", { d: "M18.2893 1.59314L18.7968 3.03854L20.4413 3.03211L19.1116 3.91862L19.6191 5.35759L18.2893 4.46466L16.9595 5.35759L17.4735 3.91862L16.1309 3.03211L17.7882 3.03854L18.2893 1.59314Z", fill: "#F2CD23" }), h("path", { d: "M3.60369 14.833L4.11118 16.2784L5.75573 16.272L4.41954 17.1585L4.93346 18.5975L3.60369 17.7045L2.27392 18.5975L2.78784 17.1585L1.45166 16.272L3.09619 16.2784L3.60369 14.833Z", fill: "#F2CD23" }), h("path", { d: "M4.80536 5.51819L5.31284 6.96358L6.95739 6.95716L5.62763 7.84367L6.13512 9.28264L4.80536 8.38971L3.47559 9.28264L3.98308 7.84367L2.65332 6.95716L4.30428 6.96358L4.80536 5.51819Z", fill: "#F2CD23" }), h("path", { d: "M8.43483 2.07495L8.93591 3.52035L10.5869 3.51392L9.25068 4.40043L9.76459 5.83941L8.43483 4.94647L7.10507 5.83941L7.61256 4.40043L6.27637 3.51392L7.92733 3.52035L8.43483 2.07495Z", fill: "#F2CD23" }), h("path", { d: "M3.12176 10.3234L3.62925 11.7688L5.28021 11.7623L3.94402 12.6488L4.45152 14.0878L3.12176 13.1949L1.79198 14.0878L2.3059 12.6488L0.969727 11.7623L2.61426 11.7688L3.12176 10.3234Z", fill: "#F2CD23" })));
+  }
+  static get style() { return indexCss; }
+}, [1, "utrecht-eidas-logo"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["utrecht-eidas-logo"];
+  components.forEach(tagName => { switch (tagName) {
+    case "utrecht-eidas-logo":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, EidasLogo);
+      }
+      break;
+  } });
+}
+
+const UtrechtEidasLogo = EidasLogo;
+const defineCustomElement = defineCustomElement$1;
+
+export { UtrechtEidasLogo, defineCustomElement };

package/dist/components/utrecht-form-field-checkbox.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UtrechtFormFieldCheckbox extends Components.UtrechtFormFieldCheckbox, HTMLElement {}
+export const UtrechtFormFieldCheckbox: {
+  prototype: UtrechtFormFieldCheckbox;
+  new (): UtrechtFormFieldCheckbox;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/utrecht-form-field-checkbox.js

@@ -0,0 +1,55 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { c as clsx } from './clsx.m.js';
+
+const indexCss = ".utrecht-form-field{font-family:var(--utrecht-document-font-family, inherit);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, 0));max-inline-size:var(--utrecht-form-field-max-inline-size);page-break-inside:avoid}.utrecht-form-field--distanced{--utrecht-space-around:1}.utrecht-form-field--invalid{border-inline-start-color:var(--utrecht-form-field-invalid-border-inline-start-color);border-inline-start-style:solid;border-inline-start-width:var(--utrecht-form-field-invalid-border-inline-start-width);padding-inline-start:var(--utrecht-form-field-invalid-padding-inline-start)}.utrecht-form-field--checkbox{display:grid;gap:0 var(--utrecht-custom-checkbox-margin-inline-end, 12px);grid-template-areas:\"input label\" \"input description\" \"input description-invalid\";grid-template-columns:var(--utrecht-custom-checkbox-size) 100fr;}.utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc(-1 * (var(--utrecht-custom-checkbox-size) + var(--utrecht-custom-checkbox-margin-inline-end, 12px)))}.utrecht-form-field--checkbox .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-custom-checkbox-margin-inline-end, 12px)}.utrecht-form-field--radio{display:grid;gap:0 var(--utrecht-custom-radio-button-margin-inline-end, 12px);grid-template-areas:\"input label\" \"input description\" \"input description-invalid\";grid-template-columns:var(--utrecht-custom-radio-button-size) 100fr;}.utrecht-form-field--radio .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc(-1 * (var(--utrecht-custom-radio-button-size) + var(--utrecht-custom-radio-button-margin-inline-end, 12px)))}.utrecht-form-field--radio .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-custom-radio-button-margin-inline-end, 12px)}.utrecht-form-field__input{grid-area:input;order:5}.utrecht-form-field__label{grid-area:label;margin-block-end:var(--utrecht-form-field-label-margin-block-end);margin-block-start:0;order:1}.utrecht-form-field .utrecht-form-field-description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field .utrecht-form-field-description--invalid{grid-area:description-invalid;order:3}.utrecht-form-field__description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field__description--before{grid-area:description-before;order:4}.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));cursor:var(--utrecht-action-activate-cursor, revert);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, revert);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));cursor:var(--utrecht-action-activate-cursor, revert);font-weight:var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-checkbox{margin-block-end:0;margin-block-start:0;margin-inline-end:0;margin-inline-start:0;cursor:var(--utrecht-action-activate-cursor, revert)}.utrecht-checkbox--disabled{cursor:var(--utrecht-action-disabled-cursor, revert)}.utrecht-checkbox--focus-visible{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0)\n    var(--utrecht-focus-inverse-outline-color, transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color, revert);outline-offset:var(--utrecht-focus-outline-offset, revert);outline-style:var(--utrecht-focus-outline-style, revert);outline-width:var(--utrecht-focus-outline-width, revert)}.utrecht-checkbox--html-input:disabled{cursor:var(--utrecht-action-disabled-cursor, revert)}.utrecht-checkbox--html-input:focus{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0)\n    var(--utrecht-focus-inverse-outline-color, transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color, revert);outline-offset:var(--utrecht-focus-outline-offset, revert);outline-style:var(--utrecht-focus-outline-style, revert);outline-width:var(--utrecht-focus-outline-width, revert)}.utrecht-checkbox--html-input:focus:not(:focus-visible){box-shadow:none;outline-style:revert}:host{display:block}:host([hidden]){display:none !important}";
+
+const FormFieldCheckbox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.utrechtBlur = createEvent(this, "utrechtBlur", 7);
+    this.utrechtChange = createEvent(this, "utrechtChange", 7);
+    this.utrechtFocus = createEvent(this, "utrechtFocus", 7);
+    this.utrechtInput = createEvent(this, "utrechtInput", 7);
+    this.label = false;
+    this.disabled = false;
+    this.checked = false;
+    this.invalid = false;
+    this.required = false;
+    this.value = '';
+  }
+  render() {
+    const { checked, disabled, invalid, required, value } = this;
+    return (h("div", { class: "utrecht-form-field utrecht-form-field--checkbox" }, h("input", { id: "input", class: clsx('utrecht-checkbox'), type: "checkbox", checked: checked, disabled: disabled, "aria-invalid": invalid ? 'true' : null, required: required, value: value, onBlur: (evt) => this.utrechtBlur.emit(evt), onChange: (evt) => this.utrechtChange.emit(evt), onFocus: (evt) => this.utrechtFocus.emit(evt), onInput: (evt) => {
+        this.checked = evt.target.checked;
+        this.utrechtInput.emit(evt);
+      } }), h("label", { class: clsx('utrecht-form-field__label', 'utrecht-form-field__label--checkbox', 'utrecht-form-label', 'utrecht-form-label--checkbox'), htmlFor: "input" }, h("slot", null))));
+  }
+  static get style() { return indexCss; }
+}, [1, "utrecht-form-field-checkbox", {
+    "label": [4],
+    "disabled": [516],
+    "checked": [516],
+    "invalid": [516],
+    "required": [516],
+    "value": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["utrecht-form-field-checkbox"];
+  components.forEach(tagName => { switch (tagName) {
+    case "utrecht-form-field-checkbox":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FormFieldCheckbox);
+      }
+      break;
+  } });
+}
+
+const UtrechtFormFieldCheckbox = FormFieldCheckbox;
+const defineCustomElement = defineCustomElement$1;
+
+export { UtrechtFormFieldCheckbox, defineCustomElement };

package/dist/components/utrecht-form-field-description.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UtrechtFormFieldDescription extends Components.UtrechtFormFieldDescription, HTMLElement {}
+export const UtrechtFormFieldDescription: {
+  prototype: UtrechtFormFieldDescription;
+  new (): UtrechtFormFieldDescription;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/utrecht-form-field-description.js

@@ -0,0 +1,38 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { c as clsx } from './clsx.m.js';
+
+const indexCss = ".utrecht-form-field-description{--utrecht-document-color:currentColor;color:var(--utrecht-form-field-description-color);font-family:var(--utrecht-document-font-family, inherit);font-size:var(--utrecht-form-field-description-font-size, inherit);font-style:var(--utrecht-form-field-description-font-style);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)))}.utrecht-form-field-description>*{--utrecht-space-around:1}.utrecht-form-field-description--distanced{--utrecht-space-around:1}.utrecht-form-field-description--invalid{color:var(--utrecht-form-field-description-invalid-color, var(--utrecht-feedback-invalid-color, var(--utrecht-feedback-danger-color)))}.utrecht-form-field-description--valid{color:var(--utrecht-form-field-description-valid-color, var(--utrecht-feedback-valid-color, var(--utrecht-feedback-safe-color)))}.utrecht-form-field-description--warning{color:var(--utrecht-form-field-description-warning-color, var(--utrecht-feedback-warning-color))}:host{display:block}:host([hidden]){display:none !important}";
+
+const FormFieldDescription = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.status = null;
+  }
+  render() {
+    const { status } = this;
+    return (h("div", { class: clsx('utrecht-form-field-description', status === 'valid' && 'utrecht-form-field-description--valid', status === 'invalid' && 'utrecht-form-field-description--invalid') }, h("slot", null)));
+  }
+  static get style() { return indexCss; }
+}, [1, "utrecht-form-field-description", {
+    "status": [513]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["utrecht-form-field-description"];
+  components.forEach(tagName => { switch (tagName) {
+    case "utrecht-form-field-description":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FormFieldDescription);
+      }
+      break;
+  } });
+}
+
+const UtrechtFormFieldDescription = FormFieldDescription;
+const defineCustomElement = defineCustomElement$1;
+
+export { UtrechtFormFieldDescription, defineCustomElement };

package/dist/components/utrecht-form-field-textarea.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UtrechtFormFieldTextarea extends Components.UtrechtFormFieldTextarea, HTMLElement {}
+export const UtrechtFormFieldTextarea: {
+  prototype: UtrechtFormFieldTextarea;
+  new (): UtrechtFormFieldTextarea;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;