@utrecht/component-library-css 8.0.0 → 8.1.0

package/dist/html.css

@@ -392,6 +392,8 @@
 .utrecht-html figure {
   margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-figure-margin-block-end, 0));
   margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-figure-margin-block-start, 0));
+  margin-inline-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-figure-margin-inline-end, 0));
+  margin-inline-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-figure-margin-inline-start, 0));
 }
 .utrecht-html figcaption {
   color: var(--utrecht-figure-caption-color);

package/dist/index.css

@@ -1,12 +1,12 @@
 /**
  * @license EUPL-1.2
- * Copyright (c) 2020-2025 Frameless B.V.
- * Copyright (c) 2021-2025 Gemeente Utrecht
+ * Copyright (c) 2024-2025 Gemeente Utrecht
+ * Copyright (c) 2024-2025 Frameless B.V.
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2024-2025 Gemeente Utrecht
- * Copyright (c) 2024-2025 Frameless B.V.
+ * Copyright (c) 2020-2025 Frameless B.V.
+ * Copyright (c) 2021-2025 Gemeente Utrecht
  */
 /**
  * @license EUPL-1.2
@@ -2451,6 +2451,8 @@
 .utrecht-figure {
   margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-figure-margin-block-end, 0));
   margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-figure-margin-block-start, 0));
+  margin-inline-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-figure-margin-inline-end, 0));
+  margin-inline-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-figure-margin-inline-start, 0));
 }
 
 .utrecht-figure__caption {
@@ -3675,6 +3677,260 @@
   padding-inline-start: var(--utrecht-nav-bar-link-padding-inline-start);
   text-decoration: none;
 }
+.utrecht-navigation {
+  border-block-end-color: var(--utrecht-navigation-border-block-end-color);
+  border-block-end-style: solid;
+  border-block-end-width: var(--utrecht-navigation-border-block-end-width);
+  border-block-start-color: var(--utrecht-navigation-border-block-start-color);
+  border-block-start-style: solid;
+  border-block-start-width: var(--utrecht-navigation-border-block-start-width);
+  margin-block-end: var(--utrecht-nav-margin-back-end);
+  margin-block-start: var(--utrecht-nav-margin-back-start);
+}
+
+.utrecht-navigation--mobile {
+  align-items: flex-end;
+  block-size: 100%;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  inline-size: 100%;
+  justify-content: var(--utrecht-navigation-mobile-justify-content, flex-start);
+}
+
+.utrecht-navigation-drawer {
+  --utrecht-drawer-padding-block-start: 0;
+  --utrecht-drawer-padding-inline-start: 0;
+  --utrecht-drawer-padding-inline-end: 0;
+  --utrecht-drawer-min-inline-size: var(--utrecht-navigation-drawer-min-inline-size);
+}
+
+.utrecht-navigation-drawer::backdrop {
+  --utrecht-backdrop-background-color: var(--utrecht-navigation-drawer-backdrop-background-color);
+}
+
+.utrecht-navigation__item {
+  border-block-end-color: var(--utrecht-navigation-item-border-block-end-color);
+  border-block-end-style: solid;
+  border-block-end-width: var(--utrecht-navigation-item-border-block-end-width);
+  border-block-start-color: var(--utrecht-navigation-item-border-block-start-color);
+  border-block-start-style: solid;
+  border-block-start-width: var(--utrecht-navigation-item-border-block-start-width);
+  flex: 1 1 auto;
+  padding-block-end: var(--utrecht-navigation-item-padding-block-end);
+  padding-block-start: var(--utrecht-navigation-item-padding-block-start);
+  padding-inline-end: var(--utrecht-navigation-item-padding-inline-end);
+  padding-inline-start: var(--utrecht-navigation-item-padding-inline-start);
+}
+.utrecht-navigation__item:last-child .utrecht-navigation__link {
+  border-inline-end: none;
+}
+
+.utrecht-navigation__item--mobile {
+  --utrecht-navigation-item-padding-block-start: var(--utrecht-navigation-item-mobile-padding-block-start);
+  --utrecht-navigation-item-padding-block-end: var(--utrecht-navigation-item-mobile-padding-block-end);
+  --utrecht-navigation-item-padding-inline-start: var(--utrecht-navigation-item-mobile-padding-inline-start);
+  --utrecht-navigation-item-padding-inline-end: var(--utrecht-navigation-item-mobile-padding-inline-end);
+  --utrecht-navigation-item-border-block-end-color: var(--utrecht-navigation-item-mobile-border-block-end-color);
+  --utrecht-navigation-item-border-block-end-width: var(--utrecht-navigation-item-mobile-border-block-end-width);
+}
+.utrecht-navigation__item--mobile:first-of-type {
+  --utrecht-navigation-item-border-block-start-color: var(--utrecht-navigation-item-mobile-border-block-start-color);
+  --utrecht-navigation-item-border-block-start-width: var(--utrecht-navigation-item-mobile-border-block-start-width);
+}
+
+.utrecht-navigation__link {
+  --utrecht-link-focus-text-decoration: underline;
+  --utrecht-link-focus-text-decoration-thickness: var(--utrecht-navigation-link-focus-text-decoration-thickness);
+  --utrecht-link-text-decoration: none;
+  --utrecht-link-active-color: var(--utrecht-navigation-link-active-color);
+  --utrecht-link-hover-text-decoration-thickness: var(--utrecht-navigation-link-hover-decoration-thickness);
+  --utrecht-link-hover-color: var(--utrecht-navigation-link-hover-color);
+  --utrecht-link-color: var(--utrecht-navigation-link-color);
+  --utrecht-link-visited-color: var(--utrecht-navigation-link-color);
+  align-items: var(--_utrecht-navigation-link-align-items, center);
+  background-color: var(--utrecht-navigation-link-background-color);
+  border-inline-end-color: var(--utrecht-navigation-link-border-color);
+  border-inline-end-style: solid;
+  border-inline-end-width: var(--utrecht-navigation-link-border-inline-end-width);
+  display: flex;
+  font-weight: var(--utrecht-navigation-link-font-weight);
+  gap: var(--utrecht-navigation-link-gap, 8px);
+  justify-content: var(--_utrecht-navigation-link-justify-content, center);
+  padding-block-end: var(--utrecht-navigation-link-padding-block-end);
+  padding-block-start: var(--utrecht-navigation-link-padding-block-start);
+  padding-inline-end: var(--utrecht-navigation-link-padding-inline-end);
+  padding-inline-start: var(--utrecht-navigation-link-padding-inline-start);
+  text-align: var(--utrecht-navigation-link-text-align);
+}
+
+.utrecht-navigation__link:hover {
+  --utrecht-navigation-link-background-color: var(--utrecht-navigation-link-hover-background-color);
+  --utrecht-navigation-marker-color: currentColor;
+  --utrecht-navigation-marker-outline-hover-fill: currentColor;
+}
+
+.utrecht-navigation__link:focus {
+  --utrecht-link-focus-color: var(--utrecht-navigation-link-focus-color);
+  --utrecht-link-focus-background-color: var(--utrecht-color-yellow-80);
+  --utrecht-navigation-marker-color: currentColor;
+  --utrecht-navigation-marker-outline-hover-fill: currentColor;
+}
+
+.utrecht-navigation__link:active:focus {
+  --utrecht-link-focus-color: var(--utrecht-navigation-link-active-focus-color);
+}
+
+.utrecht-navigation__link--mobile {
+  --_utrecht-navigation-link-align-items: center;
+  --_utrecht-navigation-link-justify-content: normal;
+  --utrecht-navigation-link-padding-inline-start: var(--utrecht-navigation-link-mobile-padding-inline-start);
+  --utrecht-navigation-link-padding-inline-end: var(--utrecht-navigation-link-mobile-padding-inline-end);
+  --utrecht-navigation-link-padding-block-start: var(--utrecht-navigation-link-mobile-padding-block-start);
+  --utrecht-navigation-link-padding-block-end: var(--utrecht-navigation-link-mobile-padding-block-end);
+  --utrecht-navigation-link-border-inline-end-width: 0;
+  --utrecht-navigation-link-border-color: transparent;
+  --utrecht-navigation-link-background-color: var(--utrecht-navigation-link-mobile-background-color);
+  --utrecht-navigation-link-color: var(--utrecht-navigation-link-mobile-color);
+  --utrecht-navigation-link-justify-content: var(--utrecht-navigation-link-mobile-justify-content, flex-start);
+  flex: 1 1 auto;
+  min-block-size: var(--utrecht-navigation-link-mobile-min-block-size);
+  transition-duration: var(--utrecht-navigation-link-mobile-transition-duration);
+  transition-property: font-weight;
+  transition-timing-function: var(--utrecht-navigation-link-mobile-transition-timing-function);
+}
+
+.utrecht-navigation__link--mobile:hover {
+  --utrecht-navigation-link-background-color: var(--utrecht-navigation-link-mobile-hover-background-color);
+  --utrecht-link-hover-color: var(--utrecht-navigation-link-mobile-hover-color);
+  --utrecht-navigation-link-font-weight: var(--utrecht-navigation-link-mobile-hover-font-weight);
+}
+
+.utrecht-navigation__link--is-current {
+  --utrecht-navigation-link-font-weight: var(--utrecht-navigation-link-is-current-font-weight);
+}
+
+.utrecht-navigation__list {
+  display: var(--utrecht-navigation-list-display, flex);
+  inline-size: var(--utrecht-navigation-list-inline-size);
+  list-style: none;
+  margin-block-end: 0;
+  margin-block-start: 0;
+  padding-block-end: var(--utrecht-navigation-list-padding-block-end);
+  padding-block-start: var(--utrecht-navigation-list-padding-block-start);
+  padding-inline-end: var(--utrecht-navigation-list-padding-inline-end);
+  padding-inline-start: var(--utrecht-navigation-list-padding-inline-start);
+}
+
+.utrecht-navigation__list:focus {
+  outline: none;
+}
+
+.utrecht-navigation__list--mobile {
+  --utrecht-navigation-list-display: block;
+  --utrecht-navigation-list-padding-block-start: var(--utrecht-navigation-list-mobile-padding-block-start);
+  --utrecht-navigation-list-padding-block-end: var(--utrecht-navigation-list-mobile-padding-block-end);
+  --utrecht-navigation-list-padding-inline-start: var(--utrecht-navigation-list-mobile-padding-inline-start);
+  --utrecht-navigation-list-padding-inline-end: var(--utrecht-navigation-list-mobile-padding-inline-end);
+  --utrecht-navigation-list-inline-size: var(--utrecht-navigation-list-mobile-inline-size);
+  background-color: var(--utrecht-navigation-list-mobile-background-color);
+  block-size: 100%;
+  box-sizing: border-box;
+  flex: 1;
+  overflow-y: auto;
+}
+
+.utrecht-navigation__list--side-nav {
+  --utrecht-navigation-list-inline-size: var(--utrecht-navigation-list-side-nav-inline-size);
+}
+
+.utrecht-navigation__list--sub-list {
+  display: var(--utrecht-navigation-list-display, flex);
+  inline-size: var(--utrecht-navigation-list-inline-size);
+  list-style: none;
+  margin-block-end: 0;
+  margin-block-start: 0;
+  padding-block-end: var(--utrecht-navigation-list-padding-block-end);
+  padding-block-start: var(--utrecht-navigation-list-padding-block-start);
+  padding-inline-end: var(--utrecht-navigation-list-padding-inline-end);
+  padding-inline-start: var(--utrecht-navigation-list-padding-inline-start);
+  --utrecht-navigation-list-display: block;
+  --utrecht-navigation-list-padding-block-start: var(--utrecht-navigation-list-mobile-padding-block-start);
+  --utrecht-navigation-list-padding-block-end: var(--utrecht-navigation-list-mobile-padding-block-end);
+  --utrecht-navigation-list-padding-inline-start: var(--utrecht-navigation-list-mobile-padding-inline-start);
+  --utrecht-navigation-list-padding-inline-end: var(--utrecht-navigation-list-mobile-padding-inline-end);
+  --utrecht-navigation-list-inline-size: var(--utrecht-navigation-list-mobile-inline-size);
+  background-color: var(--utrecht-navigation-list-mobile-background-color);
+  block-size: 100%;
+  box-sizing: border-box;
+  flex: 1;
+  overflow-y: auto;
+  inline-size: 100%;
+  padding-block-end: 0;
+  padding-block-start: 0;
+  padding-inline-end: 0;
+}
+
+.utrecht-navigation__list--sub-list-item {
+  --utrecht-navigation-item-border-block-start-width: 0;
+  --utrecht-navigation-item-border-block-end-width: 0;
+  --utrecht-navigation-item-mobile-border-block-start-width: 0;
+  --utrecht-navigation-item-mobile-border-block-end-width: 0;
+  --utrecht-navigation-list-mobile-padding-inline-end: 0;
+}
+
+.utrecht-navigation__marker {
+  color: var(--utrecht-navigation-marker-color);
+  flex-shrink: 0;
+}
+
+.utrecht-navigation__marker--current {
+  --utrecht-navigation-marker-color: currentColor;
+}
+
+.utrecht-navigation__marker--outline {
+  fill: var(--utrecht-navigation-marker-outline-hover-fill, none);
+}
+
+.utrecht-navigation__toggle-button {
+  --utrecht-button-subtle-color: currentColor;
+  --utrecht-button-subtle-hover-color: currentColor;
+  --utrecht-button-subtle-hover-border-color: transparent;
+  --utrecht-button-subtle-active-background-color: transparent;
+  --utrecht-button-subtle-active-border-color: transparent;
+  --utrecht-button-subtle-active-color: currentColor;
+  --utrecht-button-subtle-focus-background-color: transparent;
+  --utrecht-button-subtle-focus-border-color: transparent;
+  --utrecht-button-subtle-focus-color: currentColor;
+  --utrecht-button-subtle-hover-border-width: 0;
+  --utrecht-button-hover-scale: 1;
+  --utrecht-button-focus-scale: 1;
+  --utrecht-button-group-margin-block-start: var(--utrecht-navigation-toggle-button-margin-block-start);
+  --utrecht-button-group-margin-block-end: var(--utrecht-navigation-toggle-button-margin-block-end);
+  justify-content: flex-end;
+  padding-inline-end: var(--utrecht-navigation-toggle-button-padding-inline-end);
+}
+
+.utrecht-icon-custom {
+  margin-inline-end: var(--utrecht-icon-custom-margin-inline-end);
+}
+
+.utrecht-navigation__toggle-button--start-end {
+  --utrecht-button-group-margin-block-start: calc(-1 * var(--utrecht-navigation-toggle-button-offset-start));
+  margin-inline-end: calc(-1 * var(--utrecht-navigation-toggle-button-offset-end));
+}
+
+.utrecht-navigation__toggle-button-close {
+  margin-block-end: var(--utrecht-navigation-toggle-button-close, 32px);
+  margin-inline-end: calc(-1 * var(--utrecht-navigation-toggle-button-offset-end, 16px));
+  margin-inline-start: auto;
+}
+
+@media (width >= 600px) {
+  .utrecht-navigation-drawer {
+    --utrecht-navigation-drawer-min-inline-size: var(--utrecht-navigation-drawer-mobile-min-inline-size);
+  }
+}
 .utrecht-number-badge {
   background-color: var(--utrecht-number-badge-background-color, var(--utrecht-badge-background-color, hsl(0, 0%, 0%)));
   border-color: var(--utrecht-number-badge-border-color, var(--utrecht-badge-border-color));

package/dist/prince-xml.css

@@ -1,12 +1,12 @@
 /**
  * @license EUPL-1.2
- * Copyright (c) 2020-2025 Frameless B.V.
- * Copyright (c) 2021-2025 Gemeente Utrecht
+ * Copyright (c) 2024-2025 Gemeente Utrecht
+ * Copyright (c) 2024-2025 Frameless B.V.
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2024-2025 Gemeente Utrecht
- * Copyright (c) 2024-2025 Frameless B.V.
+ * Copyright (c) 2020-2025 Frameless B.V.
+ * Copyright (c) 2021-2025 Gemeente Utrecht
  */
 /**
  * @license EUPL-1.2
@@ -2373,6 +2373,8 @@
 .utrecht-figure {
   margin-bottom: calc(var(--utrecht-space-around, 0) * var(--utrecht-figure-margin-block-end, 0));
   margin-top: calc(var(--utrecht-space-around, 0) * var(--utrecht-figure-margin-block-start, 0));
+  margin-right: calc(var(--utrecht-space-around, 0) * var(--utrecht-figure-margin-inline-end, 0));
+  margin-left: calc(var(--utrecht-space-around, 0) * var(--utrecht-figure-margin-inline-start, 0));
 }
 
 .utrecht-figure__caption {
@@ -3537,6 +3539,260 @@
   padding-left: var(--utrecht-nav-bar-link-padding-inline-start);
   text-decoration: none;
 }
+.utrecht-navigation {
+  border-bottom-color: var(--utrecht-navigation-border-block-end-color);
+  border-bottom-style: solid;
+  border-bottom-width: var(--utrecht-navigation-border-block-end-width);
+  border-top-color: var(--utrecht-navigation-border-block-start-color);
+  border-top-style: solid;
+  border-top-width: var(--utrecht-navigation-border-block-start-width);
+  margin-bottom: var(--utrecht-nav-margin-back-end);
+  margin-top: var(--utrecht-nav-margin-back-start);
+}
+
+.utrecht-navigation--mobile {
+  align-items: flex-end;
+  height: 100%;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  width: 100%;
+  justify-content: var(--utrecht-navigation-mobile-justify-content, flex-start);
+}
+
+.utrecht-navigation-drawer {
+  --utrecht-drawer-padding-block-start: 0;
+  --utrecht-drawer-padding-inline-start: 0;
+  --utrecht-drawer-padding-inline-end: 0;
+  --utrecht-drawer-min-inline-size: var(--utrecht-navigation-drawer-min-inline-size);
+}
+
+.utrecht-navigation-drawer[prince-xml-ignore-pseudo-element-backdrop] {
+  --utrecht-backdrop-background-color: var(--utrecht-navigation-drawer-backdrop-background-color);
+}
+
+.utrecht-navigation__item {
+  border-bottom-color: var(--utrecht-navigation-item-border-block-end-color);
+  border-bottom-style: solid;
+  border-bottom-width: var(--utrecht-navigation-item-border-block-end-width);
+  border-top-color: var(--utrecht-navigation-item-border-block-start-color);
+  border-top-style: solid;
+  border-top-width: var(--utrecht-navigation-item-border-block-start-width);
+  flex: 1 1 auto;
+  padding-bottom: var(--utrecht-navigation-item-padding-block-end);
+  padding-top: var(--utrecht-navigation-item-padding-block-start);
+  padding-right: var(--utrecht-navigation-item-padding-inline-end);
+  padding-left: var(--utrecht-navigation-item-padding-inline-start);
+}
+.utrecht-navigation__item:last-child .utrecht-navigation__link {
+  border-right: none;
+}
+
+.utrecht-navigation__item--mobile {
+  --utrecht-navigation-item-padding-block-start: var(--utrecht-navigation-item-mobile-padding-block-start);
+  --utrecht-navigation-item-padding-block-end: var(--utrecht-navigation-item-mobile-padding-block-end);
+  --utrecht-navigation-item-padding-inline-start: var(--utrecht-navigation-item-mobile-padding-inline-start);
+  --utrecht-navigation-item-padding-inline-end: var(--utrecht-navigation-item-mobile-padding-inline-end);
+  --utrecht-navigation-item-border-block-end-color: var(--utrecht-navigation-item-mobile-border-block-end-color);
+  --utrecht-navigation-item-border-block-end-width: var(--utrecht-navigation-item-mobile-border-block-end-width);
+}
+.utrecht-navigation__item--mobile:first-of-type {
+  --utrecht-navigation-item-border-block-start-color: var(--utrecht-navigation-item-mobile-border-block-start-color);
+  --utrecht-navigation-item-border-block-start-width: var(--utrecht-navigation-item-mobile-border-block-start-width);
+}
+
+.utrecht-navigation__link {
+  --utrecht-link-focus-text-decoration: underline;
+  --utrecht-link-focus-text-decoration-thickness: var(--utrecht-navigation-link-focus-text-decoration-thickness);
+  --utrecht-link-text-decoration: none;
+  --utrecht-link-active-color: var(--utrecht-navigation-link-active-color);
+  --utrecht-link-hover-text-decoration-thickness: var(--utrecht-navigation-link-hover-decoration-thickness);
+  --utrecht-link-hover-color: var(--utrecht-navigation-link-hover-color);
+  --utrecht-link-color: var(--utrecht-navigation-link-color);
+  --utrecht-link-visited-color: var(--utrecht-navigation-link-color);
+  align-items: var(--_utrecht-navigation-link-align-items, center);
+  background-color: var(--utrecht-navigation-link-background-color);
+  border-right-color: var(--utrecht-navigation-link-border-color);
+  border-right-style: solid;
+  border-right-width: var(--utrecht-navigation-link-border-inline-end-width);
+  display: flex;
+  font-weight: var(--utrecht-navigation-link-font-weight);
+  gap: var(--utrecht-navigation-link-gap, 8px);
+  justify-content: var(--_utrecht-navigation-link-justify-content, center);
+  padding-bottom: var(--utrecht-navigation-link-padding-block-end);
+  padding-top: var(--utrecht-navigation-link-padding-block-start);
+  padding-right: var(--utrecht-navigation-link-padding-inline-end);
+  padding-left: var(--utrecht-navigation-link-padding-inline-start);
+  text-align: var(--utrecht-navigation-link-text-align);
+}
+
+.utrecht-navigation__link:hover {
+  --utrecht-navigation-link-background-color: var(--utrecht-navigation-link-hover-background-color);
+  --utrecht-navigation-marker-color: currentColor;
+  --utrecht-navigation-marker-outline-hover-fill: currentColor;
+}
+
+.utrecht-navigation__link:focus {
+  --utrecht-link-focus-color: var(--utrecht-navigation-link-focus-color);
+  --utrecht-link-focus-background-color: var(--utrecht-color-yellow-80);
+  --utrecht-navigation-marker-color: currentColor;
+  --utrecht-navigation-marker-outline-hover-fill: currentColor;
+}
+
+.utrecht-navigation__link:active:focus {
+  --utrecht-link-focus-color: var(--utrecht-navigation-link-active-focus-color);
+}
+
+.utrecht-navigation__link--mobile {
+  --_utrecht-navigation-link-align-items: center;
+  --_utrecht-navigation-link-justify-content: normal;
+  --utrecht-navigation-link-padding-inline-start: var(--utrecht-navigation-link-mobile-padding-inline-start);
+  --utrecht-navigation-link-padding-inline-end: var(--utrecht-navigation-link-mobile-padding-inline-end);
+  --utrecht-navigation-link-padding-block-start: var(--utrecht-navigation-link-mobile-padding-block-start);
+  --utrecht-navigation-link-padding-block-end: var(--utrecht-navigation-link-mobile-padding-block-end);
+  --utrecht-navigation-link-border-inline-end-width: 0;
+  --utrecht-navigation-link-border-color: transparent;
+  --utrecht-navigation-link-background-color: var(--utrecht-navigation-link-mobile-background-color);
+  --utrecht-navigation-link-color: var(--utrecht-navigation-link-mobile-color);
+  --utrecht-navigation-link-justify-content: var(--utrecht-navigation-link-mobile-justify-content, flex-start);
+  flex: 1 1 auto;
+  min-height: var(--utrecht-navigation-link-mobile-min-block-size);
+  transition-duration: var(--utrecht-navigation-link-mobile-transition-duration);
+  transition-property: font-weight;
+  transition-timing-function: var(--utrecht-navigation-link-mobile-transition-timing-function);
+}
+
+.utrecht-navigation__link--mobile:hover {
+  --utrecht-navigation-link-background-color: var(--utrecht-navigation-link-mobile-hover-background-color);
+  --utrecht-link-hover-color: var(--utrecht-navigation-link-mobile-hover-color);
+  --utrecht-navigation-link-font-weight: var(--utrecht-navigation-link-mobile-hover-font-weight);
+}
+
+.utrecht-navigation__link--is-current {
+  --utrecht-navigation-link-font-weight: var(--utrecht-navigation-link-is-current-font-weight);
+}
+
+.utrecht-navigation__list {
+  display: var(--utrecht-navigation-list-display, flex);
+  width: var(--utrecht-navigation-list-inline-size);
+  list-style: none;
+  margin-bottom: 0;
+  margin-top: 0;
+  padding-bottom: var(--utrecht-navigation-list-padding-block-end);
+  padding-top: var(--utrecht-navigation-list-padding-block-start);
+  padding-right: var(--utrecht-navigation-list-padding-inline-end);
+  padding-left: var(--utrecht-navigation-list-padding-inline-start);
+}
+
+.utrecht-navigation__list:focus {
+  outline: none;
+}
+
+.utrecht-navigation__list--mobile {
+  --utrecht-navigation-list-display: block;
+  --utrecht-navigation-list-padding-block-start: var(--utrecht-navigation-list-mobile-padding-block-start);
+  --utrecht-navigation-list-padding-block-end: var(--utrecht-navigation-list-mobile-padding-block-end);
+  --utrecht-navigation-list-padding-inline-start: var(--utrecht-navigation-list-mobile-padding-inline-start);
+  --utrecht-navigation-list-padding-inline-end: var(--utrecht-navigation-list-mobile-padding-inline-end);
+  --utrecht-navigation-list-inline-size: var(--utrecht-navigation-list-mobile-inline-size);
+  background-color: var(--utrecht-navigation-list-mobile-background-color);
+  height: 100%;
+  box-sizing: border-box;
+  flex: 1;
+  overflow-y: auto;
+}
+
+.utrecht-navigation__list--side-nav {
+  --utrecht-navigation-list-inline-size: var(--utrecht-navigation-list-side-nav-inline-size);
+}
+
+.utrecht-navigation__list--sub-list {
+  display: var(--utrecht-navigation-list-display, flex);
+  width: var(--utrecht-navigation-list-inline-size);
+  list-style: none;
+  margin-bottom: 0;
+  margin-top: 0;
+  padding-bottom: var(--utrecht-navigation-list-padding-block-end);
+  padding-top: var(--utrecht-navigation-list-padding-block-start);
+  padding-right: var(--utrecht-navigation-list-padding-inline-end);
+  padding-left: var(--utrecht-navigation-list-padding-inline-start);
+  --utrecht-navigation-list-display: block;
+  --utrecht-navigation-list-padding-block-start: var(--utrecht-navigation-list-mobile-padding-block-start);
+  --utrecht-navigation-list-padding-block-end: var(--utrecht-navigation-list-mobile-padding-block-end);
+  --utrecht-navigation-list-padding-inline-start: var(--utrecht-navigation-list-mobile-padding-inline-start);
+  --utrecht-navigation-list-padding-inline-end: var(--utrecht-navigation-list-mobile-padding-inline-end);
+  --utrecht-navigation-list-inline-size: var(--utrecht-navigation-list-mobile-inline-size);
+  background-color: var(--utrecht-navigation-list-mobile-background-color);
+  height: 100%;
+  box-sizing: border-box;
+  flex: 1;
+  overflow-y: auto;
+  width: 100%;
+  padding-bottom: 0;
+  padding-top: 0;
+  padding-right: 0;
+}
+
+.utrecht-navigation__list--sub-list-item {
+  --utrecht-navigation-item-border-block-start-width: 0;
+  --utrecht-navigation-item-border-block-end-width: 0;
+  --utrecht-navigation-item-mobile-border-block-start-width: 0;
+  --utrecht-navigation-item-mobile-border-block-end-width: 0;
+  --utrecht-navigation-list-mobile-padding-inline-end: 0;
+}
+
+.utrecht-navigation__marker {
+  color: var(--utrecht-navigation-marker-color);
+  flex-shrink: 0;
+}
+
+.utrecht-navigation__marker--current {
+  --utrecht-navigation-marker-color: currentColor;
+}
+
+.utrecht-navigation__marker--outline {
+  fill: var(--utrecht-navigation-marker-outline-hover-fill, none);
+}
+
+.utrecht-navigation__toggle-button {
+  --utrecht-button-subtle-color: currentColor;
+  --utrecht-button-subtle-hover-color: currentColor;
+  --utrecht-button-subtle-hover-border-color: transparent;
+  --utrecht-button-subtle-active-background-color: transparent;
+  --utrecht-button-subtle-active-border-color: transparent;
+  --utrecht-button-subtle-active-color: currentColor;
+  --utrecht-button-subtle-focus-background-color: transparent;
+  --utrecht-button-subtle-focus-border-color: transparent;
+  --utrecht-button-subtle-focus-color: currentColor;
+  --utrecht-button-subtle-hover-border-width: 0;
+  --utrecht-button-hover-scale: 1;
+  --utrecht-button-focus-scale: 1;
+  --utrecht-button-group-margin-block-start: var(--utrecht-navigation-toggle-button-margin-block-start);
+  --utrecht-button-group-margin-block-end: var(--utrecht-navigation-toggle-button-margin-block-end);
+  justify-content: flex-end;
+  padding-right: var(--utrecht-navigation-toggle-button-padding-inline-end);
+}
+
+.utrecht-icon-custom {
+  margin-right: var(--utrecht-icon-custom-margin-inline-end);
+}
+
+.utrecht-navigation__toggle-button--start-end {
+  --utrecht-button-group-margin-block-start: calc(-1 * var(--utrecht-navigation-toggle-button-offset-start));
+  margin-right: calc(-1 * var(--utrecht-navigation-toggle-button-offset-end));
+}
+
+.utrecht-navigation__toggle-button-close {
+  margin-bottom: var(--utrecht-navigation-toggle-button-close, 32px);
+  margin-right: calc(-1 * var(--utrecht-navigation-toggle-button-offset-end, 16px));
+  margin-left: auto;
+}
+
+@media (width >= 600px) {
+  .utrecht-navigation-drawer {
+    --utrecht-navigation-drawer-min-inline-size: var(--utrecht-navigation-drawer-mobile-min-inline-size);
+  }
+}
 .utrecht-number-badge {
   background-color: var(--utrecht-number-badge-background-color, var(--utrecht-badge-background-color, hsl(0, 0%, 0%)));
   border-color: var(--utrecht-number-badge-border-color, var(--utrecht-badge-border-color));
@@ -7782,6 +8038,8 @@
 .utrecht-html figure {
   margin-bottom: calc(var(--utrecht-space-around, 0) * var(--utrecht-figure-margin-block-end, 0));
   margin-top: calc(var(--utrecht-space-around, 0) * var(--utrecht-figure-margin-block-start, 0));
+  margin-right: calc(var(--utrecht-space-around, 0) * var(--utrecht-figure-margin-inline-end, 0));
+  margin-left: calc(var(--utrecht-space-around, 0) * var(--utrecht-figure-margin-inline-start, 0));
 }
 .utrecht-html figcaption {
   color: var(--utrecht-figure-caption-color);

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "8.0.0",
+  "version": "8.1.0",
   "author": "Community for NL Design System",
   "description": "Component library bundle for the Municipality of Utrecht based on the NL Design System architecture",
   "license": "EUPL-1.2",
@@ -20,16 +20,18 @@
     "directory": "packages/component-library-css"
   },
   "dependencies": {
+    "@utrecht/accordion-css": "2.0.0",
     "@utrecht/action-group-css": "2.0.0",
-    "@utrecht/alert-dialog-css": "1.4.2",
     "@utrecht/alert-css": "2.4.0",
-    "@utrecht/accordion-css": "2.0.0",
+    "@utrecht/alert-dialog-css": "1.4.2",
     "@utrecht/alternate-lang-nav-css": "1.3.1",
     "@utrecht/article-css": "1.5.1",
     "@utrecht/backdrop-css": "1.4.1",
     "@utrecht/badge-counter-css": "1.4.1",
     "@utrecht/badge-list-css": "2.2.1",
     "@utrecht/badge-status-css": "1.4.1",
+    "@utrecht/blockquote-css": "1.6.1",
+    "@utrecht/body-css": "1.2.1",
     "@utrecht/breadcrumb-nav-css": "1.5.1",
     "@utrecht/button-css": "2.3.1",
     "@utrecht/button-group-css": "1.5.0",
@@ -48,9 +50,9 @@
     "@utrecht/data-placeholder-css": "1.4.1",
     "@utrecht/digid-button-css": "1.4.1",
     "@utrecht/document-css": "1.5.1",
-    "@utrecht/emphasis-css": "1.5.1",
     "@utrecht/drawer-css": "1.4.1",
-    "@utrecht/figure-css": "1.5.1",
+    "@utrecht/emphasis-css": "1.5.1",
+    "@utrecht/figure-css": "1.6.0",
     "@utrecht/form-css": "1.5.1",
     "@utrecht/form-field-css": "1.5.1",
     "@utrecht/form-field-description-css": "1.5.1",
@@ -82,8 +84,9 @@
     "@utrecht/map-marker-css": "1.4.1",
     "@utrecht/mark-css": "1.5.1",
     "@utrecht/multiline-data-css": "1.3.1",
-    "@utrecht/nav-list-css": "1.3.1",
     "@utrecht/nav-bar-css": "1.4.1",
+    "@utrecht/nav-list-css": "1.3.1",
+    "@utrecht/navigation-css": "1.0.0",
     "@utrecht/number-badge-css": "2.3.1",
     "@utrecht/number-data-css": "1.4.1",
     "@utrecht/ordered-list-css": "2.0.0",
@@ -96,8 +99,8 @@
     "@utrecht/pagination-css": "1.4.1",
     "@utrecht/paragraph-css": "2.3.1",
     "@utrecht/pre-heading-css": "1.4.1",
-    "@utrecht/radio-button-css": "1.6.1",
     "@utrecht/preserve-data-css": "1.3.1",
+    "@utrecht/radio-button-css": "1.6.1",
     "@utrecht/rich-text-css": "1.4.0",
     "@utrecht/root-css": "1.2.1",
     "@utrecht/search-bar-css": "2.2.1",
@@ -115,9 +118,7 @@
     "@utrecht/top-task-nav-css": "1.3.1",
     "@utrecht/unordered-list-css": "1.5.1",
     "@utrecht/url-data-css": "1.3.1",
-    "@utrecht/youtube-video-css": "1.0.0",
-    "@utrecht/body-css": "1.2.1",
-    "@utrecht/blockquote-css": "1.6.1"
+    "@utrecht/youtube-video-css": "1.0.0"
   },
   "devDependencies": {
     "postcss": "8.4.38",