@utrecht/component-library-css 5.1.0 → 6.0.0

package/dist/index.css

@@ -927,12 +927,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 +1305,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 +1382,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 +1397,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 +1871,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 +1880,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);
@@ -2984,8 +2969,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 +2982,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 +3101,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 +3117,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 +3130,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 +3149,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,
@@ -3489,7 +3479,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 +3492,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 +3559,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 +3568,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 +3704,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 +3793,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 +3849,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 +3858,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 +3883,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 +4080,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 +4090,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 +4278,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 +4334,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 +6264,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 +6320,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 +6330,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 +6398,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 +6418,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));
@@ -6457,6 +6449,22 @@
   --_utrecht-spotlight-section-border-width: var(--utrecht-spotlight-section-warning-border-width);
   --_utrecht-spotlight-section-color: var(--utrecht-spotlight-section-warning-color);
 }
+
+.utrecht-spotlight-section--error {
+  --_utrecht-spotlight-section-icon-color: var(--utrecht-spotlight-section-icon-error-color);
+  --_utrecht-spotlight-section-background-color: var(--utrecht-spotlight-section-error-background-color);
+  --_utrecht-spotlight-section-border-color: var(--utrecht-spotlight-section-error-border-color);
+  --_utrecht-spotlight-section-border-width: var(--utrecht-spotlight-section-error-border-width);
+  --_utrecht-spotlight-section-color: var(--utrecht-spotlight-section-error-color);
+}
+
+.utrecht-spotlight-section--ok {
+  --_utrecht-spotlight-section-icon-color: var(--utrecht-spotlight-section-icon-ok-color);
+  --_utrecht-spotlight-section-background-color: var(--utrecht-spotlight-section-ok-background-color);
+  --_utrecht-spotlight-section-border-color: var(--utrecht-spotlight-section-ok-border-color);
+  --_utrecht-spotlight-section-border-width: var(--utrecht-spotlight-section-ok-border-width);
+  --_utrecht-spotlight-section-color: var(--utrecht-spotlight-section-ok-color);
+}
 .utrecht-surface {
   background-color: var(--utrecht-surface-background-color, inherit);
   color: var(--utrecht-surface-color, inherit);
@@ -6770,6 +6778,28 @@
   background-color: papayawhip;
   color: maroon;
 }
+.utrecht-table-of-contents {
+  page-break-inside: avoid;
+}
+
+.utrecht-table-of-contents__list {
+  list-style-type: none;
+  padding-inline-start: 0;
+  page-break-inside: avoid;
+}
+
+.utrecht-table-of-contents__list-item {
+  margin-block-end: var(--utrecht-unordered-list-item-margin-block-end);
+  margin-block-start: var(--utrecht-unordered-list-item-margin-block-start);
+}
+
+.utrecht-table-of-contents__list-item::before {
+  content: "";
+}
+
+.utrecht-table-of-contents__list-item-label {
+  font-variant-numeric: lining-nums tabular-nums;
+}
 .utrecht-textarea {
   background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));
   block-size: initial;
@@ -6852,6 +6882,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);
@@ -6860,10 +6892,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,
@@ -7038,6 +7066,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);
@@ -7046,10 +7076,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,
@@ -7117,7 +7143,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);
@@ -7131,10 +7157,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;