@dso-toolkit/core 68.0.1 → 68.1.0

package/dist/collection/components/contact-information/contact-information.css

@@ -0,0 +1,37 @@
+:host {
+  --_dso-di-background-image: none;
+  --_dso-anchor-icon-padding-inline-start: 0;
+  --_dso-anchor-icon-padding-inline-end: 0;
+  display: block;
+}
+
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+::slotted([slot=anchor-items]),
+::slotted([slot=info-items]) {
+  display: flex !important;
+  flex-wrap: wrap !important;
+  gap: 16px 24px !important;
+  padding-inline-start: 0 !important;
+  list-style: none !important;
+}
+@media screen and (max-width: 991px) {
+  ::slotted([slot=anchor-items]),
+  ::slotted([slot=info-items]) {
+    flex-direction: column !important;
+    gap: 16px !important;
+  }
+}
+
+::slotted([slot=info-items]) {
+  margin-block-end: 0 !important;
+}
+
+::slotted([slot=heading]) {
+  margin-block: 0 16px !important;
+  font-size: 16px !important;
+}

package/dist/collection/components/contact-information/contact-information.js

@@ -0,0 +1,24 @@
+import { h } from "@stencil/core";
+/**
+ * @slot heading - The heading of the contact information component.
+ * @slot anchor-items - Interactive anchors-items showed in a list.
+ * @slot info-items - Text info-items showed in a list.
+ */
+export class ContactInformation {
+    render() {
+        return (h("div", { key: '4e473b3cea53cc722e8369c087f9a9aa85fa0ee0', class: "dso-contact-information" }, h("slot", { key: '69b4bd69e9953ce79210348395499e4dd6fa8b73', name: "heading" }), h("slot", { key: 'a4cd6dc9a59a4c8cd6aa32a634b94cf03b2de4bc', name: "anchor-items" }), h("slot", { key: 'c8e026e16f75d5d877efcbfd8150ab83b6e0092d', name: "info-items" })));
+    }
+    static get is() { return "dso-contact-information"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["contact-information.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["contact-information.css"]
+        };
+    }
+}
+//# sourceMappingURL=contact-information.js.map

package/dist/collection/components/contact-information/contact-information.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"contact-information.js","sourceRoot":"","sources":["../../../../src/components/contact-information/contact-information.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,CAAC,EAAE,MAAM,eAAe,CAAC;AAEjE;;;;GAIG;AAOH,MAAM,OAAO,kBAAkB;IAC7B,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,yBAAyB;YAClC,6DAAM,IAAI,EAAC,SAAS,GAAG;YACvB,6DAAM,IAAI,EAAC,cAAc,GAAG;YAC5B,6DAAM,IAAI,EAAC,YAAY,GAAG,CACtB,CACP,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, h } from \"@stencil/core\";\r\n\r\n/**\r\n * @slot heading - The heading of the contact information component.\r\n * @slot anchor-items - Interactive anchors-items showed in a list.\r\n * @slot info-items - Text info-items showed in a list.\r\n */\r\n\r\n@Component({\r\n  tag: \"dso-contact-information\",\r\n  styleUrl: \"contact-information.scss\",\r\n  shadow: true,\r\n})\r\nexport class ContactInformation implements ComponentInterface {\r\n  render() {\r\n    return (\r\n      <div class=\"dso-contact-information\">\r\n        <slot name=\"heading\" />\r\n        <slot name=\"anchor-items\" />\r\n        <slot name=\"info-items\" />\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/date-picker/date-picker.js

@@ -106,7 +106,7 @@ export class DsoDatePicker {
     }
     render() {
         var _a;
-        return (h("input", { key: '383a80a337db8578d6b858ee01031b34a1a407ce', type: "date", id: this.identifier, class: "dso-date__input", value: parseToValueFormat(this.value), name: this.name, min: parseToValueFormat(this.min), max: parseToValueFormat(this.max), disabled: this.disabled || undefined, required: this.required || undefined, "aria-autocomplete": "none", "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": this.describedBy, autoComplete: "off", autofocus: this.dsoAutofocus || undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, onChange: this.handleInputChange }));
+        return (h("input", { key: 'c599e90b8e1029573beb7097dc5364e06759dcd7', type: "date", id: this.identifier, class: "dso-date__input", value: parseToValueFormat(this.value), name: this.name, min: parseToValueFormat(this.min), max: parseToValueFormat(this.max), disabled: this.disabled || undefined, required: this.required || undefined, "aria-autocomplete": "none", "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": this.describedBy, autoComplete: "off", autofocus: this.dsoAutofocus || undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, onChange: this.handleInputChange }));
     }
     static get is() { return "dso-date-picker"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/date-picker-legacy/date-picker-legacy.js

@@ -449,14 +449,14 @@ export class DsoDatePickerLegacy {
         if (maxDate) {
             maxYear = Math.min(maxYear, maxDate.getFullYear());
         }
-        return (h(Host, { key: 'dbff80962fbcf53e172ecb16a5c1fc590ee10f9e' }, h("div", { key: 'fc473ab4394f82381f59dc20618e13666c7ebff3', class: { "dso-date": true, "dso-visible": this.visible } }, h("div", { key: '9177311d07f6edd7ae15671ddb2948c5b006fcda', class: "dso-date__input-wrapper" }, h("input", { key: '0ece934024a2d46ef451300ae68f4a00747cd7ab', class: "dso-date__input", value: this.value, placeholder: this.localization.placeholder, id: this.identifier, disabled: this.disabled, role: (_a = this.role) !== null && _a !== void 0 ? _a : undefined, required: this.required ? true : undefined, "aria-autocomplete": "none", "aria-invalid": (_b = this.invalid) === null || _b === void 0 ? void 0 : _b.toString(), "aria-describedby": this.describedBy, onInput: this.handleInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, autoComplete: "off", ref: (element) => (this.datePickerLegacyInput = element) }), h("button", { key: '1438410646c1b4629249715b2914cb1b3a684ecc', type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: (element) => (this.datePickerLegacyButton = element) }, h("span", { key: 'ca51e1bb2afd30cdd51dca12f4fe2b0805669195', class: "dso-date__toggle-icon" }, h("dso-icon", { key: '77052c690e40173df63af10b4c053a7c63728a76', icon: "calendar" })), h("span", { key: 'c2c9d9471c025c78c68eacad4f36cb51ab3af8cf', class: "dso-date__vhidden" }, this.localization.buttonLabel, formattedDate && (h("span", { key: 'fbed504c7781943494dd29c1273506b85eaac748' }, ", ", this.localization.selectedDateMessage, " ", formattedDate))))), h("div", { key: '92eab019bb2f737a01ca2da34828d7ae159aa896', class: {
+        return (h(Host, { key: '988a13ef80afbbefe31ae469a3cf85951740b555' }, h("div", { key: '5605ca78e528c245d534687fed06f7b16f2939bd', class: { "dso-date": true, "dso-visible": this.visible } }, h("div", { key: '78b095e5bae46c950aae34ec41ac150c2013f4a5', class: "dso-date__input-wrapper" }, h("input", { key: '7f353a644f67ec9cfb0b73b7743986f2f7766ee2', class: "dso-date__input", value: this.value, placeholder: this.localization.placeholder, id: this.identifier, disabled: this.disabled, role: (_a = this.role) !== null && _a !== void 0 ? _a : undefined, required: this.required ? true : undefined, "aria-autocomplete": "none", "aria-invalid": (_b = this.invalid) === null || _b === void 0 ? void 0 : _b.toString(), "aria-describedby": this.describedBy, onInput: this.handleInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, autoComplete: "off", ref: (element) => (this.datePickerLegacyInput = element) }), h("button", { key: 'c704a98eb3d17632e57aa86ea0d9f7b47bdf2258', type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: (element) => (this.datePickerLegacyButton = element) }, h("span", { key: '3c60ea797995ed0224c94c72242d817603792ea0', class: "dso-date__toggle-icon" }, h("dso-icon", { key: '238a67018bc2ac6d76461a8f81bd015b13a326ff', icon: "calendar" })), h("span", { key: '608bf22760feb2e4b915f489d787d2ad55bf90bc', class: "dso-date__vhidden" }, this.localization.buttonLabel, formattedDate && (h("span", { key: '55fb7cbcff767ab959deaf7420a866632308b9dd' }, ", ", this.localization.selectedDateMessage, " ", formattedDate))))), h("div", { key: 'eaf1440e9d0293b700097a7e4b13a87edda18b19', class: {
                 "dso-date__dialog": true,
                 "is-left": this.direction === "left",
                 "is-active": this.open,
-            }, role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? "false" : "true", "aria-labelledby": this.dialogLabelId, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("div", { key: 'ace692348e0a214707f3c29e3249f9021c68cc93', class: "dso-date__dialog-content", onKeyDown: this.handleEscKey }, h("div", { key: '263fbad51c855936b9d8a952257f7ab3a8f21077', class: "dso-date__vhidden dso-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), h("div", { key: '62718328450bcbe0b174d6770b251dfd4750c661', class: "dso-date__mobile", onFocusin: this.disableActiveFocus }, h("label", { key: 'fa35628b5c5be08b38fc7773c463993bd1b8ca41', class: "dso-date__mobile-heading" }, this.localization.calendarHeading), h("button", { key: '01eaa0ae57b2bd59a0cbf3b92f0db867ee6bf71c', class: "dso-date__close", ref: (element) => (this.firstFocusableElement = element), onKeyDown: this.handleFirstFocusableKeydown, onClick: () => this.hide(), type: "button" }, h("dso-icon", { key: 'ea41b086cfd2d68c562233630dc85e893db3e923', icon: "times" }), h("span", { key: '35e78553c5075a878761685fa18d307f24d1a6c9', class: "dso-date__vhidden" }, this.localization.closeLabel))), h("div", { key: 'affb385e33dd6befb239780b629d0652e6150c34', class: "dso-date__header", onFocusin: this.disableActiveFocus }, h("div", { key: '3c2df62772391537ad93297e0da77aefcfab0c03' }, h("h2", { key: '3e08c1803d05c3d5fd85802426347705f1e36380', id: this.dialogLabelId, class: "dso-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], " ", this.focusedDay.getFullYear()), h("label", { key: '2f0fe33fd34113b0575c934f9db19b270aa4ffab', htmlFor: this.monthSelectId, class: "dso-date__vhidden" }, this.localization.monthSelectLabel), h("div", { key: 'f82717940e66399d7387aef565d254e007d99089', class: "dso-date__select" }, h("select", { key: '3e48aea34fa212bd4f09523a59c2cf7a4e6081c0', id: this.monthSelectId, class: "dso-date__select--month", ref: (element) => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, monthRange(this.localization, selectedYear, minDate, maxDate).map((month) => {
+            }, role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? "false" : "true", "aria-labelledby": this.dialogLabelId, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("div", { key: '5db2c514c4d6708f52bbb9593fc53c11dace76e3', class: "dso-date__dialog-content", onKeyDown: this.handleEscKey }, h("div", { key: '6c407cfcb23d3b636d7b093c71637f2e4cd0ef8a', class: "dso-date__vhidden dso-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), h("div", { key: 'cd20d5ada23136ac3f472e81944c436a839d5ba0', class: "dso-date__mobile", onFocusin: this.disableActiveFocus }, h("label", { key: 'dafae6afbfc23cc04135926a1c2e9dd708d0dca7', class: "dso-date__mobile-heading" }, this.localization.calendarHeading), h("button", { key: '411f015e8bfc46a6d60289f0285a348351ce1b2e', class: "dso-date__close", ref: (element) => (this.firstFocusableElement = element), onKeyDown: this.handleFirstFocusableKeydown, onClick: () => this.hide(), type: "button" }, h("dso-icon", { key: 'c9a81afa46a35451f1aba2dc25f8017fcec1823d', icon: "times" }), h("span", { key: '41a62343b1c8e4587aa21198193e8377730fe45b', class: "dso-date__vhidden" }, this.localization.closeLabel))), h("div", { key: 'd208f3644d52d329d5ca9947702025fdc5cfb6a8', class: "dso-date__header", onFocusin: this.disableActiveFocus }, h("div", { key: '6c98baeb9e371464711123b15846472625b4bd91' }, h("h2", { key: '4c9a067555474d5c3efcf9317153fb601e56627e', id: this.dialogLabelId, class: "dso-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], " ", this.focusedDay.getFullYear()), h("label", { key: '6250e4146dd420a44edafeeb8ee2f331e8d19d8c', htmlFor: this.monthSelectId, class: "dso-date__vhidden" }, this.localization.monthSelectLabel), h("div", { key: '7301372da03b548701e3ea0a3c086d29cda8b38d', class: "dso-date__select" }, h("select", { key: '9095ca123db8fac6669c47c8dcd46124b9e41d88', id: this.monthSelectId, class: "dso-date__select--month", ref: (element) => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, monthRange(this.localization, selectedYear, minDate, maxDate).map((month) => {
             const index = this.localization.monthNames.indexOf(month);
             return (h("option", { key: month, value: index, selected: index === focusedMonth }, month));
-        })), h("div", { key: '6610d72573b2034919ac06b150b28fe71675523f', class: "dso-date__select-label", "aria-hidden": "true" }, h("span", { key: 'd9c715eb6d487fb74b6fa2cf10eaeccb1934f874' }, this.localization.monthNamesShort[focusedMonth]), h("dso-icon", { key: '38999f203ada3723a6489698afc1d64918558b47', icon: "chevron-down" }))), h("label", { key: '8f2b45ddf6a74e4e5e25c655a6ff874ef5bccb15', htmlFor: this.yearSelectId, class: "dso-date__vhidden" }, this.localization.yearSelectLabel), h("div", { key: '960cc822d81754db8d771100e081aefd3cb26f42', class: "dso-date__select" }, h("select", { key: '71e3c4db15a6c144a9c5f9362c66044c95d79080', id: this.yearSelectId, class: "dso-date__select--year", onChange: this.handleYearSelect }, range(minYear, maxYear).map((year) => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { key: 'b32fc0fccaccdc69a7598fe12557192571bab6df', class: "dso-date__select-label", "aria-hidden": "true" }, h("span", { key: 'd611b1a260e7a05c63e8738801b1d0c30bef9c54' }, this.focusedDay.getFullYear()), h("dso-icon", { key: '0e0efb2816f3bbf02bc797b9251a3055c59bfc98', icon: "chevron-down" })))), h("div", { key: '830953e91f5a02c32859a5563898fd4ff15d1ee1', class: "dso-date__nav" }, h("button", { key: '485e09c768b3f32c97308bf7e2a49e21ad4be43f', class: "dso-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, h("dso-icon", { key: '7a1b9ecc90f5045d4e115e48357d9c4db88d3b31', icon: "chevron-left" }), h("span", { key: '994605650a68db3e13e336228c1483f822cc36d1', class: "dso-date__vhidden" }, this.localization.prevMonthLabel)), h("button", { key: '5b20176af21e7d2aef98ff8c6ee3271eab227c74', class: "dso-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, h("dso-icon", { key: 'f8e371518b59d7c0a607c41f784f7d38732025e9', icon: "chevron-right" }), h("span", { key: '02edf66bbca97cac53c55bdbd72730c129b512e2', class: "dso-date__vhidden" }, this.localization.nextMonthLabel)))), h(DatePickerLegacyMonth, { key: '8e8e7845317318eb372bb5fc08536b452ddc2422', selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, localization: this.localization, firstDayOfWeek: this.firstDayOfWeek, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate }))))));
+        })), h("div", { key: '3cd9f1f5e0949e5a3c5fe712683c40efa8958b8d', class: "dso-date__select-label", "aria-hidden": "true" }, h("span", { key: 'a6e88ef6f597f051a7464437b66e3e0b853d54c1' }, this.localization.monthNamesShort[focusedMonth]), h("dso-icon", { key: 'e0d9a95b911155330b7d211c58d6494f248f48fb', icon: "chevron-down" }))), h("label", { key: '62865a27f2ae8be3d84163645480f87f42f3273e', htmlFor: this.yearSelectId, class: "dso-date__vhidden" }, this.localization.yearSelectLabel), h("div", { key: 'c9cc8a0131ab2c971dcf1c3da01e1a55c484cb07', class: "dso-date__select" }, h("select", { key: '1c06202542559de42f61661835f4335afac42687', id: this.yearSelectId, class: "dso-date__select--year", onChange: this.handleYearSelect }, range(minYear, maxYear).map((year) => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { key: '5150cbb742c230817daa623f6d209382dad9774b', class: "dso-date__select-label", "aria-hidden": "true" }, h("span", { key: '0c22ddbee4001e073c44cb997313149c90fc5b88' }, this.focusedDay.getFullYear()), h("dso-icon", { key: 'a3b26f8ae19108784b2f308baf749a1cc559467f', icon: "chevron-down" })))), h("div", { key: 'b5c6c28ecf26e85c357b6cd02cdddf924ed96ecf', class: "dso-date__nav" }, h("button", { key: 'd83e42f236aeb740f49b9631b22d0decdeafd2b8', class: "dso-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, h("dso-icon", { key: '4dbe968a9d7f4b4cbaa2b7d499bdd4ac4c641a4d', icon: "chevron-left" }), h("span", { key: 'eb774f3e34798441302d6023ea2da869a5ddd5da', class: "dso-date__vhidden" }, this.localization.prevMonthLabel)), h("button", { key: '6dd97f0e8863ebaf9695624ef584ede2ed6f49b7', class: "dso-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, h("dso-icon", { key: '1f3ec5976f89a74e3f53d8301cd0fad4f5053220', icon: "chevron-right" }), h("span", { key: 'c391ab32dd4b002de5e7749694cdebe3e4437f5a', class: "dso-date__vhidden" }, this.localization.nextMonthLabel)))), h(DatePickerLegacyMonth, { key: '3f454459d05879279f2328bcbb4253dd082eab82', selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, localization: this.localization, firstDayOfWeek: this.firstDayOfWeek, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate }))))));
     }
     static get is() { return "dso-date-picker-legacy"; }
     static get encapsulation() { return "scoped"; }

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

@@ -26,7 +26,7 @@ export class DocumentCard {
         return this.host.querySelector("[slot='meta']");
     }
     render() {
-        return (h("div", { key: '78cf18921aeb132bad2b132898e1ee1bef891419', class: "dso-document-card-container" }, h("div", { key: '5043d441e5392c27fb2cefe10a93a0dcd80bea34', class: "dso-document-card-heading" }, h("a", { key: 'fdfc22b565beefdfc823757e79ca544732184689', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: '6bda6acbae5b837c69b1257582c5cc00cc9cd70e', name: "heading" }), h("dso-icon", { key: '06ad26aabd164d9b396e8881e402a1dddb7e9170', icon: "chevron-right" })), this.metaSlottedElement !== null && h("slot", { key: '230e5d40f3e9d8a43c215adfabe7a5db86bcbcb8', name: "meta" })), h("div", { key: '29fc7954ad95f27bc997bd2030819e93b2653e3f', class: "dso-document-card-type" }, h("slot", { key: '8814202fe4397298db250712308dca8dbfbebd71', name: "type" })), h("div", { key: '00aa9f3ab7730b44d37c6337951462a27eb60f83', class: "dso-document-card-status" }, h("slot", { key: '838fcf1bc32e8166dd3d5be2119a8d976820a43a', name: "status" }))));
+        return (h("div", { key: 'ae16753cb9c198cd7599fdd63fddf6ce2f97cf81', class: "dso-document-card-container" }, h("div", { key: 'af9c0dfd363d424e39db58be668d5f3c33bd007a', class: "dso-document-card-heading" }, h("a", { key: '168715cbc5847cd4bd1498d3305f28250bca5c8a', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: 'a786d8bc4f31c35c813b5c9028d6123f1e962bd0', name: "heading" }), h("dso-icon", { key: 'cda3437d5660b16d65dbda5e03ded359636db782', icon: "chevron-right" })), this.metaSlottedElement !== null && h("slot", { key: '7680d5ce9432af5c08ae34b0c7d8ec18d831b8f5', name: "meta" })), h("div", { key: '6868f5df8a030ad8c946ed7081a0c4b174e5f392', class: "dso-document-card-type" }, h("slot", { key: '4a87519569e310c05d283be7933b88a8fa67d7b3', name: "type" })), h("div", { key: '6e79bfcd78f9da1c024169f852a5e16b29ca4e01', class: "dso-document-card-status" }, h("slot", { key: 'd9c8e9e3fef1eedac54e3d61daa59fa4d5f42dc0', name: "status" }))));
     }
     static get is() { return "dso-document-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/document-component/document-component.css

@@ -400,12 +400,12 @@ label.dso-secondary.download::after {
 a.dso-secondary.download:hover::after,
 button.dso-secondary.download:hover::after,
 label.dso-secondary.download:hover::after {
-  background-image: url("./di.svg#download-wit");
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));
 }
 a.dso-secondary.download[disabled]::after,
 button.dso-secondary.download[disabled]::after,
 label.dso-secondary.download[disabled]::after {
-  background-image: url("./di.svg#download-grasgroen-40");
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-grasgroen-40"));
 }
 a.dso-secondary.extern::after,
 button.dso-secondary.extern::after,
@@ -419,12 +419,12 @@ label.dso-secondary.extern::after {
 a.dso-secondary.extern:hover::after,
 button.dso-secondary.extern:hover::after,
 label.dso-secondary.extern:hover::after {
-  background-image: url("./di.svg#external-link-wit");
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));
 }
 a.dso-secondary.extern[disabled]::after,
 button.dso-secondary.extern[disabled]::after,
 label.dso-secondary.extern[disabled]::after {
-  background-image: url("./di.svg#external-link-grasgroen-40");
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-grasgroen-40"));
 }
 a.dso-tertiary,
 button.dso-tertiary,
@@ -618,14 +618,14 @@ label.dso-tertiary.download::after {
 a.dso-tertiary.download[disabled]::after,
 button.dso-tertiary.download[disabled]::after,
 label.dso-tertiary.download[disabled]::after {
-  background-image: url("./di.svg#download-grasgroen-40");
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-grasgroen-40"));
 }
 a.dso-tertiary.download:not([disabled]):hover::after, a.dso-tertiary.download:not([disabled]):active::after,
 button.dso-tertiary.download:not([disabled]):hover::after,
 button.dso-tertiary.download:not([disabled]):active::after,
 label.dso-tertiary.download:not([disabled]):hover::after,
 label.dso-tertiary.download:not([disabled]):active::after {
-  background-image: url("./di.svg#download-scampi");
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-scampi"));
 }
 a.dso-tertiary.extern::after,
 button.dso-tertiary.extern::after,
@@ -639,14 +639,14 @@ label.dso-tertiary.extern::after {
 a.dso-tertiary.extern[disabled]::after,
 button.dso-tertiary.extern[disabled]::after,
 label.dso-tertiary.extern[disabled]::after {
-  background-image: url("./di.svg#external-link-grasgroen-40");
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-grasgroen-40"));
 }
 a.dso-tertiary.extern:not([disabled]):hover::after, a.dso-tertiary.extern:not([disabled]):active::after,
 button.dso-tertiary.extern:not([disabled]):hover::after,
 button.dso-tertiary.extern:not([disabled]):active::after,
 label.dso-tertiary.extern:not([disabled]):hover::after,
 label.dso-tertiary.extern:not([disabled]):active::after {
-  background-image: url("./di.svg#external-link-scampi");
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-scampi"));
 }
 
 a.dso-primary {
@@ -725,19 +725,19 @@ a.dso-tertiary, a.dso-tertiary:visited {
 }
 :host([wijzigactie=verwijderContainer]) .heading-container a:is(.download, .download:hover, .download:focus-visible),
 :host(:where([wijzigactie=verwijder])) a:is(.download, .download:hover, .download:focus-visible) {
-  background-image: url("./di.svg#download-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
 }
 :host([wijzigactie=verwijderContainer]) .heading-container a:is(.extern, .extern:hover, .extern:focus-visible),
 :host(:where([wijzigactie=verwijder])) a:is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: url("./di.svg#external-link-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
 }
 :host([wijzigactie=verwijderContainer]) .heading-container a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible),
 :host(:where([wijzigactie=verwijder])) a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  background-image: url("./di.svg#call-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
 :host([wijzigactie=verwijderContainer]) .heading-container a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible),
 :host(:where([wijzigactie=verwijder])) a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: url("./di.svg#email-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
 
 .heading-element,
@@ -762,19 +762,19 @@ a.dso-tertiary, a.dso-tertiary:visited {
 }
 :host([wijzigactie=nieuweContainer]) .heading-container a:is(.download, .download:hover, .download:focus-visible),
 :host([wijzigactie=voegtoe]) a:is(.download, .download:hover, .download:focus-visible) {
-  background-image: url("./di.svg#download-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
 }
 :host([wijzigactie=nieuweContainer]) .heading-container a:is(.extern, .extern:hover, .extern:focus-visible),
 :host([wijzigactie=voegtoe]) a:is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: url("./di.svg#external-link-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
 }
 :host([wijzigactie=nieuweContainer]) .heading-container a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible),
 :host([wijzigactie=voegtoe]) a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  background-image: url("./di.svg#call-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
 :host([wijzigactie=nieuweContainer]) .heading-container a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible),
 :host([wijzigactie=voegtoe]) a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: url("./di.svg#email-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
 :host([wijzigactie=nieuweContainer]) .heading-container,
 :host([wijzigactie=voegtoe]) {
@@ -825,6 +825,10 @@ a.dso-tertiary, a.dso-tertiary:visited {
 .heading-anchor:active {
   text-decoration: none;
 }
+.heading-anchor :is(dso-icon, svg.di) + span,
+.heading-anchor span + :is(dso-icon, svg.di) {
+  margin-inline-start: 8px;
+}
 .heading-anchor:visited {
   color: var(--link-visited-color);
 }

package/dist/collection/components/document-component/document-component.js

@@ -107,7 +107,7 @@ export class DocumentComponent {
             this.alternativeTitle ||
             this.bevatOntwerpInformatie ||
             this.annotated);
-        return (h(Host, { key: '06edcd20b9cbd024d594076d4764a67300c46854', "not-collapsible": !collapsible }, showHeading && (h("div", { key: '482365672e089753817c10b93dc87e4310eda3f5', class: "heading-container", part: "_heading-container" }, this.wijzigactie && h("span", { key: '4dd70181882358f8791629bb1c80f41c3dc83324', class: "editaction-label" }, this.wijzigactieLabel, ":"), h("div", { key: '33b14aecd300717320eb5289647e59773bd08115', class: "heading" }, h(Heading, { key: '79c6da4e1ecf5dee9d103facaceb81136e159e59', heading: this.heading, class: "heading-element", onClick: this.handleHeadingClick, mode: this.mode, href: this.href }, collapsible && this.mode === "document" && (h("button", { key: 'b435bc96d2ce72b9abe9ee138bb40307fb301fa2', type: "button", class: "toggle-button", "aria-describedby": "heading-title", "aria-expanded": this.open.toString() }, h("dso-icon", { key: 'e49873577ea0235b117d092d592367d1afd1abce', icon: this.open ? "chevron-down" : "chevron-right" }), h("span", { key: '2da4d21a0d2d1b3b90b3405fb669ab2fe8d6aa20', class: "sr-only" }, this.open ? "Invouwen" : "Uitvouwen"))), h("span", { key: '7f3570577882679cd827d56580cc38d9e1f1376e', id: "heading-title" }, this.notApplicable && h("span", { key: '8e30c98b203e2ce1abb7da8c9d3922f5d34d5b33', class: "sr-only" }, "Niet van toepassing:"), this.label || this.nummer || this.opschrift ? (h(Fragment, null, this.label && (h(Fragment, null, " ", h("dso-ozon-content", { content: this.label, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "label"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "label" })), inline: true }))), this.nummer && (h(Fragment, null, " ", h("dso-ozon-content", { content: this.nummer, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "nummer"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "nummer" })), inline: true }))), this.opschrift && (h(Fragment, null, " ", h("dso-ozon-content", { content: this.opschrift, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "opschrift"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "opschrift" })), inline: true }))))) : (this.alternativeTitle), suffix && h("span", { key: '455ea751aae0cf924d82a5ffa3c7920d2533e788' }, " - [", suffix, "]"))), this.recursiveToggle !== undefined && this.open && this.mode === "document" && (h("button", { key: '0817e67b4def06e241247a072b61f789f754eee6', type: "button", class: "recursive-toggle", title: this.recursiveToggle === true ? "Verberg alles" : "Toon alles", onClick: this.handleRecursiveToggleClick }, h("dso-icon", { key: '31ee6b490b24c41619da2a1731d9acb89fb36793', icon: this.recursiveToggle === true ? "eye" : "eye-slash" }))), this.showOntwerpBadge() && (h(Fragment, null, h("dso-badge", { key: 'efbb9364ad02198c4a60e6c551f0e05d81117ebf', status: "warning", "aria-describedby": "nested-draft-description" }, "!"), h("dso-tooltip", { key: 'd932d04c77c4841daee7102bb7513d084fb33bb9', id: "nested-draft-description" }, "Er is een ontwerp beschikbaar."))), (this.bevatOntwerpInformatie || this.annotated) && (h("div", { key: '4a5fd6480eb4f9d0613a41a724547fabb8a72a8e', class: "addons" }, this.bevatOntwerpInformatie && (h("dso-label", { key: '9dae663a474f460034abcd6d30da993f04125b0d', status: "warning", compact: true }, "Ontwerp")), this.annotated && this.mode === "document" && (h("button", { key: '897adfe2f9c484bec32a61f5c9c8905f4094b565', type: "button", class: "dso-tertiary", "aria-controls": this.openAnnotation ? "annotations" : undefined, "aria-expanded": this.openAnnotation.toString(), onClick: (e) => this.dsoAnnotationToggle.emit({ originalEvent: e }) }, h("dso-icon", { key: '942b908f1b9614ee289e1f1613130f112618e0cc', icon: "label" }), h("span", { key: '5d8d59fe1e08d765540a05d41c8023c6d1ace5dc', class: "sr-only" }, "Kenmerken en kaartgegevens ", this.openAnnotation ? "verbergen" : "tonen")))))))), this.openAnnotation && (h("div", { key: '0fa9b1a9160728a35642b555c54d94eded15d7fc', class: "annotation-container", part: "_annotation-container" }, h("dso-panel", { key: '6ca95198bf096fdd2a3c0666655ba11552edee0a', id: "annotations", onDsoCloseClick: (e) => this.dsoAnnotationToggle.emit({ originalEvent: e }), closeButtonLabel: "Kenmerken en kaartgegevens verbergen" }, h("h2", { key: '6cd3ac2ac83ede5e8f5d793a821f110f3432681a', slot: "heading" }, "Kenmerken en kaart"), h("slot", { key: 'e943ac5996fd9c65e65be653b1fdabc534023d7f', name: "annotations" })))), this.open && (this.inhoud || this.gereserveerd || this.vervallen) && this.mode === "document" && (h("div", { key: '45871b3cd58bbd4bfae9f07d8753914a403508e7', class: "content", part: "_content" }, this.gereserveerd && (h("dso-alert", { key: 'b7e1973655717a83b8dbddd9d120bd269e6902a2', status: "info" }, "Dit onderdeel is gereserveerd voor toekomstige toevoeging.")), this.vervallen && h("dso-alert", { key: 'e279a9968aa2cb24dbf7d888c8553f22778532d4', status: "info" }, "Dit onderdeel is vervallen."), this.inhoud && (h("dso-ozon-content", { key: '1d84e7e7982f474ab53d285a8e5137b70c7a28e2', content: this.inhoud, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "inhoud"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "inhoud" })) })))), h("div", { key: '893212f920f3b12a884412046e21e75b00f44e87', class: "children-container", part: "_children-container" }, h("slot", { key: 'f2d92b2da3c53495c4078019165a2190de0de65f' }))));
+        return (h(Host, { key: '75429bb8abae0df75e768567ddf6e558c786dacc', "not-collapsible": !collapsible }, showHeading && (h("div", { key: '40b276c8d7c30212d97f16e17f4d7928b0d86a17', class: "heading-container", part: "_heading-container" }, this.wijzigactie && h("span", { key: 'c402ae30edd084d2f484cef79c54f6b616d9fe49', class: "editaction-label" }, this.wijzigactieLabel, ":"), h("div", { key: '2f6241368e9087d385bab830db813e21c14282c1', class: "heading" }, h(Heading, { key: '69d2b4edfb19caf66dacdde15251aaf51069d62a', heading: this.heading, class: "heading-element", onClick: this.handleHeadingClick, mode: this.mode, href: this.href }, collapsible && this.mode === "document" && (h("button", { key: '08cc64d7d8d7204959966ac6a8f7903e065301b1', type: "button", class: "toggle-button", "aria-describedby": "heading-title", "aria-expanded": this.open.toString() }, h("dso-icon", { key: 'b2a2db13320fc216839d01caa106359bdb080868', icon: this.open ? "chevron-down" : "chevron-right" }), h("span", { key: '372447d9ee35c20205127c84c4e32ac638f3c76c', class: "sr-only" }, this.open ? "Invouwen" : "Uitvouwen"))), h("span", { key: '42426fc6ee2d2570cda535b68806836411cd966d', id: "heading-title" }, this.notApplicable && h("span", { key: '6b47029e1b286bee2387fb2b64b6440145a08892', class: "sr-only" }, "Niet van toepassing:"), this.label || this.nummer || this.opschrift ? (h(Fragment, null, this.label && (h(Fragment, null, " ", h("dso-ozon-content", { content: this.label, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "label"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "label" })), inline: true }))), this.nummer && (h(Fragment, null, " ", h("dso-ozon-content", { content: this.nummer, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "nummer"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "nummer" })), inline: true }))), this.opschrift && (h(Fragment, null, " ", h("dso-ozon-content", { content: this.opschrift, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "opschrift"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "opschrift" })), inline: true }))))) : (this.alternativeTitle), suffix && h("span", { key: '9cb7105cd660847a72a1416f1c47fd088c1328f4' }, " - [", suffix, "]"))), this.recursiveToggle !== undefined && this.open && this.mode === "document" && (h("button", { key: 'afe9dc03e73a0316c1380391f66e3ecbdb4e0a3d', type: "button", class: "recursive-toggle", title: this.recursiveToggle === true ? "Verberg alles" : "Toon alles", onClick: this.handleRecursiveToggleClick }, h("dso-icon", { key: '2ccc325ef199e76d1a599cb9bfd21e8b671dba88', icon: this.recursiveToggle === true ? "eye" : "eye-slash" }))), this.showOntwerpBadge() && (h(Fragment, null, h("dso-badge", { key: '7f39c1cb159db0a5a388b200c5a1a360325ede13', status: "warning", "aria-describedby": "nested-draft-description" }, "!"), h("dso-tooltip", { key: '4ce06a871334beaf4e52a50466ceabdc01c22101', id: "nested-draft-description" }, "Er is een ontwerp beschikbaar."))), (this.bevatOntwerpInformatie || this.annotated) && (h("div", { key: '87d802e38e7782ac2afb355e654c287b0a082f60', class: "addons" }, this.bevatOntwerpInformatie && (h("dso-label", { key: '5b9d3de5efc85e97e615eed7a8148519832963a2', status: "warning", compact: true }, "Ontwerp")), this.annotated && this.mode === "document" && (h("button", { key: 'f76a56f922e5b9cbbbc12d9ff4b35116707c55c7', type: "button", class: "dso-tertiary", "aria-controls": this.openAnnotation ? "annotations" : undefined, "aria-expanded": this.openAnnotation.toString(), onClick: (e) => this.dsoAnnotationToggle.emit({ originalEvent: e }) }, h("dso-icon", { key: '5e261e1c91343cfa7174ba2b071e9f2b027a3c8a', icon: "label" }), h("span", { key: 'b6c88f1a97fdd36b00463d68fd38367aac03ccaa', class: "sr-only" }, "Kenmerken en kaartgegevens ", this.openAnnotation ? "verbergen" : "tonen")))))))), this.openAnnotation && (h("div", { key: 'a30728f258e1c5c44a1271f247b811e980fd9567', class: "annotation-container", part: "_annotation-container" }, h("dso-panel", { key: '7ba98f3b166e29c72989b8a763a10728245ba974', id: "annotations", onDsoCloseClick: (e) => this.dsoAnnotationToggle.emit({ originalEvent: e }), closeButtonLabel: "Kenmerken en kaartgegevens verbergen" }, h("h2", { key: '59a5dd01f4d00f8f08eb6cfef731b71aca412339', slot: "heading" }, "Kenmerken en kaart"), h("slot", { key: 'a6dc7d96a5b9973e82f0c476ba3a51050a51e4b6', name: "annotations" })))), this.open && (this.inhoud || this.gereserveerd || this.vervallen) && this.mode === "document" && (h("div", { key: 'f4bd9e76a340113cc6bbe2659392995492603cf2', class: "content", part: "_content" }, this.gereserveerd && (h("dso-alert", { key: '4d262cd2c5e9451ccd6e4b426145ab74d128fe48', status: "info" }, "Dit onderdeel is gereserveerd voor toekomstige toevoeging.")), this.vervallen && h("dso-alert", { key: '3bb48ca2d3fbc8e6db48845e7297bc933a81ab56', status: "info" }, "Dit onderdeel is vervallen."), this.inhoud && (h("dso-ozon-content", { key: '1871b02bac785a43d5115e6d481840b081a3990e', content: this.inhoud, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "inhoud"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "inhoud" })) })))), h("div", { key: '33fdbe0a07f68047dc5c7627d325a1d66f2ee00a', class: "children-container", part: "_children-container" }, h("slot", { key: '96eda027fd9caf469076ed8031e32750374ec6b6' }))));
     }
     static get is() { return "dso-document-component"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/document-component-demo/document-component.demo.js

@@ -180,7 +180,7 @@ export class DocumentComponentDemo {
     render() {
         var _a, _b;
         const { DocumentComponent, MenuButton } = this;
-        return (h("dso-responsive-element", { key: '99c88d8329386d683152c853cce87e0c89ba1733', class: "dso-document-components" }, h("div", { key: '8d279ced8931c15396942557e0f3b7b58d65f416', class: "dso-navbar" }, h("ul", { key: '8b7adc58151c460c4cc252935e9aaf206d35c986', class: "dso-nav dso-nav-sub" }, (_b = (_a = this.getEmbeddedDocumentComponents(this.response)) === null || _a === void 0 ? void 0 : _a.documentComponents) === null || _b === void 0 ? void 0 : _b.map((d) => (h("li", { class: this.document === d ? "dso-active" : undefined }, h(MenuButton, { documentComponent: d })))))), this.document && h(DocumentComponent, { key: '213829fba9eb5ee7b78983a16c63ae1c68666c28', path: [this.document] })));
+        return (h("dso-responsive-element", { key: '487ea5957411bf8fe8bf42b34555076ae30079a6', class: "dso-document-components" }, h("div", { key: '312dbb3e48673150f6d3a2318e3387994f186d14', class: "dso-navbar" }, h("ul", { key: '9f0f29ddd997906ef4a071dcc70ffb48342863bd', class: "dso-nav dso-nav-sub" }, (_b = (_a = this.getEmbeddedDocumentComponents(this.response)) === null || _a === void 0 ? void 0 : _a.documentComponents) === null || _b === void 0 ? void 0 : _b.map((d) => (h("li", { class: this.document === d ? "dso-active" : undefined }, h(MenuButton, { documentComponent: d })))))), this.document && h(DocumentComponent, { key: '5ac9f2dc49fcf37166bea36d3c00d415d55e35a9', path: [this.document] })));
     }
     static get is() { return "dsot-document-component-demo"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/dropdown-menu/dropdown-menu.js

@@ -222,7 +222,7 @@ export class DropdownMenu {
         (_a = tabbables[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
-        return (h(Host, { key: 'caf1ae65f5213a8cd192d2928be4921f88b45ecc', onFocusout: this.focusOutListener }, h("slot", { key: '3eb17efdb9f606826d9f65c2139d881f63f76da6', name: "toggle" }), h("div", { key: '0882545debb43c8029dfb4110cacbe5b5dfc124e', hidden: !this.open }, h("slot", { key: '8d4ac840b601b6b6ed7f4b961bb2ab89ef21415c' }))));
+        return (h(Host, { key: 'fe83f4c5404ef88d9194a4987228dd5e7ebee03e', onFocusout: this.focusOutListener }, h("slot", { key: '2e8b13e4c9926e0e4d02ac490decaa37a218d403', name: "toggle" }), h("div", { key: 'e6eb070861704c8d50b222458b6a72c5e7428911', hidden: !this.open }, h("slot", { key: '0bc3f7e3fc4d53b4d26b545f769aaba07b05d600' }))));
     }
     static get is() { return "dso-dropdown-menu"; }
     static get encapsulation() { return "shadow"; }

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

@@ -79,10 +79,10 @@ export class HelpcenterPanel {
         }
     }
     render() {
-        return (h(Fragment, null, h("button", { key: 'b5f8533a2572c7efc255d4d612a2a27343a91be9', type: "button", onClick: this.openClick, class: `open-button ${this.isOpen}`, "aria-expanded": this.isOpen === "open" ? "true" : "false", "aria-haspopup": "dialog", "aria-controls": "dso-panel-wrapper", ref: (element) => (this.openButtonElement = element) }, h("dso-icon", { key: 'd17d6e98ea289542eff68c89de547f69d71f7cb2', icon: "help" }), h("span", { key: 'a2071796a2aca97a5fcbe03dd3aef6dc70df0824' }, this.label)), h("div", { key: 'c835af3f9cc5f3963d7a5c8625f70343490f85c7', id: "dso-panel-wrapper", class: `wrapper ${this.visibility}`, "aria-label": "helpcentrum", role: "dialog", ref: (element) => (this.panelWrapperElement = element) }, h("div", { key: '41be7b955f1c6496d82907bc979627899810b703', class: "dimscreen", onClick: this.closeClick }), h("div", { key: '876215691a2fcc81506a43de60a1ad1cd7ccb0f2', class: `iframe-container ${this.slideState}`, "aria-live": "polite" }, this.loadIframe ? (h("iframe", { src: this.iframeUrl, tabindex: "0", onLoad: () => {
+        return (h(Fragment, null, h("button", { key: '7d3214ff547c360a95b418c8747726411e91c8e5', type: "button", onClick: this.openClick, class: `open-button ${this.isOpen}`, "aria-expanded": this.isOpen === "open" ? "true" : "false", "aria-haspopup": "dialog", "aria-controls": "dso-panel-wrapper", ref: (element) => (this.openButtonElement = element) }, h("dso-icon", { key: 'a23f756fc781f7586017f0373196f8b8714ce2d8', icon: "help" }), h("span", { key: 'f2be075e4e10df25977b43b797da005563c1ada3' }, this.label)), h("div", { key: 'aa8496ea81d0f2cbb95b913df8fb98372985f4e8', id: "dso-panel-wrapper", class: `wrapper ${this.visibility}`, "aria-label": "helpcentrum", role: "dialog", ref: (element) => (this.panelWrapperElement = element) }, h("div", { key: '1d0fd4f8f071f09fc0c1d32cd9c0b8516a838849', class: "dimscreen", onClick: this.closeClick }), h("div", { key: 'fe508608162ebd66f048d98f8128a19daa228f2d', class: `iframe-container ${this.slideState}`, "aria-live": "polite" }, this.loadIframe ? (h("iframe", { src: this.iframeUrl, tabindex: "0", onLoad: () => {
                 this.createTrap();
                 this.iframeLoaded = true;
-            } })) : (h("div", null))), h("button", { key: '48c27af1f624c19ab77b49c334d79cc0678c6f51', type: "button", class: `close-button ${this.isOpen}`, onClick: this.closeClick, "aria-expanded": this.isOpen === "open" ? "true" : "false", "aria-controls": "dso-panel-wrapper", ref: (element) => (this.closeButtonElement = element) }, h("dso-icon", { key: '729cfe3cd11a39f114476e99d0ef0c7c556f2084', icon: "times" }), h("span", { key: '86561334d6cdebe257f51b75cd5bd64473d99680', class: "sr-only" }, "sluiten")))));
+            } })) : (h("div", null))), h("button", { key: '1ae42776fcc6a3de78452b26447322cd78a2d383', type: "button", class: `close-button ${this.isOpen}`, onClick: this.closeClick, "aria-expanded": this.isOpen === "open" ? "true" : "false", "aria-controls": "dso-panel-wrapper", ref: (element) => (this.closeButtonElement = element) }, h("dso-icon", { key: 'c7c702e660f684a6766d66b3c7c682774d212072', icon: "times" }), h("span", { key: 'f94aeb8b5f599deacea3802dcb4b28a845d2d948', class: "sr-only" }, "sluiten")))));
     }
     static get is() { return "dso-helpcenter-panel"; }
     static get encapsulation() { return "shadow"; }

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: '17d04a7fe164e8a8a941b9a462be8dd6a25d1113', "has-counter": hasCounter }, hasCounter && h("div", { key: 'a7583dd1d70daa05120f1b03f946e9e9d761f8ac', class: "dso-step-counter" }, (_a = this.step) !== null && _a !== void 0 ? _a : h("slot", { key: '36034a32c83c60bc42eed0fa9f8052fc6e8528ff', name: "icon" })), h("slot", { key: '13d6b6b268194b07042bdae7c7b3d84b6d723b49' })));
+        return (h(Host, { key: 'ad694333b139db0ee6a3414039ed9db80e27f3df', "has-counter": hasCounter }, hasCounter && h("div", { key: '5e91d68bd433c491dab2ce2c6093786ea004735e', class: "dso-step-counter" }, (_a = this.step) !== null && _a !== void 0 ? _a : h("slot", { key: 'e46923096e7b4633d178159f665d8db96211eee9', name: "icon" })), h("slot", { key: 'be5a756c301f2c368a15119fe1002af465b860c2' })));
     }
     static get is() { return "dso-highlight-box"; }
     static get encapsulation() { return "shadow"; }

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

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

package/dist/collection/components/image-overlay/image-overlay.css

@@ -353,16 +353,16 @@ ins.editaction-add {
   color: #191919;
 }
 ins.editaction-add a:is(.download, .download:hover, .download:focus-visible) {
-  background-image: url("./di.svg#download-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
 }
 ins.editaction-add a:is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: url("./di.svg#external-link-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
 }
 ins.editaction-add a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  background-image: url("./di.svg#call-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
 ins.editaction-add a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: url("./di.svg#email-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
 ins.editaction-add {
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);
@@ -380,16 +380,16 @@ ins.editaction-add .wrapper {
   color: #191919;
 }
 ins.editaction-add .wrapper a:is(.download, .download:hover, .download:focus-visible) {
-  background-image: url("./di.svg#download-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
 }
 ins.editaction-add .wrapper a:is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: url("./di.svg#external-link-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
 }
 ins.editaction-add .wrapper a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  background-image: url("./di.svg#call-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
 ins.editaction-add .wrapper a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: url("./di.svg#email-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
 ins.editaction-add .wrapper {
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);
@@ -418,16 +418,16 @@ del.editaction-remove {
   color: #191919;
 }
 del.editaction-remove a:is(.download, .download:hover, .download:focus-visible) {
-  background-image: url("./di.svg#download-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
 }
 del.editaction-remove a:is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: url("./di.svg#external-link-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
 }
 del.editaction-remove a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  background-image: url("./di.svg#call-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
 del.editaction-remove a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: url("./di.svg#email-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
 del.editaction-remove {
   text-decoration: line-through;
@@ -450,16 +450,16 @@ del.editaction-remove .wrapper {
   color: #191919;
 }
 del.editaction-remove .wrapper a:is(.download, .download:hover, .download:focus-visible) {
-  background-image: url("./di.svg#download-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
 }
 del.editaction-remove .wrapper a:is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: url("./di.svg#external-link-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
 }
 del.editaction-remove .wrapper a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  background-image: url("./di.svg#call-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
 del.editaction-remove .wrapper a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: url("./di.svg#email-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
 del.editaction-remove .wrapper {
   text-decoration: line-through;

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

@@ -13,16 +13,16 @@
   color: #191919;
 }
 :host a:is(.download, .download:hover, .download:focus-visible) {
-  background-image: url("./di.svg#download-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
 }
 :host a:is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: url("./di.svg#external-link-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
 }
 :host a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  background-image: url("./di.svg#call-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
 :host a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: url("./di.svg#email-zwart");
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
 :host > button {
   background-color: transparent;

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: 'ec8f5f34eb6a31a88e0eb09126c1483b4a7e3d57' }, h("slot", { key: 'd4185d5916ca7f13cd581d4152d44fe94f24f167' }), !this.fixed && (h("button", { key: '26403b33f2abad7192d3c3b5d40440db37ba6fc7', type: "button", onClick: (e) => this.dsoClose.emit(e) }, h("dso-icon", { key: '7350672d01d2ee18c40989e268f9a45b70f9c446', icon: "times" }), h("span", { key: 'eca8d36e52ab9f0fba88edd9bf3400115568b93c', class: "sr-only" }, "Sluiten")))));
+        return (h(Fragment, { key: '55494406dd46f311f4c33ae09621c1cd2f091652' }, h("slot", { key: '7e63e38a4d8593893de952a561027c822d75737d' }), !this.fixed && (h("button", { key: '82fb84fcd042127ed27dd1387703a89108c8da09', type: "button", onClick: (e) => this.dsoClose.emit(e) }, h("dso-icon", { key: 'd5c9066e99aae39f97d1928454aaae76828c488a', icon: "times" }), h("span", { key: '791f6e81943d44d58ca95a9b0d86e35f2f2c4e1b', class: "sr-only" }, "Sluiten")))));
     }
     static get is() { return "dso-info"; }
     static get encapsulation() { return "shadow"; }

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: '93d7826e5bc6e36b77e066188333259f2cfaefc8', onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, h("button", { key: 'b0f6076dbc6b393a40f24851e762af0d444f4c5d', 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: '3085b43691718372fc287cdbc52ab8d42c719237', icon: this.active || this.hover ? "info-active" : "info" }), h("span", { key: '4433fffdb72bd58e043f8a30851b398b060d1dd2', class: "sr-only" }, this.label))));
+        return (h(Host, { key: '69179ffb27e3ec32941102c461a6a58b45c00bde', onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, h("button", { key: '7504a07ca41a7e61e125fba2c19c1e4b67705474', 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: '3b5124b074a2b068f8d201ce86ce2554d3da7fd5', icon: this.active || this.hover ? "info-active" : "info" }), h("span", { key: 'fd62e5e40e79542a8b3055b907405cbcabc4c53d', 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: '1c66736a5fb56cb8c9a00e6ceba390ffc53b5c92', id: "description", hidden: true }, this.description)), h("span", { key: '8fd5b0b94b34a7fa6dc6d12e27c46118f8ed645c', class: "counter min", "aria-hidden": "true" }, min, this.unit), h("input", { key: '033f60fd111ad80d48385ab984acc6441ffb10e3', 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: '4aca50462747fbb2e5423839c73f7b99b6469484', id: "description", hidden: true }, this.description)), h("span", { key: '5c05919900e0b44f93d2693a9ee8bc31b00cd3d4', class: "counter min", "aria-hidden": "true" }, min, this.unit), h("input", { key: '5fc2fec660a3c12a0c4c2bd920f9b18593a45c50', 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: '35499cf191b4237e41c68da386a2c8c8cdcef87b', class: "counter max", "aria-hidden": "true" }, max, this.unit)));
+            }) }), h("span", { key: 'a8d3d2e94780ce09f59cb260ec98d60d1d70a39e', 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: '0c89fa613eb62205a1f39bd66263eaccdbfbe3ac' }, h("span", { key: '5d9cff811997dfc4a5e9c1783e4345959f1c4f65', "aria-describedby": "toggle-anchor", class: clsx("dso-label", {
+        return (h(Fragment, { key: '09bdfc97082336a3de8208ec37ebf99b92ac02ff' }, h("span", { key: 'ef85128f41dd1d012b00a8f228def73dcd74f8ee', "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: '5317862b5c76dcf36fd34677e244cea6058d5ce6', name: "symbol" }), h("span", { key: '8bdf57d20b7c7ff8b36c3a76d5948c0224f0c00b', class: clsx("dso-label-content", {
+            }) }, h("slot", { key: 'd8379d7f323ec3a924305fa6a5caf0b959bcc6ac', name: "symbol" }), h("span", { key: 'f4a031ce32622795a3ce64b1b40cb0be25d65209', 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: 'e1058f315923fbc5ce8ad0e6d509ecf6e1741fa1' })), this.removable && (h("button", { key: '77b4c1353b9e2b2fbfff7ac6ce024b6a2f19d744', 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: '5abd3efbe1a142c839395d5e5ba6d6bba4c533b3', class: "sr-only" }, "Verwijder: ", this.labelText), h("dso-icon", { key: 'd457520fa763aa923fb4a8eb9e67f17fad928da9', icon: "times" })))), this.isTruncated && (h("dso-tooltip", { key: 'c5f94a1ebde064b736228a19cb641ef418fddd33', 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: '05e123fabbcecff3cab78bc57b036d5e54db7026' })), this.removable && (h("button", { key: '90777393b22c3d1b560912fb8d9e12e06d46b150', 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: 'de39e773d676dc37dc91c47012e9cf06d48db6f9', class: "sr-only" }, "Verwijder: ", this.labelText), h("dso-icon", { key: '17d86f44f3f9908a96bb28ebb7e90517a6d88f64', icon: "times" })))), this.isTruncated && (h("dso-tooltip", { key: 'df8ff5796a8b8acd40ed2285161f80e4a8ab35ed', 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: 'a07a2fef3cf116bba6330caf00d182b2c2c400ee', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: '3227f9fdb524d79a8313f4f8298be81e7385037f', class: clsx("legend-item", {
+        return (h(Host, { key: 'fdf7820161731192934d7e58bf23c38d50132952', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: '4f08acb50f7f2dd92a458a208ac684b9525538f0', class: clsx("legend-item", {
                 "legend-item-symbol": hasSymbol,
                 "legend-item-selectable": isSelectable,
-            }) }, h("div", { key: 'b0c546d0a12cec131b2c1440feb0a88297254445', hidden: !hasSymbol }, h("slot", { key: 'be8b8136bf464b49d9268e0ed0c65cd6b790a729', name: "symbol" })), h("div", { key: 'ea40635452492f936ecff0a979d209705b4b0489' }, h("slot", { key: 'd63908576e0f2eda225b4807d934174190bcc51a' })), this.disabled && this.disabledMessage && (h("dso-toggletip", { key: '37e2bb0cc28823a28ac3db56d286146ac079dab0', position: "bottom" }, this.disabledMessage)), this.removable && (h("button", { key: 'fd17f5863ce36b874d3ae9506a8c525317d00296', id: "remove-button", type: "button", onClick: (e) => this.dsoRemoveClick.emit({ originalEvent: e }) }, h("span", { key: 'fb34dfc41ab3afa5685884d8517a20e0c91d3edf', class: "sr-only" }, "Legenda item verwijderen"), h("dso-icon", { key: 'd5c6e19b1c51b08b3a646981ce55a167a7b3837a', icon: "trash" }))), hasBody && !this.disabled && (h("button", { key: 'de0efb730d2d840f54ade0b623f28e1e3b82235c', id: "edit-button", type: "button", onClick: () => (this.showBody = !this.showBody) }, h("span", { key: 'd2419f3ff0b34e25b05673b838d8fd8481c6f659', class: "sr-only" }, "Legenda item aanpassen"), h("dso-icon", { key: 'f2a9076efe838692dd045f683986ae4594fff73a', icon: this.showBody ? "times" : "more" })))), h("div", { key: '2c2eeeba001cc10b708d38c2d25236f7650e0f06', hidden: !hasBody || this.disabled || !this.showBody, class: "body" }, h("slot", { key: 'dbfab04e8c2daffb9dfb5d4a80f182edc7c5625e', name: "body" }))));
+            }) }, h("div", { key: 'f34471eaac6e998c808e4c6361115e538e8d8b61', hidden: !hasSymbol }, h("slot", { key: '455268cfcb8c347c2801d84997fdad5bc4a3b378', name: "symbol" })), h("div", { key: '5b07795b430cec542076e50673b1e94becb73508' }, h("slot", { key: 'a048bd51b714d9f67779305ee529fb9cd2dfd253' })), this.disabled && this.disabledMessage && (h("dso-toggletip", { key: '4c87f2e9c1815c7d26a67e1f727d2a3d4bce6f81', position: "bottom" }, this.disabledMessage)), this.removable && (h("button", { key: '93a38eb4ffb8626d01674af566282a11bbd3455d', id: "remove-button", type: "button", onClick: (e) => this.dsoRemoveClick.emit({ originalEvent: e }) }, h("span", { key: '85a68e422642ff01291cf36f9a893ebe929e8e07', class: "sr-only" }, "Legenda item verwijderen"), h("dso-icon", { key: 'b15c4f046dfc8e36e8a60b3307410b3c019f3d32', icon: "trash" }))), hasBody && !this.disabled && (h("button", { key: '2dcea1ce6973fdcd65956713a27b2ef39487835c', id: "edit-button", type: "button", onClick: () => (this.showBody = !this.showBody) }, h("span", { key: '18aed85bd86a0d1e8a10ca51d84a91430aa0bb5a', class: "sr-only" }, "Legenda item aanpassen"), h("dso-icon", { key: 'ce53b593f549798df12c469fc6caee0f89419419', icon: this.showBody ? "times" : "more" })))), h("div", { key: 'ce4650fba929ec9bcf297ca59ca6eb1ada4849e5', hidden: !hasBody || this.disabled || !this.showBody, class: "body" }, h("slot", { key: 'ff712bc5cfe11cec44141c94803c24cfc8229516', name: "body" }))));
     }
     static get is() { return "dso-legend-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -65,7 +65,7 @@ export class ListButton {
     }
     render() {
         const selected = this.checked || (this.count !== undefined && this.count > 0);
-        return (h("div", { key: 'fb60f4411ca26dcbb16cec36a03833b2aceeafc7', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: '0e1fefb37dbeea9e88b62af8212a87cbd6d31987', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("div", { key: '025b84a7d7449b45262bcbeadc0afaecc740836f', class: "dso-selectable" }, h("input", { key: 'f92201d21b11956a864bb947faa8aa83cc5fa957', 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: 'b0252f42352ec337a06eb5d1ba14385681b0798e', htmlFor: "dso-list-button-checkbox" }, this.label), this.subcontentSlot && (h("div", { key: 'b0edfb917d4ef95f28bc0343c976b027001fdc3a', class: "sr-only", id: "description" }, this.subcontentPrefix && this.subcontentPrefix + ":", h("div", { key: 'f58587317319494ded637f7e2d672b8553326964', innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && (h("span", { key: 'a1f03051f2795fcb720104e68360633f5089530a', class: "dso-sublabel", id: "sublabel" }, this.sublabel)), h("slot", { key: 'a9d021a5c5187322c48874bbf6041c6388db892a', name: "subcontent" })), this.count !== undefined && this.count > 0 && (h("div", { key: '0e1d39294b2642ab180c12995c7e0f8651bb9674', class: "dso-input-number" }, this.count > 1 && (h(Fragment, null, h("button", { key: '3d37f6ffcdab938a0f6cd72b5d4e0aceffca0a3e', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.min) || this.disabled, onClick: (e) => this.stepValue(e, "decrement") }, h("dso-icon", { key: 'bcc8bf4b3d1cf609ab555507dfcb79072cfa7d37', icon: "minus-circle" }), h("span", { key: '0911c67ec9dcced5753bb78292c908994d1bd120', class: "sr-only" }, "Aantal verlagen")), h("span", { key: '941601e969493b50c9ab9f531cd94b40083e3311', class: "dso-input-step-counter", "aria-label": "Aantal", "aria-live": "polite" }, this.count))), h("button", { key: '12cc6c00e9a6afe7a28ba813cf6c58624a2151ec', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.max) || this.disabled, onClick: (e) => this.stepValue(e, "increment") }, h("dso-icon", { key: '11c41be904dcdebb9bc07aec287e086111ff8aba', icon: "plus-circle" }), h("span", { key: '4be205c67c39e3320a9b92bc1469ed8af9a1d7ce', class: "sr-only" }, "Aantal verhogen"))))));
+        return (h("div", { key: '3dbe6ce505736156cb4f26cf43427b9d61066506', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: 'c09a954d88ef103654aee9162221a434a34ac484', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("div", { key: '826d4bdc3d111b85e1f3ee130036bc0205db356a', class: "dso-selectable" }, h("input", { key: '77ce9a1e4294fdb18c974b8430da46b9cabef54b', 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: 'ce8193a9a8e9ad45a2cdf403b2f3483813b3386d', htmlFor: "dso-list-button-checkbox" }, this.label), this.subcontentSlot && (h("div", { key: '83ccf29cd00f52278be9b783e299b24c130bbd30', class: "sr-only", id: "description" }, this.subcontentPrefix && this.subcontentPrefix + ":", h("div", { key: 'e0c2d903ddbd5c7c5200392d72dce90605e2d18e', innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && (h("span", { key: '203e90fc70d1f70d275c3c2063c0727e9280aeb0', class: "dso-sublabel", id: "sublabel" }, this.sublabel)), h("slot", { key: 'd352c29208c64b36c4ffcb02f7441a6be9001ebb', name: "subcontent" })), this.count !== undefined && this.count > 0 && (h("div", { key: '8909ae8c1828d127a3df7ceaa8723abdae2da0f3', class: "dso-input-number" }, this.count > 1 && (h(Fragment, null, h("button", { key: 'dbab575708e6f830ff65258cf8f441fe3277e7cb', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.min) || this.disabled, onClick: (e) => this.stepValue(e, "decrement") }, h("dso-icon", { key: 'a9e3be572e96e086f789f22024526c41a802d472', icon: "minus-circle" }), h("span", { key: '321ff58b05e185321b0998582711dca9cbd8ed15', class: "sr-only" }, "Aantal verlagen")), h("span", { key: '18813f9c325b9378e18db1b1ee262f16a36472db', class: "dso-input-step-counter", "aria-label": "Aantal", "aria-live": "polite" }, this.count))), h("button", { key: '6c4e9baab6d8c3c069a158e4e3a4a27c5c3498b7', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.max) || this.disabled, onClick: (e) => this.stepValue(e, "increment") }, h("dso-icon", { key: 'c18cee53508ce4bafc39ed625826ab130ae2bae8', icon: "plus-circle" }), h("span", { key: 'ea8c4f811d2e0dc1c8c072c96611036ba0238213', class: "sr-only" }, "Aantal verhogen"))))));
     }
     static get is() { return "dso-list-button"; }
     static get encapsulation() { return "shadow"; }