@dso-toolkit/core 79.1.0 → 81.0.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

@@ -287,6 +287,10 @@
 }
 
 :host(.dso-accordion-compact-black.dso-accordion-wijzigactie-verwijder) {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
@@ -295,7 +299,6 @@
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
-  border-color: #f5d8dc;
   color: #191919;
 }
 :host(.dso-accordion-compact-black.dso-accordion-wijzigactie-verwijder) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
@@ -311,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) {
@@ -417,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/action-list/action-list.css

@@ -9,6 +9,10 @@
   }
 }
 :host {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
@@ -17,7 +21,6 @@
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #e1ecf7;
-  border-color: #e1ecf7;
   color: #191919;
 }
 :host a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {

package/dist/collection/components/advanced-select/advanced-select.css

@@ -100,14 +100,32 @@
   border-radius: 50%;
 }
 .group .option-label::before {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
+  --link-color: currentColor;
+  --link-hover-color: currentColor;
+  --link-visited-color: currentColor;
   --_dso-icon-button-tertiary-color: #191919;
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #ccc;
-  border-color: #ccc;
   color: #191919;
 }
+.group .option-label::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
+}
+.group .option-label::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
+}
+.group .option-label::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
+}
+.group .option-label::before 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"));
+}
 
 .group-label {
   margin: 0;
@@ -135,52 +153,160 @@
 }
 
 .group-info .option-label::before {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
+  --link-color: currentColor;
+  --link-hover-color: currentColor;
+  --link-visited-color: currentColor;
   --_dso-icon-button-tertiary-color: #191919;
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #6ca4d9;
-  border-color: #6ca4d9;
   color: #191919;
 }
+.group-info .option-label::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
+}
+.group-info .option-label::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
+}
+.group-info .option-label::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
+}
+.group-info .option-label::before 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"));
+}
 
 .group-primary .option-label::before {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
+  --link-color: currentColor;
+  --link-hover-color: currentColor;
+  --link-visited-color: currentColor;
   --_dso-icon-button-tertiary-color: #fff;
   background-color: #275937;
-  border-color: #275937;
   color: #fff;
 }
+.group-primary .option-label::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));
+}
+.group-primary .option-label::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));
+}
+.group-primary .option-label::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));
+}
+.group-primary .option-label::before 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-wit"));
+}
 
 .group-success .option-label::before {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
+  --link-color: currentColor;
+  --link-hover-color: currentColor;
+  --link-visited-color: currentColor;
   --_dso-icon-button-tertiary-color: #fff;
   background-color: #39870c;
-  border-color: #39870c;
   color: #fff;
 }
+.group-success .option-label::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));
+}
+.group-success .option-label::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));
+}
+.group-success .option-label::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));
+}
+.group-success .option-label::before 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-wit"));
+}
 
 .group-warning .option-label::before {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
+  --link-color: currentColor;
+  --link-hover-color: currentColor;
+  --link-visited-color: currentColor;
   --_dso-icon-button-tertiary-color: #191919;
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #dcd400;
-  border-color: #dcd400;
   color: #191919;
 }
+.group-warning .option-label::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
+}
+.group-warning .option-label::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
+}
+.group-warning .option-label::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
+}
+.group-warning .option-label::before 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"));
+}
 
 .group-error .option-label::before {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
+  --link-color: currentColor;
+  --link-hover-color: currentColor;
+  --link-visited-color: currentColor;
   --_dso-icon-button-tertiary-color: #fff;
   background-color: #ce3f51;
-  border-color: #ce3f51;
   color: #fff;
 }
+.group-error .option-label::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));
+}
+.group-error .option-label::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));
+}
+.group-error .option-label::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));
+}
+.group-error .option-label::before 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-wit"));
+}
 
 .group-attention .option-label::before {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
+  --link-color: currentColor;
+  --link-hover-color: currentColor;
+  --link-visited-color: currentColor;
   --_dso-icon-button-tertiary-color: #fff;
   background-color: #8b4a6a;
-  border-color: #8b4a6a;
   color: #fff;
 }
+.group-attention .option-label::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));
+}
+.group-attention .option-label::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));
+}
+.group-attention .option-label::before a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));
+}
+.group-attention .option-label::before 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-wit"));
+}
 
 .options {
   margin: 0;

package/dist/collection/components/alert/alert.css

@@ -6,24 +6,77 @@
   margin-block-start: 24px;
 }
 
-:host([compact]:not([compact=false])) {
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+.sr-only {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+.alert {
+  line-height: 1.5;
+  margin-block-end: var(--_dso-alert-margin-block-end, 24px);
+  min-block-size: 56px;
   position: relative;
+  border: 1px solid transparent;
+}
+@media screen and (min-width: 481px) {
+  .alert {
+    padding-block: 15px;
+    padding-inline: 54px 39px;
+  }
+  .alert.dso-compact {
+    padding-block: 7px;
+    padding-inline: 15px 39px;
+  }
+}
+@media screen and (max-width: 480px) {
+  .alert {
+    padding-block: 54px 15px;
+    padding-inline: 15px;
+  }
+  .alert.dso-compact {
+    padding-block: 7px;
+    padding-inline: 15px;
+  }
+}
+.alert:not(:first-child) {
+  margin-block-start: 24px;
+}
+.alert .icon-status {
+  inset-block-start: 15px;
+  inset-inline-start: 15px;
+  position: absolute;
+}
+.alert.dso-compact {
   border-end-end-radius: 8px;
   border-start-end-radius: 8px;
   margin-inline-start: 8px;
 }
-:host([compact]:not([compact=false]))::before {
-  border-end-start-radius: 8px;
-  border-start-start-radius: 8px;
-  inset-block-end: 0;
+.alert.dso-compact::before {
   content: "";
-  inset-inline-start: -8px;
   position: absolute;
-  inset-block-start: 0;
+  inset-block-start: -1px;
+  inset-block-end: -1px;
+  inset-inline-start: -9px;
+  border-start-start-radius: 8px;
+  border-end-start-radius: 8px;
   inline-size: 8px;
 }
-
-:host([status=success]) {
+.alert.dso-compact {
+  min-block-size: 16px;
+}
+.alert.alert-success {
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
@@ -32,27 +85,27 @@
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #e4f1d4;
-  border-color: #e4f1d4;
   color: #191919;
 }
-:host([status=success]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
+.alert.alert-success a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
 }
-:host([status=success]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
+.alert.alert-success a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
 }
-:host([status=success]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+.alert.alert-success a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
-:host([status=success]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+.alert.alert-success 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([status=success][compact]:not([compact=false]))::before {
+.alert.alert-success {
+  border-color: var(--_dso-alert-success-border-color, #e4f1d4);
+}
+.alert.alert-success.dso-compact::before {
   background-color: #39870c;
 }
-
-:host([status=error]) {
+.alert.alert-error {
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
@@ -61,27 +114,27 @@
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
-  border-color: #f5d8dc;
   color: #191919;
 }
-:host([status=error]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
+.alert.alert-error a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
 }
-:host([status=error]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
+.alert.alert-error a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
 }
-:host([status=error]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+.alert.alert-error a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
-:host([status=error]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+.alert.alert-error 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([status=error][compact]:not([compact=false]))::before {
+.alert.alert-error {
+  border-color: var(--_dso-alert-error-border-color, #f5d8dc);
+}
+.alert.alert-error.dso-compact::before {
   background-color: #ce3f51;
 }
-
-:host([status=warning]) {
+.alert.alert-warning {
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
@@ -90,27 +143,27 @@
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #f8f6cc;
-  border-color: #f8f6cc;
   color: #191919;
 }
-:host([status=warning]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
+.alert.alert-warning a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
 }
-:host([status=warning]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
+.alert.alert-warning a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
 }
-:host([status=warning]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+.alert.alert-warning a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
-:host([status=warning]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+.alert.alert-warning 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([status=warning][compact]:not([compact=false]))::before {
+.alert.alert-warning {
+  border-color: var(--_dso-alert-warning-border-color, #f8f6cc);
+}
+.alert.alert-warning.dso-compact::before {
   background-color: #dcd400;
 }
-
-:host([status=info]) {
+.alert.alert-info {
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
@@ -119,81 +172,30 @@
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #e1ecf7;
-  border-color: #e1ecf7;
   color: #191919;
 }
-:host([status=info]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
+.alert.alert-info a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
 }
-:host([status=info]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
+.alert.alert-info a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
 }
-:host([status=info]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+.alert.alert-info a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
-:host([status=info]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+.alert.alert-info 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([status=info][compact]:not([compact=false]))::before {
-  background-color: #6ca4d9;
-}
-
-*,
-*::after,
-*::before {
-  box-sizing: border-box;
-}
-
-.sr-only {
-  position: absolute;
-  inline-size: 1px;
-  block-size: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  border: 0;
-}
-
-.alert {
-  line-height: 1.5;
-  margin-block-end: 24px;
-  min-block-size: 56px;
-  position: relative;
-}
-@media screen and (min-width: 481px) {
-  .alert {
-    padding-block: 16px;
-    padding-inline: 55px 40px;
-  }
-  .alert.dso-compact {
-    padding-block: 8px;
-    padding-inline: 16px 40px;
-  }
+.alert.alert-info {
+  border-color: var(--_dso-alert-info-border-color, #e1ecf7);
 }
-@media screen and (max-width: 480px) {
-  .alert {
-    padding-block: 55px 16px;
-    padding-inline: 16px;
-  }
-  .alert.dso-compact {
-    padding-block: 8px;
-    padding-inline: 16px;
-  }
-}
-.alert:not(:first-child) {
-  margin-block-start: 24px;
-}
-.alert .icon-status {
-  inset-block-start: 16px;
-  inset-inline-start: 16px;
-  position: absolute;
+.alert.alert-info.dso-compact::before {
+  background-color: #6ca4d9;
 }
 .alert dso-icon-button {
   position: absolute;
-  inset-block-start: 8px;
-  inset-inline-end: 8px;
+  inset-block-start: 7px;
+  inset-inline-end: 7px;
 }
 .alert.dso-compact {
   min-block-size: 16px;

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 {
@@ -76,6 +76,10 @@ a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="mailto:"]:hove
 }
 
 :host([wijzigactie=voegtoe]) {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
@@ -84,7 +88,6 @@ a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="mailto:"]:hove
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #e4f1d4;
-  border-color: #e4f1d4;
   color: #191919;
 }
 :host([wijzigactie=voegtoe]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
@@ -101,9 +104,14 @@ 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]) {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
@@ -112,7 +120,6 @@ a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="mailto:"]:hove
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
-  border-color: #f5d8dc;
   color: #191919;
 }
 :host([wijzigactie=verwijder]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
@@ -128,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]) {