@dso-toolkit/core 35.0.0 → 36.0.0

package/dist/collection/components/header/header.template.js

@@ -1,6 +1,6 @@
 import { html } from "lit-html";
-import { ifDefined } from "lit-html/directives/if-defined";
-export function headerTemplate({ logo, subLogo, mainMenu, useDropDownMenu, showSubLogo, loginUrl, logoutUrl, isLoggedIn, showLoggedIn, userProfileUrl, userProfileName, userHomeUrl, }) {
+import { ifDefined } from "lit-html/directives/if-defined.js";
+export function headerTemplate({ logo, subLogo, mainMenu, useDropDownMenu, showSubLogo, loginUrl, logoutUrl, isLoggedIn, showLoggedIn, userProfileUrl, userProfileName, userHomeUrl, menuItemClick, }) {
   const bindLoginUrl = showLoggedIn && loginUrl ? loginUrl : undefined;
   const bindLogoutUrl = showLoggedIn && logoutUrl ? logoutUrl : undefined;
   return showSubLogo
@@ -13,6 +13,7 @@ export function headerTemplate({ logo, subLogo, mainMenu, useDropDownMenu, showS
         user-profile-url=${ifDefined(userProfileUrl)}
         user-profile-name=${ifDefined(userProfileName)}
         user-home-url=${ifDefined(userHomeUrl)}
+        @menuItemClick=${menuItemClick}
       >
         <div slot="logo"><img height="40" alt="Omgevingsloket" src="${logo}" /></div>
         <div slot="sub-logo"><img alt="Regels op de kaart" src="${subLogo}" /></div></div>
@@ -26,6 +27,7 @@ export function headerTemplate({ logo, subLogo, mainMenu, useDropDownMenu, showS
         user-profile-url=${ifDefined(userProfileUrl)}
         user-profile-name=${ifDefined(userProfileName)}
         user-home-url=${ifDefined(userHomeUrl)}
+        @menuItemClick=${menuItemClick}
       >
         <div slot="logo"><img alt="Omgevingsloket" src="${logo}" /></div>
       </dso-header>`;

package/dist/collection/components/helpcenter-panel/helpcenter-panel.template.js

@@ -1,6 +1,6 @@
 import { html } from "lit-html";
-import { ifDefined } from "lit-html/directives/if-defined";
-import { unsafeHTML } from "lit-html/directives/unsafe-html";
+import { ifDefined } from "lit-html/directives/if-defined.js";
+import { unsafeHTML } from "lit-html/directives/unsafe-html.js";
 export function helpcenterPanelTemplate({ label, url, content, }) {
   return html `
     ${unsafeHTML(content)}

package/dist/collection/components/highlight-box/highlight-box.template.js

@@ -1,6 +1,6 @@
 import { html } from 'lit-html';
-import { ifDefined } from 'lit-html/directives/if-defined';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 import { iconTemplate } from '../icon/icon.template';
 export function highlightBoxTemplate({ yellow, white, dropShadow, border, step, icon, richContent }) {
   return html `

package/dist/collection/components/icon/icon.template.js

@@ -1,5 +1,5 @@
 import { html } from 'lit-html';
-import { ifDefined } from 'lit-html/directives/if-defined';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 export function iconTemplate({ icon }, slot) {
   return html `
     <dso-icon

package/dist/collection/components/image-overlay/image-overlay.css

@@ -138,7 +138,7 @@ button::-moz-focus-inner {
   left: 0;
   right: 0;
   bottom: 0;
-  z-index: 1;
+  z-index: 19;
   display: flex;
   padding: 32px;
   background-color: rgba(255, 255, 255, 0.8);

package/dist/collection/components/label/label.template.js

@@ -1,6 +1,6 @@
 import { html, nothing } from 'lit-html';
-import { ifDefined } from 'lit-html/directives/if-defined';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 export function labelTemplate({ status, label, button, compact, symbol }) {
   return html `
     <dso-label

package/dist/collection/components/list/list.template.js

@@ -1,7 +1,7 @@
 // Keep in sync with packages\css\src\components\list\list.template.ts (https://github.com/dso-toolkit/dso-toolkit/issues/1438)
 import { Type } from '@dso-toolkit/sources';
 import { html } from 'lit-html';
-import { classMap } from 'lit-html/directives/class-map';
+import { classMap } from 'lit-html/directives/class-map.js';
 function ul(children, modifier) {
   return html `
     <ul class="${classMap({

package/dist/collection/components/map-controls/map-controls.js

@@ -1,41 +1,39 @@
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, privateMap) {
-  if (!privateMap.has(receiver)) {
-    throw new TypeError("attempted to get private field on non-instance");
-  }
-  return privateMap.get(receiver);
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, privateMap, value) {
-  if (!privateMap.has(receiver)) {
-    throw new TypeError("attempted to set private field on non-instance");
-  }
-  privateMap.set(receiver, value);
-  return value;
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+  if (kind === "m") throw new TypeError("Private method is not writable");
+  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+  return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _closeButtonElement, _toggleButtonElement;
+var _MapControls_closeButtonElement, _MapControls_toggleButtonElement;
 import { Component, h, Host, Prop, Event, State, Watch } from '@stencil/core';
 const transitionDuration = 300; // Sync with $transition-duration in ./map-controls.scss
 export class MapControls {
   constructor() {
     this.open = false;
     this.hideContent = !this.open;
-    _closeButtonElement.set(this, void 0);
-    _toggleButtonElement.set(this, void 0);
+    _MapControls_closeButtonElement.set(this, void 0);
+    _MapControls_toggleButtonElement.set(this, void 0);
   }
   watchOpen(open) {
     if (open) {
       this.hideContent = false;
-      setTimeout(() => __classPrivateFieldGet(this, _closeButtonElement).focus(), transitionDuration);
+      setTimeout(() => __classPrivateFieldGet(this, _MapControls_closeButtonElement, "f").focus(), transitionDuration);
     }
     else {
       setTimeout(() => {
         this.hideContent = true;
-        __classPrivateFieldGet(this, _toggleButtonElement).focus();
+        __classPrivateFieldGet(this, _MapControls_toggleButtonElement, "f").focus();
       }, transitionDuration);
     }
   }
   render() {
     return (h(Host, null,
-      h("button", { type: "button", id: "toggle-visibility-button", onClick: () => this.open = !this.open, ref: element => __classPrivateFieldSet(this, _toggleButtonElement, element) },
+      h("button", { type: "button", id: "toggle-visibility-button", onClick: () => this.open = !this.open, ref: element => __classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f") },
         h("dso-icon", { icon: "layers" }),
         h("span", null, "Kaartlagen")),
       h("div", { id: "zoom-buttons" },
@@ -48,7 +46,7 @@ export class MapControls {
       h("section", { hidden: this.hideContent },
         h("header", null,
           h("h2", null, "Kaartlagen"),
-          h("button", { type: "button", id: "close-button", onClick: () => this.open = false, ref: element => __classPrivateFieldSet(this, _closeButtonElement, element) },
+          h("button", { type: "button", id: "close-button", onClick: () => this.open = false, ref: element => __classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f") },
             h("span", null, "Sluit dialoog"),
             h("dso-icon", { icon: "times" }))),
         h("div", { class: "content" },
@@ -146,4 +144,4 @@ export class MapControls {
       "methodName": "watchOpen"
     }]; }
 }
-_closeButtonElement = new WeakMap(), _toggleButtonElement = new WeakMap();
+_MapControls_closeButtonElement = new WeakMap(), _MapControls_toggleButtonElement = new WeakMap();

package/dist/collection/components/ozon-content/get-node-name.function.js

@@ -0,0 +1,9 @@
+export function getNodeName(node) {
+  if (node instanceof Element) {
+    return node.localName;
+  }
+  if (node.nodeName.includes(':')) {
+    return node.nodeName.substring(node.nodeName.indexOf(':') + 1);
+  }
+  return node.nodeName;
+}

package/dist/collection/components/ozon-content/nodes/al.node.js

@@ -1,10 +1,11 @@
 import { h } from '@stencil/core';
+import { getNodeName } from '../get-node-name.function';
 export class OzonContentAlNode {
   constructor() {
     this.name = 'Al';
   }
   render(node, { mapNodeToJsx, path }) {
-    const nestedAl = path.some(node => node.nodeName === 'Al');
+    const nestedAl = path.some(node => getNodeName(node) === 'Al');
     const content = mapNodeToJsx(node.childNodes);
     return nestedAl
       ? h("span", { role: "paragraph" }, content)

package/dist/collection/components/ozon-content/nodes/fallback.node.js

@@ -1,10 +1,11 @@
 import { h } from '@stencil/core';
+import { getNodeName } from '../get-node-name.function';
 export class OzonContentFallbackNode {
   constructor() {
     // This name does not match any elements
     this.name = ['<fallback>'];
   }
   render(node, { mapNodeToJsx }) {
-    return (h("span", { class: `fallback od-${node instanceof Element ? node.localName : node.nodeName}` }, mapNodeToJsx(node.childNodes)));
+    return (h("span", { class: `fallback od-${getNodeName(node)}` }, mapNodeToJsx(node.childNodes)));
   }
 }

package/dist/collection/components/ozon-content/nodes/noot.node.js

@@ -1,27 +1,27 @@
 import { h, Fragment } from '@stencil/core';
+import { getNodeName } from '../get-node-name.function';
 export class OzonContentNootNode {
   constructor() {
     this.name = 'Noot';
     this.handles = ['NootNummer'];
   }
-  identify(node) {
-    var _a;
-    return (_a = node.getAttribute("id")) !== null && _a !== void 0 ? _a : undefined;
+  identify() {
+    return 'Noot';
   }
-  render(node, { mapNodeToJsx, state: noteIsOpen, setState }) {
+  render(node, { mapNodeToJsx, state: openNoteId, setState }) {
     var _a, _b;
-    const noteId = (_a = node.getAttribute('id')) !== null && _a !== void 0 ? _a : undefined;
-    const noteControlsId = noteId && `dso-ozon-note-${noteId}`;
-    const noteHref = noteId && `#${noteControlsId}`;
+    const noteId = node.getAttribute('id');
+    if (!noteId) {
+      console.error('Noot node without id', node);
+      return h(Fragment, null);
+    }
+    const noteControlsId = `dso-ozon-note-${noteId}`;
     const childNodes = Array.from(node.childNodes);
-    const nootNummer = (_b = childNodes.find(n => n.nodeName === 'NootNummer')) === null || _b === void 0 ? void 0 : _b.textContent;
-    const onClickNote = (event) => {
-      event.preventDefault();
-      setState === null || setState === void 0 ? void 0 : setState(!noteIsOpen);
-    };
+    const nootNummer = (_b = (_a = childNodes.find(n => getNodeName(n) === 'NootNummer')) === null || _a === void 0 ? void 0 : _a.textContent) !== null && _b !== void 0 ? _b : noteId;
     return (h(Fragment, null,
-      h("a", { class: { noot: true, "dso-open": !!noteIsOpen }, href: noteHref, "aria-controls": noteControlsId, "aria-expanded": noteIsOpen ? "true" : "false", onClick: onClickNote },
-        h("sup", null, nootNummer)),
-      h("span", { id: noteControlsId, role: "section" }, mapNodeToJsx(Array.from(node.querySelectorAll(':scope > Al'))))));
+      h("sup", null,
+        h("button", { type: "button", class: "toggle-note", id: noteControlsId, onClick: () => setState === null || setState === void 0 ? void 0 : setState(openNoteId === noteId ? undefined : noteId), onBlur: () => setState === null || setState === void 0 ? void 0 : setState(undefined), "aria-expanded": openNoteId === noteId ? 'true' : 'false' }, nootNummer)),
+      h("dso-tooltip", { active: openNoteId === noteId, for: noteControlsId, stateless: true },
+        h("span", { role: "section" }, mapNodeToJsx(Array.from(node.querySelectorAll(':scope > Al')))))));
   }
 }

package/dist/collection/components/ozon-content/ozon-content-mapper.js

@@ -9,6 +9,7 @@ import { OzonContentIntRefNode } from './nodes/int-ref.node';
 import { OzonContentNootNode } from './nodes/noot.node';
 import { OzonContentTableNode } from './nodes/table.node';
 import { OzonContentTextNode } from './nodes/text.node';
+import { getNodeName } from './get-node-name.function';
 import { OzonContentFallbackNode } from './nodes/fallback.node';
 export class Mapper {
   constructor() {
@@ -46,25 +47,28 @@ export class Mapper {
     })) !== null && _a !== void 0 ? _a : this.fallbackNode;
   }
   mapNodeToJsx(node, context, path) {
-    var _a, _b;
+    var _a;
     if (node instanceof NodeList) {
       return h(Fragment, null, Array.from(node).map(n => this.mapNodeToJsx(n, context, path)));
     }
     if (Array.isArray(node)) {
       return h(Fragment, null, node.map(n => this.mapNodeToJsx(n, context, path)));
     }
-    const nodeName = node instanceof Element ? node.localName : node.nodeName;
+    const nodeName = getNodeName(node);
     const mapper = this.findMapper(nodeName);
-    const identity = (_a = mapper === null || mapper === void 0 ? void 0 : mapper.identify) === null || _a === void 0 ? void 0 : _a.call(mapper, node);
+    if (!mapper) {
+      return h(Fragment, null);
+    }
+    const identity = (_a = mapper.identify) === null || _a === void 0 ? void 0 : _a.call(mapper, node);
     const state = identity ? context.state[identity] : undefined;
     const setState = identity ? (state) => context.setState(Object.assign(Object.assign({}, context.state), { [identity]: state })) : undefined;
-    return (_b = mapper === null || mapper === void 0 ? void 0 : mapper.render(node, {
+    return mapper.render(node, {
       mapNodeToJsx: n => this.mapNodeToJsx(n, context, [...path, node]),
       emitAnchorClick: context.emitAnchorClick,
       setState,
       state,
       path
-    })) !== null && _b !== void 0 ? _b : h(Fragment, null);
+    });
   }
   transform(xml, context) {
     if (!this.cache || this.cache.xml !== xml) {

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

@@ -2,43 +2,96 @@
   display: block;
 }
 
-.noot {
+button.toggle-note {
+  display: inline-block;
+  font-size: 1em;
+  font-weight: 500;
+  margin-bottom: 0;
   text-decoration: none;
+  touch-action: manipulation;
+  text-align: left;
+  user-select: none;
+  vertical-align: middle;
+  border: 0;
+  color: #39870c;
+  line-height: 1;
+  padding: 0;
+  background-color: transparent;
+}
+button.toggle-note:focus, button.toggle-note:focus-visible {
+  outline-offset: 2px;
+}
+button.toggle-note:active {
+  outline: 0;
+}
+button.toggle-note.extern::after, button.toggle-note.download::after {
+  content: "";
+  display: inline-block;
+  height: 1.5em;
+  margin-left: 8px;
+  vertical-align: top;
+  width: 1.5em;
 }
-.noot:not(.dso-open) + * {
-  display: none;
+button.toggle-note[disabled] {
+  color: #afcf9d;
 }
-.noot.dso-open + * {
-  display: block;
+button.toggle-note:not([disabled]):hover {
+  color: #676cb0;
+  text-decoration: underline;
+}
+button.toggle-note:not([disabled]):active {
+  color: #676cb0;
 }
-.noot + * {
-  margin: 4px 0;
-  padding: 8px 32px 8px 8px;
+button.toggle-note.btn-align {
+  line-height: calc(1.5em - 1px);
+  padding: 11px 0;
   position: relative;
 }
-.noot + * > a {
-  display: block;
-  height: 24px;
-  position: absolute;
-  right: 0;
-  text-align: center;
-  top: 0;
-  width: 24px;
-}
-.noot + * > a::before {
-  background: var(--dso-icon, var(--di-times-zwart)) no-repeat;
+button.toggle-note.extern::after, button.toggle-note.download::after {
+  position: relative;
+  top: -2px;
+}
+button.toggle-note.download::after {
+  background: var(--dso-icon, var(--di-download)) no-repeat;
   background-position: center;
   background-size: cover;
   height: 1.5em;
   vertical-align: top;
   width: 1.5em;
-  content: "";
-  display: block;
 }
-.noot + * {
-  background-color: #ebf3e6;
+button.toggle-note.download[disabled]::after {
+  --dso-icon: var(--di-download-grasgroen-40);
+}
+button.toggle-note.download:not([disabled]):hover::after, button.toggle-note.download:not([disabled]):active::after {
+  --dso-icon: var(--di-download-scampi);
+}
+button.toggle-note.extern::after {
+  background: var(--dso-icon, var(--di-external-link)) no-repeat;
+  background-position: center;
+  background-size: cover;
+  height: 1.5em;
+  vertical-align: top;
+  width: 1.5em;
+}
+button.toggle-note.extern[disabled]::after {
+  --dso-icon: var(--di-external-link-grasgroen-40);
+}
+button.toggle-note.extern:not([disabled]):hover::after, button.toggle-note.extern:not([disabled]):active::after {
+  --dso-icon: var(--di-external-link-scampi);
+}
+button.toggle-note dso-icon + span:not(.sr-only),
+button.toggle-note svg.di + span:not(.sr-only),
+button.toggle-note span:not(.sr-only) + dso-icon,
+button.toggle-note span:not(.sr-only) + svg.di {
+  margin-left: 8px;
+}
+button.toggle-note dso-icon,
+button.toggle-note svg.di,
+button.toggle-note span {
+  vertical-align: middle;
 }
 
+span[role=section],
 span[role=paragraph] {
   display: block;
 }

package/dist/collection/components/progress-bar/progress-bar.template.js

@@ -1,5 +1,5 @@
 import { html, nothing } from 'lit-html';
-import { ifDefined } from 'lit-html/directives/if-defined';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 export function progressBarTemplate({ progress, label, min, max }) {
   return html `
     <dso-progress-bar

package/dist/collection/components/progress-indicator/progress-indicator.template.js

@@ -1,5 +1,5 @@
 import { html } from 'lit-html';
-import { ifDefined } from 'lit-html/directives/if-defined';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 export function progressIndicatorTemplate({ label, block, size }) {
   return html `
     <dso-progress-indicator

package/dist/collection/components/selectable/selectable.css

@@ -32,9 +32,15 @@
   position: absolute;
   top: 0;
   width: 24px;
-  z-index: 1;
+  z-index: 100;
   zoom: 1;
 }
+@media (prefers-contrast: more) {
+  :host input[type=checkbox],
+:host input[type=radio] {
+    opacity: 1;
+  }
+}
 :host input[type=checkbox]:not([disabled]),
 :host input[type=radio]:not([disabled]) {
   cursor: pointer;

package/dist/collection/components/selectable/selectable.template.js

@@ -1,5 +1,5 @@
 import { html, nothing } from 'lit-html';
-import { ifDefined } from 'lit-html/directives/if-defined';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 export function selectableTemplate({ type, id, name, label, value, required, invalid, describedById, checked, indeterminate, disabled, onChange, info }) {
   var _a;
   return html `

package/dist/collection/components/toggletip/toggletip.template.js

@@ -1,6 +1,6 @@
 import { html } from "lit-html";
-import { ifDefined } from "lit-html/directives/if-defined";
-import { unsafeHTML } from "lit-html/directives/unsafe-html";
+import { ifDefined } from "lit-html/directives/if-defined.js";
+import { unsafeHTML } from "lit-html/directives/unsafe-html.js";
 export function toggletipTemplate({ children, label, position, small, secondary, }) {
   return html `<dso-toggletip
     label=${ifDefined(label)}

package/dist/collection/components/tooltip/tooltip.css

@@ -49,7 +49,7 @@
   opacity: 0;
   position: absolute;
   transition: opacity 0.15s linear;
-  z-index: 1070;
+  z-index: 410;
 }
 .tooltip.in {
   opacity: 1;

package/dist/collection/components/tooltip/tooltip.template.js

@@ -1,5 +1,5 @@
 import { html } from 'lit-html';
-import { ifDefined } from 'lit-html/directives/if-defined';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 export function tooltipTemplate({ active, position, label, id }) {
   return html `<dso-tooltip position=${position} for=${ifDefined(id)} ?active=${active}>
     ${label}

package/dist/collection/components/tree-view/tree-item.js

@@ -1,21 +1,21 @@
 import { h, Fragment } from '@stencil/core';
 import clsx from 'clsx';
 export const DsoTreeItem = ({ owner, ancestors, item, index, level, setSize }) => {
-  var _a, _b, _c;
-  return (h("li", { key: item.id, class: clsx('tree-item', { 'has-child': item.hasItems }), role: 'none' },
+  var _a, _b, _c, _d;
+  return (h("li", { key: item.id, class: clsx('tree-item', { 'has-child': item.hasItems, 'is-expanded': (!!item.open && !!((_a = item.items) === null || _a === void 0 ? void 0 : _a.length)) }), role: 'none' },
     h("div", { class: "tree-branch-control" }, item.hasItems
       ?
         h("div", { onClick: (e) => owner.itemClick(e, ancestors, item) },
-          h("dso-icon", { icon: item.open ? 'chevron-down' : 'chevron-right' }))
+          h("dso-icon", { icon: item.open ? 'minus-square' : 'plus-square' }))
       : h("dso-icon", null)),
-    h("p", { class: clsx('tree-content', { 'active': item.active }, { 'selected': item.selected }), tabindex: level === 1 && index === 0 ? 0 : -1, role: "treeitem", "aria-expanded": item.hasItems ? '' + (!!item.open && !!((_a = item.items) === null || _a === void 0 ? void 0 : _a.length)) : undefined, "aria-current": item.active ? 'true' : undefined, "aria-level": level, "aria-setsize": setSize, "aria-posinset": index + 1, "aria-busy": item.loading ? 'true' : undefined, onClick: (e) => owner.itemClick(e, ancestors, item) },
+    h("p", { class: clsx('tree-content', { 'active': item.active }, { 'selected': item.selected }), tabindex: level === 1 && index === 0 ? 0 : -1, role: "treeitem", "aria-expanded": item.hasItems ? '' + (!!item.open && !!((_b = item.items) === null || _b === void 0 ? void 0 : _b.length)) : undefined, "aria-current": item.active ? 'true' : undefined, "aria-level": level, "aria-setsize": setSize, "aria-posinset": index + 1, "aria-busy": item.loading ? 'true' : undefined, onClick: (e) => owner.itemClick(e, ancestors, item) },
       item.selected && h("span", { class: "sr-only" }, "Resultaat: "),
       item.href
         ? h("a", { href: item.href, tabindex: "-1" }, item.label)
-        : h("span", null, item.label), (_b = item.icons) === null || _b === void 0 ? void 0 :
-      _b.map((icon) => h("dso-icon", { icon: icon.icon, title: icon.label }))),
+        : h("span", null, item.label), (_c = item.icons) === null || _c === void 0 ? void 0 :
+      _c.map((icon) => h("dso-icon", { icon: icon.icon, title: icon.label }))),
     item.open &&
       h(Fragment, null, item.hasItems && !item.items && item.loading
         ? h("dso-progress-indicator", { size: "small", label: "Resultaten laden: een moment geduld alstublieft." })
-        : h("ul", { role: "group" }, (_c = item.items) === null || _c === void 0 ? void 0 : _c.map((childItem, index, org) => h(DsoTreeItem, { owner: owner, ancestors: [...ancestors, item], item: childItem, index: index, level: level + 1, setSize: org.length }))))));
+        : h("ul", { role: "group" }, (_d = item.items) === null || _d === void 0 ? void 0 : _d.map((childItem, index, org) => h(DsoTreeItem, { owner: owner, ancestors: [...ancestors, item], item: childItem, index: index, level: level + 1, setSize: org.length }))))));
 };

package/dist/collection/components/tree-view/tree-view.css

@@ -1,31 +1,97 @@
 :host ul {
   list-style-type: none;
+  padding-inline-start: 32px;
+  position: relative;
+}
+:host li {
+  position: relative;
 }
 :host ul[role=tree] {
   padding-left: 0;
 }
-:host li[role=treeitem] > ul {
-  padding-left: 1.5em;
+:host ul[role=group]::before {
+  border-left: 1px solid #275937;
+  content: "";
+  height: 8px;
+  left: 44px;
+  position: absolute;
+  top: 0;
+  width: 0;
+}
+:host li:not(.has-child)::before {
+  border-top: 1px solid #275937;
+  content: "";
+  height: 0;
+  left: 12px;
+  position: absolute;
+  top: 20px;
+  width: 16px;
+}
+:host li:not(.has-child)::after {
+  border-left: 1px solid #275937;
+  content: "";
+  height: 100%;
+  left: 12px;
+  position: absolute;
+  top: 8px;
+  width: 0;
+}
+:host li:not(.has-child):last-child::after {
+  height: 20px;
+  top: 0;
+}
+:host li.has-child::before {
+  border-top: 1px solid #275937;
+  content: "";
+  height: 0;
+  left: 24px;
+  position: absolute;
+  top: 20px;
+  width: 4px;
+}
+:host li.has-child:not(:last-child)::after {
+  border-left: 1px solid #275937;
+  content: "";
+  height: calc(100% - 24px);
+  left: 12px;
+  position: absolute;
+  top: 32px;
+  width: 0;
+}
+:host li.has-child.is-expanded:last-child::after {
+  border-left: 1px solid #275937;
+  content: "";
+  height: calc(100% - 32px);
+  left: 12px;
+  position: absolute;
+  top: 32px;
+  width: 0;
 }
 :host .tree-branch-control {
-  cursor: pointer;
+  color: #39870c;
   display: inline-block;
-  margin: 8px 0;
+  font-size: 16px;
+  margin: 8px 8px 8px 0;
   vertical-align: top;
 }
+:host .tree-branch-control > div {
+  cursor: pointer;
+}
 :host .tree-content {
   cursor: pointer;
   display: inline-block;
   margin: 8px 0;
-  width: calc(100% - 24px);
+  max-width: calc(100% - 40px);
 }
-:host .tree-content.active {
-  font-weight: 700;
-}
-:host .tree-content.active:hover {
+:host .tree-content a {
+  color: #191919;
   text-decoration: underline;
 }
-:host .tree-content.active a {
+:host .tree-content a:hover, :host .tree-content a:focus {
+  color: #191919;
+  text-decoration: none;
+}
+:host .tree-content a:active {
   text-decoration: none;
 }
 :host .tree-content.selected {
@@ -36,18 +102,23 @@
 :host .tree-content.selected:hover, :host .tree-content.selected:focus {
   text-decoration: none;
 }
-:host .tree-content a, :host .tree-content a:visited {
-  color: #191919;
+:host .tree-content.active {
+  color: #8b4a6a;
+  font-style: italic;
+  font-weight: 700;
   text-decoration: underline;
 }
-:host .tree-content a:hover, :host .tree-content a:focus {
-  color: #191919;
+:host .tree-content.active:hover, :host .tree-content.active:focus {
   text-decoration: none;
 }
-:host .tree-content a:active {
+:host .tree-content.active a {
+  color: #8b4a6a;
+}
+:host .tree-content.active a:hover, :host .tree-content.active a:focus {
   text-decoration: none;
 }
 :host .tree-content dso-icon {
+  color: #39870c;
   font-size: 0.75em;
   margin-left: 0.5em;
   vertical-align: text-bottom;