@utrecht/component-library-css 5.2.0 → 6.1.0

package/dist/index.css

@@ -501,7 +501,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-inline-start-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);
@@ -513,14 +520,25 @@
   padding-block-start: var(--utrecht-blockquote-padding-block-start);
   padding-inline-end: var(--utrecht-blockquote-padding-inline-end);
   padding-inline-start: var(--utrecht-blockquote-padding-inline-start);
+  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-block-end: 0;
+  margin-block-start: 0;
+  margin-inline-end: 0;
+  margin-inline-start: 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);
@@ -530,6 +548,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);
@@ -927,12 +952,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);
   inline-size: var(--utrecht-button-inline-size, auto);
   justify-content: center;
   line-height: var(--_utrecht-button-line-height);
@@ -1305,12 +1330,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);
   inline-size: var(--utrecht-button-inline-size, auto);
   justify-content: center;
   line-height: var(--_utrecht-button-line-height);
@@ -1382,7 +1407,7 @@
   scale: var(--utrecht-button-focus-scale, 1);
 }
 
-.utrecht-button:focus {
+.utrecht-button: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);
@@ -1397,17 +1422,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(:focus-visible) {
-  box-shadow: none;
-  outline-style: revert;
 }
 
 .utrecht-button--hover:not(:disabled, .utrecht-button--disabled),
@@ -1882,7 +1896,7 @@
 .utrecht-checkbox--html-input:disabled {
   cursor: var(--utrecht-action-disabled-cursor, revert);
 }
-.utrecht-checkbox--html-input:focus {
+.utrecht-checkbox--html-input :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);
@@ -1891,10 +1905,6 @@
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
 }
-.utrecht-checkbox--html-input:focus:not(:focus-visible) {
-  box-shadow: none;
-  outline-style: revert;
-}
 .utrecht-code-block {
   background-color: var(--utrecht-code-background-color);
   color: var(--utrecht-code-color);
@@ -1967,6 +1977,12 @@
   column-width: var(--utrecht-column-layout-column-width, 40ch);
   display: block;
 }
+@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 {
   column-rule-color: var(--utrecht-column-layout-column-rule-color);
@@ -2495,7 +2511,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) {
@@ -2508,7 +2524,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) {
@@ -2540,7 +2556,7 @@
 }
 
 .utrecht-form-field .utrecht-form-field-description--invalid {
-  grid-area: description-invalid;
+  grid-area: error-message;
   order: 3;
 }
 
@@ -2555,6 +2571,11 @@
   grid-area: description-before;
   order: 4;
 }
+
+.utrecht-form-field__error-message {
+  grid-area: error-message;
+  order: 3;
+}
 .utrecht-form-fieldset {
   margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-end, 0));
   margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-start, 0));
@@ -2984,8 +3005,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;
@@ -2999,6 +3018,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);
 }
 
@@ -3110,16 +3137,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-inline-start: 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);
@@ -3136,8 +3153,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;
@@ -3151,16 +3166,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:any-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;
+.utrecht-link--html-span:focus-visible,
+.utrecht-link--html-a: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);
@@ -3168,13 +3185,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(:focus-visible),
-.utrecht-link--html-a:any-link:focus:not(:focus-visible) {
-  box-shadow: none;
-  outline-style: revert;
+.utrecht-link--html-span:focus,
+.utrecht-link--html-a:any-link: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,
@@ -3434,13 +3460,19 @@
   fill: var(--utrecht-logo-decoration-3-color, #ffb70b);
 }
 .utrecht-logo {
+  margin-block-end: 0;
+  margin-block-start: 0;
+  margin-inline-end: 0;
+  margin-inline-start: 0;
   display: block;
   max-block-size: var(--utrecht-logo-max-block-size, 192px);
   max-inline-size: var(--utrecht-logo-max-inline-size, 96px);
   min-block-size: var(--utrecht-logo-min-block-size);
   min-inline-size: var(--utrecht-logo-min-inline-size);
 }
-.utrecht-logo > * {
+.utrecht-logo > img,
+.utrecht-logo > picture,
+.utrecht-logo > svg {
   block-size: 100%;
   display: inline-block;
   inline-size: auto;
@@ -3489,7 +3521,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: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);
@@ -3502,11 +3534,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(: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);
@@ -3574,7 +3601,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: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);
@@ -3583,11 +3610,6 @@
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
 }
-
-.utrecht-menulijst__link:focus:not(:focus-visible) {
-  box-shadow: none;
-  outline-style: revert;
-}
 .utrecht-multiline-data {
   white-space: pre-line;
   white-space-collapse: preserve-breaks;
@@ -3724,7 +3746,7 @@
   text-decoration: underline;
 }
 
-.utrecht-sidenav__link--focus-visible, .utrecht-sidenav__link:focus {
+.utrecht-sidenav__link--focus-visible, .utrecht-sidenav__link: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);
@@ -3813,11 +3835,6 @@
 .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child::after {
   display: none;
 }
-
-.utrecht-sidenav__link:focus:not(:focus-visible) {
-  box-shadow: none;
-  outline-style: revert;
-}
 .utrecht-navhtml {
   font-family: var(--utrecht-document-font-family);
 }
@@ -3874,7 +3891,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: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);
@@ -3883,14 +3900,12 @@
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
 }
-
-.utrecht-topnav__link:focus:not(: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)));
@@ -3910,11 +3925,10 @@
   text-decoration: none;
   white-space: nowrap;
 }
-@media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
+@media screen and (forced-colors: active) {
   .utrecht-number-badge {
+    --_utrecht-number-badge-min-border-width: 1px;
     border-color: currentColor;
-    border-style: solid;
-    border-width: 1px;
   }
 }
 .utrecht-number-data {
@@ -4108,8 +4122,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:focus-visible,
+.utrecht-pagination__relative-link: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);
@@ -4118,12 +4132,6 @@
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
 }
-
-.utrecht-pagination__page-link:focus:not(:focus-visible),
-.utrecht-pagination__relative-link:focus:not(: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));
@@ -4312,10 +4320,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);
@@ -4359,10 +4376,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);
@@ -6280,6 +6306,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));
   inline-size: 100%;
+  line-height: var(--utrecht-select-line-height, var(--utrecht-form-control-line-height, initial));
   min-block-size: var(--utrecht-select-min-block-size, var(--utrecht-pointer-target-min-size, 44px));
   min-inline-size: var(--utrecht-pointer-target-min-size, 44px);
   max-inline-size: var(--utrecht-select-max-inline-size, var(--utrecht-form-control-max-inline-size));
@@ -6335,6 +6362,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: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);
@@ -6343,10 +6372,6 @@
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
 }
-.utrecht-select--html-select:focus:not(: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))));
@@ -6415,9 +6440,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:focus-visible {
   --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
     var(--utrecht-focus-inverse-outline-color, transparent);
@@ -6426,7 +6460,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));
@@ -6890,6 +6924,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: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);
@@ -6898,10 +6934,6 @@
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
 }
-.utrecht-textarea--html-textarea:focus:not(: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,
@@ -7076,6 +7108,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: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);
@@ -7084,10 +7118,6 @@
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
 }
-.utrecht-textbox--html-input:focus:not(: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,
@@ -7155,7 +7185,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: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);
@@ -7169,10 +7199,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(:focus-visible) {
-  box-shadow: none;
-  outline-style: revert;
-}
 
 .utrecht-toptask-link__title {
   display: block;