@utrecht/component-library-css 1.0.0-alpha.365 → 1.0.0-alpha.366

package/dist/html.css

@@ -705,6 +705,7 @@ 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;
   border: 0;
   margin-inline-end: 0;
   margin-inline-start: 0;
@@ -736,6 +737,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   page-break-after: avoid;
   page-break-inside: avoid;
   text-transform: var(--utrecht-form-fieldset-legend-text-transform);
+  display: table;
   inline-size: 100%;
   padding-inline-end: 0;
   padding-inline-start: 0;

package/dist/index.css

@@ -1720,6 +1720,7 @@ ol.utrecht-breadcrumb__list {
  * Copyright (c) 2021 Robbert Broersma
  */
 /* stylelint-disable-next-line block-no-empty */
+.utrecht-checkbox--custom,
 .utrecht-custom-checkbox {
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -1739,6 +1740,7 @@ ol.utrecht-breadcrumb__list {
   width: var(--utrecht-custom-checkbox-size);
 }
 
+.utrecht-checkbox--custom.utrecht-checkbox--checked,
 .utrecht-custom-checkbox--checked {
   background-color: var(--utrecht-custom-checkbox-checked-background-color, var(--utrecht-custom-checkbox-background-color));
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
@@ -1746,19 +1748,23 @@ ol.utrecht-breadcrumb__list {
   border-width: var(--utrecht-custom-checkbox-checked-border-width, var(--utrecht-custom-checkbox-border-width));
 }
 
+.utrecht-checkbox--custom.utrecht-checkbox--disabled,
 .utrecht-custom-checkbox--disabled {
   border-color: var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color));
   border-width: var(--utrecht-custom-checkbox-disabled-border-width, var(--utrecht-custom-checkbox-border-width));
   cursor: var(--utrecht-action-disabled-cursor);
 }
+.utrecht-checkbox--custom.utrecht-checkbox--disabled:checked,
 .utrecht-custom-checkbox--disabled:checked {
   background-color: var(--utrecht-custom-checkbox-disabled-background-color, var(--utrecht-custom-checkbox-background-color));
   border-color: var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color));
 }
+.utrecht-checkbox--custom.utrecht-checkbox--disabled:active,
 .utrecht-custom-checkbox--disabled:active {
   border-color: var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color));
 }
 
+.utrecht-checkbox--custom.utrecht-checkbox--indeterminate,
 .utrecht-custom-checkbox--indeterminate {
   background-color: var(--utrecht-custom-checkbox-indeterminate-background-color, var(--utrecht-custom-checkbox-background-color));
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
@@ -1767,11 +1773,13 @@ ol.utrecht-breadcrumb__list {
   color: var(--utrecht-custom-checkbox-indeterminate-color, var(--utrecht-custom-checkbox-color));
 }
 
+.utrecht-checkbox--custom.utrecht-checkbox--invalid,
 .utrecht-custom-checkbox--invalid {
   border-color: var(--utrecht-custom-checkbox-invalid-border-color, var(--utrecht-custom-checkbox-border-color));
   border-width: var(--utrecht-custom-checkbox-invalid-border-width, var(--utrecht-custom-checkbox-border-width));
 }
 
+.utrecht-checkbox--custom.utrecht-checkbox--active,
 .utrecht-custom-checkbox--active {
   background-color: var(--utrecht-custom-checkbox-active-background-color, var(--utrecht-custom-checkbox-background-color));
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
@@ -1780,6 +1788,7 @@ ol.utrecht-breadcrumb__list {
   color: var(--utrecht-custom-checkbox-active-color, var(--utrecht-custom-checkbox-color));
 }
 
+.utrecht-checkbox--custom.utrecht-checkbox--focus,
 .utrecht-custom-checkbox--focus {
   background-color: var(--utrecht-custom-checkbox-focus-background-color, var(--utrecht-custom-checkbox-background-color));
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
@@ -1787,6 +1796,7 @@ ol.utrecht-breadcrumb__list {
   border-width: var(--utrecht-custom-checkbox-focus-border-width, var(--utrecht-custom-checkbox-border-width));
 }
 
+.utrecht-checkbox--custom.utrecht-checkbox--focus-visible,
 .utrecht-custom-checkbox--focus-visible {
   box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
   outline-color: var(--utrecht-focus-outline-color, transparent);
@@ -1795,24 +1805,29 @@ ol.utrecht-breadcrumb__list {
   outline-width: var(--utrecht-focus-outline-width, 0);
 }
 
+.utrecht-checkbox--custom.utrecht-checkbox--html-input:disabled,
 .utrecht-custom-checkbox--html-input:disabled {
   border-color: var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color));
   border-width: var(--utrecht-custom-checkbox-disabled-border-width, var(--utrecht-custom-checkbox-border-width));
   cursor: var(--utrecht-action-disabled-cursor);
 }
+.utrecht-checkbox--custom.utrecht-checkbox--html-input:disabled:checked,
 .utrecht-custom-checkbox--html-input:disabled:checked {
   background-color: var(--utrecht-custom-checkbox-disabled-background-color, var(--utrecht-custom-checkbox-background-color));
   border-color: var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color));
 }
+.utrecht-checkbox--custom.utrecht-checkbox--html-input:disabled:active,
 .utrecht-custom-checkbox--html-input:disabled:active {
   border-color: var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color));
 }
+.utrecht-checkbox--custom.utrecht-checkbox--html-input:focus,
 .utrecht-custom-checkbox--html-input:focus {
   background-color: var(--utrecht-custom-checkbox-focus-background-color, var(--utrecht-custom-checkbox-background-color));
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
   border-color: var(--utrecht-custom-checkbox-focus-border-color, var(--utrecht-custom-checkbox-border-color));
   border-width: var(--utrecht-custom-checkbox-focus-border-width, var(--utrecht-custom-checkbox-border-width));
 }
+.utrecht-checkbox--custom.utrecht-checkbox--html-input:focus-visible,
 .utrecht-custom-checkbox--html-input:focus-visible {
   box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
   outline-color: var(--utrecht-focus-outline-color, transparent);
@@ -1820,10 +1835,13 @@ ol.utrecht-breadcrumb__list {
   outline-style: var(--utrecht-focus-outline-style, solid);
   outline-width: var(--utrecht-focus-outline-width, 0);
 }
-.utrecht-custom-checkbox--html-input:invalid, .utrecht-custom-checkbox--html-input[aria-invalid=true] {
+.utrecht-checkbox--custom.utrecht-checkbox--html-input:invalid, .utrecht-checkbox--custom.utrecht-checkbox--html-input[aria-invalid=true],
+.utrecht-custom-checkbox--html-input:invalid,
+.utrecht-custom-checkbox--html-input[aria-invalid=true] {
   border-color: var(--utrecht-custom-checkbox-invalid-border-color, var(--utrecht-custom-checkbox-border-color));
   border-width: var(--utrecht-custom-checkbox-invalid-border-width, var(--utrecht-custom-checkbox-border-width));
 }
+.utrecht-checkbox--custom.utrecht-checkbox--html-input:active,
 .utrecht-custom-checkbox--html-input:active {
   background-color: var(--utrecht-custom-checkbox-active-background-color, var(--utrecht-custom-checkbox-background-color));
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
@@ -1831,12 +1849,14 @@ ol.utrecht-breadcrumb__list {
   border-width: var(--utrecht-custom-checkbox-active-border-width, var(--utrecht-custom-checkbox-border-width));
   color: var(--utrecht-custom-checkbox-active-color, var(--utrecht-custom-checkbox-color));
 }
+.utrecht-checkbox--custom.utrecht-checkbox--html-input:checked,
 .utrecht-custom-checkbox--html-input:checked {
   background-color: var(--utrecht-custom-checkbox-checked-background-color, var(--utrecht-custom-checkbox-background-color));
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
   border-color: var(--utrecht-custom-checkbox-checked-border-color, var(--utrecht-custom-checkbox-border-color));
   border-width: var(--utrecht-custom-checkbox-checked-border-width, var(--utrecht-custom-checkbox-border-width));
 }
+.utrecht-checkbox--custom.utrecht-checkbox--html-input:indeterminate,
 .utrecht-custom-checkbox--html-input:indeterminate {
   background-color: var(--utrecht-custom-checkbox-indeterminate-background-color, var(--utrecht-custom-checkbox-background-color));
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
@@ -1860,6 +1880,7 @@ ol.utrecht-breadcrumb__list {
  */
 /* stylelint-disable-next-line block-no-empty */
 /* stylelint-disable-next-line block-no-empty */
+.utrecht-radio-button--custom,
 .utrecht-custom-radio-button {
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -1881,6 +1902,7 @@ ol.utrecht-breadcrumb__list {
   width: var(--utrecht-custom-radio-button-size);
 }
 
+.utrecht-radio-button--custom.utrecht-radio-button--checked,
 .utrecht-custom-radio-button--checked {
   background-color: var(--utrecht-custom-radio-button-checked-background-color, var(--utrecht-custom-radio-button-background-color));
   background-image: url("data:image/svg+xml,%3Csvg viewBox='-4 -4 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
@@ -1889,6 +1911,7 @@ ol.utrecht-breadcrumb__list {
   color: var(--utrecht-custom-radio-button-checked-color, var(--utrecht-custom-radio-button-color));
 }
 
+.utrecht-radio-button--custom.utrecht-radio-button--active,
 .utrecht-custom-radio-button--active {
   background-color: var(--utrecht-custom-radio-button-active-background-color, var(--utrecht-custom-radio-button-background-color));
   background-image: url("data:image/svg+xml,%3Csvg viewBox='-4 -4 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
@@ -1897,6 +1920,7 @@ ol.utrecht-breadcrumb__list {
   color: var(--utrecht-custom-radio-button-active-color, var(--utrecht-custom-radio-button-color));
 }
 
+.utrecht-radio-button--custom.utrecht-radio-button--focus,
 .utrecht-custom-radio-button--focus {
   background-color: var(--utrecht-custom-radio-button-focus-background-color, var(--utrecht-custom-radio-button-background-color));
   background-image: url("data:image/svg+xml,%3Csvg viewBox='-4 -4 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
@@ -1905,6 +1929,7 @@ ol.utrecht-breadcrumb__list {
   color: var(--utrecht-custom-radio-button-focus-color, var(--utrecht-custom-radio-button-color));
 }
 
+.utrecht-radio-button--custom.utrecht-radio-button--focus-visible,
 .utrecht-custom-radio-button--focus-visible {
   box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
   outline-color: var(--utrecht-focus-outline-color, transparent);
@@ -1913,39 +1938,47 @@ ol.utrecht-breadcrumb__list {
   outline-width: var(--utrecht-focus-outline-width, 0);
 }
 
+.utrecht-radio-button--custom.utrecht-radio-button--disabled,
 .utrecht-custom-radio-button--disabled {
   border-color: var(--utrecht-custom-radio-button-disabled-border-color, var(--utrecht-custom-radio-button-border-color));
   border-width: var(--utrecht-custom-radio-button-disabled-border-width, var(--utrecht-custom-radio-button-border-width));
   color: var(--utrecht-custom-radio-button-disabled-color, var(--utrecht-custom-radio-button-color));
   cursor: var(--utrecht-action-disabled-cursor);
 }
+.utrecht-radio-button--custom.utrecht-radio-button--disabled:checked,
 .utrecht-custom-radio-button--disabled:checked {
   background-color: var(--utrecht-custom-radio-button-disabled-background-color, var(--utrecht-custom-radio-button-background-color));
   border-color: var(--utrecht-custom-radio-button-disabled-border-color, var(--utrecht-custom-radio-button-border-color));
 }
+.utrecht-radio-button--custom.utrecht-radio-button--disabled:active,
 .utrecht-custom-radio-button--disabled:active {
   border-color: var(--utrecht-custom-radio-button-disabled-border-color, var(--utrecht-custom-radio-button-border-color));
 }
 
+.utrecht-radio-button--custom.utrecht-radio-button--invalid,
 .utrecht-custom-radio-button--invalid {
   border-color: var(--utrecht-custom-radio-button-invalid-border-color, var(--utrecht-custom-radio-button-border-color));
   border-width: var(--utrecht-custom-radio-button-invalid-border-width, var(--utrecht-custom-radio-button-border-width));
   color: var(--utrecht-custom-radio-button-invalid-color, var(--utrecht-custom-radio-button-color));
 }
 
+.utrecht-radio-button--custom.utrecht-radio-button--html-input:disabled,
 .utrecht-custom-radio-button--html-input:disabled {
   border-color: var(--utrecht-custom-radio-button-disabled-border-color, var(--utrecht-custom-radio-button-border-color));
   border-width: var(--utrecht-custom-radio-button-disabled-border-width, var(--utrecht-custom-radio-button-border-width));
   color: var(--utrecht-custom-radio-button-disabled-color, var(--utrecht-custom-radio-button-color));
   cursor: var(--utrecht-action-disabled-cursor);
 }
+.utrecht-radio-button--custom.utrecht-radio-button--html-input:disabled:checked,
 .utrecht-custom-radio-button--html-input:disabled:checked {
   background-color: var(--utrecht-custom-radio-button-disabled-background-color, var(--utrecht-custom-radio-button-background-color));
   border-color: var(--utrecht-custom-radio-button-disabled-border-color, var(--utrecht-custom-radio-button-border-color));
 }
+.utrecht-radio-button--custom.utrecht-radio-button--html-input:disabled:active,
 .utrecht-custom-radio-button--html-input:disabled:active {
   border-color: var(--utrecht-custom-radio-button-disabled-border-color, var(--utrecht-custom-radio-button-border-color));
 }
+.utrecht-radio-button--custom.utrecht-radio-button--html-input:focus,
 .utrecht-custom-radio-button--html-input:focus {
   background-color: var(--utrecht-custom-radio-button-focus-background-color, var(--utrecht-custom-radio-button-background-color));
   background-image: url("data:image/svg+xml,%3Csvg viewBox='-4 -4 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
@@ -1953,6 +1986,7 @@ ol.utrecht-breadcrumb__list {
   border-width: var(--utrecht-custom-radio-button-focus-border-width, var(--utrecht-custom-radio-button-border-width));
   color: var(--utrecht-custom-radio-button-focus-color, var(--utrecht-custom-radio-button-color));
 }
+.utrecht-radio-button--custom.utrecht-radio-button--html-input:focus-visible,
 .utrecht-custom-radio-button--html-input:focus-visible {
   box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);
   outline-color: var(--utrecht-focus-outline-color, transparent);
@@ -1960,11 +1994,14 @@ ol.utrecht-breadcrumb__list {
   outline-style: var(--utrecht-focus-outline-style, solid);
   outline-width: var(--utrecht-focus-outline-width, 0);
 }
-.utrecht-custom-radio-button--html-input:invalid, .utrecht-custom-radio-button--html-input[aria-invalid=true] {
+.utrecht-radio-button--custom.utrecht-radio-button--html-input:invalid, .utrecht-radio-button--custom.utrecht-radio-button--html-input[aria-invalid=true],
+.utrecht-custom-radio-button--html-input:invalid,
+.utrecht-custom-radio-button--html-input[aria-invalid=true] {
   border-color: var(--utrecht-custom-radio-button-invalid-border-color, var(--utrecht-custom-radio-button-border-color));
   border-width: var(--utrecht-custom-radio-button-invalid-border-width, var(--utrecht-custom-radio-button-border-width));
   color: var(--utrecht-custom-radio-button-invalid-color, var(--utrecht-custom-radio-button-color));
 }
+.utrecht-radio-button--custom.utrecht-radio-button--html-input:active,
 .utrecht-custom-radio-button--html-input:active {
   background-color: var(--utrecht-custom-radio-button-active-background-color, var(--utrecht-custom-radio-button-background-color));
   background-image: url("data:image/svg+xml,%3Csvg viewBox='-4 -4 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
@@ -1972,6 +2009,7 @@ ol.utrecht-breadcrumb__list {
   border-width: var(--utrecht-custom-radio-button-active-border-width, var(--utrecht-custom-radio-button-border-width));
   color: var(--utrecht-custom-radio-button-active-color, var(--utrecht-custom-radio-button-color));
 }
+.utrecht-radio-button--custom.utrecht-radio-button--html-input:checked,
 .utrecht-custom-radio-button--html-input:checked {
   background-color: var(--utrecht-custom-radio-button-checked-background-color, var(--utrecht-custom-radio-button-background-color));
   background-image: url("data:image/svg+xml,%3Csvg viewBox='-4 -4 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
@@ -2123,28 +2161,39 @@ ol.utrecht-breadcrumb__list {
 
 /**
  * @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-form-field-checkbox-group {
+.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-paragraph-font-size);
-  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));
-  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)));
+  font-size: var(--utrecht-form-field-description-font-size, inherit);
+  font-style: var(--utrecht-form-field-description-font-style);
+  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));
+  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)));
+}
+.utrecht-form-field-description > * {
+  --utrecht-space-around: 1;
 }
 
-.utrecht-form-field-checkbox-group--distanced {
+.utrecht-form-field-description--distanced {
   --utrecht-space-around: 1;
 }
 
-.utrecht-form-field-checkbox-group__label {
-  margin-block-end: var(--utrecht-paragraph-margin-block-end);
-  margin-block-start: var(--utrecht-paragraph-margin-block-start);
+.utrecht-form-field-description--invalid {
+  color: var(--utrecht-form-field-description-invalid-color, var(--utrecht-feedback-invalid-color, var(--utrecht-feedback-danger-color)));
+}
+
+.utrecht-form-field-description--valid {
+  color: var(--utrecht-form-field-description-valid-color, var(--utrecht-feedback-valid-color, var(--utrecht-feedback-safe-color)));
+}
+
+.utrecht-form-field-description--warning {
+  color: var(--utrecht-form-field-description-warning-color, var(--utrecht-feedback-warning-color));
 }
 
 /**
@@ -2155,10 +2204,7 @@ ol.utrecht-breadcrumb__list {
  * @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 {
   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));
@@ -2171,108 +2217,91 @@ ol.utrecht-breadcrumb__list {
   --utrecht-space-around: 1;
 }
 
-.utrecht-form-field__label--checkbox {
-  margin-inline-start: 1ch;
+.utrecht-form-field--invalid {
+  border-inline-start-color: var(--utrecht-form-field-invalid-border-inline-start-color);
+  border-inline-start-style: solid;
+  border-inline-start-width: var(--utrecht-form-field-invalid-border-inline-start-width);
+  padding-inline-start: var(--utrecht-form-field-invalid-padding-inline-start);
 }
 
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-.utrecht-form-field-description {
-  color: var(--utrecht-form-field-description-color);
-  font-family: var(--utrecht-document-font-family, inherit);
-  font-size: var(--utrecht-form-field-description-font-size, inherit);
-  font-style: var(--utrecht-form-field-description-font-style);
-  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));
-  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)));
+.utrecht-form-field--checkbox {
+  display: grid;
+  gap: 0 var(--utrecht-custom-checkbox-margin-inline-end, 12px);
+  grid-template-areas: "input label" "input description" "input description-invalid";
+  grid-template-columns: var(--utrecht-custom-checkbox-size) 100fr;
+  /*
+  .utrecht-form-field__label .utrecht-form-field__input {
+    margin-inline-start: calc(
+      -1 * (var(--utrecht-custom-checkbox-size) + var(--utrecht-custom-checkbox-margin-inline-end, 12px))
+    );
+    margin-inline-end: var(--utrecht-custom-checkbox-margin-inline-end, 12px);
+  }
+  */
 }
-
-.utrecht-form-field-description--distanced {
-  --utrecht-space-around: 1;
+.utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input) {
+  margin-inline-start: calc(-1 * (var(--utrecht-custom-checkbox-size) + var(--utrecht-custom-checkbox-margin-inline-end, 12px)));
 }
-
-.utrecht-form-field-description--invalid {
-  color: var(--utrecht-form-field-description-invalid-color, var(--utrecht-feedback-invalid-color, var(--utrecht-feedback-danger-color)));
+.utrecht-form-field--checkbox .utrecht-form-field__label .utrecht-form-field__input {
+  margin-inline-end: var(--utrecht-custom-checkbox-margin-inline-end, 12px);
 }
 
-.utrecht-form-field-description--valid {
-  color: var(--utrecht-form-field-description-valid-color, var(--utrecht-feedback-valid-color, var(--utrecht-feedback-safe-color)));
-}
-
-.utrecht-form-field-description--warning {
-  color: var(--utrecht-form-field-description-warning-color, var(--utrecht-feedback-warning-color));
-}
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-.utrecht-form-field-radio-group {
-  font-family: var(--utrecht-document-font-family, inherit);
-  font-size: var(--utrecht-paragraph-font-size);
-  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));
-  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)));
+.utrecht-form-field--radio {
+  display: grid;
+  gap: 0 var(--utrecht-custom-radio-button-margin-inline-end, 12px);
+  grid-template-areas: "input label" "input description" "input description-invalid";
+  grid-template-columns: var(--utrecht-custom-radio-button-size) 100fr;
+  /*
+  .utrecht-form-field__label .utrecht-form-field__input {
+    margin-inline-start: calc(
+      -1 * (var(--utrecht-custom-checkbox-size) + var(--utrecht-custom-checkbox-margin-inline-end, 12px))
+    );
+    margin-inline-end: var(--utrecht-custom-checkbox-margin-inline-end, 12px);
+  }
+  */
 }
-
-.utrecht-form-field-radio-group--distanced {
-  --utrecht-space-around: 1;
+.utrecht-form-field--radio .utrecht-form-field__label:has(.utrecht-form-field__input) {
+  margin-inline-start: calc(-1 * (var(--utrecht-custom-radio-button-size) + var(--utrecht-custom-radio-button-margin-inline-end, 12px)));
 }
-
-.utrecht-form-field-radio-group__label {
-  margin-block-end: var(--utrecht-paragraph-margin-block-end);
-  margin-block-start: var(--utrecht-paragraph-margin-block-start);
+.utrecht-form-field--radio .utrecht-form-field__label .utrecht-form-field__input {
+  margin-inline-end: var(--utrecht-custom-radio-button-margin-inline-end, 12px);
 }
 
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-.utrecht-form-field-radio {
-  font-family: var(--utrecht-document-font-family, inherit);
-  font-size: var(--utrecht-paragraph-font-size);
-  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));
-  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)));
+.utrecht-form-field__input {
+  grid-area: input;
+  order: 5;
 }
 
-.utrecht-form-field-radio--distanced {
-  --utrecht-space-around: 1;
+.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;
+  order: 1;
 }
 
-.utrecht-form-field-radio__label {
-  margin-inline-start: 1ch;
+.utrecht-form-field .utrecht-form-field-description {
+  grid-area: description;
+  margin-block-end: var(--utrecht-form-field-description-margin-block-end);
+  margin-block-start: var(--utrecht-form-field-description-margin-block-start);
+  order: 2;
 }
 
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-.utrecht-form-field-textbox {
-  font-family: var(--utrecht-document-font-family, inherit);
+.utrecht-form-field .utrecht-form-field-description--invalid {
+  grid-area: description-invalid;
+  order: 3;
 }
 
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-.utrecht-form-field {
-  font-family: var(--utrecht-document-font-family, inherit);
-  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, 0));
-  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, 0));
-  max-inline-size: var(--utrecht-form-field-max-inline-size);
-  page-break-inside: avoid;
+.utrecht-form-field__description {
+  grid-area: description;
+  margin-block-end: var(--utrecht-form-field-description-margin-block-end);
+  margin-block-start: var(--utrecht-form-field-description-margin-block-start);
+  order: 2;
 }
 
-.utrecht-form-field--distanced {
-  --utrecht-space-around: 1;
+.utrecht-form-field__description--before {
+  grid-area: description-before;
+  order: 4;
 }
 
 /**
@@ -2290,6 +2319,7 @@ ol.utrecht-breadcrumb__list {
 }
 
 .utrecht-form-fieldset--html-fieldset {
+  all: revert;
   border: 0;
   margin-inline-end: 0;
   margin-inline-start: 0;
@@ -2301,6 +2331,7 @@ ol.utrecht-breadcrumb__list {
 }
 
 .utrecht-form-fieldset__legend--html-legend {
+  display: table;
   inline-size: 100%;
   padding-inline-end: 0;
   padding-inline-start: 0;
@@ -2310,6 +2341,11 @@ ol.utrecht-breadcrumb__list {
   --utrecht-space-around: 1;
 }
 
+.utrecht-form-fieldset--section {
+  background-color: var(--utrecht-form-fieldset-section-background-color);
+  color: var(--utrecht-form-fieldset-section-color);
+}
+
 .utrecht-form-fieldset__legend {
   color: var(--utrecht-form-fieldset-legend-color, var(--utrecht-document-color, inherit));
   font-family: var(--utrecht-form-fieldset-legend-font-family, var(--utrecht-document-font-family));
@@ -2330,6 +2366,13 @@ ol.utrecht-breadcrumb__list {
   margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-legend-margin-block-start, 0));
 }
 
+.utrecht-form-fieldset--invalid {
+  border-inline-start-color: var(--utrecht-form-fieldset-invalid-border-inline-start-color, var(--utrecht-form-field-invalid-border-inline-start-color));
+  border-inline-start-style: solid;
+  border-inline-start-width: var(--utrecht-form-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

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-alpha.365",
+  "version": "1.0.0-alpha.366",
   "author": "Community for NL Design System",
   "description": "Component library bundle for the Municipality of Utrecht based on the NL Design System architecture",
   "license": "EUPL-1.2",
@@ -26,5 +26,5 @@
     "clean": "rimraf dist/"
   },
   "main": "dist/index.css",
-  "gitHead": "e13e9c6c1ce7f570c69754464081cf4ca9b0d55c"
+  "gitHead": "42ba5050c04e6109291179a5cfb851e0044be001"
 }