@dso-toolkit/core 76.0.0 → 77.0.0

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

@@ -7,7 +7,7 @@ export class CardContainer {
         this.mode = "list";
     }
     render() {
-        return (h(Fragment, null, this.mode === "list" && (h("ul", { key: '587a029adba2baa1af6a6edb83d5d788aa37c203', class: "dso-card-list" }, h("slot", { key: 'c6041cd186eddc4b89e073920ff8e891dd4e25cf' }))), this.mode === "grid" && (h("div", { key: '14cb5bd647f49a80ce52e9bd5a3cc59b7a9d5144', class: "dso-card-grid" }, h("slot", { key: '9e0b205698806f14085e82a85631afd49665f1e3' })))));
+        return (h(Fragment, null, this.mode === "list" && (h("ul", { key: '90b07c1be81c9e8891fc3c56d9d67304347c2756', class: "dso-card-list" }, h("slot", { key: '28fd7e44a59870508de16cefaf245146004319bc' }))), this.mode === "grid" && (h("div", { key: '8a73e7edf8c218f0dee90aac272b148207c20d13', class: "dso-card-grid" }, h("slot", { key: '9406a30a0ddf5ac7d1c48b5e0003f61936945783' })))));
     }
     static get is() { return "dso-card-container"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,7 +6,7 @@ import { h } from "@stencil/core";
  */
 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" })));
+        return (h("div", { key: 'a511c3b7e61371a74f3e55c0a71abaf56768cb52', class: "dso-contact-information" }, h("slot", { key: '98fae6e8614de0c46fb8fb5d55e77f5807dc4231', name: "heading" }), h("slot", { key: 'b84cd2bcc9a9874110d302b16ece15d37ab35896', name: "anchor-items" }), h("slot", { key: '32bae418af1a46f538c8cb4dde38e347f99cf7b1', name: "info-items" })));
     }
     static get is() { return "dso-contact-information"; }
     static get encapsulation() { return "shadow"; }

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

@@ -106,7 +106,7 @@ export class DsoDatePicker {
     }
     render() {
         var _a;
-        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 }));
+        return (h("input", { key: 'a3e6335fedd3f1934ae485f331130c4975a7c009', 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: '957cb5ecd6d41aa4080fdc413ecd3ec720e6f2f5' }, h("div", { key: '7a6fd28aca5e525a44db67316ea232111dd78d83', class: { "dso-date": true, "dso-visible": this.visible } }, h("div", { key: '738c2f5561053e525732b03db48f767018186df1', class: "dso-date__input-wrapper" }, h("input", { key: 'be60893ee6894c6872f4a8b11e1a5329592a9cb3', 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: '64a1581be9c55c14278206fc8bec3516fe9588c3', type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: (element) => (this.datePickerLegacyButton = element) }, h("span", { key: '0abea68907579095ed9a0f30cd3fe66f1e99adf7', class: "dso-date__toggle-icon" }, h("dso-icon", { key: '80acee7a48d20a2314a8bbfeba478ffe49bdc2f1', icon: "calendar" })), h("span", { key: 'e8734da932112b02a3d40135b9a0ae7c53762c0a', class: "dso-date__vhidden" }, this.localization.buttonLabel, formattedDate && (h("span", { key: 'd64fb70897d08a11c6ab4130686128f36ede3635' }, ", ", this.localization.selectedDateMessage, " ", formattedDate))))), h("div", { key: 'eb265922641b7bbb69ffae331ea25663246865e7', class: {
+        return (h(Host, { key: '0b1ec6d7508b3bd54868d792da349f56723c49f7' }, h("div", { key: '3760db6ad5de67e53d9b663f21d9fa7c19c0c47a', class: { "dso-date": true, "dso-visible": this.visible } }, h("div", { key: 'f757525e60df0cd5566dba5c188cb9e6483f057d', class: "dso-date__input-wrapper" }, h("input", { key: 'c8ef8c3fb2524c1b996d0eedd5061b4c9b406738', 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: '0b43d6689f0e9a450b3f5ea98bb7e61739552847', type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: (element) => (this.datePickerLegacyButton = element) }, h("span", { key: 'fd6f7ae09f4f28fc80f5e59022080a4340cd57ff', class: "dso-date__toggle-icon" }, h("dso-icon", { key: 'd956ec013af3fa9969e159093bdc9e83da2040cd', icon: "calendar" })), h("span", { key: '5fb48f01acb482324f576afb50884dfc8bf8ac5c', class: "dso-date__vhidden" }, this.localization.buttonLabel, formattedDate && (h("span", { key: 'a9e593f6baedfd379febefd8b3259433314b7a03' }, ", ", this.localization.selectedDateMessage, " ", formattedDate))))), h("div", { key: '58475a8e3df7056be4486e40c566d8f589bfc4b9', 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: '0652c8515f40627399a4d2c8e572188d4a272866', class: "dso-date__dialog-content", onKeyDown: this.handleEscKey }, h("div", { key: 'ffd05e410fb85956e9157325b55c50f6c13ffd2f', class: "dso-date__vhidden dso-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), h("div", { key: 'cba925b52839e002c6725e213e5cd1e4bb9527cc', class: "dso-date__mobile", onFocusin: this.disableActiveFocus }, h("label", { key: '9e5c185d36e1b36c5f434e2f4ba84f9fe05f34ab', class: "dso-date__mobile-heading" }, this.localization.calendarHeading), h("button", { key: 'cb2d54a595e5937dbdfa2493c2a78f3232a694fe', class: "dso-date__close", ref: (element) => (this.firstFocusableElement = element), onKeyDown: this.handleFirstFocusableKeydown, onClick: () => this.hide(), type: "button" }, h("dso-icon", { key: 'caa97ca69898a421dc2be65d0b72d506784b46b3', icon: "times" }), h("span", { key: '53c8e6ed325069aa3f469d2c882749b1a7c6a73a', class: "dso-date__vhidden" }, this.localization.closeLabel))), h("div", { key: '01a8aff75b3f2760466e9a8d1a98183cfc54c5f6', class: "dso-date__header", onFocusin: this.disableActiveFocus }, h("div", { key: '014941383091917d6db3b4ef61697feb50f9ca89' }, h("h2", { key: '5bc5c6226ca3e62965d44cb7213c1b3b595d1fed', id: this.dialogLabelId, class: "dso-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], " ", this.focusedDay.getFullYear()), h("label", { key: '4a8cfec86a434dee22a6e692c3a221f649f2b165', htmlFor: this.monthSelectId, class: "dso-date__vhidden" }, this.localization.monthSelectLabel), h("div", { key: 'e0ccf6cda124982e9193f882300d3883a88979ba', class: "dso-date__select" }, h("select", { key: 'a98658e03f28e9e82224b69d754df240183c2cd9', 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: 'b9aaf2ee2e85356ebbb97c81ec6d2fc60d433aba', class: "dso-date__dialog-content", onKeyDown: this.handleEscKey }, h("div", { key: 'd5b24a9d0967a9389486c6d2d62c7df973092360', class: "dso-date__vhidden dso-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), h("div", { key: 'a7fa892c6141fb05cd9d5e25941b58d3f33103d8', class: "dso-date__mobile", onFocusin: this.disableActiveFocus }, h("label", { key: '9ee19bb1e9323ded05446ea3f3e6a52817a32302', class: "dso-date__mobile-heading" }, this.localization.calendarHeading), h("button", { key: '0b0f38cf720508e49a03b3336d22b484db8db0a9', class: "dso-date__close", ref: (element) => (this.firstFocusableElement = element), onKeyDown: this.handleFirstFocusableKeydown, onClick: () => this.hide(), type: "button" }, h("dso-icon", { key: '55688d9e29a9d0e703cf9b05e064670f0eba97ae', icon: "times" }), h("span", { key: 'c851850368265c521ae301d7c9e0c753157d5739', class: "dso-date__vhidden" }, this.localization.closeLabel))), h("div", { key: '0e768e06ffca70d595b49199cc43394f893f1936', class: "dso-date__header", onFocusin: this.disableActiveFocus }, h("div", { key: '650fce41916c3ddf60c5148d58300846cbc41bc2' }, h("h2", { key: '93e6938990982c205dbf34105dcfb7beeedfe5fb', id: this.dialogLabelId, class: "dso-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], " ", this.focusedDay.getFullYear()), h("label", { key: 'e956e5066fbd5c56f33cdcacd9f4530a90bd1967', htmlFor: this.monthSelectId, class: "dso-date__vhidden" }, this.localization.monthSelectLabel), h("div", { key: 'a4c988914df53fd0d0af4c808ee1094a72c15bdc', class: "dso-date__select" }, h("select", { key: 'ab5b9dd4f543d13278b4dd65edfae89c00339cc9', 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: '2c430302075f436442d64aad4804936d7f47d417', class: "dso-date__select-label", "aria-hidden": "true" }, h("span", { key: 'c53a91bf0f52839fa4aa87c0ef9e2dacbe0df8bb' }, this.localization.monthNamesShort[focusedMonth]), h("dso-icon", { key: '19b52d0d3f0c1a71402515b97e7d13f98f12a105', icon: "chevron-down" }))), h("label", { key: '246fd6c2fb5c7771c139d5786346e12ef8693c3d', htmlFor: this.yearSelectId, class: "dso-date__vhidden" }, this.localization.yearSelectLabel), h("div", { key: '9b2583586116004567611ecfac87d6a98261c157', class: "dso-date__select" }, h("select", { key: '06b592e2eb87d41c85ee5bf4efaed35b51144fd8', 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: 'ef7b607dfc1e493077d79aeffe3dc687b3991e28', class: "dso-date__select-label", "aria-hidden": "true" }, h("span", { key: '36d1dec13260dbc32feaf4c9875bdc5e9ca68118' }, this.focusedDay.getFullYear()), h("dso-icon", { key: '34e5fba7b8152bf66b65eecc7ca6469ac09bec34', icon: "chevron-down" })))), h("div", { key: 'b075a1c3c963e89f7aa7708834e9a697fe3aedd9', class: "dso-date__nav" }, h("button", { key: 'ac333335f9a4a81b659d5ca787a594bcc227314b', class: "dso-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, h("dso-icon", { key: '3802f14d7336beabcbd2e22d76c605d6a1610ae3', icon: "chevron-left" }), h("span", { key: 'fd06635f86a685a0e25fa19f911151dc98017cd0', class: "dso-date__vhidden" }, this.localization.prevMonthLabel)), h("button", { key: 'a6c10604bd06923d4230452a629c4a585651a6e0', class: "dso-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, h("dso-icon", { key: '1d43e6494d836b954eafd7b3d22efe1183e06526', icon: "chevron-right" }), h("span", { key: '4b880ddc1b3dbf49171b4e71ad6949296ce90d91', class: "dso-date__vhidden" }, this.localization.nextMonthLabel)))), h(DatePickerLegacyMonth, { key: '54c119f2a06e35cd6143994eca4a718a917f6638', 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: '55a1a117e095115fc80403ca836df2e69951f745', class: "dso-date__select-label", "aria-hidden": "true" }, h("span", { key: 'd18823683d95dae481d4da151cd45637918c6e46' }, this.localization.monthNamesShort[focusedMonth]), h("dso-icon", { key: '087bdd2d44ec99c7ded483fe930e166f91ccd0b4', icon: "chevron-down" }))), h("label", { key: 'f96ca586396432132d9482cbfac0a8896cf8c46d', htmlFor: this.yearSelectId, class: "dso-date__vhidden" }, this.localization.yearSelectLabel), h("div", { key: 'ea7f1f0e42bf3344dab30e1a9aa9eff497ca11b5', class: "dso-date__select" }, h("select", { key: 'ab06d22ec2edd4b1d4828b47d4d495932ffd8e14', 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: '094f3bab580202d91c94658a5084812547c44017', class: "dso-date__select-label", "aria-hidden": "true" }, h("span", { key: '1e4eabb3b6a4a546a79c43f91e18f8abffe9cf51' }, this.focusedDay.getFullYear()), h("dso-icon", { key: 'ecc4a276f2dd83053cb3759eda3a56bd4161f265', icon: "chevron-down" })))), h("div", { key: 'bbc9b3fad3a82919a006fd78befe7c88140ac97e', class: "dso-date__nav" }, h("button", { key: 'f8d45217ff383c4e140fc34e083fa163908510bb', class: "dso-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, h("dso-icon", { key: 'f4a8cee55b8c3c8d5fa4db365e3a88137bc2ab3e', icon: "chevron-left" }), h("span", { key: '2f860a03cda77d7c9621906eb2ebb218635ef4cc', class: "dso-date__vhidden" }, this.localization.prevMonthLabel)), h("button", { key: '2222d594e39d8e7f39400777dc43a00d35f002a5', class: "dso-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, h("dso-icon", { key: '080cf2578b603e2c50e6bf4a50c3f1b4f9189db1', icon: "chevron-right" }), h("span", { key: 'b8388d0ccbd1a04a27737f6948d8bb6013b0322f', class: "dso-date__vhidden" }, this.localization.nextMonthLabel)))), h(DatePickerLegacyMonth, { key: 'b9043d6761d0dbe9ce13ba0e4d26f646e0b2ffa5', 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: '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("span", { key: '4a21deb471f62a81582b5410946caa66af82ea3b', class: "icon-container" }, h("dso-icon", { key: '211bcb9bfa4af4e9be6733d0e52a5e4fb7b25170', icon: "chevron-right" }), h("slot", { key: '20b41d90d10b20978fd51098d3e094e032eaaf9e', name: "heading" }))), this.metaSlottedElement !== null && h("slot", { key: '8e6c9694b793400757362c48c66809ec98ccfda7', name: "meta" })), h("div", { key: 'd35084e0b9c23553a865ca08a001b9e1b8d556ad', class: "dso-document-card-type" }, h("slot", { key: 'aa0159f40f85fd004b32923b1a7b5b029a576316', name: "type" })), h("div", { key: 'c27e28deca9072c962faa5cd2f947878d80d2d19', class: "dso-document-card-status" }, h("slot", { key: '51a1e2f7564a2384de3c9e72b298fcc6f2479215', name: "status" }))));
+        return (h("div", { key: 'a56e8db95294c83dfa5b558e47d72ee36c22c523', class: "dso-document-card-container" }, h("div", { key: '14fce780fceba683eb4e30cc6f060f7c7ff1dbce', class: "dso-document-card-heading" }, h("a", { key: '3423b19ac876cdd90135094d8d0b1430c4a53d0e', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("span", { key: '611617cd46d12105826465a46c3eb6ac41cb8dc4', class: "icon-container" }, h("dso-icon", { key: '84e9dc5793d9eb51b7748268df8c5b87cb27b24e', icon: "chevron-right" }), h("slot", { key: 'fdbb9ef5d508c67d7432e4aa6dd57d17f4bc730d', name: "heading" }))), this.metaSlottedElement !== null && h("slot", { key: '054d80082247a4eb97136f8e6d199229cb75edf6', name: "meta" })), h("div", { key: 'b7099c9ceaacf8691392fab1cfce9684b83babe2', class: "dso-document-card-type" }, h("slot", { key: '1e7a73fe9efa71d7362ae366ee1f4823b55720d6', name: "type" })), h("div", { key: '34309e92ede40ea37abfe3fc09d7e5270c56c7e9', class: "dso-document-card-status" }, h("slot", { key: 'c708100dfa943e139d3d17e5bd02dcffd02f185e', name: "status" }))));
     }
     static get is() { return "dso-document-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -272,14 +272,14 @@ a.dso-secondary:hover,
 button.dso-secondary:hover,
 label.dso-secondary:hover {
   background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);
-  border-color: var(--_dso-button-secondary-hover-border-color, #39870c);
-  color: var(--_dso-button-secondary-hover-color, #39870c);
+  border-color: var(--_dso-button-secondary-hover-border-color, #275937);
+  color: var(--_dso-button-secondary-hover-color, #275937);
 }
 a.dso-secondary:active,
 button.dso-secondary:active,
 label.dso-secondary:active {
-  background-color: var(--_dso-button-secondary-active-background-color, #39870c);
-  border-color: var(--_dso-button-secondary-active-border-color, #39870c);
+  background-color: var(--_dso-button-secondary-active-background-color, #275937);
+  border-color: var(--_dso-button-secondary-active-border-color, #275937);
   color: var(--_dso-button-secondary-active-color, #fff);
 }
 a.dso-secondary[disabled], a.dso-secondary[disabled]:hover,
@@ -677,6 +677,224 @@ label.dso-tertiary.extern:not([disabled]):hover::after,
 label.dso-tertiary.extern:not([disabled]):active::after {
   background-image: var(--_dso-di-background-image, url("./di.svg#external-link-bosgroen"));
 }
+a.dso-map,
+button.dso-map,
+label.dso-map {
+  display: inline-block;
+  font-size: 1em;
+  font-weight: 500;
+  margin-block-end: 0;
+  text-decoration: none;
+  touch-action: manipulation;
+  text-align: start;
+  user-select: none;
+  vertical-align: middle;
+}
+a.dso-map:focus, a.dso-map:focus-visible,
+button.dso-map:focus,
+button.dso-map:focus-visible,
+label.dso-map:focus,
+label.dso-map:focus-visible {
+  outline-offset: 2px;
+}
+a.dso-map:active,
+button.dso-map:active,
+label.dso-map:active {
+  outline: 0;
+}
+a.dso-map,
+button.dso-map,
+label.dso-map {
+  background-color: var(--_dso-button-secondary-background-color, #fff);
+  border-color: var(--_dso-button-secondary-border-color, #39870c);
+  color: var(--_dso-button-secondary-color, #39870c);
+}
+a.dso-map,
+button.dso-map,
+label.dso-map {
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 4px;
+  line-height: 1.5;
+  min-inline-size: 56px;
+  padding-block: 11px;
+  padding-inline: 15px;
+}
+a.dso-map:hover,
+button.dso-map:hover,
+label.dso-map:hover {
+  background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);
+  border-color: var(--_dso-button-secondary-hover-border-color, #275937);
+  color: var(--_dso-button-secondary-hover-color, #275937);
+}
+a.dso-map:active,
+button.dso-map:active,
+label.dso-map:active {
+  background-color: var(--_dso-button-secondary-active-background-color, #275937);
+  border-color: var(--_dso-button-secondary-active-border-color, #275937);
+  color: var(--_dso-button-secondary-active-color, #fff);
+}
+a.dso-map[disabled], a.dso-map[disabled]:hover,
+button.dso-map[disabled],
+button.dso-map[disabled]:hover,
+label.dso-map[disabled],
+label.dso-map[disabled]:hover {
+  background-color: var(--_dso-button-secondary-disabled-background-color, #fff);
+  border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);
+  color: var(--_dso-button-secondary-disabled-color, #afcf9d);
+}
+a.dso-map.dso-small,
+button.dso-map.dso-small,
+label.dso-map.dso-small {
+  line-height: 1rem;
+}
+a.dso-map.dso-small dso-icon,
+a.dso-map.dso-small svg.di, a.dso-map.dso-small.extern::after, a.dso-map.dso-small.download::after, a.dso-map.dso-small.dso-spinner::before,
+button.dso-map.dso-small dso-icon,
+button.dso-map.dso-small svg.di,
+button.dso-map.dso-small.extern::after,
+button.dso-map.dso-small.download::after,
+button.dso-map.dso-small.dso-spinner::before,
+label.dso-map.dso-small dso-icon,
+label.dso-map.dso-small svg.di,
+label.dso-map.dso-small.extern::after,
+label.dso-map.dso-small.download::after,
+label.dso-map.dso-small.dso-spinner::before {
+  margin-block-end: -4px;
+  margin-block-start: -4px;
+}
+a.dso-map.dso-small.dso-spinner-left::before,
+button.dso-map.dso-small.dso-spinner-left::before,
+label.dso-map.dso-small.dso-spinner-left::before {
+  block-size: 16px;
+  inline-size: 16px;
+}
+a.dso-map.dso-small.dso-spinner-right::after,
+button.dso-map.dso-small.dso-spinner-right::after,
+label.dso-map.dso-small.dso-spinner-right::after {
+  block-size: 16px;
+  inline-size: 16px;
+}
+a.dso-map dso-icon:has(+ span:not(.sr-only)),
+a.dso-map svg.di:has(+ span:not(.sr-only)),
+button.dso-map dso-icon:has(+ span:not(.sr-only)),
+button.dso-map svg.di:has(+ span:not(.sr-only)),
+label.dso-map dso-icon:has(+ span:not(.sr-only)),
+label.dso-map svg.di:has(+ span:not(.sr-only)) {
+  margin-inline-start: -8px;
+}
+a.dso-map span:not(.sr-only) + dso-icon,
+a.dso-map span:not(.sr-only) + svg.di,
+button.dso-map span:not(.sr-only) + dso-icon,
+button.dso-map span:not(.sr-only) + svg.di,
+label.dso-map span:not(.sr-only) + dso-icon,
+label.dso-map span:not(.sr-only) + svg.di {
+  margin-inline-start: 8px;
+  margin-inline-end: -8px;
+}
+a.dso-map dso-icon + span:not(.sr-only),
+a.dso-map svg.di + span:not(.sr-only),
+button.dso-map dso-icon + span:not(.sr-only),
+button.dso-map svg.di + span:not(.sr-only),
+label.dso-map dso-icon + span:not(.sr-only),
+label.dso-map svg.di + span:not(.sr-only) {
+  margin-inline-start: 8px;
+}
+a.dso-map.dso-spinner-left[disabled], a.dso-map.dso-spinner-right[disabled],
+button.dso-map.dso-spinner-left[disabled],
+button.dso-map.dso-spinner-right[disabled],
+label.dso-map.dso-spinner-left[disabled],
+label.dso-map.dso-spinner-right[disabled] {
+  background-color: #fff;
+  border-color: #39870c;
+  color: #39870c;
+}
+a.dso-map.dso-spinner-left::before,
+button.dso-map.dso-spinner-left::before,
+label.dso-map.dso-spinner-left::before {
+  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  content: "";
+  display: inline-block;
+  block-size: 24px;
+  vertical-align: top;
+  inline-size: 24px;
+  margin-inline-end: 8px;
+}
+a.dso-map.dso-spinner-left:not([disabled]):hover::before,
+button.dso-map.dso-spinner-left:not([disabled]):hover::before,
+label.dso-map.dso-spinner-left:not([disabled]):hover::before {
+  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  content: "";
+  display: inline-block;
+  block-size: 24px;
+  vertical-align: top;
+  inline-size: 24px;
+  margin-inline-end: 8px;
+}
+a.dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before,
+button.dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before,
+label.dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before {
+  block-size: 16px;
+  inline-size: 16px;
+}
+a.dso-map.dso-spinner-right::after,
+button.dso-map.dso-spinner-right::after,
+label.dso-map.dso-spinner-right::after {
+  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  content: "";
+  display: inline-block;
+  block-size: 24px;
+  vertical-align: top;
+  inline-size: 24px;
+  margin-inline-start: 8px;
+}
+a.dso-map.dso-spinner-right:not([disabled]):hover::after,
+button.dso-map.dso-spinner-right:not([disabled]):hover::after,
+label.dso-map.dso-spinner-right:not([disabled]):hover::after {
+  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  content: "";
+  display: inline-block;
+  block-size: 24px;
+  vertical-align: top;
+  inline-size: 24px;
+  margin-inline-start: 8px;
+}
+a.dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after,
+button.dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after,
+label.dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after {
+  block-size: 16px;
+  inline-size: 16px;
+}
+a.dso-map,
+button.dso-map,
+label.dso-map {
+  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
+  border: 0;
+  font-weight: 600;
+  margin-inline-end: 16px;
+  padding-block: 8px;
+  padding-inline: 16px;
+  white-space: nowrap;
+}
+a.dso-map:focus, a.dso-map:focus-visible,
+button.dso-map:focus,
+button.dso-map:focus-visible,
+label.dso-map:focus,
+label.dso-map:focus-visible {
+  outline-offset: -1px;
+}
+a.dso-map:has(span.sr-only):has(dso-icon, svg.di),
+button.dso-map:has(span.sr-only):has(dso-icon, svg.di),
+label.dso-map:has(span.sr-only):has(dso-icon, svg.di) {
+  padding: 8px;
+  min-inline-size: auto;
+  block-size: 40px;
+  inline-size: 40px;
+}
 
 a.dso-primary {
   text-decoration: none;
@@ -691,7 +909,7 @@ a.dso-secondary, a.dso-secondary:visited {
   color: #39870c;
 }
 a.dso-secondary:hover, a.dso-secondary:visited:hover {
-  color: #39870c;
+  color: #275937;
 }
 a.dso-tertiary {
   text-decoration: none;
@@ -864,6 +1082,9 @@ a.dso-tertiary, a.dso-tertiary:visited {
 .heading-anchor span + :is(dso-icon, svg.di) {
   margin-inline-start: 8px;
 }
+.heading-anchor .sr-only + :is(dso-icon, svg.di) {
+  margin-inline-start: 0;
+}
 .heading-anchor:visited {
   color: var(--link-visited-color);
 }

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

@@ -110,7 +110,7 @@ export class DocumentComponent {
             this.alternativeTitle ||
             this.bevatOntwerpInformatie ||
             this.annotated);
-        return (h(Host, { key: '4e4e49562fb4b61bfaf742dc870c071e62eb19ec', "not-collapsible": !collapsible }, showHeading && (h("div", { key: 'c82e258a736f036f494243a34b4c627f57f50ffd', class: "heading-container", part: "_heading-container" }, this.wijzigactie && h("span", { key: 'b0302237904051b54e922b633b96904f87752167', class: "editaction-label" }, this.wijzigactieLabel, ":"), h("div", { key: '64dfb2e3f9db353c41739703a091eae3c231c3f4', class: "heading" }, h(Heading, { key: 'd889e348f3e9e6503536a5361e9a5bdfa7c630da', heading: this.heading, class: "heading-element", mode: this.mode, href: this.href }, collapsible && this.mode === "document" && (h("button", { key: 'd52e5d9ed92aa27096e11150110c0731bb277b2f', type: "button", class: "toggle-button", "aria-describedby": "heading-title", "aria-expanded": this.open.toString(), onClick: this.handleHeadingClick }, h("dso-icon", { key: 'd4bda0f4fb5600d04cf8b2b2fc6e479c16496deb', icon: this.open ? "chevron-down" : "chevron-right" }), h("span", { key: '87b310afccec36c62d2162e1e3cb6e7a58d58786', class: "sr-only" }, this.open ? "Invouwen" : "Uitvouwen"))), h("span", { key: 'ef2bfd341f467d3d2ef107ea7a556958b6d95e1e', id: "heading-title" }, this.notApplicable && h("span", { key: '29c285b83dcfd1207db4c9ede44741b15cc8e4d6', class: "sr-only" }, "Niet van toepassing:"), this.kop ? (h("dso-ozon-content", { class: "kop", content: this.kop, onDsoAnchorClick: this.handleOzonContentAnchorClick, onDsoClick: this.handleOzonContentClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "kop"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "kop" })), inline: true, urlResolver: this.ozonContentUrlResolver })) : (this.alternativeTitle), suffix && h("span", { key: '9082d72d8731d0030fb9ad38897b8ec691e9cb80' }, " - [", suffix, "]"))), this.recursiveToggle !== undefined && this.open && this.mode === "document" && (h("button", { key: '5b1af13f04a32f3debbce552d6709b8022270427', type: "button", class: "recursive-toggle", title: this.recursiveToggle === true ? "Verberg alles" : "Toon alles", onClick: this.handleRecursiveToggleClick }, h("dso-icon", { key: '93cace4e976ac026476ae78098cc5952a693404f', icon: this.recursiveToggle === true ? "eye" : "eye-slash" }))), this.showOntwerpBadge() && (h(Fragment, null, h("dso-badge", { key: '5726937b2bc7bf64a94e2b4e690c81c954e8c2b1', status: "warning", "aria-describedby": "nested-draft-description" }, "!"), h("dso-tooltip", { key: '8d3ec04d4e1b8094c5f36faa4ad53c3b6f5bb616', id: "nested-draft-description" }, "Er zijn onderliggende onderdelen die veranderen binnen dit ontwerp."))), (this.bevatOntwerpInformatie || this.annotated) && (h("div", { key: '08c052bcda02d1739bbde4ea2dfb4ce026bf64c5', class: "addons" }, this.bevatOntwerpInformatie && (h("dso-label", { key: 'e3982b110c4b1524f43bb3378a7e6256e1aa3313', status: "warning", compact: true }, "Ontwerp")), this.annotated && this.mode === "document" && (h("button", { key: 'db685eb666a4eaef8a78527ccf3f6e8dc55aed2a', 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: '9115b44159bbbd2f1325f49b4025f922f1e15057', icon: "label" }), h("span", { key: '0324b68fafe528876a811c923f8c23790aaeba7e', class: "sr-only" }, "Kenmerken en kaartgegevens ", this.openAnnotation ? "verbergen" : "tonen")))))))), this.openAnnotation && (h("div", { key: '6e64a89c0a96c08a91a6f919d3c5c80a9e47949e', class: "annotation-container", part: "_annotation-container" }, h("dso-panel", { key: 'b48d171acef0f2a1d7451c332a584bfef27200a5', id: "annotations", onDsoCloseClick: (e) => this.dsoAnnotationToggle.emit({ originalEvent: e }), closeButtonLabel: "Kenmerken en kaartgegevens verbergen" }, h("h2", { key: '68ef5e43734b10f3546330bdedf1c91bcbc7c080', slot: "heading" }, "Kenmerken en kaart"), h("slot", { key: '727ed13116a44b1841ebada73542bdcca325ac20', name: "annotations" })))), this.open && (this.inhoud || this.gereserveerd || this.vervallen) && this.mode === "document" && (h("div", { key: '13c7f07d04160f89fe36b45ebfcd925b3ef4f217', class: "content", part: "_content" }, this.gereserveerd && (h("dso-alert", { key: '9caa078b7dd42df3d88a1b5cfb789401333dc3da', status: "info" }, "Dit onderdeel is gereserveerd voor toekomstige toevoeging.")), this.vervallen && h("dso-alert", { key: '7ef7816d2c61ccabe456e1d00962189cb0cf6586', status: "info" }, "Dit onderdeel is vervallen."), this.inhoud && (h("dso-ozon-content", { key: 'e0f8c1173047255b597f142c180c0abc85722822', content: this.inhoud, onDsoAnchorClick: this.handleOzonContentAnchorClick, onDsoClick: this.handleOzonContentClick, 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" })), urlResolver: this.ozonContentUrlResolver })))), h("div", { key: '6260bbee5f1e11e836c15afdbad02dcabd9d53ae', class: "children-container", part: "_children-container" }, h("slot", { key: '1b8dd2673b0a808ea01c273bcedde39f7092aabc' }))));
+        return (h(Host, { key: '7ec8d54d6dc0728563591ff5593bc73ca85330e5', "not-collapsible": !collapsible }, showHeading && (h("div", { key: '97b926f4edd544204b40c5269cca7b7626792664', class: "heading-container", part: "_heading-container" }, this.wijzigactie && h("span", { key: '25252b24f785da6f16bc432261957ff045b1b3f9', class: "editaction-label" }, this.wijzigactieLabel, ":"), h("div", { key: 'af74a0c4c5fbf4800fe205f6c660ddc98a84666c', class: "heading" }, h(Heading, { key: 'b5917284ff14ea6aef3d14731562c52baff2d68d', heading: this.heading, class: "heading-element", mode: this.mode, href: this.href }, collapsible && this.mode === "document" && (h("button", { key: '4e22b181221b489cfc29e3561bfb486bba0ebe15', type: "button", class: "toggle-button", "aria-describedby": "heading-title", "aria-expanded": this.open.toString(), onClick: this.handleHeadingClick }, h("dso-icon", { key: '207e03144141322b87ea210e1d775f26f5de13d7', icon: this.open ? "chevron-down" : "chevron-right" }), h("span", { key: '7e5c81736ddd9ac7fcad44f8be75657f87cdb912', class: "sr-only" }, this.open ? "Invouwen" : "Uitvouwen"))), h("span", { key: 'a7d27878781fd1a0dbc4d8b34bfe4acc36bbc126', id: "heading-title" }, this.notApplicable && h("span", { key: 'c185ba2f6307b064112d10a1d9c1a2d3d6beae89', class: "sr-only" }, "Niet van toepassing:"), this.kop ? (h("dso-ozon-content", { class: "kop", content: this.kop, onDsoAnchorClick: this.handleOzonContentAnchorClick, onDsoClick: this.handleOzonContentClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "kop"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "kop" })), inline: true, urlResolver: this.ozonContentUrlResolver })) : (this.alternativeTitle), suffix && h("span", { key: 'cb51279ef47761747195981843382300e60855ec' }, " - [", suffix, "]"))), this.recursiveToggle !== undefined && this.open && this.mode === "document" && (h("button", { key: 'ab59986543f8951355139d2d15d786a22b873a00', type: "button", class: "recursive-toggle", title: this.recursiveToggle === true ? "Verberg alles" : "Toon alles", onClick: this.handleRecursiveToggleClick }, h("dso-icon", { key: 'c50f7c3d9ad83a60c309ab8ab7db91336e330376', icon: this.recursiveToggle === true ? "eye" : "eye-slash" }))), this.showOntwerpBadge() && (h(Fragment, null, h("dso-badge", { key: '5ca62c8478a822fde307eaf4699e4f35e43f4805', status: "warning", "aria-describedby": "nested-draft-description" }, "!"), h("dso-tooltip", { key: '55b7bb225fa9f20c22336f06b9fe1f50af1bbc42', id: "nested-draft-description" }, "Er zijn onderliggende onderdelen die veranderen binnen dit ontwerp."))), (this.bevatOntwerpInformatie || this.annotated) && (h("div", { key: '8b1cbcdcc0c07ff2c896707c141818b65540d65e', class: "addons" }, this.bevatOntwerpInformatie && (h("dso-label", { key: '55d8c40c7ad74cc86d458b5ffd9d1094f9c7bd2e', status: "warning", compact: true }, "Ontwerp")), this.annotated && this.mode === "document" && (h("button", { key: '04f4d77a41e8026d917fdd931fcf6f6160df7954', 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: 'c431cc6c5f822529adfac162c422b75e9d66c1ef', icon: "label" }), h("span", { key: '38c3354fb3ba3bed56f8499d0556083adc9bac87', class: "sr-only" }, "Kenmerken en kaartgegevens ", this.openAnnotation ? "verbergen" : "tonen")))))))), this.openAnnotation && (h("div", { key: '3a623faf08154d387bad4e43ce3249ee48d7df3d', class: "annotation-container", part: "_annotation-container" }, h("dso-panel", { key: '2f4c7326230d3b9c96d69c73f0bc9efd878439d0', id: "annotations", onDsoCloseClick: (e) => this.dsoAnnotationToggle.emit({ originalEvent: e }), closeButtonLabel: "Kenmerken en kaartgegevens verbergen" }, h("h2", { key: '9c5aa389d5d69b2873ddfc02c1cf59fb620cadf6', slot: "heading" }, "Kenmerken en kaart"), h("slot", { key: 'ace5dcde27a74bbd0bbf0fc5cf0e2beefda01c8a', name: "annotations" })))), this.open && (this.inhoud || this.gereserveerd || this.vervallen) && this.mode === "document" && (h("div", { key: 'c477b404f8f3df7291c966055b0a20484690db80', class: "content", part: "_content" }, this.gereserveerd && (h("dso-alert", { key: '8434f426baf96df4640f8832704c456e5fcc6c51', status: "info" }, "Dit onderdeel is gereserveerd voor toekomstige toevoeging.")), this.vervallen && h("dso-alert", { key: '1524ccaea262bbafb425c209bf1e245e7c049fa8', status: "info" }, "Dit onderdeel is vervallen."), this.inhoud && (h("dso-ozon-content", { key: '58eab2553699d1518ef887db48929a93646c7542', content: this.inhoud, onDsoAnchorClick: this.handleOzonContentAnchorClick, onDsoClick: this.handleOzonContentClick, 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" })), urlResolver: this.ozonContentUrlResolver })))), h("div", { key: '78030a655dd5c838f0d172c27d9a90860e91cb14', class: "children-container", part: "_children-container" }, h("slot", { key: '1942d841ce5a3f709d3a677de699b9ee0cb950e1' }))));
     }
     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: '3f5bcddba0ccf541701f7c114f959f1079b10ca7', class: "dso-document-components" }, h("div", { key: '5905ff852767018e9e656f0b519b103d9cc3f77d', class: "dso-navbar" }, h("ul", { key: 'c9b5c9a2f647b664652be272efa888341fb59cb9', 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: 'c0772dc10a81efead10232607acf586bb17424ef', path: [this.document] })));
+        return (h("dso-responsive-element", { key: 'fe3df48a532d067caa4b59285148b34645eb8313', class: "dso-document-components" }, h("div", { key: 'cca36ff22bdfa424b6ae54976fe09fff8d58c9b0', class: "dso-navbar" }, h("ul", { key: '710b4cdf2c42ef0a5e4433d6422fe6404533d67b', 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: '01ced614ab7376ac2710fdc8df95bd802ab3bdd9', path: [this.document] })));
     }
     static get is() { return "dsot-document-component-demo"; }
     static get encapsulation() { return "scoped"; }

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

@@ -4,4 +4,12 @@
 
 :host {
   display: inline-block;
+}
+
+div[popover] {
+  margin: 0 !important;
+  border: 0;
+  padding: 0;
+  background-color: transparent;
+  overflow: unset;
 }