@utrecht/component-library-css 4.1.0 → 5.0.0

package/dist/index.css

@@ -1,33 +1,73 @@
-@charset "UTF-8";
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2024-2025 Gemeente Utrecht
+ * Copyright (c) 2024-2025 Frameless B.V.
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2021 Gemeente Utrecht
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2022 Gemeente Utrecht
+ * Copyright (c) 2022 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2022 The Knights Who Say NIH! B.V.
+ * Copyright (c) 2022 Gemeente Utrecht
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2022 Robbert Broersma
+ */
+/**
+ * @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-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.
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2023 Frameless B.V.
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021-2022 Gemeente Utrecht
+ * Copyright (c) 2021-2022 Frameless B.V.
  */
-/* Collection of all BEM class names in the component library */
-/*
- * TODO: Once every component is a separate npm package, these imports should
- * be updated to use a package reference instead of a relative path.
- *
- * For example:
- *     @import "../../blockquote/index";
- *
- * Will become:
- *     @import "@utrecht/blockquote/index";
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
  */
 /**
  * @license EUPL-1.2
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
  * Copyright (c) 2021 Gemeente Utrecht
  */
-/* Collection of all BEM class names in the component library */
-/*
- * TODO: Once every component is a separate npm package, these imports should
- * be updated to use a package reference instead of a relative path.
- *
- * For example:
- *     @import "../../blockquote/index";
- *
- * Will become:
- *     @import "@utrecht/blockquote/index";
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2022 Frameless B.V.
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
  */
 /**
  * @license EUPL-1.2
@@ -36,10 +76,9 @@
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
+ * Copyright (c) 2021 Gemeente Utrecht
  */
-/* stylelint-disable-next-line block-no-empty */
+@charset "UTF-8";
 .utrecht-accordion {
   margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-accordion-margin-block-end, 0));
   margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-accordion-margin-block-start, 0));
@@ -122,34 +161,6 @@
 .utrecht-accordion__header {
   --utrecht-space-around: 0;
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
- */
-/* No good use case for `--ok` yet */
-/*
-Apply `.utrecht-alert-dialog` to any element with this class name, with one exception.
-
-The HTML `<dialog>` element must have `display: none` until the `open` attribute is set,
-so do not apply these styles to an HTML `<dialog>` element without `open` attribute.
-*/
 .utrecht-alert-dialog:not(dialog:not([open])) {
   --utrecht-alert-dialog-margin-block-start: auto;
   --utrecht-alert-dialog-margin-block-end: auto;
@@ -158,10 +169,9 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   border-radius: var(--utrecht-alert-border-radius, 0);
   border-width: var(--_utrecht-alert-border-width, var(--utrecht-alert-border-width, 0));
   color: var(--_utrecht-alert-color, var(--utrecht-alert-color));
-  display: grid;
-  gap: var(--utrecht-alert-icon-gap);
-  grid-template-areas: "icon message";
-  grid-template-columns: 0fr 100fr;
+  column-gap: var(--utrecht-alert-column-gap);
+  display: flex;
+  flex-direction: row;
   margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-alert-margin-block-end, 0));
   margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-alert-margin-block-start, 0));
   padding-block-end: var(--utrecht-alert-padding-block-end);
@@ -171,7 +181,7 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   border-color: var(--utrecht-alert-dialog-border-color);
   border-radius: var(--utrecht-alert-dialog-border-radius, 0);
   border-style: solid;
-  border-width: var(--utrecht-alert-dialog-border-width, 0); /* reset HTML <dialog> border by default */
+  border-width: var(--utrecht-alert-dialog-border-width, 0);
   box-shadow: var(--utrecht-alert-dialog-box-shadow);
   max-block-size: var(--utrecht-alert-dialog-max-block-size);
   max-inline-size: var(--utrecht-alert-dialog-max-inline-size);
@@ -204,11 +214,12 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
 
 .utrecht-alert-dialog__icon {
   --utrecht-icon-color: var(--_utrecht-alert-icon-color, var(--utrecht-alert-icon-color));
-  grid-area: icon;
+  --utrecht-icon-size: var(--utrecht-alert-icon-size);
+  --utrecht-icon-inset-block-start: var(--utrecht-alert-icon-inset-block-start);
 }
 
 .utrecht-alert-dialog__message {
-  grid-area: message;
+  row-gap: var(--utrecht-alert-message-row-gap);
 }
 
 .utrecht-alert-dialog--error {
@@ -234,17 +245,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   --_utrecht-alert-border-width: var(--utrecht-alert-warning-border-width);
   --_utrecht-alert-color: var(--utrecht-alert-warning-color);
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
- */
 .utrecht-alert {
   background-color: var(--_utrecht-alert-background-color, var(--utrecht-alert-background-color));
   border-color: var(--_utrecht-alert-border-color, var(--utrecht-alert-border-color));
@@ -252,10 +252,9 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   border-style: solid;
   border-width: var(--_utrecht-alert-border-width, var(--utrecht-alert-border-width, 0));
   color: var(--_utrecht-alert-color, var(--utrecht-alert-color));
-  display: grid;
-  gap: var(--utrecht-alert-icon-gap);
-  grid-template-areas: "icon message";
-  grid-template-columns: 0fr 100fr;
+  column-gap: var(--utrecht-alert-column-gap);
+  display: flex;
+  flex-direction: row;
   margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-alert-margin-block-end, 0));
   margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-alert-margin-block-start, 0));
   padding-block-end: var(--utrecht-alert-padding-block-end);
@@ -266,11 +265,16 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
 
 .utrecht-alert__icon {
   --utrecht-icon-color: var(--_utrecht-alert-icon-color, var(--utrecht-alert-icon-color));
-  grid-area: icon;
+  --utrecht-icon-size: var(--utrecht-alert-icon-size);
+  --utrecht-icon-inset-block-start: var(--utrecht-alert-icon-inset-block-start);
+}
+
+.utrecht-alert__content {
+  row-gap: var(--utrecht-alert-content-row-gap);
 }
 
 .utrecht-alert__message {
-  grid-area: message;
+  row-gap: var(--utrecht-alert-message-row-gap);
 }
 
 .utrecht-alert--info {
@@ -304,50 +308,12 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   --_utrecht-alert-border-width: var(--utrecht-alert-error-border-width);
   --_utrecht-alert-color: var(--utrecht-alert-error-color);
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
- */
-/* stylelint-disable-next-line block-no-empty */
 .utrecht-alternate-lang-nav__heading {
-  /*
-  - Hide the heading from Headings navigation
-  - use `aria-labelledby` for a `navigation` or `region` landmark instead
-  */
   display: none;
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
- */
 .utrecht-article {
   max-inline-size: var(--utrecht-article-max-inline-size);
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
- */
 .utrecht-backdrop {
   --_utrecht-backdrop-opacity: var(--utrecht-backdrop-opacity);
   --_utrecht-backdrop-fade-in-animation-duration: var(--utrecht-backdrop-fade-in-animation-duration, 0);
@@ -389,85 +355,44 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
 .utrecht-backdrop--viewport {
   position: fixed;
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
- */
 .utrecht-badge-counter {
-  /* Limit size to `max-content`, so the badge will not be stretched out of proportion inside a flexbox */
   background-color: var(--utrecht-badge-counter-background-color, var(--utrecht-badge-background-color, hsl(0, 0%, 0%)));
   border-radius: var(--utrecht-badge-counter-border-radius, var(--utrecht-badge-border-radius, 0.5ch));
   color: var(--utrecht-badge-counter-color, var(--utrecht-badge-color, hsl(0, 0%, 100%)));
   display: inline-block;
   font-family: var(--utrecht-badge-counter-font-family, var(--utrecht-badge-font-family, var(--utrecht-document-font-family, sans-serif)));
   font-size: var(--utrecht-badge-counter-font-size, var(--utrecht-badge-font-size));
-  font-style: var(--utrecht-badge-counter-font-style, normal); /* no inheritance */
-  font-weight: var(--utrecht-badge-counter-font-weight, var(--utrecht-badge-font-weight, bold)); /* no inheritance */
+  font-style: var(--utrecht-badge-counter-font-style, normal);
+  font-weight: var(--utrecht-badge-counter-font-weight, var(--utrecht-badge-font-weight, bold));
   line-height: 1;
   max-block-size: max-content;
   max-inline-size: max-content;
-  min-block-size: var(--utrecht-badge-counter-min-size, 1em);
-  min-inline-size: var(--utrecht-badge-counter-min-size, 1em);
+  min-block-size: var(--utrecht-badge-counter-min-block-size, var(--utrecht-badge-counter-min-inline-size, var(--utrecht-badge-counter-min-size, 1em)));
+  min-inline-size: var(--utrecht-badge-counter-min-inline-size, var(--utrecht-badge-counter-min-size, 1em));
   padding-block-end: var(--utrecht-badge-counter-padding-block, var(--utrecht-badge-padding-block, 0.5ex));
   padding-block-start: var(--utrecht-badge-counter-padding-block, var(--utrecht-badge-padding-block, 0.5ex));
   padding-inline-end: var(--utrecht-badge-counter-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch));
   padding-inline-start: var(--utrecht-badge-counter-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch));
   text-align: center;
-  text-decoration: none; /* no inheritance */
+  text-decoration: none;
   white-space: nowrap;
 }
 @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
   .utrecht-badge-counter {
     border-color: currentColor;
     border-style: solid;
-    /* Warning: there layout difference because of the added 1px border */
     border-width: 1px;
   }
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
- */
 .utrecht-badge-data {
-  /*
-   * `line-height` has a default value, so `line-height` can be used on a parent element to add vertical space between badges
-   *
-   * Configure maximum size to prevent stretching badges inside a flexbox.
-   * 
-   * Configure minumum size to have space to type in when displaying badges in a WYSIWYG editor.
-   */
   background-color: var(--utrecht-badge-background-color, hsl(0, 0%, 0%));
   border-radius: var(--utrecht-badge-border-radius, 0.5ch);
   color: var(--utrecht-badge-color, hsl(0, 0%, 100%));
   display: inline-block;
   font-family: var(--utrecht-document-font-family, sans-serif);
   font-size: var(--utrecht-badge-font-size, inherit);
-  font-style: var(--utrecht-badge-font-style, normal); /* no inheritance */
-  font-weight: var(--utrecht-badge-font-weight, bold); /* no inheritance */
+  font-style: var(--utrecht-badge-font-style, normal);
+  font-weight: var(--utrecht-badge-font-weight, bold);
   line-height: var(--utrecht-badge-line-height, 1em);
   max-block-size: max-content;
   max-inline-size: max-content;
@@ -477,7 +402,7 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   padding-block-start: var(--utrecht-badge-padding-block, 0.5ex);
   padding-inline-end: var(--utrecht-badge-padding-inline, 0.5ch);
   padding-inline-start: var(--utrecht-badge-padding-inline, 0.5ch);
-  text-decoration: none; /* no inheritance */
+  text-decoration: none;
   letter-spacing: var(--utrecht-badge-data-letter-spacing, inherit);
   text-transform: var(--utrecht-badge-data-text-transform, inherit);
 }
@@ -485,58 +410,23 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   .utrecht-badge-data {
     border-color: currentColor;
     border-style: solid;
-    /* Warning: there layout difference because of the added 1px border */
     border-width: 1px;
   }
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
- */
 .utrecht-badge-list {
   display: flex;
   flex-wrap: wrap;
   gap: var(--utrecht-badge-list-item-margin-block) var(--utrecht-badge-list-item-margin-inline);
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
- */
 .utrecht-badge-status {
-  /*
-   * `line-height` has a default value, so `line-height` can be used on a parent element to add vertical space between badges
-   *
-   * Configure maximum size to prevent stretching badges inside a flexbox.
-   * 
-   * Configure minumum size to have space to type in when displaying badges in a WYSIWYG editor.
-   */
   background-color: var(--utrecht-badge-background-color, hsl(0, 0%, 0%));
   border-radius: var(--utrecht-badge-border-radius, 0.5ch);
   color: var(--utrecht-badge-color, hsl(0, 0%, 100%));
   display: inline-block;
   font-family: var(--utrecht-document-font-family, sans-serif);
   font-size: var(--utrecht-badge-font-size, inherit);
-  font-style: var(--utrecht-badge-font-style, normal); /* no inheritance */
-  font-weight: var(--utrecht-badge-font-weight, bold); /* no inheritance */
+  font-style: var(--utrecht-badge-font-style, normal);
+  font-weight: var(--utrecht-badge-font-weight, bold);
   line-height: var(--utrecht-badge-line-height, 1em);
   max-block-size: max-content;
   max-inline-size: max-content;
@@ -546,7 +436,7 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   padding-block-start: var(--utrecht-badge-padding-block, 0.5ex);
   padding-inline-end: var(--utrecht-badge-padding-inline, 0.5ch);
   padding-inline-start: var(--utrecht-badge-padding-inline, 0.5ch);
-  text-decoration: none; /* no inheritance */
+  text-decoration: none;
   letter-spacing: var(--utrecht-badge-status-letter-spacing, inherit);
   text-transform: var(--utrecht-badge-status-text-transform, inherit);
 }
@@ -554,7 +444,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   .utrecht-badge-status {
     border-color: currentColor;
     border-style: solid;
-    /* Warning: there layout difference because of the added 1px border */
     border-width: 1px;
   }
 }
@@ -608,15 +497,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   background-color: var(--utrecht-feedback-inactive-fill-background-color, var(--utrecht-feedback-danger-fill-background-color, hsl(0, 100%, 40%)));
   color: var(--utrecht-feedback-inactive-fill-color, var(--utrecht-feedback-danger-fill-color, white));
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
 .utrecht-blockquote {
   background-color: var(--utrecht-blockquote-background-color);
   color: var(--utrecht-blockquote-color);
@@ -648,16 +528,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
 .utrecht-blockquote--distanced {
   --utrecht-space-around: 1;
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/* stylelint-disable-next-line block-no-empty */
 .utrecht-breadcrumb-nav {
   --utrecht-focus-background-color: var(--utrecht-breadcrumb-nav-link-focus-background-color);
   --utrecht-link-background-color: var(--utrecht-breadcrumb-nav-link-background-color);
@@ -720,7 +590,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
 
 .utrecht-breadcrumb-nav__link--current {
   --utrecht-link-current-font-weight: var(--utrecht-breadcrumb-nav-link-current-font-weight, inherit);
-  /* configure the `current` `cursor` only when the current state is applied */
   --_utrecht-breadcrumb-nav-link-current-cursor: var(--utrecht-action-inert-cursor, default);
   font-weight: var(--utrecht-breadcrumb-nav-link-current-font-weight, inherit);
 }
@@ -730,19 +599,11 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
     --utrecht-breadcrumb-nav-link-disabled-color,
     var(--utrecht-breadcrumb-nav-link-color)
   );
-  /* configure the `disabled` `cursor` only when the current state is applied */
   --_utrecht-breadcrumb-nav-link-disabled-cursor: var(--utrecht-action-disabled-cursor, not-allowed);
   background-color: var(--utrecht-breadcrumb-nav-link-disabled-background-color, var(--utrecht-breadcrumb-nav-link-background-color));
-  /* Use the `current` cursor when available, otherwise use the `disabled` cursor */
   cursor: var(--_utrecht-breadcrumb-nav-link-current-cursor, var(--_utrecht-breadcrumb-nav-link-disabled-cursor));
 }
-
-/* stylelint-disable-next-line block-no-empty */
 .utrecht-breadcrumb-nav__separator {
-  /*
-   * Overwrite `style` attribute using "private" CSS variable for <li> hack:
-   * <li aria-hidden="true" hidden style="display: var(--_utrecht-breadcrumb-nav-separator-display, block)">
-   */
   --_utrecht-breadcrumb-nav-separator-display: inline-flex;
   --utrecht-icon-size: var(--utrecht-breadcrumb-nav-separator-icon-size);
   align-items: center;
@@ -755,10 +616,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
 }
 
 .utrecht-breadcrumb-nav__separator--html-li {
-  /*
-   * Overwrite `style` attribute using "private" CSS variable for <li> hack:
-   * <li aria-hidden="true" hidden style="display: var(--_utrecht-breadcrumb-nav-separator-display, block)">
-   */
   --_utrecht-breadcrumb-nav-separator-display: inline-flex;
   --utrecht-icon-size: var(--utrecht-breadcrumb-nav-separator-icon-size);
   align-items: center;
@@ -771,7 +628,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
 }
 
 .utrecht-breadcrumb-nav--arrows {
-  /* https://css-tricks.com/triangle-breadcrumbs/ */
   --utrecht-breadcrumb-nav-arrow-size: 24px;
   min-block-size: var(--utrecht-breadcrumb-nav-min-block-size);
   overflow: hidden;
@@ -825,15 +681,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
 .utrecht-breadcrumb-nav__item ~ .utrecht-breadcrumb-nav__item {
   margin-inline-start: var(--utrecht-breadcrumb-nav-item-divider-inline-size);
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2022 Frameless B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2022 Frameless B.V.
- */
 .utrecht-button-group {
   align-items: baseline;
   background-color: var(--utrecht-button-group-background-color);
@@ -862,47 +709,7 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   flex-direction: column;
   gap: var(--utrecht-button-group-block-gap, 1em);
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
- * Copyright (c) 2021 Gemeente Utrecht
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
- * Copyright (c) 2021 Gemeente Utrecht
- */
-/**
- * @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 The Knights Who Say NIH! B.V.
- * Copyright (c) 2021 Gemeente Utrecht
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
- * Copyright (c) 2021 Gemeente Utrecht
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- */
-/* stylelint-disable-next-line block-no-empty */
 .utrecht-button-link {
-  /*
-  `--_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))
@@ -1095,6 +902,8 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
     --utrecht-button-border-bottom-width,
     var(--_utrecht-button-border-width, 0)
   );
+  --_utrecht-button-font-size: var(--_utrecht-button-appearance-font-size, var(--utrecht-button-font-size));
+  --_utrecht-button-line-height: var(--_utrecht-button-appearance-line-height, var(--utrecht-button-line-height));
   --utrecht-icon-size: var(--utrecht-button-icon-size, 1em);
   align-items: center;
   background-color: var(--_utrecht-button-background-color);
@@ -1109,13 +918,13 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   color: var(--_utrecht-button-color);
   cursor: var(--utrecht-action-activate-cursor, revert);
   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, inherit));
+  font-family: var(--_utrecht-button-font-family, var(--utrecht-document-font-family));
+  font-size: var(--_utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
   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;
-  line-height: var(--utrecht-button-line-height);
+  line-height: var(--_utrecht-button-line-height);
   max-inline-size: var(--utrecht-button-max-inline-size, fit-content);
   min-block-size: var(--utrecht-button-min-block-size, 44px);
   min-inline-size: var(--utrecht-button-min-inline-size, 44px);
@@ -1134,16 +943,9 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   .utrecht-button-link {
     --_utrecht-button-disabled-border-color: GrayText;
     --_utrecht-button-disabled-color: GrayText;
-    /*
-     * `<button>` has these styles by default, but other elements styles as button do not:
-     *
-     * - `<div role="button">` needs this.
-     * - `<a role="button">` needs this.
-     */
     background-color: ButtonFace;
     border-color: buttonborder;
     color: ButtonText;
-    /* TODO: Find a way to express the `pressed` state */
   }
 }
 
@@ -1168,11 +970,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
 }
 
 .utrecht-button-link--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);
@@ -1196,11 +993,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   scale: var(--utrecht-button-focus-scale, 1);
 }
 .utrecht-button-link--html-a: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);
@@ -1229,10 +1021,10 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   --_utrecht-button-appearance-border-color: var(--utrecht-button-primary-action-border-color);
   --_utrecht-button-appearance-border-width: var(--utrecht-button-primary-action-border-width);
   --_utrecht-button-appearance-color: var(--utrecht-button-primary-action-color);
+  --_utrecht-button-appearance-font-size: var(--utrecht-button-primary-action-font-size);
   --_utrecht-button-appearance-font-weight: var(--utrecht-button-primary-action-font-weight);
-  --_utrecht-button-appearance-disabled-background-color: var(
-    --utrecht-button-primary-action-disabled-background-color
-  );
+  --_utrecht-button-appearance-line-height: var(--utrecht-button-primary-action-line-height);
+  --_utrecht-button-appearance-disabled-background-color: var(--utrecht-button-primary-action-disabled-background-color);
   --_utrecht-button-appearance-disabled-border-color: var(--utrecht-button-primary-action-disabled-border-color);
   --_utrecht-button-appearance-disabled-color: var(--utrecht-button-primary-action-disabled-color);
   --_utrecht-button-appearance-focus-background-color: var(--utrecht-button-primary-action-focus-background-color);
@@ -1254,10 +1046,10 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   --_utrecht-button-appearance-border-color: var(--utrecht-button-secondary-action-border-color);
   --_utrecht-button-appearance-border-width: var(--utrecht-button-secondary-action-border-width);
   --_utrecht-button-appearance-color: var(--utrecht-button-secondary-action-color);
+  --_utrecht-button-appearance-font-size: var(--utrecht-button-secondary-action-font-size);
   --_utrecht-button-appearance-font-weight: var(--utrecht-button-secondary-action-font-weight);
-  --_utrecht-button-appearance-disabled-background-color: var(
-    --utrecht-button-secondary-action-disabled-background-color
-  );
+  --_utrecht-button-appearance-line-height: var(--utrecht-button-secondary-action-line-height);
+  --_utrecht-button-appearance-disabled-background-color: var(--utrecht-button-secondary-action-disabled-background-color);
   --_utrecht-button-appearance-disabled-border-color: var(--utrecht-button-secondary-action-disabled-border-color);
   --_utrecht-button-appearance-disabled-color: var(--utrecht-button-secondary-action-disabled-color);
   --_utrecht-button-appearance-focus-background-color: var(--utrecht-button-secondary-action-focus-background-color);
@@ -1279,10 +1071,10 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   --_utrecht-button-appearance-border-color: var(--utrecht-button-subtle-border-color);
   --_utrecht-button-appearance-border-width: var(--utrecht-button-subtle-border-width);
   --_utrecht-button-appearance-color: var(--utrecht-button-subtle-color);
+  --_utrecht-button-appearance-font-size: var(--utrecht-button-subtle-font-size);
   --_utrecht-button-appearance-font-weight: var(--utrecht-button-subtle-font-weight);
-  --_utrecht-button-appearance-disabled-background-color: var(
-    --utrecht-button-subtle-disabled-background-color
-  );
+  --_utrecht-button-appearance-line-height: var(--utrecht-button-subtle-line-height);
+  --_utrecht-button-appearance-disabled-background-color: var(--utrecht-button-subtle-disabled-background-color);
   --_utrecht-button-appearance-disabled-border-color: var(--utrecht-button-subtle-disabled-border-color);
   --_utrecht-button-appearance-disabled-color: var(--utrecht-button-subtle-disabled-color);
   --_utrecht-button-appearance-focus-background-color: var(--utrecht-button-subtle-focus-background-color);
@@ -1295,37 +1087,7 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   --_utrecht-button-appearance-pressed-border-color: var(--utrecht-button-subtle-pressed-border-color);
   --_utrecht-button-appearance-pressed-color: var(--utrecht-button-subtle-pressed-color);
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
- * Copyright (c) 2021 Gemeente Utrecht
- */
-/**
- * @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 The Knights Who Say NIH! B.V.
- * Copyright (c) 2021 Gemeente Utrecht
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- */
-/* stylelint-disable-next-line block-no-empty */
 .utrecht-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))
@@ -1518,6 +1280,8 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
     --utrecht-button-border-bottom-width,
     var(--_utrecht-button-border-width, 0)
   );
+  --_utrecht-button-font-size: var(--_utrecht-button-appearance-font-size, var(--utrecht-button-font-size));
+  --_utrecht-button-line-height: var(--_utrecht-button-appearance-line-height, var(--utrecht-button-line-height));
   --utrecht-icon-size: var(--utrecht-button-icon-size, 1em);
   align-items: center;
   background-color: var(--_utrecht-button-background-color);
@@ -1532,13 +1296,13 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   color: var(--_utrecht-button-color);
   cursor: var(--utrecht-action-activate-cursor, revert);
   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, inherit));
+  font-family: var(--_utrecht-button-font-family, var(--utrecht-document-font-family));
+  font-size: var(--_utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
   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;
-  line-height: var(--utrecht-button-line-height);
+  line-height: var(--_utrecht-button-line-height);
   max-inline-size: var(--utrecht-button-max-inline-size, fit-content);
   min-block-size: var(--utrecht-button-min-block-size, 44px);
   min-inline-size: var(--utrecht-button-min-inline-size, 44px);
@@ -1555,16 +1319,9 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   .utrecht-button {
     --_utrecht-button-disabled-border-color: GrayText;
     --_utrecht-button-disabled-color: GrayText;
-    /*
-     * `<button>` has these styles by default, but other elements styles as button do not:
-     *
-     * - `<div role="button">` needs this.
-     * - `<a role="button">` needs this.
-     */
     background-color: ButtonFace;
     border-color: buttonborder;
     color: ButtonText;
-    /* TODO: Find a way to express the `pressed` state */
   }
 }
 
@@ -1576,7 +1333,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
 }
 
 .utrecht-button--submit {
-  /* lower priority specificty than busy and disabled cursor */
   cursor: var(--utrecht-action-submit-cursor, revert);
 }
 
@@ -1599,11 +1355,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
 }
 
 .utrecht-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);
@@ -1621,12 +1372,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
 }
 
 .utrecht-button:focus {
-  /* Show focus ring even for disabled :focus-visible buttons. *
-  /* For example: <button disabled tabindex="0"> */
-  /* - 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);
@@ -1641,11 +1386,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   border-color: var(--_utrecht-button-focus-border-color);
   color: var(--_utrecht-button-focus-color);
   scale: var(--utrecht-button-focus-scale, 1);
-  /* 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);
@@ -1654,11 +1394,7 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
 }
-
-/* override the `:focus` selector above */
-/* stylelint-disable-next-line no-descending-specificity */
 .utrecht-button:focus:not(:focus-visible) {
-  /* undo focus ring */
   box-shadow: none;
   outline-style: revert;
 }
@@ -1686,10 +1422,10 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   --_utrecht-button-appearance-border-color: var(--utrecht-button-primary-action-border-color);
   --_utrecht-button-appearance-border-width: var(--utrecht-button-primary-action-border-width);
   --_utrecht-button-appearance-color: var(--utrecht-button-primary-action-color);
+  --_utrecht-button-appearance-font-size: var(--utrecht-button-primary-action-font-size);
   --_utrecht-button-appearance-font-weight: var(--utrecht-button-primary-action-font-weight);
-  --_utrecht-button-appearance-disabled-background-color: var(
-    --utrecht-button-primary-action-disabled-background-color
-  );
+  --_utrecht-button-appearance-line-height: var(--utrecht-button-primary-action-line-height);
+  --_utrecht-button-appearance-disabled-background-color: var(--utrecht-button-primary-action-disabled-background-color);
   --_utrecht-button-appearance-disabled-border-color: var(--utrecht-button-primary-action-disabled-border-color);
   --_utrecht-button-appearance-disabled-color: var(--utrecht-button-primary-action-disabled-color);
   --_utrecht-button-appearance-focus-background-color: var(--utrecht-button-primary-action-focus-background-color);
@@ -1711,10 +1447,10 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   --_utrecht-button-appearance-border-color: var(--utrecht-button-secondary-action-border-color);
   --_utrecht-button-appearance-border-width: var(--utrecht-button-secondary-action-border-width);
   --_utrecht-button-appearance-color: var(--utrecht-button-secondary-action-color);
+  --_utrecht-button-appearance-font-size: var(--utrecht-button-secondary-action-font-size);
   --_utrecht-button-appearance-font-weight: var(--utrecht-button-secondary-action-font-weight);
-  --_utrecht-button-appearance-disabled-background-color: var(
-    --utrecht-button-secondary-action-disabled-background-color
-  );
+  --_utrecht-button-appearance-line-height: var(--utrecht-button-secondary-action-line-height);
+  --_utrecht-button-appearance-disabled-background-color: var(--utrecht-button-secondary-action-disabled-background-color);
   --_utrecht-button-appearance-disabled-border-color: var(--utrecht-button-secondary-action-disabled-border-color);
   --_utrecht-button-appearance-disabled-color: var(--utrecht-button-secondary-action-disabled-color);
   --_utrecht-button-appearance-focus-background-color: var(--utrecht-button-secondary-action-focus-background-color);
@@ -1736,10 +1472,10 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   --_utrecht-button-appearance-border-color: var(--utrecht-button-subtle-border-color);
   --_utrecht-button-appearance-border-width: var(--utrecht-button-subtle-border-width);
   --_utrecht-button-appearance-color: var(--utrecht-button-subtle-color);
+  --_utrecht-button-appearance-font-size: var(--utrecht-button-subtle-font-size);
   --_utrecht-button-appearance-font-weight: var(--utrecht-button-subtle-font-weight);
-  --_utrecht-button-appearance-disabled-background-color: var(
-    --utrecht-button-subtle-disabled-background-color
-  );
+  --_utrecht-button-appearance-line-height: var(--utrecht-button-subtle-line-height);
+  --_utrecht-button-appearance-disabled-background-color: var(--utrecht-button-subtle-disabled-background-color);
   --_utrecht-button-appearance-disabled-border-color: var(--utrecht-button-subtle-disabled-border-color);
   --_utrecht-button-appearance-disabled-color: var(--utrecht-button-subtle-disabled-color);
   --_utrecht-button-appearance-focus-background-color: var(--utrecht-button-subtle-focus-background-color);
@@ -1977,12 +1713,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-subtle-warning-pressed-border-color);
   --_utrecht-button-hint-pressed-color: var(--utrecht-button-subtle-warning-pressed-color);
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021-2022 Gemeente Utrecht
- * Copyright (c) 2021-2022 Frameless B.V.
- */
 .utrecht-calendar {
   background-color: var(--utrecht-calendar-background-color);
   inline-size: fit-content;
@@ -2115,30 +1845,8 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   block-size: var(--utrecht-calendar-icon-size);
   inline-size: var(--utrecht-calendar-icon-size);
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- */
-/* stylelint-disable-next-line block-no-empty */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- */
-/* stylelint-disable-next-line block-no-empty */
-/* stylelint-disable-next-line block-no-empty */
 .utrecht-checkbox {
-  margin-block-end: 0; /* reset native margin for input[type="checkbox"] */
+  margin-block-end: 0;
   margin-block-start: 0;
   margin-inline-end: 0;
   margin-inline-start: 0;
@@ -2146,17 +1854,11 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   -webkit-user-select: none;
   user-select: none;
 }
-
-/* stylelint-disable-next-line block-no-empty */
 .utrecht-checkbox--disabled {
   cursor: var(--utrecht-action-disabled-cursor, revert);
 }
 
 .utrecht-checkbox--focus-visible {
-  /* - 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);
@@ -2170,10 +1872,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   cursor: var(--utrecht-action-disabled-cursor, revert);
 }
 .utrecht-checkbox--html-input: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);
@@ -2183,29 +1881,10 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   outline-width: var(--utrecht-focus-outline-width, revert);
 }
 .utrecht-checkbox--html-input:focus:not(:focus-visible) {
-  /* undo focus ring */
   box-shadow: none;
   outline-style: revert;
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
- */
 .utrecht-code-block {
-  /* Use `monospace` as fallback both when the custom property isn't set and when the font is not available */
-  /* Use `inherit` as font-size, to override interfering CSS such as: `code { font-size: 16px }` */
   background-color: var(--utrecht-code-background-color);
   color: var(--utrecht-code-color);
   font-family: var(--utrecht-code-font-family, monospace), monospace;
@@ -2233,24 +1912,10 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
 }
 
 .utrecht-code-block__content {
-  /* reset effect of <code> */
   font-family: inherit;
   font-size: inherit;
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
- */
 .utrecht-code {
-  /* Use `monospace` as fallback both when the custom property isn't set and when the font is not available */
-  /* Use `inherit` as font-size, to override interfering CSS such as: `code { font-size: 16px }` */
   background-color: var(--utrecht-code-background-color);
   color: var(--utrecht-code-color);
   font-family: var(--utrecht-code-font-family, monospace), monospace;
@@ -2258,17 +1923,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   font-variant-ligatures: none;
   line-height: var(--utrecht-code-line-height);
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021-2022 Gemeente Utrecht
- * Copyright (c) 2021-2022 Frameless B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021-2022 Gemeente Utrecht
- * Copyright (c) 2021-2022 Frameless B.V.
- */
 .utrecht-color-sample {
   background-color: var(--utrecht-color-sample-background-color, currentColor);
   block-size: var(--utrecht-color-sample-block-size, 2em);
@@ -2297,17 +1951,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
     --utrecht-color-sample-default-border-color: var(--utrecht-color-sample-light-border-color, #fff);
   }
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
- */
 .utrecht-column-layout {
   column-gap: var(--utrecht-column-layout-gap, 2em);
   column-width: var(--utrecht-column-layout-column-width, 40ch);
@@ -2319,18 +1962,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   column-rule-style: solid;
   column-rule-width: var(--utrecht-column-layout-column-rule-width, 0);
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2023 Frameless B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2023 Frameless B.V.
- */
-/** 
- * Reset `padding` and `border` default styling from [popover] attribute.
- */
 .utrecht-combobox {
   inline-size: 100%;
   max-inline-size: var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size));
@@ -2360,42 +1991,12 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
 .utrecht-combobox__popover--hidden {
   display: none !important;
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
 .utrecht-currency-data {
-  /* lining-nums: avoid "oldstyle-nums" where some numbers have descenders */
-  /* tabular-nums: vertically align amounts */
   font-variant-numeric: lining-nums tabular-nums;
   white-space: nowrap;
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- */
-/* stylelint-disable-next-line block-no-empty */
 .utrecht-checkbox--custom,
 .utrecht-custom-checkbox {
-  /*
-   * Use 24x24px as hardcoded minimum target size, to meet WCAG 2.5.8 standards.
-   * https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html
-   */
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -2482,10 +2083,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
 
 .utrecht-checkbox--custom.utrecht-checkbox--focus-visible,
 .utrecht-custom-checkbox--focus-visible {
-  /* - 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);
@@ -2525,10 +2122,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
 }
 .utrecht-checkbox--custom.utrecht-checkbox--html-input:focus-visible,
 .utrecht-custom-checkbox--html-input:focus-visible {
-  /* - 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);
@@ -2567,25 +2160,7 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   border-width: var(--utrecht-checkbox-indeterminate-border-width, var(--utrecht-checkbox-border-width));
   color: var(--utrecht-checkbox-indeterminate-color, var(--utrecht-checkbox-color));
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021-2022 Gemeente Utrecht
- * Copyright (c) 2021-2022 Frameless B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021-2022 Gemeente Utrecht
- * Copyright (c) 2021-2022 Frameless B.V.
- */
-/* `@mixin utrecht-data-list--html-dl` is not necessary.
- * Default styles include only `display` and `margin`, and those properties are configured by default.
- */
-/* `@mixin utrecht-data-list__item-key--html-dt` is not necessary, `<dt>` has no default styles. */
-/* stylelint-disable-next-line block-no-empty */
-/* stylelint-disable-next-line block-no-empty */
 .utrecht-data-list {
-  /* also set `margin-block` to reset browser styling of <dl> */
   display: block;
   margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-data-list-margin-block-end, 0));
   margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-data-list-margin-block-start, 0));
@@ -2599,7 +2174,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
 }
 
 .utrecht-data-list__item-value {
-  /* configure `min-block-size` in case the value is empty */
   color: var(--utrecht-data-list-item-value-color);
   font-size: var(--utrecht-data-list-item-value-font-size);
   font-weight: var(--utrecht-data-list-item-value-font-weight);
@@ -2608,12 +2182,10 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
 }
 
 .utrecht-data-list__actions--html-dd {
-  /* reset browser styling of <dd> */
   margin-inline-start: 0;
 }
 
 .utrecht-data-list__item-value--html-dd {
-  /* reset browser styling of <dd> */
   margin-inline-start: 0;
 }
 
@@ -2652,17 +2224,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
 .utrecht-data-list--rows .utrecht-data-list__item-value {
   margin-block-start: var(--utrecht-data-list-rows-item-value-margin-block-start);
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
- * Copyright (c) 2021 Gemeente Utrecht
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- */
 .utrecht-data-placeholder {
   background-color: var(--utrecht-data-placeholder-background-color, currentColor);
   block-size: 1em;
@@ -2693,28 +2254,17 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
 .utrecht-data-placeholder--loading {
   cursor: var(--utrecht-action-busy-cursor, busy);
 }
-
-/* class name available only for Storybook */
 .utrecht-data-placeholder--print {
   outline-color: currentColor;
   outline-style: dashed;
   outline-width: 0.1em;
 }
-
-/* class name available only for Storybook */
 .utrecht-data-placeholder--forced-colors {
   background-color: GrayText;
 }
-
-/* class name available only for Storybook */
 .utrecht-data-placeholder--high-contrast {
   cursor: var(--utrecht-action-busy-cursor, busy);
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
 .utrecht-digid-button {
   --utrecht-button-min-block-size: var(--utrecht-digid-button-block-size, 50px);
   --utrecht-logo-max-block-size: var(--utrecht-digid-button-block-size, 50px);
@@ -2723,17 +2273,9 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   display: inline-flex;
   gap: var(--utrecht-space-inline-sm);
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
 .utrecht-document {
-  /* reset `font-smoothing: antialiasing`, prefer automatic (`subpixel-antialiasing`) behavior for high-dpi screens */
+  -webkit-font-smoothing: auto !important;
+  -moz-osx-font-smoothing: auto !important;
   color: var(--utrecht-document-color, inherit);
   font-family: var(--utrecht-document-font-family, inherit);
   font-size: var(--utrecht-document-font-size, inherit);
@@ -2745,29 +2287,13 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   text-size-adjust: none;
 }
 .utrecht-document :lang(ar) {
-  /* `letter-spacing` design tokens break Arabic text rendering, avoid that */
   letter-spacing: 0 !important;
 }
 
 .utrecht-document--surface {
   background-color: var(--utrecht-document-background-color, inherit);
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
- */
 .utrecht-drawer {
-  /* minimum size for backdrop with light-dismiss is 44px x 44px to meet WCAG SC 2.5.5 */
   --_utrecht-drawer-backdrop-min-size: max(var(--utrecht-drawer-backdrop-min-size), 44px);
   background-color: var(--utrecht-drawer-background-color, Canvas);
   border-color: var(--utrecht-drawer-border-color, currentColor);
@@ -2871,15 +2397,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   inset-block-end: 0;
   inset-block-start: auto;
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
 .utrecht-emphasis--stressed {
   font-style: var(--utrecht-emphasis-stressed-font-style, italic);
 }
@@ -2887,15 +2404,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
 .utrecht-emphasis--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 Robbert Broersma
- */
 .utrecht-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));
@@ -2906,21 +2414,13 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   font-size: var(--utrecht-figure-caption-font-size);
   line-height: var(--utrecht-figure-caption-line-height);
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
 .utrecht-form-field-description {
   --utrecht-document-color: currentColor;
   color: var(--utrecht-form-field-description-color);
   font-family: var(--utrecht-document-font-family, inherit);
   font-size: var(--utrecht-form-field-description-font-size, inherit);
   font-style: var(--utrecht-form-field-description-font-style);
+  line-height: var(--utrecht-form-field-description-line-height);
   margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));
   margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)));
 }
@@ -2943,15 +2443,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
 .utrecht-form-field-description--warning {
   color: var(--utrecht-form-field-description-warning-color, var(--utrecht-feedback-warning-color));
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
 .utrecht-form-field-error-message {
   --utrecht-document-color: currentColor;
   background-color: var(--utrecht-form-field-error-message-background-color);
@@ -2960,6 +2451,7 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   font-family: var(--utrecht-document-font-family, inherit);
   font-size: var(--utrecht-form-field-error-message-font-size, inherit);
   font-style: var(--utrecht-form-field-error-message-font-style);
+  line-height: var(--utrecht-form-field-error-message-line-height);
   margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-error-message-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));
   margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-error-message-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)));
   padding-block-end: var(--utrecht-form-field-error-message-padding-block-end);
@@ -2970,22 +2462,11 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
 .utrecht-form-field-error-message > * {
   --utrecht-space-around: 1;
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/* stylelint-disable-next-line block-no-empty */
 .utrecht-form-field {
   break-inside: avoid;
   font-family: var(--utrecht-document-font-family, inherit);
   margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, 0));
   margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, 0));
-  max-inline-size: var(--utrecht-form-field-max-inline-size);
   page-break-inside: avoid;
 }
 
@@ -3005,14 +2486,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   gap: 0 var(--utrecht-checkbox-margin-inline-end, 12px);
   grid-template-areas: "input label" "input description" "input description-invalid";
   grid-template-columns: var(--utrecht-checkbox-size) 100fr;
-  /*
-  .utrecht-form-field__label .utrecht-form-field__input {
-    margin-inline-start: calc(
-      -1 * (var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px))
-    );
-    margin-inline-end: var(--utrecht-checkbox-margin-inline-end, 12px);
-  }
-  */
 }
 .utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input) {
   margin-inline-start: calc(-1 * (var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px)));
@@ -3026,14 +2499,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   gap: 0 var(--utrecht-radio-button-margin-inline-end, 12px);
   grid-template-areas: "input label" "input description" "input description-invalid";
   grid-template-columns: var(--utrecht-radio-button-size) 100fr;
-  /*
-  .utrecht-form-field__label .utrecht-form-field__input {
-    margin-inline-start: calc(
-      -1 * (var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px))
-    );
-    margin-inline-end: var(--utrecht-checkbox-margin-inline-end, 12px);
-  }
-  */
 }
 .utrecht-form-field--radio .utrecht-form-field__label:has(.utrecht-form-field__input) {
   margin-inline-start: calc(-1 * (var(--utrecht-radio-button-size) + var(--utrecht-radio-button-margin-inline-end, 12px)));
@@ -3050,8 +2515,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
 }
 
 .utrecht-form-field__label {
-  /* Assign the margin-block-end to padding instead, so the clickable area of the label increases
-  and we avoid a small gap between the label and input that cannot be clicked to focus the input. */
   grid-area: label;
   margin-block-end: var(--utrecht-form-field-label-margin-block-end);
   margin-block-start: 0;
@@ -3080,29 +2543,14 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
 .utrecht-form-field__description--before {
   grid-area: description-before;
   order: 4;
-}
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/* stylelint-disable-next-line block-no-empty */
-.utrecht-form-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));
+}
+.utrecht-form-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));
 }
 
 .utrecht-form-fieldset--html-fieldset,
 .utrecht-form-fieldset__fieldset--html-fieldset {
-  /* `all: revert` unfortunately has as side-effect that the `hidde` attribute has no effect */
   all: revert;
   border: 0;
   margin-inline-end: 0;
@@ -3156,15 +2604,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   border-inline-start-width: var(--utrecht-form-fieldset-invalid-border-inline-start-width, var(--utrecht-form-field-invalid-border-inline-start-width));
   padding-inline-start: var(--utrecht-form-fieldset-invalid-padding-inline-start, var(--utrecht-form-field-invalid-padding-inline-start));
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
 .utrecht-form-label {
   color: var(--utrecht-form-label-color);
   font-size: var(--utrecht-form-label-font-size);
@@ -3191,21 +2630,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   cursor: var(--utrecht-action-activate-cursor, revert);
   font-weight: var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight));
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- */
-/* stylelint-disable-next-line block-no-empty */
 .utrecht-form-toggle {
   align-items: center;
   block-size: var(--utrecht-form-toggle-height, 2em);
@@ -3233,18 +2657,12 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
     --utrecht-form-toggle-border-radius: var(--utrecht-form-toggle-track-border-radius);
     --utrecht-form-toggle-thumb-background-color: ButtonText;
     --utrecht-form-toggle-thumb-disabled-background-color: GrayText;
-    /* TODO: Apply `GrayText` to the border-color */
     border-color: var(--utrecht-form-toggle-track-disabled-border-color, var(--utrecht-form-toggle-track-border-color));
     border-width: min(var(--utrecht-form-toggle-border-width, 1px), 1px);
-    /* TODO: Find a way to express the `pressed` state */
   }
 }
 
 .utrecht-form-toggle--focus-visible, .utrecht-form-toggle--html-div:focus-visible {
-  /* - 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);
@@ -3267,7 +2685,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
 }
 
 .utrecht-form-toggle__thumb {
-  /* To have a circle or square by default (1:1 aspect ratio) we use the `min-inline-size` design token for both `inline` and `block` direction. */
   background-color: var(--utrecht-form-toggle-thumb-background-color, currentColor);
   border-radius: var(--utrecht-form-toggle-thumb-border-radius, 50%);
   box-shadow: var(--utrecht-form-toggle-thumb-box-shadow);
@@ -3314,10 +2731,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
 }
 
 .utrecht-form-toggle__track--focus-visible {
-  /* - 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);
@@ -3328,26 +2741,19 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
 }
 
 .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox {
-  /* Source: https://kittygiraudel.com/snippets/sr-only-class/ */
   block-size: 1px !important;
   border: 0 !important;
   clip: rect(1px, 1px, 1px, 1px) !important;
   -webkit-clip-path: inset(50%) !important;
   clip-path: inset(50%) !important;
   inline-size: 1px !important;
-  /* stylelint-disable-next-line property-disallowed-list */
   margin: -1px !important;
   overflow: hidden !important;
-  /* stylelint-disable-next-line property-disallowed-list */
   padding: 0 !important;
   position: absolute !important;
   white-space: nowrap !important;
 }
 .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:focus-visible ~ .utrecht-form-toggle__track {
-  /* - 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);
@@ -3356,37 +2762,10 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
 }
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
- */
 .utrecht-form {
   display: block;
   max-inline-size: var(--utrecht-form-max-inline-size);
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021-2022 Frameless B.V.
- */
 .utrecht-heading-1 {
   break-inside: avoid-column;
   page-break-inside: avoid;
@@ -3403,23 +2782,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
 .utrecht-heading-1--distanced {
   --utrecht-space-around: 1;
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021-2022 Frameless B.V.
- */
 .utrecht-heading-2 {
   break-inside: avoid-column;
   page-break-inside: avoid;
@@ -3436,23 +2798,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
 .utrecht-heading-2--distanced {
   --utrecht-space-around: 1;
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021-2022 Frameless B.V.
- */
 .utrecht-heading-3 {
   break-inside: avoid-column;
   page-break-inside: avoid;
@@ -3469,23 +2814,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
 .utrecht-heading-3--distanced {
   --utrecht-space-around: 1;
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021-2022 Frameless B.V.
- */
 .utrecht-heading-4 {
   break-inside: avoid-column;
   page-break-inside: avoid;
@@ -3502,23 +2830,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
 .utrecht-heading-4--distanced {
   --utrecht-space-around: 1;
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021-2022 Frameless B.V.
- */
 .utrecht-heading-5 {
   break-inside: avoid-column;
   page-break-inside: avoid;
@@ -3535,23 +2846,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
 .utrecht-heading-5--distanced {
   --utrecht-space-around: 1;
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021-2022 Frameless B.V.
- */
 .utrecht-heading-6 {
   break-inside: avoid-column;
   page-break-inside: avoid;
@@ -3568,19 +2862,6 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
 .utrecht-heading-6--distanced {
   --utrecht-space-around: 1;
 }
-
-/**
- * @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) 2022 Gemeente Utrecht
- * Copyright (c) 2022 Robbert Broersma
- * Copyright (c) 2022 The Knights Who Say NIH! B.V.
- */
 .utrecht-heading-group {
   --utrecht-pre-heading-order: -1;
   display: flex;
@@ -3591,33 +2872,10 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
 .utrecht-heading-group > * {
   --utrecht-space-around: 0;
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
 .utrecht-iban-data {
-  /* lining-nums: avoid "oldstyle-nums" where some numbers have descenders */
-  /* slashed-zero: avoid confusion between LATIN LETTER O (U+004F) and DIGIT ZERO (U+0030) */
-  /* tabular-nums: vertically align IBAN values */
   font-variant-numeric: lining-nums slashed-zero tabular-nums;
   white-space: nowrap;
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021-2022 Gemeente Utrecht
- * Copyright (c) 2021-2022 Frameless B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021-2022 Gemeente Utrecht
- * Copyright (c) 2021-2022 Frameless B.V.
- */
 .utrecht-icon {
   block-size: var(--utrecht-icon-size);
   color: var(--utrecht-icon-color);
@@ -3629,63 +2887,24 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
 }
 
 .utrecht-icon svg {
-  /*
-   * Override the width of SVGs when they are hardcoded, and avoid oversized SVG icons.
-   * For example:
-   * 
-   *   <svg width="128px" height="128px">
-   */
-  /* stylelint-disable-next-line property-disallowed-list */
   height: 100%;
-  /* Remove tooltip from SVG `<title>` element using `pointer-events: none` */
   pointer-events: none;
-  /* stylelint-disable-next-line property-disallowed-list */
   width: 100%;
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
- */
 .utrecht-img {
-  /* stylelint-disable-next-line property-disallowed-list */
   height: auto;
-  /* stylelint-disable-next-line property-disallowed-list */
   width: auto;
 }
 
 .utrecht-img--scale-down {
-  /* use this class name with caution, text contained in image might become too small to read */
-  /* stylelint-disable-next-line property-disallowed-list */
   max-height: 100%;
-  /* stylelint-disable-next-line property-disallowed-list */
   max-width: 100%;
 }
 
 .utrecht-img--photo {
-  /* stylelint-disable-next-line property-disallowed-list */
   max-height: 100%;
-  /* stylelint-disable-next-line property-disallowed-list */
   max-width: 100%;
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
- */
-/* stylelint-disable-next-line block-no-empty */
 .utrecht-index-char-nav {
   --utrecht-button-padding-inline-start: 1ch;
   --utrecht-button-padding-inline-end: 1ch;
@@ -3704,106 +2923,9 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
 .utrecht-index-char-nav__link--disabled {
   pointer-events: none;
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2022 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2022 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
- */
-/* stylelint-disable-next-line block-no-empty */
-/*
-
-# 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.
-
-*/
-/**
- * Simulate forced-colors mode.
- */
-/* 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 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- */
-/* stylelint-disable-next-line block-no-empty */
 .utrecht-link-button {
   --utrecht-icon-size: var(--utrecht-link-icon-size, 1em);
   color: var(--_utrecht-link-state-color, var(--utrecht-link-color, var(--_utrecht-link-forced-colors-color)));
-  /* Only underline `<a href="...">...</a>`, which matches `a:any-link`.
-   * Do not underline `<a name="">Anchor</a>`.
-   */
   --_utrecht-link-forced-colors-color: linktext;
   text-decoration-color: var(--_utrecht-link-state-text-decoration-color, var(--utrecht-link-text-decoration-color, currentColor));
   text-decoration-line: var(--_utrecht-link-state-text-decoration, var(--utrecht-link-text-decoration, underline));
@@ -3859,14 +2981,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 
 .utrecht-link-button--focus-visible, .utrecht-link-button--html-button:focus-visible {
-  /*
-   * WCAG SC 2.4.12: Focus Not Obscured
-   * Use `z-index` to ensure the focus ring is stacked above adjecent elements with a `background`
-   */
-  /* - 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);
@@ -3893,33 +3007,14 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 
 .utrecht-link-button--pressed {
-  /* Copy `active` styles for now.
-  Later we can decide to:
-  - merge `active` and `pressed` and name the state `pressed`, or:
-  - merge `active` and `pressed` and name the state `active`, or:
-  - style `pressed` like the link state `current`, or:
-  - add `pressed` design tokens
-  */
   --_utrecht-link-forced-colors-color: activetext;
   --_utrecht-link-state-color: var(--utrecht-link-active-color);
 }
 
 .utrecht-link-button--html-button {
   background-color: transparent;
-  /* reset <button> styling */
   border-width: 0;
 }
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- */
-/* reset before other stylesheets */
 .utrecht-link-list--html-ul {
   margin-block-end: 0;
   margin-block-start: 0;
@@ -3932,9 +3027,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 
 .utrecht-link-list {
-  /* TODO: I wish we could make `--utrecht-link-text-decoration` fall back to `var(--utrecht-link-text-decoration)`
-   * when `var(--utrecht-link-list-text-decoration)` is not set.
-   */
   --utrecht-icon-inset-block-start: var(--utrecht-link-list-icon-inset-block-start);
   --utrecht-icon-size: var(--utrecht-link-list-icon-size);
   --utrecht-link-icon-size: var(--utrecht-link-list-icon-size);
@@ -3948,27 +3040,14 @@ however browsers don't seem to have implemented great looking supixel tweening y
 
 .utrecht-link-list__item {
   display: block;
-}
-
-.utrecht-link-list__link {
-  align-items: baseline;
-  column-gap: var(--utrecht-link-list-link-column-gap);
-  display: inline-flex;
-  font-weight: var(--utrecht-link-list-link-font-weight);
-}
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2022 The Knights Who Say NIH! B.V.
- * Copyright (c) 2022 Gemeente Utrecht
- */
-/* stylelint-disable scss/no-global-function-names */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- */
-/* stylelint-disable-next-line block-no-empty */
+}
+
+.utrecht-link-list__link {
+  align-items: baseline;
+  column-gap: var(--utrecht-link-list-link-column-gap);
+  display: inline-flex;
+  font-weight: var(--utrecht-link-list-link-font-weight);
+}
 .utrecht-link-social {
   --utrecht-icon-size: var(--utrecht-link-social-icon-size);
   --utrecht-icon-color: currentColor;
@@ -3994,10 +3073,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
 
 .utrecht-link-social:focus-visible,
 .utrecht-link-social--focus-visible {
-  /* - 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);
@@ -4010,107 +3085,12 @@ however browsers don't seem to have implemented great looking supixel tweening y
 .utrecht-link-social--distanced {
   margin-inline-start: var(--utrecht-link-social-margin-inline-start);
 }
-
-/**
- * @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
- */
-/* stylelint-disable-next-line block-no-empty */
-/**
- * @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
- */
-/* stylelint-disable-next-line block-no-empty */
-/*
-
-# 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.
-
-*/
-/**
- * Simulate forced-colors mode.
- */
-/* 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.
- */
 .utrecht-link {
   --utrecht-icon-size: var(--utrecht-link-icon-size, 1em);
   color: var(--_utrecht-link-state-color, var(--utrecht-link-color, var(--_utrecht-link-forced-colors-color)));
 }
 
 .utrecht-link:any-link {
-  /* Only underline `<a href="...">...</a>`, which matches `a:any-link`.
-   * Do not underline `<a name="">Anchor</a>`.
-   */
   --_utrecht-link-forced-colors-color: linktext;
   text-decoration-color: var(--_utrecht-link-state-text-decoration-color, var(--utrecht-link-text-decoration-color, currentColor));
   text-decoration-line: var(--_utrecht-link-state-text-decoration, var(--utrecht-link-text-decoration, underline));
@@ -4133,8 +3113,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   --_utrecht-link-forced-colors-color: visitedtext;
   --_utrecht-link-state-color: var(--utrecht-link-visited-color);
 }
-
-/* `:hover` should only apply to links with `href`, not on disabled links */
 .utrecht-link--html-a:any-link:hover,
 .utrecht-link--hover {
   --_utrecht-link-forced-colors-color: linktext;
@@ -4155,14 +3133,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 
 .utrecht-link--focus-visible {
-  /*
-   * WCAG SC 2.4.12: Focus Not Obscured
-   * Use `z-index` to ensure the focus ring is stacked above adjecent elements with a `background`
-   */
-  /* - 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);
@@ -4172,8 +3142,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   outline-width: var(--utrecht-focus-outline-width, revert);
   z-index: var(--utrecht-stack-focus-z-index, 1);
 }
-
-/* `:focus` should only apply to links with `href`, not on disabled links */
 .utrecht-link--html-span:focus,
 .utrecht-link--html-a:any-link:focus {
   --_utrecht-link-state-color: var(--utrecht-link-focus-color);
@@ -4182,14 +3150,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   background-color: var(--utrecht-link-focus-background-color, transparent);
   text-decoration-skip: none;
   text-decoration-skip-ink: none;
-  /*
-   * WCAG SC 2.4.12: Focus Not Obscured
-   * Use `z-index` to ensure the focus ring is stacked above adjecent elements with a `background`
-   */
-  /* - 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);
@@ -4202,7 +3162,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
 
 .utrecht-link--html-span:focus:not(:focus-visible),
 .utrecht-link--html-a:any-link:focus:not(:focus-visible) {
-  /* undo focus ring */
   box-shadow: none;
   outline-style: revert;
 }
@@ -4239,15 +3198,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   font-weight: var(--utrecht-link-placeholder-font-weight);
   text-decoration-line: none;
 }
-
-/**
- * Simulate forced-colors mode.
- */
 .utrecht-link--forced-colors {
-  /* Some others choose `transparent` to trigger `currentColor` for `inverse-outline-color`,
-   * however this doesn't guarantee significant contrast between `outline-color` and `inverse-outline-color`.
-   * That's why we use `Highlight` vs `HighlightText`.
-   */
   --utrecht-focus-outline-color: Highlight;
   --utrecht-focus-inverse-outline-color: HighlightText;
   --utrecht-link-color: linktext;
@@ -4257,12 +3208,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   --utrecht-link-visited-color: visitedtext;
   --utrecht-link-placeholder-color: GrayText;
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
- * Copyright (c) 2021 Gemeente Utrecht
- */
 .utrecht-list-social {
   display: flex;
   margin-block-end: var(--utrecht-list-social-margin-block-end);
@@ -4278,22 +3223,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
 .utrecht-list-social__item:last-child {
   margin-inline-end: 0;
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2023 Frameless B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2023 Frameless B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- */
-/* stylelint-disable-next-line block-no-empty */
-/* order is after default option styling */
 .utrecht-listbox {
   --utrecht-listbox-max-block-size: 300px;
   background-color: var(--utrecht-listbox-background-color);
@@ -4319,7 +3248,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 @media (forced-colors: active) {
   .utrecht-listbox {
-    /* Use inversed disabled colors for selected options */
     --utrecht-listbox-option-selected-background-color: Highlight;
     --utrecht-listbox-option-selected-color: HighlightText;
     --utrecht-listbox-option-disabled-background-color: field;
@@ -4330,14 +3258,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 
 .utrecht-listbox--focus {
-  /* TODO: Implement CSS of focus listbox */
 }
 
 .utrecht-listbox--focus-visible {
-  /* - 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);
@@ -4348,11 +3271,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 
 .utrecht-listbox--invalid {
-  /* TODO: Implement CSS of invalid listbox */
 }
 
 .utrecht-listbox--read-only {
-  /* TODO: Implement CSS of read-only listbox */
 }
 
 .utrecht-listbox__list {
@@ -4402,7 +3323,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 @media (forced-colors: active) {
   .utrecht-listbox__option {
-    /* Fix rendering glitch in Google Chrome, where the text became black on a black background */
     forced-color-adjust: none;
   }
 }
@@ -4423,10 +3343,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 
 .utrecht-listbox__option--focus-visible {
-  /* - 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);
@@ -4434,7 +3350,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   outline-offset: var(--utrecht-focus-outline-offset, revert);
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
-  /* ensure the focus outline is rendered inside the `overflow` container */
   --utrecht-focus-outline-offset: calc(var(--utrecht-focus-outline-width) * -1);
 }
 
@@ -4462,12 +3377,10 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 
 .utrecht-listbox--disabled {
-  /* TODO: Implement CSS of disabled listbox */
   cursor: var(--utrecht-action-disabled-cursor, not-allowed);
 }
 @media (forced-colors: active) {
   .utrecht-listbox--disabled {
-    /* Use inversed disabled colors for selected options */
     --utrecht-listbox-option-selected-background-color: GrayText;
     --utrecht-listbox-option-selected-color: field;
     --utrecht-listbox-option-background-color: field;
@@ -4478,13 +3391,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 
 .utrecht-listbox--html-div:focus {
-  /* TODO: Implement CSS of focus listbox */
 }
 .utrecht-listbox--html-div:focus-visible {
-  /* - 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);
@@ -4493,11 +3401,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
 .utrecht-logo-button {
   --utrecht-icon-size: var(--utrecht-logo-button-icon, 50px);
   --utrecht-button-min-block-size: var(--utrecht-logo-button-block-size, 50px);
@@ -4507,13 +3410,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   display: inline-flex;
   gap: var(--utrecht-space-inline-sm);
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- */
-/* stylelint-disable-next-line block-no-empty */
 .utrecht-logo-image__decoration-1 {
   fill: var(--utrecht-logo-decoration-1-color, #fff);
 }
@@ -4525,17 +3421,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
 .utrecht-logo-image__decoration-3 {
   fill: var(--utrecht-logo-decoration-3-color, #ffb70b);
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- */
 .utrecht-logo {
   display: block;
   max-block-size: var(--utrecht-logo-max-block-size, 192px);
@@ -4543,24 +3428,11 @@ however browsers don't seem to have implemented great looking supixel tweening y
   min-block-size: var(--utrecht-logo-min-block-size);
   min-inline-size: var(--utrecht-logo-min-inline-size);
 }
-
-/* The element in side `<div class="utrecht-logo">` can be an `<img>`, `<svg>` or even a custom element. */
 .utrecht-logo > * {
   block-size: 100%;
   display: inline-block;
   inline-size: auto;
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2022 Gemeente Utrecht
- * Copyright (c) 2022 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2022 Gemeente Utrecht
- * Copyright (c) 2022 Robbert Broersma
- */
 .utrecht-map-marker {
   --utrecht-icon-size: var(--utrecht-map-marker-icon-size);
   align-items: center;
@@ -4576,17 +3448,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   inline-size: var(--utrecht-map-marker-size);
   justify-content: center;
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- */
-/* stylelint-disable-next-line block-no-empty */
 .utrecht-mapcontrolbutton {
   --utrecht-icon-size: var(--utrecht-mapcontrolbutton-min-block-size);
   --utrecht-icon-color: var(--utrecht-mapcontrolbutton-color);
@@ -4617,10 +3478,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 
 .utrecht-mapcontrolbutton--focus-visible, .utrecht-mapcontrolbutton:focus:not(:disabled, [aria-disabled=true], .utrecht-mapcontrolbutton--disabled) {
-  /* - 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);
@@ -4633,11 +3490,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
 .utrecht-mapcontrolbutton--focus, .utrecht-mapcontrolbutton:focus:not(:disabled, [aria-disabled=true], .utrecht-mapcontrolbutton--disabled) {
   --utrecht-icon-color: var(--utrecht-mapcontrolbutton-focus-color, var(--utrecht-mapcontrolbutton-color));
 }
-
-/* override the `:focus` selector above */
-/* stylelint-disable-next-line no-descending-specificity */
 .utrecht-mapcontrolbutton:focus:not(:focus-visible) {
-  /* undo focus ring */
   box-shadow: none;
   outline-style: revert;
 }
@@ -4653,17 +3506,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   padding-inline-end: var(--utrecht-mapcontrolbutton-label-margin-inline-end);
   padding-inline-start: var(--utrecht-mapcontrolbutton-label-margin-inline-start);
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
- * Copyright (c) 2021 Gemeente Utrecht
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- */
 .utrecht-mark {
   background-color: var(--utrecht-mark-background-color, revert);
   color: var(--utrecht-mark-color, revert);
@@ -4681,30 +3523,15 @@ however browsers don't seem to have implemented great looking supixel tweening y
     color: HighlightText;
   }
 }
-
-/* class name available only for Storybook */
 .utrecht-mark--print {
   outline-color: currentColor;
   outline-style: dotted;
   outline-width: 0.1em;
 }
-
-/* class name available only for Storybook */
 .utrecht-mark--windows-high-contrast {
   background-color: Highlight;
   color: HighlightText;
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- */
-/* stylelint-disable-next-line block-no-empty */
 .utrecht-menulijst {
   border-block-end: var(--utrecht-border-width-md) solid var(--utrecht-color-grey-90);
   border-block-start: var(--utrecht-border-width-md) solid var(--utrecht-color-grey-90);
@@ -4736,10 +3563,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 
 .utrecht-menulijst__link--focus-visible, .utrecht-menulijst__link: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);
@@ -4750,24 +3573,11 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 
 .utrecht-menulijst__link:focus:not(:focus-visible) {
-  /* undo focus ring */
   box-shadow: none;
   outline-style: revert;
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
- * Copyright (c) 2021 Gemeente Utrecht
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- */
 .utrecht-multiline-data {
   white-space: pre-line;
-  /* stylelint-disable-next-line property-no-unknown */
   white-space-collapse: preserve-breaks;
 }
 
@@ -4776,12 +3586,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   margin-block-end: 0;
   margin-block-start: 0;
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- */
 .utrecht-nav-bar {
   background-color: var(--utrecht-nav-bar-background-color);
   color: var(--utrecht-nav-bar-color);
@@ -4793,7 +3597,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
     border-block-end-color: currentColor;
     border-block-end-style: solid;
     border-block-end-width: 1px;
-    /* add `padding` in `forced-colors` mode to make room for contrasting focus ring */
     border-block-start-color: currentColor;
     border-block-start-style: solid;
     border-block-start-width: 1px;
@@ -4809,19 +3612,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
   flex-wrap: wrap;
   inline-size: 100%;
   justify-content: space-between;
-  /* Wrap content to accomodate:
-    * - 400% zoom
-    * - longer text due to automatic translation
-    * - longer text due to editorial content requirements
-    */
   max-inline-size: var(--utrecht-nav-bar-content-max-inline-size);
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- */
 .utrecht-nav-list {
   margin-block-end: 0;
   margin-block-start: 0;
@@ -4845,8 +3637,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   list-style: none;
   display: inline-flex;
 }
-
-/* Style for the navigation links */
 .utrecht-nav-list__link {
   font-weight: var(--utrecht-nav-list-link-font-weight);
   max-inline-size: var(--utrecht-nav-bar-link-max-inline-size, 30ch);
@@ -4856,18 +3646,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   padding-inline-start: var(--utrecht-nav-bar-link-padding-inline-start);
   text-decoration: none;
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
- * Copyright (c) 2021 Gemeente Utrecht
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- */
-/* stylelint-disable-next-line block-no-empty */
 .utrecht-sidenav {
   --utrecht-sidenav-connection-color: var(--utrecht-sidenav-item-marker-color);
   --utrecht-sidenav-connection-inline-size: 2px;
@@ -4912,10 +3690,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
 .utrecht-sidenav__item--last {
   border-block-end: none;
 }
-
-/* draw the li item box bottom line */
 .utrecht-sidenav__item-separator:not(.utrecht-sidenav__item--last .utrecht-sidenav__item-separator) {
-  /* .utrecht-sidenav__item--parent span */
   border-block-end: 1px solid var(--utrecht-color-grey-80);
   display: block;
   margin-inline-start: var(--utrecht-space-inline-lg);
@@ -4938,10 +3713,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 
 .utrecht-sidenav__link--focus-visible, .utrecht-sidenav__link: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);
@@ -4950,13 +3721,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
 }
-
-/* Remove bottom padding form first item in list with children */
 .utrecht-sidenav__link--parent {
   padding-block-end: 0;
 }
-
-/* Draw metro connection lines on sidenav link items */
 .utrecht-sidenav__connection, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:not(.utrecht-sidenav__link--sibling,
 .utrecht-sidenav__link--parent,
 .utrecht-sidenav__link--child)::after {
@@ -4978,24 +3745,19 @@ however browsers don't seem to have implemented great looking supixel tweening y
 .utrecht-sidenav__connection--sibling {
   display: none;
 }
-
-/* Dot for link with siblings */
-/* Little fix to move the dot to the right */
 .utrecht-sidenav__marker, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link::before {
   background-color: var(--utrecht-sidenav-item-marker-color);
   block-size: var(--utrecht-sidenav-marker-height);
   border-radius: 100%;
   content: "";
   inline-size: 8px;
-  inset-block-start: 20px; /* Hard value? */
+  inset-block-start: 20px;
   inset-inline-start: var(--utrecht-sidenav-marker-offset);
   overflow: hidden;
   position: absolute;
   transform: translateY(-50%) translateX(calc(-1 * var(--utrecht-sidenav-marker-offset)));
   z-index: 10;
 }
-
-/* Add dot bullets on child links */
 .utrecht-sidenav__marker--child, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child::before {
   background-color: transparent;
   block-size: 4px;
@@ -5005,8 +3767,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   inset-inline-start: 1.2rem;
   transform: translateY(-50%) translateX(-19.5px);
 }
-
-/* selector must override .utrecht-sidenav__marker--child */
 .utrecht-sidenav__marker--current, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--current::before,
 .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--current-child::before {
   background-color: var(--utrecht-sidenav-marker-current-color);
@@ -5028,43 +3788,24 @@ however browsers don't seem to have implemented great looking supixel tweening y
 .utrecht-sidenav__link--current-child {
   font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
 }
-
-/* Hover layout for mousover on sidenav__link */
 .utrecht-sidenav__marker--hover, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover::before, .utrecht-sidenav__link:hover .utrecht-sidenav__marker, .utrecht-sidenav__link:hover .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover .utrecht-sidenav__link::before {
   background-color: var(--utrecht-sidenav-link-hover-color);
 }
-
-/* Hover layout for mousover on child__link */
 .utrecht-sidenav__marker--child.utrecht-sidenav__marker--hover, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__marker--child.utrecht-sidenav__link:hover::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__marker--hover.utrecht-sidenav__link--child::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child.utrecht-sidenav__link:hover::before, .utrecht-sidenav__link:hover .utrecht-sidenav__marker--child.utrecht-sidenav__marker, .utrecht-sidenav__link:hover .utrecht-sidenav--pseudo-elements .utrecht-sidenav__marker.utrecht-sidenav__link--child::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover .utrecht-sidenav__marker.utrecht-sidenav__link--child::before, .utrecht-sidenav__link:hover .utrecht-sidenav--pseudo-elements .utrecht-sidenav__marker--child.utrecht-sidenav__link::before, .utrecht-sidenav__link:hover .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link.utrecht-sidenav__link--child::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover .utrecht-sidenav__marker--child.utrecht-sidenav__link::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover .utrecht-sidenav__link.utrecht-sidenav__link--child::before {
   background-color: var(--utrecht-sidenav-link-hover-color);
   border: 2px solid var(--utrecht-sidenav-link-hover-color);
 }
 
 .utrecht-sidenav--pseudo-elements {
-  /* stylelint-disable selector-pseudo-class-parentheses-space-inside */
-  /* stylelint-enable selector-pseudo-class-parentheses-space-inside */
 }
 .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child::after {
   display: none;
 }
 
 .utrecht-sidenav__link:focus:not(:focus-visible) {
-  /* undo focus ring */
   box-shadow: none;
   outline-style: revert;
 }
-
-/**
- * @license EUPL-1.2
- * 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
- */
-/* stylelint-disable-next-line block-no-empty */
 .utrecht-navhtml {
   font-family: var(--utrecht-document-font-family);
 }
@@ -5122,10 +3863,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 
 .utrecht-topnav__link--focus-visible, .utrecht-topnav__link: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);
@@ -5136,21 +3873,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 
 .utrecht-topnav__link:focus:not(:focus-visible) {
-  /* undo focus ring */
   box-shadow: none;
   outline-style: revert;
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
- */
 .utrecht-number-data {
   font-variant-numeric: lining-nums tabular-nums;
 }
@@ -5162,20 +3887,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
 .utrecht-number-data--negative {
   color: var(--utrecht-number-data-negative-color);
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- * Copyright (c) 2021 Gemeente Utrecht
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- * Copyright (c) 2021 Gemeente Utrecht
- */
 .utrecht-ordered-list,
 .utrecht-ordered-list--html-content ol {
-  /* Configure `box-sizing` and `text-align` for `--center` */
   box-sizing: border-box;
   font-family: var(--utrecht-document-font-family, inherit);
   font-size: var(--utrecht-ordered-list-font-size, var(--utrecht-unordered-list-font-size, var(--utrecht-document-font-size, inherit)));
@@ -5208,17 +3921,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   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));
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- */
 .utrecht-page-content {
   padding-block-end: var(--utrecht-page-content-padding-block-end);
   padding-block-start: var(--utrecht-page-content-padding-block-start);
@@ -5233,17 +3935,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
 .utrecht-page-content__aside {
   grid-area: aside;
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- */
 .utrecht-page-footer {
   --utrecht-document-color: currentColor;
   --utrecht-heading-color: currentColor;
@@ -5264,22 +3955,10 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 
 .utrecht-page-footer__address--reset-address {
-  /* reset <address> */
   font-style: inherit;
   margin-block-end: 0;
   margin-block-start: 0;
-}
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- */
+}
 .utrecht-page-header {
   background-color: var(--utrecht-page-header-background-color);
   color: var(--utrecht-page-header-color);
@@ -5293,17 +3972,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
 .utrecht-page-header__content {
   max-inline-size: var(--utrecht-page-max-inline-size);
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- */
 .utrecht-page {
   margin-inline-end: auto;
   margin-inline-start: auto;
@@ -5318,21 +3986,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   max-inline-size: var(--utrecht-page-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
- */
-/* stylelint-disable-next-line block-no-empty */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-
 .utrecht-pagination {
   font-family: var(--utrecht-pagination-font-family, var(--utrecht-document-font-family));
   font-size: var(--utrecht-pagination-font-size, var(--utrecht-document-font-family));
@@ -5416,10 +4069,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
 
 .utrecht-pagination__page-link:focus,
 .utrecht-pagination__relative-link: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);
@@ -5431,19 +4080,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
 
 .utrecht-pagination__page-link:focus:not(:focus-visible),
 .utrecht-pagination__relative-link:focus:not(:focus-visible) {
-  /* undo focus ring */
   box-shadow: none;
   outline-style: revert;
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
- */
 .utrecht-paragraph {
   color: var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit));
   font-family: var(--utrecht-paragraph-font-family, var(--utrecht-document-font-family, inherit));
@@ -5479,17 +4118,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
 .utrecht-paragraph--distanced {
   --utrecht-space-around: 1;
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- */
 .utrecht-pre-heading {
   color: var(--utrecht-pre-heading-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
   font-family: var(--utrecht-pre-heading-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
@@ -5504,47 +4132,11 @@ however browsers don't seem to have implemented great looking supixel tweening y
 .utrecht-pre-heading--distanced {
   --utrecht-space-around: 1;
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
- */
 .utrecht-preserve-data {
   unicode-bidi: isolate;
-  /* stylelint-disable-next-line property-no-unknown */
   white-space-collapse: preserve-spaces;
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- */
-/* stylelint-disable-next-line block-no-empty */
-/* stylelint-disable-next-line block-no-empty */
 .utrecht-radio-button {
-  /*
-   * Use 24x24px as hardcoded minimum target size, to meet WCAG 2.5.8 standards.
-   * https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html
-   */
-  /*
-   * For the `radial-gradient()` use a 5% gradient size to improve anti-aliasing.
-   * With a 0% gradient, the circle will have jagged edges.
-   */
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -5650,10 +4242,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 
 .utrecht-radio-button--focus-visible {
-  /* - 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);
@@ -5683,28 +4271,18 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 
 .utrecht-radio-button--disabled {
-  /*
-   * The disabled radio button should have:
-   * - should have no active effect
-   * - should have no focus effect
-   * - should have no hover effect
-   * - should have a working focus-visible effect, in case someone sets `<input type="radio" disabled tabindex="0">`
-   */
   --_utrecht-radio-button-background-color: var(--utrecht-radio-button-disabled-background-color);
   --_utrecht-radio-button-border-color: var(--utrecht-radio-button-disabled-border-color);
   --_utrecht-radio-button-border-width: var(--utrecht-radio-button-disabled-border-width);
   --_utrecht-radio-button-color: var(--utrecht-radio-button-disabled-color);
-  /* no focus effect */
   --_utrecht-radio-button-focus-background-color: var(--_utrecht-radio-button-background-color);
   --_utrecht-radio-button-focus-border-color: var(--_utrecht-radio-button-border-color);
   --_utrecht-radio-button-focus-border-width: var(--_utrecht-radio-button-border-width);
   --_utrecht-radio-button-focus-color: var(--_utrecht-radio-button-color);
-  /* no active effect */
   --_utrecht-radio-button-active-background-color: var(--_utrecht-radio-button-background-color);
   --_utrecht-radio-button-active-border-color: var(--_utrecht-radio-button-border-color);
   --_utrecht-radio-button-active-border-width: var(--_utrecht-radio-button-border-width);
   --_utrecht-radio-button-active-color: var(--_utrecht-radio-button-color);
-  /* no hover effect */
   --_utrecht-radio-button-hover-background-color: var(--_utrecht-radio-button-background-color);
   --_utrecht-radio-button-hover-border-color: var(--_utrecht-radio-button-border-color);
   --_utrecht-radio-button-hover-border-width: var(--_utrecht-radio-button-border-width);
@@ -5719,8 +4297,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 
 .utrecht-radio-button--html-input {
-  /* override the `:focus` selector above */
-  /* stylelint-disable-next-line no-descending-specificity */
 }
 .utrecht-radio-button--html-input:checked {
   --_utrecht-radio-button-icon-size: var(--utrecht-radio-button-icon-size, 50%);
@@ -5742,28 +4318,18 @@ however browsers don't seem to have implemented great looking supixel tweening y
   --_utrecht-radio-button-state-hover-color: var(--utrecht-radio-button-checked-hover-color);
 }
 .utrecht-radio-button--html-input:disabled {
-  /*
-   * The disabled radio button should have:
-   * - should have no active effect
-   * - should have no focus effect
-   * - should have no hover effect
-   * - should have a working focus-visible effect, in case someone sets `<input type="radio" disabled tabindex="0">`
-   */
   --_utrecht-radio-button-background-color: var(--utrecht-radio-button-disabled-background-color);
   --_utrecht-radio-button-border-color: var(--utrecht-radio-button-disabled-border-color);
   --_utrecht-radio-button-border-width: var(--utrecht-radio-button-disabled-border-width);
   --_utrecht-radio-button-color: var(--utrecht-radio-button-disabled-color);
-  /* no focus effect */
   --_utrecht-radio-button-focus-background-color: var(--_utrecht-radio-button-background-color);
   --_utrecht-radio-button-focus-border-color: var(--_utrecht-radio-button-border-color);
   --_utrecht-radio-button-focus-border-width: var(--_utrecht-radio-button-border-width);
   --_utrecht-radio-button-focus-color: var(--_utrecht-radio-button-color);
-  /* no active effect */
   --_utrecht-radio-button-active-background-color: var(--_utrecht-radio-button-background-color);
   --_utrecht-radio-button-active-border-color: var(--_utrecht-radio-button-border-color);
   --_utrecht-radio-button-active-border-width: var(--_utrecht-radio-button-border-width);
   --_utrecht-radio-button-active-color: var(--_utrecht-radio-button-color);
-  /* no hover effect */
   --_utrecht-radio-button-hover-background-color: var(--_utrecht-radio-button-background-color);
   --_utrecht-radio-button-hover-border-color: var(--_utrecht-radio-button-border-color);
   --_utrecht-radio-button-hover-border-width: var(--_utrecht-radio-button-border-width);
@@ -5794,10 +4360,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   );
 }
 .utrecht-radio-button--html-input:focus-visible {
-  /* - 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);
@@ -5842,12 +4404,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
     var(--utrecht-radio-button-active-color)
   );
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2024-2025 Gemeente Utrecht
- * Copyright (c) 2024-2025 Frameless B.V.
- */
 .utrecht-rich-text {
   --utrecht-space-around: 1;
 }
@@ -7606,21 +6162,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
 .utrecht-rich-text .utrecht-unordered-list:has(+ .utrecht-unordered-list) {
   --utrecht-unordered-list-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
 }
-
-/**
- * @license EUPL-1.2
- * 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
- */
-/* stylelint-disable-next-line block-no-empty */
 .utrecht-search-bar {
   --utrecht-button-border-color: var(--utrecht-search-bar-button-border-color);
   --utrecht-button-hover-scale: var(--utrecht-search-bar-hover-transform);
@@ -7684,31 +6225,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   background-color: var(--utrecht-search-bar-list-item-is-selected-background-color);
   color: var(--utrecht-search-bar-list-item-is-selected-color);
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- */
-/* stylelint-disable-next-line block-no-empty */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- */
-/* stylelint-disable-next-line block-no-empty */
-/* TODO: Enable ordering properties when the plugin supports logical CSS properties
- * https://github.com/hudochenkov/stylelint-order/pull/162 */
-/* stylelint-disable order/properties-alphabetical-order */
-/* stylelint-disable-next-line block-no-empty */
 .utrecht-select {
   background-color: var(--utrecht-select-background-color, var(--utrecht-form-control-background-color));
   border-block-end-width: var(--utrecht-select-border-block-end-width, var(--utrecht-select-border-width, var(--utrecht-form-control-border-width)));
@@ -7745,10 +6261,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 
 .utrecht-select--focus-visible {
-  /* - 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);
@@ -7775,19 +6287,12 @@ however browsers don't seem to have implemented great looking supixel tweening y
   border-block-end-width: var(--utrecht-select-invalid-border-block-end-width, var(--utrecht-form-control-invalid-border-block-end-width, var(--utrecht-select-border-block-end-width, var(--utrecht-form-control-border-block-end-width, var(--_utrecht-select-border-width)))));
   border-color: var(--utrecht-select-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
 }
-
-/* stylelint-disable-next-line block-no-empty */
 .utrecht-select--html-select {
-  /* <select> does not have a `readonly` attribute */
 }
 .utrecht-select--html-select:focus {
   background-color: var(--utrecht-select-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
   border-color: var(--utrecht-select-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
   color: var(--utrecht-select-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-select-color, var(--utrecht-form-control-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);
@@ -7797,7 +6302,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   outline-width: var(--utrecht-focus-outline-width, revert);
 }
 .utrecht-select--html-select:focus:not(:focus-visible) {
-  /* undo focus ring */
   box-shadow: none;
   outline-style: revert;
 }
@@ -7817,19 +6321,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   background-repeat: no-repeat;
   background-size: 1.4em;
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
- */
 .utrecht-separator {
   border-color: var(--utrecht-separator-color);
   border-style: solid;
@@ -7841,31 +6332,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
 .utrecht-separator--distanced {
   --utrecht-space-around: 1;
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
- */
-/**
- * @license EUPL-1.2
- * 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
- */
-/* stylelint-disable-next-line block-no-empty */
 .utrecht-skip-link {
-  /* Use `ButtonFace` as default `background-color`
-   * to ensure the skip link is not transparent and unreadable
-   * when CSS variables are not defined.
-   * 
-   * My only concern with this is that it makes it look like a button,
-   * and it implies the `Space` button should work, but it won't work.
-   */
   align-items: center;
   background-color: var(--utrecht-skip-link-background-color, ButtonFace);
   box-sizing: border-box;
@@ -7892,10 +6359,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 
 .utrecht-skip-link--visible-on-focus:focus {
-  /**
-   * WCAG 2.2 / 2.4.12: "No part of the focus indicator is hidden by author-created content".
-   * To go the extra mile, ensure the focus indicator is inside the viewport.
-   * */
   --_utrecht-skip-link-inset: calc(var(--utrecht-focus-outline-width, 0px) + var(--utrecht-focus-outline-offset, 0px));
   inset-block-start: var(--_utrecht-skip-link-inset, 0);
   inset-inline-start: var(--_utrecht-skip-link-inset, 0);
@@ -7904,10 +6367,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 
 .utrecht-skip-link--visible {
-  /**
-   * WCAG 2.2 / 2.4.12: "No part of the focus indicator is hidden by author-created content".
-   * To go the extra mile, ensure the focus indicator is inside the viewport.
-   * */
   --_utrecht-skip-link-inset: calc(var(--utrecht-focus-outline-width, 0px) + var(--utrecht-focus-outline-offset, 0px));
   inset-block-start: var(--_utrecht-skip-link-inset, 0);
   inset-inline-start: var(--_utrecht-skip-link-inset, 0);
@@ -7918,10 +6377,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
 .utrecht-skip-link--focus,
 .utrecht-skip-link:focus,
 .utrecht-skip-link:focus-visible {
-  /* - 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);
@@ -7931,17 +6386,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   outline-width: var(--utrecht-focus-outline-width, revert);
   text-decoration: var(--utrecht-skip-link-focus-text-decoration);
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
- */
 .utrecht-spotlight-section {
   background-color: var(--_utrecht-spotlight-section-background-color, var(--utrecht-spotlight-section-background-color));
   border-color: var(--_utrecht-spotlight-section-border-color, var(--utrecht-spotlight-section-border-color));
@@ -7971,15 +6415,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   --_utrecht-spotlight-section-border-width: var(--utrecht-spotlight-section-warning-border-width);
   --_utrecht-spotlight-section-color: var(--utrecht-spotlight-section-warning-color);
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
 .utrecht-surface {
   background-color: var(--utrecht-surface-background-color, inherit);
   color: var(--utrecht-surface-color, inherit);
@@ -7991,17 +6426,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   margin-inline-end: 0;
   margin-inline-start: 0;
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/* stylelint-disable-next-line block-no-empty */
-/* stylelint-disable-next-line block-no-empty */
 .utrecht-table-container--overflow-inline {
   background-attachment: local, local, scroll, scroll;
   background-image: linear-gradient(to right, white, white), linear-gradient(to right, white, white), linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0));
@@ -8012,9 +6436,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 
 .utrecht-table {
-  /* `border-collapse: collapse` results in a broken border for sticky header and sticky footer.
-   * Therefore we need to use `border-collapse: separate` instead.
-   */
   border-collapse: separate;
   border-color: var(--utrecht-table-border-color, 0);
   border-spacing: 0;
@@ -8117,10 +6538,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-
-/* `.utrecht-table--html-table` should not affect nested tables.
- * We will use the `>` direct descendant selector so the styling doesn't affect nested tables. */
-/* stylelint-disable no-descending-specificity */
 .utrecht-table--html-table > tr,
 .utrecht-table--html-table > thead > tr,
 .utrecht-table--html-table > tbody > tr,
@@ -8141,7 +6558,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
 .utrecht-table--html-table > tfoot > tr > th,
 .utrecht-table__header-cell {
   --utrecht-icon-size: var(--utrecht-table-cell-icon-size);
-  /* In tables `block-size` acts as `min-block-size`, but `min-block-size` is a clearer name for the design token */
   block-size: var(--utrecht-table-cell-line-height, 1em);
   line-height: var(--utrecht-table-cell-line-height, inherit);
   padding-block-end: var(--utrecht-table-cell-padding-block-end, 0);
@@ -8184,7 +6600,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
 .utrecht-table--html-table > tfoot > tr > td,
 .utrecht-table__cell {
   --utrecht-icon-size: var(--utrecht-table-cell-icon-size);
-  /* In tables `block-size` acts as `min-block-size`, but `min-block-size` is a clearer name for the design token */
   block-size: var(--utrecht-table-cell-line-height, 1em);
   line-height: var(--utrecht-table-cell-line-height, inherit);
   padding-block-end: var(--utrecht-table-cell-padding-block-end, 0);
@@ -8218,12 +6633,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
   background-color: var(--utrecht-table-cell-selected-background-color, highlight);
   color: var(--utrecht-table-cell-selected-color, highlightText);
 }
-
-/* stylelint-enable no-descending-specificity */
 .utrecht-table__header-cell--numeric-column,
 .utrecht-table__cell--numeric-column {
   --_utrecht-table-cell-text-align: right;
-  /* stylelint-disable-next-line declaration-property-value-disallowed-list */
   text-align: var(--_utrecht-table-cell-text-align);
 }
 
@@ -8266,8 +6678,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
 .utrecht-table__header-cell-button {
   justify-content: var(--_utrecht-table-cell-text-align, start);
 }
-
-/* stylelint-disable-next-line block-no-empty */
 .utrecht-table__data--truncate {
   display: block;
   max-inline-size: 100%;
@@ -8289,7 +6699,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   inline-size: 1px;
   outline: 1px solid red;
   overflow: hidden;
-  /* stylelint-disable-next-line property-disallowed-list */
   padding: 0;
   position: absolute;
   white-space: nowrap;
@@ -8319,34 +6728,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
   background-color: papayawhip;
   color: maroon;
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- */
-/* stylelint-disable-next-line block-no-empty */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- */
-/* stylelint-disable-next-line block-no-empty */
-/* TODO: Enable ordering properties when the plugin supports logical CSS properties
- * https://github.com/hudochenkov/stylelint-order/pull/162 */
-/* stylelint-disable order/properties-alphabetical-order */
 .utrecht-textarea {
-  /* Fall back to `resize: vertical` for browsers that don't support `resize: block` */
   background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));
-  block-size: initial; /* harden */
+  block-size: initial;
   border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));
   border-block-end-width: var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));
   border-color: var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color));
@@ -8356,7 +6740,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   color: var(--utrecht-textarea-color, var(--utrecht-form-control-color));
   font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-control-font-family));
   font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-control-font-size, inherit));
-  font-weight: initial; /* harden */
+  font-weight: initial;
   inline-size: 100%;
   line-height: var(--utrecht-textarea-line-height, initial);
   max-inline-size: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-control-max-inline-size));
@@ -8399,10 +6783,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 
 .utrecht-textarea--focus-visible {
-  /* - 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);
@@ -8425,21 +6805,11 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 
 .utrecht-textarea--html-textarea {
-  /* The `textarea:read-only` pseudo selector applies to both `<textarea readonly>` and `<textarea disabled>` */
-  /*
-   * The `textarea:disabled` pseudo selector applies to `<textarea disabled>`, but not to `<textarea aria-disabled="true">`
-   *
-   * We consider `disabled` more specific than `read-only`, so the `:disabled` selector should come after the `:read-only` selector.
-   */
 }
 .utrecht-textarea--html-textarea:focus {
   background-color: var(--utrecht-textarea-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
   border-color: var(--utrecht-textarea-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
   color: var(--utrecht-textarea-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-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);
@@ -8449,7 +6819,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   outline-width: var(--utrecht-focus-outline-width, revert);
 }
 .utrecht-textarea--html-textarea:focus:not(:focus-visible) {
-  /* undo focus ring */
   box-shadow: none;
   outline-style: revert;
 }
@@ -8483,46 +6852,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
   font-style: var(--utrecht-form-control-placeholder-font-style);
   opacity: 100%;
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- */
-/* stylelint-disable-next-line block-no-empty */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- */
-/* stylelint-disable-next-line block-no-empty */
-/* TODO: Enable ordering properties when the plugin supports logical CSS properties
- * https://github.com/hudochenkov/stylelint-order/pull/162 */
-/* stylelint-disable order/properties-alphabetical-order */
 .utrecht-textbox {
-  /* The average character inline-size is an approximation, with a default that works for Dutch text.
-   * The average might need to be configured specifically, for other scripts (CJK characters)
-   * and very wide or very narrow fonts.
-   * For monospace fonts it can be set to `1ch`.
-   */
   --_utrecht-textbox-value-char: 0.667em + 0.334ch;
-  /* Because this element uses `border-box` box-sizing, we need to manually add up the
-    * border width, padding width and the content width.
-    * 
-    * Browsers and browser addons can add buttons inside the content box, for example
-    * for autocomplete. To avoid overlap between the UI and the text, we reserve
-    * some additional pixels to make space. We use 44px in accordance with the WCAG target size.
-    * 
-    * When you are certain an element has no such UI, you can set the `autocomplete-ui-size` to `0px` (not to `0`).
-    */
   --_utrecht-textbox-max-inline-size: calc(
     calc(var(--utrecht-textbox-value-max-length) * var(--_utrecht-textbox-value-char)) +
       var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-control-padding-inline-end, 0)) +
@@ -8531,7 +6862,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
       var(--utrecht-textbox-autocomplete-ui-size, 44px)
   );
   background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color));
-  block-size: initial; /* harden */
+  block-size: initial;
   border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width));
   border-block-end-width: var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width)));
   border-color: var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color));
@@ -8541,7 +6872,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   color: var(--utrecht-textbox-color, var(--utrecht-form-control-color));
   font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-control-font-family));
   font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-control-font-size, inherit));
-  font-weight: initial; /* harden */
+  font-weight: initial;
   inline-size: 100%;
   line-height: var(--utrecht-textbox-line-height, var(--utrecht-form-control-line-height, initial));
   min-block-size: var(--utrecht-pointer-target-min-size, 44px);
@@ -8582,10 +6913,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 
 .utrecht-textbox--focus-visible {
-  /* - 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);
@@ -8608,7 +6935,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 
 .utrecht-textbox--numeric {
-  -moz-appearance: textfield; /* avoid spinner input in Firefox */
+  -moz-appearance: textfield;
   font-variant-numeric: lining-nums tabular-nums;
 }
 
@@ -8618,67 +6945,44 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 
 .utrecht-textbox--postal-code-nl-size {
-  /* Dutch postal code: 4 numbers, 1 space and 2 letters */
   --utrecht-textbox-value-max-length: 7;
 }
 
 .utrecht-textbox--house-number-size {
-  /* Dutch house number is 99999 at most: 5 numbers */
   --utrecht-textbox-value-max-length: 5;
 }
 
 .utrecht-textbox--house-letter-size {
-  /* Dutch house letter is 1 letter */
   --utrecht-textbox-value-max-length: 1;
 }
 
 .utrecht-textbox--house-addition-size {
-  /* Dutch house addition is optional, between 1 and 4 alphanumeric characters */
   --utrecht-textbox-value-max-length: 4;
 }
 
 .utrecht-textbox--voorvoegsel-size {
-  /* "Tabel 36 Voorvoegselstabel" by "Rijksdienst voor Identiteitsgegevens" has a list
-   * of all allowed values. The longest value is 10 characters.
-   * The class name is in Dutch because it is a Dutch concept. */
   --utrecht-textbox-value-max-length: 10;
 }
 
 .utrecht-textbox--tel-size {
-  /* International telephone number standard E.164 allows 15 numbers, with optional space for 4 spaces */
   --utrecht-textbox-value-max-length: 19;
 }
 
 .utrecht-textbox--tel-nl-size {
-  /* Dutch telephone number: 10 number, typically with at most 3 spaces */
   --utrecht-textbox-value-max-length: 13;
 }
 
 .utrecht-textbox--iban-size {
-  /* Maximum IBAN: 33 characters, plus 8 spaces (one space after every 4 characters) */
   --utrecht-textbox-value-max-length: 41;
 }
 
 .utrecht-textbox--iban-nl-size {
-  /* Dutch IBAN: 18 characters, plus 4 spaces (one space after every 4 characters) */
   --utrecht-textbox-value-max-length: 22;
 }
-
-/**
- * This class name is experimental.
- */
 .utrecht-textbox--placeholder-ltr::placeholder, .utrecht-textbox--placeholder-ltr:placeholder-shown {
-  /* For <input dir="rtr" placeholder="+31 555 1234">,
-   * behave as `dir="auto"` when the placeholder is shown. */
   direction: ltr;
 }
-
-/**
- * This class name is experimental.
- */
 .utrecht-textbox--placeholder-rtl::placeholder, .utrecht-textbox--placeholder-rtl:placeholder-shown {
-  /* For <input dir="rtr" placeholder="+31 555 1234">,
-   * behave as `dir="auto"` when the placeholder is shown. */
   direction: rtl;
 }
 
@@ -8687,21 +6991,11 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 
 .utrecht-textbox--html-input {
-  /* The `input:read-only` pseudo selector applies to both `<input readonly>` and `<input disabled>` */
-  /*
-   * The `input:disabled` pseudo selector applies to `<input disabled>`, but not to `<input aria-disabled="true">`
-   *
-   * We consider `disabled` more specific than `read-only`, so the `:disabled` selector should come after the `:read-only` selector.
-   */
 }
 .utrecht-textbox--html-input:focus {
   background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
   border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
   color: var(--utrecht-textbox-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textbox-color, var(--utrecht-form-control-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);
@@ -8711,7 +7005,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   outline-width: var(--utrecht-focus-outline-width, revert);
 }
 .utrecht-textbox--html-input:focus:not(:focus-visible) {
-  /* undo focus ring */
   box-shadow: none;
   outline-style: revert;
 }
@@ -8753,21 +7046,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
   font-variant-ligatures: none;
 }
 .utrecht-textbox--html-input[pattern="\\d*"], .utrecht-textbox--html-input[pattern="[0-9]*"], .utrecht-textbox--html-input[type=number i], .utrecht-textbox--html-input[type=tel i], .utrecht-textbox--html-input[inputMode=numeric i], .utrecht-textbox--html-input[inputMode=decimal i], .utrecht-textbox--html-input[inputMode=tel i] {
-  -moz-appearance: textfield; /* avoid spinner input in Firefox */
+  -moz-appearance: textfield;
   font-variant-numeric: lining-nums tabular-nums;
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- * Copyright (c) 2021 Gemeente Utrecht
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- */
-/* stylelint-disable-next-line block-no-empty */
 .utrecht-toptask-link {
   --utrecht-icon-color: currentColor;
   --utrecht-icon-size: var(--utrecht-toptask-link-icon-size);
@@ -8795,11 +7076,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 
 .utrecht-toptask-link--focus-visible, .utrecht-toptask-link:focus {
-  /* 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);
@@ -8813,11 +7089,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   background-color: var(--utrecht-toptask-link-focus-background-color, var(--utrecht-toptask-link-background-color));
   color: var(--utrecht-toptask-link-focus-color, var(--utrecht-toptask-link-color));
 }
-
-/* override the `:focus` selector above */
-/* stylelint-disable-next-line no-descending-specificity */
 .utrecht-toptask-link:focus:not(:focus-visible) {
-  /* undo focus ring */
   box-shadow: none;
   outline-style: revert;
 }
@@ -8831,12 +7103,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   padding-block-end: var(--utrecht-space-block-xs);
   padding-inline-end: var(--utrecht-space-inline-md);
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- */
 .utrecht-toptask-nav {
   display: flex;
   flex-direction: column;
@@ -8848,20 +7114,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
   --utrecht-toptask-link-max-inline-size: var(--utrecht-toptask-nav-link-grid-max-inline-size);
   flex-direction: row;
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- * Copyright (c) 2021 Gemeente Utrecht
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- * Copyright (c) 2021 Gemeente Utrecht
- */
 .utrecht-unordered-list,
 .utrecht-unordered-list--html-content ul {
-  /* Configure `box-sizing` and `text-align` for `--center` */
   box-sizing: border-box;
   font-family: var(--utrecht-document-font-family, inherit);
   font-size: var(--utrecht-unordered-list-font-size, var(--utrecht-document-font-size, inherit));
@@ -8904,41 +7158,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   color: var(--utrecht-unordered-list-marker-color);
   content: "●";
 }
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- * Copyright (c) 2021 Gemeente Utrecht
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- * Copyright (c) 2021 Gemeente Utrecht
- */
 .utrecht-url-data {
-  /**
-   * `break-inside`: avoid spreading the URL over two columns.
-   * The user might not realise an URL is incomplete, and continues in the next column.
-   * Better to have the entire URL in one column.
-   *
-   * `hyphens`: since hyphens are often part of a URL, the user cannot know if the hypen
-   * is part of the URL and it should be used to visit the page, or if it should be ignored.
-   * Better to avoid inserting any hyphens automatically.
-   *
-   * `overflow-wrap`: "To prevent overflow, an otherwise unbreakable string of
-   * characters — like a long word or URL — may be broken at any point if there
-   * are no otherwise-acceptable break points in the line."
-   *
-   * Source: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap#anywhere
-   *
-   * Without `overflow-wrap`, some long URLs will not fit on a printed page.
-   *
-   * `page-break-inside`: The user might not realise an URL is incomplete,
-   * and continues on the next printed page.
-   *
-   * TODO: Perhaps `hyphens: none` can be removed, because `overflow-wrap: anywhere`
-   * has that effect already.
-   */
   break-inside: avoid;
   font-variant-ligatures: none;
   hyphens: none;