@dso-toolkit/core 29.0.1 → 31.1.0

package/dist/dso-toolkit/p-a8a0e909.entry.js

@@ -0,0 +1 @@
+import{r as t,c as n,h as o}from"./p-a40eeb32.js";function e(t){return(e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function r(t){if(!("string"==typeof t||t instanceof String)){var n=e(t);throw null===t?n="null":"object"===n&&(n=t.constructor.name),new TypeError("Expected a string but received a ".concat(n))}}function i(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=arguments.length>1?arguments[1]:void 0;for(var o in n)void 0===t[o]&&(t[o]=n[o]);return t}var a={require_tld:!0,allow_underscores:!1,allow_trailing_dot:!1,allow_numeric_tld:!1},l="(?:[0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])",d="(".concat(l,"[.]){3}").concat(l),s=new RegExp("^".concat(d,"$")),u="(?:[0-9a-fA-F]{1,4})",c=new RegExp("^("+"(?:".concat(u,":){7}(?:").concat(u,"|:)|")+"(?:".concat(u,":){6}(?:").concat(d,"|:").concat(u,"|:)|")+"(?:".concat(u,":){5}(?::").concat(d,"|(:").concat(u,"){1,2}|:)|")+"(?:".concat(u,":){4}(?:(:").concat(u,"){0,1}:").concat(d,"|(:").concat(u,"){1,3}|:)|")+"(?:".concat(u,":){3}(?:(:").concat(u,"){0,2}:").concat(d,"|(:").concat(u,"){1,4}|:)|")+"(?:".concat(u,":){2}(?:(:").concat(u,"){0,3}:").concat(d,"|(:").concat(u,"){1,5}|:)|")+"(?:".concat(u,":){1}(?:(:").concat(u,"){0,4}:").concat(d,"|(:").concat(u,"){1,6}|:)|")+"(?::((?::".concat(u,"){0,5}:").concat(d,"|(?::").concat(u,"){1,7}|:))")+")(%[0-9a-zA-Z-.:]{1,})?$");function f(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";if(r(t),!(n=String(n)))return f(t,4)||f(t,6);if("4"===n){if(!s.test(t))return!1;var o=t.split(".").sort((function(t,n){return t-n}));return o[3]<=255}return"6"===n&&!!c.test(t)}var p={protocols:["http","https","ftp"],require_tld:!0,require_protocol:!1,require_host:!0,require_port:!1,require_valid_protocol:!0,allow_underscores:!1,allow_trailing_dot:!1,allow_protocol_relative_urls:!1,validate_length:!0},h=/^\[([^\]]+)\](?::([0-9]+))?$/;function m(t,n){for(var o=0;o<n.length;o++){var e=n[o];if(t===e||"[object RegExp]"===Object.prototype.toString.call(e)&&e.test(t))return!0}return!1}const v=[function(t){return t.querySelectorAll("div.noot").forEach(((t,n)=>{const o=t.nextElementSibling;if(!(o instanceof HTMLDivElement&&"noot_popup"===o.classList.value))return;const e=t.querySelector("a");if(!(e instanceof HTMLAnchorElement))return;const r=o.querySelector(":scope > .od-Al");if(!(r instanceof HTMLDivElement&&"od-Al"===r.classList.value))return;t.replaceWith(...Array.from(t.childNodes));const i=document.createElement("div");i.replaceChildren(...Array.from(r.childNodes)),r.replaceChildren(i),o.replaceWith(r);const a=document.createElement("sup");a.replaceChildren(...Array.from(e.childNodes)),e.replaceChildren(a);const l=(n+1).toString(10),[d,s]=[`dso-ozon-term-${l}`,`dso-ozon-content-${l}`];e.setAttribute("href",`#${d}`),e.setAttribute("id",d),e.setAttribute("aria-controls",s),e.setAttribute("aria-expanded","false"),null==r||r.setAttribute("id",s)})),t},function(t){return t.querySelectorAll("span[data-verwijst-naar-documentcomponent]").forEach((t=>{const n=document.createElement("a");n.href=`#${t.getAttribute("data-verwijst-naar-documentcomponent")}`,n.replaceChildren(...Array.from(t.childNodes)),t.replaceWith(n)})),t}];class g{constructor(t){this.anchorClick=t,this.domParser=new DOMParser,this.eventHandlers=[this.handleValidUrls,this.handleDescriptionNoteClick,this.handleContentAnchor]}setContent(t){this.content=v.reduce(((t,n)=>n(t)),this.domParser.parseFromString(t,"text/html").body).children}handleClickEvent(t){this.eventHandlers.some((n=>n.bind(this)(t.composedPath(),t)))}handleDescriptionNoteClick(t,n){var o;const e=t.findIndex(this.isHostElement);if(-1===e)return!1;const r=null===(o=t.slice(0,e))||void 0===o?void 0:o.find((t=>t instanceof HTMLAnchorElement&&t.classList.contains("noot")));return!!r&&(n.preventDefault(),r.classList.contains("dso-open")?(r.classList.remove("dso-open"),r.setAttribute("aria-expanded","false")):(r.classList.add("dso-open"),r.setAttribute("aria-expanded","true")),!0)}handleContentAnchor(t,n){if(t.some((t=>t instanceof HTMLAnchorElement))){n.preventDefault();const o=t.find((t=>t instanceof HTMLAnchorElement)).href;return this.anchorClick.emit({href:o,documentComponent:o.substr(o.indexOf("#")+1),originalEvent:n}),!0}return!1}handleValidUrls(t){var n;const o=t.findIndex(this.isHostElement);return-1!==o&&(null===(n=t.slice(0,o))||void 0===n?void 0:n.some((t=>{var n;return t instanceof HTMLAnchorElement&&function(t,n){if(r(t),!t||/[\s<>]/.test(t))return!1;if(0===t.indexOf("mailto:"))return!1;if((n=i(n,p)).validate_length&&t.length>=2083)return!1;var o,e,l,d,s,u,c,v;if(c=t.split("#"),t=c.shift(),c=t.split("?"),t=c.shift(),(c=t.split("://")).length>1){if(o=c.shift().toLowerCase(),n.require_valid_protocol&&-1===n.protocols.indexOf(o))return!1}else{if(n.require_protocol)return!1;if("//"===t.substr(0,2)){if(!n.allow_protocol_relative_urls)return!1;c[0]=t.substr(2)}}if(""===(t=c.join("://")))return!1;if(c=t.split("/"),""===(t=c.shift())&&!n.require_host)return!0;if((c=t.split("@")).length>1){if(n.disallow_auth)return!1;if(""===c[0]||":"===c[0].substr(0,1))return!1;if((e=c.shift()).indexOf(":")>=0&&e.split(":").length>2)return!1}u=null,v=null;var g=(d=c.join("@")).match(h);if(g?(l="",v=g[1],u=g[2]||null):(l=(c=d.split(":")).shift(),c.length&&(u=c.join(":"))),null!==u){if(s=parseInt(u,10),!/^[0-9]+$/.test(u)||s<=0||s>65535)return!1}else if(n.require_port)return!1;return!(!(f(l)||function(t,n){r(t),(n=i(n,a)).allow_trailing_dot&&"."===t[t.length-1]&&(t=t.substring(0,t.length-1));var o=t.split("."),e=o[o.length-1];if(n.require_tld){if(o.length<2)return!1;if(!/^([a-z\u00a1-\uffff]{2,}|xn[a-z0-9-]{2,})$/i.test(e))return!1;if(/[\s\u2002-\u200B\u202F\u205F\u3000\uFEFF\uDB40\uDC20\u00A9\uFFFD]/.test(e))return!1}return!(!n.allow_numeric_tld&&/^\d+$/.test(e))&&o.every((function(t){return!(t.length>63||!/^[a-z_\u00a1-\uffff0-9-]+$/i.test(t)||/[\uff01-\uff5e]/.test(t)||/^-|-$/.test(t)||!n.allow_underscores&&/_/.test(t))}))}(l,n)||v&&f(v,6))||(l=l||v,n.host_whitelist&&!m(l,n.host_whitelist)||n.host_blacklist&&m(l,n.host_blacklist)))}(null!==(n=t.getAttribute("href"))&&void 0!==n?n:"",{require_tld:!1,require_protocol:!0})})))}isHostElement(t){return t instanceof HTMLElement&&"DSO-OZON-CONTENT"===t.tagName}}let b=class{constructor(o){t(this,o),this.anchorClick=n(this,"anchorClick",7)}handleClick(t){this.transformer.handleClickEvent(t)}componentWillLoad(){this.transformer=new g(this.anchorClick)}componentWillRender(){this.transformer.setContent(this.content)}render(){return o("div",{class:"dso-rich-content",ref:t=>this.container=t})}componentDidRender(){var t;const n=this.transformer.content;this.container&&n?this.container.replaceChildren(...Array.from(n)):null===(t=this.container)||void 0===t||t.replaceChildren()}};b.style='dso-ozon-content{display:block}.noot{text-decoration:none}.noot:not(.dso-open)+.od-Al{display:none}.noot.dso-open+.od-Al{display:block}.noot+.od-Al{margin:4px 0;padding:8px 32px 8px 8px;position:relative}.noot+.od-Al>a{display:block;height:24px;position:absolute;right:0;text-align:center;top:0;width:24px}.noot+.od-Al>a::before{background:var(--dso-icon, var(--di-times-zwart)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em;content:"";display:block}.noot+.od-Al{background-color:#ebf3e6}.od-Term{font-weight:700}.od-Definitie,.od-Tussenkop{font-style:italic}.od-Inhoud,.od-Inhoud>.od-Lijst,.od-IntIoRef,.od-Lidnr,.od-LiNr,.od-Opschrift,.od-Tussenkop{display:inline}.od-Al,.od-Lijstaanhef{margin-bottom:0.75em}.od-IntIoRef{border-bottom:1px dotted}.od-LiNummer{float:left;min-width:0.7em;padding-right:0.3em;text-align:right}.od-Figuur img{margin-left:25px;max-width:100%;height:auto}.od-Figuur .od-Bijschrift{font-size:0.75rem;margin-left:25px;padding-bottom:2.5rem}.od-Tabel thead{font-weight:600}.od-Kadertekst{border:1px solid #e5e5e5;margin-bottom:1rem;padding:1rem}';export{b as dso_ozon_content}

package/dist/dso-toolkit/p-ad8f467f.entry.js

@@ -0,0 +1 @@
+import{h as e,F as t,r as o,c as n}from"./p-a40eeb32.js";import{c as r}from"./p-4070c1e5.js";const i=({owner:o,ancestors:n,item:s,index:a,level:l,setSize:c})=>{var d,u,v;return e("li",{key:s.reference,class:r("tree-item",{"has-child":s.hasItems}),role:"none"},e("div",{class:"tree-branch-control"},s.hasItems?e("div",{onClick:e=>o.itemClick(e,n,s)},e("dso-icon",{icon:s.open?"chevron-down":"chevron-right"})):e("dso-icon",null)),e("p",{class:"tree-content",tabindex:1===l&&0===a?0:-1,role:"treeitem","aria-expanded":s.hasItems?""+(!!s.open&&!!(null===(d=s.items)||void 0===d?void 0:d.length)):void 0,"aria-level":l,"aria-setsize":c,"aria-posinset":a+1,"aria-busy":s.loading?"true":void 0,onClick:e=>o.itemClick(e,n,s)},s.href?e("a",{href:s.href,tabindex:"-1"},s.label):e("span",null,s.label),null===(u=s.icons)||void 0===u?void 0:u.map((t=>e("dso-icon",{icon:t.icon,title:t.label})))),s.open&&e(t,null,s.hasItems&&!s.items&&s.loading?e("dso-progress-indicator",{size:"small",label:"Resultaten laden: een moment geduld alstublieft."}):e("ul",{role:"group"},null===(v=s.items)||void 0===v?void 0:v.map(((t,r,a)=>e(i,{owner:o,ancestors:[...n,s],item:t,index:r,level:l+1,setSize:a.length}))))))};let s=class{constructor(e){o(this,e),this.openItem=n(this,"openItem",7),this.closeItem=n(this,"closeItem",7),this.clickItem=n(this,"clickItem",7),this.keyDownListener=e=>{if(e.defaultPrevented)return;const t=e.composedPath().find((e=>e instanceof HTMLElement&&"dso-tree"===e.className));if(e.target instanceof HTMLParagraphElement&&t instanceof HTMLElement){switch(e.key){case"ArrowDown":s.moveFocus(t,e.target,"next");break;case"ArrowUp":s.moveFocus(t,e.target,"previous");break;case"ArrowRight":s.expandItemOrFocusChild(t,e.target);break;case"ArrowLeft":s.collapseItemOrFocusParent(t,e.target);break;case"End":s.moveFocus(t,e.target,"last");break;case"Home":s.moveFocus(t,e.target,"first");break;case"Enter":case" ":e.target.click();break;default:if(1===(o=e.key).length&&o.match(/\S/)&&s.setFocusByFirstCharacter(t,e.target,e.key,e.shiftKey))break;return}var o;e.preventDefault()}},this.itemClick=(e,t,o)=>{if(!(e.target instanceof HTMLElement))return;const n=e.target.closest(".tree-content");if(n){const r=e.composedPath().find((e=>e instanceof HTMLElement&&"dso-tree"===e.className));if(!(n instanceof HTMLParagraphElement&&r instanceof HTMLElement))return;return s.setFocus(r,n),void this.clickItem.emit([...t,o])}o.open?this.closeItem.emit([...t,o]):this.openItem.emit([...t,o])}}static setFocus(e,t){t&&(Array.from(e.querySelectorAll("p")).filter((e=>0===e.tabIndex)).forEach((e=>e.tabIndex=-1)),t.tabIndex=0,t.focus())}static moveFocus(e,t,o){const n=Array.from(e.querySelectorAll("p")).filter((e=>e.offsetWidth>0&&e.offsetHeight>0));let r=0;switch(o){case"first":r=0;break;case"previous":r=n.indexOf(t)-1;break;case"next":r=n.indexOf(t)+1;break;case"last":r=n.length-1}s.setFocus(e,n[r])}static expandItemOrFocusChild(e,t){var o;if("true"===(null==t?void 0:t.getAttribute("aria-expanded")))s.moveFocus(e,t,"next");else{const e=null===(o=t.previousElementSibling)||void 0===o?void 0:o.firstElementChild;e instanceof HTMLElement&&e.click()}}static collapseItemOrFocusParent(e,t){var o,n,r;if("true"===(null==t?void 0:t.getAttribute("aria-expanded"))){const e=null===(o=t.previousElementSibling)||void 0===o?void 0:o.firstElementChild;e instanceof HTMLElement&&e.click()}else{const o=null===(r=null===(n=null==t?void 0:t.parentElement)||void 0===n?void 0:n.parentElement)||void 0===r?void 0:r.previousElementSibling;o instanceof HTMLElement&&s.setFocus(e,o)}}static setFocusByFirstCharacter(e,t,o,n){const r=Array.from(e.querySelectorAll("p")).filter((e=>e.offsetWidth>0&&e.offsetHeight>0));n&&r.reverse();const i=r.indexOf(t);o=o.toLowerCase();let a=r.find(((e,t)=>{var n;return t>i&&(null===(n=e.textContent)||void 0===n?void 0:n.toLowerCase().startsWith(o))}));return a||(a=r.find(((e,t)=>{var n;return t<i&&(null===(n=e.textContent)||void 0===n?void 0:n.toLowerCase().startsWith(o))}))),!!a&&(s.setFocus(e,a),!0)}render(){var t;return e("div",{id:"tree",class:"dso-tree",onKeyDown:e=>this.keyDownListener(e)},e("ul",{role:"tree","aria-label":"Objectenboom"},null===(t=this.collection)||void 0===t?void 0:t.map(((t,o)=>e(i,{owner:this,ancestors:[],item:t,index:o,level:1,setSize:this.collection.length})))))}};s.style=":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}";export{s as dso_tree_view}

package/dist/dso-toolkit/p-e2dc97c4.entry.js

@@ -0,0 +1 @@
+import{r as t,h as s,F as i,g as o}from"./p-a40eeb32.js";let h=class{constructor(s){t(this,s),this.active=!1,this.label="Toelichting",this.position="right",this.click=()=>{this.active?this.close():this.open()},this.open=()=>{this.active=!0,this.host.addEventListener("keydown",this.keyDownListener),this.host.addEventListener("focusout",this.focusOutListener)},this.close=()=>{this.host.removeEventListener("focusout",this.focusOutListener),this.host.removeEventListener("keydown",this.keyDownListener),this.active=!1},this.focusOutListener=t=>{this.host.contains(t.relatedTarget)||this.close()},this.keyDownListener=t=>{t.defaultPrevented||"Escape"!=t.key||(this.close(),this.button.focus(),t.preventDefault())}}componentDidRender(){var t,s,i;const o=null===(t=this.host.shadowRoot)||void 0===t?void 0:t.querySelector("dso-info-button");if(!o)throw Error("dso-info-button not found");this.infoButton=o;const h=null===(i=null===(s=this.infoButton)||void 0===s?void 0:s.shadowRoot)||void 0===i?void 0:i.querySelector("button");if(!h)throw Error("button not found");this.button=h}render(){return s(i,null,s("dso-info-button",{id:"toggle",onClick:this.click,label:this.label,active:this.active,secondary:this.secondary}),s("dso-tooltip",{stateless:!0,for:"toggle",active:this.active,position:this.position,small:this.small},s("slot",null)))}get host(){return o(this)}};h.style="*,*::after,*::before{box-sizing:border-box}";export{h as dso_toggletip}

package/dist/dso-toolkit/p-faf19a1d.entry.js

@@ -0,0 +1 @@
+import{r as t,c as e,h as o,F as i,f as s,g as a}from"./p-a40eeb32.js";import{c as l}from"./p-7b37bd52.js";let r=class{constructor(o){t(this,o),this.close=e(this,"close",7)}render(){return o(i,null,!this.fixed&&o("button",{type:"button",onClick:t=>this.close.emit(t)},o("span",{class:"sr-only"},"Sluiten")),o("slot",null))}};r.style=":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}";let n=class{constructor(o){t(this,o),this.change=e(this,"dsoChange",7),this.infoActive=!1,this.fallbackIdentifier=l("DsoSelectable")}componentDidLoad(){var t;null===(t=this.mutationObserver)||void 0===t||t.disconnect(),this.mutationObserver=new MutationObserver((()=>s(this.host))),this.mutationObserver.observe(this.host,{childList:!0}),this.setIndeterminate()}disconnectedCallback(){var t;null===(t=this.mutationObserver)||void 0===t||t.disconnect()}setIndeterminate(){this.input instanceof HTMLInputElement&&"checkbox"==this.type&&(this.input.indeterminate=!!this.indeterminate)}render(){var t;const e=!!this.host.querySelector('[slot="info"]');return o(i,null,o("input",{type:this.type,id:this.getIdentifier(),value:this.value,name:this.name,"aria-invalid":null===(t=this.invalid)||void 0===t?void 0:t.toString(),"aria-describedby":this.describedById,disabled:this.disabled,required:this.required,checked:this.checked,onChange:t=>this.change.emit(t),ref:t=>this.input=t}),o("label",{htmlFor:this.getIdentifier()},o("slot",null)),e&&o(i,null,!this.infoFixed&&o("dso-info-button",{active:this.infoActive,onToggle:t=>this.infoActive=t.detail.active}),o("dso-info",{fixed:this.infoFixed,active:this.infoActive,onClose:()=>this.infoActive=!1},o("slot",{name:"info"}))))}getIdentifier(){var t;return null!==(t=this.identifier)&&void 0!==t?t:this.fallbackIdentifier}get host(){return a(this)}static get watchers(){return{indeterminate:["setIndeterminate"]}}};n.style=':host{display:block;padding:0 0 0 32px;position:relative}:host .dso-selectable-options{list-style:none;margin-top:8px;padding-left:0}:host .dso-selectable-options li+li{margin-top:8px}:host label{font-weight:400;line-height:24px;margin:0}:host input[type=checkbox][disabled]+label::before,:host input[type=checkbox][disabled]:active+label::before,:host input[type=checkbox][disabled]:focus+label::before,:host input[type=radio][disabled]+label::before,:host input[type=radio][disabled]:active+label::before,:host input[type=radio][disabled]:focus+label::before{background-color:#fff;box-shadow:0 0 0 2px #e5e5e5}:host input[type=checkbox],:host input[type=radio]{height:24px;left:0;margin:0;opacity:0;position:absolute;top:0;width:24px;z-index:1;zoom:1}:host input[type=checkbox]:not([disabled]),:host input[type=radio]:not([disabled]){cursor:pointer}:host input[type=checkbox]+label,:host input[type=radio]+label{display:inline;font-style:normal;padding-left:0}:host input[type=checkbox]+label::before,:host input[type=radio]+label::before{background:#fff;border:0;box-shadow:0 0 0 2px var(--dso-selectable-color, #275937);content:"";height:20px;left:2px;position:absolute;top:2px;width:20px}:host input[type=checkbox]:focus,:host input[type=radio]:focus{outline:0}:host input[type=checkbox]:focus+label::before,:host input[type=radio]:focus+label::before{box-shadow:0 0 0 3px var(--dso-selectable-color, #275937);height:18px;left:3px;top:3px;width:18px}:host input[type=checkbox]:active+label::before,:host input[type=checkbox].active+label::before,:host input[type=radio]:active+label::before,:host input[type=radio].active+label::before{background-color:#ebf3e6;box-shadow:0 0 0 1px #275937;height:22px;left:1px;top:1px;width:22px}:host input[type=checkbox]+label::before{border-radius:4px}:host input[type=checkbox]+label::after{background:transparent;content:"";left:6px;opacity:0;position:absolute;top:6px;zoom:1}:host input[type=checkbox]:checked+label::after,:host input[type=checkbox]:indeterminate+label::after{opacity:1}:host input[type=checkbox]:checked+label::after{border:solid;border-color:var(--dso-selectable-color, #39870c);border-top-color:transparent;border-width:0 0 3px 3px;height:8px;transform:rotate(-45deg);width:13px}:host input[type=checkbox]:indeterminate+label::after{background-color:var(--dso-selectable-color, #39870c);height:12px;width:12px}:host input[type=radio]+label::before{border-radius:50%}:host input[type=radio]+label::after{background-color:transparent;border-radius:50%;content:"";height:12px;left:6px;opacity:0;position:absolute;top:6px;width:12px;zoom:1}:host input[type=radio]:checked+label::after{background-color:var(--dso-selectable-color, #39870c);opacity:1}:host>dso-info{float:none;margin:8px 16px 0 -32px;width:calc(100% + 32px)}:host(:not(:last-child)){margin-bottom:8px}*,*::after,*::before{box-sizing:border-box}';export{r as dso_info,n as dso_selectable}

package/dist/esm/dso-alert.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, h } from './index-61410be2.js';
 import { c as clsx } from './clsx.m-071989db.js';
 
-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 {
   constructor(hostRef) {

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

@@ -70,90 +70,77 @@ debounce.debounce = debounce;
 
 var debounce_1 = debounce;
 
-const autosuggestCss = "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}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}";
+function escapeStringRegexp(string) {
+	if (typeof string !== 'string') {
+		throw new TypeError('Expected a string');
+	}
+
+	// Escape characters with special meaning either inside or outside character sets.
+	// Use a simple backslash escape when it’s always valid, and a `\xnn` escape when the simpler form would be disallowed by Unicode patterns’ stricter grammar.
+	return string
+		.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&')
+		.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:10}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}";
 
 let Autosuggest = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.selected = createEvent(this, "selected", 7);
+    this.selectEmitter = createEvent(this, "dsoSelect", 7);
+    this.changeEmitter = createEvent(this, "dsoChange", 7);
+    /**
+     * The suggestions for the value of the slotted input element
+     */
+    this.suggestions = [];
     /**
      * Whether the previous suggestions will be presented when the input gets focus again.
      */
     this.suggestOnFocus = false;
-    this.suggestions = [];
-    this.selectedIndex = -1;
-    this.terms = [];
     this.showSuggestions = false;
     this.listboxId = v4();
     this.inputId = v4();
     this.labelId = v4();
-    this.debouncedFetchSuggestions = debounce_1((terms) => (this.fetchSuggestions ? this.fetchSuggestions(terms.join(" ")) : Promise.resolve([]))
-      .then((result) => {
-      this.suggestions = result.map((suggestion, index) => ({
-        value: suggestion.value,
-        type: suggestion.type,
-        selected: false,
-        id: `${index}-${this.inputId}`,
-      }));
-      this.terms = terms;
-      this.openSuggestions();
-    })
-      .catch(() => {
-      this.closeSuggestions();
-      this.suggestions = [];
-    }), 200);
+    this.debouncedEmitValue = debounce_1((value) => this.changeEmitter.emit(value), 200);
     this.onInput = (event) => {
-      var _a;
       if (!(event.target instanceof HTMLInputElement)) {
-        throw new Error("event.target not a instance of HTMLInputElement");
+        throw new Error("event.target is not instanceof HTMLInputElement");
       }
-      this.debouncedFetchSuggestions((_a = `${event.target.value}`.match(/(\S+)/g)) !== null && _a !== void 0 ? _a : []);
+      this.debouncedEmitValue(event.target.value.match(/(\S+)/g) ? event.target.value : '');
     };
     this.onFocusIn = () => {
       if (this.suggestOnFocus) {
         this.openSuggestions();
       }
     };
-    this.onMouseEnterOption = (event) => {
-      if (event.target instanceof HTMLElement) {
-        const id = event.target.id;
-        this.setSelectedSuggestion(this.suggestions.findIndex((s) => s.id == id));
-      }
-    };
-    this.onMouseLeaveOption = () => {
-      this.setSelectedSuggestion(-1);
-    };
-    this.onClickOption = () => {
-      this.pickSelectedValue();
-    };
     this.onKeyDown = (event) => {
       if (event.defaultPrevented) {
         return;
       }
       switch (event.key) {
-        case "ArrowDown":
+        case 'ArrowDown':
           if (!this.showSuggestions) {
-            this.openSuggestions();
+            this.openSuggestions('first');
+          }
+          else {
+            this.selectNextSuggestion();
           }
-          this.setSelectedSuggestion(this.selectedIndex >= this.suggestions.length - 1
-            ? 0
-            : this.selectedIndex + 1);
           break;
-        case "ArrowUp":
+        case 'ArrowUp':
           if (!this.showSuggestions) {
-            this.openSuggestions();
+            this.openSuggestions('last');
+          }
+          else {
+            this.selectPreviousSuggestion();
           }
-          this.setSelectedSuggestion(this.selectedIndex <= 0
-            ? this.suggestions.length - 1
-            : this.selectedIndex - 1);
           break;
-        case "Tab":
+        case 'Tab':
           this.closeSuggestions();
           return;
-        case "Escape":
+        case 'Escape':
           this.closeSuggestions();
           break;
-        case "Enter":
+        case 'Enter':
           this.pickSelectedValue();
           break;
         default:
@@ -162,6 +149,15 @@ let Autosuggest = class {
       event.preventDefault();
     };
   }
+  suggestionsWatcher() {
+    this.resetSelectedSuggestion();
+    if (!this.showSuggestions && this.suggestions.length > 0) {
+      this.openSuggestions();
+    }
+    else if (this.showSuggestions && this.suggestions.length === 0) {
+      this.closeSuggestions();
+    }
+  }
   onDocumentClick(event) {
     if (this.showSuggestions &&
       this.listbox &&
@@ -172,7 +168,7 @@ let Autosuggest = class {
     }
   }
   connectedCallback() {
-    const input = this.host.querySelectorAll('input[type="text"]')[0];
+    const input = this.host.querySelector('input[type="text"]');
     if (!(input instanceof HTMLInputElement)) {
       throw new ReferenceError("Mandatory text input not found");
     }
@@ -210,61 +206,95 @@ let Autosuggest = class {
     this.input.removeEventListener("focusin", this.onFocusIn);
   }
   markTerms(suggestionValue, terms) {
-    if (!suggestionValue || !terms || terms.length == 0) {
-      return [""];
+    if (!suggestionValue || !terms || terms.length === 0) {
+      return [''];
     }
-    const termRegex = new RegExp(`(${terms[0]})`, "gi");
+    const termRegex = new RegExp(`(${escapeStringRegexp(terms[0])})`, 'gi');
     return suggestionValue.split(termRegex).map((valuePart) => {
       if (!valuePart) {
-        return "";
+        return '';
       }
       if (termRegex.test(valuePart)) {
         return h("mark", null, valuePart);
       }
-      if (terms.length == 1) {
+      if (terms.length === 1) {
         return h("span", null, valuePart);
       }
       return this.markTerms(valuePart, terms.slice(1));
     });
   }
-  setSelectedSuggestion(index) {
-    this.suggestions.forEach((suggestion) => (suggestion.selected = false));
-    if (index < 0 || index >= this.suggestions.length) {
-      this.selectedIndex = -1;
-      this.input.setAttribute("aria-activedescendant", "");
+  selectSuggestion(suggestion) {
+    this.selectedSuggestion = suggestion;
+    this.input.setAttribute("aria-activedescendant", this.listboxItemId(suggestion));
+  }
+  selectFirstSuggestion() {
+    this.selectedSuggestion = this.suggestions[0];
+    if (this.selectedSuggestion) {
+      this.input.setAttribute('aria-activedescendant', this.listboxItemId(this.selectedSuggestion));
     }
-    else {
-      this.selectedIndex = index;
-      this.suggestions[index].selected = true;
-      this.input.setAttribute("aria-activedescendant", this.suggestions[index].id);
+  }
+  selectLastSuggestion() {
+    this.selectedSuggestion = this.suggestions[this.suggestions.length - 1];
+    if (this.selectedSuggestion) {
+      this.input.setAttribute('aria-activedescendant', this.listboxItemId(this.selectedSuggestion));
     }
-    this.suggestions = [...this.suggestions];
   }
-  openSuggestions() {
+  selectNextSuggestion() {
+    var _a;
+    const index = this.selectedSuggestion ? this.suggestions.indexOf(this.selectedSuggestion) : -1;
+    this.selectedSuggestion = (_a = this.suggestions[index + 1]) !== null && _a !== void 0 ? _a : this.suggestions[0];
+    if (this.selectedSuggestion) {
+      this.input.setAttribute('aria-activedescendant', this.listboxItemId(this.selectedSuggestion));
+    }
+  }
+  selectPreviousSuggestion() {
+    var _a;
+    const index = this.selectedSuggestion ? this.suggestions.indexOf(this.selectedSuggestion) : 0;
+    this.selectedSuggestion = (_a = this.suggestions[index - 1]) !== null && _a !== void 0 ? _a : this.suggestions[this.suggestions.length - 1];
+    if (this.selectedSuggestion) {
+      this.input.setAttribute('aria-activedescendant', this.listboxItemId(this.selectedSuggestion));
+    }
+  }
+  resetSelectedSuggestion() {
+    this.selectedSuggestion = undefined;
+    this.input.setAttribute('aria-activedescendant', '');
+  }
+  openSuggestions(selectSuggestion) {
     this.showSuggestions = this.suggestions.length > 0;
-    this.input.setAttribute("aria-expanded", `${this.showSuggestions}`);
-    this.setSelectedSuggestion(-1);
+    this.input.setAttribute("aria-expanded", this.showSuggestions.toString());
+    if (selectSuggestion === 'first') {
+      this.selectFirstSuggestion();
+    }
+    else if (selectSuggestion === 'last') {
+      this.selectLastSuggestion();
+    }
   }
   closeSuggestions() {
     this.showSuggestions = false;
     this.input.setAttribute("aria-expanded", "false");
-    this.setSelectedSuggestion(-1);
+    this.selectFirstSuggestion();
   }
   pickSelectedValue() {
-    var _a;
-    if (this.selectedIndex >= 0) {
-      this.input.value = this.suggestions[this.selectedIndex].value;
-      (_a = this.selected) === null || _a === void 0 ? void 0 : _a.emit(this.input.value);
+    if (this.selectedSuggestion) {
+      this.selectEmitter.emit(this.selectedSuggestion);
     }
-    this.suggestions = [];
     this.closeSuggestions();
   }
+  listboxItemId(suggestion) {
+    return `${this.inputId}-${this.suggestions.indexOf(suggestion) + 1}`;
+  }
   render() {
-    return (h(Fragment, null, h("slot", null), h("ul", { role: "listbox", id: this.listboxId, "aria-labelledby": this.labelId, ref: (e) => (this.listbox = e), style: { display: this.showSuggestions ? "block" : "none" } }, this.showSuggestions
-      ? this.suggestions.map((suggestion) => (h("li", { role: "option", id: suggestion.id, key: suggestion.id, onMouseEnter: this.onMouseEnterOption, onMouseLeave: this.onMouseLeaveOption, onClick: this.onClickOption, "aria-selected": "" + suggestion.selected, "aria-label": suggestion.value }, h("span", { class: "value" }, this.markTerms(suggestion.value, this.terms)), suggestion.type ? (h("span", { class: "type" }, suggestion.type)) : undefined)))
+    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)));
   }
   get host() { return getElement(this); }
+  static get watchers() { return {
+    "suggestions": ["suggestionsWatcher"]
+  }; }
 };
 Autosuggest.style = autosuggestCss;
 

package/dist/esm/dso-banner.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, h } from './index-61410be2.js';
 import { c as clsx } from './clsx.m-071989db.js';
 
-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 {
   constructor(hostRef) {

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

@@ -47,9 +47,9 @@ function printDutchDate(date) {
   if (!date) {
     return '';
   }
-  var d = date.getDate().toString(10);
-  var m = (date.getMonth() + 1).toString(10);
-  var y = date.getFullYear().toString(10);
+  var d = date.getDate().toString(10).padStart(2, '0');
+  var m = (date.getMonth() + 1).toString(10).padStart(2, '0');
+  var y = date.getFullYear().toString(10).padStart(2, '0');
   return `${d}-${m}-${y}`;
 }
 /**
@@ -198,7 +198,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: [
@@ -269,6 +269,8 @@ let DsoDatePicker = class {
     registerInstance(this, hostRef);
     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
@@ -306,6 +308,10 @@ let DsoDatePicker = class {
      * 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.
      */
@@ -334,6 +340,20 @@ let DsoDatePicker = class {
         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({
@@ -454,12 +474,8 @@ let DsoDatePicker = class {
     };
     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;
@@ -551,13 +567,37 @@ let DsoDatePicker = class {
   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
@@ -581,7 +621,7 @@ let DsoDatePicker = class {
     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,

package/dist/esm/dso-icon.entry.js

@@ -558,11 +558,13 @@ let Icon = class {
     registerInstance(this, hostRef);
   }
   render() {
-    const icon = icons.find(i => i.alias === this.icon);
-    if (!icon) {
-      throw new TypeError(`Unknown svg: ${this.icon}`);
+    if (this.icon) {
+      const icon = icons.find(i => i.alias === this.icon);
+      if (!icon) {
+        throw new TypeError(`Unknown svg: ${this.icon}`);
+      }
+      return h("span", { class: "icon-container", innerHTML: icon.svg });
     }
-    return h("span", { class: "icon-container", innerHTML: icon.svg });
   }
 };
 Icon.style = iconCss;

package/dist/esm/dso-info-button.entry.js

@@ -0,0 +1,22 @@
+import { r as registerInstance, c as createEvent, h } from './index-61410be2.js';
+import { c as clsx } from './clsx.m-071989db.js';
+
+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 {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.toggle = createEvent(this, "toggle", 7);
+    this.label = 'Toelichting bij optie';
+  }
+  handleToggle(e) {
+    this.active = !this.active;
+    this.toggle.emit({ originalEvent: e, active: this.active });
+  }
+  render() {
+    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)));
+  }
+};
+InfoButton.style = infoButtonCss;
+
+export { InfoButton as dso_info_button };

package/dist/esm/{dso-info_3.entry.js → dso-info_2.entry.js}

@@ -1,5 +1,4 @@
 import { r as registerInstance, c as createEvent, h, F as Fragment, f as forceUpdate, g as getElement } from './index-61410be2.js';
-import { c as clsx } from './clsx.m-071989db.js';
 import { c as createIdentifier } from './create-identifier-22acd3a3.js';
 
 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}";
@@ -15,24 +14,6 @@ let Info = class {
 };
 Info.style = 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:1.5em;vertical-align:top;width:1.5em;border:1px solid transparent;margin-left:8px;min-width:16px;padding:0}button.dso-open,button:hover,button:active{--dso-icon:var(--di-info-active)}";
-
-let InfoButton = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.toggle = createEvent(this, "toggle", 7);
-    this.label = 'Toelichting bij optie';
-  }
-  handleToggle(e) {
-    this.active = !this.active;
-    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)));
-  }
-};
-InfoButton.style = infoButtonCss;
-
 const selectableCss = ":host{display:block;padding:0 0 0 32px;position:relative}:host .dso-selectable-options{list-style:none;margin-top:8px;padding-left:0}:host .dso-selectable-options li+li{margin-top:8px}:host label{font-weight:400;line-height:24px;margin:0}:host input[type=checkbox][disabled]+label::before,:host input[type=checkbox][disabled]:active+label::before,:host input[type=checkbox][disabled]:focus+label::before,:host input[type=radio][disabled]+label::before,:host input[type=radio][disabled]:active+label::before,:host input[type=radio][disabled]:focus+label::before{background-color:#fff;box-shadow:0 0 0 2px #e5e5e5}:host input[type=checkbox],:host input[type=radio]{height:24px;left:0;margin:0;opacity:0;position:absolute;top:0;width:24px;z-index:1;zoom:1}:host input[type=checkbox]:not([disabled]),:host input[type=radio]:not([disabled]){cursor:pointer}:host input[type=checkbox]+label,:host input[type=radio]+label{display:inline;font-style:normal;padding-left:0}:host input[type=checkbox]+label::before,:host input[type=radio]+label::before{background:#fff;border:0;box-shadow:0 0 0 2px var(--dso-selectable-color, #275937);content:\"\";height:20px;left:2px;position:absolute;top:2px;width:20px}:host input[type=checkbox]:focus,:host input[type=radio]:focus{outline:0}:host input[type=checkbox]:focus+label::before,:host input[type=radio]:focus+label::before{box-shadow:0 0 0 3px var(--dso-selectable-color, #275937);height:18px;left:3px;top:3px;width:18px}:host input[type=checkbox]:active+label::before,:host input[type=checkbox].active+label::before,:host input[type=radio]:active+label::before,:host input[type=radio].active+label::before{background-color:#ebf3e6;box-shadow:0 0 0 1px #275937;height:22px;left:1px;top:1px;width:22px}:host input[type=checkbox]+label::before{border-radius:4px}:host input[type=checkbox]+label::after{background:transparent;content:\"\";left:6px;opacity:0;position:absolute;top:6px;zoom:1}:host input[type=checkbox]:checked+label::after,:host input[type=checkbox]:indeterminate+label::after{opacity:1}:host input[type=checkbox]:checked+label::after{border:solid;border-color:var(--dso-selectable-color, #39870c);border-top-color:transparent;border-width:0 0 3px 3px;height:8px;transform:rotate(-45deg);width:13px}:host input[type=checkbox]:indeterminate+label::after{background-color:var(--dso-selectable-color, #39870c);height:12px;width:12px}:host input[type=radio]+label::before{border-radius:50%}:host input[type=radio]+label::after{background-color:transparent;border-radius:50%;content:\"\";height:12px;left:6px;opacity:0;position:absolute;top:6px;width:12px;zoom:1}:host input[type=radio]:checked+label::after{background-color:var(--dso-selectable-color, #39870c);opacity:1}:host>dso-info{float:none;margin:8px 16px 0 -32px;width:calc(100% + 32px)}:host(:not(:last-child)){margin-bottom:8px}*,*::after,*::before{box-sizing:border-box}";
 
 let Selectable = class {
@@ -77,4 +58,4 @@ let Selectable = class {
 };
 Selectable.style = selectableCss;
 
-export { Info as dso_info, InfoButton as dso_info_button, Selectable as dso_selectable };
+export { Info as dso_info, Selectable as dso_selectable };

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

@@ -10,7 +10,7 @@ let Label = class {
   }
   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" })))));
   }
 };
 Label.statusMap = new Map([