@dso-toolkit/core 88.0.0 → 88.1.0

package/dist/collection/components/survey-rating/survey-rating.css

@@ -124,6 +124,36 @@ label.survey-rating-1::before a:not(.dso-primary, .dso-secondary, .dso-tertiary)
 }
 label.survey-rating-1::before, label.survey-rating-1:has(input:checked) {
   --_dso-icon-button-tertiary-color: #fff;
+  --_dso-icon-button-tertiary-hover-color: #e5e5e5;
+  --_dso-icon-button-tertiary-disabled-color: #b2b2b2;
+  --_dso-button-primary-background-color: #fff;
+  --_dso-button-primary-hover-background-color: rgba(255, 255, 255, 0.8);
+  --_dso-button-primary-active-background-color: #f2f2f2;
+  --_dso-button-primary-disabled-background-color: rgba(255, 255, 255, 0.6);
+  --_dso-button-primary-border-color: #fff;
+  --_dso-button-primary-hover-border-color: rgba(255, 255, 255, 0.8);
+  --_dso-button-primary-active-border-color: #f2f2f2;
+  --_dso-button-primary-disabled-border-color: rgba(255, 255, 255, 0.6);
+  --_dso-button-primary-color: #191919;
+  --_dso-button-primary-hover-color: #191919;
+  --_dso-button-primary-active-color: #191919;
+  --_dso-button-primary-disabled-color: #666;
+  --_dso-button-secondary-background-color: none;
+  --_dso-button-secondary-hover-background-color: rgba(255, 255, 255, 0.2);
+  --_dso-button-secondary-active-background-color: rgba(255, 255, 255, 0.4);
+  --_dso-button-secondary-disabled-background-color: none;
+  --_dso-button-secondary-border-color: #fff;
+  --_dso-button-secondary-hover-border-color: #fff;
+  --_dso-button-secondary-active-border-color: rgba(255, 255, 255, 0.4);
+  --_dso-button-secondary-disabled-border-color: rgba(255, 255, 255, 0.7);
+  --_dso-button-secondary-color: #fff;
+  --_dso-button-secondary-hover-color: #fff;
+  --_dso-button-secondary-active-color: #fff;
+  --_dso-button-secondary-disabled-color: rgba(255, 255, 255, 0.7);
+  --_dso-button-tertiary-color: #fff;
+  --_dso-button-tertiary-hover-color: #fff;
+  --_dso-button-tertiary-active-color: #fff;
+  --_dso-button-tertiary-disabled-color: #b2b2b2;
   background-color: #b62f41;
   color: #fff;
   border-color: #ccc;
@@ -151,6 +181,36 @@ label.survey-rating-2::before a:not(.dso-primary, .dso-secondary, .dso-tertiary)
 }
 label.survey-rating-2::before, label.survey-rating-2:has(input:checked) {
   --_dso-icon-button-tertiary-color: #fff;
+  --_dso-icon-button-tertiary-hover-color: #e5e5e5;
+  --_dso-icon-button-tertiary-disabled-color: #b2b2b2;
+  --_dso-button-primary-background-color: #fff;
+  --_dso-button-primary-hover-background-color: rgba(255, 255, 255, 0.8);
+  --_dso-button-primary-active-background-color: #f2f2f2;
+  --_dso-button-primary-disabled-background-color: rgba(255, 255, 255, 0.6);
+  --_dso-button-primary-border-color: #fff;
+  --_dso-button-primary-hover-border-color: rgba(255, 255, 255, 0.8);
+  --_dso-button-primary-active-border-color: #f2f2f2;
+  --_dso-button-primary-disabled-border-color: rgba(255, 255, 255, 0.6);
+  --_dso-button-primary-color: #191919;
+  --_dso-button-primary-hover-color: #191919;
+  --_dso-button-primary-active-color: #191919;
+  --_dso-button-primary-disabled-color: #666;
+  --_dso-button-secondary-background-color: none;
+  --_dso-button-secondary-hover-background-color: rgba(255, 255, 255, 0.2);
+  --_dso-button-secondary-active-background-color: rgba(255, 255, 255, 0.4);
+  --_dso-button-secondary-disabled-background-color: none;
+  --_dso-button-secondary-border-color: #fff;
+  --_dso-button-secondary-hover-border-color: #fff;
+  --_dso-button-secondary-active-border-color: rgba(255, 255, 255, 0.4);
+  --_dso-button-secondary-disabled-border-color: rgba(255, 255, 255, 0.7);
+  --_dso-button-secondary-color: #fff;
+  --_dso-button-secondary-hover-color: #fff;
+  --_dso-button-secondary-active-color: #fff;
+  --_dso-button-secondary-disabled-color: rgba(255, 255, 255, 0.7);
+  --_dso-button-tertiary-color: #fff;
+  --_dso-button-tertiary-hover-color: #fff;
+  --_dso-button-tertiary-active-color: #fff;
+  --_dso-button-tertiary-disabled-color: #b2b2b2;
   background-color: #ce3f51;
   color: #fff;
   border-color: #ccc;
@@ -181,6 +241,10 @@ label.survey-rating-3::before, label.survey-rating-3:has(input:checked) {
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
+  --_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: #e17000;
   color: #191919;
   border-color: #ccc;
@@ -211,6 +275,10 @@ label.survey-rating-4::before, label.survey-rating-4:has(input:checked) {
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
+  --_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: #dcd400;
   color: #191919;
   border-color: #ccc;
@@ -241,6 +309,10 @@ label.survey-rating-5::before, label.survey-rating-5:has(input:checked) {
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
+  --_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: #79b929;
   color: #191919;
   border-color: #ccc;
@@ -268,6 +340,36 @@ label.survey-rating-6::before a:not(.dso-primary, .dso-secondary, .dso-tertiary)
 }
 label.survey-rating-6::before, label.survey-rating-6:has(input:checked) {
   --_dso-icon-button-tertiary-color: #fff;
+  --_dso-icon-button-tertiary-hover-color: #e5e5e5;
+  --_dso-icon-button-tertiary-disabled-color: #b2b2b2;
+  --_dso-button-primary-background-color: #fff;
+  --_dso-button-primary-hover-background-color: rgba(255, 255, 255, 0.8);
+  --_dso-button-primary-active-background-color: #f2f2f2;
+  --_dso-button-primary-disabled-background-color: rgba(255, 255, 255, 0.6);
+  --_dso-button-primary-border-color: #fff;
+  --_dso-button-primary-hover-border-color: rgba(255, 255, 255, 0.8);
+  --_dso-button-primary-active-border-color: #f2f2f2;
+  --_dso-button-primary-disabled-border-color: rgba(255, 255, 255, 0.6);
+  --_dso-button-primary-color: #191919;
+  --_dso-button-primary-hover-color: #191919;
+  --_dso-button-primary-active-color: #191919;
+  --_dso-button-primary-disabled-color: #666;
+  --_dso-button-secondary-background-color: none;
+  --_dso-button-secondary-hover-background-color: rgba(255, 255, 255, 0.2);
+  --_dso-button-secondary-active-background-color: rgba(255, 255, 255, 0.4);
+  --_dso-button-secondary-disabled-background-color: none;
+  --_dso-button-secondary-border-color: #fff;
+  --_dso-button-secondary-hover-border-color: #fff;
+  --_dso-button-secondary-active-border-color: rgba(255, 255, 255, 0.4);
+  --_dso-button-secondary-disabled-border-color: rgba(255, 255, 255, 0.7);
+  --_dso-button-secondary-color: #fff;
+  --_dso-button-secondary-hover-color: #fff;
+  --_dso-button-secondary-active-color: #fff;
+  --_dso-button-secondary-disabled-color: rgba(255, 255, 255, 0.7);
+  --_dso-button-tertiary-color: #fff;
+  --_dso-button-tertiary-hover-color: #fff;
+  --_dso-button-tertiary-active-color: #fff;
+  --_dso-button-tertiary-disabled-color: #b2b2b2;
   background-color: #39870c;
   color: #fff;
   border-color: #ccc;
@@ -295,6 +397,36 @@ label.survey-rating-7::before a:not(.dso-primary, .dso-secondary, .dso-tertiary)
 }
 label.survey-rating-7::before, label.survey-rating-7:has(input:checked) {
   --_dso-icon-button-tertiary-color: #fff;
+  --_dso-icon-button-tertiary-hover-color: #e5e5e5;
+  --_dso-icon-button-tertiary-disabled-color: #b2b2b2;
+  --_dso-button-primary-background-color: #fff;
+  --_dso-button-primary-hover-background-color: rgba(255, 255, 255, 0.8);
+  --_dso-button-primary-active-background-color: #f2f2f2;
+  --_dso-button-primary-disabled-background-color: rgba(255, 255, 255, 0.6);
+  --_dso-button-primary-border-color: #fff;
+  --_dso-button-primary-hover-border-color: rgba(255, 255, 255, 0.8);
+  --_dso-button-primary-active-border-color: #f2f2f2;
+  --_dso-button-primary-disabled-border-color: rgba(255, 255, 255, 0.6);
+  --_dso-button-primary-color: #191919;
+  --_dso-button-primary-hover-color: #191919;
+  --_dso-button-primary-active-color: #191919;
+  --_dso-button-primary-disabled-color: #666;
+  --_dso-button-secondary-background-color: none;
+  --_dso-button-secondary-hover-background-color: rgba(255, 255, 255, 0.2);
+  --_dso-button-secondary-active-background-color: rgba(255, 255, 255, 0.4);
+  --_dso-button-secondary-disabled-background-color: none;
+  --_dso-button-secondary-border-color: #fff;
+  --_dso-button-secondary-hover-border-color: #fff;
+  --_dso-button-secondary-active-border-color: rgba(255, 255, 255, 0.4);
+  --_dso-button-secondary-disabled-border-color: rgba(255, 255, 255, 0.7);
+  --_dso-button-secondary-color: #fff;
+  --_dso-button-secondary-hover-color: #fff;
+  --_dso-button-secondary-active-color: #fff;
+  --_dso-button-secondary-disabled-color: rgba(255, 255, 255, 0.7);
+  --_dso-button-tertiary-color: #fff;
+  --_dso-button-tertiary-hover-color: #fff;
+  --_dso-button-tertiary-active-color: #fff;
+  --_dso-button-tertiary-disabled-color: #b2b2b2;
   background-color: #275937;
   color: #fff;
   border-color: #ccc;
@@ -329,6 +461,7 @@ button.dso-secondary {
   text-align: start;
   user-select: none;
   vertical-align: middle;
+  background-clip: padding-box;
 }
 button.dso-secondary:focus, button.dso-secondary:focus-visible {
   outline-offset: 2px;

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

@@ -30,6 +30,7 @@ label.dso-primary {
   text-align: start;
   user-select: none;
   vertical-align: middle;
+  background-clip: padding-box;
 }
 a.dso-primary:focus, a.dso-primary:focus-visible,
 button.dso-primary:focus,
@@ -231,6 +232,7 @@ label.dso-secondary {
   text-align: start;
   user-select: none;
   vertical-align: middle;
+  background-clip: padding-box;
 }
 a.dso-secondary:focus, a.dso-secondary:focus-visible,
 button.dso-secondary:focus,
@@ -488,6 +490,7 @@ label.dso-tertiary {
   text-align: start;
   user-select: none;
   vertical-align: middle;
+  background-clip: padding-box;
 }
 a.dso-tertiary:focus, a.dso-tertiary:focus-visible,
 button.dso-tertiary:focus,
@@ -512,18 +515,163 @@ label.dso-tertiary.download::after {
 }
 a.dso-tertiary,
 button.dso-tertiary,
+label.dso-tertiary {
+  display: inline-block;
+  font-size: 1em;
+  font-weight: 500;
+  margin-block-end: 0;
+  text-decoration: none;
+  touch-action: manipulation;
+  text-align: start;
+  user-select: none;
+  vertical-align: middle;
+  background-clip: padding-box;
+}
+a.dso-tertiary:focus, a.dso-tertiary:focus-visible,
+button.dso-tertiary:focus,
+button.dso-tertiary:focus-visible,
+label.dso-tertiary:focus,
+label.dso-tertiary:focus-visible {
+  outline-offset: 2px;
+}
+a.dso-tertiary:active,
+button.dso-tertiary:active,
+label.dso-tertiary:active {
+  outline: 0;
+}
+a.dso-tertiary.extern::after, a.dso-tertiary.download::after,
+button.dso-tertiary.extern::after,
+button.dso-tertiary.download::after,
+label.dso-tertiary.extern::after,
+label.dso-tertiary.download::after {
+  content: "";
+  display: inline-block;
+  margin-inline-start: 8px;
+}
+a.dso-tertiary,
+button.dso-tertiary,
+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);
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 4px;
+  line-height: 1.5;
+  min-inline-size: 56px;
+  padding-block: 11px;
+  padding-inline: 15px;
+}
+a.dso-tertiary:hover,
+button.dso-tertiary:hover,
+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);
+}
+a.dso-tertiary:active,
+button.dso-tertiary:active,
+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);
+}
+a.dso-tertiary[disabled], a.dso-tertiary[disabled]:hover,
+button.dso-tertiary[disabled],
+button.dso-tertiary[disabled]:hover,
+label.dso-tertiary[disabled],
+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);
+}
+a.dso-tertiary.dso-small,
+button.dso-tertiary.dso-small,
+label.dso-tertiary.dso-small {
+  line-height: 1rem;
+}
+a.dso-tertiary.dso-small dso-icon, a.dso-tertiary.dso-small.extern::after, a.dso-tertiary.dso-small.download::after, a.dso-tertiary.dso-small.dso-spinner::before,
+button.dso-tertiary.dso-small dso-icon,
+button.dso-tertiary.dso-small.extern::after,
+button.dso-tertiary.dso-small.download::after,
+button.dso-tertiary.dso-small.dso-spinner::before,
+label.dso-tertiary.dso-small dso-icon,
+label.dso-tertiary.dso-small.extern::after,
+label.dso-tertiary.dso-small.download::after,
+label.dso-tertiary.dso-small.dso-spinner::before {
+  margin-block-end: -4px;
+  margin-block-start: -4px;
+}
+a.dso-tertiary.dso-small.dso-spinner-left::before,
+button.dso-tertiary.dso-small.dso-spinner-left::before,
+label.dso-tertiary.dso-small.dso-spinner-left::before {
+  block-size: 16px;
+  inline-size: 16px;
+}
+a.dso-tertiary.dso-small.dso-spinner-right::after,
+button.dso-tertiary.dso-small.dso-spinner-right::after,
+label.dso-tertiary.dso-small.dso-spinner-right::after {
+  block-size: 16px;
+  inline-size: 16px;
+}
+a.dso-tertiary.dso-extra-small,
+button.dso-tertiary.dso-extra-small,
+label.dso-tertiary.dso-extra-small {
+  line-height: 1rem;
+}
+a.dso-tertiary.dso-extra-small dso-icon, a.dso-tertiary.dso-extra-small.extern::after, a.dso-tertiary.dso-extra-small.download::after, a.dso-tertiary.dso-extra-small.dso-spinner::before,
+button.dso-tertiary.dso-extra-small dso-icon,
+button.dso-tertiary.dso-extra-small.extern::after,
+button.dso-tertiary.dso-extra-small.download::after,
+button.dso-tertiary.dso-extra-small.dso-spinner::before,
+label.dso-tertiary.dso-extra-small dso-icon,
+label.dso-tertiary.dso-extra-small.extern::after,
+label.dso-tertiary.dso-extra-small.download::after,
+label.dso-tertiary.dso-extra-small.dso-spinner::before {
+  margin-block-end: -4px;
+  margin-block-start: -4px;
+}
+a.dso-tertiary.dso-extra-small.dso-spinner-left::before,
+button.dso-tertiary.dso-extra-small.dso-spinner-left::before,
+label.dso-tertiary.dso-extra-small.dso-spinner-left::before {
+  block-size: 16px;
+  inline-size: 16px;
+}
+a.dso-tertiary.dso-extra-small.dso-spinner-right::after,
+button.dso-tertiary.dso-extra-small.dso-spinner-right::after,
+label.dso-tertiary.dso-extra-small.dso-spinner-right::after {
+  block-size: 16px;
+  inline-size: 16px;
+}
+a.dso-tertiary.dso-extra-small,
+button.dso-tertiary.dso-extra-small,
+label.dso-tertiary.dso-extra-small {
+  padding-block: 9px;
+}
+a.dso-tertiary dso-icon:has(+ span:not(.sr-only)),
+button.dso-tertiary dso-icon:has(+ span:not(.sr-only)),
+label.dso-tertiary dso-icon:has(+ span:not(.sr-only)) {
+  margin-inline-start: -8px;
+}
+a.dso-tertiary span:not(.sr-only) + dso-icon,
+button.dso-tertiary span:not(.sr-only) + dso-icon,
+label.dso-tertiary span:not(.sr-only) + dso-icon {
+  margin-inline-start: 8px;
+  margin-inline-end: -8px;
+}
+a.dso-tertiary dso-icon + span:not(.sr-only),
+button.dso-tertiary dso-icon + span:not(.sr-only),
+label.dso-tertiary dso-icon + span:not(.sr-only) {
+  margin-inline-start: 8px;
+}
+a.dso-tertiary,
+button.dso-tertiary,
 label.dso-tertiary {
   border: 0;
-  color: #39870c;
   line-height: 1;
   padding: 0;
   background-color: transparent;
 }
-a.dso-tertiary[disabled],
-button.dso-tertiary[disabled],
-label.dso-tertiary[disabled] {
-  color: #afcf9d;
-}
 a.dso-tertiary[disabled].dso-spinner-left, a.dso-tertiary[disabled].dso-spinner-right,
 button.dso-tertiary[disabled].dso-spinner-left,
 button.dso-tertiary[disabled].dso-spinner-right,
@@ -534,15 +682,9 @@ label.dso-tertiary[disabled].dso-spinner-right {
 a.dso-tertiary:not([disabled]):hover,
 button.dso-tertiary:not([disabled]):hover,
 label.dso-tertiary:not([disabled]):hover {
-  color: #275937;
   text-decoration: underline;
   text-underline-position: under;
 }
-a.dso-tertiary:not([disabled]):active,
-button.dso-tertiary:not([disabled]):active,
-label.dso-tertiary:not([disabled]):active {
-  color: #173521;
-}
 a.dso-tertiary.dso-align,
 button.dso-tertiary.dso-align,
 label.dso-tertiary.dso-align {
@@ -675,6 +817,7 @@ label.dso-map {
   text-align: start;
   user-select: none;
   vertical-align: middle;
+  background-clip: padding-box;
 }
 a.dso-map:focus, a.dso-map:focus-visible,
 button.dso-map:focus,

package/dist/collection/components/tijdreis-banner/tijdreis-banner.css

@@ -27,6 +27,36 @@
 }
 :host {
   --_dso-icon-button-tertiary-color: #fff;
+  --_dso-icon-button-tertiary-hover-color: #e5e5e5;
+  --_dso-icon-button-tertiary-disabled-color: #b2b2b2;
+  --_dso-button-primary-background-color: #fff;
+  --_dso-button-primary-hover-background-color: rgba(255, 255, 255, 0.8);
+  --_dso-button-primary-active-background-color: #f2f2f2;
+  --_dso-button-primary-disabled-background-color: rgba(255, 255, 255, 0.6);
+  --_dso-button-primary-border-color: #fff;
+  --_dso-button-primary-hover-border-color: rgba(255, 255, 255, 0.8);
+  --_dso-button-primary-active-border-color: #f2f2f2;
+  --_dso-button-primary-disabled-border-color: rgba(255, 255, 255, 0.6);
+  --_dso-button-primary-color: #191919;
+  --_dso-button-primary-hover-color: #191919;
+  --_dso-button-primary-active-color: #191919;
+  --_dso-button-primary-disabled-color: #666;
+  --_dso-button-secondary-background-color: none;
+  --_dso-button-secondary-hover-background-color: rgba(255, 255, 255, 0.2);
+  --_dso-button-secondary-active-background-color: rgba(255, 255, 255, 0.4);
+  --_dso-button-secondary-disabled-background-color: none;
+  --_dso-button-secondary-border-color: #fff;
+  --_dso-button-secondary-hover-border-color: #fff;
+  --_dso-button-secondary-active-border-color: rgba(255, 255, 255, 0.4);
+  --_dso-button-secondary-disabled-border-color: rgba(255, 255, 255, 0.7);
+  --_dso-button-secondary-color: #fff;
+  --_dso-button-secondary-hover-color: #fff;
+  --_dso-button-secondary-active-color: #fff;
+  --_dso-button-secondary-disabled-color: rgba(255, 255, 255, 0.7);
+  --_dso-button-tertiary-color: #fff;
+  --_dso-button-tertiary-hover-color: #fff;
+  --_dso-button-tertiary-active-color: #fff;
+  --_dso-button-tertiary-disabled-color: #b2b2b2;
   background-color: #8b4a6a;
   color: #fff;
   display: grid;

package/dist/collection/components/viewer-grid/viewer-grid.css

@@ -418,6 +418,7 @@ button::-moz-focus-inner {
     text-align: start;
     user-select: none;
     vertical-align: middle;
+    background-clip: padding-box;
   }
   .dso-tertiary:focus, .dso-tertiary:focus-visible {
     outline-offset: 2px;
@@ -425,27 +426,107 @@ button::-moz-focus-inner {
   .dso-tertiary:active {
     outline: 0;
   }
+  .dso-tertiary {
+    display: inline-block;
+    font-size: 1em;
+    font-weight: 500;
+    margin-block-end: 0;
+    text-decoration: none;
+    touch-action: manipulation;
+    text-align: start;
+    user-select: none;
+    vertical-align: middle;
+    background-clip: padding-box;
+  }
+  .dso-tertiary:focus, .dso-tertiary:focus-visible {
+    outline-offset: 2px;
+  }
+  .dso-tertiary:active {
+    outline: 0;
+  }
+  .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);
+    border-width: 1px;
+    border-style: solid;
+    border-radius: 4px;
+    line-height: 1.5;
+    min-inline-size: 56px;
+    padding-block: 11px;
+    padding-inline: 15px;
+  }
+  .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);
+  }
+  .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);
+  }
+  .dso-tertiary[disabled], .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);
+  }
+  .dso-tertiary.dso-small {
+    line-height: 1rem;
+  }
+  .dso-tertiary.dso-small dso-icon, .dso-tertiary.dso-small.extern::after, .dso-tertiary.dso-small.download::after, .dso-tertiary.dso-small.dso-spinner::before {
+    margin-block-end: -4px;
+    margin-block-start: -4px;
+  }
+  .dso-tertiary.dso-small.dso-spinner-left::before {
+    block-size: 16px;
+    inline-size: 16px;
+  }
+  .dso-tertiary.dso-small.dso-spinner-right::after {
+    block-size: 16px;
+    inline-size: 16px;
+  }
+  .dso-tertiary.dso-extra-small {
+    line-height: 1rem;
+  }
+  .dso-tertiary.dso-extra-small dso-icon, .dso-tertiary.dso-extra-small.extern::after, .dso-tertiary.dso-extra-small.download::after, .dso-tertiary.dso-extra-small.dso-spinner::before {
+    margin-block-end: -4px;
+    margin-block-start: -4px;
+  }
+  .dso-tertiary.dso-extra-small.dso-spinner-left::before {
+    block-size: 16px;
+    inline-size: 16px;
+  }
+  .dso-tertiary.dso-extra-small.dso-spinner-right::after {
+    block-size: 16px;
+    inline-size: 16px;
+  }
+  .dso-tertiary.dso-extra-small {
+    padding-block: 9px;
+  }
+  .dso-tertiary dso-icon:has(+ span:not(.sr-only)) {
+    margin-inline-start: -8px;
+  }
+  .dso-tertiary span:not(.sr-only) + dso-icon {
+    margin-inline-start: 8px;
+    margin-inline-end: -8px;
+  }
+  .dso-tertiary dso-icon + span:not(.sr-only) {
+    margin-inline-start: 8px;
+  }
   .dso-tertiary {
     border: 0;
-    color: #39870c;
     line-height: 1;
     padding: 0;
     background-color: transparent;
   }
-  .dso-tertiary[disabled] {
-    color: #afcf9d;
-  }
   .dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {
     color: #39870c;
   }
   .dso-tertiary:not([disabled]):hover {
-    color: #275937;
     text-decoration: underline;
     text-underline-position: under;
   }
-  .dso-tertiary:not([disabled]):active {
-    color: #173521;
-  }
   .dso-tertiary.dso-align {
     line-height: calc(1.5em - 1px);
     padding-block: 11px;

package/dist/components/alert.js

@@ -25,7 +25,7 @@ const translations = {
     },
 };
 
-const alertCss = () => `:host{display:block}:host(:not(:first-child)){margin-block-start:24px}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:rect(0 0 0 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}.alert.dso-compact::before{content:"";position:absolute;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}.alert.dso-compact{min-block-size:16px}.alert.alert-success{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.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"))}.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"))}.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"))}.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"))}.alert.alert-success{--_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:#e4f1d4;color:#191919;border-color:var(--_dso-alert-success-border-color, #e4f1d4)}.alert.alert-success.dso-compact::before{background-color:#39870c}.alert.alert-error{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.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"))}.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"))}.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"))}.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"))}.alert.alert-error{--_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:#f5d8dc;color:#191919;border-color:var(--_dso-alert-error-border-color, #f5d8dc)}.alert.alert-error.dso-compact::before{background-color:#ce3f51}.alert.alert-warning{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.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"))}.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"))}.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"))}.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"))}.alert.alert-warning{--_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:#f8f6cc;color:#191919;border-color:var(--_dso-alert-warning-border-color, #f8f6cc)}.alert.alert-warning.dso-compact::before{background-color:#dcd400}.alert.alert-info{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.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"))}.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"))}.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"))}.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"))}.alert.alert-info{--_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:#e1ecf7;color:#191919;border-color:var(--_dso-alert-info-border-color, #e1ecf7)}.alert.alert-info.dso-compact::before{background-color:#6ca4d9}.alert dso-icon-button{position:absolute;inset-block-start:7px;inset-inline-end:7px}.alert.dso-compact{min-block-size:16px}`;
+const alertCss = () => `:host{display:block}:host(:not(:first-child)){margin-block-start:24px}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:rect(0 0 0 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}.alert.dso-compact::before{content:"";position:absolute;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}.alert.dso-compact{min-block-size:16px}.alert.alert-success{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.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"))}.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"))}.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"))}.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"))}.alert.alert-success{--_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;--_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:#e4f1d4;color:#191919;border-color:var(--_dso-alert-success-border-color, #e4f1d4)}.alert.alert-success.dso-compact::before{background-color:#39870c}.alert.alert-error{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.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"))}.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"))}.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"))}.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"))}.alert.alert-error{--_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;--_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;border-color:var(--_dso-alert-error-border-color, #f5d8dc)}.alert.alert-error.dso-compact::before{background-color:#ce3f51}.alert.alert-warning{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.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"))}.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"))}.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"))}.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"))}.alert.alert-warning{--_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;--_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:#f8f6cc;color:#191919;border-color:var(--_dso-alert-warning-border-color, #f8f6cc)}.alert.alert-warning.dso-compact::before{background-color:#dcd400}.alert.alert-info{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.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"))}.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"))}.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"))}.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"))}.alert.alert-info{--_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;--_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:#e1ecf7;color:#191919;border-color:var(--_dso-alert-info-border-color, #e1ecf7)}.alert.alert-info.dso-compact::before{background-color:#6ca4d9}.alert dso-icon-button{position:absolute;inset-block-start:7px;inset-inline-end:7px}.alert.dso-compact{min-block-size:16px}`;
 
 const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
     constructor(registerHost) {

package/dist/components/alert.js.map

@@ -1 +1 @@
-{"file":"alert.js","mappings":";;;;;;AAEO,MAAM,YAAY,GAAa;AACpC,IAAA,EAAE,EAAE;AACF,QAAA,WAAW,EAAE;AACX,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,IAAI,EAAE,QAAQ;AACd,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,KAAK,EAAE,OAAO;AACf,SAAA;AACF,KAAA;AACD,IAAA,EAAE,EAAE;AACF,QAAA,WAAW,EAAE;AACX,YAAA,KAAK,EAAE,SAAS;AAChB,YAAA,OAAO,EAAE,QAAQ;AACjB,YAAA,IAAI,EAAE,WAAW;AACjB,YAAA,OAAO,EAAE,cAAc;AACvB,YAAA,KAAK,EAAE,MAAM;AACd,SAAA;AACF,KAAA;CACF;;ACrBD,MAAM,QAAQ,GAAG,MAAM,CAAC,87MAA87M,CAAC;;MCa18M,KAAK,iBAAAA,kBAAA,CAAA,MAAA,KAAA,SAAA,WAAA,CAAA;AALlB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AA2BE;;AAEG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAQR,QAAA,IAAA,CAAA,IAAI,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC;AA4BnD;IA1BC,MAAM,GAAA;QACJ,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;QACrC,IAAI,CAAC,MAAM,EAAE;YACX,MAAM,IAAI,KAAK,CAAC,CAAA,eAAA,EAAkB,IAAI,CAAC,MAAM,CAAE,CAAA,CAAC;;AAGlD,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,CAAS,MAAA,EAAA,IAAI,CAAC,MAAM,EAAE,EAAE,EAAE,aAAa,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,EAC7E,IAAI,EAAE,IAAI,CAAC,SAAS,GAAG,OAAO,GAAG,SAAS,EAAA,EAEzC,CAAC,IAAI,CAAC,OAAO,IAAI,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,KAAK,EAAC,aAAa,EAAC,IAAI,EAAE,SAAS,GAAG,IAAI,CAAC,MAAM,EAAI,CAAA,EACjF,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EAAE,MAAM,EAAS,GAAA,CAAA,EACtC,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EAEZ,IAAI,CAAC,QAAQ,KACZ,wEACE,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,EACzB,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,EACZ,UAAU,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,EAC3D,CAAA,CACH,CACG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/alert/alert.i18n.ts","src/components/alert/alert.scss?tag=dso-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n  en: {\r\n    \"dso-alert\": {\r\n      close: \"Close\",\r\n      success: \"Success\",\r\n      info: \"Notice\",\r\n      warning: \"Warning\",\r\n      error: \"Error\",\r\n    },\r\n  },\r\n  nl: {\r\n    \"dso-alert\": {\r\n      close: \"Sluiten\",\r\n      success: \"Gelukt\",\r\n      info: \"Opmerking\",\r\n      warning: \"Waarschuwing\",\r\n      error: \"Fout\",\r\n    },\r\n  },\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/alert\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n:host(:not(:first-child)) {\r\n  margin-block-start: units.$u3;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.alert {\r\n  @include alert.root();\r\n\r\n  dso-icon-button {\r\n    position: absolute;\r\n    inset-block-start: units.$u1 - alert.$border-size;\r\n    inset-inline-end: units.$u1 - alert.$border-size;\r\n  }\r\n\r\n  &.dso-compact {\r\n    min-block-size: alert.$inline-padding;\r\n  }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Prop, h } from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { translations } from \"./alert.i18n\";\r\nimport { AlertCloseEvent } from \"./alert.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-alert\",\r\n  styleUrl: \"alert.scss\",\r\n  shadow: true,\r\n})\r\nexport class Alert {\r\n  @Element()\r\n  host!: HTMLDsoAlertElement;\r\n\r\n  /**\r\n   * Set status of alert\r\n   */\r\n  @Prop({ reflect: true })\r\n  status!: \"success\" | \"info\" | \"warning\" | \"error\";\r\n\r\n  /**\r\n   * Whether or not to show the role attribute with value \"alert\". To control the tooltip add the `role-alert` attribute.\r\n   */\r\n  @Prop()\r\n  roleAlert?: boolean;\r\n\r\n  /**\r\n   * Show alert as compact variant (without icon)\r\n   */\r\n  @Prop({ reflect: true })\r\n  compact?: boolean;\r\n\r\n  /**\r\n   * When `false` the close button in the alert will not be rendered.\r\n   */\r\n  @Prop()\r\n  closable = false;\r\n\r\n  /**\r\n   * Emitted when the user closes the Alert.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<AlertCloseEvent>;\r\n\r\n  private text = i18n(() => this.host, translations);\r\n\r\n  render() {\r\n    const status = this.text(this.status);\r\n    if (!status) {\r\n      throw new Error(`Invalid status ${this.status}`);\r\n    }\r\n\r\n    return (\r\n      <div\r\n        class={clsx(\"alert\", `alert-${this.status}`, { \"dso-compact\": this.compact })}\r\n        role={this.roleAlert ? \"alert\" : undefined}\r\n      >\r\n        {!this.compact && <dso-icon class=\"icon-status\" icon={\"status-\" + this.status} />}\r\n        <span class=\"sr-only\">{status}:</span>\r\n        <slot></slot>\r\n\r\n        {this.closable && (\r\n          <dso-icon-button\r\n            label={this.text(\"close\")}\r\n            variant=\"tertiary\"\r\n            icon=\"times\"\r\n            onDsoClick={(e) => this.dsoClose.emit({ originalEvent: e })}\r\n          />\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"alert.js","mappings":";;;;;;AAEO,MAAM,YAAY,GAAa;AACpC,IAAA,EAAE,EAAE;AACF,QAAA,WAAW,EAAE;AACX,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,IAAI,EAAE,QAAQ;AACd,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,KAAK,EAAE,OAAO;AACf,SAAA;AACF,KAAA;AACD,IAAA,EAAE,EAAE;AACF,QAAA,WAAW,EAAE;AACX,YAAA,KAAK,EAAE,SAAS;AAChB,YAAA,OAAO,EAAE,QAAQ;AACjB,YAAA,IAAI,EAAE,WAAW;AACjB,YAAA,OAAO,EAAE,cAAc;AACvB,YAAA,KAAK,EAAE,MAAM;AACd,SAAA;AACF,KAAA;CACF;;ACrBD,MAAM,QAAQ,GAAG,MAAM,CAAC,0lOAA0lO,CAAC;;MCatmO,KAAK,iBAAAA,kBAAA,CAAA,MAAA,KAAA,SAAA,WAAA,CAAA;AALlB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AA2BE;;AAEG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAQR,QAAA,IAAA,CAAA,IAAI,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC;AA4BnD;IA1BC,MAAM,GAAA;QACJ,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;QACrC,IAAI,CAAC,MAAM,EAAE;YACX,MAAM,IAAI,KAAK,CAAC,CAAA,eAAA,EAAkB,IAAI,CAAC,MAAM,CAAE,CAAA,CAAC;;AAGlD,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,CAAS,MAAA,EAAA,IAAI,CAAC,MAAM,EAAE,EAAE,EAAE,aAAa,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,EAC7E,IAAI,EAAE,IAAI,CAAC,SAAS,GAAG,OAAO,GAAG,SAAS,EAAA,EAEzC,CAAC,IAAI,CAAC,OAAO,IAAI,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,KAAK,EAAC,aAAa,EAAC,IAAI,EAAE,SAAS,GAAG,IAAI,CAAC,MAAM,EAAI,CAAA,EACjF,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EAAE,MAAM,EAAS,GAAA,CAAA,EACtC,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EAEZ,IAAI,CAAC,QAAQ,KACZ,wEACE,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,EACzB,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,EACZ,UAAU,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,EAC3D,CAAA,CACH,CACG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/alert/alert.i18n.ts","src/components/alert/alert.scss?tag=dso-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n  en: {\r\n    \"dso-alert\": {\r\n      close: \"Close\",\r\n      success: \"Success\",\r\n      info: \"Notice\",\r\n      warning: \"Warning\",\r\n      error: \"Error\",\r\n    },\r\n  },\r\n  nl: {\r\n    \"dso-alert\": {\r\n      close: \"Sluiten\",\r\n      success: \"Gelukt\",\r\n      info: \"Opmerking\",\r\n      warning: \"Waarschuwing\",\r\n      error: \"Fout\",\r\n    },\r\n  },\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/alert\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n:host(:not(:first-child)) {\r\n  margin-block-start: units.$u3;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.alert {\r\n  @include alert.root();\r\n\r\n  dso-icon-button {\r\n    position: absolute;\r\n    inset-block-start: units.$u1 - alert.$border-size;\r\n    inset-inline-end: units.$u1 - alert.$border-size;\r\n  }\r\n\r\n  &.dso-compact {\r\n    min-block-size: alert.$inline-padding;\r\n  }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Prop, h } from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { translations } from \"./alert.i18n\";\r\nimport { AlertCloseEvent } from \"./alert.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-alert\",\r\n  styleUrl: \"alert.scss\",\r\n  shadow: true,\r\n})\r\nexport class Alert {\r\n  @Element()\r\n  host!: HTMLDsoAlertElement;\r\n\r\n  /**\r\n   * Set status of alert\r\n   */\r\n  @Prop({ reflect: true })\r\n  status!: \"success\" | \"info\" | \"warning\" | \"error\";\r\n\r\n  /**\r\n   * Whether or not to show the role attribute with value \"alert\". To control the tooltip add the `role-alert` attribute.\r\n   */\r\n  @Prop()\r\n  roleAlert?: boolean;\r\n\r\n  /**\r\n   * Show alert as compact variant (without icon)\r\n   */\r\n  @Prop({ reflect: true })\r\n  compact?: boolean;\r\n\r\n  /**\r\n   * When `false` the close button in the alert will not be rendered.\r\n   */\r\n  @Prop()\r\n  closable = false;\r\n\r\n  /**\r\n   * Emitted when the user closes the Alert.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<AlertCloseEvent>;\r\n\r\n  private text = i18n(() => this.host, translations);\r\n\r\n  render() {\r\n    const status = this.text(this.status);\r\n    if (!status) {\r\n      throw new Error(`Invalid status ${this.status}`);\r\n    }\r\n\r\n    return (\r\n      <div\r\n        class={clsx(\"alert\", `alert-${this.status}`, { \"dso-compact\": this.compact })}\r\n        role={this.roleAlert ? \"alert\" : undefined}\r\n      >\r\n        {!this.compact && <dso-icon class=\"icon-status\" icon={\"status-\" + this.status} />}\r\n        <span class=\"sr-only\">{status}:</span>\r\n        <slot></slot>\r\n\r\n        {this.closable && (\r\n          <dso-icon-button\r\n            label={this.text(\"close\")}\r\n            variant=\"tertiary\"\r\n            icon=\"times\"\r\n            onDsoClick={(e) => this.dsoClose.emit({ originalEvent: e })}\r\n          />\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/annotation-locatie.js

@@ -8,7 +8,7 @@ import { d as defineCustomElement$3 } from './renvooi.js';
 import { d as defineCustomElement$2 } from './slide-toggle.js';
 import { d as defineCustomElement$1 } from './tooltip.js';
 
-const annotationCss = () => `a{background-color:transparent;color:var(--link-color);text-decoration:underline;text-underline-offset:15%}a:hover,a:focus-visible{color:var(--link-hover-color);text-decoration:underline}a:active{text-decoration:none}a dso-icon+span,a span+dso-icon{margin-inline-start:8px}a .sr-only+dso-icon{margin-inline-start:0}a:visited{color:var(--link-visited-color)}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:var(--_dso-link-icon-padding-inline-end, 1.5em);background-position:bottom 0 right 0;background-image:var(--_dso-di-background-image, url("./di.svg#download"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:focus-visible{background-image:var(--_dso-di-background-image, url("./di.svg#download-scampi"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:var(--_dso-link-icon-padding-inline-end, 1.5em);background-position:bottom 0 right 0;background-image:var(--_dso-di-background-image, url("./di.svg#external-link"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:focus-visible{background-image:var(--_dso-di-background-image, url("./di.svg#external-link-scampi"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:var(--_dso-link-icon-padding-inline-start, 1.5em);background-position:bottom 0 left 0;background-image:var(--_dso-di-background-image, url("./di.svg#call-grasgroen"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]:focus-visible{background-image:var(--_dso-di-background-image, url("./di.svg#call-scampi"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:var(--_dso-link-icon-padding-inline-start, 1.5em);background-position:bottom 0 left 0;background-image:var(--_dso-di-background-image, url("./di.svg#email-grasgroen"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]:focus-visible{background-image:var(--_dso-di-background-image, url("./di.svg#email-scampi"))}:host{display:block;padding:2px}: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}: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=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=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=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#email-zwart"))}:host([wijzigactie=voegtoe]){--_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:#e4f1d4;color:#191919;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}:host([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=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=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=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-zwart"))}:host([wijzigactie=verwijder]){--_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:#f5d8dc;color:#191919;--_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]){font-family:sans-serif}}*,*::after,*::before{box-sizing:border-box}.annotation-body{display:flex;gap:8px}.annotation-info{flex-grow:1}.annotation-symbol,.annotation-control{flex-shrink:0}.annotation-title{font-weight:500;overflow-wrap:anywhere}.annotation-title,.annotation-data{margin-block:0}.annotation-title .content:has(+dso-label),.annotation-data .content:has(+dso-label){margin-inline-end:4px}.annotation-data{font-size:0.875rem}`;
+const annotationCss = () => `a{background-color:transparent;color:var(--link-color);text-decoration:underline;text-underline-offset:15%}a:hover,a:focus-visible{color:var(--link-hover-color);text-decoration:underline}a:active{text-decoration:none}a dso-icon+span,a span+dso-icon{margin-inline-start:8px}a .sr-only+dso-icon{margin-inline-start:0}a:visited{color:var(--link-visited-color)}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:var(--_dso-link-icon-padding-inline-end, 1.5em);background-position:bottom 0 right 0;background-image:var(--_dso-di-background-image, url("./di.svg#download"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:focus-visible{background-image:var(--_dso-di-background-image, url("./di.svg#download-scampi"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:var(--_dso-link-icon-padding-inline-end, 1.5em);background-position:bottom 0 right 0;background-image:var(--_dso-di-background-image, url("./di.svg#external-link"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:focus-visible{background-image:var(--_dso-di-background-image, url("./di.svg#external-link-scampi"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:var(--_dso-link-icon-padding-inline-start, 1.5em);background-position:bottom 0 left 0;background-image:var(--_dso-di-background-image, url("./di.svg#call-grasgroen"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]:focus-visible{background-image:var(--_dso-di-background-image, url("./di.svg#call-scampi"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:var(--_dso-link-icon-padding-inline-start, 1.5em);background-position:bottom 0 left 0;background-image:var(--_dso-di-background-image, url("./di.svg#email-grasgroen"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]:focus-visible{background-image:var(--_dso-di-background-image, url("./di.svg#email-scampi"))}:host{display:block;padding:2px}: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}: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=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=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=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#email-zwart"))}:host([wijzigactie=voegtoe]){--_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;--_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:#e4f1d4;color:#191919;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}:host([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=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=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=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-zwart"))}:host([wijzigactie=verwijder]){--_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;--_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;--_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]){font-family:sans-serif}}*,*::after,*::before{box-sizing:border-box}.annotation-body{display:flex;gap:8px}.annotation-info{flex-grow:1}.annotation-symbol,.annotation-control{flex-shrink:0}.annotation-title{font-weight:500;overflow-wrap:anywhere}.annotation-title,.annotation-data{margin-block:0}.annotation-title .content:has(+dso-label),.annotation-data .content:has(+dso-label){margin-inline-end:4px}.annotation-data{font-size:0.875rem}`;
 
 const AnnotationLocatie = /*@__PURE__*/ proxyCustomElement(class AnnotationLocatie extends HTMLElement {
     constructor(registerHost) {