@utrecht/web-component-library-stencil 4.1.0 → 4.1.1

package/dist/collection/components/heading-3.css

@@ -22,9 +22,10 @@
 }
 
 h3 {
+  break-after: avoid;
   break-inside: avoid-column;
-  page-break-after: avoid;
-  page-break-inside: avoid;
+  break-inside: avoid;
+  break-after: avoid-page;
   color: var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
   font-family: var(--utrecht-heading-3-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
   font-size: var(--utrecht-heading-3-font-size, revert);
@@ -32,5 +33,4 @@ h3 {
   line-height: var(--utrecht-heading-3-line-height);
   margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-3-margin-block-end, 0));
   margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-3-margin-block-start, 0));
-  page-break-after: avoid;
 }

package/dist/collection/components/heading-4.css

@@ -22,9 +22,10 @@
 }
 
 h4 {
+  break-after: avoid;
   break-inside: avoid-column;
-  page-break-after: avoid;
-  page-break-inside: avoid;
+  break-inside: avoid;
+  break-after: avoid-page;
   color: var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
   font-family: var(--utrecht-heading-4-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
   font-size: var(--utrecht-heading-4-font-size, revert);
@@ -32,5 +33,4 @@ h4 {
   line-height: var(--utrecht-heading-4-line-height);
   margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-end, 0));
   margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-start, 0));
-  page-break-after: avoid;
 }

package/dist/collection/components/heading-5.css

@@ -22,9 +22,10 @@
 }
 
 h5 {
+  break-after: avoid;
   break-inside: avoid-column;
-  page-break-after: avoid;
-  page-break-inside: avoid;
+  break-inside: avoid;
+  break-after: avoid-page;
   color: var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
   font-family: var(--utrecht-heading-5-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
   font-size: var(--utrecht-heading-5-font-size, revert);
@@ -32,5 +33,4 @@ h5 {
   line-height: var(--utrecht-heading-5-line-height);
   margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-5-margin-block-end, 0));
   margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-5-margin-block-start, 0));
-  page-break-after: avoid;
 }

package/dist/collection/components/heading-6.css

@@ -22,9 +22,10 @@
 }
 
 h6 {
+  break-after: avoid;
   break-inside: avoid-column;
-  page-break-after: avoid;
-  page-break-inside: avoid;
+  break-inside: avoid;
+  break-after: avoid-page;
   color: var(--utrecht-heading-6-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
   font-family: var(--utrecht-heading-6-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
   font-size: var(--utrecht-heading-6-font-size, revert);
@@ -32,5 +33,4 @@ h6 {
   line-height: var(--utrecht-heading-6-line-height);
   margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-6-margin-block-end, 0));
   margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-6-margin-block-start, 0));
-  page-break-after: avoid;
 }

package/dist/collection/components/heading.css

@@ -19,9 +19,10 @@
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
 .utrecht-heading-1 {
+  break-after: avoid;
   break-inside: avoid-column;
-  page-break-after: avoid;
-  page-break-inside: avoid;
+  break-inside: avoid;
+  break-after: avoid-page;
   color: var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
   font-family: var(--utrecht-heading-1-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
   font-size: var(--utrecht-heading-1-font-size, revert);
@@ -29,7 +30,6 @@
   line-height: var(--utrecht-heading-1-line-height);
   margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-1-margin-block-end, 0));
   margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-1-margin-block-start, 0));
-  page-break-after: avoid;
 }
 
 .utrecht-heading-1--distanced {
@@ -47,9 +47,10 @@
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
 .utrecht-heading-2 {
+  break-after: avoid;
   break-inside: avoid-column;
-  page-break-after: avoid;
-  page-break-inside: avoid;
+  break-inside: avoid;
+  break-after: avoid-page;
   color: var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
   font-family: var(--utrecht-heading-2-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
   font-size: var(--utrecht-heading-2-font-size, revert);
@@ -57,7 +58,6 @@
   line-height: var(--utrecht-heading-2-line-height);
   margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-2-margin-block-end, 0));
   margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-2-margin-block-start, 0));
-  page-break-after: avoid;
 }
 
 .utrecht-heading-2--distanced {
@@ -75,9 +75,10 @@
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
 .utrecht-heading-3 {
+  break-after: avoid;
   break-inside: avoid-column;
-  page-break-after: avoid;
-  page-break-inside: avoid;
+  break-inside: avoid;
+  break-after: avoid-page;
   color: var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
   font-family: var(--utrecht-heading-3-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
   font-size: var(--utrecht-heading-3-font-size, revert);
@@ -85,7 +86,6 @@
   line-height: var(--utrecht-heading-3-line-height);
   margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-3-margin-block-end, 0));
   margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-3-margin-block-start, 0));
-  page-break-after: avoid;
 }
 
 .utrecht-heading-3--distanced {
@@ -103,9 +103,10 @@
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
 .utrecht-heading-4 {
+  break-after: avoid;
   break-inside: avoid-column;
-  page-break-after: avoid;
-  page-break-inside: avoid;
+  break-inside: avoid;
+  break-after: avoid-page;
   color: var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
   font-family: var(--utrecht-heading-4-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
   font-size: var(--utrecht-heading-4-font-size, revert);
@@ -113,7 +114,6 @@
   line-height: var(--utrecht-heading-4-line-height);
   margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-end, 0));
   margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-start, 0));
-  page-break-after: avoid;
 }
 
 .utrecht-heading-4--distanced {
@@ -131,9 +131,10 @@
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
 .utrecht-heading-5 {
+  break-after: avoid;
   break-inside: avoid-column;
-  page-break-after: avoid;
-  page-break-inside: avoid;
+  break-inside: avoid;
+  break-after: avoid-page;
   color: var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
   font-family: var(--utrecht-heading-5-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
   font-size: var(--utrecht-heading-5-font-size, revert);
@@ -141,7 +142,6 @@
   line-height: var(--utrecht-heading-5-line-height);
   margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-5-margin-block-end, 0));
   margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-5-margin-block-start, 0));
-  page-break-after: avoid;
 }
 
 .utrecht-heading-5--distanced {
@@ -159,9 +159,10 @@
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
 .utrecht-heading-6 {
+  break-after: avoid;
   break-inside: avoid-column;
-  page-break-after: avoid;
-  page-break-inside: avoid;
+  break-inside: avoid;
+  break-after: avoid-page;
   color: var(--utrecht-heading-6-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
   font-family: var(--utrecht-heading-6-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
   font-size: var(--utrecht-heading-6-font-size, revert);
@@ -169,7 +170,6 @@
   line-height: var(--utrecht-heading-6-line-height);
   margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-6-margin-block-end, 0));
   margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-6-margin-block-start, 0));
-  page-break-after: avoid;
 }
 
 .utrecht-heading-6--distanced {

package/dist/collection/components/html-content.css

@@ -61,6 +61,12 @@
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
 /* stylelint-disable-next-line block-no-empty */
+/* Override the browser focus ring with our own focus ring.
+ * Use `:where()` so the CSS selector specificity is `0,0,0`.
+ */
+/* Override the browser focus ring with our own focus ring.
+ * Use `:where()` so the CSS selector specificity is `0,0,0`.
+ */
 /* stylelint-disable-next-line block-no-empty */
 /**
 * @license EUPL-1.2
@@ -158,6 +164,11 @@
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
+/**
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
 /* stylelint-disable-next-line block-no-empty */
 /**
 * @license EUPL-1.2
@@ -746,7 +757,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   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));
   inline-size: var(--utrecht-button-inline-size, auto);
-  justify-content: center;
+  justify-content: var(--utrecht-button-justify-content, center);
   line-height: var(--_utrecht-button-line-height);
   max-inline-size: var(--utrecht-button-max-inline-size, fit-content);
   min-block-size: var(--utrecht-button-min-block-size, 44px);
@@ -916,14 +927,13 @@ however browsers don't seem to have implemented great looking supixel tweening y
   max-inline-size: var(--utrecht-form-max-inline-size);
 }
 .utrecht-html legend {
-  break-inside: avoid;
+  break-after: avoid-page;
+  break-inside: avoid-page;
   color: var(--utrecht-form-fieldset-legend-color, var(--utrecht-document-color, inherit));
   font-family: var(--utrecht-form-fieldset-legend-font-family, var(--utrecht-document-font-family));
   font-size: var(--utrecht-form-fieldset-legend-font-size);
   font-weight: var(--utrecht-form-fieldset-legend-font-weight);
   line-height: var(--utrecht-form-fieldset-legend-line-height);
-  page-break-after: avoid;
-  page-break-inside: avoid;
   display: table;
   inline-size: 100%;
   padding-inline-end: 0;
@@ -972,9 +982,10 @@ however browsers don't seem to have implemented great looking supixel tweening y
   }
 }
 .utrecht-html h1 {
+  break-after: avoid;
   break-inside: avoid-column;
-  page-break-after: avoid;
-  page-break-inside: avoid;
+  break-inside: avoid;
+  break-after: avoid-page;
   color: var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
   font-family: var(--utrecht-heading-1-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
   font-size: var(--utrecht-heading-1-font-size, revert);
@@ -982,13 +993,13 @@ however browsers don't seem to have implemented great looking supixel tweening y
   line-height: var(--utrecht-heading-1-line-height);
   margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-1-margin-block-end, 0));
   margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-1-margin-block-start, 0));
-  page-break-after: avoid;
   --utrecht-space-around: 1;
 }
 .utrecht-html h2 {
+  break-after: avoid;
   break-inside: avoid-column;
-  page-break-after: avoid;
-  page-break-inside: avoid;
+  break-inside: avoid;
+  break-after: avoid-page;
   color: var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
   font-family: var(--utrecht-heading-2-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
   font-size: var(--utrecht-heading-2-font-size, revert);
@@ -996,13 +1007,13 @@ however browsers don't seem to have implemented great looking supixel tweening y
   line-height: var(--utrecht-heading-2-line-height);
   margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-2-margin-block-end, 0));
   margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-2-margin-block-start, 0));
-  page-break-after: avoid;
   --utrecht-space-around: 1;
 }
 .utrecht-html h3 {
+  break-after: avoid;
   break-inside: avoid-column;
-  page-break-after: avoid;
-  page-break-inside: avoid;
+  break-inside: avoid;
+  break-after: avoid-page;
   color: var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
   font-family: var(--utrecht-heading-3-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
   font-size: var(--utrecht-heading-3-font-size, revert);
@@ -1010,13 +1021,13 @@ however browsers don't seem to have implemented great looking supixel tweening y
   line-height: var(--utrecht-heading-3-line-height);
   margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-3-margin-block-end, 0));
   margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-3-margin-block-start, 0));
-  page-break-after: avoid;
   --utrecht-space-around: 1;
 }
 .utrecht-html h4 {
+  break-after: avoid;
   break-inside: avoid-column;
-  page-break-after: avoid;
-  page-break-inside: avoid;
+  break-inside: avoid;
+  break-after: avoid-page;
   color: var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
   font-family: var(--utrecht-heading-4-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
   font-size: var(--utrecht-heading-4-font-size, revert);
@@ -1024,13 +1035,13 @@ however browsers don't seem to have implemented great looking supixel tweening y
   line-height: var(--utrecht-heading-4-line-height);
   margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-end, 0));
   margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-start, 0));
-  page-break-after: avoid;
   --utrecht-space-around: 1;
 }
 .utrecht-html h5 {
+  break-after: avoid;
   break-inside: avoid-column;
-  page-break-after: avoid;
-  page-break-inside: avoid;
+  break-inside: avoid;
+  break-after: avoid-page;
   color: var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
   font-family: var(--utrecht-heading-5-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
   font-size: var(--utrecht-heading-5-font-size, revert);
@@ -1038,13 +1049,13 @@ however browsers don't seem to have implemented great looking supixel tweening y
   line-height: var(--utrecht-heading-5-line-height);
   margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-5-margin-block-end, 0));
   margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-5-margin-block-start, 0));
-  page-break-after: avoid;
   --utrecht-space-around: 1;
 }
 .utrecht-html h6 {
+  break-after: avoid;
   break-inside: avoid-column;
-  page-break-after: avoid;
-  page-break-inside: avoid;
+  break-inside: avoid;
+  break-after: avoid-page;
   color: var(--utrecht-heading-6-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
   font-family: var(--utrecht-heading-6-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
   font-size: var(--utrecht-heading-6-font-size, revert);
@@ -1052,7 +1063,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   line-height: var(--utrecht-heading-6-line-height);
   margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-6-margin-block-end, 0));
   margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-6-margin-block-start, 0));
-  page-break-after: avoid;
   --utrecht-space-around: 1;
 }
 .utrecht-html hgroup {
@@ -1483,6 +1493,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   --utrecht-space-around: 1;
 }
 .utrecht-html caption {
+  break-after: avoid;
   break-inside: avoid;
   color: var(--utrecht-table-caption-color);
   font-family: var(--utrecht-table-caption-font-family);
@@ -1490,7 +1501,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   font-weight: var(--utrecht-table-caption-font-weight);
   line-height: var(--utrecht-table-caption-line-height);
   margin-block-end: var(--utrecht-table-caption-margin-block-end);
-  page-break-after: avoid;
   text-align: var(--utrecht-table-caption-text-align, center);
 }
 .utrecht-html thead {
@@ -1500,7 +1510,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   break-inside: avoid;
   color: var(--utrecht-table-header-color);
   font-weight: var(--utrecht-table-header-font-weight);
-  page-break-inside: avoid;
   text-transform: var(--utrecht-table-header-text-transform);
 }
 .utrecht-html tbody {
@@ -1952,6 +1961,20 @@ however browsers don't seem to have implemented great looking supixel tweening y
   color: var(--utrecht-unordered-list-marker-color);
   content: "●";
 }
+:where(.utrecht-html) :where(:focus-visible) {
+  /* - The browser default focus ring should apply when these CSS custom properties are not set.
+   * - Make the `box-shadow` value available, so components that have their own `box-shadow`
+   *   can combine it with the focus ring box shadow.
+   */
+  --_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);
+  z-index: 1;
+}
 .utrecht-html {
   --utrecht-space-around: 1;
 }

package/dist/collection/components/link-button.css

@@ -25,6 +25,12 @@
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
 /* stylelint-disable-next-line block-no-empty */
+/* Override the browser focus ring with our own focus ring.
+ * Use `:where()` so the CSS selector specificity is `0,0,0`.
+ */
+/* Override the browser focus ring with our own focus ring.
+ * Use `:where()` so the CSS selector specificity is `0,0,0`.
+ */
 /*
 
 # CSS implementation

package/dist/collection/components/link.css

@@ -15,6 +15,12 @@
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
 /* stylelint-disable-next-line block-no-empty */
+/* Override the browser focus ring with our own focus ring.
+ * Use `:where()` so the CSS selector specificity is `0,0,0`.
+ */
+/* Override the browser focus ring with our own focus ring.
+ * Use `:where()` so the CSS selector specificity is `0,0,0`.
+ */
 /**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.

package/dist/collection/components/number-data.css

@@ -8,6 +8,10 @@
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
+/**
+ * Source:
+ * https://github.com/nl-design-system/candidate/blob/a0246970175883a874aacc9431a1596c429e6319/packages/components-css/number-badge-css/src/_mixin.scss#L5-L16
+ */
 :host {
   display: inline;
   font-variant-numeric: lining-nums tabular-nums;

package/dist/collection/components/pagination.css

@@ -14,6 +14,12 @@
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
 /* stylelint-disable-next-line block-no-empty */
+/* Override the browser focus ring with our own focus ring.
+ * Use `:where()` so the CSS selector specificity is `0,0,0`.
+ */
+/* Override the browser focus ring with our own focus ring.
+ * Use `:where()` so the CSS selector specificity is `0,0,0`.
+ */
 /**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.

package/dist/collection/components/progress-list.css

@@ -31,6 +31,9 @@
   align-items: var(--denhaag-process-steps-step-header-align-items);
   gap: 16px;
 }
+.denhaag-process-steps__step-header--nested {
+  gap: 24px;
+}
 
 .denhaag-process-steps__step-header-toggle {
   --utrecht-button-subtle-font-size: inherit;
@@ -119,12 +122,14 @@
   color: var(--denhaag-process-steps-step-meta-date-color, var(--denhaag-process-steps-step-meta-color));
 }
 
+.denhaag-process-steps__step-meta--nested {
+  font-size: var(--denhaag-process-steps-step-meta-nested-font-size, var(--denhaag-process-steps-step-meta-font-size));
+  margin-block-start: var(--denhaag-process-steps-step-meta-nested-margin-block-start);
+  margin-inline-start: 48px;
+}
+
 .denhaag-process-steps__sub-step {
   position: relative;
-  align-items: baseline;
-  display: flex;
-  flex-direction: row;
-  gap: 23px;
   margin-block-start: var(--denhaag-process-steps-sub-step-distance);
 }
 

package/dist/collection/components/root.css

@@ -8,10 +8,45 @@
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
+/**
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
+/* stylelint-disable-next-line block-no-empty */
+/* Override the browser focus ring with our own focus ring.
+ * Use `:where()` so the CSS selector specificity is `0,0,0`.
+ */
+/* Override the browser focus ring with our own focus ring.
+ * Use `:where()` so the CSS selector specificity is `0,0,0`.
+ */
+/**
+ * The focus indicator should be applied to all elements that have the `:focus-visible` state.
+ */
+/**
+ * Avoid setting `font-size` on `:root` if you want to keep `1rem` at `16px` for most users.
+ * Set `line-height` on the same element as `font-size`, to support font-relative line heights,
+ * even though they are discouraged.
+ */
+/**
+ * Ensure enough contrast with `var(--utrecht-root-color)`, by overriding the
+ * browser black default background color of full screen elements.
+ *
+ * You can test this by opening any element inside the Root component with the
+ * following JavaScript, for example the Heading 1:
+ *
+ *     document.querySelector('h1').requestFullscreen()
+ *
+ * In dark mode there might be enough contrast, but dark text on a black background
+ * would become unreadable in full screen.
+ *
+ * Use `:where()` so this background color can be overriden by a CSS selector
+ * with a higher specificity than (0,0,1).
+ */
 :host {
   /*
    * Goals:
-   * 
+   *
    * - take up 100% of the space, both horizontally and vertically.
    * - create a scrollable viewport experience both on `<html>` in the root,
    *   as well as on a `<div>` somewhere in a document.
@@ -20,14 +55,18 @@
    *   outside the normal document flow (`absolute`, `fixed` and `sticky`)
    *   are positioned relative to the root component.
    * - ensure text content fits at 400% zoom by enabling hypenation.
+   * - do not influence the `rem` unit by avoiding `font-size` on the root element.
    */
   /* reset `font-smoothing: antialiasing`, prefer automatic (`subpixel-antialiasing`) behavior for high-dpi screens */
   -webkit-font-smoothing: auto !important;
   -moz-osx-font-smoothing: auto !important;
-  background-color: var(--utrecht-root-background-color);
+  /* For some new properties, use the `utrecht.body.*` design tokens as fallback for backwards compatibility. */
+  background-color: var(--utrecht-root-background-color, Canvas);
   block-size: 100%;
-  color: var(--utrecht-root-color);
+  color: var(--utrecht-root-color, CanvasText);
   font-family: var(--utrecht-root-font-family);
+  font-size-adjust: var(--utrecht-root-font-size-adjust, 0.5);
+  font-weight: var(--utrecht-root-font-weight, var(--utrecht-body-font-weight));
   -webkit-hyphens: auto;
   -moz-hyphens: auto;
   -ms-hyphens: auto;
@@ -35,12 +74,21 @@
   inline-size: 100%;
   overflow-block: auto;
   overflow-inline: auto;
+  overflow-wrap: break-word;
   position: relative;
   text-rendering: optimizeLegibility;
   -moz-text-size-adjust: none;
   -webkit-text-size-adjust: none;
   text-size-adjust: none;
-  word-break: break-word;
+}
+@media (prefers-reduced-motion: no-preference) {
+  :host {
+    scroll-behavior: smooth;
+  }
+}
+:host {
+  font-size: var(--utrecht-root-font-size, var(--utrecht-body-font-size));
+  line-height: var(--utrecht-root-line-height, var(--utrecht-body-line-height));
 }
 
 :host([hidden]) {

package/dist/collection/components/sidenav.css

@@ -14,6 +14,12 @@
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
 /* stylelint-disable-next-line block-no-empty */
+/* Override the browser focus ring with our own focus ring.
+ * Use `:where()` so the CSS selector specificity is `0,0,0`.
+ */
+/* Override the browser focus ring with our own focus ring.
+ * Use `:where()` so the CSS selector specificity is `0,0,0`.
+ */
 .utrecht-sidenav {
   --utrecht-sidenav-connection-color: var(--utrecht-sidenav-item-marker-color);
   --utrecht-sidenav-connection-inline-size: 2px;

package/dist/collection/components/skip-link.css

@@ -19,6 +19,12 @@
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
 /* stylelint-disable-next-line block-no-empty */
+/* Override the browser focus ring with our own focus ring.
+ * Use `:where()` so the CSS selector specificity is `0,0,0`.
+ */
+/* Override the browser focus ring with our own focus ring.
+ * Use `:where()` so the CSS selector specificity is `0,0,0`.
+ */
 /* stylelint-disable-next-line block-no-empty */
 .utrecht-skip-link {
   /* Use `ButtonFace` as default `background-color`

package/dist/collection/components/table-caption.css

@@ -11,6 +11,7 @@
 /* stylelint-disable-next-line block-no-empty */
 /* stylelint-disable-next-line block-no-empty */
 :host {
+  break-after: avoid;
   break-inside: avoid;
   color: var(--utrecht-table-caption-color);
   font-family: var(--utrecht-table-caption-font-family);
@@ -18,9 +19,8 @@
   font-weight: var(--utrecht-table-caption-font-weight);
   line-height: var(--utrecht-table-caption-line-height);
   margin-block-end: var(--utrecht-table-caption-margin-block-end);
-  page-break-after: avoid;
   text-align: var(--utrecht-table-caption-text-align, center);
+  break-after: avoid;
+  break-inside: avoid;
   display: table-caption;
-  page-break-after: avoid;
-  page-break-inside: avoid;
 }

package/dist/collection/components/table-container.css

@@ -21,6 +21,7 @@ utrecht-table-container {
 }
 
 utrecht-table-container table > caption {
+  break-after: avoid;
   break-inside: avoid;
   color: var(--utrecht-table-caption-color);
   font-family: var(--utrecht-table-caption-font-family);
@@ -28,7 +29,6 @@ utrecht-table-container table > caption {
   font-weight: var(--utrecht-table-caption-font-weight);
   line-height: var(--utrecht-table-caption-line-height);
   margin-block-end: var(--utrecht-table-caption-margin-block-end);
-  page-break-after: avoid;
   text-align: var(--utrecht-table-caption-text-align, center);
 }
 utrecht-table-container table > thead {
@@ -38,7 +38,6 @@ utrecht-table-container table > thead {
   break-inside: avoid;
   color: var(--utrecht-table-header-color);
   font-weight: var(--utrecht-table-header-font-weight);
-  page-break-inside: avoid;
   text-transform: var(--utrecht-table-header-text-transform);
 }
 utrecht-table-container table > tbody {
@@ -46,7 +45,6 @@ utrecht-table-container table > tbody {
 }
 utrecht-table-container table > tr, utrecht-table-container table > thead > tr, utrecht-table-container table > tbody > tr, utrecht-table-container table > tfoot > tr {
   break-inside: avoid;
-  page-break-inside: avoid;
 }
 utrecht-table-container table > thead > tr:last-of-type {
   border-block-end-color: var(--utrecht-table-header-border-block-end-color, transparent);

package/dist/collection/components/table-header.css

@@ -17,7 +17,6 @@
   break-inside: avoid;
   color: var(--utrecht-table-header-color);
   font-weight: var(--utrecht-table-header-font-weight);
-  page-break-inside: avoid;
   text-transform: var(--utrecht-table-header-text-transform);
   display: table-header-group;
 }

package/dist/collection/components/table-row.css

@@ -12,6 +12,5 @@
 /* stylelint-disable-next-line block-no-empty */
 :host {
   break-inside: avoid;
-  page-break-inside: avoid;
   display: table-row;
 }