@dso-toolkit/core 68.0.0 → 68.1.0

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

@@ -715,14 +715,14 @@ const DsoDatePickerLegacy$1 = /*@__PURE__*/ proxyCustomElement(class DsoDatePick
         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 }))))));
     }
     get element() { return this; }
     static get style() { return DsoDatePickerLegacyStyle0; }

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

@@ -149,7 +149,7 @@ const DsoDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class DsoDatePicker ext
     }
     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 }));
     }
     get element() { return this; }
     static get style() { return DsoDatePickerStyle0; }

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

@@ -31,7 +31,7 @@ const DocumentCard = /*@__PURE__*/ proxyCustomElement(class DocumentCard extends
         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" }))));
     }
     get host() { return this; }
     static get style() { return DsoDocumentCardStyle0; }

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

@@ -87,10 +87,10 @@ const HelpcenterPanel = /*@__PURE__*/ proxyCustomElement(class HelpcenterPanel e
         }
     }
     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 watchers() { return {
         "url": ["watchUrl"],

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

@@ -12,7 +12,7 @@ const HighlightBox = /*@__PURE__*/ proxyCustomElement(class HighlightBox extends
     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' })));
     }
     get element() { return this; }
     static get style() { return DsoHighlightBoxStyle0; }

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

@@ -18,13 +18,13 @@ const InputRange = /*@__PURE__*/ proxyCustomElement(class InputRange extends HTM
         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)));
     }
     get host() { return this; }
     static get style() { return DsoInputRangeStyle0; }

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

@@ -35,10 +35,10 @@ const LegendItem = /*@__PURE__*/ proxyCustomElement(class LegendItem extends HTM
         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" }))));
     }
     get host() { return this; }
     static get style() { return DsoLegendItemStyle0; }

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

@@ -75,7 +75,7 @@ const ListButton = /*@__PURE__*/ proxyCustomElement(class ListButton extends HTM
     }
     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"))))));
     }
     get host() { return this; }
     static get style() { return DsoListButtonStyle0; }

package/dist/components/dso-logo.js

@@ -32,7 +32,7 @@ const Logo = /*@__PURE__*/ proxyCustomElement(class Logo extends HTMLElement {
     }
     render() {
         return (h(Fragment, null, this.logoUrl ? (h("a", { class: "logo-url", href: this.logoUrl, onClick: this.handleLogoClick }, h(DsoLogo$1, { name: this.name }))) : (h(DsoLogo$1, { name: this.name })), this.label &&
-            (!this.labelUrl ? (h("span", { class: "logo-label" }, this.label)) : (h("a", { class: "logo-label-url", href: this.labelUrl, onClick: this.handleLabelClick }, h("span", { class: "logo-label" }, this.label)))), this.ribbon && h("div", { key: 'd3262e24609510f462852166bae0bb05cd471560', class: "logo-ribbon" }, this.ribbon)));
+            (!this.labelUrl ? (h("span", { class: "logo-label" }, this.label)) : (h("a", { class: "logo-label-url", href: this.labelUrl, onClick: this.handleLabelClick }, h("span", { class: "logo-label" }, this.label)))), this.ribbon && h("div", { key: '5c228e3eb6afd13bc4eeb274a0224cc9dfb9697a', class: "logo-ribbon" }, this.ribbon)));
     }
     static get style() { return DsoLogoStyle0; }
 }, [1, "dso-logo", {

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

@@ -51,7 +51,7 @@ const MapBaseLayers = /*@__PURE__*/ proxyCustomElement(class MapBaseLayers exten
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: '31f28b8aac3b85899716c3d73739b8b048cce5c2', class: "form-group dso-radios" }, h("legend", { key: '079f815943c707a94f8d2b969d3c34df168434b6', class: "sr-only" }, "Achtergrond"), h("div", { key: '7a1d09b517fb8194a6b99ca732b6f7c1a42b2030', class: "dso-label-container" }, h("span", { key: 'b9308d0b67acbf8eeb31d61ada07ef78f6e76dbf', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: 'bd1f76d18a167732fe91f11e32c912aca525047f', class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[baseLayer.id] = ref), onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name, baseLayer.info ? h("p", { slot: "info" }, baseLayer.info) : null))))));
+        return (h("fieldset", { key: 'fc725366824a2bfbecc6b3b54a9d66189897788d', class: "form-group dso-radios" }, h("legend", { key: 'a5e7265492ee924e04bc784c57f26e474f0c4c21', class: "sr-only" }, "Achtergrond"), h("div", { key: '344f1765eefba53c5d4a8c25d0f1853359e5029b', class: "dso-label-container" }, h("span", { key: 'f2de7cae48c08e0487ad8f1cd45a1f72def76858', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: 'c5dfd3492af5de39d9e718c2df24393e5069dc16', class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[baseLayer.id] = ref), onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name, baseLayer.info ? h("p", { slot: "info" }, baseLayer.info) : null))))));
     }
     get host() { return this; }
     static get style() { return DsoMapBaseLayersStyle0; }

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

@@ -90,7 +90,7 @@ const MapControls = /*@__PURE__*/ proxyCustomElement(class MapControls extends H
         });
     }
     render() {
-        return (h(Fragment, null, h("button", { key: 'e437cc9487051507ca3eb919aa97f0a4ab39475b', type: "button", id: "toggle-visibility-button", class: "toggle-visibility-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: 'd5821df785e62d1409e4fc88eba137250b7a2386', icon: "layers" }), h("span", { key: '96bcffa0c6c978155f2679c908409540180ca83e' }, this.text("layersButton"))), h("div", { key: '0b72c5e148abb8a33f7ad2a04d411a35d7a80501', class: "zoom-buttons" }, h("button", { key: 'a5d342fd781905fcaa82f8b0c1aff8d226335e00', type: "button", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, h("span", { key: '7a185d40e20a36490aa9fe7576875d07a05935c6' }, this.text("zoomIn")), h("dso-icon", { key: 'a19dd361cc779e2ba986303dd6a00f0307a65364', icon: "plus" })), h("button", { key: '045e648c8cd05195ca9fffd916fe8d4b6371e70c', type: "button", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, h("span", { key: '9ed34442104b5f9bcd66027ce5997df96bb48ec1' }, this.text("zoomOut")), h("dso-icon", { key: '71501aaaf3e47ab79bf8e9e85178a17dd1ac744d', icon: "minus" }))), h("section", { key: 'c832b1de0ee23f32ab668c5ac068b0c1d115d74c', hidden: this.hideContent }, h("header", { key: '258cd2a6b969191e6a8e81d3490457cac852a59d' }, h("h2", { key: '25e7359b457f5496650a7d0ac0a99eb6dab24331' }, this.text("title")), h("button", { key: 'f7834b66d780ee2521693c5e47eae06d83ee1803', type: "button", class: "close-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", { key: 'b1724abe463205df408cfd899d6325e3e64ccab5' }, this.text("hidePanel", { title: this.text("title") })), h("dso-icon", { key: '66065df2ca031efb57fca03952e9c04e062cc4be', icon: "times" }))), h("dso-scrollable", { key: '19f6a224463b30376bff99b083ce25b44b59df28' }, h("div", { key: '84f926f37038e17164a84f939e9f142184738443', class: "content" }, h("slot", { key: 'efd1449530ad4f2707129a7f1b01875856bcf427' }))))));
+        return (h(Fragment, null, h("button", { key: '573ea039111c0e7deaad1ea3d98f61624094b9e4', type: "button", id: "toggle-visibility-button", class: "toggle-visibility-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: 'd7b086353a46416f632560849e6fed86e7fffd1c', icon: "layers" }), h("span", { key: 'a00dd91224e379ab8742930d67b3bc8ea826afc6' }, this.text("layersButton"))), h("div", { key: '910fe57b1529c546558af71b787572a4b915ad97', class: "zoom-buttons" }, h("button", { key: '3552d4bcd383653c9892c7a16c8496e360a01f8d', type: "button", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, h("span", { key: '033cef82cce00e476d36845132b6c489ad4375b1' }, this.text("zoomIn")), h("dso-icon", { key: 'c2b8c167418ebe7841660788a5eeebbe25a88618', icon: "plus" })), h("button", { key: '14138f8ff799838ef69bd9e2b3c4f81a5a9b07d9', type: "button", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, h("span", { key: 'c0838a34699e52396769a7b141f763a693ddcf51' }, this.text("zoomOut")), h("dso-icon", { key: 'ad6c13bb2ea3619418087a61a798aed603a275e0', icon: "minus" }))), h("section", { key: '4de42199feb4079206e6f4b9c6e496a9477d6efb', hidden: this.hideContent }, h("header", { key: '544ef6d84816744e1f438a4a1a6d1fa72e8d18e0' }, h("h2", { key: 'bdf400d3caf3dafd8d519e456f93cacc17a83029' }, this.text("title")), h("button", { key: '65688a5d69a7515a6876717333f1f0b91c68bf35', type: "button", class: "close-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", { key: 'ffb2ce7c427be0ce964fe3248723c781ada74bc5' }, this.text("hidePanel", { title: this.text("title") })), h("dso-icon", { key: 'c0b7c4ca0bc3b77d0a11f9c73f9e88aba0fe7e9f', icon: "times" }))), h("dso-scrollable", { key: '0629184078ee836679679826b7b6d2a49d680b62' }, h("div", { key: '25c5e5428505beacc6e38358b3188b6674e325b1', class: "content" }, h("slot", { key: '2b89f160818bac188a431826cc95857b27927b33' }))))));
     }
     get host() { return this; }
     static get watchers() { return {

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

@@ -52,7 +52,7 @@ const MapOverlays = /*@__PURE__*/ proxyCustomElement(class MapOverlays extends H
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: 'c3b999bcfd600744f885128418dcb69aa9a18133', class: "form-group dso-checkboxes" }, h("legend", { key: 'bf13c49ba66ed5a8f0c8ca8ce3b2f4e41de64032', class: "sr-only" }, "Kaartlagen"), h("div", { key: '639e81cdc4f91ee53da11c8aede39fd5c85fc6e7', class: "dso-label-container" }, h("span", { key: '94172cf1232312e5d39e09f99390119f189109ce', class: "control-label", "aria-hidden": "true" }, this.text("title"))), h("div", { key: 'bb520e45e6a9c58c5bf7013fdbcf5ed39a635d45', class: "dso-field-container" }, this.overlays.map((overlay) => (h("dso-selectable", { key: overlay.id, type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[overlay.id] = ref), onDsoChange: (e) => this.overlayChangeHandler(overlay, e) }, overlay.name, overlay.info ? h("p", { slot: "info" }, overlay.info) : null))))));
+        return (h("fieldset", { key: '2092eeaf0e10ac4d8836e097895570e1457a4c3a', class: "form-group dso-checkboxes" }, h("legend", { key: 'fdb0cec1cd8deee591c8b83b87902009f1817bda', class: "sr-only" }, "Kaartlagen"), h("div", { key: 'd96f4e9495957dff19ce17bc26948a97b2a1e524', class: "dso-label-container" }, h("span", { key: '2ee2223b049367caab7713e011e9d7a0fec50b8a', class: "control-label", "aria-hidden": "true" }, this.text("title"))), h("div", { key: '8649873d384127bfb109459a8b523bc6a480a199', class: "dso-field-container" }, this.overlays.map((overlay) => (h("dso-selectable", { key: overlay.id, type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[overlay.id] = ref), onDsoChange: (e) => this.overlayChangeHandler(overlay, e) }, overlay.name, overlay.info ? h("p", { slot: "info" }, overlay.info) : null))))));
     }
     get host() { return this; }
     static get style() { return DsoMapOverlaysStyle0; }

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

@@ -54,7 +54,7 @@ const MarkBar = /*@__PURE__*/ proxyCustomElement(class MarkBar extends HTMLEleme
     render() {
         const current = this.current || 0;
         const totalCount = this.totalCount || 0;
-        return (h("div", { key: 'de64c956f5f0f039e949fb66525bfe13292fc344', class: "dso-mark-bar" }, h("div", { key: 'f9a28ebe0673d21b51382db70b399198980f2981', class: "dso-mark-bar-input" }, h("input", { key: '3f8ba3bcc85a1e3d457f00b4997ff14257275cff', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: 'de0a188de0580a986d97c6b183506ff503a9f840', htmlFor: "search-input" }, h("dso-icon", { key: 'c996d6ae25fd237cbe6e3432dd9820911699800b', class: "dso-search-icon", icon: "search" }), h("span", { key: '4eb8bf932a5493d4672efb1d30f5f936faa04dc0', class: "label-text" }, this.label)), h("button", { key: '4eb0be7a9c8794fe086f9cccbd5f2c3ee2422f4c', type: "button", onClick: this.handleClear }, h("dso-icon", { key: '7995d127da202d54b403c1614616e754d3996069', icon: "times" }), h("span", { key: '8584ac86467c4ed39f07cb62498a4818302de7e8', class: "sr-only" }, "Zoekopdracht legen"))), h("div", { key: 'd0a10d3218bf2c84592b793f63cbbf37c0204325', class: "dso-button-container" }, h("span", { key: 'd75c77cb216e84dd20df7b8745263aea7b33a6aa', class: "divider" }), h("button", { key: '503a2cad201543a574f5c298b981bb7610955134', type: "button", onClick: this.handlePrevious, disabled: current <= 1 }, h("dso-icon", { key: 'c2ce69b1abc65f71355fdd5681f7165d0c2680cf', icon: "chevron-up", class: "hydrated" }), h("span", { key: '573b5f49881d3d87d14650fca99efcc034714989', class: "sr-only" }, "Vorig zoekresultaat")), h("span", { key: 'caa4799ae003ce7a34430f5112ffce9b6ef22903' }, current, "/", totalCount), h("button", { key: '83cd9bc034d51cdf677a6a97a4bd170530cbf5b8', type: "button", onClick: this.handleNext, disabled: current >= totalCount }, h("dso-icon", { key: '9b7442aa4e879ae3dfa22265fbba5c115eed6aa0', icon: "chevron-down", class: "hydrated" }), h("span", { key: '1f41bec8eb4619ee7a6a2fabd205ab0cadfb446c', class: "sr-only" }, "Volgend zoekresultaat")))));
+        return (h("div", { key: 'deb83933a031988d5f74495743f1abbe3d84cf40', class: "dso-mark-bar" }, h("div", { key: '1a65becc61ce08df95c17a37c92ff9e4f31ff33c', class: "dso-mark-bar-input" }, h("input", { key: '9ee8342d4bb6ceeda2ba911205c7d7273a84877c', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: '648fa50a19895a4fcd73835924fcfd45f4f973a0', htmlFor: "search-input" }, h("dso-icon", { key: 'e67395f17d31783c93ad09acedd9ecf33e73bea9', class: "dso-search-icon", icon: "search" }), h("span", { key: '82c5531aa0b4d380b26fbf37b69664d70b51d4a5', class: "label-text" }, this.label)), h("button", { key: '3fd7109b8c5c82d9ef3bf2a4956206c493312201', type: "button", onClick: this.handleClear }, h("dso-icon", { key: '9805eda47bd6474aaea49ff000bcc56f96fae50c', icon: "times" }), h("span", { key: 'f297eedab53bdb785d495227ac673ebb3e1a3478', class: "sr-only" }, "Zoekopdracht legen"))), h("div", { key: '8713d747e9b8f04aa452da3fb83ca02dc13d7ddd', class: "dso-button-container" }, h("span", { key: '0fa36026e7014f9303210ac4f5056b736421f152', class: "divider" }), h("button", { key: '5cfd3343186de28a4774439bc559a956673af1de', type: "button", onClick: this.handlePrevious, disabled: current <= 1 }, h("dso-icon", { key: '42dbd19fef4b9c645d21c0bf8fd8f5ce82610786', icon: "chevron-up", class: "hydrated" }), h("span", { key: '6330041c4993e73125379e8bb90e6d38f4060a25', class: "sr-only" }, "Vorig zoekresultaat")), h("span", { key: '1c49f0334d34c648630f647b2bfc7ca89c115491' }, current, "/", totalCount), h("button", { key: '2fb9dc9c21f2e8c614cf4886fd47f22b2114aedc', type: "button", onClick: this.handleNext, disabled: current >= totalCount }, h("dso-icon", { key: 'e4efa23ed1c11874ac0606e44021501f4ebddad9', icon: "chevron-down", class: "hydrated" }), h("span", { key: 'c025d8dc52b7d6bcf77c38696ab05f17bbf28ec9', class: "sr-only" }, "Volgend zoekresultaat")))));
     }
     static get style() { return DsoMarkBarStyle0; }
 }, [1, "dso-mark-bar", {

package/dist/components/dso-modal.js

@@ -73,10 +73,10 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
     }
     render() {
         var _a;
-        return (h("dialog", { key: 'e9f3f64908aa9846a53ae75805fa210c4870b9d8', class: "dso-modal", role: (_a = this.dialogRole) !== null && _a !== void 0 ? _a : undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onCancel: (e) => {
+        return (h("dialog", { key: '5076ddfa0cbb1fbabeadcb338c0f5009bb87c68d', class: "dso-modal", role: (_a = this.dialogRole) !== null && _a !== void 0 ? _a : undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onCancel: (e) => {
                 e.preventDefault();
                 this.dsoClose.emit({ originalEvent: e });
-            } }, h("div", { key: '6537a33e78b15dfc32bac8a2699d2bf54e2abe1d', class: "dso-dialog", role: "document" }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.showCloseButton && (h("button", { type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, this.text("close")))))) : (h("span", { class: "sr-only", id: this.ariaId }, this.text("dialog"))), h("dso-scrollable", { key: '9a62c534ae961cd684568170c1309beaff90c20f' }, h("div", { key: 'd9f5eef59453d70504cecbdde59e3556a864c677', class: "dso-body", tabIndex: 0 }, h("slot", { key: '42efeae8512eb09d66fb1e4457b515730aece8a0', name: "body" }))), this.hasFooter && (h("div", { key: '967c39dbe11cceec7b8922ad2759f353a3219d84', class: "dso-footer" }, h("slot", { key: '1dd8152a3b944a18965d85e0216d8f0924d887db', name: "footer" }))))));
+            } }, h("div", { key: '3fef6729dae60f1f95de396d3b47700edef9693e', class: "dso-dialog", role: "document" }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.showCloseButton && (h("button", { type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, this.text("close")))))) : (h("span", { class: "sr-only", id: this.ariaId }, this.text("dialog"))), h("dso-scrollable", { key: 'e300d2a90b97012837ecd19ed908192ea8bfb9dd' }, h("div", { key: '5f89a7c75f96d35d3c06c477fe9dffddca118595', class: "dso-body", tabIndex: 0 }, h("slot", { key: '4c658380dc06b0e58117d13b601a5bce83227011', name: "body" }))), this.hasFooter && (h("div", { key: '65cb138b6827b7b11328654548fc4762549bd54d', class: "dso-footer" }, h("slot", { key: 'b3dd4c96564c32bacb71532c7f9be97f8eb41244', name: "footer" }))))));
     }
     get host() { return this; }
     static get style() { return DsoModalStyle0; }

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

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host, Fra
 import { i as isModifiedEvent } from './is-modified-event.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
-const plekinfoCardCss = "ins{text-decoration:none}ins{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#e4f1d4;border-color:#e4f1d4;color:#191919}ins a:is(.download,.download:hover,.download:focus-visible){background-image:url(\"./di.svg#download-zwart\")}ins a:is(.extern,.extern:hover,.extern:focus-visible){background-image:url(\"./di.svg#external-link-zwart\")}ins a:is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:url(\"./di.svg#call-zwart\")}ins a:is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:url(\"./di.svg#email-zwart\")}ins{box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.25)}del{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#f5d8dc;border-color:#f5d8dc;color:#191919}del a:is(.download,.download:hover,.download:focus-visible){background-image:url(\"./di.svg#download-zwart\")}del a:is(.extern,.extern:hover,.extern:focus-visible){background-image:url(\"./di.svg#external-link-zwart\")}del a:is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:url(\"./di.svg#call-zwart\")}del a:is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:url(\"./di.svg#email-zwart\")}del{text-decoration:line-through}@media screen and (min--moz-device-pixel-ratio: 0){del{font-family:sans-serif}}*,*::after,*::before{box-sizing:border-box}:host{display:block}.dso-plekinfo-card-container{padding-block:16px;padding-inline:16px;inline-size:100%}.dso-plekinfo-card-container .dso-plekinfo-card-heading{display:flex;align-items:start;column-gap:8px}@media screen and (max-width: 480px){.dso-plekinfo-card-container .dso-plekinfo-card-heading{flex-wrap:wrap}}.dso-plekinfo-card-container .dso-plekinfo-card-heading+.dso-plekinfo-card-content{margin-block-start:8px}.dso-plekinfo-card-container .dso-plekinfo-card-symbol{grid-row:span 2;margin-inline-end:8px}.dso-plekinfo-card-container:has(.dso-plekinfo-card-heading a:is(:hover,:focus-visible)){background-color:#f2f2f2}ins.dso-plekinfo-card-container:has(.dso-plekinfo-card-heading a:is(:hover,:focus-visible)){background-color:#d8e5c9}del.dso-plekinfo-card-container:has(.dso-plekinfo-card-heading a:is(:hover,:focus-visible)){background-color:#e9cdd1}:host([active]:not([active=false])) .dso-plekinfo-card-container{background-color:#e5e5e5}:host([active]:not([active=false])) ins.dso-plekinfo-card-container{background-color:#ced9bf}:host([active]:not([active=false])) del.dso-plekinfo-card-container{background-color:#ddc3c6}:host([has-symbol]) .dso-plekinfo-card-container{display:grid;grid-template-columns:1fr minmax(0, 100%)}:host([has-symbol]) .dso-plekinfo-card-container .dso-plekinfo-card-heading,:host([has-symbol]) .dso-plekinfo-card-container .dso-plekinfo-card-content{grid-column:2/-1}::slotted([slot=meta]){display:flex !important;justify-content:space-between !important;flex-shrink:0 !important;align-self:end !important}@media screen and (max-width: 480px){::slotted([slot=meta]){flex-basis:100% !important;margin-block-start:8px !important}}::slotted([slot=heading]){display:flex !important;align-items:center !important;font-size:1.125em !important;font-weight:700 !important;color:#275937 !important;line-height:1.25 !important;margin-block-end:0 !important;margin-block-start:0 !important}::slotted([slot=content]){--_dt-rich-content-margin-block:8px;--_dt-rich-content-margin-block-end:0;--_dt-rich-content-margin-block-start:0}::slotted([slot=interaction]){display:flex !important;justify-content:space-between !important;margin-inline-start:auto !important}@media screen and (max-width: 480px){::slotted([slot=interaction]){flex-basis:100% !important;margin-block-start:16px !important}}.heading-anchor{display:flex;flex-wrap:nowrap;color:#275937;text-decoration:none}.heading-anchor:hover{color:#275937;text-decoration:underline}.heading-anchor:visited{color:#275937}.heading-anchor dso-icon{flex-shrink:0;align-self:end}.heading-anchor .sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
+const plekinfoCardCss = "ins{text-decoration:none}ins{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#e4f1d4;border-color:#e4f1d4;color:#191919}ins a:is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}ins a:is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}ins a:is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}ins a:is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}ins{box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.25)}del{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#f5d8dc;border-color:#f5d8dc;color:#191919}del a:is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}del a:is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}del a:is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}del a:is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}del{text-decoration:line-through}@media screen and (min--moz-device-pixel-ratio: 0){del{font-family:sans-serif}}*,*::after,*::before{box-sizing:border-box}:host{display:block}.dso-plekinfo-card-container{padding-block:16px;padding-inline:16px;inline-size:100%}.dso-plekinfo-card-container .dso-plekinfo-card-heading{display:flex;align-items:start;column-gap:8px}@media screen and (max-width: 480px){.dso-plekinfo-card-container .dso-plekinfo-card-heading{flex-wrap:wrap}}.dso-plekinfo-card-container .dso-plekinfo-card-heading+.dso-plekinfo-card-content{margin-block-start:8px}.dso-plekinfo-card-container .dso-plekinfo-card-symbol{grid-row:span 2;margin-inline-end:8px}.dso-plekinfo-card-container:has(.dso-plekinfo-card-heading a:is(:hover,:focus-visible)){background-color:#f2f2f2}ins.dso-plekinfo-card-container:has(.dso-plekinfo-card-heading a:is(:hover,:focus-visible)){background-color:#d8e5c9}del.dso-plekinfo-card-container:has(.dso-plekinfo-card-heading a:is(:hover,:focus-visible)){background-color:#e9cdd1}:host([active]:not([active=false])) .dso-plekinfo-card-container{background-color:#e5e5e5}:host([active]:not([active=false])) ins.dso-plekinfo-card-container{background-color:#ced9bf}:host([active]:not([active=false])) del.dso-plekinfo-card-container{background-color:#ddc3c6}:host([has-symbol]) .dso-plekinfo-card-container{display:grid;grid-template-columns:1fr minmax(0, 100%)}:host([has-symbol]) .dso-plekinfo-card-container .dso-plekinfo-card-heading,:host([has-symbol]) .dso-plekinfo-card-container .dso-plekinfo-card-content{grid-column:2/-1}::slotted([slot=meta]){display:flex !important;justify-content:space-between !important;flex-shrink:0 !important;align-self:end !important}@media screen and (max-width: 480px){::slotted([slot=meta]){flex-basis:100% !important;margin-block-start:8px !important}}::slotted([slot=heading]){display:flex !important;align-items:center !important;font-size:1.125em !important;font-weight:700 !important;color:#275937 !important;line-height:1.25 !important;margin-block-end:0 !important;margin-block-start:0 !important}::slotted([slot=content]){--_dt-rich-content-margin-block:8px;--_dt-rich-content-margin-block-end:0;--_dt-rich-content-margin-block-start:0}::slotted([slot=interaction]){display:flex !important;justify-content:space-between !important;margin-inline-start:auto !important}@media screen and (max-width: 480px){::slotted([slot=interaction]){flex-basis:100% !important;margin-block-start:16px !important}}.heading-anchor{display:flex;flex-wrap:nowrap;color:#275937;text-decoration:none}.heading-anchor:hover{color:#275937;text-decoration:underline}.heading-anchor:visited{color:#275937}.heading-anchor dso-icon{flex-shrink:0;align-self:end}.heading-anchor .sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
 const DsoPlekinfoCardStyle0 = plekinfoCardCss;
 
 const WrapWijzigactie = ({ wijzigactie }, children) => {
@@ -51,7 +51,7 @@ const PlekinfoCard = /*@__PURE__*/ proxyCustomElement(class PlekinfoCard extends
     }
     render() {
         const hasSymbol = this.symbolSlottedElement !== null;
-        return (h(Host, { key: 'a2c907d0f2be52a4816c2a0c7d73449a6f1463f2', "has-symbol": hasSymbol }, h(WrapWijzigactie, { key: '712a59c849527b431093889eb75edbb54a6b6217', wijzigactie: this.wijzigactie }, h("div", { key: 'bf76d9c9dccc1bac5c20c12abc57a1a6f4cc42b2', class: "dso-plekinfo-card-symbol", hidden: !hasSymbol }, h("slot", { key: 'afcdc38b574d5422c2a93819949d1a74c88e5960', name: "symbol" })), h("div", { key: 'b4f0b7014e90ef73531a0beab46e275824e00272', class: "dso-plekinfo-card-heading" }, this.href ? (h("a", { href: this.href, target: this.targetBlank ? "_blank" : undefined, rel: this.targetBlank ? "noopener noreferrer" : undefined, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { name: "heading" }), this.targetBlank ? (h(Fragment, null, h("dso-icon", { icon: "external-link" }), h("span", { class: "sr-only" }, "(Opent andere website in nieuw tabblad)"))) : (h("dso-icon", { icon: "chevron-right" })))) : (h("slot", { name: "heading" })), this.metaSlottedElement !== null && h("slot", { key: 'f73f42353431608fdc60c62d64d30ec67fa475cf', name: "meta" }), this.interaction !== null && h("slot", { key: '5b85fbb43c071a7aee1249c9f2577a993a92defb', name: "interaction" })), h("div", { key: 'c10712fdc6e4434c726736b94d18d2b316456db1', class: "dso-plekinfo-card-content" }, h("slot", { key: 'd249a0e896e45e6c829a7b80297fcdb77ad996ce', name: "content" })))));
+        return (h(Host, { key: '332ec131f42579005a42d89342a9b32e86a6997d', "has-symbol": hasSymbol }, h(WrapWijzigactie, { key: 'e16ee664be89ae2ced9dced43cf6146c45b9c474', wijzigactie: this.wijzigactie }, h("div", { key: '3ebc696f26ef762a8b04f24c4362a234585fb71e', class: "dso-plekinfo-card-symbol", hidden: !hasSymbol }, h("slot", { key: '4ab459813050641dbdebe28928f1b2ea75667875', name: "symbol" })), h("div", { key: '317c27f7263bb7ecb4f35c3089e1f7f190f3699b', class: "dso-plekinfo-card-heading" }, this.href ? (h("a", { href: this.href, target: this.targetBlank ? "_blank" : undefined, rel: this.targetBlank ? "noopener noreferrer" : undefined, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { name: "heading" }), this.targetBlank ? (h(Fragment, null, h("dso-icon", { icon: "external-link" }), h("span", { class: "sr-only" }, "(Opent andere website in nieuw tabblad)"))) : (h("dso-icon", { icon: "chevron-right" })))) : (h("slot", { name: "heading" })), this.metaSlottedElement !== null && h("slot", { key: '8b750299b0d330f56258b7b2f00dcb3205863b8e', name: "meta" }), this.interaction !== null && h("slot", { key: 'af59489c0b08e0ce2124aeead110e81adeae1a17', name: "interaction" })), h("div", { key: '24d759810c1b7cfb5ff31661e315c4a59918ba6d', class: "dso-plekinfo-card-content" }, h("slot", { key: '4942066a5dd5265891243e8eb5b0b729d7489ba7', name: "content" })))));
     }
     get host() { return this; }
     static get style() { return DsoPlekinfoCardStyle0; }

package/dist/components/dso-plekinfo-card.js.map

@@ -1 +1 @@
-{"file":"dso-plekinfo-card.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,onIAAonI,CAAC;AAC7oI,8BAAe,eAAe;;ACqB9B,MAAM,eAAe,GAA8C,CAAC,EAAE,WAAW,EAAE,EAAE,QAAQ;IAC3F,IAAI,WAAW,KAAK,SAAS,EAAE;QAC7B,OAAO,WAAK,KAAK,EAAC,6BAA6B,IAAE,QAAQ,CAAO,CAAC;KAClE;IAED,IAAI,WAAW,KAAK,WAAW,EAAE;QAC/B,OAAO,WAAK,KAAK,EAAC,6BAA6B,IAAE,QAAQ,CAAO,CAAC;KAClE;IAED,OAAO,WAAK,KAAK,EAAC,6BAA6B,IAAE,QAAQ,CAAO,CAAC;AACnE,CAAC,CAAC;MAeW,YAAY;IALzB;;;;;;;;QAyBE,gBAAW,GAAY,KAAK,CAAC;KAyF9B;IAzEC,iBAAiB;QACf,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,MAAM,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAE3E,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;KACjF;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,gBAAgB,0CAAE,UAAU,EAAE,CAAC;QAEpC,OAAO,IAAI,CAAC,gBAAgB,CAAC;KAC9B;IAEO,iBAAiB,CAAC,CAAa;QACrC,IAAI,EAAE,CAAC,CAAC,MAAM,YAAY,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACpD,OAAO;SACR;QAED,OAAO,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;KAClG;IAED,IAAI,oBAAoB;QACtB,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;KACnD;IAED,IAAI,kBAAkB;QACpB,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;KACjD;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;KACxD;IAED,MAAM;QACJ,MAAM,SAAS,GAAG,IAAI,CAAC,oBAAoB,KAAK,IAAI,CAAC;QAErD,QACE,EAAC,IAAI,mEAAa,SAAS,IACzB,EAAC,eAAe,qDAAC,WAAW,EAAE,IAAI,CAAC,WAAW,IAC5C,4DAAK,KAAK,EAAC,0BAA0B,EAAC,MAAM,EAAE,CAAC,SAAS,IACtD,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,EACN,4DAAK,KAAK,EAAC,2BAA2B,IACnC,IAAI,CAAC,IAAI,IACR,SACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,WAAW,GAAG,QAAQ,GAAG,SAAS,EAC/C,GAAG,EAAE,IAAI,CAAC,WAAW,GAAG,qBAAqB,GAAG,SAAS,EACzD,KAAK,EAAC,gBAAgB,EACtB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,IAEzC,YAAM,IAAI,EAAC,SAAS,GAAG,EACtB,IAAI,CAAC,WAAW,IACf,kBACE,gBAAU,IAAI,EAAC,eAAe,GAAG,EACjC,YAAM,KAAK,EAAC,SAAS,8CAA+C,CACnE,KAEH,gBAAU,IAAI,EAAC,eAAe,GAAG,CAClC,CACC,KAEJ,YAAM,IAAI,EAAC,SAAS,GAAG,CACxB,EACA,IAAI,CAAC,kBAAkB,KAAK,IAAI,IAAI,6DAAM,IAAI,EAAC,MAAM,GAAG,EACxD,IAAI,CAAC,WAAW,KAAK,IAAI,IAAI,6DAAM,IAAI,EAAC,aAAa,GAAG,CACrD,EACN,4DAAK,KAAK,EAAC,2BAA2B,IACpC,6DAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACU,CACb,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/plekinfo-card/plekinfo-card.scss?tag=dso-plekinfo-card&encapsulation=shadow","src/components/plekinfo-card/plekinfo-card.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/plekinfo-card\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n\r\n@use \"~dso-toolkit/src/components/insert/insert\";\r\n@use \"~dso-toolkit/src/components/delete/delete\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.dso-plekinfo-card-container {\r\n  padding-block: units.$u2;\r\n  padding-inline: units.$u2;\r\n  inline-size: 100%;\r\n\r\n  .dso-plekinfo-card-heading {\r\n    display: flex;\r\n    align-items: start;\r\n    column-gap: units.$u1;\r\n\r\n    @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n      flex-wrap: wrap;\r\n    }\r\n  }\r\n\r\n  .dso-plekinfo-card-heading + .dso-plekinfo-card-content {\r\n    margin-block-start: units.$u1;\r\n  }\r\n\r\n  .dso-plekinfo-card-symbol {\r\n    grid-row: span 2;\r\n\r\n    margin-inline-end: units.$u1;\r\n  }\r\n\r\n  &:has(.dso-plekinfo-card-heading a:is(:hover, :focus-visible)) {\r\n    background-color: plekinfo-card.$background-color-hover;\r\n  }\r\n}\r\n\r\nins.dso-plekinfo-card-container {\r\n  &:has(.dso-plekinfo-card-heading a:is(:hover, :focus-visible)) {\r\n    background-color: plekinfo-card.$background-color-hover-voegtoe;\r\n  }\r\n}\r\n\r\ndel.dso-plekinfo-card-container {\r\n  &:has(.dso-plekinfo-card-heading a:is(:hover, :focus-visible)) {\r\n    background-color: plekinfo-card.$background-color-hover-verwijder;\r\n  }\r\n}\r\n\r\n:host([active]:not([active=\"false\"])) {\r\n  .dso-plekinfo-card-container {\r\n    background-color: plekinfo-card.$background-color-active;\r\n  }\r\n\r\n  ins.dso-plekinfo-card-container {\r\n    background-color: plekinfo-card.$background-color-active-voegtoe;\r\n  }\r\n\r\n  del.dso-plekinfo-card-container {\r\n    background-color: plekinfo-card.$background-color-active-verwijder;\r\n  }\r\n}\r\n\r\n:host([has-symbol]) {\r\n  .dso-plekinfo-card-container {\r\n    display: grid;\r\n    grid-template-columns: 1fr minmax(0, 100%);\r\n\r\n    .dso-plekinfo-card-heading,\r\n    .dso-plekinfo-card-content {\r\n      grid-column: 2 /-1;\r\n    }\r\n  }\r\n}\r\n\r\n::slotted([slot=\"meta\"]) {\r\n  display: flex !important;\r\n  justify-content: space-between !important;\r\n  flex-shrink: 0 !important;\r\n  align-self: end !important;\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n    flex-basis: 100% !important;\r\n    margin-block-start: units.$u1 !important;\r\n  }\r\n}\r\n\r\n::slotted([slot=\"heading\"]) {\r\n  display: flex !important;\r\n  align-items: center !important;\r\n\r\n  font-size: 1.125em !important;\r\n  font-weight: 700 !important;\r\n  color: colors.$bosgroen !important;\r\n  line-height: 1.25 !important;\r\n\r\n  margin-block-end: 0 !important;\r\n  margin-block-start: 0 !important;\r\n}\r\n\r\n::slotted([slot=\"content\"]) {\r\n  --_dt-rich-content-margin-block: #{units.$u1};\r\n  --_dt-rich-content-margin-block-end: 0;\r\n  --_dt-rich-content-margin-block-start: 0;\r\n}\r\n\r\n::slotted([slot=\"interaction\"]) {\r\n  display: flex !important;\r\n  justify-content: space-between !important;\r\n  margin-inline-start: auto !important;\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n    flex-basis: 100% !important;\r\n    margin-block-start: units.$u2 !important;\r\n  }\r\n}\r\n\r\n.heading-anchor {\r\n  display: flex;\r\n  flex-wrap: nowrap;\r\n\r\n  color: plekinfo-card.$heading-anchor-color;\r\n  text-decoration: none;\r\n\r\n  &:hover {\r\n    color: plekinfo-card.$heading-anchor-hover-color;\r\n    text-decoration: underline;\r\n  }\r\n\r\n  &:visited {\r\n    color: plekinfo-card.$heading-anchor-color;\r\n  }\r\n\r\n  dso-icon {\r\n    flex-shrink: 0;\r\n    align-self: end;\r\n  }\r\n\r\n  .sr-only {\r\n    @include utilities.sr-only();\r\n  }\r\n}\r\n","import {\r\n  Fragment,\r\n  h,\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Host,\r\n  Prop,\r\n  forceUpdate,\r\n  FunctionalComponent,\r\n} from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { PlekinfoCardClickEvent, PlekinfoWijzigactie } from \"./plekinfo-card.interfaces\";\r\n\r\ninterface WrapWijzigactieProps {\r\n  wijzigactie: PlekinfoWijzigactie | undefined;\r\n}\r\n\r\nconst WrapWijzigactie: FunctionalComponent<WrapWijzigactieProps> = ({ wijzigactie }, children) => {\r\n  if (wijzigactie === \"voegtoe\") {\r\n    return <ins class=\"dso-plekinfo-card-container\">{children}</ins>;\r\n  }\r\n\r\n  if (wijzigactie === \"verwijder\") {\r\n    return <del class=\"dso-plekinfo-card-container\">{children}</del>;\r\n  }\r\n\r\n  return <div class=\"dso-plekinfo-card-container\">{children}</div>;\r\n};\r\n\r\n/**\r\n * @slot symbol - An optional slot to place a symbol, representing the plekinfo item, in.\r\n * @slot heading - A slot to place the title of the card in.\r\n * @slot meta - An optional slot to place a `Label` in.\r\n * @slot content - An optional slot to place `Rich Content` in.\r\n * @slot interaction - A slot for the `SlideToggle`s elments.\r\n *\r\n */\r\n@Component({\r\n  tag: \"dso-plekinfo-card\",\r\n  styleUrl: \"plekinfo-card.scss\",\r\n  shadow: true,\r\n})\r\nexport class PlekinfoCard implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoPlekinfoCardElement;\r\n\r\n  /**\r\n   * An optional 'wijzigactie' that signals if the plekinfo on the card is added or removed.\r\n   */\r\n  @Prop({ reflect: true })\r\n  wijzigactie?: PlekinfoWijzigactie;\r\n\r\n  /**\r\n   * The URL to which the PlekinfoCard heading links.\r\n   */\r\n  @Prop({ reflect: true })\r\n  href!: string | undefined;\r\n\r\n  /**\r\n   * Opens the urls in a new window or tab\r\n   */\r\n  @Prop()\r\n  targetBlank: boolean = false;\r\n\r\n  /**\r\n   * Makes the PlekinfoCard active.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Emitted when the PlekinfoCard heading is clicked.\r\n   */\r\n  @Event()\r\n  dsoPlekinfoCardClick!: EventEmitter<PlekinfoCardClickEvent>;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  connectedCallback(): void {\r\n    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n    this.mutationObserver.observe(this.host, { attributes: true, childList: true });\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.mutationObserver?.disconnect();\r\n\r\n    delete this.mutationObserver;\r\n  }\r\n\r\n  private clickEventHandler(e: MouseEvent) {\r\n    if (!(e.target instanceof HTMLElement) || !this.href) {\r\n      return;\r\n    }\r\n\r\n    return this.dsoPlekinfoCardClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n  }\r\n\r\n  get symbolSlottedElement() {\r\n    return this.host.querySelector(\"[slot='symbol']\");\r\n  }\r\n\r\n  get metaSlottedElement() {\r\n    return this.host.querySelector(\"[slot='meta']\");\r\n  }\r\n\r\n  get interaction() {\r\n    return this.host.querySelector(\"[slot='interaction']\");\r\n  }\r\n\r\n  render() {\r\n    const hasSymbol = this.symbolSlottedElement !== null;\r\n\r\n    return (\r\n      <Host has-symbol={hasSymbol}>\r\n        <WrapWijzigactie wijzigactie={this.wijzigactie}>\r\n          <div class=\"dso-plekinfo-card-symbol\" hidden={!hasSymbol}>\r\n            <slot name=\"symbol\" />\r\n          </div>\r\n          <div class=\"dso-plekinfo-card-heading\">\r\n            {this.href ? (\r\n              <a\r\n                href={this.href}\r\n                target={this.targetBlank ? \"_blank\" : undefined}\r\n                rel={this.targetBlank ? \"noopener noreferrer\" : undefined}\r\n                class=\"heading-anchor\"\r\n                onClick={(e) => this.clickEventHandler(e)}\r\n              >\r\n                <slot name=\"heading\" />\r\n                {this.targetBlank ? (\r\n                  <>\r\n                    <dso-icon icon=\"external-link\" />\r\n                    <span class=\"sr-only\">(Opent andere website in nieuw tabblad)</span>\r\n                  </>\r\n                ) : (\r\n                  <dso-icon icon=\"chevron-right\" />\r\n                )}\r\n              </a>\r\n            ) : (\r\n              <slot name=\"heading\" />\r\n            )}\r\n            {this.metaSlottedElement !== null && <slot name=\"meta\" />}\r\n            {this.interaction !== null && <slot name=\"interaction\" />}\r\n          </div>\r\n          <div class=\"dso-plekinfo-card-content\">\r\n            <slot name=\"content\" />\r\n          </div>\r\n        </WrapWijzigactie>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-plekinfo-card.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,43IAA43I,CAAC;AACr5I,8BAAe,eAAe;;ACqB9B,MAAM,eAAe,GAA8C,CAAC,EAAE,WAAW,EAAE,EAAE,QAAQ;IAC3F,IAAI,WAAW,KAAK,SAAS,EAAE;QAC7B,OAAO,WAAK,KAAK,EAAC,6BAA6B,IAAE,QAAQ,CAAO,CAAC;KAClE;IAED,IAAI,WAAW,KAAK,WAAW,EAAE;QAC/B,OAAO,WAAK,KAAK,EAAC,6BAA6B,IAAE,QAAQ,CAAO,CAAC;KAClE;IAED,OAAO,WAAK,KAAK,EAAC,6BAA6B,IAAE,QAAQ,CAAO,CAAC;AACnE,CAAC,CAAC;MAeW,YAAY;IALzB;;;;;;;;QAyBE,gBAAW,GAAY,KAAK,CAAC;KAyF9B;IAzEC,iBAAiB;QACf,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,MAAM,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAE3E,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;KACjF;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,gBAAgB,0CAAE,UAAU,EAAE,CAAC;QAEpC,OAAO,IAAI,CAAC,gBAAgB,CAAC;KAC9B;IAEO,iBAAiB,CAAC,CAAa;QACrC,IAAI,EAAE,CAAC,CAAC,MAAM,YAAY,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACpD,OAAO;SACR;QAED,OAAO,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;KAClG;IAED,IAAI,oBAAoB;QACtB,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;KACnD;IAED,IAAI,kBAAkB;QACpB,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;KACjD;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;KACxD;IAED,MAAM;QACJ,MAAM,SAAS,GAAG,IAAI,CAAC,oBAAoB,KAAK,IAAI,CAAC;QAErD,QACE,EAAC,IAAI,mEAAa,SAAS,IACzB,EAAC,eAAe,qDAAC,WAAW,EAAE,IAAI,CAAC,WAAW,IAC5C,4DAAK,KAAK,EAAC,0BAA0B,EAAC,MAAM,EAAE,CAAC,SAAS,IACtD,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,EACN,4DAAK,KAAK,EAAC,2BAA2B,IACnC,IAAI,CAAC,IAAI,IACR,SACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,WAAW,GAAG,QAAQ,GAAG,SAAS,EAC/C,GAAG,EAAE,IAAI,CAAC,WAAW,GAAG,qBAAqB,GAAG,SAAS,EACzD,KAAK,EAAC,gBAAgB,EACtB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,IAEzC,YAAM,IAAI,EAAC,SAAS,GAAG,EACtB,IAAI,CAAC,WAAW,IACf,kBACE,gBAAU,IAAI,EAAC,eAAe,GAAG,EACjC,YAAM,KAAK,EAAC,SAAS,8CAA+C,CACnE,KAEH,gBAAU,IAAI,EAAC,eAAe,GAAG,CAClC,CACC,KAEJ,YAAM,IAAI,EAAC,SAAS,GAAG,CACxB,EACA,IAAI,CAAC,kBAAkB,KAAK,IAAI,IAAI,6DAAM,IAAI,EAAC,MAAM,GAAG,EACxD,IAAI,CAAC,WAAW,KAAK,IAAI,IAAI,6DAAM,IAAI,EAAC,aAAa,GAAG,CACrD,EACN,4DAAK,KAAK,EAAC,2BAA2B,IACpC,6DAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACU,CACb,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/plekinfo-card/plekinfo-card.scss?tag=dso-plekinfo-card&encapsulation=shadow","src/components/plekinfo-card/plekinfo-card.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/plekinfo-card\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n\r\n@use \"~dso-toolkit/src/components/insert/insert\";\r\n@use \"~dso-toolkit/src/components/delete/delete\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.dso-plekinfo-card-container {\r\n  padding-block: units.$u2;\r\n  padding-inline: units.$u2;\r\n  inline-size: 100%;\r\n\r\n  .dso-plekinfo-card-heading {\r\n    display: flex;\r\n    align-items: start;\r\n    column-gap: units.$u1;\r\n\r\n    @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n      flex-wrap: wrap;\r\n    }\r\n  }\r\n\r\n  .dso-plekinfo-card-heading + .dso-plekinfo-card-content {\r\n    margin-block-start: units.$u1;\r\n  }\r\n\r\n  .dso-plekinfo-card-symbol {\r\n    grid-row: span 2;\r\n\r\n    margin-inline-end: units.$u1;\r\n  }\r\n\r\n  &:has(.dso-plekinfo-card-heading a:is(:hover, :focus-visible)) {\r\n    background-color: plekinfo-card.$background-color-hover;\r\n  }\r\n}\r\n\r\nins.dso-plekinfo-card-container {\r\n  &:has(.dso-plekinfo-card-heading a:is(:hover, :focus-visible)) {\r\n    background-color: plekinfo-card.$background-color-hover-voegtoe;\r\n  }\r\n}\r\n\r\ndel.dso-plekinfo-card-container {\r\n  &:has(.dso-plekinfo-card-heading a:is(:hover, :focus-visible)) {\r\n    background-color: plekinfo-card.$background-color-hover-verwijder;\r\n  }\r\n}\r\n\r\n:host([active]:not([active=\"false\"])) {\r\n  .dso-plekinfo-card-container {\r\n    background-color: plekinfo-card.$background-color-active;\r\n  }\r\n\r\n  ins.dso-plekinfo-card-container {\r\n    background-color: plekinfo-card.$background-color-active-voegtoe;\r\n  }\r\n\r\n  del.dso-plekinfo-card-container {\r\n    background-color: plekinfo-card.$background-color-active-verwijder;\r\n  }\r\n}\r\n\r\n:host([has-symbol]) {\r\n  .dso-plekinfo-card-container {\r\n    display: grid;\r\n    grid-template-columns: 1fr minmax(0, 100%);\r\n\r\n    .dso-plekinfo-card-heading,\r\n    .dso-plekinfo-card-content {\r\n      grid-column: 2 /-1;\r\n    }\r\n  }\r\n}\r\n\r\n::slotted([slot=\"meta\"]) {\r\n  display: flex !important;\r\n  justify-content: space-between !important;\r\n  flex-shrink: 0 !important;\r\n  align-self: end !important;\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n    flex-basis: 100% !important;\r\n    margin-block-start: units.$u1 !important;\r\n  }\r\n}\r\n\r\n::slotted([slot=\"heading\"]) {\r\n  display: flex !important;\r\n  align-items: center !important;\r\n\r\n  font-size: 1.125em !important;\r\n  font-weight: 700 !important;\r\n  color: colors.$bosgroen !important;\r\n  line-height: 1.25 !important;\r\n\r\n  margin-block-end: 0 !important;\r\n  margin-block-start: 0 !important;\r\n}\r\n\r\n::slotted([slot=\"content\"]) {\r\n  --_dt-rich-content-margin-block: #{units.$u1};\r\n  --_dt-rich-content-margin-block-end: 0;\r\n  --_dt-rich-content-margin-block-start: 0;\r\n}\r\n\r\n::slotted([slot=\"interaction\"]) {\r\n  display: flex !important;\r\n  justify-content: space-between !important;\r\n  margin-inline-start: auto !important;\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n    flex-basis: 100% !important;\r\n    margin-block-start: units.$u2 !important;\r\n  }\r\n}\r\n\r\n.heading-anchor {\r\n  display: flex;\r\n  flex-wrap: nowrap;\r\n\r\n  color: plekinfo-card.$heading-anchor-color;\r\n  text-decoration: none;\r\n\r\n  &:hover {\r\n    color: plekinfo-card.$heading-anchor-hover-color;\r\n    text-decoration: underline;\r\n  }\r\n\r\n  &:visited {\r\n    color: plekinfo-card.$heading-anchor-color;\r\n  }\r\n\r\n  dso-icon {\r\n    flex-shrink: 0;\r\n    align-self: end;\r\n  }\r\n\r\n  .sr-only {\r\n    @include utilities.sr-only();\r\n  }\r\n}\r\n","import {\r\n  Fragment,\r\n  h,\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Host,\r\n  Prop,\r\n  forceUpdate,\r\n  FunctionalComponent,\r\n} from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { PlekinfoCardClickEvent, PlekinfoWijzigactie } from \"./plekinfo-card.interfaces\";\r\n\r\ninterface WrapWijzigactieProps {\r\n  wijzigactie: PlekinfoWijzigactie | undefined;\r\n}\r\n\r\nconst WrapWijzigactie: FunctionalComponent<WrapWijzigactieProps> = ({ wijzigactie }, children) => {\r\n  if (wijzigactie === \"voegtoe\") {\r\n    return <ins class=\"dso-plekinfo-card-container\">{children}</ins>;\r\n  }\r\n\r\n  if (wijzigactie === \"verwijder\") {\r\n    return <del class=\"dso-plekinfo-card-container\">{children}</del>;\r\n  }\r\n\r\n  return <div class=\"dso-plekinfo-card-container\">{children}</div>;\r\n};\r\n\r\n/**\r\n * @slot symbol - An optional slot to place a symbol, representing the plekinfo item, in.\r\n * @slot heading - A slot to place the title of the card in.\r\n * @slot meta - An optional slot to place a `Label` in.\r\n * @slot content - An optional slot to place `Rich Content` in.\r\n * @slot interaction - A slot for the `SlideToggle`s elments.\r\n *\r\n */\r\n@Component({\r\n  tag: \"dso-plekinfo-card\",\r\n  styleUrl: \"plekinfo-card.scss\",\r\n  shadow: true,\r\n})\r\nexport class PlekinfoCard implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoPlekinfoCardElement;\r\n\r\n  /**\r\n   * An optional 'wijzigactie' that signals if the plekinfo on the card is added or removed.\r\n   */\r\n  @Prop({ reflect: true })\r\n  wijzigactie?: PlekinfoWijzigactie;\r\n\r\n  /**\r\n   * The URL to which the PlekinfoCard heading links.\r\n   */\r\n  @Prop({ reflect: true })\r\n  href!: string | undefined;\r\n\r\n  /**\r\n   * Opens the urls in a new window or tab\r\n   */\r\n  @Prop()\r\n  targetBlank: boolean = false;\r\n\r\n  /**\r\n   * Makes the PlekinfoCard active.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Emitted when the PlekinfoCard heading is clicked.\r\n   */\r\n  @Event()\r\n  dsoPlekinfoCardClick!: EventEmitter<PlekinfoCardClickEvent>;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  connectedCallback(): void {\r\n    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n    this.mutationObserver.observe(this.host, { attributes: true, childList: true });\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.mutationObserver?.disconnect();\r\n\r\n    delete this.mutationObserver;\r\n  }\r\n\r\n  private clickEventHandler(e: MouseEvent) {\r\n    if (!(e.target instanceof HTMLElement) || !this.href) {\r\n      return;\r\n    }\r\n\r\n    return this.dsoPlekinfoCardClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n  }\r\n\r\n  get symbolSlottedElement() {\r\n    return this.host.querySelector(\"[slot='symbol']\");\r\n  }\r\n\r\n  get metaSlottedElement() {\r\n    return this.host.querySelector(\"[slot='meta']\");\r\n  }\r\n\r\n  get interaction() {\r\n    return this.host.querySelector(\"[slot='interaction']\");\r\n  }\r\n\r\n  render() {\r\n    const hasSymbol = this.symbolSlottedElement !== null;\r\n\r\n    return (\r\n      <Host has-symbol={hasSymbol}>\r\n        <WrapWijzigactie wijzigactie={this.wijzigactie}>\r\n          <div class=\"dso-plekinfo-card-symbol\" hidden={!hasSymbol}>\r\n            <slot name=\"symbol\" />\r\n          </div>\r\n          <div class=\"dso-plekinfo-card-heading\">\r\n            {this.href ? (\r\n              <a\r\n                href={this.href}\r\n                target={this.targetBlank ? \"_blank\" : undefined}\r\n                rel={this.targetBlank ? \"noopener noreferrer\" : undefined}\r\n                class=\"heading-anchor\"\r\n                onClick={(e) => this.clickEventHandler(e)}\r\n              >\r\n                <slot name=\"heading\" />\r\n                {this.targetBlank ? (\r\n                  <>\r\n                    <dso-icon icon=\"external-link\" />\r\n                    <span class=\"sr-only\">(Opent andere website in nieuw tabblad)</span>\r\n                  </>\r\n                ) : (\r\n                  <dso-icon icon=\"chevron-right\" />\r\n                )}\r\n              </a>\r\n            ) : (\r\n              <slot name=\"heading\" />\r\n            )}\r\n            {this.metaSlottedElement !== null && <slot name=\"meta\" />}\r\n            {this.interaction !== null && <slot name=\"interaction\" />}\r\n          </div>\r\n          <div class=\"dso-plekinfo-card-content\">\r\n            <slot name=\"content\" />\r\n          </div>\r\n        </WrapWijzigactie>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

@@ -20,7 +20,7 @@ const ProgressBar = /*@__PURE__*/ proxyCustomElement(class ProgressBar extends H
     render() {
         const progressNumber = Math.round(this.progress);
         const progressPercentage = `${progressNumber}%`;
-        return (h("div", { key: '7f846fa726d258a0382cc0c93f773e7594aeca4e', class: "progress" }, h("span", { key: '9c79a8ff192c24dcb1a3aeaf9879759a34c4aafc', class: "progress-bar", role: "progressbar", "aria-labelledby": "progress-bar-label", "aria-valuenow": progressNumber, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("span", { key: '9f198b3c5be9e470e07c40ada1a219b82d33617b', style: { width: `${progressPercentage}` } })), h("span", { key: '992bb15ae26fe58e92d6cf4b83b8b8d57d45fbb1', id: "progress-bar-label" }, h("slot", { key: '85ab2f029a84b3a3dca387dedf1f7bcf75ea19d2' }))));
+        return (h("div", { key: 'fadc3ce49184687a5ed6d384477679f02c443afc', class: "progress" }, h("span", { key: '36db93b5a7a749b8435df14918caa82883a134bb', class: "progress-bar", role: "progressbar", "aria-labelledby": "progress-bar-label", "aria-valuenow": progressNumber, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("span", { key: 'd69c3f5879bd06d518c63527489971bd2fa76749', style: { width: `${progressPercentage}` } })), h("span", { key: '032c53996cc324c5bfed12ab6e7ae6500d4600ea', id: "progress-bar-label" }, h("slot", { key: '08e1a0cba14ac76650c10a7175a9d66c2d9f999a' }))));
     }
     static get style() { return DsoProgressBarStyle0; }
 }, [1, "dso-progress-bar", {

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

@@ -13,7 +13,7 @@ const ProjectItem = /*@__PURE__*/ proxyCustomElement(class ProjectItem extends H
         this.__attachShadow();
     }
     render() {
-        return (h(Fragment, null, h("div", { key: '9508ed0ac57668586db56265f68beb4bee04ec38', class: "project-item-header" }, h("div", { key: '0e06b1788ae5938fec6bba83fadd1228ed6ad133', class: "project-item-title" }, h("slot", { key: 'ad43b586dfa5e85f6b3fc625db5e7361e2f57729', name: "title" }), this.label && (h("dso-label", { key: '90e0729599c9aaae5dca6e11a52c94ac85dab49f', status: "danger", compact: true }, this.label))), h("div", { key: '7ee6a221d017cf65119ac47122298d9002e3ca76', class: "project-item-actions" }, h("slot", { key: '4deccd0d8613c23efe2f3480dd6f88933a289a88', name: "actions" }))), h("div", { key: '488975fe9e9d7958eb9084b107a63a7728af95f8', class: "project-item-info" }, h("div", { key: '159b6549e1010120c3838c332d079eb6edf8944c', class: "project-item-progress" }, h("slot", { key: '91f6a74c039a94432c682a0c29fc22ed9f4909da', name: "progress" })), h("div", { key: 'ea65acdf8b4dd9b489f02a2b981ab2e22912eea5', class: "project-item-status" }, h("slot", { key: 'fe4f181848d2f7da2652c26f662dc5f7203e8197', name: "status" })))));
+        return (h(Fragment, null, h("div", { key: '6e0c6053d38b1ae483085f93e90f759fa208a2f2', class: "project-item-header" }, h("div", { key: '2a6607f9dd069a986a7d73b1bd291ca2fd9a24f9', class: "project-item-title" }, h("slot", { key: '60a40cfc0a0829c34323e04d0bd2ba0f746f4f24', name: "title" }), this.label && (h("dso-label", { key: '2e773c7f39c3270f5d83fefaea5845b98ffcab9c', status: "danger", compact: true }, this.label))), h("div", { key: 'eb1dbc6fd297d6915cbe37945441c1273c47d551', class: "project-item-actions" }, h("slot", { key: '3bd170f8ad01484f2c431ad40988e410ab21c433', name: "actions" }))), h("div", { key: '025e6dd3d764b13e5149034e2d68176db2e89b1c', class: "project-item-info" }, h("div", { key: '9ae2f8dfbad6d5c563fb384d18b4840c1d73f4fa', class: "project-item-progress" }, h("slot", { key: '46e29905b6032f1e746be0b69ca3999b95f2f5bc', name: "progress" })), h("div", { key: '92572464fcebc11cb1364463958a5e15232cec87', class: "project-item-status" }, h("slot", { key: '61a3b2d28e94afb95144fb3052e3e03192ffbd98', name: "status" })))));
     }
     static get style() { return DsoProjectItemStyle0; }
 }, [1, "dso-project-item", {

package/dist/components/dso-skiplink.js

@@ -19,7 +19,7 @@ const Skiplink = /*@__PURE__*/ proxyCustomElement(class Skiplink extends HTMLEle
         return this.dsoSkiplinkClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });
     }
     render() {
-        return (h("a", { key: '9ea0faf0f29664560824f8d4308282c6553fa59d', href: `#${this.to}`, onClick: (e) => this.clickEventHandler(e) }, this.label, h("dso-icon", { key: '47783ba800794b0e1681c78c0cd21af6319df498', icon: "chevron-right" })));
+        return (h("a", { key: '40c3c6d5b541f6c69b3dd1e13ab6120a13e89f08', href: `#${this.to}`, onClick: (e) => this.clickEventHandler(e) }, this.label, h("dso-icon", { key: 'fceb144a8534dfd1f53f3c63a50e723800086c9d', icon: "chevron-right" })));
     }
     static get style() { return DsoSkiplinkStyle0; }
 }, [1, "dso-skiplink", {

package/dist/components/dso-tabs.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, forceUpdate, h, Host } from '@stencil/core/internal/client';
 
-const tabsCss = "*,*::after,*::before{box-sizing:border-box}.tabs{border-block-end:1px solid #39870c;display:flex;gap:2px;flex-wrap:wrap;margin-block-end:24px;padding-inline-start:0}@media screen and (max-width: 767px){.tabs{border:0;display:block}}";
+const tabsCss = "*,*::after,*::before{box-sizing:border-box}:host{display:block}.tabs{border-block-end:1px solid #39870c;display:flex;gap:2px;flex-wrap:wrap;margin-block-end:24px;padding-inline-start:0}@media screen and (max-width: 767px){.tabs{border:0;display:block}}";
 const DsoTabsStyle0 = tabsCss;
 
 const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
@@ -67,7 +67,7 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
         (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: '6f2a81d22ac8cd8702205ec9677dc77aab2def53' }, h("div", { key: 'c91c2d14016e0aeec92935fc8cfe17d7e8134d0a', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, h("slot", { key: '2bd28da0f1be671d9e34d175d87fcb153cb7b806' })), h("div", { key: 'ece2325b9520401d784445c737d819aba6773f3b', role: "tabpanel", tabindex: "0" }, h("slot", { key: '9606d989fd9c6aead0175b20aff4362a67931b4c', name: "panel" }))));
+        return (h(Host, { key: 'b6060f192bc977ee552374818ef550d5ee72ae65' }, h("div", { key: 'dcd0e804fe23cfb403a13d2c6b368a30e91d0b4a', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, h("slot", { key: '39a49bfbd811053f2ef18ffd71887aaf6140300e' })), h("div", { key: 'cb472cefde18dd4833c5ff47855aa584a9a142b9', role: "tabpanel", tabindex: "0" }, h("slot", { key: '29d41ec7045e3a271aee5b612fd4f25ced544e76', name: "panel" }))));
     }
     get host() { return this; }
     static get style() { return DsoTabsStyle0; }

package/dist/components/dso-tabs.js.map

@@ -1 +1 @@
-{"file":"dso-tabs.js","mappings":";;AAAA,MAAM,OAAO,GAAG,0OAA0O,CAAC;AAC3P,sBAAe,OAAO;;MCUT,IAAI;IALjB;;;;;QAoDU,iBAAY,GAAG,CAAC,CAAgB;YACtC,IAAI,EAAE,CAAC,CAAC,MAAM,YAAY,WAAW,CAAC,EAAE;gBACtC,OAAO;aACR;YAED,QAAQ,CAAC,CAAC,GAAG;gBACX,KAAK,YAAY,CAAC;gBAClB,KAAK,WAAW;oBACd,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;oBAClC,MAAM;gBACR,KAAK,WAAW,CAAC;gBACjB,KAAK,SAAS;oBACZ,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;oBACtC,MAAM;gBACR;oBACE,OAAO;aACV;SACF,CAAC;KAwBH;IAlFC,IAAY,WAAW;;QAErB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAoB,kBAAkB,CAAC,CAAC,CAAC,MAAM,CACzF,CAAC,IAAI,EAAE,GAAG;YACR,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE;gBACjB,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;aAChB;YAED,OAAO,IAAI,CAAC;SACb,EACD,EAAE,CACH,CAAC;KACH;IAED,IAAY,QAAQ;QAClB,OAAO,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;KAC5B;IAED,IAAY,OAAO;QACjB,OAAO,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;KACtD;IAEO,cAAc,CAAC,GAAkC;QACvD,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,SAAS,EAAE,CAAC;KAClB;IAEO,sBAAsB,CAAC,WAAwB;;QACrD,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,GAAG,KAAK,GAAG,KAAK,WAAW,CAAC,CAAC;QACvE,MAAM,IAAI,GAAG,MAAA,IAAI,CAAC,WAAW,CAAC,KAAK,GAAG,CAAC,CAAC,mCAAI,IAAI,CAAC,OAAO,CAAC;QAEzD,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;KAC3B;IAEO,kBAAkB,CAAC,WAAwB;;QACjD,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,GAAG,KAAK,GAAG,KAAK,WAAW,CAAC,CAAC;QACvE,MAAM,IAAI,GAAG,MAAA,IAAI,CAAC,WAAW,CAAC,KAAK,GAAG,CAAC,CAAC,mCAAI,IAAI,CAAC,QAAQ,CAAC;QAE1D,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;KAC3B;IAsBD,iBAAiB;;QACf,MAAA,IAAI,CAAC,gBAAgB,oCAArB,IAAI,CAAC,gBAAgB,GAAK,IAAI,gBAAgB,CAAC,MAAM,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAC;QAE7E,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;KAC/D;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,gBAAgB,0CAAE,UAAU,EAAE,CAAC;KACrC;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,EAAC,OAAO,EAAE,IAAI,CAAC,YAAY,IACzD,8DAAQ,CACJ,EACN,4DAAK,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAC,GAAG,IAC/B,6DAAM,IAAI,EAAC,OAAO,GAAG,CACjB,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/tabs/tabs.scss?tag=dso-tabs&encapsulation=shadow","src/components/tabs/tabs.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/components/anchor\";\r\n\r\n@use \"~dso-toolkit/src/components/tabs/tabs.variables\" as tab-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n.tabs {\r\n  border-block-end: 1px solid colors.$grasgroen;\r\n  display: flex;\r\n  gap: 2px;\r\n  flex-wrap: wrap;\r\n  margin-block-end: tab-variables.$margin-block-end;\r\n  padding-inline-start: 0;\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n    border: 0;\r\n    display: block;\r\n  }\r\n}\r\n","import { Element, Component, h, Host, forceUpdate } from \"@stencil/core\";\r\n\r\n/**\r\n * @slot - The dso-tab elements. These should be direct children of the dso-tabs element.\r\n * @slot panel - The panel with the content for the active tab\r\n */\r\n@Component({\r\n  tag: \"dso-tabs\",\r\n  styleUrl: \"tabs.scss\",\r\n  shadow: true,\r\n})\r\nexport class Tabs {\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  @Element()\r\n  host!: HTMLDsoTabsElement;\r\n\r\n  private get enabledTabs() {\r\n    // Only enabled tabs (not disabled) are needed for setting focus via ArrowRight and ArrowLeft\r\n    return Array.from(this.host.querySelectorAll<HTMLDsoTabElement>(\":scope > dso-tab\")).reduce<HTMLDsoTabElement[]>(\r\n      (tabs, tab) => {\r\n        if (!tab.disabled) {\r\n          tabs.push(tab);\r\n        }\r\n\r\n        return tabs;\r\n      },\r\n      [],\r\n    );\r\n  }\r\n\r\n  private get firstTab() {\r\n    return this.enabledTabs[0];\r\n  }\r\n\r\n  private get lastTab() {\r\n    return this.enabledTabs[this.enabledTabs.length - 1];\r\n  }\r\n\r\n  private moveFocusToTab(tab: HTMLDsoTabElement | undefined) {\r\n    tab?._dsoFocus();\r\n  }\r\n\r\n  private moveFocusToPreviousTab(focussedTab: HTMLElement) {\r\n    const index = this.enabledTabs.findIndex((tab) => tab === focussedTab);\r\n    const next = this.enabledTabs[index - 1] ?? this.lastTab;\r\n\r\n    this.moveFocusToTab(next);\r\n  }\r\n\r\n  private moveFocusToNextTab(focussedTab: HTMLElement) {\r\n    const index = this.enabledTabs.findIndex((tab) => tab === focussedTab);\r\n    const next = this.enabledTabs[index + 1] ?? this.firstTab;\r\n\r\n    this.moveFocusToTab(next);\r\n  }\r\n\r\n  // Keep track of tabs to set focus on next or previous enabled (not disabled) tab.\r\n  private keyUpHandler = (e: KeyboardEvent) => {\r\n    if (!(e.target instanceof HTMLElement)) {\r\n      return;\r\n    }\r\n\r\n    switch (e.key) {\r\n      case \"ArrowRight\":\r\n      case \"ArrowDown\":\r\n        this.moveFocusToNextTab(e.target);\r\n        break;\r\n      case \"ArrowLeft\":\r\n      case \"ArrowUp\":\r\n        this.moveFocusToPreviousTab(e.target);\r\n        break;\r\n      default:\r\n        return;\r\n    }\r\n  };\r\n\r\n  connectedCallback(): void {\r\n    this.mutationObserver ??= new MutationObserver(() => forceUpdate(this.host));\r\n\r\n    this.mutationObserver.observe(this.host, { childList: true });\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.mutationObserver?.disconnect();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class=\"tabs\" role=\"tablist\" onKeyUp={this.keyUpHandler}>\r\n          <slot />\r\n        </div>\r\n        <div role=\"tabpanel\" tabindex=\"0\">\r\n          <slot name=\"panel\" />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-tabs.js","mappings":";;AAAA,MAAM,OAAO,GAAG,8PAA8P,CAAC;AAC/Q,sBAAe,OAAO;;MCUT,IAAI;IALjB;;;;;QAoDU,iBAAY,GAAG,CAAC,CAAgB;YACtC,IAAI,EAAE,CAAC,CAAC,MAAM,YAAY,WAAW,CAAC,EAAE;gBACtC,OAAO;aACR;YAED,QAAQ,CAAC,CAAC,GAAG;gBACX,KAAK,YAAY,CAAC;gBAClB,KAAK,WAAW;oBACd,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;oBAClC,MAAM;gBACR,KAAK,WAAW,CAAC;gBACjB,KAAK,SAAS;oBACZ,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;oBACtC,MAAM;gBACR;oBACE,OAAO;aACV;SACF,CAAC;KAwBH;IAlFC,IAAY,WAAW;;QAErB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAoB,kBAAkB,CAAC,CAAC,CAAC,MAAM,CACzF,CAAC,IAAI,EAAE,GAAG;YACR,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE;gBACjB,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;aAChB;YAED,OAAO,IAAI,CAAC;SACb,EACD,EAAE,CACH,CAAC;KACH;IAED,IAAY,QAAQ;QAClB,OAAO,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;KAC5B;IAED,IAAY,OAAO;QACjB,OAAO,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;KACtD;IAEO,cAAc,CAAC,GAAkC;QACvD,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,SAAS,EAAE,CAAC;KAClB;IAEO,sBAAsB,CAAC,WAAwB;;QACrD,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,GAAG,KAAK,GAAG,KAAK,WAAW,CAAC,CAAC;QACvE,MAAM,IAAI,GAAG,MAAA,IAAI,CAAC,WAAW,CAAC,KAAK,GAAG,CAAC,CAAC,mCAAI,IAAI,CAAC,OAAO,CAAC;QAEzD,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;KAC3B;IAEO,kBAAkB,CAAC,WAAwB;;QACjD,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,GAAG,KAAK,GAAG,KAAK,WAAW,CAAC,CAAC;QACvE,MAAM,IAAI,GAAG,MAAA,IAAI,CAAC,WAAW,CAAC,KAAK,GAAG,CAAC,CAAC,mCAAI,IAAI,CAAC,QAAQ,CAAC;QAE1D,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;KAC3B;IAsBD,iBAAiB;;QACf,MAAA,IAAI,CAAC,gBAAgB,oCAArB,IAAI,CAAC,gBAAgB,GAAK,IAAI,gBAAgB,CAAC,MAAM,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAC;QAE7E,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;KAC/D;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,gBAAgB,0CAAE,UAAU,EAAE,CAAC;KACrC;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,EAAC,OAAO,EAAE,IAAI,CAAC,YAAY,IACzD,8DAAQ,CACJ,EACN,4DAAK,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAC,GAAG,IAC/B,6DAAM,IAAI,EAAC,OAAO,GAAG,CACjB,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/tabs/tabs.scss?tag=dso-tabs&encapsulation=shadow","src/components/tabs/tabs.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/components/anchor\";\r\n\r\n@use \"~dso-toolkit/src/components/tabs/tabs.variables\" as tab-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.tabs {\r\n  border-block-end: 1px solid colors.$grasgroen;\r\n  display: flex;\r\n  gap: 2px;\r\n  flex-wrap: wrap;\r\n  margin-block-end: tab-variables.$margin-block-end;\r\n  padding-inline-start: 0;\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n    border: 0;\r\n    display: block;\r\n  }\r\n}\r\n","import { Element, Component, h, Host, forceUpdate } from \"@stencil/core\";\r\n\r\n/**\r\n * @slot - The dso-tab elements. These should be direct children of the dso-tabs element.\r\n * @slot panel - The panel with the content for the active tab\r\n */\r\n@Component({\r\n  tag: \"dso-tabs\",\r\n  styleUrl: \"tabs.scss\",\r\n  shadow: true,\r\n})\r\nexport class Tabs {\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  @Element()\r\n  host!: HTMLDsoTabsElement;\r\n\r\n  private get enabledTabs() {\r\n    // Only enabled tabs (not disabled) are needed for setting focus via ArrowRight and ArrowLeft\r\n    return Array.from(this.host.querySelectorAll<HTMLDsoTabElement>(\":scope > dso-tab\")).reduce<HTMLDsoTabElement[]>(\r\n      (tabs, tab) => {\r\n        if (!tab.disabled) {\r\n          tabs.push(tab);\r\n        }\r\n\r\n        return tabs;\r\n      },\r\n      [],\r\n    );\r\n  }\r\n\r\n  private get firstTab() {\r\n    return this.enabledTabs[0];\r\n  }\r\n\r\n  private get lastTab() {\r\n    return this.enabledTabs[this.enabledTabs.length - 1];\r\n  }\r\n\r\n  private moveFocusToTab(tab: HTMLDsoTabElement | undefined) {\r\n    tab?._dsoFocus();\r\n  }\r\n\r\n  private moveFocusToPreviousTab(focussedTab: HTMLElement) {\r\n    const index = this.enabledTabs.findIndex((tab) => tab === focussedTab);\r\n    const next = this.enabledTabs[index - 1] ?? this.lastTab;\r\n\r\n    this.moveFocusToTab(next);\r\n  }\r\n\r\n  private moveFocusToNextTab(focussedTab: HTMLElement) {\r\n    const index = this.enabledTabs.findIndex((tab) => tab === focussedTab);\r\n    const next = this.enabledTabs[index + 1] ?? this.firstTab;\r\n\r\n    this.moveFocusToTab(next);\r\n  }\r\n\r\n  // Keep track of tabs to set focus on next or previous enabled (not disabled) tab.\r\n  private keyUpHandler = (e: KeyboardEvent) => {\r\n    if (!(e.target instanceof HTMLElement)) {\r\n      return;\r\n    }\r\n\r\n    switch (e.key) {\r\n      case \"ArrowRight\":\r\n      case \"ArrowDown\":\r\n        this.moveFocusToNextTab(e.target);\r\n        break;\r\n      case \"ArrowLeft\":\r\n      case \"ArrowUp\":\r\n        this.moveFocusToPreviousTab(e.target);\r\n        break;\r\n      default:\r\n        return;\r\n    }\r\n  };\r\n\r\n  connectedCallback(): void {\r\n    this.mutationObserver ??= new MutationObserver(() => forceUpdate(this.host));\r\n\r\n    this.mutationObserver.observe(this.host, { childList: true });\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.mutationObserver?.disconnect();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class=\"tabs\" role=\"tablist\" onKeyUp={this.keyUpHandler}>\r\n          <slot />\r\n        </div>\r\n        <div role=\"tabpanel\" tabindex=\"0\">\r\n          <slot name=\"panel\" />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/dso-tree-view.js

@@ -198,7 +198,7 @@ const TreeView = /*@__PURE__*/ proxyCustomElement(class TreeView extends HTMLEle
     }
     render() {
         var _a;
-        return (h("div", { key: '68895ed09b3f33a24917258d540d09b2fac123a1', id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: (element) => (this.tree = element) }, h("ul", { key: '2757425abdfb47e7d5beeca31274be4694329d8d', role: "tree", "aria-label": "Objectenboom" }, (_a = this.collection) === null || _a === void 0 ? void 0 : _a.map((item, index) => (h(DsoTreeItem, { owner: this, ancestors: [], item: item, index: index, level: 1, setSize: this.collection.length }))))));
+        return (h("div", { key: '47e48fb5f1c83bda8a9ef8809f833c9f9ab6e2bc', id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: (element) => (this.tree = element) }, h("ul", { key: '53a0949638693abb7bc815696307bb131ebf995d', role: "tree", "aria-label": "Objectenboom" }, (_a = this.collection) === null || _a === void 0 ? void 0 : _a.map((item, index) => (h(DsoTreeItem, { owner: this, ancestors: [], item: item, index: index, level: 1, setSize: this.collection.length }))))));
     }
     static get style() { return DsoTreeViewStyle0; }
 }, [1, "dso-tree-view", {

package/dist/components/dso-viewer-grid.js

@@ -278,7 +278,7 @@ const ViewerGrid = /*@__PURE__*/ proxyCustomElement(class ViewerGrid extends HTM
     }
     render() {
         const tabLabels = this.mode === "vdk" ? viewerGridVdkTabs : viewerGridVrkTabs;
-        return (h(Fragment, null, this.tabView && (h("nav", { key: 'd5873dcccbb0e3924ef7faa1f5ddbb42d1ac409c', class: "dso-navbar" }, h("ul", { key: 'c56fc8fefe943280b371173a98e8efe06e7c42a4', class: "dso-nav dso-nav-sub" }, tabLabels.map((tab) => (h("li", { key: tab, class: clsx({ "dso-active": this.activeTab === tab }) }, h("button", { type: "button", class: "dso-tertiary", onClick: () => this.switchActiveTab(tab) }, viewerGridTabLabelMap[tab]))))))), (!this.tabView || (this.tabView && (this.activeTab === "main" || this.activeTab === "search"))) && (h(MainPanel, { key: 'fc81d5e7a184c57fdc167aa4446d533079c553f4', mode: this.mode, tabView: this.tabView, mainSize: this.mainSize, documentPanelOpen: this.documentPanelOpen, mainPanelExpanded: this.mainPanelExpanded, mainPanelHidden: this.mainPanelHidden, shrinkMain: this.emitShrinkMain, expandMain: this.emitExpandMain, toggleMainPanel: this.toggleMainPanel, dsoMainSizeChangeAnimationEnd: this.dsoMainSizeChangeAnimationEnd })), h(Filterpanel, { key: 'bf4ee43c574db2ffe1a5b19444a6c2c0fbd5a562', ref: (element) => (this.filterpanel = element), onApply: this.handleFilterpanelApply, onCancel: this.handleFilterpanelCancel }), (!this.tabView || (this.tabView && this.activeTab === "map")) && (h("div", { key: '6bb7a4e5ffc92664d3ec41e193b9060a5d9fee7d', class: "map", ref: (element) => (this.mapElement = element) }, h("slot", { key: 'b90a125e730e877462178784a6f643ee9d140da3', name: "map" }))), ((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === "document")) && (h(DocumentPanel, { key: 'b7c0df6c3cedb78dfc86308496c532bd240dc354', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), h(Overlay, { key: 'd4e9cb92bb22d2e8169ddc8535f316d174753c6d', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) })));
+        return (h(Fragment, null, this.tabView && (h("nav", { key: '4685452d9d8300115e48477db5adedb1d21f7856', class: "dso-navbar" }, h("ul", { key: '8b011fabf713a7d4c7b1b24a766617204a36a968', class: "dso-nav dso-nav-sub" }, tabLabels.map((tab) => (h("li", { key: tab, class: clsx({ "dso-active": this.activeTab === tab }) }, h("button", { type: "button", class: "dso-tertiary", onClick: () => this.switchActiveTab(tab) }, viewerGridTabLabelMap[tab]))))))), (!this.tabView || (this.tabView && (this.activeTab === "main" || this.activeTab === "search"))) && (h(MainPanel, { key: '29d464007da2d5fa4bf798ceab8ec6a8533a0cd4', mode: this.mode, tabView: this.tabView, mainSize: this.mainSize, documentPanelOpen: this.documentPanelOpen, mainPanelExpanded: this.mainPanelExpanded, mainPanelHidden: this.mainPanelHidden, shrinkMain: this.emitShrinkMain, expandMain: this.emitExpandMain, toggleMainPanel: this.toggleMainPanel, dsoMainSizeChangeAnimationEnd: this.dsoMainSizeChangeAnimationEnd })), h(Filterpanel, { key: 'b3ae44d60ab458a19653ea82e516490d5d88422e', ref: (element) => (this.filterpanel = element), onApply: this.handleFilterpanelApply, onCancel: this.handleFilterpanelCancel }), (!this.tabView || (this.tabView && this.activeTab === "map")) && (h("div", { key: 'ce69794078b4df7b2c6476a6e0e4355027eaffc8', class: "map", ref: (element) => (this.mapElement = element) }, h("slot", { key: '00427952c67565a419442b722e222bdd83948cde', name: "map" }))), ((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === "document")) && (h(DocumentPanel, { key: '1c3bde45c75629339eb9153cb9c522a80150e17a', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), h(Overlay, { key: '01563fb4c677ee18c39d2498ce378b1ac85b1e87', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) })));
     }
     get host() { return this; }
     static get watchers() { return {

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

@@ -1818,7 +1818,7 @@ const DocumentComponentDemo = /*@__PURE__*/ proxyCustomElement(class DocumentCom
     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 watchers() { return {
         "jsonFile": ["jsonFileWatcher"],

package/dist/components/icon.js

@@ -665,7 +665,7 @@ const Icon = /*@__PURE__*/ proxyCustomElement(class Icon extends HTMLElement {
             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 style() { return DsoIconStyle0; }