@dso-toolkit/core 32.1.0 → 33.2.0

package/dist/cjs/dso-autosuggest.cjs.entry.js

@@ -93,6 +93,7 @@ let Autosuggest = class {
     index.registerInstance(this, hostRef);
     this.selectEmitter = index.createEvent(this, "dsoSelect", 7);
     this.changeEmitter = index.createEvent(this, "dsoChange", 7);
+    this.searchEmitter = index.createEvent(this, "dsoSearch", 7);
     /**
      * The suggestions for the value of the slotted input element
      */
@@ -279,9 +280,12 @@ let Autosuggest = class {
     this.selectFirstSuggestion();
   }
   pickSelectedValue() {
-    if (this.selectedSuggestion) {
+    if (this.selectedSuggestion && this.showSuggestions) {
       this.selectEmitter.emit(this.selectedSuggestion);
     }
+    else {
+      this.searchEmitter.emit(this.input.value);
+    }
     this.closeSuggestions();
   }
   listboxItemId(suggestion) {

package/dist/cjs/dso-date-picker.cjs.entry.js

@@ -478,8 +478,7 @@ let DsoDatePicker = class {
     };
     this.handleInputChange = (e) => {
       const target = e.target;
-      target.value = target.value.replace(DISALLOWED_CHARACTERS, "");
-      this.setValue(target.value);
+      this.setValue(target.value.replace(DISALLOWED_CHARACTERS, ""));
     };
     this.processFocusedDayNode = (element) => {
       this.focusedDayNode = element;
@@ -585,10 +584,7 @@ let DsoDatePicker = class {
       event.valueAsDate = parseDutchDate(value);
     }
     if (event.valueAsDate) {
-      event.value = this.value = printDutchDate(event.valueAsDate);
-    }
-    else {
-      this.value = "";
+      event.value = printDutchDate(event.valueAsDate);
     }
     if (!event.valueAsDate && this.required) {
       event.error = "required";
@@ -596,9 +592,14 @@ let DsoDatePicker = class {
     if (event.value && !event.valueAsDate) {
       event.error = "invalid";
     }
+    this.value = event.value;
     this.dateChange.emit(event);
   }
   componentDidLoad() {
+    const valueAsDate = parseDutchDate(this.value);
+    if (valueAsDate) {
+      this.value = printDutchDate(valueAsDate);
+    }
     if (this.dsoAutofocus) {
       this.setFocus();
     }
@@ -625,7 +626,7 @@ let DsoDatePicker = class {
     if (maxDate) {
       maxYear = Math.min(maxYear, maxDate.getFullYear());
     }
-    return (index.h(index.Host, null, index.h("div", { class: "dso-date" }, index.h("div", { class: "dso-date__input-wrapper" }, index.h("input", { class: "dso-date__input", value: formattedDate, placeholder: this.localization.placeholder, id: this.identifier, disabled: this.disabled, role: this.role, required: this.required ? true : undefined, "aria-autocomplete": "none", onInput: this.handleInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, autoComplete: "off", ref: element => (this.datePickerInput = element) }), index.h("button", { type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: element => (this.datePickerButton = element) }, index.h("span", { class: "dso-date__toggle-icon" }, index.h("dso-icon", { icon: "calendar" })), index.h("span", { class: "dso-date__vhidden" }, this.localization.buttonLabel, formattedDate && (index.h("span", null, ", ", this.localization.selectedDateMessage, " ", formattedDate))))), index.h("div", { class: {
+    return (index.h(index.Host, null, index.h("div", { class: "dso-date" }, index.h("div", { class: "dso-date__input-wrapper" }, index.h("input", { class: "dso-date__input", value: this.value, placeholder: this.localization.placeholder, id: this.identifier, disabled: this.disabled, role: this.role, required: this.required ? true : undefined, "aria-autocomplete": "none", onInput: this.handleInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, autoComplete: "off", ref: element => (this.datePickerInput = element) }), index.h("button", { type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: element => (this.datePickerButton = element) }, index.h("span", { class: "dso-date__toggle-icon" }, index.h("dso-icon", { icon: "calendar" })), index.h("span", { class: "dso-date__vhidden" }, this.localization.buttonLabel, formattedDate && (index.h("span", null, ", ", this.localization.selectedDateMessage, " ", formattedDate))))), index.h("div", { class: {
         "dso-date__dialog": true,
         "is-left": this.direction === "left",
         "is-active": this.open,

package/dist/cjs/dso-dropdown-menu.cjs.entry.js

@@ -230,7 +230,7 @@ var tabbable = function tabbable(el, options) {
   return tabbableNodes;
 };
 
-const dropdownMenuCss = ":host{--di-check-wit:url(\"data:image/svg+xml,%3csvg id='check' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: white%3b'%3e %3cpath fill='currentColor' d='M10.11%2c18%2c5.29%2c13.31A.92.92%2c0%2c0%2c1%2c5.3%2c12a1%2c1%2c0%2c0%2c1%2c1.41%2c0l3.4%2c3.3%2c7.18-7a1%2c1%2c0%2c0%2c1%2c1.41%2c0%2c.92.92%2c0%2c0%2c1%2c0%2c1.35Z'/%3e %3c/svg%3e\");--di-chevron-down:url(\"data:image/svg+xml,%3csvg id='chevron-down' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M12%2c16%2c5.29%2c9.63a.93.93%2c0%2c0%2c1%2c0-1.35%2c1%2c1%2c0%2c0%2c1%2c1.42%2c0l5.29%2c5%2c5.29-5a1%2c1%2c0%2c0%2c1%2c1.42%2c0%2c.91.91%2c0%2c0%2c1%2c0%2c1.34Z'/%3e %3c/svg%3e\");--di-chevron-down-scampi:url(\"data:image/svg+xml,%3csvg id='chevron-down' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23676cb0%3b'%3e %3cpath fill='currentColor' d='M12%2c16%2c5.29%2c9.63a.93.93%2c0%2c0%2c1%2c0-1.35%2c1%2c1%2c0%2c0%2c1%2c1.42%2c0l5.29%2c5%2c5.29-5a1%2c1%2c0%2c0%2c1%2c1.42%2c0%2c.91.91%2c0%2c0%2c1%2c0%2c1.34Z'/%3e %3c/svg%3e\");--di-chevron-down-wit:url(\"data:image/svg+xml,%3csvg id='chevron-down' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: white%3b'%3e %3cpath fill='currentColor' d='M12%2c16%2c5.29%2c9.63a.93.93%2c0%2c0%2c1%2c0-1.35%2c1%2c1%2c0%2c0%2c1%2c1.42%2c0l5.29%2c5%2c5.29-5a1%2c1%2c0%2c0%2c1%2c1.42%2c0%2c.91.91%2c0%2c0%2c1%2c0%2c1.34Z'/%3e %3c/svg%3e\");--di-chevron-up:url(\"data:image/svg+xml,%3csvg id='chevron-up' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M18%2c16a1%2c1%2c0%2c0%2c1-.71-.28l-5.29-5-5.29%2c5a1%2c1%2c0%2c0%2c1-1.42%2c0%2c.93.93%2c0%2c0%2c1%2c0-1.35L12%2c8l6.71%2c6.38a.91.91%2c0%2c0%2c1%2c0%2c1.34A1%2c1%2c0%2c0%2c1%2c18%2c16Z'/%3e %3c/svg%3e\");--di-chevron-up-scampi:url(\"data:image/svg+xml,%3csvg id='chevron-up' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23676cb0%3b'%3e %3cpath fill='currentColor' d='M18%2c16a1%2c1%2c0%2c0%2c1-.71-.28l-5.29-5-5.29%2c5a1%2c1%2c0%2c0%2c1-1.42%2c0%2c.93.93%2c0%2c0%2c1%2c0-1.35L12%2c8l6.71%2c6.38a.91.91%2c0%2c0%2c1%2c0%2c1.34A1%2c1%2c0%2c0%2c1%2c18%2c16Z'/%3e %3c/svg%3e\");--di-chevron-up-wit:url(\"data:image/svg+xml,%3csvg id='chevron-up' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: white%3b'%3e %3cpath fill='currentColor' d='M18%2c16a1%2c1%2c0%2c0%2c1-.71-.28l-5.29-5-5.29%2c5a1%2c1%2c0%2c0%2c1-1.42%2c0%2c.93.93%2c0%2c0%2c1%2c0-1.35L12%2c8l6.71%2c6.38a.91.91%2c0%2c0%2c1%2c0%2c1.34A1%2c1%2c0%2c0%2c1%2c18%2c16Z'/%3e %3c/svg%3e\");display:inline-block;position:relative}";
+const dropdownMenuCss = ":host(:focus){outline:none}:host{--di-check-wit:url(\"data:image/svg+xml,%3csvg id='check' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: white%3b'%3e %3cpath fill='currentColor' d='M10.11%2c18%2c5.29%2c13.31A.92.92%2c0%2c0%2c1%2c5.3%2c12a1%2c1%2c0%2c0%2c1%2c1.41%2c0l3.4%2c3.3%2c7.18-7a1%2c1%2c0%2c0%2c1%2c1.41%2c0%2c.92.92%2c0%2c0%2c1%2c0%2c1.35Z'/%3e %3c/svg%3e\");--di-chevron-down:url(\"data:image/svg+xml,%3csvg id='chevron-down' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M12%2c16%2c5.29%2c9.63a.93.93%2c0%2c0%2c1%2c0-1.35%2c1%2c1%2c0%2c0%2c1%2c1.42%2c0l5.29%2c5%2c5.29-5a1%2c1%2c0%2c0%2c1%2c1.42%2c0%2c.91.91%2c0%2c0%2c1%2c0%2c1.34Z'/%3e %3c/svg%3e\");--di-chevron-down-scampi:url(\"data:image/svg+xml,%3csvg id='chevron-down' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23676cb0%3b'%3e %3cpath fill='currentColor' d='M12%2c16%2c5.29%2c9.63a.93.93%2c0%2c0%2c1%2c0-1.35%2c1%2c1%2c0%2c0%2c1%2c1.42%2c0l5.29%2c5%2c5.29-5a1%2c1%2c0%2c0%2c1%2c1.42%2c0%2c.91.91%2c0%2c0%2c1%2c0%2c1.34Z'/%3e %3c/svg%3e\");--di-chevron-down-wit:url(\"data:image/svg+xml,%3csvg id='chevron-down' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: white%3b'%3e %3cpath fill='currentColor' d='M12%2c16%2c5.29%2c9.63a.93.93%2c0%2c0%2c1%2c0-1.35%2c1%2c1%2c0%2c0%2c1%2c1.42%2c0l5.29%2c5%2c5.29-5a1%2c1%2c0%2c0%2c1%2c1.42%2c0%2c.91.91%2c0%2c0%2c1%2c0%2c1.34Z'/%3e %3c/svg%3e\");--di-chevron-up:url(\"data:image/svg+xml,%3csvg id='chevron-up' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M18%2c16a1%2c1%2c0%2c0%2c1-.71-.28l-5.29-5-5.29%2c5a1%2c1%2c0%2c0%2c1-1.42%2c0%2c.93.93%2c0%2c0%2c1%2c0-1.35L12%2c8l6.71%2c6.38a.91.91%2c0%2c0%2c1%2c0%2c1.34A1%2c1%2c0%2c0%2c1%2c18%2c16Z'/%3e %3c/svg%3e\");--di-chevron-up-scampi:url(\"data:image/svg+xml,%3csvg id='chevron-up' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23676cb0%3b'%3e %3cpath fill='currentColor' d='M18%2c16a1%2c1%2c0%2c0%2c1-.71-.28l-5.29-5-5.29%2c5a1%2c1%2c0%2c0%2c1-1.42%2c0%2c.93.93%2c0%2c0%2c1%2c0-1.35L12%2c8l6.71%2c6.38a.91.91%2c0%2c0%2c1%2c0%2c1.34A1%2c1%2c0%2c0%2c1%2c18%2c16Z'/%3e %3c/svg%3e\");--di-chevron-up-wit:url(\"data:image/svg+xml,%3csvg id='chevron-up' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: white%3b'%3e %3cpath fill='currentColor' d='M18%2c16a1%2c1%2c0%2c0%2c1-.71-.28l-5.29-5-5.29%2c5a1%2c1%2c0%2c0%2c1-1.42%2c0%2c.93.93%2c0%2c0%2c1%2c0-1.35L12%2c8l6.71%2c6.38a.91.91%2c0%2c0%2c1%2c0%2c1.34A1%2c1%2c0%2c0%2c1%2c18%2c16Z'/%3e %3c/svg%3e\");display:inline-block;position:relative}";
 
 let DropdownMenu = class {
   constructor(hostRef) {
@@ -325,6 +325,9 @@ let DropdownMenu = class {
       this.openPopup();
     }
   }
+  componentDidRender() {
+    this.host.setAttribute("tabindex", "-1");
+  }
   componentWillRender() {
     for (const li of Array.from(this.host.getElementsByTagName("li"))) {
       for (const tab of tabbable(li)) {

package/dist/cjs/dso-label.cjs.entry.js

@@ -14,7 +14,7 @@ let Label = class {
   }
   render() {
     const status = this.status && Label.statusMap.get(this.status);
-    return (index.h("span", { class: clsx_m.clsx('dso-label', { [`dso-label-${this.status}`]: this.status, 'dso-compact': this.compact && !this.removable, 'dso-hover': this.hover }) }, index.h("slot", { name: "symbol" }), status && (index.h("span", { class: "sr-only" }, status, ": ")), index.h("slot", null), this.removable && (index.h("button", { type: "button", onClick: e => this.removeClick.emit(e), title: "Verwijder", onMouseEnter: () => this.hover = true, onMouseLeave: () => this.hover = false }, index.h("dso-icon", { icon: "times" })))));
+    return (index.h("span", { class: clsx_m.clsx('dso-label', { [`dso-label-${this.status}`]: this.status, 'dso-compact': this.compact && !this.removable, 'dso-hover': this.hover }) }, index.h("slot", { name: "symbol" }), status && (index.h("span", { class: "sr-only" }, status, ": ")), index.h("slot", null), this.removable && (index.h("button", { type: "button", onClick: e => this.removeClick.emit(e), onMouseEnter: () => this.hover = true, onMouseLeave: () => this.hover = false }, index.h("span", { class: "sr-only" }, "Verwijder"), index.h("dso-icon", { icon: "times" })))));
   }
 };
 Label.statusMap = new Map([

package/dist/cjs/dso-toggletip.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-fcdfdd38.js');
 
-const toggletipCss = "*,*::after,*::before{box-sizing:border-box}";
+const toggletipCss = "*,*::after,*::before{box-sizing:border-box}:host(:focus){outline:none}";
 
 let Toggletip = class {
   constructor(hostRef) {
@@ -51,6 +51,7 @@ let Toggletip = class {
       throw Error("button not found");
     }
     this.button = button;
+    this.host.setAttribute("tabindex", "-1");
   }
   render() {
     return (index.h(index.Fragment, null, index.h("dso-info-button", { id: "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary }), index.h("dso-tooltip", { stateless: true, for: "toggle", active: this.active, position: this.position, small: this.small }, index.h("slot", null))));

package/dist/cjs/dso-tree-view.cjs.entry.js

@@ -7,13 +7,14 @@ const clsx_m = require('./clsx.m-b00fa5e1.js');
 
 const DsoTreeItem = ({ owner, ancestors, item, index: index$1, level, setSize }) => {
   var _a, _b, _c;
-  return (index.h("li", { key: item.reference, class: clsx_m.clsx('tree-item', { 'has-child': item.hasItems }), role: 'none' },
+  return (index.h("li", { key: item.id, class: clsx_m.clsx('tree-item', { 'has-child': item.hasItems }), role: 'none' },
     index.h("div", { class: "tree-branch-control" }, item.hasItems
       ?
         index.h("div", { onClick: (e) => owner.itemClick(e, ancestors, item) },
           index.h("dso-icon", { icon: item.open ? 'chevron-down' : 'chevron-right' }))
       : index.h("dso-icon", null)),
-    index.h("p", { class: "tree-content", tabindex: level === 1 && index$1 === 0 ? 0 : -1, role: "treeitem", "aria-expanded": item.hasItems ? '' + (!!item.open && !!((_a = item.items) === null || _a === void 0 ? void 0 : _a.length)) : undefined, "aria-level": level, "aria-setsize": setSize, "aria-posinset": index$1 + 1, "aria-busy": item.loading ? 'true' : undefined, onClick: (e) => owner.itemClick(e, ancestors, item) },
+    index.h("p", { class: clsx_m.clsx('tree-content', { 'active': item.active }, { 'selected': item.selected }), tabindex: level === 1 && index$1 === 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 + 1, "aria-busy": item.loading ? 'true' : undefined, onClick: (e) => owner.itemClick(e, ancestors, item) },
+      item.selected && index.h("span", { class: "sr-only" }, "Resultaat: "),
       item.href
         ? index.h("a", { href: item.href, tabindex: "-1" }, item.label)
         : index.h("span", null, item.label), (_b = item.icons) === null || _b === void 0 ? void 0 :
@@ -24,7 +25,7 @@ const DsoTreeItem = ({ owner, ancestors, item, index: index$1, level, setSize })
         : index.h("ul", { role: "group" }, (_c = item.items) === null || _c === void 0 ? void 0 : _c.map((childItem, index$1, org) => index.h(DsoTreeItem, { owner: owner, ancestors: [...ancestors, item], item: childItem, index: index$1, level: level + 1, setSize: org.length }))))));
 };
 
-const treeViewCss = ":host ul{list-style-type:none}:host ul[role=tree]{padding-left:0}:host li[role=treeitem]>ul{padding-left:1.5em}:host .tree-branch-control{cursor:pointer;display:inline-block}:host .tree-content{cursor:pointer;display:inline-block;margin:8px 0}:host .tree-content a,:host .tree-content a:visited{color:#39870c;text-decoration:none}:host .tree-content a:hover,:host .tree-content a:focus{color:#676cb0;text-decoration:underline}:host .tree-content a:active{text-decoration:none}:host .tree-content dso-icon{vertical-align:text-bottom;font-size:0.75em;margin-left:0.5em}*,*::after,*::before{box-sizing:border-box}";
+const treeViewCss = ":host ul{list-style-type:none}:host ul[role=tree]{padding-left:0}:host li[role=treeitem]>ul{padding-left:1.5em}:host .tree-branch-control{cursor:pointer;display:inline-block}:host .tree-content{cursor:pointer;display:inline-block;margin:8px 0}:host .tree-content.active{font-weight:700}:host .tree-content.active:hover{text-decoration:underline}:host .tree-content.active a{text-decoration:none}:host .tree-content.selected{color:#191919;font-weight:700;text-decoration:underline}:host .tree-content.selected:hover,:host .tree-content.selected:focus{text-decoration:none}:host .tree-content a,:host .tree-content a:visited{color:#191919;text-decoration:underline}: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 dso-icon{font-size:0.75em;margin-left:0.5em;vertical-align:text-bottom}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
 
 let TreeView = class {
   constructor(hostRef) {
@@ -85,7 +86,7 @@ let TreeView = class {
           return;
         }
         TreeView.setFocus(tree, contentElement);
-        this.clickItem.emit([...ancestors, item]);
+        this.clickItem.emit({ path: [...ancestors, item], originalEvent: event });
         return;
       }
       if (item.open) {

package/dist/collection/components/autosuggest/autosuggest.js

@@ -190,9 +190,12 @@ export class Autosuggest {
     this.selectFirstSuggestion();
   }
   pickSelectedValue() {
-    if (this.selectedSuggestion) {
+    if (this.selectedSuggestion && this.showSuggestions) {
       this.selectEmitter.emit(this.selectedSuggestion);
     }
+    else {
+      this.searchEmitter.emit(this.input.value);
+    }
     this.closeSuggestions();
   }
   listboxItemId(suggestion) {
@@ -296,6 +299,21 @@ export class Autosuggest {
         "resolved": "string",
         "references": {}
       }
+    }, {
+      "method": "searchEmitter",
+      "name": "dsoSearch",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when enter is pressed.\nThe `detail` property of the `CustomEvent`\u00A0will contain the input text."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
     }]; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{

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

@@ -1,10 +1,11 @@
 import { html } from 'lit-html';
-export function autosuggestTemplate({ suggestions, onSelect, onChange, suggestOnFocus }, children) {
+export function autosuggestTemplate({ suggestions, onSelect, onChange, onSearch, suggestOnFocus }, children) {
   return html `
     <dso-autosuggest
       .suggestions=${suggestions}
       @dsoSelect=${onSelect}
       @dsoChange=${onChange}
+      @dsoSearch=${onSearch}
       ?suggest-on-focus=${suggestOnFocus}
     >
       ${children}

package/dist/collection/components/date-picker/date-picker.js

@@ -229,8 +229,7 @@ export class DsoDatePicker {
     };
     this.handleInputChange = (e) => {
       const target = e.target;
-      target.value = target.value.replace(DISALLOWED_CHARACTERS, "");
-      this.setValue(target.value);
+      this.setValue(target.value.replace(DISALLOWED_CHARACTERS, ""));
     };
     this.processFocusedDayNode = (element) => {
       this.focusedDayNode = element;
@@ -336,10 +335,7 @@ export class DsoDatePicker {
       event.valueAsDate = parseDutchDate(value);
     }
     if (event.valueAsDate) {
-      event.value = this.value = printDutchDate(event.valueAsDate);
-    }
-    else {
-      this.value = "";
+      event.value = printDutchDate(event.valueAsDate);
     }
     if (!event.valueAsDate && this.required) {
       event.error = "required";
@@ -347,9 +343,14 @@ export class DsoDatePicker {
     if (event.value && !event.valueAsDate) {
       event.error = "invalid";
     }
+    this.value = event.value;
     this.dateChange.emit(event);
   }
   componentDidLoad() {
+    const valueAsDate = parseDutchDate(this.value);
+    if (valueAsDate) {
+      this.value = printDutchDate(valueAsDate);
+    }
     if (this.dsoAutofocus) {
       this.setFocus();
     }
@@ -379,7 +380,7 @@ export class DsoDatePicker {
     return (h(Host, null,
       h("div", { class: "dso-date" },
         h("div", { class: "dso-date__input-wrapper" },
-          h("input", { class: "dso-date__input", value: formattedDate, placeholder: this.localization.placeholder, id: this.identifier, disabled: this.disabled, role: this.role, required: this.required ? true : undefined, "aria-autocomplete": "none", onInput: this.handleInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, autoComplete: "off", ref: element => (this.datePickerInput = element) }),
+          h("input", { class: "dso-date__input", value: this.value, placeholder: this.localization.placeholder, id: this.identifier, disabled: this.disabled, role: this.role, required: this.required ? true : undefined, "aria-autocomplete": "none", onInput: this.handleInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, autoComplete: "off", ref: element => (this.datePickerInput = element) }),
           h("button", { type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: element => (this.datePickerButton = element) },
             h("span", { class: "dso-date__toggle-icon" },
               h("dso-icon", { icon: "calendar" })),

package/dist/collection/components/dropdown-menu/dropdown-menu.css

@@ -1,6 +1,10 @@
 /* stylelint-disable value-keyword-case */
 /* stylelint-disable string-no-newline */
 /* stylelint-enable */
+:host(:focus) {
+  outline: none;
+}
+
 :host {
   --di-check-wit: url("data:image/svg+xml,%3csvg id='check' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: white%3b'%3e %3cpath fill='currentColor' d='M10.11%2c18%2c5.29%2c13.31A.92.92%2c0%2c0%2c1%2c5.3%2c12a1%2c1%2c0%2c0%2c1%2c1.41%2c0l3.4%2c3.3%2c7.18-7a1%2c1%2c0%2c0%2c1%2c1.41%2c0%2c.92.92%2c0%2c0%2c1%2c0%2c1.35Z'/%3e %3c/svg%3e");
   --di-chevron-down: url("data:image/svg+xml,%3csvg id='chevron-down' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M12%2c16%2c5.29%2c9.63a.93.93%2c0%2c0%2c1%2c0-1.35%2c1%2c1%2c0%2c0%2c1%2c1.42%2c0l5.29%2c5%2c5.29-5a1%2c1%2c0%2c0%2c1%2c1.42%2c0%2c.91.91%2c0%2c0%2c1%2c0%2c1.34Z'/%3e %3c/svg%3e");

package/dist/collection/components/dropdown-menu/dropdown-menu.js

@@ -93,6 +93,9 @@ export class DropdownMenu {
       this.openPopup();
     }
   }
+  componentDidRender() {
+    this.host.setAttribute("tabindex", "-1");
+  }
   componentWillRender() {
     for (const li of Array.from(this.host.getElementsByTagName("li"))) {
       for (const tab of tabbable(li)) {

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

@@ -9,7 +9,8 @@ export class Label {
         status,
         ": ")),
       h("slot", null),
-      this.removable && (h("button", { type: "button", onClick: e => this.removeClick.emit(e), title: "Verwijder", onMouseEnter: () => this.hover = true, onMouseLeave: () => this.hover = false },
+      this.removable && (h("button", { type: "button", onClick: e => this.removeClick.emit(e), onMouseEnter: () => this.hover = true, onMouseLeave: () => this.hover = false },
+        h("span", { class: "sr-only" }, "Verwijder"),
         h("dso-icon", { icon: "times" })))));
   }
   static get is() { return "dso-label"; }

package/dist/collection/components/toggletip/toggletip.css

@@ -5,4 +5,8 @@
 *::after,
 *::before {
   box-sizing: border-box;
+}
+
+:host(:focus) {
+  outline: none;
 }

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

@@ -43,6 +43,7 @@ export class Toggletip {
       throw Error("button not found");
     }
     this.button = button;
+    this.host.setAttribute("tabindex", "-1");
   }
   render() {
     return (h(Fragment, null,

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

@@ -2,13 +2,14 @@ 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.reference, class: clsx('tree-item', { 'has-child': item.hasItems }), role: 'none' },
+  return (h("li", { key: item.id, class: clsx('tree-item', { 'has-child': item.hasItems }), 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", null)),
-    h("p", { class: "tree-content", 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-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 && !!((_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) },
+      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 :

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

@@ -19,25 +19,53 @@
   display: inline-block;
   margin: 8px 0;
 }
-:host .tree-content a, :host .tree-content a:visited {
-  color: #39870c;
+:host .tree-content.active {
+  font-weight: 700;
+}
+:host .tree-content.active:hover {
+  text-decoration: underline;
+}
+:host .tree-content.active a {
   text-decoration: none;
 }
-:host .tree-content a:hover, :host .tree-content a:focus {
-  color: #676cb0;
+:host .tree-content.selected {
+  color: #191919;
+  font-weight: 700;
   text-decoration: underline;
 }
+:host .tree-content.selected:hover, :host .tree-content.selected:focus {
+  text-decoration: none;
+}
+:host .tree-content a, :host .tree-content a:visited {
+  color: #191919;
+  text-decoration: underline;
+}
+: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 dso-icon {
-  vertical-align: text-bottom;
   font-size: 0.75em;
   margin-left: 0.5em;
+  vertical-align: text-bottom;
 }
 
 *,
 *::after,
 *::before {
   box-sizing: border-box;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
 }

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

@@ -55,7 +55,7 @@ export class TreeView {
           return;
         }
         TreeView.setFocus(tree, contentElement);
-        this.clickItem.emit([...ancestors, item]);
+        this.clickItem.emit({ path: [...ancestors, item], originalEvent: event });
         return;
       }
       if (item.open) {
@@ -158,8 +158,8 @@ export class TreeView {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "TreeViewItem<string>[]",
-        "resolved": "TreeViewItem<string>[]",
+        "original": "TreeViewItem[]",
+        "resolved": "TreeViewItem[]",
         "references": {
           "TreeViewItem": {
             "location": "import",
@@ -186,8 +186,8 @@ export class TreeView {
         "text": "Emitted when a tree view item is opened.\nThe `detail` property of the `CustomEvent`\u00A0will contain the complete path of TreeViewItems from the\nroot to the item that is emitting the open event. The consumer of the event is responsible for updating\nthe TreeView's collection (usually set the open state on the last TreeViewItem in path)."
       },
       "complexType": {
-        "original": "TreeViewItem<string>[]",
-        "resolved": "TreeViewItem<string>[]",
+        "original": "TreeViewItem[]",
+        "resolved": "TreeViewItem[]",
         "references": {
           "TreeViewItem": {
             "location": "import",
@@ -206,8 +206,8 @@ export class TreeView {
         "text": "Emitted when a tree view item is closed.\nThe `detail` property of the `CustomEvent`\u00A0will contain the complete path of TreeViewItems from the\nroot to the item that is emitting the close event. The consumer of the event is responsible for updating\nthe TreeView's collection (usually set the closed state on the last TreeViewItem in path)."
       },
       "complexType": {
-        "original": "TreeViewItem<string>[]",
-        "resolved": "TreeViewItem<string>[]",
+        "original": "TreeViewItem[]",
+        "resolved": "TreeViewItem[]",
         "references": {
           "TreeViewItem": {
             "location": "import",
@@ -223,13 +223,13 @@ export class TreeView {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted when a tree view item is clicked.\nThe `detail` property of the `CustomEvent`\u00A0will contain the complete path of TreeViewItems from the\nroot to the item that is emitting the clicked event."
+        "text": "Emitted when a tree view item is clicked.\nThe `detail` property of the `CustomEvent`\u00A0will contain an object with:\n`path` = the complete path of TreeViewItems from the root to the item that is emitting the clicked event.\n`originalEvent` = the original click event.\nThe consumer of the event is responsible for updating the TreeView's collection (usually set the active\nstate on the last TreeViewItem in path and clear all other active item states)."
       },
       "complexType": {
-        "original": "TreeViewItem<string>[]",
-        "resolved": "TreeViewItem<string>[]",
+        "original": "TreeViewPointerEvent",
+        "resolved": "TreeViewPointerEvent",
         "references": {
-          "TreeViewItem": {
+          "TreeViewPointerEvent": {
             "location": "import",
             "path": "./tree-view.interfaces"
           }

package/dist/custom-elements/index.js

@@ -243,6 +243,7 @@ let Autosuggest = class extends HTMLElement {
     this.__registerHost();
     this.selectEmitter = createEvent(this, "dsoSelect", 7);
     this.changeEmitter = createEvent(this, "dsoChange", 7);
+    this.searchEmitter = createEvent(this, "dsoSearch", 7);
     /**
      * The suggestions for the value of the slotted input element
      */
@@ -429,9 +430,12 @@ let Autosuggest = class extends HTMLElement {
     this.selectFirstSuggestion();
   }
   pickSelectedValue() {
-    if (this.selectedSuggestion) {
+    if (this.selectedSuggestion && this.showSuggestions) {
       this.selectEmitter.emit(this.selectedSuggestion);
     }
+    else {
+      this.searchEmitter.emit(this.input.value);
+    }
     this.closeSuggestions();
   }
   listboxItemId(suggestion) {
@@ -977,8 +981,7 @@ let DsoDatePicker$1 = class extends HTMLElement {
     };
     this.handleInputChange = (e) => {
       const target = e.target;
-      target.value = target.value.replace(DISALLOWED_CHARACTERS, "");
-      this.setValue(target.value);
+      this.setValue(target.value.replace(DISALLOWED_CHARACTERS, ""));
     };
     this.processFocusedDayNode = (element) => {
       this.focusedDayNode = element;
@@ -1084,10 +1087,7 @@ let DsoDatePicker$1 = class extends HTMLElement {
       event.valueAsDate = parseDutchDate(value);
     }
     if (event.valueAsDate) {
-      event.value = this.value = printDutchDate(event.valueAsDate);
-    }
-    else {
-      this.value = "";
+      event.value = printDutchDate(event.valueAsDate);
     }
     if (!event.valueAsDate && this.required) {
       event.error = "required";
@@ -1095,9 +1095,14 @@ let DsoDatePicker$1 = class extends HTMLElement {
     if (event.value && !event.valueAsDate) {
       event.error = "invalid";
     }
+    this.value = event.value;
     this.dateChange.emit(event);
   }
   componentDidLoad() {
+    const valueAsDate = parseDutchDate(this.value);
+    if (valueAsDate) {
+      this.value = printDutchDate(valueAsDate);
+    }
     if (this.dsoAutofocus) {
       this.setFocus();
     }
@@ -1124,7 +1129,7 @@ let DsoDatePicker$1 = class extends HTMLElement {
     if (maxDate) {
       maxYear = Math.min(maxYear, maxDate.getFullYear());
     }
-    return (h(Host, null, h("div", { class: "dso-date" }, h("div", { class: "dso-date__input-wrapper" }, h("input", { class: "dso-date__input", value: formattedDate, placeholder: this.localization.placeholder, id: this.identifier, disabled: this.disabled, role: this.role, required: this.required ? true : undefined, "aria-autocomplete": "none", onInput: this.handleInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, autoComplete: "off", ref: element => (this.datePickerInput = element) }), h("button", { type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: element => (this.datePickerButton = element) }, h("span", { class: "dso-date__toggle-icon" }, h("dso-icon", { icon: "calendar" })), h("span", { class: "dso-date__vhidden" }, this.localization.buttonLabel, formattedDate && (h("span", null, ", ", this.localization.selectedDateMessage, " ", formattedDate))))), h("div", { class: {
+    return (h(Host, null, h("div", { class: "dso-date" }, h("div", { class: "dso-date__input-wrapper" }, h("input", { class: "dso-date__input", value: this.value, placeholder: this.localization.placeholder, id: this.identifier, disabled: this.disabled, role: this.role, required: this.required ? true : undefined, "aria-autocomplete": "none", onInput: this.handleInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, autoComplete: "off", ref: element => (this.datePickerInput = element) }), h("button", { type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: element => (this.datePickerButton = element) }, h("span", { class: "dso-date__toggle-icon" }, h("dso-icon", { icon: "calendar" })), h("span", { class: "dso-date__vhidden" }, this.localization.buttonLabel, formattedDate && (h("span", null, ", ", this.localization.selectedDateMessage, " ", formattedDate))))), h("div", { class: {
         "dso-date__dialog": true,
         "is-left": this.direction === "left",
         "is-active": this.open,
@@ -1359,7 +1364,7 @@ var tabbable = function tabbable(el, options) {
   return tabbableNodes;
 };
 
-const dropdownMenuCss = ":host{--di-check-wit:url(\"data:image/svg+xml,%3csvg id='check' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: white%3b'%3e %3cpath fill='currentColor' d='M10.11%2c18%2c5.29%2c13.31A.92.92%2c0%2c0%2c1%2c5.3%2c12a1%2c1%2c0%2c0%2c1%2c1.41%2c0l3.4%2c3.3%2c7.18-7a1%2c1%2c0%2c0%2c1%2c1.41%2c0%2c.92.92%2c0%2c0%2c1%2c0%2c1.35Z'/%3e %3c/svg%3e\");--di-chevron-down:url(\"data:image/svg+xml,%3csvg id='chevron-down' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M12%2c16%2c5.29%2c9.63a.93.93%2c0%2c0%2c1%2c0-1.35%2c1%2c1%2c0%2c0%2c1%2c1.42%2c0l5.29%2c5%2c5.29-5a1%2c1%2c0%2c0%2c1%2c1.42%2c0%2c.91.91%2c0%2c0%2c1%2c0%2c1.34Z'/%3e %3c/svg%3e\");--di-chevron-down-scampi:url(\"data:image/svg+xml,%3csvg id='chevron-down' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23676cb0%3b'%3e %3cpath fill='currentColor' d='M12%2c16%2c5.29%2c9.63a.93.93%2c0%2c0%2c1%2c0-1.35%2c1%2c1%2c0%2c0%2c1%2c1.42%2c0l5.29%2c5%2c5.29-5a1%2c1%2c0%2c0%2c1%2c1.42%2c0%2c.91.91%2c0%2c0%2c1%2c0%2c1.34Z'/%3e %3c/svg%3e\");--di-chevron-down-wit:url(\"data:image/svg+xml,%3csvg id='chevron-down' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: white%3b'%3e %3cpath fill='currentColor' d='M12%2c16%2c5.29%2c9.63a.93.93%2c0%2c0%2c1%2c0-1.35%2c1%2c1%2c0%2c0%2c1%2c1.42%2c0l5.29%2c5%2c5.29-5a1%2c1%2c0%2c0%2c1%2c1.42%2c0%2c.91.91%2c0%2c0%2c1%2c0%2c1.34Z'/%3e %3c/svg%3e\");--di-chevron-up:url(\"data:image/svg+xml,%3csvg id='chevron-up' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M18%2c16a1%2c1%2c0%2c0%2c1-.71-.28l-5.29-5-5.29%2c5a1%2c1%2c0%2c0%2c1-1.42%2c0%2c.93.93%2c0%2c0%2c1%2c0-1.35L12%2c8l6.71%2c6.38a.91.91%2c0%2c0%2c1%2c0%2c1.34A1%2c1%2c0%2c0%2c1%2c18%2c16Z'/%3e %3c/svg%3e\");--di-chevron-up-scampi:url(\"data:image/svg+xml,%3csvg id='chevron-up' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23676cb0%3b'%3e %3cpath fill='currentColor' d='M18%2c16a1%2c1%2c0%2c0%2c1-.71-.28l-5.29-5-5.29%2c5a1%2c1%2c0%2c0%2c1-1.42%2c0%2c.93.93%2c0%2c0%2c1%2c0-1.35L12%2c8l6.71%2c6.38a.91.91%2c0%2c0%2c1%2c0%2c1.34A1%2c1%2c0%2c0%2c1%2c18%2c16Z'/%3e %3c/svg%3e\");--di-chevron-up-wit:url(\"data:image/svg+xml,%3csvg id='chevron-up' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: white%3b'%3e %3cpath fill='currentColor' d='M18%2c16a1%2c1%2c0%2c0%2c1-.71-.28l-5.29-5-5.29%2c5a1%2c1%2c0%2c0%2c1-1.42%2c0%2c.93.93%2c0%2c0%2c1%2c0-1.35L12%2c8l6.71%2c6.38a.91.91%2c0%2c0%2c1%2c0%2c1.34A1%2c1%2c0%2c0%2c1%2c18%2c16Z'/%3e %3c/svg%3e\");display:inline-block;position:relative}";
+const dropdownMenuCss = ":host(:focus){outline:none}:host{--di-check-wit:url(\"data:image/svg+xml,%3csvg id='check' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: white%3b'%3e %3cpath fill='currentColor' d='M10.11%2c18%2c5.29%2c13.31A.92.92%2c0%2c0%2c1%2c5.3%2c12a1%2c1%2c0%2c0%2c1%2c1.41%2c0l3.4%2c3.3%2c7.18-7a1%2c1%2c0%2c0%2c1%2c1.41%2c0%2c.92.92%2c0%2c0%2c1%2c0%2c1.35Z'/%3e %3c/svg%3e\");--di-chevron-down:url(\"data:image/svg+xml,%3csvg id='chevron-down' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M12%2c16%2c5.29%2c9.63a.93.93%2c0%2c0%2c1%2c0-1.35%2c1%2c1%2c0%2c0%2c1%2c1.42%2c0l5.29%2c5%2c5.29-5a1%2c1%2c0%2c0%2c1%2c1.42%2c0%2c.91.91%2c0%2c0%2c1%2c0%2c1.34Z'/%3e %3c/svg%3e\");--di-chevron-down-scampi:url(\"data:image/svg+xml,%3csvg id='chevron-down' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23676cb0%3b'%3e %3cpath fill='currentColor' d='M12%2c16%2c5.29%2c9.63a.93.93%2c0%2c0%2c1%2c0-1.35%2c1%2c1%2c0%2c0%2c1%2c1.42%2c0l5.29%2c5%2c5.29-5a1%2c1%2c0%2c0%2c1%2c1.42%2c0%2c.91.91%2c0%2c0%2c1%2c0%2c1.34Z'/%3e %3c/svg%3e\");--di-chevron-down-wit:url(\"data:image/svg+xml,%3csvg id='chevron-down' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: white%3b'%3e %3cpath fill='currentColor' d='M12%2c16%2c5.29%2c9.63a.93.93%2c0%2c0%2c1%2c0-1.35%2c1%2c1%2c0%2c0%2c1%2c1.42%2c0l5.29%2c5%2c5.29-5a1%2c1%2c0%2c0%2c1%2c1.42%2c0%2c.91.91%2c0%2c0%2c1%2c0%2c1.34Z'/%3e %3c/svg%3e\");--di-chevron-up:url(\"data:image/svg+xml,%3csvg id='chevron-up' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M18%2c16a1%2c1%2c0%2c0%2c1-.71-.28l-5.29-5-5.29%2c5a1%2c1%2c0%2c0%2c1-1.42%2c0%2c.93.93%2c0%2c0%2c1%2c0-1.35L12%2c8l6.71%2c6.38a.91.91%2c0%2c0%2c1%2c0%2c1.34A1%2c1%2c0%2c0%2c1%2c18%2c16Z'/%3e %3c/svg%3e\");--di-chevron-up-scampi:url(\"data:image/svg+xml,%3csvg id='chevron-up' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23676cb0%3b'%3e %3cpath fill='currentColor' d='M18%2c16a1%2c1%2c0%2c0%2c1-.71-.28l-5.29-5-5.29%2c5a1%2c1%2c0%2c0%2c1-1.42%2c0%2c.93.93%2c0%2c0%2c1%2c0-1.35L12%2c8l6.71%2c6.38a.91.91%2c0%2c0%2c1%2c0%2c1.34A1%2c1%2c0%2c0%2c1%2c18%2c16Z'/%3e %3c/svg%3e\");--di-chevron-up-wit:url(\"data:image/svg+xml,%3csvg id='chevron-up' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: white%3b'%3e %3cpath fill='currentColor' d='M18%2c16a1%2c1%2c0%2c0%2c1-.71-.28l-5.29-5-5.29%2c5a1%2c1%2c0%2c0%2c1-1.42%2c0%2c.93.93%2c0%2c0%2c1%2c0-1.35L12%2c8l6.71%2c6.38a.91.91%2c0%2c0%2c1%2c0%2c1.34A1%2c1%2c0%2c0%2c1%2c18%2c16Z'/%3e %3c/svg%3e\");display:inline-block;position:relative}";
 
 let DropdownMenu = class extends HTMLElement {
   constructor() {
@@ -1456,6 +1461,9 @@ let DropdownMenu = class extends HTMLElement {
       this.openPopup();
     }
   }
+  componentDidRender() {
+    this.host.setAttribute("tabindex", "-1");
+  }
   componentWillRender() {
     for (const li of Array.from(this.host.getElementsByTagName("li"))) {
       for (const tab of tabbable(li)) {
@@ -2207,7 +2215,7 @@ let Label = class extends HTMLElement {
   }
   render() {
     const status = this.status && Label.statusMap.get(this.status);
-    return (h("span", { class: clsx('dso-label', { [`dso-label-${this.status}`]: this.status, 'dso-compact': this.compact && !this.removable, 'dso-hover': this.hover }) }, h("slot", { name: "symbol" }), status && (h("span", { class: "sr-only" }, status, ": ")), h("slot", null), this.removable && (h("button", { type: "button", onClick: e => this.removeClick.emit(e), title: "Verwijder", onMouseEnter: () => this.hover = true, onMouseLeave: () => this.hover = false }, h("dso-icon", { icon: "times" })))));
+    return (h("span", { class: clsx('dso-label', { [`dso-label-${this.status}`]: this.status, 'dso-compact': this.compact && !this.removable, 'dso-hover': this.hover }) }, h("slot", { name: "symbol" }), status && (h("span", { class: "sr-only" }, status, ": ")), h("slot", null), this.removable && (h("button", { type: "button", onClick: e => this.removeClick.emit(e), onMouseEnter: () => this.hover = true, onMouseLeave: () => this.hover = false }, h("span", { class: "sr-only" }, "Verwijder"), h("dso-icon", { icon: "times" })))));
   }
   static get style() { return labelCss; }
 };
@@ -2883,7 +2891,7 @@ let Selectable = class extends HTMLElement {
   static get style() { return selectableCss; }
 };
 
-const toggletipCss = "*,*::after,*::before{box-sizing:border-box}";
+const toggletipCss = "*,*::after,*::before{box-sizing:border-box}:host(:focus){outline:none}";
 
 let Toggletip = class extends HTMLElement {
   constructor() {
@@ -2932,6 +2940,7 @@ let Toggletip = class extends HTMLElement {
       throw Error("button not found");
     }
     this.button = button;
+    this.host.setAttribute("tabindex", "-1");
   }
   render() {
     return (h(Fragment, null, h("dso-info-button", { id: "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary }), h("dso-tooltip", { stateless: true, for: "toggle", active: this.active, position: this.position, small: this.small }, h("slot", null))));
@@ -4822,13 +4831,14 @@ let Tooltip = class extends HTMLElement {
 
 const DsoTreeItem = ({ owner, ancestors, item, index, level, setSize }) => {
   var _a, _b, _c;
-  return (h("li", { key: item.reference, class: clsx('tree-item', { 'has-child': item.hasItems }), role: 'none' },
+  return (h("li", { key: item.id, class: clsx('tree-item', { 'has-child': item.hasItems }), 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", null)),
-    h("p", { class: "tree-content", 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-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 && !!((_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) },
+      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 :
@@ -4839,7 +4849,7 @@ const DsoTreeItem = ({ owner, ancestors, item, index, level, setSize }) => {
         : 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 }))))));
 };
 
-const treeViewCss = ":host ul{list-style-type:none}:host ul[role=tree]{padding-left:0}:host li[role=treeitem]>ul{padding-left:1.5em}:host .tree-branch-control{cursor:pointer;display:inline-block}:host .tree-content{cursor:pointer;display:inline-block;margin:8px 0}:host .tree-content a,:host .tree-content a:visited{color:#39870c;text-decoration:none}:host .tree-content a:hover,:host .tree-content a:focus{color:#676cb0;text-decoration:underline}:host .tree-content a:active{text-decoration:none}:host .tree-content dso-icon{vertical-align:text-bottom;font-size:0.75em;margin-left:0.5em}*,*::after,*::before{box-sizing:border-box}";
+const treeViewCss = ":host ul{list-style-type:none}:host ul[role=tree]{padding-left:0}:host li[role=treeitem]>ul{padding-left:1.5em}:host .tree-branch-control{cursor:pointer;display:inline-block}:host .tree-content{cursor:pointer;display:inline-block;margin:8px 0}:host .tree-content.active{font-weight:700}:host .tree-content.active:hover{text-decoration:underline}:host .tree-content.active a{text-decoration:none}:host .tree-content.selected{color:#191919;font-weight:700;text-decoration:underline}:host .tree-content.selected:hover,:host .tree-content.selected:focus{text-decoration:none}:host .tree-content a,:host .tree-content a:visited{color:#191919;text-decoration:underline}: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 dso-icon{font-size:0.75em;margin-left:0.5em;vertical-align:text-bottom}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
 
 let TreeView = class extends HTMLElement {
   constructor() {
@@ -4902,7 +4912,7 @@ let TreeView = class extends HTMLElement {
           return;
         }
         TreeView.setFocus(tree, contentElement);
-        this.clickItem.emit([...ancestors, item]);
+        this.clickItem.emit({ path: [...ancestors, item], originalEvent: event });
         return;
       }
       if (item.open) {