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

package/dist/collection/navigatie sidenav/bem.css

@@ -9,11 +9,12 @@
  * 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;
@@ -31,212 +32,152 @@
   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);
-  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);
+  padding-inline-start: var(--utrecht-space-inline-lg);
   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/collection/navigatie sidenav/stencil.js

@@ -4,11 +4,17 @@ export class Sidenav {
   render() {
     const items = JSON.parse(this.json);
     return (h("nav", { class: "utrecht-sidenav" },
-      h("ul", { class: "utrecht-sidenav__list" }, items.map(({ href, title, current, focus, children, sibling, haschildren }) => (h("li", { key: href, class: clsx('utrecht-sidenav__item', sibling && 'utrecht-sidenav__item--sibling', haschildren && 'utrecht-sidenav__item--has-children') },
-        h("a", { class: clsx('utrecht-sidenav__link', current && 'utrecht-sidenav__link--current', focus && 'utrecht-sidenav__link--focus', sibling && 'utrecht-sidenav__link--sibling', haschildren && 'utrecht-sidenav__link--has-children'), href: href }, title),
-        h("span", null),
+      h("ul", { class: "utrecht-sidenav__list" }, items.map(({ href, title, current, focus, children, sibling, haschildren }, index, array) => (h("li", { key: href, class: clsx('utrecht-sidenav__item', index + 1 === array.length && 'utrecht-sidenav__item--last', sibling && 'utrecht-sidenav__item--sibling', haschildren && 'utrecht-sidenav__item--has-children') },
+        h("a", { class: clsx('utrecht-sidenav__link', current && 'utrecht-sidenav__link--current', focus && 'utrecht-sidenav__link--focus', sibling && 'utrecht-sidenav__link--sibling', haschildren && 'utrecht-sidenav__link--has-children'), href: href },
+          h("div", { class: clsx('utrecht-sidenav__marker', current && 'utrecht-sidenav__marker--current') }),
+          !(sibling || index === 0) ? h("div", { class: "utrecht-sidenav__connection" }) : null,
+          title),
+        h("div", { class: "utrecht-sidenav__item-separator" }),
         children ? (h("ul", { class: "utrecht-sidenav__list utrecht-sidenav__list--child" }, children.map(({ href, title, current, focus }) => (h("li", { key: href, class: "utrecht-sidenav__item utrecht-sidenav__item--child" },
-          h("a", { class: clsx('utrecht-sidenav__link utrecht-sidenav__link--child', current && 'utrecht-sidenav__link--current utrecht-sidenav__link--child--current', focus && 'utrecht-sidenav__link--focus'), href: href }, title)))))) : ('')))))));
+          h("a", { class: clsx('utrecht-sidenav__link', 'utrecht-sidenav__link--child', current && 'utrecht-sidenav__link--current', current && 'utrecht-sidenav__link--current-child', focus && 'utrecht-sidenav__link--focus'), href: href },
+            h("div", { class: clsx('utrecht-sidenav__marker', 'utrecht-sidenav__marker--child', current && 'utrecht-sidenav__marker--current', current && 'utrecht-sidenav__marker--current-child') }),
+            title)))))) : (''),
+        children && h("div", { class: "utrecht-sidenav__item-separator" })))))));
   }
   static get is() { return "utrecht-sidenav"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/templates/contact-card-template/stencil.css

@@ -77,6 +77,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));