@dso-toolkit/core 99.0.0 → 99.2.0

package/dist/collection/components/icon/icon.js

@@ -258,7 +258,7 @@ export class Icon {
             if (!icon) {
                 throw new TypeError(`Unknown svg: ${this.icon}`);
             }
-            return h("span", { key: '96e1b377680a8bbab317bcdde98d645fbc4dc549', class: "icon-container", innerHTML: icon.svg });
+            return h("span", { key: '52a679f5b8b8c38ffa8f961b2a750c71f65fcee7', class: "icon-container", innerHTML: icon.svg });
         }
     }
     static get is() { return "dso-icon"; }

package/dist/collection/components/icon-button/icon-button.js

@@ -81,7 +81,7 @@ export class IconButton {
         this.cleanUpTooltip();
     }
     render() {
-        return (h("button", { key: 'f5126ed513558dc038953ceb269dd42017aa3ae1', ref: (element) => (this.buttonElRef = element), type: "button", disabled: this.disabled, "aria-pressed": this.toggled ? "true" : "false", "aria-label": this.label, class: `icon-button dso-${this.variant} ${this.toggled ? "toggled" : ""}`, onMouseEnter: this.handleShowTooltip, onMouseLeave: this.handleHideTooltip, onFocus: this.handleShowTooltip, onBlur: this.handleHideTooltip, onClick: this.handleClick }, h("dso-icon", { key: '3d976d48260235aea14788f699ff9573a322012f', icon: this.icon, "aria-hidden": "true" }), h(Tooltip, { key: 'ba2facdf1eea48606b3fd45102074a0d199fe9b4', tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, this.label)));
+        return (h("button", { key: '546ff22e7f3196cb718cf28591d699e1c4cf6d2f', ref: (element) => (this.buttonElRef = element), type: "button", disabled: this.disabled, "aria-pressed": this.toggled ? "true" : "false", "aria-label": this.label, class: `icon-button dso-${this.variant} ${this.toggled ? "toggled" : ""}`, onMouseEnter: this.handleShowTooltip, onMouseLeave: this.handleHideTooltip, onFocus: this.handleShowTooltip, onBlur: this.handleHideTooltip, onClick: this.handleClick }, h("dso-icon", { key: 'fbaa877286dcd6f3484e91d5328ff025d2f1cb60', icon: this.icon, "aria-hidden": "true" }), h(Tooltip, { key: '87e6fe5386d92d48c6edfd4ce2fe91e6f4a43ccd', tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, this.label)));
     }
     static get is() { return "dso-icon-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/info/info.js

@@ -1,7 +1,7 @@
 import { Fragment, h } from "@stencil/core";
 export class Info {
     render() {
-        return (h(Fragment, { key: '3155979f2b9164ed98c842e27b23ee3960aaadd4' }, h("slot", { key: '056134ca144d2b3ab4268d0d12cfaa94b5a46536' }), !this.fixed && (h("dso-icon-button", { key: '99252360520991c65f3900df6290b6fb299e2857', label: "Sluiten", variant: "tertiary", icon: "cross", onDsoClick: (e) => this.dsoClose.emit(e.detail.originalEvent) }))));
+        return (h(Fragment, { key: '3b3a3390da24484d21869661692c293f766bb06b' }, h("slot", { key: '83976a207e4c1505329876192c83e6eccc1f6a52' }), !this.fixed && (h("dso-icon-button", { key: 'd1d5a28081e3ac03920b1ca3b6613d2564f3c1ee', label: "Sluiten", variant: "tertiary", icon: "cross", onDsoClick: (e) => this.dsoClose.emit(e.detail.originalEvent) }))));
     }
     static get is() { return "dso-info"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/info-button/info-button.js

@@ -114,7 +114,7 @@ export class InfoButton {
         delete this.mutationObserver;
     }
     render() {
-        return (h(Host, { key: '31ce4940a10c5ab113b9f25c12cf40ac8d16fb59', onKeyDown: this.keyDownHandler }, h("dso-icon-button", { key: 'b27118b176790485247ee5a4c6c684058b652af9', variant: "tertiary", label: this.label, onDsoClick: (e) => this.handleToggle(e.detail.originalEvent), icon: this.active || this.toggletipActive ? "info-solid" : "info-outline", ref: (element) => (this.button = element), "aria-expanded": this.toggletipActive ? "true" : "false", "aria-controls": this.hasToggletip ? "toggletip-content" : undefined }), this.hasToggletip && (h(Tooltip, { key: '35ccc8f40c131e6f21061b2b06d64b593ad7dd4b', tipElementRef: (element) => (this.toggletipElRef = element), tipArrowElementRef: (element) => (this.toggletipArrowElRef = element) }, h("dso-scrollable", { key: 'c13c0433ec17fd17f2fae88d1acd1699eb10df17', ref: (element) => (this.restrictContentElement = element), id: "toggletip-content", "aria-live": "polite" }, h("slot", { key: 'a2991c55a469c0996ae411d1828bb294c4713ae6', name: "toggletip" }))))));
+        return (h(Host, { key: 'fd3542f889b774cc07b357a9d8b63e1615af2158', onKeyDown: this.keyDownHandler }, h("dso-icon-button", { key: 'b50c38ee53f6c094aa03f5684f3fb23a46b4a92c', variant: "tertiary", label: this.label, onDsoClick: (e) => this.handleToggle(e.detail.originalEvent), icon: this.active || this.toggletipActive ? "info-solid" : "info-outline", ref: (element) => (this.button = element), "aria-expanded": this.toggletipActive ? "true" : "false", "aria-controls": this.hasToggletip ? "toggletip-content" : undefined }), this.hasToggletip && (h(Tooltip, { key: 'da0bb36ffa6f45cebb4a4d9791364f48f636d995', tipElementRef: (element) => (this.toggletipElRef = element), tipArrowElementRef: (element) => (this.toggletipArrowElRef = element) }, h("dso-scrollable", { key: '3afc6d36167613570f4d94b3371ba979d2965999', ref: (element) => (this.restrictContentElement = element), id: "toggletip-content", "aria-live": "polite" }, h("slot", { key: '071ed39f8f84e9fe585fea0847294e51897ec787', name: "toggletip" }))))));
     }
     static get is() { return "dso-info-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/input-range/input-range.js

@@ -10,13 +10,13 @@ export class InputRange {
         const min = this.min || 0;
         const max = this.max || 100;
         const step = this.step || 1;
-        return (h(Fragment, null, this.description && (h("span", { key: '425605bca4af66d7d97f731cbe340c6d35e148d6', id: "description", hidden: true }, this.description)), h("span", { key: 'ecb976bd2d9c8a6b9410696e5de60ac7cf0b7d39', class: "counter", "aria-hidden": "true" }, min, this.unit), h("input", { key: '8026bcb5e4260198042a44a3c2faa80d61aa0ece', type: "range", min: min, max: max, step: step, value: this.value, class: "input", "aria-label": this.label, "aria-describedby": this.description ? "description" : undefined, onChange: (event) => this.dsoChange.emit({
+        return (h(Fragment, null, this.description && (h("span", { key: '89af1e58915297fc3bbb8f47d5b02e0e1a3e1215', id: "description", hidden: true }, this.description)), h("span", { key: 'd06bec792a3d433a3e81f8238f7e278148d2b870', class: "counter", "aria-hidden": "true" }, min, this.unit), h("input", { key: '4c61d74eb5d701d0d523fc9c6f519e38f2ae1d3f', type: "range", min: min, max: max, step: step, 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,
-            }) }), h("span", { key: '4ea49bbf4226ad3f96dff5361b5b6272526018e6', class: "counter", "aria-hidden": "true" }, max, this.unit)));
+            }) }), h("span", { key: '554866e752da5b888a67dcde3ad1ca14d249bdfb', class: "counter", "aria-hidden": "true" }, max, this.unit)));
     }
     static get is() { return "dso-input-range"; }
     static get encapsulation() { return "shadow"; }

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

@@ -118,11 +118,11 @@ export class Label {
         this.isTruncated = false;
     }
     render() {
-        return (h(Fragment, { key: '62ff5e1c7a7d85020e47e26766526f2c50b96a03' }, h("span", { key: 'c1e2cf2b3c0d7b822184b057d78be3cd351ecc52', "aria-describedby": this.isTruncated ? "toggle-anchor" : null, class: clsx("dso-label", {
+        return (h(Fragment, { key: '1df6fe712a0bf086f0b2573e948683720ba215a2' }, h("span", { key: 'fb256c30a0c5f9071997e053ec27e288a1a583f0', "aria-describedby": this.isTruncated ? "toggle-anchor" : null, class: clsx("dso-label", {
                 [`dso-label-${this.status}`]: this.status,
                 "dso-compact": this.compact && !this.removable,
                 "dso-hover": this.removeHover || this.removeFocus,
-            }) }, h("slot", { key: '1bb784f120695b2827846d14b9da54c12b4e3f80', name: "symbol" }), h("span", { key: 'c9fc4b3d33156fa7f53bcde7135cac5045ec1014', class: "dso-label-content", ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.isTruncated ? 0 : undefined, onMouseEnter: this.handleShowTooltip, onMouseLeave: this.handleHideTooltip, onFocus: this.handleShowTooltip, onBlur: this.handleHideTooltip }, h("slot", { key: '4f8454a833534fe9d80658e78406d43cc0f216ac' })), this.removable && (h("dso-icon-button", { key: 'c797dff48da44b2ec475b31434e451206ccca1de', variant: "tertiary", icon: "cross", 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 && (h(Tooltip, { key: 'a8feb69f90da4616a0b61c689ceb2412f989a2d8', tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, h("span", { key: '211f13fc2f281a3c0bf16cdc28ed8e566318b740', id: "toggle-anchor" }, this.labelText)))));
+            }) }, h("slot", { key: '84ff08b93ecf1749a81efec382c3e80e21d588f5', name: "symbol" }), h("span", { key: '7803661c693cffa79935e95f2028882c2366dd4e', class: "dso-label-content", ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.isTruncated ? 0 : undefined, onMouseEnter: this.handleShowTooltip, onMouseLeave: this.handleHideTooltip, onFocus: this.handleShowTooltip, onBlur: this.handleHideTooltip }, h("slot", { key: '7fa038e58dad22c68c892ea3c5a3247f684b260b' })), this.removable && (h("dso-icon-button", { key: 'c6fe6c7ccd0c6d75b1ffd487ca214020b82f409a', variant: "tertiary", icon: "cross", 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 && (h(Tooltip, { key: '6a8b479fe15eb68458bfef2db7d61142006c6239', tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, h("span", { key: '44d7e51a7b3d8560b71764b972d61588baf21ea4', id: "toggle-anchor" }, this.labelText)))));
     }
     static get is() { return "dso-label"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/legend/legend-group/legend-group.js

@@ -41,7 +41,7 @@ export class LegendGroup {
         delete this.mutationObserver;
     }
     render() {
-        return (h(Host, { key: 'de054c05c8b632acf2066f928ca831cca581f526' }, h("div", { key: '7000ba4e8830e0c18c158c18b7647c8b68a2c59f', class: "legend-group-header" }, h("slot", { key: 'f8b269aa6c64ece723a918a7f21543a2a23c17ac', name: "heading" }), this.mode && (h("dso-icon-button", { key: '4ad2f228527cc0757f367be21a4e5da2224ee943', label: this.mode === "view" ? this.text("edit") : this.text("view"), icon: this.mode === "view" ? "pencil" : "check", variant: "tertiary", onDsoClick: this.toggleMode }))), this.mode === "edit" && h("slot", { key: '12dec982e65f3eb5320e2b2524187650431095ad', name: "options" }), h("slot", { key: '79b643e06c6d9a276581c1f9a1288adc6b674960' })));
+        return (h(Host, { key: 'a683dbf918547b7faafccdcab849136d4bb8f15a' }, h("div", { key: '223c7ceb2261bbafc6af310a72cc0979bfa0eeac', class: "legend-group-header" }, h("slot", { key: 'a6f3d84be2c74e155009f6a288551f25651b6756', name: "heading" }), this.mode && (h("dso-icon-button", { key: 'f3359494fc1236f9a6027ba6e9d8c26f380bc5ec', label: this.mode === "view" ? this.text("edit") : this.text("view"), icon: this.mode === "view" ? "pencil" : "check", variant: "tertiary", onDsoClick: this.toggleMode }))), this.mode === "edit" && h("slot", { key: '97ff130ba7569d89245d6c39fe224de19e163428', name: "options" }), h("slot", { key: 'be39f41686b4f34755317344cec217580df96cc3' })));
     }
     static get is() { return "dso-legend-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/legend/legend-item/legend-item.js

@@ -57,7 +57,7 @@ export class LegendItem {
         const accessibleLabel = label?.textContent
             ? this.text("makeActive", { label: label.textContent.toLowerCase() })
             : this.text("makeActiveDefault");
-        return (h(Host, { key: 'bd84ceaef3923e55a21e1980d83b7862539432a4', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: '52efe9116e2336f7674be4e52dd245b686f7fc47', class: clsx("legend-item", { "legend-item-symbol": hasSymbol }) }, hasSymbol && (h("div", { key: 'e9bf8ff418b5a627b0f258c1ea98c9cb18a07d87' }, h("slot", { key: 'f38776346a1395fc33084db068fd727be3903619', name: "symbol" }))), h("div", { key: '0ece5eadc942c8ea75d40578b1fd42a80cedb509' }, h("slot", { key: '0ecb243c2af7f04907f96c3ce9e49e6aa222ccba', name: "label" })), this.disabled && this.disabledMessage && (h("dso-info-button", { key: '717196728bb8d2b14fd052879d982f15ae9b83b4', label: this.text("disabledInfo"), toggletipPlacement: "bottom" }, h("div", { key: '93f16b99954e333abfafee3f19304a625d30cb09', slot: "toggletip" }, this.disabledMessage))), h("div", { key: '6870c47f2d36f5268a81569427f6ac9ab75c87de', class: "legend-item-right-content" }, this.renderRightContent(hasOptions, accessibleLabel))), hasOptions && (h("div", { key: '7fed4c7b6405a36b9c13e150535e60db7cd28ac9', hidden: this.disabled || !this.showOptions, class: "options" }, h("slot", { key: '7338102ae58eacc1a23e21b3497e47c4502f2f67', name: "options" })))));
+        return (h(Host, { key: '6e91a31c332be4e64344129f9a55b494362dc864', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: '2df3e538658684f067f514cdd4ca34ee889c1048', class: clsx("legend-item", { "legend-item-symbol": hasSymbol }) }, hasSymbol && (h("div", { key: '6b8ecd2ba1ea41963d3967700685e52bc30cf6cf' }, h("slot", { key: '36668d6047e34c91505ee305cd32fade84c02542', name: "symbol" }))), h("div", { key: '47a0733a9c62fc325305e6d26c93483dc68f525b' }, h("slot", { key: 'a9b9991c904252ce3cfa4f302af0e8895ed1e52e', name: "label" })), this.disabled && this.disabledMessage && (h("dso-info-button", { key: '3ac075632a7288f7149067d50307ac8ff7d47456', label: this.text("disabledInfo"), toggletipPlacement: "bottom" }, h("div", { key: '98891613b35a41fcfbdef60ef1680261b2522b23', slot: "toggletip" }, this.disabledMessage))), h("div", { key: 'c60ac27647e62f70795bb71d2bc189bfb0d82502', class: "legend-item-right-content" }, this.renderRightContent(hasOptions, accessibleLabel))), hasOptions && (h("div", { key: '726712b7ae2018348e247776de42cd649d762d5f', hidden: this.disabled || !this.showOptions, class: "options" }, h("slot", { key: '44e1d6a86ef49a88a59cf107e1c7ec9a59748a7b', name: "options" })))));
     }
     static get is() { return "dso-legend-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/legend/legend.js

@@ -63,7 +63,7 @@ export class Legend {
         this.moveFocusToTab(next);
     }
     render() {
-        return (h(Host, { key: 'c52865705dd670cd75f049ddca67f6a8c5c4114c' }, h("div", { key: '3120fd9ee1be5c610603964d01cdcc832ef08fac', class: "topbar" }, h("div", { key: '33f9c1a8526977a70b610ced6006bcbd93029722', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, this.tabItems.map((tabItem) => (h("button", { class: clsx("tab", { active: tabItem.active }), role: "tab", "aria-selected": tabItem.active ? "true" : "false", ...(!tabItem.active ? { tabIndex: -1 } : {}), onClick: this.clickHandler }, tabItem.label)))), h("dso-icon-button", { key: '1894b2f12fe331ca852da786b8f5f438a593243f', icon: "cross", variant: "tertiary", label: this.text("closeLegend"), class: "close-button", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e.detail.originalEvent }) })), h("dso-scrollable", { key: 'b03dabf5090ea1e4d90645470a12b88270036f2d', class: "content" }, h("div", { key: '1d9e153f78d624691eaab98f9c4a22ff9ca6f69c', role: "tabpanel", tabIndex: 0 }, h("slot", { key: '60a675f262453c9e1e2c5659265d1a6e6029834d' })))));
+        return (h(Host, { key: '8447a6461e1125963afc29bfb49102d8df303cba' }, h("div", { key: 'fcc9506e7c0d033e7c4e62d690d56db9c4416187', class: "topbar" }, h("div", { key: '76f9c23ee13593faae4582703d8127aaefef501a', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, this.tabItems.map((tabItem) => (h("button", { class: clsx("tab", { active: tabItem.active }), role: "tab", "aria-selected": tabItem.active ? "true" : "false", ...(!tabItem.active ? { tabIndex: -1 } : {}), onClick: this.clickHandler }, tabItem.label)))), h("dso-icon-button", { key: '72d00c8ea5b1268fdce677935fd8de673c643daf', icon: "cross", variant: "tertiary", label: this.text("closeLegend"), class: "close-button", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e.detail.originalEvent }) })), h("dso-scrollable", { key: '4c968b740282428b393fe03a1e18ec6f7caf8d08', class: "content" }, h("div", { key: 'e195f6ea4cae039469e4730adf4b253f3e34b000', role: "tabpanel", tabIndex: 0 }, h("slot", { key: '575eccc3604b4c2aa7d8e71294953fab94984a35' })))));
     }
     static get is() { return "dso-legend"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/list-button/list-button.css

@@ -191,7 +191,7 @@
 .dso-input-number .dso-input-step-counter {
   text-align: center;
   inline-size: 1.5rem;
-  font-size: 14px;
+  font-size: 0.875rem;
 }
 
 .dso-button-group {

package/dist/collection/components/list-button/list-button.js

@@ -2,6 +2,7 @@ import { Fragment, forceUpdate, h, } from "@stencil/core";
 import { clsx } from "clsx";
 export class ListButton {
     constructor() {
+        this.focusIncrementButtonAfterRender = false;
         /**
          * Whether the List Button is checked.
          */
@@ -27,6 +28,10 @@ export class ListButton {
         if (!this.subcontentSlot?.hasAttribute("aria-hidden")) {
             this.subcontentSlot?.setAttribute("aria-hidden", "true");
         }
+        if (this.focusIncrementButtonAfterRender) {
+            this.focusIncrementButtonAfterRender = false;
+            void this.incrementButton?.setFocus();
+        }
     }
     disconnectedCallback() {
         this.mutationObserver?.disconnect();
@@ -38,6 +43,9 @@ export class ListButton {
             if (!this.isNewCountValid(newValue)) {
                 return;
             }
+            if (direction === "decrement" && newValue === 1) {
+                this.focusIncrementButtonAfterRender = true;
+            }
             this.dsoCountChange.emit({
                 originalEvent: e,
                 count: newValue,
@@ -65,7 +73,7 @@ export class ListButton {
     }
     render() {
         const selected = this.checked || (this.count !== undefined && this.count > 0);
-        return (h("div", { key: '549a1fe9a71e677163cfb544e6cb30950e635455', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: '34b06c07c5c14d68e32d5f78943c5fedd5a47bd0', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("dso-selectable", { key: 'bd046fbb9a96ca2c9457ba5db4f167df6df7c3da', type: "checkbox", value: "list-button", name: "naam", checked: selected, disabled: this.disabled }, h("span", { key: '65e67a3e8213239790a1041a8a047c90dad0d31c' }, this.label, this.sublabel && h("span", { key: '961e0a921418969fdb4927774f515df4c1aed3ba', class: "sr-only" }, " ", this.sublabel), this.subcontentSlot && (h("span", { key: '39bcb26ce0441b8358f7a38dd3745b7775e30dcb', class: "sr-only" }, this.subcontentPrefix && this.subcontentPrefix + ":", " ", h("span", { key: 'b15d1dcc137f7d5dba66dafa64602402d03c74ea', innerHTML: this.subcontentSlot.innerHTML }))))), this.sublabel && h("span", { key: '9781878a94e715eead161ead1691a1585a186101', class: "dso-sublabel" }, this.sublabel), this.subcontentSlot && (h("div", { key: '5429de2c048798c8540c24f2d9f3379955ee2c87', class: "subcontent" }, h("slot", { key: '7e011245155eaf91a31d0d5f8c50324e03bfc202', name: "subcontent" })))), this.count !== undefined && this.count > 0 && (h("div", { key: '55517dd7dafe0ccb4de70bd8a5a825f33d5dbc90', class: "dso-input-number" }, this.count > 1 && (h(Fragment, { key: '254da3562b2dc815a4a2f5dddbefedcd77f14c3d' }, h("dso-icon-button", { key: '0ac94c6cd14fd240e490520fc741ec9c12e0f636', label: "Aantal verlagen", variant: "tertiary", icon: "minus-circle-outline", disabled: this.count === Number(this.min) || this.disabled, onDsoClick: (e) => this.stepValue(e, "decrement") }), h("span", { key: '9212766e425c3f2a674b4d2abfaa183121024b85', class: "dso-input-step-counter", "aria-label": "Aantal", "aria-live": "polite" }, this.count))), h("dso-icon-button", { key: 'ea204df7c811cbfae6617793e43f754fda3083bf', label: "Aantal verhogen", variant: "tertiary", icon: "plus-circle-outline", disabled: this.count === Number(this.max) || this.disabled, onDsoClick: (e) => this.stepValue(e, "increment") })))));
+        return (h("div", { key: '28dc8cacf3635cf83f3bc526cce61870c16213d7', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: '80788b4dae346a6ca92c37d3a23f58993a6f061b', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("dso-selectable", { key: '123ae2c35a23673eeaa39a42e021edabb4b240a2', type: "checkbox", value: "list-button", name: "naam", checked: selected, disabled: this.disabled }, h("span", { key: 'a882a847c1e0a0da71d45afa5f6bdca506655c9d' }, this.label, this.sublabel && h("span", { key: 'c87a1d5a74e8f76943943f21eda4ca70977a120b', class: "sr-only" }, " ", this.sublabel), this.subcontentSlot && (h("span", { key: '8f11fd1a6285c3ef92d61679c2f28b4875ddbe5c', class: "sr-only" }, this.subcontentPrefix && this.subcontentPrefix + ":", " ", h("span", { key: '987ab02881c3e7eaf6efb1a16fbbd75855be2959', innerHTML: this.subcontentSlot.innerHTML }))))), this.sublabel && h("span", { key: 'f58beece16efb79cf8c169fd48430ad64be5fe56', class: "dso-sublabel" }, this.sublabel), this.subcontentSlot && (h("div", { key: 'f4c6f59c9a327ac075608952ab81c9f38c886464', class: "subcontent" }, h("slot", { key: 'e0d025b91a7f60170dce5975a31926673e00f6f1', name: "subcontent" })))), this.count !== undefined && this.count > 0 && (h("div", { key: 'ce9f805f4cca58986ea9a1c18b5c6f982325b4d2', class: "dso-input-number" }, this.count > 1 && (h(Fragment, { key: 'baa2dbcef366d7da042161dacdfe6548aa2e7667' }, h("dso-icon-button", { key: '98c240428924462f07caabbd3187409c08147062', label: "Aantal verlagen", variant: "tertiary", icon: "minus-circle-outline", disabled: this.count === Number(this.min) || this.disabled, onDsoClick: (e) => this.stepValue(e, "decrement") }), h("span", { key: '4ce7451b2740c43259a610077a7d37022607764f', class: "dso-input-step-counter", "aria-hidden": "true" }, this.count))), h("span", { key: '340c4db349360e7adab309d84fe02a40795237ac', class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }, this.count), h("dso-icon-button", { key: 'd1365a96fb41df03e35ce8687d994d102e338f84', ref: (element) => (this.incrementButton = element), label: "Aantal verhogen", variant: "tertiary", icon: "plus-circle-outline", disabled: this.count === Number(this.max) || this.disabled, onDsoClick: (e) => this.stepValue(e, "increment") })))));
     }
     static get is() { return "dso-list-button"; }
     static get encapsulation() { return "shadow"; }
@@ -97,7 +105,7 @@ export class ListButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "label"
             },
             "sublabel": {
@@ -116,7 +124,7 @@ export class ListButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "sublabel"
             },
             "count": {
@@ -135,7 +143,7 @@ export class ListButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "count"
             },
             "min": {
@@ -154,7 +162,7 @@ export class ListButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "min"
             },
             "max": {
@@ -173,7 +181,7 @@ export class ListButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "max"
             },
             "checked": {
@@ -232,7 +240,7 @@ export class ListButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "subcontent-prefix"
             }
         };

package/dist/collection/components/logo/logo.js

@@ -23,7 +23,7 @@ export class Logo {
     }
     render() {
         return (h(Fragment, null, this.logoUrl ? (h("a", { class: "logo-url", href: this.logoUrl, onClick: this.handleLogoClick }, h(DsoLogo, { name: this.name }))) : (h(DsoLogo, { name: this.name })), this.label &&
-            (!this.labelUrl ? (h("span", { class: "logo-label" }, this.label)) : (h("a", { class: "logo-label-url", href: this.labelUrl, onClick: this.handleLabelClick }, h("span", { class: "logo-label" }, this.label)))), this.ribbon && h("div", { key: '25eec1d7172269ce1acc285de6ec98c187825fa1', class: "logo-ribbon" }, this.ribbon)));
+            (!this.labelUrl ? (h("span", { class: "logo-label" }, this.label)) : (h("a", { class: "logo-label-url", href: this.labelUrl, onClick: this.handleLabelClick }, h("span", { class: "logo-label" }, this.label)))), this.ribbon && h("div", { key: 'd9b8e664223d4763b318ca259cd3090ccc3b0a96', class: "logo-ribbon" }, this.ribbon)));
     }
     static get is() { return "dso-logo"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/map-base-layers/map-base-layers.js

@@ -26,7 +26,7 @@ export class MapBaseLayers {
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: 'f905ab8e7758f4ee8eadd3687fc18445770bf611', class: "form-group dso-radios" }, h("legend", { key: 'd498d24d45289126c215c7efb691d0ea540f309a', class: "sr-only" }, "Achtergrond"), h("div", { key: '77a480daed34c328881671403de969757f35c4c8', class: "dso-label-container" }, h("span", { key: '00d32dd55f7061bb15c4fb03f2e7e8381068aa61', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: '6793671b625b99be9dfc32d07c64947f41e0f046', class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (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 ? h("p", { slot: "info" }, baseLayer.info) : null))))));
+        return (h("fieldset", { key: '26e0f25a4b9d26dfe2ad804c65253a08205909d4', class: "form-group dso-radios" }, h("legend", { key: 'fe913ce00c8ace09909deffc9e7e39a8891fe7f9', class: "sr-only" }, "Achtergrond"), h("div", { key: '7ecc76a72df6571c43902b8431bbf579259204c7', class: "dso-label-container" }, h("span", { key: 'abd27ffee2fa309cf2248a8f11a3e20e2053a1b2', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: 'fa9c69b1cd28e2646c8a92cbd6550d39c1ba3113', class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (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 ? h("p", { slot: "info" }, baseLayer.info) : null))))));
     }
     static get is() { return "dso-map-base-layers"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/map-controls/map-controls.js

@@ -102,7 +102,7 @@ export class MapControls {
         this.clearPostTransitionTimeout();
     }
     render() {
-        return (h(Fragment, { key: '703fbea408b19cf0e0838a2978e2a798c76dd1c1' }, h("dso-icon-button", { key: 'e9fbef89d1b944712295514f0d02e8322b5cd21f', label: this.text("layersButton"), icon: "layers", variant: "map", "aria-controls": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), "aria-expanded": this.open, tooltipPlacement: "left", class: "toggle-visibility-icon-button", onDsoClick: (e) => this.toggleVisibilityInternal(e.detail.originalEvent, __classPrivateFieldGet(this, _MapControls_toggleIconButtonElement, "f")), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleIconButtonElement, element, "f")) }), h("button", { key: 'd839e614a64f7d2812d892582f0c8809f81e934a', type: "button", class: "dso-map toggle-visibility-button", "aria-controls": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), "aria-expanded": this.open, onClick: (e) => this.toggleVisibilityInternal(e, __classPrivateFieldGet(this, _MapControls_toggleButtonElement, "f")), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: 'abc286d1b6d791c9c3b62094e1be67586a623de3', icon: "layers" }), h("span", { key: '8a0ab41791f4e91284cbda3ce0539ec17488328a' }, this.text("layersButton"))), h("dso-button-group", { key: '051129619c434c8cbc458f812d66649b380cf71c', class: "zoom-buttons", direction: "column" }, h("dso-icon-button", { key: '69917e8ed0bbb1f2ffa712dce666912dae10e006', 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" }), h("dso-icon-button", { key: '4bf7591313b9cc8846b64a491e7f497ac0d3a6b4', 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" })), h("section", { key: 'f9ede31ee15774c190504cadbcce5cd3becc9599', id: __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), hidden: this.hideContent, role: "region", onKeyDown: this.handlePanelKeyDown, "aria-labelledby": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f") }, h("header", { key: '18b6c39ec9f018dc3c8eb557a589f0fbdb0593fc' }, h("h2", { key: 'ff0ebbb9e55284eca4f148de601de84bec921d12', id: __classPrivateFieldGet(this, _MapControls_mapLayersTitleId, "f"), tabIndex: -1 }, this.text("title")), h("dso-icon-button", { key: 'dc59d9005f02891d9f74a4e4aecc643b634cbb34', class: "close-button", label: this.text("hidePanel", { title: this.text("title") }), icon: "cross", variant: "tertiary", onDsoClick: (e) => this.toggleVisibility(e.detail.originalEvent), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeIconButtonElement, element, "f")) })), h("dso-scrollable", { key: '1c009dd9ce9ae7fa7aeb1ae985942a377060144a' }, h("div", { key: '2846b3c3a3cbf32328ef4d0f4a883c8b6468ec7d', class: "content" }, h("slot", { key: 'c19ca5d6d26fad36c766b292d610ad8096b630d7' }))))));
+        return (h(Fragment, { key: 'df742112e2025fdbb83de9414b0d6ca52d997826' }, h("dso-icon-button", { key: '213c786fdd190c1c7d176d897cdce2ddce007f21', label: this.text("layersButton"), icon: "layers", variant: "map", "aria-controls": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), "aria-expanded": this.open, tooltipPlacement: "left", class: "toggle-visibility-icon-button", onDsoClick: (e) => this.toggleVisibilityInternal(e.detail.originalEvent, __classPrivateFieldGet(this, _MapControls_toggleIconButtonElement, "f")), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleIconButtonElement, element, "f")) }), h("button", { key: 'e08ce9dbbc17469f0cb103e38a6603b2f6752725', type: "button", class: "dso-map toggle-visibility-button", "aria-controls": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), "aria-expanded": this.open, onClick: (e) => this.toggleVisibilityInternal(e, __classPrivateFieldGet(this, _MapControls_toggleButtonElement, "f")), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: 'e22486c5b4ec4de15d389d4349c2c987cbabd760', icon: "layers" }), h("span", { key: '876c81f18078ad0f316d1d33883fd01aba0c1b65' }, this.text("layersButton"))), h("dso-button-group", { key: '411ee5039d8e818cbca28ed237d0d5c54ab0c463', class: "zoom-buttons", direction: "column" }, h("dso-icon-button", { key: 'ee2f5435b15e91beef74f20ade813801c2237b32', 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" }), h("dso-icon-button", { key: 'b51b4d38ecf01cdf1f414e0699c1809e86b7ff87', 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" })), h("section", { key: 'ad07928c1d78c7e562f792bba2b6c18ba401ce75', id: __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), hidden: this.hideContent, role: "region", onKeyDown: this.handlePanelKeyDown, "aria-labelledby": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f") }, h("header", { key: '462993fe80b521ea3c032940087a1240040d08ed' }, h("h2", { key: 'edf05e60556acaf9295f4a5f53edfe5f93759c7d', id: __classPrivateFieldGet(this, _MapControls_mapLayersTitleId, "f"), tabIndex: -1 }, this.text("title")), h("dso-icon-button", { key: '8883ececf16dee517102d9c27ca0cde32f412c78', class: "close-button", label: this.text("hidePanel", { title: this.text("title") }), icon: "cross", variant: "tertiary", onDsoClick: (e) => this.toggleVisibility(e.detail.originalEvent), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeIconButtonElement, element, "f")) })), h("dso-scrollable", { key: 'ee13b3dc2596f06e99bf0e48d1f080018f1bedca' }, h("div", { key: 'e79644ff58ff6408cbc2dd0e3f8cef853807619c', class: "content" }, h("slot", { key: 'c721808970823379205241f527b917ead66f9d15' }))))));
     }
     static get is() { return "dso-map-controls"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/map-layer/components/map-layer-object.js

@@ -16,7 +16,7 @@ export class MapLayerObject {
         };
     }
     render() {
-        return (h(Host, { key: 'd023dcf456e4905e3a72aff3aebaa1bb3dd49d88', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h(WrapWijzigactie, { key: 'cea0d380879a5ed1c1ad434fa20d0a5cc9fd8915', wijzigactie: this.wijzigactie }, h("div", { key: 'd19a0d2ac1b03df8d0076cdd9e3bec0e159fb7fa', class: "map-layer-object" }, h("div", { key: 'a8e39951d4821f07da46dc43eba9297fb3ab6845' }, h("slot", { key: '8c085607e45f6d11ee8d8f6e856ba92aaf42cccc', name: "symbol" })), h("div", { key: '699fd97ee911a32a9cbda0b176bd33136de103ca', class: "map-layer-object-heading" }, h("slot", { key: '3966433c904e3973bcde3a76475041d7f8081a0d' }), h("slot", { key: '218d37b9e09a46f5bf75316c9976fb149a2e30b9', name: "label" })), h("div", { key: '22ede0b5e7f39e5c4173a05b39fa1f29a9533623', class: "slide-toggle-container" }, h("dso-slide-toggle", { key: '814c7e058adfc38ea557300f19baf2c2a20f248b', accessibleLabel: "Toon op kaart", checked: this.active, onDsoActiveChange: this.handleActiveChange }))))));
+        return (h(Host, { key: '7fbc1ef74509e1b4f80d56905fa764a34a333740', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h(WrapWijzigactie, { key: '86a25068d41d0113456e7705b522d343e7642127', wijzigactie: this.wijzigactie }, h("div", { key: 'aa6678b819aa10f8a1c2cc8bca459aa95deac593', class: "map-layer-object" }, h("div", { key: '38fbefa271b39f82918dae41eb66b58492ba5574' }, h("slot", { key: '95385dd080311a6601799a49451fbed2830d8203', name: "symbol" })), h("div", { key: 'e35e66f79ee298235be738d265017f5cf1564559', class: "map-layer-object-heading" }, h("slot", { key: '2a99347bb68d8e5bffe168587042f3f601ac4456' }), h("slot", { key: '5105e4e49f5d644c70f09df20569ccca5c0e550a', name: "label" })), h("div", { key: 'b91932b72b31233927163885102039924098ad0c', class: "slide-toggle-container" }, h("dso-slide-toggle", { key: '9087cd162ea7434ee1d7f4b977cbb75b7a2ab4ef', accessibleLabel: "Toon op kaart", checked: this.active, onDsoActiveChange: this.handleActiveChange }))))));
     }
     static get is() { return "dso-map-layer-object"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/map-layer/map-layer.js

@@ -21,7 +21,7 @@ export class MapLayer {
         };
     }
     render() {
-        return (h(WrapWijzigactie, { key: '69abcef7ed45d6083df302c42a47ae4a117ef82d', wijzigactie: this.wijzigactie }, h("div", { key: 'd57311c429d197dc2fa327475d6bb95ab7f23120', class: "map-layer" }, h("div", { key: '181afe3a5f429d960bb7d686c94c47b8f17b715a', class: "map-layer-heading" }, h("slot", { key: 'b67af00b7fc37feb51ed5897f53ccb0a5c617313', name: "name" }), h("slot", { key: 'a5882b11c7c21f0b88ea8325a2b39ed7db9b9939', name: "label" })), this.activatable && (h("div", { key: '8fd979116876c8898cfeae9bf5b26ea57425d517', class: "slide-toggle-container" }, h("dso-slide-toggle", { key: '6ee13d588b60edd18f60aa0312293941593e4819', accessibleLabel: "Toon op kaart", checked: this.active, onDsoActiveChange: this.handleActiveChange })))), h("slot", { key: '7e0b9a62b81374f302b6c55a63e0549bf2f00f65' })));
+        return (h(WrapWijzigactie, { key: '58b032ccf7677ede268d977e40284fce488001cf', wijzigactie: this.wijzigactie }, h("div", { key: 'dfa603d5ff4e738955330e539cb27c04a06eb361', class: "map-layer" }, h("div", { key: 'd5b744910ec3ffbf76a1bc5e06c7c8a2862d7d33', class: "map-layer-heading" }, h("slot", { key: 'e52c97abb2ffd3dbeb8a1691567499d5b03628be', name: "name" }), h("slot", { key: 'f81a9b8d10970365dbc4a6d9e335cca4e2db6bd9', name: "label" })), this.activatable && (h("div", { key: 'db93351178c6ff143098d07bc1efb4aab486f97c', class: "slide-toggle-container" }, h("dso-slide-toggle", { key: 'ab49a0cfd4105c9133a1c50da4496fddee2550fe', accessibleLabel: "Toon op kaart", checked: this.active, onDsoActiveChange: this.handleActiveChange })))), h("slot", { key: 'a9b8d33ee9c50c461c136a392fd57f177f84302a' })));
     }
     static get is() { return "dso-map-layer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/map-message/map-message.js

@@ -20,11 +20,11 @@ export class MapMessage {
     render() {
         const iconName = this.variant ? iconMap[this.variant] : undefined;
         const role = this.variant === "error" ? "alert" : "status";
-        return (h("div", { key: '9acba814f73505425a2cf9cced5d494becc4bbb1', class: {
+        return (h("div", { key: 'c38f46748c57f3034e24cacaa91b5f792dab80dc', class: {
                 "map-message-content": true,
                 "has-icon": iconName !== undefined,
                 "has-actions": this.hasActions,
-            }, role: role, "aria-atomic": "true" }, h("div", { key: 'bc7cafd4338937317975f86505661592705a2e0e', class: "map-message-body" }, iconName && h("dso-icon", { key: '7350b744c0e8fd7550a9d2eaa79f02a1ca2a6909', class: "map-message-icon", icon: iconName, "aria-hidden": "true" }), h("span", { key: '43c6f5ecaab36f8485a2eddd92d7065d95e6f9c0', class: "map-message-text" }, h("slot", { key: '6a19999994213e5649f5946897cdba1bf4b6ade2', name: "message" }))), h("slot", { key: 'de8fa2051d15aadfa653dbedaf31dee513c7958d', name: "actions", onSlotchange: this.handleActionsSlotChange })));
+            }, role: role, "aria-atomic": "true" }, h("div", { key: 'ca8ee505450598fb4a8271fcd89a54b46d7ba1c3', class: "map-message-body" }, iconName && h("dso-icon", { key: '8de97522b21cd5138769c72d424724a9ae28a958', class: "map-message-icon", icon: iconName, "aria-hidden": "true" }), h("span", { key: '2c22435cc51763c2eb070d228bf1f7cd44d6b3a3', class: "map-message-text" }, h("slot", { key: '1a0dc7b8f5a5c1ffaaeffdbd5c0a74f3a6048640', name: "message" }))), h("slot", { key: '0c3387b08b5f8f0196f2d09bb6ac994cceace168', name: "actions", onSlotchange: this.handleActionsSlotChange })));
     }
     static get is() { return "dso-map-message"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/map-overlays/map-overlays.js

@@ -27,7 +27,7 @@ export class MapOverlays {
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: '7e7bb2182c94f5de9fbd03272b200f5d34e75135', class: "form-group dso-checkboxes" }, h("legend", { key: 'bbc9d2a64e6377391d79efd3e73b008a821a9083', class: "sr-only" }, "Kaartlagen"), h("div", { key: '5eba59272445fcbc6b14cc6942a57f1b2580f747', class: "dso-label-container" }, h("span", { key: '2a2295ccd2ef661052c673bfb3a5e78e54101ff5', class: "control-label", "aria-hidden": "true" }, this.text("title"))), h("div", { key: '4285f7d59bec53166037363c731e7ce20c57d372', class: "dso-field-container" }, this.overlays.map((overlay) => (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 ? h("p", { slot: "info" }, overlay.info) : null))))));
+        return (h("fieldset", { key: 'b875d9db957b7c85aff87f3ef79e90b65e20a548', class: "form-group dso-checkboxes" }, h("legend", { key: '31dcc45e2cb253ca78990d097a40fa23fecfeb37', class: "sr-only" }, "Kaartlagen"), h("div", { key: '9072cd6b8adb0fe47558e775caa34168cb10ff57', class: "dso-label-container" }, h("span", { key: '70f1ee5af74eddfb45b06e00692842c6222c5ec7', class: "control-label", "aria-hidden": "true" }, this.text("title"))), h("div", { key: 'd7180472b4d9d63a652b00b6dd2a9382f888f450', class: "dso-field-container" }, this.overlays.map((overlay) => (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 ? h("p", { slot: "info" }, overlay.info) : null))))));
     }
     static get is() { return "dso-map-overlays"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mark-bar/mark-bar.js

@@ -41,7 +41,7 @@ export class MarkBar {
     render() {
         const current = this.current || 0;
         const totalCount = this.totalCount || 0;
-        return (h("div", { key: 'cf96852505e3d66b9e528b317d3c7082fe448227', class: "dso-mark-bar" }, h("div", { key: '3820ae81b8f4b64d765816dab3e393b6023f23dd', class: "dso-mark-bar-input" }, h("input", { key: '25c7429838546a40e06fab56b78ec8c50279b629', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: '122f8d35ede8c24f7ab1cbc395fedf5f0742fbec', htmlFor: "search-input" }, h("dso-icon", { key: 'c5ad326da2538d835a14d48024f540b61e2615a3', class: "dso-search-icon", icon: "search" }), h("span", { key: 'a2774bfda79984b9cb0569e21d849389c47f1f00', class: "label-text" }, this.label)), h("dso-icon-button", { key: '707e8ae7c76ca927eaa891dfc54575e1cf3dd131', icon: "cross", variant: "tertiary", label: "Zoekopdracht legen", onDsoClick: (e) => this.handleClear(e.detail.originalEvent) })), h("div", { key: '00cbd99c7266bacce1d06a97ef53d9d7689b463b', class: "dso-button-container" }, h("span", { key: 'c9ff8ccd189ac5c57507dcfa8e0ceeaefa85e486', class: "divider" }), h("dso-icon-button", { key: 'b67a4893bace2c6ce84fd329e2f164949a9f2416', icon: "chevron-up", variant: "tertiary", label: `Vorig zoekresultaat ${current - 1}/${totalCount}`, onDsoClick: (e) => this.handlePrevious(e.detail.originalEvent), disabled: current <= 1 }), h("span", { key: '26da2c213469b80abb8098f26f4040eb8ad78a8c', role: "status" }, current, "/", totalCount), h("dso-icon-button", { key: '36d2d30b7faac09aa44eef852cea066593b904ac', icon: "chevron-down", variant: "tertiary", label: `Volgend zoekresultaat ${current + 1}/${totalCount}`, onDsoClick: (e) => this.handleNext(e.detail.originalEvent), disabled: current >= totalCount }))));
+        return (h("div", { key: '7818d8f7762b007d1dbc90b657f9673ab42c0234', class: "dso-mark-bar" }, h("div", { key: '01a6513b3af2f365472421554c6a2442c8f61a73', class: "dso-mark-bar-input" }, h("input", { key: '1580d1b4d30542d1ff3b12dd0551249871db145b', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: 'd6d87a36588e949b524214fa45dda0ee7962a031', htmlFor: "search-input" }, h("dso-icon", { key: '5fa410193b67370970cda0690c574f482a47a95d', class: "dso-search-icon", icon: "search" }), h("span", { key: '001a6eb612430876e7757cbe98ba9efd326bf19f', class: "label-text" }, this.label)), h("dso-icon-button", { key: '7ae27f8d2a5be8bc0ae59f30e036a9089c0cebcb', icon: "cross", variant: "tertiary", label: "Zoekopdracht legen", onDsoClick: (e) => this.handleClear(e.detail.originalEvent) })), h("div", { key: '3640ab6ad6b59223bd5fa02543e4eff19b25d7d0', class: "dso-button-container" }, h("span", { key: '580893adcea6d950a262e32911a1cfc9c16fb25b', class: "divider" }), h("dso-icon-button", { key: '16533f6d69a10f68b7c7773087ce8a8fe11bfa17', icon: "chevron-up", variant: "tertiary", label: `Vorig zoekresultaat ${current - 1}/${totalCount}`, onDsoClick: (e) => this.handlePrevious(e.detail.originalEvent), disabled: current <= 1 }), h("span", { key: 'b70d11b9693c5204137fefac12660589d1f8a3c4', role: "status" }, current, "/", totalCount), h("dso-icon-button", { key: 'a55ad1bfb0d5cf583be81f83abc66fe64af4881a', icon: "chevron-down", variant: "tertiary", label: `Volgend zoekresultaat ${current + 1}/${totalCount}`, onDsoClick: (e) => this.handleNext(e.detail.originalEvent), disabled: current >= totalCount }))));
     }
     static get is() { return "dso-mark-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modal/functional-components/body.js

@@ -0,0 +1,4 @@
+import { h } from "@stencil/core";
+export const Body = () => {
+    return (h("div", { class: "dso-body", tabIndex: 0 }, h("slot", { name: "body" })));
+};

package/dist/collection/components/modal/functional-components/footer.js

@@ -0,0 +1,4 @@
+import { h } from "@stencil/core";
+export const Footer = () => {
+    return (h("div", { class: "dso-footer" }, h("slot", { name: "footer" })));
+};

package/dist/collection/components/modal/functional-components/header.js

@@ -0,0 +1,4 @@
+import { h } from "@stencil/core";
+export const Header = ({ modalTitle, closable, ariaId, text, dsoClose }) => {
+    return modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: ariaId }, modalTitle), closable && (h("dso-icon-button", { id: "close-modal", icon: "cross", variant: "tertiary", label: text("close"), onDsoClick: (e) => dsoClose.emit({ originalEvent: e }) })))) : (h("span", { class: "sr-only", id: ariaId }, text("dialog")));
+};

package/dist/collection/components/modal/modal.css

@@ -101,6 +101,14 @@ button::-moz-focus-inner {
     --_dso-button-after-button-margin-block-start: 8px;
     --_dso-button-text-align: center;
   }
+  .dso-modal .modal-scrollable {
+    display: flex;
+    flex-direction: column;
+    min-block-size: 100%;
+  }
+  .dso-modal .dso-body {
+    flex: 1 1 auto;
+  }
 }
 @media screen and (max-height: 380px) {
   .dso-modal {
@@ -173,10 +181,10 @@ button::-moz-focus-inner {
 }
 .dso-modal > .dso-dialog > .dso-body blockquote {
   padding-block: 16px;
-  padding-inline: 24px;
+  padding-inline: 1.5rem;
 }
 .dso-modal > .dso-dialog > .dso-body dso-highlight-box {
-  margin-block-end: 24px;
+  margin-block-end: 1.5rem;
 }
 .dso-modal > .dso-dialog > .dso-body img {
   block-size: auto;
@@ -196,6 +204,11 @@ button::-moz-focus-inner {
   max-block-size: var(--_dso-modal-body-max-block-size, calc(70vh - 144px - 1.5em));
   min-block-size: 6.5rem;
 }
+@media screen and (min-width: 480px) and (max-width: 767px) {
+  .dso-modal > .dso-dialog > dso-scrollable.narrow {
+    max-block-size: var(--_dso-modal-body-max-block-size, calc(100vh - 32px));
+  }
+}
 .dso-modal > .dso-dialog > dso-scrollable .dso-body p {
   margin-block: 0 var(--_dso-rich-content-margin-block, 16px);
   margin-inline: 0;
@@ -220,10 +233,10 @@ button::-moz-focus-inner {
 }
 .dso-modal > .dso-dialog > dso-scrollable .dso-body blockquote {
   padding-block: 16px;
-  padding-inline: 24px;
+  padding-inline: 1.5rem;
 }
 .dso-modal > .dso-dialog > dso-scrollable .dso-body dso-highlight-box {
-  margin-block-end: 24px;
+  margin-block-end: 1.5rem;
 }
 .dso-modal > .dso-dialog > dso-scrollable .dso-body img {
   block-size: auto;

package/dist/collection/components/modal/modal.js

@@ -1,13 +1,19 @@
-import { h } from "@stencil/core";
+import { Fragment, h } from "@stencil/core";
 import { v4 } from "uuid";
 import { getActiveElement } from "../../utils/get-active-element";
 import { i18n } from "../../utils/i18n";
+import { Body } from "./functional-components/body";
+import { Footer } from "./functional-components/footer";
+import { Header } from "./functional-components/header";
 import { translations } from "./modal.i18n";
 export class Modal {
     constructor() {
         this.startedMouseDownOutsideDialog = false;
         this.endedMouseUpOutsideDialog = false;
+        this.narrowViewBreakpoint = 768;
+        this.mediaCondition = `(min-width: ${this.narrowViewBreakpoint}px)`;
         this.ariaId = v4();
+        this.narrowView = window.innerWidth < this.narrowViewBreakpoint;
         /**
          * the role for the modal `dialog` | `alert` | `alertdialog`.
          */
@@ -27,6 +33,7 @@ export class Modal {
          */
         this.closable = false;
         this.text = i18n(() => this.host, translations);
+        this.changeListener = (largeScreen) => (this.narrowView = !largeScreen.matches);
         this.blockEscapeKey = (e) => {
             if (e.key === "Escape") {
                 e.preventDefault();
@@ -48,7 +55,11 @@ export class Modal {
             this.htmlDialogElement.showModal();
         }
     }
+    connectedCallback() {
+        window.matchMedia(this.mediaCondition).addEventListener("change", this.changeListener);
+    }
     disconnectedCallback() {
+        window.matchMedia(this.mediaCondition).removeEventListener("change", this.changeListener);
         this.htmlDialogElement?.close();
         if (this.returnFocus === false) {
             return;
@@ -70,7 +81,7 @@ export class Modal {
         }
     }
     render() {
-        return (h("dialog", { key: 'ff360d453e6fa57737aca88ad7014c6f32dbddc7', class: "dso-modal", role: this.dialogRole ?? undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onMouseDown: (e) => this.handleDialogMouseDown(e), onMouseUp: (e) => this.handleDialogMouseUp(e), onClick: (e) => this.handleDialogClick(e), onKeyDown: (e) => this.blockEscapeKey(e) }, h("div", { key: '6f611ad28ed40c48ff1a6c66ddf881822f1955c8', class: "dso-dialog" }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.closable && (h("dso-icon-button", { id: "close-modal", icon: "cross", variant: "tertiary", label: this.text("close"), onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) })))) : (h("span", { class: "sr-only", id: this.ariaId }, this.text("dialog"))), h("dso-scrollable", { key: '7ea88e557de1193a975824b91a7ed22bc2c78345' }, h("div", { key: '95923d6c979d83a2d3ad140bfab0987c0c42d0c8', class: "dso-body", tabIndex: 0 }, h("slot", { key: 'b049dab69487db71428ce0ab8150f852ce0b371c', name: "body" }))), this.hasFooter && (h("div", { key: 'e7bbb58c528281b3c509bcf0232a64e550ba8838', class: "dso-footer" }, h("slot", { key: 'd594c7207a231d0eb77ebc03dce19abccf6647bf', name: "footer" }))))));
+        return (h("dialog", { key: '5bf0dd2d3c65fbd1590b96bbe92838076246f507', class: "dso-modal", role: this.dialogRole ?? undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onMouseDown: (e) => this.handleDialogMouseDown(e), onMouseUp: (e) => this.handleDialogMouseUp(e), onClick: (e) => this.handleDialogClick(e), onKeyDown: (e) => this.blockEscapeKey(e) }, h("div", { key: '42ca0a18d4e91eaa6e78739b20deb5bc11281599', class: "dso-dialog" }, this.narrowView ? (h("dso-scrollable", { class: "narrow" }, h("div", { class: "modal-scrollable" }, h(Header, { modalTitle: this.modalTitle, closable: this.closable, ariaId: this.ariaId, text: this.text, dsoClose: this.dsoClose }), h(Body, null), this.hasFooter && h(Footer, null)))) : (h(Fragment, null, h(Header, { modalTitle: this.modalTitle, closable: this.closable, ariaId: this.ariaId, text: this.text, dsoClose: this.dsoClose }), h("dso-scrollable", null, h(Body, null)), this.hasFooter && h(Footer, null))))));
     }
     static get is() { return "dso-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -193,7 +204,8 @@ export class Modal {
     }
     static get states() {
         return {
-            "ariaId": {}
+            "ariaId": {},
+            "narrowView": {}
         };
     }
     static get events() {

package/dist/collection/components/onboarding-tip/onboarding-tip.css

@@ -81,7 +81,7 @@
   overflow-wrap: normal;
   word-spacing: normal;
   white-space: normal;
-  font-size: 14px;
+  font-size: 0.875rem;
   inset-block-start: 0;
   inset-inline-start: 0;
   z-index: 410;

package/dist/collection/components/onboarding-tip/onboarding-tip.js

@@ -65,7 +65,7 @@ export class OnboardingTip {
     }
     render() {
         const ariaLabel = this.headingSlottedElement?.textContent;
-        return (h(Host, { key: 'ce5c1f5886a4908f36380f9ccdceccd31c784ca0', popover: "manual", ready: this.ready, onAnimationend: () => (this.ready = true) }, h("div", { key: '66619151b34f974ff0104282c94ec09a1b802d4c', role: "dialog", class: "onboarding-tip", "aria-label": ariaLabel, onKeyDown: this.blockEscapeKey, tabindex: -1 }, h("div", { key: '7d742ab19f6019e272b72224181ff7f4ccb93742', class: "onboarding-tip-inner" }, h("div", { key: '3d324d323f6e8c752c022876aac15ba6e8d1ea99', class: "onboarding-tip-content-wrapper" }, this.headingSlottedElement !== null && (h("div", { key: 'ae1bc50047bf83decf666cb10d8e118747004e8b', class: "onboarding-tip-content-heading" }, h("dso-icon", { key: '14393090106b82a96622720a3e944b756caa694d', icon: "light-bulb" }), h("slot", { key: '4fcc680dfac42bac7ef09971164c3e99e0ab877f', name: "heading" }))), h("dso-icon-button", { key: 'ed185d63e19b556919c0ef78036ad6999afc691d', class: "dso-close", label: "Sluiten", variant: "tertiary", icon: "cross", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) }), h("slot", { key: 'b80c65b737972dcedbafb5fc2bae173bb3dbe02c' }))), h("div", { key: 'f76c5308fe49055cb7a651bde2d92400c7a8b328', class: "onboarding-tip-arrow", ref: (ref) => (this.tipArrowRef = ref) }))));
+        return (h(Host, { key: 'efa9562670f37b9c3fcc4fdf23a0437a50adf481', popover: "manual", ready: this.ready, onAnimationend: () => (this.ready = true) }, h("div", { key: '3773eeb116a6649e3d148e3834b52b22df30ed54', role: "dialog", class: "onboarding-tip", "aria-label": ariaLabel, onKeyDown: this.blockEscapeKey, tabindex: -1 }, h("div", { key: '8fa8ac6f8dea236497cf48bc3c51a9b61de0f734', class: "onboarding-tip-inner" }, h("div", { key: '0a58c5f7a0d96730dbad3672ceef6ee5422ecb34', class: "onboarding-tip-content-wrapper" }, this.headingSlottedElement !== null && (h("div", { key: 'c29e53b3c90fab777a516997ca772751c55d12bb', class: "onboarding-tip-content-heading" }, h("dso-icon", { key: '6c8adde6c36ae5f1c9637286d59d6c0e58d4c940', icon: "light-bulb" }), h("slot", { key: 'bf42aadbcd8b94a339924a87325699f09b93c995', name: "heading" }))), h("dso-icon-button", { key: '7a2e502fa17df9ceac99610702237d37b6806408', class: "dso-close", label: "Sluiten", variant: "tertiary", icon: "cross", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) }), h("slot", { key: 'b584371b8e75e573b661df4b903c922d9c8f1682' }))), h("div", { key: 'c8a90fd4fcff76340bfaa7f7c89b388b7599e726', class: "onboarding-tip-arrow", ref: (ref) => (this.tipArrowRef = ref) }))));
     }
     get headingSlottedElement() {
         return this.host.querySelector("[slot='heading']");

package/dist/collection/components/ozon-content/components/ozon-content-toggletip/ozon-content-toggletip.js

@@ -65,7 +65,7 @@ export class OzonContentToggletip {
         this.cleanUpFunction = undefined;
     }
     render() {
-        return (h(Fragment, { key: '24a1d0f7591ce554683e85c92cdbbf29b02607aa' }, h("span", { key: '5bd3286eac936c18eedb64b08514cab425d63228', "aria-describedby": this.active ? "toggletip-tooltip" : undefined, "aria-expanded": this.active.toString(), class: "toggletip-button", role: "button", tabIndex: 0, onClick: this.toggle, onKeyDown: this.keyDownHandler, ref: (element) => (this.container = element) }, this.icon && (h(Fragment, { key: '6440939beb4167196a058db1c64c4402cee405ad' }, h("span", { key: 'd5555ed7f39575ad908b15181ee6dd4634752141', class: "toggletip-label" }, h("slot", { key: 'a5ade307e3958ffeabb56c4ae5b589be2a64bcd1', name: "label" })), "\u2060", h("dso-icon", { key: '70a3995fb3f3a0a5cd1fe7c506b342814bb96b60', icon: this.icon }))), !this.icon && h("slot", { key: 'f577d0c3a1130c301269ffc88df48473567d39aa', name: "label" })), h(Tooltip, { key: '3ee5e6ae5b1813692f273e41712e5859538ce389', id: "toggletip-tooltip", tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, h("dso-scrollable", { key: '7075e282928afc17cae8b7f5b0af84bc56728501', ref: (element) => (this.restrictContentElement = element), id: "toggletip-content", "aria-live": "polite" }, h("slot", { key: 'edab20ecf06738341aef3cec039a2fd12e0fd411' })))));
+        return (h(Fragment, { key: '054b1fc1100947196245910b357fb80c29182c54' }, h("span", { key: 'e3ade161d65fe3322ae0651dae6b529593c60a07', "aria-describedby": this.active ? "toggletip-tooltip" : undefined, "aria-expanded": this.active.toString(), class: "toggletip-button", role: "button", tabIndex: 0, onClick: this.toggle, onKeyDown: this.keyDownHandler, ref: (element) => (this.container = element) }, this.icon && (h(Fragment, { key: 'ba60e0ba165e0bb01781e89c9461bbc0e077ea3f' }, h("span", { key: 'e29b2372fd93624b5a7cc8c5181bb4ca68a5cccc', class: "toggletip-label" }, h("slot", { key: '21e96fe27e6ea3a86f03184f41c36a66aeb1596b', name: "label" })), "\u2060", h("dso-icon", { key: 'b4ab7245c3042967aff5dd4db73075edb751f3b4', icon: this.icon }))), !this.icon && h("slot", { key: '4aa818c5599151181a219b71ae23a8fb4d600e8a', name: "label" })), h(Tooltip, { key: '78420c36405e0076a8c8d8fce22bf866afe8e0ac', id: "toggletip-tooltip", tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, h("dso-scrollable", { key: '21a1c7363cc32b4bc8637e7bc28b2ffcd35ba000', ref: (element) => (this.restrictContentElement = element), id: "toggletip-content", "aria-live": "polite" }, h("slot", { key: '93e1e8ac4e49b4d28eee9079e78c0369177ed0f9' })))));
     }
     static get is() { return "dso-ozon-content-toggletip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ozon-content/ozon-content.css

@@ -1128,7 +1128,7 @@ sub a:hover, sub a:focus-visible, sub a:active {
 }
 
 caption {
-  color: #666;
+  color: #000;
   padding-block-end: 8px;
   padding-block-start: 8px;
   text-align: start;
@@ -1179,11 +1179,11 @@ table.table th pre {
 table.table td:not(.plain-content) blockquote,
 table.table th blockquote {
   padding-block: 16px;
-  padding-inline: 24px;
+  padding-inline: 1.5rem;
 }
 table.table td:not(.plain-content) dso-highlight-box,
 table.table th dso-highlight-box {
-  margin-block-end: 24px;
+  margin-block-end: 1.5rem;
 }
 table.table td:not(.plain-content) img,
 table.table th img {
@@ -1193,7 +1193,7 @@ table.table th img {
 
 table.table,
 .dso-rich-content table {
-  margin-block-end: 24px;
+  margin-block-end: 1.5rem;
   max-inline-size: 100%;
   inline-size: 100%;
 }
@@ -2010,10 +2010,10 @@ del.editaction-remove p:last-child {
 }
 .dso-rich-content blockquote {
   padding-block: 16px;
-  padding-inline: 24px;
+  padding-inline: 1.5rem;
 }
 .dso-rich-content dso-highlight-box {
-  margin-block-end: 24px;
+  margin-block-end: 1.5rem;
 }
 .dso-rich-content img {
   block-size: auto;

package/dist/collection/components/ozon-content/ozon-content.js

@@ -33,7 +33,7 @@ export class OzonContent {
             annotated: this.annotated,
         };
         const transformed = mapper.transform(this.content, context);
-        return h(Fragment, { key: '5007e6cb436b60e0810249aa7a311d681470ea38' }, transformed);
+        return h(Fragment, { key: '1927b2fc3ffe8dfa33268a2ed3a8980b2601b5de' }, transformed);
     }
     static get is() { return "dso-ozon-content"; }
     static get encapsulation() { return "shadow"; }