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

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

@@ -265,36 +265,6 @@
 * 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
-*/
-/**
-* @license EUPL-1.2
-* 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
-*/
-/**
-* @license EUPL-1.2
-* 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
-*/
-/**
-* @license EUPL-1.2
-* Copyright (c) 2020-2024 Frameless B.V.
-* Copyright (c) 2021-2024 Gemeente Utrecht
-*/
 /* stylelint-disable scss/no-global-function-names */
 /*
 
@@ -742,12 +712,14 @@ however browsers don't seem to have implemented great looking supixel tweening y
   align-items: center;
   background-color: var(--_utrecht-button-background-color);
   block-size: fit-content;
-  border-block-end-color: var(--_utrecht-button-border-bottom-color);
-  border-block-end-width: var(--_utrecht-button-border-block-end-width);
   border-color: var(--_utrecht-button-border-color);
   border-radius: var(--utrecht-button-border-radius);
   border-style: solid;
   border-width: var(--_utrecht-button-border-width);
+  /* stylelint-disable-next-line order/properties-alphabetical-order */
+  border-block-end-color: var(--_utrecht-button-border-bottom-color);
+  /* stylelint-disable-next-line order/properties-alphabetical-order */
+  border-block-end-width: var(--_utrecht-button-border-block-end-width);
   box-sizing: border-box;
   color: var(--_utrecht-button-color);
   column-gap: var(--utrecht-button-column-gap);
@@ -898,7 +870,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-start, 0));
   /* `all: revert` unfortunately has as side-effect that the `hidde` attribute has no effect */
   all: revert;
-  border: 0;
+  border-width: 0;
   margin-inline-end: 0;
   margin-inline-start: 0;
   min-inline-size: 0;
@@ -985,7 +957,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   break-after: avoid;
   break-inside: avoid-column;
   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);
@@ -999,7 +970,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   break-after: avoid;
   break-inside: avoid-column;
   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);
@@ -1013,7 +983,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   break-after: avoid;
   break-inside: avoid-column;
   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);
@@ -1027,7 +996,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   break-after: avoid;
   break-inside: avoid-column;
   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);
@@ -1041,7 +1009,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   break-after: avoid;
   break-inside: avoid-column;
   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);
@@ -1055,7 +1022,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   break-after: avoid;
   break-inside: avoid-column;
   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);
@@ -1399,14 +1365,14 @@ however browsers don't seem to have implemented great looking supixel tweening y
   );
 }
 .utrecht-html select {
-  background-color: var(--utrecht-select-background-color, var(--utrecht-form-control-background-color));
+  border-color: var(--utrecht-select-border-color, var(--utrecht-form-control-border-color));
+  border-radius: var(--utrecht-select-border-radius, var(--utrecht-form-control-border-radius, 0));
+  border-style: solid;
   border-block-end-width: var(--utrecht-select-border-block-end-width, var(--utrecht-select-border-width, var(--utrecht-form-control-border-width)));
   border-block-start-width: var(--utrecht-select-border-width, var(--utrecht-form-control-border-width));
-  border-color: var(--utrecht-select-border-color, var(--utrecht-form-control-border-color));
   border-inline-end-width: var(--utrecht-select-border-width, var(--utrecht-form-control-border-width));
   border-inline-start-width: var(--utrecht-select-border-width, var(--utrecht-form-control-border-width));
-  border-radius: var(--utrecht-select-border-radius, var(--utrecht-form-control-border-radius, 0));
-  border-style: solid;
+  background-color: var(--utrecht-select-background-color, var(--utrecht-form-control-background-color));
   color: var(--utrecht-select-color, var(--utrecht-form-control-color));
   font-family: var(--utrecht-select-font-family, var(--utrecht-form-control-font-family));
   font-size: var(--utrecht-select-font-size, var(--utrecht-form-control-font-size));
@@ -1462,10 +1428,10 @@ however browsers don't seem to have implemented great looking supixel tweening y
       var(--utrecht-select-border-width, var(--utrecht-form-control-border-width))
     )
   );
-  background-color: var(--utrecht-select-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
+  border-color: var(--utrecht-select-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
   border-width: var(--_utrecht-select-border-width);
   border-block-end-width: var(--utrecht-select-invalid-border-block-end-width, var(--utrecht-form-control-invalid-border-block-end-width, var(--utrecht-select-border-block-end-width, var(--utrecht-form-control-border-block-end-width, var(--_utrecht-select-border-width)))));
-  border-color: var(--utrecht-select-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
+  background-color: var(--utrecht-select-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
 }
 .utrecht-html hr {
   border-color: var(--utrecht-separator-color);
@@ -1476,10 +1442,10 @@ however browsers don't seem to have implemented great looking supixel tweening y
   --utrecht-space-around: 1;
 }
 .utrecht-html table {
+  border-collapse: separate;
   /* `border-collapse: collapse` results in a broken border for sticky header and sticky footer.
    * Therefore we need to use `border-collapse: separate` instead.
    */
-  border-collapse: separate;
   border-color: var(--utrecht-table-border-color, 0);
   border-spacing: 0;
   border-style: solid;
@@ -1592,13 +1558,13 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 .utrecht-html textarea {
   /* Fall back to `resize: vertical` for browsers that don't support `resize: block` */
-  background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));
-  block-size: initial; /* harden */
-  border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));
-  border-block-end-width: var(--utrecht-textarea-border-block-end-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));
   border-color: var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color));
   border-radius: var(--utrecht-textarea-border-radius, var(--utrecht-form-control-border-radius, 0));
   border-style: solid;
+  border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));
+  border-block-end-width: var(--utrecht-textarea-border-block-end-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));
+  background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));
+  block-size: initial; /* harden */
   box-sizing: border-box;
   color: var(--utrecht-textarea-color, var(--utrecht-form-control-color));
   font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-control-font-family));
@@ -1643,10 +1609,10 @@ however browsers don't seem to have implemented great looking supixel tweening y
       var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))
     )
   );
-  background-color: var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
+  border-color: var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
   border-width: var(--_utrecht-textarea-border-width);
   border-block-end-width: var(--utrecht-textarea-invalid-border-block-end-width, var(--utrecht-form-control-invalid-border-block-end-width, var(--utrecht-textarea-border-block-end-width, var(--utrecht-form-control-border-block-end-width, var(--_utrecht-textarea-border-width)))));
-  border-color: var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
+  background-color: var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
   color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
 }
 .utrecht-html textarea {
@@ -1710,27 +1676,40 @@ however browsers don't seem to have implemented great looking supixel tweening y
       var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width, 0)) +
       var(--utrecht-textbox-autocomplete-ui-size, 44px)
   );
-  background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color));
-  block-size: initial; /* harden */
-  border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width));
-  border-block-end-width: var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width)));
+  max-inline-size: min(var(--_utrecht-textbox-max-inline-size, 100%), var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size)));
+  min-block-size: var(--utrecht-pointer-target-min-size, var(--basis-pointer-target-min-block-size, 44px));
+  min-inline-size: var(--utrecht-pointer-target-min-size, var(--basis-pointer-target-min-inline-size, 44px));
+  --_utrecht-textbox-border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width));
+  --_utrecht-textbox-border-block-end-width: var(
+    --utrecht-textbox-border-bottom-width,
+    var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))
+  );
   border-color: var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color));
   border-radius: var(--utrecht-textbox-border-radius, var(--utrecht-form-control-border-radius, 0));
   border-style: solid;
+  border-width: var(--_utrecht-textbox-border-width);
+  border-block-end-width: var(--_utrecht-textbox-border-block-end-width);
   box-sizing: border-box;
+  background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color));
   color: var(--utrecht-textbox-color, var(--utrecht-form-control-color));
+  --_utrecht-textbox-padding-block-end: var(
+    --utrecht-textbox-padding-block-end,
+    var(--utrecht-form-control-padding-block-end, 0)
+  );
+  --_utrecht-textbox-padding-block-start: var(
+    --utrecht-textbox-padding-block-start,
+    var(--utrecht-form-control-padding-block-start, 0)
+  );
+  block-size: initial; /* harden */
   display: block;
   font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-control-font-family));
   font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-control-font-size, inherit));
   font-weight: var(--utrecht-textbox-font-weight, var(--utrecht-form-control-font-weight, initial)); /* harden with `initial` */
   inline-size: 100%;
   line-height: var(--utrecht-textbox-line-height, var(--utrecht-form-control-line-height, initial));
-  min-block-size: var(--utrecht-pointer-target-min-size, 44px);
-  min-inline-size: var(--utrecht-pointer-target-min-size, 44px);
-  max-inline-size: min(var(--_utrecht-textbox-max-inline-size, 100%), var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size)));
   overflow: hidden;
-  padding-block-end: var(--utrecht-textbox-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));
-  padding-block-start: var(--utrecht-textbox-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));
+  padding-block-end: var(--_utrecht-textbox-padding-block-end);
+  padding-block-start: var(--_utrecht-textbox-padding-block-start);
   padding-inline-end: var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));
   padding-inline-start: var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));
   white-space: nowrap;
@@ -1810,10 +1789,10 @@ however browsers don't seem to have implemented great looking supixel tweening y
       var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))
     )
   );
-  background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
+  border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
   border-width: var(--_utrecht-textbox-border-width);
   border-block-end-width: var(--utrecht-textbox-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textbox-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textbox-border-width)))));
-  border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
+  background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
   color: var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
 }
 .utrecht-html input:not([type]),
@@ -1941,25 +1920,111 @@ 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.

package/dist/collection/components/icon/generated-direction-inherit.css

@@ -27,14 +27,14 @@ svg {
   /*
    * Override the width of SVGs when they are hardcoded, and avoid oversized SVG icons.
    * For example:
-   * 
+   *
    *   <svg width="128px" height="128px">
    */
-  /* stylelint-disable-next-line property-disallowed-list */
+  /* stylelint-disable-next-line csstools/use-logical */
   height: 100%;
   /* Remove tooltip from SVG `<title>` element using `pointer-events: none` */
   pointer-events: none;
-  /* stylelint-disable-next-line property-disallowed-list */
+  /* stylelint-disable-next-line csstools/use-logical */
   width: 100%;
 }
 

package/dist/collection/components/icon/generated.css

@@ -22,13 +22,13 @@ svg {
   /*
    * Override the width of SVGs when they are hardcoded, and avoid oversized SVG icons.
    * For example:
-   * 
+   *
    *   <svg width="128px" height="128px">
    */
-  /* stylelint-disable-next-line property-disallowed-list */
+  /* stylelint-disable-next-line csstools/use-logical */
   height: 100%;
   /* Remove tooltip from SVG `<title>` element using `pointer-events: none` */
   pointer-events: none;
-  /* stylelint-disable-next-line property-disallowed-list */
+  /* stylelint-disable-next-line csstools/use-logical */
   width: 100%;
 }

package/dist/collection/components/icon.css

@@ -22,13 +22,13 @@
   /*
    * Override the width of SVGs when they are hardcoded, and avoid oversized SVG icons.
    * For example:
-   * 
+   *
    *   <svg width="128px" height="128px">
    */
-  /* stylelint-disable-next-line property-disallowed-list */
+  /* stylelint-disable-next-line csstools/use-logical */
   height: 100%;
   /* Remove tooltip from SVG `<title>` element using `pointer-events: none` */
   pointer-events: none;
-  /* stylelint-disable-next-line property-disallowed-list */
+  /* stylelint-disable-next-line csstools/use-logical */
   width: 100%;
 }

package/dist/collection/components/nav-bar.css

@@ -35,4 +35,12 @@ div {
 
 :host([hidden]) {
   display: none !important;
+}
+
+:host([sticky]) {
+  background-color: var(--utrecht-nav-bar-background-color, Canvas);
+  color: var(--utrecht-nav-bar-color, CanvasText);
+  inset-block-start: 0;
+  position: sticky;
+  z-index: var(--utrecht-nav-bar-sticky-z-index, 1);
 }

package/dist/collection/components/nav-bar.js

@@ -5,8 +5,11 @@ import { h } from "@stencil/core";
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 export class NavBar {
+    constructor() {
+        this.sticky = false;
+    }
     render() {
-        return (h("div", { key: '1ff3dfeefd34721e32d9d67174d7ab62b64f1885' }, h("slot", { key: '7d0c33cfe6dc0efd182b4c442a592460e378cbe8' })));
+        return (h("div", { key: '77525d5333f5b21f82d6fe12c05e8aa3d7630d4c' }, h("slot", { key: '0eee79b3ce4c2a7b786b55aa7dbbb6fb0687e915' })));
     }
     static get is() { return "utrecht-nav-bar"; }
     static get encapsulation() { return "shadow"; }
@@ -20,5 +23,27 @@ export class NavBar {
             "$": ["nav-bar.css"]
         };
     }
+    static get properties() {
+        return {
+            "sticky": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "sticky",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
 }
 //# sourceMappingURL=nav-bar.js.map

package/dist/collection/components/nav-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"nav-bar.js","sourceRoot":"","sources":["../../src/components/nav-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAE7C;;;;GAIG;AAOH,MAAM,OAAO,MAAM;IACjB,MAAM;QACJ,OAAO,CACL;YACE,8DAAa,CACT,CACP,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h } from '@stencil/core';\n\n/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n\n@Component({\n  tag: 'utrecht-nav-bar',\n  styleUrl: 'nav-bar.scss',\n  shadow: true,\n})\nexport class NavBar {\n  render() {\n    return (\n      <div>\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"nav-bar.js","sourceRoot":"","sources":["../../src/components/nav-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;GAIG;AAOH,MAAM,OAAO,MAAM;;sBACS,KAAK;;IAE/B,MAAM;QACJ,OAAO,CACL;YACE,8DAAa,CACT,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n\n@Component({\n  tag: 'utrecht-nav-bar',\n  styleUrl: 'nav-bar.scss',\n  shadow: true,\n})\nexport class NavBar {\n  @Prop() sticky: boolean = false;\n\n  render() {\n    return (\n      <div>\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/page-body.css

@@ -15,6 +15,10 @@
   display: grid;
   flex-grow: 1;
   inline-size: 100%;
+  padding-block-end: var(--utrecht-page-body-padding-block-end);
+  padding-block-start: var(--utrecht-page-body-padding-block-start);
+  padding-inline-end: var(--utrecht-page-body-padding-inline-end);
+  padding-inline-start: var(--utrecht-page-body-padding-inline-start);
 }
 
 div {

package/dist/collection/components/page-layout.css

@@ -10,7 +10,7 @@
 */
 :host {
   align-items: flex-start;
-  block-size: 100%;
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   inline-size: 100%;

package/dist/collection/components/root.css

@@ -20,6 +20,15 @@
 /* Override the browser focus ring with our own focus ring.
  * Use `:where()` so the CSS selector specificity is `0,0,0`.
  */
+/**
+ * Only use this on Root components with an explicit height, that is not calculated based on its children.
+ */
+/**
+ * Use this mixin for `<html class="utrecht-root">`.
+ */
+/**
+ * Use this mixin for `<body class="utrecht-root">`.
+ */
 /**
  * The focus indicator should be applied to all elements that have the `:focus-visible` state.
  */
@@ -56,37 +65,103 @@
    *   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 `body` element styles for `margin`
+   * - reset `dialog` element styles for `border`, `margin` and `padding`
    */
-  /* reset `font-smoothing: antialiasing`, prefer automatic (`subpixel-antialiasing`) behavior for high-dpi screens */
+  /* Prevent a less accessible page with lower text contrast, because other CSS is downgrading from `subpixel-antialiased` to `antialiased`.
+   * Reset `font-smoothing: antialiasing` to `auto`, and prefer automatic (`subpixel-antialiasing`) behavior for high-dpi screens. */
   -webkit-font-smoothing: auto !important;
   -moz-osx-font-smoothing: auto !important;
-  /* For some new properties, use the `utrecht.body.*` design tokens as fallback for backwards compatibility. */
+  /* For some new properties, temporarily provide the `utrecht.body.*` design tokens as fallback for backwards compatibility. */
+  /**
+   * When the Root component is positioned above another content,
+   * the text must remain legible. Avoid a transparent background,
+   * causing underlying content to interfere with contents of Root.
+   *
+   * When no `background-color` design token is specified, fallback
+   * to the system `Canvas` color.
+   */
   background-color: var(--utrecht-root-background-color, Canvas);
-  block-size: 100%;
+  /* Avoid `border` on a `dialog` element. */
+  border-width: 0;
+  /*
+   * Avoid overflowing scroll container because of a `border` or `padding`,
+   * by configuring `box-sizing: border-box`.
+   */
+  box-sizing: border-box;
+  /**
+   * Prevent there is insufficient color contrast for text, when no design tokens
+   * for `color` and `background-color` are specified. In that case use
+   * the system default colors `Canvas` and `CanvasText`.
+   */
   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));
+  /* Avoid changing the meaning of text by adding word-breaks without hyphenation,
+   * in languages where this is appropriate. Browsers will hyphenate based on the language of the text
+   * as specified in the `lang` HTML-attribute.
+   */
   -webkit-hyphens: auto;
   -moz-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;
   inline-size: 100%;
-  overflow-block: auto;
-  overflow-inline: auto;
+  /* Avoid `margin` on the `body` and `dialog` element. */
+  /* stylelint-disable-next-line property-disallowed-list */
+  margin: 0;
+  min-block-size: 100%;
   overflow-wrap: break-word;
+  /* Avoid `padding` on the `dialog` element. */
+  /* stylelint-disable-next-line property-disallowed-list */
+  padding: 0;
+  /* Position fixed and sticky elements relative to the Root component,
+   * such as the Skip Link or a Sticky Navigation Bar.
+   *
+   * While the `html` element supports this out-of-the-box,
+   * adding `position: relative` adds support for elements such as `div` and `dialog`.
+   */
   position: relative;
+  /* Prefer legibility over rendering speed, for all font-sizes.
+   *
+   * When user tests and metrics indicate slow performance, we should reconsider this choice.
+   *
+   * For specific parts of the page that require high performance, this setting should
+   * be disabled locally using `text-rendering: auto`.
+   *
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-rendering
+   */
   text-rendering: optimizeLegibility;
+  /* Ensure the font-size is rendered predictably on mobile screens,
+   * by disabling the `text-size-adjust` text inflation algorithm.
+   *
+   * The responsibility now shifts to configuring the design tokens with
+   * sufficiently large font-sizes.
+   *
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-size-adjust
+   */
   -moz-text-size-adjust: none;
   -webkit-text-size-adjust: none;
   text-size-adjust: none;
+  /* Provide a built-in name for page transitions. */
+  view-transition-name: root;
 }
 @media (prefers-reduced-motion: no-preference) {
   :host {
+    /* Provide a better user experience for keyboard users, by enabling smooth scrolling.
+     * With smooth scrolling it is easier to track where the next focusable item is in relation
+     * to the previous position.
+     *
+     * Avoid this extra motion for users with specific motion preferences, by only enabling this feature
+     * when no preference is specified.
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/scroll-behavior
+     */
     scroll-behavior: smooth;
   }
 }
 :host {
+  /* For some new properties, temporarily provide the `utrecht.body.*` design tokens as fallback for backwards compatibility. */
   font-size: var(--utrecht-root-font-size, var(--utrecht-body-font-size));
   line-height: var(--utrecht-root-line-height, var(--utrecht-body-line-height));
 }

package/dist/collection/components/sidenav.css

@@ -152,7 +152,9 @@
 .utrecht-sidenav__marker--child, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child::before {
   background-color: transparent;
   block-size: 4px;
-  border: 2px solid var(--utrecht-sidenav-link-color);
+  border-color: var(--utrecht-sidenav-link-color);
+  border-style: solid;
+  border-width: 2px;
   inline-size: 4px;
   inset-block-start: 16px;
   inset-inline-start: 1.2rem;
@@ -190,7 +192,9 @@
 /* Hover layout for mousover on child__link */
 .utrecht-sidenav__marker--child.utrecht-sidenav__marker--hover, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__marker--child.utrecht-sidenav__link:hover::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__marker--hover.utrecht-sidenav__link--child::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child.utrecht-sidenav__link:hover::before, .utrecht-sidenav__link:hover .utrecht-sidenav__marker--child.utrecht-sidenav__marker, .utrecht-sidenav__link:hover .utrecht-sidenav--pseudo-elements .utrecht-sidenav__marker.utrecht-sidenav__link--child::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover .utrecht-sidenav__marker.utrecht-sidenav__link--child::before, .utrecht-sidenav__link:hover .utrecht-sidenav--pseudo-elements .utrecht-sidenav__marker--child.utrecht-sidenav__link::before, .utrecht-sidenav__link:hover .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link.utrecht-sidenav__link--child::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover .utrecht-sidenav__marker--child.utrecht-sidenav__link::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover .utrecht-sidenav__link.utrecht-sidenav__link--child::before {
   background-color: var(--utrecht-sidenav-link-hover-color);
-  border: 2px solid var(--utrecht-sidenav-link-hover-color);
+  border-color: var(--utrecht-sidenav-link-hover-color);
+  border-style: solid;
+  border-width: 2px;
 }
 
 .utrecht-sidenav--pseudo-elements {