@utrecht/component-library-css 1.0.0-alpha.165 → 1.0.0-alpha.169

package/dist/bem.css

@@ -1269,6 +1269,16 @@ however browsers don't seem to have implemented great looking supixel tweening y
   text-underline-offset: var(--utrecht-link-text-underline-offset);
 }
 
+.utrecht-link-icon-left {
+  background-image: var(--utrecht-link-icon-left-background-image, none);
+  background-position: 0 0.25em;
+  background-repeat: no-repeat;
+  color: var(--utrecht-link-color, blue);
+  font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
+  padding-inline-start: var(--utrecht-space-block-md);
+  text-decoration: none;
+}
+
 .utrecht-link:visited,
 .utrecht-link--visited {
   color: var(--utrecht-link-visited-color, var(--utrecht-link-color));
@@ -1575,11 +1585,12 @@ however browsers don't seem to have implemented great looking supixel tweening y
  * Copyright (c) 2021 Robbert Broersma
  */
 /* stylelint-disable-next-line block-no-empty */
-.utrecht-navhtml {
-  font-family: var(--utrecht-font-family-sans-serif);
-}
-
 .utrecht-sidenav {
+  --utrecht-sidenav-connection-color: var(--utrecht-sidenav-item-marker-color);
+  --utrecht-sidenav-connection-inline-size: 2px;
+  --utrecht-sidenav-marker-current-color: var(--utrecht-sidenav-link-hover-color);
+  --utrecht-sidenav-marker-offset: 26px;
+  --utrecht-sidenav-connection-block-size: 38px;
   border-block-end: 1px solid var(--utrecht-color-grey-80);
   border-block-start: 1px solid var(--utrecht-color-grey-80);
   margin-block-end: 0;
@@ -1597,212 +1608,152 @@ however browsers don't seem to have implemented great looking supixel tweening y
   padding-inline-start: 0;
 }
 
-.utrecht-sidenav__list ul {
-  margin-block-end: 0;
-  padding-block-end: 0;
-  padding-block-start: 0;
-  padding-inline-start: 1.2rem;
+.utrecht-sidenav__list--child {
+  margin-block-start: 0;
+  padding-inline-end: 0;
+  padding-inline-start: 1.4rem;
 }
 
-.utrecht-sidenav__item,
-.utrecht-sidenav__sibling__item {
+.utrecht-sidenav__item {
   list-style: none;
   margin-inline-start: 0;
   position: relative;
 }
 
-.utrecht-sidenav__item:last-child {
+.utrecht-sidenav__item--current {
+  color: var(--utrecht-sidenav-item-hover-color, var(--utrecht-link-hover-color, red));
+}
+
+.utrecht-sidenav__item--last {
   border-block-end: none;
 }
 
 /* draw the li item box bottom line */
-.utrecht-sidenav__item span:not(.utrecht-sidenav__item:last-child span, .utrecht-sidenav__item--has-children span:first-of-type) {
+.utrecht-sidenav__item-separator:not(.utrecht-sidenav__item--last .utrecht-sidenav__item-separator,
+.utrecht-sidenav__item--has-children .utrecht-sidenav__item-separator:first-of-type) {
+  /* .utrecht-sidenav__item--has-children span */
   border-block-end: 1px solid var(--utrecht-color-grey-80);
   display: block;
-  margin-inline-start: var(--utrecht-space-inline-lg);
-}
-
-/* Remove bottom padding form first item in list with children */
-.utrecht-sidenav__item .utrecht-sidenav__link--has-children {
-  padding-block-end: 0;
+  margin-inline-start: var(--utrecht-space-inline-md);
 }
 
-.utrecht-sidenav__child__item {
-  list-style: none;
-}
-
-.utrecht-sidenav__link,
-.utrecht-sidenav__link--sibling {
+.utrecht-sidenav__link {
   color: var(--utrecht-sidenav-link-color, var(--utrecht-link-color, blue));
   display: block;
   margin-inline-start: 0;
   padding-block-end: var(--utrecht-space-block-xs);
   padding-block-start: var(--utrecht-space-block-xs);
   padding-inline-end: var(--utrecht-space-inline-3xs);
-  padding-inline-start: var(--utrecht-space-inline-xl);
+  padding-inline-start: var(--utrecht-space-inline-lg);
   text-decoration: none;
 }
 
-.utrecht-sidenav__link--child,
-.utrecht-sidenav__link--child--current {
-  color: var(--utrecht-sidenav-link-color, var(--utrecht-link-color, blue));
-  display: block;
-  margin-block-end: 0;
-  margin-block-start: 0;
-  padding-block-end: var(--utrecht-space-block-2xs);
-  padding-block-start: var(--utrecht-space-block-2xs);
-  padding-inline-end: var(--utrecht-space-inline-3xs);
-  padding-inline-start: var(--utrecht-space-inline-xl);
-  text-decoration: none;
-}
-
-.utrecht-sidenav__link::before,
-.utrecht-sidenav__link--sibling::before {
-  background-color: var(--utrecht-sidenav-item-marker-color);
-  left: 26px;
-}
-
-/* Little fix to move the dot to the right */
-.utrecht-sidenav__link--current::before {
-  background-color: var(--utrecht-sidenav-link-hover-color);
-  left: 27px;
-}
-
-/* Dot for link with siblings */
-.utrecht-sidenav__link::before,
-.utrecht-sidenav__link--sibling::before,
-.utrecht-sidenav__item:last-child .utrecht-sidenav__link--current::before {
-  border-radius: 100%;
-  box-shadow: 0 0 2px 2px #fff;
-  /* Make var */
-  content: "";
-  height: 8px;
-  overflow: hidden;
-  position: absolute;
-  top: 20px;
-  /* Hard value? */
-  transform: translateY(-50%) translateX(-2.5ch);
-  width: 8px;
-  z-index: 10;
-}
-
-/* Hover layout for mousover on sidenav__link */
-.utrecht-sidenav__link:hover::before,
-.utrecht-sidenav__link--sibling:hover::before {
-  background-color: var(--utrecht-sidenav-link-hover-color);
-}
-
-.utrecht-sidenav__item a:hover {
+.utrecht-sidenav__link:hover {
   color: var(--utrecht-sidenav-link-hover-color, var(--utrecht-link-hover-color, red));
   text-decoration: underline;
 }
 
-.utrecht-sidenav__item--current {
-  color: var(--utrecht-sidenav-item-hover-color, var(--utrecht-link-hover-color, red));
+.utrecht-sidenav__link--focus-visible, .utrecht-sidenav__link:focus {
+  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
+  outline-color: var(--utrecht-focus-outline-color, transparent);
+  outline-offset: 0;
+  outline-style: var(--utrecht-focus-outline-style, solid);
+  outline-width: var(--utrecht-focus-outline-width, 0);
+}
+
+/* Remove bottom padding form first item in list with children */
+.utrecht-sidenav__link--has-children {
+  padding-block-end: 0;
 }
 
 /* Draw metro connection lines on sidenav link items */
-.utrecht-sidenav__link::after,
-.utrecht-sidenav__item:last-child .utrecht-sidenav__link::after {
-  background: var(--utrecht-sidenav-item-marker-color);
-  /*  min-height: 100%;
-  height: calc(100% + 2px); */
+.utrecht-sidenav__connection, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:not(.utrecht-sidenav__link--sibling):not(.utrecht-sidenav__link--child)::after {
+  background: var(--utrecht-sidenav-connection-color);
   bottom: 0;
   content: "";
   display: block;
+  height: calc(var(--utrecht-sidenav-connection-block-size) + 2px);
   left: 3px;
+  min-height: var(--utrecht-sidenav-connection-block-size);
   overflow: hidden;
   position: absolute;
   top: -22px;
-  width: 3px;
+  width: var(--utrecht-sidenav-connection-inline-size);
   z-index: 5;
 }
 
-/* Draw short metro connection lines on sidenav child link items */
-.utrecht-sidenav__item:last-child .utrecht-sidenav__link::after,
-.utrecht-sidenav__link--current::after,
-.utrecht-sidenav__item--has-children a::after {
-  height: 40px;
-  min-height: 38px;
-}
-
-/* Remove first metro line in listing */
-.utrecht-sidenav__item:first-child .utrecht-sidenav__link::after {
-  content: "";
+.utrecht-sidenav__connection--first, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__item:first-child .utrecht-sidenav__link::after {
   display: none;
 }
 
-/* Make current link bold */
-.utrecht-sidenav__link--current,
-.utrecht-sidenav__link--child--current {
-  font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
-}
-
-.utrecht-sidenav__list--child {
-  margin-block-end: 0;
-  margin-block-start: 0;
-  padding-block-end: 0;
-  padding-block-start: 0;
-  padding-inline-end: 0;
-  padding-inline-start: 1.4rem;
-}
-
-.utrecht-sidenav__item--child {
-  border: none;
-  list-style: none;
-  position: relative;
-}
-
-/* No last border on child item */
-.utrecht-sidenav__item--child:last-child {
-  border: none;
+/* Dot for link with siblings */
+/* Little fix to move the dot to the right */
+.utrecht-sidenav__marker, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link::before {
+  background-color: var(--utrecht-sidenav-item-marker-color);
+  border-radius: 100%;
+  box-shadow: 0 0 2px 2px #fff;
+  /* Make var */
+  content: "";
+  height: 8px;
+  left: var(--utrecht-sidenav-marker-offset);
+  overflow: hidden;
+  position: absolute;
+  top: 20px;
+  /* Hard value? */
+  transform: translateY(-50%) translateX(calc(-1 * var(--utrecht-sidenav-marker-offset)));
+  width: 8px;
+  z-index: 10;
 }
 
 /* Add dot bullets on child links */
-.utrecht-sidenav__link--child::before,
-.utrecht-sidenav__link--child--current::before {
+.utrecht-sidenav__marker--child, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child::before {
   background-color: transparent;
   border: 2px solid var(--utrecht-sidenav-link-color);
-  border-radius: 100%;
-  content: "";
   height: 4px;
   left: 1.2rem;
-  overflow: hidden;
-  position: absolute;
   top: 16px;
   transform: translateY(-50%) translateX(-19.5px);
   width: 4px;
-  z-index: 10;
 }
 
-/* Make current marker dots bold */
-.utrecht-sidenav__link--child--current::before {
+/* selector must override .utrecht-sidenav__marker--child */
+.utrecht-sidenav__marker--current, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--current::before,
+.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--current-child::before {
+  background-color: var(--utrecht-sidenav-marker-current-color);
+}
+
+.utrecht-sidenav__link--child,
+.utrecht-sidenav__link--current-child {
+  color: var(--utrecht-sidenav-link-color, var(--utrecht-link-color, blue));
+  margin-block-end: 0;
+  margin-block-start: 0;
+  padding-block-end: var(--utrecht-space-block-2xs);
+  padding-block-start: var(--utrecht-space-block-2xs);
+  padding-inline-end: var(--utrecht-space-inline-3xs);
+  padding-inline-start: var(--utrecht-space-inline-lg);
+  text-decoration: none;
+}
+
+.utrecht-sidenav__link--current,
+.utrecht-sidenav__link--current-child {
+  font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
+}
+
+/* Hover layout for mousover on sidenav__link */
+.utrecht-sidenav__marker--hover, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover::before {
   background-color: var(--utrecht-sidenav-link-hover-color);
 }
 
 /* Hover layout for mousover on child__link */
-.utrecht-sidenav__link--child:hover::before {
+.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 {
   background-color: var(--utrecht-sidenav-link-hover-color);
   border: 2px solid var(--utrecht-sidenav-link-hover-color);
 }
 
-/* remove :after lines in child and sibling links */
-.utrecht-sidenav__item--child:first-child .utrecht-sidenav__link--child--current::after,
-.utrecht-sidenav__link--child::after,
-.utrecht-sidenav__item .utrecht-sidenav__item--child .utrecht-sidenav__link--child::after,
-.utrecht-sidenav__item .utrecht-sidenav__link--sibling::after,
-.utrecht-sidenav__item--sibling:last-child .utrecht-sidenav__link--sibling::after {
+.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child::after {
   display: none;
 }
 
-.utrecht-sidenav__link--focus-visible, .utrecht-sidenav__link:focus {
-  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
-  outline-color: var(--utrecht-focus-outline-color, transparent);
-  outline-offset: 0;
-  outline-style: var(--utrecht-focus-outline-style, solid);
-  outline-width: var(--utrecht-focus-outline-width, 0);
-}
-
 .utrecht-sidenav__link:focus:not(:focus-visible) {
   /* undo focus ring */
   box-shadow: none;

package/dist/html.css

@@ -1076,6 +1076,16 @@ however browsers don't seem to have implemented great looking supixel tweening y
   text-underline-offset: var(--utrecht-link-text-underline-offset);
 }
 
+.utrecht-link-icon-left {
+  background-image: var(--utrecht-link-icon-left-background-image, none);
+  background-position: 0 0.25em;
+  background-repeat: no-repeat;
+  color: var(--utrecht-link-color, blue);
+  font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
+  padding-inline-start: var(--utrecht-space-block-md);
+  text-decoration: none;
+}
+
 .utrecht-link:visited,
 .utrecht-link--visited,
 .utrecht-html a:visited {
@@ -1774,6 +1784,16 @@ however browsers don't seem to have implemented great looking supixel tweening y
   text-underline-offset: var(--utrecht-link-text-underline-offset);
 }
 
+.utrecht-link-icon-left {
+  background-image: var(--utrecht-link-icon-left-background-image, none);
+  background-position: 0 0.25em;
+  background-repeat: no-repeat;
+  color: var(--utrecht-link-color, blue);
+  font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
+  padding-inline-start: var(--utrecht-space-block-md);
+  text-decoration: none;
+}
+
 .utrecht-link:visited,
 .utrecht-link--visited,
 .utrecht-html a:visited {

package/dist/index.css

@@ -1306,6 +1306,16 @@ however browsers don't seem to have implemented great looking supixel tweening y
   text-underline-offset: var(--utrecht-link-text-underline-offset);
 }
 
+.utrecht-link-icon-left {
+  background-image: var(--utrecht-link-icon-left-background-image, none);
+  background-position: 0 0.25em;
+  background-repeat: no-repeat;
+  color: var(--utrecht-link-color, blue);
+  font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
+  padding-inline-start: var(--utrecht-space-block-md);
+  text-decoration: none;
+}
+
 .utrecht-link:visited,
 .utrecht-link--visited,
 .utrecht-html a:visited {
@@ -1615,11 +1625,12 @@ however browsers don't seem to have implemented great looking supixel tweening y
  * Copyright (c) 2021 Robbert Broersma
  */
 /* stylelint-disable-next-line block-no-empty */
-.utrecht-navhtml {
-  font-family: var(--utrecht-font-family-sans-serif);
-}
-
 .utrecht-sidenav {
+  --utrecht-sidenav-connection-color: var(--utrecht-sidenav-item-marker-color);
+  --utrecht-sidenav-connection-inline-size: 2px;
+  --utrecht-sidenav-marker-current-color: var(--utrecht-sidenav-link-hover-color);
+  --utrecht-sidenav-marker-offset: 26px;
+  --utrecht-sidenav-connection-block-size: 38px;
   border-block-end: 1px solid var(--utrecht-color-grey-80);
   border-block-start: 1px solid var(--utrecht-color-grey-80);
   margin-block-end: 0;
@@ -1637,212 +1648,152 @@ however browsers don't seem to have implemented great looking supixel tweening y
   padding-inline-start: 0;
 }
 
-.utrecht-sidenav__list ul {
-  margin-block-end: 0;
-  padding-block-end: 0;
-  padding-block-start: 0;
-  padding-inline-start: 1.2rem;
+.utrecht-sidenav__list--child {
+  margin-block-start: 0;
+  padding-inline-end: 0;
+  padding-inline-start: 1.4rem;
 }
 
-.utrecht-sidenav__item,
-.utrecht-sidenav__sibling__item {
+.utrecht-sidenav__item {
   list-style: none;
   margin-inline-start: 0;
   position: relative;
 }
 
-.utrecht-sidenav__item:last-child {
+.utrecht-sidenav__item--current {
+  color: var(--utrecht-sidenav-item-hover-color, var(--utrecht-link-hover-color, red));
+}
+
+.utrecht-sidenav__item--last {
   border-block-end: none;
 }
 
 /* draw the li item box bottom line */
-.utrecht-sidenav__item span:not(.utrecht-sidenav__item:last-child span, .utrecht-sidenav__item--has-children span:first-of-type) {
+.utrecht-sidenav__item-separator:not(.utrecht-sidenav__item--last .utrecht-sidenav__item-separator,
+.utrecht-sidenav__item--has-children .utrecht-sidenav__item-separator:first-of-type) {
+  /* .utrecht-sidenav__item--has-children span */
   border-block-end: 1px solid var(--utrecht-color-grey-80);
   display: block;
-  margin-inline-start: var(--utrecht-space-inline-lg);
-}
-
-/* Remove bottom padding form first item in list with children */
-.utrecht-sidenav__item .utrecht-sidenav__link--has-children {
-  padding-block-end: 0;
-}
-
-.utrecht-sidenav__child__item {
-  list-style: none;
+  margin-inline-start: var(--utrecht-space-inline-md);
 }
 
-.utrecht-sidenav__link,
-.utrecht-sidenav__link--sibling {
+.utrecht-sidenav__link {
   color: var(--utrecht-sidenav-link-color, var(--utrecht-link-color, blue));
   display: block;
   margin-inline-start: 0;
   padding-block-end: var(--utrecht-space-block-xs);
   padding-block-start: var(--utrecht-space-block-xs);
   padding-inline-end: var(--utrecht-space-inline-3xs);
-  padding-inline-start: var(--utrecht-space-inline-xl);
+  padding-inline-start: var(--utrecht-space-inline-lg);
   text-decoration: none;
 }
 
-.utrecht-sidenav__link--child,
-.utrecht-sidenav__link--child--current {
-  color: var(--utrecht-sidenav-link-color, var(--utrecht-link-color, blue));
-  display: block;
-  margin-block-end: 0;
-  margin-block-start: 0;
-  padding-block-end: var(--utrecht-space-block-2xs);
-  padding-block-start: var(--utrecht-space-block-2xs);
-  padding-inline-end: var(--utrecht-space-inline-3xs);
-  padding-inline-start: var(--utrecht-space-inline-xl);
-  text-decoration: none;
-}
-
-.utrecht-sidenav__link::before,
-.utrecht-sidenav__link--sibling::before {
-  background-color: var(--utrecht-sidenav-item-marker-color);
-  left: 26px;
-}
-
-/* Little fix to move the dot to the right */
-.utrecht-sidenav__link--current::before {
-  background-color: var(--utrecht-sidenav-link-hover-color);
-  left: 27px;
-}
-
-/* Dot for link with siblings */
-.utrecht-sidenav__link::before,
-.utrecht-sidenav__link--sibling::before,
-.utrecht-sidenav__item:last-child .utrecht-sidenav__link--current::before {
-  border-radius: 100%;
-  box-shadow: 0 0 2px 2px #fff;
-  /* Make var */
-  content: "";
-  height: 8px;
-  overflow: hidden;
-  position: absolute;
-  top: 20px;
-  /* Hard value? */
-  transform: translateY(-50%) translateX(-2.5ch);
-  width: 8px;
-  z-index: 10;
-}
-
-/* Hover layout for mousover on sidenav__link */
-.utrecht-sidenav__link:hover::before,
-.utrecht-sidenav__link--sibling:hover::before {
-  background-color: var(--utrecht-sidenav-link-hover-color);
-}
-
-.utrecht-sidenav__item a:hover {
+.utrecht-sidenav__link:hover {
   color: var(--utrecht-sidenav-link-hover-color, var(--utrecht-link-hover-color, red));
   text-decoration: underline;
 }
 
-.utrecht-sidenav__item--current {
-  color: var(--utrecht-sidenav-item-hover-color, var(--utrecht-link-hover-color, red));
+.utrecht-sidenav__link--focus-visible, .utrecht-sidenav__link:focus {
+  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
+  outline-color: var(--utrecht-focus-outline-color, transparent);
+  outline-offset: 0;
+  outline-style: var(--utrecht-focus-outline-style, solid);
+  outline-width: var(--utrecht-focus-outline-width, 0);
+}
+
+/* Remove bottom padding form first item in list with children */
+.utrecht-sidenav__link--has-children {
+  padding-block-end: 0;
 }
 
 /* Draw metro connection lines on sidenav link items */
-.utrecht-sidenav__link::after,
-.utrecht-sidenav__item:last-child .utrecht-sidenav__link::after {
-  background: var(--utrecht-sidenav-item-marker-color);
-  /*  min-height: 100%;
-  height: calc(100% + 2px); */
+.utrecht-sidenav__connection, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:not(.utrecht-sidenav__link--sibling):not(.utrecht-sidenav__link--child)::after {
+  background: var(--utrecht-sidenav-connection-color);
   bottom: 0;
   content: "";
   display: block;
+  height: calc(var(--utrecht-sidenav-connection-block-size) + 2px);
   left: 3px;
+  min-height: var(--utrecht-sidenav-connection-block-size);
   overflow: hidden;
   position: absolute;
   top: -22px;
-  width: 3px;
+  width: var(--utrecht-sidenav-connection-inline-size);
   z-index: 5;
 }
 
-/* Draw short metro connection lines on sidenav child link items */
-.utrecht-sidenav__item:last-child .utrecht-sidenav__link::after,
-.utrecht-sidenav__link--current::after,
-.utrecht-sidenav__item--has-children a::after {
-  height: 40px;
-  min-height: 38px;
-}
-
-/* Remove first metro line in listing */
-.utrecht-sidenav__item:first-child .utrecht-sidenav__link::after {
-  content: "";
+.utrecht-sidenav__connection--first, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__item:first-child .utrecht-sidenav__link::after {
   display: none;
 }
 
-/* Make current link bold */
-.utrecht-sidenav__link--current,
-.utrecht-sidenav__link--child--current {
-  font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
-}
-
-.utrecht-sidenav__list--child {
-  margin-block-end: 0;
-  margin-block-start: 0;
-  padding-block-end: 0;
-  padding-block-start: 0;
-  padding-inline-end: 0;
-  padding-inline-start: 1.4rem;
-}
-
-.utrecht-sidenav__item--child {
-  border: none;
-  list-style: none;
-  position: relative;
-}
-
-/* No last border on child item */
-.utrecht-sidenav__item--child:last-child {
-  border: none;
+/* Dot for link with siblings */
+/* Little fix to move the dot to the right */
+.utrecht-sidenav__marker, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link::before {
+  background-color: var(--utrecht-sidenav-item-marker-color);
+  border-radius: 100%;
+  box-shadow: 0 0 2px 2px #fff;
+  /* Make var */
+  content: "";
+  height: 8px;
+  left: var(--utrecht-sidenav-marker-offset);
+  overflow: hidden;
+  position: absolute;
+  top: 20px;
+  /* Hard value? */
+  transform: translateY(-50%) translateX(calc(-1 * var(--utrecht-sidenav-marker-offset)));
+  width: 8px;
+  z-index: 10;
 }
 
 /* Add dot bullets on child links */
-.utrecht-sidenav__link--child::before,
-.utrecht-sidenav__link--child--current::before {
+.utrecht-sidenav__marker--child, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child::before {
   background-color: transparent;
   border: 2px solid var(--utrecht-sidenav-link-color);
-  border-radius: 100%;
-  content: "";
   height: 4px;
   left: 1.2rem;
-  overflow: hidden;
-  position: absolute;
   top: 16px;
   transform: translateY(-50%) translateX(-19.5px);
   width: 4px;
-  z-index: 10;
 }
 
-/* Make current marker dots bold */
-.utrecht-sidenav__link--child--current::before {
+/* selector must override .utrecht-sidenav__marker--child */
+.utrecht-sidenav__marker--current, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--current::before,
+.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--current-child::before {
+  background-color: var(--utrecht-sidenav-marker-current-color);
+}
+
+.utrecht-sidenav__link--child,
+.utrecht-sidenav__link--current-child {
+  color: var(--utrecht-sidenav-link-color, var(--utrecht-link-color, blue));
+  margin-block-end: 0;
+  margin-block-start: 0;
+  padding-block-end: var(--utrecht-space-block-2xs);
+  padding-block-start: var(--utrecht-space-block-2xs);
+  padding-inline-end: var(--utrecht-space-inline-3xs);
+  padding-inline-start: var(--utrecht-space-inline-lg);
+  text-decoration: none;
+}
+
+.utrecht-sidenav__link--current,
+.utrecht-sidenav__link--current-child {
+  font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
+}
+
+/* Hover layout for mousover on sidenav__link */
+.utrecht-sidenav__marker--hover, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover::before {
   background-color: var(--utrecht-sidenav-link-hover-color);
 }
 
 /* Hover layout for mousover on child__link */
-.utrecht-sidenav__link--child:hover::before {
+.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 {
   background-color: var(--utrecht-sidenav-link-hover-color);
   border: 2px solid var(--utrecht-sidenav-link-hover-color);
 }
 
-/* remove :after lines in child and sibling links */
-.utrecht-sidenav__item--child:first-child .utrecht-sidenav__link--child--current::after,
-.utrecht-sidenav__link--child::after,
-.utrecht-sidenav__item .utrecht-sidenav__item--child .utrecht-sidenav__link--child::after,
-.utrecht-sidenav__item .utrecht-sidenav__link--sibling::after,
-.utrecht-sidenav__item--sibling:last-child .utrecht-sidenav__link--sibling::after {
+.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child::after {
   display: none;
 }
 
-.utrecht-sidenav__link--focus-visible, .utrecht-sidenav__link:focus {
-  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
-  outline-color: var(--utrecht-focus-outline-color, transparent);
-  outline-offset: 0;
-  outline-style: var(--utrecht-focus-outline-style, solid);
-  outline-width: var(--utrecht-focus-outline-width, 0);
-}
-
 .utrecht-sidenav__link:focus:not(:focus-visible) {
   /* undo focus ring */
   box-shadow: none;
@@ -3892,6 +3843,16 @@ however browsers don't seem to have implemented great looking supixel tweening y
   text-underline-offset: var(--utrecht-link-text-underline-offset);
 }
 
+.utrecht-link-icon-left {
+  background-image: var(--utrecht-link-icon-left-background-image, none);
+  background-position: 0 0.25em;
+  background-repeat: no-repeat;
+  color: var(--utrecht-link-color, blue);
+  font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
+  padding-inline-start: var(--utrecht-space-block-md);
+  text-decoration: none;
+}
+
 .utrecht-link:visited,
 .utrecht-link--visited,
 .utrecht-html a:visited {
@@ -4590,6 +4551,16 @@ however browsers don't seem to have implemented great looking supixel tweening y
   text-underline-offset: var(--utrecht-link-text-underline-offset);
 }
 
+.utrecht-link-icon-left {
+  background-image: var(--utrecht-link-icon-left-background-image, none);
+  background-position: 0 0.25em;
+  background-repeat: no-repeat;
+  color: var(--utrecht-link-color, blue);
+  font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
+  padding-inline-start: var(--utrecht-space-block-md);
+  text-decoration: none;
+}
+
 .utrecht-link:visited,
 .utrecht-link--visited,
 .utrecht-html a:visited {
@@ -5293,7 +5264,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
 /* Collection of CSS variables for Utrecht theme applied to `:root` */
 /**
  * Do not edit directly
- * Generated on Wed, 12 Jan 2022 09:31:42 GMT
+ * Generated on Tue, 01 Feb 2022 12:34:39 GMT
  */
 :root {
   --utrecht-toptask-nav-link-grid-max-inline-size: 240px;
@@ -5344,7 +5315,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
   /* 12px */
   --utrecht-typography-scale-2xs-font-size: 0.5rem;
   /* 8px */
-  --utrecht-typography-sans-serif-font-family: "Arial", sans-serif;
+  --utrecht-typography-sans-serif-fallback-font-family: "Arial", sans-serif;
+  --utrecht-typography-sans-serif-font-family: "Lucida Grande";
   --utrecht-color-black: hsl(0 0% 0%);
   --utrecht-color-white: hsl(0 0% 100%);
   --utrecht-color-invalid: #990000;
@@ -5761,38 +5733,32 @@ however browsers don't seem to have implemented great looking supixel tweening y
   --utrecht-heading-6-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
   --utrecht-heading-6-font-size: var(--utrecht-typography-scale-sm-font-size);
   --utrecht-heading-6-font-family: var(--utrecht-typography-sans-serif-font-family);
-  --utrecht-heading-6-color: var(--utrecht-color-black);
   --utrecht-heading-5-text-transform: var(--utrecht-typography-text-transform-uppercase);
   --utrecht-heading-5-letter-spacing: var(--utrecht-typography-letter-spacing-sm);
   --utrecht-heading-5-line-height: var(--utrecht-typography-line-height-md);
   --utrecht-heading-5-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
   --utrecht-heading-5-font-size: var(--utrecht-typography-scale-sm-font-size);
   --utrecht-heading-5-font-family: var(--utrecht-typography-sans-serif-font-family);
-  --utrecht-heading-5-color: var(--utrecht-color-black);
   --utrecht-heading-4-letter-spacing: var(--utrecht-typography-letter-spacing-normal);
   --utrecht-heading-4-line-height: var(--utrecht-typography-line-height-md);
   --utrecht-heading-4-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
   --utrecht-heading-4-font-size: var(--utrecht-typography-scale-lg-font-size);
   --utrecht-heading-4-font-family: var(--utrecht-typography-sans-serif-font-family);
-  --utrecht-heading-4-color: var(--utrecht-color-black);
   --utrecht-heading-3-letter-spacing: var(--utrecht-typography-letter-spacing-normal);
   --utrecht-heading-3-line-height: var(--utrecht-typography-line-height-sm);
   --utrecht-heading-3-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
   --utrecht-heading-3-font-size: var(--utrecht-typography-scale-xl-font-size);
   --utrecht-heading-3-font-family: var(--utrecht-typography-sans-serif-font-family);
-  --utrecht-heading-3-color: var(--utrecht-color-black);
   --utrecht-heading-2-letter-spacing: var(--utrecht-typography-letter-spacing-normal);
   --utrecht-heading-2-line-height: var(--utrecht-typography-line-height-sm);
   --utrecht-heading-2-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
   --utrecht-heading-2-font-size: var(--utrecht-typography-scale-xl-font-size);
   --utrecht-heading-2-font-family: var(--utrecht-typography-sans-serif-font-family);
-  --utrecht-heading-2-color: var(--utrecht-color-black);
   --utrecht-heading-1-letter-spacing: var(--utrecht-typography-letter-spacing-normal);
   --utrecht-heading-1-line-height: var(--utrecht-typography-line-height-sm);
   --utrecht-heading-1-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
   --utrecht-heading-1-font-size: var(--utrecht-typography-scale-3xl-font-size);
   --utrecht-heading-1-font-family: var(--utrecht-typography-sans-serif-font-family);
-  --utrecht-heading-1-color: var(--utrecht-color-black);
   --utrecht-form-toggle-focus-border-color: var(--utrecht-color-black);
   --utrecht-form-toggle-checked-accent-color: var(--utrecht-color-blue-35);
   --utrecht-form-toggle-thumb-disabled-background-color: var(--utrecht-color-white);
@@ -5917,6 +5883,12 @@ however browsers don't seem to have implemented great looking supixel tweening y
   --utrecht-link-visited-color: var(--utrecht-link-color);
   --utrecht-link-hover-color: var(--utrecht-link-focus-color);
   --utrecht-link-active-color: var(--utrecht-link-color);
+  --utrecht-heading-6-color: var(--utrecht-document-color);
+  --utrecht-heading-5-color: var(--utrecht-document-color);
+  --utrecht-heading-4-color: var(--utrecht-document-color);
+  --utrecht-heading-3-color: var(--utrecht-document-color);
+  --utrecht-heading-2-color: var(--utrecht-document-color);
+  --utrecht-heading-1-color: var(--utrecht-document-color);
   --utrecht-form-input-invalid-border-color: var(--utrecht-feedback-invalid-border-color);
   --utrecht-form-input-font-family: var(--utrecht-document-font-family);
   --utrecht-custom-checkbox-invalid-background-color: var(--utrecht-feedback-invalid-background-color);
@@ -5989,6 +5961,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 :root {
   --utrecht-menulijst-item-background-image: url("./pijltje.svg");
+  --utrecht-link-icon-left-background-image: url("./pijltje.svg");
   --utrecht-search-bar-input-background-image: url("./icoon-zoek-rood.svg");
   --utrecht-select-background-image: url("./arrow-dropdown.svg");
   --utrecht-link-list-marker-background-image: url("./pijltje-zwart.svg");

package/dist/root-theme.css

@@ -5,7 +5,7 @@
 /* Collection of CSS variables for Utrecht theme applied to `:root` */
 /**
  * Do not edit directly
- * Generated on Wed, 12 Jan 2022 09:31:42 GMT
+ * Generated on Tue, 01 Feb 2022 12:34:39 GMT
  */
 :root {
   --utrecht-toptask-nav-link-grid-max-inline-size: 240px;
@@ -56,7 +56,8 @@
   /* 12px */
   --utrecht-typography-scale-2xs-font-size: 0.5rem;
   /* 8px */
-  --utrecht-typography-sans-serif-font-family: "Arial", sans-serif;
+  --utrecht-typography-sans-serif-fallback-font-family: "Arial", sans-serif;
+  --utrecht-typography-sans-serif-font-family: "Lucida Grande";
   --utrecht-color-black: hsl(0 0% 0%);
   --utrecht-color-white: hsl(0 0% 100%);
   --utrecht-color-invalid: #990000;
@@ -473,38 +474,32 @@
   --utrecht-heading-6-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
   --utrecht-heading-6-font-size: var(--utrecht-typography-scale-sm-font-size);
   --utrecht-heading-6-font-family: var(--utrecht-typography-sans-serif-font-family);
-  --utrecht-heading-6-color: var(--utrecht-color-black);
   --utrecht-heading-5-text-transform: var(--utrecht-typography-text-transform-uppercase);
   --utrecht-heading-5-letter-spacing: var(--utrecht-typography-letter-spacing-sm);
   --utrecht-heading-5-line-height: var(--utrecht-typography-line-height-md);
   --utrecht-heading-5-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
   --utrecht-heading-5-font-size: var(--utrecht-typography-scale-sm-font-size);
   --utrecht-heading-5-font-family: var(--utrecht-typography-sans-serif-font-family);
-  --utrecht-heading-5-color: var(--utrecht-color-black);
   --utrecht-heading-4-letter-spacing: var(--utrecht-typography-letter-spacing-normal);
   --utrecht-heading-4-line-height: var(--utrecht-typography-line-height-md);
   --utrecht-heading-4-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
   --utrecht-heading-4-font-size: var(--utrecht-typography-scale-lg-font-size);
   --utrecht-heading-4-font-family: var(--utrecht-typography-sans-serif-font-family);
-  --utrecht-heading-4-color: var(--utrecht-color-black);
   --utrecht-heading-3-letter-spacing: var(--utrecht-typography-letter-spacing-normal);
   --utrecht-heading-3-line-height: var(--utrecht-typography-line-height-sm);
   --utrecht-heading-3-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
   --utrecht-heading-3-font-size: var(--utrecht-typography-scale-xl-font-size);
   --utrecht-heading-3-font-family: var(--utrecht-typography-sans-serif-font-family);
-  --utrecht-heading-3-color: var(--utrecht-color-black);
   --utrecht-heading-2-letter-spacing: var(--utrecht-typography-letter-spacing-normal);
   --utrecht-heading-2-line-height: var(--utrecht-typography-line-height-sm);
   --utrecht-heading-2-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
   --utrecht-heading-2-font-size: var(--utrecht-typography-scale-xl-font-size);
   --utrecht-heading-2-font-family: var(--utrecht-typography-sans-serif-font-family);
-  --utrecht-heading-2-color: var(--utrecht-color-black);
   --utrecht-heading-1-letter-spacing: var(--utrecht-typography-letter-spacing-normal);
   --utrecht-heading-1-line-height: var(--utrecht-typography-line-height-sm);
   --utrecht-heading-1-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
   --utrecht-heading-1-font-size: var(--utrecht-typography-scale-3xl-font-size);
   --utrecht-heading-1-font-family: var(--utrecht-typography-sans-serif-font-family);
-  --utrecht-heading-1-color: var(--utrecht-color-black);
   --utrecht-form-toggle-focus-border-color: var(--utrecht-color-black);
   --utrecht-form-toggle-checked-accent-color: var(--utrecht-color-blue-35);
   --utrecht-form-toggle-thumb-disabled-background-color: var(--utrecht-color-white);
@@ -629,6 +624,12 @@
   --utrecht-link-visited-color: var(--utrecht-link-color);
   --utrecht-link-hover-color: var(--utrecht-link-focus-color);
   --utrecht-link-active-color: var(--utrecht-link-color);
+  --utrecht-heading-6-color: var(--utrecht-document-color);
+  --utrecht-heading-5-color: var(--utrecht-document-color);
+  --utrecht-heading-4-color: var(--utrecht-document-color);
+  --utrecht-heading-3-color: var(--utrecht-document-color);
+  --utrecht-heading-2-color: var(--utrecht-document-color);
+  --utrecht-heading-1-color: var(--utrecht-document-color);
   --utrecht-form-input-invalid-border-color: var(--utrecht-feedback-invalid-border-color);
   --utrecht-form-input-font-family: var(--utrecht-document-font-family);
   --utrecht-custom-checkbox-invalid-background-color: var(--utrecht-feedback-invalid-background-color);
@@ -701,6 +702,7 @@
 }
 :root {
   --utrecht-menulijst-item-background-image: url("./pijltje.svg");
+  --utrecht-link-icon-left-background-image: url("./pijltje.svg");
   --utrecht-search-bar-input-background-image: url("./icoon-zoek-rood.svg");
   --utrecht-select-background-image: url("./arrow-dropdown.svg");
   --utrecht-link-list-marker-background-image: url("./pijltje-zwart.svg");

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-alpha.165",
+  "version": "1.0.0-alpha.169",
   "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",
@@ -16,15 +16,15 @@
     "url": "git@github.com:nl-design-system/utrecht.git"
   },
   "devDependencies": {
-    "@utrecht/design-tokens": "1.0.0-alpha.158",
+    "@utrecht/design-tokens": "1.0.0-alpha.162",
     "node-sass-package-importer": "5.3.2",
     "rimraf": "3.0.2",
-    "sass": "1.45.2"
+    "sass": "1.49.0"
   },
   "scripts": {
     "prebuild": "npm run clean",
     "build": "sass src/:dist/ --load-path=../../node_modules/ --no-source-map",
     "clean": "rimraf dist/"
   },
-  "gitHead": "c6b5799357f587f01014ea766580999e0af0f265"
+  "gitHead": "7f19eec777fd2beaea33c45f77232dd95735b17a"
 }