@dso-toolkit/core 69.2.1 → 70.0.0

package/dist/collection/components/banner/banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"banner.js","sourceRoot":"","sources":["../../../../src/components/banner/banner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,IAAI,MAAM,MAAM,CAAC;AAOxB,MAAM,OAAO,MAAM;IALnB;QAYE;;WAEG;QAEH,YAAO,GAAG,KAAK,CAAC;QAEhB;;;;WAIG;QAEH,WAAM,GAAG,IAAI,CAAC;KAcf;IAZC,MAAM;QACJ,OAAO,CACL,gEACE,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,SAAS,IAAI,CAAC,MAAM,EAAE,EAAE;gBAChD,aAAa,EAAE,IAAI,CAAC,OAAO;aAC5B,CAAC,EACF,IAAI,EAAC,OAAO;YAEZ,8DAAa,CACL,CACX,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\n@Component({\r\n  tag: \"dso-banner\",\r\n  styleUrl: \"banner.scss\",\r\n  shadow: true,\r\n})\r\nexport class Banner {\r\n  /**\r\n   * The status of the banner.\r\n   */\r\n  @Prop({ reflect: true })\r\n  status!: \"danger\" | \"error\" | \"info\" | \"warning\";\r\n\r\n  /**\r\n   * compact mode.\r\n   */\r\n  @Prop()\r\n  compact = false;\r\n\r\n  /**\r\n   * *Only available when `compact` is set to `true`.\r\n   *\r\n   * Option to show banner icon.\r\n   */\r\n  @Prop()\r\n  noIcon = true;\r\n\r\n  render() {\r\n    return (\r\n      <section\r\n        class={clsx(\"dso-banner\", `alert-${this.status}`, {\r\n          \"dso-compact\": this.compact,\r\n        })}\r\n        role=\"alert\"\r\n      >\r\n        <slot></slot>\r\n      </section>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"banner.js","sourceRoot":"","sources":["../../../../src/components/banner/banner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,IAAI,MAAM,MAAM,CAAC;AAOxB,MAAM,OAAO,MAAM;IALnB;QAYE;;WAEG;QAEH,YAAO,GAAG,KAAK,CAAC;QAEhB;;;;WAIG;QAEH,SAAI,GAAG,KAAK,CAAC;KAcd;IAZC,MAAM;QACJ,OAAO,CACL,gEACE,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,SAAS,IAAI,CAAC,MAAM,EAAE,EAAE;gBAChD,aAAa,EAAE,IAAI,CAAC,OAAO;aAC5B,CAAC,EACF,IAAI,EAAC,OAAO;YAEZ,8DAAa,CACL,CACX,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\n@Component({\r\n  tag: \"dso-banner\",\r\n  styleUrl: \"banner.scss\",\r\n  shadow: true,\r\n})\r\nexport class Banner {\r\n  /**\r\n   * The status of the banner.\r\n   */\r\n  @Prop({ reflect: true })\r\n  status!: \"danger\" | \"error\" | \"info\" | \"warning\";\r\n\r\n  /**\r\n   * Compact mode.\r\n   */\r\n  @Prop()\r\n  compact = false;\r\n\r\n  /**\r\n   * *Icon can only be hidden when the 'compact' property is set to true.\r\n   *\r\n   * Option to show banner icon.\r\n   */\r\n  @Prop({ reflect: true })\r\n  icon = false;\r\n\r\n  render() {\r\n    return (\r\n      <section\r\n        class={clsx(\"dso-banner\", `alert-${this.status}`, {\r\n          \"dso-compact\": this.compact,\r\n        })}\r\n        role=\"alert\"\r\n      >\r\n        <slot></slot>\r\n      </section>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -3,7 +3,7 @@ export class HighlightBox {
     render() {
         var _a;
         const hasCounter = this.step || !!this.element.querySelector("[slot=icon]");
-        return (h(Host, { key: '3fcbc608da08fabe5bf843fecb4d95b7e68e6150', "has-counter": hasCounter }, hasCounter && h("div", { key: 'b525a2982aba2720a7383473ff2e9d78d5c33b99', class: "dso-step-counter" }, (_a = this.step) !== null && _a !== void 0 ? _a : h("slot", { key: 'f35cd37a9ac498c830c6cbe2aea69ac1876ac359', name: "icon" })), h("slot", { key: '07e27b87bfcb7e3c596f5aefd5ab323628bc2670' })));
+        return (h(Host, { key: '1ac773ce6f43d05b3c03be516e6d19a42ba4219c', "has-counter": hasCounter }, hasCounter && h("div", { key: '3d61d88228a27065b1f3b362f5ebef8a95e0faae', class: "dso-step-counter" }, (_a = this.step) !== null && _a !== void 0 ? _a : h("slot", { key: '794c1bbae6bcf93c86faaa42ec4b8e23da43e1ba', name: "icon" })), h("slot", { key: 'c27f824a00a38cb69710faa1a3ab7dc0cedab683' })));
     }
     static get is() { return "dso-highlight-box"; }
     static get encapsulation() { return "shadow"; }

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

@@ -212,7 +212,7 @@ export class Icon {
             if (!icon) {
                 throw new TypeError(`Unknown svg: ${this.icon}`);
             }
-            return h("span", { key: '5805a81ad34f4f4f8adb5eaafc0019924c4b4efa', class: "icon-container", innerHTML: icon.svg });
+            return h("span", { key: '3450d039887e4fbad82f24ba4bba7f5b826e5961', class: "icon-container", innerHTML: icon.svg });
         }
     }
     static get is() { return "dso-icon"; }

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

@@ -1,7 +1,7 @@
 import { h, Fragment } from "@stencil/core";
 export class Info {
     render() {
-        return (h(Fragment, { key: 'a9db2b8522cbfa55e8629b58a9757d58931ecbca' }, h("slot", { key: '2059c0fb8926f48a4b1f36a2210d5c8e48861b1a' }), !this.fixed && (h("button", { key: '7430b1282b3a04b27185cb0f65d77ba82f28045d', type: "button", onClick: (e) => this.dsoClose.emit(e) }, h("dso-icon", { key: 'dcc0f11655e09ce94b96299f1e4ef7a9f0e72f8b', icon: "times" }), h("span", { key: '9f127628f9741a7036a9cc1b23bfe1b585ed7b29', class: "sr-only" }, "Sluiten")))));
+        return (h(Fragment, { key: '3155979f2b9164ed98c842e27b23ee3960aaadd4' }, h("slot", { key: '056134ca144d2b3ab4268d0d12cfaa94b5a46536' }), !this.fixed && (h("button", { key: '7b466d3bf9fde5780a40197c043b86e746d8326c', type: "button", onClick: (e) => this.dsoClose.emit(e) }, h("dso-icon", { key: '43e42fa9309144981d7bf8e96dfc7dc36a16af8d', icon: "times" }), h("span", { key: '19e315ce3c50e0b0d08607f04ac2c5cef4a114b8', class: "sr-only" }, "Sluiten")))));
     }
     static get is() { return "dso-info"; }
     static get encapsulation() { return "shadow"; }

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

@@ -19,16 +19,14 @@
   border: 0;
 }
 
-button {
-  cursor: pointer;
-  vertical-align: top;
-}
 button {
   background-color: transparent;
   color: #39870c;
   border: 0;
   margin-inline-start: var(--_dt-info-button-margin-inline-start, 8px);
   padding: 0;
+  cursor: pointer;
+  vertical-align: top;
 }
 button.dso-info-secondary {
   color: #666;

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

@@ -20,7 +20,7 @@ export class InfoButton {
         this.dsoToggle.emit({ originalEvent: e, active: this.active });
     }
     render() {
-        return (h(Host, { key: 'e120f58b26565a2606afc191c43d3cd9392d7c94', onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, h("button", { key: '452ef5c21ea617508d47f5be9a64bb7dc06dd0ef', type: "button", class: clsx({ "dso-open": !!this.active, "dso-info-secondary": !!this.secondary }), "aria-expanded": typeof this.active === "boolean" ? this.active.toString() : undefined, onClick: (e) => this.handleToggle(e), ref: (element) => (this.button = element) }, h("dso-icon", { key: '8311c98a00ed1caa8ff19d771179aa01b7289f6c', icon: this.active || this.hover ? "info-active" : "info" }), h("span", { key: '715319494ea7f899fecea285a8bb3b22c84bc61e', class: "sr-only" }, this.label))));
+        return (h(Host, { key: '3fe772b2e9a36bc328ce92d53f7bdf4fe782f4a7', onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, h("button", { key: '4e46d72a9300c690da0e0f44d5e874befd358c92', type: "button", class: clsx({ "dso-open": !!this.active, "dso-info-secondary": !!this.secondary }), "aria-expanded": typeof this.active === "boolean" ? this.active.toString() : undefined, onClick: (e) => this.handleToggle(e), ref: (element) => (this.button = element) }, h("dso-icon", { key: '2e9c74db3fa22b57c7c29052c25c0607897f1006', icon: this.active || this.hover ? "info-active" : "info" }), h("span", { key: 'ddac02ec84b4fef5a463c8b162de1b118a633eba', class: "sr-only" }, this.label))));
     }
     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: '00b851a4299df0dfee96a18dc4ccaa3e373bd83c', id: "description", hidden: true }, this.description)), h("span", { key: 'a20099893221fe2c63988b97ef23b750924aa4f5', class: "counter min", "aria-hidden": "true" }, min, this.unit), h("input", { key: 'c93df1e2fa8bcf77ddac0738e207af0746849841', 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 (h(Fragment, null, this.description && (h("span", { key: '674a05b1d5542afec4b01c991f7a7f4007040870', id: "description", hidden: true }, this.description)), h("span", { key: 'a300e3092ec1485e106cee6fe343397edc630252', class: "counter min", "aria-hidden": "true" }, min, this.unit), h("input", { key: '70c37481116b151b3d696b9d32fd36da7ac6e12d', 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,
-            }) }), h("span", { key: '26d1a69b7bade10d25a815f159b59736b574580f', class: "counter max", "aria-hidden": "true" }, max, this.unit)));
+            }) }), h("span", { key: 'e4987b08bc501533e5afc0fab67117f9def78035', class: "counter max", "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

@@ -94,13 +94,13 @@ export class Label {
         this.isTruncated = false;
     }
     render() {
-        return (h(Fragment, { key: '3bf1a2b10d7cdb37d200dc8435872757f730f7f3' }, h("span", { key: '2963be77a7e44f85c07ae9885dd7aaeb4b6a04ae', "aria-describedby": "toggle-anchor", class: clsx("dso-label", {
+        return (h(Fragment, { key: '8fd30b6ad557f1d54be48b339e682b148b44e2ba' }, h("span", { key: '0bdb791180337871d18c42341c16fa897ca8922c', "aria-describedby": "toggle-anchor", 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: '55b447e4ea124705739d3e65c53b3dcc87b6d8c4', name: "symbol" }), h("span", { key: '48fd3d404c04bcc3c4e69e1ac3e918997959a65c', class: clsx("dso-label-content", {
+            }) }, h("slot", { key: '3b42de72a93e7c0b3aee68935d7ed3aabfb0dd06', name: "symbol" }), h("span", { key: '107445074a029cdf794553429e05f2db498371ae', class: 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) }, h("slot", { key: 'ba3e40904693080e4558c9d0d982b8146092ecb2' })), this.removable && (h("button", { key: '6aa571c0e12e356951d1970e8f9afa4189c36fd0', type: "button", onClick: (e) => this.dsoRemoveClick.emit(e), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }, h("span", { key: '4c06e38f4bad11a7208d924f715b0d7b4e3b5382', class: "sr-only" }, "Verwijder: ", this.labelText), h("dso-icon", { key: 'b549e2c517416cd705778addcc5594a6b2bd8b18', icon: "times" })))), this.isTruncated && (h("dso-tooltip", { key: '6782bb54d4a720f90433ded22edc81badfc6acfb', 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) }, h("slot", { key: '8b5f26d80ca6b93fc2a18679526f9ca5c4539415' })), this.removable && (h("button", { key: '31a358d27b50ffa19a40fd13e5b4962a97b20267', type: "button", onClick: (e) => this.dsoRemoveClick.emit(e), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }, h("span", { key: '825778552459fa71dc1dd1bfba8788ad33f82faa', class: "sr-only" }, "Verwijder: ", this.labelText), h("dso-icon", { key: 'a414a63d43c18e66355dd87eab556251490bff9e', icon: "times" })))), this.isTruncated && (h("dso-tooltip", { key: 'd9bba58c8c88b5e4c33fecdbfd1f17a2db122cdc', stateless: true, id: "toggle-anchor", active: this.textHover || this.textFocus, position: "top", strategy: "absolute" }, this.labelText))));
     }
     static get is() { return "dso-label"; }
     static get encapsulation() { return "shadow"; }

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

@@ -26,10 +26,10 @@ export class LegendItem {
         const hasSymbol = this.symbolSlottedElement !== null;
         const hasBody = this.bodySlottedElement !== null;
         const isSelectable = this.selectableSlottedElement !== null;
-        return (h(Host, { key: 'fc79f2d5875d2f35d0209d007d0c483b0b3a72f7', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: '353c8ec1f937683c95f35efc80660867192a6a41', class: clsx("legend-item", {
+        return (h(Host, { key: 'd156def85be1ec2a37d991b228faf5277833402a', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: 'b107f35a432abff219fc66877a0d272f09033a1d', class: clsx("legend-item", {
                 "legend-item-symbol": hasSymbol,
                 "legend-item-selectable": isSelectable,
-            }) }, h("div", { key: '9332a0474f37cd6bc840e77acb83367e91844d82', hidden: !hasSymbol }, h("slot", { key: 'f773b1dbd4c596c2678251fc31ba3b8bab19d0ed', name: "symbol" })), h("div", { key: 'b7d5fff4fa5cc85ef4e36f2479d615cf718d9497' }, h("slot", { key: 'ab9889a69d2a5ec8d57bbb142123f3e35e4899c6' })), this.disabled && this.disabledMessage && (h("dso-toggletip", { key: '05d711b7a3af1ccf6d664a493332245a143481a5', position: "bottom" }, this.disabledMessage)), this.removable && (h("button", { key: 'f7f40cb8c99bbe60cf94c22837be9fd4e5ea515c', id: "remove-button", type: "button", onClick: (e) => this.dsoRemoveClick.emit({ originalEvent: e }) }, h("span", { key: 'bebe9f676b4a8f81e17137a4cb5a19509595bd6a', class: "sr-only" }, "Legenda item verwijderen"), h("dso-icon", { key: 'c68486b5f5a481336d25dd921906535ad1cc0366', icon: "trash" }))), hasBody && !this.disabled && (h("button", { key: 'fb4d95259f72734c25ad701ba1d54ceb81c1a342', id: "edit-button", type: "button", onClick: () => (this.showBody = !this.showBody) }, h("span", { key: '18368288cab62ff4d77d107b85bceacee6a4b6ea', class: "sr-only" }, "Legenda item aanpassen"), h("dso-icon", { key: 'b96d36039466662375e4d001ba7405f1f70a9ec3', icon: this.showBody ? "times" : "more" })))), h("div", { key: '15c61ac95b4dcd9868b95dd5f4f975fad0aa7abe', hidden: !hasBody || this.disabled || !this.showBody, class: "body" }, h("slot", { key: '5f5f529c2c048adf320c7e63dc99597a29e38ba1', name: "body" }))));
+            }) }, h("div", { key: '1b016daa9b14722110b19a11fae10fa85dc84820', hidden: !hasSymbol }, h("slot", { key: '8f57a88efde9e827af56f53b2831e2b0e280c3a8', name: "symbol" })), h("div", { key: '5142f827716e2b369f903cb1d4597ce5c43446b0' }, h("slot", { key: '911d4a2e26f44e11ee06d51436d9ff3fb70f309b' })), this.disabled && this.disabledMessage && (h("dso-toggletip", { key: 'b65362990e4acb3dbbdd1c82ec20e994bcba5717', position: "bottom" }, this.disabledMessage)), this.removable && (h("button", { key: 'f2eb84fe89d47a9d6e505dfc4e4c590a8e874dc9', id: "remove-button", type: "button", onClick: (e) => this.dsoRemoveClick.emit({ originalEvent: e }) }, h("span", { key: '6c3c82821756f909145621e994adad1abe307dd6', class: "sr-only" }, "Legenda item verwijderen"), h("dso-icon", { key: '87e3832de8540b87ec4b72324417399d4ce88aef', icon: "trash" }))), hasBody && !this.disabled && (h("button", { key: 'e4f5e0b1b70736de5b72090a213448cb27c8cb81', id: "edit-button", type: "button", onClick: () => (this.showBody = !this.showBody) }, h("span", { key: '0d837176e583140a37ab5637a70f1c5f0717346e', class: "sr-only" }, "Legenda item aanpassen"), h("dso-icon", { key: '53e00d795f9b2e30573d35e2343b48a7874fdd45', icon: this.showBody ? "times" : "more" })))), h("div", { key: '3012ea8681873b92090be198015f4e459b7cb7d8', hidden: !hasBody || this.disabled || !this.showBody, class: "body" }, h("slot", { key: 'a43f653b369d4ba75c8ab8a510f676aaf108958d', name: "body" }))));
     }
     static get is() { return "dso-legend-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -353,17 +353,6 @@
   text-align: start;
   user-select: none;
   vertical-align: middle;
-  border-radius: 4px;
-  border-width: 1px;
-  border-style: solid;
-  font-weight: 600;
-  padding-block: 15px;
-  padding-inline: 15px 47px;
-  position: relative;
-  text-align: start;
-  white-space: normal;
-  inline-size: 100%;
-  cursor: pointer;
 }
 .dso-list-button:focus, .dso-list-button:focus-visible {
   outline-offset: 2px;
@@ -376,6 +365,19 @@
   border-color: #ccc;
   color: #191919;
 }
+.dso-list-button {
+  border-radius: 4px;
+  border-width: 1px;
+  border-style: solid;
+  font-weight: 600;
+  padding-block: 15px;
+  padding-inline: 15px 47px;
+  position: relative;
+  text-align: start;
+  white-space: normal;
+  inline-size: 100%;
+  cursor: pointer;
+}
 .dso-list-button:hover, .dso-list-button:focus {
   background-color: #fff;
   border-color: #d7e7ce;

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

@@ -24,8 +24,10 @@ export class ListButton {
         });
     }
     componentDidRender() {
-        var _a;
-        (_a = this.subcontentSlot) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-hidden", "true");
+        var _a, _b;
+        if (!((_a = this.subcontentSlot) === null || _a === void 0 ? void 0 : _a.hasAttribute("aria-hidden"))) {
+            (_b = this.subcontentSlot) === null || _b === void 0 ? void 0 : _b.setAttribute("aria-hidden", "true");
+        }
     }
     disconnectedCallback() {
         var _a;
@@ -65,7 +67,7 @@ export class ListButton {
     }
     render() {
         const selected = this.checked || (this.count !== undefined && this.count > 0);
-        return (h("div", { key: '401ac6af5e5fa9ab3334ace93225fc1aa19da751', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: 'a88382af461ce5610e2603530dd59adf553ecf8f', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("div", { key: '879ec8c619218a57ae775b932c6b5c3def0753e0', class: "dso-selectable" }, h("input", { key: '5f01db4dcb0bacb8a12b2b7fda95a30dfb3bd16c', id: "dso-list-button-checkbox", type: "checkbox", value: "list-button", name: "naam", "aria-describedby": [this.sublabel && "sublabel", this.subcontentSlot && "description"].filter((s) => !!s).join(" ") || null, checked: selected, disabled: this.disabled }), h("label", { key: '76949467bbe709006f31936c214e02b074e412a4', htmlFor: "dso-list-button-checkbox" }, this.label), this.subcontentSlot && (h("div", { key: '7b6a84904a0d6e0fa484147ca24aebcd7dcacb48', class: "sr-only", id: "description" }, this.subcontentPrefix && this.subcontentPrefix + ":", h("div", { key: '97d53155731427f752f872cad77ef5d8f327905a', innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && (h("span", { key: '80276ba8f7b7c301a95e0654cf8a2bfba5c2f51a', class: "dso-sublabel", id: "sublabel" }, this.sublabel)), h("slot", { key: '285b84d3fd88a0286dd639ee38a8f07f91d0a853', name: "subcontent" })), this.count !== undefined && this.count > 0 && (h("div", { key: '1681f308f21df80b0e479b55ba363285cf6e3239', class: "dso-input-number" }, this.count > 1 && (h(Fragment, null, h("button", { key: '804ca34f83e05296a3a6ba1dfd2d6bc3e4ecea94', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.min) || this.disabled, onClick: (e) => this.stepValue(e, "decrement") }, h("dso-icon", { key: '8e5f6aaa2edfd68f2f1c1f32569902167509f34d', icon: "minus-circle" }), h("span", { key: 'e7b1fc8af2d84cd964bddaecb37bf73da8581c88', class: "sr-only" }, "Aantal verlagen")), h("span", { key: 'e476d0ca5b641a35d9dc99393190ac24857bc8c2', class: "dso-input-step-counter", "aria-label": "Aantal", "aria-live": "polite" }, this.count))), h("button", { key: '13b156984fdaf80a4eca8fe88e6e1d16328f33a3', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.max) || this.disabled, onClick: (e) => this.stepValue(e, "increment") }, h("dso-icon", { key: 'efba86f60c1ff9032cd30e081e2b0aac17ee4c10', icon: "plus-circle" }), h("span", { key: '7e3b8897c398feb65a6b540135bca4401cb4e859', class: "sr-only" }, "Aantal verhogen"))))));
+        return (h("div", { key: 'b598da82cfebc24eeccc5a2ec2b46613ba6eba69', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: 'ddf4368fb2eafc2be93b9a9e5c85c227c220303e', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("div", { key: 'f2c536704711f53fadc40463b39f0fec0430d9c9', class: "dso-selectable" }, h("input", { key: 'e751f37d8eb12e3f6e41742dd93b1019a3bb9303', id: "dso-list-button-checkbox", type: "checkbox", value: "list-button", name: "naam", "aria-describedby": [this.sublabel && "sublabel", this.subcontentSlot && "description"].filter((s) => !!s).join(" ") || null, checked: selected, disabled: this.disabled }), h("label", { key: '7ece1b6cdd28904be5dc222ce19f86f64d0cadac', htmlFor: "dso-list-button-checkbox" }, this.label), this.subcontentSlot && (h("div", { key: '7d7bd35557060c7e4ca370f122bfed958957a634', class: "sr-only", id: "description" }, this.subcontentPrefix && this.subcontentPrefix + ":", h("div", { key: '87dd6a05f6886e745f2448a2358cd3a8c2110cf7', innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && (h("span", { key: '0c490aa9be692955ab1fedae67d832d787e2edea', class: "dso-sublabel", id: "sublabel" }, this.sublabel)), h("slot", { key: '9836db0e661e3eeb87d9dc74b0e4f033215d0fe0', name: "subcontent" })), this.count !== undefined && this.count > 0 && (h("div", { key: 'c090e9c9eceec57fbe748739fef29da156576068', class: "dso-input-number" }, this.count > 1 && (h(Fragment, null, h("button", { key: '39ba1384b1ec7df2f816cfa33522e3cb8a7cd2b2', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.min) || this.disabled, onClick: (e) => this.stepValue(e, "decrement") }, h("dso-icon", { key: 'fe93d0957c319970873b5005e4f3502eacb30b90', icon: "minus-circle" }), h("span", { key: 'd0344facadf6c2923b9da6b54678222e6278fb48', class: "sr-only" }, "Aantal verlagen")), h("span", { key: '248ac189bdd3a8556c1b9f33033e4ca9b56ba3c7', class: "dso-input-step-counter", "aria-label": "Aantal", "aria-live": "polite" }, this.count))), h("button", { key: 'dfcd174240953bcb9956efe253e43e18d9a78318', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.max) || this.disabled, onClick: (e) => this.stepValue(e, "increment") }, h("dso-icon", { key: '29c77388606a75f2b781760ef7055a66e6a1a3b4', icon: "plus-circle" }), h("span", { key: '7eb4b4ccf7403c63344ab75e9b49d9f814558049', class: "sr-only" }, "Aantal verhogen"))))));
     }
     static get is() { return "dso-list-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"list-button.js","sourceRoot":"","sources":["../../../../src/components/list-button/list-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Fragment,\r\n  h,\r\n  Prop,\r\n  Event,\r\n  EventEmitter,\r\n  forceUpdate,\r\n} from \"@stencil/core\";\r\nimport { ListButtonChangeEvent, ListButtonSelectedEvent } from \"./list-button.interfaces\";\r\n\r\nimport clsx from \"clsx\";\r\n\r\n@Component({\r\n  tag: \"dso-list-button\",\r\n  shadow: true,\r\n  styleUrl: \"list-button.scss\",\r\n})\r\nexport class ListButton implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoListButtonElement;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  private get subcontentSlot() {\r\n    return this.host.querySelector<HTMLElement>(\"[slot='subcontent']\");\r\n  }\r\n\r\n  /**\r\n   * The label of the List Button.\r\n   */\r\n  @Prop()\r\n  label?: string;\r\n\r\n  /**\r\n   * The sublabel of the List Button.\r\n   */\r\n  @Prop()\r\n  sublabel?: string;\r\n\r\n  /**\r\n   * When defined the count can show on the List Button.\r\n   */\r\n  @Prop()\r\n  count?: number;\r\n\r\n  /**\r\n   * The minimum value.\r\n   */\r\n  @Prop()\r\n  min?: string | number;\r\n\r\n  /**\r\n   * The maximum value.\r\n   */\r\n  @Prop()\r\n  max?: string | number;\r\n\r\n  /**\r\n   * Whether the List Button is checked.\r\n   */\r\n  @Prop({ reflect: true })\r\n  checked = false;\r\n\r\n  /**\r\n   * Whether the List Button is disabled.\r\n   */\r\n  @Prop({ reflect: true })\r\n  disabled = false;\r\n\r\n  /**\r\n   * Prefix to subcontent for the purpose of screenreading.\r\n   */\r\n  @Prop()\r\n  subcontentPrefix?: string;\r\n\r\n  /**\r\n   * Emitted when the user changes the count.\r\n   */\r\n  @Event()\r\n  dsoCountChange!: EventEmitter<ListButtonChangeEvent>;\r\n\r\n  /**\r\n   * Emitted when the user activates the List Button itself.\r\n   *\r\n   * Does not fire when the user activates the count controls.\r\n   */\r\n  @Event()\r\n  dsoSelectedChange!: EventEmitter<ListButtonSelectedEvent>;\r\n\r\n  connectedCallback() {\r\n    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n    this.mutationObserver.observe(this.host, {\r\n      characterData: true,\r\n      childList: true,\r\n      subtree: true,\r\n      attributes: true,\r\n    });\r\n  }\r\n\r\n  componentDidRender(): void {\r\n    this.subcontentSlot?.setAttribute(\"aria-hidden\", \"true\");\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.mutationObserver?.disconnect();\r\n    delete this.mutationObserver;\r\n  }\r\n\r\n  private stepValue(e: Event, direction: \"increment\" | \"decrement\"): void {\r\n    if (typeof this.count === \"number\") {\r\n      const newValue = direction === \"increment\" ? this.count + 1 : this.count - 1;\r\n\r\n      if (!this.isNewCountValid(newValue)) {\r\n        return;\r\n      }\r\n\r\n      this.dsoCountChange.emit({\r\n        originalEvent: e,\r\n        count: newValue,\r\n      });\r\n    }\r\n  }\r\n\r\n  private handleSelectClick(e: Event): void {\r\n    e.preventDefault();\r\n\r\n    if (this.count !== undefined) {\r\n      this.dsoCountChange.emit({\r\n        originalEvent: e,\r\n        count: this.count > 0 ? 0 : 1,\r\n      });\r\n\r\n      return;\r\n    }\r\n\r\n    this.dsoSelectedChange.emit({\r\n      originalEvent: e,\r\n      checked: !this.checked,\r\n    });\r\n  }\r\n\r\n  private isNewCountValid(newValue: number): boolean {\r\n    return !(\r\n      this.min !== undefined &&\r\n      this.max !== undefined &&\r\n      (newValue < Number(this.min) || newValue > Number(this.max))\r\n    );\r\n  }\r\n\r\n  render() {\r\n    const selected = this.checked || (this.count !== undefined && this.count > 0);\r\n\r\n    return (\r\n      <div class={clsx([\"dso-button-group\", { \"dso-disabled\": this.disabled }])}>\r\n        <div\r\n          class={clsx([\"dso-list-button\", { \"dso-selected\": selected, \"dso-single-count\": this.count === 1 }])}\r\n          onClick={(e) => this.handleSelectClick(e)}\r\n        >\r\n          <div class=\"dso-selectable\">\r\n            <input\r\n              id=\"dso-list-button-checkbox\"\r\n              type=\"checkbox\"\r\n              value=\"list-button\"\r\n              name=\"naam\"\r\n              aria-describedby={\r\n                [this.sublabel && \"sublabel\", this.subcontentSlot && \"description\"].filter((s) => !!s).join(\" \") || null\r\n              }\r\n              checked={selected}\r\n              disabled={this.disabled}\r\n            />\r\n            <label htmlFor=\"dso-list-button-checkbox\">{this.label}</label>\r\n            {this.subcontentSlot && (\r\n              <div class=\"sr-only\" id=\"description\">\r\n                {this.subcontentPrefix && this.subcontentPrefix + \":\"}\r\n                <div innerHTML={this.subcontentSlot.innerHTML}></div>\r\n              </div>\r\n            )}\r\n          </div>\r\n          {this.sublabel && (\r\n            <span class=\"dso-sublabel\" id=\"sublabel\">\r\n              {this.sublabel}\r\n            </span>\r\n          )}\r\n          <slot name=\"subcontent\" />\r\n        </div>\r\n\r\n        {this.count !== undefined && this.count > 0 && (\r\n          <div class=\"dso-input-number\">\r\n            {this.count > 1 && (\r\n              <>\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"dso-tertiary\"\r\n                  disabled={this.count === Number(this.min) || this.disabled}\r\n                  onClick={(e) => this.stepValue(e, \"decrement\")}\r\n                >\r\n                  <dso-icon icon=\"minus-circle\"></dso-icon>\r\n                  <span class=\"sr-only\">Aantal verlagen</span>\r\n                </button>\r\n                <span class=\"dso-input-step-counter\" aria-label=\"Aantal\" aria-live=\"polite\">\r\n                  {this.count}\r\n                </span>\r\n              </>\r\n            )}\r\n\r\n            <button\r\n              type=\"button\"\r\n              class=\"dso-tertiary\"\r\n              disabled={this.count === Number(this.max) || this.disabled}\r\n              onClick={(e) => this.stepValue(e, \"increment\")}\r\n            >\r\n              <dso-icon icon=\"plus-circle\"></dso-icon>\r\n              <span class=\"sr-only\">Aantal verhogen</span>\r\n            </button>\r\n          </div>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"list-button.js","sourceRoot":"","sources":["../../../../src/components/list-button/list-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Fragment,\r\n  h,\r\n  Prop,\r\n  Event,\r\n  EventEmitter,\r\n  forceUpdate,\r\n} from \"@stencil/core\";\r\nimport { ListButtonChangeEvent, ListButtonSelectedEvent } from \"./list-button.interfaces\";\r\n\r\nimport clsx from \"clsx\";\r\n\r\n@Component({\r\n  tag: \"dso-list-button\",\r\n  shadow: true,\r\n  styleUrl: \"list-button.scss\",\r\n})\r\nexport class ListButton implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoListButtonElement;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  private get subcontentSlot() {\r\n    return this.host.querySelector<HTMLElement>(\"[slot='subcontent']\");\r\n  }\r\n\r\n  /**\r\n   * The label of the List Button.\r\n   */\r\n  @Prop()\r\n  label?: string;\r\n\r\n  /**\r\n   * The sublabel of the List Button.\r\n   */\r\n  @Prop()\r\n  sublabel?: string;\r\n\r\n  /**\r\n   * When defined the count can show on the List Button.\r\n   */\r\n  @Prop()\r\n  count?: number;\r\n\r\n  /**\r\n   * The minimum value.\r\n   */\r\n  @Prop()\r\n  min?: string | number;\r\n\r\n  /**\r\n   * The maximum value.\r\n   */\r\n  @Prop()\r\n  max?: string | number;\r\n\r\n  /**\r\n   * Whether the List Button is checked.\r\n   */\r\n  @Prop({ reflect: true })\r\n  checked = false;\r\n\r\n  /**\r\n   * Whether the List Button is disabled.\r\n   */\r\n  @Prop({ reflect: true })\r\n  disabled = false;\r\n\r\n  /**\r\n   * Prefix to subcontent for the purpose of screenreading.\r\n   */\r\n  @Prop()\r\n  subcontentPrefix?: string;\r\n\r\n  /**\r\n   * Emitted when the user changes the count.\r\n   */\r\n  @Event()\r\n  dsoCountChange!: EventEmitter<ListButtonChangeEvent>;\r\n\r\n  /**\r\n   * Emitted when the user activates the List Button itself.\r\n   *\r\n   * Does not fire when the user activates the count controls.\r\n   */\r\n  @Event()\r\n  dsoSelectedChange!: EventEmitter<ListButtonSelectedEvent>;\r\n\r\n  connectedCallback() {\r\n    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n    this.mutationObserver.observe(this.host, {\r\n      characterData: true,\r\n      childList: true,\r\n      subtree: true,\r\n      attributes: true,\r\n    });\r\n  }\r\n\r\n  componentDidRender(): void {\r\n    if (!this.subcontentSlot?.hasAttribute(\"aria-hidden\")) {\r\n      this.subcontentSlot?.setAttribute(\"aria-hidden\", \"true\");\r\n    }\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.mutationObserver?.disconnect();\r\n    delete this.mutationObserver;\r\n  }\r\n\r\n  private stepValue(e: Event, direction: \"increment\" | \"decrement\"): void {\r\n    if (typeof this.count === \"number\") {\r\n      const newValue = direction === \"increment\" ? this.count + 1 : this.count - 1;\r\n\r\n      if (!this.isNewCountValid(newValue)) {\r\n        return;\r\n      }\r\n\r\n      this.dsoCountChange.emit({\r\n        originalEvent: e,\r\n        count: newValue,\r\n      });\r\n    }\r\n  }\r\n\r\n  private handleSelectClick(e: Event): void {\r\n    e.preventDefault();\r\n\r\n    if (this.count !== undefined) {\r\n      this.dsoCountChange.emit({\r\n        originalEvent: e,\r\n        count: this.count > 0 ? 0 : 1,\r\n      });\r\n\r\n      return;\r\n    }\r\n\r\n    this.dsoSelectedChange.emit({\r\n      originalEvent: e,\r\n      checked: !this.checked,\r\n    });\r\n  }\r\n\r\n  private isNewCountValid(newValue: number): boolean {\r\n    return !(\r\n      this.min !== undefined &&\r\n      this.max !== undefined &&\r\n      (newValue < Number(this.min) || newValue > Number(this.max))\r\n    );\r\n  }\r\n\r\n  render() {\r\n    const selected = this.checked || (this.count !== undefined && this.count > 0);\r\n\r\n    return (\r\n      <div class={clsx([\"dso-button-group\", { \"dso-disabled\": this.disabled }])}>\r\n        <div\r\n          class={clsx([\"dso-list-button\", { \"dso-selected\": selected, \"dso-single-count\": this.count === 1 }])}\r\n          onClick={(e) => this.handleSelectClick(e)}\r\n        >\r\n          <div class=\"dso-selectable\">\r\n            <input\r\n              id=\"dso-list-button-checkbox\"\r\n              type=\"checkbox\"\r\n              value=\"list-button\"\r\n              name=\"naam\"\r\n              aria-describedby={\r\n                [this.sublabel && \"sublabel\", this.subcontentSlot && \"description\"].filter((s) => !!s).join(\" \") || null\r\n              }\r\n              checked={selected}\r\n              disabled={this.disabled}\r\n            />\r\n            <label htmlFor=\"dso-list-button-checkbox\">{this.label}</label>\r\n            {this.subcontentSlot && (\r\n              <div class=\"sr-only\" id=\"description\">\r\n                {this.subcontentPrefix && this.subcontentPrefix + \":\"}\r\n                <div innerHTML={this.subcontentSlot.innerHTML}></div>\r\n              </div>\r\n            )}\r\n          </div>\r\n          {this.sublabel && (\r\n            <span class=\"dso-sublabel\" id=\"sublabel\">\r\n              {this.sublabel}\r\n            </span>\r\n          )}\r\n          <slot name=\"subcontent\" />\r\n        </div>\r\n\r\n        {this.count !== undefined && this.count > 0 && (\r\n          <div class=\"dso-input-number\">\r\n            {this.count > 1 && (\r\n              <>\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"dso-tertiary\"\r\n                  disabled={this.count === Number(this.min) || this.disabled}\r\n                  onClick={(e) => this.stepValue(e, \"decrement\")}\r\n                >\r\n                  <dso-icon icon=\"minus-circle\"></dso-icon>\r\n                  <span class=\"sr-only\">Aantal verlagen</span>\r\n                </button>\r\n                <span class=\"dso-input-step-counter\" aria-label=\"Aantal\" aria-live=\"polite\">\r\n                  {this.count}\r\n                </span>\r\n              </>\r\n            )}\r\n\r\n            <button\r\n              type=\"button\"\r\n              class=\"dso-tertiary\"\r\n              disabled={this.count === Number(this.max) || this.disabled}\r\n              onClick={(e) => this.stepValue(e, \"increment\")}\r\n            >\r\n              <dso-icon icon=\"plus-circle\"></dso-icon>\r\n              <span class=\"sr-only\">Aantal verhogen</span>\r\n            </button>\r\n          </div>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

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: '15a71708b94df501ab1ca704c12f8efaed64d588', 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: '7610aa58ca6f96ae046979fc6775b7e81ed383d2', 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

@@ -27,7 +27,7 @@ export class MapBaseLayers {
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: 'ffe3ef5ddd8024afcd795867ba86da5fc00d2767', class: "form-group dso-radios" }, h("legend", { key: '16860de34997a5aee6d1fcf6f9be9f8555a0b945', class: "sr-only" }, "Achtergrond"), h("div", { key: '5fc08587239e1cf87722418c90db72da8fc69eca', class: "dso-label-container" }, h("span", { key: 'e8668cee8e76e9e842cc2bdd94b6fd4da88de17d', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: '6ed2fc6d7f5407789ff74cdae1b3bb93e6062720', 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: '7e13ee00a63cdad0665bc3730387ccac941c8d66', class: "form-group dso-radios" }, h("legend", { key: '3ef5163845f93065b87711fd01d78725f227d3ce', class: "sr-only" }, "Achtergrond"), h("div", { key: 'f0dafaffdc8c13125cd4afb3c98b6384e1312433', class: "dso-label-container" }, h("span", { key: 'bcf82a98342df39d98832db27823db6e6b2713a2', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: '2feee1a616600ef226745c101d9a288b25753ac3', 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.css

@@ -184,9 +184,7 @@ button::-moz-focus-inner {
 }
 .toggle-visibility-button {
   position: absolute;
-  inset-inline-end: calc(
-      100% + 56px
-    );
+  inset-inline-end: calc(100% + 56px);
   inset-block-start: 16px;
 }
 

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

@@ -58,7 +58,7 @@ export class MapControls {
         });
     }
     render() {
-        return (h(Fragment, null, h("button", { key: 'e3daf3337eedad7c5647aba5338124b785983e1b', type: "button", id: "toggle-visibility-button", class: "toggle-visibility-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: '544229b40319921cc34d1cff3dd35c18083e6426', icon: "layers" }), h("span", { key: '60b70ebd862eed50d89bbb03eb6903126339c707' }, this.text("layersButton"))), h("div", { key: '11e20f505a895847b26855c21ecb77e5609887fb', class: "zoom-buttons" }, h("button", { key: '82a95b3706eb3677585b917c60a8295234e08aa4', type: "button", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, h("span", { key: 'c36b8b13aa2cae68355de9b0953197f88f75c0c7' }, this.text("zoomIn")), h("dso-icon", { key: '9337e9539ca5a4711b9a74c3d4df14913d4da35d', icon: "plus" })), h("button", { key: '3e934fa88dd063bf43ae0cf71ee645c38dbce819', type: "button", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, h("span", { key: '481834440a06b12eb939b32c0d6c47ff4045fdf1' }, this.text("zoomOut")), h("dso-icon", { key: '4aeb93804aed494572abf20a04c67b826281a993', icon: "minus" }))), h("section", { key: '2ccc0d76a2e6ba9236981143b7038cd76184e631', hidden: this.hideContent }, h("header", { key: 'ced060f6dbe63557ab9322e995f1f2bf7f54dcb0' }, h("h2", { key: '6a5087e44dccd7a6e4b70e8bfe102acd0cf74c93' }, this.text("title")), h("button", { key: '8a3279fb0403298d171fe80a822805dddf08ca65', type: "button", class: "close-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", { key: '2d206ad92727822002a9046b4d764b7620ff6d87' }, this.text("hidePanel", { title: this.text("title") })), h("dso-icon", { key: 'ad32fd102f5d546b9e7edefec7fa9b02f0b06e3b', icon: "times" }))), h("dso-scrollable", { key: 'e559b2f524287861013a2b81e657475bfd90ad61' }, h("div", { key: '950ba389a922e37f015a58cf8d8cf609cb1fa1fd', class: "content" }, h("slot", { key: 'f38f9391f552411af6d7593b1a39f3d4e5f6a9cc' }))))));
+        return (h(Fragment, null, h("button", { key: '0fd986956411cb17370bee64462d0d8819611841', type: "button", id: "toggle-visibility-button", class: "toggle-visibility-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: '52a726ecf9d7b42dfec754efdf8de04d88123c58', icon: "layers" }), h("span", { key: '1ddd1e60d1a4f018fb84199c3a61066352d06431' }, this.text("layersButton"))), h("div", { key: '034b8741f04b6764fa8fa8b8c308a5a354c0dcb3', class: "zoom-buttons" }, h("button", { key: '859a740325bbeeae6adc2b7f0b373705ff422ee2', type: "button", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, h("span", { key: '480623c3611aa1184c7220db69efcfa204f72a2b' }, this.text("zoomIn")), h("dso-icon", { key: '82622c8e1a812ec3db1063124729096d6f0f76a9', icon: "plus" })), h("button", { key: '5452cf6f7ade2d583f3f9563786b6cec01f5ce04', type: "button", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, h("span", { key: '9952df75387874e21072fb5564588f438e2aa0c6' }, this.text("zoomOut")), h("dso-icon", { key: '81c398b34a59db6f00545264685427ddd466f2d5', icon: "minus" }))), h("section", { key: '48e2d301e96a373af8926c7d5f3fc32068993c23', hidden: this.hideContent }, h("header", { key: 'ebbe567521c62e8243add8859fc0a889e624f5bd' }, h("h2", { key: 'b0b6b51cd9ea6f5795ee8d6f35f2be16ae610010' }, this.text("title")), h("button", { key: '1122debc7dbff1b1144a89ca47c0693b88f53919', type: "button", class: "close-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", { key: '209fa94e79a1b937e8306b1b0e5953d8e7fa8ef5' }, this.text("hidePanel", { title: this.text("title") })), h("dso-icon", { key: 'caaedeaabcec01c76928e8f86b952ea9297a25ef', icon: "times" }))), h("dso-scrollable", { key: '34a5fac306731abb91b670f22238501a5cf60f06' }, h("div", { key: '34d4a73073d3a53537821c6d5d1360a5886952aa', class: "content" }, h("slot", { key: '98ed8da0651cbd7d30cc6a38948451bce2e1b29a' }))))));
     }
     static get is() { return "dso-map-controls"; }
     static get encapsulation() { return "shadow"; }

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

@@ -28,7 +28,7 @@ export class MapOverlays {
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: '930f973dafb8b329b93ead220ee828cc91a0235a', class: "form-group dso-checkboxes" }, h("legend", { key: 'f3dbb07e4e45417db260fc490e8012cc2ee5444d', class: "sr-only" }, "Kaartlagen"), h("div", { key: 'e12f2026648cbd6341b0954c1754a3563ac63126', class: "dso-label-container" }, h("span", { key: '3cf899c2f82901d691eed720b538e60f305c6d15', class: "control-label", "aria-hidden": "true" }, this.text("title"))), h("div", { key: '1a951fbb61b586aa6314ea62e3ed25d8b84809ed', 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: '8ef0c3a734d449e75f42c43e2d2f93acb4a443e3', class: "form-group dso-checkboxes" }, h("legend", { key: 'd5317715612e9790d65a411f291c00d7319b9a60', class: "sr-only" }, "Kaartlagen"), h("div", { key: 'e2df4b1aed15cf2e808607a811780ab476bab2b6', class: "dso-label-container" }, h("span", { key: '95751d4947a940c02d7a7b9845f9e51238361519', class: "control-label", "aria-hidden": "true" }, this.text("title"))), h("div", { key: 'fc68e624a70062c5c98fab61418183ca784f8600', 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

@@ -42,7 +42,7 @@ export class MarkBar {
     render() {
         const current = this.current || 0;
         const totalCount = this.totalCount || 0;
-        return (h("div", { key: '482936ab1e34dd34d30927358ef4c4aedbf91c3e', class: "dso-mark-bar" }, h("div", { key: 'd4e86cdd5c26cf75078614df2a2c8ace77efa2af', class: "dso-mark-bar-input" }, h("input", { key: '0fb795b6d5d9a5ab47ee33b539f3df44ce8a7185', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: 'cfe6e71f9e83c526714acd2851aab0b8315ba02c', htmlFor: "search-input" }, h("dso-icon", { key: 'c4e1c7b31333fe3c9d7f08eaf3e3df182c72961b', class: "dso-search-icon", icon: "search" }), h("span", { key: '17600a8e4488f09534fb7f89353e27fc54deb7b4', class: "label-text" }, this.label)), h("button", { key: 'c2c008c5983caf8a74704dc906069c1c6aa1ca0b', type: "button", onClick: this.handleClear }, h("dso-icon", { key: 'e3235214933113b1ae1220840439468f117e6dad', icon: "times" }), h("span", { key: '5424f0daa1af5e77e682cba0bf3cc547ec30e6c8', class: "sr-only" }, "Zoekopdracht legen"))), h("div", { key: '7f79fb4ae311be0af5306cdf1c2dfae5f0d88780', class: "dso-button-container" }, h("span", { key: 'f0870c44e203e79e9ed500f20cb0c37bc4df2c13', class: "divider" }), h("button", { key: '9d1e8d907c1846e2bd0bb9a304439280fdb0eb9a', type: "button", onClick: this.handlePrevious, disabled: current <= 1 }, h("dso-icon", { key: '8d22bbe7bb9511f495238fd7bbeef454362c76d9', icon: "chevron-up", class: "hydrated" }), h("span", { key: '2acc9f3da377603624515b6e81c5f7698f4ca302', class: "sr-only" }, "Vorig zoekresultaat")), h("span", { key: '1ec45c4ab1e76c8ec21d3595da7098742812028d' }, current, "/", totalCount), h("button", { key: '80ade498d8a591ee6cdfce7c16a4386f806909f7', type: "button", onClick: this.handleNext, disabled: current >= totalCount }, h("dso-icon", { key: 'b8971ee87d0b646b0fdd94d6145b1932f54210d3', icon: "chevron-down", class: "hydrated" }), h("span", { key: '9791f4ec3cc801dec9f8f5fe954d04b6bd70a0d4', class: "sr-only" }, "Volgend zoekresultaat")))));
+        return (h("div", { key: '654d016b7900a348bb5ecfd0fbe8dd8d1597bf11', class: "dso-mark-bar" }, h("div", { key: '739df0e4d1a381c2f1f2df909d00d958da86ea6e', class: "dso-mark-bar-input" }, h("input", { key: 'be9023cb3f759f8f751accd3d1199bf8c25c6b78', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: '1802cb4d1be66d351d68ce743b05a0b2630cc9a2', htmlFor: "search-input" }, h("dso-icon", { key: '29dd2af6fa7ccbff36baabcbcb9ac17f9db75c74', class: "dso-search-icon", icon: "search" }), h("span", { key: '693c70b79a205b28d5d56d4d6e02e4c82bf8cf3d', class: "label-text" }, this.label)), h("button", { key: '4458b5f67b5b90eb03132942c39b3dfdf6f72404', type: "button", onClick: this.handleClear }, h("dso-icon", { key: '601dd220625122f3548e18cd324a90f39430c6bf', icon: "times" }), h("span", { key: 'f3142054e7714925f5c2c22f4b7ac2f47311feb7', class: "sr-only" }, "Zoekopdracht legen"))), h("div", { key: '7f17607ebfdcbce1608d8a5ae6c3e365ce43517c', class: "dso-button-container" }, h("span", { key: 'ffb56f06408798b6065d31405167f91890f243e9', class: "divider" }), h("button", { key: '5edb2809f48b286a3cc4857d18a9551e52d775cb', type: "button", onClick: this.handlePrevious, disabled: current <= 1 }, h("dso-icon", { key: '74d026687c712e6b51a8b6bd716f2e02f23cb380', icon: "chevron-up", class: "hydrated" }), h("span", { key: '49255a80b38e4db1b99842700cdb4c21b26fcffb', class: "sr-only" }, "Vorig zoekresultaat")), h("span", { key: 'f6a268019e5e946f359386693db8b664e7a995da' }, current, "/", totalCount), h("button", { key: '917951cca40a5f84d9f76f24ab0e713f56280b28', type: "button", onClick: this.handleNext, disabled: current >= totalCount }, h("dso-icon", { key: 'e766db3602e8b4011e78f063e552a6b3a32a9442', icon: "chevron-down", class: "hydrated" }), h("span", { key: 'a57cdf1625c09daa708ee9e354a7086bd20ec22d', class: "sr-only" }, "Volgend zoekresultaat")))));
     }
     static get is() { return "dso-mark-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -49,10 +49,10 @@ export class Modal {
     }
     render() {
         var _a;
-        return (h("dialog", { key: '8a4e6f91d25b50780037a2fc20cf88f2497c3ca3', 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), onCancel: (e) => {
+        return (h("dialog", { key: 'ccf4e09ebb89081ed7a64ef33fac7f45f6759472', 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), onCancel: (e) => {
                 e.preventDefault();
                 this.dsoClose.emit({ originalEvent: e });
-            } }, h("div", { key: 'bc6a6e22adef96679de72b34bfee6733bb102146', class: "dso-dialog", role: "document" }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.showCloseButton && (h("button", { type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, this.text("close")))))) : (h("span", { class: "sr-only", id: this.ariaId }, this.text("dialog"))), h("dso-scrollable", { key: '00d0e3416057db625debbca6864e4c122f077a8b' }, h("div", { key: '85b2458ff18da11cc67b32d9748ab3f948584c11', class: "dso-body", tabIndex: 0 }, h("slot", { key: '113504936cd8303d8c13fe08e53dd9598129861d', name: "body" }))), this.hasFooter && (h("div", { key: 'bb6f912fb03acb460cb1622e0d1c524cff46f93e', class: "dso-footer" }, h("slot", { key: 'bf86c1a798bf355e56ada1c34b044ffa7840066a', name: "footer" }))))));
+            } }, h("div", { key: '78bb62b918f77eff28a6f19f02b3e96e7d81c263', class: "dso-dialog", role: "document" }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.showCloseButton && (h("button", { type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, this.text("close")))))) : (h("span", { class: "sr-only", id: this.ariaId }, this.text("dialog"))), h("dso-scrollable", { key: '5000362fe08de5cf67a307e50ae036da36a9eabd' }, h("div", { key: '46acc85a8f80c96792ebaf46eab3ee9077047040', class: "dso-body", tabIndex: 0 }, h("slot", { key: '0a5abf6641f7f3da1ac70cede9355c56eb577d9d', name: "body" }))), this.hasFooter && (h("div", { key: 'e731105b044fb9cd47ad1a8ccdd0265d6304a915', class: "dso-footer" }, h("slot", { key: 'fcbc1f8e4f1e45df0dd52c9bddcb992d5569d42a', name: "footer" }))))));
     }
     static get is() { return "dso-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -30,7 +30,7 @@ export class OzonContent {
             emitAnchorClick: this.dsoAnchorClick.emit,
         };
         const transformed = mapper.transform(this.content, context);
-        return h(Fragment, { key: 'fa2f5b571b572007dace7776e56a2ce800ddc3b6' }, transformed);
+        return h(Fragment, { key: '2d69a228d1f697ccb4ef2fb8c691127865375771' }, transformed);
     }
     static get is() { return "dso-ozon-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/plekinfo-card/plekinfo-card.js

@@ -50,7 +50,7 @@ export class PlekinfoCard {
     }
     render() {
         const hasSymbol = this.symbolSlottedElement !== null;
-        return (h(Host, { key: '16b322cd348e235cb90f6c81b03b3523c7494c34', "has-symbol": hasSymbol }, h(WrapWijzigactie, { key: 'b51eee64a8c1cfc14bad0f634d59934e0d9bd7a2', wijzigactie: this.wijzigactie }, h("div", { key: '1098cfc79f3a39cc9e93a287c3ed138978d5dc23', class: "dso-plekinfo-card-symbol", hidden: !hasSymbol }, h("slot", { key: '6ceae494d72621d1c7f666e05eeee10e7330e040', name: "symbol" })), h("div", { key: '5caca45aa18ea2b5780b8eb66a232b6ab569c6e5', class: "dso-plekinfo-card-heading" }, this.href ? (h("a", { href: this.href, target: this.targetBlank ? "_blank" : undefined, rel: this.targetBlank ? "noopener noreferrer" : undefined, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { name: "heading" }), this.targetBlank ? (h(Fragment, null, h("dso-icon", { icon: "external-link" }), h("span", { class: "sr-only" }, "(Opent andere website in nieuw tabblad)"))) : (h("dso-icon", { icon: "chevron-right" })))) : (h("slot", { name: "heading" })), this.metaSlottedElement !== null && h("slot", { key: '1864763308eda2eb0e5e1ad5bb604e8344ed8ec1', name: "meta" }), this.interaction !== null && h("slot", { key: 'fa8e6541702bf533e8e3bf05c004da08800bee28', name: "interaction" })), h("div", { key: '552b30fb30d716669d4664e5a06f1972146c3864', class: "dso-plekinfo-card-content" }, h("slot", { key: '30a1a8ff07e93b95d8b8dff863f7da44b2a07a44', name: "content" })))));
+        return (h(Host, { key: '5cd241eabf508145625d46a6d923a9fdeeb8d191', "has-symbol": hasSymbol }, h(WrapWijzigactie, { key: 'd4f5887cfe88050246c31d84ef389a6b289ebb15', wijzigactie: this.wijzigactie }, h("div", { key: '8e160f4e8f8329c11feefa842c035500b46b3c5b', class: "dso-plekinfo-card-symbol", hidden: !hasSymbol }, h("slot", { key: '2f8110b2bda5a39bf12df96a8838dcc41b0eb014', name: "symbol" })), h("div", { key: 'dbbc8d0e7f39a5888fd18c91674888a3f56cf086', class: "dso-plekinfo-card-heading" }, this.href ? (h("a", { href: this.href, target: this.targetBlank ? "_blank" : undefined, rel: this.targetBlank ? "noopener noreferrer" : undefined, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { name: "heading" }), this.targetBlank ? (h(Fragment, null, h("dso-icon", { icon: "external-link" }), h("span", { class: "sr-only" }, "(Opent andere website in nieuw tabblad)"))) : (h("dso-icon", { icon: "chevron-right" })))) : (h("slot", { name: "heading" })), this.metaSlottedElement !== null && h("slot", { key: 'f71a03bc2ce6c168d645bfc37e21bdb7585261c1', name: "meta" }), this.interaction !== null && h("slot", { key: '5716ff3cd0f4270c9220076810e5f7e5e2f65347', name: "interaction" })), h("div", { key: 'f65b1f199ba70cea2fb254475a84547aba0d99ab', class: "dso-plekinfo-card-content" }, h("slot", { key: '678564a6fe0ab238570730eb5e78922b45df9b94', name: "content" })))));
     }
     static get is() { return "dso-plekinfo-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,7 +13,7 @@ export class ProgressBar {
     render() {
         const progressNumber = Math.round(this.progress);
         const progressPercentage = `${progressNumber}%`;
-        return (h("div", { key: '6a49ff9babffe7922e2a3a5b545cd3d132e39787', class: "progress" }, h("span", { key: 'e5a05911d83b5ffcc9c9fe800944b30ba74ca19a', class: "progress-bar", role: "progressbar", "aria-labelledby": "progress-bar-label", "aria-valuenow": progressNumber, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("span", { key: '425b8690e838da624b0436fe6b50fc0383d05cf4', style: { width: `${progressPercentage}` } })), h("span", { key: 'ad1bbcaed9fc43340b1e6a21a7d82ccef0cf4256', id: "progress-bar-label" }, h("slot", { key: '12c73a2b1de830c868f72d9c40b50808958955eb' }))));
+        return (h("div", { key: 'f36531b1a2a63c681dd43343a56e27ae989ce4d3', class: "progress" }, h("span", { key: '1ebf570e2636eea9ce92afa1178be72e558ea97c', class: "progress-bar", role: "progressbar", "aria-labelledby": "progress-bar-label", "aria-valuenow": progressNumber, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("span", { key: '2e3b5359953d98adeb8b602dc38f172d166cbf07', style: { width: `${progressPercentage}` } })), h("span", { key: '6cbff28be0db354b9559ae88f03cdbd24cf6349d', id: "progress-bar-label" }, h("slot", { key: 'a389ee94c6ea3f592b6884841e013a3fc8c7e058' }))));
     }
     static get is() { return "dso-progress-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/progress-indicator/progress-indicator.js

@@ -6,7 +6,7 @@ export class Progressindicator {
         this.text = i18n(() => this.host, translations);
     }
     render() {
-        return (h(Host, { key: '45c11cbcd5e0f3aed89b524a0b90380574cde82a' }, h("span", { key: 'e7a17a1a3a1b8c282b2399cf601f673eb8a7677b', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: 'af3006f3a7acc4053537e3847ab9c45f9e19fa99', icon: "spinner" })), h("span", { key: '554a73506b6e1e51107a7c6ee472d584a5e22bed', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label || this.text("label"))));
+        return (h(Host, { key: '52411c54285ee531622097d20636d86490eb5347' }, h("span", { key: 'f041f3f2e1cbb130ac28c9f372be4c3ea55e6408', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: 'f40a24bbba984fc401843e60731e6568756e3c19', icon: "spinner" })), h("span", { key: 'ec13ec473f01dcb0ad18a64f0dc56cce16b87cac', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label || this.text("label"))));
     }
     static get is() { return "dso-progress-indicator"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import { h, Fragment } from "@stencil/core";
 export class ProjectItem {
     render() {
-        return (h(Fragment, null, h("div", { key: '86884445244ba13707f047d729a8b193ee381635', class: "project-item-header" }, h("div", { key: '326f36e6b4765e903f18781a8c465b4741153a50', class: "project-item-title" }, h("slot", { key: 'd48ca3b2801f525970effc4f6c48caf6f467a12c', name: "title" }), this.label && (h("dso-label", { key: '046b005d9a0dcae01c34c6549878fc4205a1f24d', status: "danger", compact: true }, this.label))), h("div", { key: 'f2e5e03cfa19b75fea2e7da0d20a44fb23e28573', class: "project-item-actions" }, h("slot", { key: '939dcd5c9312905143d429ef25acbcb9b71d68dc', name: "actions" }))), h("div", { key: '116ad5128076f3c07d5a7314a6aae6d35c4003b2', class: "project-item-info" }, h("div", { key: 'e827260fe0ddc522827433e26cf8521400f5ca0b', class: "project-item-progress" }, h("slot", { key: '91113a46e216c0fb1a7b27ed997e77ac3e33cfa1', name: "progress" })), h("div", { key: 'bc23f3f23342c7f1285839406cf1a0108d546fdd', class: "project-item-status" }, h("slot", { key: '865229ea9fcf2243778e4e4d52a67941c9cc6604', name: "status" })))));
+        return (h(Fragment, null, h("div", { key: '3d3b1bc8f12eba2607d5536f6c87be8601484671', class: "project-item-header" }, h("div", { key: '13d3358e7ec3f837658dcce47e333898ee5da527', class: "project-item-title" }, h("slot", { key: '5133a6630099106d78549101bb974659eb515e7c', name: "title" }), this.label && (h("dso-label", { key: 'a955a28692b88cecbb755a0d5e7f6c1e54a5bf2b', status: "danger", compact: true }, this.label))), h("div", { key: '847a95a32f9130bec82a55e590bde4d319eceb39', class: "project-item-actions" }, h("slot", { key: 'dfc72d7cbe7a58ec08a5c6b68b0b9388944aa1e8', name: "actions" }))), h("div", { key: '2e3a43fec7416b100680a68bbfce3e3e05b84aaa', class: "project-item-info" }, h("div", { key: 'f20a244104d7f853d6be17b1977f1a612a60fcd8', class: "project-item-progress" }, h("slot", { key: '4806c05b5837d3164d44ee4804f98e0cfba30775', name: "progress" })), h("div", { key: 'b7593174a234950a1cd52b7c3bec4fc98ce83802', class: "project-item-status" }, h("slot", { key: 'a509ac9469b91bd514940688ab01c1c50300398d', name: "status" })))));
     }
     static get is() { return "dso-project-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/responsive-element/responsive-element.js

@@ -40,7 +40,7 @@ export class ResponsiveElement {
         this.observer.unobserve(this.host);
     }
     render() {
-        return (h(Host, { key: '7df8a0107dec10534a1ee68c12b0718675ca37d0', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: '376cdb5c8b4b349877b7289b9bb5b0ae597620b6' })));
+        return (h(Host, { key: 'ca9c1b61a8604e516e05bdce5117192964831c90', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: 'd8465b9289ba9657d50c36cd0d43926e5ac47d3f' })));
     }
     static get is() { return "dso-responsive-element"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/scrollable/scrollable.js

@@ -84,9 +84,9 @@ export class Scrollable {
         this.slottedElements.forEach((element) => resizeObserver.unobserve(element));
     }
     render() {
-        return (h("div", { key: '70329cb775aa7b06be2e6fcb1e28670f735c2467', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { key: 'ff50504d84fad62027ea67742b64ddae2be63f47', ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
+        return (h("div", { key: 'c05eb5ae95b609ffd925de71c6ef24c46dcbc766', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { key: '7995d59689685e4b66b9fc93e3ca94f79971ae55', ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
                 [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== "noScroll",
-            }), onScroll: () => this._setScrollState() }, h("slot", { key: 'ab03fe8a94df6fd40037376a054c474d75197944' }))));
+            }), onScroll: () => this._setScrollState() }, h("slot", { key: '8beab734494a921c45d519828b15128b09623a38' }))));
     }
     static get is() { return "dso-scrollable"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/selectable/selectable.css

@@ -1,7 +1,7 @@
 :host {
+  padding-inline-start: 32px;
   position: relative;
   display: var(--dso-selectable-display, block);
-  padding-inline-start: 32px;
 }
 :host label {
   font-weight: 400;

package/dist/collection/components/selectable/selectable.js

@@ -51,7 +51,7 @@ export class Selectable {
     render() {
         var _a;
         const hasInfo = !!this.host.querySelector('[slot="info"]');
-        return (h(Fragment, { key: '8eaf459e1b418a9c5eb61c12939aa137b1e9a9b7' }, h("div", { key: 'ecbf02645dd338d6071fb06426662d78649bd8c8', class: "dso-selectable-container" }, h("div", { key: 'c244e0254c468e30c22ec958c6be91e532d77392', class: clsx("dso-selectable-input-wrapper", { "dso-keyboard-focus": this.keyboardFocus }) }, h("input", { key: 'df920ead7e69f3e136a058cd5ab7953ecad8c707', 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, onBlur: () => (this.keyboardFocus = false), onKeyUp: () => (this.keyboardFocus = true), ref: (el) => (this.input = el) }), !this.labelledById ? (h("label", { htmlFor: this.getIdentifier() }, h("slot", null))) : (h("label", null, h("slot", null)))), hasInfo && !this.infoFixed && (h("dso-info-button", { key: 'f539a4ea7af6bb4c1412895c2af316b9014d8420', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: '69bde115eba8f18261c79886654defb9f0f703f6', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: '9d92cccb1adfd77adc579f57281dddc56a2225ba' }, h("slot", { key: '4fee8b038cb69e5321c23502eb6a5dad31c3c9ee', name: "info" })))), h("slot", { key: 'fd69188bb07390259d9ac58f328d3a7c8b42fe12', name: "options" })));
+        return (h(Fragment, { key: '6be928de297ac8c9e25bfee2d06c39aa3325223a' }, h("div", { key: '95816f8f3bf9c78b767e722c101b3de3ebdc02c7', class: "dso-selectable-container" }, h("div", { key: 'e357c54e22edca90183d8d02c5ac18383214c1d3', class: clsx("dso-selectable-input-wrapper", { "dso-keyboard-focus": this.keyboardFocus }) }, h("input", { key: 'cf93d6a44737dc536a79c7d3234d3ac18a0fb32b', 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, onBlur: () => (this.keyboardFocus = false), onKeyUp: () => (this.keyboardFocus = true), ref: (el) => (this.input = el) }), !this.labelledById ? (h("label", { htmlFor: this.getIdentifier() }, h("slot", null))) : (h("label", null, h("slot", null)))), hasInfo && !this.infoFixed && (h("dso-info-button", { key: 'ccca28238ea3c20c8d85964034e00b08d70b18d2', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: 'e6141cd94e9c499a4b18e791793e5e1a4daa439d', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: '32872781b1a8ad9d1649e88f3725e1eadc775a4b' }, h("slot", { key: '014b75f1bdf48b4f7f171bd32d6717f3a7d52a90', name: "info" })))), h("slot", { key: '9879fc525dcfcf7cac3c6cfd99c142e8fc5adb19', name: "options" })));
     }
     componentDidRender() {
         if (this.input && typeof this.checked === "boolean" && this.input.checked !== this.checked) {

package/dist/collection/components/skiplink/skiplink.js

@@ -8,7 +8,7 @@ export class Skiplink {
         return this.dsoSkiplinkClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });
     }
     render() {
-        return (h("a", { key: '40c3c6d5b541f6c69b3dd1e13ab6120a13e89f08', href: `#${this.to}`, onClick: (e) => this.clickEventHandler(e) }, this.label, h("dso-icon", { key: 'fceb144a8534dfd1f53f3c63a50e723800086c9d', icon: "chevron-right" })));
+        return (h("a", { key: 'c78ada691201b00d93801b8dc232bf9111e8dfa8', href: `#${this.to}`, onClick: (e) => this.clickEventHandler(e) }, this.label, h("dso-icon", { key: '5e069b50839ca41db1a6a098df3d7c73e1ebdd08', icon: "chevron-right" })));
     }
     static get is() { return "dso-skiplink"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/slide-toggle/slide-toggle.js

@@ -25,7 +25,7 @@ export class SlideToggle {
         this.hasVisibleLabel = this.host.querySelector("*") !== null;
     }
     render() {
-        return (h(Fragment, null, h("button", Object.assign({ key: '5aee4d9968329a8df970a172e481d00aa89f6cfc', 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 } : {})), h("svg", { key: '470f2fef216e0b5fc3d450af8285c007a376d1f6', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: 'd013d54c54240c42ab7a2fe35cfaf8ff82fbe36d', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: 'abb51b7d6bf57c19945644d93d7f7651c728ec74', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: 'b4b6842b0a7acb77de82d79b9932dfaa3e0ae7c4', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: '718c01776b005c142c58c3f5a96f956c8cecab5a', htmlFor: this.identifier }, h("slot", { key: '398f532a0442e039704f9fcd130eafb33a19b55f' })))));
+        return (h(Fragment, null, h("button", Object.assign({ key: '7ff86866a9d77df22b05998c9ab88e9b44a3037f', 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 } : {})), h("svg", { key: 'fe3211c16c38e99ee8aecef786dd546e7c8a059f', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: '771ac2486522b8e2bb130d7bb4e0779fe0adbe45', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: '9856f027ca31cfd9732774c7440eb07ef749c4d0', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: '65ea5eba7b1e850822b2bf57537739547bc19a52', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: 'e140104191700dbdb0e8c1061f78617217e459d8', htmlFor: this.identifier }, h("slot", { key: 'a2f1b30ad79f1ab9c47b28e2e4814a5198919bde' })))));
     }
     static get is() { return "dso-slide-toggle"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/survey-rating/survey-rating.js

@@ -18,10 +18,10 @@ export class SurveyRating {
             "Makkelijk",
             "Heel makkelijk",
         ];
-        return (h("dso-panel", { key: '0cf488d4cae02ff7c37d6f6953ad32d6c19c7011', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("h2", { key: '8b36e4dbf8c9017cfec97283b0c4bb11dc2ba60a', slot: "heading" }, "Help ons met een onderzoek"), h("strong", { key: '3f819218453cd2e500c7e03856754c5afbf16001' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren"), h("form", { key: 'a9b6ccfbccddcb07b94c3889cee0447f1d09118e', onSubmit: (e) => this.handleForm(e) }, h("div", { key: 'a321b5ff7c0e021ed8e3264ae7aa2f78781b674d', class: "visual-rating-labels", "aria-hidden": "true" }, h("span", { key: 'dc908a71b2fc40d017e55f7995924731caf9d1c8' }, "Heel moeilijk"), h("span", { key: '8affdcc507818d6f6a8792285aa1f59d75e8b16a' }, "Heel makkelijk")), h("div", { key: '616c3feb3eabdb93c949f1a5166d08300b8c370b', role: "radiogroup" }, ratings.map((rating, index) => {
+        return (h("dso-panel", { key: '6fc9ee08dd30db6aa3d69d97c2ca0301925aead8', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("h2", { key: 'bbb4670c28e25abbfc173460ce3f68222890fe83', slot: "heading" }, "Help ons met een onderzoek"), h("strong", { key: '06cd4142e76f971ce0295de633b4b50829ee25da' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren"), h("form", { key: '28fa667cc36b6e5195e89ca5a367db1f78c1b594', onSubmit: (e) => this.handleForm(e) }, h("div", { key: '64da63f3d3fa3c184d170294c0881b0706384c12', class: "visual-rating-labels", "aria-hidden": "true" }, h("span", { key: '43ae48b3d6cb72029401854d4e775e9039483b1c' }, "Heel moeilijk"), h("span", { key: 'f77fb4f6d9618f1f854548edf8b02b3462737805' }, "Heel makkelijk")), h("div", { key: '1558bdd1bf03f620c9e78d77c0b0a5a64c36351c', role: "radiogroup" }, ratings.map((rating, index) => {
             const ratingNumber = index + 1;
             return (h(Fragment, null, h("label", { class: `survey-rating-${ratingNumber}` }, ratingNumber, h("span", { class: "sr-only" }, rating), h("input", { type: "radio", name: "rating", value: ratingNumber, checked: ratingNumber === this.rating, onChange: (e) => this.handleChange(e) }))));
-        })), h("button", { key: '733c311a66455f627ec1921bb61e7bab92b53c23', type: "submit", class: "dso-secondary" }, h("span", { key: '461c2e464c7bd2d005d2511a62bafa1099412e6d' }, "Antwoord verzenden")))));
+        })), h("button", { key: 'eba1c066912dcb627aa64c65e6855b2d8193c4c5', type: "submit", class: "dso-secondary" }, h("span", { key: '8d748fc6a39c343c949808c070eb68aa4e4ba1b9' }, "Antwoord verzenden")))));
     }
     static get is() { return "dso-survey-rating"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/table.css

@@ -709,13 +709,13 @@ a.dso-tertiary, a.dso-tertiary:visited {
 }
 
 :host .dso-modal {
-  overflow: visible;
-  padding: 0;
-  border: 0;
   inset: 0px;
   block-size: 100%;
   position: fixed;
   z-index: 530;
+  overflow: visible;
+  padding: 0;
+  border: 0;
 }
 :host .dso-modal::backdrop {
   background-color: rgba(255, 255, 255, 0.8);