@dso-toolkit/core 86.0.0 → 88.0.0

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

@@ -1,9 +1,9 @@
 'use strict';
 
 var index = require('./index-2aek-b9X.js');
-var positionTooltip_function = require('./position-tooltip.function-ByMSSaYN.js');
-var tooltip_functionalComponent = require('./tooltip.functional-component-DaIoD81Q.js');
-require('./floating-ui.dom-CHD5ZW0W.js');
+var positionTooltip_function = require('./position-tooltip.function-CDcvfQQh.js');
+var tooltip_functionalComponent = require('./tooltip.functional-component-BEYSPQ3a.js');
+require('./floating-ui.dom-Bp4TaUcL.js');
 require('./clsx-BtxeOLZW.js');
 
 var air = `<svg id="air" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
@@ -708,7 +708,7 @@ const Icon = class {
             if (!icon) {
                 throw new TypeError(`Unknown svg: ${this.icon}`);
             }
-            return index.h("span", { key: 'dc1f3170309895f687b045900f29994f61006754', class: "icon-container", innerHTML: icon.svg });
+            return index.h("span", { key: 'cfe2b6ff0bb2d810eee4064bf32beebe10d0c118', class: "icon-container", innerHTML: icon.svg });
         }
     }
 };
@@ -748,6 +748,7 @@ const iconButtonCss = () => `.dso-tooltip {
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.15s;
+  max-inline-size: 320px;
 }
 .dso-tooltip.visible {
   opacity: 1;
@@ -786,34 +787,10 @@ const iconButtonCss = () => `.dso-tooltip {
   padding-inline: 8px;
   border-radius: 4px;
   line-height: 1.5;
-  max-inline-size: 320px;
 }
 .dso-tooltip .tooltip-arrow {
-  --_dso-alert-success-border-color: #39870c;
-  --_dso-alert-error-border-color: #ce3f51;
-  --_dso-alert-info-border-color: #6ca4d9;
-  --_dso-alert-warning-border-color: #dcd400;
-  --link-color: currentColor;
-  --link-hover-color: currentColor;
-  --link-visited-color: currentColor;
-}
-.dso-tooltip .tooltip-arrow a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));
-}
-.dso-tooltip .tooltip-arrow a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));
-}
-.dso-tooltip .tooltip-arrow a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));
-}
-.dso-tooltip .tooltip-arrow a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));
-}
-.dso-tooltip .tooltip-arrow {
-  --_dso-icon-button-tertiary-color: #fff;
-  background-color: #666;
-  color: #fff;
   position: absolute;
+  background-color: #666;
   border-start-start-radius: 4px;
   block-size: 8px;
   inline-size: 8px;
@@ -1288,7 +1265,7 @@ const IconButton = class {
         this.cleanUp = undefined;
     }
     render() {
-        return (index.h("button", { key: '0b109ec22c88e4fae7a3b51b6092746bd5bebae6', ref: (el) => (this.buttonElRef = el), type: "button", disabled: this.disabled, "aria-label": this.label, class: `icon-button dso-${this.variant}`, onMouseEnter: this.handleShowTooltip, onMouseLeave: this.handleHideTooltip, onFocus: this.handleShowTooltip, onBlur: this.handleHideTooltip, onClick: this.handleClick }, index.h("dso-icon", { key: 'a520208655de770f8b2dc58ae42ce4cb488e0e36', icon: this.icon }), index.h(tooltip_functionalComponent.Tooltip, { key: 'b577cada7261b7c69da8c9cc52c1fe8a22390238', visible: this.showTooltip, onAfterHidden: this.handleHideTooltip, tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tipArrowElRef = element) }, this.label)));
+        return (index.h("button", { key: '8b22306b71a11a9a5bb331e3138d398a1ea28c25', ref: (el) => (this.buttonElRef = el), type: "button", disabled: this.disabled, "aria-label": this.label, class: `icon-button dso-${this.variant}`, onMouseEnter: this.handleShowTooltip, onMouseLeave: this.handleHideTooltip, onFocus: this.handleShowTooltip, onBlur: this.handleHideTooltip, onClick: this.handleClick }, index.h("dso-icon", { key: '5e0331ca7a343c70ef6f0fc0667d567d7c2814ad', icon: this.icon }), index.h(tooltip_functionalComponent.Tooltip, { key: 'ddf5f41269e6102ef81b05096119386e15478236', visible: this.showTooltip, onAfterHidden: this.handleHideTooltip, tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tipArrowElRef = element) }, this.label)));
     }
 };
 IconButton.style = iconButtonCss();

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

@@ -1,36 +1,117 @@
 'use strict';
 
 var index = require('./index-2aek-b9X.js');
+var positionTooltip_function = require('./position-tooltip.function-CDcvfQQh.js');
+var tooltip_functionalComponent = require('./tooltip.functional-component-BEYSPQ3a.js');
+require('./floating-ui.dom-Bp4TaUcL.js');
+require('./clsx-BtxeOLZW.js');
 
-const infoButtonCss = () => `:host{display:inline-block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:rect(0 0 0 0)}button{background-color:transparent;color:#39870c;border:0;margin-inline-start:var(--_dt-info-button-margin-inline-start, 8px);padding:0}button.dso-info-secondary{color:#666}button{vertical-align:top;line-height:1}dso-icon-button{margin-inline-start:var(--_dt-info-button-margin-inline-start, 8px);vertical-align:top}`;
+const infoButtonCss = () => `:host{--_dt-scrollable-border-radius:4px;--_dt-scrollable-container-padding-inline:16px;--_dt-scrollable-container-padding-block:8px;display:inline-block}*,*::after,*::before{box-sizing:border-box}.dso-tooltip{--_dso-alert-success-border-color:initial;--_dso-alert-error-border-color:initial;--_dso-alert-info-border-color:initial;--_dso-alert-warning-border-color:initial;background-color:#fff;color:#191919;border-radius:4px;overflow:unset;margin:0;border:0;padding:0;filter:drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));opacity:0;visibility:hidden;transition:opacity 0.15s;max-inline-size:640px}.dso-tooltip.visible{opacity:1;visibility:visible}.dso-tooltip .tooltip-inner{--_dt-span-role-paragraph-margin-block:8px;--_dso-alert-success-border-color:initial;--_dso-alert-error-border-color:initial;--_dso-alert-info-border-color:initial;--_dso-alert-warning-border-color:initial;background-color:#fff;color:#191919;font-family:Asap, sans-serif;font-size:1rem;font-weight:normal;padding-block:0;padding-inline:0;border-radius:4px;line-height:1.5}.dso-tooltip .tooltip-arrow{position:absolute;background-color:#fff;border-start-start-radius:4px;block-size:10px;inline-size:10px;pointer-events:none;z-index:-1}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:rect(0 0 0 0)}button{background-color:transparent;color:#39870c;border:0;margin-inline-start:var(--_dt-info-button-margin-inline-start, 8px);padding:0}button.dso-info-secondary{color:#666}button{vertical-align:top;line-height:1}dso-icon-button{margin-inline-start:var(--_dt-info-button-margin-inline-start, 8px);vertical-align:top}`;
 
 const InfoButton = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.dsoToggle = index.createEvent(this, "dsoToggle", 7);
-        this.hover = false;
+        /**
+         * Whether the InfoButton is active.
+         */
+        this.active = false;
         /**
          * The label.
          */
         this.label = "Toelichting bij optie";
+        /**
+         * The placement of the Toggletip on click.
+         */
+        this.toggletipPlacement = "top";
+        this.hover = false;
+        this.toggletipActive = false;
+        this.focusOutHandler = (event) => {
+            var _a;
+            if (!this.host.contains(event.relatedTarget)) {
+                this.toggletipActive = false;
+                (_a = this.toggletipElRef) === null || _a === void 0 ? void 0 : _a.hidePopover();
+            }
+        };
+        this.keyDownHandler = (event) => {
+            var _a;
+            if (!this.toggletipActive)
+                return;
+            if (event.key === "Escape") {
+                this.toggletipActive = false;
+                (_a = this.toggletipElRef) === null || _a === void 0 ? void 0 : _a.hidePopover();
+            }
+        };
     }
     /**
      * To set focus to the toggle button.
      */
     async setFocus() {
-        var _a, _b;
-        (_a = this.button) === null || _a === void 0 ? void 0 : _a.setFocus();
-        (_b = this.buttonSecondary) === null || _b === void 0 ? void 0 : _b.focus();
+        var _a, _b, _c;
+        if (this.secondary) {
+            (_a = this.buttonSecondary) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        else {
+            (_c = (_b = this.button) === null || _b === void 0 ? void 0 : _b.setFocus) === null || _c === void 0 ? void 0 : _c.call(_b);
+        }
+    }
+    get isToggletipMode() {
+        return !!this.host.querySelector("[slot='toggletip']");
     }
     handleToggle(originalEvent) {
-        this.active = !this.active;
-        this.dsoToggle.emit({ originalEvent, active: this.active });
+        var _a;
+        if (this.isToggletipMode) {
+            this.toggletipActive = !this.toggletipActive;
+            (_a = this.toggletipElRef) === null || _a === void 0 ? void 0 : _a.showPopover();
+        }
+        else {
+            this.dsoToggle.emit({ originalEvent, active: !this.active });
+        }
+    }
+    cleanupTooltip() {
+        var _a;
+        (_a = this.cleanUp) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.cleanUp = undefined;
+    }
+    componentDidRender() {
+        var _a, _b;
+        if (!this.isToggletipMode) {
+            (_a = this.toggletipElRef) === null || _a === void 0 ? void 0 : _a.hidePopover();
+            this.cleanupTooltip();
+            return;
+        }
+        if (!this.cleanUp && this.toggletipActive && this.button && this.toggletipElRef && this.toggletipArrowElRef) {
+            (_b = this.toggletipElRef) === null || _b === void 0 ? void 0 : _b.showPopover();
+            this.cleanUp = positionTooltip_function.positionTooltip({
+                referenceElement: this.button,
+                tipRef: this.toggletipElRef,
+                tipArrowRef: this.toggletipArrowElRef,
+                placementTip: this.toggletipPlacement,
+                restrictContentElement: this.restrictContentElement,
+            });
+        }
+    }
+    connectedCallback() {
+        this.mutationObserver = new MutationObserver(() => {
+            index.forceUpdate(this.host);
+        });
+        this.mutationObserver.observe(this.host, {
+            childList: true,
+            attributes: true,
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        this.cleanupTooltip();
+        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        delete this.mutationObserver;
     }
     render() {
-        return (index.h(index.Host, { key: '664a78b759c6216aa2df88b003ec4324f6f55b2c', onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, !this.secondary ? (index.h("dso-icon-button", { variant: "tertiary", label: this.label, onDsoClick: (e) => this.handleToggle(e.detail.originalEvent), icon: this.active || this.hover ? "info-active" : "info", ref: (element) => (this.button = element) })) : (
+        return (index.h(index.Host, { key: '0edb498762c57aac0e2fcd0efdcd54066e705e7c', onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false), onKeydown: this.keyDownHandler, onFocusout: this.focusOutHandler }, !this.secondary ? (index.h("dso-icon-button", { variant: "tertiary", label: this.label, onDsoClick: (e) => this.handleToggle(e.detail.originalEvent), icon: this.active || this.hover || this.toggletipActive ? "info-active" : "info", ref: (element) => (this.button = element) })) : (
         // ToDo: remove this part in https://github.com/dso-toolkit/dso-toolkit/issues/3350. Tertiary on color already working
-        index.h("button", { type: "button", class: "dso-info-secondary", "aria-expanded": typeof this.active === "boolean" ? this.active.toString() : undefined, onClick: (e) => this.handleToggle(e), ref: (element) => (this.buttonSecondary = element) }, index.h("dso-icon", { icon: this.active || this.hover ? "info-active" : "info" }), index.h("span", { class: "sr-only" }, this.label)))));
+        index.h("button", { type: "button", class: "dso-info-secondary", "aria-expanded": (this.active || this.toggletipActive).toString(), onClick: (e) => this.handleToggle(e), ref: (element) => (this.buttonSecondary = element) }, index.h("dso-icon", { icon: this.active || this.hover || this.toggletipActive ? "info-active" : "info" }), index.h("span", { class: "sr-only" }, this.label))), this.isToggletipMode !== null && (index.h(tooltip_functionalComponent.Tooltip, { key: 'a1aac908e69a86fb00001730ab027089e9b21ecc', tipElementRef: (element) => (this.toggletipElRef = element), tipArrowElementRef: (element) => (this.toggletipArrowElRef = element), visible: this.toggletipActive }, index.h("dso-scrollable", { key: '14cab11c5e9a100e93729cc7d4d1f42604d8309b', ref: (element) => (this.restrictContentElement = element) }, index.h("slot", { key: 'a5607eba0612c624da9e8c2282bb47eb734ff819', name: "toggletip" }))))));
     }
+    get host() { return index.getElement(this); }
 };
 InfoButton.style = infoButtonCss();
 

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

@@ -10,7 +10,7 @@ const Info = class {
         this.dsoClose = index.createEvent(this, "dsoClose", 7);
     }
     render() {
-        return (index.h(index.Fragment, { key: '400c6c9a5a24dea0dbb640bc11cad2f45ba778ac' }, index.h("slot", { key: 'b0e3f9fc32139c6aef78782216211c2f85a9c0e5' }), !this.fixed && (index.h("dso-icon-button", { key: '281e825b492e3c548057900a467ed8f19cf9235b', label: "Sluiten", variant: "tertiary", icon: "times", onDsoClick: (e) => this.dsoClose.emit(e.detail.originalEvent) }))));
+        return (index.h(index.Fragment, { key: '332b53fe2d36d9018e14ff8a888b48d74b487b31' }, index.h("slot", { key: 'a9fcdee710f9e75434f240f3c0375e90f86dc587' }), !this.fixed && (index.h("dso-icon-button", { key: 'e75455d9d8bf16684cea7e02fb114cdf34d40d6a', label: "Sluiten", variant: "tertiary", icon: "times", onDsoClick: (e) => this.dsoClose.emit(e.detail.originalEvent) }))));
     }
 };
 Info.style = infoCss();
@@ -77,7 +77,7 @@ const Selectable = class {
     render() {
         var _a;
         const hasInfo = !!this.host.querySelector('[slot="info"]');
-        return (index.h(index.Fragment, { key: 'fd39e588c2e7192251aaa1ba2ce0059c5a148bf8' }, index.h("div", { key: 'c10126ae1366c0ac63e50414a3fc5fdd2b7d7279', class: "dso-selectable-container" }, index.h("div", { key: '7151d4e9a53473a6784a4fa7db2cc6b46619caed', class: "dso-selectable-input-wrapper" }, index.h("input", { key: 'c4767583ea01d20c2261928c7abba2e1baa82bd9', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, ref: (el) => (this.input = el) }), !this.labelledById ? (index.h("label", { htmlFor: this.getIdentifier() }, index.h("slot", null))) : (index.h("label", null, index.h("slot", null)))), hasInfo && !this.infoFixed && (index.h("dso-info-button", { key: '786376c68173bc0fabbe21b3fcd0361ebd46a0cf', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (index.h("dso-info", { key: 'e16c0653024466ac4435e19063700c8a8c7ac933', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, index.h("div", { key: 'db608fea9f32208bda0e87c72defd98deca6a8bd' }, index.h("slot", { key: '2230755391a6141cde8e431566c11746ccc4c9f2', name: "info" })))), index.h("slot", { key: '0c15f2a50d082f7d2f0d7184a004c5bd701ba6f8', name: "options" })));
+        return (index.h(index.Fragment, { key: '8a4ee13b4d34c210f5d4c4e9151b5d7d53802d37' }, index.h("div", { key: 'f67278b4fde95cd251323b97e79f93fb04c9b9e2', class: "dso-selectable-container" }, index.h("div", { key: 'e2359fe5b5d34b2f538d1a2d5f15f27eca3d329e', class: "dso-selectable-input-wrapper" }, index.h("input", { key: '09172958d3854b939b4d29d922ef5aabee8f2eb8', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, ref: (el) => (this.input = el) }), !this.labelledById ? (index.h("label", { htmlFor: this.getIdentifier() }, index.h("slot", null))) : (index.h("label", null, index.h("slot", null)))), hasInfo && !this.infoFixed && (index.h("dso-info-button", { key: '861f5e947c5e185e1e44f98fb2b9f5f8f1de0a90', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (index.h("dso-info", { key: 'b342d8fe01db69e44a8f4c14b435de26e4267fbe', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, index.h("div", { key: '58cf179b6ff01f2162ae3dbc5f90efbc32ae21bb' }, index.h("slot", { key: '5dbec26a759ae19daad1907b895a70b7d947bd07', name: "info" })))), index.h("slot", { key: 'f015ceda5af6134a7812cad315f28751a8b3c57a', name: "options" })));
     }
     componentDidRender() {
         if (this.input && typeof this.checked === "boolean" && this.input.checked !== this.checked) {

package/dist/cjs/dso-input-range.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-2aek-b9X.js');
 
-const inputRangeCss = () => `:host{display:flex;align-items:center;gap:0.5rem;padding:0.5rem;inline-size:100%}*,*::after,*::before{box-sizing:border-box}.counter{flex-shrink:0;min-inline-size:5ch}.counter.min{text-align:end}.counter.max{text-align:start}.input{flex-grow:1;appearance:none;background-color:transparent;cursor:pointer}.input::-webkit-slider-runnable-track{block-size:0.5rem;background-color:#e5e5e5}.input::-webkit-slider-runnable-track:hover{background-color:#ccc}.input::-webkit-slider-runnable-track{border:1px solid #666;border-radius:0.5rem}.input::-webkit-slider-thumb{block-size:1.5rem;inline-size:1.5rem;appearance:none;margin-block-start:-0.55rem;background-color:#39870c}.input::-webkit-slider-thumb:hover{background-color:#275937}.input::-webkit-slider-thumb{border-radius:50%}.input::-moz-range-track{box-sizing:border-box;block-size:0.5rem;background-color:#e5e5e5}.input::-moz-range-track:hover{background-color:#ccc}.input::-moz-range-track{border:1px solid #666;border-radius:0.5rem}.input::-moz-range-thumb{box-sizing:border-box;block-size:1.5rem;inline-size:1.5rem;appearance:none;margin-block-start:-0.5rem;background-color:#39870c}.input::-moz-range-thumb:hover{background-color:#275937}.input::-moz-range-thumb{border-color:transparent;border-radius:50%}`;
+const inputRangeCss = () => `:host{display:flex;align-items:center;gap:0.625rem;padding-block:0.5rem;inline-size:100%}*,*::after,*::before{box-sizing:border-box}.counter{flex-shrink:0;min-inline-size:20px}.input{flex-grow:1;appearance:none;background-color:transparent;cursor:pointer}.input::-webkit-slider-runnable-track{block-size:0.5rem;background-color:#e5e5e5;border:1px solid #666;border-radius:0.5rem}.input::-webkit-slider-runnable-track:hover{background-color:#ccc}.input::-webkit-slider-thumb{block-size:1.5rem;inline-size:1.5rem;appearance:none;margin-block-start:-0.55rem;background-color:#39870c;border-radius:50%}.input::-webkit-slider-thumb:hover{background-color:#275937}.input::-moz-range-track{box-sizing:border-box;block-size:0.5rem;background-color:#e5e5e5;border:1px solid #666;border-radius:0.5rem}.input::-moz-range-track:hover{background-color:#ccc}.input::-moz-range-thumb{box-sizing:border-box;block-size:1.5rem;inline-size:1.5rem;appearance:none;margin-block-start:-0.5rem;background-color:#39870c;border-radius:50%;border-color:transparent}.input::-moz-range-thumb:hover{background-color:#275937}`;
 
 const InputRange = class {
     constructor(hostRef) {
@@ -17,13 +17,13 @@ const InputRange = class {
         const min = this.min || 0;
         const max = this.max || 100;
         const step = this.step || 1;
-        return (index.h(index.Fragment, null, this.description && (index.h("span", { key: 'd187af008bb6acdfacf391f509ab83d17eaef891', id: "description", hidden: true }, this.description)), index.h("span", { key: 'f1041606979f3cb05eec80fae45d2ea8c901fadf', class: "counter min", "aria-hidden": "true" }, min, this.unit), index.h("input", { key: '18d055df50d550b68b11511fab87cc3e9bd17bae', type: "range", min: this.min, max: this.max, value: this.value, class: "input", "aria-label": this.label, "aria-describedby": this.description ? "description" : undefined, onChange: (event) => this.dsoChange.emit({
+        return (index.h(index.Fragment, null, this.description && (index.h("span", { key: 'f3796a5bbd719af7fe23c285ba4f1519eaaaf1b9', id: "description", hidden: true }, this.description)), index.h("span", { key: '1048b041a13dbf244b2d6fe76dccf8f97a2d7b4b', class: "counter", "aria-hidden": "true" }, min, this.unit), index.h("input", { key: '438056be852e2b4136de65cec13faa6a6c43418b', type: "range", min: this.min, max: this.max, value: this.value, class: "input", "aria-label": this.label, "aria-describedby": this.description ? "description" : undefined, onChange: (event) => this.dsoChange.emit({
                 originalEvent: event,
                 value: event.target instanceof HTMLInputElement ? parseInt(event.target.value, 10) : undefined,
                 max,
                 min,
                 step,
-            }) }), index.h("span", { key: '0c10b36570bf6ccbadf38e5b110d3b8f5c950521', class: "counter max", "aria-hidden": "true" }, max, this.unit)));
+            }) }), index.h("span", { key: '8b3f86e7c42f0dffdc2b550f365c4bdc91627ffc', class: "counter", "aria-hidden": "true" }, max, this.unit)));
     }
     get host() { return index.getElement(this); }
 };

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

@@ -102,13 +102,13 @@ const Label = class {
         this.isTruncated = false;
     }
     render() {
-        return (index$1.h(index$1.Fragment, { key: 'e71e00c923743364639854082369f922d12dae81' }, index$1.h("span", { key: '36a7ba8f865de6ee9581b569f2454dc04c88e622', "aria-describedby": this.isTruncated ? "toggle-anchor" : null, class: clsx.clsx("dso-label", {
+        return (index$1.h(index$1.Fragment, { key: 'f868c06841bb1f9a6f39db8598141634cbe59f5f' }, index$1.h("span", { key: '935d20891b9df19b37cf38242892428c81c12631', "aria-describedby": this.isTruncated ? "toggle-anchor" : null, class: clsx.clsx("dso-label", {
                 [`dso-label-${this.status}`]: this.status,
                 "dso-compact": this.compact && !this.removable,
                 "dso-hover": this.removeHover || this.removeFocus,
-            }) }, index$1.h("slot", { key: '0d6a2ac20e09e7e2b523e20effa9cbd9128796a4', name: "symbol" }), index$1.h("span", { key: '95db09c39709060af1275740f79bdca6bfb09a6c', class: clsx.clsx("dso-label-content", {
+            }) }, index$1.h("slot", { key: 'e3d5f4d753cf5ca6ef1bef6fae698b3b4c03e5da', name: "symbol" }), index$1.h("span", { key: '242c774421051469948ff841d7b55bf06e9481fd', class: clsx.clsx("dso-label-content", {
                 "dso-truncate": !!this.truncate,
-            }), ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.isTruncated ? 0 : undefined, onMouseEnter: () => (this.textHover = true), onMouseLeave: () => (this.textHover = false), onFocus: () => (this.textFocus = true), onBlur: () => (this.textFocus = false) }, index$1.h("slot", { key: '198f0d577131b02242aae4d803f5b6cfe542012f' })), this.removable && (index$1.h("dso-icon-button", { key: '9e331fc1fedd7c972d3f4a6bc74bbe27cb2177f5', variant: "tertiary", icon: "times", label: `Verwijder: ${this.labelText}`, onDsoClick: (e) => this.dsoRemoveClick.emit(e.detail.originalEvent), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }))), this.isTruncated && (index$1.h("dso-tooltip", { key: '7ce757b70f99910b834545d495827baa3fafb90f', stateless: true, id: "toggle-anchor", active: this.textHover || this.textFocus, position: "top", strategy: "absolute" }, this.labelText))));
+            }), ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.isTruncated ? 0 : undefined, onMouseEnter: () => (this.textHover = true), onMouseLeave: () => (this.textHover = false), onFocus: () => (this.textFocus = true), onBlur: () => (this.textFocus = false) }, index$1.h("slot", { key: '93ae4502166a8c246371249f6b25423ab066e5b7' })), this.removable && (index$1.h("dso-icon-button", { key: '35c535b0943aef1ffc59871b43e2222c7490c6d2', variant: "tertiary", icon: "times", label: `Verwijder: ${this.labelText}`, onDsoClick: (e) => this.dsoRemoveClick.emit(e.detail.originalEvent), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }))), this.isTruncated && (index$1.h("dso-tooltip", { key: '0c0a556cc61f34f782e9da771138e8b0e37e6647', stateless: true, id: "toggle-anchor", active: this.textHover || this.textFocus, position: "top", strategy: "absolute" }, this.labelText))));
     }
     get host() { return index$1.getElement(this); }
     static get watchers() { return {
@@ -199,7 +199,7 @@ const SlideToggle = class {
         this.hasVisibleLabel = this.host.querySelector("*") !== null;
     }
     render() {
-        return (index$1.h(index$1.Fragment, { key: '7951732521fe2f5492e98f577a8db95368701a00' }, index$1.h("button", Object.assign({ key: 'dee277ad2f9588b83134762429e69e049a7968bf', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e) }, (this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), (this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {})), index$1.h("svg", { key: '18c6aa1f628fac44a1fc461419e5a53d27ce2385', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, index$1.h("g", { key: '130f15a202fd726f2db7ba6100e63f735dcfd590', fill: "none", "fill-rule": "evenodd" }, index$1.h("rect", { key: '8f3f8c42d45032d4c1624875a635d204b5ca03be', width: "40", height: "20", fill: "currentColor", rx: "10" }), index$1.h("circle", { key: '20641da17a34b9cdf9960d7b640746f2d3be2fb0', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (index$1.h("label", { key: 'd03a0107701ab2dcf1e771d9f08596e3c286d44b', htmlFor: this.identifier }, index$1.h("slot", { key: '57ea87e3101fc832b88f74e0dd7b0134e38ea386' })))));
+        return (index$1.h(index$1.Fragment, { key: 'f88a3ab9f40fa65dfc40766e0ba4e4986f41b4d5' }, index$1.h("button", Object.assign({ key: '40634c33c236dc5b0c4e8466cc0a5e66f7fda49f', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e) }, (this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), (this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {})), index$1.h("svg", { key: 'fe409ecd9202a635179d92b135e659df10ee6dc9', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, index$1.h("g", { key: '75fb86fbba230bd789395a6d0545c74eade702f9', fill: "none", "fill-rule": "evenodd" }, index$1.h("rect", { key: '0d976634e2d3a8993678b933e06d845909b9314a', width: "40", height: "20", fill: "currentColor", rx: "10" }), index$1.h("circle", { key: 'ddcb8c875e8d6c8163f82f71ef11ebef6ce80fe0', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (index$1.h("label", { key: '8b33599fc06c16697dff6b89feeecb4176f4d4f5', htmlFor: this.identifier }, index$1.h("slot", { key: '306ed9a90810c5d11d813b59168f231017f5c3a4' })))));
     }
     get host() { return index$1.getElement(this); }
 };

package/dist/cjs/dso-legend-item.cjs.entry.js

@@ -3,7 +3,7 @@
 var index = require('./index-2aek-b9X.js');
 var clsx = require('./clsx-BtxeOLZW.js');
 
-const legendItemCss = () => `:host{display:block;padding-block:4px}*,*::after,*::before{box-sizing:border-box}::slotted(span[slot=symbol]){background-color:#fff;display:block;float:inline-start;block-size:26px;margin-block-start:0;margin-inline-end:8px;inline-size:30px;overflow:hidden;position:relative}::slotted(h3){margin:0 !important}::slotted([slot=options]){margin-block-start:8px}.legend-item{display:flex;position:relative}.legend-item.legend-item-symbol+.options{margin-block-start:8px}.legend-item dso-icon-button.active{--_dso-icon-button-tertiary-color:#173521}.legend-item-right-content{margin-inline-start:auto;display:flex;justify-content:center;align-content:center;align-items:center}.legend-item-right-content dso-slide-toggle{display:flex;align-self:center;line-height:1;margin-inline-start:8px;padding-block-start:0 !important}`;
+const legendItemCss = () => `:host{display:block;padding-block:4px}*,*::after,*::before{box-sizing:border-box}::slotted(span[slot=symbol]){background-color:#fff;display:block;float:inline-start;block-size:26px;margin-block-start:0;margin-inline-end:8px;inline-size:30px;overflow:hidden;position:relative}::slotted(h3){margin:0 !important}::slotted([slot=options]){margin-block-start:8px}.legend-item{display:flex;position:relative}.legend-item.legend-item-symbol+.options{margin-block-start:8px}.legend-item dso-icon-button.active{--_dso-icon-button-tertiary-color:#173521}.legend-item-right-content{margin-inline-start:auto;display:flex}.legend-item-right-content dso-slide-toggle{line-height:1;margin-inline-start:8px;padding-block-start:0 !important}`;
 
 const LegendItem = class {
     constructor(hostRef) {
@@ -40,7 +40,7 @@ const LegendItem = class {
         if (label === null || label === void 0 ? void 0 : label.textContent) {
             accessibleLabel = `Maak ${label.textContent.toLowerCase()} actief`;
         }
-        return (index.h(index.Host, { key: '113e4cc95985fed9befcc75cf7dd49d431a6a724', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, index.h("div", { key: '32b00c02feaa2107691c0f57cb508be44417033b', class: clsx.clsx("legend-item", { "legend-item-symbol": hasSymbol }) }, hasSymbol && (index.h("div", { key: '7fedb010d0ff7d53acddef537be6c6009f250f84' }, index.h("slot", { key: 'a566482b9b60fe5e69f74d2af4c3c093f01c8665', name: "symbol" }))), index.h("div", { key: 'd6c4fbe4e9dfbf52dd02255d3bad704de7edb313' }, index.h("slot", { key: 'bfa9d87992c0cab9d034260153e634158f4b6c3a', name: "label" })), this.disabled && this.disabledMessage && (index.h("dso-toggletip", { key: '13927a8346bf1c2b34c83bcc5ab9fed9e3394789', position: "bottom" }, this.disabledMessage)), index.h("div", { key: 'daf55817441d0156625630afb68be8209a7ff96a', class: "legend-item-right-content" }, this.active && hasOptions && !this.disabled && (index.h("dso-icon-button", { key: '15d1448d3338cda2bae8c395f1a376f5c8b37449', label: "Opties", icon: "more", variant: "tertiary", class: { active: this.showOptions }, id: "edit-button", onDsoClick: () => (this.showOptions = !this.showOptions) })), this.activatable && (index.h("dso-slide-toggle", { key: '851d2b0d696a8c2271f3ae5a610115606773899c', accessibleLabel: accessibleLabel, checked: this.active, disabled: this.disabled, onDsoActiveChange: (e) => this.dsoActiveChange.emit({ current: Boolean(this.active), next: !this.active, originalEvent: e }) })))), hasOptions && (index.h("div", { key: 'b29ccf455d9326c56ec6f9d5cbc3d07302718773', hidden: this.disabled || !this.showOptions, class: "options" }, index.h("slot", { key: '8ce07dd6a490e7853ab464690af7a07f23bc7cae', name: "options" })))));
+        return (index.h(index.Host, { key: '24af81db658898c1bc2317422cbb6ab38196083d', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, index.h("div", { key: '174173193d7302d22d265e02a4147c6877241d0f', class: clsx.clsx("legend-item", { "legend-item-symbol": hasSymbol }) }, hasSymbol && (index.h("div", { key: '568089b5a568b92d12665a7c0eb78d3315c2c947' }, index.h("slot", { key: '325f14f024dca0edf52c2684097be1ca5eb6f014', name: "symbol" }))), index.h("div", { key: 'e72d3ac238b30577082a0edc4ab68de1d3b16f15' }, index.h("slot", { key: 'a1b4d6b740bd8a5ee32adcc5e40268bfd472c680', name: "label" })), this.disabled && this.disabledMessage && (index.h("dso-toggletip", { key: '9bc17eafc23c61d8b53005d02fa4aacad6ca2d8d', position: "bottom" }, this.disabledMessage)), index.h("div", { key: '9208ae5adae3f59e0ab0a20c0a32b65cc3fbc40f', class: "legend-item-right-content" }, this.active && hasOptions && !this.disabled && (index.h("dso-icon-button", { key: '6489bc065e692b8dce8edb7a56d1d5672f8d21cd', label: "Opties", icon: "more", variant: "tertiary", class: { active: this.showOptions }, id: "edit-button", onDsoClick: () => (this.showOptions = !this.showOptions) })), this.activatable && (index.h("dso-slide-toggle", { key: 'bb79e502289dd11de8db82d78e00bade9b0a451c', accessibleLabel: accessibleLabel, checked: this.active, disabled: this.disabled, onDsoActiveChange: (e) => this.dsoActiveChange.emit({ current: Boolean(this.active), next: !this.active, originalEvent: e }) })))), hasOptions && (index.h("div", { key: 'a3c74cdd73815b7519c9126d278da02c0281dfb6', hidden: this.disabled || !this.showOptions, class: "options" }, index.h("slot", { key: 'b932318fd0ccb55f02e60e5e49e339453b61d955', name: "options" })))));
     }
     get host() { return index.getElement(this); }
 };

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

@@ -4,7 +4,7 @@ var index = require('./index-2aek-b9X.js');
 var clsx = require('./clsx-BtxeOLZW.js');
 var isModifiedEvent = require('./is-modified-event-Dh9YsHw8.js');
 
-const legendCss = () => `*,*::after,*::before{box-sizing:border-box}:host{position:relative;display:block;inline-size:344px;background-color:#fff;box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.3)}:host .topbar{padding-block:8px;padding-inline:16px}:host .topbar .tabs{inline-size:100%;padding:0;list-style:none;display:inline-flex;border-block-end:1px solid #ccc}:host .topbar .tabs .tab{font-size:inherit;font-family:inherit;line-height:inherit;background-color:transparent;cursor:pointer;display:block;border:0;color:#275937;padding-block:6px;padding-inline:8px;border-block-end:4px solid transparent}:host .topbar .tabs .tab:hover{text-decoration:underline}:host .topbar .tabs .tab.active{font-weight:bold;border-color:#8b4a6a}:host .topbar .close-button{position:absolute;inset-block-start:8px;inset-inline-end:8px}:host .content{--_dso-form-group-margin-block-end:0;--_dso-scrollable-container-padding-inline:16px;max-block-size:52vh}`;
+const legendCss = () => `*,*::after,*::before{box-sizing:border-box}:host{position:relative;display:block;inline-size:344px;background-color:#fff;box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.3);border-radius:4px}:host .topbar{padding-block-start:8px;padding-inline:16px}:host .topbar .tabs{inline-size:100%;padding:0;list-style:none;display:inline-flex;border-block-end:1px solid #ccc}:host .topbar .tabs .tab{font-size:inherit;font-family:inherit;line-height:inherit;background-color:transparent;cursor:pointer;display:block;border:0;color:#275937;padding-block:6px;padding-inline:8px;border-block-end:4px solid transparent}:host .topbar .tabs .tab:hover{text-decoration:underline}:host .topbar .tabs .tab.active{font-weight:bold;border-color:#8b4a6a}:host .topbar .close-button{position:absolute;inset-block-start:8px;inset-inline-end:8px}:host .content{--_dso-form-group-margin-block-end:0;--_dt-scrollable-container-border-end-start-radius:4px;--_dt-scrollable-container-border-end-end-radius:4px;--_dt-scrollable-container-padding-inline:16px;max-block-size:52vh;border-end-start-radius:4px;border-end-end-radius:4px}`;
 
 const Legend = class {
     constructor(hostRef) {
@@ -70,7 +70,7 @@ const Legend = class {
         this.moveFocusToTab(next);
     }
     render() {
-        return (index.h(index.Host, { key: '26e817d9f760e220fcba00aed980bf2bd7ee1697' }, index.h("div", { key: 'd9fed11954d8f4df4480fae12d361e134aafe7f3', class: "topbar" }, index.h("div", { key: 'e9f21c805928ffee5ee26293011704983ca46ebd', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, this.tabItems.map((tabItem) => (index.h("button", Object.assign({ class: clsx.clsx("tab", { active: tabItem.active }), role: "tab", "aria-selected": tabItem.active ? "true" : "false" }, (!tabItem.active ? { tabIndex: -1 } : {}), { onClick: this.clickHandler }), tabItem.label)))), index.h("dso-icon-button", { key: '1c51e117733829cd351074be0ace4dad008f1eeb', icon: "times", variant: "tertiary", label: "Sluit legenda", class: "close-button", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) })), index.h("dso-scrollable", { key: 'ef59ecc0c8221fbbec78df269b476aa43872a138', class: "content" }, index.h("div", { key: '6f4f8d627425c6d85c39953e0355ee2c48b969d5', role: "tabpanel", tabIndex: 0 }, index.h("slot", { key: '2a57288315327f31330eb2389f0b0d01de51a783' })))));
+        return (index.h(index.Host, { key: '4f1295cd75af42eeaf438cc7b92604054993bdeb' }, index.h("div", { key: 'f1473d16ec2b6b5035c9aa88dbad40a4233a1529', class: "topbar" }, index.h("div", { key: 'f33777d4ab012cecb17105abb8299426995c86d2', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, this.tabItems.map((tabItem) => (index.h("button", Object.assign({ class: clsx.clsx("tab", { active: tabItem.active }), role: "tab", "aria-selected": tabItem.active ? "true" : "false" }, (!tabItem.active ? { tabIndex: -1 } : {}), { onClick: this.clickHandler }), tabItem.label)))), index.h("dso-icon-button", { key: '8fc17eeefc63ca51e296212eeeadbfc8ab731d18', icon: "times", variant: "tertiary", label: "Sluit legenda", class: "close-button", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) })), index.h("dso-scrollable", { key: '553566be6236dde866e739364e7a19aa918d32a8', class: "content" }, index.h("div", { key: '9348aad31e38e42f208301773d58fa784d71c751', role: "tabpanel", tabIndex: 0 }, index.h("slot", { key: '55fd88c643f65474bb691e4100e493c28b22a358' })))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/dso-list-button.cjs.entry.js

@@ -356,7 +356,7 @@ const ListButton = class {
     }
     render() {
         const selected = this.checked || (this.count !== undefined && this.count > 0);
-        return (index.h("div", { key: '18524f23f0f7ee53d1d58a44bbf7a52da891a242', class: clsx.clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, index.h("div", { key: 'a4791c2417d2c1ef254fa461a418344001af619c', class: clsx.clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, index.h("dso-selectable", { key: 'ba27873a3c361e208b323e25303959e003186fa0', type: "checkbox", value: "list-button", name: "naam", checked: selected, disabled: this.disabled }, this.label, this.sublabel && index.h("span", { key: '18bf1b4be461a2c2d77bb27c728a783a61ac0a45', class: "sr-only" }, " ", this.sublabel), this.subcontentSlot && (index.h("span", { key: 'ab2069ddc2706ccf1c1b7c19e786d882282ddac8', class: "sr-only" }, this.subcontentPrefix && this.subcontentPrefix + ":", " ", index.h("span", { key: 'dd68b887c2d357747c3a2e55c2a49666b1af93c0', innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && index.h("span", { key: '224c0c30be29f1fbc6e981dcca12159ff64afc21', class: "dso-sublabel" }, this.sublabel), this.subcontentSlot && (index.h("div", { key: '2ed6a6a284dc1cd3b2fc1bb1467814a512c6ff6b', class: "subcontent" }, index.h("slot", { key: '0bc0b5571e506bdc1f8373c483df5c44c870faac', name: "subcontent" })))), this.count !== undefined && this.count > 0 && (index.h("div", { key: 'e1ec7ea4e1fbd2f0e59bf0072615cd4561dbb2f0', class: "dso-input-number" }, this.count > 1 && (index.h(index.Fragment, { key: '3d56e5a0f3df0cec7de1bc8c3dcd086403d81061' }, index.h("dso-icon-button", { key: '177fa0949a44859cb1a041898536b2052c96bf47', label: "Aantal verlagen", variant: "tertiary", icon: "minus-circle", disabled: this.count === Number(this.min) || this.disabled, onDsoClick: (e) => this.stepValue(e, "decrement") }), index.h("span", { key: '971408d54dab124c80df07dcfe9a74d0f0a7878a', class: "dso-input-step-counter", "aria-label": "Aantal", "aria-live": "polite" }, this.count))), index.h("dso-icon-button", { key: '6e195268e820c57e707f200164c1d1445b0d53af', label: "Aantal verhogen", variant: "tertiary", icon: "plus-circle", disabled: this.count === Number(this.max) || this.disabled, onDsoClick: (e) => this.stepValue(e, "increment") })))));
+        return (index.h("div", { key: 'a155334345712bda3dd58924d60ccd467923f6fc', class: clsx.clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, index.h("div", { key: '1ac7dbc69f1e7b00fa8cd71b03ae0bbc7c3f98ee', class: clsx.clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, index.h("dso-selectable", { key: '5f1430413821bc31c793b2ccaed2a00509a3cfc6', type: "checkbox", value: "list-button", name: "naam", checked: selected, disabled: this.disabled }, this.label, this.sublabel && index.h("span", { key: '97302b35983f8659e51b7993619c5d007b9eadc5', class: "sr-only" }, " ", this.sublabel), this.subcontentSlot && (index.h("span", { key: '8324e5ebf88187d5042e4074a7b5a12cd8eb1fb5', class: "sr-only" }, this.subcontentPrefix && this.subcontentPrefix + ":", " ", index.h("span", { key: '6e0fe1caffbfdfa878b904f558b695def1c18f6f', innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && index.h("span", { key: '9bfec93907458641755c109304a453ebf728b4ad', class: "dso-sublabel" }, this.sublabel), this.subcontentSlot && (index.h("div", { key: 'e3feb6e6f3aa1f42efa2e632180459b61a22a7a0', class: "subcontent" }, index.h("slot", { key: '2971bc8037dabb734ecaf3faf1c338a3537fcac6', name: "subcontent" })))), this.count !== undefined && this.count > 0 && (index.h("div", { key: '46543874c528b6db91fed7dd19249dc7547bb86b', class: "dso-input-number" }, this.count > 1 && (index.h(index.Fragment, { key: 'cf2305047c3bf6f8384829c694ef57642bdd9bbf' }, index.h("dso-icon-button", { key: '6170297a6ce2a60762ba4bf96e59f49097e80d38', label: "Aantal verlagen", variant: "tertiary", icon: "minus-circle", disabled: this.count === Number(this.min) || this.disabled, onDsoClick: (e) => this.stepValue(e, "decrement") }), index.h("span", { key: 'e5c419497219f628e34bfdb997fe3b357a9331bd', class: "dso-input-step-counter", "aria-label": "Aantal", "aria-live": "polite" }, this.count))), index.h("dso-icon-button", { key: '225eed4514828a7f1afa06f2c6de8af19ada8b8d', label: "Aantal verhogen", variant: "tertiary", icon: "plus-circle", disabled: this.count === Number(this.max) || this.disabled, onDsoClick: (e) => this.stepValue(e, "increment") })))));
     }
     get host() { return index.getElement(this); }
 };

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

@@ -169,7 +169,7 @@ const Logo = class {
     }
     render() {
         return (index.h(index.Fragment, null, this.logoUrl ? (index.h("a", { class: "logo-url", href: this.logoUrl, onClick: this.handleLogoClick }, index.h(DsoLogo, { name: this.name }))) : (index.h(DsoLogo, { name: this.name })), this.label &&
-            (!this.labelUrl ? (index.h("span", { class: "logo-label" }, this.label)) : (index.h("a", { class: "logo-label-url", href: this.labelUrl, onClick: this.handleLabelClick }, index.h("span", { class: "logo-label" }, this.label)))), this.ribbon && index.h("div", { key: '35510db1a3d02a8f1130e37a49a4d55ed9478e2f', class: "logo-ribbon" }, this.ribbon)));
+            (!this.labelUrl ? (index.h("span", { class: "logo-label" }, this.label)) : (index.h("a", { class: "logo-label-url", href: this.labelUrl, onClick: this.handleLabelClick }, index.h("span", { class: "logo-label" }, this.label)))), this.ribbon && index.h("div", { key: 'e3dc493316f373195f1f8cf1c5e190282486796e', class: "logo-ribbon" }, this.ribbon)));
     }
 };
 Logo.style = logoCss();

package/dist/cjs/dso-map-base-layers.cjs.entry.js

@@ -46,7 +46,7 @@ const MapBaseLayers = class {
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (index.h("fieldset", { key: 'fbe66fa981184f6797ff8ee67dd4fa32152e0659', class: "form-group dso-radios" }, index.h("legend", { key: 'fe7c6025c6d6917f10e7d3b90db8791f398d01a2', class: "sr-only" }, "Achtergrond"), index.h("div", { key: '320f575fe9d8d0826af5dbd72259558c6f036a28', class: "dso-label-container" }, index.h("span", { key: '19e9dc173d434f9456de8104a29ac572c774f438', class: "control-label", "aria-hidden": "true" }, this.text("background"))), index.h("div", { key: '4b908dfb1e7d4cb6757456c6b5c658740bc99379', class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (index.h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[baseLayer.id] = ref), onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name, baseLayer.info ? index.h("p", { slot: "info" }, baseLayer.info) : null))))));
+        return (index.h("fieldset", { key: 'b4e11afffa1cfeda374e2298e0a127c51733fb9d', class: "form-group dso-radios" }, index.h("legend", { key: '5d5d9deaa63fd457eca1503f460925ca4e51ba25', class: "sr-only" }, "Achtergrond"), index.h("div", { key: 'd804f723a44d4085a7e983d2587da5bde72b4fec', class: "dso-label-container" }, index.h("span", { key: 'da3e550984bbe1b3a055d09100cf3d37cab9fe25', class: "control-label", "aria-hidden": "true" }, this.text("background"))), index.h("div", { key: '419aebdce0570fba7d194c285858c2ced4e416ed', class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (index.h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[baseLayer.id] = ref), onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name, baseLayer.info ? index.h("p", { slot: "info" }, baseLayer.info) : null))))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/dso-map-controls.cjs.entry.js

@@ -1119,7 +1119,7 @@ const MapControls = class {
         });
     }
     render() {
-        return (index.h(index.Fragment, { key: '01911c8dc014aaa6f941329c571d1c76b9c1ffee' }, index.h("dso-icon-button", { key: '64be9ccb531e2aa703b392e86ed5bb510a27fec9', label: this.text("layersButton"), icon: "layers", variant: "map", tooltipPlacement: "left", class: "toggle-visibility-icon-button", onDsoClick: (e) => this.toggleVisibility(e.detail.originalEvent), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleIconButtonElement, element, "f")) }), index.h("button", { key: '8d48b75032378995d6e30eb3655ad6f6a2a67722', type: "button", class: "dso-map toggle-visibility-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, index.h("dso-icon", { key: '5ab20edbb0ecb20d469282e4e68ff5f3f651152c', icon: "layers" }), index.h("span", { key: '97ec028d9dbecf0d1457b22c4f4cb12c25ae552d' }, this.text("layersButton"))), index.h("dso-button-group", { key: '881f8f66b9bc2738bbd3390877e1bde6a22f00c5', class: "zoom-buttons", direction: "column" }, index.h("dso-icon-button", { key: '18d5f9f00dbd8f07c44911812bf65df3a3c763b1', label: this.text("zoomIn"), icon: "plus", variant: "map", tooltipPlacement: "left", onDsoClick: (e) => this.dsoZoomIn.emit(e.detail.originalEvent), disabled: this.disableZoom === "in" || this.disableZoom === "both" }), index.h("dso-icon-button", { key: '2e3b7b0981af3629943628f5520d12cc13ae20de', label: this.text("zoomOut"), icon: "minus", variant: "map", tooltipPlacement: "left", onDsoClick: (e) => this.dsoZoomOut.emit(e.detail.originalEvent), disabled: this.disableZoom === "out" || this.disableZoom === "both" })), index.h("section", { key: '30e38d9be05cd9a13d8700ba8d3ae7abb40ff43c', hidden: this.hideContent }, index.h("header", { key: 'ad89e7561ebbb63d3d96f2698d39b742593e1411' }, index.h("h2", { key: '595b97288aa443385d6bff2af57e8334dab6fb3b' }, this.text("title")), index.h("dso-icon-button", { key: '0d08846e6c4d339715a9ba44a11b4b4f049aa18b', class: "close-button", label: this.text("hidePanel", { title: this.text("title") }), icon: "times", variant: "tertiary", onDsoClick: (e) => this.toggleVisibility(e.detail.originalEvent), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) })), index.h("dso-scrollable", { key: '8b58ee957121f17e453b03bdd4a4cd22476f3148' }, index.h("div", { key: '95240b301aaf18d7586a016306d7dc5891a0eb2f', class: "content" }, index.h("slot", { key: '18e6a37a46075604f942cbf20fe80536e91fda43' }))))));
+        return (index.h(index.Fragment, { key: '31c5d89ecdc3151ae2fc526ff0dede8dcac86cc7' }, index.h("dso-icon-button", { key: '48ef2aed7c06164db5b7e7970e58e89bb6542c41', label: this.text("layersButton"), icon: "layers", variant: "map", tooltipPlacement: "left", class: "toggle-visibility-icon-button", onDsoClick: (e) => this.toggleVisibility(e.detail.originalEvent), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleIconButtonElement, element, "f")) }), index.h("button", { key: '1d14943fa858477fb01370095a1d9ee61da45be5', type: "button", class: "dso-map toggle-visibility-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, index.h("dso-icon", { key: '4d854ab110c6a91008d08452764ee4bfe2e92cc1', icon: "layers" }), index.h("span", { key: '0aa99415bf2944299a319215e6d667323a03e9f2' }, this.text("layersButton"))), index.h("dso-button-group", { key: 'cc499e10742bac282222a550a389191680b3d7c5', class: "zoom-buttons", direction: "column" }, index.h("dso-icon-button", { key: 'dfa5283d7dd8f9ec0cc4718613eb1d265dc6fb19', label: this.text("zoomIn"), icon: "plus", variant: "map", tooltipPlacement: "left", onDsoClick: (e) => this.dsoZoomIn.emit(e.detail.originalEvent), disabled: this.disableZoom === "in" || this.disableZoom === "both" }), index.h("dso-icon-button", { key: '92636c6fa991095c9615901f54bfac09a92543f0', label: this.text("zoomOut"), icon: "minus", variant: "map", tooltipPlacement: "left", onDsoClick: (e) => this.dsoZoomOut.emit(e.detail.originalEvent), disabled: this.disableZoom === "out" || this.disableZoom === "both" })), index.h("section", { key: '3acd93f44a44be85490fd118210a8f60672ec444', hidden: this.hideContent }, index.h("header", { key: '20f02fdc7d4393e830fef60aeebd459a363b1b40' }, index.h("h2", { key: '3b64e4c12246cd89bdceceaa05f1868d1e242477' }, this.text("title")), index.h("dso-icon-button", { key: '003abb86c99a583639090443690125f2b5c512f9', class: "close-button", label: this.text("hidePanel", { title: this.text("title") }), icon: "times", variant: "tertiary", onDsoClick: (e) => this.toggleVisibility(e.detail.originalEvent), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) })), index.h("dso-scrollable", { key: '7c2aa131fdefbc6adde5b736b8469272d50519c6' }, index.h("div", { key: '62958c695eb80b1f838c714989da69771c557f3f', class: "content" }, index.h("slot", { key: '86ee6e7002cffbae46a9db1df9e9d574a59a9f50' }))))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/dso-map-layer-object.cjs.entry.js

@@ -19,7 +19,7 @@ const MapLayerObject = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '5c90002aefb7e8d2909bcd9f186e245dd6f49a66', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, index.h("div", { key: '2fcd20641e4cb8315d8bc2be32274931a10980fc', class: "map-layer-object" }, index.h("div", { key: '9c405ad65801cc50636dd51cf073ea5371d94ecc' }, index.h("slot", { key: '772b7519bea83446c13c98b41998284903e98e95', name: "symbol" })), index.h("div", { key: '74f073d85af8ab9584563fdb9497556e36d43461' }, index.h("slot", { key: '9bc8dcd77172661daa1f98c7744002be4f638fb7' })), index.h("div", { key: '6634f4a1af4a24751e5c7e13ecd96f4510e74b1e', class: "slide-toggle-container" }, index.h("dso-slide-toggle", { key: '1e055de4b973ef732e86975f749dc766513868fa', accessibleLabel: "Toon op kaart", checked: this.active, onDsoActiveChange: this.handleActiveChange })))));
+        return (index.h(index.Host, { key: 'abbab8b3e9cb63d0041ebd6cd55853e8f2336db5', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, index.h("div", { key: 'd9d9593bdb8b5f92c21ca71282a146d99b9e96ed', class: "map-layer-object" }, index.h("div", { key: '24dad3d78d29f548a248e6ebe1a3082bb4d26890' }, index.h("slot", { key: '68c1ba383c8d62e5ba00eeb22f29c0955bab3411', name: "symbol" })), index.h("div", { key: '85810dcbd6771202fb7615bb550a862321f1a408' }, index.h("slot", { key: 'e00fd66d88a87d2451f1f53c9fc36c67e16fc1b0' })), index.h("div", { key: '5a37b2b10e6c954df2cc586a349b34ebff58af63', class: "slide-toggle-container" }, index.h("dso-slide-toggle", { key: 'b03e87e9317e7b0e90853621cd6b8a538d430fe3', accessibleLabel: "Toon op kaart", checked: this.active, onDsoActiveChange: this.handleActiveChange })))));
     }
 };
 MapLayerObject.style = mapLayerObjectCss();

package/dist/cjs/dso-map-layer.cjs.entry.js

@@ -22,7 +22,7 @@ const MapLayer = class {
         };
     }
     render() {
-        return (index.h(index.Fragment, { key: 'f276fa73a747d32b661eace9d507750806d326f4' }, index.h("div", { key: 'c2ba53849e4d7cff6bd77af155b6aea50239cd80', class: "map-layer" }, index.h("span", { key: '83ead9191fc01f511de50b16a2f7723accb5fa90', class: "map-layer-label" }, this.label), this.activatable && (index.h("div", { key: '7f04d01ae09df068365a110b03fca7ed2aa5a438', class: "slide-toggle-container" }, index.h("dso-slide-toggle", { key: '294d0aca0e8699794ba66b873a7d65cbaefec7af', accessibleLabel: "Toon op kaart", checked: this.active, onDsoActiveChange: this.handleActiveChange })))), index.h("slot", { key: '4e80145bdea752cf4002b68b5a6a0544d8be15f2' })));
+        return (index.h(index.Fragment, { key: 'ed6e45673c12d5eaa514e127d2e34515ab6bb701' }, index.h("div", { key: 'a1da54462631982faf426df2099e2a411b42a588', class: "map-layer" }, index.h("span", { key: '0c39e1c825b41a9deed3c19b06c128f44f7e0bd9', class: "map-layer-label" }, this.label), this.activatable && (index.h("div", { key: '4640edadd61211dd0d2f5af36962fb46ae03a743', class: "slide-toggle-container" }, index.h("dso-slide-toggle", { key: '4d15f98adc1fc862d021bb2ead9cc4faf5058c1c', accessibleLabel: "Toon op kaart", checked: this.active, onDsoActiveChange: this.handleActiveChange })))), index.h("slot", { key: 'b1e8e126d7e71198e44101f4957638ce9855b470' })));
     }
 };
 MapLayer.style = mapLayerCss();

package/dist/cjs/dso-map-overlays.cjs.entry.js

@@ -47,7 +47,7 @@ const MapOverlays = class {
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (index.h("fieldset", { key: '7d5393569bd4c33d22696aaee3dbb4308a9e7fbe', class: "form-group dso-checkboxes" }, index.h("legend", { key: '01bbd08d45ea56bcc02f6059e69bade5c298b83b', class: "sr-only" }, "Kaartlagen"), index.h("div", { key: 'd62f0086427b450d9ad2d3ca362847c77d908ad4', class: "dso-label-container" }, index.h("span", { key: '99c58b18fbed22423969314f372370f4eb6661dd', class: "control-label", "aria-hidden": "true" }, this.text("title"))), index.h("div", { key: '59f3a885d12e6b482b6b6940b173ac0ac8a42eba', class: "dso-field-container" }, this.overlays.map((overlay) => (index.h("dso-selectable", { key: overlay.id, type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[overlay.id] = ref), onDsoChange: (e) => this.overlayChangeHandler(overlay, e) }, overlay.name, overlay.info ? index.h("p", { slot: "info" }, overlay.info) : null))))));
+        return (index.h("fieldset", { key: '1d387606665b5f613e03213baa6f9cedccc255f7', class: "form-group dso-checkboxes" }, index.h("legend", { key: 'c6b0d884800bce02659dd7c59363e5b342523674', class: "sr-only" }, "Kaartlagen"), index.h("div", { key: '36c824ed776f75c715be5498837ab62b3d17f143', class: "dso-label-container" }, index.h("span", { key: '4c1e9360d0debbfc13fac06d6063a88d4790449f', class: "control-label", "aria-hidden": "true" }, this.text("title"))), index.h("div", { key: '1742c9e431ffa4c92f81a5df1ac37a80600fae5c', class: "dso-field-container" }, this.overlays.map((overlay) => (index.h("dso-selectable", { key: overlay.id, type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[overlay.id] = ref), onDsoChange: (e) => this.overlayChangeHandler(overlay, e) }, overlay.name, overlay.info ? index.h("p", { slot: "info" }, overlay.info) : null))))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/dso-mark-bar.cjs.entry.js

@@ -52,7 +52,7 @@ const MarkBar = class {
     render() {
         const current = this.current || 0;
         const totalCount = this.totalCount || 0;
-        return (index.h("div", { key: 'c910390a280323410612690ce9b9b61897013549', class: "dso-mark-bar" }, index.h("div", { key: 'cdd42f831f7db8f84bcc84062ad66092402727ec', class: "dso-mark-bar-input" }, index.h("input", { key: 'a65c2109c929c69d318479c0e5bf212e01e3ccc8', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), index.h("label", { key: 'a25f67483fbfe90274cb0ab43c90662f4d428fc9', htmlFor: "search-input" }, index.h("dso-icon", { key: '0a3ab8c86897b675d410ce45df8899e2e3b12f26', class: "dso-search-icon", icon: "search" }), index.h("span", { key: '0dcc1fd40b22ab8f1b0545641b2c64e16ecb1d8b', class: "label-text" }, this.label)), index.h("dso-icon-button", { key: '533ae60b2ce99d7cdd6a8eb0c68f6f2fdc348ebe', icon: "times", variant: "tertiary", label: "Zoekopdracht legen", onDsoClick: (e) => this.handleClear(e.detail.originalEvent) })), index.h("div", { key: '662c8f5823140f82256cae102dfaa64c142626f5', class: "dso-button-container" }, index.h("span", { key: '362a212a8b3d20f2e6083e11bc26a5e4746e5afc', class: "divider" }), index.h("dso-icon-button", { key: 'c44c43677f071df7e4cad780152feec507203556', icon: "chevron-up", variant: "tertiary", label: "Vorig zoekresultaat", onDsoClick: (e) => this.handlePrevious(e.detail.originalEvent), disabled: current <= 1 }), index.h("span", { key: '43195674b0b1370e93d920645894ed32680d14cf' }, current, "/", totalCount), index.h("dso-icon-button", { key: 'e235186b6f80d4c0305b6a7b60a5ba17b066db10', icon: "chevron-down", variant: "tertiary", label: "Volgend zoekresultaat", onDsoClick: (e) => this.handleNext(e.detail.originalEvent), disabled: current >= totalCount }))));
+        return (index.h("div", { key: '6355f83f24135af1b661720078f56bd2f994c492', class: "dso-mark-bar" }, index.h("div", { key: '2f53185bbb4d85112fc802776af57579c3ffd058', class: "dso-mark-bar-input" }, index.h("input", { key: '087bc8407629628122fdc25365d0cf71eedcbc20', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), index.h("label", { key: '18b2f104a66fbe30011509269dd16942572593a0', htmlFor: "search-input" }, index.h("dso-icon", { key: '8016f522e25f135811374f3ecceb5d02d4b33759', class: "dso-search-icon", icon: "search" }), index.h("span", { key: '14f044b9d6e5f601eaa1168ed7c2af4573339542', class: "label-text" }, this.label)), index.h("dso-icon-button", { key: 'e211e04b48ecd461a8a292f6f391c52c7e5d2ce2', icon: "times", variant: "tertiary", label: "Zoekopdracht legen", onDsoClick: (e) => this.handleClear(e.detail.originalEvent) })), index.h("div", { key: '3712d7f4eca1fa881d8c14f5ba92a5744ef9df65', class: "dso-button-container" }, index.h("span", { key: '4178d20c62601ebac4965693cfb11ad0c3023d4c', class: "divider" }), index.h("dso-icon-button", { key: '707467f4b526da1e26c47171c129332541ac5eec', icon: "chevron-up", variant: "tertiary", label: "Vorig zoekresultaat", onDsoClick: (e) => this.handlePrevious(e.detail.originalEvent), disabled: current <= 1 }), index.h("span", { key: 'f95e03b543ed91d349aa4bb2008feec68bbc857e' }, current, "/", totalCount), index.h("dso-icon-button", { key: '5ef4b0333e5098ce8b8d6b197c03d4bfc4467a2c', icon: "chevron-down", variant: "tertiary", label: "Volgend zoekresultaat", onDsoClick: (e) => this.handleNext(e.detail.originalEvent), disabled: current >= totalCount }))));
     }
 };
 MarkBar.style = markBarCss();

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

@@ -86,7 +86,7 @@ const Modal = class {
     }
     render() {
         var _a;
-        return (index.h("dialog", { key: 'ee7a1036ab1dfe13a9cde99c938b2ac17676e52d', class: "dso-modal", role: (_a = this.dialogRole) !== null && _a !== void 0 ? _a : undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onClick: (e) => this.handleDialogClick(e), onKeyDown: (e) => this.blockEscapeKey(e) }, index.h("div", { key: '14656bc85a2d0891fd68b162a96a2827bc6672ed', class: "dso-dialog", role: "document" }, this.modalTitle ? (index.h("div", { class: "dso-header" }, index.h("h2", { id: this.ariaId }, this.modalTitle), this.closable && (index.h("dso-icon-button", { id: "close-modal", icon: "times", variant: "tertiary", label: this.text("close"), onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) })))) : (index.h("span", { class: "sr-only", id: this.ariaId }, this.text("dialog"))), index.h("dso-scrollable", { key: '712c6de66982b6dfa2494e0440a85d652a4edaa7' }, index.h("div", { key: 'c91004b645f00dc94166665cb960c4352702ae51', class: "dso-body", tabIndex: 0 }, index.h("slot", { key: 'ac362abcac247ec40d0bdf86fafb657d0ffa75af', name: "body" }))), this.hasFooter && (index.h("div", { key: '9484d993a10c134304663efa3c16f7a51eef1b74', class: "dso-footer" }, index.h("slot", { key: 'cdddbb8a63bea8c8857ff4fe0e2016a620accff1', name: "footer" }))))));
+        return (index.h("dialog", { key: 'ef5d2276a32e11a109e4f670227077beff131794', class: "dso-modal", role: (_a = this.dialogRole) !== null && _a !== void 0 ? _a : undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onClick: (e) => this.handleDialogClick(e), onKeyDown: (e) => this.blockEscapeKey(e) }, index.h("div", { key: '1bc94ba3090333b0980475d9337f87d9e44e867a', class: "dso-dialog", role: "document" }, this.modalTitle ? (index.h("div", { class: "dso-header" }, index.h("h2", { id: this.ariaId }, this.modalTitle), this.closable && (index.h("dso-icon-button", { id: "close-modal", icon: "times", variant: "tertiary", label: this.text("close"), onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) })))) : (index.h("span", { class: "sr-only", id: this.ariaId }, this.text("dialog"))), index.h("dso-scrollable", { key: '7a1871b25a08170d03797054de351a464592723e' }, index.h("div", { key: '102f26f00123a6f8e58dd544bdcba29911352c9b', class: "dso-body", tabIndex: 0 }, index.h("slot", { key: '98a5d7680046d9e46b993d6f9c3f208d86224e1c', name: "body" }))), this.hasFooter && (index.h("div", { key: 'e9d1dab7323fff12723f06c418b155bbe3542f60', class: "dso-footer" }, index.h("slot", { key: '6182ecd6fd4bbaad51c8594d9542a06d1813c7b3', name: "footer" }))))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/dso-onboarding-tip.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
 var index = require('./index-2aek-b9X.js');
-var positionTooltip_function = require('./position-tooltip.function-ByMSSaYN.js');
-require('./floating-ui.dom-CHD5ZW0W.js');
+var positionTooltip_function = require('./position-tooltip.function-CDcvfQQh.js');
+require('./floating-ui.dom-Bp4TaUcL.js');
 
 const onboardingTipCss = () => `*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:rect(0 0 0 0)}::slotted([slot=heading]){display:flex !important;align-items:center !important;margin-block-end:0 !important;margin-block-start:0 !important;color:#fff !important;line-height:1.375 !important}:host{--_dso-button-primary-background-color:#fff;--_dso-button-primary-border-color:#fff;--_dso-button-primary-color:#000;--_dso-button-primary-hover-background-color:#ccc;--_dso-button-primary-hover-border-color:#ccc;--_dso-button-primary-hover-color:#000;--_dso-button-primary-active-background-color:#999;--_dso-button-primary-active-border-color:#999;--_dso-button-primary-active-color:#000;--_dso-button-primary-disabled-background-color:#fff;--_dso-button-primary-disabled-border-color:#fff;--_dso-button-primary-disabled-color:#b2b2b2;--_dso-button-secondary-background-color:#fff;--_dso-button-secondary-border-color:#fff;--_dso-button-secondary-color:#000;--_dso-button-secondary-hover-background-color:#ccc;--_dso-button-secondary-hover-border-color:#ccc;--_dso-button-secondary-hover-color:#000;--_dso-button-secondary-active-background-color:#999;--_dso-button-secondary-active-border-color:#999;--_dso-button-secondary-active-color:#000;--_dso-button-secondary-disabled-background-color:#fff;--_dso-button-secondary-disabled-border-color:#fff;--_dso-button-secondary-disabled-color:#b2b2b2;display:block;filter:drop-shadow(2px 2px 16px rgba(0, 0, 0, 0.4));transition:visibility 400ms, opacity 400ms}:host(:not([ready])){opacity:1;animation:400ms ease-in 1 normal both fadeInOpacity}:host([popover]){margin:0 !important;border:0;padding:0;background-color:transparent;overflow:unset}.onboarding-tip{font-family:Asap, sans-serif;font-style:normal;font-weight:400;line-height:1.5;line-break:auto;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;overflow-wrap:normal;word-spacing:normal;white-space:normal;font-size:14px;inset-block-start:0;inset-inline-start:0;z-index:410}@media screen and (max-width: 360px){.onboarding-tip{padding-inline-start:8px !important}}.dso-close{position:absolute;inset-block-start:4px;inset-inline-end:4px}.onboarding-tip-inner{--link-color:#fff;--link-hover-color:#b2b2b2;--link-visited-color:#7f7f7f;max-inline-size:min(360px, 100vw - 2 * 8px);max-block-size:calc(100vh - 10px);overflow:auto;padding-block:32px 8px;padding-inline:8px;border-radius:4px;display:block;font-size:1rem;position:relative;z-index:2;--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.onboarding-tip-inner a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-wit"))}.onboarding-tip-inner a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-wit"))}.onboarding-tip-inner a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-wit"))}.onboarding-tip-inner a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-wit"))}.onboarding-tip-inner{--_dso-icon-button-tertiary-color:#fff;background-color:#2b5780;color:#fff}@media screen and (max-width: 991px){.onboarding-tip-inner{max-block-size:unset}}.onboarding-tip-arrow{border-start-start-radius:4px;position:absolute;block-size:20px;inline-size:20px;background:#2b5780;z-index:1;pointer-events:none}.onboarding-tip-content-wrapper{padding-inline:16px;padding-block-end:16px}.onboarding-tip-content-heading{display:flex}.onboarding-tip-content-heading dso-icon{margin-inline-end:8px}@keyframes fadeInOpacity{0%{opacity:0}100%{opacity:1}}`;
 
@@ -76,7 +76,7 @@ const OnboardingTip = class {
     render() {
         var _a;
         const ariaLabel = (_a = this.headingSlottedElement) === null || _a === void 0 ? void 0 : _a.textContent;
-        return (index.h(index.Host, { key: 'd819fe1ae171a8db0594ebc594024d4648bf006d', popover: "manual", ready: this.ready, onAnimationend: () => (this.ready = true) }, index.h("div", { key: 'de196244db29891f948ab77f4f66dbb6568fe84b', role: "dialog", class: "onboarding-tip", "aria-label": ariaLabel, onKeyDown: this.blockEscapeKey, tabindex: -1 }, index.h("div", { key: '299416de5f0f8fbf1dbb1833c93cae7bce386ea7', class: "onboarding-tip-inner" }, index.h("div", { key: '2ca611a1029242013c3d4d64fdec99e4942aa56e', class: "onboarding-tip-content-wrapper" }, this.headingSlottedElement !== null && (index.h("div", { key: '80a2f51a5a4f6972e7949f37e3aeee8f7a904a40', class: "onboarding-tip-content-heading" }, index.h("dso-icon", { key: 'c3da42b106b11ca6b30b435f9d609a69cbf06fd5', icon: "light-bulb" }), index.h("slot", { key: '104787777d28b84b9d9f44bd836148c067eb97aa', name: "heading" }))), index.h("dso-icon-button", { key: '343d6dfefd5253acd8b767a3d6f9cc9d07d05155', class: "dso-close", label: "Sluiten", variant: "tertiary", icon: "times", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) }), index.h("slot", { key: '3acb3a6dd64f6ba0ae9051a751b436a4ef4cf9fc' }))), index.h("div", { key: 'b0107b1b4a640c324e7ca720f857ded0aec1f1f0', class: "onboarding-tip-arrow", ref: (ref) => (this.tipArrowRef = ref) }))));
+        return (index.h(index.Host, { key: 'ba1ed241b302472bafaed024d8cb2a3b134385bb', popover: "manual", ready: this.ready, onAnimationend: () => (this.ready = true) }, index.h("div", { key: 'd581bb62c69a607e9479229acaf3d200f8dfe9d5', role: "dialog", class: "onboarding-tip", "aria-label": ariaLabel, onKeyDown: this.blockEscapeKey, tabindex: -1 }, index.h("div", { key: 'f0c1ede7f35ddc4c83568f2db09d3851c5b2009a', class: "onboarding-tip-inner" }, index.h("div", { key: '99fc959506a0b53b6bffa8a4f61b65876cd4e573', class: "onboarding-tip-content-wrapper" }, this.headingSlottedElement !== null && (index.h("div", { key: '80be7f0ad09b9996cbcd8eec98540decbd8c0786', class: "onboarding-tip-content-heading" }, index.h("dso-icon", { key: '43bd3c7b0b0dad949985196a4a559c5ef69b7eec', icon: "light-bulb" }), index.h("slot", { key: '88efb37ba1d8caf1678c8deef81c7739d679c9a8', name: "heading" }))), index.h("dso-icon-button", { key: '26127795159df1998162f0c31b654e1e6ea69636', class: "dso-close", label: "Sluiten", variant: "tertiary", icon: "times", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) }), index.h("slot", { key: '8b002f540fcd38133d96e816fd006e6b5abfc1e9' }))), index.h("div", { key: '7f43f0af10b8d4af2e364961423d75bbe56b395d', class: "onboarding-tip-arrow", ref: (ref) => (this.tipArrowRef = ref) }))));
     }
     get headingSlottedElement() {
         return this.host.querySelector("[slot='heading']");

package/dist/cjs/dso-plekinfo-card.cjs.entry.js

@@ -49,7 +49,7 @@ const PlekinfoCard = class {
     }
     render() {
         const hasSymbol = this.symbolSlottedElement !== null;
-        return (index.h(index.Host, { key: 'c85829e5394b454b4b8321aaedc2d8a003217965', "has-symbol": hasSymbol }, index.h(WrapWijzigactie, { key: '381d4c329babc90d571721dce4adf54213565bdd', wijzigactie: this.wijzigactie }, index.h("div", { key: 'f5428a065521b0090f878836fe49a8500834f3eb', class: "dso-plekinfo-card-symbol", hidden: !hasSymbol }, index.h("slot", { key: 'c2d8beb448bccd85ed971c6a02e6dcbdf64a5c4a', name: "symbol" })), index.h("div", { key: 'e399e890106f6e682e7f15294abc148c499d4f6e', class: "dso-plekinfo-card-heading" }, this.href ? (index.h("a", { href: this.href, target: this.targetBlank ? "_blank" : undefined, rel: this.targetBlank ? "noopener noreferrer" : undefined, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, index.h("span", { class: "icon-container" }, this.targetBlank ? (index.h(index.Fragment, null, index.h("dso-icon", { icon: "external-link" }), index.h("span", { class: "sr-only" }, "(Opent andere website in nieuw tabblad)"))) : (index.h("dso-icon", { icon: "chevron-right" })), index.h("slot", { name: "heading" })))) : (index.h("slot", { name: "heading" })), this.metaSlottedElement !== null && index.h("slot", { key: 'df5638433f527a6f721116f5dccef25c1e2d9b94', name: "meta" }), this.interaction !== null && index.h("slot", { key: 'bca4e22d224a42974c4efb3aba87b74bf8c9c5ad', name: "interaction" })), index.h("div", { key: '7aa97a191e3aa8a1fc34dd8c87ab22a8402046a3', class: "dso-plekinfo-card-content" }, index.h("slot", { key: 'df4a923f270486da6e11326ba4a0cb2f9fc46f75', name: "content" })))));
+        return (index.h(index.Host, { key: '2866e252f13a703ee665c6873e9ebce171712f5a', "has-symbol": hasSymbol }, index.h(WrapWijzigactie, { key: '9b7928fe32e1b9aee41bac41286c34c86cb740d3', wijzigactie: this.wijzigactie }, index.h("div", { key: '8f365899b1a72b6788b5f9fe3026cf08dcadf39c', class: "dso-plekinfo-card-symbol", hidden: !hasSymbol }, index.h("slot", { key: 'a97698e558336efbb014e80c1af88052525f624e', name: "symbol" })), index.h("div", { key: '7e5171b34525d67b0ae06737e5ebe500c7d84201', class: "dso-plekinfo-card-heading" }, this.href ? (index.h("a", { href: this.href, target: this.targetBlank ? "_blank" : undefined, rel: this.targetBlank ? "noopener noreferrer" : undefined, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, index.h("span", { class: "icon-container" }, this.targetBlank ? (index.h(index.Fragment, null, index.h("dso-icon", { icon: "external-link" }), index.h("span", { class: "sr-only" }, "(Opent andere website in nieuw tabblad)"))) : (index.h("dso-icon", { icon: "chevron-right" })), index.h("slot", { name: "heading" })))) : (index.h("slot", { name: "heading" })), this.metaSlottedElement !== null && index.h("slot", { key: 'e7c0cdc80915e9bc1733bed4d938866c3ee66260', name: "meta" }), this.interaction !== null && index.h("slot", { key: '18852deb9114ce7152b0844fe284ca91acdb890f', name: "interaction" })), index.h("div", { key: '104987489255f9de27c518138e85804f6b993158', class: "dso-plekinfo-card-content" }, index.h("slot", { key: '98b1ba6cabb7df67d7afe088e87fcd092545be8a', name: "content" })))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/dso-progress-indicator.cjs.entry.js

@@ -24,7 +24,7 @@ const Progressindicator = class {
         this.text = i18n.i18n(() => this.host, translations);
     }
     render() {
-        return (index.h(index.Host, { key: '6a5b6341f74d9ae115bc77333ce90014c6160224' }, index.h("span", { key: '72788ccf13a8861fa1760df72cfb6c653010f597', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, index.h("dso-icon", { key: 'ffcb4f515a4c712ee2ad3d65217e3737807f60ce', icon: "spinner" })), index.h("span", { key: '0e93dde2c4da71b976592c6f5f1d10a112cd30c5', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label || this.text("label"))));
+        return (index.h(index.Host, { key: '8ab3db9242f44f583258a9f313a8e3fbb9b72d0d' }, index.h("span", { key: '193a169135e1617727e86cc1c11cf87250220493', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, index.h("dso-icon", { key: '1d5e137b36f95fb9600545f58687a401276a27b7', icon: "spinner" })), index.h("span", { key: 'e5d674bd60e0037ad0e78ed7129ac74002ce38f2', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label || this.text("label"))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/dso-project-item.cjs.entry.js

@@ -9,7 +9,7 @@ const ProjectItem = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Fragment, { key: '185d37771a61499c4dea89bb66d28283583da6f7' }, index.h("div", { key: '17f1973490ea3c4b4b0d1b6051e3bcc587035d56', class: "project-item-header" }, index.h("div", { key: '8a0a0fcb17da4d3bc2a69fe96b818f168b07830d', class: "project-item-title" }, index.h("slot", { key: '4160b51c9b4cca09bc3173c64505c764c128fdd9', name: "title" }), this.label && (index.h("dso-label", { key: '5b2d8afa3160e301802d3accb74314cd84894c8b', status: "error", compact: true }, this.label))), index.h("div", { key: '145e89a71c030994c3da2c709ec4408141d566d8', class: "project-item-actions" }, index.h("slot", { key: '15fc8128afc40d941b03b4b03b3d021e55b60a10', name: "actions" }))), index.h("div", { key: '1d0827720fe361319ff298e286779efc858c7910', class: "project-item-info" }, index.h("div", { key: '43f16dc31d3b1f98f1461d8ea0385eef7ce3fdb6', class: "project-item-progress" }, index.h("slot", { key: '29ff9265e1ba9e5eb2dbac7fd112dea7a5db402d', name: "progress" })), index.h("div", { key: 'cf3e3d8fa0cd8896151672de43b7f43ffcc6a5aa', class: "project-item-status" }, index.h("slot", { key: '7bac2642ce089ad16c823af0030ce8fa55700eeb', name: "status" })))));
+        return (index.h(index.Fragment, { key: '12935f64b5c0cac32850e92ec594eac15fda660e' }, index.h("div", { key: '1125f19e534e74c3b50519b66b0117063e16ea9c', class: "project-item-header" }, index.h("div", { key: '262432d19146db36ef8dca100191299a1b991af1', class: "project-item-title" }, index.h("slot", { key: 'e84d0c1bc18e5f7c7a88ee21d522d5dfa8b2558a', name: "title" }), this.label && (index.h("dso-label", { key: 'cfe1a7b9d673c7e3513607cf86d745441df63ff7', status: "error", compact: true }, this.label))), index.h("div", { key: '05f7192b693cb027360cd10f081e09c767964f6b', class: "project-item-actions" }, index.h("slot", { key: '3e6aba40efd02de33a71a6288a9aab9845d124af', name: "actions" }))), index.h("div", { key: '3dc045a2481645f91906c2452ec7b64a1c009986', class: "project-item-info" }, index.h("div", { key: '7ab685ce1d25cca777f2239143b390ff630dc27a', class: "project-item-progress" }, index.h("slot", { key: '830643aa3b99b44dbcd6a8a5eab01a6ef0f8999e', name: "progress" })), index.h("div", { key: 'd87d23373afa3019b7f18668b13eabdec8a41cf4', class: "project-item-status" }, index.h("slot", { key: '7a52a02dca7d72cf356884333a3151e4c707c521', name: "status" })))));
     }
 };
 ProjectItem.style = projectItemCss();