@dso-toolkit/core 37.0.0 → 38.0.0

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

@@ -18,7 +18,7 @@ function escapeStringRegexp(string) {
 		.replace(/-/g, '\\x2d');
 }
 
-const autosuggestCss = ".sc-dso-autosuggest-h{display:block;position:relative}ul.sc-dso-autosuggest{background-clip:padding-box;background-color:#fff;border:1px solid rgba(0, 0, 0, 0.15);border-radius:4px;box-shadow:0 6px 12px rgba(0, 0, 0, 0.175);list-style-type:none;margin-top:2px;padding:4px 0;position:absolute;left:0;right:0;top:100%;z-index:200}ul.sc-dso-autosuggest li.sc-dso-autosuggest{display:flex;justify-content:space-between;padding:4px 18px}li[aria-selected=true].sc-dso-autosuggest{cursor:pointer;background-color:#39870c}li[aria-selected=true].sc-dso-autosuggest,li[aria-selected=true].sc-dso-autosuggest .type.sc-dso-autosuggest{color:#fff}mark.sc-dso-autosuggest{font-weight:700;background-color:inherit;color:inherit;padding:0}.type.sc-dso-autosuggest{color:#666}";
+const autosuggestCss = ".sc-dso-autosuggest-h{display:block;position:relative}ul.sc-dso-autosuggest,.autosuggest-progress-box.sc-dso-autosuggest{background-clip:padding-box;background-color:#fff;border:1px solid rgba(0, 0, 0, 0.15);border-radius:4px;box-shadow:0 6px 12px rgba(0, 0, 0, 0.175);list-style-type:none;margin-top:2px;padding:4px 0;position:absolute;left:0;right:0;top:100%;z-index:200}.autosuggest-progress-box.sc-dso-autosuggest{padding:12px 8px}ul.sc-dso-autosuggest{padding:8px 0}ul.sc-dso-autosuggest li.sc-dso-autosuggest{display:flex;justify-content:space-between;padding:4px 16px}li[aria-selected=true].sc-dso-autosuggest{cursor:pointer;background-color:#39870c}li[aria-selected=true].sc-dso-autosuggest,li[aria-selected=true].sc-dso-autosuggest .type.sc-dso-autosuggest{color:#fff}mark.sc-dso-autosuggest{font-weight:700;background-color:inherit;color:inherit;padding:0}.type.sc-dso-autosuggest{color:#666}";
 
 let Autosuggest = class {
   constructor(hostRef) {
@@ -34,6 +34,14 @@ let Autosuggest = class {
      * the original object that was used to create the suggestion.
      */
     this.suggestions = [];
+    /**
+     * Shows progress indicator when fetching results.
+     */
+    this.loading = false;
+    /**
+     * To override progress indicator's default loading label.
+     */
+    this.loadingLabel = "Een moment geduld.";
     /**
      * Whether the previous suggestions will be presented when the input gets focus again.
      */
@@ -55,7 +63,7 @@ let Autosuggest = class {
       }
     };
     this.onKeyDown = (event) => {
-      if (event.defaultPrevented) {
+      if (event.defaultPrevented || this.loading) {
         return;
       }
       switch (event.key) {
@@ -229,11 +237,13 @@ let Autosuggest = class {
   }
   render() {
     const terms = this.input.value.split(' ').filter(t => t);
-    return (index.h(index.Fragment, null, index.h("slot", null), index.h("ul", { role: "listbox", id: this.listboxId, "aria-labelledby": this.labelId, ref: element => this.listbox = element, hidden: !this.showSuggestions }, this.showSuggestions
-      ? this.suggestions.map((suggestion) => (index.h("li", { role: "option", id: this.listboxItemId(suggestion), key: suggestion.value, onMouseEnter: () => this.selectSuggestion(suggestion), onMouseLeave: () => this.resetSelectedSuggestion(), onClick: () => this.pickSelectedValue(), "aria-selected": (suggestion === this.selectedSuggestion).toString(), "aria-label": suggestion.value }, index.h("span", { class: "value" }, this.markTerms(suggestion.value, terms)), suggestion.type
-        ? (index.h("span", { class: "type" }, suggestion.type))
-        : undefined)))
-      : undefined)));
+    return (index.h(index.Fragment, null, index.h("slot", null), this.loading
+      ? index.h("div", { class: "autosuggest-progress-box" }, index.h("dso-progress-indicator", { label: this.loadingLabel }))
+      : index.h("ul", { role: "listbox", id: this.listboxId, "aria-labelledby": this.labelId, ref: element => this.listbox = element, hidden: !this.showSuggestions }, this.showSuggestions
+        ? this.suggestions.map((suggestion) => (index.h("li", { role: "option", id: this.listboxItemId(suggestion), key: suggestion.value, onMouseEnter: () => this.selectSuggestion(suggestion), onMouseLeave: () => this.resetSelectedSuggestion(), onClick: () => this.pickSelectedValue(), "aria-selected": (suggestion === this.selectedSuggestion).toString(), "aria-label": suggestion.value }, index.h("span", { class: "value" }, this.markTerms(suggestion.value, terms)), suggestion.type
+          ? (index.h("span", { class: "type" }, suggestion.type))
+          : undefined)))
+        : undefined)));
   }
   get host() { return index.getElement(this); }
   static get watchers() { return {

package/dist/cjs/dso-helpcenter-panel.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0a7c679a.js');
 
-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:24px;vertical-align:top;width:24px}.open-button.extern::after{background:var(--dso-icon, var(--di-external-link-wit)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}.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:24px;vertical-align:top;width:24px}.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:24px;vertical-align:top;width:24px}.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:24px;vertical-align:top;width:24px;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:24px;vertical-align:top;width:24px}.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 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;box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2)}.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:24px;vertical-align:top;width:24px}.open-button.extern::after{background:var(--dso-icon, var(--di-external-link-wit)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px}.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:24px;vertical-align:top;width:24px}.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:24px;vertical-align:top;width:24px}.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:24px;vertical-align:top;width:24px;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:24px;vertical-align:top;width:24px}.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 {
@@ -36,7 +36,7 @@ let HelpcenterPanel = class {
     };
   }
   render() {
-    return (index.h(index.Fragment, null, index.h("button", { type: "button", onClick: this.openClick, class: `open-button ${this.isOpen}` }, index.h("dso-icon", { icon: "help" }), index.h("span", null, this.label)), index.h("div", { class: `wrapper ${this.visibility}` }, index.h("div", { class: "dimscreen" }), index.h("div", { class: `iframe-container ${this.slideState}` }, this.loadIframe ? index.h("iframe", { src: this.url }) : index.h("div", null)), index.h("button", { type: "button", class: `close-button ${this.isOpen}`, onClick: this.closeClick }, index.h("span", { class: "sr-only" }, "sluiten")))));
+    return (index.h(index.Fragment, null, index.h("button", { type: "button", onClick: this.openClick, class: `open-button ${this.isOpen}`, "aria-expanded": "false", "aria-haspopup": "dialog" }, index.h("dso-icon", { icon: "help" }), index.h("span", null, this.label)), index.h("div", { class: `wrapper ${this.visibility}` }, index.h("div", { class: "dimscreen", onClick: this.closeClick }), index.h("div", { class: `iframe-container ${this.slideState}`, "aria-live": "polite" }, this.loadIframe ? index.h("iframe", { src: this.url }) : index.h("div", null)), index.h("button", { type: "button", class: `close-button ${this.isOpen}`, onClick: this.closeClick, "aria-expanded": "true" }, index.h("span", { class: "sr-only" }, "sluiten")))));
   }
 };
 HelpcenterPanel.style = helpcenterPanelCss;

package/dist/cjs/dso-highlight-box.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-0a7c679a.js');
 const clsx_m = require('./clsx.m-b00fa5e1.js');
 
-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:#275937;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}.dso-highlight-box dso-icon{vertical-align:text-top}";
+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:24px}.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:#275937;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}.dso-highlight-box dso-icon{vertical-align:text-top}";
 
 let HighlightBox = class {
   constructor(hostRef) {

package/dist/cjs/dso-ozon-content.cjs.entry.js

@@ -157,7 +157,7 @@ class OzonContentNootNode {
     return (index.h(index.Fragment, null,
       index.h("sup", null,
         index.h("button", { type: "button", class: "toggle-note", id: noteControlsId, onClick: () => setState === null || setState === void 0 ? void 0 : setState(openNoteId === noteId ? undefined : noteId), onBlur: () => setState === null || setState === void 0 ? void 0 : setState(undefined), "aria-expanded": openNoteId === noteId ? 'true' : 'false' }, nootNummer)),
-      index.h("dso-tooltip", { active: openNoteId === noteId, for: noteControlsId, stateless: true },
+      index.h("dso-tooltip", { active: openNoteId === noteId, for: noteControlsId, stateless: true, descriptive: true },
         index.h("span", { role: "section" }, mapNodeToJsx(Array.from(node.querySelectorAll(':scope > Al')))))));
   }
 }

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

@@ -51,10 +51,9 @@ 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))));
+    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, descriptive: true, for: "toggle", active: this.active, position: this.position, small: this.small }, index.h("slot", null))));
   }
   get host() { return index.getElement(this); }
 };

package/dist/cjs/dso-toolkit.cjs.js

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["dso-map-base-layers.cjs",[[1,"dso-map-base-layers",{"baseLayers":[16]}]]],["dso-map-overlays.cjs",[[1,"dso-map-overlays",{"overlays":[16]}]]],["dso-header.cjs",[[1,"dso-header",{"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"isLoggedIn":[4,"is-logged-in"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32]}]]],["dso-toggletip.cjs",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-tree-view.cjs",[[1,"dso-tree-view",{"collection":[16]}]]],["dso-date-picker.cjs",[[2,"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],"visible":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["dso-helpcenter-panel.cjs",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]}]]],["dso-image-overlay.cjs",[[1,"dso-image-overlay",{"active":[32],"focused":[32]}]]],["dso-label.cjs",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"hover":[32]}]]],["dso-map-controls.cjs",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32]}]]],["dso-viewer-grid.cjs",[[1,"dso-viewer-grid",{"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"mainSize":[32]}]]],["dso-alert.cjs",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-attachments-counter.cjs",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest.cjs",[[6,"dso-autosuggest",{"suggestions":[16],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32]},[[4,"click","onDocumentClick"]]]]],["dso-badge.cjs",[[1,"dso-badge",{"status":[1]}]]],["dso-banner.cjs",[[1,"dso-banner",{"status":[1]}]]],["dso-highlight-box.cjs",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-ozon-content.cjs",[[2,"dso-ozon-content",{"content":[1],"inline":[516],"deleted":[516],"state":[32]}]]],["dso-progress-bar.cjs",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-dropdown-menu.cjs",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4]}]]],["dso-progress-indicator.cjs",[[1,"dso-progress-indicator",{"label":[1],"size":[1],"block":[4]}]]],["dso-tooltip.cjs",[[1,"dso-tooltip",{"position":[1],"for":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]},[[0,"click","listenClick"]]]]],["dso-info-button.cjs",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1]}]]],["dso-info_2.cjs",[[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],"toggleInfo":[64]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]],["dso-icon.cjs",[[1,"dso-icon",{"icon":[1]}]]]], options);
+  return index.bootstrapLazy([["dso-map-base-layers.cjs",[[1,"dso-map-base-layers",{"baseLayers":[16]}]]],["dso-map-overlays.cjs",[[1,"dso-map-overlays",{"overlays":[16]}]]],["dso-header.cjs",[[1,"dso-header",{"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"isLoggedIn":[4,"is-logged-in"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32]}]]],["dso-toggletip.cjs",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-tree-view.cjs",[[1,"dso-tree-view",{"collection":[16]}]]],["dso-autosuggest.cjs",[[6,"dso-autosuggest",{"suggestions":[16],"loading":[4],"loadingLabel":[1,"loading-label"],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32]},[[4,"click","onDocumentClick"]]]]],["dso-date-picker.cjs",[[2,"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],"visible":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["dso-helpcenter-panel.cjs",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]}]]],["dso-image-overlay.cjs",[[1,"dso-image-overlay",{"active":[32],"focused":[32]}]]],["dso-label.cjs",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"hover":[32]}]]],["dso-map-controls.cjs",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32]}]]],["dso-viewer-grid.cjs",[[1,"dso-viewer-grid",{"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"mainSize":[32]}]]],["dso-alert.cjs",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-attachments-counter.cjs",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-badge.cjs",[[1,"dso-badge",{"status":[1]}]]],["dso-banner.cjs",[[1,"dso-banner",{"status":[1]}]]],["dso-highlight-box.cjs",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-ozon-content.cjs",[[2,"dso-ozon-content",{"content":[1],"inline":[516],"deleted":[516],"state":[32]}]]],["dso-progress-bar.cjs",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-dropdown-menu.cjs",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4]}]]],["dso-tooltip.cjs",[[1,"dso-tooltip",{"descriptive":[516],"position":[1],"for":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]},[[0,"click","listenClick"]]]]],["dso-progress-indicator.cjs",[[1,"dso-progress-indicator",{"label":[1],"size":[1],"block":[4]}]]],["dso-info-button.cjs",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1]}]]],["dso-info_2.cjs",[[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],"toggleInfo":[64]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]],["dso-icon.cjs",[[1,"dso-icon",{"icon":[1]}]]]], options);
 });

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

@@ -1833,6 +1833,10 @@ const transitionDuration = 150;
 let Tooltip = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    /**
+     * Defines if the tooltip is descriptive. A descriptive tooltip contains a meaningful message. Tooltips that are not descriptive are hidden from screenreaders using `aria-hidden`.
+     */
+    this.descriptive = false;
     /**
      * Set position of tooltip relative to target
      */
@@ -1949,7 +1953,7 @@ let Tooltip = class {
     }
   }
   render() {
-    return (index.h(index.Host, { class: { 'hidden': this.hidden } }, index.h("div", { class: clsx_m.clsx('tooltip', { in: this.active }), role: "tooltip" }, !this.noArrow && index.h("div", { "data-popper-arrow": true, class: "tooltip-arrow" }), index.h("div", { class: clsx_m.clsx('tooltip-inner', { 'dso-small': this.small }) }, index.h("slot", null)))));
+    return (index.h(index.Host, { class: { 'hidden': this.hidden } }, index.h("div", { class: clsx_m.clsx('tooltip', { in: this.active }) }, !this.noArrow && index.h("div", { "data-popper-arrow": true, class: "tooltip-arrow" }), index.h("div", { "aria-hidden": !this.descriptive || undefined, class: clsx_m.clsx('tooltip-inner', { 'dso-small': this.small }) }, index.h("slot", null)))));
   }
   getTarget() {
     if (this.for instanceof HTMLElement) {

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["dso-map-base-layers.cjs",[[1,"dso-map-base-layers",{"baseLayers":[16]}]]],["dso-map-overlays.cjs",[[1,"dso-map-overlays",{"overlays":[16]}]]],["dso-header.cjs",[[1,"dso-header",{"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"isLoggedIn":[4,"is-logged-in"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32]}]]],["dso-toggletip.cjs",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-tree-view.cjs",[[1,"dso-tree-view",{"collection":[16]}]]],["dso-date-picker.cjs",[[2,"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],"visible":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["dso-helpcenter-panel.cjs",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]}]]],["dso-image-overlay.cjs",[[1,"dso-image-overlay",{"active":[32],"focused":[32]}]]],["dso-label.cjs",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"hover":[32]}]]],["dso-map-controls.cjs",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32]}]]],["dso-viewer-grid.cjs",[[1,"dso-viewer-grid",{"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"mainSize":[32]}]]],["dso-alert.cjs",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-attachments-counter.cjs",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest.cjs",[[6,"dso-autosuggest",{"suggestions":[16],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32]},[[4,"click","onDocumentClick"]]]]],["dso-badge.cjs",[[1,"dso-badge",{"status":[1]}]]],["dso-banner.cjs",[[1,"dso-banner",{"status":[1]}]]],["dso-highlight-box.cjs",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-ozon-content.cjs",[[2,"dso-ozon-content",{"content":[1],"inline":[516],"deleted":[516],"state":[32]}]]],["dso-progress-bar.cjs",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-dropdown-menu.cjs",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4]}]]],["dso-progress-indicator.cjs",[[1,"dso-progress-indicator",{"label":[1],"size":[1],"block":[4]}]]],["dso-tooltip.cjs",[[1,"dso-tooltip",{"position":[1],"for":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]},[[0,"click","listenClick"]]]]],["dso-info-button.cjs",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1]}]]],["dso-info_2.cjs",[[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],"toggleInfo":[64]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]],["dso-icon.cjs",[[1,"dso-icon",{"icon":[1]}]]]], options);
+  return index.bootstrapLazy([["dso-map-base-layers.cjs",[[1,"dso-map-base-layers",{"baseLayers":[16]}]]],["dso-map-overlays.cjs",[[1,"dso-map-overlays",{"overlays":[16]}]]],["dso-header.cjs",[[1,"dso-header",{"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"isLoggedIn":[4,"is-logged-in"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32]}]]],["dso-toggletip.cjs",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-tree-view.cjs",[[1,"dso-tree-view",{"collection":[16]}]]],["dso-autosuggest.cjs",[[6,"dso-autosuggest",{"suggestions":[16],"loading":[4],"loadingLabel":[1,"loading-label"],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32]},[[4,"click","onDocumentClick"]]]]],["dso-date-picker.cjs",[[2,"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],"visible":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["dso-helpcenter-panel.cjs",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]}]]],["dso-image-overlay.cjs",[[1,"dso-image-overlay",{"active":[32],"focused":[32]}]]],["dso-label.cjs",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"hover":[32]}]]],["dso-map-controls.cjs",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32]}]]],["dso-viewer-grid.cjs",[[1,"dso-viewer-grid",{"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"mainSize":[32]}]]],["dso-alert.cjs",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-attachments-counter.cjs",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-badge.cjs",[[1,"dso-badge",{"status":[1]}]]],["dso-banner.cjs",[[1,"dso-banner",{"status":[1]}]]],["dso-highlight-box.cjs",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-ozon-content.cjs",[[2,"dso-ozon-content",{"content":[1],"inline":[516],"deleted":[516],"state":[32]}]]],["dso-progress-bar.cjs",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-dropdown-menu.cjs",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4]}]]],["dso-tooltip.cjs",[[1,"dso-tooltip",{"descriptive":[516],"position":[1],"for":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]},[[0,"click","listenClick"]]]]],["dso-progress-indicator.cjs",[[1,"dso-progress-indicator",{"label":[1],"size":[1],"block":[4]}]]],["dso-info-button.cjs",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1]}]]],["dso-info_2.cjs",[[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],"toggleInfo":[64]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]],["dso-icon.cjs",[[1,"dso-icon",{"icon":[1]}]]]], options);
   });
 };
 

package/dist/collection/components/autosuggest/autosuggest.css

@@ -3,7 +3,8 @@
   position: relative;
 }
 
-ul {
+ul,
+.autosuggest-progress-box {
   background-clip: padding-box;
   background-color: #fff;
   border: 1px solid rgba(0, 0, 0, 0.15);
@@ -18,10 +19,18 @@ ul {
   top: 100%;
   z-index: 200;
 }
+
+.autosuggest-progress-box {
+  padding: 12px 8px;
+}
+
+ul {
+  padding: 8px 0;
+}
 ul li {
   display: flex;
   justify-content: space-between;
-  padding: 4px 18px;
+  padding: 4px 16px;
 }
 
 li[aria-selected=true] {

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

@@ -12,6 +12,14 @@ export class Autosuggest {
      * the original object that was used to create the suggestion.
      */
     this.suggestions = [];
+    /**
+     * Shows progress indicator when fetching results.
+     */
+    this.loading = false;
+    /**
+     * To override progress indicator's default loading label.
+     */
+    this.loadingLabel = "Een moment geduld.";
     /**
      * Whether the previous suggestions will be presented when the input gets focus again.
      */
@@ -33,7 +41,7 @@ export class Autosuggest {
       }
     };
     this.onKeyDown = (event) => {
-      if (event.defaultPrevented) {
+      if (event.defaultPrevented || this.loading) {
         return;
       }
       switch (event.key) {
@@ -209,13 +217,16 @@ export class Autosuggest {
     const terms = this.input.value.split(' ').filter(t => t);
     return (h(Fragment, null,
       h("slot", null),
-      h("ul", { role: "listbox", id: this.listboxId, "aria-labelledby": this.labelId, ref: element => this.listbox = element, hidden: !this.showSuggestions }, this.showSuggestions
-        ? this.suggestions.map((suggestion) => (h("li", { role: "option", id: this.listboxItemId(suggestion), key: suggestion.value, onMouseEnter: () => this.selectSuggestion(suggestion), onMouseLeave: () => this.resetSelectedSuggestion(), onClick: () => this.pickSelectedValue(), "aria-selected": (suggestion === this.selectedSuggestion).toString(), "aria-label": suggestion.value },
-          h("span", { class: "value" }, this.markTerms(suggestion.value, terms)),
-          suggestion.type
-            ? (h("span", { class: "type" }, suggestion.type))
-            : undefined)))
-        : undefined)));
+      this.loading
+        ? h("div", { class: "autosuggest-progress-box" },
+          h("dso-progress-indicator", { label: this.loadingLabel }))
+        : h("ul", { role: "listbox", id: this.listboxId, "aria-labelledby": this.labelId, ref: element => this.listbox = element, hidden: !this.showSuggestions }, this.showSuggestions
+          ? this.suggestions.map((suggestion) => (h("li", { role: "option", id: this.listboxItemId(suggestion), key: suggestion.value, onMouseEnter: () => this.selectSuggestion(suggestion), onMouseLeave: () => this.resetSelectedSuggestion(), onClick: () => this.pickSelectedValue(), "aria-selected": (suggestion === this.selectedSuggestion).toString(), "aria-label": suggestion.value },
+            h("span", { class: "value" }, this.markTerms(suggestion.value, terms)),
+            suggestion.type
+              ? (h("span", { class: "type" }, suggestion.type))
+              : undefined)))
+          : undefined)));
   }
   static get is() { return "dso-autosuggest"; }
   static get encapsulation() { return "scoped"; }
@@ -246,6 +257,42 @@ export class Autosuggest {
       },
       "defaultValue": "[]"
     },
+    "loading": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Shows progress indicator when fetching results."
+      },
+      "attribute": "loading",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "loadingLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "To override progress indicator's default loading label."
+      },
+      "attribute": "loading-label",
+      "reflect": false,
+      "defaultValue": "\"Een moment geduld.\""
+    },
     "suggestOnFocus": {
       "type": "boolean",
       "mutable": false,

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

@@ -1,5 +1,6 @@
 import { html } from 'lit-html';
-export function autosuggestTemplate({ suggestions, onSelect, onChange, onSearch, suggestOnFocus }, children) {
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+export function autosuggestTemplate({ suggestions, onSelect, onChange, onSearch, suggestOnFocus, loading, loadingLabel }, children) {
   return html `
     <dso-autosuggest
       .suggestions=${suggestions}
@@ -7,6 +8,8 @@ export function autosuggestTemplate({ suggestions, onSelect, onChange, onSearch,
       @dsoChange=${onChange}
       @dsoSearch=${onSearch}
       ?suggest-on-focus=${suggestOnFocus}
+      ?loading=${loading}
+      loading-label=${ifDefined(loadingLabel)}
     >
       ${children}
     </dso-autosuggest>

package/dist/collection/components/helpcenter-panel/helpcenter-panel.css

@@ -67,6 +67,7 @@
   font-family: Asap, sans-serif;
   position: fixed;
   right: 16px;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
 }
 .open-button:focus, .open-button:focus-visible {
   outline-offset: 2px;

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

@@ -29,13 +29,13 @@ export class HelpcenterPanel {
   }
   render() {
     return (h(Fragment, null,
-      h("button", { type: "button", onClick: this.openClick, class: `open-button ${this.isOpen}` },
+      h("button", { type: "button", onClick: this.openClick, class: `open-button ${this.isOpen}`, "aria-expanded": "false", "aria-haspopup": "dialog" },
         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("div", { class: "dimscreen", onClick: this.closeClick }),
+        h("div", { class: `iframe-container ${this.slideState}`, "aria-live": "polite" }, this.loadIframe ? h("iframe", { src: this.url }) : h("div", null)),
+        h("button", { type: "button", class: `close-button ${this.isOpen}`, onClick: this.closeClick, "aria-expanded": "true" },
           h("span", { class: "sr-only" }, "sluiten")))));
   }
   static get is() { return "dso-helpcenter-panel"; }

package/dist/collection/components/highlight-box/highlight-box.css

@@ -28,7 +28,7 @@
   background-color: #f2f2f2;
   margin-top: 16px;
   padding: 16px;
-  margin-bottom: 16px;
+  margin-bottom: 24px;
 }
 .dso-highlight-box.dso-white {
   background-color: #fff;

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

@@ -21,7 +21,7 @@ export class OzonContentNootNode {
     return (h(Fragment, null,
       h("sup", null,
         h("button", { type: "button", class: "toggle-note", id: noteControlsId, onClick: () => setState === null || setState === void 0 ? void 0 : setState(openNoteId === noteId ? undefined : noteId), onBlur: () => setState === null || setState === void 0 ? void 0 : setState(undefined), "aria-expanded": openNoteId === noteId ? 'true' : 'false' }, nootNummer)),
-      h("dso-tooltip", { active: openNoteId === noteId, for: noteControlsId, stateless: true },
+      h("dso-tooltip", { active: openNoteId === noteId, for: noteControlsId, stateless: true, descriptive: true },
         h("span", { role: "section" }, mapNodeToJsx(Array.from(node.querySelectorAll(':scope > Al')))))));
   }
 }

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

@@ -43,12 +43,11 @@ export class Toggletip {
       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("dso-tooltip", { stateless: true, descriptive: true, for: "toggle", active: this.active, position: this.position, small: this.small },
         h("slot", null))));
   }
   static get is() { return "dso-toggletip"; }

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

@@ -6,6 +6,10 @@ import clsx from 'clsx';
 const transitionDuration = 150;
 export class Tooltip {
   constructor() {
+    /**
+     * Defines if the tooltip is descriptive. A descriptive tooltip contains a meaningful message. Tooltips that are not descriptive are hidden from screenreaders using `aria-hidden`.
+     */
+    this.descriptive = false;
     /**
      * Set position of tooltip relative to target
      */
@@ -123,9 +127,9 @@ export class Tooltip {
   }
   render() {
     return (h(Host, { class: { 'hidden': this.hidden } },
-      h("div", { class: clsx('tooltip', { in: this.active }), role: "tooltip" },
+      h("div", { class: clsx('tooltip', { in: this.active }) },
         !this.noArrow && h("div", { "data-popper-arrow": true, class: "tooltip-arrow" }),
-        h("div", { class: clsx('tooltip-inner', { 'dso-small': this.small }) },
+        h("div", { "aria-hidden": !this.descriptive || undefined, class: clsx('tooltip-inner', { 'dso-small': this.small }) },
           h("slot", null)))));
   }
   getTarget() {
@@ -158,6 +162,24 @@ export class Tooltip {
     "$": ["tooltip.css"]
   }; }
   static get properties() { return {
+    "descriptive": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Defines if the tooltip is descriptive. A descriptive tooltip contains a meaningful message. Tooltips that are not descriptive are hidden from screenreaders using `aria-hidden`."
+      },
+      "attribute": "descriptive",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "position": {
       "type": "string",
       "mutable": false,

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

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