@dso-toolkit/core 80.0.0 → 81.0.0

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

@@ -10,13 +10,13 @@ export class InputRange {
         const min = this.min || 0;
         const max = this.max || 100;
         const step = this.step || 1;
-        return (h(Fragment, null, this.description && (h("span", { key: '10cce6802d9237ac16b82cab7c22c96ba6c6351a', id: "description", hidden: true }, this.description)), h("span", { key: '752793eb65c306843b90d281fc4b43dbd8f39bcd', class: "counter min", "aria-hidden": "true" }, min, this.unit), h("input", { key: 'f2ccb4d8a20c54a1a7f506cf240b7ea7ea101e8b', type: "range", min: this.min, max: this.max, value: this.value, class: "input", "aria-label": this.label, "aria-describedby": this.description ? "description" : undefined, onChange: (event) => this.dsoChange.emit({
+        return (h(Fragment, null, this.description && (h("span", { key: '0c75a4a89ead97c9b50838f0c975c1419fff9c29', id: "description", hidden: true }, this.description)), h("span", { key: '77a65b197480a6e24e73efb592fae58488cb3635', class: "counter min", "aria-hidden": "true" }, min, this.unit), h("input", { key: '9494837e51c48ff8be17cd482867f4c7691b30e6', type: "range", min: this.min, max: this.max, value: this.value, class: "input", "aria-label": this.label, "aria-describedby": this.description ? "description" : undefined, onChange: (event) => this.dsoChange.emit({
                 originalEvent: event,
                 value: event.target instanceof HTMLInputElement ? parseInt(event.target.value, 10) : undefined,
                 max,
                 min,
                 step,
-            }) }), h("span", { key: 'ffafaf37c7681a94df522f66e1bc4c8ce35494cc', class: "counter max", "aria-hidden": "true" }, max, this.unit)));
+            }) }), h("span", { key: 'efa3762a2f4775b3445efa9482ec4851b04a0889', class: "counter max", "aria-hidden": "true" }, max, this.unit)));
     }
     static get is() { return "dso-input-range"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/label/label.css

@@ -280,6 +280,7 @@
 }
 .dso-label.dso-label-toegevoegd {
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
+  --_dso-ozon-content-toggletip-color: colors.$zwart;
 }
 .dso-label.dso-label-verwijderd {
   --_dso-alert-success-border-color: #39870c;
@@ -309,7 +310,9 @@
   background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
 .dso-label.dso-label-verwijderd {
+  --_dso-ozon-content-toggletip-color: colors.$zwart;
   text-decoration: line-through;
+  --_dso-ozon-content-toggletip-text-decoration: underline line-through;
 }
 @media screen and (min--moz-device-pixel-ratio: 0) {
   .dso-label.dso-label-verwijderd {

package/dist/collection/components/label/label.js

@@ -94,13 +94,13 @@ export class Label {
         this.isTruncated = false;
     }
     render() {
-        return (h(Fragment, { key: 'cb1e816c5125dd32494e323f8ec4c48ad701cdda' }, h("span", { key: '2967b653516412692e28fd7db19e860a63576147', "aria-describedby": this.isTruncated ? "toggle-anchor" : null, class: clsx("dso-label", {
+        return (h(Fragment, { key: '269e8ab276b564569b719be9858e32b8199d8c45' }, h("span", { key: '283dde74a7423b2e355ffb237bc3551312ee7cee', "aria-describedby": this.isTruncated ? "toggle-anchor" : null, class: clsx("dso-label", {
                 [`dso-label-${this.status}`]: this.status,
                 "dso-compact": this.compact && !this.removable,
                 "dso-hover": this.removeHover || this.removeFocus,
-            }) }, h("slot", { key: 'd0dba7bf64d2bed153e7ea4ab9a9abc15eb6bd41', name: "symbol" }), h("span", { key: '00ec26450674ef900dd5fd32bd72edbe5ff80111', class: clsx("dso-label-content", {
+            }) }, h("slot", { key: '47649523a9d791f810456dcaab6c0d6d394dbe47', name: "symbol" }), h("span", { key: '0f6699fc606d3b83125f69c774f9e96366bad2a1', class: clsx("dso-label-content", {
                 "dso-truncate": !!this.truncate,
-            }), ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.isTruncated ? 0 : undefined, onMouseEnter: () => (this.textHover = true), onMouseLeave: () => (this.textHover = false), onFocus: () => (this.textFocus = true), onBlur: () => (this.textFocus = false) }, h("slot", { key: '6cc69332961817bdfa40e691addbf227efb27900' })), this.removable && (h("dso-icon-button", { key: 'ff4ebb1e4ea6dbe05826a6a2c9c7d8779b02b96d', variant: "tertiary", icon: "times", label: `Verwijder: ${this.labelText}`, onDsoClick: (e) => this.dsoRemoveClick.emit(e.detail.originalEvent), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }))), this.isTruncated && (h("dso-tooltip", { key: '99377bdeaaaecfe0f71363417bbed46ea9a0af89', stateless: true, id: "toggle-anchor", active: this.textHover || this.textFocus, position: "top", strategy: "absolute" }, this.labelText))));
+            }), ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.isTruncated ? 0 : undefined, onMouseEnter: () => (this.textHover = true), onMouseLeave: () => (this.textHover = false), onFocus: () => (this.textFocus = true), onBlur: () => (this.textFocus = false) }, h("slot", { key: 'dd0b563860ecc5f46f2c24111ec18ddf863ed8eb' })), this.removable && (h("dso-icon-button", { key: 'bf62343f5f8ece77887e69bc262d9e4511fa1f81', variant: "tertiary", icon: "times", label: `Verwijder: ${this.labelText}`, onDsoClick: (e) => this.dsoRemoveClick.emit(e.detail.originalEvent), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }))), this.isTruncated && (h("dso-tooltip", { key: '29a5fc440662776606faaf5b2dc9526411ae7e0a', stateless: true, id: "toggle-anchor", active: this.textHover || this.textFocus, position: "top", strategy: "absolute" }, this.labelText))));
     }
     static get is() { return "dso-label"; }
     static get encapsulation() { return "shadow"; }

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

@@ -31,7 +31,7 @@ export class LegendItem {
     render() {
         const hasSymbol = this.symbolSlottedElement !== null;
         const hasOptions = this.optionsSlottedElement !== null;
-        return (h(Host, { key: '686703aa9893d05bed991defe241b259747c01a5', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: '6c1ea3ddd9a2d3678323fc571a673fe00ed6c307', class: clsx("legend-item", { "legend-item-symbol": hasSymbol }) }, hasSymbol && (h("div", { key: '0a6e7b22de4d82f59c877b2e47a20ddf1cb547a3' }, h("slot", { key: 'a35d4e4d1129cc8e69d609982d39c45daa7d9f3e', name: "symbol" }))), h("div", { key: 'ffe44f94e8761e47c44ca611afea85e212749350' }, h("slot", { key: '65a655bf0b26901685ba661dc9e278ed53a5a534' })), this.disabled && this.disabledMessage && (h("dso-toggletip", { key: '4b94a3c1eb05758f7f17d791469684c129b6ea5e', position: "bottom" }, this.disabledMessage)), h("div", { key: 'ca5d84a936861021edb7ceb44f97323188fcb12b', class: "legend-item-right-content" }, hasOptions && !this.disabled && (h("dso-icon-button", { key: '55d91fc16aabc6f4627a756c13463e06339d7e0e', label: "Opties", icon: "more", variant: "tertiary", class: { active: this.showOptions }, id: "edit-button", onDsoClick: () => (this.showOptions = !this.showOptions) })), this.activatable && (h("dso-slide-toggle", { key: '6c46588131c000ef44120398e03b0be9a74ab42c', accessibleLabel: "Maak actief", checked: this.active, disabled: this.disabled, onDsoActiveChange: (e) => this.dsoActiveChange.emit({ current: Boolean(this.active), next: !this.active, originalEvent: e }) })))), hasOptions && (h("div", { key: '7b89eef1efd4988d41026296591ed6cc174272a2', hidden: this.disabled || !this.showOptions, class: "options" }, h("slot", { key: '11571117ac48a224af9b9bd96df6a21ca2a29335', name: "options" })))));
+        return (h(Host, { key: '38be1df12f1f113816674acf519ca76556f1403a', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: '9fddb3543595f36d22ec4142ee5fba58e3c990ab', class: clsx("legend-item", { "legend-item-symbol": hasSymbol }) }, hasSymbol && (h("div", { key: 'b9df4829c8cc3c2126266f34ce88cb1d53eafff7' }, h("slot", { key: '495da7eb326370bb0feee44527a809507e6e74e6', name: "symbol" }))), h("div", { key: '3bdf1190237821c2bef9884a14f04ab017c4087b' }, h("slot", { key: '377992fc61ae3161abdf7abe3f71f86e8e894993' })), this.disabled && this.disabledMessage && (h("dso-toggletip", { key: 'ef6fb8d9106dc9e89f97d9b21a8a7448639deef4', position: "bottom" }, this.disabledMessage)), h("div", { key: '560eb094f29cb4c0a61bc6dd34f36dee6e0ff999', class: "legend-item-right-content" }, hasOptions && !this.disabled && (h("dso-icon-button", { key: 'a79be1bd5099dc462a49d23ec71ea904f24b017e', label: "Opties", icon: "more", variant: "tertiary", class: { active: this.showOptions }, id: "edit-button", onDsoClick: () => (this.showOptions = !this.showOptions) })), this.activatable && (h("dso-slide-toggle", { key: '17bd79c80420e0c49200eaaf1e27e9e5ee341756', accessibleLabel: "Maak actief", checked: this.active, disabled: this.disabled, onDsoActiveChange: (e) => this.dsoActiveChange.emit({ current: Boolean(this.active), next: !this.active, originalEvent: e }) })))), hasOptions && (h("div", { key: 'ed80008eaa2043b2cf48d994f9702289e6ccecbb', hidden: this.disabled || !this.showOptions, class: "options" }, h("slot", { key: '1b3f645207191ddb22434c859c13107724f7c190', name: "options" })))));
     }
     static get is() { return "dso-legend-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -90,29 +90,16 @@
   margin-inline-start: 8px;
 }
 .dso-tertiary dso-icon + span:not(.sr-only),
-.dso-tertiary svg.di + span:not(.sr-only),
-.dso-tertiary span:not(.sr-only) + dso-icon,
-.dso-tertiary span:not(.sr-only) + svg.di {
+.dso-tertiary span:not(.sr-only) + dso-icon {
   margin-inline-start: 8px;
 }
-.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),
-.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),
-.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,
-.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {
-  margin-inline-start: 4px;
-}
 .dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),
 .dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),
-.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),
-.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),
-.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,
-.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,
 .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],
 .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {
   margin-inline-start: 0;
 }
 .dso-tertiary dso-icon,
-.dso-tertiary svg.di,
 .dso-tertiary span {
   vertical-align: middle;
 }

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

@@ -67,7 +67,7 @@ export class ListButton {
     }
     render() {
         const selected = this.checked || (this.count !== undefined && this.count > 0);
-        return (h("div", { key: '0b37e11b902caa51517815e5e6611d9a487c02d4', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: 'df0de94d57ad3c1420421867cb2fa185caa03f4b', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("dso-selectable", { key: '579bf88e96f44505bd5b7b70e15f332416a39ec3', type: "checkbox", value: "list-button", name: "naam", checked: selected, disabled: this.disabled }, this.label, this.sublabel && h("span", { key: '7aba20871104e042986a071ad2a82aef9b0bc26b', class: "sr-only" }, " ", this.sublabel), this.subcontentSlot && (h("span", { key: '772c09a4fe393b10ff3d1996e307557f3c301b37', class: "sr-only" }, this.subcontentPrefix && this.subcontentPrefix + ":", " ", h("span", { key: '64715a207f0fcedb22c9b777249b56cdf9e1528e', innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && h("span", { key: '7ea31d7e3b7276ad0dda4ee09738929d2a3df418', class: "dso-sublabel" }, this.sublabel), this.subcontentSlot && (h("div", { key: '302368b9c0914043d4d3a629427a2102ebc1e0bb', class: "subcontent" }, h("slot", { key: 'cd32b056e94a40ae2eeffac0fe6d213eaa88b6ae', name: "subcontent" })))), this.count !== undefined && this.count > 0 && (h("div", { key: 'd20d5a677a0a2a984cf9e4a96f8f1598a1b35020', class: "dso-input-number" }, this.count > 1 && (h(Fragment, { key: '1d41e3942d6639d3d4164edcb9058e338ec38512' }, h("dso-icon-button", { key: '8612c6101f03760764300de0e5cf89981d0ab70b', label: "Aantal verlagen", variant: "tertiary", icon: "minus-circle", disabled: this.count === Number(this.min) || this.disabled, onDsoClick: (e) => this.stepValue(e, "decrement") }), h("span", { key: 'cf36ad0a3ca59cfacc07da1253d88d6a3ececff4', class: "dso-input-step-counter", "aria-label": "Aantal", "aria-live": "polite" }, this.count))), h("dso-icon-button", { key: 'be29f17f6b1d759a985f592e6c135d3d4346cdc3', label: "Aantal verhogen", variant: "tertiary", icon: "plus-circle", disabled: this.count === Number(this.max) || this.disabled, onDsoClick: (e) => this.stepValue(e, "increment") })))));
+        return (h("div", { key: '8cbfa76101157d473ca590fae8abb9dc0b21ed4f', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: '827c846d4b1f675c8c1cfdb88e74d8e1c6f89a25', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("dso-selectable", { key: '8d6dd54020dafcb0422299ac5c8a22b3a40940e1', type: "checkbox", value: "list-button", name: "naam", checked: selected, disabled: this.disabled }, this.label, this.sublabel && h("span", { key: 'f4977f991eb94ed7a39c52dc4a1080329f62516c', class: "sr-only" }, " ", this.sublabel), this.subcontentSlot && (h("span", { key: 'cbbe81498a4fa41bf56562912dfd1970bf8ba7ea', class: "sr-only" }, this.subcontentPrefix && this.subcontentPrefix + ":", " ", h("span", { key: '253b1cfea57ecfb1c217caa59ec110cd0c727c28', innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && h("span", { key: 'f9ac1b6becfe6437862ecd53686ddfc1173ee859', class: "dso-sublabel" }, this.sublabel), this.subcontentSlot && (h("div", { key: 'b46d7fd959d085c6485c79dd50e15d4ad6c21d0c', class: "subcontent" }, h("slot", { key: 'a482b7d5837ccded712c9586fa90a7e47232b768', name: "subcontent" })))), this.count !== undefined && this.count > 0 && (h("div", { key: 'be7eeb3245496ddf7c46a2ad964b94b3f569b2cf', class: "dso-input-number" }, this.count > 1 && (h(Fragment, { key: 'afc63a9435f731bb4475be5bcfaea77da68fd80e' }, h("dso-icon-button", { key: '231403e30c4475e11b3615d7a5b9360cf548a8a9', label: "Aantal verlagen", variant: "tertiary", icon: "minus-circle", disabled: this.count === Number(this.min) || this.disabled, onDsoClick: (e) => this.stepValue(e, "decrement") }), h("span", { key: '18907024014d48c2c421898b009d7675748d5cab', class: "dso-input-step-counter", "aria-label": "Aantal", "aria-live": "polite" }, this.count))), h("dso-icon-button", { key: '08d683773392eb6248a7b4698473321757d90c40', label: "Aantal verhogen", variant: "tertiary", icon: "plus-circle", disabled: this.count === Number(this.max) || this.disabled, onDsoClick: (e) => this.stepValue(e, "increment") })))));
     }
     static get is() { return "dso-list-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/logo/logo.js

@@ -23,7 +23,7 @@ export class Logo {
     }
     render() {
         return (h(Fragment, null, this.logoUrl ? (h("a", { class: "logo-url", href: this.logoUrl, onClick: this.handleLogoClick }, h(DsoLogo, { name: this.name }))) : (h(DsoLogo, { name: this.name })), this.label &&
-            (!this.labelUrl ? (h("span", { class: "logo-label" }, this.label)) : (h("a", { class: "logo-label-url", href: this.labelUrl, onClick: this.handleLabelClick }, h("span", { class: "logo-label" }, this.label)))), this.ribbon && h("div", { key: '54ea3fca79e32f2b8787bfd5e0e0d0b2176975ee', class: "logo-ribbon" }, this.ribbon)));
+            (!this.labelUrl ? (h("span", { class: "logo-label" }, this.label)) : (h("a", { class: "logo-label-url", href: this.labelUrl, onClick: this.handleLabelClick }, h("span", { class: "logo-label" }, this.label)))), this.ribbon && h("div", { key: '443ca86b8144c0d1a77f4fbe1312135ad76b1124', class: "logo-ribbon" }, this.ribbon)));
     }
     static get is() { return "dso-logo"; }
     static get encapsulation() { return "shadow"; }

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

@@ -27,7 +27,7 @@ export class MapBaseLayers {
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: '85f4a5b0520f18664c2c01c0a5b8907abd7ce07c', class: "form-group dso-radios" }, h("legend", { key: 'd53cbcc42cd945d8c9769298c4250d541ee55763', class: "sr-only" }, "Achtergrond"), h("div", { key: '59a456cab1c6786585399b4db7717d884025d9df', class: "dso-label-container" }, h("span", { key: 'a45a10ca3a86ad419488650205cedf1052060d59', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: '011987a3dc616822b734f09e68b18f46b7310e2f', class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[baseLayer.id] = ref), onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name, baseLayer.info ? h("p", { slot: "info" }, baseLayer.info) : null))))));
+        return (h("fieldset", { key: '82499cc4e8f841a055b61a3d380f63273159eff6', class: "form-group dso-radios" }, h("legend", { key: 'bee0a0eb7939f1849ff8c7c28f195d6d0ee4eb46', class: "sr-only" }, "Achtergrond"), h("div", { key: '297074406cd7409f220d0675976cd479124ef801', class: "dso-label-container" }, h("span", { key: '3de870d39e90f5b2c893785f148da982635d4dc5', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: '474555d74316b62427604b6c4c0f697aa09ab675', class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[baseLayer.id] = ref), onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name, baseLayer.info ? h("p", { slot: "info" }, baseLayer.info) : null))))));
     }
     static get is() { return "dso-map-base-layers"; }
     static get encapsulation() { return "shadow"; }

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

@@ -98,15 +98,12 @@ button.dso-primary.dso-small,
 label.dso-primary.dso-small {
   line-height: 1rem;
 }
-a.dso-primary.dso-small dso-icon,
-a.dso-primary.dso-small svg.di, a.dso-primary.dso-small.extern::after, a.dso-primary.dso-small.download::after, a.dso-primary.dso-small.dso-spinner::before,
+a.dso-primary.dso-small dso-icon, a.dso-primary.dso-small.extern::after, a.dso-primary.dso-small.download::after, a.dso-primary.dso-small.dso-spinner::before,
 button.dso-primary.dso-small dso-icon,
-button.dso-primary.dso-small svg.di,
 button.dso-primary.dso-small.extern::after,
 button.dso-primary.dso-small.download::after,
 button.dso-primary.dso-small.dso-spinner::before,
 label.dso-primary.dso-small dso-icon,
-label.dso-primary.dso-small svg.di,
 label.dso-primary.dso-small.extern::after,
 label.dso-primary.dso-small.download::after,
 label.dso-primary.dso-small.dso-spinner::before {
@@ -130,15 +127,12 @@ button.dso-primary.dso-extra-small,
 label.dso-primary.dso-extra-small {
   line-height: 1rem;
 }
-a.dso-primary.dso-extra-small dso-icon,
-a.dso-primary.dso-extra-small svg.di, a.dso-primary.dso-extra-small.extern::after, a.dso-primary.dso-extra-small.download::after, a.dso-primary.dso-extra-small.dso-spinner::before,
+a.dso-primary.dso-extra-small dso-icon, a.dso-primary.dso-extra-small.extern::after, a.dso-primary.dso-extra-small.download::after, a.dso-primary.dso-extra-small.dso-spinner::before,
 button.dso-primary.dso-extra-small dso-icon,
-button.dso-primary.dso-extra-small svg.di,
 button.dso-primary.dso-extra-small.extern::after,
 button.dso-primary.dso-extra-small.download::after,
 button.dso-primary.dso-extra-small.dso-spinner::before,
 label.dso-primary.dso-extra-small dso-icon,
-label.dso-primary.dso-extra-small svg.di,
 label.dso-primary.dso-extra-small.extern::after,
 label.dso-primary.dso-extra-small.download::after,
 label.dso-primary.dso-extra-small.dso-spinner::before {
@@ -163,28 +157,19 @@ label.dso-primary.dso-extra-small {
   padding-block: 9px;
 }
 a.dso-primary dso-icon:has(+ span:not(.sr-only)),
-a.dso-primary svg.di:has(+ span:not(.sr-only)),
 button.dso-primary dso-icon:has(+ span:not(.sr-only)),
-button.dso-primary svg.di:has(+ span:not(.sr-only)),
-label.dso-primary dso-icon:has(+ span:not(.sr-only)),
-label.dso-primary svg.di:has(+ span:not(.sr-only)) {
+label.dso-primary dso-icon:has(+ span:not(.sr-only)) {
   margin-inline-start: -8px;
 }
 a.dso-primary span:not(.sr-only) + dso-icon,
-a.dso-primary span:not(.sr-only) + svg.di,
 button.dso-primary span:not(.sr-only) + dso-icon,
-button.dso-primary span:not(.sr-only) + svg.di,
-label.dso-primary span:not(.sr-only) + dso-icon,
-label.dso-primary span:not(.sr-only) + svg.di {
+label.dso-primary span:not(.sr-only) + dso-icon {
   margin-inline-start: 8px;
   margin-inline-end: -8px;
 }
 a.dso-primary dso-icon + span:not(.sr-only),
-a.dso-primary svg.di + span:not(.sr-only),
 button.dso-primary dso-icon + span:not(.sr-only),
-button.dso-primary svg.di + span:not(.sr-only),
-label.dso-primary dso-icon + span:not(.sr-only),
-label.dso-primary svg.di + span:not(.sr-only) {
+label.dso-primary dso-icon + span:not(.sr-only) {
   margin-inline-start: 8px;
 }
 a.dso-primary.dso-spinner-left[disabled], a.dso-primary.dso-spinner-right[disabled],
@@ -318,15 +303,12 @@ button.dso-secondary.dso-small,
 label.dso-secondary.dso-small {
   line-height: 1rem;
 }
-a.dso-secondary.dso-small dso-icon,
-a.dso-secondary.dso-small svg.di, a.dso-secondary.dso-small.extern::after, a.dso-secondary.dso-small.download::after, a.dso-secondary.dso-small.dso-spinner::before,
+a.dso-secondary.dso-small dso-icon, a.dso-secondary.dso-small.extern::after, a.dso-secondary.dso-small.download::after, a.dso-secondary.dso-small.dso-spinner::before,
 button.dso-secondary.dso-small dso-icon,
-button.dso-secondary.dso-small svg.di,
 button.dso-secondary.dso-small.extern::after,
 button.dso-secondary.dso-small.download::after,
 button.dso-secondary.dso-small.dso-spinner::before,
 label.dso-secondary.dso-small dso-icon,
-label.dso-secondary.dso-small svg.di,
 label.dso-secondary.dso-small.extern::after,
 label.dso-secondary.dso-small.download::after,
 label.dso-secondary.dso-small.dso-spinner::before {
@@ -350,15 +332,12 @@ button.dso-secondary.dso-extra-small,
 label.dso-secondary.dso-extra-small {
   line-height: 1rem;
 }
-a.dso-secondary.dso-extra-small dso-icon,
-a.dso-secondary.dso-extra-small svg.di, a.dso-secondary.dso-extra-small.extern::after, a.dso-secondary.dso-extra-small.download::after, a.dso-secondary.dso-extra-small.dso-spinner::before,
+a.dso-secondary.dso-extra-small dso-icon, a.dso-secondary.dso-extra-small.extern::after, a.dso-secondary.dso-extra-small.download::after, a.dso-secondary.dso-extra-small.dso-spinner::before,
 button.dso-secondary.dso-extra-small dso-icon,
-button.dso-secondary.dso-extra-small svg.di,
 button.dso-secondary.dso-extra-small.extern::after,
 button.dso-secondary.dso-extra-small.download::after,
 button.dso-secondary.dso-extra-small.dso-spinner::before,
 label.dso-secondary.dso-extra-small dso-icon,
-label.dso-secondary.dso-extra-small svg.di,
 label.dso-secondary.dso-extra-small.extern::after,
 label.dso-secondary.dso-extra-small.download::after,
 label.dso-secondary.dso-extra-small.dso-spinner::before {
@@ -383,28 +362,19 @@ label.dso-secondary.dso-extra-small {
   padding-block: 9px;
 }
 a.dso-secondary dso-icon:has(+ span:not(.sr-only)),
-a.dso-secondary svg.di:has(+ span:not(.sr-only)),
 button.dso-secondary dso-icon:has(+ span:not(.sr-only)),
-button.dso-secondary svg.di:has(+ span:not(.sr-only)),
-label.dso-secondary dso-icon:has(+ span:not(.sr-only)),
-label.dso-secondary svg.di:has(+ span:not(.sr-only)) {
+label.dso-secondary dso-icon:has(+ span:not(.sr-only)) {
   margin-inline-start: -8px;
 }
 a.dso-secondary span:not(.sr-only) + dso-icon,
-a.dso-secondary span:not(.sr-only) + svg.di,
 button.dso-secondary span:not(.sr-only) + dso-icon,
-button.dso-secondary span:not(.sr-only) + svg.di,
-label.dso-secondary span:not(.sr-only) + dso-icon,
-label.dso-secondary span:not(.sr-only) + svg.di {
+label.dso-secondary span:not(.sr-only) + dso-icon {
   margin-inline-start: 8px;
   margin-inline-end: -8px;
 }
 a.dso-secondary dso-icon + span:not(.sr-only),
-a.dso-secondary svg.di + span:not(.sr-only),
 button.dso-secondary dso-icon + span:not(.sr-only),
-button.dso-secondary svg.di + span:not(.sr-only),
-label.dso-secondary dso-icon + span:not(.sr-only),
-label.dso-secondary svg.di + span:not(.sr-only) {
+label.dso-secondary dso-icon + span:not(.sr-only) {
   margin-inline-start: 8px;
 }
 a.dso-secondary.dso-spinner-left[disabled], a.dso-secondary.dso-spinner-right[disabled],
@@ -622,67 +592,32 @@ label.dso-tertiary.dso-spinner-right::after {
   margin-inline-start: 8px;
 }
 a.dso-tertiary dso-icon + span:not(.sr-only),
-a.dso-tertiary svg.di + span:not(.sr-only),
 a.dso-tertiary span:not(.sr-only) + dso-icon,
-a.dso-tertiary span:not(.sr-only) + svg.di,
 button.dso-tertiary dso-icon + span:not(.sr-only),
-button.dso-tertiary svg.di + span:not(.sr-only),
 button.dso-tertiary span:not(.sr-only) + dso-icon,
-button.dso-tertiary span:not(.sr-only) + svg.di,
 label.dso-tertiary dso-icon + span:not(.sr-only),
-label.dso-tertiary svg.di + span:not(.sr-only),
-label.dso-tertiary span:not(.sr-only) + dso-icon,
-label.dso-tertiary span:not(.sr-only) + svg.di {
+label.dso-tertiary span:not(.sr-only) + dso-icon {
   margin-inline-start: 8px;
 }
-a.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),
-a.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),
-a.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,
-a.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up,
-button.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),
-button.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),
-button.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,
-button.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up,
-label.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),
-label.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),
-label.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,
-label.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {
-  margin-inline-start: 4px;
-}
 a.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),
 a.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),
-a.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),
-a.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),
-a.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,
-a.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,
 a.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],
 a.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right],
 button.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),
 button.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),
-button.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),
-button.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),
-button.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,
-button.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,
 button.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],
 button.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right],
 label.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),
 label.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),
-label.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),
-label.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),
-label.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,
-label.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,
 label.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],
 label.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {
   margin-inline-start: 0;
 }
 a.dso-tertiary dso-icon,
-a.dso-tertiary svg.di,
 a.dso-tertiary span,
 button.dso-tertiary dso-icon,
-button.dso-tertiary svg.di,
 button.dso-tertiary span,
 label.dso-tertiary dso-icon,
-label.dso-tertiary svg.di,
 label.dso-tertiary span {
   vertical-align: middle;
 }
@@ -807,15 +742,12 @@ button.dso-map.dso-small,
 label.dso-map.dso-small {
   line-height: 1rem;
 }
-a.dso-map.dso-small dso-icon,
-a.dso-map.dso-small svg.di, a.dso-map.dso-small.extern::after, a.dso-map.dso-small.download::after, a.dso-map.dso-small.dso-spinner::before,
+a.dso-map.dso-small dso-icon, a.dso-map.dso-small.extern::after, a.dso-map.dso-small.download::after, a.dso-map.dso-small.dso-spinner::before,
 button.dso-map.dso-small dso-icon,
-button.dso-map.dso-small svg.di,
 button.dso-map.dso-small.extern::after,
 button.dso-map.dso-small.download::after,
 button.dso-map.dso-small.dso-spinner::before,
 label.dso-map.dso-small dso-icon,
-label.dso-map.dso-small svg.di,
 label.dso-map.dso-small.extern::after,
 label.dso-map.dso-small.download::after,
 label.dso-map.dso-small.dso-spinner::before {
@@ -839,15 +771,12 @@ button.dso-map.dso-extra-small,
 label.dso-map.dso-extra-small {
   line-height: 1rem;
 }
-a.dso-map.dso-extra-small dso-icon,
-a.dso-map.dso-extra-small svg.di, a.dso-map.dso-extra-small.extern::after, a.dso-map.dso-extra-small.download::after, a.dso-map.dso-extra-small.dso-spinner::before,
+a.dso-map.dso-extra-small dso-icon, a.dso-map.dso-extra-small.extern::after, a.dso-map.dso-extra-small.download::after, a.dso-map.dso-extra-small.dso-spinner::before,
 button.dso-map.dso-extra-small dso-icon,
-button.dso-map.dso-extra-small svg.di,
 button.dso-map.dso-extra-small.extern::after,
 button.dso-map.dso-extra-small.download::after,
 button.dso-map.dso-extra-small.dso-spinner::before,
 label.dso-map.dso-extra-small dso-icon,
-label.dso-map.dso-extra-small svg.di,
 label.dso-map.dso-extra-small.extern::after,
 label.dso-map.dso-extra-small.download::after,
 label.dso-map.dso-extra-small.dso-spinner::before {
@@ -872,28 +801,19 @@ label.dso-map.dso-extra-small {
   padding-block: 9px;
 }
 a.dso-map dso-icon:has(+ span:not(.sr-only)),
-a.dso-map svg.di:has(+ span:not(.sr-only)),
 button.dso-map dso-icon:has(+ span:not(.sr-only)),
-button.dso-map svg.di:has(+ span:not(.sr-only)),
-label.dso-map dso-icon:has(+ span:not(.sr-only)),
-label.dso-map svg.di:has(+ span:not(.sr-only)) {
+label.dso-map dso-icon:has(+ span:not(.sr-only)) {
   margin-inline-start: -8px;
 }
 a.dso-map span:not(.sr-only) + dso-icon,
-a.dso-map span:not(.sr-only) + svg.di,
 button.dso-map span:not(.sr-only) + dso-icon,
-button.dso-map span:not(.sr-only) + svg.di,
-label.dso-map span:not(.sr-only) + dso-icon,
-label.dso-map span:not(.sr-only) + svg.di {
+label.dso-map span:not(.sr-only) + dso-icon {
   margin-inline-start: 8px;
   margin-inline-end: -8px;
 }
 a.dso-map dso-icon + span:not(.sr-only),
-a.dso-map svg.di + span:not(.sr-only),
 button.dso-map dso-icon + span:not(.sr-only),
-button.dso-map svg.di + span:not(.sr-only),
-label.dso-map dso-icon + span:not(.sr-only),
-label.dso-map svg.di + span:not(.sr-only) {
+label.dso-map dso-icon + span:not(.sr-only) {
   margin-inline-start: 8px;
 }
 a.dso-map.dso-spinner-left[disabled], a.dso-map.dso-spinner-right[disabled],
@@ -983,9 +903,9 @@ label.dso-map:focus,
 label.dso-map:focus-visible {
   outline-offset: -1px;
 }
-a.dso-map:has(span.sr-only):has(dso-icon, svg.di),
-button.dso-map:has(span.sr-only):has(dso-icon, svg.di),
-label.dso-map:has(span.sr-only):has(dso-icon, svg.di) {
+a.dso-map:has(span.sr-only):has(dso-icon),
+button.dso-map:has(span.sr-only):has(dso-icon),
+label.dso-map:has(span.sr-only):has(dso-icon) {
   padding: 8px;
   min-inline-size: auto;
   block-size: 40px;

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

@@ -58,7 +58,7 @@ export class MapControls {
         });
     }
     render() {
-        return (h(Fragment, { key: '38d8f9a49054469b539d54e35f3f60af57cc3b9e' }, h("button", { key: '44c9e6486a2bff8ba61aa901a70afa602893b302', type: "button", id: "toggle-visibility-button", class: "dso-map toggle-visibility-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: '06b1a7d39246e8e6136c856bcca0e0320f3ee7d6', icon: "layers" }), h("span", { key: '9fd57b3947f481215d66724b5de4ba7836e919ee' }, this.text("layersButton"))), h("dso-button-group", { key: 'a6ade4edc389da3c2df9ec0bb58ae215c2dd9f99', class: "zoom-buttons", direction: "column" }, h("button", { key: '7a6672e4d172624e8223c38b242ccee9b6089dab', type: "button", class: "dso-map", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, h("span", { key: 'b3651b86a194adc18f070b4bc9b67e888ce96d86', class: "sr-only" }, this.text("zoomIn")), h("dso-icon", { key: '7e49e460481ee133cdb4ee04a4023cc836038f9e', icon: "plus" })), h("button", { key: '71d8e75f0284e937c3e9bd1128a05171f057f9fd', type: "button", class: "dso-map", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, h("span", { key: '10d8b03a6a11664fc57524946e7a8ccb3eff8689', class: "sr-only" }, this.text("zoomOut")), h("dso-icon", { key: 'bd319a269f38e8b70f427f07c3e1e217f63ea67e', icon: "minus" }))), h("section", { key: '53ef69eade83dbcfd066e6eb8212a9fba7996235', hidden: this.hideContent }, h("header", { key: '3306243d25cbdcceb2447686fc6990fd52a0cd88' }, h("h2", { key: '011724da35c952a1692fa92c13eb53667d5d168c' }, this.text("title")), h("button", { key: 'c533664b366c279051146f8c336558edc676697a', type: "button", class: "dso-tertiary close-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", { key: 'a1d159a70d3c3a95d428faffac25647e1d68adc7', class: "sr-only" }, this.text("hidePanel", { title: this.text("title") })), h("dso-icon", { key: 'e706aef45a49a552615fa80a56c484dbb950be03', icon: "times" }))), h("dso-scrollable", { key: 'f678ba1fee4d3825cad69841842480ddb5364f1a' }, h("div", { key: '672d0f8b67bb05f9b65fe6a9b90667e25e6c43a3', class: "content" }, h("slot", { key: '2df21b2d2d1431f0f3d447b337536558dc4d6313' }))))));
+        return (h(Fragment, { key: 'e960948aba33141aad982258d142ab200c61d66c' }, h("button", { key: 'b0ff86966bc14e54d7399ff235c4d74cceb61161', type: "button", id: "toggle-visibility-button", class: "dso-map toggle-visibility-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: '5e41e9d670b0cb679a5062e6301ddc5dfe378d5e', icon: "layers" }), h("span", { key: 'f21ad109b3468aa420e57215ea4e3c3ea7152736' }, this.text("layersButton"))), h("dso-button-group", { key: '5b04b3c7cf189a33e809dac2269f08bed058352d', class: "zoom-buttons", direction: "column" }, h("button", { key: '751a6595a606fb93c84132a7a3e322a230defaa6', type: "button", class: "dso-map", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, h("span", { key: 'e796d0c8635572e19953a61d78eda7cb450da8d3', class: "sr-only" }, this.text("zoomIn")), h("dso-icon", { key: '104303c64d506ab9751c04637808698c1d4777a4', icon: "plus" })), h("button", { key: '6c5366fa08fc528f7c8ddbed29df8d7b9d2857fe', type: "button", class: "dso-map", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, h("span", { key: '4eafea8c21299aa768cd017e9f3966d73843ee20', class: "sr-only" }, this.text("zoomOut")), h("dso-icon", { key: 'd5a864620b9c7951deba141f53fe2aa8d8ec12d7', icon: "minus" }))), h("section", { key: 'd83ac96a4d02b481be81f66c944b14e916edb9a9', hidden: this.hideContent }, h("header", { key: 'bc146be5dac6ed5351a6075e2d58d6d8064dac4e' }, h("h2", { key: '61ec5e1e3d8654ac4e2d1b78234e7f0d08c09f55' }, this.text("title")), h("button", { key: 'cd1961589defe1db12231cdd9f4689886e5e7fb7', type: "button", class: "dso-tertiary close-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", { key: 'c0f8917e51dbf6d9744f9b99ad64b6bc5f7f4bfb', class: "sr-only" }, this.text("hidePanel", { title: this.text("title") })), h("dso-icon", { key: '8f5b5bafdf07930e7b002bbd034fe9696b79b0f5', icon: "times" }))), h("dso-scrollable", { key: '8edbdadee289e65c36566ce2663063ec8b672c90' }, h("div", { key: '2c6c8df7ab721e8f5c868aed5a2303d3a8aa4b69', class: "content" }, h("slot", { key: 'ca75911b586987d5e35f26483d7f6c47c1dafc89' }))))));
     }
     static get is() { return "dso-map-controls"; }
     static get encapsulation() { return "shadow"; }

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

@@ -28,7 +28,7 @@ export class MapOverlays {
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: '70e2ba3ddd988e843d29f1fe64cd71849b783b86', class: "form-group dso-checkboxes" }, h("legend", { key: 'fd0d17528650e4b3c395438316f24c5ad8bef74a', class: "sr-only" }, "Kaartlagen"), h("div", { key: 'af2f6795455d3bc159778e02411f66a59eacef9e', class: "dso-label-container" }, h("span", { key: '4ab7b2b62dd2bc24441b0a1f723d160c1b6bb63c', class: "control-label", "aria-hidden": "true" }, this.text("title"))), h("div", { key: '7dfa0cabfbbca09874a23fdf71a6b1a20d09f50d', class: "dso-field-container" }, this.overlays.map((overlay) => (h("dso-selectable", { key: overlay.id, type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[overlay.id] = ref), onDsoChange: (e) => this.overlayChangeHandler(overlay, e) }, overlay.name, overlay.info ? h("p", { slot: "info" }, overlay.info) : null))))));
+        return (h("fieldset", { key: 'd60d04424ff4824650822bca365b08d9e09343c4', class: "form-group dso-checkboxes" }, h("legend", { key: 'c7a9f921310bd6d5a6a2227ccd5f5aa14951553c', class: "sr-only" }, "Kaartlagen"), h("div", { key: 'ac37cdf13bab527ae0541ecdee5697e3c598b017', class: "dso-label-container" }, h("span", { key: '8747d30b9a1e6909e5fc2fb1318098517d2afe99', class: "control-label", "aria-hidden": "true" }, this.text("title"))), h("div", { key: 'f5dc6ccfc6c709736de801bca4ff30c2b4f8ae5d', class: "dso-field-container" }, this.overlays.map((overlay) => (h("dso-selectable", { key: overlay.id, type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[overlay.id] = ref), onDsoChange: (e) => this.overlayChangeHandler(overlay, e) }, overlay.name, overlay.info ? h("p", { slot: "info" }, overlay.info) : null))))));
     }
     static get is() { return "dso-map-overlays"; }
     static get encapsulation() { return "shadow"; }

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

@@ -42,7 +42,7 @@ export class MarkBar {
     render() {
         const current = this.current || 0;
         const totalCount = this.totalCount || 0;
-        return (h("div", { key: '7524d95167087c5bc8d8422f61342e18d557928d', class: "dso-mark-bar" }, h("div", { key: '070d9c6e249d092396f8490a646eed354eef4085', class: "dso-mark-bar-input" }, h("input", { key: '2d04e65225ef386e2b2f1da9ea5b49c790bc6935', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: 'cd9ceaaa1588854ff9acee780ad3e5cbec21a042', htmlFor: "search-input" }, h("dso-icon", { key: '39e04611ffa4d34cc5006e3343dfcab487effb28', class: "dso-search-icon", icon: "search" }), h("span", { key: 'ee908ad3d089c2dc87f6fd9b824d7f0b028bda59', class: "label-text" }, this.label)), h("dso-icon-button", { key: '29ccb6ee59663b2b362401143b6737b3e93a4967', icon: "times", variant: "tertiary", label: "Zoekopdracht legen", onDsoClick: (e) => this.handleClear(e.detail.originalEvent) })), h("div", { key: '2225312304f8e6da25b002f0e478d9bb52566571', class: "dso-button-container" }, h("span", { key: '6c92c8114c21d7ba0fff9823b691bda55a8981bb', class: "divider" }), h("dso-icon-button", { key: '3bc144595cb03249c5ad9da40d4db8feb75537c4', icon: "chevron-up", variant: "tertiary", label: "Vorig zoekresultaat", onDsoClick: (e) => this.handlePrevious(e.detail.originalEvent), disabled: current <= 1 }), h("span", { key: '80ea007d94361aad098aecfd1db2f4653d19126b' }, current, "/", totalCount), h("dso-icon-button", { key: 'd51bda40ac64d33912d9d29d3457306617a07765', icon: "chevron-down", variant: "tertiary", label: "Volgend zoekresultaat", onDsoClick: (e) => this.handleNext(e.detail.originalEvent), disabled: current >= totalCount }))));
+        return (h("div", { key: 'e54c7da22d3337f17613e5e719085d3bf5316082', class: "dso-mark-bar" }, h("div", { key: '307e0f902e416357f1c07fca7a821b81ff85d134', class: "dso-mark-bar-input" }, h("input", { key: '4a14603cc6a6906d1513a92bf1fd6d3959cc3f35', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: '0d5bba8eebba90a9ace3734e95a7c11095c538d9', htmlFor: "search-input" }, h("dso-icon", { key: '4d4148c8c81e0b498a392aacc8d73abd51fa0b80', class: "dso-search-icon", icon: "search" }), h("span", { key: 'f66ecd32f667916908f46bdeaa614d96f49cc381', class: "label-text" }, this.label)), h("dso-icon-button", { key: '6dcece65cbbb3a987209c5249a92e2ab5f7bd43e', icon: "times", variant: "tertiary", label: "Zoekopdracht legen", onDsoClick: (e) => this.handleClear(e.detail.originalEvent) })), h("div", { key: '55e6e5962851773657ffbc632f79ec9184002db3', class: "dso-button-container" }, h("span", { key: '723965736ff9af612effa22520936f0007aa10cb', class: "divider" }), h("dso-icon-button", { key: 'c821f6334ed0d7b6425f843a93bed17ce885b3ec', icon: "chevron-up", variant: "tertiary", label: "Vorig zoekresultaat", onDsoClick: (e) => this.handlePrevious(e.detail.originalEvent), disabled: current <= 1 }), h("span", { key: '113ce92b9501ec203c1101a11f8cdc82c11dc4a0' }, current, "/", totalCount), h("dso-icon-button", { key: 'b08fb394190aae89f4a1e2390f1e318d5d42cf3b', icon: "chevron-down", variant: "tertiary", label: "Volgend zoekresultaat", onDsoClick: (e) => this.handleNext(e.detail.originalEvent), disabled: current >= totalCount }))));
     }
     static get is() { return "dso-mark-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -65,7 +65,7 @@ export class Modal {
     }
     render() {
         var _a;
-        return (h("dialog", { key: 'de1737260a980f446d06374029b9706ca2484a8c', class: "dso-modal", role: (_a = this.dialogRole) !== null && _a !== void 0 ? _a : undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onClick: (e) => this.handleDialogClick(e), onKeyDown: (e) => this.blockEscapeKey(e) }, h("div", { key: 'bd24834f32196c0776560ad328d3a1da477b6a1d', class: "dso-dialog", role: "document" }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.closable && (h("dso-icon-button", { id: "close-modal", icon: "times", variant: "tertiary", label: this.text("close"), onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) })))) : (h("span", { class: "sr-only", id: this.ariaId }, this.text("dialog"))), h("dso-scrollable", { key: 'ad44ea43206fbbec83bd869a6ea2908594f2da3b' }, h("div", { key: 'c66ef72ed44dd5f9ae430ed127c7f0abbc645dc3', class: "dso-body", tabIndex: 0 }, h("slot", { key: '46a6c88d08d803b4dac2a717e97bc61d093b1d1d', name: "body" }))), this.hasFooter && (h("div", { key: 'fdce7c7c4c544caf56b5cc5633d2274d74f6624f', class: "dso-footer" }, h("slot", { key: 'cfe41eb2402d36cf717c537bd155e1d2417e28df', name: "footer" }))))));
+        return (h("dialog", { key: '3132ce793e30baf922eaab1bda9c42dbcf8681c0', class: "dso-modal", role: (_a = this.dialogRole) !== null && _a !== void 0 ? _a : undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onClick: (e) => this.handleDialogClick(e), onKeyDown: (e) => this.blockEscapeKey(e) }, h("div", { key: '82d84e9c4655df5d8e193da4d9f58bd8613dba2a', class: "dso-dialog", role: "document" }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.closable && (h("dso-icon-button", { id: "close-modal", icon: "times", variant: "tertiary", label: this.text("close"), onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) })))) : (h("span", { class: "sr-only", id: this.ariaId }, this.text("dialog"))), h("dso-scrollable", { key: '4d96da22636c64a50b80dd391cbc8be460df5c5c' }, h("div", { key: '85b9efb3648158e13ed13ffab451433b247d3a91', class: "dso-body", tabIndex: 0 }, h("slot", { key: '467e8fed6481c2575acdac13bcd353cb13271533', name: "body" }))), this.hasFooter && (h("div", { key: '5cbc2000364edbab958f2b1299ea20dd5d734dfe', class: "dso-footer" }, h("slot", { key: '7422926e5e4422044db2606cd60bb20af23b0a89', name: "footer" }))))));
     }
     static get is() { return "dso-modal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/onboarding-tip/onboarding-tip.js

@@ -38,7 +38,7 @@ export class OnboardingTip {
         this.cleanUp = undefined;
     }
     render() {
-        return (h(Host, { key: 'c8639f6cb933ffaeee99bb60690c345f5f23980d', popover: "manual", ready: this.ready, onAnimationend: () => (this.ready = true) }, h("div", { key: '9db53c2f3220584e349ab63815d3bee8a29a1047', class: "onboarding-tip", role: "tooltip" }, h("div", { key: '1d9757090851d54afe53f0b845f771190a4d5229', class: "onboarding-tip-inner" }, h("div", { key: '10d3c7714505c0cb86a876bc4e135b1ba3f18288', class: "onboarding-tip-content-wrapper" }, this.headingSlottedElement !== null && (h("div", { key: 'f67ea4caa88837b5a83c23b01b2da605ca576d64', class: "onboarding-tip-content-heading" }, h("dso-icon", { key: '30f9e1edd995e2df9d0d96e89125f215a5e9e94f', icon: "light-bulb" }), h("slot", { key: '11df6fa2d4d57eec21305dacc92b2c8659277697', name: "heading" }))), h("dso-icon-button", { key: '5c739c4472cf3ae4884dfe354ba7c377ffebce93', class: "dso-close", label: "Sluiten", variant: "tertiary", icon: "times", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) }), h("slot", { key: 'c078afed2b9cbe7b7ea5b34c44800b37357905d7' }))), h("div", { key: '162158dac5546d0e293b97cb88a039e56393170d', class: "onboarding-tip-arrow", ref: (ref) => (this.tipArrowRef = ref) }))));
+        return (h(Host, { key: 'a603e7fefe4391ac0b30f05b942ee99baf258db4', popover: "manual", ready: this.ready, onAnimationend: () => (this.ready = true) }, h("div", { key: '8666aef064552437ef484d5ec80cb8d07522bd90', class: "onboarding-tip", role: "tooltip" }, h("div", { key: '48570020dd7d6acb87730ffe208cf1bede7719ca', class: "onboarding-tip-inner" }, h("div", { key: 'cd18645655ee93588daceabf150a73c08370ed0e', class: "onboarding-tip-content-wrapper" }, this.headingSlottedElement !== null && (h("div", { key: 'fbc8b73c9705b49bb1ef04de470509c72a072ba7', class: "onboarding-tip-content-heading" }, h("dso-icon", { key: '3df4a752374281d1eb553dc5fb00920047cb5af0', icon: "light-bulb" }), h("slot", { key: 'f8dc8acb29b2c6b2fc1c26429bd3f11d8689c54a', name: "heading" }))), h("dso-icon-button", { key: '82bdc831b1e3dfa507b65c1a834ca8e70ab34566', class: "dso-close", label: "Sluiten", variant: "tertiary", icon: "times", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) }), h("slot", { key: '97cef8fa0655769837ecdc636b2360bf6facdc7d' }))), h("div", { key: '90a9888aa1aedc4c3c259873c10a5ead5734f5e5', class: "onboarding-tip-arrow", ref: (ref) => (this.tipArrowRef = ref) }))));
     }
     get headingSlottedElement() {
         return this.host.querySelector("[slot='heading']");

package/dist/collection/components/ozon-content/components/ozon-content-toggletip/ozon-content-toggletip.css

@@ -0,0 +1,108 @@
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+.dso-tooltip {
+  --_dso-alert-success-border-color: initial;
+  --_dso-alert-error-border-color: initial;
+  --_dso-alert-info-border-color: initial;
+  --_dso-alert-warning-border-color: initial;
+  background-color: #fff;
+  color: #191919;
+}
+.dso-tooltip {
+  border-radius: 4px;
+  overflow: unset;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.15s;
+}
+.dso-tooltip.visible {
+  opacity: 1;
+  visibility: visible;
+}
+.dso-tooltip .tooltip-inner {
+  --_dso-alert-success-border-color: initial;
+  --_dso-alert-error-border-color: initial;
+  --_dso-alert-info-border-color: initial;
+  --_dso-alert-warning-border-color: initial;
+  background-color: #fff;
+  color: #191919;
+}
+.dso-tooltip .tooltip-inner {
+  font-family: Asap, sans-serif;
+  font-size: 1rem;
+  font-weight: normal;
+  padding-block: 8px;
+  padding-inline: 16px;
+  border-radius: 4px;
+  line-height: 1.5;
+  max-inline-size: 480px;
+}
+.dso-tooltip .tooltip-arrow {
+  --_dso-alert-success-border-color: initial;
+  --_dso-alert-error-border-color: initial;
+  --_dso-alert-info-border-color: initial;
+  --_dso-alert-warning-border-color: initial;
+  background-color: #fff;
+  color: #191919;
+}
+.dso-tooltip .tooltip-arrow {
+  position: absolute;
+  border-start-start-radius: 4px;
+  block-size: 10px;
+  inline-size: 10px;
+  pointer-events: none;
+  z-index: -1;
+}
+
+:host {
+  display: inline-block;
+  --_dt-rich-content-margin-block: 8px;
+}
+
+::slotted(:not([slot=label])) {
+  cursor: default !important;
+}
+
+.toggletip-button {
+  display: inline-block;
+  font-size: 1em;
+  font-weight: 500;
+  margin-block-end: 0;
+  text-decoration: none;
+  touch-action: manipulation;
+  text-align: start;
+  user-select: none;
+  vertical-align: middle;
+}
+.toggletip-button:focus, .toggletip-button:focus-visible {
+  outline-offset: 2px;
+}
+.toggletip-button:active {
+  outline: 0;
+}
+.toggletip-button {
+  border: 0;
+  color: var(--_dso-ozon-content-toggletip-color, #2b5780);
+  line-height: 1;
+  padding: 0;
+  background-color: transparent;
+  cursor: pointer;
+  vertical-align: baseline;
+}
+.toggletip-button, .toggletip-button:hover, .toggletip-button:focus-visible, .toggletip-button:active {
+  text-decoration-line: var(--_dso-ozon-content-toggletip-text-decoration, underline);
+  text-decoration-style: dotted;
+  text-underline-offset: 15%;
+}
+.toggletip-button dso-icon {
+  margin-inline-start: 4px;
+  vertical-align: middle;
+}