@dso-toolkit/core 62.29.0 → 62.30.0

package/dist/cjs/dso-card-container.cjs.entry.js

@@ -13,7 +13,7 @@ const CardContainer = class {
         this.mode = "list";
     }
     render() {
-        return (index.h(index.Fragment, null, this.mode === "list" && (index.h("ul", { key: '6dc72f5395a0cdcb8fd11a2882ae94d946d14f06', class: "dso-card-list" }, index.h("slot", { key: 'e2c5ab66a35ae0db798bec1e62e382c5be4c8ff7' }))), this.mode === "grid" && (index.h("div", { key: '4a6d756341eaf9f3d79f1ee07bf09831669bfaa8', class: "dso-card-grid" }, index.h("slot", { key: '676e0db13a13bfaad87a0d5894038539c43e09c8' })))));
+        return (index.h(index.Fragment, null, this.mode === "list" && (index.h("ul", { key: '274f28d7b6fb8b9c0d35d48fbb3badcce3db6a77', class: "dso-card-list" }, index.h("slot", { key: '8cc91f5bafb570671f0f305804d71bf386420e5d' }))), this.mode === "grid" && (index.h("div", { key: '7fb30a76aba0d22cf2c474ba0a54d5985efd4519', class: "dso-card-grid" }, index.h("slot", { key: '3f208ae84706f29c469f31effd0d7649be5aa543' })))));
     }
 };
 CardContainer.style = DsoCardContainerStyle0;

package/dist/cjs/dso-card.cjs.entry.js

@@ -66,9 +66,9 @@ const Card = class {
     render() {
         const isSelectable = this.selectableSlottedElement !== null;
         const hasImage = this.imageSlottedElement !== null;
-        return (index.h(index.Host, { key: '16df08d7deb23d44de3919a212da749eb24b2aa3', onClick: (e) => this.clickEventHandler(e), "is-selectable": isSelectable, "has-image": hasImage }, index.h("div", { key: '06f68ba992964e076cc91b1008b3d90654660eb8', class: "dso-card-selectable", hidden: !isSelectable }, index.h("slot", { key: 'fdf924e13b4be544bd96999592a2d9c1fca43b93', name: "selectable" })), index.h("div", { key: '4e788d7258092d3c8b648502fa215a0286454cef', class: "dso-card-image", hidden: !hasImage }, index.h("slot", { key: '48f5c3ccfcc61d72a33a4f3b596cea0f766a328d', name: "image" })), index.h("div", { key: 'c2baf8f68141776219211d78c610312b4979b5f6', class: "dso-card-heading" }, this.headingSlottedElement instanceof HTMLAnchorElement || !this.href ? (index.h("slot", { name: "heading" })) : (((!this.mode || !["download", "extern"].includes(this.mode)) && (index.h("a", { href: this.href, class: "heading-anchor" }, index.h("slot", { name: "heading" }), index.h("dso-icon", { icon: "chevron-right" })))) ||
+        return (index.h(index.Host, { key: 'aa243fc06e00c3f93ec6f75e516a4f3c16dd6681', onClick: (e) => this.clickEventHandler(e), "is-selectable": isSelectable, "has-image": hasImage }, index.h("div", { key: 'b9e52fb2a05cf2af58507b9d9ece0865788bb404', class: "dso-card-selectable", hidden: !isSelectable }, index.h("slot", { key: 'ce472bb5847d4ef27ec223f4906575b928676908', name: "selectable" })), index.h("div", { key: '7c07d63522fe54adba3f1c1d03db4c6fd59a6535', class: "dso-card-image", hidden: !hasImage }, index.h("slot", { key: '717f5ea5872fb1c31330e97b66860d35e8e30e11', name: "image" })), index.h("div", { key: 'c714b7696b615fa3f1ca6993abc9fcc1ce9a133f', class: "dso-card-heading" }, this.headingSlottedElement instanceof HTMLAnchorElement || !this.href ? (index.h("slot", { name: "heading" })) : (((!this.mode || !["download", "extern"].includes(this.mode)) && (index.h("a", { href: this.href, class: "heading-anchor" }, index.h("slot", { name: "heading" }), index.h("dso-icon", { icon: "chevron-right" })))) ||
             (this.mode === "extern" && (index.h("a", { href: this.href, class: "heading-anchor", target: "_blank", rel: "noopener noreferrer" }, index.h("slot", { name: "heading" }), index.h("dso-icon", { icon: "external-link" }), index.h("span", { class: "sr-only" }, "(Opent andere website in nieuw tabblad)")))) ||
-            (this.mode === "download" && (index.h("a", { href: this.href, class: "heading-anchor" }, index.h("slot", { name: "heading" }), index.h("dso-icon", { icon: "download" }))))), this.interactionsSlottedElement !== null && index.h("slot", { key: 'd6885f759a3ac7e44dd44aa5e3a0107dde02a640', name: "interactions" })), index.h("div", { key: '61dc016e0ac2a82da7555e3c3df8f61104e37c49', class: "dso-card-content" }, index.h("slot", { key: 'abe3a8a00a3744f456b65fb4d8c6f7be026a68be', name: "content" }))));
+            (this.mode === "download" && (index.h("a", { href: this.href, class: "heading-anchor" }, index.h("slot", { name: "heading" }), index.h("dso-icon", { icon: "download" }))))), this.interactionsSlottedElement !== null && index.h("slot", { key: '5bbd2a3dcb14103ee26ddd3a701c75194e46cb34', name: "interactions" })), index.h("div", { key: '29cd3bb581a11a53f1790a92d5cff9a39b933873', class: "dso-card-content" }, index.h("slot", { key: '925b422a88d02f47e3f568ae28c7dd5ec10d63e6', name: "content" }))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/dso-date-picker-legacy.cjs.entry.js

@@ -687,14 +687,14 @@ const DsoDatePickerLegacy = class {
         if (maxDate) {
             maxYear = Math.min(maxYear, maxDate.getFullYear());
         }
-        return (index.h(index.Host, { key: 'b3d2e7c01f27e48d26ca81c369d05a45e094c832' }, index.h("div", { key: 'adcc83d03b59da99459daad8d196100519ae8598', class: { "dso-date": true, "dso-visible": this.visible } }, index.h("div", { key: '3c8e690cd886af5c9c45f93696b9ebeb376c7035', class: "dso-date__input-wrapper" }, index.h("input", { key: '7035facb84ae39d5539d05e055f7a5faee73c012', 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) }), index.h("button", { key: 'b2edba4d4c5743db852290e753b52d77ef123950', type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: (element) => (this.datePickerLegacyButton = element) }, index.h("span", { key: '8670a2db8ed7523ac5eb3d1a58235e5a0cc8289f', class: "dso-date__toggle-icon" }, index.h("dso-icon", { key: 'f7212888038a682fe74e8f8e6e84221a49f4cb28', icon: "calendar" })), index.h("span", { key: 'bd9b68a6957d97c0c16159a2a08a348463ca12b5', class: "dso-date__vhidden" }, this.localization.buttonLabel, formattedDate && (index.h("span", { key: '1f77a53aad38689238da7195247f0c3bbfc2b0d6' }, ", ", this.localization.selectedDateMessage, " ", formattedDate))))), index.h("div", { key: 'a52db3244f796435c39553e7b94fd3dfa48e1935', class: {
+        return (index.h(index.Host, { key: 'bd45a450559cde32c9fce77d7996efda0d3628cf' }, index.h("div", { key: '37ed94d8c7dd2897e6c1e4864b987bf54e1d6f46', class: { "dso-date": true, "dso-visible": this.visible } }, index.h("div", { key: 'be724e6c87603154090a79d8b4b82af81825c92f', class: "dso-date__input-wrapper" }, index.h("input", { key: '916104bf00c328759d3e187da42590dd1da0f191', 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) }), index.h("button", { key: '67e1ade9d1a5e77c4b8fb6cbbbd2e60167fd4b56', type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: (element) => (this.datePickerLegacyButton = element) }, index.h("span", { key: '3b04dfb08f11d2af4574691d6c7f78712e1618f3', class: "dso-date__toggle-icon" }, index.h("dso-icon", { key: 'b74e8e95543de74cccd20d7b664bc94f80647a22', icon: "calendar" })), index.h("span", { key: 'bc6451497fb2ead77da282ea8a4d2e8015d1d435', class: "dso-date__vhidden" }, this.localization.buttonLabel, formattedDate && (index.h("span", { key: '4a1a282f61aafe19b5e046af1aaadb5029bd8c64' }, ", ", this.localization.selectedDateMessage, " ", formattedDate))))), index.h("div", { key: 'f311dd98c1f9f453c66d9f8d8d37ed76827e1ef8', 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 }, index.h("div", { key: '078d2aa2ac865a1d49a2c22c19da137969a3650b', class: "dso-date__dialog-content", onKeyDown: this.handleEscKey }, index.h("div", { key: '48f76b95bb6a37ea742bcf6bed4c6005eba839a4', class: "dso-date__vhidden dso-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), index.h("div", { key: 'af746900f6e52f32de832b87a176593e2746cd64', class: "dso-date__mobile", onFocusin: this.disableActiveFocus }, index.h("label", { key: '6cdc84ecf6372ac9097b8bf5dd643f499691cf61', class: "dso-date__mobile-heading" }, this.localization.calendarHeading), index.h("button", { key: '05d3293761177ba271c6724b7226ab573962f2d1', class: "dso-date__close", ref: (element) => (this.firstFocusableElement = element), onKeyDown: this.handleFirstFocusableKeydown, onClick: () => this.hide(), type: "button" }, index.h("dso-icon", { key: '7e5df245b7724e4db5806d5f08638cad0adfb0ef', icon: "times" }), index.h("span", { key: 'd21e9fb1eff589d88d16ad47e08f220c3d5530dd', class: "dso-date__vhidden" }, this.localization.closeLabel))), index.h("div", { key: '3d5cb8f2fb76df5de03ffe060a312b79128867a0', class: "dso-date__header", onFocusin: this.disableActiveFocus }, index.h("div", { key: '559c1774017da99d78f6d11404fa441cbda497d8' }, index.h("h2", { key: '9e015f5178718c3707c6e28ee9edb51671dacbc4', id: this.dialogLabelId, class: "dso-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], " ", this.focusedDay.getFullYear()), index.h("label", { key: '2699da4bbdd56a8508fdc1192318ceb2a2b61600', htmlFor: this.monthSelectId, class: "dso-date__vhidden" }, this.localization.monthSelectLabel), index.h("div", { key: '8d85382cb79adc212769b43dce0c63e844ac1288', class: "dso-date__select" }, index.h("select", { key: '7e8f7367d3eea300587b0e6d113a482691fd08fe', 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 }, index.h("div", { key: '2a9717a7de164e80557ae31ebe85f57ad83c273e', class: "dso-date__dialog-content", onKeyDown: this.handleEscKey }, index.h("div", { key: '05aebb2d40c5df0c3aee91678624c16522a49875', class: "dso-date__vhidden dso-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), index.h("div", { key: 'd5f1eb761cc9619319bd585255b5dc136ebbd4f7', class: "dso-date__mobile", onFocusin: this.disableActiveFocus }, index.h("label", { key: '7d6c0c8f5df3420e1f5f4082dff4d885a12739c2', class: "dso-date__mobile-heading" }, this.localization.calendarHeading), index.h("button", { key: 'b0713eab9d8bea21a83f34050e00ab33ff517dfd', class: "dso-date__close", ref: (element) => (this.firstFocusableElement = element), onKeyDown: this.handleFirstFocusableKeydown, onClick: () => this.hide(), type: "button" }, index.h("dso-icon", { key: '96285bc4d5dc3c236a0775ae89f5d8d170b30df6', icon: "times" }), index.h("span", { key: 'e7224bd3445123610a1505f28ad0eda52e4579cf', class: "dso-date__vhidden" }, this.localization.closeLabel))), index.h("div", { key: '038e057a356a9348e6ac1622da6eb06c8cffe8a3', class: "dso-date__header", onFocusin: this.disableActiveFocus }, index.h("div", { key: 'ab60bd0dabaa748eb1156aaa1a8f9d6f14acabfd' }, index.h("h2", { key: 'ec61251ead3f2da8313ef6152e4d391cad3107de', id: this.dialogLabelId, class: "dso-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], " ", this.focusedDay.getFullYear()), index.h("label", { key: '9257ef291253ceeabd91d43767b8b5bac199cf9c', htmlFor: this.monthSelectId, class: "dso-date__vhidden" }, this.localization.monthSelectLabel), index.h("div", { key: '4146ccdd8adf69fc5a5e363ac861737572f2cb24', class: "dso-date__select" }, index.h("select", { key: 'aee34d205c9b151c5ecf64c95a7612608f83d56d', 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$1 = this.localization.monthNames.indexOf(month);
             return (index.h("option", { key: month, value: index$1, selected: index$1 === focusedMonth }, month));
-        })), index.h("div", { key: '3aec4bfa9aed416549469c774ca7990334986abb', class: "dso-date__select-label", "aria-hidden": "true" }, index.h("span", { key: '654fbd89bd61af259af4a4f798f55f450efd8c91' }, this.localization.monthNamesShort[focusedMonth]), index.h("dso-icon", { key: '8d11e6d7391bed1065c9b2c0ee44f1f6dc0bed73', icon: "chevron-down" }))), index.h("label", { key: 'c78b8385eda7cfcc2695f0282382ac5aad249f77', htmlFor: this.yearSelectId, class: "dso-date__vhidden" }, this.localization.yearSelectLabel), index.h("div", { key: '63b47ea8b8ca5a74ed874f4f9ed733174bb48370', class: "dso-date__select" }, index.h("select", { key: '591e66e848ec4fae139fdccacc8528dec6170de1', id: this.yearSelectId, class: "dso-date__select--year", onChange: this.handleYearSelect }, range(minYear, maxYear).map((year) => (index.h("option", { key: year, selected: year === focusedYear }, year)))), index.h("div", { key: 'f977ee13bda31f9ac716f43fa5eb8ec06296d2e9', class: "dso-date__select-label", "aria-hidden": "true" }, index.h("span", { key: 'e3ecb3b26f76beffb16bf90a2c261e50511ba396' }, this.focusedDay.getFullYear()), index.h("dso-icon", { key: 'd58cbe75109f9590e037bd215f549b85c32d0c80', icon: "chevron-down" })))), index.h("div", { key: '5480551f8f0f4a61ea6e74bde86063eb581272d1', class: "dso-date__nav" }, index.h("button", { key: '8283614fe659f5ac42aaaaaf519aeeaa8285779b', class: "dso-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, index.h("dso-icon", { key: '4f34550c65c77e1b51ba1c6a8ae8761641f07df5', icon: "chevron-left" }), index.h("span", { key: 'd7a6cb5244d940146bcc9dd805f98ad5f3f598d8', class: "dso-date__vhidden" }, this.localization.prevMonthLabel)), index.h("button", { key: '087cc800c8f71573085cb286573a577170ff6fda', class: "dso-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, index.h("dso-icon", { key: '1d475a20f501a7b6584441df913b331aa511ce1e', icon: "chevron-right" }), index.h("span", { key: 'f30e4ee5c60cd16202295988021181ddaa61dd99', class: "dso-date__vhidden" }, this.localization.nextMonthLabel)))), index.h(DatePickerLegacyMonth, { key: '83bdd8b89200fd9efccf36cd84830d24341eb525', 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 }))))));
+        })), index.h("div", { key: '0e3bb9e11abb2befa3f8d8fe9fdbef1a882fb572', class: "dso-date__select-label", "aria-hidden": "true" }, index.h("span", { key: 'a99e4edb857825e983defd70faa488fbb63e7d5d' }, this.localization.monthNamesShort[focusedMonth]), index.h("dso-icon", { key: '8dee7f423786a3c780c6d13cf95a47e4543d5a70', icon: "chevron-down" }))), index.h("label", { key: 'd3e756961b5f79283413eb9ccea100df638ffe0d', htmlFor: this.yearSelectId, class: "dso-date__vhidden" }, this.localization.yearSelectLabel), index.h("div", { key: '559919bc0bc74966743cf43421282cfc4982eb11', class: "dso-date__select" }, index.h("select", { key: '935763d554bf2b3b317ee68dd658a2d66fd1682b', id: this.yearSelectId, class: "dso-date__select--year", onChange: this.handleYearSelect }, range(minYear, maxYear).map((year) => (index.h("option", { key: year, selected: year === focusedYear }, year)))), index.h("div", { key: 'f10faac2bcefe12c699ba01ead2a31e3e72e640c', class: "dso-date__select-label", "aria-hidden": "true" }, index.h("span", { key: '769212719df55fe4f0cd3f2f59e613de50cbaf28' }, this.focusedDay.getFullYear()), index.h("dso-icon", { key: '776d3b6f61f44f716a799d97f7d8f79a6ff24472', icon: "chevron-down" })))), index.h("div", { key: 'e91c90ca602bfbaa80087e0bc6588997ce83bc90', class: "dso-date__nav" }, index.h("button", { key: '74552a754ca4fbac07745a657cdf7ba75941a0e0', class: "dso-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, index.h("dso-icon", { key: '87679302c3abd7e21e782d6d8803bfbfbb1b4769', icon: "chevron-left" }), index.h("span", { key: 'df8e75eeca089cd3857e47417373a4e61c5db7af', class: "dso-date__vhidden" }, this.localization.prevMonthLabel)), index.h("button", { key: 'b70bf53ab32c11d9bda8081a02b997afa53cc8af', class: "dso-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, index.h("dso-icon", { key: '4eebf160fff4a8f34fb87e06e6179b55c189dc1e', icon: "chevron-right" }), index.h("span", { key: '3c7a277b5479974a86c115fe03ee96bc5b784003', class: "dso-date__vhidden" }, this.localization.nextMonthLabel)))), index.h(DatePickerLegacyMonth, { key: 'ccdd4d209778a9cb46b595599037dec9a6642fe6', 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 index.getElement(this); }
 };

package/dist/cjs/dso-date-picker.cjs.entry.js

@@ -141,7 +141,7 @@ const DsoDatePicker = class {
     }
     render() {
         var _a;
-        return (index.h("input", { key: '362ca534eec500da8a2a736a93e96fc7437e72bf', 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 (index.h("input", { key: 'f2fe8194c48bed2392736327c79db4420da4b14a', 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 index.getElement(this); }
 };

package/dist/cjs/dso-dropdown-menu.cjs.entry.js

@@ -216,7 +216,7 @@ const DropdownMenu = class {
         (_a = tabbables[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
-        return (index.h(index.Host, { key: '051e0e49f0787115d3c0d32d64afd9925bbf7015', onFocusout: this.focusOutListener }, index.h("slot", { key: '19ef2a3cd39f922e97e6bdb2700fafa64f3c34ee', name: "toggle" }), index.h("div", { key: '07476f4d79b5eadab813d522381a4e918bb12e5e', hidden: !this.open }, index.h("slot", { key: 'fb6106ab14abaf2bc32cb9938519b97a14127c37' }))));
+        return (index.h(index.Host, { key: '8d8c4d76bf5da8cd782ae2bb7640a28a7de48c0d', onFocusout: this.focusOutListener }, index.h("slot", { key: '837efe3ccfab1c3b6ceb3d1004269aed32fb48d5', name: "toggle" }), index.h("div", { key: '881bea8d8240c672954ede46dca4682102395f8b', hidden: !this.open }, index.h("slot", { key: '5e4c55ca9f00f5bd0cb04be6dd20574cd9000925' }))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/dso-helpcenter-panel.cjs.entry.js

@@ -87,10 +87,10 @@ const HelpcenterPanel = class {
         }
     }
     render() {
-        return (index.h(index.Fragment, null, index.h("button", { key: '4eb48fdad3b3ad4e196c057be9e4ca2be9acad95', 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) }, index.h("dso-icon", { key: '4ed80fd64c25eec34883b8254f065f880b7d41a6', icon: "help" }), index.h("span", { key: '1e43605ab14511b8e8d4b7628b4f2bcb19a0f57a' }, this.label)), index.h("div", { key: 'db5d93917c9b7c64f8b41ad63edde93df4fbc44d', id: "dso-panel-wrapper", class: `wrapper ${this.visibility}`, "aria-label": "helpcentrum", role: "dialog", ref: (element) => (this.panelWrapperElement = element) }, index.h("div", { key: '5024649ae6920e583242554b215ea5dd43790eb4', class: "dimscreen", onClick: this.closeClick }), index.h("div", { key: '83b15da9a1647e578394ea594cf6a74089e3b416', class: `iframe-container ${this.slideState}`, "aria-live": "polite" }, this.loadIframe ? (index.h("iframe", { src: this.iframeUrl, tabindex: "0", onLoad: () => {
+        return (index.h(index.Fragment, null, index.h("button", { key: 'a8170e3024ee00b4c7907741061f20bd38bf043c', 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) }, index.h("dso-icon", { key: '9d86914b8a9d96f13e1675b31b423d6a1d627acc', icon: "help" }), index.h("span", { key: '115ff85cb5d22b3bc0976cadc3ae43c14b012219' }, this.label)), index.h("div", { key: '9a48de7acbf0a1688602ace722126f42db980d0e', id: "dso-panel-wrapper", class: `wrapper ${this.visibility}`, "aria-label": "helpcentrum", role: "dialog", ref: (element) => (this.panelWrapperElement = element) }, index.h("div", { key: 'dd98fd2c0270a0c6f19c44dcb73f14fb21cbdfdf', class: "dimscreen", onClick: this.closeClick }), index.h("div", { key: '67ed5ef2a7f2ec21d4d67937ec3e15000ff73e71', class: `iframe-container ${this.slideState}`, "aria-live": "polite" }, this.loadIframe ? (index.h("iframe", { src: this.iframeUrl, tabindex: "0", onLoad: () => {
                 this.createTrap();
                 this.iframeLoaded = true;
-            } })) : (index.h("div", null))), index.h("button", { key: 'a20fabcb6e42397b514d0b15dd6dcaa4f5c04495', 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) }, index.h("dso-icon", { key: '4e06edd5f7d870db47a41b8b9ae95e7e0dcd2bf6', icon: "times" }), index.h("span", { key: 'd8092cfddace1390453ca1122980a524cc79993e', class: "sr-only" }, "sluiten")))));
+            } })) : (index.h("div", null))), index.h("button", { key: 'c16f22cda1869eb684c5fc0a11651441e82510a5', 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) }, index.h("dso-icon", { key: '4002011f88f58a7016e8ccbbc344ddbdaf56683b', icon: "times" }), index.h("span", { key: '25863addb1a994ee1d762ba4f2c54f44d409618c', class: "sr-only" }, "sluiten")))));
     }
     static get watchers() { return {
         "url": ["watchUrl"],

package/dist/cjs/dso-highlight-box.cjs.entry.js

@@ -19,7 +19,7 @@ const HighlightBox = class {
     render() {
         var _a;
         const hasCounter = this.step || !!this.element.querySelector("[slot=icon]");
-        return (index.h(index.Host, { key: '197d41b2fe49363ee590921008c935f43a5b1fee', "has-counter": hasCounter }, hasCounter && index.h("div", { key: 'f166216f13a0f703896c2c44aa89ae43d73051aa', class: "dso-step-counter" }, (_a = this.step) !== null && _a !== void 0 ? _a : index.h("slot", { key: 'd31ea4d9b291e4619ec15eb1d71142a4e8077450', name: "icon" })), index.h("slot", { key: '0f2a7876ea72118d06ffecd753c4c9f24c22dd7e' })));
+        return (index.h(index.Host, { key: '56216e3a1a502f4ad20289fbeea0bc2bad8be269', "has-counter": hasCounter }, hasCounter && index.h("div", { key: '0d0d5f6a49ca4384a0ea608a4c310550e73cfc19', class: "dso-step-counter" }, (_a = this.step) !== null && _a !== void 0 ? _a : index.h("slot", { key: '83237236c8d1f52dfa81c30903896e0be0e01b3c', name: "icon" })), index.h("slot", { key: 'f2651b6b400d2b9b1a54821e7ad8179061f94566' })));
     }
     get element() { return index.getElement(this); }
 };

package/dist/cjs/dso-icon.cjs.entry.js

@@ -662,7 +662,7 @@ const Icon = class {
             if (!icon) {
                 throw new TypeError(`Unknown svg: ${this.icon}`);
             }
-            return index.h("span", { key: 'ad568e901aca0e1bb7bfb6c5cf35579fd78e97f9', class: "icon-container", innerHTML: icon.svg });
+            return index.h("span", { key: '7e0261b5dd7ca57d3ff3e2bd1c342ec90d713075', class: "icon-container", innerHTML: icon.svg });
         }
     }
 };

package/dist/cjs/dso-info-button.cjs.entry.js

@@ -29,7 +29,7 @@ const InfoButton = class {
         this.dsoToggle.emit({ originalEvent: e, active: this.active });
     }
     render() {
-        return (index.h(index.Host, { key: 'a6e2aa03eb9724228f309392cfb9b2a8da123a15', onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, index.h("button", { key: '419f8090a67ec29c910b1d925177451d4e98609c', type: "button", class: clsx.clsx({ "dso-open": !!this.active, "dso-info-secondary": !!this.secondary }), "aria-expanded": typeof this.active === "boolean" ? this.active.toString() : undefined, onClick: (e) => this.handleToggle(e), ref: (element) => (this.button = element) }, index.h("dso-icon", { key: '2f5b81f8142336f42e51c800fc8486b98095a40c', icon: this.active || this.hover ? "info-active" : "info" }), index.h("span", { key: '310fa68092bbee52d8c3935e48d6e5befd16c4ea', class: "sr-only" }, this.label))));
+        return (index.h(index.Host, { key: '49a4aa9c7941888cd926166344d5693d2a670a17', onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, index.h("button", { key: '4b5866e00d9630b8e7b33be5a277e149edf5ffe7', type: "button", class: clsx.clsx({ "dso-open": !!this.active, "dso-info-secondary": !!this.secondary }), "aria-expanded": typeof this.active === "boolean" ? this.active.toString() : undefined, onClick: (e) => this.handleToggle(e), ref: (element) => (this.button = element) }, index.h("dso-icon", { key: 'e5c5a6aa0dd24df35a9ea00ff8330bedee988061', icon: this.active || this.hover ? "info-active" : "info" }), index.h("span", { key: 'd98edf483eaaf5703f57225e710a99384e202e72', class: "sr-only" }, this.label))));
     }
 };
 InfoButton.style = DsoInfoButtonStyle0;

package/dist/cjs/dso-info_2.cjs.entry.js

@@ -17,7 +17,7 @@ const Info = class {
         this.active = undefined;
     }
     render() {
-        return (index.h(index.Fragment, { key: '902f98c97248e2ddd76978921405904b843de499' }, index.h("slot", { key: 'fe9eed78ba371fc455ccaa6d9d3cc5eb5d042184' }), !this.fixed && (index.h("button", { key: 'c915ed3281316046b27b60e32d5f8a2d3399839d', type: "button", onClick: (e) => this.dsoClose.emit(e) }, index.h("dso-icon", { key: '7f342560dc0cd59123e8a1f3a37fcf0d88da9efa', icon: "times" }), index.h("span", { key: '966b0fdafa67cd988cb5c2c7efbcc90288810ca5', class: "sr-only" }, "Sluiten")))));
+        return (index.h(index.Fragment, { key: 'e158c18a96603f7d8780074f6efd389050e68d6e' }, index.h("slot", { key: '8c9b01f5643639a5897fc9b8b0b402b972164109' }), !this.fixed && (index.h("button", { key: 'f527a659ee5b1175263e4698f2b5f465c0f8c26a', type: "button", onClick: (e) => this.dsoClose.emit(e) }, index.h("dso-icon", { key: 'a6759dc5e67f8f10055761eadd80ecd2af03666e', icon: "times" }), index.h("span", { key: '2e29810fd8e0432f3d45b350c4377d1710513835', class: "sr-only" }, "Sluiten")))));
     }
 };
 Info.style = DsoInfoStyle0;
@@ -84,7 +84,7 @@ const Selectable = class {
     render() {
         var _a;
         const hasInfo = !!this.host.querySelector('[slot="info"]');
-        return (index.h(index.Fragment, { key: 'dd7208bc6160768997ff4b00a1611316d0d3b170' }, index.h("div", { key: '3a56145fbd723e97dfd1047144699295e64cd83c', class: "dso-selectable-container" }, index.h("div", { key: '960d6051962d016eb4d10cd42e0378e348176e00', class: clsx.clsx("dso-selectable-input-wrapper", { "dso-keyboard-focus": this.keyboardFocus }) }, index.h("input", { key: '62515e7eb4d4752e9cd884ebb55e25600c796569', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, onBlur: () => (this.keyboardFocus = false), onKeyUp: () => (this.keyboardFocus = true), ref: (el) => (this.input = el) }), !this.labelledById ? (index.h("label", { htmlFor: this.getIdentifier() }, index.h("slot", null))) : (index.h("label", null, index.h("slot", null)))), hasInfo && !this.infoFixed && (index.h("dso-info-button", { key: '88c7368c7cf2679a5b553423d6241e6edf1e171c', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (index.h("dso-info", { key: '574762e0f3643edb8b2fe2e728c7bdaff02fbb2e', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, index.h("div", { key: '4d7366f99efa8e9dd04787630a86f2d8f4720f8b' }, index.h("slot", { key: '7294a8c9318544819d392552c529ac04a6af2322', name: "info" })))), index.h("slot", { key: 'fe3293f3aef16561ab13519887293181af6b2347', name: "options" })));
+        return (index.h(index.Fragment, { key: '0cbf9eb4ab6e2d8510f3ca3e3a1fe9f6be1c9f17' }, index.h("div", { key: 'bd82b5657d192f3d855183100794b257c0b8bff1', class: "dso-selectable-container" }, index.h("div", { key: 'c76c3c223acdf8e7954e7d04ed3fa79044e9d19b', class: clsx.clsx("dso-selectable-input-wrapper", { "dso-keyboard-focus": this.keyboardFocus }) }, index.h("input", { key: '7e881b0259bc9a34cf5dcff88af8be2b66ce9f80', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, onBlur: () => (this.keyboardFocus = false), onKeyUp: () => (this.keyboardFocus = true), ref: (el) => (this.input = el) }), !this.labelledById ? (index.h("label", { htmlFor: this.getIdentifier() }, index.h("slot", null))) : (index.h("label", null, index.h("slot", null)))), hasInfo && !this.infoFixed && (index.h("dso-info-button", { key: '9c79309fc1e0c73a9ae55722ea0e58bfbca0a63c', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (index.h("dso-info", { key: 'c329819cc92b649483fc4de5f49d683c941ff81f', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, index.h("div", { key: '0e0e3c4c78ab6ad828fe2201ec818cc1181bfbea' }, index.h("slot", { key: '83121c8ec4075d1e688b06c306b7ce142399f799', name: "info" })))), index.h("slot", { key: '53429644d8c03912156f6c3915f5f9b445bd92ce', name: "options" })));
     }
     componentDidRender() {
         if (this.input && typeof this.checked === "boolean" && this.input.checked !== this.checked) {

package/dist/cjs/dso-input-range.cjs.entry.js

@@ -23,13 +23,13 @@ const InputRange = class {
         const min = this.min || 0;
         const max = this.max || 100;
         const step = this.step || 1;
-        return (index.h(index.Fragment, null, this.description && (index.h("span", { key: 'd5ecf14f7a8950cde120066a8f8fe9770451cd84', id: "description", hidden: true }, this.description)), index.h("span", { key: '877239f0082c1e2b2254e9bd6e1e01ce1ae10933', class: "counter min", "aria-hidden": "true" }, min, this.unit), index.h("input", { key: 'c5df969a844d7773cebd6f8f97c72fb09aad7f05', 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 (index.h(index.Fragment, null, this.description && (index.h("span", { key: '33a0e5071f0abe7a4c927b38bffbf01cc7c2b154', id: "description", hidden: true }, this.description)), index.h("span", { key: '570dd69f683c1823a8b3f92f3fc3204d6d61e980', class: "counter min", "aria-hidden": "true" }, min, this.unit), index.h("input", { key: '7d2ad8841d2408544c86a5edbb3a95ad1ebe94e1', 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,
-            }) }), index.h("span", { key: '29900f5d80966b2ad6be15b81d3895ebe46c287e', class: "counter max", "aria-hidden": "true" }, max, this.unit)));
+            }) }), index.h("span", { key: '4a74f2d784043162ca939d98af18cd103d1a638c', class: "counter max", "aria-hidden": "true" }, max, this.unit)));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/dso-label_2.cjs.entry.js

@@ -113,13 +113,13 @@ const Label = class {
         this.isTruncated = false;
     }
     render() {
-        return (index$1.h(index$1.Fragment, { key: '63bab23d605ff8edc1fe6bd2bdac751f890d81f4' }, index$1.h("span", { key: 'c7e6f11ba9be8c3666f335c0a1acd8f0a20a1c90', "aria-describedby": "toggle-anchor", class: clsx.clsx("dso-label", {
+        return (index$1.h(index$1.Fragment, { key: 'f0bca41140f5702856768564b7e24106f40657a6' }, index$1.h("span", { key: '3d12ab6670190e52769ddf3aab44a03d163186fb', "aria-describedby": "toggle-anchor", class: clsx.clsx("dso-label", {
                 [`dso-label-${this.status}`]: this.status,
                 "dso-compact": this.compact && !this.removable,
                 "dso-hover": this.removeHover || this.removeFocus,
-            }) }, index$1.h("slot", { key: 'b973a7965b5100f9ac28309dd48ffacb44276198', name: "symbol" }), index$1.h("span", { key: 'da0cc9a0f71117144d0e67efe86bc70bf970ee65', class: clsx.clsx("dso-label-content", {
+            }) }, index$1.h("slot", { key: '074e1b656f77708a33019acf5de2ddcac352047e', name: "symbol" }), index$1.h("span", { key: '78a996fb79f6c9d34346e65abf31f16c2af29fa3', class: clsx.clsx("dso-label-content", {
                 "dso-truncate": !!this.truncate,
-            }), ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.isTruncated ? 0 : undefined, onMouseEnter: () => (this.textHover = true), onMouseLeave: () => (this.textHover = false), onFocus: () => (this.textFocus = true), onBlur: () => (this.textFocus = false) }, index$1.h("slot", { key: '0a74dc7a557ebae1a0d7a30888fe6716b4bdee72' })), this.removable && (index$1.h("button", { key: '53edfc2ee675a00196afc294fe3f92832074e0b8', type: "button", onClick: (e) => this.dsoRemoveClick.emit(e), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }, index$1.h("span", { key: '4d01d7c7583881847012605dc95633875d8c63c3', class: "sr-only" }, "Verwijder: ", this.labelText), index$1.h("dso-icon", { key: '2c491a534f65603292b65905e17da3cd6c11d00f', icon: "times" })))), this.isTruncated && (index$1.h("dso-tooltip", { key: 'e7a24a236e64f272a694ae81ac9fa6a2442aa2d1', stateless: true, id: "toggle-anchor", active: this.textHover || this.textFocus, position: "top", strategy: "absolute" }, this.labelText))));
+            }), ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.isTruncated ? 0 : undefined, onMouseEnter: () => (this.textHover = true), onMouseLeave: () => (this.textHover = false), onFocus: () => (this.textFocus = true), onBlur: () => (this.textFocus = false) }, index$1.h("slot", { key: '516aecaadaf1a4f48c353aa78f613788126180f2' })), this.removable && (index$1.h("button", { key: '72d49327863c6131ed48e4567e32580e18b054bc', type: "button", onClick: (e) => this.dsoRemoveClick.emit(e), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }, index$1.h("span", { key: '414ff8dfe4787da02bfd5ec71efb9c8b74d6b7f1', class: "sr-only" }, "Verwijder: ", this.labelText), index$1.h("dso-icon", { key: 'a39666f5d3315156e5a906b31341a14117bc4f96', icon: "times" })))), this.isTruncated && (index$1.h("dso-tooltip", { key: '5e69e4dc83cf0ce5d72b8fec86e029c66cd84066', stateless: true, id: "toggle-anchor", active: this.textHover || this.textFocus, position: "top", strategy: "absolute" }, this.labelText))));
     }
     get host() { return index$1.getElement(this); }
     static get watchers() { return {
@@ -331,7 +331,7 @@ const Tooltip = class {
         }
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '46cf85f470ba4a74966d0c792ae81c11efa39808', class: { hidden: this.hidden }, role: "tooltip", onClick: this.listenClick }, index$1.h("div", { key: 'ec613cea1d402473b442a79abada1b2c7ef7b245', class: clsx.clsx("tooltip", { in: this.active }) }, !this.noArrow && index$1.h("div", { key: '2be32f7acb19152aaf933c275fedc1ba6d9563d1', "data-popper-arrow": true, class: "tooltip-arrow" }), index$1.h("div", { key: '6d791bcb763d0eccc54875f8a51fad4f90c8387d', "aria-hidden": !this.descriptive || undefined, class: clsx.clsx("tooltip-inner", { "dso-small": this.small }) }, index$1.h("slot", { key: '89f68418f41bd6163492165ecd88087ad78d26b6' })))));
+        return (index$1.h(index$1.Host, { key: 'cfad66ccb630fe271a2b2bd5485f158f7c509d90', class: { hidden: this.hidden }, role: "tooltip", onClick: this.listenClick }, index$1.h("div", { key: 'da25404fb6a06f3a4ceb841b3c51e221d9a6fb7b', class: clsx.clsx("tooltip", { in: this.active }) }, !this.noArrow && index$1.h("div", { key: '00ebab6f82ddfa1349a9df16bb7d36d37c87b942', "data-popper-arrow": true, class: "tooltip-arrow" }), index$1.h("div", { key: '2e69287dd8975def050c78d208fd823d42eaad0a', "aria-hidden": !this.descriptive || undefined, class: clsx.clsx("tooltip-inner", { "dso-small": this.small }) }, index$1.h("slot", { key: 'b59a912c960e685a005218d534affb1957f797c5' })))));
     }
     activatePopper() {
         var _a;

package/dist/cjs/dso-legend-item.cjs.entry.js

@@ -32,10 +32,10 @@ const LegendItem = class {
         const hasSymbol = this.symbolSlottedElement !== null;
         const hasBody = this.bodySlottedElement !== null;
         const isSelectable = this.selectableSlottedElement !== null;
-        return (index.h(index.Host, { key: '8ea01dfcb640d2e3a6767de6fb581913722bc37a', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, index.h("div", { key: '7e3f837a3b4370cb354a3c5e7e4f698bcca3a856', class: clsx.clsx("legend-item", {
+        return (index.h(index.Host, { key: 'b94da2c1cf452782ae6cc975273becd5d0f39669', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, index.h("div", { key: '30dfd96122ccbfc51c420775a6d8de1086fc6a07', class: clsx.clsx("legend-item", {
                 "legend-item-symbol": hasSymbol,
                 "legend-item-selectable": isSelectable,
-            }) }, index.h("div", { key: 'e24ef7f85e830d69f179794daa70f5427ef56163', hidden: !hasSymbol }, index.h("slot", { key: 'df812c8618d62572da8850e3ee4b57fa28155483', name: "symbol" })), index.h("div", { key: 'cf87688885bf1371fe69c8b55e0de9702beaa1b1' }, index.h("slot", { key: 'dbb1be783d9b79489d8fcfd69e643d14bbc2fb3f' })), this.disabled && this.disabledMessage && (index.h("dso-toggletip", { key: '3fc250b6b42cd7980c268d3dbdc2afcc20e9f700', position: "bottom" }, this.disabledMessage)), this.removable && (index.h("button", { key: 'f6b4085d0c39941c70aa68b64f2eae73bc1737d8', id: "remove-button", type: "button", onClick: (e) => this.dsoRemoveClick.emit({ originalEvent: e }) }, index.h("span", { key: '7c4cbf3a573be1052f0f0f441fa1a62caba9fdee', class: "sr-only" }, "Legenda item verwijderen"), index.h("dso-icon", { key: 'd9240cec6cd536fc50e8cb6902da6956c34d2daf', icon: "trash" }))), hasBody && !this.disabled && (index.h("button", { key: 'e26526598d1a301e48672da6f30857a65568ddbd', id: "edit-button", type: "button", onClick: () => (this.showBody = !this.showBody) }, index.h("span", { key: 'f04f3ea3548ce26be41e3f11a8bf26d37717e315', class: "sr-only" }, "Legenda item aanpassen"), index.h("dso-icon", { key: '2ad21eee3d8cd97faa746fbbf941af5ab7573ff2', icon: this.showBody ? "times" : "more" })))), index.h("div", { key: 'fe3a07b920bd7af69f1f52e95373ceef5c7fa5be', hidden: !hasBody || this.disabled || !this.showBody, class: "body" }, index.h("slot", { key: 'b5be190d74a6e05d1bf7d035fcfb6f4475339d21', name: "body" }))));
+            }) }, index.h("div", { key: '5c12bb5da8fe1842d41122623fa5ec70ab646901', hidden: !hasSymbol }, index.h("slot", { key: '40fa2c206103a5de5d8644e150fe4508e7ca74ab', name: "symbol" })), index.h("div", { key: '375faec3cf467195c4a8bb9ac4dcd2c474d58dfa' }, index.h("slot", { key: '739d16ec79ebbd3e04d17e1944c5de669817f812' })), this.disabled && this.disabledMessage && (index.h("dso-toggletip", { key: '39c926a2484a21909a738be365f8fef5ed280d45', position: "bottom" }, this.disabledMessage)), this.removable && (index.h("button", { key: '3534a0765bda7a5c825ec02fb928675eef2473ff', id: "remove-button", type: "button", onClick: (e) => this.dsoRemoveClick.emit({ originalEvent: e }) }, index.h("span", { key: '7cc79279bdab2b210b3fcfde3ed2171fa985645a', class: "sr-only" }, "Legenda item verwijderen"), index.h("dso-icon", { key: 'f1a91101255354d7fc087c56f0127d6c92d6bc97', icon: "trash" }))), hasBody && !this.disabled && (index.h("button", { key: 'bce20f4a5cb45d10ec5848eb1aa6b4f7b638eb74', id: "edit-button", type: "button", onClick: () => (this.showBody = !this.showBody) }, index.h("span", { key: '38dac2496d34da5194a608b4e64f9e3084ffa41a', class: "sr-only" }, "Legenda item aanpassen"), index.h("dso-icon", { key: 'b09f5e1f82e9096044475552b3209cf268859cb0', icon: this.showBody ? "times" : "more" })))), index.h("div", { key: '9b5c2bda42642e637ea35fd0a881ae86a35ee521', hidden: !hasBody || this.disabled || !this.showBody, class: "body" }, index.h("slot", { key: '181606803983c4238d686bdeedc5aa6082f3ecc7', name: "body" }))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/dso-list-button.cjs.entry.js

@@ -125,7 +125,7 @@ const ListButton = class {
     render() {
         const showButtonInputs = this.manualCount === undefined;
         const selected = this.checked || (this.count !== undefined && this.count > 0);
-        return (index.h("div", { key: '7cd66b1005ca012be7debec40c85dfa245103482', class: clsx.clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, index.h("div", { key: 'd71e1cb57d2eba09adf61bd4944cb9c7aa1318f0', class: clsx.clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, index.h("div", { key: '3e60dc348e53946cd2d0e6ef519d7a5a84b20177', class: "dso-selectable" }, index.h("input", { key: 'c3d9e437d66676515d7488d474e4bbdac90a58c4', 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 }), index.h("label", { key: '7db34b3d190d5ca267d78e3e27b76ecdcf2b0429', htmlFor: "dso-list-button-checkbox" }, this.label), this.subcontentSlot && (index.h("div", { key: 'bc4d3255062c5a45de627f911f1dd9f3cc666c39', class: "sr-only", id: "description" }, this.subcontentPrefix && this.subcontentPrefix + ":", index.h("div", { key: 'cf7396b00a3f0720d69a32254b5bab79291382f3', innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && (index.h("span", { key: '475ddfe5f776f8feecae6041e3b008cf8abc7ce2', class: "dso-sublabel", id: "sublabel" }, this.sublabel)), index.h("slot", { key: '8e70a5e273eda24cff6676ff4018277db135b61f', name: "subcontent" })), this.count !== undefined && this.count > 0 && (index.h("div", { key: '8fbc9df64f5fcad29bf26391c3258bd93c9786f8', class: "dso-input-number" }, this.manualCount === undefined && this.count > 1 && (index.h("button", { key: 'bc2ce4408fbf3727511b52ade6bab7c3c434e045', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.min) || this.disabled, onClick: (e) => this.stepValue(e, "decrement") }, index.h("dso-icon", { key: '7f22151f8f8979be45f86f76bcfd12676a37d8fb', icon: "minus-circle" }), index.h("span", { key: 'a33ceeb8f6b953693bf575bfab4111905ee96854', class: "sr-only" }, "Aantal verlagen"))), index.h("div", { key: '6658e579ded3557e634bf3ddb7b8577e9d14df17', class: "dso-input-wrapper" }, this.manualCount === undefined && this.count > 1 && (index.h("input", { key: 'd82691484c68cf49920611239fcd25e87a267113', class: "dso-input-step-counter", type: "number", tabIndex: -1, "aria-label": "Aantal", value: this.count, readOnly: true })), index.h("form", { key: 'aa20545748dce7bf3aa56669680ebfbdc790aa81', onSubmit: (e) => this.setCount(e) }, index.h("div", { key: '69d4a9866822ebf1ccb525681d9b53406bd3fe88', ref: (element) => (this.manualInputWrapperElement = element) }, index.h("input", { key: 'adec7b270253cfa23128577bf82422ad2fe1e190', class: clsx.clsx("form-control", { hidden: showButtonInputs }), type: "number", "aria-label": "Aantal", value: this.manualCount, min: this.min, max: this.max, onInput: (e) => this.handleOnChange(e) })), this.manual && (index.h("button", { key: '21ca1f41974c793693b6dfd5d52da5cee46bfef3', class: clsx.clsx("dso-manual-input-button", { "sr-only": !showButtonInputs }), type: !showButtonInputs ? "submit" : "button", disabled: this.disabled, onClick: () => showButtonInputs && this.startManualCountInput() }, showButtonInputs ? (index.h("span", { class: "sr-only" }, "Handmatig aantal invullen")) : (index.h("span", { class: "sr-only" }, "Zet waarde")))))), showButtonInputs && (index.h("button", { key: 'dac00a3af549df46e9ba050354983637f39055f0', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.max) || this.disabled, onClick: (e) => this.stepValue(e, "increment") }, index.h("dso-icon", { key: '73314b7a40caae99052e6f1e63e28370ea5d36ea', icon: "plus-circle" }), index.h("span", { key: '0ff4e475035dd40abbc9e02ec562156517b7f725', class: "sr-only" }, "Aantal verhogen")))))));
+        return (index.h("div", { key: 'c1d00fc6c4a3e9b8d6bdd6b006a3df78124e55ec', class: clsx.clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, index.h("div", { key: 'f2cc4ee6b103d609e37b46eb318a9ad31b3a7ef2', class: clsx.clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, index.h("div", { key: 'a343bccf1d43f3511156cd6ca334c1e12935e284', class: "dso-selectable" }, index.h("input", { key: '55599717c0e717ffcc56a9b534bcb39e8cc4c733', 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 }), index.h("label", { key: '561eef7be3e076df1dbb79887014a26303b1b7dc', htmlFor: "dso-list-button-checkbox" }, this.label), this.subcontentSlot && (index.h("div", { key: '2181c5ac8768ee8ef8ab9e9dd92e3b37faa4d86e', class: "sr-only", id: "description" }, this.subcontentPrefix && this.subcontentPrefix + ":", index.h("div", { key: 'c58abf776dd848f58ecd00d29db9d8e8e35430f1', innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && (index.h("span", { key: '05b5734e4e8bd8ffdb069e10537e7847f03f1830', class: "dso-sublabel", id: "sublabel" }, this.sublabel)), index.h("slot", { key: 'f6b8b2a8fd71c0d064307ce242c904fa6d44c4fe', name: "subcontent" })), this.count !== undefined && this.count > 0 && (index.h("div", { key: 'eec5313d02fafaa95993300558b2368346c0bac4', class: "dso-input-number" }, this.manualCount === undefined && this.count > 1 && (index.h("button", { key: '4cec5160dc944b2fd8184c4c41a84ffec59cde28', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.min) || this.disabled, onClick: (e) => this.stepValue(e, "decrement") }, index.h("dso-icon", { key: 'a9d9aac3b105557782bf647971de556b63c58831', icon: "minus-circle" }), index.h("span", { key: 'ea1a0b92f7d13a567ffab5436562ca0f651289e0', class: "sr-only" }, "Aantal verlagen"))), index.h("div", { key: 'a19961dcb657162c23c18150b927169e537f8b70', class: "dso-input-wrapper" }, this.manualCount === undefined && this.count > 1 && (index.h("input", { key: '67325e7673b1dfbbc5080165efcfffb511d74535', class: "dso-input-step-counter", type: "number", tabIndex: -1, "aria-label": "Aantal", value: this.count, readOnly: true })), index.h("form", { key: '5c05349904095de9b299a4b0140c58f12da15475', onSubmit: (e) => this.setCount(e) }, index.h("div", { key: '55ca1bae03bc45d1ac132ae4ef33fc76cbb04c7d', ref: (element) => (this.manualInputWrapperElement = element) }, index.h("input", { key: '49c8f27dab116a8099caf54173137b168a8900f8', class: clsx.clsx("form-control", { hidden: showButtonInputs }), type: "number", "aria-label": "Aantal", value: this.manualCount, min: this.min, max: this.max, onInput: (e) => this.handleOnChange(e) })), this.manual && (index.h("button", { key: 'baa1ad99b0437bf1408db15e11b54af331f4b414', class: clsx.clsx("dso-manual-input-button", { "sr-only": !showButtonInputs }), type: !showButtonInputs ? "submit" : "button", disabled: this.disabled, onClick: () => showButtonInputs && this.startManualCountInput() }, showButtonInputs ? (index.h("span", { class: "sr-only" }, "Handmatig aantal invullen")) : (index.h("span", { class: "sr-only" }, "Zet waarde")))))), showButtonInputs && (index.h("button", { key: 'c8d76acc7bdfc55b9244700fe9fcdd8c8b6d61ed', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.max) || this.disabled, onClick: (e) => this.stepValue(e, "increment") }, index.h("dso-icon", { key: 'da0e9254b5547346de0399b56072800bbbaf3611', icon: "plus-circle" }), index.h("span", { key: '1f645f1708e375cd60c15c1a3a6fb3636c5c55cd', class: "sr-only" }, "Aantal verhogen")))))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/dso-logo.cjs.entry.js

@@ -26,8 +26,8 @@ const Logo = class {
         this.ribbon = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: '776673cf588bb35a7d7d7e3b33556f2c20e8d74a', "aria-label": ["Omgevingsloket", this.label, this.ribbon && `(${this.ribbon})`].filter((s) => !!s).join(" ") }, this.logoUrl ? (index.h("a", { class: "logo-url", href: this.logoUrl, onClick: this.handleLogoClick }, index.h(DsoLogo, null))) : (index.h(DsoLogo, null)), this.label &&
-            (!this.labelUrl ? (index.h("span", { class: "logo-label" }, this.label)) : (index.h("a", { class: "logo-label-url", href: this.labelUrl, onClick: this.handleLabelClick }, index.h("span", { class: "logo-label" }, this.label)))), this.ribbon && index.h("div", { key: '897586033a01fe6d6d882e3f2f6aa7fc4c72675f', class: "logo-ribbon" }, this.ribbon)));
+        return (index.h(index.Fragment, null, this.logoUrl ? (index.h("a", { class: "logo-url", href: this.logoUrl, onClick: this.handleLogoClick }, index.h(DsoLogo, null))) : (index.h(DsoLogo, null)), this.label &&
+            (!this.labelUrl ? (index.h("span", { class: "logo-label" }, this.label)) : (index.h("a", { class: "logo-label-url", href: this.labelUrl, onClick: this.handleLabelClick }, index.h("span", { class: "logo-label" }, this.label)))), this.ribbon && index.h("div", { key: '7c666a7a3881ff302c28a43afe3ecacb3d3a238a', class: "logo-ribbon" }, this.ribbon)));
     }
 };
 Logo.style = DsoLogoStyle0;

package/dist/cjs/dso-logo.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"dso-logo.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,OAAO,GAAG,sgGAAsgG,CAAC;AACvhG,sBAAe,OAAO;;ACatB,MAAM,OAAO,GAAwB,OACnCA,8BACEA,iBAAK,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,aAAa,IACpEA,kBAAM,KAAK,EAAC,OAAO,EAAC,CAAC,EAAC,4CAA4C,GAAG,EACrEA,kBAAM,KAAK,EAAC,QAAQ,EAAC,CAAC,EAAC,0CAA0C,GAAG,EACpEA,kBAAM,KAAK,EAAC,OAAO,EAAC,CAAC,EAAC,uCAAuC,GAAG,CAC5D,EACNA,iBAAK,KAAK,EAAC,eAAe,IACxBA,kBAAM,KAAK,EAAC,yBAAyB,gBAAiB,EACtDA,kBAAM,KAAK,EAAC,qBAAqB,YAAa,CAC1C,CACL,CACJ,CAAC;MAOW,IAAI;;;;;QAuCP,oBAAe,GAAG,CAAC,CAAa;YACtC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,OAAQ,EAAE,eAAe,EAAEC,+BAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;SACvG,CAAC;QAEM,qBAAgB,GAAG,CAAC,CAAa;YACvC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,QAAS,EAAE,eAAe,EAAEA,+BAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;SACzG,CAAC;;;;;;IAEF,MAAM;QACJ,QACED,QAACE,UAAI,mEAAa,CAAC,gBAAgB,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,IAAI,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAC7G,IAAI,CAAC,OAAO,IACXF,eAAG,KAAK,EAAC,UAAU,EAAC,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,eAAe,IACnEA,QAAC,OAAO,OAAG,CACT,KAEJA,QAAC,OAAO,OAAG,CACZ,EAEA,IAAI,CAAC,KAAK;aACR,CAAC,IAAI,CAAC,QAAQ,IACbA,kBAAM,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,KAAK,CAAQ,KAE5CA,eAAG,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,gBAAgB,IAC3EA,kBAAM,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC1C,CACL,CAAC,EACH,IAAI,CAAC,MAAM,IAAIA,kEAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,MAAM,CAAO,CACvD,EACP;KACH;;;;;;","names":["h","isModifiedEvent","Host"],"sources":["src/components/logo/logo.scss?tag=dso-logo&encapsulation=shadow","src/components/logo/logo.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/anchor\";\r\n\r\n:host {\r\n  max-block-size: units.$ru6;\r\n  block-size: units.$ru6;\r\n  display: grid;\r\n  grid-template-areas: \"target wordmark label\";\r\n  grid-template-columns: repeat(3, max-content);\r\n  grid-template-rows: 100%;\r\n  gap: units.$u2;\r\n  font-size: 1.5625rem;\r\n  font-weight: 500;\r\n  align-items: center;\r\n  container-type: size;\r\n  container-name: logo;\r\n\r\n  .logo-url,\r\n  .logo-label-url {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: units.$u2;\r\n\r\n    @include anchor.reverse();\r\n\r\n    &,\r\n    &:hover,\r\n    &:focus,\r\n    &:visited {\r\n      color: colors.$bosgroen;\r\n    }\r\n  }\r\n}\r\n\r\n:host([logo-url][ribbon]) {\r\n  grid-template-areas: \"targetwordmark label\";\r\n\r\n  .logo-url {\r\n    grid-area: targetwordmark;\r\n    + .logo-ribbon {\r\n      grid-area: targetwordmark;\r\n    }\r\n  }\r\n\r\n  .logo-label-url + .logo-ribbon {\r\n    grid-area: targetwordmark;\r\n  }\r\n}\r\n\r\n.logo-label-url {\r\n  grid-area: label;\r\n}\r\n\r\n.logo-target {\r\n  grid-area: target;\r\n  max-block-size: units.$u6;\r\n  max-inline-size: units.$u6;\r\n  inline-size: 100%;\r\n  display: block;\r\n  aspect-ratio: 1 / 1;\r\n}\r\n\r\n.logo-wordmark {\r\n  grid-area: wordmark;\r\n  font-size: 1.5625rem;\r\n}\r\n\r\n@container logo (max-height: 47px) {\r\n  .logo-wordmark,\r\n  .logo-label {\r\n    font-size: 50cqb;\r\n    line-height: 1;\r\n  }\r\n}\r\n\r\n.logo-wordmark-omgevings {\r\n  color: colors.$grasgroen;\r\n}\r\n\r\n.logo-wordmark-loket {\r\n  color: colors.$bosgroen;\r\n}\r\n\r\n.logo-label {\r\n  grid-area: label;\r\n  color: colors.$bosgroen;\r\n  margin-inline-start: units.$ru2;\r\n}\r\n\r\n.logo-ribbon {\r\n  grid-area: wordmark;\r\n  place-self: start end;\r\n  display: flex;\r\n  place-items: center;\r\n\r\n  background-color: colors.$mauve;\r\n  border-radius: 3px;\r\n  transform: rotate(3deg);\r\n  padding-block: 0;\r\n  padding-inline: 8px;\r\n\r\n  font-size: 0.75rem;\r\n  font-weight: normal;\r\n  text-transform: uppercase;\r\n  color: colors.$wit;\r\n\r\n  @container logo (max-height: 47px) {\r\n    & {\r\n      block-size: 28cqb;\r\n      font-size: 25cqb;\r\n    }\r\n  }\r\n}\r\n\r\n.inner {\r\n  fill: colors.$oranje;\r\n}\r\n\r\n.middle {\r\n  fill: colors.$bosgroen;\r\n}\r\n\r\n.outer {\r\n  fill: #80bc00;\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n  .logo-wordmark {\r\n    font-size: initial;\r\n  }\r\n\r\n  // if the logo has a label, hide the wordmark on smaller screens and replace it with the label\r\n  :host([label]) {\r\n    grid-template-areas: \"target label\";\r\n    grid-template-columns: max-content minmax(130px, max-content);\r\n\r\n    .logo-wordmark {\r\n      display: none;\r\n    }\r\n\r\n    .logo-ribbon {\r\n      grid-area: label;\r\n    }\r\n\r\n    .logo-label {\r\n      margin-inline-start: 0;\r\n      font-size: initial;\r\n      text-wrap: balance;\r\n      overflow-wrap: normal;\r\n    }\r\n  }\r\n\r\n  :host([logo-url][ribbon]) {\r\n    .logo-label-url + .logo-ribbon {\r\n      grid-area: label;\r\n    }\r\n  }\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n  .logo-ribbon {\r\n    transform: rotate(3deg) translateY(-7px);\r\n  }\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Fragment,\r\n  Host,\r\n  Prop,\r\n  h,\r\n  Event,\r\n  EventEmitter,\r\n  FunctionalComponent,\r\n} from \"@stencil/core\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\nimport { LogoClickEvent, LogoLabelClickEvent } from \"./logo.interfaces\";\r\n\r\nconst DsoLogo: FunctionalComponent = () => (\r\n  <>\r\n    <svg fill=\"none\" viewBox=\"0 0 48 48\" height=\"100%\" class=\"logo-target\">\r\n      <path class=\"outer\" d=\"M26 0a24 24 0 1 0 0 47.9A24 24 0 0 0 24 0Z\" />\r\n      <path class=\"middle\" d=\"M24 8A16 16 0 0 0 8 24 16 16 0 1 0 24 8Z\" />\r\n      <path class=\"inner\" d=\"M24 32a8 8 0 0 0 0-16 8 8 0 0 0 0 16Z\" />\r\n    </svg>\r\n    <div class=\"logo-wordmark\">\r\n      <span class=\"logo-wordmark-omgevings\">Omgevings</span>\r\n      <span class=\"logo-wordmark-loket\">loket</span>\r\n    </div>\r\n  </>\r\n);\r\n\r\n@Component({\r\n  tag: \"dso-logo\",\r\n  styleUrl: \"logo.scss\",\r\n  shadow: true,\r\n})\r\nexport class Logo implements ComponentInterface {\r\n  /**\r\n   *  The url the logo is pointing to.\r\n   */\r\n  @Prop({ reflect: true })\r\n  logoUrl?: string;\r\n\r\n  /**\r\n   * The label clarifies the service within the Omgevingsloket, shown\r\n   * as a subtitle (and on smaller screens as the main wordmark itself).\r\n   */\r\n  @Prop({ reflect: true })\r\n  label?: string;\r\n\r\n  /**\r\n   *  The url the label is pointing to.\r\n   */\r\n  @Prop({ reflect: true })\r\n  labelUrl?: string;\r\n\r\n  /**\r\n   * The ribbon contains the text for a possible 'sticker' on top of the logo.\r\n   * Used to clarify the (non-production) server environment (\"int\", \"kta\", \"pfm\", \"pre\", or \"dmo\")\r\n   */\r\n  @Prop({ reflect: true })\r\n  ribbon?: string;\r\n\r\n  /**\r\n   * Emitted when the logo is clicked (only when logoUrl is set).\r\n   */\r\n  @Event()\r\n  dsoLogoClick!: EventEmitter<LogoClickEvent>;\r\n\r\n  /**\r\n   * Emitted when the label in the logo is clicked (only when labelUrl is set).\r\n   */\r\n  @Event()\r\n  dsoLabelClick!: EventEmitter<LogoLabelClickEvent>;\r\n\r\n  private handleLogoClick = (e: MouseEvent) => {\r\n    this.dsoLogoClick.emit({ originalEvent: e, url: this.logoUrl!, isModifiedEvent: isModifiedEvent(e) });\r\n  };\r\n\r\n  private handleLabelClick = (e: MouseEvent) => {\r\n    this.dsoLabelClick.emit({ originalEvent: e, url: this.labelUrl!, isModifiedEvent: isModifiedEvent(e) });\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host aria-label={[\"Omgevingsloket\", this.label, this.ribbon && `(${this.ribbon})`].filter((s) => !!s).join(\" \")}>\r\n        {this.logoUrl ? (\r\n          <a class=\"logo-url\" href={this.logoUrl} onClick={this.handleLogoClick}>\r\n            <DsoLogo />\r\n          </a>\r\n        ) : (\r\n          <DsoLogo />\r\n        )}\r\n\r\n        {this.label &&\r\n          (!this.labelUrl ? (\r\n            <span class=\"logo-label\">{this.label}</span>\r\n          ) : (\r\n            <a class=\"logo-label-url\" href={this.labelUrl} onClick={this.handleLabelClick}>\r\n              <span class=\"logo-label\">{this.label}</span>\r\n            </a>\r\n          ))}\r\n        {this.ribbon && <div class=\"logo-ribbon\">{this.ribbon}</div>}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-logo.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,OAAO,GAAG,sgGAAsgG,CAAC;AACvhG,sBAAe,OAAO;;ACYtB,MAAM,OAAO,GAAwB,OACnCA,8BACEA,iBAAK,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,aAAa,IACpEA,kBAAM,KAAK,EAAC,OAAO,EAAC,CAAC,EAAC,4CAA4C,GAAG,EACrEA,kBAAM,KAAK,EAAC,QAAQ,EAAC,CAAC,EAAC,0CAA0C,GAAG,EACpEA,kBAAM,KAAK,EAAC,OAAO,EAAC,CAAC,EAAC,uCAAuC,GAAG,CAC5D,EACNA,iBAAK,KAAK,EAAC,eAAe,IACxBA,kBAAM,KAAK,EAAC,yBAAyB,gBAAiB,EACtDA,kBAAM,KAAK,EAAC,qBAAqB,YAAa,CAC1C,CACL,CACJ,CAAC;MAOW,IAAI;;;;;QAuCP,oBAAe,GAAG,CAAC,CAAa;YACtC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,OAAQ,EAAE,eAAe,EAAEC,+BAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;SACvG,CAAC;QAEM,qBAAgB,GAAG,CAAC,CAAa;YACvC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,QAAS,EAAE,eAAe,EAAEA,+BAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;SACzG,CAAC;;;;;;IAEF,MAAM;QACJ,QACED,8BACG,IAAI,CAAC,OAAO,IACXA,eAAG,KAAK,EAAC,UAAU,EAAC,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,eAAe,IACnEA,QAAC,OAAO,OAAG,CACT,KAEJA,QAAC,OAAO,OAAG,CACZ,EAEA,IAAI,CAAC,KAAK;aACR,CAAC,IAAI,CAAC,QAAQ,IACbA,kBAAM,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,KAAK,CAAQ,KAE5CA,eAAG,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,gBAAgB,IAC3EA,kBAAM,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC1C,CACL,CAAC,EACH,IAAI,CAAC,MAAM,IAAIA,kEAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,MAAM,CAAO,CAC3D,EACH;KACH;;;;;;","names":["h","isModifiedEvent"],"sources":["src/components/logo/logo.scss?tag=dso-logo&encapsulation=shadow","src/components/logo/logo.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/anchor\";\r\n\r\n:host {\r\n  max-block-size: units.$ru6;\r\n  block-size: units.$ru6;\r\n  display: grid;\r\n  grid-template-areas: \"target wordmark label\";\r\n  grid-template-columns: repeat(3, max-content);\r\n  grid-template-rows: 100%;\r\n  gap: units.$u2;\r\n  font-size: 1.5625rem;\r\n  font-weight: 500;\r\n  align-items: center;\r\n  container-type: size;\r\n  container-name: logo;\r\n\r\n  .logo-url,\r\n  .logo-label-url {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: units.$u2;\r\n\r\n    @include anchor.reverse();\r\n\r\n    &,\r\n    &:hover,\r\n    &:focus,\r\n    &:visited {\r\n      color: colors.$bosgroen;\r\n    }\r\n  }\r\n}\r\n\r\n:host([logo-url][ribbon]) {\r\n  grid-template-areas: \"targetwordmark label\";\r\n\r\n  .logo-url {\r\n    grid-area: targetwordmark;\r\n    + .logo-ribbon {\r\n      grid-area: targetwordmark;\r\n    }\r\n  }\r\n\r\n  .logo-label-url + .logo-ribbon {\r\n    grid-area: targetwordmark;\r\n  }\r\n}\r\n\r\n.logo-label-url {\r\n  grid-area: label;\r\n}\r\n\r\n.logo-target {\r\n  grid-area: target;\r\n  max-block-size: units.$u6;\r\n  max-inline-size: units.$u6;\r\n  inline-size: 100%;\r\n  display: block;\r\n  aspect-ratio: 1 / 1;\r\n}\r\n\r\n.logo-wordmark {\r\n  grid-area: wordmark;\r\n  font-size: 1.5625rem;\r\n}\r\n\r\n@container logo (max-height: 47px) {\r\n  .logo-wordmark,\r\n  .logo-label {\r\n    font-size: 50cqb;\r\n    line-height: 1;\r\n  }\r\n}\r\n\r\n.logo-wordmark-omgevings {\r\n  color: colors.$grasgroen;\r\n}\r\n\r\n.logo-wordmark-loket {\r\n  color: colors.$bosgroen;\r\n}\r\n\r\n.logo-label {\r\n  grid-area: label;\r\n  color: colors.$bosgroen;\r\n  margin-inline-start: units.$ru2;\r\n}\r\n\r\n.logo-ribbon {\r\n  grid-area: wordmark;\r\n  place-self: start end;\r\n  display: flex;\r\n  place-items: center;\r\n\r\n  background-color: colors.$mauve;\r\n  border-radius: 3px;\r\n  transform: rotate(3deg);\r\n  padding-block: 0;\r\n  padding-inline: 8px;\r\n\r\n  font-size: 0.75rem;\r\n  font-weight: normal;\r\n  text-transform: uppercase;\r\n  color: colors.$wit;\r\n\r\n  @container logo (max-height: 47px) {\r\n    & {\r\n      block-size: 28cqb;\r\n      font-size: 25cqb;\r\n    }\r\n  }\r\n}\r\n\r\n.inner {\r\n  fill: colors.$oranje;\r\n}\r\n\r\n.middle {\r\n  fill: colors.$bosgroen;\r\n}\r\n\r\n.outer {\r\n  fill: #80bc00;\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n  .logo-wordmark {\r\n    font-size: initial;\r\n  }\r\n\r\n  // if the logo has a label, hide the wordmark on smaller screens and replace it with the label\r\n  :host([label]) {\r\n    grid-template-areas: \"target label\";\r\n    grid-template-columns: max-content minmax(130px, max-content);\r\n\r\n    .logo-wordmark {\r\n      display: none;\r\n    }\r\n\r\n    .logo-ribbon {\r\n      grid-area: label;\r\n    }\r\n\r\n    .logo-label {\r\n      margin-inline-start: 0;\r\n      font-size: initial;\r\n      text-wrap: balance;\r\n      overflow-wrap: normal;\r\n    }\r\n  }\r\n\r\n  :host([logo-url][ribbon]) {\r\n    .logo-label-url + .logo-ribbon {\r\n      grid-area: label;\r\n    }\r\n  }\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n  .logo-ribbon {\r\n    transform: rotate(3deg) translateY(-7px);\r\n  }\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Fragment,\r\n  Prop,\r\n  h,\r\n  Event,\r\n  EventEmitter,\r\n  FunctionalComponent,\r\n} from \"@stencil/core\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\nimport { LogoClickEvent, LogoLabelClickEvent } from \"./logo.interfaces\";\r\n\r\nconst DsoLogo: FunctionalComponent = () => (\r\n  <>\r\n    <svg fill=\"none\" viewBox=\"0 0 48 48\" height=\"100%\" class=\"logo-target\">\r\n      <path class=\"outer\" d=\"M26 0a24 24 0 1 0 0 47.9A24 24 0 0 0 24 0Z\" />\r\n      <path class=\"middle\" d=\"M24 8A16 16 0 0 0 8 24 16 16 0 1 0 24 8Z\" />\r\n      <path class=\"inner\" d=\"M24 32a8 8 0 0 0 0-16 8 8 0 0 0 0 16Z\" />\r\n    </svg>\r\n    <div class=\"logo-wordmark\">\r\n      <span class=\"logo-wordmark-omgevings\">Omgevings</span>\r\n      <span class=\"logo-wordmark-loket\">loket</span>\r\n    </div>\r\n  </>\r\n);\r\n\r\n@Component({\r\n  tag: \"dso-logo\",\r\n  styleUrl: \"logo.scss\",\r\n  shadow: true,\r\n})\r\nexport class Logo implements ComponentInterface {\r\n  /**\r\n   *  The url the logo is pointing to.\r\n   */\r\n  @Prop({ reflect: true })\r\n  logoUrl?: string;\r\n\r\n  /**\r\n   * The label clarifies the service within the Omgevingsloket, shown\r\n   * as a subtitle (and on smaller screens as the main wordmark itself).\r\n   */\r\n  @Prop({ reflect: true })\r\n  label?: string;\r\n\r\n  /**\r\n   *  The url the label is pointing to.\r\n   */\r\n  @Prop({ reflect: true })\r\n  labelUrl?: string;\r\n\r\n  /**\r\n   * The ribbon contains the text for a possible 'sticker' on top of the logo.\r\n   * Used to clarify the (non-production) server environment (\"int\", \"kta\", \"pfm\", \"pre\", or \"dmo\")\r\n   */\r\n  @Prop({ reflect: true })\r\n  ribbon?: string;\r\n\r\n  /**\r\n   * Emitted when the logo is clicked (only when logoUrl is set).\r\n   */\r\n  @Event()\r\n  dsoLogoClick!: EventEmitter<LogoClickEvent>;\r\n\r\n  /**\r\n   * Emitted when the label in the logo is clicked (only when labelUrl is set).\r\n   */\r\n  @Event()\r\n  dsoLabelClick!: EventEmitter<LogoLabelClickEvent>;\r\n\r\n  private handleLogoClick = (e: MouseEvent) => {\r\n    this.dsoLogoClick.emit({ originalEvent: e, url: this.logoUrl!, isModifiedEvent: isModifiedEvent(e) });\r\n  };\r\n\r\n  private handleLabelClick = (e: MouseEvent) => {\r\n    this.dsoLabelClick.emit({ originalEvent: e, url: this.labelUrl!, isModifiedEvent: isModifiedEvent(e) });\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        {this.logoUrl ? (\r\n          <a class=\"logo-url\" href={this.logoUrl} onClick={this.handleLogoClick}>\r\n            <DsoLogo />\r\n          </a>\r\n        ) : (\r\n          <DsoLogo />\r\n        )}\r\n\r\n        {this.label &&\r\n          (!this.labelUrl ? (\r\n            <span class=\"logo-label\">{this.label}</span>\r\n          ) : (\r\n            <a class=\"logo-label-url\" href={this.labelUrl} onClick={this.handleLabelClick}>\r\n              <span class=\"logo-label\">{this.label}</span>\r\n            </a>\r\n          ))}\r\n        {this.ribbon && <div class=\"logo-ribbon\">{this.ribbon}</div>}\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/cjs/dso-map-base-layers.cjs.entry.js

@@ -32,7 +32,7 @@ const MapBaseLayers = class {
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (index.h("fieldset", { key: 'de9a9fa37ee87e11a793cff4d896ae7a594f04dc', class: "form-group dso-radios" }, index.h("legend", { key: '190e5b19d0c79b873caa638c8fa0f1a4b1adfaa8', class: "sr-only" }, "Achtergrond"), index.h("div", { key: 'eea2e7ba47b204027918a7143b214059ec1b0252', class: "dso-label-container" }, index.h("span", { key: '5ff9927b14af2a33b2629dec63b8ce3b681a31be', class: "control-label", "aria-hidden": "true" }, "Achtergrond")), index.h("div", { key: 'bc9efcd19fd359ff0461dcaae6bff1479a0750e2', class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (index.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 ? index.h("p", { slot: "info" }, baseLayer.info) : null))))));
+        return (index.h("fieldset", { key: '64448d3c75c763688e10384c82d5272289194941', class: "form-group dso-radios" }, index.h("legend", { key: 'f899ab7c2036d378888ddfdb3fbd5761aa63ad4e', class: "sr-only" }, "Achtergrond"), index.h("div", { key: '3a04d0de9b63da70d71f0f7d096ed9a47bcea094', class: "dso-label-container" }, index.h("span", { key: 'dac903897a61898c164630b61001e60bad60f336', class: "control-label", "aria-hidden": "true" }, "Achtergrond")), index.h("div", { key: 'fcf59ea41e391ebdc1b0ed54757d5ad27eb56512', class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (index.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 ? index.h("p", { slot: "info" }, baseLayer.info) : null))))));
     }
 };
 MapBaseLayers.style = DsoMapBaseLayersStyle0;

package/dist/cjs/dso-map-controls.cjs.entry.js

@@ -66,7 +66,7 @@ const MapControls = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '34145b3d1e724119b6cd522534e2e700345a5990' }, index.h("button", { key: 'ff031cb9e97e5266d2b420fa112c74f1b8e958c8', type: "button", id: "toggle-visibility-button", class: "toggle-visibility-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, index.h("dso-icon", { key: 'b083a9c40f23c03fa7ccdae6d5866988a03fa8c6', icon: "layers" }), index.h("span", { key: '26e21895c90f6fe7475502d99a08c352a3731500' }, "Kaartlagen")), index.h("div", { key: '5a4f95aea4173650f54ad0e8559b1cbd756b66c0', class: "zoom-buttons" }, index.h("button", { key: '85956a69ce3b96beb62de7fb790b55f393def55e', type: "button", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, index.h("span", { key: '792a1b749a0f696a9363e9f36001ae440c87cdf6' }, "Zoom in"), index.h("dso-icon", { key: '6a16ea350fabb6c9efc85d8dc7ef81d8337e6530', icon: "plus" })), index.h("button", { key: '4e7082ff308233cfc8134b8c41eea8fce6426bc8', type: "button", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, index.h("span", { key: 'ce5f29ea7bd57bf337f08897b6fe379adc62ccfa' }, "Zoom uit"), index.h("dso-icon", { key: '86984bb1aa776bd43d253ff9df06de1f39649088', icon: "minus" }))), index.h("section", { key: '14facd077fcd83c6e62554b449d5d266cc17e988', hidden: this.hideContent }, index.h("header", { key: 'cb9167742d6ea080d449db8953867bf2d574ac4a' }, index.h("h2", { key: '8510908dcb3f41f08eea56b03b550fd5f474aedf' }, this.panelTitle), index.h("button", { key: '51ddf3ac8391e57fd444f848b78e0af62d741a2b', type: "button", class: "close-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, index.h("span", { key: '5da4553f483a7f30005aba593a020254f2e19f04' }, "Verberg paneel ", this.panelTitle), index.h("dso-icon", { key: 'd8aea35484873141c1456a63692e3ea66b35baf9', icon: "times" }))), index.h("dso-scrollable", { key: '8ba6c47069438469a7c7ed835418d36156f37250' }, index.h("div", { key: 'c709faeb80ea617835b961f944b4b04f670ea854', class: "content" }, index.h("slot", { key: 'c07de3abf2daaa2362069ac1c5980103da368721' }))))));
+        return (index.h(index.Host, { key: '9b1fd58e6ec50f4e31430ea5f78d1f89c1fd6544' }, index.h("button", { key: 'fb0ebffd7d770f6245b3145cb59463481e48523b', type: "button", id: "toggle-visibility-button", class: "toggle-visibility-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, index.h("dso-icon", { key: 'a9b72eba9544bd515597793a0eabb439eb893c6f', icon: "layers" }), index.h("span", { key: 'b08ebd940684073ed0e36570a1d210f96ea9f34c' }, "Kaartlagen")), index.h("div", { key: 'c87368541304a130fae4724e2a6fd0444d2fda7d', class: "zoom-buttons" }, index.h("button", { key: '3daabd704da61ce279c5cb045e53d2695bbd16b8', type: "button", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, index.h("span", { key: 'd4f0bcea93c350dde4738d989d4915b09a6dc67d' }, "Zoom in"), index.h("dso-icon", { key: '2dbe91b8bea77e37dc68dc6c92d34530163a65df', icon: "plus" })), index.h("button", { key: '63e154efe6fcf5a674d16bc0dcef5a78507aed9a', type: "button", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, index.h("span", { key: '43355e6cbcd8737edf26cada360b6cee7f3c63b8' }, "Zoom uit"), index.h("dso-icon", { key: '7d740262c989d1d2abb23055a97de467162fe06d', icon: "minus" }))), index.h("section", { key: 'c8792464eb8da4865b8232e284c512fe0e7562d6', hidden: this.hideContent }, index.h("header", { key: '76843f873e6c70a47e637779915797b11ee568a4' }, index.h("h2", { key: '1400d65a12ea5fb3c9a39c3e177e9f0d728e6977' }, this.panelTitle), index.h("button", { key: 'd60dbe4998dbfed1ef256d087669f768ec09f1dc', type: "button", class: "close-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, index.h("span", { key: 'bc71e0ee2a2fa0cbe73729949e24a30b1b781c93' }, "Verberg paneel ", this.panelTitle), index.h("dso-icon", { key: 'c2a9d4c08f0171d5ddba810e192d80ca86f226e2', icon: "times" }))), index.h("dso-scrollable", { key: 'b73dea1633c104e47398b4a51792962c93073b8c' }, index.h("div", { key: 'fafedd2b81834cf6b8e0c053942d226110c1c093', class: "content" }, index.h("slot", { key: 'e3677e8624184e0f6957433f5a266a13be4decb6' }))))));
     }
     static get watchers() { return {
         "open": ["watchOpen"]

package/dist/cjs/dso-map-overlays.cjs.entry.js

@@ -33,7 +33,7 @@ const MapOverlays = class {
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (index.h("fieldset", { key: '073773564a6419ec8c1b3b21556a60e5d5e84672', class: "form-group dso-checkboxes" }, index.h("legend", { key: 'aa16832400f3ebecccb21b307e81c46b7aefd3d3', class: "sr-only" }, "Kaartlagen"), index.h("div", { key: 'e68c259168ecbac1369da1522398606bc559d4b3', class: "dso-label-container" }, index.h("span", { key: '471a5cf1253fbbb21950edd1d9659736647b7229', class: "control-label", "aria-hidden": "true" }, "Kaartlagen")), index.h("div", { key: 'd1d798e12fdf4f7ad4119c632a142a24afc197be', class: "dso-field-container" }, this.overlays.map((overlay) => (index.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 ? index.h("p", { slot: "info" }, overlay.info) : null))))));
+        return (index.h("fieldset", { key: 'e5de5ba0398fb986203033e79fb89d56f9a14e44', class: "form-group dso-checkboxes" }, index.h("legend", { key: '1fa2242a3a4494a4f40c16f76ec861d9c5abe9ed', class: "sr-only" }, "Kaartlagen"), index.h("div", { key: '8cfa0e4c828ee0f980df84a94242440112d33a1e', class: "dso-label-container" }, index.h("span", { key: '8b0fc86a327f41e095443792ddd05b3dbafe5152', class: "control-label", "aria-hidden": "true" }, "Kaartlagen")), index.h("div", { key: 'b2c0465e7f662413d199b1c4c6d530f122d1d7bc', class: "dso-field-container" }, this.overlays.map((overlay) => (index.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 ? index.h("p", { slot: "info" }, overlay.info) : null))))));
     }
 };
 MapOverlays.style = DsoMapOverlaysStyle0;

package/dist/cjs/dso-mark-bar.cjs.entry.js

@@ -55,7 +55,7 @@ const MarkBar = class {
     render() {
         const current = this.current || 0;
         const totalCount = this.totalCount || 0;
-        return (index.h("div", { key: '3f25a3f9706b6ea7f9795d09717dfe7a0fa3aa17', class: "dso-mark-bar" }, index.h("div", { key: 'd5459197a0fd2a92fae1af76a9d9140a8a637e93', class: "dso-mark-bar-input" }, index.h("input", { key: '05e8e0f11dae7bde5e2b6551f1fdcab3a2637e74', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), index.h("label", { key: 'f4d48eeada8926cdd4ee08ec2ba53d1eb5b36c39', htmlFor: "search-input" }, index.h("dso-icon", { key: 'a0a7e4fd15b6bab81a899edfea312748ac873093', class: "dso-search-icon", icon: "search" }), index.h("span", { key: '964c53a4ea795547bacdc24b9914113eeb743421', class: "label-text" }, this.label)), index.h("button", { key: 'db57a96c2776cb1527edcd1f2b71491bda90dcec', type: "button", onClick: this.handleClear }, index.h("dso-icon", { key: '574f0778dba232f42d79e5c75a6807833c366be2', icon: "times" }), index.h("span", { key: '8095133482793e9eee3d7c6c7b59b003826ecb1f', class: "sr-only" }, "Zoekopdracht legen"))), index.h("div", { key: '57f03e3dfa3179d9d482b64aedc444ccc3983bc3', class: "dso-button-container" }, index.h("span", { key: '6b178e34dde7418604e5162948620d9c50a9afd3', class: "divider" }), index.h("button", { key: '03eb988b68da0b9c61f4c9b8ae1cf51509db4907', type: "button", onClick: this.handlePrevious, disabled: current <= 1 }, index.h("dso-icon", { key: '927a42bf0c1a86c572c43c731bdde9486863c85a', icon: "chevron-up", class: "hydrated" }), index.h("span", { key: '331fca19a6784193e1941aeb48c501aa24f3b14b', class: "sr-only" }, "Vorig zoekresultaat")), index.h("span", { key: '4558630d29ad6c9816e05a71665b62fbfc903830' }, current, "/", totalCount), index.h("button", { key: '359c0c6c0c4a95f880385682ae9a14542883f1e8', type: "button", onClick: this.handleNext, disabled: current >= totalCount }, index.h("dso-icon", { key: 'd7577c5ccb76745482543969c60a4f78fd352834', icon: "chevron-down", class: "hydrated" }), index.h("span", { key: 'fe823e10efa4906e7e9fe04f6de5b2fa78473e6a', class: "sr-only" }, "Volgend zoekresultaat")))));
+        return (index.h("div", { key: 'd66b3ca5cc3c0ec5fb32cb673ac93672e885bd8e', class: "dso-mark-bar" }, index.h("div", { key: 'bc42aea89efe2c211acf7a0d38e6a7dd6be6a6e5', class: "dso-mark-bar-input" }, index.h("input", { key: '7413ba190a51be189a03eb7fb2ea5187807b40f1', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), index.h("label", { key: 'd1284be2c862e4720c1eeb0bdfdc887e507718f2', htmlFor: "search-input" }, index.h("dso-icon", { key: '032f8b0cb7fcd85a42c71864e30eb020150963f7', class: "dso-search-icon", icon: "search" }), index.h("span", { key: '5711b61364f1059ea2ec2e85fe5e3c7da18c4035', class: "label-text" }, this.label)), index.h("button", { key: 'c9db372c8da8ff018ead0711adc944b61503e8c4', type: "button", onClick: this.handleClear }, index.h("dso-icon", { key: 'bdfda039b8c488dcd3a96d25a7d9757becdd9c79', icon: "times" }), index.h("span", { key: '9a8935a37924417c72fecc32026aed6b1bd67c10', class: "sr-only" }, "Zoekopdracht legen"))), index.h("div", { key: 'c4d662a6ae7504f695f831bc27b4634407fb4c59', class: "dso-button-container" }, index.h("span", { key: '39222d45e6d8d614301b8c007d9a5d437f178ad3', class: "divider" }), index.h("button", { key: '7c4f0c35bd52de9923b2c3676a70cf673c7270e2', type: "button", onClick: this.handlePrevious, disabled: current <= 1 }, index.h("dso-icon", { key: '05b230ddbab54f81eecd659e43ccc050819601c6', icon: "chevron-up", class: "hydrated" }), index.h("span", { key: 'f6061e9cb74d3b7e7efa8829388e8b52285f835d', class: "sr-only" }, "Vorig zoekresultaat")), index.h("span", { key: '46fe7ddf2359795bf0323f34952c2985fe5c6c32' }, current, "/", totalCount), index.h("button", { key: 'abc7272e3fc76b2eb556d318852672395070ef11', type: "button", onClick: this.handleNext, disabled: current >= totalCount }, index.h("dso-icon", { key: '30d7922d66334ed7c97cd848ff10e2691249755b', icon: "chevron-down", class: "hydrated" }), index.h("span", { key: '16b5e0a05ca46307c73bada038922ac98bc6a5ec', class: "sr-only" }, "Volgend zoekresultaat")))));
     }
 };
 MarkBar.style = DsoMarkBarStyle0;

package/dist/cjs/dso-modal.cjs.entry.js

@@ -43,10 +43,10 @@ const Modal = class {
     }
     render() {
         var _a;
-        return (index.h("dialog", { key: 'ef8b4c0f14e31fbfb1b8c0befc9083231e00e197', class: "dso-modal", role: (_a = this.role) !== null && _a !== void 0 ? _a : undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onCancel: (e) => {
+        return (index.h("dialog", { key: '0c88aa98a005a1477f2a989386981ca658bf631f', class: "dso-modal", role: (_a = this.role) !== 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 });
-            } }, index.h("div", { key: '432dda3a08b11ce0461115a498677cbd82d8c17e', class: "dso-dialog", role: "document" }, this.modalTitle ? (index.h("div", { class: "dso-header" }, index.h("h2", { id: this.ariaId }, this.modalTitle), this.showCloseButton && (index.h("button", { type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, index.h("dso-icon", { icon: "times" }), index.h("span", { class: "sr-only" }, "Sluiten"))))) : (index.h("span", { class: "sr-only", id: this.ariaId }, "Dialoog")), index.h("dso-scrollable", { key: '386f642a2f1a94e70eb12d7b368b8fc4a93a164c' }, index.h("div", { key: 'cbf702ecb3282985e67b40a90de623918f14a6d5', class: "dso-body", tabIndex: 0 }, index.h("slot", { key: '510e7c9774eec383fe2a5f8f9af2283926ff7ae1', name: "body" }))), this.hasFooter && (index.h("div", { key: '2ec34e4aebbfd32b8843f91f75edd12cb6ec39b9', class: "dso-footer" }, index.h("slot", { key: 'b8e274a38461534c51dc79497ae4d6b04f1029c7', name: "footer" }))))));
+            } }, index.h("div", { key: 'b809d3244393b51e7c11ffd48ab6491fb5d2fa0d', class: "dso-dialog", role: "document" }, this.modalTitle ? (index.h("div", { class: "dso-header" }, index.h("h2", { id: this.ariaId }, this.modalTitle), this.showCloseButton && (index.h("button", { type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, index.h("dso-icon", { icon: "times" }), index.h("span", { class: "sr-only" }, "Sluiten"))))) : (index.h("span", { class: "sr-only", id: this.ariaId }, "Dialoog")), index.h("dso-scrollable", { key: 'ff3a4a8f8f6962462cb71a4d4a7410de34c01130' }, index.h("div", { key: '8fbc99c87a885485d7388469f757fcb54c89cc76', class: "dso-body", tabIndex: 0 }, index.h("slot", { key: '9c9f7a379a1c5641ac270035fa3c7abf3f628c67', name: "body" }))), this.hasFooter && (index.h("div", { key: '8bb55b4d952e775a35d69a5f4ec7827cc2227a90', class: "dso-footer" }, index.h("slot", { key: '97e8aea9e2565e7696cc34edd05052a7f566a701', name: "footer" }))))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/dso-panel.cjs.entry.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ac055dd1.js');
+
+const panelCss = ":host{display:block;border:1px solid #a8bcaf;border-radius:4px}*,*::after,*::before{box-sizing:border-box}.panel-heading{display:flex;gap:16px;justify-content:space-between;align-items:flex-start;padding-block:8px;padding-inline:16px 8px;border-block-end:1px solid #a8bcaf;border-start-start-radius:4px;border-start-end-radius:4px;background-color:#e9eeeb;color:#275937}.panel-heading .sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}::slotted([slot=heading]){margin:0 !important;font-size:1rem !important;font-weight:600 !important;line-height:1.5 !important}.panel-close{display:inline-block;inline-size:24px;aspect-ratio:1/1;padding:0;border:0;background-color:transparent;color:#275937;cursor:pointer}.panel-body{padding-block:16px;padding-inline:16px}";
+const DsoPanelStyle0 = panelCss;
+
+const Panel = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dsoCloseClick = index.createEvent(this, "dsoCloseClick", 7);
+    }
+    render() {
+        return (index.h("div", { key: '022f08b90fec917193c835d5464bba3c82dcb591', class: "dso-panel" }, index.h("div", { key: '729d9d77542cef2f42d8327d801db73ebc00093c', class: "panel-heading" }, index.h("slot", { key: '9afc64d9c40b150f2c06d108fc3e6c0c5b9ee9d9', name: "heading" }), index.h("button", { key: '23a5e3c7ca055069f735a112c305199d203a0554', type: "button", class: "panel-close", onClick: (e) => this.dsoCloseClick.emit({ originalEvent: e }) }, index.h("dso-icon", { key: '193d6bbf93e4b0d994c6eac62c50728ec905c472', icon: "times" }), index.h("span", { key: '319a762facf6abe17541cef1c3a63a4d5bba78cb', class: "sr-only" }, "Sluiten"))), index.h("div", { key: '4739d349f4df3b7ff8500c3da34adafa7246b2da', class: "panel-body" }, index.h("slot", { key: '49784b09addb82d7be1f102f2d2ee8ea499beed3' }))));
+    }
+};
+Panel.style = DsoPanelStyle0;
+
+exports.dso_panel = Panel;
+
+//# sourceMappingURL=dso-panel.cjs.entry.js.map

package/dist/cjs/dso-panel.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"dso-panel.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,QAAQ,GAAG,o0BAAo0B,CAAC;AACt1B,uBAAe,QAAQ;;MCcV,KAAK;;;;;IAOhB,MAAM;QACJ,QACEA,kEAAK,KAAK,EAAC,WAAW,IACpBA,kEAAK,KAAK,EAAC,eAAe,IACxBA,mEAAM,IAAI,EAAC,SAAS,GAAG,EACvBA,qEAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,aAAa,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,IACrGA,uEAAU,IAAI,EAAC,OAAO,GAAY,EAClCA,mEAAM,KAAK,EAAC,SAAS,cAAe,CAC7B,CACL,EACNA,kEAAK,KAAK,EAAC,YAAY,IACrBA,oEAAa,CACT,CACF,EACN;KACH;;;;;;","names":["h"],"sources":["src/components/panel/panel.scss?tag=dso-panel&encapsulation=shadow","src/components/panel/panel.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/di\";\r\n\r\n:host {\r\n  display: block;\r\n\r\n  border: 1px solid colors.$bosgroen-40;\r\n  border-radius: units.$u1 * 0.5;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.panel-heading {\r\n  display: flex;\r\n  gap: units.$u2;\r\n  justify-content: space-between;\r\n  align-items: flex-start;\r\n\r\n  padding-block: units.$u1;\r\n  padding-inline: units.$u2 units.$u1;\r\n\r\n  border-block-end: 1px solid colors.$bosgroen-40;\r\n\r\n  border-start-start-radius: units.$u1 * 0.5;\r\n  border-start-end-radius: units.$u1 * 0.5;\r\n\r\n  background-color: colors.$bosgroen-10;\r\n\r\n  color: colors.$bosgroen;\r\n\r\n  .sr-only {\r\n    @include utilities.sr-only();\r\n  }\r\n}\r\n\r\n::slotted([slot=\"heading\"]) {\r\n  margin: 0 !important;\r\n  font-size: 1rem !important;\r\n  font-weight: 600 !important;\r\n  line-height: 1.5 !important;\r\n}\r\n\r\n.panel-close {\r\n  display: inline-block;\r\n\r\n  inline-size: units.$u3;\r\n  aspect-ratio: 1 / 1;\r\n\r\n  padding: 0;\r\n\r\n  border: 0;\r\n\r\n  background-color: transparent;\r\n\r\n  color: colors.$bosgroen;\r\n\r\n  cursor: pointer;\r\n}\r\n\r\n.panel-body {\r\n  padding-block: units.$u2;\r\n  padding-inline: units.$u2;\r\n}\r\n","import { Component, ComponentInterface, Event, EventEmitter, h } from \"@stencil/core\";\r\n\r\nexport interface PanelCloseEvent {\r\n  originalEvent: Event;\r\n}\r\n\r\n/**\r\n * @slot - The contents to be highlighted within the panel\r\n * @slot heading - The heading (h2 - h6) with the title of the panel\r\n */\r\n@Component({\r\n  tag: \"dso-panel\",\r\n  styleUrl: \"panel.scss\",\r\n  shadow: true,\r\n})\r\nexport class Panel implements ComponentInterface {\r\n  /**\r\n   * Emitted when the user click the close button.\r\n   */\r\n  @Event()\r\n  dsoCloseClick!: EventEmitter<PanelCloseEvent>;\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"dso-panel\">\r\n        <div class=\"panel-heading\">\r\n          <slot name=\"heading\" />\r\n          <button type=\"button\" class=\"panel-close\" onClick={(e) => this.dsoCloseClick.emit({ originalEvent: e })}>\r\n            <dso-icon icon=\"times\"></dso-icon>\r\n            <span class=\"sr-only\">Sluiten</span>\r\n          </button>\r\n        </div>\r\n        <div class=\"panel-body\">\r\n          <slot></slot>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/cjs/dso-progress-bar.cjs.entry.js

@@ -17,7 +17,7 @@ const ProgressBar = class {
     render() {
         const progressNumber = Math.round(this.progress);
         const progressPercentage = `${progressNumber}%`;
-        return (index.h("div", { key: '96fe14c14b6f85aefdd73216cff05ba4343cbea0', class: "progress" }, index.h("span", { key: 'd624321fa47a93511ada3578bd90749a6d1cf81e', class: "progress-bar", role: "progressbar", "aria-labelledby": "progress-bar-label", "aria-valuenow": progressNumber, "aria-valuemin": this.min, "aria-valuemax": this.max }, index.h("span", { key: '5d99166ae52f35caf5db01c580a2271032b05ba4', style: { width: `${progressPercentage}` } })), index.h("span", { key: 'cc4590131135f00a1cc9ad79b31eb21ed28e8915', id: "progress-bar-label" }, index.h("slot", { key: '3a945783e26101135dae464984ff9bc60d2f87c6' }))));
+        return (index.h("div", { key: 'bdc673d9d6081248f02eb13bf4cc45e97ce9d754', class: "progress" }, index.h("span", { key: 'fc6057145d710db59a2cd6e4ac62fc98e3663211', class: "progress-bar", role: "progressbar", "aria-labelledby": "progress-bar-label", "aria-valuenow": progressNumber, "aria-valuemin": this.min, "aria-valuemax": this.max }, index.h("span", { key: 'c559fdf1e1777c56acf960c8cbf6154f53da393c', style: { width: `${progressPercentage}` } })), index.h("span", { key: '42182aff70df5a667494d0c0e294a72349c194db', id: "progress-bar-label" }, index.h("slot", { key: 'fdd9990227e7ef80254da1722573fc4447f9ae90' }))));
     }
 };
 ProgressBar.style = DsoProgressBarStyle0;

package/dist/cjs/dso-progress-indicator.cjs.entry.js

@@ -15,7 +15,7 @@ const Progressindicator = class {
         this.block = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: '0a1a894afcdac9908d711a0b19d6075de5b3e9f6' }, index.h("span", { key: '906b0021e3fe10bfd005531a2537042db4eaae21', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, index.h("dso-icon", { key: '79ae272ef0159381ef5ef0ee561fb9801db232ca', icon: "spinner" })), index.h("span", { key: '977da0997e2a977642c05910934dfee5a2bb080f', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label)));
+        return (index.h(index.Host, { key: '04ef421f4e4c9cf89ed34be36db74f15a6748420' }, index.h("span", { key: 'b87ebbc00e72620efb489705810a410ab48960ca', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, index.h("dso-icon", { key: 'be0db28fba99c69709391f20dc12b9d09b09543f', icon: "spinner" })), index.h("span", { key: '4aacf84583df42fa43882edd37ff5ae16c94c075', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label)));
     }
 };
 Progressindicator.style = DsoProgressIndicatorStyle0;

package/dist/cjs/dso-renvooi_2.cjs.entry.js

@@ -56,7 +56,7 @@ const SlideToggle = class {
         this.hasVisibleLabel = this.host.querySelector("*") !== null;
     }
     render() {
-        return (index.h(index.Fragment, null, index.h("button", Object.assign({ key: '3001433a806662229d34140abcbd38c73b99986d', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e) }, (this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), (this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {})), index.h("svg", { key: '65022555e0e78ebe9dff5dede742b981e8ffb836', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, index.h("g", { key: '739ab61860eaacd80c6784aa963800b6142470c3', fill: "none", "fill-rule": "evenodd" }, index.h("rect", { key: 'c62aac464d6de773aaa619f9adb32b1d47fdb41c', width: "40", height: "20", fill: "currentColor", rx: "10" }), index.h("circle", { key: '76b654950ec496a146b376807350a17d87ab8c8c', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (index.h("label", { key: 'f9d9ddb1f67228a90e8de5b25d5571691ab2b2da', htmlFor: this.identifier }, index.h("slot", { key: '57dfa71d6b01ed9bd29690952487477d7563d04f' })))));
+        return (index.h(index.Fragment, null, index.h("button", Object.assign({ key: 'db116bc4038f16564db934d76c61a7736b55e99a', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e) }, (this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), (this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {})), index.h("svg", { key: '17aea2f95f7dd1f7f8bfcfb12d2c27347c2bf2a0', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, index.h("g", { key: 'bd837d6f3e5171c7f465cdbc28b0196b25d196ef', fill: "none", "fill-rule": "evenodd" }, index.h("rect", { key: 'b74ad3db6f44fc87860074efaa52acf34e76ff93', width: "40", height: "20", fill: "currentColor", rx: "10" }), index.h("circle", { key: 'e0f0b2e587dbd4ef71c072b6bb1b491cda527c79', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (index.h("label", { key: '343cbc919806fd61c79b5da19fb139b070ae71f2', htmlFor: this.identifier }, index.h("slot", { key: 'd1b665086fb74c9173b4f2ffaf01030dd1c44861' })))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/dso-responsive-element.cjs.entry.js

@@ -50,7 +50,7 @@ const ResponsiveElement = class {
         this.observer.unobserve(this.host);
     }
     render() {
-        return (index.h(index.Host, { key: '8266446b235d475eac97f4dd617786e77bd97426', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, index.h("slot", { key: '8caa6765bacb897352c4a74fa01c32ec5103ea08' })));
+        return (index.h(index.Host, { key: '9f8ba3138337e6500b7dc1469f59b7f5c37286ab', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, index.h("slot", { key: '343a43ce9e959c71ab0ec49060d8896ab68e345d' })));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/dso-scrollable.cjs.entry.js

@@ -91,9 +91,9 @@ const Scrollable = class {
         this.slottedElements.forEach((element) => resizeObserver.unobserve(element));
     }
     render() {
-        return (index$1.h("div", { key: '8d1d55884570901b68e13bc4a903c2a67b662cc6', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, index$1.h("div", { key: 'aaf9213d32633be9e2b058186ef95568a655d612', ref: (el) => (this.scrollContainerDiv = el), class: clsx.clsx("dso-scroll-container", {
+        return (index$1.h("div", { key: '7ee4b091abcc01621390845a8293f16ff4044746', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, index$1.h("div", { key: '9cee13a5d094ba844f2069a253d37cfc2342fed7', ref: (el) => (this.scrollContainerDiv = el), class: clsx.clsx("dso-scroll-container", {
                 [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== "noScroll",
-            }), onScroll: () => this._setScrollState() }, index$1.h("slot", { key: '3284485edce1479ca43a6c090fb0ad1fdc50080c' }))));
+            }), onScroll: () => this._setScrollState() }, index$1.h("slot", { key: '2473a4ed767a8d6e8c76c63f2054d852f051ac45' }))));
     }
     get host() { return index$1.getElement(this); }
 };

package/dist/cjs/dso-toggletip.cjs.entry.js

@@ -44,7 +44,7 @@ const Toggletip = class {
         this.secondary = undefined;
     }
     render() {
-        return (index.h(index.Fragment, null, index.h("dso-info-button", { key: 'cfc7736dca4cee998cef8e73dee26f820735ee74', "aria-describedby": "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary, ref: (element) => (this.infoButton = element) }), index.h("dso-tooltip", { key: 'abbbc5fffad620f0853c5bac493dc52363b36cc8', stateless: true, descriptive: true, id: "toggle", strategy: "absolute", active: this.active, position: this.position, small: this.small }, index.h("slot", { key: '3ace50d07f07fca51066186a2d081e72190f7f6c' }))));
+        return (index.h(index.Fragment, null, index.h("dso-info-button", { key: '1f3e942335361f2f99d9f63e8787835e6832cb7f', "aria-describedby": "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary, ref: (element) => (this.infoButton = element) }), index.h("dso-tooltip", { key: '5c0b05d39e73012f270627ef11547761684074ea', stateless: true, descriptive: true, id: "toggle", strategy: "absolute", active: this.active, position: this.position, small: this.small }, index.h("slot", { key: '6946258b6128af9d14f5bd76635f8f7b8ff288de' }))));
     }
     get host() { return index.getElement(this); }
 };