@utrecht/component-library-css 5.2.0 → 6.1.0

package/dist/prince-xml.css

@@ -459,7 +459,14 @@
 }
 .utrecht-blockquote {
   background-color: var(--utrecht-blockquote-background-color);
+  border-color: var(--utrecht-blockquote-border-color);
+  border-radius: var(--utrecht-blockquote-border-radius, 0);
+  border-style: solid;
+  border-width: var(--utrecht-blockquote-border-width, 0);
+  border-left-width: var(--utrecht-blockquote-border-inline-start-width, var(--utrecht-blockquote-border-width, 0));
   color: var(--utrecht-blockquote-color);
+  display: flex;
+  flex-direction: column;
   font-family: var(--utrecht-document-font-family);
   font-size: var(--utrecht-blockquote-font-size);
   font-style: var(--utrecht-blockquote-font-style);
@@ -471,14 +478,25 @@
   padding-top: var(--utrecht-blockquote-padding-block-start);
   padding-right: var(--utrecht-blockquote-padding-inline-end);
   padding-left: var(--utrecht-blockquote-padding-inline-start);
+  row-gap: var(--utrecht-blockquote-row-gap, 0);
 }
-
-.utrecht-blockquote__attribution {
-  color: var(--utrecht-blockquote-attribution-color, inherit);
-  font-size: var(--utrecht-blockquote-attribution-font-size, inherit);
+.utrecht-blockquote__attribution,
+.utrecht-blockquote__caption {
+  color: var(--utrecht-blockquote-caption-color, inherit);
+  font-size: var(--utrecht-blockquote-caption-font-size, inherit);
 }
 
-.utrecht-blockquote__content {
+.utrecht-blockquote__figure {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 0;
+  margin-top: 0;
+  margin-right: 0;
+  margin-left: 0;
+  row-gap: var(--utrecht-blockquote-row-gap, 0);
+}
+.utrecht-blockquote__content,
+.utrecht-blockquote__quote {
   --utrecht-document-color: var(--utrecht-blockquote-content-color, inherit);
   --utrecht-paragraph-font-size: var(--utrecht-blockquote-content-font-size, inherit);
   color: var(--utrecht-blockquote-content-color, inherit);
@@ -488,6 +506,13 @@
 .utrecht-blockquote--distanced {
   --utrecht-space-around: 1;
 }
+
+.utrecht-blockquote--html-blockquote {
+  --utrecht-document-color: var(--utrecht-blockquote-content-color, inherit);
+  --utrecht-paragraph-font-size: var(--utrecht-blockquote-content-font-size, inherit);
+  color: var(--utrecht-blockquote-content-color, inherit);
+  font-size: var(--utrecht-blockquote-content-font-size, inherit);
+}
 .utrecht-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);
@@ -885,12 +910,12 @@
   border-width: var(--_utrecht-button-border-width);
   box-sizing: border-box;
   color: var(--_utrecht-button-color);
+  column-gap: var(--utrecht-button-column-gap);
   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-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
-  gap: var(--utrecht-button-icon-gap);
   width: var(--utrecht-button-inline-size, auto);
   justify-content: center;
   line-height: var(--_utrecht-button-line-height);
@@ -1254,12 +1279,12 @@
   border-width: var(--_utrecht-button-border-width);
   box-sizing: border-box;
   color: var(--_utrecht-button-color);
+  column-gap: var(--utrecht-button-column-gap);
   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-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
-  gap: var(--utrecht-button-icon-gap);
   width: var(--utrecht-button-inline-size, auto);
   justify-content: center;
   line-height: var(--_utrecht-button-line-height);
@@ -1322,7 +1347,7 @@
   scale: var(--utrecht-button-focus-scale, 1);
 }
 
-.utrecht-button:focus {
+.utrecht-button[prince-xml-ignore-pseudo-class-focus-visible] {
   --_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);
@@ -1337,17 +1362,6 @@
   border-color: var(--_utrecht-button-focus-border-color);
   color: var(--_utrecht-button-focus-color);
   scale: var(--utrecht-button-focus-scale, 1);
-  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
-    var(--utrecht-focus-inverse-outline-color, transparent);
-  box-shadow: var(--_utrecht-focus-ring-box-shadow);
-  outline-color: var(--utrecht-focus-outline-color, revert);
-  outline-offset: var(--utrecht-focus-outline-offset, revert);
-  outline-style: var(--utrecht-focus-outline-style, revert);
-  outline-width: var(--utrecht-focus-outline-width, revert);
-}
-.utrecht-button:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
-  box-shadow: none;
-  outline-style: revert;
 }
 
 .utrecht-button--hover:not(:disabled, .utrecht-button--disabled),
@@ -1830,7 +1844,7 @@
 .utrecht-checkbox--html-input:disabled {
   cursor: var(--utrecht-action-disabled-cursor, revert);
 }
-.utrecht-checkbox--html-input:focus {
+.utrecht-checkbox--html-input [prince-xml-ignore-pseudo-class-focus-visible] {
   --_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);
@@ -1839,10 +1853,6 @@
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
 }
-.utrecht-checkbox--html-input:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
-  box-shadow: none;
-  outline-style: revert;
-}
 .utrecht-code-block {
   background-color: var(--utrecht-code-background-color);
   color: var(--utrecht-code-color);
@@ -1898,6 +1908,13 @@
   column-gap: var(--utrecht-column-layout-gap, 2em);
   column-width: var(--utrecht-column-layout-column-width, 40ch);
   display: block;
+  column-width: var(--utrecht-column-layout-column-width, 25em);
+}
+@media print {
+  .utrecht-column-layout {
+    column-count: var(--utrecht-column-layout-print-column-count, 2);
+    column-width: var(--utrecht-column-layout-print-column-width, auto);
+  }
 }
 
 .utrecht-column-layout--rule {
@@ -2409,7 +2426,7 @@
 .utrecht-form-field--checkbox {
   display: grid;
   gap: 0 var(--utrecht-checkbox-margin-inline-end, 12px);
-  grid-template-areas: "input label" "input description" "input description-invalid";
+  grid-template-areas: "input label" "input description" "input error-message";
   grid-template-columns: var(--utrecht-checkbox-size) 100fr;
 }
 .utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input) {
@@ -2422,7 +2439,7 @@
 .utrecht-form-field--radio {
   display: grid;
   gap: 0 var(--utrecht-radio-button-margin-inline-end, 12px);
-  grid-template-areas: "input label" "input description" "input description-invalid";
+  grid-template-areas: "input label" "input description" "input error-message";
   grid-template-columns: var(--utrecht-radio-button-size) 100fr;
 }
 .utrecht-form-field--radio .utrecht-form-field__label:has(.utrecht-form-field__input) {
@@ -2454,7 +2471,7 @@
 }
 
 .utrecht-form-field .utrecht-form-field-description--invalid {
-  grid-area: description-invalid;
+  grid-area: error-message;
   order: 3;
 }
 
@@ -2469,6 +2486,11 @@
   grid-area: description-before;
   order: 4;
 }
+
+.utrecht-form-field__error-message {
+  grid-area: error-message;
+  order: 3;
+}
 .utrecht-form-fieldset {
   margin-bottom: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-end, 0));
   margin-top: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-start, 0));
@@ -2885,8 +2907,6 @@
 
 .utrecht-link-button--focus, .utrecht-link-button--html-button:not(:disabled):focus {
   --_utrecht-link-state-color: var(--utrecht-link-focus-color);
-  --_utrecht-link-state-text-decoration: var(--utrecht-link-focus-text-decoration);
-  --_utrecht-link-state-text-decoration-thickness: var(--utrecht-link-focus-text-decoration-thickness);
   background-color: var(--utrecht-link-focus-background-color, transparent);
   text-decoration-skip: none;
   text-decoration-skip-ink: none;
@@ -2900,6 +2920,14 @@
   outline-offset: var(--utrecht-focus-outline-offset, revert);
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
+  --_utrecht-link-state-text-decoration: var(
+    --utrecht-link-focus-visible-text-decoration,
+    var(--utrecht-link-focus-text-decoration)
+  );
+  --_utrecht-link-state-text-decoration-thickness: var(
+    --utrecht-link-focus-visible-text-decoration-thickness,
+    var(--utrecht-link-focus-text-decoration-thickness)
+  );
   z-index: var(--utrecht-stack-focus-z-index, 1);
 }
 
@@ -3010,16 +3038,6 @@
   text-underline-offset: var(--utrecht-link-text-underline-offset);
 }
 
-.utrecht-link--icon-left {
-  background-image: var(--utrecht-link-icon-left-background-image, none);
-  background-position: 0 0.25em;
-  background-repeat: no-repeat;
-  color: var(--utrecht-link-color, LinkText);
-  font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
-  padding-left: var(--utrecht-space-block-md);
-  text-decoration-line: none;
-}
-
 .utrecht-link--visited {
   --_utrecht-link-forced-colors-color: visitedtext;
   --_utrecht-link-state-color: var(--utrecht-link-visited-color);
@@ -3036,8 +3054,6 @@
 
 .utrecht-link--focus {
   --_utrecht-link-state-color: var(--utrecht-link-focus-color);
-  --_utrecht-link-state-text-decoration: var(--utrecht-link-focus-text-decoration);
-  --_utrecht-link-state-text-decoration-thickness: var(--utrecht-link-focus-text-decoration-thickness);
   background-color: var(--utrecht-link-focus-background-color, transparent);
   text-decoration-skip: none;
   text-decoration-skip-ink: none;
@@ -3051,16 +3067,18 @@
   outline-offset: var(--utrecht-focus-outline-offset, revert);
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
+  --_utrecht-link-state-text-decoration: var(
+    --utrecht-link-focus-visible-text-decoration,
+    var(--utrecht-link-focus-text-decoration)
+  );
+  --_utrecht-link-state-text-decoration-thickness: var(
+    --utrecht-link-focus-visible-text-decoration-thickness,
+    var(--utrecht-link-focus-text-decoration-thickness)
+  );
   z-index: var(--utrecht-stack-focus-z-index, 1);
 }
-.utrecht-link--html-span:focus,
-.utrecht-link--html-a[href]:focus {
-  --_utrecht-link-state-color: var(--utrecht-link-focus-color);
-  --_utrecht-link-state-text-decoration: var(--utrecht-link-focus-text-decoration);
-  --_utrecht-link-state-text-decoration-thickness: var(--utrecht-link-focus-text-decoration-thickness);
-  background-color: var(--utrecht-link-focus-background-color, transparent);
-  text-decoration-skip: none;
-  text-decoration-skip-ink: none;
+.utrecht-link--html-span[prince-xml-ignore-pseudo-class-focus-visible],
+.utrecht-link--html-a[prince-xml-ignore-pseudo-class-focus-visible] {
   --_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);
@@ -3068,13 +3086,22 @@
   outline-offset: var(--utrecht-focus-outline-offset, revert);
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
+  --_utrecht-link-state-text-decoration: var(
+    --utrecht-link-focus-visible-text-decoration,
+    var(--utrecht-link-focus-text-decoration)
+  );
+  --_utrecht-link-state-text-decoration-thickness: var(
+    --utrecht-link-focus-visible-text-decoration-thickness,
+    var(--utrecht-link-focus-text-decoration-thickness)
+  );
   z-index: var(--utrecht-stack-focus-z-index, 1);
 }
-
-.utrecht-link--html-span:focus:not([prince-xml-ignore-pseudo-class-focus-visible]),
-.utrecht-link--html-a[href]:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
-  box-shadow: none;
-  outline-style: revert;
+.utrecht-link--html-span:focus,
+.utrecht-link--html-a[href]:focus {
+  --_utrecht-link-state-color: var(--utrecht-link-focus-color);
+  background-color: var(--utrecht-link-focus-background-color, transparent);
+  text-decoration-skip: none;
+  text-decoration-skip-ink: none;
 }
 
 .utrecht-link--html-span:active,
@@ -3302,13 +3329,23 @@
   fill: var(--utrecht-logo-decoration-3-color, #ffb70b);
 }
 .utrecht-logo {
+  margin-bottom: 0;
+  margin-top: 0;
+  margin-right: 0;
+  margin-left: 0;
   display: block;
   max-height: var(--utrecht-logo-max-block-size, 192px);
   max-width: var(--utrecht-logo-max-inline-size, 96px);
   min-height: var(--utrecht-logo-min-block-size);
   min-width: var(--utrecht-logo-min-inline-size);
 }
-.utrecht-logo > * {
+.utrecht-logo svg[role=img][aria-label] {
+  -prince-alt-text: attr(aria-label);
+  -prince-pdf-tag-type: figure;
+}
+.utrecht-logo > img,
+.utrecht-logo > picture,
+.utrecht-logo > svg {
   height: 100%;
   display: inline-block;
   width: auto;
@@ -3357,7 +3394,7 @@
   color: var(--utrecht-mapcontrolbutton-disabled-color);
 }
 
-.utrecht-mapcontrolbutton--focus-visible, .utrecht-mapcontrolbutton:focus:not(:disabled, [aria-disabled=true], .utrecht-mapcontrolbutton--disabled) {
+.utrecht-mapcontrolbutton--focus-visible, .utrecht-mapcontrolbutton[prince-xml-ignore-pseudo-class-focus-visible] {
   --_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);
@@ -3370,11 +3407,6 @@
 .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));
 }
-.utrecht-mapcontrolbutton:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
-  box-shadow: none;
-  outline-style: revert;
-}
-
 .utrecht-mapcontrolbutton--hover:not(:disabled),
 .utrecht-mapcontrolbutton:hover:not(:disabled, .utrecht-mapcontrolbutton--disabled) {
   background-color: var(--utrecht-mapcontrolbutton-hover-background-color);
@@ -3442,7 +3474,7 @@
   color: var(--utrecht-menulijst-item-hover-color, var(--utrecht-link-hover-color, red));
 }
 
-.utrecht-menulijst__link--focus-visible, .utrecht-menulijst__link:focus {
+.utrecht-menulijst__link--focus-visible, .utrecht-menulijst__link[prince-xml-ignore-pseudo-class-focus-visible] {
   --_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);
@@ -3451,11 +3483,6 @@
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
 }
-
-.utrecht-menulijst__link:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
-  box-shadow: none;
-  outline-style: revert;
-}
 .utrecht-multiline-data {
   white-space: pre-line;
 }
@@ -3579,7 +3606,7 @@
   text-decoration: underline;
 }
 
-.utrecht-sidenav__link--focus-visible, .utrecht-sidenav__link:focus {
+.utrecht-sidenav__link--focus-visible, .utrecht-sidenav__link[prince-xml-ignore-pseudo-class-focus-visible] {
   --_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);
@@ -3668,11 +3695,6 @@
 .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child::after {
   display: none;
 }
-
-.utrecht-sidenav__link:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
-  box-shadow: none;
-  outline-style: revert;
-}
 .utrecht-navhtml {
   font-family: var(--utrecht-document-font-family);
 }
@@ -3729,7 +3751,7 @@
   color: var(--utrecht-topnav-link-focus-color, var(--utrecht-topnav-link-color));
 }
 
-.utrecht-topnav__link--focus-visible, .utrecht-topnav__link:focus {
+.utrecht-topnav__link--focus-visible, .utrecht-topnav__link[prince-xml-ignore-pseudo-class-focus-visible] {
   --_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);
@@ -3738,14 +3760,12 @@
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
 }
-
-.utrecht-topnav__link:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
-  box-shadow: none;
-  outline-style: revert;
-}
 .utrecht-number-badge {
   background-color: var(--utrecht-number-badge-background-color, var(--utrecht-badge-background-color, hsl(0, 0%, 0%)));
+  border-color: var(--utrecht-number-badge-border-color, var(--utrecht-badge-border-color));
   border-radius: var(--utrecht-number-badge-border-radius, var(--utrecht-badge-border-radius, 0.5ch));
+  border-style: solid;
+  border-width: max(var(--utrecht-number-badge-border-width, var(--utrecht-badge-border-width, 0)), var(--_utrecht-number-badge-min-border-width, 0));
   color: var(--utrecht-number-badge-color, var(--utrecht-badge-color, hsl(0, 0%, 100%)));
   display: inline-block;
   font-family: var(--utrecht-number-badge-font-family, var(--utrecht-badge-font-family, var(--utrecht-document-font-family, sans-serif)));
@@ -3956,8 +3976,8 @@
   color: var(--utrecht-pagination-page-link-hover-color, var(--utrecht-pagination-page-link-color));
 }
 
-.utrecht-pagination__page-link:focus,
-.utrecht-pagination__relative-link:focus {
+.utrecht-pagination__page-link[prince-xml-ignore-pseudo-class-focus-visible],
+.utrecht-pagination__relative-link[prince-xml-ignore-pseudo-class-focus-visible] {
   --_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);
@@ -3966,12 +3986,6 @@
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
 }
-
-.utrecht-pagination__page-link:focus:not([prince-xml-ignore-pseudo-class-focus-visible]),
-.utrecht-pagination__relative-link:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
-  box-shadow: none;
-  outline-style: revert;
-}
 .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));
@@ -4165,10 +4179,19 @@
 }
 
 .utrecht-radio-button--disabled {
-  --_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);
+  --_utrecht-radio-button-background-color: var(
+    --utrecht-radio-button-disabled-background-color,
+    var(--utrecht-radio-button-background-color)
+  );
+  --_utrecht-radio-button-border-color: var(
+    --utrecht-radio-button-disabled-border-color,
+    var(--utrecht-radio-button-border-color)
+  );
+  --_utrecht-radio-button-border-width: var(
+    --utrecht-radio-button-disabled-border-width,
+    var(--utrecht-radio-button-border-width)
+  );
+  --_utrecht-radio-button-color: var(--utrecht-radio-button-disabled-color, var(--utrecht-radio-button-color));
   --_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);
@@ -4212,10 +4235,19 @@
   --_utrecht-radio-button-state-hover-color: var(--utrecht-radio-button-checked-hover-color);
 }
 .utrecht-radio-button--html-input:disabled {
-  --_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);
+  --_utrecht-radio-button-background-color: var(
+    --utrecht-radio-button-disabled-background-color,
+    var(--utrecht-radio-button-background-color)
+  );
+  --_utrecht-radio-button-border-color: var(
+    --utrecht-radio-button-disabled-border-color,
+    var(--utrecht-radio-button-border-color)
+  );
+  --_utrecht-radio-button-border-width: var(
+    --utrecht-radio-button-disabled-border-width,
+    var(--utrecht-radio-button-border-width)
+  );
+  --_utrecht-radio-button-color: var(--utrecht-radio-button-disabled-color, var(--utrecht-radio-button-color));
   --_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);
@@ -6133,6 +6165,7 @@
   font-size: var(--utrecht-select-font-size, var(--utrecht-form-control-font-size));
   font-weight: var(--utrecht-select-font-size, var(--utrecht-form-control-font-weight, initial));
   width: 100%;
+  line-height: var(--utrecht-select-line-height, var(--utrecht-form-control-line-height, initial));
   min-height: var(--utrecht-select-min-block-size, var(--utrecht-pointer-target-min-size, 44px));
   min-width: var(--utrecht-pointer-target-min-size, 44px);
   max-width: var(--utrecht-select-max-inline-size, var(--utrecht-form-control-max-inline-size));
@@ -6193,6 +6226,8 @@
   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))));
+}
+.utrecht-select--html-select[prince-xml-ignore-pseudo-class-focus-visible] {
   --_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);
@@ -6201,10 +6236,6 @@
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
 }
-.utrecht-select--html-select:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
-  box-shadow: none;
-  outline-style: revert;
-}
 .utrecht-select--html-select:disabled {
   background-color: var(--utrecht-select-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
   border-color: var(--utrecht-select-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
@@ -6273,9 +6304,18 @@
   position: fixed;
   z-index: var(--utrecht-skip-link-z-index, var(--utrecht-layer-focus-z-index));
 }
+.utrecht-skip-link--focus {
+  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
+    var(--utrecht-focus-inverse-outline-color, transparent);
+  box-shadow: var(--_utrecht-focus-ring-box-shadow);
+  outline-color: var(--utrecht-focus-outline-color, revert);
+  outline-offset: var(--utrecht-focus-outline-offset, revert);
+  outline-style: var(--utrecht-focus-outline-style, revert);
+  outline-width: var(--utrecht-focus-outline-width, revert);
+  text-decoration: var(--utrecht-skip-link-focus-visible-text-decoration, var(--utrecht-skip-link-focus-text-decoration));
+}
 
-.utrecht-skip-link--focus,
-.utrecht-skip-link:focus,
+.utrecht-skip-link--focus-visible,
 .utrecht-skip-link[prince-xml-ignore-pseudo-class-focus-visible] {
   --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
     var(--utrecht-focus-inverse-outline-color, transparent);
@@ -6284,7 +6324,7 @@
   outline-offset: var(--utrecht-focus-outline-offset, revert);
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
-  text-decoration: var(--utrecht-skip-link-focus-text-decoration);
+  text-decoration: var(--utrecht-skip-link-focus-visible-text-decoration, var(--utrecht-skip-link-focus-text-decoration));
 }
 .utrecht-spotlight-section {
   background-color: var(--_utrecht-spotlight-section-background-color, var(--utrecht-spotlight-section-background-color));
@@ -6771,6 +6811,8 @@
   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))));
+}
+.utrecht-textarea--html-textarea[prince-xml-ignore-pseudo-class-focus-visible] {
   --_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);
@@ -6779,10 +6821,6 @@
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
 }
-.utrecht-textarea--html-textarea:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
-  box-shadow: none;
-  outline-style: revert;
-}
 .utrecht-textarea--html-textarea:invalid, .utrecht-textarea--html-textarea[aria-invalid=true] {
   --_utrecht-textarea-border-width: var(
     --utrecht-textarea-invalid-border-width,
@@ -6966,6 +7004,8 @@
   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))));
+}
+.utrecht-textbox--html-input[prince-xml-ignore-pseudo-class-focus-visible] {
   --_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);
@@ -6974,10 +7014,6 @@
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
 }
-.utrecht-textbox--html-input:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
-  box-shadow: none;
-  outline-style: revert;
-}
 .utrecht-textbox--html-input:invalid, .utrecht-textbox--html-input[aria-invalid=true] {
   --_utrecht-textbox-border-width: var(
     --utrecht-textbox-invalid-border-width,
@@ -7045,7 +7081,7 @@
   transform: var(--utrecht-toptask-link-hover-transform-scale, 1);
 }
 
-.utrecht-toptask-link--focus-visible, .utrecht-toptask-link:focus {
+.utrecht-toptask-link--focus-visible, .utrecht-toptask-link[prince-xml-ignore-pseudo-class-focus-visible] {
   --_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);
@@ -7059,10 +7095,6 @@
   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));
 }
-.utrecht-toptask-link:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
-  box-shadow: none;
-  outline-style: revert;
-}
 
 .utrecht-toptask-link__title {
   display: block;
@@ -7143,7 +7175,14 @@
 }
 .utrecht-html blockquote {
   background-color: var(--utrecht-blockquote-background-color);
+  border-color: var(--utrecht-blockquote-border-color);
+  border-radius: var(--utrecht-blockquote-border-radius, 0);
+  border-style: solid;
+  border-width: var(--utrecht-blockquote-border-width, 0);
+  border-left-width: var(--utrecht-blockquote-border-inline-start-width, var(--utrecht-blockquote-border-width, 0));
   color: var(--utrecht-blockquote-color);
+  display: flex;
+  flex-direction: column;
   font-family: var(--utrecht-document-font-family);
   font-size: var(--utrecht-blockquote-font-size);
   font-style: var(--utrecht-blockquote-font-style);
@@ -7155,6 +7194,7 @@
   padding-top: var(--utrecht-blockquote-padding-block-start);
   padding-right: var(--utrecht-blockquote-padding-inline-end);
   padding-left: var(--utrecht-blockquote-padding-inline-start);
+  row-gap: var(--utrecht-blockquote-row-gap, 0);
   --utrecht-document-color: var(--utrecht-blockquote-content-color, inherit);
   --utrecht-paragraph-font-size: var(--utrecht-blockquote-content-font-size, inherit);
   color: var(--utrecht-blockquote-content-color, inherit);
@@ -7371,12 +7411,12 @@
   border-width: var(--_utrecht-button-border-width);
   box-sizing: border-box;
   color: var(--_utrecht-button-color);
+  column-gap: var(--utrecht-button-column-gap);
   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-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
-  gap: var(--utrecht-button-icon-gap);
   width: var(--utrecht-button-inline-size, auto);
   justify-content: center;
   line-height: var(--_utrecht-button-line-height);
@@ -7460,7 +7500,7 @@
 .utrecht-html input[type=checkbox i]:disabled {
   cursor: var(--utrecht-action-disabled-cursor, revert);
 }
-.utrecht-html input[type=checkbox i]:focus {
+.utrecht-html input[type=checkbox i] [prince-xml-ignore-pseudo-class-focus-visible] {
   --_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);
@@ -7469,10 +7509,6 @@
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
 }
-.utrecht-html input[type=checkbox i]:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
-  box-shadow: none;
-  outline-style: revert;
-}
 .utrecht-html body {
   -webkit-font-smoothing: auto !important;
   -moz-osx-font-smoothing: auto !important;
@@ -7701,11 +7737,11 @@
 }
 .utrecht-html a:focus {
   --_utrecht-link-state-color: var(--utrecht-link-focus-color);
-  --_utrecht-link-state-text-decoration: var(--utrecht-link-focus-text-decoration);
-  --_utrecht-link-state-text-decoration-thickness: var(--utrecht-link-focus-text-decoration-thickness);
   background-color: var(--utrecht-link-focus-background-color, transparent);
   text-decoration-skip: none;
   text-decoration-skip-ink: none;
+}
+.utrecht-html a[prince-xml-ignore-pseudo-class-focus-visible] {
   --_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);
@@ -7713,12 +7749,16 @@
   outline-offset: var(--utrecht-focus-outline-offset, revert);
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
+  --_utrecht-link-state-text-decoration: var(
+    --utrecht-link-focus-visible-text-decoration,
+    var(--utrecht-link-focus-text-decoration)
+  );
+  --_utrecht-link-state-text-decoration-thickness: var(
+    --utrecht-link-focus-visible-text-decoration-thickness,
+    var(--utrecht-link-focus-text-decoration-thickness)
+  );
   z-index: var(--utrecht-stack-focus-z-index, 1);
 }
-.utrecht-html a:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
-  box-shadow: none;
-  outline-style: revert;
-}
 .utrecht-html a[href^="tel:" i] {
   white-space: nowrap;
 }
@@ -7750,24 +7790,9 @@
   margin-bottom: calc(var(--utrecht-space-around, 0) * var(--utrecht-paragraph-margin-block-end, 0));
   margin-top: calc(var(--utrecht-space-around, 0) * var(--utrecht-paragraph-margin-block-start, 0));
 }
-.utrecht-html p.lead {
-  color: var(--utrecht-paragraph-lead-color, var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit)));
-  font-size: var(--utrecht-paragraph-lead-font-size, var(--utrecht-paragraph-font-size, inherit));
-  font-weight: var(--utrecht-paragraph-lead-font-weight, var(--utrecht-paragraph-font-weight, inherit));
-  line-height: var(--utrecht-paragraph-lead-line-height, var(--utrecht-paragraph-line-height, inherit));
-}
 .utrecht-html * ~ p {
   --utrecht-space-around: 1;
 }
-.utrecht-html p:has(> small:only-child) {
-  color: var(--utrecht-paragraph-small-color, var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit)));
-  font-size: var(--utrecht-paragraph-small-font-size, var(--utrecht-paragraph-font-size, inherit));
-  font-weight: var(--utrecht-paragraph-small-font-weight, var(--utrecht-paragraph-font-weight, inherit));
-  line-height: var(--utrecht-paragraph-small-line-height, var(--utrecht-paragraph-line-height, inherit));
-}
-.utrecht-html p > small:only-child {
-  font-size: inherit;
-}
 .utrecht-html pre:has(> code:only-child) {
   background-color: var(--utrecht-code-background-color);
   color: var(--utrecht-code-color);
@@ -7872,10 +7897,19 @@
   --_utrecht-radio-button-state-hover-color: var(--utrecht-radio-button-checked-hover-color);
 }
 .utrecht-html input[type=radio i]:disabled {
-  --_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);
+  --_utrecht-radio-button-background-color: var(
+    --utrecht-radio-button-disabled-background-color,
+    var(--utrecht-radio-button-background-color)
+  );
+  --_utrecht-radio-button-border-color: var(
+    --utrecht-radio-button-disabled-border-color,
+    var(--utrecht-radio-button-border-color)
+  );
+  --_utrecht-radio-button-border-width: var(
+    --utrecht-radio-button-disabled-border-width,
+    var(--utrecht-radio-button-border-width)
+  );
+  --_utrecht-radio-button-color: var(--utrecht-radio-button-disabled-color, var(--utrecht-radio-button-color));
   --_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);
@@ -7972,6 +8006,7 @@
   font-size: var(--utrecht-select-font-size, var(--utrecht-form-control-font-size));
   font-weight: var(--utrecht-select-font-size, var(--utrecht-form-control-font-weight, initial));
   width: 100%;
+  line-height: var(--utrecht-select-line-height, var(--utrecht-form-control-line-height, initial));
   min-height: var(--utrecht-select-min-block-size, var(--utrecht-pointer-target-min-size, 44px));
   min-width: var(--utrecht-pointer-target-min-size, 44px);
   max-width: var(--utrecht-select-max-inline-size, var(--utrecht-form-control-max-inline-size));
@@ -7989,6 +8024,8 @@
   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))));
+}
+.utrecht-html select[prince-xml-ignore-pseudo-class-focus-visible] {
   --_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);
@@ -7997,10 +8034,6 @@
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
 }
-.utrecht-html select:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
-  box-shadow: none;
-  outline-style: revert;
-}
 .utrecht-html select:disabled {
   background-color: var(--utrecht-select-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
   border-color: var(--utrecht-select-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
@@ -8175,6 +8208,8 @@
   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))));
+}
+.utrecht-html textarea[prince-xml-ignore-pseudo-class-focus-visible] {
   --_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);
@@ -8183,10 +8218,6 @@
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
 }
-.utrecht-html textarea:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
-  box-shadow: none;
-  outline-style: revert;
-}
 .utrecht-html textarea:invalid, .utrecht-html textarea[aria-invalid=true] {
   --_utrecht-textarea-border-width: var(
     --utrecht-textarea-invalid-border-width,
@@ -8297,6 +8328,20 @@
   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))));
+}
+.utrecht-html input:not([type])[prince-xml-ignore-pseudo-class-focus-visible],
+.utrecht-html input[type=date i][prince-xml-ignore-pseudo-class-focus-visible],
+.utrecht-html input[type=datetime-local i][prince-xml-ignore-pseudo-class-focus-visible],
+.utrecht-html input[type=email i][prince-xml-ignore-pseudo-class-focus-visible],
+.utrecht-html input[type=month i][prince-xml-ignore-pseudo-class-focus-visible],
+.utrecht-html input[type=number i][prince-xml-ignore-pseudo-class-focus-visible],
+.utrecht-html input[type=password i][prince-xml-ignore-pseudo-class-focus-visible],
+.utrecht-html input[type=search i][prince-xml-ignore-pseudo-class-focus-visible],
+.utrecht-html input[type=tel i][prince-xml-ignore-pseudo-class-focus-visible],
+.utrecht-html input[type=text i][prince-xml-ignore-pseudo-class-focus-visible],
+.utrecht-html input[type=time i][prince-xml-ignore-pseudo-class-focus-visible],
+.utrecht-html input[type=url i][prince-xml-ignore-pseudo-class-focus-visible],
+.utrecht-html input[type=week i][prince-xml-ignore-pseudo-class-focus-visible] {
   --_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);
@@ -8305,22 +8350,6 @@
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
 }
-.utrecht-html input:not([type]):focus:not([prince-xml-ignore-pseudo-class-focus-visible]),
-.utrecht-html input[type=date i]:focus:not([prince-xml-ignore-pseudo-class-focus-visible]),
-.utrecht-html input[type=datetime-local i]:focus:not([prince-xml-ignore-pseudo-class-focus-visible]),
-.utrecht-html input[type=email i]:focus:not([prince-xml-ignore-pseudo-class-focus-visible]),
-.utrecht-html input[type=month i]:focus:not([prince-xml-ignore-pseudo-class-focus-visible]),
-.utrecht-html input[type=number i]:focus:not([prince-xml-ignore-pseudo-class-focus-visible]),
-.utrecht-html input[type=password i]:focus:not([prince-xml-ignore-pseudo-class-focus-visible]),
-.utrecht-html input[type=search i]:focus:not([prince-xml-ignore-pseudo-class-focus-visible]),
-.utrecht-html input[type=tel i]:focus:not([prince-xml-ignore-pseudo-class-focus-visible]),
-.utrecht-html input[type=text i]:focus:not([prince-xml-ignore-pseudo-class-focus-visible]),
-.utrecht-html input[type=time i]:focus:not([prince-xml-ignore-pseudo-class-focus-visible]),
-.utrecht-html input[type=url i]:focus:not([prince-xml-ignore-pseudo-class-focus-visible]),
-.utrecht-html input[type=week i]:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
-  box-shadow: none;
-  outline-style: revert;
-}
 .utrecht-html input:not([type]):invalid, .utrecht-html input:not([type])[aria-invalid=true],
 .utrecht-html input[type=date i]:invalid,
 .utrecht-html input[type=date i][aria-invalid=true],