@utrecht/component-library-css 4.1.0 → 5.0.0

package/dist/html.css

@@ -1,233 +1,11 @@
-@charset "UTF-8";
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- */
-/* Collection of all semantic HTML styles in the component library */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/* Collection of all semantic HTML styles in the component library */
-/**
- * @license EUPL-1.2
- * Copyright (c) 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 Robbert Broersma
- */
-/**
- * @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 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 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- */
-/* stylelint-disable-next-line block-no-empty */
-/* stylelint-disable-next-line block-no-empty */
-/**
- * @license EUPL-1.2
- * Copyright (c) 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.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
- */
-/**
- * @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
- */
-/**
- * @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
- */
-/**
- * @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 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 */
-/**
- * @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
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021-2022 Frameless B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021-2022 Frameless B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021-2022 Frameless B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
  * Copyright (c) 2021 The Knights Who Say NIH! B.V.
  */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021-2022 Frameless B.V.
- */
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
  * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021-2022 Frameless B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021-2022 Frameless B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
  */
 /**
  * @license EUPL-1.2
@@ -237,215 +15,39 @@
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
- * Copyright (c) 2021 Gemeente Utrecht
- */
-/* stylelint-disable scss/no-global-function-names */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- */
-/* 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 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2021-2022 Frameless B.V.
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
  * Copyright (c) 2021 Gemeente Utrecht
- */
-/**
- * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
  * Copyright (c) 2021 The Knights Who Say NIH! B.V.
  */
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Gemeente Utrecht
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- */
-/* stylelint-disable-next-line block-no-empty */
-/* stylelint-disable-next-line block-no-empty */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @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 */
-/**
- * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
  * Copyright (c) 2021 The Knights Who Say NIH! B.V.
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 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 */
-/* stylelint-disable selector-class-pattern */
-/**
- * @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 */
-/* 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 */
-/**
- * @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
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
  */
-/* 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 */
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
  * Copyright (c) 2021 Gemeente Utrecht
  */
-/* Collection of all semantic HTML styles in the component library */
+@charset "UTF-8";
 .utrecht-html {
-  /* override the `:focus` selector above */
-  /* stylelint-disable-next-line no-descending-specificity */
-  /* stylelint-disable selector-class-pattern */
   --utrecht-space-around: 1;
 }
 .utrecht-html article {
@@ -475,13 +77,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
 .utrecht-html input[type=reset i],
 .utrecht-html input[type=submit i],
 .utrecht-html button {
-  /*
-  `--_utrecht-button-hint` is the internal prefix for the applied optional hint, it is not an API.
-  The hint color takes priority over the appearance color.
-
-  `--_utrecht-button-appearance` is the internal prefix for the appearance
-  (primary-action, secondary-action or subtle), it is not an API.
-  */
   --_utrecht-button-background-color: var(
     --_utrecht-button-hint-background-color,
     var(--_utrecht-button-appearance-background-color, var(--utrecht-button-background-color))
@@ -674,6 +269,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
     --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);
@@ -688,13 +285,13 @@ however browsers don't seem to have implemented great looking supixel tweening y
   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);
@@ -748,11 +345,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   scale: var(--utrecht-button-focus-scale, 1);
 }
 .utrecht-html button:focus-visible {
-  /* the pseudo-class for `:focus-visible` is implemented via the mixin */
-  /* - The browser default focus ring should apply when these CSS custom properties are not set.
-   * - Make the `box-shadow` value available, so components that have their own `box-shadow`
-   *   can combine it with the focus ring box shadow.
-   */
   --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
     var(--utrecht-focus-inverse-outline-color, transparent);
   box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -762,7 +354,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   outline-width: var(--utrecht-focus-outline-width, revert);
 }
 .utrecht-html input[type=checkbox i] {
-  margin-block-end: 0; /* reset native margin for input[type="checkbox"] */
+  margin-block-end: 0;
   margin-block-start: 0;
   margin-inline-end: 0;
   margin-inline-start: 0;
@@ -774,10 +366,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   cursor: var(--utrecht-action-disabled-cursor, revert);
 }
 .utrecht-html input[type=checkbox i]:focus {
-  /* - The browser default focus ring should apply when these CSS custom properties are not set.
-   * - Make the `box-shadow` value available, so components that have their own `box-shadow`
-   *   can combine it with the focus ring box shadow.
-   */
   --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
     var(--utrecht-focus-inverse-outline-color, transparent);
   box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -787,12 +375,12 @@ however browsers don't seem to have implemented great looking supixel tweening y
   outline-width: var(--utrecht-focus-outline-width, revert);
 }
 .utrecht-html input[type=checkbox i]:focus:not(:focus-visible) {
-  /* undo focus ring */
   box-shadow: none;
   outline-style: revert;
 }
 .utrecht-html body {
-  /* reset `font-smoothing: antialiasing`, prefer automatic (`subpixel-antialiasing`) behavior for high-dpi screens */
+  -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);
@@ -805,12 +393,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
   background-color: var(--utrecht-document-background-color, inherit);
 }
 .utrecht-html body :lang(ar) {
-  /* `letter-spacing` design tokens break Arabic text rendering, avoid that */
   letter-spacing: 0 !important;
 }
 .utrecht-html code {
-  /* Use `monospace` as fallback both when the custom property isn't set and when the font is not available */
-  /* 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;
@@ -827,7 +412,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
 .utrecht-html fieldset {
   margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-end, 0));
   margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-start, 0));
-  /* `all: revert` unfortunately has as side-effect that the `hidde` attribute has no effect */
   all: revert;
   border: 0;
   margin-inline-end: 0;
@@ -1025,14 +609,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);
@@ -1043,7 +619,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   z-index: var(--utrecht-stack-focus-z-index, 1);
 }
 .utrecht-html a:focus:not(:focus-visible) {
-  /* undo focus ring */
   box-shadow: none;
   outline-style: revert;
 }
@@ -1051,7 +626,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   white-space: nowrap;
 }
 .utrecht-html 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)));
@@ -1098,8 +672,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   font-size: inherit;
 }
 .utrecht-html pre:has(> code:only-child) {
-  /* Use `monospace` as fallback both when the custom property isn't set and when the font is not available */
-  /* 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;
@@ -1132,14 +704,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   display: contents;
 }
 .utrecht-html input[type=radio i] {
-  /*
-   * 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;
@@ -1184,8 +748,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   -webkit-user-select: none;
   user-select: none;
   vertical-align: top;
-  /* override the `:focus` selector above */
-  /* stylelint-disable-next-line no-descending-specificity */
 }
 .utrecht-html input[type=radio i]:checked {
   --_utrecht-radio-button-icon-size: var(--utrecht-radio-button-icon-size, 50%);
@@ -1207,28 +769,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-html input[type=radio i]: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);
@@ -1259,10 +811,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   );
 }
 .utrecht-html input[type=radio i]: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);
@@ -1327,16 +875,11 @@ however browsers don't seem to have implemented great looking supixel tweening y
   padding-block-start: var(--utrecht-select-padding-block-start, var(--utrecht-form-control-padding-block-start));
   padding-inline-end: var(--utrecht-select-padding-inline-end, var(--utrecht-form-control-padding-inline-end));
   padding-inline-start: var(--utrecht-select-padding-inline-start, var(--utrecht-form-control-padding-inline-start));
-  /* <select> does not have a `readonly` attribute */
 }
 .utrecht-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);
@@ -1346,7 +889,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   outline-width: var(--utrecht-focus-outline-width, revert);
 }
 .utrecht-html select:focus:not(:focus-visible) {
-  /* undo focus ring */
   box-shadow: none;
   outline-style: revert;
 }
@@ -1378,9 +920,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   --utrecht-space-around: 1;
 }
 .utrecht-html 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;
@@ -1420,7 +959,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 .utrecht-html th {
   --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);
@@ -1438,7 +976,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
 .utrecht-html th,
 .utrecht-html td {
   --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);
@@ -1468,12 +1005,10 @@ however browsers don't seem to have implemented great looking supixel tweening y
 .utrecht-html tfoot > tr > th.numeric,
 .utrecht-html th[scope=column].numeric {
   --_utrecht-table-cell-text-align: right;
-  /* stylelint-disable-next-line declaration-property-value-disallowed-list */
   text-align: var(--_utrecht-table-cell-text-align);
 }
 .utrecht-html td.numeric {
   --_utrecht-table-cell-text-align: right;
-  /* stylelint-disable-next-line declaration-property-value-disallowed-list */
   text-align: var(--_utrecht-table-cell-text-align);
   font-variant-numeric: lining-nums tabular-nums;
 }
@@ -1494,9 +1029,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
   color: var(--utrecht-table-row-alternate-odd-color);
 }
 .utrecht-html 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));
@@ -1506,7 +1040,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));
@@ -1518,21 +1052,11 @@ however browsers don't seem to have implemented great looking supixel tweening y
   padding-inline-start: var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));
   resize: vertical;
   resize: block;
-  /* 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-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);
@@ -1542,7 +1066,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   outline-width: var(--utrecht-focus-outline-width, revert);
 }
 .utrecht-html textarea:focus:not(:focus-visible) {
-  /* undo focus ring */
   box-shadow: none;
   outline-style: revert;
 }
@@ -1589,21 +1112,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
 .utrecht-html input[type=time i],
 .utrecht-html input[type=url i],
 .utrecht-html input[type=week i] {
-  /* 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)) +
@@ -1612,7 +1121,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));
@@ -1622,7 +1131,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);
@@ -1632,12 +1141,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   padding-block-start: var(--utrecht-textbox-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));
   padding-inline-end: var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));
   padding-inline-start: var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));
-  /* 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-html input:not([type]):focus,
 .utrecht-html input[type=date i]:focus,
@@ -1655,10 +1158,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   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);
@@ -1680,7 +1179,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
 .utrecht-html input[type=time i]:focus:not(:focus-visible),
 .utrecht-html input[type=url i]:focus:not(:focus-visible),
 .utrecht-html input[type=week i]:focus:not(:focus-visible) {
-  /* undo focus ring */
   box-shadow: none;
   outline-style: revert;
 }
@@ -1803,7 +1301,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
 .utrecht-html input[inputmode=tel i],
 .utrecht-html input[type=number i],
 .utrecht-html input[type=tel i] {
-  -moz-appearance: textfield; /* avoid spinner input in Firefox */
+  -moz-appearance: textfield;
   font-variant-numeric: lining-nums tabular-nums;
 }
 .utrecht-html input[inputmode=email i],
@@ -1813,7 +1311,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   font-variant-ligatures: none;
 }
 .utrecht-html 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));