@dso-toolkit/core 67.1.0 → 67.3.0

package/dist/collection/components/image-overlay/image-overlay.css

@@ -353,16 +353,16 @@ ins.editaction-add {
   color: #191919;
 }
 ins.editaction-add a:is(.download, .download:hover, .download:focus-visible) {
-  background-image: url("./dso-icons.svg#img-download-zwart");
+  background-image: url("./di.svg#download-zwart");
 }
 ins.editaction-add a:is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: url("./dso-icons.svg#img-external-link-zwart");
+  background-image: url("./di.svg#external-link-zwart");
 }
 ins.editaction-add a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  background-image: url("./dso-icons.svg#img-call-zwart");
+  background-image: url("./di.svg#call-zwart");
 }
 ins.editaction-add a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: url("./dso-icons.svg#img-email-zwart");
+  background-image: url("./di.svg#email-zwart");
 }
 ins.editaction-add {
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);
@@ -380,16 +380,16 @@ ins.editaction-add .wrapper {
   color: #191919;
 }
 ins.editaction-add .wrapper a:is(.download, .download:hover, .download:focus-visible) {
-  background-image: url("./dso-icons.svg#img-download-zwart");
+  background-image: url("./di.svg#download-zwart");
 }
 ins.editaction-add .wrapper a:is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: url("./dso-icons.svg#img-external-link-zwart");
+  background-image: url("./di.svg#external-link-zwart");
 }
 ins.editaction-add .wrapper a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  background-image: url("./dso-icons.svg#img-call-zwart");
+  background-image: url("./di.svg#call-zwart");
 }
 ins.editaction-add .wrapper a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: url("./dso-icons.svg#img-email-zwart");
+  background-image: url("./di.svg#email-zwart");
 }
 ins.editaction-add .wrapper {
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);
@@ -418,16 +418,16 @@ del.editaction-remove {
   color: #191919;
 }
 del.editaction-remove a:is(.download, .download:hover, .download:focus-visible) {
-  background-image: url("./dso-icons.svg#img-download-zwart");
+  background-image: url("./di.svg#download-zwart");
 }
 del.editaction-remove a:is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: url("./dso-icons.svg#img-external-link-zwart");
+  background-image: url("./di.svg#external-link-zwart");
 }
 del.editaction-remove a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  background-image: url("./dso-icons.svg#img-call-zwart");
+  background-image: url("./di.svg#call-zwart");
 }
 del.editaction-remove a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: url("./dso-icons.svg#img-email-zwart");
+  background-image: url("./di.svg#email-zwart");
 }
 del.editaction-remove {
   text-decoration: line-through;
@@ -450,16 +450,16 @@ del.editaction-remove .wrapper {
   color: #191919;
 }
 del.editaction-remove .wrapper a:is(.download, .download:hover, .download:focus-visible) {
-  background-image: url("./dso-icons.svg#img-download-zwart");
+  background-image: url("./di.svg#download-zwart");
 }
 del.editaction-remove .wrapper a:is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: url("./dso-icons.svg#img-external-link-zwart");
+  background-image: url("./di.svg#external-link-zwart");
 }
 del.editaction-remove .wrapper a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  background-image: url("./dso-icons.svg#img-call-zwart");
+  background-image: url("./di.svg#call-zwart");
 }
 del.editaction-remove .wrapper a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: url("./dso-icons.svg#img-email-zwart");
+  background-image: url("./di.svg#email-zwart");
 }
 del.editaction-remove .wrapper {
   text-decoration: line-through;

package/dist/collection/components/info/info.css

@@ -13,16 +13,16 @@
   color: #191919;
 }
 :host a:is(.download, .download:hover, .download:focus-visible) {
-  background-image: url("./dso-icons.svg#img-download-zwart");
+  background-image: url("./di.svg#download-zwart");
 }
 :host a:is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: url("./dso-icons.svg#img-external-link-zwart");
+  background-image: url("./di.svg#external-link-zwart");
 }
 :host a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  background-image: url("./dso-icons.svg#img-call-zwart");
+  background-image: url("./di.svg#call-zwart");
 }
 :host a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: url("./dso-icons.svg#img-email-zwart");
+  background-image: url("./di.svg#email-zwart");
 }
 :host > button {
   background-color: transparent;

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

@@ -179,8 +179,7 @@ label.dso-primary.dso-spinner-right::after {
 a.dso-primary.download::after,
 button.dso-primary.download::after,
 label.dso-primary.download::after {
-  background: url("./dso-icons.svg#img-download-wit") no-repeat;
-  background-position: center;
+  background: url("./di.svg#download-wit") no-repeat center;
   background-size: cover;
   block-size: 24px;
   vertical-align: top;
@@ -189,8 +188,7 @@ label.dso-primary.download::after {
 a.dso-primary.extern::after,
 button.dso-primary.extern::after,
 label.dso-primary.extern::after {
-  background: url("./dso-icons.svg#img-external-link-wit") no-repeat;
-  background-position: center;
+  background: url("./di.svg#external-link-wit") no-repeat center;
   background-size: cover;
   block-size: 24px;
   vertical-align: top;
@@ -393,8 +391,7 @@ 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("./dso-icons.svg#img-download") no-repeat;
-  background-position: center;
+  background: url("./di.svg#download") no-repeat center;
   background-size: cover;
   block-size: 24px;
   vertical-align: top;
@@ -403,18 +400,17 @@ label.dso-secondary.download::after {
 a.dso-secondary.download:hover::after,
 button.dso-secondary.download:hover::after,
 label.dso-secondary.download:hover::after {
-  background-image: url("./dso-icons.svg#img-download-wit");
+  background-image: url("./di.svg#download-wit");
 }
 a.dso-secondary.download[disabled]::after,
 button.dso-secondary.download[disabled]::after,
 label.dso-secondary.download[disabled]::after {
-  background-image: url("./dso-icons.svg#img-download-grasgroen-40");
+  background-image: url("./di.svg#download-grasgroen-40");
 }
 a.dso-secondary.extern::after,
 button.dso-secondary.extern::after,
 label.dso-secondary.extern::after {
-  background: url("./dso-icons.svg#img-external-link") no-repeat;
-  background-position: center;
+  background: url("./di.svg#external-link") no-repeat center;
   background-size: cover;
   block-size: 24px;
   vertical-align: top;
@@ -423,12 +419,12 @@ label.dso-secondary.extern::after {
 a.dso-secondary.extern:hover::after,
 button.dso-secondary.extern:hover::after,
 label.dso-secondary.extern:hover::after {
-  background-image: url("./dso-icons.svg#img-external-link-wit");
+  background-image: url("./di.svg#external-link-wit");
 }
 a.dso-secondary.extern[disabled]::after,
 button.dso-secondary.extern[disabled]::after,
 label.dso-secondary.extern[disabled]::after {
-  background-image: url("./dso-icons.svg#img-external-link-grasgroen-40");
+  background-image: url("./di.svg#external-link-grasgroen-40");
 }
 a.dso-tertiary,
 button.dso-tertiary,
@@ -613,8 +609,7 @@ label.dso-tertiary.download::after {
 a.dso-tertiary.download::after,
 button.dso-tertiary.download::after,
 label.dso-tertiary.download::after {
-  background: url("./dso-icons.svg#img-download") no-repeat;
-  background-position: center;
+  background: url("./di.svg#download") no-repeat center;
   background-size: cover;
   block-size: 24px;
   vertical-align: top;
@@ -623,20 +618,19 @@ label.dso-tertiary.download::after {
 a.dso-tertiary.download[disabled]::after,
 button.dso-tertiary.download[disabled]::after,
 label.dso-tertiary.download[disabled]::after {
-  background-image: url("./dso-icons.svg#img-download-grasgroen-40");
+  background-image: url("./di.svg#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: url("./dso-icons.svg#img-download-scampi");
+  background-image: url("./di.svg#download-scampi");
 }
 a.dso-tertiary.extern::after,
 button.dso-tertiary.extern::after,
 label.dso-tertiary.extern::after {
-  background: url("./dso-icons.svg#img-external-link") no-repeat;
-  background-position: center;
+  background: url("./di.svg#external-link") no-repeat center;
   background-size: cover;
   block-size: 24px;
   vertical-align: top;
@@ -645,14 +639,14 @@ label.dso-tertiary.extern::after {
 a.dso-tertiary.extern[disabled]::after,
 button.dso-tertiary.extern[disabled]::after,
 label.dso-tertiary.extern[disabled]::after {
-  background-image: url("./dso-icons.svg#img-external-link-grasgroen-40");
+  background-image: url("./di.svg#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: url("./dso-icons.svg#img-external-link-scampi");
+  background-image: url("./di.svg#external-link-scampi");
 }
 
 a.dso-primary {
@@ -1432,28 +1426,28 @@ span[role=paragraph].editaction-add a:is(.download, .download:hover, .download:f
 .dso-ozon-lijst.editaction-add a:is(.download, .download:hover, .download:focus-visible),
 .dso-ozon-lijst > ul > li.editaction-add a:is(.download, .download:hover, .download:focus-visible),
 table.editaction-add a:is(.download, .download:hover, .download:focus-visible) {
-  background-image: url("./dso-icons.svg#img-download-zwart");
+  background-image: url("./di.svg#download-zwart");
 }
 p.editaction-add a:is(.extern, .extern:hover, .extern:focus-visible),
 span[role=paragraph].editaction-add a:is(.extern, .extern:hover, .extern:focus-visible),
 .dso-ozon-lijst.editaction-add a:is(.extern, .extern:hover, .extern:focus-visible),
 .dso-ozon-lijst > ul > li.editaction-add a:is(.extern, .extern:hover, .extern:focus-visible),
 table.editaction-add a:is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: url("./dso-icons.svg#img-external-link-zwart");
+  background-image: url("./di.svg#external-link-zwart");
 }
 p.editaction-add a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible),
 span[role=paragraph].editaction-add a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible),
 .dso-ozon-lijst.editaction-add a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible),
 .dso-ozon-lijst > ul > li.editaction-add a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible),
 table.editaction-add a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  background-image: url("./dso-icons.svg#img-call-zwart");
+  background-image: url("./di.svg#call-zwart");
 }
 p.editaction-add a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible),
 span[role=paragraph].editaction-add a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible),
 .dso-ozon-lijst.editaction-add a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible),
 .dso-ozon-lijst > ul > li.editaction-add a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible),
 table.editaction-add a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: url("./dso-icons.svg#img-email-zwart");
+  background-image: url("./di.svg#email-zwart");
 }
 p.editaction-add,
 span[role=paragraph].editaction-add,
@@ -1479,28 +1473,28 @@ span[role=paragraph].editaction-remove a:is(.download, .download:hover, .downloa
 .dso-ozon-lijst.editaction-remove a:is(.download, .download:hover, .download:focus-visible),
 .dso-ozon-lijst > ul > li.editaction-remove a:is(.download, .download:hover, .download:focus-visible),
 table.editaction-remove a:is(.download, .download:hover, .download:focus-visible) {
-  background-image: url("./dso-icons.svg#img-download-zwart");
+  background-image: url("./di.svg#download-zwart");
 }
 p.editaction-remove a:is(.extern, .extern:hover, .extern:focus-visible),
 span[role=paragraph].editaction-remove a:is(.extern, .extern:hover, .extern:focus-visible),
 .dso-ozon-lijst.editaction-remove a:is(.extern, .extern:hover, .extern:focus-visible),
 .dso-ozon-lijst > ul > li.editaction-remove a:is(.extern, .extern:hover, .extern:focus-visible),
 table.editaction-remove a:is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: url("./dso-icons.svg#img-external-link-zwart");
+  background-image: url("./di.svg#external-link-zwart");
 }
 p.editaction-remove a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible),
 span[role=paragraph].editaction-remove a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible),
 .dso-ozon-lijst.editaction-remove a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible),
 .dso-ozon-lijst > ul > li.editaction-remove a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible),
 table.editaction-remove a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  background-image: url("./dso-icons.svg#img-call-zwart");
+  background-image: url("./di.svg#call-zwart");
 }
 p.editaction-remove a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible),
 span[role=paragraph].editaction-remove a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible),
 .dso-ozon-lijst.editaction-remove a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible),
 .dso-ozon-lijst > ul > li.editaction-remove a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible),
 table.editaction-remove a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: url("./dso-icons.svg#img-email-zwart");
+  background-image: url("./di.svg#email-zwart");
 }
 p.editaction-remove,
 span[role=paragraph].editaction-remove,
@@ -1531,16 +1525,16 @@ ins.new-text {
   color: #191919;
 }
 ins.new-text a:is(.download, .download:hover, .download:focus-visible) {
-  background-image: url("./dso-icons.svg#img-download-zwart");
+  background-image: url("./di.svg#download-zwart");
 }
 ins.new-text a:is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: url("./dso-icons.svg#img-external-link-zwart");
+  background-image: url("./di.svg#external-link-zwart");
 }
 ins.new-text a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  background-image: url("./dso-icons.svg#img-call-zwart");
+  background-image: url("./di.svg#call-zwart");
 }
 ins.new-text a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: url("./dso-icons.svg#img-email-zwart");
+  background-image: url("./di.svg#email-zwart");
 }
 ins.new-text {
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);
@@ -1559,16 +1553,16 @@ ins.editaction-add {
   color: #191919;
 }
 ins.editaction-add a:is(.download, .download:hover, .download:focus-visible) {
-  background-image: url("./dso-icons.svg#img-download-zwart");
+  background-image: url("./di.svg#download-zwart");
 }
 ins.editaction-add a:is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: url("./dso-icons.svg#img-external-link-zwart");
+  background-image: url("./di.svg#external-link-zwart");
 }
 ins.editaction-add a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  background-image: url("./dso-icons.svg#img-call-zwart");
+  background-image: url("./di.svg#call-zwart");
 }
 ins.editaction-add a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: url("./dso-icons.svg#img-email-zwart");
+  background-image: url("./di.svg#email-zwart");
 }
 ins.editaction-add {
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);
@@ -1586,16 +1580,16 @@ del.removed-text {
   color: #191919;
 }
 del.removed-text a:is(.download, .download:hover, .download:focus-visible) {
-  background-image: url("./dso-icons.svg#img-download-zwart");
+  background-image: url("./di.svg#download-zwart");
 }
 del.removed-text a:is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: url("./dso-icons.svg#img-external-link-zwart");
+  background-image: url("./di.svg#external-link-zwart");
 }
 del.removed-text a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  background-image: url("./dso-icons.svg#img-call-zwart");
+  background-image: url("./di.svg#call-zwart");
 }
 del.removed-text a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: url("./dso-icons.svg#img-email-zwart");
+  background-image: url("./di.svg#email-zwart");
 }
 del.removed-text {
   text-decoration: line-through;
@@ -1619,16 +1613,16 @@ del.editaction-remove {
   color: #191919;
 }
 del.editaction-remove a:is(.download, .download:hover, .download:focus-visible) {
-  background-image: url("./dso-icons.svg#img-download-zwart");
+  background-image: url("./di.svg#download-zwart");
 }
 del.editaction-remove a:is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: url("./dso-icons.svg#img-external-link-zwart");
+  background-image: url("./di.svg#external-link-zwart");
 }
 del.editaction-remove a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  background-image: url("./dso-icons.svg#img-call-zwart");
+  background-image: url("./di.svg#call-zwart");
 }
 del.editaction-remove a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: url("./dso-icons.svg#img-email-zwart");
+  background-image: url("./di.svg#email-zwart");
 }
 del.editaction-remove {
   text-decoration: line-through;

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

@@ -10,16 +10,16 @@ ins {
   color: #191919;
 }
 ins a:is(.download, .download:hover, .download:focus-visible) {
-  background-image: url("./dso-icons.svg#img-download-zwart");
+  background-image: url("./di.svg#download-zwart");
 }
 ins a:is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: url("./dso-icons.svg#img-external-link-zwart");
+  background-image: url("./di.svg#external-link-zwart");
 }
 ins a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  background-image: url("./dso-icons.svg#img-call-zwart");
+  background-image: url("./di.svg#call-zwart");
 }
 ins a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: url("./dso-icons.svg#img-email-zwart");
+  background-image: url("./di.svg#email-zwart");
 }
 ins {
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);
@@ -34,16 +34,16 @@ del {
   color: #191919;
 }
 del a:is(.download, .download:hover, .download:focus-visible) {
-  background-image: url("./dso-icons.svg#img-download-zwart");
+  background-image: url("./di.svg#download-zwart");
 }
 del a:is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: url("./dso-icons.svg#img-external-link-zwart");
+  background-image: url("./di.svg#external-link-zwart");
 }
 del a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  background-image: url("./dso-icons.svg#img-call-zwart");
+  background-image: url("./di.svg#call-zwart");
 }
 del a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: url("./dso-icons.svg#img-email-zwart");
+  background-image: url("./di.svg#email-zwart");
 }
 del {
   text-decoration: line-through;
@@ -131,9 +131,12 @@ del.dso-plekinfo-card-container:has(.dso-plekinfo-card-heading a:is(:hover, :foc
 }
 
 ::slotted([slot=heading]) {
-  align-items: center !important;
   display: flex !important;
+  align-items: center !important;
   font-size: 1.125em !important;
+  font-weight: 700 !important;
+  color: #275937 !important;
+  line-height: 1.25 !important;
   margin-block-end: 0 !important;
   margin-block-start: 0 !important;
 }
@@ -144,6 +147,18 @@ del.dso-plekinfo-card-container:has(.dso-plekinfo-card-heading a:is(:hover, :foc
   --_dt-rich-content-margin-block-start: 0;
 }
 
+::slotted([slot=interaction]) {
+  display: flex !important;
+  justify-content: space-between !important;
+  margin-inline-start: auto !important;
+}
+@media screen and (max-width: 480px) {
+  ::slotted([slot=interaction]) {
+    flex-basis: 100% !important;
+    margin-block-start: 16px !important;
+  }
+}
+
 .heading-anchor {
   display: flex;
   flex-wrap: nowrap;

package/dist/collection/components/renvooi/renvooi.css

@@ -10,16 +10,16 @@ ins {
   color: #191919;
 }
 ins a:is(.download, .download:hover, .download:focus-visible) {
-  background-image: url("./dso-icons.svg#img-download-zwart");
+  background-image: url("./di.svg#download-zwart");
 }
 ins a:is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: url("./dso-icons.svg#img-external-link-zwart");
+  background-image: url("./di.svg#external-link-zwart");
 }
 ins a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  background-image: url("./dso-icons.svg#img-call-zwart");
+  background-image: url("./di.svg#call-zwart");
 }
 ins a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: url("./dso-icons.svg#img-email-zwart");
+  background-image: url("./di.svg#email-zwart");
 }
 ins {
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);
@@ -34,16 +34,16 @@ del {
   color: #191919;
 }
 del a:is(.download, .download:hover, .download:focus-visible) {
-  background-image: url("./dso-icons.svg#img-download-zwart");
+  background-image: url("./di.svg#download-zwart");
 }
 del a:is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: url("./dso-icons.svg#img-external-link-zwart");
+  background-image: url("./di.svg#external-link-zwart");
 }
 del a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  background-image: url("./dso-icons.svg#img-call-zwart");
+  background-image: url("./di.svg#call-zwart");
 }
 del a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: url("./dso-icons.svg#img-email-zwart");
+  background-image: url("./di.svg#email-zwart");
 }
 del {
   text-decoration: line-through;

package/dist/collection/components/table/table.css

@@ -179,8 +179,7 @@ label.dso-primary.dso-spinner-right::after {
 a.dso-primary.download::after,
 button.dso-primary.download::after,
 label.dso-primary.download::after {
-  background: url("./dso-icons.svg#img-download-wit") no-repeat;
-  background-position: center;
+  background: url("./di.svg#download-wit") no-repeat center;
   background-size: cover;
   block-size: 24px;
   vertical-align: top;
@@ -189,8 +188,7 @@ label.dso-primary.download::after {
 a.dso-primary.extern::after,
 button.dso-primary.extern::after,
 label.dso-primary.extern::after {
-  background: url("./dso-icons.svg#img-external-link-wit") no-repeat;
-  background-position: center;
+  background: url("./di.svg#external-link-wit") no-repeat center;
   background-size: cover;
   block-size: 24px;
   vertical-align: top;
@@ -393,8 +391,7 @@ 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("./dso-icons.svg#img-download") no-repeat;
-  background-position: center;
+  background: url("./di.svg#download") no-repeat center;
   background-size: cover;
   block-size: 24px;
   vertical-align: top;
@@ -403,18 +400,17 @@ label.dso-secondary.download::after {
 a.dso-secondary.download:hover::after,
 button.dso-secondary.download:hover::after,
 label.dso-secondary.download:hover::after {
-  background-image: url("./dso-icons.svg#img-download-wit");
+  background-image: url("./di.svg#download-wit");
 }
 a.dso-secondary.download[disabled]::after,
 button.dso-secondary.download[disabled]::after,
 label.dso-secondary.download[disabled]::after {
-  background-image: url("./dso-icons.svg#img-download-grasgroen-40");
+  background-image: url("./di.svg#download-grasgroen-40");
 }
 a.dso-secondary.extern::after,
 button.dso-secondary.extern::after,
 label.dso-secondary.extern::after {
-  background: url("./dso-icons.svg#img-external-link") no-repeat;
-  background-position: center;
+  background: url("./di.svg#external-link") no-repeat center;
   background-size: cover;
   block-size: 24px;
   vertical-align: top;
@@ -423,12 +419,12 @@ label.dso-secondary.extern::after {
 a.dso-secondary.extern:hover::after,
 button.dso-secondary.extern:hover::after,
 label.dso-secondary.extern:hover::after {
-  background-image: url("./dso-icons.svg#img-external-link-wit");
+  background-image: url("./di.svg#external-link-wit");
 }
 a.dso-secondary.extern[disabled]::after,
 button.dso-secondary.extern[disabled]::after,
 label.dso-secondary.extern[disabled]::after {
-  background-image: url("./dso-icons.svg#img-external-link-grasgroen-40");
+  background-image: url("./di.svg#external-link-grasgroen-40");
 }
 a.dso-tertiary,
 button.dso-tertiary,
@@ -613,8 +609,7 @@ label.dso-tertiary.download::after {
 a.dso-tertiary.download::after,
 button.dso-tertiary.download::after,
 label.dso-tertiary.download::after {
-  background: url("./dso-icons.svg#img-download") no-repeat;
-  background-position: center;
+  background: url("./di.svg#download") no-repeat center;
   background-size: cover;
   block-size: 24px;
   vertical-align: top;
@@ -623,20 +618,19 @@ label.dso-tertiary.download::after {
 a.dso-tertiary.download[disabled]::after,
 button.dso-tertiary.download[disabled]::after,
 label.dso-tertiary.download[disabled]::after {
-  background-image: url("./dso-icons.svg#img-download-grasgroen-40");
+  background-image: url("./di.svg#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: url("./dso-icons.svg#img-download-scampi");
+  background-image: url("./di.svg#download-scampi");
 }
 a.dso-tertiary.extern::after,
 button.dso-tertiary.extern::after,
 label.dso-tertiary.extern::after {
-  background: url("./dso-icons.svg#img-external-link") no-repeat;
-  background-position: center;
+  background: url("./di.svg#external-link") no-repeat center;
   background-size: cover;
   block-size: 24px;
   vertical-align: top;
@@ -645,14 +639,14 @@ label.dso-tertiary.extern::after {
 a.dso-tertiary.extern[disabled]::after,
 button.dso-tertiary.extern[disabled]::after,
 label.dso-tertiary.extern[disabled]::after {
-  background-image: url("./dso-icons.svg#img-external-link-grasgroen-40");
+  background-image: url("./di.svg#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: url("./dso-icons.svg#img-external-link-scampi");
+  background-image: url("./di.svg#external-link-scampi");
 }
 
 a.dso-primary {

package/dist/collection/utils/i18n.js

@@ -20,6 +20,7 @@ export function i18n(getElement, resources) {
         fallbackLng: DEFAULT_LANG,
         resources,
         defaultNS: element.tagName.toLowerCase(),
+        interpolation: { escapeValue: false },
     });
     let detectedLanguage = false;
     return (key, variables) => {

package/dist/collection/utils/i18n.js.map

@@ -1 +1 @@
-{"version":3,"file":"i18n.js","sourceRoot":"","sources":["../../../src/utils/i18n.ts"],"names":[],"mappings":"AAAA,OAAO,OAAqB,MAAM,SAAS,CAAC;AAI5C,MAAM,YAAY,GAAG,IAAI,CAAC;AAE1B,SAAS,2BAA2B,CAAC,OAAoB;IACvD,MAAM,kBAAkB,GAAG,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IACrD,IAAI,kBAAkB,YAAY,WAAW,EAAE,CAAC;QAC9C,OAAO,kBAAkB,CAAC,IAAI,IAAI,YAAY,CAAC;IACjD,CAAC;IAED,IAAI,OAAO,CAAC,UAAU,YAAY,UAAU,IAAI,OAAO,CAAC,UAAU,CAAC,IAAI,YAAY,WAAW,EAAE,CAAC;QAC/F,OAAO,2BAA2B,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IAC9D,CAAC;IAED,IAAI,OAAO,CAAC,aAAa,YAAY,WAAW,EAAE,CAAC;QACjD,OAAO,2BAA2B,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;IAC5D,CAAC;IAED,OAAO,YAAY,CAAC;AACtB,CAAC;AAED,MAAM,UAAU,IAAI,CAClB,UAA6B,EAC7B,SAAmB;IAEnB,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAC7B,MAAM,eAAe,GAAG,OAAO,CAAC,cAAc,EAAE,CAAC;IAEjD,eAAe,CAAC,IAAI,CAAC;QACnB,WAAW,EAAE,YAAY;QACzB,SAAS;QACT,SAAS,EAAE,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE;KACzC,CAAC,CAAC;IAEH,IAAI,gBAAgB,GAAG,KAAK,CAAC;IAE7B,OAAO,CAAC,GAAW,EAAE,SAAuC,EAAE,EAAE;QAC9D,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACtB,gBAAgB,GAAG,IAAI,CAAC;YAExB,MAAM,QAAQ,GAAG,2BAA2B,CAAC,OAAO,CAAC,CAAC;YACtD,eAAe,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;QAC3C,CAAC;QAED,OAAO,eAAe,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,CAAC,CAAC;IAC3C,CAAC,CAAC;AACJ,CAAC","sourcesContent":["import i18next, { Resource } from \"i18next\";\r\n\r\nexport { Resource };\r\n\r\nconst DEFAULT_LANG = \"nl\";\r\n\r\nfunction getComponentClosestLanguage(element: HTMLElement): string {\r\n  const closestLangElement = element.closest(\"[lang]\");\r\n  if (closestLangElement instanceof HTMLElement) {\r\n    return closestLangElement.lang || DEFAULT_LANG;\r\n  }\r\n\r\n  if (element.parentNode instanceof ShadowRoot && element.parentNode.host instanceof HTMLElement) {\r\n    return getComponentClosestLanguage(element.parentNode.host);\r\n  }\r\n\r\n  if (element.parentElement instanceof HTMLElement) {\r\n    return getComponentClosestLanguage(element.parentElement);\r\n  }\r\n\r\n  return DEFAULT_LANG;\r\n}\r\n\r\nexport function i18n(\r\n  getElement: () => HTMLElement,\r\n  resources: Resource,\r\n): (key: string, variables?: { [key in string]: string }) => string {\r\n  const element = getElement();\r\n  const i18NextInstance = i18next.createInstance();\r\n\r\n  i18NextInstance.init({\r\n    fallbackLng: DEFAULT_LANG,\r\n    resources,\r\n    defaultNS: element.tagName.toLowerCase(),\r\n  });\r\n\r\n  let detectedLanguage = false;\r\n\r\n  return (key: string, variables?: { [key in string]: string }) => {\r\n    if (!detectedLanguage) {\r\n      detectedLanguage = true;\r\n\r\n      const language = getComponentClosestLanguage(element);\r\n      i18NextInstance.changeLanguage(language);\r\n    }\r\n\r\n    return i18NextInstance.t(key, variables);\r\n  };\r\n}\r\n"]}
+{"version":3,"file":"i18n.js","sourceRoot":"","sources":["../../../src/utils/i18n.ts"],"names":[],"mappings":"AAAA,OAAO,OAAqB,MAAM,SAAS,CAAC;AAI5C,MAAM,YAAY,GAAG,IAAI,CAAC;AAE1B,SAAS,2BAA2B,CAAC,OAAoB;IACvD,MAAM,kBAAkB,GAAG,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IACrD,IAAI,kBAAkB,YAAY,WAAW,EAAE,CAAC;QAC9C,OAAO,kBAAkB,CAAC,IAAI,IAAI,YAAY,CAAC;IACjD,CAAC;IAED,IAAI,OAAO,CAAC,UAAU,YAAY,UAAU,IAAI,OAAO,CAAC,UAAU,CAAC,IAAI,YAAY,WAAW,EAAE,CAAC;QAC/F,OAAO,2BAA2B,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IAC9D,CAAC;IAED,IAAI,OAAO,CAAC,aAAa,YAAY,WAAW,EAAE,CAAC;QACjD,OAAO,2BAA2B,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;IAC5D,CAAC;IAED,OAAO,YAAY,CAAC;AACtB,CAAC;AAED,MAAM,UAAU,IAAI,CAClB,UAA6B,EAC7B,SAAmB;IAEnB,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAC7B,MAAM,eAAe,GAAG,OAAO,CAAC,cAAc,EAAE,CAAC;IAEjD,eAAe,CAAC,IAAI,CAAC;QACnB,WAAW,EAAE,YAAY;QACzB,SAAS;QACT,SAAS,EAAE,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE;QACxC,aAAa,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE;KACtC,CAAC,CAAC;IAEH,IAAI,gBAAgB,GAAG,KAAK,CAAC;IAE7B,OAAO,CAAC,GAAW,EAAE,SAAuC,EAAE,EAAE;QAC9D,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACtB,gBAAgB,GAAG,IAAI,CAAC;YAExB,MAAM,QAAQ,GAAG,2BAA2B,CAAC,OAAO,CAAC,CAAC;YACtD,eAAe,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;QAC3C,CAAC;QAED,OAAO,eAAe,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,CAAC,CAAC;IAC3C,CAAC,CAAC;AACJ,CAAC","sourcesContent":["import i18next, { Resource } from \"i18next\";\r\n\r\nexport { Resource };\r\n\r\nconst DEFAULT_LANG = \"nl\";\r\n\r\nfunction getComponentClosestLanguage(element: HTMLElement): string {\r\n  const closestLangElement = element.closest(\"[lang]\");\r\n  if (closestLangElement instanceof HTMLElement) {\r\n    return closestLangElement.lang || DEFAULT_LANG;\r\n  }\r\n\r\n  if (element.parentNode instanceof ShadowRoot && element.parentNode.host instanceof HTMLElement) {\r\n    return getComponentClosestLanguage(element.parentNode.host);\r\n  }\r\n\r\n  if (element.parentElement instanceof HTMLElement) {\r\n    return getComponentClosestLanguage(element.parentElement);\r\n  }\r\n\r\n  return DEFAULT_LANG;\r\n}\r\n\r\nexport function i18n(\r\n  getElement: () => HTMLElement,\r\n  resources: Resource,\r\n): (key: string, variables?: { [key in string]: string }) => string {\r\n  const element = getElement();\r\n  const i18NextInstance = i18next.createInstance();\r\n\r\n  i18NextInstance.init({\r\n    fallbackLng: DEFAULT_LANG,\r\n    resources,\r\n    defaultNS: element.tagName.toLowerCase(),\r\n    interpolation: { escapeValue: false },\r\n  });\r\n\r\n  let detectedLanguage = false;\r\n\r\n  return (key: string, variables?: { [key in string]: string }) => {\r\n    if (!detectedLanguage) {\r\n      detectedLanguage = true;\r\n\r\n      const language = getComponentClosestLanguage(element);\r\n      i18NextInstance.changeLanguage(language);\r\n    }\r\n\r\n    return i18NextInstance.t(key, variables);\r\n  };\r\n}\r\n"]}