@dso-toolkit/core 97.1.1 → 99.0.0

package/dist/collection/components/document-component/document-component.css

@@ -27,7 +27,7 @@ label.dso-primary {
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: var(--_dt-button-text-align, start);
+  text-align: var(--_dso-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -58,13 +58,13 @@ 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);
-  float: var(--_dt-button-float-primary, none);
+  float: var(--_dso-button-float-primary, none);
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
   line-height: 1.5;
   min-inline-size: 56px;
-  inline-size: var(--_dt-button-inline-size, auto);
+  inline-size: var(--_dso-button-inline-size, auto);
   padding-block: 11px;
   padding-inline: 15px;
 }
@@ -74,7 +74,7 @@ label.dso-primary:hover {
   background-color: var(--_dso-button-primary-hover-background-color, #275937);
   border-color: var(--_dso-button-primary-hover-border-color, #275937);
   color: var(--_dso-button-primary-hover-color, #fff);
-  float: var(--_dt-button-float-primary, none);
+  float: var(--_dso-button-float-primary, none);
 }
 a.dso-primary:active,
 button.dso-primary:active,
@@ -82,7 +82,7 @@ label.dso-primary:active {
   background-color: var(--_dso-button-primary-active-background-color, #173521);
   border-color: var(--_dso-button-primary-active-border-color, #173521);
   color: var(--_dso-button-primary-active-color, #fff);
-  float: var(--_dt-button-float-primary, none);
+  float: var(--_dso-button-float-primary, none);
 }
 a.dso-primary[disabled], a.dso-primary[disabled]:hover,
 button.dso-primary[disabled],
@@ -92,7 +92,7 @@ label.dso-primary[disabled]:hover {
   background-color: var(--_dso-button-primary-disabled-background-color, #afcf9d);
   border-color: var(--_dso-button-primary-disabled-border-color, #afcf9d);
   color: var(--_dso-button-primary-disabled-color, #fff);
-  float: var(--_dt-button-float-primary, none);
+  float: var(--_dso-button-float-primary, none);
 }
 a.dso-primary.dso-small,
 button.dso-primary.dso-small,
@@ -209,20 +209,24 @@ label.dso-primary.dso-spinner-right::after {
 a.dso-primary.download::after,
 button.dso-primary.download::after,
 label.dso-primary.download::after {
-  background: url("./di.svg#download-wit") no-repeat center;
+  background-image: var(--_dso-di-download-wit);
+  background-repeat: no-repeat;
+  background-position: center;
   background-size: cover;
   block-size: 24px;
-  vertical-align: top;
   inline-size: 24px;
+  vertical-align: top;
 }
 a.dso-primary.extern::after,
 button.dso-primary.extern::after,
 label.dso-primary.extern::after {
-  background: url("./di.svg#external-link-wit") no-repeat center;
+  background-image: var(--_dso-di-external-link-wit);
+  background-repeat: no-repeat;
+  background-position: center;
   background-size: cover;
   block-size: 24px;
-  vertical-align: top;
   inline-size: 24px;
+  vertical-align: top;
 }
 a.dso-secondary,
 button.dso-secondary,
@@ -233,7 +237,7 @@ label.dso-secondary {
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: var(--_dt-button-text-align, start);
+  text-align: var(--_dso-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -264,13 +268,13 @@ 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);
-  float: var(--_dt-button-float-secondary, none);
+  float: var(--_dso-button-float-secondary, none);
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
   line-height: 1.5;
   min-inline-size: 56px;
-  inline-size: var(--_dt-button-inline-size, auto);
+  inline-size: var(--_dso-button-inline-size, auto);
   padding-block: 11px;
   padding-inline: 15px;
 }
@@ -280,7 +284,7 @@ label.dso-secondary:hover {
   background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);
   border-color: var(--_dso-button-secondary-hover-border-color, #275937);
   color: var(--_dso-button-secondary-hover-color, #275937);
-  float: var(--_dt-button-float-secondary, none);
+  float: var(--_dso-button-float-secondary, none);
 }
 a.dso-secondary:active,
 button.dso-secondary:active,
@@ -288,7 +292,7 @@ label.dso-secondary:active {
   background-color: var(--_dso-button-secondary-active-background-color, #275937);
   border-color: var(--_dso-button-secondary-active-border-color, #275937);
   color: var(--_dso-button-secondary-active-color, #fff);
-  float: var(--_dt-button-float-secondary, none);
+  float: var(--_dso-button-float-secondary, none);
 }
 a.dso-secondary[disabled], a.dso-secondary[disabled]:hover,
 button.dso-secondary[disabled],
@@ -298,7 +302,7 @@ label.dso-secondary[disabled]:hover {
   background-color: var(--_dso-button-secondary-disabled-background-color, #fff);
   border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);
   color: var(--_dso-button-secondary-disabled-color, #afcf9d);
-  float: var(--_dt-button-float-secondary, none);
+  float: var(--_dso-button-float-secondary, none);
 }
 a.dso-secondary.dso-small,
 button.dso-secondary.dso-small,
@@ -451,40 +455,44 @@ label.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {
 a.dso-secondary.download::after,
 button.dso-secondary.download::after,
 label.dso-secondary.download::after {
-  background: url("./di.svg#download") no-repeat center;
+  background-image: var(--_dso-di-download-grasgroen);
+  background-repeat: no-repeat;
+  background-position: center;
   background-size: cover;
   block-size: 24px;
-  vertical-align: top;
   inline-size: 24px;
+  vertical-align: top;
 }
 a.dso-secondary.download:hover::after,
 button.dso-secondary.download:hover::after,
 label.dso-secondary.download:hover::after {
-  background-image: var(--_dso-di-background-image, url("./di.svg#download-bosgroen"));
+  background-image: var(--_dso-di-download-bosgroen);
 }
 a.dso-secondary.download[disabled]::after,
 button.dso-secondary.download[disabled]::after,
 label.dso-secondary.download[disabled]::after {
-  background-image: var(--_dso-di-background-image, url("./di.svg#download-grasgroen-40"));
+  background-image: var(--_dso-di-download-grasgroen-40);
 }
 a.dso-secondary.extern::after,
 button.dso-secondary.extern::after,
 label.dso-secondary.extern::after {
-  background: url("./di.svg#external-link") no-repeat center;
+  background-image: var(--_dso-di-external-link-grasgroen);
+  background-repeat: no-repeat;
+  background-position: center;
   background-size: cover;
   block-size: 24px;
-  vertical-align: top;
   inline-size: 24px;
+  vertical-align: top;
 }
 a.dso-secondary.extern:hover::after,
 button.dso-secondary.extern:hover::after,
 label.dso-secondary.extern:hover::after {
-  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-bosgroen"));
+  background-image: var(--_dso-di-external-link-bosgroen);
 }
 a.dso-secondary.extern[disabled]::after,
 button.dso-secondary.extern[disabled]::after,
 label.dso-secondary.extern[disabled]::after {
-  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-grasgroen-40"));
+  background-image: var(--_dso-di-external-link-grasgroen-40);
 }
 a.dso-tertiary,
 button.dso-tertiary,
@@ -495,7 +503,7 @@ label.dso-tertiary {
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: var(--_dt-button-text-align, start);
+  text-align: var(--_dso-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -529,7 +537,7 @@ label.dso-tertiary {
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: var(--_dt-button-text-align, start);
+  text-align: var(--_dso-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -560,13 +568,13 @@ label.dso-tertiary {
   background-color: var(--_dso-button-tertiary-background-color, );
   border-color: var(--_dso-button-tertiary-border-color, );
   color: var(--_dso-button-tertiary-color, #39870c);
-  float: var(--_dt-button-float-tertiary, none);
+  float: var(--_dso-button-float-tertiary, none);
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
   line-height: 1.5;
   min-inline-size: auto;
-  inline-size: var(--_dt-button-inline-size, auto);
+  inline-size: var(--_dso-button-inline-size, auto);
   padding-block: 11px;
   padding-inline: 15px;
 }
@@ -576,7 +584,7 @@ label.dso-tertiary:hover {
   background-color: var(--_dso-button-tertiary-hover-background-color, );
   border-color: var(--_dso-button-tertiary-hover-border-color, );
   color: var(--_dso-button-tertiary-hover-color, #275937);
-  float: var(--_dt-button-float-tertiary, none);
+  float: var(--_dso-button-float-tertiary, none);
 }
 a.dso-tertiary:active,
 button.dso-tertiary:active,
@@ -584,7 +592,7 @@ label.dso-tertiary:active {
   background-color: var(--_dso-button-tertiary-active-background-color, );
   border-color: var(--_dso-button-tertiary-active-border-color, );
   color: var(--_dso-button-tertiary-active-color, #173521);
-  float: var(--_dt-button-float-tertiary, none);
+  float: var(--_dso-button-float-tertiary, none);
 }
 a.dso-tertiary[disabled], a.dso-tertiary[disabled]:hover,
 button.dso-tertiary[disabled],
@@ -594,7 +602,7 @@ label.dso-tertiary[disabled]:hover {
   background-color: var(--_dso-button-tertiary-disabled-background-color, );
   border-color: var(--_dso-button-tertiary-disabled-border-color, );
   color: var(--_dso-button-tertiary-disabled-color, #afcf9d);
-  float: var(--_dt-button-float-tertiary, none);
+  float: var(--_dso-button-float-tertiary, none);
 }
 a.dso-tertiary.dso-small,
 button.dso-tertiary.dso-small,
@@ -665,7 +673,7 @@ label.dso-tertiary {
   border: 0;
   line-height: 1;
   padding-inline: 0;
-  padding-block: var(--_dt-button-padding-block-tertiary, 0);
+  padding-block: var(--_dso-button-padding-block-tertiary, 0);
   background-color: transparent;
 }
 a.dso-tertiary[disabled].dso-spinner-left, a.dso-tertiary[disabled].dso-spinner-right,
@@ -762,44 +770,48 @@ label.dso-tertiary.download::after {
 a.dso-tertiary.download::after,
 button.dso-tertiary.download::after,
 label.dso-tertiary.download::after {
-  background: url("./di.svg#download") no-repeat center;
+  background-image: var(--_dso-button-tertiary-download-icon, var(--_dso-di-download-grasgroen));
+  background-repeat: no-repeat;
+  background-position: center;
   background-size: cover;
   block-size: 24px;
-  vertical-align: top;
   inline-size: 24px;
+  vertical-align: top;
 }
 a.dso-tertiary.download[disabled]::after,
 button.dso-tertiary.download[disabled]::after,
 label.dso-tertiary.download[disabled]::after {
-  background-image: var(--_dso-di-background-image, url("./di.svg#download-grasgroen-40"));
+  background-image: var(--_dso-di-download-grasgroen-40);
 }
 a.dso-tertiary.download:not([disabled]):hover::after, a.dso-tertiary.download:not([disabled]):active::after,
 button.dso-tertiary.download:not([disabled]):hover::after,
 button.dso-tertiary.download:not([disabled]):active::after,
 label.dso-tertiary.download:not([disabled]):hover::after,
 label.dso-tertiary.download:not([disabled]):active::after {
-  background-image: var(--_dso-di-background-image, url("./di.svg#download-bosgroen"));
+  background-image: var(--_dso-button-tertiary-download-icon, var(--_dso-di-download-bosgroen));
 }
 a.dso-tertiary.extern::after,
 button.dso-tertiary.extern::after,
 label.dso-tertiary.extern::after {
-  background: url("./di.svg#external-link") no-repeat center;
+  background-image: var(--_dso-button-tertiary-external-link-icon, var(--_dso-di-external-link-grasgroen));
+  background-repeat: no-repeat;
+  background-position: center;
   background-size: cover;
   block-size: 24px;
-  vertical-align: top;
   inline-size: 24px;
+  vertical-align: top;
 }
 a.dso-tertiary.extern[disabled]::after,
 button.dso-tertiary.extern[disabled]::after,
 label.dso-tertiary.extern[disabled]::after {
-  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-grasgroen-40"));
+  background-image: var(--_dso-di-external-link-grasgroen-40);
 }
 a.dso-tertiary.extern:not([disabled]):hover::after, a.dso-tertiary.extern:not([disabled]):active::after,
 button.dso-tertiary.extern:not([disabled]):hover::after,
 button.dso-tertiary.extern:not([disabled]):active::after,
 label.dso-tertiary.extern:not([disabled]):hover::after,
 label.dso-tertiary.extern:not([disabled]):active::after {
-  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-bosgroen"));
+  background-image: var(--_dso-button-tertiary-external-link-icon, var(--_dso-di-external-link-bosgroen));
 }
 a.dso-map,
 button.dso-map,
@@ -810,7 +822,7 @@ label.dso-map {
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: var(--_dt-button-text-align, start);
+  text-align: var(--_dso-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -833,13 +845,13 @@ 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);
-  float: var(--_dt-button-float-secondary, none);
+  float: var(--_dso-button-float-secondary, none);
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
   line-height: 1.5;
   min-inline-size: 56px;
-  inline-size: var(--_dt-button-inline-size, auto);
+  inline-size: var(--_dso-button-inline-size, auto);
   padding-block: 11px;
   padding-inline: 15px;
 }
@@ -849,7 +861,7 @@ label.dso-map:hover {
   background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);
   border-color: var(--_dso-button-secondary-hover-border-color, #275937);
   color: var(--_dso-button-secondary-hover-color, #275937);
-  float: var(--_dt-button-float-secondary, none);
+  float: var(--_dso-button-float-secondary, none);
 }
 a.dso-map:active,
 button.dso-map:active,
@@ -857,7 +869,7 @@ label.dso-map:active {
   background-color: var(--_dso-button-secondary-active-background-color, #275937);
   border-color: var(--_dso-button-secondary-active-border-color, #275937);
   color: var(--_dso-button-secondary-active-color, #fff);
-  float: var(--_dt-button-float-secondary, none);
+  float: var(--_dso-button-float-secondary, none);
 }
 a.dso-map[disabled], a.dso-map[disabled]:hover,
 button.dso-map[disabled],
@@ -867,7 +879,7 @@ label.dso-map[disabled]:hover {
   background-color: var(--_dso-button-secondary-disabled-background-color, #fff);
   border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);
   color: var(--_dso-button-secondary-disabled-color, #afcf9d);
-  float: var(--_dt-button-float-secondary, none);
+  float: var(--_dso-button-float-secondary, none);
 }
 a.dso-map.dso-small,
 button.dso-map.dso-small,
@@ -1055,14 +1067,13 @@ a.dso-secondary, a.dso-secondary:visited {
   color: #39870c;
 }
 a.dso-secondary:hover, a.dso-secondary:focus-visible {
-  color: #275937;
   text-decoration: none;
 }
 a.dso-tertiary {
   text-decoration: none;
 }
 a.dso-tertiary, a.dso-tertiary:visited {
-  color: #39870c;
+  color: var(--_dso-button-tertiary-color, #39870c);
 }
 
 .dso-primary + .dso-primary,
@@ -1074,15 +1085,15 @@ a.dso-tertiary, a.dso-tertiary:visited {
 .dso-tertiary + .dso-primary,
 .dso-tertiary + .dso-secondary,
 .dso-tertiary + .dso-tertiary {
-  margin-block-start: var(--_dt-button-after-button-margin-block-start, 0);
-  margin-inline-start: var(--_dt-button-after-button-margin-inline-start, 16px);
+  margin-block-start: var(--_dso-button-after-button-margin-block-start, 0);
+  margin-inline-start: var(--_dso-button-after-button-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);
+  background-color: var(--_dso-mark-bg-color, #f8f5ce);
+  color: var(--_dso-mark-color, #000);
+  padding-block: var(--_dso-mark-padding-block, 0.2rem);
+  font-weight: var(--_dso-mark-font-weight, normal);
 }
 mark.dso-highlight {
   background-color: #dbd136;
@@ -1122,28 +1133,14 @@ mark.dso-highlight {
   --_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;
-}
-:host([wijzigactie=verwijderContainer]) .heading-container a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible),
-:host(:where([wijzigactie=verwijder])) 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([wijzigactie=verwijderContainer]) .heading-container a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible),
-:host(:where([wijzigactie=verwijder])) 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([wijzigactie=verwijderContainer]) .heading-container a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible),
-:host(:where([wijzigactie=verwijder])) 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([wijzigactie=verwijderContainer]) .heading-container a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible),
-: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#mail-outline-zwart"));
-}
-:host([wijzigactie=verwijderContainer]) .heading-container,
-:host(:where([wijzigactie=verwijder])) {
+  --_dso-link-color: currentColor;
+  --_dso-link-hover-color: currentColor;
+  --_dso-link-visited-color: currentColor;
+  --_dso-link-download-icon: var(--_dso-di-download-zwart);
+  --_dso-link-extern-icon: var(--_dso-di-external-link-zwart);
+  --_dso-link-phone-icon: var(--_dso-di-call-zwart);
+  --_dso-link-mail-icon: var(--_dso-di-mail-outline-zwart);
+  --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-zwart);
   --_dso-icon-button-secondary-active-color: #fff;
   --_dso-icon-button-secondary-active-background-color: #1f472c;
   --_dso-icon-button-secondary-toggled-color: #fff;
@@ -1155,19 +1152,21 @@ mark.dso-highlight {
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
+  --_dso-button-tertiary-download-icon: var(--_dso-di-download-zwart);
+  --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-zwart);
   --_dso-button-tertiary-color: #191919;
   --_dso-button-tertiary-hover-color: #4c4c4c;
   --_dso-button-tertiary-active-color: #173521;
   --_dso-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   color: #191919;
-  --_dt-ozon-content-toggletip-color: #000;
+  --_dso-ozon-content-toggletip-color: #000;
 }
 
 .heading-element,
 .content {
   text-decoration: var(--_dso-document-component-text-decoration);
-  --_dt-ozon-content-toggletip-text-decoration: underline 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,
@@ -1182,28 +1181,14 @@ mark.dso-highlight {
   --_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;
-}
-:host([wijzigactie=nieuweContainer]) .heading-container a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible),
-:host([wijzigactie=voegtoe]) 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([wijzigactie=nieuweContainer]) .heading-container a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible),
-:host([wijzigactie=voegtoe]) 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([wijzigactie=nieuweContainer]) .heading-container a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible),
-:host([wijzigactie=voegtoe]) 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([wijzigactie=nieuweContainer]) .heading-container a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible),
-:host([wijzigactie=voegtoe]) 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#mail-outline-zwart"));
-}
-:host([wijzigactie=nieuweContainer]) .heading-container,
-:host([wijzigactie=voegtoe]) {
+  --_dso-link-color: currentColor;
+  --_dso-link-hover-color: currentColor;
+  --_dso-link-visited-color: currentColor;
+  --_dso-link-download-icon: var(--_dso-di-download-zwart);
+  --_dso-link-extern-icon: var(--_dso-di-external-link-zwart);
+  --_dso-link-phone-icon: var(--_dso-di-call-zwart);
+  --_dso-link-mail-icon: var(--_dso-di-mail-outline-zwart);
+  --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-zwart);
   --_dso-icon-button-secondary-active-color: #fff;
   --_dso-icon-button-secondary-active-background-color: #1f472c;
   --_dso-icon-button-secondary-toggled-color: #fff;
@@ -1215,6 +1200,8 @@ mark.dso-highlight {
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
+  --_dso-button-tertiary-download-icon: var(--_dso-di-download-zwart);
+  --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-zwart);
   --_dso-button-tertiary-color: #191919;
   --_dso-button-tertiary-hover-color: #4c4c4c;
   --_dso-button-tertiary-active-color: #173521;
@@ -1222,7 +1209,7 @@ mark.dso-highlight {
   background-color: #e4f1d4;
   color: #191919;
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
-  --_dt-ozon-content-toggletip-color: #000;
+  --_dso-ozon-content-toggletip-color: #000;
 }
 
 :host([filtered]) {
@@ -1265,12 +1252,12 @@ mark.dso-highlight {
   flex-wrap: nowrap;
   overflow-wrap: anywhere;
   background-color: transparent;
-  color: var(--link-color);
+  color: var(--_dso-link-color);
   text-decoration: underline;
   text-underline-offset: 15%;
 }
 .heading-anchor:hover, .heading-anchor:focus-visible {
-  color: var(--link-hover-color);
+  color: var(--_dso-link-hover-color);
   text-decoration: underline;
 }
 .heading-anchor:active {
@@ -1280,7 +1267,7 @@ mark.dso-highlight {
   margin-inline-start: 0;
 }
 .heading-anchor:visited {
-  color: var(--link-visited-color);
+  color: var(--_dso-link-visited-color);
 }
 .heading-anchor {
   text-decoration: none;
@@ -1301,7 +1288,7 @@ mark.dso-highlight {
   cursor: pointer;
 }
 .alternative-title:hover, .alternative-title:focus-visible {
-  color: var(--link-hover-color);
+  color: var(--_dso-link-hover-color);
   text-decoration: underline;
 }
 .alternative-title:active {
@@ -1323,14 +1310,14 @@ mark.dso-highlight {
 }
 
 :host([mode=document]:not([not-collapsible])) {
-  --link-color: #39870c;
-  --link-hover-color: #676cb0;
+  --_dso-link-color: #39870c;
+  --_dso-link-hover-color: #676cb0;
 }
 :host([mode=document]:not([not-collapsible])) dso-ozon-content.kop::part(_kop) {
   cursor: pointer;
 }
 :host([mode=document]:not([not-collapsible])) dso-ozon-content.kop::part(_kop):hover {
-  color: var(--link-hover-color);
+  color: var(--_dso-link-hover-color);
   text-decoration: underline;
 }
 :host([mode=document]:not([not-collapsible])) .editaction-label {

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

@@ -182,17 +182,17 @@ export class DocumentComponent {
             this.alternativeTitle ||
             this.label ||
             this.annotated);
-        return (h(Host, { key: '5eab063c132771eec2dcb232640e2908d490e6da', "not-collapsible": !collapsible }, showHeading && (h("div", { key: 'ca3331fbd327f7a66d409f2139f432a1278966fd', class: "heading-container", part: "_heading-container" }, this.wijzigactie && h("span", { key: '77a7286dd5456a2c26a16466db0fe7063a943de6', class: "editaction-label" }, this.wijzigactieLabel, ":"), h("div", { key: '0a384451b0b54c8462c980bfb98c7e0f4e047152', class: "heading" }, h(Heading, { key: 'f71b9e3eeaea520babe074252c530b0f32cba6f6', heading: this.heading, class: "heading-element", onClick: this.alternativeTitle ? this.handleHeadingClick : undefined, mode: this.mode, href: this.href }, collapsible && this.mode === "document" && (h("dso-icon-button", { key: '966bcf383d1d85784afd39587d1c1a37d7575cba', label: this.open ? "Invouwen" : "Uitvouwen", class: "toggle-button", icon: this.open ? "chevron-down" : "chevron-right", variant: "tertiary", onDsoClick: (e) => this.handleHeadingClick(e.detail.originalEvent) })), h("div", { key: '73ee74f243f11f7872397cdd3a1610e4c510f02b' }, this.notApplicable && h("span", { key: 'c5eb7ada26378297959694f33d933b680d4fcd24', class: "sr-only" }, "Niet van toepassing:"), this._kop ? (h("dso-ozon-content", { class: "kop", content: this._kop, onDsoClick: this.handleOzonContentClick, mark: this.mark && ((text) => this.mark?.(text, "kop")), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit({ ...e.detail, source: "kop" }), inline: true, urlResolver: this.ozonContentUrlResolver, begripResolver: this.ozonContentBegripResolver, annotated: this.annotated })) : (h("span", { class: "alternative-title" }, (!this.mark && this.alternativeTitle) ||
-            (this.mark && this.alternativeTitle && (h(MarkText, { mark: this.mark && ((text) => this.mark?.(text, "alternativeTitle")), text: this.alternativeTitle, emitMarkItemHighlight: (text, elementRef) => this.dsoMarkItemHighlight.emit({ text, elementRef, source: "alternativeTitle" }) }))))), h(AantekenStatus, { key: '980731a4dd7a6637c0b1aadbe75df91327e84614', gereserveerd: this._gereserveerd, vervallen: this._vervallen }))), this.recursiveToggle !== undefined && this.open && this.mode === "document" && (h("dso-icon-button", { key: 'd945ac5d0035b1b6fe927d256d1992d17fb2db0e', label: this.recursiveToggle === true ? "Verberg onderliggende artikelen" : "Toon onderliggende artikelen", class: "recursive-toggle", icon: this.recursiveToggle === true ? "eye" : "eye-slash", variant: "tertiary", onDsoClick: (e) => this.handleRecursiveToggleClick(e.detail.originalEvent) })), this.showBadge() && (h(Fragment, { key: 'e2901369816bfec16d4c8452bdf80fdf0c216131' }, h("dso-badge", { key: '2875f2782d5a0cfb37545322f4bba0c30c5956d7', status: this.badgeStatus, label: this.badgeTooltip ? "Toon toelichting" : undefined }, this.badge, this.badgeTooltip && h("div", { key: 'b1ee5241fe3a1eee69895d62eaabb3f984157e26', slot: "toggletip" }, this.badgeTooltip)))), (this.label || this.annotated) && (h("div", { key: 'ecaecbb28a436913265dd87a2d70674e42dedfca', class: "addons" }, this.label && (h("dso-label", { key: '8e2e19e943a8151ba9a8f34ff7aadee191925cf0', status: this.labelStatus, compact: true }, this.label)), this.annotated && this.mode === "document" && (h("dso-icon-button", { key: '7d9a3bc7700fe8ee95549cc5b21ca4f0d6712f44', label: `Kenmerken en kaartgegevens ${this.openAnnotation ? "verbergen" : "tonen"}`, icon: "label", variant: "tertiary", onDsoClick: (e) => this.dsoAnnotationToggle.emit({
+        return (h(Host, { key: '2145a6437f81290f55bf2cea907db44002f3a083', "not-collapsible": !collapsible }, showHeading && (h("div", { key: 'ef8bc038ddde2177a4157707304e5c857030632f', class: "heading-container", part: "_heading-container" }, this.wijzigactie && h("span", { key: '39b607942cee90cfc902bf765eb6de470519ac63', class: "editaction-label" }, this.wijzigactieLabel, ":"), h("div", { key: 'b0ff9ef46cd804028c8c6f9d560639a82a147cd0', class: "heading" }, h(Heading, { key: '436adf886700480f285a2841c4c6d83030e65dfe', heading: this.heading, class: "heading-element", onClick: this.alternativeTitle ? this.handleHeadingClick : undefined, mode: this.mode, href: this.href }, collapsible && this.mode === "document" && (h("dso-icon-button", { key: 'abc8967f18030dc75483739e8f7eab1ce4582aa6', label: this.open ? "Invouwen" : "Uitvouwen", class: "toggle-button", icon: this.open ? "chevron-down" : "chevron-right", variant: "tertiary", onDsoClick: (e) => this.handleHeadingClick(e.detail.originalEvent) })), h("div", { key: 'f0ebde88d6772dcdaad2e3a42f482ef4d32fcf61' }, this.notApplicable && h("span", { key: '1bdbfee2e02f056e85906b41077dcfabd90a97b8', class: "sr-only" }, "Niet van toepassing:"), this._kop ? (h("dso-ozon-content", { class: "kop", content: this._kop, onDsoClick: this.handleOzonContentClick, mark: this.mark && ((text) => this.mark?.(text, "kop")), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit({ ...e.detail, source: "kop" }), inline: true, urlResolver: this.ozonContentUrlResolver, begripResolver: this.ozonContentBegripResolver, annotated: this.annotated })) : (h("span", { class: "alternative-title" }, (!this.mark && this.alternativeTitle) ||
+            (this.mark && this.alternativeTitle && (h(MarkText, { mark: this.mark && ((text) => this.mark?.(text, "alternativeTitle")), text: this.alternativeTitle, emitMarkItemHighlight: (text, elementRef) => this.dsoMarkItemHighlight.emit({ text, elementRef, source: "alternativeTitle" }) }))))), h(AantekenStatus, { key: 'ab219ee78e17196c53251cc3aac5c80ce91fb2e2', gereserveerd: this._gereserveerd, vervallen: this._vervallen }))), this.recursiveToggle !== undefined && this.open && this.mode === "document" && (h("dso-icon-button", { key: 'e140a570927c5268494ba8323b3faf671b319636', label: this.recursiveToggle === true ? "Verberg onderliggende artikelen" : "Toon onderliggende artikelen", class: "recursive-toggle", icon: this.recursiveToggle === true ? "eye" : "eye-slash", variant: "tertiary", onDsoClick: (e) => this.handleRecursiveToggleClick(e.detail.originalEvent) })), this.showBadge() && (h(Fragment, { key: '5679a925446c6516292b24ba5da57e94adcd8787' }, h("dso-badge", { key: '791891529218cfbda74906fd4d03dd9ba328b876', status: this.badgeStatus, label: this.badgeTooltip ? "Toon toelichting" : undefined }, this.badge, this.badgeTooltip && h("div", { key: 'f83a29ab1dd637bd9479c881262afcf17d126068', slot: "toggletip" }, this.badgeTooltip)))), (this.label || this.annotated) && (h("div", { key: 'eeab50c29fc34c00bc2eeab3e9100a1bdecfc417', class: "addons" }, this.label && (h("dso-label", { key: '1cce28f8ca5632648e126eba47db55c6591b721a', status: this.labelStatus, compact: true }, this.label)), this.annotated && this.mode === "document" && (h("dso-icon-button", { key: '76dfa3937fe605257e2050abe4dc0addb43f0b22', label: `Kenmerken en kaartgegevens ${this.openAnnotation ? "verbergen" : "tonen"}`, icon: "label", variant: "tertiary", onDsoClick: (e) => this.dsoAnnotationToggle.emit({
                 current: this.openAnnotation,
                 next: !this.openAnnotation,
                 scrollRef: this.host,
                 originalEvent: e.detail.originalEvent,
-            }) }))))))), this.openAnnotation && (h("div", { key: 'b48f9db5cead7a6a1a07ff5eeb309c069715e83b', class: "annotation-container", part: "_annotation-container", role: "dialog", "aria-labelledby": "annotations-heading" }, h("dso-panel", { key: 'b3b48f67d2582a5340309b7dc3d4a59c69650a71', id: "annotations", onDsoCloseClick: (e) => this.dsoAnnotationToggle.emit({
+            }) }))))))), this.openAnnotation && (h("div", { key: '5ddb12a206011881d4781e5f305cc732064f16bb', class: "annotation-container", part: "_annotation-container", role: "dialog", "aria-labelledby": "annotations-heading" }, h("dso-panel", { key: 'b7d21b712102e98a88ab4a13054ccd6de662e393', id: "annotations", onDsoCloseClick: (e) => this.dsoAnnotationToggle.emit({
                 current: true,
                 next: false,
                 originalEvent: e,
-            }), closeButtonLabel: "Kenmerken en kaartgegevens verbergen" }, h("h2", { key: '5e55da9ddb5f89a442f1fdbc2b0f4984e10cb837', id: "annotations-heading", slot: "heading" }, "Kenmerken en kaart"), h("slot", { key: 'c25784cefef8e8e77addc3ac1f234d3847d7c5a6', name: "annotations" })))), this.open && (this._inhoud || this._gereserveerd || this._vervallen) && this.mode === "document" && (h("div", { key: 'a6f4dd13cd73838ca8100180a27813aabddcce00', class: "content", part: "_content" }, h(AantekenAlert, { key: '08f7684931add5db67a8556f4a2153ac57d0aa98', gereserveerd: this._gereserveerd, vervallen: this._vervallen }), this._inhoud && (h("dso-ozon-content", { key: '029f6b22ee9f126f115f10fa87a5df08dfaf174c', content: this._inhoud, onDsoClick: this.handleOzonContentClick, mark: this.mark && ((text) => this.mark?.(text, "inhoud")), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit({ ...e.detail, source: "inhoud" }), urlResolver: this.ozonContentUrlResolver, begripResolver: this.ozonContentBegripResolver, annotated: this.annotated })))), h("div", { key: '017474565b5b63f4245d1d431279eeec9677eb1c', class: "children-container", part: "_children-container" }, h("slot", { key: '99a7a7f00033526221ec1c8a2ce1f95048399101' }))));
+            }), closeButtonLabel: "Kenmerken en kaartgegevens verbergen" }, h("h2", { key: 'c8b2ab1dc5083d357231f103b7a41df1011fb854', id: "annotations-heading", slot: "heading" }, "Kenmerken en kaart"), h("slot", { key: '38c0e52ff906a1800b23c32698c752640f7fb139', name: "annotations" })))), this.open && (this._inhoud || this._gereserveerd || this._vervallen) && this.mode === "document" && (h("div", { key: '5a66f86a1eff551204fd0e8aa79bbba0b3c65c99', class: "content", part: "_content" }, h(AantekenAlert, { key: '04aac67e7bb009cffe76c204354e2b34bc65b821', gereserveerd: this._gereserveerd, vervallen: this._vervallen }), this._inhoud && (h("dso-ozon-content", { key: 'e2597671ddc48b87adf6c822b6f2ec23faea5391', content: this._inhoud, onDsoClick: this.handleOzonContentClick, mark: this.mark && ((text) => this.mark?.(text, "inhoud")), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit({ ...e.detail, source: "inhoud" }), urlResolver: this.ozonContentUrlResolver, begripResolver: this.ozonContentBegripResolver, annotated: this.annotated })))), h("div", { key: 'fe0d3240cf3def32bbef3f85a0581e39355af4fd', class: "children-container", part: "_children-container" }, h("slot", { key: '1293870b0d3eda48a51e774d9779bf48c6b09c3f' }))));
     }
     static get is() { return "dso-document-component"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/document-component-demo/document-component.demo.js

@@ -207,7 +207,7 @@ export class DocumentComponentDemo {
     }
     render() {
         const { DocumentComponent, MenuButton } = this;
-        return (h("dso-responsive-element", { key: '3da23565a2101bbe52be56b25878ffec369aff05', class: "dso-document-components" }, h("div", { key: 'a849bcbabe22f43376d7b0e1a0c7ce967e4f24af', class: "dso-navbar" }, h("ul", { key: 'eff0e1a6e8db844b52d54c18b10c4217b73f1465', class: "dso-nav dso-nav-sub" }, this.getEmbeddedDocumentComponents(this.response)?.documentComponents?.map((d) => (h("li", { class: this.document === d ? "dso-active" : undefined }, h(MenuButton, { documentComponent: d })))))), this.document && h(DocumentComponent, { key: 'd687e63404d61a6527fe45405e29ad288dd622c5', path: [this.document] })));
+        return (h("dso-responsive-element", { key: '17ef11c09b5648fab55636dcd62872ccc081ce01', class: "dso-document-components" }, h("div", { key: '149cd4cf2293999258f6440216ce6b0971d9610f', class: "dso-navbar" }, h("ul", { key: '362e52584723259f16cf7d33f8afbf8b60103902', class: "dso-nav dso-nav-sub" }, this.getEmbeddedDocumentComponents(this.response)?.documentComponents?.map((d) => (h("li", { class: this.document === d ? "dso-active" : undefined }, h(MenuButton, { documentComponent: d })))))), this.document && h(DocumentComponent, { key: '506e0e1e30af9c41225a1b2be6c9ebe3055fb2bb', path: [this.document] })));
     }
     static get is() { return "dsot-document-component-demo"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/dropdown-menu/dropdown-menu-group/dropdown-menu-group.css

@@ -0,0 +1,16 @@
+:host {
+  display: block;
+}
+
+.group-label {
+  color: #999;
+  font-size: 0.875em;
+  font-weight: 400;
+  margin: 0;
+  padding-block: 4px 2px;
+  padding-inline: 20px;
+  text-transform: uppercase;
+}
+.group-label.checkable {
+  padding-inline-start: 40px;
+}