@utrecht/component-library-css 5.1.0 → 5.2.0

package/dist/index.css

@@ -6457,6 +6457,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 +6786,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;

package/dist/prince-xml.css

@@ -189,7 +189,7 @@
   min-width: var(--utrecht-alert-dialog-min-inline-size);
 }
 
-.utrecht-alert-dialog::backdrop {
+.utrecht-alert-dialog[prince-xml-ignore-pseudo-element-backdrop] {
   --_utrecht-backdrop-opacity: var(--utrecht-backdrop-opacity);
   --_utrecht-backdrop-fade-in-animation-duration: var(--utrecht-backdrop-fade-in-animation-duration, 0);
   animation-duration: min(var(--utrecht-motion-max-animation-duration, var(--_utrecht-backdrop-fade-in-animation-duration)), var(--_utrecht-backdrop-fade-in-animation-duration, 0));
@@ -201,16 +201,6 @@
   -webkit-user-select: none;
   user-select: none;
 }
-@media (prefers-reduced-motion: reduce) {
-  .utrecht-alert-dialog::backdrop {
-    --_utrecht-backdrop-fade-in-animation-duration: 0;
-  }
-}
-@media (prefers-reduced-transparency: reduce) {
-  .utrecht-alert-dialog::backdrop {
-    --_utrecht-backdrop-opacity: var(--utrecht-backdrop-reduced-transparency-opacity, 100%);
-  }
-}
 
 .utrecht-alert-dialog__icon {
   --utrecht-icon-color: var(--_utrecht-alert-icon-color, var(--utrecht-alert-icon-color));
@@ -333,16 +323,6 @@
   position: absolute;
   z-index: var(--utrecht-backdrop-z-index);
 }
-@media (prefers-reduced-motion: reduce) {
-  .utrecht-backdrop {
-    --_utrecht-backdrop-fade-in-animation-duration: 0;
-  }
-}
-@media (prefers-reduced-transparency: reduce) {
-  .utrecht-backdrop {
-    --_utrecht-backdrop-opacity: var(--utrecht-backdrop-reduced-transparency-opacity, 100%);
-  }
-}
 
 .utrecht-backdrop--reduced-motion {
   --_utrecht-backdrop-fade-in-animation-duration: 0;
@@ -377,13 +357,6 @@
   text-decoration: none;
   white-space: nowrap;
 }
-@media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
-  .utrecht-badge-counter {
-    border-color: currentColor;
-    border-style: solid;
-    border-width: 1px;
-  }
-}
 .utrecht-badge-data {
   background-color: var(--utrecht-badge-background-color, hsl(0, 0%, 0%));
   border-radius: var(--utrecht-badge-border-radius, 0.5ch);
@@ -406,13 +379,6 @@
   letter-spacing: var(--utrecht-badge-data-letter-spacing, inherit);
   text-transform: var(--utrecht-badge-data-text-transform, inherit);
 }
-@media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
-  .utrecht-badge-data {
-    border-color: currentColor;
-    border-style: solid;
-    border-width: 1px;
-  }
-}
 .utrecht-badge-list {
   column-gap: var(--utrecht-badge-list-column-gap);
   display: flex;
@@ -441,13 +407,6 @@
   letter-spacing: var(--utrecht-badge-status-letter-spacing, inherit);
   text-transform: var(--utrecht-badge-status-text-transform, inherit);
 }
-@media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
-  .utrecht-badge-status {
-    border-color: currentColor;
-    border-style: solid;
-    border-width: 1px;
-  }
-}
 
 .utrecht-badge-status--danger {
   background-color: var(--utrecht-feedback-danger-fill-background-color, hsl(0, 100%, 40%));
@@ -949,15 +908,6 @@
   cursor: var(--utrecht-action-navigate-cursor, pointer);
   text-decoration: none;
 }
-@media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
-  .utrecht-button-link {
-    --_utrecht-button-disabled-border-color: GrayText;
-    --_utrecht-button-disabled-color: GrayText;
-    background-color: ButtonFace;
-    border-color: buttonborder;
-    color: ButtonText;
-  }
-}
 
 .utrecht-button-link--active {
   background-color: var(--_utrecht-button-active-background-color);
@@ -1002,7 +952,7 @@
   color: var(--_utrecht-button-focus-color);
   scale: var(--utrecht-button-focus-scale, 1);
 }
-.utrecht-button-link--html-a:focus-visible {
+.utrecht-button-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);
@@ -1325,15 +1275,6 @@
   -webkit-user-select: none;
   user-select: none;
 }
-@media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
-  .utrecht-button {
-    --_utrecht-button-disabled-border-color: GrayText;
-    --_utrecht-button-disabled-color: GrayText;
-    background-color: ButtonFace;
-    border-color: buttonborder;
-    color: ButtonText;
-  }
-}
 
 .utrecht-button--distanced {
   margin-bottom: var(--utrecht-button-margin-block-end);
@@ -1404,7 +1345,7 @@
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
 }
-.utrecht-button:focus:not(:focus-visible) {
+.utrecht-button:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
   box-shadow: none;
   outline-style: revert;
 }
@@ -1898,7 +1839,7 @@
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
 }
-.utrecht-checkbox--html-input:focus:not(:focus-visible) {
+.utrecht-checkbox--html-input:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
   box-shadow: none;
   outline-style: revert;
 }
@@ -1952,22 +1893,6 @@
   display: inline-block;
   width: var(--utrecht-color-sample-inline-size, 2em);
   -webkit-print-color-adjust: exact;
-  print-color-adjust: exact;
-}
-@media (forced-colors: active) {
-  .utrecht-color-sample {
-    forced-color-adjust: none;
-  }
-}
-@media (forced-colors: active) and (prefers-color-scheme: dark) {
-  .utrecht-color-sample {
-    --utrecht-color-sample-default-border-color: var(--utrecht-color-sample-dark-border-color, #000);
-  }
-}
-@media (forced-colors: active) and (prefers-color-scheme: light) {
-  .utrecht-color-sample {
-    --utrecht-color-sample-default-border-color: var(--utrecht-color-sample-light-border-color, #fff);
-  }
 }
 .utrecht-column-layout {
   column-gap: var(--utrecht-column-layout-gap, 2em);
@@ -2035,7 +1960,6 @@
   min-height: 24px;
   min-width: 24px;
   -webkit-print-color-adjust: exact;
-  print-color-adjust: exact;
   vertical-align: top;
 }
 
@@ -2141,8 +2065,8 @@
   border-color: var(--utrecht-checkbox-focus-border-color, var(--utrecht-checkbox-border-color));
   border-width: var(--utrecht-checkbox-focus-border-width, var(--utrecht-checkbox-border-width));
 }
-.utrecht-checkbox--custom.utrecht-checkbox--html-input:focus-visible,
-.utrecht-custom-checkbox--html-input:focus-visible {
+.utrecht-checkbox--custom.utrecht-checkbox--html-input[prince-xml-ignore-pseudo-class-focus-visible],
+.utrecht-custom-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);
@@ -2261,16 +2185,6 @@
     outline-width: 0.1em;
   }
 }
-@media screen and (prefers-contrast: more) {
-  .utrecht-data-placeholder {
-    background-color: var(--utrecht-data-placeholder-high-contrast-background-color, var(--utrecht-data-placeholder-background-color, currentColor));
-  }
-}
-@media screen and (forced-colors: active) {
-  .utrecht-data-placeholder {
-    background-color: GrayText;
-  }
-}
 
 .utrecht-data-placeholder--loading {
   cursor: var(--utrecht-action-busy-cursor, busy);
@@ -2330,7 +2244,7 @@
   z-index: var(--utrecht-drawer-z-index, 1);
 }
 
-.utrecht-drawer::backdrop {
+.utrecht-drawer[prince-xml-ignore-pseudo-element-backdrop] {
   --_utrecht-backdrop-opacity: var(--utrecht-backdrop-opacity);
   --_utrecht-backdrop-fade-in-animation-duration: var(--utrecht-backdrop-fade-in-animation-duration, 0);
   animation-duration: min(var(--utrecht-motion-max-animation-duration, var(--_utrecht-backdrop-fade-in-animation-duration)), var(--_utrecht-backdrop-fade-in-animation-duration, 0));
@@ -2350,16 +2264,6 @@
     opacity: var(--_utrecht-backdrop-opacity);
   }
 }
-@media (prefers-reduced-motion: reduce) {
-  .utrecht-drawer::backdrop {
-    --_utrecht-backdrop-fade-in-animation-duration: 0;
-  }
-}
-@media (prefers-reduced-transparency: reduce) {
-  .utrecht-drawer::backdrop {
-    --_utrecht-backdrop-opacity: var(--utrecht-backdrop-reduced-transparency-opacity, 100%);
-  }
-}
 
 .utrecht-drawer--inline-start {
   height: 100%;
@@ -2670,20 +2574,8 @@
   -webkit-user-select: none;
   user-select: none;
 }
-@media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
-  .utrecht-form-toggle {
-    --utrecht-form-toggle-background-color: ButtonFace;
-    --utrecht-form-toggle-border-color: buttonborder;
-    --utrecht-form-toggle-border-width: 1px;
-    --utrecht-form-toggle-border-radius: var(--utrecht-form-toggle-track-border-radius);
-    --utrecht-form-toggle-thumb-background-color: ButtonText;
-    --utrecht-form-toggle-thumb-disabled-background-color: GrayText;
-    border-color: var(--utrecht-form-toggle-track-disabled-border-color, var(--utrecht-form-toggle-track-border-color));
-    border-width: min(var(--utrecht-form-toggle-border-width, 1px), 1px);
-  }
-}
 
-.utrecht-form-toggle--focus-visible, .utrecht-form-toggle--html-div:focus-visible {
+.utrecht-form-toggle--focus-visible, .utrecht-form-toggle--html-div[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);
@@ -2774,7 +2666,7 @@
   position: absolute !important;
   white-space: nowrap !important;
 }
-.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:focus-visible ~ .utrecht-form-toggle__track {
+.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox[prince-xml-ignore-pseudo-class-focus-visible] ~ .utrecht-form-toggle__track {
   --_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);
@@ -2951,7 +2843,6 @@
   text-decoration-color: var(--_utrecht-link-state-text-decoration-color, var(--utrecht-link-text-decoration-color, currentColor));
   text-decoration-line: var(--_utrecht-link-state-text-decoration, var(--utrecht-link-text-decoration, underline));
   text-decoration-skip-ink: all;
-  text-decoration-thickness: max(var(--_utrecht-link-state-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
   text-underline-offset: var(--utrecht-link-text-underline-offset);
   --utrecht-icon-size: var(--utrecht-button-icon-size, 1em);
   align-items: center;
@@ -3001,7 +2892,7 @@
   text-decoration-skip-ink: none;
 }
 
-.utrecht-link-button--focus-visible, .utrecht-link-button--html-button:focus-visible {
+.utrecht-link-button--focus-visible, .utrecht-link-button--html-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);
@@ -3092,7 +2983,7 @@
   transform: var(--utrecht-link-social-hover-transform-scale);
 }
 
-.utrecht-link-social:focus-visible,
+.utrecht-link-social[prince-xml-ignore-pseudo-class-focus-visible],
 .utrecht-link-social--focus-visible {
   --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
     var(--utrecht-focus-inverse-outline-color, transparent);
@@ -3111,12 +3002,11 @@
   color: var(--_utrecht-link-state-color, var(--utrecht-link-color, var(--_utrecht-link-forced-colors-color)));
 }
 
-.utrecht-link:any-link {
+.utrecht-link[href] {
   --_utrecht-link-forced-colors-color: linktext;
   text-decoration-color: var(--_utrecht-link-state-text-decoration-color, var(--utrecht-link-text-decoration-color, currentColor));
   text-decoration-line: var(--_utrecht-link-state-text-decoration, var(--utrecht-link-text-decoration, underline));
   text-decoration-skip-ink: all;
-  text-decoration-thickness: max(var(--_utrecht-link-state-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
   text-underline-offset: var(--utrecht-link-text-underline-offset);
 }
 
@@ -3134,7 +3024,7 @@
   --_utrecht-link-forced-colors-color: visitedtext;
   --_utrecht-link-state-color: var(--utrecht-link-visited-color);
 }
-.utrecht-link--html-a:any-link:hover,
+.utrecht-link--html-a[href]:hover,
 .utrecht-link--hover {
   --_utrecht-link-forced-colors-color: linktext;
   --_utrecht-link-state-color: var(--utrecht-link-hover-color);
@@ -3164,7 +3054,7 @@
   z-index: var(--utrecht-stack-focus-z-index, 1);
 }
 .utrecht-link--html-span:focus,
-.utrecht-link--html-a:any-link: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);
@@ -3181,14 +3071,14 @@
   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) {
+.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:active,
-.utrecht-link--html-a:any-link:active,
+.utrecht-link--html-a[href]:active,
 .utrecht-link--active {
   --_utrecht-link-forced-colors-color: activetext;
   --_utrecht-link-state-color: var(--utrecht-link-active-color);
@@ -3203,12 +3093,11 @@
   font-weight: var(--utrecht-link-current-font-weight);
 }
 
-.utrecht-link--box-content:any-link {
+.utrecht-link--box-content[href] {
   color: unset;
   display: inline-block;
   text-decoration-line: unset;
   text-decoration-skip-ink: unset;
-  text-decoration-thickness: unset;
   text-underline-offset: unset;
 }
 
@@ -3268,16 +3157,6 @@
   -webkit-user-select: none;
   user-select: none;
 }
-@media (forced-colors: active) {
-  .utrecht-listbox {
-    --utrecht-listbox-option-selected-background-color: Highlight;
-    --utrecht-listbox-option-selected-color: HighlightText;
-    --utrecht-listbox-option-disabled-background-color: field;
-    --utrecht-listbox-option-disabled-color: GrayText;
-    background-color: field;
-    color: fieldtext;
-  }
-}
 
 .utrecht-listbox--focus {
 }
@@ -3322,12 +3201,6 @@
   line-height: var(--utrecht-listbox-option-group-label-line-height);
   margin-left: var(--utrecht-listbox-option-group-label-margin-inline-start);
 }
-@media (forced-colors: active) {
-  .utrecht-listbox__group-label {
-    background-color: field;
-    color: fieldtext;
-  }
-}
 
 .utrecht-listbox__option {
   list-style: none;
@@ -3343,11 +3216,6 @@
   padding-right: var(--utrecht-listbox-option-padding-inline-end);
   padding-left: var(--utrecht-listbox-option-padding-inline-start);
 }
-@media (forced-colors: active) {
-  .utrecht-listbox__option {
-    forced-color-adjust: none;
-  }
-}
 
 .utrecht-listbox__option--disabled {
   background-color: var(--utrecht-listbox-option-disabled-background-color);
@@ -3401,20 +3269,10 @@
 .utrecht-listbox--disabled {
   cursor: var(--utrecht-action-disabled-cursor, not-allowed);
 }
-@media (forced-colors: active) {
-  .utrecht-listbox--disabled {
-    --utrecht-listbox-option-selected-background-color: GrayText;
-    --utrecht-listbox-option-selected-color: field;
-    --utrecht-listbox-option-background-color: field;
-    --utrecht-listbox-option-color: GrayText;
-    --utrecht-listbox-background-color: field;
-    --utrecht-listbox-color: GrayText;
-  }
-}
 
 .utrecht-listbox--html-div:focus {
 }
-.utrecht-listbox--html-div:focus-visible {
+.utrecht-listbox--html-div[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);
@@ -3512,7 +3370,7 @@
 .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) {
+.utrecht-mapcontrolbutton:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
   box-shadow: none;
   outline-style: revert;
 }
@@ -3594,13 +3452,12 @@
   outline-width: var(--utrecht-focus-outline-width, revert);
 }
 
-.utrecht-menulijst__link:focus:not(:focus-visible) {
+.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;
-  white-space-collapse: preserve-breaks;
 }
 
 .utrecht-multiline-data--html-pre {
@@ -3614,18 +3471,6 @@
   display: flex;
   justify-content: center;
 }
-@media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
-  .utrecht-nav-bar {
-    border-bottom-color: currentColor;
-    border-bottom-style: solid;
-    border-bottom-width: 1px;
-    border-top-color: currentColor;
-    border-top-style: solid;
-    border-top-width: 1px;
-    padding-bottom: calc(var(--utrecht-focus-outline-width) * 2);
-    padding-top: calc(var(--utrecht-focus-outline-width) * 2);
-  }
-}
 
 .utrecht-nav-bar__content {
   align-items: stretch;
@@ -3824,7 +3669,7 @@
   display: none;
 }
 
-.utrecht-sidenav__link:focus:not(:focus-visible) {
+.utrecht-sidenav__link:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
   box-shadow: none;
   outline-style: revert;
 }
@@ -3894,7 +3739,7 @@
   outline-width: var(--utrecht-focus-outline-width, revert);
 }
 
-.utrecht-topnav__link:focus:not(:focus-visible) {
+.utrecht-topnav__link:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
   box-shadow: none;
   outline-style: revert;
 }
@@ -3920,13 +3765,6 @@
   text-decoration: none;
   white-space: nowrap;
 }
-@media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
-  .utrecht-number-badge {
-    border-color: currentColor;
-    border-style: solid;
-    border-width: 1px;
-  }
-}
 .utrecht-number-data {
   font-variant-numeric: lining-nums tabular-nums;
 }
@@ -4129,8 +3967,8 @@
   outline-width: var(--utrecht-focus-outline-width, revert);
 }
 
-.utrecht-pagination__page-link:focus:not(:focus-visible),
-.utrecht-pagination__relative-link:focus:not(:focus-visible) {
+.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;
 }
@@ -4185,7 +4023,6 @@
 }
 .utrecht-preserve-data {
   unicode-bidi: isolate;
-  white-space-collapse: preserve-spaces;
 }
 .utrecht-radio-button {
   -webkit-appearance: none;
@@ -4228,7 +4065,6 @@
   min-height: 24px;
   min-width: 24px;
   -webkit-print-color-adjust: exact;
-  print-color-adjust: exact;
   -webkit-user-select: none;
   user-select: none;
   vertical-align: top;
@@ -4417,7 +4253,7 @@
     var(--utrecht-radio-button-focus-color)
   );
 }
-.utrecht-radio-button--html-input:focus-visible {
+.utrecht-radio-button--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);
@@ -6365,7 +6201,7 @@
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
 }
-.utrecht-select--html-select:focus:not(:focus-visible) {
+.utrecht-select--html-select:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
   box-shadow: none;
   outline-style: revert;
 }
@@ -6440,7 +6276,7 @@
 
 .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);
   box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -6479,6 +6315,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);
@@ -6792,6 +6644,42 @@
   background-color: papayawhip;
   color: maroon;
 }
+.utrecht-table-of-contents {
+  page-break-inside: avoid;
+}
+
+.utrecht-table-of-contents__list {
+  list-style-type: none;
+  padding-left: 0;
+  page-break-inside: avoid;
+  -prince-pdf-tag-type: TOC;
+  margin-left: 0;
+  margin-top: 0;
+  margin-right: 0;
+}
+
+.utrecht-table-of-contents__list-item {
+  margin-bottom: var(--utrecht-unordered-list-item-margin-block-end);
+  margin-top: var(--utrecht-unordered-list-item-margin-block-start);
+  -prince-pdf-tag-type: TOCI;
+}
+
+.utrecht-table-of-contents__list-item::before {
+  content: "";
+}
+
+.utrecht-table-of-contents__list-item-body {
+  -prince-pdf-tag-type: P;
+}
+
+.utrecht-table-of-contents__list-item-label {
+  font-variant-numeric: lining-nums tabular-nums;
+  -prince-pdf-tag-type: Lbl;
+}
+
+.utrecht-table-of-contents__list-item-title {
+  -prince-pdf-tag-type: Span;
+}
 .utrecht-textarea {
   background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));
   height: initial;
@@ -6891,7 +6779,7 @@
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
 }
-.utrecht-textarea--html-textarea:focus:not(:focus-visible) {
+.utrecht-textarea--html-textarea:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
   box-shadow: none;
   outline-style: revert;
 }
@@ -6920,7 +6808,7 @@
   color: var(--utrecht-textarea-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
   cursor: var(--utrecht-action-disabled-cursor, not-allowed);
 }
-.utrecht-textarea--html-textarea::placeholder {
+.utrecht-textarea--html-textarea[prince-xml-ignore-pseudo-element-placeholder] {
   color: var(--utrecht-textarea-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
   font-style: var(--utrecht-form-control-placeholder-font-style);
   opacity: 100%;
@@ -7061,10 +6949,10 @@
 .utrecht-textbox--iban-nl-size {
   --utrecht-textbox-value-max-length: 22;
 }
-.utrecht-textbox--placeholder-ltr::placeholder, .utrecht-textbox--placeholder-ltr:placeholder-shown {
+.utrecht-textbox--placeholder-ltr[prince-xml-ignore-pseudo-element-placeholder], .utrecht-textbox--placeholder-ltr[prince-xml-ignore-pseudo-class-placeholder-shown] {
   direction: ltr;
 }
-.utrecht-textbox--placeholder-rtl::placeholder, .utrecht-textbox--placeholder-rtl:placeholder-shown {
+.utrecht-textbox--placeholder-rtl[prince-xml-ignore-pseudo-element-placeholder], .utrecht-textbox--placeholder-rtl[prince-xml-ignore-pseudo-class-placeholder-shown] {
   direction: rtl;
 }
 
@@ -7086,7 +6974,7 @@
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
 }
-.utrecht-textbox--html-input:focus:not(:focus-visible) {
+.utrecht-textbox--html-input:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
   box-shadow: none;
   outline-style: revert;
 }
@@ -7115,7 +7003,7 @@
   color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
   cursor: var(--utrecht-action-disabled-cursor, not-allowed);
 }
-.utrecht-textbox--html-input::placeholder {
+.utrecht-textbox--html-input[prince-xml-ignore-pseudo-element-placeholder] {
   color: var(--utrecht-textbox-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
   font-style: var(--utrecht-form-control-placeholder-font-style);
   opacity: 100%;
@@ -7171,7 +7059,7 @@
   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) {
+.utrecht-toptask-link:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
   box-shadow: none;
   outline-style: revert;
 }
@@ -7544,7 +7432,7 @@
   color: var(--_utrecht-button-focus-color);
   scale: var(--utrecht-button-focus-scale, 1);
 }
-.utrecht-html button:focus-visible {
+.utrecht-html 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);
@@ -7581,7 +7469,7 @@
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
 }
-.utrecht-html input[type=checkbox i]:focus:not(:focus-visible) {
+.utrecht-html input[type=checkbox i]:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
   box-shadow: none;
   outline-style: revert;
 }
@@ -7827,7 +7715,7 @@
   outline-width: var(--utrecht-focus-outline-width, revert);
   z-index: var(--utrecht-stack-focus-z-index, 1);
 }
-.utrecht-html a:focus:not(:focus-visible) {
+.utrecht-html a:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
   box-shadow: none;
   outline-style: revert;
 }
@@ -7953,7 +7841,6 @@
   min-height: 24px;
   min-width: 24px;
   -webkit-print-color-adjust: exact;
-  print-color-adjust: exact;
   -webkit-user-select: none;
   user-select: none;
   vertical-align: top;
@@ -8026,7 +7913,7 @@
     var(--utrecht-radio-button-focus-color)
   );
 }
-.utrecht-html input[type=radio i]:focus-visible {
+.utrecht-html input[type=radio 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);
@@ -8110,7 +7997,7 @@
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
 }
-.utrecht-html select:focus:not(:focus-visible) {
+.utrecht-html select:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
   box-shadow: none;
   outline-style: revert;
 }
@@ -8296,7 +8183,7 @@
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
 }
-.utrecht-html textarea:focus:not(:focus-visible) {
+.utrecht-html textarea:focus:not([prince-xml-ignore-pseudo-class-focus-visible]) {
   box-shadow: none;
   outline-style: revert;
 }
@@ -8325,7 +8212,7 @@
   color: var(--utrecht-textarea-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
   cursor: var(--utrecht-action-disabled-cursor, not-allowed);
 }
-.utrecht-html textarea::placeholder {
+.utrecht-html textarea[prince-xml-ignore-pseudo-element-placeholder] {
   color: var(--utrecht-textarea-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
   font-style: var(--utrecht-form-control-placeholder-font-style);
   opacity: 100%;
@@ -8418,19 +8305,19 @@
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
 }
-.utrecht-html input:not([type]):focus:not(:focus-visible),
-.utrecht-html input[type=date i]:focus:not(:focus-visible),
-.utrecht-html input[type=datetime-local i]:focus:not(:focus-visible),
-.utrecht-html input[type=email i]:focus:not(:focus-visible),
-.utrecht-html input[type=month i]:focus:not(:focus-visible),
-.utrecht-html input[type=number i]:focus:not(:focus-visible),
-.utrecht-html input[type=password i]:focus:not(:focus-visible),
-.utrecht-html input[type=search i]:focus:not(:focus-visible),
-.utrecht-html input[type=tel i]:focus:not(:focus-visible),
-.utrecht-html input[type=text i]:focus:not(:focus-visible),
-.utrecht-html input[type=time i]:focus:not(:focus-visible),
-.utrecht-html input[type=url i]:focus:not(:focus-visible),
-.utrecht-html input[type=week i]:focus:not(:focus-visible) {
+.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;
 }
@@ -8507,19 +8394,19 @@
   color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
   cursor: var(--utrecht-action-disabled-cursor, not-allowed);
 }
-.utrecht-html input:not([type])::placeholder,
-.utrecht-html input[type=date i]::placeholder,
-.utrecht-html input[type=datetime-local i]::placeholder,
-.utrecht-html input[type=email i]::placeholder,
-.utrecht-html input[type=month i]::placeholder,
-.utrecht-html input[type=number i]::placeholder,
-.utrecht-html input[type=password i]::placeholder,
-.utrecht-html input[type=search i]::placeholder,
-.utrecht-html input[type=tel i]::placeholder,
-.utrecht-html input[type=text i]::placeholder,
-.utrecht-html input[type=time i]::placeholder,
-.utrecht-html input[type=url i]::placeholder,
-.utrecht-html input[type=week i]::placeholder {
+.utrecht-html input:not([type])[prince-xml-ignore-pseudo-element-placeholder],
+.utrecht-html input[type=date i][prince-xml-ignore-pseudo-element-placeholder],
+.utrecht-html input[type=datetime-local i][prince-xml-ignore-pseudo-element-placeholder],
+.utrecht-html input[type=email i][prince-xml-ignore-pseudo-element-placeholder],
+.utrecht-html input[type=month i][prince-xml-ignore-pseudo-element-placeholder],
+.utrecht-html input[type=number i][prince-xml-ignore-pseudo-element-placeholder],
+.utrecht-html input[type=password i][prince-xml-ignore-pseudo-element-placeholder],
+.utrecht-html input[type=search i][prince-xml-ignore-pseudo-element-placeholder],
+.utrecht-html input[type=tel i][prince-xml-ignore-pseudo-element-placeholder],
+.utrecht-html input[type=text i][prince-xml-ignore-pseudo-element-placeholder],
+.utrecht-html input[type=time i][prince-xml-ignore-pseudo-element-placeholder],
+.utrecht-html input[type=url i][prince-xml-ignore-pseudo-element-placeholder],
+.utrecht-html input[type=week i][prince-xml-ignore-pseudo-element-placeholder] {
   color: var(--utrecht-textbox-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
   font-style: var(--utrecht-form-control-placeholder-font-style);
   opacity: 100%;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.1.0",
+  "version": "5.2.0",
   "author": "Community for NL Design System",
   "description": "Component library bundle for the Municipality of Utrecht based on the NL Design System architecture",
   "license": "EUPL-1.2",
@@ -26,7 +26,7 @@
     "rimraf": "5.0.7",
     "rollup": "4.18.0",
     "rollup-plugin-postcss": "4.0.2",
-    "@utrecht/components": "7.1.0",
+    "@utrecht/components": "7.2.0",
     "@utrecht/html-content-css": "1.1.0"
   },
   "main": "dist/index.css",