@dso-toolkit/core 80.0.0 → 81.1.0

package/dist/cjs/tooltip.functional-component-CD9AUuU7.js

@@ -0,0 +1,18 @@
+'use strict';
+
+var index = require('./index-DvLsepiK.js');
+var clsx = require('./clsx-BtxeOLZW.js');
+
+const Tooltip = ({ visible, onAfterHidden, tipElementRef, tipArrowElementRef }, children) => (index.h("div", { popover: "manual", id: "tooltip", class: clsx.clsx(["dso-tooltip", { visible }]), ref: tipElementRef, onTransitionEnd: (e) => {
+        e.stopPropagation();
+        if (e.propertyName === "opacity" && !visible) {
+            onAfterHidden();
+        }
+    } },
+    index.h("span", { class: "tooltip-arrow", ref: tipArrowElementRef }),
+    index.h("div", { class: "tooltip-inner" }, children)));
+
+exports.Tooltip = Tooltip;
+//# sourceMappingURL=tooltip.functional-component-CD9AUuU7.js.map
+
+//# sourceMappingURL=tooltip.functional-component-CD9AUuU7.js.map

package/dist/cjs/tooltip.functional-component-CD9AUuU7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.functional-component-CD9AUuU7.js","sources":["src/functional-components/tooltip/tooltip.functional-component.tsx"],"sourcesContent":["import { FunctionalComponent, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\ninterface TooltipProps {\r\n  visible: boolean;\r\n  onAfterHidden: () => void;\r\n  tipElementRef: (ref: HTMLDivElement | undefined) => void;\r\n  tipArrowElementRef: (ref: HTMLSpanElement | undefined) => void;\r\n}\r\n\r\nexport const Tooltip: FunctionalComponent<TooltipProps> = (\r\n  { visible, onAfterHidden, tipElementRef, tipArrowElementRef },\r\n  children,\r\n) => (\r\n  <div\r\n    popover=\"manual\"\r\n    id=\"tooltip\"\r\n    class={clsx([\"dso-tooltip\", { visible }])}\r\n    ref={tipElementRef}\r\n    onTransitionEnd={(e) => {\r\n      e.stopPropagation();\r\n\r\n      if (e.propertyName === \"opacity\" && !visible) {\r\n        onAfterHidden();\r\n      }\r\n    }}\r\n  >\r\n    <span class=\"tooltip-arrow\" ref={tipArrowElementRef}></span>\r\n    <div class=\"tooltip-inner\">{children}</div>\r\n  </div>\r\n);\r\n"],"names":["h","clsx"],"mappings":";;;;;MAUa,OAAO,GAAsC,CACxD,EAAE,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,kBAAkB,EAAE,EAC7D,QAAQ,MAERA,OAAA,CAAA,KAAA,EAAA,EACE,OAAO,EAAC,QAAQ,EAChB,EAAE,EAAC,SAAS,EACZ,KAAK,EAAEC,SAAI,CAAC,CAAC,aAAa,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,EACzC,GAAG,EAAE,aAAa,EAClB,eAAe,EAAE,CAAC,CAAC,KAAI;QACrB,CAAC,CAAC,eAAe,EAAE;QAEnB,IAAI,CAAC,CAAC,YAAY,KAAK,SAAS,IAAI,CAAC,OAAO,EAAE;AAC5C,YAAA,aAAa,EAAE;;KAElB,EAAA;AAED,IAAAD,OAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,eAAe,EAAC,GAAG,EAAE,kBAAkB,EAAS,CAAA;IAC5DA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EAAE,QAAQ,CAAO,CACvC;;;;"}

package/dist/collection/collection-manifest.json

@@ -22,7 +22,6 @@
     "components/card-container/card-container.js",
     "components/contact-information/contact-information.js",
     "components/date-picker/date-picker.js",
-    "components/date-picker-legacy/date-picker-legacy.js",
     "components/document-card/document-card.js",
     "components/document-component/document-component.js",
     "components/document-component-demo/document-component.demo.js",
@@ -47,6 +46,7 @@
     "components/modal/modal.js",
     "components/onboarding-tip/onboarding-tip.js",
     "components/ozon-content/ozon-content.js",
+    "components/ozon-content/components/ozon-content-toggletip/ozon-content-toggletip.js",
     "components/pagination/pagination.js",
     "components/plekinfo-card/plekinfo-card.js",
     "components/progress-bar/progress-bar.js",

package/dist/collection/components/accordion/components/accordion-section.css

@@ -314,7 +314,9 @@
   background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
 :host(.dso-accordion-compact-black.dso-accordion-wijzigactie-verwijder) {
+  --_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) {
   :host(.dso-accordion-compact-black.dso-accordion-wijzigactie-verwijder) {
@@ -420,8 +422,7 @@
   color: #39870c;
   margin-inline-start: 8px;
 }
-:host(.dso-accordion-neutral) .dso-section-handle dso-icon,
-:host(.dso-accordion-neutral) .dso-section-handle svg.di {
+:host(.dso-accordion-neutral) .dso-section-handle dso-icon {
   vertical-align: top;
 }
 :host(.dso-accordion-neutral) .dso-section-body[open],

package/dist/collection/components/annotation/annotation.css

@@ -11,11 +11,11 @@ a:hover, a:focus-visible {
 a:active {
   text-decoration: none;
 }
-a :is(dso-icon, svg.di) + span,
-a span + :is(dso-icon, svg.di) {
+a dso-icon + span,
+a span + dso-icon {
   margin-inline-start: 8px;
 }
-a .sr-only + :is(dso-icon, svg.di) {
+a .sr-only + dso-icon {
   margin-inline-start: 0;
 }
 a:visited {
@@ -104,6 +104,7 @@ a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="mailto:"]:hove
 }
 :host([wijzigactie=voegtoe]) {
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
+  --_dso-ozon-content-toggletip-color: colors.$zwart;
 }
 
 :host([wijzigactie=verwijder]) {
@@ -134,7 +135,9 @@ a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="mailto:"]:hove
   background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
 :host([wijzigactie=verwijder]) {
+  --_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) {
   :host([wijzigactie=verwijder]) {

package/dist/collection/components/card/card.css

@@ -11,11 +11,11 @@ a:hover, a:focus-visible {
 a:active {
   text-decoration: none;
 }
-a :is(dso-icon, svg.di) + span,
-a span + :is(dso-icon, svg.di) {
+a dso-icon + span,
+a span + dso-icon {
   margin-inline-start: 8px;
 }
-a .sr-only + :is(dso-icon, svg.di) {
+a .sr-only + dso-icon {
   margin-inline-start: 0;
 }
 a:visited {

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

@@ -26,7 +26,7 @@ export class DocumentCard {
         return this.host.querySelector("[slot='meta']");
     }
     render() {
-        return (h("div", { key: 'bbd724d0e936c3f7adb87aff14b8e30b85c7b0c9', class: "dso-document-card-container" }, h("div", { key: '4e8689ef58c31d4f490f105afe64b17c4f764cca', class: "dso-document-card-heading" }, h("a", { key: 'f8aa9dbc91f3307d6d7042599fab6d7d9ee110c7', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("span", { key: '35815a6a48d9ff6666197b0facbf30b4eef242cf', class: "icon-container" }, h("dso-icon", { key: '80a301e406813a4874aa64a565ef9cef7663a494', icon: "chevron-right" }), h("slot", { key: '79bb4598f8e89d9ac047347910c3e0dae3877fbf', name: "heading" }))), this.metaSlottedElement !== null && h("slot", { key: '94090520fef0be8297eeb50848e67ef2b3440367', name: "meta" })), h("div", { key: '5499a344d6a3b3e486df41e789cc1eb20634cbd2', class: "dso-document-card-type" }, h("slot", { key: '0f535e6c5b5574e9844e5ccb6a3fcb0f4fb15770', name: "type" })), h("div", { key: 'da465fb5a9994e922a87954beebfc95b64b04d06', class: "dso-document-card-status" }, h("slot", { key: 'eac2432d9123f912c7d37270c570e6dc23ca147b', name: "status" }))));
+        return (h("div", { key: '830234a02d8b51b43fcae656ce792357fbcaf490', class: "dso-document-card-container" }, h("div", { key: 'a0bf79c29b4db4292f70d51212e9496396422664', class: "dso-document-card-heading" }, h("a", { key: 'a51e4c8d6c82975a322640cf971091ac51d66737', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("span", { key: 'd31210e328e3523254abf14e3b2c34fde080aa5d', class: "icon-container" }, h("dso-icon", { key: 'ed764cb80d609701e548e49e8a5b2424a6d76483', icon: "chevron-right" }), h("slot", { key: '4b55617a059c90d0756eda3dcb98280a1ad6f05e', name: "heading" }))), this.metaSlottedElement !== null && h("slot", { key: '437e610ad9aade44351fb04727dd7de455425ead', name: "meta" })), h("div", { key: '5b99cc5760b224db895c5665d2fbf943caa3e385', class: "dso-document-card-type" }, h("slot", { key: '543f5049294be990e79340e4bf7e8fbba5c6daf6', name: "type" })), h("div", { key: 'e5589531c457954a1eea1baeebbebc9158702e1c', class: "dso-document-card-status" }, h("slot", { key: 'eadbbfdce403d39c3b813962f269189a671959dc', name: "status" }))));
     }
     static get is() { return "dso-document-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/document-component/document-component.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;
@@ -1026,6 +946,16 @@ a.dso-tertiary, a.dso-tertiary:visited {
   margin-inline-start: 16px;
 }
 
+mark {
+  background-color: var(--_dt-mark-bg-color, #f8f5ce);
+  color: var(--_dt-mark-color, #000);
+  padding-block: var(--_dt-mark-padding-block, 0.2rem);
+  font-weight: var(--_dt-mark-font-weight, normal);
+}
+mark.dso-highlight {
+  background-color: #dbd136;
+}
+
 .sr-only {
   position: absolute;
   inline-size: 1px;
@@ -1089,10 +1019,15 @@ a.dso-tertiary, a.dso-tertiary:visited {
 :host(:where([wijzigactie=verwijder])) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
+:host([wijzigactie=verwijderContainer]) .heading-container,
+:host(:where([wijzigactie=verwijder])) {
+  --_dso-ozon-content-toggletip-color: colors.$zwart;
+}
 
 .heading-element,
 .content {
   text-decoration: var(--_dso-document-component-text-decoration);
+  --_dso-ozon-content-toggletip-text-decoration: underline var(--_dso-document-component-text-decoration);
 }
 @media screen and (min--moz-device-pixel-ratio: 0) {
   .heading-element,
@@ -1136,6 +1071,7 @@ a.dso-tertiary, a.dso-tertiary:visited {
 :host([wijzigactie=nieuweContainer]) .heading-container,
 :host([wijzigactie=voegtoe]) {
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
+  --_dso-ozon-content-toggletip-color: colors.$zwart;
 }
 
 :host([filtered]) {
@@ -1189,11 +1125,11 @@ a.dso-tertiary, a.dso-tertiary:visited {
 .heading-anchor:active {
   text-decoration: none;
 }
-.heading-anchor :is(dso-icon, svg.di) + span,
-.heading-anchor span + :is(dso-icon, svg.di) {
+.heading-anchor dso-icon + span,
+.heading-anchor span + dso-icon {
   margin-inline-start: 8px;
 }
-.heading-anchor .sr-only + :is(dso-icon, svg.di) {
+.heading-anchor .sr-only + dso-icon {
   margin-inline-start: 0;
 }
 .heading-anchor:visited {
@@ -1211,8 +1147,15 @@ a.dso-tertiary, a.dso-tertiary:visited {
   vertical-align: middle;
 }
 
-#heading-title {
-  display: block;
+.alternative-title {
+  cursor: pointer;
+}
+.alternative-title:hover, .alternative-title:focus-visible {
+  color: var(--link-hover-color);
+  text-decoration: underline;
+}
+.alternative-title:active {
+  text-decoration: none;
 }
 
 :host([not-collapsible]) .heading-container {
@@ -1229,16 +1172,6 @@ a.dso-tertiary, a.dso-tertiary:visited {
   --link-color: #39870c;
   --link-hover-color: #676cb0;
 }
-:host([mode=document]:not([not-collapsible])) .heading-title > dso-ozon-content {
-  cursor: pointer;
-}
-:host([mode=document]:not([not-collapsible])) .heading-title > dso-ozon-content:hover, :host([mode=document]:not([not-collapsible])) .heading-title > dso-ozon-content:focus-visible {
-  color: var(--link-hover-color);
-  text-decoration: underline;
-}
-:host([mode=document]:not([not-collapsible])) .heading-title > dso-ozon-content:active {
-  text-decoration: none;
-}
 :host([mode=document]:not([not-collapsible])) dso-ozon-content.kop::part(_kop) {
   cursor: pointer;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"document-component.interfaces.js","sourceRoot":"","sources":["../../../../src/components/document-component/document-component.interfaces.ts"],"names":[],"mappings":"","sourcesContent":["import { DsoOzonContentCustomEvent } from \"../../components\";\r\nimport { OzonContentAnchorClickEvent, OzonContentText } from \"../ozon-content/ozon-content.interfaces\";\r\n\r\nexport interface DocumentComponentOpenToggleEvent {\r\n  originalEvent: Event;\r\n  open: boolean;\r\n}\r\n\r\nexport interface DocumentComponentToggleAnnotationEvent {\r\n  originalEvent: Event;\r\n}\r\n\r\nexport type DocumentComponentWijzigactie = \"voegtoe\" | \"verwijder\" | \"nieuweContainer\" | \"verwijderContainer\";\r\n\r\nexport type DocumentComponentAnnotationsWijzigactie = \"voegtoe\" | \"verwijder\";\r\n\r\nexport interface DocumentComponentOzonContentAnchorClickEvent {\r\n  originalEvent: DsoOzonContentCustomEvent<OzonContentAnchorClickEvent>;\r\n  ozonContentAnchorClick: OzonContentAnchorClickEvent;\r\n}\r\n\r\nexport type DocumentComponentInputType = XMLDocument | string;\r\n\r\ntype DocumentComponentSource = \"kop\" | \"inhoud\";\r\n\r\nexport type DocumentComponentMarkFunction = (text: string, source: DocumentComponentSource) => OzonContentText[];\r\n\r\nexport interface DocumentComponentMarkItemHighlightEvent {\r\n  source: DocumentComponentSource;\r\n  text: string;\r\n  elementRef: HTMLElement;\r\n}\r\n\r\nexport type DocumentComponentRecursiveToggleState = undefined | boolean | \"indeterminate\";\r\n\r\nexport interface DocumentComponentRecursiveToggleEvent {\r\n  originalEvent: MouseEvent;\r\n  current: DocumentComponentRecursiveToggleState;\r\n  next: boolean;\r\n}\r\n\r\nexport type DocumentComponentMode = \"document\" | \"table-of-contents\";\r\n\r\nexport interface DocumentComponentTableOfContentsClickEvent {\r\n  originalEvent: MouseEvent;\r\n  /** True when user clicked the document component heading while holding Ctrl, Alt or other modifiers, or when the document component heading is right-clicked. Can be used to determine navigation. */\r\n  isModifiedEvent: boolean;\r\n}\r\n\r\nexport interface DocumentComponentAantekenElement {\r\n  type: \"Vervallen\" | \"Gereserveerd\";\r\n  wijzigactie?: DocumentComponentWijzigactie;\r\n}\r\n"]}
+{"version":3,"file":"document-component.interfaces.js","sourceRoot":"","sources":["../../../../src/components/document-component/document-component.interfaces.ts"],"names":[],"mappings":"","sourcesContent":["import { DsoOzonContentCustomEvent } from \"../../components\";\r\nimport { MarkTextText } from \"../../functional-components/mark-text/mark-text.interfaces\";\r\nimport { OzonContentClickEvent } from \"../ozon-content/ozon-content.interfaces\";\r\n\r\nexport interface DocumentComponentOpenToggleEvent {\r\n  originalEvent: Event;\r\n  open: boolean;\r\n}\r\n\r\nexport interface DocumentComponentToggleAnnotationEvent {\r\n  originalEvent: Event;\r\n}\r\n\r\nexport type DocumentComponentWijzigactie = \"voegtoe\" | \"verwijder\" | \"nieuweContainer\" | \"verwijderContainer\";\r\n\r\nexport type DocumentComponentAnnotationsWijzigactie = \"voegtoe\" | \"verwijder\";\r\n\r\nexport interface DocumentComponentOzonContentClickEvent {\r\n  originalEvent: DsoOzonContentCustomEvent<OzonContentClickEvent>;\r\n  ozonContentClick: OzonContentClickEvent;\r\n}\r\n\r\nexport type DocumentComponentInputType = XMLDocument | string;\r\n\r\nexport type DocumentComponentSource = \"kop\" | \"inhoud\" | \"alternativeTitle\";\r\n\r\nexport type DocumentComponentMarkFunction = (text: string, source: DocumentComponentSource) => MarkTextText[];\r\n\r\nexport interface DocumentComponentMarkItemHighlightEvent {\r\n  source: DocumentComponentSource;\r\n  text: string;\r\n  elementRef: HTMLElement;\r\n}\r\n\r\nexport type DocumentComponentRecursiveToggleState = undefined | boolean | \"indeterminate\";\r\n\r\nexport interface DocumentComponentRecursiveToggleEvent {\r\n  originalEvent: MouseEvent;\r\n  current: DocumentComponentRecursiveToggleState;\r\n  next: boolean;\r\n}\r\n\r\nexport type DocumentComponentMode = \"document\" | \"table-of-contents\";\r\n\r\nexport interface DocumentComponentTableOfContentsClickEvent {\r\n  originalEvent: MouseEvent;\r\n  /** True when user clicked the document component heading while holding Ctrl, Alt or other modifiers, or when the document component heading is right-clicked. Can be used to determine navigation. */\r\n  isModifiedEvent: boolean;\r\n}\r\n\r\nexport interface DocumentComponentAantekenElement {\r\n  type: \"Vervallen\" | \"Gereserveerd\";\r\n  wijzigactie?: DocumentComponentWijzigactie;\r\n}\r\n"]}