@utrecht/component-library-css 1.0.0-alpha.35 → 1.0.0-alpha.351

package/dist/html.css

@@ -12,20 +12,17 @@
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
-/* stylelint-disable-next-line block-no-empty */
-/* stylelint-disable-next-line block-no-empty */
+/* Collection of all semantic HTML styles in the component library */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
  */
-.utrecht-article, .utrecht-html article {
-  max-inline-size: var(--utrecht-article-max-inline-size);
-}
-
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
@@ -34,30 +31,6 @@
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
-.utrecht-blockquote, .utrecht-html blockquote {
-  font-family: var(--utrecht-document-font-family);
-  font-size: var(--utrecht-blockquote-font-size);
-  margin-inline-start: var(--utrecht-blockquote-margin-inline-start);
-  margin-inline-end: var(--utrecht-blockquote-margin-inline-end);
-}
-
-.utrecht-blockquote__attribution {
-  color: var(--utrecht-blockquote-attribution-color, inherit);
-  font-size: var(--utrecht-blockquote-attribution-font-size, inherit);
-}
-
-.utrecht-blockquote__content, .utrecht-html blockquote {
-  --utrecht-document-color: var(--utrecht-blockquote-content-color, inherit);
-  --utrecht-paragraph-font-size: var(--utrecht-blockquote-content-font-size, inherit);
-  color: var(--utrecht-blockquote-content-color, inherit);
-  font-size: var(--utrecht-blockquote-content-font-size, inherit);
-}
-
-.utrecht-blockquote--distanced, .utrecht-html blockquote {
-  margin-block-start: var(--utrecht-blockquote-margin-block-start);
-  margin-block-end: var(--utrecht-blockquote-margin-block-end);
-}
-
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
@@ -67,85 +40,27 @@
  * Copyright (c) 2021 The Knights Who Say NIH! B.V.
  * Copyright (c) 2021 Gemeente Utrecht
  */
-.utrecht-button, .utrecht-html button {
-  color: var(--utrecht-button-primary-action-color);
-  font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
-  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
-  font-weight: var(--utrecht-button-font-weight);
-  background-color: var(--utrecht-button-primary-action-background-color);
-  border-radius: var(--utrecht-button-border-radius);
-  border-width: var(--utrecht-button-border-width);
-  letter-spacing: var(--utrecht-button-letter-spacing);
-  padding-inline-start: var(--utrecht-button-padding-inline-start);
-  padding-inline-end: var(--utrecht-button-padding-inline-end);
-  padding-block-start: var(--utrecht-button-padding-block-start);
-  padding-block-end: var(--utrecht-button-padding-block-end);
-  text-transform: var(--utrecht-button-text-transform);
-}
-
-.utrecht-button--distanced, .utrecht-html button {
-  margin-inline-start: var(--utrecht-button-margin-inline-start);
-  margin-inline-end: var(--utrecht-button-margin-inline-end);
-  margin-block-start: var(--utrecht-button-margin-block-start);
-  margin-block-end: var(--utrecht-button-margin-block-end);
-}
-
-.utrecht-button:disabled, .utrecht-html button:disabled,
-.utrecht-button--disabled {
-  color: var(--utrecht-button-disabled-color);
-  background-color: var(--utrecht-button-disabled-background-color);
-}
-
-.utrecht-button--focus, .utrecht-html button:focus,
-.utrecht-button:not(.utrecht-button--disabled):focus {
-  outline-width: var(--utrecht-focus-outline-width, 0);
-  outline-style: var(--utrecht-focus-outline-style, solid);
-  outline-color: var(--utrecht-focus-outline-color, transparent);
-  color: var(--utrecht-focus-color, inherit);
-  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
-  outline-offset: 0;
-  background-color: var(--utrecht-focus-background-color);
-}
-
-.utrecht-button--hover:not(:disabled), .utrecht-html button:not(:disabled):hover,
-.utrecht-button:hover:not(:disabled):not(.utrecht-button--disabled) {
-  color: var(--utrecht-button-primary-action-color);
-  background-color: var(--utrecht-button-primary-action-hover-background-color);
-  transform: scale(var(--utrecht-button-focus-transform-scale, 1));
-}
-
 /**
  * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
  * Copyright (c) 2021 Robbert Broersma
  */
+/* stylelint-disable-next-line block-no-empty */
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
-.utrecht-checkbox, .utrecht-html input[type=checkbox] {
-  /* reset native margin for input[type="checkbox"] */
-  margin-block-start: 0;
-  margin-block-end: 0;
-  margin-inline-start: 0;
-  margin-inline-end: 0;
-}
-
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
 /**
  * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
  * Copyright (c) 2021 Robbert Broersma
  */
-.utrecht-emphasis--stressed, .utrecht-html em {
-  font-style: var(--utrecht-emphasis-stressed-font-style, italic);
-}
-
-.utrecht-emphasis--strong, .utrecht-html strong {
-  font-weight: var(--utrecht-emphasis-strong-font-weight, bold);
-}
-
+/* stylelint-disable-next-line block-no-empty */
+/* stylelint-disable-next-line block-no-empty */
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
@@ -154,39 +69,6 @@
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
-.utrecht-form-fieldset--distanced, .utrecht-html fieldset {
-  margin-block-start: var(--utrecht-form-fieldset-margin-block-start, 0);
-  margin-block-end: var(--utrecht-form-fieldset-margin-block-end, 0);
-}
-
-.utrecht-form-fieldset__legend, .utrecht-html legend {
-  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);
-  color: var(--utrecht-form-fieldset-legend-color, var(--utrecht-document-color, inherit));
-}
-
-.utrecht-form-fieldset__legend--distanced, .utrecht-html legend {
-  margin-block-start: var(--utrecht-form-fieldset-legend-margin-block-start);
-  margin-block-end: var(--utrecht-form-fieldset-legend-margin-block-end);
-}
-
-.utrecht-html fieldset {
-  border: 0;
-  margin: 0;
-  min-width: 0;
-  padding-block-end: 0;
-  padding-block-start: 0.01em;
-  padding-inline-end: 0;
-  padding-inline-start: 0;
-}
-
-.utrecht-html legend {
-  padding-inline-end: 0;
-  padding-inline-start: 0;
-}
-
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
@@ -195,124 +77,18 @@
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
-.utrecht-form-label, .utrecht-html label {
-  font-weight: var(--utrecht-form-label-font-weight);
-  font-size: var(--utrecht-form-label-font-size);
-}
-
-.utrecht-form-label--checkbox, .utrecht-html input[type=checkbox] ~ label {
-  font-weight: var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight));
-}
-
-.utrecht-form-label--radio, .utrecht-html input[type=radio] ~ label {
-  font-weight: var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight));
-}
-
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
  * Copyright (c) 2021 Robbert Broersma
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
  */
-.utrecht-heading-1, .utrecht-html h1 {
-  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);
-  text-transform: var(--utrecht-heading-1-text-transform, inherit);
-  color: var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
-}
-
-.utrecht-heading-1--distanced, .utrecht-html h1 {
-  margin-block-start: var(--utrecht-heading-1-margin-block-start);
-  margin-block-end: var(--utrecht-heading-1-margin-block-end);
-}
-
-.utrecht-heading-2, .utrecht-html h2 {
-  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);
-  text-transform: var(--utrecht-heading-2-text-transform, inherit);
-  color: var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
-}
-
-.utrecht-heading-2--distanced, .utrecht-html h2 {
-  margin-block-start: var(--utrecht-heading-2-margin-block-start);
-  margin-block-end: var(--utrecht-heading-2-margin-block-end);
-}
-
-.utrecht-heading-3, .utrecht-html h3 {
-  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);
-  text-transform: var(--utrecht-heading-3-text-transform, inherit);
-  color: var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
-}
-
-.utrecht-heading-3--distanced, .utrecht-html h3 {
-  margin-block-start: var(--utrecht-heading-3-margin-block-start);
-  margin-block-end: var(--utrecht-heading-3-margin-block-end);
-}
-
-.utrecht-heading-4, .utrecht-html h4 {
-  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);
-  text-transform: var(--utrecht-heading-4-text-transform, inherit);
-  color: var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
-}
-
-.utrecht-heading-4--distanced, .utrecht-html h4 {
-  margin-block-start: var(--utrecht-heading-4-margin-block-start);
-  margin-block-end: var(--utrecht-heading-4-margin-block-end);
-}
-
-.utrecht-heading-5, .utrecht-html h5 {
-  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);
-  text-transform: var(--utrecht-heading-5-text-transform, inherit);
-  color: var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
-}
-
-.utrecht-heading-5--distanced, .utrecht-html h5 {
-  margin-block-start: var(--utrecht-heading-5-margin-block-start);
-  margin-block-end: var(--utrecht-heading-5-margin-block-end);
-}
-
-.utrecht-heading-6, .utrecht-html h6 {
-  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);
-  text-transform: var(--utrecht-heading-6-text-transform, inherit);
-  color: var(--utrecht-heading-6-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
-}
-
-.utrecht-heading-6--distanced, .utrecht-html h6 {
-  margin-block-start: var(--utrecht-heading-6-margin-block-start);
-  margin-block-end: var(--utrecht-heading-6-margin-block-end);
-}
-
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
-/* Collection of all semantic HTML styles in the component library */
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
@@ -321,8 +97,6 @@
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
-/* stylelint-disable-next-line block-no-empty */
-/* stylelint-disable-next-line block-no-empty */
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
@@ -331,344 +105,176 @@
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
-.utrecht-article, .utrecht-html article {
-  max-inline-size: var(--utrecht-article-max-inline-size);
-}
-
 /**
  * @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 Robbert Broersma
+ * Copyright (c) 2021-2022 Frameless B.V.
  */
-.utrecht-blockquote, .utrecht-html blockquote {
-  font-family: var(--utrecht-document-font-family);
-  font-size: var(--utrecht-blockquote-font-size);
-  margin-inline-start: var(--utrecht-blockquote-margin-inline-start);
-  margin-inline-end: var(--utrecht-blockquote-margin-inline-end);
-}
-
-.utrecht-blockquote__attribution {
-  color: var(--utrecht-blockquote-attribution-color, inherit);
-  font-size: var(--utrecht-blockquote-attribution-font-size, inherit);
-}
-
-.utrecht-blockquote__content, .utrecht-html blockquote {
-  --utrecht-document-color: var(--utrecht-blockquote-content-color, inherit);
-  --utrecht-paragraph-font-size: var(--utrecht-blockquote-content-font-size, inherit);
-  color: var(--utrecht-blockquote-content-color, inherit);
-  font-size: var(--utrecht-blockquote-content-font-size, inherit);
-}
-
-.utrecht-blockquote--distanced, .utrecht-html blockquote {
-  margin-block-start: var(--utrecht-blockquote-margin-block-start);
-  margin-block-end: var(--utrecht-blockquote-margin-block-end);
-}
-
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
  * 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-button, .utrecht-html button {
-  color: var(--utrecht-button-primary-action-color);
-  font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
-  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
-  font-weight: var(--utrecht-button-font-weight);
-  background-color: var(--utrecht-button-primary-action-background-color);
-  border-radius: var(--utrecht-button-border-radius);
-  border-width: var(--utrecht-button-border-width);
-  letter-spacing: var(--utrecht-button-letter-spacing);
-  padding-inline-start: var(--utrecht-button-padding-inline-start);
-  padding-inline-end: var(--utrecht-button-padding-inline-end);
-  padding-block-start: var(--utrecht-button-padding-block-start);
-  padding-block-end: var(--utrecht-button-padding-block-end);
-  text-transform: var(--utrecht-button-text-transform);
-}
-
-.utrecht-button--distanced, .utrecht-html button {
-  margin-inline-start: var(--utrecht-button-margin-inline-start);
-  margin-inline-end: var(--utrecht-button-margin-inline-end);
-  margin-block-start: var(--utrecht-button-margin-block-start);
-  margin-block-end: var(--utrecht-button-margin-block-end);
-}
-
-.utrecht-button:disabled, .utrecht-html button:disabled,
-.utrecht-button--disabled {
-  color: var(--utrecht-button-disabled-color);
-  background-color: var(--utrecht-button-disabled-background-color);
-}
-
-.utrecht-button--focus, .utrecht-html button:focus,
-.utrecht-button:not(.utrecht-button--disabled):focus {
-  outline-width: var(--utrecht-focus-outline-width, 0);
-  outline-style: var(--utrecht-focus-outline-style, solid);
-  outline-color: var(--utrecht-focus-outline-color, transparent);
-  color: var(--utrecht-focus-color, inherit);
-  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
-  outline-offset: 0;
-  background-color: var(--utrecht-focus-background-color);
-}
-
-.utrecht-button--hover:not(:disabled), .utrecht-html button:not(:disabled):hover,
-.utrecht-button:hover:not(:disabled):not(.utrecht-button--disabled) {
-  color: var(--utrecht-button-primary-action-color);
-  background-color: var(--utrecht-button-primary-action-hover-background-color);
-  transform: scale(var(--utrecht-button-focus-transform-scale, 1));
-}
-
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
 /**
  * @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-checkbox, .utrecht-html input[type=checkbox] {
-  /* reset native margin for input[type="checkbox"] */
-  margin-block-start: 0;
-  margin-block-end: 0;
-  margin-inline-start: 0;
-  margin-inline-end: 0;
-}
-
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
 /**
  * @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-emphasis--stressed, .utrecht-html em {
-  font-style: var(--utrecht-emphasis-stressed-font-style, italic);
-}
-
-.utrecht-emphasis--strong, .utrecht-html strong {
-  font-weight: var(--utrecht-emphasis-strong-font-weight, bold);
-}
-
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
 /**
  * @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-form-fieldset--distanced, .utrecht-html fieldset {
-  margin-block-start: var(--utrecht-form-fieldset-margin-block-start, 0);
-  margin-block-end: var(--utrecht-form-fieldset-margin-block-end, 0);
-}
-
-.utrecht-form-fieldset__legend, .utrecht-html legend {
-  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);
-  color: var(--utrecht-form-fieldset-legend-color, var(--utrecht-document-color, inherit));
-}
-
-.utrecht-form-fieldset__legend--distanced, .utrecht-html legend {
-  margin-block-start: var(--utrecht-form-fieldset-legend-margin-block-start);
-  margin-block-end: var(--utrecht-form-fieldset-legend-margin-block-end);
-}
-
-.utrecht-html fieldset {
-  border: 0;
-  margin: 0;
-  min-width: 0;
-  padding-block-end: 0;
-  padding-block-start: 0.01em;
-  padding-inline-end: 0;
-  padding-inline-start: 0;
-}
-
-.utrecht-html legend {
-  padding-inline-end: 0;
-  padding-inline-start: 0;
-}
-
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
 /**
  * @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-form-label, .utrecht-html label {
-  font-weight: var(--utrecht-form-label-font-weight);
-  font-size: var(--utrecht-form-label-font-size);
-}
-
-.utrecht-form-label--checkbox, .utrecht-html input[type=checkbox] ~ label {
-  font-weight: var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight));
-}
-
-.utrecht-form-label--radio, .utrecht-html input[type=radio] ~ label {
-  font-weight: var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight));
-}
-
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2022 Gemeente Utrecht
+ * Copyright (c) 2022 Robbert Broersma
+ * Copyright (c) 2022 The Knights Who Say NIH! B.V.
+ */
+/**
+ * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
  * Copyright (c) 2021 The Knights Who Say NIH! B.V.
+ * Copyright (c) 2021 Gemeente Utrecht
  */
-.utrecht-heading-1, .utrecht-html h1 {
-  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);
-  text-transform: var(--utrecht-heading-1-text-transform, inherit);
-  color: var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
-}
+/* stylelint-disable scss/no-global-function-names */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/* stylelint-disable-next-line block-no-empty */
+/*
 
-.utrecht-heading-1--distanced, .utrecht-html h1 {
-  margin-block-start: var(--utrecht-heading-1-margin-block-start);
-  margin-block-end: var(--utrecht-heading-1-margin-block-end);
-}
+# CSS implementation
 
-.utrecht-heading-2, .utrecht-html h2 {
-  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);
-  text-transform: var(--utrecht-heading-2-text-transform, inherit);
-  color: var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
-}
+## `text-decoration-skip`
 
-.utrecht-heading-2--distanced, .utrecht-html h2 {
-  margin-block-start: var(--utrecht-heading-2-margin-block-start);
-  margin-block-end: var(--utrecht-heading-2-margin-block-end);
-}
+`text-decoration-skip` can be helpful to avoid making some texts unreadable.
+For example by obscuring Arabic diacritics.
 
-.utrecht-heading-3, .utrecht-html h3 {
-  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);
-  text-transform: var(--utrecht-heading-3-text-transform, inherit);
-  color: var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
-}
+However, the combination of a greater thickness and skipping this thick underline
+leads to a very unappealing rendering of the underline. To avoid this,
+`text-decoration-skip` is disabled for interactive states.
 
-.utrecht-heading-3--distanced, .utrecht-html h3 {
-  margin-block-start: var(--utrecht-heading-3-margin-block-start);
-  margin-block-end: var(--utrecht-heading-3-margin-block-end);
-}
+For design token configurations that have identical thickness for normal and interactive
+states, this will lead to the (undesirable) effect that the focus/hover effect is switching
+from an interrupted to an uninterrupted underline (for some texts).
 
-.utrecht-heading-4, .utrecht-html h4 {
-  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);
-  text-transform: var(--utrecht-heading-4-text-transform, inherit);
-  color: var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
-}
+Apart from making `skip-ink` configurable for normal/focus/hover, there is no good solution yet.
 
-.utrecht-heading-4--distanced, .utrecht-html h4 {
-  margin-block-start: var(--utrecht-heading-4-margin-block-start);
-  margin-block-end: var(--utrecht-heading-4-margin-block-end);
-}
+---
 
-.utrecht-heading-5, .utrecht-html h5 {
-  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);
-  text-transform: var(--utrecht-heading-5-text-transform, inherit);
-  color: var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
-}
+Disabling `text-decoration-skip` for interactive states obscures some texts, and we assume for now
+that moving the pointer away from a link or having focus elsewhere first is simple enough to
+not make this too inconvenient.
 
-.utrecht-heading-5--distanced, .utrecht-html h5 {
-  margin-block-start: var(--utrecht-heading-5-margin-block-start);
-  margin-block-end: var(--utrecht-heading-5-margin-block-end);
-}
+---
 
-.utrecht-heading-6, .utrecht-html h6 {
-  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);
-  text-transform: var(--utrecht-heading-6-text-transform, inherit);
-  color: var(--utrecht-heading-6-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
-}
+Some folks implement the underline of links using `border-bottom` or even using a finely crafted
+`linear-gradient()` with a solid color at the bottom and transparent behind the text. These approaches
+would unfortunately not be able to provide the improved readability of `text-decoration-skip`.
 
-.utrecht-heading-6--distanced, .utrecht-html h6 {
-  margin-block-start: var(--utrecht-heading-6-margin-block-start);
-  margin-block-end: var(--utrecht-heading-6-margin-block-end);
-}
+## `text-decoration-thickness`
 
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
- * Copyright (c) 2021 Gemeente Utrecht
- */
-.utrecht-link, .utrecht-html a:link {
-  text-decoration: var(--utrecht-link-text-decoration, underline);
-  color: var(--utrecht-link-color, blue);
-}
+Varying `text-decoration-thickness` can be used to distinguish interactive states.
 
-.utrecht-link:visited,
-.utrecht-link--visited,
-.utrecht-html a:visited {
-  color: var(--utrecht-link-visited-color, var(--utrecht-link-color));
-}
+---
 
-.utrecht-link:hover,
-.utrecht-link--hover,
-.utrecht-html a: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-thickness` appears to have rendering differences between Chrome and Safari.
+In Safari the line becomes thicker with extra pixels added to the bottom, while in Chrome
+the underline offset also seems to increase along with the thickness, which effectively means
+the underline is closer to the next line than in Safari.
 
-.utrecht-link:active,
-.utrecht-link--active,
-.utrecht-html a:active {
-  color: var(--utrecht-link-active-color, var(--utrecht-link-color));
-}
+---
 
-.utrecht-link:focus,
-.utrecht-link--focus,
-.utrecht-html a:focus {
-  color: var(--utrecht-link-focus-color, var(--utrecht-link-color));
-  text-decoration: var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));
-  outline-width: var(--utrecht-focus-outline-width, 0);
-  outline-style: var(--utrecht-focus-outline-style, solid);
-  outline-color: var(--utrecht-focus-outline-color, transparent);
-  color: var(--utrecht-focus-color, inherit);
-  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
-  outline-offset: 0;
-  background-color: var(--utrecht-focus-background-color);
-}
+It might be nice to use font-relative units for `text-decoration-thickness`, and that is why we
+use the `max()` function to ensure the underline remains visible for every font size.
 
-/* stylelint-disable-next-line block-no-empty */
-.utrecht-link--telephone, .utrecht-html a[href^="tel:" i] {
-  white-space: nowrap;
-}
+## `transition`
 
+`text-decoration-thickness` could be a candidate for animating between interactive states,
+however browsers don't seem to have implemented great looking supixel tweening yet.
+
+`text-decoration-skip` also makes the transition more challenging to implement.
+
+*/
+/* stylelint-disable-next-line block-no-empty */
+/* stylelint-disable-next-line block-no-empty */
+/* stylelint-disable-next-line block-no-empty */
+/* stylelint-disable-next-line block-no-empty */
+/**
+ * Link for elements such as `<img>` or `<article>`, that are not inline elements or plain text.
+ * 
+ * Changing `display: inline` to `inline-block` ensures the focus outline is rendered around the entire box.
+ */
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
@@ -678,20 +284,6 @@
  * Copyright (c) 2021 Robbert Broersma
  * Copyright (c) 2021 Gemeente Utrecht
  */
-.utrecht-ordered-list, .utrecht-html ol {
-  font-family: var(--utrecht-document-font-family, inherit);
-}
-
-.utrecht-ordered-list--distanced, .utrecht-html ol {
-  margin-block-end: var(--utrecht-ordered-list-margin-block-end);
-  margin-block-start: var(--utrecht-ordered-list-margin-block-start);
-}
-
-.utrecht-ordered-list__item, .utrecht-html ol > li {
-  margin-block-end: var(--utrecht-ordered-list-item-margin-block-end);
-  margin-block-start: var(--utrecht-ordered-list-item-margin-block-start);
-}
-
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
@@ -700,25 +292,6 @@
  * @license EUPL-1.2
  * Copyright (c) 2021 The Knights Who Say NIH! B.V.
  */
-.utrecht-paragraph, .utrecht-html p {
-  color: var(--utrecht-document-color, inherit);
-  font-family: var(--utrecht-paragraph-font-family, var(--utrecht-document-font-family, inherit));
-  font-size: var(--utrecht-paragraph-font-size, var(--utrecht-document-font-size, inherit));
-  font-weight: var(--utrecht-paragraph-font-weight, inherit);
-  line-height: var(--utrecht-paragraph-line-height, var(--utrecht-document-line-height, inherit));
-}
-
-.utrecht-paragraph--lead, .utrecht-html p.lead {
-  font-size: var(--utrecht-paragraph-lead-font-size, inherit);
-  font-weight: var(--utrecht-paragraph-lead-font-weight, inherit);
-  line-height: var(--utrecht-paragraph-lead-line-height, inherit);
-}
-
-.utrecht-paragraph--distanced, .utrecht-html * ~ p {
-  margin-block-start: var(--utrecht-paragraph-margin-block-start);
-  margin-block-end: var(--utrecht-paragraph-margin-block-end);
-}
-
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Gemeente Utrecht
@@ -727,14 +300,28 @@
  * @license EUPL-1.2
  * Copyright (c) 2021 Gemeente Utrecht
  */
-.utrecht-radio-button, .utrecht-html input[type=radio] {
-  /* reset native margin for input[type="radio"] */
-  margin-block-start: 0;
-  margin-block-end: 0;
-  margin-inline-start: 0;
-  margin-inline-end: 0;
-}
-
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/* stylelint-disable-next-line block-no-empty */
+/* stylelint-disable-next-line block-no-empty */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/* stylelint-disable-next-line block-no-empty */
+/* stylelint-disable-next-line block-no-empty */
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
@@ -745,14 +332,6 @@
  * Copyright (c) 2021 Robbert Broersma
  * Copyright (c) 2021 The Knights Who Say NIH! B.V.
  */
-.utrecht-separator, .utrecht-html hr {
-  border-style: solid;
-  border-color: var(--utrecht-separator-color);
-  border-width: 0 0 var(--utrecht-separator-width) 0;
-  margin-block-start: var(--utrecht-separator-margin-block-start);
-  margin-block-end: var(--utrecht-separator-margin-block-end);
-}
-
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
@@ -761,88 +340,8 @@
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
-.utrecht-table, .utrecht-html table {
-  border-collapse: collapse;
-  width: 100%;
-}
-
-.utrecht-table--distanced, .utrecht-html table {
-  margin-block-end: var(--utrecht-table-margin-block-end);
-  margin-block-start: var(--utrecht-table-margin-block-start);
-}
-
-.utrecht-table__caption, .utrecht-html caption {
-  font-weight: var(--utrecht-table-caption-font-weight);
-  font-family: var(--utrecht-table-caption-font-family);
-  font-size: var(--utrecht-table-caption-font-size);
-  color: var(--utrecht-table-caption-color);
-  line-height: var(--utrecht-table-caption-line-height);
-  margin-block-end: var(--utrecht-table-caption-margin-block-end);
-  text-align: var(--utrecht-table-caption-text-align, center);
-}
-
-.utrecht-table__header, .utrecht-html thead {
-  font-weight: var(--utrecht-table-header-font-weight);
-  color: var(--utrecht-table-header-color);
-  text-transform: var(--utrecht-table-header-text-transform);
-  vertical-align: bottom;
-}
-
-.utrecht-table__cell--last-header-row, .utrecht-html thead tr:last-child th {
-  border-block-end-style: solid;
-  border-block-end-color: var(--utrecht-table-header-border-block-end-color, transparent);
-  border-block-end-width: var(--utrecht-table-header-border-block-end-width, 0);
-}
-
-.utrecht-table__body, .utrecht-html tbody {
-  vertical-align: baseline;
-}
-
-.utrecht-table__heading, .utrecht-html th {
-  font-weight: var(--utrecht-table-heading-font-weight);
-  color: var(--utrecht-table-heading-color);
-  text-transform: var(--utrecht-table-heading-text-transform);
-}
-
-.utrecht-table__cell, .utrecht-html th,
-.utrecht-html td {
-  border-block-end-style: solid;
-  border-block-end-color: var(--utrecht-table-row-border-block-end-color, transparent);
-  border-block-end-width: var(--utrecht-table-row-border-block-end-width, 0);
-  line-height: var(--utrecht-table-cell-line-height, inherit);
-  padding-inline-start: var(--utrecht-table-cell-padding-inline-start, 0);
-  padding-inline-end: var(--utrecht-table-cell-padding-inline-end, 0);
-  padding-block-start: var(--utrecht-table-cell-padding-block-start, 0);
-  padding-block-end: var(--utrecht-table-cell-padding-block-end, 0);
-  text-align: start;
-}
-
-.utrecht-table__cell--first, .utrecht-html td:first-child,
-.utrecht-html th:first-child {
-  padding-inline-start: var(--utrecht-table-row-padding-inline-start, var(--utrecht-table-cell-padding-inline-start, 0));
-}
-
-.utrecht-table__cell--last, .utrecht-html td:last-child,
-.utrecht-html th:last-child {
-  padding-inline-end: var(--utrecht-table-row-padding-inline-end, var(--utrecht-table-cell-padding-inline-end, 0));
-}
-
-.utrecht-table__cell--numeric, .utrecht-html th.numeric,
-.utrecht-html td.numeric {
-  /* stylelint-disable-next-line declaration-property-value-disallowed-list */
-  text-align: right;
-}
-
-.utrecht-table__row--alternate-odd, .utrecht-html table.alternate-row-color > tr:nth-child(odd) > td, .utrecht-html table.alternate-row-color > tr:nth-child(odd) > th, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(odd) > td, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(odd) > th {
-  background-color: var(--utrecht-table-row-alternate-odd-background-color);
-  color: var(--utrecht-table-row-alternate-odd-color);
-}
-
-.utrecht-table__row--alternate-even, .utrecht-html table.alternate-row-color > tr:nth-child(even) > td, .utrecht-html table.alternate-row-color > tr:nth-child(even) > th, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(even) > td, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(even) > th {
-  background-color: var(--utrecht-table-row-alternate-even-background-color);
-  color: var(--utrecht-table-row-alternate-even-color);
-}
-
+/* stylelint-disable-next-line block-no-empty */
+/* stylelint-disable selector-class-pattern */
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
@@ -851,48 +350,26 @@
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
-.utrecht-textarea, .utrecht-html textarea {
-  border-width: var(--utrecht-textarea-border-width);
-  border-bottom-width: var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width));
-  border-color: var(--utrecht-textarea-border-color);
-  border-radius: var(--utrecht-textarea-border-radius, 0);
-  border-style: solid;
-  color: var(--utrecht-textarea-color);
-  font-family: var(--utrecht-textarea-font-family);
-  font-size: var(--utrecht-textarea-font-size, 1em);
-  max-width: var(--utrecht-textarea-max-width);
-  padding-block-end: var(--utrecht-textarea-padding-block-end);
-  padding-block-start: var(--utrecht-textarea-padding-block-start);
-  padding-inline-end: var(--utrecht-textarea-padding-inline-end);
-  padding-inline-start: var(--utrecht-textarea-padding-inline-start);
-  width: 100%;
-}
-
-.utrecht-textarea--invalid, .utrecht-textarea--html-textarea:invalid, .utrecht-html textarea:invalid, .utrecht-textarea--html-textarea[aria-invalid=true], .utrecht-html textarea[aria-invalid=true] {
-  border-color: var(--utrecht-textarea-invalid-border-color);
-  border-width: var(--utrecht-textarea-invalid-border-width);
-}
-
-.utrecht-textarea--disabled, .utrecht-textarea--html-textarea:disabled, .utrecht-html textarea:disabled {
-  border-color: var(--utrecht-textarea-disabled-border-color);
-  color: var(--utrecht-textarea-disabled-color);
-}
-
-.utrecht-textarea--focus, .utrecht-textarea--html-textarea:focus, .utrecht-html textarea:focus {
-  outline-width: var(--utrecht-focus-outline-width, 0);
-  outline-style: var(--utrecht-focus-outline-style, solid);
-  outline-color: var(--utrecht-focus-outline-color, transparent);
-  color: var(--utrecht-focus-color, inherit);
-  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
-  outline-offset: 0;
-  background-color: var(--utrecht-focus-background-color);
-}
-
-.utrecht-textarea--read-only, .utrecht-textarea--html-textarea:read-only, .utrecht-html textarea:read-only {
-  border-color: var(--utrecht-textarea-read-only-border-color);
-  color: var(--utrecht-textarea-read-only-color);
-}
-
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/* stylelint-disable-next-line block-no-empty */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/* stylelint-disable-next-line block-no-empty */
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
@@ -900,497 +377,998 @@
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2021 Gemeente Utrecht
  */
-.utrecht-textbox, .utrecht-html input[type=text],
-.utrecht-html input[type=email],
-.utrecht-html input[type=search],
-.utrecht-html input[type=tel],
-.utrecht-html input[type=url] {
-  border-width: var(--utrecht-textbox-border-width);
-  border-bottom-width: var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width));
-  border-color: var(--utrecht-textbox-border-color);
-  border-radius: var(--utrecht-textbox-border-radius, 0);
+/* Collection of all semantic HTML styles in the component library */
+.utrecht-html {
+  /* override the `:focus` selector above */
+  /* stylelint-disable-next-line no-descending-specificity */
+  /* stylelint-disable selector-class-pattern */
+  --utrecht-space-around: 1;
+}
+.utrecht-html article {
+  max-inline-size: var(--utrecht-article-max-inline-size);
+}
+.utrecht-html blockquote {
+  background-color: var(--utrecht-blockquote-background-color);
+  color: var(--utrecht-blockquote-color);
+  font-family: var(--utrecht-document-font-family);
+  font-size: var(--utrecht-blockquote-font-size);
+  font-style: var(--utrecht-blockquote-font-style);
+  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-blockquote-margin-block-end, 0));
+  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-blockquote-margin-block-start, 0));
+  margin-inline-end: var(--utrecht-blockquote-margin-inline-end);
+  margin-inline-start: var(--utrecht-blockquote-margin-inline-start);
+  padding-block-end: var(--utrecht-blockquote-padding-block-end);
+  padding-block-start: var(--utrecht-blockquote-padding-block-start);
+  padding-inline-end: var(--utrecht-blockquote-padding-inline-end);
+  padding-inline-start: var(--utrecht-blockquote-padding-inline-start);
+  --utrecht-document-color: var(--utrecht-blockquote-content-color, inherit);
+  --utrecht-paragraph-font-size: var(--utrecht-blockquote-content-font-size, inherit);
+  color: var(--utrecht-blockquote-content-color, inherit);
+  font-size: var(--utrecht-blockquote-content-font-size, inherit);
+  --utrecht-space-around: 1;
+}
+.utrecht-html input[type=button i],
+.utrecht-html input[type=reset i],
+.utrecht-html input[type=submit i],
+.utrecht-html button {
+  /*
+  `--_utrecht-button-hint` is the internal prefix for the applied optional hint, it is not an API.
+  The hint color takes priority over the appearance color.
+
+  `--_utrecht-button-appearance` is the internal prefix for the appearance
+  (primary-action, secondary-action or subtle), it is not an API.
+  */
+  --_utrecht-button-background-color: var(
+    --_utrecht-button-hint-background-color,
+    var(--_utrecht-button-appearance-background-color, var(--utrecht-button-background-color))
+  );
+  --_utrecht-button-color: var(
+    --_utrecht-button-hint-color,
+    var(--_utrecht-button-appearance-color, var(--utrecht-button-color))
+  );
+  --_utrecht-button-border-color: var(
+    --_utrecht-button-hint-border-color,
+    var(--_utrecht-button-appearance-border-color, var(--utrecht-button-border-color, transparent))
+  );
+  --_utrecht-button-border-bottom-color: var(
+    --_utrecht-button-hint-border-bottom-color,
+    var(
+      --_utrecht-button-hint-border-color,
+      var(
+        --_utrecht-button-appearance-border-bottom-color,
+        var(
+          --_utrecht-button-appearance-border-color,
+          var(--utrecht-button-border-bottom-color, var(--utrecht-button-border-color, transparent))
+        )
+      )
+    )
+  );
+  --_utrecht-button-disabled-background-color: var(
+    --_utrecht-button-hint-disabled-background-color,
+    var(
+      --_utrecht-button-appearance-disabled-background-color,
+      var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color))
+    )
+  );
+  --_utrecht-button-disabled-border-color: var(
+    --_utrecht-button-hint-disabled-border-color,
+    var(
+      --_utrecht-button-appearance-disabled-border-color,
+      var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color))
+    )
+  );
+  --_utrecht-button-disabled-color: var(
+    --utrecht-hint-button-disabled-color,
+    var(
+      --utrecht-button-appearance-button-disabled-color,
+      var(--utrecht-button-disabled-color, var(--utrecht-button-color))
+    )
+  );
+  --_utrecht-button-focus-background-color: var(
+    --_utrecht-button-hint-focus-background-color,
+    var(
+      --_utrecht-button-hint-background-color,
+      var(
+        --_utrecht-button-appearance-focus-background-color,
+        var(
+          --_utrecht-button-appearance-background-color,
+          var(--utrecht-button-focus-background-color, var(--utrecht-button-background-color))
+        )
+      )
+    )
+  );
+  --_utrecht-button-focus-border-color: var(
+    --_utrecht-button-hint-focus-border-color,
+    var(
+      --_utrecht-button-hint-border-color,
+      var(
+        --_utrecht-button-appearance-focus-border-color,
+        var(
+          --_utrecht-button-appearance-border-color,
+          var(--utrecht-button-focus-border-color, var(--utrecht-button-border-color))
+        )
+      )
+    )
+  );
+  --_utrecht-button-focus-color: var(
+    --_utrecht-button-hint-focus-color,
+    var(
+      --_utrecht-button-hint-color,
+      var(
+        --_utrecht-button-appearance-focus-color,
+        var(--_utrecht-button-appearance-color, var(--utrecht-button-focus-color, var(--utrecht-button-color)))
+      )
+    )
+  );
+  --_utrecht-button-hover-background-color: var(
+    --_utrecht-button-hint-hover-background-color,
+    var(
+      --_utrecht-button-hint-background-color,
+      var(
+        --_utrecht-button-appearance-hover-background-color,
+        var(
+          --_utrecht-button-appearance-background-color,
+          var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color))
+        )
+      )
+    )
+  );
+  --_utrecht-button-hover-border-color: var(
+    --_utrecht-button-hint-hover-border-color,
+    var(
+      --_utrecht-button-hint-border-color,
+      var(
+        --_utrecht-button-appearance-hover-border-color,
+        var(
+          --_utrecht-button-appearance-border-color,
+          var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color))
+        )
+      )
+    )
+  );
+  --_utrecht-button-hover-color: var(
+    --_utrecht-button-hint-hover-color,
+    var(
+      --_utrecht-button-hint-color,
+      var(
+        --_utrecht-button-appearance-hover-color,
+        var(--_utrecht-button-appearance-color, var(--utrecht-button-hover-color, var(--utrecht-button-color)))
+      )
+    )
+  );
+  --_utrecht-button-active-background-color: var(
+    --_utrecht-button-hint-active-background-color,
+    var(
+      --_utrecht-button-hint-background-color,
+      var(
+        --_utrecht-button-appearance-active-background-color,
+        var(
+          --_utrecht-button-appearance-background-color,
+          var(--utrecht-button-active-background-color, var(--utrecht-button-background-color))
+        )
+      )
+    )
+  );
+  --_utrecht-button-active-border-color: var(
+    --_utrecht-button-hint-active-border-color,
+    var(
+      --_utrecht-button-hint-border-color,
+      var(
+        --_utrecht-button-appearance-active-border-color,
+        var(
+          --_utrecht-button-appearance-border-color,
+          var(--utrecht-button-active-border-color, var(--utrecht-button-border-color))
+        )
+      )
+    )
+  );
+  --_utrecht-button-active-color: var(
+    --_utrecht-button-hint-active-color,
+    var(
+      --_utrecht-button-hint-color,
+      var(
+        --_utrecht-button-appearance-active-color,
+        var(--_utrecht-button-appearance-color, var(--utrecht-button-active-color, var(--utrecht-button-color)))
+      )
+    )
+  );
+  --_utrecht-button-border-width: var(--_utrecht-button-appearance-border-width, var(--utrecht-button-border-width, 0));
+  --_utrecht-button-border-bottom-width: var(
+    --utrecht-button-border-bottom-width,
+    var(--_utrecht-button-border-width, 0)
+  );
+  --utrecht-icon-size: var(--utrecht-button-icon-size, 1em);
+  align-items: center;
+  background-color: var(--_utrecht-button-background-color);
+  border-color: var(--_utrecht-button-border-color);
+  border-bottom-color: var(--_utrecht-button-border-bottom-color);
+  border-radius: var(--utrecht-button-border-radius);
   border-style: solid;
-  color: var(--utrecht-textbox-color);
-  font-family: var(--utrecht-textbox-font-family);
-  font-size: var(--utrecht-textbox-font-size, 1em);
-  max-width: var(--utrecht-textbox-max-width);
-  padding-block-end: var(--utrecht-textbox-padding-block-end);
-  padding-block-start: var(--utrecht-textbox-padding-block-start);
-  padding-inline-end: var(--utrecht-textbox-padding-inline-end);
-  padding-inline-start: var(--utrecht-textbox-padding-inline-start);
+  border-width: var(--_utrecht-button-border-width);
+  border-bottom-width: var(--_utrecht-button-border-bottom-width);
   box-sizing: border-box;
-  width: 100%;
+  color: var(--_utrecht-button-color);
+  display: inline-flex;
+  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
+  font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
+  font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
+  gap: var(--utrecht-button-icon-gap);
+  inline-size: var(--utrecht-button-inline-size, auto);
+  justify-content: center;
+  letter-spacing: var(--utrecht-button-letter-spacing);
+  line-height: var(--utrecht-button-line-height);
+  min-block-size: var(--utrecht-button-min-block-size, 44px);
+  min-inline-size: var(--utrecht-button-min-inline-size, 44px);
+  padding-block-end: var(--utrecht-button-padding-block-end);
+  padding-block-start: var(--utrecht-button-padding-block-start);
+  padding-inline-end: var(--utrecht-button-padding-inline-end);
+  padding-inline-start: var(--utrecht-button-padding-inline-start);
+  text-transform: var(--utrecht-button-text-transform);
+  user-select: none;
+  margin-block-end: var(--utrecht-button-margin-block-end);
+  margin-block-start: var(--utrecht-button-margin-block-start);
+  margin-inline-end: var(--utrecht-button-margin-inline-end);
+  margin-inline-start: var(--utrecht-button-margin-inline-start);
 }
-
-.utrecht-textbox--invalid, .utrecht-textbox--html-input:invalid, .utrecht-html input[type=text]:invalid,
-.utrecht-html input[type=email]:invalid,
-.utrecht-html input[type=search]:invalid,
-.utrecht-html input[type=tel]:invalid,
-.utrecht-html input[type=url]:invalid, .utrecht-textbox--html-input[aria-invalid=true], .utrecht-html input[aria-invalid=true][type=text],
-.utrecht-html input[aria-invalid=true][type=email],
-.utrecht-html input[aria-invalid=true][type=search],
-.utrecht-html input[aria-invalid=true][type=tel],
-.utrecht-html input[aria-invalid=true][type=url] {
-  border-color: var(--utrecht-textbox-invalid-border-color);
-  border-width: var(--utrecht-textbox-invalid-border-width);
+.utrecht-html button[type=submit i],
+.utrecht-html input[type=submit i] {
+  cursor: var(--utrecht-action-submit-cursor);
+}
+.utrecht-html button:disabled,
+.utrecht-html button[aria-disabled=true] {
+  background-color: var(--_utrecht-button-disabled-background-color);
+  border-color: var(--_utrecht-button-disabled-border-color);
+  color: var(--_utrecht-button-disabled-color);
+  cursor: var(--utrecht-action-disabled-cursor);
+}
+.utrecht-html button[aria-busy=true],
+.utrecht-html button[aria-disabled=true][aria-busy=true],
+.utrecht-html button:disabled[aria-busy=true] {
+  cursor: var(--utrecht-action-busy-cursor);
+}
+.utrecht-html button:active:not([aria-disabled=true]):not(:disabled) {
+  background-color: var(--_utrecht-button-active-background-color);
+  border-color: var(--_utrecht-button-active-border-color);
+  color: var(--_utrecht-button-active-color);
+}
+.utrecht-html button:hover:not([aria-disabled=true]):not(:disabled) {
+  background-color: var(--_utrecht-button-hover-background-color);
+  border-color: var(--_utrecht-button-hover-border-color);
+  color: var(--_utrecht-button-hover-color);
+  transform: scale(var(--utrecht-button-focus-transform-scale, 1));
 }
-
-.utrecht-textbox--disabled, .utrecht-textbox--html-input:disabled, .utrecht-html input[type=text]:disabled,
-.utrecht-html input[type=email]:disabled,
-.utrecht-html input[type=search]:disabled,
-.utrecht-html input[type=tel]:disabled,
-.utrecht-html input[type=url]:disabled {
-  border-color: var(--utrecht-textbox-disabled-border-color);
-  color: var(--utrecht-textbox-disabled-color);
+.utrecht-html button:focus:not([aria-disabled=true]):not(:disabled) {
+  background-color: var(--_utrecht-button-focus-background-color);
+  border-color: var(--_utrecht-button-focus-border-color);
+  color: var(--_utrecht-button-focus-color);
 }
-
-.utrecht-textbox--focus, .utrecht-textbox--html-input:focus, .utrecht-html input[type=text]:focus,
-.utrecht-html input[type=email]:focus,
-.utrecht-html input[type=search]:focus,
-.utrecht-html input[type=tel]:focus,
-.utrecht-html input[type=url]:focus {
-  outline-width: var(--utrecht-focus-outline-width, 0);
-  outline-style: var(--utrecht-focus-outline-style, solid);
+.utrecht-html button:focus-visible {
+  /* the pseudo-class for `:focus-visible` is implemented via the mixin */
+  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);
-  color: var(--utrecht-focus-color, inherit);
+  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-html input[type=checkbox i] {
+  margin-block-end: 0; /* reset native margin for input[type="checkbox"] */
+  margin-block-start: 0;
+  margin-inline-end: 0;
+  margin-inline-start: 0;
+}
+.utrecht-html input[type=checkbox i]:disabled {
+  cursor: var(--utrecht-action-disabled-cursor);
+}
+.utrecht-html input[type=checkbox i]:focus {
   box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
-  outline-offset: 0;
-  background-color: var(--utrecht-focus-background-color);
+  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-html input[type=checkbox i]:focus:not(:focus-visible) {
+  /* undo focus ring */
+  box-shadow: none;
+  outline-style: none;
+}
+.utrecht-html body {
+  /* reset `font-smoothing: antialiasing`, prefer automatic (`subpixel-antialiasing`) behavior for high-dpi screens */
+  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;
+  background-color: var(--utrecht-document-background-color, inherit);
+}
+.utrecht-html body :lang(ar) {
+  /* `letter-spacing` design tokens break Arabic text rendering, avoid that */
+  letter-spacing: 0 !important;
+}
+.utrecht-html em {
+  font-style: var(--utrecht-emphasis-stressed-font-style, italic);
+}
+.utrecht-html strong {
+  font-weight: var(--utrecht-emphasis-strong-font-weight, bold);
+}
+.utrecht-html fieldset {
+  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-end, 0));
+  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-start, 0));
+  border: 0;
+  margin-inline-end: 0;
+  margin-inline-start: 0;
+  min-width: 0;
+  padding-block-end: 0;
+  padding-block-start: 0.01em;
+  padding-inline-end: 0;
+  padding-inline-start: 0;
+  --utrecht-space-around: 1;
+}
+.utrecht-html figure {
+  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-figure-margin-block-end, 0));
+  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-figure-margin-block-start, 0));
+}
+.utrecht-html figcaption {
+  color: var(--utrecht-figure-caption-color);
+  font-size: var(--utrecht-figure-caption-font-size);
+  line-height: var(--utrecht-figure-caption-line-height);
+}
+.utrecht-html 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);
+  inline-size: 100%;
+  padding-inline-end: 0;
+  padding-inline-start: 0;
+  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-legend-margin-block-end, 0));
+  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-legend-margin-block-start, 0));
+}
+.utrecht-html fieldset:disabled > legend {
+  color: var(--utrecht-form-fieldset-legend-disabled-color, var(--utrecht-form-fieldset-legend-color, var(--utrecht-document-color, inherit)));
+}
+.utrecht-html label {
+  color: var(--utrecht-form-label-color);
+  font-size: var(--utrecht-form-label-font-size);
+  font-weight: var(--utrecht-form-label-font-weight);
+}
+.utrecht-html input[type=checkbox i] ~ label {
+  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-html input[type=radio i] ~ label {
+  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-html h1 {
+  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, revert);
+  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: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-1-margin-block-end, 0));
+  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-1-margin-block-start, 0));
+  page-break-after: avoid;
+  text-transform: var(--utrecht-heading-1-text-transform, inherit);
+  --utrecht-space-around: 1;
+}
+.utrecht-html h2 {
+  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, revert);
+  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: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-2-margin-block-end, 0));
+  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-2-margin-block-start, 0));
+  page-break-after: avoid;
+  text-transform: var(--utrecht-heading-2-text-transform, inherit);
+  --utrecht-space-around: 1;
 }
-
-.utrecht-textbox--read-only, .utrecht-textbox--html-input:read-only, .utrecht-html input[type=text]:read-only,
-.utrecht-html input[type=email]:read-only,
-.utrecht-html input[type=search]:read-only,
-.utrecht-html input[type=tel]:read-only,
-.utrecht-html input[type=url]:read-only {
-  border-color: var(--utrecht-textbox-read-only-border-color);
-  color: var(--utrecht-textbox-read-only-color);
+.utrecht-html h3 {
+  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, revert);
+  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: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-3-margin-block-end, 0));
+  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-3-margin-block-start, 0));
+  page-break-after: avoid;
+  text-transform: var(--utrecht-heading-3-text-transform, inherit);
+  --utrecht-space-around: 1;
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- * Copyright (c) 2021 Gemeente Utrecht
- */
-.utrecht-unordered-list, .utrecht-html ul {
-  font-family: var(--utrecht-document-font-family, inherit);
-  font-size: var(--utrecht-document-font-size, inherit);
-  line-height: var(--utrecht-document-line-height, inherit);
-  padding-inline-start: 2ch;
+.utrecht-html h4 {
+  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, revert);
+  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: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-end, 0));
+  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-start, 0));
+  page-break-after: avoid;
+  text-transform: var(--utrecht-heading-4-text-transform, inherit);
+  --utrecht-space-around: 1;
 }
-
-.utrecht-unordered-list--distanced, .utrecht-html ul {
-  margin-block-start: var(--utrecht-unordered-list-margin-block-start, var(--utrecht-paragraph-margin-block-start));
-  margin-block-end: var(--utrecht-unordered-list-margin-block-end, var(--utrecht-paragraph-margin-block-end));
+.utrecht-html h5 {
+  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, revert);
+  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: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-5-margin-block-end, 0));
+  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-5-margin-block-start, 0));
+  page-break-after: avoid;
+  text-transform: var(--utrecht-heading-5-text-transform, inherit);
+  --utrecht-space-around: 1;
 }
-
-.utrecht-unordered-list--nested {
-  margin-inline-start: 2ch;
-  margin-block-end: 0;
+.utrecht-html h6 {
+  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, revert);
+  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: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-6-margin-block-end, 0));
+  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-6-margin-block-start, 0));
+  page-break-after: avoid;
+  text-transform: var(--utrecht-heading-6-text-transform, inherit);
+  --utrecht-space-around: 1;
 }
-
-.utrecht-unordered-list__item, .utrecht-html ul > li {
-  padding-inline-start: 1ch;
-  margin-block-start: var(--utrecht-unordered-list-item-margin-block-start);
-  margin-block-end: var(--utrecht-unordered-list-item-margin-block-end);
+.utrecht-html hgroup {
+  --utrecht-pre-heading-order: -1;
+  display: flex;
+  flex-direction: column;
+  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-group-margin-block-end, 0));
+  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-group-margin-block-start, 0));
+  --utrecht-space-around: 1;
 }
-
-.utrecht-unordered-list__item::marker, .utrecht-html ul > li::marker,
-.utrecht-unordered-list__marker {
-  color: var(--utrecht-unordered-list-marker-color);
-  content: "●";
+.utrecht-html hgroup > * {
+  --utrecht-space-around: 0;
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
- * Copyright (c) 2021 Gemeente Utrecht
- */
-.utrecht-link, .utrecht-html a:link {
-  text-decoration: var(--utrecht-link-text-decoration, underline);
+.utrecht-html a: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:visited,
-.utrecht-link--visited,
 .utrecht-html a:visited {
   color: var(--utrecht-link-visited-color, var(--utrecht-link-color));
 }
-
-.utrecht-link:hover,
-.utrecht-link--hover,
 .utrecht-html a: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:active,
-.utrecht-link--active,
 .utrecht-html a:active {
   color: var(--utrecht-link-active-color, var(--utrecht-link-color));
 }
-
-.utrecht-link:focus,
-.utrecht-link--focus,
 .utrecht-html a: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));
-  outline-width: var(--utrecht-focus-outline-width, 0);
-  outline-style: var(--utrecht-focus-outline-style, solid);
-  outline-color: var(--utrecht-focus-outline-color, transparent);
-  color: var(--utrecht-focus-color, inherit);
+  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);
   box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
-  outline-offset: 0;
-  background-color: var(--utrecht-focus-background-color);
+  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);
 }
-
-/* stylelint-disable-next-line block-no-empty */
-.utrecht-link--telephone, .utrecht-html a[href^="tel:" i] {
+.utrecht-html a:focus:not(:focus-visible) {
+  /* undo focus ring */
+  box-shadow: none;
+  outline-style: none;
+}
+.utrecht-html a[href^="tel:" i] {
   white-space: nowrap;
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- * Copyright (c) 2021 Gemeente Utrecht
- */
-.utrecht-ordered-list, .utrecht-html ol {
+.utrecht-html ol {
   font-family: var(--utrecht-document-font-family, inherit);
+  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-ordered-list-margin-block-end, var(--utrecht-unordered-list-margin-block-end, 0)));
+  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-ordered-list-margin-block-start, var(--utrecht-unordered-list-margin-block-start, 0)));
+  padding-inline-start: var(--utrecht-ordered-list-padding-inline-start, var(--utrecht-unordered-list-padding-inline-start, 2ch));
+  --utrecht-space-around: 1;
 }
-
-.utrecht-ordered-list--distanced, .utrecht-html ol {
-  margin-block-end: var(--utrecht-ordered-list-margin-block-end);
-  margin-block-start: var(--utrecht-ordered-list-margin-block-start);
+.utrecht-html ol > li {
+  margin-block-end: var(--utrecht-ordered-list-item-margin-block-end, var(--utrecht-unordered-list-item-margin-block-end));
+  margin-block-start: var(--utrecht-ordered-list-item-margin-block-start, var(--utrecht-unordered-list-item-margin-block-start));
+  padding-inline-start: var(--utrecht-ordered-list-item-padding-inline-start, var(--utrecht-unordered-list-item-padding-inline-start, 1ch));
 }
-
-.utrecht-ordered-list__item, .utrecht-html ol > li {
-  margin-block-end: var(--utrecht-ordered-list-item-margin-block-end);
-  margin-block-start: var(--utrecht-ordered-list-item-margin-block-start);
+.utrecht-html ol:lang(ar) {
+  list-style: arabic-indic;
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
- */
-.utrecht-paragraph, .utrecht-html p {
-  color: var(--utrecht-document-color, inherit);
+.utrecht-html p {
+  color: var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit));
   font-family: var(--utrecht-paragraph-font-family, var(--utrecht-document-font-family, inherit));
   font-size: var(--utrecht-paragraph-font-size, var(--utrecht-document-font-size, inherit));
   font-weight: var(--utrecht-paragraph-font-weight, inherit);
   line-height: var(--utrecht-paragraph-line-height, var(--utrecht-document-line-height, inherit));
+  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-paragraph-margin-block-end, 0));
+  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-paragraph-margin-block-start, 0));
 }
-
-.utrecht-paragraph--lead, .utrecht-html p.lead {
-  font-size: var(--utrecht-paragraph-lead-font-size, inherit);
-  font-weight: var(--utrecht-paragraph-lead-font-weight, inherit);
-  line-height: var(--utrecht-paragraph-lead-line-height, inherit);
+.utrecht-html p.lead {
+  color: var(--utrecht-paragraph-lead-color, var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit)));
+  font-size: var(--utrecht-paragraph-lead-font-size, var(--utrecht-paragraph-font-size, inherit));
+  font-weight: var(--utrecht-paragraph-lead-font-weight, var(--utrecht-paragraph-font-weight, inherit));
+  line-height: var(--utrecht-paragraph-lead-line-height, var(--utrecht-paragraph-line-height, inherit));
 }
-
-.utrecht-paragraph--distanced, .utrecht-html * ~ p {
-  margin-block-start: var(--utrecht-paragraph-margin-block-start);
-  margin-block-end: var(--utrecht-paragraph-margin-block-end);
+.utrecht-html * ~ p {
+  --utrecht-space-around: 1;
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- */
-.utrecht-radio-button, .utrecht-html input[type=radio] {
-  /* reset native margin for input[type="radio"] */
-  margin-block-start: 0;
+.utrecht-html p:has(> small:only-child) {
+  color: var(--utrecht-paragraph-small-color, var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit)));
+  font-size: var(--utrecht-paragraph-small-font-size, var(--utrecht-paragraph-font-size, inherit));
+  font-weight: var(--utrecht-paragraph-small-font-weight, var(--utrecht-paragraph-font-weight, inherit));
+  line-height: var(--utrecht-paragraph-small-line-height, var(--utrecht-paragraph-line-height, inherit));
+}
+.utrecht-html p > small:only-child {
+  font-size: inherit;
+}
+.utrecht-html input[type=radio i] {
+  /* reset native margin for input[type="radio" i] */
   margin-block-end: 0;
-  margin-inline-start: 0;
+  margin-block-start: 0;
   margin-inline-end: 0;
+  margin-inline-start: 0;
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
- */
-.utrecht-separator, .utrecht-html hr {
+.utrecht-html input[type=radio i]:disabled {
+  cursor: var(--utrecht-action-disabled-cursor);
+}
+.utrecht-html input[type=radio i]: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-html input[type=radio i]:focus:not(:focus-visible) {
+  /* undo focus ring */
+  box-shadow: none;
+  outline-style: none;
+}
+.utrecht-html select {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: var(--utrecht-select-background-color, var(--utrecht-form-input-background-color));
+  background-image: var(--utrecht-select-background-image);
+  background-position: 100%;
+  background-repeat: no-repeat;
+  background-size: 1.4em;
+  border-block-end-width: var(--utrecht-select-border-block-end-width, var(--utrecht-select-border-width, var(--utrecht-form-input-border-width)));
+  border-block-start-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
+  border-color: var(--utrecht-select-border-color, var(--utrecht-form-input-border-color));
+  border-inline-end-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
+  border-inline-start-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
+  border-radius: var(--utrecht-select-border-radius, var(--utrecht-form-input-border-radius, 0));
   border-style: solid;
+  color: var(--utrecht-select-color, var(--utrecht-form-input-color));
+  font-family: var(--utrecht-select-font-family, var(--utrecht-form-input-font-family));
+  font-size: var(--utrecht-select-font-size, var(--utrecht-form-input-font-size));
+  max-inline-size: var(--utrecht-select-max-inline-size, var(--utrecht-form-input-max-inline-size));
+  padding-block-end: var(--utrecht-select-padding-block-end, var(--utrecht-form-input-padding-block-end));
+  padding-block-start: var(--utrecht-select-padding-block-start, var(--utrecht-form-input-padding-block-start));
+  padding-inline-end: var(--utrecht-select-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
+  padding-inline-start: var(--utrecht-select-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
+  width: 100%;
+  /* <select> does not support :read-only */
+}
+.utrecht-html select:disabled {
+  background-color: var(--utrecht-select-disabled-background-color, var(--utrecht-form-input-disabled-background-color, var(--utrecht-select-background-color, var(--utrecht-form-input-background-color))));
+  border-color: var(--utrecht-select-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-select-border-color, var(--utrecht-form-input-border-color))));
+  color: var(--utrecht-select-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-select-color, var(--utrecht-form-input-color))));
+  cursor: var(--utrecht-action-disabled-cursor);
+}
+.utrecht-html select:focus {
+  background-color: var(--utrecht-select-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-select-background-color, var(--utrecht-form-input-background-color))));
+  border-color: var(--utrecht-select-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-select-border-color, var(--utrecht-form-input-border-color))));
+  color: var(--utrecht-select-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-select-color, var(--utrecht-form-input-color))));
+  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-html select:focus:not(:focus-visible) {
+  /* undo focus ring */
+  box-shadow: none;
+  outline-style: none;
+}
+.utrecht-html select[aria-invalid=true] {
+  background-color: var(--utrecht-select-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-select-background-color, var(--utrecht-form-input-background-color))));
+  border-color: var(--utrecht-select-invalid-border-color, var(--utrecht-form-input-invalid-border-color, var(--utrecht-select-border-color, var(--utrecht-form-input-border-color))));
+  border-width: var(--utrecht-select-invalid-border-width, var(--utrecht-form-input-invalid-border-width, var(--utrecht-select-border-width, var(--utrecht-form-input-border-width))));
+}
+.utrecht-html hr {
   border-color: var(--utrecht-separator-color);
-  border-width: 0 0 var(--utrecht-separator-width) 0;
-  margin-block-start: var(--utrecht-separator-margin-block-start);
-  margin-block-end: var(--utrecht-separator-margin-block-end);
+  border-style: solid;
+  border-width: 0 0 var(--utrecht-separator-block-size) 0;
+  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-separator-margin-block-end, 0));
+  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-separator-margin-block-start, 0));
+  --utrecht-space-around: 1;
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-.utrecht-table, .utrecht-html table {
+.utrecht-html table {
   border-collapse: collapse;
+  border-color: var(--utrecht-table-border-color, 0);
+  border-style: solid;
+  border-width: var(--utrecht-table-border-width, 0);
+  font-family: var(--utrecht-table-font-family, var(--utrecht-document-font-family));
+  font-size: var(--utrecht-table-font-size, inherit);
+  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-table-margin-block-end, 0));
+  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-table-margin-block-start, 0));
   width: 100%;
+  --utrecht-space-around: 1;
 }
-
-.utrecht-table--distanced, .utrecht-html table {
-  margin-block-end: var(--utrecht-table-margin-block-end);
-  margin-block-start: var(--utrecht-table-margin-block-start);
-}
-
-.utrecht-table__caption, .utrecht-html caption {
-  font-weight: var(--utrecht-table-caption-font-weight);
+.utrecht-html caption {
+  color: var(--utrecht-table-caption-color);
   font-family: var(--utrecht-table-caption-font-family);
   font-size: var(--utrecht-table-caption-font-size);
-  color: var(--utrecht-table-caption-color);
+  font-weight: var(--utrecht-table-caption-font-weight);
   line-height: var(--utrecht-table-caption-line-height);
   margin-block-end: var(--utrecht-table-caption-margin-block-end);
+  page-break-after: avoid;
   text-align: var(--utrecht-table-caption-text-align, center);
 }
-
-.utrecht-table__header, .utrecht-html thead {
-  font-weight: var(--utrecht-table-header-font-weight);
+.utrecht-html thead {
+  background-color: var(--utrecht-table-header-background-color);
   color: var(--utrecht-table-header-color);
+  font-weight: var(--utrecht-table-header-font-weight);
+  page-break-inside: avoid;
   text-transform: var(--utrecht-table-header-text-transform);
   vertical-align: bottom;
 }
-
-.utrecht-table__cell--last-header-row, .utrecht-html thead tr:last-child th {
-  border-block-end-style: solid;
-  border-block-end-color: var(--utrecht-table-header-border-block-end-color, transparent);
-  border-block-end-width: var(--utrecht-table-header-border-block-end-width, 0);
-}
-
-.utrecht-table__body, .utrecht-html tbody {
+.utrecht-html tbody {
   vertical-align: baseline;
 }
-
-.utrecht-table__heading, .utrecht-html th {
-  font-weight: var(--utrecht-table-heading-font-weight);
-  color: var(--utrecht-table-heading-color);
-  text-transform: var(--utrecht-table-heading-text-transform);
+.utrecht-html th {
+  color: var(--utrecht-table-header-cell-color);
+  font-size: var(--utrecht-table-header-cell-font-size);
+  font-weight: var(--utrecht-table-header-cell-font-weight);
+  text-align: start;
+  text-transform: var(--utrecht-table-header-cell-text-transform);
 }
-
-.utrecht-table__cell, .utrecht-html th,
+.utrecht-html th,
 .utrecht-html td {
-  border-block-end-style: solid;
   border-block-end-color: var(--utrecht-table-row-border-block-end-color, transparent);
+  border-block-end-style: solid;
   border-block-end-width: var(--utrecht-table-row-border-block-end-width, 0);
   line-height: var(--utrecht-table-cell-line-height, inherit);
-  padding-inline-start: var(--utrecht-table-cell-padding-inline-start, 0);
-  padding-inline-end: var(--utrecht-table-cell-padding-inline-end, 0);
-  padding-block-start: var(--utrecht-table-cell-padding-block-start, 0);
   padding-block-end: var(--utrecht-table-cell-padding-block-end, 0);
+  padding-block-start: var(--utrecht-table-cell-padding-block-start, 0);
+  padding-inline-end: var(--utrecht-table-cell-padding-inline-end, 0);
+  padding-inline-start: var(--utrecht-table-cell-padding-inline-start, 0);
   text-align: start;
 }
-
-.utrecht-table__cell--first, .utrecht-html td:first-child,
+.utrecht-html td:first-child,
 .utrecht-html th:first-child {
   padding-inline-start: var(--utrecht-table-row-padding-inline-start, var(--utrecht-table-cell-padding-inline-start, 0));
 }
-
-.utrecht-table__cell--last, .utrecht-html td:last-child,
+.utrecht-html td:last-child,
 .utrecht-html th:last-child {
   padding-inline-end: var(--utrecht-table-row-padding-inline-end, var(--utrecht-table-cell-padding-inline-end, 0));
 }
-
-.utrecht-table__cell--numeric, .utrecht-html th.numeric,
+.utrecht-html thead tr:last-child th {
+  border-block-end-color: var(--utrecht-table-header-border-block-end-color, transparent);
+  border-block-end-style: solid;
+  border-block-end-width: var(--utrecht-table-header-border-block-end-width, 0);
+}
+.utrecht-html thead > tr > th.numeric,
+.utrecht-html tfoot > tr > th.numeric,
+.utrecht-html th[scope=column].numeric {
+  /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+  text-align: right;
+}
 .utrecht-html td.numeric {
   /* stylelint-disable-next-line declaration-property-value-disallowed-list */
   text-align: right;
+  font-variant-numeric: lining-nums tabular-nums;
 }
-
-.utrecht-table__row--alternate-odd, .utrecht-html table.alternate-row-color > tr:nth-child(odd) > td, .utrecht-html table.alternate-row-color > tr:nth-child(odd) > th, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(odd) > td, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(odd) > th {
+.utrecht-html table.alternate-row-color > tr:nth-child(even) > td, .utrecht-html table.alternate-row-color > tr:nth-child(even) > th {
+  background-color: var(--utrecht-table-row-alternate-even-background-color);
+  color: var(--utrecht-table-row-alternate-even-color);
+}
+.utrecht-html table.alternate-row-color > tr:nth-child(odd) > td, .utrecht-html table.alternate-row-color > tr:nth-child(odd) > th {
   background-color: var(--utrecht-table-row-alternate-odd-background-color);
   color: var(--utrecht-table-row-alternate-odd-color);
 }
-
-.utrecht-table__row--alternate-even, .utrecht-html table.alternate-row-color > tr:nth-child(even) > td, .utrecht-html table.alternate-row-color > tr:nth-child(even) > th, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(even) > td, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(even) > th {
+.utrecht-html table.alternate-row-color > tbody > tr:nth-child(even) > td, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(even) > th {
   background-color: var(--utrecht-table-row-alternate-even-background-color);
   color: var(--utrecht-table-row-alternate-even-color);
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-.utrecht-textarea, .utrecht-html textarea {
-  border-width: var(--utrecht-textarea-border-width);
-  border-bottom-width: var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width));
-  border-color: var(--utrecht-textarea-border-color);
-  border-radius: var(--utrecht-textarea-border-radius, 0);
+.utrecht-html table.alternate-row-color > tbody > tr:nth-child(odd) > td, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(odd) > th {
+  background-color: var(--utrecht-table-row-alternate-odd-background-color);
+  color: var(--utrecht-table-row-alternate-odd-color);
+}
+.utrecht-html textarea {
+  background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color));
+  border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-input-border-width));
+  border-bottom-width: var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width, var(--utrecht-form-input-border-width)));
+  border-color: var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color));
+  border-radius: var(--utrecht-textarea-border-radius, var(--utrecht-form-input-border-radius, 0));
   border-style: solid;
-  color: var(--utrecht-textarea-color);
-  font-family: var(--utrecht-textarea-font-family);
-  font-size: var(--utrecht-textarea-font-size, 1em);
-  max-width: var(--utrecht-textarea-max-width);
-  padding-block-end: var(--utrecht-textarea-padding-block-end);
-  padding-block-start: var(--utrecht-textarea-padding-block-start);
-  padding-inline-end: var(--utrecht-textarea-padding-inline-end);
-  padding-inline-start: var(--utrecht-textarea-padding-inline-start);
+  box-sizing: border-box;
+  color: var(--utrecht-textarea-color, var(--utrecht-form-input-color));
+  font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-input-font-family));
+  font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-input-font-size, 1em));
+  font-weight: initial; /* harden */
+  height: initial; /* harden */
+  line-height: var(--utrecht-textarea-line-height, initial);
+  max-inline-size: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-input-max-inline-size));
+  min-block-size: var(--utrecht-textarea-min-block-size);
+  padding-block-end: var(--utrecht-textarea-padding-block-end, var(--utrecht-form-input-padding-block-end, 0));
+  padding-block-start: var(--utrecht-textarea-padding-block-start, var(--utrecht-form-input-padding-block-start, 0));
+  padding-inline-end: var(--utrecht-textarea-padding-inline-end, var(--utrecht-form-input-padding-inline-end, initial));
+  padding-inline-start: var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-input-padding-inline-start, initial));
+  resize: vertical;
   width: 100%;
 }
-
-.utrecht-textarea--invalid, .utrecht-textarea--html-textarea:invalid, .utrecht-textarea--html-textarea[aria-invalid=true], .utrecht-html textarea:invalid, .utrecht-html textarea[aria-invalid=true] {
-  border-color: var(--utrecht-textarea-invalid-border-color);
-  border-width: var(--utrecht-textarea-invalid-border-width);
-}
-
-.utrecht-textarea--disabled, .utrecht-textarea--html-textarea:disabled, .utrecht-html textarea:disabled {
-  border-color: var(--utrecht-textarea-disabled-border-color);
-  color: var(--utrecht-textarea-disabled-color);
+.utrecht-html textarea:disabled {
+  background-color: var(--utrecht-textarea-disabled-background-color, var(--utrecht-form-input-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
+  border-color: var(--utrecht-textarea-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
+  color: var(--utrecht-textarea-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
+  cursor: var(--utrecht-action-disabled-cursor);
 }
-
-.utrecht-textarea--focus, .utrecht-textarea--html-textarea:focus, .utrecht-html textarea:focus {
-  outline-width: var(--utrecht-focus-outline-width, 0);
-  outline-style: var(--utrecht-focus-outline-style, solid);
-  outline-color: var(--utrecht-focus-outline-color, transparent);
-  color: var(--utrecht-focus-color, inherit);
+.utrecht-html textarea:focus {
+  background-color: var(--utrecht-textarea-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
+  border-color: var(--utrecht-textarea-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
+  color: var(--utrecht-textarea-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
   box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
-  outline-offset: 0;
-  background-color: var(--utrecht-focus-background-color);
-}
-
-.utrecht-textarea--read-only, .utrecht-textarea--html-textarea:read-only, .utrecht-html textarea:read-only {
-  border-color: var(--utrecht-textarea-read-only-border-color);
-  color: var(--utrecht-textarea-read-only-color);
+  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);
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-.utrecht-textbox, .utrecht-html input[type=text],
-.utrecht-html input[type=email],
-.utrecht-html input[type=search],
-.utrecht-html input[type=tel],
-.utrecht-html input[type=url] {
-  border-width: var(--utrecht-textbox-border-width);
-  border-bottom-width: var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width));
-  border-color: var(--utrecht-textbox-border-color);
-  border-radius: var(--utrecht-textbox-border-radius, 0);
+.utrecht-html textarea:focus:not(:focus-visible) {
+  /* undo focus ring */
+  box-shadow: none;
+  outline-style: none;
+}
+.utrecht-html textarea:invalid, .utrecht-html textarea[aria-invalid=true] {
+  background-color: var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
+  border-color: var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-input-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
+  border-width: var(--utrecht-textarea-invalid-border-width, var(--utrecht-form-input-invalid-border-width, var(--utrecht-textarea-border-width, var(--utrecht-form-input-border-width))));
+}
+.utrecht-html textarea:read-only {
+  border-color: var(--utrecht-textarea-read-only-border, var(--utrecht-form-input-read-only-border-color, var(--utrecht-textarea-border, var(--utrecht-form-input-border-color))));
+  color: var(--utrecht-textarea-read-only-color, var(--utrecht-form-input-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
+}
+.utrecht-html textarea::placeholder {
+  color: var(--utrecht-textarea-placeholder-color, var(--utrecht-form-input-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
+  font-style: var(--utrecht-form-input-placeholder-font-style);
+  opacity: 100%;
+}
+.utrecht-html input:not([type]),
+.utrecht-html input[type=date i],
+.utrecht-html input[type=datetime-local i],
+.utrecht-html input[type=email i],
+.utrecht-html input[type=month i],
+.utrecht-html input[type=number i],
+.utrecht-html input[type=password i],
+.utrecht-html input[type=search i],
+.utrecht-html input[type=tel i],
+.utrecht-html input[type=text i],
+.utrecht-html input[type=time i],
+.utrecht-html input[type=url i],
+.utrecht-html input[type=week i] {
+  background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-input-background-color));
+  border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width));
+  border-bottom-width: var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width)));
+  border-color: var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color));
+  border-radius: var(--utrecht-textbox-border-radius, var(--utrecht-form-input-border-radius, 0));
   border-style: solid;
-  color: var(--utrecht-textbox-color);
-  font-family: var(--utrecht-textbox-font-family);
-  font-size: var(--utrecht-textbox-font-size, 1em);
-  max-width: var(--utrecht-textbox-max-width);
-  padding-block-end: var(--utrecht-textbox-padding-block-end);
-  padding-block-start: var(--utrecht-textbox-padding-block-start);
-  padding-inline-end: var(--utrecht-textbox-padding-inline-end);
-  padding-inline-start: var(--utrecht-textbox-padding-inline-start);
   box-sizing: border-box;
+  color: var(--utrecht-textbox-color, var(--utrecht-form-input-color));
+  font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-input-font-family));
+  font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-input-font-size, 1em));
+  font-weight: initial; /* harden */
+  height: initial; /* harden */
+  line-height: initial; /* harden */
+  max-inline-size: var(--utrecht-textbox-max-inline-size, var(--utrecht-form-input-max-inline-size));
+  padding-block-end: var(--utrecht-textbox-padding-block-end, var(--utrecht-form-input-padding-block-end, 0));
+  padding-block-start: var(--utrecht-textbox-padding-block-start, var(--utrecht-form-input-padding-block-start, 0));
+  padding-inline-end: var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-input-padding-inline-end, initial));
+  padding-inline-start: var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-input-padding-inline-start, initial));
   width: 100%;
 }
-
-.utrecht-textbox--invalid, .utrecht-textbox--html-input:invalid, .utrecht-textbox--html-input[aria-invalid=true], .utrecht-html input[type=text]:invalid,
-.utrecht-html input[type=email]:invalid,
-.utrecht-html input[type=search]:invalid,
-.utrecht-html input[type=tel]:invalid,
-.utrecht-html input[type=url]:invalid, .utrecht-html input[aria-invalid=true][type=text],
-.utrecht-html input[aria-invalid=true][type=email],
-.utrecht-html input[aria-invalid=true][type=search],
-.utrecht-html input[aria-invalid=true][type=tel],
-.utrecht-html input[aria-invalid=true][type=url] {
-  border-color: var(--utrecht-textbox-invalid-border-color);
-  border-width: var(--utrecht-textbox-invalid-border-width);
-}
-
-.utrecht-textbox--disabled, .utrecht-textbox--html-input:disabled, .utrecht-html input[type=text]:disabled,
-.utrecht-html input[type=email]:disabled,
-.utrecht-html input[type=search]:disabled,
-.utrecht-html input[type=tel]:disabled,
-.utrecht-html input[type=url]:disabled {
-  border-color: var(--utrecht-textbox-disabled-border-color);
-  color: var(--utrecht-textbox-disabled-color);
-}
-
-.utrecht-textbox--focus, .utrecht-textbox--html-input:focus, .utrecht-html input[type=text]:focus,
-.utrecht-html input[type=email]:focus,
-.utrecht-html input[type=search]:focus,
-.utrecht-html input[type=tel]:focus,
-.utrecht-html input[type=url]:focus {
-  outline-width: var(--utrecht-focus-outline-width, 0);
-  outline-style: var(--utrecht-focus-outline-style, solid);
-  outline-color: var(--utrecht-focus-outline-color, transparent);
-  color: var(--utrecht-focus-color, inherit);
+.utrecht-html input:not([type]):disabled,
+.utrecht-html input[type=date i]:disabled,
+.utrecht-html input[type=datetime-local i]:disabled,
+.utrecht-html input[type=email i]:disabled,
+.utrecht-html input[type=month i]:disabled,
+.utrecht-html input[type=number i]:disabled,
+.utrecht-html input[type=password i]:disabled,
+.utrecht-html input[type=search i]:disabled,
+.utrecht-html input[type=tel i]:disabled,
+.utrecht-html input[type=text i]:disabled,
+.utrecht-html input[type=time i]:disabled,
+.utrecht-html input[type=url i]:disabled,
+.utrecht-html input[type=week i]:disabled {
+  background-color: var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-input-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
+  border-color: var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
+  color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
+  cursor: var(--utrecht-action-disabled-cursor);
+}
+.utrecht-html input:not([type]):focus,
+.utrecht-html input[type=date i]:focus,
+.utrecht-html input[type=datetime-local i]:focus,
+.utrecht-html input[type=email i]:focus,
+.utrecht-html input[type=month i]:focus,
+.utrecht-html input[type=number i]:focus,
+.utrecht-html input[type=password i]:focus,
+.utrecht-html input[type=search i]:focus,
+.utrecht-html input[type=tel i]:focus,
+.utrecht-html input[type=text i]:focus,
+.utrecht-html input[type=time i]:focus,
+.utrecht-html input[type=url i]:focus,
+.utrecht-html input[type=week i]:focus {
+  background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
+  border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
+  color: var(--utrecht-textbox-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
   box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
-  outline-offset: 0;
-  background-color: var(--utrecht-focus-background-color);
-}
-
-.utrecht-textbox--read-only, .utrecht-textbox--html-input:read-only, .utrecht-html input[type=text]:read-only,
-.utrecht-html input[type=email]:read-only,
-.utrecht-html input[type=search]:read-only,
-.utrecht-html input[type=tel]:read-only,
-.utrecht-html input[type=url]:read-only {
-  border-color: var(--utrecht-textbox-read-only-border-color);
-  color: var(--utrecht-textbox-read-only-color);
+  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);
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- * Copyright (c) 2021 Gemeente Utrecht
- */
-.utrecht-unordered-list, .utrecht-html ul {
+.utrecht-html input:not([type]):focus:not(:focus-visible),
+.utrecht-html input[type=date i]:focus:not(:focus-visible),
+.utrecht-html input[type=datetime-local i]:focus:not(:focus-visible),
+.utrecht-html input[type=email i]:focus:not(:focus-visible),
+.utrecht-html input[type=month i]:focus:not(:focus-visible),
+.utrecht-html input[type=number i]:focus:not(:focus-visible),
+.utrecht-html input[type=password i]:focus:not(:focus-visible),
+.utrecht-html input[type=search i]:focus:not(:focus-visible),
+.utrecht-html input[type=tel i]:focus:not(:focus-visible),
+.utrecht-html input[type=text i]:focus:not(:focus-visible),
+.utrecht-html input[type=time i]:focus:not(:focus-visible),
+.utrecht-html input[type=url i]:focus:not(:focus-visible),
+.utrecht-html input[type=week i]:focus:not(:focus-visible) {
+  /* undo focus ring */
+  box-shadow: none;
+  outline-style: none;
+}
+.utrecht-html input:not([type]):invalid, .utrecht-html input:not([type])[aria-invalid=true],
+.utrecht-html input[type=date i]:invalid,
+.utrecht-html input[type=date i][aria-invalid=true],
+.utrecht-html input[type=datetime-local i]:invalid,
+.utrecht-html input[type=datetime-local i][aria-invalid=true],
+.utrecht-html input[type=email i]:invalid,
+.utrecht-html input[type=email i][aria-invalid=true],
+.utrecht-html input[type=month i]:invalid,
+.utrecht-html input[type=month i][aria-invalid=true],
+.utrecht-html input[type=number i]:invalid,
+.utrecht-html input[type=number i][aria-invalid=true],
+.utrecht-html input[type=password i]:invalid,
+.utrecht-html input[type=password i][aria-invalid=true],
+.utrecht-html input[type=search i]:invalid,
+.utrecht-html input[type=search i][aria-invalid=true],
+.utrecht-html input[type=tel i]:invalid,
+.utrecht-html input[type=tel i][aria-invalid=true],
+.utrecht-html input[type=text i]:invalid,
+.utrecht-html input[type=text i][aria-invalid=true],
+.utrecht-html input[type=time i]:invalid,
+.utrecht-html input[type=time i][aria-invalid=true],
+.utrecht-html input[type=url i]:invalid,
+.utrecht-html input[type=url i][aria-invalid=true],
+.utrecht-html input[type=week i]:invalid,
+.utrecht-html input[type=week i][aria-invalid=true] {
+  background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-input-background-color))));
+  border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-input-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color))));
+  border-width: var(--utrecht-textbox-invalid-border-width, var(--utrecht-form-input-invalid-border-width, var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width))));
+}
+.utrecht-html input:not([type]):read-only,
+.utrecht-html input[type=date i]:read-only,
+.utrecht-html input[type=datetime-local i]:read-only,
+.utrecht-html input[type=email i]:read-only,
+.utrecht-html input[type=month i]:read-only,
+.utrecht-html input[type=number i]:read-only,
+.utrecht-html input[type=password i]:read-only,
+.utrecht-html input[type=search i]:read-only,
+.utrecht-html input[type=tel i]:read-only,
+.utrecht-html input[type=text i]:read-only,
+.utrecht-html input[type=time i]:read-only,
+.utrecht-html input[type=url i]:read-only,
+.utrecht-html input[type=week i]:read-only {
+  border-color: var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-input-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color))));
+  color: var(--utrecht-textbox-read-only-color, var(--utrecht-form-input-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-input-color))));
+}
+.utrecht-html input:not([type])::placeholder,
+.utrecht-html input[type=date i]::placeholder,
+.utrecht-html input[type=datetime-local i]::placeholder,
+.utrecht-html input[type=email i]::placeholder,
+.utrecht-html input[type=month i]::placeholder,
+.utrecht-html input[type=number i]::placeholder,
+.utrecht-html input[type=password i]::placeholder,
+.utrecht-html input[type=search i]::placeholder,
+.utrecht-html input[type=tel i]::placeholder,
+.utrecht-html input[type=text i]::placeholder,
+.utrecht-html input[type=time i]::placeholder,
+.utrecht-html input[type=url i]::placeholder,
+.utrecht-html input[type=week i]::placeholder {
+  color: var(--utrecht-textbox-placeholder-color, var(--utrecht-form-input-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-input-color))));
+  font-style: var(--utrecht-form-input-placeholder-font-style);
+  opacity: 100%;
+}
+.utrecht-html input[autocomplete~=current-password i],
+.utrecht-html input[autocomplete~=new-password i],
+.utrecht-html input[type=password i] {
+  font-variant-ligatures: none;
+  font-variant-numeric: slashed-zero;
+}
+.utrecht-html input[autocomplete~=bday i],
+.utrecht-html input[autocomplete~=bday-day i],
+.utrecht-html input[autocomplete~=bday-month i],
+.utrecht-html input[autocomplete~=bday-year i],
+.utrecht-html input[autocomplete~=cc-csc i],
+.utrecht-html input[autocomplete~=cc-exp i],
+.utrecht-html input[autocomplete~=cc-exp-month i],
+.utrecht-html input[autocomplete~=cc-exp-year i],
+.utrecht-html input[autocomplete~=cc-number i],
+.utrecht-html input[autocomplete~=one-time-code i],
+.utrecht-html input[autocomplete~=postal-code i],
+.utrecht-html input[autocomplete~=tel i],
+.utrecht-html input[autocomplete~=tel-area-code i],
+.utrecht-html input[autocomplete~=tel-country-code i],
+.utrecht-html input[autocomplete~=tel-extension i],
+.utrecht-html input[autocomplete~=tel-local i],
+.utrecht-html input[autocomplete~=tel-national i],
+.utrecht-html input[autocomplete~=transaction-amount i],
+.utrecht-html input[inputmode=decimal i],
+.utrecht-html input[inputmode=numeric i],
+.utrecht-html input[inputmode=tel i],
+.utrecht-html input[type=number i],
+.utrecht-html input[type=tel i] {
+  -moz-appearance: textfield; /* avoid spinner input in Firefox */
+  font-variant-numeric: lining-nums tabular-nums;
+}
+.utrecht-html input[inputmode=email i],
+.utrecht-html input[inputmode=url i],
+.utrecht-html input[type=email i],
+.utrecht-html input[type=url i] {
+  font-variant-ligatures: none;
+}
+.utrecht-html ul {
   font-family: var(--utrecht-document-font-family, inherit);
   font-size: var(--utrecht-document-font-size, inherit);
   line-height: var(--utrecht-document-line-height, inherit);
-  padding-inline-start: 2ch;
-}
-
-.utrecht-unordered-list--distanced, .utrecht-html ul {
-  margin-block-start: var(--utrecht-unordered-list-margin-block-start, var(--utrecht-paragraph-margin-block-start));
-  margin-block-end: var(--utrecht-unordered-list-margin-block-end, var(--utrecht-paragraph-margin-block-end));
-}
-
-.utrecht-unordered-list--nested {
-  margin-inline-start: 2ch;
-  margin-block-end: 0;
+  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-unordered-list-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));
+  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-unordered-list-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)));
+  padding-inline-start: var(--utrecht-unordered-list-padding-inline-start, 2ch);
+  --utrecht-space-around: 1;
 }
-
-.utrecht-unordered-list__item, .utrecht-html ul > li {
-  padding-inline-start: 1ch;
-  margin-block-start: var(--utrecht-unordered-list-item-margin-block-start);
+.utrecht-html ul > li {
   margin-block-end: var(--utrecht-unordered-list-item-margin-block-end);
+  margin-block-start: var(--utrecht-unordered-list-item-margin-block-start);
+  padding-inline-start: var(--utrecht-unordered-list-item-padding-inline-start, 1ch);
 }
-
-.utrecht-unordered-list__item::marker, .utrecht-html ul > li::marker,
-.utrecht-unordered-list__marker {
+.utrecht-html ul > li::marker {
   color: var(--utrecht-unordered-list-marker-color);
   content: "●";
 }