@dso-toolkit/core 84.1.0 → 86.0.0

package/dist/components/ozon-content-toggletip.js.map

@@ -1 +1 @@
-{"file":"ozon-content-toggletip.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/ozon-content/components/ozon-content-toggletip/ozon-content-toggletip.scss?tag=dso-ozon-content-toggletip&encapsulation=shadow","src/components/ozon-content/components/ozon-content-toggletip/ozon-content-toggletip.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"../../../../functional-components/tooltip\";\r\n\r\n@include utilities.box-sizing();\r\n@include tooltip.include($max-inline-size: 60 * units.$u1);\r\n\r\n:host {\r\n  display: inline-block;\r\n  --_dt-rich-content-margin-block: #{units.$u1};\r\n}\r\n\r\n::slotted(:not([slot=\"label\"])) {\r\n  cursor: default !important;\r\n}\r\n\r\n.toggletip-button {\r\n  @include button.base($modifiers: false);\r\n\r\n  // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n  & {\r\n    border: 0;\r\n    color: var(--_dso-ozon-content-toggletip-color, colors.$donkerblauw);\r\n    line-height: 1;\r\n    padding: 0;\r\n    background-color: transparent;\r\n    cursor: pointer;\r\n    vertical-align: baseline;\r\n  }\r\n\r\n  &,\r\n  &:hover,\r\n  &:focus-visible,\r\n  &:active {\r\n    text-decoration-line: var(--_dso-ozon-content-toggletip-text-decoration, underline);\r\n    text-decoration-style: dotted;\r\n    text-underline-offset: 15%;\r\n  }\r\n\r\n  dso-icon {\r\n    margin-inline-start: units.$u1 * 0.5;\r\n    vertical-align: middle;\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Element, Fragment, Prop, State, h } from \"@stencil/core\";\r\n\r\nimport { positionTooltip } from \"../../../../functional-components/tooltip/position-tooltip.function\";\r\nimport { Tooltip } from \"../../../../functional-components/tooltip/tooltip.functional-component\";\r\nimport { TooltipClean } from \"../../../../functional-components/tooltip/tooltip.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-ozon-content-toggletip\",\r\n  styleUrl: \"./ozon-content-toggletip.scss\",\r\n  shadow: true,\r\n})\r\nexport class ozonContentToggletip implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoOzonContentToggletipElement;\r\n\r\n  /**\r\n   * The alias of the icon in the button.\r\n   */\r\n  @Prop({ reflect: true })\r\n  icon?: string;\r\n\r\n  @State()\r\n  active = false;\r\n\r\n  @State()\r\n  showToggletip = false;\r\n\r\n  private container: HTMLButtonElement | undefined;\r\n  private tooltip: HTMLElement | undefined;\r\n  private tooltipArrow: HTMLElement | undefined;\r\n\r\n  private click = () => {\r\n    if (this.active) {\r\n      this.close();\r\n    } else {\r\n      this.open();\r\n    }\r\n  };\r\n\r\n  private open = () => {\r\n    this.active = true;\r\n    this.host.addEventListener(\"keydown\", this.keyDownListener);\r\n    this.host.addEventListener(\"focusout\", this.focusOutListener);\r\n  };\r\n\r\n  private close = () => {\r\n    this.host.removeEventListener(\"focusout\", this.focusOutListener);\r\n    this.host.removeEventListener(\"keydown\", this.keyDownListener);\r\n    this.active = false;\r\n  };\r\n\r\n  private focusOutListener = (event: FocusEvent) => {\r\n    if (!this.host.contains(event.relatedTarget as Node)) {\r\n      this.close();\r\n    }\r\n  };\r\n\r\n  private keyDownListener = (event: KeyboardEvent) => {\r\n    if (event.key === \"Escape\") {\r\n      this.close();\r\n    }\r\n\r\n    return;\r\n  };\r\n\r\n  componentDidRender() {\r\n    if (this.tooltip) {\r\n      if (this.active && !this.showToggletip) {\r\n        this.tooltip.showPopover();\r\n        this.showToggletip = true;\r\n      } else if (!this.active && this.showToggletip) {\r\n        this.tooltip?.hidePopover();\r\n        this.showToggletip = false;\r\n      }\r\n    }\r\n\r\n    let cleanUp: TooltipClean | undefined;\r\n\r\n    if (this.active && !cleanUp && this.container && this.tooltip && this.tooltipArrow) {\r\n      cleanUp = positionTooltip({\r\n        referenceElement: this.container,\r\n        tipRef: this.tooltip,\r\n        tipArrowRef: this.tooltipArrow,\r\n        placementTip: \"top\",\r\n      });\r\n    }\r\n\r\n    if (!this.active && cleanUp) {\r\n      cleanUp();\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Fragment>\r\n        <button class=\"toggletip-button\" ref={(element) => (this.container = element)} onClick={this.click}>\r\n          <slot name=\"label\" />\r\n          <dso-icon icon={this.icon} />\r\n          <Tooltip\r\n            visible\r\n            onAfterHidden={() => {}}\r\n            tipElementRef={(element) => (this.tooltip = element)}\r\n            tipArrowElementRef={(element) => (this.tooltipArrow = element)}\r\n          >\r\n            <slot />\r\n          </Tooltip>\r\n        </button>\r\n      </Fragment>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"ozon-content-toggletip.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/ozon-content/components/ozon-content-toggletip/ozon-content-toggletip.scss?tag=dso-ozon-content-toggletip&encapsulation=shadow","src/components/ozon-content/components/ozon-content-toggletip/ozon-content-toggletip.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"../../../../functional-components/tooltip\";\r\n\r\n@include utilities.box-sizing();\r\n@include tooltip.include($max-inline-size: 60 * units.$u1);\r\n\r\n$icon-margin-inline-start: units.$u1 * 0.5;\r\n\r\n:host {\r\n  display: inline;\r\n  --_dt-rich-content-margin-block: #{units.$u1};\r\n}\r\n\r\n::slotted(:not([slot=\"label\"])) {\r\n  cursor: default !important;\r\n}\r\n\r\n.toggletip-button {\r\n  @include button.base($modifiers: false);\r\n\r\n  border: 0;\r\n  color: var(--_dso-ozon-content-toggletip-color, colors.$donkerblauw);\r\n  line-height: 1;\r\n  padding: 0;\r\n  background-color: transparent;\r\n  cursor: pointer;\r\n  vertical-align: baseline;\r\n  display: inline;\r\n  overflow-wrap: break-word;\r\n  user-select: text;\r\n\r\n  &,\r\n  &:hover,\r\n  &:focus-visible,\r\n  &:active {\r\n    text-decoration-line: var(--_dso-ozon-content-toggletip-text-decoration, underline);\r\n    text-decoration-style: dotted;\r\n    text-underline-offset: 15%;\r\n  }\r\n\r\n  dso-icon {\r\n    margin-inline-start: $icon-margin-inline-start;\r\n    vertical-align: middle;\r\n  }\r\n}\r\n\r\n.icon-container {\r\n  position: relative;\r\n  padding-inline-end: units.$u3 + $icon-margin-inline-start;\r\n\r\n  dso-icon {\r\n    position: absolute;\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Element, Fragment, Prop, State, h } from \"@stencil/core\";\r\n\r\nimport { positionTooltip } from \"../../../../functional-components/tooltip/position-tooltip.function\";\r\nimport { Tooltip } from \"../../../../functional-components/tooltip/tooltip.functional-component\";\r\nimport { TooltipClean } from \"../../../../functional-components/tooltip/tooltip.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-ozon-content-toggletip\",\r\n  styleUrl: \"./ozon-content-toggletip.scss\",\r\n  shadow: true,\r\n})\r\nexport class ozonContentToggletip implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoOzonContentToggletipElement;\r\n\r\n  /**\r\n   * The alias of the icon in the button.\r\n   */\r\n  @Prop({ reflect: true })\r\n  icon?: string;\r\n\r\n  @State()\r\n  active = false;\r\n\r\n  @State()\r\n  showToggletip = false;\r\n\r\n  private container: HTMLSpanElement | undefined;\r\n  private tooltip: HTMLElement | undefined;\r\n  private tooltipArrow: HTMLElement | undefined;\r\n\r\n  private toggle = () => {\r\n    if (this.active) {\r\n      this.close();\r\n    } else {\r\n      this.open();\r\n    }\r\n  };\r\n\r\n  private open = () => {\r\n    this.active = true;\r\n  };\r\n\r\n  private close = () => {\r\n    this.active = false;\r\n  };\r\n\r\n  private focusOutHandler = (event: FocusEvent) => {\r\n    if (!this.host.contains(event.relatedTarget as Node)) {\r\n      this.close();\r\n    }\r\n  };\r\n\r\n  private keyUpHandler = (event: KeyboardEvent) => {\r\n    switch (event.key) {\r\n      case \"Escape\":\r\n        this.close();\r\n        return;\r\n      case \" \":\r\n      case \"Enter\":\r\n        this.toggle();\r\n        return;\r\n      default:\r\n        return;\r\n    }\r\n  };\r\n\r\n  componentDidRender() {\r\n    if (this.tooltip) {\r\n      if (this.active && !this.showToggletip) {\r\n        this.tooltip.showPopover();\r\n        this.showToggletip = true;\r\n      } else if (!this.active && this.showToggletip) {\r\n        this.tooltip?.hidePopover();\r\n        this.showToggletip = false;\r\n      }\r\n    }\r\n\r\n    let cleanUp: TooltipClean | undefined;\r\n\r\n    if (this.active && !cleanUp && this.container && this.tooltip && this.tooltipArrow) {\r\n      cleanUp = positionTooltip({\r\n        referenceElement: this.container,\r\n        tipRef: this.tooltip,\r\n        tipArrowRef: this.tooltipArrow,\r\n        placementTip: \"top\",\r\n      });\r\n    }\r\n\r\n    if (!this.active && cleanUp) {\r\n      cleanUp();\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Fragment>\r\n        <span\r\n          class=\"toggletip-button\"\r\n          role=\"button\"\r\n          tabindex={0}\r\n          onClick={this.toggle}\r\n          onKeyDown={this.keyUpHandler}\r\n          onFocusout={this.focusOutHandler}\r\n          ref={(element) => (this.container = element)}\r\n        >\r\n          <span class=\"icon-container\">\r\n            <slot name=\"label\" />\r\n            <dso-icon icon={this.icon} />\r\n          </span>\r\n        </span>\r\n        <Tooltip\r\n          visible\r\n          onAfterHidden={() => {}}\r\n          tipElementRef={(element) => (this.tooltip = element)}\r\n          tipArrowElementRef={(element) => (this.tooltipArrow = element)}\r\n        >\r\n          <slot />\r\n        </Tooltip>\r\n      </Fragment>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/ozon-content.js

@@ -147,8 +147,8 @@ class OzonContentBronNode {
     constructor() {
         this.name = "Bron";
     }
-    render(node, { mapNodeToJsx }) {
-        return h("span", { class: "dso-ozon-bron" }, mapNodeToJsx(node.childNodes));
+    render(node, { mapNodeToJsx }, ignoreMark) {
+        return h("span", { class: "dso-ozon-bron" }, mapNodeToJsx(node.childNodes, ignoreMark));
     }
 }
 
@@ -629,15 +629,15 @@ class OzonContentFallbackNode {
         // This name does not match any elements
         this.name = ["<fallback>"];
     }
-    render(node, { mapNodeToJsx }) {
-        return h("span", { class: `fallback od-${getNodeName(node)}` }, mapNodeToJsx(node.childNodes));
+    render(node, { mapNodeToJsx }, ignoreMark) {
+        return h("span", { class: `fallback od-${getNodeName(node)}` }, mapNodeToJsx(node.childNodes, ignoreMark));
     }
 }
 
-const Bijschrift = ({ bijschrift, bron, mapNodeToJsx }) => {
+const Bijschrift = ({ bijschrift, bron, mapNodeToJsx, ignoreMark }) => {
     var _a;
     const bronText = bron && ((_a = bron.textContent) === null || _a === void 0 ? void 0 : _a.trim());
-    return (h("span", { class: "figuur-bijschrift" }, bijschrift && bijschrift.inhoud && mapNodeToJsx(bijschrift.inhoud), bronText && (h(Fragment, null, `${bijschrift ? " " : ""}(bron: `, mapNodeToJsx(bron), ")"))));
+    return (h("span", { class: "figuur-bijschrift" }, bijschrift && bijschrift.inhoud && mapNodeToJsx(bijschrift.inhoud, ignoreMark), bronText && (h(Fragment, null, `${bijschrift ? " " : ""}(bron: `, mapNodeToJsx(bron, ignoreMark), ")"))));
 };
 class OzonContentFiguurNode {
     constructor() {
@@ -689,7 +689,7 @@ class OzonContentFiguurNode {
                 }
                 : undefined;
             const src = urlResolver && illustratie.naam ? urlResolver("Illustratie", "naam", illustratie.naam, node) : illustratie.naam;
-            return (h("div", { class: `dso-ozon-figuur ${bijschrift ? `bijschrift-${bijschrift.locatie}` : "onder"}`, style: this.getStyle(illustratie) }, titel && h("span", { class: "figuur-titel" }, mapNodeToJsx(titel)), (bijschrift === null || bijschrift === void 0 ? void 0 : bijschrift.locatie) === "boven" && (h(Bijschrift, { bijschrift: bijschrift, bron: bron, mapNodeToJsx: mapNodeToJsx })), h("dso-image-overlay", { wijzigactie: wijzigactie }, titel && (h("div", { slot: "titel" }, h("span", null, mapNodeToJsx(titel)))), h("img", { src: src !== null && src !== void 0 ? src : undefined, alt: (_d = (_c = (_b = illustratie.alt) !== null && _b !== void 0 ? _b : titel === null || titel === void 0 ? void 0 : titel.textContent) !== null && _c !== void 0 ? _c : illustratie.naam) !== null && _d !== void 0 ? _d : undefined }), (bijschrift || bron) && (h("div", { slot: "bijschrift" }, h(Bijschrift, { bijschrift: bijschrift, bron: bron, mapNodeToJsx: mapNodeToJsx })))), ((bijschrift === null || bijschrift === void 0 ? void 0 : bijschrift.locatie) === "onder" || (!bijschrift && bron)) && (h(Bijschrift, { bijschrift: bijschrift, bron: bron, mapNodeToJsx: mapNodeToJsx }))));
+            return (h("div", { class: `dso-ozon-figuur ${bijschrift ? `bijschrift-${bijschrift.locatie}` : "onder"}`, style: this.getStyle(illustratie) }, titel && h("span", { class: "figuur-titel" }, mapNodeToJsx(titel)), (bijschrift === null || bijschrift === void 0 ? void 0 : bijschrift.locatie) === "boven" && (h(Bijschrift, { bijschrift: bijschrift, bron: bron, mapNodeToJsx: mapNodeToJsx })), h("dso-image-overlay", { wijzigactie: wijzigactie }, titel && (h("div", { slot: "titel" }, h("span", null, mapNodeToJsx(titel, true)))), h("img", { src: src !== null && src !== void 0 ? src : undefined, alt: (_d = (_c = (_b = illustratie.alt) !== null && _b !== void 0 ? _b : titel === null || titel === void 0 ? void 0 : titel.textContent) !== null && _c !== void 0 ? _c : illustratie.naam) !== null && _d !== void 0 ? _d : undefined }), (bijschrift || bron) && (h("div", { slot: "bijschrift" }, h(Bijschrift, { bijschrift: bijschrift, bron: bron, mapNodeToJsx: mapNodeToJsx, ignoreMark: true })))), ((bijschrift === null || bijschrift === void 0 ? void 0 : bijschrift.locatie) === "onder" || (!bijschrift && bron)) && (h(Bijschrift, { bijschrift: bijschrift, bron: bron, mapNodeToJsx: mapNodeToJsx }))));
         }
     }
 }
@@ -1006,8 +1006,8 @@ class OzonContentTextNode {
     constructor() {
         this.name = "#text";
     }
-    render({ textContent }, { mark, emitMarkItemHighlight }) {
-        if (!mark || !textContent) {
+    render({ textContent }, { mark, emitMarkItemHighlight }, ignoreMark) {
+        if (ignoreMark || !mark || !textContent) {
             return h(Fragment, null, textContent);
         }
         return h(MarkText, { mark: mark, text: textContent, emitMarkItemHighlight: emitMarkItemHighlight });
@@ -1067,13 +1067,13 @@ class Mapper {
             return m.name === name;
         })) !== null && _a !== void 0 ? _a : this.fallbackNode);
     }
-    mapNodeToJsx(node, context, path) {
+    mapNodeToJsx(node, context, path, ignoreMark) {
         var _a;
         if (node instanceof NodeList) {
-            return h(Fragment, null, Array.from(node).map((n) => this.mapNodeToJsx(n, context, path)));
+            return h(Fragment, null, Array.from(node).map((n) => this.mapNodeToJsx(n, context, path, ignoreMark)));
         }
         if (Array.isArray(node)) {
-            return h(Fragment, null, node.map((n) => this.mapNodeToJsx(n, context, path)));
+            return h(Fragment, null, node.map((n) => this.mapNodeToJsx(n, context, path, ignoreMark)));
         }
         const nodeName = getNodeName(node);
         const mapper = this.findMapper(nodeName);
@@ -1086,7 +1086,7 @@ class Mapper {
         return mapper.render(node, {
             inline: context.inline,
             mark: context.mark,
-            mapNodeToJsx: (n) => this.mapNodeToJsx(n, context, [...path, node]),
+            mapNodeToJsx: (n, m) => this.mapNodeToJsx(n, context, [...path, node], m),
             emitClick: context.emitClick,
             setState,
             emitMarkItemHighlight: context.emitMarkItemHighlight,
@@ -1095,7 +1095,7 @@ class Mapper {
             urlResolver: context.urlResolver,
             begripResolver: context.begripResolver,
             annotated: context.annotated,
-        });
+        }, ignoreMark);
     }
     transform(input, context) {
         if (!input) {
@@ -1169,10 +1169,6 @@ label.dso-primary {
   background-color: var(--_dso-button-primary-background-color, #39870c);
   border-color: var(--_dso-button-primary-border-color, #39870c);
   color: var(--_dso-button-primary-color, #fff);
-}
-a.dso-primary,
-button.dso-primary,
-label.dso-primary {
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
@@ -1374,10 +1370,6 @@ label.dso-secondary {
   background-color: var(--_dso-button-secondary-background-color, #fff);
   border-color: var(--_dso-button-secondary-border-color, #39870c);
   color: var(--_dso-button-secondary-color, #39870c);
-}
-a.dso-secondary,
-button.dso-secondary,
-label.dso-secondary {
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
@@ -1813,10 +1805,6 @@ label.dso-map {
   background-color: var(--_dso-button-secondary-background-color, #fff);
   border-color: var(--_dso-button-secondary-border-color, #39870c);
   color: var(--_dso-button-secondary-color, #39870c);
-}
-a.dso-map,
-button.dso-map,
-label.dso-map {
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
@@ -2643,8 +2631,14 @@ span[role=paragraph] {
   display: block;
 }
 
+span[role=paragraph] {
+  margin-block: var(--_dt-span-role-paragraph-margin-block, 0);
+}
 span[role=paragraph] + span[role=paragraph] {
-  margin-block: 16px 0;
+  margin-block: var(--_dt-span-role-paragraph-margin-block, 16px 0);
+}
+span[role=paragraph] + span[role=paragraph] .dso-tertiary {
+  margin-block-start: -3px;
 }
 
 :host(:not([inline])) .fallback {
@@ -2823,12 +2817,6 @@ table.editaction-add {
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #e4f1d4;
   color: #191919;
-}
-p.editaction-add,
-span[role=paragraph].editaction-add,
-.dso-ozon-lijst.editaction-add,
-.dso-ozon-lijst > ul > li.editaction-add,
-table.editaction-add {
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
   --_dso-ozon-content-toggletip-color: colors.$zwart;
 }
@@ -2884,12 +2872,6 @@ table.editaction-remove {
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   color: #191919;
-}
-p.editaction-remove,
-span[role=paragraph].editaction-remove,
-.dso-ozon-lijst.editaction-remove,
-.dso-ozon-lijst > ul > li.editaction-remove,
-table.editaction-remove {
   --_dso-ozon-content-toggletip-color: colors.$zwart;
   text-decoration: line-through;
   --_dso-ozon-content-toggletip-text-decoration: underline line-through;
@@ -2935,8 +2917,6 @@ ins.new-text {
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #e4f1d4;
   color: #191919;
-}
-ins.new-text {
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
   --_dso-ozon-content-toggletip-color: colors.$zwart;
 }
@@ -2944,8 +2924,6 @@ ins.editaction-add {
   display: inline-block;
   margin-block-end: 8px;
   padding: 8px;
-}
-ins.editaction-add {
   --_dso-alert-success-border-color: #39870c;
   --_dso-alert-error-border-color: #ce3f51;
   --_dso-alert-info-border-color: #6ca4d9;
@@ -2973,8 +2951,6 @@ ins.editaction-add {
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #e4f1d4;
   color: #191919;
-}
-ins.editaction-add {
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
   --_dso-ozon-content-toggletip-color: colors.$zwart;
 }
@@ -3010,8 +2986,6 @@ del.removed-text {
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   color: #191919;
-}
-del.removed-text {
   --_dso-ozon-content-toggletip-color: colors.$zwart;
   text-decoration: line-through;
   --_dso-ozon-content-toggletip-text-decoration: underline line-through;
@@ -3025,8 +2999,6 @@ del.editaction-remove {
   display: inline-block;
   margin-block-end: 8px;
   padding: 8px;
-}
-del.editaction-remove {
   --_dso-alert-success-border-color: #39870c;
   --_dso-alert-error-border-color: #ce3f51;
   --_dso-alert-info-border-color: #6ca4d9;
@@ -3054,8 +3026,6 @@ del.editaction-remove {
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   color: #191919;
-}
-del.editaction-remove {
   --_dso-ozon-content-toggletip-color: colors.$zwart;
   text-decoration: line-through;
   --_dso-ozon-content-toggletip-text-decoration: underline line-through;
@@ -3156,8 +3126,6 @@ del.editaction-remove p:last-child {
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   color: #191919;
-}
-.subtitel:has(del:not(.removed-text)) {
   --_dso-ozon-content-toggletip-color: colors.$zwart;
   text-decoration: line-through;
   --_dso-ozon-content-toggletip-text-decoration: underline line-through;
@@ -3169,8 +3137,6 @@ del.editaction-remove p:last-child {
 }
 .subtitel:has(ins:not(.new-text)) {
   text-decoration: none;
-}
-.subtitel:has(ins:not(.new-text)) {
   --_dso-alert-success-border-color: #39870c;
   --_dso-alert-error-border-color: #ce3f51;
   --_dso-alert-info-border-color: #6ca4d9;
@@ -3198,8 +3164,6 @@ del.editaction-remove p:last-child {
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #e4f1d4;
   color: #191919;
-}
-.subtitel:has(ins:not(.new-text)) {
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
   --_dso-ozon-content-toggletip-color: colors.$zwart;
 }
@@ -3236,8 +3200,6 @@ td.editaction-remove {
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   color: #191919;
-}
-td.editaction-remove {
   --_dso-ozon-content-toggletip-color: colors.$zwart;
   text-decoration: line-through;
   --_dso-ozon-content-toggletip-text-decoration: underline line-through;
@@ -3275,8 +3237,6 @@ td.editaction-add {
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #e4f1d4;
   color: #191919;
-}
-td.editaction-add {
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
   --_dso-ozon-content-toggletip-color: colors.$zwart;
 }
@@ -3309,8 +3269,6 @@ td.editaction-add {
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #e4f1d4;
   color: #191919;
-}
-.begrippenlijst .editaction-add {
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
   --_dso-ozon-content-toggletip-color: colors.$zwart;
 }
@@ -3342,8 +3300,6 @@ td.editaction-add {
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   color: #191919;
-}
-.begrippenlijst .editaction-remove {
   --_dso-ozon-content-toggletip-color: colors.$zwart;
   text-decoration: line-through;
   --_dso-ozon-content-toggletip-text-decoration: underline line-through;
@@ -3370,8 +3326,6 @@ td.editaction-add {
 
 .kop ins {
   text-decoration: none;
-}
-.kop ins {
   --_dso-alert-success-border-color: #39870c;
   --_dso-alert-error-border-color: #ce3f51;
   --_dso-alert-info-border-color: #6ca4d9;
@@ -3399,8 +3353,6 @@ td.editaction-add {
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #e4f1d4;
   color: #191919;
-}
-.kop ins {
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
   --_dso-ozon-content-toggletip-color: colors.$zwart;
 }
@@ -3432,8 +3384,6 @@ td.editaction-add {
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   color: #191919;
-}
-.kop del {
   --_dso-ozon-content-toggletip-color: colors.$zwart;
   text-decoration: line-through;
   --_dso-ozon-content-toggletip-text-decoration: underline line-through;
@@ -3484,7 +3434,7 @@ const OzonContent = /*@__PURE__*/ proxyCustomElement(class OzonContent extends H
             annotated: this.annotated,
         };
         const transformed = mapper.transform(this.content, context);
-        return h(Fragment, { key: '71bf1fc9de6ed6e967c1344f904be839d0f7e87d' }, transformed);
+        return h(Fragment, { key: 'd9e13c0c7a3e5ffc6e8a3f7068381995bb901443' }, transformed);
     }
     static get watchers() { return {
         "content": ["contentWatcher"]