@dso-toolkit/core 31.0.0 → 32.1.0

package/dist/custom-elements/index.js

@@ -42,7 +42,7 @@ function clsx () {
 	return str;
 }
 
-const alertCss = "@media screen and (min-width: 481px){.alert{padding:19px 16px 19px 63px}}@media screen and (max-width: 480px){.alert{padding:63px 16px 16px}}:host{display:block;--di-status-success:url(\"data:image/svg+xml,%3csvg id='status-success' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e %3cg%3e %3ccircle cx='12' cy='12' r='11' style='fill: %2339870c'/%3e %3cpath d='M12%2c1A11%2c11%2c0%2c1%2c1%2c1%2c12%2c11%2c11%2c0%2c0%2c1%2c12%2c1m0-1A12%2c12%2c0%2c1%2c0%2c24%2c12%2c12%2c12%2c0%2c0%2c0%2c12%2c0Z' style='fill: white'/%3e %3c/g%3e %3cpath 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' style='fill: white'/%3e %3c/svg%3e\");--di-status-danger:url(\"data:image/svg+xml,%3csvg id='status-danger-line' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e %3cg%3e %3cpath d='M22.6%2c18.51c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4a1.7%2c1.7%2c0%2c0%2c1%2c3.12%2c0Z' style='fill: %23ce3f51'/%3e %3cpath d='M12%2c3a1.9%2c1.9%2c0%2c0%2c1%2c1.56%2c1l9%2c14.48c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4A1.9%2c1.9%2c0%2c0%2c1%2c12%2c3m0-1A2.89%2c2.89%2c0%2c0%2c0%2c9.6%2c3.5L.55%2c18a2.75%2c2.75%2c0%2c0%2c0-.28%2c2.81A2.59%2c2.59%2c0%2c0%2c0%2c2.65%2c22h18.7a2.59%2c2.59%2c0%2c0%2c0%2c2.38-1.21A2.75%2c2.75%2c0%2c0%2c0%2c23.45%2c18L14.4%2c3.5A2.89%2c2.89%2c0%2c0%2c0%2c12%2c2Z' style='fill: white'/%3e %3c/g%3e %3cpath d='M12%2c16a1%2c1%2c0%2c0%2c1-1-.91V8.91a1%2c1%2c0%2c0%2c1%2c2%2c0v6.18A1%2c1%2c0%2c0%2c1%2c12%2c16Zm0%2c1a1%2c1%2c0%2c1%2c0%2c1%2c1A1%2c1%2c0%2c0%2c0%2c12%2c17Z' style='fill: white'/%3e %3c/svg%3e\");--di-status-warning:url(\"data:image/svg+xml,%3csvg id='status-warning' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e %3cg%3e %3cpath d='M22.6%2c18.51c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4a1.7%2c1.7%2c0%2c0%2c1%2c3.12%2c0Z' style='fill: %23dcd400'/%3e %3cpath d='M12%2c3a1.9%2c1.9%2c0%2c0%2c1%2c1.56%2c1l9%2c14.48c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4A1.9%2c1.9%2c0%2c0%2c1%2c12%2c3m0-1A2.89%2c2.89%2c0%2c0%2c0%2c9.6%2c3.5L.55%2c18a2.75%2c2.75%2c0%2c0%2c0-.28%2c2.81A2.59%2c2.59%2c0%2c0%2c0%2c2.65%2c22h18.7a2.59%2c2.59%2c0%2c0%2c0%2c2.38-1.21A2.75%2c2.75%2c0%2c0%2c0%2c23.45%2c18L14.4%2c3.5A2.89%2c2.89%2c0%2c0%2c0%2c12%2c2Z' style='fill: white'/%3e %3c/g%3e %3cpath d='M11.73%2c15.85a1%2c1%2c0%2c0%2c1-1-.91V8.76a1%2c1%2c0%2c0%2c1%2c2%2c0v6.18A1%2c1%2c0%2c0%2c1%2c11.73%2c15.85Zm0%2c1a1%2c1%2c0%2c1%2c0%2c1%2c1A1%2c1%2c0%2c0%2c0%2c11.73%2c16.85Z'/%3e %3c/svg%3e\");--di-status-info:url(\"data:image/svg+xml,%3csvg id='status-info' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e %3cg%3e %3ccircle cx='12' cy='12' r='11' style='fill: %232b5780'/%3e %3cpath d='M12%2c1A11%2c11%2c0%2c1%2c1%2c1%2c12%2c11%2c11%2c0%2c0%2c1%2c12%2c1m0-1A12%2c12%2c0%2c1%2c0%2c24%2c12%2c12%2c12%2c0%2c0%2c0%2c12%2c0Z' style='fill: white'/%3e %3c/g%3e %3cpath d='M11%2c8a1%2c1%2c0%2c1%2c1%2c1%2c1A1%2c1%2c0%2c0%2c1%2c11%2c8Zm2%2c8.79V11.21A1.12%2c1.12%2c0%2c0%2c0%2c12%2c10a1.12%2c1.12%2c0%2c0%2c0-1%2c1.21v5.58A1.12%2c1.12%2c0%2c0%2c0%2c12%2c18%2c1.12%2c1.12%2c0%2c0%2c0%2c13%2c16.79Z' style='fill: white'/%3e %3c/svg%3e\")}:host(:not(:first-child)){margin-top:24px}*,*::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}.alert{border:1px solid transparent;line-height:24px;margin-bottom:24px;min-height:64px;position:relative}.alert:not(:first-child){margin-top:24px}.alert::before{content:\"\";left:15px;position:absolute;top:15px}.alert.alert-success{color:#191919;background-color:#e4f1d4;border-color:#e4f1d4}.alert.alert-success::before{background:var(--dso-icon, var(--di-status-success)) no-repeat;background-position:center;background-size:cover;height:32px;vertical-align:top;width:32px}.alert.alert-danger{color:#191919;background-color:#f5d8dc;border-color:#f5d8dc}.alert.alert-danger::before{background:var(--dso-icon, var(--di-status-danger)) no-repeat;background-position:center;background-size:cover;height:32px;vertical-align:top;width:32px}.alert.alert-warning{color:#191919;background-color:#f8f6cc;border-color:#f8f6cc}.alert.alert-warning::before{background:var(--dso-icon, var(--di-status-warning)) no-repeat;background-position:center;background-size:cover;height:32px;vertical-align:top;width:32px}.alert.alert-info{color:#191919;background-color:#e1ecf7;border-color:#e1ecf7}.alert.alert-info::before{background:var(--dso-icon, var(--di-status-info)) no-repeat;background-position:center;background-size:cover;height:32px;vertical-align:top;width:32px}";
+const alertCss = "@media screen and (min-width: 481px){.alert{padding:19px 16px 19px 63px}}@media screen and (max-width: 480px){.alert{padding:63px 16px 16px}}:host{display:block;--di-status-success:url(\"data:image/svg+xml,%3csvg id='status-success' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e %3cg%3e %3ccircle cx='12' cy='12' r='11' style='fill: %2339870c'/%3e %3cpath d='M12%2c1A11%2c11%2c0%2c1%2c1%2c1%2c12%2c11%2c11%2c0%2c0%2c1%2c12%2c1m0-1A12%2c12%2c0%2c1%2c0%2c24%2c12%2c12%2c12%2c0%2c0%2c0%2c12%2c0Z' style='fill: white'/%3e %3c/g%3e %3cpath 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' style='fill: white'/%3e %3c/svg%3e\");--di-status-danger:url(\"data:image/svg+xml,%3csvg id='status-danger-line' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e %3cg%3e %3cpath d='M22.6%2c18.51c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4a1.7%2c1.7%2c0%2c0%2c1%2c3.12%2c0Z' style='fill: %23ce3f51'/%3e %3cpath d='M12%2c3a1.9%2c1.9%2c0%2c0%2c1%2c1.56%2c1l9%2c14.48c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4A1.9%2c1.9%2c0%2c0%2c1%2c12%2c3m0-1A2.89%2c2.89%2c0%2c0%2c0%2c9.6%2c3.5L.55%2c18a2.75%2c2.75%2c0%2c0%2c0-.28%2c2.81A2.59%2c2.59%2c0%2c0%2c0%2c2.65%2c22h18.7a2.59%2c2.59%2c0%2c0%2c0%2c2.38-1.21A2.75%2c2.75%2c0%2c0%2c0%2c23.45%2c18L14.4%2c3.5A2.89%2c2.89%2c0%2c0%2c0%2c12%2c2Z' style='fill: white'/%3e %3c/g%3e %3cpath d='M12%2c16a1%2c1%2c0%2c0%2c1-1-.91V8.91a1%2c1%2c0%2c0%2c1%2c2%2c0v6.18A1%2c1%2c0%2c0%2c1%2c12%2c16Zm0%2c1a1%2c1%2c0%2c1%2c0%2c1%2c1A1%2c1%2c0%2c0%2c0%2c12%2c17Z' style='fill: white'/%3e %3c/svg%3e\");--di-status-warning:url(\"data:image/svg+xml,%3csvg id='status-warning' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e %3cg%3e %3cpath d='M22.6%2c18.51c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4a1.7%2c1.7%2c0%2c0%2c1%2c3.12%2c0Z' style='fill: %23dcd400'/%3e %3cpath d='M12%2c3a1.9%2c1.9%2c0%2c0%2c1%2c1.56%2c1l9%2c14.48c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4A1.9%2c1.9%2c0%2c0%2c1%2c12%2c3m0-1A2.89%2c2.89%2c0%2c0%2c0%2c9.6%2c3.5L.55%2c18a2.75%2c2.75%2c0%2c0%2c0-.28%2c2.81A2.59%2c2.59%2c0%2c0%2c0%2c2.65%2c22h18.7a2.59%2c2.59%2c0%2c0%2c0%2c2.38-1.21A2.75%2c2.75%2c0%2c0%2c0%2c23.45%2c18L14.4%2c3.5A2.89%2c2.89%2c0%2c0%2c0%2c12%2c2Z' style='fill: white'/%3e %3c/g%3e %3cpath d='M11.73%2c15.85a1%2c1%2c0%2c0%2c1-1-.91V8.76a1%2c1%2c0%2c0%2c1%2c2%2c0v6.18A1%2c1%2c0%2c0%2c1%2c11.73%2c15.85Zm0%2c1a1%2c1%2c0%2c1%2c0%2c1%2c1A1%2c1%2c0%2c0%2c0%2c11.73%2c16.85Z'/%3e %3c/svg%3e\");--di-status-info:url(\"data:image/svg+xml,%3csvg id='status-info' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e %3cg%3e %3ccircle cx='12' cy='12' r='11' style='fill: %232b5780'/%3e %3cpath d='M12%2c1A11%2c11%2c0%2c1%2c1%2c1%2c12%2c11%2c11%2c0%2c0%2c1%2c12%2c1m0-1A12%2c12%2c0%2c1%2c0%2c24%2c12%2c12%2c12%2c0%2c0%2c0%2c12%2c0Z' style='fill: white'/%3e %3c/g%3e %3cpath d='M11%2c8a1%2c1%2c0%2c1%2c1%2c1%2c1A1%2c1%2c0%2c0%2c1%2c11%2c8Zm2%2c8.79V11.21A1.12%2c1.12%2c0%2c0%2c0%2c12%2c10a1.12%2c1.12%2c0%2c0%2c0-1%2c1.21v5.58A1.12%2c1.12%2c0%2c0%2c0%2c12%2c18%2c1.12%2c1.12%2c0%2c0%2c0%2c13%2c16.79Z' style='fill: white'/%3e %3c/svg%3e\");--di-download-grijs90:url(\"data:image/svg+xml,%3csvg id='download' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23191919%3b'%3e %3cpath fill='currentColor' d='M18.72%2c10.44%2c12%2c17l-6.7-6.52C4.8%2c10%2c5%2c9.63%2c5.63%2c9.63H8.5V1.82A.8.8%2c0%2c0%2c1%2c9.28%2c1h5.44a.8.8%2c0%2c0%2c1%2c.78.82V9.61h2.87C19%2c9.6%2c19.2%2c10%2c18.72%2c10.44ZM1%2c17v6H23V17Zm16%2c3a2%2c2%2c0%2c1%2c1-2-2A2%2c2%2c0%2c0%2c1%2c17%2c20Zm5%2c0a2%2c2%2c0%2c1%2c1-2-2A2%2c2%2c0%2c0%2c1%2c22%2c20Z'/%3e %3c/svg%3e\");--di-external-link-grijs90:url(\"data:image/svg+xml,%3csvg id='external-link' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23191919%3b'%3e %3cpath fill='currentColor' d='M19%2c6V9.69c0%2c.33-.2.41-.43.17L17.06%2c8.35l-3.35%2c3.36a1%2c1%2c0%2c0%2c1-1.42%2c0%2c1%2c1%2c0%2c0%2c1%2c0-1.42l3.36-3.35L14.14%2c5.43C13.9%2c5.19%2c14%2c5%2c14.31%2c5H19V6ZM18%2c17V13a1%2c1%2c0%2c0%2c0-2%2c0v4a1%2c1%2c0%2c0%2c1-1%2c1H7a1%2c1%2c0%2c0%2c1-1-1V9A1%2c1%2c0%2c0%2c1%2c7%2c8h4a1%2c1%2c0%2c0%2c0%2c0-2H7A3%2c3%2c0%2c0%2c0%2c4%2c9v8a3%2c3%2c0%2c0%2c0%2c3%2c3h8A3%2c3%2c0%2c0%2c0%2c18%2c17Z'/%3e %3c/svg%3e\")}:host(:not(:first-child)){margin-top:24px}*,*::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}.alert{border:1px solid transparent;line-height:24px;margin-bottom:24px;min-height:64px;position:relative}.alert:not(:first-child){margin-top:24px}.alert::before{content:\"\";left:15px;position:absolute;top:15px}.alert.alert-success{color:#191919;background-color:#e4f1d4;border-color:#e4f1d4}.alert.alert-success::before{background:var(--dso-icon, var(--di-status-success)) no-repeat;background-position:center;background-size:cover;height:32px;vertical-align:top;width:32px}.alert.alert-danger{color:#191919;background-color:#f5d8dc;border-color:#f5d8dc}.alert.alert-danger::before{background:var(--dso-icon, var(--di-status-danger)) no-repeat;background-position:center;background-size:cover;height:32px;vertical-align:top;width:32px}.alert.alert-warning{color:#191919;background-color:#f8f6cc;border-color:#f8f6cc}.alert.alert-warning::before{background:var(--dso-icon, var(--di-status-warning)) no-repeat;background-position:center;background-size:cover;height:32px;vertical-align:top;width:32px}.alert.alert-info{color:#191919;background-color:#e1ecf7;border-color:#e1ecf7}.alert.alert-info::before{background:var(--dso-icon, var(--di-status-info)) no-repeat;background-position:center;background-size:cover;height:32px;vertical-align:top;width:32px}";
 
 let Alert = class extends HTMLElement {
   constructor() {
@@ -472,7 +472,7 @@ Badge.statusMap = new Map([
   ['danger', 'Fout']
 ]);
 
-const bannerCss = ":host{display:block;--di-status-danger:url(\"data:image/svg+xml,%3csvg id='status-danger-line' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e %3cg%3e %3cpath d='M22.6%2c18.51c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4a1.7%2c1.7%2c0%2c0%2c1%2c3.12%2c0Z' style='fill: %23ce3f51'/%3e %3cpath d='M12%2c3a1.9%2c1.9%2c0%2c0%2c1%2c1.56%2c1l9%2c14.48c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4A1.9%2c1.9%2c0%2c0%2c1%2c12%2c3m0-1A2.89%2c2.89%2c0%2c0%2c0%2c9.6%2c3.5L.55%2c18a2.75%2c2.75%2c0%2c0%2c0-.28%2c2.81A2.59%2c2.59%2c0%2c0%2c0%2c2.65%2c22h18.7a2.59%2c2.59%2c0%2c0%2c0%2c2.38-1.21A2.75%2c2.75%2c0%2c0%2c0%2c23.45%2c18L14.4%2c3.5A2.89%2c2.89%2c0%2c0%2c0%2c12%2c2Z' style='fill: white'/%3e %3c/g%3e %3cpath d='M12%2c16a1%2c1%2c0%2c0%2c1-1-.91V8.91a1%2c1%2c0%2c0%2c1%2c2%2c0v6.18A1%2c1%2c0%2c0%2c1%2c12%2c16Zm0%2c1a1%2c1%2c0%2c1%2c0%2c1%2c1A1%2c1%2c0%2c0%2c0%2c12%2c17Z' style='fill: white'/%3e %3c/svg%3e\");--di-status-warning:url(\"data:image/svg+xml,%3csvg id='status-warning' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e %3cg%3e %3cpath d='M22.6%2c18.51c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4a1.7%2c1.7%2c0%2c0%2c1%2c3.12%2c0Z' style='fill: %23dcd400'/%3e %3cpath d='M12%2c3a1.9%2c1.9%2c0%2c0%2c1%2c1.56%2c1l9%2c14.48c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4A1.9%2c1.9%2c0%2c0%2c1%2c12%2c3m0-1A2.89%2c2.89%2c0%2c0%2c0%2c9.6%2c3.5L.55%2c18a2.75%2c2.75%2c0%2c0%2c0-.28%2c2.81A2.59%2c2.59%2c0%2c0%2c0%2c2.65%2c22h18.7a2.59%2c2.59%2c0%2c0%2c0%2c2.38-1.21A2.75%2c2.75%2c0%2c0%2c0%2c23.45%2c18L14.4%2c3.5A2.89%2c2.89%2c0%2c0%2c0%2c12%2c2Z' style='fill: white'/%3e %3c/g%3e %3cpath d='M11.73%2c15.85a1%2c1%2c0%2c0%2c1-1-.91V8.76a1%2c1%2c0%2c0%2c1%2c2%2c0v6.18A1%2c1%2c0%2c0%2c1%2c11.73%2c15.85Zm0%2c1a1%2c1%2c0%2c1%2c0%2c1%2c1A1%2c1%2c0%2c0%2c0%2c11.73%2c16.85Z'/%3e %3c/svg%3e\")}*,*::after,*::before{box-sizing:border-box}.dso-banner{padding:16px 0;position:relative}";
+const bannerCss = ":host{display:block;--di-status-danger:url(\"data:image/svg+xml,%3csvg id='status-danger-line' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e %3cg%3e %3cpath d='M22.6%2c18.51c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4a1.7%2c1.7%2c0%2c0%2c1%2c3.12%2c0Z' style='fill: %23ce3f51'/%3e %3cpath d='M12%2c3a1.9%2c1.9%2c0%2c0%2c1%2c1.56%2c1l9%2c14.48c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4A1.9%2c1.9%2c0%2c0%2c1%2c12%2c3m0-1A2.89%2c2.89%2c0%2c0%2c0%2c9.6%2c3.5L.55%2c18a2.75%2c2.75%2c0%2c0%2c0-.28%2c2.81A2.59%2c2.59%2c0%2c0%2c0%2c2.65%2c22h18.7a2.59%2c2.59%2c0%2c0%2c0%2c2.38-1.21A2.75%2c2.75%2c0%2c0%2c0%2c23.45%2c18L14.4%2c3.5A2.89%2c2.89%2c0%2c0%2c0%2c12%2c2Z' style='fill: white'/%3e %3c/g%3e %3cpath d='M12%2c16a1%2c1%2c0%2c0%2c1-1-.91V8.91a1%2c1%2c0%2c0%2c1%2c2%2c0v6.18A1%2c1%2c0%2c0%2c1%2c12%2c16Zm0%2c1a1%2c1%2c0%2c1%2c0%2c1%2c1A1%2c1%2c0%2c0%2c0%2c12%2c17Z' style='fill: white'/%3e %3c/svg%3e\");--di-status-warning:url(\"data:image/svg+xml,%3csvg id='status-warning' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e %3cg%3e %3cpath d='M22.6%2c18.51c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4a1.7%2c1.7%2c0%2c0%2c1%2c3.12%2c0Z' style='fill: %23dcd400'/%3e %3cpath d='M12%2c3a1.9%2c1.9%2c0%2c0%2c1%2c1.56%2c1l9%2c14.48c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4A1.9%2c1.9%2c0%2c0%2c1%2c12%2c3m0-1A2.89%2c2.89%2c0%2c0%2c0%2c9.6%2c3.5L.55%2c18a2.75%2c2.75%2c0%2c0%2c0-.28%2c2.81A2.59%2c2.59%2c0%2c0%2c0%2c2.65%2c22h18.7a2.59%2c2.59%2c0%2c0%2c0%2c2.38-1.21A2.75%2c2.75%2c0%2c0%2c0%2c23.45%2c18L14.4%2c3.5A2.89%2c2.89%2c0%2c0%2c0%2c12%2c2Z' style='fill: white'/%3e %3c/g%3e %3cpath d='M11.73%2c15.85a1%2c1%2c0%2c0%2c1-1-.91V8.76a1%2c1%2c0%2c0%2c1%2c2%2c0v6.18A1%2c1%2c0%2c0%2c1%2c11.73%2c15.85Zm0%2c1a1%2c1%2c0%2c1%2c0%2c1%2c1A1%2c1%2c0%2c0%2c0%2c11.73%2c16.85Z'/%3e %3c/svg%3e\");--di-download-grijs90:url(\"data:image/svg+xml,%3csvg id='download' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23191919%3b'%3e %3cpath fill='currentColor' d='M18.72%2c10.44%2c12%2c17l-6.7-6.52C4.8%2c10%2c5%2c9.63%2c5.63%2c9.63H8.5V1.82A.8.8%2c0%2c0%2c1%2c9.28%2c1h5.44a.8.8%2c0%2c0%2c1%2c.78.82V9.61h2.87C19%2c9.6%2c19.2%2c10%2c18.72%2c10.44ZM1%2c17v6H23V17Zm16%2c3a2%2c2%2c0%2c1%2c1-2-2A2%2c2%2c0%2c0%2c1%2c17%2c20Zm5%2c0a2%2c2%2c0%2c1%2c1-2-2A2%2c2%2c0%2c0%2c1%2c22%2c20Z'/%3e %3c/svg%3e\");--di-external-link-grijs90:url(\"data:image/svg+xml,%3csvg id='external-link' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23191919%3b'%3e %3cpath fill='currentColor' d='M19%2c6V9.69c0%2c.33-.2.41-.43.17L17.06%2c8.35l-3.35%2c3.36a1%2c1%2c0%2c0%2c1-1.42%2c0%2c1%2c1%2c0%2c0%2c1%2c0-1.42l3.36-3.35L14.14%2c5.43C13.9%2c5.19%2c14%2c5%2c14.31%2c5H19V6ZM18%2c17V13a1%2c1%2c0%2c0%2c0-2%2c0v4a1%2c1%2c0%2c0%2c1-1%2c1H7a1%2c1%2c0%2c0%2c1-1-1V9A1%2c1%2c0%2c0%2c1%2c7%2c8h4a1%2c1%2c0%2c0%2c0%2c0-2H7A3%2c3%2c0%2c0%2c0%2c4%2c9v8a3%2c3%2c0%2c0%2c0%2c3%2c3h8A3%2c3%2c0%2c0%2c0%2c18%2c17Z'/%3e %3c/svg%3e\")}*,*::after,*::before{box-sizing:border-box}.dso-banner{padding:16px 0;position:relative}";
 
 let Banner = class extends HTMLElement {
   constructor() {
@@ -699,7 +699,7 @@ const localization = {
   nextMonthLabel: 'Volgende maand',
   monthSelectLabel: 'Maand',
   yearSelectLabel: 'Jaar',
-  closeLabel: 'Sluit window',
+  closeLabel: 'Sluiten',
   keyboardInstruction: 'Gebruik de pijltjestoetsen om een dag te kiezen',
   calendarHeading: 'Kies een datum',
   dayNames: [
@@ -741,7 +741,7 @@ const localization = {
   ]
 };
 
-const datePickerCss = ":host{display:block}.dso-date *,.dso-date *::before,.dso-date *::after{box-sizing:border-box}.dso-date{box-sizing:border-box;color:#191919;display:block;font-family:\"Asap\", sans-serif;margin:0;position:relative;text-align:left;width:100%}.dso-date__input{display:block;width:100%;height:40px;padding:6px 14px;font-size:16px;line-height:1.5;color:#191919;background-color:#fff;background-image:none;border:1px solid #275937;border-radius:4px;transition:border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s}.dso-date__input::-moz-placeholder{color:#666;opacity:1}.dso-date__input:-ms-input-placeholder{color:#666}.dso-date__input::-webkit-input-placeholder{color:#666}.dso-date__input::-ms-expand{background-color:transparent;border:0}.dso-date__input:focus{border-color:#275937;outline:0;box-shadow:inset 0 0 0 1px #275937}.dso-date__input[disabled],.dso-date__input[readonly],fieldset[disabled] .dso-date__input{background-color:#fff;opacity:1}.dso-date__input[disabled],fieldset[disabled] .dso-date__input{cursor:default}.dso-date__input[disabled]{border-color:#e5e5e5;color:#999}.dso-date__input[readonly]{border-width:1px}.dso-date__input[type=text]{line-height:40px}.dso-date__input[type=text]::placeholder{overflow:visible !important}.dso-date__input[size]{width:auto}.dso-date__toggle{-moz-appearance:none;-webkit-appearance:none;-webkit-user-select:none;align-items:center;appearance:none;background:transparent;border:0;border-radius:0;border-bottom-right-radius:4px;border-top-right-radius:4px;color:#39870c;cursor:pointer;display:flex;height:38px;justify-content:center;padding:0;position:absolute;right:0;transform:translateY(-50%);top:50%;user-select:none;width:38px;z-index:2}.dso-date__toggle:disabled{color:#afcf9d;cursor:pointer}.dso-date__dialog{display:flex;right:0;min-width:320px;opacity:0;position:absolute;top:100%;transform:scale(0.96) translateZ(0) translateY(-20px);transform-origin:top right;transition:transform 300ms ease, opacity 300ms ease, visibility 300ms ease;visibility:hidden;will-change:transform, opacity, visibility;z-index:600}@media (max-width: 35.9375em){.dso-date__dialog{background:rgba(25, 25, 25, 0.5);bottom:0;position:fixed;left:0;right:0;top:0;transform:translateZ(0);transform-origin:bottom center}}.dso-date__dialog.is-left{left:auto;right:0;width:auto}.dso-date__dialog.is-active{opacity:1;transform:scale(1.0001) translateZ(0) translateY(0);visibility:visible}.dso-date__dialog-content{background:#fff;border:1px solid rgba(0, 0, 0, 0.1);border-radius:4px;box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.4);margin-left:auto;margin-right:-1px;margin-top:8px;max-width:310px;min-width:290px;padding:16px;position:relative;transform:none;width:100%;z-index:600}@media (max-width: 35.9375em){.dso-date__dialog-content{border:0;border-radius:0;border-top-left-radius:4px;border-top-right-radius:4px;bottom:0;left:0;margin:0;max-width:none;min-height:26em;opacity:0;padding:0 8% 20px;position:absolute;transform:translateZ(0) translateY(100%);transition:transform 400ms ease, opacity 400ms ease, visibility 400ms ease;visibility:hidden;will-change:transform, opacity, visibility}.is-active .dso-date__dialog-content{opacity:1;transform:translateZ(0) translateY(0);visibility:visible}}.dso-date__table{border-collapse:collapse;border-spacing:0;color:#191919;font-size:1rem;font-weight:400;line-height:1.25;min-width:280px;table-layout:fixed;text-align:center;width:100%}.dso-date__table-header{font-size:0.875em;font-weight:600;height:36px;line-height:36px;text-decoration:none;text-transform:uppercase}.dso-date__cell{height:40px;padding:1px;text-align:center;width:40px}.dso-date__day{-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;border-radius:50%;box-shadow:0 0 0 1px transparent;color:#191919;cursor:pointer;display:inline-block;font-family:\"Asap\", sans-serif;font-variant-numeric:tabular-nums;font-weight:400;height:38px;line-height:0;padding:0;position:relative;text-align:center;vertical-align:middle;width:38px;z-index:1}.dso-date__day.is-today{background:transparent;height:36px;box-shadow:0 0 0 1px #39870c;width:36px}.dso-date__day:hover,.dso-date__day:active{background:#39870c;color:#fff}.dso-date__day:focus{background:transparent;box-shadow:0 0 0 2px #275937;color:#191919;height:34px;outline:0;width:34px}[aria-selected=true] .dso-date__day{background:#39870c;color:#fff}[aria-selected=true] .dso-date__day:focus{background:transparent}[aria-selected=true] .dso-date__day:focus span[aria-hidden=true]{background:#39870c;border:1px solid #fff;line-height:32px}.dso-date__day.is-outside{background:#f2f2f2;box-shadow:none;color:#666;cursor:default;pointer-events:none}.dso-date__day.is-disabled{background:#fff;cursor:default}.dso-date__day.is-disabled:hover{color:#666}.dso-date__day span[aria-hidden=true]{border-radius:50%;display:inline-block;height:34px;line-height:34px;width:34px}.dso-date__header{align-items:center;display:flex;justify-content:space-between;margin-bottom:16px;width:100%}.dso-date__header span{font-size:0.875rem}.dso-date__nav{white-space:nowrap}.dso-date__prev,.dso-date__next{-moz-appearance:none;-webkit-appearance:none;align-items:center;appearance:none;background:transparent;border:1px solid #39870c;border-radius:4px;box-sizing:border-box;color:#39870c;cursor:pointer;display:inline-flex;font-size:1em;height:32px;justify-content:center;margin-left:8px;padding:0;width:32px}@media (max-width: 35.9375em){.dso-date__prev,.dso-date__next{height:40px;width:40px}}.dso-date__prev:hover,.dso-date__prev:active,.dso-date__next:hover,.dso-date__next:active{background-color:#39870c;color:#fff}.dso-date__prev:focus,.dso-date__next:focus{background:transparent;color:#39870c}.dso-date__prev:disabled,.dso-date__prev:disabled:hover,.dso-date__next:disabled,.dso-date__next:disabled:hover{background-color:#fff;border-color:#afcf9d;color:#afcf9d;opacity:1}.dso-date__prev svg,.dso-date__next svg{margin:0 auto}.dso-date__select{display:inline-flex;height:28px;line-height:28px;position:relative}.dso-date__select span{margin-right:4px}.dso-date__select select{color:#275937;cursor:pointer;font-size:1rem;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;z-index:2}.dso-date__select select:focus+.dso-date__select-label{box-shadow:0 0 0 2px #275937}.dso-date__select select:disabled{color:#afcf9d}.dso-date__select-label{align-items:center;border-radius:4px;color:#39870c;display:flex;padding:0 4px 0 8px;pointer-events:none;position:relative;width:100%;z-index:1}.dso-date__select-label span{font-size:1.25rem;font-weight:600;line-height:1.25}.dso-date__select-label svg{width:16px;height:16px}.dso-date__mobile{align-items:center;border-bottom:1px solid rgba(0, 0, 0, 0.12);display:flex;font-size:1em;justify-content:space-between;margin-bottom:20px;margin-left:-10%;overflow:hidden;padding:12px 20px;position:relative;text-overflow:ellipsis;white-space:nowrap;width:120%}@media (min-width: 36em){.dso-date__mobile{border:0;margin:0;overflow:visible;padding:0;position:absolute;right:-16px;top:-16px;width:auto}}.dso-date__mobile-heading{display:inline-block;font-weight:600;max-width:84%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (min-width: 36em){.dso-date__mobile-heading{display:none}}.dso-date__close{-webkit-appearance:none;align-items:center;appearance:none;background-color:#fff;border:0;border-radius:50%;color:#39870c;cursor:pointer;display:flex;font-size:1em;height:32px;justify-content:center;margin-right:-4px;padding:0;width:32px}@media (min-width: 36em){.dso-date__close{margin-right:0;opacity:0}}.dso-date__close:focus{box-shadow:0 0 0 2px #275937;outline:none}@media (min-width: 36em){.dso-date__close:focus{opacity:1}}.dso-date__vhidden{border:0;clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;padding:0;position:absolute;top:0;width:1px}";
+const datePickerCss = ":host{display:block}.dso-date *,.dso-date *::before,.dso-date *::after{box-sizing:border-box}.dso-date{box-sizing:border-box;color:#191919;display:block;font-family:\"Asap\", sans-serif;margin:0;position:relative;text-align:left;width:100%}.dso-date__input{display:block;width:100%;height:40px;padding:6px 14px;font-size:16px;line-height:1.5;color:#191919;background-color:#fff;background-image:none;border:1px solid #275937;border-radius:4px;transition:border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s}.dso-date__input::-moz-placeholder{color:#666;opacity:1}.dso-date__input:-ms-input-placeholder{color:#666}.dso-date__input::-webkit-input-placeholder{color:#666}.dso-date__input::-ms-expand{background-color:transparent;border:0}.dso-date__input:focus{border-color:#275937;outline:0;box-shadow:inset 0 0 0 1px #275937}.dso-date__input[disabled],.dso-date__input[readonly],fieldset[disabled] .dso-date__input{background-color:#fff;opacity:1}.dso-date__input[disabled],fieldset[disabled] .dso-date__input{cursor:default}.dso-date__input[disabled]{border-color:#e5e5e5;color:#999}.dso-date__input[readonly]{border-width:1px}.dso-date__input[type=text]{line-height:40px}.dso-date__input[size]{width:auto}.dso-date__toggle{-moz-appearance:none;-webkit-appearance:none;-webkit-user-select:none;align-items:center;appearance:none;background:transparent;border:0;border-radius:0;border-bottom-right-radius:4px;border-top-right-radius:4px;color:#39870c;cursor:pointer;display:flex;height:38px;justify-content:center;padding:0;position:absolute;right:0;transform:translateY(-50%);top:50%;user-select:none;width:38px;z-index:2}.dso-date__toggle:disabled{color:#afcf9d;cursor:pointer}.dso-date__dialog{display:flex;right:0;min-width:320px;opacity:0;position:absolute;top:100%;transform:scale(0.96) translateZ(0) translateY(-20px);transform-origin:top right;transition:transform 300ms ease, opacity 300ms ease, visibility 300ms ease;visibility:hidden;will-change:transform, opacity, visibility;z-index:600}@media (max-width: 35.9375em){.dso-date__dialog{background:rgba(25, 25, 25, 0.5);bottom:0;position:fixed;left:0;right:0;top:0;transform:translateZ(0);transform-origin:bottom center}}.dso-date__dialog.is-left{left:auto;right:0;width:auto}.dso-date__dialog.is-active{opacity:1;transform:scale(1.0001) translateZ(0) translateY(0);visibility:visible}.dso-date__dialog-content{background:#fff;border:1px solid rgba(0, 0, 0, 0.1);border-radius:4px;box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.4);margin-left:auto;margin-right:-1px;margin-top:8px;max-width:310px;min-width:290px;padding:16px;position:relative;transform:none;width:100%;z-index:600}@media (max-width: 35.9375em){.dso-date__dialog-content{border:0;border-radius:0;border-top-left-radius:4px;border-top-right-radius:4px;bottom:0;left:0;margin:0;max-width:none;min-height:26em;opacity:0;padding:0 8% 20px;position:absolute;transform:translateZ(0) translateY(100%);transition:transform 400ms ease, opacity 400ms ease, visibility 400ms ease;visibility:hidden;will-change:transform, opacity, visibility}.is-active .dso-date__dialog-content{opacity:1;transform:translateZ(0) translateY(0);visibility:visible}}.dso-date__table{border-collapse:collapse;border-spacing:0;color:#191919;font-size:1rem;font-weight:400;line-height:1.25;min-width:280px;table-layout:fixed;text-align:center;width:100%}.dso-date__table-header{font-size:0.875em;font-weight:600;height:36px;line-height:36px;text-decoration:none;text-transform:uppercase}.dso-date__cell{height:40px;padding:1px;text-align:center;width:40px}.dso-date__day{-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;border-radius:50%;box-shadow:0 0 0 1px transparent;color:#191919;cursor:pointer;display:inline-block;font-family:\"Asap\", sans-serif;font-variant-numeric:tabular-nums;font-weight:400;height:38px;line-height:0;padding:0;position:relative;text-align:center;vertical-align:middle;width:38px;z-index:1}.dso-date__day.is-today{background:transparent;height:36px;box-shadow:0 0 0 1px #39870c;width:36px}.dso-date__day:hover,.dso-date__day:active{background:#39870c;color:#fff}.dso-date__day:focus{background:transparent;box-shadow:0 0 0 2px #275937;color:#191919;height:34px;outline:0;width:34px}[aria-selected=true] .dso-date__day{background:#39870c;color:#fff}[aria-selected=true] .dso-date__day:focus{background:transparent}[aria-selected=true] .dso-date__day:focus span[aria-hidden=true]{background:#39870c;border:1px solid #fff;line-height:32px}.dso-date__day.is-outside{background:#f2f2f2;box-shadow:none;color:#666;cursor:default;pointer-events:none}.dso-date__day.is-disabled{background:#fff;cursor:default}.dso-date__day.is-disabled:hover{color:#666}.dso-date__day span[aria-hidden=true]{border-radius:50%;display:inline-block;height:34px;line-height:34px;width:34px}.dso-date__header{align-items:center;display:flex;justify-content:space-between;margin-bottom:16px;width:100%}.dso-date__header span{font-size:0.875rem}.dso-date__nav{white-space:nowrap}.dso-date__prev,.dso-date__next{-moz-appearance:none;-webkit-appearance:none;align-items:center;appearance:none;background:transparent;border:1px solid #39870c;border-radius:4px;box-sizing:border-box;color:#39870c;cursor:pointer;display:inline-flex;font-size:1em;height:32px;justify-content:center;margin-left:8px;padding:0;width:32px}@media (max-width: 35.9375em){.dso-date__prev,.dso-date__next{height:40px;width:40px}}.dso-date__prev:hover,.dso-date__prev:active,.dso-date__next:hover,.dso-date__next:active{background-color:#39870c;color:#fff}.dso-date__prev:focus,.dso-date__next:focus{background:transparent;color:#39870c}.dso-date__prev:disabled,.dso-date__prev:disabled:hover,.dso-date__next:disabled,.dso-date__next:disabled:hover{background-color:#fff;border-color:#afcf9d;color:#afcf9d;opacity:1}.dso-date__prev svg,.dso-date__next svg{margin:0 auto}.dso-date__select{display:inline-flex;height:28px;line-height:28px;position:relative}.dso-date__select span{margin-right:4px}.dso-date__select select{color:#275937;cursor:pointer;font-size:1rem;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;z-index:2}.dso-date__select select:focus+.dso-date__select-label{box-shadow:0 0 0 2px #275937}.dso-date__select select:disabled{color:#afcf9d}.dso-date__select-label{align-items:center;border-radius:4px;color:#39870c;display:flex;padding:0 4px 0 8px;pointer-events:none;position:relative;width:100%;z-index:1}.dso-date__select-label span{font-size:1.25rem;font-weight:600;line-height:1.25}.dso-date__select-label svg{width:16px;height:16px}.dso-date__mobile{align-items:center;border-bottom:1px solid rgba(0, 0, 0, 0.12);display:flex;font-size:1em;justify-content:space-between;margin-bottom:20px;margin-left:-10%;overflow:hidden;padding:12px 20px;position:relative;text-overflow:ellipsis;white-space:nowrap;width:120%}@media (min-width: 36em){.dso-date__mobile{border:0;margin:0;overflow:visible;padding:0;position:absolute;right:-16px;top:-16px;width:auto}}.dso-date__mobile-heading{display:inline-block;font-weight:600;max-width:84%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (min-width: 36em){.dso-date__mobile-heading{display:none}}.dso-date__close{-webkit-appearance:none;align-items:center;appearance:none;background-color:#fff;border:0;border-radius:50%;color:#39870c;cursor:pointer;display:flex;font-size:1em;height:32px;justify-content:center;margin-right:-4px;padding:0;width:32px}@media (min-width: 36em){.dso-date__close{margin-right:0;opacity:0}}.dso-date__close:focus{box-shadow:0 0 0 2px #275937;outline:none}@media (min-width: 36em){.dso-date__close:focus{opacity:1}}.dso-date__vhidden{border:0;clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;padding:0;position:absolute;top:0;width:1px}";
 
 function range(from, to) {
   var result = [];
@@ -772,6 +772,8 @@ let DsoDatePicker$1 = class extends HTMLElement {
     attachShadow(this);
     this.dateChange = createEvent(this, "dateChange", 7);
     this.dsoBlur = createEvent(this, "dsoBlur", 7);
+    this.dsoKeyUp = createEvent(this, "dsoKeyUp", 7);
+    this.dsoKeyDown = createEvent(this, "dsoKeyDown", 7);
     this.dsoFocus = createEvent(this, "dsoFocus", 7);
     /**
      * Own Properties
@@ -809,6 +811,10 @@ let DsoDatePicker$1 = class extends HTMLElement {
      * Should the input be marked as required?
      */
     this.required = false;
+    /**
+     * Should the input be focused on load?
+     */
+    this.dsoAutofocus = false;
     /**
      * Date value. Must be in Dutch date format: DD-MM-YYYY.
      */
@@ -837,6 +843,20 @@ let DsoDatePicker$1 = class extends HTMLElement {
         component: "dso-date-picker",
       });
     };
+    this.handleKeyUp = (event) => {
+      event.stopPropagation();
+      this.dsoKeyUp.emit({
+        component: "dso-date-picker",
+        originalEvent: event
+      });
+    };
+    this.handleKeyDown = (event) => {
+      event.stopPropagation();
+      this.dsoKeyDown.emit({
+        component: "dso-date-picker",
+        originalEvent: event
+      });
+    };
     this.handleFocus = (event) => {
       event.stopPropagation();
       this.dsoFocus.emit({
@@ -957,12 +977,8 @@ let DsoDatePicker$1 = class extends HTMLElement {
     };
     this.handleInputChange = (e) => {
       const target = e.target;
-      // clean up any invalid characters
       target.value = target.value.replace(DISALLOWED_CHARACTERS, "");
-      const parsed = parseDutchDate(target.value);
-      if (parsed || target.value === "") {
-        this.setValue(parsed);
-      }
+      this.setValue(target.value);
     };
     this.processFocusedDayNode = (element) => {
       this.focusedDayNode = element;
@@ -1054,13 +1070,37 @@ let DsoDatePicker$1 = class extends HTMLElement {
   setFocusedDay(day) {
     this.focusedDay = clamp(day, parseDutchDate(this.min), parseDutchDate(this.max));
   }
-  setValue(date) {
-    this.value = printDutchDate(date);
-    this.dateChange.emit({
+  setValue(value) {
+    var event = {
       component: "dso-date-picker",
-      value: this.value,
-      valueAsDate: date,
-    });
+      value: "",
+      valueAsDate: undefined
+    };
+    if (value instanceof Date) {
+      event.valueAsDate = value;
+    }
+    else {
+      event.value = value;
+      event.valueAsDate = parseDutchDate(value);
+    }
+    if (event.valueAsDate) {
+      event.value = this.value = printDutchDate(event.valueAsDate);
+    }
+    else {
+      this.value = "";
+    }
+    if (!event.valueAsDate && this.required) {
+      event.error = "required";
+    }
+    if (event.value && !event.valueAsDate) {
+      event.error = "invalid";
+    }
+    this.dateChange.emit(event);
+  }
+  componentDidLoad() {
+    if (this.dsoAutofocus) {
+      this.setFocus();
+    }
   }
   /**
    * render() function
@@ -1084,7 +1124,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, 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: 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: {
         "dso-date__dialog": true,
         "is-left": this.direction === "left",
         "is-active": this.open,
@@ -1463,7 +1503,46 @@ let DropdownMenu = class extends HTMLElement {
   static get style() { return dropdownMenuCss; }
 };
 
-const highlightBoxCss = ":host{--di-external-link-grijs90:url(\"data:image/svg+xml,%3csvg id='external-link' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23191919%3b'%3e %3cpath fill='currentColor' d='M19%2c6V9.69c0%2c.33-.2.41-.43.17L17.06%2c8.35l-3.35%2c3.36a1%2c1%2c0%2c0%2c1-1.42%2c0%2c1%2c1%2c0%2c0%2c1%2c0-1.42l3.36-3.35L14.14%2c5.43C13.9%2c5.19%2c14%2c5%2c14.31%2c5H19V6ZM18%2c17V13a1%2c1%2c0%2c0%2c0-2%2c0v4a1%2c1%2c0%2c0%2c1-1%2c1H7a1%2c1%2c0%2c0%2c1-1-1V9A1%2c1%2c0%2c0%2c1%2c7%2c8h4a1%2c1%2c0%2c0%2c0%2c0-2H7A3%2c3%2c0%2c0%2c0%2c4%2c9v8a3%2c3%2c0%2c0%2c0%2c3%2c3h8A3%2c3%2c0%2c0%2c0%2c18%2c17Z'/%3e %3c/svg%3e\");--di-download-grijs90:url(\"data:image/svg+xml,%3csvg id='download' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23191919%3b'%3e %3cpath fill='currentColor' d='M18.72%2c10.44%2c12%2c17l-6.7-6.52C4.8%2c10%2c5%2c9.63%2c5.63%2c9.63H8.5V1.82A.8.8%2c0%2c0%2c1%2c9.28%2c1h5.44a.8.8%2c0%2c0%2c1%2c.78.82V9.61h2.87C19%2c9.6%2c19.2%2c10%2c18.72%2c10.44ZM1%2c17v6H23V17Zm16%2c3a2%2c2%2c0%2c1%2c1-2-2A2%2c2%2c0%2c0%2c1%2c17%2c20Zm5%2c0a2%2c2%2c0%2c1%2c1-2-2A2%2c2%2c0%2c0%2c1%2c22%2c20Z'/%3e %3c/svg%3e\");display:block}:host-context(.row.dso-equal-heights){height:100%;min-height:auto}:host-context(.row.dso-equal-heights)>.dso-highlight-box{min-height:auto}:host-context(.row.dso-equal-heights)>.dso-highlight-box.dso-has-counter{height:calc(100% - 48px)}:host-context(.row.dso-equal-heights)>.dso-highlight-box:not(.dso-has-counter){height:calc(100% - 16px)}*,*::after,*::before{box-sizing:border-box}.dso-highlight-box{background-color:#e5e5e5;margin-top:16px;padding:16px;margin-bottom:16px}.dso-highlight-box.dso-white{background-color:#fff}.dso-highlight-box.dso-yellow{background-color:#f8f6cc}.dso-highlight-box.dso-drop-shadow{box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2)}.dso-highlight-box.dso-border{background-color:#fff;border:1px solid #ccc;padding:15px}.dso-highlight-box.dso-has-counter{margin-top:48px}.dso-highlight-box.dso-has-counter{padding-top:40px;position:relative}.dso-highlight-box .dso-step-counter{background-color:#39870c;border:8px solid #79b929;border-radius:50%;box-sizing:content-box;color:#fff;font-size:1.25em;font-weight:500;height:32px;left:16px;line-height:32px;position:absolute;text-align:center;top:-24px;width:32px}";
+const helpcenterPanelCss = ":host{display:block;--di-times:url(\"data:image/svg+xml,%3csvg id='times' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M13.36%2c12l3.3-3.3A1%2c1%2c0%2c1%2c0%2c15.3%2c7.34L12%2c10.64%2c8.7%2c7.34A1%2c1%2c0%2c1%2c0%2c7.34%2c8.7l3.3%2c3.3-3.3%2c3.3A1%2c1%2c0%2c1%2c0%2c8.7%2c16.66l3.3-3.3%2c3.3%2c3.3a1%2c1%2c0%2c1%2c0%2c1.36-1.36Z'/%3e %3c/svg%3e\");--di-times-wit:url(\"data:image/svg+xml,%3csvg id='times' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: white%3b'%3e %3cpath fill='currentColor' d='M13.36%2c12l3.3-3.3A1%2c1%2c0%2c1%2c0%2c15.3%2c7.34L12%2c10.64%2c8.7%2c7.34A1%2c1%2c0%2c1%2c0%2c7.34%2c8.7l3.3%2c3.3-3.3%2c3.3A1%2c1%2c0%2c1%2c0%2c8.7%2c16.66l3.3-3.3%2c3.3%2c3.3a1%2c1%2c0%2c1%2c0%2c1.36-1.36Z'/%3e %3c/svg%3e\")}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.wrapper{height:100%;left:0;position:fixed;top:0;visibility:hidden;width:100%}.wrapper.visible{visibility:visible}.dimscreen{background-color:#000;height:100%;opacity:0.4;width:100%}.open-button{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;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;background-color:#39870c;border-color:#39870c;color:#fff;border-width:1px;border-style:solid;border-radius:4px;line-height:1.5;min-width:56px;padding:11px 15px;border:0;bottom:16px;font-family:Asap, sans-serif;position:fixed;right:16px}.open-button:focus,.open-button:focus-visible{outline-offset:2px}.open-button:active{outline:0}.open-button.extern::after,.open-button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}.open-button:focus,.open-button:focus-visible{outline-offset:2px}.open-button:active{outline:0}.open-button.extern::after,.open-button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}.open-button:hover{background-color:#275937;border-color:#275937;color:#fff}.open-button:active{background-color:#15301e;border-color:#15301e;color:#fff}.open-button[disabled],.open-button[disabled]:hover{background-color:#afcf9d;border-color:#afcf9d;color:#fff}.open-button.btn-sm{line-height:16px}.open-button.btn-sm dso-icon,.open-button.btn-sm svg.di,.open-button.btn-sm.extern::after,.open-button.btn-sm.download::after{margin-bottom:-4px;margin-top:-4px}.open-button.download::after{background:var(--dso-icon, var(--di-download-wit)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}.open-button.extern::after{background:var(--dso-icon, var(--di-external-link-wit)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}.open-button dso-icon,.open-button svg.di{margin-left:-8px;margin-right:8px}.open-button span+dso-icon,.open-button span+svg.di{margin-left:8px;margin-right:-8px}.open-button:hover{cursor:pointer}.open-button.open{display:none}.close-button{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;background-color:#fff;border-color:#39870c;color:#39870c;border-width:1px;border-style:solid;border-radius:4px;line-height:1.5;min-width:56px;padding:11px 15px;border-right:0;border-top:0;border-radius:0 0 0 8px;height:40px;min-width:40px;padding:0;position:fixed;right:0;width:40px;top:0}.close-button:focus,.close-button:focus-visible{outline-offset:2px}.close-button:active{outline:0}.close-button.extern::after,.close-button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}.close-button:hover{background-color:#39870c;border-color:#39870c;color:#fff}.close-button:active{background-color:#275937;border-color:#275937;color:#fff}.close-button[disabled],.close-button[disabled]:hover{background-color:#fff;border-color:#afcf9d;color:#afcf9d}.close-button.btn-sm{line-height:16px}.close-button.btn-sm dso-icon,.close-button.btn-sm svg.di,.close-button.btn-sm.extern::after,.close-button.btn-sm.download::after{margin-bottom:-4px;margin-top:-4px}.close-button.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}.close-button.download:hover::after{--dso-icon:var(--di-download-wit)}.close-button.download[disabled]::after{--dso-icon:var(--di-download-grasgroen-40)}.close-button.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}.close-button.extern:hover::after{--dso-icon:var(--di-external-link-wit)}.close-button.extern[disabled]::after{--dso-icon:var(--di-external-link-grasgroen-40)}.close-button dso-icon,.close-button svg.di{margin-left:-8px;margin-right:8px}.close-button span+dso-icon,.close-button span+svg.di{margin-left:8px;margin-right:-8px}.close-button::before{background:var(--dso-icon, var(--di-times)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em;content:\"\";display:inline-block;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%)}.close-button:hover,.close-button:active,.close-button:focus{cursor:pointer}.close-button:hover::before,.close-button:active::before,.close-button:focus::before{background:var(--dso-icon, var(--di-times-wit)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}.close-button.close{display:none}.iframe-container{background-color:#fff;border:0;border-left:1px solid #ccc;box-shadow:0 2px 8px 0 rgba(0, 0, 0, 0.4);height:100%;position:absolute;right:-640px;top:0;transition:right 0.5s;width:640px}.iframe-container.open{right:0}iframe{border:0;height:100%;width:100%}";
+
+const maxCssTransitionMilliseconds = 500;
+let HelpcenterPanel = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    attachShadow(this);
+    this.label = "Hulp nodig";
+    this.visibility = "hidden";
+    this.isOpen = "close";
+    this.slideState = "close";
+    this.loadIframe = false;
+    this.openClick = () => {
+      this.visibility = "visible";
+      this.slideState = "open";
+      setTimeout(() => {
+        this.isOpen = "open";
+      });
+      if (!this.loadIframe) {
+        setTimeout(() => {
+          this.loadIframe = true;
+        }, maxCssTransitionMilliseconds);
+      }
+    };
+    this.closeClick = () => {
+      this.isOpen = "close";
+      this.slideState = "close";
+      setTimeout(() => {
+        this.visibility = "hidden";
+      }, maxCssTransitionMilliseconds);
+    };
+  }
+  render() {
+    return (h(Fragment, null, h("button", { type: "button", onClick: this.openClick, class: `open-button ${this.isOpen}` }, h("dso-icon", { icon: "help" }), h("span", null, this.label)), h("div", { class: `wrapper ${this.visibility}` }, h("div", { class: "dimscreen" }), h("div", { class: `iframe-container ${this.slideState}` }, this.loadIframe ? h("iframe", { src: this.url }) : h("div", null)), h("button", { type: "button", class: `close-button ${this.isOpen}`, onClick: this.closeClick }, h("span", { class: "sr-only" }, "sluiten")))));
+  }
+  static get style() { return helpcenterPanelCss; }
+};
+
+const highlightBoxCss = ":host{--di-external-link-grijs90:url(\"data:image/svg+xml,%3csvg id='external-link' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23191919%3b'%3e %3cpath fill='currentColor' d='M19%2c6V9.69c0%2c.33-.2.41-.43.17L17.06%2c8.35l-3.35%2c3.36a1%2c1%2c0%2c0%2c1-1.42%2c0%2c1%2c1%2c0%2c0%2c1%2c0-1.42l3.36-3.35L14.14%2c5.43C13.9%2c5.19%2c14%2c5%2c14.31%2c5H19V6ZM18%2c17V13a1%2c1%2c0%2c0%2c0-2%2c0v4a1%2c1%2c0%2c0%2c1-1%2c1H7a1%2c1%2c0%2c0%2c1-1-1V9A1%2c1%2c0%2c0%2c1%2c7%2c8h4a1%2c1%2c0%2c0%2c0%2c0-2H7A3%2c3%2c0%2c0%2c0%2c4%2c9v8a3%2c3%2c0%2c0%2c0%2c3%2c3h8A3%2c3%2c0%2c0%2c0%2c18%2c17Z'/%3e %3c/svg%3e\");--di-download-grijs90:url(\"data:image/svg+xml,%3csvg id='download' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23191919%3b'%3e %3cpath fill='currentColor' d='M18.72%2c10.44%2c12%2c17l-6.7-6.52C4.8%2c10%2c5%2c9.63%2c5.63%2c9.63H8.5V1.82A.8.8%2c0%2c0%2c1%2c9.28%2c1h5.44a.8.8%2c0%2c0%2c1%2c.78.82V9.61h2.87C19%2c9.6%2c19.2%2c10%2c18.72%2c10.44ZM1%2c17v6H23V17Zm16%2c3a2%2c2%2c0%2c1%2c1-2-2A2%2c2%2c0%2c0%2c1%2c17%2c20Zm5%2c0a2%2c2%2c0%2c1%2c1-2-2A2%2c2%2c0%2c0%2c1%2c22%2c20Z'/%3e %3c/svg%3e\");display:block}:host-context(.row.dso-equal-heights){height:100%;min-height:auto}:host-context(.row.dso-equal-heights)>.dso-highlight-box{min-height:auto}:host-context(.row.dso-equal-heights)>.dso-highlight-box.dso-has-counter{height:calc(100% - 48px)}:host-context(.row.dso-equal-heights)>.dso-highlight-box:not(.dso-has-counter){height:calc(100% - 16px)}*,*::after,*::before{box-sizing:border-box}.dso-highlight-box{background-color:#f2f2f2;margin-top:16px;padding:16px;margin-bottom:16px}.dso-highlight-box.dso-white{background-color:#fff}.dso-highlight-box.dso-yellow{background-color:#f8f6cc}.dso-highlight-box.dso-drop-shadow{box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2)}.dso-highlight-box.dso-border{background-color:#fff;border:1px solid #ccc;padding:15px}.dso-highlight-box.dso-has-counter{margin-top:48px}.dso-highlight-box.dso-has-counter{padding-top:40px;position:relative}.dso-highlight-box .dso-step-counter{background-color:#39870c;border:8px solid #79b929;border-radius:50%;box-sizing:content-box;color:#fff;font-size:1.25em;font-weight:500;height:32px;left:16px;line-height:32px;position:absolute;text-align:center;top:-24px;width:32px}";
 
 let HighlightBox = class extends HTMLElement {
   constructor() {
@@ -1532,6 +1611,11 @@ const calendar = `<svg id="calendar" xmlns="http://www.w3.org/2000/svg" viewBox=
 </svg>
 `;
 
+const call = `<svg id="call" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill="currentColor" d="M23,17.86V22a1,1,0,0,1-1,1A22,22,0,0,1,1,2,1,1,0,0,1,2,1H6a1,1,0,0,1,1,.84L8.26,7A1,1,0,0,1,8,7.88L5.42,10.57a20.11,20.11,0,0,0,8,8L16.12,16a1,1,0,0,1,.87-.28l5.17,1.14A1,1,0,0,1,23,17.86Z"/>
+</svg>
+`;
+
 const caretDown = `<svg id="caret-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
   <path fill="currentColor" d="M19.71,10,13.08,16.6a1.35,1.35,0,0,1-1.9,0L4.3,9.93C3.77,9.42,4,9,4.71,9H19.28C20,9,20.23,9.43,19.71,10Z"/>
 </svg>
@@ -1542,6 +1626,11 @@ const check = `<svg id="check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2
 </svg>
 `;
 
+const checkCircle = `<svg id="check-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill="currentColor" d="M10.11,18,5.29,13.31A.92.92,0,0,1,5.3,12a1,1,0,0,1,1.41,0l3.4,3.3,7.18-7a1,1,0,0,1,1.41,0,.92.92,0,0,1,0,1.35ZM12,3a9,9,0,1,0,9,9,9,9,0,0,0-9-9m0-2A11,11,0,1,1,1,12,11,11,0,0,1,12,1ZM10.11,18,5.29,13.31A.92.92,0,0,1,5.3,12a1,1,0,0,1,1.41,0l3.4,3.3,7.18-7a1,1,0,0,1,1.41,0,.92.92,0,0,1,0,1.35Z"/>
+</svg>
+`;
+
 const chevronDown = `<svg id="chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
   <path fill="currentColor" d="M12,16,5.29,9.63a.93.93,0,0,1,0-1.35,1,1,0,0,1,1.42,0l5.29,5,5.29-5a1,1,0,0,1,1.42,0,.91.91,0,0,1,0,1.34Z"/>
 </svg>
@@ -1586,6 +1675,11 @@ const cultural = `<svg id="cultural" xmlns="http://www.w3.org/2000/svg" viewBox=
   <path fill="currentColor" d="M6,18H4V10H6Zm4-8H8v8h2Zm6,0H14v8h2Zm4,0H18v8h2Zm1,11V19H3v2H1v2H23V21Zm.09-12H2.92c-1,0-1.21-.45-.53-1l8.2-6.6a2.12,2.12,0,0,1,2.49,0L21.6,8C22.29,8.56,22.06,9,21.09,9ZM14,6a2,2,0,1,0-2,2A2,2,0,0,0,14,6Z"/>
 </svg>`;
 
+const document$1 = `<svg id="document" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill="currentColor" d="M14.11,1H5A2,2,0,0,0,3,3V21a2,2,0,0,0,2,2H19a2,2,0,0,0,2-2V7.89ZM19,21H5V3h8V9h6Zm-2-2H7V17H17Zm0-4H7V13H17Z"/>
+</svg>
+`;
+
 const download = `<svg id="download" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
   <path fill="currentColor" d="M18.72,10.44,12,17l-6.7-6.52C4.8,10,5,9.63,5.63,9.63H8.5V1.82A.8.8,0,0,1,9.28,1h5.44a.8.8,0,0,1,.78.82V9.61h2.87C19,9.6,19.2,10,18.72,10.44ZM1,17v6H23V17Zm16,3a2,2,0,1,1-2-2A2,2,0,0,1,17,20Zm5,0a2,2,0,1,1-2-2A2,2,0,0,1,22,20Z"/>
 </svg>
@@ -1631,10 +1725,7 @@ const filter = `<svg id="filter" xmlns="http://www.w3.org/2000/svg" viewBox="0 0
 `;
 
 const forbidden = `<svg id="forbidden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <g>
-    <path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm8.25,11a8.19,8.19,0,0,1-1.53,4.77L7.23,5.28a8.24,8.24,0,0,1,13,6.72ZM3.75,12A8.19,8.19,0,0,1,5.28,7.23L16.77,18.72A8.24,8.24,0,0,1,3.75,12Z" style="fill: #ce3f51"/>
-    <path d="M12,1A11,11,0,1,1,1,12,11,11,0,0,1,12,1m6.72,15.77A8.24,8.24,0,0,0,7.23,5.28L18.72,16.77M12,20.25a8.19,8.19,0,0,0,4.77-1.53L5.28,7.23a8.24,8.24,0,0,0,6.72,13M12,0A12,12,0,1,0,24,12,12,12,0,0,0,12,0ZM8.84,5.48A7.18,7.18,0,0,1,12,4.75,7.26,7.26,0,0,1,19.25,12a7.18,7.18,0,0,1-.73,3.16L8.84,5.48ZM12,19.25A7.26,7.26,0,0,1,4.75,12a7.18,7.18,0,0,1,.73-3.16l9.68,9.68a7.18,7.18,0,0,1-3.16.73Z" style="fill: #fff"/>
-  </g>
+  <path fill="currentColor" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1ZM3,12A9,9,0,0,1,5,6.39L17.61,19A8.91,8.91,0,0,1,12,21,9,9,0,0,1,3,12Zm16,5.61L6.39,5A9,9,0,0,1,19,17.61Z"/>
 </svg>
 `;
 
@@ -1757,7 +1848,7 @@ const more = `<svg id="more" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24
 `;
 
 const municipality = `<svg id="municipality" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <path fill="currentColor" d="M22.92,16a.26.26,0,0,1,0,.33h-.67v5.5a.21.21,0,0,1-.21.21H13.92a.21.21,0,0,1-.21-.21V16.28H13a.26.26,0,0,1,0-.33l1.19-1H8.92a.21.21,0,0,1-.21-.21V9.28H8a.26.26,0,0,1,0-.33L13,5a.24.24,0,0,1,.26,0L17.92,9a.26.26,0,0,1,0,.33h-.67v3.29L18,12a.24.24,0,0,1,.26,0L20,13.52V12.21a2.35,2.35,0,0,1-2-2.44C18,6.36,19.67,4,20.5,4S23,6.36,23,9.77a2.35,2.35,0,0,1-2,2.44v2.15Zm-12,1L6.22,13A.21.21,0,0,0,6,13L1.08,17a.26.26,0,0,0,0,.33h.67v5.51a.21.21,0,0,0,.21.21h8.16a.21.21,0,0,0,.21-.21v-5.5H11A.25.25,0,0,0,10.92,17ZM3,12.41c0,.79,4,.79,4,0A1.4,1.4,0,0,0,6,11.2v-2A2.35,2.35,0,0,0,8,6.77C8,3.36,6.33,1,5.5,1S3,3.36,3,6.77A2.35,2.35,0,0,0,5,9.21V11C3.9,11,3,11.63,3,12.41Z"/>
+  <path fill="currentColor" d="M16,10V9H8v1H0V23H8v1h3V18h2v6h3V23h8V10ZM4,20H2V12H4Zm4,0H6V12H8Zm5-7H11V11h2Zm5,7H16V12h2Zm4,0H20V12h2ZM22,1.88a2.55,2.55,0,0,1,2,0V.51a2.53,2.53,0,0,0-2,0c-1,.41-2,.74-3-.26V0H18V6.38L16,6V3.5L12,2,8,3.5V6L0,7.5V9H8V8h8V9h8V7.5l-5-.94V4.2c1,1,2,.67,3,.25a2.55,2.55,0,0,1,2,0V3.09a2.55,2.55,0,0,0-2,0c-1,.41-2,.75-3-.25V1.63C20,2.63,21,2.29,22,1.88ZM12,6a1,1,0,1,1,1-1A1,1,0,0,1,12,6Z"/>
 </svg>
 `;
 
@@ -1869,6 +1960,14 @@ const sound = `<svg id="sound" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2
 </svg>
 `;
 
+const statusForbidden = `<svg id="forbidden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <g>
+    <path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm8.25,11a8.19,8.19,0,0,1-1.53,4.77L7.23,5.28a8.24,8.24,0,0,1,13,6.72ZM3.75,12A8.19,8.19,0,0,1,5.28,7.23L16.77,18.72A8.24,8.24,0,0,1,3.75,12Z" style="fill: #ce3f51"/>
+    <path d="M12,1A11,11,0,1,1,1,12,11,11,0,0,1,12,1m6.72,15.77A8.24,8.24,0,0,0,7.23,5.28L18.72,16.77M12,20.25a8.19,8.19,0,0,0,4.77-1.53L5.28,7.23a8.24,8.24,0,0,0,6.72,13M12,0A12,12,0,1,0,24,12,12,12,0,0,0,12,0ZM8.84,5.48A7.18,7.18,0,0,1,12,4.75,7.26,7.26,0,0,1,19.25,12a7.18,7.18,0,0,1-.73,3.16L8.84,5.48ZM12,19.25A7.26,7.26,0,0,1,4.75,12a7.18,7.18,0,0,1,.73-3.16l9.68,9.68a7.18,7.18,0,0,1-3.16.73Z" style="fill: #fff"/>
+  </g>
+</svg>
+`;
+
 const statusDanger = `<svg id="status-danger-line" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
   <g>
     <path d="M22.6,18.51c.86,1.37.29,2.49-1.25,2.49H2.65C1.11,21,.54,19.88,1.4,18.51L10.44,4a1.7,1.7,0,0,1,3.12,0Z" style="fill: #ce3f51"/>
@@ -1960,8 +2059,10 @@ const icons = [
   { alias: 'bars', svg: bars },
   { alias: 'buildings', svg: buildings },
   { alias: 'calendar', svg: calendar },
+  { alias: 'call', svg: call },
   { alias: 'caret-down', svg: caretDown },
   { alias: 'check', svg: check },
+  { alias: 'check-circle', svg: checkCircle },
   { alias: 'chevron-down', svg: chevronDown },
   { alias: 'chevron-left', svg: chevronLeft },
   { alias: 'chevron-right', svg: chevronRight },
@@ -1971,6 +2072,7 @@ const icons = [
   { alias: 'copy', svg: copy },
   { alias: 'crown', svg: crown },
   { alias: 'cultural', svg: cultural },
+  { alias: 'document', svg: document$1 },
   { alias: 'download', svg: download },
   { alias: 'email', svg: email },
   { alias: 'energy', svg: energy },
@@ -2027,6 +2129,7 @@ const icons = [
   { alias: 'sort', svg: sort },
   { alias: 'sound', svg: sound },
   { alias: 'status-danger', svg: statusDanger },
+  { alias: 'status-forbidden', svg: statusForbidden },
   { alias: 'status-info', svg: statusInfo },
   { alias: 'status-success', svg: statusSuccess },
   { alias: 'status-warning', svg: statusWarning },
@@ -2058,7 +2161,7 @@ let Icon = class extends HTMLElement {
   static get style() { return iconCss; }
 };
 
-const infoCss = ":host{--di-times-bosgroen:url(\"data:image/svg+xml,%3csvg id='times' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23275937%3b'%3e %3cpath fill='currentColor' d='M13.36%2c12l3.3-3.3A1%2c1%2c0%2c1%2c0%2c15.3%2c7.34L12%2c10.64%2c8.7%2c7.34A1%2c1%2c0%2c1%2c0%2c7.34%2c8.7l3.3%2c3.3-3.3%2c3.3A1%2c1%2c0%2c1%2c0%2c8.7%2c16.66l3.3-3.3%2c3.3%2c3.3a1%2c1%2c0%2c1%2c0%2c1.36-1.36Z'/%3e %3c/svg%3e\");display:block;background-color:#e5e5e5;padding:16px 32px 16px 16px;position:relative}:host>button{background-color:transparent;border-style:none;padding:0;position:absolute;right:0;top:0}:host>button::before{background:var(--dso-icon, var(--di-times-bosgroen)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em;content:\"\";display:inline-block}:host(:not([active]):not([fixed])){display:none}*,*::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}";
+const infoCss = ":host{--di-times-bosgroen:url(\"data:image/svg+xml,%3csvg id='times' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23275937%3b'%3e %3cpath fill='currentColor' d='M13.36%2c12l3.3-3.3A1%2c1%2c0%2c1%2c0%2c15.3%2c7.34L12%2c10.64%2c8.7%2c7.34A1%2c1%2c0%2c1%2c0%2c7.34%2c8.7l3.3%2c3.3-3.3%2c3.3A1%2c1%2c0%2c1%2c0%2c8.7%2c16.66l3.3-3.3%2c3.3%2c3.3a1%2c1%2c0%2c1%2c0%2c1.36-1.36Z'/%3e %3c/svg%3e\");display:block;background-color:#f2f2f2;padding:16px 32px 16px 16px;position:relative}:host>button{background-color:transparent;border-style:none;padding:0;position:absolute;right:8px;top:8px}:host>button::before{background:var(--dso-icon, var(--di-times-grijs90)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em;content:\"\";display:inline-block}:host(:not([active]):not([fixed])){display:none}*,*::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 Info = class extends HTMLElement {
   constructor() {
@@ -2073,7 +2176,7 @@ let Info = class extends HTMLElement {
   static get style() { return infoCss; }
 };
 
-const infoButtonCss = ":host{display:inline-block;--di-info:url(\"data:image/svg+xml,%3csvg id='info' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M12%2c3a9%2c9%2c0%2c1%2c1-9%2c9%2c9%2c9%2c0%2c0%2c1%2c9-9m0-2A11%2c11%2c0%2c1%2c0%2c23%2c12%2c11%2c11%2c0%2c0%2c0%2c12%2c1Zm0%2c8a1%2c1%2c0%2c1%2c0-1-1A1%2c1%2c0%2c0%2c0%2c12%2c9Zm1%2c7.79V11.21A1.12%2c1.12%2c0%2c0%2c0%2c12%2c10a1.12%2c1.12%2c0%2c0%2c0-1%2c1.21v5.58A1.12%2c1.12%2c0%2c0%2c0%2c12%2c18%2c1.12%2c1.12%2c0%2c0%2c0%2c13%2c16.79Z'/%3e %3c/svg%3e\");--di-info-active:url(\"data:image/svg+xml,%3csvg id='info-active' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M23%2c12A11%2c11%2c0%2c1%2c1%2c12%2c1%2c11%2c11%2c0%2c0%2c1%2c23%2c12ZM12%2c9a1%2c1%2c0%2c1%2c0-1-1A1%2c1%2c0%2c0%2c0%2c12%2c9Zm1%2c7.79V11.21A1.12%2c1.12%2c0%2c0%2c0%2c12%2c10a1.12%2c1.12%2c0%2c0%2c0-1%2c1.21v5.58A1.12%2c1.12%2c0%2c0%2c0%2c12%2c18%2c1.12%2c1.12%2c0%2c0%2c0%2c13%2c16.79Z'/%3e %3c/svg%3e\")}*,*::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}button{background:var(--dso-icon, var(--di-info)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px;border:1px solid transparent;margin-left:8px;padding:0}button.dso-open,button:hover,button:active{--dso-icon:var(--di-info-active)}";
+const infoButtonCss = ":host{display:inline-block;--di-info:url(\"data:image/svg+xml,%3csvg id='info' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M12%2c3a9%2c9%2c0%2c1%2c1-9%2c9%2c9%2c9%2c0%2c0%2c1%2c9-9m0-2A11%2c11%2c0%2c1%2c0%2c23%2c12%2c11%2c11%2c0%2c0%2c0%2c12%2c1Zm0%2c8a1%2c1%2c0%2c1%2c0-1-1A1%2c1%2c0%2c0%2c0%2c12%2c9Zm1%2c7.79V11.21A1.12%2c1.12%2c0%2c0%2c0%2c12%2c10a1.12%2c1.12%2c0%2c0%2c0-1%2c1.21v5.58A1.12%2c1.12%2c0%2c0%2c0%2c12%2c18%2c1.12%2c1.12%2c0%2c0%2c0%2c13%2c16.79Z'/%3e %3c/svg%3e\");--di-info-active:url(\"data:image/svg+xml,%3csvg id='info-active' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M23%2c12A11%2c11%2c0%2c1%2c1%2c12%2c1%2c11%2c11%2c0%2c0%2c1%2c23%2c12ZM12%2c9a1%2c1%2c0%2c1%2c0-1-1A1%2c1%2c0%2c0%2c0%2c12%2c9Zm1%2c7.79V11.21A1.12%2c1.12%2c0%2c0%2c0%2c12%2c10a1.12%2c1.12%2c0%2c0%2c0-1%2c1.21v5.58A1.12%2c1.12%2c0%2c0%2c0%2c12%2c18%2c1.12%2c1.12%2c0%2c0%2c0%2c13%2c16.79Z'/%3e %3c/svg%3e\");--di-info-secondary:url(\"data:image/svg+xml,%3csvg id='info' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23666%3b'%3e %3cpath fill='currentColor' d='M12%2c3a9%2c9%2c0%2c1%2c1-9%2c9%2c9%2c9%2c0%2c0%2c1%2c9-9m0-2A11%2c11%2c0%2c1%2c0%2c23%2c12%2c11%2c11%2c0%2c0%2c0%2c12%2c1Zm0%2c8a1%2c1%2c0%2c1%2c0-1-1A1%2c1%2c0%2c0%2c0%2c12%2c9Zm1%2c7.79V11.21A1.12%2c1.12%2c0%2c0%2c0%2c12%2c10a1.12%2c1.12%2c0%2c0%2c0-1%2c1.21v5.58A1.12%2c1.12%2c0%2c0%2c0%2c12%2c18%2c1.12%2c1.12%2c0%2c0%2c0%2c13%2c16.79Z'/%3e %3c/svg%3e\");--di-info-active-secondary:url(\"data:image/svg+xml,%3csvg id='info-active' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23666%3b'%3e %3cpath fill='currentColor' d='M23%2c12A11%2c11%2c0%2c1%2c1%2c12%2c1%2c11%2c11%2c0%2c0%2c1%2c23%2c12ZM12%2c9a1%2c1%2c0%2c1%2c0-1-1A1%2c1%2c0%2c0%2c0%2c12%2c9Zm1%2c7.79V11.21A1.12%2c1.12%2c0%2c0%2c0%2c12%2c10a1.12%2c1.12%2c0%2c0%2c0-1%2c1.21v5.58A1.12%2c1.12%2c0%2c0%2c0%2c12%2c18%2c1.12%2c1.12%2c0%2c0%2c0%2c13%2c16.79Z'/%3e %3c/svg%3e\")}*,*::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}button{background:var(--dso-icon, var(--di-info)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px;border:1px solid transparent;margin-left:8px;padding:0}button.dso-open,button:hover,button:active{--dso-icon:var(--di-info-active)}button.dso-info-secondary{--dso-icon:var(--di-info-secondary)}button.dso-info-secondary.dso-open,button.dso-info-secondary:hover,button.dso-info-secondary:active{--dso-icon:var(--di-info-active-secondary)}";
 
 let InfoButton = class extends HTMLElement {
   constructor() {
@@ -2088,7 +2191,7 @@ let InfoButton = class extends HTMLElement {
     this.toggle.emit({ originalEvent: e, active: this.active });
   }
   render() {
-    return (h("button", { type: "button", class: clsx('btn', { 'dso-open': !!this.active }), "aria-expanded": typeof this.active === 'boolean' ? this.active.toString() : undefined, onClick: e => this.handleToggle(e) }, h("span", { class: "sr-only" }, this.label)));
+    return (h("button", { type: "button", class: clsx('btn', { 'dso-open': !!this.active, 'dso-info-secondary': !!this.secondary }), "aria-expanded": typeof this.active === 'boolean' ? this.active.toString() : undefined, onClick: e => this.handleToggle(e) }, h("span", { class: "sr-only" }, this.label)));
   }
   static get style() { return infoButtonCss; }
 };
@@ -2104,7 +2207,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 }) }, 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), title: "Verwijder", onMouseEnter: () => this.hover = true, onMouseLeave: () => this.hover = false }, h("dso-icon", { icon: "times" })))));
   }
   static get style() { return labelCss; }
 };
@@ -2237,7 +2340,8 @@ var default_fqdn_options = {
   require_tld: true,
   allow_underscores: false,
   allow_trailing_dot: false,
-  allow_numeric_tld: false
+  allow_numeric_tld: false,
+  allow_wildcard: false
 };
 function isFQDN(str, options) {
   assertString(str);
@@ -2247,6 +2351,12 @@ function isFQDN(str, options) {
   if (options.allow_trailing_dot && str[str.length - 1] === '.') {
     str = str.substring(0, str.length - 1);
   }
+  /* Remove the optional wildcard before checking validity */
+
+
+  if (options.allow_wildcard === true && str.indexOf('*.') === 0) {
+    str = str.substring(2);
+  }
 
   var parts = str.split('.');
   var tld = parts[parts.length - 1];
@@ -2257,12 +2367,12 @@ function isFQDN(str, options) {
       return false;
     }
 
-    if (!/^([a-z\u00a1-\uffff]{2,}|xn[a-z0-9-]{2,})$/i.test(tld)) {
+    if (!/^([a-z\u00A1-\u00A8\u00AA-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]{2,}|xn[a-z0-9-]{2,})$/i.test(tld)) {
       return false;
-    } // disallow spaces && special characers
+    } // disallow spaces
 
 
-    if (/[\s\u2002-\u200B\u202F\u205F\u3000\uFEFF\uDB40\uDC20\u00A9\uFFFD]/.test(tld)) {
+    if (/\s/.test(tld)) {
       return false;
     }
   } // reject numeric TLDs
@@ -2361,6 +2471,17 @@ function isIP(str) {
   return false;
 }
 
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 /*
 options for isURL method
 
@@ -2384,6 +2505,8 @@ var default_url_options = {
   allow_underscores: false,
   allow_trailing_dot: false,
   allow_protocol_relative_urls: false,
+  allow_fragments: true,
+  allow_query_components: true,
   validate_length: true
 };
 var wrapped_ipv6 = /^\[([^\]]+)\](?::([0-9]+))?$/;
@@ -2421,6 +2544,14 @@ function isURL(url, options) {
     return false;
   }
 
+  if (!options.allow_fragments && url.includes('#')) {
+    return false;
+  }
+
+  if (!options.allow_query_components && (url.includes('?') || url.includes('&'))) {
+    return false;
+  }
+
   var protocol, auth, host, hostname, port, port_str, split, ipv6;
   split = url.split('#');
   url = split.shift();
@@ -2464,7 +2595,7 @@ function isURL(url, options) {
       return false;
     }
 
-    if (split[0] === '' || split[0].substr(0, 1) === ':') {
+    if (split[0] === '') {
       return false;
     }
 
@@ -2473,6 +2604,15 @@ function isURL(url, options) {
     if (auth.indexOf(':') >= 0 && auth.split(':').length > 2) {
       return false;
     }
+
+    var _auth$split = auth.split(':'),
+        _auth$split2 = _slicedToArray(_auth$split, 2),
+        user = _auth$split2[0],
+        password = _auth$split2[1];
+
+    if (user === '' && password === '') {
+      return false;
+    }
   }
 
   hostname = split.join('@');
@@ -2493,7 +2633,7 @@ function isURL(url, options) {
     }
   }
 
-  if (port_str !== null) {
+  if (port_str !== null && port_str.length > 0) {
     port = parseInt(port_str, 10);
 
     if (!/^[0-9]+$/.test(port_str) || port <= 0 || port > 65535) {
@@ -2503,16 +2643,16 @@ function isURL(url, options) {
     return false;
   }
 
+  if (options.host_whitelist) {
+    return checkHost(host, options.host_whitelist);
+  }
+
   if (!isIP(host) && !isFQDN(host, options) && (!ipv6 || !isIP(ipv6, 6))) {
     return false;
   }
 
   host = host || ipv6;
 
-  if (options.host_whitelist && !checkHost(host, options.host_whitelist)) {
-    return false;
-  }
-
   if (options.host_blacklist && checkHost(host, options.host_blacklist)) {
     return false;
   }
@@ -2521,7 +2661,7 @@ function isURL(url, options) {
 }
 
 function transformDescriptionNote(body) {
-  body.querySelectorAll('.od-Al > div.noot').forEach((nootElement, index) => {
+  body.querySelectorAll('div.noot').forEach((nootElement, index) => {
     const contentElement = nootElement.nextElementSibling;
     if (!(contentElement instanceof HTMLDivElement && contentElement.classList.value === 'noot_popup')) {
       return;
@@ -2794,7 +2934,7 @@ let Toggletip = class extends HTMLElement {
     this.button = button;
   }
   render() {
-    return (h(Fragment, null, h("dso-info-button", { id: "toggle", onClick: this.click, label: this.label, active: this.active }), h("dso-tooltip", { stateless: true, for: "toggle", active: this.active, position: this.position, small: this.small }, h("slot", null))));
+    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))));
   }
   get host() { return this; }
   static get style() { return toggletipCss; }
@@ -4681,23 +4821,22 @@ let Tooltip = class extends HTMLElement {
 };
 
 const DsoTreeItem = ({ owner, ancestors, item, index, level, setSize }) => {
-  var _a, _b;
-  return (h("li", { key: item.reference, class: clsx('tree-item', { 'has-child': item.hasItems }), role: "treeitem", "aria-expanded": item.hasItems ? '' + !!item.open : undefined, "aria-level": level, "aria-setsize": setSize, "aria-posinset": index + 1 },
+  var _a, _b, _c;
+  return (h("li", { key: item.reference, 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, onClick: (e) => owner.itemClick(e, ancestors, item) },
+    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) },
       item.href
-        ? h("a", { href: item.href }, item.label)
-        : h("span", null, item.label), (_a = item.icons) === null || _a === void 0 ? void 0 :
-      _a.map((icon) => h("dso-icon", { icon: icon.icon, title: icon.label }))),
-    h("ul", { role: "group", "aria-busy": item.loading ? 'true' : undefined },
-      item.hasItems && !item.items && item.loading
+        ? 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 }))),
+    item.open &&
+      h(Fragment, null, item.hasItems && !item.items && item.loading
         ? h("dso-progress-indicator", { size: "small", label: "Resultaten laden: een moment geduld alstublieft." })
-        : undefined,
-      item.open && ((_b = item.items) === null || _b === void 0 ? void 0 : _b.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" }, (_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}";
@@ -4753,11 +4892,16 @@ let TreeView = class extends HTMLElement {
       event.preventDefault();
     };
     this.itemClick = (event, ancestors, item) => {
-      var _a;
       if (!(event.target instanceof HTMLElement)) {
         return;
       }
-      if (event.target.classList.contains('tree-content') || ((_a = event.target.parentElement) === null || _a === void 0 ? void 0 : _a.classList.contains('tree-content'))) {
+      const contentElement = event.target.closest('.tree-content');
+      if (contentElement) {
+        const tree = event.composedPath().find(item => (item instanceof HTMLElement) ? item.className === 'dso-tree' : false);
+        if (!(contentElement instanceof HTMLParagraphElement) || !(tree instanceof HTMLElement)) {
+          return;
+        }
+        TreeView.setFocus(tree, contentElement);
         this.clickItem.emit([...ancestors, item]);
         return;
       }
@@ -4799,27 +4943,27 @@ let TreeView = class extends HTMLElement {
     TreeView.setFocus(tree, focusableItems[index]);
   }
   static expandItemOrFocusChild(tree, target) {
-    var _a, _b;
-    if (((_a = target === null || target === void 0 ? void 0 : target.parentElement) === null || _a === void 0 ? void 0 : _a.getAttribute('aria-expanded')) === 'true') {
+    var _a;
+    if ((target === null || target === void 0 ? void 0 : target.getAttribute('aria-expanded')) === 'true') {
       TreeView.moveFocus(tree, target, 'next');
     }
     else {
-      const controlElement = (_b = target.previousElementSibling) === null || _b === void 0 ? void 0 : _b.firstElementChild;
+      const controlElement = (_a = target.previousElementSibling) === null || _a === void 0 ? void 0 : _a.firstElementChild;
       if (controlElement instanceof HTMLElement) {
         controlElement.click();
       }
     }
   }
   static collapseItemOrFocusParent(tree, target) {
-    var _a, _b, _c, _d;
-    if (((_a = target === null || target === void 0 ? void 0 : target.parentElement) === null || _a === void 0 ? void 0 : _a.getAttribute('aria-expanded')) === 'true') {
-      const controlElement = (_b = target.previousElementSibling) === null || _b === void 0 ? void 0 : _b.firstElementChild;
+    var _a, _b, _c;
+    if ((target === null || target === void 0 ? void 0 : target.getAttribute('aria-expanded')) === 'true') {
+      const controlElement = (_a = target.previousElementSibling) === null || _a === void 0 ? void 0 : _a.firstElementChild;
       if (controlElement instanceof HTMLElement) {
         controlElement.click();
       }
     }
     else {
-      const parentTarget = (_d = (_c = target === null || target === void 0 ? void 0 : target.parentElement) === null || _c === void 0 ? void 0 : _c.parentElement) === null || _d === void 0 ? void 0 : _d.previousElementSibling;
+      const parentTarget = (_c = (_b = target === null || target === void 0 ? void 0 : target.parentElement) === null || _b === void 0 ? void 0 : _b.parentElement) === null || _c === void 0 ? void 0 : _c.previousElementSibling;
       if (parentTarget instanceof HTMLElement) {
         TreeView.setFocus(tree, parentTarget);
       }
@@ -4855,12 +4999,13 @@ const DsoAttachmentsCounter = /*@__PURE__*/proxyCustomElement(AttachmentsCounter
 const DsoAutosuggest = /*@__PURE__*/proxyCustomElement(Autosuggest, [6,"dso-autosuggest",{"suggestions":[16],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32]},[[4,"click","onDocumentClick"]]]);
 const DsoBadge = /*@__PURE__*/proxyCustomElement(Badge, [1,"dso-badge",{"status":[1]}]);
 const DsoBanner = /*@__PURE__*/proxyCustomElement(Banner, [1,"dso-banner",{"status":[1]}]);
-const DsoDatePicker = /*@__PURE__*/proxyCustomElement(DsoDatePicker$1, [1,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"value":[513],"min":[1],"max":[1],"activeFocus":[32],"focusedDay":[32],"open":[32]},[[6,"click","handleDocumentClick"]]]);
+const DsoDatePicker = /*@__PURE__*/proxyCustomElement(DsoDatePicker$1, [1,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"dsoAutofocus":[4,"dso-autofocus"],"value":[1537],"min":[1],"max":[1],"activeFocus":[32],"focusedDay":[32],"open":[32]},[[6,"click","handleDocumentClick"]]]);
 const DsoDropdownMenu = /*@__PURE__*/proxyCustomElement(DropdownMenu, [1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4]}]);
+const DsoHelpcenterPanel = /*@__PURE__*/proxyCustomElement(HelpcenterPanel, [1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]}]);
 const DsoHighlightBox = /*@__PURE__*/proxyCustomElement(HighlightBox, [1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]);
 const DsoIcon = /*@__PURE__*/proxyCustomElement(Icon, [1,"dso-icon",{"icon":[1]}]);
 const DsoInfo = /*@__PURE__*/proxyCustomElement(Info, [1,"dso-info",{"fixed":[516],"active":[516]}]);
-const DsoInfoButton = /*@__PURE__*/proxyCustomElement(InfoButton, [1,"dso-info-button",{"active":[1540],"label":[1]}]);
+const DsoInfoButton = /*@__PURE__*/proxyCustomElement(InfoButton, [1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1]}]);
 const DsoLabel = /*@__PURE__*/proxyCustomElement(Label, [1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"hover":[32]}]);
 const DsoMapBaseLayers = /*@__PURE__*/proxyCustomElement(MapBaseLayers, [1,"dso-map-base-layers",{"baseLayers":[16],"selectedBaseLayer":[1040]}]);
 const DsoMapControls = /*@__PURE__*/proxyCustomElement(MapControls, [1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32]}]);
@@ -4869,7 +5014,7 @@ const DsoOzonContent = /*@__PURE__*/proxyCustomElement(OzonContent, [0,"dso-ozon
 const DsoProgressBar = /*@__PURE__*/proxyCustomElement(ProgressBar, [1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]);
 const DsoProgressIndicator = /*@__PURE__*/proxyCustomElement(Progressindicator, [1,"dso-progress-indicator",{"label":[1],"size":[1],"block":[4]}]);
 const DsoSelectable = /*@__PURE__*/proxyCustomElement(Selectable, [1,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32]}]);
-const DsoToggletip = /*@__PURE__*/proxyCustomElement(Toggletip, [1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"active":[32]}]);
+const DsoToggletip = /*@__PURE__*/proxyCustomElement(Toggletip, [1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]);
 const DsoTooltip = /*@__PURE__*/proxyCustomElement(Tooltip, [1,"dso-tooltip",{"position":[1],"for":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32]},[[0,"click","listenClick"]]]);
 const DsoTreeView = /*@__PURE__*/proxyCustomElement(TreeView, [1,"dso-tree-view",{"collection":[16]}]);
 const defineCustomElements = (opts) => {
@@ -4882,6 +5027,7 @@ const defineCustomElements = (opts) => {
   DsoBanner,
   DsoDatePicker,
   DsoDropdownMenu,
+  DsoHelpcenterPanel,
   DsoHighlightBox,
   DsoIcon,
   DsoInfo,
@@ -4905,4 +5051,4 @@ const defineCustomElements = (opts) => {
   }
 };
 
-export { DsoAlert, DsoAttachmentsCounter, DsoAutosuggest, DsoBadge, DsoBanner, DsoDatePicker, DsoDropdownMenu, DsoHighlightBox, DsoIcon, DsoInfo, DsoInfoButton, DsoLabel, DsoMapBaseLayers, DsoMapControls, DsoMapOverlays, DsoOzonContent, DsoProgressBar, DsoProgressIndicator, DsoSelectable, DsoToggletip, DsoTooltip, DsoTreeView, defineCustomElements };
+export { DsoAlert, DsoAttachmentsCounter, DsoAutosuggest, DsoBadge, DsoBanner, DsoDatePicker, DsoDropdownMenu, DsoHelpcenterPanel, DsoHighlightBox, DsoIcon, DsoInfo, DsoInfoButton, DsoLabel, DsoMapBaseLayers, DsoMapControls, DsoMapOverlays, DsoOzonContent, DsoProgressBar, DsoProgressIndicator, DsoSelectable, DsoToggletip, DsoTooltip, DsoTreeView, defineCustomElements };