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

package/dist/collection/components/custom-checkbox.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`.
+ */
 .utrecht-checkbox--custom,
 .utrecht-custom-checkbox {
   /*

package/dist/collection/components/data-list-item.css

@@ -20,7 +20,7 @@
 
 div {
   /* `break-inside: avoid` would probably be too much in situations, especially with nested lists */
-  page-break-inside: avoid;
+  break-inside: avoid-page;
   --_utrecht-minmax: max(
     var(--utrecht-data-list-rows-column-min-inline-size, 25ch),
     var(--utrecht-data-list-rows-column-inline-size, 80%)

package/dist/collection/components/form-field-checkbox.css

@@ -20,7 +20,6 @@
   font-family: var(--utrecht-document-font-family, inherit);
   margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, 0));
   margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, 0));
-  page-break-inside: avoid;
 }
 
 .utrecht-form-field--distanced {
@@ -209,6 +208,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/form-field-textarea.css

@@ -20,7 +20,6 @@
   font-family: var(--utrecht-document-font-family, inherit);
   margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, 0));
   margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, 0));
-  page-break-inside: avoid;
 }
 
 .utrecht-form-field--distanced {
@@ -209,6 +208,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/form-field-textbox.css

@@ -20,7 +20,6 @@
   font-family: var(--utrecht-document-font-family, inherit);
   margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, 0));
   margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, 0));
-  page-break-inside: avoid;
 }
 
 .utrecht-form-field--distanced {
@@ -209,6 +208,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/form-toggle.css

@@ -19,6 +19,16 @@
 * 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`.
+ */
+/**
+ * Source:
+ * https://github.com/nl-design-system/candidate/blob/a0246970175883a874aacc9431a1596c429e6319/packages/components-css/number-badge-css/src/_mixin.scss#L5-L16
+ */
 .utrecht-form-toggle {
   align-items: center;
   block-size: var(--utrecht-form-toggle-height, 2em);
@@ -146,8 +156,6 @@
   /* Source: https://kittygiraudel.com/snippets/sr-only-class/ */
   block-size: 1px !important;
   border: 0 !important;
-  clip: rect(1px, 1px, 1px, 1px) !important;
-  -webkit-clip-path: inset(50%) !important;
   clip-path: inset(50%) !important;
   inline-size: 1px !important;
   /* stylelint-disable-next-line property-disallowed-list */

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

@@ -22,9 +22,10 @@
 }
 
 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);
@@ -32,5 +33,4 @@ h1 {
   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;
 }

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

@@ -22,9 +22,10 @@
 }
 
 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);
@@ -32,5 +33,4 @@ h2 {
   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;
 }

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 {
@@ -1932,25 +1941,125 @@ however browsers don't seem to have implemented great looking supixel tweening y
   font-variant-ligatures: none;
 }
 .utrecht-html ul {
+  --_utrecht-unordered-list-list-style-type: var(--utrecht-unordered-list-list-style-type, "●");
+  --_utrecht-unordered-list-marker-font-size: var(--utrecht-unordered-list-marker-font-size, "1rem");
   /* Configure `box-sizing` and `text-align` for `--center` */
   box-sizing: border-box;
   font-family: var(--utrecht-document-font-family, inherit);
   font-size: var(--utrecht-unordered-list-font-size, var(--utrecht-document-font-size, inherit));
   line-height: var(--utrecht-unordered-list-line-height, var(--utrecht-document-line-height, inherit));
+  /* Using list style type instead of ::marker allows for more cross browser compatibility */
+  list-style-type: var(--_utrecht-unordered-list-list-style-type, "●");
   margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-unordered-list-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));
   margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-unordered-list-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)));
-  padding-inline-start: var(--utrecht-unordered-list-padding-inline-start, 2ch);
+  margin-inline-start: var(--utrecht-unordered-list-margin-inline-start, 1ch);
+  padding-inline-start: var(--utrecht-unordered-list-padding-inline-start, 0);
   text-align: start;
   --utrecht-space-around: 1;
+  --_utrecht-unordered-list-list-style-type: var(
+    --utrecht-unordered-list-level-1-list-style-type,
+    var(--utrecht-unordered-list-list-style-type, ●)
+  );
+  --_utrecht-unordered-list-marker-font-size: var(
+    --utrecht-unordered-list-level-1-marker-font-size,
+    var(--utrecht-unordered-list-marker-font-size, 1em)
+  );
 }
 .utrecht-html ul > li {
   margin-block-end: var(--utrecht-unordered-list-item-margin-block-end);
   margin-block-start: var(--utrecht-unordered-list-item-margin-block-start);
   padding-inline-start: var(--utrecht-unordered-list-item-padding-inline-start, 1ch);
 }
+.utrecht-html {
+  /* Child combinator (>) to prevent styling nested ordered lists */
+}
 .utrecht-html ul > li::marker {
   color: var(--utrecht-unordered-list-marker-color);
-  content: "●";
+  font-size: var(--_utrecht-unordered-list-marker-font-size, 1em);
+}
+.utrecht-html ul > li > ul {
+  --_utrecht-unordered-list-list-style-type: var(
+    --utrecht-unordered-list-level-2-list-style-type,
+    var(--utrecht-unordered-list-list-style-type, ○)
+  );
+  --_utrecht-unordered-list-marker-font-size: var(
+    --utrecht-unordered-list-level-2-marker-font-size,
+    var(--utrecht-unordered-list-marker-font-size, 1em)
+  );
+}
+.utrecht-html ul > li > ul > li > ul {
+  --_utrecht-unordered-list-list-style-type: var(
+    --utrecht-unordered-list-level-3-list-style-type,
+    var(--utrecht-unordered-list-list-style-type, ◆)
+  );
+  --_utrecht-unordered-list-marker-font-size: var(
+    --utrecht-unordered-list-level-3-marker-font-size,
+    var(--utrecht-unordered-list-marker-font-size, 1em)
+  );
+}
+.utrecht-html ul > li > ul > li > ul > li > ul {
+  --_utrecht-unordered-list-list-style-type: var(
+    --utrecht-unordered-list-level-4-list-style-type,
+    var(--utrecht-unordered-list-list-style-type, ◇)
+  );
+  --_utrecht-unordered-list-marker-font-size: var(
+    --utrecht-unordered-list-level-4-marker-font-size,
+    var(--utrecht-unordered-list-marker-font-size, 1em)
+  );
+}
+.utrecht-html ul > li > ul > li > ul > li > ul > li > ul {
+  --_utrecht-unordered-list-list-style-type: var(
+    --utrecht-unordered-list-level-5-list-style-type,
+    var(--utrecht-unordered-list-list-style-type, ■)
+  );
+  --_utrecht-unordered-list-marker-font-size: var(
+    --utrecht-unordered-list-level-5-marker-font-size,
+    var(--utrecht-unordered-list-marker-font-size, 1em)
+  );
+}
+.utrecht-html ul > li > ul > li > ul > li > ul > li > ul > li > ul {
+  --_utrecht-unordered-list-list-style-type: var(
+    --utrecht-unordered-list-level-6-list-style-type,
+    var(--utrecht-unordered-list-list-style-type, □)
+  );
+  --_utrecht-unordered-list-marker-font-size: var(
+    --utrecht-unordered-list-level-6-marker-font-size,
+    var(--utrecht-unordered-list-marker-font-size, 1em)
+  );
+}
+.utrecht-html ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul {
+  --_utrecht-unordered-list-list-style-type: var(
+    --utrecht-unordered-list-level-7-list-style-type,
+    var(--utrecht-unordered-list-list-style-type, ▲)
+  );
+  --_utrecht-unordered-list-marker-font-size: var(
+    --utrecht-unordered-list-level-7-marker-font-size,
+    var(--utrecht-unordered-list-marker-font-size, 1em)
+  );
+}
+.utrecht-html ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul {
+  --_utrecht-unordered-list-list-style-type: var(
+    --utrecht-unordered-list-level-8-list-style-type,
+    var(--utrecht-unordered-list-list-style-type, △)
+  );
+  --_utrecht-unordered-list-marker-font-size: var(
+    --utrecht-unordered-list-level-8-marker-font-size,
+    var(--utrecht-unordered-list-marker-font-size, 1em)
+  );
+}
+: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;