npm - @utrecht/component-library-css - Versions diffs - 1.0.0-alpha.43 → 1.0.0-alpha.430 - Mend

@utrecht/component-library-css 1.0.0-alpha.43 → 1.0.0-alpha.430

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/dist/html.css CHANGED Viewed

@@ -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,302 +40,103 @@
  * 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
+ * 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-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
+ * 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-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
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
  * Copyright (c) 2021 Robbert Broersma
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
  */
-.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);
-}
 /**
  * @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-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);
-}
 /**
  * @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-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);
-}
 /**
  * @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.
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
  */
-.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);
-}
 /**
  * @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 Gemeente Utrecht
  * Copyright (c) 2021 Robbert Broersma
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
  */
-.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);
-}
 /**
  * @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-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);
-}
+/* stylelint-disable-next-line block-no-empty */
 /**
  * @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
@@ -371,252 +145,176 @@
  * @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 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-article, .utrecht-html article {
-  max-inline-size: var(--utrecht-article-max-inline-size);
-}
 /**
  * @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-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.
  */
-.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
+ * Copyright (c) 2021-2022 Frameless B.V.
  */
 /**
  * @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 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-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.
  */
-.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
+ * Copyright (c) 2021-2022 Frameless B.V.
  */
 /**
  * @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 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.
  */
 /**
  * @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);
-}
+/**
+ * @license EUPL-1.2
+ * 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
+ */
+/* stylelint-disable scss/no-global-function-names */
 /**
  * @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-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)));
-}
+/* stylelint-disable-next-line block-no-empty */
+/*
-.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);
-}
+# CSS implementation
+## `text-decoration-skip`
+`text-decoration-skip` can be helpful to avoid making some texts unreadable.
+For example by obscuring Arabic diacritics.
+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.
+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).
+Apart from making `skip-ink` configurable for normal/focus/hover, there is no good solution yet.
+---
+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.
+---
+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`.
+## `text-decoration-thickness`
+Varying `text-decoration-thickness` can be used to distinguish interactive states.
+---
+`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.
+---
+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.
+## `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
@@ -625,73 +323,43 @@
  * @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-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);
-}
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
 /**
  * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
  * Copyright (c) 2021 Gemeente Utrecht
+ */
+/**
+ * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
  * Copyright (c) 2021 The Knights Who Say NIH! B.V.
  */
-.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);
-}
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2021 Gemeente Utrecht
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
  */
 /**
  * @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-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);
-}
+/* 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
@@ -700,75 +368,19 @@
  * @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-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);
-}
+/* 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 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.
  */
-.utrecht-link, .utrecht-html a:link {
-  text-decoration: var(--utrecht-link-text-decoration, underline);
-  color: var(--utrecht-link-color, blue);
-}
-.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));
-}
-.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);
-}
-/* stylelint-disable-next-line block-no-empty */
-.utrecht-link--telephone, .utrecht-html a[href^="tel:" i] {
-  white-space: nowrap;
-}
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
@@ -776,65 +388,27 @@
 /**
  * @license EUPL-1.2
  * 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);
-}
+/* stylelint-disable-next-line block-no-empty */
+/* stylelint-disable selector-class-pattern */
 /**
  * @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 Robbert Broersma
  */
-.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
+ * Copyright (c) 2021 Robbert Broersma
  */
+/* stylelint-disable-next-line block-no-empty */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
  */
-.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 Robbert Broersma
@@ -843,16 +417,8 @@
  * @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 {
-  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);
-}
+/* stylelint-disable-next-line block-no-empty */
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
@@ -860,649 +426,1105 @@
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2021 Gemeente Utrecht
  */
-.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;
+/* 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-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 article {
+  max-inline-size: var(--utrecht-article-max-inline-size);
 }
-.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-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-button-hint-disabled-color,
+    var(--_utrecht-button-appearance-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;
+  border-width: var(--_utrecht-button-border-width);
+  border-bottom-width: var(--_utrecht-button-border-bottom-width);
+  box-sizing: border-box;
+  color: var(--_utrecht-button-color);
+  cursor: var(--utrecht-action-activate-cursor);
+  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-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-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], :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], :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-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-html button:focus:not([aria-disabled=true], :disabled) {
+  background-color: var(--_utrecht-button-focus-background-color);
+  border-color: var(--_utrecht-button-focus-border-color);
+  color: var(--_utrecht-button-focus-color);
+}
+.utrecht-html button:focus-visible {
+  /* the pseudo-class for `:focus-visible` is implemented via the mixin */
+  /* - The browser default focus ring should apply when these CSS custom properties are not set.
+   * - Make the `box-shadow` value available, so components that have their own `box-shadow`
+   *   can combine it with the focus ring box shadow.
+   */
+  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
+    var(--utrecht-focus-inverse-outline-color, transparent);
+  box-shadow: var(--_utrecht-focus-ring-box-shadow);
+  outline-color: var(--utrecht-focus-outline-color, revert);
+  outline-offset: var(--utrecht-focus-outline-offset, revert);
+  outline-style: var(--utrecht-focus-outline-style, revert);
+  outline-width: var(--utrecht-focus-outline-width, revert);
+}
+.utrecht-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;
+  cursor: var(--utrecht-action-activate-cursor, revert);
+}
+.utrecht-html input[type=checkbox i]:disabled {
+  cursor: var(--utrecht-action-disabled-cursor, revert);
+}
+.utrecht-html input[type=checkbox i]:focus {
+  /* - The browser default focus ring should apply when these CSS custom properties are not set.
+   * - Make the `box-shadow` value available, so components that have their own `box-shadow`
+   *   can combine it with the focus ring box shadow.
+   */
+  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
+    var(--utrecht-focus-inverse-outline-color, transparent);
+  box-shadow: var(--_utrecht-focus-ring-box-shadow);
+  outline-color: var(--utrecht-focus-outline-color, revert);
+  outline-offset: var(--utrecht-focus-outline-offset, revert);
+  outline-style: var(--utrecht-focus-outline-style, revert);
+  outline-width: var(--utrecht-focus-outline-width, revert);
+}
+.utrecht-html input[type=checkbox i]:focus:not(:focus-visible) {
+  /* undo focus ring */
+  box-shadow: none;
+  outline-style: revert;
+}
+.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 code {
+  /* Use `monospace` as fallback both when the custom property isn't set and when the font is not available */
+  background-color: var(--utrecht-code-background-color);
+  color: var(--utrecht-code-color);
+  font-family: var(--utrecht-code-font-family, monospace), monospace;
+  font-size: var(--utrecht-code-font-size);
+  font-variant-ligatures: none;
+  line-height: var(--utrecht-code-line-height);
+}
+.utrecht-html em {
+  font-style: var(--utrecht-emphasis-stressed-font-style, italic);
 }
-.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-html strong {
+  font-weight: var(--utrecht-emphasis-strong-font-weight, bold);
 }
-.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-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));
+  all: revert;
+  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-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);
+.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));
 }
-/**
- * @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);
-  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-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-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-html form {
+  max-inline-size: var(--utrecht-form-max-inline-size);
 }
-.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 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);
+  display: table;
+  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-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-html fieldset:disabled > legend {
+  color: var(--utrecht-form-fieldset-legend-disabled-color, var(--utrecht-form-fieldset-legend-color, var(--utrecht-document-color, inherit)));
 }
-.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);
+.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);
 }
-/**
- * @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=password],
-.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);
-  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;
-  width: 100%;
+.utrecht-html input[type=checkbox i] ~ label {
+  color: var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));
+  cursor: var(--utrecht-action-activate-cursor, revert);
+  font-weight: var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight));
 }
-.utrecht-textbox--invalid, .utrecht-textbox--html-input:invalid, .utrecht-html input[type=text]:invalid,
-.utrecht-html input[type=email]:invalid,
-.utrecht-html input[type=password]: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=password],
-.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 input[type=radio i] ~ label {
+  color: var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));
+  cursor: var(--utrecht-action-activate-cursor, revert);
+  font-weight: var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight));
 }
-.utrecht-textbox--disabled, .utrecht-textbox--html-input:disabled, .utrecht-html input[type=text]:disabled,
-.utrecht-html input[type=email]:disabled,
-.utrecht-html input[type=password]: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 mark {
+  background-color: var(--utrecht-mark-background-color, revert);
+  color: var(--utrecht-mark-color, revert);
+}
+@media print {
+  .utrecht-html mark {
+    outline-color: currentColor;
+    outline-style: dotted;
+    outline-width: 0.1em;
+  }
+}
+@media screen and (-ms-high-contrast: active) {
+  .utrecht-html mark {
+    background-color: Highlight;
+    color: HighlightText;
+  }
+}
+.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-textbox--focus, .utrecht-textbox--html-input:focus, .utrecht-html input[type=text]:focus,
-.utrecht-html input[type=email]:focus,
-.utrecht-html input[type=password]: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);
-  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-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=password]: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-color: var(--utrecht-link-text-decoration-color, currentColor);
+  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);
-  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);
-}
-/* stylelint-disable-next-line block-no-empty */
-.utrecht-link--telephone, .utrecht-html a[href^="tel:" i] {
+  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);
+  /* - The browser default focus ring should apply when these CSS custom properties are not set.
+   * - Make the `box-shadow` value available, so components that have their own `box-shadow`
+   *   can combine it with the focus ring box shadow.
+   */
+  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
+    var(--utrecht-focus-inverse-outline-color, transparent);
+  box-shadow: var(--_utrecht-focus-ring-box-shadow);
+  outline-color: var(--utrecht-focus-outline-color, revert);
+  outline-offset: var(--utrecht-focus-outline-offset, revert);
+  outline-style: var(--utrecht-focus-outline-style, revert);
+  outline-width: var(--utrecht-focus-outline-width, revert);
+}
+.utrecht-html a:focus:not(:focus-visible) {
+  /* undo focus ring */
+  box-shadow: none;
+  outline-style: revert;
+}
+.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);
-}
-.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
- */
-/**
- * @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-size: var(--utrecht-ordered-list-font-size, var(--utrecht-unordered-list-font-size, var(--utrecht-document-font-size, inherit)));
+  line-height: var(--utrecht-ordered-list-font-size, var(--utrecht-unordered-list-line-height, var(--utrecht-document-line-height, 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-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-html ol:lang(ar) {
+  list-style: arabic-indic;
+}
+.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));
-}
-.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
- */
-/**
- * @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: 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-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-html * ~ p {
+  --utrecht-space-around: 1;
+}
+.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 pre:has(> code:only-child) {
+  /* Use `monospace` as fallback both when the custom property isn't set and when the font is not available */
+  background-color: var(--utrecht-code-background-color);
+  color: var(--utrecht-code-color);
+  font-family: var(--utrecht-code-font-family, monospace), monospace;
+  font-size: var(--utrecht-code-font-size);
+  font-variant-ligatures: none;
+  line-height: var(--utrecht-code-line-height);
+  --utrecht-code-color: var(--utrecht-code-block-color, inherit);
+  --utrecht-code-background-color: var(--utrecht-code-block-background-color, inherit);
+  --utrecht-code-font-weight: var(--utrecht-code-block-font-weight, inherit);
+  --utrecht-code-font-size: var(--utrecht-code-block-font-size, inherit);
+  --utrecht-code-font-family: var(--utrecht-code-block-font-family, monospace);
+  background-color: var(--utrecht-code-block-background-color);
+  display: block;
+  margin-block-end: var(--utrecht-code-block-margin-block-end);
+  margin-block-start: var(--utrecht-code-block-margin-block-start);
+  margin-inline-end: var(--utrecht-code-block-margin-inline-end);
+  margin-inline-start: var(--utrecht-code-block-margin-inline-start);
+  padding-block-end: var(--utrecht-code-block-padding-block-end);
+  padding-block-start: var(--utrecht-code-block-padding-block-start);
+  padding-inline-end: var(--utrecht-code-block-padding-inline-end);
+  padding-inline-start: var(--utrecht-code-block-padding-inline-start);
+  white-space: pre;
+}
+.utrecht-html pre:has(> code:only-child) > code {
+  display: contents;
+}
+.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;
-}
-/**
- * @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 {
+  margin-inline-start: 0;
+  cursor: var(--utrecht-action-activate-cursor, revert);
+}
+.utrecht-html input[type=radio i]:disabled {
+  cursor: var(--utrecht-action-disabled-cursor, revert);
+}
+.utrecht-html input[type=radio i]:focus {
+  /* - The browser default focus ring should apply when these CSS custom properties are not set.
+   * - Make the `box-shadow` value available, so components that have their own `box-shadow`
+   *   can combine it with the focus ring box shadow.
+   */
+  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
+    var(--utrecht-focus-inverse-outline-color, transparent);
+  box-shadow: var(--_utrecht-focus-ring-box-shadow);
+  outline-color: var(--utrecht-focus-outline-color, revert);
+  outline-offset: var(--utrecht-focus-outline-offset, revert);
+  outline-style: var(--utrecht-focus-outline-style, revert);
+  outline-width: var(--utrecht-focus-outline-width, revert);
+}
+.utrecht-html input[type=radio i]:focus:not(:focus-visible) {
+  /* undo focus ring */
+  box-shadow: none;
+  outline-style: revert;
+}
+.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))));
+  /* - The browser default focus ring should apply when these CSS custom properties are not set.
+   * - Make the `box-shadow` value available, so components that have their own `box-shadow`
+   *   can combine it with the focus ring box shadow.
+   */
+  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
+    var(--utrecht-focus-inverse-outline-color, transparent);
+  box-shadow: var(--_utrecht-focus-ring-box-shadow);
+  outline-color: var(--utrecht-focus-outline-color, revert);
+  outline-offset: var(--utrecht-focus-outline-offset, revert);
+  outline-style: var(--utrecht-focus-outline-style, revert);
+  outline-width: var(--utrecht-focus-outline-width, revert);
+}
+.utrecht-html select:focus:not(:focus-visible) {
+  /* undo focus ring */
+  box-shadow: none;
+  outline-style: revert;
+}
+.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);
+  line-height: var(--utrecht-table-line-height, 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-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 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=password],
-.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: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-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))));
+  /* - The browser default focus ring should apply when these CSS custom properties are not set.
+   * - Make the `box-shadow` value available, so components that have their own `box-shadow`
+   *   can combine it with the focus ring box shadow.
+   */
+  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
+    var(--utrecht-focus-inverse-outline-color, transparent);
+  box-shadow: var(--_utrecht-focus-ring-box-shadow);
+  outline-color: var(--utrecht-focus-outline-color, revert);
+  outline-offset: var(--utrecht-focus-outline-offset, revert);
+  outline-style: var(--utrecht-focus-outline-style, revert);
+  outline-width: var(--utrecht-focus-outline-width, revert);
+}
+.utrecht-html textarea:focus:not(:focus-visible) {
+  /* undo focus ring */
+  box-shadow: none;
+  outline-style: revert;
+}
+.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=password]: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=password],
-.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=password]: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=password]: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);
-  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=password]: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);
-}
-/**
- * @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]):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))));
+  /* - The browser default focus ring should apply when these CSS custom properties are not set.
+   * - Make the `box-shadow` value available, so components that have their own `box-shadow`
+   *   can combine it with the focus ring box shadow.
+   */
+  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
+    var(--utrecht-focus-inverse-outline-color, transparent);
+  box-shadow: var(--_utrecht-focus-ring-box-shadow);
+  outline-color: var(--utrecht-focus-outline-color, revert);
+  outline-offset: var(--utrecht-focus-outline-offset, revert);
+  outline-style: var(--utrecht-focus-outline-style, revert);
+  outline-width: var(--utrecht-focus-outline-width, revert);
+}
+.utrecht-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: revert;
+}
+.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;
-}
-.utrecht-unordered-list__item, .utrecht-html ul > li {
-  padding-inline-start: 1ch;
-  margin-block-start: var(--utrecht-unordered-list-item-margin-block-start);
+  font-size: var(--utrecht-unordered-list-font-size, var(--utrecht-document-font-size, inherit));
+  line-height: var(--utrecht-unordered-list-line-height, var(--utrecht-document-line-height, inherit));
+  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-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: "●";
 }